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