shadcn-zod-formkit 1.26.0 → 1.27.0

package/dist/index.cjs

@@ -233,13 +233,23 @@ var entitiesToGroupedOption = (data, optionValue = "name") => {
   return entities;
 };
 var handleOnChage = (event, input, field) => {
-  console.log("\u{1F680} ~ handleOnChage ~ event:", event);
   if (event) field?.onChange(event);
-  input.onChange?.(event);
+  const data = input.form?.getValues();
+  input.onChange?.(event, data);
+  if (input.onAnyFieldChange) input.onAnyFieldChange?.(data);
+};
+var isValidField = (input, form, defaultValue) => {
+  const value = defaultValue ?? form.getValues(input.name);
+  const fieldState = form.getFieldState(input.name);
+  if (input.zodType) {
+    const result = input.zodType.safeParse(value);
+    return result.success;
+  }
+  return !fieldState.error && value !== void 0 && value !== "";
 };
 
 // src/components/custom/form/inputs/base/definitions.ts
-var flattenFields = (fields) => {
+var flattenFields = (fields, onAnyFieldChange) => {
   const result = [];
   for (const field of fields) {
     if (Array.isArray(field)) {
@@ -247,6 +257,7 @@ var flattenFields = (fields) => {
     } else if (field.fields) {
       result.push(...flattenFields(field.fields));
     } else {
+      if (onAnyFieldChange) field.onAnyFieldChange = (data) => onAnyFieldChange(data);
       result.push(field);
     }
   }
@@ -4204,60 +4215,82 @@ function cleanEscapedString(input) {
 var DateInput = class extends BaseInput {
   render() {
     const { input, form, isSubmitting } = this;
-    const formField = /* @__PURE__ */ jsxRuntime.jsx(
-      FormField,
-      {
-        control: form.control,
-        name: input.name,
-        render: ({ field }) => {
-          const [date, setDate] = React3__namespace.useState(
-            field.value ? new Date(field.value) : void 0
-          );
-          React3__namespace.useEffect(() => {
-            if (field.value && !date) {
-              setDate(new Date(field.value));
-            }
-          }, [field.value]);
-          const handleSelect = (selectedDate) => {
-            setDate(selectedDate);
-            handleOnChage(selectedDate, input, field);
-          };
-          return /* @__PURE__ */ jsxRuntime.jsxs(FormItem, { children: [
-            /* @__PURE__ */ jsxRuntime.jsx(FormLabel, { children: /* @__PURE__ */ jsxRuntime.jsx("b", { children: input.label }) }),
-            /* @__PURE__ */ jsxRuntime.jsxs(Popover, { children: [
-              /* @__PURE__ */ jsxRuntime.jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(FormControl, { children: /* @__PURE__ */ jsxRuntime.jsxs(
-                Button,
-                {
-                  variant: "outline",
-                  className: cn(
-                    "w-full justify-start text-left font-normal",
-                    !date && "text-muted-foreground"
-                  ),
-                  children: [
+    return /* @__PURE__ */ jsxRuntime.jsx(FieldTimeInput, { input, form, isSubmitting });
+  }
+};
+var FieldTimeInput = ({ form, input, isSubmitting }) => {
+  const [isValid2, setIsValid] = React3.useState(isValidField(input, form));
+  const groupConfig = input.inputGroupConfig;
+  const autoValidate = groupConfig?.autoValidIcons ?? input.zodType ? true : false;
+  const iconValidState = /* @__PURE__ */ jsxRuntime.jsx(lucideReact.CircleCheck, { style: { color: "#00bf3e" } });
+  const iconInvalidState = /* @__PURE__ */ jsxRuntime.jsx(lucideReact.CircleX, { style: { color: "#ff8080" } });
+  const iconLoadingState = /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Loader2, { className: "animate-spin", style: { color: "#1e90ff" } });
+  const iconsRight = groupConfig?.iconsRight ?? [];
+  groupConfig?.iconsLeft ?? [];
+  groupConfig?.textLeft;
+  const textRight = groupConfig?.textRight;
+  const formField = /* @__PURE__ */ jsxRuntime.jsx(
+    FormField,
+    {
+      control: form.control,
+      name: input.name,
+      render: ({ field }) => {
+        setIsValid(isValidField(input, form));
+        const [date, setDate] = React3__namespace.useState(
+          field.value ? new Date(field.value) : void 0
+        );
+        React3__namespace.useEffect(() => {
+          if (field.value && !date) {
+            setDate(new Date(field.value));
+            setIsValid(isValidField(input, form));
+          }
+        }, [field.value]);
+        const handleSelect = (selectedDate) => {
+          setDate(selectedDate);
+          handleOnChage(selectedDate, input, field);
+        };
+        return /* @__PURE__ */ jsxRuntime.jsxs(FormItem, { children: [
+          /* @__PURE__ */ jsxRuntime.jsx(FormLabel, { children: /* @__PURE__ */ jsxRuntime.jsx("b", { children: input.label }) }),
+          /* @__PURE__ */ jsxRuntime.jsxs(Popover, { children: [
+            /* @__PURE__ */ jsxRuntime.jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(FormControl, { children: /* @__PURE__ */ jsxRuntime.jsx(InputGroup, { className: "flex flex-row gap-1", children: /* @__PURE__ */ jsxRuntime.jsxs(
+              Button,
+              {
+                variant: "outline",
+                className: cn(
+                  "w-full justify-start text-left py-0.5 ",
+                  !date && "text-muted-foreground"
+                ),
+                children: [
+                  /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-1 items-center gap-1 justify-start text-left ", children: [
                     /* @__PURE__ */ jsxRuntime.jsx(lucideReact.CalendarIcon, {}),
                     date ? format(date, "PPP") : /* @__PURE__ */ jsxRuntime.jsx("span", { children: input.placeHolder ?? "Fecha" })
-                  ]
-                }
-              ) }) }),
-              /* @__PURE__ */ jsxRuntime.jsx(PopoverContent, { className: "w-auto p-0", children: /* @__PURE__ */ jsxRuntime.jsx(
-                Calendar,
-                {
-                  mode: "single",
-                  selected: date,
-                  onSelect: handleSelect,
-                  initialFocus: true
-                }
-              ) })
-            ] }),
-            /* @__PURE__ */ jsxRuntime.jsx(FormDescription, { children: input.description }),
-            /* @__PURE__ */ jsxRuntime.jsx(FormMessage, {})
-          ] });
-        }
-      },
-      input.name
-    );
-    return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: formField });
-  }
+                  ] }),
+                  (iconsRight.length > 0 || textRight || autoValidate) && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+                    textRight && /* @__PURE__ */ jsxRuntime.jsx(InputGroupText, { children: textRight }),
+                    iconsRight.map((IconComponent, index) => /* @__PURE__ */ jsxRuntime.jsx(IconComponent, { size: 24, className: "w-6! h-6!" }, index)),
+                    autoValidate && /* @__PURE__ */ jsxRuntime.jsx("div", { children: isSubmitting ? iconLoadingState : isValid2 ? iconValidState : iconInvalidState })
+                  ] })
+                ]
+              }
+            ) }) }) }),
+            /* @__PURE__ */ jsxRuntime.jsx(PopoverContent, { className: "w-auto p-0", children: /* @__PURE__ */ jsxRuntime.jsx(
+              Calendar,
+              {
+                mode: "single",
+                selected: date,
+                onSelect: handleSelect,
+                initialFocus: true
+              }
+            ) })
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsx(FormDescription, { children: input.description }),
+          /* @__PURE__ */ jsxRuntime.jsx(FormMessage, {})
+        ] });
+      }
+    },
+    input.name
+  );
+  return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: formField });
 };
 var DateTimeInput = class extends BaseInput {
   render() {
@@ -4267,7 +4300,7 @@ var DateTimeInput = class extends BaseInput {
 };
 var FieldDateTimeInput = ({ form, input, isSubmitting }) => {
   const groupConfig = input.inputGroupConfig;
-  const autoValidate = groupConfig?.autoValidIcons;
+  const autoValidate = groupConfig?.autoValidIcons ?? input.zodType ? true : false;
   const iconValidState = /* @__PURE__ */ jsxRuntime.jsx(lucideReact.CircleCheck, { style: { color: "#00bf3e" } });
   const iconInvalidState = /* @__PURE__ */ jsxRuntime.jsx(lucideReact.CircleX, { style: { color: "#ff8080" } });
   const iconLoadingState = /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Loader2, { className: "animate-spin", style: { color: "#1e90ff" } });
@@ -4318,7 +4351,7 @@ var FieldDateTimeInput = ({ form, input, isSubmitting }) => {
             ),
             (iconsRight.length > 0 || textRight || autoValidate) && /* @__PURE__ */ jsxRuntime.jsxs(InputGroupAddon, { align: "inline-end", children: [
               textRight && /* @__PURE__ */ jsxRuntime.jsx(InputGroupText, { children: textRight }),
-              iconsRight.map((IconComponent, index) => /* @__PURE__ */ jsxRuntime.jsx(IconComponent, { size: 20 }, index)),
+              iconsRight.map((IconComponent, index) => /* @__PURE__ */ jsxRuntime.jsx(IconComponent, { size: 24 }, index)),
               autoValidate && /* @__PURE__ */ jsxRuntime.jsx("div", { children: isSubmitting ? iconLoadingState : isValid2 ? iconValidState : iconInvalidState })
             ] })
           ] }) }),
@@ -4531,34 +4564,40 @@ var FieldKeyValueList = ({ form, input, isSubmitting }) => {
         return /* @__PURE__ */ jsxRuntime.jsxs(FormItem, { className: input.className, children: [
           /* @__PURE__ */ jsxRuntime.jsx(FormLabel, { children: /* @__PURE__ */ jsxRuntime.jsx("b", { children: input.label }) }),
           /* @__PURE__ */ jsxRuntime.jsx(FormMessage, {}),
-          /* @__PURE__ */ jsxRuntime.jsx(FormControl, { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-3 rounded-xl p-3 ", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(FormControl, { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-3 rounded-xl ", children: [
             pairs.length === 0 && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-muted-foreground", children: "No pairs have been added yet." }),
             pairs.map((pair, index) => /* @__PURE__ */ jsxRuntime.jsxs(
               "div",
               {
-                className: "flex gap-2 items-center",
+                className: "flex flex-row w-full gap-2 items-center py-0.5",
                 children: [
-                  /* @__PURE__ */ jsxRuntime.jsx(
-                    Input,
-                    {
-                      placeholder: "Key",
-                      value: pair.key,
-                      disabled: isSubmitting,
-                      onChange: (e) => handleChange(index, "key", e.target.value),
-                      className: "w-1/2"
-                    }
-                  ),
-                  /* @__PURE__ */ jsxRuntime.jsx(
-                    Input,
-                    {
-                      placeholder: "Value",
-                      value: pair.value,
-                      disabled: isSubmitting,
-                      onChange: (e) => handleChange(index, "value", e.target.value),
-                      className: "w-1/2"
-                    }
-                  ),
-                  /* @__PURE__ */ jsxRuntime.jsx(
+                  /* @__PURE__ */ jsxRuntime.jsxs(ButtonGroup, { className: "w-full", children: [
+                    /* @__PURE__ */ jsxRuntime.jsx(ButtonGroupText, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(LabelPrimitive.Label, { htmlFor: "key", children: "Key" }) }),
+                    /* @__PURE__ */ jsxRuntime.jsx(InputGroup, { children: /* @__PURE__ */ jsxRuntime.jsx(
+                      InputGroupInput,
+                      {
+                        placeholder: "Key",
+                        value: pair.key,
+                        disabled: isSubmitting,
+                        onChange: (e) => handleChange(index, "key", e.target.value),
+                        className: "flex-1"
+                      }
+                    ) })
+                  ] }),
+                  /* @__PURE__ */ jsxRuntime.jsxs(ButtonGroup, { className: "w-full", children: [
+                    /* @__PURE__ */ jsxRuntime.jsx(ButtonGroupText, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(LabelPrimitive.Label, { htmlFor: "value", children: "Value" }) }),
+                    /* @__PURE__ */ jsxRuntime.jsx(InputGroup, { children: /* @__PURE__ */ jsxRuntime.jsx(
+                      InputGroupInput,
+                      {
+                        placeholder: "Value",
+                        value: pair.value,
+                        disabled: isSubmitting,
+                        onChange: (e) => handleChange(index, "value", e.target.value),
+                        className: "flex-1"
+                      }
+                    ) })
+                  ] }),
+                  input.isRemovebleOption && /* @__PURE__ */ jsxRuntime.jsx(
                     Button,
                     {
                       type: "button",
@@ -4696,7 +4735,7 @@ var TextInputGroup = class extends BaseInput {
 var FieldTextGroup = ({ form, input, isSubmitting }) => {
   const groupConfig = input.inputGroupConfig;
   const infoTooltip = input?.infoTooltip;
-  const autoValidate = groupConfig?.autoValidIcons;
+  const autoValidate = groupConfig?.autoValidIcons ?? input.zodType ? true : false;
   const iconValidState = /* @__PURE__ */ jsxRuntime.jsx(lucideReact.CircleCheck, { style: { color: "#00bf3e" } });
   const iconInvalidState = /* @__PURE__ */ jsxRuntime.jsx(lucideReact.CircleX, { style: { color: "#ff8080" } });
   const iconLoadingState = /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Loader2, { className: "animate-spin", style: { color: "#1e90ff" } });
@@ -4704,11 +4743,7 @@ var FieldTextGroup = ({ form, input, isSubmitting }) => {
   const iconsLeft = groupConfig?.iconsLeft ?? [];
   const textLeft = groupConfig?.textLeft;
   const textRight = groupConfig?.textRight;
-  const [isValid2, setIsValid] = React3.useState(() => {
-    const value = form.getValues(input.name);
-    const fieldState = form.getFieldState(input.name);
-    return !fieldState.error && value !== void 0 && value !== "";
-  });
+  const [isValid2, setIsValid] = React3.useState(isValidField(input, form));
   const [showPassword, setShowPassword] = React3.useState(false);
   const isPasswordField = input.keyboardType === "password" /* PASSWORD */;
   const isNumberField = input.keyboardType === "number" /* NUMBER */;
@@ -4718,9 +4753,8 @@ var FieldTextGroup = ({ form, input, isSubmitting }) => {
     {
       control: form.control,
       name: input.name,
-      render: ({ field, fieldState }) => {
-        const validNow = !fieldState.error && field.value !== void 0 && field.value !== "";
-        if (validNow !== isValid2) setIsValid(validNow);
+      render: ({ field }) => {
+        setIsValid(isValidField(input, form));
         return /* @__PURE__ */ jsxRuntime.jsxs(FormItem, { className: input.className, children: [
           /* @__PURE__ */ jsxRuntime.jsx(FormLabel, { children: /* @__PURE__ */ jsxRuntime.jsx("b", { children: input.label }) }),
           /* @__PURE__ */ jsxRuntime.jsx(FormControl, { className: "shadow-lg", children: /* @__PURE__ */ jsxRuntime.jsxs(InputGroup, { children: [
@@ -4745,6 +4779,7 @@ var FieldTextGroup = ({ form, input, isSubmitting }) => {
                   }
                   handleOnChage(value, input, field);
                   field.onChange(value);
+                  isValidField(input, form);
                 }
               }
             ),
@@ -4899,7 +4934,7 @@ var FieldRepeater = ({ form, input, isSubmitting }) => {
           fields.map((item, index) => /* @__PURE__ */ jsxRuntime.jsxs(
             "div",
             {
-              className: "border p-3 rounded-md flex flex-col gap-3",
+              className: "border p-3 rounded-md flex flex-col gap-4 py-3",
               children: [
                 input.repeaterFields?.map((fieldGroup, groupIndex) => {
                   const group = Array.isArray(fieldGroup) ? fieldGroup : [fieldGroup];
@@ -5561,7 +5596,7 @@ var FieldStringValueList = ({ form, input, isSubmitting }) => {
             items.map((value, index) => /* @__PURE__ */ jsxRuntime.jsxs(
               "div",
               {
-                className: "flex gap-2 items-center",
+                className: "flex items-center gap-4 py-2",
                 children: [
                   /* @__PURE__ */ jsxRuntime.jsx(
                     Input,
@@ -5822,10 +5857,10 @@ var FieldText = ({ input, form, isSubmitting }) => {
 var TimeInput = class extends BaseInput {
   render() {
     const { input, form, isSubmitting } = this;
-    return /* @__PURE__ */ jsxRuntime.jsx(FieldTimeInput, { input, form, isSubmitting });
+    return /* @__PURE__ */ jsxRuntime.jsx(FieldTimeInput2, { input, form, isSubmitting });
   }
 };
-var FieldTimeInput = ({ form, input, isSubmitting }) => {
+var FieldTimeInput2 = ({ form, input, isSubmitting }) => {
   const groupConfig = input.inputGroupConfig;
   const autoValidate = groupConfig?.autoValidIcons;
   const iconValidState = /* @__PURE__ */ jsxRuntime.jsx(lucideReact.CircleCheck, { style: { color: "#00bf3e" } });
@@ -5933,6 +5968,7 @@ var inputMap = {
 };
 var InputFactory = class {
   static create(input, form, isSubmitting = false) {
+    input.form = form;
     const inputType = input.inputType ?? "text" /* TEXT */;
     const InputClass = inputMap[inputType] ?? TextInput;
     const instance = new InputClass(input, form, isSubmitting);
@@ -6082,6 +6118,7 @@ var DynamicForm = ({
   fields,
   readOnly = false,
   record = {},
+  onAnyFieldChange,
   onSubmit,
   onClick,
   extraValidations,
@@ -6102,7 +6139,7 @@ var DynamicForm = ({
 }) => {
   const [isPending, startTransition] = React3.useTransition();
   const schema = React3.useMemo(() => {
-    const allFields = flattenFields(fields);
+    const allFields = flattenFields(fields, onAnyFieldChange);
     return getDynamicSchema(allFields, extraValidations);
   }, [fields, extraValidations]);
   const resolver = zod.zodResolver(schema);
@@ -6113,7 +6150,7 @@ var DynamicForm = ({
   });
   React3.useEffect(() => {
     form.reset(initialValues);
-  }, [initialValues, form]);
+  }, []);
   const handleSubmit = (data) => {
     if (readOnly) return;
     startTransition(() => {
@@ -6585,7 +6622,7 @@ exports.FieldSimpleCheckList = FieldSimpleCheckList;
 exports.FieldSlider = FieldSlider;
 exports.FieldStringValueList = FieldStringValueList;
 exports.FieldTextGroup = FieldTextGroup;
-exports.FieldTimeInput = FieldTimeInput;
+exports.FieldTimeInput = FieldTimeInput2;
 exports.FieldTitle = FieldTitle;
 exports.FileInput = FileInput;
 exports.FileMultiUploadInput = FileMultiUploadInput;
@@ -6683,6 +6720,7 @@ exports.getDynamicSchema = getDynamicSchema;
 exports.getFieldLabel = getFieldLabel;
 exports.handleOnChage = handleOnChage;
 exports.inputFieldComp = inputFieldComp;
+exports.isValidField = isValidField;
 exports.mockFields = mockFields;
 exports.useFormField = useFormField;
 exports.validationMessages = validationMessages;