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

Merge branch 'master' of https://github.com/primefaces/primevue

pull/6687/head
tugcekucukoglu 2024-10-30 13:48:33 +03:00
parent e815beb735 3ed2703cab
commit 48fdbb4356
26 changed files with 422 additions and 421 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.'

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

@ -1,10 +1,11 @@
<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">
<RadioButtonGroup name="ingredient" class="flex flex-wrap gap-4">
<div class="flex items-center gap-2"> <div class="flex items-center gap-2">
<RadioButton inputId="cheese" value="Cheese" /> <RadioButton inputId="cheese" value="Cheese" />
<label for="cheese">Cheese</label> <label for="cheese">Cheese</label>
@ -22,7 +23,8 @@
<label for="onion">Onion</label> <label for="onion">Onion</label>
</div> </div>
</RadioButtonGroup> </RadioButtonGroup>
<Message v-if="$form.radiobutton?.invalid" severity="error" icon="pi pi-times-circle">{{ $form.radiobutton.error?.message }}</Message> <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,17 +39,18 @@ 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">
<RadioButtonGroup name="ingredient" class="flex flex-wrap gap-4">
<div class="flex items-center gap-2"> <div class="flex items-center gap-2">
<RadioButton inputId="cheese" value="Cheese" /> <RadioButton inputId="cheese" value="Cheese" />
<label for="cheese">Cheese</label> <label for="cheese">Cheese</label>
@ -65,7 +68,8 @@ export default {
<label for="onion">Onion</label> <label for="onion">Onion</label>
</div> </div>
</RadioButtonGroup> </RadioButtonGroup>
<Message v-if="$form.radiobutton?.invalid" severity="error" icon="pi pi-times-circle">{{ $form.radiobutton.error?.message }}</Message> <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,7 +77,8 @@ 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">
<RadioButtonGroup name="ingredient" class="flex flex-wrap gap-4">
<div class="flex items-center gap-2"> <div class="flex items-center gap-2">
<RadioButton inputId="cheese" value="Cheese" /> <RadioButton inputId="cheese" value="Cheese" />
<label for="cheese">Cheese</label> <label for="cheese">Cheese</label>
@ -91,7 +96,8 @@ export default {
<label for="onion">Onion</label> <label for="onion">Onion</label>
</div> </div>
</RadioButtonGroup> </RadioButtonGroup>
<Message v-if="$form.radiobutton?.invalid" severity="error" icon="pi pi-times-circle">{{ $form.radiobutton.error?.message }}</Message> <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,7 +135,8 @@ 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">
<RadioButtonGroup name="ingredient" class="flex flex-wrap gap-4">
<div class="flex items-center gap-2"> <div class="flex items-center gap-2">
<RadioButton inputId="cheese" value="Cheese" /> <RadioButton inputId="cheese" value="Cheese" />
<label for="cheese">Cheese</label> <label for="cheese">Cheese</label>
@ -147,7 +154,8 @@ export default {
<label for="onion">Onion</label> <label for="onion">Onion</label>
</div> </div>
</RadioButtonGroup> </RadioButtonGroup>
<Message v-if="$form.radiobutton?.invalid" severity="error" icon="pi pi-times-circle">{{ $form.radiobutton.error?.message }}</Message> <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.' })
}) })
)); ));

3
apps/showcase/nuxt.config.js
View File

@ -58,9 +58,6 @@ export default defineNuxtConfig({
app: { app: {
baseURL: baseUrl, baseURL: baseUrl,
head: { head: {
htmlAttrs: {
dir: 'rtl'
},
title: 'PrimeVue - Vue UI Component Library', title: 'PrimeVue - Vue UI Component Library',
meta: [ meta: [
{ charset: 'utf-8' }, { charset: 'utf-8' },

31
pnpm-lock.yaml
View File

@ -234,7 +234,7 @@ importers:
devDependencies: devDependencies:
'@nuxt/devtools': '@nuxt/devtools':
specifier: ^0.8.5 specifier: ^0.8.5
version: 0.8.5(nuxt@3.3.2(@types/node@18.19.61)(encoding@0.1.13)(eslint@8.57.1)(ioredis@5.4.1)(magicast@0.3.5)(optionator@0.9.4)(rollup@4.24.3)(terser@5.36.0)(typescript@5.6.3))(rollup@4.24.3)(vite@5.4.10(@types/node@18.19.61)(terser@5.36.0)) version: 0.8.5(nuxt@3.3.2(@types/node@18.19.61)(encoding@0.1.13)(eslint@8.57.1)(ioredis@5.4.1)(magicast@0.3.5)(optionator@0.9.4)(rollup@4.24.3)(terser@5.36.0)(typescript@5.6.3))(rollup@4.24.3)
'@nuxt/eslint-config': '@nuxt/eslint-config':
specifier: ^0.2.0 specifier: ^0.2.0
version: 0.2.0(eslint@8.57.1) version: 0.2.0(eslint@8.57.1)
@ -246,7 +246,7 @@ importers:
version: 3.13.2(rollup@4.24.3) version: 3.13.2(rollup@4.24.3)
'@nuxt/test-utils': '@nuxt/test-utils':
specifier: ^3.7.3 specifier: ^3.7.3
version: 3.14.4(@vue/test-utils@2.4.6)(h3@1.13.0)(magicast@0.3.5)(nitropack@2.9.7(encoding@0.1.13)(magicast@0.3.5))(rollup@4.24.3)(vite@5.4.10(@types/node@18.19.61)(terser@5.36.0))(vitest@1.6.0(@types/node@18.19.61)(terser@5.36.0))(vue-router@4.4.5(vue@3.5.12(typescript@5.6.3)))(vue@3.5.12(typescript@5.6.3)) version: 3.14.4(@vue/test-utils@2.4.6)(h3@1.13.0)(magicast@0.3.5)(nitropack@2.9.7(encoding@0.1.13)(magicast@0.3.5))(rollup@4.24.3)(vitest@1.6.0(@types/node@18.19.61)(terser@5.36.0))(vue-router@4.4.5(vue@3.5.12(typescript@5.6.3)))(vue@3.5.12(typescript@5.6.3))
'@primevue/themes': '@primevue/themes':
specifier: workspace:* specifier: workspace:*
version: link:../themes version: link:../themes
@ -8315,13 +8315,12 @@ snapshots:
'@nuxt/devalue@2.0.2': {} '@nuxt/devalue@2.0.2': {}
'@nuxt/devtools-kit@0.8.5(magicast@0.3.5)(nuxt@3.3.2(@types/node@18.19.61)(encoding@0.1.13)(eslint@8.57.1)(ioredis@5.4.1)(magicast@0.3.5)(optionator@0.9.4)(rollup@4.24.3)(terser@5.36.0)(typescript@5.6.3))(rollup@4.24.3)(vite@5.4.10(@types/node@18.19.61)(terser@5.36.0))': '@nuxt/devtools-kit@0.8.5(magicast@0.3.5)(nuxt@3.3.2(@types/node@18.19.61)(encoding@0.1.13)(eslint@8.57.1)(ioredis@5.4.1)(magicast@0.3.5)(optionator@0.9.4)(rollup@4.24.3)(terser@5.36.0)(typescript@5.6.3))(rollup@4.24.3)':
dependencies: dependencies:
'@nuxt/kit': 3.13.2(magicast@0.3.5)(rollup@4.24.3) '@nuxt/kit': 3.13.2(magicast@0.3.5)(rollup@4.24.3)
'@nuxt/schema': 3.13.2(rollup@4.24.3) '@nuxt/schema': 3.13.2(rollup@4.24.3)
execa: 7.2.0 execa: 7.2.0
nuxt: 3.3.2(@types/node@18.19.61)(encoding@0.1.13)(eslint@8.57.1)(ioredis@5.4.1)(magicast@0.3.5)(optionator@0.9.4)(rollup@4.24.3)(terser@5.36.0)(typescript@5.6.3) nuxt: 3.3.2(@types/node@18.19.61)(encoding@0.1.13)(eslint@8.57.1)(ioredis@5.4.1)(magicast@0.3.5)(optionator@0.9.4)(rollup@4.24.3)(terser@5.36.0)(typescript@5.6.3)
vite: 5.4.10(@types/node@18.19.61)(terser@5.36.0)
transitivePeerDependencies: transitivePeerDependencies:
- magicast - magicast
- rollup - rollup
@ -8341,10 +8340,10 @@ snapshots:
rc9: 2.1.2 rc9: 2.1.2
semver: 7.6.3 semver: 7.6.3
'@nuxt/devtools@0.8.5(nuxt@3.3.2(@types/node@18.19.61)(encoding@0.1.13)(eslint@8.57.1)(ioredis@5.4.1)(magicast@0.3.5)(optionator@0.9.4)(rollup@4.24.3)(terser@5.36.0)(typescript@5.6.3))(rollup@4.24.3)(vite@5.4.10(@types/node@18.19.61)(terser@5.36.0))': '@nuxt/devtools@0.8.5(nuxt@3.3.2(@types/node@18.19.61)(encoding@0.1.13)(eslint@8.57.1)(ioredis@5.4.1)(magicast@0.3.5)(optionator@0.9.4)(rollup@4.24.3)(terser@5.36.0)(typescript@5.6.3))(rollup@4.24.3)':
dependencies: dependencies:
'@antfu/utils': 0.7.10 '@antfu/utils': 0.7.10
'@nuxt/devtools-kit': 0.8.5(magicast@0.3.5)(nuxt@3.3.2(@types/node@18.19.61)(encoding@0.1.13)(eslint@8.57.1)(ioredis@5.4.1)(magicast@0.3.5)(optionator@0.9.4)(rollup@4.24.3)(terser@5.36.0)(typescript@5.6.3))(rollup@4.24.3)(vite@5.4.10(@types/node@18.19.61)(terser@5.36.0)) '@nuxt/devtools-kit': 0.8.5(magicast@0.3.5)(nuxt@3.3.2(@types/node@18.19.61)(encoding@0.1.13)(eslint@8.57.1)(ioredis@5.4.1)(magicast@0.3.5)(optionator@0.9.4)(rollup@4.24.3)(terser@5.36.0)(typescript@5.6.3))(rollup@4.24.3)
'@nuxt/devtools-wizard': 0.8.5 '@nuxt/devtools-wizard': 0.8.5
'@nuxt/kit': 3.13.2(magicast@0.3.5)(rollup@4.24.3) '@nuxt/kit': 3.13.2(magicast@0.3.5)(rollup@4.24.3)
birpc: 0.2.19 birpc: 0.2.19
@ -8375,9 +8374,8 @@ snapshots:
simple-git: 3.27.0 simple-git: 3.27.0
sirv: 2.0.4 sirv: 2.0.4
unimport: 3.13.1(rollup@4.24.3) unimport: 3.13.1(rollup@4.24.3)
vite: 5.4.10(@types/node@18.19.61)(terser@5.36.0) vite-plugin-inspect: 0.7.42(@nuxt/kit@3.13.2(magicast@0.3.5)(rollup@4.24.3))(rollup@4.24.3)
vite-plugin-inspect: 0.7.42(@nuxt/kit@3.13.2(magicast@0.3.5)(rollup@4.24.3))(rollup@4.24.3)(vite@5.4.10(@types/node@18.19.61)(terser@5.36.0)) vite-plugin-vue-inspector: 3.7.2
vite-plugin-vue-inspector: 3.7.2(vite@5.4.10(@types/node@18.19.61)(terser@5.36.0))
wait-on: 7.2.0 wait-on: 7.2.0
which: 3.0.1 which: 3.0.1
ws: 8.18.0 ws: 8.18.0
@ -8687,7 +8685,7 @@ snapshots:
- supports-color - supports-color
- webpack-sources - webpack-sources
'@nuxt/test-utils@3.14.4(@vue/test-utils@2.4.6)(h3@1.13.0)(magicast@0.3.5)(nitropack@2.9.7(encoding@0.1.13)(magicast@0.3.5))(rollup@4.24.3)(vite@5.4.10(@types/node@18.19.61)(terser@5.36.0))(vitest@1.6.0(@types/node@18.19.61)(terser@5.36.0))(vue-router@4.4.5(vue@3.5.12(typescript@5.6.3)))(vue@3.5.12(typescript@5.6.3))': '@nuxt/test-utils@3.14.4(@vue/test-utils@2.4.6)(h3@1.13.0)(magicast@0.3.5)(nitropack@2.9.7(encoding@0.1.13)(magicast@0.3.5))(rollup@4.24.3)(vitest@1.6.0(@types/node@18.19.61)(terser@5.36.0))(vue-router@4.4.5(vue@3.5.12(typescript@5.6.3)))(vue@3.5.12(typescript@5.6.3))':
dependencies: dependencies:
'@nuxt/kit': 3.13.2(magicast@0.3.5)(rollup@4.24.3) '@nuxt/kit': 3.13.2(magicast@0.3.5)(rollup@4.24.3)
'@nuxt/schema': 3.13.2(rollup@4.24.3) '@nuxt/schema': 3.13.2(rollup@4.24.3)
@ -8713,8 +8711,7 @@ snapshots:
ufo: 1.5.4 ufo: 1.5.4
unenv: 1.10.0 unenv: 1.10.0
unplugin: 1.15.0(webpack-sources@3.2.3) unplugin: 1.15.0(webpack-sources@3.2.3)
vite: 5.4.10(@types/node@18.19.61)(terser@5.36.0) vitest-environment-nuxt: 1.0.1(@vue/test-utils@2.4.6)(h3@1.13.0)(magicast@0.3.5)(nitropack@2.9.7(encoding@0.1.13)(magicast@0.3.5))(rollup@4.24.3)(vitest@1.6.0(@types/node@18.19.61)(terser@5.36.0))(vue-router@4.4.5(vue@3.5.12(typescript@5.6.3)))(vue@3.5.12(typescript@5.6.3))
vitest-environment-nuxt: 1.0.1(@vue/test-utils@2.4.6)(h3@1.13.0)(magicast@0.3.5)(nitropack@2.9.7(encoding@0.1.13)(magicast@0.3.5))(rollup@4.24.3)(vite@5.4.10(@types/node@18.19.61)(terser@5.36.0))(vitest@1.6.0(@types/node@18.19.61)(terser@5.36.0))(vue-router@4.4.5(vue@3.5.12(typescript@5.6.3)))(vue@3.5.12(typescript@5.6.3))
vue: 3.5.12(typescript@5.6.3) vue: 3.5.12(typescript@5.6.3)
vue-router: 4.4.5(vue@3.5.12(typescript@5.6.3)) vue-router: 4.4.5(vue@3.5.12(typescript@5.6.3))
optionalDependencies: optionalDependencies:
@ -14234,7 +14231,7 @@ snapshots:
optionator: 0.9.4 optionator: 0.9.4
typescript: 5.6.3 typescript: 5.6.3
vite-plugin-inspect@0.7.42(@nuxt/kit@3.13.2(magicast@0.3.5)(rollup@4.24.3))(rollup@4.24.3)(vite@5.4.10(@types/node@18.19.61)(terser@5.36.0)): vite-plugin-inspect@0.7.42(@nuxt/kit@3.13.2(magicast@0.3.5)(rollup@4.24.3))(rollup@4.24.3):
dependencies: dependencies:
'@antfu/utils': 0.7.10 '@antfu/utils': 0.7.10
'@rollup/pluginutils': 5.1.3(rollup@4.24.3) '@rollup/pluginutils': 5.1.3(rollup@4.24.3)
@ -14244,14 +14241,13 @@ snapshots:
open: 9.1.0 open: 9.1.0
picocolors: 1.1.1 picocolors: 1.1.1
sirv: 2.0.4 sirv: 2.0.4
vite: 5.4.10(@types/node@18.19.61)(terser@5.36.0)
optionalDependencies: optionalDependencies:
'@nuxt/kit': 3.13.2(magicast@0.3.5)(rollup@4.24.3) '@nuxt/kit': 3.13.2(magicast@0.3.5)(rollup@4.24.3)
transitivePeerDependencies: transitivePeerDependencies:
- rollup - rollup
- supports-color - supports-color
vite-plugin-vue-inspector@3.7.2(vite@5.4.10(@types/node@18.19.61)(terser@5.36.0)): vite-plugin-vue-inspector@3.7.2:
dependencies: dependencies:
'@babel/core': 7.26.0 '@babel/core': 7.26.0
'@babel/plugin-proposal-decorators': 7.25.9(@babel/core@7.26.0) '@babel/plugin-proposal-decorators': 7.25.9(@babel/core@7.26.0)
@ -14262,7 +14258,6 @@ snapshots:
'@vue/compiler-dom': 3.5.12 '@vue/compiler-dom': 3.5.12
kolorist: 1.8.0 kolorist: 1.8.0
magic-string: 0.30.12 magic-string: 0.30.12
vite: 5.4.10(@types/node@18.19.61)(terser@5.36.0)
transitivePeerDependencies: transitivePeerDependencies:
- supports-color - supports-color
@ -14299,9 +14294,9 @@ snapshots:
fsevents: 2.3.3 fsevents: 2.3.3
terser: 5.36.0 terser: 5.36.0
vitest-environment-nuxt@1.0.1(@vue/test-utils@2.4.6)(h3@1.13.0)(magicast@0.3.5)(nitropack@2.9.7(encoding@0.1.13)(magicast@0.3.5))(rollup@4.24.3)(vite@5.4.10(@types/node@18.19.61)(terser@5.36.0))(vitest@1.6.0(@types/node@18.19.61)(terser@5.36.0))(vue-router@4.4.5(vue@3.5.12(typescript@5.6.3)))(vue@3.5.12(typescript@5.6.3)): vitest-environment-nuxt@1.0.1(@vue/test-utils@2.4.6)(h3@1.13.0)(magicast@0.3.5)(nitropack@2.9.7(encoding@0.1.13)(magicast@0.3.5))(rollup@4.24.3)(vitest@1.6.0(@types/node@18.19.61)(terser@5.36.0))(vue-router@4.4.5(vue@3.5.12(typescript@5.6.3)))(vue@3.5.12(typescript@5.6.3)):
dependencies: dependencies:
'@nuxt/test-utils': 3.14.4(@vue/test-utils@2.4.6)(h3@1.13.0)(magicast@0.3.5)(nitropack@2.9.7(encoding@0.1.13)(magicast@0.3.5))(rollup@4.24.3)(vite@5.4.10(@types/node@18.19.61)(terser@5.36.0))(vitest@1.6.0(@types/node@18.19.61)(terser@5.36.0))(vue-router@4.4.5(vue@3.5.12(typescript@5.6.3)))(vue@3.5.12(typescript@5.6.3)) '@nuxt/test-utils': 3.14.4(@vue/test-utils@2.4.6)(h3@1.13.0)(magicast@0.3.5)(nitropack@2.9.7(encoding@0.1.13)(magicast@0.3.5))(rollup@4.24.3)(vitest@1.6.0(@types/node@18.19.61)(terser@5.36.0))(vue-router@4.4.5(vue@3.5.12(typescript@5.6.3)))(vue@3.5.12(typescript@5.6.3))
transitivePeerDependencies: transitivePeerDependencies:
- '@cucumber/cucumber' - '@cucumber/cucumber'
- '@jest/globals' - '@jest/globals'