vue-data-ui 3.17.13 → 3.18.0

package/dist/vue-ui-wheel-CnsLEArZ.js

@@ -1,908 +0,0 @@
-import { useCssVars as Vt, defineAsyncComponent as xe, computed as v, ref as b, toRefs as Gt, watch as Je, shallowRef as Qe, onMounted as Ht, onBeforeUnmount as qt, openBlock as s, createElementBlock as n, unref as r, normalizeStyle as Me, normalizeClass as F, createBlock as he, withCtx as S, renderSlot as p, normalizeProps as O, guardReactiveProps as R, createCommentVNode as z, createSlots as Zt, createElementVNode as $e, toDisplayString as Ae, createVNode as Kt, Fragment as P, renderList as X, nextTick as Jt } from "vue";
-import { j as Qt, t as et, o as ea, q as ta, v as te, a4 as aa, k as la, l as oa, K as tt, X as sa, x as at } from "./lib-DMzrGQHK.js";
-import { t as na, u as ua } from "./useResponsive-DfdjqQps.js";
-import { u as ia } from "./useConfig-CG4HT3wS.js";
-import { u as ra, B as ca } from "./BaseScanner-C2j3TsSY.js";
-import { u as va } from "./usePrinter-C4t8DdQ-.js";
-import { u as ha } from "./useSvgExport-BTG4hVPO.js";
-import { u as Ie } from "./useNestedProp-DH0BEVVS.js";
-import { u as da } from "./useThemeCheck-C9Ccl7U9.js";
-import { u as ya } from "./useUserOptionState-B7Ej974k.js";
-import { u as ka } from "./useChartAccessibility-cp6XQtqi.js";
-import { u as fa } from "./usePrefersMotion-Co0nj1eS.js";
-import ga from "./img-CjTQXS0U.js";
-import pa from "./Title-BbKoiBk2.js";
-import ma from "./vue_ui_wheel-LqBz3lv4.js";
-import { _ as wa } from "./_plugin-vue_export-helper-CHgC5LLL.js";
-const ba = ["id"], Ca = ["xmlns", "viewBox", "aria-labelledby", "aria-describedby"], xa = ["id"], Ma = ["id"], $a = ["x", "y", "width", "height"], Aa = ["d", "stroke", "stroke-width"], Ia = ["cx", "cy", "r", "stroke", "stroke-width"], Sa = { key: 0 }, Pa = ["x1", "y1", "x2", "y2", "stroke", "stroke-width", "stroke-linecap"], _a = ["x1", "y1", "x2", "y2", "stroke", "stroke-width", "stroke-linecap"], Oa = { key: 1 }, Ra = ["d", "fill", "stroke", "stroke-width"], za = ["d", "fill", "stroke", "stroke-width"], Ta = ["d", "fill", "stroke", "stroke-width"], Da = ["x1", "x2", "y1", "y2", "stroke", "stroke-width", "stroke-linecap"], Wa = ["d", "fill", "stroke", "stroke-width"], Fa = ["aria-label"], Xa = ["x", "y", "height"], Na = ["x", "y", "font-size", "fill", "font-weight", "stroke", "stroke-width"], Ua = {
-  key: 4,
-  class: "vue-data-ui-watermark"
-}, La = {
-  __name: "vue-ui-wheel",
-  props: {
-    config: {
-      type: Object,
-      default() {
-        return {};
-      }
-    },
-    dataset: {
-      type: Object,
-      default() {
-        return {};
-      }
-    }
-  },
-  emits: ["copyAlt"],
-  setup(lt, { expose: ot, emit: st }) {
-    Vt((t) => ({
-      v34f4e7ac: xt.value,
-      v85c87fe0: Mt.value,
-      v85c8baba: $t.value
-    }));
-    const nt = xe(
-      () => import("./PenAndPaper-CJDoB5H9.js")
-    ), ut = xe(
-      () => import("./UserOptions-DVduN6X7.js")
-    ), it = xe(
-      () => import("./PackageVersion-BfrCAH6_.js")
-    ), { vue_ui_wheel: rt } = ia(), { isThemeValid: ct, warnInvalidTheme: vt } = da(), T = fa(), D = lt, ht = st, dt = v(() => !!D.dataset && Object.keys(D.dataset).length), H = b(Qt()), yt = b(null), Se = b(0), j = b(null), Pe = b(null), _e = b(null), Oe = b(null), Re = b(0), ae = b(!1), le = b(!1), e = b(ke()), ze = v(
-      () => e.value.userOptions.useCursorPointer
-    ), kt = v(() => et({
-      defaultConfig: {
-        userOptions: { show: !1 },
-        style: {
-          chart: {
-            backgroundColor: "#99999930",
-            animation: { use: !1 },
-            layout: {
-              wheel: {
-                ticks: {
-                  activeColor: "#6A6A6A80",
-                  inactiveColor: "#CACACA80"
-                }
-              },
-              innerCircle: {
-                stroke: "#CACACA80"
-              }
-            }
-          }
-        }
-      },
-      userConfig: e.value.skeletonConfig ?? {}
-    })), { loading: oe, FINAL_DATASET: E } = ra({
-      ...Gt(D),
-      FINAL_CONFIG: e,
-      prepareConfig: ke,
-      skeletonDataset: D.config?.skeletonDataset ?? { percentage: 50 },
-      skeletonConfig: et({
-        defaultConfig: e.value,
-        userConfig: kt.value
-      })
-    }), { userOptionsVisible: de, setUserOptionsVisibility: Te, keepUserOptionState: De } = ya({ config: e.value }), { svgRef: ye } = ka({
-      config: e.value.style.chart.title
-    });
-    function ke() {
-      const t = Ie({
-        userConfig: D.config,
-        defaultConfig: rt
-      }), o = t.theme;
-      if (!o) return t;
-      if (!ct.value(t))
-        return vt(t), t;
-      const a = Ie({
-        userConfig: ma[o] || D.config,
-        defaultConfig: t
-      });
-      return Ie({
-        userConfig: D.config,
-        defaultConfig: a
-      });
-    }
-    Je(
-      () => D.config,
-      (t) => {
-        e.value = ke(), de.value = !e.value.userOptions.showOnChartHover, Ne(), Re.value += 1;
-      },
-      { deep: !0 }
-    );
-    const { isPrinting: fe, isImaging: ge, generatePdf: We, generateImage: Fe } = va({
-      elementId: H.value,
-      fileName: e.value.style.chart.title.text || "vue-ui-wheel",
-      options: e.value.userOptions.print
-    }), ft = v(() => e.value.userOptions.show && !e.value.style.chart.title.text), u = b({
-      size: 360,
-      height: 360,
-      width: 360
-    }), q = b(
-      e.value.style.chart.layout.percentage.fontSize
-    ), c = v(() => ({
-      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 Xe(t, o = 1) {
-      return {
-        x: c.value.centerX + c.value.radius * Math.cos(29.85 + t * Math.PI / 180) * o,
-        y: c.value.centerY + c.value.radius * Math.sin(29.85 + t * Math.PI / 180) * o
-      };
-    }
-    const y = b(
-      e.value.style.chart.animation.use && !T.value ? 0 : E.value.percentage || 0
-    );
-    Je(
-      () => E.value,
-      (t) => {
-        e.value.style.chart.animation.use && !T.value ? Ee(t.percentage) : y.value = t.percentage || 0;
-      },
-      { deep: !0 }
-    );
-    const N = Qe(null), Y = Qe(null);
-    Ht(() => {
-      Ne();
-    });
-    const gt = v(() => !!e.value.debug);
-    function Ne() {
-      if (ea(D.dataset) && ta({
-        componentName: "VueUiWheel",
-        type: "dataset",
-        debug: gt.value
-      }), e.value.responsive) {
-        const t = na(() => {
-          const { width: o, height: a } = ua({
-            chart: j.value,
-            title: e.value.style.chart.title.text ? Pe.value : null,
-            source: _e.value,
-            noTitle: Oe.value
-          });
-          requestAnimationFrame(() => {
-            u.value.width = o, u.value.height = a, q.value = e.value.style.chart.layout.percentage.fontSize / 360 * Math.min(o, a);
-          });
-        });
-        N.value && (Y.value && N.value.unobserve(Y.value), N.value.disconnect()), N.value = new ResizeObserver(t), Y.value = j.value.parentNode, N.value.observe(Y.value);
-      }
-      Ee(E.value.percentage || 0), e.value.style.chart.animation.use && !T.value || (y.value = E.value.percentage || 0);
-    }
-    qt(() => {
-      N.value && (Y.value && N.value.unobserve(Y.value), N.value.disconnect());
-    });
-    function se([t, o, a], l) {
-      const i = Math.cos(l), d = Math.sin(l);
-      return [t, o * i - a * d, o * d + a * i];
-    }
-    function ne([t, o, a], l) {
-      const i = l / (l - a);
-      return [t * i, o * i, a, i];
-    }
-    function Ue(t, o) {
-      const a = t.replace("#", ""), l = parseInt(a.substring(0, 2), 16), i = parseInt(a.substring(2, 4), 16), d = parseInt(a.substring(4, 6), 16), k = 1 - Math.min(
-        1,
-        Math.max(
-          0,
-          e.value.style.chart.layout.wheel.ticks.shadeColorRatio3d
-        )
-      ) * o, f = Math.max(0, Math.min(255, Math.round(l * k))), M = Math.max(0, Math.min(255, Math.round(i * k))), $ = Math.max(0, Math.min(255, Math.round(d * k)));
-      return `#${f.toString(16).padStart(2, "0")}${M.toString(16).padStart(2, "0")}${$.toString(16).padStart(2, "0")}`;
-    }
-    function pt({
-      cx: t,
-      cy: o,
-      radius: a,
-      innerRatio: l = 0.8,
-      count: i = 120,
-      startDeg: d = 0,
-      axDeg: C = 50,
-      f: k = 520,
-      baseStroke: f = 5,
-      activeColor: M,
-      inactiveColor: $,
-      getActive: I
-    }) {
-      const h = C * Math.PI / 180, m = a, A = a * l, x = [];
-      for (let w = 0; w < i; w += 1) {
-        const g = (w / i * 360 + d) * Math.PI / 180, W = t + m * Math.cos(g), G = o + m * Math.sin(g), B = t + A * Math.cos(g), Z = o + A * Math.sin(g), K = [W - t, G - o, 0], J = [B - t, Z - o, 0], [ce, Ke, Q] = se(K, h), [be, Ce, ee] = se(J, h), [ve, zt, , Tt] = ne([ce, Ke, Q], k), [Dt, Wt] = ne([be, Ce, ee], k), Ft = t + ve, Xt = o + zt, Nt = t + Dt, Ut = o + Wt, Lt = (Math.max(Q, ee) - -m * Math.sin(h)) / (2 * m * Math.sin(h) || 1), jt = I ? I(w) : !0, Bt = e.value.style.chart.layout.wheel.ticks.gradient.show ? te(
-          M,
-          w * _.value / L.value * (e.value.style.chart.layout.wheel.ticks.gradient.shiftHueIntensity / 100)
-        ) : M, Et = Ue(jt ? Bt : $, Lt), Yt = Math.max(
-          1.25,
-          f * Tt * (Math.min(u.value.width, u.value.height) / 360)
-        );
-        x.push({ i: w, x1: Ft, y1: Xt, x2: Nt, y2: Ut, stroke: Yt, color: Et, z: Math.max(Q, ee) });
-      }
-      return x.sort((w, g) => w.z - g.z), x;
-    }
-    const Le = v(() => {
-      if (!e.value.layout === "3d") return null;
-      const t = L.value, o = e.value.style.chart.layout.wheel.ticks.gradient.show ? te(
-        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 pt({
-        cx: c.value.centerX,
-        cy: c.value.centerY,
-        radius: c.value.radius,
-        innerRatio: e.value.style.chart.layout.wheel.ticks.sizeRatio,
-        count: t,
-        startDeg: -90,
-        axDeg: e.value.style.chart.layout.wheel.tiltAngle3d,
-        f: Math.min(u.value.width, u.value.height) * 1.45,
-        baseStroke: l,
-        activeColor: o,
-        inactiveColor: a,
-        getActive: (i) => y.value > i * _.value
-      });
-    });
-    function je({
-      cx: t,
-      cy: o,
-      r: a,
-      count: l = 180,
-      startDeg: i = -90,
-      axDeg: d = 50,
-      f: C
-    }) {
-      const k = d * Math.PI / 180, f = [];
-      let M = 0;
-      for (let h = 0; h < l; h += 1) {
-        const m = (h / l * 360 + i) * Math.PI / 180, A = [a * Math.cos(m), a * Math.sin(m), 0], [x, w, g] = se(A, k), [W, G, , B] = ne([x, w, g], C);
-        M += B, f.push([t + W, o + G]);
-      }
-      let $ = `M ${f[0][0]} ${f[0][1]}`;
-      for (let h = 1; h < f.length; h += 1)
-        $ += ` L ${f[h][0]} ${f[h][1]}`;
-      $ += " Z";
-      const I = M / l;
-      return { d: $, avgScale: I, pts: f };
-    }
-    const U = v(() => {
-      if (e.value.layout !== "3d") return null;
-      const t = Math.min(u.value.width, u.value.height) * 1.45, o = e.value.style.chart.layout.wheel.tiltAngle3d, a = c.value.radius, { pts: l, avgScale: i } = (() => {
-        const A = a, x = o, { avgScale: w, pts: g } = je({
-          cx: c.value.centerX,
-          cy: c.value.centerY,
-          r: A,
-          startDeg: -90,
-          axDeg: x,
-          f: t
-        });
-        return { pts: g, avgScale: w };
-      })();
-      let d = 1 / 0, C = 1 / 0, k = -1 / 0, f = -1 / 0;
-      for (const [A, x] of l)
-        A < d && (d = A), x < C && (C = x), A > k && (k = A), x > f && (f = x);
-      const M = e.value.style.chart.layout.wheel.ticks.strokeWidth / 360 * Math.min(u.value.width, u.value.height), $ = e.value.style.chart.layout.innerCircle.strokeWidth || 0, I = 0.5 * Math.max(M, $ * (i || 1)), h = Math.max(
-        0,
-        Number(e.value.style.chart.layout.wheel.ticks.depth3d) || 0
-      ), m = I;
-      return {
-        x: d - m,
-        y: C - h - m,
-        w: k - d + 2 * m,
-        h: f - (C - h) + 2 * m
-      };
-    });
-    function mt(t) {
-      const o = Math.min(u.value.width, u.value.height) * 1.45, { d: a, avgScale: l } = je({
-        cx: c.value.centerX,
-        cy: c.value.centerY,
-        r: t,
-        startDeg: -90,
-        axDeg: e.value.style.chart.layout.wheel.tiltAngle3d,
-        f: o
-      }), d = (e.value.style.chart.layout.innerCircle.strokeWidth || 1) * l;
-      return {
-        d: a,
-        stroke: e.value.style.chart.layout.innerCircle.stroke,
-        strokeWidth: d
-      };
-    }
-    const Be = v(() => mt(
-      Math.max(
-        0,
-        c.value.radius * 0.8 * e.value.style.chart.layout.innerCircle.radiusRatio
-      )
-    ));
-    function ue({ cx: t, cy: o, r: a, aRad: l, ax: i, f: d }) {
-      const C = [a * Math.cos(l), a * Math.sin(l), 0], [k, f, M] = se(C, i), [$, I, , h] = ne([k, f, M], d);
-      return { x: t + $, y: o + I, z: M, s: h };
-    }
-    function wt({
-      cx: t,
-      cy: o,
-      radius: a,
-      innerRatio: l = 0.8,
-      count: i = 120,
-      startDeg: d = -87,
-      axDeg: C = 45,
-      f: k = 600,
-      activeColor: f,
-      inactiveColor: M,
-      getActive: $,
-      Y: I = 0
-    }) {
-      const h = C * Math.PI / 180, m = a, A = a * l, x = 2 * Math.PI / i, w = [];
-      for (let g = 0; g < i; g += 1) {
-        const W = d * Math.PI / 180 + x * g, G = W + x * Math.min(
-          1,
-          e.value.style.chart.layout.wheel.ticks.spacingRatio3d
-        ), B = ue({
-          cx: t,
-          cy: o + I,
-          r: m,
-          aRad: W,
-          ax: h,
-          f: k
-        }), Z = ue({
-          cx: t,
-          cy: o + I,
-          r: m,
-          aRad: G,
-          ax: h,
-          f: k
-        }), K = ue({
-          cx: t,
-          cy: o + I,
-          r: A,
-          aRad: G,
-          ax: h,
-          f: k
-        }), J = ue({
-          cx: t,
-          cy: o + I,
-          r: A,
-          aRad: W,
-          ax: h,
-          f: k
-        }), ce = (B.z + Z.z + J.z + K.z) / 4, Q = ($ ? $(g) : !0) ? e.value.style.chart.layout.wheel.ticks.gradient.show ? te(
-          e.value.style.chart.layout.wheel.ticks.activeColor,
-          g * (100 / i) / 100 * (e.value.style.chart.layout.wheel.ticks.gradient.shiftHueIntensity / 100)
-        ) : f : M, be = (() => {
-          const ve = m * Math.sin(h) || 1;
-          return (ce - -ve) / (2 * ve);
-        })(), Ce = Ue(Q, be), ee = `M ${B.x} ${B.y} L ${Z.x} ${Z.y} L ${K.x} ${K.y} L ${J.x} ${J.y} Z`;
-        w.push({ i: g, d: ee, fill: Ce, z: ce });
-      }
-      return w.sort((g, W) => g.z - W.z), w;
-    }
-    const pe = v(() => {
-      if (e.value.layout !== "3d") return null;
-      const t = L.value;
-      return (o) => wt({
-        cx: c.value.centerX,
-        cy: c.value.centerY,
-        radius: c.value.radius,
-        innerRatio: e.value.style.chart.layout.wheel.ticks.sizeRatio,
-        count: t,
-        startDeg: -90,
-        axDeg: e.value.style.chart.layout.wheel.tiltAngle3d,
-        f: Math.min(u.value.width, u.value.height) * 1.45,
-        activeColor: e.value.style.chart.layout.wheel.ticks.activeColor,
-        inactiveColor: e.value.style.chart.layout.wheel.ticks.inactiveColor,
-        getActive: (a) => y.value > a * (100 / t),
-        Y: o
-      });
-    });
-    function Ee(t) {
-      let o = e.value.style.chart.animation.speed;
-      const a = Math.abs(t - y.value) / (o * 120);
-      function l() {
-        y.value < t ? y.value = Math.min(
-          y.value + a,
-          t
-        ) : y.value > t && (y.value = Math.max(
-          y.value - a,
-          t
-        )), y.value !== t && requestAnimationFrame(l);
-      }
-      l();
-    }
-    const L = v(() => (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
-      )
-    ))), _ = v(() => 100 / L.value), Ye = v(() => {
-      const t = [];
-      for (let o = 0; o < L.value; o += 1) {
-        const a = y.value > o * _.value ? e.value.style.chart.layout.wheel.ticks.activeColor : e.value.style.chart.layout.wheel.ticks.inactiveColor, { x: l, y: i } = Xe(
-          u.value.size / L.value * o
-        ), { x: d, y: C } = Xe(
-          u.value.size / L.value * o,
-          e.value.style.chart.layout.wheel.ticks.sizeRatio
-        );
-        t.push({
-          x1: l,
-          y1: i,
-          x2: d,
-          y2: C,
-          color: e.value.style.chart.layout.wheel.ticks.gradient.show ? te(
-            a,
-            o * _.value / L.value * (e.value.style.chart.layout.wheel.ticks.gradient.shiftHueIntensity / 100)
-          ) : a
-        });
-      }
-      return t;
-    }), bt = v(() => aa(
-      {
-        series: Ye.value.map((t) => ({
-          name: "",
-          value: 1,
-          color: t.color
-        }))
-      },
-      c.value.centerX,
-      c.value.centerY,
-      c.value.radius,
-      c.value.radius,
-      1.99999,
-      2,
-      1,
-      360,
-      105.25,
-      c.value.radius * (1 - e.value.style.chart.layout.wheel.ticks.sizeRatio)
-    )), ie = b(!1);
-    function Ve(t) {
-      ie.value = t, Se.value += 1;
-    }
-    const re = b(!1);
-    function me() {
-      re.value = !re.value;
-    }
-    async function Ct({ scale: t = 2 } = {}) {
-      if (!j.value) return;
-      const { width: o, height: a } = j.value.getBoundingClientRect(), l = o / a, { imageUri: i, base64: d } = await ga({
-        domElement: j.value,
-        base64: !0,
-        img: !0,
-        scale: t
-      });
-      return {
-        imageUri: i,
-        base64: d,
-        title: e.value.style.chart.title.text,
-        width: o,
-        height: a,
-        aspectRatio: l
-      };
-    }
-    const xt = v(() => e.value.style.chart.layout.wheel.ticks.strokeWidth * 2), Mt = v(() => e.value.style.chart.layout.wheel.ticks.strokeWidth * 2 * 0.75), $t = v(() => e.value.style.chart.layout.wheel.ticks.strokeWidth), V = v(() => Math.max(
-      1,
-      Math.min(20, e.value.style.chart.layout.wheel.ticks.depth3d)
-    )), At = v(() => e.value.style.chart.backgroundColor), It = v(() => e.value.style.chart.title), { exportSvg: St, getSvg: Pt } = ha({
-      svg: ye,
-      title: It,
-      backgroundColor: At,
-      stretchTitle: !0
-    });
-    async function Ge({ isCb: t }) {
-      le.value = !0, await Jt();
-      try {
-        if (t) {
-          const { blob: o, url: a, text: l, dataUrl: i } = await Pt();
-          await Promise.resolve(
-            e.value.userOptions.callbacks.svg({
-              blob: o,
-              url: a,
-              text: l,
-              dataUrl: i
-            })
-          );
-        } else
-          await Promise.resolve(St());
-      } finally {
-        le.value = !1;
-      }
-    }
-    function _t(t) {
-      if (t?.stage === "start") {
-        ae.value = !0;
-        return;
-      }
-      if (t?.stage === "end") {
-        ae.value = !1;
-        return;
-      }
-      Fe();
-    }
-    async function He() {
-      if (ht("copyAlt", {
-        config: e.value,
-        dataset: E.value
-      }), !e.value.userOptions.callbacks.altCopy) {
-        console.warn(
-          "Vue Data UI - A callback must be set for `altCopy` in userOptions."
-        );
-        return;
-      }
-      await Promise.resolve(
-        e.value.userOptions.callbacks.altCopy({
-          config: e.value,
-          dataset: E.value
-        })
-      );
-    }
-    const qe = v(() => `${H.value}-title`), Ze = v(() => `${H.value}-desc`), we = v(() => la(
-      e.value.style.chart.layout.percentage.formatter,
-      tt(y.value),
-      oa({
-        v: tt(y.value),
-        s: "%",
-        r: e.value.style.chart.layout.percentage.rounding
-      })
-    )), Ot = v(() => e.value.style.chart.title.text || ""), Rt = v(() => oe.value ? "..." : `${we.value}`);
-    return ot({
-      getImage: Ct,
-      generatePdf: We,
-      generateImage: Fe,
-      generateSvg: Ge,
-      toggleAnnotator: me,
-      toggleFullscreen: Ve,
-      copyAlt: He
-    }), (t, o) => (s(), n("div", {
-      class: F(["vue-ui-wheel", {
-        "vue-data-ui-component": !0,
-        "vue-ui-wheel-3d-wrap": e.value.layout === "3d"
-      }]),
-      ref_key: "wheelChart",
-      ref: j,
-      id: H.value,
-      style: Me(`font-family:${e.value.style.fontFamily};width:100%; text-align:center;background:${e.value.style.chart.backgroundColor};${e.value.responsive ? "height:100%" : ""}`),
-      onMouseenter: o[0] || (o[0] = () => r(Te)(!0)),
-      onMouseleave: o[1] || (o[1] = () => r(Te)(!1))
-    }, [
-      e.value.userOptions.buttons.annotator ? (s(), he(r(nt), {
-        key: 0,
-        svgRef: r(ye),
-        backgroundColor: e.value.style.chart.backgroundColor,
-        color: e.value.style.chart.color,
-        active: re.value,
-        isCursorPointer: ze.value,
-        onClose: me
-      }, {
-        "annotator-action-close": S(() => [
-          p(t.$slots, "annotator-action-close", {}, void 0, !0)
-        ]),
-        "annotator-action-color": S(({ color: a }) => [
-          p(t.$slots, "annotator-action-color", O(R({ color: a })), void 0, !0)
-        ]),
-        "annotator-action-draw": S(({ mode: a }) => [
-          p(t.$slots, "annotator-action-draw", O(R({ mode: a })), void 0, !0)
-        ]),
-        "annotator-action-undo": S(({ disabled: a }) => [
-          p(t.$slots, "annotator-action-undo", O(R({ disabled: a })), void 0, !0)
-        ]),
-        "annotator-action-redo": S(({ disabled: a }) => [
-          p(t.$slots, "annotator-action-redo", O(R({ disabled: a })), void 0, !0)
-        ]),
-        "annotator-action-delete": S(({ disabled: a }) => [
-          p(t.$slots, "annotator-action-delete", O(R({ disabled: a })), void 0, !0)
-        ]),
-        _: 3
-      }, 8, ["svgRef", "backgroundColor", "color", "active", "isCursorPointer"])) : z("", !0),
-      ft.value ? (s(), n("div", {
-        key: 1,
-        ref_key: "noTitle",
-        ref: Oe,
-        class: "vue-data-ui-no-title-space",
-        style: "height:36px; width: 100%;background:transparent"
-      }, null, 512)) : z("", !0),
-      e.value.style.chart.title.text ? (s(), n("div", {
-        key: 2,
-        ref_key: "chartTitle",
-        ref: Pe,
-        style: "width:100%;background:transparent;padding-bottom:12px"
-      }, [
-        (s(), he(pa, {
-          key: `title_${Re.value}`,
-          config: {
-            title: {
-              cy: "wheel-title",
-              ...e.value.style.chart.title
-            },
-            subtitle: {
-              cy: "wheel-subtitle",
-              ...e.value.style.chart.title.subtitle
-            }
-          }
-        }, null, 8, ["config"]))
-      ], 512)) : z("", !0),
-      e.value.userOptions.show && dt.value && (r(De) || r(de)) ? (s(), he(r(ut), {
-        ref_key: "details",
-        ref: yt,
-        key: `user_options_${Se.value}`,
-        backgroundColor: e.value.style.chart.backgroundColor,
-        color: e.value.style.chart.color,
-        isPrinting: r(fe),
-        isImaging: r(ge),
-        uid: H.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,
-        hasAltCopy: e.value.userOptions.buttons.altCopy,
-        hasXls: !1,
-        isFullscreen: ie.value,
-        position: e.value.userOptions.position,
-        titles: { ...e.value.userOptions.buttonTitles },
-        hasAnnotator: e.value.userOptions.buttons.annotator,
-        isAnnotation: re.value,
-        chartElement: j.value,
-        callbacks: e.value.userOptions.callbacks,
-        printScale: e.value.userOptions.print.scale,
-        isCursorPointer: ze.value,
-        onToggleFullscreen: Ve,
-        onGeneratePdf: r(We),
-        onGenerateImage: _t,
-        onGenerateSvg: Ge,
-        onToggleAnnotator: me,
-        onCopyAlt: He,
-        style: Me({
-          visibility: r(De) ? r(de) ? "visible" : "hidden" : "visible"
-        })
-      }, Zt({ _: 2 }, [
-        t.$slots.menuIcon ? {
-          name: "menuIcon",
-          fn: S(({ isOpen: a, color: l }) => [
-            p(t.$slots, "menuIcon", O(R({ isOpen: a, color: l })), void 0, !0)
-          ]),
-          key: "0"
-        } : void 0,
-        t.$slots.optionPdf ? {
-          name: "optionPdf",
-          fn: S(() => [
-            p(t.$slots, "optionPdf", {}, void 0, !0)
-          ]),
-          key: "1"
-        } : void 0,
-        t.$slots.optionImg ? {
-          name: "optionImg",
-          fn: S(() => [
-            p(t.$slots, "optionImg", {}, void 0, !0)
-          ]),
-          key: "2"
-        } : void 0,
-        t.$slots.optionSvg ? {
-          name: "optionSvg",
-          fn: S(() => [
-            p(t.$slots, "optionSvg", {}, void 0, !0)
-          ]),
-          key: "3"
-        } : void 0,
-        t.$slots.optionFullscreen ? {
-          name: "optionFullscreen",
-          fn: S(({ toggleFullscreen: a, isFullscreen: l }) => [
-            p(t.$slots, "optionFullscreen", O(R({ toggleFullscreen: a, isFullscreen: l })), void 0, !0)
-          ]),
-          key: "4"
-        } : void 0,
-        t.$slots.optionAnnotator ? {
-          name: "optionAnnotator",
-          fn: S(({ toggleAnnotator: a, isAnnotator: l }) => [
-            p(t.$slots, "optionAnnotator", O(R({ toggleAnnotator: a, isAnnotator: l })), void 0, !0)
-          ]),
-          key: "5"
-        } : void 0,
-        t.$slots.optionAltCopy ? {
-          name: "optionAltCopy",
-          fn: S(({ altCopy: a }) => [
-            p(t.$slots, "optionAltCopy", O(R({ altCopy: a })), void 0, !0)
-          ]),
-          key: "6"
-        } : void 0
-      ]), 1032, ["backgroundColor", "color", "isPrinting", "isImaging", "uid", "hasPdf", "hasImg", "hasSvg", "hasFullscreen", "hasAltCopy", "isFullscreen", "position", "titles", "hasAnnotator", "isAnnotation", "chartElement", "callbacks", "printScale", "isCursorPointer", "onGeneratePdf", "style"])) : z("", !0),
-      (s(), n("svg", {
-        ref_key: "svgRef",
-        ref: ye,
-        xmlns: r(sa),
-        class: F({
-          "vue-data-ui-fullscreen--on": ie.value,
-          "vue-data-ui-fulscreen--off": !ie.value,
-          "vue-ui-wheel-3d-svg": e.value.layout === "3d"
-        }),
-        viewBox: e.value.layout === "3d" && !e.value.responsive ? `${U.value?.x - 10} ${U.value?.y ?? 0} ${U.value?.w + 20} ${U.value?.h ?? Math.max(10, u.value.height)}` : `0 0 ${Math.max(10, u.value.width)} ${Math.max(10, u.value.height)}`,
-        style: Me(`max-width:100%;overflow:visible;background:transparent;color:${e.value.style.chart.color}`),
-        role: "img",
-        "aria-labelledby": qe.value,
-        "aria-describedby": Ze.value
-      }, [
-        $e("title", { id: qe.value }, Ae(Ot.value), 9, xa),
-        $e("desc", { id: Ze.value }, Ae(Rt.value), 9, Ma),
-        Kt(r(it)),
-        t.$slots["chart-background"] ? (s(), n("foreignObject", {
-          key: 0,
-          x: e.value.layout === "3d" && !e.value.responsive ? U.value?.x - 10 : 0,
-          y: e.value.layout === "3d" && !e.value.responsive ? U.value?.y ?? 0 : 0,
-          width: e.value.layout === "3d" && !e.value.responsive ? U.value?.w + 20 : Math.max(10, u.value.width),
-          height: e.value.layout === "3d" && !e.value.responsive ? U.value?.h ?? Math.max(10, u.value.height) : Math.max(10, u.value.height),
-          style: {
-            pointerEvents: "none"
-          }
-        }, [
-          p(t.$slots, "chart-background", {}, void 0, !0)
-        ], 8, $a)) : z("", !0),
-        e.value.layout === "3d" && Be.value ? (s(), n("path", {
-          key: 1,
-          class: "vue-ui-wheel-inner-circle",
-          d: Be.value.d,
-          stroke: e.value.style.chart.layout.innerCircle.stroke,
-          "stroke-width": e.value.style.chart.layout.innerCircle.strokeWidth,
-          fill: "none"
-        }, null, 8, Aa)) : e.value.style.chart.layout.innerCircle.show ? (s(), n("circle", {
-          key: 2,
-          class: "vue-ui-wheel-inner-circle",
-          cx: c.value.centerX,
-          cy: c.value.centerY,
-          r: Math.max(
-            0,
-            c.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, Ia)) : z("", !0),
-        e.value.layout === "3d" ? (s(), n(P, { key: 3 }, [
-          e.value.style.chart.layout.wheel.ticks.type === "classic" ? (s(), n("g", Sa, [
-            (s(!0), n(P, null, X(V.value, (a) => (s(), n("g", null, [
-              (s(!0), n(P, null, X(Le.value || [], (l) => (s(), n("line", {
-                key: l.i,
-                x1: l.x1,
-                y1: l.y1 - a,
-                x2: l.x2,
-                y2: l.y2 - a,
-                stroke: r(at)(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: F({
-                  "vue-ui-wheel-tick": !0,
-                  "vue-ui-tick-animated": e.value.style.chart.animation.use && !r(T) && l.i * _.value <= y.value
-                })
-              }, null, 10, Pa))), 128))
-            ]))), 256)),
-            (s(!0), n(P, null, X(Le.value || [], (a) => (s(), n("line", {
-              key: a.i,
-              x1: a.x1,
-              y1: a.y1 - V.value,
-              x2: a.x2,
-              y2: a.y2 - V.value,
-              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: F({
-                "vue-ui-wheel-tick": !0,
-                "vue-ui-tick-animated": e.value.style.chart.animation.use && !r(T) && a.i * _.value <= y.value
-              })
-            }, null, 10, _a))), 128))
-          ])) : (s(), n("g", Oa, [
-            (s(!0), n(P, null, X(V.value, (a) => (s(), n("g", null, [
-              (s(!0), n(P, null, X(pe.value(-a) || [], (l) => (s(), n("path", {
-                key: l.i,
-                d: l.d,
-                fill: e.value.style.chart.layout.wheel.ticks.inactiveColor,
-                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: "vue-ui-wheel-tick"
-              }, null, 8, Ra))), 128)),
-              (s(!0), n(P, null, X(pe.value(-a) || [], (l) => (s(), n("path", {
-                key: l.i,
-                d: l.d,
-                fill: r(at)(l.fill, 0.5 * a / V.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: F({
-                  "vue-ui-wheel-tick": !0,
-                  "vue-ui-tick-animated-3d": e.value.style.chart.animation.use && !r(T) && l.i * _.value <= y.value
-                })
-              }, null, 10, za))), 128))
-            ]))), 256)),
-            $e("g", null, [
-              (s(!0), n(P, null, X(pe.value(-V.value) || [], (a) => (s(), n("path", {
-                key: a.i,
-                d: a.d,
-                fill: a.fill,
-                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: F({
-                  "vue-ui-wheel-tick": !0,
-                  "vue-ui-tick-animated-3d": e.value.style.chart.animation.use && !r(T) && a.i * _.value <= y.value
-                })
-              }, null, 10, Ta))), 128))
-            ])
-          ]))
-        ], 64)) : (s(), n(P, { key: 4 }, [
-          e.value.style.chart.layout.wheel.ticks.type === "classic" ? (s(!0), n(P, { key: 0 }, X(Ye.value, (a, l) => (s(), n("line", {
-            x1: a.x1,
-            x2: a.x2,
-            y1: a.y1,
-            y2: a.y2,
-            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: F({
-              "vue-ui-wheel-tick": !0,
-              "vue-ui-tick-animated": e.value.style.chart.animation.use && !r(T) && l * _.value <= y.value
-            })
-          }, null, 10, Da))), 256)) : (s(!0), n(P, { key: 1 }, X(bt.value, (a, l) => (s(), n("path", {
-            d: a.arcSlice,
-            fill: a.color,
-            class: F({
-              "vue-ui-wheel-tick": !0,
-              "vue-ui-tick-animated": e.value.style.chart.animation.use && !r(T) && l * _.value <= y.value
-            }),
-            stroke: e.value.style.chart.layout.wheel.ticks.stroke,
-            "stroke-width": e.value.style.chart.layout.wheel.ticks.strokeWidth
-          }, null, 10, Wa))), 256))
-        ], 64)),
-        e.value.style.chart.layout.percentage.show ? (s(), n("g", {
-          key: 5,
-          role: "status",
-          "aria-live": "polite",
-          "aria-label": r(oe) ? "..." : we.value
-        }, [
-          r(oe) ? (s(), n("rect", {
-            key: 0,
-            x: c.value.centerX - 40,
-            y: c.value.centerY - q.value / 2,
-            width: 80,
-            height: q.value,
-            fill: "#6A6A6A80",
-            rx: "3"
-          }, null, 8, Xa)) : (s(), n("text", {
-            key: 1,
-            "aria-hidden": "true",
-            x: c.value.centerX + e.value.style.chart.layout.percentage.offsetX,
-            y: c.value.centerY + q.value / 3 + e.value.style.chart.layout.percentage.offsetY,
-            "font-size": q.value,
-            fill: e.value.style.chart.layout.wheel.ticks.gradient.show ? r(te)(
-              e.value.style.chart.layout.wheel.ticks.activeColor,
-              y.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",
-            style: { "font-variant-numeric": "tabluar-nums" },
-            stroke: e.value.style.chart.layout.percentage.stroke,
-            "stroke-width": e.value.style.chart.layout.percentage.strokeWidth,
-            "stroke-linecap": "round",
-            "stroke-linejoin": "round",
-            "paint-order": "stroke fill",
-            class: F({
-              "vue-ui-wheel-label": e.value.layout === "3d"
-            })
-          }, Ae(we.value), 11, Na))
-        ], 8, Fa)) : z("", !0),
-        p(t.$slots, "svg", {
-          svg: {
-            ...u.value,
-            isPrintingImg: r(fe) | r(ge) | ae.value,
-            isPrintingSvg: le.value
-          }
-        }, void 0, !0)
-      ], 14, Ca)),
-      t.$slots.watermark ? (s(), n("div", Ua, [
-        p(t.$slots, "watermark", O(R({
-          isPrinting: r(fe) || r(ge) || ae.value || le.value
-        })), void 0, !0)
-      ])) : z("", !0),
-      t.$slots.source ? (s(), n("div", {
-        key: 5,
-        ref_key: "source",
-        ref: _e,
-        dir: "auto"
-      }, [
-        p(t.$slots, "source", {}, void 0, !0)
-      ], 512)) : z("", !0),
-      p(t.$slots, "skeleton", {}, () => [
-        r(oe) ? (s(), he(ca, { key: 0 })) : z("", !0)
-      ], !0)
-    ], 46, ba));
-  }
-}, sl = /* @__PURE__ */ wa(La, [["__scopeId", "data-v-a8024644"]]);
-export {
-  sl as default
-};