feat(PinInput): implement component

[maxsteinwand]

🔗 Linked issue

Resolves #1123

❓ Type of change

• 📖 Documentation (updates to the documentation or readme)
• 🐞 Bug fix (a non-breaking change that fixes an issue)
• 👌 Enhancement (improving an existing functionality)
• ✨ New feature (a non-breaking change that adds functionality)
• 🧹 Chore (updates to the build process or auxiliary tools and libraries)
• ⚠️ Breaking change (fix or feature that would cause existing functionality to change)

📚 Description

Add the PinInput component from radix-vue. https://www.radix-vue.com/components/pin-input
Tests and Documentation are also added.

📝 Checklist

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

[maxsteinwand]

I hope this implementation is okay even tough the radix-vue component is tagged as alpha in their docs. It will not work in a Form (validation etc.) i struggled to get that working. Hope the tests are good/fine as well as i have no expierence with that so far 😄
I oriented myself on the normal input and some other radix-vue implementations.

[benjamincanac]

Wow 🤩 Thank you for doing this, you just saved me a lot of time and the PR looks perfect!

Did you find the CLI to start the component?

[benjamincanac]

Could it be worth having an example with otp prop? Not sure what it does exactly though.

[maxsteinwand]

I was thinking about that too but there is nothing to showcase. It does set the autocomplete type to "one-time-code". This is defined here: https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete#one-time-code
which then allows mobile users to autocomplete with the clipboard or from recieved messages.
https://github.com/unovue/radix-vue/blob/main/packages/radix-vue/src/PinInput/PinInputInput.vue#L159

[benjamincanac]

Shouldn't this be set by default then? 🤔 Nevermind, I added it to the docs!

[benjamincanac]

You also have to run pnpm test:vue to create the snapshots 😊 I haven't found a way to execute both at the same time yet.

[benjamincanac]

@romhml Could you have a look into this to handle it inside a form?

[maxsteinwand]

@benjamincanac Thanks for the quick feedback! I adjusted the docs as you said. Yeah i found the cli, but actually after i already created the files and then i renamed everything again😄

[pkg-pr-new]

pnpm add https://pkg.pr.new/@nuxt/ui@2570

commit: ca66e80

[romhml]

I've made some changes to integrate the PinInput with the Form/FormField components. One thing I could not figure out is how to emit a @blur event, @maxsteinwand do you have an idea?

[maxsteinwand]

@romhml i added the blur event. The event.relatedTarget will be null if the user leaves the input. It would be set to the next input element if the user enters a value. But i am still thinking about the change event. If you now test on the playground and you enter all 5 values it will validate and mark the field as invalid (because max. 4 allowed) but if you then remove the last entry it will not validate again as the change will only get called once all fields are filled.

[romhml]

I made the playground example to test that the validation is triggered, I'll update it to have something more realistic.

[romhml]

I added the form validation on blur and updated the example. The playground example does not work properly currently because the input uses an array rule, I'll do another PR to fix this.

[romhml]

I added the error-pattern prop here which should be used in the PinInput example to correctly associate the errors with the form field.

[benjamincanac]

Thanks @maxsteinwand! 😊