@aplus-frontend/ui/lib/src/scroll-bar/internal.vue.js

"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const t=require("vue");require("../config-provider/index.js");const T=require("./hooks/use-track.js"),P=require("./style/index.js"),w=require("./utils/index.js"),$=require("../config-provider/hooks/use-namespace.js"),q=t.defineComponent({__name:"internal",props:{direction:{default:"vertical"},scroll:{default:0},barLength:{default:35},width:{},barColor:{},trackColor:{},trackWidth:{},disabled:{type:Boolean,default:!1},showTrack:{type:Boolean,default:!0},trackSpeed:{default:2},onScrollStart:{},onScroll:{},onScrollEnd:{}},setup(S,{expose:y}){const r=S,h=t.shallowRef(),s=t.shallowRef(),l=t.shallowRef(),{b:R,e:p,m:E,em:c,cssVar:L}=$.useNamespace("scroll-bar"),C=P.default("scroll-bar"),o=t.ref(r.scroll),{handleMouseDown:b}=T.useTrack({currentScroll:o,track:s,bar:l,type:t.toRef(r,"direction"),trackSpeed:t.toRef(r,"trackSpeed"),barLength:t.toRef(r,"barLength"),disabled:t.toRef(r,"disabled"),onDown:e=>{r.onScrollStart?.(e)},onUp:e=>{r.onScrollEnd?.(e)},onScroll:e=>{r.onScroll?.(e)}});t.watch(()=>r.scroll,e=>{o.value=e}),t.watchEffect(()=>{if(!t.unref(l))return;const e=`${(100-r.barLength)*o.value/r.barLength}%`,n=`${r.barLength}%`;r.direction==="vertical"?(l.value.style.height=n,l.value.style.transform=`translate3d(0, ${e}, 0)`):(l.value.style.width=n,l.value.style.transform=`translate3d(${e}, 0, 0)`)});let f,i,u;function M(e){if(r.disabled||e.button!==0)return;e.preventDefault(),e.stopPropagation();const n=t.unref(s),a=t.unref(l);if(!n||!a)return;document.addEventListener("pointermove",k),document.addEventListener("pointerup",v);const d=n.getBoundingClientRect(),g=a.getBoundingClientRect();r.direction==="vertical"?(f=d.height,i=g.top-d.top,u=e.clientY):(f=d.width,i=g.left-d.left,u=e.clientX),r.onScrollStart?.(t.unref(o))}function k(e){e.stopPropagation(),e.preventDefault();let n;r.direction==="vertical"?n=i+e.clientY-u:n=i+e.clientX-u;const a=n/f/(100-r.barLength)*1e4;o.value=w.ensureRangeValue(a),r.onScroll?.(t.unref(o))}function v(e){e.preventDefault(),document.removeEventListener("pointermove",k),document.removeEventListener("pointerup",v),r.onScrollEnd?.(t.unref(o))}function m(e){e.cancelable&&(e.stopPropagation(),e.preventDefault())}function D(e){Math.abs(t.unref(o)-e)<=.001||(o.value=w.ensureRangeValue(e))}return y({currentScroll:o,container:h,bar:l,track:s,scroll:D}),(e,n)=>(t.openBlock(),t.createElementBlock("div",{ref_key:"container",ref:h,class:t.normalizeClass([t.unref(R)(),t.unref(E)(e.direction),t.unref(C)]),style:t.normalizeStyle(t.unref(L)({"bar-color":e.barColor,"track-color":e.trackColor,"bar-width":e.width?`${e.width}px`:void 0,"track-width":e.trackWidth?`${e.trackWidth}px`:void 0},!1))},[t.createElementVNode("div",{ref_key:"track",ref:s,class:t.normalizeClass([t.unref(p)("track"),e.disabled?t.unref(c)("track","disabled"):null,e.showTrack?null:t.unref(c)("track","hidden")]),onPointerdown:n[0]||(n[0]=(...a)=>t.unref(b)&&t.unref(b)(...a)),onTouchstart:m},null,34),t.createElementVNode("div",{ref_key:"bar",ref:l,class:t.normalizeClass([t.unref(p)("bar"),t.unref(c)("bar",e.direction),e.disabled?t.unref(c)("bar","disabled"):null]),onPointerdown:M,onTouchstart:m},null,34)],6))}});exports.default=q;