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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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