shadcn-zod-formkit 1.26.1 → 1.27.0

package/dist/index.cjs

@@ -234,7 +234,9 @@ var entitiesToGroupedOption = (data, optionValue = "name") => {
 };
 var handleOnChage = (event, input, field) => {
   if (event) field?.onChange(event);
-  input.onChange?.(event, input.form?.getValues());
+  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);
@@ -247,7 +249,7 @@ var isValidField = (input, form, defaultValue) => {
 };
 
 // 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)) {
@@ -255,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);
     }
   }
@@ -4561,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",
@@ -4925,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];
@@ -5587,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,
@@ -6109,6 +6118,7 @@ var DynamicForm = ({
   fields,
   readOnly = false,
   record = {},
+  onAnyFieldChange,
   onSubmit,
   onClick,
   extraValidations,
@@ -6129,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);