shadcn-zod-formkit 1.23.2 → 1.25.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) => {
@@ -289,9 +294,11 @@ var InputTypes = /* @__PURE__ */ ((InputTypes2) => {
   InputTypes2["COMBOBOX"] = "COMBO_BOX";
   InputTypes2["SORTABLE_LIST"] = "sortable_list";
   InputTypes2["REPEATER_TABS"] = "repeater_tabs";
+  InputTypes2["STRING_LIST"] = "string_list";
   return InputTypes2;
 })(InputTypes || {});
 var inputFieldComp = [
+  "string_list" /* STRING_LIST */,
   "repeater_tabs" /* REPEATER_TABS */,
   "sortable_list" /* SORTABLE_LIST */,
   "COMBO_BOX" /* COMBOBOX */,
@@ -1667,13 +1674,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 +1699,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 +1740,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 +1749,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 +1780,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 +1845,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 +1873,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 +1925,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 +1961,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 +2189,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 +2312,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 +3911,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 +4001,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 +4064,7 @@ var FieldFile = ({ form, input, isSubmitting }) => {
               onChange: (e) => {
                 field.onChange(e.target.files?.[0]);
                 handleFileChange(e);
+                handleOnChage(e.target.files?.[0], input, field);
               }
             }
           ) }),
@@ -4212,7 +4222,7 @@ 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 shadow-lg rounded-xl p-3 bg-white", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(FormControl, { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-3 rounded-xl p-3 ", 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",
@@ -4338,7 +4348,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 +4434,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 +4492,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 +4533,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 +4885,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 +4929,7 @@ var SimpleCheckListInput = class extends BaseInput {
             isSubmitting,
             input,
             value: field.value || [],
-            onChange: field.onChange
+            onChange: (e) => handleOnChage(e, input, field)
           }
         )
       }
@@ -4937,12 +4951,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);
   };
@@ -5184,6 +5200,102 @@ function SortableWrapper({
     }
   );
 }
+var StringValueListInput = class extends BaseInput {
+  render() {
+    const { input, form, isSubmitting } = this;
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      FieldStringValueList,
+      {
+        input,
+        form,
+        isSubmitting
+      }
+    );
+  }
+};
+var FieldStringValueList = ({ form, input, isSubmitting }) => {
+  const fieldName = input.name;
+  React3.useEffect(() => {
+    const current = form.getValues(fieldName);
+    if (!Array.isArray(current)) {
+      form.setValue(fieldName, []);
+    }
+  }, [form, fieldName]);
+  const handleAddItem = () => {
+    const current = form.getValues(fieldName) || [];
+    form.setValue(fieldName, [...current, ""]);
+  };
+  const handleRemoveItem = (index) => {
+    const current = form.getValues(fieldName) || [];
+    const updated = current.filter((_, i) => i !== index);
+    form.setValue(fieldName, updated);
+  };
+  const handleChange = (index, newValue) => {
+    const current = form.getValues(fieldName) || [];
+    const updated = current.map(
+      (item, i) => i === index ? newValue : item
+    );
+    form.setValue(fieldName, updated);
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    FormField,
+    {
+      control: form.control,
+      name: fieldName,
+      render: () => {
+        const items = form.watch(fieldName) || [];
+        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 ", children: [
+            items.length === 0 && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-muted-foreground", children: "No items have been added yet." }),
+            items.map((value, index) => /* @__PURE__ */ jsxRuntime.jsxs(
+              "div",
+              {
+                className: "flex gap-2 items-center",
+                children: [
+                  /* @__PURE__ */ jsxRuntime.jsx(
+                    Input,
+                    {
+                      placeholder: `Item ${index + 1}`,
+                      value,
+                      disabled: isSubmitting,
+                      onChange: (e) => handleChange(index, e.target.value)
+                    }
+                  ),
+                  input.isRemovebleOption && /* @__PURE__ */ jsxRuntime.jsx(
+                    Button,
+                    {
+                      type: "button",
+                      variant: "destructive",
+                      size: "icon",
+                      onClick: () => handleRemoveItem(index),
+                      disabled: isSubmitting,
+                      children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Trash2, { size: 18 })
+                    }
+                  )
+                ]
+              },
+              index
+            )),
+            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex justify-end mt-2", children: /* @__PURE__ */ jsxRuntime.jsx(
+              Button,
+              {
+                type: "button",
+                variant: "outline",
+                size: "sm",
+                onClick: handleAddItem,
+                disabled: isSubmitting,
+                children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Plus, { size: 18, className: "mr-1" })
+              }
+            ) })
+          ] }) }),
+          input.description && /* @__PURE__ */ jsxRuntime.jsx(FormDescription, { children: input.description })
+        ] });
+      }
+    }
+  );
+};
 var SwitchInput = class extends BaseInput {
   render() {
     const { input, form, isSubmitting } = this;
@@ -5207,7 +5319,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 +5346,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 +5363,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 +5378,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 +5453,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 +5495,7 @@ var FieldText = ({ input, form, isSubmitting }) => {
             placeholder: input.placeHolder,
             ...field,
             type,
+            onChange: (e) => handleOnChage(e, input, field),
             disabled: input.disabled || isSubmitting
           }
         ) }),
@@ -5420,6 +5546,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: [
@@ -5480,6 +5607,7 @@ var inputMap = {
   ["COMBO_BOX" /* COMBOBOX */]: ComboboxInput,
   ["sortable_list" /* SORTABLE_LIST */]: SortableListInput,
   ["repeater_tabs" /* REPEATER_TABS */]: RepeaterTabsInput,
+  ["string_list" /* STRING_LIST */]: StringValueListInput,
   //ToDos: ============================================================
   ["slider" /* SLIDER */]: SliderInput,
   //ToDo: // PENDIENTE ... VISUALMENTE NO SE VE BIEN.!!!
@@ -6060,6 +6188,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;