vue-data-ui 3.15.12 → 3.16.1

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

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