@dragonmastery/zinia-forms-core 0.3.5 → 0.3.6

package/dist/index.d.ts

@@ -116,7 +116,6 @@ interface ArrayFieldProps<FormType, ItemType> {
     minItems?: number;
     maxItems?: number;
     allowReordering?: boolean;
-    autoPrefixFields?: boolean;
     ariaLabels?: {
         addButton?: string;
         removeButton?: string;
@@ -382,6 +381,14 @@ type FieldPathToEnum<T, P extends Path<T>> = P extends keyof T ? T[P] extends st
  * ArrayItemType<{tasks: Task[]}, 'tasks'> = Task
  */
 type ArrayItemType<T, P extends Path<T>> = P extends keyof T ? T[P] extends ReadonlyArray<infer Item> ? Item : T[P] extends Array<infer Item> ? Item : never : never;
+/**
+ * Type-safe fields object that provides autocomplete for field names
+ * Maps each key of T to a string (the prefixed field name)
+ * All fields return strings regardless of whether the actual field is optional
+ */
+type FieldNames<T> = T extends Record<string, any> ? {
+    [K in keyof T]-?: string;
+} : Record<string, string>;
 /**
  * Type for array field components with properly typed slots
  */
@@ -389,7 +396,7 @@ type ArrayFieldComponent<T, P extends Path<T>> = vue.FunctionalComponent<Omit<Ar
     itemRenderer: (props: {
         item: ArrayItemType<T, P>;
         index: number;
-        getFieldName: (fieldPath: string) => string;
+        fields: FieldNames<ArrayItemType<T, P>>;
     }) => any;
     availableItemRenderer: (props: {
         item: ArrayItemType<T, P>;
@@ -526,7 +533,7 @@ interface FieldMetadata {
  */
 interface SchemaFieldMetadata {
     /** The input type for rendering the field */
-    inputType?: 'text' | 'email' | 'tel' | 'number' | 'select' | 'checkbox' | 'radio' | 'textarea' | 'password' | 'currency' | 'date' | 'time' | 'datetime-local' | 'combobox';
+    inputType?: 'text' | 'email' | 'tel' | 'number' | 'select' | 'checkbox' | 'radio' | 'textarea' | 'password' | 'currency' | 'date' | 'time' | 'datetime-local' | 'combobox' | 'array';
     /** Placeholder text for the field */
     placeholder?: string;
     /** The display label for the field */
@@ -1117,7 +1124,7 @@ interface StyleCreators {
         itemRenderer: (props: {
             item: ItemType;
             index: number;
-            getFieldName: (fieldPath: string) => string;
+            fields: FieldNames<ItemType>;
         }) => any;
         availableItemRenderer: (props: {
             item: ItemType;
@@ -1325,7 +1332,9 @@ declare function useForm<T extends z.ZodObject<any>, CalcType = (values: z.infer
             itemRenderer: (props: {
                 item: any;
                 index: number;
-                getFieldName: (fieldPath: string) => string;
+                fields: Record<string, string> | {
+                    [x: string]: string;
+                };
             }) => any;
             availableItemRenderer: (props: {
                 item: any;
@@ -1444,7 +1453,7 @@ declare function createTypedArrayField<T, P extends Path<T>>(baseArrayField: Fun
     itemRenderer: (props: {
         item: ArrayItemType<T, P>;
         index: number;
-        getFieldName: (fieldPath: string) => string;
+        fields: FieldNames<ArrayItemType<T, P>>;
     }) => any;
     availableItemRenderer: (props: {
         item: ArrayItemType<T, P>;
@@ -1483,7 +1492,9 @@ declare function generateFieldComponents<T extends z.ZodObject<any>>(schema: T,
             itemRenderer: (props: {
                 item: any;
                 index: number;
-                getFieldName: (fieldPath: string) => string;
+                fields: Record<string, string> | {
+                    [x: string]: string;
+                };
             }) => any;
             availableItemRenderer: (props: {
                 item: any;

package/dist/index.js

@@ -277,6 +277,12 @@ function generateFieldComponents(schema, fieldsMetadata, styleName) {
           fields[typedPath] = dateFieldComponent;
           components[componentName] = dateFieldComponent;
           return;
+        // Skip the type-based switch below
+        case "array":
+          const arrayFieldComponent = typedArrayFieldFactory(typedPath, fieldMeta);
+          fields[typedPath] = arrayFieldComponent;
+          components[componentName] = arrayFieldComponent;
+          return;
       }
     }
     switch (fieldMeta.type) {
@@ -515,21 +521,51 @@ var SchemaCache = class {
    * @returns The field schema or null if not found
    */
   getFieldSchema(schema, path, formData) {
+    console.log(`[SchemaCache] getFieldSchema called with path: "${path}"`);
     if (this.cache.has(path)) {
+      console.log(`[SchemaCache] Found cached schema for path: "${path}"`);
       return this.cache.get(path);
     }
     const segments = path.split(".");
+    console.log(`[SchemaCache] Path segments:`, segments);
     let currentSchema = schema;
+    console.log(`[SchemaCache] Starting schema type:`, currentSchema.constructor.name);
     for (let i = 0; i < segments.length; i++) {
       const segment = segments[i];
+      console.log(`[SchemaCache] Processing segment [${i}]: "${segment}"`);
+      console.log(`[SchemaCache] Current schema type before unwrap:`, currentSchema?.constructor?.name);
       currentSchema = unwrapSchemaForTraversal(currentSchema);
-      if (!currentSchema) return null;
+      console.log(`[SchemaCache] Current schema type after unwrap:`, currentSchema?.constructor?.name);
+      if (!currentSchema) {
+        console.log(`[SchemaCache] ERROR: currentSchema is null after unwrap at segment "${segment}"`);
+        return null;
+      }
       if (currentSchema instanceof z.ZodObject) {
+        console.log(`[SchemaCache] Current schema is ZodObject, accessing shape["${segment}"]`);
+        console.log(`[SchemaCache] Available shape keys:`, Object.keys(currentSchema.shape));
         currentSchema = currentSchema.shape[segment];
+        console.log(`[SchemaCache] Got schema from shape, type:`, currentSchema?.constructor?.name);
+        if (!currentSchema) {
+          console.log(`[SchemaCache] ERROR: No schema found in shape for key "${segment}"`);
+          return null;
+        }
       } else if (currentSchema instanceof z.ZodArray) {
-        currentSchema = currentSchema.element;
-        if (!isNaN(Number(segment)) && i < segments.length - 1) {
-          continue;
+        console.log(`[SchemaCache] Current schema is ZodArray, segment: "${segment}"`);
+        if (!isNaN(Number(segment))) {
+          console.log(`[SchemaCache] Segment is numeric (array index), getting element schema`);
+          currentSchema = currentSchema._def.type;
+          console.log(`[SchemaCache] Element schema type before unwrap:`, currentSchema?.constructor?.name);
+          currentSchema = unwrapSchemaForTraversal(currentSchema);
+          console.log(`[SchemaCache] Element schema type after unwrap:`, currentSchema?.constructor?.name);
+          if (i < segments.length - 1) {
+            console.log(`[SchemaCache] More segments remaining, continuing to next segment`);
+            continue;
+          }
+          console.log(`[SchemaCache] Last segment, returning element schema`);
+          break;
+        } else {
+          console.log(`[SchemaCache] ERROR: Segment "${segment}" is not numeric but schema is ZodArray`);
+          return null;
         }
       } else if (currentSchema instanceof z.ZodDiscriminatedUnion) {
         const discriminator = currentSchema._def.discriminator;
@@ -588,8 +624,12 @@ var SchemaCache = class {
       }
     }
     currentSchema = unwrapSchemaForTraversal(currentSchema);
+    console.log(`[SchemaCache] Final schema type:`, currentSchema?.constructor?.name);
     if (currentSchema) {
       this.cache.set(path, currentSchema);
+      console.log(`[SchemaCache] \u2705 Successfully found and cached schema for path: "${path}"`);
+    } else {
+      console.log(`[SchemaCache] \u274C ERROR: Final schema is null for path: "${path}"`);
     }
     return currentSchema;
   }
@@ -603,16 +643,21 @@ var SchemaCache = class {
 
 // src/validation/fieldValidation.ts
 function validateField(schema, formData, path, schemaCache) {
+  console.log(`[validateField] Validating path: "${path}"`);
   const cache = schemaCache || new SchemaCache();
   const fieldSchema = cache.getFieldSchema(schema, path, formData);
   if (!fieldSchema) {
+    console.log(`[validateField] \u274C ERROR: Invalid field path "${path}" - schema not found`);
     return {
       success: false,
       error: "Invalid field path"
     };
   }
+  console.log(`[validateField] Found schema for path "${path}", type:`, fieldSchema.constructor.name);
   const value = getValueByPath(formData, path);
+  console.log(`[validateField] Value at path "${path}":`, value);
   const result = fieldSchema.safeParse(value);
+  console.log(`[validateField] Validation result for "${path}":`, result.success ? "\u2705 SUCCESS" : "\u274C FAILED", result.success ? "" : result.error.errors[0]?.message);
   if (result.success) {
     return {
       success: true
@@ -3567,10 +3612,14 @@ function createDaisyUIArrayField() {
     const fieldMetadata = formState.fieldsMetadata[props.name] || {};
     const arrayValue = formState.getValue(props.name) || [];
     const getFieldName = (fieldPath, index) => {
-      if (props.autoPrefixFields) {
-        return `${props.name}.${index}.${fieldPath}`;
-      }
-      return fieldPath;
+      return `${props.name}.${index}.${fieldPath}`;
+    };
+    const generateFieldsProxy = (index) => {
+      return new Proxy({}, {
+        get: (_target, prop) => {
+          return getFieldName(prop, index);
+        }
+      });
     };
     const instance = getCurrentInstance();
     const addItem = (item) => {
@@ -3713,7 +3762,8 @@ function createDaisyUIArrayField() {
               /* @__PURE__ */ jsx("div", { class: "flex-1", children: slots.itemRenderer?.({
                 item,
                 index,
-                getFieldName: (fieldPath) => getFieldName(fieldPath, index)
+                // Type-safe fields object with autocomplete
+                fields: generateFieldsProxy(index)
               }) || (props.itemRenderer ? props.itemRenderer(item, index) : JSON.stringify(item)) }),
               /* @__PURE__ */ jsxs("div", { class: "flex items-center space-x-1 ml-2", children: [
                 props.allowReordering && /* @__PURE__ */ jsxs("div", { class: "flex space-x-1", children: [
@@ -3805,7 +3855,6 @@ function createDaisyUIArrayField() {
     "minItems",
     "maxItems",
     "allowReordering",
-    "autoPrefixFields",
     "ariaLabels"
   ];
   return DaisyUIArrayField;
@@ -5564,6 +5613,7 @@ function createDaisyUITextareaField() {
 }
 function createDaisyUITextField() {
   const DaisyUITextField = (props, { attrs }) => {
+    console.log(`[TextField] Rendering with name prop: "${props.name}"`);
     const formState = inject(ZINIA_FORM_KEY);
     if (!formState) {
       console.error("TextField: formState is required but was not injected");