vue-data-ui 3.10.0 → 3.10.2

package/dist/{vue-ui-tiremarks-CvXOa3z4.js → vue-ui-tiremarks-CTa_gpit.js}

@@ -1,37 +1,41 @@
-import { defineAsyncComponent as G, computed as d, ref as h, toRefs as He, watch as ve, onMounted as Re, createElementBlock as i, openBlock as r, unref as n, normalizeStyle as X, normalizeClass as V, createBlock as N, createCommentVNode as k, withCtx as f, renderSlot as u, normalizeProps as b, guardReactiveProps as C, createSlots as Ue, createVNode as je, Fragment as he, renderList as de, toDisplayString as Le } from "vue";
-import { c as Ge, t as Xe, U as Ve, o as Ye, g as qe, h as fe, X as We, a as Je, d as Ke } from "./lib-2iaAPQ_c.js";
-import { t as Qe, u as Ze } from "./useResponsive-DfdjqQps.js";
-import { u as et, a as Y } from "./useNestedProp-BCt4DMkT.js";
-import { u as tt, B as at } from "./BaseScanner-BMpwQAfz.js";
-import { u as ot } from "./usePrinter-ChVMpU2f.js";
-import { u as lt } from "./useSvgExport-ByUukOZt.js";
-import { u as nt } from "./useThemeCheck-DGJ31Vi5.js";
-import { u as st } from "./useUserOptionState-BIvW1Kz7.js";
-import { u as rt } from "./useChartAccessibility-9icAAmYg.js";
-import it from "./Title-B5L2jweB.js";
-import ut from "./img-CqYIrJ8I.js";
-import { _ as ct } from "./_plugin-vue_export-helper-CHgC5LLL.js";
-const ge = { style: { chart: { backgroundColor: "#1A1A1A", color: "#CCCCCC", layout: { inactiveColor: "#4A4A4A" }, title: { color: "#CCCCCC", subtitle: { color: "#757575" } } } } }, ye = { style: { chart: { backgroundColor: "#FFF8E1", color: "#424242", layout: { crescendo: !1, inactiveColor: "#5D403760", activeColor: "#D32F2F", ticks: { gradient: { shiftHueIntensity: 0 } } }, title: { color: "#424242", subtitle: { color: "#757575" } } } } }, pe = { style: { chart: { backgroundColor: "#1E1E1E", color: "#BDBDBD", layout: { crescendo: !1, inactiveColor: "#5D403760", activeColor: "#D32F2F", ticks: { gradient: { shiftHueIntensity: 0 } } }, title: { color: "#FFF8E1", subtitle: { color: "#BDBDBD" } } } } }, me = { style: { chart: { backgroundColor: "#1A1A1A", color: "#99AA99", layout: { crescendo: !1, inactiveColor: "#333333", activeColor: "#66CC66", ticks: { gradient: { shiftHueIntensity: 15 } } }, title: { color: "#66CC66", subtitle: { color: "#99AA99" } } } } }, ke = { style: { chart: { backgroundColor: "#fbfafa", color: "#8A9892", layout: { crescendo: !0, curved: !0, curveAngleX: 5, curveAngleY: 5, inactiveColor: "#F7EDE2", activeColor: "#B1A7AD", ticks: { gradient: { shiftHueIntensity: 15 } } }, title: { color: "#8A9892", subtitle: { color: "#99AA99" } } } } }, be = { style: { chart: { backgroundColor: "#f6f6fb", color: "#50606C", layout: { crescendo: !1, inactiveColor: "#BBCBC7", activeColor: "#6C94A0", ticks: { gradient: { shiftHueIntensity: 10 } } }, title: { color: "#50606C", subtitle: { color: "#718890" } } } } }, Ce = {
+import { defineAsyncComponent as G, computed as d, ref as h, toRefs as Ue, watch as ve, onMounted as je, createElementBlock as i, openBlock as r, unref as n, normalizeStyle as X, normalizeClass as V, createBlock as N, createCommentVNode as k, withCtx as f, renderSlot as u, normalizeProps as C, guardReactiveProps as b, createSlots as Le, createVNode as Ge, Fragment as he, renderList as de, toDisplayString as Xe } from "vue";
+import { c as Ve, t as Ye, U as qe, o as We, g as Je, h as fe, X as Ke, a as Qe, d as Ze } from "./lib-CVHM9FhP.js";
+import { t as et, u as tt } from "./useResponsive-DfdjqQps.js";
+import { u as ot, a as Y } from "./useNestedProp-Ckf_2P_V.js";
+import { u as at, B as lt } from "./BaseScanner-BMpwQAfz.js";
+import { u as nt } from "./usePrinter-1NmjuP-i.js";
+import { u as st } from "./useSvgExport-ByUukOZt.js";
+import { u as rt } from "./useThemeCheck-D1ZYXUwG.js";
+import { u as it } from "./useUserOptionState-BIvW1Kz7.js";
+import { u as ut } from "./useChartAccessibility-9icAAmYg.js";
+import ct from "./Title-NgeRXqRA.js";
+import vt from "./img-6fNF_rG0.js";
+import { _ as ht } from "./_plugin-vue_export-helper-CHgC5LLL.js";
+const ge = { userOptions: { show: !1 }, style: { chart: { layout: { activeColor: "#678681", ticks: { gradient: { shiftHueIntensity: 0 } } } } } }, ye = { userOptions: { show: !1 }, style: { chart: { backgroundColor: "#1A1A1A", color: "#CCCCCC", layout: { inactiveColor: "#4A4A4A", activeColor: "#7FA09B", ticks: { gradient: { shiftHueIntensity: 0 } } }, title: { color: "#CCCCCC", subtitle: { color: "#757575" } } } } }, pe = { style: { chart: { backgroundColor: "#1A1A1A", color: "#CCCCCC", layout: { inactiveColor: "#4A4A4A" }, title: { color: "#CCCCCC", subtitle: { color: "#757575" } } } } }, me = { style: { chart: { backgroundColor: "#FFF8E1", color: "#424242", layout: { crescendo: !1, inactiveColor: "#5D403760", activeColor: "#D32F2F", ticks: { gradient: { shiftHueIntensity: 0 } } }, title: { color: "#424242", subtitle: { color: "#757575" } } } } }, ke = { style: { chart: { backgroundColor: "#1E1E1E", color: "#BDBDBD", layout: { crescendo: !1, inactiveColor: "#5D403760", activeColor: "#D32F2F", ticks: { gradient: { shiftHueIntensity: 0 } } }, title: { color: "#FFF8E1", subtitle: { color: "#BDBDBD" } } } } }, Ce = { style: { chart: { backgroundColor: "#1A1A1A", color: "#99AA99", layout: { crescendo: !1, inactiveColor: "#333333", activeColor: "#66CC66", ticks: { gradient: { shiftHueIntensity: 15 } } }, title: { color: "#66CC66", subtitle: { color: "#99AA99" } } } } }, be = { style: { chart: { backgroundColor: "#fbfafa", color: "#8A9892", layout: { crescendo: !0, curved: !0, curveAngleX: 5, curveAngleY: 5, inactiveColor: "#F7EDE2", activeColor: "#B1A7AD", ticks: { gradient: { shiftHueIntensity: 15 } } }, title: { color: "#8A9892", subtitle: { color: "#99AA99" } } } } }, Ae = { style: { chart: { backgroundColor: "#f6f6fb", color: "#50606C", layout: { crescendo: !1, inactiveColor: "#BBCBC7", activeColor: "#6C94A0", ticks: { gradient: { shiftHueIntensity: 10 } } }, title: { color: "#50606C", subtitle: { color: "#718890" } } } } }, we = {
   default: {},
-  dark: ge,
-  celebration: ye,
-  celebrationNight: pe,
-  hack: me,
-  zen: ke,
-  concrete: be
-}, Nt = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
+  minimal: ge,
+  minimalDark: ye,
+  dark: pe,
+  celebration: me,
+  celebrationNight: ke,
+  hack: Ce,
+  zen: be,
+  concrete: Ae
+}, Mt = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
   __proto__: null,
-  celebration: ye,
-  celebrationNight: pe,
-  concrete: be,
-  dark: ge,
-  default: Ce,
-  hack: me,
-  zen: ke
-}, Symbol.toStringTag, { value: "Module" })), vt = ["id"], ht = ["xmlns", "viewBox"], dt = ["width", "height"], ft = { key: 1 }, gt = ["d", "stroke-width", "stroke"], yt = { key: 2 }, pt = ["x1", "y1", "x2", "y2", "stroke-width", "stroke"], mt = { key: 3 }, kt = ["x", "y", "height"], bt = ["x", "y", "font-size", "fill", "font-weight", "text-anchor"], Ct = {
+  celebration: me,
+  celebrationNight: ke,
+  concrete: Ae,
+  dark: pe,
+  default: we,
+  hack: Ce,
+  minimal: ge,
+  minimalDark: ye,
+  zen: be
+}, Symbol.toStringTag, { value: "Module" })), dt = ["id"], ft = ["xmlns", "viewBox"], gt = ["width", "height"], yt = { key: 1 }, pt = ["d", "stroke-width", "stroke"], mt = { key: 2 }, kt = ["x1", "y1", "x2", "y2", "stroke-width", "stroke"], Ct = { key: 3 }, bt = ["x", "y", "height"], At = ["x", "y", "font-size", "fill", "font-weight", "text-anchor"], wt = {
   key: 4,
   class: "vue-data-ui-watermark"
-}, At = {
+}, $t = {
   __name: "vue-ui-tiremarks",
   props: {
     config: {
@@ -47,13 +51,13 @@ const ge = { style: { chart: { backgroundColor: "#1A1A1A", color: "#CCCCCC", lay
       }
     }
   },
-  setup(Ae, { expose: we }) {
-    const $e = G(() => import("./PenAndPaper-CulSakut.js")), _e = G(() => import("./UserOptions-5pXc4J-c.js")), Oe = G(() => import("./PackageVersion-C-JOGZBL.js")), { vue_ui_tiremarks: Se } = et(), { isThemeValid: xe, warnInvalidTheme: Ie } = nt(), A = Ae, Pe = d(() => !!A.dataset && Object.keys(A.dataset).length), M = h(Ge()), O = h(null), Fe = h(null), q = h(null), W = h(null), J = h(0), K = h(0), S = h(null), P = h(null), e = h(j()), { loading: Q, FINAL_DATASET: H } = tt({
-      ...He(A),
+  setup($e, { expose: _e }) {
+    const Oe = G(() => import("./PenAndPaper-LTuSTmWE.js")), Se = G(() => import("./UserOptions-CX7Xsusk.js")), Ie = G(() => import("./PackageVersion-CQxJyGQr.js")), { vue_ui_tiremarks: xe } = ot(), { isThemeValid: Fe, warnInvalidTheme: Pe } = rt(), A = $e, ze = d(() => !!A.dataset && Object.keys(A.dataset).length), H = h(Ve()), O = h(null), Te = h(null), q = h(null), W = h(null), J = h(0), K = h(0), S = h(null), F = h(null), e = h(j()), { loading: Q, FINAL_DATASET: M } = at({
+      ...Ue(A),
       FINAL_CONFIG: e,
       prepareConfig: j,
       skeletonDataset: { percentage: 50 },
-      skeletonConfig: Xe({
+      skeletonConfig: Ye({
         defaultConfig: e.value,
         userConfig: {
           userOptions: { show: !1 },
@@ -72,85 +76,85 @@ const ge = { style: { chart: { backgroundColor: "#1A1A1A", color: "#CCCCCC", lay
           }
         }
       })
-    }), { userOptionsVisible: R, setUserOptionsVisibility: Z, keepUserOptionState: ee } = st({ config: e.value }), { svgRef: U } = rt({ config: e.value.style.chart.title });
+    }), { userOptionsVisible: R, setUserOptionsVisibility: Z, keepUserOptionState: ee } = it({ config: e.value }), { svgRef: U } = ut({ config: e.value.style.chart.title });
     function j() {
       const t = Y({
         userConfig: A.config,
-        defaultConfig: Se
-      }), o = t.theme;
-      if (!o) return t;
-      if (!xe.value(t))
-        return Ie(t), t;
-      const a = Y({
-        userConfig: Ce[o] || A.config,
+        defaultConfig: xe
+      }), a = t.theme;
+      if (!a) return t;
+      if (!Fe.value(t))
+        return Pe(t), t;
+      const o = Y({
+        userConfig: we[a] || A.config,
         defaultConfig: t
       });
       return Y({
         userConfig: A.config,
-        defaultConfig: a
+        defaultConfig: o
       });
     }
     ve(() => A.config, (t) => {
       e.value = j(), R.value = !e.value.userOptions.showOnChartHover, T.value = e.value.style.chart.width, B.value = e.value.style.chart.height, se(), K.value += 1;
     }, { deep: !0 });
-    const { isPrinting: te, isImaging: ae, generatePdf: oe, generateImage: le } = ot({
-      elementId: M.value,
+    const { isPrinting: te, isImaging: oe, generatePdf: ae, generateImage: le } = nt({
+      elementId: H.value,
       fileName: e.value.style.chart.title.text || "vue-ui-tiremarks",
       options: e.value.userOptions.print
-    }), ze = d(() => e.value.userOptions.show && !e.value.style.chart.title.text), c = h(e.value.style.chart.animation.use ? 0 : Ve(H.value.percentage));
-    ve(() => H.value, (t) => {
+    }), Be = d(() => e.value.userOptions.show && !e.value.style.chart.title.text), c = h(e.value.style.chart.animation.use ? 0 : qe(M.value.percentage));
+    ve(() => M.value, (t) => {
       e.value.style.chart.animation.use ? ne(t.percentage) : c.value = t.percentage || 0;
-    }, { deep: !0 }), Re(() => {
+    }, { deep: !0 }), je(() => {
       se();
     });
     function ne(t) {
-      let o = e.value.style.chart.animation.speed;
-      const a = Math.abs(t - c.value) / (o * 120);
+      let a = e.value.style.chart.animation.speed;
+      const o = Math.abs(t - c.value) / (a * 120);
       function l() {
-        c.value < t ? c.value = Math.min(c.value + a, t) : c.value > t && (c.value = Math.max(c.value - a, t)), c.value !== t && requestAnimationFrame(l);
+        c.value < t ? c.value = Math.min(c.value + o, t) : c.value > t && (c.value = Math.max(c.value - o, t)), c.value !== t && requestAnimationFrame(l);
       }
       l();
     }
-    const Te = d(() => !!e.value.debug);
+    const De = d(() => !!e.value.debug);
     function se() {
-      if (Ye(A.dataset) && qe({
+      if (We(A.dataset) && Je({
         componentName: "VueUiTiremarks",
         type: "dataset",
-        debug: Te.value
+        debug: De.value
       }), e.value.responsive) {
-        const t = Qe(() => {
-          const { width: o, height: a } = Ze({
+        const t = et(() => {
+          const { width: a, height: o } = tt({
             chart: O.value,
             title: e.value.style.chart.title.text ? q.value : null,
             source: W.value
           });
           requestAnimationFrame(() => {
-            T.value = Math.max(0.1, o), B.value = Math.max(0.1, a - 12);
+            T.value = Math.max(0.1, a), B.value = Math.max(0.1, o - 12);
           });
         });
-        S.value && (P.value && S.value.unobserve(P.value), S.value.disconnect()), S.value = new ResizeObserver(t), P.value = O.value.parentNode, S.value.observe(P.value);
+        S.value && (F.value && S.value.unobserve(F.value), S.value.disconnect()), S.value = new ResizeObserver(t), F.value = O.value.parentNode, S.value.observe(F.value);
       }
-      ne(H.value.percentage || 0);
+      ne(M.value.percentage || 0);
     }
-    const F = d(() => e.value.style.chart.layout.display === "vertical"), v = d(() => {
-      const t = e.value.style.chart.percentage.show, o = {
+    const P = d(() => e.value.style.chart.layout.display === "vertical"), v = d(() => {
+      const t = e.value.style.chart.percentage.show, a = {
         top: t ? 48 : 12,
         left: t ? 64 : 16,
         right: t ? 64 : 16,
         bottom: t ? 48 : 12
       };
-      return F.value ? {
-        top: e.value.style.chart.percentage.verticalPosition === "top" ? o.top : 3,
+      return P.value ? {
+        top: e.value.style.chart.percentage.verticalPosition === "top" ? a.top : 3,
         left: 3,
         right: 3,
-        bottom: e.value.style.chart.percentage.verticalPosition === "bottom" ? o.bottom : 3
+        bottom: e.value.style.chart.percentage.verticalPosition === "bottom" ? a.bottom : 3
       } : {
         top: 0,
         bottom: 0,
-        left: e.value.style.chart.percentage.horizontalPosition === "left" ? o.left : 16,
-        right: e.value.style.chart.percentage.horizontalPosition === "right" ? o.right : 10
+        left: e.value.style.chart.percentage.horizontalPosition === "left" ? a.left : 16,
+        right: e.value.style.chart.percentage.horizontalPosition === "right" ? a.right : 10
       };
-    }), z = d(() => Object.values(v.value).reduce((t, o) => t + o, 0)), T = h(e.value.style.chart.width), B = h(e.value.style.chart.height), s = d(() => ({
+    }), z = d(() => Object.values(v.value).reduce((t, a) => t + a, 0)), T = h(e.value.style.chart.width), B = h(e.value.style.chart.height), s = d(() => ({
       height: B.value,
       width: T.value
     })), re = d(() => ({
@@ -162,7 +166,7 @@ const ge = { style: { chart: { backgroundColor: "#1A1A1A", color: "#CCCCCC", lay
         x: s.value.width / 2 - 20,
         y: p.value.y - p.value.fontSize / 2
       }
-    })[e.value.style.chart.layout.display]), g = d(() => F.value ? {
+    })[e.value.style.chart.layout.display]), g = d(() => P.value ? {
       mark: (s.value.height - z.value) / 100 * 0.5,
       space: (s.value.height - z.value) / 100 * 0.5
     } : {
@@ -170,38 +174,38 @@ const ge = { style: { chart: { backgroundColor: "#1A1A1A", color: "#CCCCCC", lay
       space: (s.value.width - z.value) / 100 * 0.5
     }), ie = d(() => {
       const t = [];
-      for (let a = 0; a < 100; a += 1) {
-        const l = e.value.style.chart.layout.ticks.gradient.show ? fe(e.value.style.chart.layout.activeColor, a / 100 * (e.value.style.chart.layout.ticks.gradient.shiftHueIntensity / 100)) : e.value.style.chart.layout.activeColor;
-        if (F.value) {
-          const m = e.value.style.chart.layout.crescendo ? (100 - a) * (s.value.width - v.value.left - v.value.right) / 100 / 3 : 0, y = v.value.left + 4 + m, w = s.value.width - v.value.right - 4 - m, $ = s.value.height - v.value.bottom - a * g.value.mark - a * g.value.space - g.value.mark, _ = s.value.height - v.value.bottom - a * g.value.mark - a * g.value.space - g.value.mark, x = (w - y) / e.value.style.chart.layout.curveAngleX, I = e.value.style.chart.layout.curveAngleY * ((1 + a) / 100);
+      for (let o = 0; o < 100; o += 1) {
+        const l = e.value.style.chart.layout.ticks.gradient.show ? fe(e.value.style.chart.layout.activeColor, o / 100 * (e.value.style.chart.layout.ticks.gradient.shiftHueIntensity / 100)) : e.value.style.chart.layout.activeColor;
+        if (P.value) {
+          const m = e.value.style.chart.layout.crescendo ? (100 - o) * (s.value.width - v.value.left - v.value.right) / 100 / 3 : 0, y = v.value.left + 4 + m, w = s.value.width - v.value.right - 4 - m, $ = s.value.height - v.value.bottom - o * g.value.mark - o * g.value.space - g.value.mark, _ = s.value.height - v.value.bottom - o * g.value.mark - o * g.value.space - g.value.mark, I = (w - y) / e.value.style.chart.layout.curveAngleX, x = e.value.style.chart.layout.curveAngleY * ((1 + o) / 100);
           t.push({
             x1: y,
             x2: w,
             y1: $,
             y2: _,
-            curve: `M ${y} ${$} C ${y + x} ${$ - I}, ${w - x} ${_ - I}, ${w} ${_}`,
+            curve: `M ${y} ${$} C ${y + I} ${$ - x}, ${w - I} ${_ - x}, ${w} ${_}`,
             color: l
           });
         } else {
-          const m = e.value.style.chart.layout.crescendo ? (100 - a) * (s.value.height - v.value.top - v.value.bottom) / 100 / 3 : 0, y = v.value.left + a * g.value.mark + a * g.value.space - g.value.mark, w = y, $ = v.value.top + 4 + m, _ = s.value.height - v.value.bottom - 4 - m, x = e.value.style.chart.layout.curveAngleY * ((1 + a) / 100), I = (_ - $) / e.value.style.chart.layout.curveAngleX;
+          const m = e.value.style.chart.layout.crescendo ? (100 - o) * (s.value.height - v.value.top - v.value.bottom) / 100 / 3 : 0, y = v.value.left + o * g.value.mark + o * g.value.space - g.value.mark, w = y, $ = v.value.top + 4 + m, _ = s.value.height - v.value.bottom - 4 - m, I = e.value.style.chart.layout.curveAngleY * ((1 + o) / 100), x = (_ - $) / e.value.style.chart.layout.curveAngleX;
           t.push({
             x1: y,
             x2: w,
             y1: $,
             y2: _,
-            curve: `M ${y} ${$} C ${y + x} ${$ + I}, ${w + x} ${_ - I}, ${w} ${_}`,
+            curve: `M ${y} ${$} C ${y + I} ${$ + x}, ${w + I} ${_ - x}, ${w} ${_}`,
             color: l
           });
         }
       }
       return t;
     }), p = d(() => {
-      let t, o, a;
+      let t, a, o;
       const l = e.value.style.chart.percentage.fontSize / 3;
-      return F.value ? e.value.style.chart.percentage.verticalPosition === "top" ? (t = s.value.width / 2, o = v.value.top / 2, a = "middle") : e.value.style.chart.percentage.verticalPosition === "bottom" && (t = s.value.width / 2, o = s.value.height - v.value.bottom / 2 + l, a = "middle") : e.value.style.chart.percentage.horizontalPosition === "left" ? (t = 4, o = s.value.height / 2 + l, a = "start") : e.value.style.chart.percentage.horizontalPosition === "right" && (t = s.value.width - v.value.right + 8, o = s.value.height / 2 + l, a = "start"), {
+      return P.value ? e.value.style.chart.percentage.verticalPosition === "top" ? (t = s.value.width / 2, a = v.value.top / 2, o = "middle") : e.value.style.chart.percentage.verticalPosition === "bottom" && (t = s.value.width / 2, a = s.value.height - v.value.bottom / 2 + l, o = "middle") : e.value.style.chart.percentage.horizontalPosition === "left" ? (t = 4, a = s.value.height / 2 + l, o = "start") : e.value.style.chart.percentage.horizontalPosition === "right" && (t = s.value.width - v.value.right + 8, a = s.value.height / 2 + l, o = "start"), {
         x: t,
-        y: o,
-        textAnchor: a,
+        y: a,
+        textAnchor: o,
         bold: e.value.style.chart.percentage.bold,
         fontSize: e.value.style.chart.percentage.fontSize,
         fill: e.value.style.chart.percentage.color
@@ -214,47 +218,47 @@ const ge = { style: { chart: { backgroundColor: "#1A1A1A", color: "#CCCCCC", lay
     function L() {
       E.value = !E.value;
     }
-    async function Be({ scale: t = 2 } = {}) {
+    async function Ee({ scale: t = 2 } = {}) {
       if (!O.value) return;
-      const { width: o, height: a } = O.value.getBoundingClientRect(), l = o / a, { imageUri: m, base64: y } = await ut({ domElement: O.value, base64: !0, img: !0, scale: t });
+      const { width: a, height: o } = O.value.getBoundingClientRect(), l = a / o, { imageUri: m, base64: y } = await vt({ domElement: O.value, base64: !0, img: !0, scale: t });
       return {
         imageUri: m,
         base64: y,
         title: e.value.style.chart.title.text,
-        width: o,
-        height: a,
+        width: a,
+        height: o,
         aspectRatio: l
       };
     }
-    const De = d(() => e.value.style.chart.backgroundColor), Ee = d(() => e.value.style.chart.title), { exportSvg: Ne, getSvg: Me } = lt({
+    const Ne = d(() => e.value.style.chart.backgroundColor), He = d(() => e.value.style.chart.title), { exportSvg: Me, getSvg: Re } = st({
       svg: U,
-      title: Ee,
-      backgroundColor: De
+      title: He,
+      backgroundColor: Ne
     });
     async function ce({ isCb: t }) {
       if (t) {
-        const { blob: o, url: a, text: l, dataUrl: m } = await Me();
-        e.value.userOptions.callbacks.svg({ blob: o, url: a, text: l, dataUrl: m });
+        const { blob: a, url: o, text: l, dataUrl: m } = await Re();
+        e.value.userOptions.callbacks.svg({ blob: a, url: o, text: l, dataUrl: m });
       } else
-        Ne();
+        Me();
     }
-    return we({
-      getImage: Be,
-      generatePdf: oe,
+    return _e({
+      getImage: Ee,
+      generatePdf: ae,
       generateImage: le,
       generateSvg: ce,
       toggleAnnotator: L,
       toggleFullscreen: ue
-    }), (t, o) => (r(), i("div", {
+    }), (t, a) => (r(), i("div", {
       ref_key: "tiremarksChart",
       ref: O,
       class: V(`vue-data-ui-component vue-ui-tiremarks ${e.value.useCssAnimation ? "" : "vue-ui-dna"}`),
       style: X(`font-family:${e.value.style.fontFamily};width:100%; text-align:center;background:${e.value.style.chart.backgroundColor}`),
-      id: M.value,
-      onMouseenter: o[0] || (o[0] = () => n(Z)(!0)),
-      onMouseleave: o[1] || (o[1] = () => n(Z)(!1))
+      id: H.value,
+      onMouseenter: a[0] || (a[0] = () => n(Z)(!0)),
+      onMouseleave: a[1] || (a[1] = () => n(Z)(!1))
     }, [
-      e.value.userOptions.buttons.annotator ? (r(), N(n($e), {
+      e.value.userOptions.buttons.annotator ? (r(), N(n(Oe), {
         key: 0,
         svgRef: n(U),
         backgroundColor: e.value.style.chart.backgroundColor,
@@ -265,27 +269,27 @@ const ge = { style: { chart: { backgroundColor: "#1A1A1A", color: "#CCCCCC", lay
         "annotator-action-close": f(() => [
           u(t.$slots, "annotator-action-close", {}, void 0, !0)
         ]),
-        "annotator-action-color": f(({ color: a }) => [
-          u(t.$slots, "annotator-action-color", b(C({ color: a })), void 0, !0)
+        "annotator-action-color": f(({ color: o }) => [
+          u(t.$slots, "annotator-action-color", C(b({ color: o })), void 0, !0)
         ]),
-        "annotator-action-draw": f(({ mode: a }) => [
-          u(t.$slots, "annotator-action-draw", b(C({ mode: a })), void 0, !0)
+        "annotator-action-draw": f(({ mode: o }) => [
+          u(t.$slots, "annotator-action-draw", C(b({ mode: o })), void 0, !0)
         ]),
-        "annotator-action-undo": f(({ disabled: a }) => [
-          u(t.$slots, "annotator-action-undo", b(C({ disabled: a })), void 0, !0)
+        "annotator-action-undo": f(({ disabled: o }) => [
+          u(t.$slots, "annotator-action-undo", C(b({ disabled: o })), void 0, !0)
         ]),
-        "annotator-action-redo": f(({ disabled: a }) => [
-          u(t.$slots, "annotator-action-redo", b(C({ disabled: a })), void 0, !0)
+        "annotator-action-redo": f(({ disabled: o }) => [
+          u(t.$slots, "annotator-action-redo", C(b({ disabled: o })), void 0, !0)
         ]),
-        "annotator-action-delete": f(({ disabled: a }) => [
-          u(t.$slots, "annotator-action-delete", b(C({ disabled: a })), void 0, !0)
+        "annotator-action-delete": f(({ disabled: o }) => [
+          u(t.$slots, "annotator-action-delete", C(b({ disabled: o })), void 0, !0)
         ]),
         _: 3
       }, 8, ["svgRef", "backgroundColor", "color", "active"])) : k("", !0),
-      ze.value ? (r(), i("div", {
+      Be.value ? (r(), i("div", {
         key: 1,
         ref_key: "noTitle",
-        ref: Fe,
+        ref: Te,
         class: "vue-data-ui-no-title-space",
         style: "height:36px; width: 100%;background:transparent"
       }, null, 512)) : k("", !0),
@@ -295,7 +299,7 @@ const ge = { style: { chart: { backgroundColor: "#1A1A1A", color: "#CCCCCC", lay
         ref: q,
         style: "width:100%;background:transparent;padding-bottom:12px"
       }, [
-        (r(), N(it, {
+        (r(), N(ct, {
           key: `title_${K.value}`,
           config: {
             title: {
@@ -309,14 +313,14 @@ const ge = { style: { chart: { backgroundColor: "#1A1A1A", color: "#CCCCCC", lay
           }
         }, null, 8, ["config"]))
       ], 512)) : k("", !0),
-      e.value.userOptions.show && Pe.value && (n(ee) || n(R)) ? (r(), N(n(_e), {
+      e.value.userOptions.show && ze.value && (n(ee) || n(R)) ? (r(), N(n(Se), {
         ref: "details",
         key: `user_options_${J.value}`,
         backgroundColor: e.value.style.chart.backgroundColor,
         color: e.value.style.chart.color,
         isPrinting: n(te),
-        isImaging: n(ae),
-        uid: M.value,
+        isImaging: n(oe),
+        uid: H.value,
         hasPdf: e.value.userOptions.buttons.pdf,
         hasImg: e.value.userOptions.buttons.img,
         hasSvg: e.value.userOptions.buttons.svg,
@@ -331,18 +335,18 @@ const ge = { style: { chart: { backgroundColor: "#1A1A1A", color: "#CCCCCC", lay
         callbacks: e.value.userOptions.callbacks,
         printScale: e.value.userOptions.print.scale,
         onToggleFullscreen: ue,
-        onGeneratePdf: n(oe),
+        onGeneratePdf: n(ae),
         onGenerateImage: n(le),
         onGenerateSvg: ce,
         onToggleAnnotator: L,
         style: X({
           visibility: n(ee) ? n(R) ? "visible" : "hidden" : "visible"
         })
-      }, Ue({ _: 2 }, [
+      }, Le({ _: 2 }, [
         t.$slots.menuIcon ? {
           name: "menuIcon",
-          fn: f(({ isOpen: a, color: l }) => [
-            u(t.$slots, "menuIcon", b(C({ isOpen: a, color: l })), void 0, !0)
+          fn: f(({ isOpen: o, color: l }) => [
+            u(t.$slots, "menuIcon", C(b({ isOpen: o, color: l })), void 0, !0)
           ]),
           key: "0"
         } : void 0,
@@ -369,15 +373,15 @@ const ge = { style: { chart: { backgroundColor: "#1A1A1A", color: "#CCCCCC", lay
         } : void 0,
         t.$slots.optionFullscreen ? {
           name: "optionFullscreen",
-          fn: f(({ toggleFullscreen: a, isFullscreen: l }) => [
-            u(t.$slots, "optionFullscreen", b(C({ toggleFullscreen: a, isFullscreen: l })), void 0, !0)
+          fn: f(({ toggleFullscreen: o, isFullscreen: l }) => [
+            u(t.$slots, "optionFullscreen", C(b({ toggleFullscreen: o, isFullscreen: l })), void 0, !0)
           ]),
           key: "4"
         } : void 0,
         t.$slots.optionAnnotator ? {
           name: "optionAnnotator",
-          fn: f(({ toggleAnnotator: a, isAnnotator: l }) => [
-            u(t.$slots, "optionAnnotator", b(C({ toggleAnnotator: a, isAnnotator: l })), void 0, !0)
+          fn: f(({ toggleAnnotator: o, isAnnotator: l }) => [
+            u(t.$slots, "optionAnnotator", C(b({ toggleAnnotator: o, isAnnotator: l })), void 0, !0)
           ]),
           key: "5"
         } : void 0
@@ -385,12 +389,12 @@ const ge = { style: { chart: { backgroundColor: "#1A1A1A", color: "#CCCCCC", lay
       (r(), i("svg", {
         ref_key: "svgRef",
         ref: U,
-        xmlns: n(We),
+        xmlns: n(Ke),
         class: V({ "vue-data-ui-fullscreen--on": D.value, "vue-data-ui-fulscreen--off": !D.value }),
         viewBox: `0 0 ${T.value} ${B.value}`,
         style: X(`max-width:100%; overflow: visible; background:transparent;color:${e.value.style.chart.color}`)
       }, [
-        je(n(Oe)),
+        Ge(n(Ie)),
         t.$slots["chart-background"] ? (r(), i("foreignObject", {
           key: 0,
           x: 0,
@@ -402,28 +406,28 @@ const ge = { style: { chart: { backgroundColor: "#1A1A1A", color: "#CCCCCC", lay
           }
         }, [
           u(t.$slots, "chart-background", {}, void 0, !0)
-        ], 8, dt)) : k("", !0),
-        e.value.style.chart.layout.curved ? (r(), i("g", ft, [
-          (r(!0), i(he, null, de(ie.value, (a, l) => (r(), i("path", {
-            d: a.curve,
+        ], 8, gt)) : k("", !0),
+        e.value.style.chart.layout.curved ? (r(), i("g", yt, [
+          (r(!0), i(he, null, de(ie.value, (o, l) => (r(), i("path", {
+            d: o.curve,
             "stroke-width": g.value.mark,
-            stroke: c.value >= l ? a.color : e.value.style.chart.layout.inactiveColor,
+            stroke: c.value >= l ? o.color : e.value.style.chart.layout.inactiveColor,
             "stroke-linecap": "round",
             fill: "none",
             class: V({ "vue-ui-tick-animated": e.value.style.chart.animation.use && l <= c.value })
-          }, null, 10, gt))), 256))
-        ])) : (r(), i("g", yt, [
-          (r(!0), i(he, null, de(ie.value, (a, l) => (r(), i("line", {
-            x1: a.x1,
-            y1: a.y1,
-            x2: a.x2,
-            y2: a.y2,
+          }, null, 10, pt))), 256))
+        ])) : (r(), i("g", mt, [
+          (r(!0), i(he, null, de(ie.value, (o, l) => (r(), i("line", {
+            x1: o.x1,
+            y1: o.y1,
+            x2: o.x2,
+            y2: o.y2,
             "stroke-width": g.value.mark,
-            stroke: c.value >= l ? a.color : e.value.style.chart.layout.inactiveColor,
+            stroke: c.value >= l ? o.color : e.value.style.chart.layout.inactiveColor,
             "stroke-linecap": "round"
-          }, null, 8, pt))), 256))
+          }, null, 8, kt))), 256))
         ])),
-        e.value.style.chart.percentage.show ? (r(), i("g", mt, [
+        e.value.style.chart.percentage.show ? (r(), i("g", Ct, [
           n(Q) ? (r(), i("rect", {
             key: 0,
             x: re.value.x,
@@ -432,7 +436,7 @@ const ge = { style: { chart: { backgroundColor: "#1A1A1A", color: "#CCCCCC", lay
             height: p.value.fontSize,
             fill: "#6A6A6A80",
             rx: 3
-          }, null, 8, kt)) : (r(), i("text", {
+          }, null, 8, bt)) : (r(), i("text", {
             key: 1,
             x: p.value.x,
             y: p.value.y,
@@ -440,20 +444,20 @@ const ge = { style: { chart: { backgroundColor: "#1A1A1A", color: "#CCCCCC", lay
             fill: e.value.style.chart.layout.ticks.gradient.show && e.value.style.chart.percentage.useGradientColor ? n(fe)(e.value.style.chart.layout.activeColor, c.value / 100 * (e.value.style.chart.layout.ticks.gradient.shiftHueIntensity / 100)) : e.value.style.chart.percentage.color,
             "font-weight": p.value.bold ? "bold" : "normal",
             "text-anchor": p.value.textAnchor
-          }, Le(n(Je)(
+          }, Xe(n(Qe)(
             e.value.style.chart.percentage.formatter,
             c.value,
-            n(Ke)({
+            n(Ze)({
               v: c.value,
               s: "%",
               r: e.value.style.chart.percentage.rounding
             })
-          )), 9, bt))
+          )), 9, At))
         ])) : k("", !0),
         u(t.$slots, "svg", { svg: s.value }, void 0, !0)
-      ], 14, ht)),
-      t.$slots.watermark ? (r(), i("div", Ct, [
-        u(t.$slots, "watermark", b(C({ isPrinting: n(te) || n(ae) })), void 0, !0)
+      ], 14, ft)),
+      t.$slots.watermark ? (r(), i("div", wt, [
+        u(t.$slots, "watermark", C(b({ isPrinting: n(te) || n(oe) })), void 0, !0)
       ])) : k("", !0),
       t.$slots.source ? (r(), i("div", {
         key: 5,
@@ -463,15 +467,15 @@ const ge = { style: { chart: { backgroundColor: "#1A1A1A", color: "#CCCCCC", lay
       }, [
         u(t.$slots, "source", {}, void 0, !0)
       ], 512)) : k("", !0),
-      n(Q) ? (r(), N(at, { key: 6 })) : k("", !0)
-    ], 46, vt));
+      n(Q) ? (r(), N(lt, { key: 6 })) : k("", !0)
+    ], 46, dt));
   }
-}, wt = /* @__PURE__ */ ct(At, [["__scopeId", "data-v-f47e75c9"]]), Mt = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
+}, _t = /* @__PURE__ */ ht($t, [["__scopeId", "data-v-f47e75c9"]]), Rt = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
   __proto__: null,
-  default: wt
+  default: _t
 }, Symbol.toStringTag, { value: "Module" }));
 export {
-  Nt as a,
-  Mt as b,
-  wt as v
+  Mt as a,
+  Rt as b,
+  _t as v
 };