vxe-table 3.25.0-beta.3 → 3.25.0-beta.5

package/es/table/module/filter/mixin.js

@@ -11,7 +11,7 @@ function updatePopupStyle($xeTable) {
     const reactData = $xeTable;
     const internalData = $xeTable;
     const $xeGGWrapper = $xeGrid || $xeGantt;
-    const { filterStore } = reactData;
+    const { filterStore, scrollbarHeight } = reactData;
     const { elemStore } = internalData;
     const { column, targetEl } = filterStore;
     if (!column) {
@@ -32,8 +32,6 @@ function updatePopupStyle($xeTable) {
     if (!filterWrapperElem) {
         return $xeTable.$nextTick();
     }
-    const filterHeadElem = filterWrapperElem.querySelector('.vxe-table--filter-header');
-    const filterFootElem = filterWrapperElem.querySelector('.vxe-table--filter-footer');
     /**
      * 是否显示筛选按钮图标
      * 如果不存在图标，则相对单元格居中显示
@@ -72,9 +70,9 @@ function updatePopupStyle($xeTable) {
         else {
             const filterWidth = filterWrapperElem.offsetWidth;
             const centerWidth = targetEl ? filterWidth / 2 : ((filterWidth - column.renderWidth) / 2);
-            maxHeight = Math.max(40, tableEl.clientHeight - top - (filterHeadElem ? filterHeadElem.clientHeight : 0) - (filterFootElem ? filterFootElem.clientHeight : 0) - 14);
             left = btnRect.left - tableRect.left - centerWidth;
             top = btnRect.top - tableRect.top + currEl.clientHeight;
+            maxHeight = Math.max(40, tableEl.clientHeight - top - scrollbarHeight);
             if (left < 1) {
                 left = 1;
             }
@@ -96,7 +94,6 @@ function updatePopupStyle($xeTable) {
         if (zIndex) {
             panelStyle.zIndex = zIndex;
         }
-        filterStore.style = panelStyle;
         // 筛选面板是自适应表格高度
         if (compConf ? !compConf.tableFilterAutoHeight : false) {
             maxHeight = 0;
@@ -106,8 +103,8 @@ function updatePopupStyle($xeTable) {
                 maxHeight = customMaxHeight > maxHeight ? maxHeight : customMaxHeight;
             }
         }
-        // 判断面板不能大于表格高度
-        filterStore.maxHeight = maxHeight;
+        panelStyle['--vxe-ui-vxe-table-filter-default-max-height'] = maxHeight ? toCssUnit(maxHeight) : 'none';
+        filterStore.style = panelStyle;
     };
     handleStyle();
     return $xeTable.$nextTick().then(() => {

package/es/table/module/filter/panel.js

@@ -1,7 +1,7 @@
 import { defineVxeComponent } from '../../../ui/src/comp';
 import { VxeUI } from '../../../ui';
 import { formatText, isEnableConf } from '../../../ui/src/utils';
-import { getPropClass, toCssUnit } from '../../../ui/src/dom';
+import { getPropClass } from '../../../ui/src/dom';
 import { getSlotVNs } from '../../../ui/src/vn';
 import { createComponentLog } from '../../../ui/src/log';
 const { warnLog } = createComponentLog('table');
@@ -118,15 +118,18 @@ export default {
          * Publish methods
          *************************/
         renderOptions(h, filterRender, compConf) {
+            const VxeUIScrollbarComponent = VxeUI.getComponent('VxeScrollbar');
             const $xeFilterPanel = this;
             const props = $xeFilterPanel;
             const $xeTable = $xeFilterPanel.$xeTable;
             const tableInternalData = $xeTable;
             const { filterStore } = props;
-            const { column, maxHeight } = filterStore;
+            const { column } = filterStore;
             if (!column) {
                 return [];
             }
+            const filterOpts = $xeTable.computeFilterOpts;
+            const { useScrollbar } = filterOpts;
             const { filterMultiple, filters, slots } = column;
             const filterOptions = (filters || []);
             const filterSlot = slots ? slots.filter : null;
@@ -135,34 +138,51 @@ export default {
             if (filterSlot) {
                 return [
                     h('div', {
-                        class: 'vxe-table--filter-template',
-                        style: maxHeight
-                            ? {
-                                maxHeight: toCssUnit(maxHeight)
-                            }
-                            : {}
+                        class: 'vxe-table--filter-template'
                     }, $xeTable.callSlot(filterSlot, params, h))
                 ];
             }
             else if (filterRender && rtFilter) {
                 return [
                     h('div', {
-                        class: 'vxe-table--filter-template',
-                        style: maxHeight
-                            ? {
-                                maxHeight: toCssUnit(maxHeight)
-                            }
-                            : {}
+                        class: 'vxe-table--filter-template'
                     }, getSlotVNs(rtFilter.call($xeTable, h, filterRender, params)))
                 ];
             }
             const isAllChecked = filterMultiple ? filterStore.isAllSelected : !filterOptions.some((item) => item._checked);
             const isAllIndeterminate = filterMultiple && filterStore.isIndeterminate;
+            const optVNs = filterOptions.map((item) => {
+                const isChecked = item._checked;
+                const isIndeterminate = false;
+                return h('div', {
+                    class: ['vxe-table--filter-option', {
+                            'is--checked': isChecked
+                        }],
+                    attrs: {
+                        title: item.label
+                    },
+                    on: {
+                        click: (evnt) => {
+                            $xeFilterPanel.changeOption(evnt, !item._checked, item);
+                        }
+                    }
+                }, (filterMultiple
+                    ? [
+                        h('span', {
+                            class: ['vxe-checkbox--icon', isIndeterminate ? getIcon().TABLE_CHECKBOX_INDETERMINATE : (isChecked ? getIcon().TABLE_CHECKBOX_CHECKED : getIcon().TABLE_CHECKBOX_UNCHECKED)]
+                        })
+                    ]
+                    : []).concat([
+                    h('span', {
+                        class: 'vxe-checkbox--label'
+                    }, formatText(item.label, 1))
+                ]));
+            });
             return [
-                h('ul', {
+                h('div', {
                     class: 'vxe-table--filter-header'
                 }, [
-                    h('li', {
+                    h('div', {
                         class: ['vxe-table--filter-option', {
                                 'is--checked': isAllChecked,
                                 'is--indeterminate': isAllIndeterminate
@@ -187,40 +207,19 @@ export default {
                         }, getI18n('vxe.table.allFilter'))
                     ]))
                 ]),
-                h('ul', {
-                    class: 'vxe-table--filter-body',
-                    style: maxHeight
-                        ? {
-                            maxHeight: toCssUnit(maxHeight)
-                        }
-                        : {}
-                }, filterOptions.map((item) => {
-                    const isChecked = item._checked;
-                    const isIndeterminate = false;
-                    return h('li', {
-                        class: ['vxe-table--filter-option', {
-                                'is--checked': isChecked
-                            }],
-                        attrs: {
-                            title: item.label
+                useScrollbar
+                    ? h(VxeUIScrollbarComponent, {
+                        class: 'vxe-table--scrollbar-filter-body',
+                        props: {
+                            viewClassName: 'vxe-table--scrollbar-filter-body-view'
                         },
-                        on: {
-                            click: (evnt) => {
-                                $xeFilterPanel.changeOption(evnt, !item._checked, item);
-                            }
+                        scopedSlots: {
+                            default: () => optVNs
                         }
-                    }, (filterMultiple
-                        ? [
-                            h('span', {
-                                class: ['vxe-checkbox--icon', isIndeterminate ? getIcon().TABLE_CHECKBOX_INDETERMINATE : (isChecked ? getIcon().TABLE_CHECKBOX_CHECKED : getIcon().TABLE_CHECKBOX_UNCHECKED)]
-                            })
-                        ]
-                        : []).concat([
-                        h('span', {
-                            class: 'vxe-checkbox--label'
-                        }, formatText(item.label, 1))
-                    ]));
-                }))
+                    })
+                    : h('div', {
+                        class: 'vxe-table--filter-body'
+                    }, optVNs)
             ];
         },
         renderFooter(h) {

package/es/table/src/methods.js

@@ -9,8 +9,7 @@ import { moveRowAnimateToTb, clearRowAnimate, moveColAnimateToLr, clearColAnimat
 import { createComponentLog } from '../../ui/src/log';
 import { getCrossTableDragRowInfo } from './store';
 const { warnLog, errLog } = createComponentLog('table');
-const { getConfig, getI18n, renderer, scrollbarUtils, formats, interceptor, createEvent, globalEvents, GLOBAL_EVENT_KEYS } = VxeUI;
-const { getThumbOffsetSize, getThumbSize, getScrollFromClick, getScrollFromDrag } = scrollbarUtils || {};
+const { getConfig, getI18n, renderer, formats, interceptor, createEvent, globalEvents, GLOBAL_EVENT_KEYS } = VxeUI;
 const supportMaxRow = 5e6;
 const customStorageKey = 'VXE_CUSTOM_STORE';
 const maxYHeight = 5e6;
@@ -3118,6 +3117,7 @@ function handleRecalculateStyle($xeTable, reFull, reWidth, reHeight) {
         if (reFull) {
             updateTreeLineStyle($xeTable);
         }
+        $xeTable.updateScrollbar();
         internalData.rceRunTime = Date.now();
         if (reFull) {
             return computeScrollLoad($xeTable);
@@ -4678,6 +4678,13 @@ const tableMethods = {
         const $xeTable = this;
         return $xeTable.$refs.refElem;
     },
+    getScrollViewElem() {
+        const $xeTable = this;
+        const internalData = $xeTable;
+        const { elemStore } = internalData;
+        const viewEl = getRefElem(elemStore['main-body-scroll']);
+        return viewEl;
+    },
     /**
      * 获取父容器元素
      */
@@ -9954,8 +9961,14 @@ const tableMethods = {
      */
     updateScrollbar() {
         const $xeTable = this;
-        $xeTable.updateThumbSize();
-        $xeTable.updateThumbOffset();
+        const isVScrollbar = $xeTable.computeIsVScrollbar;
+        if (isVScrollbar) {
+            return $xeTable.$nextTick().then(() => {
+                $xeTable.updateThumbSize();
+                $xeTable.updateThumbOffset();
+            });
+        }
+        return Promise.resolve();
     },
     /**
      * 表头单元格按下事件
@@ -12384,11 +12397,10 @@ const tableMethods = {
     },
     triggerBodyScrollEvent(evnt, fixedType) {
         const $xeTable = this;
-        const props = $xeTable;
         const reactData = $xeTable;
         const internalData = $xeTable;
-        const { useScrollbar } = props;
         const { scrollYLoad, scrollXLoad } = reactData;
+        const isVScrollbar = $xeTable.computeIsVScrollbar;
         const { elemStore, intoRunScroll, lastScrollTop, lastScrollLeft, inWheelScroll, inVirtualScroll, inHeaderScroll, inBodyScroll, scrollRenderType, inFooterScroll } = internalData;
         if (inWheelScroll || inVirtualScroll || inHeaderScroll || inFooterScroll) {
             return;
@@ -12407,7 +12419,7 @@ const tableMethods = {
         if (!bodyScrollElem) {
             return;
         }
-        if (!useScrollbar) {
+        if (!isVScrollbar) {
             if (!xHandleEl) {
                 return;
             }
@@ -13553,196 +13565,6 @@ const tableMethods = {
         const $xeTable = this;
         return $xeTable.handleClearStack();
     },
-    // 滚动条
-    updateThumbSize() {
-        const $xeTable = this;
-        const reactData = $xeTable;
-        const internalData = $xeTable;
-        const { elemStore } = internalData;
-        const viewEl = getRefElem(elemStore['main-body-scroll']);
-        if (!viewEl) {
-            return;
-        }
-        if (!viewEl.clientHeight || !viewEl.clientHeight) {
-            return;
-        }
-        const trackXEl = $xeTable.$refs.refTrackXElem;
-        const xThumbWidth = trackXEl ? getThumbSize(viewEl.clientWidth, viewEl.scrollWidth, trackXEl.clientWidth) : 0;
-        const thumbXElem = $xeTable.$refs.refThumbXElem;
-        if (thumbXElem) {
-            thumbXElem.style.width = xThumbWidth + 'px';
-        }
-        reactData.xThumbWidth = xThumbWidth;
-        const trackYEl = $xeTable.$refs.refTrackYElem;
-        const yThumbHeight = trackYEl ? getThumbSize(viewEl.clientHeight, viewEl.scrollHeight, trackYEl.clientHeight) : 0;
-        const thumbYElem = $xeTable.$refs.refThumbYElem;
-        if (thumbYElem) {
-            thumbYElem.style.height = yThumbHeight + 'px';
-        }
-        reactData.yThumbHeight = yThumbHeight;
-    },
-    updateThumbOffset() {
-        const $xeTable = this;
-        const reactData = $xeTable;
-        const internalData = $xeTable;
-        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 = $xeTable.$refs.refTrackXElem;
-        const thumbXElem = $xeTable.$refs.refThumbXElem;
-        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 = $xeTable.$refs.refTrackYElem;
-        const thumbYElem = $xeTable.$refs.refThumbYElem;
-        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)`;
-        }
-    },
-    clickTrackXEvent(evnt) {
-        const $xeTable = this;
-        const reactData = $xeTable;
-        const internalData = $xeTable;
-        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'
-        });
-    },
-    clickTrackYEvent(evnt) {
-        const $xeTable = this;
-        const reactData = $xeTable;
-        const internalData = $xeTable;
-        const trackEl = evnt.currentTarget;
-        if (trackEl !== evnt.target) {
-            return;
-        }
-        const { elemStore } = internalData;
-        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'
-        });
-    },
-    pointerdownThumbXEvent(evnt) {
-        const $xeTable = this;
-        const reactData = $xeTable;
-        const internalData = $xeTable;
-        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;
-    },
-    pointermoveThumbXEvent(evnt) {
-        const $xeTable = this;
-        const reactData = $xeTable;
-        const internalData = $xeTable;
-        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);
-        }
-    },
-    cleatPointerThumbEvent(evnt) {
-        const $xeTable = this;
-        const internalData = $xeTable;
-        const thumbEl = evnt.currentTarget;
-        thumbEl.releasePointerCapture(evnt.pointerId);
-        internalData.isThumbDrag = false;
-    },
-    pointerdownThumbYEvent(evnt) {
-        const $xeTable = this;
-        const reactData = $xeTable;
-        const internalData = $xeTable;
-        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;
-    },
-    pointermoveThumbYEvent(evnt) {
-        const $xeTable = this;
-        const reactData = $xeTable;
-        const internalData = $xeTable;
-        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);
-        }
-    },
-    // 滚动条
     dispatchEvent(type, params, evnt) {
         const $xeTable = this;
         const $xeGrid = $xeTable.$xeGrid;
@@ -13799,6 +13621,16 @@ const tableMethods = {
         }
         return $xeTable.$nextTick();
     },
+    getInternalData() {
+        const $xeTable = this;
+        const internalData = $xeTable;
+        return internalData;
+    },
+    getReactData() {
+        const $xeTable = this;
+        const reactData = $xeTable;
+        return reactData;
+    },
     /*************************
      * Publish methods
      *************************/