[0.7.x] Added ability to check form's touched state via touched (#130)

* 🌟 feat(packages/vue): Added isTouched state to the reactive form

* Unify the API

---------

Co-authored-by: Tim MacDonald <[email protected]>

Author: vstyler96

packages/alpine/src/index.ts

@@ -88,7 +88,11 @@ export default function (Alpine: TAlpine) {
                 }), {}) as Data
             },
             touched(name) {
-                return state.touched.includes(name)
+                if (typeof name === 'string') {
+                    return state.touched.includes(name)
+                } else {
+                    return state.touched.length > 0
+                }
             },
             touch(name) {
                 validator.touch(name)

packages/alpine/src/types.ts

@@ -3,7 +3,7 @@ import { Config, NamedInputEvent, SimpleValidationErrors, ValidationConfig, Vali
 export interface Form<Data extends Record<string, unknown>> {
     processing: boolean,
     validating: boolean,
-    touched(name: string): boolean,
+    touched(name?: string): boolean,
     touch(name: string | NamedInputEvent | Array<string>): Data & Form<Data>,
     data(): Data,
     errors: Record<string, string>,

packages/react/src/index.ts

@@ -136,7 +136,11 @@ export const useForm = <Data extends Record<string, unknown>>(method: RequestMet
             return form
         },
         touched(name) {
-            return touched.includes(name)
+            if (typeof name === 'string') {
+                return touched.includes(name)
+            } else {
+                return touched.length > 0
+            }
         },
         touch(name) {
             validator.current!.touch(name)

packages/react/src/types.ts

@@ -3,7 +3,7 @@ import { Config, NamedInputEvent, ValidationConfig, Validator } from 'laravel-pr
 export interface Form<Data extends Record<string, unknown>> {
     processing: boolean,
     validating: boolean,
-    touched(name: keyof Data): boolean,
+    touched(name?: keyof Data): boolean,
     touch(name: string | NamedInputEvent | Array<string>): Form<Data>,
     data: Data,
     setData(key: Data | keyof Data, value?: unknown): Form<Data>,

packages/vue-inertia/tests/index.test.ts

@@ -129,4 +129,32 @@ it('allows getter as data inputs', function () {
     form.reset()
 
     expect(form.email).toBe('[email protected]')
-})
+})
+
+it('can check that specific fields have been touched', () => {
+    const form = useForm('post', '/register', {
+        name: '',
+        email: '',
+    })
+
+    expect(form.touched('name')).toBe(false)
+    expect(form.touched('email')).toBe(false)
+
+    form.touch('name')
+
+    expect(form.touched('name')).toBe(true)
+    expect(form.touched('email')).toBe(false)
+})
+
+it('can check it any fields have been touched', () => {
+    const form = useForm('post', '/register', {
+        name: '',
+        email: '',
+    })
+
+    expect(form.touched()).toBe(false)
+
+    form.touch('name')
+
+    expect(form.touched()).toBe(true)
+})

packages/vue/src/index.ts

@@ -95,8 +95,12 @@ export const useForm = <Data extends Record<string, unknown>>(method: RequestMet
             return form
         },
         touched(name) {
-            // @ts-expect-error
-            return touched.value.includes(name)
+            if (typeof name === 'string') {
+                // @ts-expect-error
+                return touched.value.includes(name)
+            } else {
+                return touched.value.length > 0
+            }
         },
         touch(name) {
             validator.touch(name)

packages/vue/src/types.ts

@@ -3,7 +3,7 @@ import { ValidationConfig, Config, NamedInputEvent, Validator } from 'laravel-pr
 export interface Form<Data extends Record<string, unknown>> {
     processing: boolean,
     validating: boolean,
-    touched(name: keyof Data): boolean,
+    touched(name?: keyof Data): boolean,
     touch(name: string | NamedInputEvent | Array<string>): Data & Form<Data>,
     data(): Data,
     setData(data: Record<string, unknown>): Data & Form<Data>,