Initial commit

app/components/dialog/CountDown.vue

@@ -0,0 +1,79 @@
+<template>
+<div id="countdown">
+  <span class="fs-15 has-text-grey-dark" style="line-height: 40px">{{ countdown }}</span>
+  <svg>
+    <circle id="track" r="18" cx="20" cy="20"></circle>
+    <circle id="indicator" r="18" cx="20" cy="20"></circle>
+  </svg>
+</div>
+</template>
+<script setup>
+const props = defineProps({
+  duration: Number
+});
+const emit = defineEmits(['close']);
+const timer = ref();
+const countdown = ref(props.duration || 10);
+
+function startCount() {
+  countdown.value -= 1;
+  if (countdown.value === 0) {
+    clearInterval(timer.value);
+    emit('close');
+  }
+}
+
+onMounted(() => {
+  timer.value = setInterval(startCount, 1000);
+});
+
+onBeforeUnmount(() => {
+  clearInterval(timer.value);
+});
+</script>
+<style scoped>
+#countdown {
+  position: relative;
+  margin: auto;
+  height: 40px;
+  width: 40px;
+  text-align: center;
+}
+:deep(svg) {
+  position: absolute;
+  top: 0;
+  right: 0;
+  width: 40px;
+  height: 40px;
+  transform: rotateY(-180deg) rotateZ(-90deg);
+}
+#indicator {
+  stroke-dasharray: 113px;
+  stroke-dashoffset: 0px;
+  stroke-linecap: round;
+  stroke-width: 2px;
+  stroke: #204853;
+  fill: none;
+  animation-name: countdown;
+  animation-duration: v-bind('duration + "s"');
+  animation-timing-function: linear;
+  animation-iteration-count: infinite;
+  animation-fill-mode: forwards;
+}
+#track {
+  stroke-dasharray: 113px;
+  stroke-dashoffset: 0px;
+  stroke-linecap: round;
+  stroke-width: 2px;
+  stroke: hsl(0 100 0% / 0.1);
+  fill: none;
+}
+@keyframes countdown {
+  from {
+    stroke-dashoffset: 0px;
+  }
+  to {
+    stroke-dashoffset: 113px;
+  }
+}
+</style>