feat: make placeholder fields optional for SInputYMD and SInputHMS (

#269)
globalbrain · Apr 27, 2023 · cb3b998 · cb3b998
1 parent 90bb10c
commit cb3b998
Show file tree

Hide file tree

Showing 4 changed files with 38 additions and 12 deletions.
diff --git a/lib/components/SInputHMS.vue b/lib/components/SInputHMS.vue
@@ -15,9 +15,9 @@ export interface Value {
 }
 
 export interface Placeholder {
-  hour: string
-  minute: string
-  second: string
+  hour?: string
+  minute?: string
+  second?: string
 }
 
 export type ValueType = 'hour' | 'minute' | 'second'
@@ -63,9 +63,9 @@ const padValue = computed(() => {
 
 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'
+    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'
   }
 })
 

diff --git a/lib/components/SInputYMD.vue b/lib/components/SInputYMD.vue
@@ -17,9 +17,9 @@ export interface Value {
 export type ValueType = 'year' | 'month' | 'date'
 
 export interface Placeholder {
-  year: number
-  month: number
-  date: number
+  year?: number
+  month?: number
+  date?: number
 }
 
 const props = defineProps<{
@@ -64,9 +64,9 @@ const padValue = computed(() => {
 
 const padPlaceholder = computed(() => {
   return {
-    year: props.placeholder?.year.toString().padStart(4, '0') ?? '1998',
-    month: props.placeholder?.month.toString().padStart(2, '0') ?? '01',
-    date: props.placeholder?.date.toString().padStart(2, '0') ?? '14'
+    year: props.placeholder?.year?.toString().padStart(4, '0') ?? '1998',
+    month: props.placeholder?.month?.toString().padStart(2, '0') ?? '01',
+    date: props.placeholder?.date?.toString().padStart(2, '0') ?? '14'
   }
 })
 

diff --git a/tests/components/SInputHMS.spec.ts b/tests/components/SInputHMS.spec.ts
@@ -49,6 +49,19 @@ describe('components/SInputHMS', async () => {
     expect(getInputPlaceholder(wrapper.find('.SInputHMS .input.second'))).toBe('06')
   })
 
+  test('accepts `:placeholder` partially', async () => {
+    const wrapper = mount(SInputHMS)
+
+    await wrapper.setProps({ placeholder: { hour: 10 } })
+    expect(getInputPlaceholder(wrapper.find('.SInputHMS .input.hour'))).toBe('10')
+
+    await wrapper.setProps({ placeholder: { minute: 8 } })
+    expect(getInputPlaceholder(wrapper.find('.SInputHMS .input.minute'))).toBe('08')
+
+    await wrapper.setProps({ placeholder: { second: 6 } })
+    expect(getInputPlaceholder(wrapper.find('.SInputHMS .input.second'))).toBe('06')
+  })
+
   test('focuses conatiner when input is focused', async () => {
     const wrapper = mount(SInputHMS)
 

diff --git a/tests/components/SInputYMD.spec.ts b/tests/components/SInputYMD.spec.ts
@@ -49,6 +49,19 @@ describe('components/SInputYMD', async () => {
     expect(getInputPlaceholder(wrapper.find('.SInputYMD .input.date'))).toBe('15')
   })
 
+  test('accepts `:placeholder` partially', async () => {
+    const wrapper = mount(SInputYMD)
+
+    await wrapper.setProps({ placeholder: { year: 1985 } })
+    expect(getInputPlaceholder(wrapper.find('.SInputYMD .input.year'))).toBe('1985')
+
+    await wrapper.setProps({ placeholder: { month: 10 } })
+    expect(getInputPlaceholder(wrapper.find('.SInputYMD .input.month'))).toBe('10')
+
+    await wrapper.setProps({ placeholder: { date: 15 } })
+    expect(getInputPlaceholder(wrapper.find('.SInputYMD .input.date'))).toBe('15')
+  })
+
   test('focuses conatiner when input is focused', async () => {
     const wrapper = mount(SInputYMD)