vxe-pc-ui 3.20.2 → 3.20.5

package/lib/scrollbar/src/scrollbar.js

@@ -8,16 +8,20 @@ var _comp = require("../../ui/src/comp");
 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,
   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,
@@ -328,14 +332,14 @@ var _default2 = exports.default = /* define-vxe-component start */(0, _comp.defi
         return;
       }
       var trackXEl = $xeScrollbar.$refs.refTrackXElem;
-      var xThumbWidth = trackXEl ? (0, _util.getThumbSize)(viewEl.clientWidth, viewEl.scrollWidth, trackXEl.clientWidth) : 0;
+      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 ? (0, _util.getThumbSize)(viewEl.clientHeight, viewEl.scrollHeight, trackYEl.clientHeight) : 0;
+      var yThumbHeight = trackYEl ? getThumbSize(viewEl.clientHeight, viewEl.scrollHeight, trackYEl.clientHeight) : 0;
       var thumbYElem = $xeScrollbar.$refs.refThumbYElem;
       if (thumbYElem) {
         thumbYElem.style.height = yThumbHeight + 'px';
@@ -357,7 +361,7 @@ var _default2 = exports.default = /* define-vxe-component start */(0, _comp.defi
         yThumbHeight = reactData.yThumbHeight;
       var trackXEl = $xeScrollbar.$refs.refTrackXElem;
       var thumbXElem = $xeScrollbar.$refs.refThumbXElem;
-      var xThumbLeft = trackXEl && xThumbWidth ? (0, _util.getThumbOffsetSize)(viewEl.scrollLeft, viewEl.clientWidth, viewEl.scrollWidth, trackXEl.clientWidth, xThumbWidth) : 0;
+      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';
@@ -365,7 +369,7 @@ var _default2 = exports.default = /* define-vxe-component start */(0, _comp.defi
       }
       var trackYEl = $xeScrollbar.$refs.refTrackYElem;
       var thumbYElem = $xeScrollbar.$refs.refThumbYElem;
-      var yThumbTop = trackYEl && yThumbHeight ? (0, _util.getThumbOffsetSize)(viewEl.scrollTop, viewEl.clientHeight, viewEl.scrollHeight, trackYEl.clientHeight, yThumbHeight) : 0;
+      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';
@@ -468,7 +472,7 @@ var _default2 = exports.default = /* define-vxe-component start */(0, _comp.defi
       var xThumbWidth = reactData.xThumbWidth;
       var trackRect = trackEl.getBoundingClientRect();
       viewEl.scrollTo({
-        left: (0, _util.getScrollFromClick)(evnt.clientX - trackRect.left, viewEl.clientWidth, viewEl.scrollWidth, trackEl.clientWidth, xThumbWidth),
+        left: getScrollFromClick(evnt.clientX - trackRect.left, viewEl.clientWidth, viewEl.scrollWidth, trackEl.clientWidth, xThumbWidth),
         behavior: 'auto'
       });
     },
@@ -486,7 +490,7 @@ var _default2 = exports.default = /* define-vxe-component start */(0, _comp.defi
       var yThumbHeight = reactData.yThumbHeight;
       var trackRect = trackEl.getBoundingClientRect();
       viewEl.scrollTo({
-        top: (0, _util.getScrollFromClick)(evnt.clientY - trackRect.top, viewEl.clientHeight, viewEl.scrollHeight, trackEl.clientHeight, yThumbHeight),
+        top: getScrollFromClick(evnt.clientY - trackRect.top, viewEl.clientHeight, viewEl.scrollHeight, trackEl.clientHeight, yThumbHeight),
         behavior: 'auto'
       });
     },
@@ -506,7 +510,7 @@ var _default2 = exports.default = /* define-vxe-component start */(0, _comp.defi
       var trackRect = trackEl.getBoundingClientRect();
       var pointerPosition = evnt.clientX - trackRect.left;
       // 记录 thumb 的偏移
-      var thumbOffset = (0, _util.getThumbOffsetSize)(viewEl.scrollLeft, viewEl.clientWidth, viewEl.scrollWidth, trackEl.clientWidth, xThumbWidth);
+      var thumbOffset = getThumbOffsetSize(viewEl.scrollLeft, viewEl.clientWidth, viewEl.scrollWidth, trackEl.clientWidth, xThumbWidth);
       internalData.thumbDragOffset = pointerPosition - thumbOffset;
     },
     pointermoveThumbXEvent: function pointermoveThumbXEvent(evnt) {
@@ -525,7 +529,7 @@ var _default2 = exports.default = /* define-vxe-component start */(0, _comp.defi
         var trackEl = thumbEl.parentElement;
         var trackRect = trackEl.getBoundingClientRect();
         // 更新偏移
-        viewEl.scrollLeft = (0, _util.getScrollFromDrag)(evnt.clientX - trackRect.left, thumbDragOffset, viewEl.clientWidth, viewEl.scrollWidth, trackEl.clientWidth, xThumbWidth);
+        viewEl.scrollLeft = getScrollFromDrag(evnt.clientX - trackRect.left, thumbDragOffset, viewEl.clientWidth, viewEl.scrollWidth, trackEl.clientWidth, xThumbWidth);
       }
     },
     cleatPointerThumbEvent: function cleatPointerThumbEvent(evnt) {
@@ -551,7 +555,7 @@ var _default2 = exports.default = /* define-vxe-component start */(0, _comp.defi
       var trackRect = trackEl.getBoundingClientRect();
       var pointerPosition = evnt.clientY - trackRect.top;
       // 记录 thumb 的偏移
-      var thumbOffset = (0, _util.getThumbOffsetSize)(viewEl.scrollTop, viewEl.clientHeight, viewEl.scrollHeight, trackEl.clientHeight, yThumbHeight);
+      var thumbOffset = getThumbOffsetSize(viewEl.scrollTop, viewEl.clientHeight, viewEl.scrollHeight, trackEl.clientHeight, yThumbHeight);
       internalData.thumbDragOffset = pointerPosition - thumbOffset;
     },
     pointermoveThumbYEvent: function pointermoveThumbYEvent(evnt) {
@@ -570,7 +574,7 @@ var _default2 = exports.default = /* define-vxe-component start */(0, _comp.defi
         var trackEl = thumbEl.parentElement;
         var trackRect = trackEl.getBoundingClientRect();
         // 更新偏移
-        viewEl.scrollTop = (0, _util.getScrollFromDrag)(evnt.clientY - trackRect.top, thumbDragOffset, viewEl.clientHeight, viewEl.scrollHeight, trackEl.clientHeight, yThumbHeight);
+        viewEl.scrollTop = getScrollFromDrag(evnt.clientY - trackRect.top, thumbDragOffset, viewEl.clientHeight, viewEl.scrollHeight, trackEl.clientHeight, yThumbHeight);
       }
     },
     //

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"),_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)}});
+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],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 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,l=e.minHeight,n=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)),l&&(a.minHeight=(0,_dom.toCssUnit)(l)),n&&(a.maxWidth=(0,_dom.toCssUnit)(n)),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.className,l=e.padding,n=t.yThumbHeight,t=t.xThumbWidth,o=e.computeXToTop,s=e.computeYToLeft,a=e.computeYVisible,c=e.computeXAutoHide,u=e.computeYAutoHide;return domUtils.buildClass(["vxe-scrollbar","ov-x--".concat(!1===e.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":l,"ov-x--auto-hide":c,"ov-y--auto-hide":u,"overflow-y":n,"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,l=i.$refs.refViewElem;l&&l.clientHeight&&(t=(t=i.$refs.refTrackXElem)?getThumbSize(l.clientWidth,l.scrollWidth,t.clientWidth):0,(e=i.$refs.refThumbXElem)&&(e.style.width=t+"px"),r.xThumbWidth=t,t=(e=i.$refs.refTrackYElem)?getThumbSize(l.clientHeight,l.scrollHeight,e.clientHeight):0,(l=i.$refs.refThumbYElem)&&(l.style.height=t+"px"),r.yThumbHeight=t)},updateThumbOffset:function(){var e,t,i,r=this,l=r.reactData,n=r.internalData,o=r.$refs.refViewElem;o&&(e=l.xThumbWidth,l=l.yThumbHeight,i=r.$refs.refTrackXElem,t=r.$refs.refThumbXElem,i=i&&e?getThumbOffsetSize(o.scrollLeft,o.clientWidth,o.scrollWidth,i.clientWidth,e):0,n.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&&l?getThumbOffsetSize(o.scrollTop,o.clientHeight,o.scrollHeight,e.clientHeight,l):0,n.yThumbTop=i,t)&&l&&(t.style.height=l+"px",t.style.transform="translateY(".concat(i,"px)"))},scrollEvent:function(e){var t,i=this,r=i.reactData,l=i.internalData,n=r.xThumbWidth,r=r.yThumbHeight,o=l.lastScrollTop,s=l.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<n&&c-o<=h+f&&(T=!0)):(d="left",0<n&&h<=o&&(v=!0))),i.updateThumbOffset(),l.lastScrollTop=u,l.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<n&&h<=0,isRight:0<n&&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,l=e.currentTarget;l===e.target&&(t=this.$refs.refViewElem)&&(r=r.xThumbWidth,i=l.getBoundingClientRect(),t.scrollTo({left:getScrollFromClick(e.clientX-i.left,t.clientWidth,t.scrollWidth,l.clientWidth,r),behavior:"auto"}))},clickTrackYEvent:function(e){var t,i,r=this.reactData,l=e.currentTarget;l===e.target&&(t=this.$refs.refViewElem)&&(r=r.yThumbHeight,i=l.getBoundingClientRect(),t.scrollTo({top:getScrollFromClick(e.clientY-i.top,t.clientHeight,t.scrollHeight,l.clientHeight,r),behavior:"auto"}))},pointerdownThumbXEvent:function(e){var t,i=this.reactData,r=this.internalData,l=e.currentTarget,n=(r.isThumbDrag=!0,l.setPointerCapture(e.pointerId),this.$refs.refViewElem);n&&(i=i.xThumbWidth,t=(l=l.parentElement).getBoundingClientRect(),e=e.clientX-t.left,t=getThumbOffsetSize(n.scrollLeft,n.clientWidth,n.scrollWidth,l.clientWidth,i),r.thumbDragOffset=e-t)},pointermoveThumbXEvent:function(e){var t,i,r=this.reactData,l=this.internalData,n=l.isThumbDrag,l=l.thumbDragOffset;n&&(n=this.$refs.refViewElem)&&(r=r.xThumbWidth,i=(t=e.currentTarget.parentElement).getBoundingClientRect(),n.scrollLeft=getScrollFromDrag(e.clientX-i.left,l,n.clientWidth,n.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,l=e.currentTarget,n=(r.isThumbDrag=!0,l.setPointerCapture(e.pointerId),this.$refs.refViewElem);n&&(i=i.yThumbHeight,t=(l=l.parentElement).getBoundingClientRect(),e=e.clientY-t.top,t=getThumbOffsetSize(n.scrollTop,n.clientHeight,n.scrollHeight,l.clientHeight,i),r.thumbDragOffset=e-t)},pointermoveThumbYEvent:function(e){var t,i,r=this.reactData,l=this.internalData,n=l.isThumbDrag,l=l.thumbDragOffset;n&&(n=this.$refs.refViewElem)&&(r=r.yThumbHeight,i=(t=e.currentTarget.parentElement).getBoundingClientRect(),n.scrollTop=getScrollFromDrag(e.clientY-i.top,l,n.clientHeight,n.scrollHeight,t.clientHeight,r))},renderVN:function(e){var t=this,i=t.$scopedSlots,r=t.id,l=t.native,n=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,attrs:Object.assign({id:t.viewId||null},t.viewAttrs),on:{scroll:t.scrollEvent}},[e("div",{key:"vi",ref:"refViewInnerElem",class:o},i?i({}):[])]),l||!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}})]),l||!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:n}})])}},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,l=e.$refs.refViewElem,n=e.$refs.refViewInnerElem;r&&(r=globalResize.create(function(){t.autoResize&&e.reFlag++}),l&&r.observe(l),n&&r.observe(n),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)}});