feat(count-down): support title and toolbar

devlive-community · Dec 6, 2024 · 88bb8d9 · 88bb8d9
1 parent d829d77
commit 88bb8d9
Show file tree

Hide file tree

Showing 6 changed files with 128 additions and 15 deletions.
diff --git a/docs/components/count-down.md b/docs/components/count-down.md
@@ -46,13 +46,64 @@ This document is mainly used to describe some features and usage of the ShadcnCo
 
 :::
 
+## Title
+
+::: raw
+
+<CodeRunner title="Title">
+    <ShadcnCountDown :time="new Date(Date.now() + 2 * 24 * 60 * 60 * 1000)" title="Count Down" />
+</CodeRunner>
+
+:::
+
+::: details Show code
+
+```vue
+<template>
+  <ShadcnCountDown :time="new Date(Date.now() + 2 * 24 * 60 * 60 * 1000)" title="Count Down" />
+</template>
+```
+
+:::
+
+## Toolbar
+
+::: raw
+
+<CodeRunner title="Toolbar">
+    <ShadcnCountDown title="Count Down" toolbar :time="new Date(Date.now() + 2 * 24 * 60 * 60 * 1000)"/>
+</CodeRunner>
+
+:::
+
+::: details Show code
+
+```vue
+<template>
+  <ShadcnCountDown title="Count Down" toolbar :time="new Date(Date.now() + 2 * 24 * 60 * 60 * 1000)"/>
+</template>
+```
+
+:::
+
 ## Count Down Props
 
 <ApiTable title="Props"
     :headers="['Attribute', 'Description', 'Type', 'Default Value']"
     :columns="[
         ['time', 'The time of the count down', 'date', ''],
         ['simple', 'Whether to display the simple version', 'boolean', 'false'],
+        ['title', 'The title of the count down, only valid when <code>simple</code> is false', 'string', ''],
+        ['toolbar', 'Whether to display the toolbar', 'boolean', 'false'],
+    ]">
+</ApiTable>
+
+## Count Down Slots
+
+<ApiTable title="Slots"
+    :headers="['Slot', 'Description']"
+    :columns="[
+        ['title', 'Count down content'],
     ]">
 </ApiTable>
 

diff --git a/src/App.vue b/src/App.vue
@@ -1,6 +1,8 @@
 <template>
   <div class="p-32">
-    <ShadcnCountDown :time="new Date(Date.now() + 2 * 24 * 60 * 60 * 1000)" />
+    <ShadcnCountDown  title="Activity events"
+                      toolbar
+                      :time="new Date(Date.now() + 2 * 24 * 60 * 60 * 1000)"/>
   </div>
 </template>
 

diff --git a/src/locales/en-US.ts b/src/locales/en-US.ts
@@ -91,7 +91,10 @@ export default {
             day: 'Day',
             hour: 'Hour',
             minute: 'Minute',
-            second: 'Second'
+            second: 'Second',
+            pause: 'Pause',
+            resume: 'Resume',
+            reset: 'Reset'
         }
     }
 }
diff --git a/src/locales/zh-CN.ts b/src/locales/zh-CN.ts
@@ -91,7 +91,10 @@ export default {
             day: '天',
             hour: '时',
             minute: '分',
-            second: '秒'
+            second: '秒',
+            pause: '暂停',
+            resume: '继续',
+            reset: '重置'
         }
     }
 }
diff --git a/src/ui/count-down/ShadcnCountDown.vue b/src/ui/count-down/ShadcnCountDown.vue
@@ -1,40 +1,60 @@
 <template>
-  <ShadcnCard :border="false">
-    <div v-if="simple">
-      <div class="text-2xl font-bold">
-        {{ `${ timeLeft.days } : ${ timeLeft.hours } : ${ timeLeft.minutes } : ${ timeLeft.seconds }` }}
-      </div>
+  <div v-if="simple">
+    <div class="text-2xl font-bold">
+      {{ `${ padNumber(timeLeft.days) } : ${ padNumber(timeLeft.hours) } : ${ padNumber(timeLeft.minutes) } : ${ padNumber(timeLeft.seconds) }` }}
     </div>
+  </div>
+
+  <ShadcnCard v-else :border="false">
+    <template #title>
+      <slot name="title">
+        <div class="mb-2">
+          {{ title }}
+        </div>
+      </slot>
+    </template>
 
-    <div v-else class="grid grid-cols-4 gap-4 text-center">
+    <template v-if="toolbar" #extra>
+      <div class="space-x-2">
+        <ShadcnButton :type="isPaused ? 'primary' : 'warning'" @click="togglePause">
+          {{ isPaused ? t('countDown.text.resume') : t('countDown.text.pause') }}
+        </ShadcnButton>
+
+        <ShadcnButton type="default" @click="onReset">
+          {{ t('countDown.text.reset') }}
+        </ShadcnButton>
+      </div>
+    </template>
+
+    <div class="grid grid-cols-4 gap-4 text-center">
       <!-- Days -->
       <div class="flex flex-col">
         <div class="text-4xl font-bold bg-slate-100 rounded-lg p-4">
-          {{ timeLeft.days }}
+          {{ padNumber(timeLeft.days) }}
         </div>
         <span class="text-sm mt-2">{{ t('countDown.text.day') }}</span>
       </div>
 
       <!-- Hours -->
       <div class="flex flex-col">
         <div class="text-4xl font-bold bg-slate-100 rounded-lg p-4">
-          {{ timeLeft.hours }}
+          {{ padNumber(timeLeft.hours) }}
         </div>
         <span class="text-sm mt-2">{{ t('countDown.text.hour') }}</span>
       </div>
 
       <!-- Minutes -->
       <div class="flex flex-col">
         <div class="text-4xl font-bold bg-slate-100 rounded-lg p-4">
-          {{ timeLeft.minutes }}
+          {{ padNumber(timeLeft.minutes) }}
         </div>
         <span class="text-sm mt-2">{{ t('countDown.text.minute') }}</span>
       </div>
 
       <!-- Seconds -->
       <div class="flex flex-col">
         <div class="text-4xl font-bold bg-slate-100 rounded-lg p-4">
-          {{ timeLeft.seconds }}
+          {{ padNumber(timeLeft.seconds) }}
         </div>
         <span class="text-sm mt-2">{{ t('countDown.text.second') }}</span>
       </div>
@@ -43,14 +63,15 @@
 </template>
 
 <script setup lang="ts">
-import { onMounted, onUnmounted, ref } from 'vue'
+import { onMounted, onUnmounted, ref, watch } from 'vue'
 import { t } from '@/utils/locale'
 import ShadcnCard from '@/ui/card'
 import { CountDownEmits, CountDownProps } from '@/ui/count-down/types'
 
 const emit = defineEmits<CountDownEmits>()
 const props = withDefaults(defineProps<CountDownProps>(), {
-  simple: false
+  simple: false,
+  toolbar: false
 })
 
 const timeLeft = ref({
@@ -61,6 +82,7 @@ const timeLeft = ref({
 })
 
 let timer: NodeJS.Timeout | null = null
+const isPaused = ref(false)
 
 const calculateTimeLeft = () => {
   const now = new Date().getTime()
@@ -84,6 +106,36 @@ const calculateTimeLeft = () => {
   }
 }
 
+// Pause/Resume
+// 暂停/继续
+const togglePause = () => {
+  isPaused.value = !isPaused.value
+  if (!isPaused.value) {
+    calculateTimeLeft()
+    timer = setInterval(calculateTimeLeft, 1000)
+  }
+  else {
+    clearInterval(timer!)
+  }
+}
+
+// Reset
+// 重置
+const onReset = () => {
+  isPaused.value = false
+  calculateTimeLeft()
+}
+
+// Number pad
+// 数字补零
+const padNumber = (num) => {
+  return String(num).padStart(2, '0')
+}
+
+watch(() => props.time, () => {
+  onReset()
+})
+
 onMounted(() => {
   calculateTimeLeft()
   timer = setInterval(calculateTimeLeft, 1000)

diff --git a/src/ui/count-down/types.ts b/src/ui/count-down/types.ts
@@ -2,6 +2,8 @@ export interface CountDownProps
 {
     time: Date
     simple?: boolean
+    title?: string
+    toolbar?: boolean
 }
 
 export type CountDownEmits = {