feat(form): validateOnSubmit + pickOnlyChanged, closes #47

Author: Akryum

packages/vue/src/api.ts

@@ -8,7 +8,7 @@ import { createItem, createMany, deleteItem, deleteMany, findFirst, findMany, pe
 import { pickNonSpecialProps } from '@rstore/shared'
 import { tryOnScopeDispose } from '@vueuse/core'
 import { ref, toValue, watch } from 'vue'
-import { createFormObject, type VueCreateFormObject, type VueUpdateFormObject } from './form'
+import { createFormObject, type CreateFormObjectOptions, type VueCreateFormObject, type VueUpdateFormObject } from './form'
 import { createQuery } from './query'
 
 export type QueryType = 'first' | 'many'
@@ -199,7 +199,8 @@ export interface VueCollectionApi<
        * @default collection.schema.create
        */
       schema?: StandardSchemaV1
-    } & Pick<CreateOptions<TCollection, TCollectionDefaults, TSchema>, 'optimistic'>,
+    } & Pick<CreateOptions<TCollection, TCollectionDefaults, TSchema>, 'optimistic'>
+    & Pick<CreateFormObjectOptions<ResolvedCollectionItem<TCollection, TCollectionDefaults, TSchema>, StandardSchemaV1, never>, 'resetOnSuccess' | 'validateOnSubmit' | 'transformData'>,
   ) => VueCreateFormObject<TCollection, TCollectionDefaults, TSchema>
 
   /**
@@ -237,7 +238,14 @@ export interface VueCollectionApi<
        * @default collection.schema.update
        */
       schema?: StandardSchemaV1
-    } & Pick<UpdateOptions<TCollection, TCollectionDefaults, TSchema>, 'optimistic'>,
+
+      /**
+       * If `true`, only the changed properties will be sent to the `update` method. If `false`, all properties will be sent.
+       * @default true
+       */
+      pickOnlyChanged?: boolean
+    } & Pick<UpdateOptions<TCollection, TCollectionDefaults, TSchema>, 'optimistic'>
+    & Pick<CreateFormObjectOptions<ResolvedCollectionItem<TCollection, TCollectionDefaults, TSchema>, StandardSchemaV1, never>, 'resetOnSuccess' | 'validateOnSubmit' | 'transformData'>,
   ) => Promise<VueUpdateFormObject<TCollection, TCollectionDefaults, TSchema>>
 
   /**
@@ -485,6 +493,9 @@ export function createCollectionApi<
         submit: data => api.create(data, {
           optimistic: formOptions?.optimistic,
         }),
+        resetOnSuccess: formOptions?.resetOnSuccess,
+        validateOnSubmit: formOptions?.validateOnSubmit,
+        transformData: formOptions?.transformData,
       }) as TReturn
     },
 
@@ -526,16 +537,26 @@ export function createCollectionApi<
         resetDefaultValues: () => getFormData(),
         // Only use changed props
         transformData: (form) => {
-          const data = {} as any
-          for (const key in form.$changedProps) {
-            data[key] = form[key]
+          let data = {} as any
+          if (formOptions?.pickOnlyChanged ?? true) {
+            for (const key in form.$changedProps) {
+              data[key] = form[key]
+            }
+          }
+          else {
+            data = { ...form }
+          }
+          if (formOptions?.transformData) {
+            data = formOptions.transformData(data)
           }
           return data
         },
         submit: data => api.update(data, {
           key: collection.getKey(initialData),
           optimistic: formOptions?.optimistic,
         }),
+        resetOnSuccess: formOptions?.resetOnSuccess,
+        validateOnSubmit: formOptions?.validateOnSubmit,
       })
       return form
     },

packages/vue/src/form.ts

@@ -46,6 +46,11 @@ export interface CreateFormObjectOptions<
    * @default true
    */
   resetOnSuccess?: boolean
+  /**
+   * If `true`, the form will be validated using the `schema` when `$submit()` is called. If `false`, the form will not be validated automatically, and you will need to validate it manually if needed.
+   * @default true
+   */
+  validateOnSubmit?: boolean
 }
 
 export type FormObjectChanged<TData> = {
@@ -134,15 +139,17 @@ export function createFormObject<
       form.$error = null
       try {
         const data = options?.transformData ? options.transformData(form as unknown as Partial<TData>) : pickNonSpecialProps(form, true) as Partial<TData>
-        const { issues } = await this.$schema['~standard'].validate(data)
-        if (issues) {
-          const error = new Error(issues.map(i => i.message).join(', '))
-          ;(error as any).$issues = issues
-          throw error
+        if (options.validateOnSubmit ?? true) {
+          const { issues } = await this.$schema['~standard'].validate(data)
+          if (issues) {
+            const error = new Error(issues.map(i => i.message).join(', '))
+            ;(error as any).$issues = issues
+            throw error
+          }
         }
         const item = await options.submit(data)
         onSuccess.trigger(item)
-        if (options.resetOnSuccess || options.resetOnSuccess == null) {
+        if (options.resetOnSuccess ?? true) {
           await form.$reset()
         }
         return item

packages/vue/test/form.spec.ts

@@ -1,4 +1,4 @@
-import { describe, expect, it } from 'vitest'
+import { describe, expect, it, vi } from 'vitest'
 import { createFormObject } from '../src'
 
 describe('createFormObject', () => {
@@ -47,4 +47,64 @@ describe('createFormObject', () => {
 
     expect(obj.name).toBe('Jane')
   })
+
+  it('validates the form before submit', async () => {
+    const submit = vi.fn()
+    const obj = createFormObject({
+      defaultValues: () => ({ name: 'John' }),
+      schema: {
+        '~standard': {
+          version: 1,
+          vendor: 'test',
+          validate: async (data: any) => {
+            const issues = []
+            if (!data.name) {
+              issues.push({ message: 'Name is required' })
+            }
+            return { issues: issues.length ? issues : undefined, value: data }
+          },
+        },
+      },
+      submit,
+    })
+
+    obj.name = ''
+
+    await expect(() => obj.$submit()).rejects.toThrow('Name is required')
+    expect(submit).not.toHaveBeenCalled()
+
+    obj.name = 'Jane'
+
+    await obj.$submit()
+
+    expect(submit).toHaveBeenCalled()
+  })
+
+  it('does not validate the form before submit when `validateOnSubmit` is false', async () => {
+    const submit = vi.fn()
+    const obj = createFormObject({
+      defaultValues: () => ({ name: 'John' }),
+      schema: {
+        '~standard': {
+          version: 1,
+          vendor: 'test',
+          validate: async (data: any) => {
+            const issues = []
+            if (!data.name) {
+              issues.push({ message: 'Name is required' })
+            }
+            return { issues: issues.length ? issues : undefined, value: data }
+          },
+        },
+      },
+      submit,
+      validateOnSubmit: false,
+    })
+
+    obj.name = ''
+
+    await obj.$submit()
+
+    expect(submit).toHaveBeenCalledWith({ name: '' })
+  })
 })