vertumnus
/
primevue-mirror
mirror of https://github.com/primefaces/primevue.git
1
0
Fork 0
Code Packages Releases Activity

Merge branch 'v4.2.0-form' of https://github.com/primefaces/primevue into v4.2.0-form

pull/6632/head
Mert Sincan 2024-10-23 12:20:47 +01:00
parent 9d6c6436b6 ce0a410888
commit f414474c38
22 changed files with 102 additions and 99 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
apps/showcase/doc/autocomplete/FormDoc.vue
View File

@ -3,10 +3,10 @@
<p>AutoComplete can be used with the <NuxtLink to="/forms">PrimeVue Forms</NuxtLink> library.</p>
</DocSectionText>
<div class="card flex justify-center">
<Form v-slot="$form" :resolver="resolver" :initialValues="initialValues" @submit="onFormSubmit" class="flex justify-center flex-col gap-4 w-full md:w-80">
<Form v-slot="$form" :resolver="resolver" :initialValues="initialValues" @submit="onFormSubmit" class="flex justify-center flex-col gap-4 w-full md:w-56">
<div class="flex flex-col gap-2">
<AutoComplete name="country" optionLabel="name" :suggestions="filteredCountries" @complete="search" fluid />
<Message v-if="$form.country?.invalid" severity="error">{{ $form.country.errors[0]?.message }}</Message>
<Message v-if="$form.country?.invalid" severity="error">{{ $form.country.error?.message }}</Message>
</div>
<Button type="submit" severity="secondary" label="Submit" />
</Form>
@ -39,10 +39,10 @@ export default {
),
code: {
basic: `
<Form v-slot="$form" :resolver="resolver" :initialValues="initialValues" @submit="onFormSubmit" class="flex justify-center flex-col gap-4">
<Form v-slot="$form" :resolver="resolver" :initialValues="initialValues" @submit="onFormSubmit" class="flex justify-center flex-col gap-4 w-full md:w-56">
<div class="flex flex-col gap-2">
<AutoComplete name="country" optionLabel="name" :suggestions="filteredCountries" @complete="search" />
<Message v-if="$form.country?.invalid" severity="error">{{ $form.country.errors[0]?.message }}</Message>
<Message v-if="$form.country?.invalid" severity="error">{{ $form.country.error?.message }}</Message>
</div>
<Button type="submit" severity="secondary" label="Submit" />
</Form>
@ -50,10 +50,10 @@ export default {
options: `
<template>
<div class="card flex justify-center">
<Form v-slot="$form" :resolver="resolver" :initialValues="initialValues" @submit="onFormSubmit" class="flex justify-center flex-col gap-4">
<Form v-slot="$form" :resolver="resolver" :initialValues="initialValues" @submit="onFormSubmit" class="flex justify-center flex-col gap-4 w-full md:w-56">
<div class="flex flex-col gap-2">
<AutoComplete name="country" optionLabel="name" :suggestions="filteredCountries" @complete="search" />
<Message v-if="$form.country?.invalid" severity="error">{{ $form.country.errors[0]?.message }}</Message>
<Message v-if="$form.country?.invalid" severity="error">{{ $form.country.error?.message }}</Message>
</div>
<Button type="submit" severity="secondary" label="Submit" />
</Form>
@ -114,10 +114,10 @@ export default {
composition: `
<template>
<div class="card flex justify-center">
<Form v-slot="$form" :resolver="resolver" :initialValues="initialValues" @submit="onFormSubmit" class="flex justify-center flex-col gap-4">
<Form v-slot="$form" :resolver="resolver" :initialValues="initialValues" @submit="onFormSubmit" class="flex justify-center flex-col gap-4 w-full md:w-56">
<div class="flex flex-col gap-2">
<AutoComplete name="country" optionLabel="name" :suggestions="filteredCountries" @complete="search" />
<Message v-if="$form.country?.invalid" severity="error">{{ $form.country.errors[0]?.message }}</Message>
<Message v-if="$form.country?.invalid" severity="error">{{ $form.country.error?.message }}</Message>
</div>
<Button type="submit" severity="secondary" label="Submit" />
</Form>

23
apps/showcase/doc/cascadeselect/FormDoc.vue
View File

@ -6,7 +6,7 @@
<Form v-slot="$form" :resolver="resolver" :initialValues="initialValues" @submit="onFormSubmit" class="flex justify-center flex-col gap-4">
<div class="flex flex-col gap-2">
<CascadeSelect name="city" :options="countries" optionLabel="cname" optionGroupLabel="name" :optionGroupChildren="['states', 'cities']" class="w-56" placeholder="Select a City" />
<Message v-if="$form.city?.invalid" severity="error">{{ $form.city.errors[0]?.message }}</Message>
<Message v-if="$form.city?.invalid" severity="error">{{ $form.city.error?.message }}</Message>
</div>
<Button type="submit" severity="secondary" label="Submit" />
</Form>
@ -26,9 +26,12 @@ export default {
},
resolver: zodResolver(
z.object({
city: z.object({
cname: z.string().min(1, 'City cannot be empty.')
})
city: z.union([
z.object({
cname: z.string().min(1, 'City required.')
}),
z.any().refine((val) => false, { message: 'City required.' })
])
})
),
countries: [
@ -110,7 +113,7 @@ export default {
<Form v-slot="$form" :resolver="resolver" :initialValues="initialValues" @submit="onFormSubmit" class="flex justify-center flex-col gap-4">
<div class="flex flex-col gap-2">
<CascadeSelect name="city" :options="countries" optionLabel="cname" optionGroupLabel="name" :optionGroupChildren="['states', 'cities']" class="w-56" placeholder="Select a City" />
<Message v-if="$form.city?.invalid" severity="error">{{ $form.city.errors[0]?.message }}</Message>
<Message v-if="$form.city?.invalid" severity="error">{{ $form.city.error?.message }}</Message>
</div>
<Button type="submit" severity="secondary" label="Submit" />
</Form>
@ -121,7 +124,7 @@ export default {
<Form v-slot="$form" :resolver="resolver" :initialValues="initialValues" @submit="onFormSubmit" class="flex justify-center flex-col gap-4">
<div class="flex flex-col gap-2">
<CascadeSelect name="city" :options="countries" optionLabel="cname" optionGroupLabel="name" :optionGroupChildren="['states', 'cities']" class="w-56" placeholder="Select a City" />
<Message v-if="$form.city?.invalid" severity="error">{{ $form.city.errors[0]?.message }}</Message>
<Message v-if="$form.city?.invalid" severity="error">{{ $form.city.error?.message }}</Message>
</div>
<Button type="submit" severity="secondary" label="Submit" />
</Form>
@ -139,7 +142,7 @@ export default {
resolver: zodResolver(
z.object({
city: z.object({
cname: z.string().min(1, 'City cannot be empty.')
cname: z.string().min(1, 'City is required.')
})
})
),
@ -235,7 +238,7 @@ export default {
<Form v-slot="$form" :resolver="resolver" :initialValues="initialValues" @submit="onFormSubmit" class="flex justify-center flex-col gap-4">
<div class="flex flex-col gap-2">
<CascadeSelect name="city" :options="countries" optionLabel="cname" optionGroupLabel="name" :optionGroupChildren="['states', 'cities']" class="w-56" placeholder="Select a City" />
<Message v-if="$form.city?.invalid" severity="error">{{ $form.city.errors[0]?.message }}</Message>
<Message v-if="$form.city?.invalid" severity="error">{{ $form.city.error?.message }}</Message>
</div>
<Button type="submit" severity="secondary" label="Submit" />
</Form>
@ -256,14 +259,14 @@ const initialValues = ref({
const resolver = ref(zodResolver(
z.object({
city: z.object({
cname: z.string().min(1, 'City cannot be empty.')
cname: z.string().min(1, 'City is required.')
})
})
));
const resolver = ref(zodResolver(
z.object({
city: z.object({
cname: z.string().min(1, 'City cannot be empty.')
cname: z.string().min(1, 'City is required.')
})
})
));

8
apps/showcase/doc/checkbox/FormDoc.vue
View File

@ -24,7 +24,7 @@
</div>
</CheckboxGroup>
<Message v-if="$form.checkbox?.invalid" severity="error">{{ $form.checkbox.errors[0]?.message }}</Message>
<Message v-if="$form.checkbox?.invalid" severity="error">{{ $form.checkbox.error?.message }}</Message>
</div>
<Button type="submit" severity="secondary" label="Submit" />
</Form>
@ -70,7 +70,7 @@ export default {
</div>
</CheckboxGroup>
<Message v-if="$form.checkbox?.invalid" severity="error">{{ $form.checkbox.errors[0]?.message }}</Message>
<Message v-if="$form.checkbox?.invalid" severity="error">{{ $form.checkbox.error?.message }}</Message>
</div>
<Button type="submit" severity="secondary" label="Submit" />
</Form>
@ -99,7 +99,7 @@ export default {
</div>
</CheckboxGroup>
<Message v-if="$form.checkbox?.invalid" severity="error">{{ $form.checkbox.errors[0]?.message }}</Message>
<Message v-if="$form.checkbox?.invalid" severity="error">{{ $form.checkbox.error?.message }}</Message>
</div>
<Button type="submit" severity="secondary" label="Submit" />
</Form>
@ -159,7 +159,7 @@ export default {
</div>
</CheckboxGroup>
<Message v-if="$form.checkbox?.invalid" severity="error">{{ $form.checkbox.errors[0]?.message }}</Message>
<Message v-if="$form.checkbox?.invalid" severity="error">{{ $form.checkbox.error?.message }}</Message>
</div>
<Button type="submit" severity="secondary" label="Submit" />
</Form>

8
apps/showcase/doc/colorpicker/FormDoc.vue
View File

@ -6,7 +6,7 @@
<Form v-slot="$form" :resolver="resolver" :initialValues="initialValues" @submit="onFormSubmit" class="flex flex-col gap-4">
<div class="flex flex-col items-center gap-2">
<ColorPicker name="colorpicker" />
<Message v-if="$form.colorpicker?.invalid" severity="error">{{ $form.colorpicker.errors[0]?.message }}</Message>
<Message v-if="$form.colorpicker?.invalid" severity="error">{{ $form.colorpicker.error?.message }}</Message>
</div>
<Button type="submit" severity="secondary" label="Submit" />
</Form>
@ -34,7 +34,7 @@ export default {
<Form v-slot="$form" :resolver="resolver" :initialValues="initialValues" @submit="onFormSubmit" class="flex flex-col gap-4">
<div class="flex flex-col items-center gap-2">
<ColorPicker name="colorpicker" />
<Message v-if="$form.colorpicker?.invalid" severity="error">{{ $form.colorpicker.errors[0]?.message }}</Message>
<Message v-if="$form.colorpicker?.invalid" severity="error">{{ $form.colorpicker.error?.message }}</Message>
</div>
<Button type="submit" severity="secondary" label="Submit" />
</Form>
@ -45,7 +45,7 @@ export default {
<Form v-slot="$form" :resolver="resolver" :initialValues="initialValues" @submit="onFormSubmit" class="flex flex-col gap-4">
<div class="flex flex-col items-center gap-2">
<ColorPicker name="colorpicker" />
<Message v-if="$form.colorpicker?.invalid" severity="error">{{ $form.colorpicker.errors[0]?.message }}</Message>
<Message v-if="$form.colorpicker?.invalid" severity="error">{{ $form.colorpicker.error?.message }}</Message>
</div>
<Button type="submit" severity="secondary" label="Submit" />
</Form>
@ -86,7 +86,7 @@ export default {
<Form v-slot="$form" :resolver="resolver" :initialValues="initialValues" @submit="onFormSubmit" class="flex flex-col gap-4">
<div class="flex flex-col items-center gap-2">
<ColorPicker name="colorpicker" />
<Message v-if="$form.colorpicker?.invalid" severity="error">{{ $form.colorpicker.errors[0]?.message }}</Message>
<Message v-if="$form.colorpicker?.invalid" severity="error">{{ $form.colorpicker.error?.message }}</Message>
</div>
<Button type="submit" severity="secondary" label="Submit" />
</Form>

8
apps/showcase/doc/datepicker/FormDoc.vue
View File

@ -6,7 +6,7 @@
<Form v-slot="$form" :resolver="resolver" :initialValues="initialValues" @submit="onFormSubmit" class="flex flex-col gap-4">
<div class="flex flex-col gap-2">
<DatePicker name="date" fluid />
<Message v-if="$form.date?.invalid" severity="error">{{ $form.date.errors[0]?.message }}</Message>
<Message v-if="$form.date?.invalid" severity="error">{{ $form.date.error?.message }}</Message>
</div>
<Button type="submit" severity="secondary" label="Submit" />
</Form>
@ -40,7 +40,7 @@ export default {
<Form v-slot="$form" :resolver="resolver" :initialValues="initialValues" @submit="onFormSubmit" class="flex flex-col gap-4">
<div class="flex flex-col gap-2">
<DatePicker name="date" fluid />
<Message v-if="$form.date?.invalid" severity="error">{{ $form.date.errors[0]?.message }}</Message>
<Message v-if="$form.date?.invalid" severity="error">{{ $form.date.error?.message }}</Message>
</div>
<Button type="submit" severity="secondary" label="Submit" />
</Form>
@ -51,7 +51,7 @@ export default {
<Form v-slot="$form" :resolver="resolver" :initialValues="initialValues" @submit="onFormSubmit" class="flex flex-col gap-4">
<div class="flex flex-col gap-2">
<DatePicker name="date" fluid />
<Message v-if="$form.date?.invalid" severity="error">{{ $form.date.errors[0]?.message }}</Message>
<Message v-if="$form.date?.invalid" severity="error">{{ $form.date.error?.message }}</Message>
</div>
<Button type="submit" severity="secondary" label="Submit" />
</Form>
@ -98,7 +98,7 @@ export default {
<Form v-slot="$form" :resolver="resolver" :initialValues="initialValues" @submit="onFormSubmit" class="flex flex-col gap-4">
<div class="flex flex-col gap-2">
<DatePicker name="date" fluid />
<Message v-if="$form.date?.invalid" severity="error">{{ $form.date.errors[0]?.message }}</Message>
<Message v-if="$form.date?.invalid" severity="error">{{ $form.date.error?.message }}</Message>
</div>
<Button type="submit" severity="secondary" label="Submit" />
</Form>

8
apps/showcase/doc/editor/FormDoc.vue
View File

@ -6,7 +6,7 @@
<Form v-slot="$form" :resolver="resolver" :initialValues="initialValues" @submit="onFormSubmit" class="flex flex-col gap-4">
<div class="flex flex-col gap-2">
<Editor name="editor" editorStyle="height: 320px" />
<Message v-if="$form.editor?.invalid" severity="error">{{ $form.editor.errors[0]?.message }}</Message>
<Message v-if="$form.editor?.invalid" severity="error">{{ $form.editor.error?.message }}</Message>
</div>
<Button type="submit" severity="secondary" label="Submit" />
</Form>
@ -34,7 +34,7 @@ export default {
<Form v-slot="$form" :resolver="resolver" :initialValues="initialValues" @submit="onFormSubmit" class="flex flex-col gap-4">
<div class="flex flex-col gap-2">
<Editor name="editor" editorStyle="height: 320px" />
<Message v-if="$form.editor?.invalid" severity="error">{{ $form.editor.errors[0]?.message }}</Message>
<Message v-if="$form.editor?.invalid" severity="error">{{ $form.editor.error?.message }}</Message>
</div>
<Button type="submit" severity="secondary" label="Submit" />
</Form>
@ -45,7 +45,7 @@ export default {
<Form v-slot="$form" :resolver="resolver" :initialValues="initialValues" @submit="onFormSubmit" class="flex flex-col gap-4">
<div class="flex flex-col gap-2">
<Editor name="editor" editorStyle="height: 320px" />
<Message v-if="$form.editor?.invalid" severity="error">{{ $form.editor.errors[0]?.message }}</Message>
<Message v-if="$form.editor?.invalid" severity="error">{{ $form.editor.error?.message }}</Message>
</div>
<Button type="submit" severity="secondary" label="Submit" />
</Form>
@ -86,7 +86,7 @@ export default {
<Form v-slot="$form" :resolver="resolver" :initialValues="initialValues" @submit="onFormSubmit" class="flex flex-col gap-4">
<div class="flex flex-col gap-2">
<Editor name="editor" editorStyle="height: 320px" />
<Message v-if="$form.editor?.invalid" severity="error">{{ $form.editor.errors[0]?.message }}</Message>
<Message v-if="$form.editor?.invalid" severity="error">{{ $form.editor.error?.message }}</Message>
</div>
<Button type="submit" severity="secondary" label="Submit" />
</Form>

8
apps/showcase/doc/inputmask/FormDoc.vue
View File

@ -6,7 +6,7 @@
<Form v-slot="$form" :resolver="resolver" :initialValues="initialValues" @submit="onFormSubmit" class="flex flex-col gap-4 w-full sm:w-56">
<div class="flex flex-col gap-2">
<InputMask name="mask" mask="99-999999" placeholder="99-999999" fluid />
<Message v-if="$form.mask?.invalid" severity="error">{{ $form.mask.errors[0]?.message }}</Message>
<Message v-if="$form.mask?.invalid" severity="error">{{ $form.mask.error?.message }}</Message>
</div>
<Button type="submit" severity="secondary" label="Submit" />
</Form>
@ -34,7 +34,7 @@ export default {
<Form v-slot="$form" :resolver="resolver" :initialValues="initialValues" @submit="onFormSubmit" class="flex flex-col gap-4 w-full sm:w-56">
<div class="flex flex-col gap-2">
<InputMask name="mask" mask="99-999999" placeholder="99-999999" fluid />
<Message v-if="$form.mask?.invalid" severity="error">{{ $form.mask.errors[0]?.message }}</Message>
<Message v-if="$form.mask?.invalid" severity="error">{{ $form.mask.error?.message }}</Message>
</div>
<Button type="submit" severity="secondary" label="Submit" />
</Form>
@ -45,7 +45,7 @@ export default {
<Form v-slot="$form" :resolver="resolver" :initialValues="initialValues" @submit="onFormSubmit" class="flex flex-col gap-4 w-full sm:w-56">
<div class="flex flex-col gap-2">
<InputMask name="mask" mask="99-999999" placeholder="99-999999" fluid />
<Message v-if="$form.mask?.invalid" severity="error">{{ $form.mask.errors[0]?.message }}</Message>
<Message v-if="$form.mask?.invalid" severity="error">{{ $form.mask.error?.message }}</Message>
</div>
<Button type="submit" severity="secondary" label="Submit" />
</Form>
@ -86,7 +86,7 @@ export default {
<Form v-slot="$form" :resolver="resolver" :initialValues="initialValues" @submit="onFormSubmit" class="flex flex-col gap-4 w-full sm:w-56">
<div class="flex flex-col gap-2">
<InputMask name="mask" mask="99-999999" placeholder="99-999999" fluid />
<Message v-if="$form.mask?.invalid" severity="error">{{ $form.mask.errors[0]?.message }}</Message>
<Message v-if="$form.mask?.invalid" severity="error">{{ $form.mask.error?.message }}</Message>
</div>
<Button type="submit" severity="secondary" label="Submit" />
</Form>

8
apps/showcase/doc/inputnumber/FormDoc.vue
View File

@ -6,7 +6,7 @@
<Form v-slot="$form" :resolver="resolver" :initialValues="initialValues" @submit="onFormSubmit" class="flex flex-col gap-4 w-full sm:w-56">
<div class="flex flex-col gap-2">
<InputNumber name="number" fluid />
<Message v-if="$form.number?.invalid" severity="error">{{ $form.number.errors[0]?.message }}</Message>
<Message v-if="$form.number?.invalid" severity="error">{{ $form.number.error?.message }}</Message>
</div>
<Button type="submit" severity="secondary" label="Submit" />
</Form>
@ -34,7 +34,7 @@ export default {
<Form v-slot="$form" :resolver="resolver" :initialValues="initialValues" @submit="onFormSubmit" class="flex flex-col gap-4 w-full sm:w-56">
<div class="flex flex-col gap-2">
<InputNumber name="number" fluid />
<Message v-if="$form.number?.invalid" severity="error">{{ $form.number.errors[0]?.message }}</Message>
<Message v-if="$form.number?.invalid" severity="error">{{ $form.number.error?.message }}</Message>
</div>
<Button type="submit" severity="secondary" label="Submit" />
</Form>
@ -45,7 +45,7 @@ export default {
<Form v-slot="$form" :resolver="resolver" :initialValues="initialValues" @submit="onFormSubmit" class="flex flex-col gap-4 w-full sm:w-56">
<div class="flex flex-col gap-2">
<InputNumber name="number" fluid />
<Message v-if="$form.number?.invalid" severity="error">{{ $form.number.errors[0]?.message }}</Message>
<Message v-if="$form.number?.invalid" severity="error">{{ $form.number.error?.message }}</Message>
</div>
<Button type="submit" severity="secondary" label="Submit" />
</Form>
@ -86,7 +86,7 @@ export default {
<Form v-slot="$form" :resolver="resolver" :initialValues="initialValues" @submit="onFormSubmit" class="flex flex-col gap-4 w-full sm:w-56">
<div class="flex flex-col gap-2">
<InputNumber name="number" fluid />
<Message v-if="$form.number?.invalid" severity="error">{{ $form.number.errors[0]?.message }}</Message>
<Message v-if="$form.number?.invalid" severity="error">{{ $form.number.error?.message }}</Message>
</div>
<Button type="submit" severity="secondary" label="Submit" />
</Form>

8
apps/showcase/doc/inputotp/FormDoc.vue
View File

@ -5,7 +5,7 @@
<div class="card flex justify-center">
<Form v-slot="$form" :resolver="resolver" :initialValues="initialValues" @submit="onFormSubmit" class="flex flex-col gap-4">
<InputOtp name="otp" />
<Message v-if="$form.otp?.invalid" severity="error" icon="pi pi-times-circle">{{ $form.otp.errors[0]?.message }}</Message>
<Message v-if="$form.otp?.invalid" severity="error" icon="pi pi-times-circle">{{ $form.otp.error?.message }}</Message>
<Button type="submit" severity="secondary" label="Submit" />
</Form>
</div>
@ -31,7 +31,7 @@ export default {
basic: `
<Form v-slot="$form" :resolver="resolver" :initialValues="initialValues" @submit="onFormSubmit" class="flex flex-col gap-4">
<InputOtp name="otp" />
<Message v-if="$form.otp?.invalid" severity="error" icon="pi pi-times-circle">{{ $form.otp.errors[0]?.message }}</Message>
<Message v-if="$form.otp?.invalid" severity="error" icon="pi pi-times-circle">{{ $form.otp.error?.message }}</Message>
<Button type="submit" severity="secondary" label="Submit" />
</Form>
`,
@ -40,7 +40,7 @@ export default {
<div class="card flex justify-center">
<Form v-slot="$form" :resolver="resolver" :initialValues="initialValues" @submit="onFormSubmit" class="flex flex-col gap-4">
<InputOtp name="otp" />
<Message v-if="$form.otp?.invalid" severity="error" icon="pi pi-times-circle">{{ $form.otp.errors[0]?.message }}</Message>
<Message v-if="$form.otp?.invalid" severity="error" icon="pi pi-times-circle">{{ $form.otp.error?.message }}</Message>
<Button type="submit" severity="secondary" label="Submit" />
</Form>
</div>
@ -79,7 +79,7 @@ export default {
<div class="card flex justify-center">
<Form v-slot="$form" :resolver="resolver" :initialValues="initialValues" @submit="onFormSubmit" class="flex flex-col gap-4">
<InputOtp name="otp" />
<Message v-if="$form.otp?.invalid" severity="error" icon="pi pi-times-circle">{{ $form.otp.errors[0]?.message }}</Message>
<Message v-if="$form.otp?.invalid" severity="error" icon="pi pi-times-circle">{{ $form.otp.error?.message }}</Message>
<Button type="submit" severity="secondary" label="Submit" />
</Form>
</div>

16
apps/showcase/doc/inputtext/FormDoc.vue
View File

@ -6,11 +6,11 @@
<Form v-slot="$form" :resolver="resolver" :initialValues="initialValues" @submit="onFormSubmit" class="flex flex-col gap-4 w-full sm:w-56">
<div class="flex flex-col gap-2">
<InputText name="username" type="text" placeholder="Username" fluid />
<Message v-if="$form.username?.invalid" severity="error">{{ $form.username.errors[0]?.message }}</Message>
<Message v-if="$form.username?.invalid" severity="error">{{ $form.username.error?.message }}</Message>
</div>
<div class="flex flex-col gap-2">
<InputText name="email" type="text" placeholder="Email" fluid />
<Message v-if="$form.email?.invalid" severity="error">{{ $form.email.errors[0]?.message }}</Message>
<Message v-if="$form.email?.invalid" severity="error">{{ $form.email.error?.message }}</Message>
</div>
<Button type="submit" severity="secondary" label="Submit" />
</Form>
@ -40,11 +40,11 @@ export default {
<Form v-slot="$form" :resolver="resolver" :initialValues="initialValues" @submit="onFormSubmit" class="flex justify-center flex-col gap-4">
<div class="flex flex-col gap-2">
<InputText name="username" type="text" placeholder="Username" />
<Message v-if="$form.username?.invalid" severity="error">{{ $form.username.errors[0]?.message }}</Message>
<Message v-if="$form.username?.invalid" severity="error">{{ $form.username.error?.message }}</Message>
</div>
<div class="flex flex-col gap-2">
<InputText name="email" type="text" placeholder="Email" />
<Message v-if="$form.email?.invalid" severity="error">{{ $form.email.errors[0]?.message }}</Message>
<Message v-if="$form.email?.invalid" severity="error">{{ $form.email.error?.message }}</Message>
</div>
<Button type="submit" severity="secondary" label="Submit" />
</Form>
@ -55,11 +55,11 @@ export default {
<Form v-slot="$form" :resolver="resolver" :initialValues="initialValues" @submit="onFormSubmit" class="flex flex-col gap-4 w-full sm:w-56">
<div class="flex flex-col gap-2">
<InputText name="username" type="text" placeholder="Username" fluid />
<Message v-if="$form.username?.invalid" severity="error">{{ $form.username.errors[0]?.message }}</Message>
<Message v-if="$form.username?.invalid" severity="error">{{ $form.username.error?.message }}</Message>
</div>
<div class="flex flex-col gap-2">
<InputText name="email" type="text" placeholder="Email" fluid />
<Message v-if="$form.email?.invalid" severity="error">{{ $form.email.errors[0]?.message }}</Message>
<Message v-if="$form.email?.invalid" severity="error">{{ $form.email.error?.message }}</Message>
</div>
<Button type="submit" severity="secondary" label="Submit" />
</Form>
@ -102,11 +102,11 @@ export default {
<Form v-slot="$form" :resolver="resolver" :initialValues="initialValues" @submit="onFormSubmit" class="flex flex-col gap-4 w-full sm:w-56">
<div class="flex flex-col gap-2">
<InputText name="username" type="text" placeholder="Username" fluid />
<Message v-if="$form.username?.invalid" severity="error">{{ $form.username.errors[0]?.message }}</Message>
<Message v-if="$form.username?.invalid" severity="error">{{ $form.username.error?.message }}</Message>
</div>
<div class="flex flex-col gap-2">
<InputText name="email" type="text" placeholder="Email" fluid />
<Message v-if="$form.email?.invalid" severity="error">{{ $form.email.errors[0]?.message }}</Message>
<Message v-if="$form.email?.invalid" severity="error">{{ $form.email.error?.message }}</Message>
</div>
<Button type="submit" severity="secondary" label="Submit" />
</Form>

8
apps/showcase/doc/knob/FormDoc.vue
View File

@ -6,7 +6,7 @@
<Form v-slot="$form" :resolver="resolver" :initialValues="initialValues" @submit="onFormSubmit" class="flex flex-col gap-4">
<div class="flex flex-col items-center gap-2">
<Knob name="knob" />
<Message v-if="$form.knob?.invalid" severity="error">{{ $form.knob.errors[0]?.message }}</Message>
<Message v-if="$form.knob?.invalid" severity="error">{{ $form.knob.error?.message }}</Message>
</div>
<Button type="submit" severity="secondary" label="Submit" />
</Form>
@ -34,7 +34,7 @@ export default {
<Form v-slot="$form" :resolver="resolver" :initialValues="initialValues" @submit="onFormSubmit" class="flex flex-col gap-4">
<div class="flex flex-col items-center gap-2">
<Knob name="knob" />
<Message v-if="$form.knob?.invalid" severity="error">{{ $form.knob.errors[0]?.message }}</Message>
<Message v-if="$form.knob?.invalid" severity="error">{{ $form.knob.error?.message }}</Message>
</div>
<Button type="submit" severity="secondary" label="Submit" />
</Form>
@ -45,7 +45,7 @@ export default {
<Form v-slot="$form" :resolver="resolver" :initialValues="initialValues" @submit="onFormSubmit" class="flex flex-col gap-4">
<div class="flex flex-col items-center gap-2">
<Knob name="knob" />
<Message v-if="$form.knob?.invalid" severity="error">{{ $form.knob.errors[0]?.message }}</Message>
<Message v-if="$form.knob?.invalid" severity="error">{{ $form.knob.error?.message }}</Message>
</div>
<Button type="submit" severity="secondary" label="Submit" />
</Form>
@ -87,7 +87,7 @@ export default {
<Form v-slot="$form" :resolver="resolver" :initialValues="initialValues" @submit="onFormSubmit" class="flex flex-col gap-4">
<div class="flex flex-col items-center gap-2">
<Knob name="knob" />
<Message v-if="$form.knob?.invalid" severity="error">{{ $form.knob.errors[0]?.message }}</Message>
<Message v-if="$form.knob?.invalid" severity="error">{{ $form.knob.error?.message }}</Message>
</div>
<Button type="submit" severity="secondary" label="Submit" />
</Form>

8
apps/showcase/doc/listbox/FormDoc.vue
View File

@ -6,7 +6,7 @@
<Form v-slot="$form" :resolver="resolver" :initialValues="initialValues" @submit="onFormSubmit" class="flex flex-col gap-4 w-full sm:w-56">
<div class="flex flex-col gap-2">
<Listbox name="city" :options="cities" optionLabel="name" fluid />
<Message v-if="$form.city?.invalid" severity="error">{{ $form.city.errors[0]?.message }}</Message>
<Message v-if="$form.city?.invalid" severity="error">{{ $form.city.error?.message }}</Message>
</div>
<Button type="submit" severity="secondary" label="Submit" />
</Form>
@ -46,7 +46,7 @@ export default {
<Form v-slot="$form" :resolver="resolver" :initialValues="initialValues" @submit="onFormSubmit" class="flex flex-col gap-4 w-full sm:w-56">
<div class="flex flex-col gap-2">
<Listbox name="city" :options="cities" optionLabel="name" fluid />
<Message v-if="$form.city?.invalid" severity="error">{{ $form.city.errors[0]?.message }}</Message>
<Message v-if="$form.city?.invalid" severity="error">{{ $form.city.error?.message }}</Message>
</div>
<Button type="submit" severity="secondary" label="Submit" />
</Form>
@ -57,7 +57,7 @@ export default {
<Form v-slot="$form" :resolver="resolver" :initialValues="initialValues" @submit="onFormSubmit" class="flex flex-col gap-4 w-full sm:w-56">
<div class="flex flex-col gap-2">
<Listbox name="city" :options="cities" optionLabel="name" fluid />
<Message v-if="$form.city?.invalid" severity="error">{{ $form.city.errors[0]?.message }}</Message>
<Message v-if="$form.city?.invalid" severity="error">{{ $form.city.error?.message }}</Message>
</div>
<Button type="submit" severity="secondary" label="Submit" />
</Form>
@ -110,7 +110,7 @@ export default {
<Form v-slot="$form" :resolver="resolver" :initialValues="initialValues" @submit="onFormSubmit" class="flex flex-col gap-4 w-full sm:w-56">
<div class="flex flex-col gap-2">
<Listbox name="city" :options="cities" optionLabel="name" fluid />
<Message v-if="$form.city?.invalid" severity="error">{{ $form.city.errors[0]?.message }}</Message>
<Message v-if="$form.city?.invalid" severity="error">{{ $form.city.error?.message }}</Message>
</div>
<Button type="submit" severity="secondary" label="Submit" />
</Form>

8
apps/showcase/doc/multiselect/FormDoc.vue
View File

@ -4,7 +4,7 @@
<Form v-slot="$form" :resolver="resolver" :initialValues="initialValues" @submit="onFormSubmit" class="flex justify-center flex-col gap-4 w-full md:w-80">
<div class="flex flex-col gap-2">
<MultiSelect name="city" :options="cities" optionLabel="name" filter placeholder="Select Cities" :maxSelectedLabels="3" fluid />
<Message v-if="$form.city?.invalid" severity="error">{{ $form.city.errors[0]?.message }}</Message>
<Message v-if="$form.city?.invalid" severity="error">{{ $form.city.error?.message }}</Message>
</div>
<Button type="submit" severity="secondary" label="Submit" />
</Form>
@ -45,7 +45,7 @@ export default {
<Form v-slot="$form" :resolver="resolver" :initialValues="initialValues" @submit="onFormSubmit" class="flex justify-center flex-col gap-4">
<div class="flex flex-col gap-2">
<MultiSelect name="city" :options="cities" optionLabel="name" filter placeholder="Select Cities" :maxSelectedLabels="3" class="w-full md:w-80" />
<Message v-if="$form.city?.invalid" severity="error">{{ $form.city.errors[0]?.message }}</Message>
<Message v-if="$form.city?.invalid" severity="error">{{ $form.city.error?.message }}</Message>
</div>
<Button type="submit" severity="secondary" label="Submit" />
</Form>
@ -56,7 +56,7 @@ export default {
<Form v-slot="$form" :resolver="resolver" :initialValues="initialValues" @submit="onFormSubmit" class="flex justify-center flex-col gap-4">
<div class="flex flex-col gap-2">
<MultiSelect name="city" :options="cities" optionLabel="name" filter placeholder="Select Cities" :maxSelectedLabels="3" class="w-full md:w-80" />
<Message v-if="$form.city?.invalid" severity="error">{{ $form.city.errors[0]?.message }}</Message>
<Message v-if="$form.city?.invalid" severity="error">{{ $form.city.error?.message }}</Message>
</div>
<Button type="submit" severity="secondary" label="Submit" />
</Form>
@ -110,7 +110,7 @@ export default {
<Form v-slot="$form" :resolver="resolver" :initialValues="initialValues" @submit="onFormSubmit" class="flex justify-center flex-col gap-4">
<div class="flex flex-col gap-2">
<MultiSelect name="city" :options="cities" optionLabel="name" filter placeholder="Select Cities" :maxSelectedLabels="3" class="w-full md:w-80" />
<Message v-if="$form.city?.invalid" severity="error">{{ $form.city.errors[0]?.message }}</Message>
<Message v-if="$form.city?.invalid" severity="error">{{ $form.city.error?.message }}</Message>
</div>
<Button type="submit" severity="secondary" label="Submit" />
</Form>

8
apps/showcase/doc/radiobutton/FormDoc.vue
View File

@ -22,7 +22,7 @@
<label for="ingredient4" class="ml-2">Onion</label>
</div>
</RadioButtonGroup>
<Message v-if="$form.radiobutton?.invalid" severity="error" icon="pi pi-times-circle">{{ $form.radiobutton.errors[0]?.message }}</Message>
<Message v-if="$form.radiobutton?.invalid" severity="error" icon="pi pi-times-circle">{{ $form.radiobutton.error?.message }}</Message>
<Button type="submit" severity="secondary" label="Submit" />
</Form>
</div>
@ -65,7 +65,7 @@ export default {
<label for="ingredient4" class="ml-2">Onion</label>
</div>
</RadioButtonGroup>
<Message v-if="$form.radiobutton?.invalid" severity="error" icon="pi pi-times-circle">{{ $form.radiobutton.errors[0]?.message }}</Message>
<Message v-if="$form.radiobutton?.invalid" severity="error" icon="pi pi-times-circle">{{ $form.radiobutton.error?.message }}</Message>
<Button type="submit" severity="secondary" label="Submit" />
</Form>
`,
@ -91,7 +91,7 @@ export default {
<label for="ingredient4" class="ml-2">Onion</label>
</div>
</RadioButtonGroup>
<Message v-if="$form.radiobutton?.invalid" severity="error" icon="pi pi-times-circle">{{ $form.radiobutton.errors[0]?.message }}</Message>
<Message v-if="$form.radiobutton?.invalid" severity="error" icon="pi pi-times-circle">{{ $form.radiobutton.error?.message }}</Message>
<Button type="submit" severity="secondary" label="Submit" />
</Form>
</div>
@ -147,7 +147,7 @@ export default {
<label for="ingredient4" class="ml-2">Onion</label>
</div>
</RadioButtonGroup>
<Message v-if="$form.radiobutton?.invalid" severity="error" icon="pi pi-times-circle">{{ $form.radiobutton.errors[0]?.message }}</Message>
<Message v-if="$form.radiobutton?.invalid" severity="error" icon="pi pi-times-circle">{{ $form.radiobutton.error?.message }}</Message>
<Button type="submit" severity="secondary" label="Submit" />
</Form>
</div>

8
apps/showcase/doc/rating/FormDoc.vue
View File

@ -6,7 +6,7 @@
<Form v-slot="$form" :resolver="resolver" :initialValues="initialValues" @submit="onFormSubmit" class="flex flex-col gap-4">
<div class="flex flex-col items-center gap-2">
<Rating name="rating" />
<Message v-if="$form.rating?.invalid" severity="error">{{ $form.rating.errors[0]?.message }}</Message>
<Message v-if="$form.rating?.invalid" severity="error">{{ $form.rating.error?.message }}</Message>
</div>
<Button type="submit" severity="secondary" label="Submit" />
</Form>
@ -34,7 +34,7 @@ export default {
<Form v-slot="$form" :resolver="resolver" :initialValues="initialValues" @submit="onFormSubmit" class="flex flex-col gap-4">
<div class="flex flex-col items-center gap-2">
<Rating name="rating" />
<Message v-if="$form.rating?.invalid" severity="error">{{ $form.rating.errors[0]?.message }}</Message>
<Message v-if="$form.rating?.invalid" severity="error">{{ $form.rating.error?.message }}</Message>
</div>
<Button type="submit" severity="secondary" label="Submit" />
</Form>
@ -45,7 +45,7 @@ export default {
<Form v-slot="$form" :resolver="resolver" :initialValues="initialValues" @submit="onFormSubmit" class="flex flex-col gap-4">
<div class="flex flex-col items-center gap-2">
<Rating name="rating" />
<Message v-if="$form.rating?.invalid" severity="error">{{ $form.rating.errors[0]?.message }}</Message>
<Message v-if="$form.rating?.invalid" severity="error">{{ $form.rating.error?.message }}</Message>
</div>
<Button type="submit" severity="secondary" label="Submit" />
</Form>
@ -86,7 +86,7 @@ export default {
<Form v-slot="$form" :resolver="resolver" :initialValues="initialValues" @submit="onFormSubmit" class="flex flex-col gap-4">
<div class="flex flex-col items-center gap-2">
<Rating name="rating" />
<Message v-if="$form.rating?.invalid" severity="error">{{ $form.rating.errors[0]?.message }}</Message>
<Message v-if="$form.rating?.invalid" severity="error">{{ $form.rating.error?.message }}</Message>
</div>
<Button type="submit" severity="secondary" label="Submit" />
</Form>

2
apps/showcase/doc/select/FormDoc.vue
View File

@ -3,7 +3,7 @@
<div class="card flex justify-center">
<Form v-slot="$form" :resolver="resolver" :initialValues="initialValues" @submit="onFormSubmit" class="flex flex-col gap-4 w-full md:w-56">
<div class="flex flex-col gap-2">
<Select name="city" :options="cities" showClear optionLabel="name" placeholder="Select a City" fluid />
<Select name="city" :options="cities" optionLabel="name" placeholder="Select a City" fluid />
<Message v-if="$form.city?.invalid" severity="error">{{ $form.city.errors[0]?.message }}</Message>
</div>
<Button type="submit" severity="secondary" label="Submit" />

8
apps/showcase/doc/selectbutton/FormDoc.vue
View File

@ -6,7 +6,7 @@
<Form v-slot="$form" :resolver="resolver" :initialValues="initialValues" @submit="onFormSubmit" class="flex flex-col gap-4">
<div class="flex items-center flex-col gap-2">
<SelectButton name="selectbutton" :options="options" />
<Message v-if="$form.selectbutton?.invalid" severity="error">{{ $form.selectbutton.errors[0]?.message }}</Message>
<Message v-if="$form.selectbutton?.invalid" severity="error">{{ $form.selectbutton.error?.message }}</Message>
</div>
<Button type="submit" severity="secondary" label="Submit" />
</Form>
@ -35,7 +35,7 @@ export default {
<Form v-slot="$form" :resolver="resolver" :initialValues="initialValues" @submit="onFormSubmit" class="flex flex-col gap-4">
<div class="flex flex-col gap-2">
<SelectButton name="selectbutton" :options="options" />
<Message v-if="$form.selectbutton?.invalid" severity="error">{{ $form.selectbutton.errors[0]?.message }}</Message>
<Message v-if="$form.selectbutton?.invalid" severity="error">{{ $form.selectbutton.error?.message }}</Message>
</div>
<Button type="submit" severity="secondary" label="Submit" />
</Form>
@ -46,7 +46,7 @@ export default {
<Form v-slot="$form" :resolver="resolver" :initialValues="initialValues" @submit="onFormSubmit" class="flex flex-col gap-4">
<div class="flex flex-col gap-2">
<SelectButton name="selectbutton" :options="options" />
<Message v-if="$form.selectbutton?.invalid" severity="error">{{ $form.selectbutton.errors[0]?.message }}</Message>
<Message v-if="$form.selectbutton?.invalid" severity="error">{{ $form.selectbutton.error?.message }}</Message>
</div>
<Button type="submit" severity="secondary" label="Submit" />
</Form>
@ -88,7 +88,7 @@ export default {
<Form v-slot="$form" :resolver="resolver" :initialValues="initialValues" @submit="onFormSubmit" class="flex flex-col gap-4">
<div class="flex flex-col gap-2">
<SelectButton name="selectbutton" :options="options" />
<Message v-if="$form.selectbutton?.invalid" severity="error">{{ $form.selectbutton.errors[0]?.message }}</Message>
<Message v-if="$form.selectbutton?.invalid" severity="error">{{ $form.selectbutton.error?.message }}</Message>
</div>
<Button type="submit" severity="secondary" label="Submit" />
</Form>

8
apps/showcase/doc/slider/FormDoc.vue
View File

@ -6,7 +6,7 @@
<Form v-slot="$form" :resolver="resolver" :initialValues="initialValues" @submit="onFormSubmit" class="flex flex-col gap-4 w-full sm:w-56">
<div class="flex flex-col gap-2">
<Slider name="slider" />
<Message v-if="$form.slider?.invalid" severity="error">{{ $form.slider.errors[0]?.message }}</Message>
<Message v-if="$form.slider?.invalid" severity="error">{{ $form.slider.error?.message }}</Message>
</div>
<Button type="submit" severity="secondary" label="Submit" />
</Form>
@ -34,7 +34,7 @@ export default {
<Form v-slot="$form" :resolver="resolver" :initialValues="initialValues" @submit="onFormSubmit" class="flex flex-col gap-4 w-full sm:w-56">
<div class="flex flex-col gap-2">
<Slider name="slider" />
<Message v-if="$form.slider?.invalid" severity="error">{{ $form.slider.errors[0]?.message }}</Message>
<Message v-if="$form.slider?.invalid" severity="error">{{ $form.slider.error?.message }}</Message>
</div>
<Button type="submit" severity="secondary" label="Submit" />
</Form>
@ -45,7 +45,7 @@ export default {
<Form v-slot="$form" :resolver="resolver" :initialValues="initialValues" @submit="onFormSubmit" class="flex flex-col gap-4 w-full sm:w-56">
<div class="flex flex-col gap-2">
<Slider name="slider" />
<Message v-if="$form.slider?.invalid" severity="error">{{ $form.slider.errors[0]?.message }}</Message>
<Message v-if="$form.slider?.invalid" severity="error">{{ $form.slider.error?.message }}</Message>
</div>
<Button type="submit" severity="secondary" label="Submit" />
</Form>
@ -86,7 +86,7 @@ export default {
<Form v-slot="$form" :resolver="resolver" :initialValues="initialValues" @submit="onFormSubmit" class="flex flex-col gap-4 w-full sm:w-56">
<div class="flex flex-col gap-2">
<Slider name="slider" />
<Message v-if="$form.slider?.invalid" severity="error">{{ $form.slider.errors[0]?.message }}</Message>
<Message v-if="$form.slider?.invalid" severity="error">{{ $form.slider.error?.message }}</Message>
</div>
<Button type="submit" severity="secondary" label="Submit" />
</Form>

8
apps/showcase/doc/textarea/FormDoc.vue
View File

@ -6,7 +6,7 @@
<Form v-slot="$form" :resolver="resolver" :initialValues="initialValues" @submit="onFormSubmit" class="flex flex-col gap-4">
<div class="flex flex-col gap-2">
<Textarea name="textarea" rows="5" cols="30" style="resize: none" />
<Message v-if="$form.textarea?.invalid" severity="error">{{ $form.textarea.errors[0]?.message }}</Message>
<Message v-if="$form.textarea?.invalid" severity="error">{{ $form.textarea.error?.message }}</Message>
</div>
<Button type="submit" severity="secondary" label="Submit" />
</Form>
@ -34,7 +34,7 @@ export default {
<Form v-slot="$form" :resolver="resolver" :initialValues="initialValues" @submit="onFormSubmit" class="flex flex-col gap-4">
<div class="flex flex-col gap-2">
<Textarea name="textarea" rows="5" cols="30" style="resize: none" />
<Message v-if="$form.textarea?.invalid" severity="error">{{ $form.textarea.errors[0]?.message }}</Message>
<Message v-if="$form.textarea?.invalid" severity="error">{{ $form.textarea.error?.message }}</Message>
</div>
<Button type="submit" severity="secondary" label="Submit" />
</Form>
@ -45,7 +45,7 @@ export default {
<Form v-slot="$form" :resolver="resolver" :initialValues="initialValues" @submit="onFormSubmit" class="flex flex-col gap-4">
<div class="flex flex-col gap-2">
<Textarea name="textarea" rows="5" cols="30" style="resize: none" />
<Message v-if="$form.textarea?.invalid" severity="error">{{ $form.textarea.errors[0]?.message }}</Message>
<Message v-if="$form.textarea?.invalid" severity="error">{{ $form.textarea.error?.message }}</Message>
</div>
<Button type="submit" severity="secondary" label="Submit" />
</Form>
@ -86,7 +86,7 @@ export default {
<Form v-slot="$form" :resolver="resolver" :initialValues="initialValues" @submit="onFormSubmit" class="flex flex-col gap-4">
<div class="flex flex-col gap-2">
<Textarea name="textarea" rows="5" cols="30" style="resize: none" />
<Message v-if="$form.textarea?.invalid" severity="error">{{ $form.textarea.errors[0]?.message }}</Message>
<Message v-if="$form.textarea?.invalid" severity="error">{{ $form.textarea.error?.message }}</Message>
</div>
<Button type="submit" severity="secondary" label="Submit" />
</Form>

8
apps/showcase/doc/togglebutton/FormDoc.vue
View File

@ -6,7 +6,7 @@
<Form v-slot="$form" :resolver="resolver" :initialValues="initialValues" @submit="onFormSubmit" class="flex flex-col gap-4">
<div class="flex flex-col items-center gap-2">
<ToggleButton name="togglebutton" class="w-24" onLabel="On" offLabel="Off" />
<Message v-if="$form.togglebutton?.invalid" severity="error">{{ $form.togglebutton.errors[0]?.message }}</Message>
<Message v-if="$form.togglebutton?.invalid" severity="error">{{ $form.togglebutton.error?.message }}</Message>
</div>
<Button type="submit" severity="secondary" label="Submit" />
</Form>
@ -34,7 +34,7 @@ export default {
<Form v-slot="$form" :resolver="resolver" :initialValues="initialValues" @submit="onFormSubmit" class="flex flex-col gap-4">
<div class="flex flex-col items-center gap-2">
<ToggleButton name="togglebutton" class="w-24" onLabel="On" offLabel="Off" />
<Message v-if="$form.togglebutton?.invalid" severity="error">{{ $form.togglebutton.errors[0]?.message }}</Message>
<Message v-if="$form.togglebutton?.invalid" severity="error">{{ $form.togglebutton.error?.message }}</Message>
</div>
<Button type="submit" severity="secondary" label="Submit" />
</Form>
@ -45,7 +45,7 @@ export default {
<Form v-slot="$form" :resolver="resolver" :initialValues="initialValues" @submit="onFormSubmit" class="flex flex-col gap-4">
<div class="flex flex-col items-center gap-2">
<ToggleButton name="togglebutton" class="w-24" onLabel="On" offLabel="Off" />
<Message v-if="$form.togglebutton?.invalid" severity="error">{{ $form.togglebutton.errors[0]?.message }}</Message>
<Message v-if="$form.togglebutton?.invalid" severity="error">{{ $form.togglebutton.error?.message }}</Message>
</div>
<Button type="submit" severity="secondary" label="Submit" />
</Form>
@ -86,7 +86,7 @@ export default {
<Form v-slot="$form" :resolver="resolver" :initialValues="initialValues" @submit="onFormSubmit" class="flex flex-col gap-4">
<div class="flex flex-col items-center gap-2">
<ToggleButton name="togglebutton" class="w-24" onLabel="On" offLabel="Off" />
<Message v-if="$form.togglebutton?.invalid" severity="error">{{ $form.togglebutton.errors[0]?.message }}</Message>
<Message v-if="$form.togglebutton?.invalid" severity="error">{{ $form.togglebutton.error?.message }}</Message>
</div>
<Button type="submit" severity="secondary" label="Submit" />
</Form>

8
apps/showcase/doc/toggleswitch/FormDoc.vue
View File

@ -6,7 +6,7 @@
<Form v-slot="$form" :resolver="resolver" :initialValues="initialValues" @submit="onFormSubmit" class="flex flex-col gap-4">
<div class="flex flex-col items-center gap-2">
<ToggleSwitch name="toggleswitch" />
<Message v-if="$form.toggleswitch?.invalid" severity="error">{{ $form.toggleswitch.errors[0]?.message }}</Message>
<Message v-if="$form.toggleswitch?.invalid" severity="error">{{ $form.toggleswitch.error?.message }}</Message>
</div>
<Button type="submit" severity="secondary" label="Submit" />
</Form>
@ -34,7 +34,7 @@ export default {
<Form v-slot="$form" :resolver="resolver" :initialValues="initialValues" @submit="onFormSubmit" class="flex flex-col gap-4">
<div class="flex flex-col items-center gap-2">
<ToggleSwitch name="toggleswitch" />
<Message v-if="$form.toggleswitch?.invalid" severity="error">{{ $form.toggleswitch.errors[0]?.message }}</Message>
<Message v-if="$form.toggleswitch?.invalid" severity="error">{{ $form.toggleswitch.error?.message }}</Message>
</div>
<Button type="submit" severity="secondary" label="Submit" />
</Form>
@ -45,7 +45,7 @@ export default {
<Form v-slot="$form" :resolver="resolver" :initialValues="initialValues" @submit="onFormSubmit" class="flex flex-col gap-4">
<div class="flex flex-col items-center gap-2">
<ToggleSwitch name="toggleswitch" />
<Message v-if="$form.toggleswitch?.invalid" severity="error">{{ $form.toggleswitch.errors[0]?.message }}</Message>
<Message v-if="$form.toggleswitch?.invalid" severity="error">{{ $form.toggleswitch.error?.message }}</Message>
</div>
<Button type="submit" severity="secondary" label="Submit" />
</Form>
@ -86,7 +86,7 @@ export default {
<Form v-slot="$form" :resolver="resolver" :initialValues="initialValues" @submit="onFormSubmit" class="flex flex-col gap-4">
<div class="flex flex-col items-center gap-2">
<ToggleSwitch name="toggleswitch" />
<Message v-if="$form.toggleswitch?.invalid" severity="error">{{ $form.toggleswitch.errors[0]?.message }}</Message>
<Message v-if="$form.toggleswitch?.invalid" severity="error">{{ $form.toggleswitch.error?.message }}</Message>
</div>
<Button type="submit" severity="secondary" label="Submit" />
</Form>

8
apps/showcase/doc/treeselect/FormDoc.vue
View File

@ -6,7 +6,7 @@
<Form v-slot="$form" :resolver="resolver" :initialValues="initialValues" @submit="onFormSubmit" class="flex flex-col gap-4 w-full md:w-80">
<div class="flex flex-col gap-2">
<TreeSelect name="node" :options="nodes" placeholder="Select Item" fluid />
<Message v-if="$form.node?.invalid" severity="error">{{ $form.node.errors[0]?.message }}</Message>
<Message v-if="$form.node?.invalid" severity="error">{{ $form.node.error?.message }}</Message>
</div>
<Button type="submit" severity="secondary" label="Submit" />
</Form>
@ -36,7 +36,7 @@ export default {
<Form v-slot="$form" :resolver="resolver" :initialValues="initialValues" @submit="onFormSubmit" class="flex flex-col gap-4 w-full md:w-80">
<div class="flex flex-col gap-2">
<TreeSelect name="node" :options="nodes" placeholder="Select Item" fluid />
<Message v-if="$form.node?.invalid" severity="error">{{ $form.node.errors[0]?.message }}</Message>
<Message v-if="$form.node?.invalid" severity="error">{{ $form.node.error?.message }}</Message>
</div>
<Button type="submit" severity="secondary" label="Submit" />
</Form>
@ -47,7 +47,7 @@ export default {
<Form v-slot="$form" :resolver="resolver" :initialValues="initialValues" @submit="onFormSubmit" class="flex flex-col gap-4 w-full md:w-80">
<div class="flex flex-col gap-2">
<TreeSelect name="node" :options="nodes" placeholder="Select Item" fluid />
<Message v-if="$form.node?.invalid" severity="error">{{ $form.node.errors[0]?.message }}</Message>
<Message v-if="$form.node?.invalid" severity="error">{{ $form.node.error?.message }}</Message>
</div>
<Button type="submit" severity="secondary" label="Submit" />
</Form>
@ -90,7 +90,7 @@ export default {
<Form v-slot="$form" :resolver="resolver" :initialValues="initialValues" @submit="onFormSubmit" class="flex flex-col gap-4 w-full md:w-80">
<div class="flex flex-col gap-2">
<TreeSelect name="node" :options="nodes" placeholder="Select Item" fluid />
<Message v-if="$form.node?.invalid" severity="error">{{ $form.node.errors[0]?.message }}</Message>
<Message v-if="$form.node?.invalid" severity="error">{{ $form.node.error?.message }}</Message>
</div>
<Button type="submit" severity="secondary" label="Submit" />
</Form>