vexip-ui/lib/components/scroll/scroll.vue2.cjs

A Vue 3 UI library, Highly customizability, full TypeScript, performance pretty good

"use strict";const t=require("vue");require("../scrollbar/index.cjs");require("../resize-observer/index.cjs");const s=require("@vexip-ui/config"),de=require("@vexip-ui/hooks"),E=require("@vexip-ui/utils"),Le=require("./props.cjs"),Ve=require("./hooks.cjs"),Y=require("./symbol.cjs"),Me=require("../resize-observer/resize-observer.cjs"),me=require("../scrollbar/scrollbar.vue2.cjs"),Ae=t.defineComponent({name:"Scroll",__name:"scroll",props:Le.scrollProps,setup(pe,{expose:he}){const ge=pe,r=s.useProps("scroll",ge,{scrollClass:null,scrollStyle:null,scrollAttrs:null,mode:{default:"vertical",validator:e=>Y.scrollModes.includes(e)},width:"",height:"",deltaX:40,deltaY:40,disabled:!1,pointer:E.USE_TOUCH,wheel:!0,scrollX:{default:0,static:!0},scrollY:{default:0,static:!0},useXBar:!1,useYBar:!1,barFade:1500,barClass:null,autoplay:!1,playWaiting:500,noBuffer:!1,noTransition:!1,onBeforeScroll:{default:null,isFunc:!0},useBarTrack:!1,scrollTag:"div"}),L=E.createEventEmitter(),c=s.useNameHelper("scroll"),{isRtl:Se}=de.useRtl(),{timer:p}=de.useSetTimeout(),V=t.ref(!1),P=t.ref(!1),u=t.ref(0),i=t.computed(()=>r.mode==="horizontal-exact"?"horizontal":r.mode);let w=180;const M=t.ref(),A=t.ref();let I=!1;const{wrapperEl:h,contentEl:y,wrapper:be,isReady:U,x:v,y:m,percentX:X,percentY:x,xScrollLimit:W,yScrollLimit:_,enableXScroll:g,enableYScroll:S,xBarLength:j,yBarLength:G,handleResize:ye,verifyScroll:z,computePercent:J,refresh:K,triggerUpdate:R}=Ve.useScrollWrapper({mode:i,disabled:t.toRef(r,"disabled"),width:t.toRef(r,"width"),height:t.toRef(r,"height"),scrollX:t.toRef(r,"scrollX"),scrollY:t.toRef(r,"scrollY"),onResize:e=>{s.emitEvent(r.onResize,e)},onAfterRefresh:()=>{B(),I||(I=!0,N())}}),Q=t.shallowReadonly({getState:Re,refresh:K,scrollTo:D,scrollBy:H,scrollToElement:fe,ensureInView:ve}),k=t.ref(!1),Ee=t.computed(()=>i.value!=="both"&&(E.isTrue(r.autoplay)||+r.autoplay>1e3)&&(i.value==="horizontal"&&g.value||i.value==="vertical"&&S.value));t.watch([()=>r.autoplay,()=>r.playWaiting],()=>{$(),t.nextTick(N)});function N(){if(!Ee.value)return;$();const e=i.value==="horizontal"?"width":"height",l=i.value==="horizontal"?W:_,n=i.value==="horizontal"?v:m,o=r.playWaiting<20?20:r.playWaiting;let a=.5;typeof r.autoplay=="number"&&(a=be[e]/r.autoplay*16);const d=()=>{J(),R(),B(),T(i.value)},f=()=>{n.value-=a,n.value<=l.value?(n.value=l.value,k.value=!1,d(),p.end=setTimeout(()=>{D(0,0,500),p.start=setTimeout(()=>{k.value=!0,T(i.value),f()},500+o)},o)):(d(),k.value&&requestAnimationFrame(f))};p.play=setTimeout(()=>{k.value=!0,f()},o)}function $(){k.value=!1,clearTimeout(p.play),clearTimeout(p.start),clearTimeout(p.end)}const Be=t.computed(()=>[c.b(),c.bs("vars"),c.bm(i.value),{[c.bm("inherit")]:r.inherit,[c.bm("using-bar")]:V.value,[c.bm("scrolling")]:P.value,[c.bm("no-ready")]:!U.value,[c.bm("no-transition")]:r.noTransition}]),we=t.computed(()=>{const{width:e,height:l}=r;return{width:e?typeof e=="string"?Number.isNaN(Number(e))?e:`${Number(e)}px`:`${e}px`:void 0,height:l?typeof l=="string"?Number.isNaN(Number(l))?l:`${Number(l)}px`:`${l}px`:void 0}}),Te=t.computed(()=>{var e;return[(e=r.scrollAttrs)==null?void 0:e.class,r.scrollClass,c.be("wrapper")]}),ze=t.computed(()=>{var e;return[(e=r.scrollAttrs)==null?void 0:e.style,r.scrollStyle]});t.watch(g,e=>{s.emitEvent(r.onXEnabledChange,e)}),t.watch(S,e=>{s.emitEvent(r.onYEnabledChange,e)}),t.watch(U,e=>{e?(u.value=-1,s.emitEvent(r.onReady)):u.value=0}),t.watchEffect(()=>{y.value&&(y.value.style.transform=`translate3d(${Se.value?-v.value:v.value}px, ${m.value}px, 0)`)}),t.watchEffect(()=>{y.value&&(y.value.style.transitionDuration=u.value<0?"":`${u.value}ms`)}),t.onMounted(()=>{if(!E.isClient||!h.value)return;const l=getComputedStyle(h.value).getPropertyValue(c.cv("move-duration")).trim();l.endsWith("ms")?w=parseFloat(l):l.endsWith("s")&&(w=parseFloat(l)*1e3),w=Number.isNaN(w)?140:w}),t.onBeforeUnmount($),he({percentX:X,percentY:x,x:v,y:m,isReady:U,xBarLength:j,yBarLength:G,enableXScroll:g,enableYScroll:S,wrapper:h,content:y,xBar:M,yBar:A,refresh:K,scrollTo:D,scrollBy:H,scrollToElement:fe,ensureInView:ve,getXScrollLimit:Ne,getYScrollLimit:$e,addScrollListener:qe,removeScrollListener:De});function b(){return{clientX:-v.value,clientY:-m.value,percentX:X.value,percentY:x.value}}function B(){var e,l;(e=M.value)==null||e.handleScroll(X.value),(l=A.value)==null||l.handleScroll(x.value)}function ke(e){if(!r.pointer||e.button>0||E.USE_TOUCH)return!1;le(e)}function Ce(e){if(!r.pointer||e.touches.length!==1)return!1;le(e)}let Z=0,ee=0,F=0,O=0,C=!1,q=null,te=0;function le(e){if(!g.value&&!S.value)return!1;e.cancelable&&e.preventDefault(),ae(),u.value=0;const l="touches"in e?e.touches[0]:e;Z=v.value,ee=m.value,F=l.clientX,O=l.clientY,C=!1,q=e.target,te=Date.now(),document.addEventListener(Y.MOVE_EVENT,re),document.addEventListener(Y.UP_EVENT,ne),s.emitEvent(r.onScrollStart,b())}function re(e){var a;e.stopPropagation(),E.USE_TOUCH||e.preventDefault();const l="touches"in e?e.touches[0]:e,n=l.clientX-F>0?1:-1,o=l.clientY-O>0?1:-1;if(((a=r.onBeforeScroll)==null?void 0:a.call(r,{signX:n,signY:o}))===!1)return!1;P.value=!0,g.value&&(v.value=Z+l.clientX-F,C=!0),S.value&&(m.value=ee+l.clientY-O,C=!0),r.noBuffer?z():(J(),R()),B(),T(i.value)}function ne(e){!C&&q&&e.target===q&&Date.now()-te<=500&&q.dispatchEvent(new MouseEvent("click",e)),document.removeEventListener(Y.MOVE_EVENT,re),document.removeEventListener(Y.UP_EVENT,ne),u.value=-1,C=!1,Ye(),z(),B(),s.emitEvent(r.onScrollEnd,b()),N()}function oe(e,l){var f;const n=S.value&&l==="vertical",o=g.value&&l==="horizontal",a=e.deltaY>0?-1:1;if(r.wheel&&(n||o)&&((f=r.onBeforeScroll)==null?void 0:f.call(r,{signX:-a,signY:-a}))!==!1)e.preventDefault(),e.stopPropagation();else return!0;if(i.value!=="both"&&i.value!==l)return!1;ae();const d=a*(l==="horizontal"?r.deltaX:r.deltaY);n?m.value+=d:o&&(v.value+=d),z(),B(),T(l),s.emitEvent(r.onWheel,{...b(),type:l,sign:-a}),N()}function ae(){$(),clearTimeout(p.buffer)}function Ye(){r.noBuffer?p.buffer=setTimeout(()=>{P.value=!1},300):P.value=!1}function ie(e){V.value=!0,s.emitEvent(r.onBarScrollStart,{...b(),type:e})}function ue(e){V.value=!1,s.emitEvent(r.onBarScrollEnd,{...b(),type:e})}function Pe(e){X.value=e,v.value=e*W.value/100,R(),s.emitEvent(r.onBarScroll,{...b(),type:"horizontal"}),T("horizontal")}function Xe(e){x.value=e,m.value=e*_.value/100,R(),s.emitEvent(r.onBarScroll,{...b(),type:"vertical"}),T("vertical")}function T(e){s.emitEvent(r.onScroll,{...b(),type:e}),L.emit("scroll",{...b(),type:e})}function xe(){h.value&&(h.value.scrollTop=0,h.value.scrollLeft=0)}function Re(){const{clientX:e,clientY:l,percentX:n,percentY:o}=b();return{scrollX:e,scrollY:l,percentX:n,percentY:o,enableXScroll:g.value,enableYScroll:S.value}}function se(e=w){return clearTimeout(p.wait),new Promise(l=>{p.wait=setTimeout(()=>l(),e+1)})}function D(e,l,n){return ce(n),t.nextTick(()=>{let o=!1;g.value&&Math.abs(v.value+e)>.01&&(v.value=-e,o=!0),S.value&&Math.abs(m.value+l)>.01&&(m.value=-l,o=!0),z(),B(),o||(u.value=-1)}),se(n)}function H(e,l,n){return ce(n),t.nextTick(()=>{let o=!1;e&&g&&(v.value-=e,o=!0),l&&S&&(m.value-=l,o=!0),z(),B(),o||(u.value=-1)}),se(n)}function ce(e){typeof e=="number"&&(u.value=e,u.value===0&&t.nextTick(()=>{u.value=-1}))}function fe(e,l,n=0){if(!y.value||(typeof e=="string"&&(e=y.value.querySelector(e)),!E.isElement(e)))return Promise.resolve();const o=y.value.getBoundingClientRect(),a=e.getBoundingClientRect();let d=0,f=0;return i.value!=="vertical"&&(d=a.left-o.left+n),i.value!=="horizontal"&&(f=a.top-o.top+n),D(d,f,l)}function ve(e,l,n=0){if(!h.value||(typeof e=="string"&&(e=h.value.querySelector(e)),!E.isElement(e)))return Promise.resolve();const o=h.value.getBoundingClientRect(),a=e.getBoundingClientRect();let d=0,f=0;return i.value!=="vertical"&&(a.left<o.left+n?d=a.left-o.left-n:a.right>o.right-n&&(d=a.right-o.right+n)),i.value!=="horizontal"&&(a.top<o.top+n?f=a.top-o.top-n:a.bottom>o.bottom-n&&(f=a.bottom-o.bottom+n)),H(d,f,l)}function Ne(){return[0,-W.value]}function $e(){return[0,-_.value]}function qe(e){L.on("scroll",e)}function De(e){L.off("scroll",e)}return(e,l)=>(t.openBlock(),t.createElementBlock("div",{ref_key:"wrapperEl",ref:h,class:t.normalizeClass(Be.value),style:t.normalizeStyle(we.value),onMousedown:ke,onTouchstart:Ce,onScroll:xe,onWheel:[l[5]||(l[5]=t.withModifiers(n=>oe(n,t.unref(r).mode==="horizontal-exact"?"horizontal":"vertical"),["exact"])),l[6]||(l[6]=t.withModifiers(n=>oe(n,"horizontal"),["shift"]))]},[e.$slots.extra?(t.openBlock(),t.createElementBlock("div",{key:0,class:t.normalizeClass(t.unref(c).be("extra"))},[t.renderSlot(e.$slots,"extra",t.normalizeProps(t.guardReactiveProps(t.unref(Q))))],2)):t.createCommentVNode("",!0),t.createVNode(t.unref(Me),{throttle:"","on-resize":t.unref(ye)},{default:t.withCtx(()=>[(t.openBlock(),t.createBlock(t.resolveDynamicComponent(t.unref(r).scrollTag||"div"),t.mergeProps(t.unref(r).scrollAttrs,{ref_key:"contentEl",ref:y,class:Te.value,style:ze.value,onTransitionend:l[0]||(l[0]=n=>u.value=-1)}),{default:t.withCtx(()=>[t.renderSlot(e.$slots,"default",t.normalizeProps(t.guardReactiveProps(t.unref(Q))))]),_:3},16,["class","style"]))]),_:3},8,["on-resize"]),t.unref(r).useXBar?(t.openBlock(),t.createBlock(t.unref(me),{key:1,ref_key:"xBar",ref:M,inherit:"",placement:"bottom",class:t.normalizeClass([t.unref(c).bem("bar","horizontal"),t.unref(r).barClass]),fade:t.unref(r).barFade,"bar-length":t.unref(j),disabled:!t.unref(g),duration:u.value,"use-track":t.unref(r).useBarTrack,onScrollStart:l[1]||(l[1]=n=>ie("horizontal")),onScroll:Pe,onScrollEnd:l[2]||(l[2]=n=>ue("horizontal"))},null,8,["class","fade","bar-length","disabled","duration","use-track"])):t.createCommentVNode("",!0),t.unref(r).useYBar?(t.openBlock(),t.createBlock(t.unref(me),{key:2,ref_key:"yBar",ref:A,inherit:"",placement:"right",class:t.normalizeClass([t.unref(c).bem("bar","vertical"),t.unref(r).barClass]),fade:t.unref(r).barFade,"bar-length":t.unref(G),disabled:!t.unref(S),duration:u.value,"use-track":t.unref(r).useBarTrack,onScrollStart:l[3]||(l[3]=n=>ie("vertical")),onScroll:Xe,onScrollEnd:l[4]||(l[4]=n=>ue("vertical"))},null,8,["class","fade","bar-length","disabled","duration","use-track"])):t.createCommentVNode("",!0)],38))}});module.exports=Ae;
//# sourceMappingURL=scroll.vue2.cjs.map