shadcn-zod-formkit 1.26.1 → 1.27.0

package/dist/index.d.mts

@@ -83,7 +83,7 @@ declare enum InputTypes {
 }
 declare const inputFieldComp: InputTypes[];
 
-declare const flattenFields: <T extends Record<string, any>>(fields: FieldConfig<T>[]) => FieldProps<T>[];
+declare const flattenFields: <T extends Record<string, any>>(fields: FieldConfig<T>[], onAnyFieldChange?: (data: any) => void) => FieldProps<T>[];
 type FieldConfig<T, RT = Record<string, any>> = FieldProps<T, RT> | FieldConfig<T, RT>[];
 interface FieldProps<T = Record<string, any>, RT = Record<string, any>> {
     name: keyof T;
@@ -102,6 +102,7 @@ interface FieldProps<T = Record<string, any>, RT = Record<string, any>> {
     maxItems?: number;
     currencyFormat?: Intl.NumberFormatOptions;
     mask?: string | RegExp;
+    onAnyFieldChange?: (data: Record<string, any>) => void;
     wrapInCard?: boolean;
     placeHolder?: string;
     description?: string;
@@ -223,6 +224,7 @@ interface Props$h<T extends Record<string, any>> {
     readOnly?: boolean;
     fields: FieldConfig<T>[];
     record?: Partial<T>;
+    onAnyFieldChange?: (data: Record<string, any>) => void;
     onSubmit?: (resp: FormResp<T>) => void;
     onClick?: (resp: FormResp<T>) => void;
     extraValidations?: ((schema: ZodObject<any>) => ZodObject<any>)[];
@@ -239,7 +241,7 @@ interface Props$h<T extends Record<string, any>> {
     childrenHeader?: ReactNode;
     listBtnConfig?: BtnConfig[];
 }
-declare const DynamicForm: <T extends Record<string, any>>({ formTitle, formSubTitle, fields, readOnly, record, onSubmit, onClick, extraValidations, children, childrenHeader, showIcon, showFormHeader, withErrorsAlert, errorAlertPosition, withCard, submitBtnClass, listBtnConfig, submitBtnLabel, submitBtnLabelSubmiting, withFormWrapper, btnGroupDirection, withSubmitBtn }: Props$h<T>) => react_jsx_runtime.JSX.Element;
+declare const DynamicForm: <T extends Record<string, any>>({ formTitle, formSubTitle, fields, readOnly, record, onAnyFieldChange, onSubmit, onClick, extraValidations, children, childrenHeader, showIcon, showFormHeader, withErrorsAlert, errorAlertPosition, withCard, submitBtnClass, listBtnConfig, submitBtnLabel, submitBtnLabelSubmiting, withFormWrapper, btnGroupDirection, withSubmitBtn }: Props$h<T>) => react_jsx_runtime.JSX.Element;
 
 declare const DynamicFormExample: () => react_jsx_runtime.JSX.Element;
 declare const mockFields: Array<FieldProps | FieldProps[]>;

package/dist/index.d.ts

@@ -83,7 +83,7 @@ declare enum InputTypes {
 }
 declare const inputFieldComp: InputTypes[];
 
-declare const flattenFields: <T extends Record<string, any>>(fields: FieldConfig<T>[]) => FieldProps<T>[];
+declare const flattenFields: <T extends Record<string, any>>(fields: FieldConfig<T>[], onAnyFieldChange?: (data: any) => void) => FieldProps<T>[];
 type FieldConfig<T, RT = Record<string, any>> = FieldProps<T, RT> | FieldConfig<T, RT>[];
 interface FieldProps<T = Record<string, any>, RT = Record<string, any>> {
     name: keyof T;
@@ -102,6 +102,7 @@ interface FieldProps<T = Record<string, any>, RT = Record<string, any>> {
     maxItems?: number;
     currencyFormat?: Intl.NumberFormatOptions;
     mask?: string | RegExp;
+    onAnyFieldChange?: (data: Record<string, any>) => void;
     wrapInCard?: boolean;
     placeHolder?: string;
     description?: string;
@@ -223,6 +224,7 @@ interface Props$h<T extends Record<string, any>> {
     readOnly?: boolean;
     fields: FieldConfig<T>[];
     record?: Partial<T>;
+    onAnyFieldChange?: (data: Record<string, any>) => void;
     onSubmit?: (resp: FormResp<T>) => void;
     onClick?: (resp: FormResp<T>) => void;
     extraValidations?: ((schema: ZodObject<any>) => ZodObject<any>)[];
@@ -239,7 +241,7 @@ interface Props$h<T extends Record<string, any>> {
     childrenHeader?: ReactNode;
     listBtnConfig?: BtnConfig[];
 }
-declare const DynamicForm: <T extends Record<string, any>>({ formTitle, formSubTitle, fields, readOnly, record, onSubmit, onClick, extraValidations, children, childrenHeader, showIcon, showFormHeader, withErrorsAlert, errorAlertPosition, withCard, submitBtnClass, listBtnConfig, submitBtnLabel, submitBtnLabelSubmiting, withFormWrapper, btnGroupDirection, withSubmitBtn }: Props$h<T>) => react_jsx_runtime.JSX.Element;
+declare const DynamicForm: <T extends Record<string, any>>({ formTitle, formSubTitle, fields, readOnly, record, onAnyFieldChange, onSubmit, onClick, extraValidations, children, childrenHeader, showIcon, showFormHeader, withErrorsAlert, errorAlertPosition, withCard, submitBtnClass, listBtnConfig, submitBtnLabel, submitBtnLabelSubmiting, withFormWrapper, btnGroupDirection, withSubmitBtn }: Props$h<T>) => react_jsx_runtime.JSX.Element;
 
 declare const DynamicFormExample: () => react_jsx_runtime.JSX.Element;
 declare const mockFields: Array<FieldProps | FieldProps[]>;

package/dist/index.mjs

@@ -15,6 +15,7 @@ import * as PopoverPrimitive from '@radix-ui/react-popover';
 import 'react-color-palette/css';
 import * as DialogPrimitive from '@radix-ui/react-dialog';
 import * as LabelPrimitive from '@radix-ui/react-label';
+import { Label as Label$1 } from '@radix-ui/react-label';
 import * as SeparatorPrimitive from '@radix-ui/react-separator';
 import { OTPInput, OTPInputContext } from 'input-otp';
 import * as RadioGroupPrimitive from '@radix-ui/react-radio-group';
@@ -196,7 +197,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);
@@ -209,7 +212,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)) {
@@ -217,6 +220,7 @@ var flattenFields = (fields) => {
     } else if (field.fields) {
       result.push(...flattenFields(field.fields));
     } else {
+      if (onAnyFieldChange) field.onAnyFieldChange = (data) => onAnyFieldChange(data);
       result.push(field);
     }
   }
@@ -4523,34 +4527,40 @@ var FieldKeyValueList = ({ form, input, isSubmitting }) => {
         return /* @__PURE__ */ jsxs(FormItem, { className: input.className, children: [
           /* @__PURE__ */ jsx(FormLabel, { children: /* @__PURE__ */ jsx("b", { children: input.label }) }),
           /* @__PURE__ */ jsx(FormMessage, {}),
-          /* @__PURE__ */ jsx(FormControl, { children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-3 rounded-xl p-3 ", children: [
+          /* @__PURE__ */ jsx(FormControl, { children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-3 rounded-xl ", children: [
             pairs.length === 0 && /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: "No pairs have been added yet." }),
             pairs.map((pair, index) => /* @__PURE__ */ jsxs(
               "div",
               {
-                className: "flex gap-2 items-center",
+                className: "flex flex-row w-full gap-2 items-center py-0.5",
                 children: [
-                  /* @__PURE__ */ jsx(
-                    Input,
-                    {
-                      placeholder: "Key",
-                      value: pair.key,
-                      disabled: isSubmitting,
-                      onChange: (e) => handleChange(index, "key", e.target.value),
-                      className: "w-1/2"
-                    }
-                  ),
-                  /* @__PURE__ */ jsx(
-                    Input,
-                    {
-                      placeholder: "Value",
-                      value: pair.value,
-                      disabled: isSubmitting,
-                      onChange: (e) => handleChange(index, "value", e.target.value),
-                      className: "w-1/2"
-                    }
-                  ),
-                  /* @__PURE__ */ jsx(
+                  /* @__PURE__ */ jsxs(ButtonGroup, { className: "w-full", children: [
+                    /* @__PURE__ */ jsx(ButtonGroupText, { asChild: true, children: /* @__PURE__ */ jsx(Label$1, { htmlFor: "key", children: "Key" }) }),
+                    /* @__PURE__ */ jsx(InputGroup, { children: /* @__PURE__ */ jsx(
+                      InputGroupInput,
+                      {
+                        placeholder: "Key",
+                        value: pair.key,
+                        disabled: isSubmitting,
+                        onChange: (e) => handleChange(index, "key", e.target.value),
+                        className: "flex-1"
+                      }
+                    ) })
+                  ] }),
+                  /* @__PURE__ */ jsxs(ButtonGroup, { className: "w-full", children: [
+                    /* @__PURE__ */ jsx(ButtonGroupText, { asChild: true, children: /* @__PURE__ */ jsx(Label$1, { htmlFor: "value", children: "Value" }) }),
+                    /* @__PURE__ */ jsx(InputGroup, { children: /* @__PURE__ */ jsx(
+                      InputGroupInput,
+                      {
+                        placeholder: "Value",
+                        value: pair.value,
+                        disabled: isSubmitting,
+                        onChange: (e) => handleChange(index, "value", e.target.value),
+                        className: "flex-1"
+                      }
+                    ) })
+                  ] }),
+                  input.isRemovebleOption && /* @__PURE__ */ jsx(
                     Button,
                     {
                       type: "button",
@@ -4887,7 +4897,7 @@ var FieldRepeater = ({ form, input, isSubmitting }) => {
           fields.map((item, index) => /* @__PURE__ */ 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];
@@ -5549,7 +5559,7 @@ var FieldStringValueList = ({ form, input, isSubmitting }) => {
             items.map((value, index) => /* @__PURE__ */ jsxs(
               "div",
               {
-                className: "flex gap-2 items-center",
+                className: "flex items-center gap-4 py-2",
                 children: [
                   /* @__PURE__ */ jsx(
                     Input,
@@ -6071,6 +6081,7 @@ var DynamicForm = ({
   fields,
   readOnly = false,
   record = {},
+  onAnyFieldChange,
   onSubmit,
   onClick,
   extraValidations,
@@ -6091,7 +6102,7 @@ var DynamicForm = ({
 }) => {
   const [isPending, startTransition] = useTransition();
   const schema = useMemo(() => {
-    const allFields = flattenFields(fields);
+    const allFields = flattenFields(fields, onAnyFieldChange);
     return getDynamicSchema(allFields, extraValidations);
   }, [fields, extraValidations]);
   const resolver = zodResolver(schema);