@globalbrain/sefirot 2.24.0 → 2.25.0

package/lib/composables/Form.ts

@@ -1,10 +1,7 @@
-import type { Ref } from 'vue'
-import { computed } from 'vue'
+import { type Ref, computed, reactive, toRefs } from 'vue'
 import { useSnackbars } from '../stores/Snackbars'
-import type { UseDataInput } from './Data'
-import { useData } from './Data'
-import type { Validation } from './Validation'
-import { useValidation } from './Validation'
+import { type UseDataInput, useData } from './Data'
+import { type Validation, useValidation } from './Validation'
 
 export interface Form<T extends Record<string, any>> {
   data: T
@@ -15,25 +12,49 @@ export interface Form<T extends Record<string, any>> {
   validateAndNotify(): Promise<boolean>
 }
 
-export interface UseFormOptions<T extends Record<string, any>> {
-  data: UseDataInput<T>
-  rules?: Record<string, any> | ((state: T) => Record<string, any>)
+export type ComputedData<T extends Record<string, () => any>> = {
+  [K in keyof T]: ReturnType<T[K]>
+}
+
+export type AllData<
+  D extends Record<string, any>,
+  C extends Record<string, () => any>
+> = D & ComputedData<C>
+
+export interface UseFormOptions<
+  D extends Record<string, any>,
+  C extends Record<string, () => any>
+> {
+  data: UseDataInput<D>
+  computed?: (data: D) => C
+  rules?: Record<string, any> | ((data: AllData<D, C>) => Record<string, any>)
 }
 
 export function useForm<
-  T extends Record<string, any>
->(options: UseFormOptions<T>): Form<T> {
+  D extends Record<string, any> = Record<string, any>,
+  C extends Record<string, () => any> = Record<string, () => any>
+>(options: UseFormOptions<D, C>): Form<AllData<D, C>> {
   const snackbars = useSnackbars()
 
   const data = useData(options.data)
+  const dataStateRef = toRefs(data.state)
+
+  const computedData = options.computed
+    ? createComputedData(options.computed(data.state))
+    : {}
+
+  const allData = reactive({
+    ...dataStateRef,
+    ...computedData
+  }) as AllData<D, C>
 
   const rules = computed(() => {
     return options.rules
-      ? typeof options.rules === 'function' ? options.rules(data.state) : options.rules
+      ? typeof options.rules === 'function' ? options.rules(allData) : options.rules
       : {}
   })
 
-  const validation = useValidation(data.state, rules)
+  const validation = useValidation(allData, rules)
 
   function init(): void {
     data.init()
@@ -62,7 +83,7 @@ export function useForm<
   }
 
   return {
-    data: data.state,
+    data: allData,
     init,
     reset,
     validation,
@@ -70,3 +91,15 @@ export function useForm<
     validateAndNotify
   }
 }
+
+function createComputedData<
+  C extends Record<string, () => any>
+>(input: C): ComputedData<C> {
+  const computedData = {} as any
+
+  for (const [key, fn] of Object.entries(input)) {
+    computedData[key] = computed(() => fn())
+  }
+
+  return computedData
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@globalbrain/sefirot",
-  "version": "2.24.0",
+  "version": "2.25.0",
   "packageManager": "pnpm@7.26.2",
   "description": "Vue Components for Global Brain Design System.",
   "author": "Kia Ishii <ka.ishii@globalbrains.com>",