vxe-table 4.23.0-beta.4 → 4.23.0-beta.6

package/es/table/src/table.js

@@ -29,8 +29,7 @@ import '../module/validator/hook';
 import '../module/custom/hook';
 import '../render';
 const { warnLog, errLog } = createComponentLog('table');
-const { getConfig, getIcon, getI18n, renderer, formats, scrollbarUtils, createEvent, globalResize, interceptor, hooks, domUtils, globalEvents, GLOBAL_EVENT_KEYS, useFns, renderEmptyElement } = VxeUI;
-const { getThumbOffsetSize, getThumbSize, getScrollFromClick, getScrollFromDrag } = scrollbarUtils || {};
+const { getConfig, getIcon, getI18n, renderer, formats, createEvent, globalResize, interceptor, hooks, domUtils, globalEvents, GLOBAL_EVENT_KEYS, useFns, renderEmptyElement } = VxeUI;
 const supportMaxRow = 5e6;
 const customStorageKey = 'VXE_CUSTOM_STORE';
 const maxYHeight = 5e6;
@@ -61,8 +60,6 @@ export default defineVxeComponent({
         const crossTableDragRowInfo = getCrossTableDragRowInfo();
         const reactData = reactive(createReactData());
         const internalData = createInternalData();
-        let tableMethods = {};
-        let tablePrivateMethods = {};
         const refElem = ref();
         const refVarElem = ref();
         const refTooltip = ref();
@@ -106,10 +103,6 @@ export default defineVxeComponent({
         const refScrollYBottomCornerElem = ref();
         const refScrollXSpaceElem = ref();
         const refScrollYSpaceElem = ref();
-        const refTrackXElem = ref();
-        const refTrackYElem = ref();
-        const refThumbXElem = ref();
-        const refThumbYElem = ref();
         let $xeToolbar;
         const computeTableId = computed(() => {
             const { id } = props;
@@ -791,6 +784,7 @@ export default defineVxeComponent({
             computeSize,
             computeIsVScrollbar,
             computeTableId,
+            computeTableStyle,
             computeValidOpts,
             computeRowField,
             computeVirtualXOpts,
@@ -891,6 +885,7 @@ export default defineVxeComponent({
             // 已废弃
             xegrid: $xeGrid
         };
+        const { refTrackXElem, refTrackYElem, refThumbXElem, refThumbYElem, updateThumbSize, updateThumbOffset, clickTrackXEvent, clickTrackYEvent, pointerdownThumbXEvent, pointermoveThumbXEvent, cleatPointerThumbEvent, pointerdownThumbYEvent, pointermoveThumbYEvent } = useFns.useInitVScrollbar($xeTable);
         const eqCellValue = (newRow, oldRow, field) => {
             const val1 = XEUtils.get(newRow, field);
             const val2 = XEUtils.get(oldRow, field);
@@ -4612,6 +4607,11 @@ export default defineVxeComponent({
             internalData.inFooterScroll = false;
             reactData.lazScrollLoading = false;
             internalData.scrollRenderType = '';
+            const $xeGanttView = internalData.xeGanttView;
+            if ($xeGanttView) {
+                const ganttInternalData = $xeGanttView.internalData;
+                ganttInternalData.isSyncTableScrollTop = false;
+            }
             let xRest = null;
             let yRest = null;
             if (!isAllOverflow) {
@@ -4687,14 +4687,15 @@ export default defineVxeComponent({
             return multiple;
         };
         const syncGanttScrollTop = (scrollTop) => {
+            const { isSyncGanttScrollTop } = internalData;
+            if (isSyncGanttScrollTop) {
+                return;
+            }
             const $xeGanttView = internalData.xeGanttView;
             if ($xeGanttView) {
                 const ganttInternalData = $xeGanttView.internalData;
-                const { elemStore: ganttElemStore } = ganttInternalData;
-                const ganttBodyScrollElem = getRefElem(ganttElemStore['main-body-scroll']);
-                if (ganttBodyScrollElem) {
-                    ganttBodyScrollElem.scrollTop = scrollTop;
-                }
+                ganttInternalData.isSyncTableScrollTop = true;
+                $xeGanttView.handleSyncScrollTop({ scrollTop });
             }
         };
         const dispatchEvent = (type, params, evnt) => {
@@ -4973,11 +4974,16 @@ export default defineVxeComponent({
                 return nextTick();
             };
         };
-        tableMethods = {
+        const tableMethods = {
             dispatchEvent,
             getEl() {
                 return refElem.value;
             },
+            getScrollViewElem() {
+                const { elemStore } = internalData;
+                const viewEl = getRefElem(elemStore['main-body-scroll']);
+                return viewEl;
+            },
             /**
              * 重置表格的一切数据状态
              */
@@ -9557,7 +9563,13 @@ export default defineVxeComponent({
         /**
          * 内部方法
          */
-        tablePrivateMethods = {
+        const tablePrivateMethods = {
+            getReactData() {
+                return reactData;
+            },
+            getInternalData() {
+                return internalData;
+            },
             getSetupOptions() {
                 return getConfig();
             },
@@ -12734,7 +12746,10 @@ export default defineVxeComponent({
                     isLeft,
                     isRight,
                     direction }, params);
-                updateThumbOffset();
+                const isVScrollbar = computeIsVScrollbar.value;
+                if (isVScrollbar) {
+                    updateThumbOffset();
+                }
                 updateRowExpandStyle();
                 checkLastSyncScroll(isRollX, isRollY);
                 if (isRollX) {
@@ -13403,6 +13418,14 @@ export default defineVxeComponent({
                     $xeTable.updateScrollYSpace();
                 });
             },
+            handleSyncScrollTop(params) {
+                const { scrollTop } = params;
+                const { elemStore } = internalData;
+                const bodyScrollElem = getRefElem(elemStore['main-body-scroll']);
+                if (bodyScrollElem) {
+                    bodyScrollElem.scrollTop = scrollTop;
+                }
+            },
             /**
              * 处理固定列的显示状态
              */
@@ -13568,168 +13591,6 @@ export default defineVxeComponent({
                 internalData.scrollObserver = scrollObserver;
             }
         };
-        const updateThumbSize = () => {
-            const { elemStore } = internalData;
-            const viewEl = getRefElem(elemStore['main-body-scroll']);
-            if (!viewEl) {
-                return;
-            }
-            if (!viewEl.clientHeight || !viewEl.clientHeight) {
-                return;
-            }
-            const trackXEl = refTrackXElem.value;
-            const xThumbWidth = trackXEl ? getThumbSize(viewEl.clientWidth, viewEl.scrollWidth, trackXEl.clientWidth) : 0;
-            const thumbXElem = refThumbXElem.value;
-            if (thumbXElem) {
-                thumbXElem.style.width = xThumbWidth + 'px';
-            }
-            reactData.xThumbWidth = xThumbWidth;
-            const trackYEl = refTrackYElem.value;
-            const yThumbHeight = trackYEl ? getThumbSize(viewEl.clientHeight, viewEl.scrollHeight, trackYEl.clientHeight) : 0;
-            const thumbYElem = refThumbYElem.value;
-            if (thumbYElem) {
-                thumbYElem.style.height = yThumbHeight + 'px';
-            }
-            reactData.yThumbHeight = yThumbHeight;
-        };
-        const updateThumbOffset = () => {
-            const { elemStore } = internalData;
-            const viewEl = getRefElem(elemStore['main-body-scroll']);
-            if (!viewEl) {
-                return;
-            }
-            if (!viewEl.clientHeight || !viewEl.clientHeight) {
-                return;
-            }
-            const { xThumbWidth, yThumbHeight } = reactData;
-            const trackXEl = refTrackXElem.value;
-            const thumbXElem = refThumbXElem.value;
-            const xThumbLeft = trackXEl && xThumbWidth ? getThumbOffsetSize(viewEl.scrollLeft, viewEl.clientWidth, viewEl.scrollWidth, trackXEl.clientWidth, xThumbWidth) : 0;
-            internalData.xThumbLeft = xThumbLeft;
-            if (thumbXElem && xThumbWidth) {
-                thumbXElem.style.width = xThumbWidth + 'px';
-                thumbXElem.style.transform = `translateX(${xThumbLeft}px)`;
-            }
-            const trackYEl = refTrackYElem.value;
-            const thumbYElem = refThumbYElem.value;
-            const yThumbTop = trackYEl && yThumbHeight ? getThumbOffsetSize(viewEl.scrollTop, viewEl.clientHeight, viewEl.scrollHeight, trackYEl.clientHeight, yThumbHeight) : 0;
-            internalData.yThumbTop = yThumbTop;
-            if (thumbYElem && yThumbHeight) {
-                thumbYElem.style.height = yThumbHeight + 'px';
-                thumbYElem.style.transform = `translateY(${yThumbTop}px)`;
-            }
-        };
-        const clickTrackXEvent = (evnt) => {
-            const { elemStore } = internalData;
-            const trackEl = evnt.currentTarget;
-            if (trackEl !== evnt.target) {
-                return;
-            }
-            const viewEl = getRefElem(elemStore['main-body-scroll']);
-            if (!viewEl) {
-                return;
-            }
-            const { xThumbWidth } = reactData;
-            const trackRect = trackEl.getBoundingClientRect();
-            viewEl.scrollTo({
-                left: getScrollFromClick(evnt.clientX - trackRect.left, viewEl.clientWidth, viewEl.scrollWidth, trackEl.clientWidth, xThumbWidth),
-                behavior: 'auto'
-            });
-        };
-        const clickTrackYEvent = (evnt) => {
-            const { elemStore } = internalData;
-            const trackEl = evnt.currentTarget;
-            if (trackEl !== evnt.target) {
-                return;
-            }
-            const viewEl = getRefElem(elemStore['main-body-scroll']);
-            if (!viewEl) {
-                return;
-            }
-            const { yThumbHeight } = reactData;
-            const trackRect = trackEl.getBoundingClientRect();
-            viewEl.scrollTo({
-                top: getScrollFromClick(evnt.clientY - trackRect.top, viewEl.clientHeight, viewEl.scrollHeight, trackEl.clientHeight, yThumbHeight),
-                behavior: 'auto'
-            });
-        };
-        const pointerdownThumbXEvent = (evnt) => {
-            const { elemStore } = internalData;
-            const thumbEl = evnt.currentTarget;
-            internalData.isThumbDrag = true;
-            thumbEl.setPointerCapture(evnt.pointerId);
-            const viewEl = getRefElem(elemStore['main-body-scroll']);
-            if (!viewEl) {
-                return;
-            }
-            const { xThumbWidth } = reactData;
-            const trackEl = thumbEl.parentElement;
-            const trackRect = trackEl.getBoundingClientRect();
-            const pointerPosition = evnt.clientX - trackRect.left;
-            // 记录 thumb 的偏移
-            const thumbOffset = getThumbOffsetSize(viewEl.scrollLeft, viewEl.clientWidth, viewEl.scrollWidth, trackEl.clientWidth, xThumbWidth);
-            internalData.thumbDragOffset = pointerPosition - thumbOffset;
-        };
-        const pointermoveThumbXEvent = (evnt) => {
-            const thumbEl = evnt.currentTarget;
-            if (!thumbEl.hasPointerCapture(evnt.pointerId)) {
-                return;
-            }
-            const { elemStore, isThumbDrag, thumbDragOffset } = internalData;
-            if (isThumbDrag) {
-                const viewEl = getRefElem(elemStore['main-body-scroll']);
-                if (!viewEl) {
-                    return;
-                }
-                const { xThumbWidth } = reactData;
-                const thumbEl = evnt.currentTarget;
-                const trackEl = thumbEl.parentElement;
-                const trackRect = trackEl.getBoundingClientRect();
-                // 更新偏移
-                viewEl.scrollLeft = getScrollFromDrag(evnt.clientX - trackRect.left, thumbDragOffset, viewEl.clientWidth, viewEl.scrollWidth, trackEl.clientWidth, xThumbWidth);
-            }
-        };
-        const cleatPointerThumbEvent = (evnt) => {
-            const thumbEl = evnt.currentTarget;
-            thumbEl.releasePointerCapture(evnt.pointerId);
-            internalData.isThumbDrag = false;
-        };
-        const pointerdownThumbYEvent = (evnt) => {
-            const { elemStore } = internalData;
-            const thumbEl = evnt.currentTarget;
-            internalData.isThumbDrag = true;
-            thumbEl.setPointerCapture(evnt.pointerId);
-            const viewEl = getRefElem(elemStore['main-body-scroll']);
-            if (!viewEl) {
-                return;
-            }
-            const { yThumbHeight } = reactData;
-            const trackEl = thumbEl.parentElement;
-            const trackRect = trackEl.getBoundingClientRect();
-            const pointerPosition = evnt.clientY - trackRect.top;
-            // 记录 thumb 的偏移
-            const thumbOffset = getThumbOffsetSize(viewEl.scrollTop, viewEl.clientHeight, viewEl.scrollHeight, trackEl.clientHeight, yThumbHeight);
-            internalData.thumbDragOffset = pointerPosition - thumbOffset;
-        };
-        const pointermoveThumbYEvent = (evnt) => {
-            const thumbEl = evnt.currentTarget;
-            if (!thumbEl.hasPointerCapture(evnt.pointerId)) {
-                return;
-            }
-            const { elemStore, isThumbDrag, thumbDragOffset } = internalData;
-            if (isThumbDrag) {
-                const viewEl = getRefElem(elemStore['main-body-scroll']);
-                if (!viewEl) {
-                    return;
-                }
-                const { yThumbHeight } = reactData;
-                const thumbEl = evnt.currentTarget;
-                const trackEl = thumbEl.parentElement;
-                const trackRect = trackEl.getBoundingClientRect();
-                // 更新偏移
-                viewEl.scrollTop = getScrollFromDrag(evnt.clientY - trackRect.top, thumbDragOffset, viewEl.clientHeight, viewEl.scrollHeight, trackEl.clientHeight, yThumbHeight);
-            }
-        };
         // 检测对应模块是否安装
         // 'openExport,openPrint,exportData,openImport,importData,saveFile,readFile,importByFile,print'.split(',').forEach(name => {
         //   ($xeTable as any)[name] = function () {

package/es/table/src/util.js

@@ -154,9 +154,34 @@ export function createInternalData() {
         tooltipTimeout: null,
         initStatus: false,
         isActivated: false,
+        // keyCtxTimeout: undefined,
+        // 刷新布局
         // rceTimeout: undefined,
         // rceRunTime: undefined,
         rceDelay: 0
+        // rsePending: false,
+        // 滚动属性
+        // intoRunScroll: false,
+        // inVirtualScroll: false,
+        // inWheelScroll: false,
+        // inHeaderScroll: false,
+        // inBodyScroll: false,
+        // inFooterScroll: false,
+        // scrollRenderType?: '',
+        // isSyncGanttScrollTop: false,
+        // 同步滚动
+        // lcsTimeout: undefined,
+        // lcsRunTime: undefined,
+        // 横向虚拟
+        // lxRunTime: undefined,
+        // lxTimeout: undefined,
+        // 纵向虚拟
+        // lyRunTime: undefined,
+        // lyTimeout: undefined,
+        // 动态高度
+        // chRunTime: undefined,
+        // chTimeout: undefined,
+        // isResizeCellHeight: false,
         // _sToTime: null
     };
 }

package/es/ui/index.js

@@ -1,6 +1,6 @@
 import { VxeUI } from '@vxe-ui/core';
 import { getFuncText } from './src/utils';
-export const version = "4.23.0-beta.4";
+export const version = "4.23.0-beta.6";
 VxeUI.version = version;
 VxeUI.tableVersion = version;
 VxeUI.setConfig({

package/es/ui/src/log.js

@@ -1,6 +1,6 @@
 import { VxeUI } from '@vxe-ui/core';
 const { log } = VxeUI;
-const tableVersion = `table v${"4.23.0-beta.4"}`;
+const tableVersion = `table v${"4.23.0-beta.6"}`;
 export function createComponentLog(name) {
     const uiVersion = VxeUI.uiVersion ? `ui v${VxeUI.uiVersion}` : '';
     const ganttVersion = VxeUI.ganttVersion ? `gantt v${VxeUI.ganttVersion}` : '';