vue-data-ui 3.15.12 → 3.16.1

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

@@ -0,0 +1,738 @@
+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-DBptbyyI.js";
+import { t as na, u as ua } from "./useResponsive-DfdjqQps.js";
+import { u as ia } from "./useConfig-DO94Aj5s.js";
+import { u as ra, B as ca } from "./BaseScanner-BhhkKVoj.js";
+import { u as va } from "./usePrinter-CEpYU3r5.js";
+import { u as ha } from "./useSvgExport-ByUukOZt.js";
+import { u as Ie } from "./useNestedProp-Bf5XFbs8.js";
+import { u as da } from "./useThemeCheck-D1ZYXUwG.js";
+import { u as ya } from "./useUserOptionState-BIvW1Kz7.js";
+import { u as ka } from "./useChartAccessibility-9icAAmYg.js";
+import { u as fa } from "./usePrefersMotion-CUKm8_t8.js";
+import ga from "./img-LXxMLmCg.js";
+import pa from "./Title-BeMKE1cj.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) => ({
+      v07f51e2f: xt.value,
+      v77e20f55: Mt.value,
+      v77e1f1e8: $t.value
+    }));
+    const nt = xe(() => import("./PenAndPaper-Ct3qJ4lA.js")), ut = xe(() => import("./UserOptions-rW2fRf3V.js")), it = xe(() => import("./PackageVersion-DPO-OOVI.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-b75ffa32"]]);
+export {
+  sl as default
+};