Rename `defaultValues` with `initialValues` in Form
parent
f1a584fd2d
commit
bc06964e28
|
@ -1,7 +1,7 @@
|
|||
<template>
|
||||
<DocSectionText v-bind="$attrs"> </DocSectionText>
|
||||
<div class="card flex justify-center">
|
||||
<Form v-slot="$form" :resolver="resolver" :defaultValues="defaultValues" @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">
|
||||
<AutoComplete name="country" optionLabel="name" :suggestions="filteredCountries" @complete="search" />
|
||||
<Message v-if="$form.country?.invalid" severity="error">{{ $form.country.errors[0]?.message }}</Message>
|
||||
|
@ -20,7 +20,7 @@ import { z } from 'zod';
|
|||
export default {
|
||||
data() {
|
||||
return {
|
||||
defaultValues: {
|
||||
initialValues: {
|
||||
country: { name: '' }
|
||||
},
|
||||
countries: null,
|
||||
|
@ -33,7 +33,7 @@ export default {
|
|||
}),
|
||||
code: {
|
||||
basic: `
|
||||
<Form v-slot="$form" :resolver="resolver" :defaultValues="defaultValues" @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">
|
||||
<AutoComplete name="country" optionLabel="name" :suggestions="filteredCountries" @complete="search" />
|
||||
<Message v-if="$form.country?.invalid" severity="error">{{ $form.country.errors[0]?.message }}</Message>
|
||||
|
|
|
@ -1,7 +1,7 @@
|
|||
<template>
|
||||
<DocSectionText v-bind="$attrs"> </DocSectionText>
|
||||
<div class="card flex justify-center">
|
||||
<Form v-slot="$form" :resolver="resolver" :defaultValues="defaultValues" @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">
|
||||
<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>
|
||||
|
@ -19,7 +19,7 @@ import { z } from 'zod';
|
|||
export default {
|
||||
data() {
|
||||
return {
|
||||
defaultValues: {
|
||||
initialValues: {
|
||||
city: { cname: '' }
|
||||
},
|
||||
resolver: null,
|
||||
|
@ -104,7 +104,7 @@ export default {
|
|||
],
|
||||
code: {
|
||||
basic: `
|
||||
<Form v-slot="$form" :resolver="resolver" :defaultValues="defaultValues" @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">
|
||||
<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>
|
||||
|
|
|
@ -1,7 +1,7 @@
|
|||
<template>
|
||||
<DocSectionText v-bind="$attrs"> </DocSectionText>
|
||||
<div class="card flex justify-center">
|
||||
<Form v-slot="$form" :resolver="resolver" :defaultValues="defaultValues" @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">
|
||||
<CheckboxGroup name="checkbox" class="flex flex-wrap gap-4">
|
||||
<div class="flex items-center">
|
||||
|
@ -37,7 +37,7 @@ import { z } from 'zod';
|
|||
export default {
|
||||
data() {
|
||||
return {
|
||||
defaultValues: {
|
||||
initialValues: {
|
||||
checkbox: []
|
||||
},
|
||||
resolver: null,
|
||||
|
@ -46,7 +46,7 @@ export default {
|
|||
}),
|
||||
code: {
|
||||
basic: `
|
||||
<Form v-slot="$form" :resolver="resolver" :defaultValues="defaultValues" @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">
|
||||
<InputText name="username" type="text" placeholder="Username" />
|
||||
<Message v-if="$form.username?.invalid" severity="error">{{ $form.username.errors[0]?.message }}</Message>
|
||||
|
|
|
@ -3,7 +3,7 @@
|
|||
<p>InputText can be used with the <NuxtLink to="/forms">PrimeVue Forms</NuxtLink> library.</p>
|
||||
</DocSectionText>
|
||||
<div class="card flex justify-center">
|
||||
<Form v-slot="$form" :resolver="resolver" :defaultValues="defaultValues" @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">
|
||||
<InputText name="username" type="text" placeholder="Username" fluid />
|
||||
<Message v-if="$form.username?.invalid" severity="error">{{ $form.username.errors[0]?.message }}</Message>
|
||||
|
@ -25,7 +25,7 @@ import { z } from 'zod';
|
|||
export default {
|
||||
data() {
|
||||
return {
|
||||
defaultValues: {
|
||||
initialValues: {
|
||||
username: '',
|
||||
email: ''
|
||||
},
|
||||
|
@ -36,7 +36,7 @@ export default {
|
|||
}),
|
||||
code: {
|
||||
basic: `
|
||||
<Form v-slot="$form" :resolver="resolver" :defaultValues="defaultValues" @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">
|
||||
<InputText name="username" type="text" placeholder="Username" />
|
||||
<Message v-if="$form.username?.invalid" severity="error">{{ $form.username.errors[0]?.message }}</Message>
|
||||
|
|
|
@ -1,7 +1,7 @@
|
|||
<template>
|
||||
<DocSectionText v-bind="$attrs"> </DocSectionText>
|
||||
<div class="card flex justify-center">
|
||||
<Form v-slot="$form" :resolver="resolver" :defaultValues="defaultValues" @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">
|
||||
<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>
|
||||
|
@ -19,7 +19,7 @@ import { z } from 'zod';
|
|||
export default {
|
||||
data() {
|
||||
return {
|
||||
defaultValues: {
|
||||
initialValues: {
|
||||
city: []
|
||||
},
|
||||
cities: [
|
||||
|
@ -41,7 +41,7 @@ export default {
|
|||
}),
|
||||
code: {
|
||||
basic: `
|
||||
<Form v-slot="$form" :resolver="resolver" :defaultValues="defaultValues" @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">
|
||||
<InputText name="username" type="text" placeholder="Username" />
|
||||
<Message v-if="$form.username?.invalid" severity="error">{{ $form.username.errors[0]?.message }}</Message>
|
||||
|
|
|
@ -3,7 +3,7 @@
|
|||
<p>InputText is used with the <i>v-model</i> property.</p>
|
||||
</DocSectionText>
|
||||
<div class="card flex justify-center">
|
||||
<Form v-slot="$form" :resolver="resolver" :defaultValues="defaultValues" @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">
|
||||
<Password name="password" placeholder="Password" :feedback="false" />
|
||||
<template v-if="$form.password?.invalid">
|
||||
|
@ -23,7 +23,7 @@ import { z } from 'zod';
|
|||
export default {
|
||||
data() {
|
||||
return {
|
||||
defaultValues: {
|
||||
initialValues: {
|
||||
password: ''
|
||||
},
|
||||
resolver: null,
|
||||
|
@ -44,7 +44,7 @@ export default {
|
|||
}),
|
||||
code: {
|
||||
basic: `
|
||||
<Form v-slot="$form" :resolver="resolver" :defaultValues="defaultValues" @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">
|
||||
<Password name="password" placeholder="Password" :feedback="false" />
|
||||
<template v-if="$form.password?.invalid">
|
||||
|
|
|
@ -1,7 +1,7 @@
|
|||
<template>
|
||||
<DocSectionText v-bind="$attrs"> </DocSectionText>
|
||||
<div class="card flex justify-center">
|
||||
<Form v-slot="$form" :resolver="resolver" :defaultValues="defaultValues" @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">
|
||||
<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>
|
||||
|
@ -20,7 +20,7 @@ import { z } from 'zod';
|
|||
export default {
|
||||
data() {
|
||||
return {
|
||||
defaultValues: {
|
||||
initialValues: {
|
||||
city: { name: '' }
|
||||
},
|
||||
cities: [
|
||||
|
@ -38,7 +38,7 @@ export default {
|
|||
}),
|
||||
code: {
|
||||
basic: `
|
||||
<Form v-slot="$form" :resolver="resolver" :defaultValues="defaultValues" @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">
|
||||
<Select name="city" :options="cities" optionLabel="name" placeholder="Select a City" class="w-full md:w-56" />
|
||||
<Message v-if="$form.city?.invalid" severity="error">{{ $form.city.errors[0]?.message }}</Message>
|
||||
|
|
|
@ -11,7 +11,7 @@ export default {
|
|||
type: Function,
|
||||
default: null
|
||||
},
|
||||
defaultValues: {
|
||||
initialValues: {
|
||||
type: Object,
|
||||
default: null
|
||||
},
|
||||
|
|
|
@ -81,9 +81,9 @@ export interface FormProps {
|
|||
*/
|
||||
resolver?: (values: Record<string, any>) => Promise<Record<string, any>> | Record<string, any> | undefined;
|
||||
/**
|
||||
* The default values for the form fields in uncontrolled mode.
|
||||
* The initial values for the form fields.
|
||||
*/
|
||||
defaultValues?: Record<string, any> | undefined;
|
||||
initialValues?: Record<string, any> | undefined;
|
||||
/**
|
||||
* Whether to validate the form fields when the values change.
|
||||
* @defaultValue true
|
||||
|
|
|
@ -9,7 +9,7 @@ export interface useFormReturn {
|
|||
|
||||
export interface useFormOptions {
|
||||
resolver?: (values: Record<string, any>) => Promise<Record<string, any>> | Record<string, any> | undefined;
|
||||
defaultValues?: Record<string, any> | undefined;
|
||||
initialValues?: Record<string, any> | undefined;
|
||||
validateOnValueUpdate?: boolean | string[];
|
||||
validateOnBlur?: boolean | string[];
|
||||
validateOnMount?: boolean | string[];
|
||||
|
|
|
@ -13,7 +13,7 @@ export const useForm = (options = {}) => {
|
|||
|
||||
const getInitialState = (field) => {
|
||||
return {
|
||||
value: options.defaultValues?.[field],
|
||||
value: options.initialValues?.[field],
|
||||
touched: false,
|
||||
dirty: false,
|
||||
pristine: true,
|
||||
|
|
Loading…
Reference in New Issue