Merge branch 'master' of https://github.com/primefaces/primevue
tugcekucukoglu
commit
48fdbb4356
|
|
@ -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.' })
|
||||
})
|
||||
));
|
||||
|
||||
|
|
|
|||
|
|
@ -58,9 +58,6 @@ export default defineNuxtConfig({
|
|||
app: {
|
||||
baseURL: baseUrl,
|
||||
head: {
|
||||
htmlAttrs: {
|
||||
dir: 'rtl'
|
||||
},
|
||||
title: 'PrimeVue - Vue UI Component Library',
|
||||
meta: [
|
||||
{ charset: 'utf-8' },
|
||||
|
|
|
|||
|
|
@ -234,7 +234,7 @@ importers:
|
|||
devDependencies:
|
||||
'@nuxt/devtools':
|
||||
specifier: ^0.8.5
|
||||
version: 0.8.5(nuxt@3.3.2(@types/node@18.19.61)(encoding@0.1.13)(eslint@8.57.1)(ioredis@5.4.1)(magicast@0.3.5)(optionator@0.9.4)(rollup@4.24.3)(terser@5.36.0)(typescript@5.6.3))(rollup@4.24.3)(vite@5.4.10(@types/node@18.19.61)(terser@5.36.0))
|
||||
version: 0.8.5(nuxt@3.3.2(@types/node@18.19.61)(encoding@0.1.13)(eslint@8.57.1)(ioredis@5.4.1)(magicast@0.3.5)(optionator@0.9.4)(rollup@4.24.3)(terser@5.36.0)(typescript@5.6.3))(rollup@4.24.3)
|
||||
'@nuxt/eslint-config':
|
||||
specifier: ^0.2.0
|
||||
version: 0.2.0(eslint@8.57.1)
|
||||
|
|
@ -246,7 +246,7 @@ importers:
|
|||
version: 3.13.2(rollup@4.24.3)
|
||||
'@nuxt/test-utils':
|
||||
specifier: ^3.7.3
|
||||
version: 3.14.4(@vue/test-utils@2.4.6)(h3@1.13.0)(magicast@0.3.5)(nitropack@2.9.7(encoding@0.1.13)(magicast@0.3.5))(rollup@4.24.3)(vite@5.4.10(@types/node@18.19.61)(terser@5.36.0))(vitest@1.6.0(@types/node@18.19.61)(terser@5.36.0))(vue-router@4.4.5(vue@3.5.12(typescript@5.6.3)))(vue@3.5.12(typescript@5.6.3))
|
||||
version: 3.14.4(@vue/test-utils@2.4.6)(h3@1.13.0)(magicast@0.3.5)(nitropack@2.9.7(encoding@0.1.13)(magicast@0.3.5))(rollup@4.24.3)(vitest@1.6.0(@types/node@18.19.61)(terser@5.36.0))(vue-router@4.4.5(vue@3.5.12(typescript@5.6.3)))(vue@3.5.12(typescript@5.6.3))
|
||||
'@primevue/themes':
|
||||
specifier: workspace:*
|
||||
version: link:../themes
|
||||
|
|
@ -8315,13 +8315,12 @@ snapshots:
|
|||
|
||||
'@nuxt/devalue@2.0.2': {}
|
||||
|
||||
'@nuxt/devtools-kit@0.8.5(magicast@0.3.5)(nuxt@3.3.2(@types/node@18.19.61)(encoding@0.1.13)(eslint@8.57.1)(ioredis@5.4.1)(magicast@0.3.5)(optionator@0.9.4)(rollup@4.24.3)(terser@5.36.0)(typescript@5.6.3))(rollup@4.24.3)(vite@5.4.10(@types/node@18.19.61)(terser@5.36.0))':
|
||||
'@nuxt/devtools-kit@0.8.5(magicast@0.3.5)(nuxt@3.3.2(@types/node@18.19.61)(encoding@0.1.13)(eslint@8.57.1)(ioredis@5.4.1)(magicast@0.3.5)(optionator@0.9.4)(rollup@4.24.3)(terser@5.36.0)(typescript@5.6.3))(rollup@4.24.3)':
|
||||
dependencies:
|
||||
'@nuxt/kit': 3.13.2(magicast@0.3.5)(rollup@4.24.3)
|
||||
'@nuxt/schema': 3.13.2(rollup@4.24.3)
|
||||
execa: 7.2.0
|
||||
nuxt: 3.3.2(@types/node@18.19.61)(encoding@0.1.13)(eslint@8.57.1)(ioredis@5.4.1)(magicast@0.3.5)(optionator@0.9.4)(rollup@4.24.3)(terser@5.36.0)(typescript@5.6.3)
|
||||
vite: 5.4.10(@types/node@18.19.61)(terser@5.36.0)
|
||||
transitivePeerDependencies:
|
||||
- magicast
|
||||
- rollup
|
||||
|
|
@ -8341,10 +8340,10 @@ snapshots:
|
|||
rc9: 2.1.2
|
||||
semver: 7.6.3
|
||||
|
||||
'@nuxt/devtools@0.8.5(nuxt@3.3.2(@types/node@18.19.61)(encoding@0.1.13)(eslint@8.57.1)(ioredis@5.4.1)(magicast@0.3.5)(optionator@0.9.4)(rollup@4.24.3)(terser@5.36.0)(typescript@5.6.3))(rollup@4.24.3)(vite@5.4.10(@types/node@18.19.61)(terser@5.36.0))':
|
||||
'@nuxt/devtools@0.8.5(nuxt@3.3.2(@types/node@18.19.61)(encoding@0.1.13)(eslint@8.57.1)(ioredis@5.4.1)(magicast@0.3.5)(optionator@0.9.4)(rollup@4.24.3)(terser@5.36.0)(typescript@5.6.3))(rollup@4.24.3)':
|
||||
dependencies:
|
||||
'@antfu/utils': 0.7.10
|
||||
'@nuxt/devtools-kit': 0.8.5(magicast@0.3.5)(nuxt@3.3.2(@types/node@18.19.61)(encoding@0.1.13)(eslint@8.57.1)(ioredis@5.4.1)(magicast@0.3.5)(optionator@0.9.4)(rollup@4.24.3)(terser@5.36.0)(typescript@5.6.3))(rollup@4.24.3)(vite@5.4.10(@types/node@18.19.61)(terser@5.36.0))
|
||||
'@nuxt/devtools-kit': 0.8.5(magicast@0.3.5)(nuxt@3.3.2(@types/node@18.19.61)(encoding@0.1.13)(eslint@8.57.1)(ioredis@5.4.1)(magicast@0.3.5)(optionator@0.9.4)(rollup@4.24.3)(terser@5.36.0)(typescript@5.6.3))(rollup@4.24.3)
|
||||
'@nuxt/devtools-wizard': 0.8.5
|
||||
'@nuxt/kit': 3.13.2(magicast@0.3.5)(rollup@4.24.3)
|
||||
birpc: 0.2.19
|
||||
|
|
@ -8375,9 +8374,8 @@ snapshots:
|
|||
simple-git: 3.27.0
|
||||
sirv: 2.0.4
|
||||
unimport: 3.13.1(rollup@4.24.3)
|
||||
vite: 5.4.10(@types/node@18.19.61)(terser@5.36.0)
|
||||
vite-plugin-inspect: 0.7.42(@nuxt/kit@3.13.2(magicast@0.3.5)(rollup@4.24.3))(rollup@4.24.3)(vite@5.4.10(@types/node@18.19.61)(terser@5.36.0))
|
||||
vite-plugin-vue-inspector: 3.7.2(vite@5.4.10(@types/node@18.19.61)(terser@5.36.0))
|
||||
vite-plugin-inspect: 0.7.42(@nuxt/kit@3.13.2(magicast@0.3.5)(rollup@4.24.3))(rollup@4.24.3)
|
||||
vite-plugin-vue-inspector: 3.7.2
|
||||
wait-on: 7.2.0
|
||||
which: 3.0.1
|
||||
ws: 8.18.0
|
||||
|
|
@ -8687,7 +8685,7 @@ snapshots:
|
|||
- supports-color
|
||||
- webpack-sources
|
||||
|
||||
'@nuxt/test-utils@3.14.4(@vue/test-utils@2.4.6)(h3@1.13.0)(magicast@0.3.5)(nitropack@2.9.7(encoding@0.1.13)(magicast@0.3.5))(rollup@4.24.3)(vite@5.4.10(@types/node@18.19.61)(terser@5.36.0))(vitest@1.6.0(@types/node@18.19.61)(terser@5.36.0))(vue-router@4.4.5(vue@3.5.12(typescript@5.6.3)))(vue@3.5.12(typescript@5.6.3))':
|
||||
'@nuxt/test-utils@3.14.4(@vue/test-utils@2.4.6)(h3@1.13.0)(magicast@0.3.5)(nitropack@2.9.7(encoding@0.1.13)(magicast@0.3.5))(rollup@4.24.3)(vitest@1.6.0(@types/node@18.19.61)(terser@5.36.0))(vue-router@4.4.5(vue@3.5.12(typescript@5.6.3)))(vue@3.5.12(typescript@5.6.3))':
|
||||
dependencies:
|
||||
'@nuxt/kit': 3.13.2(magicast@0.3.5)(rollup@4.24.3)
|
||||
'@nuxt/schema': 3.13.2(rollup@4.24.3)
|
||||
|
|
@ -8713,8 +8711,7 @@ snapshots:
|
|||
ufo: 1.5.4
|
||||
unenv: 1.10.0
|
||||
unplugin: 1.15.0(webpack-sources@3.2.3)
|
||||
vite: 5.4.10(@types/node@18.19.61)(terser@5.36.0)
|
||||
vitest-environment-nuxt: 1.0.1(@vue/test-utils@2.4.6)(h3@1.13.0)(magicast@0.3.5)(nitropack@2.9.7(encoding@0.1.13)(magicast@0.3.5))(rollup@4.24.3)(vite@5.4.10(@types/node@18.19.61)(terser@5.36.0))(vitest@1.6.0(@types/node@18.19.61)(terser@5.36.0))(vue-router@4.4.5(vue@3.5.12(typescript@5.6.3)))(vue@3.5.12(typescript@5.6.3))
|
||||
vitest-environment-nuxt: 1.0.1(@vue/test-utils@2.4.6)(h3@1.13.0)(magicast@0.3.5)(nitropack@2.9.7(encoding@0.1.13)(magicast@0.3.5))(rollup@4.24.3)(vitest@1.6.0(@types/node@18.19.61)(terser@5.36.0))(vue-router@4.4.5(vue@3.5.12(typescript@5.6.3)))(vue@3.5.12(typescript@5.6.3))
|
||||
vue: 3.5.12(typescript@5.6.3)
|
||||
vue-router: 4.4.5(vue@3.5.12(typescript@5.6.3))
|
||||
optionalDependencies:
|
||||
|
|
@ -14234,7 +14231,7 @@ snapshots:
|
|||
optionator: 0.9.4
|
||||
typescript: 5.6.3
|
||||
|
||||
vite-plugin-inspect@0.7.42(@nuxt/kit@3.13.2(magicast@0.3.5)(rollup@4.24.3))(rollup@4.24.3)(vite@5.4.10(@types/node@18.19.61)(terser@5.36.0)):
|
||||
vite-plugin-inspect@0.7.42(@nuxt/kit@3.13.2(magicast@0.3.5)(rollup@4.24.3))(rollup@4.24.3):
|
||||
dependencies:
|
||||
'@antfu/utils': 0.7.10
|
||||
'@rollup/pluginutils': 5.1.3(rollup@4.24.3)
|
||||
|
|
@ -14244,14 +14241,13 @@ snapshots:
|
|||
open: 9.1.0
|
||||
picocolors: 1.1.1
|
||||
sirv: 2.0.4
|
||||
vite: 5.4.10(@types/node@18.19.61)(terser@5.36.0)
|
||||
optionalDependencies:
|
||||
'@nuxt/kit': 3.13.2(magicast@0.3.5)(rollup@4.24.3)
|
||||
transitivePeerDependencies:
|
||||
- rollup
|
||||
- supports-color
|
||||
|
||||
vite-plugin-vue-inspector@3.7.2(vite@5.4.10(@types/node@18.19.61)(terser@5.36.0)):
|
||||
vite-plugin-vue-inspector@3.7.2:
|
||||
dependencies:
|
||||
'@babel/core': 7.26.0
|
||||
'@babel/plugin-proposal-decorators': 7.25.9(@babel/core@7.26.0)
|
||||
|
|
@ -14262,7 +14258,6 @@ snapshots:
|
|||
'@vue/compiler-dom': 3.5.12
|
||||
kolorist: 1.8.0
|
||||
magic-string: 0.30.12
|
||||
vite: 5.4.10(@types/node@18.19.61)(terser@5.36.0)
|
||||
transitivePeerDependencies:
|
||||
- supports-color
|
||||
|
||||
|
|
@ -14299,9 +14294,9 @@ snapshots:
|
|||
fsevents: 2.3.3
|
||||
terser: 5.36.0
|
||||
|
||||
vitest-environment-nuxt@1.0.1(@vue/test-utils@2.4.6)(h3@1.13.0)(magicast@0.3.5)(nitropack@2.9.7(encoding@0.1.13)(magicast@0.3.5))(rollup@4.24.3)(vite@5.4.10(@types/node@18.19.61)(terser@5.36.0))(vitest@1.6.0(@types/node@18.19.61)(terser@5.36.0))(vue-router@4.4.5(vue@3.5.12(typescript@5.6.3)))(vue@3.5.12(typescript@5.6.3)):
|
||||
vitest-environment-nuxt@1.0.1(@vue/test-utils@2.4.6)(h3@1.13.0)(magicast@0.3.5)(nitropack@2.9.7(encoding@0.1.13)(magicast@0.3.5))(rollup@4.24.3)(vitest@1.6.0(@types/node@18.19.61)(terser@5.36.0))(vue-router@4.4.5(vue@3.5.12(typescript@5.6.3)))(vue@3.5.12(typescript@5.6.3)):
|
||||
dependencies:
|
||||
'@nuxt/test-utils': 3.14.4(@vue/test-utils@2.4.6)(h3@1.13.0)(magicast@0.3.5)(nitropack@2.9.7(encoding@0.1.13)(magicast@0.3.5))(rollup@4.24.3)(vite@5.4.10(@types/node@18.19.61)(terser@5.36.0))(vitest@1.6.0(@types/node@18.19.61)(terser@5.36.0))(vue-router@4.4.5(vue@3.5.12(typescript@5.6.3)))(vue@3.5.12(typescript@5.6.3))
|
||||
'@nuxt/test-utils': 3.14.4(@vue/test-utils@2.4.6)(h3@1.13.0)(magicast@0.3.5)(nitropack@2.9.7(encoding@0.1.13)(magicast@0.3.5))(rollup@4.24.3)(vitest@1.6.0(@types/node@18.19.61)(terser@5.36.0))(vue-router@4.4.5(vue@3.5.12(typescript@5.6.3)))(vue@3.5.12(typescript@5.6.3))
|
||||
transitivePeerDependencies:
|
||||
- '@cucumber/cucumber'
|
||||
- '@jest/globals'
|
||||
|
|
|
|||
Loading…
Reference in New Issue