Update per component form samples
Cagatay Civici
parent
c541686cd6
commit
5c8f170048
|
|
@ -1,6 +1,6 @@
|
|||
<template>
|
||||
<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>
|
||||
<div class="card flex justify-center">
|
||||
<AutoComplete v-model="value" :suggestions="items" @complete="search" />
|
||||
|
|
|
|||
|
|
@ -1,12 +1,12 @@
|
|||
<template>
|
||||
<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>
|
||||
<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">
|
||||
<div class="flex flex-col gap-2">
|
||||
<div class="flex flex-col gap-1">
|
||||
<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>
|
||||
<Button type="submit" severity="secondary" label="Submit" />
|
||||
</Form>
|
||||
|
|
@ -31,18 +31,18 @@ export default {
|
|||
z.object({
|
||||
country: z.union([
|
||||
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: {
|
||||
basic: `
|
||||
<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" />
|
||||
<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>
|
||||
<Button type="submit" severity="secondary" label="Submit" />
|
||||
</Form>
|
||||
|
|
@ -51,9 +51,9 @@ export default {
|
|||
<template>
|
||||
<div class="card flex justify-center">
|
||||
<Form v-slot="$form" :resolver="resolver" :initialValues="initialValues" @submit="onFormSubmit" class="flex justify-center flex-col gap-4 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" />
|
||||
<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>
|
||||
<Button type="submit" severity="secondary" label="Submit" />
|
||||
</Form>
|
||||
|
|
@ -78,9 +78,9 @@ export default {
|
|||
z.object({
|
||||
country: z.union([
|
||||
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>
|
||||
<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">
|
||||
<div class="flex flex-col gap-2">
|
||||
<div class="flex flex-col gap-1">
|
||||
<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>
|
||||
<Button type="submit" severity="secondary" label="Submit" />
|
||||
</Form>
|
||||
|
|
@ -139,14 +139,13 @@ onMounted(() => {
|
|||
const initialValues = ref({
|
||||
country: { name: '' }
|
||||
});
|
||||
const resolver = ref(
|
||||
zodResolver(
|
||||
const resolver = ref(zodResolver(
|
||||
z.object({
|
||||
country: z.union([
|
||||
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.' })
|
||||
])
|
||||
})
|
||||
));
|
||||
|
|
|
|||
|
|
@ -1,12 +1,12 @@
|
|||
<template>
|
||||
<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>
|
||||
<div class="card flex justify-center">
|
||||
<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" />
|
||||
<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>
|
||||
<Button type="submit" severity="secondary" label="Submit" />
|
||||
</Form>
|
||||
|
|
@ -28,9 +28,9 @@ export default {
|
|||
z.object({
|
||||
city: z.union([
|
||||
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: {
|
||||
basic: `
|
||||
<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" />
|
||||
<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>
|
||||
<Button type="submit" severity="secondary" label="Submit" />
|
||||
</Form>
|
||||
|
|
@ -122,9 +122,9 @@ export default {
|
|||
<template>
|
||||
<div class="card flex justify-center">
|
||||
<Form v-slot="$form" :resolver="resolver" :initialValues="initialValues" @submit="onFormSubmit" class="flex justify-center flex-col gap-4">
|
||||
<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" />
|
||||
<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>
|
||||
<Button type="submit" severity="secondary" label="Submit" />
|
||||
</Form>
|
||||
|
|
@ -236,9 +236,9 @@ export default {
|
|||
<template>
|
||||
<div class="card flex justify-center">
|
||||
<Form v-slot="$form" :resolver="resolver" :initialValues="initialValues" @submit="onFormSubmit" class="flex justify-center flex-col gap-4">
|
||||
<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" />
|
||||
<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>
|
||||
<Button type="submit" severity="secondary" label="Submit" />
|
||||
</Form>
|
||||
|
|
@ -256,6 +256,7 @@ const toast = useToast();
|
|||
const initialValues = ref({
|
||||
city: null
|
||||
});
|
||||
|
||||
const resolver = ref(zodResolver(
|
||||
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([
|
||||
{
|
||||
name: 'Australia',
|
||||
|
|
|
|||
|
|
@ -1,11 +1,11 @@
|
|||
<template>
|
||||
<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>
|
||||
<div class="card flex justify-center">
|
||||
<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">
|
||||
<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">
|
||||
<Checkbox inputId="cheese" value="Cheese" />
|
||||
<label for="cheese"> Cheese </label>
|
||||
|
|
@ -23,8 +23,7 @@
|
|||
<label for="onion"> Onion </label>
|
||||
</div>
|
||||
</CheckboxGroup>
|
||||
|
||||
<Message v-if="$form.checkbox?.invalid" severity="error">{{ $form.checkbox.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" />
|
||||
</Form>
|
||||
|
|
@ -40,18 +39,18 @@ export default {
|
|||
data() {
|
||||
return {
|
||||
initialValues: {
|
||||
checkbox: []
|
||||
ingredient: []
|
||||
},
|
||||
resolver: zodResolver(
|
||||
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: {
|
||||
basic: `
|
||||
<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">
|
||||
<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">
|
||||
<Checkbox inputId="cheese" value="Cheese" />
|
||||
<label for="cheese"> Cheese </label>
|
||||
|
|
@ -69,8 +68,7 @@ export default {
|
|||
<label for="onion"> Onion </label>
|
||||
</div>
|
||||
</CheckboxGroup>
|
||||
|
||||
<Message v-if="$form.checkbox?.invalid" severity="error">{{ $form.checkbox.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" />
|
||||
</Form>
|
||||
|
|
@ -80,7 +78,7 @@ export default {
|
|||
<div class="card flex justify-center">
|
||||
<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">
|
||||
<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">
|
||||
<Checkbox inputId="cheese" value="Cheese" />
|
||||
<label for="cheese"> Cheese </label>
|
||||
|
|
@ -98,8 +96,7 @@ export default {
|
|||
<label for="onion"> Onion </label>
|
||||
</div>
|
||||
</CheckboxGroup>
|
||||
|
||||
<Message v-if="$form.checkbox?.invalid" severity="error">{{ $form.checkbox.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" />
|
||||
</Form>
|
||||
|
|
@ -115,11 +112,11 @@ export default {
|
|||
data() {
|
||||
return {
|
||||
initialValues: {
|
||||
checkbox: []
|
||||
ingredient: []
|
||||
},
|
||||
resolver: zodResolver(
|
||||
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">
|
||||
<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">
|
||||
<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">
|
||||
<Checkbox inputId="cheese" value="Cheese" />
|
||||
<label for="cheese"> Cheese </label>
|
||||
|
|
@ -158,8 +155,7 @@ export default {
|
|||
<label for="onion"> Onion </label>
|
||||
</div>
|
||||
</CheckboxGroup>
|
||||
|
||||
<Message v-if="$form.checkbox?.invalid" severity="error">{{ $form.checkbox.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" />
|
||||
</Form>
|
||||
|
|
@ -175,11 +171,11 @@ import { z } from 'zod';
|
|||
|
||||
const toast = useToast();
|
||||
const initialValues = ref({
|
||||
checkbox: []
|
||||
ingredient: []
|
||||
});
|
||||
const resolver = ref(zodResolver(
|
||||
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.' })
|
||||
})
|
||||
));
|
||||
|
||||
|
|
|
|||
|
|
@ -1,12 +1,12 @@
|
|||
<template>
|
||||
<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>
|
||||
<div class="card flex justify-center">
|
||||
<Form v-slot="$form" :resolver="resolver" :initialValues="initialValues" @submit="onFormSubmit" class="flex flex-col gap-4">
|
||||
<div class="flex flex-col items-center gap-2">
|
||||
<ColorPicker name="colorpicker" />
|
||||
<Message v-if="$form.colorpicker?.invalid" severity="error">{{ $form.colorpicker.error?.message }}</Message>
|
||||
<ColorPicker name="color" />
|
||||
<Message v-if="$form.color?.invalid" severity="error" size="small" variant="simple">{{ $form.color.error?.message }}</Message>
|
||||
</div>
|
||||
<Button type="submit" severity="secondary" label="Submit" />
|
||||
</Form>
|
||||
|
|
@ -22,19 +22,19 @@ export default {
|
|||
data() {
|
||||
return {
|
||||
initialValues: {
|
||||
colorpicker: null
|
||||
color: null
|
||||
},
|
||||
resolver: zodResolver(
|
||||
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: {
|
||||
basic: `
|
||||
<Form v-slot="$form" :resolver="resolver" :initialValues="initialValues" @submit="onFormSubmit" class="flex flex-col gap-4">
|
||||
<div class="flex flex-col items-center gap-2">
|
||||
<ColorPicker name="colorpicker" />
|
||||
<Message v-if="$form.colorpicker?.invalid" severity="error">{{ $form.colorpicker.error?.message }}</Message>
|
||||
<ColorPicker name="color" />
|
||||
<Message v-if="$form.color?.invalid" severity="error" size="small" variant="simple">{{ $form.color.error?.message }}</Message>
|
||||
</div>
|
||||
<Button type="submit" severity="secondary" label="Submit" />
|
||||
</Form>
|
||||
|
|
@ -44,8 +44,8 @@ export default {
|
|||
<div class="card flex justify-center">
|
||||
<Form v-slot="$form" :resolver="resolver" :initialValues="initialValues" @submit="onFormSubmit" class="flex flex-col gap-4">
|
||||
<div class="flex flex-col items-center gap-2">
|
||||
<ColorPicker name="colorpicker" />
|
||||
<Message v-if="$form.colorpicker?.invalid" severity="error">{{ $form.colorpicker.error?.message }}</Message>
|
||||
<ColorPicker name="color" />
|
||||
<Message v-if="$form.color?.invalid" severity="error" size="small" variant="simple">{{ $form.color.error?.message }}</Message>
|
||||
</div>
|
||||
<Button type="submit" severity="secondary" label="Submit" />
|
||||
</Form>
|
||||
|
|
@ -60,11 +60,11 @@ export default {
|
|||
data() {
|
||||
return {
|
||||
initialValues: {
|
||||
colorpicker: null
|
||||
color: null
|
||||
},
|
||||
resolver: zodResolver(
|
||||
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">
|
||||
<Form v-slot="$form" :resolver="resolver" :initialValues="initialValues" @submit="onFormSubmit" class="flex flex-col gap-4">
|
||||
<div class="flex flex-col items-center gap-2">
|
||||
<ColorPicker name="colorpicker" />
|
||||
<Message v-if="$form.colorpicker?.invalid" severity="error">{{ $form.colorpicker.error?.message }}</Message>
|
||||
<ColorPicker name="color" />
|
||||
<Message v-if="$form.color?.invalid" severity="error" size="small" variant="simple">{{ $form.color.error?.message }}</Message>
|
||||
</div>
|
||||
<Button type="submit" severity="secondary" label="Submit" />
|
||||
</Form>
|
||||
|
|
@ -101,11 +101,11 @@ import { z } from 'zod';
|
|||
|
||||
const toast = useToast();
|
||||
const initialValues = ref({
|
||||
colorpicker: null
|
||||
color: null
|
||||
});
|
||||
const resolver = ref(zodResolver(
|
||||
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.' })
|
||||
})
|
||||
));
|
||||
|
||||
|
|
|
|||
|
|
@ -1,12 +1,12 @@
|
|||
<template>
|
||||
<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>
|
||||
<div class="card flex justify-center">
|
||||
<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 />
|
||||
<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>
|
||||
<Button type="submit" severity="secondary" label="Submit" />
|
||||
</Form>
|
||||
|
|
@ -38,9 +38,9 @@ export default {
|
|||
code: {
|
||||
basic: `
|
||||
<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 />
|
||||
<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>
|
||||
<Button type="submit" severity="secondary" label="Submit" />
|
||||
</Form>
|
||||
|
|
@ -49,9 +49,9 @@ export default {
|
|||
<template>
|
||||
<div class="card flex justify-center">
|
||||
<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 />
|
||||
<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>
|
||||
<Button type="submit" severity="secondary" label="Submit" />
|
||||
</Form>
|
||||
|
|
@ -96,9 +96,9 @@ export default {
|
|||
<template>
|
||||
<div class="card flex justify-center">
|
||||
<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 />
|
||||
<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>
|
||||
<Button type="submit" severity="secondary" label="Submit" />
|
||||
</Form>
|
||||
|
|
|
|||
|
|
@ -1,12 +1,12 @@
|
|||
<template>
|
||||
<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>
|
||||
<div class="card">
|
||||
<Form v-slot="$form" :resolver="resolver" :initialValues="initialValues" @submit="onFormSubmit" class="flex flex-col gap-4">
|
||||
<div class="flex flex-col gap-2">
|
||||
<Editor name="editor" editorStyle="height: 320px" />
|
||||
<Message v-if="$form.editor?.invalid" severity="error">{{ $form.editor.error?.message }}</Message>
|
||||
<div class="flex flex-col gap-1">
|
||||
<Editor name="content" editorStyle="height: 320px" />
|
||||
<Message v-if="$form.content?.invalid" severity="error" size="small" variant="simple">{{ $form.content.error?.message }}</Message>
|
||||
</div>
|
||||
<Button type="submit" severity="secondary" label="Submit" />
|
||||
</Form>
|
||||
|
|
@ -22,19 +22,19 @@ export default {
|
|||
data() {
|
||||
return {
|
||||
initialValues: {
|
||||
editor: ''
|
||||
content: ''
|
||||
},
|
||||
resolver: zodResolver(
|
||||
z.object({
|
||||
editor: z.string().min(1, { message: 'Editor is required.' })
|
||||
content: z.string().min(1, { message: 'Content is required.' })
|
||||
})
|
||||
),
|
||||
code: {
|
||||
basic: `
|
||||
<Form v-slot="$form" :resolver="resolver" :initialValues="initialValues" @submit="onFormSubmit" class="flex flex-col gap-4">
|
||||
<div class="flex flex-col gap-2">
|
||||
<Editor name="editor" editorStyle="height: 320px" />
|
||||
<Message v-if="$form.editor?.invalid" severity="error">{{ $form.editor.error?.message }}</Message>
|
||||
<div class="flex flex-col gap-1">
|
||||
<Editor name="content" editorStyle="height: 320px" />
|
||||
<Message v-if="$form.content?.invalid" severity="error" size="small" variant="simple">{{ $form.content.error?.message }}</Message>
|
||||
</div>
|
||||
<Button type="submit" severity="secondary" label="Submit" />
|
||||
</Form>
|
||||
|
|
@ -43,9 +43,9 @@ export default {
|
|||
<template>
|
||||
<div class="card">
|
||||
<Form v-slot="$form" :resolver="resolver" :initialValues="initialValues" @submit="onFormSubmit" class="flex flex-col gap-4">
|
||||
<div class="flex flex-col gap-2">
|
||||
<Editor name="editor" editorStyle="height: 320px" />
|
||||
<Message v-if="$form.editor?.invalid" severity="error">{{ $form.editor.error?.message }}</Message>
|
||||
<div class="flex flex-col gap-1">
|
||||
<Editor name="content" editorStyle="height: 320px" />
|
||||
<Message v-if="$form.content?.invalid" severity="error" size="small" variant="simple">{{ $form.content.error?.message }}</Message>
|
||||
</div>
|
||||
<Button type="submit" severity="secondary" label="Submit" />
|
||||
</Form>
|
||||
|
|
@ -60,11 +60,11 @@ export default {
|
|||
data() {
|
||||
return {
|
||||
initialValues: {
|
||||
editor: ''
|
||||
content: ''
|
||||
},
|
||||
resolver: zodResolver(
|
||||
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>
|
||||
<div class="card">
|
||||
<Form v-slot="$form" :resolver="resolver" :initialValues="initialValues" @submit="onFormSubmit" class="flex flex-col gap-4">
|
||||
<div class="flex flex-col gap-2">
|
||||
<Editor name="editor" editorStyle="height: 320px" />
|
||||
<Message v-if="$form.editor?.invalid" severity="error">{{ $form.editor.error?.message }}</Message>
|
||||
<div class="flex flex-col gap-1">
|
||||
<Editor name="content" editorStyle="height: 320px" />
|
||||
<Message v-if="$form.content?.invalid" severity="error" size="small" variant="simple">{{ $form.content.error?.message }}</Message>
|
||||
</div>
|
||||
<Button type="submit" severity="secondary" label="Submit" />
|
||||
</Form>
|
||||
|
|
@ -101,11 +101,11 @@ import { z } from 'zod';
|
|||
|
||||
const toast = useToast();
|
||||
const initialValues = ref({
|
||||
editor: '
|
||||
content: ''
|
||||
});
|
||||
const resolver = ref(zodResolver(
|
||||
z.object({
|
||||
editor: z.string().min(1, { message: 'Editor is required.' })
|
||||
content: z.string().min(1, { message: 'Content is required.' })
|
||||
})
|
||||
));
|
||||
|
||||
|
|
|
|||
|
|
@ -1,12 +1,12 @@
|
|||
<template>
|
||||
<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>
|
||||
<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">
|
||||
<div class="flex flex-col gap-2">
|
||||
<InputMask name="mask" mask="99-999999" placeholder="99-999999" fluid />
|
||||
<Message v-if="$form.mask?.invalid" severity="error">{{ $form.mask.error?.message }}</Message>
|
||||
<div class="flex flex-col gap-1">
|
||||
<InputMask name="serialNumber" mask="99-999999" placeholder="99-999999" fluid />
|
||||
<Message v-if="$form.serialNumber?.invalid" severity="error" size="small" variant="simple">{{ $form.serialNumber.error?.message }}</Message>
|
||||
</div>
|
||||
<Button type="submit" severity="secondary" label="Submit" />
|
||||
</Form>
|
||||
|
|
@ -22,19 +22,19 @@ export default {
|
|||
data() {
|
||||
return {
|
||||
initialValues: {
|
||||
mask: ''
|
||||
serialNumber: ''
|
||||
},
|
||||
resolver: zodResolver(
|
||||
z.object({
|
||||
mask: z.string().min(1, { message: 'Mask is required.' })
|
||||
serialNumber: z.string().min(1, { message: 'Serial number is required.' })
|
||||
})
|
||||
),
|
||||
code: {
|
||||
basic: `
|
||||
<Form v-slot="$form" :resolver="resolver" :initialValues="initialValues" @submit="onFormSubmit" class="flex flex-col gap-4 w-full sm:w-56">
|
||||
<div class="flex flex-col gap-2">
|
||||
<InputMask name="mask" mask="99-999999" placeholder="99-999999" fluid />
|
||||
<Message v-if="$form.mask?.invalid" severity="error">{{ $form.mask.error?.message }}</Message>
|
||||
<div class="flex flex-col gap-1">
|
||||
<InputMask name="serialNumber" mask="99-999999" placeholder="99-999999" fluid />
|
||||
<Message v-if="$form.serialNumber?.invalid" severity="error" size="small" variant="simple">{{ $form.serialNumber.error?.message }}</Message>
|
||||
</div>
|
||||
<Button type="submit" severity="secondary" label="Submit" />
|
||||
</Form>
|
||||
|
|
@ -43,9 +43,9 @@ export default {
|
|||
<template>
|
||||
<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">
|
||||
<div class="flex flex-col gap-2">
|
||||
<InputMask name="mask" mask="99-999999" placeholder="99-999999" fluid />
|
||||
<Message v-if="$form.mask?.invalid" severity="error">{{ $form.mask.error?.message }}</Message>
|
||||
<div class="flex flex-col gap-1">
|
||||
<InputMask name="serialNumber" mask="99-999999" placeholder="99-999999" fluid />
|
||||
<Message v-if="$form.serialNumber?.invalid" severity="error" size="small" variant="simple">{{ $form.serialNumber.error?.message }}</Message>
|
||||
</div>
|
||||
<Button type="submit" severity="secondary" label="Submit" />
|
||||
</Form>
|
||||
|
|
@ -60,11 +60,11 @@ export default {
|
|||
data() {
|
||||
return {
|
||||
initialValues: {
|
||||
mask: ''
|
||||
serialNumber: ''
|
||||
},
|
||||
resolver: zodResolver(
|
||||
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>
|
||||
<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">
|
||||
<div class="flex flex-col gap-2">
|
||||
<InputMask name="mask" mask="99-999999" placeholder="99-999999" fluid />
|
||||
<Message v-if="$form.mask?.invalid" severity="error">{{ $form.mask.error?.message }}</Message>
|
||||
<div class="flex flex-col gap-1">
|
||||
<InputMask name="serialNumber" mask="99-999999" placeholder="99-999999" fluid />
|
||||
<Message v-if="$form.serialNumber?.invalid" severity="error" size="small" variant="simple">{{ $form.serialNumber.error?.message }}</Message>
|
||||
</div>
|
||||
<Button type="submit" severity="secondary" label="Submit" />
|
||||
</Form>
|
||||
|
|
@ -101,11 +101,12 @@ import { z } from 'zod';
|
|||
|
||||
const toast = useToast();
|
||||
const initialValues = ref({
|
||||
mask: ''
|
||||
serialNumber: ''
|
||||
});
|
||||
|
||||
const resolver = ref(zodResolver(
|
||||
z.object({
|
||||
mask: z.string().min(1, { message: 'Mask is required.' })
|
||||
serialNumber: z.string().min(1, { message: 'Serial number is required.' })
|
||||
})
|
||||
));
|
||||
|
||||
|
|
|
|||
|
|
@ -1,12 +1,12 @@
|
|||
<template>
|
||||
<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>
|
||||
<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">
|
||||
<div class="flex flex-col gap-2">
|
||||
<div class="flex flex-col gap-1">
|
||||
<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>
|
||||
<Button type="submit" severity="secondary" label="Submit" />
|
||||
</Form>
|
||||
|
|
@ -32,9 +32,9 @@ export default {
|
|||
code: {
|
||||
basic: `
|
||||
<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 />
|
||||
<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>
|
||||
<Button type="submit" severity="secondary" label="Submit" />
|
||||
</Form>
|
||||
|
|
@ -43,9 +43,9 @@ export default {
|
|||
<template>
|
||||
<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">
|
||||
<div class="flex flex-col gap-2">
|
||||
<div class="flex flex-col gap-1">
|
||||
<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>
|
||||
<Button type="submit" severity="secondary" label="Submit" />
|
||||
</Form>
|
||||
|
|
@ -84,9 +84,9 @@ export default {
|
|||
<template>
|
||||
<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">
|
||||
<div class="flex flex-col gap-2">
|
||||
<div class="flex flex-col gap-1">
|
||||
<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>
|
||||
<Button type="submit" severity="secondary" label="Submit" />
|
||||
</Form>
|
||||
|
|
|
|||
|
|
@ -1,11 +1,13 @@
|
|||
<template>
|
||||
<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>
|
||||
<div class="card flex justify-center">
|
||||
<Form v-slot="$form" :resolver="resolver" :initialValues="initialValues" @submit="onFormSubmit" class="flex flex-col gap-4">
|
||||
<InputOtp name="otp" />
|
||||
<Message v-if="$form.otp?.invalid" severity="error" icon="pi pi-times-circle">{{ $form.otp.error?.message }}</Message>
|
||||
<div class="flex flex-col gap-1">
|
||||
<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" />
|
||||
</Form>
|
||||
</div>
|
||||
|
|
@ -20,18 +22,20 @@ export default {
|
|||
data() {
|
||||
return {
|
||||
initialValues: {
|
||||
otp: ''
|
||||
passcode: ''
|
||||
},
|
||||
resolver: zodResolver(
|
||||
z.object({
|
||||
otp: z.string().min(1, { message: 'Otp is required.' })
|
||||
passcode: z.string().min(1, { message: 'Passcode is required.' })
|
||||
})
|
||||
),
|
||||
code: {
|
||||
basic: `
|
||||
<Form v-slot="$form" :resolver="resolver" :initialValues="initialValues" @submit="onFormSubmit" class="flex flex-col gap-4">
|
||||
<InputOtp name="otp" />
|
||||
<Message v-if="$form.otp?.invalid" severity="error" icon="pi pi-times-circle">{{ $form.otp.error?.message }}</Message>
|
||||
<div class="flex flex-col gap-1">
|
||||
<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" />
|
||||
</Form>
|
||||
`,
|
||||
|
|
@ -39,8 +43,10 @@ export default {
|
|||
<template>
|
||||
<div class="card flex justify-center">
|
||||
<Form v-slot="$form" :resolver="resolver" :initialValues="initialValues" @submit="onFormSubmit" class="flex flex-col gap-4">
|
||||
<InputOtp name="otp" />
|
||||
<Message v-if="$form.otp?.invalid" severity="error" icon="pi pi-times-circle">{{ $form.otp.error?.message }}</Message>
|
||||
<div class="flex flex-col gap-1">
|
||||
<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" />
|
||||
</Form>
|
||||
</div>
|
||||
|
|
@ -54,11 +60,11 @@ export default {
|
|||
data() {
|
||||
return {
|
||||
initialValues: {
|
||||
otp: ''
|
||||
passcode: ''
|
||||
},
|
||||
resolver: zodResolver(
|
||||
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>
|
||||
<div class="card flex justify-center">
|
||||
<Form v-slot="$form" :resolver="resolver" :initialValues="initialValues" @submit="onFormSubmit" class="flex flex-col gap-4">
|
||||
<InputOtp name="otp" />
|
||||
<Message v-if="$form.otp?.invalid" severity="error" icon="pi pi-times-circle">{{ $form.otp.error?.message }}</Message>
|
||||
<div class="flex flex-col gap-1">
|
||||
<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" />
|
||||
</Form>
|
||||
</div>
|
||||
|
|
@ -93,11 +101,11 @@ import { z } from 'zod';
|
|||
|
||||
const toast = useToast();
|
||||
const initialValues = ref({
|
||||
otp: ''
|
||||
passcode: ''
|
||||
});
|
||||
const resolver = ref(zodResolver(
|
||||
z.object({
|
||||
otp: z.string().min(1, { message: 'Otp is required.' })
|
||||
passcode: z.string().min(1, { message: 'Passcode is required.' })
|
||||
})
|
||||
));
|
||||
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
<template>
|
||||
<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>
|
||||
<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">
|
||||
|
|
@ -32,7 +32,7 @@ export default {
|
|||
resolver: zodResolver(
|
||||
z.object({
|
||||
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: {
|
||||
|
|
@ -80,7 +80,7 @@ export default {
|
|||
resolver: zodResolver(
|
||||
z.object({
|
||||
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: '',
|
||||
email: ''
|
||||
});
|
||||
|
||||
const resolver = ref(zodResolver(
|
||||
z.object({
|
||||
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.' })
|
||||
})
|
||||
));
|
||||
|
||||
|
|
|
|||
|
|
@ -1,12 +1,12 @@
|
|||
<template>
|
||||
<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>
|
||||
<div class="card flex justify-center">
|
||||
<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" />
|
||||
<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>
|
||||
<Button type="submit" severity="secondary" label="Submit" />
|
||||
</Form>
|
||||
|
|
@ -32,9 +32,9 @@ export default {
|
|||
code: {
|
||||
basic: `
|
||||
<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" />
|
||||
<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>
|
||||
<Button type="submit" severity="secondary" label="Submit" />
|
||||
</Form>
|
||||
|
|
@ -43,9 +43,9 @@ export default {
|
|||
<template>
|
||||
<div class="card flex justify-center">
|
||||
<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" />
|
||||
<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>
|
||||
<Button type="submit" severity="secondary" label="Submit" />
|
||||
</Form>
|
||||
|
|
@ -85,9 +85,9 @@ export default {
|
|||
<template>
|
||||
<div class="card flex justify-center">
|
||||
<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" />
|
||||
<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>
|
||||
<Button type="submit" severity="secondary" label="Submit" />
|
||||
</Form>
|
||||
|
|
|
|||
|
|
@ -1,12 +1,12 @@
|
|||
<template>
|
||||
<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>
|
||||
<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">
|
||||
<div class="flex flex-col gap-2">
|
||||
<div class="flex flex-col gap-1">
|
||||
<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>
|
||||
<Button type="submit" severity="secondary" label="Submit" />
|
||||
</Form>
|
||||
|
|
@ -28,9 +28,9 @@ export default {
|
|||
z.object({
|
||||
city: z.union([
|
||||
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: {
|
||||
basic: `
|
||||
<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 />
|
||||
<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>
|
||||
<Button type="submit" severity="secondary" label="Submit" />
|
||||
</Form>
|
||||
|
|
@ -55,9 +55,9 @@ export default {
|
|||
<template>
|
||||
<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">
|
||||
<div class="flex flex-col gap-2">
|
||||
<div class="flex flex-col gap-1">
|
||||
<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>
|
||||
<Button type="submit" severity="secondary" label="Submit" />
|
||||
</Form>
|
||||
|
|
@ -78,9 +78,9 @@ export default {
|
|||
z.object({
|
||||
city: z.union([
|
||||
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>
|
||||
<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">
|
||||
<div class="flex flex-col gap-2">
|
||||
<div class="flex flex-col gap-1">
|
||||
<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>
|
||||
<Button type="submit" severity="secondary" label="Submit" />
|
||||
</Form>
|
||||
|
|
@ -131,9 +131,9 @@ const resolver = ref(zodResolver(
|
|||
z.object({
|
||||
city: z.union([
|
||||
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.' })
|
||||
])
|
||||
})
|
||||
));
|
||||
|
|
|
|||
|
|
@ -2,9 +2,9 @@
|
|||
<DocSectionText v-bind="$attrs"> </DocSectionText>
|
||||
<div class="card flex justify-center">
|
||||
<Form v-slot="$form" :resolver="resolver" :initialValues="initialValues" @submit="onFormSubmit" class="flex justify-center flex-col gap-4 w-full md:w-80">
|
||||
<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 />
|
||||
<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>
|
||||
<Button type="submit" severity="secondary" label="Submit" />
|
||||
</Form>
|
||||
|
|
@ -27,10 +27,10 @@ export default {
|
|||
city: z
|
||||
.array(
|
||||
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: [
|
||||
|
|
@ -43,9 +43,9 @@ export default {
|
|||
code: {
|
||||
basic: `
|
||||
<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" />
|
||||
<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>
|
||||
<Button type="submit" severity="secondary" label="Submit" />
|
||||
</Form>
|
||||
|
|
@ -54,9 +54,9 @@ export default {
|
|||
<template>
|
||||
<div class="card flex justify-center">
|
||||
<Form v-slot="$form" :resolver="resolver" :initialValues="initialValues" @submit="onFormSubmit" class="flex justify-center flex-col gap-4">
|
||||
<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" />
|
||||
<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>
|
||||
<Button type="submit" severity="secondary" label="Submit" />
|
||||
</Form>
|
||||
|
|
@ -78,10 +78,10 @@ export default {
|
|||
city: z
|
||||
.array(
|
||||
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: [
|
||||
|
|
@ -108,9 +108,9 @@ export default {
|
|||
<template>
|
||||
<div class="card flex justify-center">
|
||||
<Form v-slot="$form" :resolver="resolver" :initialValues="initialValues" @submit="onFormSubmit" class="flex justify-center flex-col gap-4">
|
||||
<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" />
|
||||
<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>
|
||||
<Button type="submit" severity="secondary" label="Submit" />
|
||||
</Form>
|
||||
|
|
@ -132,10 +132,10 @@ const resolver = ref(zodResolver(
|
|||
city: z
|
||||
.array(
|
||||
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([
|
||||
|
|
|
|||
|
|
@ -3,11 +3,11 @@
|
|||
<p>InputText is used with the <i>v-model</i> property.</p>
|
||||
</DocSectionText>
|
||||
<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">
|
||||
<div class="flex flex-col gap-2">
|
||||
<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-1">
|
||||
<Password name="password" placeholder="Password" :feedback="false" fluid />
|
||||
<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>
|
||||
</div>
|
||||
<Button type="submit" severity="secondary" label="Submit" />
|
||||
|
|
@ -36,7 +36,7 @@ export default {
|
|||
message: 'Must have a lowercase letter.'
|
||||
})
|
||||
.refine((value) => /[A-Z]/.test(value), {
|
||||
message: 'Must have a uppercase letter.'
|
||||
message: 'Must have an uppercase letter.'
|
||||
})
|
||||
.refine((value) => /\d/.test(value), {
|
||||
message: 'Must have a number.'
|
||||
|
|
@ -45,11 +45,11 @@ export default {
|
|||
),
|
||||
code: {
|
||||
basic: `
|
||||
<Form v-slot="$form" :resolver="resolver" :initialValues="initialValues" @submit="onFormSubmit" class="flex flex-col gap-4 w-full sm:w-80">
|
||||
<div class="flex flex-col gap-2">
|
||||
<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-1">
|
||||
<Password name="password" placeholder="Password" :feedback="false" fluid />
|
||||
<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>
|
||||
</div>
|
||||
<Button type="submit" severity="secondary" label="Submit" />
|
||||
|
|
@ -58,11 +58,11 @@ export default {
|
|||
options: `
|
||||
<template>
|
||||
<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">
|
||||
<div class="flex flex-col gap-2">
|
||||
<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-1">
|
||||
<Password name="password" placeholder="Password" :feedback="false" fluid />
|
||||
<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>
|
||||
</div>
|
||||
<Button type="submit" severity="secondary" label="Submit" />
|
||||
|
|
@ -90,7 +90,7 @@ export default {
|
|||
message: 'Must have a lowercase letter.'
|
||||
})
|
||||
.refine((value) => /[A-Z]/.test(value), {
|
||||
message: 'Must have a uppercase letter.'
|
||||
message: 'Must have an uppercase letter.'
|
||||
})
|
||||
.refine((value) => /\d/.test(value), {
|
||||
message: 'Must have a number.'
|
||||
|
|
@ -113,11 +113,11 @@ export default {
|
|||
composition: `
|
||||
<template>
|
||||
<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">
|
||||
<div class="flex flex-col gap-2">
|
||||
<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-1">
|
||||
<Password name="password" placeholder="Password" :feedback="false" fluid />
|
||||
<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>
|
||||
</div>
|
||||
<Button type="submit" severity="secondary" label="Submit" />
|
||||
|
|
@ -145,7 +145,7 @@ const resolver = ref(zodResolver(
|
|||
message: 'Must have a lowercase letter.'
|
||||
})
|
||||
.refine((value) => /[A-Z]/.test(value), {
|
||||
message: 'Must have a uppercase letter.'
|
||||
message: 'Must have an uppercase letter.'
|
||||
})
|
||||
.refine((value) => /\d/.test(value), {
|
||||
message: 'Must have a number.'
|
||||
|
|
|
|||
|
|
@ -1,28 +1,30 @@
|
|||
<template>
|
||||
<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>
|
||||
<div class="card flex justify-center">
|
||||
<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 items-center gap-2">
|
||||
<RadioButton inputId="cheese" value="Cheese" />
|
||||
<label for="cheese">Cheese</label>
|
||||
</div>
|
||||
<div class="flex items-center gap-2">
|
||||
<RadioButton inputId="mushroom" value="Mushroom" />
|
||||
<label for="mushroom">Mushroom</label>
|
||||
</div>
|
||||
<div class="flex items-center gap-2">
|
||||
<RadioButton inputId="pepper" value="Pepper" />
|
||||
<label for="pepper">Pepper</label>
|
||||
</div>
|
||||
<div class="flex items-center gap-2">
|
||||
<RadioButton inputId="onion" value="Onion" />
|
||||
<label for="onion">Onion</label>
|
||||
</div>
|
||||
</RadioButtonGroup>
|
||||
<Message v-if="$form.radiobutton?.invalid" severity="error" icon="pi pi-times-circle">{{ $form.radiobutton.error?.message }}</Message>
|
||||
<div class="flex flex-col gap-2">
|
||||
<RadioButtonGroup name="ingredient" class="flex flex-wrap gap-4">
|
||||
<div class="flex items-center gap-2">
|
||||
<RadioButton inputId="cheese" value="Cheese" />
|
||||
<label for="cheese">Cheese</label>
|
||||
</div>
|
||||
<div class="flex items-center gap-2">
|
||||
<RadioButton inputId="mushroom" value="Mushroom" />
|
||||
<label for="mushroom">Mushroom</label>
|
||||
</div>
|
||||
<div class="flex items-center gap-2">
|
||||
<RadioButton inputId="pepper" value="Pepper" />
|
||||
<label for="pepper">Pepper</label>
|
||||
</div>
|
||||
<div class="flex items-center gap-2">
|
||||
<RadioButton inputId="onion" value="Onion" />
|
||||
<label for="onion">Onion</label>
|
||||
</div>
|
||||
</RadioButtonGroup>
|
||||
<Message v-if="$form.ingredient?.invalid" severity="error" size="small" variant="simple">{{ $form.ingredient.error?.message }}</Message>
|
||||
</div>
|
||||
<Button type="submit" severity="secondary" label="Submit" />
|
||||
</Form>
|
||||
</div>
|
||||
|
|
@ -37,35 +39,37 @@ export default {
|
|||
data() {
|
||||
return {
|
||||
initialValues: {
|
||||
radiobutton: ''
|
||||
ingredient: ''
|
||||
},
|
||||
resolver: zodResolver(
|
||||
z.object({
|
||||
radiobutton: z.string().min(1, { message: 'Selection is required.' })
|
||||
ingredient: z.string().min(1, { message: 'Ingredient is required.' })
|
||||
})
|
||||
),
|
||||
code: {
|
||||
basic: `
|
||||
<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 items-center gap-2">
|
||||
<RadioButton inputId="cheese" value="Cheese" />
|
||||
<label for="cheese">Cheese</label>
|
||||
</div>
|
||||
<div class="flex items-center gap-2">
|
||||
<RadioButton inputId="mushroom" value="Mushroom" />
|
||||
<label for="mushroom">Mushroom</label>
|
||||
</div>
|
||||
<div class="flex items-center gap-2">
|
||||
<RadioButton inputId="pepper" value="Pepper" />
|
||||
<label for="pepper">Pepper</label>
|
||||
</div>
|
||||
<div class="flex items-center gap-2">
|
||||
<RadioButton inputId="onion" value="Onion" />
|
||||
<label for="onion">Onion</label>
|
||||
</div>
|
||||
</RadioButtonGroup>
|
||||
<Message v-if="$form.radiobutton?.invalid" severity="error" icon="pi pi-times-circle">{{ $form.radiobutton.error?.message }}</Message>
|
||||
<div class="flex flex-col gap-2">
|
||||
<RadioButtonGroup name="ingredient" class="flex flex-wrap gap-4">
|
||||
<div class="flex items-center gap-2">
|
||||
<RadioButton inputId="cheese" value="Cheese" />
|
||||
<label for="cheese">Cheese</label>
|
||||
</div>
|
||||
<div class="flex items-center gap-2">
|
||||
<RadioButton inputId="mushroom" value="Mushroom" />
|
||||
<label for="mushroom">Mushroom</label>
|
||||
</div>
|
||||
<div class="flex items-center gap-2">
|
||||
<RadioButton inputId="pepper" value="Pepper" />
|
||||
<label for="pepper">Pepper</label>
|
||||
</div>
|
||||
<div class="flex items-center gap-2">
|
||||
<RadioButton inputId="onion" value="Onion" />
|
||||
<label for="onion">Onion</label>
|
||||
</div>
|
||||
</RadioButtonGroup>
|
||||
<Message v-if="$form.ingredient?.invalid" severity="error" size="small" variant="simple">{{ $form.ingredient.error?.message }}</Message>
|
||||
</div>
|
||||
<Button type="submit" severity="secondary" label="Submit" />
|
||||
</Form>
|
||||
`,
|
||||
|
|
@ -73,25 +77,27 @@ export default {
|
|||
<template>
|
||||
<div class="card flex justify-center">
|
||||
<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 items-center gap-2">
|
||||
<RadioButton inputId="cheese" value="Cheese" />
|
||||
<label for="cheese">Cheese</label>
|
||||
</div>
|
||||
<div class="flex items-center gap-2">
|
||||
<RadioButton inputId="mushroom" value="Mushroom" />
|
||||
<label for="mushroom">Mushroom</label>
|
||||
</div>
|
||||
<div class="flex items-center gap-2">
|
||||
<RadioButton inputId="pepper" value="Pepper" />
|
||||
<label for="pepper">Pepper</label>
|
||||
</div>
|
||||
<div class="flex items-center gap-2">
|
||||
<RadioButton inputId="onion" value="Onion" />
|
||||
<label for="onion">Onion</label>
|
||||
</div>
|
||||
</RadioButtonGroup>
|
||||
<Message v-if="$form.radiobutton?.invalid" severity="error" icon="pi pi-times-circle">{{ $form.radiobutton.error?.message }}</Message>
|
||||
<div class="flex flex-col gap-2">
|
||||
<RadioButtonGroup name="ingredient" class="flex flex-wrap gap-4">
|
||||
<div class="flex items-center gap-2">
|
||||
<RadioButton inputId="cheese" value="Cheese" />
|
||||
<label for="cheese">Cheese</label>
|
||||
</div>
|
||||
<div class="flex items-center gap-2">
|
||||
<RadioButton inputId="mushroom" value="Mushroom" />
|
||||
<label for="mushroom">Mushroom</label>
|
||||
</div>
|
||||
<div class="flex items-center gap-2">
|
||||
<RadioButton inputId="pepper" value="Pepper" />
|
||||
<label for="pepper">Pepper</label>
|
||||
</div>
|
||||
<div class="flex items-center gap-2">
|
||||
<RadioButton inputId="onion" value="Onion" />
|
||||
<label for="onion">Onion</label>
|
||||
</div>
|
||||
</RadioButtonGroup>
|
||||
<Message v-if="$form.ingredient?.invalid" severity="error" size="small" variant="simple">{{ $form.ingredient.error?.message }}</Message>
|
||||
</div>
|
||||
<Button type="submit" severity="secondary" label="Submit" />
|
||||
</Form>
|
||||
</div>
|
||||
|
|
@ -105,11 +111,11 @@ export default {
|
|||
data() {
|
||||
return {
|
||||
initialValues: {
|
||||
radiobutton: ''
|
||||
ingredient: ''
|
||||
},
|
||||
resolver: zodResolver(
|
||||
z.object({
|
||||
radiobutton: z.string().min(1, { message: 'Selection is required.' })
|
||||
ingredient: z.string().min(1, { message: 'Ingredient is required.' })
|
||||
})
|
||||
)
|
||||
}
|
||||
|
|
@ -129,25 +135,27 @@ export default {
|
|||
<template>
|
||||
<div class="card flex justify-center">
|
||||
<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 items-center gap-2">
|
||||
<RadioButton inputId="cheese" value="Cheese" />
|
||||
<label for="cheese">Cheese</label>
|
||||
</div>
|
||||
<div class="flex items-center gap-2">
|
||||
<RadioButton inputId="mushroom" value="Mushroom" />
|
||||
<label for="mushroom">Mushroom</label>
|
||||
</div>
|
||||
<div class="flex items-center gap-2">
|
||||
<RadioButton inputId="pepper" value="Pepper" />
|
||||
<label for="pepper">Pepper</label>
|
||||
</div>
|
||||
<div class="flex items-center gap-2">
|
||||
<RadioButton inputId="onion" value="Onion" />
|
||||
<label for="onion">Onion</label>
|
||||
</div>
|
||||
</RadioButtonGroup>
|
||||
<Message v-if="$form.radiobutton?.invalid" severity="error" icon="pi pi-times-circle">{{ $form.radiobutton.error?.message }}</Message>
|
||||
<div class="flex flex-col gap-2">
|
||||
<RadioButtonGroup name="ingredient" class="flex flex-wrap gap-4">
|
||||
<div class="flex items-center gap-2">
|
||||
<RadioButton inputId="cheese" value="Cheese" />
|
||||
<label for="cheese">Cheese</label>
|
||||
</div>
|
||||
<div class="flex items-center gap-2">
|
||||
<RadioButton inputId="mushroom" value="Mushroom" />
|
||||
<label for="mushroom">Mushroom</label>
|
||||
</div>
|
||||
<div class="flex items-center gap-2">
|
||||
<RadioButton inputId="pepper" value="Pepper" />
|
||||
<label for="pepper">Pepper</label>
|
||||
</div>
|
||||
<div class="flex items-center gap-2">
|
||||
<RadioButton inputId="onion" value="Onion" />
|
||||
<label for="onion">Onion</label>
|
||||
</div>
|
||||
</RadioButtonGroup>
|
||||
<Message v-if="$form.ingredient?.invalid" severity="error" size="small" variant="simple">{{ $form.ingredient.error?.message }}</Message>
|
||||
</div>
|
||||
<Button type="submit" severity="secondary" label="Submit" />
|
||||
</Form>
|
||||
</div>
|
||||
|
|
@ -161,11 +169,11 @@ import { z } from 'zod';
|
|||
|
||||
const toast = useToast();
|
||||
const initialValues = ref({
|
||||
radiobutton: ''
|
||||
ingredient: ''
|
||||
});
|
||||
const resolver = ref(zodResolver(
|
||||
z.object({
|
||||
radiobutton: z.string().min(1, { message: 'Selection is required.' })
|
||||
ingredient: z.string().min(1, { message: 'Ingredient is required.' })
|
||||
})
|
||||
));
|
||||
|
||||
|
|
|
|||
|
|
@ -1,12 +1,12 @@
|
|||
<template>
|
||||
<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>
|
||||
<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">
|
||||
<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>
|
||||
<Button type="submit" severity="secondary" label="Submit" />
|
||||
</Form>
|
||||
|
|
@ -31,10 +31,10 @@ export default {
|
|||
),
|
||||
code: {
|
||||
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">
|
||||
<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>
|
||||
<Button type="submit" severity="secondary" label="Submit" />
|
||||
</Form>
|
||||
|
|
@ -42,10 +42,10 @@ export default {
|
|||
options: `
|
||||
<template>
|
||||
<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">
|
||||
<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>
|
||||
<Button type="submit" severity="secondary" label="Submit" />
|
||||
</Form>
|
||||
|
|
@ -83,10 +83,10 @@ export default {
|
|||
composition: `
|
||||
<template>
|
||||
<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">
|
||||
<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>
|
||||
<Button type="submit" severity="secondary" label="Submit" />
|
||||
</Form>
|
||||
|
|
|
|||
|
|
@ -2,9 +2,9 @@
|
|||
<DocSectionText v-bind="$attrs"> </DocSectionText>
|
||||
<div class="card flex justify-center">
|
||||
<Form v-slot="$form" :resolver="resolver" :initialValues="initialValues" @submit="onFormSubmit" class="flex flex-col gap-4 w-full md:w-56">
|
||||
<div class="flex flex-col gap-2">
|
||||
<div class="flex flex-col gap-1">
|
||||
<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>
|
||||
<Button type="submit" severity="secondary" label="Submit" />
|
||||
</Form>
|
||||
|
|
@ -26,9 +26,9 @@ export default {
|
|||
z.object({
|
||||
city: z.union([
|
||||
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: {
|
||||
basic: `
|
||||
<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 />
|
||||
<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>
|
||||
<Button type="submit" severity="secondary" label="Submit" />
|
||||
</Form>
|
||||
|
|
@ -53,9 +53,9 @@ export default {
|
|||
<template>
|
||||
<div class="card flex justify-center">
|
||||
<Form v-slot="$form" :resolver="resolver" :initialValues="initialValues" @submit="onFormSubmit" class="flex flex-col gap-4 w-full md:w-56">
|
||||
<div class="flex flex-col gap-2">
|
||||
<div class="flex flex-col gap-1">
|
||||
<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>
|
||||
<Button type="submit" severity="secondary" label="Submit" />
|
||||
</Form>
|
||||
|
|
@ -76,9 +76,9 @@ export default {
|
|||
z.object({
|
||||
city: z.union([
|
||||
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>
|
||||
<div class="card flex justify-center">
|
||||
<Form v-slot="$form" :resolver="resolver" :initialValues="initialValues" @submit="onFormSubmit" class="flex flex-col gap-4 w-full md:w-56">
|
||||
<div class="flex flex-col gap-2">
|
||||
<div class="flex flex-col gap-1">
|
||||
<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>
|
||||
<Button type="submit" severity="secondary" label="Submit" />
|
||||
</Form>
|
||||
|
|
@ -128,9 +128,9 @@ const resolver = ref(zodResolver(
|
|||
z.object({
|
||||
city: z.union([
|
||||
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.' })
|
||||
])
|
||||
})
|
||||
));
|
||||
|
|
|
|||
|
|
@ -1,12 +1,12 @@
|
|||
<template>
|
||||
<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>
|
||||
<div class="card flex justify-center">
|
||||
<Form v-slot="$form" :resolver="resolver" :initialValues="initialValues" @submit="onFormSubmit" class="flex flex-col gap-4">
|
||||
<div class="flex items-center flex-col gap-2">
|
||||
<SelectButton name="selectbutton" :options="options" />
|
||||
<Message v-if="$form.selectbutton?.invalid" severity="error">{{ $form.selectbutton.error?.message }}</Message>
|
||||
<div class="flex items-center flex-col gap-1">
|
||||
<SelectButton name="selection" :options="options" />
|
||||
<Message v-if="$form.selection?.invalid" severity="error" size="small" variant="simple">{{ $form.selection.error?.message }}</Message>
|
||||
</div>
|
||||
<Button type="submit" severity="secondary" label="Submit" />
|
||||
</Form>
|
||||
|
|
@ -22,20 +22,20 @@ export default {
|
|||
data() {
|
||||
return {
|
||||
initialValues: {
|
||||
selectbutton: ''
|
||||
selection: ''
|
||||
},
|
||||
resolver: zodResolver(
|
||||
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'],
|
||||
code: {
|
||||
basic: `
|
||||
<Form v-slot="$form" :resolver="resolver" :initialValues="initialValues" @submit="onFormSubmit" class="flex flex-col gap-4">
|
||||
<div class="flex flex-col gap-2">
|
||||
<SelectButton name="selectbutton" :options="options" />
|
||||
<Message v-if="$form.selectbutton?.invalid" severity="error">{{ $form.selectbutton.error?.message }}</Message>
|
||||
<div class="flex flex-col gap-1">
|
||||
<SelectButton name="selection" :options="options" />
|
||||
<Message v-if="$form.selection?.invalid" severity="error">{{ $form.selection.error?.message }}</Message>
|
||||
</div>
|
||||
<Button type="submit" severity="secondary" label="Submit" />
|
||||
</Form>
|
||||
|
|
@ -44,9 +44,9 @@ export default {
|
|||
<template>
|
||||
<div class="card flex justify-center">
|
||||
<Form v-slot="$form" :resolver="resolver" :initialValues="initialValues" @submit="onFormSubmit" class="flex flex-col gap-4">
|
||||
<div class="flex flex-col gap-2">
|
||||
<SelectButton name="selectbutton" :options="options" />
|
||||
<Message v-if="$form.selectbutton?.invalid" severity="error">{{ $form.selectbutton.error?.message }}</Message>
|
||||
<div class="flex flex-col gap-1">
|
||||
<SelectButton name="selection" :options="options" />
|
||||
<Message v-if="$form.selection?.invalid" severity="error">{{ $form.selection.error?.message }}</Message>
|
||||
</div>
|
||||
<Button type="submit" severity="secondary" label="Submit" />
|
||||
</Form>
|
||||
|
|
@ -61,11 +61,11 @@ export default {
|
|||
data() {
|
||||
return {
|
||||
initialValues: {
|
||||
selectbutton: ''
|
||||
selection: ''
|
||||
},
|
||||
resolver: zodResolver(
|
||||
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'],
|
||||
|
|
@ -86,9 +86,9 @@ export default {
|
|||
<template>
|
||||
<div class="card flex justify-center">
|
||||
<Form v-slot="$form" :resolver="resolver" :initialValues="initialValues" @submit="onFormSubmit" class="flex flex-col gap-4">
|
||||
<div class="flex flex-col gap-2">
|
||||
<SelectButton name="selectbutton" :options="options" />
|
||||
<Message v-if="$form.selectbutton?.invalid" severity="error">{{ $form.selectbutton.error?.message }}</Message>
|
||||
<div class="flex flex-col gap-1">
|
||||
<SelectButton name="selection" :options="options" />
|
||||
<Message v-if="$form.selection?.invalid" severity="error">{{ $form.selection.error?.message }}</Message>
|
||||
</div>
|
||||
<Button type="submit" severity="secondary" label="Submit" />
|
||||
</Form>
|
||||
|
|
@ -103,11 +103,11 @@ import { z } from 'zod';
|
|||
|
||||
const toast = useToast();
|
||||
const initialValues = ref({
|
||||
selectbutton: ''
|
||||
selection: ''
|
||||
});
|
||||
const resolver = ref(zodResolver(
|
||||
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' }))
|
||||
})
|
||||
));
|
||||
|
||||
|
|
|
|||
|
|
@ -1,12 +1,12 @@
|
|||
<template>
|
||||
<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>
|
||||
<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">
|
||||
<div class="flex flex-col gap-2">
|
||||
<div class="flex flex-col gap-4">
|
||||
<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>
|
||||
<Button type="submit" severity="secondary" label="Submit" />
|
||||
</Form>
|
||||
|
|
@ -32,9 +32,9 @@ export default {
|
|||
code: {
|
||||
basic: `
|
||||
<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" />
|
||||
<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>
|
||||
<Button type="submit" severity="secondary" label="Submit" />
|
||||
</Form>
|
||||
|
|
@ -43,9 +43,9 @@ export default {
|
|||
<template>
|
||||
<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">
|
||||
<div class="flex flex-col gap-2">
|
||||
<div class="flex flex-col gap-4">
|
||||
<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>
|
||||
<Button type="submit" severity="secondary" label="Submit" />
|
||||
</Form>
|
||||
|
|
@ -84,9 +84,9 @@ export default {
|
|||
<template>
|
||||
<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">
|
||||
<div class="flex flex-col gap-2">
|
||||
<div class="flex flex-col gap-4">
|
||||
<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>
|
||||
<Button type="submit" severity="secondary" label="Submit" />
|
||||
</Form>
|
||||
|
|
|
|||
|
|
@ -1,12 +1,12 @@
|
|||
<template>
|
||||
<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>
|
||||
<div class="card flex justify-center">
|
||||
<Form v-slot="$form" :resolver="resolver" :initialValues="initialValues" @submit="onFormSubmit" class="flex flex-col gap-4">
|
||||
<div class="flex flex-col gap-2">
|
||||
<Textarea name="textarea" rows="5" cols="30" style="resize: none" />
|
||||
<Message v-if="$form.textarea?.invalid" severity="error">{{ $form.textarea.error?.message }}</Message>
|
||||
<div class="flex flex-col gap-1">
|
||||
<Textarea name="address" rows="5" cols="30" style="resize: none" />
|
||||
<Message v-if="$form.address?.invalid" severity="error" size="small" variant="simple">{{ $form.address.error?.message }}</Message>
|
||||
</div>
|
||||
<Button type="submit" severity="secondary" label="Submit" />
|
||||
</Form>
|
||||
|
|
@ -22,19 +22,19 @@ export default {
|
|||
data() {
|
||||
return {
|
||||
initialValues: {
|
||||
textarea: ''
|
||||
address: ''
|
||||
},
|
||||
resolver: zodResolver(
|
||||
z.object({
|
||||
textarea: z.string().min(1, { message: 'Textarea is required.' })
|
||||
address: z.string().min(1, { message: 'Address is required.' })
|
||||
})
|
||||
),
|
||||
code: {
|
||||
basic: `
|
||||
<Form v-slot="$form" :resolver="resolver" :initialValues="initialValues" @submit="onFormSubmit" class="flex flex-col gap-4">
|
||||
<div class="flex flex-col gap-2">
|
||||
<Textarea name="textarea" rows="5" cols="30" style="resize: none" />
|
||||
<Message v-if="$form.textarea?.invalid" severity="error">{{ $form.textarea.error?.message }}</Message>
|
||||
<div class="flex flex-col gap-1">
|
||||
<Textarea name="address" rows="5" cols="30" style="resize: none" />
|
||||
<Message v-if="$form.address?.invalid" severity="error" size="small" variant="simple">{{ $form.address.error?.message }}</Message>
|
||||
</div>
|
||||
<Button type="submit" severity="secondary" label="Submit" />
|
||||
</Form>
|
||||
|
|
@ -43,9 +43,9 @@ export default {
|
|||
<template>
|
||||
<div class="card flex justify-center">
|
||||
<Form v-slot="$form" :resolver="resolver" :initialValues="initialValues" @submit="onFormSubmit" class="flex flex-col gap-4">
|
||||
<div class="flex flex-col gap-2">
|
||||
<Textarea name="textarea" rows="5" cols="30" style="resize: none" />
|
||||
<Message v-if="$form.textarea?.invalid" severity="error">{{ $form.textarea.error?.message }}</Message>
|
||||
<div class="flex flex-col gap-1">
|
||||
<Textarea name="address" rows="5" cols="30" style="resize: none" />
|
||||
<Message v-if="$form.address?.invalid" severity="error" size="small" variant="simple">{{ $form.address.error?.message }}</Message>
|
||||
</div>
|
||||
<Button type="submit" severity="secondary" label="Submit" />
|
||||
</Form>
|
||||
|
|
@ -60,11 +60,11 @@ export default {
|
|||
data() {
|
||||
return {
|
||||
initialValues: {
|
||||
textarea: ''
|
||||
address: ''
|
||||
},
|
||||
resolver: zodResolver(
|
||||
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>
|
||||
<div class="card flex justify-center">
|
||||
<Form v-slot="$form" :resolver="resolver" :initialValues="initialValues" @submit="onFormSubmit" class="flex flex-col gap-4">
|
||||
<div class="flex flex-col gap-2">
|
||||
<Textarea name="textarea" rows="5" cols="30" style="resize: none" />
|
||||
<Message v-if="$form.textarea?.invalid" severity="error">{{ $form.textarea.error?.message }}</Message>
|
||||
<div class="flex flex-col gap-1">
|
||||
<Textarea name="address" rows="5" cols="30" style="resize: none" />
|
||||
<Message v-if="$form.address?.invalid" severity="error" size="small" variant="simple">{{ $form.address.error?.message }}</Message>
|
||||
</div>
|
||||
<Button type="submit" severity="secondary" label="Submit" />
|
||||
</Form>
|
||||
|
|
@ -101,11 +101,11 @@ import { z } from 'zod';
|
|||
|
||||
const toast = useToast();
|
||||
const initialValues = ref({
|
||||
textarea: ''
|
||||
address: ''
|
||||
});
|
||||
const resolver = ref(zodResolver(
|
||||
z.object({
|
||||
textarea: z.string().min(1, { message: 'Textarea is required.' })
|
||||
address: z.string().min(1, { message: 'Address is required.' })
|
||||
})
|
||||
));
|
||||
|
||||
|
|
|
|||
|
|
@ -1,12 +1,12 @@
|
|||
<template>
|
||||
<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>
|
||||
<div class="card flex justify-center">
|
||||
<Form v-slot="$form" :resolver="resolver" :initialValues="initialValues" @submit="onFormSubmit" class="flex flex-col gap-4">
|
||||
<div class="flex flex-col items-center gap-2">
|
||||
<ToggleButton name="togglebutton" class="w-24" onLabel="On" offLabel="Off" />
|
||||
<Message v-if="$form.togglebutton?.invalid" severity="error">{{ $form.togglebutton.error?.message }}</Message>
|
||||
<div class="flex flex-col items-center gap-1">
|
||||
<ToggleButton name="consent" class="w-48" onLabel="Accept All" offLabel="Reject All" />
|
||||
<Message v-if="$form.consent?.invalid" severity="error" size="small" variant="simple">{{ $form.consent.error?.message }}</Message>
|
||||
</div>
|
||||
<Button type="submit" severity="secondary" label="Submit" />
|
||||
</Form>
|
||||
|
|
@ -22,19 +22,19 @@ export default {
|
|||
data() {
|
||||
return {
|
||||
initialValues: {
|
||||
togglebutton: false
|
||||
consent: false
|
||||
},
|
||||
resolver: zodResolver(
|
||||
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: {
|
||||
basic: `
|
||||
<Form v-slot="$form" :resolver="resolver" :initialValues="initialValues" @submit="onFormSubmit" class="flex flex-col gap-4">
|
||||
<div class="flex flex-col items-center gap-2">
|
||||
<ToggleButton name="togglebutton" class="w-24" onLabel="On" offLabel="Off" />
|
||||
<Message v-if="$form.togglebutton?.invalid" severity="error">{{ $form.togglebutton.error?.message }}</Message>
|
||||
<div class="flex flex-col items-center gap-1">
|
||||
<ToggleButton name="consent" class="w-48" onLabel="Accept All" offLabel="Reject All" />
|
||||
<Message v-if="$form.consent?.invalid" severity="error" variant="simple">{{ $form.consent.error?.message }}</Message>
|
||||
</div>
|
||||
<Button type="submit" severity="secondary" label="Submit" />
|
||||
</Form>
|
||||
|
|
@ -43,9 +43,9 @@ export default {
|
|||
<template>
|
||||
<div class="card flex justify-center">
|
||||
<Form v-slot="$form" :resolver="resolver" :initialValues="initialValues" @submit="onFormSubmit" class="flex flex-col gap-4">
|
||||
<div class="flex flex-col items-center gap-2">
|
||||
<ToggleButton name="togglebutton" class="w-24" onLabel="On" offLabel="Off" />
|
||||
<Message v-if="$form.togglebutton?.invalid" severity="error">{{ $form.togglebutton.error?.message }}</Message>
|
||||
<div class="flex flex-col items-center gap-1">
|
||||
<ToggleButton name="consent" class="w-48" onLabel="Accept All" offLabel="Reject All" />
|
||||
<Message v-if="$form.consent?.invalid" severity="error" variant="simple">{{ $form.consent.error?.message }}</Message>
|
||||
</div>
|
||||
<Button type="submit" severity="secondary" label="Submit" />
|
||||
</Form>
|
||||
|
|
@ -60,11 +60,11 @@ export default {
|
|||
data() {
|
||||
return {
|
||||
initialValues: {
|
||||
togglebutton: false
|
||||
consent: false
|
||||
},
|
||||
resolver: zodResolver(
|
||||
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>
|
||||
<div class="card flex justify-center">
|
||||
<Form v-slot="$form" :resolver="resolver" :initialValues="initialValues" @submit="onFormSubmit" class="flex flex-col gap-4">
|
||||
<div class="flex flex-col items-center gap-2">
|
||||
<ToggleButton name="togglebutton" class="w-24" onLabel="On" offLabel="Off" />
|
||||
<Message v-if="$form.togglebutton?.invalid" severity="error">{{ $form.togglebutton.error?.message }}</Message>
|
||||
<div class="flex flex-col items-center gap-1">
|
||||
<ToggleButton name="consent" class="w-48" onLabel="Accept All" offLabel="Reject All" />
|
||||
<Message v-if="$form.consent?.invalid" severity="error" variant="simple">{{ $form.consent.error?.message }}</Message>
|
||||
</div>
|
||||
<Button type="submit" severity="secondary" label="Submit" />
|
||||
</Form>
|
||||
|
|
@ -101,11 +101,12 @@ import { z } from 'zod';
|
|||
|
||||
const toast = useToast();
|
||||
const initialValues = ref({
|
||||
togglebutton: false
|
||||
consent: false
|
||||
});
|
||||
|
||||
const resolver = ref(zodResolver(
|
||||
z.object({
|
||||
togglebutton: z.boolean().refine((val) => val === true, { message: 'ToggleButton is required.' })
|
||||
consent: z.boolean().refine((val) => val === true, { message: 'Consent is mandatory.' })
|
||||
})
|
||||
));
|
||||
|
||||
|
|
|
|||
|
|
@ -1,12 +1,12 @@
|
|||
<template>
|
||||
<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>
|
||||
<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">
|
||||
<ToggleSwitch name="toggleswitch" />
|
||||
<Message v-if="$form.toggleswitch?.invalid" severity="error">{{ $form.toggleswitch.error?.message }}</Message>
|
||||
<ToggleSwitch name="activation" />
|
||||
<Message v-if="$form.activation?.invalid" severity="error" size="small" variant="simple">{{ $form.activation.error?.message }}</Message>
|
||||
</div>
|
||||
<Button type="submit" severity="secondary" label="Submit" />
|
||||
</Form>
|
||||
|
|
@ -22,19 +22,19 @@ export default {
|
|||
data() {
|
||||
return {
|
||||
initialValues: {
|
||||
toggleswitch: false
|
||||
activation: false
|
||||
},
|
||||
resolver: zodResolver(
|
||||
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: {
|
||||
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">
|
||||
<ToggleSwitch name="toggleswitch" />
|
||||
<Message v-if="$form.toggleswitch?.invalid" severity="error">{{ $form.toggleswitch.error?.message }}</Message>
|
||||
<ToggleSwitch name="activation" />
|
||||
<Message v-if="$form.activation?.invalid" severity="error" size="small" variant="simple">{{ $form.activation.error?.message }}</Message>
|
||||
</div>
|
||||
<Button type="submit" severity="secondary" label="Submit" />
|
||||
</Form>
|
||||
|
|
@ -42,10 +42,10 @@ export default {
|
|||
options: `
|
||||
<template>
|
||||
<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">
|
||||
<ToggleSwitch name="toggleswitch" />
|
||||
<Message v-if="$form.toggleswitch?.invalid" severity="error">{{ $form.toggleswitch.error?.message }}</Message>
|
||||
<ToggleSwitch name="activation" />
|
||||
<Message v-if="$form.activation?.invalid" severity="error" size="small" variant="simple">{{ $form.activation.error?.message }}</Message>
|
||||
</div>
|
||||
<Button type="submit" severity="secondary" label="Submit" />
|
||||
</Form>
|
||||
|
|
@ -60,11 +60,11 @@ export default {
|
|||
data() {
|
||||
return {
|
||||
initialValues: {
|
||||
toggleswitch: false
|
||||
activation: false
|
||||
},
|
||||
resolver: zodResolver(
|
||||
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: `
|
||||
<template>
|
||||
<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">
|
||||
<ToggleSwitch name="toggleswitch" />
|
||||
<Message v-if="$form.toggleswitch?.invalid" severity="error">{{ $form.toggleswitch.error?.message }}</Message>
|
||||
<ToggleSwitch name="activation" />
|
||||
<Message v-if="$form.activation?.invalid" severity="error" size="small" variant="simple">{{ $form.activation.error?.message }}</Message>
|
||||
</div>
|
||||
<Button type="submit" severity="secondary" label="Submit" />
|
||||
</Form>
|
||||
|
|
@ -101,11 +101,11 @@ import { z } from 'zod';
|
|||
|
||||
const toast = useToast();
|
||||
const initialValues = ref({
|
||||
toggleswitch: false
|
||||
activation: false
|
||||
});
|
||||
const resolver = ref(zodResolver(
|
||||
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>
|
||||
|
|
|
|||
|
|
@ -4,9 +4,9 @@
|
|||
</DocSectionText>
|
||||
<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">
|
||||
<div class="flex flex-col gap-2">
|
||||
<div class="flex flex-col gap-1">
|
||||
<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>
|
||||
<Button type="submit" severity="secondary" label="Submit" />
|
||||
</Form>
|
||||
|
|
@ -27,16 +27,16 @@ export default {
|
|||
},
|
||||
resolver: zodResolver(
|
||||
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,
|
||||
code: {
|
||||
basic: `
|
||||
<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 />
|
||||
<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>
|
||||
<Button type="submit" severity="secondary" label="Submit" />
|
||||
</Form>
|
||||
|
|
@ -45,9 +45,9 @@ export default {
|
|||
<template>
|
||||
<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">
|
||||
<div class="flex flex-col gap-2">
|
||||
<div class="flex flex-col gap-1">
|
||||
<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>
|
||||
<Button type="submit" severity="secondary" label="Submit" />
|
||||
</Form>
|
||||
|
|
@ -67,7 +67,7 @@ export default {
|
|||
},
|
||||
resolver: zodResolver(
|
||||
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,
|
||||
|
|
@ -88,9 +88,9 @@ export default {
|
|||
<template>
|
||||
<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">
|
||||
<div class="flex flex-col gap-2">
|
||||
<div class="flex flex-col gap-1">
|
||||
<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>
|
||||
<Button type="submit" severity="secondary" label="Submit" />
|
||||
</Form>
|
||||
|
|
@ -110,7 +110,7 @@ const initialValues = ref({
|
|||
});
|
||||
const resolver = ref(zodResolver(
|
||||
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.' })
|
||||
})
|
||||
));
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue