fix(PinInput): remove default generic `type` #4346

KIM-DONGJU · 2025-06-16T07:52:26Z

🔗 Linked issue

❓ Type of change

🐞 Bug fix (a non-breaking change that fixes an issue)

📚 Description

This PR updates the PinInput component to support 'number' as a valid value for the type prop.

Previously, the component only accepted 'text', which limited use cases where numeric input was desired (e.g., PIN codes, OTPs). While the documentation suggested that both 'text' and 'number' were supported, the actual type definition restricted the type prop to string only—resulting in a TypeScript error when attempting to use type="number".

This fix corrects the type definition to explicitly allow both 'text' and 'number', aligning the implementation with the documented behavior and ensuring type safety without affecting existing functionality.

Changes include:

Updated defineProps to explicitly support both 'text' and 'number' types

📝 Checklist

I have linked an issue or discussion.
I have updated the documentation accordingly.

… type

pkg-pr-new · 2025-06-16T08:05:12Z

npm i https://pkg.pr.new/@nuxt/ui@4346

commit: 85905be

benjamincanac · 2025-06-16T08:57:01Z

src/runtime/components/PinInput.vue

@@ -46,7 +46,7 @@ export type PinInputEmits<T extends PinInputType = 'text'> = PinInputRootEmits<T

 </script>

-<script setup lang="ts" generic="T extends PinInputType = 'text'">
+<script setup lang="ts" generic="T extends PinInputType">


Indeed, this change is necessary there should be no default here. However, the playground should work with just string[] since the default type is text 🤔

That's what I was looking into but not there are no string[] | number[] definition. The Reka UI component defines it like this: type PinInputValue<Type extends PinInputType = 'text'> = Type extends 'number' ? number[] : string[]. This should work, I'm confused 😅

I've looked into this as well, and it does correctly infer the type of the complete event when type="text" is explicitly specified, like in <UPinInput type="text" @ complete="onComplete" />.
However, I'm also unsure why TypeScript fails to infer the correct type when relying on the default type value.

@benjamincanac
Additionally, could you let me know the estimated release schedule for the version that includes reka-ui 2.3.1 (e.g., 3.1.4)?
Currently, it seems there's an issue where, in the current version, when the PinInput type is set to number, trying to clear the value results in it changing to 0 instead of being cleared.

@KIM-DONGJU I'll make a release this week for sure!

Did you find a way to make this work? Not sure if we can merge this as is 😬

I’ve been juggling a few things on my end, so I haven’t been able to give this the attention it deserves. I’ll look into it more thoroughly soon.

benjamincanac · 2025-07-03T14:53:41Z

@Teages You seemed to understand TypeScript pretty well, we're stuck on this matter if you have some time to take a look it would help a lot 😊

Teages · 2025-07-03T15:29:33Z

That is wired... The code should just work without this PR.
Now its type already matches the actual runtime behavior, I can't reproduce the original issue of this PR.

Could you provide a minimal reproduction for your issue? @KIM-DONGJU

<script setup lang="ts">
const strPin = ref<string[]>([])
const numPin = ref<number[]>([])

function expectStr(_pin: string[]) {}
function expectNum(_pin: number[]) {}
</script>

<template>
  <UApp>
    <div class="w-screen h-screen flex items-center justify-center flex-col gap-4">
      <UPinInput v-model="strPin" @complete="expectStr" />
      <UPinInput v-model="numPin" type="number" @complete="expectNum" />
      <UPinInput v-model="strPin" type="text" @complete="expectStr" />

      <!-- @vue-expect-error catch it -->
      <UPinInput v-model="numPin" />

      <!-- @vue-expect-error catch it -->
      <UPinInput v-model="numPin" type="text" />

      <!-- @vue-expect-error catch it -->
      <UPinInput v-model="strPin" type="number" />

      <!-- @vue-expect-error catch it -->
      <UPinInput @complete="expectNum" />

      <!-- @vue-expect-error catch it -->
      <UPinInput type="text" @complete="expectNum" />

      <!-- @vue-expect-error catch it -->
      <UPinInput type="number" @complete="expectStr" />
    </div>
  </UApp>
</template>

➜  nuxt-ui-playground git:(main) ✗ pnpm why @nuxt/ui           
Legend: production dependency, optional only, dev only

nuxt-app ~/nuxt-ui-playground (PRIVATE)

dependencies:
@nuxt/ui-pro 3.2.0
└── @nuxt/ui 3.2.0
➜  nuxt-ui-playground git:(main) ✗ pnpm list typescript
Legend: production dependency, optional only, dev only

nuxt-app ~/nuxt-ui-playground (PRIVATE)

devDependencies:
typescript 5.8.3

benjamincanac · 2025-07-03T15:31:53Z

@Teages I do reproduce, try autocomplete the type prop, only text will show-up.

Teages · 2025-07-03T15:33:53Z

Oh, I misunderstood the problem, let me take another look

Teages · 2025-07-03T15:49:35Z

Ok, I have an idea. @benjamincanac

We can remove the default type of T, so it will be 'text' | 'number' by default.
Then we can fix the type of PinInputValue<T>:
- if the input T equals 'number', the type of value should be number[]
- else, it should be string[]

~~We need to make a PR for reka-ui.~~ Edit: I will make it later.

// just a quick idea here, not the best way
type PinInputValue<Type extends PinInputType = 'text'> =
  Type extends 'number'
    ? Type extends 'text'
      ? number[]
      : string[] // it is undefined
    : string[];

// or we can make a `Equal` type
// from https://github.com/type-challenges/type-challenges/blob/fbd74f4067fb43ebbf020f864ef404e99deb585f/utils/index.d.ts#L7
type Equal<X, Y> =
  (<T>() => T extends X ? 1 : 2) extends
  (<T>() => T extends Y ? 1 : 2) ? true : false

So what's happening?

We can make a minimal reproduction for it:

type PinInputType = 'text' | 'number'
type PinInputValue<Type extends PinInputType = 'text'> =
  Type extends 'number'
    ? number[]
    : string[]

export interface Props<T extends PinInputType> {
  type?: T
  value?: PinInputValue<T>
}

const builder = <T extends PinInputType = 'text'> (props: Props<T>): PinInputValue<T> => null as any
 
const a = builder({ type:  })
//                        ^ typing here
type A = typeof a

When we input after type:, TypeScript is using the default type 'text', so TypeScript will only provide autocomplete as Props<'text'>, in here only 'text' be shown.

Teages · 2025-07-03T17:12:35Z

playground/app/pages/components/pin-input.vue

@@ -4,7 +4,7 @@ import theme from '#build/ui/pin-input'
 const sizes = Object.keys(theme.variants.size) as Array<keyof typeof theme.variants.size>
 const variants = Object.keys(theme.variants.variant) as Array<keyof typeof theme.variants.variant>

-const onComplete = (e: string[]) => {
+const onComplete = (e: string[] | number[]) => {


I think we need to reverse this after unovue/reka-ui#2023 were merged. It can be type safe then.

benjamincanac · 2025-07-03T17:35:47Z

Thanks a lot for the PR on Reka UI 😍 Not sure to understand how both of these are different 🤔

type PinInputValue<Type extends PinInputType = 'text'> =
  Type extends 'number'
    ? Type extends 'text'
      ? number[]
      : string[] // it is undefined
    : string[];

type PinInputValue<Type extends PinInputType = 'text'> = Type extends 'number' ? number[] : string[];

Teages · 2025-07-03T17:52:10Z

Everyone know it:

type A = ('number' | 'string') extends 'number' ? true : false
//   ^ false, that is we want

However, this it is different

type Check<T> = T extends 'number' ? true : false
type B = Check<'number' | 'string'> // it is boolean, why???

In fact, TypeScript calculate it like this:

type C = Check<'number'> | Check<'string'> // of course, it is boolean

The better way to avoid this is using [T]

type BetterCheck<T> = [T] extends ['number'] ? true : false
type D = BetterCheck<'number' | 'string'> // it is false now

Distributive Conditional Types | TypeScript

fix: support 'number' type for PinInput component

9c0c0ff

KIM-DONGJU requested a review from benjamincanac as a code owner June 16, 2025 07:52

fix: align PinInput playground example with updated 'text' | 'number'…

02b1b45

… type

benjamincanac reviewed Jun 16, 2025

View reviewed changes

benjamincanac changed the title ~~fix: support 'number' type for PinInput component~~ fix(PinInput): remove generic default type Jun 16, 2025

benjamincanac changed the title ~~fix(PinInput): remove generic default type~~ fix(PinInput): remove default generic type Jun 16, 2025

Merge branch 'v3' into fix/pin-input-type-number

85905be

Teages mentioned this pull request Jul 3, 2025

fix(PinInput): provide better autocomplete for type field unovue/reka-ui#2023

Merged

Teages reviewed Jul 3, 2025

View reviewed changes

revert playground

e666d86

fix(PinInput): remove default generic type #4346

Are you sure you want to change the base?

fix(PinInput): remove default generic type #4346

Conversation

KIM-DONGJU commented Jun 16, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

🔗 Linked issue

❓ Type of change

📚 Description

📝 Checklist

Uh oh!

pkg-pr-new bot commented Jun 16, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

benjamincanac Jun 16, 2025

Choose a reason for hiding this comment

Uh oh!

benjamincanac Jun 16, 2025

Choose a reason for hiding this comment

Uh oh!

KIM-DONGJU Jun 16, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

KIM-DONGJU Jun 17, 2025

Choose a reason for hiding this comment

Uh oh!

benjamincanac Jun 24, 2025

Choose a reason for hiding this comment

Uh oh!

KIM-DONGJU Jun 25, 2025

Choose a reason for hiding this comment

Uh oh!

benjamincanac commented Jul 3, 2025

Uh oh!

Teages commented Jul 3, 2025

Uh oh!

benjamincanac commented Jul 3, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Teages commented Jul 3, 2025

Uh oh!

Teages commented Jul 3, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Teages Jul 3, 2025

Choose a reason for hiding this comment

Uh oh!

benjamincanac Jul 3, 2025

Choose a reason for hiding this comment

Uh oh!

benjamincanac commented Jul 3, 2025

Uh oh!

Teages commented Jul 3, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Uh oh!

fix(PinInput): remove default generic `type` #4346

fix(PinInput): remove default generic `type` #4346

KIM-DONGJU commented Jun 16, 2025 •

edited

Loading

pkg-pr-new bot commented Jun 16, 2025 •

edited

Loading

KIM-DONGJU Jun 16, 2025 •

edited

Loading

benjamincanac commented Jul 3, 2025 •

edited

Loading

Teages commented Jul 3, 2025 •

edited

Loading

Teages commented Jul 3, 2025 •

edited

Loading