vxe-pc-ui 3.20.9 → 3.20.11

package/lib/scrollbar/src/scrollbar.js

@@ -14,14 +14,9 @@ function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e
 var getConfig = _ui.VxeUI.getConfig,
   createEvent = _ui.VxeUI.createEvent,
   domUtils = _ui.VxeUI.domUtils,
-  scrollbarUtils = _ui.VxeUI.scrollbarUtils,
   globalResize = _ui.VxeUI.globalResize,
   globalEvents = _ui.VxeUI.globalEvents,
   renderEmptyElement = _ui.VxeUI.renderEmptyElement;
-var getThumbOffsetSize = scrollbarUtils.getThumbOffsetSize,
-  getThumbSize = scrollbarUtils.getThumbSize,
-  getScrollFromClick = scrollbarUtils.getScrollFromClick,
-  getScrollFromDrag = scrollbarUtils.getScrollFromDrag;
 function createReactData() {
   return {
     yThumbHeight: 0,
@@ -30,7 +25,7 @@ function createReactData() {
 }
 function createInternalData() {
   return {
-    // resizeObserver: undefined,
+    // scrollObserver: undefined,
     // isThumbDrag: false,
     thumbDragOffset: 0,
     yThumbTop: 0,
@@ -41,6 +36,7 @@ function createInternalData() {
 }
 var _default2 = exports.default = /* define-vxe-component start */(0, _comp.defineVxeComponent)({
   name: 'VxeScrollbar',
+  mixins: [_ui.globalMixins.sizeMixin, _ui.globalMixins.initVScrollbarMixin],
   props: {
     id: [String, Number],
     viewId: [String, Number],
@@ -113,6 +109,12 @@ var _default2 = exports.default = /* define-vxe-component start */(0, _comp.defi
         return getConfig().scrollbar.viewInnerClassName;
       }
     },
+    size: {
+      type: String,
+      default: function _default() {
+        return getConfig().scrollbar.size || getConfig().size;
+      }
+    },
     /**
      * 已废弃
      * @deprecated
@@ -138,7 +140,7 @@ var _default2 = exports.default = /* define-vxe-component start */(0, _comp.defi
       reFlag: 0
     });
   },
-  computed: {
+  computed: Object.assign(Object.assign({}, {}), {
     computeWrapperStyle: function computeWrapperStyle() {
       var $xeScrollbar = this;
       var props = $xeScrollbar;
@@ -223,13 +225,14 @@ var _default2 = exports.default = /* define-vxe-component start */(0, _comp.defi
         padding = props.padding;
       var yThumbHeight = reactData.yThumbHeight,
         xThumbWidth = reactData.xThumbWidth;
+      var vSize = $xeScrollbar.computeSize;
       var xToTop = $xeScrollbar.computeXToTop;
       var yToLeft = $xeScrollbar.computeYToLeft;
       var xVisible = $xeScrollbar.computeXVisible;
       var yVisible = $xeScrollbar.computeYVisible;
       var xAutoHide = $xeScrollbar.computeXAutoHide;
       var yAutoHide = $xeScrollbar.computeYAutoHide;
-      return domUtils.buildClass(['vxe-scrollbar', theme ? "theme--".concat(theme) : '', "ov-x--".concat(xVisible === false ? 'hidden' : 'visible'), "ov-y--".concat(yVisible === false ? 'hidden' : 'visible'), "sx-pos--".concat(xToTop ? 'top' : 'bottom'), "sy-pos--".concat(yToLeft ? 'left' : 'right'), native ? 'is--native' : 'is--virtual', className], {
+      return domUtils.buildClass(['vxe-scrollbar', vSize ? "size--".concat(vSize) : '', theme ? "theme--".concat(theme) : '', "ov-x--".concat(xVisible === false ? 'hidden' : 'visible'), "ov-y--".concat(yVisible === false ? 'hidden' : 'visible'), "sx-pos--".concat(xToTop ? 'top' : 'bottom'), "sy-pos--".concat(yToLeft ? 'left' : 'right'), native ? 'is--native' : 'is--virtual', className], {
         'is--padding': padding,
         'ov-x--auto-hide': xAutoHide,
         'ov-y--auto-hide': yAutoHide,
@@ -269,7 +272,7 @@ var _default2 = exports.default = /* define-vxe-component start */(0, _comp.defi
       var yOpts = $xeScrollbar.computeYOpts;
       return yOpts.position === 'left';
     }
-  },
+  }),
   methods: {
     //
     // Method
@@ -280,12 +283,12 @@ var _default2 = exports.default = /* define-vxe-component start */(0, _comp.defi
         $scrollbar: $xeScrollbar
       }, params));
     },
-    getViewElem: function getViewElem() {
+    getScrollViewElem: function getScrollViewElem() {
       var $xeScrollbar = this;
       var viewEl = $xeScrollbar.$refs.refViewElem;
       return viewEl || null;
     },
-    getViewInnerElem: function getViewInnerElem() {
+    getScrollViewInnerElem: function getScrollViewInnerElem() {
       var $xeScrollbar = this;
       var viewInnerEl = $xeScrollbar.$refs.refViewInnerElem;
       return viewInnerEl || null;
@@ -352,61 +355,6 @@ var _default2 = exports.default = /* define-vxe-component start */(0, _comp.defi
       $xeScrollbar.updateThumbOffset();
       return $xeScrollbar.$nextTick();
     },
-    updateThumbSize: function updateThumbSize() {
-      var $xeScrollbar = this;
-      var reactData = $xeScrollbar.reactData;
-      var viewEl = $xeScrollbar.$refs.refViewElem;
-      if (!viewEl) {
-        return;
-      }
-      if (!viewEl.clientHeight || !viewEl.clientHeight) {
-        return;
-      }
-      var trackXEl = $xeScrollbar.$refs.refTrackXElem;
-      var xThumbWidth = trackXEl ? getThumbSize(viewEl.clientWidth, viewEl.scrollWidth, trackXEl.clientWidth) : 0;
-      var thumbXElem = $xeScrollbar.$refs.refThumbXElem;
-      if (thumbXElem) {
-        thumbXElem.style.width = xThumbWidth + 'px';
-      }
-      reactData.xThumbWidth = xThumbWidth;
-      var trackYEl = $xeScrollbar.$refs.refTrackYElem;
-      var yThumbHeight = trackYEl ? getThumbSize(viewEl.clientHeight, viewEl.scrollHeight, trackYEl.clientHeight) : 0;
-      var thumbYElem = $xeScrollbar.$refs.refThumbYElem;
-      if (thumbYElem) {
-        thumbYElem.style.height = yThumbHeight + 'px';
-      }
-      reactData.yThumbHeight = yThumbHeight;
-    },
-    updateThumbOffset: function updateThumbOffset() {
-      var $xeScrollbar = this;
-      var reactData = $xeScrollbar.reactData;
-      var internalData = $xeScrollbar.internalData;
-      var viewEl = $xeScrollbar.$refs.refViewElem;
-      if (!viewEl) {
-        return;
-        if (!viewEl.clientHeight || !viewEl.clientHeight) {
-          return;
-        }
-      }
-      var xThumbWidth = reactData.xThumbWidth,
-        yThumbHeight = reactData.yThumbHeight;
-      var trackXEl = $xeScrollbar.$refs.refTrackXElem;
-      var thumbXElem = $xeScrollbar.$refs.refThumbXElem;
-      var 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(".concat(xThumbLeft, "px)");
-      }
-      var trackYEl = $xeScrollbar.$refs.refTrackYElem;
-      var thumbYElem = $xeScrollbar.$refs.refThumbYElem;
-      var 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(".concat(yThumbTop, "px)");
-      }
-    },
     scrollEvent: function scrollEvent(evnt) {
       var $xeScrollbar = this;
       var reactData = $xeScrollbar.reactData;
@@ -489,125 +437,6 @@ var _default2 = exports.default = /* define-vxe-component start */(0, _comp.defi
         scrollWidth: scrollWidth
       }, evnt);
     },
-    clickTrackXEvent: function clickTrackXEvent(evnt) {
-      var $xeScrollbar = this;
-      var reactData = $xeScrollbar.reactData;
-      var trackEl = evnt.currentTarget;
-      if (trackEl !== evnt.target) {
-        return;
-      }
-      var viewEl = $xeScrollbar.$refs.refViewElem;
-      if (!viewEl) {
-        return;
-      }
-      var xThumbWidth = reactData.xThumbWidth;
-      var trackRect = trackEl.getBoundingClientRect();
-      viewEl.scrollTo({
-        left: getScrollFromClick(evnt.clientX - trackRect.left, viewEl.clientWidth, viewEl.scrollWidth, trackEl.clientWidth, xThumbWidth),
-        behavior: 'auto'
-      });
-    },
-    clickTrackYEvent: function clickTrackYEvent(evnt) {
-      var $xeScrollbar = this;
-      var reactData = $xeScrollbar.reactData;
-      var trackEl = evnt.currentTarget;
-      if (trackEl !== evnt.target) {
-        return;
-      }
-      var viewEl = $xeScrollbar.$refs.refViewElem;
-      if (!viewEl) {
-        return;
-      }
-      var yThumbHeight = reactData.yThumbHeight;
-      var trackRect = trackEl.getBoundingClientRect();
-      viewEl.scrollTo({
-        top: getScrollFromClick(evnt.clientY - trackRect.top, viewEl.clientHeight, viewEl.scrollHeight, trackEl.clientHeight, yThumbHeight),
-        behavior: 'auto'
-      });
-    },
-    pointerdownThumbXEvent: function pointerdownThumbXEvent(evnt) {
-      var $xeScrollbar = this;
-      var reactData = $xeScrollbar.reactData;
-      var internalData = $xeScrollbar.internalData;
-      var thumbEl = evnt.currentTarget;
-      internalData.isThumbDrag = true;
-      thumbEl.setPointerCapture(evnt.pointerId);
-      var viewEl = $xeScrollbar.$refs.refViewElem;
-      if (!viewEl) {
-        return;
-      }
-      var xThumbWidth = reactData.xThumbWidth;
-      var trackEl = thumbEl.parentElement;
-      var trackRect = trackEl.getBoundingClientRect();
-      var pointerPosition = evnt.clientX - trackRect.left;
-      // 记录 thumb 的偏移
-      var thumbOffset = getThumbOffsetSize(viewEl.scrollLeft, viewEl.clientWidth, viewEl.scrollWidth, trackEl.clientWidth, xThumbWidth);
-      internalData.thumbDragOffset = pointerPosition - thumbOffset;
-    },
-    pointermoveThumbXEvent: function pointermoveThumbXEvent(evnt) {
-      var $xeScrollbar = this;
-      var reactData = $xeScrollbar.reactData;
-      var internalData = $xeScrollbar.internalData;
-      var isThumbDrag = internalData.isThumbDrag,
-        thumbDragOffset = internalData.thumbDragOffset;
-      if (isThumbDrag) {
-        var viewEl = $xeScrollbar.$refs.refViewElem;
-        if (!viewEl) {
-          return;
-        }
-        var xThumbWidth = reactData.xThumbWidth;
-        var thumbEl = evnt.currentTarget;
-        var trackEl = thumbEl.parentElement;
-        var trackRect = trackEl.getBoundingClientRect();
-        // 更新偏移
-        viewEl.scrollLeft = getScrollFromDrag(evnt.clientX - trackRect.left, thumbDragOffset, viewEl.clientWidth, viewEl.scrollWidth, trackEl.clientWidth, xThumbWidth);
-      }
-    },
-    cleatPointerThumbEvent: function cleatPointerThumbEvent(evnt) {
-      var $xeScrollbar = this;
-      var internalData = $xeScrollbar.internalData;
-      var thumbEl = evnt.currentTarget;
-      thumbEl.releasePointerCapture(evnt.pointerId);
-      internalData.isThumbDrag = false;
-    },
-    pointerdownThumbYEvent: function pointerdownThumbYEvent(evnt) {
-      var $xeScrollbar = this;
-      var reactData = $xeScrollbar.reactData;
-      var internalData = $xeScrollbar.internalData;
-      var thumbEl = evnt.currentTarget;
-      internalData.isThumbDrag = true;
-      thumbEl.setPointerCapture(evnt.pointerId);
-      var viewEl = $xeScrollbar.$refs.refViewElem;
-      if (!viewEl) {
-        return;
-      }
-      var yThumbHeight = reactData.yThumbHeight;
-      var trackEl = thumbEl.parentElement;
-      var trackRect = trackEl.getBoundingClientRect();
-      var pointerPosition = evnt.clientY - trackRect.top;
-      // 记录 thumb 的偏移
-      var thumbOffset = getThumbOffsetSize(viewEl.scrollTop, viewEl.clientHeight, viewEl.scrollHeight, trackEl.clientHeight, yThumbHeight);
-      internalData.thumbDragOffset = pointerPosition - thumbOffset;
-    },
-    pointermoveThumbYEvent: function pointermoveThumbYEvent(evnt) {
-      var $xeScrollbar = this;
-      var reactData = $xeScrollbar.reactData;
-      var internalData = $xeScrollbar.internalData;
-      var isThumbDrag = internalData.isThumbDrag,
-        thumbDragOffset = internalData.thumbDragOffset;
-      if (isThumbDrag) {
-        var viewEl = $xeScrollbar.$refs.refViewElem;
-        if (!viewEl) {
-          return;
-        }
-        var yThumbHeight = reactData.yThumbHeight;
-        var thumbEl = evnt.currentTarget;
-        var trackEl = thumbEl.parentElement;
-        var trackRect = trackEl.getBoundingClientRect();
-        // 更新偏移
-        viewEl.scrollTop = getScrollFromDrag(evnt.clientY - trackRect.top, thumbDragOffset, viewEl.clientHeight, viewEl.scrollHeight, trackEl.clientHeight, yThumbHeight);
-      }
-    },
     //
     // Render
     //
@@ -761,18 +590,18 @@ var _default2 = exports.default = /* define-vxe-component start */(0, _comp.defi
     var viewEl = $xeScrollbar.$refs.refViewElem;
     var viewInnerEl = $xeScrollbar.$refs.refViewInnerElem;
     if (autoResize) {
-      var resizeObserver = globalResize.create(function () {
+      var scrollObserver = globalResize.create(function () {
         if (props.autoResize) {
           $xeScrollbar.reFlag++;
         }
       });
       if (viewEl) {
-        resizeObserver.observe(viewEl);
+        scrollObserver.observe(viewEl);
       }
       if (viewInnerEl) {
-        resizeObserver.observe(viewInnerEl);
+        scrollObserver.observe(viewInnerEl);
       }
-      internalData.resizeObserver = resizeObserver;
+      internalData.scrollObserver = scrollObserver;
     }
     $xeScrollbar.reFlag++;
     globalEvents.on($xeScrollbar, 'resize', function () {
@@ -782,9 +611,9 @@ var _default2 = exports.default = /* define-vxe-component start */(0, _comp.defi
   beforeDestroy: function beforeDestroy() {
     var $xeScrollbar = this;
     var internalData = $xeScrollbar.internalData;
-    var resizeObserver = internalData.resizeObserver;
-    if (resizeObserver) {
-      resizeObserver.disconnect();
+    var scrollObserver = internalData.scrollObserver;
+    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 _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}}var getConfig=_ui.VxeUI.getConfig,createEvent=_ui.VxeUI.createEvent,domUtils=_ui.VxeUI.domUtils,scrollbarUtils=_ui.VxeUI.scrollbarUtils,globalResize=_ui.VxeUI.globalResize,globalEvents=_ui.VxeUI.globalEvents,renderEmptyElement=_ui.VxeUI.renderEmptyElement,getThumbOffsetSize=scrollbarUtils.getThumbOffsetSize,getThumbSize=scrollbarUtils.getThumbSize,getScrollFromClick=scrollbarUtils.getScrollFromClick,getScrollFromDrag=scrollbarUtils.getScrollFromDrag;function createReactData(){return{yThumbHeight:0,xThumbWidth:0}}function createInternalData(){return{thumbDragOffset:0,yThumbTop:0,xThumbLeft:0,lastScrollTop:0,lastScrollLeft:0}}var _default2=exports.default=(0,_comp.defineVxeComponent)({name:"VxeScrollbar",props:{id:[String,Number],viewId:[String,Number],theme:{type:String,default:function(){return 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:function(){return getConfig().scrollbar.native}},padding:{type:Boolean,default:function(){return getConfig().scrollbar.padding}},autoHide:{type:Boolean,default:function(){return getConfig().scrollbar.autoHide}},visible:{type:Boolean,default:function(){return getConfig().scrollbar.visible}},xConfig:Object,yConfig:Object,className:{type:String,default:function(){return getConfig().scrollbar.className}},viewAttrs:{type:Object,default:function(){return getConfig().scrollbar.viewAttrs}},viewStyle:{type:Object,default:function(){return getConfig().scrollbar.viewStyle}},viewClassName:{type:String,default:function(){return getConfig().scrollbar.viewClassName}},viewInnerClassName:{type:String,default:function(){return getConfig().scrollbar.viewInnerClassName}},autoResize:{type:Boolean,default:function(){return getConfig().scrollbar.autoResize}},syncResize:[Boolean,String,Number]},data:function(){var e=_xeUtils.default.uniqueId(),t=createReactData();return Object.assign(Object.assign({},{}),{xID:e,reactData:t,reFlag:0})},computed:{computeWrapperStyle:function(){var e=this,t=e.width,i=e.height,r=e.minWidth,n=e.minHeight,l=e.maxWidth,o=e.maxHeight,s=e.computeYWidth,e=e.computeXHeight,a={};return t&&(a.width=(0,_dom.toCssUnit)(t)),i&&(a.height=(0,_dom.toCssUnit)(i)),r&&(a.minWidth=(0,_dom.toCssUnit)(r)),n&&(a.minHeight=(0,_dom.toCssUnit)(n)),l&&(a.maxWidth=(0,_dom.toCssUnit)(l)),o&&(a.maxHeight=(0,_dom.toCssUnit)(o)),(s||e)&&(a["--vxe-ui-scrollbar-y-width"]=(0,_dom.toCssUnit)(s||e),a["--vxe-ui-scrollbar-x-height"]=(0,_dom.toCssUnit)(e||s)),a},computeXHeight:function(){return this.computeXOpts.height},computeYWidth:function(){return this.computeYOpts.width},computeXVisible:function(){var e=this.visible,t=this.computeXOpts;return(0,_utils.getDefaultConfig)(t.visible,e)},computeYVisible:function(){var e=this.visible,t=this.computeYOpts;return(0,_utils.getDefaultConfig)(t.visible,e)},computeXAutoHide:function(){var e=this.autoHide,t=this.computeXOpts;return(0,_utils.getDefaultConfig)(t.autoHide,e)},computeYAutoHide:function(){var e=this.autoHide,t=this.computeYOpts;return(0,_utils.getDefaultConfig)(t.autoHide,e)},computeWrapperClss:function(){var e=this,t=e.reactData,i=e.native,r=e.theme,n=e.className,l=e.padding,o=t.yThumbHeight,t=t.xThumbWidth,s=e.computeXToTop,a=e.computeYToLeft,c=e.computeXVisible,u=e.computeYVisible,h=e.computeXAutoHide,e=e.computeYAutoHide;return domUtils.buildClass(["vxe-scrollbar",r?"theme--".concat(r):"","ov-x--".concat(!1===c?"hidden":"visible"),"ov-y--".concat(!1===u?"hidden":"visible"),"sx-pos--".concat(s?"top":"bottom"),"sy-pos--".concat(a?"left":"right"),i?"is--native":"is--virtual",n],{"is--padding":l,"ov-x--auto-hide":h,"ov-y--auto-hide":e,"overflow-y":o,"overflow-x":t})},computeViewClss:function(){var e=this.viewClassName;return domUtils.buildClass(["vxe-scrollbar--view",e])},computeViewInnerClss:function(){var e=this.viewInnerClassName;return domUtils.buildClass(["vxe-scrollbar--view-inner",e])},computeXOpts:function(){return Object.assign({},getConfig().scrollbar.xConfig,this.xConfig)},computeYOpts:function(){return Object.assign({},getConfig().scrollbar.yConfig,this.yConfig)},computeXToTop:function(){return"top"===this.computeXOpts.position},computeYToLeft:function(){return"left"===this.computeYOpts.position}},methods:{dispatchEvent:function(e,t,i){this.$emit(e,createEvent(i,{$scrollbar:this},t))},getViewElem:function(){return this.$refs.refViewElem||null},getViewInnerElem:function(){return this.$refs.refViewInnerElem||null},scrollTo:function(e,t){var i=this.$refs.refViewElem;i&&(_xeUtils.default.isNumber(e)?i.scrollTo(e,t||0):i.scrollTo(e))},scrollIntoView:function(){var e=this.$refs.refViewElem;e&&e.scrollIntoView()},setScrollTop:function(e){var t=this.$refs.refViewElem;t&&(t.scrollTop=e)},setScrollLeft:function(e){var t=this.$refs.refViewElem;t&&(t.scrollLeft=e)},getScrollTop:function(){var e=this.$refs.refViewElem;return e?e.scrollTop:0},getScrollLeft:function(){var e=this.$refs.refViewElem;return e?e.scrollLeft:0},clearScroll:function(){var e=this.$refs.refViewElem;e&&(e.scrollTop=0,e.scrollLeft=0)},recalculate:function(){return this.updateThumbSize(),this.updateThumbOffset(),this.$nextTick()},updateThumbSize:function(){var e,t,i=this,r=i.reactData,n=i.$refs.refViewElem;n&&n.clientHeight&&(t=(t=i.$refs.refTrackXElem)?getThumbSize(n.clientWidth,n.scrollWidth,t.clientWidth):0,(e=i.$refs.refThumbXElem)&&(e.style.width=t+"px"),r.xThumbWidth=t,t=(e=i.$refs.refTrackYElem)?getThumbSize(n.clientHeight,n.scrollHeight,e.clientHeight):0,(n=i.$refs.refThumbYElem)&&(n.style.height=t+"px"),r.yThumbHeight=t)},updateThumbOffset:function(){var e,t,i,r=this,n=r.reactData,l=r.internalData,o=r.$refs.refViewElem;o&&(e=n.xThumbWidth,n=n.yThumbHeight,i=r.$refs.refTrackXElem,t=r.$refs.refThumbXElem,i=i&&e?getThumbOffsetSize(o.scrollLeft,o.clientWidth,o.scrollWidth,i.clientWidth,e):0,l.xThumbLeft=i,t&&e&&(t.style.width=e+"px",t.style.transform="translateX(".concat(i,"px)")),e=r.$refs.refTrackYElem,t=r.$refs.refThumbYElem,i=e&&n?getThumbOffsetSize(o.scrollTop,o.clientHeight,o.scrollHeight,e.clientHeight,n):0,l.yThumbTop=i,t)&&n&&(t.style.height=n+"px",t.style.transform="translateY(".concat(i,"px)"))},scrollEvent:function(e){var t,i=this,r=i.reactData,n=i.internalData,l=r.xThumbWidth,r=r.yThumbHeight,o=n.lastScrollTop,s=n.lastScrollLeft,a=i.computeXOpts,c=e.currentTarget,u=c.scrollTop,h=c.scrollLeft,f=c.clientWidth,m=c.clientHeight,g=c.scrollHeight,c=c.scrollWidth,d="",p=!1,b=!1,v=!1,T=!1;o!==u&&(t=_xeUtils.default.toNumber(i.computeYOpts.threshold)||1,o<u?(d="bottom",0<r&&g-t<=u+m&&(b=!0)):(d="top",0<r&&u<=t&&(p=!0))),s!==h&&(o=_xeUtils.default.toNumber(a.threshold)||1,s<h?(d="right",0<l&&c-o<=h+f&&(T=!0)):(d="left",0<l&&h<=o&&(v=!0))),i.updateThumbOffset(),n.lastScrollTop=u,n.lastScrollLeft=h,(b||p||T||v)&&i.dispatchEvent("scroll-boundary",{direction:d,isTop:p,isBottom:b,isLeft:v,isRight:T,scrollTop:u,scrollLeft:h,clientWidth:f,clientHeight:m,scrollHeight:g,scrollWidth:c},e),i.dispatchEvent("scroll",{direction:d,isTop:0<r&&u<=0,isBottom:0<r&&g<=u+m,isLeft:0<l&&h<=0,isRight:0<l&&c<=h+f,scrollTop:u,scrollLeft:h,clientWidth:f,clientHeight:m,scrollHeight:g,scrollWidth:c},e)},clickTrackXEvent:function(e){var t,i,r=this.reactData,n=e.currentTarget;n===e.target&&(t=this.$refs.refViewElem)&&(r=r.xThumbWidth,i=n.getBoundingClientRect(),t.scrollTo({left:getScrollFromClick(e.clientX-i.left,t.clientWidth,t.scrollWidth,n.clientWidth,r),behavior:"auto"}))},clickTrackYEvent:function(e){var t,i,r=this.reactData,n=e.currentTarget;n===e.target&&(t=this.$refs.refViewElem)&&(r=r.yThumbHeight,i=n.getBoundingClientRect(),t.scrollTo({top:getScrollFromClick(e.clientY-i.top,t.clientHeight,t.scrollHeight,n.clientHeight,r),behavior:"auto"}))},pointerdownThumbXEvent:function(e){var t,i=this.reactData,r=this.internalData,n=e.currentTarget,l=(r.isThumbDrag=!0,n.setPointerCapture(e.pointerId),this.$refs.refViewElem);l&&(i=i.xThumbWidth,t=(n=n.parentElement).getBoundingClientRect(),e=e.clientX-t.left,t=getThumbOffsetSize(l.scrollLeft,l.clientWidth,l.scrollWidth,n.clientWidth,i),r.thumbDragOffset=e-t)},pointermoveThumbXEvent:function(e){var t,i,r=this.reactData,n=this.internalData,l=n.isThumbDrag,n=n.thumbDragOffset;l&&(l=this.$refs.refViewElem)&&(r=r.xThumbWidth,i=(t=e.currentTarget.parentElement).getBoundingClientRect(),l.scrollLeft=getScrollFromDrag(e.clientX-i.left,n,l.clientWidth,l.scrollWidth,t.clientWidth,r))},cleatPointerThumbEvent:function(e){var t=this.internalData;e.currentTarget.releasePointerCapture(e.pointerId),t.isThumbDrag=!1},pointerdownThumbYEvent:function(e){var t,i=this.reactData,r=this.internalData,n=e.currentTarget,l=(r.isThumbDrag=!0,n.setPointerCapture(e.pointerId),this.$refs.refViewElem);l&&(i=i.yThumbHeight,t=(n=n.parentElement).getBoundingClientRect(),e=e.clientY-t.top,t=getThumbOffsetSize(l.scrollTop,l.clientHeight,l.scrollHeight,n.clientHeight,i),r.thumbDragOffset=e-t)},pointermoveThumbYEvent:function(e){var t,i,r=this.reactData,n=this.internalData,l=n.isThumbDrag,n=n.thumbDragOffset;l&&(l=this.$refs.refViewElem)&&(r=r.yThumbHeight,i=(t=e.currentTarget.parentElement).getBoundingClientRect(),l.scrollTop=getScrollFromDrag(e.clientY-i.top,n,l.clientHeight,l.scrollHeight,t.clientHeight,r))},renderVN:function(e){var t=this,i=t.$scopedSlots,r=t.id,n=t.native,l=t.loading,o=t.computeViewInnerClss,s=t.computeXVisible,a=t.computeYVisible,i=i.default;return e("div",{ref:"refElem",attrs:{id:r||null},class:t.computeWrapperClss,style:t.computeWrapperStyle},[e("div",{ref:"refViewElem",class:t.computeViewClss,style:t.viewStyle,attrs:Object.assign({id:t.viewId||null},t.viewAttrs),on:{scroll:t.scrollEvent}},[e("div",{key:"vi",ref:"refViewInnerElem",class:o},i?i({}):[])]),n||!1===s?renderEmptyElement(t):e("div",{ref:"refTrackXElem",class:"vxe-scrollbar--track-x",on:{click:t.clickTrackXEvent}},[e("div",{ref:"refThumbXElem",class:"vxe-scrollbar--thumb-x",on:{pointerdown:t.pointerdownThumbXEvent,pointermove:t.pointermoveThumbXEvent,pointerup:t.cleatPointerThumbEvent,pointercancel:t.cleatPointerThumbEvent,lostpointercapture:t.cleatPointerThumbEvent}})]),n||!1===a?renderEmptyElement(t):e("div",{ref:"refTrackYElem",class:"vxe-scrollbar--track-y",on:{click:t.clickTrackYEvent}},[e("div",{ref:"refThumbYElem",class:"vxe-scrollbar--thumb-y",on:{pointerdown:t.pointerdownThumbYEvent,pointermove:t.pointermoveThumbYEvent,pointerup:t.cleatPointerThumbEvent,pointercancel:t.cleatPointerThumbEvent,lostpointercapture:t.cleatPointerThumbEvent}})]),e(_loading.default,{class:"vxe-scrollbar--loading",props:{value:l}})])}},watch:{height:function(){this.reFlag++},width:function(){this.reFlag++},minHeight:function(){this.reFlag++},minWidth:function(){this.reFlag++},maxHeight:function(){this.reFlag++},maxWidth:function(){this.reFlag++},native:function(){this.reFlag++},syncResize:function(){this.reFlag++},computeYWidth:function(){this.reFlag++},computeXHeight:function(){this.reFlag++},computeXVisible:function(){var e=this;e.$nextTick(function(){e.reFlag++})},computeYVisible:function(){var e=this;e.$nextTick(function(){e.reFlag++})},reFlag:function(){var e=this;e.recalculate().then(function(){e.recalculate()})}},created:function(){this.internalData=createInternalData()},mounted:function(){var e=this,t=e,i=e.internalData,r=t.autoResize,n=e.$refs.refViewElem,l=e.$refs.refViewInnerElem;r&&(r=globalResize.create(function(){t.autoResize&&e.reFlag++}),n&&r.observe(n),l&&r.observe(l),i.resizeObserver=r),e.reFlag++,globalEvents.on(e,"resize",function(){e.reFlag++})},beforeDestroy:function(){var e=this.internalData.resizeObserver;e&&e.disconnect(),globalEvents.off(this,"resize")},destroyed:function(){var e=this.reactData,t=this.internalData;_xeUtils.default.assign(e,createReactData()),_xeUtils.default.assign(t,createInternalData())},render:function(e){return this.renderVN(e)}});
+Object.defineProperty(exports,"__esModule",{value:!0}),exports.default=void 0;var _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}}var getConfig=_ui.VxeUI.getConfig,createEvent=_ui.VxeUI.createEvent,domUtils=_ui.VxeUI.domUtils,globalResize=_ui.VxeUI.globalResize,globalEvents=_ui.VxeUI.globalEvents,renderEmptyElement=_ui.VxeUI.renderEmptyElement;function createReactData(){return{yThumbHeight:0,xThumbWidth:0}}function createInternalData(){return{thumbDragOffset:0,yThumbTop:0,xThumbLeft:0,lastScrollTop:0,lastScrollLeft:0}}var _default2=exports.default=(0,_comp.defineVxeComponent)({name:"VxeScrollbar",mixins:[_ui.globalMixins.sizeMixin,_ui.globalMixins.initVScrollbarMixin],props:{id:[String,Number],viewId:[String,Number],theme:{type:String,default:function(){return 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:function(){return getConfig().scrollbar.native}},padding:{type:Boolean,default:function(){return getConfig().scrollbar.padding}},autoHide:{type:Boolean,default:function(){return getConfig().scrollbar.autoHide}},visible:{type:Boolean,default:function(){return getConfig().scrollbar.visible}},xConfig:Object,yConfig:Object,className:{type:String,default:function(){return getConfig().scrollbar.className}},viewAttrs:{type:Object,default:function(){return getConfig().scrollbar.viewAttrs}},viewStyle:{type:Object,default:function(){return getConfig().scrollbar.viewStyle}},viewClassName:{type:String,default:function(){return getConfig().scrollbar.viewClassName}},viewInnerClassName:{type:String,default:function(){return getConfig().scrollbar.viewInnerClassName}},size:{type:String,default:function(){return getConfig().scrollbar.size||getConfig().size}},autoResize:{type:Boolean,default:function(){return getConfig().scrollbar.autoResize}},syncResize:[Boolean,String,Number]},data:function(){var e=_xeUtils.default.uniqueId(),t=createReactData();return Object.assign(Object.assign({},{}),{xID:e,reactData:t,reFlag:0})},computed:Object.assign(Object.assign({},{}),{computeWrapperStyle:function(){var e=this,t=e.width,i=e.height,r=e.minWidth,n=e.minHeight,o=e.maxWidth,l=e.maxHeight,s=e.computeYWidth,e=e.computeXHeight,a={};return t&&(a.width=(0,_dom.toCssUnit)(t)),i&&(a.height=(0,_dom.toCssUnit)(i)),r&&(a.minWidth=(0,_dom.toCssUnit)(r)),n&&(a.minHeight=(0,_dom.toCssUnit)(n)),o&&(a.maxWidth=(0,_dom.toCssUnit)(o)),l&&(a.maxHeight=(0,_dom.toCssUnit)(l)),(s||e)&&(a["--vxe-ui-scrollbar-y-width"]=(0,_dom.toCssUnit)(s||e),a["--vxe-ui-scrollbar-x-height"]=(0,_dom.toCssUnit)(e||s)),a},computeXHeight:function(){return this.computeXOpts.height},computeYWidth:function(){return this.computeYOpts.width},computeXVisible:function(){var e=this.visible,t=this.computeXOpts;return(0,_utils.getDefaultConfig)(t.visible,e)},computeYVisible:function(){var e=this.visible,t=this.computeYOpts;return(0,_utils.getDefaultConfig)(t.visible,e)},computeXAutoHide:function(){var e=this.autoHide,t=this.computeXOpts;return(0,_utils.getDefaultConfig)(t.autoHide,e)},computeYAutoHide:function(){var e=this.autoHide,t=this.computeYOpts;return(0,_utils.getDefaultConfig)(t.autoHide,e)},computeWrapperClss:function(){var e=this,t=e.reactData,i=e.native,r=e.theme,n=e.className,o=e.padding,l=t.yThumbHeight,t=t.xThumbWidth,s=e.computeSize,a=e.computeXToTop,c=e.computeYToLeft,u=e.computeXVisible,f=e.computeYVisible,m=e.computeXAutoHide,e=e.computeYAutoHide;return domUtils.buildClass(["vxe-scrollbar",s?"size--".concat(s):"",r?"theme--".concat(r):"","ov-x--".concat(!1===u?"hidden":"visible"),"ov-y--".concat(!1===f?"hidden":"visible"),"sx-pos--".concat(a?"top":"bottom"),"sy-pos--".concat(c?"left":"right"),i?"is--native":"is--virtual",n],{"is--padding":o,"ov-x--auto-hide":m,"ov-y--auto-hide":e,"overflow-y":l,"overflow-x":t})},computeViewClss:function(){var e=this.viewClassName;return domUtils.buildClass(["vxe-scrollbar--view",e])},computeViewInnerClss:function(){var e=this.viewInnerClassName;return domUtils.buildClass(["vxe-scrollbar--view-inner",e])},computeXOpts:function(){return Object.assign({},getConfig().scrollbar.xConfig,this.xConfig)},computeYOpts:function(){return Object.assign({},getConfig().scrollbar.yConfig,this.yConfig)},computeXToTop:function(){return"top"===this.computeXOpts.position},computeYToLeft:function(){return"left"===this.computeYOpts.position}}),methods:{dispatchEvent:function(e,t,i){this.$emit(e,createEvent(i,{$scrollbar:this},t))},getScrollViewElem:function(){return this.$refs.refViewElem||null},getScrollViewInnerElem:function(){return this.$refs.refViewInnerElem||null},scrollTo:function(e,t){var i=this.$refs.refViewElem;i&&(_xeUtils.default.isNumber(e)?i.scrollTo(e,t||0):i.scrollTo(e))},scrollIntoView:function(){var e=this.$refs.refViewElem;e&&e.scrollIntoView()},setScrollTop:function(e){var t=this.$refs.refViewElem;t&&(t.scrollTop=e)},setScrollLeft:function(e){var t=this.$refs.refViewElem;t&&(t.scrollLeft=e)},getScrollTop:function(){var e=this.$refs.refViewElem;return e?e.scrollTop:0},getScrollLeft:function(){var e=this.$refs.refViewElem;return e?e.scrollLeft:0},clearScroll:function(){var e=this.$refs.refViewElem;e&&(e.scrollTop=0,e.scrollLeft=0)},recalculate:function(){return this.updateThumbSize(),this.updateThumbOffset(),this.$nextTick()},scrollEvent:function(e){var t,i=this,r=i.reactData,n=i.internalData,o=r.xThumbWidth,r=r.yThumbHeight,l=n.lastScrollTop,s=n.lastScrollLeft,a=i.computeXOpts,c=e.currentTarget,u=c.scrollTop,f=c.scrollLeft,m=c.clientWidth,h=c.clientHeight,d=c.scrollHeight,c=c.scrollWidth,p="",g=!1,v=!1,b=!1,x=!1;l!==u&&(t=_xeUtils.default.toNumber(i.computeYOpts.threshold)||1,l<u?(p="bottom",0<r&&d-t<=u+h&&(v=!0)):(p="top",0<r&&u<=t&&(g=!0))),s!==f&&(l=_xeUtils.default.toNumber(a.threshold)||1,s<f?(p="right",0<o&&c-l<=f+m&&(x=!0)):(p="left",0<o&&f<=l&&(b=!0))),i.updateThumbOffset(),n.lastScrollTop=u,n.lastScrollLeft=f,(v||g||x||b)&&i.dispatchEvent("scroll-boundary",{direction:p,isTop:g,isBottom:v,isLeft:b,isRight:x,scrollTop:u,scrollLeft:f,clientWidth:m,clientHeight:h,scrollHeight:d,scrollWidth:c},e),i.dispatchEvent("scroll",{direction:p,isTop:0<r&&u<=0,isBottom:0<r&&d<=u+h,isLeft:0<o&&f<=0,isRight:0<o&&c<=f+m,scrollTop:u,scrollLeft:f,clientWidth:m,clientHeight:h,scrollHeight:d,scrollWidth:c},e)},renderVN:function(e){var t=this,i=t.$scopedSlots,r=t.id,n=t.native,o=t.loading,l=t.computeViewInnerClss,s=t.computeXVisible,a=t.computeYVisible,i=i.default;return e("div",{ref:"refElem",attrs:{id:r||null},class:t.computeWrapperClss,style:t.computeWrapperStyle},[e("div",{ref:"refViewElem",class:t.computeViewClss,style:t.viewStyle,attrs:Object.assign({id:t.viewId||null},t.viewAttrs),on:{scroll:t.scrollEvent}},[e("div",{key:"vi",ref:"refViewInnerElem",class:l},i?i({}):[])]),n||!1===s?renderEmptyElement(t):e("div",{ref:"refTrackXElem",class:"vxe-scrollbar--track-x",on:{click:t.clickTrackXEvent}},[e("div",{ref:"refThumbXElem",class:"vxe-scrollbar--thumb-x",on:{pointerdown:t.pointerdownThumbXEvent,pointermove:t.pointermoveThumbXEvent,pointerup:t.cleatPointerThumbEvent,pointercancel:t.cleatPointerThumbEvent,lostpointercapture:t.cleatPointerThumbEvent}})]),n||!1===a?renderEmptyElement(t):e("div",{ref:"refTrackYElem",class:"vxe-scrollbar--track-y",on:{click:t.clickTrackYEvent}},[e("div",{ref:"refThumbYElem",class:"vxe-scrollbar--thumb-y",on:{pointerdown:t.pointerdownThumbYEvent,pointermove:t.pointermoveThumbYEvent,pointerup:t.cleatPointerThumbEvent,pointercancel:t.cleatPointerThumbEvent,lostpointercapture:t.cleatPointerThumbEvent}})]),e(_loading.default,{class:"vxe-scrollbar--loading",props:{value:o}})])}},watch:{height:function(){this.reFlag++},width:function(){this.reFlag++},minHeight:function(){this.reFlag++},minWidth:function(){this.reFlag++},maxHeight:function(){this.reFlag++},maxWidth:function(){this.reFlag++},native:function(){this.reFlag++},syncResize:function(){this.reFlag++},computeYWidth:function(){this.reFlag++},computeXHeight:function(){this.reFlag++},computeXVisible:function(){var e=this;e.$nextTick(function(){e.reFlag++})},computeYVisible:function(){var e=this;e.$nextTick(function(){e.reFlag++})},reFlag:function(){var e=this;e.recalculate().then(function(){e.recalculate()})}},created:function(){this.internalData=createInternalData()},mounted:function(){var e=this,t=e,i=e.internalData,r=t.autoResize,n=e.$refs.refViewElem,o=e.$refs.refViewInnerElem;r&&(r=globalResize.create(function(){t.autoResize&&e.reFlag++}),n&&r.observe(n),o&&r.observe(o),i.scrollObserver=r),e.reFlag++,globalEvents.on(e,"resize",function(){e.reFlag++})},beforeDestroy:function(){var e=this.internalData.scrollObserver;e&&e.disconnect(),globalEvents.off(this,"resize")},destroyed:function(){var e=this.reactData,t=this.internalData;_xeUtils.default.assign(e,createReactData()),_xeUtils.default.assign(t,createInternalData())},render:function(e){return this.renderVN(e)}});