From 7b0226dca0806cdd70241176f5c029f9c4f6144e Mon Sep 17 00:00:00 2001
From: chichoon <chichoon.choi@gmail.com>
Date: Tue, 9 Jan 2024 14:57:54 +0900
Subject: [PATCH 1/2] =?UTF-8?q?[#1571]=20TimePicker=20>=20=EC=99=B8?=
 =?UTF-8?q?=EB=B6=80=EC=97=90=EC=84=9C=EC=9D=98=20modelValue=20=EA=B0=92?=
 =?UTF-8?q?=20=EB=B3=80=ED=99=94=EB=A5=BC=20=EA=B0=90=EC=A7=80=ED=95=98?=
 =?UTF-8?q?=EC=A7=80=20=EB=AA=BB=ED=95=98=EB=8A=94=20=EB=AC=B8=EC=A0=9C=20?=
 =?UTF-8?q?=EC=88=98=EC=A0=95=20(#1571)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

#############################
 - modelValue 가 외부에서 변경되어도 컴포넌트 내부에서 이를 감지할 수 있도록 수정
---
 src/components/timePicker/TimePicker.vue | 93 +++++++++++-------------
 1 file changed, 44 insertions(+), 49 deletions(-)

diff --git a/src/components/timePicker/TimePicker.vue b/src/components/timePicker/TimePicker.vue
index a6e42a0d8..682d1c4f1 100644
--- a/src/components/timePicker/TimePicker.vue
+++ b/src/components/timePicker/TimePicker.vue
@@ -14,7 +14,7 @@
         class="ev-time-picker-wrapper"
       >
         <input
-          v-model="startTime"
+          v-model="time[0]"
           class="ev-input"
           :disabled="disabled"
           :readonly="readonly"
@@ -45,7 +45,7 @@
         class="ev-time-picker-wrapper"
       >
         <input
-          v-model="endTime"
+          v-model="time[1]"
           class="ev-input"
           :disabled="disabled"
           :readonly="readonly"
@@ -105,7 +105,7 @@
 </template>
 
 <script>
-import { ref, reactive } from 'vue';
+import { ref, reactive, computed } from 'vue';
 
 export default {
   name: 'EvTimePicker',
@@ -152,58 +152,60 @@ export default {
     change: null,
   },
   setup(props, { emit }) {
-    let startTime = ref('00:00');
-    let endTime = ref('23:59');
-    let time = ref('00:00');
+    const time = computed({
+      get: () => props.modelValue,
+      set: (value) => {
+        if (props.type === 'range') {
+          if (Array.isArray(value)) {
+            const startTime = (value[0] > value[1] ? '00:00' : value[0]);
+            const endTime = (startTime.value > value[1] ? '23:59' : value[1]);
+
+            emit('update:modelValue', [startTime, endTime]);
+          }
+        } else {
+          emit('update:modelValue', value);
+        }
+      },
+    }); // <string | string[]>
+
+    const previousValue = ref(
+      Array.isArray(time.value) ? [`${time.value[0]}`, `${time.value[1]}`] : `${time.value}`,
+    ); // <string | string[]>
+
     const isWrongType = reactive({
       single: false,
       rangeStart: false,
       rangeEnd: false,
     });
 
-    if (props.type === 'range') {
-      if (Array.isArray(props.modelValue)) {
-        startTime = ref(props.modelValue[0] > props.modelValue[1] ? '00:00' : props.modelValue[0]);
-        endTime = ref(startTime.value > props.modelValue[1] ? '23:59' : props.modelValue[1]);
-      }
-      emit('update:modelValue', [startTime.value, endTime.value]);
-    } else {
-      time = ref(props.modelValue || '00:00');
-      emit('update:modelValue', time.value);
-    }
-
-    const previousValue = reactive({
-      singleTime: time.value,
-      rangeStartTime: startTime.value,
-      rangeEndTime: endTime.value,
-    });
-
     const validTimeExp = (timeExp) => {
       const timeRegexExp = /^(0[0-9]|1[0-9]|2[0-3]):[0-5][0-9]$/;
       return timeRegexExp.test(timeExp);
     };
 
     const setValidStartTime = () => {
-      if (!validTimeExp(startTime.value)) {
-        startTime.value = previousValue.rangeStartTime;
+      if (!Array.isArray(time.value)) return;
+      if (!validTimeExp(time.value[0])) {
+        time.value[0] = previousValue.value[0];
       }
-      if (endTime.value && (startTime.value > endTime.value)) {
-        startTime.value = endTime.value;
+      if (time.value[1] && (time.value[0] > time.value[1])) {
+        time.value[0] = time.value[1];
       }
-      previousValue.rangeStartTime = startTime.value;
+      previousValue.value[0] = time.value[0];
     };
 
     const setValidEndTime = () => {
-      if (!validTimeExp(endTime.value)) {
-        endTime.value = previousValue.rangeEndTime;
+      if (!Array.isArray(time.value)) return;
+      if (!validTimeExp(time.value[1])) {
+        time.value[1] = previousValue.value[1];
       }
-      if (startTime.value && (startTime.value > endTime.value)) {
-        endTime.value = previousValue.rangeEndTime;
-        if (startTime.value > previousValue.rangeEndTime) {
-          endTime.value = startTime.value;
+      if (time.value[0] && (time.value[0] > time.value[1])) {
+        time.value[1] = previousValue.value[1];
+        if (time.value[0] > previousValue.value[1]) {
+          time.value[1] = time.value[0];
         }
       }
-      previousValue.rangeEndTime = endTime.value;
+      previousValue.value[1] = time.value[1];
     };
 
     // startTime event for range type
@@ -218,14 +220,12 @@ export default {
     const changeStartTime = (e) => {
       setValidStartTime();
       isWrongType.rangeStart = false;
-      emit('update:modelValue', [startTime.value, endTime.value]);
-      emit('change', e, [startTime.value, endTime.value]);
+      emit('change', e, time.value);
     };
 
     const clearStartTime = () => {
-      startTime.value = '';
+      time.value[0] = '';
       isWrongType.rangeStart = true;
-      emit('update:modelValue', [startTime.value, endTime.value]);
     };
 
     // endTime event for range type
@@ -240,14 +240,12 @@ export default {
     const changeEndTime = (e) => {
       setValidEndTime();
       isWrongType.rangeEnd = false;
-      emit('update:modelValue', [startTime.value, endTime.value]);
-      emit('change', e, [startTime.value, endTime.value]);
+      emit('change', e, time.value);
     };
 
     const clearEndTime = () => {
-      endTime.value = '';
+      time.value[1] = '';
       isWrongType.rangeEnd = true;
-      emit('update:modelValue', [startTime.value, endTime.value]);
     };
 
     // event for single type
@@ -261,26 +259,23 @@ export default {
 
     const changeTime = (e) => {
       if (!validTimeExp(time.value)) {
-        time.value = previousValue.singleTime;
+        time.value = previousValue.value;
       } else {
-        previousValue.singleTime = time.value;
+        previousValue.value = time.value;
       }
 
       isWrongType.single = !validTimeExp(time.value);
 
-      emit('update:modelValue', time.value);
       emit('change', e, time.value);
     };
 
     const clearContents = () => {
       time.value = '';
       isWrongType.single = true;
-      emit('update:modelValue', time.value);
     };
 
+
     return {
-      startTime,
-      endTime,
       time,
       isWrongType,
       previousValue,

From ca065e80df8b31ad0fb1ceb36f41ffe9c952eb30 Mon Sep 17 00:00:00 2001
From: chichoon <chichoon.choi@gmail.com>
Date: Wed, 10 Jan 2024 09:57:19 +0900
Subject: [PATCH 2/2] =?UTF-8?q?[#1571]=20TimePicker=20>=20=EC=99=B8?=
 =?UTF-8?q?=EB=B6=80=EC=97=90=EC=84=9C=EC=9D=98=20modelValue=20=EA=B0=92?=
 =?UTF-8?q?=20=EB=B3=80=ED=99=94=EB=A5=BC=20=EA=B0=90=EC=A7=80=ED=95=98?=
 =?UTF-8?q?=EC=A7=80=20=EB=AA=BB=ED=95=98=EB=8A=94=20=EB=AC=B8=EC=A0=9C=20?=
 =?UTF-8?q?=EC=88=98=EC=A0=95=20(#1571)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

#############################
 - prop validation 조건식 수정
---
 src/components/timePicker/TimePicker.vue | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/src/components/timePicker/TimePicker.vue b/src/components/timePicker/TimePicker.vue
index 682d1c4f1..91c1147dd 100644
--- a/src/components/timePicker/TimePicker.vue
+++ b/src/components/timePicker/TimePicker.vue
@@ -115,7 +115,7 @@ export default {
       default: '',
       validator: (time) => {
         const timeRegexExp = /^(0[0-9]|1[0-9]|2[0-3]):[0-5][0-9]$/;
-        if (Array.isArray(time) && !timeRegexExp.test(time[0]) && timeRegexExp.test(time[1])) {
+        if (Array.isArray(time) && (!timeRegexExp.test(time[0]) || !timeRegexExp.test(time[1]))) {
           // range mode
           console.warn('Please check the time format in the Timepicker.');
           return false;
@@ -274,7 +274,6 @@ export default {
       isWrongType.single = true;
     };
 
-
     return {
       time,
       isWrongType,