feat(form): call form object

Author: Akryum

docs/guide/data/form.md

@@ -54,6 +54,14 @@ createTodo.$onSuccess(() => {
 </template>
 ```
 
+You can also call the form object to submit it:
+
+```ts
+const createTodo = store.todos.createForm()
+createTodo.title = 'My new todo'
+const todo = await createTodo()
+```
+
 ## Update Form
 
 You can also create a form object to update an existing item with the `updateForm` method.

packages/playground/app/pages/todo/index.vue

@@ -17,7 +17,7 @@ createTodo.$onSuccess(() => {
       :state="createTodo"
       :schema="createTodo.$schema"
       class="mb-4"
-      @submit="createTodo.$submit()"
+      @submit="createTodo()"
     >
       <UButtonGroup
         class="w-full"

packages/vue/src/api.ts

@@ -7,7 +7,7 @@ import { createItem, deleteItem, findFirst, findMany, peekFirst, peekMany, subsc
 import { pickNonSpecialProps } from '@rstore/shared'
 import { tryOnScopeDispose } from '@vueuse/core'
 import { ref, toValue, watch } from 'vue'
-import { createFormObject, type FormObjectAdditionalProps } from './form'
+import { createFormObject, type FormObject } from './form'
 import { createQuery } from './query'
 
 export interface VueModelApi<
@@ -86,7 +86,7 @@ export interface VueModelApi<
        */
       schema?: StandardSchemaV1
     },
-  ) => CreateFormObject<TModel, TModelDefaults, TModelList> & FormObjectAdditionalProps<ResolvedModelItem<TModel, TModelDefaults, TModelList>>
+  ) => CreateFormObject<TModel, TModelDefaults, TModelList> & FormObject<ResolvedModelItem<TModel, TModelDefaults, TModelList>>
 
   /**
    * Update an item directly. For a more user-friendly way, use `updateForm` instead.
@@ -118,7 +118,7 @@ export interface VueModelApi<
        */
       schema?: StandardSchemaV1
     },
-  ) => Promise<UpdateFormObject<TModel, TModelDefaults, TModelList> & FormObjectAdditionalProps<ResolvedModelItem<TModel, TModelDefaults, TModelList>>>
+  ) => Promise<UpdateFormObject<TModel, TModelDefaults, TModelList> & FormObject<ResolvedModelItem<TModel, TModelDefaults, TModelList>>>
 
   /**
    * Find all items that match the query.

packages/vue/src/form.ts

@@ -37,6 +37,12 @@ export interface FormObjectAdditionalProps<
   $onChange: EventHookOn<FormObjectChanged<TData>>
 }
 
+export type FormObject<
+  TData extends Record<string, any>,
+  TSchema extends StandardSchemaV1 = StandardSchemaV1,
+  TAdditionalProps = Record<string, never>,
+> = FormObjectBase<TData, TSchema> & FormObjectAdditionalProps<TData> & TAdditionalProps & Partial<TData> & (() => Promise<TData>)
+
 export function createFormObject<
   TData extends Record<string, any> = Record<string, any>,
   TSchema extends StandardSchemaV1 = StandardSchemaV1,
@@ -134,7 +140,9 @@ export function createFormObject<
     })
   }
 
-  const proxy = new Proxy(form, {
+  const base = form.$submit
+
+  const proxy = new Proxy(base, {
     set(target, key, value) {
       if (typeof key === 'string' && !key.startsWith('$')) {
         const oldValue = initialData[key as keyof typeof initialData]
@@ -147,17 +155,20 @@ export function createFormObject<
         }
         queueChange()
       }
-      return Reflect.set(target, key, value)
+      return Reflect.set(form, key, value)
+    },
+    get(target, key) {
+      return Reflect.get(form, key)
     },
-    ownKeys(target) {
-      return Reflect.ownKeys(target).filter(key => typeof key !== 'string' || !key.startsWith('$'))
+    ownKeys() {
+      return Reflect.ownKeys(form).filter(key => typeof key !== 'string' || !key.startsWith('$'))
     },
   })
 
   // Validate initially (don't await for it)
   queueChange()
 
-  return proxy as FormObjectBase<TData, TSchema> & FormObjectAdditionalProps<TData> & TAdditionalProps & Partial<TData>
+  return proxy as FormObject<TData, TSchema, TAdditionalProps>
 }
 
 /**