vxe-pc-ui 4.19.4 → 4.19.5

package/lib/scrollbar/src/scrollbar.js

@@ -51,6 +51,10 @@ var _default = exports.default = (0, _comp.defineVxeComponent)({
       type: Boolean,
       default: () => getConfig().scrollbar.native
     },
+    padding: {
+      type: Boolean,
+      default: () => getConfig().scrollbar.padding
+    },
     xConfig: Object,
     yConfig: Object,
     className: {
@@ -132,7 +136,8 @@ var _default = exports.default = (0, _comp.defineVxeComponent)({
     const computeWrapperClss = (0, _vue.computed)(() => {
       const {
         native,
-        className
+        className,
+        padding
       } = props;
       const {
         yThumbHeight,
@@ -140,7 +145,10 @@ var _default = exports.default = (0, _comp.defineVxeComponent)({
       } = reactData;
       const xOpts = computeXOpts.value;
       const yOpts = computeYOpts.value;
-      return domUtils.buildClass(['vxe-scrollbar', `ov-x--${xOpts.visible || 'visible'}`, `ov-y--${yOpts.visible || 'visible'}`, native ? 'is--native' : 'is--virtual', className], {
+      const xToTop = computeXToTop.value;
+      const yToLeft = computeYToLeft.value;
+      return domUtils.buildClass(['vxe-scrollbar', `ov-x--${xOpts.visible || 'visible'}`, `ov-y--${yOpts.visible || 'visible'}`, `sx-pos--${xToTop ? 'top' : 'bottom'}`, `sy-pos--${yToLeft ? 'left' : 'right'}`, native ? 'is--native' : 'is--virtual', className], {
+        'is--padding': padding,
         'ov-x--auto-hide': xOpts.autoHide,
         'ov-y--auto-hide': yOpts.autoHide,
         'overflow-y': yThumbHeight,
@@ -165,6 +173,14 @@ var _default = exports.default = (0, _comp.defineVxeComponent)({
     const computeYOpts = (0, _vue.computed)(() => {
       return Object.assign({}, getConfig().scrollbar.yConfig, props.yConfig);
     });
+    const computeXToTop = (0, _vue.computed)(() => {
+      const xOpts = computeXOpts.value;
+      return xOpts.position === 'top';
+    });
+    const computeYToLeft = (0, _vue.computed)(() => {
+      const yOpts = computeYOpts.value;
+      return yOpts.position === 'left';
+    });
     const refMaps = {
       refElem
     };

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(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()}});
+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},padding:{type:Boolean,default:()=>getConfig().scrollbar.padding},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 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}=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,padding:l}=v,{yThumbHeight:i,xThumbWidth:r}=T,a=w.value,o=S.value,u=s.value,n=c.value;return domUtils.buildClass(["vxe-scrollbar","ov-x--"+(a.visible||"visible"),"ov-y--"+(o.visible||"visible"),"sx-pos--"+(u?"top":"bottom"),"sy-pos--"+(n?"left":"right"),e?"is--native":"is--virtual",t],{"is--padding":l,"ov-x--auto-hide":a.autoHide,"ov-y--auto-hide":o.autoHide,"overflow-y":i,"overflow-x":r})}),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)),s=(0,_vue.computed)(()=>"top"===w.value.position),c=(0,_vue.computed)(()=>"left"===S.value.position),l={refElem:d},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=g.value;l&&(_xeUtils.default.isNumber(e)?l.scrollTo(e,t||0):l.scrollTo(e))},scrollIntoView(){var e=g.value;e&&e.scrollIntoView()},setScrollTop(e){var t=g.value;t&&(t.scrollTop=e)},setScrollLeft(e){var t=g.value;t&&(t.scrollLeft=e)},getScrollTop(){var e=g.value;return e?e.scrollTop:0},getScrollLeft(){var e=g.value;return e?e.scrollLeft:0},clearScroll(){var e=g.value;e&&(e.scrollTop=0,e.scrollLeft=0)},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)`)},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 d="",g=!1,m=!1,f=!1,b=!1;i!==u&&(o=_xeUtils.default.toNumber(o.threshold)||1,i<u?(d="bottom",0<l&&v-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&&h-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:v,scrollWidth:h},e),N("scroll",{direction:d,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=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"}))},U=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"}))},z=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)},I=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)}}}},B=e=>{e.currentTarget.releasePointerCapture(e.pointerId),x.isThumbDrag=!1},E=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)},P=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)(()=>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=g.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:d,id:e||null,class:a,style:r},[(0,_vue.h)("div",Object.assign({ref:g,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:B,onPointercancel:B,onLostpointercapture:B})]),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:E,onPointermove:P,onPointerup:B,onPointercancel:B,onLostpointercapture:B})]),(0,_vue.h)(_loading.default,{class:"vxe-scrollbar--loading",modelValue:l})])},D},render(){return this.renderVN()}});

package/lib/scrollbar/style/style.css

@@ -61,13 +61,15 @@
           user-select: none;
 }
 
-.vxe-scrollbar.overflow-y > .vxe-scrollbar--track-x, .vxe-scrollbar.overflow-y > .vxe-scrollbar--track-y {
+.vxe-scrollbar.overflow-x > .vxe-scrollbar--track-x {
+  display: block;
+}
+.vxe-scrollbar.overflow-y > .vxe-scrollbar--track-y {
   display: block;
 }
 
 .vxe-scrollbar--track-x {
   width: 100%;
-  bottom: 0;
   left: 0;
   height: var(--vxe-ui-scrollbar-x-height);
   padding: var(--vxe-ui-scrollbar-track-padding) 0;
@@ -75,12 +77,49 @@
 
 .vxe-scrollbar--track-y {
   height: 100%;
-  right: 0;
   top: 0;
   width: var(--vxe-ui-scrollbar-y-width);
   padding: 0 var(--vxe-ui-scrollbar-track-padding);
 }
 
+.vxe-scrollbar.sx-pos--top > .vxe-scrollbar--track-x {
+  top: 0;
+}
+.vxe-scrollbar.sx-pos--bottom > .vxe-scrollbar--track-x {
+  bottom: 0;
+}
+.vxe-scrollbar.sy-pos--left > .vxe-scrollbar--track-y {
+  left: 0;
+}
+.vxe-scrollbar.sy-pos--right > .vxe-scrollbar--track-y {
+  right: 0;
+}
+.vxe-scrollbar.overflow-x.overflow-y > .vxe-scrollbar--track-x {
+  width: calc(100% - var(--vxe-ui-scrollbar-x-height));
+}
+.vxe-scrollbar.overflow-x.overflow-y > .vxe-scrollbar--track-y {
+  height: calc(100% - var(--vxe-ui-scrollbar-y-width));
+}
+.vxe-scrollbar.overflow-x.overflow-y.sx-pos--top.sy-pos--left > .vxe-scrollbar--track-y, .vxe-scrollbar.overflow-x.overflow-y.sx-pos--top.sy-pos--right > .vxe-scrollbar--track-y {
+  top: var(--vxe-ui-scrollbar-x-height);
+}
+.vxe-scrollbar.overflow-x.overflow-y.sy-pos--left.sx-pos--top > .vxe-scrollbar--track-x, .vxe-scrollbar.overflow-x.overflow-y.sy-pos--left.sx-pos--bottom > .vxe-scrollbar--track-x {
+  left: var(--vxe-ui-scrollbar-y-width);
+}
+
+.vxe-scrollbar.is--padding.sx-pos--top {
+  padding-top: var(--vxe-ui-scrollbar-x-height);
+}
+.vxe-scrollbar.is--padding.sx-pos--bottom {
+  padding-bottom: var(--vxe-ui-scrollbar-x-height);
+}
+.vxe-scrollbar.is--padding.sy-pos--left {
+  padding-left: var(--vxe-ui-scrollbar-y-width);
+}
+.vxe-scrollbar.is--padding.sy-pos--right {
+  padding-right: var(--vxe-ui-scrollbar-y-width);
+}
+
 .vxe-scrollbar--thumb-y {
   width: 100%;
 }

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}.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::-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.ov-x--hidden>.vxe-scrollbar--view{overflow-x:hidden}.vxe-scrollbar.ov-y--hidden>.vxe-scrollbar--view{overflow-y:hidden}.vxe-scrollbar--view{height:100%;width:100%;overflow-x:auto;overflow-y:auto}.vxe-scrollbar--track-x,.vxe-scrollbar--track-y{display:none;position:absolute;background-color:var(--vxe-ui-scrollbar-track-background-color);-webkit-user-select:none;-moz-user-select:none;user-select:none}.vxe-scrollbar.overflow-y>.vxe-scrollbar--track-x,.vxe-scrollbar.overflow-y>.vxe-scrollbar--track-y{display:block}.vxe-scrollbar--track-x{width:100%;bottom:0;left:0;height:var(--vxe-ui-scrollbar-x-height);padding:var(--vxe-ui-scrollbar-track-padding) 0}.vxe-scrollbar--track-y{height:100%;right:0;top:0;width:var(--vxe-ui-scrollbar-y-width);padding:0 var(--vxe-ui-scrollbar-track-padding)}.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-scrollbar-thumb-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}.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::-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.ov-x--hidden>.vxe-scrollbar--view{overflow-x:hidden}.vxe-scrollbar.ov-y--hidden>.vxe-scrollbar--view{overflow-y:hidden}.vxe-scrollbar--view{height:100%;width:100%;overflow-x:auto;overflow-y:auto}.vxe-scrollbar--track-x,.vxe-scrollbar--track-y{display:none;position:absolute;background-color:var(--vxe-ui-scrollbar-track-background-color);-webkit-user-select:none;-moz-user-select:none;user-select:none}.vxe-scrollbar.overflow-x>.vxe-scrollbar--track-x{display:block}.vxe-scrollbar.overflow-y>.vxe-scrollbar--track-y{display:block}.vxe-scrollbar--track-x{width:100%;left:0;height:var(--vxe-ui-scrollbar-x-height);padding:var(--vxe-ui-scrollbar-track-padding) 0}.vxe-scrollbar--track-y{height:100%;top:0;width:var(--vxe-ui-scrollbar-y-width);padding:0 var(--vxe-ui-scrollbar-track-padding)}.vxe-scrollbar.sx-pos--top>.vxe-scrollbar--track-x{top:0}.vxe-scrollbar.sx-pos--bottom>.vxe-scrollbar--track-x{bottom:0}.vxe-scrollbar.sy-pos--left>.vxe-scrollbar--track-y{left:0}.vxe-scrollbar.sy-pos--right>.vxe-scrollbar--track-y{right:0}.vxe-scrollbar.overflow-x.overflow-y>.vxe-scrollbar--track-x{width:calc(100% - var(--vxe-ui-scrollbar-x-height))}.vxe-scrollbar.overflow-x.overflow-y>.vxe-scrollbar--track-y{height:calc(100% - var(--vxe-ui-scrollbar-y-width))}.vxe-scrollbar.overflow-x.overflow-y.sx-pos--top.sy-pos--left>.vxe-scrollbar--track-y,.vxe-scrollbar.overflow-x.overflow-y.sx-pos--top.sy-pos--right>.vxe-scrollbar--track-y{top:var(--vxe-ui-scrollbar-x-height)}.vxe-scrollbar.overflow-x.overflow-y.sy-pos--left.sx-pos--bottom>.vxe-scrollbar--track-x,.vxe-scrollbar.overflow-x.overflow-y.sy-pos--left.sx-pos--top>.vxe-scrollbar--track-x{left:var(--vxe-ui-scrollbar-y-width)}.vxe-scrollbar.is--padding.sx-pos--top{padding-top:var(--vxe-ui-scrollbar-x-height)}.vxe-scrollbar.is--padding.sx-pos--bottom{padding-bottom:var(--vxe-ui-scrollbar-x-height)}.vxe-scrollbar.is--padding.sy-pos--left{padding-left:var(--vxe-ui-scrollbar-y-width)}.vxe-scrollbar.is--padding.sy-pos--right{padding-right: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-scrollbar-thumb-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)}