@slipmatio/control-knob - npm Package Compare versions

Comparing version 0.0.0-alpha.3 to 0.0.0-alpha.4

dist/index.es.js

@@ -330,3 +330,3 @@ import { defineComponent, ref, computed, watch, onBeforeUnmount, openBlock, createElementBlock, unref, normalizeClass, withModifiers, createElementVNode, createCommentVNode, toDisplayString } from "vue";
 });
-export { _sfc_main as ControlKnob };
+export { _sfc_main as default };
 //# sourceMappingURL=index.es.js.map

dist/index.umd.js

@@ -1,2 +0,2 @@
-(function(f,e){typeof exports=="object"&&typeof module!="undefined"?e(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],e):(f=typeof globalThis!="undefined"?globalThis:f||self,e(f.ControlKnob={},f.Vue))})(this,function(f,e){"use strict";function c(a){return a*Math.PI/180}function ue(a,u=13){let t;return(...s)=>{t?clearTimeout(t):a.apply(this,s),t=setTimeout(()=>{t=void 0},u)}}function fe(a,u,t=!1){let s=150;t&&(s=s*10);const r=(420-120)/s;return u*r}function I(a,u,t){let s;const r=u-a;return t===120?s=0:t===420?s=1:s=(t-120)/300,a+r*s}function w(a,u,t){let s;const r=u-a;return t===a?s=0:t===u?s=1:s=(t-a)/r,120+300*s}const de=["width","height","aria-label","aria-valuemin","aria-valuemax","aria-valuenow","tabindex","onClick"],me=["cx","cy","r"],Ae=["stroke-width"],pe=["d","stroke-width"],Ee=["x1","y1","x2","y2","stroke-width"],he=["x","y"],ke=e.defineComponent({props:{modelValue:null,options:null},emits:["update:modelValue"],setup(a,{emit:u}){var O,T,U,F,$,Y,H,W,z,K,P,j,q,J,Q,Z,ee,te,oe,ne,se,le,ae,re,ie,ce;const t=a,s=e.ref(0),n=e.ref(120),r=e.computed({get(){return t.modelValue},set(o){u("update:modelValue",o)}}),L=((O=t.options)==null?void 0:O.imageSize)||40,A=((T=t.options)==null?void 0:T.minValue)||0,p=((U=t.options)==null?void 0:U.maxValue)||100,Le=((F=t.options)==null?void 0:F.showTick)===void 0?!0:($=t.options)==null?void 0:$.showTick,Me=((Y=t.options)==null?void 0:Y.showValue)===void 0?!0:(H=t.options)==null?void 0:H.showTick,_e=((W=t.options)==null?void 0:W.showNonDefaultValue)||!1,N=((z=t.options)==null?void 0:z.tickLength)||18,V=((K=t.options)==null?void 0:K.tickOffset)||10,ve=((P=t.options)==null?void 0:P.tickStroke)||3,Ie=((j=t.options)==null?void 0:j.rimStroke)||11,we=((q=t.options)==null?void 0:q.valueArchStroke)||11,Ne=((J=t.options)==null?void 0:J.bgRadius)||34,Ve=((Q=t.options)==null?void 0:Q.wheelFactor)||10,ge=((Z=t.options)==null?void 0:Z.keyFactor)||10,ye=((ee=t.options)==null?void 0:ee.tabIndex)||0,Ce=((te=t.options)==null?void 0:te.ariaLabel)||"Knob",xe=((oe=t.options)==null?void 0:oe.valueTextX)||50,Se=((ne=t.options)==null?void 0:ne.valueTextY)||62,Xe=((se=t.options)==null?void 0:se.svgClass)||"select-none",Re=((le=t.options)==null?void 0:le.bgClass)||"text-[#868686]",Ge=((ae=t.options)==null?void 0:ae.rimClass)||"text-[#393939]",be=((re=t.options)==null?void 0:re.valueArchClass)||"text-[#53d769]",Be=((ie=t.options)==null?void 0:ie.tickClass)||"text-black",De=((ce=t.options)==null?void 0:ce.valueTextClass)||"text-gray-50 text-[30px] font-normal font-mono",Oe=r.value,Te=e.computed(()=>50+Math.cos(c(n.value))*(40-N)),Ue=e.computed(()=>50+Math.sin(c(n.value))*(40-N)),Fe=e.computed(()=>50+Math.cos(c(n.value))*(40-V)),$e=e.computed(()=>50+Math.sin(c(n.value))*(40-V)),g=50+-.5*40,y=50+Math.sin(c(120))*40,Ye=50+.5*40,He=50+Math.sin(c(420))*40,We=c(120),ze=e.computed(()=>c(n.value)),Ke=e.computed(()=>Math.abs(We-ze.value)<Math.PI?0:1),Pe=e.ref(1),je=e.computed(()=>50+Math.cos(c(n.value))*40),qe=e.computed(()=>50+Math.sin(c(n.value))*40),Je=`M ${g} ${y} A ${40} ${40} 0 1 1 ${Ye} ${He}`,Qe=e.computed(()=>`M ${g} ${y} A ${40} ${40} 0 ${Ke.value} ${Pe.value} ${je.value} ${qe.value}`);let E=0,h=0;const k=e.ref(!1),M=e.ref(!1),C=e.ref(!1),d=e.ref(!1),m=e.ref(!1),x=o=>{k.value=!0,C.value=!1,E=o.clientY};function Ze(o){if(C.value=!0,k.value){h=o.clientY;let l;const i=E-h;if(i<0?l="down":l="up",E!==h&&(l==="up"&&n.value<420||l==="down"&&n.value>120)){const v=fe(E,i,m.value);n.value+v<120?n.value=120:n.value+v>420?n.value=420:n.value+=v,r.value=I(A,p,n.value)}E=h}}const S=ue(Ze),X=()=>{k.value=!1};function et(){n.value=120}function _(o){o>n.value&&(o<420?n.value=o:n.value=420),o<n.value&&(o<n.value&&o>120?n.value=o:n.value=120),r.value=I(A,p,n.value)}function R(o){o.key==="Shift"&&(m.value=!0),d.value&&m.value&&(o.key==="ArrowUp"||o.key==="ArrowDown")&&o.preventDefault()}function G(o){o.key==="Shift"&&(m.value=!1);let l;const i=m.value?1:ge;d.value&&o.key==="ArrowUp"&&(l=n.value+1*i,_(l),m.value&&o.stopPropagation()),d.value&&o.key==="ArrowDown"&&(l=n.value-1*i,_(l))}function b(o){let l;const i=o.shiftKey?1:Ve;!o.shiftKey&&o.deltaY<0||o.shiftKey&&o.deltaX<0?l=n.value+1*i:l=n.value-1*i,_(l)}function B(){M.value=!0}function D(){M.value=!1}return e.watch(()=>s.value,(o,l)=>{if(o&&!l){o.addEventListener("mousedown",x),o.addEventListener("wheel",b),o.addEventListener("mouseenter",B),o.addEventListener("mouseleave",D),document.addEventListener("mouseup",X),document.addEventListener("mousemove",S),document.addEventListener("keydown",R),document.addEventListener("keyup",G);const i=w(A,p,t.modelValue);n.value=i}}),e.watch(()=>t.modelValue,o=>{if(M.value===!1&&k.value===!1&&d.value===!1){const l=w(A,p,o);n.value=l}}),e.onBeforeUnmount(()=>{s.value.removeEventListener("mousedown",x),s.value.removeEventListener("wheel",b),s.value.removeEventListener("mouseenter",B),s.value.removeEventListener("mouseleave",D),document.removeEventListener("mouseup",X),document.removeEventListener("mousemove",S),document.removeEventListener("keydown",R),document.removeEventListener("keyup",G)}),(o,l)=>(e.openBlock(),e.createElementBlock("svg",{width:e.unref(L),height:e.unref(L),viewBox:"0 0 100 100",ref_key:"knobElement",ref:s,role:"slider","aria-label":e.unref(Ce),"aria-valuemin":e.unref(A),"aria-valuemax":e.unref(p),"aria-valuenow":e.unref(r),tabindex:e.unref(ye),class:e.normalizeClass(e.unref(Xe)),onClick:e.withModifiers(et,["alt"]),onFocus:l[0]||(l[0]=i=>d.value=!0),onBlur:l[1]||(l[1]=i=>d.value=!1)},[e.createElementVNode("circle",{cx:e.unref(50),cy:e.unref(50),r:e.unref(Ne),stroke:"currentColor",fill:"currentColor",class:e.normalizeClass(e.unref(Re)),"stroke-width":1},null,10,me),e.createElementVNode("path",{d:Je,"stroke-width":e.unref(Ie),stroke:"currentColor",fill:"none",class:e.normalizeClass(e.unref(Ge))},null,10,Ae),n.value>120?(e.openBlock(),e.createElementBlock("path",{key:0,d:e.unref(Qe),"stroke-width":e.unref(we),stroke:"currentColor",fill:"none",class:e.normalizeClass(e.unref(be))},null,10,pe)):e.createCommentVNode("",!0),e.unref(Le)?(e.openBlock(),e.createElementBlock("line",{key:1,x1:e.unref(Te),y1:e.unref(Ue),x2:e.unref(Fe),y2:e.unref($e),stroke:"currentColor","stroke-width":e.unref(ve),class:e.normalizeClass(e.unref(Be))},null,10,Ee)):e.createCommentVNode("",!0),e.unref(Me)&&(e.unref(_e)||e.unref(Oe)!==e.unref(r))?(e.openBlock(),e.createElementBlock("text",{key:2,x:e.unref(xe),y:e.unref(Se),"text-anchor":"middle",fill:"currentColor",class:e.normalizeClass(e.unref(De))},e.toDisplayString(Math.ceil(e.unref(r))),11,he)):e.createCommentVNode("",!0)],42,de))}});f.ControlKnob=ke,Object.defineProperty(f,"__esModule",{value:!0}),f[Symbol.toStringTag]="Module"});
+(function(e,E){typeof exports=="object"&&typeof module!="undefined"?module.exports=E(require("vue")):typeof define=="function"&&define.amd?define(["vue"],E):(e=typeof globalThis!="undefined"?globalThis:e||self,e.ControlKnob=E(e.Vue))})(this,function(e){"use strict";function c(a){return a*Math.PI/180}function ue(a,u=13){let t;return(...s)=>{t?clearTimeout(t):a.apply(this,s),t=setTimeout(()=>{t=void 0},u)}}function fe(a,u,t=!1){let s=150;t&&(s=s*10);const r=(420-120)/s;return u*r}function v(a,u,t){let s;const r=u-a;return t===120?s=0:t===420?s=1:s=(t-120)/300,a+r*s}function w(a,u,t){let s;const r=u-a;return t===a?s=0:t===u?s=1:s=(t-a)/r,120+300*s}const de=["width","height","aria-label","aria-valuemin","aria-valuemax","aria-valuenow","tabindex","onClick"],me=["cx","cy","r"],Ae=["stroke-width"],pe=["d","stroke-width"],Ee=["x1","y1","x2","y2","stroke-width"],he=["x","y"];return e.defineComponent({props:{modelValue:null,options:null},emits:["update:modelValue"],setup(a,{emit:u}){var U,O,T,F,$,Y,H,W,z,K,P,j,q,J,Q,Z,ee,te,oe,ne,se,le,ae,re,ie,ce;const t=a,s=e.ref(0),n=e.ref(120),r=e.computed({get(){return t.modelValue},set(o){u("update:modelValue",o)}}),L=((U=t.options)==null?void 0:U.imageSize)||40,m=((O=t.options)==null?void 0:O.minValue)||0,A=((T=t.options)==null?void 0:T.maxValue)||100,ke=((F=t.options)==null?void 0:F.showTick)===void 0?!0:($=t.options)==null?void 0:$.showTick,Le=((Y=t.options)==null?void 0:Y.showValue)===void 0?!0:(H=t.options)==null?void 0:H.showTick,_e=((W=t.options)==null?void 0:W.showNonDefaultValue)||!1,N=((z=t.options)==null?void 0:z.tickLength)||18,V=((K=t.options)==null?void 0:K.tickOffset)||10,Me=((P=t.options)==null?void 0:P.tickStroke)||3,Ie=((j=t.options)==null?void 0:j.rimStroke)||11,ve=((q=t.options)==null?void 0:q.valueArchStroke)||11,we=((J=t.options)==null?void 0:J.bgRadius)||34,Ne=((Q=t.options)==null?void 0:Q.wheelFactor)||10,Ve=((Z=t.options)==null?void 0:Z.keyFactor)||10,Ce=((ee=t.options)==null?void 0:ee.tabIndex)||0,ge=((te=t.options)==null?void 0:te.ariaLabel)||"Knob",xe=((oe=t.options)==null?void 0:oe.valueTextX)||50,ye=((ne=t.options)==null?void 0:ne.valueTextY)||62,Xe=((se=t.options)==null?void 0:se.svgClass)||"select-none",Se=((le=t.options)==null?void 0:le.bgClass)||"text-[#868686]",Re=((ae=t.options)==null?void 0:ae.rimClass)||"text-[#393939]",Ge=((re=t.options)==null?void 0:re.valueArchClass)||"text-[#53d769]",Be=((ie=t.options)==null?void 0:ie.tickClass)||"text-black",De=((ce=t.options)==null?void 0:ce.valueTextClass)||"text-gray-50 text-[30px] font-normal font-mono",be=r.value,Ue=e.computed(()=>50+Math.cos(c(n.value))*(40-N)),Oe=e.computed(()=>50+Math.sin(c(n.value))*(40-N)),Te=e.computed(()=>50+Math.cos(c(n.value))*(40-V)),Fe=e.computed(()=>50+Math.sin(c(n.value))*(40-V)),C=50+-.5*40,g=50+Math.sin(c(120))*40,$e=50+.5*40,Ye=50+Math.sin(c(420))*40,He=c(120),We=e.computed(()=>c(n.value)),ze=e.computed(()=>Math.abs(He-We.value)<Math.PI?0:1),Ke=e.ref(1),Pe=e.computed(()=>50+Math.cos(c(n.value))*40),je=e.computed(()=>50+Math.sin(c(n.value))*40),qe=`M ${C} ${g} A ${40} ${40} 0 1 1 ${$e} ${Ye}`,Je=e.computed(()=>`M ${C} ${g} A ${40} ${40} 0 ${ze.value} ${Ke.value} ${Pe.value} ${je.value}`);let p=0,h=0;const k=e.ref(!1),_=e.ref(!1),x=e.ref(!1),f=e.ref(!1),d=e.ref(!1),y=o=>{k.value=!0,x.value=!1,p=o.clientY};function Qe(o){if(x.value=!0,k.value){h=o.clientY;let l;const i=p-h;if(i<0?l="down":l="up",p!==h&&(l==="up"&&n.value<420||l==="down"&&n.value>120)){const I=fe(p,i,d.value);n.value+I<120?n.value=120:n.value+I>420?n.value=420:n.value+=I,r.value=v(m,A,n.value)}p=h}}const X=ue(Qe),S=()=>{k.value=!1};function Ze(){n.value=120}function M(o){o>n.value&&(o<420?n.value=o:n.value=420),o<n.value&&(o<n.value&&o>120?n.value=o:n.value=120),r.value=v(m,A,n.value)}function R(o){o.key==="Shift"&&(d.value=!0),f.value&&d.value&&(o.key==="ArrowUp"||o.key==="ArrowDown")&&o.preventDefault()}function G(o){o.key==="Shift"&&(d.value=!1);let l;const i=d.value?1:Ve;f.value&&o.key==="ArrowUp"&&(l=n.value+1*i,M(l),d.value&&o.stopPropagation()),f.value&&o.key==="ArrowDown"&&(l=n.value-1*i,M(l))}function B(o){let l;const i=o.shiftKey?1:Ne;!o.shiftKey&&o.deltaY<0||o.shiftKey&&o.deltaX<0?l=n.value+1*i:l=n.value-1*i,M(l)}function D(){_.value=!0}function b(){_.value=!1}return e.watch(()=>s.value,(o,l)=>{if(o&&!l){o.addEventListener("mousedown",y),o.addEventListener("wheel",B),o.addEventListener("mouseenter",D),o.addEventListener("mouseleave",b),document.addEventListener("mouseup",S),document.addEventListener("mousemove",X),document.addEventListener("keydown",R),document.addEventListener("keyup",G);const i=w(m,A,t.modelValue);n.value=i}}),e.watch(()=>t.modelValue,o=>{if(_.value===!1&&k.value===!1&&f.value===!1){const l=w(m,A,o);n.value=l}}),e.onBeforeUnmount(()=>{s.value.removeEventListener("mousedown",y),s.value.removeEventListener("wheel",B),s.value.removeEventListener("mouseenter",D),s.value.removeEventListener("mouseleave",b),document.removeEventListener("mouseup",S),document.removeEventListener("mousemove",X),document.removeEventListener("keydown",R),document.removeEventListener("keyup",G)}),(o,l)=>(e.openBlock(),e.createElementBlock("svg",{width:e.unref(L),height:e.unref(L),viewBox:"0 0 100 100",ref_key:"knobElement",ref:s,role:"slider","aria-label":e.unref(ge),"aria-valuemin":e.unref(m),"aria-valuemax":e.unref(A),"aria-valuenow":e.unref(r),tabindex:e.unref(Ce),class:e.normalizeClass(e.unref(Xe)),onClick:e.withModifiers(Ze,["alt"]),onFocus:l[0]||(l[0]=i=>f.value=!0),onBlur:l[1]||(l[1]=i=>f.value=!1)},[e.createElementVNode("circle",{cx:e.unref(50),cy:e.unref(50),r:e.unref(we),stroke:"currentColor",fill:"currentColor",class:e.normalizeClass(e.unref(Se)),"stroke-width":1},null,10,me),e.createElementVNode("path",{d:qe,"stroke-width":e.unref(Ie),stroke:"currentColor",fill:"none",class:e.normalizeClass(e.unref(Re))},null,10,Ae),n.value>120?(e.openBlock(),e.createElementBlock("path",{key:0,d:e.unref(Je),"stroke-width":e.unref(ve),stroke:"currentColor",fill:"none",class:e.normalizeClass(e.unref(Ge))},null,10,pe)):e.createCommentVNode("",!0),e.unref(ke)?(e.openBlock(),e.createElementBlock("line",{key:1,x1:e.unref(Ue),y1:e.unref(Oe),x2:e.unref(Te),y2:e.unref(Fe),stroke:"currentColor","stroke-width":e.unref(Me),class:e.normalizeClass(e.unref(Be))},null,10,Ee)):e.createCommentVNode("",!0),e.unref(Le)&&(e.unref(_e)||e.unref(be)!==e.unref(r))?(e.openBlock(),e.createElementBlock("text",{key:2,x:e.unref(xe),y:e.unref(ye),"text-anchor":"middle",fill:"currentColor",class:e.normalizeClass(e.unref(De))},e.toDisplayString(Math.ceil(e.unref(r))),11,he)):e.createCommentVNode("",!0)],42,de))}})});
 //# sourceMappingURL=index.umd.js.map

dist/src/lib.d.ts

 import ControlKnob from './ControlKnob.vue';
-export { ControlKnob };
+export default ControlKnob;

package.json

 {
   "name": "@slipmatio/control-knob",
-  "version": "0.0.0-alpha.3",
+  "version": "0.0.0-alpha.4",
   "main": "dist/index.es.js",
@@ -5,0 +5,0 @@ "module": "dist/index.es.js",

No alert changes

Worsened metrics

Total package byte prevSize

64335

decreased by-0.16%

No dependency changes