vue-data-ui 3.7.9 → 3.7.11

package/dist/{vue-ui-word-cloud-DXW_2Hj8.js → vue-ui-word-cloud-67I78EbL.js}

@@ -1,250 +1,250 @@
-import { useCssVars as Ft, defineAsyncComponent as ee, computed as te, ref as h, toRefs as St, watch as be, shallowRef as He, onMounted as Tt, onBeforeUnmount as Mt, createElementBlock as G, openBlock as F, unref as r, normalizeStyle as Te, createBlock as ce, createCommentVNode as q, createVNode as Me, withCtx as y, renderSlot as C, normalizeProps as R, guardReactiveProps as W, createSlots as Ze, normalizeClass as Je, createElementVNode as ye, Fragment as Ot, renderList as zt, toDisplayString as Ee, resolveDynamicComponent as Pt, mergeProps as It, createTextVNode as Ke, nextTick as Qe } from "vue";
-import { d as et, u as Dt } from "./useResponsive-DfdjqQps.js";
-import { c as Et, t as Bt, ap as _t, M as Nt, i as Rt, p as Oe, o as tt, g as ot, k as Wt, d as Vt, X as Xt, u as Yt, q as Ut, x as Lt } from "./lib-DUaaQGCv.js";
-import { u as jt, a as Be } from "./useNestedProp-xVOMUtFl.js";
+import { useCssVars as St, defineAsyncComponent as ee, computed as te, ref as h, toRefs as Tt, watch as be, shallowRef as He, onMounted as zt, onBeforeUnmount as Mt, createElementBlock as j, openBlock as S, unref as r, normalizeStyle as Te, createBlock as ce, createCommentVNode as G, createVNode as ze, withCtx as g, renderSlot as b, normalizeProps as B, guardReactiveProps as _, createSlots as Je, normalizeClass as Ke, createElementVNode as ye, Fragment as Ot, renderList as Pt, toDisplayString as Ee, resolveDynamicComponent as It, mergeProps as Dt, createTextVNode as Qe, nextTick as et } from "vue";
+import { d as tt, u as Et } from "./useResponsive-DfdjqQps.js";
+import { c as Bt, t as _t, ap as Nt, M as Rt, i as Wt, p as Me, o as ot, g as at, k as Vt, d as Xt, X as Zt, u as Yt, q as Ut, x as Lt } from "./lib-DUaaQGCv.js";
+import { u as jt, a as Be } from "./useNestedProp-BjZ1Lg9E.js";
 import { u as Gt, B as qt } from "./BaseScanner-BgWxam9d.js";
 import { u as Ht } from "./usePrinter-BdVu83IN.js";
-import { u as Zt } from "./useSvgExport-DrjCWun4.js";
-import { u as Jt } from "./useThemeCheck-DGJ31Vi5.js";
-import { u as Kt } from "./useUserOptionState-BIvW1Kz7.js";
-import { u as Qt } from "./useChartAccessibility-9icAAmYg.js";
-import eo from "./img-BYzbY8TZ.js";
-import to from "./Title-CmZh1pjz.js";
-import { u as oo } from "./usePanZoom-BVca3eMk.js";
-import { _ as ao } from "./_plugin-vue_export-helper-CHgC5LLL.js";
-function lo(A, x) {
-  const { width: f, height: p } = A, g = x.getImageData(0, 0, f, p).data;
-  let d = f, c = p, l = 0, v = 0, S = !1;
-  for (let b = 0; b < p; b += 1)
-    for (let T = 0; T < f; T += 1)
-      g[(b * f + T) * 4 + 3] > 1 && (S = !0, T < d && (d = T), T > l && (l = T), b < c && (c = b), b > v && (v = b));
-  return S ? [d, c, l, v] : [0, 0, 0, 0];
+import { u as Jt } from "./useSvgExport-DrjCWun4.js";
+import { u as Kt } from "./useThemeCheck-DGJ31Vi5.js";
+import { u as Qt } from "./useUserOptionState-BIvW1Kz7.js";
+import { u as eo } from "./useChartAccessibility-9icAAmYg.js";
+import to from "./img-BYzbY8TZ.js";
+import oo from "./Title-BwhstTFA.js";
+import { u as ao } from "./usePanZoom-DZtyJi5q.js";
+import { _ as lo } from "./_plugin-vue_export-helper-CHgC5LLL.js";
+function no($, x) {
+  const { width: f, height: y } = $, C = x.getImageData(0, 0, f, y).data;
+  let d = f, c = y, l = 0, v = 0, T = !1;
+  for (let k = 0; k < y; k += 1)
+    for (let z = 0; z < f; z += 1)
+      C[(k * f + z) * 4 + 3] > 1 && (T = !0, z < d && (d = z), z > l && (l = z), k < c && (c = k), k > v && (v = k));
+  return T ? [d, c, l, v] : [0, 0, 0, 0];
 }
-function at({
-  word: A,
+function lt({
+  word: $,
   fontSize: x,
   pad: f,
-  canvas: p,
+  canvas: y,
   ctx: m,
-  svg: g
+  svg: C
 }) {
-  m.save(), m.font = `${g.style && g.style.bold ? "bold " : ""}${x}px Arial`;
-  const d = m.measureText(A.name), c = Math.ceil(d.width) + 2 + (f ? f * 2 : 0), l = Math.ceil(x) + 2 + (f ? f * 2 : 0);
-  p.width = c, p.height = l, m.clearRect(0, 0, c, l), m.font = `${g.style && g.style.bold ? "bold " : ""}${x}px Arial`, m.textAlign = "center", m.textBaseline = "middle", m.fillStyle = "black", m.fillText(A.name, c / 2, l / 2);
-  const S = m.getImageData(0, 0, c, l).data, b = [];
+  m.save(), m.font = `${C.style && C.style.bold ? "bold " : ""}${x}px Arial`;
+  const d = m.measureText($.name), c = Math.ceil(d.width) + 2 + (f ? f * 2 : 0), l = Math.ceil(x) + 2 + (f ? f * 2 : 0);
+  y.width = c, y.height = l, m.clearRect(0, 0, c, l), m.font = `${C.style && C.style.bold ? "bold " : ""}${x}px Arial`, m.textAlign = "center", m.textBaseline = "middle", m.fillStyle = "black", m.fillText($.name, c / 2, l / 2);
+  const T = m.getImageData(0, 0, c, l).data, k = [];
   for (let I = 0; I < l; I += 1)
-    for (let k = 0; k < c; k += 1)
-      S[(I * c + k) * 4 + 3] > 1 && b.push([k, I]);
-  const [T, $, H, J] = lo(p, m);
-  return m.restore(), { w: c, h: l, wordMask: b, minX: T, minY: $, maxX: H, maxY: J };
+    for (let w = 0; w < c; w += 1)
+      T[(I * c + w) * 4 + 3] > 1 && k.push([w, I]);
+  const [z, F, q, J] = no(y, m);
+  return m.restore(), { w: c, h: l, wordMask: k, minX: z, minY: F, maxX: q, maxY: J };
 }
-function lt({ mask: A, maskW: x, maskH: f, wx: p, wy: m, wordMask: g }) {
-  for (let d = 0; d < g.length; d += 1) {
-    const c = p + g[d][0], l = m + g[d][1];
-    if (c < 0 || l < 0 || c >= x || l >= f || A[l * x + c]) return !1;
+function nt({ mask: $, maskW: x, maskH: f, wx: y, wy: m, wordMask: C }) {
+  for (let d = 0; d < C.length; d += 1) {
+    const c = y + C[d][0], l = m + C[d][1];
+    if (c < 0 || l < 0 || c >= x || l >= f || $[l * x + c]) return !1;
   }
   return !0;
 }
-function nt({ mask: A, maskW: x, maskH: f, wx: p, wy: m, wordMask: g }) {
-  for (let d = 0; d < g.length; d += 1) {
-    const c = p + g[d][0], l = m + g[d][1];
-    c >= 0 && l >= 0 && c < x && l < f && (A[l * x + c] = 1);
+function st({ mask: $, maskW: x, maskH: f, wx: y, wy: m, wordMask: C }) {
+  for (let d = 0; d < C.length; d += 1) {
+    const c = y + C[d][0], l = m + C[d][1];
+    c >= 0 && l >= 0 && c < x && l < f && ($[l * x + c] = 1);
   }
 }
-function no({ wordMask: A, w: x, h: f, dilation: p }) {
-  const m = new Set(A.map(([d, c]) => `${d},${c}`)), g = new Set(m);
-  for (let [d, c] of A)
-    for (let l = -p; l <= p; l += 1)
-      for (let v = -p; v <= p; v += 1) {
+function so({ wordMask: $, w: x, h: f, dilation: y }) {
+  const m = new Set($.map(([d, c]) => `${d},${c}`)), C = new Set(m);
+  for (let [d, c] of $)
+    for (let l = -y; l <= y; l += 1)
+      for (let v = -y; v <= y; v += 1) {
         if (l === 0 && v === 0) continue;
-        const S = d + l, b = c + v;
-        S >= 0 && S < x && b >= 0 && b < f && g.add(`${S},${b}`);
+        const T = d + l, k = c + v;
+        T >= 0 && T < x && k >= 0 && k < f && C.add(`${T},${k}`);
       }
-  return Array.from(g).map((d) => d.split(",").map(Number));
+  return Array.from(C).map((d) => d.split(",").map(Number));
 }
-async function so({
-  words: A,
+async function ro({
+  words: $,
   proximity: x = 0,
   svg: f,
-  strictPixelPadding: p,
+  strictPixelPadding: y,
   onProgress: m
 }) {
-  function g() {
-    return new Promise((w) => setTimeout(w, 0));
+  function C() {
+    return new Promise((A) => setTimeout(A, 0));
   }
-  const { width: d, height: c } = f, l = Math.round(d), v = Math.round(c), S = 1, b = f.minFontSize, T = Math.min(f.maxFontSize, 100), $ = A.map((w) => w.value), H = Math.min(...$), J = Math.max(...$), I = new Uint8Array(l * v), k = document.createElement("canvas"), de = k.getContext("2d", { willReadFrequently: !0 });
-  k.width = l, k.height = v;
-  const Ce = 6, ke = 2, we = 2, ve = 1, K = Math.floor(l / 2), se = Math.floor(v / 2), he = [...A.map((w, D) => ({
-    ...w,
+  const { width: d, height: c } = f, l = Math.round(d), v = Math.round(c), T = 1, k = f.minFontSize, z = Math.min(f.maxFontSize, 100), F = $.map((A) => A.value), q = Math.min(...F), J = Math.max(...F), I = new Uint8Array(l * v), w = document.createElement("canvas"), de = w.getContext("2d", { willReadFrequently: !0 });
+  w.width = l, w.height = v;
+  const Ce = 6, ke = 2, we = 2, ve = 1, K = Math.floor(l / 2), se = Math.floor(v / 2), he = [...$.map((A, D) => ({
+    ...A,
     __wcIndex: D,
-    id: w.id != null ? w.id : `${w.name}__${D}`
-  }))].sort((w, D) => D.value - w.value), e = [];
-  for (const w of he) {
+    id: A.id != null ? A.id : `${A.name}__${D}`
+  }))].sort((A, D) => D.value - A.value), e = [];
+  for (const A of he) {
     const D = e.length;
-    let re = b;
-    J !== H && (re = (w.value - H) / (J - H) * (T - b) + b), re = Math.max(
-      b,
-      Math.min(T, re)
+    let re = k;
+    J !== q && (re = (A.value - q) / (J - q) * (z - k) + k), re = Math.max(
+      k,
+      Math.min(z, re)
     );
-    let E = !1, B = re;
-    for (; !E && B >= S; ) {
+    let E = !1, N = re;
+    for (; !E && N >= T; ) {
       let {
         w: M,
-        h: _,
+        h: R,
         wordMask: V,
         minX: Q,
         minY: oe,
         maxX: ae,
         maxY: le
-      } = at({
-        word: w,
-        fontSize: B,
+      } = lt({
+        word: A,
+        fontSize: N,
         pad: x,
-        canvas: k,
+        canvas: w,
         ctx: de,
         svg: f
       });
-      p && (V = no({ wordMask: V, w: M, h: _, dilation: 2 }));
-      let N = 0, X = 0;
-      for (; N < Math.max(l, v) && !E && X < 1e4; ) {
+      y && (V = so({ wordMask: V, w: M, h: R, dilation: 2 }));
+      let W = 0, X = 0;
+      for (; W < Math.max(l, v) && !E && X < 1e4; ) {
         for (let s = 0; s < 360; s += Ce) {
           X += 1;
           const O = Math.round(
-            K + N * Math.cos(s * Math.PI / 180) - M / 2
-          ), z = Math.round(
-            se + N * Math.sin(s * Math.PI / 180) - _ / 2
+            K + W * Math.cos(s * Math.PI / 180) - M / 2
+          ), P = Math.round(
+            se + W * Math.sin(s * Math.PI / 180) - R / 2
           );
-          if (!(O < 0 || z < 0 || O + M > l || z + _ > v) && lt({
+          if (!(O < 0 || P < 0 || O + M > l || P + R > v) && nt({
             mask: I,
             maskW: l,
             maskH: v,
             wx: O,
-            wy: z,
+            wy: P,
             wordMask: V
           })) {
-            const { __wcIndex: Y, ...U } = w;
+            const { __wcIndex: Z, ...Y } = A;
             e.push({
-              ...U,
+              ...Y,
               x: O - l / 2,
-              y: z - v / 2,
-              fontSize: B,
+              y: P - v / 2,
+              fontSize: N,
               width: M,
-              height: _,
+              height: R,
               angle: 0,
               minX: Q,
               minY: oe,
               maxX: ae,
               maxY: le
-            }), nt({
+            }), st({
               mask: I,
               maskW: l,
               maskH: v,
               wx: O,
-              wy: z,
+              wy: P,
               wordMask: V
             }), E = !0;
             break;
           }
         }
-        N += ke;
+        W += ke;
       }
-      E || (B -= 1);
+      E || (N -= 1);
     }
-    if (!E && B < S) {
-      B = S;
+    if (!E && N < T) {
+      N = T;
       const {
         w: M,
-        h: _,
+        h: R,
         wordMask: V,
         minX: Q,
         minY: oe,
         maxX: ae,
         maxY: le
-      } = at({
-        word: w,
-        fontSize: B,
+      } = lt({
+        word: A,
+        fontSize: N,
         pad: x,
-        canvas: k,
+        canvas: w,
         ctx: de,
         svg: f
       });
-      let N = 0, X = 0;
-      for (; N < Math.max(l, v) && !E && X < 25e3; ) {
+      let W = 0, X = 0;
+      for (; W < Math.max(l, v) && !E && X < 25e3; ) {
         for (let s = 0; s < 360; s += we) {
           X += 1;
           const O = Math.round(
-            K + N * Math.cos(s * Math.PI / 180) - M / 2
-          ), z = Math.round(
-            se + N * Math.sin(s * Math.PI / 180) - _ / 2
+            K + W * Math.cos(s * Math.PI / 180) - M / 2
+          ), P = Math.round(
+            se + W * Math.sin(s * Math.PI / 180) - R / 2
           );
-          if (!(O < 0 || z < 0 || O + M > l || z + _ > v) && lt({
+          if (!(O < 0 || P < 0 || O + M > l || P + R > v) && nt({
             mask: I,
             maskW: l,
             maskH: v,
             wx: O,
-            wy: z,
+            wy: P,
             wordMask: V
           })) {
-            const { __wcIndex: Y, ...U } = w;
+            const { __wcIndex: Z, ...Y } = A;
             e.push({
-              ...U,
+              ...Y,
               x: O - l / 2,
-              y: z - v / 2,
-              fontSize: B,
+              y: P - v / 2,
+              fontSize: N,
               width: M,
-              height: _,
+              height: R,
               angle: 0,
               minX: Q,
               minY: oe,
               maxX: ae,
               maxY: le
-            }), nt({
+            }), st({
               mask: I,
               maskW: l,
               maskH: v,
               wx: O,
-              wy: z,
+              wy: P,
               wordMask: V
             }), E = !0;
             break;
           }
         }
-        N += ve;
+        W += ve;
       }
     }
     if (m && e.length > D) {
       const M = e[e.length - 1];
       m({ word: M, all: e });
     }
-    await g();
+    await C();
   }
-  return e.sort((w, D) => D.fontSize - w.fontSize);
+  return e.sort((A, D) => D.fontSize - A.fontSize);
 }
-const st = { style: { chart: { backgroundColor: "#1A1A1A", color: "#CCCCCC", title: { color: "#CCCCCC", subtitle: { color: "#757575" } }, words: { selectedStroke: "#1A1A1A" }, tooltip: { backgroundColor: "#1A1A1A", backgroundOpacity: 70, color: "#CCCCCC", borderColor: "#5A5A5A" } } }, table: { th: { backgroundColor: "#1A1A1A", color: "#CCCCCC" }, td: { backgroundColor: "#1A1A1A", color: "#CCCCCC" } } }, rt = { style: { chart: { backgroundColor: "#FFF8E1", color: "#424242", title: { color: "#424242", subtitle: { color: "#757575" } }, words: { selectedStroke: "#FFF8E1" }, tooltip: { backgroundColor: "#FFECB3", backgroundOpacity: 30, color: "#424242", borderColor: "#FF8A65" }, zoom: { color: "#5D4037", highlightColor: "#FF8A65" } } }, table: { th: { backgroundColor: "#FFF8E1", color: "#424242" }, td: { backgroundColor: "#FFF8E1", color: "#424242" } } }, it = { style: { chart: { backgroundColor: "#1E1E1E", color: "#BDBDBD", title: { color: "#FFF8E1", subtitle: { color: "#BDBDBD" } }, words: { selectedStroke: "#1E1E1E" }, tooltip: { backgroundColor: "#1E1E1E", backgroundOpacity: 30, color: "#FFF8E1", borderColor: "#FF8A65" }, zoom: { color: "#5D4037", highlightColor: "#FF8A65" } } }, table: { th: { backgroundColor: "#1E1E1E", color: "#BDBDBD" }, td: { backgroundColor: "#1E1E1E", color: "#BDBDBD" } } }, ut = { style: { chart: { backgroundColor: "#1A1A1A", color: "#99AA99", title: { color: "#66CC66", subtitle: { color: "#99AA99" } }, words: { selectedStroke: "#1A1A1A" } } }, table: { th: { backgroundColor: "#1A1A1A", color: "#99AA99" }, td: { backgroundColor: "#1A1A1A", color: "#AACCAA" } } }, ct = { style: { chart: { backgroundColor: "#fbfafa", color: "#8A9892", title: { color: "#8A9892", subtitle: { color: "#99AA99" } }, words: { selectedStroke: "#fbfafa" } } }, table: { th: { backgroundColor: "#fbfafa", color: "#8F837A" }, td: { backgroundColor: "#fbfafa", color: "#8F837A" } } }, dt = { style: { chart: { backgroundColor: "#f6f6fb", color: "#50606C", title: { color: "#50606C", subtitle: { color: "#718890" } }, words: { selectedStroke: "#f6f6fb" } } }, table: { th: { backgroundColor: "#f6f6fb", color: "#50606C" }, td: { backgroundColor: "#f6f6fb", color: "#50606C" } } }, vt = {
+const rt = { style: { chart: { backgroundColor: "#1A1A1A", color: "#CCCCCC", title: { color: "#CCCCCC", subtitle: { color: "#757575" } }, words: { selectedStroke: "#1A1A1A" }, tooltip: { backgroundColor: "#1A1A1A", backgroundOpacity: 70, color: "#CCCCCC", borderColor: "#5A5A5A" } } }, table: { th: { backgroundColor: "#1A1A1A", color: "#CCCCCC" }, td: { backgroundColor: "#1A1A1A", color: "#CCCCCC" } } }, it = { style: { chart: { backgroundColor: "#FFF8E1", color: "#424242", title: { color: "#424242", subtitle: { color: "#757575" } }, words: { selectedStroke: "#FFF8E1" }, tooltip: { backgroundColor: "#FFECB3", backgroundOpacity: 30, color: "#424242", borderColor: "#FF8A65" }, zoom: { color: "#5D4037", highlightColor: "#FF8A65" } } }, table: { th: { backgroundColor: "#FFF8E1", color: "#424242" }, td: { backgroundColor: "#FFF8E1", color: "#424242" } } }, ut = { style: { chart: { backgroundColor: "#1E1E1E", color: "#BDBDBD", title: { color: "#FFF8E1", subtitle: { color: "#BDBDBD" } }, words: { selectedStroke: "#1E1E1E" }, tooltip: { backgroundColor: "#1E1E1E", backgroundOpacity: 30, color: "#FFF8E1", borderColor: "#FF8A65" }, zoom: { color: "#5D4037", highlightColor: "#FF8A65" } } }, table: { th: { backgroundColor: "#1E1E1E", color: "#BDBDBD" }, td: { backgroundColor: "#1E1E1E", color: "#BDBDBD" } } }, ct = { style: { chart: { backgroundColor: "#1A1A1A", color: "#99AA99", title: { color: "#66CC66", subtitle: { color: "#99AA99" } }, words: { selectedStroke: "#1A1A1A" } } }, table: { th: { backgroundColor: "#1A1A1A", color: "#99AA99" }, td: { backgroundColor: "#1A1A1A", color: "#AACCAA" } } }, dt = { style: { chart: { backgroundColor: "#fbfafa", color: "#8A9892", title: { color: "#8A9892", subtitle: { color: "#99AA99" } }, words: { selectedStroke: "#fbfafa" } } }, table: { th: { backgroundColor: "#fbfafa", color: "#8F837A" }, td: { backgroundColor: "#fbfafa", color: "#8F837A" } } }, vt = { style: { chart: { backgroundColor: "#f6f6fb", color: "#50606C", title: { color: "#50606C", subtitle: { color: "#718890" } }, words: { selectedStroke: "#f6f6fb" } } }, table: { th: { backgroundColor: "#f6f6fb", color: "#50606C" }, td: { backgroundColor: "#f6f6fb", color: "#50606C" } } }, ht = {
   default: {},
-  dark: st,
-  celebration: rt,
-  celebrationNight: it,
-  hack: ut,
-  zen: ct,
-  concrete: dt
-}, Do = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
+  dark: rt,
+  celebration: it,
+  celebrationNight: ut,
+  hack: ct,
+  zen: dt,
+  concrete: vt
+}, Eo = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
   __proto__: null,
-  celebration: rt,
-  celebrationNight: it,
-  concrete: dt,
-  dark: st,
-  default: vt,
-  hack: ut,
-  zen: ct
-}, Symbol.toStringTag, { value: "Module" })), ro = ["id", "data-resizing", "data-relayout"], io = ["xmlns", "viewBox"], uo = ["width", "height"], co = ["transform"], vo = ["transform"], ho = ["x", "y", "width", "height", "onMouseover", "onMouseleave", "onClick"], mo = ["fill", "font-weight", "font-size", "transform", "stroke", "stroke-width"], fo = {
+  celebration: it,
+  celebrationNight: ut,
+  concrete: vt,
+  dark: rt,
+  default: ht,
+  hack: ct,
+  zen: dt
+}, Symbol.toStringTag, { value: "Module" })), io = ["id", "data-resizing", "data-relayout"], uo = ["xmlns", "viewBox"], co = ["width", "height"], vo = ["transform"], ho = ["transform"], mo = ["x", "y", "width", "height", "onMouseover", "onMouseleave", "onClick"], fo = ["fill", "font-weight", "font-size", "transform", "stroke", "stroke-width"], po = {
   key: 3,
   class: "vue-data-ui-watermark"
-}, po = {
+}, go = {
   key: 4,
   "data-dom-to-png-ignore": "",
   class: "reset-wrapper"
-}, go = ["innerHTML"], bo = {
+}, bo = ["innerHTML"], yo = {
   __name: "vue-ui-word-cloud",
   props: {
     config: {
@@ -260,21 +260,26 @@ const st = { style: { chart: { backgroundColor: "#1A1A1A", color: "#CCCCCC", tit
       }
     }
   },
-  setup(A, { expose: x }) {
-    Ft((t) => ({
-      v85c97b12: t.slicerColor
+  setup($, { expose: x }) {
+    St((t) => ({
+      v6142108c: t.slicerColor
     }));
-    const f = ee(() => import("./Tooltip-De7i-i20.js")), p = ee(() => import("./BaseIcon-5acZpJev.js")), m = ee(() => import("./vue-ui-accordion-Cxz5Cxwj.js")), g = ee(() => import("./DataTable-ScRMrNB6.js")), d = ee(() => import("./PenAndPaper-Bfbd6BHc.js")), c = ee(() => import("./UserOptions-D-GV6kfB.js")), l = ee(() => import("./PackageVersion-D2zuSCLX.js")), v = ee(() => import("./BaseDraggableDialog-B8FpOTTF.js")), { vue_ui_word_cloud: S } = jt(), { isThemeValid: b, warnInvalidTheme: T } = Jt(), $ = A, H = te({
+    const f = ee(() => import("./Tooltip-De7i-i20.js")), y = ee(() => import("./BaseIcon-Dl4VBlHV.js")), m = ee(() => import("./vue-ui-accordion-BXTVRRX7.js")), C = ee(() => import("./DataTable-Ho3Bf5oq.js")), d = ee(() => import("./PenAndPaper-kymjF6_b.js")), c = ee(() => import("./UserOptions-DgscxIaa.js")), l = ee(() => import("./PackageVersion-Dpr5vAal.js")), v = ee(() => import("./BaseDraggableDialog-BDY-Jn9S.js")), { vue_ui_word_cloud: T } = jt(), { isThemeValid: k, warnInvalidTheme: z } = Kt(), F = $, q = te({
       get() {
-        return !!$.dataset && $.dataset.length;
+        return !!F.dataset && F.dataset.length;
       },
       set(t) {
         return t;
       }
-    }), J = h(Et()), I = h(0), k = h(null), de = h(null), Ce = h(null), ke = h(0), we = h(0), ve = h(!1), K = h(null), se = h(null), xe = h(!1), he = h(!1), e = h(oe()), { loading: w, FINAL_DATASET: D, manualLoading: re } = Gt({
-      ...St($),
+    }), J = h(Bt()), I = h(0), w = h(null), de = h(null), Ce = h(null), ke = h(0), we = h(0), ve = h(!1), K = h(null), se = h(null), Ae = h(!1), he = h(!1), e = h(oe()), { loading: A, FINAL_DATASET: D, manualLoading: re } = Gt({
+      ...Tt(F),
       FINAL_CONFIG: e,
       prepareConfig: oe,
+      callback: () => {
+        Promise.resolve().then(() => {
+          p.value.showTable = e.value.table.show, p.value.showTooltip = e.value.style.chart.tooltip.show, p.value.showZoom = e.value.style.chart.zoom.show;
+        });
+      },
       skeletonDataset: [
         { name: "Lorem", value: 6 },
         { name: "ipsum", value: 3 },
@@ -325,7 +330,7 @@ const st = { style: { chart: { backgroundColor: "#1A1A1A", color: "#CCCCCC", tit
         { name: "fames", value: 1 },
         { name: "ante", value: 1 }
       ],
-      skeletonConfig: Bt({
+      skeletonConfig: _t({
         defaultConfig: e.value,
         userConfig: {
           userOptions: { show: !1 },
@@ -346,32 +351,32 @@ const st = { style: { chart: { backgroundColor: "#1A1A1A", color: "#CCCCCC", tit
           }
         }
       })
-    }), E = h(B());
-    function B() {
-      return typeof D.value == "string" ? _t(D.value) : D.value.map((t, a) => ({
+    }), E = h(N());
+    function N() {
+      return typeof D.value == "string" ? Nt(D.value) : D.value.map((t, a) => ({
         ...t,
-        value: Nt(t.value)
+        value: Rt(t.value)
       }));
     }
-    const { userOptionsVisible: M, setUserOptionsVisibility: _, keepUserOptionState: V } = Kt({ config: e.value }), { svgRef: Q } = Qt({ config: e.value.style.chart.title });
+    const { userOptionsVisible: M, setUserOptionsVisibility: R, keepUserOptionState: V } = Qt({ config: e.value }), { svgRef: Q } = eo({ config: e.value.style.chart.title });
     function oe() {
       const t = Be({
-        userConfig: $.config,
-        defaultConfig: S
+        userConfig: F.config,
+        defaultConfig: T
       }), a = t.theme;
       if (!a) return t;
-      if (!b.value(t))
-        return T(t), t;
+      if (!k.value(t))
+        return z(t), t;
       const o = Be({
-        userConfig: vt[a] || $.config,
+        userConfig: ht[a] || F.config,
         defaultConfig: t
       }), n = Be({
-        userConfig: $.config,
+        userConfig: F.config,
         defaultConfig: o
       });
       return {
         ...n,
-        customPalette: n.customPalette.length ? n.customPalette : Rt[a] || Oe
+        customPalette: n.customPalette.length ? n.customPalette : Wt[a] || Me
       };
     }
     const ae = h({ x: 0, y: 0 });
@@ -382,18 +387,18 @@ const st = { style: { chart: { backgroundColor: "#1A1A1A", color: "#CCCCCC", tit
         width: Math.max(10, s.value.width),
         height: Math.max(10, s.value.height)
       };
-      gt(t), ae.value = {
+      bt(t), ae.value = {
         x: t.x + t.width / 2,
         y: t.y + t.height / 2
       }, Se();
     }
-    const N = et(() => {
-      Ye();
+    const W = tt(() => {
+      Ze();
     }, 100), X = h(!1);
     be(() => X.value, (t) => {
-      t === !1 && (he.value = !0, N(), le());
-    }), be(() => $.config, (t) => {
-      e.value = oe(), M.value = !e.value.userOptions.showOnChartHover, Ne(), ke.value += 1, we.value += 1, P.value.showTable = e.value.table.show, P.value.showTooltip = e.value.style.chart.tooltip.show;
+      t === !1 && (he.value = !0, W(), le());
+    }), be(() => F.config, (t) => {
+      e.value = oe(), M.value = !e.value.userOptions.showOnChartHover, Ne(), ke.value += 1, we.value += 1, p.value.showTable = e.value.table.show, p.value.showTooltip = e.value.style.chart.tooltip.show, p.value.showZoom = e.value.style.chart.zoom.show;
     }, { deep: !0 });
     const s = h({
       width: e.value.style.chart.width,
@@ -401,31 +406,31 @@ const st = { style: { chart: { backgroundColor: "#1A1A1A", color: "#CCCCCC", tit
       maxFontSize: e.value.style.chart.words.maxFontSize,
       minFontSize: e.value.style.chart.words.minFontSize,
       bold: e.value.style.chart.words.bold
-    }), O = et(() => {
-      const { width: t, height: a } = Dt({
-        chart: k.value,
+    }), O = tt(() => {
+      const { width: t, height: a } = Et({
+        chart: w.value,
         title: e.value.style.chart.title.text ? de.value : null,
         source: Ce.value
       });
       requestAnimationFrame(async () => {
-        s.value.width = Math.max(10, t), s.value.height = Math.max(10, a - 12), await Qe(), X.value = !1;
+        s.value.width = Math.max(10, t), s.value.height = Math.max(10, a - 12), await et(), X.value = !1;
       });
-    }, 100), z = () => {
+    }, 100), P = () => {
       X.value = !0, O();
-    }, Y = He(null), U = He(null);
-    Tt(Ne);
+    }, Z = He(null), Y = He(null);
+    zt(Ne);
     const _e = te(() => !!e.value.debug);
     function Ne() {
-      tt($.dataset) ? ot({
+      ot(F.dataset) ? at({
         componentName: "VueUiWordCloud",
         type: "dataset",
         debug: _e.value
       }) : E.value.forEach((t, a) => {
-        Wt({
+        Vt({
           datasetObject: t,
           requiredAttributes: ["name", "value"]
         }).forEach((o) => {
-          H.value = !1, ot({
+          q.value = !1, at({
             componentName: "VueUiWordCloud",
             type: "datasetSerieAttribute",
             property: o,
@@ -433,80 +438,78 @@ const st = { style: { chart: { backgroundColor: "#1A1A1A", color: "#CCCCCC", tit
             debug: _e.value
           });
         });
-      }), tt($.dataset) || (re.value = e.value.loading), e.value.responsive && (Y.value && (U.value && Y.value.unobserve(U.value), Y.value.disconnect()), Y.value = new ResizeObserver(z), U.value = k.value.parentNode, Y.value.observe(U.value)), le();
+      }), ot(F.dataset) || (re.value = e.value.loading), e.value.responsive && (Z.value && (Y.value && Z.value.unobserve(Y.value), Z.value.disconnect()), Z.value = new ResizeObserver(P), Y.value = w.value.parentNode, Z.value.observe(Y.value)), le();
     }
     Mt(() => {
-      Y.value && (U.value && Y.value.unobserve(U.value), Y.value.disconnect());
+      Z.value && (Y.value && Z.value.unobserve(Y.value), Z.value.disconnect());
     });
     const { isPrinting: Re, isImaging: We, generatePdf: Ve, generateImage: Xe } = Ht({
       elementId: `wordCloud_${J.value}`,
       fileName: e.value.style.chart.title.text || "vue-ui-word-cloud",
       options: e.value.userOptions.print
-    }), P = h({
+    }), p = h({
       showTable: e.value.table.show,
-      showTooltip: e.value.style.chart.tooltip.show
+      showTooltip: e.value.style.chart.tooltip.show,
+      showZoom: e.value.style.chart.zoom.show
     });
     be(e, () => {
-      P.value = {
-        showTable: e.value.table.show,
-        showTooltip: e.value.style.chart.tooltip.show
-      };
+      p.value.showTable = e.value.table.show, p.value.showTooltip = e.value.style.chart.tooltip.show, p.value.showZoom = e.value.style.chart.zoom.show;
     }, { immediate: !0 });
-    function ht(t, a, o = "Arial") {
+    function mt(t, a, o = "Arial") {
       const i = document.createElement("canvas").getContext("2d");
       return i.font = `${a}px ${e.value.style.chart.words.bold ? "bold" : "normal"} ${o}`, {
         width: i.measureText(t).width + e.value.style.chart.words.proximity,
         height: a
       };
     }
-    const L = h([]), me = /* @__PURE__ */ new Map();
-    function Ye() {
+    const U = h([]), me = /* @__PURE__ */ new Map();
+    function Ze() {
       const t = [...E.value].map((i) => i.value), a = Math.max(...t), o = Math.min(...t), n = [...E.value].map((i, u) => {
-        let j = (i.value - o) / (a - o) * (s.value.maxFontSize - s.value.minFontSize) + s.value.minFontSize;
-        j = isNaN(j) ? s.value.minFontSize : j;
-        const ne = ht(i.name, j);
+        let L = (i.value - o) / (a - o) * (s.value.maxFontSize - s.value.minFontSize) + s.value.minFontSize;
+        L = isNaN(L) ? s.value.minFontSize : L;
+        const ne = mt(i.name, L);
         return {
           ...i,
           id: i.id ?? `${i.name}__${u}`,
-          fontSize: j,
+          fontSize: L,
           width: ne.width,
           height: ne.height,
-          color: e.value.style.chart.words.usePalette ? e.value.customPalette[u] || e.value.customPalette[u % e.value.customPalette.length] || Oe[u] || Oe[u % Oe.length] : e.value.style.chart.words.color
+          color: e.value.style.chart.words.usePalette ? e.value.customPalette[u] || e.value.customPalette[u % e.value.customPalette.length] || Me[u] || Me[u % Me.length] : e.value.style.chart.words.color
         };
       });
-      L.value.length = 0, me.clear(), so({
+      U.value.length = 0, me.clear(), ro({
         words: n,
         svg: s.value,
         proximity: e.value.style.chart.words.proximity,
         strictPixelPadding: e.value.strictPixelPadding,
         onProgress: ({ all: i }) => {
           for (const u of i) {
-            const j = u.id;
-            let ne = me.get(j);
+            const L = u.id;
+            let ne = me.get(L);
             if (ne === void 0)
-              ne = L.value.length, me.set(j, ne), L.value.push({ ...u });
+              ne = U.value.length, me.set(L, ne), U.value.push({ ...u });
             else {
-              const Z = L.value[ne];
-              Z.x = u.x, Z.y = u.y, Z.width = u.width, Z.height = u.height, Z.fontSize = u.fontSize, Z.minX = u.minX, Z.minY = u.minY, Z.maxX = u.maxX, Z.maxY = u.maxY;
+              const H = U.value[ne];
+              H.x = u.x, H.y = u.y, H.width = u.width, H.height = u.height, H.fontSize = u.fontSize, H.minX = u.minX, H.minY = u.minY, H.maxX = u.maxX, H.maxY = u.maxY;
             }
           }
         }
-      }), L.value.sort((i, u) => u.fontSize - i.fontSize), me.clear(), L.value.forEach((i, u) => {
+      }), U.value.sort((i, u) => u.fontSize - i.fontSize), me.clear(), U.value.forEach((i, u) => {
         me.set(i.id, u);
-      }), xe.value = !0, he.value = !1;
+      }), Ae.value = !0, he.value = !1;
     }
-    const Ae = te(() => {
-      const t = L.value.map((o) => ({
+    const xe = te(() => {
+      const t = U.value.map((o) => ({
         name: o.name,
         color: o.color
-      })), a = L.value.map((o) => o.value);
+      })), a = U.value.map((o) => o.value);
       return { head: t, body: a };
     });
-    function ze(t = null) {
-      Qe(() => {
-        const a = Ae.value.head.map((i, u) => [[
+    function Oe(t = null) {
+      et(() => {
+        const a = xe.value.head.map((i, u) => [[
           i.name
-        ], [Ae.value.body[u]]]), o = [[e.value.style.chart.title.text], [e.value.style.chart.title.subtitle.text], [[""], [e.value.table.columnNames.value]]].concat(a), n = Yt(o);
+        ], [xe.value.body[u]]]), o = [[e.value.style.chart.title.text], [e.value.style.chart.title.subtitle.text], [[""], [e.value.table.columnNames.value]]].concat(a), n = Yt(o);
         t ? t(n) : Ut({ csvContent: n, title: e.value.style.chart.title.text || "vue-ui-word-cloud" });
       });
     }
@@ -514,14 +517,14 @@ const st = { style: { chart: { backgroundColor: "#1A1A1A", color: "#CCCCCC", tit
       const t = [
         e.value.table.columnNames.series,
         e.value.table.columnNames.value
-      ], a = Ae.value.head.map((i, u) => {
-        const j = Vt({ p: e.value.table.td.prefix, v: Ae.value.body[u], s: e.value.table.td.suffix, r: e.value.table.td.roundingValue });
+      ], a = xe.value.head.map((i, u) => {
+        const L = Xt({ p: e.value.table.td.prefix, v: xe.value.body[u], s: e.value.table.td.suffix, r: e.value.table.td.roundingValue });
         return [
           {
             color: i.color,
             name: i.name
           },
-          j
+          L
         ];
       }), o = {
         th: {
@@ -546,34 +549,37 @@ const st = { style: { chart: { backgroundColor: "#1A1A1A", color: "#CCCCCC", tit
         config: o
       };
     }), ie = h(!1);
-    function Ue(t) {
+    function Ye(t) {
       ie.value = t, I.value += 1;
     }
-    function mt() {
-      return L.value;
+    function ft() {
+      return U.value;
     }
-    function Le() {
-      P.value.showTable = !P.value.showTable;
+    function Ue() {
+      p.value.showTable = !p.value.showTable;
     }
-    function je() {
-      P.value.showTooltip = !P.value.showTooltip;
+    function Le() {
+      p.value.showTooltip = !p.value.showTooltip;
     }
     const fe = h(!1);
     function Pe() {
       fe.value = !fe.value;
     }
-    const ft = te(() => !fe.value && e.value.style.chart.zoom.show), { viewBox: Fe, resetZoom: Se, isZoom: pt, setInitialViewBox: gt } = oo(Q, {
+    function je() {
+      p.value.showZoom = !p.value.showZoom;
+    }
+    const pt = te(() => !fe.value && p.value.showZoom), { viewBox: Fe, resetZoom: Se, isZoom: gt, setInitialViewBox: bt } = ao(Q, {
       x: 0,
       y: 0,
       width: s.value.width <= 0 ? 10 : s.value.width,
       height: s.value.height <= 0 ? 10 : s.value.height
-    }, 1, ft);
-    be(() => $.dataset, () => {
-      E.value = B(), e.value.responsive || (Ye(), le());
+    }, 1, pt);
+    be(() => F.dataset, () => {
+      E.value = N(), e.value.responsive || (Ze(), le());
     }, { immediate: !0 });
-    async function bt({ scale: t = 2 } = {}) {
-      if (!k.value) return;
-      const { width: a, height: o } = k.value.getBoundingClientRect(), n = a / o, { imageUri: i, base64: u } = await eo({ domElement: k.value, base64: !0, img: !0, scale: t });
+    async function yt({ scale: t = 2 } = {}) {
+      if (!w.value) return;
+      const { width: a, height: o } = w.value.getBoundingClientRect(), n = a / o, { imageUri: i, base64: u } = await to({ domElement: w.value, base64: !0, img: !0, scale: t });
       return {
         imageUri: i,
         base64: u,
@@ -584,7 +590,7 @@ const st = { style: { chart: { backgroundColor: "#1A1A1A", color: "#CCCCCC", tit
       };
     }
     const pe = te(() => {
-      const t = e.value.table.useDialog && !e.value.table.show, a = P.value.showTable;
+      const t = e.value.table.useDialog && !e.value.table.show, a = p.value.showTable;
       return {
         component: t ? v : m,
         title: `${e.value.style.chart.title.text}${e.value.style.chart.title.subtitle.text ? `: ${e.value.style.chart.title.subtitle.text}` : ""}`,
@@ -594,7 +600,7 @@ const st = { style: { chart: { backgroundColor: "#1A1A1A", color: "#CCCCCC", tit
           headerColor: e.value.table.th.color,
           headerBg: e.value.table.th.backgroundColor,
           isFullscreen: ie.value,
-          fullscreenParent: k.value,
+          fullscreenParent: w.value,
           forcedWidth: Math.min(500, window.innerWidth * 0.8)
         } : {
           hideDetails: !0,
@@ -613,46 +619,47 @@ const st = { style: { chart: { backgroundColor: "#1A1A1A", color: "#CCCCCC", tit
         }
       };
     });
-    be(() => P.value.showTable, (t) => {
+    be(() => p.value.showTable, (t) => {
       e.value.table.show || (t && e.value.table.useDialog && K.value ? K.value.open() : "close" in K.value && K.value.close());
     });
     function Ge() {
-      P.value.showTable = !1, se.value && se.value.setTableIconState(!1);
+      p.value.showTable = !1, se.value && se.value.setTableIconState(!1);
     }
-    const yt = te(() => e.value.style.chart.backgroundColor), Ct = te(() => e.value.style.chart.title), { exportSvg: kt, getSvg: wt } = Zt({
+    const Ct = te(() => e.value.style.chart.backgroundColor), kt = te(() => e.value.style.chart.title), { exportSvg: wt, getSvg: At } = Jt({
       svg: Q,
-      title: Ct,
-      backgroundColor: yt
+      title: kt,
+      backgroundColor: Ct
     });
     async function qe({ isCb: t }) {
       if (t) {
-        const { blob: a, url: o, text: n, dataUrl: i } = await wt();
+        const { blob: a, url: o, text: n, dataUrl: i } = await At();
         e.value.userOptions.callbacks.svg({ blob: a, url: o, text: n, dataUrl: i });
       } else
-        kt();
+        wt();
     }
     x({
-      getData: mt,
-      getImage: bt,
-      generateCsv: ze,
+      getData: ft,
+      getImage: yt,
+      generateCsv: Oe,
       generatePdf: Ve,
       generateImage: Xe,
       generateSvg: qe,
       resetZoom: Se,
-      toggleTable: Le,
-      toggleTooltip: je,
+      toggleTable: Ue,
+      toggleTooltip: Le,
       toggleAnnotator: Pe,
-      toggleFullscreen: Ue
+      toggleFullscreen: Ye,
+      toggleZoom: je
     });
     const ue = h(null), ge = h(!1), Ie = h(""), De = h(null);
     function xt(t, a) {
       ue.value = null, ve.value = !1, e.value.events.datapointLeave && e.value.events.datapointLeave({ datapoint: t, seriesIndex: a });
     }
-    function At(t, a) {
+    function $t(t, a) {
       e.value.events.datapointClick && e.value.events.datapointClick({ datapoint: t, seriesIndex: a });
     }
-    function $t(t, a) {
-      if (e.value.events.datapointEnter && e.value.events.datapointEnter({ datapoint: t, seriesIndex: a }), !P.value.showTooltip) return;
+    function Ft(t, a) {
+      if (e.value.events.datapointEnter && e.value.events.datapointEnter({ datapoint: t, seriesIndex: a }), !p.value.showTooltip) return;
       ue.value = t.id, De.value = { datapoint: t, config: e.value };
       const o = e.value.style.chart.tooltip.customFormat;
       if (ge.value = !1, Lt(o))
@@ -671,18 +678,18 @@ const st = { style: { chart: { backgroundColor: "#1A1A1A", color: "#CCCCCC", tit
       }
       ve.value = !0;
     }
-    return (t, a) => (F(), G("div", {
+    return (t, a) => (S(), j("div", {
       class: "vue-data-ui-component vue-ui-word-cloud",
       ref_key: "wordCloudChart",
-      ref: k,
+      ref: w,
       id: `wordCloud_${J.value}`,
       "data-resizing": X.value,
       "data-relayout": he.value,
       style: Te(`width: 100%; font-family:${e.value.style.fontFamily};background:${e.value.style.chart.backgroundColor};${e.value.responsive ? "height:100%" : ""}`),
-      onMouseenter: a[2] || (a[2] = () => r(_)(!0)),
-      onMouseleave: a[3] || (a[3] = () => r(_)(!1))
+      onMouseenter: a[2] || (a[2] = () => r(R)(!0)),
+      onMouseleave: a[3] || (a[3] = () => r(R)(!1))
     }, [
-      e.value.userOptions.buttons.annotator ? (F(), ce(r(d), {
+      e.value.userOptions.buttons.annotator ? (S(), ce(r(d), {
         key: 0,
         svgRef: r(Q),
         backgroundColor: e.value.style.chart.backgroundColor,
@@ -690,33 +697,33 @@ const st = { style: { chart: { backgroundColor: "#1A1A1A", color: "#CCCCCC", tit
         active: fe.value,
         onClose: Pe
       }, {
-        "annotator-action-close": y(() => [
-          C(t.$slots, "annotator-action-close", {}, void 0, !0)
+        "annotator-action-close": g(() => [
+          b(t.$slots, "annotator-action-close", {}, void 0, !0)
         ]),
-        "annotator-action-color": y(({ color: o }) => [
-          C(t.$slots, "annotator-action-color", R(W({ color: o })), void 0, !0)
+        "annotator-action-color": g(({ color: o }) => [
+          b(t.$slots, "annotator-action-color", B(_({ color: o })), void 0, !0)
         ]),
-        "annotator-action-draw": y(({ mode: o }) => [
-          C(t.$slots, "annotator-action-draw", R(W({ mode: o })), void 0, !0)
+        "annotator-action-draw": g(({ mode: o }) => [
+          b(t.$slots, "annotator-action-draw", B(_({ mode: o })), void 0, !0)
         ]),
-        "annotator-action-undo": y(({ disabled: o }) => [
-          C(t.$slots, "annotator-action-undo", R(W({ disabled: o })), void 0, !0)
+        "annotator-action-undo": g(({ disabled: o }) => [
+          b(t.$slots, "annotator-action-undo", B(_({ disabled: o })), void 0, !0)
         ]),
-        "annotator-action-redo": y(({ disabled: o }) => [
-          C(t.$slots, "annotator-action-redo", R(W({ disabled: o })), void 0, !0)
+        "annotator-action-redo": g(({ disabled: o }) => [
+          b(t.$slots, "annotator-action-redo", B(_({ disabled: o })), void 0, !0)
         ]),
-        "annotator-action-delete": y(({ disabled: o }) => [
-          C(t.$slots, "annotator-action-delete", R(W({ disabled: o })), void 0, !0)
+        "annotator-action-delete": g(({ disabled: o }) => [
+          b(t.$slots, "annotator-action-delete", B(_({ disabled: o })), void 0, !0)
         ]),
         _: 3
-      }, 8, ["svgRef", "backgroundColor", "color", "active"])) : q("", !0),
-      e.value.style.chart.title.text ? (F(), G("div", {
+      }, 8, ["svgRef", "backgroundColor", "color", "active"])) : G("", !0),
+      e.value.style.chart.title.text ? (S(), j("div", {
         key: 1,
         ref_key: "chartTitle",
         ref: de,
         style: "width:100%;background:transparent;padding-bottom:24px"
       }, [
-        (F(), ce(to, {
+        (S(), ce(oo, {
           key: `title_${ke.value}`,
           config: {
             title: {
@@ -727,8 +734,8 @@ const st = { style: { chart: { backgroundColor: "#1A1A1A", color: "#CCCCCC", tit
             }
           }
         }, null, 8, ["config"]))
-      ], 512)) : q("", !0),
-      e.value.userOptions.show && H.value && (r(V) || r(M)) ? (F(), ce(r(c), {
+      ], 512)) : G("", !0),
+      e.value.userOptions.show && q.value && (r(V) || r(M)) ? (S(), ce(r(c), {
         ref_key: "userOptionsRef",
         ref: se,
         key: `user_option_${I.value}`,
@@ -745,94 +752,104 @@ const st = { style: { chart: { backgroundColor: "#1A1A1A", color: "#CCCCCC", tit
         hasFullscreen: e.value.userOptions.buttons.fullscreen,
         isFullscreen: ie.value,
         titles: { ...e.value.userOptions.buttonTitles },
-        chartElement: k.value,
+        chartElement: w.value,
         position: e.value.userOptions.position,
         hasTooltip: e.value.style.chart.tooltip.show && e.value.userOptions.buttons.tooltip,
-        isTooltip: P.value.showTooltip,
+        isTooltip: p.value.showTooltip,
         hasAnnotator: e.value.userOptions.buttons.annotator,
         isAnnotation: fe.value,
         callbacks: e.value.userOptions.callbacks,
         printScale: e.value.userOptions.print.scale,
         tableDialog: e.value.table.useDialog,
-        onToggleFullscreen: Ue,
+        hasZoom: e.value.userOptions.buttons.zoom,
+        isZoom: p.value.showZoom,
+        onToggleFullscreen: Ye,
         onGeneratePdf: r(Ve),
-        onGenerateCsv: ze,
+        onGenerateCsv: Oe,
         onGenerateImage: r(Xe),
         onGenerateSvg: qe,
-        onToggleTable: Le,
-        onToggleTooltip: je,
+        onToggleTable: Ue,
+        onToggleTooltip: Le,
         onToggleAnnotator: Pe,
+        onToggleZoom: je,
         style: Te({
           visibility: r(V) ? r(M) ? "visible" : "hidden" : "visible"
         })
-      }, Ze({ _: 2 }, [
+      }, Je({ _: 2 }, [
         t.$slots.menuIcon ? {
           name: "menuIcon",
-          fn: y(({ isOpen: o, color: n }) => [
-            C(t.$slots, "menuIcon", R(W({ isOpen: o, color: n })), void 0, !0)
+          fn: g(({ isOpen: o, color: n }) => [
+            b(t.$slots, "menuIcon", B(_({ isOpen: o, color: n })), void 0, !0)
           ]),
           key: "0"
         } : void 0,
         t.$slots.optionPdf ? {
           name: "optionPdf",
-          fn: y(() => [
-            C(t.$slots, "optionPdf", {}, void 0, !0)
+          fn: g(() => [
+            b(t.$slots, "optionPdf", {}, void 0, !0)
           ]),
           key: "1"
         } : void 0,
         t.$slots.optionCsv ? {
           name: "optionCsv",
-          fn: y(() => [
-            C(t.$slots, "optionCsv", {}, void 0, !0)
+          fn: g(() => [
+            b(t.$slots, "optionCsv", {}, void 0, !0)
           ]),
           key: "2"
         } : void 0,
         t.$slots.optionImg ? {
           name: "optionImg",
-          fn: y(() => [
-            C(t.$slots, "optionImg", {}, void 0, !0)
+          fn: g(() => [
+            b(t.$slots, "optionImg", {}, void 0, !0)
           ]),
           key: "3"
         } : void 0,
         t.$slots.optionSvg ? {
           name: "optionSvg",
-          fn: y(() => [
-            C(t.$slots, "optionSvg", {}, void 0, !0)
+          fn: g(() => [
+            b(t.$slots, "optionSvg", {}, void 0, !0)
           ]),
           key: "4"
         } : void 0,
         t.$slots.optionTable ? {
           name: "optionTable",
-          fn: y(() => [
-            C(t.$slots, "optionTable", {}, void 0, !0)
+          fn: g(() => [
+            b(t.$slots, "optionTable", {}, void 0, !0)
           ]),
           key: "5"
         } : void 0,
         t.$slots.optionFullscreen ? {
           name: "optionFullscreen",
-          fn: y(({ toggleFullscreen: o, isFullscreen: n }) => [
-            C(t.$slots, "optionFullscreen", R(W({ toggleFullscreen: o, isFullscreen: n })), void 0, !0)
+          fn: g(({ toggleFullscreen: o, isFullscreen: n }) => [
+            b(t.$slots, "optionFullscreen", B(_({ toggleFullscreen: o, isFullscreen: n })), void 0, !0)
           ]),
           key: "6"
         } : void 0,
         t.$slots.optionAnnotator ? {
           name: "optionAnnotator",
-          fn: y(({ toggleAnnotator: o, isAnnotator: n }) => [
-            C(t.$slots, "optionAnnotator", R(W({ toggleAnnotator: o, isAnnotator: n })), void 0, !0)
+          fn: g(({ toggleAnnotator: o, isAnnotator: n }) => [
+            b(t.$slots, "optionAnnotator", B(_({ toggleAnnotator: o, isAnnotator: n })), void 0, !0)
           ]),
           key: "7"
+        } : void 0,
+        t.$slots.optionZoom ? {
+          name: "optionZoom",
+          fn: g(({ toggleZoom: o, isZoomLocked: n }) => [
+            b(t.$slots, "optionZoom", B(_({ toggleZoom: o, isZoomLocked: n })), void 0, !0)
+          ]),
+          key: "8"
         } : void 0
-      ]), 1032, ["backgroundColor", "color", "isPrinting", "isImaging", "uid", "hasPdf", "hasXls", "hasImg", "hasSvg", "hasTable", "hasFullscreen", "isFullscreen", "titles", "chartElement", "position", "hasTooltip", "isTooltip", "hasAnnotator", "isAnnotation", "callbacks", "printScale", "tableDialog", "onGeneratePdf", "onGenerateImage", "style"])) : q("", !0),
-      (F(), G("svg", {
+      ]), 1032, ["backgroundColor", "color", "isPrinting", "isImaging", "uid", "hasPdf", "hasXls", "hasImg", "hasSvg", "hasTable", "hasFullscreen", "isFullscreen", "titles", "chartElement", "position", "hasTooltip", "isTooltip", "hasAnnotator", "isAnnotation", "callbacks", "printScale", "tableDialog", "hasZoom", "isZoom", "onGeneratePdf", "onGenerateImage", "style"])) : G("", !0),
+      (S(), j("svg", {
         ref_key: "svgRef",
         ref: Q,
-        class: Je({ "vue-data-ui-fullscreen--on": ie.value, "vue-data-ui-fulscreen--off": !ie.value }),
-        xmlns: r(Xt),
+        class: Ke({ "vue-data-ui-fullscreen--on": ie.value, "vue-data-ui-fulscreen--off": !ie.value }),
+        xmlns: r(Zt),
         viewBox: `${r(Fe).x} ${r(Fe).y} ${r(Fe).width} ${r(Fe).height}`,
         style: "overflow:hidden;background:transparent;"
       }, [
-        Me(r(l)),
-        t.$slots["chart-background"] ? (F(), G("foreignObject", {
+        ze(r(l)),
+        t.$slots["chart-background"] ? (S(), j("foreignObject", {
           key: 0,
           x: 0,
           y: 0,
@@ -842,18 +859,18 @@ const st = { style: { chart: { backgroundColor: "#1A1A1A", color: "#CCCCCC", tit
             pointerEvents: "none"
           }
         }, [
-          C(t.$slots, "chart-background", {}, void 0, !0)
-        ], 8, uo)) : q("", !0),
+          b(t.$slots, "chart-background", {}, void 0, !0)
+        ], 8, co)) : G("", !0),
         ye("g", {
           transform: `translate(${ae.value.x}, ${ae.value.y})`,
-          class: Je({ "wc-finalized": xe.value })
+          class: Ke({ "wc-finalized": Ae.value })
         }, [
-          (F(!0), G(Ot, null, zt(L.value, (o, n) => (F(), G("g", {
+          (S(!0), j(Ot, null, Pt(U.value, (o, n) => (S(), j("g", {
             key: o.id,
             class: "vue-ui-word-cloud-word",
             transform: `translate(${o.x}, ${o.y})`
           }, [
-            o.minX !== void 0 ? (F(), G("rect", {
+            o.minX !== void 0 ? (S(), j("rect", {
               key: 0,
               x: o.minX,
               y: o.minY * 1.25,
@@ -861,10 +878,10 @@ const st = { style: { chart: { backgroundColor: "#1A1A1A", color: "#CCCCCC", tit
               height: o.maxY - o.minY,
               fill: "transparent",
               "pointer-events": "visiblePainted",
-              onMouseover: (i) => $t(o, n),
+              onMouseover: (i) => Ft(o, n),
               onMouseleave: (i) => xt(o, n),
-              onClick: (i) => At(o, n)
-            }, null, 40, ho)) : q("", !0),
+              onClick: (i) => $t(o, n)
+            }, null, 40, mo)) : G("", !0),
             ye("text", {
               fill: o.color,
               "font-weight": e.value.style.chart.words.bold ? "bold" : "normal",
@@ -881,20 +898,20 @@ const st = { style: { chart: { backgroundColor: "#1A1A1A", color: "#CCCCCC", tit
               "stroke-linejoin": "round",
               style: Te(`
                             pointer-events:none;
-                            fill-opacity:${!ue.value || ue.value === o.id || !xe.value ? 1 : e.value.style.chart.words.hoverOpacity} !important;
+                            fill-opacity:${!ue.value || ue.value === o.id || !Ae.value ? 1 : e.value.style.chart.words.hoverOpacity} !important;
                         `)
-            }, Ee(o.name), 13, mo)
-          ], 8, vo))), 128))
-        ], 10, co),
-        C(t.$slots, "svg", {
+            }, Ee(o.name), 13, fo)
+          ], 8, ho))), 128))
+        ], 10, vo),
+        b(t.$slots, "svg", {
           svg: { height: s.value.height, width: s.value.width }
         }, void 0, !0)
-      ], 10, io)),
-      t.$slots.watermark ? (F(), G("div", fo, [
-        C(t.$slots, "watermark", R(W({ isPrinting: r(Re) || r(We) })), void 0, !0)
-      ])) : q("", !0),
-      r(pt) ? (F(), G("div", po, [
-        C(t.$slots, "reset-action", { reset: r(Se) }, () => [
+      ], 10, uo)),
+      t.$slots.watermark ? (S(), j("div", po, [
+        b(t.$slots, "watermark", B(_({ isPrinting: r(Re) || r(We) })), void 0, !0)
+      ])) : G("", !0),
+      r(gt) ? (S(), j("div", go, [
+        b(t.$slots, "reset-action", { reset: r(Se) }, () => [
           ye("button", {
             "data-cy-reset": "",
             tabindex: "0",
@@ -905,15 +922,15 @@ const st = { style: { chart: { backgroundColor: "#1A1A1A", color: "#CCCCCC", tit
             }),
             onClick: a[0] || (a[0] = (o) => r(Se)(!0))
           }, [
-            Me(r(p), {
+            ze(r(y), {
               name: "refresh",
               stroke: e.value.style.chart.color
             }, null, 8, ["stroke"])
           ], 4)
         ], !0)
-      ])) : q("", !0),
-      Me(r(f), {
-        show: P.value.showTooltip && ve.value,
+      ])) : G("", !0),
+      ze(r(f), {
+        show: p.value.showTooltip && ve.value,
         backgroundColor: e.value.style.chart.tooltip.backgroundColor,
         color: e.value.style.chart.tooltip.color,
         fontSize: e.value.style.chart.tooltip.fontSize,
@@ -923,7 +940,7 @@ const st = { style: { chart: { backgroundColor: "#1A1A1A", color: "#CCCCCC", tit
         backgroundOpacity: e.value.style.chart.tooltip.backgroundOpacity,
         position: e.value.style.chart.tooltip.position,
         offsetY: e.value.style.chart.tooltip.offsetY,
-        parent: k.value,
+        parent: w.value,
         content: Ie.value,
         isCustom: ge.value,
         isFullscreen: ie.value,
@@ -932,29 +949,29 @@ const st = { style: { chart: { backgroundColor: "#1A1A1A", color: "#CCCCCC", tit
         smoothForce: e.value.style.chart.tooltip.smoothForce,
         smoothSnapThreshold: e.value.style.chart.tooltip.smoothSnapThreshold
       }, {
-        "tooltip-before": y(() => [
-          C(t.$slots, "tooltip-before", R(W({ ...De.value })), void 0, !0)
+        "tooltip-before": g(() => [
+          b(t.$slots, "tooltip-before", B(_({ ...De.value })), void 0, !0)
         ]),
-        "tooltip-after": y(() => [
-          C(t.$slots, "tooltip-after", R(W({ ...De.value })), void 0, !0)
+        "tooltip-after": g(() => [
+          b(t.$slots, "tooltip-after", B(_({ ...De.value })), void 0, !0)
         ]),
         _: 3
       }, 8, ["show", "backgroundColor", "color", "fontSize", "borderRadius", "borderColor", "borderWidth", "backgroundOpacity", "position", "offsetY", "parent", "content", "isCustom", "isFullscreen", "smooth", "backdropFilter", "smoothForce", "smoothSnapThreshold"]),
-      t.$slots.source ? (F(), G("div", {
+      t.$slots.source ? (S(), j("div", {
         key: 5,
         ref_key: "source",
         ref: Ce,
         dir: "auto"
       }, [
-        C(t.$slots, "source", {}, void 0, !0)
-      ], 512)) : q("", !0),
-      H.value && e.value.userOptions.buttons.table ? (F(), ce(Pt(pe.value.component), It({ key: 6 }, pe.value.props, {
+        b(t.$slots, "source", {}, void 0, !0)
+      ], 512)) : G("", !0),
+      q.value && e.value.userOptions.buttons.table ? (S(), ce(It(pe.value.component), Dt({ key: 6 }, pe.value.props, {
         ref_key: "tableUnit",
         ref: K,
         onClose: Ge
-      }), Ze({
-        content: y(() => [
-          (F(), ce(r(g), {
+      }), Je({
+        content: g(() => [
+          (S(), ce(r(C), {
             key: `table_${we.value}`,
             colNames: $e.value.colNames,
             head: $e.value.head,
@@ -964,14 +981,14 @@ const st = { style: { chart: { backgroundColor: "#1A1A1A", color: "#CCCCCC", tit
             withCloseButton: !e.value.table.useDialog,
             onClose: Ge
           }, {
-            th: y(({ th: o }) => [
+            th: g(({ th: o }) => [
               ye("div", {
                 innerHTML: o,
                 style: { display: "flex", "align-items": "center" }
-              }, null, 8, go)
+              }, null, 8, bo)
             ]),
-            td: y(({ td: o }) => [
-              Ke(Ee(o.name || o), 1)
+            td: g(({ td: o }) => [
+              Qe(Ee(o.name || o), 1)
             ]),
             _: 1
           }, 8, ["colNames", "head", "body", "config", "title", "withCloseButton"]))
@@ -980,20 +997,20 @@ const st = { style: { chart: { backgroundColor: "#1A1A1A", color: "#CCCCCC", tit
       }, [
         e.value.table.useDialog ? {
           name: "title",
-          fn: y(() => [
-            Ke(Ee(pe.value.title), 1)
+          fn: g(() => [
+            Qe(Ee(pe.value.title), 1)
           ]),
           key: "0"
         } : void 0,
         e.value.table.useDialog ? {
           name: "actions",
-          fn: y(() => [
+          fn: g(() => [
             ye("button", {
               tabindex: "0",
               class: "vue-ui-user-options-button",
-              onClick: a[1] || (a[1] = (o) => ze(e.value.userOptions.callbacks.csv))
+              onClick: a[1] || (a[1] = (o) => Oe(e.value.userOptions.callbacks.csv))
             }, [
-              Me(r(p), {
+              ze(r(y), {
                 name: "excel",
                 stroke: pe.value.props.color
               }, null, 8, ["stroke"])
@@ -1001,16 +1018,16 @@ const st = { style: { chart: { backgroundColor: "#1A1A1A", color: "#CCCCCC", tit
           ]),
           key: "1"
         } : void 0
-      ]), 1040)) : q("", !0),
-      r(w) ? (F(), ce(qt, { key: 7 })) : q("", !0)
-    ], 44, ro));
+      ]), 1040)) : G("", !0),
+      r(A) ? (S(), ce(qt, { key: 7 })) : G("", !0)
+    ], 44, io));
   }
-}, yo = /* @__PURE__ */ ao(bo, [["__scopeId", "data-v-3516630b"]]), Eo = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
+}, Co = /* @__PURE__ */ lo(yo, [["__scopeId", "data-v-7164e284"]]), Bo = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
   __proto__: null,
-  default: yo
+  default: Co
 }, Symbol.toStringTag, { value: "Module" }));
 export {
-  Do as a,
-  Eo as b,
-  yo as v
+  Eo as a,
+  Bo as b,
+  Co as v
 };