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

Update forms doc

pull/6697/head
Cagatay Civici 2024-10-31 10:56:10 +03:00
parent 8dc4b74d35
commit e8f3a62077
12 changed files with 200 additions and 126 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
apps/showcase/doc/clt/DownloadDoc.vue
View File

@ -1,6 +1,6 @@
<template> <template>
<DocSectionText v-bind="$attrs"> <DocSectionText v-bind="$attrs">
<p>PrimeCLT is available for download on <a href="https://www.npmjs.com/package/primeclt">npm Registry</a>.</p> <p>PrimeCLT is available for download on <a href="https://www.npmjs.com/package/primeclt">npm registry</a>.</p>
</DocSectionText> </DocSectionText>
<DocSectionCode :code="code" hideToggleCode hideStackBlitz /> <DocSectionCode :code="code" hideToggleCode hideStackBlitz />
</template> </template>

47
apps/showcase/doc/forms/BasicDoc.vue
View File

@ -1,14 +1,43 @@
<template> <template>
<DocSectionText v-bind="$attrs"> <DocSectionText v-bind="$attrs">
<p> <p>
Form is compatible with PrimeVue components, enabling smooth integration and functionality. Each component is linked to Form via a <i>name</i> property, which the form uses to create a state object for tracking values, errors and actions. All PrimeVue form components are designed for seamless integration with the forms library. Instead of using the standard <i>v-model</i>, the <i>name</i> property is used to link a state object that tracks values, errors, and actions. The
form component provides four key properties for state management.
</p> </p>
</DocSectionText> </DocSectionText>
<div class="doc-tablewrapper">
<table class="doc-table">
<thead>
<tr>
<th class="w-1/4">Property</th>
<th class="w-3/4">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td>v-slot="$form"</td>
<td>Exposes the main <i>$form</i> object that tracks the state management of the fields.</td>
</tr>
<tr>
<td>initialValues</td>
<td>Specifies the default values to initiate the form with.</td>
</tr>
<tr>
<td>resolver</td>
<td>The validation handler to implement validations or to bind a schema like <i>Zod</i>, <i>Yup</i>, <i>Valibot</i> and more.</td>
</tr>
<tr>
<td>@submit</td>
<td>The event handler to execute when the form is submitted.</td>
</tr>
</tbody>
</table>
</div>
<div class="card flex justify-center"> <div class="card flex justify-center">
<Form v-slot="$form" :initialValues :resolver @submit="onFormSubmit" class="flex flex-col gap-4 w-full sm:w-56"> <Form v-slot="$form" :initialValues :resolver @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">
<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.error?.message }}</Message> <Message v-if="$form.username?.invalid" severity="error" size="small" variant="simple">{{ $form.username.error?.message }}</Message>
</div> </div>
<Button type="submit" severity="secondary" label="Submit" /> <Button type="submit" severity="secondary" label="Submit" />
</Form> </Form>
@ -26,9 +55,9 @@ export default {
code: { code: {
basic: ` basic: `
<Form v-slot="$form" :initialValues :resolver @submit="onFormSubmit" class="flex flex-col gap-4 w-full sm:w-56"> <Form v-slot="$form" :initialValues :resolver @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">
<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.error?.message }}</Message> <Message v-if="$form.username?.invalid" severity="error" size="small" variant="simple">{{ $form.username.error?.message }}</Message>
</div> </div>
<Button type="submit" severity="secondary" label="Submit" /> <Button type="submit" severity="secondary" label="Submit" />
</Form> </Form>
@ -39,9 +68,9 @@ export default {
<Toast /> <Toast />
<Form v-slot="$form" :initialValues :resolver @submit="onFormSubmit" class="flex flex-col gap-4 w-full sm:w-56"> <Form v-slot="$form" :initialValues :resolver @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">
<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.error?.message }}</Message> <Message v-if="$form.username?.invalid" severity="error" size="small" variant="simple">{{ $form.username.error?.message }}</Message>
</div> </div>
<Button type="submit" severity="secondary" label="Submit" /> <Button type="submit" severity="secondary" label="Submit" />
</Form> </Form>
@ -84,9 +113,9 @@ export default {
<Toast /> <Toast />
<Form v-slot="$form" :initialValues :resolver @submit="onFormSubmit" class="flex flex-col gap-4 w-full sm:w-56"> <Form v-slot="$form" :initialValues :resolver @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">
<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.error?.message }}</Message> <Message v-if="$form.username?.invalid" severity="error" size="small" variant="simple">{{ $form.username.error?.message }}</Message>
</div> </div>
<Button type="submit" severity="secondary" label="Submit" /> <Button type="submit" severity="secondary" label="Submit" />
</Form> </Form>

27
apps/showcase/doc/forms/DownloadDoc.vue Normal file
View File

@ -0,0 +1,27 @@
<template>
<DocSectionText v-bind="$attrs">
<p>Forms add-on is available for download on npm registry.</p>
</DocSectionText>
<DocSectionCode :code="code" hideToggleCode hideStackBlitz />
</template>
<script>
export default {
data() {
return {
code: {
basic: `
# Using npm
npm install @primevue/forms
# Using yarn
yarn add @primevue/forms
# Using pnpm
pnpm add @primevue/forms
`
}
};
}
};
</script>

6
apps/showcase/doc/forms/DynamicDoc.vue
View File

@ -1,6 +1,10 @@
<template> <template>
<DocSectionText v-bind="$attrs"> <DocSectionText v-bind="$attrs">
<p>This section demonstrates how to create a dynamic form using a custom Form component. It showcases an example where form fields are generated dynamically based on the provided configuration, allowing for flexible form structures.</p> <p>
This section demonstrates how to create a dynamic form using a custom Form component. It showcases an example where form fields are generated dynamically based on the provided configuration, allowing for flexible form structures. The
components named <i>Dynamic*</i> shown in this example are not built-in, and only available for sampling purposes. First form uses a declarative approach whereas second form goes for a programmatic approach. We suggest running this sample
in StackBlitz to view the comprehensive implementation.
</p>
</DocSectionText> </DocSectionText>
<div class="card grid md:grid-cols-2 gap-4 w-full"> <div class="card grid md:grid-cols-2 gap-4 w-full">
<Fieldset legend="Form 1" pt:content:class="flex justify-center"> <Fieldset legend="Form 1" pt:content:class="flex justify-center">

6
apps/showcase/doc/forms/ImportDoc.vue
View File

@ -1,5 +1,7 @@
<template> <template>
<DocSectionText v-bind="$attrs" /> <DocSectionText v-bind="$attrs">
<p>The form component is responsible for managing the form state and must encapsulate the form fields.</p>
</DocSectionText>
<DocSectionCode :code="code" hideToggleCode importCode hideStackBlitz /> <DocSectionCode :code="code" hideToggleCode importCode hideStackBlitz />
</template> </template>
@ -9,7 +11,7 @@ export default {
return { return {
code: { code: {
basic: ` basic: `
import Form from '@primevue/form'; import Form from '@primevue/forms';
` `
} }
}; };

90
apps/showcase/doc/forms/ResolversDoc.vue
View File

@ -1,40 +1,42 @@
<template> <template>
<DocSectionText v-bind="$attrs"> <DocSectionText v-bind="$attrs">
<p> <p>
It can be integrated with with schema libraries such as <a href="https://zod.dev/">Zod</a>, <a href="https://github.com/jquense/yup">Yup</a>, <a href="https://joi.dev/">Joi</a>, <a href="https://valibot.dev/">Valibot</a>, Validations are implemented the with <i>resolver</i> property. A custom resolver is responsible for handling the validation and returning an <i>errors</i> object with key-value pairs where key is the form field name and value is an array
<a href="https://docs.superstructjs.org/">Superstruct</a> or custom validation logic is possible using <i>resolver</i> property, with available resolvers from <i>@primevue/form/resolvers</i> for each schema. of error object data. For productivity, we recommend using a schema validation library instead of building your own custom validation logic. The forms library provide built-in resolvers for popular options including
<a href="https://zod.dev/">Zod</a>, <a href="https://github.com/jquense/yup">Yup</a>, <a href="https://joi.dev/">Joi</a>, <a href="https://valibot.dev/">Valibot</a>, and <a href="https://docs.superstructjs.org/">Superstruct</a> that can
be be imported from <i>@primevue/form/resolvers</i> path.
</p> </p>
</DocSectionText> </DocSectionText>
<div class="card flex flex-col items-center gap-5"> <div class="card flex flex-col items-center gap-5">
<Fieldset legend="Schema"> <Fieldset legend="Schema">
<RadioButtonGroup v-model="selectedSchema" name="schema" class="flex flex-wrap gap-4" @update:modelValue="changeResolver"> <RadioButtonGroup v-model="selectedSchema" name="schema" class="flex flex-wrap gap-4" @update:modelValue="changeResolver">
<div class="flex items-center"> <div class="flex items-center gap-2">
<RadioButton inputId="zod" value="Zod" /> <RadioButton inputId="zod" value="Zod" />
<label for="zod" class="ml-2">Zod</label> <label for="zod">Zod</label>
</div> </div>
<div class="flex items-center"> <div class="flex items-center gap-2">
<RadioButton inputId="yup" value="Yup" /> <RadioButton inputId="yup" value="Yup" />
<label for="yup" class="ml-2">Yup</label> <label for="yup">Yup</label>
</div> </div>
<div class="flex items-center"> <div class="flex items-center gap-2">
<RadioButton inputId="valibot" value="Valibot" /> <RadioButton inputId="valibot" value="Valibot" />
<label for="valibot" class="ml-2">Valibot</label> <label for="valibot">Valibot</label>
</div> </div>
<div class="flex items-center"> <div class="flex items-center gap-2">
<RadioButton inputId="superStruct" value="SuperStruct" /> <RadioButton inputId="superStruct" value="SuperStruct" />
<label for="superStruct" class="ml-2">SuperStruct</label> <label for="superStruct">SuperStruct</label>
</div> </div>
<div class="flex items-center"> <div class="flex items-center gap-2">
<RadioButton inputId="custom" value="Custom" /> <RadioButton inputId="custom" value="Custom" />
<label for="custom" class="ml-2">Custom</label> <label for="custom">Custom</label>
</div> </div>
</RadioButtonGroup> </RadioButtonGroup>
</Fieldset> </Fieldset>
<Form v-slot="$form" :initialValues :resolver @submit="onFormSubmit" class="flex flex-col gap-4 w-full sm:w-56"> <Form v-slot="$form" :initialValues :resolver="resolver" @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">
<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.error.message }}</Message> <Message v-if="$form.username?.invalid" severity="error" size="small" variant="simple">{{ $form.username.error.message }}</Message>
</div> </div>
<Button type="submit" severity="secondary" label="Submit" /> <Button type="submit" severity="secondary" label="Submit" />
</Form> </Form>
@ -63,10 +65,10 @@ export default {
), ),
code: { code: {
basic: ` basic: `
<Form v-slot="$form" :initialValues :resolver @submit="onFormSubmit" class="flex flex-col gap-4 w-full sm:w-56"> <Form v-slot="$form" :initialValues :resolver="resolver" @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">
<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.error.message }}</Message> <Message v-if="$form.username?.invalid" severity="error" size="small" variant="simple">{{ $form.username.error.message }}</Message>
</div> </div>
<Button type="submit" severity="secondary" label="Submit" /> <Button type="submit" severity="secondary" label="Submit" />
</Form> </Form>
@ -78,33 +80,33 @@ export default {
<Fieldset legend="Schema"> <Fieldset legend="Schema">
<RadioButtonGroup v-model="selectedSchema" name="schema" class="flex flex-wrap gap-4" @update:modelValue="changeResolver"> <RadioButtonGroup v-model="selectedSchema" name="schema" class="flex flex-wrap gap-4" @update:modelValue="changeResolver">
<div class="flex items-center"> <div class="flex items-center gap-2">
<RadioButton inputId="zod" value="Zod" /> <RadioButton inputId="zod" value="Zod" />
<label for="zod" class="ml-2">Zod</label> <label for="zod">Zod</label>
</div> </div>
<div class="flex items-center"> <div class="flex items-center gap-2">
<RadioButton inputId="yup" value="Yup" /> <RadioButton inputId="yup" value="Yup" />
<label for="yup" class="ml-2">Yup</label> <label for="yup">Yup</label>
</div> </div>
<div class="flex items-center"> <div class="flex items-center gap-2">
<RadioButton inputId="valibot" value="Valibot" /> <RadioButton inputId="valibot" value="Valibot" />
<label for="valibot" class="ml-2">Valibot</label> <label for="valibot">Valibot</label>
</div> </div>
<div class="flex items-center"> <div class="flex items-center gap-2">
<RadioButton inputId="superStruct" value="SuperStruct" /> <RadioButton inputId="superStruct" value="SuperStruct" />
<label for="superStruct" class="ml-2">SuperStruct</label> <label for="superStruct">SuperStruct</label>
</div> </div>
<div class="flex items-center"> <div class="flex items-center gap-2">
<RadioButton inputId="custom" value="Custom" /> <RadioButton inputId="custom" value="Custom" />
<label for="custom" class="ml-2">Custom</label> <label for="custom">Custom</label>
</div> </div>
</RadioButtonGroup> </RadioButtonGroup>
</Fieldset> </Fieldset>
<Form v-slot="$form" :initialValues :resolver @submit="onFormSubmit" class="flex flex-col gap-4 w-full sm:w-56"> <Form v-slot="$form" :initialValues :resolver="resolver" @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">
<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.error.message }}</Message> <Message v-if="$form.username?.invalid" severity="error" size="small" variant="simple">{{ $form.username.error.message }}</Message>
</div> </div>
<Button type="submit" severity="secondary" label="Submit" /> <Button type="submit" severity="secondary" label="Submit" />
</Form> </Form>
@ -188,33 +190,33 @@ export default {
<Fieldset legend="Schema"> <Fieldset legend="Schema">
<RadioButtonGroup v-model="selectedSchema" name="schema" class="flex flex-wrap gap-4" @update:modelValue="changeResolver"> <RadioButtonGroup v-model="selectedSchema" name="schema" class="flex flex-wrap gap-4" @update:modelValue="changeResolver">
<div class="flex items-center"> <div class="flex items-center gap-2">
<RadioButton inputId="zod" value="Zod" /> <RadioButton inputId="zod" value="Zod" />
<label for="zod" class="ml-2">Zod</label> <label for="zod">Zod</label>
</div> </div>
<div class="flex items-center"> <div class="flex items-center gap-2">
<RadioButton inputId="yup" value="Yup" /> <RadioButton inputId="yup" value="Yup" />
<label for="yup" class="ml-2">Yup</label> <label for="yup">Yup</label>
</div> </div>
<div class="flex items-center"> <div class="flex items-center gap-2">
<RadioButton inputId="valibot" value="Valibot" /> <RadioButton inputId="valibot" value="Valibot" />
<label for="valibot" class="ml-2">Valibot</label> <label for="valibot">Valibot</label>
</div> </div>
<div class="flex items-center"> <div class="flex items-center gap-2">
<RadioButton inputId="superStruct" value="SuperStruct" /> <RadioButton inputId="superStruct" value="SuperStruct" />
<label for="superStruct" class="ml-2">SuperStruct</label> <label for="superStruct">SuperStruct</label>
</div> </div>
<div class="flex items-center"> <div class="flex items-center gap-2">
<RadioButton inputId="custom" value="Custom" /> <RadioButton inputId="custom" value="Custom" />
<label for="custom" class="ml-2">Custom</label> <label for="custom">Custom</label>
</div> </div>
</RadioButtonGroup> </RadioButtonGroup>
</Fieldset> </Fieldset>
<Form v-slot="$form" :initialValues :resolver @submit="onFormSubmit" class="flex flex-col gap-4 w-full sm:w-56"> <Form v-slot="$form" :initialValues :resolver="resolver" @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">
<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.error.message }}</Message> <Message v-if="$form.username?.invalid" severity="error" size="small" variant="simple">{{ $form.username.error.message }}</Message>
</div> </div>
<Button type="submit" severity="secondary" label="Submit" /> <Button type="submit" severity="secondary" label="Submit" />
</Form> </Form>

10
apps/showcase/doc/forms/StatesDoc.vue
View File

@ -1,6 +1,6 @@
<template> <template>
<DocSectionText v-bind="$attrs"> <DocSectionText v-bind="$attrs">
<p>Form uses the <i>name</i> property to create a state object for tracking values, errors, and actions.</p> <p>The <i>$form</i> object tracks the state management of the fields. Each field is linked with the <i>name</i> property. View the <i>FormFieldState</i> type in the API documentation for details about each property.</p>
</DocSectionText> </DocSectionText>
<div class="card flex justify-center"> <div class="card flex justify-center">
<Form v-slot="$form" :initialValues :resolver @submit="onFormSubmit" class="grid lg:grid-cols-2 gap-4 w-full"> <Form v-slot="$form" :initialValues :resolver @submit="onFormSubmit" class="grid lg:grid-cols-2 gap-4 w-full">
@ -8,7 +8,7 @@
<InputText name="username" type="text" placeholder="Username" class="w-full sm:w-56" /> <InputText name="username" type="text" placeholder="Username" class="w-full sm:w-56" />
<Button type="submit" severity="secondary" label="Submit" class="w-full sm:w-56" /> <Button type="submit" severity="secondary" label="Submit" class="w-full sm:w-56" />
</div> </div>
<Fieldset legend="Form States"> <Fieldset legend="Form States" class="h-80 overflow-auto">
<pre class="whitespace-pre-wrap">{{ $form }}</pre> <pre class="whitespace-pre-wrap">{{ $form }}</pre>
</Fieldset> </Fieldset>
</Form> </Form>
@ -30,7 +30,7 @@ export default {
<InputText name="username" type="text" placeholder="Username" class="w-full sm:w-56" /> <InputText name="username" type="text" placeholder="Username" class="w-full sm:w-56" />
<Button type="submit" severity="secondary" label="Submit" class="w-full sm:w-56" /> <Button type="submit" severity="secondary" label="Submit" class="w-full sm:w-56" />
</div> </div>
<Fieldset legend="Form States"> <Fieldset legend="Form States" class="h-80 overflow-auto">
<pre class="whitespace-pre-wrap">{{ $form }}</pre> <pre class="whitespace-pre-wrap">{{ $form }}</pre>
</Fieldset> </Fieldset>
</Form> </Form>
@ -45,7 +45,7 @@ export default {
<InputText name="username" type="text" placeholder="Username" class="w-full sm:w-56" /> <InputText name="username" type="text" placeholder="Username" class="w-full sm:w-56" />
<Button type="submit" severity="secondary" label="Submit" class="w-full sm:w-56" /> <Button type="submit" severity="secondary" label="Submit" class="w-full sm:w-56" />
</div> </div>
<Fieldset legend="Form States"> <Fieldset legend="Form States" class="h-80 overflow-auto">
<pre class="whitespace-pre-wrap">{{ $form }}</pre> <pre class="whitespace-pre-wrap">{{ $form }}</pre>
</Fieldset> </Fieldset>
</Form> </Form>
@ -96,7 +96,7 @@ export default {
<InputText name="username" type="text" placeholder="Username" class="w-full sm:w-56" /> <InputText name="username" type="text" placeholder="Username" class="w-full sm:w-56" />
<Button type="submit" severity="secondary" label="Submit" class="w-full sm:w-56" /> <Button type="submit" severity="secondary" label="Submit" class="w-full sm:w-56" />
</div> </div>
<Fieldset legend="Form States"> <Fieldset legend="Form States" class="h-80 overflow-auto">
<pre class="whitespace-pre-wrap">{{ $form }}</pre> <pre class="whitespace-pre-wrap">{{ $form }}</pre>
</Fieldset> </Fieldset>
</Form> </Form>

17
apps/showcase/doc/forms/SubmitDoc.vue
View File

@ -1,18 +1,21 @@
<template> <template>
<DocSectionText v-bind="$attrs"> <DocSectionText v-bind="$attrs">
<p>The <i>submit</i> callback provides an object containing the form's validity, all errors, and current states. This offers access to the form values as well as validation status and any existing errors during submission.</p> <p>
The <i>submit</i> callback returns an object that encapsulates the form's validity, any existing errors, and its current state. This enables access to the form values, validation status, and any errors present at the time of submission.
View the <i>FormSubmitEvent</i> in the API documentation for more information about the available event data.
</p>
</DocSectionText> </DocSectionText>
<div class="card flex justify-center"> <div class="card flex justify-center">
<Form v-slot="$form" :initialValues :resolver @submit="onFormSubmit" class="flex flex-col gap-4 w-full sm:w-60"> <Form v-slot="$form" :initialValues :resolver @submit="onFormSubmit" class="flex flex-col gap-4 w-full sm:w-60">
<div class="flex flex-col gap-2"> <div class="flex flex-col gap-1">
<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.error.message }}</Message> <Message v-if="$form.username?.invalid" severity="error" size="small" variant="simple">{{ $form.username.error.message }}</Message>
</div> </div>
<div class="flex flex-col gap-2"> <div class="flex flex-col gap-1">
<Password name="password" placeholder="Password" :feedback="false" toggleMask fluid /> <Password name="password" placeholder="Password" :feedback="false" toggleMask fluid />
<Message v-if="$form.password?.invalid" severity="error"> <Message v-if="$form.password?.invalid" severity="error" size="small" variant="simple">
<ul class="mx-1 px-3"> <ul class="my-0 px-4 flex flex-col gap-1">
<li v-for="(error, index) of $form.password.errors" :key="index" class="py-1">{{ error.message }}</li> <li v-for="(error, index) of $form.password.errors" :key="index">{{ error.message }}</li>
</ul> </ul>
</Message> </Message>
</div> </div>

109
apps/showcase/doc/forms/ValidateOnDoc.vue
View File

@ -1,23 +1,24 @@
<template> <template>
<DocSectionText v-bind="$attrs"> <DocSectionText v-bind="$attrs">
<p> <p>
Form component supports flexible validation triggers, allowing validation on value updates, blur events, form mount, or submission, with options to apply this behavior globally or to specific fields via <i>validateOnValueUpdate</i>, Form component supports flexible validation triggers, allowing validation on value updates, blur events, form mount, or submission. These behaviors can be configured at form level or on specific fields via the
<i>validateOnBlur</i>, <i>validateOnMount</i>, and <i>validateOnSubmit</i>, which can also be set in PrimeVue components using <i>formControl</i> property. <i>validateOnValueUpdate</i>, <i>validateOnBlur</i>, <i>validateOnMount</i>, and <i>validateOnSubmit</i> options of the <i>formControl</i> property.
</p> </p>
<p>In this example, form disables <i>validateOnValueUpdate</i> and enables <i>validateOnBlur</i> at form level, and validates <b>firstName</b> on mount. The <i>firstName</i> field, overrides the form level setting locally.</p>
</DocSectionText> </DocSectionText>
<div class="card flex justify-center"> <div class="card flex justify-center">
<Form v-slot="$form" :initialValues :resolver :validateOnValueUpdate="false" :validateOnBlur="true" :validateOnMount="['name']" @submit="onFormSubmit" class="flex flex-col gap-4 w-full sm:w-56"> <Form v-slot="$form" :initialValues :resolver :validateOnValueUpdate="false" :validateOnBlur="true" :validateOnMount="['firstName']" @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">
<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.error.message }}</Message> <Message v-if="$form.username?.invalid" severity="error" size="small" variant="simple">{{ $form.username.error.message }}</Message>
</div> </div>
<div class="flex flex-col gap-2"> <div class="flex flex-col gap-1">
<InputText name="name" type="text" placeholder="Name" fluid :formControl="{ validateOnValueUpdate: true }" /> <InputText name="firstName" type="text" placeholder="First Name" fluid :formControl="{ validateOnValueUpdate: true }" />
<Message v-if="$form.name?.invalid" severity="error">{{ $form.name.error.message }}</Message> <Message v-if="$form.firstName?.invalid" severity="error" size="small" variant="simple">{{ $form.firstName.error.message }}</Message>
</div> </div>
<div class="flex flex-col gap-2"> <div class="flex flex-col gap-1">
<InputText name="surname" type="text" placeholder="Surname" fluid /> <InputText name="lastName" type="text" placeholder="Last Name" fluid />
<Message v-if="$form.surname?.invalid" severity="error">{{ $form.surname.error.message }}</Message> <Message v-if="$form.lastName?.invalid" severity="error" size="small" variant="simple">{{ $form.lastName.error.message }}</Message>
</div> </div>
<Button type="submit" severity="secondary" label="Submit" /> <Button type="submit" severity="secondary" label="Submit" />
</Form> </Form>
@ -31,23 +32,23 @@ export default {
return { return {
initialValues: { initialValues: {
username: '', username: '',
name: '', firstName: '',
surname: '' lastName: ''
}, },
code: { code: {
basic: ` basic: `
<Form v-slot="$form" :initialValues :resolver :validateOnValueUpdate="false" :validateOnBlur="true" :validateOnMount="['name']" @submit="onFormSubmit" class="flex flex-col gap-4 w-full sm:w-56"> <Form v-slot="$form" :initialValues :resolver :validateOnValueUpdate="false" :validateOnBlur="true" :validateOnMount="['firstName']" @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">
<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.error.message }}</Message> <Message v-if="$form.username?.invalid" severity="error" size="small" variant="simple">{{ $form.username.error.message }}</Message>
</div> </div>
<div class="flex flex-col gap-2"> <div class="flex flex-col gap-1">
<InputText name="name" type="text" placeholder="Name" fluid :formControl="{ validateOnValueUpdate: true }" /> <InputText name="firstName" type="text" placeholder="First Name" fluid :formControl="{ validateOnValueUpdate: true }" />
<Message v-if="$form.name?.invalid" severity="error">{{ $form.name.error.message }}</Message> <Message v-if="$form.firstName?.invalid" severity="error" size="small" variant="simple">{{ $form.firstName.error.message }}</Message>
</div> </div>
<div class="flex flex-col gap-2"> <div class="flex flex-col gap-1">
<InputText name="surname" type="text" placeholder="Surname" fluid /> <InputText name="lastName" type="text" placeholder="Last Name" fluid />
<Message v-if="$form.surname?.invalid" severity="error">{{ $form.surname.error.message }}</Message> <Message v-if="$form.lastName?.invalid" severity="error" size="small" variant="simple">{{ $form.lastName.error.message }}</Message>
</div> </div>
<Button type="submit" severity="secondary" label="Submit" /> <Button type="submit" severity="secondary" label="Submit" />
</Form> </Form>
@ -57,18 +58,18 @@ export default {
<div class="card flex justify-center"> <div class="card flex justify-center">
<Toast /> <Toast />
<Form v-slot="$form" :initialValues :resolver :validateOnValueUpdate="false" :validateOnBlur="true" :validateOnMount="['name']" @submit="onFormSubmit" class="flex flex-col gap-4 w-full sm:w-56"> <Form v-slot="$form" :initialValues :resolver :validateOnValueUpdate="false" :validateOnBlur="true" :validateOnMount="['firstName']" @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">
<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.error.message }}</Message> <Message v-if="$form.username?.invalid" severity="error" size="small" variant="simple">{{ $form.username.error.message }}</Message>
</div> </div>
<div class="flex flex-col gap-2"> <div class="flex flex-col gap-1">
<InputText name="name" type="text" placeholder="Name" fluid :formControl="{ validateOnValueUpdate: true }"/> <InputText name="firstName" type="text" placeholder="First Name" fluid :formControl="{ validateOnValueUpdate: true }" />
<Message v-if="$form.name?.invalid" severity="error">{{ $form.name.error.message }}</Message> <Message v-if="$form.firstName?.invalid" severity="error" size="small" variant="simple">{{ $form.firstName.error.message }}</Message>
</div> </div>
<div class="flex flex-col gap-2"> <div class="flex flex-col gap-1">
<InputText name="surname" type="text" placeholder="Surname" fluid /> <InputText name="lastName" type="text" placeholder="Last Name" fluid />
<Message v-if="$form.surname?.invalid" severity="error">{{ $form.surname.error.message }}</Message> <Message v-if="$form.lastName?.invalid" severity="error" size="small" variant="simple">{{ $form.lastName.error.message }}</Message>
</div> </div>
<Button type="submit" severity="secondary" label="Submit" /> <Button type="submit" severity="secondary" label="Submit" />
</Form> </Form>
@ -81,8 +82,8 @@ export default {
return { return {
initialValues: { initialValues: {
username: '', username: '',
name: '', firstName: '',
surname: '' lastName: ''
} }
}; };
}, },
@ -94,12 +95,12 @@ export default {
errors.username = [{ message: 'Username is required.' }]; errors.username = [{ message: 'Username is required.' }];
} }
if (!values.name) { if (!values.firstName) {
errors.name = [{ message: 'Name is required.' }]; errors.firstName = [{ message: 'First name is required.' }];
} }
if (!values.surname) { if (!values.lastName) {
errors.surname = [{ message: 'Surname is required.' }]; errors.lastName = [{ message: 'Last name is required.' }];
} }
return { return {
@ -120,18 +121,18 @@ export default {
<div class="card flex justify-center"> <div class="card flex justify-center">
<Toast /> <Toast />
<Form v-slot="$form" :initialValues :resolver :validateOnValueUpdate="false" :validateOnBlur="true" :validateOnMount="['name']" @submit="onFormSubmit" class="flex flex-col gap-4 w-full sm:w-56"> <Form v-slot="$form" :initialValues :resolver :validateOnValueUpdate="false" :validateOnBlur="true" :validateOnMount="['firstName']" @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">
<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.error.message }}</Message> <Message v-if="$form.username?.invalid" severity="error" size="small" variant="simple">{{ $form.username.error.message }}</Message>
</div> </div>
<div class="flex flex-col gap-2"> <div class="flex flex-col gap-1">
<InputText name="name" type="text" placeholder="Name" fluid :formControl="{ validateOnValueUpdate: true }" /> <InputText name="firstName" type="text" placeholder="First Name" fluid :formControl="{ validateOnValueUpdate: true }" />
<Message v-if="$form.name?.invalid" severity="error">{{ $form.name.error.message }}</Message> <Message v-if="$form.firstName?.invalid" severity="error" size="small" variant="simple">{{ $form.firstName.error.message }}</Message>
</div> </div>
<div class="flex flex-col gap-2"> <div class="flex flex-col gap-1">
<InputText name="surname" type="text" placeholder="Surname" fluid /> <InputText name="lastName" type="text" placeholder="Last Name" fluid />
<Message v-if="$form.surname?.invalid" severity="error">{{ $form.surname.error.message }}</Message> <Message v-if="$form.lastName?.invalid" severity="error" size="small" variant="simple">{{ $form.lastName.error.message }}</Message>
</div> </div>
<Button type="submit" severity="secondary" label="Submit" /> <Button type="submit" severity="secondary" label="Submit" />
</Form> </Form>
@ -146,8 +147,8 @@ const toast = useToast();
const initialValues = ref({ const initialValues = ref({
username: '', username: '',
name: '', firstName: '',
surname: '' lastName: ''
}); });
const resolver = ({ values }) => { const resolver = ({ values }) => {
@ -158,11 +159,11 @@ const resolver = ({ values }) => {
} }
if (!values.name) { if (!values.name) {
errors.name = [{ message: 'Name is required.' }]; errors.firstName = [{ message: 'First name is required.' }];
} }
if (!values.surname) { if (!values.surname) {
errors.surname = [{ message: 'Surname is required.' }]; errors.lastName = [{ message: 'Last name is required.' }];
} }
return { return {
@ -188,12 +189,12 @@ const onFormSubmit = ({ valid }) => {
errors.username = [{ message: 'Username is required.' }]; errors.username = [{ message: 'Username is required.' }];
} }
if (!values.name) { if (!values.firstName) {
errors.name = [{ message: 'Name is required.' }]; errors.firstName = [{ message: 'First name is required.' }];
} }
if (!values.surname) { if (!values.lastName) {
errors.surname = [{ message: 'Surname is required.' }]; errors.lastName = [{ message: 'Last name is required.' }];
} }
return { return {

2
apps/showcase/doc/nuxt/DownloadDoc.vue
View File

@ -1,7 +1,7 @@
<template> <template>
<DocSectionText v-bind="$attrs"> <DocSectionText v-bind="$attrs">
<p> <p>
PrimeVue is available for download on <a href="https://www.npmjs.com/package/primevue">npm Registry</a> along with the official PrimeVue is available for download on <a href="https://www.npmjs.com/package/primevue">npm registry</a> along with the official
<a href="https://www.npmjs.com/package/@primevue/nuxt-module" target="_blank" rel="noopener noreferrer">@primevue/nuxt-module</a>. <a href="https://www.npmjs.com/package/@primevue/nuxt-module" target="_blank" rel="noopener noreferrer">@primevue/nuxt-module</a>.
</p> </p>
</DocSectionText> </DocSectionText>

2
apps/showcase/doc/vite/DownloadDoc.vue
View File

@ -1,6 +1,6 @@
<template> <template>
<DocSectionText v-bind="$attrs"> <DocSectionText v-bind="$attrs">
<p>PrimeVue is available for download on <a href="https://www.npmjs.com/package/primevue">npm Registry</a>.</p> <p>PrimeVue is available for download on <a href="https://www.npmjs.com/package/primevue">npm registry</a>.</p>
</DocSectionText> </DocSectionText>
<DocSectionCode :code="code" hideToggleCode hideStackBlitz /> <DocSectionCode :code="code" hideToggleCode hideStackBlitz />
</template> </template>

8
apps/showcase/pages/forms/index.vue
View File

@ -1,9 +1,10 @@
<template> <template>
<DocComponent title="Vue Form Component" header="Forms" description="Form provides validation functionality and manages form state." :componentDocs="docs" :apiDocs="['Form']" :ptTabComponent="ptComponent" :themingDocs="themingDoc" /> <DocComponent title="Vue Form Library" header="Forms" description="The PrimeVue Forms library provides comprehensive form state management with built-in validation support." :componentDocs="docs" :apiDocs="['Form']" :ptTabComponent="ptComponent" :themingDocs="themingDoc" />
</template> </template>
<script> <script>
import AccessibilityDoc from '@/doc/forms/AccessibilityDoc.vue'; import AccessibilityDoc from '@/doc/forms/AccessibilityDoc.vue';
import DownloadDoc from '@/doc/forms/DownloadDoc.vue';
import BasicDoc from '@/doc/forms/BasicDoc.vue'; import BasicDoc from '@/doc/forms/BasicDoc.vue';
import DynamicDoc from '@/doc/forms/DynamicDoc.vue'; import DynamicDoc from '@/doc/forms/DynamicDoc.vue';
import ImportDoc from '@/doc/forms/ImportDoc.vue'; import ImportDoc from '@/doc/forms/ImportDoc.vue';
@ -19,6 +20,11 @@ export default {
data() { data() {
return { return {
docs: [ docs: [
{
id: 'download',
label: 'Download',
component: DownloadDoc
},
{ {
id: 'import', id: 'import',
label: 'Import', label: 'Import',