shadcn-zod-formkit 1.20.0 → 1.21.1

package/dist/index.cjs

@@ -234,6 +234,19 @@ var entitiesToGroupedOption = (data, optionValue = "name") => {
 };
 
 // src/components/custom/form/inputs/base/definitions.ts
+var flattenFields = (fields) => {
+  const result = [];
+  for (const field of fields) {
+    if (Array.isArray(field)) {
+      result.push(...flattenFields(field));
+    } else if (field.fields) {
+      result.push(...flattenFields(field.fields));
+    } else {
+      result.push(field);
+    }
+  }
+  return result;
+};
 var TextInputType = /* @__PURE__ */ ((TextInputType2) => {
   TextInputType2["DEFAULT"] = "default";
   TextInputType2["NUMBER"] = "number";
@@ -1817,7 +1830,7 @@ var FieldButtonGroup = ({ input, form, isSubmitting, className = "w-full flex-1"
     if (input.listConfig?.onOptionChange) input.listConfig.onOptionChange(value);
   };
   const selectedValue = form.watch(input.name);
-  return /* @__PURE__ */ jsxRuntime.jsx(ButtonGroup, { className: "flex flex-row  w-full", children: options.map((option) => /* @__PURE__ */ jsxRuntime.jsx(
+  return /* @__PURE__ */ jsxRuntime.jsx(ButtonGroup, { className: "flex flex-row  w-full", children: options.map((option, key) => /* @__PURE__ */ jsxRuntime.jsx(
     Button,
     {
       type: "button",
@@ -1827,7 +1840,7 @@ var FieldButtonGroup = ({ input, form, isSubmitting, className = "w-full flex-1"
       disabled: isSubmitting,
       children: option.label ?? option.name
     },
-    option.value
+    key
   )) });
 };
 var CheckListInput = class extends BaseInput {
@@ -5493,32 +5506,12 @@ var InputFactory = class {
 function getDefaultValues(entity, fields) {
   const defaults = {};
   if (entity) {
-    for (const key in entity) {
-      const value = entity[key];
-      if (value === null || value === void 0) {
-        defaults[key] = "";
-        continue;
-      }
-      switch (typeof value) {
-        case "string":
-          defaults[key] = value;
-          break;
-        case "number":
-          defaults[key] = value;
-          break;
-        case "boolean":
-          defaults[key] = value;
-          break;
-        case "object":
-          defaults[key] = Array.isArray(value) ? [...value] : { ...value };
-          break;
-        default:
-          defaults[key] = value;
-      }
-    }
+    Object.entries(entity).forEach(([key, value]) => {
+      defaults[key] = value ?? "";
+    });
   }
   if (fields) {
-    const flatFields = fields.flat();
+    const flatFields = flattenFields2(fields);
     for (const field of flatFields) {
       const key = field.name;
       if (defaults[key] === void 0) {
@@ -5528,10 +5521,21 @@ function getDefaultValues(entity, fields) {
   }
   return defaults;
 }
+var flattenFields2 = (fields) => {
+  const result = [];
+  for (const field of fields) {
+    if (Array.isArray(field)) {
+      result.push(...flattenFields2(field));
+    } else if (field.fields) {
+      result.push(...flattenFields2(field.fields));
+    } else {
+      result.push(field);
+    }
+  }
+  return result;
+};
 var getDynamicSchema = (fields, extraValidations) => {
-  const flatFields = fields.flatMap(
-    (f) => Array.isArray(f) ? f : [f]
-  );
+  const flatFields = flattenFields2(fields);
   const shape = flatFields.reduce((acc, f) => {
     acc[f.name] = f.zodType ?? z2__default.default.any();
     return acc;
@@ -5544,12 +5548,26 @@ var getDynamicSchema = (fields, extraValidations) => {
   }
   return schema;
 };
+var flattenFields3 = (fields) => {
+  const result = [];
+  for (const field of fields) {
+    if (Array.isArray(field)) {
+      result.push(...flattenFields3(field));
+    } else if (field.fields) {
+      result.push(...flattenFields3(field.fields));
+    } else {
+      result.push(field);
+    }
+  }
+  return result;
+};
 var FormErrorsAlert = ({
   formState,
   fields
 }) => {
-  const flatFields = fields.flatMap((f) => Array.isArray(f) ? f : [f]);
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { style: { marginTop: 4 }, children: Object.entries(formState.errors).length > 0 && /* @__PURE__ */ jsxRuntime.jsx(
+  const flatFields = flattenFields3(fields);
+  const hasErrors = Object.keys(formState.errors).length > 0;
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { style: { marginTop: 4 }, children: hasErrors && /* @__PURE__ */ jsxRuntime.jsx(
     CustomAlert,
     {
       title: "Revisar los siguientes criterios",
@@ -5571,55 +5589,48 @@ var getFieldLabel = (fieldErrorKey, fields) => {
   return foundField?.label ?? fieldErrorKey;
 };
 var isRenderableChild = (c) => c !== void 0 && c !== null && typeof c !== "function";
+var isFieldProps = (f) => !Array.isArray(f);
 var FormFieldsGrid = ({
   fields,
   form,
   isPending,
   readOnly,
   className = "",
-  gap = "gap-2"
+  gap = "gap-4"
 }) => {
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: `w-full grid grid-cols-1 ${gap} ${className}`, children: fields.map(
-    (inputOrGroup, idx) => Array.isArray(inputOrGroup) ? /* @__PURE__ */ jsxRuntime.jsx(
-      "div",
-      {
-        className: "w-full flex flex-row items-start gap-4 py-3",
-        children: inputOrGroup.map((field, subIdx) => {
-          const fieldCopy = {
-            ...field,
-            disabled: readOnly ? true : field.disabled
-          };
-          const renderInlineChild = fieldCopy.childrenPosition !== "down" && isRenderableChild(fieldCopy.children);
-          const renderInlineChildDown = fieldCopy.childrenPosition === "down" && isRenderableChild(fieldCopy.children);
-          return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "w-full px-2", children: [
-            renderInlineChild && /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: fieldCopy.children }),
-            InputFactory.create(fieldCopy, form, isPending),
-            renderInlineChildDown && /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: fieldCopy.children })
-          ] }, `field-${idx}-${subIdx}`);
-        })
-      },
-      `field-group-${idx}`
-    ) : /* @__PURE__ */ jsxRuntime.jsx(
-      "div",
-      {
-        className: "flex flex-col justify-between py-3 w-full px-2",
-        children: (() => {
-          const fieldCopy = {
-            ...inputOrGroup,
-            disabled: readOnly ? true : inputOrGroup.disabled
-          };
-          const renderUp = fieldCopy.childrenPosition !== "down" && isRenderableChild(fieldCopy.children);
-          const renderDown = fieldCopy.childrenPosition === "down" && isRenderableChild(fieldCopy.children);
-          return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-            renderUp && /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: fieldCopy.children }),
-            InputFactory.create(fieldCopy, form, isPending),
-            renderDown && /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: fieldCopy.children })
-          ] });
-        })()
-      },
-      `field-single-${idx}`
-    )
-  ) });
+  const renderField = (field) => {
+    const fieldCopy = { ...field, disabled: readOnly ? true : field.disabled };
+    const renderUp = fieldCopy.childrenPosition !== "down" && isRenderableChild(fieldCopy.children);
+    const renderDown = fieldCopy.childrenPosition === "down" && isRenderableChild(fieldCopy.children);
+    const dirClass = fieldCopy.direction === "row" ? "flex flex-row items-center gap-4" : "flex flex-col gap-2";
+    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `${dirClass} w-full`, children: [
+      renderUp && /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: fieldCopy.children }),
+      InputFactory.create(fieldCopy, form, isPending),
+      renderDown && /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: fieldCopy.children })
+    ] });
+  };
+  const renderColumn = (col) => {
+    if (col.length === 0) return null;
+    const colDirection = isFieldProps(col[0]) && col[0].direction === "row" ? "flex flex-row gap-4" : "flex flex-col gap-2";
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: `${colDirection} flex-1`, children: col.map((item, idx) => {
+      if (isFieldProps(item)) return renderField(item);
+      if (Array.isArray(item)) return renderColumn(item);
+      return null;
+    }) });
+  };
+  const renderRow = (row) => {
+    if (row.length === 0) return null;
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-full flex flex-row gap-4 py-2", children: row.map((col, idx) => {
+      if (isFieldProps(col)) return renderColumn([col]);
+      if (Array.isArray(col)) return renderColumn(col);
+      return null;
+    }) });
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: `w-full flex flex-col gap-4 ${className}`, children: fields.map((f, idx) => {
+    if (isFieldProps(f)) return /* @__PURE__ */ jsxRuntime.jsx("div", { children: renderField(f) }, idx);
+    if (Array.isArray(f)) return /* @__PURE__ */ jsxRuntime.jsx("div", { children: renderRow(f) }, idx);
+    return null;
+  }) });
 };
 var DynamicForm = ({
   formTitle,
@@ -5642,7 +5653,10 @@ var DynamicForm = ({
   submitBtnLabel = "Guardar"
 }) => {
   const [isPending, startTransition] = React3.useTransition();
-  const schema = React3.useMemo(() => getDynamicSchema(fields, extraValidations), [fields, extraValidations]);
+  const schema = React3.useMemo(() => {
+    const allFields = flattenFields(fields);
+    return getDynamicSchema(allFields, extraValidations);
+  }, [fields, extraValidations]);
   const resolver = zod.zodResolver(schema);
   const initialValues = React3.useMemo(() => getDefaultValues(record), [record]);
   const form = reactHookForm.useForm({
@@ -5678,7 +5692,13 @@ var DynamicForm = ({
       ] }),
       childrenHeader && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-row items-center gap-2 w-full h-full", children: childrenHeader })
     ] }),
-    withErrorsAlert && errorAlertPosition === "up" && /* @__PURE__ */ jsxRuntime.jsx(FormErrorsAlert, { formState: form.formState, fields }),
+    withErrorsAlert && errorAlertPosition === "up" && /* @__PURE__ */ jsxRuntime.jsx(
+      FormErrorsAlert,
+      {
+        formState: form.formState,
+        fields
+      }
+    ),
     /* @__PURE__ */ jsxRuntime.jsx(Form, { ...form, children: /* @__PURE__ */ jsxRuntime.jsxs(
       "form",
       {
@@ -5686,10 +5706,17 @@ var DynamicForm = ({
         className: `flex flex-col gap-2 ${readOnly ? "opacity-70 pointer-events-none select-none" : ""}`,
         children: [
           /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "w-full grid grid-cols-1", children: [
-            /* @__PURE__ */ jsxRuntime.jsx(FormFieldsGrid, { fields, form, readOnly }),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              FormFieldsGrid,
+              {
+                fields,
+                form,
+                readOnly
+              }
+            ),
             children && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-row items-center gap-2 w-full h-full", children })
           ] }),
-          /* @__PURE__ */ jsxRuntime.jsxs(ButtonGroup, { className: "flex flex-row  w-full", children: [
+          /* @__PURE__ */ jsxRuntime.jsxs(ButtonGroup, { className: "flex flex-row w-full", children: [
             listBtnConfig.map((btn, key) => /* @__PURE__ */ jsxRuntime.jsx(
               Button,
               {
@@ -5724,7 +5751,13 @@ var DynamicForm = ({
         ]
       }
     ) }),
-    withErrorsAlert && errorAlertPosition === "down" && /* @__PURE__ */ jsxRuntime.jsx(FormErrorsAlert, { formState: form.formState, fields })
+    withErrorsAlert && errorAlertPosition === "down" && /* @__PURE__ */ jsxRuntime.jsx(
+      FormErrorsAlert,
+      {
+        formState: form.formState,
+        fields: fields.flatMap((f) => Array.isArray(f) ? f : [f])
+      }
+    )
   ] });
   if (!withCard) return formContent;
   return /* @__PURE__ */ jsxRuntime.jsx(Card, { children: /* @__PURE__ */ jsxRuntime.jsx(CardContent, { children: formContent }) });
@@ -6002,6 +6035,7 @@ exports.entitiesToGroupedOption = entitiesToGroupedOption;
 exports.entitiesToInputOption = entitiesToInputOption;
 exports.entityToGroupedOption = entityToGroupedOption;
 exports.entityToInputOption = entityToInputOption;
+exports.flattenFields = flattenFields;
 exports.getDefaultValues = getDefaultValues;
 exports.getDynamicSchema = getDynamicSchema;
 exports.getFieldLabel = getFieldLabel;