vxe-pc-ui 3.20.0 → 3.20.2

package/lib/scrollbar/src/scrollbar.js

@@ -9,6 +9,7 @@ var _xeUtils = _interopRequireDefault(require("xe-utils"));
 var _ui = require("../../ui");
 var _dom = require("../../ui/src/dom");
 var _util = require("./util");
+var _utils = require("../../ui/src/utils");
 var _loading = _interopRequireDefault(require("../../loading"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 var getConfig = _ui.VxeUI.getConfig,
@@ -38,6 +39,7 @@ var _default2 = exports.default = /* define-vxe-component start */(0, _comp.defi
   name: 'VxeScrollbar',
   props: {
     id: [String, Number],
+    viewId: [String, Number],
     width: [String, Number],
     height: [String, Number],
     minWidth: [String, Number],
@@ -57,6 +59,18 @@ var _default2 = exports.default = /* define-vxe-component start */(0, _comp.defi
         return getConfig().scrollbar.padding;
       }
     },
+    autoHide: {
+      type: Boolean,
+      default: function _default() {
+        return getConfig().scrollbar.autoHide;
+      }
+    },
+    visible: {
+      type: Boolean,
+      default: function _default() {
+        return getConfig().scrollbar.visible;
+      }
+    },
     xConfig: Object,
     yConfig: Object,
     className: {
@@ -110,8 +124,8 @@ var _default2 = exports.default = /* define-vxe-component start */(0, _comp.defi
         minHeight = props.minHeight,
         maxWidth = props.maxWidth,
         maxHeight = props.maxHeight;
-      var xOpts = $xeScrollbar.computeXOpts;
-      var yOpts = $xeScrollbar.computeYOpts;
+      var barWidth = $xeScrollbar.computeYWidth;
+      var barHeight = $xeScrollbar.computeXHeight;
       var stys = {};
       if (width) {
         stys.width = (0, _dom.toCssUnit)(width);
@@ -131,14 +145,50 @@ var _default2 = exports.default = /* define-vxe-component start */(0, _comp.defi
       if (maxHeight) {
         stys.maxHeight = (0, _dom.toCssUnit)(maxHeight);
       }
-      if (yOpts.width) {
-        stys['--vxe-ui-scrollbar-y-width'] = (0, _dom.toCssUnit)(yOpts.width);
-      }
-      if (xOpts.height) {
-        stys['--vxe-ui-scrollbar-x-height'] = (0, _dom.toCssUnit)(xOpts.height);
+      if (barWidth || barHeight) {
+        stys['--vxe-ui-scrollbar-y-width'] = (0, _dom.toCssUnit)(barWidth || barHeight);
+        stys['--vxe-ui-scrollbar-x-height'] = (0, _dom.toCssUnit)(barHeight || barWidth);
       }
       return stys;
     },
+    computeXHeight: function computeXHeight() {
+      var $xeScrollbar = this;
+      var xOpts = $xeScrollbar.computeXOpts;
+      return xOpts.height;
+    },
+    computeYWidth: function computeYWidth() {
+      var $xeScrollbar = this;
+      var yOpts = $xeScrollbar.computeYOpts;
+      return yOpts.width;
+    },
+    computeXVisible: function computeXVisible() {
+      var $xeScrollbar = this;
+      var props = $xeScrollbar;
+      var visible = props.visible;
+      var xOpts = $xeScrollbar.computeXOpts;
+      return (0, _utils.getDefaultConfig)(xOpts.visible, visible);
+    },
+    computeYVisible: function computeYVisible() {
+      var $xeScrollbar = this;
+      var props = $xeScrollbar;
+      var visible = props.visible;
+      var yOpts = $xeScrollbar.computeYOpts;
+      return (0, _utils.getDefaultConfig)(yOpts.visible, visible);
+    },
+    computeXAutoHide: function computeXAutoHide() {
+      var $xeScrollbar = this;
+      var props = $xeScrollbar;
+      var autoHide = props.autoHide;
+      var xOpts = $xeScrollbar.computeXOpts;
+      return (0, _utils.getDefaultConfig)(xOpts.autoHide, autoHide);
+    },
+    computeYAutoHide: function computeYAutoHide() {
+      var $xeScrollbar = this;
+      var props = $xeScrollbar;
+      var autoHide = props.autoHide;
+      var yOpts = $xeScrollbar.computeYOpts;
+      return (0, _utils.getDefaultConfig)(yOpts.autoHide, autoHide);
+    },
     computeWrapperClss: function computeWrapperClss() {
       var $xeScrollbar = this;
       var props = $xeScrollbar;
@@ -148,14 +198,16 @@ var _default2 = exports.default = /* define-vxe-component start */(0, _comp.defi
         padding = props.padding;
       var yThumbHeight = reactData.yThumbHeight,
         xThumbWidth = reactData.xThumbWidth;
-      var xOpts = $xeScrollbar.computeXOpts;
-      var yOpts = $xeScrollbar.computeYOpts;
       var xToTop = $xeScrollbar.computeXToTop;
       var yToLeft = $xeScrollbar.computeYToLeft;
-      return domUtils.buildClass(['vxe-scrollbar', "ov-x--".concat(xOpts.visible || 'visible'), "ov-y--".concat(yOpts.visible || 'visible'), "sx-pos--".concat(xToTop ? 'top' : 'bottom'), "sy-pos--".concat(yToLeft ? 'left' : 'right'), native ? 'is--native' : 'is--virtual', className], {
+      var xVisible = $xeScrollbar.computeXVisible;
+      var yVisible = $xeScrollbar.computeYVisible;
+      var xAutoHide = $xeScrollbar.computeXAutoHide;
+      var yAutoHide = $xeScrollbar.computeYAutoHide;
+      return domUtils.buildClass(['vxe-scrollbar', "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': xOpts.autoHide,
-        'ov-y--auto-hide': yOpts.autoHide,
+        'ov-x--auto-hide': xAutoHide,
+        'ov-y--auto-hide': yAutoHide,
         'overflow-y': yThumbHeight,
         'overflow-x': xThumbWidth
       });
@@ -531,13 +583,14 @@ var _default2 = exports.default = /* define-vxe-component start */(0, _comp.defi
       var id = props.id,
         native = props.native,
         loading = props.loading,
+        viewId = props.viewId,
         viewAttrs = props.viewAttrs;
       var wrapperStyle = $xeScrollbar.computeWrapperStyle;
       var wrapperClss = $xeScrollbar.computeWrapperClss;
       var viewClss = $xeScrollbar.computeViewClss;
       var viewInnerClss = $xeScrollbar.computeViewInnerClss;
-      var xOpts = $xeScrollbar.computeXOpts;
-      var yOpts = $xeScrollbar.computeYOpts;
+      var xVisible = $xeScrollbar.computeXVisible;
+      var yVisible = $xeScrollbar.computeYVisible;
       var defaultSlot = slots.default;
       return h('div', {
         ref: 'refElem',
@@ -549,7 +602,9 @@ var _default2 = exports.default = /* define-vxe-component start */(0, _comp.defi
       }, [h('div', {
         ref: 'refViewElem',
         class: viewClss,
-        attrs: viewAttrs,
+        attrs: Object.assign({
+          id: viewId || null
+        }, viewAttrs),
         on: {
           scroll: $xeScrollbar.scrollEvent
         }
@@ -557,7 +612,7 @@ var _default2 = exports.default = /* define-vxe-component start */(0, _comp.defi
         key: 'vi',
         ref: 'refViewInnerElem',
         class: viewInnerClss
-      }, defaultSlot ? defaultSlot({}) : [])]), native || xOpts.visible === 'hidden' ? renderEmptyElement($xeScrollbar) : h('div', {
+      }, defaultSlot ? defaultSlot({}) : [])]), native || xVisible === false ? renderEmptyElement($xeScrollbar) : h('div', {
         ref: 'refTrackXElem',
         class: 'vxe-scrollbar--track-x',
         on: {
@@ -573,7 +628,7 @@ var _default2 = exports.default = /* define-vxe-component start */(0, _comp.defi
           pointercancel: $xeScrollbar.cleatPointerThumbEvent,
           lostpointercapture: $xeScrollbar.cleatPointerThumbEvent
         }
-      })]), native || yOpts.visible === 'hidden' ? renderEmptyElement($xeScrollbar) : h('div', {
+      })]), native || yVisible === false ? renderEmptyElement($xeScrollbar) : h('div', {
         ref: 'refTrackYElem',
         class: 'vxe-scrollbar--track-y',
         on: {
@@ -630,6 +685,26 @@ var _default2 = exports.default = /* define-vxe-component start */(0, _comp.defi
       var $xeScrollbar = this;
       $xeScrollbar.reFlag++;
     },
+    computeYWidth: function computeYWidth() {
+      var $xeScrollbar = this;
+      $xeScrollbar.reFlag++;
+    },
+    computeXHeight: function computeXHeight() {
+      var $xeScrollbar = this;
+      $xeScrollbar.reFlag++;
+    },
+    computeXVisible: function computeXVisible() {
+      var $xeScrollbar = this;
+      $xeScrollbar.$nextTick(function () {
+        $xeScrollbar.reFlag++;
+      });
+    },
+    computeYVisible: function computeYVisible() {
+      var $xeScrollbar = this;
+      $xeScrollbar.$nextTick(function () {
+        $xeScrollbar.reFlag++;
+      });
+    },
     reFlag: function reFlag() {
       var $xeScrollbar = this;
       $xeScrollbar.recalculate().then(function () {

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"),_util=require("./util"),_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",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:function(){return getConfig().scrollbar.native}},padding:{type:Boolean,default:function(){return getConfig().scrollbar.padding}},xConfig:Object,yConfig:Object,className:{type:String,default:function(){return getConfig().scrollbar.className}},viewAttrs:{type:Object,default:function(){return getConfig().scrollbar.viewAttrs}},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,a=e.computeXOpts,e=e.computeYOpts,s={};return t&&(s.width=(0,_dom.toCssUnit)(t)),i&&(s.height=(0,_dom.toCssUnit)(i)),r&&(s.minWidth=(0,_dom.toCssUnit)(r)),n&&(s.minHeight=(0,_dom.toCssUnit)(n)),l&&(s.maxWidth=(0,_dom.toCssUnit)(l)),o&&(s.maxHeight=(0,_dom.toCssUnit)(o)),e.width&&(s["--vxe-ui-scrollbar-y-width"]=(0,_dom.toCssUnit)(e.width)),a.height&&(s["--vxe-ui-scrollbar-x-height"]=(0,_dom.toCssUnit)(a.height)),s},computeWrapperClss:function(){var e=this,t=e.reactData,i=e.native,r=e.className,n=e.padding,l=t.yThumbHeight,t=t.xThumbWidth,o=e.computeXOpts,a=e.computeYOpts,s=e.computeXToTop,e=e.computeYToLeft;return domUtils.buildClass(["vxe-scrollbar","ov-x--".concat(o.visible||"visible"),"ov-y--".concat(a.visible||"visible"),"sx-pos--".concat(s?"top":"bottom"),"sy-pos--".concat(e?"left":"right"),i?"is--native":"is--virtual",r],{"is--padding":n,"ov-x--auto-hide":o.autoHide,"ov-y--auto-hide":a.autoHide,"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))},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)?(0,_util.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)?(0,_util.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?(0,_util.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?(0,_util.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,a=n.lastScrollLeft,s=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))),a!==h&&(o=_xeUtils.default.toNumber(s.threshold)||1,a<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:(0,_util.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:(0,_util.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=(0,_util.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=(0,_util.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=(0,_util.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=(0,_util.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.computeXOpts,a=t.computeYOpts,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,attrs:t.viewAttrs,on:{scroll:t.scrollEvent}},[e("div",{key:"vi",ref:"refViewInnerElem",class:t.computeViewInnerClss},i?i({}):[])]),n||"hidden"===o.visible?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||"hidden"===a.visible?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++},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"),_util=require("./util"),_utils=require("../../ui/src/utils"),_loading=_interopRequireDefault(require("../../loading"));function _interopRequireDefault(t){return t&&t.__esModule?t:{default:t}}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",props:{id:[String,Number],viewId:[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: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}},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 t=_xeUtils.default.uniqueId(),e=createReactData();return Object.assign(Object.assign({},{}),{xID:t,reactData:e,reFlag:0})},computed:{computeWrapperStyle:function(){var t=this,e=t.width,i=t.height,r=t.minWidth,n=t.minHeight,l=t.maxWidth,o=t.maxHeight,s=t.computeYWidth,t=t.computeXHeight,a={};return e&&(a.width=(0,_dom.toCssUnit)(e)),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||t)&&(a["--vxe-ui-scrollbar-y-width"]=(0,_dom.toCssUnit)(s||t),a["--vxe-ui-scrollbar-x-height"]=(0,_dom.toCssUnit)(t||s)),a},computeXHeight:function(){return this.computeXOpts.height},computeYWidth:function(){return this.computeYOpts.width},computeXVisible:function(){var t=this.visible,e=this.computeXOpts;return(0,_utils.getDefaultConfig)(e.visible,t)},computeYVisible:function(){var t=this.visible,e=this.computeYOpts;return(0,_utils.getDefaultConfig)(e.visible,t)},computeXAutoHide:function(){var t=this.autoHide,e=this.computeXOpts;return(0,_utils.getDefaultConfig)(e.autoHide,t)},computeYAutoHide:function(){var t=this.autoHide,e=this.computeYOpts;return(0,_utils.getDefaultConfig)(e.autoHide,t)},computeWrapperClss:function(){var t=this,e=t.reactData,i=t.native,r=t.className,n=t.padding,l=e.yThumbHeight,e=e.xThumbWidth,o=t.computeXToTop,s=t.computeYToLeft,a=t.computeYVisible,c=t.computeXAutoHide,u=t.computeYAutoHide;return domUtils.buildClass(["vxe-scrollbar","ov-x--".concat(!1===t.computeXVisible?"hidden":"visible"),"ov-y--".concat(!1===a?"hidden":"visible"),"sx-pos--".concat(o?"top":"bottom"),"sy-pos--".concat(s?"left":"right"),i?"is--native":"is--virtual",r],{"is--padding":n,"ov-x--auto-hide":c,"ov-y--auto-hide":u,"overflow-y":l,"overflow-x":e})},computeViewClss:function(){var t=this.viewClassName;return domUtils.buildClass(["vxe-scrollbar--view",t])},computeViewInnerClss:function(){var t=this.viewInnerClassName;return domUtils.buildClass(["vxe-scrollbar--view-inner",t])},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(t,e,i){this.$emit(t,createEvent(i,{$scrollbar:this},e))},scrollTo:function(t,e){var i=this.$refs.refViewElem;i&&(_xeUtils.default.isNumber(t)?i.scrollTo(t,e||0):i.scrollTo(t))},scrollIntoView:function(){var t=this.$refs.refViewElem;t&&t.scrollIntoView()},setScrollTop:function(t){var e=this.$refs.refViewElem;e&&(e.scrollTop=t)},setScrollLeft:function(t){var e=this.$refs.refViewElem;e&&(e.scrollLeft=t)},getScrollTop:function(){var t=this.$refs.refViewElem;return t?t.scrollTop:0},getScrollLeft:function(){var t=this.$refs.refViewElem;return t?t.scrollLeft:0},clearScroll:function(){var t=this.$refs.refViewElem;t&&(t.scrollTop=0,t.scrollLeft=0)},recalculate:function(){return this.updateThumbSize(),this.updateThumbOffset(),this.$nextTick()},updateThumbSize:function(){var t,e,i=this,r=i.reactData,n=i.$refs.refViewElem;n&&n.clientHeight&&(e=(e=i.$refs.refTrackXElem)?(0,_util.getThumbSize)(n.clientWidth,n.scrollWidth,e.clientWidth):0,(t=i.$refs.refThumbXElem)&&(t.style.width=e+"px"),r.xThumbWidth=e,e=(t=i.$refs.refTrackYElem)?(0,_util.getThumbSize)(n.clientHeight,n.scrollHeight,t.clientHeight):0,(n=i.$refs.refThumbYElem)&&(n.style.height=e+"px"),r.yThumbHeight=e)},updateThumbOffset:function(){var t,e,i,r=this,n=r.reactData,l=r.internalData,o=r.$refs.refViewElem;o&&(t=n.xThumbWidth,n=n.yThumbHeight,i=r.$refs.refTrackXElem,e=r.$refs.refThumbXElem,i=i&&t?(0,_util.getThumbOffsetSize)(o.scrollLeft,o.clientWidth,o.scrollWidth,i.clientWidth,t):0,l.xThumbLeft=i,e&&t&&(e.style.width=t+"px",e.style.transform="translateX(".concat(i,"px)")),t=r.$refs.refTrackYElem,e=r.$refs.refThumbYElem,i=t&&n?(0,_util.getThumbOffsetSize)(o.scrollTop,o.clientHeight,o.scrollHeight,t.clientHeight,n):0,l.yThumbTop=i,e)&&n&&(e.style.height=n+"px",e.style.transform="translateY(".concat(i,"px)"))},scrollEvent:function(t){var e,i=this,r=i.reactData,n=i.internalData,l=r.xThumbWidth,r=r.yThumbHeight,o=n.lastScrollTop,s=n.lastScrollLeft,a=i.computeXOpts,c=t.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&&(e=_xeUtils.default.toNumber(i.computeYOpts.threshold)||1,o<u?(d="bottom",0<r&&g-e<=u+m&&(b=!0)):(d="top",0<r&&u<=e&&(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},t),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},t)},clickTrackXEvent:function(t){var e,i,r=this.reactData,n=t.currentTarget;n===t.target&&(e=this.$refs.refViewElem)&&(r=r.xThumbWidth,i=n.getBoundingClientRect(),e.scrollTo({left:(0,_util.getScrollFromClick)(t.clientX-i.left,e.clientWidth,e.scrollWidth,n.clientWidth,r),behavior:"auto"}))},clickTrackYEvent:function(t){var e,i,r=this.reactData,n=t.currentTarget;n===t.target&&(e=this.$refs.refViewElem)&&(r=r.yThumbHeight,i=n.getBoundingClientRect(),e.scrollTo({top:(0,_util.getScrollFromClick)(t.clientY-i.top,e.clientHeight,e.scrollHeight,n.clientHeight,r),behavior:"auto"}))},pointerdownThumbXEvent:function(t){var e,i=this.reactData,r=this.internalData,n=t.currentTarget,l=(r.isThumbDrag=!0,n.setPointerCapture(t.pointerId),this.$refs.refViewElem);l&&(i=i.xThumbWidth,e=(n=n.parentElement).getBoundingClientRect(),t=t.clientX-e.left,e=(0,_util.getThumbOffsetSize)(l.scrollLeft,l.clientWidth,l.scrollWidth,n.clientWidth,i),r.thumbDragOffset=t-e)},pointermoveThumbXEvent:function(t){var e,i,r=this.reactData,n=this.internalData,l=n.isThumbDrag,n=n.thumbDragOffset;l&&(l=this.$refs.refViewElem)&&(r=r.xThumbWidth,i=(e=t.currentTarget.parentElement).getBoundingClientRect(),l.scrollLeft=(0,_util.getScrollFromDrag)(t.clientX-i.left,n,l.clientWidth,l.scrollWidth,e.clientWidth,r))},cleatPointerThumbEvent:function(t){var e=this.internalData;t.currentTarget.releasePointerCapture(t.pointerId),e.isThumbDrag=!1},pointerdownThumbYEvent:function(t){var e,i=this.reactData,r=this.internalData,n=t.currentTarget,l=(r.isThumbDrag=!0,n.setPointerCapture(t.pointerId),this.$refs.refViewElem);l&&(i=i.yThumbHeight,e=(n=n.parentElement).getBoundingClientRect(),t=t.clientY-e.top,e=(0,_util.getThumbOffsetSize)(l.scrollTop,l.clientHeight,l.scrollHeight,n.clientHeight,i),r.thumbDragOffset=t-e)},pointermoveThumbYEvent:function(t){var e,i,r=this.reactData,n=this.internalData,l=n.isThumbDrag,n=n.thumbDragOffset;l&&(l=this.$refs.refViewElem)&&(r=r.yThumbHeight,i=(e=t.currentTarget.parentElement).getBoundingClientRect(),l.scrollTop=(0,_util.getScrollFromDrag)(t.clientY-i.top,n,l.clientHeight,l.scrollHeight,e.clientHeight,r))},renderVN:function(t){var e=this,i=e.$scopedSlots,r=e.id,n=e.native,l=e.loading,o=e.computeViewInnerClss,s=e.computeXVisible,a=e.computeYVisible,i=i.default;return t("div",{ref:"refElem",attrs:{id:r||null},class:e.computeWrapperClss,style:e.computeWrapperStyle},[t("div",{ref:"refViewElem",class:e.computeViewClss,attrs:Object.assign({id:e.viewId||null},e.viewAttrs),on:{scroll:e.scrollEvent}},[t("div",{key:"vi",ref:"refViewInnerElem",class:o},i?i({}):[])]),n||!1===s?renderEmptyElement(e):t("div",{ref:"refTrackXElem",class:"vxe-scrollbar--track-x",on:{click:e.clickTrackXEvent}},[t("div",{ref:"refThumbXElem",class:"vxe-scrollbar--thumb-x",on:{pointerdown:e.pointerdownThumbXEvent,pointermove:e.pointermoveThumbXEvent,pointerup:e.cleatPointerThumbEvent,pointercancel:e.cleatPointerThumbEvent,lostpointercapture:e.cleatPointerThumbEvent}})]),n||!1===a?renderEmptyElement(e):t("div",{ref:"refTrackYElem",class:"vxe-scrollbar--track-y",on:{click:e.clickTrackYEvent}},[t("div",{ref:"refThumbYElem",class:"vxe-scrollbar--thumb-y",on:{pointerdown:e.pointerdownThumbYEvent,pointermove:e.pointermoveThumbYEvent,pointerup:e.cleatPointerThumbEvent,pointercancel:e.cleatPointerThumbEvent,lostpointercapture:e.cleatPointerThumbEvent}})]),t(_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 t=this;t.$nextTick(function(){t.reFlag++})},computeYVisible:function(){var t=this;t.$nextTick(function(){t.reFlag++})},reFlag:function(){var t=this;t.recalculate().then(function(){t.recalculate()})}},created:function(){this.internalData=createInternalData()},mounted:function(){var t=this,e=t,i=t.internalData,r=e.autoResize,n=t.$refs.refViewElem,l=t.$refs.refViewInnerElem;r&&(r=globalResize.create(function(){e.autoResize&&t.reFlag++}),n&&r.observe(n),l&&r.observe(l),i.resizeObserver=r),t.reFlag++,globalEvents.on(t,"resize",function(){t.reFlag++})},beforeDestroy:function(){var t=this.internalData.resizeObserver;t&&t.disconnect(),globalEvents.off(this,"resize")},destroyed:function(){var t=this.reactData,e=this.internalData;_xeUtils.default.assign(t,createReactData()),_xeUtils.default.assign(e,createInternalData())},render:function(t){return this.renderVN(t)}});