Merge pull request #179 from KaiShoya/bugfix/#178_QR_modal_not_working

fix(qr): QRコードのモーダルが表示されない不具合を修正した close #178

components/molecules/QrModal.vue

@@ -1,17 +1,5 @@
-<script
-  setup
-  lang="ts"
->
-import { storeToRefs } from 'pinia'
-import { useLayoutStore } from '~/store/layout'
-
-const { showQrModal } = storeToRefs(useLayoutStore())
-</script>
-
 <template>
-  <o-modal v-model:active="showQrModal">
-    <p style="text-align: center">
-      <img src="/qrcode.svg">
-    </p>
-  </o-modal>
+  <p style="text-align: center">
+    <img src="/qrcode.svg">
+  </p>
 </template>

components/organisms/ShowQrModal.vue

@@ -2,20 +2,25 @@
   setup
   lang="ts"
 >
-import { storeToRefs } from 'pinia'
-import { useLayoutStore } from '~/store/layout'
+import { useOruga } from '@oruga-ui/oruga-next'
+import QrModal from '~/components/molecules/QrModal.vue'
 
-const { showQrModal } = storeToRefs(useLayoutStore())
+const oruga = useOruga()
+const cardModal = () => {
+  oruga.modal.open({
+    component: QrModal,
+    trapFocus: true,
+    destroyOnHide: false,
+  })
+}
 </script>
 
 <template>
   <a
     class="navbar-item"
     exact-active-class="is-active"
-    @click="showQrModal = true"
+    @click="cardModal()"
   >
     {{ $t('show_qr') }}
   </a>
-
-  <MoleculesQrModal />
 </template>

package.json

@@ -1,6 +1,6 @@
 {
   "name": "drink-counter",
-  "version": "1.12.1",
+  "version": "1.12.2",
   "license": "MIT",
   "engines": {
     "node": "20"