vue-amazing-ui/lib/scrollbar/Scrollbar.vue2.cjs

An Amazing Vue3 UI Components Library, Using TypeScript.

"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("vue"),b=require("../utils/index.cjs"),Me=e.defineComponent({__name:"Scrollbar",props:{contentClass:{default:void 0},contentStyle:{default:()=>({})},size:{default:5},trigger:{default:"hover"},autoHide:{type:Boolean,default:!1},delay:{default:0},xScrollable:{type:Boolean,default:!1},yScrollable:{type:Boolean,default:!0},xPlacement:{default:"bottom"},yPlacement:{default:"right"}},emits:["scroll","scrollend"],setup(o,{expose:te,emit:ae}){const a=o,r=e.ref(),k=e.ref(),q=e.ref(),F=e.ref(),d=e.ref(!1),m=e.ref(!1),T=e.ref(0),E=e.ref(0),$=e.ref(0),C=e.ref(0),i=e.ref(0),v=e.ref(0),s=e.ref(0),f=e.ref(0),g=e.ref(0),H=e.ref(0),z=e.ref(0),W=e.ref(0),L=e.ref(!1),h=e.ref(!1),p=e.ref(!1),S=e.ref(!1),I=e.ref(0),O=e.ref(0),j=e.ref(0),A=e.ref(0),oe={width:"fit-content"},M=e.ref(!1),P=e.ref(!1),w=ae,n=e.computed(()=>a.trigger==="hover"),G=e.computed(()=>T.value>$.value),J=e.computed(()=>E.value>C.value),B=e.computed(()=>T.value||E.value?a.yScrollable&&G.value||a.xScrollable&&J.value:!0),R=e.computed(()=>{if(a.yScrollable&&G.value&&i.value&&s.value&&g.value){const l=Math.min(i.value,g.value*i.value/s.value+1.5*a.size);return Number(l.toFixed(4))}return 0}),re=e.computed(()=>i.value&&s.value&&g.value?z.value/(s.value-i.value)*(g.value-R.value):0),ne=e.computed(()=>({top:`${re.value}px`,height:`${R.value}px`})),N=e.computed(()=>{if(a.xScrollable&&J.value&&v.value&&f.value&&H.value){const l=H.value*v.value/f.value+1.5*a.size;return Number(l.toFixed(4))}return 0}),ue=e.computed(()=>v.value&&f.value&&H.value?W.value/(f.value-v.value)*(H.value-N.value):0),ie=e.computed(()=>({left:`${ue.value}px`,width:`${N.value}px`}));e.onMounted(()=>{le()});const{left:K,right:Q,top:Z,bottom:_}=b.useScroll(r);b.useResizeObserver([r,k],le);function ee(){z.value=r.value.scrollTop,W.value=r.value.scrollLeft}function ce(){T.value=r.value.scrollHeight,E.value=r.value.scrollWidth,$.value=r.value.clientHeight,C.value=r.value.clientWidth,i.value=r.value.offsetHeight,v.value=r.value.offsetWidth,s.value=k.value.offsetHeight,f.value=k.value.offsetWidth,g.value=q.value.offsetHeight,H.value=F.value.offsetWidth}function le(){ee(),ce()}const ve=b.debounce(fe,100),se=b.debounce(de,100),y=b.debounce(me,100+a.delay),x=b.debounce(he,100+a.delay);function fe(l,t){w("scrollend",l,t)}function de(l,t){w("scrollend",l,t)}function me(){n.value&&(a.autoHide&&!M.value&&(d.value=!1),!a.autoHide&&!L.value&&(d.value=!1))}function he(){n.value&&(a.autoHide&&!P.value&&(m.value=!1),!a.autoHide&&!L.value&&(m.value=!1))}function pe(l){if(K.value||Q.value){let t="";K.value&&(t="left"),Q.value&&(t="right"),w("scroll",l,t),n.value&&(m.value=!0,!p.value&&a.autoHide&&(se(l,t),x()))}if(Z.value||_.value){let t="";Z.value&&(t="top"),_.value&&(t="bottom"),w("scroll",l,t),n.value&&(d.value=!0,!h.value&&a.autoHide&&(ve(l,t),y()))}ee()}function Se(){L.value=!0,p.value||h.value?S.value=!1:a.autoHide||(m.value=!0,d.value=!0)}function be(){L.value=!1,p.value||h.value?S.value=!0:a.autoHide||(m.value&&x(),d.value&&y())}function ge(){M.value=!0}function He(){M.value=!1,h.value||y()}function ye(){P.value=!0}function xe(){P.value=!1,p.value||x()}function ke(l){h.value=!0,I.value=z.value,j.value=l.clientY,l.target.setPointerCapture(l.pointerId),document.addEventListener("pointermove",V),document.addEventListener("pointerup",X),document.addEventListener("pointercancel",X),V(l)}function V(l){const c=(l.clientY-j.value)*(s.value-i.value)/(i.value-R.value),U=s.value-i.value;let u=I.value+c;u=Math.min(U,u),u=Math.max(u,0),r.value.scrollTop=u}function X(){h.value=!1,n.value&&a.autoHide&&!M.value?y():n.value&&!a.autoHide&&S.value&&(S.value=!1,y()),document.removeEventListener("pointermove",V),document.removeEventListener("pointerup",X),document.removeEventListener("pointercancel",X)}function Te(l){p.value=!0,O.value=W.value,A.value=l.clientX,l.target.setPointerCapture(l.pointerId),document.addEventListener("pointermove",D),document.addEventListener("pointerup",Y),document.addEventListener("pointercancel",Y),D(l)}function D(l){const c=(l.clientX-A.value)*(f.value-v.value)/(v.value-N.value),U=f.value-v.value;let u=O.value+c;u=Math.min(U,u),u=Math.max(u,0),r.value.scrollLeft=u}function Y(){p.value=!1,n.value&&a.autoHide&&!P.value?x():n.value&&!a.autoHide&&S.value&&(S.value=!1,x()),document.removeEventListener("pointermove",D),document.removeEventListener("pointerup",Y),document.removeEventListener("pointercancel",Y)}function Ee(...l){r.value?.scrollTo(...l)}function ze(...l){r.value?.scrollBy(...l)}function Le(){return{scrollTop:z.value,scrollWidth:E.value,scrollHeight:T.value,clientWidth:C.value,clientHeight:$.value}}return te({scrollTo:Ee,scrollBy:ze,getScrollData:Le}),(l,t)=>(e.openBlock(),e.createElementBlock("div",{class:"scrollbar-wrap",style:e.normalizeStyle(`
      --scrollbar-width: ${o.size}px;
      --scrollbar-height: ${o.size}px;
      --scrollbar-border-radius: ${o.size}px;
      --scrollbar-color: rgba(0, 0, 0, 0.25);
      --scrollbar-color-hover: rgba(0, 0, 0, 0.4);
      --scrollbar-rail-horizontal-top: 4px 2px auto 2px;
      --scrollbar-rail-horizontal-bottom: auto 2px 4px 2px;
      --scrollbar-rail-vertical-right: 2px 4px 2px auto;
      --scrollbar-rail-vertical-left: 2px auto 2px 4px;
      --scrollbar-rail-color: transparent;
    `),onMouseenter:t[4]||(t[4]=c=>B.value&&o.trigger==="hover"?Se():()=>!1),onMouseleave:t[5]||(t[5]=c=>B.value&&o.trigger==="hover"?be():()=>!1)},[e.createElementVNode("div",{ref_key:"containerRef",ref:r,class:e.normalizeClass(["scrollbar-container",{"container-scroll":B.value}]),onScroll:pe},[e.createElementVNode("div",{ref_key:"contentRef",ref:k,class:e.normalizeClass(["scrollbar-content",o.contentClass]),style:e.normalizeStyle([o.xScrollable?{...oe,...o.contentStyle}:o.contentStyle])},[e.renderSlot(l.$slots,"default",{},void 0,!0)],6)],34),e.withDirectives(e.createElementVNode("div",{ref_key:"railVerticalRef",ref:q,class:e.normalizeClass(["scrollbar-rail rail-vertical",`rail-vertical-${o.yPlacement}`])},[e.createElementVNode("div",{class:e.normalizeClass(["scrollbar-track",{"track-visible":o.trigger==="none"||d.value}]),style:e.normalizeStyle(ne.value),onMouseenter:t[0]||(t[0]=c=>n.value&&a.autoHide?ge():()=>!1),onMouseleave:t[1]||(t[1]=c=>n.value&&a.autoHide?He():()=>!1),onPointerdown:e.withModifiers(ke,["prevent","stop"])},null,38)],2),[[e.vShow,o.yScrollable]]),e.withDirectives(e.createElementVNode("div",{ref_key:"railHorizontalRef",ref:F,class:e.normalizeClass(["scrollbar-rail rail-horizontal",`rail-horizontal-${o.xPlacement}`])},[e.createElementVNode("div",{class:e.normalizeClass(["scrollbar-track",{"track-visible":o.trigger==="none"||m.value}]),style:e.normalizeStyle(ie.value),onMouseenter:t[2]||(t[2]=c=>n.value&&a.autoHide?ye():()=>!1),onMouseleave:t[3]||(t[3]=c=>n.value&&a.autoHide?xe():()=>!1),onPointerdown:e.withModifiers(Te,["prevent","stop"])},null,38)],2),[[e.vShow,o.xScrollable]])],36))}});exports.default=Me;