Update d.ts files and form state

apps/showcase/doc/forms/RegisterDoc.vue

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

apps/showcase/pages/forms/index.vue

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

packages/form/src/form/Form.d.ts

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

packages/form/src/form/Form.vue

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

packages/form/src/useform/index.d.ts

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

packages/form/src/useform/index.js

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