@m0ksem/vue-custom-scrollbar - npm Package Compare versions

Comparing version 0.0.4 to 0.0.5

dist/vue-custom-scrollbar.js

@@ -1,1 +0,1 @@
-(function(h,o){typeof exports=="object"&&typeof module!="undefined"?o(exports,require("vue"),require("@vueuse/core")):typeof define=="function"&&define.amd?define(["exports","vue","@vueuse/core"],o):(h=typeof globalThis!="undefined"?globalThis:h||self,o(h["vue-custom-scrollbar"]={},h.Vue,h.core))})(this,function(h,o,y){"use strict";const ie=()=>{},se=Array.isArray,ae=e=>typeof e=="function",ce=e=>typeof e=="symbol";let le;function fe(e,t=le){t&&t.active&&t.effects.push(e)}const ue=e=>{const t=new Set(e);return t.w=0,t.n=0,t},B=e=>(e.w&m)>0,V=e=>(e.n&m)>0,de=({deps:e})=>{if(e.length)for(let t=0;t<e.length;t++)e[t].w|=m},he=e=>{const{deps:t}=e;if(t.length){let r=0;for(let s=0;s<t.length;s++){const n=t[s];B(n)&&!V(n)?n.delete(e):t[r++]=n,n.w&=~m,n.n&=~m}t.length=r}};let _=0,m=1;const j=30;let u;class me{constructor(t,r=null,s){this.fn=t,this.scheduler=r,this.active=!0,this.deps=[],this.parent=void 0,fe(this,s)}run(){if(!this.active)return this.fn();let t=u,r=w;for(;t;){if(t===this)return;t=t.parent}try{return this.parent=u,u=this,w=!0,m=1<<++_,_<=j?de(this):N(this),this.fn()}finally{_<=j&&he(this),m=1<<--_,u=this.parent,w=r,this.parent=void 0}}stop(){this.active&&(N(this),this.onStop&&this.onStop(),this.active=!1)}}function N(e){const{deps:t}=e;if(t.length){for(let r=0;r<t.length;r++)t[r].delete(e);t.length=0}}let w=!0;function pe(e,t){let r=!1;_<=j?V(e)||(e.n|=m,r=!B(e)):r=!e.has(u),r&&(e.add(u),u.deps.push(e))}function be(e,t){for(const r of se(e)?e:[...e])(r!==u||r.allowRecurse)&&(r.scheduler?r.scheduler():r.run())}new Set(Object.getOwnPropertyNames(Symbol).map(e=>Symbol[e]).filter(ce));function C(e){const t=e&&e.__v_raw;return t?C(t):e}function ye(e){w&&u&&(e=C(e),pe(e.dep||(e.dep=ue())))}function ge(e,t){e=C(e),e.dep&&be(e.dep)}class Se{constructor(t,r,s,n){this._setter=r,this.dep=void 0,this.__v_isRef=!0,this._dirty=!0,this.effect=new me(t,()=>{this._dirty||(this._dirty=!0,ge(this))}),this.effect.computed=this,this.effect.active=this._cacheable=!n,this.__v_isReadonly=s}get value(){const t=C(this);return ye(t),(t._dirty||!t._cacheable)&&(t._dirty=!1,t._value=t.effect.run()),t._value}set value(t){this._setter(t)}}function _e(e,t,r=!1){let s,n;const i=ae(e);return i?(s=e,n=ie):(s=e.get,n=e.set),new Se(s,n,i||!n,r)}Promise.resolve();const ve=()=>_e(()=>typeof document!="undefined"?document:void 0),ke=e=>{const t=ve(),r=(i,a={})=>{if(!t.value)return null;const l=t.value.createElement(i);return Object.keys(a).forEach(f=>{l.style[f]=a[f]}),l},s=o.computed(()=>{const i=r("div",{visibility:"hidden",overflow:"scroll"}),a=r("div");return!i||!a?{parent:i,child:a}:(i.appendChild(a),{parent:i,child:a})});return{scrollbarSize:o.computed(()=>{var f,p,b;const{parent:i,child:a}=s.value;if(!a||!i||!t.value)return 0;(p=o.unref(e)||((f=t.value)==null?void 0:f.body))==null||p.appendChild(i);const l=i.offsetWidth-a.offsetWidth;return(b=i.parentElement)==null||b.removeChild(i),l})}},Te=e=>{const t=o.reactive({x:0,y:0}),r=n=>{const i=n.target;t.x=i.scrollLeft/i.scrollWidth*100,t.y=i.scrollTop/i.scrollHeight*100};y.useEventListener(e,"scroll",r);const s=()=>{const n=o.unref(e);!n||n.scrollTo({top:t.y/100*n.scrollHeight,left:t.x/100*n.scrollWidth})};return new Proxy(t,{set(n,i,a){return n[i]=a,s(),!0}})};var E=typeof globalThis!="undefined"?globalThis:typeof window!="undefined"?window:typeof global!="undefined"?global:typeof self!="undefined"?self:{};function $e(e,t,r){var s=-1,n=e.length;t<0&&(t=-t>n?0:n+t),r=r>n?n:r,r<0&&(r+=n),n=t>r?0:r-t>>>0,t>>>=0;for(var i=Array(n);++s<n;)i[s]=e[s+t];return i}var Re=$e,we=Re;function Ce(e,t,r){var s=e.length;return r=r===void 0?s:r,!t&&r>=s?e:we(e,t,r)}var Ee=Ce,je="\\ud800-\\udfff",xe="\\u0300-\\u036f",ze="\\ufe20-\\ufe2f",Pe="\\u20d0-\\u20ff",Oe=xe+ze+Pe,Ae="\\ufe0e\\ufe0f",Be="\\u200d",Ve=RegExp("["+Be+je+Oe+Ae+"]");function Ne(e){return Ve.test(e)}var F=Ne;function Fe(e){return e.split("")}var Me=Fe,M="\\ud800-\\udfff",Ie="\\u0300-\\u036f",He="\\ufe20-\\ufe2f",We="\\u20d0-\\u20ff",Le=Ie+He+We,Ue="\\ufe0e\\ufe0f",Ge="["+M+"]",x="["+Le+"]",z="\\ud83c[\\udffb-\\udfff]",De="(?:"+x+"|"+z+")",I="[^"+M+"]",H="(?:\\ud83c[\\udde6-\\uddff]){2}",W="[\\ud800-\\udbff][\\udc00-\\udfff]",qe="\\u200d",L=De+"?",U="["+Ue+"]?",Je="(?:"+qe+"(?:"+[I,H,W].join("|")+")"+U+L+")*",Ke=U+L+Je,Ye="(?:"+[I+x+"?",x,H,W,Ge].join("|")+")",Xe=RegExp(z+"(?="+z+")|"+Ye+Ke,"g");function Ze(e){return e.match(Xe)||[]}var Qe=Ze,et=Me,tt=F,rt=Qe;function ot(e){return tt(e)?rt(e):et(e)}var nt=ot,it=typeof E=="object"&&E&&E.Object===Object&&E,st=it,at=st,ct=typeof self=="object"&&self&&self.Object===Object&&self,lt=at||ct||Function("return this")(),ft=lt,ut=ft,dt=ut.Symbol,P=dt;function ht(e,t){for(var r=-1,s=e==null?0:e.length,n=Array(s);++r<s;)n[r]=t(e[r],r,e);return n}var mt=ht,pt=Array.isArray,bt=pt,G=P,D=Object.prototype,yt=D.hasOwnProperty,gt=D.toString,v=G?G.toStringTag:void 0;function St(e){var t=yt.call(e,v),r=e[v];try{e[v]=void 0;var s=!0}catch{}var n=gt.call(e);return s&&(t?e[v]=r:delete e[v]),n}var _t=St,vt=Object.prototype,kt=vt.toString;function Tt(e){return kt.call(e)}var $t=Tt,q=P,Rt=_t,wt=$t,Ct="[object Null]",Et="[object Undefined]",J=q?q.toStringTag:void 0;function jt(e){return e==null?e===void 0?Et:Ct:J&&J in Object(e)?Rt(e):wt(e)}var xt=jt;function zt(e){return e!=null&&typeof e=="object"}var Pt=zt,Ot=xt,At=Pt,Bt="[object Symbol]";function Vt(e){return typeof e=="symbol"||At(e)&&Ot(e)==Bt}var K=Vt,Y=P,Nt=mt,Ft=bt,Mt=K,It=1/0,X=Y?Y.prototype:void 0,Z=X?X.toString:void 0;function Q(e){if(typeof e=="string")return e;if(Ft(e))return Nt(e,Q)+"";if(Mt(e))return Z?Z.call(e):"";var t=e+"";return t=="0"&&1/e==-It?"-0":t}var Ht=Q,Wt=Ht;function Lt(e){return e==null?"":Wt(e)}var Ut=Lt,Gt=Ee,Dt=F,qt=nt,Jt=Ut;function Kt(e){return function(t){t=Jt(t);var r=Dt(t)?qt(t):void 0,s=r?r[0]:t.charAt(0),n=r?Gt(r,1).join(""):t.slice(1);return s[e]()+n}}var Yt=Kt,Xt=Yt,Zt=Xt("toUpperCase"),ee=Zt;const te=(e,t="value")=>{if(typeof e=="number")return`${e}%`;if(e.endsWith("%"))return e;throw new Error(`${ee(t)} must be string number in percents or just a number. For example 40%.`)},O=(e,t="value")=>{if(typeof e=="number")return`${e}px`;if(e.endsWith("px"))return e;throw new Error(`${ee(t)} must be string number in pixels or just a number. For example 200px`)};function Qt(e,t,r){return e===e&&(r!==void 0&&(e=e<=r?e:r),t!==void 0&&(e=e>=t?e:t)),e}var er=Qt,tr=/\s/;function rr(e){for(var t=e.length;t--&&tr.test(e.charAt(t)););return t}var or=rr,nr=or,ir=/^\s+/;function sr(e){return e&&e.slice(0,nr(e)+1).replace(ir,"")}var ar=sr;function cr(e){var t=typeof e;return e!=null&&(t=="object"||t=="function")}var lr=cr,fr=ar,re=lr,ur=K,oe=0/0,dr=/^[-+]0x[0-9a-f]+$/i,hr=/^0b[01]+$/i,mr=/^0o[0-7]+$/i,pr=parseInt;function br(e){if(typeof e=="number")return e;if(ur(e))return oe;if(re(e)){var t=typeof e.valueOf=="function"?e.valueOf():e;e=re(t)?t+"":t}if(typeof e!="string")return e===0?e:+e;e=fr(e);var r=hr.test(e);return r||mr.test(e)?pr(e.slice(2),r?2:8):dr.test(e)?oe:+e}var yr=br,gr=er,A=yr;function Sr(e,t,r){return r===void 0&&(r=t,t=void 0),r!==void 0&&(r=A(r),r=r===r?r:0),t!==void 0&&(t=A(t),t=t===t?t:0),gr(A(e),t,r)}var ne=Sr;const _r=e=>{const t=o.ref(!1),r=()=>{t.value=!1};return y.useEventListener(e,"mousedown",()=>{t.value=!0}),y.useEventListener("mouseup",r),y.useEventListener("blur",r),{isFocused:t}},vr=(e,t)=>{const r=o.ref({x:0,y:0}),{isFocused:s}=_r(t),n=i=>{var c,S;if(!s.value)return;const a=(c=o.unref(e))==null?void 0:c.getBoundingClientRect(),l=(S=o.unref(t))==null?void 0:S.getBoundingClientRect();if(!a||!l)return;const f=l.top-a.top,p=l.left-a.left,b=ne(f+i.movementY,0,a.height-l.height),k=ne(p+i.movementX,0,a.width-l.width),T=b/a.height*100,$=k/a.width*100;r.value={y:T,x:$}};return y.useEventListener("mousemove",n),{position:r,isFocused:s}};var Cr="";const kr={class:"track-wrapper"},Tr=o.defineComponent({props:{modelValue:{type:Number,required:!0,validator(e){return e>=0&&e<=100}},position:{type:String,default:"right",validator(e){return["bottom","right","left","top"].includes(e)}},size:{type:[String,Number],required:!0},thickness:{type:[String,Number],default:"18px"},color:{type:String},trackColor:{type:String},hide:{type:Boolean},hideTimeout:{type:Number}},emits:["update:modelValue"],setup(e,{emit:t}){const r=e;o.useCssVars(d=>({b636ec56:o.unref(T)}));const s=o.ref(),n=o.ref(),i=()=>r.position==="bottom"||r.position==="top",a=()=>i()?"width":"height",l=()=>i()?"height":"width",f=()=>i()?"left":"top",p=o.computed(()=>({[f()]:te(r.modelValue),[a()]:te(r.size,"size"),[l()]:O(r.thickness,"thickness")})),b=o.computed(()=>({[l()]:O(r.thickness,"thickness")})),k=o.computed(()=>({["scrollbar--focused"]:c.value,[`scrollbar--${r.position}`]:!0,["scrollbar--hidden"]:r.hide})),T=o.computed(()=>`${r.hideTimeout}ms`),{position:$,isFocused:c}=vr(n,s);o.watch($,({x:d,y:R})=>{const g=i()?d:R;t("update:modelValue",g)});const S=o.computed(()=>({horizontal:i(),vertical:!i(),placement:i()?"horizontal":"vertical",focused:c.value}));return(d,R)=>(o.openBlock(),o.createElementBlock("div",{class:o.normalizeClass(["scrollbar",o.unref(k)]),style:o.normalizeStyle(o.unref(b)),ref_key:"scrollbarRef",ref:n},[o.createElementVNode("div",{class:"thumb-wrapper",style:o.normalizeStyle(o.unref(p)),ref_key:"thumbRef",ref:s},[o.renderSlot(d.$slots,"thumb",o.normalizeProps(o.guardReactiveProps(o.unref(S))),()=>[o.createElementVNode("div",{class:"thumb thumb--default",style:o.normalizeStyle({background:e.color})},null,4)])],4),o.createElementVNode("div",kr,[o.renderSlot(d.$slots,"track",o.normalizeProps(o.guardReactiveProps(o.unref(S))),()=>[o.createElementVNode("div",{class:"track track--default",style:o.normalizeStyle({background:e.trackColor})},null,4)])])],6))}});var Er="",$r=(e,t)=>{const r=e.__vccOpts||e;for(const[s,n]of t)r[s]=n;return r};const Rr={class:"vue-custom-scrollbar"};var wr=$r(o.defineComponent({props:{top:{type:Boolean,default:!1},left:{type:Boolean,default:!1},bottom:{type:Boolean,default:!1},right:{type:Boolean,default:!1},inner:{type:Boolean,default:!1},autoHide:{type:Boolean,default:!1},autoHideTimeout:{type:Number,default:5e3},thickness:{type:[String,Number]},color:{type:String,default:"#9d4edd"},trackColor:{type:String,default:"#3c096c"}},setup(e){const t=e,{scrollbarSize:r}=ke(),s=o.computed(()=>t.thickness||r.value),n=o.computed(()=>{if(!t.inner)return{padding:[t.top,t.right,t.bottom,t.left].map(c=>c?O(s.value,"thickness"):"0").join(" ")}}),i=o.ref(),a=o.ref(),l=Te(i),{width:f,height:p}=y.useElementSize(i),{width:b,height:k}=y.useElementSize(a),T=o.computed(()=>({x:f.value/b.value*100,y:p.value/k.value*100})),$=o.computed(()=>{const c=[];return t.top&&c.push({main:"x",cross:"y",position:"top"}),t.left&&c.push({main:"y",cross:"x",position:"left"}),t.right&&c.push({main:"y",cross:"x",position:"right"}),t.bottom&&c.push({main:"x",cross:"y",position:"bottom"}),c});return(c,S)=>(o.openBlock(),o.createElementBlock("div",Rr,[o.createElementVNode("div",{class:"vue-custom-scrollbar__scrollable",ref_key:"scrollableRef",ref:i},[o.createElementVNode("div",{class:"vue-custom-scrollbar__inner",style:o.normalizeStyle(o.unref(n)),ref_key:"innerRef",ref:a},[o.renderSlot(c.$slots,"default",{},void 0,!0)],4)],512),(o.openBlock(!0),o.createElementBlock(o.Fragment,null,o.renderList(o.unref($),({main:d,position:R})=>(o.openBlock(),o.createBlock(Tr,{key:R,size:o.unref(T)[d],position:R,thickness:o.unref(s),color:e.color,trackColor:e.trackColor,hide:e.autoHide,"hide-timeout":e.autoHideTimeout,modelValue:o.unref(l)[d],"onUpdate:modelValue":g=>o.unref(l)[d]=g},{thumb:o.withCtx(g=>[o.renderSlot(c.$slots,"thumb",o.normalizeProps(o.guardReactiveProps(g)),void 0,!0)]),track:o.withCtx(g=>[o.renderSlot(c.$slots,"track",o.normalizeProps(o.guardReactiveProps(g)),void 0,!0)]),_:2},1032,["size","position","thickness","color","trackColor","hide","hide-timeout","modelValue","onUpdate:modelValue"]))),128))]))}}),[["__scopeId","data-v-5d30965f"]]);h.VueCustomScrollbar=wr,Object.defineProperties(h,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})});
+(function(h,o){typeof exports=="object"&&typeof module!="undefined"?o(exports,require("vue"),require("@vueuse/core")):typeof define=="function"&&define.amd?define(["exports","vue","@vueuse/core"],o):(h=typeof globalThis!="undefined"?globalThis:h||self,o(h["vue-custom-scrollbar"]={},h.Vue,h.core))})(this,function(h,o,y){"use strict";const se=()=>{},ae=Array.isArray,le=e=>typeof e=="function",ce=e=>typeof e=="symbol";let fe;function ue(e,t=fe){t&&t.active&&t.effects.push(e)}const de=e=>{const t=new Set(e);return t.w=0,t.n=0,t},B=e=>(e.w&m)>0,V=e=>(e.n&m)>0,he=({deps:e})=>{if(e.length)for(let t=0;t<e.length;t++)e[t].w|=m},me=e=>{const{deps:t}=e;if(t.length){let r=0;for(let s=0;s<t.length;s++){const n=t[s];B(n)&&!V(n)?n.delete(e):t[r++]=n,n.w&=~m,n.n&=~m}t.length=r}};let v=0,m=1;const j=30;let d;class pe{constructor(t,r=null,s){this.fn=t,this.scheduler=r,this.active=!0,this.deps=[],this.parent=void 0,ue(this,s)}run(){if(!this.active)return this.fn();let t=d,r=R;for(;t;){if(t===this)return;t=t.parent}try{return this.parent=d,d=this,R=!0,m=1<<++v,v<=j?he(this):N(this),this.fn()}finally{v<=j&&me(this),m=1<<--v,d=this.parent,R=r,this.parent=void 0}}stop(){this.active&&(N(this),this.onStop&&this.onStop(),this.active=!1)}}function N(e){const{deps:t}=e;if(t.length){for(let r=0;r<t.length;r++)t[r].delete(e);t.length=0}}let R=!0;function be(e,t){let r=!1;v<=j?V(e)||(e.n|=m,r=!B(e)):r=!e.has(d),r&&(e.add(d),d.deps.push(e))}function ye(e,t){for(const r of ae(e)?e:[...e])(r!==d||r.allowRecurse)&&(r.scheduler?r.scheduler():r.run())}new Set(Object.getOwnPropertyNames(Symbol).map(e=>Symbol[e]).filter(ce));function C(e){const t=e&&e.__v_raw;return t?C(t):e}function ge(e){R&&d&&(e=C(e),be(e.dep||(e.dep=de())))}function Se(e,t){e=C(e),e.dep&&ye(e.dep)}class _e{constructor(t,r,s,n){this._setter=r,this.dep=void 0,this.__v_isRef=!0,this._dirty=!0,this.effect=new pe(t,()=>{this._dirty||(this._dirty=!0,Se(this))}),this.effect.computed=this,this.effect.active=this._cacheable=!n,this.__v_isReadonly=s}get value(){const t=C(this);return ge(t),(t._dirty||!t._cacheable)&&(t._dirty=!1,t._value=t.effect.run()),t._value}set value(t){this._setter(t)}}function ve(e,t,r=!1){let s,n;const i=le(e);return i?(s=e,n=se):(s=e.get,n=e.set),new _e(s,n,i||!n,r)}Promise.resolve();const ke=()=>ve(()=>typeof document!="undefined"?document:void 0),Te=e=>{const t=ke(),r=(i,a={})=>{if(!t.value)return null;const l=t.value.createElement(i);return Object.keys(a).forEach(f=>{l.style[f]=a[f]}),l},s=o.computed(()=>{const i=r("div",{visibility:"hidden",overflow:"scroll"}),a=r("div");return!i||!a?{parent:i,child:a}:(i.appendChild(a),{parent:i,child:a})});return{scrollbarSize:o.computed(()=>{var f,p,b;const{parent:i,child:a}=s.value;if(!a||!i||!t.value)return 0;(p=o.unref(e)||((f=t.value)==null?void 0:f.body))==null||p.appendChild(i);const l=i.offsetWidth-a.offsetWidth;return(b=i.parentElement)==null||b.removeChild(i),l})}},$e=e=>{const t=o.reactive({x:0,y:0}),r=n=>{const i=n.target;t.x=i.scrollLeft/i.scrollWidth*100,t.y=i.scrollTop/i.scrollHeight*100};y.useEventListener(e,"scroll",r);const s=()=>{const n=o.unref(e);!n||n.scrollTo({top:t.y/100*n.scrollHeight,left:t.x/100*n.scrollWidth})};return new Proxy(t,{set(n,i,a){return n[i]=a,s(),!0}})};var E=typeof globalThis!="undefined"?globalThis:typeof window!="undefined"?window:typeof global!="undefined"?global:typeof self!="undefined"?self:{};function we(e,t,r){var s=-1,n=e.length;t<0&&(t=-t>n?0:n+t),r=r>n?n:r,r<0&&(r+=n),n=t>r?0:r-t>>>0,t>>>=0;for(var i=Array(n);++s<n;)i[s]=e[s+t];return i}var Re=we,Ce=Re;function Ee(e,t,r){var s=e.length;return r=r===void 0?s:r,!t&&r>=s?e:Ce(e,t,r)}var je=Ee,xe="\\ud800-\\udfff",ze="\\u0300-\\u036f",Pe="\\ufe20-\\ufe2f",Oe="\\u20d0-\\u20ff",Ae=ze+Pe+Oe,Be="\\ufe0e\\ufe0f",Ve="\\u200d",Ne=RegExp("["+Ve+xe+Ae+Be+"]");function Fe(e){return Ne.test(e)}var F=Fe;function Me(e){return e.split("")}var Ie=Me,M="\\ud800-\\udfff",He="\\u0300-\\u036f",We="\\ufe20-\\ufe2f",Le="\\u20d0-\\u20ff",Ue=He+We+Le,Ge="\\ufe0e\\ufe0f",De="["+M+"]",x="["+Ue+"]",z="\\ud83c[\\udffb-\\udfff]",qe="(?:"+x+"|"+z+")",I="[^"+M+"]",H="(?:\\ud83c[\\udde6-\\uddff]){2}",W="[\\ud800-\\udbff][\\udc00-\\udfff]",Je="\\u200d",L=qe+"?",U="["+Ge+"]?",Ke="(?:"+Je+"(?:"+[I,H,W].join("|")+")"+U+L+")*",Ye=U+L+Ke,Xe="(?:"+[I+x+"?",x,H,W,De].join("|")+")",Ze=RegExp(z+"(?="+z+")|"+Xe+Ye,"g");function Qe(e){return e.match(Ze)||[]}var et=Qe,tt=Ie,rt=F,ot=et;function nt(e){return rt(e)?ot(e):tt(e)}var it=nt,st=typeof E=="object"&&E&&E.Object===Object&&E,at=st,lt=at,ct=typeof self=="object"&&self&&self.Object===Object&&self,ft=lt||ct||Function("return this")(),ut=ft,dt=ut,ht=dt.Symbol,P=ht;function mt(e,t){for(var r=-1,s=e==null?0:e.length,n=Array(s);++r<s;)n[r]=t(e[r],r,e);return n}var pt=mt,bt=Array.isArray,yt=bt,G=P,D=Object.prototype,gt=D.hasOwnProperty,St=D.toString,k=G?G.toStringTag:void 0;function _t(e){var t=gt.call(e,k),r=e[k];try{e[k]=void 0;var s=!0}catch{}var n=St.call(e);return s&&(t?e[k]=r:delete e[k]),n}var vt=_t,kt=Object.prototype,Tt=kt.toString;function $t(e){return Tt.call(e)}var wt=$t,q=P,Rt=vt,Ct=wt,Et="[object Null]",jt="[object Undefined]",J=q?q.toStringTag:void 0;function xt(e){return e==null?e===void 0?jt:Et:J&&J in Object(e)?Rt(e):Ct(e)}var zt=xt;function Pt(e){return e!=null&&typeof e=="object"}var Ot=Pt,At=zt,Bt=Ot,Vt="[object Symbol]";function Nt(e){return typeof e=="symbol"||Bt(e)&&At(e)==Vt}var K=Nt,Y=P,Ft=pt,Mt=yt,It=K,Ht=1/0,X=Y?Y.prototype:void 0,Z=X?X.toString:void 0;function Q(e){if(typeof e=="string")return e;if(Mt(e))return Ft(e,Q)+"";if(It(e))return Z?Z.call(e):"";var t=e+"";return t=="0"&&1/e==-Ht?"-0":t}var Wt=Q,Lt=Wt;function Ut(e){return e==null?"":Lt(e)}var Gt=Ut,Dt=je,qt=F,Jt=it,Kt=Gt;function Yt(e){return function(t){t=Kt(t);var r=qt(t)?Jt(t):void 0,s=r?r[0]:t.charAt(0),n=r?Dt(r,1).join(""):t.slice(1);return s[e]()+n}}var Xt=Yt,Zt=Xt,Qt=Zt("toUpperCase"),ee=Qt;const te=(e,t="value")=>{if(typeof e=="number")return`${e}%`;if(e.endsWith("%"))return e;throw new Error(`${ee(t)} must be string number in percents or just a number. For example 40%.`)},O=(e,t="value")=>{if(typeof e=="number")return`${e}px`;if(e.endsWith("px"))return e;throw new Error(`${ee(t)} must be string number in pixels or just a number. For example 200px`)};function er(e,t,r){return e===e&&(r!==void 0&&(e=e<=r?e:r),t!==void 0&&(e=e>=t?e:t)),e}var tr=er,rr=/\s/;function or(e){for(var t=e.length;t--&&rr.test(e.charAt(t)););return t}var nr=or,ir=nr,sr=/^\s+/;function ar(e){return e&&e.slice(0,ir(e)+1).replace(sr,"")}var lr=ar;function cr(e){var t=typeof e;return e!=null&&(t=="object"||t=="function")}var fr=cr,ur=lr,re=fr,dr=K,oe=0/0,hr=/^[-+]0x[0-9a-f]+$/i,mr=/^0b[01]+$/i,pr=/^0o[0-7]+$/i,br=parseInt;function yr(e){if(typeof e=="number")return e;if(dr(e))return oe;if(re(e)){var t=typeof e.valueOf=="function"?e.valueOf():e;e=re(t)?t+"":t}if(typeof e!="string")return e===0?e:+e;e=ur(e);var r=mr.test(e);return r||pr.test(e)?br(e.slice(2),r?2:8):hr.test(e)?oe:+e}var gr=yr,Sr=tr,A=gr;function _r(e,t,r){return r===void 0&&(r=t,t=void 0),r!==void 0&&(r=A(r),r=r===r?r:0),t!==void 0&&(t=A(t),t=t===t?t:0),Sr(A(e),t,r)}var ne=_r;const vr=e=>{const t=o.ref(!1),r=()=>{t.value=!1};return y.useEventListener(e,"mousedown",()=>{t.value=!0}),y.useEventListener("mouseup",r),y.useEventListener("blur",r),{isFocused:t}},kr=(e,t)=>{const r=o.ref({x:0,y:0}),{isFocused:s}=vr(t),n=i=>{var c,$;if(!s.value)return;const a=(c=o.unref(e))==null?void 0:c.getBoundingClientRect(),l=($=o.unref(t))==null?void 0:$.getBoundingClientRect();if(!a||!l)return;const f=l.top-a.top,p=l.left-a.left,b=ne(f+i.movementY,0,a.height-l.height),g=ne(p+i.movementX,0,a.width-l.width),S=b/a.height*100,T=g/a.width*100;r.value={y:S,x:T}};return y.useEventListener("mousemove",n),{position:r,isFocused:s}};var jr="";const Tr={class:"track-wrapper"},$r=o.defineComponent({props:{modelValue:{type:Number,required:!0,validator(e){return e>=0&&e<=100}},position:{type:String,default:"right",validator(e){return["bottom","right","left","top"].includes(e)}},size:{type:[String,Number],required:!0},thickness:{type:[String,Number],default:"18px"},color:{type:String},trackColor:{type:String},hide:{type:Boolean},hideTimeout:{type:Number}},emits:["update:modelValue"],setup(e,{emit:t}){const r=e;o.useCssVars(u=>({a316e054:o.unref(c)}));const s=o.ref(),n=o.ref(),i=()=>r.position==="bottom"||r.position==="top",a=()=>i()?"width":"height",l=()=>i()?"height":"width",f=()=>i()?"left":"top",p=o.computed(()=>({[f()]:te(r.modelValue),[a()]:te(r.size,"size"),[l()]:O(r.thickness,"thickness")})),b=o.computed(()=>({[l()]:O(r.thickness,"thickness")})),g=o.ref(!1);let S;o.watch(()=>r.modelValue,()=>{g.value=!0,clearTimeout(S),S=setTimeout(()=>{g.value=!1},300)});const T=o.computed(()=>({["scrollbar--focused"]:_.value,["scrollbar--scrolling"]:g.value,[`scrollbar--${r.position}`]:!0,["scrollbar--hidden"]:r.hide})),c=o.computed(()=>`${r.hideTimeout}ms`),{position:$,isFocused:_}=kr(n,s);o.watch($,({x:u,y:ie})=>{const Er=i()?u:ie;t("update:modelValue",Er)});const w=o.computed(()=>({horizontal:i(),vertical:!i(),placement:i()?"horizontal":"vertical",focused:_.value}));return(u,ie)=>(o.openBlock(),o.createElementBlock("div",{class:o.normalizeClass(["scrollbar",o.unref(T)]),style:o.normalizeStyle(o.unref(b)),ref_key:"scrollbarRef",ref:n},[o.createElementVNode("div",{class:"thumb-wrapper",style:o.normalizeStyle(o.unref(p)),ref_key:"thumbRef",ref:s},[o.renderSlot(u.$slots,"thumb",o.normalizeProps(o.guardReactiveProps(o.unref(w))),()=>[o.createElementVNode("div",{class:"thumb thumb--default",style:o.normalizeStyle({background:e.color})},null,4)])],4),o.createElementVNode("div",Tr,[o.renderSlot(u.$slots,"track",o.normalizeProps(o.guardReactiveProps(o.unref(w))),()=>[o.createElementVNode("div",{class:"track track--default",style:o.normalizeStyle({background:e.trackColor})},null,4)])])],6))}});var xr="",wr=(e,t)=>{const r=e.__vccOpts||e;for(const[s,n]of t)r[s]=n;return r};const Rr={class:"vue-custom-scrollbar"};var Cr=wr(o.defineComponent({props:{top:{type:Boolean,default:!1},left:{type:Boolean,default:!1},bottom:{type:Boolean,default:!1},right:{type:Boolean,default:!1},inner:{type:Boolean,default:!1},autoHide:{type:Boolean,default:!1},autoHideTimeout:{type:Number,default:5e3},thickness:{type:[String,Number]},color:{type:String,default:"#9d4edd"},trackColor:{type:String,default:"#3c096c"}},setup(e){const t=e,{scrollbarSize:r}=Te(),s=o.computed(()=>t.thickness||r.value),n=o.computed(()=>{if(!t.inner)return{padding:[t.top,t.right,t.bottom,t.left].map(c=>c?O(s.value,"thickness"):"0").join(" ")}}),i=o.ref(),a=o.ref(),l=$e(i),{width:f,height:p}=y.useElementSize(i),{width:b,height:g}=y.useElementSize(a),S=o.computed(()=>({x:f.value/b.value*100,y:p.value/g.value*100})),T=o.computed(()=>{const c=[];return t.top&&c.push({main:"x",cross:"y",position:"top"}),t.left&&c.push({main:"y",cross:"x",position:"left"}),t.right&&c.push({main:"y",cross:"x",position:"right"}),t.bottom&&c.push({main:"x",cross:"y",position:"bottom"}),c});return(c,$)=>(o.openBlock(),o.createElementBlock("div",Rr,[o.createElementVNode("div",{class:"vue-custom-scrollbar__scrollable",ref_key:"scrollableRef",ref:i},[o.createElementVNode("div",{class:"vue-custom-scrollbar__inner",style:o.normalizeStyle(o.unref(n)),ref_key:"innerRef",ref:a},[o.renderSlot(c.$slots,"default",{},void 0,!0)],4)],512),(o.openBlock(!0),o.createElementBlock(o.Fragment,null,o.renderList(o.unref(T),({main:_,position:w})=>(o.openBlock(),o.createBlock($r,{key:w,size:o.unref(S)[_],position:w,thickness:o.unref(s),color:e.color,trackColor:e.trackColor,hide:e.autoHide,"hide-timeout":e.autoHideTimeout,modelValue:o.unref(l)[_],"onUpdate:modelValue":u=>o.unref(l)[_]=u},{thumb:o.withCtx(u=>[o.renderSlot(c.$slots,"thumb",o.normalizeProps(o.guardReactiveProps(u)),void 0,!0)]),track:o.withCtx(u=>[o.renderSlot(c.$slots,"track",o.normalizeProps(o.guardReactiveProps(u)),void 0,!0)]),_:2},1032,["size","position","thickness","color","trackColor","hide","hide-timeout","modelValue","onUpdate:modelValue"]))),128))]))}}),[["__scopeId","data-v-5d30965f"]]);h.VueCustomScrollbar=Cr,Object.defineProperties(h,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})});

package.json

 {
   "name": "@m0ksem/vue-custom-scrollbar",
-  "version": "0.0.4",
+  "version": "0.0.5",
   "main": "./dist/vue-custom-scrollbar.js",
@@ -5,0 +5,0 @@ "module": "./dist/vue-custom-scrollbar.mjs",

No alert changes

Improved metrics

Total package byte prevSize

48483

increased by1.16%

Lines of code

1015

increased by1.1%

No dependency changes