@para-ui/core 5.0.0-beta.12 → 5.0.0-beta.13

package/lib/Table/index.js

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});require('./index.css');const w=require("../_virtual/jsx-runtime.js"),o=require("react"),Q=require("@snack-kit/lib"),be=require("../Utils/snack-kit-shims.js"),S=require("./util.js"),Hr=require("./tableHead.js"),Or=require("./tableBody.js"),Lr=require("./tablePagination.js"),zr=require("./tableContainer/index.js"),Pr=require("./tableElement/index.js"),_r=require("../Loading/index.js"),Wr=require("../Hooks/useGlobalProps.js"),m=require("../GlobalContext/constant.js"),Vr=require("../GlobalContext/useFormatMessage.js"),Jr=require("./lang/index.js"),Ir=require("../ScrollBar/index.js");;/* empty css            */const Br=require("../Utils/Hooks/useResizeObserver.js"),Kr=Lt=>{const s=Wr.default(Lt,"Table");be.GetBrowserClass()==="ie"&&(s.fixedColumn=!1);const{className:ze,style:zt,url:y,ctx:xe,emptyProps:Pe,method:H="Get",data:Ce,page:Pt=1,size:O=10,sizeArr:L=[10,20,50,100],search:_e,pagination:$=!0,paginationType:We="complex",flippingArrow:Ve,autoPagination:Je=!0,tableCell:Ie,requestCallback:Be,checkDefaultValue:X,setCheck:Se,radioDefaultValue:Y,setRadio:ye,refresh:_t,disabledArr:Z,disabledArrStatus:Ke,headData:Ue=[],sortTableRadio:Ge,sortTable:ee=!1,filter:Qe=!1,expandable:N,rowKey:k="key",check:z=!1,radio:P=!1,checkRememberPage:Wt=!1,align:te="left",paramsCallback:re,operate:ne,showColumns:q="inside",fixedTable:_=!0,fixedColumn:A=!0,dragColumn:De=!0,dragRow:W,formatter:Xe,lineHeight:V=48,lineWidth:ae=80,autoSize:Ye=!0,loadMore:D=!1,loadMoreRender:Ze,onClickMore:et,expandValue:tt,expandMultiple:rt,disabledExpand:nt,onExpand:at,defaultExpandAllRows:st=!1,onClickColumns:Te,beyondText:se=!0,tipMaxWidth:oe=500,loading:Re,defaultSortValue:ot,defaultFilterValue:Vt,searchKeyName:Jt,filterSearchCallback:It,onClickRow:lt,rowClassMapping:it,getPopupContainer:ct,onSort:we,onError:Bt,refreshInside:ut=!!s.url,checkCount:ft=!!s.check,onDragRow:dt,virtual:Ne=!1,columnsInfoEvent:ht,onRefreshCallback:le}=s,Kt=Vr.default("Table",Jr.default),mt=s.expirationTime?s.expirationTime===0?1e8:s.expirationTime:7,[J,gt]=o.useState(s.page!==void 0?s.page:1),[I,Ut]=o.useState(null),[pt,Gt]=o.useState(L),[ie,ke]=o.useState(0),[C,ve]=o.useState([]),[Qt,bt]=o.useState({}),[v,xt]=o.useState({}),[g,Xt]=o.useState(Object.values(ot||{})),[b,Yt]=o.useState(Object.keys(ot||{})),[ce,B]=o.useState("not"),[x,Ee]=o.useState({}),[je,Zt]=o.useState(),[E,er]=o.useState({}),[tr,rr]=o.useState({}),[K,nr]=o.useState([]),[U,Ct]=o.useState([]),[j,ar]=o.useState({...Vt}),[ue,F]=o.useState(!0),[St,sr]=o.useState(!1),Me=o.useRef(""),[or,M]=o.useState(),[lr,ir]=o.useState(0),[fe,cr]=o.useState({}),[yt,$e]=o.useState({}),[de,Dt]=o.useState(!1),[Tt,Rt]=o.useState([0,0]),[ur,wt]=o.useState(0),[Nt,fr]=o.useState(),h=o.useRef(null),qe=o.useRef(null),G=o.useRef(null),a=o.useRef({page:s.page!==void 0?s.page:1,headDataConfig:{}});Br.default({dom:qe.current,cb:()=>$r()}),a.current.loadMoreUrl=D&&y,a.current.search=_e,a.current.url=y,a.current.orderTypeArr=g,a.current.orderFieldArr=b,a.current.selectFilterCom=j,a.current.data=Ce,a.current.searchKeyName=Jt,a.current.filterSearchCallback=It,a.current.onError=Bt,a.current.sizeCom=I,a.current.virtual=Ne,a.current.expandable=N,o.useEffect(()=>()=>{a.current.isDestroy=!0,clearTimeout(a.current.reqTimer),clearTimeout(a.current.loadingTimer),Q.Cancel(Me.current)},[]),o.useEffect(()=>{Re!==void 0&&(clearTimeout(a.current.loadingTimer),a.current.loadingTimer=setTimeout(()=>{F(Re)},50))},[Re]),o.useEffect(()=>{sr(!!(D&&y))},[D,y]),o.useEffect(()=>{s.page!==void 0&&T(s.page)},[Pt]),o.useEffect(()=>{if(!Ye)return he(O);if(s.size)he(O);else if(h&&h.current){const e=kt();L.indexOf(e)===-1&&(L.unshift(e),L.sort((t,r)=>t-r),Gt([...L])),he(e)}},[O,Ye]),o.useEffect(()=>{s.headData!==void 0&&At(Ue,!1)},[Ue]),o.useEffect(()=>{if(Ce){a.current.historyData=[];const e=vt(),t=be.ArrayToObject(k,e);xt(t),M(Math.random())}},[Ce]),o.useEffect(()=>{a.current.initReq&&(T(1),a.current.historyData=[])},[_e,y]),o.useEffect(()=>{a.current.loadMoreUrl?(a.current.historyData=[],T(1)):M(Math.random())},[_t]),o.useEffect(()=>{clearTimeout(a.current.reqTimer),a.current.url&&Q.Cancel(Me.current),a.current.reqTimer=setTimeout(()=>{if(a.current.initReq=!0,a.current.url){let e={};if($){if(a.current.page===null||a.current.size===null)return;e.size=a.current.size,e.page=a.current.page}if(b.length>0&&(e.orderField=b,e.orderType=g,s.sortTableRadio&&(e.orderField=b[0],e.orderType=g[0])),j&&Object.keys(j).length>0){const r=br();Object.keys(r).length>0&&(e.filter=r)}a.current.search&&typeof a.current.search=="object"&&(e={...e,...a.current.search});const t={url:a.current.url,ctx:xe,method:H,data:e};if(H==="Get")if(re)re(t,r=>{const n=S.handGetReqParams(r);me({...r,url:n,ctx:xe,method:H})});else{const r=S.handGetReqParams(t);me({url:r,ctx:xe,method:H})}H==="Post"&&(re?re(t,r=>{me(r)}):me(t))}if(a.current.data){let e=vt();if(e=dr(e),$){if(a.current.page===null||a.current.size===null)return;const t=e.slice((a.current.page-1)*a.current.size,(a.current.page-1)*a.current.size+a.current.size);ge(t),ke(e.length)}else ge(e);s.loading===void 0&&F(!1)}},50)},[or]),o.useEffect(()=>{Y!==void 0&&Y!==je&&Zt(Y)},[Y]),o.useEffect(()=>{if(X){const e={};for(let t=0,r=X.length;t<r;t++){const n=X[t];e[n]=!0}Ee(e)}},[X]),o.useEffect(()=>{if(Z){const e={};for(let t=0,r=Z.length;t<r;t++){const n=Z[t];e[n]=!0}er(e)}},[Z]),o.useEffect(()=>{if(Object.keys(x).length===0)B("not");else{const e=Object.keys(Qt);if(e.length===0)return B("not");let t=e.length,r=0;for(let n=0,i=e.length;n<i;n++){const l=e[n];E[l]?t--:x[l]!==void 0&&r++}if(r===0)return B("not");if(r===t)return B("all");if(r<t)return B("half")}},[x,C,E]),o.useEffect(()=>{Le()},[Ne,C,N]),o.useEffect(()=>{Oe({target:h.current})});const kt=()=>{if(!h.current)return O;let e=h.current.clientHeight-48;s.loadMore&&(e-=V);const t=Math.floor(e/V);return t<1?O:t},he=e=>{a.current.size=e,Ut(e),M(Math.random())},T=e=>{a.current.page=e,gt(e),M(Math.random())},vt=()=>{let e=[];return a.current.data instanceof Array?e=a.current.data:e=a.current.data?.list,e},dr=e=>{const t=Object.keys(a.current.selectFilterCom||{}),r=[];for(let n=0,i=e.length;n<i;n++){const l=e[n];let u=!0;if(a.current.filterSearchCallback)u=a.current.filterSearchCallback(l,{search:a.current.search,filter:a.current.selectFilterCom});else{for(let c=0,f=t.length;c<f;c++){const d=t[c],p=a.current.selectFilterCom[d]||[],R=l[d];if(p.length>0&&p.indexOf(R)===-1){u=!1;continue}}u&&(u=hr(l))}u&&r.push(l)}return r},hr=e=>{let t;const r=a.current.search;if(r&&typeof r!="string"&&r.searchKey&&(t=r.searchKey),typeof t=="string"&&a.current.searchKeyName&&a.current.searchKeyName.length>0)for(let n=0,i=a.current.searchKeyName.length;n<i;n++){const l=a.current.searchKeyName[n],u=e[l];if(u&&u.indexOf&&u.indexOf(t)!==-1)return!0}else return!0;return!1},Et=()=>s.tableKey?s.tableKey:s.data?window.location.origin+window.location.pathname+window.location.hash:s.url?`${s.url}_${s.method||"Get"}`:"",jt=()=>s.rememberColumns===!1?{}:S.getLocalStorageSelectHead(Et(),mt),Mt=e=>{if(s.rememberColumns===!1)return;const t=jt(),r={headName:t.headName||{},headDataConfig:t.headDataConfig||{},storageTime:new Date().getTime(),validity:mt*(3600*24)};if(e.setFixed){const n=be.ArrayToObject("name",e.headArr||[]);for(let i=0,l=K.length;i<l;i++){const c=K[i].name||"";r.headName[c]=!1,n[c]&&(r.headName[c]=!0)}}e.setDrag&&(r.headDataConfig=e.headDataConfig||{}),S.setLocalStorageSelectHead(Et(),r)},mr=(e,t,r)=>{if(q===!1){t.push(e);return}if(s.rememberColumns===!1)e.selected&&t.push(e);else{const n=r.headName||{},i=e.name||"",l=n[i];l!==void 0?l&&t.push(e):e.selected&&t.push(e)}},$t=e=>{const t={label:Kt({id:"serial"}),selected:!0,width:s.radio||s.check||s.expandable?45:55,fixed:"left",align:"center",className:"table-serial-number",name:"table-serial-number",sort:!1,filter:!1,render:(r,n,i,l,u)=>Number(u)+1};s.serialNumber&&(typeof s.serialNumber=="boolean"?e.unshift(t):e.unshift({...t,...s.serialNumber}))},qt=e=>{ht&&ht(e)},At=(e,t)=>{const r=[],n=[],i={},l=jt();a.current.headDataConfig=l.headDataConfig||{};for(let u=0,c=e.length;u<c;u++){const f=e[u],d=f.name||"";typeof f.width=="number"&&(f.width=`${f.width}px`),t||(f.orderNum=u),mr(f,r,l),n.push(f),i[d]=f}t&&(r.sort((u,c)=>Number(u.orderNum)-Number(c.orderNum)),n.sort((u,c)=>Number(u.orderNum)-Number(c.orderNum))),$t(r),Fe(r),Ct(r),qt(r),nr(n),$e({...a.current.headDataConfig}),a.current.headDataJson=i},gr=()=>{let e=0;return s.check&&(e+=48),s.radio&&(s.check?e+=32:e+=48),s.expandable&&(s.check||s.radio?e+=32:e+=48),e},pr=()=>{let e=0;return(s.showColumns==="inside"||s.showColumns===void 0||s.dragRow)&&(e+=53),s.operate&&(s.operate.width?e+=S.getStringInNumber(s.operate.width):s.operate.operateBtnRender?s.dragRow?e+=145:e+=e===0?158:105:e+=ae),e},Ae=e=>{let t=e.width||"";const r=e.name||"",n=a.current.headDataConfig[r]&&a.current.headDataConfig[r].width;return n&&(t=n),t},Fe=e=>{const t=[],r=[];let n=0;const i=gr();n+=i;const l=pr();n+=l;const u={leftBol:!1,rightBol:!1};for(let c=0,f=e.length;c<f;c++){const d=e[c];let p=0;const R=Ae(d);R?(p=S.getStringInNumber(R),n+=p):n+=ae,d.fixed==="left"&&d.width&&t.push(d),d.fixed==="right"&&d.width&&r.push(d)}if(t.length>0){u.leftBol=!0;let c=i;for(let f=0,d=t.length;f<d;f++){const p=t[f];if(p.width){const R=Ae(p),Fr=S.getStringInNumber(R);p.paraui_left_width=c,c+=Fr,f===t.length-1?p.paraui_fixed_left_last=!0:p.paraui_fixed_left_last=!1}}}if(r.length>0){u.rightBol=!0;let c=l;for(let f=r.length-1;f>=0;f--){const d=r[f];if(d.width){const p=Ae(d),R=S.getStringInNumber(p);d.paraui_right_width=c,c+=R,f===0?d.paraui_fixed_right_first=!0:d.paraui_fixed_right_first=!1}}}ir(n),cr(u)},br=()=>{const e={},t=Object.keys(j),r=a.current.headDataJson||{};for(let n=0,i=t.length;n<i;n++){const l=t[n],u=j[l]||[];if(u.length===0)continue;const c=r[l];c&&c.filterRadio?e[l]=u[0]:e[l]=u}return e},me=async e=>{e.onCancelId=n=>{Me.current=n},s.loading===void 0&&F(!0);let{data:t,error:r}=await S.requestFunc(e);if(!a.current.isDestroy){if(r){if(s.loading===void 0&&F(!1),!r.__CANCEL__){let n=!1;if(a.current.onError&&(n=await a.current.onError(r)),!n)return;ve([]),ke(0),bt({})}return!1}Be?Be(t,n=>{n&&(n.data&&(n=n.data),Ft(n),s.loading===void 0&&F(!1))}):(t.data&&(t=t.data),Ft(t),s.loading===void 0&&F(!1))}},Ft=e=>{if(e.columns&&s.headData===void 0&&JSON.stringify(e.columns)!==JSON.stringify(tr)){rr(e.columns);const r=Object.keys(e.columns),n=[];for(let i=0,l=r.length;i<l;i++){const u=r[i],c=e.columns[u];c.name=u,c.label=c.displayName,c.filter=c.filterFlag,c.filterRadio=c.filterRadioFlag,c.sort=c.orderFlag,c.selected=c.selectedFlag,c.width=c.width,n.push(c)}At(n,!0)}if($)ge(e.list||[]),ke(e.total),e.page!==void 0&&e.page!==null&&(a.current.page=Number(e.page),gt(Number(e.page)));else{let t=[];e instanceof Array?t=e:t=e.list||[],ge(t)}},ge=e=>{if(a.current.loadMoreUrl){const r=a.current.historyData||[];r.length>0&&(e=[...r,...e])}const t=be.ArrayToObject(k,e);a.current.historyData=e,bt(t),ve(e),y&&xt({...v,...t})},xr=e=>{e!==void 0&&T(e),pe()},Cr=e=>{e!==void 0&&he(e),T(1),pe()},Sr=e=>{const t=e||Number(J)+1;T(t)},yr=(e,t)=>{const r=b.indexOf(t);if(r!==-1){const l=g[r];l==="asc"&&(g[r]="desc"),l==="desc"&&(b.splice(r,1),g.splice(r,1)),l===void 0&&(g[r]="asc")}else b.push(t),g.push("asc");let n=[...b],i=[...g];if(Ge){const l=n.indexOf(t);l!==-1&&(n=[n[l]],i=[i[l]])}Yt(n),Xt(i),a.current.orderFieldArr=n,a.current.orderTypeArr=i,we&&we({orderField:n,orderType:i}),a.current.loadMoreUrl&&(a.current.historyData=[],T(1)),M(Math.random())},He=e=>{s.checkDefaultValue===void 0&&Ee({...e});const t=Object.keys(e);if(Se){const r=[];for(let n=0,i=t.length;n<i;n++)v[t[n]]&&r.push(v[t[n]]);Se(t,r)}},Ht=(e,t)=>{const r=s.checkDefaultValue!==void 0?{...x}:x;for(let n=0,i=C.length;n<i;n++){const l=C[n][k];E[l]||(t?r[l]=!0:r[l]&&delete r[l])}He(r)},Dr=(e,t,r)=>{const n=s.checkDefaultValue!==void 0?{...x}:x;n[r]=t,n[r]===!1&&delete n[r],He(n)},Tr=(e,t)=>{ye&&ye(t,v[t])},pe=()=>{Wt||(Ee({}),He({}))},Ot=(e,t,r)=>{Fe(e),Ct(e),qt(e);const n={setFixed:!0,headArr:e};r&&(n.setDrag=!0,n.headDataConfig={}),Mt(n),Te&&Te(e,t)},Rr=(e,t,r)=>{if(t){a.current.headDataConfig={},$e({});const i=[],l=[...K];$t(l);for(let u=0,c=l.length;u<c;u++){const f=l[u];f&&f.selected&&i.push(f)}Ot(i,r,!0);return}e.sort((i,l)=>Number(i.orderNum)-Number(l.orderNum));const n=[...e];Ot(n,r)},wr=e=>{a.current.selectFilterCom=Q.DeepClone(e),ar(Q.DeepClone(e)),T(1)},Nr=(e,t)=>{const r=e.name||"";a.current.headDataConfig[r]={width:t.width},$e({...a.current.headDataConfig}),Fe([...U]),Mt({headDataConfig:a.current.headDataConfig,setDrag:!0})},kr=(e,t,r)=>{const n=e.splice(t,1)[0];return e.splice(r,0,n),e},vr=async e=>{const{oldIndex:t,newIndex:r}=e;if(t===r)return;const n=[...C||[]];kr(n,t,r),await dt?.(n,e)||ve(n)},Er=o.useMemo(()=>w.jsxRuntimeExports.jsx(Hr.TableHead,{orderTypeArr:g,orderFieldArr:b,sortTable:ee,filter:Qe,expandable:N,check:z,selectStatus:ce,radio:P,align:te,showList:K,headData:U,selectFilter:j,operate:ne,onRequestSort:yr,selectAll:Ht,changeShowList:Rr,changeFilter:wr,showColumns:q,rowKey:k,fixedTable:_,fixedColumn:A,posFixed:fe,beyondText:se,lineWidth:ae,dragColumn:De,dragRow:W,headDataConfig:yt,tipMaxWidth:oe,changeColumnWidth:Nr,getPopupContainer:ct}),[v,q,k,C,x,E,g,b,ee,Qe,N,z,ce,P,te,K,U,j,ne,Te,Ge,_,fe,se,A,ae,De,W,yt,ct,we,oe]),jr=o.useMemo(()=>w.jsxRuntimeExports.jsx(Or.TableBody,{url:y,emptyProps:Pe,changePage:Sr,loadMoreUrl:St,total:ie,page:J,currentRowsPerPage:I,loadState:ue,loadMore:D,loadMoreRender:Ze,onClickMore:et,rowData:C,headData:U,expandable:N,check:z,radio:P,checkJson:x,radioValue:je,disabledJson:E,disabledArrStatus:Ke,align:te,tableCell:Ie,operate:ne,showColumns:q,formatter:Xe,orderTypeArr:g,orderFieldArr:b,sortTable:ee,selectCheck:Dr,selectRadio:Tr,rowKey:k,expandMultiple:rt,expandValue:tt,disabledExpand:nt,onExpand:at,defaultExpandAllRows:st,onRefresh:()=>{le?.("empty"),M(Math.random()),pe()},posFixed:fe,beyondText:se,fixedColumn:A,fixedTable:_,onClickRow:lt,rowClassMapping:it,tipMaxWidth:oe,lineHeight:V,dragRow:W,onDragRow:vr,virtualIndex:Tt,virtual:de}),[q,Xe,k,C,U,N,z,P,x,ee,g,b,je,E,te,Ie,ne,ye,Se,v,D,Ze,et,ie,J,I,St,tt,rt,nt,at,st,ue,Pe,y,Ke,fe,se,_,A,lt,it,oe,V,W,dt,Tt,Ne,de,le]),Mr=o.useMemo(()=>{if(!(a.current.page===null||a.current.size===null||D))return $&&w.jsxRuntimeExports.jsx(Lr.TableHead,{paginationType:We,flippingArrow:Ve,autoPagination:Je,total:ie,page:J,currentRowsPerPage:I,rowsPerPage:pt,changePage:xr,changeRowsPerPage:Cr,refreshInside:ut,checkCount:ft,onRefresh:()=>{le?.("refresh"),M(Math.random()),pe()},selectStatus:ce,selectAll:Ht,checkNumber:Object.keys(x).length,currentPageTotal:C.length,resizePaginationLine:Nt})},[ie,J,I,pt,$,D,Je,We,Ve,ut,ft,ce,C,x,E,v,Nt,le]),Oe=e=>{const t=qe.current,r=e.target;if(!(!t||!r)&&(t.classList.remove("table-scroll-left","table-scroll-right","table-scroll-middle"),!(r.scrollWidth<=r.clientWidth))){if(r.scrollLeft===0){t.classList.add("table-scroll-left");return}if(r.scrollLeft+r.clientWidth===r.scrollWidth){t.classList.add("table-scroll-right");return}t.classList.add("table-scroll-middle")}},$r=()=>{Le(),Oe({target:h.current}),fr(Q.UUID())},Le=()=>{const e=kt(),t=10;if(a.current.virtual&&!a.current.expandable&&Number(a.current.sizeCom)>e+2*t){if(Dt(!0),!G.current||!h.current)return;const r=G.current.clientHeight-h.current.clientHeight;h.current.scrollTop>=r&&(h.current.scrollTop=r,wt(r)),wt(h.current.scrollTop);const n=h.current,i=Math.floor(n.scrollTop/V),l=i+e+t;Rt([i,l])}else Rt([0,0]),Dt(!1)},qr=()=>!de||!G.current||!h.current?null:w.jsxRuntimeExports.jsx(Ir.default,{style:{position:"absolute",top:0,right:0,zIndex:100},scrollTotalLength:G.current.clientHeight-h.current.clientHeight,scrollLength:ur,onScroll:e=>{h.current&&(h.current.scrollTop=e)}}),Ar=()=>{let e=`${m.$prefixCls}-table`;return q==="inside"&&(e+=` ${m.$prefixCls}-table-columns-inside`),$&&(e+=` ${m.$prefixCls}-table-pagination`),D&&(e+=` ${m.$prefixCls}-table-load-more`),_&&(e+=` ${m.$prefixCls}-table-fixed-table`),A&&(e+=` ${m.$prefixCls}-table-fixed-cloumn`),De&&(e+=` ${m.$prefixCls}-table-drag-column`),W&&(e+=` ${m.$prefixCls}-table-drag-row`),z&&(e+=` ${m.$prefixCls}-table-check`),P&&(e+=` ${m.$prefixCls}-table-radio`),N&&(e+=` ${m.$prefixCls}-table-expandable`),C.length===0&&(e+=` ${m.$prefixCls}-table-no-data`),ue&&(e+=` ${m.$prefixCls}-table-load`),de&&(e+=` ${m.$prefixCls}-virtual`),ze&&(e+=` ${ze}`),e};return w.jsxRuntimeExports.jsxs("div",{className:Ar(),style:zt,ref:qe,children:[w.jsxRuntimeExports.jsx(zr.TableContainer,{className:"table-contain",cRef:h,onScroll:e=>{Le(),Oe(e)},children:w.jsxRuntimeExports.jsxs(Pr.TableElement,{cRef:G,fixedColumn:A,style:{minWidth:`${lr}px`},children:[Er,jr]})}),qr(),ue&&w.jsxRuntimeExports.jsx(_r.Loading,{}),Mr]})};exports.default=Kr;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});require('./index.css');const w=require("../_virtual/jsx-runtime.js"),o=require("react"),Q=require("@snack-kit/lib"),Ce=require("../Utils/snack-kit-shims.js"),S=require("./util.js"),Hr=require("./tableHead.js"),zr=require("./tableBody.js"),Or=require("./tablePagination.js"),Pr=require("./tableContainer/index.js"),Lr=require("./tableElement/index.js"),_r=require("../Loading/index.js"),Wr=require("../Hooks/useGlobalProps.js"),m=require("../GlobalContext/constant.js"),Vr=require("../GlobalContext/useFormatMessage.js"),Jr=require("./lang/index.js"),Ir=require("../ScrollBar/index.js");;/* empty css            */const Br=require("../Hooks/useResizeObserver.js"),Kr=X=>{const s=Wr.default(X,"Table");Ce.GetBrowserClass()==="ie"&&(s.fixedColumn=!1);const{className:Le,style:Pt,url:y,ctx:xe,emptyProps:_e,method:z="Get",data:Se,page:Lt=1,size:O=10,sizeArr:P=[10,20,50,100],search:We,pagination:$=!0,paginationType:Ve="complex",flippingArrow:Je,autoPagination:Ie=!0,tableCell:Be,requestCallback:Ke,checkDefaultValue:Y,setCheck:ye,radioDefaultValue:Z,setRadio:De,refresh:_t,disabledArr:ee,disabledArrStatus:Ue,headData:Ge=[],sortTableRadio:Qe,sortTable:te=!1,filter:Xe=!1,expandable:N,rowKey:k="key",check:L=!1,radio:_=!1,checkRememberPage:Wt=!1,align:re="left",paramsCallback:ne,operate:ae,showColumns:q="inside",fixedTable:W=!0,fixedColumn:A=!0,dragColumn:Te=!0,dragRow:V,formatter:Ye,lineHeight:J=48,lineWidth:se=80,autoSize:Ze=!0,loadMore:D=!1,loadMoreRender:et,onClickMore:tt,expandValue:rt,expandMultiple:nt,disabledExpand:at,onExpand:st,defaultExpandAllRows:ot=!1,onClickColumns:Re,beyondText:oe=!0,tipMaxWidth:le=500,loading:we,defaultSortValue:lt,defaultFilterValue:Vt,searchKeyName:Jt,filterSearchCallback:It,onClickRow:it,rowClassMapping:ct,getPopupContainer:ut,onSort:Ne,onError:Bt,refreshInside:ft=!!s.url,checkCount:dt=!!s.check,onDragRow:ht,virtual:ke=!1,columnsInfoEvent:mt,onRefreshCallback:ie}=s,Kt=Vr.default("Table",Jr.default),gt=s.expirationTime?s.expirationTime===0?1e8:s.expirationTime:7,[I,pt]=o.useState(s.page!==void 0?s.page:1),[F,Ut]=o.useState(null),[bt,Gt]=o.useState(P),[ce,ve]=o.useState(0),[x,Ee]=o.useState([]),[Qt,Ct]=o.useState({}),[v,xt]=o.useState({}),[g,Xt]=o.useState(Object.values(lt||{})),[b,Yt]=o.useState(Object.keys(lt||{})),[ue,B]=o.useState("not"),[C,je]=o.useState({}),[Me,Zt]=o.useState(),[E,er]=o.useState({}),[tr,rr]=o.useState({}),[K,nr]=o.useState([]),[U,St]=o.useState([]),[j,ar]=o.useState({...Vt}),[fe,H]=o.useState(!0),[yt,sr]=o.useState(!1),$e=o.useRef(""),[or,M]=o.useState(),[lr,ir]=o.useState(0),[de,cr]=o.useState({}),[Dt,qe]=o.useState({}),[he,Tt]=o.useState(!1),[Rt,wt]=o.useState([0,0]),[ur,Nt]=o.useState(0),[kt,fr]=o.useState(),h=o.useRef(null),Ae=o.useRef(null),G=o.useRef(null),n=o.useRef({page:s.page!==void 0?s.page:1,headDataConfig:{}});Br.default({dom:Ae.current,cb:()=>$r()}),n.current.loadMoreUrl=D&&y,n.current.search=We,n.current.url=y,n.current.orderTypeArr=g,n.current.orderFieldArr=b,n.current.selectFilterCom=j,n.current.data=Se,n.current.searchKeyName=Jt,n.current.filterSearchCallback=It,n.current.onError=Bt,n.current.sizeCom=F,n.current.virtual=ke,n.current.expandable=N,o.useEffect(()=>()=>{n.current.isDestroy=!0,clearTimeout(n.current.reqTimer),clearTimeout(n.current.loadingTimer),Q.Cancel($e.current)},[]),o.useEffect(()=>{we!==void 0&&(clearTimeout(n.current.loadingTimer),n.current.loadingTimer=setTimeout(()=>{H(we)},50))},[we]),o.useEffect(()=>{sr(!!(D&&y))},[D,y]),o.useEffect(()=>{s.page!==void 0&&T(s.page)},[Lt]),o.useEffect(()=>{if(!Ze)return me(O);if(s.size)me(O);else if(h&&h.current){const e=vt();P.indexOf(e)===-1&&(P.unshift(e),P.sort((t,r)=>t-r),Gt([...P])),me(e)}},[O,Ze]),o.useEffect(()=>{s.headData!==void 0&&Ft(Ge,!1)},[Ge]),o.useEffect(()=>{if(Se){n.current.historyData=[];const e=Et(),t=Ce.ArrayToObject(k,e);xt(t),M(Math.random())}},[Se]),o.useEffect(()=>{n.current.initReq&&(T(1),n.current.historyData=[])},[We,y]),o.useEffect(()=>{n.current.loadMoreUrl?(n.current.historyData=[],T(1)):M(Math.random())},[_t]),o.useEffect(()=>{clearTimeout(n.current.reqTimer),n.current.url&&Q.Cancel($e.current),n.current.reqTimer=setTimeout(()=>{if(n.current.initReq=!0,n.current.url){let e={};if($){if(n.current.page===null||n.current.size===null)return;e.size=n.current.size,e.page=n.current.page}if(b.length>0&&(e.orderField=b,e.orderType=g,s.sortTableRadio&&(e.orderField=b[0],e.orderType=g[0])),j&&Object.keys(j).length>0){const r=br();Object.keys(r).length>0&&(e.filter=r)}n.current.search&&typeof n.current.search=="object"&&(e={...e,...n.current.search});const t={url:n.current.url,ctx:xe,method:z,data:e};if(z==="Get")if(ne)ne(t,r=>{const a=S.handGetReqParams(r);ge({...r,url:a,ctx:xe,method:z})});else{const r=S.handGetReqParams(t);ge({url:r,ctx:xe,method:z})}z==="Post"&&(ne?ne(t,r=>{ge(r)}):ge(t))}if(n.current.data){let e=Et();if(e=dr(e),$){if(n.current.page===null||n.current.size===null)return;const t=e.slice((n.current.page-1)*n.current.size,(n.current.page-1)*n.current.size+n.current.size);pe(t),ve(e.length)}else pe(e);s.loading===void 0&&H(!1)}},50)},[or]),o.useEffect(()=>{Z!==void 0&&Z!==Me&&Zt(Z)},[Z]),o.useEffect(()=>{if(Y){const e={};for(let t=0,r=Y.length;t<r;t++){const a=Y[t];e[a]=!0}je(e)}},[Y]),o.useEffect(()=>{if(ee){const e={};for(let t=0,r=ee.length;t<r;t++){const a=ee[t];e[a]=!0}er(e)}},[ee]),o.useEffect(()=>{if(Object.keys(C).length===0)B("not");else{const e=Object.keys(Qt);if(e.length===0)return B("not");let t=e.length,r=0;for(let a=0,i=e.length;a<i;a++){const l=e[a];E[l]?t--:C[l]!==void 0&&r++}if(r===0)return B("not");if(r===t)return B("all");if(r<t)return B("half")}},[C,x,E]),o.useEffect(()=>{Pe()},[ke,x,N]),o.useEffect(()=>{Oe({target:h.current})});const vt=()=>{if(!h.current)return O;let e=h.current.clientHeight-48;s.loadMore&&(e-=J);const t=Math.floor(e/J);return t<1?O:t},me=e=>{n.current.size=e,Ut(e),M(Math.random()),X.onPageChange?.(n.current.page??1,e)},T=e=>{n.current.page=e,pt(e),M(Math.random()),X.onPageChange?.(e,n.current.size??F??X.size??10)},Et=()=>{let e=[];return n.current.data instanceof Array?e=n.current.data:e=n.current.data?.list,e},dr=e=>{const t=Object.keys(n.current.selectFilterCom||{}),r=[];for(let a=0,i=e.length;a<i;a++){const l=e[a];let u=!0;if(n.current.filterSearchCallback)u=n.current.filterSearchCallback(l,{search:n.current.search,filter:n.current.selectFilterCom});else{for(let c=0,f=t.length;c<f;c++){const d=t[c],p=n.current.selectFilterCom[d]||[],R=l[d];if(p.length>0&&p.indexOf(R)===-1){u=!1;continue}}u&&(u=hr(l))}u&&r.push(l)}return r},hr=e=>{let t;const r=n.current.search;if(r&&typeof r!="string"&&r.searchKey&&(t=r.searchKey),typeof t=="string"&&n.current.searchKeyName&&n.current.searchKeyName.length>0)for(let a=0,i=n.current.searchKeyName.length;a<i;a++){const l=n.current.searchKeyName[a],u=e[l];if(u&&u.indexOf&&u.indexOf(t)!==-1)return!0}else return!0;return!1},jt=()=>s.tableKey?s.tableKey:s.data?window.location.origin+window.location.pathname+window.location.hash:s.url?`${s.url}_${s.method||"Get"}`:"",Mt=()=>s.rememberColumns===!1?{}:S.getLocalStorageSelectHead(jt(),gt),$t=e=>{if(s.rememberColumns===!1)return;const t=Mt(),r={headName:t.headName||{},headDataConfig:t.headDataConfig||{},storageTime:new Date().getTime(),validity:gt*(3600*24)};if(e.setFixed){const a=Ce.ArrayToObject("name",e.headArr||[]);for(let i=0,l=K.length;i<l;i++){const c=K[i].name||"";r.headName[c]=!1,a[c]&&(r.headName[c]=!0)}}e.setDrag&&(r.headDataConfig=e.headDataConfig||{}),S.setLocalStorageSelectHead(jt(),r)},mr=(e,t,r)=>{if(q===!1){t.push(e);return}if(s.rememberColumns===!1)e.selected&&t.push(e);else{const a=r.headName||{},i=e.name||"",l=a[i];l!==void 0?l&&t.push(e):e.selected&&t.push(e)}},qt=e=>{const t={label:Kt({id:"serial"}),selected:!0,width:s.radio||s.check||s.expandable?45:55,fixed:"left",align:"center",className:"table-serial-number",name:"table-serial-number",sort:!1,filter:!1,render:(r,a,i,l,u)=>Number(u)+1};s.serialNumber&&(typeof s.serialNumber=="boolean"?e.unshift(t):e.unshift({...t,...s.serialNumber}))},At=e=>{mt&&mt(e)},Ft=(e,t)=>{const r=[],a=[],i={},l=Mt();n.current.headDataConfig=l.headDataConfig||{};for(let u=0,c=e.length;u<c;u++){const f=e[u],d=f.name||"";typeof f.width=="number"&&(f.width=`${f.width}px`),t||(f.orderNum=u),mr(f,r,l),a.push(f),i[d]=f}t&&(r.sort((u,c)=>Number(u.orderNum)-Number(c.orderNum)),a.sort((u,c)=>Number(u.orderNum)-Number(c.orderNum))),qt(r),He(r),St(r),At(r),nr(a),qe({...n.current.headDataConfig}),n.current.headDataJson=i},gr=()=>{let e=0;return s.check&&(e+=48),s.radio&&(s.check?e+=32:e+=48),s.expandable&&(s.check||s.radio?e+=32:e+=48),e},pr=()=>{let e=0;return(s.showColumns==="inside"||s.showColumns===void 0||s.dragRow)&&(e+=53),s.operate&&(s.operate.width?e+=S.getStringInNumber(s.operate.width):s.operate.operateBtnRender?s.dragRow?e+=145:e+=e===0?158:105:e+=se),e},Fe=e=>{let t=e.width||"";const r=e.name||"",a=n.current.headDataConfig[r]&&n.current.headDataConfig[r].width;return a&&(t=a),t},He=e=>{const t=[],r=[];let a=0;const i=gr();a+=i;const l=pr();a+=l;const u={leftBol:!1,rightBol:!1};for(let c=0,f=e.length;c<f;c++){const d=e[c];let p=0;const R=Fe(d);R?(p=S.getStringInNumber(R),a+=p):a+=se,d.fixed==="left"&&d.width&&t.push(d),d.fixed==="right"&&d.width&&r.push(d)}if(t.length>0){u.leftBol=!0;let c=i;for(let f=0,d=t.length;f<d;f++){const p=t[f];if(p.width){const R=Fe(p),Fr=S.getStringInNumber(R);p.paraui_left_width=c,c+=Fr,f===t.length-1?p.paraui_fixed_left_last=!0:p.paraui_fixed_left_last=!1}}}if(r.length>0){u.rightBol=!0;let c=l;for(let f=r.length-1;f>=0;f--){const d=r[f];if(d.width){const p=Fe(d),R=S.getStringInNumber(p);d.paraui_right_width=c,c+=R,f===0?d.paraui_fixed_right_first=!0:d.paraui_fixed_right_first=!1}}}ir(a),cr(u)},br=()=>{const e={},t=Object.keys(j),r=n.current.headDataJson||{};for(let a=0,i=t.length;a<i;a++){const l=t[a],u=j[l]||[];if(u.length===0)continue;const c=r[l];c&&c.filterRadio?e[l]=u[0]:e[l]=u}return e},ge=async e=>{e.onCancelId=a=>{$e.current=a},s.loading===void 0&&H(!0);let{data:t,error:r}=await S.requestFunc(e);if(!n.current.isDestroy){if(r){if(s.loading===void 0&&H(!1),!r.__CANCEL__){let a=!1;if(n.current.onError&&(a=await n.current.onError(r)),!a)return;Ee([]),ve(0),Ct({})}return!1}Ke?Ke(t,a=>{a&&(a.data&&(a=a.data),Ht(a),s.loading===void 0&&H(!1))}):(t.data&&(t=t.data),Ht(t),s.loading===void 0&&H(!1))}},Ht=e=>{if(e.columns&&s.headData===void 0&&JSON.stringify(e.columns)!==JSON.stringify(tr)){rr(e.columns);const r=Object.keys(e.columns),a=[];for(let i=0,l=r.length;i<l;i++){const u=r[i],c=e.columns[u];c.name=u,c.label=c.displayName,c.filter=c.filterFlag,c.filterRadio=c.filterRadioFlag,c.sort=c.orderFlag,c.selected=c.selectedFlag,c.width=c.width,a.push(c)}Ft(a,!0)}if($)pe(e.list||[]),ve(e.total),e.page!==void 0&&e.page!==null&&(n.current.page=Number(e.page),pt(Number(e.page)));else{let t=[];e instanceof Array?t=e:t=e.list||[],pe(t)}},pe=e=>{if(n.current.loadMoreUrl){const r=n.current.historyData||[];r.length>0&&(e=[...r,...e])}const t=Ce.ArrayToObject(k,e);n.current.historyData=e,Ct(t),Ee(e),y&&xt({...v,...t})},Cr=e=>{e!==void 0&&T(e),be()},xr=e=>{e!==void 0&&me(e),T(1),be()},Sr=e=>{const t=e||Number(I)+1;T(t)},yr=(e,t)=>{const r=b.indexOf(t);if(r!==-1){const l=g[r];l==="asc"&&(g[r]="desc"),l==="desc"&&(b.splice(r,1),g.splice(r,1)),l===void 0&&(g[r]="asc")}else b.push(t),g.push("asc");let a=[...b],i=[...g];if(Qe){const l=a.indexOf(t);l!==-1&&(a=[a[l]],i=[i[l]])}Yt(a),Xt(i),n.current.orderFieldArr=a,n.current.orderTypeArr=i,Ne&&Ne({orderField:a,orderType:i}),n.current.loadMoreUrl&&(n.current.historyData=[],T(1)),M(Math.random())},ze=e=>{s.checkDefaultValue===void 0&&je({...e});const t=Object.keys(e);if(ye){const r=[];for(let a=0,i=t.length;a<i;a++)v[t[a]]&&r.push(v[t[a]]);ye(t,r)}},zt=(e,t)=>{const r=s.checkDefaultValue!==void 0?{...C}:C;for(let a=0,i=x.length;a<i;a++){const l=x[a][k];E[l]||(t?r[l]=!0:r[l]&&delete r[l])}ze(r)},Dr=(e,t,r)=>{const a=s.checkDefaultValue!==void 0?{...C}:C;a[r]=t,a[r]===!1&&delete a[r],ze(a)},Tr=(e,t)=>{De&&De(t,v[t])},be=()=>{Wt||(je({}),ze({}))},Ot=(e,t,r)=>{He(e),St(e),At(e);const a={setFixed:!0,headArr:e};r&&(a.setDrag=!0,a.headDataConfig={}),$t(a),Re&&Re(e,t)},Rr=(e,t,r)=>{if(t){n.current.headDataConfig={},qe({});const i=[],l=[...K];qt(l);for(let u=0,c=l.length;u<c;u++){const f=l[u];f&&f.selected&&i.push(f)}Ot(i,r,!0);return}e.sort((i,l)=>Number(i.orderNum)-Number(l.orderNum));const a=[...e];Ot(a,r)},wr=e=>{n.current.selectFilterCom=Q.DeepClone(e),ar(Q.DeepClone(e)),T(1)},Nr=(e,t)=>{const r=e.name||"";n.current.headDataConfig[r]={width:t.width},qe({...n.current.headDataConfig}),He([...U]),$t({headDataConfig:n.current.headDataConfig,setDrag:!0})},kr=(e,t,r)=>{const a=e.splice(t,1)[0];return e.splice(r,0,a),e},vr=async e=>{const{oldIndex:t,newIndex:r}=e;if(t===r)return;const a=[...x||[]];kr(a,t,r),await ht?.(a,e)||Ee(a)},Er=o.useMemo(()=>w.jsxRuntimeExports.jsx(Hr.TableHead,{orderTypeArr:g,orderFieldArr:b,sortTable:te,filter:Xe,expandable:N,check:L,selectStatus:ue,radio:_,align:re,showList:K,headData:U,selectFilter:j,operate:ae,onRequestSort:yr,selectAll:zt,changeShowList:Rr,changeFilter:wr,showColumns:q,rowKey:k,fixedTable:W,fixedColumn:A,posFixed:de,beyondText:oe,lineWidth:se,dragColumn:Te,dragRow:V,headDataConfig:Dt,tipMaxWidth:le,changeColumnWidth:Nr,getPopupContainer:ut}),[v,q,k,x,C,E,g,b,te,Xe,N,L,ue,_,re,K,U,j,ae,Re,Qe,W,de,oe,A,se,Te,V,Dt,ut,Ne,le]),jr=o.useMemo(()=>w.jsxRuntimeExports.jsx(zr.TableBody,{url:y,emptyProps:_e,changePage:Sr,loadMoreUrl:yt,total:ce,page:I,currentRowsPerPage:F,loadState:fe,loadMore:D,loadMoreRender:et,onClickMore:tt,rowData:x,headData:U,expandable:N,check:L,radio:_,checkJson:C,radioValue:Me,disabledJson:E,disabledArrStatus:Ue,align:re,tableCell:Be,operate:ae,showColumns:q,formatter:Ye,orderTypeArr:g,orderFieldArr:b,sortTable:te,selectCheck:Dr,selectRadio:Tr,rowKey:k,expandMultiple:nt,expandValue:rt,disabledExpand:at,onExpand:st,defaultExpandAllRows:ot,onRefresh:()=>{ie?.("empty"),M(Math.random()),be()},posFixed:de,beyondText:oe,fixedColumn:A,fixedTable:W,onClickRow:it,rowClassMapping:ct,tipMaxWidth:le,lineHeight:J,dragRow:V,onDragRow:vr,virtualIndex:Rt,virtual:he}),[q,Ye,k,x,U,N,L,_,C,te,g,b,Me,E,re,Be,ae,De,ye,v,D,et,tt,ce,I,F,yt,rt,nt,at,st,ot,fe,_e,y,Ue,de,oe,W,A,it,ct,le,J,V,ht,Rt,ke,he,ie]),Mr=o.useMemo(()=>{if(!(n.current.page===null||n.current.size===null||D))return $&&w.jsxRuntimeExports.jsx(Or.TableHead,{paginationType:Ve,flippingArrow:Je,autoPagination:Ie,total:ce,page:I,currentRowsPerPage:F,rowsPerPage:bt,changePage:Cr,changeRowsPerPage:xr,refreshInside:ft,checkCount:dt,onRefresh:()=>{ie?.("refresh"),M(Math.random()),be()},selectStatus:ue,selectAll:zt,checkNumber:Object.keys(C).length,currentPageTotal:x.length,resizePaginationLine:kt})},[ce,I,F,bt,$,D,Ie,Ve,Je,ft,dt,ue,x,C,E,v,kt,ie]),Oe=e=>{const t=Ae.current,r=e.target;if(!(!t||!r)&&(t.classList.remove("table-scroll-left","table-scroll-right","table-scroll-middle"),!(r.scrollWidth<=r.clientWidth))){if(r.scrollLeft===0){t.classList.add("table-scroll-left");return}if(r.scrollLeft+r.clientWidth===r.scrollWidth){t.classList.add("table-scroll-right");return}t.classList.add("table-scroll-middle")}},$r=()=>{Pe(),Oe({target:h.current}),fr(Q.UUID())},Pe=()=>{const e=vt(),t=10;if(n.current.virtual&&!n.current.expandable&&Number(n.current.sizeCom)>e+2*t){if(Tt(!0),!G.current||!h.current)return;const r=G.current.clientHeight-h.current.clientHeight;h.current.scrollTop>=r&&(h.current.scrollTop=r,Nt(r)),Nt(h.current.scrollTop);const a=h.current,i=Math.floor(a.scrollTop/J),l=i+e+t;wt([i,l])}else wt([0,0]),Tt(!1)},qr=()=>!he||!G.current||!h.current?null:w.jsxRuntimeExports.jsx(Ir.default,{style:{position:"absolute",top:0,right:0,zIndex:100},scrollTotalLength:G.current.clientHeight-h.current.clientHeight,scrollLength:ur,onScroll:e=>{h.current&&(h.current.scrollTop=e)}}),Ar=()=>{let e=`${m.$prefixCls}-table`;return q==="inside"&&(e+=` ${m.$prefixCls}-table-columns-inside`),$&&(e+=` ${m.$prefixCls}-table-pagination`),D&&(e+=` ${m.$prefixCls}-table-load-more`),W&&(e+=` ${m.$prefixCls}-table-fixed-table`),A&&(e+=` ${m.$prefixCls}-table-fixed-cloumn`),Te&&(e+=` ${m.$prefixCls}-table-drag-column`),V&&(e+=` ${m.$prefixCls}-table-drag-row`),L&&(e+=` ${m.$prefixCls}-table-check`),_&&(e+=` ${m.$prefixCls}-table-radio`),N&&(e+=` ${m.$prefixCls}-table-expandable`),x.length===0&&(e+=` ${m.$prefixCls}-table-no-data`),fe&&(e+=` ${m.$prefixCls}-table-load`),he&&(e+=` ${m.$prefixCls}-virtual`),Le&&(e+=` ${Le}`),e};return w.jsxRuntimeExports.jsxs("div",{className:Ar(),style:Pt,ref:Ae,children:[w.jsxRuntimeExports.jsx(Pr.TableContainer,{className:"table-contain",cRef:h,onScroll:e=>{Pe(),Oe(e)},children:w.jsxRuntimeExports.jsxs(Lr.TableElement,{cRef:G,fixedColumn:A,style:{minWidth:`${lr}px`},children:[Er,jr]})}),qr(),fe&&w.jsxRuntimeExports.jsx(_r.Loading,{}),Mr]})},Ur=Kr;exports.default=Ur;
 //# sourceMappingURL=index.js.map

package/lib/Table/interface.d.ts

@@ -324,6 +324,12 @@ export interface TableProps<T = unknown> extends TableHeadBodyPublicProps<T> {
      * 内部刷新事件回调
      * */
     onRefreshCallback?: (type: 'empty' | 'refresh') => void;
+    /**
+     * 分页变化回调（DEFECT-003 修复）。本地 data 模式 + 远程 url 模式都触发；
+     * 用户切换页码或每页条数时调用——参数为新的 (page, size)。
+     * 未传时不影响任何现有行为；与远程模式 requestCallback 互不干扰，可同时使用。
+     * */
+    onPageChange?: (page: number, size: number) => void;
 }
 export interface ExpandableRowItem {
     /** 当前嵌套行id */

package/lib/Tabs/component.json

@@ -0,0 +1,227 @@
+{
+    "name": "Tabs",
+    "category": "Navigation",
+    "description": "选项卡切换组件。**所有 mode 都渲染 data[].content**（src/Tabs/index.tsx:220 把 content 渲染到 TabPane 内部）——不存在『line/track 只渲染 tab 头』的差异，请放心把面板体放进 data[].content。",
+    "semantic": {
+        "intent": [
+            "内容切换",
+            "视图分组",
+            "平级导航"
+        ],
+        "useCases": [
+            "详情页多维度展示",
+            "配置面板",
+            "同级功能切换"
+        ],
+        "riskLevel": "normal"
+    },
+    "variants": {
+        "line": {
+            "meaning": "线条型 (默认) — 底部下划线指示当前激活"
+        },
+        "card": {
+            "meaning": "卡片型 — tab 头本身像独立卡片"
+        },
+        "editable-card": {
+            "meaning": "可编辑卡片型 — 自带新增 + 关闭按钮，与 editable=true 配套"
+        },
+        "track": {
+            "meaning": "轨道滑块型 — segmented control 风格"
+        },
+        "card-container": {
+            "meaning": "页签容器 — 整个面板被卡片包裹"
+        }
+    },
+    "states": [
+        "active",
+        "disabled"
+    ],
+    "idealProps": {
+        "data": {
+            "type": "TabProps<K>[]",
+            "itemSchema": {
+                "label": { "type": "ReactNode", "required": true, "description": "tab 头文案" },
+                "content": { "type": "ReactNode", "description": "面板内容，所有 mode 都渲染" },
+                "value": { "type": "K extends React.Key", "required": true, "description": "唯一标识，与 Tabs value/onChange 对应" },
+                "disabled": { "type": "boolean", "description": "是否禁用该 tab" },
+                "closable": { "type": "boolean", "description": "是否显示关闭按钮（editable 模式）" },
+                "disabledTooltip": { "type": "TooltipProps", "description": "hover 禁用 tab 时显示的 tooltip 配置" },
+                "showHelp": { "type": "boolean", "description": "是否显示帮助图标" },
+                "helpProps": { "type": "HelpProps", "description": "帮助图标配置" }
+            },
+            "description": "标签页配置数组。**每项 TabProps 完整字段**：label（tab 头文案）/ content（**面板内容，所有 mode 都渲染**）/ value（唯一 key，类型 K）/ disabled / closable / disabledTooltip（TooltipProps，hover 禁用 tab 时显示）/ showHelp / helpProps。content 不要外部用 `{activeKey === 'x' && <Body />}` 二次条件渲染——直接放在 data[].content 里"
+        },
+        "value": {
+            "type": "K extends React.Key",
+            "description": "当前激活的 tab value（受控）。Tabs 是泛型组件 `Tabs<K>`：默认 K = string，需传 string value 时业务端可写 `<Tabs<string>>`；data[].value 与 value 同类型"
+        },
+        "mode": {
+            "type": "enum",
+            "values": [
+                "line",
+                "card",
+                "editable-card",
+                "track",
+                "card-container"
+            ],
+            "default": "line",
+            "description": "外观模式 5 种取值（src/Tabs/index.tsx:19 TabsType）；`type` prop 是 mode 的别名（src 优先 type ?? mode），二选一传"
+        },
+        "type": {
+            "type": "enum",
+            "values": [
+                "line",
+                "card",
+                "editable-card",
+                "track",
+                "card-container"
+            ],
+            "description": "mode 的别名；与 mode 二选一即可"
+        },
+        "size": {
+            "type": "'small' | 'medium' | 'large'",
+            "values": ["small", "medium", "large"],
+            "description": "尺寸"
+        },
+        "onChange": {
+            "type": "function",
+            "signature": "(activeKey: K, item?: TabProps<K>) => void",
+            "description": "切换面板的回调。**真实 2 参（activeKey + item）**——首参名 activeKey 不是 value；不带 event 第三参（区别于 antd）。K 默认 string；通过 Tabs<K> 收紧"
+        },
+        "onEdit": {
+            "type": "function",
+            "signature": "(item: TabProps<K>, event?: React.MouseEvent | React.KeyboardEvent | string | React.Key, action?: 'add' | 'remove') => void",
+            "description": "新增/删除面板的回调（3 参：item / event / action）。配合 editable / showAdd / closable"
+        },
+        "onAdd": {
+            "type": "function",
+            "signature": "(event?: React.MouseEvent) => void",
+            "description": "新增按钮回调；showAdd 为 true 或 editable 模式下生效"
+        },
+        "centered": {
+            "type": "boolean",
+            "default": false,
+            "description": "标签居中展示"
+        },
+        "tabPosition": {
+            "type": "'top' | 'right' | 'bottom' | 'left'",
+            "values": ["top", "right", "bottom", "left"],
+            "default": "'top'",
+            "description": "页签位置"
+        },
+        "editable": {
+            "type": "boolean",
+            "default": false,
+            "description": "可编辑标签（关闭 + 新增）；通常与 mode='editable-card' 搭配"
+        },
+        "showAdd": {
+            "type": "boolean",
+            "default": false,
+            "description": "显示新增按钮"
+        },
+        "hideAdd": {
+            "type": "boolean",
+            "default": false,
+            "description": "在 editable 模式下隐藏新增按钮"
+        },
+        "addIcon": {
+            "type": "ReactNode",
+            "description": "自定义新增按钮图标（替换默认 + 图标）；showAdd 或 editable 时生效"
+        },
+        "radio": {
+            "type": "boolean",
+            "default": false,
+            "description": "在每个 tab 头前加 radio 单选框（与 onRadioChange 配套）"
+        },
+        "showPopConfirm": {
+            "type": "boolean",
+            "default": false,
+            "description": "切换/删除 tab 前弹出确认框（src/Tabs/index.tsx:56 实证）。⚠️ **`editable=true` 或 `mode='editable-card'` 时有效**（两者满足其一即可触发可编辑态，src:133 `inType === 'editable-card' || editable` 实证）。配合 `popConfirmProps` 自定义确认框内容"
+        },
+        "popConfirmProps": {
+            "type": "PopConfirmProps",
+            "description": "控制切换确认弹窗的内容（src/Tabs/index.tsx:58 实证，类型 PopConfirmProps）。在 `showPopConfirm=true` 时生效，可配置 title / description / okText / cancelText 等 PopConfirm 支持的所有属性"
+        },
+        "onRadioChange": {
+            "type": "function",
+            "signature": "(radioValue: K) => void",
+            "description": "radio 单选框模式下切换选中项的回调（src/Tabs/index.tsx:72 实证签名）。⚠️ **需配合 `mode='card-container'` + `radio=true`**——Radio 组件仅在 card-container 模式下渲染（src:178 实证），其他 mode 下设置 radio=true 无效。K 类型与 Tabs<K> 泛型一致（默认 string）。**与 `onChange` 区分**：onChange 是 tab 切换回调，onRadioChange 是独立的 radio 选中回调"
+        }
+    },
+    "do": [
+        "把面板内容放在 data[].content——所有 mode 都会渲染 content，不要外部条件渲染",
+        "卡片型外观请直接传 mode='card'（不要退而求其次选 mode='card-container'——后者是『整个面板卡片包裹』，不是『tab 头卡片』）",
+        "可编辑标签使用 mode='editable-card' + editable={true}；自定义新增图标用 addIcon prop",
+        "禁用 tab 的 hover 提示用 TabProps.disabledTooltip（不要给 label 包 <span title>）",
+        "受控用 value + onChange；onChange 第一参数是 activeKey，第二参数是 item，无 event 参数"
+    ],
+    "dont": [
+        "在 TabPane 中渲染过重的非首屏内容（应利用懒加载机制）",
+        "频繁切换 Tabs mode 导致布局抖动",
+        "不要假设『mode='line' 不渲染 content』——所有 mode 都渲染（src 实证）",
+        "不要按 antd 习惯传 onChange={(value, tabData, event) => ...}——本组件 2 参 (activeKey, item)",
+        "不要按 antd 习惯传 columns/items prop——本组件用 data；不要传 children TabPane——本组件用 data[].content"
+    ],
+    "events": {
+        "onChange": {
+            "signature": "(activeKey: K, item?: TabProps<K>) => void",
+            "asyncSupported": false,
+            "examples": [
+                "切换 tab：onChange={(key) => setActiveTab(key)}",
+                "利用第二参取 tab 数据：onChange={(key, item) => setTitle(item?.label)}",
+                "K 泛型约束：<Tabs<'home'|'profile'> onChange={(key) => ...} />，key 类型被收紧"
+            ],
+            "commonMistakes": [
+                "按 antd 习惯传 onChange={(value, tabData, event) => ...}——本组件仅 2 参 (activeKey, item)，无 event 第三参",
+                "误以为首参名是 value——首参名是 activeKey（来自 rc-tabs 层），不是 value",
+                "忘记第二参 item 是可选的（data 为空或切换到非 data 渲染的 key 时 item 可能 undefined）"
+            ]
+        },
+        "onEdit": {
+            "signature": "(item: TabProps<K>, event?: React.MouseEvent | React.KeyboardEvent | string | React.Key, action?: 'add' | 'remove') => void",
+            "asyncSupported": false,
+            "examples": [
+                "新增：action='add', item 是空对象 {}",
+                "删除：action='remove', item 是被关闭的 TabProps<K> 项（包含 value/label 等字段）",
+                "删除实现：onEdit={(item, _, action) => action === 'remove' && setTabs(tabs.filter(t => t.value !== item.value))}"
+            ],
+            "commonMistakes": [
+                "新增分支期望 item.value 有值——add 时 item 是空对象 {}，新 key 需业务侧生成",
+                "onEdit 在 editable=false + mode!='editable-card' 时传了但不触发——需满足 editable=true 或 mode='editable-card'"
+            ]
+        },
+        "onRadioChange": {
+            "signature": "(radioValue: K) => void",
+            "asyncSupported": false,
+            "examples": [
+                "card-container 模式 + radio=true 时，每个 tab 头前有 Radio，点击 radio 触发此回调",
+                "onRadioChange={(val) => setSelected(val)}"
+            ],
+            "commonMistakes": [
+                "不是 card-container + radio=true 模式时传了 onRadioChange——Radio 不渲染，回调永不触发",
+                "与 onChange 混淆——onChange 是 tab 激活切换，onRadioChange 是独立的 radio 选中"
+            ]
+        }
+    },
+    "typescriptPitfalls": [
+        {
+            "issue": "onChange 首参名是 activeKey 不是 value，直接解构 value 时 TS 不报错但语义不清",
+            "wrong": "onChange={(value) => setTab(value)}  // 运行正确但命名误导",
+            "right": "onChange={(activeKey) => setTab(activeKey)}  // 参数名与签名一致"
+        },
+        {
+            "issue": "data 是 TabProps<K>[] 而不是 RcTabsProps.items，两者不可直接互用",
+            "wrong": "// 从 antd 迁移时直接传 items={tabs}——para-ui Tabs 用 data prop 不是 items",
+            "right": "data={tabs}  // TabProps 数组：[{ value: 'home', label: '首页', content: <Home /> }]"
+        },
+        {
+            "issue": "tabPosition prop 在 Omit<RcTabsProps, 'onChange'> 中保留，但 SCSS 可能不支持所有方向",
+            "wrong": "// 传 tabPosition='left' 期望左侧竖排 tab——需确认当前主题 SCSS 是否实现了 left 方向",
+            "right": "// 水平 top 位置已完整实现；非 top 方向使用前需自测 SCSS 效果"
+        }
+    ],
+    "mapping": {
+        "realComponent": "Tabs",
+        "adapter": null
+    }
+}

package/lib/Tag/component.json

@@ -0,0 +1,221 @@
+{
+    "name": "Tag",
+    "category": "Data Display",
+    "description": "进行标记和分类的小标签，支持 4 种预设色 + 自定义色、描边/实色、closable 可关闭、editable 内置编辑模式、visible 显隐控制",
+    "semantic": {
+        "intent": [
+            "分类",
+            "标记",
+            "选择"
+        ],
+        "useCases": [
+            "文章标签",
+            "状态展示",
+            "筛选条件"
+        ],
+        "riskLevel": "low"
+    },
+    "variants": {
+        "normal": {
+            "meaning": "普通标签"
+        },
+        "outline": {
+            "meaning": "描边标签"
+        }
+    },
+    "states": [
+        "default",
+        "closable",
+        "visible",
+        "editable"
+    ],
+    "idealProps": {
+        "children": {
+            "type": "ReactNode",
+            "description": "**标签文案**（src 通过 PropsWithChildren 接收，与 props 分开）。直接作为 children 传入：`<Tag>已激活</Tag>`。**editable 模式下**：当 children 是 string 时会作为内嵌 input 的初始值（src/Tag/index.tsx:118-122 实证）"
+        },
+        "color": {
+            "type": "'blue' | 'green' | 'yellow' | 'red' | string",
+            "description": "标签颜色。**预设色（4 个）**：blue / green / yellow / red——会命中专门 CSS 类生成完整配色方案。**非预设值**（如 'gray' / hex / rgb()）走 tinycolor 解析，渲染为带 0.1 alpha 的对应色背景 + 原色文字（无 hover/active 等专门 CSS）。**状态色推荐语义**（业界常见映射）：green=success/激活、yellow=warning/待处理、red=error/危险、blue=info/默认；灰色场景建议传 hex '#808080' 或 '#999'。需求方若需要灰色等常用色，可以提议加入预设清单（src 改 PresetColors + 加专门样式）",
+            "_presetNote": "DEFECT 反查：src/Tag/index.tsx:67 PresetColors = ['blue','green','yellow','red']；非预设走 tinycolor 通用渲染但视觉效果有差异——不是 bug 是设计取舍"
+        },
+        "type": {
+            "type": "enum",
+            "values": [
+                "normal",
+                "outline"
+            ],
+            "default": "normal",
+            "description": "标签类型——normal 实色填充，outline 描边版（color 仍生效，但作为边框色 + 文字色，背景透明）"
+        },
+        "size": {
+            "type": "enum",
+            "values": [
+                "small",
+                "medium",
+                "large"
+            ],
+            "default": "small",
+            "description": "标签大小。三档统一为 small / medium / large(2026-05-08 跨组件命名 epic §3.1 选项 B 实施,medium 为新增视觉档,默认 small 不变,既有 small/large 调用零回归)"
+        },
+        "closable": {
+            "type": "boolean",
+            "default": false,
+            "description": "是否可关闭——开启后右侧自动渲染 ✕ 图标；自定义关闭图标传 closeIcon prop。**半受控行为**（src/Tag/index.tsx:175-178 实证）：未传 visible prop 时点击 ✕ 自动 setVisible(false) 内部隐藏；传了 visible 后由父组件控制（点击 ✕ 仅触发 onClose 不自动隐藏）"
+        },
+        "onClose": {
+            "type": "function",
+            "signature": "(event: React.MouseEvent) => void",
+            "description": "关闭按钮点击回调（**完整签名带 React MouseEvent 参数**，src/Tag/index.tsx:36 实证）。**事件**：内部已 stopPropagation；如需阻止默认隐藏（visible 未受控场景），调用 event.preventDefault() 即可——src 检查 e.defaultPrevented 后跳过 setVisible(false)"
+        },
+        "closeIcon": {
+            "type": "ReactNode",
+            "description": "自定义关闭图标节点（替代默认 CloseIcon），仅在 closable=true 时渲染"
+        },
+        "visible": {
+            "type": "boolean",
+            "default": true,
+            "description": "是否显示标签。**受控**：传入后 Tag 显隐完全跟随 visible（onClose 后不会自动隐藏，由父组件 setState 控制）。**非受控**：不传时 onClose 后 src 内部 setVisible(false) 自动隐藏。如需完全不挂载 DOM，在父组件做条件渲染 `{isShown && <Tag />}` 而非依赖 visible prop（visible=false 时 DOM 仍渲染只是 CSS 隐藏）"
+        },
+        "icon": {
+            "type": "ReactNode",
+            "description": "**前置图标**（src/Tag/index.tsx:231-254 实证 icon 渲染在文案左侧；与 closeIcon 在右侧不同）。editable=true 时此 prop 被忽略（前缀位置改渲染 EditIcon）"
+        },
+        "editable": {
+            "type": "boolean",
+            "default": false,
+            "description": "**Tag 内置可编辑模式**——传 editable={true} 后，Tag 在前缀位置自动渲染编辑图标（EditIcon），点击图标会切换为内嵌 input；按 Enter 或失焦提交。**回调通过 tagChange prop 触发**：`tagChange?: (value: string) => void`。**初值来源**：children 为 string 时作为 input 初始值；不是 string 时初值为空字符串。无需手写原生 input。editable 模式下 children 仅作为编辑态进入时的 initialValue；父组件后续更新 children **不会刷新已激活 input**；父组件需通过 tagChange 回调维护 state"
+        },
+        "tagChange": {
+            "type": "function",
+            "signature": "(value: string) => void",
+            "description": "**editable=true 模式下 input 值变化的回调**（src/Tag/index.tsx:259 实证：每次 onChange 触发 = 实时键入回调，**不是 onBlur/Enter 才触发**）。提交动作仅控制是否退出编辑态，与 tagChange 触发频率无关"
+        },
+        "editInputClassName": {
+            "type": "string",
+            "description": "editable 模式下内嵌 input 的类名"
+        },
+        "editInputWidth": {
+            "type": "number",
+            "description": "editable 模式下内嵌 input 的宽度（默认根据内容自适应）"
+        },
+        "maxWidth": {
+            "type": "number | string",
+            "description": "标签最大宽度。超出时配合 AutoTips 显示 tooltip（不截断）"
+        },
+        "tipMaxWidth": {
+            "type": "number | string",
+            "description": "AutoTips tooltip 的最大宽度（src/Tag/index.tsx:56,310 实证：透传给 AutoTips 的 tipMaxWidth prop，控制文案截断时 tooltip 浮层宽度）"
+        },
+        "onEdit": {
+            "type": "function",
+            "signature": "(event: React.MouseEvent) => void",
+            "description": "编辑图标点击回调（src/Tag/index.tsx:38,198 实证：editable=true 时点击前缀 EditIcon 触发，可通过 event.preventDefault() 阻止切换为 input 编辑状态）"
+        },
+        "getWidth": {
+            "type": "function",
+            "signature": "(width: number) => void",
+            "description": "获取标签宽度回调（src/Tag/index.tsx:40,115 实证：挂载及 inputVisible 变化后通过 useEffect 将 tagRef 的 offsetWidth 传出）"
+        },
+        "marginBottom": {
+            "type": "string",
+            "description": "标签下边距（src/Tag/index.tsx:58,136 实证：inline style 直接透传，用于 TagGroup 等批量排列场景控制行间距）"
+        },
+        "marginRight": {
+            "type": "string",
+            "description": "标签右边距（src/Tag/index.tsx:60,137 实证：inline style 直接透传，用于 TagGroup 等批量排列场景控制列间距）"
+        },
+        "className": {
+            "type": "string",
+            "description": "自定义类名（src/Tag/index.tsx:48 interface 声明，透传到根 span 元素）"
+        }
+    },
+    "do": [
+        "使用颜色区分不同类型的标签——状态徽章推荐：green=激活/成功、yellow=警告/待处理、red=错误/危险、blue=信息/默认、灰色用 hex '#808080'",
+        "使用 closable 实现标签的删除交互（visible 受控时父组件 setState 移除；非受控时 src 内部自动隐藏）",
+        "需要可编辑标签时直接传 editable={true} + tagChange 回调——Tag 内置 EditIcon + input 渲染逻辑，**不需要在 children 内手写原生 <input>**；children 为 string 时作为 input 初始值",
+        "**跨组件引用 Tag 表达状态色**：在 Table render / Form 选项渲染等场景，用 `<Tag color='green'>已激活</Tag>` 而非 inline style 兜底——预设 4 色已覆盖大多数状态语义"
+    ],
+    "dont": [
+        "在 Tag 中放置过长的文本",
+        "滥用 Tag 作为按钮使用",
+        "**不要在 editable 模式同时传 icon**——editable=true 时前缀位置改渲染 EditIcon，icon prop 被忽略；如需图标 + 编辑混用，需自实现",
+        "不要假设非预设色（hex / rgb / 'gray'）有完整 hover/active CSS——非预设走 tinycolor 0.1 alpha 渲染，无专门样式"
+    ],
+    "events": {
+        "onClose": {
+            "signature": "(event: React.MouseEvent) => void",
+            "asyncSupported": false,
+            "examples": [
+                "受控关闭：onClose={(e) => setVisible(false)}",
+                "阻止默认隐藏（非受控场景）：onClose={(e) => { e.preventDefault(); /* 自定义逻辑 */ }}",
+                "受控模式父组件删除标签：onClose={() => setTags(prev => prev.filter(t => t.id !== id))}"
+            ],
+            "commonMistakes": [
+                "不传 visible prop 时期望 onClose 后标签仍显示——未传 visible 时 Tag 内部自动 setVisible(false)；要阻止需调 e.preventDefault()",
+                "假设 onClose 只在显式关闭时触发——Tag 本体 stopPropagation，但父元素 onClick 不受影响",
+                "忘记在受控模式（传了 visible）中通过 onClose 更新父 state——Tag 不会自动隐藏，需父组件响应 onClose 更新 visible"
+            ]
+        },
+        "onEdit": {
+            "signature": "(event: React.MouseEvent) => void",
+            "asyncSupported": false,
+            "examples": [
+                "监听编辑图标点击：onEdit={(e) => console.log('edit clicked')}",
+                "阻止进入内置编辑态：onEdit={(e) => { e.preventDefault(); openCustomEditModal(); }}"
+            ],
+            "commonMistakes": [
+                "期望 onEdit 是编辑完成后的回调——onEdit 是点击编辑图标时触发；编辑完成回调是 tagChange",
+                "同时传 onEdit 和 editable 却期望自定义完全替代内置 input——onEdit 调 e.preventDefault() 才能阻止切换 input"
+            ]
+        },
+        "tagChange": {
+            "signature": "(value: string) => void",
+            "asyncSupported": false,
+            "examples": [
+                "实时同步编辑值：tagChange={(v) => setTagValue(v)}",
+                "受控：在 tagChange 中更新父组件 state，children 随之变化（editable 模式下 children 是初始值）"
+            ],
+            "commonMistakes": [
+                "假设 tagChange 是 onBlur/Enter 确认后触发——实际是实时 onChange（每次键入都触发）",
+                "不传 tagChange 期望 Tag 自己保存编辑值——编辑完成后父组件 children 不更新则下次进入编辑态仍是旧初始值"
+            ]
+        },
+        "getWidth": {
+            "signature": "(width: number) => void",
+            "asyncSupported": false,
+            "examples": [
+                "获取标签实际渲染宽度：getWidth={(w) => setTagWidth(w)}"
+            ],
+            "commonMistakes": [
+                "期望 getWidth 实时响应容器宽度变化——实际只在挂载时和 inputVisible 变化时触发（不是 ResizeObserver）"
+            ]
+        }
+    },
+    "typescriptPitfalls": [
+        {
+            "issue": "TagProps extends React.HTMLAttributes<HTMLSpanElement>，onClick 等原生事件直接透传，不需要单独声明",
+            "wrong": "// 以为 Tag 没有 onClick，外层包一个 div：<div onClick={handleClick}><Tag>文本</Tag></div>",
+            "right": "<Tag onClick={handleClick}>文本</Tag>  // HTMLAttributes 的所有事件都可直接传"
+        },
+        {
+            "issue": "editable 模式下 children 只作为编辑态初始值，不是受控值——父组件更新 children 不刷新已激活 input",
+            "wrong": "// 期望 children 变化实时反映到编辑 input 中\n<Tag editable tagChange={setVal}>{controlledValue}</Tag>  // editInputVisible 激活后 children 更新不生效",
+            "right": "// 用 key 或在 tagChange 回调中维护 state：\nconst [val, setVal] = useState(initialValue);\n<Tag editable tagChange={setVal}>{val}</Tag>  // 父组件维护 val，但注意切换编辑时仍取最新 children 作初始值"
+        },
+        {
+            "issue": "非预设色（hex/rgb/'gray' 等）走 tinycolor 渲染，TS 不报错但无完整 hover/active CSS",
+            "wrong": "color='gray'  // TS 接受（string 类型），但没有专门 CSS，只有 tinycolor 0.1 alpha 背景",
+            "right": "// 预设色（有完整 CSS）：color='blue' | 'green' | 'yellow' | 'red'\n// 非预设色自定义（通用渲染）：color='#808080'  // 接受但无专门 hover/active 样式"
+        },
+        {
+            "issue": "closable 半受控行为：未传 visible 时 onClose 自动隐藏；传了 visible 则需父组件主动响应 onClose",
+            "wrong": "// 传了 visible 但不响应 onClose：\n<Tag closable visible={isVisible} onClose={() => {}}>文本</Tag>  // 点关闭后 Tag 不隐藏",
+            "right": "// 受控：onClose 更新父组件 state\n<Tag closable visible={isVisible} onClose={() => setIsVisible(false)}>文本</Tag>"
+        }
+    ],
+    "mapping": {
+        "realComponent": "Tag",
+        "adapter": null
+    }
+}

package/lib/Tag/index.css

@@ -1 +1 @@
-@charset "UTF-8";.paraui-v4-tag-outline.paraui-v4-tag{border:.5px solid rgb(92,101,115)}.paraui-v4-tag-outline.paraui-v4-tag-blue{border:.5px solid rgb(46,101,230)}.paraui-v4-tag-outline.paraui-v4-tag-green{border:.5px solid rgb(19,191,76)}.paraui-v4-tag-outline.paraui-v4-tag-yellow{border:.5px solid rgb(255,147,38)}.paraui-v4-tag-outline.paraui-v4-tag-red{border:.5px solid rgb(244,66,66)}.paraui-v4-tag-edit-input{height:24px;align-self:flex-start;font-size:14px;color:#1d2126;text-indent:8px;border:1px solid rgb(46,101,230);border-radius:4px}.paraui-v4-tag{vertical-align:bottom;display:inline-flex;justify-content:center;align-items:center;max-width:100%;height:24px;padding:0 10px;font-size:14px;color:#1d2126;white-space:nowrap;background:#eaecf1;border-radius:2px;line-height:18px}.paraui-v4-tag .tag-custom-icon:hover{background:none!important;cursor:default}.paraui-v4-tag .tag-close-icon:hover{background-color:#d4dae3}.paraui-v4-tag .tag-edit-icon{display:flex}.paraui-v4-tag.paraui-v4-tag-small{height:20px;font-size:12px;padding:0 6px}.paraui-v4-tag.paraui-v4-tag-small>svg{font-size:12px}.paraui-v4-tag.paraui-v4-tag-small>svg+.paraui-v4-auto-tips{margin-left:2px}.paraui-v4-tag.paraui-v4-tag-small .tag-close-icon{margin-left:2px}.paraui-v4-tag.paraui-v4-tag-small .tag-edit-icon{font-size:12px}.paraui-v4-tag>svg{color:inherit;font-size:16px}.paraui-v4-tag .tag-edit-icon{color:inherit;font-size:16px;cursor:pointer}.paraui-v4-tag .tag-edit-icon>svg{color:#1d2126}.paraui-v4-tag .tag-close-icon{margin-left:4px;color:inherit;font-size:16px;cursor:pointer}.paraui-v4-tag .tag-close-icon:hover{color:inherit}.paraui-v4-tag>svg+.paraui-v4-auto-tips{margin-left:4px}.paraui-v4-tag.paraui-v4-tag-has-color,.paraui-v4-tag.paraui-v4-tag-has-color svg,.paraui-v4-tag.paraui-v4-tag-has-color svg:hover{color:inherit}.paraui-v4-tag.paraui-v4-tag-blue{color:#2e65e6;background-color:#2e65e61a}.paraui-v4-tag.paraui-v4-tag-green{color:#13bf4c;background-color:#13bf4c1a}.paraui-v4-tag.paraui-v4-tag-yellow{color:#ff9326;background-color:#ff93261a}.paraui-v4-tag.paraui-v4-tag-red{color:#f44242;background-color:#f442421a}.paraui-v4-tag.paraui-v4-tag-hidden{display:none}.paraui-v4-tag-small svg{font-size:12px}.paraui-v4-tag-group{display:flex;align-items:center;flex-flow:row wrap}.paraui-v4-tag-group .tag-group-input{height:24px;align-self:flex-start;font-size:14px;color:#1d2126;text-indent:8px;border:1px solid rgb(46,101,230);border-radius:4px}.paraui-v4-tag-group .tag-group-input .tag-group-input-large{height:28px}.paraui-v4-tag-group .tag-group-new .tag-group-new-icon{padding:0 5px}.paraui-v4-tag-group .tag-group-add-btn{border:1px dashed rgb(212,218,227)}.paraui-v4-tag-group .tag-group-add-btn .tag-edit-icon{background:none!important}.paraui-v4-tag-group .tag-group-add-btn:hover{cursor:pointer}.paraui-v4-tag-group .tag-group-add-btn:hover svg{color:#2e65e6}.paraui-v4-tag-group .tag-group-add-btn:hover .tag-text{color:#2e65e6}
+@charset "UTF-8";.paraui-v4-tag-outline.paraui-v4-tag{border:.5px solid rgb(92,101,115)}.paraui-v4-tag-outline.paraui-v4-tag-blue{border:.5px solid rgb(46,101,230)}.paraui-v4-tag-outline.paraui-v4-tag-green{border:.5px solid rgb(19,191,76)}.paraui-v4-tag-outline.paraui-v4-tag-yellow{border:.5px solid rgb(255,147,38)}.paraui-v4-tag-outline.paraui-v4-tag-red{border:.5px solid rgb(244,66,66)}.paraui-v4-tag-edit-input{align-self:flex-start;height:24px;font-size:14px;color:#1d2126;text-indent:8px;border:1px solid rgb(46,101,230);border-radius:4px}.paraui-v4-tag{display:inline-flex;align-items:center;justify-content:center;max-width:100%;height:24px;padding:0 10px;font-size:14px;line-height:18px;color:#1d2126;white-space:nowrap;vertical-align:bottom;background:#eaecf1;border-radius:2px}.paraui-v4-tag .tag-custom-icon:hover{cursor:default;background:none!important}.paraui-v4-tag .tag-close-icon:hover{background-color:#d4dae3}.paraui-v4-tag .tag-edit-icon{display:flex}.paraui-v4-tag.paraui-v4-tag-large{line-height:28px}.paraui-v4-tag.paraui-v4-tag-medium{line-height:24px}.paraui-v4-tag.paraui-v4-tag-small{height:20px;padding:0 6px;font-size:12px}.paraui-v4-tag.paraui-v4-tag-small>svg{font-size:12px}.paraui-v4-tag.paraui-v4-tag-small>svg+.paraui-v4-auto-tips{margin-left:2px}.paraui-v4-tag.paraui-v4-tag-small .tag-close-icon{margin-left:2px}.paraui-v4-tag.paraui-v4-tag-small .tag-edit-icon{font-size:12px}.paraui-v4-tag>svg{font-size:16px;color:inherit}.paraui-v4-tag .tag-edit-icon{font-size:16px;color:inherit;cursor:pointer}.paraui-v4-tag .tag-edit-icon>svg{color:#1d2126}.paraui-v4-tag .tag-close-icon{margin-left:4px;font-size:16px;color:inherit;cursor:pointer}.paraui-v4-tag .tag-close-icon:hover{color:inherit}.paraui-v4-tag>svg+.paraui-v4-auto-tips{margin-left:4px}.paraui-v4-tag.paraui-v4-tag-has-color,.paraui-v4-tag.paraui-v4-tag-has-color svg,.paraui-v4-tag.paraui-v4-tag-has-color svg:hover{color:inherit}.paraui-v4-tag.paraui-v4-tag-blue{color:#2e65e6;background-color:#2e65e61a}.paraui-v4-tag.paraui-v4-tag-green{color:#13bf4c;background-color:#13bf4c1a}.paraui-v4-tag.paraui-v4-tag-yellow{color:#ff9326;background-color:#ff93261a}.paraui-v4-tag.paraui-v4-tag-red{color:#f44242;background-color:#f442421a}.paraui-v4-tag.paraui-v4-tag-hidden{display:none}.paraui-v4-tag-small svg{font-size:12px}.paraui-v4-tag-group{display:flex;flex-flow:row wrap;align-items:center}.paraui-v4-tag-group .tag-group-input{align-self:flex-start;height:24px;font-size:14px;color:#1d2126;text-indent:8px;border:1px solid rgb(46,101,230);border-radius:4px}.paraui-v4-tag-group .tag-group-input .tag-group-input-large{height:28px}.paraui-v4-tag-group .tag-group-new .tag-group-new-icon{padding:0 5px}.paraui-v4-tag-group .tag-group-add-btn{border:1px dashed rgb(212,218,227)}.paraui-v4-tag-group .tag-group-add-btn .tag-edit-icon{background:none!important}.paraui-v4-tag-group .tag-group-add-btn:hover{cursor:pointer}.paraui-v4-tag-group .tag-group-add-btn:hover svg{color:#2e65e6}.paraui-v4-tag-group .tag-group-add-btn:hover .tag-text{color:#2e65e6}

package/lib/Tag/index.d.ts

@@ -30,7 +30,7 @@ export interface TagProps extends React.HTMLAttributes<HTMLSpanElement> {
     /** cls */
     className?: string;
     /** 大小 */
-    size?: 'small' | 'large';
+    size?: 'small' | 'medium' | 'large';
     /** 编辑输入框样式 */
     editInputClassName?: string;
     /** 编辑输入框宽度 */

package/lib/Tag/index.js

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});require('./index.css');const s=require("../_virtual/jsx-runtime.js"),n=require("react");require("../node_modules/@para-ui/icons/SvgIcon/index.js");const le=require("../node_modules/@para-ui/icons/Close/index.js"),ae=require("../node_modules/@para-ui/icons/EditOutline/index.js"),w=require("clsx"),ue=require("./TagGroup.js"),o=require("../GlobalContext/constant.js"),ce=require("../AutoTips/index.js"),p=require("../node_modules/tinycolor2/esm/tinycolor.js"),de=require("../Hooks/useGlobalProps.js");;/* empty css            */const pe=["blue","green","yellow","red"],fe=a=>{const{type:f="normal",className:A,children:r,icon:u,color:t,onClose:G,onEdit:x,getWidth:g,tagChange:h,editInputClassName:F,closeIcon:m,closable:_=!1,editable:C=!1,size:E="larage",maxWidth:B,style:O,visible:R,editInputWidth:z,tipMaxWidth:D,marginBottom:j,marginRight:v,...K}=de.default(a,"TagGroup"),[H,b]=n.useState(!0),[I,$]=n.useState(!1),[y,S]=n.useState(""),[q,J]=n.useState(0),[Q,c]=n.useState(!1),[U,d]=n.useState(!1),X=n.useRef(),i=n.useRef(null);n.useEffect(()=>{"visible"in a&&b(!!R)},[R]),n.useEffect(()=>{if(!i.current)return;const{offsetWidth:e}=i.current;J(e),g&&g(e)},[i,I]),n.useEffect(()=>{typeof r=="string"&&S(r)},[r]);const l=()=>t?pe.includes(t):!1,Y={color:t&&!l()?t:void 0,backgroundColor:t&&!l()?p.default(t).setAlpha(.1).toRgbString():void 0,borderColor:t&&!l()&&f==="outline"?t:void 0,maxWidth:B,marginBottom:j,marginRight:v,...O},M={backgroundColor:Q?p.default(t).setAlpha(.1).toRgbString():void 0,borderRadius:"2px"},Z={backgroundColor:U?p.default(t).setAlpha(.1).toRgbString():void 0,marginRight:r?E==="small"?"2px":"4px":void 0,borderRadius:"2px"},ee=w(`${o.$prefixCls}-tag`,`${o.$prefixCls}-tag-${f}`,`${o.$prefixCls}-tag-${E}`,A,{[`${o.$prefixCls}-tag-has-color`]:t,[`${o.$prefixCls}-tag-hidden`]:!H,[`${o.$prefixCls}-tag-${t}`]:l()}),N=e=>{e.stopPropagation(),G?.(e),c(!1),!e.defaultPrevented&&("visible"in a||b(!1))},P=()=>{c(!0)},k=()=>{c(!1)},T=()=>{d(!0)},W=()=>{d(!1)},te=e=>{e.stopPropagation(),x&&x(e),!e.defaultPrevented&&(d(!1),$(!0))},se=()=>_?m?s.jsxRuntimeExports.jsx("span",{className:"tag-close-icon",style:M,onClick:N,onMouseEnter:P,onMouseLeave:k,children:m}):s.jsxRuntimeExports.jsx(le.Close,{className:"tag-close-icon",style:M,onClick:N,onMouseEnter:P,onMouseLeave:k}):null,ne=()=>(C||u)&&s.jsxRuntimeExports.jsx("span",{className:`tag-edit-icon ${u?"tag-custom-icon":""}`,style:Z,onMouseEnter:T,onMouseLeave:W,children:C?s.jsxRuntimeExports.jsx(ae.EditOutline,{onMouseEnter:T,onMouseLeave:W,className:"tag-edit-icon",onClick:te}):s.jsxRuntimeExports.jsx(s.jsxRuntimeExports.Fragment,{children:u})}),oe=e=>{S(e.target.value),h&&h(e.target.value)},L=()=>{$(!1)},re=e=>{(e.keyCode===13||e.which===13)&&L()},ie=()=>{const e=w(`${o.$prefixCls}-tag-edit-input`,F);return s.jsxRuntimeExports.jsx("input",{style:{width:z||q,minWidth:q,marginBottom:j,marginRight:v},type:"text",autoFocus:!0,ref:X,className:e,value:y,onChange:oe,onBlur:L,onKeyDown:re})};return s.jsxRuntimeExports.jsx(s.jsxRuntimeExports.Fragment,{children:I?ie():s.jsxRuntimeExports.jsxs("span",{...K,className:ee,style:Y,ref:i,children:[ne(),r&&s.jsxRuntimeExports.jsx(ce.default,{tipMaxWidth:D,children:s.jsxRuntimeExports.jsx("span",{className:"tag-text",children:y||r})}),se()]})})},V=fe;exports.TagGroup=ue.default;exports.Tag=V;exports.default=V;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});require('./index.css');const s=require("../_virtual/jsx-runtime.js"),n=require("react");require("../node_modules/@para-ui/icons/SvgIcon/index.js");const le=require("../node_modules/@para-ui/icons/Close/index.js"),ae=require("../node_modules/@para-ui/icons/EditOutline/index.js"),w=require("clsx"),ue=require("./TagGroup.js"),o=require("../GlobalContext/constant.js"),ce=require("../AutoTips/index.js"),p=require("../node_modules/tinycolor2/esm/tinycolor.js"),de=require("../Hooks/useGlobalProps.js");;/* empty css            */const pe=["blue","green","yellow","red"],fe=a=>{const{type:f="normal",className:A,children:r,icon:u,color:t,onClose:G,onEdit:x,getWidth:g,tagChange:h,editInputClassName:F,closeIcon:m,closable:_=!1,editable:C=!1,size:E="small",maxWidth:B,style:O,visible:R,editInputWidth:z,tipMaxWidth:D,marginBottom:j,marginRight:v,...K}=de.default(a,"TagGroup"),[H,b]=n.useState(!0),[I,$]=n.useState(!1),[y,S]=n.useState(""),[q,J]=n.useState(0),[Q,c]=n.useState(!1),[U,d]=n.useState(!1),X=n.useRef(),i=n.useRef(null);n.useEffect(()=>{"visible"in a&&b(!!R)},[R]),n.useEffect(()=>{if(!i.current)return;const{offsetWidth:e}=i.current;J(e),g&&g(e)},[i,I]),n.useEffect(()=>{typeof r=="string"&&S(r)},[r]);const l=()=>t?pe.includes(t):!1,Y={color:t&&!l()?t:void 0,backgroundColor:t&&!l()?p.default(t).setAlpha(.1).toRgbString():void 0,borderColor:t&&!l()&&f==="outline"?t:void 0,maxWidth:B,marginBottom:j,marginRight:v,...O},M={backgroundColor:Q?p.default(t).setAlpha(.1).toRgbString():void 0,borderRadius:"2px"},Z={backgroundColor:U?p.default(t).setAlpha(.1).toRgbString():void 0,marginRight:r?E==="small"?"2px":"4px":void 0,borderRadius:"2px"},ee=w(`${o.$prefixCls}-tag`,`${o.$prefixCls}-tag-${f}`,`${o.$prefixCls}-tag-${E}`,A,{[`${o.$prefixCls}-tag-has-color`]:t,[`${o.$prefixCls}-tag-hidden`]:!H,[`${o.$prefixCls}-tag-${t}`]:l()}),N=e=>{e.stopPropagation(),G?.(e),c(!1),!e.defaultPrevented&&("visible"in a||b(!1))},P=()=>{c(!0)},k=()=>{c(!1)},T=()=>{d(!0)},W=()=>{d(!1)},te=e=>{e.stopPropagation(),x&&x(e),!e.defaultPrevented&&(d(!1),$(!0))},se=()=>_?m?s.jsxRuntimeExports.jsx("span",{className:"tag-close-icon",style:M,onClick:N,onMouseEnter:P,onMouseLeave:k,children:m}):s.jsxRuntimeExports.jsx(le.Close,{className:"tag-close-icon",style:M,onClick:N,onMouseEnter:P,onMouseLeave:k}):null,ne=()=>(C||u)&&s.jsxRuntimeExports.jsx("span",{className:`tag-edit-icon ${u?"tag-custom-icon":""}`,style:Z,onMouseEnter:T,onMouseLeave:W,children:C?s.jsxRuntimeExports.jsx(ae.EditOutline,{onMouseEnter:T,onMouseLeave:W,className:"tag-edit-icon",onClick:te}):s.jsxRuntimeExports.jsx(s.jsxRuntimeExports.Fragment,{children:u})}),oe=e=>{S(e.target.value),h&&h(e.target.value)},L=()=>{$(!1)},re=e=>{(e.keyCode===13||e.which===13)&&L()},ie=()=>{const e=w(`${o.$prefixCls}-tag-edit-input`,F);return s.jsxRuntimeExports.jsx("input",{style:{width:z||q,minWidth:q,marginBottom:j,marginRight:v},type:"text",autoFocus:!0,ref:X,className:e,value:y,onChange:oe,onBlur:L,onKeyDown:re})};return s.jsxRuntimeExports.jsx(s.jsxRuntimeExports.Fragment,{children:I?ie():s.jsxRuntimeExports.jsxs("span",{...K,className:ee,style:Y,ref:i,children:[ne(),r&&s.jsxRuntimeExports.jsx(ce.default,{tipMaxWidth:D,children:s.jsxRuntimeExports.jsx("span",{className:"tag-text",children:y||r})}),se()]})})},V=fe;exports.TagGroup=ue.default;exports.Tag=V;exports.default=V;
 //# sourceMappingURL=index.js.map

package/lib/Tag/style/index.css

@@ -1 +1 @@
-.paraui-v4-tag-outline.paraui-v4-tag{border:.5px solid #5c6573}.paraui-v4-tag-outline.paraui-v4-tag-blue{border:.5px solid #2e65e6}.paraui-v4-tag-outline.paraui-v4-tag-green{border:.5px solid #13bf4c}.paraui-v4-tag-outline.paraui-v4-tag-yellow{border:.5px solid #ff9326}.paraui-v4-tag-outline.paraui-v4-tag-red{border:.5px solid #f44242}.paraui-v4-tag-edit-input{height:24px;align-self:flex-start;font-size:14px;color:#1d2126;text-indent:8px;border:1px solid #2e65e6;border-radius:4px}.paraui-v4-tag{vertical-align:bottom;display:inline-flex;justify-content:center;align-items:center;max-width:100%;height:24px;padding:0 10px;font-size:14px;color:#1d2126;white-space:nowrap;background:#eaecf1;border-radius:2px;line-height:18px}.paraui-v4-tag .tag-custom-icon:hover{background:none !important;cursor:default}.paraui-v4-tag .tag-close-icon:hover{background-color:#d4dae3}.paraui-v4-tag .tag-edit-icon{display:flex}.paraui-v4-tag.paraui-v4-tag-small{height:20px;font-size:12px;padding:0 6px}.paraui-v4-tag.paraui-v4-tag-small>svg{font-size:12px}.paraui-v4-tag.paraui-v4-tag-small>svg+.paraui-v4-auto-tips{margin-left:2px}.paraui-v4-tag.paraui-v4-tag-small .tag-close-icon{margin-left:2px}.paraui-v4-tag.paraui-v4-tag-small .tag-edit-icon{font-size:12px}.paraui-v4-tag>svg{color:inherit;font-size:16px}.paraui-v4-tag .tag-edit-icon{color:inherit;font-size:16px;cursor:pointer}.paraui-v4-tag .tag-edit-icon>svg{color:#1d2126}.paraui-v4-tag .tag-close-icon{margin-left:4px;color:inherit;font-size:16px;cursor:pointer}.paraui-v4-tag .tag-close-icon:hover{color:inherit}.paraui-v4-tag>svg+.paraui-v4-auto-tips{margin-left:4px}.paraui-v4-tag.paraui-v4-tag-has-color,.paraui-v4-tag.paraui-v4-tag-has-color svg,.paraui-v4-tag.paraui-v4-tag-has-color svg:hover{color:inherit}.paraui-v4-tag.paraui-v4-tag-blue{color:#2e65e6;background-color:rgba(46,101,230,.1)}.paraui-v4-tag.paraui-v4-tag-green{color:#13bf4c;background-color:rgba(19,191,76,.1)}.paraui-v4-tag.paraui-v4-tag-yellow{color:#ff9326;background-color:rgba(255,147,38,.1)}.paraui-v4-tag.paraui-v4-tag-red{color:#f44242;background-color:rgba(244,66,66,.1)}.paraui-v4-tag.paraui-v4-tag-hidden{display:none}.paraui-v4-tag-small svg{font-size:12px}.paraui-v4-tag-group{display:flex;align-items:center;flex-flow:row wrap}.paraui-v4-tag-group .tag-group-input{height:24px;align-self:flex-start;font-size:14px;color:#1d2126;text-indent:8px;border:1px solid #2e65e6;border-radius:4px}.paraui-v4-tag-group .tag-group-input .tag-group-input-large{height:28px}.paraui-v4-tag-group .tag-group-new .tag-group-new-icon{padding:0 5px}.paraui-v4-tag-group .tag-group-add-btn{border:1px dashed #d4dae3}.paraui-v4-tag-group .tag-group-add-btn .tag-edit-icon{background:none !important}.paraui-v4-tag-group .tag-group-add-btn:hover{cursor:pointer}.paraui-v4-tag-group .tag-group-add-btn:hover svg{color:#2e65e6}.paraui-v4-tag-group .tag-group-add-btn:hover .tag-text{color:#2e65e6}
+.paraui-v4-tag-outline.paraui-v4-tag{border:.5px solid #5c6573}.paraui-v4-tag-outline.paraui-v4-tag-blue{border:.5px solid #2e65e6}.paraui-v4-tag-outline.paraui-v4-tag-green{border:.5px solid #13bf4c}.paraui-v4-tag-outline.paraui-v4-tag-yellow{border:.5px solid #ff9326}.paraui-v4-tag-outline.paraui-v4-tag-red{border:.5px solid #f44242}.paraui-v4-tag-edit-input{align-self:flex-start;height:24px;font-size:14px;color:#1d2126;text-indent:8px;border:1px solid #2e65e6;border-radius:4px}.paraui-v4-tag{display:inline-flex;align-items:center;justify-content:center;max-width:100%;height:24px;padding:0 10px;font-size:14px;line-height:18px;color:#1d2126;white-space:nowrap;vertical-align:bottom;background:#eaecf1;border-radius:2px}.paraui-v4-tag .tag-custom-icon:hover{cursor:default;background:none !important}.paraui-v4-tag .tag-close-icon:hover{background-color:#d4dae3}.paraui-v4-tag .tag-edit-icon{display:flex}.paraui-v4-tag.paraui-v4-tag-large{line-height:28px}.paraui-v4-tag.paraui-v4-tag-medium{line-height:24px}.paraui-v4-tag.paraui-v4-tag-small{height:20px;padding:0 6px;font-size:12px}.paraui-v4-tag.paraui-v4-tag-small>svg{font-size:12px}.paraui-v4-tag.paraui-v4-tag-small>svg+.paraui-v4-auto-tips{margin-left:2px}.paraui-v4-tag.paraui-v4-tag-small .tag-close-icon{margin-left:2px}.paraui-v4-tag.paraui-v4-tag-small .tag-edit-icon{font-size:12px}.paraui-v4-tag>svg{font-size:16px;color:inherit}.paraui-v4-tag .tag-edit-icon{font-size:16px;color:inherit;cursor:pointer}.paraui-v4-tag .tag-edit-icon>svg{color:#1d2126}.paraui-v4-tag .tag-close-icon{margin-left:4px;font-size:16px;color:inherit;cursor:pointer}.paraui-v4-tag .tag-close-icon:hover{color:inherit}.paraui-v4-tag>svg+.paraui-v4-auto-tips{margin-left:4px}.paraui-v4-tag.paraui-v4-tag-has-color,.paraui-v4-tag.paraui-v4-tag-has-color svg,.paraui-v4-tag.paraui-v4-tag-has-color svg:hover{color:inherit}.paraui-v4-tag.paraui-v4-tag-blue{color:#2e65e6;background-color:rgba(46,101,230,.1)}.paraui-v4-tag.paraui-v4-tag-green{color:#13bf4c;background-color:rgba(19,191,76,.1)}.paraui-v4-tag.paraui-v4-tag-yellow{color:#ff9326;background-color:rgba(255,147,38,.1)}.paraui-v4-tag.paraui-v4-tag-red{color:#f44242;background-color:rgba(244,66,66,.1)}.paraui-v4-tag.paraui-v4-tag-hidden{display:none}.paraui-v4-tag-small svg{font-size:12px}.paraui-v4-tag-group{display:flex;flex-flow:row wrap;align-items:center}.paraui-v4-tag-group .tag-group-input{align-self:flex-start;height:24px;font-size:14px;color:#1d2126;text-indent:8px;border:1px solid #2e65e6;border-radius:4px}.paraui-v4-tag-group .tag-group-input .tag-group-input-large{height:28px}.paraui-v4-tag-group .tag-group-new .tag-group-new-icon{padding:0 5px}.paraui-v4-tag-group .tag-group-add-btn{border:1px dashed #d4dae3}.paraui-v4-tag-group .tag-group-add-btn .tag-edit-icon{background:none !important}.paraui-v4-tag-group .tag-group-add-btn:hover{cursor:pointer}.paraui-v4-tag-group .tag-group-add-btn:hover svg{color:#2e65e6}.paraui-v4-tag-group .tag-group-add-btn:hover .tag-text{color:#2e65e6}