@ioca/react 1.0.3 → 1.0.4

package/lib/index.js

@@ -1,2 +1,3537 @@
-import{jsxs as e,jsx as t,Fragment as n}from"react/jsx-runtime";import i from"classnames";import{debounce as a,uid as r,throttle as s,pick as l,title as o}from"radash";import{forwardRef as c,createElement as d,useEffect as u,useCallback as p,isValidElement as m,cloneElement as h,useState as g,useMemo as f,Children as v,useRef as b,useLayoutEffect as y,Fragment as N,createContext as k,useContext as C,useImperativeHandle as w}from"react";import{SkipPreviousRound as x,CloseRound as $,MinusRound as T,PlusRound as I,InboxTwotone as P,VisibilityRound as z,VisibilityOffRound as O,SyncAltRound as M,KeyboardArrowLeftRound as D,KeyboardArrowRightRound as S,CalendarMonthTwotone as j,PauseRound as E,PlayArrowRound as B,StopRound as Y,FullscreenExitRound as A,FullscreenRound as L,VolumeOffRound as V,VolumeDownRound as W,FeedOutlined as q,AspectRatioRound as F,OpenInNewRound as H,FileDownloadOutlined as R,RotateRightRound as X,RotateLeftRound as U,HideImageTwotone as G,MoreHorizRound as K,InfoOutlined as Z,SearchRound as _,CheckRound as J,UnfoldMoreRound as Q,KeyboardArrowDownRound as ee,ListAltRound as te,CloudUploadTwotone as ne,PlusSharp as ie}from"@ricons/material";import{useReactive as ae,useMemoizedFn as re,useClickAway as se,useCreation as le,useSize as oe}from"ahooks";import{createRoot as ce}from"react-dom/client";import de from"react-custom-scrollbars-2";import ue from"dayjs";import pe from"dayjs/plugin/customParseFormat";import{createPortal as me}from"react-dom";import he from"rc-virtual-list";import ge from"pubsub-js";const fe=500;function ve(e){const t=e.target,n=t.closest("[data-ripple]");t&&n&&function(e,t){const[n,i]=function(){const e=document.createElement("SPAN"),t=document.createElement("SPAN");return e.className="i-ripple-container",t.className="i-ripple",e.append(t),[e,t]}(),a=e.getBoundingClientRect(),r=2*Math.max(a.width,a.height);i.style.cssText=`\n        left: ${t.pageX-a.left}px;\n        top: ${t.pageY-a.top}px;\n        width: ${r}px;\n        height: ${r}px;\n        transition: all 0.5s;\n    `,e.insertAdjacentElement("afterbegin",n),e.offsetHeight,i.classList.add("i-ripple-active"),setTimeout((()=>{n.remove()}),fe)}(n,e)}const be=n=>{const{icon:a,text:r,size:s,style:l,className:o,...c}=n;return e("div",{className:i("i-loading-container",o),style:{fontSize:s,...l},...c,children:[a??t("svg",{width:"24",height:"24",stroke:"#000",viewBox:"0 0 24 24",xmlns:"http://www.w3.org/2000/svg",className:"i-loading-icon",children:t("circle",{cx:"12",cy:"12",r:"9.5",fill:"none",strokeWidth:"3",strokeLinecap:"round",strokeDasharray:40,strokeDashoffset:0})}),r]})},ye=({outline:e,flat:t,loading:n,disabled:a,size:r="normal",block:s,round:l,square:o,secondary:c,className:d})=>i("i-btn",d,{"i-btn-outline":e,"i-btn-flat":t,"i-btn-block":s,"i-btn-loading":n,"i-btn-square":o,"i-btn-secondary":c,[`i-btn-${r}`]:"normal"!==r,round:l,disabled:a}),Ne=c(((e,i)=>{const{as:a="a",children:r,className:s,loading:l,flat:o,outline:c,square:p,secondary:m,size:h,round:g,href:f,ripple:v=!0,onClick:b,...y}=e;if(!r)return t(n,{});const N=[l&&t(be,{},"loading"),d("span",{key:"content",className:"i-btn-content"},r)],k={className:ye(e),"data-ripple":v,onClick:e=>{l||y.disabled?e.stopPropagation():b?.(e)}};return u((()=>{v&&(document.documentElement.dataset.useripple||(document.documentElement.dataset.useripple="enable",document.addEventListener("mousedown",ve)))}),[v]),d(a,"string"==typeof a?{ref:i,href:f,...k,...y}:{to:f||"",...k,...y},N)}));Ne.Toggle=function(e){const{active:n,activeClass:a,after:r,disabled:s,children:l,className:o,onClick:c,onToggle:d,...m}=e,h=ae({active:n,done:!0}),g=p((()=>{const e=void 0!==r,t=!h.active;Object.assign(h,{active:t,done:!e}),d?.(t),e&&setTimeout((()=>{h.done=!0}),16)}),[r]);return u((()=>{h.active!==n&&g()}),[n]),t(Ne,{className:i(o,{[a||""]:h.active},"i-btn-toggle"),...m,onClick:e=>{c?.(e),!s&&g()},children:t("div",{className:i("i-btn-toggle-content",{"i-btn-toggle-active":h.done}),children:h.active?r??l:l})})},Ne.Group=function(e){const{children:n,vertical:a,className:r,style:s}=e;return t("div",{className:i(r,a?"i-btn-group-vertical":"i-btn-group-horizonal"),style:s,children:n})};const ke=c(((e,t)=>{const{icon:n,size:a="1.425em",rotate:r,style:s,className:l,...o}=e;if(!m(n))return n;const c={ref:t,style:{transform:r?`rotate(${r}deg)`:void 0,...s,width:a,height:a},className:i("i-icon",l),...o};return h(n,c)}));function Ce(e){const{style:n,className:a,onClick:r}=e;return t(Ne,{square:!0,className:i("i-affix-totop",a),style:{...n},onClick:r,children:t(ke,{icon:t(x,{}),rotate:90})})}const we=e=>{const{position:n="fixed",left:r,top:s,right:l,bottom:o,offset:c,style:d,className:p,children:m,getContainer:b=()=>document.body}=e,[y,N]=g(!1),k=f((()=>v.map(m,(e=>{if(e.type===Ce){const{onClick:t}=e.props;return h(e,{key:e.key,...e.props,onClick:e=>{const n=b();t?.(e),n?.scrollTo({top:0,left:0,behavior:"smooth"})}})}return e}))),[m,b]);return u((()=>{const e=b();if(!c||!e)return;const t=a({delay:160},(()=>{const t=e.scrollTop;N(t<c)}));return e.addEventListener("scroll",t),()=>{e.removeEventListener("scroll",t)}}),[c,b]),t("div",{className:i("i-affix",p,{"i-affix-hidden":y}),style:{...d,position:n,left:r,top:s,right:l,bottom:o},children:k})};we.ToTop=Ce;const xe=n=>{const{content:a,contentClass:r,dot:s,dotSize:l,round:o,disabled:c,style:d,className:u,children:p}=n;return e("div",{style:d,className:i("i-badge",{rounded:o},u),children:[p,t("div",{className:i("i-badge-content",r,{"i-badge-dot":s,"i-badge-hidden":c}),style:{fontSize:l},children:a})]})},$e=e=>n=>t("div",{style:n.style,className:i("i-card-"+e,n.className),children:n.children}),Te=$e("header"),Ie=$e("footer"),Pe=$e("banner"),ze=$e("tail"),Oe=n=>{const{shadow:a=!0,border:r,style:s,className:l,children:o}=n,c=f((()=>{const e={};return v.map(o,(t=>{switch(t.type){case Te:e.header=t;break;case Ie:e.footer=t;break;case Pe:e.banner=t;break;case ze:e.tailer=t;break;default:e.content=[...e.content||[],t]}})),e}),[o]),{header:d,banner:u,content:p,footer:m,tailer:h}=c;return e("div",{style:s,className:i("i-card",l,{shadow:a,"i-card-bordered":r}),children:[u,d,p&&t("div",{className:"i-card-content",children:p}),m,h]})};var Me;function De(e,t,n={}){const{refWindow:i,gap:a=0,offset:r=0,position:s="top",align:l}=n;if(!e||!t)return[0,0,{arrowX:0,arrowY:0,arrowPos:"bottom"}];const o=e.getBoundingClientRect(),c=t.getBoundingClientRect();let d=window.innerWidth,u=window.innerHeight,{left:p,top:m,right:h,bottom:g,width:f,height:v}=o;const{height:b,width:y}=c;if(!i){const t=e.offsetParent?.getBoundingClientRect();d=t?.width||d,u=t?.height||u,p=e.offsetLeft,m=e.offsetTop,h=p+o.width,g=m+o.height}let N=0,k=0,C=0,w=0,x="bottom";switch(s){case"left":case"right":N=v!==b?je({containerSize:u,targetSize:v,targetOffset:m,contentSize:b,gap:a,align:l}):m,w=N<m?m-N+v/2:v/2;const e=p-r-y,t=h+r+y;"left"===s?(k=e<0?h+r:e,C=e<0?0:y,x=e<0?"left":"right"):(k=d>t?h+r:e,C=d>t?0:y,x=d>t?"left":"right");break;case"top":case"bottom":k=f!==y?je({containerSize:d,targetOffset:p,targetSize:f,contentSize:y,gap:a,align:l}):p,C=k>p?y/2:p-k+f/2;const n=m-r-b,i=g+r+b;"top"===s?(N=n<0?g+r:n,w=n<0?0:b,x=n<0?"top":"bottom"):(N=u>i?g+r:n,w=u>i?0:b,x=u>i?"top":"bottom")}return[k,N,{arrowX:C,arrowY:w,arrowPos:x}]}function Se(e,t){const{pageX:n,pageY:i}=e,{width:a,height:r}=t.getBoundingClientRect(),{innerHeight:s,innerWidth:l}=window;return[n+a>=l&&n-a>0?n-a:n,i+r>=s&&i-r>0?i-r:i]}function je({containerSize:e,targetSize:t,targetOffset:n,contentSize:i,gap:a,align:r="center"}){const s=n+t/2;switch(r){case"start":return n+i>e?n+t:n;case"center":return t>=i?s-i/2:s+i/2+a>e?n+t-i:s-i/2-a<0?a:s-i/2;case"end":const r=n+t-i;return r>0?r:a;default:return s-i/2}}function Ee(e){return e.map((e=>["string","number"].includes(typeof e)?{label:e,value:e}:e))}function Be(e,t={}){const{precision:n,thousand:i}=t,a=e.toFixed(n);if(!i)return a;const r=a.split("."),s=r[0].replace(/\d{1,3}(?=(\d{3})+(\.\d*)?$)/g,`$&${i}`);return 1===r.length?s:`${s}.${r[1]}`}function Ye(e,t=document.body){const n=document.createElement("div");t.append(n);const i=ce(n),a=setTimeout((()=>{i?.render(e)}),0);return()=>{n?.remove(),i?.unmount(),a&&clearTimeout(a)}}function Ae(e){return e.match(/\.([^\./\?]+)($|\?)/)?.[1]}function Le(e,t){switch(!0){case["jpg","jpeg","png","webp","svg"].includes(e)||t?.startsWith("image/"):return Me.IMAGE;case["mp4","avi"].includes(e)||t?.startsWith("video/"):return Me.VIDEO;default:return Me.UNKNOWN}}function Ve(e,t=2){if(!+e)return"0 Bytes";const n=t<0?0:t,i=Math.floor(Math.log(e)/Math.log(1024));return`${parseFloat((e/Math.pow(1024,i)).toFixed(n))} ${["B","KB","MB","GB","TB","PB","EB","ZB","YB"][i]}`}function We(e,t,n){return e<t?t:e>n?n:e}function qe(n){const{type:a="default",label:r,name:s,value:l=!1,className:o,status:c="normal",message:d,disabled:p,partof:m,children:h,onChange:g,...f}=n,v=ae({value:l,status:c,message:d}),b=re((e=>{const t=e.target.checked;Object.assign(v,{value:t,status:c,message:d}),g?.(t,e)}));return u((()=>{v.value=l}),[l]),e("label",{className:i("i-checkbox-item",{[`i-checkbox-${v.status}`]:"normal"!==v.status,disabled:p},o),...f,children:[t("input",{type:"checkbox",name:s,className:i("i-checkbox-input",{[`i-checkbox-${a}`]:!m,"i-checkbox-partof":m}),checked:v.value,disabled:p,onChange:b}),t("span",{className:"i-checkbox-text",children:h||r}),v.message&&e("span",{className:"i-checkbox-message",children:["*",v.message]})]})}function Fe(n){const{label:a,name:r,options:s=[],value:l="",type:o="default",optionInline:c=!0,labelInline:d,disabled:p,status:m="normal",message:h,required:g,className:v,onChange:b,...y}=n,N=ae({value:l}),k=f((()=>Ee(s)),[s]),C=re(((e,t,n)=>{const i=[...N.value],a=i.findIndex((e=>e===t.value));e&&a<0?i.push(t.value):!e&&a>-1&&i.splice(a,1),N.value=i,b?.(i,t,n)}));return u((()=>{N.value=l}),[l]),e("div",{className:i("i-checkbox i-input-label",{[`i-checkbox-${m}`]:"normal"!==m,"i-input-inline":d},v),...y,children:[a&&e("span",{className:"i-input-label-text",children:[g&&t("span",{className:"error",children:"*"}),a,h&&t("p",{className:"i-checkbox-message",children:h})]}),t("div",{className:i("i-checkbox-options",{"i-options-block":!c,"i-checkbox-options-button":"button"===o}),children:k.map((e=>t(qe,{name:r,value:N.value.includes(e.value),type:o,disabled:p||e.disabled,onChange:(t,n)=>C(t,e,n),children:e.label},e.value)))})]})}Oe.Header=Te,Oe.Footer=Ie,Oe.Banner=Pe,Oe.Tailer=ze,function(e){e.IMAGE="IMAGE",e.VIDEO="VIDEO",e.AUDIO="AUDIO",e.PDF="PDF",e.EXCEL="EXCEL",e.TXT="TXT",e.UNKNOWN="UNKNOWN"}(Me||(Me={})),Fe.Item=qe;const He=e=>{const{as:a="a",active:s,className:l,icon:o=t($,{}),...c}=e;return s?d(a,{className:i("i-helpericon",l),...c},[d(ke,{key:r(3),icon:o})]):t(n,{})};const Re=n=>{const{active:a,items:r,multiple:s,border:l,headerClickable:o,className:c,children:d,renderToggle:u=e=>t(e?T:I,{}),onCollapse:p,...m}=n,h=ae({active:a}),g=f((()=>r||(d&&v.map(d,((e,t)=>{const{key:n,props:i}=e,{title:a,children:r,content:s,disabled:l,...o}=i;return{...o,key:n||t,title:a,content:r||s,disabled:l}}))||[])),[d]),b=e=>{const{key:t,disabled:n}=e;if(n)return;if(!s)return h.active=h.active===t?void 0:t,void p?.(t,void 0!==h.active);Array.isArray(h.active)||(h.active=[]);const i=h.active.findIndex((e=>e===t));i>-1?h.active.splice(i,1):void 0!==t&&h.active.push(t),p?.(t,i<0)};return t("div",{className:i("i-collapse",{"i-collapse-bordered":l},c),...m,children:g.map((n=>{const{key:a,title:r,content:l,disabled:c,className:d,...p}=n,m=s?(h.active||[]).includes(a):h.active===a;return e("div",{className:i("i-collapse-item",d,{"i-collapse-active":m,"i-collapse-disabled":c}),...p,children:[e("div",{className:"i-collapse-header",onClick:()=>(e=>{o&&b(e)})(n),children:[r,t(He,{active:!0,className:"i-collapse-toggle",icon:u(m),onClick:()=>b(n)})]}),t("div",{className:"i-collapse-content",children:l})]},a)}))})};function Xe(e){const{className:n,...a}=e;return t(P,{className:i("i-empty",n),...a})}function Ue({justify:e,col:t,row:n,colSpan:i=1,rowSpan:a=1}){return{"--datagrid-justify":e,gridArea:`${n+1} / ${t+1} / ${n+1+a} / ${t+1+i}`,insetInline:`var(--datagrid-cell-inset-${t})`}}function Ge(e){const{column:n,row:a,col:r,data:s,onCellClick:l,onCellDoubleClick:o}=e,{id:c,fixed:d,justify:u,rowSpan:p,render:m}=n,h=Ue({justify:u,fixed:d,col:r,row:a,rowSpan:p});return t("div",{className:i("i-datagrid-cell",{[`i-datagrid-cell-fixed-${d}`]:d}),"data-col":c,style:h,onClick:e=>l?.(s,n,a,r,e),onDoubleClick:e=>o?.(s,n,a,r,e),children:m?.(s[c],s,r)??t("div",{className:"i-datagrid-cell-content",children:s[c]})})}Re.Item=function(e){return t(n,{})};const Ke=new Set,Ze=new Set;function _e(e){u((()=>(Ke.add(e),()=>{Ke.delete(e)})),[e])}function Je(e){u((()=>(Ze.add(e),()=>{Ze.delete(e)})),[e])}function Qe(e){const t=new WeakMap,n=new IntersectionObserver((e=>{e.map((e=>{const n=t.get(e.target);n?.(e.target,e.isIntersecting)}))}),e);return{observe:function(e,i){t.get(e)||(t.set(e,i),e&&n.observe(e))},unobserve:function(e){e&&n.unobserve(e),t.delete(e)},disconnect:function(){n.disconnect()}}}function et(e){const{index:n,onWidthChange:i}=e,a=ae({resizing:!1,x:0,width:0}),r=re((e=>{const t=e.target.offsetParent.offsetWidth;Object.assign(a,{x:e.pageX,resizing:!0,width:t})}));return _e(re((e=>{if(!a.resizing)return;e.preventDefault();const t=a.width+e.pageX-a.x;t<=24||i(n,t)}))),Je((()=>{a.resizing&&(a.resizing=!1)})),t("i",{className:"i-datagrid-resizor",onMouseDown:r,onClick:e=>e.stopPropagation()})}document.addEventListener("mousemove",(e=>{for(const t of Ke.values())t(e)})),document.addEventListener("mouseup",(e=>{for(const t of Ze.values())t(e)}));const tt=e=>t("svg",{xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 24 24",...e,children:t("g",{fill:"none",children:t("path",{d:"M9 17.898c0 1.074 1.265 1.648 2.073.941l6.31-5.522a1.75 1.75 0 0 0 0-2.634l-6.31-5.522C10.265 4.454 9 5.028 9 6.102v11.796z",fill:"currentColor"})})});function nt(n){const{type:a}=n;return e("a",{className:i("i-datagrid-sorter",{[`i-datagrid-sorter-${a}`]:a}),children:[t(tt,{className:"i-datagrid-sorter-caret"}),t(tt,{className:"i-datagrid-sorter-caret"})]})}function it(e){const{row:n,data:i,columns:a,onRowClick:r,onCellClick:s,onCellDoubleClick:l}=e;return t("div",{className:"i-datagrid-row",onClick:()=>r?.(i,n),children:a.map(((e,a)=>t(Ge,{column:e,col:a,row:n,data:i,onCellClick:s,onCellDoubleClick:l},a)))})}function at(n){const{columns:a,resizable:r,sortBy:s,sortType:l,onWidthChange:o,onHeaderClick:c}=n;return t("div",{className:"i-datagrid-header i-datagrid-row",children:a.map(((n,a)=>{const{id:d,title:u,fixed:p,colSpan:m,sorter:h,justify:g,renderHeader:f}=n,v=Ue({justify:g,row:0,col:a,colSpan:m}),b=s===d?l:"";return e("div",{"data-col":d,className:i("i-datagrid-cell",{"i-datagrid-has-sorter":h,"i-datagrid-cell-fixed":p}),style:{...v,insetBlockStart:0},onClick:e=>c?.(n,e),children:[f?.(n,a)??t("div",{className:"i-datagrid-cell-content",children:u||d}),h&&t(nt,{type:b}),r&&t(et,{index:a,onWidthChange:o})]},a)}))})}const rt=n=>{const{data:a=[],columns:r=[],border:s,striped:l,header:o=!0,resizable:c,cellPadding:d=".5em",empty:m=t(Xe,{}),loading:h,height:g="unset",style:v,className:y,renderLoading:N=()=>t(be,{size:"1.5em",className:"color-3"}),onCellClick:k,onRowClick:C,onHeaderClick:w,onSort:x,onScroll:$,onResize:T}=n,I=b(null),P=b(null),z=ae({rows:a,widths:r.map((e=>e.width??"auto")),sortBy:"",sortType:""}),O=f((()=>{const{widths:e}=z,t={...v,"--grid-template-columns":e.map((e=>"number"==typeof e?`${e}px`:e)).join(" ")};if(!c)return t;const n=r.map(((t,n)=>{const{fixed:i}=t;return i?e[n]:0}));return r.map(((e,i)=>{const{fixed:a}=e;if(a)if(0===i)t["--datagrid-cell-inset-0"]=0;else if(i===n.length-1)t["--datagrid-cell-inset-"+(n.length-1)]="auto 0";else{const e="left"===a,r=(e?n.slice(0,i):n.slice(i+1)).reduce(((e,t)=>e+t))+"px",s=e?`${r} auto`:`auto ${r}`;t[`--datagrid-cell-inset-${i}`]=s}})),t}),[z.widths,c]),M=p(((e,t)=>{if(!c)return;const[...n]=z.widths;n[e]=t,z.widths=n,T?.(r[e],t)}),[c]),D=p(((e,t)=>{if(e?.sorter){const[t,n]=function(e,t,n){const i=["desc","asc"];if(e===n){const e=i.findIndex((e=>e===t))+1,a=i[e]||"";return[""===a?"":n,a]}return[n,"desc"]}(z.sortBy,z.sortType,e.id);Object.assign(z,{sortBy:t,sortType:n}),x?.(t,n)}w?.(e,t)}),[]),S=f((()=>{const{sortBy:e,sortType:t}=z;if(e&&!x){const n=r.find((t=>t.id===e))?.sorter,i="function"==typeof n?n:(t,n)=>n[e]-t[e],s=[...a].sort(i);return"desc"===t?s:s.reverse()}return a}),[a,r,z.sortBy,z.sortType]);u((()=>{if(!I.current)return;const{current:e}=I,t=e.querySelector(".i-datagrid-row")?.children;t?.length&&(z.widths=Array.from(t).map((e=>e.offsetWidth)))}),[r,c]),u((()=>{h&&P.current?.scrollTop(0)}),[h]);const j={"--padding":d,...O};return e(de,{ref:P,autoHide:!0,autoHeight:!0,autoHeightMax:g,style:j,className:i("i-datagrid-container",y,{"i-datagrid-bordered":s,"i-datagrid-striped":l}),renderView:e=>t("div",{...e,className:i({"i-datagrid-loading":h})}),onScroll:$,children:[e("div",{ref:I,className:"i-datagrid",children:[o&&t(at,{columns:r,resizable:c,sortType:z.sortType,sortBy:z.sortBy,onWidthChange:M,onHeaderClick:D}),S.map(((e,n)=>t(it,{row:n+(o?1:0),data:e,columns:r,onCellClick:k,onRowClick:C},n))),S.length<1&&m]}),h&&N()]})};function st(n){const{label:a,className:r,labelInline:s,style:l,children:o,status:c,tip:d,required:u}=n;return e("label",{className:i("i-input-label",r,{"i-input-inline":s}),style:l,children:[a&&e("span",{className:"i-input-label-text",children:[u&&t("span",{className:"error",children:"*"}),a]}),o,d&&t("span",{className:i("i-input-message",{[`i-input-${c}`]:"normal"!==c}),children:d})]})}const lt=c(((n,a)=>{const{type:r="text",label:s,name:l,value:o=n.initValue??"",initValue:c="",prepend:d,append:m,labelInline:h,className:g,status:v="normal",message:b,tip:y,clear:N,hideVisible:k,border:C,required:w,onChange:x,onEnter:$,style:T,...I}=n,P=ae({value:o,type:r,visible:!1}),M=p((e=>{const t=e.target.value;P.value=t,x?.(t,e)}),[]),D=re((e=>{"Enter"===e.code&&$?.()})),S=f((()=>{if("password"===r)return P.visible?t(z,{}):t(O,{})}),[P.visible]);u((()=>{P.value=o}),[o]);const j={ref:a,type:P.type,name:l,value:P.value,className:i("i-input",`i-input-${r}`),onChange:M,onKeyDown:D,...I},E=N&&P.value,B="password"===r&&!!P.value;return t(st,{label:s,labelInline:h,className:g,style:T,tip:b??y,status:v,required:w,children:e("div",{className:i("i-input-item",{[`i-input-${v}`]:"normal"!==v,"i-input-borderless":!C}),children:[d&&t("div",{className:"i-input-prepend",children:d}),t("input",{...j}),t(He,{active:!!E||B,icon:S,onClick:()=>{if("password"===r&&!k)return void Object.assign(P,{visible:!P.visible,type:P.visible?"password":"text"});x?.("")}}),m&&t("div",{className:"i-input-append",children:m})]})})})),ot=c(((n,a)=>{const{label:r,name:s,value:l=n.initValue??"",initValue:o,labelInline:c,step:d=1,min:m=-1/0,max:h=1/0,thousand:g,precision:f,type:v,className:b,status:y="normal",append:N,border:k,prepend:C,message:w,tip:x,hideControl:$,style:P,onChange:z,onEnter:O,onInput:M,onBlur:D,...S}=n,j=ae({value:l}),E=p((e=>We(e,m,h)),[m,h]),B=p((e=>Be(e,{precision:f,thousand:g})),[f,g]),Y=p((e=>e?"number"!=typeof e&&g?e.replaceAll(g,""):e:""),[g]),A=re((e=>{const{value:t}=e.target,n=Y(t.replace(/[^\d\.-]/g,""));j.value=n,z?.(+n,e)})),L=re((e=>{const t=Y(j.value)??0,n=E(+t+e);j.value=B(n),z?.(n)}));u((()=>{j.value=l}),[l]);const V={ref:a,name:s,value:j.value,className:"i-input i-input-number",onChange:A,...S};return t(st,{label:r,labelInline:c,className:b,style:P,tip:w??x,status:y,children:e("div",{className:i("i-input-item",{[`i-input-${y}`]:"normal"!==y,"i-input-borderless":!k}),children:[C&&t("div",{className:"i-input-prepend",children:C}),!$&&t(He,{active:!0,icon:t(T,{}),onClick:()=>L(-d)}),t("input",{...V}),!$&&t(He,{active:!0,icon:t(I,{}),onClick:()=>L(d)}),N&&t("div",{className:"i-input-append",children:N})]})})})),ct=c(((e,n)=>{const{label:a,name:r,value:s=e.initValue??"",initValue:l,labelInline:o,className:c,status:d="normal",message:m,tip:h,autoSize:g,border:f,style:v,onChange:y,onEnter:N,...k}=e,C=ae({value:s}),w=b(null),x=p((e=>{const t=e.target.value;C.value=t;const n=w.current?.firstChild;g&&n&&(n.style.height=`${n.scrollHeight}px`),y?.(t,e)}),[]),$=re((e=>{"Enter"===e.code&&N?.()}));u((()=>{C.value=s}),[s]);const T={ref:n,name:r,value:C.value,className:"i-input i-textarea",onChange:x,onKeyDown:$,...k};return t(st,{label:a,labelInline:o,className:c,style:v,tip:m??h,status:d,children:t("div",{ref:w,className:i("i-input-item",{[`i-input-${d}`]:"normal"!==d,"i-input-borderless":!f}),children:t("textarea",{...T})})})}));lt.Textarea=ct,lt.Number=ot,lt.Range=n=>{const{label:a,name:r,value:s=n.initValue??"",initValue:l,labelInline:o,min:c=-1/0,max:d=1/0,type:m,className:h,status:g="normal",message:f,tip:v,append:b,prepend:y,step:N=1,thousand:k,precision:C,hideControl:w,placeholder:x,border:$,onChange:P,onBlur:z,style:O,...D}=n,S=ae({value:s}),j=p((e=>We(e,c,d)),[c,d]),E=p((e=>Be(e,{precision:C,thousand:k})),[C,k]),B=p((e=>e?"number"!=typeof e&&k?e.replaceAll(k,""):e:""),[k]),Y=re(((e,t)=>{const{value:n}=e.target,i=B(n.replace(/[^\d\.-]/g,"")),a=Array.isArray(S.value)?S.value:[];a[t]=+i,S.value=a,P?.(a,e)})),A=re(((e,t,n)=>{e.preventDefault(),e.stopPropagation();const i=Array.isArray(S.value)?S.value:[],a=B(i[n])??0,r=j(+a+t);i[n]=E(r),S.value=i,P?.(i,e)})),L=re((e=>{e.preventDefault(),e.stopPropagation();const t=S.value??[],n=t[0];t[0]=t[1],t[1]=n,S.value=t,P?.(t)}));u((()=>{S.value=s}),[s]);const V={name:r,className:"i-input i-input-number",...D};return t(st,{label:a,labelInline:o,className:h,style:O,tip:f??v,status:g,children:e("div",{className:i("i-input-item",{[`i-input-${g}`]:"normal"!==g,"i-input-borderless":!$}),children:[y&&t("div",{className:"i-input-prepend",children:y}),!w&&t(He,{active:!0,icon:t(T,{}),onClick:e=>A(e,-N,0)}),t("input",{value:S.value?.[0]||"",placeholder:x?.[0],...V,onChange:e=>Y(e,0)}),!w&&t(He,{active:!0,icon:t(I,{}),onClick:e=>A(e,N,0)}),t(He,{active:!0,icon:t(M,{}),style:{margin:0},onClick:L}),!w&&t(He,{active:!0,icon:t(T,{}),onClick:e=>A(e,-N,1)}),t("input",{value:S.value?.[1]||"",placeholder:x?.[1],...V,onChange:e=>Y(e,1)}),!w&&t(He,{active:!0,icon:t(I,{}),onClick:e=>A(e,N,1)}),b&&t("div",{className:"i-input-append",children:b})]})})};const dt=c(((n,a)=>{const{getContainer:r=e=>e?.offsetParent??document.body,trigger:s,arrow:l,arrowProps:o={},className:c,children:d,...u}=n,p=f((()=>{let{left:e,top:t,pos:n}=o,i="";switch(n){case"left":e+=2,i="translate(-100%, -50%) rotate(180deg)";break;case"right":e-=2,i="translate(0, -50%)";break;case"top":t-=2,i="translate(-50%, -50%) rotate(-90deg)";break;case"bottom":t+=2,i="translate(-50%, -50%) rotate(90deg)"}return{left:e,top:t,transform:i}}),[o]),m=e("div",{ref:a,className:i("i-popup",c),...u,children:[l&&t("svg",{xmlns:"http://www.w3.org/2000/svg",className:"i-popup-arrow",style:p,children:t("path",{d:"M0.5 0L1.5 0C1.5 4, 3 5.5, 5 7.5S8,10 8,12S7 14.5, 5 16.5S1.5,20 1.5,24L0.5 24L0.5 0z"})}),d]});return me(m,r(s))}));function ut(i){const{visible:a=!1,content:r,trigger:s="hover",gap:l=12,offset:o=8,fixed:c,position:d="top",showDelay:p=16,hideDelay:g=12,touchable:N,arrow:k=!0,align:C,fitSize:w,watchResize:x,clickOutside:$=!0,disabled:T,referToWindow:I,style:P,className:z,getContainer:O,children:M,onVisibleChange:D}=i,S=b(null),j=b(null),E=ae({show:!1,toggling:!1,style:{position:c?"fixed":"absolute"},arrowProps:{}});se((e=>{if(!$)return;const t=e.target,n=S.current?.contains(t);E.show&&(!n||"contextmenu"===s)&&A(!1)}),j);const B=()=>{T||E.show&&("hover"!==s||"hover"===s&&!N)||(E.show=!0,E.toggling&&clearTimeout(E.toggling),E.toggling=setTimeout((()=>{const[e,t,{arrowX:n,arrowY:i,arrowPos:a}]=De(S.current,j.current,{position:d,gap:l,offset:o,align:C,refWindow:I});E.style={...E.style,opacity:1,transform:"none",left:e,top:t},E.arrowProps={left:n,top:i,pos:a},E.toggling&&clearTimeout(E.toggling),D?.(!0)}),p))},Y=()=>{E.show&&(E.toggling=setTimeout((()=>{E.style={...E.style,opacity:0,transform:"translate(0, 2px)"},setTimeout((()=>{E.show=!1,E.toggling&&clearTimeout(E.toggling),D?.(!1)}),160)}),g))},A=e=>{void 0===e?E.show?Y():B():e?B():Y()},L=le((()=>({click:{onClick:()=>A(!0)},hover:{onMouseEnter:()=>A(!0),onMouseLeave:()=>A(!1)},focus:{onFocus:()=>A(!0),onBlur:()=>A(!1)},contextmenu:{onContextMenu:e=>{if(e.preventDefault(),e.stopPropagation(),E.show){const[t,n]=Se(e,j.current);E.style={...E.style,left:t,top:n}}else E.show=!0,E.toggling=setTimeout((()=>{const[t,n]=Se(e,j.current);E.style={...E.style,opacity:1,transform:"none",left:t,top:n},E.toggling&&clearTimeout(E.toggling),D?.(!0)}),p)}},none:{}})),[]),V=f((()=>{if(!N)return{};const e={};return"hover"===s&&(e.onMouseEnter=()=>A(!0),e.onMouseLeave=()=>A(!1)),e}),[N,s]),W=()=>{if(!E.show)return;const[e,t,{arrowX:n,arrowY:i,arrowPos:a}]=De(S.current,j.current,{position:d,gap:l,offset:o,align:C,refWindow:I});Object.assign(E,{style:{...E.style,left:e,top:t},arrowProps:{left:n,top:i,pos:a}})};return u((()=>{if("contextmenu"===s)return;const{observe:e,unobserve:t,disconnect:n}=function(){const e=new WeakMap,t=new ResizeObserver((t=>{t.map((t=>{const n=e.get(t.target);n?.(t.target)}))}));return{observe:function(n,i){e.get(n)||(n&&t.observe(n),e.set(n,i))},unobserve:function(n){n&&t.unobserve(n),e.delete(n)},disconnect:function(){t.disconnect()}}}();return S.current&&e(S.current,W),x&&j.current?(e(j.current,W),()=>{x&&j.current&&(t(j.current),S.current&&t(S.current),n())}):void 0}),[x,j.current,S.current]),y((()=>{if(!w||!E.show)return;const e=["top","bottom"].includes(d),t=S.current?.[e?"offsetWidth":"offsetHeight"];E.style={...E.style,[e?"width":"height"]:t}}),[E.show,w]),y((()=>{A(a)}),[a]),e(n,{children:[v.map(M,(e=>{if(!m(e))return;const{type:t,props:n}=e;if("function"==typeof t)return e;const{className:i,...a}=n;return h(e,{ref:S,className:i,...L[s],...a})})),E.show&&t(dt,{ref:j,arrow:k&&"contextmenu"!==s,style:{...P,...E.style},arrowProps:E.arrowProps,className:z,...V,trigger:S.current,getContainer:O,children:r})]})}const pt=a=>{const{value:r,month:s,weeks:l=["一","二","三","四","五","六","日"],renderDate:o=e=>e.date(),disabledDate:c,onDateClick:d}=a,u=ue(),p=f((()=>{const e=[],t=s.add(-1,"month").endOf("month");let{$W:n,$D:i}=t;if(0!==n){const i=Array.from({length:n}).map(((e,i)=>t.add(i+1-n,"day")));e.push(...i)}const a=s.endOf("month");return i=a.$D,n=a.$W,e.push(...Array.from({length:i}).map(((e,t)=>a.add(t+1-i,"day")))),0!==n&&e.push(...Array.from({length:7-n}).map(((e,t)=>a.add(t+1,"day")))),e}),[s]),m=re((e=>{c?.(e)||d?.(e)}));return e(n,{children:[t("div",{className:"i-datepicker-weeks",children:l.map(((e,n)=>t("span",{className:"i-datepicker-week",children:e},n)))}),t("div",{className:"i-datepicker-dates",children:p.map(((e,n)=>{const a=e.isSame(r,"day"),l=e.isSame(s,"month"),d=e.isSame(u,"day"),p=c?.(e);return t("div",{className:i("i-datepicker-item",{"i-datepicker-active":a,"i-datepicker-same-month":l,"i-datepicker-today":d,"i-datepicker-disabled":p}),onClick:()=>m(e),children:o(e)},n)}))})]})},mt=[1,2,3,4,5,6,7,8,9,10,11,12],ht=n=>{const{value:i,unitMonth:a="月",unitYear:r="年",renderYear:s,renderMonth:l,onClick:o}=n;return e("a",{className:"i-datepicker-action","data-ripple":!0,onClick:o,children:[t("span",{children:s?.(i.year())}),r,t("span",{children:l?.(i.month()+1)}),a]})},gt=n=>{const{value:a,unitYear:r,unitMonth:l,renderDate:o,renderMonth:c=e=>e,renderYear:d=e=>e,disabledDate:m,onDateClick:h}=n,g=ae({today:a,month:a||ue(),selectedYear:ue(),years:[],selectable:!1}),f=b(null),v=p((e=>{g.month=g.month[e?"add":"subtract"](1,"month")}),[]),y=s({interval:100},(e=>{const t=e.deltaY<0;g.years=g.years.map((e=>e+(t?-1:1)))}));return u((()=>{if(!g.selectable)return;g.selectedYear=g.month;const e=g.selectedYear.year(),t=Array.from({length:7}).map(((t,n)=>e-3+n));g.years=[...t]}),[g.selectable]),u((()=>{g.today=a,g.month=a||ue()}),[a]),e("div",{className:"i-datepicker",children:[e("div",{className:"i-datepicker-units",children:[t(ht,{value:g.month,unitYear:r,unitMonth:l,renderMonth:c,renderYear:d,onClick:()=>g.selectable=!0}),t("a",{className:"ml-auto i-datepicker-action","data-ripple":!0,onClick:()=>v(!1),children:t(ke,{icon:t(D,{})})}),t("a",{className:"i-datepicker-action","data-ripple":!0,onClick:()=>v(!0),children:t(ke,{icon:t(S,{})})})]}),e("div",{className:i("i-datepicker-ym",{"i-datepicker-active":g.selectable}),children:[t(He,{active:!0,className:"i-datepicker-close",onClick:()=>g.selectable=!1}),t("div",{ref:f,className:"i-datepicker-years",onWheel:y,children:g.years.map((e=>t("a",{className:i("i-datepicker-year",{"i-datepicker-active":e===g.selectedYear.year()}),onClick:()=>g.selectedYear=g.selectedYear.year(e),children:d(e)},e)))}),t("div",{className:"i-datepicker-months",children:mt.map((e=>t("a",{className:i("i-datepicker-month",{"i-datepicker-active":e===g.month.month()+1}),onClick:()=>{return t=e,g.month=g.month.year(g.selectedYear.year()).month(t-1),void(g.selectable=!1);var t},children:c(e)},e)))})]}),t(pt,{value:g.today,month:g.month,disabledDate:m,onDateClick:e=>{e.isSame(g.today,"day")||(e.isSame(g.month,"month")||(g.month=e),g.today=e,h?.(e))},renderDate:o})]})};ue.extend(pe);const ft=["YYYY-MM-DD","YYYY-M-D","YYYY/MM/DD","YYYY/M/D"],vt=e=>{const{name:n,value:i,weeks:a,format:r="YYYY-MM-DD",renderDate:s,renderMonth:l,renderYear:o,popupProps:c,disabledDate:d,onDateClick:p,onChange:m,onBlur:h,...v}=e,b=ae({value:i}),[y,N]=g(!1),k=f((()=>{if(!b.value)return null;const e=ue(b.value,r,!0);return e.isValid()?e:null}),[b.value]),C=e=>{b.value=e,m?.(e)},w=()=>{if(!b.value)return;const e=ue(b.value,ft,!0);e.isValid()?C(e.format(r)):C("")};return u((()=>{b.value=i}),[i]),t(ut,{visible:y,trigger:"click",position:"bottom",arrow:!1,align:"start",content:t(gt,{value:k,weeks:a,renderDate:s,renderMonth:l,renderYear:o,disabledDate:d,onDateClick:e=>{C(e.format(r))}}),...c,watchResize:!0,onVisibleChange:N,children:t(lt,{value:b.value,prepend:t(ke,{icon:t(j,{}),className:"i-datepicker-icon",size:"1em"}),onChange:C,onBlur:e=>{h?.(e),w()},onEnter:w,...v})})},bt=n=>{const{data:a,colon:r,columns:s=1,gap:l=".5em",align:o,labelWidth:c,labelAlign:d,vertical:u,equally:p,style:m,className:h}=n;return t("div",{className:i("i-description",h),style:{"--description-label-width":c,gridTemplateColumns:`repeat(${s}, ${p?"1fr":"auto"})`,gap:l,textAlign:o,...m},children:a.map(((n,a)=>{const{label:s,value:l,style:o,hidden:c,rowSpan:p=1,colSpan:m=1}=n;return c?t(N,{},a):e("div",{className:i("i-description-item",{"i-description-item-vertical":u}),style:{gridColumn:`span ${m}`,gridRow:`span ${p}`,...o},children:[s&&e("div",{className:"i-description-label",style:{textAlign:d},children:[s,r]}),t("div",{className:"i-description-value",children:l})]},a)}))})};function yt(n){const{visible:a,position:r="left",header:s,footer:l,backdropClosable:o=!0,hideCloseButton:c,className:d,children:m,onVisibleChange:h,onClose:f,...v}=n,[y,N]=g(a),[k,C]=g(a),w=b(!0);u((()=>{a?x():$()}),[a]);const x=p((()=>{w.current&&(N(!0),h?.(!0),w.current=!1,setTimeout((()=>{C(!0),w.current=!0}),24))}),[]),$=p((()=>{w.current&&(w.current=!1,C(!1),setTimeout((()=>{N(!1),h?.(!1),w.current=!0,f?.()}),240))}),[]),T=p((function(){o&&$()}),[]);return me(y&&t("div",{className:i("i-backdrop-drawer",d,{"i-active":k}),onClick:T,...v,children:e("div",{className:i("i-drawer",`i-drawer-${r}`),onClick:e=>e.stopPropagation(),children:[e("header",{className:"i-drawer-header",children:[s,t(He,{active:!c,className:"i-drawer-close",onClick:$})]}),t("div",{className:"i-drawer-content",children:m}),t("div",{className:"i-drawer-footer",children:l})]})}),document.body)}const Nt=c(((n,a)=>{const{active:r,type:s,align:l,disabled:o,label:c,style:d,className:u,children:p,...m}=n;return e("li",{ref:a,className:i("i-list-item",u,{"i-list-item-active":r,"i-list-option":"option"===s,disabled:o}),style:{alignItems:l,...d},...m,children:[void 0!==c&&t("span",{className:"i-list-item-label",children:c}),p]})})),kt=e=>{const{label:n,type:a,className:r,children:s,...l}=e;return t("ul",{className:i("i-list",r),...l,children:v.map(s,((e,t)=>{const i="function"==typeof n?n(t):n;return h(e,{label:i,...e.props,type:a})}))})};kt.Virtual=e=>{const{data:n,itemKey:i,renderItem:a,...r}=e;return t(he,{data:n,itemKey:i,...r,children:(e,t)=>a?.(e,t)})},kt.Item=Nt;const{Item:Ct}=kt,wt=e=>{const{width:n,content:i,children:a,...r}=e;return t(ut,{trigger:"click",position:"bottom",touchable:!0,content:t(kt,{className:"i-dropdown-content",style:{minWidth:n},children:i}),...r,children:a})};wt.Item=e=>{const{more:n,moreProps:i,...a}=e,r=t(Ct,{...a});return n?t(ut,{position:"right",touchable:!0,arrow:!1,align:"start",offset:10,...i,content:t(kt,{className:"i-dropdown-content",onClick:e=>e.stopPropagation(),children:n}),children:r}):r};const xt=e=>{const{as:n="div",align:a,justify:r,direction:s,wrap:l,gap:o,columns:c,className:d,style:u,...p}=e,m=f((()=>{if(c)return"number"==typeof c?`repeat(${c}, 1fr)`:c}),[c]);return t(n,{...p,style:{alignItems:a,justifyContent:r,gap:o,flexDirection:s,flexWrap:!0===l?"wrap":l,gridTemplateColumns:m,...u},className:i(d,{[c?"grid":"flex"]:!0})})},$t=k({});class Tt{id;data={};rules={};constructor(){this.id=r(8),this.data={}}get(e){return e?this.data[e]:this.data}set(e,t){const n=this.id;if(this.data)return"string"==typeof e?(this.data[e]=t,void ge.publish(`${n}:set:${e}`,t)):void Object.keys(e).map((t=>{this.data[t]=e[t],ge.publish(`${n}:set:${t}`,e[t])}))}clear(){this.data&&Object.keys(this.data).map((e=>{ge.publish(`${this.id}:set:${e}`,void 0),this.data[e]=void 0}))}async validate(e){const{id:t,rules:n,data:i}=this;if(!n)return i;if(e){const a=n[e],r={validator:e=>Array.isArray(e)?e.length>0:![void 0,null,""].includes(e),message:void 0};"function"==typeof a?r.validator=a:!0===a?r.message="required":Object.assign(r,a);const s=r.validator?.(i[e],this);return s?(ge.publish(`${t}:invalid:${name}`,{message:null,status:"normal"}),!0):(ge.publish(`${t}:invalid:${e}`,{message:r.message,status:"error"}),!1)}let a=!0;return Object.keys(i).map((e=>{const r=n[e];if(void 0===r)return;const s={validator:e=>Array.isArray(e)?e.length>0:!!e,message:void 0};"function"==typeof r?s.validator=r:!0===r?s.message="required":Object.assign(s,r);const l=s.validator?.(i[e],this);l?ge.publish(`${t}:invalid:${e}`,{message:null,status:"normal"}):(ge.publish(`${t}:invalid:${e}`,{message:s.message,status:"error"}),a=!1)})),!!a&&i}}const It=e=>{const{form:n={},rules:a={},initialValues:r={},style:s,className:l,width:o,children:c,...d}=e;return u((()=>{Object.assign(n,{data:{...r},rules:{...a}})}),[n,a]),t($t.Provider,{value:n,children:t("form",{style:{...s,width:o},className:i("i-form",l),...d,children:c})})};function Pt(i){const{title:a,footer:r,hideCloseButton:s,footerLeft:l,okButtonProps:o={children:"确定",onClick:i.onOk},cancelButtonProps:c={secondary:!0,children:"关闭",onClick:i.onClose},children:d,onClose:u}=i,p=a||!s,m=f((()=>{if(r||null===r)return r;const i=Object.assign({},o),a=Object.assign({},c);return e(n,{children:[l,t(Ne,{...i}),t(Ne,{...a})]})}),[r,o,c]);return e(n,{children:[p&&e("header",{className:"i-modal-header",children:[a&&t("b",{children:a}),t(He,{active:!s,className:"i-modal-close",onClick:u})]}),t("div",{className:"i-modal-content",children:d}),t("footer",{className:"i-modal-footer",children:m})]})}function zt(n){const{visible:a,title:r,footer:s,okButtonProps:l,cancelButtonProps:o,closable:c=!0,hideBackdrop:d,backdropClosable:m=!0,hideCloseButton:h,width:f,height:v,customized:y,fixed:N,shadow:k=!0,children:C,style:w,className:x,footerLeft:$,onVisibleChange:T,onClose:I,onOk:P,...z}=n,[O,M]=g(a),[D,S]=g(!1),[j,E]=g(!1),B=b(!0),Y=p((()=>{B.current&&(M(!0),B.current=!1,setTimeout((()=>{S(!0),T?.(!0),B.current=!0}),24))}),[]),A=p((()=>{if(B.current){if(B.current=!1,!c)return E(!0),void setTimeout((()=>{E(!1),B.current=!0}),400);S(!1),setTimeout((()=>{M(!1),B.current=!0,T?.(!1),I?.()}),240)}}),[c]),L=p((function(){m&&A()}),[c,m]);return u((()=>{a?Y():A()}),[a]),O?me(t("div",{className:i("i-modal-container",{"i-modal-backdrop":!d,"i-modal-customized":y,"i-modal-active":D,fixed:N},x),style:w,onClick:L,children:e("div",{className:i("i-modal",{bounced:j,shadow:k}),style:{width:f,height:v},onClick:e=>e.stopPropagation(),...z,children:[y&&C,!y&&t(Pt,{title:r,hideCloseButton:h,footer:s,okButtonProps:l,cancelButtonProps:o,children:C,footerLeft:$,onOk:P,onClose:A})]})}),document.body):null}It.useForm=function(e){const t=b();return t.current||(t.current=e??new Tt),t.current},It.Field=function(e){const{name:t,required:n,children:i}=e,a=ae({value:void 0,status:"normal",message:void 0,update:0}),r=C($t),{id:s}=r,l=p((e=>{t&&r.set(t,e)}),[t]),o=f((()=>v.map(i,(e=>{if(!m(e))return null;const{onChange:t}=e.props,{value:i,status:r,message:s}=a;return h(e,{value:i,status:r,message:s,required:n,onChange:(...e)=>{l(e[0]),t?.(...e),Object.assign(a,{status:"normal",message:void 0})}})}))),[i,a.update]);return u((()=>{if(t)return ge.subscribe(`${s}:set:${t}`,((e,t)=>{a.value=t,a.update+=1})),ge.subscribe(`${s}:invalid:${t}`,((e,t)=>{Object.assign(a,t),a.update+=1})),setTimeout((()=>{r.data[t]=r.data[t]??void 0}),0),()=>{ge.unsubscribe(`${s}:set:${t}`),ge.unsubscribe(`${s}:invalid:${t}`)}}),[t]),t?o:i};const Ot=c(((e,n)=>{const i=ae({});return w(n,(()=>({update:(e={})=>{Object.assign(i,e)}}))),t(zt,{...e,...i})})),Mt=e=>{const{as:n="span",size:a,weight:r,decoration:s,gradient:l,style:o,className:c,children:d}=e,u=f((()=>l&&Array.isArray(l)?{background:`-webkit-linear-gradient(${l.join(",")})`,backgroundClip:"text"}:{}),[l]);return t(n,{style:{fontSize:a,fontWeight:r,textDecoration:s,...u,...o},className:i(c,{"i-text-gradient":l}),children:d})};function Dt(n){const{value:i,height:a=40,size:r=8}=n;return e("div",{className:"i-progress-circle",children:[e("svg",{width:a,height:a,children:[t("circle",{cx:a/2,cy:a/2,r:a/2-r/2,fill:"none",stroke:"var(--background-opacity-2)",strokeWidth:r}),t("circle",{cx:a/2,cy:a/2,r:a/2-r/2,fill:"none",stroke:"var(--color-main)",strokeWidth:r,strokeDasharray:100,pathLength:100,className:"i-progress-circle-path",strokeLinecap:"round",style:{strokeDashoffset:`calc(100 - ${i})`}})]}),e("span",{className:"i-progress-circle-value",children:[t("span",{children:i}),t(Mt,{size:".81em",className:"color-7",children:"%"})]})]})}Mt.Number=function(e){const{count:n,to:i,decimal:a,thousand:r=",",duration:s=2400,easing:l,...o}=e,[c,d]=g(n),p=f((()=>{if(void 0===c)return;const e=c.toFixed(a);return r?Be(c,{precision:a,thousand:r}):e}),[c,r]);return u((()=>{void 0!==n&&void 0!==i&&function(e,t,n=1e3,i,a=e=>1-Math.pow(1-e,4)){const r=performance.now(),s=t-e;let l=requestAnimationFrame((function e(){l=requestAnimationFrame(e);let t=(performance.now()-r)/n;t>=1&&(t=1,cancelAnimationFrame(l));const o=s*a(t);i?.(o)}))}(n,i,s,(e=>d(n+e)),l)}),[i]),u((()=>d(n)),[n]),t(Mt,{...o,children:p})},Mt.Time=function(e){const{seconds:n,zero:i,units:a,...r}=e,s=f((()=>void 0===n?"":function(e,t){const n=[],{zero:i=!0,units:a=["",":",":"]}=t||{},r=a.length;let s=0;for(;s<r&&!(e<=0&&s>1);){const t=Math.round(e%60);e=Math.floor(e/60),n.unshift((i&&t<10?`0${t}`:t)+a[s++])}return n.join("")}(n,{zero:i,units:a})),[n]);return t(Mt,{...r,children:s})};const St=c(((e,n)=>{const{value:a,size:r,barClass:s,dragging:l,renderCursor:o,onMouseDown:c}=e;return t("div",{ref:n,className:"i-progress",style:{height:r},onMouseDown:c,children:t("div",{className:i("i-progress-bar",s,{"no-transition":l}),style:{width:`${a}%`},children:o&&t("a",{className:"i-progress-cursor",children:o(a??0)})})})})),jt=n=>{const{value:a=0,size:r=8,height:s=40,precision:l=0,style:o,draggable:c=!0,type:d="line",barClass:p,label:m,labelInline:h,className:g,renderCursor:v,onChange:y}=n,N=b(null),k=ae({value:a,dragging:!1,width:0,start:0}),C=f((()=>{let e=+k.value.toFixed(l);return e=Math.min(100,e),e=Math.max(0,e),e}),[k.value,l]),w=re((e=>{if(!N.current||!c)return;const t=N.current.getBoundingClientRect(),n=100*(e.pageX-t.left)/t.width;Object.assign(k,{value:n,width:t.width,start:t.left,dragging:!0})})),x=re((e=>{if(!k.dragging||!c)return;e.preventDefault();const{start:t,width:n}=k,i=e.pageX-t;i<0||i>n||(k.value=100*(e.pageX-t)/n)})),$=re((()=>{k.dragging&&c&&(y?.(C),k.dragging=!1)}));return _e(x),Je($),u((()=>{k.value=a>100?100:a<0?0:a}),[a]),e("div",{className:i("i-input-label",g,{"i-input-inline":h}),style:o,children:[m&&t("span",{className:"i-input-label-text",children:m}),"line"===d&&t(St,{ref:N,size:r,barClass:p,dragging:k.dragging,value:k.value,renderCursor:v,onMouseDown:w}),"circle"===d&&t(Dt,{value:k.value,height:s,size:r})]})},Et=c(((n,a)=>{const{style:r,hideControls:s,autoplay:l,muted:o,volume:c=50,height:d,width:p,useOriginControls:m,timeProgressProps:h={barClass:"bg-2"},volumeProgressProps:g={barClass:"bg-1"},className:f,onFullScreenChange:v,...y}=n,N=ae({playing:l,volume:o?0:c,volumeCache:0,muted:o,current:0,duration:0,isFullscreen:!1}),k=b(null),C=e=>{const t=e.target;t.paused||Object.assign(N,{current:t.currentTime})},x=e=>{N.playing=!e.target.paused},$=()=>{const e=k.current?.parentElement;e&&(N.isFullscreen=document.fullscreenElement===e)},T=e=>{const t=e.target;Object.assign(N,{volume:100*t.volume,muted:0===t.volume})},I=()=>{const e=k.current;e&&(e.paused?e.play():e.pause())},P=()=>{const e=k.current;e&&(e.currentTime=0,e.pause())},z=()=>{const e=k.current?.parentElement;var t;e&&(N.isFullscreen?document.exitFullscreen?.():(t=e,t.requestFullscreen?.()),v?.(!N.isFullscreen))};return w(a,(()=>({play:()=>{const e=k.current;e&&e.play()},pause:()=>{const e=k.current;e&&e.pause()},stop:P,fullscreen:z,getVideo:()=>k.current}))),u((()=>{const e=k.current;if(e)return e.addEventListener("timeupdate",C),e.addEventListener("play",x),e.addEventListener("pause",x),e.addEventListener("volumechange",T),document.addEventListener("fullscreenchange",$),()=>{e.removeEventListener("timeupdate",C),e.removeEventListener("play",x),e.removeEventListener("pause",x),e.removeEventListener("volumechange",T),document.removeEventListener("fullscreenchange",$)}}),[]),e("div",{className:i("i-video",f),style:{height:d,width:p,...r},onClick:I,onDoubleClick:()=>z(),children:[t("video",{ref:k,onCanPlay:e=>{const t=e.target;Object.assign(N,{duration:t.duration,current:t.currentTime}),t.volume=N.volume/100},...y,controls:m}),!s&&!m&&e("div",{className:"i-video-controls",onClick:e=>e.stopPropagation(),children:[e("div",{className:"i-video-control flex-1",children:[t(Ne.Toggle,{className:"i-video-btn",flat:!0,square:!0,after:t(ke,{icon:t(E,{})}),active:N.playing,onClick:I,children:t(ke,{icon:t(B,{})})}),t(Ne,{className:"i-video-btn",flat:!0,square:!0,onClick:P,children:t(ke,{icon:t(Y,{})})}),e("span",{className:"i-video-times",children:[t(Mt.Time,{seconds:N.current})," /",t(Mt.Time,{seconds:N.duration})]}),t(jt,{className:"mr-8",...h,value:N.current/N.duration*100,onChange:e=>{const t=k.current;t&&(t.currentTime=N.duration*e/100)}})]}),t("div",{className:"i-video-control",children:t(Ne.Toggle,{className:"i-video-btn",flat:!0,square:!0,after:t(ke,{icon:t(A,{})}),active:N.isFullscreen,onClick:()=>z(),children:t(ke,{icon:t(L,{})})})}),e("div",{className:"i-video-control",children:[t(Ne.Toggle,{className:"i-video-btn",flat:!0,square:!0,active:N.volume<=0,after:t(ke,{icon:t(V,{}),size:"1.2em"}),onClick:()=>{const e=k.current;if(e)return e.volume>0?(N.volumeCache=e.volume,void(e.volume=0)):void(e.volume=0===N.volumeCache?.5:N.volumeCache)},children:t(ke,{icon:t(W,{})})}),t(jt,{style:{width:100},className:"mr-8",...g,value:N.volume,onChange:e=>{const t=k.current;t&&(t.volume=e/100)}})]})]})]})}));function Bt(n){const{name:i,suffix:a,type:r}=n;switch(r){case Me.IMAGE:return t("img",{src:n.src});case Me.VIDEO:return t(Et,{...n});default:return e("div",{className:"i-preview-unknown",children:[t(ke,{icon:t(q,{}),size:"3em"}),t("h5",{className:"mt-4",children:i||a||"?"})]})}}function Yt(i){const{items:a=[],initial:r=0,renderFile:l=Bt,onRotate:o,onChange:c,onClose:d,onZoom:u}=i,p=ae({current:r,rotate:0,scale:1,translate:"0, 0"}),m=b(null),h=f((()=>a.map((e=>{const t={src:""};return"string"==typeof e?t.src=e:Object.assign(t,e),t.suffix=Ae(t.src)||"",t.type=Le(t.suffix,e.type),t}))),[a]),{file:g,content:v}=f((()=>{const e=h[p.current];return{file:e,content:l(e)}}),[p.current,a]),y=g.type===Me.IMAGE,N=e=>{const t=h.length,{current:n}=p;p.current=e>=t?0:e<0?t-1:e,c?.(p.current,n),p.rotate=h[p.current].rotate||0,1!==p.scale&&(p.scale=1,u?.(1)),o?.(p.rotate)},k=e=>{p.rotate+=e,o?.(p.rotate)},C=s({interval:60},(e=>{if(!y)return;let t=p.scale+(e.deltaY<0?.05:-.05);t>2&&(t=2),t<.25&&(t=.25),u?.(t),p.scale=t}));return e(n,{children:[t("div",{ref:m,className:"i-preview-content",style:{transform:`rotate(${p.rotate}deg) scale(${p.scale})`},onWheel:C,onClick:e=>e.stopPropagation(),children:v}),e("div",{className:"i-preview-controls",children:[t(Ne,{square:!0,flat:!0,onClick:d,children:t(ke,{icon:t($,{})})}),h.length>1&&e("span",{className:"px-8",children:[p.current+1," / ",h.length]}),1!==p.scale&&e(Ne,{flat:!0,onClick:()=>p.scale=1,children:[t(ke,{icon:t(F,{})}),e("span",{className:"mt-4",children:[(100*p.scale).toFixed(0),"%"]})]}),t(Ne,{square:!0,flat:!0,href:g.src,target:"_blank",children:t(ke,{icon:t(H,{})})}),t(Ne,{square:!0,flat:!0,href:g.src,download:!0,target:"_blank",children:t(ke,{icon:t(R,{})})}),t(Ne,{square:!0,flat:!0,onClick:()=>k(90),children:t(ke,{icon:t(X,{})})}),t(Ne,{square:!0,flat:!0,onClick:()=>k(-90),children:t(ke,{icon:t(U,{})})}),h.length>1&&e(n,{children:[t(Ne,{square:!0,flat:!0,onClick:()=>N(p.current-1),children:t(ke,{icon:t(D,{})})}),t(Ne,{square:!0,flat:!0,onClick:()=>N(p.current+1),children:t(ke,{icon:t(S,{})})})]})]})]})}function At(){const e=b(null);return n=>{const{items:i,modalProps:a,onClose:r,...s}=n,l=Ye(t(Ot,{ref:e,visible:!0,className:"i-preview",customized:!0,shadow:!1,...a,children:t(Yt,{...s,items:i,onClose:()=>{e.current?.update({visible:!1})}}),fixed:!0,onClose:()=>{r?.(),l?.()}}))}}const Lt=a=>{const{src:r,round:s,size:l,initSize:o,lazyload:c,fallback:d=t(ke,{icon:t(G,{}),size:"2em",className:"color-5"}),fit:p,style:m,className:h,children:g,usePreview:f,onLoad:v,onError:y,onClick:N,...k}=a,C=ae({status:"loading"}),w=b(null),x=p?"100%":void 0,{observe:$,unobserve:T}=Qe(),I=At();u((()=>{if(r&&(C.status="loading",c&&w.current))return $(w.current,((e,t)=>{t&&(e.setAttribute("src",e.dataset.src||""),T(e))})),()=>{w.current&&T(w.current)}}),[r]),k[c?"data-src":"src"]=r;const P="loading"===C.status?o:void 0;return t("div",{style:{width:l??P,height:l??P,...m},className:i("i-image",h,{rounded:s,[`i-image-${C.status}`]:C.status}),children:"error"===C.status?d:e(n,{children:[r&&t("img",{ref:w,style:{objectFit:p,width:x,height:x},...k,onLoad:e=>{v?.(e),C.status=void 0},onError:e=>{y?.(e),C.status="error"},onClick:e=>{N?.(e),f&&r&&I({items:[{src:r,type:Me.IMAGE}]})}}),r&&"loading"===C.status&&t(be,{}),g&&t("div",{className:"i-image-text",children:g})]})})};Lt.List=function(e){const{items:n=[],gap:i=8,columns:a,wrap:r,direction:s,usePreview:l,onClick:o,...c}=e,d=At(),u=f((()=>n.map((e=>{const t={src:""};return"string"==typeof e?t.src=e:Object.assign(t,e),t.suffix=Ae(t.src)||"",t.type=Le(t.suffix,e.type),t}))),[n]);return u.length?t(xt,{className:"i-image-list",gap:i,columns:a,wrap:r,direction:s,children:u.map(((e,n)=>t(Lt,{src:e.src,size:60,usePreview:!1,onClick:e=>((e,t)=>{o?.(e),l&&d({items:u,initial:t})})(e,n),...c},n)))}):""};const Vt={left:"flex-start",center:"center",right:"flex-end"},Wt=12,qt={duration:3e3,closable:!0,active:!1},Ft=function(){const e=document.createElement("div");return e.dataset.id="messages",document.body.append(e),e}(),Ht={callout(e){},close(){}},Rt={left:[],center:[],right:[]},Xt={left:[],center:[],right:[]};ce(Ft).render(t((function(){const i=b(null),a=ae({items:{left:[],center:[],right:[]},tops:{left:[],center:[],right:[]}}),r={left:0,center:0,right:0};u((()=>{Object.assign(Ht,{callout:function(e){const{align:t="center",unshift:n,onShow:r}=e,s=Rt[t][n?"unshift":"push"](e);a.items[t]=[...Rt[t]],setTimeout((()=>{const e=i.current?.offsetHeight||0;Rt[t][n?0:s-1].active=!0,a.items[t]=[...Rt[t]],Xt[t][n?"unshift":"push"](e),a.tops[t]=[...Xt[t]],r?.()}),0),0!==e.duration&&setTimeout(this.close.bind(e),e.duration)},close:function(){const e=this,{align:t="center",onHide:n}=e,i=Rt[t].findIndex((t=>t.id===e.id));i<0||(Rt[t][i].active=!1,a.items[t]=[...Rt[t]],e.timer=setTimeout((()=>{const i=Rt[t].findIndex((t=>t.id===e.id));Rt[t].splice(i,1),Xt[t].splice(i,1),a.tops[t]=[...Xt[t]],a.items[t]=[...Rt[t]],e.timer&&clearTimeout(e.timer),n?.()}),240))}})}),[]);const s=(e,s)=>{if(!e)return t(n,{});const{id:l,active:o,content:c,align:d="center",className:u}=e;r[d]+=a.tops[d][s-1]||0;const p=Wt*s+r[d];return t(Ut,{ref:i,active:o,content:c,top:p,className:u,style:{alignSelf:Vt[d]},onClick:Ht.close.bind(e)},l)};return e("div",{className:"i-messages",children:[a.items.left.map(s),a.items.center.map(s),a.items.right.map(s)]})}),{}));const Ut=c((function({active:e,content:n,top:a,className:r,style:s,onClick:l},o){return t("div",{ref:o,className:i("i-message",r,{"i-message-active":e}),style:{...s,top:a},onClick:l,children:n})}));function Gt(e){return(["string","number"].includes(typeof e)||m(e))&&(e={content:e}),e=Object.assign({id:r(7)},qt,e),Ht.callout(e),Ht.close.bind(e)}zt.useModal=function(){const e=b(null);return{open:n=>{const i=Ye(t(Ot,{ref:e,visible:!0,...n,onClose:()=>{n.onClose?.(),i?.()}}))},update:t=>{if(!e.current)return;const{update:n}=e.current;n(t)}}};const Kt=n=>{const{page:a,active:r,children:s,onChange:l}=n,[o,c]=g(!1);return e("a",{className:i("i-page",{"i-page-active":r,"i-page-loading":o,"i-page-disabled":!1}),"data-page":a,onClick:async()=>{r||o||(c(!0),await(l?.(a)),c(!1))},children:[o&&t(be,{}),s]})},Zt=a=>{const{page:r=1,size:s=10,total:l=0,sibling:o=2,prev:c=t(ke,{icon:t(D,{})}),next:d=t(ke,{icon:t(S,{})}),simple:p,jumper:m,className:h,renderEllipsis:v=()=>t(ke,{icon:t(K,{}),className:"color-7"}),renderPage:b=e=>e,onChange:y,...N}=a,[k,C]=g(r),[w,x]=g(!1),$=f((()=>Math.ceil(l/s)),[s,l]),[T,I,P]=f((()=>{const e=Math.max(1,k-o),t=Math.min($,k+o);return[e,t,Array.from({length:t-e+1}).map(((t,n)=>e+n))]}),[k,$,o]);if($<=k&&1===k)return t(n,{});const z=async e=>{if(y&&!w)return x(!0),new Promise((async t=>{void 0!==e&&(await y(e),C(e),x(!1),t())}))};return u((()=>C(r)),[r]),e("div",{className:i("i-pagination",h),...N,children:[c&&t(Kt,{page:k-1||1,onChange:z,children:c}),T>1&&t(Kt,{page:1,onChange:z,children:b(1)}),T>2&&v(),P.map((e=>t(Kt,{page:e,active:e===k,onChange:z,children:b(e)},e))),I<$-1&&v(),I<$&&t(Kt,{page:$,onChange:z,children:b($)}),d&&t(Kt,{page:k+1,onChange:z,children:d})]})},_t={children:"确定"},Jt={children:"取消",secondary:!0},Qt=n=>{const{trigger:i="click",visible:a,icon:r=t(ke,{icon:t(Z,{}),className:"error"}),content:s,okButtonProps:l,cancelButtonProps:o,children:c,align:d="end",position:u="top",offset:p=12,extra:m,onOk:h,onClose:g,...f}=n,v=ae({loading:!1,visible:a}),b=l?Object.assign({},_t,l):_t,y=o?Object.assign({},Jt,o):Jt,N=e("div",{className:"i-popconfirm",children:[e(xt,{gap:12,children:[r,t("div",{className:"i-popconfirm-content",children:s})]}),e(xt,{gap:12,justify:"flex-end",className:"mt-8 i-popconfirm-footer",children:[null!==o&&t(Ne,{...y,onClick:async e=>{y.onClick?.(e),await(g?.()),v.visible=!1}}),m,null!==l&&t(Ne,{loading:v.loading,...b,onClick:async e=>{v.loading=!0,b.onClick?.(e),await(h?.()),v.loading=!1,v.visible=!1}})]})]});return t(ut,{content:N,...f,trigger:i,visible:v.visible,align:d,offset:p,position:u,onVisibleChange:e=>{v.visible=e,f.onVisibleChange?.(e)},children:c})};function en(n){const{type:a="default",name:r,value:s,checked:l,disabled:o,children:c,onChange:d}=n;return e("label",{className:i("i-radio-item",{disabled:o}),children:[t("input",{type:"radio",name:r,checked:l,className:i("i-radio-input",`i-radio-${a}`),disabled:o,onChange:e=>{d?.(s,e)}}),t("span",{className:"i-radio-text",children:c})]})}function tn(n){const{label:a,name:r,options:s,value:l,type:o="default",status:c="normal",message:d,optionInline:p=!0,labelInline:m,disabled:h,required:g,className:v,onChange:b}=n,y=ae({value:l}),N=f((()=>Ee(s)),[s]),k=re(((e,t)=>{y.value=e,b?.(e,t)}));return u((()=>{y.value=l}),[l]),e("div",{className:i("i-radio i-input-label",{[`i-radio-${c}`]:"normal"!==c,"i-input-inline":m},v),children:[a&&e("span",{className:"i-input-label-text",children:[g&&t("span",{className:"error",children:"*"}),a,d&&t("p",{className:"i-radio-message",children:d})]}),t("div",{className:i("i-radio-options",{"i-options-block":!p,"i-radio-options-button":"button"===o}),children:N.map((e=>t(en,{name:r,value:e.value,checked:y.value===e.value,type:o,disabled:h||e.disabled,onChange:k,children:e.label},e.value)))})]})}tn.Item=en;const nn=n=>{const{dot:a,dotClass:r,outline:s,round:l,size:o="normal",className:c,children:d,onClose:u,onClick:p,...m}=n;return e("span",{className:i("i-tag",{"i-tag-outline":s,"i-tag-clickable":p,[`i-tag-${o}`]:"normal"!==o,round:l},c),onClick:p,...m,children:[a&&t("span",{className:i("i-tag-dot",r)}),d,u&&t(He,{active:!0,className:"i-tag-close",onClick:u})]})},an=n=>{const{value:a,options:r,filter:s,filterPlaceholder:l,multiple:o,empty:c=t(Xe,{}),onSelect:d,onFilter:u}=n;return e("div",{className:i("i-select-options",{"i-select-options-multiple":o}),children:[s&&o&&e("div",{className:"i-select-filter",children:[t(ke,{icon:t(_,{}),className:"color-8 ml-8 my-auto",size:"1.2em"}),t("input",{type:"text",className:"i-input",placeholder:l,onChange:u})]}),0===r.length&&c,r.map(((n,i)=>{const{label:r,value:s,disabled:l}=n,c=o?a?.includes(s):a===s;return e(kt.Item,{active:c,type:"option",onClick:()=>d?.(s,n),disabled:l,children:[o&&t(ke,{icon:t(J,{}),className:"i-select-option-check",size:"1em"}),r]},s||i)}))]})},rn=n=>{const{options:i,value:a,maxDisplay:r,multiple:s,onSelect:l}=n;return s?((e=[],t=[],n=3)=>{const i=e.flatMap((e=>t.includes(e.value)?[e]:[]));if(n>=i.length)return i;const a=i.length-n,r=i.slice(0,n);return r.push(a),r})(i,a,r).map(((n,i)=>{if("number"==typeof n)return e(nn,{children:["+",n]},i);const{label:a,value:r}=n;return t(nn,{onClose:e=>{e?.stopPropagation(),l?.(r,n)},children:a},r)})):i.find((e=>e.value===a))?.label},sn=c(((n,r)=>{const{type:s="text",name:l,label:o,value:c="",placeholder:d,options:m=[],multiple:h,prepend:v,append:b,labelInline:y,style:N,className:k,message:C,status:w="normal",hideClear:x,maxDisplay:$,border:T,filter:I,tip:P,filterPlaceholder:z="...",popupProps:O,onSelect:M,onChange:D,...S}=n,j=ae({inputValue:"",filterValue:"",value:c,loading:!1}),[E,B]=g(!1),Y=f((()=>Ee(m)),[m]),A=f((()=>{const{filterValue:e}=j;if(!e||!I)return Y;const t="function"==typeof I?I:t=>t.value.includes(e)||t.label.includes(e);return Y.filter(t)}),[Y,I,j.filterValue]),L=e=>{j.value=e,D?.(e)},V=p(((e,t)=>{if(M?.(e,t),h){const t=[...j.value],n=t.findIndex((t=>t===e));return n>-1?t.splice(n,1):t.push(e),void L(t)}B(!1),L(e)}),[]),W=re(a({delay:400},(e=>{const t=e.target.value;j.filterValue=t})));u((()=>{j.value=c}),[c]);const q=h?j.value.length>0:!!j.value,F=!x&&E&&q,H=C??P;return e("label",{className:i("i-input-label",k,{"i-input-inline":y}),style:N,children:[o&&t("span",{className:"i-input-label-text",children:o}),t(ut,{position:"bottom",arrow:!1,fitSize:!0,...O,visible:E,trigger:"none",onVisibleChange:e=>{B(e),I&&(j.filterValue="")},content:t(an,{options:A,value:j.value,multiple:h,filter:!!I,filterPlaceholder:z,onSelect:V,onFilter:W}),children:e("div",{className:i("i-input-item",{[`i-input-${w}`]:"normal"!==w,"i-input-borderless":!T,"i-input-focus":E}),onClick:()=>B(!0),children:[v,t("input",{ref:r,type:"hidden",value:j.value,...S}),h?q?t("div",{className:i("i-input i-select",{"i-select-multiple":h}),children:rn({options:Y,value:j.value,multiple:h,maxDisplay:$,onSelect:V})}):t("input",{className:"i-input i-select",placeholder:d,readOnly:!0}):null,!h&&t("input",{value:E?j.filterValue:j.value,className:"i-input i-select",placeholder:j.value||d,onChange:e=>{j.filterValue=e.target.value},readOnly:!I}),t(He,{active:!0,icon:F?void 0:t(Q,{}),onClick:e=>{E&&L(h?[]:"")}}),b]})}),H&&t("span",{className:"i-input-message",children:H})]})}));function ln(){return t("i",{className:"i-step-divider"})}const on=["finished","active","pending"];function cn(e,n){return t("span",{className:"i-step-item-index",children:"finished"===n?t(J,{style:{width:"1em",height:"1.5em"}}):e+1})}function dn(a){const{index:r=0,active:s=0,renderIcon:l=cn,title:o,vertical:c,line:d=t(ln,{}),style:u,className:p,children:m,onClick:h}=a,g=on[r===s?1:r<s?0:2];return t("div",{style:u,className:i("i-step-item",`i-step-item-${g}`,p),onClick:()=>{h?.(r)},children:e(n,c?{children:[e("div",{className:"i-step-item-left",children:[l?.(r,g),d]}),e("div",{className:"i-step-item-right",children:[t("div",{className:"i-step-item-title",children:o}),m&&t("div",{className:"i-step-item-content",children:m})]})]}:{children:[e("div",{className:"i-step-item-title",children:[l?.(r,g),t("span",{children:o}),d]}),m&&t("div",{className:"i-step-item-content",children:m})]})})}const un=e=>{const{active:n=0,vertical:a,renderIcon:r,line:s,style:l,className:o,children:c,onClick:d}=e,u=f((()=>{const e=[];let t=0;return v.map(c,(i=>{if(!i||i.type!==dn)return;const{props:l}=i;e.push({...i,props:{renderIcon:r,line:s,onClick:d,...l,vertical:a,active:n,index:t++}})})),e}),[n,c]);return t("div",{className:i("i-step",{"i-step-vertical":a},o),style:l,children:u})};function pn(e){const{index:n=0,active:a,type:r,transition:s,gap:l=0,itemHeight:o,vertical:c,style:d,className:u,children:p}=e,m=f((()=>"normal"===r?{[c?"paddingBlock":"paddingInline"]:l/2,height:o}:{transform:`translate(-${100*n}%, 0)`,transition:s}),[n,l,o,c,r]);return t("div",{style:{...d,...m},className:i("i-swiper-item",u,{"i-swiper-active":a}),"data-index":n,children:p})}un.Item=dn;const mn=c(((a,r)=>{const{type:s="normal",initial:l=0,display:o=1,scroll:c=1,loop:d=!0,vertical:m,prev:h=t(ke,{icon:t(D,{}),size:"2em"}),next:g=t(ke,{icon:t(S,{}),size:"2em"}),duration:y=600,interval:N=3e3,autoplay:k,pauseOnHover:C,arrow:x=!0,reverse:$,draggable:T,dragOffset:I=40,gap:P=0,itemHeight:z,indicator:O,style:M,className:j,children:E,renderIndicator:B,onBeforeSwipe:Y,onAfterSwipe:A}=a,L=b(null),V=b(null),W=`all ${y/1e3}s`,q=ae({current:l,swipable:!0,transition:"fade"===s?"none":W,dragStart:0,dragging:!1,initialized:!1}),F=f((()=>v.map(E,(e=>{if(e.type===pn)return e}))),[E]),[H,R,X,U,G]=f((()=>{const e="normal"===s&&d&&F.length>o?o+1:0;let t=[];if(e<=0)t=[...F];else{const n=F.slice(0,e);t=[...F.slice(-e),...F,...n]}const n=t.length/o*100+"%";return[t,e,F.length,t.length,n]}),[o,d,s,F]),K=f((()=>-100*(q.current+R)/U),[q.current,U]),Z=f((()=>{if(X<=o||"fade"===s)return;return`translate3d(${m?`0, ${K}%`:`${K}%, 0`}, 0)`}),[K,m,o,X,s]),_=f((()=>{if(m&&z)return{height:z*o}}),[m,z,o]),J=f((()=>Array.from({length:Math.ceil((X-o)/c)+1})),[d,O]),Q=()=>{clearTimeout(V.current),V.current=null},ee=p((e=>{if(!q.swipable||e===q.current)return;q.swipable=!1,Y?.(q.current);let t=!1,n=e;const i=X-o;return d?e>i?(t=!0,e=X,n=0):e<0&&(t=!0,e=-o,n=i):(n=We(n,0,i),e=n),setTimeout((()=>{q.swipable=!0}),y+32),"fade"===s?(q.current=n,void A?.(n)):(q.current=e,t?void setTimeout((()=>{q.transition="none",q.current=n,A?.(n),k&&(V.current=setTimeout(te,N)),setTimeout((()=>{q.transition=W}),60)}),y+20):(k&&(V.current=setTimeout(te,N)),void setTimeout((()=>{A?.(n)}),y+12)))}),[y,k]),te=()=>{ee($?q.current-c:q.current+c)},ne=()=>{ee($?q.current+c:q.current-c)},ie=p((e=>{T&&q.swipable&&"fade"!==s&&(e.stopPropagation(),Object.assign(q,{dragStart:m?e.clientY:e.clientX,dragging:!0,transition:"none"}))}),[T,m]),re=p((e=>{if(!q.dragging||!L.current)return;e.preventDefault();const t=61.8*((m?e.clientY:e.clientX)-q.dragStart)/L.current[m?"offsetHeight":"offsetWidth"]+K;L.current.style.transform=`translate3d(${m?`0, ${t}%`:`${t}%, 0`}, 0)`}),[m,L.current,K]),se=p((e=>{if(!q.dragging||!L.current)return;const t=m?e.clientY:e.clientX,n=L.current[m?"offsetHeight":"offsetWidth"]/U,i=.618*(t-q.dragStart),a=Math.abs(i);if(a>I){const e=Math.floor(a/n)+(a%n-I>0?1:0);let t=q.current+(i>0?-e:e);ee(t)}L.current.style.transform=Z||"",Object.assign(q,{dragging:!1,transition:W})}),[m,L.current,K]);return _e(re),Je(se),w(r,(()=>({swipeTo:ee,swipeNext:te,swipePrev:ne}))),u((()=>{if(k)return V.current=setTimeout(te,N),()=>{clearTimeout(V.current),V.current=null}}),[k,N]),e("div",{style:M,className:i("i-swiper",{"i-swiper-vertical":m,"i-swiper-initialized":q.initialized},j),children:[e("div",{className:"i-swiper-track",style:_,onMouseOver:()=>{C&&Q()},onMouseLeave:()=>{C&&(Q(),V.current=setTimeout(te,N))},children:[t("div",{ref:L,className:i("i-swiper-list",{"i-swiper-fade":"fade"===s}),style:{[m?"height":"width"]:G,transform:Z,transition:q.transition},onMouseDown:ie,children:H.map(((e,n)=>{const{props:i}=e;return t(pn,{index:n,active:n-R===q.current,type:s,gap:P,transition:W,itemHeight:z,vertical:m,...i},n)}))}),x&&e(n,{children:[t("a",{className:"i-swiper-arrow i-swiper-prev",onClick:ne,children:h}),t("a",{className:"i-swiper-arrow i-swiper-next",onClick:te,children:g})]})]}),O&&t("div",{className:"i-swiper-indicators",children:J.map(((e,n)=>t("a",{className:i("i-swiper-indicator",{"i-indicator-active":n===Math[d?"floor":"ceil"]((q.current+X)%X/c)}),onClick:()=>ee(n*c),children:B?.(n)},n)))})]})}));mn.Item=pn;const hn=c(((n,a)=>{const{active:r,tabs:s,type:o="default",prepend:c,append:d,children:p,className:m,vertical:h,toggable:g,bar:f=!0,hideMore:y,barClass:N,renderMore:k=()=>t(Ne,{flat:!0,square:!0,size:"small",children:t(ke,{icon:t(K,{})})}),onTabChange:C,...x}=n,$=b([]),T=b(null),I=b(null),P=ae({active:r,prevActive:void 0,barStyle:{},cachedTabs:[],overflow:!1,more:[],tabs:[]}),{observe:z,unobserve:O}=Qe(),M=oe(I);u((()=>{if(!s)return p?void(P.tabs=v.map(p,((e,t)=>{const{key:n,props:i}=e,{title:a,children:r,content:s,keepDOM:o}=i,c=r?l(r,["props","type","$$typeof","ref"]):s;return{key:n||String(t),title:a,content:c,keepDOM:o}}))):void(P.tabs=[]);P.tabs=s.map(((e,t)=>["string","number"].includes(typeof e)?{key:e,title:e}:(void 0===e.key&&(e.key=t),e)))}),[p,s]);const D=e=>{const{key:t}=e,n=P.tabs.findIndex((e=>e.key===t));if(n>-1)return void j(P.tabs[n].key??n);const i=P.tabs.length,a=e.key??i;P.tabs.push({...e,key:a}),j(a)},S=e=>{const t=P.tabs.findIndex((t=>t.key===e));if(t<0)return;if(P.tabs.splice(t,1),P.active!==e)return;const n=P.tabs[t]||P.tabs[t-1];j(P.prevActive??n?.key??"")},j=e=>{if(e===P.active){if(!g)return;return C?.(void 0,e),P.active=void 0,void(P.barStyle={height:0,width:0})}P.prevActive=P.active,C?.(e,P.active),P.active=e},E=e=>{e.stopPropagation(),e.preventDefault(),h||I.current?.scrollBy({left:e.deltaY+e.deltaX})};return u((()=>{if(!M||y)return;const{scrollHeight:e,scrollWidth:t}=I.current,{width:n,height:i}=M;P.overflow=e>i||t>n,P.overflow&&$.current.map(((e,t)=>{e&&z(e,((e,n)=>{P.tabs[t]&&(P.tabs[t].intersecting=n,P.more=P.tabs.filter((e=>!e.intersecting)))}))}))}),[M,y,P.tabs.length]),u((()=>{if(!f||"pane"===o||void 0===P.active)return;const e=P.tabs.findIndex((e=>e.key===P.active));setTimeout((()=>{const t=$.current[e];if(!t)return;if(P.tabs[e].keepDOM&&P.active){P.cachedTabs.findIndex((e=>e===P.active))<0&&P.cachedTabs.unshift(P.active)}const{offsetHeight:n,offsetLeft:i,offsetTop:a,offsetWidth:r}=t,s="line"===o;P.barStyle={height:!h&&s?".25em":n,width:h&&s?".25em":r,transform:`translate(${i}px, ${a}px)`}}),16)}),[P.active,f]),u((()=>{void 0!==r&&P.active!==r&&j(r)}),[r]),u((()=>{if(!y)return()=>{$.current?.map(O)}}),[P.tabs.length]),u((()=>{if(I.current&&!h)return I.current.addEventListener("wheel",E,{passive:!1}),()=>{I.current&&I.current.removeEventListener("wheel",E)}}),[I.current]),w(a,(()=>({open:j,close:S,add:D,navs:I}))),e("div",{className:i("i-tabs",{flex:h,[`i-tabs-${o}`]:"default"!==o},m),...x,children:[e("div",{className:i("i-tab-navs-container",{"i-tab-navs-vertical":h}),children:[c,e("div",{ref:I,className:"i-tab-navs",children:[P.tabs.map(((n,a)=>{const{title:r,key:s=a,closable:l}=n;return e("a",{ref:e=>$.current[a]=e,className:i("i-tab-nav",{"i-tab-active":P.active===s}),onClick:()=>j(s),children:[r,l&&t(He,{as:"i",active:!0,className:"i-tab-nav-close",onClick:e=>{e.stopPropagation(),S(s)}})]},s)})),f&&t("span",{ref:T,className:i("i-tab-navs-bar",N),style:P.barStyle})]}),!y&&P.overflow&&P.more.length>0&&t(ut,{arrow:!1,position:h?"right":"bottom",align:"end",touchable:!0,hideDelay:500,content:t("div",{className:"i-tabs-morelist pd-4",children:P.more.map(((e,n)=>{const{key:a=n,title:r}=e,s=P.active===a;return t("a",{className:i("i-tab-nav",{"i-tab-active":s}),onClick:()=>j(a),children:r},a)}))}),children:k(P.more)}),d]}),t("div",{className:"i-tab-contents",children:P.tabs.map(((e,n)=>{const{key:a=n,content:r}=e,s=P.active===a;return(s||void 0!==a&&P.cachedTabs.includes(a))&&t("div",{className:i("i-tab-content",{"i-tab-active":s}),children:r},a)}))})]})}));function gn(e){const{data:a=[],depth:r=0,round:s,style:l,className:o,parent:c,nodeProps:d,...u}=e,p=a.map(((e,n)=>{const{type:i}=e,a=e[d.title],s=e[d.key]||(void 0!==c?.key?`${c.key}-${n}`:`${n}`);return e.key=s,e.parent=c,"title"===i?t("div",{className:"i-tree-group-title",children:a},n):i&&"item"!==i?t("div",{className:`i-tree-type-${i}`,children:a},n):t(vn,{index:n,item:e,depth:r,nodeProps:d,...u},s)}));return r>0?t(n,{children:p}):t("div",{className:i("i-tree",o,{"i-tree-round":s}),style:l,children:p})}hn.Item=e=>t(n,{});const fn=e=>{const{as:n="a",href:a,selected:r,children:s,...l}=e,o=i("i-tree-item-header",{"i-tree-item-selected":r});return t(n,"string"==typeof n?{href:a,className:o,...l,children:s}:{to:a||"",className:o,...l,children:s})},vn=n=>{const{item:a,depth:r=0,index:s,selected:l,checked:o=[],partofs:c={},checkable:d,nodeProps:u,renderExtra:p,onItemClick:m,onItemSelect:h,onItemCheck:f,...v}=n,{as:b,key:y="",href:N,icon:k,title:C,expanded:w,disabled:x}=a,$=a[u.children],[T,I]=g(w),P=re(((e,t)=>{t&&(e.preventDefault(),e.stopPropagation()),!x&&$?.length&&I((e=>!e))})),z=re((e=>{if(x)return e.preventDefault(),void e.stopPropagation();P(e),m?.(a,e),h?.(y,a)})),O=o.includes(y);return e("div",{className:i("i-tree-item",{"i-tree-expand":T}),children:[e(fn,{as:b,href:N,style:{paddingLeft:1.5*r+.5+"em"},selected:l===y,onClick:z,children:[d&&t(Fe.Item,{value:O,partof:!O&&c[y],className:"i-tree-checkbox",onChange:e=>f?.(a,e,[]),onClick:e=>e.stopPropagation()}),k&&t("span",{className:"i-tree-item-icon",children:k}),t("span",{className:"i-tree-item-title",children:C}),p?.(a),$&&t(ke,{icon:t(ee,{}),className:"i-tree-toggle",onClick:e=>P(e,!0)})]}),$?.length&&t("div",{className:"i-tree-item-content",children:t(gn,{data:$,depth:r+1,selected:l,checkable:d,parent:a,partofs:c,checked:o,nodeProps:u,renderExtra:p,onItemClick:m,onItemSelect:h,onItemCheck:f,...v})})]})},bn={key:"key",title:"title",children:"children"},yn=c(((e,n)=>{const{data:i=[],selected:a,checked:r=[],disabledRelated:s,nodeProps:l,onItemSelect:o,onItemCheck:c,...d}=e,p=ae({selected:a,checked:r,partofs:{},nodeMaps:new Map}),m=Object.assign({},bn,l),h=e=>p.checked.includes(e||""),g=re(((e,t,n)=>{const{key:i="",parent:a,children:r}=e,l={[i]:t},o={[i]:!1};if(s)return[l];if(t){if(a&&"leaf"!==n){const e=a.children?.some((e=>e.key!==i&&!h(e.key))),[t,n]=g(a,!0,"root");e||Object.assign(l,t),Object.assign(o,e?n:{},{[a.key]:!0})}return r?.length&&"root"!==n&&r.map((e=>{if(h(e.key))return;const[t]=g(e,!0,"leaf");Object.assign(l,t),o[e.key]=!1})),[l,o]}if(a&&"leaf"!==n){const[e,t]=g(a,!1,"root");Object.assign(l,e);const n=a.children?.some((e=>h(e.key)&&e.key!==i));Object.assign(o,n?{}:t,{[a.key]:n,[i]:!1})}return r?.length&&"root"!==n&&r.map((e=>{const[t]=g(e,!1,"leaf");h(e.key)&&(Object.assign(l,t),o[e.key]=!1)})),[l,o]}));return u((()=>{void 0!==a&&(p.selected=a)}),[a]),u((()=>{p.nodeMaps.clear();const{key:e,children:t}=m,n=i=>{i.map((i=>{p.nodeMaps.set(i[e],i),i[t]?.length>0&&n(i[t])}))};n(i)}),[i]),w(n,(()=>({getChecked:()=>{const e=[];return p.checked.map((t=>{const n=p.nodeMaps.get(t);e.push(n)})),[p.checked,e]},getSelected:()=>{const e=p.nodeMaps.get(p.selected);return[p.selected,e]},getPartofs:()=>{const e=[];return[Object.keys(p.partofs).filter((t=>{const n=p.partofs[t];if(n){const n=p.nodeMaps.get(t);e.push(n)}return n})),e]}}))),t(gn,{data:i,selected:p.selected,checked:p.checked,partofs:p.partofs,nodeProps:m,onItemCheck:(e,t)=>{const[n,i]=g(e,t),a=Object.keys(n);p.checked=t?Array.from(new Set([...p.checked,...a])):p.checked.filter((e=>!a.includes(e))),Object.assign(p.partofs,i),c?.(e,t,p.checked)},onItemSelect:(t,n)=>{e.selectable&&(p.selected=t,o?.(t,n))},...d})}));function Nn(i){const{mode:a,index:r,file:s,onRemove:l,onPreview:c}=i;if(!s)return"";const{name:d,size:u,url:p,src:m}=s,h=Le(d,s.type),g=t(He,{active:!0,className:"i-upload-delete",onClick:e=>{e.stopPropagation(),e.preventDefault(),l(r)}});if("card"===a){let i=t(n,{});switch(h){case Me.IMAGE:i=t(Lt,{lazyload:!0,src:p||m,fit:"cover",usePreview:!1});break;case Me.VIDEO:i=t("video",{src:p||m,preload:"none"});break;default:i=e(n,{children:[t(ke,{icon:t(te,{})}),t("span",{className:"i-upload-file-name",children:o(d)})]})}return e("div",{title:d,className:"i-upload-item-card",onClick:()=>c?.(r),children:[i,g]})}return e("div",{className:"i-upload-item",onClick:()=>c?.(r),children:[t("span",{children:d}),t("i",{className:"i-upload-size",children:Ve(u??0)}),g]})}const kn=c(((n,a)=>{const{label:s,labelInline:l,value:o,files:c=[],placeholder:d,status:p="normal",message:m,className:h,style:g,children:v,mode:y="default",cardSize:k="4em",disabled:C,limit:x=(n.multiple?1/0:1),multiple:$,renderItem:T=Nn,shouldUpload:I=()=>!0,uploader:P,onChange:z,onFilesChange:O,onUpload:M,...D}=n,S=ae({files:c,value:o,status:p,message:m,update:0}),j=b(null),E=At(),B=f((()=>v||("card"===y?t(Ne,{className:"i-upload-card-btn color-5",square:!0,flat:!0,outline:!0,disabled:C,children:t(ke,{icon:t(ie,{})})}):e(Ne,{className:"i-upload-btn",disabled:C,children:[t(ke,{icon:t(ne,{})})," Upload"]}))),[y,v]),Y=e=>{const[...t]=S.files,n=t.splice(e,1);URL.revokeObjectURL(n[0]?.src||""),S.files=t,O?.(t,n),z?.(t),j.current&&(j.current.value="")},A=async e=>{P&&e.forEach((async e=>{if(!I(e))return;const t=await P(e),n=S.files.findIndex((e=>e.uid===t.uid));n>-1&&(S.files[n]=t),"completed"===t?.status&&M?.(t)}))},L=e=>{E({items:S.files,initial:e})};u((()=>{Object.assign(S,{status:p,message:m})}),[p,m]),u((()=>{S.value=o}),[o]),w(a,(()=>({getFileList:()=>S.files})),[]);const{message:V,files:W}=S;return e(st,{label:s,labelInline:l,className:i("i-input-label-file",h),style:g,children:[t("input",{...D,disabled:C,ref:j,type:"file",className:"i-input-file-hidden",multiple:$,onChange:e=>{const t=Array.from(e.target.files||[]),{files:n}=S,i=[];t.map((e=>{const{name:t,size:a,type:s}=e,l=n.find((e=>{const{name:n,size:i,type:r}=e;return n===t&&i===a&&r===s})),o=URL.createObjectURL(e);e.src=o,S.update+=1,Object.assign(e,{uid:r(7),src:e.src||e.name}),!l&&i.push(e)}));const a=[...n,...i];Object.assign(S,{files:$?a.slice(0,x):[a.at(-1)],status:p,message:m}),O?.(S.files,i,e),z?.(S.files,e),A(i),j.current&&(j.current.value="")}}),e("div",{className:i("i-upload-inner",{[`i-upload-${y}`]:"default"!==y}),style:{"--upload-card-size":k},children:[t("div",{className:"i-upload-list",onClick:e=>{e.stopPropagation(),e.preventDefault()},children:W?.map(((e,n)=>t(N,{children:Nn({index:n,file:e,mode:y,onRemove:Y,onPreview:L})},n)))}),V&&t("span",{className:"i-upload-message",children:V}),W.length<x&&B]})]})}));export{we as Affix,xe as Badge,Ne as Button,Oe as Card,Fe as Checkbox,Re as Collapse,rt as Datagrid,vt as Datepicker,bt as Description,yt as Drawer,wt as Dropdown,xt as Flex,It as Form,ke as Icon,Lt as Image,lt as Input,kt as List,be as Loading,Gt as Message,zt as Modal,Zt as Pagination,Qt as Popconfirm,ut as Popup,jt as Progress,tn as Radio,sn as Select,un as Step,mn as Swiper,hn as Tabs,nn as Tag,Mt as Text,yn as Tree,kn as Upload,Et as Video,At as usePreview};
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+import classNames from 'classnames';
+import { debounce, uid, throttle, pick, title } from 'radash';
+import { forwardRef, createElement, useEffect, useCallback, isValidElement, cloneElement, useState, useMemo, Children, useRef, useLayoutEffect, Fragment as Fragment$1, createContext, useContext, useImperativeHandle } from 'react';
+import { SkipPreviousRound, CloseRound, MinusRound, PlusRound, InboxTwotone, VisibilityRound, VisibilityOffRound, SyncAltRound, KeyboardArrowLeftRound, KeyboardArrowRightRound, CalendarMonthTwotone, PauseRound, PlayArrowRound, StopRound, FullscreenExitRound, FullscreenRound, VolumeOffRound, VolumeDownRound, FeedOutlined, AspectRatioRound, OpenInNewRound, FileDownloadOutlined, RotateRightRound, RotateLeftRound, HideImageTwotone, MoreHorizRound, InfoOutlined, SearchRound, CheckRound, UnfoldMoreRound, KeyboardArrowDownRound, ListAltRound, CloudUploadTwotone, PlusSharp } from '@ricons/material';
+import { useReactive, useMemoizedFn, useClickAway, useCreation, useSize } from 'ahooks';
+import { createRoot } from 'react-dom/client';
+import ScrollContainer from 'react-custom-scrollbars-2';
+import dayjs from 'dayjs';
+import customParseFormat from 'dayjs/plugin/customParseFormat';
+import { createPortal } from 'react-dom';
+import VList from 'rc-virtual-list';
+import PubSub from 'pubsub-js';
+
+const TIMEOUT = 500;
+const useRipple = () => {
+    if (document.documentElement.dataset["useripple"])
+        return;
+    document.documentElement.dataset["useripple"] = "enable";
+    document.addEventListener("mousedown", listener);
+};
+function listener(e) {
+    const target = e.target;
+    const parent = target.closest("[data-ripple]");
+    if (!target || !parent)
+        return;
+    triggerRipple(parent, e);
+}
+function triggerRipple(target, e) {
+    const [$box, $ripple] = createRipple();
+    const rect = target.getBoundingClientRect();
+    const size = Math.max(rect.width, rect.height) * 2;
+    $ripple.style.cssText = `
+        left: ${e.pageX - rect.left}px;
+        top: ${e.pageY - rect.top}px;
+        width: ${size}px;
+        height: ${size}px;
+        transition: all ${TIMEOUT / 1000}s;
+    `;
+    target.insertAdjacentElement("afterbegin", $box);
+    target.offsetHeight;
+    $ripple.classList.add("i-ripple-active");
+    setTimeout(() => {
+        $box.remove();
+    }, TIMEOUT);
+}
+function createRipple() {
+    const $box = document.createElement("SPAN");
+    const $ripple = document.createElement("SPAN");
+    $box.className = "i-ripple-container";
+    $ripple.className = "i-ripple";
+    $box.append($ripple);
+    return [$box, $ripple];
+}
+
+const Loading = (props) => {
+    const { icon, text, size, style, className, ...restProps } = props;
+    return (jsxs("div", { className: classNames("i-loading-container", className), style: { fontSize: size, ...style }, ...restProps, children: [icon ?? (jsx("svg", { width: '24', height: '24', stroke: '#000', viewBox: '0 0 24 24', xmlns: 'http://www.w3.org/2000/svg', className: 'i-loading-icon', children: jsx("circle", { cx: '12', cy: '12', r: '9.5', fill: 'none', strokeWidth: '3', strokeLinecap: 'round', strokeDasharray: 40, strokeDashoffset: 0 }) })), text] }));
+};
+
+const formatClass = ({ outline, flat, loading, disabled, size = "normal", block, round, square, secondary, className, }) => classNames("i-btn", className, {
+    "i-btn-outline": outline,
+    "i-btn-flat": flat,
+    "i-btn-block": block,
+    "i-btn-loading": loading,
+    "i-btn-square": square,
+    "i-btn-secondary": secondary,
+    [`i-btn-${size}`]: size !== "normal",
+    round,
+    disabled,
+});
+const Button = forwardRef((props, ref) => {
+    const { as: As = "a", children, className, loading, flat, outline, square, secondary, size, round, href, ripple = true, onClick, ...restProps } = props;
+    const handleClick = (e) => {
+        if (loading || restProps.disabled) {
+            e.stopPropagation();
+            return;
+        }
+        onClick?.(e);
+    };
+    if (!children)
+        return jsx(Fragment, {});
+    const childNodes = [
+        loading && jsx(Loading, {}, 'loading'),
+        createElement("span", { key: "content", className: "i-btn-content" }, children),
+    ];
+    const attrs = {
+        className: formatClass(props),
+        ["data-ripple"]: ripple,
+        onClick: handleClick,
+    };
+    useEffect(() => {
+        ripple && useRipple();
+    }, [ripple]);
+    if (typeof As === "string") {
+        return createElement(As, {
+            ref,
+            href,
+            ...attrs,
+            ...restProps,
+        }, childNodes);
+    }
+    return createElement(As, {
+        to: href || "",
+        ...attrs,
+        ...restProps,
+    }, childNodes);
+});
+
+function Group(props) {
+    const { children, vertical, className, style } = props;
+    return (jsx("div", { className: classNames(className, vertical ? "i-btn-group-vertical" : "i-btn-group-horizonal"), style: style, children: children }));
+}
+
+function Toggle(props) {
+    const { active, activeClass, after, disabled, children, className, onClick, onToggle, ...restProps } = props;
+    const state = useReactive({
+        active,
+        done: true,
+    });
+    const toggle = useCallback(() => {
+        const hasAfter = after !== undefined;
+        const nextActive = !state.active;
+        Object.assign(state, {
+            active: nextActive,
+            done: !hasAfter,
+        });
+        onToggle?.(nextActive);
+        hasAfter &&
+            setTimeout(() => {
+                state.done = true;
+            }, 16);
+    }, [after]);
+    const handleClick = (e) => {
+        onClick?.(e);
+        !disabled && toggle();
+    };
+    useEffect(() => {
+        state.active !== active && toggle();
+    }, [active]);
+    return (jsx(Button, { className: classNames(className, { [activeClass || ""]: state.active }, "i-btn-toggle"), ...restProps, onClick: handleClick, children: jsx("div", { className: classNames("i-btn-toggle-content", {
+                "i-btn-toggle-active": state.done,
+            }), children: state.active ? after ?? children : children }) }));
+}
+
+Button.Toggle = Toggle;
+Button.Group = Group;
+
+const Icon = forwardRef((props, ref) => {
+    const { icon, size = "1.425em", rotate, style, className, ...restProps } = props;
+    if (!isValidElement(icon))
+        return icon;
+    const elProps = {
+        ref,
+        style: {
+            transform: rotate ? `rotate(${rotate}deg)` : undefined,
+            ...style,
+            width: size,
+            height: size,
+        },
+        className: classNames("i-icon", className),
+        ...restProps,
+    };
+    return cloneElement(icon, elProps);
+});
+
+function ToTop(props) {
+    const { style, className, onClick } = props;
+    return (jsx(Button, { square: true, className: classNames("i-affix-totop", className), style: { ...style }, onClick: onClick, children: jsx(Icon, { icon: jsx(SkipPreviousRound, {}), rotate: 90 }) }));
+}
+
+const Affix = (props) => {
+    const { position = "fixed", left, top, right, bottom, offset, style, className, children, getContainer = () => document.body, } = props;
+    const [hidden, setHidden] = useState(false);
+    const hijackChildren = useMemo(() => Children.map(children, (node) => {
+        if (node.type === ToTop) {
+            const { onClick } = node.props;
+            return cloneElement(node, {
+                key: node.key,
+                ...node.props,
+                onClick: (e) => {
+                    const container = getContainer();
+                    onClick?.(e);
+                    container?.scrollTo({
+                        top: 0,
+                        left: 0,
+                        behavior: "smooth",
+                    });
+                },
+            });
+        }
+        return node;
+    }), [children, getContainer]);
+    useEffect(() => {
+        const container = getContainer();
+        if (!offset || !container)
+            return;
+        const listener = debounce({ delay: 160 }, () => {
+            const top = container.scrollTop;
+            setHidden(top < offset);
+        });
+        container.addEventListener("scroll", listener);
+        return () => {
+            container.removeEventListener("scroll", listener);
+        };
+    }, [offset, getContainer]);
+    return (jsx("div", { className: classNames("i-affix", className, {
+            "i-affix-hidden": hidden,
+        }), style: {
+            ...style,
+            position,
+            left,
+            top,
+            right,
+            bottom,
+        }, children: hijackChildren }));
+};
+Affix.ToTop = ToTop;
+
+const Badge = (props) => {
+    const { content, contentClass, dot, dotSize, round, disabled, style, className, children, } = props;
+    return (jsxs("div", { style: style, className: classNames("i-badge", { rounded: round }, className), children: [children, jsx("div", { className: classNames("i-badge-content", contentClass, {
+                    "i-badge-dot": dot,
+                    "i-badge-hidden": disabled,
+                }), style: { fontSize: dotSize }, children: content })] }));
+};
+
+const Area = (name) => (props) => (jsx("div", { style: props.style, className: classNames("i-card-" + name, props.className), children: props.children }));
+const Header$2 = Area("header");
+const Footer = Area("footer");
+const Banner = Area("banner");
+const Tailer = Area("tail");
+
+const Card = (props) => {
+    const { shadow = true, border, style, className, children } = props;
+    const slots = useMemo(() => {
+        const nodes = {};
+        Children.map(children, (child) => {
+            const type = child.type;
+            switch (type) {
+                case Header$2:
+                    nodes["header"] = child;
+                    break;
+                case Footer:
+                    nodes["footer"] = child;
+                    break;
+                case Banner:
+                    nodes["banner"] = child;
+                    break;
+                case Tailer:
+                    nodes["tailer"] = child;
+                    break;
+                default:
+                    nodes["content"] = [...(nodes["content"] || []), child];
+                    break;
+            }
+        });
+        return nodes;
+    }, [children]);
+    const { header, banner, content, footer, tailer } = slots;
+    return (jsxs("div", { style: style, className: classNames("i-card", className, {
+            shadow,
+            "i-card-bordered": border,
+        }), children: [banner, header, content && jsx("div", { className: 'i-card-content', children: content }), footer, tailer] }));
+};
+Card.Header = Header$2;
+Card.Footer = Footer;
+Card.Banner = Banner;
+Card.Tailer = Tailer;
+
+var TFileType;
+(function (TFileType) {
+    TFileType["IMAGE"] = "IMAGE";
+    TFileType["VIDEO"] = "VIDEO";
+    TFileType["AUDIO"] = "AUDIO";
+    TFileType["PDF"] = "PDF";
+    TFileType["EXCEL"] = "EXCEL";
+    TFileType["TXT"] = "TXT";
+    TFileType["UNKNOWN"] = "UNKNOWN";
+})(TFileType || (TFileType = {}));
+
+function getPosition($source, $popup, options = {}) {
+    const { refWindow, gap = 0, offset = 0, position = "top", align } = options;
+    if (!$source || !$popup)
+        return [
+            0,
+            0,
+            {
+                arrowX: 0,
+                arrowY: 0,
+                arrowPos: "bottom",
+            },
+        ];
+    const rectT = $source.getBoundingClientRect();
+    const rectC = $popup.getBoundingClientRect();
+    let w = window.innerWidth;
+    let h = window.innerHeight;
+    let { left: tl, top: tt, right: tr, bottom: tb, width: tw, height: th, } = rectT;
+    const { height: ch, width: cw } = rectC;
+    if (!refWindow) {
+        const rectPa = $source.offsetParent?.getBoundingClientRect();
+        w = rectPa?.width || w;
+        h = rectPa?.height || h;
+        tl = $source.offsetLeft;
+        tt = $source.offsetTop;
+        tr = tl + rectT.width;
+        tb = tt + rectT.height;
+    }
+    let y = 0;
+    let x = 0;
+    let arrowX = 0;
+    let arrowY = 0;
+    let arrowPos = "bottom";
+    switch (position) {
+        case "left":
+        case "right":
+            y =
+                th !== ch
+                    ? computePosition({
+                        containerSize: h,
+                        targetSize: th,
+                        targetOffset: tt,
+                        contentSize: ch,
+                        gap,
+                        align,
+                    })
+                    : tt;
+            arrowY = y < tt ? tt - y + th / 2 : th / 2;
+            const xl = tl - offset - cw;
+            const xr = tr + offset + cw;
+            if (position === "left") {
+                x = xl < 0 ? tr + offset : xl;
+                arrowX = xl < 0 ? 0 : cw;
+                arrowPos = xl < 0 ? "left" : "right";
+            }
+            else {
+                x = w > xr ? tr + offset : xl;
+                arrowX = w > xr ? 0 : cw;
+                arrowPos = w > xr ? "left" : "right";
+            }
+            break;
+        case "top":
+        case "bottom":
+            x =
+                tw !== cw
+                    ? computePosition({
+                        containerSize: w,
+                        targetOffset: tl,
+                        targetSize: tw,
+                        contentSize: cw,
+                        gap,
+                        align,
+                    })
+                    : tl;
+            arrowX = x > tl ? cw / 2 : tl - x + tw / 2;
+            const yt = tt - offset - ch;
+            const yb = tb + offset + ch;
+            if (position === "top") {
+                y = yt < 0 ? tb + offset : yt;
+                arrowY = yt < 0 ? 0 : ch;
+                arrowPos = yt < 0 ? "top" : "bottom";
+            }
+            else {
+                y = h > yb ? tb + offset : yt;
+                arrowY = h > yb ? 0 : ch;
+                arrowPos = h > yb ? "top" : "bottom";
+            }
+            break;
+    }
+    return [
+        x,
+        y,
+        {
+            arrowX,
+            arrowY,
+            arrowPos,
+        },
+    ];
+}
+function getPointPosition(e, content) {
+    const { pageX: x, pageY: y } = e;
+    const { width: w, height: h } = content.getBoundingClientRect();
+    const { innerHeight: wh, innerWidth: ww } = window;
+    const left = x + w >= ww ? (x - w > 0 ? x - w : x) : x;
+    const top = y + h >= wh ? (y - h > 0 ? y - h : y) : y;
+    return [left, top];
+}
+function computePosition({ containerSize, targetSize, targetOffset, contentSize, gap, align = "center", }) {
+    const centerPoint = targetOffset + targetSize / 2;
+    switch (align) {
+        case "start":
+            return targetOffset + contentSize > containerSize
+                ? targetOffset + targetSize
+                : targetOffset;
+        case "center":
+            if (targetSize >= contentSize) {
+                return centerPoint - contentSize / 2;
+            }
+            if (centerPoint + contentSize / 2 + gap > containerSize) {
+                return targetOffset + targetSize - contentSize;
+            }
+            if (centerPoint - contentSize / 2 - gap < 0) {
+                return gap;
+            }
+            return centerPoint - contentSize / 2;
+        case "end":
+            const result = targetOffset + targetSize - contentSize;
+            return result > 0 ? result : gap;
+        default:
+            return centerPoint - contentSize / 2;
+    }
+}
+function formatOption(options) {
+    return options.map((option) => ["string", "number"].includes(typeof option)
+        ? { label: option, value: option }
+        : option);
+}
+function animate(from, to, duration = 1000, callback, easing = (t) => 1 - Math.pow(1 - t, 4)) {
+    const start = performance.now();
+    const diff = to - from;
+    let raf = requestAnimationFrame(loop);
+    function loop() {
+        raf = requestAnimationFrame(loop);
+        const past = performance.now() - start;
+        let percent = past / duration;
+        if (percent >= 1) {
+            percent = 1;
+            cancelAnimationFrame(raf);
+        }
+        const pass = diff * easing(percent);
+        callback?.(pass);
+    }
+}
+function formatNumber(value, options = {}) {
+    const { precision, thousand } = options;
+    const result = value.toFixed(precision);
+    if (!thousand)
+        return result;
+    const points = result.split(".");
+    const integer = points[0].replace(/\d{1,3}(?=(\d{3})+(\.\d*)?$)/g, `$&${thousand}`);
+    if (points.length === 1)
+        return integer;
+    return `${integer}.${points[1]}`;
+}
+function renderNode(node, container = document.body) {
+    const div = document.createElement("div");
+    container.append(div);
+    const root = createRoot(div);
+    const sto = setTimeout(() => {
+        root?.render(node);
+    }, 0);
+    return () => {
+        div?.remove();
+        root?.unmount();
+        sto && clearTimeout(sto);
+    };
+}
+function getSuffixByUrl(url) {
+    return url.match(/\.([^\./\?]+)($|\?)/)?.[1];
+}
+function getFileType(suffix, type) {
+    switch (true) {
+        case ["jpg", "jpeg", "png", "webp", "svg"].includes(suffix) ||
+            type?.startsWith("image/"):
+            return TFileType["IMAGE"];
+        case ["mp4", "avi"].includes(suffix) || type?.startsWith("video/"):
+            return TFileType["VIDEO"];
+        default:
+            return TFileType["UNKNOWN"];
+    }
+}
+function fullScreen(el) {
+    el.requestFullscreen?.();
+}
+function exitFullScreen() {
+    document.exitFullscreen?.();
+}
+function formatTime(time, options) {
+    const result = [];
+    const { zero = true, units = ["", ":", ":"] } = options || {};
+    const l = units.length;
+    let i = 0;
+    while (i < l) {
+        if (time <= 0 && i > 1)
+            break;
+        const n = Math.round(time % 60);
+        time = Math.floor(time / 60);
+        result.unshift((zero && n < 10 ? `0${n}` : n) + units[i++]);
+    }
+    return result.join("");
+}
+function getNextSorter(prevSortBy, prevSortType, sortBy) {
+    const types = ["desc", "asc"];
+    if (prevSortBy === sortBy) {
+        const i = types.findIndex((t) => t === prevSortType) + 1;
+        const type = types[i] || "";
+        const by = type === "" ? "" : sortBy;
+        return [by, type];
+    }
+    return [sortBy, "desc"];
+}
+function formatBytes(bytes, decimals = 2) {
+    if (!+bytes)
+        return "0 Bytes";
+    const k = 1024;
+    const dm = decimals < 0 ? 0 : decimals;
+    const sizes = ["B", "KB", "MB", "GB", "TB", "PB", "EB", "ZB", "YB"];
+    const i = Math.floor(Math.log(bytes) / Math.log(k));
+    return `${parseFloat((bytes / Math.pow(k, i)).toFixed(dm))} ${sizes[i]}`;
+}
+function clamp(value, min, max) {
+    return value < min ? min : value > max ? max : value;
+}
+
+function CheckboxItem(props) {
+    const { type = "default", label, name, value = false, className, status = "normal", message, disabled, partof, children, onChange, ...restProps } = props;
+    const state = useReactive({
+        value,
+        status,
+        message,
+    });
+    const handleChange = useMemoizedFn((e) => {
+        const checked = e.target.checked;
+        Object.assign(state, {
+            value: checked,
+            status,
+            message,
+        });
+        onChange?.(checked, e);
+    });
+    useEffect(() => {
+        state.value = value;
+    }, [value]);
+    return (jsxs("label", { className: classNames("i-checkbox-item", {
+            [`i-checkbox-${state.status}`]: state.status !== "normal",
+            disabled,
+        }, className), ...restProps, children: [jsx("input", { type: 'checkbox', name: name, className: classNames("i-checkbox-input", {
+                    [`i-checkbox-${type}`]: !partof,
+                    "i-checkbox-partof": partof,
+                }), checked: state.value, disabled: disabled, onChange: handleChange }), jsx("span", { className: 'i-checkbox-text', children: children || label }), state.message && (jsxs("span", { className: 'i-checkbox-message', children: ["*", state.message] }))] }));
+}
+
+function Checkbox(props) {
+    const { label, name, options = [], value = "", type = "default", optionInline = true, labelInline, disabled, status = "normal", message, required, className, onChange, ...restProps } = props;
+    const state = useReactive({
+        value,
+    });
+    const formattedOptions = useMemo(() => formatOption(options), [options]);
+    const handleChange = useMemoizedFn((checked, opt, e) => {
+        const group = [...state.value];
+        const i = group.findIndex((item) => item === opt.value);
+        if (checked && i < 0) {
+            group.push(opt.value);
+        }
+        else if (!checked && i > -1) {
+            group.splice(i, 1);
+        }
+        state.value = group;
+        onChange?.(group, opt, e);
+    });
+    useEffect(() => {
+        state.value = value;
+    }, [value]);
+    return (jsxs("div", { className: classNames("i-checkbox i-input-label", {
+            [`i-checkbox-${status}`]: status !== "normal",
+            "i-input-inline": labelInline,
+        }, className), ...restProps, children: [label && (jsxs("span", { className: 'i-input-label-text', children: [required && jsx("span", { className: 'error', children: "*" }), label, message && jsx("p", { className: 'i-checkbox-message', children: message })] })), jsx("div", { className: classNames("i-checkbox-options", {
+                    "i-options-block": !optionInline,
+                    "i-checkbox-options-button": type === "button",
+                }), children: formattedOptions.map((option) => {
+                    return (jsx(CheckboxItem, { name: name, value: state.value.includes(option.value), type: type, disabled: disabled || option.disabled, onChange: (checked, e) => handleChange(checked, option, e), children: option.label }, option.value));
+                }) })] }));
+}
+Checkbox.Item = CheckboxItem;
+
+const Helpericon = (props) => {
+    const { as = "a", active, className, icon = jsx(CloseRound, {}), ...restProps } = props;
+    if (!active)
+        return jsx(Fragment, {});
+    return createElement(as, {
+        className: classNames("i-helpericon", className),
+        ...restProps,
+    }, [
+        createElement(Icon, {
+            key: uid(3),
+            icon,
+        }),
+    ]);
+};
+
+function Item$5(props) {
+    return jsx(Fragment, {});
+}
+
+const Collapse = (props) => {
+    const { active, items, multiple, border, headerClickable, className, children, renderToggle = (active) => active ? jsx(MinusRound, {}) : jsx(PlusRound, {}), onCollapse, ...restProps } = props;
+    const state = useReactive({
+        active,
+    });
+    const collapses = useMemo(() => {
+        if (!items) {
+            if (!children)
+                return [];
+            return (Children.map(children, (node, i) => {
+                const { key, props: nodeProps } = node;
+                const { title, children, content, disabled, ...restProps } = nodeProps;
+                return {
+                    ...restProps,
+                    key: key || i,
+                    title,
+                    content: children || content,
+                    disabled,
+                };
+            }) || []);
+        }
+        return items;
+    }, [children]);
+    const handleHeaderClick = (item) => {
+        if (!headerClickable)
+            return;
+        handleToggle(item);
+    };
+    const handleToggle = (item) => {
+        const { key, disabled } = item;
+        if (disabled)
+            return;
+        if (!multiple) {
+            state.active = state.active === key ? undefined : key;
+            onCollapse?.(key, state.active !== undefined);
+            return;
+        }
+        if (!Array.isArray(state.active))
+            state.active = [];
+        const i = state.active.findIndex((k) => k === key);
+        if (i > -1) {
+            state.active.splice(i, 1);
+        }
+        else {
+            key !== undefined && state.active.push(key);
+        }
+        onCollapse?.(key, i < 0);
+    };
+    return (jsx("div", { className: classNames("i-collapse", {
+            "i-collapse-bordered": border,
+        }, className), ...restProps, children: collapses.map((item) => {
+            const { key, title, content, disabled, className, ...restProps } = item;
+            const isActive = multiple
+                ? (state.active || []).includes(key)
+                : state.active === key;
+            return (jsxs("div", { className: classNames("i-collapse-item", className, {
+                    "i-collapse-active": isActive,
+                    "i-collapse-disabled": disabled,
+                }), ...restProps, children: [jsxs("div", { className: 'i-collapse-header', onClick: () => handleHeaderClick(item), children: [title, jsx(Helpericon, { active: true, className: 'i-collapse-toggle', icon: renderToggle(isActive), onClick: () => handleToggle(item) })] }), jsx("div", { className: 'i-collapse-content', children: content })] }, key));
+        }) }));
+};
+Collapse.Item = Item$5;
+
+function Empty(props) {
+    const { className, ...restProps } = props;
+    return (jsx(InboxTwotone, { className: classNames("i-empty", className), ...restProps }));
+}
+
+function getCellStyle({ justify, col, row, colSpan = 1, rowSpan = 1, }) {
+    const style = {
+        "--datagrid-justify": justify,
+        gridArea: `${row + 1} / ${col + 1} / ${row + 1 + rowSpan} / ${col + 1 + colSpan}`,
+        insetInline: `var(--datagrid-cell-inset-${col})`,
+    };
+    return style;
+}
+function Cell(props) {
+    const { column, row, col, data, onCellClick, onCellDoubleClick } = props;
+    const { id, fixed, justify, rowSpan, render } = column;
+    const style = getCellStyle({ justify, fixed, col, row, rowSpan });
+    return (jsx("div", { className: classNames("i-datagrid-cell", {
+            [`i-datagrid-cell-fixed-${fixed}`]: fixed,
+        }), "data-col": id, style: style, onClick: (e) => onCellClick?.(data, column, row, col, e), onDoubleClick: (e) => onCellDoubleClick?.(data, column, row, col, e), children: render?.(data[id], data, col) ?? (jsx("div", { className: 'i-datagrid-cell-content', children: data[id] })) }));
+}
+
+const MouseMoveEvents = new Set();
+const MouseUpEvents = new Set();
+document.addEventListener("mousemove", (e) => {
+    for (const listener of MouseMoveEvents.values()) {
+        listener(e);
+    }
+});
+document.addEventListener("mouseup", (e) => {
+    for (const listener of MouseUpEvents.values()) {
+        listener(e);
+    }
+});
+function useMouseMove(listener) {
+    useEffect(() => {
+        MouseMoveEvents.add(listener);
+        return () => {
+            MouseMoveEvents.delete(listener);
+        };
+    }, [listener]);
+}
+function useMouseUp(listener) {
+    useEffect(() => {
+        MouseUpEvents.add(listener);
+        return () => {
+            MouseUpEvents.delete(listener);
+        };
+    }, [listener]);
+}
+function useIntersectionObserver(configs) {
+    const WM = new WeakMap();
+    const IO = new IntersectionObserver((entries) => {
+        entries.map((entry) => {
+            const callback = WM.get(entry.target);
+            callback?.(entry.target, entry.isIntersecting);
+        });
+    }, configs);
+    function observe(target, callback) {
+        if (WM.get(target))
+            return;
+        WM.set(target, callback);
+        target && IO.observe(target);
+    }
+    function unobserve(target) {
+        target && IO.unobserve(target);
+        WM.delete(target);
+    }
+    function disconnect() {
+        IO.disconnect();
+    }
+    return {
+        observe,
+        unobserve,
+        disconnect,
+    };
+}
+function useResizeObserver() {
+    const WM = new WeakMap();
+    const IO = new ResizeObserver((entries) => {
+        entries.map((entry) => {
+            const callback = WM.get(entry.target);
+            callback?.(entry.target);
+        });
+    });
+    function observe(target, callback) {
+        if (WM.get(target))
+            return;
+        target && IO.observe(target);
+        WM.set(target, callback);
+    }
+    function unobserve(target) {
+        target && IO.unobserve(target);
+        WM.delete(target);
+    }
+    function disconnect() {
+        IO.disconnect();
+    }
+    return {
+        observe,
+        unobserve,
+        disconnect,
+    };
+}
+
+function Resize(props) {
+    const { index, onWidthChange } = props;
+    const state = useReactive({
+        resizing: false,
+        x: 0,
+        width: 0,
+    });
+    const handleMouseDown = useMemoizedFn((e) => {
+        const tar = e.target;
+        const width = tar.offsetParent.offsetWidth;
+        Object.assign(state, {
+            x: e.pageX,
+            resizing: true,
+            width,
+        });
+    });
+    const handleMouseMove = useMemoizedFn((e) => {
+        if (!state.resizing)
+            return;
+        e.preventDefault();
+        const after = state.width + e.pageX - state.x;
+        if (after <= 24)
+            return;
+        onWidthChange(index, after);
+    });
+    const handleMouseUp = () => {
+        if (!state.resizing)
+            return;
+        state.resizing = false;
+    };
+    useMouseMove(handleMouseMove);
+    useMouseUp(handleMouseUp);
+    return (jsx("i", { className: 'i-datagrid-resizor', onMouseDown: handleMouseDown, onClick: (e) => e.stopPropagation() }));
+}
+
+const Arrow = (props) => (jsx("svg", { xmlns: 'http://www.w3.org/2000/svg', viewBox: '0 0 24 24', ...props, children: jsx("g", { fill: 'none', children: jsx("path", { d: 'M9 17.898c0 1.074 1.265 1.648 2.073.941l6.31-5.522a1.75 1.75 0 0 0 0-2.634l-6.31-5.522C10.265 4.454 9 5.028 9 6.102v11.796z', fill: 'currentColor' }) }) }));
+function Sorter(props) {
+    const { type } = props;
+    return (jsxs("a", { className: classNames("i-datagrid-sorter", {
+            [`i-datagrid-sorter-${type}`]: type,
+        }), children: [jsx(Arrow, { className: 'i-datagrid-sorter-caret' }), jsx(Arrow, { className: 'i-datagrid-sorter-caret' })] }));
+}
+
+function Row(props) {
+    const { row, data, columns, onRowClick, onCellClick, onCellDoubleClick } = props;
+    return (jsx("div", { className: 'i-datagrid-row', onClick: () => onRowClick?.(data, row), children: columns.map((col, i) => (jsx(Cell, { column: col, col: i, row: row, data: data, onCellClick: onCellClick, onCellDoubleClick: onCellDoubleClick }, i))) }));
+}
+function Header$1(props) {
+    const { columns, resizable, sortBy, sortType, onWidthChange, onHeaderClick, } = props;
+    return (jsx("div", { className: 'i-datagrid-header i-datagrid-row', children: columns.map((column, col) => {
+            const { id, title, fixed, colSpan, sorter, justify, renderHeader, } = column;
+            const style = getCellStyle({
+                justify,
+                row: 0,
+                col,
+                colSpan,
+            });
+            const order = sortBy === id ? sortType : "";
+            return (jsxs("div", { "data-col": id, className: classNames("i-datagrid-cell", {
+                    "i-datagrid-has-sorter": sorter,
+                    "i-datagrid-cell-fixed": fixed,
+                }), style: { ...style, insetBlockStart: 0 }, onClick: (e) => onHeaderClick?.(column, e), children: [renderHeader?.(column, col) ?? (jsx("div", { className: 'i-datagrid-cell-content', children: title || id })), sorter && jsx(Sorter, { type: order }), resizable && (jsx(Resize, { index: col, onWidthChange: onWidthChange }))] }, col));
+        }) }));
+}
+
+const Datagrid = (props) => {
+    const { data = [], columns = [], border, striped, header = true, resizable, cellPadding = ".5em", empty = jsx(Empty, {}), loading, height = "unset", style, className, renderLoading = () => jsx(Loading, { size: '1.5em', className: 'color-3' }), onCellClick, onRowClick, onHeaderClick, onSort, onScroll, onResize, } = props;
+    const container = useRef(null);
+    const scrollbar = useRef(null);
+    const state = useReactive({
+        rows: data,
+        widths: columns.map((col) => col.width ?? "auto"),
+        sortBy: "",
+        sortType: "",
+    });
+    const styles = useMemo(() => {
+        const { widths } = state;
+        const o = {
+            ...style,
+            "--grid-template-columns": widths
+                .map((w) => {
+                return typeof w === "number" ? `${w}px` : w;
+            })
+                .join(" "),
+        };
+        if (!resizable)
+            return o;
+        const fws = columns.map((col, i) => {
+            const { fixed } = col;
+            if (!fixed)
+                return 0;
+            return widths[i];
+        });
+        columns.map((col, i) => {
+            const { fixed } = col;
+            if (!fixed)
+                return;
+            if (i === 0) {
+                o[`--datagrid-cell-inset-0`] = 0;
+            }
+            else if (i === fws.length - 1) {
+                o[`--datagrid-cell-inset-${fws.length - 1}`] = "auto 0";
+            }
+            else {
+                const isLeft = fixed === "left";
+                const before = isLeft ? fws.slice(0, i) : fws.slice(i + 1);
+                const sum = before.reduce((pre, cur) => pre + cur) + "px";
+                const result = isLeft ? `${sum} auto` : `auto ${sum}`;
+                o[`--datagrid-cell-inset-${i}`] = result;
+            }
+        });
+        return o;
+    }, [state.widths, resizable]);
+    const handleWidthChange = useCallback((i, w) => {
+        if (!resizable)
+            return;
+        const [...ws] = state.widths;
+        ws[i] = w;
+        state.widths = ws;
+        onResize?.(columns[i], w);
+    }, [resizable]);
+    const handleHeaderClick = useCallback((column, e) => {
+        if (column?.sorter) {
+            const [sortBy, sortType] = getNextSorter(state.sortBy, state.sortType, column.id);
+            Object.assign(state, {
+                sortBy,
+                sortType,
+            });
+            onSort?.(sortBy, sortType);
+        }
+        onHeaderClick?.(column, e);
+    }, []);
+    const rows = useMemo(() => {
+        const { sortBy, sortType } = state;
+        if (sortBy && !onSort) {
+            const sorter = columns.find((col) => col.id === sortBy)?.sorter;
+            const sortFn = typeof sorter === "function"
+                ? sorter
+                : (a, b) => b[sortBy] - a[sortBy];
+            const sorted = [...data].sort(sortFn);
+            return sortType === "desc" ? sorted : sorted.reverse();
+        }
+        return data;
+    }, [data, columns, state.sortBy, state.sortType]);
+    useEffect(() => {
+        if (!container.current)
+            return;
+        const { current: div } = container;
+        const tds = div.querySelector(".i-datagrid-row")?.children;
+        if (!tds?.length)
+            return;
+        state.widths = Array.from(tds).map((node) => node.offsetWidth);
+    }, [columns, resizable]);
+    useEffect(() => {
+        loading && scrollbar.current?.scrollTop(0);
+    }, [loading]);
+    const scrollBarStyle = {
+        "--padding": cellPadding,
+        ...styles,
+    };
+    return (jsxs(ScrollContainer, { ref: scrollbar, autoHide: true, autoHeight: true, autoHeightMax: height, style: scrollBarStyle, className: classNames("i-datagrid-container", className, {
+            "i-datagrid-bordered": border,
+            "i-datagrid-striped": striped,
+        }), renderView: (props) => (jsx("div", { ...props, className: classNames({ "i-datagrid-loading": loading }) })), onScroll: onScroll, children: [jsxs("div", { ref: container, className: 'i-datagrid', children: [header && (jsx(Header$1, { columns: columns, resizable: resizable, sortType: state.sortType, sortBy: state.sortBy, onWidthChange: handleWidthChange, onHeaderClick: handleHeaderClick })), rows.map((row, i) => (jsx(Row, { row: i + (header ? 1 : 0), data: row, columns: columns, onCellClick: onCellClick, onRowClick: onRowClick }, i))), rows.length < 1 && empty] }), loading && renderLoading()] }));
+};
+
+function InputContainer(props) {
+    const { label, className, labelInline, style, children, status, tip, required, } = props;
+    return (jsxs("label", { className: classNames("i-input-label", className, {
+            "i-input-inline": labelInline,
+        }), style: style, children: [label && (jsxs("span", { className: 'i-input-label-text', children: [required && jsx("span", { className: 'error', children: "*" }), label] })), children, tip && (jsx("span", { className: classNames("i-input-message", {
+                    [`i-input-${status}`]: status !== "normal",
+                }), children: tip }))] }));
+}
+
+const Input = forwardRef((props, ref) => {
+    const { type = "text", label, name, value = props.initValue ?? "", initValue = "", prepend, append, labelInline, className, status = "normal", message, tip, clear, hideVisible, border, required, onChange, onEnter, style, ...restProps } = props;
+    const state = useReactive({
+        value,
+        type,
+        visible: false,
+    });
+    const handleChange = useCallback((e) => {
+        const v = e.target.value;
+        state.value = v;
+        onChange?.(v, e);
+    }, []);
+    const handleKeydown = useMemoizedFn((e) => {
+        e.code === "Enter" && onEnter?.();
+    });
+    const handleHelperClick = () => {
+        if (type === "password" && !hideVisible) {
+            Object.assign(state, {
+                visible: !state.visible,
+                type: !state.visible ? "text" : "password",
+            });
+            return;
+        }
+        const v = "";
+        onChange?.(v);
+    };
+    const HelperIcon = useMemo(() => {
+        if (type === "password") {
+            return state.visible ? jsx(VisibilityRound, {}) : jsx(VisibilityOffRound, {});
+        }
+        return undefined;
+    }, [state.visible]);
+    useEffect(() => {
+        state.value = value;
+    }, [value]);
+    const inputProps = {
+        ref,
+        type: state.type,
+        name,
+        value: state.value,
+        className: classNames("i-input", `i-input-${type}`),
+        onChange: handleChange,
+        onKeyDown: handleKeydown,
+        ...restProps,
+    };
+    const clearable = clear && state.value;
+    const showHelper = type === "password" && !!state.value;
+    return (jsx(InputContainer, { label: label, labelInline: labelInline, className: className, style: style, tip: message ?? tip, status: status, required: required, children: jsxs("div", { className: classNames("i-input-item", {
+                [`i-input-${status}`]: status !== "normal",
+                "i-input-borderless": !border,
+            }), children: [prepend && jsx("div", { className: 'i-input-prepend', children: prepend }), jsx("input", { ...inputProps }), jsx(Helpericon, { active: !!clearable || showHelper, icon: HelperIcon, onClick: handleHelperClick }), append && jsx("div", { className: 'i-input-append', children: append })] }) }));
+});
+
+const Number$2 = forwardRef((props, ref) => {
+    const { label, name, value = props.initValue ?? "", initValue, labelInline, step = 1, min = -Infinity, max = Infinity, thousand, precision, type, className, status = "normal", append, border, prepend, message, tip, hideControl, style, onChange, onEnter, onInput, onBlur, ...rest } = props;
+    const state = useReactive({
+        value,
+    });
+    const getRangeNumber = useCallback((v) => clamp(v, min, max), [min, max]);
+    const getFormatNumber = useCallback((v) => formatNumber(v, { precision, thousand }), [precision, thousand]);
+    const formatInputValue = useCallback((v) => {
+        if (!v)
+            return "";
+        if (typeof v === "number" || !thousand)
+            return v;
+        return v.replaceAll(thousand, "");
+    }, [thousand]);
+    const handleChange = useMemoizedFn((e) => {
+        const { value } = e.target;
+        const v = formatInputValue(value.replace(/[^\d\.-]/g, ""));
+        state.value = v;
+        onChange?.(+v, e);
+    });
+    const handleOperate = useMemoizedFn((param) => {
+        const value = formatInputValue(state.value) ?? 0;
+        const result = getRangeNumber(+value + param);
+        state.value = getFormatNumber(result);
+        onChange?.(result);
+    });
+    useEffect(() => {
+        state.value = value;
+    }, [value]);
+    const inputProps = {
+        ref,
+        name,
+        value: state.value,
+        className: "i-input i-input-number",
+        onChange: handleChange,
+        ...rest,
+    };
+    return (jsx(InputContainer, { label: label, labelInline: labelInline, className: className, style: style, tip: message ?? tip, status: status, children: jsxs("div", { className: classNames("i-input-item", {
+                [`i-input-${status}`]: status !== "normal",
+                "i-input-borderless": !border,
+            }), children: [prepend && jsx("div", { className: 'i-input-prepend', children: prepend }), !hideControl && (jsx(Helpericon, { active: true, icon: jsx(MinusRound, {}), onClick: () => handleOperate(-step) })), jsx("input", { ...inputProps }), !hideControl && (jsx(Helpericon, { active: true, icon: jsx(PlusRound, {}), onClick: () => handleOperate(step) })), append && jsx("div", { className: 'i-input-append', children: append })] }) }));
+});
+
+const Range = (props) => {
+    const { label, name, value = props.initValue ?? "", initValue, labelInline, min = -Infinity, max = Infinity, type, className, status = "normal", message, tip, append, prepend, step = 1, thousand, precision, hideControl, placeholder, border, onChange, onBlur, style, ...restProps } = props;
+    const state = useReactive({
+        value,
+    });
+    const getRangeNumber = useCallback((v) => clamp(v, min, max), [min, max]);
+    const getFormatNumber = useCallback((v) => formatNumber(v, { precision, thousand }), [precision, thousand]);
+    const formatInputValue = useCallback((v) => {
+        if (!v)
+            return "";
+        if (typeof v === "number" || !thousand)
+            return v;
+        return v.replaceAll(thousand, "");
+    }, [thousand]);
+    const handleChange = useMemoizedFn((e, i) => {
+        const { value } = e.target;
+        const v = formatInputValue(value.replace(/[^\d\.-]/g, ""));
+        const range = Array.isArray(state.value) ? state.value : [];
+        range[i] = +v;
+        state.value = range;
+        onChange?.(range, e);
+    });
+    const handleOperate = useMemoizedFn((e, param, i) => {
+        e.preventDefault();
+        e.stopPropagation();
+        const range = Array.isArray(state.value) ? state.value : [];
+        const value = formatInputValue(range[i]) ?? 0;
+        const result = getRangeNumber(+value + param);
+        range[i] = getFormatNumber(result);
+        state.value = range;
+        onChange?.(range, e);
+    });
+    const handleSwitch = useMemoizedFn((e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        const range = state.value ?? [];
+        const v = range[0];
+        range[0] = range[1];
+        range[1] = v;
+        state.value = range;
+        onChange?.(range);
+    });
+    useEffect(() => {
+        state.value = value;
+    }, [value]);
+    const inputProps = {
+        name,
+        className: "i-input i-input-number",
+        ...restProps,
+    };
+    return (jsx(InputContainer, { label: label, labelInline: labelInline, className: className, style: style, tip: message ?? tip, status: status, children: jsxs("div", { className: classNames("i-input-item", {
+                [`i-input-${status}`]: status !== "normal",
+                "i-input-borderless": !border,
+            }), children: [prepend && jsx("div", { className: 'i-input-prepend', children: prepend }), !hideControl && (jsx(Helpericon, { active: true, icon: jsx(MinusRound, {}), onClick: (e) => handleOperate(e, -step, 0) })), jsx("input", { value: state.value?.[0] || "", placeholder: placeholder?.[0], ...inputProps, onChange: (e) => handleChange(e, 0) }), !hideControl && (jsx(Helpericon, { active: true, icon: jsx(PlusRound, {}), onClick: (e) => handleOperate(e, step, 0) })), jsx(Helpericon, { active: true, icon: jsx(SyncAltRound, {}), style: { margin: 0 }, onClick: handleSwitch }), !hideControl && (jsx(Helpericon, { active: true, icon: jsx(MinusRound, {}), onClick: (e) => handleOperate(e, -step, 1) })), jsx("input", { value: state.value?.[1] || "", placeholder: placeholder?.[1], ...inputProps, onChange: (e) => handleChange(e, 1) }), !hideControl && (jsx(Helpericon, { active: true, icon: jsx(PlusRound, {}), onClick: (e) => handleOperate(e, step, 1) })), append && jsx("div", { className: 'i-input-append', children: append })] }) }));
+};
+
+const Textarea = forwardRef((props, ref) => {
+    const { label, name, value = props.initValue ?? "", initValue, labelInline, className, status = "normal", message, tip, autoSize, border, style, onChange, onEnter, ...restProps } = props;
+    const state = useReactive({
+        value,
+    });
+    const refTextarea = useRef(null);
+    const handleChange = useCallback((e) => {
+        const v = e.target.value;
+        state.value = v;
+        const ta = refTextarea.current?.firstChild;
+        if (autoSize && ta) {
+            // ta.style.height = "inherit";
+            ta.style.height = `${ta.scrollHeight}px`;
+        }
+        onChange?.(v, e);
+    }, []);
+    const handleKeydown = useMemoizedFn((e) => {
+        e.code === "Enter" && onEnter?.();
+    });
+    useEffect(() => {
+        state.value = value;
+    }, [value]);
+    const inputProps = {
+        ref,
+        name,
+        value: state.value,
+        className: "i-input i-textarea",
+        onChange: handleChange,
+        onKeyDown: handleKeydown,
+        ...restProps,
+    };
+    return (jsx(InputContainer, { label: label, labelInline: labelInline, className: className, style: style, tip: message ?? tip, status: status, children: jsx("div", { ref: refTextarea, className: classNames("i-input-item", {
+                [`i-input-${status}`]: status !== "normal",
+                "i-input-borderless": !border,
+            }), children: jsx("textarea", { ...inputProps }) }) }));
+});
+
+Input.Textarea = Textarea;
+Input.Number = Number$2;
+Input.Range = Range;
+
+const Content$1 = forwardRef((props, ref) => {
+    const { getContainer = (trigger) => trigger?.offsetParent ?? document.body, trigger, arrow, arrowProps = {}, className, children, ...restProps } = props;
+    const arrowCSS = useMemo(() => {
+        let { left, top, pos } = arrowProps;
+        let transform = "";
+        switch (pos) {
+            case "left":
+                left += 2;
+                transform = `translate(-100%, -50%) rotate(180deg)`;
+                break;
+            case "right":
+                left -= 2;
+                transform = `translate(0, -50%)`;
+                break;
+            case "top":
+                top -= 2;
+                transform = `translate(-50%, -50%) rotate(-90deg)`;
+                break;
+            case "bottom":
+                top += 2;
+                transform = `translate(-50%, -50%) rotate(90deg)`;
+                break;
+        }
+        return {
+            left,
+            top,
+            transform,
+        };
+    }, [arrowProps]);
+    const content = (jsxs("div", { ref: ref, className: classNames("i-popup", className), ...restProps, children: [arrow && (jsx("svg", { xmlns: 'http://www.w3.org/2000/svg', className: 'i-popup-arrow', style: arrowCSS, children: jsx("path", { d: 'M0.5 0L1.5 0C1.5 4, 3 5.5, 5 7.5S8,10 8,12S7 14.5, 5 16.5S1.5,20 1.5,24L0.5 24L0.5 0z' }) })), children] }));
+    return createPortal(content, getContainer(trigger));
+});
+
+function Popup(props) {
+    const { visible = false, content, trigger = "hover", gap = 12, offset = 8, fixed, position = "top", showDelay = 16, hideDelay = 12, touchable, arrow = true, align, fitSize, watchResize, clickOutside = true, disabled, referToWindow, style, className, getContainer, children, onVisibleChange, } = props;
+    const triggerRef = useRef(null);
+    const contentRef = useRef(null);
+    const state = useReactive({
+        show: false,
+        toggling: false,
+        style: { position: fixed ? "fixed" : "absolute" },
+        arrowProps: {},
+    });
+    useClickAway((e) => {
+        if (!clickOutside)
+            return;
+        const tar = e.target;
+        const isContain = triggerRef.current?.contains(tar);
+        if (!state.show)
+            return;
+        (!isContain || trigger === "contextmenu") && handleToggle(false);
+    }, contentRef);
+    const handleShow = () => {
+        if (disabled)
+            return;
+        if (state.show &&
+            (trigger !== "hover" || (trigger === "hover" && !touchable))) {
+            return;
+        }
+        state.show = true;
+        state.toggling && clearTimeout(state.toggling);
+        state.toggling = setTimeout(() => {
+            const [left, top, { arrowX, arrowY, arrowPos }] = getPosition(triggerRef.current, contentRef.current, {
+                position,
+                gap,
+                offset,
+                align,
+                refWindow: referToWindow,
+            });
+            state.style = {
+                ...state.style,
+                opacity: 1,
+                transform: "none",
+                left,
+                top,
+            };
+            state.arrowProps = {
+                left: arrowX,
+                top: arrowY,
+                pos: arrowPos,
+            };
+            state.toggling && clearTimeout(state.toggling);
+            onVisibleChange?.(true);
+        }, showDelay);
+    };
+    const handleHide = () => {
+        if (!state.show)
+            return;
+        state.toggling = setTimeout(() => {
+            state.style = {
+                ...state.style,
+                opacity: 0,
+                transform: "translate(0, 2px)",
+            };
+            setTimeout(() => {
+                state.show = false;
+                state.toggling && clearTimeout(state.toggling);
+                onVisibleChange?.(false);
+            }, 160);
+        }, hideDelay);
+    };
+    const handleToggle = (action) => {
+        if (action !== undefined) {
+            action ? handleShow() : handleHide();
+            return;
+        }
+        state.show ? handleHide() : handleShow();
+    };
+    const eventMaps = useCreation(() => ({
+        click: {
+            onClick: () => handleToggle(true),
+        },
+        hover: {
+            onMouseEnter: () => handleToggle(true),
+            onMouseLeave: () => handleToggle(false),
+        },
+        focus: {
+            onFocus: () => handleToggle(true),
+            onBlur: () => handleToggle(false),
+        },
+        contextmenu: {
+            onContextMenu: (e) => {
+                e.preventDefault();
+                e.stopPropagation();
+                if (state.show) {
+                    const [left, top] = getPointPosition(e, contentRef.current);
+                    state.style = {
+                        ...state.style,
+                        left,
+                        top,
+                    };
+                    return;
+                }
+                state.show = true;
+                state.toggling = setTimeout(() => {
+                    const [left, top] = getPointPosition(e, contentRef.current);
+                    state.style = {
+                        ...state.style,
+                        opacity: 1,
+                        transform: "none",
+                        left,
+                        top,
+                    };
+                    state.toggling && clearTimeout(state.toggling);
+                    onVisibleChange?.(true);
+                }, showDelay);
+            },
+        },
+        none: {},
+    }), []);
+    const contentTouch = useMemo(() => {
+        if (!touchable)
+            return {};
+        const events = {};
+        if (trigger === "hover") {
+            events["onMouseEnter"] = () => handleToggle(true);
+            events["onMouseLeave"] = () => handleToggle(false);
+        }
+        return events;
+    }, [touchable, trigger]);
+    const computePosition = () => {
+        if (!state.show)
+            return;
+        const [left, top, { arrowX, arrowY, arrowPos }] = getPosition(triggerRef.current, contentRef.current, {
+            position,
+            gap,
+            offset,
+            align,
+            refWindow: referToWindow,
+        });
+        Object.assign(state, {
+            style: { ...state.style, left, top },
+            arrowProps: { left: arrowX, top: arrowY, pos: arrowPos },
+        });
+    };
+    useEffect(() => {
+        if (trigger === "contextmenu")
+            return;
+        const { observe, unobserve, disconnect } = useResizeObserver();
+        triggerRef.current && observe(triggerRef.current, computePosition);
+        if (!watchResize || !contentRef.current)
+            return;
+        observe(contentRef.current, computePosition);
+        return () => {
+            if (!watchResize || !contentRef.current)
+                return;
+            unobserve(contentRef.current);
+            triggerRef.current && unobserve(triggerRef.current);
+            disconnect();
+        };
+    }, [watchResize, contentRef.current, triggerRef.current]);
+    useLayoutEffect(() => {
+        if (!fitSize || !state.show)
+            return;
+        const vertical = ["top", "bottom"].includes(position);
+        const size = triggerRef.current?.[vertical ? "offsetWidth" : "offsetHeight"];
+        state.style = { ...state.style, [vertical ? "width" : "height"]: size };
+    }, [state.show, fitSize]);
+    useLayoutEffect(() => {
+        handleToggle(visible);
+    }, [visible]);
+    return (jsxs(Fragment, { children: [Children.map(children, (child) => {
+                if (!isValidElement(child))
+                    return;
+                const { type, props } = child;
+                if (typeof type === "function")
+                    return child;
+                const { className, ...rest } = props;
+                return cloneElement(child, {
+                    ref: triggerRef,
+                    className,
+                    ...eventMaps[trigger],
+                    ...rest,
+                });
+            }), state.show && (jsx(Content$1, { ref: contentRef, arrow: arrow && trigger !== "contextmenu", style: { ...style, ...state.style }, arrowProps: state.arrowProps, className: className, ...contentTouch, trigger: triggerRef.current, getContainer: getContainer, children: content }))] }));
+}
+
+const Dates = (props) => {
+    const { value, month, weeks = ["一", "二", "三", "四", "五", "六", "日"], renderDate = (date) => date.date(), disabledDate, onDateClick, } = props;
+    const today = dayjs();
+    const dates = useMemo(() => {
+        const dates = [];
+        const lastDateOfLastMonth = month.add(-1, "month").endOf("month");
+        let { $W, $D } = lastDateOfLastMonth;
+        if ($W !== 0) {
+            const lastMonthDates = Array.from({ length: $W }).map((whatever, i) => lastDateOfLastMonth.add(i + 1 - $W, "day"));
+            dates.push(...lastMonthDates);
+        }
+        const lastDate = month.endOf("month");
+        $D = lastDate.$D;
+        $W = lastDate.$W;
+        dates.push(...Array.from({ length: $D }).map((whatever, i) => lastDate.add(i + 1 - $D, "day")));
+        if ($W !== 0) {
+            dates.push(...Array.from({ length: 7 - $W }).map((whatever, i) => lastDate.add(i + 1, "day")));
+        }
+        return dates;
+    }, [month]);
+    const handleDateClick = useMemoizedFn((date) => {
+        if (disabledDate?.(date))
+            return;
+        onDateClick?.(date);
+    });
+    return (jsxs(Fragment, { children: [jsx("div", { className: 'i-datepicker-weeks', children: weeks.map((week, i) => (jsx("span", { className: 'i-datepicker-week', children: week }, i))) }), jsx("div", { className: 'i-datepicker-dates', children: dates.map((date, i) => {
+                    const active = date.isSame(value, "day");
+                    const isSameMonth = date.isSame(month, "month");
+                    const isToday = date.isSame(today, "day");
+                    const disabled = disabledDate?.(date);
+                    return (jsx("div", { className: classNames("i-datepicker-item", {
+                            "i-datepicker-active": active,
+                            "i-datepicker-same-month": isSameMonth,
+                            "i-datepicker-today": isToday,
+                            "i-datepicker-disabled": disabled,
+                        }), onClick: () => handleDateClick(date), children: renderDate(date) }, i));
+                }) })] }));
+};
+
+const MONTHS = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12];
+const YearMonth = (props) => {
+    const { value, unitMonth = "月", unitYear = "年", renderYear, renderMonth, onClick, } = props;
+    return (jsxs("a", { className: 'i-datepicker-action', "data-ripple": true, onClick: onClick, children: [jsx("span", { children: renderYear?.(value.year()) }), unitYear, jsx("span", { children: renderMonth?.(value.month() + 1) }), unitMonth] }));
+};
+const Panel = (props) => {
+    const { value, unitYear, unitMonth, renderDate, renderMonth = (m) => m, renderYear = (y) => y, disabledDate, onDateClick, } = props;
+    const state = useReactive({
+        today: value,
+        month: value || dayjs(),
+        selectedYear: dayjs(),
+        years: [],
+        selectable: false,
+    });
+    const $years = useRef(null);
+    const handleOperateMonth = useCallback((next) => {
+        state.month = state.month[next ? "add" : "subtract"](1, "month");
+    }, []);
+    const handleChangeDate = (date) => {
+        if (date.isSame(state.today, "day"))
+            return;
+        if (!date.isSame(state.month, "month")) {
+            state.month = date;
+        }
+        state.today = date;
+        onDateClick?.(date);
+    };
+    const handleChangeMonth = (month) => {
+        state.month = state.month
+            .year(state.selectedYear.year())
+            .month(month - 1);
+        state.selectable = false;
+    };
+    const getMoreYears = throttle({ interval: 100 }, (e) => {
+        const isUp = e.deltaY < 0;
+        state.years = state.years.map((y) => (y += isUp ? -1 : 1));
+    });
+    useEffect(() => {
+        if (!state.selectable)
+            return;
+        state.selectedYear = state.month;
+        const y = state.selectedYear.year();
+        const years = Array.from({ length: 7 }).map((_, i) => y - 3 + i);
+        state.years = [...years];
+    }, [state.selectable]);
+    useEffect(() => {
+        state.today = value;
+        state.month = value || dayjs();
+    }, [value]);
+    return (jsxs("div", { className: 'i-datepicker', children: [jsxs("div", { className: 'i-datepicker-units', children: [jsx(YearMonth, { value: state.month, unitYear: unitYear, unitMonth: unitMonth, renderMonth: renderMonth, renderYear: renderYear, onClick: () => (state.selectable = true) }), jsx("a", { className: 'ml-auto i-datepicker-action', "data-ripple": true, onClick: () => handleOperateMonth(false), children: jsx(Icon, { icon: jsx(KeyboardArrowLeftRound, {}) }) }), jsx("a", { className: 'i-datepicker-action', "data-ripple": true, onClick: () => handleOperateMonth(true), children: jsx(Icon, { icon: jsx(KeyboardArrowRightRound, {}) }) })] }), jsxs("div", { className: classNames("i-datepicker-ym", {
+                    "i-datepicker-active": state.selectable,
+                }), children: [jsx(Helpericon, { active: true, className: 'i-datepicker-close', onClick: () => (state.selectable = false) }), jsx("div", { ref: $years, className: 'i-datepicker-years', onWheel: getMoreYears, children: state.years.map((y) => (jsx("a", { className: classNames("i-datepicker-year", {
+                                "i-datepicker-active": y === state.selectedYear.year(),
+                            }), onClick: () => (state.selectedYear =
+                                state.selectedYear.year(y)), children: renderYear(y) }, y))) }), jsx("div", { className: 'i-datepicker-months', children: MONTHS.map((m) => {
+                            return (jsx("a", { className: classNames("i-datepicker-month", {
+                                    "i-datepicker-active": m === state.month.month() + 1,
+                                }), onClick: () => handleChangeMonth(m), children: renderMonth(m) }, m));
+                        }) })] }), jsx(Dates, { value: state.today, month: state.month, disabledDate: disabledDate, onDateClick: handleChangeDate, renderDate: renderDate })] }));
+};
+
+dayjs.extend(customParseFormat);
+const FORMATTYPES = ["YYYY-MM-DD", "YYYY-M-D", "YYYY/MM/DD", "YYYY/M/D"];
+const Datepicker = (props) => {
+    const { name, value, weeks, format = "YYYY-MM-DD", renderDate, renderMonth, renderYear, popupProps, disabledDate, onDateClick, onChange, onBlur, ...restProps } = props;
+    const state = useReactive({
+        value,
+    });
+    const [active, setActive] = useState(false);
+    const dayJsValue = useMemo(() => {
+        if (!state.value)
+            return null;
+        const date = dayjs(state.value, format, true);
+        if (date.isValid())
+            return date;
+        return null;
+    }, [state.value]);
+    const handleDateClick = (date) => {
+        handleChange(date.format(format));
+    };
+    const handleChange = (v) => {
+        state.value = v;
+        onChange?.(v);
+    };
+    const handleSetDate = () => {
+        if (!state.value)
+            return;
+        const date = dayjs(state.value, FORMATTYPES, true);
+        if (date.isValid()) {
+            handleChange(date.format(format));
+            return;
+        }
+        handleChange("");
+    };
+    const handleBlur = (e) => {
+        onBlur?.(e);
+        handleSetDate();
+    };
+    useEffect(() => {
+        state.value = value;
+    }, [value]);
+    return (jsx(Popup, { visible: active, trigger: 'click', position: 'bottom', arrow: false, align: 'start', content: jsx(Panel, { value: dayJsValue, weeks: weeks, renderDate: renderDate, renderMonth: renderMonth, renderYear: renderYear, disabledDate: disabledDate, onDateClick: handleDateClick }), ...popupProps, watchResize: true, onVisibleChange: setActive, children: jsx(Input, { value: state.value, prepend: jsx(Icon, { icon: jsx(CalendarMonthTwotone, {}), className: 'i-datepicker-icon', size: '1em' }), onChange: handleChange, onBlur: handleBlur, onEnter: handleSetDate, ...restProps }) }));
+};
+
+const Description = (props) => {
+    const { data, colon, columns = 1, gap = ".5em", align, labelWidth, labelAlign, vertical, equally, style, className, } = props;
+    return (jsx("div", { className: classNames("i-description", className), style: {
+            ["--description-label-width"]: labelWidth,
+            gridTemplateColumns: `repeat(${columns}, ${equally ? "1fr" : "auto"})`,
+            gap,
+            textAlign: align,
+            ...style,
+        }, children: data.map((item, i) => {
+            const { label, value, style, hidden, rowSpan = 1, colSpan = 1, } = item;
+            if (hidden)
+                return jsx(Fragment$1, {}, i);
+            return (jsxs("div", { className: classNames("i-description-item", {
+                    "i-description-item-vertical": vertical,
+                }), style: {
+                    gridColumn: `span ${colSpan}`,
+                    gridRow: `span ${rowSpan}`,
+                    ...style,
+                }, children: [label && (jsxs("div", { className: 'i-description-label', style: { textAlign: labelAlign }, children: [label, colon] })), jsx("div", { className: 'i-description-value', children: value })] }, i));
+        }) }));
+};
+
+function Drawer(props) {
+    const { visible, position = "left", header, footer, backdropClosable = true, hideCloseButton, className, children, onVisibleChange, onClose, ...restProps } = props;
+    const [show, setShow] = useState(visible);
+    const [active, setActive] = useState(visible);
+    const toggable = useRef(true);
+    useEffect(() => {
+        visible ? handleShow() : handleHide();
+    }, [visible]);
+    const handleShow = useCallback(() => {
+        if (!toggable.current)
+            return;
+        setShow(true);
+        onVisibleChange?.(true);
+        toggable.current = false;
+        setTimeout(() => {
+            setActive(true);
+            toggable.current = true;
+        }, 24);
+    }, []);
+    const handleHide = useCallback(() => {
+        if (!toggable.current)
+            return;
+        toggable.current = false;
+        setActive(false);
+        setTimeout(() => {
+            setShow(false);
+            onVisibleChange?.(false);
+            toggable.current = true;
+            onClose?.();
+        }, 240);
+    }, []);
+    const handleBackdropClick = useCallback(function () {
+        backdropClosable && handleHide();
+    }, []);
+    return createPortal(show && (jsx("div", { className: classNames("i-backdrop-drawer", className, {
+            "i-active": active,
+        }), onClick: handleBackdropClick, ...restProps, children: jsxs("div", { className: classNames("i-drawer", `i-drawer-${position}`), onClick: (e) => e.stopPropagation(), children: [jsxs("header", { className: 'i-drawer-header', children: [header, jsx(Helpericon, { active: !hideCloseButton, className: 'i-drawer-close', onClick: handleHide })] }), jsx("div", { className: 'i-drawer-content', children: children }), jsx("div", { className: 'i-drawer-footer', children: footer })] }) })), document.body);
+}
+
+const Item$4 = forwardRef((props, ref) => {
+    const { active, type, align, disabled, label, style, className, children, ...restProps } = props;
+    return (jsxs("li", { ref: ref, className: classNames("i-list-item", className, {
+            "i-list-item-active": active,
+            "i-list-option": type === "option",
+            disabled,
+        }), style: { alignItems: align, ...style }, ...restProps, children: [label !== undefined && (jsx("span", { className: 'i-list-item-label', children: label })), children] }));
+});
+
+const Virtual = (props) => {
+    const { data, itemKey, renderItem, ...restProps } = props;
+    return (jsx(VList, { data: data, itemKey: itemKey, ...restProps, children: (item, i) => {
+            return renderItem?.(item, i);
+        } }));
+};
+
+const List$1 = (props) => {
+    const { label, type, className, children, ...restProps } = props;
+    return (jsx("ul", { className: classNames("i-list", className), ...restProps, children: Children.map(children, (node, i) => {
+            const renderLabel = typeof label === "function" ? label(i) : label;
+            return cloneElement(node, {
+                label: renderLabel,
+                ...node.props,
+                type,
+            });
+        }) }));
+};
+List$1.Virtual = Virtual;
+List$1.Item = Item$4;
+
+const { Item: ListItem } = List$1;
+const Item$3 = (props) => {
+    const { more, moreProps, ...restProps } = props;
+    const Li = jsx(ListItem, { ...restProps });
+    if (!more)
+        return Li;
+    return (jsx(Popup, { position: 'right', touchable: true, arrow: false, align: 'start', offset: 10, ...moreProps, content: jsx(List$1, { className: 'i-dropdown-content', onClick: (e) => e.stopPropagation(), children: more }), children: Li }));
+};
+
+const Dropdown = (props) => {
+    const { width, content, children, ...restProps } = props;
+    return (jsx(Popup, { trigger: 'click', position: 'bottom', touchable: true, content: jsx(List$1, { className: 'i-dropdown-content', style: { minWidth: width }, children: content }), ...restProps, children: children }));
+};
+Dropdown.Item = Item$3;
+
+const Flex = (props) => {
+    const { as: Component = "div", align, justify, direction, wrap, gap, columns, className, style, ...restProps } = props;
+    const gridColumns = useMemo(() => {
+        if (!columns)
+            return;
+        if (typeof columns === "number")
+            return `repeat(${columns}, 1fr)`;
+        return columns;
+    }, [columns]);
+    return (jsx(Component, { ...restProps, style: {
+            alignItems: align,
+            justifyContent: justify,
+            gap,
+            flexDirection: direction,
+            flexWrap: wrap === true ? "wrap" : wrap,
+            gridTemplateColumns: gridColumns,
+            ...style,
+        }, className: classNames(className, {
+            [columns ? "grid" : "flex"]: true,
+        }) }));
+};
+
+const Context = createContext({});
+
+function Field(props) {
+    const { name, required, children } = props;
+    const state = useReactive({
+        value: undefined,
+        status: "normal",
+        message: undefined,
+        update: 0,
+    });
+    const form = useContext(Context);
+    const { id } = form;
+    const handleChange = useCallback((v) => {
+        if (!name)
+            return;
+        form.set(name, v);
+    }, [name]);
+    const hijackChildren = useMemo(() => {
+        return Children.map(children, (node) => {
+            if (!isValidElement(node))
+                return null;
+            const { onChange } = node.props;
+            const { value, status, message } = state;
+            return cloneElement(node, {
+                value,
+                status,
+                message,
+                required,
+                onChange: (...args) => {
+                    handleChange(args[0]);
+                    onChange?.(...args);
+                    Object.assign(state, {
+                        status: "normal",
+                        message: undefined,
+                    });
+                },
+            });
+        });
+    }, [children, state.update]);
+    useEffect(() => {
+        if (!name)
+            return;
+        PubSub.subscribe(`${id}:set:${name}`, (evt, v) => {
+            state.value = v;
+            state.update += 1;
+        });
+        PubSub.subscribe(`${id}:invalid:${name}`, (evt, v) => {
+            Object.assign(state, v);
+            state.update += 1;
+        });
+        setTimeout(() => {
+            form.data[name] = form.data[name] ?? undefined;
+        }, 0);
+        return () => {
+            PubSub.unsubscribe(`${id}:set:${name}`);
+            PubSub.unsubscribe(`${id}:invalid:${name}`);
+        };
+    }, [name]);
+    if (!name)
+        return children;
+    return hijackChildren;
+}
+
+class IFormInstance {
+    id;
+    data = {};
+    rules = {};
+    constructor() {
+        this.id = uid(8);
+        this.data = {};
+    }
+    get(field) {
+        return field ? this.data[field] : this.data;
+    }
+    set(field, value) {
+        const id = this.id;
+        if (!this.data)
+            return;
+        if (typeof field === "string") {
+            this.data[field] = value;
+            PubSub.publish(`${id}:set:${field}`, value);
+            return;
+        }
+        Object.keys(field).map((name) => {
+            this.data[name] = field[name];
+            PubSub.publish(`${id}:set:${name}`, field[name]);
+        });
+    }
+    clear() {
+        if (!this.data)
+            return;
+        Object.keys(this.data).map((name) => {
+            PubSub.publish(`${this.id}:set:${name}`, undefined);
+            this.data[name] = undefined;
+        });
+    }
+    async validate(field) {
+        const { id, rules, data } = this;
+        if (!rules)
+            return data;
+        if (field) {
+            const o = rules[field];
+            const rule = {
+                validator: (v) => Array.isArray(v)
+                    ? v.length > 0
+                    : ![undefined, null, ""].includes(v),
+                message: undefined,
+            };
+            if (typeof o === "function") {
+                rule.validator = o;
+            }
+            else if (o === true) {
+                rule.message = "required";
+            }
+            else {
+                Object.assign(rule, o);
+            }
+            const isValid = rule.validator?.(data[field], this);
+            if (!isValid) {
+                PubSub.publish(`${id}:invalid:${field}`, {
+                    message: rule.message,
+                    status: "error",
+                });
+                return false;
+            }
+            PubSub.publish(`${id}:invalid:${name}`, {
+                message: null,
+                status: "normal",
+            });
+            return true;
+        }
+        let isAllValid = true;
+        Object.keys(data).map((name) => {
+            const o = rules[name];
+            if (o === undefined)
+                return;
+            const rule = {
+                validator: (v) => (Array.isArray(v) ? v.length > 0 : !!v),
+                message: undefined,
+            };
+            if (typeof o === "function") {
+                rule.validator = o;
+            }
+            else if (o === true) {
+                rule.message = "required";
+            }
+            else {
+                Object.assign(rule, o);
+            }
+            const isValid = rule.validator?.(data[name], this);
+            if (!isValid) {
+                PubSub.publish(`${id}:invalid:${name}`, {
+                    message: rule.message,
+                    status: "error",
+                });
+                isAllValid = false;
+            }
+            else {
+                PubSub.publish(`${id}:invalid:${name}`, {
+                    message: null,
+                    status: "normal",
+                });
+            }
+        });
+        return isAllValid ? data : false;
+    }
+}
+function useForm(form) {
+    const formRef = useRef();
+    if (!formRef.current) {
+        formRef.current = form ?? new IFormInstance();
+    }
+    return formRef.current;
+}
+
+const Form = (props) => {
+    const { form = {}, rules = {}, initialValues = {}, style, className, width, children, ...rest } = props;
+    useEffect(() => {
+        Object.assign(form, {
+            data: { ...initialValues },
+            rules: { ...rules },
+        });
+    }, [form, rules]);
+    return (jsx(Context.Provider, { value: form, children: jsx("form", { style: { ...style, width }, className: classNames("i-form", className), ...rest, children: children }) }));
+};
+Form.useForm = useForm;
+Form.Field = Field;
+
+function DefaultContent(props) {
+    const { title, footer, hideCloseButton, footerLeft, okButtonProps = {
+        children: "确定",
+        onClick: props.onOk,
+    }, cancelButtonProps = {
+        secondary: true,
+        children: "关闭",
+        onClick: props.onClose,
+    }, children, onClose, } = props;
+    const showHeader = title || !hideCloseButton;
+    const renderFooter = useMemo(() => {
+        if (footer || footer === null)
+            return footer;
+        const propsOk = Object.assign({}, okButtonProps);
+        const propsCancel = Object.assign({}, cancelButtonProps);
+        return (jsxs(Fragment, { children: [footerLeft, jsx(Button, { ...propsOk }), jsx(Button, { ...propsCancel })] }));
+    }, [footer, okButtonProps, cancelButtonProps]);
+    return (jsxs(Fragment, { children: [showHeader && (jsxs("header", { className: 'i-modal-header', children: [title && jsx("b", { children: title }), jsx(Helpericon, { active: !hideCloseButton, className: 'i-modal-close', onClick: onClose })] })), jsx("div", { className: 'i-modal-content', children: children }), jsx("footer", { className: 'i-modal-footer', children: renderFooter })] }));
+}
+function Modal(props) {
+    const { visible, title, footer, okButtonProps, cancelButtonProps, closable = true, hideBackdrop, backdropClosable = true, hideCloseButton, width, height, customized, fixed, shadow = true, children, style, className, footerLeft, onVisibleChange, onClose, onOk, ...restProps } = props;
+    const [show, setShow] = useState(visible);
+    const [active, setActive] = useState(false);
+    const [bounced, setBounced] = useState(false);
+    const toggable = useRef(true);
+    const handleShow = useCallback(() => {
+        if (!toggable.current)
+            return;
+        setShow(true);
+        toggable.current = false;
+        setTimeout(() => {
+            setActive(true);
+            onVisibleChange?.(true);
+            toggable.current = true;
+        }, 24);
+    }, []);
+    const handleHide = useCallback(() => {
+        if (!toggable.current)
+            return;
+        toggable.current = false;
+        if (!closable) {
+            setBounced(true);
+            setTimeout(() => {
+                setBounced(false);
+                toggable.current = true;
+            }, 400);
+            return;
+        }
+        setActive(false);
+        setTimeout(() => {
+            setShow(false);
+            toggable.current = true;
+            onVisibleChange?.(false);
+            onClose?.();
+        }, 240);
+    }, [closable]);
+    const handleBackdropClick = useCallback(function () {
+        backdropClosable && handleHide();
+    }, [closable, backdropClosable]);
+    useEffect(() => {
+        visible ? handleShow() : handleHide();
+    }, [visible]);
+    if (!show)
+        return null;
+    return createPortal(jsx("div", { className: classNames("i-modal-container", {
+            "i-modal-backdrop": !hideBackdrop,
+            "i-modal-customized": customized,
+            "i-modal-active": active,
+            fixed,
+        }, className), style: style, onClick: handleBackdropClick, children: jsxs("div", { className: classNames("i-modal", {
+                bounced,
+                shadow,
+            }), style: {
+                width,
+                height,
+            }, onClick: (e) => e.stopPropagation(), ...restProps, children: [customized && children, !customized && (jsx(DefaultContent, { title: title, hideCloseButton: hideCloseButton, footer: footer, okButtonProps: okButtonProps, cancelButtonProps: cancelButtonProps, children: children, footerLeft: footerLeft, onOk: onOk, onClose: handleHide }))] }) }), document.body);
+}
+
+const HookModal = forwardRef((props, ref) => {
+    const state = useReactive({});
+    useImperativeHandle(ref, () => ({
+        update: (config = {}) => {
+            Object.assign(state, config);
+        },
+    }));
+    return jsx(Modal, { ...props, ...state });
+});
+
+const Text = (props) => {
+    const { as: Tag = "span", size, weight, decoration, gradient, style, className, children, } = props;
+    const gradients = useMemo(() => {
+        if (!gradient || !Array.isArray(gradient))
+            return {};
+        return {
+            background: `-webkit-linear-gradient(${gradient.join(",")})`,
+            backgroundClip: "text",
+        };
+    }, [gradient]);
+    return (jsx(Tag, { style: {
+            fontSize: size,
+            fontWeight: weight,
+            textDecoration: decoration,
+            ...gradients,
+            ...style,
+        }, className: classNames(className, {
+            "i-text-gradient": gradient,
+        }), children: children }));
+};
+
+function Number$1(props) {
+    const { count, to, decimal, thousand = ",", duration = 2400, easing, ...restProps } = props;
+    const [n, setN] = useState(count);
+    const number = useMemo(() => {
+        if (n === undefined)
+            return;
+        const z = n.toFixed(decimal);
+        if (!thousand)
+            return z;
+        return formatNumber(n, { precision: decimal, thousand });
+    }, [n, thousand]);
+    useEffect(() => {
+        if (count === undefined || to === undefined)
+            return;
+        animate(count, to, duration, (v) => setN(count + v), easing);
+    }, [to]);
+    useEffect(() => setN(count), [count]);
+    return jsx(Text, { ...restProps, children: number });
+}
+
+function Number(props) {
+    const { seconds, zero, units, ...restProps } = props;
+    const text = useMemo(() => {
+        if (seconds === undefined)
+            return "";
+        return formatTime(seconds, {
+            zero,
+            units,
+        });
+    }, [seconds]);
+    return jsx(Text, { ...restProps, children: text });
+}
+
+Text.Number = Number$1;
+Text.Time = Number;
+
+function Circle(props) {
+    const { value, height = 40, size = 8 } = props;
+    return (jsxs("div", { className: 'i-progress-circle', children: [jsxs("svg", { width: height, height: height, children: [jsx("circle", { cx: height / 2, cy: height / 2, r: height / 2 - size / 2, fill: 'none', stroke: 'var(--background-opacity-2)', strokeWidth: size }), jsx("circle", { cx: height / 2, cy: height / 2, r: height / 2 - size / 2, fill: 'none', stroke: 'var(--color-main)', strokeWidth: size, strokeDasharray: 100, pathLength: 100, className: 'i-progress-circle-path', strokeLinecap: 'round', style: {
+                            strokeDashoffset: `calc(100 - ${value})`,
+                        } })] }), jsxs("span", { className: 'i-progress-circle-value', children: [jsx("span", { children: value }), jsx(Text, { size: '.81em', className: 'color-7', children: "%" })] })] }));
+}
+
+const Line = forwardRef((props, ref) => {
+    const { value, size, barClass, dragging, renderCursor, onMouseDown } = props;
+    return (jsx("div", { ref: ref, className: 'i-progress', style: { height: size }, onMouseDown: onMouseDown, children: jsx("div", { className: classNames("i-progress-bar", barClass, {
+                "no-transition": dragging,
+            }), style: { width: `${value}%` }, children: renderCursor && (jsx("a", { className: 'i-progress-cursor', children: renderCursor(value ?? 0) })) }) }));
+});
+
+const Progress = (props) => {
+    const { value = 0, size = 8, height = 40, precision = 0, style, draggable = true, type = "line", barClass, label, labelInline, className, renderCursor, onChange, } = props;
+    const ref = useRef(null);
+    const state = useReactive({
+        value,
+        dragging: false,
+        width: 0,
+        start: 0,
+    });
+    const toFixedValue = useMemo(() => {
+        let value = +state.value.toFixed(precision);
+        value = Math.min(100, value);
+        value = Math.max(0, value);
+        return value;
+    }, [state.value, precision]);
+    const handleMouseDown = useMemoizedFn((e) => {
+        if (!ref.current || !draggable)
+            return;
+        const rect = ref.current.getBoundingClientRect();
+        const value = ((e.pageX - rect.left) * 100) / rect.width;
+        Object.assign(state, {
+            value,
+            width: rect.width,
+            start: rect.left,
+            dragging: true,
+        });
+    });
+    const handleMouseMove = useMemoizedFn((e) => {
+        if (!state.dragging || !draggable)
+            return;
+        e.preventDefault();
+        const { start, width } = state;
+        const offset = e.pageX - start;
+        if (offset < 0 || offset > width)
+            return;
+        state.value = ((e.pageX - start) * 100) / width;
+    });
+    const handleMouseUp = useMemoizedFn(() => {
+        if (!state.dragging || !draggable)
+            return;
+        onChange?.(toFixedValue);
+        state.dragging = false;
+    });
+    useMouseMove(handleMouseMove);
+    useMouseUp(handleMouseUp);
+    useEffect(() => {
+        if (value > 100) {
+            state.value = 100;
+            return;
+        }
+        if (value < 0) {
+            state.value = 0;
+            return;
+        }
+        state.value = value;
+    }, [value]);
+    return (jsxs("div", { className: classNames("i-input-label", className, {
+            "i-input-inline": labelInline,
+        }), style: style, children: [label && jsx("span", { className: 'i-input-label-text', children: label }), type === "line" && (jsx(Line, { ref: ref, size: size, barClass: barClass, dragging: state.dragging, value: state.value, renderCursor: renderCursor, onMouseDown: handleMouseDown })), type === "circle" && (jsx(Circle, { value: state.value, height: height, size: size }))] }));
+};
+
+const Video = forwardRef((props, ref) => {
+    const { style, hideControls, autoplay, muted, volume = 50, height, width, useOriginControls, timeProgressProps = {
+        barClass: "bg-2",
+    }, volumeProgressProps = {
+        barClass: "bg-1",
+    }, className, onFullScreenChange, ...restProps } = props;
+    const state = useReactive({
+        playing: autoplay,
+        volume: muted ? 0 : volume,
+        volumeCache: 0,
+        muted,
+        current: 0,
+        duration: 0,
+        isFullscreen: false,
+    });
+    const $v = useRef(null);
+    const timeUpdateListener = (e) => {
+        const tar = e.target;
+        if (tar.paused)
+            return;
+        Object.assign(state, {
+            current: tar.currentTime,
+        });
+    };
+    const playChangeListener = (e) => {
+        state.playing = !e.target.paused;
+    };
+    const fsChangeListener = () => {
+        const tar = $v.current?.parentElement;
+        if (!tar)
+            return;
+        state.isFullscreen = document.fullscreenElement === tar;
+    };
+    const volumeChangeListener = (e) => {
+        const tar = e.target;
+        Object.assign(state, {
+            volume: tar.volume * 100,
+            muted: tar.volume === 0,
+        });
+    };
+    const handlePlay = () => {
+        const v = $v.current;
+        if (!v)
+            return;
+        v.paused ? v.play() : v.pause();
+    };
+    const handleReady = (e) => {
+        const tar = e.target;
+        Object.assign(state, {
+            duration: tar.duration,
+            current: tar.currentTime,
+        });
+        tar.volume = state.volume / 100;
+    };
+    const handleMuted = () => {
+        const v = $v.current;
+        if (!v)
+            return;
+        if (v.volume > 0) {
+            state.volumeCache = v.volume;
+            v.volume = 0;
+            return;
+        }
+        v.volume = state.volumeCache === 0 ? 0.5 : state.volumeCache;
+    };
+    const handleStop = () => {
+        const v = $v.current;
+        if (!v)
+            return;
+        v.currentTime = 0;
+        v.pause();
+    };
+    const handleFullscreen = () => {
+        const tar = $v.current?.parentElement;
+        if (!tar)
+            return;
+        state.isFullscreen ? exitFullScreen() : fullScreen(tar);
+        onFullScreenChange?.(!state.isFullscreen);
+    };
+    const handleUpdateTime = (t) => {
+        const v = $v.current;
+        if (!v)
+            return;
+        v.currentTime = (state.duration * t) / 100;
+    };
+    const handleUpdateVolume = (t) => {
+        const v = $v.current;
+        if (!v)
+            return;
+        v.volume = t / 100;
+    };
+    useImperativeHandle(ref, () => ({
+        play: () => {
+            const v = $v.current;
+            if (!v)
+                return;
+            v.play();
+        },
+        pause: () => {
+            const v = $v.current;
+            if (!v)
+                return;
+            v.pause();
+        },
+        stop: handleStop,
+        fullscreen: handleFullscreen,
+        getVideo: () => $v.current,
+    }));
+    useEffect(() => {
+        const v = $v.current;
+        if (!v)
+            return;
+        v.addEventListener("timeupdate", timeUpdateListener);
+        v.addEventListener("play", playChangeListener);
+        v.addEventListener("pause", playChangeListener);
+        v.addEventListener("volumechange", volumeChangeListener);
+        document.addEventListener("fullscreenchange", fsChangeListener);
+        return () => {
+            v.removeEventListener("timeupdate", timeUpdateListener);
+            v.removeEventListener("play", playChangeListener);
+            v.removeEventListener("pause", playChangeListener);
+            v.removeEventListener("volumechange", volumeChangeListener);
+            document.removeEventListener("fullscreenchange", fsChangeListener);
+        };
+    }, []);
+    return (jsxs("div", { className: classNames("i-video", className), style: { height, width, ...style }, onClick: handlePlay, onDoubleClick: () => handleFullscreen(), children: [jsx("video", { ref: $v, onCanPlay: handleReady, ...restProps, controls: useOriginControls }), !hideControls && !useOriginControls && (jsxs("div", { className: 'i-video-controls', onClick: (e) => e.stopPropagation(), children: [jsxs("div", { className: 'i-video-control flex-1', children: [jsx(Button.Toggle, { className: 'i-video-btn', flat: true, square: true, after: jsx(Icon, { icon: jsx(PauseRound, {}) }), active: state.playing, onClick: handlePlay, children: jsx(Icon, { icon: jsx(PlayArrowRound, {}) }) }), jsx(Button, { className: 'i-video-btn', flat: true, square: true, onClick: handleStop, children: jsx(Icon, { icon: jsx(StopRound, {}) }) }), jsxs("span", { className: 'i-video-times', children: [jsx(Text.Time, { seconds: state.current }), " /", jsx(Text.Time, { seconds: state.duration })] }), jsx(Progress, { className: 'mr-8', ...timeProgressProps, value: (state.current / state.duration) * 100, onChange: handleUpdateTime })] }), jsx("div", { className: 'i-video-control', children: jsx(Button.Toggle, { className: 'i-video-btn', flat: true, square: true, after: jsx(Icon, { icon: jsx(FullscreenExitRound, {}) }), active: state.isFullscreen, onClick: () => handleFullscreen(), children: jsx(Icon, { icon: jsx(FullscreenRound, {}) }) }) }), jsxs("div", { className: 'i-video-control', children: [jsx(Button.Toggle, { className: 'i-video-btn', flat: true, square: true, active: state.volume <= 0, after: jsx(Icon, { icon: jsx(VolumeOffRound, {}), size: '1.2em' }), onClick: handleMuted, children: jsx(Icon, { icon: jsx(VolumeDownRound, {}) }) }), jsx(Progress, { style: { width: 100 }, className: 'mr-8', ...volumeProgressProps, value: state.volume, onChange: handleUpdateVolume })] })] }))] }));
+});
+
+function renderFile(props) {
+    const { name, suffix, type } = props;
+    switch (type) {
+        case TFileType.IMAGE:
+            return jsx("img", { src: props.src });
+        case TFileType.VIDEO:
+            return jsx(Video, { ...props });
+        default:
+            return (jsxs("div", { className: 'i-preview-unknown', children: [jsx(Icon, { icon: jsx(FeedOutlined, {}), size: '3em' }), jsx("h5", { className: 'mt-4', children: name || suffix || "?" })] }));
+    }
+}
+
+function Content(props) {
+    const { items = [], initial = 0, renderFile: renderFile$1 = renderFile, onRotate, onChange, onClose, onZoom, } = props;
+    const state = useReactive({
+        current: initial,
+        rotate: 0,
+        scale: 1,
+        translate: `0, 0`,
+    });
+    const box = useRef(null);
+    const files = useMemo(() => {
+        return items.map((item) => {
+            const o = {
+                src: "",
+            };
+            if (typeof item === "string") {
+                o.src = item;
+            }
+            else {
+                Object.assign(o, item);
+            }
+            o.suffix = getSuffixByUrl(o.src) || "";
+            o.type = getFileType(o.suffix, item["type"]);
+            return o;
+        });
+    }, [items]);
+    const { file, content } = useMemo(() => {
+        const file = files[state.current];
+        const content = renderFile$1(file);
+        return {
+            file,
+            content,
+        };
+    }, [state.current, items]);
+    const isImage = file.type === TFileType.IMAGE;
+    const handleSwitch = (next) => {
+        const l = files.length;
+        const { current: before } = state;
+        if (next >= l) {
+            state.current = 0;
+        }
+        else if (next < 0) {
+            state.current = l - 1;
+        }
+        else {
+            state.current = next;
+        }
+        onChange?.(state.current, before);
+        state.rotate = files[state.current].rotate || 0;
+        if (state.scale !== 1) {
+            state.scale = 1;
+            onZoom?.(1);
+        }
+        onRotate?.(state.rotate);
+    };
+    const handleRotate = (deg) => {
+        state.rotate += deg;
+        onRotate?.(state.rotate);
+    };
+    const handleMouseWheel = throttle({ interval: 60 }, (e) => {
+        if (!isImage)
+            return;
+        let after = state.scale + (e.deltaY < 0 ? 0.05 : -0.05);
+        if (after > 2)
+            after = 2;
+        if (after < 0.25)
+            after = 0.25;
+        onZoom?.(after);
+        state.scale = after;
+    });
+    return (jsxs(Fragment, { children: [jsx("div", { ref: box, className: 'i-preview-content', style: {
+                    transform: `rotate(${state.rotate}deg) scale(${state.scale})`,
+                }, onWheel: handleMouseWheel, onClick: (e) => e.stopPropagation(), children: content }), jsxs("div", { className: 'i-preview-controls', children: [jsx(Button, { square: true, flat: true, onClick: onClose, children: jsx(Icon, { icon: jsx(CloseRound, {}) }) }), files.length > 1 && (jsxs("span", { className: 'px-8', children: [state.current + 1, " / ", files.length] })), state.scale !== 1 && (jsxs(Button, { flat: true, onClick: () => (state.scale = 1), children: [jsx(Icon, { icon: jsx(AspectRatioRound, {}) }), jsxs("span", { className: 'mt-4', children: [(state.scale * 100).toFixed(0), "%"] })] })), jsx(Button, { square: true, flat: true, href: file.src, target: '_blank', children: jsx(Icon, { icon: jsx(OpenInNewRound, {}) }) }), jsx(Button, { square: true, flat: true, href: file.src, download: true, target: '_blank', children: jsx(Icon, { icon: jsx(FileDownloadOutlined, {}) }) }), jsx(Button, { square: true, flat: true, onClick: () => handleRotate(90), children: jsx(Icon, { icon: jsx(RotateRightRound, {}) }) }), jsx(Button, { square: true, flat: true, onClick: () => handleRotate(-90), children: jsx(Icon, { icon: jsx(RotateLeftRound, {}) }) }), files.length > 1 && (jsxs(Fragment, { children: [jsx(Button, { square: true, flat: true, onClick: () => handleSwitch(state.current - 1), children: jsx(Icon, { icon: jsx(KeyboardArrowLeftRound, {}) }) }), jsx(Button, { square: true, flat: true, onClick: () => handleSwitch(state.current + 1), children: jsx(Icon, { icon: jsx(KeyboardArrowRightRound, {}) }) })] }))] })] }));
+}
+
+function usePreview() {
+    const ref = useRef(null);
+    const preview = (config) => {
+        const { items, modalProps, onClose, ...restProps } = config;
+        const handleClose = () => {
+            onClose?.();
+            unMount?.();
+        };
+        const unMount = renderNode(jsx(HookModal, { ref: ref, visible: true, className: 'i-preview', customized: true, shadow: false, ...modalProps, children: jsx(Content, { ...restProps, items: items, onClose: () => {
+                    ref.current?.update({ visible: false });
+                } }), fixed: true, onClose: handleClose }));
+    };
+    return preview;
+}
+
+const Image = (props) => {
+    const { src, round, size, initSize, lazyload, fallback = (jsx(Icon, { icon: jsx(HideImageTwotone, {}), size: '2em', className: 'color-5' })), fit, style, className, children, usePreview: previewable, onLoad, onError, onClick, ...restProps } = props;
+    const state = useReactive({
+        status: "loading",
+    });
+    const ref = useRef(null);
+    const wh = fit ? "100%" : undefined;
+    const { observe, unobserve } = useIntersectionObserver();
+    const preview = usePreview();
+    const handleError = (err) => {
+        onError?.(err);
+        state.status = "error";
+    };
+    const handleLoad = (e) => {
+        onLoad?.(e);
+        state.status = undefined;
+    };
+    const handleClick = (e) => {
+        onClick?.(e);
+        previewable &&
+            src &&
+            preview({
+                items: [
+                    {
+                        src,
+                        type: TFileType.IMAGE,
+                    },
+                ],
+            });
+    };
+    useEffect(() => {
+        if (!src)
+            return;
+        state.status = "loading";
+        if (!lazyload || !ref.current)
+            return;
+        observe(ref.current, (tar, visible) => {
+            if (!visible)
+                return;
+            tar.setAttribute("src", tar.dataset.src || "");
+            unobserve(tar);
+        });
+        return () => {
+            ref.current && unobserve(ref.current);
+        };
+    }, [src]);
+    restProps[lazyload ? "data-src" : "src"] = src;
+    const iSize = state.status === "loading" ? initSize : undefined;
+    return (jsx("div", { style: {
+            width: size ?? iSize,
+            height: size ?? iSize,
+            ...style,
+        }, className: classNames("i-image", className, {
+            rounded: round,
+            [`i-image-${state.status}`]: state.status,
+        }), children: state.status === "error" ? (fallback) : (jsxs(Fragment, { children: [src && (jsx("img", { ref: ref, style: { objectFit: fit, width: wh, height: wh }, ...restProps, onLoad: handleLoad, onError: handleError, onClick: handleClick })), src && state.status === "loading" && jsx(Loading, {}), children && jsx("div", { className: 'i-image-text', children: children })] })) }));
+};
+
+function List(props) {
+    const { items = [], gap = 8, columns, wrap, direction, usePreview: previewable, onClick, ...restProps } = props;
+    const preview = usePreview();
+    const files = useMemo(() => {
+        return items.map((item) => {
+            const o = {
+                src: "",
+            };
+            if (typeof item === "string") {
+                o.src = item;
+            }
+            else {
+                Object.assign(o, item);
+            }
+            o.suffix = getSuffixByUrl(o.src) || "";
+            o.type = getFileType(o.suffix, item["type"]);
+            return o;
+        });
+    }, [items]);
+    const handleClick = (e, i) => {
+        onClick?.(e);
+        previewable &&
+            preview({
+                items: files,
+                initial: i,
+            });
+    };
+    if (!files.length)
+        return "";
+    return (jsx(Flex, { className: 'i-image-list', gap: gap, columns: columns, wrap: wrap, direction: direction, children: files.map((img, i) => {
+            return (jsx(Image, { src: img.src, size: 60, usePreview: false, onClick: (e) => handleClick(e, i), ...restProps }, i));
+        }) }));
+}
+
+Image.List = List;
+
+const AlignMap = {
+    left: "flex-start",
+    center: "center",
+    right: "flex-end",
+};
+const GlobalConfig = {
+    align: "center",
+    offset: "12px",
+    gap: 12,
+    max: 0,
+};
+const ItemDefaultConfig = {
+    duration: 3000,
+    closable: true,
+    active: false,
+};
+const container = createContainer();
+const handler = {
+    callout(item) { },
+    close() { },
+};
+const queue = {
+    left: [],
+    center: [],
+    right: [],
+};
+const heights = {
+    left: [],
+    center: [],
+    right: [],
+};
+createRoot(container).render(jsx(Messages, {}));
+const MessageItem = forwardRef(function ({ active, content, top, className, style, onClick }, ref) {
+    return (jsx("div", { ref: ref, className: classNames("i-message", className, {
+            "i-message-active": active,
+        }), style: {
+            ...style,
+            top,
+        }, onClick: onClick, children: content }));
+});
+function Messages() {
+    const ref = useRef(null);
+    const state = useReactive({
+        items: {
+            left: [],
+            center: [],
+            right: [],
+        },
+        tops: {
+            left: [],
+            center: [],
+            right: [],
+        },
+    });
+    const offsetTop = {
+        left: 0,
+        center: 0,
+        right: 0,
+    };
+    useEffect(() => {
+        Object.assign(handler, {
+            callout: function (item) {
+                const { align = "center", unshift, onShow } = item;
+                const size = queue[align][unshift ? "unshift" : "push"](item);
+                state.items[align] = [...queue[align]];
+                setTimeout(() => {
+                    const h = ref.current?.offsetHeight || 0;
+                    queue[align][unshift ? 0 : size - 1].active = true;
+                    state.items[align] = [...queue[align]];
+                    heights[align][unshift ? "unshift" : "push"](h);
+                    state.tops[align] = [...heights[align]];
+                    onShow?.();
+                }, 0);
+                item.duration !== 0 &&
+                    setTimeout(this.close.bind(item), item.duration);
+            },
+            close: function () {
+                const item = this;
+                const { align = "center", onHide } = item;
+                const index = queue[align].findIndex((i) => i.id === item.id);
+                if (index < 0)
+                    return;
+                queue[align][index].active = false;
+                state.items[align] = [...queue[align]];
+                item.timer = setTimeout(() => {
+                    const index = queue[align].findIndex((i) => i.id === item.id);
+                    queue[align].splice(index, 1);
+                    heights[align].splice(index, 1);
+                    state.tops[align] = [...heights[align]];
+                    state.items[align] = [...queue[align]];
+                    item.timer && clearTimeout(item.timer);
+                    onHide?.();
+                }, 240);
+            },
+        });
+    }, []);
+    const renderItems = (item, i) => {
+        if (!item)
+            return jsx(Fragment, {});
+        const { id, active, content, align = "center", className } = item;
+        offsetTop[align] += state.tops[align][i - 1] || 0;
+        const top = GlobalConfig.gap * i + offsetTop[align];
+        return (jsx(MessageItem, { ref: ref, active: active, content: content, top: top, className: className, style: { alignSelf: AlignMap[align] }, onClick: handler.close.bind(item) }, id));
+    };
+    return (jsxs("div", { className: 'i-messages', children: [state.items.left.map(renderItems), state.items.center.map(renderItems), state.items.right.map(renderItems)] }));
+}
+function message(config) {
+    if (["string", "number"].includes(typeof config) ||
+        isValidElement(config)) {
+        config = { content: config };
+    }
+    config = Object.assign({ id: uid(7) }, ItemDefaultConfig, config);
+    handler.callout(config);
+    return handler.close.bind(config);
+}
+function createContainer(direction) {
+    const container = document.createElement("div");
+    container.dataset.id = "messages";
+    document.body.append(container);
+    return container;
+}
+
+function useModal() {
+    const ref = useRef(null);
+    const handleOpen = (props) => {
+        const unMount = renderNode(jsx(HookModal, { ref: ref, visible: true, ...props, onClose: () => {
+                props.onClose?.();
+                unMount?.();
+            } }));
+    };
+    const handleUpdate = (props) => {
+        if (!ref.current)
+            return;
+        const { update } = ref.current;
+        update(props);
+    };
+    return {
+        open: handleOpen,
+        update: handleUpdate,
+    };
+}
+
+Modal.useModal = useModal;
+
+const Page = (props) => {
+    const { page, active, children, onChange } = props;
+    const [loading, setLoading] = useState(false);
+    const handleClick = async () => {
+        if (active || loading)
+            return;
+        setLoading(true);
+        await onChange?.(page);
+        setLoading(false);
+    };
+    return (jsxs("a", { className: classNames("i-page", {
+            "i-page-active": active,
+            "i-page-loading": loading,
+            "i-page-disabled": false,
+        }), "data-page": page, onClick: handleClick, children: [loading && jsx(Loading, {}), children] }));
+};
+
+const Pagination = (props) => {
+    const { page: defaultPage = 1, size = 10, total = 0, sibling = 2, prev = jsx(Icon, { icon: jsx(KeyboardArrowLeftRound, {}) }), next = jsx(Icon, { icon: jsx(KeyboardArrowRightRound, {}) }), simple, jumper, className, renderEllipsis = () => (jsx(Icon, { icon: jsx(MoreHorizRound, {}), className: 'color-7' })), renderPage = (i) => i, onChange, ...restProps } = props;
+    const [page, setPage] = useState(defaultPage);
+    const [loading, setLoading] = useState(false);
+    const totalPage = useMemo(() => Math.ceil(total / size), [size, total]);
+    const [start, end, loop] = useMemo(() => {
+        const start = Math.max(1, page - sibling);
+        const end = Math.min(totalPage, page + sibling);
+        return [
+            start,
+            end,
+            Array.from({ length: end - start + 1 }).map((n, i) => start + i),
+        ];
+    }, [page, totalPage, sibling]);
+    if (totalPage <= page && page === 1)
+        return jsx(Fragment, {});
+    const handlePageChange = async (p) => {
+        if (!onChange || loading)
+            return;
+        setLoading(true);
+        return new Promise(async (resolve) => {
+            if (p === undefined)
+                return;
+            await onChange(p);
+            setPage(p);
+            setLoading(false);
+            resolve();
+        });
+    };
+    useEffect(() => setPage(defaultPage), [defaultPage]);
+    return (jsxs("div", { className: classNames("i-pagination", className), ...restProps, children: [prev && (jsx(Page, { page: page - 1 || 1, onChange: handlePageChange, children: prev })), start > 1 && (jsx(Page, { page: 1, onChange: handlePageChange, children: renderPage(1) })), start > 2 && renderEllipsis(), loop.map((p) => {
+                return (jsx(Page, { page: p, active: p === page, onChange: handlePageChange, children: renderPage(p) }, p));
+            }), end < totalPage - 1 && renderEllipsis(), end < totalPage && (jsx(Page, { page: totalPage, onChange: handlePageChange, children: renderPage(totalPage) })), next && (jsx(Page, { page: page + 1, onChange: handlePageChange, children: next }))] }));
+};
+
+const defaultOk = {
+    children: "确定",
+};
+const defaultCancel = {
+    children: "取消",
+    secondary: true,
+};
+const Popconfirm = (props) => {
+    const { trigger = "click", visible, icon = jsx(Icon, { icon: jsx(InfoOutlined, {}), className: 'error' }), content, okButtonProps, cancelButtonProps, children, align = "end", position = "top", offset = 12, extra, onOk, onClose, ...restProps } = props;
+    const state = useReactive({
+        loading: false,
+        visible,
+    });
+    const ok = okButtonProps
+        ? Object.assign({}, defaultOk, okButtonProps)
+        : defaultOk;
+    const cancel = cancelButtonProps
+        ? Object.assign({}, defaultCancel, cancelButtonProps)
+        : defaultCancel;
+    const handleVisibleChange = (v) => {
+        state.visible = v;
+        restProps.onVisibleChange?.(v);
+    };
+    const handleOk = async (e) => {
+        state.loading = true;
+        ok.onClick?.(e);
+        await onOk?.();
+        state.loading = false;
+        state.visible = false;
+    };
+    const handleCancel = async (e) => {
+        cancel.onClick?.(e);
+        await onClose?.();
+        state.visible = false;
+    };
+    const popconfirmContent = (jsxs("div", { className: 'i-popconfirm', children: [jsxs(Flex, { gap: 12, children: [icon, jsx("div", { className: 'i-popconfirm-content', children: content })] }), jsxs(Flex, { gap: 12, justify: 'flex-end', className: 'mt-8 i-popconfirm-footer', children: [cancelButtonProps !== null && (jsx(Button, { ...cancel, onClick: handleCancel })), extra, okButtonProps !== null && (jsx(Button, { loading: state.loading, ...ok, onClick: handleOk }))] })] }));
+    return (jsx(Popup, { content: popconfirmContent, ...restProps, trigger: trigger, visible: state.visible, align: align, offset: offset, position: position, onVisibleChange: handleVisibleChange, children: children }));
+};
+
+function RadioItem(props) {
+    const { type = "default", name, value, checked, disabled, children, onChange, } = props;
+    const handleChange = (e) => {
+        onChange?.(value, e);
+    };
+    return (jsxs("label", { className: classNames("i-radio-item", { disabled }), children: [jsx("input", { type: 'radio', name: name, checked: checked, className: classNames("i-radio-input", `i-radio-${type}`), disabled: disabled, onChange: handleChange }), jsx("span", { className: 'i-radio-text', children: children })] }));
+}
+
+function Radio(props) {
+    const { label, name, options, value, type = "default", status = "normal", message, optionInline = true, labelInline, disabled, required, className, onChange, } = props;
+    const state = useReactive({
+        value,
+    });
+    const formattedOptions = useMemo(() => formatOption(options), [options]);
+    const handleChange = useMemoizedFn((value, e) => {
+        state.value = value;
+        onChange?.(value, e);
+    });
+    useEffect(() => {
+        state.value = value;
+    }, [value]);
+    return (jsxs("div", { className: classNames("i-radio i-input-label", {
+            [`i-radio-${status}`]: status !== "normal",
+            "i-input-inline": labelInline,
+        }, className), children: [label && (jsxs("span", { className: 'i-input-label-text', children: [required && jsx("span", { className: 'error', children: "*" }), label, message && jsx("p", { className: 'i-radio-message', children: message })] })), jsx("div", { className: classNames("i-radio-options", {
+                    "i-options-block": !optionInline,
+                    "i-radio-options-button": type === "button",
+                }), children: formattedOptions.map((option) => (jsx(RadioItem, { name: name, value: option.value, checked: state.value === option.value, type: type, disabled: disabled || option.disabled, onChange: handleChange, children: option.label }, option.value))) })] }));
+}
+Radio.Item = RadioItem;
+
+const Tag = (props) => {
+    const { dot, dotClass, outline, round, size = "normal", className, children, onClose, onClick, ...restProps } = props;
+    return (jsxs("span", { className: classNames("i-tag", {
+            "i-tag-outline": outline,
+            "i-tag-clickable": onClick,
+            [`i-tag-${size}`]: size !== "normal",
+            round,
+        }, className), onClick: onClick, ...restProps, children: [dot && jsx("span", { className: classNames("i-tag-dot", dotClass) }), children, onClose && (jsx(Helpericon, { active: true, className: 'i-tag-close', onClick: onClose }))] }));
+};
+
+const Options = (props) => {
+    const { value: val, options, filter, filterPlaceholder, multiple, empty = jsx(Empty, {}), onSelect, onFilter, } = props;
+    return (jsxs("div", { className: classNames("i-select-options", {
+            "i-select-options-multiple": multiple,
+        }), children: [filter && multiple && (jsxs("div", { className: 'i-select-filter', children: [jsx(Icon, { icon: jsx(SearchRound, {}), className: 'color-8 ml-8 my-auto', size: '1.2em' }), jsx("input", { type: 'text', className: 'i-input', placeholder: filterPlaceholder, onChange: onFilter })] })), options.length === 0 && empty, options.map((option, i) => {
+                const { label, value, disabled } = option;
+                const isActive = multiple
+                    ? val?.includes(value)
+                    : val === value;
+                return (jsxs(List$1.Item, { active: isActive, type: 'option', onClick: () => onSelect?.(value, option), disabled: disabled, children: [multiple && (jsx(Icon, { icon: jsx(CheckRound, {}), className: 'i-select-option-check', size: '1em' })), label] }, value || i));
+            })] }));
+};
+const activeOptions = (options = [], value = [], max = 3) => {
+    const total = options.flatMap((opt) => value.includes(opt.value) ? [opt] : []);
+    if (max >= total.length)
+        return total;
+    const rest = total.length - max;
+    const after = total.slice(0, max);
+    after.push(rest);
+    return after;
+};
+const displayValue = (config) => {
+    const { options, value, maxDisplay, multiple, onSelect } = config;
+    if (multiple) {
+        return activeOptions(options, value, maxDisplay).map((opt, i) => {
+            if (typeof opt === "number")
+                return jsxs(Tag, { children: ["+", opt] }, i);
+            const { label, value } = opt;
+            return (jsx(Tag, { onClose: (e) => {
+                    e?.stopPropagation();
+                    onSelect?.(value, opt);
+                }, children: label }, value));
+        });
+    }
+    return options.find((opt) => opt.value === value)?.label;
+};
+
+const Select = forwardRef((props, ref) => {
+    const { type = "text", name, label, value = "", placeholder, options = [], multiple, prepend, append, labelInline, style, className, message, status = "normal", hideClear, maxDisplay, border, filter, tip, filterPlaceholder = "...", popupProps, onSelect, onChange, ...restProps } = props;
+    const state = useReactive({
+        inputValue: "",
+        filterValue: "",
+        value,
+        loading: false,
+    });
+    const [active, setActive] = useState(false);
+    const formattedOptions = useMemo(() => formatOption(options), [options]);
+    const filterOptions = useMemo(() => {
+        const { filterValue: fv } = state;
+        if (!fv || !filter)
+            return formattedOptions;
+        const filterFn = typeof filter === "function"
+            ? filter
+            : (opt) => opt.value.includes(fv) || opt.label.includes(fv);
+        return formattedOptions.filter(filterFn);
+    }, [formattedOptions, filter, state.filterValue]);
+    const changeValue = (v) => {
+        state.value = v;
+        onChange?.(v);
+    };
+    const handleSelect = useCallback((value, option) => {
+        onSelect?.(value, option);
+        if (multiple) {
+            const values = [...state.value];
+            const i = values.findIndex((v) => v === value);
+            i > -1 ? values.splice(i, 1) : values.push(value);
+            changeValue(values);
+            return;
+        }
+        setActive(false);
+        changeValue(value);
+    }, []);
+    const handleVisibleChange = (visible) => {
+        setActive(visible);
+        if (!filter)
+            return;
+        state.filterValue = "";
+    };
+    const handleHelperClick = (e) => {
+        if (!active)
+            return;
+        changeValue(multiple ? [] : "");
+    };
+    const handleFilterChange = useMemoizedFn(debounce({ delay: 400 }, (e) => {
+        const v = e.target.value;
+        state.filterValue = v;
+    }));
+    const handleInputChange = (e) => {
+        state.filterValue = e.target.value;
+    };
+    useEffect(() => {
+        state.value = value;
+    }, [value]);
+    const hasValue = multiple
+        ? state.value.length > 0
+        : !!state.value;
+    const clearable = !hideClear && active && hasValue;
+    const text = message ?? tip;
+    return (jsxs("label", { className: classNames("i-input-label", className, {
+            "i-input-inline": labelInline,
+        }), style: style, children: [label && jsx("span", { className: 'i-input-label-text', children: label }), jsx(Popup, { position: 'bottom', arrow: false, fitSize: true, ...popupProps, visible: active, trigger: 'none', onVisibleChange: handleVisibleChange, content: jsx(Options, { options: filterOptions, value: state.value, multiple: multiple, filter: !!filter, filterPlaceholder: filterPlaceholder, onSelect: handleSelect, onFilter: handleFilterChange }), children: jsxs("div", { className: classNames("i-input-item", {
+                        [`i-input-${status}`]: status !== "normal",
+                        "i-input-borderless": !border,
+                        "i-input-focus": active,
+                    }), onClick: () => setActive(true), children: [prepend, jsx("input", { ref: ref, type: 'hidden', value: state.value, ...restProps }), multiple ? (hasValue ? (jsx("div", { className: classNames("i-input i-select", {
+                                "i-select-multiple": multiple,
+                            }), children: displayValue({
+                                options: formattedOptions,
+                                value: state.value,
+                                multiple,
+                                maxDisplay,
+                                onSelect: handleSelect,
+                            }) })) : (jsx("input", { className: 'i-input i-select', placeholder: placeholder, readOnly: true }))) : null, !multiple && (jsx("input", { value: active ? state.filterValue : state.value, className: 'i-input i-select', placeholder: state.value || placeholder, onChange: handleInputChange, readOnly: !filter })), jsx(Helpericon, { active: true, icon: clearable ? undefined : jsx(UnfoldMoreRound, {}), onClick: handleHelperClick }), append] }) }), text && jsx("span", { className: 'i-input-message', children: text })] }));
+});
+
+function Divider() {
+    return jsx("i", { className: 'i-step-divider' });
+}
+
+const STATUS = ["finished", "active", "pending"];
+function defaultRenderIcon(i, status) {
+    return (jsx("span", { className: 'i-step-item-index', children: status === "finished" ? (jsx(CheckRound, { style: { width: "1em", height: "1.5em" } })) : (i + 1) }));
+}
+function Item$2(props) {
+    const { index = 0, active = 0, renderIcon = defaultRenderIcon, title, vertical, line = jsx(Divider, {}), style, className, children, onClick, } = props;
+    const status = STATUS[index === active ? 1 : index < active ? 0 : 2];
+    const handleClick = () => {
+        onClick?.(index);
+    };
+    return (jsx("div", { style: style, className: classNames("i-step-item", `i-step-item-${status}`, className), onClick: handleClick, children: vertical ? (jsxs(Fragment, { children: [jsxs("div", { className: 'i-step-item-left', children: [renderIcon?.(index, status), line] }), jsxs("div", { className: 'i-step-item-right', children: [jsx("div", { className: 'i-step-item-title', children: title }), children && (jsx("div", { className: 'i-step-item-content', children: children }))] })] })) : (jsxs(Fragment, { children: [jsxs("div", { className: 'i-step-item-title', children: [renderIcon?.(index, status), jsx("span", { children: title }), line] }), children && (jsx("div", { className: 'i-step-item-content', children: children }))] })) }));
+}
+
+const Step = (props) => {
+    const { active = 0, vertical, renderIcon, line, style, className, children, onClick, } = props;
+    const steps = useMemo(() => {
+        const nodes = [];
+        let index = 0;
+        Children.map(children, (el) => {
+            if (!el || el.type !== Item$2)
+                return;
+            const { props: elProps } = el;
+            nodes.push({
+                ...el,
+                props: {
+                    renderIcon,
+                    line,
+                    onClick,
+                    ...elProps,
+                    vertical,
+                    active,
+                    index: index++,
+                },
+            });
+        });
+        return nodes;
+    }, [active, children]);
+    return (jsx("div", { className: classNames("i-step", { "i-step-vertical": vertical }, className), style: style, children: steps }));
+};
+Step.Item = Item$2;
+
+function Item$1(props) {
+    const { index = 0, active, type, transition, gap = 0, itemHeight, vertical, style, className, children, } = props;
+    const selfStyle = useMemo(() => {
+        if (type === "normal") {
+            return {
+                [vertical ? "paddingBlock" : "paddingInline"]: gap / 2,
+                height: itemHeight,
+            };
+        }
+        return {
+            transform: `translate(-${index * 100}%, 0)`,
+            transition,
+        };
+    }, [index, gap, itemHeight, vertical, type]);
+    return (jsx("div", { style: { ...style, ...selfStyle }, className: classNames("i-swiper-item", className, {
+            "i-swiper-active": active,
+        }), "data-index": index, children: children }));
+}
+
+const Swiper = forwardRef((props, ref) => {
+    const { type = "normal", initial = 0, display = 1, scroll = 1, loop = true, vertical, prev = jsx(Icon, { icon: jsx(KeyboardArrowLeftRound, {}), size: '2em' }), next = jsx(Icon, { icon: jsx(KeyboardArrowRightRound, {}), size: '2em' }), duration = 600, interval = 3000, autoplay, pauseOnHover, arrow = true, reverse, draggable, dragOffset = 40, gap = 0, itemHeight, indicator, style, className, children, renderIndicator, onBeforeSwipe, onAfterSwipe, } = props;
+    const listRef = useRef(null);
+    const timerRef = useRef(null);
+    const transition = `all ${duration / 1000}s`;
+    const state = useReactive({
+        current: initial,
+        swipable: true,
+        transition: type === "fade" ? "none" : transition,
+        dragStart: 0,
+        dragging: false,
+        initialized: false,
+    });
+    const items = useMemo(() => {
+        return Children.map(children, (node) => {
+            if (node.type !== Item$1)
+                return;
+            return node;
+        });
+    }, [children]);
+    const [displayItems, extra, size, total, listSize] = useMemo(() => {
+        const extra = type === "normal" && loop && items.length > display
+            ? display + 1
+            : 0;
+        let list = [];
+        if (extra <= 0) {
+            list = [...items];
+        }
+        else {
+            const head = items.slice(0, extra);
+            const tail = items.slice(-extra);
+            list = [...tail, ...items, ...head];
+        }
+        const listSize = `${(list.length / display) * 100}%`;
+        return [list, extra, items.length, list.length, listSize];
+    }, [display, loop, type, items]);
+    const offsetPercent = useMemo(() => (-100 * (state.current + extra)) / total, [state.current, total]);
+    const position = useMemo(() => {
+        if (size <= display || type === "fade")
+            return;
+        const offset = vertical
+            ? `0, ${offsetPercent}%`
+            : `${offsetPercent}%, 0`;
+        return `translate3d(${offset}, 0)`;
+    }, [offsetPercent, vertical, display, size, type]);
+    const trackStyle = useMemo(() => {
+        if (!vertical || !itemHeight)
+            return;
+        return {
+            height: itemHeight * display,
+        };
+    }, [vertical, itemHeight, display]);
+    const indicatorsLoop = useMemo(() => {
+        return Array.from({
+            length: Math.ceil((size - display) / scroll) + 1,
+        });
+    }, [loop, indicator]);
+    const clearTimer = () => {
+        clearTimeout(timerRef.current);
+        timerRef.current = null;
+    };
+    const swipeTo = useCallback((i) => {
+        if (!state.swipable || i === state.current)
+            return;
+        state.swipable = false;
+        onBeforeSwipe?.(state.current);
+        let reset = false;
+        let next = i;
+        const lastDisplay = size - display;
+        if (loop) {
+            if (i > lastDisplay) {
+                reset = true;
+                i = size;
+                next = 0;
+            }
+            else if (i < 0) {
+                reset = true;
+                i = -display;
+                next = lastDisplay;
+            }
+        }
+        else {
+            next = clamp(next, 0, lastDisplay);
+            i = next;
+        }
+        setTimeout(() => {
+            state.swipable = true;
+        }, duration + 32);
+        if (type === "fade") {
+            state.current = next;
+            onAfterSwipe?.(next);
+            return;
+        }
+        state.current = i;
+        if (!reset) {
+            if (autoplay) {
+                timerRef.current = setTimeout(swipeNext, interval);
+            }
+            setTimeout(() => {
+                onAfterSwipe?.(next);
+            }, duration + 12);
+            return;
+        }
+        setTimeout(() => {
+            state.transition = "none";
+            state.current = next;
+            onAfterSwipe?.(next);
+            if (autoplay) {
+                timerRef.current = setTimeout(swipeNext, interval);
+            }
+            setTimeout(() => {
+                state.transition = transition;
+            }, 60);
+        }, duration + 20);
+    }, [duration, autoplay]);
+    const swipeNext = () => {
+        swipeTo(reverse ? state.current - scroll : state.current + scroll);
+    };
+    const swipePrev = () => {
+        swipeTo(reverse ? state.current + scroll : state.current - scroll);
+    };
+    const handleMouseDown = useCallback((e) => {
+        if (!draggable || !state.swipable || type === "fade")
+            return;
+        e.stopPropagation();
+        Object.assign(state, {
+            dragStart: vertical ? e.clientY : e.clientX,
+            dragging: true,
+            transition: "none",
+        });
+    }, [draggable, vertical]);
+    const handleMouseMove = useCallback((e) => {
+        if (!state.dragging || !listRef.current)
+            return;
+        e.preventDefault();
+        const dragEnd = vertical ? e.clientY : e.clientX;
+        const offset = ((dragEnd - state.dragStart) * 61.8) /
+            listRef.current[vertical ? "offsetHeight" : "offsetWidth"] +
+            offsetPercent;
+        listRef.current.style.transform = `translate3d(${vertical ? `0, ${offset}%` : `${offset}%, 0`}, 0)`;
+    }, [vertical, listRef.current, offsetPercent]);
+    const handleMouseUp = useCallback((e) => {
+        if (!state.dragging || !listRef.current)
+            return;
+        const dragEnd = vertical ? e.clientY : e.clientX;
+        const part = listRef.current[vertical ? "offsetHeight" : "offsetWidth"] /
+            total;
+        const offset = (dragEnd - state.dragStart) * 0.618;
+        const absOffset = Math.abs(offset);
+        if (absOffset > dragOffset) {
+            const base = Math.floor(absOffset / part);
+            const mod = (absOffset % part) - dragOffset > 0 ? 1 : 0;
+            const p = base + mod;
+            let to = state.current + (offset > 0 ? -p : p);
+            swipeTo(to);
+        }
+        listRef.current.style.transform = position || "";
+        Object.assign(state, {
+            dragging: false,
+            transition,
+        });
+    }, [vertical, listRef.current, offsetPercent]);
+    const handleMouseOver = () => {
+        if (!pauseOnHover)
+            return;
+        clearTimer();
+    };
+    const handleMouseLeave = () => {
+        if (!pauseOnHover)
+            return;
+        clearTimer();
+        timerRef.current = setTimeout(swipeNext, interval);
+    };
+    useMouseMove(handleMouseMove);
+    useMouseUp(handleMouseUp);
+    useImperativeHandle(ref, () => ({
+        swipeTo,
+        swipeNext,
+        swipePrev,
+    }));
+    useEffect(() => {
+        if (!autoplay)
+            return;
+        timerRef.current = setTimeout(swipeNext, interval);
+        return () => {
+            clearTimeout(timerRef.current);
+            timerRef.current = null;
+        };
+    }, [autoplay, interval]);
+    return (jsxs("div", { style: style, className: classNames("i-swiper", {
+            "i-swiper-vertical": vertical,
+            "i-swiper-initialized": state.initialized,
+        }, className), children: [jsxs("div", { className: 'i-swiper-track', style: trackStyle, onMouseOver: handleMouseOver, onMouseLeave: handleMouseLeave, children: [jsx("div", { ref: listRef, className: classNames("i-swiper-list", {
+                            "i-swiper-fade": type === "fade",
+                        }), style: {
+                            [vertical ? "height" : "width"]: listSize,
+                            transform: position,
+                            transition: state.transition,
+                        }, onMouseDown: handleMouseDown, children: displayItems.map((item, i) => {
+                            const { props: itemProps } = item;
+                            return (jsx(Item$1, { index: i, active: i - extra === state.current, type: type, gap: gap, transition: transition, itemHeight: itemHeight, vertical: vertical, ...itemProps }, i));
+                        }) }), arrow && (jsxs(Fragment, { children: [jsx("a", { className: 'i-swiper-arrow i-swiper-prev', onClick: swipePrev, children: prev }), jsx("a", { className: 'i-swiper-arrow i-swiper-next', onClick: swipeNext, children: next })] }))] }), indicator && (jsx("div", { className: 'i-swiper-indicators', children: indicatorsLoop.map((whatever, i) => {
+                    return (jsx("a", { className: classNames("i-swiper-indicator", {
+                            "i-indicator-active": i ===
+                                Math[loop ? "floor" : "ceil"](((state.current + size) % size) /
+                                    scroll),
+                        }), onClick: () => swipeTo(i * scroll), children: renderIndicator?.(i) }, i));
+                }) }))] }));
+});
+Swiper.Item = Item$1;
+
+const Item = (props) => {
+    return jsx(Fragment, {});
+};
+
+const Tabs = forwardRef((props, ref) => {
+    const { active, tabs: items, type = "default", prepend, append, children, className, vertical, toggable, bar = true, hideMore, barClass, renderMore = () => (jsx(Button, { flat: true, square: true, size: 'small', children: jsx(Icon, { icon: jsx(MoreHorizRound, {}) }) })), onTabChange, ...rest } = props;
+    const navRefs = useRef([]);
+    const barRef = useRef(null);
+    const navsRef = useRef(null);
+    const state = useReactive({
+        active,
+        prevActive: undefined,
+        barStyle: {},
+        cachedTabs: [],
+        overflow: false,
+        more: [],
+        tabs: [],
+    });
+    const { observe, unobserve } = useIntersectionObserver();
+    const size = useSize(navsRef);
+    useEffect(() => {
+        if (!items) {
+            if (!children) {
+                state.tabs = [];
+                return;
+            }
+            state.tabs = Children.map(children, (node, i) => {
+                const { key, props: nodeProps } = node;
+                const { title, children, content, keepDOM } = nodeProps;
+                const cloned = children
+                    ? pick(children, ["props", "type", "$$typeof", "ref"])
+                    : content;
+                return {
+                    key: key || String(i),
+                    title,
+                    content: cloned,
+                    keepDOM,
+                };
+            });
+            return;
+        }
+        state.tabs = items.map((item, i) => {
+            if (["string", "number"].includes(typeof item)) {
+                return { key: item, title: item };
+            }
+            if (item.key === undefined) {
+                item.key = i;
+            }
+            return item;
+        });
+    }, [children, items]);
+    const add = (tab) => {
+        const { key } = tab;
+        const i = state.tabs.findIndex((t) => t.key === key);
+        if (i > -1) {
+            open(state.tabs[i].key ?? i);
+            return;
+        }
+        const l = state.tabs.length;
+        const tkey = tab.key ?? l;
+        state.tabs.push({ ...tab, key: tkey });
+        open(tkey);
+    };
+    const close = (key) => {
+        const i = state.tabs.findIndex((t) => t.key === key);
+        if (i < 0)
+            return;
+        state.tabs.splice(i, 1);
+        if (state.active !== key)
+            return;
+        const next = state.tabs[i] || state.tabs[i - 1];
+        open(state.prevActive ?? next?.key ?? "");
+    };
+    const open = (key) => {
+        if (key === state.active) {
+            if (!toggable)
+                return;
+            onTabChange?.(undefined, key);
+            state.active = undefined;
+            state.barStyle = {
+                height: 0,
+                width: 0,
+            };
+            return;
+        }
+        state.prevActive = state.active;
+        onTabChange?.(key, state.active);
+        state.active = key;
+    };
+    const handleMouseWheel = (e) => {
+        e.stopPropagation();
+        e.preventDefault();
+        if (vertical)
+            return;
+        navsRef.current?.scrollBy({
+            left: e.deltaY + e.deltaX,
+        });
+    };
+    useEffect(() => {
+        if (!size || hideMore)
+            return;
+        const { scrollHeight, scrollWidth } = navsRef.current;
+        const { width, height } = size;
+        state.overflow = scrollHeight > height || scrollWidth > width;
+        if (!state.overflow)
+            return;
+        navRefs.current.map((nav, i) => {
+            if (!nav)
+                return;
+            observe(nav, (tar, visible) => {
+                if (!state.tabs[i])
+                    return;
+                state.tabs[i].intersecting = visible;
+                state.more = state.tabs.filter((tab) => !tab.intersecting);
+            });
+        });
+    }, [size, hideMore, state.tabs.length]);
+    useEffect(() => {
+        if (!bar || type === "pane" || state.active === undefined) {
+            return;
+        }
+        const index = state.tabs.findIndex((tab) => tab.key === state.active);
+        setTimeout(() => {
+            const nav = navRefs.current[index];
+            if (!nav)
+                return;
+            if (state.tabs[index].keepDOM && state.active) {
+                const i = state.cachedTabs.findIndex((k) => k === state.active);
+                i < 0 && state.cachedTabs.unshift(state.active);
+            }
+            const { offsetHeight, offsetLeft, offsetTop, offsetWidth } = nav;
+            const isLine = type === "line";
+            state.barStyle = {
+                height: !vertical && isLine ? ".25em" : offsetHeight,
+                width: vertical && isLine ? ".25em" : offsetWidth,
+                transform: `translate(${offsetLeft}px, ${offsetTop}px)`,
+            };
+        }, 16);
+    }, [state.active, bar]);
+    useEffect(() => {
+        if (active === undefined || state.active === active)
+            return;
+        open(active);
+    }, [active]);
+    useEffect(() => {
+        if (hideMore)
+            return;
+        return () => {
+            navRefs.current?.map(unobserve);
+        };
+    }, [state.tabs.length]);
+    useEffect(() => {
+        if (!navsRef.current || vertical)
+            return;
+        navsRef.current.addEventListener("wheel", handleMouseWheel, {
+            passive: false,
+        });
+        return () => {
+            if (!navsRef.current)
+                return;
+            navsRef.current.removeEventListener("wheel", handleMouseWheel);
+        };
+    }, [navsRef.current]);
+    useImperativeHandle(ref, () => ({
+        open,
+        close,
+        add,
+        navs: navsRef,
+    }));
+    return (jsxs("div", { className: classNames("i-tabs", { flex: vertical, [`i-tabs-${type}`]: type !== "default" }, className), ...rest, children: [jsxs("div", { className: classNames("i-tab-navs-container", {
+                    "i-tab-navs-vertical": vertical,
+                }), children: [prepend, jsxs("div", { ref: navsRef, className: 'i-tab-navs', children: [state.tabs.map((tab, i) => {
+                                const { title, key = i, closable } = tab;
+                                return (jsxs("a", { ref: (ref) => (navRefs.current[i] =
+                                        ref), className: classNames("i-tab-nav", {
+                                        "i-tab-active": state.active === key,
+                                    }), onClick: () => open(key), children: [title, closable && (jsx(Helpericon, { as: 'i', active: true, className: 'i-tab-nav-close', onClick: (e) => {
+                                                e.stopPropagation();
+                                                close(key);
+                                            } }))] }, key));
+                            }), bar && (jsx("span", { ref: barRef, className: classNames("i-tab-navs-bar", barClass), style: state.barStyle }))] }), !hideMore && state.overflow && state.more.length > 0 && (jsx(Popup, { arrow: false, position: vertical ? "right" : "bottom", align: 'end', touchable: true, hideDelay: 500, content: jsx("div", { className: 'i-tabs-morelist pd-4', children: state.more.map((tab, i) => {
+                                const { key = i, title } = tab;
+                                const isActive = state.active === key;
+                                return (jsx("a", { className: classNames("i-tab-nav", {
+                                        "i-tab-active": isActive,
+                                    }), onClick: () => open(key), children: title }, key));
+                            }) }), children: renderMore(state.more) })), append] }), jsx("div", { className: 'i-tab-contents', children: state.tabs.map((tab, i) => {
+                    const { key = i, content } = tab;
+                    const isActive = state.active === key;
+                    const show = isActive ||
+                        (key !== undefined && state.cachedTabs.includes(key));
+                    return (show && (jsx("div", { className: classNames("i-tab-content", {
+                            "i-tab-active": isActive,
+                        }), children: content }, key)));
+                }) })] }));
+});
+Tabs.Item = Item;
+
+function TreeList(props) {
+    const { data = [], depth = 0, round, style, className, parent, nodeProps, ...restProps } = props;
+    const contents = data.map((item, i) => {
+        const { type } = item;
+        const title = item[nodeProps.title];
+        const itemKey = item[nodeProps.key] ||
+            (parent?.key !== undefined ? `${parent.key}-${i}` : `${i}`);
+        item.key = itemKey;
+        item.parent = parent;
+        if (type === "title") {
+            return (jsx("div", { className: 'i-tree-group-title', children: title }, i));
+        }
+        if (type && type !== "item") {
+            return (jsx("div", { className: `i-tree-type-${type}`, children: title }, i));
+        }
+        return (jsx(TreeItem, { index: i, item: item, depth: depth, nodeProps: nodeProps, ...restProps }, itemKey));
+    });
+    if (depth > 0)
+        return jsx(Fragment, { children: contents });
+    return (jsx("div", { className: classNames("i-tree", className, {
+            "i-tree-round": round,
+        }), style: style, children: contents }));
+}
+const Header = (props) => {
+    const { as: Tag = "a", href, selected, children, ...restProps } = props;
+    const className = classNames("i-tree-item-header", {
+        "i-tree-item-selected": selected,
+    });
+    if (typeof Tag === "string") {
+        return (jsx(Tag, { href: href, className: className, ...restProps, children: children }));
+    }
+    return (jsx(Tag, { to: href || "", className: className, ...restProps, children: children }));
+};
+const TreeItem = (props) => {
+    const { item, depth = 0, index, selected, checked = [], partofs = {}, checkable, nodeProps, renderExtra, onItemClick, onItemSelect, onItemCheck, ...restProps } = props;
+    const { as, key = "", href, icon, title, expanded, disabled } = item;
+    const children = item[nodeProps.children];
+    const [expand, setExpand] = useState(expanded);
+    const handleExpand = useMemoizedFn((e, fromToggle) => {
+        if (fromToggle) {
+            e.preventDefault();
+            e.stopPropagation();
+        }
+        if (disabled || !children?.length)
+            return;
+        setExpand((v) => !v);
+    });
+    const handleItemClick = useMemoizedFn((e) => {
+        if (disabled) {
+            e.preventDefault();
+            e.stopPropagation();
+            return;
+        }
+        handleExpand(e);
+        onItemClick?.(item, e);
+        onItemSelect?.(key, item);
+    });
+    const handleItemCheck = (checked) => onItemCheck?.(item, checked, []);
+    const itemChecked = checked.includes(key);
+    return (jsxs("div", { className: classNames("i-tree-item", {
+            "i-tree-expand": expand,
+        }), children: [jsxs(Header, { as: as, href: href, style: { paddingLeft: `${depth * 1.5 + 0.5}em` }, selected: selected === key, onClick: handleItemClick, children: [checkable && (jsx(Checkbox.Item, { value: itemChecked, partof: !itemChecked && partofs[key], className: 'i-tree-checkbox', onChange: handleItemCheck, onClick: (e) => e.stopPropagation() })), icon && jsx("span", { className: 'i-tree-item-icon', children: icon }), jsx("span", { className: 'i-tree-item-title', children: title }), renderExtra?.(item), children && (jsx(Icon, { icon: jsx(KeyboardArrowDownRound, {}), className: 'i-tree-toggle', onClick: (e) => handleExpand(e, true) }))] }), children?.length && (jsx("div", { className: 'i-tree-item-content', children: jsx(TreeList, { data: children, depth: depth + 1, selected: selected, checkable: checkable, parent: item, partofs: partofs, checked: checked, nodeProps: nodeProps, renderExtra: renderExtra, onItemClick: onItemClick, onItemSelect: onItemSelect, onItemCheck: onItemCheck, ...restProps }) }))] }));
+};
+
+const defaultNodeProps = {
+    key: "key",
+    title: "title",
+    children: "children",
+};
+const Tree = forwardRef((props, ref) => {
+    const { data = [], selected, checked = [], disabledRelated, nodeProps, onItemSelect, onItemCheck, ...restProps } = props;
+    const state = useReactive({
+        selected,
+        checked,
+        partofs: {},
+        nodeMaps: new Map(),
+    });
+    const oNodeProps = Object.assign({}, defaultNodeProps, nodeProps);
+    const isChecked = (key) => state.checked.includes(key || "");
+    const checkItem = useMemoizedFn((item, checked, direction) => {
+        const { key = "", parent, children } = item;
+        const shouldChanged = { [key]: checked };
+        const partofs = { [key]: false };
+        if (disabledRelated)
+            return [shouldChanged];
+        if (checked) {
+            if (parent && direction !== "leaf") {
+                const hasUnchecked = parent.children?.some((o) => o.key !== key && !isChecked(o.key));
+                const [changes, parts] = checkItem(parent, true, "root");
+                if (!hasUnchecked) {
+                    Object.assign(shouldChanged, changes);
+                }
+                Object.assign(partofs, hasUnchecked ? parts : {}, {
+                    [parent.key]: true,
+                });
+            }
+            if (children?.length && direction !== "root") {
+                children.map((o) => {
+                    if (isChecked(o.key))
+                        return;
+                    const [changes] = checkItem(o, true, "leaf");
+                    Object.assign(shouldChanged, changes);
+                    partofs[o.key] = false;
+                });
+            }
+            return [shouldChanged, partofs];
+        }
+        if (parent && direction !== "leaf") {
+            const [changes, parts] = checkItem(parent, false, "root");
+            Object.assign(shouldChanged, changes);
+            const hasChecked = parent.children?.some((o) => isChecked(o.key) && o.key !== key);
+            Object.assign(partofs, hasChecked ? {} : parts, {
+                [parent.key]: hasChecked,
+                [key]: false,
+            });
+        }
+        if (children?.length && direction !== "root") {
+            children.map((o) => {
+                const [changes] = checkItem(o, false, "leaf");
+                if (!isChecked(o.key))
+                    return;
+                Object.assign(shouldChanged, changes);
+                partofs[o.key] = false;
+            });
+        }
+        return [shouldChanged, partofs];
+    });
+    const handleCheck = (item, checked) => {
+        const [shouldChanged, partofs] = checkItem(item, checked);
+        const changedKeys = Object.keys(shouldChanged);
+        state.checked = checked
+            ? Array.from(new Set([...state.checked, ...changedKeys]))
+            : state.checked.filter((k) => !changedKeys.includes(k));
+        Object.assign(state.partofs, partofs);
+        onItemCheck?.(item, checked, state.checked);
+    };
+    const handleSelect = (key, item) => {
+        if (!props.selectable)
+            return;
+        state.selected = key;
+        onItemSelect?.(key, item);
+    };
+    useEffect(() => {
+        if (selected === undefined)
+            return;
+        state.selected = selected;
+    }, [selected]);
+    useEffect(() => {
+        state.nodeMaps.clear();
+        const { key, children } = oNodeProps;
+        const recursive = (nodes) => {
+            nodes.map((o) => {
+                state.nodeMaps.set(o[key], o);
+                o[children]?.length > 0 && recursive(o[children]);
+            });
+        };
+        recursive(data);
+    }, [data]);
+    useImperativeHandle(ref, () => {
+        return {
+            getChecked: () => {
+                const items = [];
+                state.checked.map((k) => {
+                    const item = state.nodeMaps.get(k);
+                    items.push(item);
+                });
+                return [state.checked, items];
+            },
+            getSelected: () => {
+                const item = state.nodeMaps.get(state.selected);
+                return [state.selected, item];
+            },
+            getPartofs: () => {
+                const items = [];
+                const keys = Object.keys(state.partofs).filter((k) => {
+                    const indeterminate = state.partofs[k];
+                    if (indeterminate) {
+                        const item = state.nodeMaps.get(k);
+                        items.push(item);
+                    }
+                    return indeterminate;
+                });
+                return [keys, items];
+            },
+        };
+    });
+    return (jsx(TreeList, { data: data, selected: state.selected, checked: state.checked, partofs: state.partofs, nodeProps: oNodeProps, onItemCheck: handleCheck, onItemSelect: handleSelect, ...restProps }));
+});
+
+function RenderFile(props) {
+    const { mode, index, file, onRemove, onPreview } = props;
+    if (!file)
+        return "";
+    const { name, size, url, src } = file;
+    const type = getFileType(name, file.type);
+    const CloseBtn = (jsx(Helpericon, { active: true, className: 'i-upload-delete', onClick: (e) => {
+            e.stopPropagation();
+            e.preventDefault();
+            onRemove(index);
+        } }));
+    switch (mode) {
+        case "card":
+            let node = jsx(Fragment, {});
+            switch (type) {
+                case TFileType.IMAGE:
+                    node = (jsx(Image, { lazyload: true, src: url || src, fit: 'cover', usePreview: false }));
+                    break;
+                case TFileType.VIDEO:
+                    node = jsx("video", { src: url || src, preload: 'none' });
+                    break;
+                default:
+                    node = (jsxs(Fragment, { children: [jsx(Icon, { icon: jsx(ListAltRound, {}) }), jsx("span", { className: 'i-upload-file-name', children: title(name) })] }));
+                    break;
+            }
+            return (jsxs("div", { title: name, className: 'i-upload-item-card', onClick: () => onPreview?.(index), children: [node, CloseBtn] }));
+        default:
+            return (jsxs("div", { className: 'i-upload-item', onClick: () => onPreview?.(index), children: [jsx("span", { children: name }), jsx("i", { className: 'i-upload-size', children: formatBytes(size ?? 0) }), CloseBtn] }));
+    }
+}
+
+const Upload = forwardRef((props, ref) => {
+    const { label, labelInline, value, files = [], placeholder, status = "normal", message, className, style, children, mode = "default", cardSize = "4em", disabled, limit = props.multiple ? Infinity : 1, multiple, renderItem = RenderFile, shouldUpload = () => true, uploader, onChange, onFilesChange, onUpload, ...restProps } = props;
+    const state = useReactive({
+        files,
+        value,
+        status,
+        message,
+        update: 0,
+    });
+    const inputRef = useRef(null);
+    const preview = usePreview();
+    const trigger = useMemo(() => {
+        if (children)
+            return children;
+        switch (mode) {
+            case "card":
+                return (jsx(Button, { className: 'i-upload-card-btn color-5', square: true, flat: true, outline: true, disabled: disabled, children: jsx(Icon, { icon: jsx(PlusSharp, {}) }) }));
+            default:
+                return (jsxs(Button, { className: 'i-upload-btn', disabled: disabled, children: [jsx(Icon, { icon: jsx(CloudUploadTwotone, {}) }), " Upload"] }));
+        }
+    }, [mode, children]);
+    const handleChange = (e) => {
+        const files = Array.from(e.target.files || []);
+        const { files: before } = state;
+        const changed = [];
+        files.map((f) => {
+            const { name, size, type } = f;
+            const same = before.find((pf) => {
+                const { name: n, size: s, type: t } = pf;
+                return n === name && s === size && t === type;
+            });
+            const src = URL.createObjectURL(f);
+            f.src = src;
+            state.update += 1;
+            Object.assign(f, {
+                uid: uid(7),
+                src: f.src || f.name,
+            });
+            !same && changed.push(f);
+        });
+        const after = [...before, ...changed];
+        Object.assign(state, {
+            files: multiple ? after.slice(0, limit) : [after.at(-1)],
+            status,
+            message,
+        });
+        onFilesChange?.(state.files, changed, e);
+        onChange?.(state.files, e);
+        handleUpload(changed);
+        inputRef.current && (inputRef.current.value = "");
+    };
+    const handleRemove = (i) => {
+        const [...files] = state.files;
+        const changed = files.splice(i, 1);
+        URL.revokeObjectURL(changed[0]?.src || "");
+        state.files = files;
+        onFilesChange?.(files, changed);
+        onChange?.(files);
+        inputRef.current && (inputRef.current.value = "");
+    };
+    const handleUpload = async (files) => {
+        if (!uploader)
+            return;
+        files.forEach(async (file) => {
+            if (!shouldUpload(file))
+                return;
+            const result = await uploader(file);
+            const i = state.files.findIndex((f) => f.uid === result.uid);
+            i > -1 && (state.files[i] = result);
+            result?.status === "completed" && onUpload?.(result);
+        });
+    };
+    const handlePreview = (i) => {
+        preview({ items: state.files, initial: i });
+    };
+    useEffect(() => {
+        Object.assign(state, {
+            status,
+            message,
+        });
+    }, [status, message]);
+    useEffect(() => {
+        state.value = value;
+    }, [value]);
+    useImperativeHandle(ref, () => ({
+        getFileList: () => state.files,
+    }), []);
+    const { message: msg, files: currentFiles } = state;
+    return (jsxs(InputContainer, { label: label, labelInline: labelInline, className: classNames("i-input-label-file", className), style: style, children: [jsx("input", { ...restProps, disabled: disabled, ref: inputRef, type: 'file', className: 'i-input-file-hidden', multiple: multiple, onChange: handleChange }), jsxs("div", { className: classNames("i-upload-inner", {
+                    [`i-upload-${mode}`]: mode !== "default",
+                }), style: { ["--upload-card-size"]: cardSize }, children: [jsx("div", { className: 'i-upload-list', onClick: (e) => {
+                            e.stopPropagation();
+                            e.preventDefault();
+                        }, children: currentFiles?.map((file, i) => (jsx(Fragment$1, { children: RenderFile({
+                                index: i,
+                                file,
+                                mode,
+                                onRemove: handleRemove,
+                                onPreview: handlePreview,
+                            }) }, i))) }), msg && jsx("span", { className: 'i-upload-message', children: msg }), currentFiles.length < limit && trigger] })] }));
+});
+
+export { Affix, Badge, Button, Card, Checkbox, Collapse, Datagrid, Datepicker, Description, Drawer, Dropdown, Flex, Form, Icon, Image, Input, List$1 as List, Loading, message as Message, Modal, Pagination, Popconfirm, Popup, Progress, Radio, Select, Step, Swiper, Tabs, Tag, Text, Tree, Upload, Video, usePreview };
 //# sourceMappingURL=index.js.map