feat(PinInput)!: add support for numeric type (#1878)

J-Michalek · zernonia · web-flow · commit e51651883fc0 · 2025-05-19T19:01:56.000+08:00
* feat(pin-input): support number[] as possible value

* feat(pin-input): use generic type for the type prop

* feat(pin-input): use generic type for the type prop

BREAKING: Require number[] for number type and convert the value to number.

* test(pin-input): expect numbers to be emitted for number type

* fix: set default type as text

---------

Co-authored-by: zernonia &lt;zernonia@gmail.com&gt;
diff --git a/packages/core/src/PinInput/PinInput.test.ts b/packages/core/src/PinInput/PinInput.test.ts
@@ -215,7 +215,7 @@ describe('give PinInput type=number', async () => {
     })
 
     it('should emit \'complete\' with the result', () => {
-      expect(wrapper.emitted('complete')?.[0]?.[0]).toStrictEqual(['1', '2', '3', '4', '5'])
+      expect(wrapper.emitted('complete')?.[0]?.[0]).toStrictEqual([1, 2, 3, 4, 5])
     })
   })
 })
diff --git a/packages/core/src/PinInput/PinInputInput.vue b/packages/core/src/PinInput/PinInputInput.vue
@@ -2,7 +2,7 @@
 import type { PrimitiveProps } from '@/Primitive'
 import { Primitive, usePrimitiveElement } from '@/Primitive'
 import { getActiveElement, useArrowNavigation } from '@/shared'
-import { injectPinInputRootContext } from './PinInputRoot.vue'
+import { type PinInputValue, injectPinInputRootContext } from './PinInputRoot.vue'
 
 export interface PinInputInputProps extends PrimitiveProps {
   /** Position of the value this input binds to. */
@@ -115,7 +115,7 @@ function handlePaste(event: ClipboardEvent) {
 }
 
 function handleMultipleCharacter(values: string) {
-  const tempModelValue = [...context.currentModelValue.value]
+  const tempModelValue = [...context.currentModelValue.value] as PinInputValue<typeof context.type.value>
   const initialIndex = values.length >= inputElements.value.length ? 0 : props.index
   const lastIndex = Math.min(initialIndex + values.length, inputElements.value.length)
   for (let i = initialIndex; i < lastIndex; i++) {
@@ -131,7 +131,7 @@ function handleMultipleCharacter(values: string) {
   inputElements.value[lastIndex]?.focus()
 }
 
-function removeTrailingEmptyStrings(input: string[]) {
+function removeTrailingEmptyStrings(input: PinInputValue<typeof context.type.value>) {
   let i = input.length - 1
 
   while (i >= 0 && input[i] === '') {
@@ -143,8 +143,8 @@ function removeTrailingEmptyStrings(input: string[]) {
 }
 
 function updateModelValueAt(index: number, value: string) {
-  const tempModelValue = [...context.currentModelValue.value]
-  tempModelValue[index] = value
+  const tempModelValue = [...context.currentModelValue.value] as PinInputValue<typeof context.type.value>
+  tempModelValue[index] = isNumericMode.value ? +value : value
   context.modelValue.value = removeTrailingEmptyStrings(tempModelValue)
 }
 
diff --git a/packages/core/src/PinInput/PinInputRoot.vue b/packages/core/src/PinInput/PinInputRoot.vue
@@ -6,24 +6,29 @@ import { createContext, useDirection, useForwardExpose } from '@/shared'
 import VisuallyHiddenInput from '@/VisuallyHidden/VisuallyHiddenInput.vue'
 import { computed, ref, toRefs, watch } from 'vue'
 
-export type PinInputRootEmits = {
-  'update:modelValue': [value: string[]]
-  'complete': [value: string[]]
+export type PinInputType = 'text' | 'number'
+
+// Using this type to avoid mixed arrays (string | number)[].
+export type PinInputValue<Type extends PinInputType = 'text'> = Type extends 'number' ? number[] : string[]
+
+export type PinInputRootEmits<Type extends PinInputType = 'text'> = {
+  'update:modelValue': [value: PinInputValue<Type>]
+  'complete': [value: PinInputValue<Type>]
 }
 
-export interface PinInputRootProps extends PrimitiveProps, FormFieldProps {
+export interface PinInputRootProps<Type extends PinInputType = 'text'> extends PrimitiveProps, FormFieldProps {
   /** The controlled checked state of the pin input. Can be binded as `v-model`. */
-  modelValue?: string[] | null
+  modelValue?: PinInputValue<Type> | null
   /** The default value of the pin inputs when it is initially rendered. Use when you do not need to control its checked state. */
-  defaultValue?: string[]
+  defaultValue?: PinInputValue<Type>[]
   /** The placeholder character to use for empty pin-inputs. */
   placeholder?: string
   /** When `true`, pin inputs will be treated as password. */
   mask?: boolean
   /** When `true`, mobile devices will autodetect the OTP from messages or clipboard, and enable the autocomplete field. */
   otp?: boolean
   /** Input type for the inputs. */
-  type?: 'text' | 'number'
+  type?: Type
   /** The reading direction of the combobox when applicable. <br> If omitted, inherits globally from `ConfigProvider` or assumes LTR (left-to-right) reading mode. */
   dir?: Direction
   /** When `true`, prevents the user from interacting with the pin input */
@@ -32,13 +37,13 @@ export interface PinInputRootProps extends PrimitiveProps, FormFieldProps {
   id?: string
 }
 
-export interface PinInputRootContext {
-  modelValue: Ref<string[]>
-  currentModelValue: ComputedRef<string[]>
+export interface PinInputRootContext<Type extends PinInputType = 'text'> {
+  modelValue: Ref<PinInputValue<Type>>
+  currentModelValue: ComputedRef<PinInputValue<Type>>
   mask: Ref<boolean>
   otp: Ref<boolean>
   placeholder: Ref<string>
-  type: Ref<PinInputRootProps['type']>
+  type: Ref<PinInputType>
   dir: Ref<Direction>
   disabled: Ref<boolean>
   isCompleted: ComputedRef<boolean>
@@ -47,22 +52,22 @@ export interface PinInputRootContext {
 }
 
 export const [injectPinInputRootContext, providePinInputRootContext]
-  = createContext<PinInputRootContext>('PinInputRoot')
+  = createContext<PinInputRootContext<PinInputType>>('PinInputRoot')
 </script>
 
-<script setup lang="ts">
+<script setup lang="ts" generic="Type extends PinInputType = 'text'">
 import { Primitive } from '@/Primitive'
 import { useVModel } from '@vueuse/core'
 
 defineOptions({
   inheritAttrs: false,
 })
 
-const props = withDefaults(defineProps<PinInputRootProps>(), {
+const props = withDefaults(defineProps<PinInputRootProps<Type>>(), {
   placeholder: '',
-  type: 'text',
+  type: 'text' as any,
 })
-const emits = defineEmits<PinInputRootEmits>()
+const emits = defineEmits<PinInputRootEmits<Type>>()
 
 defineSlots<{
   default: (props: {
@@ -76,9 +81,9 @@ const { forwardRef } = useForwardExpose()
 const dir = useDirection(propDir)
 
 const modelValue = useVModel(props, 'modelValue', emits, {
-  defaultValue: props.defaultValue ?? [],
+  defaultValue: props.defaultValue ?? [] as any,
   passive: (props.modelValue === undefined) as false,
-}) as Ref<string[]>
+}) as Ref<PinInputValue<Type>>
 
 const currentModelValue = computed(() => Array.isArray(modelValue.value) ? [...modelValue.value] : [])
 
@@ -99,7 +104,7 @@ watch(modelValue, () => {
 
 providePinInputRootContext({
   modelValue,
-  currentModelValue,
+  currentModelValue: currentModelValue as ComputedRef<PinInputValue<Type>>,
   mask,
   otp,
   placeholder,
diff --git a/packages/core/src/PinInput/story/PinInputNumeric.story.vue b/packages/core/src/PinInput/story/PinInputNumeric.story.vue
@@ -2,7 +2,7 @@
 import { ref } from 'vue'
 import { PinInputInput, PinInputRoot } from '..'
 
-const value = ref<string[]>([])
+const value = ref<number[]>([])
 </script>
 
 <template>
