feat(count-down): add on-complete event

docs/components/count-down.md

@@ -55,3 +55,12 @@ This document is mainly used to describe some features and usage of the ShadcnCo
         ['simple', 'Whether to display the simple version', 'boolean', 'false'],
     ]">
 </ApiTable>
+
+## Count Down Events
+
+<ApiTable title="Events"
+    :headers="['Event', 'Description', 'Callback Parameters']"
+    :columns="[
+        ['on-complete', 'Triggered when the count down is finished', 'void'],
+    ]">
+</ApiTable>

src/ui/count-down/ShadcnCountDown.vue

@@ -5,6 +5,7 @@
         {{ `${ timeLeft.days } : ${ timeLeft.hours } : ${ timeLeft.minutes } : ${ timeLeft.seconds }` }}
       </div>
     </div>
+
     <div v-else class="grid grid-cols-4 gap-4 text-center">
       <!-- Days -->
       <div class="flex flex-col">
@@ -45,8 +46,9 @@
 import { onMounted, onUnmounted, ref } from 'vue'
 import { t } from '@/utils/locale'
 import ShadcnCard from '@/ui/card'
-import { CountDownProps } from '@/ui/count-down/types'
+import { CountDownEmits, CountDownProps } from '@/ui/count-down/types'
 
+const emit = defineEmits<CountDownEmits>()
 const props = withDefaults(defineProps<CountDownProps>(), {
   simple: false
 })
@@ -70,6 +72,7 @@ const calculateTimeLeft = () => {
     if (timer) {
       clearInterval(timer)
     }
+    emit('on-complete')
     return
   }
 

src/ui/count-down/types.ts

@@ -1,4 +1,9 @@
-export interface CountDownProps {
+export interface CountDownProps
+{
     time: Date
     simple?: boolean
 }
+
+export type CountDownEmits = {
+    (e: 'on-complete'): void
+}