vue-data-ui 2.6.18 → 2.6.20

package/dist/{vue-ui-wheel-Cm7g8eux.js → vue-ui-wheel-gZQIZUx1.js}

@@ -1,12 +1,12 @@
-import { computed as y, ref as i, watch as J, onMounted as he, onBeforeUnmount as de, createElementBlock as c, openBlock as n, unref as s, normalizeStyle as A, createBlock as C, createCommentVNode as h, createSlots as ye, withCtx as _, renderSlot as f, normalizeProps as F, guardReactiveProps as S, normalizeClass as z, createVNode as fe, Fragment as K, renderList as Q, toDisplayString as pe } from "vue";
-import { u as ge, c as me, a as ke, o as we, e as be, w as Z, m as Ce, X as _e, i as Oe, v as ee, f as $e } from "./index-Df45PKBw.js";
-import { _ as xe } from "./Title-xfHZTDT9.js";
-import { u as Ie, U as Pe } from "./usePrinter-MC5pKUx5.js";
+import { computed as f, ref as c, watch as J, onMounted as he, onBeforeUnmount as de, createElementBlock as v, openBlock as n, unref as s, normalizeStyle as S, createBlock as _, createCommentVNode as h, createSlots as ye, withCtx as g, renderSlot as y, normalizeProps as $, guardReactiveProps as O, normalizeClass as z, createVNode as fe, Fragment as K, renderList as Q, toDisplayString as pe } from "vue";
+import { u as ge, c as me, a as ke, o as we, e as be, w as Z, m as Ce, X as _e, i as $e, v as ee, f as Oe } from "./index-Cq7-va_5.js";
+import { _ as Ie } from "./Title-CUHNtIyE.js";
+import { u as Pe, U as xe } from "./usePrinter-jRjc8Naz.js";
 import { t as Ae, u as Fe } from "./useResponsive-BWapHhVH.js";
-import Se from "./vue-ui-skeleton-BIYEApQO.js";
-import { u as te } from "./useNestedProp-BaSIdRPe.js";
-import { _ as ze } from "./PackageVersion-D1edJun6.js";
-import { P as Me } from "./PenAndPaper-DWnLI5jM.js";
+import Se from "./vue-ui-skeleton-DIrE1OTF.js";
+import { u as te } from "./useNestedProp-BEyJNlaO.js";
+import { _ as ze } from "./PackageVersion-CURzw4q1.js";
+import { P as Me } from "./PenAndPaper-CjiJra09.js";
 import { u as Te } from "./useUserOptionState-BIvW1Kz7.js";
 import { u as Ne } from "./useChartAccessibility-BWojgys7.js";
 import { _ as Re } from "./_plugin-vue_export-helper-CHgC5LLL.js";
@@ -30,7 +30,7 @@ const Ue = ["id"], Xe = ["xmlns", "viewBox"], Le = ["width", "height"], Be = ["x
     }
   },
   setup(ae, { expose: le }) {
-    const { vue_ui_wheel: oe } = ge(), d = ae, O = y(() => !!d.dataset && Object.keys(d.dataset).length), $ = i(me()), se = i(null), M = i(0), g = i(null), T = i(null), N = i(null), R = i(null), U = i(0), e = y({
+    const { vue_ui_wheel: oe } = ge(), d = ae, I = f(() => !!d.dataset && Object.keys(d.dataset).length), P = c(me()), se = c(null), M = c(0), m = c(null), T = c(null), N = c(null), R = c(null), U = c(0), e = f({
       get: () => E(),
       set: (t) => t
     }), { userOptionsVisible: x, setUserOptionsVisibility: X, keepUserOptionState: L } = Te({ config: e.value }), { svgRef: B } = Ne({ config: e.value.style.chart.title });
@@ -49,29 +49,29 @@ const Ue = ["id"], Xe = ["xmlns", "viewBox"], Le = ["width", "height"], Be = ["x
     J(() => d.config, (t) => {
       e.value = E(), x.value = !e.value.userOptions.showOnChartHover, W(), U.value += 1;
     }, { deep: !0 });
-    const { isPrinting: G, isImaging: j, generatePdf: D, generateImage: Y } = Ie({
-      elementId: $.value,
+    const { isPrinting: G, isImaging: j, generatePdf: D, generateImage: Y } = Pe({
+      elementId: P.value,
       fileName: e.value.style.chart.title.text || "vue-ui-wheel"
-    }), ne = y(() => e.value.userOptions.show && !e.value.style.chart.title.text), l = i({
+    }), ne = f(() => e.value.userOptions.show && !e.value.style.chart.title.text), l = c({
       size: 360,
       height: 360,
       width: 360
-    }), I = i(e.value.style.chart.layout.percentage.fontSize), r = y(() => ({
+    }), A = c(e.value.style.chart.layout.percentage.fontSize), u = f(() => ({
       radius: Math.min(l.value.width, l.value.height) * 0.9 / 2,
       centerX: l.value.width / 2,
       centerY: l.value.height / 2
     }));
     function H(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
+        x: u.value.centerX + u.value.radius * Math.cos(29.85 + t * Math.PI / 180) * o,
+        y: u.value.centerY + u.value.radius * Math.sin(29.85 + t * Math.PI / 180) * o
       };
     }
-    const u = i(e.value.style.chart.animation.use ? 0 : d.dataset.percentage || 0);
+    const r = c(e.value.style.chart.animation.use ? 0 : d.dataset.percentage || 0);
     J(() => d.dataset, (t) => {
-      e.value.style.chart.animation.use ? q(t.percentage) : u.value = t.percentage || 0;
+      e.value.style.chart.animation.use ? q(t.percentage) : r.value = t.percentage || 0;
     }, { deep: !0 });
-    const m = i(null);
+    const k = c(null);
     he(() => {
       W();
     });
@@ -82,89 +82,89 @@ const Ue = ["id"], Xe = ["xmlns", "viewBox"], Le = ["width", "height"], Be = ["x
       }), q(d.dataset.percentage || 0), e.value.responsive) {
         const t = Ae(() => {
           const { width: o, height: a } = Fe({
-            chart: g.value,
+            chart: m.value,
             title: e.value.style.chart.title.text ? T.value : null,
             source: N.value,
             noTitle: R.value
           });
           requestAnimationFrame(() => {
-            l.value.width = o, l.value.height = a, I.value = e.value.style.chart.layout.percentage.fontSize / 360 * Math.min(o, a);
+            l.value.width = o, l.value.height = a, A.value = e.value.style.chart.layout.percentage.fontSize / 360 * Math.min(o, a);
           });
         });
-        m.value = new ResizeObserver(t), m.value.observe(g.value.parentNode);
+        k.value = new ResizeObserver(t), k.value.observe(m.value.parentNode);
       }
     }
     de(() => {
-      m.value && m.value.disconnect();
+      k.value && k.value.disconnect();
     });
     function q(t) {
       let o = e.value.style.chart.animation.speed;
-      const a = Math.abs(t - u.value) / (o * 120);
-      function v() {
-        u.value < t ? u.value = Math.min(u.value + a, t) : u.value > t && (u.value = Math.max(u.value - a, t)), u.value !== t && requestAnimationFrame(v);
+      const a = Math.abs(t - r.value) / (o * 120);
+      function i() {
+        r.value < t ? r.value = Math.min(r.value + a, t) : r.value > t && (r.value = Math.max(r.value - a, t)), r.value !== t && requestAnimationFrame(i);
       }
-      v();
+      i();
     }
-    const p = y(() => Math.max(100, e.value.style.chart.layout.wheel.ticks.quantity)), k = y(() => 100 / p.value), V = y(() => {
+    const p = f(() => Math.max(100, e.value.style.chart.layout.wheel.ticks.quantity)), w = f(() => 100 / p.value), V = f(() => {
       const t = [];
       for (let o = 0; o < p.value; o += 1) {
-        const a = u.value > o * k.value ? e.value.style.chart.layout.wheel.ticks.activeColor : e.value.style.chart.layout.wheel.ticks.inactiveColor, { x: v, y: ie } = H(l.value.size / p.value * o), { x: ce, y: ve } = H(l.value.size / p.value * o, e.value.style.chart.layout.wheel.ticks.sizeRatio);
+        const a = r.value > o * w.value ? e.value.style.chart.layout.wheel.ticks.activeColor : e.value.style.chart.layout.wheel.ticks.inactiveColor, { x: i, y: ie } = H(l.value.size / p.value * o), { x: ce, y: ve } = H(l.value.size / p.value * o, e.value.style.chart.layout.wheel.ticks.sizeRatio);
         t.push({
-          x1: v,
+          x1: i,
           y1: ie,
           x2: ce,
           y2: ve,
-          color: e.value.style.chart.layout.wheel.ticks.gradient.show ? Z(a, o * k.value / p.value * (e.value.style.chart.layout.wheel.ticks.gradient.shiftHueIntensity / 100)) : a
+          color: e.value.style.chart.layout.wheel.ticks.gradient.show ? Z(a, o * w.value / p.value * (e.value.style.chart.layout.wheel.ticks.gradient.shiftHueIntensity / 100)) : a
         });
       }
       return t;
-    }), re = y(() => Ce({ series: V.value.map((t) => ({
+    }), ue = f(() => Ce({ series: V.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))), w = i(!1);
-    function ue(t) {
-      w.value = t, M.value += 1;
+    })) }, 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))), b = c(!1);
+    function re(t) {
+      b.value = t, M.value += 1;
     }
-    const b = i(!1);
-    function P() {
-      b.value = !b.value;
+    const C = c(!1);
+    function F() {
+      C.value = !C.value;
     }
     return le({
       generatePdf: D,
       generateImage: Y,
-      toggleAnnotator: P
-    }), (t, o) => (n(), c("div", {
+      toggleAnnotator: F
+    }), (t, o) => (n(), v("div", {
       class: "vue-ui-wheel",
       ref_key: "wheelChart",
-      ref: g,
-      id: $.value,
-      style: A(`font-family:${e.value.style.fontFamily};width:100%; text-align:center;background:${e.value.style.chart.backgroundColor};${e.value.responsive ? "height:100%" : ""}`),
+      ref: m,
+      id: P.value,
+      style: S(`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] = () => s(X)(!0)),
       onMouseleave: o[1] || (o[1] = () => s(X)(!1))
     }, [
-      e.value.userOptions.buttons.annotator ? (n(), C(Me, {
+      e.value.userOptions.buttons.annotator ? (n(), _(Me, {
         key: 0,
         svgRef: s(B),
         backgroundColor: e.value.style.chart.backgroundColor,
         color: e.value.style.chart.color,
-        active: b.value,
-        onClose: P
+        active: C.value,
+        onClose: F
       }, null, 8, ["svgRef", "backgroundColor", "color", "active"])) : h("", !0),
-      ne.value ? (n(), c("div", {
+      ne.value ? (n(), v("div", {
         key: 1,
         ref_key: "noTitle",
         ref: R,
         class: "vue-data-ui-no-title-space",
         style: "height:36px; width: 100%;background:transparent"
       }, null, 512)) : h("", !0),
-      e.value.style.chart.title.text ? (n(), c("div", {
+      e.value.style.chart.title.text ? (n(), v("div", {
         key: 2,
         ref_key: "chartTitle",
         ref: T,
         style: "width:100%;background:transparent;padding-bottom:12px"
       }, [
-        (n(), C(xe, {
+        (n(), _(Ie, {
           key: `title_${U.value}`,
           config: {
             title: {
@@ -178,7 +178,7 @@ const Ue = ["id"], Xe = ["xmlns", "viewBox"], Le = ["width", "height"], Be = ["x
           }
         }, null, 8, ["config"]))
       ], 512)) : h("", !0),
-      e.value.userOptions.show && O.value && (s(L) || s(x)) ? (n(), C(Pe, {
+      e.value.userOptions.show && I.value && (s(L) || s(x)) ? (n(), _(xe, {
         ref_key: "details",
         ref: se,
         key: `user_options_${M.value}`,
@@ -186,65 +186,72 @@ const Ue = ["id"], Xe = ["xmlns", "viewBox"], Le = ["width", "height"], Be = ["x
         color: e.value.style.chart.color,
         isPrinting: s(G),
         isImaging: s(j),
-        uid: $.value,
+        uid: P.value,
         hasPdf: e.value.userOptions.buttons.pdf,
         hasImg: e.value.userOptions.buttons.img,
         hasFullscreen: e.value.userOptions.buttons.fullscreen,
         hasXls: !1,
-        isFullscreen: w.value,
+        isFullscreen: b.value,
         position: e.value.userOptions.position,
         titles: { ...e.value.userOptions.buttonTitles },
         hasAnnotator: e.value.userOptions.buttons.annotator,
-        isAnnotation: b.value,
-        chartElement: g.value,
-        onToggleFullscreen: ue,
+        isAnnotation: C.value,
+        chartElement: m.value,
+        onToggleFullscreen: re,
         onGeneratePdf: s(D),
         onGenerateImage: s(Y),
-        onToggleAnnotator: P,
-        style: A({
+        onToggleAnnotator: F,
+        style: S({
           visibility: s(L) ? s(x) ? "visible" : "hidden" : "visible"
         })
       }, ye({ _: 2 }, [
+        t.$slots.menuIcon ? {
+          name: "menuIcon",
+          fn: g(({ isOpen: a, color: i }) => [
+            y(t.$slots, "menuIcon", $(O({ isOpen: a, color: i })), void 0, !0)
+          ]),
+          key: "0"
+        } : void 0,
         t.$slots.optionPdf ? {
           name: "optionPdf",
-          fn: _(() => [
-            f(t.$slots, "optionPdf", {}, void 0, !0)
+          fn: g(() => [
+            y(t.$slots, "optionPdf", {}, void 0, !0)
           ]),
-          key: "0"
+          key: "1"
         } : void 0,
         t.$slots.optionImg ? {
           name: "optionImg",
-          fn: _(() => [
-            f(t.$slots, "optionImg", {}, void 0, !0)
+          fn: g(() => [
+            y(t.$slots, "optionImg", {}, void 0, !0)
           ]),
-          key: "1"
+          key: "2"
         } : void 0,
         t.$slots.optionFullscreen ? {
           name: "optionFullscreen",
-          fn: _(({ toggleFullscreen: a, isFullscreen: v }) => [
-            f(t.$slots, "optionFullscreen", F(S({ toggleFullscreen: a, isFullscreen: v })), void 0, !0)
+          fn: g(({ toggleFullscreen: a, isFullscreen: i }) => [
+            y(t.$slots, "optionFullscreen", $(O({ toggleFullscreen: a, isFullscreen: i })), void 0, !0)
           ]),
-          key: "2"
+          key: "3"
         } : void 0,
         t.$slots.optionAnnotator ? {
           name: "optionAnnotator",
-          fn: _(({ toggleAnnotator: a, isAnnotator: v }) => [
-            f(t.$slots, "optionAnnotator", F(S({ toggleAnnotator: a, isAnnotator: v })), void 0, !0)
+          fn: g(({ toggleAnnotator: a, isAnnotator: i }) => [
+            y(t.$slots, "optionAnnotator", $(O({ toggleAnnotator: a, isAnnotator: i })), void 0, !0)
           ]),
-          key: "3"
+          key: "4"
         } : void 0
       ]), 1032, ["backgroundColor", "color", "isPrinting", "isImaging", "uid", "hasPdf", "hasImg", "hasFullscreen", "isFullscreen", "position", "titles", "hasAnnotator", "isAnnotation", "chartElement", "onGeneratePdf", "onGenerateImage", "style"])) : h("", !0),
-      O.value ? (n(), c("svg", {
+      I.value ? (n(), v("svg", {
         key: 4,
         ref_key: "svgRef",
         ref: B,
         xmlns: s(_e),
-        class: z({ "vue-data-ui-fullscreen--on": w.value, "vue-data-ui-fulscreen--off": !w.value }),
+        class: z({ "vue-data-ui-fullscreen--on": b.value, "vue-data-ui-fulscreen--off": !b.value }),
         viewBox: `0 0 ${l.value.width <= 0 ? 10 : l.value.width} ${l.value.height <= 0 ? 10 : l.value.height}`,
-        style: A(`max-width:100%;overflow:visible;background:transparent;color:${e.value.style.chart.color}`)
+        style: S(`max-width:100%;overflow:visible;background:transparent;color:${e.value.style.chart.color}`)
       }, [
         fe(ze),
-        t.$slots["chart-background"] ? (n(), c("foreignObject", {
+        t.$slots["chart-background"] ? (n(), v("foreignObject", {
           key: 0,
           x: 0,
           y: 0,
@@ -254,9 +261,9 @@ const Ue = ["id"], Xe = ["xmlns", "viewBox"], Le = ["width", "height"], Be = ["x
             pointerEvents: "none"
           }
         }, [
-          f(t.$slots, "chart-background", {}, void 0, !0)
+          y(t.$slots, "chart-background", {}, void 0, !0)
         ], 8, Le)) : h("", !0),
-        e.value.style.chart.layout.wheel.ticks.type === "classic" ? (n(!0), c(K, { key: 1 }, Q(V.value, (a, v) => (n(), c("line", {
+        e.value.style.chart.layout.wheel.ticks.type === "classic" ? (n(!0), v(K, { key: 1 }, Q(V.value, (a, i) => (n(), v("line", {
           x1: a.x1,
           x2: a.x2,
           y1: a.y1,
@@ -264,53 +271,53 @@ const Ue = ["id"], Xe = ["xmlns", "viewBox"], Le = ["width", "height"], Be = ["x
           stroke: a.color,
           "stroke-width": e.value.style.chart.layout.wheel.ticks.strokeWidth / 360 * Math.min(l.value.width, l.value.height),
           "stroke-linecap": e.value.style.chart.layout.wheel.ticks.rounded ? "round" : "butt",
-          class: z({ "vue-ui-tick-animated": e.value.style.chart.animation.use && v * k.value <= u.value })
-        }, null, 10, Be))), 256)) : (n(!0), c(K, { key: 2 }, Q(re.value, (a, v) => (n(), c("path", {
+          class: z({ "vue-ui-tick-animated": e.value.style.chart.animation.use && i * w.value <= r.value })
+        }, null, 10, Be))), 256)) : (n(!0), v(K, { key: 2 }, Q(ue.value, (a, i) => (n(), v("path", {
           d: a.arcSlice,
           fill: a.color,
-          class: z({ "vue-ui-tick-animated": e.value.style.chart.animation.use && v * k.value <= u.value })
+          class: z({ "vue-ui-tick-animated": e.value.style.chart.animation.use && i * w.value <= r.value })
         }, null, 10, Ee))), 256)),
-        e.value.style.chart.layout.innerCircle.show ? (n(), c("circle", {
+        e.value.style.chart.layout.innerCircle.show ? (n(), v("circle", {
           key: 3,
-          cx: r.value.centerX,
-          cy: r.value.centerY,
-          r: r.value.radius * 0.8 <= 0 ? 1e-4 : r.value.radius * 0.8,
+          cx: u.value.centerX,
+          cy: u.value.centerY,
+          r: u.value.radius * 0.8 <= 0 ? 1e-4 : u.value.radius * 0.8,
           stroke: e.value.style.chart.layout.innerCircle.stroke,
           "stroke-width": e.value.style.chart.layout.innerCircle.strokeWidth,
           fill: "none"
         }, null, 8, Ge)) : h("", !0),
-        e.value.style.chart.layout.percentage.show ? (n(), c("text", {
+        e.value.style.chart.layout.percentage.show ? (n(), v("text", {
           key: 4,
-          x: r.value.centerX,
-          y: r.value.centerY + I.value / 3,
-          "font-size": I.value,
-          fill: e.value.style.chart.layout.wheel.ticks.gradient.show ? s(Z)(e.value.style.chart.layout.wheel.ticks.activeColor, u.value / 100 * (e.value.style.chart.layout.wheel.ticks.gradient.shiftHueIntensity / 100)) : e.value.style.chart.layout.wheel.ticks.activeColor,
+          x: u.value.centerX,
+          y: u.value.centerY + A.value / 3,
+          "font-size": A.value,
+          fill: e.value.style.chart.layout.wheel.ticks.gradient.show ? s(Z)(e.value.style.chart.layout.wheel.ticks.activeColor, r.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" }
-        }, pe(s(Oe)(
+        }, pe(s($e)(
           e.value.style.chart.layout.percentage.formatter,
-          s(ee)(u.value),
-          s($e)({
-            v: s(ee)(u.value),
+          s(ee)(r.value),
+          s(Oe)({
+            v: s(ee)(r.value),
             s: "%",
             r: e.value.style.chart.layout.percentage.rounding
           })
         )), 9, je)) : h("", !0),
-        f(t.$slots, "svg", { svg: l.value }, void 0, !0)
+        y(t.$slots, "svg", { svg: l.value }, void 0, !0)
       ], 14, Xe)) : h("", !0),
-      t.$slots.watermark ? (n(), c("div", De, [
-        f(t.$slots, "watermark", F(S({ isPrinting: s(G) || s(j) })), void 0, !0)
+      t.$slots.watermark ? (n(), v("div", De, [
+        y(t.$slots, "watermark", $(O({ isPrinting: s(G) || s(j) })), void 0, !0)
       ])) : h("", !0),
-      t.$slots.source ? (n(), c("div", {
+      t.$slots.source ? (n(), v("div", {
         key: 6,
         ref_key: "source",
         ref: N,
         dir: "auto"
       }, [
-        f(t.$slots, "source", {}, void 0, !0)
+        y(t.$slots, "source", {}, void 0, !0)
       ], 512)) : h("", !0),
-      O.value ? h("", !0) : (n(), C(Se, {
+      I.value ? h("", !0) : (n(), _(Se, {
         key: 7,
         config: {
           type: "wheel",
@@ -324,7 +331,7 @@ const Ue = ["id"], Xe = ["xmlns", "viewBox"], Le = ["width", "height"], Be = ["x
       }, null, 8, ["config"]))
     ], 44, Ue));
   }
-}, ot = /* @__PURE__ */ Re(Ye, [["__scopeId", "data-v-2eb72b2e"]]);
+}, ot = /* @__PURE__ */ Re(Ye, [["__scopeId", "data-v-a0e08156"]]);
 export {
   ot as default
 };