vxe-pc-ui 4.20.8 → 4.20.10

package/lib/scrollbar/src/scrollbar.js

@@ -16,17 +16,10 @@ const {
   getConfig,
   createEvent,
   domUtils,
-  scrollbarUtils,
   globalResize,
   globalEvents,
   renderEmptyElement
 } = _ui.VxeUI;
-const {
-  getThumbOffsetSize,
-  getThumbSize,
-  getScrollFromClick,
-  getScrollFromDrag
-} = scrollbarUtils;
 function createReactData() {
   return {
     yThumbHeight: 0,
@@ -35,7 +28,7 @@ function createReactData() {
 }
 function createInternalData() {
   return {
-    // resizeObserver: undefined,
+    // scrollObserver: undefined,
     // isThumbDrag: false,
     thumbDragOffset: 0,
     yThumbTop: 0,
@@ -98,10 +91,22 @@ var _default = exports.default = (0, _comp.defineVxeComponent)({
       type: String,
       default: () => getConfig().scrollbar.viewInnerClassName
     },
+    size: {
+      type: String,
+      default: () => getConfig().scrollbar.size || getConfig().size
+    },
+    /**
+     * 已废弃
+     * @deprecated
+     */
     autoResize: {
       type: Boolean,
       default: () => getConfig().scrollbar.autoResize
     },
+    /**
+     * 已废弃
+     * @deprecated
+     */
     syncResize: [Boolean, String, Number]
   },
   emits: ['scroll', 'scroll-boundary'],
@@ -114,12 +119,11 @@ var _default = exports.default = (0, _comp.defineVxeComponent)({
     const refElem = (0, _vue.ref)();
     const refViewElem = (0, _vue.ref)();
     const refViewInnerElem = (0, _vue.ref)();
-    const refTrackXElem = (0, _vue.ref)();
-    const refTrackYElem = (0, _vue.ref)();
-    const refThumbXElem = (0, _vue.ref)();
-    const refThumbYElem = (0, _vue.ref)();
     const reactData = (0, _vue.reactive)(createReactData());
     const internalData = createInternalData();
+    const {
+      computeSize
+    } = _ui.useFns.useSize(props);
     const computeWrapperStyle = (0, _vue.computed)(() => {
       const {
         width,
@@ -203,13 +207,14 @@ var _default = exports.default = (0, _comp.defineVxeComponent)({
         yThumbHeight,
         xThumbWidth
       } = reactData;
+      const vSize = computeSize.value;
       const xToTop = computeXToTop.value;
       const yToLeft = computeYToLeft.value;
       const xVisible = computeXVisible.value;
       const yVisible = computeYVisible.value;
       const xAutoHide = computeXAutoHide.value;
       const yAutoHide = computeYAutoHide.value;
-      return domUtils.buildClass(['vxe-scrollbar', theme ? `theme--${theme}` : '', `ov-x--${xVisible === false ? 'hidden' : 'visible'}`, `ov-y--${yVisible === false ? 'hidden' : 'visible'}`, `sx-pos--${xToTop ? 'top' : 'bottom'}`, `sy-pos--${yToLeft ? 'left' : 'right'}`, native ? 'is--native' : 'is--virtual', className], {
+      return domUtils.buildClass(['vxe-scrollbar', vSize ? `size--${vSize}` : '', theme ? `theme--${theme}` : '', `ov-x--${xVisible === false ? 'hidden' : 'visible'}`, `ov-y--${yVisible === false ? 'hidden' : 'visible'}`, `sx-pos--${xToTop ? 'top' : 'bottom'}`, `sy-pos--${yToLeft ? 'left' : 'right'}`, native ? 'is--native' : 'is--virtual', className], {
         'is--padding': padding,
         'ov-x--auto-hide': xAutoHide,
         'ov-y--auto-hide': yAutoHide,
@@ -256,6 +261,21 @@ var _default = exports.default = (0, _comp.defineVxeComponent)({
       getRefMaps: () => refMaps,
       getComputeMaps: () => computeMaps
     };
+    const {
+      refTrackXElem,
+      refTrackYElem,
+      refThumbXElem,
+      refThumbYElem,
+      updateThumbSize,
+      updateThumbOffset,
+      clickTrackXEvent,
+      clickTrackYEvent,
+      pointerdownThumbXEvent,
+      pointermoveThumbXEvent,
+      cleatPointerThumbEvent,
+      pointerdownThumbYEvent,
+      pointermoveThumbYEvent
+    } = _ui.useFns.useInitVScrollbar($xeScrollbar);
     const dispatchEvent = (type, params, evnt) => {
       emit(type, createEvent(evnt, {
         $scrollbar: $xeScrollbar
@@ -263,11 +283,11 @@ var _default = exports.default = (0, _comp.defineVxeComponent)({
     };
     const scrollbarMethods = {
       dispatchEvent,
-      getViewElem() {
+      getScrollViewElem() {
         const viewEl = refViewElem.value;
         return viewEl || null;
       },
-      getViewInnerElem() {
+      getScrollViewInnerElem() {
         const viewInnerEl = refViewInnerElem.value;
         return viewInnerEl || null;
       },
@@ -326,58 +346,6 @@ var _default = exports.default = (0, _comp.defineVxeComponent)({
         return (0, _vue.nextTick)();
       }
     };
-    const updateThumbSize = () => {
-      const viewEl = refViewElem.value;
-      if (!viewEl) {
-        return;
-      }
-      if (!viewEl.clientHeight || !viewEl.clientHeight) {
-        return;
-      }
-      const trackXEl = refTrackXElem.value;
-      const xThumbWidth = trackXEl ? getThumbSize(viewEl.clientWidth, viewEl.scrollWidth, trackXEl.clientWidth) : 0;
-      const thumbXElem = refThumbXElem.value;
-      if (thumbXElem) {
-        thumbXElem.style.width = xThumbWidth + 'px';
-      }
-      reactData.xThumbWidth = xThumbWidth;
-      const trackYEl = refTrackYElem.value;
-      const yThumbHeight = trackYEl ? getThumbSize(viewEl.clientHeight, viewEl.scrollHeight, trackYEl.clientHeight) : 0;
-      const thumbYElem = refThumbYElem.value;
-      if (thumbYElem) {
-        thumbYElem.style.height = yThumbHeight + 'px';
-      }
-      reactData.yThumbHeight = yThumbHeight;
-    };
-    const updateThumbOffset = () => {
-      const viewEl = refViewElem.value;
-      if (!viewEl) {
-        return;
-      }
-      if (!viewEl.clientHeight || !viewEl.clientHeight) {
-        return;
-      }
-      const {
-        xThumbWidth,
-        yThumbHeight
-      } = reactData;
-      const trackXEl = refTrackXElem.value;
-      const thumbXElem = refThumbXElem.value;
-      const xThumbLeft = trackXEl && xThumbWidth ? getThumbOffsetSize(viewEl.scrollLeft, viewEl.clientWidth, viewEl.scrollWidth, trackXEl.clientWidth, xThumbWidth) : 0;
-      internalData.xThumbLeft = xThumbLeft;
-      if (thumbXElem && xThumbWidth) {
-        thumbXElem.style.width = xThumbWidth + 'px';
-        thumbXElem.style.transform = `translateX(${xThumbLeft}px)`;
-      }
-      const trackYEl = refTrackYElem.value;
-      const thumbYElem = refThumbYElem.value;
-      const yThumbTop = trackYEl && yThumbHeight ? getThumbOffsetSize(viewEl.scrollTop, viewEl.clientHeight, viewEl.scrollHeight, trackYEl.clientHeight, yThumbHeight) : 0;
-      internalData.yThumbTop = yThumbTop;
-      if (thumbYElem && yThumbHeight) {
-        thumbYElem.style.height = yThumbHeight + 'px';
-        thumbYElem.style.transform = `translateY(${yThumbTop}px)`;
-      }
-    };
     const scrollEvent = evnt => {
       const {
         xThumbWidth,
@@ -463,131 +431,6 @@ var _default = exports.default = (0, _comp.defineVxeComponent)({
         scrollWidth: scrollWidth
       }, evnt);
     };
-    const clickTrackXEvent = evnt => {
-      const trackEl = evnt.currentTarget;
-      if (trackEl !== evnt.target) {
-        return;
-      }
-      const viewEl = refViewElem.value;
-      if (!viewEl) {
-        return;
-      }
-      const {
-        xThumbWidth
-      } = reactData;
-      const trackRect = trackEl.getBoundingClientRect();
-      viewEl.scrollTo({
-        left: getScrollFromClick(evnt.clientX - trackRect.left, viewEl.clientWidth, viewEl.scrollWidth, trackEl.clientWidth, xThumbWidth),
-        behavior: 'auto'
-      });
-    };
-    const clickTrackYEvent = evnt => {
-      const trackEl = evnt.currentTarget;
-      if (trackEl !== evnt.target) {
-        return;
-      }
-      const viewEl = refViewElem.value;
-      if (!viewEl) {
-        return;
-      }
-      const {
-        yThumbHeight
-      } = reactData;
-      const trackRect = trackEl.getBoundingClientRect();
-      viewEl.scrollTo({
-        top: getScrollFromClick(evnt.clientY - trackRect.top, viewEl.clientHeight, viewEl.scrollHeight, trackEl.clientHeight, yThumbHeight),
-        behavior: 'auto'
-      });
-    };
-    const pointerdownThumbXEvent = evnt => {
-      const thumbEl = evnt.currentTarget;
-      internalData.isThumbDrag = true;
-      thumbEl.setPointerCapture(evnt.pointerId);
-      const viewEl = refViewElem.value;
-      if (!viewEl) {
-        return;
-      }
-      const {
-        xThumbWidth
-      } = reactData;
-      const trackEl = thumbEl.parentElement;
-      const trackRect = trackEl.getBoundingClientRect();
-      const pointerPosition = evnt.clientX - trackRect.left;
-      // 记录 thumb 的偏移
-      const thumbOffset = getThumbOffsetSize(viewEl.scrollLeft, viewEl.clientWidth, viewEl.scrollWidth, trackEl.clientWidth, xThumbWidth);
-      internalData.thumbDragOffset = pointerPosition - thumbOffset;
-    };
-    const pointermoveThumbXEvent = evnt => {
-      const thumbEl = evnt.currentTarget;
-      if (!thumbEl.hasPointerCapture(evnt.pointerId)) {
-        return;
-      }
-      const {
-        isThumbDrag,
-        thumbDragOffset
-      } = internalData;
-      if (isThumbDrag) {
-        const viewEl = refViewElem.value;
-        if (!viewEl) {
-          return;
-        }
-        const {
-          xThumbWidth
-        } = reactData;
-        const thumbEl = evnt.currentTarget;
-        const trackEl = thumbEl.parentElement;
-        const trackRect = trackEl.getBoundingClientRect();
-        // 更新偏移
-        viewEl.scrollLeft = getScrollFromDrag(evnt.clientX - trackRect.left, thumbDragOffset, viewEl.clientWidth, viewEl.scrollWidth, trackEl.clientWidth, xThumbWidth);
-      }
-    };
-    const cleatPointerThumbEvent = evnt => {
-      const thumbEl = evnt.currentTarget;
-      thumbEl.releasePointerCapture(evnt.pointerId);
-      internalData.isThumbDrag = false;
-    };
-    const pointerdownThumbYEvent = evnt => {
-      const thumbEl = evnt.currentTarget;
-      internalData.isThumbDrag = true;
-      thumbEl.setPointerCapture(evnt.pointerId);
-      const viewEl = refViewElem.value;
-      if (!viewEl) {
-        return;
-      }
-      const {
-        yThumbHeight
-      } = reactData;
-      const trackEl = thumbEl.parentElement;
-      const trackRect = trackEl.getBoundingClientRect();
-      const pointerPosition = evnt.clientY - trackRect.top;
-      // 记录 thumb 的偏移
-      const thumbOffset = getThumbOffsetSize(viewEl.scrollTop, viewEl.clientHeight, viewEl.scrollHeight, trackEl.clientHeight, yThumbHeight);
-      internalData.thumbDragOffset = pointerPosition - thumbOffset;
-    };
-    const pointermoveThumbYEvent = evnt => {
-      const thumbEl = evnt.currentTarget;
-      if (!thumbEl.hasPointerCapture(evnt.pointerId)) {
-        return;
-      }
-      const {
-        isThumbDrag,
-        thumbDragOffset
-      } = internalData;
-      if (isThumbDrag) {
-        const viewEl = refViewElem.value;
-        if (!viewEl) {
-          return;
-        }
-        const {
-          yThumbHeight
-        } = reactData;
-        const thumbEl = evnt.currentTarget;
-        const trackEl = thumbEl.parentElement;
-        const trackRect = trackEl.getBoundingClientRect();
-        // 更新偏移
-        viewEl.scrollTop = getScrollFromDrag(evnt.clientY - trackRect.top, thumbDragOffset, viewEl.clientHeight, viewEl.scrollHeight, trackEl.clientHeight, yThumbHeight);
-      }
-    };
     const scrollbarPrivateMethods = {};
     Object.assign($xeScrollbar, scrollbarMethods, scrollbarPrivateMethods);
     const renderVN = () => {
@@ -703,18 +546,18 @@ var _default = exports.default = (0, _comp.defineVxeComponent)({
       const viewEl = refViewElem.value;
       const viewInnerEl = refViewInnerElem.value;
       if (autoResize) {
-        const resizeObserver = globalResize.create(() => {
+        const scrollObserver = globalResize.create(() => {
           if (props.autoResize) {
             reFlag.value++;
           }
         });
         if (viewEl) {
-          resizeObserver.observe(viewEl);
+          scrollObserver.observe(viewEl);
         }
         if (viewInnerEl) {
-          resizeObserver.observe(viewInnerEl);
+          scrollObserver.observe(viewInnerEl);
         }
-        internalData.resizeObserver = resizeObserver;
+        internalData.scrollObserver = scrollObserver;
       }
       reFlag.value++;
       globalEvents.on($xeScrollbar, 'resize', () => {
@@ -723,10 +566,10 @@ var _default = exports.default = (0, _comp.defineVxeComponent)({
     });
     (0, _vue.onBeforeUnmount)(() => {
       const {
-        resizeObserver
+        scrollObserver
       } = internalData;
-      if (resizeObserver) {
-        resizeObserver.disconnect();
+      if (scrollObserver) {
+        scrollObserver.disconnect();
       }
       globalEvents.off($xeScrollbar, 'resize');
     });

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"),_utils=require("../../ui/src/utils"),_loading=_interopRequireDefault(require("../../loading"));function _interopRequireDefault(e){return e&&e.__esModule?e:{default:e}}let{getConfig,createEvent,domUtils,scrollbarUtils,globalResize,globalEvents,renderEmptyElement}=_ui.VxeUI,{getThumbOffsetSize,getThumbSize,getScrollFromClick,getScrollFromDrag}=scrollbarUtils;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],viewId:[String,Number],theme:{type:String,default:()=>getConfig().scrollbar.theme},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},autoHide:{type:Boolean,default:()=>getConfig().scrollbar.autoHide},visible:{type:Boolean,default:()=>getConfig().scrollbar.visible},xConfig:Object,yConfig:Object,className:{type:String,default:()=>getConfig().scrollbar.className},viewAttrs:{type:Object,default:()=>getConfig().scrollbar.viewAttrs},viewStyle:{type:Object,default:()=>getConfig().scrollbar.viewStyle},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(g,e){let{emit:i,slots:d}=e;var t=_xeUtils.default.uniqueId();let m=(0,_vue.ref)(),f=(0,_vue.ref)(),b=(0,_vue.ref)(),p=(0,_vue.ref)(),_=(0,_vue.ref)(),T=(0,_vue.ref)(),x=(0,_vue.ref)(),C=(0,_vue.reactive)(createReactData()),y=createInternalData(),w=(0,_vue.computed)(()=>{var{width:e,height:t,minWidth:l,minHeight:i,maxWidth:r,maxHeight:a}=g,o=c.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)),(o||u)&&(n["--vxe-ui-scrollbar-y-width"]=(0,_dom.toCssUnit)(o||u),n["--vxe-ui-scrollbar-x-height"]=(0,_dom.toCssUnit)(u||o)),n}),s=(0,_vue.computed)(()=>O.value.height),c=(0,_vue.computed)(()=>U.value.width),H=(0,_vue.computed)(()=>{var e=g.visible,t=O.value;return(0,_utils.getDefaultConfig)(t.visible,e)}),S=(0,_vue.computed)(()=>{var e=g.visible,t=U.value;return(0,_utils.getDefaultConfig)(t.visible,e)}),h=(0,_vue.computed)(()=>{var e=g.autoHide,t=O.value;return(0,_utils.getDefaultConfig)(t.autoHide,e)}),W=(0,_vue.computed)(()=>{var e=g.autoHide,t=U.value;return(0,_utils.getDefaultConfig)(t.autoHide,e)}),D=(0,_vue.computed)(()=>{var{native:e,theme:t,className:l,padding:i}=g,{yThumbHeight:r,xThumbWidth:a}=C,o=z.value,u=L.value,n=H.value,s=S.value,c=h.value,v=W.value;return domUtils.buildClass(["vxe-scrollbar",t?"theme--"+t:"","ov-x--"+(!1===n?"hidden":"visible"),"ov-y--"+(!1===s?"hidden":"visible"),"sx-pos--"+(o?"top":"bottom"),"sy-pos--"+(u?"left":"right"),e?"is--native":"is--virtual",l],{"is--padding":i,"ov-x--auto-hide":c,"ov-y--auto-hide":v,"overflow-y":r,"overflow-x":a})}),N=(0,_vue.computed)(()=>{var e=g.viewClassName;return domUtils.buildClass(["vxe-scrollbar--view",e])}),R=(0,_vue.computed)(()=>{var e=g.viewInnerClassName;return domUtils.buildClass(["vxe-scrollbar--view-inner",e])}),O=(0,_vue.computed)(()=>Object.assign({},getConfig().scrollbar.xConfig,g.xConfig)),U=(0,_vue.computed)(()=>Object.assign({},getConfig().scrollbar.yConfig,g.yConfig)),z=(0,_vue.computed)(()=>"top"===O.value.position),L=(0,_vue.computed)(()=>"left"===U.value.position),l={refElem:m},r={},E={xID:t,props:g,context:e,reactData:C,internalData:y,getRefMaps:()=>l,getComputeMaps:()=>r},I=(e,t,l)=>{i(e,createEvent(l,{$scrollbar:E},t))};t={dispatchEvent:I,getViewElem(){return f.value||null},getViewInnerElem(){return b.value||null},scrollTo(e,t){var l=f.value;l&&(_xeUtils.default.isNumber(e)?l.scrollTo(e,t||0):l.scrollTo(e))},scrollIntoView(){var e=f.value;e&&e.scrollIntoView()},setScrollTop(e){var t=f.value;t&&(t.scrollTop=e)},setScrollLeft(e){var t=f.value;t&&(t.scrollLeft=e)},getScrollTop(){var e=f.value;return e?e.scrollTop:0},getScrollLeft(){var e=f.value;return e?e.scrollLeft:0},clearScroll(){var e=f.value;e&&(e.scrollTop=0,e.scrollLeft=0)},recalculate(){return a(),B(),(0,_vue.nextTick)()}};let a=()=>{var e,t,l=f.value;l&&l.clientHeight&&(t=(t=p.value)?getThumbSize(l.clientWidth,l.scrollWidth,t.clientWidth):0,(e=T.value)&&(e.style.width=t+"px"),C.xThumbWidth=t,t=(e=_.value)?getThumbSize(l.clientHeight,l.scrollHeight,e.clientHeight):0,(l=x.value)&&(l.style.height=t+"px"),C.yThumbHeight=t)},B=()=>{var e,t,l,i,r=f.value;r&&r.clientHeight&&({xThumbWidth:t,yThumbHeight:e}=C,i=p.value,l=T.value,i=i&&t?getThumbOffsetSize(r.scrollLeft,r.clientWidth,r.scrollWidth,i.clientWidth,t):0,y.xThumbLeft=i,l&&t&&(l.style.width=t+"px",l.style.transform=`translateX(${i}px)`),t=_.value,l=x.value,i=t&&e?getThumbOffsetSize(r.scrollTop,r.clientHeight,r.scrollHeight,t.clientHeight,e):0,y.yThumbTop=i,l)&&e&&(l.style.height=e+"px",l.style.transform=`translateY(${i}px)`)},k=e=>{var{xThumbWidth:t,yThumbHeight:l}=C,{lastScrollTop:i,lastScrollLeft:r}=y,a=O.value,o=U.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))),B(),y.lastScrollTop=u,y.lastScrollLeft=n,(m||d||b||f)&&I("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),I("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)},q=e=>{var t,l,i,r=e.currentTarget;r===e.target&&(t=f.value)&&(l=C.xThumbWidth,i=r.getBoundingClientRect(),t.scrollTo({left:getScrollFromClick(e.clientX-i.left,t.clientWidth,t.scrollWidth,r.clientWidth,l),behavior:"auto"}))},V=e=>{var t,l,i,r=e.currentTarget;r===e.target&&(t=f.value)&&(l=C.yThumbHeight,i=r.getBoundingClientRect(),t.scrollTo({top:getScrollFromClick(e.clientY-i.top,t.clientHeight,t.scrollHeight,r.clientHeight,l),behavior:"auto"}))},j=e=>{var t,l,i=e.currentTarget,r=(y.isThumbDrag=!0,i.setPointerCapture(e.pointerId),f.value);r&&(t=C.xThumbWidth,l=(i=i.parentElement).getBoundingClientRect(),e=e.clientX-l.left,l=getThumbOffsetSize(r.scrollLeft,r.clientWidth,r.scrollWidth,i.clientWidth,t),y.thumbDragOffset=e-l)},F=t=>{let e=t.currentTarget;if(e.hasPointerCapture(t.pointerId)){var{isThumbDrag:l,thumbDragOffset:i}=y;if(l){l=f.value;if(l){var r=C.xThumbWidth;let e=t.currentTarget;var a=e.parentElement,o=a.getBoundingClientRect();l.scrollLeft=getScrollFromDrag(t.clientX-o.left,i,l.clientWidth,l.scrollWidth,a.clientWidth,r)}}}},P=e=>{e.currentTarget.releasePointerCapture(e.pointerId),y.isThumbDrag=!1},M=e=>{var t,l,i=e.currentTarget,r=(y.isThumbDrag=!0,i.setPointerCapture(e.pointerId),f.value);r&&(t=C.yThumbHeight,l=(i=i.parentElement).getBoundingClientRect(),e=e.clientY-l.top,l=getThumbOffsetSize(r.scrollTop,r.clientHeight,r.scrollHeight,i.clientHeight,t),y.thumbDragOffset=e-l)},X=t=>{let e=t.currentTarget;if(e.hasPointerCapture(t.pointerId)){var{isThumbDrag:l,thumbDragOffset:i}=y;if(l){l=f.value;if(l){var r=C.yThumbHeight;let e=t.currentTarget;var a=e.parentElement,o=a.getBoundingClientRect();l.scrollTop=getScrollFromDrag(t.clientY-o.top,i,l.clientHeight,l.scrollHeight,a.clientHeight,r)}}}};Object.assign(E,t,{});let o=(0,_vue.ref)(0);return(0,_vue.watch)(()=>g.height,()=>{o.value++}),(0,_vue.watch)(()=>g.width,()=>{o.value++}),(0,_vue.watch)(()=>g.minHeight,()=>{o.value++}),(0,_vue.watch)(()=>g.minWidth,()=>{o.value++}),(0,_vue.watch)(()=>g.maxHeight,()=>{o.value++}),(0,_vue.watch)(()=>g.maxWidth,()=>{o.value++}),(0,_vue.watch)(()=>g.native,()=>{o.value++}),(0,_vue.watch)(()=>g.syncResize,()=>{o.value++}),(0,_vue.watch)(c,()=>{o.value++}),(0,_vue.watch)(s,()=>{o.value++}),(0,_vue.watch)(H,()=>{(0,_vue.nextTick)(()=>{o.value++})}),(0,_vue.watch)(S,()=>{(0,_vue.nextTick)(()=>{o.value++})}),(0,_vue.watch)(o,()=>{E.recalculate().then(()=>{E.recalculate()})}),(0,_vue.onMounted)(()=>{var e=g.autoResize,t=f.value,l=b.value;e&&(e=globalResize.create(()=>{g.autoResize&&o.value++}),t&&e.observe(t),l&&e.observe(l),y.resizeObserver=e),o.value++,globalEvents.on(E,"resize",()=>{o.value++})}),(0,_vue.onBeforeUnmount)(()=>{var e=y.resizeObserver;e&&e.disconnect(),globalEvents.off(E,"resize")}),E.renderVN=()=>{var{id:e,native:t,loading:l,viewId:i,viewAttrs:r,viewStyle:a}=g,o=w.value,u=D.value,n=N.value,s=R.value,c=H.value,v=S.value,h=d.default;return(0,_vue.h)("div",{ref:m,id:e||null,class:u,style:o},[(0,_vue.h)("div",Object.assign({ref:f,class:n,onScroll:k,id:i||null,style:a},r),[(0,_vue.h)("div",{key:"vi",ref:b,class:s},h?h({}):[])]),t||!1===c?renderEmptyElement(E):(0,_vue.h)("div",{ref:p,class:"vxe-scrollbar--track-x",onClick:q},[(0,_vue.h)("div",{ref:T,class:"vxe-scrollbar--thumb-x",onPointerdown:j,onPointermove:F,onPointerup:P,onPointercancel:P,onLostpointercapture:P})]),t||!1===v?renderEmptyElement(E):(0,_vue.h)("div",{ref:_,class:"vxe-scrollbar--track-y",onClick:V},[(0,_vue.h)("div",{ref:x,class:"vxe-scrollbar--thumb-y",onPointerdown:M,onPointermove:X,onPointerup:P,onPointercancel:P,onLostpointercapture:P})]),(0,_vue.h)(_loading.default,{class:"vxe-scrollbar--loading",modelValue:l})])},E},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"),_loading=_interopRequireDefault(require("../../loading"));function _interopRequireDefault(e){return e&&e.__esModule?e:{default:e}}let{getConfig,createEvent,domUtils,globalResize,globalEvents,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],viewId:[String,Number],theme:{type:String,default:()=>getConfig().scrollbar.theme},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},autoHide:{type:Boolean,default:()=>getConfig().scrollbar.autoHide},visible:{type:Boolean,default:()=>getConfig().scrollbar.visible},xConfig:Object,yConfig:Object,className:{type:String,default:()=>getConfig().scrollbar.className},viewAttrs:{type:Object,default:()=>getConfig().scrollbar.viewAttrs},viewStyle:{type:Object,default:()=>getConfig().scrollbar.viewStyle},viewClassName:{type:String,default:()=>getConfig().scrollbar.viewClassName},viewInnerClassName:{type:String,default:()=>getConfig().scrollbar.viewInnerClassName},size:{type:String,default:()=>getConfig().scrollbar.size||getConfig().size},autoResize:{type:Boolean,default:()=>getConfig().scrollbar.autoResize},syncResize:[Boolean,String,Number]},emits:["scroll","scroll-boundary"],setup(m,e){let{emit:r,slots:g}=e;var t=_xeUtils.default.uniqueId();let h=(0,_vue.ref)(),f=(0,_vue.ref)(),b=(0,_vue.ref)(),p=(0,_vue.reactive)(createReactData()),_=createInternalData(),x=_ui.useFns.useSize(m).computeSize,C=(0,_vue.computed)(()=>{var{width:e,height:t,minWidth:l,minHeight:r,maxWidth:i,maxHeight:o}=m,a=v.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)),r&&(n.minHeight=(0,_dom.toCssUnit)(r)),i&&(n.maxWidth=(0,_dom.toCssUnit)(i)),o&&(n.maxHeight=(0,_dom.toCssUnit)(o)),(a||u)&&(n["--vxe-ui-scrollbar-y-width"]=(0,_dom.toCssUnit)(a||u),n["--vxe-ui-scrollbar-x-height"]=(0,_dom.toCssUnit)(u||a)),n}),s=(0,_vue.computed)(()=>U.value.height),v=(0,_vue.computed)(()=>z.value.width),w=(0,_vue.computed)(()=>{var e=m.visible,t=U.value;return(0,_utils.getDefaultConfig)(t.visible,e)}),T=(0,_vue.computed)(()=>{var e=m.visible,t=z.value;return(0,_utils.getDefaultConfig)(t.visible,e)}),y=(0,_vue.computed)(()=>{var e=m.autoHide,t=U.value;return(0,_utils.getDefaultConfig)(t.autoHide,e)}),S=(0,_vue.computed)(()=>{var e=m.autoHide,t=z.value;return(0,_utils.getDefaultConfig)(t.autoHide,e)}),E=(0,_vue.computed)(()=>{var{native:e,theme:t,className:l,padding:r}=m,{yThumbHeight:i,xThumbWidth:o}=p,a=x.value,u=W.value,n=L.value,s=w.value,v=T.value,c=y.value,d=S.value;return domUtils.buildClass(["vxe-scrollbar",a?"size--"+a:"",t?"theme--"+t:"","ov-x--"+(!1===s?"hidden":"visible"),"ov-y--"+(!1===v?"hidden":"visible"),"sx-pos--"+(u?"top":"bottom"),"sy-pos--"+(n?"left":"right"),e?"is--native":"is--virtual",l],{"is--padding":r,"ov-x--auto-hide":c,"ov-y--auto-hide":d,"overflow-y":i,"overflow-x":o})}),H=(0,_vue.computed)(()=>{var e=m.viewClassName;return domUtils.buildClass(["vxe-scrollbar--view",e])}),N=(0,_vue.computed)(()=>{var e=m.viewInnerClassName;return domUtils.buildClass(["vxe-scrollbar--view-inner",e])}),U=(0,_vue.computed)(()=>Object.assign({},getConfig().scrollbar.xConfig,m.xConfig)),z=(0,_vue.computed)(()=>Object.assign({},getConfig().scrollbar.yConfig,m.yConfig)),W=(0,_vue.computed)(()=>"top"===U.value.position),L=(0,_vue.computed)(()=>"left"===z.value.position),l={refElem:h},i={},R={xID:t,props:m,context:e,reactData:p,internalData:_,getRefMaps:()=>l,getComputeMaps:()=>i},{refTrackXElem:D,refTrackYElem:k,refThumbXElem:I,refThumbYElem:O,updateThumbSize:a,updateThumbOffset:q,clickTrackXEvent:P,clickTrackYEvent:j,pointerdownThumbXEvent:M,pointermoveThumbXEvent:X,cleatPointerThumbEvent:V,pointerdownThumbYEvent:Y,pointermoveThumbYEvent:A}=_ui.useFns.useInitVScrollbar(R),B=(e,t,l)=>{r(e,createEvent(l,{$scrollbar:R},t))};t={dispatchEvent:B,getScrollViewElem(){return f.value||null},getScrollViewInnerElem(){return b.value||null},scrollTo(e,t){var l=f.value;l&&(_xeUtils.default.isNumber(e)?l.scrollTo(e,t||0):l.scrollTo(e))},scrollIntoView(){var e=f.value;e&&e.scrollIntoView()},setScrollTop(e){var t=f.value;t&&(t.scrollTop=e)},setScrollLeft(e){var t=f.value;t&&(t.scrollLeft=e)},getScrollTop(){var e=f.value;return e?e.scrollTop:0},getScrollLeft(){var e=f.value;return e?e.scrollLeft:0},clearScroll(){var e=f.value;e&&(e.scrollTop=0,e.scrollLeft=0)},recalculate(){return a(),q(),(0,_vue.nextTick)()}};let F=e=>{var{xThumbWidth:t,yThumbHeight:l}=p,{lastScrollTop:r,lastScrollLeft:i}=_,o=U.value,a=z.value,{scrollTop:u,scrollLeft:n,clientWidth:s,clientHeight:v,scrollHeight:c,scrollWidth:d}=e.currentTarget;let m="",g=!1,h=!1,f=!1,b=!1;r!==u&&(a=_xeUtils.default.toNumber(a.threshold)||1,r<u?(m="bottom",0<l&&c-a<=u+v&&(h=!0)):(m="top",0<l&&u<=a&&(g=!0))),i!==n&&(r=_xeUtils.default.toNumber(o.threshold)||1,i<n?(m="right",0<t&&d-r<=n+s&&(b=!0)):(m="left",0<t&&n<=r&&(f=!0))),q(),_.lastScrollTop=u,_.lastScrollLeft=n,(h||g||b||f)&&B("scroll-boundary",{direction:m,isTop:g,isBottom:h,isLeft:f,isRight:b,scrollTop:u,scrollLeft:n,clientWidth:s,clientHeight:v,scrollHeight:c,scrollWidth:d},e),B("scroll",{direction:m,isTop:0<l&&u<=0,isBottom:0<l&&c<=u+v,isLeft:0<t&&n<=0,isRight:0<t&&d<=n+s,scrollTop:u,scrollLeft:n,clientWidth:s,clientHeight:v,scrollHeight:c,scrollWidth:d},e)};Object.assign(R,t,{});let o=(0,_vue.ref)(0);return(0,_vue.watch)(()=>m.height,()=>{o.value++}),(0,_vue.watch)(()=>m.width,()=>{o.value++}),(0,_vue.watch)(()=>m.minHeight,()=>{o.value++}),(0,_vue.watch)(()=>m.minWidth,()=>{o.value++}),(0,_vue.watch)(()=>m.maxHeight,()=>{o.value++}),(0,_vue.watch)(()=>m.maxWidth,()=>{o.value++}),(0,_vue.watch)(()=>m.native,()=>{o.value++}),(0,_vue.watch)(()=>m.syncResize,()=>{o.value++}),(0,_vue.watch)(v,()=>{o.value++}),(0,_vue.watch)(s,()=>{o.value++}),(0,_vue.watch)(w,()=>{(0,_vue.nextTick)(()=>{o.value++})}),(0,_vue.watch)(T,()=>{(0,_vue.nextTick)(()=>{o.value++})}),(0,_vue.watch)(o,()=>{R.recalculate().then(()=>{R.recalculate()})}),(0,_vue.onMounted)(()=>{var e=m.autoResize,t=f.value,l=b.value;e&&(e=globalResize.create(()=>{m.autoResize&&o.value++}),t&&e.observe(t),l&&e.observe(l),_.scrollObserver=e),o.value++,globalEvents.on(R,"resize",()=>{o.value++})}),(0,_vue.onBeforeUnmount)(()=>{var e=_.scrollObserver;e&&e.disconnect(),globalEvents.off(R,"resize")}),R.renderVN=()=>{var{id:e,native:t,loading:l,viewId:r,viewAttrs:i,viewStyle:o}=m,a=C.value,u=E.value,n=H.value,s=N.value,v=w.value,c=T.value,d=g.default;return(0,_vue.h)("div",{ref:h,id:e||null,class:u,style:a},[(0,_vue.h)("div",Object.assign({ref:f,class:n,onScroll:F,id:r||null,style:o},i),[(0,_vue.h)("div",{key:"vi",ref:b,class:s},d?d({}):[])]),t||!1===v?renderEmptyElement(R):(0,_vue.h)("div",{ref:D,class:"vxe-scrollbar--track-x",onClick:P},[(0,_vue.h)("div",{ref:I,class:"vxe-scrollbar--thumb-x",onPointerdown:M,onPointermove:X,onPointerup:V,onPointercancel:V,onLostpointercapture:V})]),t||!1===c?renderEmptyElement(R):(0,_vue.h)("div",{ref:k,class:"vxe-scrollbar--track-y",onClick:j},[(0,_vue.h)("div",{ref:O,class:"vxe-scrollbar--thumb-y",onPointerdown:Y,onPointermove:A,onPointerup:V,onPointercancel:V,onLostpointercapture:V})]),(0,_vue.h)(_loading.default,{class:"vxe-scrollbar--loading",modelValue:l})])},R},render(){return this.renderVN()}});