From 013a459fed1ab50f06944c3195684de558231d48 Mon Sep 17 00:00:00 2001
From: chiayin <chiayin.kuo@dsp.im>
Date: Thu, 21 Sep 2023 17:52:06 +0800
Subject: [PATCH] Issue #79: Done.

---
 src/components/durationjs.vue | 17 ++++++++++++-----
 1 file changed, 12 insertions(+), 5 deletions(-)

diff --git a/src/components/durationjs.vue b/src/components/durationjs.vue
index efb9ccf..2269a4f 100644
--- a/src/components/durationjs.vue
+++ b/src/components/durationjs.vue
@@ -1,10 +1,15 @@
 <template>
 <div class=" relative">
-  <div class="flex justify-center items-center gap-1 px-1 w-32 border border-neutral-500 cursor-pointer" @click="openTimeSelect = !openTimeSelect">
-    <p>{{ days }}d</p>
-    <p>{{ hours }}h</p>
-    <p>{{ minutes }}m</p>
-    <p>{{ seconds }}s</p>
+  <div class="w-32 px-1 border border-neutral-500 cursor-pointer" @click="openTimeSelect = !openTimeSelect">
+    <div v-if="totalSeconds === 0" class="text-center">
+      <p>0s</p>
+    </div>
+    <div v-else class="flex justify-center items-center gap-1">
+      <p>{{ days }}d</p>
+      <p>{{ hours }}h</p>
+      <p>{{ minutes }}m</p>
+      <p>{{ seconds }}s</p>
+    </div>
   </div>
   <div class="duration-container absolute left-0 top-full translate-y-2" v-show="openTimeSelect">
     <div class="duration-box" v-for="(unit, index) in inputTypes" :key="unit">
@@ -285,9 +290,11 @@ export default {
       if(totalSeconds >= this.maxTotal){ // 大於最大值時要等於最大值
         totalSeconds = this.maxTotal;
         this.secondToDate(this.maxTotal, 'max');
+        this.totalSeconds = totalSeconds;
       } else if (totalSeconds <= this.minTotal) { // 小於最小值時要等於最小值
         totalSeconds = this.minTotal;
         this.secondToDate(this.minTotal, 'min');
+        this.totalSeconds = totalSeconds;
       } else {
         this.totalSeconds = totalSeconds;
       };