featurn: time duration maxValue and minValue done.

src/components/durationjs.vue

@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div class="duration-container">
     <div class="duration-box" v-for="(unit, index) in inputTypes" :key="unit">
       <input
         type="text"
@@ -7,6 +7,7 @@
         :data-index="index"
         :data-tunit="unit"
         :data-max="tUnits[unit].max"
+        :data-min="tUnits[unit].min"
         :maxlength="tUnits[unit].dsp === 'd' ? 3 : 2"
         :value="tUnits[unit].val.toString().padStart(2, '0')"
         @focus="onFocus"
@@ -27,8 +28,11 @@ export default {
       minutes: 0,
       hours: 0,
       days: 0,
+      maxDays: 0,
+      minDays: 0,
       totalSeconds: 0,
-      apiTotal: 8740000,
+      maxTotal: 8740000,
+      minTotal: 6666666,
       inputTypes: [],
       lastInput: null,
     };
@@ -37,10 +41,10 @@ export default {
     tUnits: {
       get() {
         return {
-          s: { dsp: 's', inc: 1, val: this.seconds, max: 60, rate: 1 },
-          m: { dsp: 'm', inc: 1, val: this.minutes, max: 60, rate: 60 },
-          h: { dsp: 'h', inc: 1, val: this.hours, max: 24, rate: 3600 },
-          d: { dsp: 'd', inc: 1, val: this.days, max: this.days, rate: 86400 }
+          s: { dsp: 's', inc: 1, val: this.seconds, max: 60, rate: 1, min: 0 },
+          m: { dsp: 'm', inc: 1, val: this.minutes, max: 60, rate: 60, min: 0 },
+          h: { dsp: 'h', inc: 1, val: this.hours, max: 24, rate: 3600, min: 0 },
+          d: { dsp: 'd', inc: 1, val: this.days, max: this.maxDays, rate: 86400, min: this.minDays }
         };
       },
       set(newValues) {
@@ -66,7 +70,12 @@ export default {
       event.target.value = event.target.value.toString().padStart(2, '0');
 
       // 手 key 數值大於最大值時，要等於最大值
-      if(event.target.value > event.target.dataset.max) event.target.value = (event.target.dataset.max - 1).toString().padStart(2, '0');
+      // 先將字串轉為數字才能比大小
+      const inputValue = parseInt(event.target.value, 10);
+      const max = parseInt(event.target.dataset.max, 10); // 設定最大值
+      const min = parseInt(event.target.dataset.min, 10);
+      if(inputValue> max) event.target.value = max.toString().padStart(2, '0');
+      else if(inputValue < min) event.target.value= min.toString().padStart(2, '0');
 
       // 數值更新, tUnits 也更新, 並計算 totalSeconds
       this.tUnits[event.target.dataset.tunit].val = event.target.value;
@@ -109,7 +118,7 @@ export default {
       input.value = newVal.toString().padStart(2, '0');
       if (selectIt) input.select();
     },
-    secondToDate(totalSeconds) {
+    secondToDate(totalSeconds, size) {
       // .toString().padStart(2, '0')
       totalSeconds = parseInt(totalSeconds);
       if(!isNaN(totalSeconds)) {
@@ -117,27 +126,36 @@ export default {
         this.minutes = (Math.floor(totalSeconds - this.seconds) / 60) % 60;
         this.hours = (Math.floor(totalSeconds / 3600)) % 24;
         this.days = Math.floor(totalSeconds / (3600 * 24));
-      }
+
+        if(size === 'max') this.maxDays = Math.floor(totalSeconds / (3600 * 24));
+        else if(size === 'min') this.minDays = Math.floor(totalSeconds / (3600 * 24));
+      };
     },
     calculateTotalSeconds() {
       let totalSeconds = 0;
       let tUnits = {
-          s: { dsp: 's', inc: 1, val: this.seconds, max: 60, rate: 1 },
-          m: { dsp: 'm', inc: 1, val: this.minutes, max: 60, rate: 60 },
-          h: { dsp: 'h', inc: 1, val: this.hours, max: 24, rate: 3600 },
-          d: { dsp: 'd', inc: 1, val: this.days, max: this.days, rate: 86400 },
+          s: { dsp: 's', inc: 1, val: this.seconds, max: 60, rate: 1, min: 0 },
+          m: { dsp: 'm', inc: 1, val: this.minutes, max: 60, rate: 60, min: 0 },
+          h: { dsp: 'h', inc: 1, val: this.hours, max: 24, rate: 3600, min: 0 },
+          d: { dsp: 'd', inc: 1, val: this.days, max: this.maxDays, rate: 86400, min: this.minDays },
         };
 
       for (const unit in this.tUnits) {
         const val = parseInt(this.tUnits[unit].val, 10);
         if (!isNaN(val)) totalSeconds += val * this.tUnits[unit].rate;
       }
+      console.log(totalSeconds);
 
       // 大於最大值時要等於最大值
-      if(totalSeconds >= this.apiTotal){
-        totalSeconds = this.apiTotal;
+      if(totalSeconds >= this.maxTotal){
+        totalSeconds = this.maxTotal;
         this.tUnits = tUnits;
-        this.secondToDate(this.apiTotal);
+        this.secondToDate(this.maxTotal, 'max');
+      } else if (totalSeconds <= this.minTotal) {
+        // 小於最小值時要等於最小值
+        totalSeconds = this.minTotal;
+        this.tUnits = tUnits;
+        this.secondToDate(this.minTotal, 'min');
       } else {
         this.totalSeconds = totalSeconds;
       }
@@ -145,16 +163,25 @@ export default {
   },
   mounted() {
     this.inputTypes = this.display.split('');
-    this.secondToDate(this.apiTotal);
-    this.totalSeconds = this.apiTotal;
+    this.secondToDate(this.maxTotal, 'max');
+    this.totalSeconds = this.maxTotal;
   },
 };
 </script>
 <style scoped>
+.duration-container {
+  margin: 4px;
+  border-radius: 4px;
+  background: var(--10, #FFF);
+  box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.25);
+  height: 36px;
+  width: 221px;
+}
 .duration-box {
     float:left;
     overflow: auto;
     height: var(--main-input-height);
+    padding: 4px;
 }
 .duration-box > .duration {
     border: 1px solid var(--main-bg-light);
@@ -180,6 +207,7 @@ export default {
     height: var(--main-input-height);
     outline: none;
     font-size: 14px;
+    margin: 0px 2px;
 }
 .duration-box > label.duration {
     line-height: 28px;