@imengyu/vue-scroll-rect/lib/vue-scroll-rect.umd.js

A scroll rect component for Vue3

(function(a,t){typeof exports=="object"&&typeof module<"u"?t(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],t):(a=typeof globalThis<"u"?globalThis:a||self,t(a["vue-scroll-rect"]={},a.Vue))})(this,function(a,t){"use strict";var ie=Object.defineProperty;var ce=(a,t,g)=>t in a?ie(a,t,{enumerable:!0,configurable:!0,writable:!0,value:g}):a[t]=g;var C=(a,t,g)=>ce(a,typeof t!="symbol"?t+"":t,g);class g{constructor(n,r){C(this,"x",0);C(this,"y",0);this.x=n||0,this.y=r||0}set(n,r){this.x=n,this.y=r}substract(n){this.x-=n.x,this.y-=n.y}}function k(o){const{onDown:n,onMove:r,onUp:u}=o,i=new g,e=new g;let m;function v(f){f.stopPropagation(),e.set(f.x,f.y),e.substract(i),r(i,e,f,m)}function p(f){u(f,m),i.set(0,0),document.removeEventListener("mousemove",v),document.removeEventListener("mouseup",p)}return(f,w)=>n(f,w)?(m=w,i.set(f.x,f.y),document.addEventListener("mousemove",v),document.addEventListener("mouseup",p),f.stopPropagation(),!0):!1}function F(o){const{onDown:n,onUp:r}=o;function u(i){r(i),document.removeEventListener("mouseup",u)}return i=>n(i)?(document.addEventListener("mouseup",u),i.preventDefault(),i.stopPropagation(),!0):!1}function G(o,n){let r=0;return{start(){r>0&&clearTimeout(r),r=setTimeout(()=>{r=0,n()},o)},stop(){r>0&&(clearTimeout(r),r=0)}}}function H(o,n){let r=0;return{start(){r>0&&clearInterval(r),r=setInterval(()=>{r=0,n()},o)},stop(){r>0&&(clearInterval(r),r=0)}}}const y=[],D=H(100,()=>{for(const o of y)o()});function R(o,n,r,u){let i=0,e=0;function m(){o.value&&(n&&i!==o.value.offsetWidth&&n(o.value.offsetWidth),r&&e!==o.value.offsetHeight&&r(o.value.offsetHeight),u&&(i!==o.value.offsetWidth||e!==o.value.offsetHeight)&&u(o.value.offsetWidth,o.value.offsetHeight),i=o.value.offsetWidth,e=o.value.offsetHeight)}return{startResizeChecker(){D.start(),y.push(m)},stopResizeChecker(){const v=y.indexOf(m);v>=0&&y.splice(v,1),y.length===0&&D.stop()}}}const Y=140,J=70,x=t.defineComponent({__name:"ScrollRect",props:{scroll:{type:String,default:"both"},scrollBarAlwaysShow:{type:Boolean,default:!1},scrollBarBackgroundClickable:{type:Boolean,default:!1},height:{type:Number,default:void 0},width:{type:Number,default:void 0},maxHeight:{type:Number,default:void 0},maxWidth:{type:Number,default:void 0},containerClass:{type:String,default:""},containerStyle:{type:null}},emits:["scroll","resized"],setup(o,{expose:n,emit:r}){const u=o,i=r,e=t.ref(),m=t.ref(),v=t.ref(),p=t.ref(),f=t.ref(),w=t.ref(),b=t.ref(!1),Q=t.computed(()=>u.scroll==="horizontal"||u.scroll==="both"),M=t.computed(()=>u.scroll==="vertical"||u.scroll==="both"),h=t.reactive({show:!1,size:0,sizeRaw:0,pos:0}),d=t.reactive({show:!1,size:0,sizeRaw:0,pos:0});let W=0,T=0,L=0,P=0,z=null;const Z={attributes:!0,childList:!0};function X(){if(e.value){if(h.show){const l=e.value.offsetWidth/e.value.scrollWidth;h.sizeRaw=l*e.value.offsetWidth,h.size=l*100,h.pos=e.value.scrollLeft/(e.value.scrollWidth-e.value.offsetWidth)*(100-h.size),l>=1&&(h.show=!1)}if(d.show){const l=e.value.offsetHeight/e.value.scrollHeight;d.sizeRaw=l*e.value.offsetHeight,d.size=l*100,d.pos=e.value.scrollTop/(e.value.scrollHeight-e.value.offsetHeight)*(100-d.size),l>=1&&(d.show=!1)}i("scroll",e.value.scrollLeft,e.value.scrollTop)}}function S(l=!1){if(!e.value)return;let s=Q.value,c=M.value;const ae=s&&(W!==e.value.scrollWidth||L!==e.value.offsetWidth),ne=M&&(T!==e.value.scrollHeight||P!==e.value.offsetHeight);if(!l&&!ae&&!ne)return;const B=window.getComputedStyle(e.value);(B.overflow==="hidden"||B.overflowX==="hidden")&&(s=!1),(B.overflow==="hidden"||B.overflowY==="hidden")&&(c=!1),h.show=s,d.show=c,X(),L=e.value.offsetWidth,P=e.value.offsetHeight,W=e.value.scrollWidth,T=e.value.scrollHeight,i("resized",W,T)}function _(l){var s;u.scroll=="horizontal"&&(l.deltaMode==0&&((s=e.value)==null||s.scrollTo({left:e.value.scrollLeft+(l.deltaY>0?Y:-140),behavior:"smooth"})),l.preventDefault(),l.stopPropagation())}function V(l){var s;l.deltaMode==0&&((s=e.value)==null||s.scrollTo({left:e.value.scrollLeft+(l.deltaY>0?Y:-140),behavior:"smooth"}),l.preventDefault(),l.stopPropagation())}function E(l){var s;l.deltaMode==0&&((s=e.value)==null||s.scrollTo({top:e.value.scrollTop+(l.deltaY>0?J:-70),behavior:"smooth"}),l.preventDefault(),l.stopPropagation())}let N=0,$=0,O=0,U=0;const A=k({onDown(l){return!v.value||!f.value?!1:(N=l.offsetX,$=l.x-l.offsetX-f.value.offsetLeft,l.preventDefault(),b.value=!0,!0)},onMove(l,s,c){e.value&&v.value&&(j(c.x-N-$),c.preventDefault(),c.stopPropagation())},onUp(){b.value=!1}}),I=k({onDown(l){return!p.value||!w.value?!1:(O=l.offsetY,U=l.y-l.offsetY-w.value.offsetTop,l.preventDefault(),b.value=!0,!0)},onMove(l,s,c){e.value&&p.value&&(q(c.y-O-U),c.preventDefault(),c.stopPropagation())},onUp(){b.value=!1}});function ee(l){e.value&&(e.value.scrollLeft=l/100*(e.value.scrollWidth-e.value.offsetWidth))}function le(l){e.value&&(e.value.scrollLeft=l/100*(e.value.scrollHeight-e.value.offsetHeight))}function j(l){e.value&&(e.value.scrollLeft=l/(e.value.offsetWidth-h.sizeRaw)*(e.value.scrollWidth-e.value.offsetWidth))}function q(l){e.value&&(e.value.scrollTop=l/(e.value.offsetHeight-d.sizeRaw)*(e.value.scrollHeight-e.value.offsetHeight))}function te(l){u.scrollBarBackgroundClickable&&j(l.offsetX-h.sizeRaw/2)}function oe(l){u.scrollBarBackgroundClickable&&q(l.offsetY-d.sizeRaw/2)}const{startResizeChecker:re,stopResizeChecker:se}=R(e,()=>S(),()=>S());return t.onMounted(()=>{t.nextTick(()=>{setTimeout(()=>S(!0),200),S(!0),re(),z=new MutationObserver(()=>S()),z.observe(e.value,Z)})}),t.onBeforeUnmount(()=>{se(),z&&(z.disconnect(),z=null)}),n({refreshScrollState(){S(!0)},getScrollContainer(){return e.value},scrollTo(l,s){var c;(c=e.value)==null||c.scrollTo(l,s)},scrollToTop(){var l;(l=e.value)==null||l.scrollTo(0,0)},scrollToBottom(){var l;(l=e.value)==null||l.scrollTo(e.value.scrollWidth,e.value.scrollHeight)}}),(l,s)=>(t.openBlock(),t.createElementBlock("div",{ref_key:"scrollrect",ref:m,class:t.normalizeClass(["vue-scroll-rect",o.scrollBarAlwaysShow?"always-show-scrollbar":"",o.scrollBarBackgroundClickable?"background-clickable":"",b.value?"dragging":""]),style:t.normalizeStyle({width:o.width?`${o.width}px`:void 0,height:o.height?`${o.height}px`:void 0}),onWheel:_},[t.createElementVNode("div",{ref_key:"container",ref:e,class:t.normalizeClass(["scroll-content",o.scroll,o.containerClass]),style:t.normalizeStyle({maxWidth:o.maxWidth?`${o.maxWidth}px`:void 0,maxHeight:o.maxHeight?`${o.maxHeight}px`:void 0,...o.containerStyle}),onScroll:X},[t.renderSlot(l.$slots,"default")],38),h.show?t.renderSlot(l.$slots,"scrollBarX",{key:0,scrollBarValue:h,onScroll:ee},()=>[t.createElementVNode("div",{ref_key:"scrollBarRefX",ref:v,class:"scrollbar horizontal",onClick:te,onWheel:V},[t.createElementVNode("div",{class:"thumb",ref_key:"scrollBarThumbRefX",ref:f,style:t.normalizeStyle({left:`${h.pos}%`,width:`${h.size}%`}),onMousedown:s[0]||(s[0]=(...c)=>t.unref(A)&&t.unref(A)(...c)),onWheel:V},null,36)],544)]):t.createCommentVNode("",!0),d.show?t.renderSlot(l.$slots,"scrollBarY",{key:1,scrollBarValue:d,onScroll:le},()=>[d.show?(t.openBlock(),t.createElementBlock("div",{key:0,ref_key:"scrollBarRefY",ref:p,class:"scrollbar vertical",onClick:oe,onWheel:E},[t.createElementVNode("div",{class:"thumb",ref_key:"scrollBarThumbRefY",ref:w,style:t.normalizeStyle({top:`${d.pos}%`,height:`${d.size}%`}),onMousedown:s[1]||(s[1]=(...c)=>t.unref(I)&&t.unref(I)(...c)),onWheel:E},null,36)],544)):t.createCommentVNode("",!0)]):t.createCommentVNode("",!0)],38))}}),K={install(o){o.component("scroll-rect",x)}};a.ScrollRect=x,a.createMiniTimeOut=G,a.createMiniTimer=H,a.createMouseDownAndUpHandler=F,a.createMouseDragHandler=k,a.default=K,a.useResizeChecker=R,Object.defineProperties(a,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})});
//# sourceMappingURL=vue-scroll-rect.umd.js.map