vxe-table 4.23.0-beta.0 → 4.23.0-beta.1

package/dist/all.esm.js

@@ -56,7 +56,7 @@ function getDefaultConfig(val1, def1) {
     return XEUtils.eqNull(val1) ? def1 : val1;
 }
 
-const version = "4.23.0-beta.0";
+const version = "4.23.0-beta.1";
 VxeUI.version = version;
 VxeUI.tableVersion = version;
 VxeUI.setConfig({
@@ -318,16 +318,14 @@ VxeUI.setConfig({
             oSize: 0
         },
         scrollbarConfig: {
-            // width: 14,
-            // height: 14,
-            x: {
-                // position: 'bottom',
-                visible: true
-            },
-            y: {
-                // position: 'right',
-                visible: true
-            }
+        // xConfig: {
+        //   // position: 'bottom',
+        //   // visible: true
+        // },
+        // yConfig: {
+        //   // position: 'right',
+        //   // visible: true
+        // }
         },
         undoRedoHistoryConfig: {
             stackSize: 50
@@ -940,7 +938,7 @@ function getPopupWrapperElement(panelElem) {
 }
 
 const { log } = VxeUI;
-const tableVersion = `table v${"4.23.0-beta.0"}`;
+const tableVersion = `table v${"4.23.0-beta.1"}`;
 function createComponentLog(name) {
     const uiVersion = VxeUI.uiVersion ? `ui v${VxeUI.uiVersion}` : '';
     const ganttVersion = VxeUI.ganttVersion ? `gantt v${VxeUI.ganttVersion}` : '';
@@ -4075,6 +4073,10 @@ const tableProps = {
     virtualXConfig: Object,
     // 纵向虚拟滚动配置项
     virtualYConfig: Object,
+    useScrollbar: {
+        type: Boolean,
+        default: () => getConfig$7().table.useScrollbar
+    },
     // 滚动条配置项
     scrollbarConfig: Object,
     // 撤销/恢复历史配置项
@@ -15989,6 +15991,7 @@ var VxeTableComponent = defineVxeComponent({
         const { slots, emit } = context;
         const xID = XEUtils.uniqueId();
         const browseObj = XEUtils.browse();
+        const scrollDefaultConf = Object.assign({}, getConfig$2().scrollbar);
         // 使用已安装的组件，如果未安装则不渲染
         const VxeUILoadingComponent = VxeUI.getComponent('VxeLoading');
         const VxeUITooltipComponent = VxeUI.getComponent('VxeTooltip');
@@ -16131,14 +16134,12 @@ var VxeTableComponent = defineVxeComponent({
             return Object.assign({}, getConfig$2().table.scrollbarConfig, props.scrollbarConfig);
         });
         const computeScrollbarXOpts = computed(() => {
-            var _a;
             const scrollbarOpts = computeScrollbarOpts.value;
-            return Object.assign({}, scrollbarOpts.x, ((_a = props.scrollbarConfig) === null || _a === void 0 ? void 0 : _a.x) || {});
+            return scrollbarOpts.x ? Object.assign({}, scrollbarOpts.x, scrollbarOpts.xConfig) : (scrollbarOpts.xConfig || {});
         });
         const computeScrollbarYOpts = computed(() => {
-            var _a;
             const scrollbarOpts = computeScrollbarOpts.value;
-            return Object.assign({}, scrollbarOpts.y, ((_a = props.scrollbarConfig) === null || _a === void 0 ? void 0 : _a.y) || {});
+            return scrollbarOpts.y ? Object.assign({}, scrollbarOpts.y, scrollbarOpts.yConfig) : (scrollbarOpts.yConfig || {});
         });
         const computeScrollbarXToTop = computed(() => {
             const scrollbarXOpts = computeScrollbarXOpts.value;
@@ -16477,15 +16478,18 @@ var VxeTableComponent = defineVxeComponent({
         });
         const computeTableStyle = computed(() => {
             const scrollbarOpts = computeScrollbarOpts.value;
-            const { width, height } = scrollbarOpts;
-            const tStys = {};
-            if (width) {
-                tStys['--vxe-ui-table-view-scrollbar-width'] = toCssUnit(width);
-            }
-            if (height) {
-                tStys['--vxe-ui-table-view-scrollbar-height'] = toCssUnit(height);
+            const scrollbarXOpts = computeScrollbarXOpts.value;
+            const scrollbarYOpts = computeScrollbarYOpts.value;
+            const barWidth = getDefaultConfig(getDefaultConfig(scrollbarYOpts.width, scrollbarOpts.width), scrollDefaultConf.width);
+            const barHeight = getDefaultConfig(getDefaultConfig(scrollbarXOpts.height, scrollbarOpts.height), scrollDefaultConf.height);
+            const stys = {};
+            if (barWidth || barHeight) {
+                stys['--vxe-ui-table-view-scrollbar-width'] = toCssUnit(barWidth || barHeight);
+                stys['--vxe-ui-scrollbar-y-width'] = toCssUnit(barWidth || barHeight);
+                stys['--vxe-ui-table-view-scrollbar-height'] = toCssUnit(barHeight || barWidth);
+                stys['--vxe-ui-scrollbar-x-height'] = toCssUnit(barHeight || barWidth);
             }
-            return tStys;
+            return stys;
         });
         const computeTableRowExpandedList = computed(() => {
             const { tableData, rowExpandedFlag, expandColumn, rowGroupExpandedFlag, treeExpandedFlag } = reactData;
@@ -18391,7 +18395,6 @@ var VxeTableComponent = defineVxeComponent({
             const isHeaderRenderOptimize = computeIsHeaderRenderOptimize.value;
             const isBodyRenderOptimize = computeIsBodyRenderOptimize.value;
             const isFooterRenderOptimize = computeIsFooterRenderOptimize.value;
-            const scrollbarOpts = computeScrollbarOpts.value;
             const mouseOpts = computeMouseOpts.value;
             const bodyWrapperElem = getRefElem(elemStore['main-body-wrapper']);
             const bodyTableElem = getRefElem(elemStore['main-body-table']);
@@ -18399,24 +18402,26 @@ var VxeTableComponent = defineVxeComponent({
                 emptyPlaceholderElem.style.top = `${tHeaderHeight}px`;
                 emptyPlaceholderElem.style.height = bodyWrapperElem ? `${bodyWrapperElem.offsetHeight - osbHeight}px` : '';
             }
-            const scrollbarXConf = scrollbarOpts.x || {};
-            const scrollbarYConf = scrollbarOpts.y || {};
+            const scrollbarXOpts = computeScrollbarXOpts.value;
+            const scrollbarYOpts = computeScrollbarYOpts.value;
             const scrollbarYToLeft = computeScrollbarYToLeft.value;
             let xScrollbarVisible = overflowX ? 'visible' : 'hidden';
-            if (scrollbarXConf.visible === 'visible' || $xeGanttView) {
+            const hideXScroll = scrollbarXOpts.visible === false || scrollbarXOpts.visible === 'hidden';
+            if (!hideXScroll || $xeGanttView) {
                 osbHeight = scrollbarHeight;
                 xScrollbarVisible = 'visible';
             }
-            else if (scrollbarXConf.visible === 'hidden' || scrollbarXConf.visible === false) {
+            else if (hideXScroll) {
                 osbHeight = 0;
                 xScrollbarVisible = 'hidden';
             }
             let yScrollbarVisible = overflowY ? 'visible' : 'hidden';
-            if ((scrollbarYConf.visible === 'hidden' || scrollbarYConf.visible === false) || (($xeGantt && $xeGanttView && $xeGantt.reactData.showRightView) && !scrollbarYToLeft)) {
+            const showYScroll = !(scrollbarYOpts.visible === false || scrollbarYOpts.visible === 'hidden');
+            if (!showYScroll || (($xeGantt && $xeGanttView && $xeGantt.reactData.showRightView) && !scrollbarYToLeft)) {
                 osbWidth = 0;
                 yScrollbarVisible = 'hidden';
             }
-            else if (scrollbarYConf.visible === 'visible') {
+            else if (showYScroll) {
                 osbWidth = scrollbarWidth;
                 yScrollbarVisible = 'visible';
             }
@@ -19237,14 +19242,18 @@ var VxeTableComponent = defineVxeComponent({
             let overflowY = false;
             let overflowX = false;
             if (bodyWrapperElem) {
+                const scrollbarXOpts = computeScrollbarXOpts.value;
+                const scrollbarYOpts = computeScrollbarYOpts.value;
+                const barWidth = XEUtils.toNumber(getDefaultConfig(getDefaultConfig(scrollbarYOpts.width, scrollbarOpts.width), scrollDefaultConf.width));
+                const barHeight = XEUtils.toNumber(getDefaultConfig(getDefaultConfig(scrollbarXOpts.height, scrollbarOpts.height), scrollDefaultConf.height));
                 overflowY = scrollYHeight > bodyWrapperElem.clientHeight;
                 if (yHandleEl) {
-                    reactData.scrollbarWidth = scrollbarOpts.width || (yHandleEl.offsetWidth - yHandleEl.clientWidth) || 14;
+                    reactData.scrollbarWidth = (barWidth || barHeight) || (yHandleEl.offsetWidth - yHandleEl.clientWidth) || 14;
                 }
                 reactData.overflowY = overflowY;
                 overflowX = scrollXWidth > bodyWrapperElem.clientWidth;
                 if (xHandleEl) {
-                    reactData.scrollbarHeight = scrollbarOpts.height || (xHandleEl.offsetHeight - xHandleEl.clientHeight) || 14;
+                    reactData.scrollbarHeight = (barHeight || barWidth) || (xHandleEl.offsetHeight - xHandleEl.clientHeight) || 14;
                 }
                 const hHeight = headerTableElem ? headerTableElem.clientHeight : 0;
                 const fHeight = footerTableElem ? footerTableElem.clientHeight : 0;
@@ -28792,14 +28801,14 @@ var VxeTableComponent = defineVxeComponent({
                 const isRollY = overflowY && scrollTop !== lastScrollTop;
                 if (isRollX) {
                     // 如果禁用滚动
-                    if (scrollbarXOpts.visible === 'hidden') {
+                    if (scrollbarXOpts.visible === false || scrollbarXOpts.visible === 'hidden') {
                         evnt.preventDefault();
                         return;
                     }
                 }
                 if (isRollY) {
                     // 如果禁用滚动
-                    if (scrollbarYOpts.visible === 'hidden') {
+                    if (scrollbarYOpts.visible === false || scrollbarYOpts.visible === 'hidden') {
                         evnt.preventDefault();
                         return;
                     }
@@ -29396,10 +29405,15 @@ var VxeTableComponent = defineVxeComponent({
             const osYBehavior = XEUtils.eqNull(overscrollYBehavior) ? scrollbarOpts.overscrollBehavior : overscrollYBehavior;
             return h('div', {
                 ref: isFixedLeft ? refLeftContainer : refRightContainer,
-                class: [`vxe-table--fixed-${fixedType}-wrapper`, `sx--${scrollbarXOpts.visible}`, `sy--${scrollbarYOpts.visible}`, {
+                class: [
+                    `vxe-table--fixed-${fixedType}-wrapper`,
+                    `sx--${(scrollbarXOpts.visible === false || scrollbarXOpts.visible === 'hidden') ? 'hidden' : 'visible'}`,
+                    `sy--${(scrollbarYOpts.visible === false || scrollbarYOpts.visible === 'hidden') ? 'hidden' : 'visible'}`,
+                    {
                         [`x-ob--${osXBehavior}`]: osXBehavior,
                         [`y-ob--${osYBehavior}`]: osYBehavior
-                    }]
+                    }
+                ]
             }, [
                 showHeader
                     ? h(TableHeaderComponent, {
@@ -29708,7 +29722,11 @@ var VxeTableComponent = defineVxeComponent({
                     }]
             }, [
                 h('div', {
-                    class: ['vxe-table--main-wrapper', `sx--${scrollbarXOpts.visible}`, `sy--${scrollbarYOpts.visible}`]
+                    class: [
+                        'vxe-table--main-wrapper',
+                        `sx--${(scrollbarXOpts.visible === false || scrollbarXOpts.visible === 'hidden') ? 'hidden' : 'visible'}`,
+                        `sy--${(scrollbarYOpts.visible === false || scrollbarYOpts.visible === 'hidden') ? 'hidden' : 'visible'}`
+                    ]
                 }, [
                     /**
                      * 表头
@@ -29764,7 +29782,7 @@ var VxeTableComponent = defineVxeComponent({
                 ]);
         };
         const renderVN = () => {
-            const { loading, stripe, showHeader, height, treeConfig, mouseConfig, showFooter, highlightCell, highlightHoverRow, highlightHoverColumn, editConfig, editRules, importConfig, exportConfig, printConfig } = props;
+            const { loading, stripe, useScrollbar, showHeader, height, treeConfig, mouseConfig, showFooter, highlightCell, highlightHoverRow, highlightHoverColumn, editConfig, editRules, importConfig, exportConfig, printConfig } = props;
             const { isGroup, overflowX, overflowY, scrollXLoad, scrollYLoad, tableData, initStore, isRowGroupStatus, columnStore, filterStore, customStore, tooltipStore } = reactData;
             const { teleportToWrapperElem, popupToWrapperElem, customPopupToElem } = internalData;
             const { leftList, rightList } = columnStore;
@@ -29807,7 +29825,7 @@ var VxeTableComponent = defineVxeComponent({
             if (isCrossTableDrag && !tableData.length) {
                 tbOns.onDragover = $xeTable.handleCrossTableRowDragoverEmptyEvent;
             }
-            return h('div', Object.assign({ ref: refElem, class: ['vxe-table', 'vxe-table--render-default', `tid_${xID}`, `border--${tableBorder}`, `sx-pos--${scrollbarXToTop ? 'top' : 'bottom'}`, `sy-pos--${scrollbarYToLeft ? 'left' : 'right'}`, {
+            return h('div', Object.assign({ ref: refElem, class: ['vxe-table', 'vxe-table--render-default', `tid_${xID}`, `border--${tableBorder}`, useScrollbar ? 'is--virtual-scrollbar' : 'is--native-scrollbar', `sx-pos--${scrollbarXToTop ? 'top' : 'bottom'}`, `sy-pos--${scrollbarYToLeft ? 'left' : 'right'}`, {
                         [`size--${vSize}`]: vSize,
                         [`valid-msg--${validOpts.msgMode}`]: !!editRules,
                         'vxe-editable': !!editConfig,
@@ -30398,6 +30416,7 @@ var VxeTableComponent = defineVxeComponent({
             const areaOpts = computeAreaOpts.value;
             const sortOpts = computeSortOpts.value;
             const filterOpts = computeFilterOpts.value;
+            const scrollbarOpts = computeScrollbarOpts.value;
             const { groupFields } = aggregateOpts;
             if ($xeGantt) {
                 const { refClassifyWrapperElem } = $xeGantt.getRefMaps();
@@ -30629,6 +30648,12 @@ var VxeTableComponent = defineVxeComponent({
             // if (hasEnableConf(printConfig, printOpts) || hasEnableConf(importConfig, importOpts) || hasEnableConf(exportConfig, exportOpts)) && !$xeTable.exportData) {
             //   errLog('vxe.error.reqModule', ['Export'])
             // }
+            if (scrollbarOpts.x) {
+                warnLog$2('vxe.error.delProp', ['scrollbar-config.x', 'scrollbar-config.xConfig']);
+            }
+            if (scrollbarOpts.y) {
+                warnLog$2('vxe.error.delProp', ['scrollbar-config.y', 'scrollbar-config.yConfig']);
+            }
             Object.assign(scrollYStore, {
                 startIndex: 0,
                 endIndex: 0,