compontent time duration 交互影響, 關聯性待修.

src/components/durationjs.vue

@@ -1,12 +1,15 @@
 <template>
-  <div class=" relative">
+<div class=" relative">
   <div class="flex justify-center items-center gap-1 px-1 w-32 border border-neutral-500 cursor-pointer" @click="openTiemSelect = !openTiemSelect">
     <p>{{ days }}d</p>
     <p>{{ hours }}h</p>
     <p>{{ minutes }}m</p>
     <p>{{ seconds }}s</p>
   </div>
-  <div class="duration-container absolute left-1/2 top-1/2 -translate-x-1/2" v-show="openTiemSelect">
+  <p>maxTotal: {{ maxTotal }}</p>
+  <p>minTotal: {{ minTotal }}</p>
+  <p>size: {{ size }}</p>
+  <div class="duration-container absolute left-0 top-full translate-y-2" v-show="openTiemSelect">
     <div class="duration-box" v-for="(unit, index) in inputTypes" :key="unit">
       <input
         type="text"
@@ -29,6 +32,29 @@
 
 <script>
 export default {
+  props: {
+    max: {
+      type: Number,
+      default: 0,
+      required: true,
+      validator(value) {
+        return value >= 0;
+      },
+    },
+    min: {
+      type: Number,
+      default: 0,
+      required: true,
+      validator(value) {
+        return value >= 0;
+      },
+    },
+    size: {
+      type: String,
+      default: false,
+      required: true,
+    },
+  },
   data() {
     return {
       display: 'dhms',
@@ -39,11 +65,17 @@ export default {
       maxDays: 0,
       minDays: 0,
       totalSeconds: 0,
-      maxTotal: 8740000,
-      minTotal: 6666666,
+      maxTotal: null,
+      minTotal: null,
       inputTypes: [],
       lastInput: null,
       openTiemSelect: false,
+      // tUnits: {
+      //   s: { dsp: 's', inc: 1, val: 0, max: 60, rate: 1, min: 0 },
+      //   m: { dsp: 'm', inc: 1, val: 0, max: 60, rate: 60, min: 0 },
+      //   h: { dsp: 'h', inc: 1, val: 0, max: 24, rate: 3600, min: 0 },
+      //   d: { dsp: 'd', inc: 1, val: 0, max: this.maxDays, rate: 86400, min: this.minDays }
+      // },
     };
   },
   computed: {
@@ -68,23 +100,17 @@ export default {
       },
     },
   },
-  directives: {
-  'click-outside': {
-    bind(el, { value }) {
-      handleOutsideClick = e => {
-        const isClickOutside = e.target !== el && !el.contains(e.target)
-        if (isClickOutside) value(e)
-        e.stopPropagation()
-      }
-      document.addEventListener('click', handleOutsideClick)
-      document.addEventListener('touchstart', handleOutsideClick)
+  watch: {
+    max: function(newValue, oldValue) {
+      this.maxTotal = newValue;
+      this.size === 'max' && newValue !== oldValue ? this.createData() : null;
+
     },
-    unbind() {
-      document.removeEventListener('click', handleOutsideClick)
-      document.removeEventListener('touchstart', handleOutsideClick)
-    }
-  }
-},
+    min: function(newValue, oldValue) {
+      this.minTotal = newValue;
+      this.size === 'min' && newValue !== oldValue ? this.createData() : null;
+    },
+  },
   methods: {
     onFocus(event) {
       this.lastInput = event.target;
@@ -100,7 +126,7 @@ export default {
       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');
+      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
@@ -120,6 +146,7 @@ export default {
           this.seconds = event.target.value;
           break;
       };
+
       this.calculateTotalSeconds();
     },
     onKeyUp(event) {
@@ -152,15 +179,28 @@ export default {
             newVal = '00';
           } else {
             newVal = '00';
-          }
-        }
-      }
+          };
+        };
+      };
 
       input.value = newVal.toString().padStart(2, '0');
+      switch (tUnit) {
+        case 'd':
+          this.days = input.value;
+          break;
+        case 'h':
+          this.hours = input.value;
+          break;
+        case 'm':
+          this.minutes = input.value;
+          break;
+        case 's':
+          this.seconds = input.value;
+          break;
+      };
       if (selectIt) input.select();
     },
     secondToDate(totalSeconds, size) {
-      // .toString().padStart(2, '0')
       totalSeconds = parseInt(totalSeconds);
       if(!isNaN(totalSeconds)) {
         this.seconds = totalSeconds % 60;
@@ -183,37 +223,52 @@ export default {
 
       for (const unit in this.tUnits) {
         const val = parseInt(this.tUnits[unit].val, 10);
-        if (!isNaN(val)) totalSeconds += val * this.tUnits[unit].rate;
+        if (!isNaN(val)) {
+          totalSeconds += val * this.tUnits[unit].rate;
+        }
       }
 
       // 大於最大值時要等於最大值
+      console.log(totalSeconds);
       if(totalSeconds >= this.maxTotal){
+        console.log('>max');
         totalSeconds = this.maxTotal;
         this.tUnits = tUnits;
-        this.secondToDate(this.maxTotal, 'max');
       } else if (totalSeconds <= this.minTotal) {
+        console.log('<min');
         // 小於最小值時要等於最小值
         totalSeconds = this.minTotal;
         this.tUnits = tUnits;
         this.secondToDate(this.minTotal, 'min');
       } else {
         this.totalSeconds = totalSeconds;
-      }
+      };
+      // this.$emit('total-seconds', this.totalSeconds);
+    },
+    createData() {
+      // let size = 'min';
+      let size = this.size;
+
+      switch (size) {
+        case 'max':
+          this.secondToDate(this.minTotal, 'min');
+          this.secondToDate(this.maxTotal, 'max');
+          this.totalSeconds = this.maxTotal;
+          break;
+        case 'min':
+          this.secondToDate(this.maxTotal, 'max');
+          this.secondToDate(this.minTotal, 'min');
+          this.totalSeconds = this.minTotal;
+          break;
+        default:
+          break;
+      };
+      // this.$emit('total-seconds', this.totalSeconds);
     },
   },
   mounted() {
     this.inputTypes = this.display.split('');
-
-    let size ='min';
-    if(size === 'max') {
-      this.secondToDate(this.minTotal, 'min');
-      this.secondToDate(this.maxTotal, 'max');
-      this.totalSeconds = this.maxTotal;
-    }else if(size === 'min') {
-      this.secondToDate(this.maxTotal, 'max');
-      this.secondToDate(this.minTotal, 'min');
-      this.totalSeconds = this.minTotal;
-    }
+    this.createData();
   },
 };
 </script>