Rename `defaultValues` with `initialValues` in Form

pull/6632/head
Mert Sincan 2024-10-22 10:14:17 +01:00
parent f1a584fd2d
commit bc06964e28
11 changed files with 26 additions and 26 deletions

View File

@ -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>

View File

@ -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>

View File

@ -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>

View File

@ -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>

View File

@ -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>

View File

@ -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">

View File

@ -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>

View File

@ -11,7 +11,7 @@ export default {
type: Function,
default: null
},
defaultValues: {
initialValues: {
type: Object,
default: null
},

View File

@ -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

View File

@ -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[];

View File

@ -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,