shadcn-zod-formkit 1.30.1 → 1.31.0

package/dist/index.cjs

@@ -6166,6 +6166,16 @@ var getFieldLabel = (fieldErrorKey, fields) => {
   return foundField?.label ?? fieldErrorKey;
 };
 var isRenderableChild = (c) => c !== void 0 && c !== null && typeof c !== "function";
+var shouldShowField = (field, values) => {
+  if (typeof field.showWhen === "function") {
+    try {
+      return !!field.showWhen(values);
+    } catch {
+      return true;
+    }
+  }
+  return true;
+};
 var FormFieldsGrid = ({
   fields,
   form,
@@ -6174,47 +6184,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(
+  const values = form.watch();
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: `w-full grid grid-cols-1 ${gap} ${className}`, children: fields.map((inputOrGroup, idx) => {
+    if (Array.isArray(inputOrGroup)) {
+      const visibleFields = inputOrGroup.filter(
+        (f) => shouldShowField(f, values)
+      );
+      if (visibleFields.length === 0) return null;
+      return /* @__PURE__ */ jsxRuntime.jsx(
+        "div",
+        {
+          className: "w-full flex flex-row items-start gap-4 py-3",
+          children: visibleFields.map((field, subIdx) => {
+            const fieldCopy2 = {
+              ...field,
+              disabled: readOnly ? true : field.disabled
+            };
+            const renderUp2 = fieldCopy2.childrenPosition !== "down" && isRenderableChild(fieldCopy2.children);
+            const renderDown2 = fieldCopy2.childrenPosition === "down" && isRenderableChild(fieldCopy2.children);
+            return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "w-full px-2", children: [
+              renderUp2 && /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: fieldCopy2.children }),
+              InputFactory.create(fieldCopy2, form, isPending),
+              renderDown2 && /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: fieldCopy2.children })
+            ] }, `field-${idx}-${subIdx}`);
+          })
+        },
+        `field-group-${idx}`
+      );
+    }
+    if (!shouldShowField(inputOrGroup, values)) return null;
+    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(
       "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 })
-          ] });
-        })()
+        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}`
-    )
-  ) });
+    );
+  }) });
 };
 var DynamicForm = ({
   formTitle,
@@ -6239,7 +6256,8 @@ var DynamicForm = ({
   submitBtnLabelSubmiting = "Guardando...",
   withFormWrapper = true,
   btnGroupDirection = "flex-end",
-  withSubmitBtn = true
+  withSubmitBtn = true,
+  debug = false
 }) => {
   const [isPending, startTransition] = React3.useTransition();
   const schema = React3.useMemo(() => {
@@ -6266,7 +6284,7 @@ var DynamicForm = ({
     if (!onClick) return;
     const isValid2 = await form.trigger();
     if (!isValid2) return;
-    const data = form.getValues();
+    const data = form.watch();
     const resp = { data, form };
     onClick(resp);
   };
@@ -6351,13 +6369,17 @@ var DynamicForm = ({
   if (!withCard) return formContent;
   return /* @__PURE__ */ jsxRuntime.jsx(Card, { children: /* @__PURE__ */ jsxRuntime.jsx(CardContent, { children: formContent }) });
 };
-var FormWrapper = ({ form, handleSubmit, children, readOnly }) => {
-  return /* @__PURE__ */ jsxRuntime.jsx(Form, { ...form, children: /* @__PURE__ */ jsxRuntime.jsx(
+var FormWrapper = ({ form, handleSubmit, children, readOnly, debug }) => {
+  const allValues = form.watch();
+  return /* @__PURE__ */ jsxRuntime.jsx(Form, { ...form, children: /* @__PURE__ */ jsxRuntime.jsxs(
     "form",
     {
       onSubmit: form.handleSubmit(handleSubmit),
       className: `flex flex-col gap-2 ${readOnly ? "opacity-70 pointer-events-none select-none" : ""}`,
-      children
+      children: [
+        children,
+        debug && /* @__PURE__ */ jsxRuntime.jsx("pre", { className: "mt-4 p-3 bg-muted text-xs rounded", children: JSON.stringify(allValues, null, 2) })
+      ]
     }
   ) });
 };