shadcn-zod-formkit 1.23.1 → 1.24.0

package/dist/index.cjs

@@ -232,6 +232,11 @@ 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);
+};
 
 // src/components/custom/form/inputs/base/definitions.ts
 var flattenFields = (fields) => {
@@ -1667,13 +1672,14 @@ var GroupedSwitches = ({ options, onChange, input, isSubmitting }) => {
     setAllChecked(checked);
     onChange?.(updated.filter((opt) => opt.checked));
   };
-  const handleChildToggle = (option, checked) => {
+  const handleChildToggle = (option, checked, input2) => {
     const updated = switches.map(
       (opt) => opt.id === option.id ? { ...opt, checked } : opt
     );
     setSwitches(updated);
     setAllChecked(updated.every((opt) => opt.checked));
     onChange?.(updated.filter((opt) => opt.checked));
+    handleOnChage(updated.filter((opt) => opt.checked), input2);
   };
   return /* @__PURE__ */ jsxRuntime.jsx(Card, { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn(`w-full h-full space-y-4 p-4  border-2 rounded-xl bg-green-500 ${allChecked ? "bg-green-500/5 border-green-400/10" : "bg-black/5"}`), children: [
     /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between border-b p-2", children: [
@@ -1691,7 +1697,7 @@ var GroupedSwitches = ({ options, onChange, input, isSubmitting }) => {
           disabled: input.disabled || isSubmitting,
           id: String(opt.id),
           checked: opt?.checked || false,
-          onCheckedChange: (checked) => handleChildToggle(opt, checked)
+          onCheckedChange: (checked) => handleChildToggle(opt, checked, input)
         }
       )
     ] }, opt.id))
@@ -1732,7 +1738,7 @@ var AccordionGroupedSwitches = ({ form, input, groups = [], onChange, isSubmitti
   const countCheckedByGroup = (group) => {
     return group.options.filter((opt) => opt.checked).length;
   };
-  const handleOptionChange = (field, updatedGroupLabel, updatedOptions) => {
+  const handleOptionChange = (field, updatedGroupLabel, updatedOptions, input2) => {
     const newGroups = groupsState.map(
       (group) => group.label === updatedGroupLabel ? { ...group, options: updatedOptions } : group
     );
@@ -1741,6 +1747,7 @@ var AccordionGroupedSwitches = ({ form, input, groups = [], onChange, isSubmitti
     setSelectedOptions(allChecked);
     field.onChange(allChecked);
     onChange?.(allChecked);
+    handleOnChage(allChecked, input2, field);
   };
   return /* @__PURE__ */ jsxRuntime.jsx(
     FormField,
@@ -1771,7 +1778,7 @@ var AccordionGroupedSwitches = ({ form, input, groups = [], onChange, isSubmitti
                     isSubmitting,
                     input,
                     options: group.options,
-                    onChange: (updated) => handleOptionChange(field, group.label, updated)
+                    onChange: (updated) => handleOptionChange(field, group.label, updated, input)
                   }
                 ) })
               ]
@@ -1836,7 +1843,10 @@ var FieldButtonGroup = ({ input, form, isSubmitting, className = "w-full flex-1"
       type: "button",
       className,
       variant: selectedValue === option.value ? "default" : "outline",
-      onClick: () => handleSelect(option.value),
+      onClick: () => {
+        handleSelect(option.value);
+        handleOnChage(option.value, input);
+      },
       disabled: isSubmitting,
       children: option.label ?? option.name
     },
@@ -1861,6 +1871,7 @@ var CheckListInput = class extends BaseInput {
           /* @__PURE__ */ jsxRuntime.jsx(
             Checkbox,
             {
+              onChange: (e) => handleOnChage(e, input),
               disabled: input.disabled || isSubmitting,
               id: String(item[optionValue]),
               checked: value.includes(item[optionValue]),
@@ -1912,7 +1923,7 @@ var FieldCheckbox = ({ input, form, isSubmitting }) => {
               {
                 id: input.name,
                 checked: field.value,
-                onCheckedChange: field.onChange,
+                onCheckedChange: (e) => handleOnChage(e, input, field),
                 disabled: input.disabled || isSubmitting,
                 className: "data-[state=checked]:border-blue-600 data-[state=checked]:bg-blue-600 data-[state=checked]:text-white \n                  dark:data-[state=checked]:border-blue-700 dark:data-[state=checked]:bg-blue-700"
               }
@@ -1948,23 +1959,14 @@ var FieldColor = ({ form, input, isSubmitting }) => {
           ColorCmp,
           {
             value: field.value || "#000000",
-            onChange: field.onChange,
+            onChange: (event) => {
+              handleOnChage(event, input, field);
+            },
             onBlur: field.onBlur,
             disabled: input.disabled || isSubmitting,
             placeholder: input.placeHolder
           }
-        ) : /* @__PURE__ */ jsxRuntime.jsx(
-          "input",
-          {
-            type: "color",
-            value: field.value || "#000000",
-            onChange: (e) => field.onChange(e.target.value),
-            onBlur: () => field.onBlur(),
-            disabled: input.disabled || isSubmitting,
-            placeholder: input.placeHolder,
-            style: { width: 48, height: 28 }
-          }
-        ) }),
+        ) : "N/A" }),
         /* @__PURE__ */ jsxRuntime.jsx(FormDescription, { children: input.description }),
         /* @__PURE__ */ jsxRuntime.jsx(FormMessage, {})
       ] })
@@ -2185,6 +2187,7 @@ var FieldCombobox = ({ form, input, isSubmitting }) => {
                     const newValue = currentValue === value ? "" : currentValue;
                     setValue(newValue);
                     form.setValue(input.name, newValue);
+                    handleOnChage(options.find((o) => getValue(o) === newValue), input);
                     input.listConfig?.onOptionChange?.(
                       options.find((o) => getValue(o) === newValue)
                     );
@@ -2307,6 +2310,7 @@ var FieldCurrency = ({ form, input, isSubmitting }) => {
                   setRawValue(newVal);
                   const parsed = parseValue(newVal);
                   if (parsed !== null) field.onChange(parsed);
+                  handleOnChage(parsed, input, field);
                 },
                 onBlur: (e) => {
                   const formatted = formatValue(e.target.value);
@@ -3905,7 +3909,7 @@ var DateInput = class extends BaseInput {
           }, [field.value]);
           const handleSelect = (selectedDate) => {
             setDate(selectedDate);
-            field.onChange(selectedDate);
+            handleOnChage(selectedDate, input, field);
           };
           return /* @__PURE__ */ jsxRuntime.jsxs(FormItem, { children: [
             /* @__PURE__ */ jsxRuntime.jsx(FormLabel, { children: /* @__PURE__ */ jsxRuntime.jsx("b", { children: input.label }) }),
@@ -3995,7 +3999,10 @@ var FieldDateTimeInput = ({ form, input, isSubmitting }) => {
                 type: "datetime-local",
                 value: dateTime,
                 disabled: input.disabled || isSubmitting,
-                onChange: (e) => handleChange(e.target.value)
+                onChange: (e) => {
+                  handleOnChage(e.target.value, input, field);
+                  handleChange(e.target.value);
+                }
               }
             ),
             (iconsRight.length > 0 || textRight || autoValidate) && /* @__PURE__ */ jsxRuntime.jsxs(InputGroupAddon, { align: "inline-end", children: [
@@ -4055,6 +4062,7 @@ var FieldFile = ({ form, input, isSubmitting }) => {
               onChange: (e) => {
                 field.onChange(e.target.files?.[0]);
                 handleFileChange(e);
+                handleOnChage(e.target.files?.[0], input, field);
               }
             }
           ) }),
@@ -4338,7 +4346,10 @@ var FieldMultiSelect = ({ form, input, isSubmitting }) => {
                   return /* @__PURE__ */ jsxRuntime.jsxs(
                     CommandItem,
                     {
-                      onSelect: () => toggleOption(value),
+                      onSelect: () => {
+                        handleOnChage(value, input, field);
+                        toggleOption(value);
+                      },
                       children: [
                         /* @__PURE__ */ jsxRuntime.jsx(
                           lucideReact.Check,
@@ -4421,6 +4432,7 @@ var FieldTextGroup = ({ form, input, isSubmitting }) => {
                   if (isNumberField) {
                     value = e.target.value === "" ? "" : Number(e.target.value);
                   }
+                  handleOnChage(value, input, field);
                   field.onChange(value);
                 }
               }
@@ -4478,7 +4490,7 @@ var FieldOTP = ({ form, input, isSubmitting }) => {
       name: input.name,
       render: ({ field }) => /* @__PURE__ */ jsxRuntime.jsxs(FormItem, { children: [
         /* @__PURE__ */ jsxRuntime.jsx(FormLabel, { children: /* @__PURE__ */ jsxRuntime.jsx("b", { children: input.label }) }),
-        /* @__PURE__ */ jsxRuntime.jsx(FormControl, { children: /* @__PURE__ */ jsxRuntime.jsx(InputOTP, { maxLength: totalPositions.length, ...field, children: /* @__PURE__ */ jsxRuntime.jsx(InputOTPGroup, { children: totalPositions.map((position) => /* @__PURE__ */ jsxRuntime.jsx(InputOTPSlot, { index: position }, position)) }) }) }),
+        /* @__PURE__ */ jsxRuntime.jsx(FormControl, { children: /* @__PURE__ */ jsxRuntime.jsx(InputOTP, { maxLength: totalPositions.length, ...field, onChange: (event) => handleOnChage(event, input, field), children: /* @__PURE__ */ jsxRuntime.jsx(InputOTPGroup, { children: totalPositions.map((position) => /* @__PURE__ */ jsxRuntime.jsx(InputOTPSlot, { index: position }, position)) }) }) }),
         /* @__PURE__ */ jsxRuntime.jsx(FormDescription, { children: input.description }),
         /* @__PURE__ */ jsxRuntime.jsx(FormMessage, {})
       ] })
@@ -4519,7 +4531,7 @@ var FieldRadioGroup = ({ input, form, isSubmitting }) => {
           {
             ...field,
             value: field.value ?? "",
-            onValueChange: field.onChange,
+            onValueChange: (e) => handleOnChage(e, input, field),
             className: "space-y-2 mt-3",
             children: options.map((opt, index) => /* @__PURE__ */ jsxRuntime.jsxs(
               "div",
@@ -4871,7 +4883,7 @@ var FieldSelect = ({ form, input, isSubmitting }) => {
             {
               disabled: input.disabled || isSubmitting || loading,
               onValueChange: (val) => {
-                field.onChange(val);
+                handleOnChage(val, input, field);
                 setValue(val);
                 if (input.listConfig?.onOptionChange) {
                   const selectedItem = lista.find(
@@ -4915,7 +4927,7 @@ var SimpleCheckListInput = class extends BaseInput {
             isSubmitting,
             input,
             value: field.value || [],
-            onChange: field.onChange
+            onChange: (e) => handleOnChage(e, input, field)
           }
         )
       }
@@ -4937,12 +4949,14 @@ var FieldSimpleCheckList = ({ input, value, onChange, isSubmitting }) => {
   const handleMainToggle = (checked) => {
     const updated = options.map((opt) => ({ ...opt, checked }));
     setOptions(updated);
+    handleOnChage(updated, input);
     onChange(updated);
   };
   const handleChildToggle = (option, checked) => {
     const updated = options.map(
       (opt) => opt.id === option.id ? { ...opt, checked } : opt
     );
+    handleOnChage(updated, input);
     setOptions(updated);
     onChange(updated);
   };
@@ -5207,7 +5221,7 @@ var FieldSwitch = ({ input, form, isSubmitting }) => {
           Switch,
           {
             checked: field.value,
-            onCheckedChange: field.onChange,
+            onCheckedChange: (event) => handleOnChage(event, input, field),
             "aria-disabled": true,
             disabled: input.disabled || isSubmitting
           }
@@ -5234,8 +5248,9 @@ var FieldTags = ({ input, form, isSubmitting }) => {
         /* @__PURE__ */ jsxRuntime.jsx(FormControl, { children: /* @__PURE__ */ jsxRuntime.jsx(
           TagsInput,
           {
+            input,
             value: field.value ?? [],
-            onValueChange: field.onChange,
+            onValueChange: (event) => handleOnChage(event, input, field),
             placeholder: "Enter for add tag"
           }
         ) }),
@@ -5250,6 +5265,7 @@ var SPLITTER_REGEX = /[\n#?=&\t,./-]+/;
 var FORMATTING_REGEX = /^[^a-zA-Z0-9]*|[^a-zA-Z0-9]*$/g;
 var TagsInput = React3__namespace.default.forwardRef(
   ({
+    input,
     value,
     onValueChange,
     placeholder,
@@ -5264,7 +5280,7 @@ var TagsInput = React3__namespace.default.forwardRef(
     const parseMinItems = minItems ?? 0;
     const parseMaxItems = maxItems ?? Infinity;
     const addTag = (val) => {
-      if (!value.includes(val) && value.length < parseMaxItems) {
+      if (!value.includes(val) && value.length < parseMaxItems || input.withDuplicatTag) {
         onValueChange([...value, val]);
       }
     };
@@ -5339,7 +5355,18 @@ function FieldTextArea({ form, input, isSubmitting }) {
       name: input.name,
       render: ({ field }) => /* @__PURE__ */ jsxRuntime.jsxs(FormItem, { className: "shadow-lg", children: [
         /* @__PURE__ */ jsxRuntime.jsx(FormLabel, { children: /* @__PURE__ */ jsxRuntime.jsx("b", { children: input.label }) }),
-        /* @__PURE__ */ jsxRuntime.jsx(FormControl, { children: /* @__PURE__ */ jsxRuntime.jsx(Textarea, { className: "min-w-[260px] bg-white", placeholder: input.placeHolder, ...field, disabled: input.disabled || isSubmitting }) }),
+        /* @__PURE__ */ jsxRuntime.jsx(FormControl, { children: /* @__PURE__ */ jsxRuntime.jsx(
+          Textarea,
+          {
+            className: "min-w-[260px] bg-white",
+            placeholder: input.placeHolder,
+            ...field,
+            onChange: (event) => {
+              handleOnChage(event, input, field);
+            },
+            disabled: input.disabled || isSubmitting
+          }
+        ) }),
         input.description && /* @__PURE__ */ jsxRuntime.jsx(FormDescription, { children: input.description }),
         /* @__PURE__ */ jsxRuntime.jsx(FormMessage, {})
       ] })
@@ -5370,6 +5397,7 @@ var FieldText = ({ input, form, isSubmitting }) => {
             placeholder: input.placeHolder,
             ...field,
             type,
+            onChange: (e) => handleOnChage(e, input, field),
             disabled: input.disabled || isSubmitting
           }
         ) }),
@@ -5420,6 +5448,7 @@ var FieldTimeInput = ({ form, input, isSubmitting }) => {
         if (validNow !== isValid2) setIsValid(validNow);
         const handleChange = (val) => {
           setTime(val);
+          handleOnChage(val, input, field);
           field.onChange(val);
         };
         return /* @__PURE__ */ jsxRuntime.jsxs(FormItem, { className: input.className, children: [
@@ -5655,7 +5684,7 @@ var DynamicForm = ({
   withErrorsAlert = true,
   errorAlertPosition = "up",
   withCard = false,
-  submitBtnClass = "text-lg w-1/4",
+  submitBtnClass = "",
   listBtnConfig = [],
   submitBtnLabel = "Guardar",
   submitBtnLabelSubmiting = "Guardando...",
@@ -5714,7 +5743,7 @@ var DynamicForm = ({
         Button,
         {
           type: btn.btnType,
-          size: "icon-lg",
+          size: "lg",
           className: submitBtnClass,
           variant: btn.variant,
           onClick: btn.onClick,
@@ -5727,7 +5756,7 @@ var DynamicForm = ({
         Button,
         {
           type: onClick ? "button" : "submit",
-          size: "icon-lg",
+          size: "lg",
           className: cn(submitBtnClass),
           disabled: isPending,
           onClick: onClick ? handleClick : void 0,
@@ -6060,6 +6089,7 @@ exports.flattenFields = flattenFields;
 exports.getDefaultValues = getDefaultValues;
 exports.getDynamicSchema = getDynamicSchema;
 exports.getFieldLabel = getFieldLabel;
+exports.handleOnChage = handleOnChage;
 exports.inputFieldComp = inputFieldComp;
 exports.mockFields = mockFields;
 exports.useFormField = useFormField;