degree-picker - npm Package Compare versions

Comparing version 0.0.6 to 0.0.7

dist/components/degreePicker.vue.d.ts

@@ -23,8 +23,14 @@ import type { PropType as __PropType } from 'vue';
     };
-    color: {
+    activeColor: {
         type: __PropType<string | undefined>;
         required: false;
+        default: string;
     };
+    bodyColor: {
+        type: __PropType<string | undefined>;
+        required: false;
+        default: string;
+    };
     modelValue: {
-        type: __PropType<any>;
+        type: __PropType<number>;
         required: true;
@@ -61,8 +67,14 @@ };
     };
-    color: {
+    activeColor: {
         type: __PropType<string | undefined>;
         required: false;
+        default: string;
     };
+    bodyColor: {
+        type: __PropType<string | undefined>;
+        required: false;
+        default: string;
+    };
     modelValue: {
-        type: __PropType<any>;
+        type: __PropType<number>;
         required: true;
@@ -81,3 +93,6 @@ };
     "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
-}, {}>;
+}, {
+    activeColor: string | undefined;
+    bodyColor: string | undefined;
+}>;
 export default _sfc_main;

dist/components/degreePickerBody.vue.d.ts

@@ -11,6 +11,10 @@ import type { PropType as __PropType } from 'vue';
     };
-    color: {
+    activeColor: {
         type: __PropType<string | undefined>;
         required: false;
     };
+    bodyColor: {
+        type: __PropType<string | undefined>;
+        required: false;
+    };
     value: {
@@ -41,6 +45,10 @@ type: __PropType<number | null>;
     };
-    color: {
+    activeColor: {
         type: __PropType<string | undefined>;
         required: false;
     };
+    bodyColor: {
+        type: __PropType<string | undefined>;
+        required: false;
+    };
     value: {
@@ -47,0 +55,0 @@ type: __PropType<number | null>;

dist/degree-picker.cjs.js

@@ -1,1 +0,1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const n=require("vue"),U={class:"picker__body"},I={class:"degree-picker-clock__container"},T={class:"degree-picker-clock__inner"},$=n.defineComponent({__name:"degreePickerBody",props:{disabled:{type:Boolean},readonly:{type:Boolean},color:null,value:null,min:null,max:null,step:null},emits:["input","change"],setup(u,{emit:r}){const o=u;n.useCssVars(e=>({"4483ecc0":u.color}));const c=n.ref(null),l=n.reactive({inputValue:o.value,isDragging:!1,valueOnMouseDown:null,valueOnMouseUp:null}),p=n.computed(()=>{const e=[];for(let t=o.min;t<o.max;t=t+o.step)e.push(t);return e}),s=n.computed(()=>o.max-o.min+1),i=n.computed(()=>360/s.value),y=n.computed(()=>i.value*Math.PI/180),_=n.computed(()=>({transform:`rotate(${i.value*(g.value-o.min)}deg)`,backgroundColor:o.value!==null?o.color:void 0})),g=n.computed(()=>o.value==null?o.min:o.value),D=e=>{const t=Math.PI/180;return{x:Math.sin((e-o.min)*y.value+t)*1,y:-Math.cos((e-o.min)*y.value+t)*1}},x=e=>{const{x:t,y:a}=D(e);return{left:`${50+t*50}%`,top:`${50+a*50}%`,backgroundColor:o.value!==null&&e===g.value?o.color:void 0}},V=(e,t)=>{const a=t.x-e.x,d=t.y-e.y;return Math.sqrt(a*a+d*d)},B=(e,t)=>{const a=2*Math.atan2(t.y-e.y-V(e,t),t.x-e.x);return Math.abs(a*180/Math.PI)},w=e=>{const t=(Math.round(e/i.value)+0)%s.value+o.min;return e<360-i.value/2?t:o.min},P=e=>{l.inputValue!==e&&(l.inputValue=e,r("input",e))},C=e=>{l.valueOnMouseDown===null&&(l.valueOnMouseDown=e),l.valueOnMouseUp=e,P(e)},m=e=>{if(e.preventDefault(),!l.isDragging&&e.type!=="click"||!c.value)return;const{width:t,top:a,left:d}=c.value.getBoundingClientRect(),{clientX:O,clientY:b}="touches"in e?e.touches[0]:e,E={x:t/2,y:-t/2},N={x:O-d,y:a-b},z=Math.round(B(E,N)-0+360)%360,S=Math.ceil(15/i.value);let h;for(let k=0;k<S;k++)return h=w(z+k*i.value),C(h)},f=e=>{e.preventDefault(),l.valueOnMouseDown=null,l.valueOnMouseUp=null,l.isDragging=!0,m(e)},v=e=>{e.stopPropagation(),l.isDragging=!1,l.valueOnMouseUp!==null&&r("change",l.valueOnMouseUp)};return n.watch(()=>o.value,e=>l.inputValue=e),(e,t)=>(n.openBlock(),n.createElementBlock("div",U,[n.createElementVNode("div",I,[n.createElementVNode("div",{ref_key:"clock",ref:c,onMousedown:f,onMouseup:v,onMouseleave:t[0]||(t[0]=a=>l.isDragging&&v(a)),onTouchstart:f,onTouchend:v,onMousemove:m,onTouchmove:m,class:n.normalizeClass(["degree-picker-clock",{"degree-picker-clock--indeterminate":u.value==null}])},[n.createElementVNode("div",T,[n.createElementVNode("div",{class:"degree-picker-clock__hand",style:n.normalizeStyle(n.unref(_))},null,4),(n.openBlock(!0),n.createElementBlock(n.Fragment,null,n.renderList(n.unref(p),a=>(n.openBlock(),n.createElementBlock("span",{key:a,class:n.normalizeClass(["degree-picker-clock__item",{"degree-picker-clock__item--active":a===n.unref(g)}]),style:n.normalizeStyle(x(a))},[n.createElementVNode("span",null,n.toDisplayString(a),1)],6))),128))])],34)])]))}});function q(u,r="px"){if(!(u==null||u===""))return isNaN(+u)?String(u):`${Number(u)}${r}`}const M=n.defineComponent({__name:"degreePicker",props:{disabled:{type:Boolean},min:null,max:null,readonly:{type:Boolean},fullWidth:{type:Boolean},color:null,modelValue:null,width:null,step:null},emits:["change","update:modelValue"],setup(u,{emit:r}){const o=u,c=n.reactive({inputDegree:null,lazyInputDegree:null}),l=s=>{c.inputDegree=s,s!==null&&r("update:modelValue",s)},p=()=>{c.inputDegree===c.lazyInputDegree||c.inputDegree===null||(c.lazyInputDegree=c.inputDegree,r("change",c.inputDegree))};return n.onMounted(()=>c.inputDegree=o.modelValue),(s,i)=>(n.openBlock(),n.createElementBlock("div",{style:n.normalizeStyle({width:o.fullWidth?void 0:n.unref(q)(o.width||290)})},[n.createVNode($,{color:u.color,onInput:l,onChange:p,step:u.step||30,min:0,max:359,value:c.inputDegree},null,8,["color","step","value"])],4))}}),R={install:u=>{u.component("degree-picker",M)}};exports.DegreePicker=M;exports.default=R;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const n=require("vue"),S={class:"picker__body"},U={class:"degree-picker-clock__container"},T={class:"degree-picker-clock__inner"},$=n.defineComponent({__name:"degreePickerBody",props:{disabled:{type:Boolean},readonly:{type:Boolean},activeColor:null,bodyColor:null,value:null,min:null,max:null,step:null},emits:["input","change"],setup(l,{emit:r}){const t=l;n.useCssVars(e=>({ec56ea52:l.bodyColor,c972431a:l.activeColor}));const u=n.ref(null),a=n.reactive({inputValue:t.value,isDragging:!1,valueOnMouseDown:null,valueOnMouseUp:null}),p=n.computed(()=>{const e=[];for(let o=t.min;o<t.max;o=o+t.step)e.push(o);return e}),s=n.computed(()=>t.max-t.min+1),i=n.computed(()=>360/s.value),f=n.computed(()=>i.value*Math.PI/180),M=n.computed(()=>({transform:`rotate(${i.value*(v.value-t.min)}deg)`,backgroundColor:t.value!==null?t.activeColor:void 0})),v=n.computed(()=>t.value==null?t.min:t.value),D=e=>{const o=Math.PI/180;return{x:Math.sin((e-t.min)*f.value+o)*1,y:-Math.cos((e-t.min)*f.value+o)*1}},x=e=>{const{x:o,y:c}=D(e);return{left:`${50+o*50}%`,top:`${50+c*50}%`,backgroundColor:t.value!==null&&e===v.value?t.activeColor:void 0}},C=(e,o)=>{const c=o.x-e.x,d=o.y-e.y;return Math.sqrt(c*c+d*d)},V=(e,o)=>{const c=2*Math.atan2(o.y-e.y-C(e,o),o.x-e.x);return Math.abs(c*180/Math.PI)},B=e=>{const o=(Math.round(e/i.value)+0)%s.value+t.min;return e<360-i.value/2?o:t.min},b=e=>{a.inputValue!==e&&(a.inputValue=e,r("input",e))},w=e=>{a.valueOnMouseDown===null&&(a.valueOnMouseDown=e),a.valueOnMouseUp=e,b(e)},g=e=>{if(e.preventDefault(),!a.isDragging&&e.type!=="click"||!u.value)return;const{width:o,top:c,left:d}=u.value.getBoundingClientRect(),{clientX:P,clientY:O}="touches"in e?e.touches[0]:e,E={x:o/2,y:-o/2},N={x:P-d,y:c-O},z=Math.round(V(E,N)-0+360)%360,I=Math.ceil(15/i.value);let h;for(let y=0;y<I;y++)return h=B(z+y*i.value),w(h)},k=e=>{e.preventDefault(),a.valueOnMouseDown=null,a.valueOnMouseUp=null,a.isDragging=!0,g(e)},m=e=>{e.stopPropagation(),a.isDragging=!1,a.valueOnMouseUp!==null&&r("change",a.valueOnMouseUp)};return n.watch(()=>t.value,e=>a.inputValue=e),(e,o)=>(n.openBlock(),n.createElementBlock("div",S,[n.createElementVNode("div",U,[n.createElementVNode("div",{ref_key:"clock",ref:u,onMousedown:k,onMouseup:m,onMouseleave:o[0]||(o[0]=c=>a.isDragging&&m(c)),onTouchstart:k,onTouchend:m,onMousemove:g,onTouchmove:g,class:n.normalizeClass(["degree-picker-clock",{"degree-picker-clock--indeterminate":l.value==null}])},[n.createElementVNode("div",T,[n.createElementVNode("div",{class:"degree-picker-clock__hand",style:n.normalizeStyle(n.unref(M))},null,4),(n.openBlock(!0),n.createElementBlock(n.Fragment,null,n.renderList(n.unref(p),c=>(n.openBlock(),n.createElementBlock("span",{key:c,class:n.normalizeClass(["degree-picker-clock__item",{"degree-picker-clock__item--active":c===n.unref(v)}]),style:n.normalizeStyle(x(c))},[n.createElementVNode("span",null,n.toDisplayString(c),1)],6))),128))])],34)])]))}});const q=(l,r)=>{const t=l.__vccOpts||l;for(const[u,a]of r)t[u]=a;return t},R=q($,[["__scopeId","data-v-0c9a5d7a"]]);function W(l,r="px"){if(!(l==null||l===""))return isNaN(+l)?String(l):`${Number(l)}${r}`}const _=n.defineComponent({__name:"degreePicker",props:{disabled:{type:Boolean},min:null,max:null,readonly:{type:Boolean},fullWidth:{type:Boolean},activeColor:{default:"#567a0d"},bodyColor:{default:"#eee"},modelValue:null,width:null,step:null},emits:["change","update:modelValue"],setup(l,{emit:r}){const t=l,u=n.reactive({inputDegree:null,lazyInputDegree:null}),a=s=>{u.inputDegree=s,s!==null&&r("update:modelValue",s)},p=()=>{u.inputDegree===u.lazyInputDegree||u.inputDegree===null||(u.lazyInputDegree=u.inputDegree,r("change",u.inputDegree))};return n.onMounted(()=>u.inputDegree=t.modelValue),(s,i)=>(n.openBlock(),n.createElementBlock("div",{style:n.normalizeStyle({width:t.fullWidth?void 0:n.unref(W)(t.width||290)})},[n.createVNode(R,{"active-color":l.activeColor,"body-color":l.activeColor,onInput:a,onChange:p,step:l.step||30,min:0,max:359,value:u.inputDegree},null,8,["active-color","body-color","step","value"])],4))}}),j={install:l=>{l.component("degree-picker",_)}};exports.DegreePicker=_;exports.default=j;

dist/degree-picker.es.js

@@ -1,3 +0,3 @@
-import { defineComponent as B, useCssVars as A, ref as F, reactive as P, computed as i, watch as H, openBlock as g, createElementBlock as v, createElementVNode as d, normalizeClass as w, normalizeStyle as _, unref as m, Fragment as L, renderList as X, toDisplayString as Y, onMounted as j, createVNode as G } from "vue";
-const J = { class: "picker__body" }, K = { class: "degree-picker-clock__container" }, Q = { class: "degree-picker-clock__inner" }, Z = /* @__PURE__ */ B({
+import { defineComponent as b, useCssVars as A, ref as F, reactive as w, computed as i, watch as H, openBlock as g, createElementBlock as v, createElementVNode as d, normalizeClass as V, normalizeStyle as M, unref as m, Fragment as L, renderList as X, toDisplayString as Y, onMounted as j, createVNode as G } from "vue";
+const J = { class: "picker__body" }, K = { class: "degree-picker-clock__container" }, Q = { class: "degree-picker-clock__inner" }, Z = /* @__PURE__ */ b({
   __name: "degreePickerBody",
@@ -7,3 +7,4 @@ props: {
     readonly: { type: Boolean },
-    color: null,
+    activeColor: null,
+    bodyColor: null,
     value: null,
@@ -15,64 +16,65 @@ min: null,
   emits: ["input", "change"],
-  setup(o, { emit: s }) {
-    const t = o;
+  setup(t, { emit: c }) {
+    const n = t;
     A((e) => ({
-      "4483ecc0": o.color
+      ec56ea52: t.bodyColor,
+      c972431a: t.activeColor
     }));
-    const a = F(null), l = P({
-      inputValue: t.value,
+    const a = F(null), l = w({
+      inputValue: n.value,
       isDragging: !1,
       valueOnMouseDown: null,
       valueOnMouseUp: null
-    }), h = i(() => {
+    }), y = i(() => {
       const e = [];
-      for (let n = t.min; n < t.max; n = n + t.step)
-        e.push(n);
+      for (let o = n.min; o < n.max; o = o + n.step)
+        e.push(o);
       return e;
-    }), r = i(() => t.max - t.min + 1), c = i(() => 360 / r.value), D = i(() => c.value * Math.PI / 180), O = i(() => ({
-      transform: `rotate(${c.value * (y.value - t.min)}deg)`,
-      backgroundColor: t.value !== null ? t.color : void 0
-    })), y = i(
-      () => t.value == null ? t.min : t.value
-    ), C = (e) => {
-      const n = Math.PI / 180;
+    }), r = i(() => n.max - n.min + 1), s = i(() => 360 / r.value), D = i(() => s.value * Math.PI / 180), B = i(() => ({
+      transform: `rotate(${s.value * (f.value - n.min)}deg)`,
+      backgroundColor: n.value !== null ? n.activeColor : void 0
+    })), f = i(
+      () => n.value == null ? n.min : n.value
+    ), P = (e) => {
+      const o = Math.PI / 180;
       return {
-        x: Math.sin((e - t.min) * D.value + n) * 1,
-        y: -Math.cos((e - t.min) * D.value + n) * 1
+        x: Math.sin((e - n.min) * D.value + o) * 1,
+        y: -Math.cos((e - n.min) * D.value + o) * 1
       };
-    }, U = (e) => {
-      const { x: n, y: u } = C(e);
+    }, O = (e) => {
+      const { x: o, y: u } = P(e);
       return {
-        left: `${50 + n * 50}%`,
+        left: `${50 + o * 50}%`,
         top: `${50 + u * 50}%`,
-        backgroundColor: t.value !== null && e === y.value ? t.color : void 0
+        backgroundColor: n.value !== null && e === f.value ? n.activeColor : void 0
       };
-    }, b = (e, n) => {
-      const u = n.x - e.x, p = n.y - e.y;
+    }, I = (e, o) => {
+      const u = o.x - e.x, p = o.y - e.y;
       return Math.sqrt(u * u + p * p);
-    }, I = (e, n) => {
-      const u = 2 * Math.atan2(n.y - e.y - b(e, n), n.x - e.x);
+    }, U = (e, o) => {
+      const u = 2 * Math.atan2(o.y - e.y - I(e, o), o.x - e.x);
       return Math.abs(u * 180 / Math.PI);
     }, T = (e) => {
-      const n = (Math.round(e / c.value) + 0) % r.value + t.min;
-      return e < 360 - c.value / 2 ? n : t.min;
+      const o = (Math.round(e / s.value) + 0) % r.value + n.min;
+      return e < 360 - s.value / 2 ? o : n.min;
     }, $ = (e) => {
-      l.inputValue !== e && (l.inputValue = e, s("input", e));
+      l.inputValue !== e && (l.inputValue = e, c("input", e));
     }, z = (e) => {
       l.valueOnMouseDown === null && (l.valueOnMouseDown = e), l.valueOnMouseUp = e, $(e);
-    }, f = (e) => {
+    }, h = (e) => {
       if (e.preventDefault(), !l.isDragging && e.type !== "click" || !a.value)
         return;
-      const { width: n, top: u, left: p } = a.value.getBoundingClientRect(), { clientX: N, clientY: S } = "touches" in e ? e.touches[0] : e, E = { x: n / 2, y: -n / 2 }, R = { x: N - p, y: u - S }, W = Math.round(I(E, R) - 0 + 360) % 360, q = Math.ceil(15 / c.value);
-      let V;
-      for (let M = 0; M < q; M++)
-        return V = T(W + M * c.value), z(V);
+      const { width: o, top: u, left: p } = a.value.getBoundingClientRect(), { clientX: N, clientY: S } = "touches" in e ? e.touches[0] : e, E = { x: o / 2, y: -o / 2 }, R = { x: N - p, y: u - S }, W = Math.round(U(E, R) - 0 + 360) % 360, q = Math.ceil(15 / s.value);
+      let C;
+      for (let _ = 0; _ < q; _++)
+        return C = T(W + _ * s.value), z(C);
     }, x = (e) => {
-      e.preventDefault(), l.valueOnMouseDown = null, l.valueOnMouseUp = null, l.isDragging = !0, f(e);
+      e.preventDefault(), l.valueOnMouseDown = null, l.valueOnMouseUp = null, l.isDragging = !0, h(e);
     }, k = (e) => {
-      e.stopPropagation(), l.isDragging = !1, l.valueOnMouseUp !== null && s("change", l.valueOnMouseUp);
+      e.stopPropagation(), l.isDragging = !1, l.valueOnMouseUp !== null && c("change", l.valueOnMouseUp);
     };
     return H(
-      () => t.value,
+      () => n.value,
       (e) => l.inputValue = e
-    ), (e, n) => (g(), v("div", J, [
+    ), (e, o) => (g(), v("div", J, [
       d("div", K, [
@@ -84,9 +86,9 @@ d("div", {
           onMouseup: k,
-          onMouseleave: n[0] || (n[0] = (u) => l.isDragging && k(u)),
+          onMouseleave: o[0] || (o[0] = (u) => l.isDragging && k(u)),
           onTouchstart: x,
           onTouchend: k,
-          onMousemove: f,
-          onTouchmove: f,
-          class: w(["degree-picker-clock", {
-            "degree-picker-clock--indeterminate": o.value == null
+          onMousemove: h,
+          onTouchmove: h,
+          class: V(["degree-picker-clock", {
+            "degree-picker-clock--indeterminate": t.value == null
           }])
@@ -97,10 +99,10 @@ }, [
               class: "degree-picker-clock__hand",
-              style: _(m(O))
+              style: M(m(B))
             }, null, 4),
-            (g(!0), v(L, null, X(m(h), (u) => (g(), v("span", {
+            (g(!0), v(L, null, X(m(y), (u) => (g(), v("span", {
               key: u,
-              class: w(["degree-picker-clock__item", {
-                "degree-picker-clock__item--active": u === m(y)
+              class: V(["degree-picker-clock__item", {
+                "degree-picker-clock__item--active": u === m(f)
               }]),
-              style: _(U(u))
+              style: M(O(u))
             }, [
@@ -115,7 +117,13 @@ d("span", null, Y(u), 1)
 });
-function ee(o, s = "px") {
-  if (!(o == null || o === ""))
-    return isNaN(+o) ? String(o) : `${Number(o)}${s}`;
+const ee = (t, c) => {
+  const n = t.__vccOpts || t;
+  for (const [a, l] of c)
+    n[a] = l;
+  return n;
+}, ne = /* @__PURE__ */ ee(Z, [["__scopeId", "data-v-0c9a5d7a"]]);
+function oe(t, c = "px") {
+  if (!(t == null || t === ""))
+    return isNaN(+t) ? String(t) : `${Number(t)}${c}`;
 }
-const ne = /* @__PURE__ */ B({
+const te = /* @__PURE__ */ b({
   __name: "degreePicker",
@@ -128,3 +136,4 @@ props: {
     fullWidth: { type: Boolean },
-    color: null,
+    activeColor: { default: "#567a0d" },
+    bodyColor: { default: "#eee" },
     modelValue: null,
@@ -135,35 +144,36 @@ width: null,
   emits: ["change", "update:modelValue"],
-  setup(o, { emit: s }) {
-    const t = o, a = P({
+  setup(t, { emit: c }) {
+    const n = t, a = w({
       inputDegree: null,
       lazyInputDegree: null
     }), l = (r) => {
-      a.inputDegree = r, r !== null && s("update:modelValue", r);
-    }, h = () => {
-      a.inputDegree === a.lazyInputDegree || a.inputDegree === null || (a.lazyInputDegree = a.inputDegree, s("change", a.inputDegree));
+      a.inputDegree = r, r !== null && c("update:modelValue", r);
+    }, y = () => {
+      a.inputDegree === a.lazyInputDegree || a.inputDegree === null || (a.lazyInputDegree = a.inputDegree, c("change", a.inputDegree));
     };
-    return j(() => a.inputDegree = t.modelValue), (r, c) => (g(), v("div", {
-      style: _({
-        width: t.fullWidth ? void 0 : m(ee)(t.width || 290)
+    return j(() => a.inputDegree = n.modelValue), (r, s) => (g(), v("div", {
+      style: M({
+        width: n.fullWidth ? void 0 : m(oe)(n.width || 290)
       })
     }, [
-      G(Z, {
-        color: o.color,
+      G(ne, {
+        "active-color": t.activeColor,
+        "body-color": t.activeColor,
         onInput: l,
-        onChange: h,
-        step: o.step || 30,
+        onChange: y,
+        step: t.step || 30,
         min: 0,
         max: 359,
         value: a.inputDegree
-      }, null, 8, ["color", "step", "value"])
+      }, null, 8, ["active-color", "body-color", "step", "value"])
     ], 4));
   }
-}), le = {
-  install: (o) => {
-    o.component("degree-picker", ne);
+}), ae = {
+  install: (t) => {
+    t.component("degree-picker", te);
   }
 };
 export {
-  ne as DegreePicker,
-  le as default
+  te as DegreePicker,
+  ae as default
 };

dist/degree-picker.umd.js

@@ -1,2 +0,2 @@
-(function(a,e){typeof exports=="object"&&typeof module<"u"?e(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],e):(a=typeof globalThis<"u"?globalThis:a||self,e(a.degreePicker={},a.Vue))})(this,function(a,e){"use strict";var h=document.createElement("style");h.textContent=`.degree-picker-clock{font-family:Roboto;background-color:#eee;border-radius:100%;position:relative;transition:.3s cubic-bezier(.25,.8,.5,1);user-select:none;width:100%;padding-top:100%;flex:1 0 auto}.degree-picker-clock__item--disabled{color:pink}.degree-picker-clock__item--disabled.degree-picker-clock__item--active{color:purple}.degree-picker-clock--indeterminate .degree-picker-clock__hand{background-color:#bdbdbd}.degree-picker-clock--indeterminate:after{color:#ff0}.degree-picker-clock--indeterminate .degree-picker-clock__item--active{background-color:#bdbdbd}.degree-picker-clock__container{display:flex;flex-direction:column;flex-basis:290px;justify-content:center;padding:10px}.degree-picker-clock__hand{height:calc(50% - 4px);width:2px;bottom:50%;left:calc(50% - 1px);transform-origin:center bottom;position:absolute;will-change:transform;z-index:1}.degree-picker-clock__hand:before{background:transparent;border-width:2px;border-style:solid;border-color:var(--4483ecc0);border-radius:100%;width:10px;height:10px;content:"";position:absolute;top:-4px;left:50%;transform:translate(-50%,-50%)}.degree-picker-clock__hand:after{content:"";position:absolute;height:8px;width:8px;top:100%;left:50%;border-radius:100%;border-style:solid;border-color:var(--4483ecc0);background-color:var(--4483ecc0);transform:translate(-50%,-50%)}.degree-picker-clock__hand--inner:after{height:14px}.picker--full-width .degree-picker-clock__container{max-width:290px}.degree-picker-clock__inner{position:absolute;bottom:27px;left:27px;right:27px;top:27px}.degree-picker-clock__item{align-items:center;border-radius:100%;cursor:default;display:flex;font-size:16px;justify-content:center;height:40px;position:absolute;text-align:center;width:40px;user-select:none;transform:translate(-50%,-50%)}.degree-picker-clock__item>span{z-index:1}.degree-picker-clock__item:before,.degree-picker-clock__item:after{content:"";border-radius:100%;position:absolute;top:50%;left:50%;height:14px;width:14px;transform:translate(-50%,-50%)}.degree-picker-clock__item:after,.degree-picker-clock__item:before{height:40px;width:40px}.degree-picker-clock__item--active{color:#fff;cursor:default;z-index:2}.degree-picker-clock__item--disabled{pointer-events:none}
-`,document.head.appendChild(h);const D={class:"picker__body"},v={class:"degree-picker-clock__container"},w={class:"degree-picker-clock__inner"},V=e.defineComponent({__name:"degreePickerBody",props:{disabled:{type:Boolean},readonly:{type:Boolean},color:null,value:null,min:null,max:null,step:null},emits:["input","change"],setup(l,{emit:s}){const o=l;e.useCssVars(t=>({"4483ecc0":l.color}));const i=e.ref(null),r=e.reactive({inputValue:o.value,isDragging:!1,valueOnMouseDown:null,valueOnMouseUp:null}),g=e.computed(()=>{const t=[];for(let n=o.min;n<o.max;n=n+o.step)t.push(n);return t}),d=e.computed(()=>o.max-o.min+1),u=e.computed(()=>360/d.value),b=e.computed(()=>u.value*Math.PI/180),C=e.computed(()=>({transform:`rotate(${u.value*(k.value-o.min)}deg)`,backgroundColor:o.value!==null?o.color:void 0})),k=e.computed(()=>o.value==null?o.min:o.value),P=t=>{const n=Math.PI/180;return{x:Math.sin((t-o.min)*b.value+n)*1,y:-Math.cos((t-o.min)*b.value+n)*1}},E=t=>{const{x:n,y:c}=P(t);return{left:`${50+n*50}%`,top:`${50+c*50}%`,backgroundColor:o.value!==null&&t===k.value?o.color:void 0}},O=(t,n)=>{const c=n.x-t.x,p=n.y-t.y;return Math.sqrt(c*c+p*p)},N=(t,n)=>{const c=2*Math.atan2(n.y-t.y-O(t,n),n.x-t.x);return Math.abs(c*180/Math.PI)},T=t=>{const n=(Math.round(t/u.value)+0)%d.value+o.min;return t<360-u.value/2?n:o.min},S=t=>{r.inputValue!==t&&(r.inputValue=t,s("input",t))},U=t=>{r.valueOnMouseDown===null&&(r.valueOnMouseDown=t),r.valueOnMouseUp=t,S(t)},m=t=>{if(t.preventDefault(),!r.isDragging&&t.type!=="click"||!i.value)return;const{width:n,top:c,left:p}=i.value.getBoundingClientRect(),{clientX:I,clientY:$}="touches"in t?t.touches[0]:t,j={x:n/2,y:-n/2},R={x:I-p,y:c-$},q=Math.round(N(j,R)-0+360)%360,W=Math.ceil(15/u.value);let M;for(let _=0;_<W;_++)return M=T(q+_*u.value),U(M)},y=t=>{t.preventDefault(),r.valueOnMouseDown=null,r.valueOnMouseUp=null,r.isDragging=!0,m(t)},f=t=>{t.stopPropagation(),r.isDragging=!1,r.valueOnMouseUp!==null&&s("change",r.valueOnMouseUp)};return e.watch(()=>o.value,t=>r.inputValue=t),(t,n)=>(e.openBlock(),e.createElementBlock("div",D,[e.createElementVNode("div",v,[e.createElementVNode("div",{ref_key:"clock",ref:i,onMousedown:y,onMouseup:f,onMouseleave:n[0]||(n[0]=c=>r.isDragging&&f(c)),onTouchstart:y,onTouchend:f,onMousemove:m,onTouchmove:m,class:e.normalizeClass(["degree-picker-clock",{"degree-picker-clock--indeterminate":l.value==null}])},[e.createElementVNode("div",w,[e.createElementVNode("div",{class:"degree-picker-clock__hand",style:e.normalizeStyle(e.unref(C))},null,4),(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(e.unref(g),c=>(e.openBlock(),e.createElementBlock("span",{key:c,class:e.normalizeClass(["degree-picker-clock__item",{"degree-picker-clock__item--active":c===e.unref(k)}]),style:e.normalizeStyle(E(c))},[e.createElementVNode("span",null,e.toDisplayString(c),1)],6))),128))])],34)])]))}}),A="";function B(l,s="px"){if(!(l==null||l===""))return isNaN(+l)?String(l):`${Number(l)}${s}`}const x=e.defineComponent({__name:"degreePicker",props:{disabled:{type:Boolean},min:null,max:null,readonly:{type:Boolean},fullWidth:{type:Boolean},color:null,modelValue:null,width:null,step:null},emits:["change","update:modelValue"],setup(l,{emit:s}){const o=l,i=e.reactive({inputDegree:null,lazyInputDegree:null}),r=d=>{i.inputDegree=d,d!==null&&s("update:modelValue",d)},g=()=>{i.inputDegree===i.lazyInputDegree||i.inputDegree===null||(i.lazyInputDegree=i.inputDegree,s("change",i.inputDegree))};return e.onMounted(()=>i.inputDegree=o.modelValue),(d,u)=>(e.openBlock(),e.createElementBlock("div",{style:e.normalizeStyle({width:o.fullWidth?void 0:e.unref(B)(o.width||290)})},[e.createVNode(V,{color:l.color,onInput:r,onChange:g,step:l.step||30,min:0,max:359,value:i.inputDegree},null,8,["color","step","value"])],4))}}),z={install:l=>{l.component("degree-picker",x)}};a.DegreePicker=x,a.default=z,Object.defineProperties(a,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})});
+(function(d,e){typeof exports=="object"&&typeof module<"u"?e(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],e):(d=typeof globalThis<"u"?globalThis:d||self,e(d.degreePicker={},d.Vue))})(this,function(d,e){"use strict";var h=document.createElement("style");h.textContent=`.degree-picker-clock[data-v-0c9a5d7a]{font-family:Roboto;background-color:var(--ec56ea52);border-radius:100%;position:relative;transition:.3s cubic-bezier(.25,.8,.5,1);user-select:none;width:100%;padding-top:100%;flex:1 0 auto}.degree-picker-clock__item--disabled[data-v-0c9a5d7a]{color:pink}.degree-picker-clock__item--disabled.degree-picker-clock__item--active[data-v-0c9a5d7a]{color:purple}.degree-picker-clock--indeterminate .degree-picker-clock__hand[data-v-0c9a5d7a]{background-color:#bdbdbd}.degree-picker-clock--indeterminate[data-v-0c9a5d7a]:after{color:#ff0}.degree-picker-clock--indeterminate .degree-picker-clock__item--active[data-v-0c9a5d7a]{background-color:#bdbdbd}.degree-picker-clock__container[data-v-0c9a5d7a]{display:flex;flex-direction:column;flex-basis:290px;justify-content:center;padding:10px}.degree-picker-clock__hand[data-v-0c9a5d7a]{height:calc(50% - 4px);width:2px;bottom:50%;left:calc(50% - 1px);transform-origin:center bottom;position:absolute;will-change:transform;z-index:1}.degree-picker-clock__hand[data-v-0c9a5d7a]:before{background:transparent;border-width:2px;border-style:solid;border-color:var(--c972431a);border-radius:100%;width:10px;height:10px;content:"";position:absolute;top:-4px;left:50%;transform:translate(-50%,-50%)}.degree-picker-clock__hand[data-v-0c9a5d7a]:after{content:"";position:absolute;height:8px;width:8px;top:100%;left:50%;border-radius:100%;border-style:solid;border-color:var(--c972431a);background-color:var(--c972431a);transform:translate(-50%,-50%)}.degree-picker-clock__hand--inner[data-v-0c9a5d7a]:after{height:14px}.picker--full-width .degree-picker-clock__container[data-v-0c9a5d7a]{max-width:290px}.degree-picker-clock__inner[data-v-0c9a5d7a]{position:absolute;bottom:27px;left:27px;right:27px;top:27px}.degree-picker-clock__item[data-v-0c9a5d7a]{align-items:center;border-radius:100%;cursor:default;display:flex;font-size:16px;justify-content:center;height:40px;position:absolute;text-align:center;width:40px;user-select:none;transform:translate(-50%,-50%)}.degree-picker-clock__item>span[data-v-0c9a5d7a]{z-index:1}.degree-picker-clock__item[data-v-0c9a5d7a]:before,.degree-picker-clock__item[data-v-0c9a5d7a]:after{content:"";border-radius:100%;position:absolute;top:50%;left:50%;height:14px;width:14px;transform:translate(-50%,-50%)}.degree-picker-clock__item[data-v-0c9a5d7a]:after,.degree-picker-clock__item[data-v-0c9a5d7a]:before{height:40px;width:40px}.degree-picker-clock__item--active[data-v-0c9a5d7a]{color:#fff;cursor:default;z-index:2}.degree-picker-clock__item--disabled[data-v-0c9a5d7a]{pointer-events:none}
+`,document.head.appendChild(h);const M={class:"picker__body"},D={class:"degree-picker-clock__container"},w={class:"degree-picker-clock__inner"},C=e.defineComponent({__name:"degreePickerBody",props:{disabled:{type:Boolean},readonly:{type:Boolean},activeColor:null,bodyColor:null,value:null,min:null,max:null,step:null},emits:["input","change"],setup(a,{emit:i}){const o=a;e.useCssVars(t=>({ec56ea52:a.bodyColor,c972431a:a.activeColor}));const r=e.ref(null),c=e.reactive({inputValue:o.value,isDragging:!1,valueOnMouseDown:null,valueOnMouseUp:null}),g=e.computed(()=>{const t=[];for(let n=o.min;n<o.max;n=n+o.step)t.push(n);return t}),s=e.computed(()=>o.max-o.min+1),u=e.computed(()=>360/s.value),x=e.computed(()=>u.value*Math.PI/180),P=e.computed(()=>({transform:`rotate(${u.value*(k.value-o.min)}deg)`,backgroundColor:o.value!==null?o.activeColor:void 0})),k=e.computed(()=>o.value==null?o.min:o.value),O=t=>{const n=Math.PI/180;return{x:Math.sin((t-o.min)*x.value+n)*1,y:-Math.cos((t-o.min)*x.value+n)*1}},E=t=>{const{x:n,y:l}=O(t);return{left:`${50+n*50}%`,top:`${50+l*50}%`,backgroundColor:o.value!==null&&t===k.value?o.activeColor:void 0}},N=(t,n)=>{const l=n.x-t.x,p=n.y-t.y;return Math.sqrt(l*l+p*p)},T=(t,n)=>{const l=2*Math.atan2(n.y-t.y-N(t,n),n.x-t.x);return Math.abs(l*180/Math.PI)},I=t=>{const n=(Math.round(t/u.value)+0)%s.value+o.min;return t<360-u.value/2?n:o.min},S=t=>{c.inputValue!==t&&(c.inputValue=t,i("input",t))},U=t=>{c.valueOnMouseDown===null&&(c.valueOnMouseDown=t),c.valueOnMouseUp=t,S(t)},m=t=>{if(t.preventDefault(),!c.isDragging&&t.type!=="click"||!r.value)return;const{width:n,top:l,left:p}=r.value.getBoundingClientRect(),{clientX:$,clientY:j}="touches"in t?t.touches[0]:t,R={x:n/2,y:-n/2},q={x:$-p,y:l-j},W=Math.round(T(R,q)-0+360)%360,A=Math.ceil(15/u.value);let b;for(let _=0;_<A;_++)return b=I(W+_*u.value),U(b)},y=t=>{t.preventDefault(),c.valueOnMouseDown=null,c.valueOnMouseUp=null,c.isDragging=!0,m(t)},f=t=>{t.stopPropagation(),c.isDragging=!1,c.valueOnMouseUp!==null&&i("change",c.valueOnMouseUp)};return e.watch(()=>o.value,t=>c.inputValue=t),(t,n)=>(e.openBlock(),e.createElementBlock("div",M,[e.createElementVNode("div",D,[e.createElementVNode("div",{ref_key:"clock",ref:r,onMousedown:y,onMouseup:f,onMouseleave:n[0]||(n[0]=l=>c.isDragging&&f(l)),onTouchstart:y,onTouchend:f,onMousemove:m,onTouchmove:m,class:e.normalizeClass(["degree-picker-clock",{"degree-picker-clock--indeterminate":a.value==null}])},[e.createElementVNode("div",w,[e.createElementVNode("div",{class:"degree-picker-clock__hand",style:e.normalizeStyle(e.unref(P))},null,4),(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(e.unref(g),l=>(e.openBlock(),e.createElementBlock("span",{key:l,class:e.normalizeClass(["degree-picker-clock__item",{"degree-picker-clock__item--active":l===e.unref(k)}]),style:e.normalizeStyle(E(l))},[e.createElementVNode("span",null,e.toDisplayString(l),1)],6))),128))])],34)])]))}}),F="",V=((a,i)=>{const o=a.__vccOpts||a;for(const[r,c]of i)o[r]=c;return o})(C,[["__scopeId","data-v-0c9a5d7a"]]);function B(a,i="px"){if(!(a==null||a===""))return isNaN(+a)?String(a):`${Number(a)}${i}`}const v=e.defineComponent({__name:"degreePicker",props:{disabled:{type:Boolean},min:null,max:null,readonly:{type:Boolean},fullWidth:{type:Boolean},activeColor:{default:"#567a0d"},bodyColor:{default:"#eee"},modelValue:null,width:null,step:null},emits:["change","update:modelValue"],setup(a,{emit:i}){const o=a,r=e.reactive({inputDegree:null,lazyInputDegree:null}),c=s=>{r.inputDegree=s,s!==null&&i("update:modelValue",s)},g=()=>{r.inputDegree===r.lazyInputDegree||r.inputDegree===null||(r.lazyInputDegree=r.inputDegree,i("change",r.inputDegree))};return e.onMounted(()=>r.inputDegree=o.modelValue),(s,u)=>(e.openBlock(),e.createElementBlock("div",{style:e.normalizeStyle({width:o.fullWidth?void 0:e.unref(B)(o.width||290)})},[e.createVNode(V,{"active-color":a.activeColor,"body-color":a.activeColor,onInput:c,onChange:g,step:a.step||30,min:0,max:359,value:r.inputDegree},null,8,["active-color","body-color","step","value"])],4))}}),z={install:a=>{a.component("degree-picker",v)}};d.DegreePicker=v,d.default=z,Object.defineProperties(d,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})});

package.json

 {
   "name": "degree-picker",
   "private": false,
-  "version": "0.0.6",
+  "version": "0.0.7",
   "type": "module",
@@ -6,0 +6,0 @@ "files": [

README.md

@@ -30,3 +30,3 @@ <div align="center">
 <template>
-  <degree-picker color="green" v-model="degrees" />
+  <degree-picker active-color="green" v-model="degrees" />
 </template>
@@ -43,9 +43,11 @@
 
-| ID          | Type            | Default | Description                                                                                                      |
-| ----------- | --------------- | ------- | ---------------------------------------------------------------------------------------------------------------- |
-| `color`     | `string`        |         | Background color of the active value and clock hand                                                              |
-| `v-model`   | `number`        |         | Standard two way input                                                                                           |
-| `width`     | `number/string` |         | Sets the width of the element - can be provided as a string like "290px" or "290" or a number, defaults to 290px |
-| `fullWidth` | `boolean`       |         | Ignores the previous `width` prop and sets the width to 100% of the parent container                             |
-| `disabled`  | `boolean`       |         | Makes the component unclickable                                                                                  |
-| `readonly`  | `boolean`       |         | Makes the component unclickable, but does not make it seem disabled                                              |
+| Name           | Type            | Default | Description                                                                                                      |
+| -------------- | --------------- | ------- | ---------------------------------------------------------------------------------------------------------------- |
+| `active-color` | `string`        | #567a0d | Background color of the active value and clock hand                                                              |
+| `body-color`   | `string`        | #eee    | Background color of the picker body                                                                              |
+| `v-model`      | `number`        |         | Standard two way input                                                                                           |
+| `step`         | `number`        | 30      | The step used for displaying the degrees                                                                         |
+| `width`        | `number/string` | 290px   | Sets the width of the element - can be provided as a string like "290px" or "290" or a number, defaults to 290px |
+| `full-width`   | `boolean`       | false   | Ignores the previous `width` prop and sets the width to 100% of the parent container                             |
+| `disabled`     | `boolean`       | false   | Makes the component unclickable                                                                                  |
+| `readonly`     | `boolean`       | false   | Makes the component unclickable, but does not make it seem disabled                                              |

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

31581

increased by9.07%

Lines of code

411

increased by10.48%

Number of lines in readme file

52

increased by4%

No dependency changes