vue-data-ui 3.4.6 → 3.4.8

package/dist/{vue-ui-wheel-Bh_G3WQQ.js → vue-ui-wheel--TIPvQ9I.js}

@@ -1,4 +1,4 @@
-import { useCssVars as $t, computed as f, defineAsyncComponent as ge, ref as _, toRefs as St, watch as Ue, shallowRef as Be, onMounted as It, onBeforeUnmount as Rt, createElementBlock as n, openBlock as o, unref as c, normalizeStyle as fe, normalizeClass as P, createBlock as se, createCommentVNode as I, createSlots as Pt, withCtx as q, renderSlot as z, normalizeProps as oe, guardReactiveProps as ne, createVNode as zt, Fragment as $, renderList as O, createElementVNode as Ot, toDisplayString as Wt } from "vue";
+import { useCssVars as At, computed as f, defineAsyncComponent as ge, ref as S, toRefs as _t, watch as Ue, shallowRef as Be, onMounted as It, onBeforeUnmount as Rt, createElementBlock as n, openBlock as o, unref as c, normalizeStyle as fe, normalizeClass as z, createBlock as se, createCommentVNode as I, createSlots as Pt, withCtx as E, renderSlot as R, normalizeProps as oe, guardReactiveProps as ne, createVNode as zt, Fragment as A, renderList as O, createElementVNode as Ot, toDisplayString as Wt } from "vue";
 import { c as Tt, t as Dt, o as Ft, f as Xt, i as Z, T as Nt, X as Lt, S as Ee, a as Ut, x as je, d as Bt } from "./lib-C_mNZmhD.js";
 import { t as Et, u as jt } from "./useResponsive-DfdjqQps.js";
 import { u as Yt, a as Ye } from "./useNestedProp-BjZe1Y85.js";
@@ -11,7 +11,7 @@ import Kt from "./img-BecE5qXd.js";
 import Qt from "./Title-l36lOBMx.js";
 import { t as ea } from "./themes-AUNCOb2G.js";
 import { _ as ta } from "./_plugin-vue_export-helper-CHgC5LLL.js";
-const aa = ["id"], la = ["xmlns", "viewBox"], sa = ["x", "y", "width", "height"], oa = ["d", "stroke", "stroke-width"], na = ["cx", "cy", "r", "stroke", "stroke-width"], ua = { key: 0 }, ra = ["x1", "y1", "x2", "y2", "stroke", "stroke-width", "stroke-linecap"], ia = ["x1", "y1", "x2", "y2", "stroke", "stroke-width", "stroke-linecap"], ca = { key: 1 }, ha = ["d", "fill", "stroke", "stroke-width"], va = ["d", "fill", "stroke", "stroke-width"], da = ["d", "fill", "stroke", "stroke-width"], ya = ["x1", "x2", "y1", "y2", "stroke", "stroke-width", "stroke-linecap"], ka = ["d", "fill", "stroke", "stroke-width"], ga = { key: 5 }, fa = ["x", "y", "height"], pa = ["x", "y", "font-size", "fill", "font-weight", "stroke", "stroke-width"], ma = {
+const aa = ["id"], la = ["xmlns", "viewBox"], sa = ["x", "y", "width", "height"], oa = ["d", "stroke", "stroke-width"], na = ["cx", "cy", "r", "stroke", "stroke-width"], ua = { key: 0 }, ia = ["x1", "y1", "x2", "y2", "stroke", "stroke-width", "stroke-linecap"], ra = ["x1", "y1", "x2", "y2", "stroke", "stroke-width", "stroke-linecap"], ca = { key: 1 }, ha = ["d", "fill", "stroke", "stroke-width"], va = ["d", "fill", "stroke", "stroke-width"], da = ["d", "fill", "stroke", "stroke-width"], ya = ["x1", "x2", "y1", "y2", "stroke", "stroke-width", "stroke-linecap"], ka = ["d", "fill", "stroke", "stroke-width"], ga = { key: 5 }, fa = ["x", "y", "height"], pa = ["x", "y", "font-size", "fill", "font-weight", "stroke", "stroke-width"], ma = {
   key: 4,
   class: "vue-data-ui-watermark"
 }, wa = {
@@ -31,13 +31,13 @@ const aa = ["id"], la = ["xmlns", "viewBox"], sa = ["x", "y", "width", "height"]
     }
   },
   setup(Ge, { expose: He }) {
-    $t((t) => ({
-      v67722b6e: ut.value,
-      v3e8c19ef: rt.value,
-      v3e8bfc82: it.value
+    At((t) => ({
+      v33916bed: ut.value,
+      v2d12b493: it.value,
+      v2d129726: rt.value
     }));
-    const Ve = ge(() => import("./PenAndPaper-DSvu9dwa.js")), qe = ge(() => import("./UserOptions-CnzumGJj.js")), Ze = ge(() => import("./PackageVersion-BSldVhnp.js")), { vue_ui_wheel: Je } = Yt(), F = Ge, Ke = f(() => !!F.dataset && Object.keys(F.dataset).length), ue = _(Tt()), Qe = _(null), pe = _(0), X = _(null), me = _(null), we = _(null), be = _(null), xe = _(0), e = _(he()), { loading: Me, FINAL_DATASET: re } = Gt({
-      ...St(F),
+    const Ve = ge(() => import("./PenAndPaper-DSvu9dwa.js")), qe = ge(() => import("./UserOptions-CGnQt6Fd.js")), Ze = ge(() => import("./PackageVersion-D-auaEEJ.js")), { vue_ui_wheel: Je } = Yt(), F = Ge, Ke = f(() => !!F.dataset && Object.keys(F.dataset).length), ue = S(Tt()), Qe = S(null), pe = S(0), X = S(null), me = S(null), we = S(null), be = S(null), xe = S(0), e = S(he()), { loading: Me, FINAL_DATASET: ie } = Gt({
+      ..._t(F),
       FINAL_CONFIG: e,
       prepareConfig: he,
       skeletonDataset: { percentage: 50 },
@@ -64,7 +64,7 @@ const aa = ["id"], la = ["xmlns", "viewBox"], sa = ["x", "y", "width", "height"]
           }
         }
       })
-    }), { userOptionsVisible: ie, setUserOptionsVisibility: Ce, keepUserOptionState: _e } = Zt({ config: e.value }), { svgRef: ce } = Jt({ config: e.value.style.chart.title });
+    }), { userOptionsVisible: re, setUserOptionsVisibility: Ce, keepUserOptionState: Se } = Zt({ config: e.value }), { svgRef: ce } = Jt({ config: e.value.style.chart.title });
     function he() {
       const t = Ye({
         userConfig: F.config,
@@ -78,29 +78,29 @@ const aa = ["id"], la = ["xmlns", "viewBox"], sa = ["x", "y", "width", "height"]
       } : t;
     }
     Ue(() => F.config, (t) => {
-      e.value = he(), ie.value = !e.value.userOptions.showOnChartHover, Pe(), xe.value += 1;
+      e.value = he(), re.value = !e.value.userOptions.showOnChartHover, Pe(), xe.value += 1;
     }, { deep: !0 });
-    const { isPrinting: Ae, isImaging: $e, generatePdf: Se, generateImage: Ie } = Vt({
+    const { isPrinting: $e, isImaging: Ae, generatePdf: _e, generateImage: Ie } = Vt({
       elementId: ue.value,
       fileName: e.value.style.chart.title.text || "vue-ui-wheel",
       options: e.value.userOptions.print
-    }), et = f(() => e.value.userOptions.show && !e.value.style.chart.title.text), u = _({
+    }), et = f(() => e.value.userOptions.show && !e.value.style.chart.title.text), u = S({
       size: 360,
       height: 360,
       width: 360
-    }), E = _(e.value.style.chart.layout.percentage.fontSize), i = f(() => ({
+    }), j = S(e.value.style.chart.layout.percentage.fontSize), r = f(() => ({
       radius: Math.min(u.value.width, u.value.height) * 0.9 / 2 * e.value.style.chart.layout.wheel.radiusRatio,
       centerX: u.value.width / 2,
       centerY: u.value.height / 2
     }));
     function Re(t, s = 1) {
       return {
-        x: i.value.centerX + i.value.radius * Math.cos(29.85 + t * Math.PI / 180) * s,
-        y: i.value.centerY + i.value.radius * Math.sin(29.85 + t * Math.PI / 180) * s
+        x: r.value.centerX + r.value.radius * Math.cos(29.85 + t * Math.PI / 180) * s,
+        y: r.value.centerY + r.value.radius * Math.sin(29.85 + t * Math.PI / 180) * s
       };
     }
-    const d = _(e.value.style.chart.animation.use ? 0 : re.value.percentage || 0);
-    Ue(() => re.value, (t) => {
+    const d = S(e.value.style.chart.animation.use ? 0 : ie.value.percentage || 0);
+    Ue(() => ie.value, (t) => {
       e.value.style.chart.animation.use ? De(t.percentage) : d.value = t.percentage || 0;
     }, { deep: !0 });
     const W = Be(null), L = Be(null);
@@ -122,26 +122,26 @@ const aa = ["id"], la = ["xmlns", "viewBox"], sa = ["x", "y", "width", "height"]
             noTitle: be.value
           });
           requestAnimationFrame(() => {
-            u.value.width = s, u.value.height = a, E.value = e.value.style.chart.layout.percentage.fontSize / 360 * Math.min(s, a);
+            u.value.width = s, u.value.height = a, j.value = e.value.style.chart.layout.percentage.fontSize / 360 * Math.min(s, a);
           });
         });
         W.value && (L.value && W.value.unobserve(L.value), W.value.disconnect()), W.value = new ResizeObserver(t), L.value = X.value.parentNode, W.value.observe(L.value);
       }
-      De(re.value.percentage || 0);
+      De(ie.value.percentage || 0);
     }
     Rt(() => {
       W.value && (L.value && W.value.unobserve(L.value), W.value.disconnect());
     });
     function J([t, s, a], l) {
-      const r = Math.cos(l), v = Math.sin(l);
-      return [t, s * r - a * v, s * v + a * r];
+      const i = Math.cos(l), v = Math.sin(l);
+      return [t, s * i - a * v, s * v + a * i];
     }
     function K([t, s, a], l) {
-      const r = l / (l - a);
-      return [t * r, s * r, a, r];
+      const i = l / (l - a);
+      return [t * i, s * i, a, i];
     }
     function ze(t, s) {
-      const a = t.replace("#", ""), l = parseInt(a.substring(0, 2), 16), r = parseInt(a.substring(2, 4), 16), v = parseInt(a.substring(4, 6), 16), y = 1 - Math.min(1, Math.max(0, e.value.style.chart.layout.wheel.ticks.shadeColorRatio3d)) * s, k = Math.max(0, Math.min(255, Math.round(l * y))), x = Math.max(0, Math.min(255, Math.round(r * y))), M = Math.max(0, Math.min(255, Math.round(v * y)));
+      const a = t.replace("#", ""), l = parseInt(a.substring(0, 2), 16), i = parseInt(a.substring(2, 4), 16), v = parseInt(a.substring(4, 6), 16), y = 1 - Math.min(1, Math.max(0, e.value.style.chart.layout.wheel.ticks.shadeColorRatio3d)) * s, 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 at({
@@ -149,19 +149,19 @@ const aa = ["id"], la = ["xmlns", "viewBox"], sa = ["x", "y", "width", "height"]
       cy: s,
       radius: a,
       innerRatio: l = 0.8,
-      count: r = 120,
+      count: i = 120,
       startDeg: v = 0,
       axDeg: w = 50,
       f: y = 520,
       baseStroke: k = 5,
       activeColor: x,
       inactiveColor: M,
-      getActive: A
+      getActive: $
     }) {
       const h = w * Math.PI / 180, p = a, C = a * l, b = [];
-      for (let m = 0; m < r; m += 1) {
-        const g = (m / r * 360 + v) * Math.PI / 180, R = t + p * Math.cos(g), B = s + p * Math.sin(g), N = t + C * Math.cos(g), j = s + C * Math.sin(g), Y = [R - t, B - s, 0], G = [N - t, j - s, 0], [ae, Le, H] = J(Y, h), [ye, ke, V] = J(G, h), [le, yt, , kt] = K([ae, Le, H], y), [gt, ft, , ba] = K([ye, ke, V], y), pt = t + le, mt = s + yt, wt = t + gt, bt = s + ft, xt = (Math.max(H, V) - -p * Math.sin(h)) / (2 * p * Math.sin(h) || 1), Mt = A ? A(m) : !0, Ct = e.value.style.chart.layout.wheel.ticks.gradient.show ? Z(x, m * S.value / D.value * (e.value.style.chart.layout.wheel.ticks.gradient.shiftHueIntensity / 100)) : x, _t = ze(Mt ? Ct : M, xt), At = Math.max(1.25, k * kt * (Math.min(u.value.width, u.value.height) / 360));
-        b.push({ i: m, x1: pt, y1: mt, x2: wt, y2: bt, stroke: At, color: _t, z: Math.max(H, V) });
+      for (let m = 0; m < i; m += 1) {
+        const g = (m / i * 360 + v) * Math.PI / 180, P = t + p * Math.cos(g), B = s + p * Math.sin(g), N = t + C * Math.cos(g), Y = s + C * Math.sin(g), G = [P - t, B - s, 0], H = [N - t, Y - s, 0], [ae, Le, V] = J(G, h), [ye, ke, q] = J(H, h), [le, yt, , kt] = K([ae, Le, V], y), [gt, ft, , ba] = K([ye, ke, q], y), pt = t + le, mt = s + yt, wt = t + gt, bt = s + ft, xt = (Math.max(V, q) - -p * Math.sin(h)) / (2 * p * Math.sin(h) || 1), Mt = $ ? $(m) : !0, Ct = e.value.style.chart.layout.wheel.ticks.gradient.show ? Z(x, m * _.value / D.value * (e.value.style.chart.layout.wheel.ticks.gradient.shiftHueIntensity / 100)) : x, St = ze(Mt ? Ct : M, xt), $t = Math.max(1.25, k * kt * (Math.min(u.value.width, u.value.height) / 360));
+        b.push({ i: m, x1: pt, y1: mt, x2: wt, y2: bt, stroke: $t, color: St, z: Math.max(V, q) });
       }
       return b.sort((m, g) => m.z - g.z), b;
     }
@@ -169,9 +169,9 @@ const aa = ["id"], la = ["xmlns", "viewBox"], sa = ["x", "y", "width", "height"]
       if (!e.value.layout === "3d") return null;
       const t = D.value, s = e.value.style.chart.layout.wheel.ticks.gradient.show ? Z(e.value.style.chart.layout.wheel.ticks.activeColor, 0) : e.value.style.chart.layout.wheel.ticks.activeColor, a = e.value.style.chart.layout.wheel.ticks.inactiveColor, l = e.value.style.chart.layout.wheel.ticks.strokeWidth;
       return at({
-        cx: i.value.centerX,
-        cy: i.value.centerY,
-        radius: i.value.radius,
+        cx: r.value.centerX,
+        cy: r.value.centerY,
+        radius: r.value.radius,
         innerRatio: e.value.style.chart.layout.wheel.ticks.sizeRatio,
         count: t,
         startDeg: -90,
@@ -180,29 +180,29 @@ const aa = ["id"], la = ["xmlns", "viewBox"], sa = ["x", "y", "width", "height"]
         baseStroke: l,
         activeColor: s,
         inactiveColor: a,
-        getActive: (r) => d.value > r * S.value
+        getActive: (i) => d.value > i * _.value
       });
     });
-    function We({ cx: t, cy: s, r: a, count: l = 180, startDeg: r = -90, axDeg: v = 50, f: w }) {
+    function We({ cx: t, cy: s, r: a, count: l = 180, startDeg: i = -90, axDeg: v = 50, f: w }) {
       const y = v * Math.PI / 180, k = [];
       let x = 0;
       for (let h = 0; h < l; h += 1) {
-        const p = (h / l * 360 + r) * Math.PI / 180, C = [a * Math.cos(p), a * Math.sin(p), 0], [b, m, g] = J(C, y), [R, B, , N] = K([b, m, g], w);
-        x += N, k.push([t + R, s + B]);
+        const p = (h / l * 360 + i) * Math.PI / 180, C = [a * Math.cos(p), a * Math.sin(p), 0], [b, m, g] = J(C, y), [P, B, , N] = K([b, m, g], w);
+        x += N, k.push([t + P, s + B]);
       }
       let M = `M ${k[0][0]} ${k[0][1]}`;
       for (let h = 1; h < k.length; h += 1)
         M += ` L ${k[h][0]} ${k[h][1]}`;
       M += " Z";
-      const A = x / l;
-      return { d: M, avgScale: A, pts: k };
+      const $ = x / l;
+      return { d: M, avgScale: $, pts: k };
     }
     const T = f(() => {
       if (e.value.layout !== "3d") return null;
-      const t = Math.min(u.value.width, u.value.height) * 1.45, s = e.value.style.chart.layout.wheel.tiltAngle3d, a = i.value.radius, { pts: l, avgScale: r } = (() => {
+      const t = Math.min(u.value.width, u.value.height) * 1.45, s = e.value.style.chart.layout.wheel.tiltAngle3d, a = r.value.radius, { pts: l, avgScale: i } = (() => {
         const C = a, b = s, { avgScale: m, pts: g } = We({
-          cx: i.value.centerX,
-          cy: i.value.centerY,
+          cx: r.value.centerX,
+          cy: r.value.centerY,
           r: C,
           startDeg: -90,
           axDeg: b,
@@ -213,7 +213,7 @@ const aa = ["id"], la = ["xmlns", "viewBox"], sa = ["x", "y", "width", "height"]
       let v = 1 / 0, w = 1 / 0, y = -1 / 0, k = -1 / 0;
       for (const [C, b] of l)
         C < v && (v = C), b < w && (w = b), C > y && (y = C), b > k && (k = b);
-      const x = e.value.style.chart.layout.wheel.ticks.strokeWidth / 360 * Math.min(u.value.width, u.value.height), M = e.value.style.chart.layout.innerCircle.strokeWidth || 0, A = 0.5 * Math.max(x, M * (r || 1)), h = Math.max(0, Number(e.value.style.chart.layout.wheel.ticks.depth3d) || 0), p = A;
+      const x = e.value.style.chart.layout.wheel.ticks.strokeWidth / 360 * Math.min(u.value.width, u.value.height), M = e.value.style.chart.layout.innerCircle.strokeWidth || 0, $ = 0.5 * Math.max(x, M * (i || 1)), h = Math.max(0, Number(e.value.style.chart.layout.wheel.ticks.depth3d) || 0), p = $;
       return {
         x: v - p,
         y: w - h - p,
@@ -223,8 +223,8 @@ const aa = ["id"], la = ["xmlns", "viewBox"], sa = ["x", "y", "width", "height"]
     });
     function lt(t) {
       const s = Math.min(u.value.width, u.value.height) * 1.45, { d: a, avgScale: l } = We({
-        cx: i.value.centerX,
-        cy: i.value.centerY,
+        cx: r.value.centerX,
+        cy: r.value.centerY,
         r: t,
         startDeg: -90,
         axDeg: e.value.style.chart.layout.wheel.tiltAngle3d,
@@ -236,45 +236,45 @@ const aa = ["id"], la = ["xmlns", "viewBox"], sa = ["x", "y", "width", "height"]
         strokeWidth: v
       };
     }
-    const Te = f(() => lt(Math.max(0, i.value.radius * 0.8 * e.value.style.chart.layout.innerCircle.radiusRatio)));
-    function Q({ cx: t, cy: s, r: a, aRad: l, ax: r, f: v }) {
-      const w = [a * Math.cos(l), a * Math.sin(l), 0], [y, k, x] = J(w, r), [M, A, , h] = K([y, k, x], v);
-      return { x: t + M, y: s + A, z: x, s: h };
+    const Te = f(() => lt(Math.max(0, r.value.radius * 0.8 * e.value.style.chart.layout.innerCircle.radiusRatio)));
+    function Q({ cx: t, cy: s, r: a, aRad: l, ax: i, f: v }) {
+      const w = [a * Math.cos(l), a * Math.sin(l), 0], [y, k, x] = J(w, i), [M, $, , h] = K([y, k, x], v);
+      return { x: t + M, y: s + $, z: x, s: h };
     }
     function st({
       cx: t,
       cy: s,
       radius: a,
       innerRatio: l = 0.8,
-      count: r = 120,
+      count: i = 120,
       startDeg: v = -87,
       axDeg: w = 45,
       f: y = 600,
       activeColor: k,
       inactiveColor: x,
       getActive: M,
-      Y: A = 0
+      Y: $ = 0
     }) {
-      const h = w * Math.PI / 180, p = a, C = a * l, b = 2 * Math.PI / r, m = [];
-      for (let g = 0; g < r; g += 1) {
-        const R = v * Math.PI / 180 + b * g, B = R + b * Math.min(1, e.value.style.chart.layout.wheel.ticks.spacingRatio3d), N = Q({ cx: t, cy: s + A, r: p, aRad: R, ax: h, f: y }), j = Q({ cx: t, cy: s + A, r: p, aRad: B, ax: h, f: y }), Y = Q({ cx: t, cy: s + A, r: C, aRad: B, ax: h, f: y }), G = Q({ cx: t, cy: s + A, r: C, aRad: R, ax: h, f: y }), ae = (N.z + j.z + G.z + Y.z) / 4, H = (M ? M(g) : !0) ? e.value.style.chart.layout.wheel.ticks.gradient.show ? Z(
+      const h = w * Math.PI / 180, p = a, C = a * l, b = 2 * Math.PI / i, m = [];
+      for (let g = 0; g < i; g += 1) {
+        const P = v * Math.PI / 180 + b * g, B = P + b * Math.min(1, e.value.style.chart.layout.wheel.ticks.spacingRatio3d), N = Q({ cx: t, cy: s + $, r: p, aRad: P, ax: h, f: y }), Y = Q({ cx: t, cy: s + $, r: p, aRad: B, ax: h, f: y }), G = Q({ cx: t, cy: s + $, r: C, aRad: B, ax: h, f: y }), H = Q({ cx: t, cy: s + $, r: C, aRad: P, ax: h, f: y }), ae = (N.z + Y.z + H.z + G.z) / 4, V = (M ? M(g) : !0) ? e.value.style.chart.layout.wheel.ticks.gradient.show ? Z(
           e.value.style.chart.layout.wheel.ticks.activeColor,
-          g * (100 / r) / 100 * (e.value.style.chart.layout.wheel.ticks.gradient.shiftHueIntensity / 100)
+          g * (100 / i) / 100 * (e.value.style.chart.layout.wheel.ticks.gradient.shiftHueIntensity / 100)
         ) : k : x, ye = (() => {
           const le = p * Math.sin(h) || 1;
           return (ae - -le) / (2 * le);
-        })(), ke = ze(H, ye), V = `M ${N.x} ${N.y} L ${j.x} ${j.y} L ${Y.x} ${Y.y} L ${G.x} ${G.y} Z`;
-        m.push({ i: g, d: V, fill: ke, z: ae });
+        })(), ke = ze(V, ye), q = `M ${N.x} ${N.y} L ${Y.x} ${Y.y} L ${G.x} ${G.y} L ${H.x} ${H.y} Z`;
+        m.push({ i: g, d: q, fill: ke, z: ae });
       }
-      return m.sort((g, R) => g.z - R.z), m;
+      return m.sort((g, P) => g.z - P.z), m;
     }
     const ve = f(() => {
       if (e.value.layout !== "3d") return null;
       const t = D.value;
       return (s) => st({
-        cx: i.value.centerX,
-        cy: i.value.centerY,
-        radius: i.value.radius,
+        cx: r.value.centerX,
+        cy: r.value.centerY,
+        radius: r.value.radius,
         innerRatio: e.value.style.chart.layout.wheel.ticks.sizeRatio,
         count: t,
         startDeg: -90,
@@ -294,16 +294,16 @@ const aa = ["id"], la = ["xmlns", "viewBox"], sa = ["x", "y", "width", "height"]
       }
       l();
     }
-    const D = f(() => (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)))), S = f(() => 100 / D.value), Fe = f(() => {
+    const D = f(() => (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)))), _ = f(() => 100 / D.value), Fe = f(() => {
       const t = [];
       for (let s = 0; s < D.value; s += 1) {
-        const a = d.value > s * S.value ? e.value.style.chart.layout.wheel.ticks.activeColor : e.value.style.chart.layout.wheel.ticks.inactiveColor, { x: l, y: r } = Re(u.value.size / D.value * s), { x: v, y: w } = Re(u.value.size / D.value * s, e.value.style.chart.layout.wheel.ticks.sizeRatio);
+        const a = d.value > s * _.value ? e.value.style.chart.layout.wheel.ticks.activeColor : e.value.style.chart.layout.wheel.ticks.inactiveColor, { x: l, y: i } = Re(u.value.size / D.value * s), { x: v, y: w } = Re(u.value.size / D.value * s, e.value.style.chart.layout.wheel.ticks.sizeRatio);
         t.push({
           x1: l,
-          y1: r,
+          y1: i,
           x2: v,
           y2: w,
-          color: e.value.style.chart.layout.wheel.ticks.gradient.show ? Z(a, s * S.value / D.value * (e.value.style.chart.layout.wheel.ticks.gradient.shiftHueIntensity / 100)) : a
+          color: e.value.style.chart.layout.wheel.ticks.gradient.show ? Z(a, s * _.value / D.value * (e.value.style.chart.layout.wheel.ticks.gradient.shiftHueIntensity / 100)) : a
         });
       }
       return t;
@@ -311,19 +311,19 @@ const aa = ["id"], la = ["xmlns", "viewBox"], sa = ["x", "y", "width", "height"]
       name: "",
       value: 1,
       color: t.color
-    })) }, i.value.centerX, i.value.centerY, i.value.radius, i.value.radius, 1.99999, 2, 1, 360, 105.25, i.value.radius * (1 - e.value.style.chart.layout.wheel.ticks.sizeRatio))), ee = _(!1);
+    })) }, r.value.centerX, r.value.centerY, r.value.radius, r.value.radius, 1.99999, 2, 1, 360, 105.25, r.value.radius * (1 - e.value.style.chart.layout.wheel.ticks.sizeRatio))), ee = S(!1);
     function Xe(t) {
       ee.value = t, pe.value += 1;
     }
-    const te = _(!1);
+    const te = S(!1);
     function de() {
       te.value = !te.value;
     }
     async function nt({ scale: t = 2 } = {}) {
       if (!X.value) return;
-      const { width: s, height: a } = X.value.getBoundingClientRect(), l = s / a, { imageUri: r, base64: v } = await Kt({ domElement: X.value, base64: !0, img: !0, scale: t });
+      const { width: s, height: a } = X.value.getBoundingClientRect(), l = s / a, { imageUri: i, base64: v } = await Kt({ domElement: X.value, base64: !0, img: !0, scale: t });
       return {
-        imageUri: r,
+        imageUri: i,
         base64: v,
         title: e.value.style.chart.title.text,
         width: s,
@@ -331,7 +331,7 @@ const aa = ["id"], la = ["xmlns", "viewBox"], sa = ["x", "y", "width", "height"]
         aspectRatio: l
       };
     }
-    const ut = f(() => e.value.style.chart.layout.wheel.ticks.strokeWidth * 2), rt = f(() => e.value.style.chart.layout.wheel.ticks.strokeWidth * 2 * 0.75), it = f(() => e.value.style.chart.layout.wheel.ticks.strokeWidth), U = f(() => Math.max(1, Math.min(20, e.value.style.chart.layout.wheel.ticks.depth3d))), ct = f(() => e.value.style.chart.backgroundColor), ht = f(() => e.value.style.chart.title), { exportSvg: vt, getSvg: dt } = qt({
+    const ut = f(() => e.value.style.chart.layout.wheel.ticks.strokeWidth * 2), it = f(() => e.value.style.chart.layout.wheel.ticks.strokeWidth * 2 * 0.75), rt = f(() => e.value.style.chart.layout.wheel.ticks.strokeWidth), U = f(() => Math.max(1, Math.min(20, e.value.style.chart.layout.wheel.ticks.depth3d))), ct = f(() => e.value.style.chart.backgroundColor), ht = f(() => e.value.style.chart.title), { exportSvg: vt, getSvg: dt } = qt({
       svg: ce,
       title: ht,
       backgroundColor: ct,
@@ -339,20 +339,20 @@ const aa = ["id"], la = ["xmlns", "viewBox"], sa = ["x", "y", "width", "height"]
     });
     async function Ne({ isCb: t }) {
       if (t) {
-        const { blob: s, url: a, text: l, dataUrl: r } = await dt();
-        e.value.userOptions.callbacks.svg({ blob: s, url: a, text: l, dataUrl: r });
+        const { blob: s, url: a, text: l, dataUrl: i } = await dt();
+        e.value.userOptions.callbacks.svg({ blob: s, url: a, text: l, dataUrl: i });
       } else
         vt();
     }
     return He({
       getImage: nt,
-      generatePdf: Se,
+      generatePdf: _e,
       generateImage: Ie,
       generateSvg: Ne,
       toggleAnnotator: de,
       toggleFullscreen: Xe
     }), (t, s) => (o(), n("div", {
-      class: P(["vue-ui-wheel", { "vue-data-ui-component": !0, "vue-ui-wheel-3d-wrap": e.value.layout === "3d" }]),
+      class: z(["vue-ui-wheel", { "vue-data-ui-component": !0, "vue-ui-wheel-3d-wrap": e.value.layout === "3d" }]),
       ref_key: "wheelChart",
       ref: X,
       id: ue.value,
@@ -395,14 +395,14 @@ const aa = ["id"], la = ["xmlns", "viewBox"], sa = ["x", "y", "width", "height"]
           }
         }, null, 8, ["config"]))
       ], 512)) : I("", !0),
-      e.value.userOptions.show && Ke.value && (c(_e) || c(ie)) ? (o(), se(c(qe), {
+      e.value.userOptions.show && Ke.value && (c(Se) || c(re)) ? (o(), se(c(qe), {
         ref_key: "details",
         ref: Qe,
         key: `user_options_${pe.value}`,
         backgroundColor: e.value.style.chart.backgroundColor,
         color: e.value.style.chart.color,
-        isPrinting: c(Ae),
-        isImaging: c($e),
+        isPrinting: c($e),
+        isImaging: c(Ae),
         uid: ue.value,
         hasPdf: e.value.userOptions.buttons.pdf,
         hasImg: e.value.userOptions.buttons.img,
@@ -418,55 +418,62 @@ const aa = ["id"], la = ["xmlns", "viewBox"], sa = ["x", "y", "width", "height"]
         callbacks: e.value.userOptions.callbacks,
         printScale: e.value.userOptions.print.scale,
         onToggleFullscreen: Xe,
-        onGeneratePdf: c(Se),
+        onGeneratePdf: c(_e),
         onGenerateImage: c(Ie),
         onGenerateSvg: Ne,
         onToggleAnnotator: de,
         style: fe({
-          visibility: c(_e) ? c(ie) ? "visible" : "hidden" : "visible"
+          visibility: c(Se) ? c(re) ? "visible" : "hidden" : "visible"
         })
       }, Pt({ _: 2 }, [
         t.$slots.menuIcon ? {
           name: "menuIcon",
-          fn: q(({ isOpen: a, color: l }) => [
-            z(t.$slots, "menuIcon", oe(ne({ isOpen: a, color: l })), void 0, !0)
+          fn: E(({ isOpen: a, color: l }) => [
+            R(t.$slots, "menuIcon", oe(ne({ isOpen: a, color: l })), void 0, !0)
           ]),
           key: "0"
         } : void 0,
         t.$slots.optionPdf ? {
           name: "optionPdf",
-          fn: q(() => [
-            z(t.$slots, "optionPdf", {}, void 0, !0)
+          fn: E(() => [
+            R(t.$slots, "optionPdf", {}, void 0, !0)
           ]),
           key: "1"
         } : void 0,
         t.$slots.optionImg ? {
           name: "optionImg",
-          fn: q(() => [
-            z(t.$slots, "optionImg", {}, void 0, !0)
+          fn: E(() => [
+            R(t.$slots, "optionImg", {}, void 0, !0)
           ]),
           key: "2"
         } : void 0,
+        t.$slots.optionSvg ? {
+          name: "optionSvg",
+          fn: E(() => [
+            R(t.$slots, "optionSvg", {}, void 0, !0)
+          ]),
+          key: "3"
+        } : void 0,
         t.$slots.optionFullscreen ? {
           name: "optionFullscreen",
-          fn: q(({ toggleFullscreen: a, isFullscreen: l }) => [
-            z(t.$slots, "optionFullscreen", oe(ne({ toggleFullscreen: a, isFullscreen: l })), void 0, !0)
+          fn: E(({ toggleFullscreen: a, isFullscreen: l }) => [
+            R(t.$slots, "optionFullscreen", oe(ne({ toggleFullscreen: a, isFullscreen: l })), void 0, !0)
           ]),
-          key: "3"
+          key: "4"
         } : void 0,
         t.$slots.optionAnnotator ? {
           name: "optionAnnotator",
-          fn: q(({ toggleAnnotator: a, isAnnotator: l }) => [
-            z(t.$slots, "optionAnnotator", oe(ne({ toggleAnnotator: a, isAnnotator: l })), void 0, !0)
+          fn: E(({ toggleAnnotator: a, isAnnotator: l }) => [
+            R(t.$slots, "optionAnnotator", oe(ne({ toggleAnnotator: a, isAnnotator: l })), void 0, !0)
           ]),
-          key: "4"
+          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"])) : I("", !0),
       (o(), n("svg", {
         ref_key: "svgRef",
         ref: ce,
         xmlns: c(Lt),
-        class: P({ "vue-data-ui-fullscreen--on": ee.value, "vue-data-ui-fulscreen--off": !ee.value, "vue-ui-wheel-3d-svg": e.value.layout === "3d" }),
+        class: z({ "vue-data-ui-fullscreen--on": ee.value, "vue-data-ui-fulscreen--off": !ee.value, "vue-ui-wheel-3d-svg": e.value.layout === "3d" }),
         viewBox: e.value.layout === "3d" && !e.value.responsive ? `${T.value?.x - 10} ${T.value?.y ?? 0} ${T.value?.w + 20} ${T.value?.h ?? Math.max(10, u.value.height)}` : `0 0 ${Math.max(10, u.value.width)} ${Math.max(10, u.value.height)}`,
         style: fe(`max-width:100%;overflow:visible;background:transparent;color:${e.value.style.chart.color}`)
       }, [
@@ -481,7 +488,7 @@ const aa = ["id"], la = ["xmlns", "viewBox"], sa = ["x", "y", "width", "height"]
             pointerEvents: "none"
           }
         }, [
-          z(t.$slots, "chart-background", {}, void 0, !0)
+          R(t.$slots, "chart-background", {}, void 0, !0)
         ], 8, sa)) : I("", !0),
         e.value.layout === "3d" && Te.value ? (o(), n("path", {
           key: 1,
@@ -493,17 +500,17 @@ const aa = ["id"], la = ["xmlns", "viewBox"], sa = ["x", "y", "width", "height"]
         }, null, 8, oa)) : e.value.style.chart.layout.innerCircle.show ? (o(), n("circle", {
           key: 2,
           class: "vue-ui-wheel-inner-circle",
-          cx: i.value.centerX,
-          cy: i.value.centerY,
-          r: Math.max(0, i.value.radius * e.value.style.chart.layout.innerCircle.radiusRatio * 0.8),
+          cx: r.value.centerX,
+          cy: r.value.centerY,
+          r: Math.max(0, r.value.radius * e.value.style.chart.layout.innerCircle.radiusRatio * 0.8),
           stroke: e.value.style.chart.layout.innerCircle.stroke,
           "stroke-width": e.value.style.chart.layout.innerCircle.strokeWidth,
           fill: "none"
         }, null, 8, na)) : I("", !0),
-        e.value.layout === "3d" ? (o(), n($, { key: 3 }, [
+        e.value.layout === "3d" ? (o(), n(A, { key: 3 }, [
           e.value.style.chart.layout.wheel.ticks.type === "classic" ? (o(), n("g", ua, [
-            (o(!0), n($, null, O(U.value, (a) => (o(), n("g", null, [
-              (o(!0), n($, null, O(Oe.value || [], (l) => (o(), n("line", {
+            (o(!0), n(A, null, O(U.value, (a) => (o(), n("g", null, [
+              (o(!0), n(A, null, O(Oe.value || [], (l) => (o(), n("line", {
                 key: l.i,
                 x1: l.x1,
                 y1: l.y1 - a,
@@ -512,10 +519,10 @@ const aa = ["id"], la = ["xmlns", "viewBox"], sa = ["x", "y", "width", "height"]
                 stroke: c(Ee)(l.color, 0.25 * a / 5),
                 "stroke-width": e.value.style.chart.layout.wheel.ticks.strokeWidth / 360 * Math.min(u.value.width, u.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 * S.value <= d.value })
-              }, null, 10, ra))), 128))
+                class: z({ "vue-ui-wheel-tick": !0, "vue-ui-tick-animated": e.value.style.chart.animation.use && l.i * _.value <= d.value })
+              }, null, 10, ia))), 128))
             ]))), 256)),
-            (o(!0), n($, null, O(Oe.value || [], (a) => (o(), n("line", {
+            (o(!0), n(A, null, O(Oe.value || [], (a) => (o(), n("line", {
               key: a.i,
               x1: a.x1,
               y1: a.y1 - U.value,
@@ -524,11 +531,11 @@ const aa = ["id"], la = ["xmlns", "viewBox"], sa = ["x", "y", "width", "height"]
               stroke: a.color,
               "stroke-width": e.value.style.chart.layout.wheel.ticks.strokeWidth / 360 * Math.min(u.value.width, u.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 && a.i * S.value <= d.value })
-            }, null, 10, ia))), 128))
+              class: z({ "vue-ui-wheel-tick": !0, "vue-ui-tick-animated": e.value.style.chart.animation.use && a.i * _.value <= d.value })
+            }, null, 10, ra))), 128))
           ])) : (o(), n("g", ca, [
-            (o(!0), n($, null, O(U.value, (a) => (o(), n("g", null, [
-              (o(!0), n($, null, O(ve.value(-a) || [], (l) => (o(), n("path", {
+            (o(!0), n(A, null, O(U.value, (a) => (o(), n("g", null, [
+              (o(!0), n(A, null, O(ve.value(-a) || [], (l) => (o(), n("path", {
                 key: l.i,
                 d: l.d,
                 fill: e.value.style.chart.layout.wheel.ticks.inactiveColor,
@@ -538,7 +545,7 @@ const aa = ["id"], la = ["xmlns", "viewBox"], sa = ["x", "y", "width", "height"]
                 "stroke-linejoin": "round",
                 class: "vue-ui-wheel-tick"
               }, null, 8, ha))), 128)),
-              (o(!0), n($, null, O(ve.value(-a) || [], (l) => (o(), n("path", {
+              (o(!0), n(A, null, O(ve.value(-a) || [], (l) => (o(), n("path", {
                 key: l.i,
                 d: l.d,
                 fill: c(Ee)(l.fill, 0.5 * a / U.value),
@@ -546,11 +553,11 @@ const aa = ["id"], la = ["xmlns", "viewBox"], sa = ["x", "y", "width", "height"]
                 "stroke-width": e.value.style.chart.layout.wheel.ticks.strokeWidth,
                 "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 * S.value <= d.value })
+                class: z({ "vue-ui-wheel-tick": !0, "vue-ui-tick-animated-3d": e.value.style.chart.animation.use && l.i * _.value <= d.value })
               }, null, 10, va))), 128))
             ]))), 256)),
             Ot("g", null, [
-              (o(!0), n($, null, O(ve.value(-U.value) || [], (a) => (o(), n("path", {
+              (o(!0), n(A, null, O(ve.value(-U.value) || [], (a) => (o(), n("path", {
                 key: a.i,
                 d: a.d,
                 fill: a.fill,
@@ -558,12 +565,12 @@ const aa = ["id"], la = ["xmlns", "viewBox"], sa = ["x", "y", "width", "height"]
                 "stroke-width": e.value.style.chart.layout.wheel.ticks.strokeWidth,
                 "stroke-linecap": "round",
                 "stroke-linejoin": "round",
-                class: P({ "vue-ui-wheel-tick": !0, "vue-ui-tick-animated-3d": e.value.style.chart.animation.use && a.i * S.value <= d.value })
+                class: z({ "vue-ui-wheel-tick": !0, "vue-ui-tick-animated-3d": e.value.style.chart.animation.use && a.i * _.value <= d.value })
               }, null, 10, da))), 128))
             ])
           ]))
-        ], 64)) : (o(), n($, { key: 4 }, [
-          e.value.style.chart.layout.wheel.ticks.type === "classic" ? (o(!0), n($, { key: 0 }, O(Fe.value, (a, l) => (o(), n("line", {
+        ], 64)) : (o(), n(A, { key: 4 }, [
+          e.value.style.chart.layout.wheel.ticks.type === "classic" ? (o(!0), n(A, { key: 0 }, O(Fe.value, (a, l) => (o(), n("line", {
             x1: a.x1,
             x2: a.x2,
             y1: a.y1,
@@ -571,11 +578,11 @@ const aa = ["id"], la = ["xmlns", "viewBox"], sa = ["x", "y", "width", "height"]
             stroke: a.color,
             "stroke-width": e.value.style.chart.layout.wheel.ticks.strokeWidth / 360 * Math.min(u.value.width, u.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 * S.value <= d.value })
-          }, null, 10, ya))), 256)) : (o(!0), n($, { key: 1 }, O(ot.value, (a, l) => (o(), n("path", {
+            class: z({ "vue-ui-wheel-tick": !0, "vue-ui-tick-animated": e.value.style.chart.animation.use && l * _.value <= d.value })
+          }, null, 10, ya))), 256)) : (o(!0), n(A, { key: 1 }, O(ot.value, (a, l) => (o(), n("path", {
             d: a.arcSlice,
             fill: a.color,
-            class: P({ "vue-ui-wheel-tick": !0, "vue-ui-tick-animated": e.value.style.chart.animation.use && l * S.value <= d.value }),
+            class: z({ "vue-ui-wheel-tick": !0, "vue-ui-tick-animated": e.value.style.chart.animation.use && l * _.value <= d.value }),
             stroke: e.value.style.chart.layout.wheel.ticks.stroke,
             "stroke-width": e.value.style.chart.layout.wheel.ticks.strokeWidth
           }, null, 10, ka))), 256))
@@ -583,17 +590,17 @@ const aa = ["id"], la = ["xmlns", "viewBox"], sa = ["x", "y", "width", "height"]
         e.value.style.chart.layout.percentage.show ? (o(), n("g", ga, [
           c(Me) ? (o(), n("rect", {
             key: 0,
-            x: i.value.centerX - 40,
-            y: i.value.centerY - E.value / 2,
+            x: r.value.centerX - 40,
+            y: r.value.centerY - j.value / 2,
             width: 80,
-            height: E.value,
+            height: j.value,
             fill: "#6A6A6A80",
             rx: "3"
           }, null, 8, fa)) : (o(), n("text", {
             key: 1,
-            x: i.value.centerX + e.value.style.chart.layout.percentage.offsetX,
-            y: i.value.centerY + E.value / 3 + e.value.style.chart.layout.percentage.offsetY,
-            "font-size": E.value,
+            x: r.value.centerX + e.value.style.chart.layout.percentage.offsetX,
+            y: r.value.centerY + j.value / 3 + e.value.style.chart.layout.percentage.offsetY,
+            "font-size": j.value,
             fill: e.value.style.chart.layout.wheel.ticks.gradient.show ? c(Z)(e.value.style.chart.layout.wheel.ticks.activeColor, d.value / 100 * (e.value.style.chart.layout.wheel.ticks.gradient.shiftHueIntensity / 100)) : e.value.style.chart.layout.wheel.ticks.activeColor,
             "text-anchor": "middle",
             "font-weight": e.value.style.chart.layout.percentage.bold ? "bold" : "normal",
@@ -603,7 +610,7 @@ const aa = ["id"], la = ["xmlns", "viewBox"], sa = ["x", "y", "width", "height"]
             "stroke-linecap": "round",
             "stroke-linejoin": "round",
             "paint-order": "stroke fill",
-            class: P({ "vue-ui-wheel-label": e.value.layout === "3d" })
+            class: z({ "vue-ui-wheel-label": e.value.layout === "3d" })
           }, Wt(c(Ut)(
             e.value.style.chart.layout.percentage.formatter,
             c(je)(d.value),
@@ -614,10 +621,10 @@ const aa = ["id"], la = ["xmlns", "viewBox"], sa = ["x", "y", "width", "height"]
             })
           )), 11, pa))
         ])) : I("", !0),
-        z(t.$slots, "svg", { svg: u.value }, void 0, !0)
+        R(t.$slots, "svg", { svg: u.value }, void 0, !0)
       ], 14, la)),
       t.$slots.watermark ? (o(), n("div", ma, [
-        z(t.$slots, "watermark", oe(ne({ isPrinting: c(Ae) || c($e) })), void 0, !0)
+        R(t.$slots, "watermark", oe(ne({ isPrinting: c($e) || c(Ae) })), void 0, !0)
       ])) : I("", !0),
       t.$slots.source ? (o(), n("div", {
         key: 5,
@@ -625,12 +632,12 @@ const aa = ["id"], la = ["xmlns", "viewBox"], sa = ["x", "y", "width", "height"]
         ref: we,
         dir: "auto"
       }, [
-        z(t.$slots, "source", {}, void 0, !0)
+        R(t.$slots, "source", {}, void 0, !0)
       ], 512)) : I("", !0),
       c(Me) ? (o(), se(Ht, { key: 6 })) : I("", !0)
     ], 46, aa));
   }
-}, Da = /* @__PURE__ */ ta(wa, [["__scopeId", "data-v-9b607460"]]);
+}, Da = /* @__PURE__ */ ta(wa, [["__scopeId", "data-v-2f64f3fe"]]);
 export {
   Da as default
 };