vxe-pc-ui 4.18.22 → 4.18.23

package/lib/scrollbar/src/scrollbar.js

@@ -441,7 +441,8 @@ var _default = exports.default = (0, _comp.defineVxeComponent)({
     const renderVN = () => {
       const {
         native,
-        loading
+        loading,
+        autoResize
       } = props;
       const wrapperStyle = computeWrapperStyle.value;
       const wrapperClss = computeWrapperClss.value;
@@ -457,10 +458,11 @@ var _default = exports.default = (0, _comp.defineVxeComponent)({
         ref: refViewElem,
         class: viewClss,
         onScroll: scrollEvent
-      }, [(0, _vue.h)('div', {
+      }, autoResize ? [(0, _vue.h)('div', {
+        key: 'vi',
         ref: refViewInnerElem,
         class: 'vxe-scrollbar--view-inner'
-      }, defaultSlot ? defaultSlot({}) : [])]), native || xOpts.visible === 'hidden' ? renderEmptyElement($xeScrollbar) : (0, _vue.h)('div', {
+      }, defaultSlot ? defaultSlot({}) : [])] : defaultSlot ? defaultSlot({}) : []), native || xOpts.visible === 'hidden' ? renderEmptyElement($xeScrollbar) : (0, _vue.h)('div', {
         ref: refTrackXElem,
         class: 'vxe-scrollbar--track-x',
         onClick: clickTrackXEvent
@@ -490,6 +492,24 @@ var _default = exports.default = (0, _comp.defineVxeComponent)({
       })]);
     };
     const reFlag = (0, _vue.ref)(0);
+    (0, _vue.watch)(() => props.height, () => {
+      reFlag.value++;
+    });
+    (0, _vue.watch)(() => props.width, () => {
+      reFlag.value++;
+    });
+    (0, _vue.watch)(() => props.minHeight, () => {
+      reFlag.value++;
+    });
+    (0, _vue.watch)(() => props.minWidth, () => {
+      reFlag.value++;
+    });
+    (0, _vue.watch)(() => props.maxHeight, () => {
+      reFlag.value++;
+    });
+    (0, _vue.watch)(() => props.maxWidth, () => {
+      reFlag.value++;
+    });
     (0, _vue.watch)(() => props.native, () => {
       reFlag.value++;
     });
@@ -505,19 +525,23 @@ var _default = exports.default = (0, _comp.defineVxeComponent)({
       const {
         autoResize
       } = props;
+      const viewEl = refViewElem.value;
       const viewInnerEl = refViewInnerElem.value;
-      if (autoResize && viewInnerEl) {
+      if (autoResize) {
         const resizeObserver = globalResize.create(() => {
           if (props.autoResize) {
             reFlag.value++;
           }
         });
-        resizeObserver.observe(viewInnerEl);
+        if (viewEl) {
+          resizeObserver.observe(viewEl);
+        }
+        if (viewInnerEl) {
+          resizeObserver.observe(viewInnerEl);
+        }
         internalData.resizeObserver = resizeObserver;
       }
-      (0, _vue.nextTick)(() => {
-        $xeScrollbar.recalculate();
-      });
+      reFlag.value++;
     });
     (0, _vue.onBeforeUnmount)(() => {
       const {

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

package/lib/scrollbar/style/style.css

@@ -16,14 +16,14 @@
 }
 .vxe-scrollbar.is--virtual.ov-x--auto-hide > .vxe-scrollbar--track-x {
   opacity: 0;
-  transition: opacity 0.3s ease-in-out;
+  transition: opacity 0.8s ease-in-out;
 }
 .vxe-scrollbar.is--virtual.ov-y--auto-hide:hover > .vxe-scrollbar--track-y {
   opacity: 1;
 }
 .vxe-scrollbar.is--virtual.ov-y--auto-hide > .vxe-scrollbar--track-y {
   opacity: 0;
-  transition: opacity 0.3s ease-in-out;
+  transition: opacity 0.8s ease-in-out;
 }
 .vxe-scrollbar.is--native > .vxe-scrollbar--view {
   overflow-x: auto;

package/lib/scrollbar/style/style.min.css

@@ -1 +1 @@
-.vxe-scrollbar{width:100%;position:relative}.vxe-scrollbar.is--virtual>.vxe-scrollbar--view{scrollbar-width:none;-ms-overflow-style:none;overflow-x:auto;overflow-y:auto}.vxe-scrollbar.is--virtual>.vxe-scrollbar--view::-webkit-scrollbar{display:none}.vxe-scrollbar.is--virtual.ov-x--auto-hide:hover>.vxe-scrollbar--track-x{opacity:1}.vxe-scrollbar.is--virtual.ov-x--auto-hide>.vxe-scrollbar--track-x{opacity:0;transition:opacity .3s ease-in-out}.vxe-scrollbar.is--virtual.ov-y--auto-hide:hover>.vxe-scrollbar--track-y{opacity:1}.vxe-scrollbar.is--virtual.ov-y--auto-hide>.vxe-scrollbar--track-y{opacity:0;transition:opacity .3s ease-in-out}.vxe-scrollbar.is--native>.vxe-scrollbar--view{overflow-x:auto;overflow-y:auto}.vxe-scrollbar.is--native.ov-x--hidden>.vxe-scrollbar--view{overflow-x:hidden}.vxe-scrollbar.is--native.ov-y--hidden>.vxe-scrollbar--view{overflow-y:hidden}.vxe-scrollbar.is--native>.vxe-scrollbar--view::-webkit-scrollbar{width:var(--vxe-ui-scrollbar-y-width);height:var(--vxe-ui-scrollbar-x-height)}.vxe-scrollbar.is--native>.vxe-scrollbar--view::-webkit-scrollbar-thumb{border-radius:var(--vxe-ui-base-border-radius);background-color:var(--vxe-ui-scrollbar-thumb-background-color)}.vxe-scrollbar.is--native>.vxe-scrollbar--view::-webkit-scrollbar-thumb:hover{background-color:var(--vxe-ui-scrollbar-thumb-hover-background-color)}.vxe-scrollbar.is--native>.vxe-scrollbar--view::-webkit-scrollbar-thumb:active{background-color:var(--vxe-ui-scrollbar-thumb-active-background-color)}.vxe-scrollbar--view{height:100%;width:100%}.vxe-scrollbar--track-x,.vxe-scrollbar--track-y{position:absolute;background-color:var(--vxe-ui-scrollbar-track-background-color);-webkit-user-select:none;-moz-user-select:none;user-select:none}.vxe-scrollbar--track-x{width:100%;bottom:0;left:0;height:var(--vxe-ui-scrollbar-x-height)}.vxe-scrollbar--track-y{height:100%;right:0;top:0;width:var(--vxe-ui-scrollbar-y-width)}.vxe-scrollbar--thumb-y{width:100%}.vxe-scrollbar--thumb-x{height:100%}.vxe-scrollbar--thumb-x,.vxe-scrollbar--thumb-y{border-radius:var(--vxe-ui-base-border-radius);background-color:var(--vxe-ui-scrollbar-thumb-background-color)}.vxe-scrollbar--thumb-x:hover,.vxe-scrollbar--thumb-y:hover{background-color:var(--vxe-ui-scrollbar-thumb-hover-background-color)}.vxe-scrollbar--thumb-x:active,.vxe-scrollbar--thumb-y:active{background-color:var(--vxe-ui-scrollbar-thumb-active-background-color)}
+.vxe-scrollbar{width:100%;position:relative}.vxe-scrollbar.is--virtual>.vxe-scrollbar--view{scrollbar-width:none;-ms-overflow-style:none;overflow-x:auto;overflow-y:auto}.vxe-scrollbar.is--virtual>.vxe-scrollbar--view::-webkit-scrollbar{display:none}.vxe-scrollbar.is--virtual.ov-x--auto-hide:hover>.vxe-scrollbar--track-x{opacity:1}.vxe-scrollbar.is--virtual.ov-x--auto-hide>.vxe-scrollbar--track-x{opacity:0;transition:opacity .8s ease-in-out}.vxe-scrollbar.is--virtual.ov-y--auto-hide:hover>.vxe-scrollbar--track-y{opacity:1}.vxe-scrollbar.is--virtual.ov-y--auto-hide>.vxe-scrollbar--track-y{opacity:0;transition:opacity .8s ease-in-out}.vxe-scrollbar.is--native>.vxe-scrollbar--view{overflow-x:auto;overflow-y:auto}.vxe-scrollbar.is--native.ov-x--hidden>.vxe-scrollbar--view{overflow-x:hidden}.vxe-scrollbar.is--native.ov-y--hidden>.vxe-scrollbar--view{overflow-y:hidden}.vxe-scrollbar.is--native>.vxe-scrollbar--view::-webkit-scrollbar{width:var(--vxe-ui-scrollbar-y-width);height:var(--vxe-ui-scrollbar-x-height)}.vxe-scrollbar.is--native>.vxe-scrollbar--view::-webkit-scrollbar-thumb{border-radius:var(--vxe-ui-base-border-radius);background-color:var(--vxe-ui-scrollbar-thumb-background-color)}.vxe-scrollbar.is--native>.vxe-scrollbar--view::-webkit-scrollbar-thumb:hover{background-color:var(--vxe-ui-scrollbar-thumb-hover-background-color)}.vxe-scrollbar.is--native>.vxe-scrollbar--view::-webkit-scrollbar-thumb:active{background-color:var(--vxe-ui-scrollbar-thumb-active-background-color)}.vxe-scrollbar--view{height:100%;width:100%}.vxe-scrollbar--track-x,.vxe-scrollbar--track-y{position:absolute;background-color:var(--vxe-ui-scrollbar-track-background-color);-webkit-user-select:none;-moz-user-select:none;user-select:none}.vxe-scrollbar--track-x{width:100%;bottom:0;left:0;height:var(--vxe-ui-scrollbar-x-height)}.vxe-scrollbar--track-y{height:100%;right:0;top:0;width:var(--vxe-ui-scrollbar-y-width)}.vxe-scrollbar--thumb-y{width:100%}.vxe-scrollbar--thumb-x{height:100%}.vxe-scrollbar--thumb-x,.vxe-scrollbar--thumb-y{border-radius:var(--vxe-ui-base-border-radius);background-color:var(--vxe-ui-scrollbar-thumb-background-color)}.vxe-scrollbar--thumb-x:hover,.vxe-scrollbar--thumb-y:hover{background-color:var(--vxe-ui-scrollbar-thumb-hover-background-color)}.vxe-scrollbar--thumb-x:active,.vxe-scrollbar--thumb-y:active{background-color:var(--vxe-ui-scrollbar-thumb-active-background-color)}