gg-y-ui/lib/scrollbar/index.js

An enterprise-class UI design language and Vue-based implementation for web

/*!
 * 
 * y-ui v0.1.0
 * 
 * Copyright 2021-present, Y-UI-Design.
 * All rights reserved.
 * 
 */
module.exports=function(e){var t={};function i(r){if(t[r])return t[r].exports;var n=t[r]={i:r,l:!1,exports:{}};return e[r].call(n.exports,n,n.exports,i),n.l=!0,n.exports}return i.m=e,i.c=t,i.d=function(e,t,r){i.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:r})},i.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},i.t=function(e,t){if(1&t&&(e=i(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var r=Object.create(null);if(i.r(r),Object.defineProperty(r,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var n in e)i.d(r,n,function(t){return e[t]}.bind(null,n));return r},i.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return i.d(t,"a",t),t},i.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},i.p="",i(i.s=103)}({0:function(e,t,i){"use strict";Object.defineProperty(t,"__esModule",{value:!0});t.getPrefixCls=function(e){return"y-"+e}},103:function(e,t,i){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var r,n=i(104),o=(r=n)&&r.__esModule?r:{default:r};o.default.install=function(e){e.component(o.default.name,o.default)},t.default=o.default},104:function(e,t,i){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var r=i(0),n=s(i(34)),o=s(i(105));function s(e){return e&&e.__esModule?e:{default:e}}function l(e,t,i){return t in e?Object.defineProperty(e,t,{value:i,enumerable:!0,configurable:!0,writable:!0}):e[t]=i,e}var a={name:"YScrollbar",props:{native:{type:Boolean,default:!1},enableResizeListener:{type:Boolean,default:!0},bottomDistance:{type:Number,default:0},scrollOnBottom:{type:Function,default:null}},data:function(){return{x:0,y:0,xSize:"0",ySize:"0",nsbw:(0,n.default)(),resizeListener:null,isInvoke:!1}},provide:function(){return{yunUIScrollbarContext:this}},methods:{handleScroll:function(){var e=this.$refs.wrapper,t=100*e.scrollTop/e.clientHeight,i=100*e.scrollLeft/e.clientWidth,r=this.y<t;this.y=t,this.x=i;var n={wrapperEl:e,wrapperScrollTop:e.scrollTop,wrapperScrollLeft:e.scrollLeft,wrapperScrollHeight:e.scrollHeight,wrapperScrollWidth:e.scrollWidth,el:this.$el,width:this.$el.clientWidth,height:this.$el.clientHeight};this.$emit("scroll",n),n.wrapperScrollHeight-n.height-n.wrapperScrollTop-this.bottomDistance<=0&&r&&!this.isInvoke&&(this.$emit("bottom"),this.scrollOnBottom&&this.scrollOnBottom(),this.isInvoke=!0),r||(this.isInvoke=!1)},renderTrackSize:function(){var e=this.$refs.wrapper;if(e){var t=100*e.clientHeight/e.scrollHeight,i=100*e.clientWidth/e.scrollWidth;this.ySize=t<100?t+"%":"",this.xSize=i<100?i+"%":"",this.isInvoke=!1}},update:function(){this.renderTrackSize()}},mounted:function(){this.native||(this.$nextTick(this.renderTrackSize),this.enableResizeListener&&!this.resizeListener&&window.ResizeObserver&&(this.resizeListener=new window.ResizeObserver(this.renderTrackSize),this.resizeListener.observe(this.$refs.content)))},beforeDestroy:function(){this.native||this.enableResizeListener&&this.resizeListener&&this.resizeListener.disconnect()},render:function(){var e=arguments[0],t=this.native,i=this.x,n=this.y,s=this.xSize,a=this.ySize,c=this.nsbw,u=this.handleScroll,d=this.$slots,f=(0,r.getPrefixCls)("scrollbar"),h={class:l({},""+f,!0),style:{paddingBottom:t?c+"px":""}},p={ref:"wrapper",class:l({},f+"-wrapper",!0),style:{height:"calc(100% + "+c+"px)"}},m=t?null:[e(o.default,{attrs:{direction:"x",size:s,offset:i}}),e(o.default,{attrs:{direction:"y",size:a,offset:n}})];return t||(p.style={height:"calc(100% + "+c+"px)",marginBottom:"-"+c+"px",marginRight:"-"+c+"px"},p.on={scroll:u}),e("div",h,[e("div",p,[e("div",{ref:"content",class:f+"-content"},[d.default])]),m])}};t.default=a},105:function(e,t,i){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var r=i(0);function n(e,t,i){return t in e?Object.defineProperty(e,t,{value:i,enumerable:!0,configurable:!0,writable:!0}):e[t]=i,e}var o={x:{size:"width",offset:"offsetWidth",scroll:"scrollLeft",scrollSize:"scrollWidth",client:"clientX",direction:"left",transform:function(e){return"translate3d("+e+"%, 0, 0)"}},y:{size:"height",offset:"offsetHeight",scroll:"scrollTop",scrollSize:"scrollHeight",client:"clientY",direction:"top",transform:function(e){return"translate3d(0, "+e+"%, 0)"}}},s={name:"ScrollbarTrack",props:{direction:{type:String,default:"x"},size:{type:String,default:"0"},offset:{type:Number,default:0}},inject:{yunUIScrollbarContext:{default:void 0}},data:function(){return{track:o[this.direction],thumbStartPoint:0,dragging:!1}},methods:{updateWrapperScroll:function(e,t){var i=this.track,r=i.offset,n=i.scroll,o=i.scrollSize,s=this.yunUIScrollbarContext.$refs.wrapper,l=100*(e-t)/this.$el[r];s[n]=l*s[o]/100},handleTrackClick:function(e){if(!this.dragging){var t=this.track,i=t.offset,r=t.client,n=t.direction,o=e.target.getBoundingClientRect(),s=this.$refs.thumb[i],l=Math.abs(o[n]-e[r]);this.updateWrapperScroll(l,s/2)}},handleThumbMousedown:function(e){if(!e.ctrlKey&&2!==e.button){e.stopImmediatePropagation(),this.dragging=!0;var t=this.track,i=t.client,r=t.direction,n=e.target.getBoundingClientRect();this.thumbStartPoint=e[i]-n[r],document.addEventListener("mousemove",this.handleMousemove,!1),document.addEventListener("mouseup",this.handleMouseup,!1),document.onselectstart=function(){return!1}}},handleMousemove:function(e){if(this.dragging&&this.thumbStartPoint){var t=this.track,i=t.client,r=t.direction,n=-(this.$el.getBoundingClientRect()[r]-e[i]);this.$el.classList.add("is-scrolling"),this.updateWrapperScroll(n,this.thumbStartPoint)}},handleMouseup:function(){var e=this;setTimeout((function(){e.dragging=!1})),this.thumbStartPoint=0,this.$el.classList.remove("is-scrolling"),document.onselectstart=null,document.removeEventListener("mousemove",this.handleMousemove,!1)}},beforeDestroy:function(){document.removeEventListener("mouseup",this.handleMouseup,!1)},render:function(){var e,t,i=arguments[0],o=this.track,s=this.direction,l=this.size,a=this.offset,c=this.handleTrackClick,u=this.handleThumbMousedown,d=(0,r.getPrefixCls)("scrollbar-track"),f=(0,r.getPrefixCls)("scrollbar-thumb"),h={class:(e={},n(e,""+d,!0),n(e,d+"-"+s,!0),e),on:{click:c}},p={ref:"thumb",style:(t={},n(t,o.size,l),n(t,"transform",o.transform(a)),t),class:n({},""+f,!0),on:{mousedown:u}};return i("div",h,[i("div",p)])}};t.default=s},34:function(e,t,i){"use strict";Object.defineProperty(t,"__esModule",{value:!0});t.default=function(){var e=document.createElement("div");e.style.visibility="hidden",e.style.width="100px",e.style.position="absolute",e.style.top="-9999px",document.body.appendChild(e);var t=e.offsetWidth;e.style.overflow="scroll";var i=document.createElement("div");return i.style.width="100%",e.appendChild(i),t-i.offsetWidth}}});