vue-data-ui 2.4.50 → 2.4.51

package/dist/{vue-ui-word-cloud-o3zU6r0-.js → vue-ui-word-cloud-y2GGxwoq.js}

@@ -1,23 +1,24 @@
-import { useCssVars as Be, computed as p, openBlock as r, createElementBlock as h, createVNode as oe, renderSlot as d, createElementVNode as x, normalizeStyle as ae, pushScopeId as De, popScopeId as Ve, ref as n, watch as te, onMounted as Ee, onBeforeUnmount as Ue, createBlock as z, createCommentVNode as C, unref as $, createSlots as Ge, withCtx as v, normalizeProps as A, guardReactiveProps as I, normalizeClass as ge, Fragment as Le, renderList as Xe, toDisplayString as ye, createTextVNode as je, nextTick as be } from "vue";
-import { u as Ye, a1 as qe, v as He, c as Ce, t as Je, a as Ke, p as X, o as Qe, e as ke, g as Ze, f as et, X as tt, q as ot, r as at, x as lt } from "./index-BtL_cLa8.js";
-import { _ as nt } from "./Title-CIsKiWgN.js";
-import { u as st, U as rt } from "./usePrinter-sRt2SKr2.js";
-import { d as ut, t as it, u as ct } from "./useResponsive-CoxXLe23.js";
-import dt from "./vue-ui-accordion-Cjc683tN.js";
-import { D as vt } from "./DataTable-CQ8fQnex.js";
-import ht from "./BaseIcon-BHwqOTt4.js";
-import { _ as $e } from "./_plugin-vue_export-helper-CHgC5LLL.js";
-import { u as we } from "./useNestedProp-CEAfm1tu.js";
-import { _ as mt } from "./PackageVersion-BV3fHO46.js";
-import { _ as ft } from "./Tooltip-B1LgrF9R.js";
-import { P as pt } from "./PenAndPaper-CCOywdmm.js";
-const gt = (c) => (De("data-v-3fd7d274"), c = c(), Ve(), c), yt = { "data-html2canvas-ignore": "" }, bt = {
+import { useCssVars as De, computed as g, openBlock as r, createElementBlock as m, createVNode as ae, renderSlot as v, createElementVNode as x, normalizeStyle as j, pushScopeId as Ee, popScopeId as Ge, ref as s, watch as oe, onMounted as Le, onBeforeUnmount as Xe, unref as d, createBlock as A, createCommentVNode as k, createSlots as je, withCtx as h, normalizeProps as _, guardReactiveProps as O, normalizeClass as Ce, Fragment as Ye, renderList as qe, toDisplayString as ke, createTextVNode as He, nextTick as we } from "vue";
+import { u as Je, a1 as Ke, v as Qe, c as $e, t as Ze, a as et, p as X, o as tt, e as xe, g as ot, f as at, X as lt, q as st, r as nt, x as rt } from "./index-BbPeL8Gp.js";
+import { _ as ut } from "./Title-aSAft5dl.js";
+import { u as it, U as ct } from "./usePrinter-DaybDVqP.js";
+import { d as dt, t as vt, u as ht } from "./useResponsive-CoxXLe23.js";
+import mt from "./vue-ui-accordion-5d5iVpr7.js";
+import { D as ft } from "./DataTable-DGf6RrOJ.js";
+import pt from "./BaseIcon-CmiukQBl.js";
+import { _ as Te } from "./_plugin-vue_export-helper-CHgC5LLL.js";
+import { u as Se } from "./useNestedProp-BN8claGG.js";
+import { _ as gt } from "./PackageVersion-CxJghxYD.js";
+import { _ as yt } from "./Tooltip-smutPF--.js";
+import { P as bt } from "./PenAndPaper-ZdZEumki.js";
+import { u as Ct } from "./useUserOptionState-BIvW1Kz7.js";
+const kt = (c) => (Ee("data-v-3fd7d274"), c = c(), Ge(), c), wt = { "data-html2canvas-ignore": "" }, $t = {
   key: 0,
   class: "reset-wrapper"
-}, Ct = {
+}, xt = {
   key: 1,
   class: "reset-wrapper"
-}, kt = { class: "mono-slicer" }, wt = /* @__PURE__ */ gt(() => /* @__PURE__ */ x("div", { class: "slider-track" }, null, -1)), $t = ["min", "max", "value"], xt = {
+}, St = { class: "mono-slicer" }, Tt = /* @__PURE__ */ kt(() => /* @__PURE__ */ x("div", { class: "slider-track" }, null, -1)), Ft = ["min", "max", "value"], Nt = {
   __name: "MonoSlicer",
   props: {
     min: {
@@ -62,33 +63,33 @@ const gt = (c) => (De("data-v-3fd7d274"), c = c(), Ve(), c), yt = { "data-html2c
     }
   },
   emits: ["update:value", "reset"],
-  setup(c, { emit: B }) {
-    const s = c;
-    Be((w) => ({
-      "90ad3208": j.value,
-      "4f9eef70": O.value,
-      "6e07ae3e": k.value,
+  setup(c, { emit: U }) {
+    const n = c;
+    De(($) => ({
+      "90ad3208": Y.value,
+      "4f9eef70": I.value,
+      "6e07ae3e": w.value,
       "2fd430a0": c.selectColor,
-      "6b8169a4": T.value
+      "6b8169a4": S.value
     }));
-    const j = p(() => s.inputColor), T = p(() => s.background), k = p(() => `${s.selectColor}33`), O = p(() => s.borderColor);
+    const Y = g(() => n.inputColor), S = g(() => n.background), w = g(() => `${n.selectColor}33`), I = g(() => n.borderColor);
     function M() {
-      B("reset");
+      U("reset");
     }
-    const g = p(() => {
-      const w = s.max - s.min, y = 0, S = (s.value - s.min) / w * 100;
+    const y = g(() => {
+      const $ = n.max - n.min, b = 0, T = (n.value - n.min) / $ * 100;
       return {
-        left: `${y}%`,
-        width: `${S - y}%`,
-        background: s.selectColor
+        left: `${b}%`,
+        width: `${T - b}%`,
+        background: n.selectColor
       };
     });
-    return (w, y) => (r(), h("div", yt, [
-      c.value !== c.source ? (r(), h("div", bt, [
-        c.useResetSlot ? d(w.$slots, "reset-action", {
+    return ($, b) => (r(), m("div", wt, [
+      c.value !== c.source ? (r(), m("div", $t, [
+        c.useResetSlot ? v($.$slots, "reset-action", {
           key: 1,
           reset: M
-        }, void 0, !0) : (r(), h("button", {
+        }, void 0, !0) : (r(), m("button", {
           key: 0,
           "data-cy-reset": "",
           tabindex: "0",
@@ -96,32 +97,32 @@ const gt = (c) => (De("data-v-3fd7d274"), c = c(), Ve(), c), yt = { "data-html2c
           class: "vue-data-ui-refresh-button",
           onClick: M
         }, [
-          oe(ht, {
+          ae(pt, {
             name: "refresh",
             stroke: c.textColor
           }, null, 8, ["stroke"])
         ]))
-      ])) : (r(), h("div", Ct)),
-      x("div", kt, [
-        wt,
+      ])) : (r(), m("div", xt)),
+      x("div", St, [
+        Tt,
         x("div", {
           class: "range-highlight",
-          style: ae(g.value)
+          style: j(y.value)
         }, null, 4),
         x("input", {
           type: "range",
           min: c.min,
           max: c.max,
           value: Number(c.value),
-          onInput: y[0] || (y[0] = (S) => B("update:value", Number(S.target.value)))
-        }, null, 40, $t)
+          onInput: b[0] || (b[0] = (T) => U("update:value", Number(T.target.value)))
+        }, null, 40, Ft)
       ])
     ]));
   }
-}, Tt = /* @__PURE__ */ $e(xt, [["__scopeId", "data-v-3fd7d274"]]), St = ["id"], Ft = ["xmlns", "viewBox"], _t = ["transform"], Nt = ["fill", "font-weight", "x", "y", "font-size", "transform", "onMouseover"], Pt = {
+}, Pt = /* @__PURE__ */ Te(Nt, [["__scopeId", "data-v-3fd7d274"]]), zt = ["id"], At = ["xmlns", "viewBox"], _t = ["transform"], Ot = ["fill", "font-weight", "x", "y", "font-size", "transform", "onMouseover"], It = {
   key: 4,
   class: "vue-data-ui-watermark"
-}, zt = ["innerHTML"], At = {
+}, Mt = ["innerHTML"], Wt = {
   __name: "vue-ui-word-cloud",
   props: {
     config: {
@@ -137,157 +138,157 @@ const gt = (c) => (De("data-v-3fd7d274"), c = c(), Ve(), c), yt = { "data-html2c
       }
     }
   },
-  setup(c, { expose: B }) {
-    const s = c, { vue_ui_word_cloud: j } = Ye(), T = p({
+  setup(c, { expose: U }) {
+    const n = c, { vue_ui_word_cloud: Y } = Je(), S = g({
       get() {
-        return !!s.dataset && s.dataset.length;
+        return !!n.dataset && n.dataset.length;
       },
       set(t) {
         return t;
       }
-    }), k = n(typeof s.dataset == "string" ? qe(s.dataset) : s.dataset.map((t) => ({
+    }), w = s(typeof n.dataset == "string" ? Ke(n.dataset) : n.dataset.map((t) => ({
       ...t,
-      value: He(t.value)
-    }))), O = n(Ce()), M = n(0), g = n(null), w = n(null), y = n(null), S = n(0), le = n(0), Y = n(!1), e = p({
-      get: () => ne(),
+      value: Qe(t.value)
+    }))), I = s($e()), M = s(0), y = s(null), $ = s(null), b = s(null), T = s(0), le = s(0), q = s(!1), e = g({
+      get: () => ue(),
       set: (t) => t
-    });
-    function ne() {
-      const t = we({
-        userConfig: s.config,
-        defaultConfig: j
+    }), { userOptionsVisible: se, setUserOptionsVisibility: ne, keepUserOptionState: re } = Ct({ config: e.value });
+    function ue() {
+      const t = Se({
+        userConfig: n.config,
+        defaultConfig: Y
       });
       return t.theme ? {
-        ...we({
-          userConfig: Je.vue_ui_word_cloud[t.theme] || s.config,
+        ...Se({
+          userConfig: Ze.vue_ui_word_cloud[t.theme] || n.config,
           defaultConfig: t
         }),
-        customPalette: Ke[t.theme] || X
+        customPalette: et[t.theme] || X
       } : t;
     }
-    te(() => s.config, (t) => {
-      e.value = ne(), re(), S.value += 1, le.value += 1, q();
+    oe(() => n.config, (t) => {
+      e.value = ue(), ce(), T.value += 1, le.value += 1, H();
     }, { deep: !0 });
-    const se = n(null), F = n(0), u = n({
+    const ie = s(null), F = s(0), u = s({
       width: e.value.style.chart.width,
       height: e.value.style.chart.height,
       maxFontSize: e.value.style.chart.words.maxFontSize,
       minFontSize: e.value.style.chart.words.minFontSize
-    }), xe = it(() => {
-      const { width: t, height: a } = ct({
-        chart: g.value,
-        title: e.value.style.chart.title.text ? w.value : null,
-        slicer: e.value.style.chart.zoom.show && se.value,
-        source: y.value
+    }), Fe = vt(() => {
+      const { width: t, height: a } = ht({
+        chart: y.value,
+        title: e.value.style.chart.title.text ? $.value : null,
+        slicer: e.value.style.chart.zoom.show && ie.value,
+        source: b.value
       });
-      u.value.width = t, u.value.height = a, be(H);
+      u.value.width = t, u.value.height = a, we(J);
     });
-    te(() => F.value, () => {
-      Te();
+    oe(() => F.value, () => {
+      Ne();
     });
-    const Te = ut(() => {
-      H();
+    const Ne = dt(() => {
+      J();
     }, 10);
-    function q() {
-      F.value = ve.value;
+    function H() {
+      F.value = fe.value;
     }
-    const D = n(null);
-    Ee(() => {
-      re(), q();
+    const V = s(null);
+    Le(() => {
+      ce(), H();
     });
-    function re() {
-      Qe(s.dataset) ? ke({
+    function ce() {
+      tt(n.dataset) ? xe({
         componentName: "VueUiWordCloud",
         type: "dataset"
-      }) : k.value.forEach((t, a) => {
-        Ze({
+      }) : w.value.forEach((t, a) => {
+        ot({
           datasetObject: t,
           requiredAttributes: ["name", "value"]
         }).forEach((o) => {
-          T.value = !1, ke({
+          S.value = !1, xe({
             componentName: "VueUiWordCloud",
             type: "datasetSerieAttribute",
             property: o,
             index: a
           });
         });
-      }), e.value.responsive && (D.value = new ResizeObserver(xe), D.value.observe(g.value.parentNode));
+      }), e.value.responsive && (V.value = new ResizeObserver(Fe), V.value.observe(y.value.parentNode));
     }
-    Ue(() => {
-      D.value && D.value.disconnect();
+    Xe(() => {
+      V.value && V.value.disconnect();
     });
-    const { isPrinting: ue, isImaging: ie, generatePdf: ce, generateImage: de } = st({
-      elementId: `wordCloud_${O.value}`,
+    const { isPrinting: de, isImaging: ve, generatePdf: he, generateImage: me } = it({
+      elementId: `wordCloud_${I.value}`,
       fileName: e.value.style.chart.title.text || "vue-ui-word-cloud"
-    }), m = n({
+    }), f = s({
       showTable: e.value.table.show,
       showTooltip: e.value.style.chart.tooltip.show
     });
-    function Se(t, a, o = "Arial") {
+    function Pe(t, a, o = "Arial") {
       const l = document.createElement("canvas").getContext("2d");
       return l.font = `${a}px ${e.value.style.chart.words.bold ? "bold" : "normal"} ${o}`, {
         width: l.measureText(t).width + e.value.style.chart.words.proximity,
         height: a
       };
     }
-    function Fe(t, a) {
+    function ze(t, a) {
       return t.x < a.x + a.width && t.x + t.width > a.x && t.y < a.y + a.height && t.y + t.height > a.y;
     }
-    function _e(t, a, o) {
-      const i = [], l = { x: -a / 2, y: -o / 2, width: a, height: o }, f = 0, N = 0;
-      return t.forEach((P) => {
-        let Z = !1;
-        for (let L = 0; L < Math.max(a, o) / 2 && !Z; L += e.value.style.chart.words.packingWeight)
-          for (let ee = 0; ee < 360 && !Z; ee += e.value.style.chart.words.packingWeight) {
-            const pe = ee * Math.PI / 180, Ie = f + L * Math.cos(pe) - P.width / 2, Oe = N + L * Math.sin(pe) - P.height / 2, b = { ...P, x: Ie, y: Oe }, Me = b.x >= l.x && b.y >= l.y && b.x + b.width <= l.x + l.width && b.y + b.height <= l.y + l.height, We = i.some((Re) => Fe(b, Re));
-            Me && !We && (i.push(b), Z = !0);
+    function Ae(t, a, o) {
+      const i = [], l = { x: -a / 2, y: -o / 2, width: a, height: o }, p = 0, P = 0;
+      return t.forEach((z) => {
+        let ee = !1;
+        for (let L = 0; L < Math.max(a, o) / 2 && !ee; L += e.value.style.chart.words.packingWeight)
+          for (let te = 0; te < 360 && !ee; te += e.value.style.chart.words.packingWeight) {
+            const be = te * Math.PI / 180, We = p + L * Math.cos(be) - z.width / 2, Re = P + L * Math.sin(be) - z.height / 2, C = { ...z, x: We, y: Re }, Ue = C.x >= l.x && C.y >= l.y && C.x + C.width <= l.x + l.width && C.y + C.height <= l.y + l.height, Ve = i.some((Be) => ze(C, Be));
+            Ue && !Ve && (i.push(C), ee = !0);
           }
       }), i;
     }
-    const W = n([]);
-    te(() => s.dataset, H, { immediate: !0 });
-    const ve = p(() => Math.min(...k.value.map((t) => t.value))), Ne = p(() => Math.max(...k.value.map((t) => t.value)));
-    function H() {
-      const t = [...k.value].filter((l) => l.value >= F.value).map((l) => l.value), a = Math.max(...t), o = Math.min(...t), i = [...k.value].filter((l) => l.value >= F.value).map((l, f) => {
-        const N = (l.value - o) / (a - o) * (u.value.maxFontSize - u.value.minFontSize) + u.value.minFontSize, P = Se(l.name, N);
+    const W = s([]);
+    oe(() => n.dataset, J, { immediate: !0 });
+    const fe = g(() => Math.min(...w.value.map((t) => t.value))), _e = g(() => Math.max(...w.value.map((t) => t.value)));
+    function J() {
+      const t = [...w.value].filter((l) => l.value >= F.value).map((l) => l.value), a = Math.max(...t), o = Math.min(...t), i = [...w.value].filter((l) => l.value >= F.value).map((l, p) => {
+        const P = (l.value - o) / (a - o) * (u.value.maxFontSize - u.value.minFontSize) + u.value.minFontSize, z = Pe(l.name, P);
         return {
           ...l,
-          id: Ce(),
-          fontSize: N,
-          width: P.width,
-          height: P.height,
-          color: e.value.style.chart.words.usePalette ? e.value.customPalette[f] || e.value.customPalette[f % e.value.customPalette.length] || X[f] || X[f % X.length] : e.value.style.chart.words.color
+          id: $e(),
+          fontSize: P,
+          width: z.width,
+          height: z.height,
+          color: e.value.style.chart.words.usePalette ? e.value.customPalette[p] || e.value.customPalette[p % e.value.customPalette.length] || X[p] || X[p % X.length] : e.value.style.chart.words.color
         };
       });
-      W.value = _e(i, u.value.width, u.value.height).sort((l, f) => f.fontSize - l.fontSize);
+      W.value = Ae(i, u.value.width, u.value.height).sort((l, p) => p.fontSize - l.fontSize);
     }
-    const V = p(() => {
+    const B = g(() => {
       const t = W.value.map((o) => ({
         name: o.name,
         color: o.color
       })), a = W.value.map((o) => o.value);
       return { head: t, body: a };
     });
-    function he() {
-      be(() => {
-        const t = V.value.head.map((i, l) => [[
+    function pe() {
+      we(() => {
+        const t = B.value.head.map((i, l) => [[
           i.name
-        ], [V.value.body[l]]]), a = [[e.value.style.chart.title.text], [e.value.style.chart.title.subtitle.text], [[""], [e.value.table.columnNames.value]]].concat(t), o = ot(a);
-        at({ csvContent: o, title: e.value.style.chart.title.text || "vue-ui-word-cloud" });
+        ], [B.value.body[l]]]), a = [[e.value.style.chart.title.text], [e.value.style.chart.title.subtitle.text], [[""], [e.value.table.columnNames.value]]].concat(t), o = st(a);
+        nt({ csvContent: o, title: e.value.style.chart.title.text || "vue-ui-word-cloud" });
       });
     }
-    const E = p(() => {
+    const D = g(() => {
       const t = [
         e.value.table.columnNames.series,
         e.value.table.columnNames.value
-      ], a = V.value.head.map((l, f) => {
-        const N = et({ p: e.value.table.td.prefix, v: V.value.body[f], s: e.value.table.td.suffix, r: e.value.table.td.roundingValue });
+      ], a = B.value.head.map((l, p) => {
+        const P = at({ p: e.value.table.td.prefix, v: B.value.body[p], s: e.value.table.td.suffix, r: e.value.table.td.roundingValue });
         return [
           {
             color: l.color,
             name: l.name
           },
-          N
+          P
         ];
       }), o = {
         th: {
@@ -311,76 +312,78 @@ const gt = (c) => (De("data-v-3fd7d274"), c = c(), Ve(), c), yt = { "data-html2c
         body: a,
         config: o
       };
-    }), U = n(!1);
-    function Pe(t) {
-      U.value = t, M.value += 1;
+    }), E = s(!1);
+    function Oe(t) {
+      E.value = t, M.value += 1;
     }
-    function ze() {
+    function Ie() {
       return W.value;
     }
-    function me() {
-      m.value.showTable = !m.value.showTable;
+    function ge() {
+      f.value.showTable = !f.value.showTable;
     }
-    function fe() {
-      m.value.showTooltip = !m.value.showTooltip;
+    function ye() {
+      f.value.showTooltip = !f.value.showTooltip;
     }
-    const G = n(!1);
-    function J() {
+    const G = s(!1);
+    function K() {
       G.value = !G.value;
     }
-    B({
-      getData: ze,
-      generateCsv: he,
-      generatePdf: ce,
-      generateImage: de,
-      toggleTable: me,
-      toggleTooltip: fe,
-      toggleAnnotator: J
+    U({
+      getData: Ie,
+      generateCsv: pe,
+      generatePdf: he,
+      generateImage: me,
+      toggleTable: ge,
+      toggleTooltip: ye,
+      toggleAnnotator: K
     });
-    const _ = n(null), R = n(!1), K = n(""), Q = n(null);
-    function Ae(t) {
-      if (!m.value.showTooltip) return;
-      _.value = t.id, Q.value = { datapoint: t, config: e.value };
+    const N = s(null), R = s(!1), Q = s(""), Z = s(null);
+    function Me(t) {
+      if (!f.value.showTooltip) return;
+      N.value = t.id, Z.value = { datapoint: t, config: e.value };
       const a = e.value.style.chart.tooltip.customFormat;
-      if (R.value = !1, lt(a))
+      if (R.value = !1, rt(a))
         try {
           const o = a({
             datapoint: t,
             config: e.value
           });
-          typeof o == "string" && (K.value = o, R.value = !0);
+          typeof o == "string" && (Q.value = o, R.value = !0);
         } catch {
           console.warn("Custom format cannot be applied."), R.value = !1;
         }
       if (!R.value) {
         let o = `<svg viewBox="0 0 10 10" height="${e.value.style.chart.tooltip.fontSize}"><circle cx="5" cy="5" r="5" fill="${t.color}"/></svg><span>${t.name}:</span><b>${(t.value || 0).toFixed(e.value.style.chart.tooltip.roundingValue)}</b>`;
-        K.value = `<div dir="auto" style="display:flex; gap:4px; align-items:center; jsutify-content:center;">${o}</div>`;
+        Q.value = `<div dir="auto" style="display:flex; gap:4px; align-items:center; jsutify-content:center;">${o}</div>`;
       }
-      Y.value = !0;
+      q.value = !0;
     }
-    return (t, a) => (r(), h("div", {
+    return (t, a) => (r(), m("div", {
       class: "vue-ui-word-cloud",
       ref_key: "wordCloudChart",
-      ref: g,
-      id: `wordCloud_${O.value}`,
-      style: ae(`width: 100%; font-family:${e.value.style.fontFamily};background:${e.value.style.chart.backgroundColor};${e.value.responsive ? "height:100%" : ""}`)
+      ref: y,
+      id: `wordCloud_${I.value}`,
+      style: j(`width: 100%; font-family:${e.value.style.fontFamily};background:${e.value.style.chart.backgroundColor};${e.value.responsive ? "height:100%" : ""}`),
+      onMouseenter: a[3] || (a[3] = () => d(ne)(!0)),
+      onMouseleave: a[4] || (a[4] = () => d(ne)(!1))
     }, [
-      e.value.userOptions.buttons.annotator ? (r(), z(pt, {
+      e.value.userOptions.buttons.annotator ? (r(), A(bt, {
         key: 0,
-        parent: g.value,
+        parent: y.value,
         backgroundColor: e.value.style.chart.backgroundColor,
         color: e.value.style.chart.color,
         active: G.value,
-        onClose: J
-      }, null, 8, ["parent", "backgroundColor", "color", "active"])) : C("", !0),
-      e.value.style.chart.title.text ? (r(), h("div", {
+        onClose: K
+      }, null, 8, ["parent", "backgroundColor", "color", "active"])) : k("", !0),
+      e.value.style.chart.title.text ? (r(), m("div", {
         key: 1,
         ref_key: "chartTitle",
-        ref: w,
+        ref: $,
         style: "width:100%;background:transparent;padding-bottom:24px"
       }, [
-        (r(), z(nt, {
-          key: `title_${S.value}`,
+        (r(), A(ut, {
+          key: `title_${T.value}`,
           config: {
             title: {
               ...e.value.style.chart.title
@@ -390,92 +393,95 @@ const gt = (c) => (De("data-v-3fd7d274"), c = c(), Ve(), c), yt = { "data-html2c
             }
           }
         }, null, 8, ["config"]))
-      ], 512)) : C("", !0),
-      e.value.userOptions.show && T.value ? (r(), z(rt, {
+      ], 512)) : k("", !0),
+      e.value.userOptions.show && S.value && (d(re) || d(se)) ? (r(), A(ct, {
         ref: "details",
         key: `user_option_${M.value}`,
         backgroundColor: e.value.style.chart.backgroundColor,
         color: e.value.style.chart.color,
-        isPrinting: $(ue),
-        isImaging: $(ie),
-        uid: O.value,
+        isPrinting: d(de),
+        isImaging: d(ve),
+        uid: I.value,
         hasPdf: e.value.userOptions.buttons.pdf,
         hasXls: e.value.userOptions.buttons.csv,
         hasImg: e.value.userOptions.buttons.img,
         hasTable: e.value.userOptions.buttons.table,
         hasFullscreen: e.value.userOptions.buttons.fullscreen,
-        isFullscreen: U.value,
+        isFullscreen: E.value,
         titles: { ...e.value.userOptions.buttonTitles },
-        chartElement: g.value,
+        chartElement: y.value,
         position: e.value.userOptions.position,
         hasTooltip: e.value.style.chart.tooltip.show && e.value.userOptions.buttons.tooltip,
-        isTooltip: m.value.showTooltip,
+        isTooltip: f.value.showTooltip,
         hasAnnotator: e.value.userOptions.buttons.annotator,
         isAnnotation: G.value,
-        onToggleFullscreen: Pe,
-        onGeneratePdf: $(ce),
-        onGenerateCsv: he,
-        onGenerateImage: $(de),
-        onToggleTable: me,
-        onToggleTooltip: fe,
-        onToggleAnnotator: J
-      }, Ge({ _: 2 }, [
+        onToggleFullscreen: Oe,
+        onGeneratePdf: d(he),
+        onGenerateCsv: pe,
+        onGenerateImage: d(me),
+        onToggleTable: ge,
+        onToggleTooltip: ye,
+        onToggleAnnotator: K,
+        style: j({
+          visibility: d(re) ? d(se) ? "visible" : "hidden" : "visible"
+        })
+      }, je({ _: 2 }, [
         t.$slots.optionPdf ? {
           name: "optionPdf",
-          fn: v(() => [
-            d(t.$slots, "optionPdf", {}, void 0, !0)
+          fn: h(() => [
+            v(t.$slots, "optionPdf", {}, void 0, !0)
           ]),
           key: "0"
         } : void 0,
         t.$slots.optionCsv ? {
           name: "optionCsv",
-          fn: v(() => [
-            d(t.$slots, "optionCsv", {}, void 0, !0)
+          fn: h(() => [
+            v(t.$slots, "optionCsv", {}, void 0, !0)
           ]),
           key: "1"
         } : void 0,
         t.$slots.optionImg ? {
           name: "optionImg",
-          fn: v(() => [
-            d(t.$slots, "optionImg", {}, void 0, !0)
+          fn: h(() => [
+            v(t.$slots, "optionImg", {}, void 0, !0)
           ]),
           key: "2"
         } : void 0,
         t.$slots.optionTable ? {
           name: "optionTable",
-          fn: v(() => [
-            d(t.$slots, "optionTable", {}, void 0, !0)
+          fn: h(() => [
+            v(t.$slots, "optionTable", {}, void 0, !0)
           ]),
           key: "3"
         } : void 0,
         t.$slots.optionFullscreen ? {
           name: "optionFullscreen",
-          fn: v(({ toggleFullscreen: o, isFullscreen: i }) => [
-            d(t.$slots, "optionFullscreen", A(I({ toggleFullscreen: o, isFullscreen: i })), void 0, !0)
+          fn: h(({ toggleFullscreen: o, isFullscreen: i }) => [
+            v(t.$slots, "optionFullscreen", _(O({ toggleFullscreen: o, isFullscreen: i })), void 0, !0)
           ]),
           key: "4"
         } : void 0,
         t.$slots.optionAnnotator ? {
           name: "optionAnnotator",
-          fn: v(({ toggleAnnotator: o, isAnnotator: i }) => [
-            d(t.$slots, "optionAnnotator", A(I({ toggleAnnotator: o, isAnnotator: i })), void 0, !0)
+          fn: h(({ toggleAnnotator: o, isAnnotator: i }) => [
+            v(t.$slots, "optionAnnotator", _(O({ toggleAnnotator: o, isAnnotator: i })), void 0, !0)
           ]),
           key: "5"
         } : void 0
-      ]), 1032, ["backgroundColor", "color", "isPrinting", "isImaging", "uid", "hasPdf", "hasXls", "hasImg", "hasTable", "hasFullscreen", "isFullscreen", "titles", "chartElement", "position", "hasTooltip", "isTooltip", "hasAnnotator", "isAnnotation", "onGeneratePdf", "onGenerateImage"])) : C("", !0),
-      T.value ? (r(), h("svg", {
+      ]), 1032, ["backgroundColor", "color", "isPrinting", "isImaging", "uid", "hasPdf", "hasXls", "hasImg", "hasTable", "hasFullscreen", "isFullscreen", "titles", "chartElement", "position", "hasTooltip", "isTooltip", "hasAnnotator", "isAnnotation", "onGeneratePdf", "onGenerateImage", "style"])) : k("", !0),
+      S.value ? (r(), m("svg", {
         key: 3,
-        class: ge({ "vue-data-ui-fullscreen--on": U.value, "vue-data-ui-fulscreen--off": !U.value }),
-        xmlns: $(tt),
+        class: Ce({ "vue-data-ui-fullscreen--on": E.value, "vue-data-ui-fulscreen--off": !E.value }),
+        xmlns: d(lt),
         viewBox: `0 0 ${u.value.width <= 0 ? 10 : u.value.width} ${u.value.height <= 0 ? 10 : u.value.height}`,
         style: "overflow:visible;background:transparent;"
       }, [
-        oe(mt),
+        ae(gt),
         x("g", {
           transform: `translate(${(u.value.width <= 0 ? 10 : u.value.width) / 2}, ${(u.value.height <= 0 ? 10 : u.value.height) / 2})`
         }, [
-          (r(!0), h(Le, null, Xe(W.value, (o, i) => (r(), h("g", null, [
-            (r(), h("text", {
+          (r(!0), m(Ye, null, qe(W.value, (o, i) => (r(), m("g", null, [
+            (r(), m("text", {
               fill: o.color,
               "font-weight": e.value.style.chart.words.bold ? "bold" : "normal",
               key: i,
@@ -483,26 +489,26 @@ const gt = (c) => (De("data-v-3fd7d274"), c = c(), Ve(), c), yt = { "data-html2c
               y: o.y,
               "font-size": o.fontSize,
               transform: `translate(${o.width / 2}, ${o.height / 2})`,
-              class: ge({ animated: e.value.useCssAnimation, "word-selected": _.value && _.value === o.id && m.value.showTooltip, "word-not-selected": _.value && _.value !== o.id && m.value.showTooltip }),
+              class: Ce({ animated: e.value.useCssAnimation, "word-selected": N.value && N.value === o.id && f.value.showTooltip, "word-not-selected": N.value && N.value !== o.id && f.value.showTooltip }),
               "text-anchor": "middle",
               "dominant-baseline": "central",
-              onMouseover: (l) => Ae(o),
+              onMouseover: (l) => Me(o),
               onMouseleave: a[0] || (a[0] = (l) => {
-                _.value = null, Y.value = !1;
+                N.value = null, q.value = !1;
               }),
-              style: ae(`animation-delay:${i * e.value.animationDelayMs}ms !important;`)
-            }, ye(o.name), 47, Nt))
+              style: j(`animation-delay:${i * e.value.animationDelayMs}ms !important;`)
+            }, ke(o.name), 47, Ot))
           ]))), 256))
         ], 8, _t),
-        d(t.$slots, "svg", {
+        v(t.$slots, "svg", {
           svg: { height: u.value.height, width: u.value.width }
         }, void 0, !0)
-      ], 10, Ft)) : C("", !0),
-      t.$slots.watermark ? (r(), h("div", Pt, [
-        d(t.$slots, "watermark", A(I({ isPrinting: $(ue) || $(ie) })), void 0, !0)
-      ])) : C("", !0),
-      oe(ft, {
-        show: m.value.showTooltip && Y.value,
+      ], 10, At)) : k("", !0),
+      t.$slots.watermark ? (r(), m("div", It, [
+        v(t.$slots, "watermark", _(O({ isPrinting: d(de) || d(ve) })), void 0, !0)
+      ])) : k("", !0),
+      ae(yt, {
+        show: f.value.showTooltip && q.value,
         backgroundColor: e.value.style.chart.tooltip.backgroundColor,
         color: e.value.style.chart.tooltip.color,
         fontSize: e.value.style.chart.tooltip.fontSize,
@@ -512,30 +518,30 @@ const gt = (c) => (De("data-v-3fd7d274"), c = c(), Ve(), c), yt = { "data-html2c
         backgroundOpacity: e.value.style.chart.tooltip.backgroundOpacity,
         position: e.value.style.chart.tooltip.position,
         offsetY: e.value.style.chart.tooltip.offsetY,
-        parent: g.value,
-        content: K.value,
+        parent: y.value,
+        content: Q.value,
         isCustom: R.value
       }, {
-        "tooltip-before": v(() => [
-          d(t.$slots, "tooltip-before", A(I({ ...Q.value })), void 0, !0)
+        "tooltip-before": h(() => [
+          v(t.$slots, "tooltip-before", _(O({ ...Z.value })), void 0, !0)
         ]),
-        "tooltip-after": v(() => [
-          d(t.$slots, "tooltip-after", A(I({ ...Q.value })), void 0, !0)
+        "tooltip-after": h(() => [
+          v(t.$slots, "tooltip-after", _(O({ ...Z.value })), void 0, !0)
         ]),
         _: 3
       }, 8, ["show", "backgroundColor", "color", "fontSize", "borderRadius", "borderColor", "borderWidth", "backgroundOpacity", "position", "offsetY", "parent", "content", "isCustom"]),
       x("div", {
         ref_key: "chartSlicer",
-        ref: se,
+        ref: ie,
         style: "width:100%;background:transparent",
         "data-html2canvas-ignore": ""
       }, [
-        e.value.style.chart.zoom.show ? (r(), z(Tt, {
+        e.value.style.chart.zoom.show ? (r(), A(Pt, {
           key: 0,
           value: F.value,
           "onUpdate:value": a[1] || (a[1] = (o) => F.value = o),
-          min: ve.value,
-          max: Ne.value,
+          min: fe.value,
+          max: _e.value,
           textColor: e.value.style.chart.color,
           inputColor: e.value.style.chart.zoom.color,
           selectColor: e.value.style.chart.zoom.highlightColor,
@@ -543,27 +549,27 @@ const gt = (c) => (De("data-v-3fd7d274"), c = c(), Ve(), c), yt = { "data-html2c
           background: e.value.style.chart.zoom.color,
           borderColor: e.value.style.chart.backgroundColor,
           source: e.value.style.chart.width,
-          onReset: q
+          onReset: H
         }, {
-          "reset-action": v(({ reset: o }) => [
-            d(t.$slots, "reset-action", A(I({ reset: o })), void 0, !0)
+          "reset-action": h(({ reset: o }) => [
+            v(t.$slots, "reset-action", _(O({ reset: o })), void 0, !0)
           ]),
           _: 3
-        }, 8, ["value", "min", "max", "textColor", "inputColor", "selectColor", "useResetSlot", "background", "borderColor", "source"])) : C("", !0)
+        }, 8, ["value", "min", "max", "textColor", "inputColor", "selectColor", "useResetSlot", "background", "borderColor", "source"])) : k("", !0)
       ], 512),
-      t.$slots.source ? (r(), h("div", {
+      t.$slots.source ? (r(), m("div", {
         key: 5,
         ref_key: "source",
-        ref: y,
+        ref: b,
         dir: "auto"
       }, [
-        d(t.$slots, "source", {}, void 0, !0)
-      ], 512)) : C("", !0),
-      T.value ? (r(), z(dt, {
+        v(t.$slots, "source", {}, void 0, !0)
+      ], 512)) : k("", !0),
+      S.value ? (r(), A(mt, {
         key: 6,
         hideDetails: "",
         config: {
-          open: m.value.showTable,
+          open: f.value.showTable,
           maxHeight: 1e4,
           body: {
             backgroundColor: e.value.style.chart.backgroundColor,
@@ -575,33 +581,33 @@ const gt = (c) => (De("data-v-3fd7d274"), c = c(), Ve(), c), yt = { "data-html2c
           }
         }
       }, {
-        content: v(() => [
-          (r(), z(vt, {
+        content: h(() => [
+          (r(), A(ft, {
             key: `table_${le.value}`,
-            colNames: E.value.colNames,
-            head: E.value.head,
-            body: E.value.body,
-            config: E.value.config,
+            colNames: D.value.colNames,
+            head: D.value.head,
+            body: D.value.body,
+            config: D.value.config,
             title: `${e.value.style.chart.title.text}${e.value.style.chart.title.subtitle.text ? ` : ${e.value.style.chart.title.subtitle.text}` : ""}`,
-            onClose: a[2] || (a[2] = (o) => m.value.showTable = !1)
+            onClose: a[2] || (a[2] = (o) => f.value.showTable = !1)
           }, {
-            th: v(({ th: o }) => [
+            th: h(({ th: o }) => [
               x("div", {
                 innerHTML: o,
                 style: { display: "flex", "align-items": "center" }
-              }, null, 8, zt)
+              }, null, 8, Mt)
             ]),
-            td: v(({ td: o }) => [
-              je(ye(o.name || o), 1)
+            td: h(({ td: o }) => [
+              He(ke(o.name || o), 1)
             ]),
             _: 1
           }, 8, ["colNames", "head", "body", "config", "title"]))
         ]),
         _: 1
-      }, 8, ["config"])) : C("", !0)
-    ], 12, St));
+      }, 8, ["config"])) : k("", !0)
+    ], 44, zt));
   }
-}, jt = /* @__PURE__ */ $e(At, [["__scopeId", "data-v-13d267e2"]]);
+}, Kt = /* @__PURE__ */ Te(Wt, [["__scopeId", "data-v-7360374b"]]);
 export {
-  jt as default
+  Kt as default
 };