vue-data-ui 2.4.57 → 2.4.59

package/dist/{vue-ui-tiremarks-44pO3jx1.js → vue-ui-tiremarks-C2G0Sem6.js}

@@ -1,24 +1,24 @@
-import { computed as h, ref as p, watch as W, onMounted as ce, openBlock as s, createElementBlock as c, normalizeClass as U, normalizeStyle as G, unref as n, createBlock as I, createCommentVNode as y, createSlots as ve, withCtx as F, renderSlot as b, normalizeProps as L, guardReactiveProps as j, createVNode as he, Fragment as Z, renderList as ee, toDisplayString as de } from "vue";
-import { u as te } from "./useNestedProp-D1eJ0dvv.js";
-import { u as fe, c as pe, t as ye, v as me, o as ge, e as ke, w as ae, X as be, i as _e, f as Ce } from "./index-CI-N9klv.js";
-import { _ as $e } from "./Title-DLjHHdyq.js";
-import { u as we, U as xe } from "./usePrinter-CXc8xCKk.js";
-import Pe from "./vue-ui-skeleton-owIhXtQF.js";
-import { _ as Oe } from "./PackageVersion-S3SzpuwC.js";
-import { P as Ae } from "./PenAndPaper-v846FwcH.js";
-import { u as Ie } from "./useUserOptionState-BIvW1Kz7.js";
-import { _ as Fe } from "./_plugin-vue_export-helper-CHgC5LLL.js";
-const ze = ["id"], Se = {
+import { computed as h, ref as k, watch as W, onMounted as ie, openBlock as s, createElementBlock as c, normalizeClass as U, normalizeStyle as G, unref as n, createBlock as I, createCommentVNode as d, createSlots as ce, withCtx as F, renderSlot as b, normalizeProps as L, guardReactiveProps as j, createVNode as ve, Fragment as Z, renderList as ee, toDisplayString as he } from "vue";
+import { u as te } from "./useNestedProp-DuruL3Nt.js";
+import { u as de, c as fe, t as pe, v as ye, o as ge, e as me, w as ae, X as ke, i as be, f as _e } from "./index-B9RAElpI.js";
+import { _ as Ce } from "./Title-zZtEcB9F.js";
+import { u as $e, U as we } from "./usePrinter-CwTAwqtF.js";
+import xe from "./vue-ui-skeleton-DVYD_VSe.js";
+import { _ as Pe } from "./PackageVersion-C_FFs0BP.js";
+import { P as Oe } from "./PenAndPaper-Dx24BtRW.js";
+import { u as Ae } from "./useUserOptionState-BIvW1Kz7.js";
+import { _ as Ie } from "./_plugin-vue_export-helper-CHgC5LLL.js";
+const Fe = ["id"], ze = {
   key: 2,
   style: "width:100%;background:transparent;padding-bottom:12px"
-}, Ne = ["xmlns", "viewBox"], Me = { key: 0 }, Te = ["d", "stroke-width", "stroke"], Ue = { key: 1 }, Ge = ["x1", "y1", "x2", "y2", "stroke-width", "stroke"], Le = ["x", "y", "font-size", "fill", "font-weight", "text-anchor"], je = {
+}, Se = ["xmlns", "viewBox"], Ne = ["width", "height"], Me = { key: 1 }, Te = ["d", "stroke-width", "stroke"], Ue = { key: 2 }, Ge = ["x1", "y1", "x2", "y2", "stroke-width", "stroke"], Le = ["x", "y", "font-size", "fill", "font-weight", "text-anchor"], je = {
   key: 5,
   class: "vue-data-ui-watermark"
-}, Be = {
+}, Ee = {
   key: 6,
   ref: "source",
   dir: "auto"
-}, Ee = {
+}, Be = {
   __name: "vue-ui-tiremarks",
   props: {
     config: {
@@ -34,48 +34,48 @@ const ze = ["id"], Se = {
       }
     }
   },
-  setup(le, { expose: oe }) {
-    const d = le, { vue_ui_tiremarks: se } = fe(), z = h(() => !!d.dataset && Object.keys(d.dataset).length), S = p(pe()), N = p(null), re = p(null), B = p(0), E = p(0), e = h({
+  setup(oe, { expose: le }) {
+    const f = oe, { vue_ui_tiremarks: se } = de(), z = h(() => !!f.dataset && Object.keys(f.dataset).length), S = k(fe()), N = k(null), re = k(null), E = k(0), B = k(0), e = h({
       get: () => H(),
       set: (t) => t
-    }), { userOptionsVisible: M, setUserOptionsVisibility: X, keepUserOptionState: D } = Ie({ config: e.value });
+    }), { userOptionsVisible: M, setUserOptionsVisibility: X, keepUserOptionState: D } = Ae({ config: e.value });
     function H() {
       const t = te({
-        userConfig: d.config,
+        userConfig: f.config,
         defaultConfig: se
       });
       return t.theme ? {
         ...te({
-          userConfig: ye.vue_ui_tiremarks[t.theme] || d.config,
+          userConfig: pe.vue_ui_tiremarks[t.theme] || f.config,
           defaultConfig: t
         })
       } : t;
     }
-    W(() => d.config, (t) => {
-      e.value = H(), M.value = !e.value.showOnChartHover, K(), E.value += 1;
+    W(() => f.config, (t) => {
+      e.value = H(), M.value = !e.value.showOnChartHover, K(), B.value += 1;
     }, { deep: !0 });
-    const { isPrinting: R, isImaging: V, generatePdf: Y, generateImage: q } = we({
+    const { isPrinting: R, isImaging: V, generatePdf: Y, generateImage: q } = $e({
       elementId: S.value,
       fileName: e.value.style.chart.title.text || "vue-ui-tiremarks"
-    }), ne = h(() => e.value.userOptions.show && !e.value.style.chart.title.text), u = p(e.value.style.chart.animation.use ? 0 : me(d.dataset.percentage));
-    W(() => d.dataset, (t) => {
+    }), ne = h(() => e.value.userOptions.show && !e.value.style.chart.title.text), u = k(e.value.style.chart.animation.use ? 0 : ye(f.dataset.percentage));
+    W(() => f.dataset, (t) => {
       e.value.style.chart.animation.use ? J(t.percentage) : u.value = t.percentage || 0;
-    }, { deep: !0 }), ce(() => {
+    }, { deep: !0 }), ie(() => {
       K();
     });
     function J(t) {
       let r = e.value.style.chart.animation.speed;
       const a = Math.abs(t - u.value) / (r * 120);
-      function o() {
-        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(o);
+      function l() {
+        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(l);
       }
-      o();
+      l();
     }
     function K() {
-      ge(d.dataset) && ke({
+      ge(f.dataset) && me({
         componentName: "VueUiTiremarks",
         type: "dataset"
-      }), J(d.dataset.percentage || 0);
+      }), J(f.dataset.percentage || 0);
     }
     const _ = h(() => e.value.style.chart.layout.display === "vertical"), i = h(() => {
       const t = {
@@ -95,48 +95,46 @@ const ze = ["id"], Se = {
         left: e.value.style.chart.percentage.horizontalPosition === "left" ? t.left : 3,
         right: e.value.style.chart.percentage.horizontalPosition === "right" ? t.right : 10
       };
-    }), P = h(() => Object.values(i.value).reduce((t, r) => t + r, 0)), l = h(() => ({
+    }), P = h(() => Object.values(i.value).reduce((t, r) => t + r, 0)), o = h(() => ({
       height: _.value ? 312 : 56,
       width: _.value ? 56 : 312
-    })), ue = p(100);
-    h(() => d.dataset.percentage / ue.value);
-    const v = h(() => _.value ? {
-      mark: (l.value.height - P.value) / 100 * 0.5,
-      space: (l.value.height - P.value) / 100 * 0.5
+    })), v = h(() => _.value ? {
+      mark: (o.value.height - P.value) / 100 * 0.5,
+      space: (o.value.height - P.value) / 100 * 0.5
     } : {
-      mark: (l.value.width - P.value) / 100 * 0.5,
-      space: (l.value.width - P.value) / 100 * 0.5
+      mark: (o.value.width - P.value) / 100 * 0.5,
+      space: (o.value.width - P.value) / 100 * 0.5
     }), Q = h(() => {
       const t = [];
       for (let a = 0; a < 100; a += 1) {
-        const o = e.value.style.chart.layout.ticks.gradient.show ? ae(e.value.style.chart.layout.activeColor, a / 100 * (e.value.style.chart.layout.ticks.gradient.shiftHueIntensity / 100)) : e.value.style.chart.layout.activeColor;
+        const l = e.value.style.chart.layout.ticks.gradient.show ? ae(e.value.style.chart.layout.activeColor, a / 100 * (e.value.style.chart.layout.ticks.gradient.shiftHueIntensity / 100)) : e.value.style.chart.layout.activeColor;
         if (_.value) {
-          const $ = e.value.style.chart.layout.crescendo ? (100 - a) * (l.value.width - i.value.left - i.value.right) / 100 / 3 : 0, f = i.value.left + 4 + $, m = l.value.width - i.value.right - 4 - $, g = l.value.height - i.value.bottom - a * v.value.mark - a * v.value.space - v.value.mark, k = l.value.height - i.value.bottom - a * v.value.mark - a * v.value.space - v.value.mark, w = (m - f) / e.value.style.chart.layout.curveAngleX, x = e.value.style.chart.layout.curveAngleY * ((1 + a) / 100);
+          const $ = e.value.style.chart.layout.crescendo ? (100 - a) * (o.value.width - i.value.left - i.value.right) / 100 / 3 : 0, p = i.value.left + 4 + $, y = o.value.width - i.value.right - 4 - $, g = o.value.height - i.value.bottom - a * v.value.mark - a * v.value.space - v.value.mark, m = o.value.height - i.value.bottom - a * v.value.mark - a * v.value.space - v.value.mark, w = (y - p) / e.value.style.chart.layout.curveAngleX, x = e.value.style.chart.layout.curveAngleY * ((1 + a) / 100);
           t.push({
-            x1: f,
-            x2: m,
+            x1: p,
+            x2: y,
             y1: g,
-            y2: k,
-            curve: `M ${f} ${g} C ${f + w} ${g - x}, ${m - w} ${k - x}, ${m} ${k}`,
-            color: o
+            y2: m,
+            curve: `M ${p} ${g} C ${p + w} ${g - x}, ${y - w} ${m - x}, ${y} ${m}`,
+            color: l
           });
         } else {
-          const $ = e.value.style.chart.layout.crescendo ? (100 - a) * (l.value.height - i.value.top - i.value.bottom) / 100 / 3 : 0, f = i.value.left + a * v.value.mark + a * v.value.space - v.value.mark, m = f, g = i.value.top + 4 + $, k = l.value.height - i.value.bottom - 4 - $, w = e.value.style.chart.layout.curveAngleY * ((1 + a) / 100), x = (k - g) / e.value.style.chart.layout.curveAngleX;
+          const $ = e.value.style.chart.layout.crescendo ? (100 - a) * (o.value.height - i.value.top - i.value.bottom) / 100 / 3 : 0, p = i.value.left + a * v.value.mark + a * v.value.space - v.value.mark, y = p, g = i.value.top + 4 + $, m = o.value.height - i.value.bottom - 4 - $, w = e.value.style.chart.layout.curveAngleY * ((1 + a) / 100), x = (m - g) / e.value.style.chart.layout.curveAngleX;
           t.push({
-            x1: f,
-            x2: m,
+            x1: p,
+            x2: y,
             y1: g,
-            y2: k,
-            curve: `M ${f} ${g} C ${f + w} ${g + x}, ${m + w} ${k - x}, ${m} ${k}`,
-            color: o
+            y2: m,
+            curve: `M ${p} ${g} C ${p + w} ${g + x}, ${y + w} ${m - x}, ${y} ${m}`,
+            color: l
           });
         }
       }
       return t;
     }), C = h(() => {
       let t, r, a;
-      const o = e.value.style.chart.percentage.fontSize / 3;
-      return _.value ? e.value.style.chart.percentage.verticalPosition === "top" ? (t = l.value.width / 2, r = i.value.top / 2, a = "middle") : e.value.style.chart.percentage.verticalPosition === "bottom" && (t = l.value.width / 2, r = l.value.height - i.value.bottom / 2 + o, a = "middle") : e.value.style.chart.percentage.horizontalPosition === "left" ? (t = 4, r = l.value.height / 2 + o, a = "start") : e.value.style.chart.percentage.horizontalPosition === "right" && (t = l.value.width - i.value.right + 8, r = l.value.height / 2 + o, a = "start"), {
+      const l = e.value.style.chart.percentage.fontSize / 3;
+      return _.value ? e.value.style.chart.percentage.verticalPosition === "top" ? (t = o.value.width / 2, r = i.value.top / 2, a = "middle") : e.value.style.chart.percentage.verticalPosition === "bottom" && (t = o.value.width / 2, r = o.value.height - i.value.bottom / 2 + l, a = "middle") : e.value.style.chart.percentage.horizontalPosition === "left" ? (t = 4, r = o.value.height / 2 + l, a = "start") : e.value.style.chart.percentage.horizontalPosition === "right" && (t = o.value.width - i.value.right + 8, r = o.value.height / 2 + l, a = "start"), {
         x: t,
         y: r,
         textAnchor: a,
@@ -144,15 +142,15 @@ const ze = ["id"], Se = {
         fontSize: e.value.style.chart.percentage.fontSize,
         fill: e.value.style.chart.percentage.color
       };
-    }), O = p(!1);
-    function ie(t) {
-      O.value = t, B.value += 1;
+    }), O = k(!1);
+    function ue(t) {
+      O.value = t, E.value += 1;
     }
-    const A = p(!1);
+    const A = k(!1);
     function T() {
       A.value = !A.value;
     }
-    return oe({
+    return le({
       generatePdf: Y,
       generateImage: q,
       toggleAnnotator: T
@@ -165,24 +163,24 @@ const ze = ["id"], Se = {
       onMouseenter: r[0] || (r[0] = () => n(X)(!0)),
       onMouseleave: r[1] || (r[1] = () => n(X)(!1))
     }, [
-      e.value.userOptions.buttons.annotator ? (s(), I(Ae, {
+      e.value.userOptions.buttons.annotator ? (s(), I(Oe, {
         key: 0,
         parent: N.value,
         backgroundColor: e.value.style.chart.backgroundColor,
         color: e.value.style.chart.color,
         active: A.value,
         onClose: T
-      }, null, 8, ["parent", "backgroundColor", "color", "active"])) : y("", !0),
+      }, null, 8, ["parent", "backgroundColor", "color", "active"])) : d("", !0),
       ne.value ? (s(), c("div", {
         key: 1,
         ref_key: "noTitle",
         ref: re,
         class: "vue-data-ui-no-title-space",
         style: "height:36px; width: 100%;background:transparent"
-      }, null, 512)) : y("", !0),
-      e.value.style.chart.title.text ? (s(), c("div", Se, [
-        (s(), I($e, {
-          key: `title_${E.value}`,
+      }, null, 512)) : d("", !0),
+      e.value.style.chart.title.text ? (s(), c("div", ze, [
+        (s(), I(Ce, {
+          key: `title_${B.value}`,
           config: {
             title: {
               cy: "wheel-title",
@@ -194,10 +192,10 @@ const ze = ["id"], Se = {
             }
           }
         }, null, 8, ["config"]))
-      ])) : y("", !0),
-      e.value.userOptions.show && z.value && (n(D) || n(M)) ? (s(), I(xe, {
+      ])) : d("", !0),
+      e.value.userOptions.show && z.value && (n(D) || n(M)) ? (s(), I(we, {
         ref: "details",
-        key: `user_options_${B.value}`,
+        key: `user_options_${E.value}`,
         backgroundColor: e.value.style.chart.backgroundColor,
         color: e.value.style.chart.color,
         isPrinting: n(R),
@@ -213,14 +211,14 @@ const ze = ["id"], Se = {
         position: e.value.userOptions.position,
         hasAnnotator: e.value.userOptions.buttons.annotator,
         isAnnotation: A.value,
-        onToggleFullscreen: ie,
+        onToggleFullscreen: ue,
         onGeneratePdf: n(Y),
         onGenerateImage: n(q),
         onToggleAnnotator: T,
         style: G({
           visibility: n(D) ? n(M) ? "visible" : "hidden" : "visible"
         })
-      }, ve({ _: 2 }, [
+      }, ce({ _: 2 }, [
         t.$slots.optionPdf ? {
           name: "optionPdf",
           fn: F(() => [
@@ -237,73 +235,85 @@ const ze = ["id"], Se = {
         } : void 0,
         t.$slots.optionFullscreen ? {
           name: "optionFullscreen",
-          fn: F(({ toggleFullscreen: a, isFullscreen: o }) => [
-            b(t.$slots, "optionFullscreen", L(j({ toggleFullscreen: a, isFullscreen: o })), void 0, !0)
+          fn: F(({ toggleFullscreen: a, isFullscreen: l }) => [
+            b(t.$slots, "optionFullscreen", L(j({ toggleFullscreen: a, isFullscreen: l })), void 0, !0)
           ]),
           key: "2"
         } : void 0,
         t.$slots.optionAnnotator ? {
           name: "optionAnnotator",
-          fn: F(({ toggleAnnotator: a, isAnnotator: o }) => [
-            b(t.$slots, "optionAnnotator", L(j({ toggleAnnotator: a, isAnnotator: o })), void 0, !0)
+          fn: F(({ toggleAnnotator: a, isAnnotator: l }) => [
+            b(t.$slots, "optionAnnotator", L(j({ toggleAnnotator: a, isAnnotator: l })), void 0, !0)
           ]),
           key: "3"
         } : void 0
-      ]), 1032, ["backgroundColor", "color", "isPrinting", "isImaging", "uid", "hasPdf", "hasImg", "hasFullscreen", "isFullscreen", "titles", "chartElement", "position", "hasAnnotator", "isAnnotation", "onGeneratePdf", "onGenerateImage", "style"])) : y("", !0),
+      ]), 1032, ["backgroundColor", "color", "isPrinting", "isImaging", "uid", "hasPdf", "hasImg", "hasFullscreen", "isFullscreen", "titles", "chartElement", "position", "hasAnnotator", "isAnnotation", "onGeneratePdf", "onGenerateImage", "style"])) : d("", !0),
       z.value ? (s(), c("svg", {
         key: 4,
-        xmlns: n(be),
+        xmlns: n(ke),
         class: U({ "vue-data-ui-fullscreen--on": O.value, "vue-data-ui-fulscreen--off": !O.value }),
-        viewBox: `0 0 ${l.value.width} ${l.value.height}`,
+        viewBox: `0 0 ${o.value.width} ${o.value.height}`,
         style: G(`max-width:100%; overflow: visible; background:transparent;color:${e.value.style.chart.color}`)
       }, [
-        he(Oe),
+        ve(Pe),
+        t.$slots["chart-background"] ? (s(), c("foreignObject", {
+          key: 0,
+          x: 0,
+          y: 0,
+          width: o.value.width,
+          height: o.value.height,
+          style: {
+            pointerEvents: "none"
+          }
+        }, [
+          b(t.$slots, "chart-background", {}, void 0, !0)
+        ], 8, Ne)) : d("", !0),
         e.value.style.chart.layout.curved ? (s(), c("g", Me, [
-          (s(!0), c(Z, null, ee(Q.value, (a, o) => (s(), c("path", {
+          (s(!0), c(Z, null, ee(Q.value, (a, l) => (s(), c("path", {
             d: a.curve,
             "stroke-width": v.value.mark,
-            stroke: u.value >= o ? a.color : e.value.style.chart.layout.inactiveColor,
+            stroke: u.value >= l ? a.color : e.value.style.chart.layout.inactiveColor,
             "stroke-linecap": "round",
             fill: "none",
-            class: U({ "vue-ui-tick-animated": e.value.style.chart.animation.use && o <= u.value })
+            class: U({ "vue-ui-tick-animated": e.value.style.chart.animation.use && l <= u.value })
           }, null, 10, Te))), 256))
         ])) : (s(), c("g", Ue, [
-          (s(!0), c(Z, null, ee(Q.value, (a, o) => (s(), c("line", {
+          (s(!0), c(Z, null, ee(Q.value, (a, l) => (s(), c("line", {
             x1: a.x1,
             y1: a.y1,
             x2: a.x2,
             y2: a.y2,
             "stroke-width": v.value.mark,
-            stroke: u.value >= o ? a.color : e.value.style.chart.layout.inactiveColor,
+            stroke: u.value >= l ? a.color : e.value.style.chart.layout.inactiveColor,
             "stroke-linecap": "round"
           }, null, 8, Ge))), 256))
         ])),
         e.value.style.chart.percentage.show ? (s(), c("text", {
-          key: 2,
+          key: 3,
           x: C.value.x,
           y: C.value.y,
           "font-size": C.value.fontSize,
           fill: e.value.style.chart.layout.ticks.gradient.show && e.value.style.chart.percentage.useGradientColor ? n(ae)(e.value.style.chart.layout.activeColor, u.value / 100 * (e.value.style.chart.layout.ticks.gradient.shiftHueIntensity / 100)) : e.value.style.chart.percentage.color,
           "font-weight": C.value.bold ? "bold" : "normal",
           "text-anchor": C.value.textAnchor
-        }, de(n(_e)(
+        }, he(n(be)(
           e.value.style.chart.percentage.formatter,
           u.value,
-          n(Ce)({
+          n(_e)({
             v: u.value,
             s: "%",
             r: e.value.style.chart.percentage.rounding
           })
-        )), 9, Le)) : y("", !0),
-        b(t.$slots, "svg", { svg: l.value }, void 0, !0)
-      ], 14, Ne)) : y("", !0),
+        )), 9, Le)) : d("", !0),
+        b(t.$slots, "svg", { svg: o.value }, void 0, !0)
+      ], 14, Se)) : d("", !0),
       t.$slots.watermark ? (s(), c("div", je, [
         b(t.$slots, "watermark", L(j({ isPrinting: n(R) || n(V) })), void 0, !0)
-      ])) : y("", !0),
-      t.$slots.source ? (s(), c("div", Be, [
+      ])) : d("", !0),
+      t.$slots.source ? (s(), c("div", Ee, [
         b(t.$slots, "source", {}, void 0, !0)
-      ], 512)) : y("", !0),
-      z.value ? y("", !0) : (s(), I(Pe, {
+      ], 512)) : d("", !0),
+      z.value ? d("", !0) : (s(), I(xe, {
         key: 7,
         config: {
           type: "tiremarks",
@@ -315,9 +325,9 @@ const ze = ["id"], Se = {
           }
         }
       }, null, 8, ["config"]))
-    ], 46, ze));
+    ], 46, Fe));
   }
-}, We = /* @__PURE__ */ Fe(Ee, [["__scopeId", "data-v-abf7fd42"]]);
+}, We = /* @__PURE__ */ Ie(Be, [["__scopeId", "data-v-60aa805a"]]);
 export {
   We as default
 };

package/dist/vue-ui-tiremarks-Csng3xWI.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("vue"),L=require("./useNestedProp-DkpuL8Iv.cjs"),c=require("./index-DaDv7p0W.cjs"),J=require("./Title-CpfNWbUc.cjs"),j=require("./usePrinter-BIHu0O5X.cjs"),K=require("./vue-ui-skeleton-B24XJJ2p.cjs"),Q=require("./PackageVersion-nr7f_VNw.cjs"),W=require("./PenAndPaper-C9v0NXEg.cjs"),Z=require("./useUserOptionState-BgepsfED.cjs"),ee=require("./_plugin-vue_export-helper-BHFhmbuH.cjs"),te=["id"],oe={key:2,style:"width:100%;background:transparent;padding-bottom:12px"},ae=["xmlns","viewBox"],le=["width","height"],re={key:1},ne=["d","stroke-width","stroke"],se={key:2},ue=["x1","y1","x2","y2","stroke-width","stroke"],ie=["x","y","font-size","fill","font-weight","text-anchor"],ce={key:5,class:"vue-data-ui-watermark"},ve={key:6,ref:"source",dir:"auto"},de={__name:"vue-ui-tiremarks",props:{config:{type:Object,default(){return{}}},dataset:{type:Object,default(){return{}}}},setup(G,{expose:H}){const v=G,{vue_ui_tiremarks:D}=c.useConfig(),$=e.computed(()=>!!v.dataset&&Object.keys(v.dataset).length),B=e.ref(c.createUid()),P=e.ref(null),R=e.ref(null),O=e.ref(0),A=e.ref(0),t=e.computed({get:()=>E(),set:o=>o}),{userOptionsVisible:x,setUserOptionsVisibility:N,keepUserOptionState:z}=Z.useUserOptionState({config:t.value});function E(){const o=L.useNestedProp({userConfig:v.config,defaultConfig:D});return o.theme?{...L.useNestedProp({userConfig:c.themes.vue_ui_tiremarks[o.theme]||v.config,defaultConfig:o})}:o}e.watch(()=>v.config,o=>{t.value=E(),x.value=!t.value.showOnChartHover,M(),A.value+=1},{deep:!0});const{isPrinting:I,isImaging:F,generatePdf:V,generateImage:q}=j.usePrinter({elementId:B.value,fileName:t.value.style.chart.title.text||"vue-ui-tiremarks"}),X=e.computed(()=>t.value.userOptions.show&&!t.value.style.chart.title.text),s=e.ref(t.value.style.chart.animation.use?0:c.checkNaN(v.dataset.percentage));e.watch(()=>v.dataset,o=>{t.value.style.chart.animation.use?T(o.percentage):s.value=o.percentage||0},{deep:!0}),e.onMounted(()=>{M()});function T(o){let n=t.value.style.chart.animation.speed;const a=Math.abs(o-s.value)/(n*120);function r(){s.value<o?s.value=Math.min(s.value+a,o):s.value>o&&(s.value=Math.max(s.value-a,o)),s.value!==o&&requestAnimationFrame(r)}r()}function M(){c.objectIsEmpty(v.dataset)&&c.error({componentName:"VueUiTiremarks",type:"dataset"}),T(v.dataset.percentage||0)}const f=e.computed(()=>t.value.style.chart.layout.display==="vertical"),u=e.computed(()=>{const o={top:48,left:64,right:64,bottom:48};return f.value?{top:t.value.style.chart.percentage.verticalPosition==="top"?o.top:3,left:3,right:3,bottom:t.value.style.chart.percentage.verticalPosition==="bottom"?o.bottom:3}:{top:0,bottom:0,left:t.value.style.chart.percentage.horizontalPosition==="left"?o.left:3,right:t.value.style.chart.percentage.horizontalPosition==="right"?o.right:10}}),C=e.computed(()=>Object.values(u.value).reduce((o,n)=>o+n,0)),l=e.computed(()=>({height:f.value?312:56,width:f.value?56:312})),i=e.computed(()=>f.value?{mark:(l.value.height-C.value)/100*.5,space:(l.value.height-C.value)/100*.5}:{mark:(l.value.width-C.value)/100*.5,space:(l.value.width-C.value)/100*.5}),U=e.computed(()=>{const o=[];for(let a=0;a<100;a+=1){const r=t.value.style.chart.layout.ticks.gradient.show?c.shiftHue(t.value.style.chart.layout.activeColor,a/100*(t.value.style.chart.layout.ticks.gradient.shiftHueIntensity/100)):t.value.style.chart.layout.activeColor;if(f.value){const y=t.value.style.chart.layout.crescendo?(100-a)*(l.value.width-u.value.left-u.value.right)/100/3:0,d=u.value.left+4+y,h=l.value.width-u.value.right-4-y,p=l.value.height-u.value.bottom-a*i.value.mark-a*i.value.space-i.value.mark,m=l.value.height-u.value.bottom-a*i.value.mark-a*i.value.space-i.value.mark,k=(h-d)/t.value.style.chart.layout.curveAngleX,b=t.value.style.chart.layout.curveAngleY*((1+a)/100);o.push({x1:d,x2:h,y1:p,y2:m,curve:`M ${d} ${p} C ${d+k} ${p-b}, ${h-k} ${m-b}, ${h} ${m}`,color:r})}else{const y=t.value.style.chart.layout.crescendo?(100-a)*(l.value.height-u.value.top-u.value.bottom)/100/3:0,d=u.value.left+a*i.value.mark+a*i.value.space-i.value.mark,h=d,p=u.value.top+4+y,m=l.value.height-u.value.bottom-4-y,k=t.value.style.chart.layout.curveAngleY*((1+a)/100),b=(m-p)/t.value.style.chart.layout.curveAngleX;o.push({x1:d,x2:h,y1:p,y2:m,curve:`M ${d} ${p} C ${d+k} ${p+b}, ${h+k} ${m-b}, ${h} ${m}`,color:r})}}return o}),g=e.computed(()=>{let o,n,a;const r=t.value.style.chart.percentage.fontSize/3;return f.value?t.value.style.chart.percentage.verticalPosition==="top"?(o=l.value.width/2,n=u.value.top/2,a="middle"):t.value.style.chart.percentage.verticalPosition==="bottom"&&(o=l.value.width/2,n=l.value.height-u.value.bottom/2+r,a="middle"):t.value.style.chart.percentage.horizontalPosition==="left"?(o=4,n=l.value.height/2+r,a="start"):t.value.style.chart.percentage.horizontalPosition==="right"&&(o=l.value.width-u.value.right+8,n=l.value.height/2+r,a="start"),{x:o,y:n,textAnchor:a,bold:t.value.style.chart.percentage.bold,fontSize:t.value.style.chart.percentage.fontSize,fill:t.value.style.chart.percentage.color}}),_=e.ref(!1);function Y(o){_.value=o,O.value+=1}const w=e.ref(!1);function S(){w.value=!w.value}return H({generatePdf:V,generateImage:q,toggleAnnotator:S}),(o,n)=>(e.openBlock(),e.createElementBlock("div",{ref_key:"tiremarksChart",ref:P,class:e.normalizeClass(`vue-ui-tiremarks ${t.value.useCssAnimation?"":"vue-ui-dna"}`),style:e.normalizeStyle(`font-family:${t.value.style.fontFamily};width:100%; text-align:center;background:${t.value.style.chart.backgroundColor}`),id:B.value,onMouseenter:n[0]||(n[0]=()=>e.unref(N)(!0)),onMouseleave:n[1]||(n[1]=()=>e.unref(N)(!1))},[t.value.userOptions.buttons.annotator?(e.openBlock(),e.createBlock(W.PenAndPaper,{key:0,parent:P.value,backgroundColor:t.value.style.chart.backgroundColor,color:t.value.style.chart.color,active:w.value,onClose:S},null,8,["parent","backgroundColor","color","active"])):e.createCommentVNode("",!0),X.value?(e.openBlock(),e.createElementBlock("div",{key:1,ref_key:"noTitle",ref:R,class:"vue-data-ui-no-title-space",style:"height:36px; width: 100%;background:transparent"},null,512)):e.createCommentVNode("",!0),t.value.style.chart.title.text?(e.openBlock(),e.createElementBlock("div",oe,[(e.openBlock(),e.createBlock(J._sfc_main,{key:`title_${A.value}`,config:{title:{cy:"wheel-title",...t.value.style.chart.title},subtitle:{cy:"wheel-subtitle",...t.value.style.chart.title.subtitle}}},null,8,["config"]))])):e.createCommentVNode("",!0),t.value.userOptions.show&&$.value&&(e.unref(z)||e.unref(x))?(e.openBlock(),e.createBlock(j.UserOptions,{ref:"details",key:`user_options_${O.value}`,backgroundColor:t.value.style.chart.backgroundColor,color:t.value.style.chart.color,isPrinting:e.unref(I),isImaging:e.unref(F),uid:B.value,hasPdf:t.value.userOptions.buttons.pdf,hasImg:t.value.userOptions.buttons.img,hasFullscreen:t.value.userOptions.buttons.fullscreen,hasXls:!1,isFullscreen:_.value,titles:{...t.value.userOptions.buttonTitles},chartElement:P.value,position:t.value.userOptions.position,hasAnnotator:t.value.userOptions.buttons.annotator,isAnnotation:w.value,onToggleFullscreen:Y,onGeneratePdf:e.unref(V),onGenerateImage:e.unref(q),onToggleAnnotator:S,style:e.normalizeStyle({visibility:e.unref(z)?e.unref(x)?"visible":"hidden":"visible"})},e.createSlots({_:2},[o.$slots.optionPdf?{name:"optionPdf",fn:e.withCtx(()=>[e.renderSlot(o.$slots,"optionPdf",{},void 0,!0)]),key:"0"}:void 0,o.$slots.optionImg?{name:"optionImg",fn:e.withCtx(()=>[e.renderSlot(o.$slots,"optionImg",{},void 0,!0)]),key:"1"}:void 0,o.$slots.optionFullscreen?{name:"optionFullscreen",fn:e.withCtx(({toggleFullscreen:a,isFullscreen:r})=>[e.renderSlot(o.$slots,"optionFullscreen",e.normalizeProps(e.guardReactiveProps({toggleFullscreen:a,isFullscreen:r})),void 0,!0)]),key:"2"}:void 0,o.$slots.optionAnnotator?{name:"optionAnnotator",fn:e.withCtx(({toggleAnnotator:a,isAnnotator:r})=>[e.renderSlot(o.$slots,"optionAnnotator",e.normalizeProps(e.guardReactiveProps({toggleAnnotator:a,isAnnotator:r})),void 0,!0)]),key:"3"}:void 0]),1032,["backgroundColor","color","isPrinting","isImaging","uid","hasPdf","hasImg","hasFullscreen","isFullscreen","titles","chartElement","position","hasAnnotator","isAnnotation","onGeneratePdf","onGenerateImage","style"])):e.createCommentVNode("",!0),$.value?(e.openBlock(),e.createElementBlock("svg",{key:4,xmlns:e.unref(c.XMLNS),class:e.normalizeClass({"vue-data-ui-fullscreen--on":_.value,"vue-data-ui-fulscreen--off":!_.value}),viewBox:`0 0 ${l.value.width} ${l.value.height}`,style:e.normalizeStyle(`max-width:100%; overflow: visible; background:transparent;color:${t.value.style.chart.color}`)},[e.createVNode(Q._sfc_main),o.$slots["chart-background"]?(e.openBlock(),e.createElementBlock("foreignObject",{key:0,x:0,y:0,width:l.value.width,height:l.value.height,style:{pointerEvents:"none"}},[e.renderSlot(o.$slots,"chart-background",{},void 0,!0)],8,le)):e.createCommentVNode("",!0),t.value.style.chart.layout.curved?(e.openBlock(),e.createElementBlock("g",re,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(U.value,(a,r)=>(e.openBlock(),e.createElementBlock("path",{d:a.curve,"stroke-width":i.value.mark,stroke:s.value>=r?a.color:t.value.style.chart.layout.inactiveColor,"stroke-linecap":"round",fill:"none",class:e.normalizeClass({"vue-ui-tick-animated":t.value.style.chart.animation.use&&r<=s.value})},null,10,ne))),256))])):(e.openBlock(),e.createElementBlock("g",se,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(U.value,(a,r)=>(e.openBlock(),e.createElementBlock("line",{x1:a.x1,y1:a.y1,x2:a.x2,y2:a.y2,"stroke-width":i.value.mark,stroke:s.value>=r?a.color:t.value.style.chart.layout.inactiveColor,"stroke-linecap":"round"},null,8,ue))),256))])),t.value.style.chart.percentage.show?(e.openBlock(),e.createElementBlock("text",{key:3,x:g.value.x,y:g.value.y,"font-size":g.value.fontSize,fill:t.value.style.chart.layout.ticks.gradient.show&&t.value.style.chart.percentage.useGradientColor?e.unref(c.shiftHue)(t.value.style.chart.layout.activeColor,s.value/100*(t.value.style.chart.layout.ticks.gradient.shiftHueIntensity/100)):t.value.style.chart.percentage.color,"font-weight":g.value.bold?"bold":"normal","text-anchor":g.value.textAnchor},e.toDisplayString(e.unref(c.applyDataLabel)(t.value.style.chart.percentage.formatter,s.value,e.unref(c.dataLabel)({v:s.value,s:"%",r:t.value.style.chart.percentage.rounding}))),9,ie)):e.createCommentVNode("",!0),e.renderSlot(o.$slots,"svg",{svg:l.value},void 0,!0)],14,ae)):e.createCommentVNode("",!0),o.$slots.watermark?(e.openBlock(),e.createElementBlock("div",ce,[e.renderSlot(o.$slots,"watermark",e.normalizeProps(e.guardReactiveProps({isPrinting:e.unref(I)||e.unref(F)})),void 0,!0)])):e.createCommentVNode("",!0),o.$slots.source?(e.openBlock(),e.createElementBlock("div",ve,[e.renderSlot(o.$slots,"source",{},void 0,!0)],512)):e.createCommentVNode("",!0),$.value?e.createCommentVNode("",!0):(e.openBlock(),e.createBlock(K.default,{key:7,config:{type:"tiremarks",style:{backgroundColor:t.value.style.chart.backgroundColor,tiremarks:{color:"#CCCCCC"}}}},null,8,["config"]))],46,te))}},he=ee._export_sfc(de,[["__scopeId","data-v-60aa805a"]]);exports.default=he;