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

A scroll rect component for Vue3

(function(c,t){typeof exports=="object"&&typeof module<"u"?t(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],t):(c=typeof globalThis<"u"?globalThis:c||self,t(c["vue-scroll-rect"]={},c.Vue))})(this,function(c,t){"use strict";var Ze=Object.defineProperty;var el=(c,t,w)=>t in c?Ze(c,t,{enumerable:!0,configurable:!0,writable:!0,value:w}):c[t]=w;var j=(c,t,w)=>el(c,typeof t!="symbol"?t+"":t,w);class w{constructor(u,a){j(this,"x",0);j(this,"y",0);this.x=u||0,this.y=a||0}set(u,a){this.x=u,this.y=a}substract(u){this.x-=u.x,this.y-=u.y}}function V(n){const{onDown:u,onMove:a,onUp:o}=n,i=new w,l=new w;let g;function m(f){f.stopPropagation(),l.set(f.x,f.y),l.substract(i),a(i,l,f,g)}function S(f){o(f,g),i.set(0,0),document.removeEventListener("mousemove",m),document.removeEventListener("mouseup",S)}return(f,k)=>u(f,k)?(g=k,i.set(f.x,f.y),document.addEventListener("mousemove",m),document.addEventListener("mouseup",S),f.stopPropagation(),!0):!1}function be(n){const{onDown:u,onUp:a}=n;function o(i){a(i),document.removeEventListener("mouseup",o)}return i=>u(i)?(document.addEventListener("mouseup",o),i.preventDefault(),i.stopPropagation(),!0):!1}function we(n,u){let a=0;return{start(){a>0&&clearTimeout(a),a=setTimeout(()=>{a=0,u()},n)},stop(){a>0&&(clearTimeout(a),a=0)}}}function q(n,u){let a=0;return{start(){a>0&&clearInterval(a),a=setInterval(()=>{a=0,u()},n)},stop(){a>0&&(clearInterval(a),a=0)}}}function X(n,u){let a=null,o=0;return function(...i){const l=Date.now(),g=l-o,m=u-g;m<=0?(o=l,n.apply(this,i)):(a!==null&&window.clearTimeout(a),a=window.setTimeout(()=>{o=Date.now(),a=null,n.apply(this,i)},m))}}const y=[],F=q(100,()=>{for(const n of y)n()});function J(n,u,a,o){let i=0,l=0;function g(){n.value&&(u&&i!==n.value.offsetWidth&&u(n.value.offsetWidth),a&&l!==n.value.offsetHeight&&a(n.value.offsetHeight),o&&(i!==n.value.offsetWidth||l!==n.value.offsetHeight)&&o(n.value.offsetWidth,n.value.offsetHeight),i=n.value.offsetWidth,l=n.value.offsetHeight)}return{startResizeChecker(){F.start(),y.push(g)},stopResizeChecker(){const m=y.indexOf(g);m>=0&&y.splice(m,1),y.length===0&&F.stop()}}}const Se=(n,u)=>{const a=n.__vccOpts||n;for(const[o,i]of u)a[o]=i;return a},ke={},ye={viewBox:"0 0 1024 1024"};function Pe(n,u){return t.openBlock(),t.createElementBlock("svg",ye,u[0]||(u[0]=[t.createElementVNode("path",{d:"M188.274526 257.534448l0-97.428983 645.061528 0 0 97.428983L188.274526 257.534448zM252.732583 515.366677l255.82655-226.355331 260.329097 226.355331-192.371332 0 0 192.362122 0 161.89625-130.911562 0 0-354.258373L252.732583 515.366677z",fill:"currentColor"},null,-1)]))}const Re=Se(ke,[["render",Pe]]),Be={class:"pull-refresh-track-inner"},Ce={class:"pull-refresh-default"},ze={key:0,class:"pull-refresh-default-spinner","aria-hidden":"true"},Le={class:"pull-refresh-default-text"},De=["aria-hidden","tabindex"],He=8,Me=140,We=120,K=t.defineComponent({__name:"ScrollRect",props:{scroll:{default:"both"},scrollBarAlwaysShow:{type:Boolean,default:!1},scrollBarBackgroundClickable:{type:Boolean,default:!0},containerClass:{default:""},containerStyle:{},width:{},height:{},maxWidth:{},maxHeight:{},scrollToStartThreshold:{default:50},scrollToEndThreshold:{default:50},enablePullToRefresh:{type:Boolean,default:!1},pullToRefreshThreshold:{default:50},pullToRefreshLoading:{type:Boolean,default:!1},pullRefreshLoadingHeight:{default:48},pullRefreshMaxDistance:{default:120},enableBackToTop:{type:Boolean,default:!1},backToTopThreshold:{default:120}},emits:["scroll","resized","scrollToStart","scrollToEnd","pullToRefreshStart","pullToRefreshEnd","update:pullToRefreshLoading"],setup(n,{expose:u,emit:a}){const o=n,i=a,l=t.ref(),g=t.ref(),m=t.ref(),S=t.ref(),f=t.ref(),k=t.ref(),P=t.ref(!1),Ye=t.computed(()=>o.scroll==="horizontal"||o.scroll==="both"),b=t.computed(()=>o.scroll==="vertical"||o.scroll==="both"),p=t.reactive({show:!1,size:0,sizeRaw:0,pos:0}),h=t.reactive({show:!1,size:0,sizeRaw:0,pos:0});function z(e){return typeof e=="number"?`${e}px`:/^\d+$/.test(e)?`${e}px`:e}const x=t.ref(0),N=t.ref(0),L=t.computed(()=>{if(!o.enableBackToTop)return!1;const e=o.backToTopThreshold,r=o.scroll;return r==="vertical"?x.value>e:r==="horizontal"?N.value>e:r==="both"?x.value>e||N.value>e:!1}),d=t.ref(0),D=t.ref(!0),v=t.ref(null),T=t.ref(!1),I=t.ref(0),$=t.computed(()=>o.pullToRefreshThreshold),Q=t.computed(()=>o.pullRefreshLoadingHeight),A=t.computed(()=>o.pullToRefreshLoading?"loading":d.value<=.5?"idle":d.value>=$.value?"release":"pulling"),Ve=t.computed(()=>o.pullToRefreshLoading?Q.value:d.value),Xe=t.computed(()=>{switch(A.value){case"loading":return"加载中…";case"release":return"释放加载";case"pulling":return"下拉加载";default:return"下拉加载"}}),xe=t.computed(()=>d.value>0);function Z(e){const r=o.pullRefreshMaxDistance,s=Math.min(Math.max(e,0),r*2);return r*(1-Math.exp(-s/(r*.9)))}function Ne(e){!o.enablePullToRefresh||!b.value||o.pullToRefreshLoading||!l.value||l.value.scrollTop>1||e.pointerType==="mouse"&&e.button!==0||(v.value=e.pointerId,T.value=!1,I.value=e.clientY,D.value=!1)}function R(){if(v.value===null)return;const e=v.value,r=T.value;if(v.value=null,T.value=!1,d.value=0,D.value=!0,r&&l.value)try{l.value.releasePointerCapture(e)}catch{}}function ee(e){if(v.value===null||e.pointerId!==v.value||!o.enablePullToRefresh||!b.value||o.pullToRefreshLoading||!l.value)return;if(!T.value){if(l.value.scrollTop>.1){R();return}const s=e.clientY-I.value;if(s<-8){R();return}if(s<He)return;T.value=!0;try{e.currentTarget.setPointerCapture(e.pointerId)}catch{T.value=!1,R();return}d.value=Z(s*.55),e.preventDefault();return}if(l.value.scrollTop>.1){d.value=0,_();return}const r=e.clientY-I.value;if(r<=0){d.value=0,_();return}e.preventDefault(),d.value=Z(r*.55)}function le(e){if(!(v.value===null||e.pointerId!==v.value)){if(!T.value){R();return}te()}}function _(e,r){if(v.value===null)return;const s=v.value,E=T.value;if(v.value=null,T.value=!1,D.value=!0,d.value=0,E&&l.value)try{l.value.releasePointerCapture(s)}catch{}}function Ie(e){v.value===null||e.pointerId!==v.value||(T.value?te():R())}function te(e){const r=T.value,s=d.value;_(),r&&!o.pullToRefreshLoading&&s>=$.value&&i("pullToRefreshStart"),d.value=0}let H=!1;function oe(){H||!l.value||!o.enablePullToRefresh||!b.value||(l.value.addEventListener("pointermove",ee,{passive:!1}),H=!0)}function re(){!H||!l.value||(l.value.removeEventListener("pointermove",ee),H=!1)}t.watch(()=>o.pullToRefreshLoading,(e,r)=>{r===!0&&e===!1&&(i("pullToRefreshEnd"),d.value=0)}),t.watch(()=>o.enablePullToRefresh&&b.value,e=>{e?t.nextTick(()=>oe()):(d.value=0,v.value=null,T.value=!1,t.nextTick(()=>re()))});let O=0,U=0,ae=0,ne=0,B=null;const $e={attributes:!0,childList:!0};function se(e){if(l.value){if(x.value=l.value.scrollTop,N.value=l.value.scrollLeft,p.show){const r=l.value.offsetWidth/l.value.scrollWidth;p.sizeRaw=r*l.value.offsetWidth,p.size=r*100,p.pos=l.value.scrollLeft/(l.value.scrollWidth-l.value.offsetWidth)*(100-p.size),r>=1&&(p.show=!1)}if(h.show){const r=l.value.offsetHeight/l.value.scrollHeight;h.sizeRaw=r*l.value.offsetHeight,h.size=r*100,h.pos=l.value.scrollTop/(l.value.scrollHeight-l.value.offsetHeight)*(100-h.size),r>=1&&(h.show=!1)}e==="scroll"&&(o.scroll==="vertical"?(o.scrollToStartThreshold&&l.value.scrollTop<=o.scrollToStartThreshold&&i("scrollToStart"),o.scrollToEndThreshold&&l.value.scrollTop>=l.value.scrollHeight-o.scrollToEndThreshold-l.value.offsetHeight&&i("scrollToEnd")):o.scroll==="horizontal"&&(o.scrollToStartThreshold&&l.value.scrollLeft<=o.scrollToStartThreshold&&i("scrollToStart"),o.scrollToEndThreshold&&l.value.scrollLeft>=l.value.scrollWidth-o.scrollToEndThreshold-l.value.offsetWidth&&i("scrollToEnd")),i("scroll",l.value.scrollLeft,l.value.scrollTop))}}function C(e,r=!1){if(!l.value)return;let s=Ye.value,E=b.value;const Ke=s&&(O!==l.value.scrollWidth||ae!==l.value.offsetWidth),Qe=b&&(U!==l.value.scrollHeight||ne!==l.value.offsetHeight);if(!r&&!Ke&&!Qe)return;const Y=window.getComputedStyle(l.value);(Y.overflow==="hidden"||Y.overflowX==="hidden")&&(s=!1),(Y.overflow==="hidden"||Y.overflowY==="hidden")&&(E=!1),p.show=s,h.show=E,se(e),ae=l.value.offsetWidth,ne=l.value.offsetHeight,O=l.value.scrollWidth,U=l.value.scrollHeight,i("resized",O,U)}function Ae(e){se("scroll")}const ie=X(e=>{var r;(r=l.value)==null||r.scrollTo({left:l.value.scrollLeft+(e?Me:-140),behavior:"smooth"})},120),_e=X(e=>{var r;(r=l.value)==null||r.scrollTo({top:l.value.scrollTop+(e?We:-120),behavior:"smooth"})},20);function Oe(e){o.scroll=="horizontal"&&(e.deltaMode==0&&ie(e.deltaY>0),e.preventDefault(),e.stopPropagation())}function ue(e){e.deltaMode==0&&(ie(e.deltaY>0),e.preventDefault(),e.stopPropagation())}function ce(e){e.deltaMode==0&&(_e(e.deltaY>0),e.preventDefault(),e.stopPropagation())}let fe=0,de=0,he=0,ve=0,M=!1,W=!1;const pe=V({onDown(e){return!m.value||!f.value?!1:(fe=e.offsetX,de=e.x-e.offsetX-f.value.offsetLeft,e.preventDefault(),e.stopPropagation(),P.value=!0,M=!1,!0)},onMove(e,r,s){l.value&&m.value&&(Te(s.x-fe-de),s.preventDefault(),s.stopPropagation(),M=!0)},onUp(){P.value=!1}}),me=V({onDown(e){return!S.value||!k.value?!1:(he=e.offsetY,ve=e.y-e.offsetY-k.value.offsetTop,e.preventDefault(),e.stopPropagation(),P.value=!0,W=!1,!0)},onMove(e,r,s){l.value&&S.value&&(ge(s.y-he-ve),s.preventDefault(),s.stopPropagation(),W=!0)},onUp(){P.value=!1}});function Ue(e){l.value&&(l.value.scrollLeft=e/100*(l.value.scrollWidth-l.value.offsetWidth))}function Ge(e){l.value&&(l.value.scrollLeft=e/100*(l.value.scrollHeight-l.value.offsetHeight))}function Te(e){l.value&&(e=Math.max(0,e),l.value.scrollLeft=e/(l.value.offsetWidth-p.sizeRaw)*(l.value.scrollWidth-l.value.offsetWidth))}function ge(e){l.value&&(e=Math.max(0,e),l.value.scrollTop=e/(l.value.offsetHeight-h.sizeRaw)*(l.value.scrollHeight-l.value.offsetHeight))}function je(e){if(o.scrollBarBackgroundClickable){if(M){M=!1;return}Te(e.offsetX-p.sizeRaw/2)}}function qe(e){if(o.scrollBarBackgroundClickable){if(W){W=!1;return}ge(e.offsetY-h.sizeRaw/2)}}const{startResizeChecker:Fe,stopResizeChecker:Je}=J(l,()=>C("layout"),()=>C("layout"));t.onMounted(()=>{t.nextTick(()=>{setTimeout(()=>C("layout",!0),200),Fe(),B=new MutationObserver(()=>C("layout")),B.observe(l.value,$e),oe()})}),t.onBeforeUnmount(()=>{re(),Je(),B&&(B.disconnect(),B=null)});const G={refreshScrollState(){C("layout",!0)},getScrollContainer(){return l.value},scrollTo(e,r){var s;(s=l.value)==null||s.scrollTo(e,r)},scrollToStart(){var e;(e=l.value)==null||e.scrollTo(0,0)},scrollToEnd(){var e;(e=l.value)==null||e.scrollTo(l.value.scrollWidth,l.value.scrollHeight)}};return u(G),(e,r)=>(t.openBlock(),t.createElementBlock("div",{ref_key:"scrollrect",ref:g,class:t.normalizeClass(["vue-scroll-rect",e.scrollBarAlwaysShow?"always-show-scrollbar":"",e.scrollBarBackgroundClickable?"background-clickable":"",P.value?"dragging":"",xe.value?"pulling":""]),style:t.normalizeStyle({width:e.width?z(e.width):void 0,height:e.height?z(e.height):void 0}),onWheel:Oe},[t.createElementVNode("div",{ref_key:"container",ref:l,class:t.normalizeClass(["scroll-content",e.scroll,e.containerClass,{"pull-refresh-enabled":e.enablePullToRefresh&&b.value}]),style:t.normalizeStyle({maxWidth:e.maxWidth?z(e.maxWidth):void 0,maxHeight:e.maxHeight?z(e.maxHeight):void 0,...e.containerStyle}),onScroll:Ae,onPointerdown:Ne,onPointerup:le,onPointercancel:le,onLostpointercapture:Ie},[e.enablePullToRefresh&&b.value?(t.openBlock(),t.createElementBlock("div",{key:0,class:t.normalizeClass(["pull-refresh-track",{"is-transition":D.value}]),style:t.normalizeStyle({height:`${Ve.value}px`}),"aria-hidden":"true"},[t.createElementVNode("div",Be,[t.renderSlot(e.$slots,"pullRefresh",{state:A.value,distance:d.value,threshold:$.value,loading:e.pullToRefreshLoading,loadingHeight:Q.value},()=>[t.createElementVNode("div",Ce,[A.value==="loading"?(t.openBlock(),t.createElementBlock("span",ze)):t.createCommentVNode("",!0),t.createElementVNode("span",Le,t.toDisplayString(Xe.value),1)])])])],6)):t.createCommentVNode("",!0),t.renderSlot(e.$slots,"default")],38),e.enableBackToTop?t.renderSlot(e.$slots,"backToTop",{key:0,onBackToTop:G.scrollToStart,visible:L.value},()=>[t.createElementVNode("button",{type:"button",class:t.normalizeClass(["back-to-top-button",{"is-visible":L.value}]),"aria-hidden":!L.value,tabindex:L.value?0:-1,onClick:r[0]||(r[0]=s=>G.scrollToStart())},[t.createVNode(Re)],10,De)]):t.createCommentVNode("",!0),p.show?t.renderSlot(e.$slots,"scrollBarX",{key:1,scrollBarValue:p,onScroll:Ue},()=>[t.createElementVNode("div",{ref_key:"scrollBarRefX",ref:m,class:"scrollbar horizontal",onClick:je,onWheel:ue},[t.createElementVNode("div",{class:"thumb",ref_key:"scrollBarThumbRefX",ref:f,style:t.normalizeStyle({left:`${p.pos}%`,width:`${p.size}%`}),onMousedown:r[1]||(r[1]=(...s)=>t.unref(pe)&&t.unref(pe)(...s)),onWheel:ue},null,36)],544)]):t.createCommentVNode("",!0),h.show?t.renderSlot(e.$slots,"scrollBarY",{key:2,scrollBarValue:h,onScroll:Ge},()=>[h.show?(t.openBlock(),t.createElementBlock("div",{key:0,ref_key:"scrollBarRefY",ref:S,class:"scrollbar vertical",onClick:qe,onWheel:ce},[t.createElementVNode("div",{class:"thumb",ref_key:"scrollBarThumbRefY",ref:k,style:t.normalizeStyle({top:`${h.pos}%`,height:`${h.size}%`}),onMousedown:r[2]||(r[2]=(...s)=>t.unref(me)&&t.unref(me)(...s)),onWheel:ce},null,36)],544)):t.createCommentVNode("",!0)]):t.createCommentVNode("",!0)],38))}}),Ee={install(n){n.component("scroll-rect",K)}};c.ScrollRect=K,c.createMiniTimeOut=we,c.createMiniTimer=q,c.createMouseDownAndUpHandler=be,c.createMouseDragHandler=V,c.default=Ee,c.throttle=X,c.useResizeChecker=J,Object.defineProperties(c,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})});
//# sourceMappingURL=vue-scroll-rect.umd.js.map