From 379eed3e9d2b898d16993a5b4cc60489e9f38b1f Mon Sep 17 00:00:00 2001
From: Kia King Ishii <kia.king.08@gmail.com>
Date: Thu, 26 Dec 2024 16:28:23 +0900
Subject: [PATCH] fix(input-hms): emit padded value

---
 lib/components/SInputHMS.vue       | 16 ++++------------
 tests/components/SInputHMS.spec.ts | 18 +++++++++---------
 2 files changed, 13 insertions(+), 21 deletions(-)

diff --git a/lib/components/SInputHMS.vue b/lib/components/SInputHMS.vue
index 73a9a036..fe9f409c 100644
--- a/lib/components/SInputHMS.vue
+++ b/lib/components/SInputHMS.vue
@@ -51,14 +51,6 @@ const _value = computed(() => {
     : props.value !== undefined ? props.value : null
 })
 
-const padValue = computed(() => {
-  return {
-    hour: _value.value?.hour?.padStart(2, '0') ?? null,
-    minute: _value.value?.minute?.padStart(2, '0') ?? null,
-    second: _value.value?.second?.padStart(2, '0') ?? null
-  }
-})
-
 const padPlaceholder = computed(() => {
   return {
     hour: props.placeholder?.hour?.toString().padStart(2, '0') ?? '00',
@@ -102,7 +94,7 @@ function update(type: ValueType, value: string | null) {
 
   const newValue = {
     ..._value.value,
-    [type]: value ?? null
+    [type]: value?.padStart(2, '0') ?? null
   }
 
   emit('update:model-value', newValue)
@@ -166,7 +158,7 @@ function createRequiredTouched(): boolean[] {
       <input
         v-if="!noHour"
         class="input hour"
-        :value="padValue?.hour"
+        :value="_value?.hour"
         :placeholder="padPlaceholder.hour"
         :maxlength="2"
         :disabled="disabled"
@@ -177,7 +169,7 @@ function createRequiredTouched(): boolean[] {
       <input
         v-if="!noMinute"
         class="input minute"
-        :value="padValue?.minute"
+        :value="_value?.minute"
         :placeholder="padPlaceholder.minute"
         :maxlength="2"
         :disabled="disabled"
@@ -188,7 +180,7 @@ function createRequiredTouched(): boolean[] {
       <input
         v-if="!noSecond"
         class="input second"
-        :value="padValue?.second"
+        :value="_value?.second"
         :placeholder="padPlaceholder.second"
         :maxlength="2"
         :disabled="disabled"
diff --git a/tests/components/SInputHMS.spec.ts b/tests/components/SInputHMS.spec.ts
index 6cd16fb9..387b09eb 100644
--- a/tests/components/SInputHMS.spec.ts
+++ b/tests/components/SInputHMS.spec.ts
@@ -12,7 +12,7 @@ describe('components/SInputHMS', async () => {
   test('accepts `:value`', async () => {
     const wrapper = mount(SInputHMS, {
       props: {
-        value: { hour: '1', minute: '2', second: '3' }
+        value: { hour: '01', minute: '02', second: '03' }
       }
     })
 
@@ -24,7 +24,7 @@ describe('components/SInputHMS', async () => {
   test('accepts `:model-value`', async () => {
     const wrapper = mount(SInputHMS, {
       props: {
-        modelValue: { hour: '1', minute: '2', second: '3' }
+        modelValue: { hour: '01', minute: '02', second: '03' }
       }
     })
 
@@ -73,24 +73,24 @@ describe('components/SInputHMS', async () => {
   test('emits `@update:model-value` and `@change` on blur', async () => {
     const wrapper = mount(SInputHMS, {
       props: {
-        modelValue: { hour: '1', minute: '2', second: '3' }
+        modelValue: { hour: '01', minute: '02', second: '03' }
       }
     })
 
     await wrapper.find('.SInputHMS .input.hour').setValue('4')
     await wrapper.find('.SInputHMS .input.hour').trigger('blur')
-    assertEmitted(wrapper, 'update:model-value', 1, { hour: '4', minute: '2', second: '3' })
-    assertEmitted(wrapper, 'change', 1, { hour: '4', minute: '2', second: '3' })
+    assertEmitted(wrapper, 'update:model-value', 1, { hour: '04', minute: '02', second: '03' })
+    assertEmitted(wrapper, 'change', 1, { hour: '04', minute: '02', second: '03' })
 
     await wrapper.find('.SInputHMS .input.minute').setValue('5')
     await wrapper.find('.SInputHMS .input.minute').trigger('blur')
-    assertEmitted(wrapper, 'update:model-value', 2, { hour: '1', minute: '5', second: '3' })
-    assertEmitted(wrapper, 'change', 2, { hour: '1', minute: '5', second: '3' })
+    assertEmitted(wrapper, 'update:model-value', 2, { hour: '01', minute: '05', second: '03' })
+    assertEmitted(wrapper, 'change', 2, { hour: '01', minute: '05', second: '03' })
 
     await wrapper.find('.SInputHMS .input.second').setValue('6')
     await wrapper.find('.SInputHMS .input.second').trigger('blur')
-    assertEmitted(wrapper, 'update:model-value', 3, { hour: '1', minute: '2', second: '6' })
-    assertEmitted(wrapper, 'change', 3, { hour: '1', minute: '2', second: '6' })
+    assertEmitted(wrapper, 'update:model-value', 3, { hour: '01', minute: '02', second: '06' })
+    assertEmitted(wrapper, 'change', 3, { hour: '01', minute: '02', second: '06' })
   })
 
   test('emits events with `null` when the input is not number', async () => {