arthur/ui
1
0
Fork 0
mirror of https://github.com/ArthurDanjou/ui.git synced 2026-01-21 07:21:46 +01:00
Code Issues Packages Projects Releases Wiki Activity

feat(PinInput): implement component (#2570)

Browse Source 
Co-authored-by: Max Steinwand <msteinwand@kues.de>
Co-authored-by: Benjamin Canac <canacb1@gmail.com>
Co-authored-by: Romain Hamel <rom.hml@gmail.com>
This commit is contained in:
max
2024-11-12 16:11:06 +01:00
committed by GitHub
parent f516d7b36d
commit 95aa6f68b3
32 changed files with 1580 additions and 654 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
docs/app/components/content/examples/form/FormExampleElements.vue
View File

@@ -29,10 +29,11 @@ const schema = z.object({
radioGroup: z.string().refine(value => value === 'option-2', {
message: 'Select Option 2'
}),
slider: z.number().max(20, { message: 'Must be less than 20' })
slider: z.number().max(20, { message: 'Must be less than 20' }),
pin: z.string().regex(/^\d$/).array().length(5)
})
type Schema = z.output<typeof schema>
type Schema = z.input<typeof schema>
const state = reactive<Partial<Schema>>({})
@@ -52,7 +53,7 @@ async function onSubmit(event: FormSubmitEvent<any>) {
</script>
<template>
<UForm ref="form" :state="state" :schema="schema" @submit="onSubmit">
<UForm ref="form" :state="state" :schema="schema" class="w-full" @submit="onSubmit">
<div class="grid grid-cols-3 gap-4">
<UFormField label="Input" name="input">
<UInput v-model="state.input" placeholder="john@lennon.com" class="w-40" />
@@ -101,6 +102,12 @@ async function onSubmit(event: FormSubmitEvent<any>) {
<UFormField name="radioGroup">
<URadioGroup v-model="state.radioGroup" legend="Radio group" :items="items" />
</UFormField>
<span />
<UFormField name="pin" label="Pin Input" :error-pattern="/(pin)\..*/">
<UPinInput v-model="state.pin" />
</UFormField>
</div>
<div class="flex gap-2 mt-8">