vxe-pc-ui 4.19.0 → 4.19.2

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

@@ -9,6 +9,7 @@ var _comp = require("../../ui/src/comp");
 var _dom = require("../../ui/src/dom");
 var _ui = require("../../ui");
 var _xeUtils = _interopRequireDefault(require("xe-utils"));
+var _loading = _interopRequireDefault(require("../../loading"));
 var _scrollbar = _interopRequireDefault(require("../../scrollbar"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 var _default = exports.default = (0, _comp.defineVxeComponent)({
@@ -20,6 +21,10 @@ var _default = exports.default = (0, _comp.defineVxeComponent)({
     loading: Boolean,
     padding: Boolean,
     collapseConfig: Object,
+    useScrollbar: {
+      type: Boolean,
+      default: () => (0, _ui.getConfig)().layoutAside.useScrollbar
+    },
     scrollbarConfig: Object,
     size: {
       type: String,
@@ -87,7 +92,8 @@ var _default = exports.default = (0, _comp.defineVxeComponent)({
       const {
         collapsed,
         loading,
-        padding
+        padding,
+        useScrollbar
       } = props;
       const varStyle = computeVarStyle.value;
       const vSize = computeSize.value;
@@ -112,8 +118,7 @@ var _default = exports.default = (0, _comp.defineVxeComponent)({
           'is--loading': loading
         }],
         style: varStyle
-      }, [(0, _vue.h)(_scrollbar.default, {
-        loading,
+      }, [useScrollbar ? (0, _vue.h)(_scrollbar.default, {
         native,
         xConfig: {
           visible: 'hidden'
@@ -121,12 +126,19 @@ var _default = exports.default = (0, _comp.defineVxeComponent)({
         yConfig,
         className: 'vxe-layout-aside--scrollbar' + (className ? ' ' + className : ''),
         viewAttrs,
-        viewClassName: 'vxe-layout-aside--view' + (viewClassName ? ' ' + viewClassName : ''),
-        viewInnerClassName: 'vxe-layout-aside--inner' + (viewInnerClassName ? ' ' + viewInnerClassName : '')
+        viewClassName: 'vxe-layout-aside--scrollbar-view' + (viewClassName ? ' ' + viewClassName : ''),
+        viewInnerClassName: 'vxe-layout-aside--scrollbar-inner' + (viewInnerClassName ? ' ' + viewInnerClassName : '')
       }, {
-        default: () => {
-          return defaultSlot ? defaultSlot({}) : [];
-        }
+        default: () => defaultSlot ? defaultSlot({}) : []
+      }) : (0, _vue.h)('div', {
+        class: 'vxe-layout-aside--inner'
+      }, defaultSlot ? defaultSlot({}) : []),
+      /**
+       * 加载中
+       */
+      (0, _vue.h)(_loading.default, {
+        class: 'vxe-layout-aside-view--loading',
+        modelValue: loading
       })]);
     };
     (0, _vue.provide)('$xeLayoutAside', $xeLayoutAside);

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")),_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,scrollbarConfig:Object,size:{type:String,default:()=>(0,_ui.getConfig)().layoutAside.size||(0,_ui.getConfig)().size}},emits:[],setup(p,e){let{slots:f,emit:a}=e;var i=_xeUtils.default.uniqueId();let _=(0,_vue.ref)(),g=(0,_ui.useSize)(p).computeSize;var t=(0,_vue.reactive)({});let l={refElem:_},m=(0,_vue.computed)(()=>Object.assign({},(0,_ui.getConfig)().layoutAside.collapseConfig,p.collapseConfig)),C=(0,_vue.computed)(()=>Object.assign({},(0,_ui.getConfig)().layoutAside.scrollbarConfig,p.scrollbarConfig)),x=(0,_vue.computed)(()=>{var{width:e,collapseWidth:i}=p,t={};return i&&(t["--vxe-ui-layout-aside-collapse-width"]=(0,_dom.toCssUnit)(i)),e&&(t["--vxe-ui-layout-aside-default-width"]=(0,_dom.toCssUnit)(e)),t}),o={computeSize:g,computeVarStyle:x},s={xID:i,props:p,context:e,reactData:t,getRefMaps:()=>l,getComputeMaps:()=>o};Object.assign(s,{dispatchEvent:(e,i,t)=>{a(e,(0,_ui.createEvent)(t,{$layoutAside:s},i))}},{});return(0,_vue.provide)("$xeLayoutAside",s),s.renderVN=()=>{var{collapsed:e,loading:i,padding:t}=p,a=x.value,l=g.value,o=m.value,{native:s,yConfig:u,className:r,viewAttrs:n,viewClassName:d,viewInnerClassName:c}=C.value;let v=f.default;return(0,_vue.h)("aside",{ref:_,class:["vxe-layout-aside",{["size--"+l]:l,"is--animat":!1!==o.animation,"is--padding":t,"is--collapse":e,"is--loading":i}],style:a},[(0,_vue.h)(_scrollbar.default,{loading:i,native:s,xConfig:{visible:"hidden"},yConfig:u,className:"vxe-layout-aside--scrollbar"+(r?" "+r:""),viewAttrs:n,viewClassName:"vxe-layout-aside--view"+(d?" "+d:""),viewInnerClassName:"vxe-layout-aside--inner"+(c?" "+c:"")},{default:()=>v?v({}):[]})])},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"),_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(_,e){let{slots:f,emit:l}=e;var i=_xeUtils.default.uniqueId();let g=(0,_vue.ref)(),m=(0,_ui.useSize)(_).computeSize;var a=(0,_vue.reactive)({});let t={refElem:g},y=(0,_vue.computed)(()=>Object.assign({},(0,_ui.getConfig)().layoutAside.collapseConfig,_.collapseConfig)),C=(0,_vue.computed)(()=>Object.assign({},(0,_ui.getConfig)().layoutAside.scrollbarConfig,_.scrollbarConfig)),b=(0,_vue.computed)(()=>{var{width:e,collapseWidth:i}=_,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:m,computeVarStyle:b},s={xID:i,props:_,context:e,reactData:a,getRefMaps:()=>t,getComputeMaps:()=>o};Object.assign(s,{dispatchEvent:(e,i,a)=>{l(e,(0,_ui.createEvent)(a,{$layoutAside:s},i))}},{});return(0,_vue.provide)("$xeLayoutAside",s),s.renderVN=()=>{var{collapsed:e,loading:i,padding:a,useScrollbar:l}=_,t=b.value,o=m.value,s=y.value,{native:u,yConfig:r,className:n,viewAttrs:d,viewClassName:c,viewInnerClassName:v}=C.value;let p=f.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:t},[l?(0,_vue.h)(_scrollbar.default,{native:u,xConfig:{visible:"hidden"},yConfig:r,className:"vxe-layout-aside--scrollbar"+(n?" "+n:""),viewAttrs:d,viewClassName:"vxe-layout-aside--scrollbar-view"+(c?" "+c:""),viewInnerClassName:"vxe-layout-aside--scrollbar-inner"+(v?" "+v:"")},{default:()=>p?p({}):[]}):(0,_vue.h)("div",{class:"vxe-layout-aside--inner"},p?p({}):[]),(0,_vue.h)(_loading.default,{class:"vxe-layout-aside-view--loading",modelValue:i})])},s},render(){return this.renderVN()}});

package/lib/layout-aside/style/style.css

@@ -16,6 +16,13 @@
   padding: var(--vxe-ui-layout-padding-default);
 }
 
+.vxe-layout-aside--inner {
+  flex-grow: 1;
+  overflow-y: auto;
+  overflow-x: hidden;
+  outline: 0;
+}
+
 .vxe-layout-aside--scrollbar {
   flex-grow: 1;
   overflow: hidden;

package/lib/layout-aside/style/style.min.css

@@ -1 +1 @@
-.vxe-layout-aside{position:relative;display:flex;flex-direction:column;flex-shrink:0;width:var(--vxe-ui-layout-aside-default-width);overflow:hidden}.vxe-layout-aside.is--animat{transition:width .3s}.vxe-layout-aside.is--collapse{width:var(--vxe-ui-layout-aside-collapse-width)}.vxe-layout-aside.is--padding{padding:var(--vxe-ui-layout-padding-default)}.vxe-layout-aside--scrollbar{flex-grow:1;overflow:hidden}
+.vxe-layout-aside{position:relative;display:flex;flex-direction:column;flex-shrink:0;width:var(--vxe-ui-layout-aside-default-width);overflow:hidden}.vxe-layout-aside.is--animat{transition:width .3s}.vxe-layout-aside.is--collapse{width:var(--vxe-ui-layout-aside-collapse-width)}.vxe-layout-aside.is--padding{padding:var(--vxe-ui-layout-padding-default)}.vxe-layout-aside--inner{flex-grow:1;overflow-y:auto;overflow-x:hidden;outline:0}.vxe-layout-aside--scrollbar{flex-grow:1;overflow:hidden}

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 _loading = _interopRequireDefault(require("../../loading"));
 var _scrollbar = _interopRequireDefault(require("../../scrollbar"));
 var _backtop = _interopRequireDefault(require("../../backtop"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
@@ -27,6 +28,10 @@ var _default = exports.default = (0, _comp.defineVxeComponent)({
       default: () => (0, _ui.getConfig)().layoutBody.showBacktop
     },
     backtopConfig: Object,
+    useScrollbar: {
+      type: Boolean,
+      default: () => (0, _ui.getConfig)().layoutBody.useScrollbar
+    },
     scrollbarConfig: Object,
     size: {
       type: String,
@@ -84,7 +89,8 @@ var _default = exports.default = (0, _comp.defineVxeComponent)({
       const {
         loading,
         padding,
-        showBacktop
+        showBacktop,
+        useScrollbar
       } = props;
       const backtopOpts = computeBacktopOpts.value;
       const scrollbarOpts = computeScrollbarOpts.value;
@@ -119,8 +125,7 @@ var _default = exports.default = (0, _comp.defineVxeComponent)({
           'is--loading': loading,
           'is--padding': padding
         }]
-      }, [(0, _vue.h)(_scrollbar.default, {
-        loading,
+      }, [useScrollbar ? (0, _vue.h)(_scrollbar.default, {
         native,
         xConfig,
         yConfig,
@@ -128,10 +133,20 @@ var _default = exports.default = (0, _comp.defineVxeComponent)({
         viewAttrs: Object.assign(Object.assign({}, viewAttrs), {
           id: showBacktop ? backtopId || null : null
         }),
-        viewClassName: 'vxe-layout-body--view' + (viewClassName ? ' ' + viewClassName : ''),
-        viewInnerClassName: 'vxe-layout-body--inner' + (viewInnerClassName ? ' ' + viewInnerClassName : '')
+        viewClassName: 'vxe-layout-body--scrollbar-view' + (viewClassName ? ' ' + viewClassName : ''),
+        viewInnerClassName: 'vxe-layout-body--scrollbar-inner' + (viewInnerClassName ? ' ' + viewInnerClassName : '')
       }, {
         default: () => defaultSlot ? defaultSlot({}) : []
+      }) : (0, _vue.h)('div', {
+        id: showBacktop ? backtopId : '',
+        class: 'vxe-layout-body--inner'
+      }, defaultSlot ? defaultSlot({}) : []),
+      /**
+       * 加载中
+       */
+      (0, _vue.h)(_loading.default, {
+        class: 'vxe-layout-body-view--loading',
+        modelValue: loading
       }),
       /**
        * 回到顶部

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")),_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,scrollbarConfig:Object,size:{type:String,default:()=>(0,_ui.getConfig)().layoutBody.size||(0,_ui.getConfig)().size}},emits:[],setup(b,e){let{slots:y,emit:o}=e;var t=_xeUtils.default.uniqueId();let m="vxe_layout_body_backtop_"+t,C=(0,_vue.ref)(),x=(0,_ui.useSize)(b).computeSize;var a=createInternalData(),i=(0,_vue.reactive)(createReactData());let r={refElem:C},k=(0,_vue.computed)(()=>Object.assign({},(0,_ui.getConfig)().layoutBody.backtopConfig,b.backtopConfig,{target:"#"+m})),B=(0,_vue.computed)(()=>Object.assign({},(0,_ui.getConfig)().layoutBody.scrollbarConfig,b.scrollbarConfig)),u={computeSize:x},q={xID:t,props:b,context:e,internalData:a,reactData:i,getRefMaps:()=>r,getComputeMaps:()=>u};Object.assign(q,{dispatchEvent:(e,t,a)=>{o(e,(0,_ui.createEvent)(a,{$layoutBody:q},t))}},{});return q.renderVN=()=>{var{loading:e,padding:t,showBacktop:a}=b,o=k.value,{native:i,xConfig:r,yConfig:u,className:n,viewAttrs:l,viewClassName:s,viewInnerClassName:c}=B.value,p=x.value;let d=y.default;var f=y.backtop,v=y.backtopTop||y["backtop-top"],_=y.backtopBottom||y["backtop-bottom"],g={};return f&&(g.default=f),v&&(g.top=v),_&&(g.bottom=_),(0,_vue.h)("div",{ref:C,class:["vxe-layout-body",{["size--"+p]:p,"is--loading":e,"is--padding":t}]},[(0,_vue.h)(_scrollbar.default,{loading:e,native:i,xConfig:r,yConfig:u,className:"vxe-layout-body--scrollbar"+(n?" "+n:""),viewAttrs:Object.assign(Object.assign({},l),{id:a&&m||null}),viewClassName:"vxe-layout-body--view"+(s?" "+s:""),viewInnerClassName:"vxe-layout-body--inner"+(c?" "+c:"")},{default:()=>d?d({}):[]}),a?(0,_vue.h)(_backtop.default,o,g):(0,_ui.renderEmptyElement)(q)])},q},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")),_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(y,e){let{slots:m,emit:o}=e;var t=_xeUtils.default.uniqueId();let C="vxe_layout_body_backtop_"+t,x=(0,_vue.ref)(),k=(0,_ui.useSize)(y).computeSize;var a=createInternalData(),r=(0,_vue.reactive)(createReactData());let i={refElem:x},B=(0,_vue.computed)(()=>Object.assign({},(0,_ui.getConfig)().layoutBody.backtopConfig,y.backtopConfig,{target:"#"+C})),q=(0,_vue.computed)(()=>Object.assign({},(0,_ui.getConfig)().layoutBody.scrollbarConfig,y.scrollbarConfig)),l={computeSize:k},D={xID:t,props:y,context:e,internalData:a,reactData:r,getRefMaps:()=>i,getComputeMaps:()=>l};Object.assign(D,{dispatchEvent:(e,t,a)=>{o(e,(0,_ui.createEvent)(a,{$layoutBody:D},t))}},{});return D.renderVN=()=>{var{loading:e,padding:t,showBacktop:a,useScrollbar:o}=y,r=B.value,{native:i,xConfig:l,yConfig:u,className:n,viewAttrs:s,viewClassName:c,viewInnerClassName:d}=q.value,p=k.value;let f=m.default;var v=m.backtop,_=m.backtopTop||m["backtop-top"],b=m.backtopBottom||m["backtop-bottom"],g={};return v&&(g.default=v),_&&(g.top=_),b&&(g.bottom=b),(0,_vue.h)("div",{ref:x,class:["vxe-layout-body",{["size--"+p]:p,"is--loading":e,"is--padding":t}]},[o?(0,_vue.h)(_scrollbar.default,{native:i,xConfig:l,yConfig:u,className:"vxe-layout-body--scrollbar"+(n?" "+n:""),viewAttrs:Object.assign(Object.assign({},s),{id:a&&C||null}),viewClassName:"vxe-layout-body--scrollbar-view"+(c?" "+c:""),viewInnerClassName:"vxe-layout-body--scrollbar-inner"+(d?" "+d:"")},{default:()=>f?f({}):[]}):(0,_vue.h)("div",{id:a?C:"",class:"vxe-layout-body--inner"},f?f({}):[]),(0,_vue.h)(_loading.default,{class:"vxe-layout-body-view--loading",modelValue:e}),a?(0,_vue.h)(_backtop.default,r,g):(0,_ui.renderEmptyElement)(D)])},D},render(){return this.renderVN()}});

package/lib/layout-body/style/style.css

@@ -9,6 +9,11 @@
   padding: var(--vxe-ui-layout-padding-double);
 }
 
+.vxe-layout-body--inner {
+  flex-grow: 1;
+  overflow: auto;
+}
+
 .vxe-layout-body--scrollbar {
   flex-grow: 1;
   overflow: hidden;

package/lib/layout-body/style/style.min.css

@@ -1 +1 @@
-.vxe-layout-body{position:relative;display:flex;flex-direction:column;flex-grow:1;overflow:hidden}.vxe-layout-body.is--padding{padding:var(--vxe-ui-layout-padding-double)}.vxe-layout-body--scrollbar{flex-grow:1;overflow:hidden}
+.vxe-layout-body{position:relative;display:flex;flex-direction:column;flex-grow:1;overflow:hidden}.vxe-layout-body.is--padding{padding:var(--vxe-ui-layout-padding-double)}.vxe-layout-body--inner{flex-grow:1;overflow:auto}.vxe-layout-body--scrollbar{flex-grow:1;overflow:hidden}

package/lib/menu/src/menu.js

@@ -77,6 +77,10 @@ var _default = exports.default = (0, _comp.defineVxeComponent)({
       default: () => getConfig().menu.size || getConfig().size
     },
     menuConfig: Object,
+    useScrollbar: {
+      type: Boolean,
+      default: () => getConfig().menu.useScrollbar
+    },
     scrollbarConfig: Object,
     appendTo: {
       type: [String, Function],
@@ -93,6 +97,8 @@ var _default = exports.default = (0, _comp.defineVxeComponent)({
     const $xeLayoutAside = (0, _vue.inject)('$xeLayoutAside', null);
     const refElem = (0, _vue.ref)();
     const refCollapseElem = (0, _vue.ref)();
+    const refCollapseBodyElem = (0, _vue.ref)();
+    const refCollapseBodyScrollbar = (0, _vue.ref)();
     const {
       computeSize
     } = (0, _ui.useSize)(props);
@@ -279,14 +285,19 @@ var _default = exports.default = (0, _comp.defineVxeComponent)({
           const isCollapsed = computeIsCollapsed.value;
           const el = refElem.value;
           if (el) {
-            const clientRect = el.getBoundingClientRect();
-            const parentNode = el.parentNode;
-            reactData.collapseStyle = isCollapsed ? {
-              top: (0, _dom.toCssUnit)(clientRect.top),
-              left: (0, _dom.toCssUnit)(clientRect.left),
-              height: (0, _dom.toCssUnit)(parentNode.clientHeight),
-              zIndex: reactData.collapseZindex
-            } : {};
+            let clientRect = el.getBoundingClientRect();
+            const parentElement = el.parentElement;
+            if (parentElement) {
+              if (clientRect.top < 0) {
+                clientRect = parentElement.getBoundingClientRect();
+              }
+              reactData.collapseStyle = isCollapsed ? {
+                top: (0, _dom.toCssUnit)(clientRect.top),
+                left: (0, _dom.toCssUnit)(clientRect.left),
+                height: (0, _dom.toCssUnit)(parentElement.clientHeight),
+                zIndex: reactData.collapseZindex
+              } : {};
+            }
           }
         });
       }
@@ -456,6 +467,14 @@ var _default = exports.default = (0, _comp.defineVxeComponent)({
       }
     };
     const handleMenuMouseleave = () => {
+      const $collapseBodyScrollbar = refCollapseBodyScrollbar.value;
+      const collapseBodyEl = refCollapseBodyElem.value;
+      if (collapseBodyEl) {
+        collapseBodyEl.scrollTop = 0;
+      }
+      if ($collapseBodyScrollbar) {
+        $collapseBodyScrollbar.clearScroll();
+      }
       reactData.isEnterCollapse = false;
     };
     const callSlot = (slotFunc, params) => {
@@ -705,7 +724,8 @@ var _default = exports.default = (0, _comp.defineVxeComponent)({
       const {
         loading,
         collapseFixed,
-        appendTo
+        appendTo,
+        useScrollbar
       } = props;
       const {
         initialized,
@@ -718,6 +738,10 @@ var _default = exports.default = (0, _comp.defineVxeComponent)({
       const currBorder = computeCurrBorder.value;
       const varStyle = computeVarStyle.value;
       const scrollbarOpts = computeScrollbarOpts.value;
+      const {
+        viewClassName,
+        viewInnerClassName
+      } = scrollbarOpts;
       const headerSlot = slots.header;
       const footerSlot = slots.footer;
       let ons = {};
@@ -758,11 +782,18 @@ var _default = exports.default = (0, _comp.defineVxeComponent)({
         style: Object.assign({}, varStyle, collapseStyle)
       }, ons), isCollapsed ? [headerSlot ? (0, _vue.h)('div', {
         class: 'vxe-menu--header'
-      }, headerSlot(stParams)) : (0, _ui.renderEmptyElement)($xeMenu), (0, _vue.h)(_scrollbar.default, Object.assign({
-        class: 'vxe-menu--body'
+      }, headerSlot(stParams)) : (0, _ui.renderEmptyElement)($xeMenu), useScrollbar && isEnterCollapse ? (0, _vue.h)(_scrollbar.default, Object.assign(Object.assign({
+        ref: refCollapseBodyScrollbar,
+        class: 'vxe-menu--scrollbar-body'
       }, scrollbarOpts), {
+        viewClassName: 'vxe-menu--scrollbar-body-view' + (viewClassName ? ' ' + viewClassName : ''),
+        viewInnerClassName: 'vxe-menu--scrollbar-body-inner' + (viewClassName ? ' ' + viewInnerClassName : '')
+      }), {
         default: () => menuList.map(child => renderDefaultChildren(child, menuList))
-      }), footerSlot ? (0, _vue.h)('div', {
+      }) : (0, _vue.h)('div', {
+        ref: refCollapseBodyElem,
+        class: 'vxe-menu--body'
+      }, menuList.map(child => renderDefaultChildren(child, menuList))), footerSlot ? (0, _vue.h)('div', {
         class: 'vxe-menu--footer'
       }, footerSlot(stParams)) : (0, _ui.renderEmptyElement)($xeMenu)] : [])]),
       /**

package/lib/menu/src/menu.min.js

@@ -1 +1 @@
-Object.defineProperty(exports,"__esModule",{value:!0}),exports.default=void 0;var _vue=require("vue"),_comp=require("../../ui/src/comp"),_xeUtils=_interopRequireDefault(require("xe-utils")),_ui=require("../../ui"),_dom=require("../../ui/src/dom"),_utils=require("../../ui/src/utils"),_vn=require("../../ui/src/vn"),_log=require("../../ui/src/log"),_loading=_interopRequireDefault(require("../../loading")),_scrollbar=_interopRequireDefault(require("../../scrollbar"));function _interopRequireDefault(e){return e&&e.__esModule?e:{default:e}}let errLog=(0,_log.createComponentLog)("menu").errLog,{menus,getConfig,getIcon}=_ui.VxeUI;function createInternalData(){return{lastActiveTime:0,menuInitMaps:{},menuCacheMaps:{},menuKeyMaps:{},menuEffectMaps:{}}}function createReactData(){return{initialized:!1,isEnterCollapse:!1,collapseStyle:{},collapseZindex:0,activeName:"",menuList:[],itemHeight:1}}let nemuUniqueKey=1e8;var _default=exports.default=(0,_comp.defineVxeComponent)({name:"VxeMenu",props:{modelValue:[String,Number],expandAll:Boolean,expandKeys:Array,accordion:{type:Boolean,default:()=>getConfig().menu.accordion},border:{type:[Boolean,String],default:()=>getConfig().menu.border},optionProps:{type:Object,default:()=>getConfig().menu.optionProps},collapsed:{type:Boolean,default:null},collapseFixed:Boolean,loading:Boolean,options:{type:Array,default:()=>[]},size:{type:String,default:()=>getConfig().menu.size||getConfig().size},menuConfig:Object,scrollbarConfig:Object,appendTo:{type:[String,Function],default:()=>getConfig().menu.appendTo}},emits:["update:modelValue","click","option-menu","menu-click"],setup(C,e){let{emit:n,slots:_}=e;var t=_xeUtils.default.uniqueId();let i=(0,_vue.inject)("$xeLayoutAside",null),x=(0,_vue.ref)(),g=(0,_vue.ref)(),h=(0,_ui.useSize)(C).computeSize,E=(0,_vue.reactive)(createReactData()),y=createInternalData(),l={refElem:x},a=(0,_vue.computed)(()=>Object.assign({},getConfig().menu.menuConfig,C.menuConfig)),u=(0,_vue.computed)(()=>Object.assign({},getConfig().menu.optionProps,C.optionProps)),o=(0,_vue.computed)(()=>u.value.title||"title"),r=(0,_vue.computed)(()=>u.value.name||"name"),s=(0,_vue.computed)(()=>u.value.children||"children"),k=(0,_vue.computed)(()=>u.value.linkUrl||"linkUrl"),M=(0,_vue.computed)(()=>u.value.routerLink||"routerLink"),f=(0,_vue.computed)(()=>Object.assign({},getConfig().menu.scrollbarConfig,C.scrollbarConfig)),b=(0,_vue.computed)(()=>{var e=C.border;return e?!0===e?"first-group":e:""}),T=(0,_vue.computed)(()=>{var e=C.collapsed;return _xeUtils.default.isBoolean(e)?e:!!i&&!!i.props.collapsed}),I=(0,_vue.computed)(()=>{var e;return i?(e=i.getComputeMaps().computeVarStyle,e.value):{}}),D={computeSize:h},A={xID:t,props:C,context:e,reactData:E,internalData:y,getRefMaps:()=>l,getComputeMaps:()=>D},N=e=>""+(e.title||e.name),c=u=>{let o=E.activeName,r=y.menuInitMaps;_xeUtils.default.eachTree(E.menuList,(e,t,i,n,l,a)=>{e.itemKey===o?(a.forEach(e=>{e.isActive=!0,u&&(e.isExpand=!0,r[e.itemId]=!0)}),e.isExactActive=!0):(e.isExactActive=!1,e.isActive=!1)},{children:"childList"})},m=()=>{let{options:e,expandAll:c,expandKeys:t}=C,m={},v=o.value,d=r.value,p=s.value,_=k.value,x=M.value,g={},h=(t&&t.forEach(e=>{g[e]=!0}),{}),f={};E.menuList=_xeUtils.default.mapTree(e,(e,t,i,n,l)=>{var a=++nemuUniqueKey,u=e[d]||n.join(","),o=e[p],r=o&&0<o.length,s=!!r&&(_xeUtils.default.isBoolean(e.expanded)?e.expanded:g[u]||!!c),o=(s&&(m[a]=!0),{itemConf:e,title:e[v],name:e[d],icon:e.icon,linkUrl:e[_],linkTarget:e.linkTarget,routerLink:e[x],permissionCode:e.permissionCode,children:o,slots:e.slots,parentKey:l?l.name||n.slice(0,n.length-1).join(","):"",level:n.length,itemId:a,itemKey:u,isExactActive:!1,isActive:!1,isExpand:s,hasChild:r,childList:[]});return f[u]&&errLog("vxe.error.repeatKey",[d,e[d]]),h[a]=o,f[u]=o},{children:"children",mapChildren:"childList"}),y.menuInitMaps=m,y.menuCacheMaps=h,y.menuKeyMaps=f},v=()=>{var e=C.collapseFixed;e&&(0,_vue.nextTick)(()=>{var e,t=T.value,i=x.value;i&&(e=i.getBoundingClientRect(),i=i.parentNode,E.collapseStyle=t?{top:(0,_dom.toCssUnit)(e.top),left:(0,_dom.toCssUnit)(e.left),height:(0,_dom.toCssUnit)(i.clientHeight),zIndex:E.collapseZindex}:{})})},S=()=>{var e=C.collapseFixed;e&&(e=E.initialized,T.value&&!e&&(E.initialized=!0),E.isEnterCollapse=!1,E.collapseZindex<(0,_utils.getLastZIndex)()&&(E.collapseZindex=(0,_utils.nextZIndex)()),v())},d=(t,i,e)=>{var n=C.accordion;let{menuEffectMaps:l,menuInitMaps:a}=y,{itemId:u,hasChild:o,isExpand:r}=i;var s=T.value,c=!r;if(o){t.stopPropagation(),t.preventDefault(),l[u]&&clearTimeout(l[u]),n&&e.forEach(e=>{e!==i&&(e.isExpand=!1)}),i.isExpand=c,a[u]=!0;t=(s?g:x).value;if(t){n=t.querySelector(`.vxe-menu--item-wrapper[data-menu-id="${u}"]`);let e=n?n.querySelector(".vxe-menu--item-group"):null;e&&(c?(e.style.height="0",e.setAttribute("data-effect","y"),requestAnimationFrame(()=>{e.style.height=e.scrollHeight+"px"})):(e.style.height=e.scrollHeight+"px",e.setAttribute("data-effect","y"),requestAnimationFrame(()=>{e.style.height="0"})),l[u]=setTimeout(()=>{delete l[u],e.removeAttribute("data-effect"),e.style.height=""},350))}}},z=e=>{E.activeName=e,n("update:modelValue",e)},U=(n,l)=>{var e=C.menuConfig,t=a.value;(e?(0,_utils.isEnableConf)(t):t.enabled)&&({options:e,visibleMethod:t}=t,t&&!t({$menu:A,options:e,currentMenu:l,currentOption:l.itemConf})||_ui.VxeUI.contextMenu&&_ui.VxeUI.contextMenu.openByEvent(n,{options:e,events:{optionClick(e){var t=e.option,i=menus.get(t.code),i=i?i.menuMenuMethod:null,t={menu:t,currentMenu:l,currentOption:l.itemConf,$event:n,$menu:A};i&&i(t,n),q("menu-click",t,e.$event)}}})),q("option-menu",{currentMenu:l},n)},L=(e,t,i)=>{var{itemKey:n,linkUrl:l,routerLink:a,hasChild:u}=t,l=(!l&&!a&&u?d(e,t,i):(z(n),E.isEnterCollapse=!1,y.lastActiveTime=Date.now()),{currentMenu:t,currentOption:t.itemConf,option:t.itemConf,menu:t});q("click",l,e)},w=()=>{var e=y.lastActiveTime;e<Date.now()-500&&(E.isEnterCollapse=!0)},B=()=>{E.isEnterCollapse=!1},p=(e,t)=>e&&(_xeUtils.default.isString(e)&&(e=_[e]||null),_xeUtils.default.isFunction(e))?(0,_vn.getSlotVNs)(e(t)):[],q=(e,t,i)=>{n(e,(0,_ui.createEvent)(i,{$menu:A},t))},O=e=>{var t=x.value,t=t?t.querySelector(`.vxe-menu--item-wrapper[data-menu-id="${e}"]`):null;return!!t&&((0,_dom.scrollToView)(t),!0)};t={dispatchEvent:q,setExpandByMenuKey(e,t){let{menuKeyMaps:i,menuInitMaps:n}=y;return e&&(e=_xeUtils.default.isArray(e)?e:[e]).forEach(e=>{e=i[e];e&&(t&&(n[e.itemId]=!0),e.isExpand=!!t)}),(0,_vue.nextTick)()},clearAllExpandMenu(){var e=E.menuList;return _xeUtils.default.eachTree(e,e=>{e.isExpand=!1},{children:"childList"}),y.menuInitMaps={},(0,_vue.nextTick)()},scrollToMenuKey(e){var t=y.menuKeyMaps,t=t[e];if(!t)return(0,_vue.nextTick)();let i=t.itemId;return O(i)?(0,_vue.nextTick)():(0,_vue.nextTick)().then(()=>{O(i)})},scrollToActiveMenu(){var e=E.activeName;return e?A.scrollToMenuKey(e):(0,_vue.nextTick)().then(()=>{var e=E.activeName;if(e)return A.scrollToMenuKey(e)})}};Object.assign(A,t,{});let j=(t,i)=>{var{icon:e,isExpand:n,hasChild:l}=t,a=t.slots||{},u=a.default||_.option,o=a.title||_.optionTitle||_["option-title"],a=a.icon||_.optionIcon||_["option-icon"],r=N(t),s=T.value,s={currentMenu:t,currentOption:t.itemConf,option:t.itemConf,collapsed:s};return[u?(0,_ui.renderEmptyElement)(A):(0,_vue.h)("div",{class:"vxe-menu--item-link-icon"},a?p(a,s):e?[(0,_vue.h)("i",{class:e})]:[]),u?(0,_vue.h)("div",{class:"vxe-menu--item-custom-title"},p(u,s)):(0,_vue.h)("div",{class:"vxe-menu--item-link-title",title:r},o?p(o,s):r),l?(0,_vue.h)("div",{class:"vxe-menu--item-link-collapse",onClick(e){d(e,t,i)}},[(0,_vue.h)("i",{class:n?getIcon().MENU_ITEM_EXPAND_OPEN:getIcon().MENU_ITEM_EXPAND_CLOSE})]):(0,_ui.renderEmptyElement)(A)]},V=(t,i)=>{let{itemId:e,itemKey:n,level:l,hasChild:a,isActive:u,isExactActive:o,isExpand:r,linkUrl:s,routerLink:c,linkTarget:m,childList:v}=t;var d,p=E.isEnterCollapse,_=y.menuInitMaps,x=T.value;return t.permissionCode&&!_ui.permission.checkVisible(t.permissionCode)?(0,_ui.renderEmptyElement)(A):(d={onContextmenu(e){U(e,t)},onClick(e){L(e,t,i)}},(0,_vue.h)("div",{key:n,class:["vxe-menu--item-wrapper","vxe-menu--item-level"+l,{"has--child":a,"is--exact-active":o,"is--active":u,"is--expand":x=(!x||p)&&r}],"data-menu-id":e},[s?(0,_vue.h)("a",Object.assign({class:"vxe-menu--item-link is--link",href:s,target:m},d),j(t,i)):c?(0,_vue.h)((0,_vue.resolveComponent)("router-link"),Object.assign({class:"vxe-menu--item-link is--router",to:c,target:m},d),{default:()=>j(t,i)}):(0,_vue.h)("div",Object.assign({class:"vxe-menu--item-link is--default"},d),j(t,i)),a?(0,_vue.h)("div",{class:"vxe-menu--item-group"},x||_[e]?v.map(e=>V(e,v)):[]):(0,_ui.renderEmptyElement)(A)]))};let K=(0,_vue.ref)(0);return(0,_vue.watch)(()=>C.options?C.options.length:-1,()=>{K.value++}),(0,_vue.watch)(()=>C.options,()=>{K.value++}),(0,_vue.watch)(K,()=>{m(),c(!0),(0,_vue.nextTick)(()=>{A.scrollToActiveMenu()})}),(0,_vue.watch)(()=>C.modelValue,e=>{E.activeName=e}),(0,_vue.watch)(()=>E.activeName,()=>{c(!0)}),(0,_vue.watch)(T,()=>{S()}),(0,_vue.onMounted)(()=>{var e=C.menuConfig,t=_ui.VxeUI.getComponent("VxeContextMenu");e&&!t&&errLog("vxe.error.reqComp",["vxe-context-menu"]),_ui.globalEvents.on(A,"resize",v),v(),(0,_vue.nextTick)(()=>{A.scrollToActiveMenu()})}),(0,_vue.onBeforeUnmount)(()=>{_ui.globalEvents.off(A,"resize"),_xeUtils.default.assign(E,createReactData()),_xeUtils.default.assign(y,createInternalData())}),E.initialized=!!C.collapsed,E.activeName=C.modelValue,m(),c(!0),A.renderVN=()=>{var{loading:e,collapseFixed:t,appendTo:i}=C;let{initialized:n,menuList:l,collapseStyle:a,isEnterCollapse:u}=E;var o=h.value;let r=T.value;var s=b.value,c=I.value,m=f.value,v=_.header,d=_.footer;let p={};t&&(p={onMouseenter:w,onMouseleave:B});t={collapsed:r};return(0,_vue.h)("div",{ref:x,class:["vxe-menu",{["border--"+s]:s,["size--"+o]:o,"is--collapsed":r,"is--loading":e}]},[v?(0,_vue.h)("div",{class:"vxe-menu--header"},v(t)):(0,_ui.renderEmptyElement)(A),(0,_vue.h)("div",{class:"vxe-menu--body"},l.map(e=>(r?(t,i)=>{let{itemId:e,itemKey:n,level:l,hasChild:a,isActive:u,isExactActive:o,routerLink:r,linkUrl:s,linkTarget:c,childList:m}=t;var v;return t.permissionCode&&!_ui.permission.checkVisible(t.permissionCode)?(0,_ui.renderEmptyElement)(A):(v={onContextmenu(e){U(e,t)},onClick(e){L(e,t,i)}},(0,_vue.h)("div",{key:n,class:["vxe-menu--item-wrapper","vxe-menu--item-level"+l,{"has--child":a,"is--exact-active":o,"is--active":u}],"data-menu-id":e},[s?(0,_vue.h)("a",Object.assign({class:"vxe-menu--item-link is--link",href:s,target:c},v),j(t,i)):r?(0,_vue.h)((0,_vue.resolveComponent)("router-link"),Object.assign({class:"vxe-menu--item-link is--router",to:r,target:c},v),{default:()=>j(t,i)}):(0,_vue.h)("div",Object.assign({class:"vxe-menu--item-link is--default"},v),j(t,i)),a?(0,_vue.h)("div",{class:"vxe-menu--item-group"},m.map(e=>V(e,m))):(0,_ui.renderEmptyElement)(A)]))}:V)(e,l))),d?(0,_vue.h)("div",{class:"vxe-menu--footer"},d(t)):(0,_ui.renderEmptyElement)(A),(0,_vue.h)(_vue.Teleport,{to:(0,_dom.getPopupContainer)(i),disabled:!n},[(0,_vue.h)("div",Object.assign({ref:g,class:["vxe-menu--collapse-wrapper",{["size--"+o]:o,"is--collapsed":r,"is--enter":u,"is--loading":e}],style:Object.assign({},c,a)},p),r?[v?(0,_vue.h)("div",{class:"vxe-menu--header"},v(t)):(0,_ui.renderEmptyElement)(A),(0,_vue.h)(_scrollbar.default,Object.assign({class:"vxe-menu--body"},m),{default:()=>l.map(e=>V(e,l))}),d?(0,_vue.h)("div",{class:"vxe-menu--footer"},d(t)):(0,_ui.renderEmptyElement)(A)]:[])]),(0,_vue.h)(_loading.default,{class:"vxe-menu-view--loading",modelValue:e})])},A},render(){return this.renderVN()}});
+Object.defineProperty(exports,"__esModule",{value:!0}),exports.default=void 0;var _vue=require("vue"),_comp=require("../../ui/src/comp"),_xeUtils=_interopRequireDefault(require("xe-utils")),_ui=require("../../ui"),_dom=require("../../ui/src/dom"),_utils=require("../../ui/src/utils"),_vn=require("../../ui/src/vn"),_log=require("../../ui/src/log"),_loading=_interopRequireDefault(require("../../loading")),_scrollbar=_interopRequireDefault(require("../../scrollbar"));function _interopRequireDefault(e){return e&&e.__esModule?e:{default:e}}let errLog=(0,_log.createComponentLog)("menu").errLog,{menus,getConfig,getIcon}=_ui.VxeUI;function createInternalData(){return{lastActiveTime:0,menuInitMaps:{},menuCacheMaps:{},menuKeyMaps:{},menuEffectMaps:{}}}function createReactData(){return{initialized:!1,isEnterCollapse:!1,collapseStyle:{},collapseZindex:0,activeName:"",menuList:[],itemHeight:1}}let nemuUniqueKey=1e8;var _default=exports.default=(0,_comp.defineVxeComponent)({name:"VxeMenu",props:{modelValue:[String,Number],expandAll:Boolean,expandKeys:Array,accordion:{type:Boolean,default:()=>getConfig().menu.accordion},border:{type:[Boolean,String],default:()=>getConfig().menu.border},optionProps:{type:Object,default:()=>getConfig().menu.optionProps},collapsed:{type:Boolean,default:null},collapseFixed:Boolean,loading:Boolean,options:{type:Array,default:()=>[]},size:{type:String,default:()=>getConfig().menu.size||getConfig().size},menuConfig:Object,useScrollbar:{type:Boolean,default:()=>getConfig().menu.useScrollbar},scrollbarConfig:Object,appendTo:{type:[String,Function],default:()=>getConfig().menu.appendTo}},emits:["update:modelValue","click","option-menu","menu-click"],setup(C,e){let{emit:n,slots:f}=e;var t=_xeUtils.default.uniqueId();let i=(0,_vue.inject)("$xeLayoutAside",null),h=(0,_vue.ref)(),y=(0,_vue.ref)(),E=(0,_vue.ref)(),b=(0,_vue.ref)(),k=(0,_ui.useSize)(C).computeSize,M=(0,_vue.reactive)(createReactData()),T=createInternalData(),l={refElem:h},a=(0,_vue.computed)(()=>Object.assign({},getConfig().menu.menuConfig,C.menuConfig)),u=(0,_vue.computed)(()=>Object.assign({},getConfig().menu.optionProps,C.optionProps)),r=(0,_vue.computed)(()=>u.value.title||"title"),o=(0,_vue.computed)(()=>u.value.name||"name"),s=(0,_vue.computed)(()=>u.value.children||"children"),I=(0,_vue.computed)(()=>u.value.linkUrl||"linkUrl"),A=(0,_vue.computed)(()=>u.value.routerLink||"routerLink"),U=(0,_vue.computed)(()=>Object.assign({},getConfig().menu.scrollbarConfig,C.scrollbarConfig)),w=(0,_vue.computed)(()=>{var e=C.border;return e?!0===e?"first-group":e:""}),L=(0,_vue.computed)(()=>{var e=C.collapsed;return _xeUtils.default.isBoolean(e)?e:!!i&&!!i.props.collapsed}),V=(0,_vue.computed)(()=>{var e;return i?(e=i.getComputeMaps().computeVarStyle,e.value):{}}),K={computeSize:k},O={xID:t,props:C,context:e,reactData:M,internalData:T,getRefMaps:()=>l,getComputeMaps:()=>K},D=e=>""+(e.title||e.name),c=u=>{let r=M.activeName,o=T.menuInitMaps;_xeUtils.default.eachTree(M.menuList,(e,t,i,n,l,a)=>{e.itemKey===r?(a.forEach(e=>{e.isActive=!0,u&&(e.isExpand=!0,o[e.itemId]=!0)}),e.isExactActive=!0):(e.isExactActive=!1,e.isActive=!1)},{children:"childList"})},v=()=>{let{options:e,expandAll:c,expandKeys:t}=C,v={},m=r.value,d=o.value,p=s.value,_=I.value,x=A.value,g={},f=(t&&t.forEach(e=>{g[e]=!0}),{}),h={};M.menuList=_xeUtils.default.mapTree(e,(e,t,i,n,l)=>{var a=++nemuUniqueKey,u=e[d]||n.join(","),r=e[p],o=r&&0<r.length,s=!!o&&(_xeUtils.default.isBoolean(e.expanded)?e.expanded:g[u]||!!c),r=(s&&(v[a]=!0),{itemConf:e,title:e[m],name:e[d],icon:e.icon,linkUrl:e[_],linkTarget:e.linkTarget,routerLink:e[x],permissionCode:e.permissionCode,children:r,slots:e.slots,parentKey:l?l.name||n.slice(0,n.length-1).join(","):"",level:n.length,itemId:a,itemKey:u,isExactActive:!1,isActive:!1,isExpand:s,hasChild:o,childList:[]});return h[u]&&errLog("vxe.error.repeatKey",[d,e[d]]),f[a]=r,h[u]=r},{children:"children",mapChildren:"childList"}),T.menuInitMaps=v,T.menuCacheMaps=f,T.menuKeyMaps=h},m=()=>{var e=C.collapseFixed;e&&(0,_vue.nextTick)(()=>{var t=L.value,i=h.value;if(i){let e=i.getBoundingClientRect();i=i.parentElement;i&&(e.top<0&&(e=i.getBoundingClientRect()),M.collapseStyle=t?{top:(0,_dom.toCssUnit)(e.top),left:(0,_dom.toCssUnit)(e.left),height:(0,_dom.toCssUnit)(i.clientHeight),zIndex:M.collapseZindex}:{})}})},z=()=>{var e=C.collapseFixed;e&&(e=M.initialized,L.value&&!e&&(M.initialized=!0),M.isEnterCollapse=!1,M.collapseZindex<(0,_utils.getLastZIndex)()&&(M.collapseZindex=(0,_utils.nextZIndex)()),m())},d=(t,i,e)=>{var n=C.accordion;let{menuEffectMaps:l,menuInitMaps:a}=T,{itemId:u,hasChild:r,isExpand:o}=i;var s=L.value,c=!o;if(r){t.stopPropagation(),t.preventDefault(),l[u]&&clearTimeout(l[u]),n&&e.forEach(e=>{e!==i&&(e.isExpand=!1)}),i.isExpand=c,a[u]=!0;t=(s?y:h).value;if(t){n=t.querySelector(`.vxe-menu--item-wrapper[data-menu-id="${u}"]`);let e=n?n.querySelector(".vxe-menu--item-group"):null;e&&(c?(e.style.height="0",e.setAttribute("data-effect","y"),requestAnimationFrame(()=>{e.style.height=e.scrollHeight+"px"})):(e.style.height=e.scrollHeight+"px",e.setAttribute("data-effect","y"),requestAnimationFrame(()=>{e.style.height="0"})),l[u]=setTimeout(()=>{delete l[u],e.removeAttribute("data-effect"),e.style.height=""},350))}}},B=e=>{M.activeName=e,n("update:modelValue",e)},q=(n,l)=>{var e=C.menuConfig,t=a.value;(e?(0,_utils.isEnableConf)(t):t.enabled)&&({options:e,visibleMethod:t}=t,t&&!t({$menu:O,options:e,currentMenu:l,currentOption:l.itemConf})||_ui.VxeUI.contextMenu&&_ui.VxeUI.contextMenu.openByEvent(n,{options:e,events:{optionClick(e){var t=e.option,i=menus.get(t.code),i=i?i.menuMenuMethod:null,t={menu:t,currentMenu:l,currentOption:l.itemConf,$event:n,$menu:O};i&&i(t,n),_("menu-click",t,e.$event)}}})),_("option-menu",{currentMenu:l},n)},j=(e,t,i)=>{var{itemKey:n,linkUrl:l,routerLink:a,hasChild:u}=t,l=(!l&&!a&&u?d(e,t,i):(B(n),M.isEnterCollapse=!1,T.lastActiveTime=Date.now()),{currentMenu:t,currentOption:t.itemConf,option:t.itemConf,menu:t});_("click",l,e)},P=()=>{var e=T.lastActiveTime;e<Date.now()-500&&(M.isEnterCollapse=!0)},R=()=>{var e=b.value,t=E.value;t&&(t.scrollTop=0),e&&e.clearScroll(),M.isEnterCollapse=!1},p=(e,t)=>e&&(_xeUtils.default.isString(e)&&(e=f[e]||null),_xeUtils.default.isFunction(e))?(0,_vn.getSlotVNs)(e(t)):[],_=(e,t,i)=>{n(e,(0,_ui.createEvent)(i,{$menu:O},t))},x=e=>{var t=h.value,t=t?t.querySelector(`.vxe-menu--item-wrapper[data-menu-id="${e}"]`):null;return!!t&&((0,_dom.scrollToView)(t),!0)};t={dispatchEvent:_,setExpandByMenuKey(e,t){let{menuKeyMaps:i,menuInitMaps:n}=T;return e&&(e=_xeUtils.default.isArray(e)?e:[e]).forEach(e=>{e=i[e];e&&(t&&(n[e.itemId]=!0),e.isExpand=!!t)}),(0,_vue.nextTick)()},clearAllExpandMenu(){var e=M.menuList;return _xeUtils.default.eachTree(e,e=>{e.isExpand=!1},{children:"childList"}),T.menuInitMaps={},(0,_vue.nextTick)()},scrollToMenuKey(e){var t=T.menuKeyMaps,t=t[e];if(!t)return(0,_vue.nextTick)();let i=t.itemId;return x(i)?(0,_vue.nextTick)():(0,_vue.nextTick)().then(()=>{x(i)})},scrollToActiveMenu(){var e=M.activeName;return e?O.scrollToMenuKey(e):(0,_vue.nextTick)().then(()=>{var e=M.activeName;if(e)return O.scrollToMenuKey(e)})}};Object.assign(O,t,{});let N=(t,i)=>{var{icon:e,isExpand:n,hasChild:l}=t,a=t.slots||{},u=a.default||f.option,r=a.title||f.optionTitle||f["option-title"],a=a.icon||f.optionIcon||f["option-icon"],o=D(t),s=L.value,s={currentMenu:t,currentOption:t.itemConf,option:t.itemConf,collapsed:s};return[u?(0,_ui.renderEmptyElement)(O):(0,_vue.h)("div",{class:"vxe-menu--item-link-icon"},a?p(a,s):e?[(0,_vue.h)("i",{class:e})]:[]),u?(0,_vue.h)("div",{class:"vxe-menu--item-custom-title"},p(u,s)):(0,_vue.h)("div",{class:"vxe-menu--item-link-title",title:o},r?p(r,s):o),l?(0,_vue.h)("div",{class:"vxe-menu--item-link-collapse",onClick(e){d(e,t,i)}},[(0,_vue.h)("i",{class:n?getIcon().MENU_ITEM_EXPAND_OPEN:getIcon().MENU_ITEM_EXPAND_CLOSE})]):(0,_ui.renderEmptyElement)(O)]},S=(t,i)=>{let{itemId:e,itemKey:n,level:l,hasChild:a,isActive:u,isExactActive:r,isExpand:o,linkUrl:s,routerLink:c,linkTarget:v,childList:m}=t;var d,p=M.isEnterCollapse,_=T.menuInitMaps,x=L.value;return t.permissionCode&&!_ui.permission.checkVisible(t.permissionCode)?(0,_ui.renderEmptyElement)(O):(d={onContextmenu(e){q(e,t)},onClick(e){j(e,t,i)}},(0,_vue.h)("div",{key:n,class:["vxe-menu--item-wrapper","vxe-menu--item-level"+l,{"has--child":a,"is--exact-active":r,"is--active":u,"is--expand":x=(!x||p)&&o}],"data-menu-id":e},[s?(0,_vue.h)("a",Object.assign({class:"vxe-menu--item-link is--link",href:s,target:v},d),N(t,i)):c?(0,_vue.h)((0,_vue.resolveComponent)("router-link"),Object.assign({class:"vxe-menu--item-link is--router",to:c,target:v},d),{default:()=>N(t,i)}):(0,_vue.h)("div",Object.assign({class:"vxe-menu--item-link is--default"},d),N(t,i)),a?(0,_vue.h)("div",{class:"vxe-menu--item-group"},x||_[e]?m.map(e=>S(e,m)):[]):(0,_ui.renderEmptyElement)(O)]))};let g=(0,_vue.ref)(0);return(0,_vue.watch)(()=>C.options?C.options.length:-1,()=>{g.value++}),(0,_vue.watch)(()=>C.options,()=>{g.value++}),(0,_vue.watch)(g,()=>{v(),c(!0),(0,_vue.nextTick)(()=>{O.scrollToActiveMenu()})}),(0,_vue.watch)(()=>C.modelValue,e=>{M.activeName=e}),(0,_vue.watch)(()=>M.activeName,()=>{c(!0)}),(0,_vue.watch)(L,()=>{z()}),(0,_vue.onMounted)(()=>{var e=C.menuConfig,t=_ui.VxeUI.getComponent("VxeContextMenu");e&&!t&&errLog("vxe.error.reqComp",["vxe-context-menu"]),_ui.globalEvents.on(O,"resize",m),m(),(0,_vue.nextTick)(()=>{O.scrollToActiveMenu()})}),(0,_vue.onBeforeUnmount)(()=>{_ui.globalEvents.off(O,"resize"),_xeUtils.default.assign(M,createReactData()),_xeUtils.default.assign(T,createInternalData())}),M.initialized=!!C.collapsed,M.activeName=C.modelValue,v(),c(!0),O.renderVN=()=>{var{loading:e,collapseFixed:t,appendTo:i,useScrollbar:n}=C;let{initialized:l,menuList:a,collapseStyle:u,isEnterCollapse:r}=M;var o=k.value;let s=L.value;var c=w.value,v=V.value,m=U.value,{viewClassName:d,viewInnerClassName:p}=m,_=f.header,x=f.footer;let g={};t&&(g={onMouseenter:P,onMouseleave:R});t={collapsed:s};return(0,_vue.h)("div",{ref:h,class:["vxe-menu",{["border--"+c]:c,["size--"+o]:o,"is--collapsed":s,"is--loading":e}]},[_?(0,_vue.h)("div",{class:"vxe-menu--header"},_(t)):(0,_ui.renderEmptyElement)(O),(0,_vue.h)("div",{class:"vxe-menu--body"},a.map(e=>(s?(t,i)=>{let{itemId:e,itemKey:n,level:l,hasChild:a,isActive:u,isExactActive:r,routerLink:o,linkUrl:s,linkTarget:c,childList:v}=t;var m;return t.permissionCode&&!_ui.permission.checkVisible(t.permissionCode)?(0,_ui.renderEmptyElement)(O):(m={onContextmenu(e){q(e,t)},onClick(e){j(e,t,i)}},(0,_vue.h)("div",{key:n,class:["vxe-menu--item-wrapper","vxe-menu--item-level"+l,{"has--child":a,"is--exact-active":r,"is--active":u}],"data-menu-id":e},[s?(0,_vue.h)("a",Object.assign({class:"vxe-menu--item-link is--link",href:s,target:c},m),N(t,i)):o?(0,_vue.h)((0,_vue.resolveComponent)("router-link"),Object.assign({class:"vxe-menu--item-link is--router",to:o,target:c},m),{default:()=>N(t,i)}):(0,_vue.h)("div",Object.assign({class:"vxe-menu--item-link is--default"},m),N(t,i)),a?(0,_vue.h)("div",{class:"vxe-menu--item-group"},v.map(e=>S(e,v))):(0,_ui.renderEmptyElement)(O)]))}:S)(e,a))),x?(0,_vue.h)("div",{class:"vxe-menu--footer"},x(t)):(0,_ui.renderEmptyElement)(O),(0,_vue.h)(_vue.Teleport,{to:(0,_dom.getPopupContainer)(i),disabled:!l},[(0,_vue.h)("div",Object.assign({ref:y,class:["vxe-menu--collapse-wrapper",{["size--"+o]:o,"is--collapsed":s,"is--enter":r,"is--loading":e}],style:Object.assign({},v,u)},g),s?[_?(0,_vue.h)("div",{class:"vxe-menu--header"},_(t)):(0,_ui.renderEmptyElement)(O),n&&r?(0,_vue.h)(_scrollbar.default,Object.assign(Object.assign({ref:b,class:"vxe-menu--scrollbar-body"},m),{viewClassName:"vxe-menu--scrollbar-body-view"+(d?" "+d:""),viewInnerClassName:"vxe-menu--scrollbar-body-inner"+(d?" "+p:"")}),{default:()=>a.map(e=>S(e,a))}):(0,_vue.h)("div",{ref:E,class:"vxe-menu--body"},a.map(e=>S(e,a))),x?(0,_vue.h)("div",{class:"vxe-menu--footer"},x(t)):(0,_ui.renderEmptyElement)(O)]:[])]),(0,_vue.h)(_loading.default,{class:"vxe-menu-view--loading",modelValue:e})])},O},render(){return this.renderVN()}});

package/lib/menu/style/style.css

@@ -97,17 +97,29 @@
 .vxe-menu--collapse-wrapper:not(.is--enter) .vxe-menu--item-link-collapse {
   display: none;
 }
+.vxe-menu--collapse-wrapper:not(.is--enter) .vxe-menu--scrollbar-body .vxe-scrollbar--track-x,
+.vxe-menu--collapse-wrapper:not(.is--enter) .vxe-menu--scrollbar-body .vxe-scrollbar--track-y {
+  display: none;
+}
+.vxe-menu--collapse-wrapper:not(.is--enter) > .vxe-menu--body {
+  overflow: hidden;
+}
 .vxe-menu--collapse-wrapper.is--enter {
   width: var(--vxe-ui-layout-aside-default-width);
   box-shadow: var(--vxe-ui-menu-collapse-wrapper-box-shadow);
 }
+.vxe-menu--collapse-wrapper.is--enter > .vxe-menu--body {
+  overflow: auto;
+}
 .vxe-menu--collapse-wrapper > .vxe-menu--header, .vxe-menu--collapse-wrapper > .vxe-menu--footer {
   flex-shrink: 0;
 }
-.vxe-menu--collapse-wrapper > .vxe-menu--body {
-  flex-grow: 1;
+.vxe-menu--collapse-wrapper > .vxe-menu--scrollbar-body {
   overflow: hidden;
 }
+.vxe-menu--collapse-wrapper > .vxe-menu--body, .vxe-menu--collapse-wrapper > .vxe-menu--scrollbar-body {
+  flex-grow: 1;
+}
 
 .vxe-menu--item-link {
   display: flex;

package/lib/menu/style/style.min.css

@@ -1 +1 @@
-.vxe-menu,.vxe-menu--collapse-wrapper{--vxe-ui-menu-current-font-size:var(--vxe-ui-font-size-default);--vxe-ui-menu-current-item-height:var(--vxe-ui-menu-item-height-default);--vxe-ui-menu-current-item-padding:var(--vxe-ui-layout-padding-default);--vxe-ui-menu-current-margin:4px}.vxe-menu--collapse-wrapper.size--xlarge,.vxe-menu.size--xlarge{--vxe-ui-menu-current-font-size:var(--vxe-ui-font-size-xlarge);--vxe-ui-menu-current-item-height:var(--vxe-ui-menu-item-height-xlarge);--vxe-ui-menu-current-item-padding:var(--vxe-ui-layout-padding-xlarge)}.vxe-menu--collapse-wrapper.size--large,.vxe-menu.size--large{--vxe-ui-menu-current-font-size:var(--vxe-ui-font-size-large);--vxe-ui-menu-current-item-height:var(--vxe-ui-menu-item-height-large);--vxe-ui-menu-current-item-padding:var(--vxe-ui-layout-padding-large)}.vxe-menu--collapse-wrapper.size--medium,.vxe-menu.size--medium{--vxe-ui-menu-current-font-size:var(--vxe-ui-font-size-medium);--vxe-ui-menu-current-item-height:var(--vxe-ui-menu-item-height-medium);--vxe-ui-menu-current-item-padding:var(--vxe-ui-layout-padding-medium)}.vxe-menu--collapse-wrapper.size--small,.vxe-menu.size--small{--vxe-ui-menu-current-font-size:var(--vxe-ui-font-size-small);--vxe-ui-menu-current-item-height:var(--vxe-ui-menu-item-height-small);--vxe-ui-menu-current-item-padding:var(--vxe-ui-layout-padding-small)}.vxe-menu--collapse-wrapper.size--mini,.vxe-menu.size--mini{--vxe-ui-menu-current-font-size:var(--vxe-ui-font-size-mini);--vxe-ui-menu-current-item-height:var(--vxe-ui-menu-item-height-mini);--vxe-ui-menu-current-item-padding:var(--vxe-ui-layout-padding-mini)}.vxe-menu--collapse-wrapper.size--large,.vxe-menu--collapse-wrapper.size--xlarge,.vxe-menu.size--large,.vxe-menu.size--xlarge{--vxe-ui-menu-current-margin:6px}.vxe-menu--collapse-wrapper.size--mini,.vxe-menu--collapse-wrapper.size--small,.vxe-menu.size--mini,.vxe-menu.size--small{--vxe-ui-menu-current-margin:2px}.vxe-menu{position:relative}.vxe-menu.is--collapsed .vxe-menu--item-custom-title,.vxe-menu.is--collapsed .vxe-menu--item-link-collapse,.vxe-menu.is--collapsed .vxe-menu--item-link-title{display:none}.vxe-menu.is--loading{min-height:4em}.vxe-menu.border--first .vxe-menu--item-level1>.vxe-menu--item-link{border-bottom:1px solid var(--vxe-ui-menu-border-color)}.vxe-menu.border--first-group .vxe-menu--item-level1.has--child>.vxe-menu--item-link{border-bottom:1px solid var(--vxe-ui-menu-border-color)}.vxe-menu.border--group .vxe-menu--item-wrapper.has--child>.vxe-menu--item-link{border-bottom:1px solid var(--vxe-ui-menu-border-color)}.vxe-menu.border--all .vxe-menu--item-wrapper>.vxe-menu--item-link{border-bottom:1px solid var(--vxe-ui-menu-border-color)}.vxe-menu,.vxe-menu--collapse-wrapper{font-size:var(--vxe-ui-menu-current-font-size);color:var(--vxe-ui-font-color);font-family:var(--vxe-ui-font-family);background-color:var(--vxe-ui-layout-background-color)}.vxe-menu--collapse-wrapper{display:none;flex-direction:column;position:absolute;overflow:hidden;background-color:var(--vxe-ui-layout-background-color)}.vxe-menu--collapse-wrapper.is--collapsed{display:flex;transition:all .25s ease-in-out}.vxe-menu--collapse-wrapper:not(.is--enter){width:var(--vxe-ui-layout-aside-collapse-width)}.vxe-menu--collapse-wrapper:not(.is--enter) .vxe-menu--item-custom-title,.vxe-menu--collapse-wrapper:not(.is--enter) .vxe-menu--item-link-collapse,.vxe-menu--collapse-wrapper:not(.is--enter) .vxe-menu--item-link-title{display:none}.vxe-menu--collapse-wrapper.is--enter{width:var(--vxe-ui-layout-aside-default-width);box-shadow:var(--vxe-ui-menu-collapse-wrapper-box-shadow)}.vxe-menu--collapse-wrapper>.vxe-menu--footer,.vxe-menu--collapse-wrapper>.vxe-menu--header{flex-shrink:0}.vxe-menu--collapse-wrapper>.vxe-menu--body{flex-grow:1;overflow:hidden}.vxe-menu--item-link{display:flex;flex-direction:row;align-items:center;margin:0 var(--vxe-ui-menu-current-item-padding);height:var(--vxe-ui-menu-current-item-height);color:var(--vxe-ui-font-color);border-radius:var(--vxe-ui-base-border-radius);text-decoration:none;cursor:pointer}.vxe-menu--item-link:hover{background-color:var(--vxe-ui-base-hover-background-color)}.vxe-menu--item-custom-title,.vxe-menu--item-link,.vxe-menu--item-link-title{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.vxe-menu--item-link-icon{flex-shrink:0;width:var(--vxe-ui-menu-icon-width);text-align:center}.vxe-menu--item-custom-title,.vxe-menu--item-link-title{flex-grow:1;padding-left:.2em}.vxe-menu--item-link-collapse{flex-shrink:0;padding:.5em;-webkit-user-select:none;-moz-user-select:none;user-select:none}.vxe-menu--item-link-collapse i{display:inline-block;font-size:.8em;transition:transform .25s ease-in-out}.vxe-menu--item-wrapper{margin:var(--vxe-ui-menu-current-margin) 0}.vxe-menu--item-wrapper:first-child{margin-top:0}.vxe-menu--item-wrapper:last-child{margin-bottom:0}.vxe-menu--item-wrapper.vxe-menu--item-level1>.vxe-menu--item-link{padding:0 var(--vxe-ui-layout-padding-double)}.vxe-menu--item-wrapper.vxe-menu--item-level1>.vxe-menu--item-link{padding:0 var(--vxe-ui-layout-padding-double) 0 calc(var(--vxe-ui-layout-padding-double) * 1)}.vxe-menu--item-wrapper.vxe-menu--item-level2>.vxe-menu--item-link{padding:0 var(--vxe-ui-layout-padding-double) 0 calc(var(--vxe-ui-layout-padding-double) * 2)}.vxe-menu--item-wrapper.vxe-menu--item-level3>.vxe-menu--item-link{padding:0 var(--vxe-ui-layout-padding-double) 0 calc(var(--vxe-ui-layout-padding-double) * 3)}.vxe-menu--item-wrapper.vxe-menu--item-level4>.vxe-menu--item-link{padding:0 var(--vxe-ui-layout-padding-double) 0 calc(var(--vxe-ui-layout-padding-double) * 4)}.vxe-menu--item-wrapper.vxe-menu--item-level5>.vxe-menu--item-link{padding:0 var(--vxe-ui-layout-padding-double) 0 calc(var(--vxe-ui-layout-padding-double) * 5)}.vxe-menu--item-wrapper.vxe-menu--item-level6>.vxe-menu--item-link{padding:0 var(--vxe-ui-layout-padding-double) 0 calc(var(--vxe-ui-layout-padding-double) * 6)}.vxe-menu--item-wrapper.vxe-menu--item-level7>.vxe-menu--item-link{padding:0 var(--vxe-ui-layout-padding-double) 0 calc(var(--vxe-ui-layout-padding-double) * 7)}.vxe-menu--item-group{height:0;overflow:hidden}.vxe-menu--item-group[data-effect]{transition:height .3s ease-in-out}.vxe-menu--item-wrapper.is--active>.vxe-menu--item-link{font-weight:700}.vxe-menu--item-wrapper.is--exact-active>.vxe-menu--item-link{color:var(--vxe-ui-font-primary-color);background-color:var(--vxe-ui-base-active-background-color)}.vxe-menu--item-wrapper.is--expand>.vxe-menu--item-group{height:auto}
+.vxe-menu,.vxe-menu--collapse-wrapper{--vxe-ui-menu-current-font-size:var(--vxe-ui-font-size-default);--vxe-ui-menu-current-item-height:var(--vxe-ui-menu-item-height-default);--vxe-ui-menu-current-item-padding:var(--vxe-ui-layout-padding-default);--vxe-ui-menu-current-margin:4px}.vxe-menu--collapse-wrapper.size--xlarge,.vxe-menu.size--xlarge{--vxe-ui-menu-current-font-size:var(--vxe-ui-font-size-xlarge);--vxe-ui-menu-current-item-height:var(--vxe-ui-menu-item-height-xlarge);--vxe-ui-menu-current-item-padding:var(--vxe-ui-layout-padding-xlarge)}.vxe-menu--collapse-wrapper.size--large,.vxe-menu.size--large{--vxe-ui-menu-current-font-size:var(--vxe-ui-font-size-large);--vxe-ui-menu-current-item-height:var(--vxe-ui-menu-item-height-large);--vxe-ui-menu-current-item-padding:var(--vxe-ui-layout-padding-large)}.vxe-menu--collapse-wrapper.size--medium,.vxe-menu.size--medium{--vxe-ui-menu-current-font-size:var(--vxe-ui-font-size-medium);--vxe-ui-menu-current-item-height:var(--vxe-ui-menu-item-height-medium);--vxe-ui-menu-current-item-padding:var(--vxe-ui-layout-padding-medium)}.vxe-menu--collapse-wrapper.size--small,.vxe-menu.size--small{--vxe-ui-menu-current-font-size:var(--vxe-ui-font-size-small);--vxe-ui-menu-current-item-height:var(--vxe-ui-menu-item-height-small);--vxe-ui-menu-current-item-padding:var(--vxe-ui-layout-padding-small)}.vxe-menu--collapse-wrapper.size--mini,.vxe-menu.size--mini{--vxe-ui-menu-current-font-size:var(--vxe-ui-font-size-mini);--vxe-ui-menu-current-item-height:var(--vxe-ui-menu-item-height-mini);--vxe-ui-menu-current-item-padding:var(--vxe-ui-layout-padding-mini)}.vxe-menu--collapse-wrapper.size--large,.vxe-menu--collapse-wrapper.size--xlarge,.vxe-menu.size--large,.vxe-menu.size--xlarge{--vxe-ui-menu-current-margin:6px}.vxe-menu--collapse-wrapper.size--mini,.vxe-menu--collapse-wrapper.size--small,.vxe-menu.size--mini,.vxe-menu.size--small{--vxe-ui-menu-current-margin:2px}.vxe-menu{position:relative}.vxe-menu.is--collapsed .vxe-menu--item-custom-title,.vxe-menu.is--collapsed .vxe-menu--item-link-collapse,.vxe-menu.is--collapsed .vxe-menu--item-link-title{display:none}.vxe-menu.is--loading{min-height:4em}.vxe-menu.border--first .vxe-menu--item-level1>.vxe-menu--item-link{border-bottom:1px solid var(--vxe-ui-menu-border-color)}.vxe-menu.border--first-group .vxe-menu--item-level1.has--child>.vxe-menu--item-link{border-bottom:1px solid var(--vxe-ui-menu-border-color)}.vxe-menu.border--group .vxe-menu--item-wrapper.has--child>.vxe-menu--item-link{border-bottom:1px solid var(--vxe-ui-menu-border-color)}.vxe-menu.border--all .vxe-menu--item-wrapper>.vxe-menu--item-link{border-bottom:1px solid var(--vxe-ui-menu-border-color)}.vxe-menu,.vxe-menu--collapse-wrapper{font-size:var(--vxe-ui-menu-current-font-size);color:var(--vxe-ui-font-color);font-family:var(--vxe-ui-font-family);background-color:var(--vxe-ui-layout-background-color)}.vxe-menu--collapse-wrapper{display:none;flex-direction:column;position:absolute;overflow:hidden;background-color:var(--vxe-ui-layout-background-color)}.vxe-menu--collapse-wrapper.is--collapsed{display:flex;transition:all .25s ease-in-out}.vxe-menu--collapse-wrapper:not(.is--enter){width:var(--vxe-ui-layout-aside-collapse-width)}.vxe-menu--collapse-wrapper:not(.is--enter) .vxe-menu--item-custom-title,.vxe-menu--collapse-wrapper:not(.is--enter) .vxe-menu--item-link-collapse,.vxe-menu--collapse-wrapper:not(.is--enter) .vxe-menu--item-link-title{display:none}.vxe-menu--collapse-wrapper:not(.is--enter) .vxe-menu--scrollbar-body .vxe-scrollbar--track-x,.vxe-menu--collapse-wrapper:not(.is--enter) .vxe-menu--scrollbar-body .vxe-scrollbar--track-y{display:none}.vxe-menu--collapse-wrapper:not(.is--enter)>.vxe-menu--body{overflow:hidden}.vxe-menu--collapse-wrapper.is--enter{width:var(--vxe-ui-layout-aside-default-width);box-shadow:var(--vxe-ui-menu-collapse-wrapper-box-shadow)}.vxe-menu--collapse-wrapper.is--enter>.vxe-menu--body{overflow:auto}.vxe-menu--collapse-wrapper>.vxe-menu--footer,.vxe-menu--collapse-wrapper>.vxe-menu--header{flex-shrink:0}.vxe-menu--collapse-wrapper>.vxe-menu--scrollbar-body{overflow:hidden}.vxe-menu--collapse-wrapper>.vxe-menu--body,.vxe-menu--collapse-wrapper>.vxe-menu--scrollbar-body{flex-grow:1}.vxe-menu--item-link{display:flex;flex-direction:row;align-items:center;margin:0 var(--vxe-ui-menu-current-item-padding);height:var(--vxe-ui-menu-current-item-height);color:var(--vxe-ui-font-color);border-radius:var(--vxe-ui-base-border-radius);text-decoration:none;cursor:pointer}.vxe-menu--item-link:hover{background-color:var(--vxe-ui-base-hover-background-color)}.vxe-menu--item-custom-title,.vxe-menu--item-link,.vxe-menu--item-link-title{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.vxe-menu--item-link-icon{flex-shrink:0;width:var(--vxe-ui-menu-icon-width);text-align:center}.vxe-menu--item-custom-title,.vxe-menu--item-link-title{flex-grow:1;padding-left:.2em}.vxe-menu--item-link-collapse{flex-shrink:0;padding:.5em;-webkit-user-select:none;-moz-user-select:none;user-select:none}.vxe-menu--item-link-collapse i{display:inline-block;font-size:.8em;transition:transform .25s ease-in-out}.vxe-menu--item-wrapper{margin:var(--vxe-ui-menu-current-margin) 0}.vxe-menu--item-wrapper:first-child{margin-top:0}.vxe-menu--item-wrapper:last-child{margin-bottom:0}.vxe-menu--item-wrapper.vxe-menu--item-level1>.vxe-menu--item-link{padding:0 var(--vxe-ui-layout-padding-double)}.vxe-menu--item-wrapper.vxe-menu--item-level1>.vxe-menu--item-link{padding:0 var(--vxe-ui-layout-padding-double) 0 calc(var(--vxe-ui-layout-padding-double) * 1)}.vxe-menu--item-wrapper.vxe-menu--item-level2>.vxe-menu--item-link{padding:0 var(--vxe-ui-layout-padding-double) 0 calc(var(--vxe-ui-layout-padding-double) * 2)}.vxe-menu--item-wrapper.vxe-menu--item-level3>.vxe-menu--item-link{padding:0 var(--vxe-ui-layout-padding-double) 0 calc(var(--vxe-ui-layout-padding-double) * 3)}.vxe-menu--item-wrapper.vxe-menu--item-level4>.vxe-menu--item-link{padding:0 var(--vxe-ui-layout-padding-double) 0 calc(var(--vxe-ui-layout-padding-double) * 4)}.vxe-menu--item-wrapper.vxe-menu--item-level5>.vxe-menu--item-link{padding:0 var(--vxe-ui-layout-padding-double) 0 calc(var(--vxe-ui-layout-padding-double) * 5)}.vxe-menu--item-wrapper.vxe-menu--item-level6>.vxe-menu--item-link{padding:0 var(--vxe-ui-layout-padding-double) 0 calc(var(--vxe-ui-layout-padding-double) * 6)}.vxe-menu--item-wrapper.vxe-menu--item-level7>.vxe-menu--item-link{padding:0 var(--vxe-ui-layout-padding-double) 0 calc(var(--vxe-ui-layout-padding-double) * 7)}.vxe-menu--item-group{height:0;overflow:hidden}.vxe-menu--item-group[data-effect]{transition:height .3s ease-in-out}.vxe-menu--item-wrapper.is--active>.vxe-menu--item-link{font-weight:700}.vxe-menu--item-wrapper.is--exact-active>.vxe-menu--item-link{color:var(--vxe-ui-font-primary-color);background-color:var(--vxe-ui-base-active-background-color)}.vxe-menu--item-wrapper.is--expand>.vxe-menu--item-group{height:auto}

package/lib/scrollbar/src/scrollbar.js

@@ -201,6 +201,39 @@ var _default = exports.default = (0, _comp.defineVxeComponent)({
           viewEl.scrollIntoView();
         }
       },
+      setScrollTop(top) {
+        const viewEl = refViewElem.value;
+        if (viewEl) {
+          viewEl.scrollTop = top;
+        }
+      },
+      setScrollLeft(left) {
+        const viewEl = refViewElem.value;
+        if (viewEl) {
+          viewEl.scrollLeft = left;
+        }
+      },
+      getScrollTop() {
+        const viewEl = refViewElem.value;
+        if (viewEl) {
+          return viewEl.scrollTop;
+        }
+        return 0;
+      },
+      getScrollLeft() {
+        const viewEl = refViewElem.value;
+        if (viewEl) {
+          return viewEl.scrollLeft;
+        }
+        return 0;
+      },
+      clearScroll() {
+        const viewEl = refViewElem.value;
+        if (viewEl) {
+          viewEl.scrollTop = 0;
+          viewEl.scrollLeft = 0;
+        }
+      },
       recalculate() {
         updateThumbSize();
         updateThumbOffset();

package/lib/scrollbar/src/scrollbar.min.js

@@ -1 +1 @@
-Object.defineProperty(exports,"__esModule",{value:!0}),exports.default=void 0;var _vue=require("vue"),_comp=require("../../ui/src/comp"),_xeUtils=_interopRequireDefault(require("xe-utils")),_ui=require("../../ui"),_dom=require("../../ui/src/dom"),_util=require("./util"),_loading=_interopRequireDefault(require("../../loading"));function _interopRequireDefault(e){return e&&e.__esModule?e:{default:e}}let{getConfig,createEvent,domUtils,globalResize,renderEmptyElement}=_ui.VxeUI;function createReactData(){return{yThumbHeight:0,xThumbWidth:0}}function createInternalData(){return{thumbDragOffset:0,yThumbTop:0,xThumbLeft:0,lastScrollTop:0,lastScrollLeft:0}}var _default=exports.default=(0,_comp.defineVxeComponent)({name:"VxeScrollbar",props:{id:[String,Number],width:[String,Number],height:[String,Number],minWidth:[String,Number],minHeight:[String,Number],maxWidth:[String,Number],maxHeight:[String,Number],loading:Boolean,native:{type:Boolean,default:()=>getConfig().scrollbar.native},xConfig:Object,yConfig:Object,className:{type:String,default:()=>getConfig().scrollbar.className},viewAttrs:{type:Object,default:()=>getConfig().scrollbar.viewAttrs},viewClassName:{type:String,default:()=>getConfig().scrollbar.viewClassName},viewInnerClassName:{type:String,default:()=>getConfig().scrollbar.viewInnerClassName},autoResize:{type:Boolean,default:()=>getConfig().scrollbar.autoResize},syncResize:[Boolean,String,Number]},emits:["scroll","scroll-boundary"],setup(h,e){let{emit:i,slots:v}=e;var t=_xeUtils.default.uniqueId();let d=(0,_vue.ref)(),g=(0,_vue.ref)(),m=(0,_vue.ref)(),f=(0,_vue.ref)(),b=(0,_vue.ref)(),p=(0,_vue.ref)(),_=(0,_vue.ref)(),T=(0,_vue.reactive)(createReactData()),x=createInternalData(),C=(0,_vue.computed)(()=>{var{width:e,height:t,minWidth:l,minHeight:i,maxWidth:r,maxHeight:a}=h,o=w.value,u=S.value,n={};return e&&(n.width=(0,_dom.toCssUnit)(e)),t&&(n.height=(0,_dom.toCssUnit)(t)),l&&(n.minWidth=(0,_dom.toCssUnit)(l)),i&&(n.minHeight=(0,_dom.toCssUnit)(i)),r&&(n.maxWidth=(0,_dom.toCssUnit)(r)),a&&(n.maxHeight=(0,_dom.toCssUnit)(a)),u.width&&(n["--vxe-ui-scrollbar-y-width"]=(0,_dom.toCssUnit)(u.width)),o.height&&(n["--vxe-ui-scrollbar-x-height"]=(0,_dom.toCssUnit)(o.height)),n}),y=(0,_vue.computed)(()=>{var{native:e,className:t}=h,{yThumbHeight:l,xThumbWidth:i}=T,r=w.value,a=S.value;return domUtils.buildClass(["vxe-scrollbar","ov-x--"+(r.visible||"visible"),"ov-y--"+(a.visible||"visible"),e?"is--native":"is--virtual",t],{"ov-x--auto-hide":r.autoHide,"ov-y--auto-hide":a.autoHide,"overflow-y":l,"overflow-x":i})}),H=(0,_vue.computed)(()=>{var e=h.viewClassName;return domUtils.buildClass(["vxe-scrollbar--view",e])}),W=(0,_vue.computed)(()=>{var e=h.viewInnerClassName;return domUtils.buildClass(["vxe-scrollbar--view-inner",e])}),w=(0,_vue.computed)(()=>Object.assign({},getConfig().scrollbar.xConfig,h.xConfig)),S=(0,_vue.computed)(()=>Object.assign({},getConfig().scrollbar.yConfig,h.yConfig)),l={refElem:d},r={},D={xID:t,props:h,context:e,reactData:T,internalData:x,getRefMaps:()=>l,getComputeMaps:()=>r},N=(e,t,l)=>{i(e,createEvent(l,{$scrollbar:D},t))};t={dispatchEvent:N,scrollTo(e,t){var l=g.value;l&&(_xeUtils.default.isNumber(e)?l.scrollTo(e,t||0):l.scrollTo(e))},scrollIntoView(){var e=g.value;e&&e.scrollIntoView()},recalculate(){return a(),R(),(0,_vue.nextTick)()}};let a=()=>{var e,t,l=g.value;l&&(t=(t=f.value)?(0,_util.getThumbSize)(l.clientWidth,l.scrollWidth,t.clientWidth):0,(e=p.value)&&(e.style.width=t+"px"),T.xThumbWidth=t,t=(e=b.value)?(0,_util.getThumbSize)(l.clientHeight,l.scrollHeight,e.clientHeight):0,(l=_.value)&&(l.style.height=t+"px"),T.yThumbHeight=t)},R=()=>{var e,t,l,i,r=g.value;r&&({xThumbWidth:t,yThumbHeight:e}=T,i=f.value,l=p.value,i=i&&t?(0,_util.getThumbOffsetSize)(r.scrollLeft,r.clientWidth,r.scrollWidth,i.clientWidth,t):0,x.xThumbLeft=i,l&&t&&(l.style.width=t+"px",l.style.transform=`translateX(${i}px)`),t=b.value,l=_.value,i=t&&e?(0,_util.getThumbOffsetSize)(r.scrollTop,r.clientHeight,r.scrollHeight,t.clientHeight,e):0,x.yThumbTop=i,l)&&e&&(l.style.height=e+"px",l.style.transform=`translateY(${i}px)`)},O=e=>{var{xThumbWidth:t,yThumbHeight:l}=T,{lastScrollTop:i,lastScrollLeft:r}=x,a=w.value,o=S.value,{scrollTop:u,scrollLeft:n,clientWidth:s,clientHeight:c,scrollHeight:h,scrollWidth:v}=e.currentTarget;let d="",g=!1,m=!1,f=!1,b=!1;i!==u&&(o=_xeUtils.default.toNumber(o.threshold)||1,i<u?(d="bottom",0<l&&h-o<=u+c&&(m=!0)):(d="top",0<l&&u<=o&&(g=!0))),r!==n&&(i=_xeUtils.default.toNumber(a.threshold)||1,r<n?(d="right",0<t&&v-i<=n+s&&(b=!0)):(d="left",0<t&&n<=i&&(f=!0))),R(),x.lastScrollTop=u,x.lastScrollLeft=n,(m||g||b||f)&&N("scroll-boundary",{direction:d,isTop:g,isBottom:m,isLeft:f,isRight:b,scrollTop:u,scrollLeft:n,clientWidth:s,clientHeight:c,scrollHeight:h,scrollWidth:v},e),N("scroll",{direction:d,isTop:0<l&&u<=0,isBottom:0<l&&h<=u+c,isLeft:0<t&&n<=0,isRight:0<t&&v<=n+s,scrollTop:u,scrollLeft:n,clientWidth:s,clientHeight:c,scrollHeight:h,scrollWidth:v},e)},U=e=>{var t,l,i,r=e.currentTarget;r===e.target&&(t=g.value)&&(l=T.xThumbWidth,i=r.getBoundingClientRect(),t.scrollTo({left:(0,_util.getScrollFromClick)(e.clientX-i.left,t.clientWidth,t.scrollWidth,r.clientWidth,l),behavior:"auto"}))},z=e=>{var t,l,i,r=e.currentTarget;r===e.target&&(t=g.value)&&(l=T.yThumbHeight,i=r.getBoundingClientRect(),t.scrollTo({top:(0,_util.getScrollFromClick)(e.clientY-i.top,t.clientHeight,t.scrollHeight,r.clientHeight,l),behavior:"auto"}))},I=e=>{var t,l,i=e.currentTarget,r=(x.isThumbDrag=!0,i.setPointerCapture(e.pointerId),g.value);r&&(t=T.xThumbWidth,l=(i=i.parentElement).getBoundingClientRect(),e=e.clientX-l.left,l=(0,_util.getThumbOffsetSize)(r.scrollLeft,r.clientWidth,r.scrollWidth,i.clientWidth,t),x.thumbDragOffset=e-l)},L=t=>{let e=t.currentTarget;if(e.hasPointerCapture(t.pointerId)){var{isThumbDrag:l,thumbDragOffset:i}=x;if(l){l=g.value;if(l){var r=T.xThumbWidth;let e=t.currentTarget;var a=e.parentElement,o=a.getBoundingClientRect();l.scrollLeft=(0,_util.getScrollFromDrag)(t.clientX-o.left,i,l.clientWidth,l.scrollWidth,a.clientWidth,r)}}}},E=e=>{e.currentTarget.releasePointerCapture(e.pointerId),x.isThumbDrag=!1},P=e=>{var t,l,i=e.currentTarget,r=(x.isThumbDrag=!0,i.setPointerCapture(e.pointerId),g.value);r&&(t=T.yThumbHeight,l=(i=i.parentElement).getBoundingClientRect(),e=e.clientY-l.top,l=(0,_util.getThumbOffsetSize)(r.scrollTop,r.clientHeight,r.scrollHeight,i.clientHeight,t),x.thumbDragOffset=e-l)},B=t=>{let e=t.currentTarget;if(e.hasPointerCapture(t.pointerId)){var{isThumbDrag:l,thumbDragOffset:i}=x;if(l){l=g.value;if(l){var r=T.yThumbHeight;let e=t.currentTarget;var a=e.parentElement,o=a.getBoundingClientRect();l.scrollTop=(0,_util.getScrollFromDrag)(t.clientY-o.top,i,l.clientHeight,l.scrollHeight,a.clientHeight,r)}}}};Object.assign(D,t,{});let o=(0,_vue.ref)(0);return(0,_vue.watch)(()=>h.height,()=>{o.value++}),(0,_vue.watch)(()=>h.width,()=>{o.value++}),(0,_vue.watch)(()=>h.minHeight,()=>{o.value++}),(0,_vue.watch)(()=>h.minWidth,()=>{o.value++}),(0,_vue.watch)(()=>h.maxHeight,()=>{o.value++}),(0,_vue.watch)(()=>h.maxWidth,()=>{o.value++}),(0,_vue.watch)(()=>h.native,()=>{o.value++}),(0,_vue.watch)(()=>h.syncResize,()=>{o.value++}),(0,_vue.watch)(o,()=>{D.recalculate().then(()=>{D.recalculate()})}),(0,_vue.onMounted)(()=>{var e=h.autoResize,t=g.value,l=m.value;e&&(e=globalResize.create(()=>{h.autoResize&&o.value++}),t&&e.observe(t),l&&e.observe(l),x.resizeObserver=e),o.value++}),(0,_vue.onBeforeUnmount)(()=>{var e=x.resizeObserver;e&&e.disconnect()}),D.renderVN=()=>{var{id:e,native:t,loading:l,viewAttrs:i}=h,r=C.value,a=y.value,o=H.value,u=W.value,n=w.value,s=S.value,c=v.default;return(0,_vue.h)("div",{ref:d,id:e||null,class:a,style:r},[(0,_vue.h)("div",Object.assign({ref:g,class:o,onScroll:O},i),[(0,_vue.h)("div",{key:"vi",ref:m,class:u},c?c({}):[])]),t||"hidden"===n.visible?renderEmptyElement(D):(0,_vue.h)("div",{ref:f,class:"vxe-scrollbar--track-x",onClick:U},[(0,_vue.h)("div",{ref:p,class:"vxe-scrollbar--thumb-x",onPointerdown:I,onPointermove:L,onPointerup:E,onPointercancel:E,onLostpointercapture:E})]),t||"hidden"===s.visible?renderEmptyElement(D):(0,_vue.h)("div",{ref:b,class:"vxe-scrollbar--track-y",onClick:z},[(0,_vue.h)("div",{ref:_,class:"vxe-scrollbar--thumb-y",onPointerdown:P,onPointermove:B,onPointerup:E,onPointercancel:E,onLostpointercapture:E})]),(0,_vue.h)(_loading.default,{class:"vxe-scrollbar--loading",modelValue:l})])},D},render(){return this.renderVN()}});
+Object.defineProperty(exports,"__esModule",{value:!0}),exports.default=void 0;var _vue=require("vue"),_comp=require("../../ui/src/comp"),_xeUtils=_interopRequireDefault(require("xe-utils")),_ui=require("../../ui"),_dom=require("../../ui/src/dom"),_util=require("./util"),_loading=_interopRequireDefault(require("../../loading"));function _interopRequireDefault(e){return e&&e.__esModule?e:{default:e}}let{getConfig,createEvent,domUtils,globalResize,renderEmptyElement}=_ui.VxeUI;function createReactData(){return{yThumbHeight:0,xThumbWidth:0}}function createInternalData(){return{thumbDragOffset:0,yThumbTop:0,xThumbLeft:0,lastScrollTop:0,lastScrollLeft:0}}var _default=exports.default=(0,_comp.defineVxeComponent)({name:"VxeScrollbar",props:{id:[String,Number],width:[String,Number],height:[String,Number],minWidth:[String,Number],minHeight:[String,Number],maxWidth:[String,Number],maxHeight:[String,Number],loading:Boolean,native:{type:Boolean,default:()=>getConfig().scrollbar.native},xConfig:Object,yConfig:Object,className:{type:String,default:()=>getConfig().scrollbar.className},viewAttrs:{type:Object,default:()=>getConfig().scrollbar.viewAttrs},viewClassName:{type:String,default:()=>getConfig().scrollbar.viewClassName},viewInnerClassName:{type:String,default:()=>getConfig().scrollbar.viewInnerClassName},autoResize:{type:Boolean,default:()=>getConfig().scrollbar.autoResize},syncResize:[Boolean,String,Number]},emits:["scroll","scroll-boundary"],setup(v,e){let{emit:i,slots:h}=e;var t=_xeUtils.default.uniqueId();let g=(0,_vue.ref)(),d=(0,_vue.ref)(),m=(0,_vue.ref)(),f=(0,_vue.ref)(),b=(0,_vue.ref)(),p=(0,_vue.ref)(),_=(0,_vue.ref)(),T=(0,_vue.reactive)(createReactData()),x=createInternalData(),C=(0,_vue.computed)(()=>{var{width:e,height:t,minWidth:l,minHeight:i,maxWidth:r,maxHeight:a}=v,o=w.value,u=S.value,n={};return e&&(n.width=(0,_dom.toCssUnit)(e)),t&&(n.height=(0,_dom.toCssUnit)(t)),l&&(n.minWidth=(0,_dom.toCssUnit)(l)),i&&(n.minHeight=(0,_dom.toCssUnit)(i)),r&&(n.maxWidth=(0,_dom.toCssUnit)(r)),a&&(n.maxHeight=(0,_dom.toCssUnit)(a)),u.width&&(n["--vxe-ui-scrollbar-y-width"]=(0,_dom.toCssUnit)(u.width)),o.height&&(n["--vxe-ui-scrollbar-x-height"]=(0,_dom.toCssUnit)(o.height)),n}),y=(0,_vue.computed)(()=>{var{native:e,className:t}=v,{yThumbHeight:l,xThumbWidth:i}=T,r=w.value,a=S.value;return domUtils.buildClass(["vxe-scrollbar","ov-x--"+(r.visible||"visible"),"ov-y--"+(a.visible||"visible"),e?"is--native":"is--virtual",t],{"ov-x--auto-hide":r.autoHide,"ov-y--auto-hide":a.autoHide,"overflow-y":l,"overflow-x":i})}),H=(0,_vue.computed)(()=>{var e=v.viewClassName;return domUtils.buildClass(["vxe-scrollbar--view",e])}),W=(0,_vue.computed)(()=>{var e=v.viewInnerClassName;return domUtils.buildClass(["vxe-scrollbar--view-inner",e])}),w=(0,_vue.computed)(()=>Object.assign({},getConfig().scrollbar.xConfig,v.xConfig)),S=(0,_vue.computed)(()=>Object.assign({},getConfig().scrollbar.yConfig,v.yConfig)),l={refElem:g},r={},D={xID:t,props:v,context:e,reactData:T,internalData:x,getRefMaps:()=>l,getComputeMaps:()=>r},N=(e,t,l)=>{i(e,createEvent(l,{$scrollbar:D},t))};t={dispatchEvent:N,scrollTo(e,t){var l=d.value;l&&(_xeUtils.default.isNumber(e)?l.scrollTo(e,t||0):l.scrollTo(e))},scrollIntoView(){var e=d.value;e&&e.scrollIntoView()},setScrollTop(e){var t=d.value;t&&(t.scrollTop=e)},setScrollLeft(e){var t=d.value;t&&(t.scrollLeft=e)},getScrollTop(){var e=d.value;return e?e.scrollTop:0},getScrollLeft(){var e=d.value;return e?e.scrollLeft:0},clearScroll(){var e=d.value;e&&(e.scrollTop=0,e.scrollLeft=0)},recalculate(){return a(),R(),(0,_vue.nextTick)()}};let a=()=>{var e,t,l=d.value;l&&(t=(t=f.value)?(0,_util.getThumbSize)(l.clientWidth,l.scrollWidth,t.clientWidth):0,(e=p.value)&&(e.style.width=t+"px"),T.xThumbWidth=t,t=(e=b.value)?(0,_util.getThumbSize)(l.clientHeight,l.scrollHeight,e.clientHeight):0,(l=_.value)&&(l.style.height=t+"px"),T.yThumbHeight=t)},R=()=>{var e,t,l,i,r=d.value;r&&({xThumbWidth:t,yThumbHeight:e}=T,i=f.value,l=p.value,i=i&&t?(0,_util.getThumbOffsetSize)(r.scrollLeft,r.clientWidth,r.scrollWidth,i.clientWidth,t):0,x.xThumbLeft=i,l&&t&&(l.style.width=t+"px",l.style.transform=`translateX(${i}px)`),t=b.value,l=_.value,i=t&&e?(0,_util.getThumbOffsetSize)(r.scrollTop,r.clientHeight,r.scrollHeight,t.clientHeight,e):0,x.yThumbTop=i,l)&&e&&(l.style.height=e+"px",l.style.transform=`translateY(${i}px)`)},L=e=>{var{xThumbWidth:t,yThumbHeight:l}=T,{lastScrollTop:i,lastScrollLeft:r}=x,a=w.value,o=S.value,{scrollTop:u,scrollLeft:n,clientWidth:s,clientHeight:c,scrollHeight:v,scrollWidth:h}=e.currentTarget;let g="",d=!1,m=!1,f=!1,b=!1;i!==u&&(o=_xeUtils.default.toNumber(o.threshold)||1,i<u?(g="bottom",0<l&&v-o<=u+c&&(m=!0)):(g="top",0<l&&u<=o&&(d=!0))),r!==n&&(i=_xeUtils.default.toNumber(a.threshold)||1,r<n?(g="right",0<t&&h-i<=n+s&&(b=!0)):(g="left",0<t&&n<=i&&(f=!0))),R(),x.lastScrollTop=u,x.lastScrollLeft=n,(m||d||b||f)&&N("scroll-boundary",{direction:g,isTop:d,isBottom:m,isLeft:f,isRight:b,scrollTop:u,scrollLeft:n,clientWidth:s,clientHeight:c,scrollHeight:v,scrollWidth:h},e),N("scroll",{direction:g,isTop:0<l&&u<=0,isBottom:0<l&&v<=u+c,isLeft:0<t&&n<=0,isRight:0<t&&h<=n+s,scrollTop:u,scrollLeft:n,clientWidth:s,clientHeight:c,scrollHeight:v,scrollWidth:h},e)},O=e=>{var t,l,i,r=e.currentTarget;r===e.target&&(t=d.value)&&(l=T.xThumbWidth,i=r.getBoundingClientRect(),t.scrollTo({left:(0,_util.getScrollFromClick)(e.clientX-i.left,t.clientWidth,t.scrollWidth,r.clientWidth,l),behavior:"auto"}))},U=e=>{var t,l,i,r=e.currentTarget;r===e.target&&(t=d.value)&&(l=T.yThumbHeight,i=r.getBoundingClientRect(),t.scrollTo({top:(0,_util.getScrollFromClick)(e.clientY-i.top,t.clientHeight,t.scrollHeight,r.clientHeight,l),behavior:"auto"}))},z=e=>{var t,l,i=e.currentTarget,r=(x.isThumbDrag=!0,i.setPointerCapture(e.pointerId),d.value);r&&(t=T.xThumbWidth,l=(i=i.parentElement).getBoundingClientRect(),e=e.clientX-l.left,l=(0,_util.getThumbOffsetSize)(r.scrollLeft,r.clientWidth,r.scrollWidth,i.clientWidth,t),x.thumbDragOffset=e-l)},I=t=>{let e=t.currentTarget;if(e.hasPointerCapture(t.pointerId)){var{isThumbDrag:l,thumbDragOffset:i}=x;if(l){l=d.value;if(l){var r=T.xThumbWidth;let e=t.currentTarget;var a=e.parentElement,o=a.getBoundingClientRect();l.scrollLeft=(0,_util.getScrollFromDrag)(t.clientX-o.left,i,l.clientWidth,l.scrollWidth,a.clientWidth,r)}}}},E=e=>{e.currentTarget.releasePointerCapture(e.pointerId),x.isThumbDrag=!1},P=e=>{var t,l,i=e.currentTarget,r=(x.isThumbDrag=!0,i.setPointerCapture(e.pointerId),d.value);r&&(t=T.yThumbHeight,l=(i=i.parentElement).getBoundingClientRect(),e=e.clientY-l.top,l=(0,_util.getThumbOffsetSize)(r.scrollTop,r.clientHeight,r.scrollHeight,i.clientHeight,t),x.thumbDragOffset=e-l)},B=t=>{let e=t.currentTarget;if(e.hasPointerCapture(t.pointerId)){var{isThumbDrag:l,thumbDragOffset:i}=x;if(l){l=d.value;if(l){var r=T.yThumbHeight;let e=t.currentTarget;var a=e.parentElement,o=a.getBoundingClientRect();l.scrollTop=(0,_util.getScrollFromDrag)(t.clientY-o.top,i,l.clientHeight,l.scrollHeight,a.clientHeight,r)}}}};Object.assign(D,t,{});let o=(0,_vue.ref)(0);return(0,_vue.watch)(()=>v.height,()=>{o.value++}),(0,_vue.watch)(()=>v.width,()=>{o.value++}),(0,_vue.watch)(()=>v.minHeight,()=>{o.value++}),(0,_vue.watch)(()=>v.minWidth,()=>{o.value++}),(0,_vue.watch)(()=>v.maxHeight,()=>{o.value++}),(0,_vue.watch)(()=>v.maxWidth,()=>{o.value++}),(0,_vue.watch)(()=>v.native,()=>{o.value++}),(0,_vue.watch)(()=>v.syncResize,()=>{o.value++}),(0,_vue.watch)(o,()=>{D.recalculate().then(()=>{D.recalculate()})}),(0,_vue.onMounted)(()=>{var e=v.autoResize,t=d.value,l=m.value;e&&(e=globalResize.create(()=>{v.autoResize&&o.value++}),t&&e.observe(t),l&&e.observe(l),x.resizeObserver=e),o.value++}),(0,_vue.onBeforeUnmount)(()=>{var e=x.resizeObserver;e&&e.disconnect()}),D.renderVN=()=>{var{id:e,native:t,loading:l,viewAttrs:i}=v,r=C.value,a=y.value,o=H.value,u=W.value,n=w.value,s=S.value,c=h.default;return(0,_vue.h)("div",{ref:g,id:e||null,class:a,style:r},[(0,_vue.h)("div",Object.assign({ref:d,class:o,onScroll:L},i),[(0,_vue.h)("div",{key:"vi",ref:m,class:u},c?c({}):[])]),t||"hidden"===n.visible?renderEmptyElement(D):(0,_vue.h)("div",{ref:f,class:"vxe-scrollbar--track-x",onClick:O},[(0,_vue.h)("div",{ref:p,class:"vxe-scrollbar--thumb-x",onPointerdown:z,onPointermove:I,onPointerup:E,onPointercancel:E,onLostpointercapture:E})]),t||"hidden"===s.visible?renderEmptyElement(D):(0,_vue.h)("div",{ref:b,class:"vxe-scrollbar--track-y",onClick:U},[(0,_vue.h)("div",{ref:_,class:"vxe-scrollbar--thumb-y",onPointerdown:P,onPointermove:B,onPointerup:E,onPointercancel:E,onLostpointercapture:E})]),(0,_vue.h)(_loading.default,{class:"vxe-scrollbar--loading",modelValue:l})])},D},render(){return this.renderVN()}});