shadcn-zod-formkit 1.19.0 → 1.21.0

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";
@@ -1806,25 +1819,28 @@ function ButtonGroup({
 var ButtonGroupInput = class extends BaseInput {
   render() {
     const { input, form, isSubmitting } = this;
-    return /* @__PURE__ */ jsxRuntime.jsx(FieldButtonGroup, { input, form, isSubmitting });
+    const className = input.className;
+    return /* @__PURE__ */ jsxRuntime.jsx(FieldButtonGroup, { input, form, isSubmitting, className });
   }
 };
-var FieldButtonGroup = ({ input, form, isSubmitting }) => {
+var FieldButtonGroup = ({ input, form, isSubmitting, className = "w-full flex-1" }) => {
   const options = (input.listConfig?.list ?? []).filter((option) => "name" in option);
   const handleSelect = (value) => {
     form.setValue(input.name, value, { shouldValidate: true });
+    if (input.listConfig?.onOptionChange) input.listConfig.onOptionChange(value);
   };
   const selectedValue = form.watch(input.name);
-  return /* @__PURE__ */ jsxRuntime.jsx(ButtonGroup, { 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",
+      className,
       variant: selectedValue === option.value ? "default" : "outline",
       onClick: () => handleSelect(option.value),
       disabled: isSubmitting,
       children: option.label ?? option.name
     },
-    option.value
+    key
   )) });
 };
 var CheckListInput = class extends BaseInput {
@@ -4015,7 +4031,6 @@ var FieldFile = ({ form, input, isSubmitting }) => {
     if (file) {
       const objectUrl = URL.createObjectURL(file);
       setPreview(objectUrl);
-      console.log("\u{1F680} ~ handleFileChange ~ objectUrl:", objectUrl);
     } else {
       setPreview(null);
     }
@@ -5491,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) {
@@ -5526,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;
@@ -5542,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",
@@ -5569,6 +5589,9 @@ var getFieldLabel = (fieldErrorKey, fields) => {
   return foundField?.label ?? fieldErrorKey;
 };
 var isRenderableChild = (c) => c !== void 0 && c !== null && typeof c !== "function";
+var isFieldProps = (f) => {
+  return !Array.isArray(f);
+};
 var FormFieldsGrid = ({
   fields,
   form,
@@ -5577,47 +5600,54 @@ var FormFieldsGrid = ({
   className = "",
   gap = "gap-2"
 }) => {
-  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 w-full px-2" : "flex flex-col gap-2 w-full px-2";
+    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: dirClass, 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 renderGroup = (group, groupDirection = "row") => {
+    const dirClass = groupDirection === "row" ? "flex flex-row items-start gap-4 py-3 w-full" : "flex flex-col gap-4 py-3 w-full";
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: dirClass, children: group.map(
+      (f, idx) => isFieldProps(f) ? renderField(f) : Array.isArray(f) ? (
+        // ⚠ Solo soportamos [[FieldProps]] como subgrupo
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-full flex flex-row items-start gap-4", children: f.map(
+          (subField) => isFieldProps(subField) ? renderField(subField) : null
+        ) }, idx)
+      ) : null
+    ) });
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: `w-full grid grid-cols-1 ${gap} ${className}`, children: fields.map((f, idx) => {
+    if (isFieldProps(f)) {
+      return renderField(f);
+    } else if (Array.isArray(f)) {
+      if (f.length > 0 && Array.isArray(f[0])) {
+        return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-col gap-4 py-3", children: f.map((subGroup, subIdx) => /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            className: "w-full flex flex-row items-start gap-4",
+            children: Array.isArray(subGroup) && subGroup.map(
+              (subField) => isFieldProps(subField) ? renderField(subField) : null
+            )
+          },
+          subIdx
+        )) }, idx);
+      } else {
+        const firstField = f[0];
+        const direction = firstField?.direction ?? "row";
+        return /* @__PURE__ */ jsxRuntime.jsx("div", { children: renderGroup(f, direction) }, idx);
+      }
+    }
+    return null;
+  }) });
 };
 var DynamicForm = ({
   formTitle,
@@ -5640,7 +5670,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({
@@ -5676,7 +5709,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",
       {
@@ -5684,10 +5723,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,
               {
@@ -5722,7 +5768,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 }) });
@@ -6000,6 +6052,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;