feat(input-hms): add placeholder options (#250)

Co-authored-by: Kia King Ishii <kia.king.08@gmail.com>
globalbrain · Apr 13, 2023 · c1b37ab · c1b37ab
1 parent 7147678
commit c1b37ab
Show file tree

Hide file tree

Showing 3 changed files with 86 additions and 19 deletions.
diff --git a/docs/components/input-hms.md b/docs/components/input-hms.md
@@ -109,6 +109,33 @@ interface Props {
 />
 ```
 
+### `:placeholder`
+
+Defines the placeholder to show when the value is empty. The default is `00:00:00`.
+
+```ts
+interface Props {
+  placeholder?: Placeholder
+}
+
+interface Placeholder {
+  hour: string
+  minute: string
+  second: string
+}
+```
+
+```vue-html
+<SInputHMS
+  :placeholder="{
+    hour: 18,
+    minute: 30,
+    second: 15
+  }"
+  v-model="..."
+/>
+```
+
 ### `:check-icon`
 
 Icon to display at corner right of label. Useful to show the status of a particular input.

diff --git a/lib/components/SInputHMS.vue b/lib/components/SInputHMS.vue
@@ -14,6 +14,12 @@ export interface Value {
   second: string | null
 }
 
+export interface Placeholder {
+  hour: string
+  minute: string
+  second: string
+}
+
 export type ValueType = 'hour' | 'minute' | 'second'
 
 const props = defineProps<{
@@ -22,6 +28,7 @@ const props = defineProps<{
   info?: string
   note?: string
   help?: string
+  placeholder?: Placeholder
   checkIcon?: IconifyIcon | DefineComponent
   checkText?: string
   checkColor?: Color
@@ -46,6 +53,22 @@ 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',
+    minute: props.placeholder?.minute.toString().padStart(2, '0') ?? '00',
+    second: props.placeholder?.second.toString().padStart(2, '0') ?? '00'
+  }
+})
+
 const isFocused = ref(false)
 
 const touched = {
@@ -81,7 +104,7 @@ function update(type: ValueType, value: string | null) {
 
   const newValue = {
     ..._value.value,
-    [type]: value !== null ? value.padStart(2, '0') : null
+    [type]: value ?? null
   }
 
   emit('update:model-value', newValue)
@@ -145,8 +168,8 @@ function createRequiredTouched(): boolean[] {
       <input
         v-if="!noHour"
         class="input hour"
-        :value="_value?.hour"
-        placeholder="00"
+        :value="padValue?.hour"
+        :placeholder="padPlaceholder.hour"
         :maxlength="2"
         :disabled="disabled"
         @focus="onFocus"
@@ -156,8 +179,8 @@ function createRequiredTouched(): boolean[] {
       <input
         v-if="!noMinute"
         class="input minute"
-        :value="_value?.minute"
-        placeholder="00"
+        :value="padValue?.minute"
+        :placeholder="padPlaceholder.minute"
         :maxlength="2"
         :disabled="disabled"
         @focus="onFocus"
@@ -167,8 +190,8 @@ function createRequiredTouched(): boolean[] {
       <input
         v-if="!noSecond"
         class="input second"
-        :value="_value?.second"
-        placeholder="00"
+        :value="padValue?.second"
+        :placeholder="padPlaceholder.second"
         :maxlength="2"
         :disabled="disabled"
         @focus="onFocus"

diff --git a/tests/components/SInputHMS.spec.ts b/tests/components/SInputHMS.spec.ts
@@ -4,6 +4,7 @@ import {
   assertEmitted,
   assertNotEmitted,
   createValidatable,
+  getInputPlaceholder,
   getInputValue
 } from 'tests/Utils'
 
@@ -15,9 +16,9 @@ describe('components/SInputHMS', async () => {
       }
     })
 
-    expect(getInputValue(wrapper.find('.SInputHMS .input.hour'))).toBe('1')
-    expect(getInputValue(wrapper.find('.SInputHMS .input.minute'))).toBe('2')
-    expect(getInputValue(wrapper.find('.SInputHMS .input.second'))).toBe('3')
+    expect(getInputValue(wrapper.find('.SInputHMS .input.hour'))).toBe('01')
+    expect(getInputValue(wrapper.find('.SInputHMS .input.minute'))).toBe('02')
+    expect(getInputValue(wrapper.find('.SInputHMS .input.second'))).toBe('03')
   })
 
   test('accepts `:model-value`', async () => {
@@ -27,9 +28,25 @@ describe('components/SInputHMS', async () => {
       }
     })
 
-    expect(getInputValue(wrapper.find('.SInputHMS .input.hour'))).toBe('1')
-    expect(getInputValue(wrapper.find('.SInputHMS .input.minute'))).toBe('2')
-    expect(getInputValue(wrapper.find('.SInputHMS .input.second'))).toBe('3')
+    expect(getInputValue(wrapper.find('.SInputHMS .input.hour'))).toBe('01')
+    expect(getInputValue(wrapper.find('.SInputHMS .input.minute'))).toBe('02')
+    expect(getInputValue(wrapper.find('.SInputHMS .input.second'))).toBe('03')
+  })
+
+  test('accepts `:placeholder`', async () => {
+    const wrapper = mount(SInputHMS, {
+      props: {
+        placeholder: {
+          hour: '10',
+          minute: '8',
+          second: '6'
+        }
+      }
+    })
+
+    expect(getInputPlaceholder(wrapper.find('.SInputHMS .input.hour'))).toBe('10')
+    expect(getInputPlaceholder(wrapper.find('.SInputHMS .input.minute'))).toBe('08')
+    expect(getInputPlaceholder(wrapper.find('.SInputHMS .input.second'))).toBe('06')
   })
 
   test('focuses conatiner when input is focused', async () => {
@@ -49,18 +66,18 @@ describe('components/SInputHMS', async () => {
 
     await wrapper.find('.SInputHMS .input.hour').setValue('4')
     await wrapper.find('.SInputHMS .input.hour').trigger('blur')
-    assertEmitted(wrapper, 'update:model-value', 1, { hour: '04', minute: '2', second: '3' })
-    assertEmitted(wrapper, 'change', 1, { hour: '04', minute: '2', second: '3' })
+    assertEmitted(wrapper, 'update:model-value', 1, { hour: '4', minute: '2', second: '3' })
+    assertEmitted(wrapper, 'change', 1, { hour: '4', minute: '2', second: '3' })
 
     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: '05', second: '3' })
-    assertEmitted(wrapper, 'change', 2, { hour: '1', minute: '05', second: '3' })
+    assertEmitted(wrapper, 'update:model-value', 2, { hour: '1', minute: '5', second: '3' })
+    assertEmitted(wrapper, 'change', 2, { hour: '1', minute: '5', second: '3' })
 
     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: '06' })
-    assertEmitted(wrapper, 'change', 3, { hour: '1', minute: '2', second: '06' })
+    assertEmitted(wrapper, 'update:model-value', 3, { hour: '1', minute: '2', second: '6' })
+    assertEmitted(wrapper, 'change', 3, { hour: '1', minute: '2', second: '6' })
   })
 
   test('emits events with `null` when the input is not number', async () => {