vue-data-ui 3.10.0 → 3.10.2

package/dist/{vue-ui-wheel-BGle0ni9.js → vue-ui-wheel-DFU2vMsP.js}

@@ -1,37 +1,41 @@
-import { useCssVars as Tt, computed as g, defineAsyncComponent as fe, ref as $, toRefs as Wt, watch as je, shallowRef as Ue, onMounted as Bt, onBeforeUnmount as Et, createElementBlock as n, openBlock as s, unref as c, normalizeStyle as ge, normalizeClass as P, createBlock as ne, createCommentVNode as z, withCtx as I, renderSlot as w, normalizeProps as R, guardReactiveProps as F, createSlots as Nt, createVNode as Xt, Fragment as _, renderList as T, createElementVNode as jt, toDisplayString as Ut } from "vue";
-import { c as Lt, t as Ht, o as Yt, g as Gt, h as K, a3 as Vt, X as qt, q as Le, a as Zt, U as He, d as Jt } from "./lib-2iaAPQ_c.js";
-import { t as Kt, u as Qt } from "./useResponsive-DfdjqQps.js";
-import { u as ea, a as pe } from "./useNestedProp-BCt4DMkT.js";
-import { u as ta, B as aa } from "./BaseScanner-BMpwQAfz.js";
-import { u as la } from "./usePrinter-ChVMpU2f.js";
-import { u as oa } from "./useSvgExport-ByUukOZt.js";
-import { u as sa } from "./useThemeCheck-DGJ31Vi5.js";
-import { u as na } from "./useUserOptionState-BIvW1Kz7.js";
-import { u as ra } from "./useChartAccessibility-9icAAmYg.js";
-import ia from "./img-CqYIrJ8I.js";
-import ua from "./Title-B5L2jweB.js";
-import { _ as ca } from "./_plugin-vue_export-helper-CHgC5LLL.js";
-const Ye = { style: { chart: { backgroundColor: "#1A1A1A", color: "#CCCCCC", layout: { wheel: { ticks: { inactiveColor: "#4A4A4A" } }, innerCircle: { stroke: "#3A3A3A" } }, title: { color: "#CCCCCC", subtitle: { color: "#757575" } } } } }, Ge = { style: { chart: { backgroundColor: "#FFF8E1", color: "#424242", layout: { wheel: { ticks: { inactiveColor: "#5D403760", activeColor: "#D32F2F", gradient: { shiftHueIntensity: 0 } } }, innerCircle: { stroke: "#5D403760" } }, title: { color: "#424242", subtitle: { color: "#757575" } } } } }, Ve = { style: { chart: { backgroundColor: "#1E1E1E", color: "#BDBDBD", layout: { wheel: { ticks: { inactiveColor: "#5D403780", activeColor: "#D32F2F", gradient: { shiftHueIntensity: 0 } } }, innerCircle: { stroke: "#5D403760" } }, title: { color: "#FFF8E1", subtitle: { color: "#BDBDBD" } } } } }, qe = { style: { chart: { backgroundColor: "#1A1A1A", color: "#99AA99", layout: { wheel: { ticks: { rounded: !1, inactiveColor: "#333333", activeColor: "#66CC66", gradient: { shiftHueIntensity: 15 } } }, innerCircle: { show: !1 } }, title: { color: "#66CC66", subtitle: { color: "#99AA99" } } } } }, Ze = { style: { chart: { backgroundColor: "#fbfafa", color: "#8A9892", layout: { wheel: { ticks: { inactiveColor: "#F7EDE2", activeColor: "#B1A7AD", gradient: { shiftHueIntensity: 100 } } }, innerCircle: { show: !1 } }, title: { color: "#8A9892", subtitle: { color: "#99AA99" } } } } }, Je = { style: { chart: { backgroundColor: "#f6f6fb", color: "#50606C", layout: { wheel: { ticks: { rounded: !1, inactiveColor: "#BBCBC7", activeColor: "#6C94A0", gradient: { shiftHueIntensity: 10 } } }, innerCircle: { stroke: "#BBCBC7" } }, title: { color: "#50606C", subtitle: { color: "#718890" } } } } }, Ke = {
+import { useCssVars as Bt, computed as g, defineAsyncComponent as fe, ref as $, toRefs as Et, watch as je, shallowRef as Ue, onMounted as Nt, onBeforeUnmount as Xt, createElementBlock as n, openBlock as s, unref as c, normalizeStyle as ge, normalizeClass as P, createBlock as ne, createCommentVNode as O, withCtx as I, renderSlot as w, normalizeProps as R, guardReactiveProps as F, createSlots as jt, createVNode as Ut, Fragment as _, renderList as T, createElementVNode as Lt, toDisplayString as Ht } from "vue";
+import { c as Yt, t as Gt, o as Vt, g as qt, h as K, a3 as Zt, X as Jt, q as Le, a as Kt, U as He, d as Qt } from "./lib-CVHM9FhP.js";
+import { t as ea, u as ta } from "./useResponsive-DfdjqQps.js";
+import { u as aa, a as pe } from "./useNestedProp-Ckf_2P_V.js";
+import { u as la, B as oa } from "./BaseScanner-BMpwQAfz.js";
+import { u as sa } from "./usePrinter-1NmjuP-i.js";
+import { u as na } from "./useSvgExport-ByUukOZt.js";
+import { u as ra } from "./useThemeCheck-D1ZYXUwG.js";
+import { u as ia } from "./useUserOptionState-BIvW1Kz7.js";
+import { u as ua } from "./useChartAccessibility-9icAAmYg.js";
+import ca from "./img-6fNF_rG0.js";
+import ha from "./Title-NgeRXqRA.js";
+import { _ as va } from "./_plugin-vue_export-helper-CHgC5LLL.js";
+const Ye = { userOptions: { show: !1 }, style: { chart: { layout: { wheel: { ticks: { gradient: { show: !1 } } } } } } }, Ge = { userOptions: { show: !1 }, style: { chart: { backgroundColor: "#1A1A1A", color: "#CCCCCC", layout: { wheel: { ticks: { inactiveColor: "#4A4A4A", gradient: { show: !1 } } }, innerCircle: { stroke: "#3A3A3A" } }, title: { color: "#CCCCCC", subtitle: { color: "#757575" } } } } }, Ve = { style: { chart: { backgroundColor: "#1A1A1A", color: "#CCCCCC", layout: { wheel: { ticks: { inactiveColor: "#4A4A4A" } }, innerCircle: { stroke: "#3A3A3A" } }, title: { color: "#CCCCCC", subtitle: { color: "#757575" } } } } }, qe = { style: { chart: { backgroundColor: "#FFF8E1", color: "#424242", layout: { wheel: { ticks: { inactiveColor: "#5D403760", activeColor: "#D32F2F", gradient: { shiftHueIntensity: 0 } } }, innerCircle: { stroke: "#5D403760" } }, title: { color: "#424242", subtitle: { color: "#757575" } } } } }, Ze = { style: { chart: { backgroundColor: "#1E1E1E", color: "#BDBDBD", layout: { wheel: { ticks: { inactiveColor: "#5D403780", activeColor: "#D32F2F", gradient: { shiftHueIntensity: 0 } } }, innerCircle: { stroke: "#5D403760" } }, title: { color: "#FFF8E1", subtitle: { color: "#BDBDBD" } } } } }, Je = { style: { chart: { backgroundColor: "#1A1A1A", color: "#99AA99", layout: { wheel: { ticks: { rounded: !1, inactiveColor: "#333333", activeColor: "#66CC66", gradient: { shiftHueIntensity: 15 } } }, innerCircle: { show: !1 } }, title: { color: "#66CC66", subtitle: { color: "#99AA99" } } } } }, Ke = { style: { chart: { backgroundColor: "#fbfafa", color: "#8A9892", layout: { wheel: { ticks: { inactiveColor: "#F7EDE2", activeColor: "#B1A7AD", gradient: { shiftHueIntensity: 100 } } }, innerCircle: { show: !1 } }, title: { color: "#8A9892", subtitle: { color: "#99AA99" } } } } }, Qe = { style: { chart: { backgroundColor: "#f6f6fb", color: "#50606C", layout: { wheel: { ticks: { rounded: !1, inactiveColor: "#BBCBC7", activeColor: "#6C94A0", gradient: { shiftHueIntensity: 10 } } }, innerCircle: { stroke: "#BBCBC7" } }, title: { color: "#50606C", subtitle: { color: "#718890" } } } } }, et = {
   default: {},
-  dark: Ye,
-  celebration: Ge,
-  celebrationNight: Ve,
-  hack: qe,
-  zen: Ze,
-  concrete: Je
-}, Ya = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
+  minimal: Ye,
+  minimalDark: Ge,
+  dark: Ve,
+  celebration: qe,
+  celebrationNight: Ze,
+  hack: Je,
+  zen: Ke,
+  concrete: Qe
+}, Va = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
   __proto__: null,
-  celebration: Ge,
-  celebrationNight: Ve,
-  concrete: Je,
-  dark: Ye,
-  default: Ke,
-  hack: qe,
-  zen: Ze
-}, Symbol.toStringTag, { value: "Module" })), ha = ["id"], va = ["xmlns", "viewBox"], da = ["x", "y", "width", "height"], ya = ["d", "stroke", "stroke-width"], ka = ["cx", "cy", "r", "stroke", "stroke-width"], fa = { key: 0 }, ga = ["x1", "y1", "x2", "y2", "stroke", "stroke-width", "stroke-linecap"], pa = ["x1", "y1", "x2", "y2", "stroke", "stroke-width", "stroke-linecap"], ma = { key: 1 }, wa = ["d", "fill", "stroke", "stroke-width"], Ca = ["d", "fill", "stroke", "stroke-width"], ba = ["d", "fill", "stroke", "stroke-width"], xa = ["x1", "x2", "y1", "y2", "stroke", "stroke-width", "stroke-linecap"], Ma = ["d", "fill", "stroke", "stroke-width"], Aa = { key: 5 }, $a = ["x", "y", "height"], Sa = ["x", "y", "font-size", "fill", "font-weight", "stroke", "stroke-width"], Ia = {
+  celebration: qe,
+  celebrationNight: Ze,
+  concrete: Qe,
+  dark: Ve,
+  default: et,
+  hack: Je,
+  minimal: Ye,
+  minimalDark: Ge,
+  zen: Ke
+}, Symbol.toStringTag, { value: "Module" })), da = ["id"], ya = ["xmlns", "viewBox"], ka = ["x", "y", "width", "height"], fa = ["d", "stroke", "stroke-width"], ga = ["cx", "cy", "r", "stroke", "stroke-width"], pa = { key: 0 }, ma = ["x1", "y1", "x2", "y2", "stroke", "stroke-width", "stroke-linecap"], wa = ["x1", "y1", "x2", "y2", "stroke", "stroke-width", "stroke-linecap"], Ca = { key: 1 }, ba = ["d", "fill", "stroke", "stroke-width"], xa = ["d", "fill", "stroke", "stroke-width"], Ma = ["d", "fill", "stroke", "stroke-width"], Aa = ["x1", "x2", "y1", "y2", "stroke", "stroke-width", "stroke-linecap"], $a = ["d", "fill", "stroke", "stroke-width"], Sa = { key: 5 }, Ia = ["x", "y", "height"], _a = ["x", "y", "font-size", "fill", "font-weight", "stroke", "stroke-width"], Da = {
   key: 4,
   class: "vue-data-ui-watermark"
-}, _a = {
+}, Oa = {
   __name: "vue-ui-wheel",
   props: {
     config: {
@@ -47,18 +51,18 @@ const Ye = { style: { chart: { backgroundColor: "#1A1A1A", color: "#CCCCCC", lay
       }
     }
   },
-  setup(Qe, { expose: et }) {
-    Tt((a) => ({
-      v5a57364b: ft.value,
-      v04e37e71: gt.value,
-      v04e36104: pt.value
+  setup(tt, { expose: at }) {
+    Bt((a) => ({
+      v5a57364b: pt.value,
+      v04e37e71: mt.value,
+      v04e36104: wt.value
     }));
-    const tt = fe(() => import("./PenAndPaper-CulSakut.js")), at = fe(() => import("./UserOptions-5pXc4J-c.js")), lt = fe(() => import("./PackageVersion-C-JOGZBL.js")), { vue_ui_wheel: ot } = ea(), { isThemeValid: st, warnInvalidTheme: nt } = sa(), W = Qe, rt = g(() => !!W.dataset && Object.keys(W.dataset).length), re = $(Lt()), it = $(null), me = $(0), X = $(null), we = $(null), Ce = $(null), be = $(null), xe = $(0), e = $(he()), { loading: Me, FINAL_DATASET: ie } = ta({
-      ...Wt(W),
+    const lt = fe(() => import("./PenAndPaper-LTuSTmWE.js")), ot = fe(() => import("./UserOptions-CX7Xsusk.js")), st = fe(() => import("./PackageVersion-CQxJyGQr.js")), { vue_ui_wheel: nt } = aa(), { isThemeValid: rt, warnInvalidTheme: it } = ra(), W = tt, ut = g(() => !!W.dataset && Object.keys(W.dataset).length), re = $(Yt()), ct = $(null), me = $(0), X = $(null), we = $(null), Ce = $(null), be = $(null), xe = $(0), e = $(he()), { loading: Me, FINAL_DATASET: ie } = la({
+      ...Et(W),
       FINAL_CONFIG: e,
       prepareConfig: he,
       skeletonDataset: { percentage: 50 },
-      skeletonConfig: Ht({
+      skeletonConfig: Gt({
         defaultConfig: e.value,
         userConfig: {
           userOptions: { show: !1 },
@@ -81,17 +85,17 @@ const Ye = { style: { chart: { backgroundColor: "#1A1A1A", color: "#CCCCCC", lay
           }
         }
       })
-    }), { userOptionsVisible: ue, setUserOptionsVisibility: Ae, keepUserOptionState: $e } = na({ config: e.value }), { svgRef: ce } = ra({ config: e.value.style.chart.title });
+    }), { userOptionsVisible: ue, setUserOptionsVisibility: Ae, keepUserOptionState: $e } = ia({ config: e.value }), { svgRef: ce } = ua({ config: e.value.style.chart.title });
     function he() {
       const a = pe({
         userConfig: W.config,
-        defaultConfig: ot
+        defaultConfig: nt
       }), o = a.theme;
       if (!o) return a;
-      if (!st.value(a))
-        return nt(a), a;
+      if (!rt.value(a))
+        return it(a), a;
       const t = pe({
-        userConfig: Ke[o] || W.config,
+        userConfig: et[o] || W.config,
         defaultConfig: a
       });
       return pe({
@@ -100,13 +104,13 @@ const Ye = { style: { chart: { backgroundColor: "#1A1A1A", color: "#CCCCCC", lay
       });
     }
     je(() => W.config, (a) => {
-      e.value = he(), ue.value = !e.value.userOptions.showOnChartHover, Oe(), xe.value += 1;
+      e.value = he(), ue.value = !e.value.userOptions.showOnChartHover, ze(), xe.value += 1;
     }, { deep: !0 });
-    const { isPrinting: Se, isImaging: Ie, generatePdf: _e, generateImage: De } = la({
+    const { isPrinting: Se, isImaging: Ie, generatePdf: _e, generateImage: De } = sa({
       elementId: re.value,
       fileName: e.value.style.chart.title.text || "vue-ui-wheel",
       options: e.value.userOptions.print
-    }), ut = g(() => e.value.userOptions.show && !e.value.style.chart.title.text), r = $({
+    }), ht = g(() => e.value.userOptions.show && !e.value.style.chart.title.text), r = $({
       size: 360,
       height: 360,
       width: 360
@@ -115,7 +119,7 @@ const Ye = { style: { chart: { backgroundColor: "#1A1A1A", color: "#CCCCCC", lay
       centerX: r.value.width / 2,
       centerY: r.value.height / 2
     }));
-    function ze(a, o = 1) {
+    function Oe(a, o = 1) {
       return {
         x: u.value.centerX + u.value.radius * Math.cos(29.85 + a * Math.PI / 180) * o,
         y: u.value.centerY + u.value.radius * Math.sin(29.85 + a * Math.PI / 180) * o
@@ -126,18 +130,18 @@ const Ye = { style: { chart: { backgroundColor: "#1A1A1A", color: "#CCCCCC", lay
       e.value.style.chart.animation.use ? We(a.percentage) : d.value = a.percentage || 0;
     }, { deep: !0 });
     const B = Ue(null), U = Ue(null);
-    Bt(() => {
-      Oe();
+    Nt(() => {
+      ze();
     });
-    const ct = g(() => !!e.value.debug);
-    function Oe() {
-      if (Yt(W.dataset) && Gt({
+    const vt = g(() => !!e.value.debug);
+    function ze() {
+      if (Vt(W.dataset) && qt({
         componentName: "VueUiWheel",
         type: "dataset",
-        debug: ct.value
+        debug: vt.value
       }), e.value.responsive) {
-        const a = Kt(() => {
-          const { width: o, height: t } = Qt({
+        const a = ea(() => {
+          const { width: o, height: t } = ta({
             chart: X.value,
             title: e.value.style.chart.title.text ? we.value : null,
             source: Ce.value,
@@ -151,7 +155,7 @@ const Ye = { style: { chart: { backgroundColor: "#1A1A1A", color: "#CCCCCC", lay
       }
       We(ie.value.percentage || 0);
     }
-    Et(() => {
+    Xt(() => {
       B.value && (U.value && B.value.unobserve(U.value), B.value.disconnect());
     });
     function Q([a, o, t], l) {
@@ -166,7 +170,7 @@ const Ye = { style: { chart: { backgroundColor: "#1A1A1A", color: "#CCCCCC", lay
       const t = a.replace("#", ""), l = parseInt(t.substring(0, 2), 16), i = parseInt(t.substring(2, 4), 16), v = parseInt(t.substring(4, 6), 16), y = 1 - Math.min(1, Math.max(0, e.value.style.chart.layout.wheel.ticks.shadeColorRatio3d)) * o, k = Math.max(0, Math.min(255, Math.round(l * y))), x = Math.max(0, Math.min(255, Math.round(i * y))), M = Math.max(0, Math.min(255, Math.round(v * y)));
       return `#${k.toString(16).padStart(2, "0")}${x.toString(16).padStart(2, "0")}${M.toString(16).padStart(2, "0")}`;
     }
-    function ht({
+    function dt({
       cx: a,
       cy: o,
       radius: t,
@@ -182,15 +186,15 @@ const Ye = { style: { chart: { backgroundColor: "#1A1A1A", color: "#CCCCCC", lay
     }) {
       const h = C * Math.PI / 180, p = t, A = t * l, b = [];
       for (let m = 0; m < i; m += 1) {
-        const f = (m / i * 360 + v) * Math.PI / 180, O = a + p * Math.cos(f), H = o + p * Math.sin(f), j = a + A * Math.cos(f), G = o + A * Math.sin(f), V = [O - a, H - o, 0], q = [j - a, G - o, 0], [oe, Xe, Z] = Q(V, h), [ye, ke, J] = Q(q, h), [se, xt, , Mt] = ee([oe, Xe, Z], y), [At, $t, , za] = ee([ye, ke, J], y), St = a + se, It = o + xt, _t = a + At, Dt = o + $t, zt = (Math.max(Z, J) - -p * Math.sin(h)) / (2 * p * Math.sin(h) || 1), Ot = S ? S(m) : !0, Pt = e.value.style.chart.layout.wheel.ticks.gradient.show ? K(x, m * D.value / N.value * (e.value.style.chart.layout.wheel.ticks.gradient.shiftHueIntensity / 100)) : x, Rt = Pe(Ot ? Pt : M, zt), Ft = Math.max(1.25, k * Mt * (Math.min(r.value.width, r.value.height) / 360));
-        b.push({ i: m, x1: St, y1: It, x2: _t, y2: Dt, stroke: Ft, color: Rt, z: Math.max(Z, J) });
+        const f = (m / i * 360 + v) * Math.PI / 180, z = a + p * Math.cos(f), H = o + p * Math.sin(f), j = a + A * Math.cos(f), G = o + A * Math.sin(f), V = [z - a, H - o, 0], q = [j - a, G - o, 0], [oe, Xe, Z] = Q(V, h), [ye, ke, J] = Q(q, h), [se, At, , $t] = ee([oe, Xe, Z], y), [St, It, , Pa] = ee([ye, ke, J], y), _t = a + se, Dt = o + At, Ot = a + St, zt = o + It, Pt = (Math.max(Z, J) - -p * Math.sin(h)) / (2 * p * Math.sin(h) || 1), Rt = S ? S(m) : !0, Ft = e.value.style.chart.layout.wheel.ticks.gradient.show ? K(x, m * D.value / N.value * (e.value.style.chart.layout.wheel.ticks.gradient.shiftHueIntensity / 100)) : x, Tt = Pe(Rt ? Ft : M, Pt), Wt = Math.max(1.25, k * $t * (Math.min(r.value.width, r.value.height) / 360));
+        b.push({ i: m, x1: _t, y1: Dt, x2: Ot, y2: zt, stroke: Wt, color: Tt, z: Math.max(Z, J) });
       }
       return b.sort((m, f) => m.z - f.z), b;
     }
     const Re = g(() => {
       if (!e.value.layout === "3d") return null;
       const a = N.value, o = e.value.style.chart.layout.wheel.ticks.gradient.show ? K(e.value.style.chart.layout.wheel.ticks.activeColor, 0) : e.value.style.chart.layout.wheel.ticks.activeColor, t = e.value.style.chart.layout.wheel.ticks.inactiveColor, l = e.value.style.chart.layout.wheel.ticks.strokeWidth;
-      return ht({
+      return dt({
         cx: u.value.centerX,
         cy: u.value.centerY,
         radius: u.value.radius,
@@ -209,8 +213,8 @@ const Ye = { style: { chart: { backgroundColor: "#1A1A1A", color: "#CCCCCC", lay
       const y = v * Math.PI / 180, k = [];
       let x = 0;
       for (let h = 0; h < l; h += 1) {
-        const p = (h / l * 360 + i) * Math.PI / 180, A = [t * Math.cos(p), t * Math.sin(p), 0], [b, m, f] = Q(A, y), [O, H, , j] = ee([b, m, f], C);
-        x += j, k.push([a + O, o + H]);
+        const p = (h / l * 360 + i) * Math.PI / 180, A = [t * Math.cos(p), t * Math.sin(p), 0], [b, m, f] = Q(A, y), [z, H, , j] = ee([b, m, f], C);
+        x += j, k.push([a + z, o + H]);
       }
       let M = `M ${k[0][0]} ${k[0][1]}`;
       for (let h = 1; h < k.length; h += 1)
@@ -243,7 +247,7 @@ const Ye = { style: { chart: { backgroundColor: "#1A1A1A", color: "#CCCCCC", lay
         h: k - (C - h) + 2 * p
       };
     });
-    function vt(a) {
+    function yt(a) {
       const o = Math.min(r.value.width, r.value.height) * 1.45, { d: t, avgScale: l } = Fe({
         cx: u.value.centerX,
         cy: u.value.centerY,
@@ -258,12 +262,12 @@ const Ye = { style: { chart: { backgroundColor: "#1A1A1A", color: "#CCCCCC", lay
         strokeWidth: v
       };
     }
-    const Te = g(() => vt(Math.max(0, u.value.radius * 0.8 * e.value.style.chart.layout.innerCircle.radiusRatio)));
+    const Te = g(() => yt(Math.max(0, u.value.radius * 0.8 * e.value.style.chart.layout.innerCircle.radiusRatio)));
     function te({ cx: a, cy: o, r: t, aRad: l, ax: i, f: v }) {
       const C = [t * Math.cos(l), t * Math.sin(l), 0], [y, k, x] = Q(C, i), [M, S, , h] = ee([y, k, x], v);
       return { x: a + M, y: o + S, z: x, s: h };
     }
-    function dt({
+    function kt({
       cx: a,
       cy: o,
       radius: t,
@@ -279,7 +283,7 @@ const Ye = { style: { chart: { backgroundColor: "#1A1A1A", color: "#CCCCCC", lay
     }) {
       const h = C * Math.PI / 180, p = t, A = t * l, b = 2 * Math.PI / i, m = [];
       for (let f = 0; f < i; f += 1) {
-        const O = v * Math.PI / 180 + b * f, H = O + b * Math.min(1, e.value.style.chart.layout.wheel.ticks.spacingRatio3d), j = te({ cx: a, cy: o + S, r: p, aRad: O, ax: h, f: y }), G = te({ cx: a, cy: o + S, r: p, aRad: H, ax: h, f: y }), V = te({ cx: a, cy: o + S, r: A, aRad: H, ax: h, f: y }), q = te({ cx: a, cy: o + S, r: A, aRad: O, ax: h, f: y }), oe = (j.z + G.z + q.z + V.z) / 4, Z = (M ? M(f) : !0) ? e.value.style.chart.layout.wheel.ticks.gradient.show ? K(
+        const z = v * Math.PI / 180 + b * f, H = z + b * Math.min(1, e.value.style.chart.layout.wheel.ticks.spacingRatio3d), j = te({ cx: a, cy: o + S, r: p, aRad: z, ax: h, f: y }), G = te({ cx: a, cy: o + S, r: p, aRad: H, ax: h, f: y }), V = te({ cx: a, cy: o + S, r: A, aRad: H, ax: h, f: y }), q = te({ cx: a, cy: o + S, r: A, aRad: z, ax: h, f: y }), oe = (j.z + G.z + q.z + V.z) / 4, Z = (M ? M(f) : !0) ? e.value.style.chart.layout.wheel.ticks.gradient.show ? K(
           e.value.style.chart.layout.wheel.ticks.activeColor,
           f * (100 / i) / 100 * (e.value.style.chart.layout.wheel.ticks.gradient.shiftHueIntensity / 100)
         ) : k : x, ye = (() => {
@@ -288,12 +292,12 @@ const Ye = { style: { chart: { backgroundColor: "#1A1A1A", color: "#CCCCCC", lay
         })(), ke = Pe(Z, ye), J = `M ${j.x} ${j.y} L ${G.x} ${G.y} L ${V.x} ${V.y} L ${q.x} ${q.y} Z`;
         m.push({ i: f, d: J, fill: ke, z: oe });
       }
-      return m.sort((f, O) => f.z - O.z), m;
+      return m.sort((f, z) => f.z - z.z), m;
     }
     const ve = g(() => {
       if (e.value.layout !== "3d") return null;
       const a = N.value;
-      return (o) => dt({
+      return (o) => kt({
         cx: u.value.centerX,
         cy: u.value.centerY,
         radius: u.value.radius,
@@ -319,7 +323,7 @@ const Ye = { style: { chart: { backgroundColor: "#1A1A1A", color: "#CCCCCC", lay
     const N = g(() => (e.value.debug && e.value.style.chart.layout.wheel.ticks.quantity < 12 && console.warn("VueUiWheel - The min number of ticks is 12"), e.value.debug && e.value.style.chart.layout.wheel.ticks.quantity > 200 && console.warn("VueUiWheel - The max number of ticks is 200"), Math.max(12, Math.min(e.value.style.chart.layout.wheel.ticks.quantity, 200)))), D = g(() => 100 / N.value), Be = g(() => {
       const a = [];
       for (let o = 0; o < N.value; o += 1) {
-        const t = d.value > o * D.value ? e.value.style.chart.layout.wheel.ticks.activeColor : e.value.style.chart.layout.wheel.ticks.inactiveColor, { x: l, y: i } = ze(r.value.size / N.value * o), { x: v, y: C } = ze(r.value.size / N.value * o, e.value.style.chart.layout.wheel.ticks.sizeRatio);
+        const t = d.value > o * D.value ? e.value.style.chart.layout.wheel.ticks.activeColor : e.value.style.chart.layout.wheel.ticks.inactiveColor, { x: l, y: i } = Oe(r.value.size / N.value * o), { x: v, y: C } = Oe(r.value.size / N.value * o, e.value.style.chart.layout.wheel.ticks.sizeRatio);
         a.push({
           x1: l,
           y1: i,
@@ -329,7 +333,7 @@ const Ye = { style: { chart: { backgroundColor: "#1A1A1A", color: "#CCCCCC", lay
         });
       }
       return a;
-    }), yt = g(() => Vt({ series: Be.value.map((a) => ({
+    }), ft = g(() => Zt({ series: Be.value.map((a) => ({
       name: "",
       value: 1,
       color: a.color
@@ -341,9 +345,9 @@ const Ye = { style: { chart: { backgroundColor: "#1A1A1A", color: "#CCCCCC", lay
     function de() {
       le.value = !le.value;
     }
-    async function kt({ scale: a = 2 } = {}) {
+    async function gt({ scale: a = 2 } = {}) {
       if (!X.value) return;
-      const { width: o, height: t } = X.value.getBoundingClientRect(), l = o / t, { imageUri: i, base64: v } = await ia({ domElement: X.value, base64: !0, img: !0, scale: a });
+      const { width: o, height: t } = X.value.getBoundingClientRect(), l = o / t, { imageUri: i, base64: v } = await ca({ domElement: X.value, base64: !0, img: !0, scale: a });
       return {
         imageUri: i,
         base64: v,
@@ -353,21 +357,21 @@ const Ye = { style: { chart: { backgroundColor: "#1A1A1A", color: "#CCCCCC", lay
         aspectRatio: l
       };
     }
-    const ft = g(() => e.value.style.chart.layout.wheel.ticks.strokeWidth * 2), gt = g(() => e.value.style.chart.layout.wheel.ticks.strokeWidth * 2 * 0.75), pt = g(() => e.value.style.chart.layout.wheel.ticks.strokeWidth), L = g(() => Math.max(1, Math.min(20, e.value.style.chart.layout.wheel.ticks.depth3d))), mt = g(() => e.value.style.chart.backgroundColor), wt = g(() => e.value.style.chart.title), { exportSvg: Ct, getSvg: bt } = oa({
+    const pt = g(() => e.value.style.chart.layout.wheel.ticks.strokeWidth * 2), mt = g(() => e.value.style.chart.layout.wheel.ticks.strokeWidth * 2 * 0.75), wt = g(() => e.value.style.chart.layout.wheel.ticks.strokeWidth), L = g(() => Math.max(1, Math.min(20, e.value.style.chart.layout.wheel.ticks.depth3d))), Ct = g(() => e.value.style.chart.backgroundColor), bt = g(() => e.value.style.chart.title), { exportSvg: xt, getSvg: Mt } = na({
       svg: ce,
-      title: wt,
-      backgroundColor: mt,
+      title: bt,
+      backgroundColor: Ct,
       stretchTitle: !0
     });
     async function Ne({ isCb: a }) {
       if (a) {
-        const { blob: o, url: t, text: l, dataUrl: i } = await bt();
+        const { blob: o, url: t, text: l, dataUrl: i } = await Mt();
         e.value.userOptions.callbacks.svg({ blob: o, url: t, text: l, dataUrl: i });
       } else
-        Ct();
+        xt();
     }
-    return et({
-      getImage: kt,
+    return at({
+      getImage: gt,
       generatePdf: _e,
       generateImage: De,
       generateSvg: Ne,
@@ -382,7 +386,7 @@ const Ye = { style: { chart: { backgroundColor: "#1A1A1A", color: "#CCCCCC", lay
       onMouseenter: o[0] || (o[0] = () => c(Ae)(!0)),
       onMouseleave: o[1] || (o[1] = () => c(Ae)(!1))
     }, [
-      e.value.userOptions.buttons.annotator ? (s(), ne(c(tt), {
+      e.value.userOptions.buttons.annotator ? (s(), ne(c(lt), {
         key: 0,
         svgRef: c(ce),
         backgroundColor: e.value.style.chart.backgroundColor,
@@ -409,21 +413,21 @@ const Ye = { style: { chart: { backgroundColor: "#1A1A1A", color: "#CCCCCC", lay
           w(a.$slots, "annotator-action-delete", R(F({ disabled: t })), void 0, !0)
         ]),
         _: 3
-      }, 8, ["svgRef", "backgroundColor", "color", "active"])) : z("", !0),
-      ut.value ? (s(), n("div", {
+      }, 8, ["svgRef", "backgroundColor", "color", "active"])) : O("", !0),
+      ht.value ? (s(), n("div", {
         key: 1,
         ref_key: "noTitle",
         ref: be,
         class: "vue-data-ui-no-title-space",
         style: "height:36px; width: 100%;background:transparent"
-      }, null, 512)) : z("", !0),
+      }, null, 512)) : O("", !0),
       e.value.style.chart.title.text ? (s(), n("div", {
         key: 2,
         ref_key: "chartTitle",
         ref: we,
         style: "width:100%;background:transparent;padding-bottom:12px"
       }, [
-        (s(), ne(ua, {
+        (s(), ne(ha, {
           key: `title_${xe.value}`,
           config: {
             title: {
@@ -436,10 +440,10 @@ const Ye = { style: { chart: { backgroundColor: "#1A1A1A", color: "#CCCCCC", lay
             }
           }
         }, null, 8, ["config"]))
-      ], 512)) : z("", !0),
-      e.value.userOptions.show && rt.value && (c($e) || c(ue)) ? (s(), ne(c(at), {
+      ], 512)) : O("", !0),
+      e.value.userOptions.show && ut.value && (c($e) || c(ue)) ? (s(), ne(c(ot), {
         ref_key: "details",
-        ref: it,
+        ref: ct,
         key: `user_options_${me.value}`,
         backgroundColor: e.value.style.chart.backgroundColor,
         color: e.value.style.chart.color,
@@ -467,7 +471,7 @@ const Ye = { style: { chart: { backgroundColor: "#1A1A1A", color: "#CCCCCC", lay
         style: ge({
           visibility: c($e) ? c(ue) ? "visible" : "hidden" : "visible"
         })
-      }, Nt({ _: 2 }, [
+      }, jt({ _: 2 }, [
         a.$slots.menuIcon ? {
           name: "menuIcon",
           fn: I(({ isOpen: t, color: l }) => [
@@ -510,16 +514,16 @@ const Ye = { style: { chart: { backgroundColor: "#1A1A1A", color: "#CCCCCC", lay
           ]),
           key: "5"
         } : void 0
-      ]), 1032, ["backgroundColor", "color", "isPrinting", "isImaging", "uid", "hasPdf", "hasImg", "hasSvg", "hasFullscreen", "isFullscreen", "position", "titles", "hasAnnotator", "isAnnotation", "chartElement", "callbacks", "printScale", "onGeneratePdf", "onGenerateImage", "style"])) : z("", !0),
+      ]), 1032, ["backgroundColor", "color", "isPrinting", "isImaging", "uid", "hasPdf", "hasImg", "hasSvg", "hasFullscreen", "isFullscreen", "position", "titles", "hasAnnotator", "isAnnotation", "chartElement", "callbacks", "printScale", "onGeneratePdf", "onGenerateImage", "style"])) : O("", !0),
       (s(), n("svg", {
         ref_key: "svgRef",
         ref: ce,
-        xmlns: c(qt),
+        xmlns: c(Jt),
         class: P({ "vue-data-ui-fullscreen--on": ae.value, "vue-data-ui-fulscreen--off": !ae.value, "vue-ui-wheel-3d-svg": e.value.layout === "3d" }),
         viewBox: e.value.layout === "3d" && !e.value.responsive ? `${E.value?.x - 10} ${E.value?.y ?? 0} ${E.value?.w + 20} ${E.value?.h ?? Math.max(10, r.value.height)}` : `0 0 ${Math.max(10, r.value.width)} ${Math.max(10, r.value.height)}`,
         style: ge(`max-width:100%;overflow:visible;background:transparent;color:${e.value.style.chart.color}`)
       }, [
-        Xt(c(lt)),
+        Ut(c(st)),
         a.$slots["chart-background"] ? (s(), n("foreignObject", {
           key: 0,
           x: e.value.layout === "3d" && !e.value.responsive ? E.value?.x - 10 : 0,
@@ -531,7 +535,7 @@ const Ye = { style: { chart: { backgroundColor: "#1A1A1A", color: "#CCCCCC", lay
           }
         }, [
           w(a.$slots, "chart-background", {}, void 0, !0)
-        ], 8, da)) : z("", !0),
+        ], 8, ka)) : O("", !0),
         e.value.layout === "3d" && Te.value ? (s(), n("path", {
           key: 1,
           class: "vue-ui-wheel-inner-circle",
@@ -539,7 +543,7 @@ const Ye = { style: { chart: { backgroundColor: "#1A1A1A", color: "#CCCCCC", lay
           stroke: e.value.style.chart.layout.innerCircle.stroke,
           "stroke-width": e.value.style.chart.layout.innerCircle.strokeWidth,
           fill: "none"
-        }, null, 8, ya)) : e.value.style.chart.layout.innerCircle.show ? (s(), n("circle", {
+        }, null, 8, fa)) : e.value.style.chart.layout.innerCircle.show ? (s(), n("circle", {
           key: 2,
           class: "vue-ui-wheel-inner-circle",
           cx: u.value.centerX,
@@ -548,9 +552,9 @@ const Ye = { style: { chart: { backgroundColor: "#1A1A1A", color: "#CCCCCC", lay
           stroke: e.value.style.chart.layout.innerCircle.stroke,
           "stroke-width": e.value.style.chart.layout.innerCircle.strokeWidth,
           fill: "none"
-        }, null, 8, ka)) : z("", !0),
+        }, null, 8, ga)) : O("", !0),
         e.value.layout === "3d" ? (s(), n(_, { key: 3 }, [
-          e.value.style.chart.layout.wheel.ticks.type === "classic" ? (s(), n("g", fa, [
+          e.value.style.chart.layout.wheel.ticks.type === "classic" ? (s(), n("g", pa, [
             (s(!0), n(_, null, T(L.value, (t) => (s(), n("g", null, [
               (s(!0), n(_, null, T(Re.value || [], (l) => (s(), n("line", {
                 key: l.i,
@@ -562,7 +566,7 @@ const Ye = { style: { chart: { backgroundColor: "#1A1A1A", color: "#CCCCCC", lay
                 "stroke-width": e.value.style.chart.layout.wheel.ticks.strokeWidth / 360 * Math.min(r.value.width, r.value.height),
                 "stroke-linecap": e.value.style.chart.layout.wheel.ticks.rounded ? "round" : "butt",
                 class: P({ "vue-ui-wheel-tick": !0, "vue-ui-tick-animated": e.value.style.chart.animation.use && l.i * D.value <= d.value })
-              }, null, 10, ga))), 128))
+              }, null, 10, ma))), 128))
             ]))), 256)),
             (s(!0), n(_, null, T(Re.value || [], (t) => (s(), n("line", {
               key: t.i,
@@ -574,8 +578,8 @@ const Ye = { style: { chart: { backgroundColor: "#1A1A1A", color: "#CCCCCC", lay
               "stroke-width": e.value.style.chart.layout.wheel.ticks.strokeWidth / 360 * Math.min(r.value.width, r.value.height),
               "stroke-linecap": e.value.style.chart.layout.wheel.ticks.rounded ? "round" : "butt",
               class: P({ "vue-ui-wheel-tick": !0, "vue-ui-tick-animated": e.value.style.chart.animation.use && t.i * D.value <= d.value })
-            }, null, 10, pa))), 128))
-          ])) : (s(), n("g", ma, [
+            }, null, 10, wa))), 128))
+          ])) : (s(), n("g", Ca, [
             (s(!0), n(_, null, T(L.value, (t) => (s(), n("g", null, [
               (s(!0), n(_, null, T(ve.value(-t) || [], (l) => (s(), n("path", {
                 key: l.i,
@@ -586,7 +590,7 @@ const Ye = { style: { chart: { backgroundColor: "#1A1A1A", color: "#CCCCCC", lay
                 "stroke-linecap": "round",
                 "stroke-linejoin": "round",
                 class: "vue-ui-wheel-tick"
-              }, null, 8, wa))), 128)),
+              }, null, 8, ba))), 128)),
               (s(!0), n(_, null, T(ve.value(-t) || [], (l) => (s(), n("path", {
                 key: l.i,
                 d: l.d,
@@ -596,9 +600,9 @@ const Ye = { style: { chart: { backgroundColor: "#1A1A1A", color: "#CCCCCC", lay
                 "stroke-linecap": "round",
                 "stroke-linejoin": "round",
                 class: P({ "vue-ui-wheel-tick": !0, "vue-ui-tick-animated-3d": e.value.style.chart.animation.use && l.i * D.value <= d.value })
-              }, null, 10, Ca))), 128))
+              }, null, 10, xa))), 128))
             ]))), 256)),
-            jt("g", null, [
+            Lt("g", null, [
               (s(!0), n(_, null, T(ve.value(-L.value) || [], (t) => (s(), n("path", {
                 key: t.i,
                 d: t.d,
@@ -608,7 +612,7 @@ const Ye = { style: { chart: { backgroundColor: "#1A1A1A", color: "#CCCCCC", lay
                 "stroke-linecap": "round",
                 "stroke-linejoin": "round",
                 class: P({ "vue-ui-wheel-tick": !0, "vue-ui-tick-animated-3d": e.value.style.chart.animation.use && t.i * D.value <= d.value })
-              }, null, 10, ba))), 128))
+              }, null, 10, Ma))), 128))
             ])
           ]))
         ], 64)) : (s(), n(_, { key: 4 }, [
@@ -621,15 +625,15 @@ const Ye = { style: { chart: { backgroundColor: "#1A1A1A", color: "#CCCCCC", lay
             "stroke-width": e.value.style.chart.layout.wheel.ticks.strokeWidth / 360 * Math.min(r.value.width, r.value.height),
             "stroke-linecap": e.value.style.chart.layout.wheel.ticks.rounded ? "round" : "butt",
             class: P({ "vue-ui-wheel-tick": !0, "vue-ui-tick-animated": e.value.style.chart.animation.use && l * D.value <= d.value })
-          }, null, 10, xa))), 256)) : (s(!0), n(_, { key: 1 }, T(yt.value, (t, l) => (s(), n("path", {
+          }, null, 10, Aa))), 256)) : (s(!0), n(_, { key: 1 }, T(ft.value, (t, l) => (s(), n("path", {
             d: t.arcSlice,
             fill: t.color,
             class: P({ "vue-ui-wheel-tick": !0, "vue-ui-tick-animated": e.value.style.chart.animation.use && l * D.value <= d.value }),
             stroke: e.value.style.chart.layout.wheel.ticks.stroke,
             "stroke-width": e.value.style.chart.layout.wheel.ticks.strokeWidth
-          }, null, 10, Ma))), 256))
+          }, null, 10, $a))), 256))
         ], 64)),
-        e.value.style.chart.layout.percentage.show ? (s(), n("g", Aa, [
+        e.value.style.chart.layout.percentage.show ? (s(), n("g", Sa, [
           c(Me) ? (s(), n("rect", {
             key: 0,
             x: u.value.centerX - 40,
@@ -638,7 +642,7 @@ const Ye = { style: { chart: { backgroundColor: "#1A1A1A", color: "#CCCCCC", lay
             height: Y.value,
             fill: "#6A6A6A80",
             rx: "3"
-          }, null, 8, $a)) : (s(), n("text", {
+          }, null, 8, Ia)) : (s(), n("text", {
             key: 1,
             x: u.value.centerX + e.value.style.chart.layout.percentage.offsetX,
             y: u.value.centerY + Y.value / 3 + e.value.style.chart.layout.percentage.offsetY,
@@ -653,21 +657,21 @@ const Ye = { style: { chart: { backgroundColor: "#1A1A1A", color: "#CCCCCC", lay
             "stroke-linejoin": "round",
             "paint-order": "stroke fill",
             class: P({ "vue-ui-wheel-label": e.value.layout === "3d" })
-          }, Ut(c(Zt)(
+          }, Ht(c(Kt)(
             e.value.style.chart.layout.percentage.formatter,
             c(He)(d.value),
-            c(Jt)({
+            c(Qt)({
               v: c(He)(d.value),
               s: "%",
               r: e.value.style.chart.layout.percentage.rounding
             })
-          )), 11, Sa))
-        ])) : z("", !0),
+          )), 11, _a))
+        ])) : O("", !0),
         w(a.$slots, "svg", { svg: r.value }, void 0, !0)
-      ], 14, va)),
-      a.$slots.watermark ? (s(), n("div", Ia, [
+      ], 14, ya)),
+      a.$slots.watermark ? (s(), n("div", Da, [
         w(a.$slots, "watermark", R(F({ isPrinting: c(Se) || c(Ie) })), void 0, !0)
-      ])) : z("", !0),
+      ])) : O("", !0),
       a.$slots.source ? (s(), n("div", {
         key: 5,
         ref_key: "source",
@@ -675,16 +679,16 @@ const Ye = { style: { chart: { backgroundColor: "#1A1A1A", color: "#CCCCCC", lay
         dir: "auto"
       }, [
         w(a.$slots, "source", {}, void 0, !0)
-      ], 512)) : z("", !0),
-      c(Me) ? (s(), ne(aa, { key: 6 })) : z("", !0)
-    ], 46, ha));
+      ], 512)) : O("", !0),
+      c(Me) ? (s(), ne(oa, { key: 6 })) : O("", !0)
+    ], 46, da));
   }
-}, Da = /* @__PURE__ */ ca(_a, [["__scopeId", "data-v-a1178806"]]), Ga = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
+}, za = /* @__PURE__ */ va(Oa, [["__scopeId", "data-v-a1178806"]]), qa = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
   __proto__: null,
-  default: Da
+  default: za
 }, Symbol.toStringTag, { value: "Module" }));
 export {
-  Ya as a,
-  Ga as b,
-  Da as v
+  Va as a,
+  qa as b,
+  za as v
 };