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

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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,7 +1,7 @@
<template> <template>
<DocSectionText v-bind="$attrs"> </DocSectionText> <DocSectionText v-bind="$attrs"> </DocSectionText>
<div class="card flex justify-center"> <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"> <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.errors[0]?.message }}</Message>
@ -20,7 +20,7 @@ import { z } from 'zod';
export default { export default {
data() { data() {
return { return {
defaultValues: { initialValues: {
country: { name: '' } country: { name: '' }
}, },
countries: null, countries: null,
@ -33,7 +33,7 @@ export default {
}), }),
code: { code: {
basic: ` 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"> <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.errors[0]?.message }}</Message>

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

@ -1,7 +1,7 @@
<template> <template>
<DocSectionText v-bind="$attrs"> </DocSectionText> <DocSectionText v-bind="$attrs"> </DocSectionText>
<div class="card flex justify-center"> <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"> <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.errors[0]?.message }}</Message>
@ -19,7 +19,7 @@ import { z } from 'zod';
export default { export default {
data() { data() {
return { return {
defaultValues: { initialValues: {
city: { cname: '' } city: { cname: '' }
}, },
resolver: null, resolver: null,
@ -104,7 +104,7 @@ export default {
], ],
code: { code: {
basic: ` 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"> <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.errors[0]?.message }}</Message>

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

@ -1,7 +1,7 @@
<template> <template>
<DocSectionText v-bind="$attrs"> </DocSectionText> <DocSectionText v-bind="$attrs"> </DocSectionText>
<div class="card flex justify-center"> <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"> <div class="flex flex-col gap-2">
<CheckboxGroup name="checkbox" class="flex flex-wrap gap-4"> <CheckboxGroup name="checkbox" class="flex flex-wrap gap-4">
<div class="flex items-center"> <div class="flex items-center">
@ -37,7 +37,7 @@ import { z } from 'zod';
export default { export default {
data() { data() {
return { return {
defaultValues: { initialValues: {
checkbox: [] checkbox: []
}, },
resolver: null, resolver: null,
@ -46,7 +46,7 @@ export default {
}), }),
code: { code: {
basic: ` 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"> <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.errors[0]?.message }}</Message>

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

@ -3,7 +3,7 @@
<p>InputText can be used with the <NuxtLink to="/forms">PrimeVue Forms</NuxtLink> library.</p> <p>InputText 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" :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"> <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.errors[0]?.message }}</Message>
@ -25,7 +25,7 @@ import { z } from 'zod';
export default { export default {
data() { data() {
return { return {
defaultValues: { initialValues: {
username: '', username: '',
email: '' email: ''
}, },
@ -36,7 +36,7 @@ export default {
}), }),
code: { code: {
basic: ` 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"> <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.errors[0]?.message }}</Message>

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

@ -1,7 +1,7 @@
<template> <template>
<DocSectionText v-bind="$attrs"> </DocSectionText> <DocSectionText v-bind="$attrs"> </DocSectionText>
<div class="card flex justify-center"> <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"> <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.errors[0]?.message }}</Message>
@ -19,7 +19,7 @@ import { z } from 'zod';
export default { export default {
data() { data() {
return { return {
defaultValues: { initialValues: {
city: [] city: []
}, },
cities: [ cities: [
@ -41,7 +41,7 @@ export default {
}), }),
code: { code: {
basic: ` 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"> <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.errors[0]?.message }}</Message>

6
apps/showcase/doc/password/FormDoc.vue
View File

@ -3,7 +3,7 @@
<p>InputText is used with the <i>v-model</i> property.</p> <p>InputText is used with the <i>v-model</i> property.</p>
</DocSectionText> </DocSectionText>
<div class="card flex justify-center"> <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"> <div class="flex flex-col gap-2">
<Password name="password" placeholder="Password" :feedback="false" /> <Password name="password" placeholder="Password" :feedback="false" />
<template v-if="$form.password?.invalid"> <template v-if="$form.password?.invalid">
@ -23,7 +23,7 @@ import { z } from 'zod';
export default { export default {
data() { data() {
return { return {
defaultValues: { initialValues: {
password: '' password: ''
}, },
resolver: null, resolver: null,
@ -44,7 +44,7 @@ export default {
}), }),
code: { code: {
basic: ` 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"> <div class="flex flex-col gap-2">
<Password name="password" placeholder="Password" :feedback="false" /> <Password name="password" placeholder="Password" :feedback="false" />
<template v-if="$form.password?.invalid"> <template v-if="$form.password?.invalid">

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

@ -1,7 +1,7 @@
<template> <template>
<DocSectionText v-bind="$attrs"> </DocSectionText> <DocSectionText v-bind="$attrs"> </DocSectionText>
<div class="card flex justify-center"> <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"> <div class="flex flex-col gap-2">
<Select name="city" :options="cities" 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>
@ -20,7 +20,7 @@ import { z } from 'zod';
export default { export default {
data() { data() {
return { return {
defaultValues: { initialValues: {
city: { name: '' } city: { name: '' }
}, },
cities: [ cities: [
@ -38,7 +38,7 @@ export default {
}), }),
code: { code: {
basic: ` 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"> <div class="flex flex-col gap-2">
<Select name="city" :options="cities" optionLabel="name" placeholder="Select a City" class="w-full md:w-56" /> <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> <Message v-if="$form.city?.invalid" severity="error">{{ $form.city.errors[0]?.message }}</Message>

2
packages/form/src/form/BaseForm.vue
View File

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

4
packages/form/src/form/Form.d.ts vendored
View File

@ -81,9 +81,9 @@ export interface FormProps {
*/ */
resolver?: (values: Record<string, any>) => Promise<Record<string, any>> | Record<string, any> | undefined; 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. * Whether to validate the form fields when the values change.
* @defaultValue true * @defaultValue true

2
packages/form/src/useform/index.d.ts vendored
View File

@ -9,7 +9,7 @@ export interface useFormReturn {
export interface useFormOptions { export interface useFormOptions {
resolver?: (values: Record<string, any>) => Promise<Record<string, any>> | Record<string, any> | undefined; 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[]; validateOnValueUpdate?: boolean | string[];
validateOnBlur?: boolean | string[]; validateOnBlur?: boolean | string[];
validateOnMount?: boolean | string[]; validateOnMount?: boolean | string[];

2
packages/form/src/useform/index.js
View File

@ -13,7 +13,7 @@ export const useForm = (options = {}) => {
const getInitialState = (field) => { const getInitialState = (field) => {
return { return {
value: options.defaultValues?.[field], value: options.initialValues?.[field],
touched: false, touched: false,
dirty: false, dirty: false,
pristine: true, pristine: true,