diff --git a/packages/form/src/form/Form.d.ts b/packages/form/src/form/Form.d.ts index 41590557d..8e593975a 100644 --- a/packages/form/src/form/Form.d.ts +++ b/packages/form/src/form/Form.d.ts @@ -1,25 +1,32 @@ /** * - * Fluid is a layout component to make descendant components span full width of their container. + * Form provides validation functionality and manages form state. * - * [Live Demo](https://www.primevue.org/fluid/) + * [Live Demo](https://www.primevue.org/form/) * - * @module fluid + * @module form * */ import type { DefineComponent, DesignToken, EmitFn, PassThrough } from '@primevue/core'; import type { ComponentHooks } from '@primevue/core/basecomponent'; -import type { PassThroughOptions } from 'primevue/passthrough'; -import { TransitionProps, VNode } from 'vue'; +import { VNode } from 'vue'; -export declare type FluidPassThroughOptionType = FluidPassThroughAttributes | ((options: FluidPassThroughMethodOptions) => FluidPassThroughAttributes | string) | string | null | undefined; +/** + * From primevue/passthrough/index.d.ts + */ +export declare type PassThroughMergePropsType = ((...args: any) => object | undefined) | boolean | undefined; -export declare type FluidPassThroughTransitionType = TransitionProps | ((options: FluidPassThroughMethodOptions) => TransitionProps) | undefined; +export interface PassThroughOptions { + mergeSections?: boolean | undefined; + mergeProps?: PassThroughMergePropsType; +} + +export declare type FormPassThroughOptionType = FormPassThroughAttributes | ((options: FormPassThroughMethodOptions) => FormPassThroughAttributes | string) | string | null | undefined; /** * Custom passthrough(pt) option method. */ -export interface FluidPassThroughMethodOptions { +export interface FormPassThroughMethodOptions { /** * Defines instance. */ @@ -27,7 +34,7 @@ export interface FluidPassThroughMethodOptions { /** * Defines valid properties. */ - props: FluidProps; + props: FormProps; /** * Defines valid attributes. */ @@ -44,13 +51,13 @@ export interface FluidPassThroughMethodOptions { /** * Custom passthrough(pt) options. - * @see {@link FluidProps.pt} + * @see {@link FormProps.pt} */ -export interface FluidPassThroughOptions { +export interface FormPassThroughOptions { /** * Used to pass attributes to the root's DOM element. */ - root?: FluidPassThroughOptionType; + root?: FormPassThroughOptionType; /** * Used to manage all lifecycle hooks. * @see {@link BaseComponent.ComponentHooks} @@ -61,23 +68,51 @@ export interface FluidPassThroughOptions { /** * Custom passthrough attributes for each DOM elements */ -export interface FluidPassThroughAttributes { +export interface FormPassThroughAttributes { [key: string]: any; } /** - * Defines valid properties in Fluid component. + * Defines valid properties in Form component. */ -export interface FluidProps { +export interface FormProps { + /** + * A function that resolves validation logic. + */ + resolver?: (values: Record) => Promise> | Record | undefined; + /** + * The default values for the form fields in uncontrolled mode. + */ + defaultValues?: Record | undefined; + /** + * Whether to validate the form fields when the values change. + * @defaultValue true + */ + validateOnValueUpdate?: boolean | string[] | undefined; + /** + * Whether to validate the form fields when they lose focus (on blur). + * @defaultValue false + */ + validateOnBlur?: boolean | string[] | undefined; + /** + * Whether to validate the form fields immediately after the form is mounted. + * @defaultValue false + */ + validateOnMount?: boolean | string[] | undefined; + /** + * Whether to validate the form fields when the form is submitted. + * @defaultValue true + */ + validateOnSubmit?: boolean | string[] | undefined; /** * It generates scoped CSS variables using design tokens for the component. */ dt?: DesignToken; /** * Used to pass attributes to DOM elements inside the component. - * @type {FluidPassThroughOptions} + * @type {FormPassThroughOptions} */ - pt?: PassThrough; + pt?: PassThrough; /** * Used to configure passthrough(pt) options of the component. * @type {PassThroughOptions} @@ -91,9 +126,9 @@ export interface FluidProps { } /** - * Defines valid slots in Fluid component. + * Defines valid slots in Form component. */ -export interface FluidSlots { +export interface FormSlots { /** * Default content slot. */ @@ -101,30 +136,36 @@ export interface FluidSlots { } /** - * Defines valid emits in Fluid component. + * Defines valid emits in Form component. */ -export interface FluidEmitsOptions {} +export interface FormEmitsOptions { + /** + * Emitted when the form is submitted. + * @param {Event} event - Original DOM event. + */ + submit: (event: Event) => void; +} -export declare type FluidEmits = EmitFn; +export declare type FormEmits = EmitFn; /** - * **PrimeVue - Fluid** + * **PrimeVue - Form** * - * _Fluid is a layout component to make descendant components span full width of their container._ + * _Form provides validation functionality and manages form state._ * - * [Live Demo](https://www.primevue.org/fluid/) + * [Live Demo](https://www.primevue.org/form/) * --- --- * ![PrimeVue](https://primefaces.org/cdn/primevue/images/logo-100.png) * * @group Component * */ -declare const Fluid: DefineComponent; +declare const Form: DefineComponent; declare module 'vue' { export interface GlobalComponents { - Fluid: DefineComponent; + Form: DefineComponent; } } -export default Fluid; +export default Form; diff --git a/packages/form/src/index.d.ts b/packages/form/src/index.d.ts index e69de29bb..7e19301ce 100644 --- a/packages/form/src/index.d.ts +++ b/packages/form/src/index.d.ts @@ -0,0 +1,3 @@ +export { default as Form } from '@primevue/form/form'; +export * from '@primevue/form/resolvers'; +export * from '@primevue/form/useform'; diff --git a/packages/form/src/resolvers/index.d.ts b/packages/form/src/resolvers/index.d.ts new file mode 100644 index 000000000..17e6c1b9c --- /dev/null +++ b/packages/form/src/resolvers/index.d.ts @@ -0,0 +1 @@ +export * from '@primeuix/form/resolvers'; diff --git a/packages/form/src/resolvers/package.json b/packages/form/src/resolvers/package.json index 7604ba623..cb300e167 100644 --- a/packages/form/src/resolvers/package.json +++ b/packages/form/src/resolvers/package.json @@ -1,4 +1,5 @@ { "main": "./index.js", - "module": "./index.js" + "module": "./index.js", + "types": "./index.d.ts" } diff --git a/packages/form/src/useform/index.d.ts b/packages/form/src/useform/index.d.ts new file mode 100644 index 000000000..d229d6473 --- /dev/null +++ b/packages/form/src/useform/index.d.ts @@ -0,0 +1,19 @@ +export interface useFormReturn { + defineField: (field: string, options?: any) => any; + handleSubmit: (event: any) => any; + validate: (field: string) => any; + reset: () => void; + valid: boolean; + states: any; +} + +export interface useFormOptions { + resolver?: (values: Record) => Promise> | Record | undefined; + defaultValues?: Record | undefined; + validateOnValueUpdate?: boolean | string[]; + validateOnBlur?: boolean | string[]; + validateOnMount?: boolean | string[]; + validateOnSubmit?: boolean | string[]; +} + +export declare function useForm(options: useFormOptions): useFormReturn;