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

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

@@ -1 +1,300 @@
-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};
+import { onBeforeUnmount, createVNode, defineComponent, inject, computed, watch, onMounted } from 'vue';
+import { traverse } from '../../../../shared/utils/index.js';
+import { promiseTimeout } from '@vueuse/shared';
+import { last, first } from 'lodash-es';
+import '../../index.js';
+import { LOWEST_PRIORITY, InjectionIhoTableConfig, InjectionIhoTableXeInstance } from '../constants/index.js';
+import { useUUIDMap, mergeVxeStyle, mergeVxeClass } from '../utils/index.js';
+import { defineTablePlugin } from '../hooks/useTablePlugin.js';
+
+function stickyFixedPlugin() {
+  const pluginName = "stickyFixedPlugin";
+  return defineTablePlugin({
+    name: pluginName,
+    apply(hooks) {
+      const {
+        getItemFromUUID: getFixedMap,
+        removeItemFromUUID: removeFixedMap
+      } = useUUIDMap(() => ({
+        $xeTable: null,
+        left: [],
+        noFixed: [],
+        right: []
+      }));
+      const {
+        getItemFromUUID: getDomMap,
+        removeItemFromUUID: removeDomMap
+      } = useUUIDMap(() => ({
+        tableBody: null,
+        tableHeader: null,
+        leftBorderLeftEle: null,
+        leftBorderTopEle: null,
+        leftShadowEle: null,
+        rightBorderLeftEle: null,
+        rightBorderTopEle: null
+      }), false);
+      hooks.configHooks.config.tap(pluginName, (config, {
+        $table
+      }) => {
+        var _a;
+        if (!((_a = config.stickyFixedConfig) == null ? void 0 : _a.enable) || !config.uuid)
+          return config;
+        const getFixedPosition = (columnIndex) => {
+          if (!$table.value)
+            return {
+              left: 0,
+              right: 0
+            };
+          const left = $table.value.getColumns().slice(0, columnIndex).reduce((prev, curr) => prev + (curr.resizeWidth || curr.renderWidth), 0);
+          const right = $table.value.getColumns().slice(columnIndex + 1).reduce((prev, curr) => prev + (curr.resizeWidth || curr.renderWidth), 0);
+          return {
+            left,
+            right
+          };
+        };
+        const fixedMap = getFixedMap(config.uuid);
+        function isFixedColumn(column) {
+          return fixedMap.left.some((item) => item.field === column.field) || fixedMap.right.some((item) => item.field === column.field);
+        }
+        config.cellStyle = mergeVxeStyle(({
+          _columnIndex,
+          column
+        }) => {
+          if (!isFixedColumn(column))
+            return;
+          return {
+            "--iho-table-fixed-left": getFixedPosition(_columnIndex).left,
+            "--iho-table-fixed-right": getFixedPosition(_columnIndex).right
+          };
+        }, config.cellStyle);
+        config.headerCellStyle = mergeVxeStyle(({
+          _columnIndex,
+          column
+        }) => {
+          if (!isFixedColumn(column))
+            return;
+          return {
+            "--iho-table-fixed-left": getFixedPosition(_columnIndex).left,
+            "--iho-table-fixed-right": getFixedPosition(_columnIndex).right
+          };
+        }, config.headerCellStyle);
+        return config;
+      });
+      hooks.fieldHooks.fieldList.tap({
+        name: pluginName,
+        stage: LOWEST_PRIORITY
+      }, (fieldList, config) => {
+        var _a;
+        if (!((_a = config.stickyFixedConfig) == null ? void 0 : _a.enable) || !config.uuid)
+          return fieldList;
+        const fixedMap = getFixedMap(config.uuid);
+        fixedMap.left = [];
+        fixedMap.noFixed = [];
+        fixedMap.right = [];
+        traverse(fieldList, (field) => {
+          if (field.fixed) {
+            fixedMap[field.fixed].push(field);
+            field.className = mergeVxeClass(field.className, `iho-table--fixed-${field.fixed}`);
+            field.headerClassName = mergeVxeClass(field.headerClassName, `iho-table--fixed-${field.fixed}`);
+          } else {
+            fixedMap["noFixed"].push(field);
+          }
+          field.fixed = void 0;
+        });
+        return [...fixedMap["left"] || [], ...fixedMap["noFixed"] || [], ...fixedMap["right"] || []];
+      });
+      hooks.setupHooks.setup.tap(pluginName, (configRef) => {
+        onBeforeUnmount(() => {
+          var _a;
+          if (!((_a = configRef.value) == null ? void 0 : _a.uuid))
+            return;
+          removeDomMap(configRef.value.uuid);
+          removeFixedMap(configRef.value.uuid);
+        });
+      });
+      function checkScrollState(uuid) {
+        const domMap = getDomMap(uuid);
+        const {
+          leftShadowEle,
+          rightBorderLeftEle,
+          tableBody
+        } = domMap;
+        if (!tableBody)
+          return;
+        if (leftShadowEle) {
+          if (tableBody.scrollLeft > 0) {
+            leftShadowEle.classList.add("scrolling--middle");
+          } else {
+            leftShadowEle == null ? void 0 : leftShadowEle.classList.remove("scrolling--middle");
+          }
+        }
+        if (rightBorderLeftEle) {
+          if (Math.ceil(tableBody.scrollLeft) < tableBody.scrollWidth - tableBody.clientWidth) {
+            rightBorderLeftEle.classList.add("scrolling--middle");
+          } else {
+            rightBorderLeftEle == null ? void 0 : rightBorderLeftEle.classList.remove("scrolling--middle");
+          }
+        }
+      }
+      function checkShadowState(uuid) {
+        const domMap = getDomMap(uuid);
+        const {
+          tableBody,
+          leftBorderLeftEle,
+          leftShadowEle,
+          leftBorderTopEle,
+          rightBorderTopEle,
+          rightBorderLeftEle,
+          tableHeader
+        } = domMap;
+        if (!tableBody || !tableHeader)
+          return;
+        const {
+          $xeTable,
+          left,
+          right
+        } = getFixedMap(uuid);
+        if (leftBorderLeftEle && leftBorderTopEle && leftShadowEle) {
+          if ($xeTable) {
+            const leftColumn = left.map((item) => $xeTable.getColumnByField(item.field));
+            const leftWidth = leftColumn.reduce((prev, curr) => prev + ((curr == null ? void 0 : curr.resizeWidth) || (curr == null ? void 0 : curr.renderWidth) || 40), 0);
+            leftShadowEle.style.left = leftWidth - 4 + "px";
+            leftBorderTopEle.style.width = leftWidth - 1 + "px";
+          } else {
+            const lastFixedLeftTh = last(tableHeader == null ? void 0 : tableHeader.querySelectorAll("th.iho-table--fixed-left"));
+            if (lastFixedLeftTh) {
+              leftShadowEle.style.left = lastFixedLeftTh.offsetLeft + lastFixedLeftTh.clientWidth - 4 + "px";
+              leftBorderTopEle.style.width = lastFixedLeftTh.offsetLeft + lastFixedLeftTh.clientWidth - 1 + "px";
+            }
+          }
+        }
+        if (rightBorderTopEle && rightBorderLeftEle) {
+          const overflowY = tableBody.scrollHeight > tableBody.clientHeight;
+          if ($xeTable) {
+            const rightColumn = right.map((item) => $xeTable.getColumnByField(item.field));
+            const rightWidth = rightColumn.reduce((prev, curr) => prev + ((curr == null ? void 0 : curr.resizeWidth) || (curr == null ? void 0 : curr.renderWidth) || 40), 0);
+            rightBorderLeftEle.style.right = rightWidth - 3 + (overflowY ? 10 : 0) + "px";
+            rightBorderTopEle.style.width = rightWidth + (overflowY ? 10 : 0) + "px";
+            if (overflowY) {
+              rightBorderTopEle.style.setProperty("--c-header-height", tableHeader.clientHeight - 2 + "px");
+            }
+          } else {
+            const firstFixedRightTh = first(tableHeader == null ? void 0 : tableHeader.querySelectorAll("th.iho-table--fixed-right"));
+            if (firstFixedRightTh) {
+              rightBorderLeftEle.style.right = 10 + tableBody.clientWidth - firstFixedRightTh.offsetLeft - (overflowY ? 0 : 10) + "px";
+              rightBorderTopEle.style.width = tableBody.clientWidth - firstFixedRightTh.offsetLeft + (overflowY ? 10 : 0) + "px";
+              if (overflowY) {
+                rightBorderTopEle.style.setProperty("--c-header-height", tableHeader.clientHeight - 2 + "px");
+              }
+            }
+          }
+        }
+      }
+      hooks.dataHooks.dataEnd.tap(pluginName, async (_, config) => {
+        var _a;
+        if (!((_a = config.stickyFixedConfig) == null ? void 0 : _a.enable) || !config.uuid)
+          return;
+        await promiseTimeout(100);
+        checkShadowState(config.uuid);
+      });
+      hooks.eventHooks.onScroll.tap(pluginName, ({
+        isX
+      }, config) => {
+        var _a;
+        if (!isX || !((_a = config.stickyFixedConfig) == null ? void 0 : _a.enable) || !config.uuid)
+          return;
+        checkScrollState(config.uuid);
+      });
+      hooks.eventHooks.onResizableChange.tap(pluginName, (_, config) => {
+        var _a;
+        if (!((_a = config.stickyFixedConfig) == null ? void 0 : _a.enable) || !config.uuid)
+          return;
+        checkScrollState(config.uuid);
+      });
+      const FixedBorderWrapper = /* @__PURE__ */ defineComponent({
+        setup() {
+          const configRef = inject(InjectionIhoTableConfig);
+          const $xeTable = inject(InjectionIhoTableXeInstance);
+          const showLeft = computed(() => {
+            const fixedMap = getFixedMap(configRef.value.uuid);
+            return !!(fixedMap.left && fixedMap.left.length);
+          });
+          const showRight = computed(() => {
+            const fixedMap = getFixedMap(configRef.value.uuid);
+            return !!(fixedMap.right && fixedMap.right.length);
+          });
+          const setLeftBorderLeftRef = (el) => {
+            getDomMap(configRef.value.uuid).leftBorderLeftEle = el;
+          };
+          const setLeftBorderTopRef = (el) => {
+            getDomMap(configRef.value.uuid).leftBorderTopEle = el;
+          };
+          const setLeftShadowRef = (el) => {
+            getDomMap(configRef.value.uuid).leftShadowEle = el;
+          };
+          const setRightBorderLeftRef = (el) => {
+            getDomMap(configRef.value.uuid).rightBorderLeftEle = el;
+          };
+          const setRightBorderTopRef = (el) => {
+            getDomMap(configRef.value.uuid).rightBorderTopEle = el;
+          };
+          function checkbodyScroll() {
+            const fixedMap = getFixedMap(configRef.value.uuid);
+            fixedMap.$xeTable = $xeTable.value;
+            if (!$xeTable.value || !configRef.value.uuid)
+              return;
+            const {
+              refTableBody,
+              refTableHeader
+            } = $xeTable.value.getRefMaps();
+            if (!refTableBody.value)
+              return;
+            const domMap = getDomMap(configRef.value.uuid);
+            domMap.tableBody = refTableBody.value.$el;
+            domMap.tableHeader = refTableHeader.value.$el;
+            checkScrollState(configRef.value.uuid);
+            checkShadowState(configRef.value.uuid);
+          }
+          watch([() => getFixedMap(configRef.value.uuid).left, () => getFixedMap(configRef.value.uuid).right], checkbodyScroll);
+          onMounted(async () => {
+            await promiseTimeout(100);
+            checkbodyScroll();
+          });
+          return () => {
+            return [showLeft.value ? [createVNode("div", {
+              "class": "iho-table__fixedLeftBorderLeft",
+              "ref": setLeftBorderLeftRef
+            }, null), createVNode("div", {
+              "class": "iho-table__fixedLeftBorderTop",
+              "ref": setLeftBorderTopRef
+            }, null), createVNode("div", {
+              "class": "iho-table__fixedLeftShadow",
+              "ref": setLeftShadowRef
+            }, null)] : null, showRight.value ? [createVNode("div", {
+              "class": "iho-table__fixedRightBorderLeft",
+              "ref": setRightBorderLeftRef
+            }, null), createVNode("div", {
+              "class": "iho-table__fixedRightBorderTop",
+              "ref": setRightBorderTopRef
+            }, null)] : null];
+          };
+        }
+      });
+      const _FixedBorderWrapper = /* @__PURE__ */ defineComponent({
+        setup() {
+          const configRef = inject(InjectionIhoTableConfig);
+          return () => {
+            var _a, _b;
+            return ((_b = (_a = configRef.value) == null ? void 0 : _a.stickyFixedConfig) == null ? void 0 : _b.enable) ? createVNode(FixedBorderWrapper, null, null) : null;
+          };
+        }
+      });
+      hooks.domInsertHooks.header.tap(pluginName, (header) => {
+        header.push(createVNode(_FixedBorderWrapper, null, null));
+        return header;
+      });
+    }
+  });
+}
+
+export { stickyFixedPlugin };