changes

app/components/dialog/Confirm.vue

@@ -5,37 +5,35 @@
       defer
       to=".modal-card:has(.confirm) .modal-card-foot"
     >
-      <div class="field is-grouped">
+      <div class="field is-grouped w-full is-align-items-center">
         <div class="control is-expanded">
           <div class="buttons">
             <button
               class="button is-primary has-text-white"
-              @click="confirm()"
+              @click="confirm"
             >
               Đồng ý
             </button>
             <button
               class="button is-white"
-              @click="cancel()"
+              @click="cancel"
             >
               Hủy
             </button>
           </div>
         </div>
-        <div
-          class="control"
+        <CountDown
           v-if="duration"
-        >
-          <CountDown
-            :duration="duration"
-            @close="cancel()"
-          />
-        </div>
+          :duration="duration"
+          @close="cancel"
+        />
       </div>
     </Teleport>
   </div>
 </template>
 <script setup>
+import CountDown from "@/components/dialog/CountDown.vue";
+
 const props = defineProps({
   content: String,
   duration: Number,

app/components/dialog/CountDown.vue

@@ -1,12 +1,14 @@
 <template>
   <div id="countdown">
-    <div id="countdown-number"></div>
+    <div
+      ref="countdownNumber"
+      style="display: inline-block; line-height: 40px"
+    ></div>
     <svg>
       <circle
         r="18"
         cx="20"
         cy="20"
-        color="red"
       ></circle>
     </svg>
   </div>
@@ -21,18 +23,19 @@ export default {
     };
   },
   mounted() {
-    var countdownNumberEl = document.getElementById("countdown-number");
-    countdownNumberEl.textContent = this.countdown;
+    this.$refs.countdownNumber.textContent = this.countdown;
     this.timer = setInterval(() => this.startCount(), 1000);
   },
+  unmounted() {
+    clearInterval(this.timer);
+  },
   beforeDestroy() {
     clearInterval(this.timer);
   },
   methods: {
     startCount() {
       this.countdown -= 1;
-      var countdownNumberEl = document.getElementById("countdown-number");
-      countdownNumberEl.textContent = this.countdown;
+      this.$refs.countdownNumber.textContent = this.countdown;
       if (this.countdown === 0) {
         clearInterval(this.timer);
         this.$emit("close");
@@ -49,12 +52,7 @@ export default {
   width: 40px;
   text-align: center;
 }
-#countdown-number {
-  color: black;
-  display: inline-block;
-  line-height: 40px;
-}
-:deep(svg) {
+svg {
   position: absolute;
   top: 0;
   right: 0;
@@ -62,12 +60,12 @@ export default {
   height: 40px;
   transform: rotateY(-180deg) rotateZ(-90deg);
 }
-:deep(svg circle) {
+svg circle {
   stroke-dasharray: 113px;
   stroke-dashoffset: 0px;
   stroke-linecap: round;
   stroke-width: 2px;
-  stroke: black;
+  stroke: var(--bulma-primary);
   fill: none;
   animation: countdown 10s linear infinite forwards;
 }