degree-picker - npm Package Compare versions

Comparing version 0.0.16 to 0.0.17

dist/degree-picker.js

@@ -1,3 +0,3 @@
-import { defineComponent as V, 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 b, normalizeStyle as M, unref as y, 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__ */ V({
+import { defineComponent as w, useCssVars as F, ref as H, reactive as B, computed as r, watch as L, openBlock as p, createElementBlock as y, createElementVNode as g, normalizeClass as D, normalizeStyle as b, unref as m, Fragment as X, renderList as Y, toDisplayString as j, onMounted as G, createVNode as J } from "vue";
+const K = { class: "picker__body" }, Q = { class: "degree-picker-clock__container" }, Z = { class: "degree-picker-clock__inner" }, ee = /* @__PURE__ */ w({
   __name: "degreePickerBody",
@@ -15,9 +15,9 @@ props: {
   emits: ["input", "change"],
-  setup(t, { emit: c }) {
-    const n = t;
-    A((e) => ({
-      "4332e603": t.bodyColor,
-      "767b1e9f": t.activeColor
+  setup(l, { emit: c }) {
+    const n = l;
+    F((e) => ({
+      "15701aa9": l.bodyColor,
+      a3847c76: l.activeColor
     }));
-    const u = F(null), l = w({
+    const a = H(null), t = B({
       inputValue: n.value,
@@ -27,3 +27,3 @@ isDragging: !1,
       valueOnMouseUp: null
-    }), m = i(() => {
+    }), d = r(() => !(n.readonly || n.disabled)), s = r(() => {
       const e = [];
@@ -33,77 +33,82 @@ for (let o = n.min; o < n.max; o = o + n.step)
       return e;
-    }), 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(
+    }), f = r(() => n.max - n.min + 1), i = r(() => 360 / f.value), x = r(() => i.value * Math.PI / 180), P = r(() => ({
+      transform: `rotate(${i.value * (h.value - n.min)}deg)`,
+      backgroundColor: n.value !== null ? n.disabled ? "#8d7d7d" : n.activeColor : void 0
+    })), h = r(
       () => n.value == null ? n.min : n.value
-    ), P = (e) => {
+    ), O = (e) => {
       const o = Math.PI / 180;
       return {
-        x: Math.sin((e - n.min) * D.value + o) * 1,
-        y: -Math.cos((e - n.min) * D.value + o) * 1
+        x: Math.sin((e - n.min) * x.value + o) * 1,
+        y: -Math.cos((e - n.min) * x.value + o) * 1
       };
-    }, O = (e) => {
-      const { x: o, y: a } = P(e);
+    }, I = (e) => {
+      const { x: o, y: u } = O(e);
       return {
         left: `${50 + o * 50}%`,
-        top: `${50 + a * 50}%`,
-        backgroundColor: n.value !== null && e === f.value ? n.activeColor : void 0
+        top: `${50 + u * 50}%`,
+        backgroundColor: n.value !== null && e === h.value ? n.disabled ? "#8d7d7d" : n.activeColor : void 0
       };
-    }, I = (e, o) => {
-      const a = o.x - e.x, p = o.y - e.y;
-      return Math.sqrt(a * a + p * p);
     }, U = (e, o) => {
-      const a = 2 * Math.atan2(o.y - e.y - I(e, o), o.x - e.x);
-      return Math.abs(a * 180 / Math.PI);
-    }, T = (e) => {
-      const o = (Math.round(e / s.value) + 0) % r.value + n.min;
-      return e < 360 - s.value / 2 ? o : n.min;
+      const u = o.x - e.x, v = o.y - e.y;
+      return Math.sqrt(u * u + v * v);
+    }, T = (e, o) => {
+      const u = 2 * Math.atan2(o.y - e.y - U(e, o), o.x - e.x);
+      return Math.abs(u * 180 / Math.PI);
     }, $ = (e) => {
-      l.inputValue !== e && (l.inputValue = e, c("input", e));
+      const o = (Math.round(e / i.value) + 0) % f.value + n.min;
+      return e < 360 - i.value / 2 ? o : n.min;
     }, z = (e) => {
-      l.valueOnMouseDown === null && (l.valueOnMouseDown = e), l.valueOnMouseUp = e, $(e);
-    }, h = (e) => {
-      if (e.preventDefault(), !l.isDragging && e.type !== "click" || !u.value)
-        return;
-      const { width: o, top: a, left: p } = u.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: a - S }, W = Math.round(U(E, R) - 0 + 360) % 360, q = Math.ceil(15 / s.value);
-      let C;
-      for (let k = 0; k < q; k++)
-        return C = T(W + k * s.value), z(C);
-    }, x = (e) => {
-      e.preventDefault(), l.valueOnMouseDown = null, l.valueOnMouseUp = null, l.isDragging = !0, h(e);
+      t.inputValue !== e && (t.inputValue = e, c("input", e));
+    }, N = (e) => {
+      t.valueOnMouseDown === null && (t.valueOnMouseDown = e), t.valueOnMouseUp = e, z(e);
+    }, k = (e) => {
+      if (d.value) {
+        if (e.preventDefault(), !t.isDragging && e.type !== "click" || !a.value)
+          return;
+        const { width: o, top: u, left: v } = a.value.getBoundingClientRect(), { clientX: S, clientY: E } = "touches" in e ? e.touches[0] : e, R = { x: o / 2, y: -o / 2 }, W = { x: S - v, y: u - E }, q = Math.round(T(R, W) - 0 + 360) % 360, A = Math.ceil(15 / i.value);
+        let V;
+        for (let M = 0; M < A; M++)
+          return V = $(q + M * i.value), N(V);
+      }
+    }, C = (e) => {
+      d.value && (e.preventDefault(), t.valueOnMouseDown = null, t.valueOnMouseUp = null, t.isDragging = !0, k(e));
     }, _ = (e) => {
-      e.stopPropagation(), l.isDragging = !1, l.valueOnMouseUp !== null && c("change", l.valueOnMouseUp);
+      d.value && (e.stopPropagation(), t.isDragging = !1, t.valueOnMouseUp !== null && c("change", t.valueOnMouseUp));
     };
-    return H(
+    return L(
       () => n.value,
-      (e) => l.inputValue = e
-    ), (e, o) => (g(), v("div", J, [
-      d("div", K, [
-        d("div", {
+      (e) => t.inputValue = e
+    ), (e, o) => (p(), y("div", K, [
+      g("div", Q, [
+        g("div", {
           ref_key: "clock",
-          ref: u,
-          onMousedown: x,
+          ref: a,
+          onMousedown: C,
           onMouseup: _,
-          onMouseleave: o[0] || (o[0] = (a) => l.isDragging && _(a)),
-          onTouchstart: x,
+          onMouseleave: o[0] || (o[0] = (u) => t.isDragging && _(u)),
+          onTouchstart: C,
           onTouchend: _,
-          onMousemove: h,
-          onTouchmove: h,
-          class: b(["degree-picker-clock", {
-            "degree-picker-clock--indeterminate": t.value == null
+          onMousemove: k,
+          onTouchmove: k,
+          class: D(["degree-picker-clock", {
+            "degree-picker-clock--indeterminate": l.value == null
           }])
         }, [
-          d("div", Q, [
-            d("div", {
-              class: "degree-picker-clock__hand",
-              style: M(y(B))
-            }, null, 4),
-            (g(!0), v(L, null, X(y(m), (a) => (g(), v("span", {
-              key: a,
-              class: b(["degree-picker-clock__item", {
-                "degree-picker-clock__item--active": a === y(f)
+          g("div", Z, [
+            g("div", {
+              class: D(["degree-picker-clock__hand", {
+                "degree-picker-clock__hand--disabled": n.disabled
               }]),
-              style: M(O(a))
+              style: b(m(P))
+            }, null, 6),
+            (p(!0), y(X, null, Y(m(s), (u) => (p(), y("span", {
+              key: u,
+              class: D(["degree-picker-clock__item", {
+                "degree-picker-clock__item--active": u === m(h),
+                "degree-picker-clock__item--disabled": n.disabled
+              }]),
+              style: b(I(u))
             }, [
-              d("span", null, Y(a), 1)
+              g("span", null, j(u), 1)
             ], 6))), 128))
@@ -116,13 +121,13 @@ ])
 });
-const ee = (t, c) => {
-  const n = t.__vccOpts || t;
-  for (const [u, l] of c)
-    n[u] = l;
+const ne = (l, c) => {
+  const n = l.__vccOpts || l;
+  for (const [a, t] of c)
+    n[a] = t;
   return n;
-}, ne = /* @__PURE__ */ ee(Z, [["__scopeId", "data-v-14cd5f1d"]]);
-function oe(t, c = "px") {
-  if (!(t == null || t === ""))
-    return isNaN(+t) ? String(t) : `${Number(t)}${c}`;
+}, oe = /* @__PURE__ */ ne(ee, [["__scopeId", "data-v-c34b5449"]]);
+function le(l, c = "px") {
+  if (!(l == null || l === ""))
+    return isNaN(+l) ? String(l) : `${Number(l)}${c}`;
 }
-const le = /* @__PURE__ */ V({
+const ae = /* @__PURE__ */ w({
   __name: "degreePicker",
@@ -142,26 +147,28 @@ props: {
   emits: ["change", "update:modelValue"],
-  setup(t, { emit: c }) {
-    const n = t, u = w({
+  setup(l, { emit: c }) {
+    const n = l, a = B({
       inputDegree: null,
       lazyInputDegree: null
-    }), l = (r) => {
-      u.inputDegree = r, r !== null && c("update:modelValue", r);
-    }, m = () => {
-      u.inputDegree === u.lazyInputDegree || u.inputDegree === null || (u.lazyInputDegree = u.inputDegree, c("change", u.inputDegree));
+    }), t = (s) => {
+      a.inputDegree = s, s !== null && c("update:modelValue", s);
+    }, d = () => {
+      a.inputDegree === a.lazyInputDegree || a.inputDegree === null || (a.lazyInputDegree = a.inputDegree, c("change", a.inputDegree));
     };
-    return j(() => u.inputDegree = n.modelValue), (r, s) => (g(), v("div", {
-      style: M({
-        width: n.fullWidth ? void 0 : y(oe)(n.width || 290)
+    return G(() => a.inputDegree = n.modelValue), (s, f) => (p(), y("div", {
+      style: b({
+        width: n.fullWidth ? void 0 : m(le)(n.width || 290)
       })
     }, [
-      G(ne, {
-        "active-color": t.activeColor,
-        "body-color": t.bodyColor,
-        onInput: l,
-        onChange: m,
-        step: t.step || 30,
+      J(oe, {
+        "active-color": l.activeColor,
+        "body-color": l.bodyColor,
+        onInput: t,
+        onChange: d,
+        step: l.step || 30,
         min: 0,
         max: 359,
-        value: u.inputDegree
-      }, null, 8, ["active-color", "body-color", "step", "value"])
+        value: a.inputDegree,
+        disabled: l.disabled,
+        readonly: l.readonly
+      }, null, 8, ["active-color", "body-color", "step", "value", "disabled", "readonly"])
     ], 4));
@@ -171,3 +178,3 @@ }
 export {
-  le as DegreePicker
+  ae as DegreePicker
 };

package.json

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

No alert changes

Improved metrics

Total package byte prevSize

35196

increased by2.07%

Lines of code

401

increased by1.01%

Worsened metrics

Number of package files

14

decreased by-6.67%

No dependency changes