shadcn-zod-formkit 1.6.0 → 1.7.0

package/README.md

@@ -116,7 +116,8 @@ const mockFields: Array<FieldProps |FieldProps[]> = [
   | **Upload Multi File**    |  `InputTypes.FILE_MULTI_UPLOAD`    | 
   | **Button Group**         |  `InputTypes.BUTTON_GROUP`         | 
   | **Input Currency**       |  `InputTypes.CURRENCY`             | 
-  | **Input Key Value**      |  `InputTypes.KEY_VALUE`             | 
+  | **Input Key Value**      |  `InputTypes.KEY_VALUE`            | 
+  | **Input Repeater**       |  `InputTypes.REPEATER`             | 
 
 
 

package/dist/index.cjs

@@ -4932,15 +4932,19 @@ var getFieldLabel = (fieldErrorKey, fields) => {
   const findedField = fields.find((field) => field.name == fieldErrorKey);
   return findedField?.label ?? fieldErrorKey;
 };
-var FormFieldsGrid = ({ fields, form, isPending, className = "", gap = "gap-2" }) => {
+var FormFieldsGrid = ({ fields, form, isPending, readOnly, className = "", gap = "gap-2" }) => {
   return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: fields.map(
-    (input, idx) => Array.isArray(input) ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "w-full  flex flex-row justify-between py-3", children: input.map((field, subIdx) => /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-full px-2", children: InputFactory.create(field, form, isPending) }, subIdx)) }, `field-group-${idx}`) : /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex flex-col justify-between py-3 w-full px-2", children: InputFactory.create(input, form, isPending) }, `field-group-${idx}`)
+    (input, idx) => Array.isArray(input) ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "w-full  flex flex-row justify-between py-3", children: input.map((field, subIdx) => {
+      if (readOnly) field.disabled = readOnly;
+      return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-full px-2", children: InputFactory.create(field, form, isPending) }, subIdx);
+    }) }, `field-group-${idx}`) : /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex flex-col justify-between py-3 w-full px-2", children: InputFactory.create(input, form, isPending) }, `field-group-${idx}`)
   ) });
 };
 var DynamicForm = ({
   formTitle,
   formSubTitle,
   fields,
+  readOnly = false,
   record = {},
   onSubmit,
   extraValidations,
@@ -4948,7 +4952,7 @@ var DynamicForm = ({
   errorAlertPosition = "up",
   withCard = false,
   submitBtnClass = "",
-  submitBtnLabel = "Submit"
+  submitBtnLabel = "Guardar"
 }) => {
   const [isPending, startTransition] = React3.useTransition();
   const schema = React3.useMemo(() => getDynamicSchema(fields, extraValidations), [fields, extraValidations]);
@@ -4961,6 +4965,7 @@ var DynamicForm = ({
     form.reset(defaultValues);
   }, [defaultValues, form]);
   const handleSubmit = (data) => {
+    if (readOnly) return;
     try {
       startTransition(async () => {
         const resp = { data, form };
@@ -4972,20 +4977,30 @@ var DynamicForm = ({
   };
   const formContent = /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
     /* @__PURE__ */ jsxRuntime.jsxs(CardTitle, { className: "flex items-center gap-2 p-2 border-b", children: [
-      /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Settings, { className: "h-5 w-5" }),
-      formTitle
+      /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Pencil, { className: "h-5 w-5" }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("p", { children: formTitle }),
+        formSubTitle && /* @__PURE__ */ jsxRuntime.jsx(CardDescription, { children: formSubTitle })
+      ] })
     ] }),
     withErrorsAlert && errorAlertPosition === "up" && /* @__PURE__ */ jsxRuntime.jsx(FormErrorsAlert, { formState: form.formState, fields }),
-    /* @__PURE__ */ jsxRuntime.jsx(Form, { ...form, children: /* @__PURE__ */ jsxRuntime.jsxs("form", { onSubmit: form.handleSubmit(handleSubmit), className: "flex flex-col gap-2", children: [
-      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-full grid grid-cols-1", children: /* @__PURE__ */ jsxRuntime.jsx(FormFieldsGrid, { fields, form }) }),
-      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-row gap-2 justify-end items-end", children: /* @__PURE__ */ jsxRuntime.jsx(Button, { type: "submit", size: "lg", className: submitBtnClass, disabled: isPending, children: isPending ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-        /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Loader2, { className: "h-4 w-4 mr-2 animate-spin" }),
-        submitBtnLabel ?? "Saving..."
-      ] }) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-        /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Save, { className: "h-4 w-4 mr-2" }),
-        submitBtnLabel ?? "Save"
-      ] }) }) })
-    ] }) }),
+    /* @__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: [
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-full grid grid-cols-1", children: /* @__PURE__ */ jsxRuntime.jsx(FormFieldsGrid, { fields, form, readOnly }) }),
+          !readOnly && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-row gap-2 justify-end items-end", children: /* @__PURE__ */ jsxRuntime.jsx(Button, { type: "submit", size: "lg", className: submitBtnClass, disabled: isPending, children: isPending ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+            /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Loader2, { className: "h-4 w-4 mr-2 animate-spin" }),
+            "Guardando..."
+          ] }) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+            /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Save, { className: "h-4 w-4 mr-2" }),
+            submitBtnLabel
+          ] }) }) })
+        ]
+      }
+    ) }),
     withErrorsAlert && errorAlertPosition === "down" && /* @__PURE__ */ jsxRuntime.jsx(FormErrorsAlert, { formState: form.formState, fields })
   ] });
   if (!withCard) return formContent;