changes

app/components/imports/EditProductButton.vue

@@ -2,19 +2,23 @@
 const props = defineProps({
   variant: Object,
 });
-const showModal = ref(null);
 </script>
 
 <template>
   <a
     @click="
-      showModal = {
-        component: 'imports/EditProduct',
-        title: 'Cập nhật sản phẩm',
-        width: '90%',
-        height: '400px',
-        vbind: { variant: props.variant },
-      }
+      $emit('clickevent', {
+        name: 'dataevent',
+        data: {
+          modal: {
+            title: 'Cập nhật sản phẩm',
+            width: '90%',
+            height: '400px',
+            component: 'imports/EditProduct',
+            vbind: { variant: props.variant },
+          },
+        },
+      })
     "
   >
     <span class="icon">
@@ -24,9 +28,4 @@ const showModal = ref(null);
       />
     </span>
   </a>
-  <Modal
-    v-if="showModal"
-    v-bind="showModal"
-    @close="showModal = null"
-  />
 </template>

app/components/imports/IMEIButton.vue

@@ -2,32 +2,30 @@
 const props = defineProps({
   variant: Object,
 });
-const showModal = ref(null);
 </script>
 
 <template>
-  <button
+  <a
     @click="
-      showModal = {
-        component: 'imports/IMEIs',
-        title: 'IMEIs',
-        width: '80%',
-        height: '400px',
-        vbind: { variant: props.variant },
-      }
+      $emit('clickevent', {
+        name: 'dataevent',
+        data: {
+          modal: {
+            component: 'imports/IMEIs',
+            title: 'IMEIs',
+            width: '80%',
+            height: '400px',
+            vbind: { variant: props.variant },
+          },
+        },
+      })
     "
-    class="button is-small is-primary is-ghost"
   >
     <span class="icon">
       <Icon
         name="mdi:launch"
-        :size="22"
+        :size="18"
       />
     </span>
-  </button>
-  <Modal
-    v-if="showModal"
-    v-bind="showModal"
-    @close="showModal = null"
-  />
+  </a>
 </template>