feat(input-ymd): add placeholder option (#245) (#246)

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

Hide file tree

Showing 4 changed files with 66 additions and 3 deletions.
diff --git a/docs/components/input-ymd.md b/docs/components/input-ymd.md
@@ -109,6 +109,33 @@ interface Props {
 />
 ```
 
+### `:placeholder`
+
+Defines the placeholder to show when the value is empty. The default is `1998/01/14`, which is the founded date of [Global Brain](https://globalbrain.co.jp/).
+
+```ts
+interface Props {
+  placeholder?: Placeholder
+}
+
+interface Placeholder {
+  year: number
+  month: number
+  date: number
+}
+```
+
+```vue-html
+<SInputYMD
+  :placeholder="{
+    year: 1985,
+    month: 10,
+    date: 10
+  }"
+  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/SInputYMD.vue b/lib/components/SInputYMD.vue
@@ -16,12 +16,19 @@ export interface Value {
 
 export type ValueType = 'year' | 'month' | 'date'
 
+export interface Placeholder {
+  year: number
+  month: number
+  date: number
+}
+
 const props = defineProps<{
   size?: Size
   label?: string
   info?: string
   note?: string
   help?: string
+  placeholder?: Placeholder
   checkIcon?: IconifyIcon | DefineComponent
   checkText?: string
   checkColor?: Color
@@ -55,6 +62,14 @@ 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'
+  }
+})
+
 const isFocused = ref(false)
 
 const touched = {
@@ -145,7 +160,7 @@ function createRequiredTouched(): boolean[] {
         v-if="!noYear"
         class="input year"
         :value="padValue?.year"
-        placeholder="1998"
+        :placeholder="padPlaceholder.year"
         :maxlength="4"
         :disabled="disabled"
         @focus="onFocus"
@@ -159,7 +174,7 @@ function createRequiredTouched(): boolean[] {
         v-if="!noMonth"
         class="input month"
         :value="padValue?.month"
-        placeholder="01"
+        :placeholder="padPlaceholder.month"
         :maxlength="2"
         :disabled="disabled"
         @focus="onFocus"
@@ -173,7 +188,7 @@ function createRequiredTouched(): boolean[] {
         v-if="!noDate"
         class="input date"
         :value="padValue?.date"
-        placeholder="14"
+        :placeholder="padPlaceholder.date"
         :maxlength="2"
         :disabled="disabled"
         @focus="onFocus"

diff --git a/tests/Utils.ts b/tests/Utils.ts
@@ -18,6 +18,10 @@ export function getInputValue(wrapper: DOMWrapper<any>): string {
   return (wrapper.element as any).value
 }
 
+export function getInputPlaceholder(wrapper: DOMWrapper<any>): string {
+  return (wrapper.element as any).placeholder
+}
+
 export function createValidatable(params: Partial<Validatable> = {}): Validatable {
   return {
     $dirty: params.$dirty ?? false,

diff --git a/tests/components/SInputYMD.spec.ts b/tests/components/SInputYMD.spec.ts
@@ -4,6 +4,7 @@ import {
   assertEmitted,
   assertNotEmitted,
   createValidatable,
+  getInputPlaceholder,
   getInputValue
 } from 'tests/Utils'
 
@@ -32,6 +33,22 @@ describe('components/SInputYMD', async () => {
     expect(getInputValue(wrapper.find('.SInputYMD .input.date'))).toBe('01')
   })
 
+  test('accepts `:placeholder`', async () => {
+    const wrapper = mount(SInputYMD, {
+      props: {
+        placeholder: {
+          year: 1985,
+          month: 10,
+          date: 15
+        }
+      }
+    })
+
+    expect(getInputPlaceholder(wrapper.find('.SInputYMD .input.year'))).toBe('1985')
+    expect(getInputPlaceholder(wrapper.find('.SInputYMD .input.month'))).toBe('10')
+    expect(getInputPlaceholder(wrapper.find('.SInputYMD .input.date'))).toBe('15')
+  })
+
   test('focuses conatiner when input is focused', async () => {
     const wrapper = mount(SInputYMD)