@teamnovu/kit-vue-forms 0.0.17 → 0.0.18

package/dist/{index.mjs → index.js}

@@ -3,7 +3,6 @@ var G = (e, r, t) => r in e ? T(e, r, { enumerable: !0, configurable: !0, writab
 var _ = (e, r, t) => G(e, typeof r != "symbol" ? r + "" : r, t);
 import { toValue as L, toRaw as Z, computed as u, unref as d, reactive as E, toRefs as N, toRef as D, ref as W, watch as y, isRef as z, getCurrentScope as q, onBeforeUnmount as H, defineComponent as S, renderSlot as j, normalizeProps as M, guardReactiveProps as B, resolveComponent as Q, createBlock as O, openBlock as $, withCtx as A, resolveDynamicComponent as X, mergeProps as Y } from "vue";
 import "zod";
-import "@vueuse/core";
 function g(e) {
   const r = L(e), t = Z(r);
   return structuredClone(t);
@@ -391,7 +390,7 @@ function fr(e, r, t) {
     }
   };
 }
-function Er(e) {
+function Fr(e) {
   const r = u(() => Object.freeze(g(e.initialData))), t = W(g(r)), s = E({
     initialData: r,
     data: t
@@ -418,7 +417,7 @@ function Er(e) {
   };
   return l;
 }
-const wr = /* @__PURE__ */ S({
+const Er = /* @__PURE__ */ S({
   __name: "Field",
   props: {
     form: {},
@@ -433,7 +432,7 @@ const wr = /* @__PURE__ */ S({
     }), s = E(t);
     return (a, o) => j(a.$slots, "default", M(B(s)));
   }
-}), Pr = /* @__PURE__ */ S({
+}), wr = /* @__PURE__ */ S({
   inheritAttrs: !1,
   __name: "FormFieldWrapper",
   props: {
@@ -466,7 +465,7 @@ const wr = /* @__PURE__ */ S({
       }, 8, ["form", "path"]);
     };
   }
-}), _r = /* @__PURE__ */ S({
+}), Pr = /* @__PURE__ */ S({
   __name: "FormPart",
   props: {
     form: {},
@@ -478,8 +477,8 @@ const wr = /* @__PURE__ */ S({
   }
 });
 export {
-  wr as Field,
-  Pr as FormFieldWrapper,
-  _r as FormPart,
-  Er as useForm
+  Er as Field,
+  wr as FormFieldWrapper,
+  Pr as FormPart,
+  Fr as useForm
 };

package/dist/types/util.d.ts

@@ -15,7 +15,7 @@ type CleanupAntiCollapse<T extends string> = T extends `${infer Left}${AntiColla
 type RecursePaths<T, Seen = never> = T extends Seen ? never : T extends Array<infer ArrayType> ? `${number}` | `${number}.${RecursePaths<ArrayType, Seen | T>}` : T extends object ? {
     [K in keyof T]-?: `${AntiCollapse}${Exclude<K, symbol>}${'' | `.${RecursePaths<T[K], Seen | T>}`}`;
 }[keyof T] : never;
-export type Paths<T, Seen = never> = CleanupAntiCollapse<RecursePaths<T, Seen>>;
+export type Paths<T, Seen = never> = CleanupAntiCollapse<RecursePaths<T, Seen>> | '';
 /**
  * Removes the last part of a dot-connected path.
  */

package/package.json

@@ -1,8 +1,9 @@
 {
   "name": "@teamnovu/kit-vue-forms",
-  "version": "0.0.17",
+  "version": "0.0.18",
   "description": "",
   "main": "index.js",
+  "type": "module",
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",

package/src/composables/useForm.ts

@@ -7,7 +7,6 @@ import { useFieldRegistry } from './useFieldRegistry'
 import { useFormState } from './useFormState'
 import { createSubformInterface, type SubformOptions } from './useSubform'
 import { useValidation, type ValidationOptions } from './useValidation'
-import { syncRef } from '@vueuse/core'
 
 // TODO @Elias implement validation strategy handling
 

package/src/types/util.ts

@@ -59,7 +59,7 @@ type RecursePaths<T, Seen = never> =
           }[keyof T]
         : never
 
-export type Paths<T, Seen = never> = CleanupAntiCollapse<RecursePaths<T, Seen>>
+export type Paths<T, Seen = never> = CleanupAntiCollapse<RecursePaths<T, Seen>> | ''
 
 /**
  * Removes the last part of a dot-connected path.

package/tests/formState.test.ts

@@ -3,6 +3,7 @@ import { reactive } from 'vue'
 import { useFieldRegistry } from '../src/composables/useFieldRegistry'
 import { useFormState } from '../src/composables/useFormState'
 import { useForm } from '../src'
+import { useValidation } from '../src/composables/useValidation'
 
 describe('useFormState', () => {
   it('should detect dirty state when form data changes', () => {
@@ -45,10 +46,12 @@ describe('useFormState', () => {
       email: 'john@example.com',
     }
     const data = reactive(initialData)
-    const fields = useFieldRegistry({
+    const state = reactive({
       data,
       initialData,
     })
+    const validationState = useValidation(state, {})
+    const fields = useFieldRegistry(state, validationState)
 
     const nameField = fields.defineField({ path: 'name' })
     fields.defineField({ path: 'email' })
@@ -62,12 +65,16 @@ describe('useFormState', () => {
   })
 
   it('should handle empty fields map', () => {
-    const initialData = { name: 'John' }
+    const initialData = {
+      name: 'John',
+    }
     const data = reactive(initialData)
-    const fields = useFieldRegistry({
+    const state = reactive({
       data,
       initialData,
     })
+    const validationState = useValidation(state, {})
+    const fields = useFieldRegistry(state, validationState)
 
     const formState = useFormState(fields)
 

package/tests/subform.test.ts

@@ -1345,4 +1345,23 @@ describe('Subform Implementation', () => {
       })
     })
   })
+
+  describe('Toplevel array subform', () => {
+    it('can handle arrays on top level', async () => {
+      const schema = z.array(z.string())
+
+      const form = useForm({
+        initialData: { test: ['item1', 'item2'] },
+        schema,
+      })
+
+      const subform = form.getSubForm('test')
+
+      const rootField = subform.defineField({ path: '' })
+      const itemField = subform.defineField({ path: '0' })
+
+      expect(rootField.data.value).toEqual(['item1', 'item2'])
+      expect(itemField.data.value).toEqual('item1')
+    })
+  })
 })

package/tests/useForm.test.ts

@@ -193,4 +193,26 @@ describe('useForm', () => {
     expect(form.errors.value.general).toEqual([])
     expect(form.errors.value.propertyErrors).toEqual({})
   })
+
+  it('can handle arrays on top level', async () => {
+    const schema = z.array(z.string())
+
+    const form = useForm({
+      initialData: ['item1', 'item2'],
+      schema,
+    })
+
+    const result = await form.validateForm()
+
+    expect(result.isValid).toBe(true)
+    expect(form.isValidated.value).toBe(true)
+    expect(form.errors.value.general).toEqual([])
+    expect(form.errors.value.propertyErrors).toEqual({})
+
+    const rootField = form.defineField({ path: '' })
+    const itemField = form.defineField({ path: '1' })
+
+    expect(rootField.data.value).toEqual(['item1', 'item2'])
+    expect(itemField.data.value).toBe('item2')
+  })
 })

package/vitest.config.ts

@@ -1,7 +1,9 @@
 import { defineConfig } from 'vitest/config'
 import { resolve } from 'path'
+import vue from '@vitejs/plugin-vue'
 
 export default defineConfig({
+  plugins: [vue()],
   test: {
     environment: 'happy-dom',
     globals: true,