@kingteza/crud-component 1.26.0 → 1.27.1

package/dist/crud/CrudComponent.cjs.js

@@ -1 +1 @@
-"use strict";const e=require("react/jsx-runtime"),q=require("antd"),n=require("react"),X=require("./modal/index.cjs.js"),Y=require("./import/CrudImportButton.cjs.js"),Z=require("./view/CrudViewer.cjs.js"),$=require("../common/button/NewButton.cjs.js"),p=require("../common/button/PrintButton.cjs.js");function U({idField:x="id",onCreate:h,onDelete:N,onHide:v,onUpdate:t,onClickUpdate:d,fields:l,data:b,grid:g,isHiding:R,isCreating:y,isDeleting:B,isUpdating:M,paginateProps:S,onPrint:k,printing:I,viewable:O,loadingData:V,formBuilder:W,extraAction:_,minusHeight:w,scroll:z,cloneable:A,fullWidthModal:D=!0,wizard:E,extraView:F,importable:m,onClickNew:r,newButtonProps:c,size:G,headerRender:i,actionWidth:H,...J}){const a=n.useRef(null),K=n.useCallback(()=>{var s;(s=a.current)==null||s.create()},[]),o=n.useCallback(async(s,C=!0,T=!1)=>{var j;await((j=a.current)==null?void 0:j.update(s,C,T))},[]),L=n.useCallback(async s=>{o(s,!1,!0)},[o]),{onClick:P,...f}=n.useMemo(()=>c||{},[c]),u=n.useMemo(()=>e.jsx($.NewButton,{onClick:(s,C)=>{r?r():c!=null&&c.onClick?c.onClick(C):K()},className:"flex-1",...f}),[r,c,f]),Q=n.useCallback(()=>i?i({newButton:u}):u,[u,i]);return e.jsxs(e.Fragment,{children:[e.jsxs(q.Space,{direction:"vertical",className:"w-100",children:[e.jsxs("div",{className:"w-100 d-flex",children:[e.jsx("div",{className:"flex-1",children:Q()}),e.jsxs(q.Space,{children:[!!k&&e.jsx(p.PrintButton,{className:"float-right",loading:I,onClick:k}),!!m&&e.jsx(Y,{fields:l,importProps:m})]})]}),e.jsx(Z,{...J,minusHeight:w,scroll:z,data:b,size:G,fields:l,extraAction:_,actionWidth:H,idField:x,isDeleting:B,loadingData:V,onClickUpdate:d||(t?o:void 0),onHide:v,isHiding:R,onDelete:N,onUpdate:t,onClickClone:A?L:void 0,paginateProps:S,viewable:O,extraView:F})]}),e.jsx(X,{ref:a,fields:l,wizard:E,grid:g,fullWidthModal:D,isCreating:y,isUpdating:M,onCreate:h,onUpdate:t,idField:x,formBuilder:W})]})}module.exports=U;
+"use strict";const e=require("react/jsx-runtime"),q=require("antd"),n=require("react"),Y=require("./modal/index.cjs.js"),Z=require("./import/CrudImportButton.cjs.js"),$=require("./view/CrudViewer.cjs.js"),p=require("../common/button/NewButton.cjs.js"),U=require("../common/button/PrintButton.cjs.js");function P({idField:x="id",onCreate:h,onDelete:N,onHide:v,onUpdate:t,onClickUpdate:d,fields:l,data:b,grid:g,isHiding:R,isCreating:y,isDeleting:B,isUpdating:M,paginateProps:S,onPrint:k,printing:I,viewable:O,loadingData:V,formBuilder:W,extraAction:_,minusHeight:w,scroll:z,cloneable:A,fullWidthModal:D=!0,wizard:E,extraView:F,importable:m,onClickNew:r,newButtonProps:c,size:G,headerRender:i,actionWidth:H,onValuesChange:J,...K}){const a=n.useRef(null),L=n.useCallback(()=>{var s;(s=a.current)==null||s.create()},[]),o=n.useCallback(async(s,C=!0,X=!1)=>{var j;await((j=a.current)==null?void 0:j.update(s,C,X))},[]),Q=n.useCallback(async s=>{o(s,!1,!0)},[o]),{onClick:ee,...f}=n.useMemo(()=>c||{},[c]),u=n.useMemo(()=>e.jsx(p.NewButton,{onClick:(s,C)=>{r?r():c!=null&&c.onClick?c.onClick(C):L()},className:"flex-1",...f}),[r,c,f]),T=n.useCallback(()=>i?i({newButton:u}):u,[u,i]);return e.jsxs(e.Fragment,{children:[e.jsxs(q.Space,{direction:"vertical",className:"w-100",children:[e.jsxs("div",{className:"w-100 d-flex",children:[e.jsx("div",{className:"flex-1",children:T()}),e.jsxs(q.Space,{children:[!!k&&e.jsx(U.PrintButton,{className:"float-right",loading:I,onClick:k}),!!m&&e.jsx(Z,{fields:l,importProps:m})]})]}),e.jsx($,{...K,minusHeight:w,scroll:z,data:b,size:G,fields:l,extraAction:_,actionWidth:H,idField:x,isDeleting:B,loadingData:V,onClickUpdate:d||(t?o:void 0),onHide:v,isHiding:R,onDelete:N,onUpdate:t,onClickClone:A?Q:void 0,paginateProps:S,viewable:O,extraView:F})]}),e.jsx(Y,{ref:a,fields:l,wizard:E,grid:g,fullWidthModal:D,isCreating:y,isUpdating:M,onCreate:h,onUpdate:t,idField:x,formBuilder:W,onValuesChange:J})]})}module.exports=P;

package/dist/crud/CrudComponent.d.ts

@@ -1,4 +1,4 @@
-import { ButtonProps, ColorPickerProps } from 'antd';
+import { ButtonProps, ColorPickerProps, FormProps } from 'antd';
 import { Rule } from 'antd/es/form';
 import { FormInstance, FormItemProps, TablePaginationConfig, TableProps } from 'antd/lib';
 import { Dayjs } from 'dayjs';
@@ -21,7 +21,7 @@ export type SelectFieldItem = {
     disabled?: boolean;
 };
 export interface InitialCrudField<T> {
-    formLayoutProps?: Pick<FormItemProps, "layout" | 'labelCol' | 'wrapperCol'>;
+    formLayoutProps?: Pick<FormItemProps, "layout" | "labelCol" | "wrapperCol">;
     label: string;
     fieldHelper?: ReactNode;
     updatingValue?: T;
@@ -281,6 +281,7 @@ export type CrudComponentProps<T, FormType = T> = {
     headerRender?: (props: {
         newButton: JSX.Element;
     }) => React.ReactElement;
+    onValuesChange?: FormProps<T>["onValuesChange"];
 } & CrudSearchComponentProps<T, FormType>;
-declare function CrudComponent<T, FormType = T>({ idField, onCreate, onDelete, onHide, onUpdate, onClickUpdate, fields, data, grid, isHiding, isCreating, isDeleting, isUpdating, paginateProps, onPrint, printing, viewable, loadingData, formBuilder, extraAction, minusHeight, scroll, cloneable, fullWidthModal, wizard, extraView, importable, onClickNew, newButtonProps, size, headerRender, actionWidth, ...props }: CrudComponentProps<T, FormType>): import("react/jsx-runtime").JSX.Element;
+declare function CrudComponent<T, FormType = T>({ idField, onCreate, onDelete, onHide, onUpdate, onClickUpdate, fields, data, grid, isHiding, isCreating, isDeleting, isUpdating, paginateProps, onPrint, printing, viewable, loadingData, formBuilder, extraAction, minusHeight, scroll, cloneable, fullWidthModal, wizard, extraView, importable, onClickNew, newButtonProps, size, headerRender, actionWidth, onValuesChange, ...props }: CrudComponentProps<T, FormType>): import("react/jsx-runtime").JSX.Element;
 export default CrudComponent;

package/dist/crud/CrudComponent.es.js

@@ -1,12 +1,12 @@
-import { jsx as r, jsxs as l, Fragment as Z } from "react/jsx-runtime";
+import { jsx as r, jsxs as l, Fragment as $ } from "react/jsx-runtime";
 import { Space as N } from "antd";
-import { useRef as $, useCallback as c, useMemo as v } from "react";
-import w from "./modal/index.es.js";
-import U from "./import/CrudImportButton.es.js";
-import P from "./view/CrudViewer.es.js";
-import { NewButton as ee } from "../common/button/NewButton.es.js";
-import { PrintButton as oe } from "../common/button/PrintButton.es.js";
-function fe({
+import { useRef as w, useCallback as c, useMemo as v } from "react";
+import U from "./modal/index.es.js";
+import P from "./import/CrudImportButton.es.js";
+import ee from "./view/CrudViewer.es.js";
+import { NewButton as oe } from "../common/button/NewButton.es.js";
+import { PrintButton as re } from "../common/button/PrintButton.es.js";
+function ue({
   idField: C = "id",
   onCreate: g,
   onDelete: j,
@@ -39,55 +39,56 @@ function fe({
   size: J,
   headerRender: n,
   actionWidth: K,
-  ...L
+  onValuesChange: L,
+  ...Q
 }) {
-  const m = $(null), Q = c(() => {
+  const m = w(null), T = c(() => {
     var o;
     (o = m.current) == null || o.create();
   }, []), s = c(
-    async (o, u = !0, Y = !1) => {
+    async (o, u = !0, Z = !1) => {
       var x;
-      await ((x = m.current) == null ? void 0 : x.update(o, u, Y));
+      await ((x = m.current) == null ? void 0 : x.update(o, u, Z));
     },
     []
-  ), T = c(
+  ), X = c(
     async (o) => {
       s(o, !1, !0);
     },
     [s]
-  ), { onClick: re, ...p } = v(() => e || {}, [e]), f = v(
+  ), { onClick: le, ...p } = v(() => e || {}, [e]), f = v(
     () => /* @__PURE__ */ r(
-      ee,
+      oe,
       {
         onClick: (o, u) => {
-          a ? a() : e != null && e.onClick ? e.onClick(u) : Q();
+          a ? a() : e != null && e.onClick ? e.onClick(u) : T();
         },
         className: "flex-1",
         ...p
       }
     ),
     [a, e, p]
-  ), X = c(() => n ? n({ newButton: f }) : f, [f, n]);
-  return /* @__PURE__ */ l(Z, { children: [
+  ), Y = c(() => n ? n({ newButton: f }) : f, [f, n]);
+  return /* @__PURE__ */ l($, { children: [
     /* @__PURE__ */ l(N, { direction: "vertical", className: "w-100", children: [
       /* @__PURE__ */ l("div", { className: "w-100 d-flex", children: [
-        /* @__PURE__ */ r("div", { className: "flex-1", children: X() }),
+        /* @__PURE__ */ r("div", { className: "flex-1", children: Y() }),
         /* @__PURE__ */ l(N, { children: [
           !!k && /* @__PURE__ */ r(
-            oe,
+            re,
             {
               className: "float-right",
               loading: _,
               onClick: k
             }
           ),
-          !!h && /* @__PURE__ */ r(U, { fields: t, importProps: h })
+          !!h && /* @__PURE__ */ r(P, { fields: t, importProps: h })
         ] })
       ] }),
       /* @__PURE__ */ r(
-        P,
+        ee,
         {
-          ...L,
+          ...Q,
           minusHeight: B,
           scroll: D,
           data: M,
@@ -103,7 +104,7 @@ function fe({
           isHiding: O,
           onDelete: j,
           onUpdate: i,
-          onClickClone: E ? T : void 0,
+          onClickClone: E ? X : void 0,
           paginateProps: W,
           viewable: b,
           extraView: H
@@ -111,7 +112,7 @@ function fe({
       )
     ] }),
     /* @__PURE__ */ r(
-      w,
+      U,
       {
         ref: m,
         fields: t,
@@ -123,11 +124,12 @@ function fe({
         onCreate: g,
         onUpdate: i,
         idField: C,
-        formBuilder: z
+        formBuilder: z,
+        onValuesChange: L
       }
     )
   ] });
 }
 export {
-  fe as default
+  ue as default
 };

package/dist/crud/CrudField.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const r=require("react/jsx-runtime"),F=require("antd"),q=require("react"),K=require("react-highlight-words"),Q=require("../locale/index.cjs.js"),V=require("./FileCrudField.cjs.js"),X=require("./ImageCrudField.cjs.js"),Y=require("../common/check-box/CheckBox.cjs.js"),Z=require("../common/date-picker/DatePicker.cjs.js"),ee=require("../common/date-picker/TimePicker.cjs.js"),_=require("../common/select/SelectComponent.cjs.js"),re=require("../common/text-field/NumberField.cjs.js"),te=require("../common/text-field/PhoneNumberField.cjs.js"),ae=require("../common/text-field/TextField.cjs.js"),le=require("../common/tooltip/TooltipComponent.cjs.js"),ne=require("./CrudTextAreaComponent.cjs.js"),U=require("../util/CrudUtil.cjs.js");function oe(N){const{label:o,name:c,type:b,required:i,hidden:P,rules:f=[],updatable:g=!0,readonly:S=!1,fieldClassName:m,customFormFieldRender:w,fieldTooltip:j,fieldHelper:p,formLayoutProps:T,...e}=N,C=F.Form.useFormInstance();q.useEffect(()=>{if(b==="select"){const{items:t=[],onSearch:s,searchOnType:n}=e;!(t!=null&&t.length)&&!n&&(s==null||s(void 0,C,e==null?void 0:e.updatingValue))}},[C,e,b,e==null?void 0:e.updatingValue]);const{t:O}=Q.useTranslationLibNoNS();if(S||P)return r.jsx(r.Fragment,{});if(w)return w(C,N);switch(b){case"text":case"email":case"password":{const{onChange:t,placeholder:s,addonAfter:n,addonBefore:d}=e;return r.jsx(ae.default,{...T,placeholder:s,disabled:!g,rules:f,required:i,onChange:t?h=>t(h,C):void 0,type:b,name:c,tooltip:j,label:o,className:m,autoComplete:"new-password",addonAfter:n,addonBefore:d,help:p})}case"phone":{const{onChange:t,placeholder:s,addonAfter:n,addonBefore:d}=e;return r.jsx(te,{...e,...T,placeholder:s,disabled:!g,rules:f,required:i,onChange:t?h=>t(h,C):void 0,type:b,name:c,tooltip:j,label:o,className:m,autoComplete:"new-password",addonAfter:n,addonBefore:d,help:p})}case"number":{const{onChange:t,placeholder:s,allowMinus:n,min:d,max:h,addonAfter:x,addonBefore:v}=e;return r.jsx(re,{...T,placeholder:s,disabled:!g,moneyField:!!e.formatted,type:b,onChange:t?y=>t(y,C):void 0,rules:f,autoComplete:"false",required:i,tooltip:j,className:m,min:n?null:d,max:h,addonAfter:x,addonBefore:v,name:c,label:o,help:p})}case"date":{const{range:t,disableToday:s,disabledFutureDays:n,disabledPastDays:d,onChange:h,placeholder:x,format:v}=e;return r.jsx(Z,{...T,placeholder:x,required:i,disabled:!g,type:b,format:v,tooltip:j,range:t,name:c,label:o,onChange:h?y=>h(y,C):void 0,className:m,disableToday:s,disabledFutureDays:n,disabledPastDays:d,help:p})}case"time":{const{range:t=!1,disableCurrent:s,disabledFuture:n,disabledPast:d,onChange:h,use12Hours:x,format:v,placeholder:y}=e;return r.jsx(ee,{...T,placeholder:y,required:i,format:v,disabled:!g,type:b,tooltip:j,range:t,use12Hours:x,name:c,label:o,onChange:h?l=>h(l,C):void 0,className:m,disableCurrent:s,disabledFuture:n,disabledPast:d,help:p})}case"textarea":return r.jsx(ne,{...N});case"image":return r.jsx(X.default,{...e,required:i,name:c,label:o,rules:f,fieldHelper:p,fieldClassName:m,onRemoved:e.onRemoved,onUploading:e.onUploading,provider:e.provider});case"file":return r.jsx(V.default,{...e,required:i,name:c,label:o,rules:f,fieldHelper:p,fieldClassName:m,onRemoved:e.onRemoved,onUploading:e.onUploading,provider:e.provider});case"select":return r.jsx(D,{...e,required:i,name:c,label:o,rules:f,fieldClassName:m,form:C,help:p,updatable:g,readonly:S,fieldTooltip:j,fieldHelper:p});case"enum":{const{enum:t,radio:s=!1,translation:n,onChange:d,onSearch:h,multiple:x,tagRender:v}=e,y=Array.isArray(t)?t:Object.keys(t);return s?r.jsx(F.Form.Item,{...e,...T,name:c,required:i,tooltip:j,rules:f,label:o,className:["w-100",m].join(" "),help:p,children:r.jsx(F.Radio.Group,{...e,onChange:d?l=>{var k;return d((k=l==null?void 0:l.target)==null?void 0:k.value,C)}:void 0,children:y.map(l=>r.jsx(F.Radio,{disabled:!g,value:l,children:n?O(n[l]):l},l))})}):r.jsx(_,{...e,...T,tagRender:typeof v=="function"?v:v?l=>{const{value:k,label:R}=l,H=v[k];return H?r.jsx(F.Tag,{color:H.color,children:R}):r.jsx(F.Tag,{children:R})}:void 0,onChange:d?l=>d(l,C):void 0,className:["w-100",m].join(" "),name:c,items:y,required:i,tooltip:j,rules:f,label:o,help:p,disabled:!g,onSearch:h?l=>h(l,C):void 0,allowClear:!0,mode:x?"multiple":void 0,itemBuilder:l=>r.jsx(F.Select.Option,{value:l,children:n?O(n[l]):l},l)})}case"checkbox":{const{onChange:t,switch:s}=e;return r.jsx(Y,{...T,className:m,rules:f,onChange:t?n=>t(n,C):void 0,label:o,tooltip:j,disabled:!g,name:c,help:p,switch:s})}case"color":return r.jsx(W,{...e,type:"color",required:i,name:c,label:o,rules:f,fieldClassName:m,updatable:g,readonly:S,fieldTooltip:j,fieldHelper:p});default:return r.jsx(r.Fragment,{children:`${b} Not Implemented`})}}function D(N){const{items:o=[],loading:c,searchOnType:b,onSearch:i,multiple:P,onChange:f,highlightSearch:g,required:S,fieldClassName:m,rules:w,fieldTooltip:j,updatable:p,label:T,name:e,tagRender:C,updatingValue:O,onSet:t,placeholder:s,allowClear:n=!0,selectOptionRender:d,formLayoutProps:h}=N,x=N.form,[v,y]=q.useState(""),l=q.useMemo(()=>U.getRealName(e),[e]),k=q.useMemo(()=>U.getRealName(e,"upsertFieldName"),[e]),R=F.Form.useWatch(l,x),[H,A]=q.useState(!0);q.useEffect(()=>{t&&H&&R&&(t==null||t(R,o,x),A(!1))},[H,x,o,l,t,R]),q.useEffect(()=>{R&&A(!0)},[R]);const G=q.useCallback(async a=>{y(a),b&&(i==null||i(a,x,O))},[x,i,b,O]),$=q.useCallback(a=>d?d(a):a.value,[d]);return r.jsx(_,{...N,...h,maxTagCount:"responsive",maxTagPlaceholder:a=>r.jsxs(le,{title:r.jsx(r.Fragment,{children:a.map(u=>r.jsxs(r.Fragment,{children:[u.label," ",r.jsx("br",{})]}))}),children:["+",a==null?void 0:a.length]}),placeholder:s,onSelect:a=>{t==null||t(a==null?void 0:a.key,o,x)},onChange:f?a=>{y(""),f(a,x)}:void 0,mode:P?"multiple":void 0,className:["w-100",m].join(" "),name:k,items:o,required:S,tooltip:j,tagRender:C,rules:w,disabled:!p,label:T,allowClear:n,onSearch:G,loading:c,filterOption:g?(a,u)=>{var L,B,E;try{const I=a.toLowerCase().split(/\s+/),z=((typeof(u==null?void 0:u.children)=="string"?u==null?void 0:u.children:(B=(L=u==null?void 0:u.children)==null?void 0:L.props)==null?void 0:B.textToHighlight)??"").toLowerCase(),J=(((E=u==null?void 0:u.value)==null?void 0:E.toString())??"").toLowerCase();return I.every(M=>z.indexOf(M)>=0||J.indexOf(M)>=0)}catch{return!0}}:void 0,itemBuilder:g?a=>{const u=a.value?String(a.value):void 0;return r.jsx(F.Select.Option,{value:a.key,title:u,disabled:a.disabled,children:r.jsx(K,{highlightClassName:"highlight-text",searchWords:(v??"").split(" "),autoEscape:!0,textToHighlight:u??""})},a.key)}:a=>r.jsx(F.Select.Option,{value:a.key,title:a.value,disabled:a.disabled,children:$(a)},a.key)})}function W(N){const{formLayoutProps:o,required:c,fieldClassName:b,rules:i,fieldTooltip:P,updatable:f,label:g,name:S,fieldHelper:m}=N;return r.jsx(F.Form.Item,{...o,label:g,name:S,required:c,rules:i,tooltip:P,help:m,getValueFromEvent:w=>typeof w=="object"?w.toHexString():w,children:r.jsx(F.ColorPicker,{disabledAlpha:!0,format:"hex",defaultFormat:"hex",showText:!0,trigger:"click",className:b,disabled:!f,...N.innerProps})})}exports.ColorCrudFieldComponent=W;exports.SelectCrudFieldComponent=D;exports.default=oe;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const t=require("react/jsx-runtime"),y=require("antd"),q=require("react"),K=require("react-highlight-words"),Q=require("../locale/index.cjs.js"),V=require("./FileCrudField.cjs.js"),X=require("./ImageCrudField.cjs.js"),Y=require("../common/check-box/CheckBox.cjs.js"),Z=require("../common/date-picker/DatePicker.cjs.js"),ee=require("../common/date-picker/TimePicker.cjs.js"),_=require("../common/select/SelectComponent.cjs.js"),te=require("../common/text-field/NumberField.cjs.js"),re=require("../common/text-field/PhoneNumberField.cjs.js"),ae=require("../common/text-field/TextField.cjs.js"),le=require("../common/tooltip/TooltipComponent.cjs.js"),ne=require("./CrudTextAreaComponent.cjs.js"),U=require("../util/CrudUtil.cjs.js");function oe(N){const{label:o,name:c,type:b,required:i,hidden:P,rules:g=[],updatable:f=!0,readonly:S=!1,fieldClassName:m,customFormFieldRender:w,fieldTooltip:j,fieldHelper:p,formLayoutProps:T,...e}=N,C=y.Form.useFormInstance();q.useEffect(()=>{if(b==="select"){const{items:r=[],onSearch:s,searchOnType:n}=e;!(r!=null&&r.length)&&!n&&(s==null||s(void 0,C,e==null?void 0:e.updatingValue))}},[C,e,b,e==null?void 0:e.updatingValue]);const{t:O}=Q.useTranslationLibNoNS();if(S||P)return t.jsx(t.Fragment,{});if(w)return w(C,N);switch(b){case"text":case"email":case"password":{const{onChange:r,placeholder:s,addonAfter:n,addonBefore:d}=e;return t.jsx(ae.default,{...T,placeholder:s,disabled:!f,rules:g,required:i,onChange:r?h=>r(h,C):void 0,type:b,name:c,tooltip:j,label:o,className:m,autoComplete:"new-password",addonAfter:n,addonBefore:d,help:p})}case"phone":{const{onChange:r,placeholder:s,addonAfter:n,addonBefore:d}=e;return t.jsx(re,{...e,...T,placeholder:s,disabled:!f,rules:g,required:i,onChange:r?h=>r(h,C):void 0,type:b,name:c,tooltip:j,label:o,className:m,autoComplete:"new-password",addonAfter:n,addonBefore:d,help:p})}case"number":{const{onChange:r,placeholder:s,allowMinus:n,min:d,max:h,addonAfter:x,addonBefore:v}=e;return t.jsx(te,{...T,placeholder:s,disabled:!f,moneyField:!!e.formatted,type:b,onChange:r?F=>r(F,C):void 0,rules:g,autoComplete:"false",required:i,tooltip:j,className:m,min:n?null:d,max:h,addonAfter:x,addonBefore:v,name:c,label:o,help:p})}case"date":{const{range:r,disableToday:s,disabledFutureDays:n,disabledPastDays:d,onChange:h,placeholder:x,format:v}=e;return t.jsx(Z,{...T,placeholder:x,required:i,disabled:!f,type:b,format:v,tooltip:j,range:r,name:c,label:o,onChange:h?F=>h(F,C):void 0,className:m,disableToday:s,disabledFutureDays:n,disabledPastDays:d,help:p})}case"time":{const{range:r=!1,disableCurrent:s,disabledFuture:n,disabledPast:d,onChange:h,use12Hours:x,format:v,placeholder:F}=e;return t.jsx(ee,{...T,placeholder:F,required:i,format:v,disabled:!f,type:b,tooltip:j,range:r,use12Hours:x,name:c,label:o,onChange:h?l=>h(l,C):void 0,className:m,disableCurrent:s,disabledFuture:n,disabledPast:d,help:p})}case"textarea":return t.jsx(ne,{...N});case"image":return t.jsx(X.default,{...e,required:i,name:c,label:o,rules:g,fieldHelper:p,fieldClassName:m,onRemoved:e.onRemoved,onUploading:e.onUploading,provider:e.provider});case"file":return t.jsx(V.default,{...e,required:i,name:c,label:o,rules:g,fieldHelper:p,fieldClassName:m,onRemoved:e.onRemoved,onUploading:e.onUploading,provider:e.provider});case"select":return t.jsx(D,{...e,required:i,name:c,label:o,rules:g,fieldClassName:m,form:C,help:p,updatable:f,readonly:S,fieldTooltip:j,fieldHelper:p});case"enum":{const{enum:r,radio:s=!1,translation:n,onChange:d,onSearch:h,multiple:x,tagRender:v}=e,F=Array.isArray(r)?r:Object.keys(r);return s?t.jsx(y.Form.Item,{...e,...T,name:c,required:i,tooltip:j,rules:g,label:o,className:["w-100",m].join(" "),help:p,children:t.jsx(y.Radio.Group,{...e,onChange:d?l=>{var k;return d((k=l==null?void 0:l.target)==null?void 0:k.value,C)}:void 0,children:F.map(l=>t.jsx(y.Radio,{disabled:!f,value:l,children:n?O(n[l]):l},l))})}):t.jsx(_,{...e,...T,tagRender:typeof v=="function"?v:v?l=>{const{value:k,label:R}=l,H=v[k];return H?t.jsx(y.Tag,{color:H.color,children:R}):t.jsx(y.Tag,{children:R})}:void 0,onChange:d?l=>d(l,C):void 0,className:["w-100",m].join(" "),name:c,items:F,required:i,tooltip:j,rules:g,label:o,help:p,disabled:!f,onSearch:h?l=>h(l,C):void 0,allowClear:!0,mode:x?"multiple":void 0,showLoadingInEmptyIndicator:!0,itemBuilder:l=>t.jsx(y.Select.Option,{value:l,children:n?O(n[l]):l},l)})}case"checkbox":{const{onChange:r,switch:s}=e;return t.jsx(Y,{...T,className:m,rules:g,onChange:r?n=>r(n,C):void 0,label:o,tooltip:j,disabled:!f,name:c,help:p,switch:s})}case"color":return t.jsx(W,{...e,type:"color",required:i,name:c,label:o,rules:g,fieldClassName:m,updatable:f,readonly:S,fieldTooltip:j,fieldHelper:p});default:return t.jsx(t.Fragment,{children:`${b} Not Implemented`})}}function D(N){const{items:o=[],loading:c,searchOnType:b,onSearch:i,multiple:P,onChange:g,highlightSearch:f,required:S,fieldClassName:m,rules:w,fieldTooltip:j,updatable:p,label:T,name:e,tagRender:C,updatingValue:O,onSet:r,placeholder:s,allowClear:n=!0,selectOptionRender:d,formLayoutProps:h}=N,x=N.form,[v,F]=q.useState(""),l=q.useMemo(()=>U.getRealName(e),[e]),k=q.useMemo(()=>U.getRealName(e,"upsertFieldName"),[e]),R=y.Form.useWatch(l,x),[H,L]=q.useState(!0);q.useEffect(()=>{r&&H&&R&&(r==null||r(R,o,x),L(!1))},[H,x,o,l,r,R]),q.useEffect(()=>{R&&L(!0)},[R]);const G=q.useCallback(async a=>{F(a),b&&(i==null||i(a,x,O))},[x,i,b,O]),$=q.useCallback(a=>d?d(a):a.value,[d]);return t.jsx(_,{...N,...h,showLoadingInEmptyIndicator:!0,maxTagCount:"responsive",maxTagPlaceholder:a=>t.jsxs(le,{title:t.jsx(t.Fragment,{children:a.map(u=>t.jsxs(t.Fragment,{children:[u.label," ",t.jsx("br",{})]}))}),children:["+",a==null?void 0:a.length]}),placeholder:s,onSelect:a=>{r==null||r(a==null?void 0:a.key,o,x)},onChange:g?a=>{F(""),g(a,x)}:void 0,mode:P?"multiple":void 0,className:["w-100",m].join(" "),name:k,items:o,required:S,tooltip:j,tagRender:C,rules:w,disabled:!p,label:T,allowClear:n,onSearch:G,loading:c,filterOption:f?(a,u)=>{var I,A,B;try{const E=a.toLowerCase().split(/\s+/),z=((typeof(u==null?void 0:u.children)=="string"?u==null?void 0:u.children:(A=(I=u==null?void 0:u.children)==null?void 0:I.props)==null?void 0:A.textToHighlight)??"").toLowerCase(),J=(((B=u==null?void 0:u.value)==null?void 0:B.toString())??"").toLowerCase();return E.every(M=>z.indexOf(M)>=0||J.indexOf(M)>=0)}catch{return!0}}:void 0,itemBuilder:f?a=>{const u=a.value?String(a.value):void 0;return t.jsx(y.Select.Option,{value:a.key,title:u,disabled:a.disabled,children:t.jsx(K,{highlightClassName:"highlight-text",searchWords:(v??"").split(" "),autoEscape:!0,textToHighlight:u??""})},a.key)}:a=>t.jsx(y.Select.Option,{value:a.key,title:a.value,disabled:a.disabled,children:$(a)},a.key)})}function W(N){const{formLayoutProps:o,required:c,fieldClassName:b,rules:i,fieldTooltip:P,updatable:g,label:f,name:S,fieldHelper:m}=N;return t.jsx(y.Form.Item,{...o,label:f,name:S,required:c,rules:i,tooltip:P,help:m,getValueFromEvent:w=>typeof w=="object"?w.toHexString():w,children:t.jsx(y.ColorPicker,{disabledAlpha:!0,format:"hex",defaultFormat:"hex",showText:!0,trigger:"click",className:b,disabled:!g,...N.innerProps})})}exports.ColorCrudFieldComponent=W;exports.SelectCrudFieldComponent=D;exports.default=oe;

package/dist/crud/CrudField.es.js

@@ -1,6 +1,6 @@
-import { jsx as o, Fragment as A, jsxs as W } from "react/jsx-runtime";
-import { Form as L, Radio as _, Select as j, Tag as G, ColorPicker as ee } from "antd";
-import { useEffect as B, useState as $, useMemo as z, useCallback as J } from "react";
+import { jsx as o, Fragment as S, jsxs as W } from "react/jsx-runtime";
+import { Form as I, Radio as _, Select as A, Tag as G, ColorPicker as ee } from "antd";
+import { useEffect as j, useState as $, useMemo as z, useCallback as J } from "react";
 import re from "react-highlight-words";
 import { useTranslationLibNoNS as te } from "../locale/index.es.js";
 import oe from "./FileCrudField.es.js";
@@ -15,7 +15,7 @@ import ce from "../common/text-field/TextField.es.js";
 import me from "../common/tooltip/TooltipComponent.es.js";
 import ue from "./CrudTextAreaComponent.es.js";
 import K from "../util/CrudUtil.es.js";
-function Ae(F) {
+function Se(F) {
   const {
     label: n,
     name: m,
@@ -26,13 +26,13 @@ function Ae(F) {
     updatable: f = !0,
     readonly: k = !1,
     fieldClassName: u,
-    customFormFieldRender: w,
+    customFormFieldRender: T,
     fieldTooltip: y,
     fieldHelper: g,
-    formLayoutProps: T,
+    formLayoutProps: w,
     ...e
-  } = F, C = L.useFormInstance();
-  B(() => {
+  } = F, C = I.useFormInstance();
+  j(() => {
     if (v === "select") {
       const {
         items: r = [],
@@ -43,9 +43,9 @@ function Ae(F) {
     }
   }, [C, e, v, e == null ? void 0 : e.updatingValue]);
   const { t: O } = te();
-  if (k || H) return /* @__PURE__ */ o(A, {});
-  if (w)
-    return w(C, F);
+  if (k || H) return /* @__PURE__ */ o(S, {});
+  if (T)
+    return T(C, F);
   switch (v) {
     case "text":
     case "email":
@@ -54,7 +54,7 @@ function Ae(F) {
       return /* @__PURE__ */ o(
         ce,
         {
-          ...T,
+          ...w,
           placeholder: i,
           disabled: !f,
           rules: p,
@@ -78,7 +78,7 @@ function Ae(F) {
         se,
         {
           ...e,
-          ...T,
+          ...w,
           placeholder: i,
           disabled: !f,
           rules: p,
@@ -109,7 +109,7 @@ function Ae(F) {
       return /* @__PURE__ */ o(
         de,
         {
-          ...T,
+          ...w,
           placeholder: i,
           disabled: !f,
           moneyField: !!e.formatted,
@@ -143,7 +143,7 @@ function Ae(F) {
       return /* @__PURE__ */ o(
         ne,
         {
-          ...T,
+          ...w,
           placeholder: b,
           required: d,
           disabled: !f,
@@ -176,7 +176,7 @@ function Ae(F) {
       return /* @__PURE__ */ o(
         ie,
         {
-          ...T,
+          ...w,
           placeholder: x,
           required: d,
           format: N,
@@ -259,10 +259,10 @@ function Ae(F) {
         tagRender: N
       } = e, x = Array.isArray(r) ? r : Object.keys(r);
       return i ? /* @__PURE__ */ o(
-        L.Item,
+        I.Item,
         {
           ...e,
-          ...T,
+          ...w,
           name: m,
           required: d,
           tooltip: y,
@@ -286,10 +286,10 @@ function Ae(F) {
         Q,
         {
           ...e,
-          ...T,
+          ...w,
           tagRender: typeof N == "function" ? N : N ? (a) => {
-            const { value: P, label: R } = a, S = N[P];
-            return S ? /* @__PURE__ */ o(G, { color: S.color, children: R }) : /* @__PURE__ */ o(G, { children: R });
+            const { value: P, label: R } = a, L = N[P];
+            return L ? /* @__PURE__ */ o(G, { color: L.color, children: R }) : /* @__PURE__ */ o(G, { children: R });
           } : void 0,
           onChange: s ? (a) => s(a, C) : void 0,
           className: ["w-100", u].join(" "),
@@ -304,7 +304,8 @@ function Ae(F) {
           onSearch: h ? (a) => h(a, C) : void 0,
           allowClear: !0,
           mode: b ? "multiple" : void 0,
-          itemBuilder: (a) => /* @__PURE__ */ o(j.Option, { value: a, children: l ? O(l[a]) : a }, a)
+          showLoadingInEmptyIndicator: !0,
+          itemBuilder: (a) => /* @__PURE__ */ o(A.Option, { value: a, children: l ? O(l[a]) : a }, a)
         }
       );
     }
@@ -313,7 +314,7 @@ function Ae(F) {
       return /* @__PURE__ */ o(
         le,
         {
-          ...T,
+          ...w,
           className: u,
           rules: p,
           onChange: r ? (l) => r(l, C) : void 0,
@@ -344,7 +345,7 @@ function Ae(F) {
         }
       );
     default:
-      return /* @__PURE__ */ o(A, { children: `${v} Not Implemented` });
+      return /* @__PURE__ */ o(S, { children: `${v} Not Implemented` });
   }
 }
 function he(F) {
@@ -358,10 +359,10 @@ function he(F) {
     highlightSearch: f,
     required: k,
     fieldClassName: u,
-    rules: w,
+    rules: T,
     fieldTooltip: y,
     updatable: g,
-    label: T,
+    label: w,
     name: e,
     tagRender: C,
     updatingValue: O,
@@ -373,11 +374,11 @@ function he(F) {
   } = F, b = F.form, [N, x] = $(""), a = z(() => K.getRealName(e), [e]), P = z(
     () => K.getRealName(e, "upsertFieldName"),
     [e]
-  ), R = L.useWatch(a, b), [S, I] = $(!0);
-  B(() => {
-    r && S && R && (r == null || r(R, n, b), I(!1));
-  }, [S, b, n, a, r, R]), B(() => {
-    R && I(!0);
+  ), R = I.useWatch(a, b), [L, B] = $(!0);
+  j(() => {
+    r && L && R && (r == null || r(R, n, b), B(!1));
+  }, [L, b, n, a, r, R]), j(() => {
+    R && B(!0);
   }, [R]);
   const V = J(
     async (t) => {
@@ -393,11 +394,12 @@ function he(F) {
     {
       ...F,
       ...h,
+      showLoadingInEmptyIndicator: !0,
       maxTagCount: "responsive",
       maxTagPlaceholder: (t) => /* @__PURE__ */ W(
         me,
         {
-          title: /* @__PURE__ */ o(A, { children: t.map((c) => /* @__PURE__ */ W(A, { children: [
+          title: /* @__PURE__ */ o(S, { children: t.map((c) => /* @__PURE__ */ W(S, { children: [
             c.label,
             " ",
             /* @__PURE__ */ o("br", {})
@@ -422,17 +424,17 @@ function he(F) {
       required: k,
       tooltip: y,
       tagRender: C,
-      rules: w,
+      rules: T,
       disabled: !g,
-      label: T,
+      label: w,
       allowClear: l,
       onSearch: V,
       loading: m,
       filterOption: f ? (t, c) => {
-        var U, q, D;
+        var E, U, q;
         try {
-          const E = t.toLowerCase().split(/\s+/), Y = ((typeof (c == null ? void 0 : c.children) == "string" ? c == null ? void 0 : c.children : (q = (U = c == null ? void 0 : c.children) == null ? void 0 : U.props) == null ? void 0 : q.textToHighlight) ?? "").toLowerCase(), Z = (((D = c == null ? void 0 : c.value) == null ? void 0 : D.toString()) ?? "").toLowerCase();
-          return E.every(
+          const D = t.toLowerCase().split(/\s+/), Y = ((typeof (c == null ? void 0 : c.children) == "string" ? c == null ? void 0 : c.children : (U = (E = c == null ? void 0 : c.children) == null ? void 0 : E.props) == null ? void 0 : U.textToHighlight) ?? "").toLowerCase(), Z = (((q = c == null ? void 0 : c.value) == null ? void 0 : q.toString()) ?? "").toLowerCase();
+          return D.every(
             (M) => Y.indexOf(M) >= 0 || Z.indexOf(M) >= 0
           );
         } catch {
@@ -442,7 +444,7 @@ function he(F) {
       itemBuilder: f ? (t) => {
         const c = t.value ? String(t.value) : void 0;
         return /* @__PURE__ */ o(
-          j.Option,
+          A.Option,
           {
             value: t.key,
             title: c,
@@ -460,7 +462,7 @@ function he(F) {
           t.key
         );
       } : (t) => /* @__PURE__ */ o(
-        j.Option,
+        A.Option,
         {
           value: t.key,
           title: t.value,
@@ -485,7 +487,7 @@ function pe(F) {
     fieldHelper: u
   } = F;
   return /* @__PURE__ */ o(
-    L.Item,
+    I.Item,
     {
       ...n,
       label: f,
@@ -494,7 +496,7 @@ function pe(F) {
       rules: d,
       tooltip: H,
       help: u,
-      getValueFromEvent: (w) => typeof w == "object" ? w.toHexString() : w,
+      getValueFromEvent: (T) => typeof T == "object" ? T.toHexString() : T,
       children: /* @__PURE__ */ o(
         ee,
         {
@@ -514,5 +516,5 @@ function pe(F) {
 export {
   pe as ColorCrudFieldComponent,
   he as SelectCrudFieldComponent,
-  Ae as default
+  Se as default
 };

package/dist/crud/CrudForm.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),s=require("react"),m=require("antd"),j=require("./CrudField.cjs.js"),b=require("../util/CrudUtil.cjs.js");function v({form:i,purpose:y="new",...o}){return e.jsx(m.Form,{form:i,layout:"vertical",children:e.jsx(x,{...o,purpose:y})})}function x({fields:i,formBuilder:y,grid:o,onDeleteFile:d,onUploadFile:u,purpose:c}){const p=s.useMemo(()=>i.filter(t=>!t.readonly&&(t.type!=="object"||typeof t.customFormFieldRender=="function")).map(t=>{const a={onUploading:t.type==="image"||t.type==="file"?r=>{var n;t.onUploading&&((n=t.onUploading)==null||n.call(t,r)),u==null||u(r)}:void 0,onDelete:t.type==="image"||t.type==="file"?r=>{var n;t.onUploading&&((n=t.onDelete)==null||n.call(t,r)),d==null||d(r)}:void 0};return e.jsx(s.Fragment,{children:t.grid&&o?e.jsx(m.Col,{...t.grid,children:s.createElement(j.default,{...t,...a,key:typeof t.name=="string"?t.name:String(t.name),updatable:c!=="update"?!0:t.updatable})}):s.createElement(j.default,{...t,...a,key:typeof t.name=="string"?t.name:String(t.name),updatable:c!=="update"?!0:t.updatable})},t.name)}),[i,o,d,u,c]),C=s.useCallback((t,a={})=>{const r=i.find(n=>b.getRealName(n.name)===t);if(r!=null&&r.hidden)return e.jsx(e.Fragment,{});if(r){const n={onUploading:r.type==="image"||r.type==="file"?g=>{var f;r.onUploading&&((f=r.onUploading)==null||f.call(r,g)),u==null||u(g)}:void 0,onDelete:r.type==="image"||r.type==="file"?g=>{var f;r.onUploading&&((f=r.onDelete)==null||f.call(r,g)),d==null||d(g)}:void 0},l=b.getRealName(r.name),h=s.createElement(j.default,{...r,...a,...n,key:typeof l=="string"?l:String(l),updatable:c!=="update"?!0:r.updatable});return a.render?a.render(h):h}return e.jsx(e.Fragment,{})},[i,c]);return e.jsx(e.Fragment,{children:y?e.jsxs(e.Fragment,{children:[y(C,{isAnyFieldHidden(...t){const a=Array.isArray(t)?t:[t];return i.filter(n=>a.includes(n.name)).some(n=>n.hidden)},isAllFieldsHidden(...t){const a=Array.isArray(t)?t:[t];return i.filter(n=>a.includes(n.name)).every(n=>n.hidden)},purpose:c}),e.jsxs(m.Form.Item,{hidden:!0,noStyle:!0,children:[e.jsx(m.Input,{name:"id"}),e.jsx(m.Input,{})]})]}):o?e.jsx(m.Row,{gutter:[8,8],children:p}):p})}exports.CrudForm=v;exports.CrudFormFields=x;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),s=require("react"),m=require("antd"),j=require("./CrudField.cjs.js"),b=require("../util/CrudUtil.cjs.js");function v({form:d,purpose:y="new",onValuesChange:o,...i}){return e.jsx(m.Form,{form:d,layout:"vertical",onValuesChange:o,children:e.jsx(x,{...i,purpose:y})})}function x({fields:d,formBuilder:y,grid:o,onDeleteFile:i,onUploadFile:u,purpose:c}){const p=s.useMemo(()=>d.filter(t=>!t.readonly&&(t.type!=="object"||typeof t.customFormFieldRender=="function")).map(t=>{const a={onUploading:t.type==="image"||t.type==="file"?r=>{var n;t.onUploading&&((n=t.onUploading)==null||n.call(t,r)),u==null||u(r)}:void 0,onDelete:t.type==="image"||t.type==="file"?r=>{var n;t.onUploading&&((n=t.onDelete)==null||n.call(t,r)),i==null||i(r)}:void 0};return e.jsx(s.Fragment,{children:t.grid&&o?e.jsx(m.Col,{...t.grid,children:s.createElement(j.default,{...t,...a,key:typeof t.name=="string"?t.name:String(t.name),updatable:c!=="update"?!0:t.updatable})}):s.createElement(j.default,{...t,...a,key:typeof t.name=="string"?t.name:String(t.name),updatable:c!=="update"?!0:t.updatable})},t.name)}),[d,o,i,u,c]),C=s.useCallback((t,a={})=>{const r=d.find(n=>b.getRealName(n.name)===t);if(r!=null&&r.hidden)return e.jsx(e.Fragment,{});if(r){const n={onUploading:r.type==="image"||r.type==="file"?g=>{var f;r.onUploading&&((f=r.onUploading)==null||f.call(r,g)),u==null||u(g)}:void 0,onDelete:r.type==="image"||r.type==="file"?g=>{var f;r.onUploading&&((f=r.onDelete)==null||f.call(r,g)),i==null||i(g)}:void 0},l=b.getRealName(r.name),h=s.createElement(j.default,{...r,...a,...n,key:typeof l=="string"?l:String(l),updatable:c!=="update"?!0:r.updatable});return a.render?a.render(h):h}return e.jsx(e.Fragment,{})},[d,c]);return e.jsx(e.Fragment,{children:y?e.jsxs(e.Fragment,{children:[y(C,{isAnyFieldHidden(...t){const a=Array.isArray(t)?t:[t];return d.filter(n=>a.includes(n.name)).some(n=>n.hidden)},isAllFieldsHidden(...t){const a=Array.isArray(t)?t:[t];return d.filter(n=>a.includes(n.name)).every(n=>n.hidden)},purpose:c}),e.jsxs(m.Form.Item,{hidden:!0,noStyle:!0,children:[e.jsx(m.Input,{name:"id"}),e.jsx(m.Input,{})]})]}):o?e.jsx(m.Row,{gutter:[8,8],children:p}):p})}exports.CrudForm=v;exports.CrudFormFields=x;

package/dist/crud/CrudForm.d.ts

@@ -1,4 +1,4 @@
-import { FormInstance } from 'antd';
+import { FormInstance, FormProps } from 'antd';
 import { CrudFieldProps, CrudPurpose, FormBuilderFunc } from './CrudComponent';
 export interface CurdFormFieldsProps<T> {
     onDeleteFile?: (e: any) => void;
@@ -7,8 +7,9 @@ export interface CurdFormFieldsProps<T> {
     formBuilder?: FormBuilderFunc<T>;
     fields: CrudFieldProps<T>[];
     purpose?: CrudPurpose;
+    onValuesChange?: FormProps<T>["onValuesChange"];
 }
-export declare function CrudForm<T>({ form, purpose, ...props }: Readonly<CurdFormFieldsProps<T> & {
+export declare function CrudForm<T>({ form, purpose, onValuesChange, ...props }: Readonly<CurdFormFieldsProps<T> & {
     form: FormInstance;
 }>): import("react/jsx-runtime").JSX.Element;
 export declare function CrudFormFields<T>({ fields, formBuilder, grid, onDeleteFile, onUploadFile, purpose, }: Readonly<CurdFormFieldsProps<T>>): import("react/jsx-runtime").JSX.Element;

package/dist/crud/CrudForm.es.js

@@ -4,22 +4,23 @@ import { Form as R, Col as w, Input as A, Row as H } from "antd";
 import l from "./CrudField.es.js";
 import C from "../util/CrudUtil.es.js";
 function z({
-  form: d,
+  form: m,
   purpose: y = "new",
-  ...o
+  onValuesChange: o,
+  ...d
 }) {
-  return /* @__PURE__ */ a(R, { form: d, layout: "vertical", children: /* @__PURE__ */ a(I, { ...o, purpose: y }) });
+  return /* @__PURE__ */ a(R, { form: m, layout: "vertical", onValuesChange: o, children: /* @__PURE__ */ a(I, { ...d, purpose: y }) });
 }
 function I({
-  fields: d,
+  fields: m,
   formBuilder: y,
   grid: o,
-  onDeleteFile: m,
+  onDeleteFile: d,
   onUploadFile: e,
   purpose: u
 }) {
   const h = j(
-    () => d.filter(
+    () => m.filter(
       (t) => !t.readonly && (t.type !== "object" || typeof t.customFormFieldRender == "function")
     ).map((t) => {
       const i = {
@@ -29,7 +30,7 @@ function I({
         } : void 0,
         onDelete: t.type === "image" || t.type === "file" ? (r) => {
           var n;
-          t.onUploading && ((n = t.onDelete) == null || n.call(t, r)), m == null || m(r);
+          t.onUploading && ((n = t.onDelete) == null || n.call(t, r)), d == null || d(r);
         } : void 0
       };
       return /* @__PURE__ */ a(S.Fragment, { children: t.grid && o ? /* @__PURE__ */ a(w, { ...t.grid, children: /* @__PURE__ */ p(
@@ -50,10 +51,10 @@ function I({
         }
       ) }, t.name);
     }),
-    [d, o, m, e, u]
+    [m, o, d, e, u]
   ), k = N(
     (t, i = {}) => {
-      const r = d.find(
+      const r = m.find(
         (n) => C.getRealName(n.name) === t
       );
       if (r != null && r.hidden) return /* @__PURE__ */ a(g, {});
@@ -65,7 +66,7 @@ function I({
           } : void 0,
           onDelete: r.type === "image" || r.type === "file" ? (c) => {
             var f;
-            r.onUploading && ((f = r.onDelete) == null || f.call(r, c)), m == null || m(c);
+            r.onUploading && ((f = r.onDelete) == null || f.call(r, c)), d == null || d(c);
           } : void 0
         }, s = C.getRealName(r.name), b = /* @__PURE__ */ p(
           l,
@@ -81,17 +82,17 @@ function I({
       }
       return /* @__PURE__ */ a(g, {});
     },
-    [d, u]
+    [m, u]
   );
   return /* @__PURE__ */ a(g, { children: y ? /* @__PURE__ */ v(g, { children: [
     y(k, {
       isAnyFieldHidden(...t) {
         const i = Array.isArray(t) ? t : [t];
-        return d.filter((n) => i.includes(n.name)).some((n) => n.hidden);
+        return m.filter((n) => i.includes(n.name)).some((n) => n.hidden);
       },
       isAllFieldsHidden(...t) {
         const i = Array.isArray(t) ? t : [t];
-        return d.filter((n) => i.includes(n.name)).every((n) => n.hidden);
+        return m.filter((n) => i.includes(n.name)).every((n) => n.hidden);
       },
       purpose: u
     }),

package/dist/crud/CrudFormWizard.cjs.js

@@ -1 +1 @@
-"use strict";const e=require("react/jsx-runtime"),j=require("@ant-design/icons"),u=require("antd"),F=require("react"),y=require("../locale/index.cjs.js"),R=require("./CrudForm.cjs.js"),S=require("../common/wizard/WizardViewForm.cjs.js"),b=require("../util/CrudUtil.cjs.js"),C=require("../common/button/Button.cjs.js");function v({fields:d,className:m,onDeleteFile:h,onUploadFile:s,purpose:l,wizard:t=[],updatingValue:f,onSave:x,submitting:g}){const c=F.useMemo(()=>t.map(r=>{let n=!0;const o=d.filter(i=>r.fields.includes(b.getRealName(i.name)));return o.forEach(i=>n&&(n=i.hidden??!1)),{...r,hidden:n,fieldThatShouldShowing:o}}),[d,t]),a=F.useMemo(()=>c.filter(r=>!r.hidden),[c]);return e.jsx(S,{onSubmit:(r,n)=>{x(n)},className:m,pages:a.map(({title:r,icon:n,fieldThatShouldShowing:o,hidden:i},q)=>({title:r,icon:n,hidden:i,component:k=>e.jsx(N,{fields:o,onDeleteFile:h,onUploadFile:s,purpose:l,i:q,updatingValue:f,backward:k.backward,forward:k.forward,wizard:a,submitting:g},q)}))})}function N({fields:d,onDeleteFile:m,onUploadFile:h,purpose:s,wizard:l=[],i:t,forward:f,backward:x,submitting:g,updatingValue:c}){const a=l[t],{t:r}=y.useTranslationLib(),[n]=u.Form.useForm();return F.useEffect(()=>{if(c&&(s==="update"||s==="clone")){const o={};for(const i of d)o[b.getRealName(i.name,"upsertFieldName")]=c[b.getRealName(i.name,"upsertFieldName")];n.setFieldsValue(o)}},[d,n,s,c]),e.jsxs(u.Form,{name:String(t),form:n,layout:"vertical",children:[e.jsx(R.CrudFormFields,{fields:d,formBuilder:a.formBuilder,grid:a.grid,onDeleteFile:m,onUploadFile:h,purpose:s}),e.jsx(u.Divider,{}),e.jsxs(u.Row,{gutter:[8,8],children:[t>0&&e.jsx(u.Col,{md:12,children:e.jsx(C,{block:!0,icon:e.jsx(j.LeftOutlined,{}),htmlType:"button",type:"default",size:"large",onClick:()=>x(),children:r("str.back")})}),e.jsx(u.Col,{md:t>0?12:24,children:e.jsx(C,{block:!0,icon:l.length-1===t?e.jsx(j.SaveOutlined,{}):e.jsx(j.RightOutlined,{}),htmlType:"submit",type:"primary",loading:g,size:"large",onClick:()=>{n.validateFields().then(o=>{f(o,l.length-1===t,l.length-1===t)})},children:l.length-1===t?r("str."+(s==="update"?"update":"save")):r("str.next")})})]})]})}module.exports=v;
+"use strict";const e=require("react/jsx-runtime"),F=require("@ant-design/icons"),c=require("antd"),b=require("react"),R=require("../locale/index.cjs.js"),S=require("./CrudForm.cjs.js"),v=require("../common/wizard/WizardViewForm.cjs.js"),q=require("../util/CrudUtil.cjs.js"),y=require("../common/button/Button.cjs.js");function N({fields:d,className:h,onDeleteFile:f,onUploadFile:s,purpose:l,wizard:t=[],updatingValue:x,onSave:g,submitting:j,onValuesChange:u}){const m=b.useMemo(()=>t.map(r=>{let n=!0;const o=d.filter(i=>r.fields.includes(q.getRealName(i.name)));return o.forEach(i=>n&&(n=i.hidden??!1)),{...r,hidden:n,fieldThatShouldShowing:o}}),[d,t]),a=b.useMemo(()=>m.filter(r=>!r.hidden),[m]);return e.jsx(v,{onSubmit:(r,n)=>{g(n)},className:h,pages:a.map(({title:r,icon:n,fieldThatShouldShowing:o,hidden:i},k)=>({title:r,icon:n,hidden:i,component:C=>e.jsx(w,{fields:o,onDeleteFile:f,onUploadFile:s,purpose:l,i:k,updatingValue:x,backward:C.backward,forward:C.forward,wizard:a,submitting:j,onValuesChange:u},k)}))})}function w({fields:d,onDeleteFile:h,onUploadFile:f,purpose:s,wizard:l=[],i:t,forward:x,backward:g,submitting:j,updatingValue:u,onValuesChange:m}){const a=l[t],{t:r}=R.useTranslationLib(),[n]=c.Form.useForm();return b.useEffect(()=>{if(u&&(s==="update"||s==="clone")){const o={};for(const i of d)o[q.getRealName(i.name,"upsertFieldName")]=u[q.getRealName(i.name,"upsertFieldName")];n.setFieldsValue(o)}},[d,n,s,u]),e.jsxs(c.Form,{name:String(t),form:n,layout:"vertical",onValuesChange:m,children:[e.jsx(S.CrudFormFields,{fields:d,formBuilder:a.formBuilder,grid:a.grid,onDeleteFile:h,onUploadFile:f,purpose:s}),e.jsx(c.Divider,{}),e.jsxs(c.Row,{gutter:[8,8],children:[t>0&&e.jsx(c.Col,{md:12,children:e.jsx(y,{block:!0,icon:e.jsx(F.LeftOutlined,{}),htmlType:"button",type:"default",size:"large",onClick:()=>g(),children:r("str.back")})}),e.jsx(c.Col,{md:t>0?12:24,children:e.jsx(y,{block:!0,icon:l.length-1===t?e.jsx(F.SaveOutlined,{}):e.jsx(F.RightOutlined,{}),htmlType:"submit",type:"primary",loading:j,size:"large",onClick:()=>{n.validateFields().then(o=>{x(o,l.length-1===t,l.length-1===t)})},children:l.length-1===t?r("str."+(s==="update"?"update":"save")):r("str.next")})})]})]})}module.exports=N;

package/dist/crud/CrudFormWizard.d.ts

@@ -1,3 +1,4 @@
+import { FormProps } from 'antd';
 import { CrudFieldProps, CrudPurpose, CrudWizardProp } from './CrudComponent';
 export interface CrudFormWizardProps<T> {
     onDeleteFile?: (e: any) => void;
@@ -9,6 +10,7 @@ export interface CrudFormWizardProps<T> {
     onSave: (e: T) => void;
     updatingValue?: T;
     submitting?: boolean;
+    onValuesChange?: FormProps<T>["onValuesChange"];
 }
-declare function CrudFormWizard<T>({ fields, className, onDeleteFile, onUploadFile, purpose, wizard, updatingValue, onSave, submitting, }: Readonly<CrudFormWizardProps<T>>): import("react/jsx-runtime").JSX.Element;
+declare function CrudFormWizard<T>({ fields, className, onDeleteFile, onUploadFile, purpose, wizard, updatingValue, onSave, submitting, onValuesChange, }: Readonly<CrudFormWizardProps<T>>): import("react/jsx-runtime").JSX.Element;
 export default CrudFormWizard;

package/dist/crud/CrudFormWizard.es.js

@@ -1,140 +1,152 @@
-import { jsx as o, jsxs as k } from "react/jsx-runtime";
-import { LeftOutlined as N, SaveOutlined as R, RightOutlined as w } from "@ant-design/icons";
-import { Form as y, Divider as x, Row as T, Col as C } from "antd";
-import { useMemo as S, useEffect as W } from "react";
-import { useTranslationLib as j } from "../locale/index.es.js";
-import { CrudFormFields as z } from "./CrudForm.es.js";
-import B from "../common/wizard/WizardViewForm.es.js";
-import p from "../util/CrudUtil.es.js";
-import v from "../common/button/Button.es.js";
-function H({
+import { jsx as o, jsxs as y } from "react/jsx-runtime";
+import { LeftOutlined as R, SaveOutlined as w, RightOutlined as x } from "@ant-design/icons";
+import { Form as C, Divider as T, Row as W, Col as S } from "antd";
+import { useMemo as v, useEffect as j } from "react";
+import { useTranslationLib as z } from "../locale/index.es.js";
+import { CrudFormFields as B } from "./CrudForm.es.js";
+import O from "../common/wizard/WizardViewForm.es.js";
+import b from "../util/CrudUtil.es.js";
+import N from "../common/button/Button.es.js";
+function I({
   fields: d,
-  className: u,
-  onDeleteFile: f,
+  className: f,
+  onDeleteFile: s,
   onUploadFile: m,
   purpose: l,
   wizard: e = [],
-  updatingValue: s,
-  onSave: h,
-  submitting: g
+  updatingValue: h,
+  onSave: g,
+  submitting: p,
+  onValuesChange: a
 }) {
-  const a = S(() => e.map((t) => {
+  const u = v(() => e.map((t) => {
     let r = !0;
     const n = d.filter(
-      (i) => t.fields.includes(p.getRealName(i.name))
+      (i) => t.fields.includes(b.getRealName(i.name))
     );
     return n.forEach((i) => r && (r = i.hidden ?? !1)), {
       ...t,
       hidden: r,
       fieldThatShouldShowing: n
     };
-  }), [d, e]), c = S(
-    () => a.filter((t) => !t.hidden),
-    [a]
+  }), [d, e]), c = v(
+    () => u.filter((t) => !t.hidden),
+    [u]
   );
   return /* @__PURE__ */ o(
-    B,
+    O,
     {
       onSubmit: (t, r) => {
-        h(r);
+        g(r);
       },
-      className: u,
+      className: f,
       pages: c.map(
-        ({ title: t, icon: r, fieldThatShouldShowing: n, hidden: i }, b) => ({
+        ({ title: t, icon: r, fieldThatShouldShowing: n, hidden: i }, F) => ({
           title: t,
           icon: r,
           hidden: i,
-          component: (F) => /* @__PURE__ */ o(
-            O,
+          component: (k) => /* @__PURE__ */ o(
+            E,
             {
               fields: n,
-              onDeleteFile: f,
+              onDeleteFile: s,
               onUploadFile: m,
               purpose: l,
-              i: b,
-              updatingValue: s,
-              backward: F.backward,
-              forward: F.forward,
+              i: F,
+              updatingValue: h,
+              backward: k.backward,
+              forward: k.forward,
               wizard: c,
-              submitting: g
+              submitting: p,
+              onValuesChange: a
             },
-            b
+            F
           )
         })
       )
     }
   );
 }
-function O({
+function E({
   fields: d,
-  onDeleteFile: u,
-  onUploadFile: f,
+  onDeleteFile: f,
+  onUploadFile: s,
   purpose: m,
   wizard: l = [],
   i: e,
-  forward: s,
-  backward: h,
-  submitting: g,
-  updatingValue: a
+  forward: h,
+  backward: g,
+  submitting: p,
+  updatingValue: a,
+  onValuesChange: u
 }) {
-  const c = l[e], { t } = j(), [r] = y.useForm();
-  return W(() => {
+  const c = l[e], { t } = z(), [r] = C.useForm();
+  return j(() => {
     if (a && (m === "update" || m === "clone")) {
       const n = {};
       for (const i of d)
-        n[p.getRealName(i.name, "upsertFieldName")] = a[p.getRealName(i.name, "upsertFieldName")];
+        n[b.getRealName(i.name, "upsertFieldName")] = a[b.getRealName(i.name, "upsertFieldName")];
       r.setFieldsValue(n);
     }
-  }, [d, r, m, a]), /* @__PURE__ */ k(y, { name: String(e), form: r, layout: "vertical", children: [
-    /* @__PURE__ */ o(
-      z,
-      {
-        fields: d,
-        formBuilder: c.formBuilder,
-        grid: c.grid,
-        onDeleteFile: u,
-        onUploadFile: f,
-        purpose: m
-      }
-    ),
-    /* @__PURE__ */ o(x, {}),
-    /* @__PURE__ */ k(T, { gutter: [8, 8], children: [
-      e > 0 && /* @__PURE__ */ o(C, { md: 12, children: /* @__PURE__ */ o(
-        v,
-        {
-          block: !0,
-          icon: /* @__PURE__ */ o(N, {}),
-          htmlType: "button",
-          type: "default",
-          size: "large",
-          onClick: () => h(),
-          children: t("str.back")
-        }
-      ) }),
-      /* @__PURE__ */ o(C, { md: e > 0 ? 12 : 24, children: /* @__PURE__ */ o(
-        v,
-        {
-          block: !0,
-          icon: l.length - 1 === e ? /* @__PURE__ */ o(R, {}) : /* @__PURE__ */ o(w, {}),
-          htmlType: "submit",
-          type: "primary",
-          loading: g,
-          size: "large",
-          onClick: () => {
-            r.validateFields().then((n) => {
-              s(
-                n,
-                l.length - 1 === e,
-                l.length - 1 === e
-              );
-            });
-          },
-          children: l.length - 1 === e ? t("str." + (m === "update" ? "update" : "save")) : t("str.next")
-        }
-      ) })
-    ] })
-  ] });
+  }, [d, r, m, a]), /* @__PURE__ */ y(
+    C,
+    {
+      name: String(e),
+      form: r,
+      layout: "vertical",
+      onValuesChange: u,
+      children: [
+        /* @__PURE__ */ o(
+          B,
+          {
+            fields: d,
+            formBuilder: c.formBuilder,
+            grid: c.grid,
+            onDeleteFile: f,
+            onUploadFile: s,
+            purpose: m
+          }
+        ),
+        /* @__PURE__ */ o(T, {}),
+        /* @__PURE__ */ y(W, { gutter: [8, 8], children: [
+          e > 0 && /* @__PURE__ */ o(S, { md: 12, children: /* @__PURE__ */ o(
+            N,
+            {
+              block: !0,
+              icon: /* @__PURE__ */ o(R, {}),
+              htmlType: "button",
+              type: "default",
+              size: "large",
+              onClick: () => g(),
+              children: t("str.back")
+            }
+          ) }),
+          /* @__PURE__ */ o(S, { md: e > 0 ? 12 : 24, children: /* @__PURE__ */ o(
+            N,
+            {
+              block: !0,
+              icon: l.length - 1 === e ? /* @__PURE__ */ o(w, {}) : /* @__PURE__ */ o(x, {}),
+              htmlType: "submit",
+              type: "primary",
+              loading: p,
+              size: "large",
+              onClick: () => {
+                r.validateFields().then((n) => {
+                  h(
+                    n,
+                    l.length - 1 === e,
+                    l.length - 1 === e
+                  );
+                });
+              },
+              children: l.length - 1 === e ? t("str." + (m === "update" ? "update" : "save")) : t("str.next")
+            }
+          ) })
+        ] })
+      ]
+    }
+  );
 }
 export {
-  H as default
+  I as default
 };

package/dist/crud/modal/index.cjs.js

@@ -1 +1 @@
-"use strict";const g=require("react/jsx-runtime"),B=require("antd"),t=require("react"),G=require("../CrudForm.cjs.js"),J=require("../CrudFormWizard.cjs.js"),K=require("../../locale/index.cjs.js"),H=require("../../util/CrudUtil.cjs.js"),Q=require("dayjs"),X=({fields:u,wizard:l,grid:I,fullWidthModal:M,isCreating:h,isUpdating:j,onCreate:b,onUpdate:v,idField:k="id",formBuilder:T},W)=>{const[s]=B.Form.useForm(),{t:C}=K.useTranslationLib(),[S,m]=t.useState(!1),[p,q]=t.useState("new"),[f,F]=t.useState(),[_,y]=t.useState(),[A,N]=t.useState(!1),[L,x]=t.useState(!1),[E,V]=t.useState(!1),P=t.useCallback(async c=>{var n;const d=l?c:await s.validateFields(),i=u.filter(a=>a.type==="color"),o={};for(const a of i){const e=H.getRealName(a.name,"upsertFieldName"),r=s.getFieldValue(e);o[e]=typeof r=="string"?r:(n=r==null?void 0:r.toHexString())==null?void 0:n.toUpperCase()}Object.assign(d,o),f&&v?(await v({...d,[k]:f[k]}),F(void 0)):!f&&b&&await b(d),y(void 0),s.resetFields(),m(!1)},[u,s,k,b,v,f,l]),R=t.useCallback(async c=>{N(c),x(!0)},[]),U=t.useCallback(async()=>{x(!0)},[]),O=t.useCallback(()=>{m(!0),q("new"),s.resetFields(),F(void 0),y(void 0)},[s]),D=t.useCallback(async(c,d=!0,i=!1)=>{try{V(!0),m(!0),q(i?"clone":"update");const o={};for(const n of u){const a=H.getRealName(n.name,"upsertFieldName"),e=c[a];if(i&&n.type==="image"){const r=e;try{const w=await n.provider.clone(r);o[a]=w;continue}catch{continue}}n.type==="date"||n.type==="time"?e&&(o[a]=Q(e)):n.type==="select"?n.multiple&&Array.isArray(e)?o[a]=e.map(r=>r[n.innerFieldId??"id"]):e&&typeof e=="object"?o[a]=e[n.innerFieldId??"id"]:(e&&typeof e=="string"||typeof e=="number")&&(o[a]=e):o[a]=e}s.setFieldsValue(o),y(o),d&&F(c)}finally{V(!1)}},[u,s]);t.useImperativeHandle(W,()=>({create:O,update:D}),[O,D]),t.useEffect(()=>{S&&(N(!1),x(!1))},[S]);const $=t.useCallback(async()=>{try{if(p==="clone"){const c=l?f:s.getFieldsValue(),d=u.filter(i=>i.type==="image");for(const i of d)c[i.name]&&i.provider.delete(c[i.name])}}finally{}l||s.resetFields(),y(void 0),F(void 0),m(!1)},[p,l,s,f,u]);return g.jsx(B.Modal,{width:M?"100%":void 0,title:C(p??"new"),open:S,confirmLoading:h||j,okText:C("str."+(p==="update"?"update":"save")),cancelText:C("str.cancel"),cancelButtonProps:{disabled:L,hidden:!!l},okButtonProps:{disabled:A,hidden:!!l},onCancel:$,onOk:()=>P(),destroyOnHidden:!0,children:g.jsxs(B.Spin,{spinning:E,children:[l?null:g.jsx(G.CrudForm,{purpose:p,fields:u,form:s,formBuilder:T,grid:I,onDeleteFile:U,onUploadFile:R}),l&&g.jsx(J,{submitting:h||j,className:"mt-2",onSave:P,updatingValue:_,fields:u,onDeleteFile:U,onUploadFile:R,purpose:p,wizard:l})]})})},Y=t.forwardRef(X);module.exports=Y;
+"use strict";const g=require("react/jsx-runtime"),B=require("antd"),t=require("react"),J=require("../CrudForm.cjs.js"),K=require("../CrudFormWizard.cjs.js"),Q=require("../../locale/index.cjs.js"),I=require("../../util/CrudUtil.cjs.js"),X=require("dayjs"),Y=({fields:u,wizard:l,grid:M,fullWidthModal:T,isCreating:h,isUpdating:j,onCreate:b,onUpdate:v,idField:k="id",formBuilder:W,onValuesChange:q},_)=>{const[s]=B.Form.useForm(),{t:S}=Q.useTranslationLib(),[C,m]=t.useState(!1),[p,N]=t.useState("new"),[f,F]=t.useState(),[A,y]=t.useState(),[L,V]=t.useState(!1),[E,x]=t.useState(!1),[$,P]=t.useState(!1),R=t.useCallback(async c=>{var n;const d=l?c:await s.validateFields(),i=u.filter(a=>a.type==="color"),o={};for(const a of i){const e=I.getRealName(a.name,"upsertFieldName"),r=s.getFieldValue(e);o[e]=typeof r=="string"?r:(n=r==null?void 0:r.toHexString())==null?void 0:n.toUpperCase()}Object.assign(d,o),f&&v?(await v({...d,[k]:f[k]}),F(void 0)):!f&&b&&await b(d),y(void 0),s.resetFields(),m(!1)},[u,s,k,b,v,f,l]),U=t.useCallback(async c=>{V(c),x(!0)},[]),O=t.useCallback(async()=>{x(!0)},[]),D=t.useCallback(()=>{m(!0),N("new"),s.resetFields(),F(void 0),y(void 0)},[s]),H=t.useCallback(async(c,d=!0,i=!1)=>{try{P(!0),m(!0),N(i?"clone":"update");const o={};for(const n of u){const a=I.getRealName(n.name,"upsertFieldName"),e=c[a];if(i&&n.type==="image"){const r=e;try{const G=await n.provider.clone(r);o[a]=G;continue}catch{continue}}n.type==="date"||n.type==="time"?e&&(o[a]=X(e)):n.type==="select"?n.multiple&&Array.isArray(e)?o[a]=e.map(r=>r[n.innerFieldId??"id"]):e&&typeof e=="object"?o[a]=e[n.innerFieldId??"id"]:(e&&typeof e=="string"||typeof e=="number")&&(o[a]=e):o[a]=e}s.setFieldsValue(o),y(o),d&&F(c)}finally{P(!1)}},[u,s]);t.useImperativeHandle(_,()=>({create:D,update:H}),[D,H]),t.useEffect(()=>{C&&(V(!1),x(!1))},[C]);const w=t.useCallback(async()=>{try{if(p==="clone"){const c=l?f:s.getFieldsValue(),d=u.filter(i=>i.type==="image");for(const i of d)c[i.name]&&i.provider.delete(c[i.name])}}finally{}l||s.resetFields(),y(void 0),F(void 0),m(!1)},[p,l,s,f,u]);return g.jsx(B.Modal,{width:T?"100%":void 0,title:S(p??"new"),open:C,confirmLoading:h||j,okText:S("str."+(p==="update"?"update":"save")),cancelText:S("str.cancel"),cancelButtonProps:{disabled:E,hidden:!!l},okButtonProps:{disabled:L,hidden:!!l},onCancel:w,onOk:()=>R(),destroyOnHidden:!0,children:g.jsxs(B.Spin,{spinning:$,children:[l?null:g.jsx(J.CrudForm,{purpose:p,fields:u,form:s,formBuilder:W,grid:M,onDeleteFile:O,onUploadFile:U,onValuesChange:q}),l&&g.jsx(K,{submitting:h||j,className:"mt-2",onSave:R,updatingValue:A,fields:u,onDeleteFile:O,onUploadFile:U,purpose:p,wizard:l,onValuesChange:q})]})})},Z=t.forwardRef(Y);module.exports=Z;

package/dist/crud/modal/index.d.ts

@@ -1,3 +1,4 @@
+import { FormProps } from 'antd';
 import { Ref } from 'react';
 import { CrudFieldProps, CrudWizardProp, FormBuilderFunc } from '../CrudComponent';
 import { default as IdProps } from '../../types/Id';
@@ -12,12 +13,13 @@ export interface CrudModalProps<T, FormType> {
     onUpdate?: (data: FormType & IdProps) => Promise<any>;
     idField?: string;
     formBuilder?: FormBuilderFunc<T>;
+    onValuesChange?: FormProps<T>["onValuesChange"];
 }
 export interface CrudModalRef<T> {
     create: () => void;
     update: (data: T, shouldSetUpdatingField?: boolean, isClone?: boolean) => Promise<void>;
 }
-declare const CrudModal: <T, FormType = T>({ fields, wizard, grid, fullWidthModal, isCreating, isUpdating, onCreate, onUpdate, idField, formBuilder, }: CrudModalProps<T, FormType>, ref: Ref<CrudModalRef<T>>) => import("react/jsx-runtime").JSX.Element;
+declare const CrudModal: <T, FormType = T>({ fields, wizard, grid, fullWidthModal, isCreating, isUpdating, onCreate, onUpdate, idField, formBuilder, onValuesChange, }: CrudModalProps<T, FormType>, ref: Ref<CrudModalRef<T>>) => import("react/jsx-runtime").JSX.Element;
 declare const _default: <T, FormType = T>(props: CrudModalProps<T, FormType> & {
     ref?: Ref<CrudModalRef<T>>;
 }) => ReturnType<typeof CrudModal>;

package/dist/crud/modal/index.es.js

@@ -1,29 +1,30 @@
-import { jsx as N, jsxs as G } from "react/jsx-runtime";
-import { Form as J, Modal as K, Spin as Q } from "antd";
-import { forwardRef as X, useState as u, useCallback as m, useImperativeHandle as Y, useEffect as Z } from "react";
-import { CrudForm as z } from "../CrudForm.es.js";
-import ee from "../CrudFormWizard.es.js";
-import { useTranslationLib as te } from "../../locale/index.es.js";
-import M from "../../util/CrudUtil.es.js";
-import oe from "dayjs";
-const ne = ({
+import { jsx as S, jsxs as J } from "react/jsx-runtime";
+import { Form as K, Modal as Q, Spin as X } from "antd";
+import { forwardRef as Y, useState as u, useCallback as m, useImperativeHandle as Z, useEffect as z } from "react";
+import { CrudForm as ee } from "../CrudForm.es.js";
+import te from "../CrudFormWizard.es.js";
+import { useTranslationLib as oe } from "../../locale/index.es.js";
+import R from "../../util/CrudUtil.es.js";
+import ne from "dayjs";
+const se = ({
   fields: c,
   wizard: l,
-  grid: R,
-  fullWidthModal: T,
-  isCreating: S,
-  isUpdating: V,
+  grid: T,
+  fullWidthModal: W,
+  isCreating: x,
+  isUpdating: C,
   onCreate: v,
   onUpdate: b,
   idField: B = "id",
-  formBuilder: W
-}, _) => {
-  const [t] = J.useForm(), { t: h } = te(), [k, F] = u(!1), [p, x] = u("new"), [f, y] = u(), [A, g] = u(), [L, j] = u(!1), [E, C] = u(!1), [$, P] = u(!1), U = m(
+  formBuilder: _,
+  onValuesChange: V
+}, A) => {
+  const [t] = K.useForm(), { t: h } = oe(), [k, F] = u(!1), [p, j] = u("new"), [f, y] = u(), [L, g] = u(), [E, P] = u(!1), [$, N] = u(!1), [q, U] = u(!1), O = m(
     async (i) => {
       var o;
       const d = l ? i : await t.validateFields(), a = c.filter((s) => s.type === "color"), n = {};
       for (const s of a) {
-        const e = M.getRealName(s.name, "upsertFieldName"), r = t.getFieldValue(e);
+        const e = R.getRealName(s.name, "upsertFieldName"), r = t.getFieldValue(e);
         n[e] = typeof r == "string" ? r : (o = r == null ? void 0 : r.toHexString()) == null ? void 0 : o.toUpperCase();
       }
       Object.assign(d, n), f && b ? (await b({
@@ -32,54 +33,54 @@ const ne = ({
       }), y(void 0)) : !f && v && await v(d), g(void 0), t.resetFields(), F(!1);
     },
     [c, t, B, v, b, f, l]
-  ), O = m(async (i) => {
-    j(i), C(!0);
-  }, []), D = m(async () => {
-    C(!0);
-  }, []), H = m(() => {
-    F(!0), x("new"), t.resetFields(), y(void 0), g(void 0);
-  }, [t]), I = m(
+  ), D = m(async (i) => {
+    P(i), N(!0);
+  }, []), H = m(async () => {
+    N(!0);
+  }, []), I = m(() => {
+    F(!0), j("new"), t.resetFields(), y(void 0), g(void 0);
+  }, [t]), M = m(
     async (i, d = !0, a = !1) => {
       try {
-        P(!0), F(!0), x(a ? "clone" : "update");
+        U(!0), F(!0), j(a ? "clone" : "update");
         const n = {};
         for (const o of c) {
-          const s = M.getRealName(
+          const s = R.getRealName(
             o.name,
             "upsertFieldName"
           ), e = i[s];
           if (a && o.type === "image") {
             const r = e;
             try {
-              const w = await o.provider.clone(r);
-              n[s] = w;
+              const G = await o.provider.clone(r);
+              n[s] = G;
               continue;
             } catch {
               continue;
             }
           }
-          o.type === "date" || o.type === "time" ? e && (n[s] = oe(e)) : o.type === "select" ? o.multiple && Array.isArray(e) ? n[s] = e.map(
+          o.type === "date" || o.type === "time" ? e && (n[s] = ne(e)) : o.type === "select" ? o.multiple && Array.isArray(e) ? n[s] = e.map(
             (r) => r[o.innerFieldId ?? "id"]
           ) : e && typeof e == "object" ? n[s] = e[o.innerFieldId ?? "id"] : (e && typeof e == "string" || typeof e == "number") && (n[s] = e) : n[s] = e;
         }
         t.setFieldsValue(n), g(n), d && y(i);
       } finally {
-        P(!1);
+        U(!1);
       }
     },
     [c, t]
   );
-  Y(
-    _,
+  Z(
+    A,
     () => ({
-      create: H,
-      update: I
+      create: I,
+      update: M
     }),
-    [H, I]
-  ), Z(() => {
-    k && (j(!1), C(!1));
+    [I, M]
+  ), z(() => {
+    k && (P(!1), N(!1));
   }, [k]);
-  const q = m(async () => {
+  const w = m(async () => {
     try {
       if (p === "clone") {
         const i = l ? f : t.getFieldsValue(), d = c.filter((a) => a.type === "image");
@@ -90,57 +91,59 @@ const ne = ({
     }
     l || t.resetFields(), g(void 0), y(void 0), F(!1);
   }, [p, l, t, f, c]);
-  return /* @__PURE__ */ N(
-    K,
+  return /* @__PURE__ */ S(
+    Q,
     {
-      width: T ? "100%" : void 0,
+      width: W ? "100%" : void 0,
       title: h(p ?? "new"),
       open: k,
-      confirmLoading: S || V,
+      confirmLoading: x || C,
       okText: h("str." + (p === "update" ? "update" : "save")),
       cancelText: h("str.cancel"),
       cancelButtonProps: {
-        disabled: E,
+        disabled: $,
         hidden: !!l
       },
       okButtonProps: {
-        disabled: L,
+        disabled: E,
         hidden: !!l
       },
-      onCancel: q,
-      onOk: () => U(),
+      onCancel: w,
+      onOk: () => O(),
       destroyOnHidden: !0,
-      children: /* @__PURE__ */ G(Q, { spinning: $, children: [
-        l ? null : /* @__PURE__ */ N(
-          z,
+      children: /* @__PURE__ */ J(X, { spinning: q, children: [
+        l ? null : /* @__PURE__ */ S(
+          ee,
           {
             purpose: p,
             fields: c,
             form: t,
-            formBuilder: W,
-            grid: R,
-            onDeleteFile: D,
-            onUploadFile: O
+            formBuilder: _,
+            grid: T,
+            onDeleteFile: H,
+            onUploadFile: D,
+            onValuesChange: V
           }
         ),
-        l && /* @__PURE__ */ N(
-          ee,
+        l && /* @__PURE__ */ S(
+          te,
           {
-            submitting: S || V,
+            submitting: x || C,
             className: "mt-2",
-            onSave: U,
-            updatingValue: A,
+            onSave: O,
+            updatingValue: L,
             fields: c,
-            onDeleteFile: D,
-            onUploadFile: O,
+            onDeleteFile: H,
+            onUploadFile: D,
             purpose: p,
-            wizard: l
+            wizard: l,
+            onValuesChange: V
           }
         )
       ] })
     }
   );
-}, pe = X(ne);
+}, fe = Y(se);
 export {
-  pe as default
+  fe as default
 };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@kingteza/crud-component",
   "private": false,
-  "version": "1.26.0",
+  "version": "1.27.1",
   "description": "React CRUD component library with Ant Design",
   "keywords": [
     "react",