shadcn-zod-formkit 1.4.0 → 1.6.0

package/dist/index.cjs

@@ -265,9 +265,11 @@ var InputTypes = /* @__PURE__ */ ((InputTypes2) => {
   InputTypes2["BUTTON_GROUP"] = "button_group";
   InputTypes2["CURRENCY"] = "currency";
   InputTypes2["KEY_VALUE"] = "key_value";
+  InputTypes2["REPEATER"] = "repeater";
   return InputTypes2;
 })(InputTypes || {});
 var inputFieldComp = [
+  "repeater" /* REPEATER */,
   "key_value" /* KEY_VALUE */,
   "currency" /* CURRENCY */,
   "button_group" /* BUTTON_GROUP */,
@@ -4217,6 +4219,100 @@ var FieldRadioGroup = ({ input, form, isSubmitting }) => {
   );
   return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: formField });
 };
+var RepeaterInput = class extends BaseInput {
+  render() {
+    const { input, form, isSubmitting } = this;
+    return /* @__PURE__ */ jsxRuntime.jsx(FieldRepeater, { form, input, isSubmitting });
+  }
+};
+var FieldRepeater = ({ form, input, isSubmitting }) => {
+  const { control } = form;
+  const { fields, append, remove } = reactHookForm.useFieldArray({
+    control,
+    name: input.name
+  });
+  const canAdd = !input.maxItems || fields.length < input.maxItems;
+  const canRemove = fields.length > (input.minItems ?? 0);
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    FormField,
+    {
+      control,
+      name: input.name,
+      render: () => /* @__PURE__ */ jsxRuntime.jsxs(FormItem, { className: input.className, children: [
+        /* @__PURE__ */ jsxRuntime.jsx(FormLabel, { children: /* @__PURE__ */ jsxRuntime.jsx("b", { children: input.label }) }),
+        /* @__PURE__ */ jsxRuntime.jsx(FormControl, { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-3", children: [
+          fields.map((item, index) => /* @__PURE__ */ jsxRuntime.jsxs(
+            "div",
+            {
+              className: "border p-3 rounded-md flex flex-col gap-3",
+              children: [
+                input.repeaterFields?.map((fieldGroup, groupIndex) => {
+                  const group = Array.isArray(fieldGroup) ? fieldGroup : [fieldGroup];
+                  const cols = group.length;
+                  return /* @__PURE__ */ jsxRuntime.jsx(
+                    "div",
+                    {
+                      className: `grid gap-3 grid-cols-${cols}`,
+                      children: group.map((subField) => /* @__PURE__ */ jsxRuntime.jsx(
+                        FormField,
+                        {
+                          control,
+                          name: `${input.name}.${index}.${subField.name}`,
+                          render: ({ field, fieldState }) => /* @__PURE__ */ jsxRuntime.jsxs(FormItem, { className: "flex-1", children: [
+                            /* @__PURE__ */ jsxRuntime.jsx(FormLabel, { children: subField.label }),
+                            /* @__PURE__ */ jsxRuntime.jsx(FormControl, { children: /* @__PURE__ */ jsxRuntime.jsx(
+                              Input,
+                              {
+                                placeholder: subField.placeHolder,
+                                disabled: subField.disabled || isSubmitting,
+                                ...field
+                              }
+                            ) }),
+                            /* @__PURE__ */ jsxRuntime.jsx(FormMessage, { children: fieldState.error?.message })
+                          ] })
+                        },
+                        `${input.name}.${index}.${subField.name}`
+                      ))
+                    },
+                    groupIndex
+                  );
+                }),
+                canRemove && /* @__PURE__ */ jsxRuntime.jsx(
+                  Button,
+                  {
+                    type: "button",
+                    variant: "destructive",
+                    size: "icon",
+                    onClick: () => remove(index),
+                    className: "self-end",
+                    children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Trash2, { size: 18 })
+                  }
+                )
+              ]
+            },
+            item.id
+          )),
+          canAdd && /* @__PURE__ */ jsxRuntime.jsxs(
+            Button,
+            {
+              type: "button",
+              variant: "secondary",
+              onClick: () => append({}),
+              disabled: isSubmitting,
+              className: "w-full",
+              children: [
+                /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Plus, { size: 16, className: "mr-2" }),
+                "Agregar"
+              ]
+            }
+          )
+        ] }) }),
+        input.description && /* @__PURE__ */ jsxRuntime.jsx(FormDescription, { children: input.description }),
+        /* @__PURE__ */ jsxRuntime.jsx(FormMessage, {})
+      ] })
+    }
+  );
+};
 var SelectInput = class extends BaseInput {
   render() {
     const { input, form, isSubmitting } = this;
@@ -4744,6 +4840,7 @@ var inputMap = {
   ["button_group" /* BUTTON_GROUP */]: ButtonGroupInput,
   ["currency" /* CURRENCY */]: CurrencyInput,
   ["key_value" /* KEY_VALUE */]: KeyValueListInput,
+  ["repeater" /* REPEATER */]: RepeaterInput,
   //ToDos: ============================================================
   ["slider" /* SLIDER */]: SliderInput,
   //ToDo: // PENDIENTE ... VISUALMENTE NO SE VE BIEN.!!!
@@ -4835,6 +4932,11 @@ 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" }) => {
+  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}`)
+  ) });
+};
 var DynamicForm = ({
   formTitle,
   formSubTitle,
@@ -4842,9 +4944,9 @@ var DynamicForm = ({
   record = {},
   onSubmit,
   extraValidations,
-  withCard = false,
   withErrorsAlert = true,
   errorAlertPosition = "up",
+  withCard = false,
   submitBtnClass = "",
   submitBtnLabel = "Submit"
 }) => {
@@ -4856,14 +4958,12 @@ var DynamicForm = ({
     defaultValues
   });
   React3.useEffect(() => {
-    console.log("\u{1F501} Redibuja cuando cambian los fields o los valores por defecto");
     form.reset(defaultValues);
-  }, []);
+  }, [defaultValues, form]);
   const handleSubmit = (data) => {
     try {
       startTransition(async () => {
         const resp = { data, form };
-        await new Promise((resolve) => setTimeout(resolve, 3e3));
         onSubmit?.(resp);
       });
     } catch (error) {
@@ -4871,16 +4971,14 @@ 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.jsxs(CardTitle, { className: "flex items-center gap-2 p-2 border-b", children: [
       /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Settings, { className: "h-5 w-5" }),
       formTitle
     ] }),
-    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", { onSubmit: form.handleSubmit(handleSubmit), className: "flex flex-col gap-2", children: [
-      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-full grid grid-cols-1", 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}`)
-      ) }),
-      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-row gap-2 justify-end items-end justify-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("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: [
@@ -4888,7 +4986,7 @@ var DynamicForm = ({
         submitBtnLabel ?? "Save"
       ] }) }) })
     ] }) }),
-    withErrorsAlert && errorAlertPosition == "down" && /* @__PURE__ */ jsxRuntime.jsx(FormErrorsAlert, { formState: form.formState, fields })
+    withErrorsAlert && errorAlertPosition === "down" && /* @__PURE__ */ jsxRuntime.jsx(FormErrorsAlert, { formState: form.formState, fields })
   ] });
   if (!withCard) return formContent;
   return /* @__PURE__ */ jsxRuntime.jsx(Card, { children: /* @__PURE__ */ jsxRuntime.jsx(CardContent, { children: formContent }) });