changes

app/components/dialog/Confirm.vue

@@ -1,45 +1,54 @@
 <template>
-  <div>
+  <div class="confirm">
     <p v-html="content"></p>
-    <p class="border-bottom mt-3 mb-5"></p>
-    <div class="field is-grouped">
-      <div class="control is-expanded">
-        <button
-          class="button is-primary has-text-white"
-          @click="confirm()"
+    <Teleport
+      defer
+      to=".modal-card:has(.confirm) .modal-card-foot"
+    >
+      <div class="field is-grouped">
+        <div class="control is-expanded">
+          <div class="buttons">
+            <button
+              class="button is-primary has-text-white"
+              @click="confirm()"
+            >
+              Đồng ý
+            </button>
+            <button
+              class="button is-white"
+              @click="cancel()"
+            >
+              Hủy
+            </button>
+          </div>
+        </div>
+        <div
+          class="control"
+          v-if="duration"
         >
-          Đồng ý
-        </button>
-        <button
-          class="button is-dark ml-5"
-          @click="cancel()"
-        >
-          Hủy bỏ
-        </button>
+          <CountDown
+            :duration="duration"
+            @close="cancel()"
+          />
+        </div>
       </div>
-      <div
-        class="control"
-        v-if="duration"
-      >
-        <CountDown
-          v-bind="{ duration: duration }"
-          @close="cancel()"
-        ></CountDown>
-      </div>
-    </div>
+    </Teleport>
   </div>
 </template>
-<script>
-export default {
-  props: ["content", "duration"],
-  methods: {
-    cancel() {
-      this.$emit("close");
-    },
-    confirm() {
-      this.$emit("modalevent", { name: "confirm" });
-      this.cancel();
-    },
-  },
-};
+<script setup>
+const props = defineProps({
+  content: String,
+  duration: Number,
+});
+
+const emit = defineEmits(["close", "modalevent"]);
+
+function cancel() {
+  emit("close");
+}
+
+function confirm() {
+  emit("modalevent", { name: "confirm" });
+  cancel();
+}
 </script>