cnhis-design-vue 3.3.1-beta.1 → 3.3.1-beta.10

package/es/components/iho-table/src/plugins/stickyFixedPlugin.js

@@ -1 +1 @@
-import{onBeforeUnmount as e,createVNode as l,defineComponent as t,inject as i,computed as r,watch as d,onMounted as o}from"vue";import{traverse as u}from"../../../../shared/utils/index.js";import{promiseTimeout as n}from"@vueuse/shared";import{last as a,first as s}from"lodash-es";import"../../index.js";import{LOWEST_PRIORITY as f,InjectionIhoTableConfig as h,InjectionIhoTableXeInstance as c}from"../constants/index.js";import{useUUIDMap as v,mergeVxeStyle as g,mergeVxeClass as m}from"../utils/index.js";import{defineTablePlugin as x}from"../hooks/useTablePlugin.js";function p(){const p="stickyFixedPlugin";return x({name:p,apply(x){const{getItemFromUUID:y,removeItemFromUUID:b}=v((()=>({$xeTable:null,left:[],noFixed:[],right:[]}))),{getItemFromUUID:B,removeItemFromUUID:L}=v((()=>({tableBody:null,tableHeader:null,leftBorderLeftEle:null,leftBorderTopEle:null,leftShadowEle:null,rightBorderLeftEle:null,rightBorderTopEle:null})),!1);function E(e){const l=B(e),{leftShadowEle:t,rightBorderLeftEle:i,tableBody:r}=l;r&&(t&&(r.scrollLeft>0?t.classList.add("scrolling--middle"):null==t||t.classList.remove("scrolling--middle")),i&&(Math.ceil(r.scrollLeft)<r.scrollWidth-r.clientWidth?i.classList.add("scrolling--middle"):null==i||i.classList.remove("scrolling--middle")))}function F(e){const l=B(e),{tableBody:t,leftBorderLeftEle:i,leftShadowEle:r,leftBorderTopEle:d,rightBorderTopEle:o,rightBorderLeftEle:u,tableHeader:n}=l;if(!t||!n)return;const{$xeTable:f,left:h,right:c}=y(e);if(i&&d&&r)if(f){const e=h.map((e=>f.getColumnByField(e.field))).reduce(((e,l)=>e+((null==l?void 0:l.resizeWidth)||(null==l?void 0:l.renderWidth)||40)),0);r.style.left=e-4+"px",d.style.width=e-1+"px"}else{const e=a(null==n?void 0:n.querySelectorAll("th.iho-table--fixed-left"));e&&(r.style.left=e.offsetLeft+e.clientWidth-4+"px",d.style.width=e.offsetLeft+e.clientWidth-1+"px")}if(o&&u){const e=t.scrollHeight>t.clientHeight;if(f){const l=c.map((e=>f.getColumnByField(e.field))).reduce(((e,l)=>e+((null==l?void 0:l.resizeWidth)||(null==l?void 0:l.renderWidth)||40)),0);u.style.right=l-3+(e?10:0)+"px",o.style.width=l+(e?10:0)+"px",e&&o.style.setProperty("--c-header-height",n.clientHeight-2+"px")}else{const l=s(null==n?void 0:n.querySelectorAll("th.iho-table--fixed-right"));l&&(u.style.right=10+t.clientWidth-l.offsetLeft-(e?0:10)+"px",o.style.width=t.clientWidth-l.offsetLeft+(e?10:0)+"px",e&&o.style.setProperty("--c-header-height",n.clientHeight-2+"px"))}}}x.configHooks.config.tap(p,((e,{$table:l})=>{var t;if(!(null==(t=e.stickyFixedConfig)?void 0:t.enable)||!e.uuid)return e;const i=e=>{if(!l.value)return{left:0,right:0};return{left:l.value.getColumns().slice(0,e).reduce(((e,l)=>e+(l.resizeWidth||l.renderWidth)),0),right:l.value.getColumns().slice(e+1).reduce(((e,l)=>e+(l.resizeWidth||l.renderWidth)),0)}},r=y(e.uuid);function d(e){return r.left.some((l=>l.field===e.field))||r.right.some((l=>l.field===e.field))}return e.cellStyle=g((({_columnIndex:e,column:l})=>{if(d(l))return{"--iho-table-fixed-left":i(e).left,"--iho-table-fixed-right":i(e).right}}),e.cellStyle),e.headerCellStyle=g((({_columnIndex:e,column:l})=>{if(d(l))return{"--iho-table-fixed-left":i(e).left,"--iho-table-fixed-right":i(e).right}}),e.headerCellStyle),e})),x.fieldHooks.fieldList.tap({name:p,stage:f},((e,l)=>{var t;if(!(null==(t=l.stickyFixedConfig)?void 0:t.enable)||!l.uuid)return e;const i=y(l.uuid);return i.left=[],i.noFixed=[],i.right=[],u(e,(e=>{e.fixed?(i[e.fixed].push(e),e.className=m(e.className,`iho-table--fixed-${e.fixed}`),e.headerClassName=m(e.headerClassName,`iho-table--fixed-${e.fixed}`)):i.noFixed.push(e),e.fixed=void 0})),[...i.left||[],...i.noFixed||[],...i.right||[]]})),x.setupHooks.setup.tap(p,(l=>{e((()=>{var e;(null==(e=l.value)?void 0:e.uuid)&&(L(l.value.uuid),b(l.value.uuid))}))})),x.dataHooks.dataEnd.tap(p,(async e=>{var l;(null==(l=e.stickyFixedConfig)?void 0:l.enable)&&e.uuid&&(await n(100),F(e.uuid))})),x.eventHooks.onScroll.tap(p,(({isX:e},l)=>{var t;e&&(null==(t=l.stickyFixedConfig)?void 0:t.enable)&&l.uuid&&E(l.uuid)})),x.eventHooks.onResizableChange.tap(p,((e,l)=>{var t;(null==(t=l.stickyFixedConfig)?void 0:t.enable)&&l.uuid&&E(l.uuid)}));const k=t({setup(){const e=i(h),t=i(c),u=r((()=>{const l=y(e.value.uuid);return!(!l.left||!l.left.length)})),a=r((()=>{const l=y(e.value.uuid);return!(!l.right||!l.right.length)})),s=l=>{B(e.value.uuid).leftBorderLeftEle=l},f=l=>{B(e.value.uuid).leftBorderTopEle=l},v=l=>{B(e.value.uuid).leftShadowEle=l},g=l=>{B(e.value.uuid).rightBorderLeftEle=l},m=l=>{B(e.value.uuid).rightBorderTopEle=l};function x(){if(y(e.value.uuid).$xeTable=t.value,!t.value||!e.value.uuid)return;const{refTableBody:l,refTableHeader:i}=t.value.getRefMaps();if(!l.value)return;const r=B(e.value.uuid);r.tableBody=l.value.$el,r.tableHeader=i.value.$el,E(e.value.uuid),F(e.value.uuid)}return d([()=>y(e.value.uuid).left,()=>y(e.value.uuid).right],x),o((async()=>{await n(100),x()})),()=>[u.value?[l("div",{class:"iho-table__fixedLeftBorderLeft",ref:s},null),l("div",{class:"iho-table__fixedLeftBorderTop",ref:f},null),l("div",{class:"iho-table__fixedLeftShadow",ref:v},null)]:null,a.value?[l("div",{class:"iho-table__fixedRightBorderLeft",ref:g},null),l("div",{class:"iho-table__fixedRightBorderTop",ref:m},null)]:null]}}),C=t({setup(){const e=i(h);return()=>{var t,i;return(null==(i=null==(t=e.value)?void 0:t.stickyFixedConfig)?void 0:i.enable)?l(k,null,null):null}}});x.domInsertHooks.header.tap(p,(e=>(e.push(l(C,null,null)),e)))}})}export{p as stickyFixedPlugin};
+import{onBeforeUnmount as e,createVNode as l,defineComponent as t,inject as i,computed as r,watch as d,onMounted as o}from"vue";import{traverse as u}from"../../../../shared/utils/index.js";import{promiseTimeout as n}from"@vueuse/shared";import{last as a,first as s}from"lodash-es";import"../../index.js";import{LOWEST_PRIORITY as f,InjectionIhoTableConfig as h,InjectionIhoTableXeInstance as c}from"../constants/index.js";import{useUUIDMap as v,mergeVxeStyle as g,mergeVxeClass as m}from"../utils/index.js";import{defineTablePlugin as x}from"../hooks/useTablePlugin.js";function p(){const p="stickyFixedPlugin";return x({name:p,apply(x){const{getItemFromUUID:y,removeItemFromUUID:b}=v((()=>({$xeTable:null,left:[],noFixed:[],right:[]}))),{getItemFromUUID:B,removeItemFromUUID:L}=v((()=>({tableBody:null,tableHeader:null,leftBorderLeftEle:null,leftBorderTopEle:null,leftShadowEle:null,rightBorderLeftEle:null,rightBorderTopEle:null})),!1);function E(e){const l=B(e),{leftShadowEle:t,rightBorderLeftEle:i,tableBody:r}=l;r&&(t&&(r.scrollLeft>0?t.classList.add("scrolling--middle"):null==t||t.classList.remove("scrolling--middle")),i&&(Math.ceil(r.scrollLeft)<r.scrollWidth-r.clientWidth?i.classList.add("scrolling--middle"):null==i||i.classList.remove("scrolling--middle")))}function F(e){const l=B(e),{tableBody:t,leftBorderLeftEle:i,leftShadowEle:r,leftBorderTopEle:d,rightBorderTopEle:o,rightBorderLeftEle:u,tableHeader:n}=l;if(!t||!n)return;const{$xeTable:f,left:h,right:c}=y(e);if(i&&d&&r)if(f){const e=h.map((e=>f.getColumnByField(e.field))).reduce(((e,l)=>e+((null==l?void 0:l.resizeWidth)||(null==l?void 0:l.renderWidth)||40)),0);r.style.left=e-4+"px",d.style.width=e-1+"px"}else{const e=a(null==n?void 0:n.querySelectorAll("th.iho-table--fixed-left"));e&&(r.style.left=e.offsetLeft+e.clientWidth-4+"px",d.style.width=e.offsetLeft+e.clientWidth-1+"px")}if(o&&u){const e=t.scrollHeight>t.clientHeight;if(f){const l=c.map((e=>f.getColumnByField(e.field))).reduce(((e,l)=>e+((null==l?void 0:l.resizeWidth)||(null==l?void 0:l.renderWidth)||40)),0);u.style.right=l-3+(e?10:0)+"px",o.style.width=l+(e?10:0)+"px",e&&o.style.setProperty("--c-header-height",n.clientHeight-2+"px")}else{const l=s(null==n?void 0:n.querySelectorAll("th.iho-table--fixed-right"));l&&(u.style.right=10+t.clientWidth-l.offsetLeft-(e?0:10)+"px",o.style.width=t.clientWidth-l.offsetLeft+(e?10:0)+"px",e&&o.style.setProperty("--c-header-height",n.clientHeight-2+"px"))}}}x.configHooks.config.tap(p,((e,{$table:l})=>{var t;if(!(null==(t=e.stickyFixedConfig)?void 0:t.enable)||!e.uuid)return e;const i=e=>{if(!l.value)return{left:0,right:0};return{left:l.value.getColumns().slice(0,e).reduce(((e,l)=>e+(l.resizeWidth||l.renderWidth)),0),right:l.value.getColumns().slice(e+1).reduce(((e,l)=>e+(l.resizeWidth||l.renderWidth)),0)}},r=y(e.uuid);function d(e){return r.left.some((l=>l.field===e.field))||r.right.some((l=>l.field===e.field))}return e.cellStyle=g((({_columnIndex:e,column:l})=>{if(d(l))return{"--iho-table-fixed-left":i(e).left,"--iho-table-fixed-right":i(e).right}}),e.cellStyle),e.headerCellStyle=g((({_columnIndex:e,column:l})=>{if(d(l))return{"--iho-table-fixed-left":i(e).left,"--iho-table-fixed-right":i(e).right}}),e.headerCellStyle),e})),x.fieldHooks.fieldList.tap({name:p,stage:f},((e,l)=>{var t;if(!(null==(t=l.stickyFixedConfig)?void 0:t.enable)||!l.uuid)return e;const i=y(l.uuid);return i.left=[],i.noFixed=[],i.right=[],u(e,(e=>{e.fixed?(i[e.fixed].push(e),e.className=m(e.className,`iho-table--fixed-${e.fixed}`),e.headerClassName=m(e.headerClassName,`iho-table--fixed-${e.fixed}`)):i.noFixed.push(e),e.fixed=void 0})),[...i.left||[],...i.noFixed||[],...i.right||[]]})),x.setupHooks.setup.tap(p,(l=>{e((()=>{var e;(null==(e=l.value)?void 0:e.uuid)&&(L(l.value.uuid),b(l.value.uuid))}))})),x.dataHooks.dataEnd.tap(p,(async(e,l)=>{var t;(null==(t=l.stickyFixedConfig)?void 0:t.enable)&&l.uuid&&(await n(100),F(l.uuid))})),x.eventHooks.onScroll.tap(p,(({isX:e},l)=>{var t;e&&(null==(t=l.stickyFixedConfig)?void 0:t.enable)&&l.uuid&&E(l.uuid)})),x.eventHooks.onResizableChange.tap(p,((e,l)=>{var t;(null==(t=l.stickyFixedConfig)?void 0:t.enable)&&l.uuid&&E(l.uuid)}));const k=t({setup(){const e=i(h),t=i(c),u=r((()=>{const l=y(e.value.uuid);return!(!l.left||!l.left.length)})),a=r((()=>{const l=y(e.value.uuid);return!(!l.right||!l.right.length)})),s=l=>{B(e.value.uuid).leftBorderLeftEle=l},f=l=>{B(e.value.uuid).leftBorderTopEle=l},v=l=>{B(e.value.uuid).leftShadowEle=l},g=l=>{B(e.value.uuid).rightBorderLeftEle=l},m=l=>{B(e.value.uuid).rightBorderTopEle=l};function x(){if(y(e.value.uuid).$xeTable=t.value,!t.value||!e.value.uuid)return;const{refTableBody:l,refTableHeader:i}=t.value.getRefMaps();if(!l.value)return;const r=B(e.value.uuid);r.tableBody=l.value.$el,r.tableHeader=i.value.$el,E(e.value.uuid),F(e.value.uuid)}return d([()=>y(e.value.uuid).left,()=>y(e.value.uuid).right],x),o((async()=>{await n(100),x()})),()=>[u.value?[l("div",{class:"iho-table__fixedLeftBorderLeft",ref:s},null),l("div",{class:"iho-table__fixedLeftBorderTop",ref:f},null),l("div",{class:"iho-table__fixedLeftShadow",ref:v},null)]:null,a.value?[l("div",{class:"iho-table__fixedRightBorderLeft",ref:g},null),l("div",{class:"iho-table__fixedRightBorderTop",ref:m},null)]:null]}}),C=t({setup(){const e=i(h);return()=>{var t,i;return(null==(i=null==(t=e.value)?void 0:t.stickyFixedConfig)?void 0:i.enable)?l(k,null,null):null}}});x.domInsertHooks.header.tap(p,(e=>(e.push(l(C,null,null)),e)))}})}export{p as stickyFixedPlugin};

package/es/components/iho-table/src/plugins/varialbleHeightPlugin.js

@@ -1 +1 @@
-import{unref as e,onBeforeUnmount as t,shallowReactive as o,createVNode as l,defineComponent as n,inject as r,ref as a,computed as s,provide as i,watch as u,onMounted as c,h as d}from"vue";import{traverse as p,widthAppend as f}from"../../../../shared/utils/index.js";import{doAnimation as m}from"../../../../shared/utils/anime.js";import{useThrottleFn as h}from"@vueuse/core";import{promiseTimeout as g}from"@vueuse/shared";import{last as v,isFunction as x,isNumber as y}from"lodash-es";import"../../index.js";import{InjectionIhoTableUUID as b}from"../constants/index.js";import{useUUIDMap as I,isVariableHeightColumn as w}from"../utils/index.js";import{defineTablePlugin as T}from"../hooks/useTablePlugin.js";class D{constructor(){this.records={},this.maxRecords=o(new Map)}set(e,t,o){if(this.records[e]||(this.records[e]={}),this.records[e][t]===o)return;this.records[e][t]=o;const l=Math.max(...Object.values(this.records[e]),0);this.maxRecords.get(e)!==l&&this.maxRecords.set(e,l)}getMax(e){return this.maxRecords.get(e)||0}}const{getItemFromUUID:R,removeItemFromUUID:M}=I((()=>new D),!0),{getItemFromUUID:S,removeItemFromUUID:H,setItemFromUUID:U}=I((()=>null)),{getItemFromUUID:C,removeItemFromUUID:$,setItemFromUUID:k}=I((()=>{}));let F={};function j(t,o,{scrollTop:l=0}){var n,r;const{uuid:a,rowConfig:s={}}=o;if(!a)return;const i=R(a),{oSize:u=0,gt:c=100}=null!=(n=C(a))?n:{},{internalData:d,reactData:p}=t,{scrollYStore:f,elemStore:m,afterFullData:h,fullDataRowIdData:g}=d;if(c>h.length)return;const y=null!=(r=s.height)?r:36,b=m["main-body-wrapper"],I=b?e(b):null;let w=I?Math.max(8,Math.ceil(I.clientHeight/y)+2+u):8;const T=[0];let D=0;if(l&&h.find(((e,o)=>{const n=t.getRowSeq(e),r=(v(T)||0)+Math.max(y,i.getMax(n));if(T.push(r),r>l)return D=Math.max(0,o-u),w+=Math.min(D,u),!0})),D>0&&x(o.spanMethod)){const{spanMethod:e}=o,l={rowspan:1,colspan:1};for(;D>0;){if(!t.getColumns().some(((t,o)=>{const{rowspan:n,colspan:r}=e({column:t,columnIndex:o,$columnIndex:o,row:h[D],rowIndex:D,$rowIndex:D,_rowIndex:D,isHidden:!t.visible,fixed:t.fixed,type:t.type,visibleData:h})||l;if(0===n&&0===r)return D--,!0})))break}}const M=`${T[D]}px`,S=`${h.reduce(((e,o)=>{const l=t.getRowSeq(o);return e+Math.max(y,i.getMax(l))}),0)}px`;["main","left","right"].forEach((t=>{const o=m[`${t}-body-table`],n=o?e(o):null;n&&(n.style.marginTop=M,n.scrollTop=l),["header","body","footer"].forEach((o=>{const l=m[`${t}-${o}-ySpace`],n=l?e(l):null;n&&(n.style.height=S)}))}));const H=Math.min(h.length,D+w);if(f.startIndex===D&&f.endIndex===H)return;f.startIndex=D,f.endIndex=H;const U=h.slice(f.startIndex,f.endIndex);U.forEach(((e,o)=>{const l=t.getRowid(e),n=g[l];n&&(n.$index=o)})),p.tableData.length=0,p.tableData.push(...U)}const Y=h(j,300);function E(){const o="variableHeightRendererPlugin";return T({name:o,vxe(e){F=n({props:{payload:{type:Object,required:!0}},setup(t){const o=r(b),n=r("$xetable"),p=a(),m=R(o),h=s((()=>t.payload.row[t.payload.column.field]));function v(){const{row:e,column:o}=t.payload,l=n.getRowSeq(e);if(!m||null==l||!p.value)return;const r=p.value.clientHeight;m.set(l,o.field,r)}i("updateCellHeight",v),u([()=>t.payload.rowIndex,()=>t.payload.column.field,h,()=>t.payload.column.renderWidth],(async()=>{await g(0),v()})),c((()=>{n&&!S(o)&&U(o,n),v()}));const I=s((()=>{var o,l,n,r,a;const s=null!=(l=null==(o=t.payload.column.editRender)?void 0:o.props)?l:{},i=null!=(r=null==(n=s.slots)?void 0:n.default)?r:s.slotFn;if(x(i))return i;const u=null==(a=t.payload.column.editRender)?void 0:a.name;if(u){const o=e.renderer.get(u);if(null==o?void 0:o.renderCell)return()=>o.renderCell(t.payload.column.editRender,t.payload)}return()=>h.value})),w=s((()=>{if(t.payload.column.treeNode)return"";const e=t.payload.column.renderWidth;return y(e)&&e>0?f(e-20-2):""}));return()=>l("div",{ref:p,style:{padding:"7px 0",width:w.value,overflow:"hidden"}},[d(I.value,t.payload)])}})},apply(n){function r(t){const o=S(t.uuid);if(!o)return;t.scrollY={enabled:!1},o.reactData.scrollYLoad=!1;const l=function(t){const o=t.internalData.elemStore["main-body-wrapper"];return o?e(o):null}(o);l&&j(o,t,{scrollTop:l.scrollTop})}function a(e){if(!e.uuid)return;const t=C(e.uuid);t&&(e.scrollY=t),setTimeout((()=>r(e)),300)}function s(e){return l(F,{payload:e},null)}n.dataHooks.dataStart.tap(o,a),n.eventHooks.onFilterChange.tap(o,((e,t)=>a(t))),n.eventHooks.onSortChange.tap(o,((e,t)=>a(t))),n.eventHooks.onToggleTreeExpand.tap(o,((e,t)=>a(t))),n.eventHooks.onResizableChange.tap(o,(async({column:e},t)=>{e.editRender&&e.editRender.props&&w(e.editRender.props)&&a(t)})),n.eventHooks.onScroll.tap(o,h(((e,t)=>{if(e.isX)return;const{uuid:o}=t;if(!o)return;const l=S(o);l&&j(l,t,e)}),100,!0,!0)),n.fieldHooks.field.tap(o,(e=>{if(w(e)){e.slots={...e.slots,default:s};const t=e.className,o="variable-height";e.className=t?function(e){return x(t)?[t(e),o]:[t,o]}:o}return e})),n.fieldHooks.fieldList.tap(o,((t,o,{$table:l})=>(o.uuid&&p(t,((t,n)=>{var a,s;if(w(t)){const t=null!=(s=null==(a=o.rowConfig)?void 0:a.height)?s:36,i=R(o.uuid),u=o.cellStyle;if(o.cellStyle=function(e){const o={};if(l.value){const n=Math.max(t,i.getMax(l.value.getRowSeq(e.row)));o.height=`${n}px`}return Object.assign(o,u?x(u)?u(e):u:null)},o.sortableConfig&&o.sortableConfig.enable){const t=o.sortableConfig.onEnd;o.sortableConfig.onEnd=function(l){const n=S(o.uuid);if(n){const{internalData:{elemStore:t}}=n,l=t["main-table-body"];l&&e(l)&&j(n,o,{scrollTop:e(l).scrollTop})}x(t)&&t(l)}}o.scrollY={...o.scrollY,mode:"default"},o.onWheel=function(t){let o=null,l=0,n=!0;return function(r){if(!t.uuid)return;const a=S(t.uuid);if(!a)return;const{internalData:s}=a,{isHover:i}=t.rowConfig||{},{deltaX:u,deltaY:c}=r,{refTableLeftBody:d,refTableRightBody:p,refTableBody:f}=a.getRefMaps(),h=c,g=u,v=h<0,x=e(f),y=x?x.$el:null;if(!y)return;if(v?y.scrollTop<=0:y.scrollTop>=y.scrollHeight-y.clientHeight)return;const b=y.scrollTop+h,I=y.scrollLeft+g;if(b===s.lastScrollTop)return;r.preventDefault(),s.lastScrollTop=b,s.lastScrollLeft=I,s.lastScrollTime=Date.now(),i&&a.clearHoverRow();const w=d.value,T=p.value,D=w?w.$el:null,R=T?T.$el:null,M=Math.min(100,Math.abs(Math.floor(h/2)));n&&(l=y.scrollTop,n=!1),l+=M*(v?-1:1),o&&o(),o=m(y.scrollTop,l,400,(e=>{y.scrollTop=e,D&&(D.scrollTop=e),R&&(R.scrollTop=e)}),"easeOutCubic",(()=>{l=y.scrollTop,n=!0})),Y(a,t,y)}}(o),setTimeout((()=>{k(o.uuid,o.scrollY),r(o)}),300),n()}})),t))),n.setupHooks.setup.tap(o,(e=>{t((()=>{e.value.uuid&&(M(e.value.uuid),H(e.value.uuid),$(e.value.uuid))}))}))}})}export{E as variableHeightRendererPlugin};
+import{unref as e,onBeforeUnmount as t,shallowReactive as o,createVNode as l,defineComponent as n,inject as r,ref as a,computed as s,provide as i,watch as u,onMounted as c,h as d}from"vue";import{traverse as p,widthAppend as f}from"../../../../shared/utils/index.js";import{doAnimation as m}from"../../../../shared/utils/anime.js";import{useThrottleFn as h}from"@vueuse/core";import{promiseTimeout as g}from"@vueuse/shared";import{last as v,isFunction as x,isNumber as y}from"lodash-es";import"../../index.js";import{InjectionIhoTableUUID as b}from"../constants/index.js";import{useUUIDMap as I,isVariableHeightColumn as w}from"../utils/index.js";import{defineTablePlugin as T}from"../hooks/useTablePlugin.js";class D{constructor(){this.records={},this.maxRecords=o(new Map)}set(e,t,o){if(this.records[e]||(this.records[e]={}),this.records[e][t]===o)return;this.records[e][t]=o;const l=Math.max(...Object.values(this.records[e]),0);this.maxRecords.get(e)!==l&&this.maxRecords.set(e,l)}getMax(e){return this.maxRecords.get(e)||0}}const{getItemFromUUID:R,removeItemFromUUID:M}=I((()=>new D),!0),{getItemFromUUID:S,removeItemFromUUID:H,setItemFromUUID:U}=I((()=>null)),{getItemFromUUID:C,removeItemFromUUID:$,setItemFromUUID:k}=I((()=>{}));let F={};function j(t,o,{scrollTop:l=0}){var n,r;const{uuid:a,rowConfig:s={}}=o;if(!a)return;const i=R(a),{oSize:u=0,gt:c=100}=null!=(n=C(a))?n:{},{internalData:d,reactData:p}=t,{scrollYStore:f,elemStore:m,afterFullData:h,fullDataRowIdData:g}=d;if(c>h.length)return;const y=null!=(r=s.height)?r:36,b=m["main-body-wrapper"],I=b?e(b):null;let w=I?Math.max(8,Math.ceil(I.clientHeight/y)+2+u):8;const T=[0];let D=0;if(l&&h.find(((e,o)=>{const n=t.getRowSeq(e),r=(v(T)||0)+Math.max(y,i.getMax(n));if(T.push(r),r>l)return D=Math.max(0,o-u),w+=Math.min(D,u),!0})),D>0&&x(o.spanMethod)){const{spanMethod:e}=o,l={rowspan:1,colspan:1};for(;D>0;){if(!t.getColumns().some(((t,o)=>{const{rowspan:n,colspan:r}=e({column:t,columnIndex:o,$columnIndex:o,row:h[D],rowIndex:D,$rowIndex:D,_rowIndex:D,isHidden:!t.visible,fixed:t.fixed,type:t.type,visibleData:h})||l;if(0===n&&0===r)return D--,!0})))break}}const M=`${T[D]}px`,S=`${h.reduce(((e,o)=>{const l=t.getRowSeq(o);return e+Math.max(y,i.getMax(l))}),0)}px`;["main","left","right"].forEach((t=>{const o=m[`${t}-body-table`],n=o?e(o):null;n&&(n.style.marginTop=M,n.scrollTop=l),["header","body","footer"].forEach((o=>{const l=m[`${t}-${o}-ySpace`],n=l?e(l):null;n&&(n.style.height=S)}))}));const H=Math.min(h.length,D+w);if(f.startIndex===D&&f.endIndex===H)return;f.startIndex=D,f.endIndex=H;const U=h.slice(f.startIndex,f.endIndex);U.forEach(((e,o)=>{const l=t.getRowid(e),n=g[l];n&&(n.$index=o)})),p.tableData.length=0,p.tableData.push(...U)}const Y=h(j,300);function E(){const o="variableHeightRendererPlugin";return T({name:o,vxe(e){F=n({props:{payload:{type:Object,required:!0}},setup(t){const o=r(b),n=r("$xetable"),p=a(),m=R(o),h=s((()=>t.payload.row[t.payload.column.field]));function v(){const{row:e,column:o}=t.payload,l=n.getRowSeq(e);if(!m||null==l||!p.value)return;const r=p.value.clientHeight;m.set(l,o.field,r)}i("updateCellHeight",v),u([()=>t.payload.rowIndex,()=>t.payload.column.field,h,()=>t.payload.column.renderWidth],(async()=>{await g(0),v()})),c((()=>{n&&!S(o)&&U(o,n),v()}));const I=s((()=>{var o,l,n,r,a;const s=null!=(l=null==(o=t.payload.column.editRender)?void 0:o.props)?l:{},i=null!=(r=null==(n=s.slots)?void 0:n.default)?r:s.slotFn;if(x(i))return i;const u=null==(a=t.payload.column.editRender)?void 0:a.name;if(u){const o=e.renderer.get(u);if(null==o?void 0:o.renderCell)return()=>o.renderCell(t.payload.column.editRender,t.payload)}return()=>h.value})),w=s((()=>{if(t.payload.column.treeNode)return"";const e=t.payload.column.renderWidth;return y(e)&&e>0?f(e-20-2):""}));return()=>l("div",{ref:p,style:{padding:"7px 0",width:w.value,overflow:"hidden"}},[d(I.value,t.payload)])}})},apply(n){function r(t){const o=S(t.uuid);if(!o)return;t.scrollY={enabled:!1},o.reactData.scrollYLoad=!1;const l=function(t){const o=t.internalData.elemStore["main-body-wrapper"];return o?e(o):null}(o);l&&j(o,t,{scrollTop:l.scrollTop})}function a(e){if(!e.uuid)return;const t=C(e.uuid);t&&(e.scrollY=t),setTimeout((()=>r(e)),300)}function s(e){return l(F,{payload:e},null)}n.dataHooks.dataStart.tap(o,((e,t)=>a(t))),n.eventHooks.onFilterChange.tap(o,((e,t)=>a(t))),n.eventHooks.onSortChange.tap(o,((e,t)=>a(t))),n.eventHooks.onToggleTreeExpand.tap(o,((e,t)=>a(t))),n.eventHooks.onResizableChange.tap(o,(async({column:e},t)=>{e.editRender&&e.editRender.props&&w(e.editRender.props)&&a(t)})),n.eventHooks.onScroll.tap(o,h(((e,t)=>{if(e.isX)return;const{uuid:o}=t;if(!o)return;const l=S(o);l&&j(l,t,e)}),100,!0,!0)),n.fieldHooks.field.tap(o,(e=>{if(w(e)){e.slots={...e.slots,default:s};const t=e.className,o="variable-height";e.className=t?function(e){return x(t)?[t(e),o]:[t,o]}:o}return e})),n.fieldHooks.fieldList.tap(o,((t,o,{$table:l})=>(o.uuid&&p(t,((t,n)=>{var a,s;if(w(t)){const t=null!=(s=null==(a=o.rowConfig)?void 0:a.height)?s:36,i=R(o.uuid),u=o.cellStyle;if(o.cellStyle=function(e){const o={};if(l.value){const n=Math.max(t,i.getMax(l.value.getRowSeq(e.row)));o.height=`${n}px`}return Object.assign(o,u?x(u)?u(e):u:null)},o.sortableConfig&&o.sortableConfig.enable){const t=o.sortableConfig.onEnd;o.sortableConfig.onEnd=function(l){const n=S(o.uuid);if(n){const{internalData:{elemStore:t}}=n,l=t["main-table-body"];l&&e(l)&&j(n,o,{scrollTop:e(l).scrollTop})}x(t)&&t(l)}}o.scrollY={...o.scrollY,mode:"default"},o.onWheel=function(t){let o=null,l=0,n=!0;return function(r){if(!t.uuid)return;const a=S(t.uuid);if(!a)return;const{internalData:s}=a,{isHover:i}=t.rowConfig||{},{deltaX:u,deltaY:c}=r,{refTableLeftBody:d,refTableRightBody:p,refTableBody:f}=a.getRefMaps(),h=c,g=u,v=h<0,x=e(f),y=x?x.$el:null;if(!y)return;if(v?y.scrollTop<=0:y.scrollTop>=y.scrollHeight-y.clientHeight)return;const b=y.scrollTop+h,I=y.scrollLeft+g;if(b===s.lastScrollTop)return;r.preventDefault(),s.lastScrollTop=b,s.lastScrollLeft=I,s.lastScrollTime=Date.now(),i&&a.clearHoverRow();const w=d.value,T=p.value,D=w?w.$el:null,R=T?T.$el:null,M=Math.min(100,Math.abs(Math.floor(h/2)));n&&(l=y.scrollTop,n=!1),l+=M*(v?-1:1),o&&o(),o=m(y.scrollTop,l,400,(e=>{y.scrollTop=e,D&&(D.scrollTop=e),R&&(R.scrollTop=e)}),"easeOutCubic",(()=>{l=y.scrollTop,n=!0})),Y(a,t,y)}}(o),setTimeout((()=>{k(o.uuid,o.scrollY),r(o)}),300),n()}})),t))),n.setupHooks.setup.tap(o,(e=>{t((()=>{e.value.uuid&&(M(e.value.uuid),H(e.value.uuid),$(e.value.uuid))}))}))}})}export{E as variableHeightRendererPlugin};

package/es/components/iho-table/src/plugins/verticalTablePlugin/src/utils.js

@@ -1 +1 @@
-import{traverse as e,findAncestor as n,getStringWidth as t}from"../../../../../../shared/utils/index.js";import{isString as r,isNumber as i,constant as o,isFunction as a,noop as l,range as d,property as u}from"lodash-es";import{IhoTableRenderHelper as c}from"../../../utils/index.js";import{VERTICAL_CELL_TYPE as f}from"./constants.js";function s(e){var n;return!!(null==(n=e.verticalConfig)?void 0:n.enable)}function p(e){return!!r(e)&&e.startsWith("header_")}function h(e){return!!r(e)&&e.startsWith("body_")}function _(e){var n;return r(e)?+(null!=(n=e.split("_")[1])?n:-1):-1}function m(n,t){const r=[];return e(n,((n,i,o)=>{n.parent=o,n.children||(!function(n,t){if(!n.parent)return n[`header_${t}`]=n.title,void d(t+1).forEach((e=>{n[`header_${e}_colspan`]=e===t?t+1:0,n[`header_${e}_rowspan`]=e===t?1:0}));let r=0,i=n;const o=[n];for(;i.parent;)r++,i=i.parent,o.unshift(i);d(t+1).forEach((i=>{var a,l;const d=o[i];if(!d)return n[`header_${i}`]="",n[`header_${i}_colspan`]=0,void(n[`header_${i}_rowspan`]=0);n[`header_${i}`]=null!=(l=null==(a=o[i])?void 0:a.title)?l:"",n[`header_${i}_colspan`]=i<r?1:t-r+1,n[`header_${i}_rowspan`]=function(n){if(!n.children)return 1;let t=0;return e(n.children,(e=>{e.children||t++})),t}(d)}))}(n,t),r.push(n))})),r.forEach(((e,n)=>{const i=r[n-1];i&&Object.entries(e).forEach((([n,r])=>{n.match(/^header_(\d+)$/)&&r===i[n]&&r&&n!==`header_${t}`&&(e[`${n}_colspan`]=0,e[`${n}_rowspan`]=0)}))})),r}const g=Object.freeze({rowspan:1,colspan:1});function x(e,n,t){var r,i;if(!p(e.column.field)){if(!n||!t)return g;const r=n(j(e,t));return r?{rowspan:r.colspan,colspan:r.rowspan}:g}return{rowspan:null!=(r=e.row[e.column.field+"_rowspan"])?r:1,colspan:null!=(i=e.row[e.column.field+"_colspan"])?i:1}}const w=({cell:e}={})=>{const n=e&&e.querySelector("input,.n-input__input-el,.n-input__textarea-el");return n&&n.click(),n};function $(n,r){let i=120;return e(r,((e,r,o,a)=>{a===n&&(i=Math.max(i,t(e.title||"")+20+(c.hasTitlePrefix(e)?20:0)))})),Math.ceil(i)}function v(e,n,t){const r=D(t);let u=r.getTableConfig("verticalConfig.headerWidth");u="auto"===u?$:i(u)?o(u):a(u)?u:$;let c=r.getTableConfig("verticalConfig.bodyWidth");c=i(c)?o(c):a(c)?c:l;let s=r.getTableConfig("verticalConfig.bodyMinWidth");return s=i(s)?o(s):a(s)?s:o(120),[...d(n+1).map((e=>({field:`header_${e}`,title:`header_${e}`,width:u(e,t.originalFieldList),fixed:"left",editRender:{name:f,props:{},enable:!1}}))),...e.map(((e,n)=>({field:`body_${n}`,title:`body_${n}`,minWidth:s(n),width:c(n),editRender:{name:f,props:{},enable:!0,autofocus:w}})))]}function b(e){const t=n(e.target,(e=>"TD"===e.tagName||"TH"===e.tagName));if(!t)return;const r=t.className.match(/(body|header)_(\d+)/);if(!r)return;const[i,o,a]=r;return{fieldKey:i,type:o,sequence:+a}}function y(e){return e.originalField}function I(e,n){var t;return null==(t=e.originalData)?void 0:t[n]}function C(e,n){const t=_(n.field),r=y(e);return{row:I(e,t),rowIndex:t,$rowIndex:t,column:r,fixed:r.fixed,type:r.type}}function T(n){const t=[];return e(n,(e=>{"left"===e.fixed&&t.push(e)})),t}function D(e){return{getOriginDataByColumn(n){var t;return null==(t=e.originalData)?void 0:t[_(n.field)]},getTableConfig:n=>u(n)(e.originalTableConfig)}}function W(e,n){return new Proxy({},{get(t,r){var i;if("originalField"===r)return e;if("originalData"===r)return a(n)?n():n;if(p(r))return e[r];if(h(r)){const t=_(r);return"seq"===e.type?t+1:null==(i=n[t])?void 0:i[e.field]}return t[r]},set(t,r,i){if(!p(r)){const t=_(r);t>=0&&n[t]&&(n[t][e.field]=i)}return!0}})}function j({$columnIndex:e,$rowIndex:n,column:t,columnIndex:r,row:i,rowIndex:o,type:a,_columnIndex:l,_rowIndex:d},u){var c;if(t){const f=a;if(a=p(t.field)?"header":"body",i){const s=_(t.field);t=y(i),i="header"===a?void 0:I(i,s),l=r=e="header"===f?n||0:((null==(c=u.fixedLeftVerticalData)?void 0:c.length)||0)+(n||0),d=o=n="header"===a?-1:s}}return{column:t,row:i,_columnIndex:l,_rowIndex:d,columnIndex:r,rowIndex:o,$columnIndex:e,$rowIndex:n,type:a}}w.toString=()=>"input,.n-input__input-el";export{j as basicParamsConvert,m as bindHeaderInfoAndFlatten,W as createDataProxy,v as createVerticalFieldList,D as createVerticalStateHandler,T as findFixedLeftFields,_ as getHeaderDepthByField,C as getOriginBasePayload,y as getOriginFieldFromRowData,I as getOriginRowFromRowData,x as getSpanInfo,b as getVerticalInfoFromEvent,h as isVerticalBody,p as isVerticalHeader,s as isVerticalTable};
+import{traverse as e,findAncestor as n,getStringWidth as t}from"../../../../../../shared/utils/index.js";import{isString as r,isNumber as o,constant as i,isFunction as a,noop as l,range as d,property as u}from"lodash-es";import{IhoTableRenderHelper as c}from"../../../utils/index.js";import{VERTICAL_CELL_TYPE as f}from"./constants.js";function s(e){var n;return!!(null==(n=e.verticalConfig)?void 0:n.enable)}function p(e){return!!r(e)&&e.startsWith("header_")}function h(e){return!!r(e)&&e.startsWith("body_")}function _(e){var n;return r(e)?+(null!=(n=e.split("_")[1])?n:-1):-1}function m(n,t){const r=[];return e(n,((n,o,i)=>{n.parent=i,n.children||(!function(n,t){if(!n.parent)return n[`header_${t}`]=n.title,void d(t+1).forEach((e=>{n[`header_${e}_colspan`]=e===t?t+1:0,n[`header_${e}_rowspan`]=e===t?1:0}));let r=0,o=n;const i=[n];for(;o.parent;)r++,o=o.parent,i.unshift(o);d(t+1).forEach((o=>{var a,l;const d=i[o];if(!d)return n[`header_${o}`]="",n[`header_${o}_colspan`]=0,void(n[`header_${o}_rowspan`]=0);n[`header_${o}`]=null!=(l=null==(a=i[o])?void 0:a.title)?l:"",n[`header_${o}_colspan`]=o<r?1:t-r+1,n[`header_${o}_rowspan`]=function(n){if(!n.children)return 1;let t=0;return e(n.children,(e=>{e.children||t++})),t}(d)}))}(n,t),r.push(n))})),r.forEach(((e,n)=>{const o=r[n-1];o&&Object.entries(e).forEach((([n,r])=>{n.match(/^header_(\d+)$/)&&r===o[n]&&r&&n!==`header_${t}`&&(e[`${n}_colspan`]=0,e[`${n}_rowspan`]=0)}))})),r}const g=Object.freeze({rowspan:1,colspan:1});function w(e,n,t){var r,o;if(!p(e.column.field)){if(!n||!t)return g;const r=n(j(e,t));return r?{rowspan:r.colspan,colspan:r.rowspan}:g}return{rowspan:null!=(r=e.row[e.column.field+"_rowspan"])?r:1,colspan:null!=(o=e.row[e.column.field+"_colspan"])?o:1}}const x=({cell:e,row:n}={})=>{const t=e&&e.querySelector("input,.n-input__input-el,.n-input__textarea-el");if(t){const e=n?y(n):void 0;"INPUT"===(null==e?void 0:e.editRender.name)?t.focus():t.click()}return t};function v(n,r){let o=120;return e(r,((e,r,i,a)=>{a===n&&(o=Math.max(o,t(e.title||"")+20+(c.hasTitlePrefix(e)?20:0)))})),Math.ceil(o)}function $(e,n,t){const r=D(t);let u=r.getTableConfig("verticalConfig.headerWidth");u="auto"===u?v:o(u)?i(u):a(u)?u:v;let c=r.getTableConfig("verticalConfig.bodyWidth");c=o(c)?i(c):a(c)?c:l;let s=r.getTableConfig("verticalConfig.bodyMinWidth");return s=o(s)?i(s):a(s)?s:i(120),[...d(n+1).map((e=>({field:`header_${e}`,title:`header_${e}`,width:u(e,t.originalFieldList),fixed:"left",editRender:{name:f,props:{},enable:!1}}))),...e.map(((e,n)=>({field:`body_${n}`,title:`body_${n}`,minWidth:s(n),width:c(n),editRender:{name:f,props:{},enable:!0,autofocus:x}})))]}function b(e){const t=n(e.target,(e=>"TD"===e.tagName||"TH"===e.tagName));if(!t)return;const r=t.className.match(/(body|header)_(\d+)/);if(!r)return;const[o,i,a]=r;return{fieldKey:o,type:i,sequence:+a}}function y(e){return e.originalField}function I(e,n){var t;return null==(t=e.originalData)?void 0:t[n]}function C(e,n){const t=_(n.field),r=y(e);return{row:I(e,t),rowIndex:t,$rowIndex:t,column:r,fixed:r.fixed,type:r.type}}function T(n){const t=[];return e(n,(e=>{"left"===e.fixed&&t.push(e)})),t}function D(e){return{getOriginDataByColumn(n){var t;return null==(t=e.originalData)?void 0:t[_(n.field)]},getTableConfig:n=>u(n)(e.originalTableConfig)}}function W(e,n){return new Proxy({},{get(t,r){var o;if("originalField"===r)return e;if("originalData"===r)return a(n)?n():n;if(p(r))return e[r];if(h(r)){const t=_(r);return"seq"===e.type?t+1:null==(o=n[t])?void 0:o[e.field]}return t[r]},set(t,r,o){if(!p(r)){const t=_(r);t>=0&&n[t]&&(n[t][e.field]=o)}return!0}})}function j({$columnIndex:e,$rowIndex:n,column:t,columnIndex:r,row:o,rowIndex:i,type:a,_columnIndex:l,_rowIndex:d},u){var c;if(t){const f=a;if(a=p(t.field)?"header":"body",o){const s=_(t.field);t=y(o),o="header"===a?void 0:I(o,s),l=r=e="header"===f?n||0:((null==(c=u.fixedLeftVerticalData)?void 0:c.length)||0)+(n||0),d=i=n="header"===a?-1:s}}return{column:t,row:o,_columnIndex:l,_rowIndex:d,columnIndex:r,rowIndex:i,$columnIndex:e,$rowIndex:n,type:a}}x.toString=()=>"input,.n-input__input-el";export{j as basicParamsConvert,m as bindHeaderInfoAndFlatten,W as createDataProxy,$ as createVerticalFieldList,D as createVerticalStateHandler,T as findFixedLeftFields,_ as getHeaderDepthByField,C as getOriginBasePayload,y as getOriginFieldFromRowData,I as getOriginRowFromRowData,w as getSpanInfo,b as getVerticalInfoFromEvent,h as isVerticalBody,p as isVerticalHeader,s as isVerticalTable};

package/es/components/iho-table/src/types/pluginType.d.ts

@@ -151,9 +151,9 @@ type DataHookContext = {
 };
 export type WithTableDataContext<T> = [...WithTableConfig<T>, DataHookContext];
 export declare abstract class AbstractDataHooks {
-    abstract readonly dataStart: AsyncParallelHook<WithTableConfig>;
+    abstract readonly dataStart: AsyncParallelHook<WithTableConfig<IhoTableHandlerContext>>;
     abstract readonly data: AsyncSeriesHook<WithTableDataContext<[AnyObject]>>;
-    abstract readonly dataEnd: AsyncParallelHook<WithTableConfig>;
+    abstract readonly dataEnd: AsyncParallelHook<WithTableConfig<IhoTableHandlerContext>>;
     abstract readonly dataList: SyncWaterfallHook<WithTableConfig<[AnyObject[]]>>;
 }
 export declare abstract class AbstractSetupHooks {