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

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

"use strict";const l=require("vue"),c=require("@vexip-ui/config"),L=require("@vexip-ui/hooks"),T=require("@vexip-ui/utils"),z=require("./props.cjs"),H=require("./hooks.cjs"),d=require("./symbol.cjs"),O=l.defineComponent({name:"Scrollbar",__name:"scrollbar",props:z.scrollbarProps,setup(q,{expose:P}){const x=q,t=c.useProps("scrollbar",x,{placement:{default:"right",validator:e=>d.scrollbarPlacements.includes(e)},scroll:{default:0,validator:e=>e>=0&&e<=100,static:!0},barLength:{default:35,validator:e=>e>0&&e<100},width:null,appear:!1,fade:1500,barColor:null,trackColor:null,disabled:!1,wrapper:null,duration:null,useTrack:!1,trackSpeed:{default:2,validator:e=>e>0&&e<10}}),a=c.useNameHelper("scrollbar"),f=l.ref(!1),p=l.ref(!1),{manualRef:A,triggerUpdate:v}=L.useManualRef(),{isRtl:k}=L.useRtl(),n=A(t.scroll),E=l.ref(),o=l.ref(),m=l.ref(),{timer:i}=L.useSetTimeout(),S=l.computed(()=>t.placement==="right"||t.placement==="left"?d.ScrollbarType.VERTICAL:d.ScrollbarType.HORIZONTAL),{tracking:w,handleMouseDown:C}=H.useTrack({currentScroll:n,track:m,bar:o,type:S,trackSpeed:l.toRef(t,"trackSpeed"),barLength:l.toRef(t,"barLength"),disabled:l.toRef(t,"disabled"),onDown:e=>{clearTimeout(i.fade),c.emitEvent(t.onScrollStart,e)},onUp:e=>{g(),v(),c.emitEvent(t.onScrollEnd,e)},onScroll:e=>{v(),c.emitEvent(t.onScroll,e)}}),I=l.computed(()=>[a.b(),a.bs("vars"),a.bm(t.placement),{[a.bm("inherit")]:t.inherit,[a.bm("fade")]:t.fade,[a.bm("scrolling")]:p.value,[a.bm("tracking")]:w.value,[a.bm("active")]:f.value,[a.bm("disabled")]:t.disabled}]),U=l.computed(()=>({[a.cv("bar-bg-color")]:t.barColor,[a.cv("track-bg-color")]:t.trackColor,[a.cv("width")]:t.width?`${t.width}px`:null}));l.watch(()=>t.scroll,e=>{n.value=e,v()}),l.watchEffect(()=>{if(!o.value)return;const e=`${(100-t.barLength)*n.value/t.barLength}%`,r=`${t.barLength}%`;S.value===d.ScrollbarType.VERTICAL?(o.value.style.height=r,o.value.style.transform=`translate3d(0, ${e}, 0)`):(o.value.style.width=r,o.value.style.transform=`translate3d(${k.value?"-":""}${e}, 0, 0)`)}),l.watchEffect(()=>{o.value&&(o.value.style.transitionDuration=T.isDefined(t.duration)&&t.duration>=0?`${t.duration}ms`:"")}),t.appear&&l.watch(n,()=>{clearTimeout(i.fade),f.value=!0,!p.value&&!w.value&&g()});const R=T.throttle(()=>{clearTimeout(i.fade),t.disabled?f.value=!1:(f.value=!0,!p.value&&!w.value&&g())});let u;l.onMounted(()=>{let e=l.getCurrentInstance();l.nextTick(()=>{var r,s,$;typeof t.wrapper=="string"?u=document.querySelector(t.wrapper):u=t.wrapper,u||(e!=null&&e.parent?(u=(r=e.parent.proxy)==null?void 0:r.$el,u||(u=((s=E.value)==null?void 0:s.parentElement)??null)):u=(($=E.value)==null?void 0:$.parentElement)??null),u&&t.fade>=300&&u.addEventListener("mousemove",R),e=null,t.appear||l.watch(n,()=>{clearInterval(i.fade),f.value=!0,g()})})}),l.onBeforeUnmount(()=>{u&&u.removeEventListener("mousemove",R),u=null,clearTimeout(i.fade)}),P({currentScroll:n,container:E,bar:o,track:m,handleScroll:N});let y,b,h;function V(e){if(e.button!==0||t.disabled||(e.stopPropagation(),e.preventDefault(),!m.value||!o.value))return!1;document.addEventListener("pointermove",M),document.addEventListener("pointerup",D);const r=m.value.getBoundingClientRect(),s=o.value.getBoundingClientRect();S.value===d.ScrollbarType.VERTICAL?(y=r.height,b=s.top-r.top,h=e.clientY):(y=r.width,b=k.value?s.right-r.right:s.left-r.left,h=e.clientX),clearTimeout(i.fade),p.value=!0,c.emitEvent(t.onScrollStart,n.value)}function M(e){e.stopPropagation(),T.USE_TOUCH||e.preventDefault();let r;S.value===d.ScrollbarType.VERTICAL?r=b+e.clientY-h:r=k.value?-(b+e.clientX-h):b+e.clientX-h,n.value=r/y/(100-t.barLength)*1e4,B(),v(),c.emitEvent(t.onScroll,n.value)}function D(e){e.preventDefault(),document.removeEventListener("pointermove",M),document.removeEventListener("pointerup",D),g(),p.value=!1,c.emitEvent(t.onScrollEnd,n.value)}function B(){n.value=Math.max(0,Math.min(n.value,100))}function g(){t.fade>=300&&(i.fade=setTimeout(()=>{f.value=!1},t.fade))}function N(e){Math.abs(n.value-e)<1e-4||(n.value=T.boundRange(e,0,100),v())}function _(e){e.cancelable&&(e.stopPropagation(),e.preventDefault())}return(e,r)=>(l.openBlock(),l.createElementBlock("div",{ref_key:"container",ref:E,class:l.normalizeClass(I.value),role:"scrollbar",style:l.normalizeStyle(U.value)},[l.createElementVNode("div",{ref_key:"track",ref:m,class:l.normalizeClass([l.unref(a).be("track"),l.unref(t).useTrack?null:l.unref(a).bem("track","disabled")]),onTouchstart:_,onPointerdown:r[0]||(r[0]=(...s)=>l.unref(C)&&l.unref(C)(...s))},null,34),l.createElementVNode("div",{ref_key:"bar",ref:o,class:l.normalizeClass(l.unref(a).be("bar")),onTouchstart:_,onPointerdown:V},null,34)],6))}});module.exports=O;
//# sourceMappingURL=scrollbar.vue2.cjs.map