vxe-pc-ui 4.20.1 → 4.20.5

package/lib/layout-aside/src/layout-aside.js

@@ -8,6 +8,7 @@ var _vue = require("vue");
 var _comp = require("../../ui/src/comp");
 var _dom = require("../../ui/src/dom");
 var _ui = require("../../ui");
+var _utils = require("../../ui/src/utils");
 var _xeUtils = _interopRequireDefault(require("xe-utils"));
 var _loading = _interopRequireDefault(require("../../loading"));
 var _scrollbar = _interopRequireDefault(require("../../scrollbar"));
@@ -23,7 +24,7 @@ var _default = exports.default = (0, _comp.defineVxeComponent)({
     collapseConfig: Object,
     useScrollbar: {
       type: Boolean,
-      default: () => (0, _ui.getConfig)().layoutAside.useScrollbar
+      default: () => (0, _utils.getDefaultConfig)((0, _ui.getConfig)().layoutAside.useScrollbar, (0, _ui.getConfig)().useScrollbar)
     },
     scrollbarConfig: Object,
     size: {

package/lib/layout-aside/src/layout-aside.min.js

@@ -1 +1 @@
-Object.defineProperty(exports,"__esModule",{value:!0}),exports.default=void 0;var _vue=require("vue"),_comp=require("../../ui/src/comp"),_dom=require("../../ui/src/dom"),_ui=require("../../ui"),_xeUtils=_interopRequireDefault(require("xe-utils")),_loading=_interopRequireDefault(require("../../loading")),_scrollbar=_interopRequireDefault(require("../../scrollbar"));function _interopRequireDefault(e){return e&&e.__esModule?e:{default:e}}var _default=exports.default=(0,_comp.defineVxeComponent)({name:"VxeLayoutAside",props:{width:[String,Number],collapsed:Boolean,collapseWidth:[String,Number],loading:Boolean,padding:Boolean,collapseConfig:Object,useScrollbar:{type:Boolean,default:()=>(0,_ui.getConfig)().layoutAside.useScrollbar},scrollbarConfig:Object,size:{type:String,default:()=>(0,_ui.getConfig)().layoutAside.size||(0,_ui.getConfig)().size}},emits:[],setup(v,e){let{slots:p,emit:t}=e;var i=_xeUtils.default.uniqueId();let g=(0,_vue.ref)(),_=(0,_ui.useSize)(v).computeSize;var a=(0,_vue.reactive)({});let l={refElem:g},f=(0,_vue.computed)(()=>Object.assign({},(0,_ui.getConfig)().layoutAside.collapseConfig,v.collapseConfig)),m=(0,_vue.computed)(()=>Object.assign({},(0,_ui.getConfig)().layoutAside.scrollbarConfig,v.scrollbarConfig)),b=(0,_vue.computed)(()=>{var{width:e,collapseWidth:i}=v,a={};return i&&(a["--vxe-ui-layout-aside-collapse-width"]=(0,_dom.toCssUnit)(i)),e&&(a["--vxe-ui-layout-aside-default-width"]=(0,_dom.toCssUnit)(e)),a}),o={computeSize:_,computeVarStyle:b},s={xID:i,props:v,context:e,reactData:a,getRefMaps:()=>l,getComputeMaps:()=>o};Object.assign(s,{dispatchEvent:(e,i,a)=>{t(e,(0,_ui.createEvent)(a,{$layoutAside:s},i))}},{});return(0,_vue.provide)("$xeLayoutAside",s),s.renderVN=()=>{var{collapsed:e,loading:i,padding:a,useScrollbar:t}=v,l=b.value,o=_.value,s=f.value,u=m.value,{className:r,viewClassName:d,viewInnerClassName:n}=u;let c=p.default;return(0,_vue.h)("aside",{ref:g,class:["vxe-layout-aside",{["size--"+o]:o,"is--animat":!1!==s.animation,"is--padding":a,"is--collapse":e,"is--loading":i}],style:l},[t?(0,_vue.h)(_scrollbar.default,{width:u.width,height:u.height,autoHide:u.autoHide,visible:u.visible,xConfig:{visible:!1},yConfig:u.yConfig,className:"vxe-layout-aside--scrollbar"+(r?" "+r:""),viewAttrs:u.viewAttrs,viewClassName:"vxe-layout-aside--scrollbar-view"+(d?" "+d:""),viewInnerClassName:"vxe-layout-aside--scrollbar-inner"+(n?" "+n:"")},{default:()=>c?c({}):[]}):(0,_vue.h)("div",{class:"vxe-layout-aside--inner"},c?c({}):[]),(0,_vue.h)(_loading.default,{class:"vxe-layout-aside-view--loading",modelValue:i})])},s},render(){return this.renderVN()}});
+Object.defineProperty(exports,"__esModule",{value:!0}),exports.default=void 0;var _vue=require("vue"),_comp=require("../../ui/src/comp"),_dom=require("../../ui/src/dom"),_ui=require("../../ui"),_utils=require("../../ui/src/utils"),_xeUtils=_interopRequireDefault(require("xe-utils")),_loading=_interopRequireDefault(require("../../loading")),_scrollbar=_interopRequireDefault(require("../../scrollbar"));function _interopRequireDefault(e){return e&&e.__esModule?e:{default:e}}var _default=exports.default=(0,_comp.defineVxeComponent)({name:"VxeLayoutAside",props:{width:[String,Number],collapsed:Boolean,collapseWidth:[String,Number],loading:Boolean,padding:Boolean,collapseConfig:Object,useScrollbar:{type:Boolean,default:()=>(0,_utils.getDefaultConfig)((0,_ui.getConfig)().layoutAside.useScrollbar,(0,_ui.getConfig)().useScrollbar)},scrollbarConfig:Object,size:{type:String,default:()=>(0,_ui.getConfig)().layoutAside.size||(0,_ui.getConfig)().size}},emits:[],setup(v,e){let{slots:g,emit:t}=e;var i=_xeUtils.default.uniqueId();let p=(0,_vue.ref)(),_=(0,_ui.useSize)(v).computeSize;var a=(0,_vue.reactive)({});let l={refElem:p},f=(0,_vue.computed)(()=>Object.assign({},(0,_ui.getConfig)().layoutAside.collapseConfig,v.collapseConfig)),m=(0,_vue.computed)(()=>Object.assign({},(0,_ui.getConfig)().layoutAside.scrollbarConfig,v.scrollbarConfig)),b=(0,_vue.computed)(()=>{var{width:e,collapseWidth:i}=v,a={};return i&&(a["--vxe-ui-layout-aside-collapse-width"]=(0,_dom.toCssUnit)(i)),e&&(a["--vxe-ui-layout-aside-default-width"]=(0,_dom.toCssUnit)(e)),a}),u={computeSize:_,computeVarStyle:b},o={xID:i,props:v,context:e,reactData:a,getRefMaps:()=>l,getComputeMaps:()=>u};Object.assign(o,{dispatchEvent:(e,i,a)=>{t(e,(0,_ui.createEvent)(a,{$layoutAside:o},i))}},{});return(0,_vue.provide)("$xeLayoutAside",o),o.renderVN=()=>{var{collapsed:e,loading:i,padding:a,useScrollbar:t}=v,l=b.value,u=_.value,o=f.value,s=m.value,{className:r,viewClassName:d,viewInnerClassName:n}=s;let c=g.default;return(0,_vue.h)("aside",{ref:p,class:["vxe-layout-aside",{["size--"+u]:u,"is--animat":!1!==o.animation,"is--padding":a,"is--collapse":e,"is--loading":i}],style:l},[t?(0,_vue.h)(_scrollbar.default,{width:s.width,height:s.height,autoHide:s.autoHide,visible:s.visible,xConfig:{visible:!1},yConfig:s.yConfig,className:"vxe-layout-aside--scrollbar"+(r?" "+r:""),viewAttrs:s.viewAttrs,viewClassName:"vxe-layout-aside--scrollbar-view"+(d?" "+d:""),viewInnerClassName:"vxe-layout-aside--scrollbar-inner"+(n?" "+n:"")},{default:()=>c?c({}):[]}):(0,_vue.h)("div",{class:"vxe-layout-aside--inner"},c?c({}):[]),(0,_vue.h)(_loading.default,{class:"vxe-layout-aside-view--loading",modelValue:i})])},o},render(){return this.renderVN()}});

package/lib/layout-body/src/layout-body.js

@@ -8,6 +8,7 @@ var _vue = require("vue");
 var _comp = require("../../ui/src/comp");
 var _ui = require("../../ui");
 var _xeUtils = _interopRequireDefault(require("xe-utils"));
+var _utils = require("../../ui/src/utils");
 var _loading = _interopRequireDefault(require("../../loading"));
 var _scrollbar = _interopRequireDefault(require("../../scrollbar"));
 var _backtop = _interopRequireDefault(require("../../backtop"));
@@ -30,7 +31,7 @@ var _default = exports.default = (0, _comp.defineVxeComponent)({
     backtopConfig: Object,
     useScrollbar: {
       type: Boolean,
-      default: () => (0, _ui.getConfig)().layoutBody.useScrollbar
+      default: () => (0, _utils.getDefaultConfig)((0, _ui.getConfig)().layoutBody.useScrollbar, (0, _ui.getConfig)().useScrollbar)
     },
     scrollbarConfig: Object,
     size: {

package/lib/layout-body/src/layout-body.min.js

@@ -1 +1 @@
-Object.defineProperty(exports,"__esModule",{value:!0}),exports.default=void 0;var _vue=require("vue"),_comp=require("../../ui/src/comp"),_ui=require("../../ui"),_xeUtils=_interopRequireDefault(require("xe-utils")),_loading=_interopRequireDefault(require("../../loading")),_scrollbar=_interopRequireDefault(require("../../scrollbar")),_backtop=_interopRequireDefault(require("../../backtop"));function _interopRequireDefault(e){return e&&e.__esModule?e:{default:e}}function createInternalData(){return{}}function createReactData(){return{}}var _default=exports.default=(0,_comp.defineVxeComponent)({name:"VxeLayoutBody",props:{loading:Boolean,padding:Boolean,showBacktop:{type:Boolean,default:()=>(0,_ui.getConfig)().layoutBody.showBacktop},backtopConfig:Object,useScrollbar:{type:Boolean,default:()=>(0,_ui.getConfig)().layoutBody.useScrollbar},scrollbarConfig:Object,size:{type:String,default:()=>(0,_ui.getConfig)().layoutBody.size||(0,_ui.getConfig)().size}},emits:[],setup(p,e){let{slots:v,emit:o}=e;var t=_xeUtils.default.uniqueId();let _="vxe_layout_body_backtop_"+t,f=(0,_vue.ref)(),b=(0,_ui.useSize)(p).computeSize;var a=createInternalData(),i=(0,_vue.reactive)(createReactData());let r={refElem:f},g=(0,_vue.computed)(()=>Object.assign({},(0,_ui.getConfig)().layoutBody.backtopConfig,p.backtopConfig,{target:"#"+_})),u=(0,_vue.computed)(()=>Object.assign({},(0,_ui.getConfig)().layoutBody.scrollbarConfig,p.scrollbarConfig)),y=(0,_vue.computed)(()=>{var e=p.showBacktop,t=u.value,{className:a,viewClassName:o,viewInnerClassName:i}=t;return{width:t.width,height:t.height,autoHide:t.autoHide,visible:t.visible,xConfig:t.xConfig,yConfig:t.yConfig,className:"vxe-layout-body--scrollbar"+(a?" "+a:""),viewAttrs:Object.assign(Object.assign({},t.viewAttrs),{id:e&&_||null}),viewClassName:"vxe-layout-body--scrollbar-view"+(o?" "+o:""),viewInnerClassName:"vxe-layout-body--scrollbar-inner"+(i?" "+i:"")}}),l={computeSize:b},m={xID:t,props:p,context:e,internalData:a,reactData:i,getRefMaps:()=>r,getComputeMaps:()=>l};Object.assign(m,{dispatchEvent:(e,t,a)=>{o(e,(0,_ui.createEvent)(a,{$layoutBody:m},t))}},{});return m.renderVN=()=>{var{loading:e,padding:t,showBacktop:a,useScrollbar:o}=p,i=g.value,r=y.value,u=b.value;let l=v.default;var n=v.backtop,s=v.backtopTop||v["backtop-top"],c=v.backtopBottom||v["backtop-bottom"],d={};return n&&(d.default=n),s&&(d.top=s),c&&(d.bottom=c),(0,_vue.h)("div",{ref:f,class:["vxe-layout-body",{["size--"+u]:u,"is--loading":e,"is--padding":t}]},[o?(0,_vue.h)(_scrollbar.default,r,{default:()=>l?l({}):[]}):(0,_vue.h)("div",{id:a?_:"",class:"vxe-layout-body--inner"},l?l({}):[]),(0,_vue.h)(_loading.default,{class:"vxe-layout-body-view--loading",modelValue:e}),a?(0,_vue.h)(_backtop.default,i,d):(0,_ui.renderEmptyElement)(m)])},m},render(){return this.renderVN()}});
+Object.defineProperty(exports,"__esModule",{value:!0}),exports.default=void 0;var _vue=require("vue"),_comp=require("../../ui/src/comp"),_ui=require("../../ui"),_xeUtils=_interopRequireDefault(require("xe-utils")),_utils=require("../../ui/src/utils"),_loading=_interopRequireDefault(require("../../loading")),_scrollbar=_interopRequireDefault(require("../../scrollbar")),_backtop=_interopRequireDefault(require("../../backtop"));function _interopRequireDefault(e){return e&&e.__esModule?e:{default:e}}function createInternalData(){return{}}function createReactData(){return{}}var _default=exports.default=(0,_comp.defineVxeComponent)({name:"VxeLayoutBody",props:{loading:Boolean,padding:Boolean,showBacktop:{type:Boolean,default:()=>(0,_ui.getConfig)().layoutBody.showBacktop},backtopConfig:Object,useScrollbar:{type:Boolean,default:()=>(0,_utils.getDefaultConfig)((0,_ui.getConfig)().layoutBody.useScrollbar,(0,_ui.getConfig)().useScrollbar)},scrollbarConfig:Object,size:{type:String,default:()=>(0,_ui.getConfig)().layoutBody.size||(0,_ui.getConfig)().size}},emits:[],setup(p,e){let{slots:_,emit:o}=e;var t=_xeUtils.default.uniqueId();let f="vxe_layout_body_backtop_"+t,g=(0,_vue.ref)(),v=(0,_ui.useSize)(p).computeSize;var a=createInternalData(),i=(0,_vue.reactive)(createReactData());let u={refElem:g},b=(0,_vue.computed)(()=>Object.assign({},(0,_ui.getConfig)().layoutBody.backtopConfig,p.backtopConfig,{target:"#"+f})),r=(0,_vue.computed)(()=>Object.assign({},(0,_ui.getConfig)().layoutBody.scrollbarConfig,p.scrollbarConfig)),y=(0,_vue.computed)(()=>{var e=p.showBacktop,t=r.value,{className:a,viewClassName:o,viewInnerClassName:i}=t;return{width:t.width,height:t.height,autoHide:t.autoHide,visible:t.visible,xConfig:t.xConfig,yConfig:t.yConfig,className:"vxe-layout-body--scrollbar"+(a?" "+a:""),viewAttrs:Object.assign(Object.assign({},t.viewAttrs),{id:e&&f||null}),viewClassName:"vxe-layout-body--scrollbar-view"+(o?" "+o:""),viewInnerClassName:"vxe-layout-body--scrollbar-inner"+(i?" "+i:"")}}),l={computeSize:v},m={xID:t,props:p,context:e,internalData:a,reactData:i,getRefMaps:()=>u,getComputeMaps:()=>l};Object.assign(m,{dispatchEvent:(e,t,a)=>{o(e,(0,_ui.createEvent)(a,{$layoutBody:m},t))}},{});return m.renderVN=()=>{var{loading:e,padding:t,showBacktop:a,useScrollbar:o}=p,i=b.value,u=y.value,r=v.value;let l=_.default;var n=_.backtop,s=_.backtopTop||_["backtop-top"],c=_.backtopBottom||_["backtop-bottom"],d={};return n&&(d.default=n),s&&(d.top=s),c&&(d.bottom=c),(0,_vue.h)("div",{ref:g,class:["vxe-layout-body",{["size--"+r]:r,"is--loading":e,"is--padding":t}]},[o?(0,_vue.h)(_scrollbar.default,u,{default:()=>l?l({}):[]}):(0,_vue.h)("div",{id:a?f:"",class:"vxe-layout-body--inner"},l?l({}):[]),(0,_vue.h)(_loading.default,{class:"vxe-layout-body-view--loading",modelValue:e}),a?(0,_vue.h)(_backtop.default,i,d):(0,_ui.renderEmptyElement)(m)])},m},render(){return this.renderVN()}});

package/lib/list/src/list.js

@@ -13,10 +13,25 @@ var _dom = require("../../ui/src/dom");
 var _utils = require("../../ui/src/utils");
 var _log = require("../../ui/src/log");
 var _anime = require("../../ui/src/anime");
-var _util = require("../../scrollbar/src/util");
-var _util2 = require("./util");
+var _util = require("./util");
 var _loading = _interopRequireDefault(require("../../loading"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const {
+  getConfig,
+  getIcon,
+  getI18n,
+  domUtils,
+  scrollbarUtils,
+  menus,
+  globalEvents,
+  globalResize
+} = _ui.VxeUI;
+const {
+  getThumbOffsetSize,
+  getThumbSize,
+  getScrollFromClick,
+  getScrollFromDrag
+} = scrollbarUtils;
 const {
   warnLog,
   errLog
@@ -63,8 +78,9 @@ function createInternalData() {
     afterList: [],
     fullKeyMaps: {},
     rowMaps: {},
-    // 滚动条
     // resizeObserver: undefined,
+    // 滚动条
+    // scrollObserver: undefined,
     // isThumbDrag: false,
     thumbDragOffset: 0,
     yThumbTop: 0,
@@ -97,26 +113,26 @@ var _default = exports.default = (0, _comp.defineVxeComponent)({
     className: [String, Function],
     size: {
       type: String,
-      default: () => (0, _ui.getConfig)().list.size || (0, _ui.getConfig)().size
+      default: () => getConfig().list.size || getConfig().size
     },
     autoResize: {
       type: Boolean,
-      default: () => (0, _ui.getConfig)().list.autoResize
+      default: () => getConfig().list.autoResize
     },
     syncResize: [Boolean, String, Number],
     showSeq: {
       type: Boolean,
-      default: () => (0, _ui.getConfig)().list.showSeq
+      default: () => getConfig().list.showSeq
     },
     showRadio: {
       type: Boolean,
-      default: () => (0, _ui.getConfig)().list.showRadio
+      default: () => getConfig().list.showRadio
     },
     checkRowKey: [String, Number],
     radioConfig: Object,
     showCheckbox: {
       type: Boolean,
-      default: () => (0, _ui.getConfig)().list.showCheckbox
+      default: () => getConfig().list.showCheckbox
     },
     checkRowKeys: Array,
     checkboxConfig: Object,
@@ -127,7 +143,7 @@ var _default = exports.default = (0, _comp.defineVxeComponent)({
     scrollY: Object,
     useScrollbar: {
       type: Boolean,
-      default: () => (0, _ui.getConfig)().list.useScrollbar
+      default: () => (0, _utils.getDefaultConfig)(getConfig().list.useScrollbar, getConfig().useScrollbar)
     },
     scrollbarConfig: Object
   },
@@ -168,13 +184,13 @@ var _default = exports.default = (0, _comp.defineVxeComponent)({
       getRefMaps: () => refMaps
     };
     const computeRowOpts = (0, _vue.computed)(() => {
-      return Object.assign({}, (0, _ui.getConfig)().list.rowConfig, props.rowConfig);
+      return Object.assign({}, getConfig().list.rowConfig, props.rowConfig);
     });
     const computeDragOpts = (0, _vue.computed)(() => {
-      return Object.assign({}, (0, _ui.getConfig)().list.dragConfig, props.dragConfig);
+      return Object.assign({}, getConfig().list.dragConfig, props.dragConfig);
     });
     const computeSYOpts = (0, _vue.computed)(() => {
-      return Object.assign({}, (0, _ui.getConfig)().list.virtualYConfig || (0, _ui.getConfig)().list.scrollY, props.virtualYConfig || props.scrollY);
+      return Object.assign({}, getConfig().list.virtualYConfig || getConfig().list.scrollY, props.virtualYConfig || props.scrollY);
     });
     const computeKeyField = (0, _vue.computed)(() => {
       const rowOpts = computeRowOpts.value;
@@ -200,23 +216,20 @@ var _default = exports.default = (0, _comp.defineVxeComponent)({
     const computeRadioOpts = (0, _vue.computed)(() => {
       return Object.assign({
         showIcon: true
-      }, (0, _ui.getConfig)().list.radioConfig, props.radioConfig);
+      }, getConfig().list.radioConfig, props.radioConfig);
     });
     const computeCheckboxOpts = (0, _vue.computed)(() => {
       return Object.assign({
         showIcon: true
-      }, (0, _ui.getConfig)().list.checkboxConfig, props.checkboxConfig);
+      }, getConfig().list.checkboxConfig, props.checkboxConfig);
     });
     const computeMenuOpts = (0, _vue.computed)(() => {
-      return Object.assign({}, (0, _ui.getConfig)().list.menuConfig, props.menuConfig);
+      return Object.assign({}, getConfig().list.menuConfig, props.menuConfig);
     });
     const computeWrapperStyles = (0, _vue.computed)(() => {
       const rowHeight = computeRowHeight.value;
-      const scrollbarOpts = computeScrollbarOpts.value;
-      const scrollbarXOpts = computeScrollbarXOpts.value;
-      const scrollbarYOpts = computeScrollbarYOpts.value;
-      const barWidth = (0, _utils.getDefaultConfig)((0, _utils.getDefaultConfig)(scrollbarYOpts.width, scrollbarOpts.width), (0, _ui.getConfig)().scrollbar.width);
-      const barHeight = (0, _utils.getDefaultConfig)((0, _utils.getDefaultConfig)(scrollbarXOpts.height, scrollbarOpts.height), (0, _ui.getConfig)().scrollbar.height);
+      const barWidth = computeScrollYWidth.value;
+      const barHeight = computeScrollXHeight.value;
       const stys = {};
       if (rowHeight) {
         stys['--vxe-ui-list-row-height'] = (0, _dom.toCssUnit)(rowHeight);
@@ -248,15 +261,25 @@ var _default = exports.default = (0, _comp.defineVxeComponent)({
       return style;
     });
     const computeScrollbarOpts = (0, _vue.computed)(() => {
-      return Object.assign({}, (0, _ui.getConfig)().list.scrollbarConfig, props.scrollbarConfig);
+      return Object.assign({}, getConfig().list.scrollbarConfig, props.scrollbarConfig);
     });
     const computeScrollbarXOpts = (0, _vue.computed)(() => {
       const scrollbarOpts = computeScrollbarOpts.value;
-      return Object.assign({}, (0, _ui.getConfig)().scrollbar.xConfig, scrollbarOpts.xConfig);
+      return Object.assign({}, getConfig().scrollbar.xConfig, scrollbarOpts.xConfig);
     });
     const computeScrollbarYOpts = (0, _vue.computed)(() => {
       const scrollbarOpts = computeScrollbarOpts.value;
-      return Object.assign({}, (0, _ui.getConfig)().scrollbar.yConfig, scrollbarOpts.yConfig);
+      return Object.assign({}, getConfig().scrollbar.yConfig, scrollbarOpts.yConfig);
+    });
+    const computeScrollXHeight = (0, _vue.computed)(() => {
+      const scrollbarOpts = computeScrollbarOpts.value;
+      const scrollbarXOpts = computeScrollbarXOpts.value;
+      return (0, _utils.getDefaultConfig)((0, _utils.getDefaultConfig)(scrollbarXOpts.height, scrollbarOpts.height), getConfig().scrollbar.height);
+    });
+    const computeScrollYWidth = (0, _vue.computed)(() => {
+      const scrollbarOpts = computeScrollbarOpts.value;
+      const scrollbarYOpts = computeScrollbarYOpts.value;
+      return (0, _utils.getDefaultConfig)((0, _utils.getDefaultConfig)(scrollbarYOpts.width, scrollbarOpts.width), getConfig().scrollbar.width);
     });
     const computeScrollXVisible = (0, _vue.computed)(() => {
       const scrollbarOpts = computeScrollbarOpts.value;
@@ -271,18 +294,14 @@ var _default = exports.default = (0, _comp.defineVxeComponent)({
     const computeScrollXAutoHide = (0, _vue.computed)(() => {
       const scrollbarOpts = computeScrollbarOpts.value;
       const scrollbarXOpts = computeScrollbarXOpts.value;
-      return (0, _utils.getDefaultConfig)((0, _utils.getDefaultConfig)(scrollbarXOpts.autoHide, scrollbarOpts.autoHide), (0, _ui.getConfig)().scrollbar.autoHide);
+      return (0, _utils.getDefaultConfig)((0, _utils.getDefaultConfig)(scrollbarXOpts.autoHide, scrollbarOpts.autoHide), getConfig().scrollbar.autoHide);
     });
     const computeScrollYAutoHide = (0, _vue.computed)(() => {
       const scrollbarOpts = computeScrollbarOpts.value;
       const scrollbarYOpts = computeScrollbarYOpts.value;
-      return (0, _utils.getDefaultConfig)((0, _utils.getDefaultConfig)(scrollbarYOpts.autoHide, scrollbarOpts.autoHide), (0, _ui.getConfig)().scrollbar.autoHide);
+      return (0, _utils.getDefaultConfig)((0, _utils.getDefaultConfig)(scrollbarYOpts.autoHide, scrollbarOpts.autoHide), getConfig().scrollbar.autoHide);
     });
     const computeScrollbarWrapperClss = (0, _vue.computed)(() => {
-      const scrollbarOpts = computeScrollbarOpts.value;
-      const {
-        padding
-      } = scrollbarOpts;
       const {
         yThumbHeight,
         xThumbWidth
@@ -291,12 +310,7 @@ var _default = exports.default = (0, _comp.defineVxeComponent)({
       const scrollbarYToLeft = computeScrollbarYToLeft.value;
       const scrollXVisible = computeScrollXVisible.value;
       const scrollYVisible = computeScrollYVisible.value;
-      const scrollXAutoHide = computeScrollXAutoHide.value;
-      const scrollYAutoHide = computeScrollYAutoHide.value;
-      return _ui.domUtils.buildClass(['vxe-scrollbar is--virtual', `ov-x--${scrollXVisible === false ? 'hidden' : 'visible'}`, `ov-y--${scrollYVisible === false ? 'hidden' : 'visible'}`, `sx-pos--${scrollbarXToTop ? 'top' : 'bottom'}`, `sy-pos--${scrollbarYToLeft ? 'left' : 'right'}`], {
-        'is--padding': padding,
-        'ov-x--auto-hide': scrollXAutoHide,
-        'ov-y--auto-hide': scrollYAutoHide,
+      return domUtils.buildClass(['vxe-scrollbar is--virtual', `ov-x--${scrollXVisible === false ? 'hidden' : 'visible'}`, `ov-y--${scrollYVisible === false ? 'hidden' : 'visible'}`, `sx-pos--${scrollbarXToTop ? 'top' : 'bottom'}`, `sy-pos--${scrollbarYToLeft ? 'left' : 'right'}`], {
         'overflow-y': yThumbHeight,
         'overflow-x': xThumbWidth
       });
@@ -324,6 +338,10 @@ var _default = exports.default = (0, _comp.defineVxeComponent)({
       const keyField = computeKeyField.value;
       return getRowIdByField(row, keyField);
     };
+    const getParentElem = () => {
+      const el = refElem.value;
+      return el ? el.parentElement : null;
+    };
     const calcTableHeight = key => {
       const {
         parentHeight
@@ -725,7 +743,7 @@ var _default = exports.default = (0, _comp.defineVxeComponent)({
         };
         tipContent = `${rTooltipMethod(rtParams) || ''}`;
       } else {
-        tipContent = (0, _ui.getI18n)('vxe.list.dragTip', [rowEl.textContent || '']);
+        tipContent = getI18n('vxe.list.dragTip', [rowEl.textContent || '']);
       }
       reactData.dragTipText = tipContent;
     };
@@ -1542,7 +1560,7 @@ var _default = exports.default = (0, _comp.defineVxeComponent)({
       const funcName = isAppend ? 'push' : 'unshift';
       newRecords.forEach(item => {
         const rowid = getRowIdByField(item, keyField);
-        const rowRest = (0, _util2.getItemCacheObj)(item);
+        const rowRest = (0, _util.getItemCacheObj)(item);
         fullData[funcName](item);
         rowMaps[rowid] = rowRest;
       });
@@ -1589,7 +1607,7 @@ var _default = exports.default = (0, _comp.defineVxeComponent)({
           if (rowIndex > -1) {
             newRecords.forEach(item => {
               const rowid = getRowIdByField(item, keyField);
-              const rowRest = (0, _util2.getItemCacheObj)(item);
+              const rowRest = (0, _util.getItemCacheObj)(item);
               rowMaps[rowid] = rowRest;
             });
             let targetIndex = rowIndex;
@@ -1664,7 +1682,7 @@ var _default = exports.default = (0, _comp.defineVxeComponent)({
                   const {
                     option
                   } = eventParams;
-                  const gMenuOpts = _ui.menus.get(option.code);
+                  const gMenuOpts = menus.get(option.code);
                   const tmMethod = gMenuOpts ? gMenuOpts.listMenuMethod : null;
                   const params = {
                     menu: option,
@@ -2070,14 +2088,14 @@ var _default = exports.default = (0, _comp.defineVxeComponent)({
         return;
       }
       const trackXEl = refTrackXElem.value;
-      const xThumbWidth = trackXEl ? (0, _util.getThumbSize)(viewEl.clientWidth, viewEl.scrollWidth, trackXEl.clientWidth) : 0;
+      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 ? (0, _util.getThumbSize)(viewEl.clientHeight, viewEl.scrollHeight, trackYEl.clientHeight) : 0;
+      const yThumbHeight = trackYEl ? getThumbSize(viewEl.clientHeight, viewEl.scrollHeight, trackYEl.clientHeight) : 0;
       const thumbYElem = refThumbYElem.value;
       if (thumbYElem) {
         thumbYElem.style.height = yThumbHeight + 'px';
@@ -2098,7 +2116,7 @@ var _default = exports.default = (0, _comp.defineVxeComponent)({
       } = reactData;
       const trackXEl = refTrackXElem.value;
       const thumbXElem = refThumbXElem.value;
-      const xThumbLeft = trackXEl && xThumbWidth ? (0, _util.getThumbOffsetSize)(viewEl.scrollLeft, viewEl.clientWidth, viewEl.scrollWidth, trackXEl.clientWidth, xThumbWidth) : 0;
+      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';
@@ -2106,7 +2124,7 @@ var _default = exports.default = (0, _comp.defineVxeComponent)({
       }
       const trackYEl = refTrackYElem.value;
       const thumbYElem = refThumbYElem.value;
-      const yThumbTop = trackYEl && yThumbHeight ? (0, _util.getThumbOffsetSize)(viewEl.scrollTop, viewEl.clientHeight, viewEl.scrollHeight, trackYEl.clientHeight, yThumbHeight) : 0;
+      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';
@@ -2127,7 +2145,7 @@ var _default = exports.default = (0, _comp.defineVxeComponent)({
       } = reactData;
       const trackRect = trackEl.getBoundingClientRect();
       viewEl.scrollTo({
-        left: (0, _util.getScrollFromClick)(evnt.clientX - trackRect.left, viewEl.clientWidth, viewEl.scrollWidth, trackEl.clientWidth, xThumbWidth),
+        left: getScrollFromClick(evnt.clientX - trackRect.left, viewEl.clientWidth, viewEl.scrollWidth, trackEl.clientWidth, xThumbWidth),
         behavior: 'auto'
       });
     };
@@ -2145,7 +2163,7 @@ var _default = exports.default = (0, _comp.defineVxeComponent)({
       } = reactData;
       const trackRect = trackEl.getBoundingClientRect();
       viewEl.scrollTo({
-        top: (0, _util.getScrollFromClick)(evnt.clientY - trackRect.top, viewEl.clientHeight, viewEl.scrollHeight, trackEl.clientHeight, yThumbHeight),
+        top: getScrollFromClick(evnt.clientY - trackRect.top, viewEl.clientHeight, viewEl.scrollHeight, trackEl.clientHeight, yThumbHeight),
         behavior: 'auto'
       });
     };
@@ -2164,7 +2182,7 @@ var _default = exports.default = (0, _comp.defineVxeComponent)({
       const trackRect = trackEl.getBoundingClientRect();
       const pointerPosition = evnt.clientX - trackRect.left;
       // 记录 thumb 的偏移
-      const thumbOffset = (0, _util.getThumbOffsetSize)(viewEl.scrollLeft, viewEl.clientWidth, viewEl.scrollWidth, trackEl.clientWidth, xThumbWidth);
+      const thumbOffset = getThumbOffsetSize(viewEl.scrollLeft, viewEl.clientWidth, viewEl.scrollWidth, trackEl.clientWidth, xThumbWidth);
       internalData.thumbDragOffset = pointerPosition - thumbOffset;
     };
     const pointermoveThumbXEvent = evnt => {
@@ -2188,7 +2206,7 @@ var _default = exports.default = (0, _comp.defineVxeComponent)({
         const trackEl = thumbEl.parentElement;
         const trackRect = trackEl.getBoundingClientRect();
         // 更新偏移
-        viewEl.scrollLeft = (0, _util.getScrollFromDrag)(evnt.clientX - trackRect.left, thumbDragOffset, viewEl.clientWidth, viewEl.scrollWidth, trackEl.clientWidth, xThumbWidth);
+        viewEl.scrollLeft = getScrollFromDrag(evnt.clientX - trackRect.left, thumbDragOffset, viewEl.clientWidth, viewEl.scrollWidth, trackEl.clientWidth, xThumbWidth);
       }
     };
     const cleatPointerThumbEvent = evnt => {
@@ -2211,7 +2229,7 @@ var _default = exports.default = (0, _comp.defineVxeComponent)({
       const trackRect = trackEl.getBoundingClientRect();
       const pointerPosition = evnt.clientY - trackRect.top;
       // 记录 thumb 的偏移
-      const thumbOffset = (0, _util.getThumbOffsetSize)(viewEl.scrollTop, viewEl.clientHeight, viewEl.scrollHeight, trackEl.clientHeight, yThumbHeight);
+      const thumbOffset = getThumbOffsetSize(viewEl.scrollTop, viewEl.clientHeight, viewEl.scrollHeight, trackEl.clientHeight, yThumbHeight);
       internalData.thumbDragOffset = pointerPosition - thumbOffset;
     };
     const pointermoveThumbYEvent = evnt => {
@@ -2235,7 +2253,7 @@ var _default = exports.default = (0, _comp.defineVxeComponent)({
         const trackEl = thumbEl.parentElement;
         const trackRect = trackEl.getBoundingClientRect();
         // 更新偏移
-        viewEl.scrollTop = (0, _util.getScrollFromDrag)(evnt.clientY - trackRect.top, thumbDragOffset, viewEl.clientHeight, viewEl.scrollHeight, trackEl.clientHeight, yThumbHeight);
+        viewEl.scrollTop = getScrollFromDrag(evnt.clientY - trackRect.top, thumbDragOffset, viewEl.clientHeight, viewEl.scrollHeight, trackEl.clientHeight, yThumbHeight);
       }
     };
     Object.assign($xeList, listMethods, listPrivateMethods);
@@ -2263,9 +2281,9 @@ var _default = exports.default = (0, _comp.defineVxeComponent)({
         }, [(0, _vue.h)('div', {
           class: 'vxe-list--drag-sort-tip-status'
         }, [(0, _vue.h)('span', {
-          class: ['vxe-list--drag-sort-tip-normal-status', (0, _ui.getIcon)().LIST_DRAG_STATUS_NODE]
+          class: ['vxe-list--drag-sort-tip-normal-status', getIcon().LIST_DRAG_STATUS_NODE]
         }), (0, _vue.h)('span', {
-          class: ['vxe-list--drag-sort-tip-disabled-status', (0, _ui.getIcon)().LIST_DRAG_DISABLED]
+          class: ['vxe-list--drag-sort-tip-disabled-status', getIcon().LIST_DRAG_DISABLED]
         })]), (0, _vue.h)('div', {
           class: 'vxe-list--drag-sort-tip-content'
         }, dragTipText)])]) : (0, _ui.renderEmptyElement)($xeList)]);
@@ -2298,7 +2316,7 @@ var _default = exports.default = (0, _comp.defineVxeComponent)({
             }
           }
         }, [(0, _vue.h)('span', {
-          class: ['vxe-radio--icon', isChecked ? (0, _ui.getIcon)().RADIO_CHECKED : isDisabled ? (0, _ui.getIcon)().RADIO_DISABLED_UNCHECKED : (0, _ui.getIcon)().RADIO_UNCHECKED]
+          class: ['vxe-radio--icon', isChecked ? getIcon().RADIO_CHECKED : isDisabled ? getIcon().RADIO_DISABLED_UNCHECKED : getIcon().RADIO_UNCHECKED]
         })]);
       }
       return (0, _ui.renderEmptyElement)($xeList);
@@ -2329,7 +2347,7 @@ var _default = exports.default = (0, _comp.defineVxeComponent)({
             }
           }
         }, [(0, _vue.h)('span', {
-          class: ['vxe-checkbox--icon', isChecked ? (0, _ui.getIcon)().CHECKBOX_CHECKED : isDisabled ? (0, _ui.getIcon)().CHECKBOX_DISABLED_UNCHECKED : (0, _ui.getIcon)().CHECKBOX_UNCHECKED]
+          class: ['vxe-checkbox--icon', isChecked ? getIcon().CHECKBOX_CHECKED : isDisabled ? getIcon().CHECKBOX_DISABLED_UNCHECKED : getIcon().CHECKBOX_UNCHECKED]
         })]);
       }
       return (0, _ui.renderEmptyElement)($xeList);
@@ -2419,7 +2437,7 @@ var _default = exports.default = (0, _comp.defineVxeComponent)({
         }, [(0, _vue.h)('span', Object.assign({
           class: 'vxe-list--drag-handle'
         }, handleOns), [(0, _vue.h)('i', {
-          class: icon || (0, _ui.getIcon)().LIST_DRAG
+          class: icon || getIcon().LIST_DRAG
         })])]));
       }
       ctVNs.push((0, _vue.h)('div', {
@@ -2546,10 +2564,10 @@ var _default = exports.default = (0, _comp.defineVxeComponent)({
         }],
         onClick: changeCheckboxAllEvent
       }, [(0, _vue.h)('span', {
-        class: ['vxe-checkbox--icon', isAllChecked ? (0, _ui.getIcon)().CHECKBOX_CHECKED : isAllIndeterminate ? (0, _ui.getIcon)().CHECKBOX_INDETERMINATE : (0, _ui.getIcon)().CHECKBOX_UNCHECKED]
+        class: ['vxe-checkbox--icon', isAllChecked ? getIcon().CHECKBOX_CHECKED : isAllIndeterminate ? getIcon().CHECKBOX_INDETERMINATE : getIcon().CHECKBOX_UNCHECKED]
       }), (0, _vue.h)('span', {
         class: 'vxe-checkbox--label'
-      }, _xeUtils.default.eqNull(headerTitle) ? (0, _ui.getI18n)('vxe.list.allChecked') : (0, _utils.getText)(headerTitle))])]) : (0, _ui.renderEmptyElement)($xeList), headerSlot ? (0, _vue.h)('div', {
+      }, _xeUtils.default.eqNull(headerTitle) ? getI18n('vxe.list.allChecked') : (0, _utils.getText)(headerTitle))])]) : (0, _ui.renderEmptyElement)($xeList), headerSlot ? (0, _vue.h)('div', {
         class: 'vxe-list--header-content'
       }, headerSlot({
         items: rowList,
@@ -2654,6 +2672,12 @@ var _default = exports.default = (0, _comp.defineVxeComponent)({
     (0, _vue.watch)(computeRowHeight, () => {
       reFlag.value++;
     });
+    (0, _vue.watch)(computeScrollYWidth, () => {
+      reFlag.value++;
+    });
+    (0, _vue.watch)(computeScrollXHeight, () => {
+      reFlag.value++;
+    });
     (0, _vue.watch)(computeScrollXVisible, () => {
       (0, _vue.nextTick)(() => {
         reFlag.value++;
@@ -2721,36 +2745,52 @@ var _default = exports.default = (0, _comp.defineVxeComponent)({
       if (useKey && !keyField) {
         errLog('vxe.error.reqSupportProp', ['row-config.useKey', 'row-config.keyField']);
       }
-      if (useScrollbar || autoResize) {
-        const el = refElem.value;
+      const el = refElem.value;
+      if (useScrollbar) {
         const viewInnerEl = refVirtualBody.value;
-        const resizeObserver = _ui.globalResize.create(() => {
+        const scrollObserver = globalResize.create(() => {
           reFlag.value++;
         });
         if (el) {
-          resizeObserver.observe(el);
-          if (autoResize) {
-            resizeObserver.observe(el.parentElement);
-          }
+          scrollObserver.observe(el);
         }
         if (viewInnerEl) {
-          resizeObserver.observe(viewInnerEl);
+          scrollObserver.observe(viewInnerEl);
+        }
+        internalData.scrollObserver = scrollObserver;
+      }
+      if (autoResize) {
+        const parentEl = getParentElem();
+        const resizeObserver = globalResize.create(() => {
+          if (props.autoResize) {
+            reFlag.value++;
+          }
+        });
+        if (el) {
+          resizeObserver.observe(el);
+        }
+        if (parentEl) {
+          resizeObserver.observe(parentEl);
         }
         internalData.resizeObserver = resizeObserver;
       }
       reFlag.value++;
-      _ui.globalEvents.on($xeList, 'resize', () => {
+      globalEvents.on($xeList, 'resize', () => {
         reFlag.value++;
       });
     });
     (0, _vue.onBeforeUnmount)(() => {
       const {
+        scrollObserver,
         resizeObserver
       } = internalData;
       if (resizeObserver) {
         resizeObserver.disconnect();
       }
-      _ui.globalEvents.off($xeList, 'resize');
+      if (scrollObserver) {
+        scrollObserver.disconnect();
+      }
+      globalEvents.off($xeList, 'resize');
       _xeUtils.default.assign(reactData, createReactData());
       _xeUtils.default.assign(internalData, createInternalData());
     });