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

Update per component form samples

pull/6687/head
Cagatay Civici 2024-10-30 13:26:41 +03:00
parent c541686cd6
commit 5c8f170048
24 changed files with 409 additions and 400 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
apps/showcase/doc/autocomplete/BasicDoc.vue
View File

@ -1,6 +1,6 @@
<template> <template>
<DocSectionText v-bind="$attrs"> <DocSectionText v-bind="$attrs">
<p>AutoComplete is used as a controlled component with <i>v-model</i> property. In addition, <i>suggestions</i> property and a <i>complete</i> method are required to query the results.</p> <p>AutoComplete is used with the <i>v-model</i> property. In addition, <i>suggestions</i> property and a <i>complete</i> method are required to query the results.</p>
</DocSectionText> </DocSectionText>
<div class="card flex justify-center"> <div class="card flex justify-center">
<AutoComplete v-model="value" :suggestions="items" @complete="search" /> <AutoComplete v-model="value" :suggestions="items" @complete="search" />

33
apps/showcase/doc/autocomplete/FormsDoc.vue
View File

@ -1,12 +1,12 @@
<template> <template>
<DocSectionText v-bind="$attrs"> <DocSectionText v-bind="$attrs">
<p>AutoComplete can be used with the <NuxtLink to="/forms">PrimeVue Forms</NuxtLink> library.</p> <p>AutoComplete integrates seamlessly with the <NuxtLink to="/forms">PrimeVue Forms</NuxtLink> library.</p>
</DocSectionText> </DocSectionText>
<div class="card flex justify-center"> <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-56"> <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"> <div class="flex flex-col gap-1">
<AutoComplete name="country" optionLabel="name" :suggestions="filteredCountries" @complete="search" fluid /> <AutoComplete name="country" optionLabel="name" :suggestions="filteredCountries" @complete="search" fluid />
<Message v-if="$form.country?.invalid" severity="error">{{ $form.country.error?.message }}</Message> <Message v-if="$form.country?.invalid" severity="error" size="small" variant="simple">{{ $form.country.error?.message }}</Message>
</div> </div>
<Button type="submit" severity="secondary" label="Submit" /> <Button type="submit" severity="secondary" label="Submit" />
</Form> </Form>
@ -31,18 +31,18 @@ export default {
z.object({ z.object({
country: z.union([ country: z.union([
z.object({ z.object({
name: z.string().min(1, 'Country required.') name: z.string().min(1, 'Country is required.')
}), }),
z.any().refine((val) => false, { message: 'Country required.' }) z.any().refine((val) => false, { message: 'Country is required.' })
]) ])
}) })
), ),
code: { code: {
basic: ` basic: `
<Form v-slot="$form" :resolver="resolver" :initialValues="initialValues" @submit="onFormSubmit" class="flex justify-center flex-col gap-4 w-full md:w-56"> <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"> <div class="flex flex-col gap-1">
<AutoComplete name="country" optionLabel="name" :suggestions="filteredCountries" @complete="search" /> <AutoComplete name="country" optionLabel="name" :suggestions="filteredCountries" @complete="search" />
<Message v-if="$form.country?.invalid" severity="error">{{ $form.country.error?.message }}</Message> <Message v-if="$form.country?.invalid" severity="error" size="small" variant="simple">{{ $form.country.error?.message }}</Message>
</div> </div>
<Button type="submit" severity="secondary" label="Submit" /> <Button type="submit" severity="secondary" label="Submit" />
</Form> </Form>
@ -51,9 +51,9 @@ export default {
<template> <template>
<div class="card flex justify-center"> <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-56"> <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"> <div class="flex flex-col gap-1">
<AutoComplete name="country" optionLabel="name" :suggestions="filteredCountries" @complete="search" /> <AutoComplete name="country" optionLabel="name" :suggestions="filteredCountries" @complete="search" />
<Message v-if="$form.country?.invalid" severity="error">{{ $form.country.error?.message }}</Message> <Message v-if="$form.country?.invalid" severity="error" size="small" variant="simple">{{ $form.country.error?.message }}</Message>
</div> </div>
<Button type="submit" severity="secondary" label="Submit" /> <Button type="submit" severity="secondary" label="Submit" />
</Form> </Form>
@ -78,9 +78,9 @@ export default {
z.object({ z.object({
country: z.union([ country: z.union([
z.object({ z.object({
name: z.string().min(1, 'Country required.') name: z.string().min(1, 'Country is required.')
}), }),
z.any().refine((val) => false, { message: 'Country required.' }) z.any().refine((val) => false, { message: 'Country is required.' })
]) ])
}) })
) )
@ -115,9 +115,9 @@ export default {
<template> <template>
<div class="card flex justify-center"> <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-56"> <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"> <div class="flex flex-col gap-1">
<AutoComplete name="country" optionLabel="name" :suggestions="filteredCountries" @complete="search" /> <AutoComplete name="country" optionLabel="name" :suggestions="filteredCountries" @complete="search" />
<Message v-if="$form.country?.invalid" severity="error">{{ $form.country.error?.message }}</Message> <Message v-if="$form.country?.invalid" severity="error" size="small" variant="simple">{{ $form.country.error?.message }}</Message>
</div> </div>
<Button type="submit" severity="secondary" label="Submit" /> <Button type="submit" severity="secondary" label="Submit" />
</Form> </Form>
@ -139,14 +139,13 @@ onMounted(() => {
const initialValues = ref({ const initialValues = ref({
country: { name: '' } country: { name: '' }
}); });
const resolver = ref( const resolver = ref(zodResolver(
zodResolver(
z.object({ z.object({
country: z.union([ country: z.union([
z.object({ z.object({
name: z.string().min(1, 'Country required.') name: z.string().min(1, 'Country is required.')
}), }),
z.any().refine((val) => false, { message: 'Country required.' }) z.any().refine((val) => false, { message: 'Country is required.' })
]) ])
}) })
)); ));

31
apps/showcase/doc/cascadeselect/FormsDoc.vue
View File

@ -1,12 +1,12 @@
<template> <template>
<DocSectionText v-bind="$attrs"> <DocSectionText v-bind="$attrs">
<p>CascadeSelect can be used with the <NuxtLink to="/forms">PrimeVue Forms</NuxtLink> library.</p> <p>CascadeSelect integrates seamlessly with the <NuxtLink to="/forms">PrimeVue Forms</NuxtLink> library.</p>
</DocSectionText> </DocSectionText>
<div class="card flex justify-center"> <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">
<div class="flex flex-col gap-2"> <div class="flex flex-col gap-1">
<CascadeSelect name="city" :options="countries" optionLabel="cname" optionGroupLabel="name" :optionGroupChildren="['states', 'cities']" class="w-56" placeholder="Select a City" /> <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.error?.message }}</Message> <Message v-if="$form.city?.invalid" severity="error" size="small" variant="simple">{{ $form.city.error?.message }}</Message>
</div> </div>
<Button type="submit" severity="secondary" label="Submit" /> <Button type="submit" severity="secondary" label="Submit" />
</Form> </Form>
@ -28,9 +28,9 @@ export default {
z.object({ z.object({
city: z.union([ city: z.union([
z.object({ z.object({
cname: z.string().min(1, 'City required.') cname: z.string().min(1, 'City is required.')
}), }),
z.any().refine((val) => false, { message: 'City required.' }) z.any().refine((val) => false, { message: 'City is required.' })
]) ])
}) })
), ),
@ -111,9 +111,9 @@ export default {
code: { code: {
basic: ` 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">
<div class="flex flex-col gap-2"> <div class="flex flex-col gap-1">
<CascadeSelect name="city" :options="countries" optionLabel="cname" optionGroupLabel="name" :optionGroupChildren="['states', 'cities']" class="w-56" placeholder="Select a City" /> <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.error?.message }}</Message> <Message v-if="$form.city?.invalid" severity="error" size="small" variant="simple">{{ $form.city.error?.message }}</Message>
</div> </div>
<Button type="submit" severity="secondary" label="Submit" /> <Button type="submit" severity="secondary" label="Submit" />
</Form> </Form>
@ -122,9 +122,9 @@ export default {
<template> <template>
<div class="card flex justify-center"> <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">
<div class="flex flex-col gap-2"> <div class="flex flex-col gap-1">
<CascadeSelect name="city" :options="countries" optionLabel="cname" optionGroupLabel="name" :optionGroupChildren="['states', 'cities']" class="w-56" placeholder="Select a City" /> <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.error?.message }}</Message> <Message v-if="$form.city?.invalid" severity="error" size="small" variant="simple">{{ $form.city.error?.message }}</Message>
</div> </div>
<Button type="submit" severity="secondary" label="Submit" /> <Button type="submit" severity="secondary" label="Submit" />
</Form> </Form>
@ -236,9 +236,9 @@ export default {
<template> <template>
<div class="card flex justify-center"> <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">
<div class="flex flex-col gap-2"> <div class="flex flex-col gap-1">
<CascadeSelect name="city" :options="countries" optionLabel="cname" optionGroupLabel="name" :optionGroupChildren="['states', 'cities']" class="w-56" placeholder="Select a City" /> <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.error?.message }}</Message> <Message v-if="$form.city?.invalid" severity="error" size="small" variant="simple">{{ $form.city.error?.message }}</Message>
</div> </div>
<Button type="submit" severity="secondary" label="Submit" /> <Button type="submit" severity="secondary" label="Submit" />
</Form> </Form>
@ -256,6 +256,7 @@ const toast = useToast();
const initialValues = ref({ const initialValues = ref({
city: null city: null
}); });
const resolver = ref(zodResolver( const resolver = ref(zodResolver(
z.object({ z.object({
city: z.object({ city: z.object({
@ -263,13 +264,7 @@ const resolver = ref(zodResolver(
}) })
}) })
)); ));
const resolver = ref(zodResolver(
z.object({
city: z.object({
cname: z.string().min(1, 'City is required.')
})
})
));
const countries = ref([ const countries = ref([
{ {
name: 'Australia', name: 'Australia',

34
apps/showcase/doc/checkbox/FormsDoc.vue
View File

@ -1,11 +1,11 @@
<template> <template>
<DocSectionText v-bind="$attrs"> <DocSectionText v-bind="$attrs">
<p>Checkbox can be used with the <NuxtLink to="/forms">PrimeVue Forms</NuxtLink> library.</p> <p>Checkbox integrates seamlessly with the <NuxtLink to="/forms">PrimeVue Forms</NuxtLink> library.</p>
</DocSectionText> </DocSectionText>
<div class="card flex justify-center"> <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">
<div class="flex flex-col gap-2"> <div class="flex flex-col gap-2">
<CheckboxGroup name="checkbox" class="flex flex-wrap gap-4"> <CheckboxGroup name="ingredient" class="flex flex-wrap gap-4">
<div class="flex items-center gap-2"> <div class="flex items-center gap-2">
<Checkbox inputId="cheese" value="Cheese" /> <Checkbox inputId="cheese" value="Cheese" />
<label for="cheese"> Cheese </label> <label for="cheese"> Cheese </label>
@ -23,8 +23,7 @@
<label for="onion"> Onion </label> <label for="onion"> Onion </label>
</div> </div>
</CheckboxGroup> </CheckboxGroup>
<Message v-if="$form.ingredient?.invalid" severity="error" size="small" variant="simple">{{ $form.ingredient.error?.message }}</Message>
<Message v-if="$form.checkbox?.invalid" severity="error">{{ $form.checkbox.error?.message }}</Message>
</div> </div>
<Button type="submit" severity="secondary" label="Submit" /> <Button type="submit" severity="secondary" label="Submit" />
</Form> </Form>
@ -40,18 +39,18 @@ export default {
data() { data() {
return { return {
initialValues: { initialValues: {
checkbox: [] ingredient: []
}, },
resolver: zodResolver( resolver: zodResolver(
z.object({ z.object({
checkbox: z.array(z.string()).min(1, { message: 'At least one checkbox must be selected.' }) ingredient: z.array(z.string()).min(1, { message: 'At least one ingredient must be selected.' })
}) })
), ),
code: { code: {
basic: ` 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">
<div class="flex flex-col gap-2"> <div class="flex flex-col gap-2">
<CheckboxGroup name="checkbox" class="flex flex-wrap gap-4"> <CheckboxGroup name="ingredient" class="flex flex-wrap gap-4">
<div class="flex items-center gap-2"> <div class="flex items-center gap-2">
<Checkbox inputId="cheese" value="Cheese" /> <Checkbox inputId="cheese" value="Cheese" />
<label for="cheese"> Cheese </label> <label for="cheese"> Cheese </label>
@ -69,8 +68,7 @@ export default {
<label for="onion"> Onion </label> <label for="onion"> Onion </label>
</div> </div>
</CheckboxGroup> </CheckboxGroup>
<Message v-if="$form.ingredient?.invalid" severity="error" size="small" variant="simple">{{ $form.ingredient.error?.message }}</Message>
<Message v-if="$form.checkbox?.invalid" severity="error">{{ $form.checkbox.error?.message }}</Message>
</div> </div>
<Button type="submit" severity="secondary" label="Submit" /> <Button type="submit" severity="secondary" label="Submit" />
</Form> </Form>
@ -80,7 +78,7 @@ export default {
<div class="card flex justify-center"> <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">
<div class="flex flex-col gap-2"> <div class="flex flex-col gap-2">
<CheckboxGroup name="checkbox" class="flex flex-wrap gap-4"> <CheckboxGroup name="ingredient" class="flex flex-wrap gap-4">
<div class="flex items-center gap-2"> <div class="flex items-center gap-2">
<Checkbox inputId="cheese" value="Cheese" /> <Checkbox inputId="cheese" value="Cheese" />
<label for="cheese"> Cheese </label> <label for="cheese"> Cheese </label>
@ -98,8 +96,7 @@ export default {
<label for="onion"> Onion </label> <label for="onion"> Onion </label>
</div> </div>
</CheckboxGroup> </CheckboxGroup>
<Message v-if="$form.ingredient?.invalid" severity="error" size="small" variant="simple">{{ $form.ingredient.error?.message }}</Message>
<Message v-if="$form.checkbox?.invalid" severity="error">{{ $form.checkbox.error?.message }}</Message>
</div> </div>
<Button type="submit" severity="secondary" label="Submit" /> <Button type="submit" severity="secondary" label="Submit" />
</Form> </Form>
@ -115,11 +112,11 @@ export default {
data() { data() {
return { return {
initialValues: { initialValues: {
checkbox: [] ingredient: []
}, },
resolver: zodResolver( resolver: zodResolver(
z.object({ z.object({
checkbox: z.array(z.string()).min(1, { message: 'At least one checkbox must be selected.' }) ingredient: z.array(z.string()).min(1, { message: 'At least one ingredient must be selected.' })
}) })
), ),
} }
@ -140,7 +137,7 @@ export default {
<div class="card flex justify-center"> <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">
<div class="flex flex-col gap-2"> <div class="flex flex-col gap-2">
<CheckboxGroup name="checkbox" class="flex flex-wrap gap-4"> <CheckboxGroup name="ingredient" class="flex flex-wrap gap-4">
<div class="flex items-center gap-2"> <div class="flex items-center gap-2">
<Checkbox inputId="cheese" value="Cheese" /> <Checkbox inputId="cheese" value="Cheese" />
<label for="cheese"> Cheese </label> <label for="cheese"> Cheese </label>
@ -158,8 +155,7 @@ export default {
<label for="onion"> Onion </label> <label for="onion"> Onion </label>
</div> </div>
</CheckboxGroup> </CheckboxGroup>
<Message v-if="$form.ingredient?.invalid" severity="error" size="small" variant="simple">{{ $form.ingredient.error?.message }}</Message>
<Message v-if="$form.checkbox?.invalid" severity="error">{{ $form.checkbox.error?.message }}</Message>
</div> </div>
<Button type="submit" severity="secondary" label="Submit" /> <Button type="submit" severity="secondary" label="Submit" />
</Form> </Form>
@ -175,11 +171,11 @@ import { z } from 'zod';
const toast = useToast(); const toast = useToast();
const initialValues = ref({ const initialValues = ref({
checkbox: [] ingredient: []
}); });
const resolver = ref(zodResolver( const resolver = ref(zodResolver(
z.object({ z.object({
checkbox: z.array(z.string()).min(1, { message: 'At least one checkbox must be selected.' }) ingredient: z.array(z.string()).min(1, { message: 'At least one ingredient must be selected.' })
}) })
)); ));

30
apps/showcase/doc/colorpicker/FormsDoc.vue
View File

@ -1,12 +1,12 @@
<template> <template>
<DocSectionText v-bind="$attrs"> <DocSectionText v-bind="$attrs">
<p>ColorPicker can be used with the <NuxtLink to="/forms">PrimeVue Forms</NuxtLink> library.</p> <p>ColorPicker integrates seamlessly with the <NuxtLink to="/forms">PrimeVue Forms</NuxtLink> library.</p>
</DocSectionText> </DocSectionText>
<div class="card flex justify-center"> <div class="card flex justify-center">
<Form v-slot="$form" :resolver="resolver" :initialValues="initialValues" @submit="onFormSubmit" class="flex flex-col gap-4"> <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"> <div class="flex flex-col items-center gap-2">
<ColorPicker name="colorpicker" /> <ColorPicker name="color" />
<Message v-if="$form.colorpicker?.invalid" severity="error">{{ $form.colorpicker.error?.message }}</Message> <Message v-if="$form.color?.invalid" severity="error" size="small" variant="simple">{{ $form.color.error?.message }}</Message>
</div> </div>
<Button type="submit" severity="secondary" label="Submit" /> <Button type="submit" severity="secondary" label="Submit" />
</Form> </Form>
@ -22,19 +22,19 @@ export default {
data() { data() {
return { return {
initialValues: { initialValues: {
colorpicker: null color: null
}, },
resolver: zodResolver( resolver: zodResolver(
z.object({ z.object({
colorpicker: z.union([z.string(), z.literal(null)]).refine((value) => value !== null, { message: 'ColorPicker is required.' }) color: z.union([z.string(), z.literal(null)]).refine((value) => value !== null, { message: 'Color is required.' })
}) })
), ),
code: { code: {
basic: ` basic: `
<Form v-slot="$form" :resolver="resolver" :initialValues="initialValues" @submit="onFormSubmit" class="flex flex-col gap-4"> <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"> <div class="flex flex-col items-center gap-2">
<ColorPicker name="colorpicker" /> <ColorPicker name="color" />
<Message v-if="$form.colorpicker?.invalid" severity="error">{{ $form.colorpicker.error?.message }}</Message> <Message v-if="$form.color?.invalid" severity="error" size="small" variant="simple">{{ $form.color.error?.message }}</Message>
</div> </div>
<Button type="submit" severity="secondary" label="Submit" /> <Button type="submit" severity="secondary" label="Submit" />
</Form> </Form>
@ -44,8 +44,8 @@ export default {
<div class="card flex justify-center"> <div class="card flex justify-center">
<Form v-slot="$form" :resolver="resolver" :initialValues="initialValues" @submit="onFormSubmit" class="flex flex-col gap-4"> <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"> <div class="flex flex-col items-center gap-2">
<ColorPicker name="colorpicker" /> <ColorPicker name="color" />
<Message v-if="$form.colorpicker?.invalid" severity="error">{{ $form.colorpicker.error?.message }}</Message> <Message v-if="$form.color?.invalid" severity="error" size="small" variant="simple">{{ $form.color.error?.message }}</Message>
</div> </div>
<Button type="submit" severity="secondary" label="Submit" /> <Button type="submit" severity="secondary" label="Submit" />
</Form> </Form>
@ -60,11 +60,11 @@ export default {
data() { data() {
return { return {
initialValues: { initialValues: {
colorpicker: null color: null
}, },
resolver: zodResolver( resolver: zodResolver(
z.object({ z.object({
colorpicker: z.union([z.string(), z.literal(null)]).refine((value) => value !== null, { message: 'ColorPicker is required.' }) color: z.union([z.string(), z.literal(null)]).refine((value) => value !== null, { message: 'Color is required.' })
}) })
) )
} }
@ -85,8 +85,8 @@ export default {
<div class="card flex justify-center"> <div class="card flex justify-center">
<Form v-slot="$form" :resolver="resolver" :initialValues="initialValues" @submit="onFormSubmit" class="flex flex-col gap-4"> <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"> <div class="flex flex-col items-center gap-2">
<ColorPicker name="colorpicker" /> <ColorPicker name="color" />
<Message v-if="$form.colorpicker?.invalid" severity="error">{{ $form.colorpicker.error?.message }}</Message> <Message v-if="$form.color?.invalid" severity="error" size="small" variant="simple">{{ $form.color.error?.message }}</Message>
</div> </div>
<Button type="submit" severity="secondary" label="Submit" /> <Button type="submit" severity="secondary" label="Submit" />
</Form> </Form>
@ -101,11 +101,11 @@ import { z } from 'zod';
const toast = useToast(); const toast = useToast();
const initialValues = ref({ const initialValues = ref({
colorpicker: null color: null
}); });
const resolver = ref(zodResolver( const resolver = ref(zodResolver(
z.object({ z.object({
colorpicker: z.union([z.string(), z.literal(null)]).refine((value) => value !== null, { message: 'ColorPicker is required.' }) color: z.union([z.string(), z.literal(null)]).refine((value) => value !== null, { message: 'Color is required.' })
}) })
)); ));

18
apps/showcase/doc/datepicker/FormsDoc.vue
View File

@ -1,12 +1,12 @@
<template> <template>
<DocSectionText v-bind="$attrs"> <DocSectionText v-bind="$attrs">
<p>DatePicker can be used with the <NuxtLink to="/forms">PrimeVue Forms</NuxtLink> library.</p> <p>DatePicker integrates seamlessly with the <NuxtLink to="/forms">PrimeVue Forms</NuxtLink> library.</p>
</DocSectionText> </DocSectionText>
<div class="card flex justify-center"> <div class="card flex justify-center">
<Form v-slot="$form" :resolver="resolver" :initialValues="initialValues" @submit="onFormSubmit" class="flex flex-col gap-4"> <Form v-slot="$form" :resolver="resolver" :initialValues="initialValues" @submit="onFormSubmit" class="flex flex-col gap-4">
<div class="flex flex-col gap-2"> <div class="flex flex-col gap-1">
<DatePicker name="date" fluid /> <DatePicker name="date" fluid />
<Message v-if="$form.date?.invalid" severity="error">{{ $form.date.error?.message }}</Message> <Message v-if="$form.date?.invalid" severity="error" size="small" variant="simple">{{ $form.date.error?.message }}</Message>
</div> </div>
<Button type="submit" severity="secondary" label="Submit" /> <Button type="submit" severity="secondary" label="Submit" />
</Form> </Form>
@ -38,9 +38,9 @@ export default {
code: { code: {
basic: ` basic: `
<Form v-slot="$form" :resolver="resolver" :initialValues="initialValues" @submit="onFormSubmit" class="flex flex-col gap-4"> <Form v-slot="$form" :resolver="resolver" :initialValues="initialValues" @submit="onFormSubmit" class="flex flex-col gap-4">
<div class="flex flex-col gap-2"> <div class="flex flex-col gap-1">
<DatePicker name="date" fluid /> <DatePicker name="date" fluid />
<Message v-if="$form.date?.invalid" severity="error">{{ $form.date.error?.message }}</Message> <Message v-if="$form.date?.invalid" severity="error" size="small" variant="simple">{{ $form.date.error?.message }}</Message>
</div> </div>
<Button type="submit" severity="secondary" label="Submit" /> <Button type="submit" severity="secondary" label="Submit" />
</Form> </Form>
@ -49,9 +49,9 @@ export default {
<template> <template>
<div class="card flex justify-center"> <div class="card flex justify-center">
<Form v-slot="$form" :resolver="resolver" :initialValues="initialValues" @submit="onFormSubmit" class="flex flex-col gap-4"> <Form v-slot="$form" :resolver="resolver" :initialValues="initialValues" @submit="onFormSubmit" class="flex flex-col gap-4">
<div class="flex flex-col gap-2"> <div class="flex flex-col gap-1">
<DatePicker name="date" fluid /> <DatePicker name="date" fluid />
<Message v-if="$form.date?.invalid" severity="error">{{ $form.date.error?.message }}</Message> <Message v-if="$form.date?.invalid" severity="error" size="small" variant="simple">{{ $form.date.error?.message }}</Message>
</div> </div>
<Button type="submit" severity="secondary" label="Submit" /> <Button type="submit" severity="secondary" label="Submit" />
</Form> </Form>
@ -96,9 +96,9 @@ export default {
<template> <template>
<div class="card flex justify-center"> <div class="card flex justify-center">
<Form v-slot="$form" :resolver="resolver" :initialValues="initialValues" @submit="onFormSubmit" class="flex flex-col gap-4"> <Form v-slot="$form" :resolver="resolver" :initialValues="initialValues" @submit="onFormSubmit" class="flex flex-col gap-4">
<div class="flex flex-col gap-2"> <div class="flex flex-col gap-1">
<DatePicker name="date" fluid /> <DatePicker name="date" fluid />
<Message v-if="$form.date?.invalid" severity="error">{{ $form.date.error?.message }}</Message> <Message v-if="$form.date?.invalid" severity="error" size="small" variant="simple">{{ $form.date.error?.message }}</Message>
</div> </div>
<Button type="submit" severity="secondary" label="Submit" /> <Button type="submit" severity="secondary" label="Submit" />
</Form> </Form>

38
apps/showcase/doc/editor/FormsDoc.vue
View File

@ -1,12 +1,12 @@
<template> <template>
<DocSectionText v-bind="$attrs"> <DocSectionText v-bind="$attrs">
<p>Editor can be used with the <NuxtLink to="/forms">PrimeVue Forms</NuxtLink> library.</p> <p>Editor integrates seamlessly with the <NuxtLink to="/forms">PrimeVue Forms</NuxtLink> library.</p>
</DocSectionText> </DocSectionText>
<div class="card"> <div class="card">
<Form v-slot="$form" :resolver="resolver" :initialValues="initialValues" @submit="onFormSubmit" class="flex flex-col gap-4"> <Form v-slot="$form" :resolver="resolver" :initialValues="initialValues" @submit="onFormSubmit" class="flex flex-col gap-4">
<div class="flex flex-col gap-2"> <div class="flex flex-col gap-1">
<Editor name="editor" editorStyle="height: 320px" /> <Editor name="content" editorStyle="height: 320px" />
<Message v-if="$form.editor?.invalid" severity="error">{{ $form.editor.error?.message }}</Message> <Message v-if="$form.content?.invalid" severity="error" size="small" variant="simple">{{ $form.content.error?.message }}</Message>
</div> </div>
<Button type="submit" severity="secondary" label="Submit" /> <Button type="submit" severity="secondary" label="Submit" />
</Form> </Form>
@ -22,19 +22,19 @@ export default {
data() { data() {
return { return {
initialValues: { initialValues: {
editor: '' content: ''
}, },
resolver: zodResolver( resolver: zodResolver(
z.object({ z.object({
editor: z.string().min(1, { message: 'Editor is required.' }) content: z.string().min(1, { message: 'Content is required.' })
}) })
), ),
code: { code: {
basic: ` basic: `
<Form v-slot="$form" :resolver="resolver" :initialValues="initialValues" @submit="onFormSubmit" class="flex flex-col gap-4"> <Form v-slot="$form" :resolver="resolver" :initialValues="initialValues" @submit="onFormSubmit" class="flex flex-col gap-4">
<div class="flex flex-col gap-2"> <div class="flex flex-col gap-1">
<Editor name="editor" editorStyle="height: 320px" /> <Editor name="content" editorStyle="height: 320px" />
<Message v-if="$form.editor?.invalid" severity="error">{{ $form.editor.error?.message }}</Message> <Message v-if="$form.content?.invalid" severity="error" size="small" variant="simple">{{ $form.content.error?.message }}</Message>
</div> </div>
<Button type="submit" severity="secondary" label="Submit" /> <Button type="submit" severity="secondary" label="Submit" />
</Form> </Form>
@ -43,9 +43,9 @@ export default {
<template> <template>
<div class="card"> <div class="card">
<Form v-slot="$form" :resolver="resolver" :initialValues="initialValues" @submit="onFormSubmit" class="flex flex-col gap-4"> <Form v-slot="$form" :resolver="resolver" :initialValues="initialValues" @submit="onFormSubmit" class="flex flex-col gap-4">
<div class="flex flex-col gap-2"> <div class="flex flex-col gap-1">
<Editor name="editor" editorStyle="height: 320px" /> <Editor name="content" editorStyle="height: 320px" />
<Message v-if="$form.editor?.invalid" severity="error">{{ $form.editor.error?.message }}</Message> <Message v-if="$form.content?.invalid" severity="error" size="small" variant="simple">{{ $form.content.error?.message }}</Message>
</div> </div>
<Button type="submit" severity="secondary" label="Submit" /> <Button type="submit" severity="secondary" label="Submit" />
</Form> </Form>
@ -60,11 +60,11 @@ export default {
data() { data() {
return { return {
initialValues: { initialValues: {
editor: '' content: ''
}, },
resolver: zodResolver( resolver: zodResolver(
z.object({ z.object({
editor: z.string().min(1, { message: 'Editor is required.' }) content: z.string().min(1, { message: 'Content is required.' })
}) })
) )
} }
@ -84,9 +84,9 @@ export default {
<template> <template>
<div class="card"> <div class="card">
<Form v-slot="$form" :resolver="resolver" :initialValues="initialValues" @submit="onFormSubmit" class="flex flex-col gap-4"> <Form v-slot="$form" :resolver="resolver" :initialValues="initialValues" @submit="onFormSubmit" class="flex flex-col gap-4">
<div class="flex flex-col gap-2"> <div class="flex flex-col gap-1">
<Editor name="editor" editorStyle="height: 320px" /> <Editor name="content" editorStyle="height: 320px" />
<Message v-if="$form.editor?.invalid" severity="error">{{ $form.editor.error?.message }}</Message> <Message v-if="$form.content?.invalid" severity="error" size="small" variant="simple">{{ $form.content.error?.message }}</Message>
</div> </div>
<Button type="submit" severity="secondary" label="Submit" /> <Button type="submit" severity="secondary" label="Submit" />
</Form> </Form>
@ -101,11 +101,11 @@ import { z } from 'zod';
const toast = useToast(); const toast = useToast();
const initialValues = ref({ const initialValues = ref({
editor: ' content: ''
}); });
const resolver = ref(zodResolver( const resolver = ref(zodResolver(
z.object({ z.object({
editor: z.string().min(1, { message: 'Editor is required.' }) content: z.string().min(1, { message: 'Content is required.' })
}) })
)); ));

39
apps/showcase/doc/inputmask/FormsDoc.vue
View File

@ -1,12 +1,12 @@
<template> <template>
<DocSectionText v-bind="$attrs"> <DocSectionText v-bind="$attrs">
<p>InputMask can be used with the <NuxtLink to="/forms">PrimeVue Forms</NuxtLink> library.</p> <p>InputMask integrates seamlessly with the <NuxtLink to="/forms">PrimeVue Forms</NuxtLink> library.</p>
</DocSectionText> </DocSectionText>
<div class="card flex justify-center"> <div class="card flex justify-center">
<Form v-slot="$form" :resolver="resolver" :initialValues="initialValues" @submit="onFormSubmit" class="flex flex-col gap-4 w-full sm:w-56"> <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"> <div class="flex flex-col gap-1">
<InputMask name="mask" mask="99-999999" placeholder="99-999999" fluid /> <InputMask name="serialNumber" mask="99-999999" placeholder="99-999999" fluid />
<Message v-if="$form.mask?.invalid" severity="error">{{ $form.mask.error?.message }}</Message> <Message v-if="$form.serialNumber?.invalid" severity="error" size="small" variant="simple">{{ $form.serialNumber.error?.message }}</Message>
</div> </div>
<Button type="submit" severity="secondary" label="Submit" /> <Button type="submit" severity="secondary" label="Submit" />
</Form> </Form>
@ -22,19 +22,19 @@ export default {
data() { data() {
return { return {
initialValues: { initialValues: {
mask: '' serialNumber: ''
}, },
resolver: zodResolver( resolver: zodResolver(
z.object({ z.object({
mask: z.string().min(1, { message: 'Mask is required.' }) serialNumber: z.string().min(1, { message: 'Serial number is required.' })
}) })
), ),
code: { code: {
basic: ` basic: `
<Form v-slot="$form" :resolver="resolver" :initialValues="initialValues" @submit="onFormSubmit" class="flex flex-col gap-4 w-full sm:w-56"> <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"> <div class="flex flex-col gap-1">
<InputMask name="mask" mask="99-999999" placeholder="99-999999" fluid /> <InputMask name="serialNumber" mask="99-999999" placeholder="99-999999" fluid />
<Message v-if="$form.mask?.invalid" severity="error">{{ $form.mask.error?.message }}</Message> <Message v-if="$form.serialNumber?.invalid" severity="error" size="small" variant="simple">{{ $form.serialNumber.error?.message }}</Message>
</div> </div>
<Button type="submit" severity="secondary" label="Submit" /> <Button type="submit" severity="secondary" label="Submit" />
</Form> </Form>
@ -43,9 +43,9 @@ export default {
<template> <template>
<div class="card flex justify-center"> <div class="card flex justify-center">
<Form v-slot="$form" :resolver="resolver" :initialValues="initialValues" @submit="onFormSubmit" class="flex flex-col gap-4 w-full sm:w-56"> <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"> <div class="flex flex-col gap-1">
<InputMask name="mask" mask="99-999999" placeholder="99-999999" fluid /> <InputMask name="serialNumber" mask="99-999999" placeholder="99-999999" fluid />
<Message v-if="$form.mask?.invalid" severity="error">{{ $form.mask.error?.message }}</Message> <Message v-if="$form.serialNumber?.invalid" severity="error" size="small" variant="simple">{{ $form.serialNumber.error?.message }}</Message>
</div> </div>
<Button type="submit" severity="secondary" label="Submit" /> <Button type="submit" severity="secondary" label="Submit" />
</Form> </Form>
@ -60,11 +60,11 @@ export default {
data() { data() {
return { return {
initialValues: { initialValues: {
mask: '' serialNumber: ''
}, },
resolver: zodResolver( resolver: zodResolver(
z.object({ z.object({
mask: z.string().min(1, { message: 'Mask is required.' }) serialNumber: z.string().min(1, { message: 'Serial number is required.' })
}) })
) )
} }
@ -84,9 +84,9 @@ export default {
<template> <template>
<div class="card flex justify-center"> <div class="card flex justify-center">
<Form v-slot="$form" :resolver="resolver" :initialValues="initialValues" @submit="onFormSubmit" class="flex flex-col gap-4 w-full sm:w-56"> <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"> <div class="flex flex-col gap-1">
<InputMask name="mask" mask="99-999999" placeholder="99-999999" fluid /> <InputMask name="serialNumber" mask="99-999999" placeholder="99-999999" fluid />
<Message v-if="$form.mask?.invalid" severity="error">{{ $form.mask.error?.message }}</Message> <Message v-if="$form.serialNumber?.invalid" severity="error" size="small" variant="simple">{{ $form.serialNumber.error?.message }}</Message>
</div> </div>
<Button type="submit" severity="secondary" label="Submit" /> <Button type="submit" severity="secondary" label="Submit" />
</Form> </Form>
@ -101,11 +101,12 @@ import { z } from 'zod';
const toast = useToast(); const toast = useToast();
const initialValues = ref({ const initialValues = ref({
mask: '' serialNumber: ''
}); });
const resolver = ref(zodResolver( const resolver = ref(zodResolver(
z.object({ z.object({
mask: z.string().min(1, { message: 'Mask is required.' }) serialNumber: z.string().min(1, { message: 'Serial number is required.' })
}) })
)); ));

18
apps/showcase/doc/inputnumber/FormsDoc.vue
View File

@ -1,12 +1,12 @@
<template> <template>
<DocSectionText v-bind="$attrs"> <DocSectionText v-bind="$attrs">
<p>InputNumber can be used with the <NuxtLink to="/forms">PrimeVue Forms</NuxtLink> library.</p> <p>InputNumber integrates seamlessly with the <NuxtLink to="/forms">PrimeVue Forms</NuxtLink> library.</p>
</DocSectionText> </DocSectionText>
<div class="card flex justify-center"> <div class="card flex justify-center">
<Form v-slot="$form" :resolver="resolver" :initialValues="initialValues" @submit="onFormSubmit" class="flex flex-col gap-4 w-full sm:w-56"> <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"> <div class="flex flex-col gap-1">
<InputNumber name="number" fluid /> <InputNumber name="number" fluid />
<Message v-if="$form.number?.invalid" severity="error">{{ $form.number.error?.message }}</Message> <Message v-if="$form.number?.invalid" severity="error" size="small" variant="simple">{{ $form.number.error?.message }}</Message>
</div> </div>
<Button type="submit" severity="secondary" label="Submit" /> <Button type="submit" severity="secondary" label="Submit" />
</Form> </Form>
@ -32,9 +32,9 @@ export default {
code: { code: {
basic: ` basic: `
<Form v-slot="$form" :resolver="resolver" :initialValues="initialValues" @submit="onFormSubmit" class="flex flex-col gap-4 w-full sm:w-56"> <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"> <div class="flex flex-col gap-1">
<InputNumber name="number" fluid /> <InputNumber name="number" fluid />
<Message v-if="$form.number?.invalid" severity="error">{{ $form.number.error?.message }}</Message> <Message v-if="$form.number?.invalid" severity="error" size="small" variant="simple">{{ $form.number.error?.message }}</Message>
</div> </div>
<Button type="submit" severity="secondary" label="Submit" /> <Button type="submit" severity="secondary" label="Submit" />
</Form> </Form>
@ -43,9 +43,9 @@ export default {
<template> <template>
<div class="card flex justify-center"> <div class="card flex justify-center">
<Form v-slot="$form" :resolver="resolver" :initialValues="initialValues" @submit="onFormSubmit" class="flex flex-col gap-4 w-full sm:w-56"> <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"> <div class="flex flex-col gap-1">
<InputNumber name="number" fluid /> <InputNumber name="number" fluid />
<Message v-if="$form.number?.invalid" severity="error">{{ $form.number.error?.message }}</Message> <Message v-if="$form.number?.invalid" severity="error" size="small" variant="simple">{{ $form.number.error?.message }}</Message>
</div> </div>
<Button type="submit" severity="secondary" label="Submit" /> <Button type="submit" severity="secondary" label="Submit" />
</Form> </Form>
@ -84,9 +84,9 @@ export default {
<template> <template>
<div class="card flex justify-center"> <div class="card flex justify-center">
<Form v-slot="$form" :resolver="resolver" :initialValues="initialValues" @submit="onFormSubmit" class="flex flex-col gap-4 w-full sm:w-56"> <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"> <div class="flex flex-col gap-1">
<InputNumber name="number" fluid /> <InputNumber name="number" fluid />
<Message v-if="$form.number?.invalid" severity="error">{{ $form.number.error?.message }}</Message> <Message v-if="$form.number?.invalid" severity="error" size="small" variant="simple">{{ $form.number.error?.message }}</Message>
</div> </div>
<Button type="submit" severity="secondary" label="Submit" /> <Button type="submit" severity="secondary" label="Submit" />
</Form> </Form>

38
apps/showcase/doc/inputotp/FormsDoc.vue
View File

@ -1,11 +1,13 @@
<template> <template>
<DocSectionText v-bind="$attrs"> <DocSectionText v-bind="$attrs">
<p>InputOtp can be used with the <NuxtLink to="/forms">PrimeVue Forms</NuxtLink> library.</p> <p>InputOtp integrates seamlessly with the <NuxtLink to="/forms">PrimeVue Forms</NuxtLink> library.</p>
</DocSectionText> </DocSectionText>
<div class="card flex justify-center"> <div class="card flex justify-center">
<Form v-slot="$form" :resolver="resolver" :initialValues="initialValues" @submit="onFormSubmit" class="flex flex-col gap-4"> <Form v-slot="$form" :resolver="resolver" :initialValues="initialValues" @submit="onFormSubmit" class="flex flex-col gap-4">
<InputOtp name="otp" /> <div class="flex flex-col gap-1">
<Message v-if="$form.otp?.invalid" severity="error" icon="pi pi-times-circle">{{ $form.otp.error?.message }}</Message> <InputOtp name="passcode" />
<Message v-if="$form.passcode?.invalid" severity="error" size="small" variant="simple">{{ $form.passcode.error?.message }}</Message>
</div>
<Button type="submit" severity="secondary" label="Submit" /> <Button type="submit" severity="secondary" label="Submit" />
</Form> </Form>
</div> </div>
@ -20,18 +22,20 @@ export default {
data() { data() {
return { return {
initialValues: { initialValues: {
otp: '' passcode: ''
}, },
resolver: zodResolver( resolver: zodResolver(
z.object({ z.object({
otp: z.string().min(1, { message: 'Otp is required.' }) passcode: z.string().min(1, { message: 'Passcode is required.' })
}) })
), ),
code: { code: {
basic: ` basic: `
<Form v-slot="$form" :resolver="resolver" :initialValues="initialValues" @submit="onFormSubmit" class="flex flex-col gap-4"> <Form v-slot="$form" :resolver="resolver" :initialValues="initialValues" @submit="onFormSubmit" class="flex flex-col gap-4">
<InputOtp name="otp" /> <div class="flex flex-col gap-1">
<Message v-if="$form.otp?.invalid" severity="error" icon="pi pi-times-circle">{{ $form.otp.error?.message }}</Message> <InputOtp name="passcode" />
<Message v-if="$form.passcode?.invalid" severity="error" size="small" variant="simple">{{ $form.passcode.error?.message }}</Message>
</div>
<Button type="submit" severity="secondary" label="Submit" /> <Button type="submit" severity="secondary" label="Submit" />
</Form> </Form>
`, `,
@ -39,8 +43,10 @@ export default {
<template> <template>
<div class="card flex justify-center"> <div class="card flex justify-center">
<Form v-slot="$form" :resolver="resolver" :initialValues="initialValues" @submit="onFormSubmit" class="flex flex-col gap-4"> <Form v-slot="$form" :resolver="resolver" :initialValues="initialValues" @submit="onFormSubmit" class="flex flex-col gap-4">
<InputOtp name="otp" /> <div class="flex flex-col gap-1">
<Message v-if="$form.otp?.invalid" severity="error" icon="pi pi-times-circle">{{ $form.otp.error?.message }}</Message> <InputOtp name="passcode" />
<Message v-if="$form.passcode?.invalid" severity="error" size="small" variant="simple">{{ $form.passcode.error?.message }}</Message>
</div>
<Button type="submit" severity="secondary" label="Submit" /> <Button type="submit" severity="secondary" label="Submit" />
</Form> </Form>
</div> </div>
@ -54,11 +60,11 @@ export default {
data() { data() {
return { return {
initialValues: { initialValues: {
otp: '' passcode: ''
}, },
resolver: zodResolver( resolver: zodResolver(
z.object({ z.object({
otp: z.string().min(1, { message: 'Otp is required.' }) passcode: z.string().min(1, { message: 'Passcode is required.' })
}) })
) )
} }
@ -78,8 +84,10 @@ export default {
<template> <template>
<div class="card flex justify-center"> <div class="card flex justify-center">
<Form v-slot="$form" :resolver="resolver" :initialValues="initialValues" @submit="onFormSubmit" class="flex flex-col gap-4"> <Form v-slot="$form" :resolver="resolver" :initialValues="initialValues" @submit="onFormSubmit" class="flex flex-col gap-4">
<InputOtp name="otp" /> <div class="flex flex-col gap-1">
<Message v-if="$form.otp?.invalid" severity="error" icon="pi pi-times-circle">{{ $form.otp.error?.message }}</Message> <InputOtp name="passcode" />
<Message v-if="$form.passcode?.invalid" severity="error" size="small" variant="simple">{{ $form.passcode.error?.message }}</Message>
</div>
<Button type="submit" severity="secondary" label="Submit" /> <Button type="submit" severity="secondary" label="Submit" />
</Form> </Form>
</div> </div>
@ -93,11 +101,11 @@ import { z } from 'zod';
const toast = useToast(); const toast = useToast();
const initialValues = ref({ const initialValues = ref({
otp: '' passcode: ''
}); });
const resolver = ref(zodResolver( const resolver = ref(zodResolver(
z.object({ z.object({
otp: z.string().min(1, { message: 'Otp is required.' }) passcode: z.string().min(1, { message: 'Passcode is required.' })
}) })
)); ));

9
apps/showcase/doc/inputtext/FormsDoc.vue
View File

@ -1,6 +1,6 @@
<template> <template>
<DocSectionText v-bind="$attrs"> <DocSectionText v-bind="$attrs">
<p>InputText can be used with the <NuxtLink to="/forms">PrimeVue Forms</NuxtLink> library.</p> <p>InputText integrates seamlessly with the <NuxtLink to="/forms">PrimeVue Forms</NuxtLink> library.</p>
</DocSectionText> </DocSectionText>
<div class="card flex justify-center"> <div class="card flex justify-center">
<Form v-slot="$form" :resolver="resolver" :initialValues="initialValues" @submit="onFormSubmit" class="flex flex-col gap-4 w-full sm:w-56"> <Form v-slot="$form" :resolver="resolver" :initialValues="initialValues" @submit="onFormSubmit" class="flex flex-col gap-4 w-full sm:w-56">
@ -32,7 +32,7 @@ export default {
resolver: zodResolver( resolver: zodResolver(
z.object({ z.object({
username: z.string().min(1, { message: 'Username is required.' }), username: z.string().min(1, { message: 'Username is required.' }),
email: z.string().min(1, { message: 'Email is required.' }).email({ message: 'Email must be valid.' }) email: z.string().min(1, { message: 'Email is required.' }).email({ message: 'Invalid email address.' })
}) })
), ),
code: { code: {
@ -80,7 +80,7 @@ export default {
resolver: zodResolver( resolver: zodResolver(
z.object({ z.object({
username: z.string().min(1, { message: 'Username is required.' }), username: z.string().min(1, { message: 'Username is required.' }),
email: z.string().min(1, { message: 'Email is required.' }).email({ message: 'Email must be valid.' }) email: z.string().min(1, { message: 'Email is required.' }).email({ message: 'Invalid email address.' })
}) })
) )
} }
@ -124,10 +124,11 @@ const initialValues = ref({
username: '', username: '',
email: '' email: ''
}); });
const resolver = ref(zodResolver( const resolver = ref(zodResolver(
z.object({ z.object({
username: z.string().min(1, { message: 'Username is required.' }), username: z.string().min(1, { message: 'Username is required.' }),
email: z.string().min(1, { message: 'Email is required.' }).email({ message: 'Email must be valid.' }) email: z.string().min(1, { message: 'Email is required.' }).email({ message: 'Invalid email address.' })
}) })
)); ));

18
apps/showcase/doc/knob/FormsDoc.vue
View File

@ -1,12 +1,12 @@
<template> <template>
<DocSectionText v-bind="$attrs"> <DocSectionText v-bind="$attrs">
<p>Knob can be used with the <NuxtLink to="/forms">PrimeVue Forms</NuxtLink> library.</p> <p>Knob integrates seamlessly with the <NuxtLink to="/forms">PrimeVue Forms</NuxtLink> library.</p>
</DocSectionText> </DocSectionText>
<div class="card flex justify-center"> <div class="card flex justify-center">
<Form v-slot="$form" :resolver="resolver" :initialValues="initialValues" @submit="onFormSubmit" class="flex flex-col gap-4"> <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"> <div class="flex flex-col items-center gap-1">
<Knob name="knob" /> <Knob name="knob" />
<Message v-if="$form.knob?.invalid" severity="error">{{ $form.knob.error?.message }}</Message> <Message v-if="$form.knob?.invalid" severity="error" size="small" variant="simple">{{ $form.knob.error?.message }}</Message>
</div> </div>
<Button type="submit" severity="secondary" label="Submit" /> <Button type="submit" severity="secondary" label="Submit" />
</Form> </Form>
@ -32,9 +32,9 @@ export default {
code: { code: {
basic: ` basic: `
<Form v-slot="$form" :resolver="resolver" :initialValues="initialValues" @submit="onFormSubmit" class="flex flex-col gap-4"> <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"> <div class="flex flex-col items-center gap-1">
<Knob name="knob" /> <Knob name="knob" />
<Message v-if="$form.knob?.invalid" severity="error">{{ $form.knob.error?.message }}</Message> <Message v-if="$form.knob?.invalid" severity="error" size="small" variant="simple">{{ $form.knob.error?.message }}</Message>
</div> </div>
<Button type="submit" severity="secondary" label="Submit" /> <Button type="submit" severity="secondary" label="Submit" />
</Form> </Form>
@ -43,9 +43,9 @@ export default {
<template> <template>
<div class="card flex justify-center"> <div class="card flex justify-center">
<Form v-slot="$form" :resolver="resolver" :initialValues="initialValues" @submit="onFormSubmit" class="flex flex-col gap-4"> <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"> <div class="flex flex-col items-center gap-1">
<Knob name="knob" /> <Knob name="knob" />
<Message v-if="$form.knob?.invalid" severity="error">{{ $form.knob.error?.message }}</Message> <Message v-if="$form.knob?.invalid" severity="error" size="small" variant="simple">{{ $form.knob.error?.message }}</Message>
</div> </div>
<Button type="submit" severity="secondary" label="Submit" /> <Button type="submit" severity="secondary" label="Submit" />
</Form> </Form>
@ -85,9 +85,9 @@ export default {
<template> <template>
<div class="card flex justify-center"> <div class="card flex justify-center">
<Form v-slot="$form" :resolver="resolver" :initialValues="initialValues" @submit="onFormSubmit" class="flex flex-col gap-4"> <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"> <div class="flex flex-col items-center gap-1">
<Knob name="knob" /> <Knob name="knob" />
<Message v-if="$form.knob?.invalid" severity="error">{{ $form.knob.error?.message }}</Message> <Message v-if="$form.knob?.invalid" severity="error" size="small" variant="simple">{{ $form.knob.error?.message }}</Message>
</div> </div>
<Button type="submit" severity="secondary" label="Submit" /> <Button type="submit" severity="secondary" label="Submit" />
</Form> </Form>

30
apps/showcase/doc/listbox/FormsDoc.vue
View File

@ -1,12 +1,12 @@
<template> <template>
<DocSectionText v-bind="$attrs"> <DocSectionText v-bind="$attrs">
<p>Listbox can be used with the <NuxtLink to="/forms">PrimeVue Forms</NuxtLink> library.</p> <p>Listbox integrates seamlessly with the <NuxtLink to="/forms">PrimeVue Forms</NuxtLink> library.</p>
</DocSectionText> </DocSectionText>
<div class="card flex justify-center"> <div class="card flex justify-center">
<Form v-slot="$form" :resolver="resolver" :initialValues="initialValues" @submit="onFormSubmit" class="flex flex-col gap-4 w-full sm:w-56"> <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"> <div class="flex flex-col gap-1">
<Listbox name="city" :options="cities" optionLabel="name" fluid /> <Listbox name="city" :options="cities" optionLabel="name" fluid />
<Message v-if="$form.city?.invalid" severity="error">{{ $form.city.error?.message }}</Message> <Message v-if="$form.city?.invalid" severity="error" size="small" variant="simple">{{ $form.city.error?.message }}</Message>
</div> </div>
<Button type="submit" severity="secondary" label="Submit" /> <Button type="submit" severity="secondary" label="Submit" />
</Form> </Form>
@ -28,9 +28,9 @@ export default {
z.object({ z.object({
city: z.union([ city: z.union([
z.object({ z.object({
name: z.string().min(1, 'City required.') name: z.string().min(1, 'City is required.')
}), }),
z.any().refine((val) => false, { message: 'City required.' }) z.any().refine((val) => false, { message: 'City is required.' })
]) ])
}) })
), ),
@ -44,9 +44,9 @@ export default {
code: { code: {
basic: ` basic: `
<Form v-slot="$form" :resolver="resolver" :initialValues="initialValues" @submit="onFormSubmit" class="flex flex-col gap-4 w-full sm:w-56"> <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"> <div class="flex flex-col gap-1">
<Listbox name="city" :options="cities" optionLabel="name" fluid /> <Listbox name="city" :options="cities" optionLabel="name" fluid />
<Message v-if="$form.city?.invalid" severity="error">{{ $form.city.error?.message }}</Message> <Message v-if="$form.city?.invalid" severity="error" size="small" variant="simple">{{ $form.city.error?.message }}</Message>
</div> </div>
<Button type="submit" severity="secondary" label="Submit" /> <Button type="submit" severity="secondary" label="Submit" />
</Form> </Form>
@ -55,9 +55,9 @@ export default {
<template> <template>
<div class="card flex justify-center"> <div class="card flex justify-center">
<Form v-slot="$form" :resolver="resolver" :initialValues="initialValues" @submit="onFormSubmit" class="flex flex-col gap-4 w-full sm:w-56"> <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"> <div class="flex flex-col gap-1">
<Listbox name="city" :options="cities" optionLabel="name" fluid /> <Listbox name="city" :options="cities" optionLabel="name" fluid />
<Message v-if="$form.city?.invalid" severity="error">{{ $form.city.error?.message }}</Message> <Message v-if="$form.city?.invalid" severity="error" size="small" variant="simple">{{ $form.city.error?.message }}</Message>
</div> </div>
<Button type="submit" severity="secondary" label="Submit" /> <Button type="submit" severity="secondary" label="Submit" />
</Form> </Form>
@ -78,9 +78,9 @@ export default {
z.object({ z.object({
city: z.union([ city: z.union([
z.object({ z.object({
name: z.string().min(1, 'City required.') name: z.string().min(1, 'City is required.')
}), }),
z.any().refine((val) => false, { message: 'City required.' }) z.any().refine((val) => false, { message: 'City is required.' })
]) ])
}) })
), ),
@ -108,9 +108,9 @@ export default {
<template> <template>
<div class="card flex justify-center"> <div class="card flex justify-center">
<Form v-slot="$form" :resolver="resolver" :initialValues="initialValues" @submit="onFormSubmit" class="flex flex-col gap-4 w-full sm:w-56"> <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"> <div class="flex flex-col gap-1">
<Listbox name="city" :options="cities" optionLabel="name" fluid /> <Listbox name="city" :options="cities" optionLabel="name" fluid />
<Message v-if="$form.city?.invalid" severity="error">{{ $form.city.error?.message }}</Message> <Message v-if="$form.city?.invalid" severity="error" size="small" variant="simple">{{ $form.city.error?.message }}</Message>
</div> </div>
<Button type="submit" severity="secondary" label="Submit" /> <Button type="submit" severity="secondary" label="Submit" />
</Form> </Form>
@ -131,9 +131,9 @@ const resolver = ref(zodResolver(
z.object({ z.object({
city: z.union([ city: z.union([
z.object({ z.object({
name: z.string().min(1, 'City required.') name: z.string().min(1, 'City is required.')
}), }),
z.any().refine((val) => false, { message: 'City required.' }) z.any().refine((val) => false, { message: 'City is required.' })
]) ])
}) })
)); ));

28
apps/showcase/doc/multiselect/FormsDoc.vue
View File

@ -2,9 +2,9 @@
<DocSectionText v-bind="$attrs"> </DocSectionText> <DocSectionText v-bind="$attrs"> </DocSectionText>
<div class="card flex justify-center"> <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-80">
<div class="flex flex-col gap-2"> <div class="flex flex-col gap-1">
<MultiSelect name="city" :options="cities" optionLabel="name" filter placeholder="Select Cities" :maxSelectedLabels="3" fluid /> <MultiSelect name="city" :options="cities" optionLabel="name" filter placeholder="Select Cities" :maxSelectedLabels="3" fluid />
<Message v-if="$form.city?.invalid" severity="error">{{ $form.city.error?.message }}</Message> <Message v-if="$form.city?.invalid" severity="error" size="small" variant="simple">{{ $form.city.error?.message }}</Message>
</div> </div>
<Button type="submit" severity="secondary" label="Submit" /> <Button type="submit" severity="secondary" label="Submit" />
</Form> </Form>
@ -27,10 +27,10 @@ export default {
city: z city: z
.array( .array(
z.object({ z.object({
name: z.string().min(1, 'City required.') name: z.string().min(1, 'City is required.')
}) })
) )
.min(1, 'City required.') .min(1, 'City is required.')
}) })
), ),
cities: [ cities: [
@ -43,9 +43,9 @@ export default {
code: { code: {
basic: ` 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">
<div class="flex flex-col gap-2"> <div class="flex flex-col gap-1">
<MultiSelect name="city" :options="cities" optionLabel="name" filter placeholder="Select Cities" :maxSelectedLabels="3" class="w-full md:w-80" /> <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.error?.message }}</Message> <Message v-if="$form.city?.invalid" severity="error" size="small" variant="simple">{{ $form.city.error?.message }}</Message>
</div> </div>
<Button type="submit" severity="secondary" label="Submit" /> <Button type="submit" severity="secondary" label="Submit" />
</Form> </Form>
@ -54,9 +54,9 @@ export default {
<template> <template>
<div class="card flex justify-center"> <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">
<div class="flex flex-col gap-2"> <div class="flex flex-col gap-1">
<MultiSelect name="city" :options="cities" optionLabel="name" filter placeholder="Select Cities" :maxSelectedLabels="3" class="w-full md:w-80" /> <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.error?.message }}</Message> <Message v-if="$form.city?.invalid" severity="error" size="small" variant="simple">{{ $form.city.error?.message }}</Message>
</div> </div>
<Button type="submit" severity="secondary" label="Submit" /> <Button type="submit" severity="secondary" label="Submit" />
</Form> </Form>
@ -78,10 +78,10 @@ export default {
city: z city: z
.array( .array(
z.object({ z.object({
name: z.string().min(1, 'City required.') name: z.string().min(1, 'City is required.')
}) })
) )
.min(1, 'City required.') .min(1, 'City is required.')
}) })
), ),
cities: [ cities: [
@ -108,9 +108,9 @@ export default {
<template> <template>
<div class="card flex justify-center"> <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">
<div class="flex flex-col gap-2"> <div class="flex flex-col gap-1">
<MultiSelect name="city" :options="cities" optionLabel="name" filter placeholder="Select Cities" :maxSelectedLabels="3" class="w-full md:w-80" /> <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.error?.message }}</Message> <Message v-if="$form.city?.invalid" severity="error" size="small" variant="simple">{{ $form.city.error?.message }}</Message>
</div> </div>
<Button type="submit" severity="secondary" label="Submit" /> <Button type="submit" severity="secondary" label="Submit" />
</Form> </Form>
@ -132,10 +132,10 @@ const resolver = ref(zodResolver(
city: z city: z
.array( .array(
z.object({ z.object({
name: z.string().min(1, 'City required.') name: z.string().min(1, 'City is required.')
}) })
) )
.min(1, 'City required.') .min(1, 'City is required.')
}) })
)); ));
const cities = ref([ const cities = ref([

30
apps/showcase/doc/password/FormsDoc.vue
View File

@ -3,11 +3,11 @@
<p>InputText is used with the <i>v-model</i> property.</p> <p>InputText is used with the <i>v-model</i> property.</p>
</DocSectionText> </DocSectionText>
<div class="card flex justify-center"> <div class="card flex justify-center">
<Form v-slot="$form" :resolver="resolver" :initialValues="initialValues" @submit="onFormSubmit" class="flex flex-col gap-4 w-full sm:w-80"> <Form v-slot="$form" :resolver="resolver" :initialValues="initialValues" @submit="onFormSubmit" class="flex flex-col gap-4 w-full sm:w-64">
<div class="flex flex-col gap-2"> <div class="flex flex-col gap-1">
<Password name="password" placeholder="Password" :feedback="false" fluid /> <Password name="password" placeholder="Password" :feedback="false" fluid />
<template v-if="$form.password?.invalid"> <template v-if="$form.password?.invalid">
<Message v-for="(error, index) of $form.password.errors" :key="index" severity="error">{{ error.message }}</Message> <Message v-for="(error, index) of $form.password.errors" :key="index" severity="error" size="small" variant="simple">{{ error.message }}</Message>
</template> </template>
</div> </div>
<Button type="submit" severity="secondary" label="Submit" /> <Button type="submit" severity="secondary" label="Submit" />
@ -36,7 +36,7 @@ export default {
message: 'Must have a lowercase letter.' message: 'Must have a lowercase letter.'
}) })
.refine((value) => /[A-Z]/.test(value), { .refine((value) => /[A-Z]/.test(value), {
message: 'Must have a uppercase letter.' message: 'Must have an uppercase letter.'
}) })
.refine((value) => /\d/.test(value), { .refine((value) => /\d/.test(value), {
message: 'Must have a number.' message: 'Must have a number.'
@ -45,11 +45,11 @@ export default {
), ),
code: { code: {
basic: ` basic: `
<Form v-slot="$form" :resolver="resolver" :initialValues="initialValues" @submit="onFormSubmit" class="flex flex-col gap-4 w-full sm:w-80"> <Form v-slot="$form" :resolver="resolver" :initialValues="initialValues" @submit="onFormSubmit" class="flex flex-col gap-4 w-full sm:w-64">
<div class="flex flex-col gap-2"> <div class="flex flex-col gap-1">
<Password name="password" placeholder="Password" :feedback="false" fluid /> <Password name="password" placeholder="Password" :feedback="false" fluid />
<template v-if="$form.password?.invalid"> <template v-if="$form.password?.invalid">
<Message v-for="(error, index) of $form.password.errors" :key="index" severity="error">{{ error.message }}</Message> <Message v-for="(error, index) of $form.password.errors" :key="index" severity="error" size="small" variant="simple">{{ error.message }}</Message>
</template> </template>
</div> </div>
<Button type="submit" severity="secondary" label="Submit" /> <Button type="submit" severity="secondary" label="Submit" />
@ -58,11 +58,11 @@ export default {
options: ` options: `
<template> <template>
<div class="card flex justify-center"> <div class="card flex justify-center">
<Form v-slot="$form" :resolver="resolver" :initialValues="initialValues" @submit="onFormSubmit" class="flex flex-col gap-4 w-full sm:w-80"> <Form v-slot="$form" :resolver="resolver" :initialValues="initialValues" @submit="onFormSubmit" class="flex flex-col gap-4 w-full sm:w-64">
<div class="flex flex-col gap-2"> <div class="flex flex-col gap-1">
<Password name="password" placeholder="Password" :feedback="false" fluid /> <Password name="password" placeholder="Password" :feedback="false" fluid />
<template v-if="$form.password?.invalid"> <template v-if="$form.password?.invalid">
<Message v-for="(error, index) of $form.password.errors" :key="index" severity="error">{{ error.message }}</Message> <Message v-for="(error, index) of $form.password.errors" :key="index" severity="error" size="small" variant="simple">{{ error.message }}</Message>
</template> </template>
</div> </div>
<Button type="submit" severity="secondary" label="Submit" /> <Button type="submit" severity="secondary" label="Submit" />
@ -90,7 +90,7 @@ export default {
message: 'Must have a lowercase letter.' message: 'Must have a lowercase letter.'
}) })
.refine((value) => /[A-Z]/.test(value), { .refine((value) => /[A-Z]/.test(value), {
message: 'Must have a uppercase letter.' message: 'Must have an uppercase letter.'
}) })
.refine((value) => /\d/.test(value), { .refine((value) => /\d/.test(value), {
message: 'Must have a number.' message: 'Must have a number.'
@ -113,11 +113,11 @@ export default {
composition: ` composition: `
<template> <template>
<div class="card flex justify-center"> <div class="card flex justify-center">
<Form v-slot="$form" :resolver="resolver" :initialValues="initialValues" @submit="onFormSubmit" class="flex flex-col gap-4 w-full sm:w-80"> <Form v-slot="$form" :resolver="resolver" :initialValues="initialValues" @submit="onFormSubmit" class="flex flex-col gap-4 w-full sm:w-64">
<div class="flex flex-col gap-2"> <div class="flex flex-col gap-1">
<Password name="password" placeholder="Password" :feedback="false" fluid /> <Password name="password" placeholder="Password" :feedback="false" fluid />
<template v-if="$form.password?.invalid"> <template v-if="$form.password?.invalid">
<Message v-for="(error, index) of $form.password.errors" :key="index" severity="error">{{ error.message }}</Message> <Message v-for="(error, index) of $form.password.errors" :key="index" severity="error" size="small" variant="simple">{{ error.message }}</Message>
</template> </template>
</div> </div>
<Button type="submit" severity="secondary" label="Submit" /> <Button type="submit" severity="secondary" label="Submit" />
@ -145,7 +145,7 @@ const resolver = ref(zodResolver(
message: 'Must have a lowercase letter.' message: 'Must have a lowercase letter.'
}) })
.refine((value) => /[A-Z]/.test(value), { .refine((value) => /[A-Z]/.test(value), {
message: 'Must have a uppercase letter.' message: 'Must have an uppercase letter.'
}) })
.refine((value) => /\d/.test(value), { .refine((value) => /\d/.test(value), {
message: 'Must have a number.' message: 'Must have a number.'

174
apps/showcase/doc/radiobutton/FormsDoc.vue
View File

@ -1,28 +1,30 @@
<template> <template>
<DocSectionText v-bind="$attrs"> <DocSectionText v-bind="$attrs">
<p>RadioButton can be used with the <NuxtLink to="/forms">PrimeVue Forms</NuxtLink> library.</p> <p>RadioButton integrates seamlessly with the <NuxtLink to="/forms">PrimeVue Forms</NuxtLink> library.</p>
</DocSectionText> </DocSectionText>
<div class="card flex justify-center"> <div class="card flex justify-center">
<Form v-slot="$form" :resolver="resolver" :initialValues="initialValues" @submit="onFormSubmit" class="flex flex-col gap-4"> <Form v-slot="$form" :resolver="resolver" :initialValues="initialValues" @submit="onFormSubmit" class="flex flex-col gap-4">
<RadioButtonGroup name="radiobutton" class="flex flex-wrap gap-4"> <div class="flex flex-col gap-2">
<div class="flex items-center gap-2"> <RadioButtonGroup name="ingredient" class="flex flex-wrap gap-4">
<RadioButton inputId="cheese" value="Cheese" /> <div class="flex items-center gap-2">
<label for="cheese">Cheese</label> <RadioButton inputId="cheese" value="Cheese" />
</div> <label for="cheese">Cheese</label>
<div class="flex items-center gap-2"> </div>
<RadioButton inputId="mushroom" value="Mushroom" /> <div class="flex items-center gap-2">
<label for="mushroom">Mushroom</label> <RadioButton inputId="mushroom" value="Mushroom" />
</div> <label for="mushroom">Mushroom</label>
<div class="flex items-center gap-2"> </div>
<RadioButton inputId="pepper" value="Pepper" /> <div class="flex items-center gap-2">
<label for="pepper">Pepper</label> <RadioButton inputId="pepper" value="Pepper" />
</div> <label for="pepper">Pepper</label>
<div class="flex items-center gap-2"> </div>
<RadioButton inputId="onion" value="Onion" /> <div class="flex items-center gap-2">
<label for="onion">Onion</label> <RadioButton inputId="onion" value="Onion" />
</div> <label for="onion">Onion</label>
</RadioButtonGroup> </div>
<Message v-if="$form.radiobutton?.invalid" severity="error" icon="pi pi-times-circle">{{ $form.radiobutton.error?.message }}</Message> </RadioButtonGroup>
<Message v-if="$form.ingredient?.invalid" severity="error" size="small" variant="simple">{{ $form.ingredient.error?.message }}</Message>
</div>
<Button type="submit" severity="secondary" label="Submit" /> <Button type="submit" severity="secondary" label="Submit" />
</Form> </Form>
</div> </div>
@ -37,35 +39,37 @@ export default {
data() { data() {
return { return {
initialValues: { initialValues: {
radiobutton: '' ingredient: ''
}, },
resolver: zodResolver( resolver: zodResolver(
z.object({ z.object({
radiobutton: z.string().min(1, { message: 'Selection is required.' }) ingredient: z.string().min(1, { message: 'Ingredient is required.' })
}) })
), ),
code: { code: {
basic: ` basic: `
<Form v-slot="$form" :resolver="resolver" :initialValues="initialValues" @submit="onFormSubmit" class="flex flex-col gap-4"> <Form v-slot="$form" :resolver="resolver" :initialValues="initialValues" @submit="onFormSubmit" class="flex flex-col gap-4">
<RadioButtonGroup name="radiobutton" class="flex flex-wrap gap-4"> <div class="flex flex-col gap-2">
<div class="flex items-center gap-2"> <RadioButtonGroup name="ingredient" class="flex flex-wrap gap-4">
<RadioButton inputId="cheese" value="Cheese" /> <div class="flex items-center gap-2">
<label for="cheese">Cheese</label> <RadioButton inputId="cheese" value="Cheese" />
</div> <label for="cheese">Cheese</label>
<div class="flex items-center gap-2"> </div>
<RadioButton inputId="mushroom" value="Mushroom" /> <div class="flex items-center gap-2">
<label for="mushroom">Mushroom</label> <RadioButton inputId="mushroom" value="Mushroom" />
</div> <label for="mushroom">Mushroom</label>
<div class="flex items-center gap-2"> </div>
<RadioButton inputId="pepper" value="Pepper" /> <div class="flex items-center gap-2">
<label for="pepper">Pepper</label> <RadioButton inputId="pepper" value="Pepper" />
</div> <label for="pepper">Pepper</label>
<div class="flex items-center gap-2"> </div>
<RadioButton inputId="onion" value="Onion" /> <div class="flex items-center gap-2">
<label for="onion">Onion</label> <RadioButton inputId="onion" value="Onion" />
</div> <label for="onion">Onion</label>
</RadioButtonGroup> </div>
<Message v-if="$form.radiobutton?.invalid" severity="error" icon="pi pi-times-circle">{{ $form.radiobutton.error?.message }}</Message> </RadioButtonGroup>
<Message v-if="$form.ingredient?.invalid" severity="error" size="small" variant="simple">{{ $form.ingredient.error?.message }}</Message>
</div>
<Button type="submit" severity="secondary" label="Submit" /> <Button type="submit" severity="secondary" label="Submit" />
</Form> </Form>
`, `,
@ -73,25 +77,27 @@ export default {
<template> <template>
<div class="card flex justify-center"> <div class="card flex justify-center">
<Form v-slot="$form" :resolver="resolver" :initialValues="initialValues" @submit="onFormSubmit" class="flex flex-col gap-4"> <Form v-slot="$form" :resolver="resolver" :initialValues="initialValues" @submit="onFormSubmit" class="flex flex-col gap-4">
<RadioButtonGroup name="radiobutton" class="flex flex-wrap gap-4"> <div class="flex flex-col gap-2">
<div class="flex items-center gap-2"> <RadioButtonGroup name="ingredient" class="flex flex-wrap gap-4">
<RadioButton inputId="cheese" value="Cheese" /> <div class="flex items-center gap-2">
<label for="cheese">Cheese</label> <RadioButton inputId="cheese" value="Cheese" />
</div> <label for="cheese">Cheese</label>
<div class="flex items-center gap-2"> </div>
<RadioButton inputId="mushroom" value="Mushroom" /> <div class="flex items-center gap-2">
<label for="mushroom">Mushroom</label> <RadioButton inputId="mushroom" value="Mushroom" />
</div> <label for="mushroom">Mushroom</label>
<div class="flex items-center gap-2"> </div>
<RadioButton inputId="pepper" value="Pepper" /> <div class="flex items-center gap-2">
<label for="pepper">Pepper</label> <RadioButton inputId="pepper" value="Pepper" />
</div> <label for="pepper">Pepper</label>
<div class="flex items-center gap-2"> </div>
<RadioButton inputId="onion" value="Onion" /> <div class="flex items-center gap-2">
<label for="onion">Onion</label> <RadioButton inputId="onion" value="Onion" />
</div> <label for="onion">Onion</label>
</RadioButtonGroup> </div>
<Message v-if="$form.radiobutton?.invalid" severity="error" icon="pi pi-times-circle">{{ $form.radiobutton.error?.message }}</Message> </RadioButtonGroup>
<Message v-if="$form.ingredient?.invalid" severity="error" size="small" variant="simple">{{ $form.ingredient.error?.message }}</Message>
</div>
<Button type="submit" severity="secondary" label="Submit" /> <Button type="submit" severity="secondary" label="Submit" />
</Form> </Form>
</div> </div>
@ -105,11 +111,11 @@ export default {
data() { data() {
return { return {
initialValues: { initialValues: {
radiobutton: '' ingredient: ''
}, },
resolver: zodResolver( resolver: zodResolver(
z.object({ z.object({
radiobutton: z.string().min(1, { message: 'Selection is required.' }) ingredient: z.string().min(1, { message: 'Ingredient is required.' })
}) })
) )
} }
@ -129,25 +135,27 @@ export default {
<template> <template>
<div class="card flex justify-center"> <div class="card flex justify-center">
<Form v-slot="$form" :resolver="resolver" :initialValues="initialValues" @submit="onFormSubmit" class="flex flex-col gap-4"> <Form v-slot="$form" :resolver="resolver" :initialValues="initialValues" @submit="onFormSubmit" class="flex flex-col gap-4">
<RadioButtonGroup name="radiobutton" class="flex flex-wrap gap-4"> <div class="flex flex-col gap-2">
<div class="flex items-center gap-2"> <RadioButtonGroup name="ingredient" class="flex flex-wrap gap-4">
<RadioButton inputId="cheese" value="Cheese" /> <div class="flex items-center gap-2">
<label for="cheese">Cheese</label> <RadioButton inputId="cheese" value="Cheese" />
</div> <label for="cheese">Cheese</label>
<div class="flex items-center gap-2"> </div>
<RadioButton inputId="mushroom" value="Mushroom" /> <div class="flex items-center gap-2">
<label for="mushroom">Mushroom</label> <RadioButton inputId="mushroom" value="Mushroom" />
</div> <label for="mushroom">Mushroom</label>
<div class="flex items-center gap-2"> </div>
<RadioButton inputId="pepper" value="Pepper" /> <div class="flex items-center gap-2">
<label for="pepper">Pepper</label> <RadioButton inputId="pepper" value="Pepper" />
</div> <label for="pepper">Pepper</label>
<div class="flex items-center gap-2"> </div>
<RadioButton inputId="onion" value="Onion" /> <div class="flex items-center gap-2">
<label for="onion">Onion</label> <RadioButton inputId="onion" value="Onion" />
</div> <label for="onion">Onion</label>
</RadioButtonGroup> </div>
<Message v-if="$form.radiobutton?.invalid" severity="error" icon="pi pi-times-circle">{{ $form.radiobutton.error?.message }}</Message> </RadioButtonGroup>
<Message v-if="$form.ingredient?.invalid" severity="error" size="small" variant="simple">{{ $form.ingredient.error?.message }}</Message>
</div>
<Button type="submit" severity="secondary" label="Submit" /> <Button type="submit" severity="secondary" label="Submit" />
</Form> </Form>
</div> </div>
@ -161,11 +169,11 @@ import { z } from 'zod';
const toast = useToast(); const toast = useToast();
const initialValues = ref({ const initialValues = ref({
radiobutton: '' ingredient: ''
}); });
const resolver = ref(zodResolver( const resolver = ref(zodResolver(
z.object({ z.object({
radiobutton: z.string().min(1, { message: 'Selection is required.' }) ingredient: z.string().min(1, { message: 'Ingredient is required.' })
}) })
)); ));

18
apps/showcase/doc/rating/FormsDoc.vue
View File

@ -1,12 +1,12 @@
<template> <template>
<DocSectionText v-bind="$attrs"> <DocSectionText v-bind="$attrs">
<p>Rating can be used with the <NuxtLink to="/forms">PrimeVue Forms</NuxtLink> library.</p> <p>Rating integrates seamlessly with the <NuxtLink to="/forms">PrimeVue Forms</NuxtLink> library.</p>
</DocSectionText> </DocSectionText>
<div class="card flex justify-center"> <div class="card flex justify-center">
<Form v-slot="$form" :resolver="resolver" :initialValues="initialValues" @submit="onFormSubmit" class="flex flex-col gap-4"> <Form v-slot="$form" :resolver="resolver" :initialValues="initialValues" @submit="onFormSubmit" class="flex flex-col gap-4 w-40">
<div class="flex flex-col items-center gap-2"> <div class="flex flex-col items-center gap-2">
<Rating name="rating" /> <Rating name="rating" />
<Message v-if="$form.rating?.invalid" severity="error">{{ $form.rating.error?.message }}</Message> <Message v-if="$form.rating?.invalid" severity="error" size="small" variant="simple">{{ $form.rating.error?.message }}</Message>
</div> </div>
<Button type="submit" severity="secondary" label="Submit" /> <Button type="submit" severity="secondary" label="Submit" />
</Form> </Form>
@ -31,10 +31,10 @@ export default {
), ),
code: { code: {
basic: ` basic: `
<Form v-slot="$form" :resolver="resolver" :initialValues="initialValues" @submit="onFormSubmit" class="flex flex-col gap-4"> <Form v-slot="$form" :resolver="resolver" :initialValues="initialValues" @submit="onFormSubmit" class="flex flex-col gap-4 w-40">
<div class="flex flex-col items-center gap-2"> <div class="flex flex-col items-center gap-2">
<Rating name="rating" /> <Rating name="rating" />
<Message v-if="$form.rating?.invalid" severity="error">{{ $form.rating.error?.message }}</Message> <Message v-if="$form.rating?.invalid" severity="error" size="small" variant="simple">{{ $form.rating.error?.message }}</Message>
</div> </div>
<Button type="submit" severity="secondary" label="Submit" /> <Button type="submit" severity="secondary" label="Submit" />
</Form> </Form>
@ -42,10 +42,10 @@ export default {
options: ` options: `
<template> <template>
<div class="card flex justify-center"> <div class="card flex justify-center">
<Form v-slot="$form" :resolver="resolver" :initialValues="initialValues" @submit="onFormSubmit" class="flex flex-col gap-4"> <Form v-slot="$form" :resolver="resolver" :initialValues="initialValues" @submit="onFormSubmit" class="flex flex-col gap-4 w-40">
<div class="flex flex-col items-center gap-2"> <div class="flex flex-col items-center gap-2">
<Rating name="rating" /> <Rating name="rating" />
<Message v-if="$form.rating?.invalid" severity="error">{{ $form.rating.error?.message }}</Message> <Message v-if="$form.rating?.invalid" severity="error" size="small" variant="simple">{{ $form.rating.error?.message }}</Message>
</div> </div>
<Button type="submit" severity="secondary" label="Submit" /> <Button type="submit" severity="secondary" label="Submit" />
</Form> </Form>
@ -83,10 +83,10 @@ export default {
composition: ` composition: `
<template> <template>
<div class="card flex justify-center"> <div class="card flex justify-center">
<Form v-slot="$form" :resolver="resolver" :initialValues="initialValues" @submit="onFormSubmit" class="flex flex-col gap-4"> <Form v-slot="$form" :resolver="resolver" :initialValues="initialValues" @submit="onFormSubmit" class="flex flex-col gap-4 w-40">
<div class="flex flex-col items-center gap-2"> <div class="flex flex-col items-center gap-2">
<Rating name="rating" /> <Rating name="rating" />
<Message v-if="$form.rating?.invalid" severity="error">{{ $form.rating.error?.message }}</Message> <Message v-if="$form.rating?.invalid" severity="error" size="small" variant="simple">{{ $form.rating.error?.message }}</Message>
</div> </div>
<Button type="submit" severity="secondary" label="Submit" /> <Button type="submit" severity="secondary" label="Submit" />
</Form> </Form>

28
apps/showcase/doc/select/FormsDoc.vue
View File

@ -2,9 +2,9 @@
<DocSectionText v-bind="$attrs"> </DocSectionText> <DocSectionText v-bind="$attrs"> </DocSectionText>
<div class="card flex justify-center"> <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"> <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"> <div class="flex flex-col gap-1">
<Select name="city" :options="cities" 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.error.message }}</Message> <Message v-if="$form.city?.invalid" severity="error" size="small" variant="simple">{{ $form.city.error.message }}</Message>
</div> </div>
<Button type="submit" severity="secondary" label="Submit" /> <Button type="submit" severity="secondary" label="Submit" />
</Form> </Form>
@ -26,9 +26,9 @@ export default {
z.object({ z.object({
city: z.union([ city: z.union([
z.object({ z.object({
name: z.string().min(1, 'City required.') name: z.string().min(1, 'City is required.')
}), }),
z.any().refine((val) => false, { message: 'City required.' }) z.any().refine((val) => false, { message: 'City is required.' })
]) ])
}) })
), ),
@ -42,9 +42,9 @@ export default {
code: { code: {
basic: ` basic: `
<Form v-slot="$form" :resolver="resolver" :initialValues="initialValues" @submit="onFormSubmit" class="flex flex-col gap-4 w-full md:w-56"> <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"> <div class="flex flex-col gap-1">
<Select name="city" :options="cities" 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.error.message }}</Message> <Message v-if="$form.city?.invalid" severity="error" size="small" variant="simple">{{ $form.city.error.message }}</Message>
</div> </div>
<Button type="submit" severity="secondary" label="Submit" /> <Button type="submit" severity="secondary" label="Submit" />
</Form> </Form>
@ -53,9 +53,9 @@ export default {
<template> <template>
<div class="card flex justify-center"> <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"> <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"> <div class="flex flex-col gap-1">
<Select name="city" :options="cities" 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.error.message }}</Message> <Message v-if="$form.city?.invalid" severity="error" size="small" variant="simple">{{ $form.city.error.message }}</Message>
</div> </div>
<Button type="submit" severity="secondary" label="Submit" /> <Button type="submit" severity="secondary" label="Submit" />
</Form> </Form>
@ -76,9 +76,9 @@ export default {
z.object({ z.object({
city: z.union([ city: z.union([
z.object({ z.object({
name: z.string().min(1, 'City required.') name: z.string().min(1, 'City is required.')
}), }),
z.any().refine((val) => false, { message: 'City required.' }) z.any().refine((val) => false, { message: 'City is required.' })
]) ])
}) })
), ),
@ -105,9 +105,9 @@ export default {
<template> <template>
<div class="card flex justify-center"> <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"> <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"> <div class="flex flex-col gap-1">
<Select name="city" :options="cities" 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.error.message }}</Message> <Message v-if="$form.city?.invalid" severity="error" size="small" variant="simple">{{ $form.city.error.message }}</Message>
</div> </div>
<Button type="submit" severity="secondary" label="Submit" /> <Button type="submit" severity="secondary" label="Submit" />
</Form> </Form>
@ -128,9 +128,9 @@ const resolver = ref(zodResolver(
z.object({ z.object({
city: z.union([ city: z.union([
z.object({ z.object({
name: z.string().min(1, 'City required.') name: z.string().min(1, 'City is required.')
}), }),
z.any().refine((val) => false, { message: 'City required.' }) z.any().refine((val) => false, { message: 'City is required.' })
]) ])
}) })
)); ));

38
apps/showcase/doc/selectbutton/FormsDoc.vue
View File

@ -1,12 +1,12 @@
<template> <template>
<DocSectionText v-bind="$attrs"> <DocSectionText v-bind="$attrs">
<p>SelectButton can be used with the <NuxtLink to="/forms">PrimeVue Forms</NuxtLink> library.</p> <p>SelectButton integrates seamlessly with the <NuxtLink to="/forms">PrimeVue Forms</NuxtLink> library.</p>
</DocSectionText> </DocSectionText>
<div class="card flex justify-center"> <div class="card flex justify-center">
<Form v-slot="$form" :resolver="resolver" :initialValues="initialValues" @submit="onFormSubmit" class="flex flex-col gap-4"> <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"> <div class="flex items-center flex-col gap-1">
<SelectButton name="selectbutton" :options="options" /> <SelectButton name="selection" :options="options" />
<Message v-if="$form.selectbutton?.invalid" severity="error">{{ $form.selectbutton.error?.message }}</Message> <Message v-if="$form.selection?.invalid" severity="error" size="small" variant="simple">{{ $form.selection.error?.message }}</Message>
</div> </div>
<Button type="submit" severity="secondary" label="Submit" /> <Button type="submit" severity="secondary" label="Submit" />
</Form> </Form>
@ -22,20 +22,20 @@ export default {
data() { data() {
return { return {
initialValues: { initialValues: {
selectbutton: '' selection: ''
}, },
resolver: zodResolver( resolver: zodResolver(
z.object({ z.object({
selectbutton: z.preprocess((val) => (val === null ? '' : val), z.string().min(1, { message: 'SelectButton is required' })) selection: z.preprocess((val) => (val === null ? '' : val), z.string().min(1, { message: 'Selection is required' }))
}) })
), ),
options: ['One-Way', 'Return'], options: ['One-Way', 'Return'],
code: { code: {
basic: ` basic: `
<Form v-slot="$form" :resolver="resolver" :initialValues="initialValues" @submit="onFormSubmit" class="flex flex-col gap-4"> <Form v-slot="$form" :resolver="resolver" :initialValues="initialValues" @submit="onFormSubmit" class="flex flex-col gap-4">
<div class="flex flex-col gap-2"> <div class="flex flex-col gap-1">
<SelectButton name="selectbutton" :options="options" /> <SelectButton name="selection" :options="options" />
<Message v-if="$form.selectbutton?.invalid" severity="error">{{ $form.selectbutton.error?.message }}</Message> <Message v-if="$form.selection?.invalid" severity="error">{{ $form.selection.error?.message }}</Message>
</div> </div>
<Button type="submit" severity="secondary" label="Submit" /> <Button type="submit" severity="secondary" label="Submit" />
</Form> </Form>
@ -44,9 +44,9 @@ export default {
<template> <template>
<div class="card flex justify-center"> <div class="card flex justify-center">
<Form v-slot="$form" :resolver="resolver" :initialValues="initialValues" @submit="onFormSubmit" class="flex flex-col gap-4"> <Form v-slot="$form" :resolver="resolver" :initialValues="initialValues" @submit="onFormSubmit" class="flex flex-col gap-4">
<div class="flex flex-col gap-2"> <div class="flex flex-col gap-1">
<SelectButton name="selectbutton" :options="options" /> <SelectButton name="selection" :options="options" />
<Message v-if="$form.selectbutton?.invalid" severity="error">{{ $form.selectbutton.error?.message }}</Message> <Message v-if="$form.selection?.invalid" severity="error">{{ $form.selection.error?.message }}</Message>
</div> </div>
<Button type="submit" severity="secondary" label="Submit" /> <Button type="submit" severity="secondary" label="Submit" />
</Form> </Form>
@ -61,11 +61,11 @@ export default {
data() { data() {
return { return {
initialValues: { initialValues: {
selectbutton: '' selection: ''
}, },
resolver: zodResolver( resolver: zodResolver(
z.object({ z.object({
selectbutton: z.preprocess((val) => (val === null ? '' : val), z.string().min(1, { message: 'SelectButton is required' })) selection: z.preprocess((val) => (val === null ? '' : val), z.string().min(1, { message: 'Selection is required' }))
}) })
), ),
options: ['One-Way', 'Return'], options: ['One-Way', 'Return'],
@ -86,9 +86,9 @@ export default {
<template> <template>
<div class="card flex justify-center"> <div class="card flex justify-center">
<Form v-slot="$form" :resolver="resolver" :initialValues="initialValues" @submit="onFormSubmit" class="flex flex-col gap-4"> <Form v-slot="$form" :resolver="resolver" :initialValues="initialValues" @submit="onFormSubmit" class="flex flex-col gap-4">
<div class="flex flex-col gap-2"> <div class="flex flex-col gap-1">
<SelectButton name="selectbutton" :options="options" /> <SelectButton name="selection" :options="options" />
<Message v-if="$form.selectbutton?.invalid" severity="error">{{ $form.selectbutton.error?.message }}</Message> <Message v-if="$form.selection?.invalid" severity="error">{{ $form.selection.error?.message }}</Message>
</div> </div>
<Button type="submit" severity="secondary" label="Submit" /> <Button type="submit" severity="secondary" label="Submit" />
</Form> </Form>
@ -103,11 +103,11 @@ import { z } from 'zod';
const toast = useToast(); const toast = useToast();
const initialValues = ref({ const initialValues = ref({
selectbutton: '' selection: ''
}); });
const resolver = ref(zodResolver( const resolver = ref(zodResolver(
z.object({ z.object({
selectbutton: z.preprocess((val) => (val === null ? '' : val), z.string().min(1, { message: 'SelectButton is required' })) selection: z.preprocess((val) => (val === null ? '' : val), z.string().min(1, { message: 'Selection is required' }))
}) })
)); ));

18
apps/showcase/doc/slider/FormsDoc.vue
View File

@ -1,12 +1,12 @@
<template> <template>
<DocSectionText v-bind="$attrs"> <DocSectionText v-bind="$attrs">
<p>Slider can be used with the <NuxtLink to="/forms">PrimeVue Forms</NuxtLink> library.</p> <p>Slider integrates seamlessly with the <NuxtLink to="/forms">PrimeVue Forms</NuxtLink> library.</p>
</DocSectionText> </DocSectionText>
<div class="card flex justify-center"> <div class="card flex justify-center">
<Form v-slot="$form" :resolver="resolver" :initialValues="initialValues" @submit="onFormSubmit" class="flex flex-col gap-4 w-full sm:w-56"> <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"> <div class="flex flex-col gap-4">
<Slider name="slider" /> <Slider name="slider" />
<Message v-if="$form.slider?.invalid" severity="error">{{ $form.slider.error?.message }}</Message> <Message v-if="$form.slider?.invalid" severity="error" size="small" variant="simple">{{ $form.slider.error?.message }}</Message>
</div> </div>
<Button type="submit" severity="secondary" label="Submit" /> <Button type="submit" severity="secondary" label="Submit" />
</Form> </Form>
@ -32,9 +32,9 @@ export default {
code: { code: {
basic: ` basic: `
<Form v-slot="$form" :resolver="resolver" :initialValues="initialValues" @submit="onFormSubmit" class="flex flex-col gap-4 w-full sm:w-56"> <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"> <div class="flex flex-col gap-4">
<Slider name="slider" /> <Slider name="slider" />
<Message v-if="$form.slider?.invalid" severity="error">{{ $form.slider.error?.message }}</Message> <Message v-if="$form.slider?.invalid" severity="error" size="small" variant="simple">{{ $form.slider.error?.message }}</Message>
</div> </div>
<Button type="submit" severity="secondary" label="Submit" /> <Button type="submit" severity="secondary" label="Submit" />
</Form> </Form>
@ -43,9 +43,9 @@ export default {
<template> <template>
<div class="card flex justify-center"> <div class="card flex justify-center">
<Form v-slot="$form" :resolver="resolver" :initialValues="initialValues" @submit="onFormSubmit" class="flex flex-col gap-4 w-full sm:w-56"> <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"> <div class="flex flex-col gap-4">
<Slider name="slider" /> <Slider name="slider" />
<Message v-if="$form.slider?.invalid" severity="error">{{ $form.slider.error?.message }}</Message> <Message v-if="$form.slider?.invalid" severity="error" size="small" variant="simple">{{ $form.slider.error?.message }}</Message>
</div> </div>
<Button type="submit" severity="secondary" label="Submit" /> <Button type="submit" severity="secondary" label="Submit" />
</Form> </Form>
@ -84,9 +84,9 @@ export default {
<template> <template>
<div class="card flex justify-center"> <div class="card flex justify-center">
<Form v-slot="$form" :resolver="resolver" :initialValues="initialValues" @submit="onFormSubmit" class="flex flex-col gap-4 w-full sm:w-56"> <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"> <div class="flex flex-col gap-4">
<Slider name="slider" /> <Slider name="slider" />
<Message v-if="$form.slider?.invalid" severity="error">{{ $form.slider.error?.message }}</Message> <Message v-if="$form.slider?.invalid" severity="error" size="small" variant="simple">{{ $form.slider.error?.message }}</Message>
</div> </div>
<Button type="submit" severity="secondary" label="Submit" /> <Button type="submit" severity="secondary" label="Submit" />
</Form> </Form>

38
apps/showcase/doc/textarea/FormsDoc.vue
View File

@ -1,12 +1,12 @@
<template> <template>
<DocSectionText v-bind="$attrs"> <DocSectionText v-bind="$attrs">
<p>Textarea can be used with the <NuxtLink to="/forms">PrimeVue Forms</NuxtLink> library.</p> <p>Textarea integrates seamlessly with the <NuxtLink to="/forms">PrimeVue Forms</NuxtLink> library.</p>
</DocSectionText> </DocSectionText>
<div class="card flex justify-center"> <div class="card flex justify-center">
<Form v-slot="$form" :resolver="resolver" :initialValues="initialValues" @submit="onFormSubmit" class="flex flex-col gap-4"> <Form v-slot="$form" :resolver="resolver" :initialValues="initialValues" @submit="onFormSubmit" class="flex flex-col gap-4">
<div class="flex flex-col gap-2"> <div class="flex flex-col gap-1">
<Textarea name="textarea" rows="5" cols="30" style="resize: none" /> <Textarea name="address" rows="5" cols="30" style="resize: none" />
<Message v-if="$form.textarea?.invalid" severity="error">{{ $form.textarea.error?.message }}</Message> <Message v-if="$form.address?.invalid" severity="error" size="small" variant="simple">{{ $form.address.error?.message }}</Message>
</div> </div>
<Button type="submit" severity="secondary" label="Submit" /> <Button type="submit" severity="secondary" label="Submit" />
</Form> </Form>
@ -22,19 +22,19 @@ export default {
data() { data() {
return { return {
initialValues: { initialValues: {
textarea: '' address: ''
}, },
resolver: zodResolver( resolver: zodResolver(
z.object({ z.object({
textarea: z.string().min(1, { message: 'Textarea is required.' }) address: z.string().min(1, { message: 'Address is required.' })
}) })
), ),
code: { code: {
basic: ` basic: `
<Form v-slot="$form" :resolver="resolver" :initialValues="initialValues" @submit="onFormSubmit" class="flex flex-col gap-4"> <Form v-slot="$form" :resolver="resolver" :initialValues="initialValues" @submit="onFormSubmit" class="flex flex-col gap-4">
<div class="flex flex-col gap-2"> <div class="flex flex-col gap-1">
<Textarea name="textarea" rows="5" cols="30" style="resize: none" /> <Textarea name="address" rows="5" cols="30" style="resize: none" />
<Message v-if="$form.textarea?.invalid" severity="error">{{ $form.textarea.error?.message }}</Message> <Message v-if="$form.address?.invalid" severity="error" size="small" variant="simple">{{ $form.address.error?.message }}</Message>
</div> </div>
<Button type="submit" severity="secondary" label="Submit" /> <Button type="submit" severity="secondary" label="Submit" />
</Form> </Form>
@ -43,9 +43,9 @@ export default {
<template> <template>
<div class="card flex justify-center"> <div class="card flex justify-center">
<Form v-slot="$form" :resolver="resolver" :initialValues="initialValues" @submit="onFormSubmit" class="flex flex-col gap-4"> <Form v-slot="$form" :resolver="resolver" :initialValues="initialValues" @submit="onFormSubmit" class="flex flex-col gap-4">
<div class="flex flex-col gap-2"> <div class="flex flex-col gap-1">
<Textarea name="textarea" rows="5" cols="30" style="resize: none" /> <Textarea name="address" rows="5" cols="30" style="resize: none" />
<Message v-if="$form.textarea?.invalid" severity="error">{{ $form.textarea.error?.message }}</Message> <Message v-if="$form.address?.invalid" severity="error" size="small" variant="simple">{{ $form.address.error?.message }}</Message>
</div> </div>
<Button type="submit" severity="secondary" label="Submit" /> <Button type="submit" severity="secondary" label="Submit" />
</Form> </Form>
@ -60,11 +60,11 @@ export default {
data() { data() {
return { return {
initialValues: { initialValues: {
textarea: '' address: ''
}, },
resolver: zodResolver( resolver: zodResolver(
z.object({ z.object({
textarea: z.string().min(1, { message: 'Textarea is required.' }) address: z.string().min(1, { message: 'Address is required.' })
}) })
), ),
} }
@ -84,9 +84,9 @@ export default {
<template> <template>
<div class="card flex justify-center"> <div class="card flex justify-center">
<Form v-slot="$form" :resolver="resolver" :initialValues="initialValues" @submit="onFormSubmit" class="flex flex-col gap-4"> <Form v-slot="$form" :resolver="resolver" :initialValues="initialValues" @submit="onFormSubmit" class="flex flex-col gap-4">
<div class="flex flex-col gap-2"> <div class="flex flex-col gap-1">
<Textarea name="textarea" rows="5" cols="30" style="resize: none" /> <Textarea name="address" rows="5" cols="30" style="resize: none" />
<Message v-if="$form.textarea?.invalid" severity="error">{{ $form.textarea.error?.message }}</Message> <Message v-if="$form.address?.invalid" severity="error" size="small" variant="simple">{{ $form.address.error?.message }}</Message>
</div> </div>
<Button type="submit" severity="secondary" label="Submit" /> <Button type="submit" severity="secondary" label="Submit" />
</Form> </Form>
@ -101,11 +101,11 @@ import { z } from 'zod';
const toast = useToast(); const toast = useToast();
const initialValues = ref({ const initialValues = ref({
textarea: '' address: ''
}); });
const resolver = ref(zodResolver( const resolver = ref(zodResolver(
z.object({ z.object({
textarea: z.string().min(1, { message: 'Textarea is required.' }) address: z.string().min(1, { message: 'Address is required.' })
}) })
)); ));

39
apps/showcase/doc/togglebutton/FormsDoc.vue
View File

@ -1,12 +1,12 @@
<template> <template>
<DocSectionText v-bind="$attrs"> <DocSectionText v-bind="$attrs">
<p>ToggleButton can be used with the <NuxtLink to="/forms">PrimeVue Forms</NuxtLink> library.</p> <p>ToggleButton integrates seamlessly with the <NuxtLink to="/forms">PrimeVue Forms</NuxtLink> library.</p>
</DocSectionText> </DocSectionText>
<div class="card flex justify-center"> <div class="card flex justify-center">
<Form v-slot="$form" :resolver="resolver" :initialValues="initialValues" @submit="onFormSubmit" class="flex flex-col gap-4"> <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"> <div class="flex flex-col items-center gap-1">
<ToggleButton name="togglebutton" class="w-24" onLabel="On" offLabel="Off" /> <ToggleButton name="consent" class="w-48" onLabel="Accept All" offLabel="Reject All" />
<Message v-if="$form.togglebutton?.invalid" severity="error">{{ $form.togglebutton.error?.message }}</Message> <Message v-if="$form.consent?.invalid" severity="error" size="small" variant="simple">{{ $form.consent.error?.message }}</Message>
</div> </div>
<Button type="submit" severity="secondary" label="Submit" /> <Button type="submit" severity="secondary" label="Submit" />
</Form> </Form>
@ -22,19 +22,19 @@ export default {
data() { data() {
return { return {
initialValues: { initialValues: {
togglebutton: false consent: false
}, },
resolver: zodResolver( resolver: zodResolver(
z.object({ z.object({
togglebutton: z.boolean().refine((val) => val === true, { message: 'ToggleButton is required.' }) consent: z.boolean().refine((val) => val === true, { message: 'Consent is mandatory.' })
}) })
), ),
code: { code: {
basic: ` basic: `
<Form v-slot="$form" :resolver="resolver" :initialValues="initialValues" @submit="onFormSubmit" class="flex flex-col gap-4"> <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"> <div class="flex flex-col items-center gap-1">
<ToggleButton name="togglebutton" class="w-24" onLabel="On" offLabel="Off" /> <ToggleButton name="consent" class="w-48" onLabel="Accept All" offLabel="Reject All" />
<Message v-if="$form.togglebutton?.invalid" severity="error">{{ $form.togglebutton.error?.message }}</Message> <Message v-if="$form.consent?.invalid" severity="error" variant="simple">{{ $form.consent.error?.message }}</Message>
</div> </div>
<Button type="submit" severity="secondary" label="Submit" /> <Button type="submit" severity="secondary" label="Submit" />
</Form> </Form>
@ -43,9 +43,9 @@ export default {
<template> <template>
<div class="card flex justify-center"> <div class="card flex justify-center">
<Form v-slot="$form" :resolver="resolver" :initialValues="initialValues" @submit="onFormSubmit" class="flex flex-col gap-4"> <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"> <div class="flex flex-col items-center gap-1">
<ToggleButton name="togglebutton" class="w-24" onLabel="On" offLabel="Off" /> <ToggleButton name="consent" class="w-48" onLabel="Accept All" offLabel="Reject All" />
<Message v-if="$form.togglebutton?.invalid" severity="error">{{ $form.togglebutton.error?.message }}</Message> <Message v-if="$form.consent?.invalid" severity="error" variant="simple">{{ $form.consent.error?.message }}</Message>
</div> </div>
<Button type="submit" severity="secondary" label="Submit" /> <Button type="submit" severity="secondary" label="Submit" />
</Form> </Form>
@ -60,11 +60,11 @@ export default {
data() { data() {
return { return {
initialValues: { initialValues: {
togglebutton: false consent: false
}, },
resolver: zodResolver( resolver: zodResolver(
z.object({ z.object({
togglebutton: z.boolean().refine((val) => val === true, { message: 'ToggleButton is required.' }) consent: z.boolean().refine((val) => val === true, { message: 'Consent is mandatory.' })
}) })
), ),
} }
@ -84,9 +84,9 @@ export default {
<template> <template>
<div class="card flex justify-center"> <div class="card flex justify-center">
<Form v-slot="$form" :resolver="resolver" :initialValues="initialValues" @submit="onFormSubmit" class="flex flex-col gap-4"> <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"> <div class="flex flex-col items-center gap-1">
<ToggleButton name="togglebutton" class="w-24" onLabel="On" offLabel="Off" /> <ToggleButton name="consent" class="w-48" onLabel="Accept All" offLabel="Reject All" />
<Message v-if="$form.togglebutton?.invalid" severity="error">{{ $form.togglebutton.error?.message }}</Message> <Message v-if="$form.consent?.invalid" severity="error" variant="simple">{{ $form.consent.error?.message }}</Message>
</div> </div>
<Button type="submit" severity="secondary" label="Submit" /> <Button type="submit" severity="secondary" label="Submit" />
</Form> </Form>
@ -101,11 +101,12 @@ import { z } from 'zod';
const toast = useToast(); const toast = useToast();
const initialValues = ref({ const initialValues = ref({
togglebutton: false consent: false
}); });
const resolver = ref(zodResolver( const resolver = ref(zodResolver(
z.object({ z.object({
togglebutton: z.boolean().refine((val) => val === true, { message: 'ToggleButton is required.' }) consent: z.boolean().refine((val) => val === true, { message: 'Consent is mandatory.' })
}) })
)); ));

38
apps/showcase/doc/toggleswitch/FormsDoc.vue
View File

@ -1,12 +1,12 @@
<template> <template>
<DocSectionText v-bind="$attrs"> <DocSectionText v-bind="$attrs">
<p>ToggleSwitch can be used with the <NuxtLink to="/forms">PrimeVue Forms</NuxtLink> library.</p> <p>ToggleSwitch integrates seamlessly with the <NuxtLink to="/forms">PrimeVue Forms</NuxtLink> library.</p>
</DocSectionText> </DocSectionText>
<div class="card flex justify-center"> <div class="card flex justify-center">
<Form v-slot="$form" :resolver="resolver" :initialValues="initialValues" @submit="onFormSubmit" class="flex flex-col gap-4"> <Form v-slot="$form" :resolver="resolver" :initialValues="initialValues" @submit="onFormSubmit" class="flex flex-col gap-4 w-48">
<div class="flex flex-col items-center gap-2"> <div class="flex flex-col items-center gap-2">
<ToggleSwitch name="toggleswitch" /> <ToggleSwitch name="activation" />
<Message v-if="$form.toggleswitch?.invalid" severity="error">{{ $form.toggleswitch.error?.message }}</Message> <Message v-if="$form.activation?.invalid" severity="error" size="small" variant="simple">{{ $form.activation.error?.message }}</Message>
</div> </div>
<Button type="submit" severity="secondary" label="Submit" /> <Button type="submit" severity="secondary" label="Submit" />
</Form> </Form>
@ -22,19 +22,19 @@ export default {
data() { data() {
return { return {
initialValues: { initialValues: {
toggleswitch: false activation: false
}, },
resolver: zodResolver( resolver: zodResolver(
z.object({ z.object({
toggleswitch: z.boolean().refine((val) => val === true, { message: 'ToggleSwitch is required.' }) activation: z.boolean().refine((val) => val === true, { message: 'Activation is required.' })
}) })
), ),
code: { code: {
basic: ` basic: `
<Form v-slot="$form" :resolver="resolver" :initialValues="initialValues" @submit="onFormSubmit" class="flex flex-col gap-4"> <Form v-slot="$form" :resolver="resolver" :initialValues="initialValues" @submit="onFormSubmit" class="flex flex-col gap-4 w-48">
<div class="flex flex-col items-center gap-2"> <div class="flex flex-col items-center gap-2">
<ToggleSwitch name="toggleswitch" /> <ToggleSwitch name="activation" />
<Message v-if="$form.toggleswitch?.invalid" severity="error">{{ $form.toggleswitch.error?.message }}</Message> <Message v-if="$form.activation?.invalid" severity="error" size="small" variant="simple">{{ $form.activation.error?.message }}</Message>
</div> </div>
<Button type="submit" severity="secondary" label="Submit" /> <Button type="submit" severity="secondary" label="Submit" />
</Form> </Form>
@ -42,10 +42,10 @@ export default {
options: ` options: `
<template> <template>
<div class="card flex justify-center"> <div class="card flex justify-center">
<Form v-slot="$form" :resolver="resolver" :initialValues="initialValues" @submit="onFormSubmit" class="flex flex-col gap-4"> <Form v-slot="$form" :resolver="resolver" :initialValues="initialValues" @submit="onFormSubmit" class="flex flex-col gap-4 w-48">
<div class="flex flex-col items-center gap-2"> <div class="flex flex-col items-center gap-2">
<ToggleSwitch name="toggleswitch" /> <ToggleSwitch name="activation" />
<Message v-if="$form.toggleswitch?.invalid" severity="error">{{ $form.toggleswitch.error?.message }}</Message> <Message v-if="$form.activation?.invalid" severity="error" size="small" variant="simple">{{ $form.activation.error?.message }}</Message>
</div> </div>
<Button type="submit" severity="secondary" label="Submit" /> <Button type="submit" severity="secondary" label="Submit" />
</Form> </Form>
@ -60,11 +60,11 @@ export default {
data() { data() {
return { return {
initialValues: { initialValues: {
toggleswitch: false activation: false
}, },
resolver: zodResolver( resolver: zodResolver(
z.object({ z.object({
toggleswitch: z.boolean().refine((val) => val === true, { message: 'ToggleSwitch is required.' }) activation: z.boolean().refine((val) => val === true, { message: 'Activation is required.' })
}) })
), ),
} }
@ -83,10 +83,10 @@ export default {
composition: ` composition: `
<template> <template>
<div class="card flex justify-center"> <div class="card flex justify-center">
<Form v-slot="$form" :resolver="resolver" :initialValues="initialValues" @submit="onFormSubmit" class="flex flex-col gap-4"> <Form v-slot="$form" :resolver="resolver" :initialValues="initialValues" @submit="onFormSubmit" class="flex flex-col gap-4 w-48">
<div class="flex flex-col items-center gap-2"> <div class="flex flex-col items-center gap-2">
<ToggleSwitch name="toggleswitch" /> <ToggleSwitch name="activation" />
<Message v-if="$form.toggleswitch?.invalid" severity="error">{{ $form.toggleswitch.error?.message }}</Message> <Message v-if="$form.activation?.invalid" severity="error" size="small" variant="simple">{{ $form.activation.error?.message }}</Message>
</div> </div>
<Button type="submit" severity="secondary" label="Submit" /> <Button type="submit" severity="secondary" label="Submit" />
</Form> </Form>
@ -101,11 +101,11 @@ import { z } from 'zod';
const toast = useToast(); const toast = useToast();
const initialValues = ref({ const initialValues = ref({
toggleswitch: false activation: false
}); });
const resolver = ref(zodResolver( const resolver = ref(zodResolver(
z.object({ z.object({
toggleswitch: z.boolean().refine((val) => val === true, { message: 'ToggleSwitch is required.' }) activation: z.boolean().refine((val) => val === true, { message: 'Activation is required.' })
}) })
)); ));
<\/script> <\/script>

22
apps/showcase/doc/treeselect/FormsDoc.vue
View File

@ -4,9 +4,9 @@
</DocSectionText> </DocSectionText>
<div class="card flex justify-center"> <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-80"> <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"> <div class="flex flex-col gap-1">
<TreeSelect name="node" :options="nodes" placeholder="Select Item" fluid /> <TreeSelect name="node" :options="nodes" placeholder="Select Item" fluid />
<Message v-if="$form.node?.invalid" severity="error">{{ $form.node.error?.message }}</Message> <Message v-if="$form.node?.invalid" severity="error" size="small" variant="simple">{{ $form.node.error?.message }}</Message>
</div> </div>
<Button type="submit" severity="secondary" label="Submit" /> <Button type="submit" severity="secondary" label="Submit" />
</Form> </Form>
@ -27,16 +27,16 @@ export default {
}, },
resolver: zodResolver( resolver: zodResolver(
z.object({ z.object({
node: z.union([z.record(z.boolean()), z.literal(null)]).refine((obj) => obj !== null && Object.keys(obj).length > 0, { message: 'TreeSelect is required.' }) node: z.union([z.record(z.boolean()), z.literal(null)]).refine((obj) => obj !== null && Object.keys(obj).length > 0, { message: 'Selection is required.' })
}) })
), ),
nodes: null, nodes: null,
code: { code: {
basic: ` basic: `
<Form v-slot="$form" :resolver="resolver" :initialValues="initialValues" @submit="onFormSubmit" class="flex flex-col gap-4 w-full md:w-80"> <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"> <div class="flex flex-col gap-1">
<TreeSelect name="node" :options="nodes" placeholder="Select Item" fluid /> <TreeSelect name="node" :options="nodes" placeholder="Select Item" fluid />
<Message v-if="$form.node?.invalid" severity="error">{{ $form.node.error?.message }}</Message> <Message v-if="$form.node?.invalid" severity="error" size="small" variant="simple">{{ $form.node.error?.message }}</Message>
</div> </div>
<Button type="submit" severity="secondary" label="Submit" /> <Button type="submit" severity="secondary" label="Submit" />
</Form> </Form>
@ -45,9 +45,9 @@ export default {
<template> <template>
<div class="card flex justify-center"> <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-80"> <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"> <div class="flex flex-col gap-1">
<TreeSelect name="node" :options="nodes" placeholder="Select Item" fluid /> <TreeSelect name="node" :options="nodes" placeholder="Select Item" fluid />
<Message v-if="$form.node?.invalid" severity="error">{{ $form.node.error?.message }}</Message> <Message v-if="$form.node?.invalid" severity="error" size="small" variant="simple">{{ $form.node.error?.message }}</Message>
</div> </div>
<Button type="submit" severity="secondary" label="Submit" /> <Button type="submit" severity="secondary" label="Submit" />
</Form> </Form>
@ -67,7 +67,7 @@ export default {
}, },
resolver: zodResolver( resolver: zodResolver(
z.object({ z.object({
node: z.union([z.record(z.boolean()), z.literal(null)]).refine((obj) => obj !== null && Object.keys(obj).length > 0, { message: 'TreeSelect is required.' }) node: z.union([z.record(z.boolean()), z.literal(null)]).refine((obj) => obj !== null && Object.keys(obj).length > 0, { message: 'Selection is required.' })
}) })
), ),
nodes: null, nodes: null,
@ -88,9 +88,9 @@ export default {
<template> <template>
<div class="card flex justify-center"> <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-80"> <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"> <div class="flex flex-col gap-1">
<TreeSelect name="node" :options="nodes" placeholder="Select Item" fluid /> <TreeSelect name="node" :options="nodes" placeholder="Select Item" fluid />
<Message v-if="$form.node?.invalid" severity="error">{{ $form.node.error?.message }}</Message> <Message v-if="$form.node?.invalid" severity="error" size="small" variant="simple">{{ $form.node.error?.message }}</Message>
</div> </div>
<Button type="submit" severity="secondary" label="Submit" /> <Button type="submit" severity="secondary" label="Submit" />
</Form> </Form>
@ -110,7 +110,7 @@ const initialValues = ref({
}); });
const resolver = ref(zodResolver( const resolver = ref(zodResolver(
z.object({ z.object({
node: z.union([z.record(z.boolean()), z.literal(null)]).refine((obj) => obj !== null && Object.keys(obj).length > 0, { message: 'TreeSelect is required.' }) node: z.union([z.record(z.boolean()), z.literal(null)]).refine((obj) => obj !== null && Object.keys(obj).length > 0, { message: 'Selection is required.' })
}) })
)); ));