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

Update d.ts files and form state

pull/6632/head
Mert Sincan 2024-10-23 11:38:23 +01:00
parent b73e4466a3
commit a76f1256f3
6 changed files with 123 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
apps/showcase/doc/forms/RegisterDoc.vue
View File

@ -7,7 +7,7 @@
<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">
<div class="flex flex-col gap-2">
<input name="username" type="text" placeholder="Username" v-bind="$form.register('username')" />
<input type="text" placeholder="Username" v-bind="$form.register('username')" />
<Message v-if="$form.username?.invalid" severity="error">{{ $form.username.errors[0]?.message }}</Message>
</div>
<Button type="submit" severity="secondary" label="Submit" />

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

@ -1,5 +1,5 @@
<template>
<DocComponent title="Vue Form Component" header="Form" description="Form provides validation functionality and manages form state." :componentDocs="docs" :apiDocs="['Form']" :ptTabComponent="ptComponent" :themingDocs="themingDoc" />
<DocComponent title="Vue Form Component" header="Forms" description="Form provides validation functionality and manages form state." :componentDocs="docs" :apiDocs="['Form']" :ptTabComponent="ptComponent" :themingDocs="themingDoc" />
</template>
<script>
@ -11,6 +11,7 @@ import RegisterDoc from '@/doc/forms/RegisterDoc.vue';
import ResolversDoc from '@/doc/forms/ResolversDoc.vue';
import StatesDoc from '@/doc/forms/StatesDoc.vue';
import SubmitDoc from '@/doc/forms/SubmitDoc.vue';
import ValidateOnDoc from '@/doc/forms/ValidateOnDoc.vue';
import PTComponent from '@/doc/forms/pt/index.vue';
import ThemingDoc from '@/doc/forms/theming/index.vue';
@ -38,6 +39,11 @@ export default {
label: 'Resolvers',
component: ResolversDoc
},
{
id: 'validateon',
label: 'ValidateOn',
component: ValidateOnDoc
},
{
id: 'register',
label: 'Register',

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

@ -86,6 +86,74 @@ export interface FormResolverOptions {
names: string[] | undefined;
}
/**
* Submit events
*/
export interface FormSubmitEvent {
/**
* The original DOM event.
*/
originalEvent: Event;
/**
* The form values.
*/
values: Record<string, any>;
/**
* The form state.
*/
states: Record<string, FormFieldState>;
/**
* Whether the form is valid.
*/
valid: boolean;
/**
* The form errors.
*/
errors: any[];
/**
* Resets the form.
*/
reset: () => void;
}
/**
* The state of a form field.
*/
export interface FormFieldState {
/**
* The value of the form field.
*/
value: any;
/**
* Whether the form field has been touched.
*/
touched: boolean;
/**
* Whether the form field has been modified.
*/
dirty: boolean;
/**
* Whether the form field has not been modified.
*/
pristine: boolean;
/**
* Whether the form field is valid.
*/
valid: boolean;
/**
* Whether the form field is invalid.
*/
invalid: boolean;
/**
* The first error message of the form field.
*/
error: any;
/**
* All error messages of the form field.
*/
errors: any[];
}
/**
* Defines valid properties in Form component.
*/
@ -146,8 +214,29 @@ export interface FormProps {
export interface FormSlots {
/**
* Default content slot.
* @param {Object} scope - default slot's params.
*/
default: () => VNode[];
default: (scope: {
/**
* Registers a form field for validation and tracking.
* @param field - The name of the form field to register.
* @param options - Configuration options for the field, such as validation rules.
* @returns - Returns an object or value representing the registered field.
*/
register: (field: string, options: any) => any;
/**
* Resets the entire form state, clearing values and validation statuses.
*/
reset: () => void;
/**
* Indicates whether the form is valid, returning `true` if all fields pass validation.
*/
valid: boolean;
/**
* Stores the state of each form field, with the field name as the key and its state as the value.
*/
states: Record<string, FormFieldState>;
}) => VNode[];
}
/**

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

@ -1,6 +1,6 @@
<template>
<form @submit.prevent="onSubmit" v-bind="ptmi('root')">
<slot :register :valid v-bind="states" />
<slot :register :valid :reset v-bind="states" />
</form>
</template>

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

@ -1,10 +1,21 @@
export interface useFormFieldState {
value: any;
touched: boolean;
dirty: boolean;
pristine: boolean;
valid: boolean;
invalid: boolean;
error: any;
errors: any[];
}
export interface useFormReturn {
defineField: (field: string, options?: any) => any;
handleSubmit: (event: any) => any;
validate: (field: string) => any;
reset: () => void;
valid: boolean;
states: any;
states: Record<string, useFormFieldState>;
}
export interface useFormResolverOptions {

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

@ -1,4 +1,4 @@
import { resolve } from '@primeuix/utils';
import { isArray, resolve } from '@primeuix/utils';
import { computed, mergeProps, nextTick, onMounted, reactive, toValue, watch } from 'vue';
function tryOnMounted(fn, sync = true) {
@ -19,6 +19,7 @@ export const useForm = (options = {}) => {
pristine: true,
valid: true,
invalid: false,
error: null,
errors: []
};
};
@ -26,7 +27,7 @@ export const useForm = (options = {}) => {
const isFieldValidate = (field, validateOn) => {
const value = resolve(validateOn, field);
return value === true || (Array.isArray(value) && value.includes(field));
return value === true || (isArray(value) && value.includes(field));
};
const defineField = (field, fieldOptions) => {
@ -47,6 +48,7 @@ export const useForm = (options = {}) => {
onInvalid: (errors) => {
states[field].invalid = true;
states[field].errors = errors;
states[field].error = errors?.[0] ?? null;
}
});
@ -78,6 +80,7 @@ export const useForm = (options = {}) => {
originalEvent: event,
valid: toValue(valid),
states: toValue(states),
reset,
...results
});
};
@ -96,11 +99,12 @@ export const useForm = (options = {}) => {
for (const sField of Object.keys(states)) {
if (sField === field || !field) {
const errors = result.errors?.[sField] ?? [];
const value = result.values?.[sField] ?? states[sField].value;
//const value = result.values?.[sField] ?? states[sField].value;
states[sField].invalid = errors.length > 0;
states[sField].valid = !states[sField].invalid;
states[sField].errors = errors;
states[sField].error = errors?.[0] ?? null;
//states[sField].value = value;
}
}
@ -112,7 +116,11 @@ export const useForm = (options = {}) => {
Object.keys(states).forEach((field) => (states[field] = getInitialState(field)));
};
options.validateOnMount && tryOnMounted(validate);
const validateOnMounted = () => {
isArray(options.validateOnMount) ? options.validateOnMount.forEach(validate) : validate();
};
options.validateOnMount && tryOnMounted(validateOnMounted);
return {
defineField,