@kingteza/crud-component 1.13.3 → 1.14.1

package/dist/common/rich/index.cjs.js

@@ -1 +1 @@
-"use strict";var k=Object.create;var f=Object.defineProperty;var F=Object.getOwnPropertyDescriptor;var g=Object.getOwnPropertyNames;var q=Object.getPrototypeOf,R=Object.prototype.hasOwnProperty;var y=(e,t,o,r)=>{if(t&&typeof t=="object"||typeof t=="function")for(let s of g(t))!R.call(e,s)&&s!==o&&f(e,s,{get:()=>t[s],enumerable:!(r=F(t,s))||r.enumerable});return e};var E=(e,t,o)=>(o=e!=null?k(q(e)):{},y(t||!e||!e.__esModule?f(o,"default",{value:e,enumerable:!0}):o,e));Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const d=require("react/jsx-runtime"),p=require("antd"),c=require("react"),S=require("../../util/ValidationUtil.cjs.js"),w=c.lazy(async()=>{const{default:e}=await import("react-quill");return{default:t=>d.jsx(e,{...t})}}),T=({name:e,label:t,required:o,rules:r=[],disabled:s,help:h})=>{const n=p.Form.useFormInstance(),[u,a]=c.useState(""),b={toolbar:[["bold","italic","underline","strike","blockquote"],[{list:"ordered"},{list:"bullet"}],["link"],["clean"]]},m=["bold","italic","underline","strike","blockquote","list","bullet","link"];c.useEffect(()=>{const i=n.getFieldValue(e);i&&i!=="<p></p>"&&i!=="<p><br></p>"&&a(i)},[n,e]);const l=p.Form.useWatch(e,n);c.useEffect(()=>{l!==u&&a(!l||l==="<p></p>"||l==="<p><br></p>"?"":l)},[l,u]);const x=i=>{a(i);const j=!i||i==="<p></p>"||i.trim()==="<p><br></p>"?void 0:i;n.setFieldValue(e,j),n.validateFields([e]).catch(()=>{})},V=c.useMemo(()=>o?[...r,...S.required(t??"")]:r,[o,r,t]);return d.jsx(p.Form.Item,{help:h,name:e,label:t,rules:V,children:d.jsx(c.Suspense,{fallback:d.jsx("div",{children:"Loading editor..."}),children:d.jsx(w,{readOnly:s,value:u,onChange:x,theme:"snow",className:"rich-text-editor",modules:b,formats:m})})})};exports.RichTextEditor=T;
+"use strict";var V=Object.create;var b=Object.defineProperty;var j=Object.getOwnPropertyDescriptor;var F=Object.getOwnPropertyNames;var q=Object.getPrototypeOf,R=Object.prototype.hasOwnProperty;var y=(e,t,o,s)=>{if(t&&typeof t=="object"||typeof t=="function")for(let r of F(t))!R.call(e,r)&&r!==o&&b(e,r,{get:()=>t[r],enumerable:!(s=j(t,r))||s.enumerable});return e};var E=(e,t,o)=>(o=e!=null?V(q(e)):{},y(t||!e||!e.__esModule?b(o,"default",{value:e,enumerable:!0}):o,e));Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const a=require("react/jsx-runtime"),p=require("antd"),c=require("react"),S=require("../../util/ValidationUtil.cjs.js"),w=c.lazy(async()=>{const{default:e}=await import("react-quill"),{Quill:t}=e,o=t.import("blots/block");return o.tagName="div",t.register(o),{default:s=>a.jsx(e,{...s})}}),Q=({name:e,label:t,required:o,rules:s=[],disabled:r,help:f})=>{const n=p.Form.useFormInstance(),[u,d]=c.useState(""),h={toolbar:[["bold","italic","underline","strike","blockquote"],[{list:"ordered"},{list:"bullet"}],["link"],["clean"]]},m=["bold","italic","underline","strike","blockquote","list","bullet","link"];c.useEffect(()=>{const i=n.getFieldValue(e);i&&i!=="<p></p>"&&i!=="<p><br></p>"&&d(i)},[n,e]);const l=p.Form.useWatch(e,n);c.useEffect(()=>{l!==u&&d(!l||l==="<p></p>"||l==="<p><br></p>"?"":l)},[l,u]);const k=i=>{d(i);const g=!i||i==="<p></p>"||i.trim()==="<p><br></p>"?void 0:i;n.setFieldValue(e,g),n.validateFields([e]).catch(()=>{})},x=c.useMemo(()=>o?[...s,...S.required(t??"")]:s,[o,s,t]);return a.jsx(p.Form.Item,{help:f,name:e,label:t,rules:x,children:a.jsx(c.Suspense,{fallback:a.jsx("div",{children:"Loading editor..."}),children:a.jsx(w,{readOnly:r,value:u,onChange:k,theme:"snow",className:"rich-text-editor",modules:h,formats:m})})})};exports.RichTextEditor=Q;

package/dist/common/rich/index.es.js

@@ -1,19 +1,19 @@
-import { jsx as r } from "react/jsx-runtime";
-import { Form as a } from "antd";
-import F, { useState as g, useEffect as u, useMemo as x, Suspense as R } from "react";
+import { jsx as c } from "react/jsx-runtime";
+import { Form as d } from "antd";
+import g, { useState as F, useEffect as u, useMemo as x, Suspense as R } from "react";
 import w from "../../util/ValidationUtil.es.js";
-const y = F.lazy(async () => {
-  const { default: e } = await import("react-quill");
-  return { default: (i) => /* @__PURE__ */ r(e, { ...i }) };
-}), Q = ({
+const y = g.lazy(async () => {
+  const { default: e } = await import("react-quill"), { Quill: o } = e, l = o.import("blots/block");
+  return l.tagName = "div", o.register(l), { default: (r) => /* @__PURE__ */ c(e, { ...r }) };
+}), I = ({
   name: e,
-  label: i,
-  required: d,
-  rules: c = [],
+  label: o,
+  required: l,
+  rules: r = [],
   disabled: p,
-  help: f
+  help: m
 }) => {
-  const l = a.useFormInstance(), [n, s] = g(""), m = {
+  const s = d.useFormInstance(), [a, n] = F(""), f = {
     toolbar: [
       ["bold", "italic", "underline", "strike", "blockquote"],
       [{ list: "ordered" }, { list: "bullet" }],
@@ -31,35 +31,35 @@ const y = F.lazy(async () => {
     "link"
   ];
   u(() => {
-    const t = l.getFieldValue(e);
-    t && t !== "<p></p>" && t !== "<p><br></p>" && s(t);
-  }, [l, e]);
-  const o = a.useWatch(e, l);
+    const t = s.getFieldValue(e);
+    t && t !== "<p></p>" && t !== "<p><br></p>" && n(t);
+  }, [s, e]);
+  const i = d.useWatch(e, s);
   u(() => {
-    o !== n && s(!o || o === "<p></p>" || o === "<p><br></p>" ? "" : o);
-  }, [o, n]);
+    i !== a && n(!i || i === "<p></p>" || i === "<p><br></p>" ? "" : i);
+  }, [i, a]);
   const b = (t) => {
-    s(t);
-    const k = !t || t === "<p></p>" || t.trim() === "<p><br></p>" ? void 0 : t;
-    l.setFieldValue(e, k), l.validateFields([e]).catch(() => {
+    n(t);
+    const V = !t || t === "<p></p>" || t.trim() === "<p><br></p>" ? void 0 : t;
+    s.setFieldValue(e, V), s.validateFields([e]).catch(() => {
     });
-  }, V = x(
-    () => d ? [...c, ...w.required(i ?? "")] : c,
-    [d, c, i]
+  }, k = x(
+    () => l ? [...r, ...w.required(o ?? "")] : r,
+    [l, r, o]
   );
-  return /* @__PURE__ */ r(a.Item, { help: f, name: e, label: i, rules: V, children: /* @__PURE__ */ r(R, { fallback: /* @__PURE__ */ r("div", { children: "Loading editor..." }), children: /* @__PURE__ */ r(
+  return /* @__PURE__ */ c(d.Item, { help: m, name: e, label: o, rules: k, children: /* @__PURE__ */ c(R, { fallback: /* @__PURE__ */ c("div", { children: "Loading editor..." }), children: /* @__PURE__ */ c(
     y,
     {
       readOnly: p,
-      value: n,
+      value: a,
       onChange: b,
       theme: "snow",
       className: "rich-text-editor",
-      modules: m,
+      modules: f,
       formats: h
     }
   ) }) });
 };
 export {
-  Q as RichTextEditor
+  I as RichTextEditor
 };

package/dist/crud/CrudComponent.d.ts

@@ -105,6 +105,7 @@ export interface SelectCrudField<T, ItemType extends SelectFieldItem = SelectFie
     };
     onChange?: (value: any, form: FormInstance<T>) => void;
     onSet?: (value: any | any[], items: SelectFieldItem[], form: FormInstance<T>) => void;
+    selectOptionRender?: (option: SelectFieldItem) => ReactNode;
 }
 export interface EnumCrudField<T> extends InitialCrudField<T>, Copyable<false> {
     type: "enum";

package/dist/crud/CrudField.cjs.js

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

package/dist/crud/CrudField.es.js

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

package/package.json

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