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

Comparing version 0.0.3 to 0.0.4

dist/components/ScrollBar.vue.d.ts

@@ -27,2 +27,8 @@ import { PropType } from 'vue';
     };
+    hide: {
+        type: BooleanConstructor;
+    };
+    hideTimeout: {
+        type: NumberConstructor;
+    };
 }, () => void, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "update:modelValue"[], "update:modelValue", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
@@ -53,5 +59,12 @@ modelValue: {
     };
+    hide: {
+        type: BooleanConstructor;
+    };
+    hideTimeout: {
+        type: NumberConstructor;
+    };
 }>> & {
     "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
 }, {
+    hide: boolean;
     position: "left" | "top" | "bottom" | "right";
@@ -58,0 +71,0 @@ thickness: string | number;

dist/components/VueCustomScrollbar.vue.d.ts

@@ -22,2 +22,10 @@ declare const _default: import("vue").DefineComponent<{
     };
+    autoHide: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    autoHideTimeout: {
+        type: NumberConstructor;
+        default: number;
+    };
     thickness: {
@@ -55,2 +63,10 @@ type: (StringConstructor | NumberConstructor)[];
     };
+    autoHide: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    autoHideTimeout: {
+        type: NumberConstructor;
+        default: number;
+    };
     thickness: {
@@ -75,3 +91,5 @@ type: (StringConstructor | NumberConstructor)[];
     trackColor: string;
+    autoHide: boolean;
+    autoHideTimeout: number;
 }>;
 export default _default;

dist/vue-custom-scrollbar.js

@@ -1,1 +0,1 @@
-(function(h,n){typeof exports=="object"&&typeof module!="undefined"?n(exports,require("vue"),require("@vueuse/core")):typeof define=="function"&&define.amd?define(["exports","vue","@vueuse/core"],n):(h=typeof globalThis!="undefined"?globalThis:h||self,n(h["vue-custom-scrollbar"]={},h.Vue,h.core))})(this,function(h,n,y){"use strict";const se=()=>{},ie=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&p)>0,V=e=>(e.n&p)>0,de=({deps:e})=>{if(e.length)for(let t=0;t<e.length;t++)e[t].w|=p},he=e=>{const{deps:t}=e;if(t.length){let r=0;for(let s=0;s<t.length;s++){const o=t[s];B(o)&&!V(o)?o.delete(e):t[r++]=o,o.w&=~p,o.n&=~p}t.length=r}};let v=0,p=1;const C=30;let u;class pe{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=R;for(;t;){if(t===this)return;t=t.parent}try{return this.parent=u,u=this,R=!0,p=1<<++v,v<=C?de(this):N(this),this.fn()}finally{v<=C&&he(this),p=1<<--v,u=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 me(e,t){let r=!1;v<=C?V(e)||(e.n|=p,r=!B(e)):r=!e.has(u),r&&(e.add(u),u.deps.push(e))}function be(e,t){for(const r of ie(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 w(e){const t=e&&e.__v_raw;return t?w(t):e}function ye(e){R&&u&&(e=w(e),me(e.dep||(e.dep=ue())))}function ge(e,t){e=w(e),e.dep&&be(e.dep)}class Se{constructor(t,r,s,o){this._setter=r,this.dep=void 0,this.__v_isRef=!0,this._dirty=!0,this.effect=new pe(t,()=>{this._dirty||(this._dirty=!0,ge(this))}),this.effect.computed=this,this.effect.active=this._cacheable=!o,this.__v_isReadonly=s}get value(){const t=w(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,o;const i=ae(e);return i?(s=e,o=se):(s=e.get,o=e.set),new Se(s,o,i||!o,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=n.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:n.computed(()=>{var f,m,d;const{parent:i,child:a}=s.value;if(!a||!i||!t.value)return 0;(m=n.unref(e)||((f=t.value)==null?void 0:f.body))==null||m.appendChild(i);const l=i.offsetWidth-a.offsetWidth;return(d=i.parentElement)==null||d.removeChild(i),l})}},$e=e=>{const t=n.reactive({x:0,y:0}),r=o=>{const i=o.target;t.x=i.scrollLeft/i.scrollWidth*100,t.y=i.scrollTop/i.scrollHeight*100};y.useEventListener(e,"scroll",r);const s=()=>{const o=n.unref(e);!o||o.scrollTo({top:t.y/100*o.scrollHeight,left:t.x/100*o.scrollWidth})};return new Proxy(t,{set(o,i,a){return o[i]=a,s(),!0}})};var E=typeof globalThis!="undefined"?globalThis:typeof window!="undefined"?window:typeof global!="undefined"?global:typeof self!="undefined"?self:{};function Te(e,t,r){var s=-1,o=e.length;t<0&&(t=-t>o?0:o+t),r=r>o?o:r,r<0&&(r+=o),o=t>r?0:r-t>>>0,t>>>=0;for(var i=Array(o);++s<o;)i[s]=e[s+t];return i}var Re=Te,we=Re;function Ee(e,t,r){var s=e.length;return r=r===void 0?s:r,!t&&r>=s?e:we(e,t,r)}var je=Ee,Ce="\\ud800-\\udfff",xe="\\u0300-\\u036f",ze="\\ufe20-\\ufe2f",Pe="\\u20d0-\\u20ff",Oe=xe+ze+Pe,Ae="\\ufe0e\\ufe0f",Be="\\u200d",Ve=RegExp("["+Be+Ce+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",We="\\ufe20-\\ufe2f",Le="\\u20d0-\\u20ff",Ue=Ie+We+Le,Ge="\\ufe0e\\ufe0f",He="["+M+"]",x="["+Ue+"]",z="\\ud83c[\\udffb-\\udfff]",De="(?:"+x+"|"+z+")",I="[^"+M+"]",W="(?:\\ud83c[\\udde6-\\uddff]){2}",L="[\\ud800-\\udbff][\\udc00-\\udfff]",qe="\\u200d",U=De+"?",G="["+Ge+"]?",Je="(?:"+qe+"(?:"+[I,W,L].join("|")+")"+G+U+")*",Ke=G+U+Je,Ye="(?:"+[I+x+"?",x,W,L,He].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 nt(e){return tt(e)?rt(e):et(e)}var ot=nt,st=typeof E=="object"&&E&&E.Object===Object&&E,it=st,at=it,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,o=Array(s);++r<s;)o[r]=t(e[r],r,e);return o}var pt=ht,mt=Array.isArray,bt=mt,H=P,D=Object.prototype,yt=D.hasOwnProperty,gt=D.toString,k=H?H.toStringTag:void 0;function St(e){var t=yt.call(e,k),r=e[k];try{e[k]=void 0;var s=!0}catch{}var o=gt.call(e);return s&&(t?e[k]=r:delete e[k]),o}var _t=St,vt=Object.prototype,kt=vt.toString;function $t(e){return kt.call(e)}var Tt=$t,q=P,Rt=_t,wt=Tt,Et="[object Null]",jt="[object Undefined]",J=q?q.toStringTag:void 0;function Ct(e){return e==null?e===void 0?jt:Et:J&&J in Object(e)?Rt(e):wt(e)}var xt=Ct;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=pt,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 Wt=Q,Lt=Wt;function Ut(e){return e==null?"":Lt(e)}var Gt=Ut,Ht=je,Dt=F,qt=ot,Jt=Gt;function Kt(e){return function(t){t=Jt(t);var r=Dt(t)?qt(t):void 0,s=r?r[0]:t.charAt(0),o=r?Ht(r,1).join(""):t.slice(1);return s[e]()+o}}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 nr=rr,or=nr,sr=/^\s+/;function ir(e){return e&&e.slice(0,or(e)+1).replace(sr,"")}var ar=ir;function cr(e){var t=typeof e;return e!=null&&(t=="object"||t=="function")}var lr=cr,fr=ar,re=lr,ur=K,ne=0/0,dr=/^[-+]0x[0-9a-f]+$/i,hr=/^0b[01]+$/i,pr=/^0o[0-7]+$/i,mr=parseInt;function br(e){if(typeof e=="number")return e;if(ur(e))return ne;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||pr.test(e)?mr(e.slice(2),r?2:8):dr.test(e)?ne:+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 oe=Sr;const _r=e=>{const t=n.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=n.ref({x:0,y:0}),{isFocused:s}=_r(t),o=i=>{var c,b;if(!s.value)return;const a=(c=n.unref(e))==null?void 0:c.getBoundingClientRect(),l=(b=n.unref(t))==null?void 0:b.getBoundingClientRect();if(!a||!l)return;const f=l.top-a.top,m=l.left-a.left,d=oe(f+i.movementY,0,a.height-l.height),g=oe(m+i.movementX,0,a.width-l.width),$=d/a.height*100,S=g/a.width*100;r.value={y:$,x:S}};return y.useEventListener("mousemove",o),{position:r,isFocused:s}};var Er="";const kr={class:"track-wrapper"},$r=n.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}},emits:["update:modelValue"],setup(e,{emit:t}){const r=e,s=()=>r.position==="bottom"||r.position==="top",o=()=>s()?"width":"height",i=()=>s()?"height":"width",a=()=>s()?"left":"top",l=n.computed(()=>({[a()]:te(r.modelValue),[o()]:te(r.size,"size"),[i()]:O(r.thickness,"thickness")})),f=n.computed(()=>({[i()]:O(r.thickness,"thickness")})),m=n.computed(()=>({["scrollbar--focused"]:S.value,[`scrollbar--${r.position}`]:!0})),d=n.ref(),g=n.ref(),{position:$,isFocused:S}=vr(g,d);n.watch($,({x:b,y:_})=>{const j=s()?b:_;t("update:modelValue",j)});const c=n.computed(()=>({horizontal:s(),vertical:!s(),placement:s()?"horizontal":"vertical",focused:S.value}));return(b,_)=>(n.openBlock(),n.createElementBlock("div",{class:n.normalizeClass(["scrollbar",n.unref(m)]),style:n.normalizeStyle(n.unref(f)),ref_key:"scrollbarRef",ref:g},[n.createElementVNode("div",{class:"thumb-wrapper",style:n.normalizeStyle(n.unref(l)),ref_key:"thumbRef",ref:d},[n.renderSlot(b.$slots,"thumb",n.normalizeProps(n.guardReactiveProps(n.unref(c))),()=>[n.createElementVNode("div",{class:"thumb thumb--default",style:n.normalizeStyle({background:e.color})},null,4)])],4),n.createElementVNode("div",kr,[n.renderSlot(b.$slots,"track",n.normalizeProps(n.guardReactiveProps(n.unref(c))),()=>[n.createElementVNode("div",{class:"track track--default",style:n.normalizeStyle({background:e.trackColor})},null,4)])])],6))}});var jr="",Tr=(e,t)=>{const r=e.__vccOpts||e;for(const[s,o]of t)r[s]=o;return r};const Rr={class:"vue-custom-scrollbar"};var wr=Tr(n.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},thickness:{type:[String,Number]},color:{type:String,default:"#9d4edd"},trackColor:{type:String,default:"#3c096c"}},setup(e){const t=e,{scrollbarSize:r}=ke(),s=n.computed(()=>t.thickness||r.value),o=n.computed(()=>{if(!t.inner)return{padding:[t.top,t.right,t.bottom,t.left].map(c=>c?O(s.value,"thickness"):"0").join(" ")}}),i=n.ref(),a=n.ref(),l=$e(i),{width:f,height:m}=y.useElementSize(i),{width:d,height:g}=y.useElementSize(a),$=n.computed(()=>({x:f.value/d.value*100,y:m.value/g.value*100})),S=n.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,b)=>(n.openBlock(),n.createElementBlock("div",Rr,[n.createElementVNode("div",{class:"vue-custom-scrollbar__scrollable",ref_key:"scrollableRef",ref:i},[n.createElementVNode("div",{class:"vue-custom-scrollbar__inner",style:n.normalizeStyle(n.unref(o)),ref_key:"innerRef",ref:a},[n.renderSlot(c.$slots,"default",{},void 0,!0)],4)],512),(n.openBlock(!0),n.createElementBlock(n.Fragment,null,n.renderList(n.unref(S),({main:_,position:j})=>(n.openBlock(),n.createBlock($r,{key:j,size:n.unref($)[_],position:j,thickness:n.unref(s),color:e.color,trackColor:e.trackColor,modelValue:n.unref(l)[_],"onUpdate:modelValue":T=>n.unref(l)[_]=T},{thumb:n.withCtx(T=>[n.renderSlot(c.$slots,"thumb",n.normalizeProps(n.guardReactiveProps(T)),void 0,!0)]),track:n.withCtx(T=>[n.renderSlot(c.$slots,"track",n.normalizeProps(n.guardReactiveProps(T)),void 0,!0)]),_:2},1032,["size","position","thickness","color","trackColor","modelValue","onUpdate:modelValue"]))),128))]))}}),[["__scopeId","data-v-087e0248"]]);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 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"}})});

package.json

 {
   "name": "@m0ksem/vue-custom-scrollbar",
-  "version": "0.0.3",
+  "version": "0.0.4",
   "main": "./dist/vue-custom-scrollbar.js",
@@ -13,4 +13,3 @@ "module": "./dist/vue-custom-scrollbar.mjs",
     "preview": "vite preview",
-    "prepack": "npm run build",
-    "publish": "npm publish --access public"
+    "prepack": "npm run build"
   },
@@ -17,0 +16,0 @@ "peerDependencies": {

No alert changes

Improved metrics

Total package byte prevSize

47929

increased by3.34%

Lines of code

1004

increased by4.58%

No dependency changes