vue-data-ui 3.2.7 → 3.3.0

package/dist/{vue-ui-wheel-BzS_N3GP.js → vue-ui-wheel-KrGLMCqW.js}

@@ -1,19 +1,20 @@
-import { useCssVars as xt, computed as m, defineAsyncComponent as ke, ref as _, toRefs as Mt, watch as Le, shallowRef as Ue, onMounted as Ct, onBeforeUnmount as _t, createElementBlock as n, openBlock as o, unref as c, normalizeStyle as fe, normalizeClass as P, createBlock as se, createCommentVNode as S, createSlots as At, withCtx as V, renderSlot as z, normalizeProps as oe, guardReactiveProps as ne, createVNode as $t, Fragment as $, renderList as O, createElementVNode as It, toDisplayString as St } from "vue";
-import { c as Rt, t as Pt, o as zt, f as Ot, i as Z, n as Wt, X as Dt, m as je, a as Tt, q as Be, d as Ft } from "./lib-BEpWEyMm.js";
-import { t as Xt, u as Nt } from "./useResponsive-DfdjqQps.js";
-import { u as Lt, a as Ee } from "./useNestedProp-BOk-tPdu.js";
-import { u as Ut } from "./usePrinter-w23K-ezx.js";
-import { u as jt } from "./useUserOptionState-BIvW1Kz7.js";
-import { u as Bt } from "./useChartAccessibility-9icAAmYg.js";
-import { t as Et } from "./themes-Dw-dDudK.js";
-import Yt from "./Title-DG2nloSB.js";
-import Ht from "./img-DjWwQXVS.js";
-import { u as qt, B as Gt } from "./BaseScanner-BgWxam9d.js";
-import { _ as Vt } from "./_plugin-vue_export-helper-CHgC5LLL.js";
-const Zt = ["id"], Jt = ["xmlns", "viewBox"], Kt = ["x", "y", "width", "height"], Qt = ["d", "stroke", "stroke-width"], ea = ["cx", "cy", "r", "stroke", "stroke-width"], ta = { key: 0 }, aa = ["x1", "y1", "x2", "y2", "stroke", "stroke-width", "stroke-linecap"], la = ["x1", "y1", "x2", "y2", "stroke", "stroke-width", "stroke-linecap"], sa = { key: 1 }, oa = ["d", "fill", "stroke", "stroke-width"], na = ["d", "fill", "stroke", "stroke-width"], ua = ["d", "fill", "stroke", "stroke-width"], ia = ["x1", "x2", "y1", "y2", "stroke", "stroke-width", "stroke-linecap"], ra = ["d", "fill", "stroke", "stroke-width"], ca = { key: 5 }, ha = ["x", "y", "height"], va = ["x", "y", "font-size", "fill", "font-weight", "stroke", "stroke-width"], da = {
+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 V, 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 { c as Tt, t as Dt, o as Ft, f as Xt, i as Z, n as Nt, X as Lt, m as Ee, a as Ut, q as je, d as Bt } from "./lib-GIYcnm0E.js";
+import { t as Et, u as jt } from "./useResponsive-DfdjqQps.js";
+import { u as Yt, a as Ye } from "./useNestedProp-mxyyqd0B.js";
+import { u as Gt, B as Ht } from "./BaseScanner-BgWxam9d.js";
+import { u as qt } from "./usePrinter-DYRFiw7X.js";
+import { u as Vt } from "./useSvgExport-B7-Vrjtu.js";
+import { u as Zt } from "./useUserOptionState-BIvW1Kz7.js";
+import { u as Jt } from "./useChartAccessibility-9icAAmYg.js";
+import Kt from "./img-6wPuVVtk.js";
+import Qt from "./Title-D17CJXko.js";
+import { t as ea } from "./themes-Dw-dDudK.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 = {
   key: 4,
   class: "vue-data-ui-watermark"
-}, ya = {
+}, wa = {
   __name: "vue-ui-wheel",
   props: {
     config: {
@@ -29,18 +30,18 @@ const Zt = ["id"], Jt = ["xmlns", "viewBox"], Kt = ["x", "y", "width", "height"]
       }
     }
   },
-  setup(Ye, { expose: He }) {
-    xt((t) => ({
-      v69bfe3e6: nt.value,
-      v73b9429a: ut.value,
-      v73b97d74: it.value
+  setup(Ge, { expose: He }) {
+    $t((t) => ({
+      v67722b6e: ut.value,
+      v3e8c19ef: rt.value,
+      v3e8bfc82: it.value
     }));
-    const qe = ke(() => import("./PenAndPaper-CR8q353D.js")), Ge = ke(() => import("./UserOptions-DsTgvAok.js")), Ve = ke(() => import("./PackageVersion-Cwrh45ON.js")), { vue_ui_wheel: Ze } = Lt(), F = Ye, Je = m(() => !!F.dataset && Object.keys(F.dataset).length), ue = _(Rt()), Ke = _(null), pe = _(0), X = _(null), ge = _(null), me = _(null), we = _(null), be = _(0), e = _(ce()), { loading: xe, FINAL_DATASET: ie } = qt({
-      ...Mt(F),
+    const qe = ge(() => import("./PenAndPaper-BxbYiPy4.js")), Ve = ge(() => import("./UserOptions-B3vCIe-u.js")), Ze = ge(() => import("./PackageVersion-C9oklnuy.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),
       FINAL_CONFIG: e,
-      prepareConfig: ce,
+      prepareConfig: he,
       skeletonDataset: { percentage: 50 },
-      skeletonConfig: Pt({
+      skeletonConfig: Dt({
         defaultConfig: e.value,
         userConfig: {
           userOptions: { show: !1 },
@@ -63,31 +64,31 @@ const Zt = ["id"], Jt = ["xmlns", "viewBox"], Kt = ["x", "y", "width", "height"]
           }
         }
       })
-    }), { userOptionsVisible: re, setUserOptionsVisibility: Me, keepUserOptionState: Ce } = jt({ config: e.value }), { svgRef: _e } = Bt({ config: e.value.style.chart.title });
-    function ce() {
-      const t = Ee({
+    }), { userOptionsVisible: ie, setUserOptionsVisibility: Ce, keepUserOptionState: _e } = Zt({ config: e.value }), { svgRef: ce } = Jt({ config: e.value.style.chart.title });
+    function he() {
+      const t = Ye({
         userConfig: F.config,
-        defaultConfig: Ze
+        defaultConfig: Je
       });
       return t.theme ? {
-        ...Ee({
-          userConfig: Et.vue_ui_wheel[t.theme] || F.config,
+        ...Ye({
+          userConfig: ea.vue_ui_wheel[t.theme] || F.config,
           defaultConfig: t
         })
       } : t;
     }
-    Le(() => F.config, (t) => {
-      e.value = ce(), re.value = !e.value.userOptions.showOnChartHover, Pe(), be.value += 1;
+    Ue(() => F.config, (t) => {
+      e.value = he(), ie.value = !e.value.userOptions.showOnChartHover, Pe(), xe.value += 1;
     }, { deep: !0 });
-    const { isPrinting: Ae, isImaging: $e, generatePdf: Ie, generateImage: Se } = Ut({
+    const { isPrinting: Ae, isImaging: $e, generatePdf: Se, generateImage: Ie } = qt({
       elementId: ue.value,
       fileName: e.value.style.chart.title.text || "vue-ui-wheel",
       options: e.value.userOptions.print
-    }), Qe = m(() => e.value.userOptions.show && !e.value.style.chart.title.text), u = _({
+    }), et = f(() => e.value.userOptions.show && !e.value.style.chart.title.text), u = _({
       size: 360,
       height: 360,
       width: 360
-    }), B = _(e.value.style.chart.layout.percentage.fontSize), i = m(() => ({
+    }), E = _(e.value.style.chart.layout.percentage.fontSize), i = 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
@@ -98,37 +99,37 @@ const Zt = ["id"], Jt = ["xmlns", "viewBox"], Kt = ["x", "y", "width", "height"]
         y: i.value.centerY + i.value.radius * Math.sin(29.85 + t * Math.PI / 180) * s
       };
     }
-    const d = _(e.value.style.chart.animation.use ? 0 : ie.value.percentage || 0);
-    Le(() => ie.value, (t) => {
-      e.value.style.chart.animation.use ? Te(t.percentage) : d.value = t.percentage || 0;
+    const d = _(e.value.style.chart.animation.use ? 0 : re.value.percentage || 0);
+    Ue(() => re.value, (t) => {
+      e.value.style.chart.animation.use ? De(t.percentage) : d.value = t.percentage || 0;
     }, { deep: !0 });
-    const W = Ue(null), L = Ue(null);
-    Ct(() => {
+    const W = Be(null), L = Be(null);
+    It(() => {
       Pe();
     });
-    const et = m(() => !!e.value.debug);
+    const tt = f(() => !!e.value.debug);
     function Pe() {
-      if (zt(F.dataset) && Ot({
+      if (Ft(F.dataset) && Xt({
         componentName: "VueUiWheel",
         type: "dataset",
-        debug: et.value
+        debug: tt.value
       }), e.value.responsive) {
-        const t = Xt(() => {
-          const { width: s, height: a } = Nt({
+        const t = Et(() => {
+          const { width: s, height: a } = jt({
             chart: X.value,
-            title: e.value.style.chart.title.text ? ge.value : null,
-            source: me.value,
-            noTitle: we.value
+            title: e.value.style.chart.title.text ? me.value : null,
+            source: we.value,
+            noTitle: be.value
           });
           requestAnimationFrame(() => {
-            u.value.width = s, u.value.height = a, B.value = e.value.style.chart.layout.percentage.fontSize / 360 * Math.min(s, a);
+            u.value.width = s, u.value.height = a, E.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);
       }
-      Te(ie.value.percentage || 0);
+      De(re.value.percentage || 0);
     }
-    _t(() => {
+    Rt(() => {
       W.value && (L.value && W.value.unobserve(L.value), W.value.disconnect());
     });
     function J([t, s, a], l) {
@@ -143,7 +144,7 @@ const Zt = ["id"], Jt = ["xmlns", "viewBox"], Kt = ["x", "y", "width", "height"]
       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)));
       return `#${k.toString(16).padStart(2, "0")}${x.toString(16).padStart(2, "0")}${M.toString(16).padStart(2, "0")}`;
     }
-    function tt({
+    function at({
       cx: t,
       cy: s,
       radius: a,
@@ -158,16 +159,16 @@ const Zt = ["id"], Jt = ["xmlns", "viewBox"], Kt = ["x", "y", "width", "height"]
       getActive: A
     }) {
       const h = w * Math.PI / 180, p = a, C = a * l, b = [];
-      for (let g = 0; g < r; g += 1) {
-        const f = (g / r * 360 + v) * Math.PI / 180, R = t + p * Math.cos(f), j = s + p * Math.sin(f), N = t + C * Math.cos(f), E = s + C * Math.sin(f), Y = [R - t, j - s, 0], H = [N - t, E - s, 0], [ae, Ne, q] = J(Y, h), [de, ye, G] = J(H, h), [le, rt, , ct] = K([ae, Ne, q], y), [ht, vt, , ka] = K([de, ye, G], y), dt = t + le, yt = s + rt, kt = t + ht, ft = s + vt, pt = (Math.max(q, G) - -p * Math.sin(h)) / (2 * p * Math.sin(h) || 1), gt = A ? A(g) : !0, mt = e.value.style.chart.layout.wheel.ticks.gradient.show ? Z(x, g * I.value / T.value * (e.value.style.chart.layout.wheel.ticks.gradient.shiftHueIntensity / 100)) : x, wt = ze(gt ? mt : M, pt), bt = Math.max(1.25, k * ct * (Math.min(u.value.width, u.value.height) / 360));
-        b.push({ i: g, x1: dt, y1: yt, x2: kt, y2: ft, stroke: bt, color: wt, z: Math.max(q, G) });
+      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, q] = J(G, h), [le, yt, , kt] = K([ae, Le, H], y), [gt, ft, , ba] = K([ye, ke, q], y), pt = t + le, mt = s + yt, wt = t + gt, bt = s + ft, xt = (Math.max(H, q) - -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, q) });
       }
-      return b.sort((g, f) => g.z - f.z), b;
+      return b.sort((m, g) => m.z - g.z), b;
     }
-    const Oe = m(() => {
+    const Oe = f(() => {
       if (!e.value.layout === "3d") return null;
-      const t = T.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 tt({
+      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,
@@ -179,15 +180,15 @@ const Zt = ["id"], Jt = ["xmlns", "viewBox"], Kt = ["x", "y", "width", "height"]
         baseStroke: l,
         activeColor: s,
         inactiveColor: a,
-        getActive: (r) => d.value > r * I.value
+        getActive: (r) => d.value > r * S.value
       });
     });
     function We({ cx: t, cy: s, r: a, count: l = 180, startDeg: r = -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, g, f] = J(C, y), [R, j, , N] = K([b, g, f], w);
-        x += N, k.push([t + R, s + j]);
+        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]);
       }
       let M = `M ${k[0][0]} ${k[0][1]}`;
       for (let h = 1; h < k.length; h += 1)
@@ -196,10 +197,10 @@ const Zt = ["id"], Jt = ["xmlns", "viewBox"], Kt = ["x", "y", "width", "height"]
       const A = x / l;
       return { d: M, avgScale: A, pts: k };
     }
-    const D = m(() => {
+    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 C = a, b = s, { avgScale: g, pts: f } = We({
+        const C = a, b = s, { avgScale: m, pts: g } = We({
           cx: i.value.centerX,
           cy: i.value.centerY,
           r: C,
@@ -207,7 +208,7 @@ const Zt = ["id"], Jt = ["xmlns", "viewBox"], Kt = ["x", "y", "width", "height"]
           axDeg: b,
           f: t
         });
-        return { pts: f, avgScale: g };
+        return { pts: g, avgScale: m };
       })();
       let v = 1 / 0, w = 1 / 0, y = -1 / 0, k = -1 / 0;
       for (const [C, b] of l)
@@ -220,7 +221,7 @@ const Zt = ["id"], Jt = ["xmlns", "viewBox"], Kt = ["x", "y", "width", "height"]
         h: k - (w - h) + 2 * p
       };
     });
-    function at(t) {
+    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,
@@ -235,12 +236,12 @@ const Zt = ["id"], Jt = ["xmlns", "viewBox"], Kt = ["x", "y", "width", "height"]
         strokeWidth: v
       };
     }
-    const De = m(() => at(Math.max(0, i.value.radius * 0.8 * e.value.style.chart.layout.innerCircle.radiusRatio)));
+    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 };
     }
-    function lt({
+    function st({
       cx: t,
       cy: s,
       radius: a,
@@ -254,23 +255,23 @@ const Zt = ["id"], Jt = ["xmlns", "viewBox"], Kt = ["x", "y", "width", "height"]
       getActive: M,
       Y: A = 0
     }) {
-      const h = w * Math.PI / 180, p = a, C = a * l, b = 2 * Math.PI / r, g = [];
-      for (let f = 0; f < r; f += 1) {
-        const R = v * Math.PI / 180 + b * f, j = 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 }), E = Q({ cx: t, cy: s + A, r: p, aRad: j, ax: h, f: y }), Y = Q({ cx: t, cy: s + A, r: C, aRad: j, ax: h, f: y }), H = Q({ cx: t, cy: s + A, r: C, aRad: R, ax: h, f: y }), ae = (N.z + E.z + H.z + Y.z) / 4, q = (M ? M(f) : !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 / 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(
           e.value.style.chart.layout.wheel.ticks.activeColor,
-          f * (100 / r) / 100 * (e.value.style.chart.layout.wheel.ticks.gradient.shiftHueIntensity / 100)
-        ) : k : x, de = (() => {
+          g * (100 / r) / 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);
-        })(), ye = ze(q, de), G = `M ${N.x} ${N.y} L ${E.x} ${E.y} L ${Y.x} ${Y.y} L ${H.x} ${H.y} Z`;
-        g.push({ i: f, d: G, fill: ye, z: ae });
+        })(), ke = ze(H, ye), q = `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: q, fill: ke, z: ae });
       }
-      return g.sort((f, R) => f.z - R.z), g;
+      return m.sort((g, R) => g.z - R.z), m;
     }
-    const he = m(() => {
+    const ve = f(() => {
       if (e.value.layout !== "3d") return null;
-      const t = T.value;
-      return (s) => lt({
+      const t = D.value;
+      return (s) => st({
         cx: i.value.centerX,
         cy: i.value.centerY,
         radius: i.value.radius,
@@ -285,7 +286,7 @@ const Zt = ["id"], Jt = ["xmlns", "viewBox"], Kt = ["x", "y", "width", "height"]
         Y: s
       });
     });
-    function Te(t) {
+    function De(t) {
       let s = e.value.style.chart.animation.speed;
       const a = Math.abs(t - d.value) / (s * 120);
       function l() {
@@ -293,20 +294,20 @@ const Zt = ["id"], Jt = ["xmlns", "viewBox"], Kt = ["x", "y", "width", "height"]
       }
       l();
     }
-    const T = m(() => (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)))), I = m(() => 100 / T.value), Fe = m(() => {
+    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 t = [];
-      for (let s = 0; s < T.value; s += 1) {
-        const a = d.value > s * I.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 / T.value * s), { x: v, y: w } = Re(u.value.size / T.value * s, e.value.style.chart.layout.wheel.ticks.sizeRatio);
+      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);
         t.push({
           x1: l,
           y1: r,
           x2: v,
           y2: w,
-          color: e.value.style.chart.layout.wheel.ticks.gradient.show ? Z(a, s * I.value / T.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 * S.value / D.value * (e.value.style.chart.layout.wheel.ticks.gradient.shiftHueIntensity / 100)) : a
         });
       }
       return t;
-    }), st = m(() => Wt({ series: Fe.value.map((t) => ({
+    }), ot = f(() => Nt({ series: Fe.value.map((t) => ({
       name: "",
       value: 1,
       color: t.color
@@ -315,12 +316,12 @@ const Zt = ["id"], Jt = ["xmlns", "viewBox"], Kt = ["x", "y", "width", "height"]
       ee.value = t, pe.value += 1;
     }
     const te = _(!1);
-    function ve() {
+    function de() {
       te.value = !te.value;
     }
-    async function ot({ scale: t = 2 } = {}) {
+    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 Ht({ domElement: X.value, base64: !0, img: !0, scale: t });
+      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 });
       return {
         imageUri: r,
         base64: v,
@@ -330,45 +331,58 @@ const Zt = ["id"], Jt = ["xmlns", "viewBox"], Kt = ["x", "y", "width", "height"]
         aspectRatio: l
       };
     }
-    const nt = m(() => e.value.style.chart.layout.wheel.ticks.strokeWidth * 2), ut = m(() => e.value.style.chart.layout.wheel.ticks.strokeWidth * 2 * 0.75), it = m(() => e.value.style.chart.layout.wheel.ticks.strokeWidth), U = m(() => Math.max(1, Math.min(20, e.value.style.chart.layout.wheel.ticks.depth3d)));
+    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 } = Vt({
+      svg: ce,
+      title: ht,
+      backgroundColor: ct,
+      stretchTitle: !0
+    });
+    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 });
+      } else
+        vt();
+    }
     return He({
-      getImage: ot,
-      generatePdf: Ie,
-      generateImage: Se,
-      toggleAnnotator: ve,
+      getImage: nt,
+      generatePdf: Se,
+      generateImage: Ie,
+      generateSvg: Ne,
+      toggleAnnotator: de,
       toggleFullscreen: Xe
     }), (t, s) => (o(), n("div", {
-      class: P(["vue-ui-wheel", { "vue-ui-wheel-3d-wrap": e.value.layout === "3d" }]),
+      class: P(["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,
       style: fe(`font-family:${e.value.style.fontFamily};width:100%; text-align:center;background:${e.value.style.chart.backgroundColor};${e.value.responsive ? "height:100%" : ""}`),
-      onMouseenter: s[0] || (s[0] = () => c(Me)(!0)),
-      onMouseleave: s[1] || (s[1] = () => c(Me)(!1))
+      onMouseenter: s[0] || (s[0] = () => c(Ce)(!0)),
+      onMouseleave: s[1] || (s[1] = () => c(Ce)(!1))
     }, [
       e.value.userOptions.buttons.annotator ? (o(), se(c(qe), {
         key: 0,
-        svgRef: c(_e),
+        svgRef: c(ce),
         backgroundColor: e.value.style.chart.backgroundColor,
         color: e.value.style.chart.color,
         active: te.value,
-        onClose: ve
-      }, null, 8, ["svgRef", "backgroundColor", "color", "active"])) : S("", !0),
-      Qe.value ? (o(), n("div", {
+        onClose: de
+      }, null, 8, ["svgRef", "backgroundColor", "color", "active"])) : I("", !0),
+      et.value ? (o(), n("div", {
         key: 1,
         ref_key: "noTitle",
-        ref: we,
+        ref: be,
         class: "vue-data-ui-no-title-space",
         style: "height:36px; width: 100%;background:transparent"
-      }, null, 512)) : S("", !0),
+      }, null, 512)) : I("", !0),
       e.value.style.chart.title.text ? (o(), n("div", {
         key: 2,
         ref_key: "chartTitle",
-        ref: ge,
+        ref: me,
         style: "width:100%;background:transparent;padding-bottom:12px"
       }, [
-        (o(), se(Yt, {
-          key: `title_${be.value}`,
+        (o(), se(Qt, {
+          key: `title_${xe.value}`,
           config: {
             title: {
               cy: "wheel-title",
@@ -380,10 +394,10 @@ const Zt = ["id"], Jt = ["xmlns", "viewBox"], Kt = ["x", "y", "width", "height"]
             }
           }
         }, null, 8, ["config"]))
-      ], 512)) : S("", !0),
-      e.value.userOptions.show && Je.value && (c(Ce) || c(re)) ? (o(), se(c(Ge), {
+      ], 512)) : I("", !0),
+      e.value.userOptions.show && Ke.value && (c(_e) || c(ie)) ? (o(), se(c(Ve), {
         ref_key: "details",
-        ref: Ke,
+        ref: Qe,
         key: `user_options_${pe.value}`,
         backgroundColor: e.value.style.chart.backgroundColor,
         color: e.value.style.chart.color,
@@ -392,6 +406,7 @@ const Zt = ["id"], Jt = ["xmlns", "viewBox"], Kt = ["x", "y", "width", "height"]
         uid: ue.value,
         hasPdf: e.value.userOptions.buttons.pdf,
         hasImg: e.value.userOptions.buttons.img,
+        hasSvg: e.value.userOptions.buttons.svg,
         hasFullscreen: e.value.userOptions.buttons.fullscreen,
         hasXls: !1,
         isFullscreen: ee.value,
@@ -403,13 +418,14 @@ const Zt = ["id"], Jt = ["xmlns", "viewBox"], Kt = ["x", "y", "width", "height"]
         callbacks: e.value.userOptions.callbacks,
         printScale: e.value.userOptions.print.scale,
         onToggleFullscreen: Xe,
-        onGeneratePdf: c(Ie),
-        onGenerateImage: c(Se),
-        onToggleAnnotator: ve,
+        onGeneratePdf: c(Se),
+        onGenerateImage: c(Ie),
+        onGenerateSvg: Ne,
+        onToggleAnnotator: de,
         style: fe({
-          visibility: c(Ce) ? c(re) ? "visible" : "hidden" : "visible"
+          visibility: c(_e) ? c(ie) ? "visible" : "hidden" : "visible"
         })
-      }, At({ _: 2 }, [
+      }, Pt({ _: 2 }, [
         t.$slots.menuIcon ? {
           name: "menuIcon",
           fn: V(({ isOpen: a, color: l }) => [
@@ -445,36 +461,36 @@ const Zt = ["id"], Jt = ["xmlns", "viewBox"], Kt = ["x", "y", "width", "height"]
           ]),
           key: "4"
         } : void 0
-      ]), 1032, ["backgroundColor", "color", "isPrinting", "isImaging", "uid", "hasPdf", "hasImg", "hasFullscreen", "isFullscreen", "position", "titles", "hasAnnotator", "isAnnotation", "chartElement", "callbacks", "printScale", "onGeneratePdf", "onGenerateImage", "style"])) : S("", !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: _e,
-        xmlns: c(Dt),
+        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" }),
-        viewBox: e.value.layout === "3d" && !e.value.responsive ? `${D.value?.x - 10} ${D.value?.y ?? 0} ${D.value?.w + 20} ${D.value?.h ?? Math.max(10, u.value.height)}` : `0 0 ${Math.max(10, u.value.width)} ${Math.max(10, u.value.height)}`,
+        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}`)
       }, [
-        $t(c(Ve)),
+        zt(c(Ze)),
         t.$slots["chart-background"] ? (o(), n("foreignObject", {
           key: 0,
-          x: e.value.layout === "3d" && !e.value.responsive ? D.value?.x - 10 : 0,
-          y: e.value.layout === "3d" && !e.value.responsive ? D.value?.y ?? 0 : 0,
-          width: e.value.layout === "3d" && !e.value.responsive ? D.value?.w + 20 : Math.max(10, u.value.width),
-          height: e.value.layout === "3d" && !e.value.responsive ? D.value?.h ?? Math.max(10, u.value.height) : Math.max(10, u.value.height),
+          x: e.value.layout === "3d" && !e.value.responsive ? T.value?.x - 10 : 0,
+          y: e.value.layout === "3d" && !e.value.responsive ? T.value?.y ?? 0 : 0,
+          width: e.value.layout === "3d" && !e.value.responsive ? T.value?.w + 20 : Math.max(10, u.value.width),
+          height: e.value.layout === "3d" && !e.value.responsive ? T.value?.h ?? Math.max(10, u.value.height) : Math.max(10, u.value.height),
           style: {
             pointerEvents: "none"
           }
         }, [
           z(t.$slots, "chart-background", {}, void 0, !0)
-        ], 8, Kt)) : S("", !0),
-        e.value.layout === "3d" && De.value ? (o(), n("path", {
+        ], 8, sa)) : I("", !0),
+        e.value.layout === "3d" && Te.value ? (o(), n("path", {
           key: 1,
           class: "vue-ui-wheel-inner-circle",
-          d: De.value.d,
+          d: Te.value.d,
           stroke: e.value.style.chart.layout.innerCircle.stroke,
           "stroke-width": e.value.style.chart.layout.innerCircle.strokeWidth,
           fill: "none"
-        }, null, 8, Qt)) : e.value.style.chart.layout.innerCircle.show ? (o(), n("circle", {
+        }, 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,
@@ -483,9 +499,9 @@ const Zt = ["id"], Jt = ["xmlns", "viewBox"], Kt = ["x", "y", "width", "height"]
           stroke: e.value.style.chart.layout.innerCircle.stroke,
           "stroke-width": e.value.style.chart.layout.innerCircle.strokeWidth,
           fill: "none"
-        }, null, 8, ea)) : S("", !0),
+        }, null, 8, na)) : I("", !0),
         e.value.layout === "3d" ? (o(), n($, { key: 3 }, [
-          e.value.style.chart.layout.wheel.ticks.type === "classic" ? (o(), n("g", ta, [
+          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", {
                 key: l.i,
@@ -493,11 +509,11 @@ const Zt = ["id"], Jt = ["xmlns", "viewBox"], Kt = ["x", "y", "width", "height"]
                 y1: l.y1 - a,
                 x2: l.x2,
                 y2: l.y2 - a,
-                stroke: c(je)(l.color, 0.25 * a / 5),
+                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 * I.value <= d.value })
-              }, null, 10, aa))), 128))
+                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))
             ]))), 256)),
             (o(!0), n($, null, O(Oe.value || [], (a) => (o(), n("line", {
               key: a.i,
@@ -508,11 +524,11 @@ const Zt = ["id"], Jt = ["xmlns", "viewBox"], Kt = ["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 * I.value <= d.value })
-            }, null, 10, la))), 128))
-          ])) : (o(), n("g", sa, [
+              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))
+          ])) : (o(), n("g", ca, [
             (o(!0), n($, null, O(U.value, (a) => (o(), n("g", null, [
-              (o(!0), n($, null, O(he.value(-a) || [], (l) => (o(), n("path", {
+              (o(!0), n($, null, O(ve.value(-a) || [], (l) => (o(), n("path", {
                 key: l.i,
                 d: l.d,
                 fill: e.value.style.chart.layout.wheel.ticks.inactiveColor,
@@ -521,20 +537,20 @@ const Zt = ["id"], Jt = ["xmlns", "viewBox"], Kt = ["x", "y", "width", "height"]
                 "stroke-linecap": "round",
                 "stroke-linejoin": "round",
                 class: "vue-ui-wheel-tick"
-              }, null, 8, oa))), 128)),
-              (o(!0), n($, null, O(he.value(-a) || [], (l) => (o(), n("path", {
+              }, null, 8, ha))), 128)),
+              (o(!0), n($, null, O(ve.value(-a) || [], (l) => (o(), n("path", {
                 key: l.i,
                 d: l.d,
-                fill: c(je)(l.fill, 0.5 * a / U.value),
+                fill: c(Ee)(l.fill, 0.5 * a / U.value),
                 stroke: e.value.style.chart.layout.wheel.ticks.stroke,
                 "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 * I.value <= d.value })
-              }, null, 10, na))), 128))
+                class: P({ "vue-ui-wheel-tick": !0, "vue-ui-tick-animated-3d": e.value.style.chart.animation.use && l.i * S.value <= d.value })
+              }, null, 10, va))), 128))
             ]))), 256)),
-            It("g", null, [
-              (o(!0), n($, null, O(he.value(-U.value) || [], (a) => (o(), n("path", {
+            Ot("g", null, [
+              (o(!0), n($, null, O(ve.value(-U.value) || [], (a) => (o(), n("path", {
                 key: a.i,
                 d: a.d,
                 fill: a.fill,
@@ -542,8 +558,8 @@ const Zt = ["id"], Jt = ["xmlns", "viewBox"], Kt = ["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 * I.value <= d.value })
-              }, null, 10, ua))), 128))
+                class: P({ "vue-ui-wheel-tick": !0, "vue-ui-tick-animated-3d": e.value.style.chart.animation.use && a.i * S.value <= d.value })
+              }, null, 10, da))), 128))
             ])
           ]))
         ], 64)) : (o(), n($, { key: 4 }, [
@@ -555,29 +571,29 @@ const Zt = ["id"], Jt = ["xmlns", "viewBox"], Kt = ["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 * I.value <= d.value })
-          }, null, 10, ia))), 256)) : (o(!0), n($, { key: 1 }, O(st.value, (a, l) => (o(), n("path", {
+            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", {
             d: a.arcSlice,
             fill: a.color,
-            class: P({ "vue-ui-wheel-tick": !0, "vue-ui-tick-animated": e.value.style.chart.animation.use && l * I.value <= d.value }),
+            class: P({ "vue-ui-wheel-tick": !0, "vue-ui-tick-animated": e.value.style.chart.animation.use && l * S.value <= d.value }),
             stroke: e.value.style.chart.layout.wheel.ticks.stroke,
             "stroke-width": e.value.style.chart.layout.wheel.ticks.strokeWidth
-          }, null, 10, ra))), 256))
+          }, null, 10, ka))), 256))
         ], 64)),
-        e.value.style.chart.layout.percentage.show ? (o(), n("g", ca, [
-          c(xe) ? (o(), n("rect", {
+        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 - B.value / 2,
+            y: i.value.centerY - E.value / 2,
             width: 80,
-            height: B.value,
+            height: E.value,
             fill: "#6A6A6A80",
             rx: "3"
-          }, null, 8, ha)) : (o(), n("text", {
+          }, null, 8, fa)) : (o(), n("text", {
             key: 1,
             x: i.value.centerX + e.value.style.chart.layout.percentage.offsetX,
-            y: i.value.centerY + B.value / 3 + e.value.style.chart.layout.percentage.offsetY,
-            "font-size": B.value,
+            y: i.value.centerY + E.value / 3 + e.value.style.chart.layout.percentage.offsetY,
+            "font-size": E.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",
@@ -588,33 +604,33 @@ const Zt = ["id"], Jt = ["xmlns", "viewBox"], Kt = ["x", "y", "width", "height"]
             "stroke-linejoin": "round",
             "paint-order": "stroke fill",
             class: P({ "vue-ui-wheel-label": e.value.layout === "3d" })
-          }, St(c(Tt)(
+          }, Wt(c(Ut)(
             e.value.style.chart.layout.percentage.formatter,
-            c(Be)(d.value),
-            c(Ft)({
-              v: c(Be)(d.value),
+            c(je)(d.value),
+            c(Bt)({
+              v: c(je)(d.value),
               s: "%",
               r: e.value.style.chart.layout.percentage.rounding
             })
-          )), 11, va))
-        ])) : S("", !0),
+          )), 11, pa))
+        ])) : I("", !0),
         z(t.$slots, "svg", { svg: u.value }, void 0, !0)
-      ], 14, Jt)),
-      t.$slots.watermark ? (o(), n("div", da, [
+      ], 14, la)),
+      t.$slots.watermark ? (o(), n("div", ma, [
         z(t.$slots, "watermark", oe(ne({ isPrinting: c(Ae) || c($e) })), void 0, !0)
-      ])) : S("", !0),
+      ])) : I("", !0),
       t.$slots.source ? (o(), n("div", {
         key: 5,
         ref_key: "source",
-        ref: me,
+        ref: we,
         dir: "auto"
       }, [
         z(t.$slots, "source", {}, void 0, !0)
-      ], 512)) : S("", !0),
-      c(xe) ? (o(), se(Gt, { key: 6 })) : S("", !0)
-    ], 46, Zt));
+      ], 512)) : I("", !0),
+      c(Me) ? (o(), se(Ht, { key: 6 })) : I("", !0)
+    ], 46, aa));
   }
-}, Sa = /* @__PURE__ */ Vt(ya, [["__scopeId", "data-v-da4775bb"]]);
+}, Da = /* @__PURE__ */ ta(wa, [["__scopeId", "data-v-9b607460"]]);
 export {
-  Sa as default
+  Da as default
 };