cnhis-design-vue 3.3.1-beta.9 → 3.3.1-release.5

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

@@ -1 +1,446 @@
-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};
+import { unref, shallowReactive, onBeforeUnmount, createVNode, defineComponent, inject, ref, computed, provide, watch, onMounted, h } from 'vue';
+import { traverse, widthAppend } from '../../../../shared/utils/index.js';
+import { doAnimation } from '../../../../shared/utils/anime.js';
+import { useThrottleFn } from '@vueuse/core';
+import { promiseTimeout } from '@vueuse/shared';
+import { last, isFunction, isNumber } from 'lodash-es';
+import '../../index.js';
+import { InjectionIhoTableUUID } from '../constants/index.js';
+import { useUUIDMap, isVariableHeightColumn } from '../utils/index.js';
+import { defineTablePlugin } from '../hooks/useTablePlugin.js';
+
+class VarHeightCollector {
+  constructor() {
+    this.records = {};
+    this.maxRecords = shallowReactive(/* @__PURE__ */ new Map());
+  }
+  set(sequence, key, value) {
+    if (!this.records[sequence])
+      this.records[sequence] = {};
+    if (this.records[sequence][key] === value)
+      return;
+    this.records[sequence][key] = value;
+    const max = Math.max(...Object.values(this.records[sequence]), 0);
+    this.maxRecords.get(sequence) !== max && this.maxRecords.set(sequence, max);
+  }
+  getMax(sequence) {
+    return this.maxRecords.get(sequence) || 0;
+  }
+}
+const {
+  getItemFromUUID: getVarHeightMap,
+  removeItemFromUUID: removeVarHeightMap
+} = useUUIDMap(() => new VarHeightCollector(), true);
+const {
+  getItemFromUUID: get$xetable,
+  removeItemFromUUID: remove$xetable,
+  setItemFromUUID: set$xetable
+} = useUUIDMap(() => null);
+const {
+  getItemFromUUID: getScrollY,
+  removeItemFromUUID: removeScrollY,
+  setItemFromUUID: setScrollY
+} = useUUIDMap(() => void 0);
+let VarHeight = {};
+function getBodyWrapper($xetable) {
+  const bodyWrapper = $xetable.internalData.elemStore["main-body-wrapper"];
+  return bodyWrapper ? unref(bodyWrapper) : null;
+}
+function updateTableVirtualState($xetable, config, {
+  scrollTop = 0
+}) {
+  var _a, _b;
+  const {
+    uuid,
+    rowConfig = {}
+  } = config;
+  if (!uuid)
+    return;
+  const varHeightMap = getVarHeightMap(uuid);
+  const {
+    oSize = 0,
+    gt = 100
+  } = (_a = getScrollY(uuid)) != null ? _a : {};
+  const {
+    internalData,
+    reactData
+  } = $xetable;
+  const {
+    scrollYStore,
+    elemStore,
+    afterFullData,
+    fullDataRowIdData
+  } = internalData;
+  if (gt > afterFullData.length)
+    return;
+  const configRowHeight = (_b = rowConfig.height) != null ? _b : 36;
+  const tableBody = elemStore["main-body-wrapper"];
+  const tableBodyElem = tableBody ? unref(tableBody) : null;
+  let visibleSize = tableBodyElem ? Math.max(8, Math.ceil(tableBodyElem.clientHeight / configRowHeight) + 2 + oSize) : 8;
+  const _heightStack = [0];
+  let renderStartIndex = 0;
+  scrollTop && afterFullData.find((row, idx) => {
+    const rowSeq = $xetable.getRowSeq(row);
+    const currentHeight = (last(_heightStack) || 0) + Math.max(configRowHeight, varHeightMap.getMax(rowSeq));
+    _heightStack.push(currentHeight);
+    if (currentHeight > scrollTop) {
+      renderStartIndex = Math.max(0, idx - oSize);
+      visibleSize += Math.min(renderStartIndex, oSize);
+      return true;
+    }
+  });
+  if (renderStartIndex > 0 && isFunction(config.spanMethod)) {
+    const {
+      spanMethod
+    } = config;
+    const defaultRes = {
+      rowspan: 1,
+      colspan: 1
+    };
+    while (renderStartIndex > 0) {
+      const hasHiddenCell = $xetable.getColumns().some((column, columnIndex) => {
+        const {
+          rowspan,
+          colspan
+        } = spanMethod({
+          column,
+          columnIndex,
+          $columnIndex: columnIndex,
+          row: afterFullData[renderStartIndex],
+          rowIndex: renderStartIndex,
+          $rowIndex: renderStartIndex,
+          _rowIndex: renderStartIndex,
+          isHidden: !column.visible,
+          fixed: column.fixed,
+          type: column.type,
+          visibleData: afterFullData
+        }) || defaultRes;
+        if (rowspan === 0 && colspan === 0) {
+          renderStartIndex--;
+          return true;
+        }
+      });
+      if (!hasHiddenCell)
+        break;
+    }
+  }
+  const topSpaceHeight = _heightStack[renderStartIndex];
+  const marginTop = `${topSpaceHeight}px`;
+  const bodyHeight = afterFullData.reduce((res, row) => {
+    const rowSeq = $xetable.getRowSeq(row);
+    return res + Math.max(configRowHeight, varHeightMap.getMax(rowSeq));
+  }, 0);
+  const ySpaceHeight = `${bodyHeight}px`;
+  ["main", "left", "right"].forEach((name) => {
+    const tableRef = elemStore[`${name}-body-table`];
+    const tableElem = tableRef ? unref(tableRef) : null;
+    if (tableElem) {
+      tableElem.style.marginTop = marginTop;
+      tableElem.scrollTop = scrollTop;
+    }
+    ["header", "body", "footer"].forEach((layout) => {
+      const ySpaceRef = elemStore[`${name}-${layout}-ySpace`];
+      const ySpaceElem = ySpaceRef ? unref(ySpaceRef) : null;
+      if (ySpaceElem) {
+        ySpaceElem.style.height = ySpaceHeight;
+      }
+    });
+  });
+  const renderEndIndex = Math.min(afterFullData.length, renderStartIndex + visibleSize);
+  if (scrollYStore.startIndex === renderStartIndex && scrollYStore.endIndex === renderEndIndex)
+    return;
+  scrollYStore.startIndex = renderStartIndex;
+  scrollYStore.endIndex = renderEndIndex;
+  const tableData = afterFullData.slice(scrollYStore.startIndex, scrollYStore.endIndex);
+  tableData.forEach((row, $index) => {
+    const rowid = $xetable.getRowid(row);
+    const rest = fullDataRowIdData[rowid];
+    if (rest) {
+      rest.$index = $index;
+    }
+  });
+  reactData.tableData.length = 0;
+  reactData.tableData.push(...tableData);
+}
+const __updateTableVirtualState = useThrottleFn(updateTableVirtualState, 300);
+function createWheelEvent(config) {
+  let stoper = null;
+  let totalTop = 0;
+  let initTop = true;
+  return function(event) {
+    if (!config.uuid)
+      return;
+    const $xetable = get$xetable(config.uuid);
+    if (!$xetable)
+      return;
+    const {
+      internalData
+    } = $xetable;
+    const {
+      isHover
+    } = config.rowConfig || {};
+    const {
+      deltaX,
+      deltaY
+    } = event;
+    const {
+      refTableLeftBody,
+      refTableRightBody,
+      refTableBody
+    } = $xetable.getRefMaps();
+    const deltaTop = deltaY;
+    const deltaLeft = deltaX;
+    const isTopWheel = deltaTop < 0;
+    const tableBody = unref(refTableBody);
+    const scrollBodyElem = tableBody ? tableBody.$el : null;
+    if (!scrollBodyElem)
+      return;
+    if (isTopWheel ? scrollBodyElem.scrollTop <= 0 : scrollBodyElem.scrollTop >= scrollBodyElem.scrollHeight - scrollBodyElem.clientHeight) {
+      return;
+    }
+    const scrollTop = scrollBodyElem.scrollTop + deltaTop;
+    const scrollLeft = scrollBodyElem.scrollLeft + deltaLeft;
+    const isRollY = scrollTop !== internalData.lastScrollTop;
+    if (!isRollY)
+      return;
+    event.preventDefault();
+    internalData.lastScrollTop = scrollTop;
+    internalData.lastScrollLeft = scrollLeft;
+    internalData.lastScrollTime = Date.now();
+    if (isHover) {
+      $xetable.clearHoverRow();
+    }
+    const leftBody = refTableLeftBody.value;
+    const rightBody = refTableRightBody.value;
+    const leftElem = leftBody ? leftBody.$el : null;
+    const rightElem = rightBody ? rightBody.$el : null;
+    const wheelYSize = Math.min(100, Math.abs(Math.floor(deltaTop / 2)));
+    if (initTop) {
+      totalTop = scrollBodyElem.scrollTop;
+      initTop = false;
+    }
+    totalTop = totalTop + wheelYSize * (isTopWheel ? -1 : 1);
+    stoper && stoper();
+    stoper = doAnimation(scrollBodyElem.scrollTop, totalTop, 400, (top) => {
+      scrollBodyElem.scrollTop = top;
+      if (leftElem) {
+        leftElem.scrollTop = top;
+      }
+      if (rightElem) {
+        rightElem.scrollTop = top;
+      }
+    }, "easeOutCubic", () => {
+      totalTop = scrollBodyElem.scrollTop;
+      initTop = true;
+    });
+    __updateTableVirtualState($xetable, config, scrollBodyElem);
+  };
+}
+function variableHeightRendererPlugin() {
+  const pluginName = "variableHeightRendererPlugin";
+  return defineTablePlugin({
+    name: pluginName,
+    vxe(instance) {
+      VarHeight = /* @__PURE__ */ defineComponent({
+        props: {
+          payload: {
+            type: Object,
+            required: true
+          }
+        },
+        setup(props) {
+          const uuid = inject(InjectionIhoTableUUID);
+          const $xetable = inject("$xetable");
+          const eleRef = ref();
+          const varHeightMap = getVarHeightMap(uuid);
+          const contentRef = computed(() => {
+            return props.payload.row[props.payload.column.field];
+          });
+          function updateCellHeight() {
+            const {
+              row,
+              column
+            } = props.payload;
+            const index = $xetable.getRowSeq(row);
+            if (!varHeightMap || index == null || !eleRef.value)
+              return;
+            const eleHeight = eleRef.value.clientHeight;
+            varHeightMap.set(index, column.field, eleHeight);
+          }
+          provide("updateCellHeight", updateCellHeight);
+          watch([() => props.payload.rowIndex, () => props.payload.column.field, contentRef, () => props.payload.column.renderWidth], async () => {
+            await promiseTimeout(0);
+            updateCellHeight();
+          });
+          onMounted(() => {
+            if ($xetable && !get$xetable(uuid)) {
+              set$xetable(uuid, $xetable);
+            }
+            updateCellHeight();
+          });
+          const renderer = computed(() => {
+            var _a, _b, _c, _d, _e;
+            const lowCodeField = (_b = (_a = props.payload.column.editRender) == null ? void 0 : _a.props) != null ? _b : {};
+            const slotFn = (_d = (_c = lowCodeField.slots) == null ? void 0 : _c.default) != null ? _d : lowCodeField.slotFn;
+            if (isFunction(slotFn))
+              return slotFn;
+            const editType = (_e = props.payload.column.editRender) == null ? void 0 : _e.name;
+            if (editType) {
+              const renderer2 = instance.renderer.get(editType);
+              if (renderer2 == null ? void 0 : renderer2.renderCell)
+                return () => {
+                  return renderer2.renderCell(props.payload.column.editRender, props.payload);
+                };
+            }
+            return () => contentRef.value;
+          });
+          const widthRef = computed(() => {
+            if (props.payload.column.treeNode)
+              return "";
+            const renderWidth = props.payload.column.renderWidth;
+            if (isNumber(renderWidth) && renderWidth > 0)
+              return widthAppend(renderWidth - 2 * 10 - 2);
+            return "";
+          });
+          return () => createVNode("div", {
+            "ref": eleRef,
+            "style": {
+              padding: "7px 0",
+              width: widthRef.value,
+              overflow: "hidden"
+            }
+          }, [h(renderer.value, props.payload)]);
+        }
+      });
+    },
+    apply(hooks) {
+      function initScrollState(config) {
+        const $xetable = get$xetable(config.uuid);
+        if (!$xetable)
+          return;
+        config.scrollY = {
+          enabled: false
+        };
+        $xetable.reactData.scrollYLoad = false;
+        const bodyWrapper = getBodyWrapper($xetable);
+        bodyWrapper && updateTableVirtualState($xetable, config, {
+          scrollTop: bodyWrapper.scrollTop
+        });
+      }
+      function overrideConfig(config) {
+        if (!config.uuid)
+          return;
+        const scrollY = getScrollY(config.uuid);
+        if (scrollY) {
+          config.scrollY = scrollY;
+        }
+        setTimeout(() => initScrollState(config), 300);
+      }
+      hooks.dataHooks.dataStart.tap(pluginName, (_, config) => overrideConfig(config));
+      hooks.eventHooks.onFilterChange.tap(pluginName, (_, config) => overrideConfig(config));
+      hooks.eventHooks.onSortChange.tap(pluginName, (_, config) => overrideConfig(config));
+      hooks.eventHooks.onToggleTreeExpand.tap(pluginName, (_, config) => overrideConfig(config));
+      hooks.eventHooks.onResizableChange.tap(pluginName, async ({
+        column
+      }, config) => {
+        if (!column.editRender || !column.editRender.props)
+          return;
+        isVariableHeightColumn(column.editRender.props) && overrideConfig(config);
+      });
+      hooks.eventHooks.onScroll.tap(pluginName, useThrottleFn((event, config) => {
+        if (event.isX)
+          return;
+        const {
+          uuid
+        } = config;
+        if (!uuid)
+          return;
+        const $xetable = get$xetable(uuid);
+        if (!$xetable)
+          return;
+        updateTableVirtualState($xetable, config, event);
+      }, 100, true, true));
+      function renderVarHeight(payload) {
+        return createVNode(VarHeight, {
+          "payload": payload
+        }, null);
+      }
+      hooks.fieldHooks.field.tap(pluginName, (field) => {
+        if (isVariableHeightColumn(field)) {
+          field.slots = {
+            ...field.slots,
+            default: renderVarHeight
+          };
+          const __className = field.className;
+          const appendClassName = "variable-height";
+          field.className = !__className ? appendClassName : function(payload) {
+            return isFunction(__className) ? [__className(payload), appendClassName] : [__className, appendClassName];
+          };
+        }
+        return field;
+      });
+      hooks.fieldHooks.fieldList.tap(pluginName, (fieldList, config, {
+        $table
+      }) => {
+        config.uuid && traverse(fieldList, (field, stop) => {
+          var _a, _b;
+          if (isVariableHeightColumn(field)) {
+            const configRowHeight = (_b = (_a = config.rowConfig) == null ? void 0 : _a.height) != null ? _b : 36;
+            const varHeightMap = getVarHeightMap(config.uuid);
+            const __cellStyle = config.cellStyle;
+            config.cellStyle = function(payload) {
+              const result = {};
+              if ($table.value) {
+                const height = Math.max(configRowHeight, varHeightMap.getMax($table.value.getRowSeq(payload.row)));
+                result.height = `${height}px`;
+              }
+              return Object.assign(result, __cellStyle ? isFunction(__cellStyle) ? __cellStyle(payload) : __cellStyle : null);
+            };
+            if (config.sortableConfig && config.sortableConfig.enable) {
+              const __onEnd = config.sortableConfig.onEnd;
+              config.sortableConfig.onEnd = function(event) {
+                const $xetable = get$xetable(config.uuid);
+                if ($xetable) {
+                  const {
+                    internalData: {
+                      elemStore
+                    }
+                  } = $xetable;
+                  const tableRef = elemStore["main-table-body"];
+                  if (tableRef && unref(tableRef)) {
+                    updateTableVirtualState($xetable, config, {
+                      scrollTop: unref(tableRef).scrollTop
+                    });
+                  }
+                }
+                isFunction(__onEnd) && __onEnd(event);
+              };
+            }
+            config.scrollY = {
+              ...config.scrollY,
+              mode: "default"
+            };
+            config.onWheel = createWheelEvent(config);
+            setTimeout(() => {
+              setScrollY(config.uuid, config.scrollY);
+              initScrollState(config);
+            }, 300);
+            stop();
+          }
+        });
+        return fieldList;
+      });
+      hooks.setupHooks.setup.tap(pluginName, (config) => {
+        onBeforeUnmount(() => {
+          if (!config.value.uuid)
+            return;
+          removeVarHeightMap(config.value.uuid);
+          remove$xetable(config.value.uuid);
+          removeScrollY(config.value.uuid);
+        });
+      });
+    }
+  });
+}
+
+export { variableHeightRendererPlugin };

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

@@ -1 +1,80 @@
-import{pick as e}from"lodash-es";import{onBeforeUnmount as r,unref as o}from"vue";import"../../../index.js";import{LOWEST_PRIORITY as t}from"../../constants/index.js";import{createVerticalTableHooks as l,usePresetVerticalPlugins as i}from"./src/hooks/index.js";import{useUUIDMap as n}from"../../utils/index.js";import{VERTICAL_CELL_TYPE as a}from"./src/constants.js";import{createCellRender as s,createHeaderCellRender as d}from"./src/renderer.js";import{isVerticalTable as u,getSpanInfo as c}from"./src/utils.js";import{defineTablePlugin as m}from"../../hooks/useTablePlugin.js";function f(){const f="verticalTablePlugin",{getItemFromUUID:p,removeItemFromUUID:g}=n((()=>({})));return m({name:f,vxe(e){e.renderer.add(a,{renderCell:s(e,p,"default"),renderEdit:s(e,p,"edit"),renderHeader:d(e,p)})},apply(n){const a=l();i(a,n,p),n.configHooks.config.tap({name:f,stage:t},(r=>{if(!r.uuid||!u(r))return r;const o=p(r.uuid);function t(e){var r;return e.row||null==e.$rowIndex||(e.row=null==(r=o.fixedLeftVerticalData)?void 0:r[e.$rowIndex]),a.cellStyle.call({},e,o)}function l(e){return a.cellClassName.call({},e,o)}o.originalTableConfig=r;const i={...e(r,["uuid","border","height","verticalConfig","showSeq","size","rowGroupSetting","keyboardConfig","selectType","editConfig"]),vertical:!0,cellClassName:l,headerCellClassName:l,cellStyle:t,headerCellStyle:t,headerRowStyle:e=>a.headerRowStyle.call({background:"white"},e,o),spanMethod:e=>c(e,r.spanMethod,o)};return a.config.call(i,o)})),n.setupHooks.setup.tap(f,(e=>{r((()=>g(o(e).uuid)))})),n.fieldHooks.field.tap({name:f,before:"lowCodeFieldAdaptorPlugin"},((e,r,o)=>(o.uuid&&u(o)&&(e.variableHeight=!1),e)))}})}export{f as verticalTablePlugin};
+import { pick } from 'lodash-es';
+import { onBeforeUnmount, unref } from 'vue';
+import '../../../index.js';
+import { LOWEST_PRIORITY } from '../../constants/index.js';
+import { createVerticalTableHooks, usePresetVerticalPlugins } from './src/hooks/index.js';
+import { useUUIDMap } from '../../utils/index.js';
+import { VERTICAL_CELL_TYPE } from './src/constants.js';
+import { createCellRender, createHeaderCellRender } from './src/renderer.js';
+import { isVerticalTable, getSpanInfo } from './src/utils.js';
+import { defineTablePlugin } from '../../hooks/useTablePlugin.js';
+
+function verticalTablePlugin() {
+  const pluginName = "verticalTablePlugin";
+  const {
+    getItemFromUUID,
+    removeItemFromUUID
+  } = useUUIDMap(() => ({}));
+  return defineTablePlugin({
+    name: pluginName,
+    vxe(instance) {
+      instance.renderer.add(VERTICAL_CELL_TYPE, {
+        renderCell: createCellRender(instance, getItemFromUUID, "default"),
+        renderEdit: createCellRender(instance, getItemFromUUID, "edit"),
+        renderHeader: createHeaderCellRender(instance, getItemFromUUID)
+      });
+    },
+    apply(hooks) {
+      const VerticalTableHooks = createVerticalTableHooks();
+      usePresetVerticalPlugins(VerticalTableHooks, hooks, getItemFromUUID);
+      hooks.configHooks.config.tap({
+        name: pluginName,
+        stage: LOWEST_PRIORITY
+      }, (config) => {
+        if (!config.uuid || !isVerticalTable(config))
+          return config;
+        const verticalState = getItemFromUUID(config.uuid);
+        verticalState.originalTableConfig = config;
+        function cellStyle(payload) {
+          var _a;
+          if (!payload.row && payload.$rowIndex != null) {
+            payload.row = (_a = verticalState.fixedLeftVerticalData) == null ? void 0 : _a[payload.$rowIndex];
+          }
+          return VerticalTableHooks.cellStyle.call({}, payload, verticalState);
+        }
+        function cellClassName(payload) {
+          return VerticalTableHooks.cellClassName.call({}, payload, verticalState);
+        }
+        const result = {
+          ...pick(config, ["uuid", "border", "height", "verticalConfig", "showSeq", "size", "rowGroupSetting", "keyboardConfig", "selectType", "editConfig"]),
+          vertical: true,
+          cellClassName,
+          headerCellClassName: cellClassName,
+          cellStyle,
+          headerCellStyle: cellStyle,
+          headerRowStyle(payload) {
+            return VerticalTableHooks.headerRowStyle.call({
+              background: "white"
+            }, payload, verticalState);
+          },
+          spanMethod: (payload) => getSpanInfo(payload, config.spanMethod, verticalState)
+        };
+        return VerticalTableHooks.config.call(result, verticalState);
+      });
+      hooks.setupHooks.setup.tap(pluginName, (configRef) => {
+        onBeforeUnmount(() => removeItemFromUUID(unref(configRef).uuid));
+      });
+      hooks.fieldHooks.field.tap({
+        name: pluginName,
+        before: "lowCodeFieldAdaptorPlugin"
+      }, (fieldItem, _, config) => {
+        if (config.uuid && isVerticalTable(config)) {
+          fieldItem.variableHeight = false;
+        }
+        return fieldItem;
+      });
+    }
+  });
+}
+
+export { verticalTablePlugin };

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

@@ -1 +1,3 @@
-const E="VERTICAL_CELL_TYPE";export{E as VERTICAL_CELL_TYPE};
+const VERTICAL_CELL_TYPE = "VERTICAL_CELL_TYPE";
+
+export { VERTICAL_CELL_TYPE };

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

@@ -1 +1,37 @@
-import"../../../../../../../shared/utils/tapable/SyncHook.js";import"../../../../../../../shared/utils/tapable/SyncBailHook.js";import e from"../../../../../../../shared/utils/tapable/SyncWaterfallHook.js";import"../../../../../../../shared/utils/tapable/SyncLoopHook.js";import"../../../../../../../shared/utils/tapable/AsyncParallelHook.js";import"../../../../../../../shared/utils/tapable/AsyncParallelBailHook.js";import"../../../../../../../shared/utils/tapable/AsyncSeriesHook.js";import"../../../../../../../shared/utils/tapable/AsyncSeriesBailHook.js";import"../../../../../../../shared/utils/tapable/AsyncSeriesLoopHook.js";import"../../../../../../../shared/utils/tapable/AsyncSeriesWaterfallHook.js";import{useRowHeight as s}from"./useRowHeight.js";import{useRowClassName as o}from"./useRowClassName.js";import{useExpose as a}from"./useExpose.js";import{useColumn2Data as t}from"./useColumn2Data.js";import{useData2Column as l}from"./useData2Column.js";import{useEditCell as r}from"./useEditCell.js";import{useEventConvert as i}from"./useEventConvert.js";import{useTriggerRow as p}from"./useTriggerRow.js";const m=()=>({cellStyle:new e(["styles","payload","verticalState"]),cellClassName:new e(["classes","payload","verticalState"]),config:new e(["config","verticalState"]),headerRowStyle:new e(["styles","payload","verticalState"])}),n=(e,m,n)=>{r(e,m,n),p(e,m,n),i(e,m,n),l(e,m,n),t(e,m,n),a(e,m),o(e,m,n),s(e)};export{m as createVerticalTableHooks,n as usePresetVerticalPlugins};
+import '../../../../../../../shared/utils/tapable/SyncHook.js';
+import '../../../../../../../shared/utils/tapable/SyncBailHook.js';
+import SyncWaterfallHook from '../../../../../../../shared/utils/tapable/SyncWaterfallHook.js';
+import '../../../../../../../shared/utils/tapable/SyncLoopHook.js';
+import '../../../../../../../shared/utils/tapable/AsyncParallelHook.js';
+import '../../../../../../../shared/utils/tapable/AsyncParallelBailHook.js';
+import '../../../../../../../shared/utils/tapable/AsyncSeriesHook.js';
+import '../../../../../../../shared/utils/tapable/AsyncSeriesBailHook.js';
+import '../../../../../../../shared/utils/tapable/AsyncSeriesLoopHook.js';
+import '../../../../../../../shared/utils/tapable/AsyncSeriesWaterfallHook.js';
+import { useRowHeight } from './useRowHeight.js';
+import { useRowClassName } from './useRowClassName.js';
+import { useExpose } from './useExpose.js';
+import { useColumn2Data } from './useColumn2Data.js';
+import { useData2Column } from './useData2Column.js';
+import { useEditCell } from './useEditCell.js';
+import { useEventConvert } from './useEventConvert.js';
+import { useTriggerRow } from './useTriggerRow.js';
+
+const createVerticalTableHooks = () => ({
+  cellStyle: new SyncWaterfallHook(["styles", "payload", "verticalState"]),
+  cellClassName: new SyncWaterfallHook(["classes", "payload", "verticalState"]),
+  config: new SyncWaterfallHook(["config", "verticalState"]),
+  headerRowStyle: new SyncWaterfallHook(["styles", "payload", "verticalState"])
+});
+const usePresetVerticalPlugins = (verticalTableHooks, tableHooks, getVerticalState) => {
+  useEditCell(verticalTableHooks, tableHooks, getVerticalState);
+  useTriggerRow(verticalTableHooks, tableHooks, getVerticalState);
+  useEventConvert(verticalTableHooks, tableHooks, getVerticalState);
+  useData2Column(verticalTableHooks, tableHooks, getVerticalState);
+  useColumn2Data(verticalTableHooks, tableHooks, getVerticalState);
+  useExpose(verticalTableHooks, tableHooks);
+  useRowClassName(verticalTableHooks, tableHooks, getVerticalState);
+  useRowHeight(verticalTableHooks);
+};
+
+export { createVerticalTableHooks, usePresetVerticalPlugins };

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

@@ -1 +1,33 @@
-import{isEmpty as t}from"lodash-es";import{LOWEST_PRIORITY as a}from"../../../../constants/index.js";import{isVerticalTable as e,createDataProxy as i}from"../utils.js";const r=(r,o,l)=>{r.headerRowStyle.tap("useData2Column",((a,e,i)=>(t(i.fixedLeftVerticalData)||i.fixedLeftVerticalData.length!==e.$rowIndex||(a.display="none"),a))),o.dataHooks.dataList.tap({name:"Vertical--useData2Column",stage:a},((t,a)=>{const{uuid:r}=a;if(!r||!e(a))return t;const o=l(r);if(!o)return t;o.originalData=t;const{fullVerticalOriginData:n=[]}=o;return o.fixedLeftVerticalData=n.filter((t=>"left"===t.fixed)).map((t=>i(t,(()=>o.originalData||[])))),o.verticalData=n.filter((t=>"left"!==t.fixed)).map((t=>i(t,(()=>o.originalData||[]))))}))};export{r as useColumn2Data};
+import { isEmpty } from 'lodash-es';
+import { LOWEST_PRIORITY } from '../../../../constants/index.js';
+import { isVerticalTable, createDataProxy } from '../utils.js';
+
+const useColumn2Data = (verticalTableHooks, hooks, getVerticalState) => {
+  verticalTableHooks.headerRowStyle.tap("useData2Column", (styles, payload, verticalState) => {
+    if (!isEmpty(verticalState.fixedLeftVerticalData) && verticalState.fixedLeftVerticalData.length === payload.$rowIndex) {
+      styles.display = "none";
+    }
+    return styles;
+  });
+  hooks.dataHooks.dataList.tap({
+    name: "Vertical--useData2Column",
+    stage: LOWEST_PRIORITY
+  }, (dataList, config) => {
+    const {
+      uuid
+    } = config;
+    if (!uuid || !isVerticalTable(config))
+      return dataList;
+    const verticalState = getVerticalState(uuid);
+    if (!verticalState)
+      return dataList;
+    verticalState.originalData = dataList;
+    const {
+      fullVerticalOriginData = []
+    } = verticalState;
+    verticalState.fixedLeftVerticalData = fullVerticalOriginData.filter((f) => f.fixed === "left").map((f) => createDataProxy(f, () => verticalState.originalData || []));
+    return verticalState.verticalData = fullVerticalOriginData.filter((f) => f.fixed !== "left").map((f) => createDataProxy(f, () => verticalState.originalData || []));
+  });
+};
+
+export { useColumn2Data };