@slipmatio/control-knob - npm Package Compare versions

Comparing version 0.0.0-alpha.4 to 0.0.1

dist/index.es.js

@@ -72,3 +72,3 @@ import { defineComponent, ref, computed, watch, onBeforeUnmount, openBlock, createElementBlock, unref, normalizeClass, withModifiers, createElementVNode, createCommentVNode, toDisplayString } from "vue";
   setup(__props, { emit }) {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z;
+    var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _A;
     const props = __props;
@@ -90,21 +90,21 @@ const knobElement = ref(0);
     const showValue = ((_f = props.options) == null ? void 0 : _f.showValue) === void 0 ? true : (_g = props.options) == null ? void 0 : _g.showTick;
-    const showNonDefaultValue = ((_h = props.options) == null ? void 0 : _h.showNonDefaultValue) || false;
-    const tickLength = ((_i = props.options) == null ? void 0 : _i.tickLength) || 18;
-    const tickOffset = ((_j = props.options) == null ? void 0 : _j.tickOffset) || 10;
-    const tickStroke = ((_k = props.options) == null ? void 0 : _k.tickStroke) || 3;
-    const rimStroke = ((_l = props.options) == null ? void 0 : _l.rimStroke) || 11;
-    const valueArchStroke = ((_m = props.options) == null ? void 0 : _m.valueArchStroke) || 11;
-    const bgRadius = ((_n = props.options) == null ? void 0 : _n.bgRadius) || 34;
-    const wheelModifierFactor = ((_o = props.options) == null ? void 0 : _o.wheelFactor) || 10;
-    const keyModifierFactor = ((_p = props.options) == null ? void 0 : _p.keyFactor) || 10;
-    const tabIndex = ((_q = props.options) == null ? void 0 : _q.tabIndex) || 0;
-    const ariaLabel = ((_r = props.options) == null ? void 0 : _r.ariaLabel) || "Knob";
-    const valueTextX = ((_s = props.options) == null ? void 0 : _s.valueTextX) || 50;
-    const valueTextY = ((_t = props.options) == null ? void 0 : _t.valueTextY) || 62;
-    const svgClass = ((_u = props.options) == null ? void 0 : _u.svgClass) || "select-none";
-    const bgClass = ((_v = props.options) == null ? void 0 : _v.bgClass) || "text-[#868686]";
-    const rimClass = ((_w = props.options) == null ? void 0 : _w.rimClass) || "text-[#393939]";
-    const valueArchClass = ((_x = props.options) == null ? void 0 : _x.valueArchClass) || "text-[#53d769]";
-    const tickClass = ((_y = props.options) == null ? void 0 : _y.tickClass) || "text-black";
-    const valueTextClass = ((_z = props.options) == null ? void 0 : _z.valueTextClass) || "text-gray-50 text-[30px] font-normal font-mono";
+    const hideDefaultValue = ((_h = props.options) == null ? void 0 : _h.hideDefaultValue) === void 0 ? true : (_i = props.options) == null ? void 0 : _i.hideDefaultValue;
+    const tickLength = ((_j = props.options) == null ? void 0 : _j.tickLength) || 18;
+    const tickOffset = ((_k = props.options) == null ? void 0 : _k.tickOffset) || 10;
+    const tickStroke = ((_l = props.options) == null ? void 0 : _l.tickStroke) || 3;
+    const rimStroke = ((_m = props.options) == null ? void 0 : _m.rimStroke) || 11;
+    const valueArchStroke = ((_n = props.options) == null ? void 0 : _n.valueArchStroke) || 11;
+    const bgRadius = ((_o = props.options) == null ? void 0 : _o.bgRadius) || 34;
+    const wheelModifierFactor = ((_p = props.options) == null ? void 0 : _p.wheelFactor) || 10;
+    const keyModifierFactor = ((_q = props.options) == null ? void 0 : _q.keyFactor) || 10;
+    const tabIndex = ((_r = props.options) == null ? void 0 : _r.tabIndex) || 0;
+    const ariaLabel = ((_s = props.options) == null ? void 0 : _s.ariaLabel) || "Knob";
+    const valueTextX = ((_t = props.options) == null ? void 0 : _t.valueTextX) || 50;
+    const valueTextY = ((_u = props.options) == null ? void 0 : _u.valueTextY) || 62;
+    const svgClass = ((_v = props.options) == null ? void 0 : _v.svgClass) || "select-none";
+    const bgClass = ((_w = props.options) == null ? void 0 : _w.bgClass) || "text-[#868686]";
+    const rimClass = ((_x = props.options) == null ? void 0 : _x.rimClass) || "text-[#393939]";
+    const valueArchClass = ((_y = props.options) == null ? void 0 : _y.valueArchClass) || "text-[#53d769]";
+    const tickClass = ((_z = props.options) == null ? void 0 : _z.tickClass) || "text-black";
+    const valueTextClass = ((_A = props.options) == null ? void 0 : _A.valueTextClass) || "text-gray-50 text-[30px] font-normal font-mono";
     const startValue = vModel.value;
@@ -320,3 +320,3 @@ const tickStartX = computed(() => {
         }, null, 10, _hoisted_5)) : createCommentVNode("", true),
-        unref(showValue) && (unref(showNonDefaultValue) || unref(startValue) !== unref(vModel)) ? (openBlock(), createElementBlock("text", {
+        unref(showValue) && (!unref(hideDefaultValue) || unref(startValue) !== unref(vModel)) ? (openBlock(), createElementBlock("text", {
           key: 2,
@@ -323,0 +323,0 @@ x: unref(valueTextX),

dist/index.umd.js

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

dist/src/ControlKnob.vue.d.ts

@@ -22,3 +22,3 @@ import type { DefineComponent, Ref, WritableComputedRef, ComputedRef, ComponentOptionsMixin, VNodeProps, AllowedComponentProps, ComponentCustomProps, ExtractPropTypes } from 'vue';
             showValue?: boolean | undefined;
-            showNonDefaultValue?: boolean | undefined;
+            hideDefaultValue?: boolean | undefined;
             tickLength?: number | undefined;
@@ -51,3 +51,3 @@ tickOffset?: number | undefined;
     showValue: boolean | undefined;
-    showNonDefaultValue: boolean;
+    hideDefaultValue: boolean;
     tickLength: number;
@@ -54,0 +54,0 @@ tickOffset: number;

package.json

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

README.md

@@ -1,10 +0,18 @@
-# Control Knob
+# Vue Control Knob
 
-Features:
+Rotary control knob component for Vue 3 that behaves like native audio app controls in Logic Pro or Ableton Live. Component is fully customizable and rendered as an ARIA-friendly SVG element.
 
-- Works as close as possible to native controls like in Logic Pro or Ableton Live
-- Moves only with vertical mouse movement
-- Option-click (alt-click) resets the value to default
-- Precice mode w/ shift + movement
-- Supports keyboard, mouse & wheel control
+![Screenshot](src/assets/knob-screenshot.webp)
+![Screenshot](src/assets/knob-screenshot2.webp)
+
+## Features:
+
+- Supports **keyboard, mouse & wheel control**
+- Changes input only with **vertical mouse movement**
+- **Precice mode** using shift + movement
+- **Reset to default** with Option-click (alt-click)
+- **Zero dependencies** (apart from Vue 3)
+- **Fully configurable** and **Tailwind CSS -friendly** styles
+- Witten in **TypeScript**, ships with typings
+
 ## Installation
@@ -14,3 +22,50 @@
 1. Import Vue component to your project: `import ControlKnob from '@slipmatio/control-knob`
+2. Configure v-model and options
 
+### Configuration
+
+All configuration options are optional. The options referencing inner coordinate positions are based on 100x100 coordinate system that is not affected by the imageSize.
+
+| Option | Default | Description |
+| --- | --- | --- |
+| imageSize | 40 | Rendered SVG width and lenght in pixels. |
+| minValue | 0 | Minimum value of the knob v-model. |
+| maxValue | 100 | Maximum value of the knob v-model. |
+| showTick | true | Show visible marker of the knob position. |
+| showValue | true | Show value label inside the knob. |
+| hideDefaultValue | false | Hide value label if value hasn't been changed. |
+| tickLength | 18 | Tick length in pixels. |
+| tickOffset | 10 | Tick offset in pixels. |
+| tickStroke | 3 | Tick stroke width. |
+| rimStroke | 11 | Outer rim stroke width. |
+| valueArchStroke | 11 | Value arch stroke width. |
+| bgRadius | 34 | Radius of the background circle. |
+| wheelFactor | 10 | Modifier to factor any mousewheel ticks. |
+| keyFactor | 10 | Modifier to factor any arrow-key presses. |
+| tabIndex | 0 | Tabindex for the HTML element. |
+| ariaLabel | 'Knob' | ARIA label for the HTML element. |
+| valueTextX | 50 | X-position of the value text label. |
+| valueTextY | 62 | Y-position of the value text label. |
+| svgClass | 'select-none' | CSS class for the SVG element. |
+| bgClass | 'text-[#868686]' | CSS class for the background circle. |
+| rimClass | 'text-[#393939]' | CSS class for the outer rim. |
+| valueArchClass | 'text-[#53d769]' | CSS class for the value arch. |
+| tickClass | 'text-black' | CSS class for the tick line. |
+| valueTextClass | 'text-gray-50 text-[30px] font-normal font-mono' | CSS class for the value text. |
+
+
+**Note** that if you're using Tailwind CSS with automatic purge, you'll probably want to add the default classes as options so PurgeCSS catches them (or you can just whutelist them):
+
+Default Tailwind CSS classes:
+
+```js
+const options = {
+  svgClass: 'select-none',
+  bgClass: 'text-[#868686]',
+  rimClass: 'text-[#393939]',
+  valueArchClass: 'text-[#53d769]',
+  tickClass: 'text-black',
+  valueTextClass: 'text-gray-50 text-[30px] font-normal font-mono',
+}
+```
 ## Development
@@ -32,2 +87,6 @@
 
-Contributions are welcome! Please follow the [code of conduct](https://www.contributor-covenant.org/version/2/0/code_of_conduct/) when interacting with others.
+Contributions are welcome! Please follow the [code of conduct](https://www.contributor-covenant.org/version/2/0/code_of_conduct/) when interacting with others.
+
+## Elsewhere
+
+[Follow @uninen](https://twitter.com/uninen) on Twitter

No alert changes

Improved metrics

Total package byte prevSize

67201

increased by4.45%

Number of lines in readme file

90

increased by190.32%

No dependency changes