vue-data-ui 3.6.0 → 3.7.0

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

@@ -0,0 +1,690 @@
+import { useCssVars as Tt, computed as g, defineAsyncComponent as fe, ref as $, toRefs as Wt, watch as je, shallowRef as Ue, onMounted as Bt, onBeforeUnmount as Et, createElementBlock as n, openBlock as s, unref as c, normalizeStyle as ge, normalizeClass as P, createBlock as ne, createCommentVNode as z, withCtx as I, renderSlot as w, normalizeProps as R, guardReactiveProps as F, createSlots as Nt, createVNode as Xt, Fragment as _, renderList as T, createElementVNode as jt, toDisplayString as Ut } from "vue";
+import { c as Lt, t as Ht, o as Yt, g as Gt, h as K, Z as Vt, X as qt, n as Le, a as Zt, M as He, d as Jt } from "./lib-C5BH09_g.js";
+import { t as Kt, u as Qt } from "./useResponsive-DfdjqQps.js";
+import { u as ea, a as pe } from "./useNestedProp-CWo6bftQ.js";
+import { u as ta, B as aa } from "./BaseScanner-BgWxam9d.js";
+import { u as la } from "./usePrinter-DCJzEiS8.js";
+import { u as oa } from "./useSvgExport-DrjCWun4.js";
+import { u as sa } from "./useThemeCheck-DGJ31Vi5.js";
+import { u as na } from "./useUserOptionState-BIvW1Kz7.js";
+import { u as ra } from "./useChartAccessibility-9icAAmYg.js";
+import ia from "./img-DUzJeMlr.js";
+import ua from "./Title-DfFUb9hd.js";
+import { _ as ca } from "./_plugin-vue_export-helper-CHgC5LLL.js";
+const Ye = { style: { chart: { backgroundColor: "#1A1A1A", color: "#CCCCCC", layout: { wheel: { ticks: { inactiveColor: "#4A4A4A" } }, innerCircle: { stroke: "#3A3A3A" } }, title: { color: "#CCCCCC", subtitle: { color: "#757575" } } } } }, Ge = { style: { chart: { backgroundColor: "#FFF8E1", color: "#424242", layout: { wheel: { ticks: { inactiveColor: "#5D403760", activeColor: "#D32F2F", gradient: { shiftHueIntensity: 0 } } }, innerCircle: { stroke: "#5D403760" } }, title: { color: "#424242", subtitle: { color: "#757575" } } } } }, Ve = { style: { chart: { backgroundColor: "#1E1E1E", color: "#BDBDBD", layout: { wheel: { ticks: { inactiveColor: "#5D403780", activeColor: "#D32F2F", gradient: { shiftHueIntensity: 0 } } }, innerCircle: { stroke: "#5D403760" } }, title: { color: "#FFF8E1", subtitle: { color: "#BDBDBD" } } } } }, qe = { style: { chart: { backgroundColor: "#1A1A1A", color: "#99AA99", layout: { wheel: { ticks: { rounded: !1, inactiveColor: "#333333", activeColor: "#66CC66", gradient: { shiftHueIntensity: 15 } } }, innerCircle: { show: !1 } }, title: { color: "#66CC66", subtitle: { color: "#99AA99" } } } } }, Ze = { style: { chart: { backgroundColor: "#fbfafa", color: "#8A9892", layout: { wheel: { ticks: { inactiveColor: "#F7EDE2", activeColor: "#B1A7AD", gradient: { shiftHueIntensity: 100 } } }, innerCircle: { show: !1 } }, title: { color: "#8A9892", subtitle: { color: "#99AA99" } } } } }, Je = { style: { chart: { backgroundColor: "#f6f6fb", color: "#50606C", layout: { wheel: { ticks: { rounded: !1, inactiveColor: "#BBCBC7", activeColor: "#6C94A0", gradient: { shiftHueIntensity: 10 } } }, innerCircle: { stroke: "#BBCBC7" } }, title: { color: "#50606C", subtitle: { color: "#718890" } } } } }, Ke = {
+  default: {},
+  dark: Ye,
+  celebration: Ge,
+  celebrationNight: Ve,
+  hack: qe,
+  zen: Ze,
+  concrete: Je
+}, Ya = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
+  __proto__: null,
+  celebration: Ge,
+  celebrationNight: Ve,
+  concrete: Je,
+  dark: Ye,
+  default: Ke,
+  hack: qe,
+  zen: Ze
+}, Symbol.toStringTag, { value: "Module" })), ha = ["id"], va = ["xmlns", "viewBox"], da = ["x", "y", "width", "height"], ya = ["d", "stroke", "stroke-width"], ka = ["cx", "cy", "r", "stroke", "stroke-width"], fa = { key: 0 }, ga = ["x1", "y1", "x2", "y2", "stroke", "stroke-width", "stroke-linecap"], pa = ["x1", "y1", "x2", "y2", "stroke", "stroke-width", "stroke-linecap"], ma = { key: 1 }, wa = ["d", "fill", "stroke", "stroke-width"], Ca = ["d", "fill", "stroke", "stroke-width"], ba = ["d", "fill", "stroke", "stroke-width"], xa = ["x1", "x2", "y1", "y2", "stroke", "stroke-width", "stroke-linecap"], Ma = ["d", "fill", "stroke", "stroke-width"], Aa = { key: 5 }, $a = ["x", "y", "height"], Sa = ["x", "y", "font-size", "fill", "font-weight", "stroke", "stroke-width"], Ia = {
+  key: 4,
+  class: "vue-data-ui-watermark"
+}, _a = {
+  __name: "vue-ui-wheel",
+  props: {
+    config: {
+      type: Object,
+      default() {
+        return {};
+      }
+    },
+    dataset: {
+      type: Object,
+      default() {
+        return {};
+      }
+    }
+  },
+  setup(Qe, { expose: et }) {
+    Tt((a) => ({
+      v5a57364b: ft.value,
+      v04e37e71: gt.value,
+      v04e36104: pt.value
+    }));
+    const tt = fe(() => import("./PenAndPaper-HCZQTkqi.js")), at = fe(() => import("./UserOptions-B3I-s3Lw.js")), lt = fe(() => import("./PackageVersion-Bq_mtsqr.js")), { vue_ui_wheel: ot } = ea(), { isThemeValid: st, warnInvalidTheme: nt } = sa(), W = Qe, rt = g(() => !!W.dataset && Object.keys(W.dataset).length), re = $(Lt()), it = $(null), me = $(0), X = $(null), we = $(null), Ce = $(null), be = $(null), xe = $(0), e = $(he()), { loading: Me, FINAL_DATASET: ie } = ta({
+      ...Wt(W),
+      FINAL_CONFIG: e,
+      prepareConfig: he,
+      skeletonDataset: { percentage: 50 },
+      skeletonConfig: Ht({
+        defaultConfig: e.value,
+        userConfig: {
+          userOptions: { show: !1 },
+          style: {
+            chart: {
+              backgroundColor: "#99999930",
+              animation: { use: !1 },
+              layout: {
+                wheel: {
+                  ticks: {
+                    activeColor: "#6A6A6A80",
+                    inactiveColor: "#CACACA80"
+                  }
+                },
+                innerCircle: {
+                  stroke: "#CACACA80"
+                }
+              }
+            }
+          }
+        }
+      })
+    }), { userOptionsVisible: ue, setUserOptionsVisibility: Ae, keepUserOptionState: $e } = na({ config: e.value }), { svgRef: ce } = ra({ config: e.value.style.chart.title });
+    function he() {
+      const a = pe({
+        userConfig: W.config,
+        defaultConfig: ot
+      }), o = a.theme;
+      if (!o) return a;
+      if (!st.value(a))
+        return nt(a), a;
+      const t = pe({
+        userConfig: Ke[o] || W.config,
+        defaultConfig: a
+      });
+      return pe({
+        userConfig: W.config,
+        defaultConfig: t
+      });
+    }
+    je(() => W.config, (a) => {
+      e.value = he(), ue.value = !e.value.userOptions.showOnChartHover, Oe(), xe.value += 1;
+    }, { deep: !0 });
+    const { isPrinting: Se, isImaging: Ie, generatePdf: _e, generateImage: De } = la({
+      elementId: re.value,
+      fileName: e.value.style.chart.title.text || "vue-ui-wheel",
+      options: e.value.userOptions.print
+    }), ut = g(() => e.value.userOptions.show && !e.value.style.chart.title.text), r = $({
+      size: 360,
+      height: 360,
+      width: 360
+    }), Y = $(e.value.style.chart.layout.percentage.fontSize), u = g(() => ({
+      radius: Math.min(r.value.width, r.value.height) * 0.9 / 2 * e.value.style.chart.layout.wheel.radiusRatio,
+      centerX: r.value.width / 2,
+      centerY: r.value.height / 2
+    }));
+    function ze(a, o = 1) {
+      return {
+        x: u.value.centerX + u.value.radius * Math.cos(29.85 + a * Math.PI / 180) * o,
+        y: u.value.centerY + u.value.radius * Math.sin(29.85 + a * Math.PI / 180) * o
+      };
+    }
+    const d = $(e.value.style.chart.animation.use ? 0 : ie.value.percentage || 0);
+    je(() => ie.value, (a) => {
+      e.value.style.chart.animation.use ? We(a.percentage) : d.value = a.percentage || 0;
+    }, { deep: !0 });
+    const B = Ue(null), U = Ue(null);
+    Bt(() => {
+      Oe();
+    });
+    const ct = g(() => !!e.value.debug);
+    function Oe() {
+      if (Yt(W.dataset) && Gt({
+        componentName: "VueUiWheel",
+        type: "dataset",
+        debug: ct.value
+      }), e.value.responsive) {
+        const a = Kt(() => {
+          const { width: o, height: t } = Qt({
+            chart: X.value,
+            title: e.value.style.chart.title.text ? we.value : null,
+            source: Ce.value,
+            noTitle: be.value
+          });
+          requestAnimationFrame(() => {
+            r.value.width = o, r.value.height = t, Y.value = e.value.style.chart.layout.percentage.fontSize / 360 * Math.min(o, t);
+          });
+        });
+        B.value && (U.value && B.value.unobserve(U.value), B.value.disconnect()), B.value = new ResizeObserver(a), U.value = X.value.parentNode, B.value.observe(U.value);
+      }
+      We(ie.value.percentage || 0);
+    }
+    Et(() => {
+      B.value && (U.value && B.value.unobserve(U.value), B.value.disconnect());
+    });
+    function Q([a, o, t], l) {
+      const i = Math.cos(l), v = Math.sin(l);
+      return [a, o * i - t * v, o * v + t * i];
+    }
+    function ee([a, o, t], l) {
+      const i = l / (l - t);
+      return [a * i, o * i, t, i];
+    }
+    function Pe(a, o) {
+      const t = a.replace("#", ""), l = parseInt(t.substring(0, 2), 16), i = parseInt(t.substring(2, 4), 16), v = parseInt(t.substring(4, 6), 16), y = 1 - Math.min(1, Math.max(0, e.value.style.chart.layout.wheel.ticks.shadeColorRatio3d)) * o, k = Math.max(0, Math.min(255, Math.round(l * y))), x = Math.max(0, Math.min(255, Math.round(i * y))), M = Math.max(0, Math.min(255, Math.round(v * y)));
+      return `#${k.toString(16).padStart(2, "0")}${x.toString(16).padStart(2, "0")}${M.toString(16).padStart(2, "0")}`;
+    }
+    function ht({
+      cx: a,
+      cy: o,
+      radius: t,
+      innerRatio: l = 0.8,
+      count: i = 120,
+      startDeg: v = 0,
+      axDeg: C = 50,
+      f: y = 520,
+      baseStroke: k = 5,
+      activeColor: x,
+      inactiveColor: M,
+      getActive: S
+    }) {
+      const h = C * Math.PI / 180, p = t, A = t * l, b = [];
+      for (let m = 0; m < i; m += 1) {
+        const f = (m / i * 360 + v) * Math.PI / 180, O = a + p * Math.cos(f), H = o + p * Math.sin(f), j = a + A * Math.cos(f), G = o + A * Math.sin(f), V = [O - a, H - o, 0], q = [j - a, G - o, 0], [oe, Xe, Z] = Q(V, h), [ye, ke, J] = Q(q, h), [se, xt, , Mt] = ee([oe, Xe, Z], y), [At, $t, , za] = ee([ye, ke, J], y), St = a + se, It = o + xt, _t = a + At, Dt = o + $t, zt = (Math.max(Z, J) - -p * Math.sin(h)) / (2 * p * Math.sin(h) || 1), Ot = S ? S(m) : !0, Pt = e.value.style.chart.layout.wheel.ticks.gradient.show ? K(x, m * D.value / N.value * (e.value.style.chart.layout.wheel.ticks.gradient.shiftHueIntensity / 100)) : x, Rt = Pe(Ot ? Pt : M, zt), Ft = Math.max(1.25, k * Mt * (Math.min(r.value.width, r.value.height) / 360));
+        b.push({ i: m, x1: St, y1: It, x2: _t, y2: Dt, stroke: Ft, color: Rt, z: Math.max(Z, J) });
+      }
+      return b.sort((m, f) => m.z - f.z), b;
+    }
+    const Re = g(() => {
+      if (!e.value.layout === "3d") return null;
+      const a = N.value, o = e.value.style.chart.layout.wheel.ticks.gradient.show ? K(e.value.style.chart.layout.wheel.ticks.activeColor, 0) : e.value.style.chart.layout.wheel.ticks.activeColor, t = e.value.style.chart.layout.wheel.ticks.inactiveColor, l = e.value.style.chart.layout.wheel.ticks.strokeWidth;
+      return ht({
+        cx: u.value.centerX,
+        cy: u.value.centerY,
+        radius: u.value.radius,
+        innerRatio: e.value.style.chart.layout.wheel.ticks.sizeRatio,
+        count: a,
+        startDeg: -90,
+        axDeg: e.value.style.chart.layout.wheel.tiltAngle3d,
+        f: Math.min(r.value.width, r.value.height) * 1.45,
+        baseStroke: l,
+        activeColor: o,
+        inactiveColor: t,
+        getActive: (i) => d.value > i * D.value
+      });
+    });
+    function Fe({ cx: a, cy: o, r: t, count: l = 180, startDeg: i = -90, axDeg: v = 50, f: C }) {
+      const y = v * Math.PI / 180, k = [];
+      let x = 0;
+      for (let h = 0; h < l; h += 1) {
+        const p = (h / l * 360 + i) * Math.PI / 180, A = [t * Math.cos(p), t * Math.sin(p), 0], [b, m, f] = Q(A, y), [O, H, , j] = ee([b, m, f], C);
+        x += j, k.push([a + O, o + H]);
+      }
+      let M = `M ${k[0][0]} ${k[0][1]}`;
+      for (let h = 1; h < k.length; h += 1)
+        M += ` L ${k[h][0]} ${k[h][1]}`;
+      M += " Z";
+      const S = x / l;
+      return { d: M, avgScale: S, pts: k };
+    }
+    const E = g(() => {
+      if (e.value.layout !== "3d") return null;
+      const a = Math.min(r.value.width, r.value.height) * 1.45, o = e.value.style.chart.layout.wheel.tiltAngle3d, t = u.value.radius, { pts: l, avgScale: i } = (() => {
+        const A = t, b = o, { avgScale: m, pts: f } = Fe({
+          cx: u.value.centerX,
+          cy: u.value.centerY,
+          r: A,
+          startDeg: -90,
+          axDeg: b,
+          f: a
+        });
+        return { pts: f, avgScale: m };
+      })();
+      let v = 1 / 0, C = 1 / 0, y = -1 / 0, k = -1 / 0;
+      for (const [A, b] of l)
+        A < v && (v = A), b < C && (C = b), A > y && (y = A), b > k && (k = b);
+      const x = e.value.style.chart.layout.wheel.ticks.strokeWidth / 360 * Math.min(r.value.width, r.value.height), M = e.value.style.chart.layout.innerCircle.strokeWidth || 0, S = 0.5 * Math.max(x, M * (i || 1)), h = Math.max(0, Number(e.value.style.chart.layout.wheel.ticks.depth3d) || 0), p = S;
+      return {
+        x: v - p,
+        y: C - h - p,
+        w: y - v + 2 * p,
+        h: k - (C - h) + 2 * p
+      };
+    });
+    function vt(a) {
+      const o = Math.min(r.value.width, r.value.height) * 1.45, { d: t, avgScale: l } = Fe({
+        cx: u.value.centerX,
+        cy: u.value.centerY,
+        r: a,
+        startDeg: -90,
+        axDeg: e.value.style.chart.layout.wheel.tiltAngle3d,
+        f: o
+      }), v = (e.value.style.chart.layout.innerCircle.strokeWidth || 1) * l;
+      return {
+        d: t,
+        stroke: e.value.style.chart.layout.innerCircle.stroke,
+        strokeWidth: v
+      };
+    }
+    const Te = g(() => vt(Math.max(0, u.value.radius * 0.8 * e.value.style.chart.layout.innerCircle.radiusRatio)));
+    function te({ cx: a, cy: o, r: t, aRad: l, ax: i, f: v }) {
+      const C = [t * Math.cos(l), t * Math.sin(l), 0], [y, k, x] = Q(C, i), [M, S, , h] = ee([y, k, x], v);
+      return { x: a + M, y: o + S, z: x, s: h };
+    }
+    function dt({
+      cx: a,
+      cy: o,
+      radius: t,
+      innerRatio: l = 0.8,
+      count: i = 120,
+      startDeg: v = -87,
+      axDeg: C = 45,
+      f: y = 600,
+      activeColor: k,
+      inactiveColor: x,
+      getActive: M,
+      Y: S = 0
+    }) {
+      const h = C * Math.PI / 180, p = t, A = t * l, b = 2 * Math.PI / i, m = [];
+      for (let f = 0; f < i; f += 1) {
+        const O = v * Math.PI / 180 + b * f, H = O + b * Math.min(1, e.value.style.chart.layout.wheel.ticks.spacingRatio3d), j = te({ cx: a, cy: o + S, r: p, aRad: O, ax: h, f: y }), G = te({ cx: a, cy: o + S, r: p, aRad: H, ax: h, f: y }), V = te({ cx: a, cy: o + S, r: A, aRad: H, ax: h, f: y }), q = te({ cx: a, cy: o + S, r: A, aRad: O, ax: h, f: y }), oe = (j.z + G.z + q.z + V.z) / 4, Z = (M ? M(f) : !0) ? e.value.style.chart.layout.wheel.ticks.gradient.show ? K(
+          e.value.style.chart.layout.wheel.ticks.activeColor,
+          f * (100 / i) / 100 * (e.value.style.chart.layout.wheel.ticks.gradient.shiftHueIntensity / 100)
+        ) : k : x, ye = (() => {
+          const se = p * Math.sin(h) || 1;
+          return (oe - -se) / (2 * se);
+        })(), ke = Pe(Z, ye), J = `M ${j.x} ${j.y} L ${G.x} ${G.y} L ${V.x} ${V.y} L ${q.x} ${q.y} Z`;
+        m.push({ i: f, d: J, fill: ke, z: oe });
+      }
+      return m.sort((f, O) => f.z - O.z), m;
+    }
+    const ve = g(() => {
+      if (e.value.layout !== "3d") return null;
+      const a = N.value;
+      return (o) => dt({
+        cx: u.value.centerX,
+        cy: u.value.centerY,
+        radius: u.value.radius,
+        innerRatio: e.value.style.chart.layout.wheel.ticks.sizeRatio,
+        count: a,
+        startDeg: -90,
+        axDeg: e.value.style.chart.layout.wheel.tiltAngle3d,
+        f: Math.min(r.value.width, r.value.height) * 1.45,
+        activeColor: e.value.style.chart.layout.wheel.ticks.activeColor,
+        inactiveColor: e.value.style.chart.layout.wheel.ticks.inactiveColor,
+        getActive: (t) => d.value > t * (100 / a),
+        Y: o
+      });
+    });
+    function We(a) {
+      let o = e.value.style.chart.animation.speed;
+      const t = Math.abs(a - d.value) / (o * 120);
+      function l() {
+        d.value < a ? d.value = Math.min(d.value + t, a) : d.value > a && (d.value = Math.max(d.value - t, a)), d.value !== a && requestAnimationFrame(l);
+      }
+      l();
+    }
+    const N = g(() => (e.value.debug && e.value.style.chart.layout.wheel.ticks.quantity < 12 && console.warn("VueUiWheel - The min number of ticks is 12"), e.value.debug && e.value.style.chart.layout.wheel.ticks.quantity > 200 && console.warn("VueUiWheel - The max number of ticks is 200"), Math.max(12, Math.min(e.value.style.chart.layout.wheel.ticks.quantity, 200)))), D = g(() => 100 / N.value), Be = g(() => {
+      const a = [];
+      for (let o = 0; o < N.value; o += 1) {
+        const t = d.value > o * D.value ? e.value.style.chart.layout.wheel.ticks.activeColor : e.value.style.chart.layout.wheel.ticks.inactiveColor, { x: l, y: i } = ze(r.value.size / N.value * o), { x: v, y: C } = ze(r.value.size / N.value * o, e.value.style.chart.layout.wheel.ticks.sizeRatio);
+        a.push({
+          x1: l,
+          y1: i,
+          x2: v,
+          y2: C,
+          color: e.value.style.chart.layout.wheel.ticks.gradient.show ? K(t, o * D.value / N.value * (e.value.style.chart.layout.wheel.ticks.gradient.shiftHueIntensity / 100)) : t
+        });
+      }
+      return a;
+    }), yt = g(() => Vt({ series: Be.value.map((a) => ({
+      name: "",
+      value: 1,
+      color: a.color
+    })) }, u.value.centerX, u.value.centerY, u.value.radius, u.value.radius, 1.99999, 2, 1, 360, 105.25, u.value.radius * (1 - e.value.style.chart.layout.wheel.ticks.sizeRatio))), ae = $(!1);
+    function Ee(a) {
+      ae.value = a, me.value += 1;
+    }
+    const le = $(!1);
+    function de() {
+      le.value = !le.value;
+    }
+    async function kt({ scale: a = 2 } = {}) {
+      if (!X.value) return;
+      const { width: o, height: t } = X.value.getBoundingClientRect(), l = o / t, { imageUri: i, base64: v } = await ia({ domElement: X.value, base64: !0, img: !0, scale: a });
+      return {
+        imageUri: i,
+        base64: v,
+        title: e.value.style.chart.title.text,
+        width: o,
+        height: t,
+        aspectRatio: l
+      };
+    }
+    const ft = g(() => e.value.style.chart.layout.wheel.ticks.strokeWidth * 2), gt = g(() => e.value.style.chart.layout.wheel.ticks.strokeWidth * 2 * 0.75), pt = g(() => e.value.style.chart.layout.wheel.ticks.strokeWidth), L = g(() => Math.max(1, Math.min(20, e.value.style.chart.layout.wheel.ticks.depth3d))), mt = g(() => e.value.style.chart.backgroundColor), wt = g(() => e.value.style.chart.title), { exportSvg: Ct, getSvg: bt } = oa({
+      svg: ce,
+      title: wt,
+      backgroundColor: mt,
+      stretchTitle: !0
+    });
+    async function Ne({ isCb: a }) {
+      if (a) {
+        const { blob: o, url: t, text: l, dataUrl: i } = await bt();
+        e.value.userOptions.callbacks.svg({ blob: o, url: t, text: l, dataUrl: i });
+      } else
+        Ct();
+    }
+    return et({
+      getImage: kt,
+      generatePdf: _e,
+      generateImage: De,
+      generateSvg: Ne,
+      toggleAnnotator: de,
+      toggleFullscreen: Ee
+    }), (a, o) => (s(), n("div", {
+      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: re.value,
+      style: ge(`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] = () => c(Ae)(!0)),
+      onMouseleave: o[1] || (o[1] = () => c(Ae)(!1))
+    }, [
+      e.value.userOptions.buttons.annotator ? (s(), ne(c(tt), {
+        key: 0,
+        svgRef: c(ce),
+        backgroundColor: e.value.style.chart.backgroundColor,
+        color: e.value.style.chart.color,
+        active: le.value,
+        onClose: de
+      }, {
+        "annotator-action-close": I(() => [
+          w(a.$slots, "annotator-action-close", {}, void 0, !0)
+        ]),
+        "annotator-action-color": I(({ color: t }) => [
+          w(a.$slots, "annotator-action-color", R(F({ color: t })), void 0, !0)
+        ]),
+        "annotator-action-draw": I(({ mode: t }) => [
+          w(a.$slots, "annotator-action-draw", R(F({ mode: t })), void 0, !0)
+        ]),
+        "annotator-action-undo": I(({ disabled: t }) => [
+          w(a.$slots, "annotator-action-undo", R(F({ disabled: t })), void 0, !0)
+        ]),
+        "annotator-action-redo": I(({ disabled: t }) => [
+          w(a.$slots, "annotator-action-redo", R(F({ disabled: t })), void 0, !0)
+        ]),
+        "annotator-action-delete": I(({ disabled: t }) => [
+          w(a.$slots, "annotator-action-delete", R(F({ disabled: t })), void 0, !0)
+        ]),
+        _: 3
+      }, 8, ["svgRef", "backgroundColor", "color", "active"])) : z("", !0),
+      ut.value ? (s(), n("div", {
+        key: 1,
+        ref_key: "noTitle",
+        ref: be,
+        class: "vue-data-ui-no-title-space",
+        style: "height:36px; width: 100%;background:transparent"
+      }, null, 512)) : z("", !0),
+      e.value.style.chart.title.text ? (s(), n("div", {
+        key: 2,
+        ref_key: "chartTitle",
+        ref: we,
+        style: "width:100%;background:transparent;padding-bottom:12px"
+      }, [
+        (s(), ne(ua, {
+          key: `title_${xe.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 && rt.value && (c($e) || c(ue)) ? (s(), ne(c(at), {
+        ref_key: "details",
+        ref: it,
+        key: `user_options_${me.value}`,
+        backgroundColor: e.value.style.chart.backgroundColor,
+        color: e.value.style.chart.color,
+        isPrinting: c(Se),
+        isImaging: c(Ie),
+        uid: re.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: ae.value,
+        position: e.value.userOptions.position,
+        titles: { ...e.value.userOptions.buttonTitles },
+        hasAnnotator: e.value.userOptions.buttons.annotator,
+        isAnnotation: le.value,
+        chartElement: X.value,
+        callbacks: e.value.userOptions.callbacks,
+        printScale: e.value.userOptions.print.scale,
+        onToggleFullscreen: Ee,
+        onGeneratePdf: c(_e),
+        onGenerateImage: c(De),
+        onGenerateSvg: Ne,
+        onToggleAnnotator: de,
+        style: ge({
+          visibility: c($e) ? c(ue) ? "visible" : "hidden" : "visible"
+        })
+      }, Nt({ _: 2 }, [
+        a.$slots.menuIcon ? {
+          name: "menuIcon",
+          fn: I(({ isOpen: t, color: l }) => [
+            w(a.$slots, "menuIcon", R(F({ isOpen: t, color: l })), void 0, !0)
+          ]),
+          key: "0"
+        } : void 0,
+        a.$slots.optionPdf ? {
+          name: "optionPdf",
+          fn: I(() => [
+            w(a.$slots, "optionPdf", {}, void 0, !0)
+          ]),
+          key: "1"
+        } : void 0,
+        a.$slots.optionImg ? {
+          name: "optionImg",
+          fn: I(() => [
+            w(a.$slots, "optionImg", {}, void 0, !0)
+          ]),
+          key: "2"
+        } : void 0,
+        a.$slots.optionSvg ? {
+          name: "optionSvg",
+          fn: I(() => [
+            w(a.$slots, "optionSvg", {}, void 0, !0)
+          ]),
+          key: "3"
+        } : void 0,
+        a.$slots.optionFullscreen ? {
+          name: "optionFullscreen",
+          fn: I(({ toggleFullscreen: t, isFullscreen: l }) => [
+            w(a.$slots, "optionFullscreen", R(F({ toggleFullscreen: t, isFullscreen: l })), void 0, !0)
+          ]),
+          key: "4"
+        } : void 0,
+        a.$slots.optionAnnotator ? {
+          name: "optionAnnotator",
+          fn: I(({ toggleAnnotator: t, isAnnotator: l }) => [
+            w(a.$slots, "optionAnnotator", R(F({ toggleAnnotator: t, isAnnotator: l })), void 0, !0)
+          ]),
+          key: "5"
+        } : void 0
+      ]), 1032, ["backgroundColor", "color", "isPrinting", "isImaging", "uid", "hasPdf", "hasImg", "hasSvg", "hasFullscreen", "isFullscreen", "position", "titles", "hasAnnotator", "isAnnotation", "chartElement", "callbacks", "printScale", "onGeneratePdf", "onGenerateImage", "style"])) : z("", !0),
+      (s(), n("svg", {
+        ref_key: "svgRef",
+        ref: ce,
+        xmlns: c(qt),
+        class: P({ "vue-data-ui-fullscreen--on": ae.value, "vue-data-ui-fulscreen--off": !ae.value, "vue-ui-wheel-3d-svg": e.value.layout === "3d" }),
+        viewBox: e.value.layout === "3d" && !e.value.responsive ? `${E.value?.x - 10} ${E.value?.y ?? 0} ${E.value?.w + 20} ${E.value?.h ?? Math.max(10, r.value.height)}` : `0 0 ${Math.max(10, r.value.width)} ${Math.max(10, r.value.height)}`,
+        style: ge(`max-width:100%;overflow:visible;background:transparent;color:${e.value.style.chart.color}`)
+      }, [
+        Xt(c(lt)),
+        a.$slots["chart-background"] ? (s(), n("foreignObject", {
+          key: 0,
+          x: e.value.layout === "3d" && !e.value.responsive ? E.value?.x - 10 : 0,
+          y: e.value.layout === "3d" && !e.value.responsive ? E.value?.y ?? 0 : 0,
+          width: e.value.layout === "3d" && !e.value.responsive ? E.value?.w + 20 : Math.max(10, r.value.width),
+          height: e.value.layout === "3d" && !e.value.responsive ? E.value?.h ?? Math.max(10, r.value.height) : Math.max(10, r.value.height),
+          style: {
+            pointerEvents: "none"
+          }
+        }, [
+          w(a.$slots, "chart-background", {}, void 0, !0)
+        ], 8, da)) : z("", !0),
+        e.value.layout === "3d" && Te.value ? (s(), n("path", {
+          key: 1,
+          class: "vue-ui-wheel-inner-circle",
+          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, ya)) : e.value.style.chart.layout.innerCircle.show ? (s(), n("circle", {
+          key: 2,
+          class: "vue-ui-wheel-inner-circle",
+          cx: u.value.centerX,
+          cy: u.value.centerY,
+          r: Math.max(0, u.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, ka)) : z("", !0),
+        e.value.layout === "3d" ? (s(), n(_, { key: 3 }, [
+          e.value.style.chart.layout.wheel.ticks.type === "classic" ? (s(), n("g", fa, [
+            (s(!0), n(_, null, T(L.value, (t) => (s(), n("g", null, [
+              (s(!0), n(_, null, T(Re.value || [], (l) => (s(), n("line", {
+                key: l.i,
+                x1: l.x1,
+                y1: l.y1 - t,
+                x2: l.x2,
+                y2: l.y2 - t,
+                stroke: c(Le)(l.color, 0.25 * t / 5),
+                "stroke-width": e.value.style.chart.layout.wheel.ticks.strokeWidth / 360 * Math.min(r.value.width, r.value.height),
+                "stroke-linecap": e.value.style.chart.layout.wheel.ticks.rounded ? "round" : "butt",
+                class: P({ "vue-ui-wheel-tick": !0, "vue-ui-tick-animated": e.value.style.chart.animation.use && l.i * D.value <= d.value })
+              }, null, 10, ga))), 128))
+            ]))), 256)),
+            (s(!0), n(_, null, T(Re.value || [], (t) => (s(), n("line", {
+              key: t.i,
+              x1: t.x1,
+              y1: t.y1 - L.value,
+              x2: t.x2,
+              y2: t.y2 - L.value,
+              stroke: t.color,
+              "stroke-width": e.value.style.chart.layout.wheel.ticks.strokeWidth / 360 * Math.min(r.value.width, r.value.height),
+              "stroke-linecap": e.value.style.chart.layout.wheel.ticks.rounded ? "round" : "butt",
+              class: P({ "vue-ui-wheel-tick": !0, "vue-ui-tick-animated": e.value.style.chart.animation.use && t.i * D.value <= d.value })
+            }, null, 10, pa))), 128))
+          ])) : (s(), n("g", ma, [
+            (s(!0), n(_, null, T(L.value, (t) => (s(), n("g", null, [
+              (s(!0), n(_, null, T(ve.value(-t) || [], (l) => (s(), n("path", {
+                key: l.i,
+                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, wa))), 128)),
+              (s(!0), n(_, null, T(ve.value(-t) || [], (l) => (s(), n("path", {
+                key: l.i,
+                d: l.d,
+                fill: c(Le)(l.fill, 0.5 * t / L.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 * D.value <= d.value })
+              }, null, 10, Ca))), 128))
+            ]))), 256)),
+            jt("g", null, [
+              (s(!0), n(_, null, T(ve.value(-L.value) || [], (t) => (s(), n("path", {
+                key: t.i,
+                d: t.d,
+                fill: t.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: P({ "vue-ui-wheel-tick": !0, "vue-ui-tick-animated-3d": e.value.style.chart.animation.use && t.i * D.value <= d.value })
+              }, null, 10, ba))), 128))
+            ])
+          ]))
+        ], 64)) : (s(), n(_, { key: 4 }, [
+          e.value.style.chart.layout.wheel.ticks.type === "classic" ? (s(!0), n(_, { key: 0 }, T(Be.value, (t, l) => (s(), n("line", {
+            x1: t.x1,
+            x2: t.x2,
+            y1: t.y1,
+            y2: t.y2,
+            stroke: t.color,
+            "stroke-width": e.value.style.chart.layout.wheel.ticks.strokeWidth / 360 * Math.min(r.value.width, r.value.height),
+            "stroke-linecap": e.value.style.chart.layout.wheel.ticks.rounded ? "round" : "butt",
+            class: P({ "vue-ui-wheel-tick": !0, "vue-ui-tick-animated": e.value.style.chart.animation.use && l * D.value <= d.value })
+          }, null, 10, xa))), 256)) : (s(!0), n(_, { key: 1 }, T(yt.value, (t, l) => (s(), n("path", {
+            d: t.arcSlice,
+            fill: t.color,
+            class: P({ "vue-ui-wheel-tick": !0, "vue-ui-tick-animated": e.value.style.chart.animation.use && l * D.value <= d.value }),
+            stroke: e.value.style.chart.layout.wheel.ticks.stroke,
+            "stroke-width": e.value.style.chart.layout.wheel.ticks.strokeWidth
+          }, null, 10, Ma))), 256))
+        ], 64)),
+        e.value.style.chart.layout.percentage.show ? (s(), n("g", Aa, [
+          c(Me) ? (s(), n("rect", {
+            key: 0,
+            x: u.value.centerX - 40,
+            y: u.value.centerY - Y.value / 2,
+            width: 80,
+            height: Y.value,
+            fill: "#6A6A6A80",
+            rx: "3"
+          }, null, 8, $a)) : (s(), n("text", {
+            key: 1,
+            x: u.value.centerX + e.value.style.chart.layout.percentage.offsetX,
+            y: u.value.centerY + Y.value / 3 + e.value.style.chart.layout.percentage.offsetY,
+            "font-size": Y.value,
+            fill: e.value.style.chart.layout.wheel.ticks.gradient.show ? c(K)(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",
+            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: P({ "vue-ui-wheel-label": e.value.layout === "3d" })
+          }, Ut(c(Zt)(
+            e.value.style.chart.layout.percentage.formatter,
+            c(He)(d.value),
+            c(Jt)({
+              v: c(He)(d.value),
+              s: "%",
+              r: e.value.style.chart.layout.percentage.rounding
+            })
+          )), 11, Sa))
+        ])) : z("", !0),
+        w(a.$slots, "svg", { svg: r.value }, void 0, !0)
+      ], 14, va)),
+      a.$slots.watermark ? (s(), n("div", Ia, [
+        w(a.$slots, "watermark", R(F({ isPrinting: c(Se) || c(Ie) })), void 0, !0)
+      ])) : z("", !0),
+      a.$slots.source ? (s(), n("div", {
+        key: 5,
+        ref_key: "source",
+        ref: Ce,
+        dir: "auto"
+      }, [
+        w(a.$slots, "source", {}, void 0, !0)
+      ], 512)) : z("", !0),
+      c(Me) ? (s(), ne(aa, { key: 6 })) : z("", !0)
+    ], 46, ha));
+  }
+}, Da = /* @__PURE__ */ ca(_a, [["__scopeId", "data-v-a1178806"]]), Ga = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
+  __proto__: null,
+  default: Da
+}, Symbol.toStringTag, { value: "Module" }));
+export {
+  Ya as a,
+  Ga as b,
+  Da as v
+};