vue-data-ui 3.2.8 → 3.3.0

package/dist/{vue-ui-word-cloud-C7TMR4Zq.js → vue-ui-word-cloud-BQSu6kiR.js}

@@ -1,137 +1,138 @@
-import { useCssVars as it, defineAsyncComponent as q, computed as ae, ref as m, toRefs as ut, watch as oe, shallowRef as We, onMounted as rt, onBeforeUnmount as ct, createElementBlock as _, openBlock as k, unref as u, normalizeStyle as ye, createBlock as le, createCommentVNode as W, createVNode as we, createSlots as Xe, withCtx as S, renderSlot as F, normalizeProps as ne, guardReactiveProps as se, normalizeClass as Ee, createElementVNode as ke, Fragment as vt, renderList as dt, toDisplayString as Me, resolveDynamicComponent as mt, mergeProps as ht, createTextVNode as Ue, nextTick as Le } from "vue";
-import { d as ft, t as pt, u as gt } from "./useResponsive-DfdjqQps.js";
-import { c as Ye, t as bt, ai as yt, q as wt, b as kt, p as Ce, o as qe, f as Ge, g as Ct, d as xt, X as $t, x as Tt, y as St, z as Ft } from "./lib-BEpWEyMm.js";
-import { u as Mt, a as je } from "./useNestedProp-BOk-tPdu.js";
-import { u as Pt, B as At } from "./BaseScanner-BgWxam9d.js";
-import { u as Ot } from "./usePrinter-w23K-ezx.js";
-import { u as It } from "./useUserOptionState-BIvW1Kz7.js";
-import { u as zt } from "./useChartAccessibility-9icAAmYg.js";
-import Dt from "./img-DjWwQXVS.js";
-import Nt from "./Title-DG2nloSB.js";
-import { t as _t } from "./themes-Dw-dDudK.js";
-import { u as Bt } from "./usePanZoom-BVca3eMk.js";
-import { _ as Rt } from "./_plugin-vue_export-helper-CHgC5LLL.js";
-function Vt(C, g) {
-  const { width: v, height: h } = C, f = g.getImageData(0, 0, v, h).data;
+import { useCssVars as dt, defineAsyncComponent as j, computed as q, ref as m, toRefs as mt, watch as oe, shallowRef as Ee, onMounted as ht, onBeforeUnmount as pt, createElementBlock as _, openBlock as k, unref as i, normalizeStyle as ye, createBlock as le, createCommentVNode as W, createVNode as we, createSlots as Xe, withCtx as S, renderSlot as F, normalizeProps as ne, guardReactiveProps as se, normalizeClass as Ue, createElementVNode as ke, Fragment as ft, renderList as gt, toDisplayString as Me, resolveDynamicComponent as bt, mergeProps as yt, createTextVNode as Le, nextTick as Ye } from "vue";
+import { d as wt, t as kt, u as Ct } from "./useResponsive-DfdjqQps.js";
+import { c as Ge, t as xt, aj as $t, q as Tt, b as St, p as Ce, o as je, f as qe, g as Ft, d as Mt, X as Pt, x as Ot, y as At, z as It } from "./lib-GIYcnm0E.js";
+import { u as zt, a as He } from "./useNestedProp-mxyyqd0B.js";
+import { u as Dt, B as Nt } from "./BaseScanner-BgWxam9d.js";
+import { u as _t } from "./usePrinter-DYRFiw7X.js";
+import { u as Bt } from "./useSvgExport-B7-Vrjtu.js";
+import { u as Rt } from "./useUserOptionState-BIvW1Kz7.js";
+import { u as Vt } from "./useChartAccessibility-9icAAmYg.js";
+import Wt from "./img-6wPuVVtk.js";
+import Et from "./Title-D17CJXko.js";
+import { t as Xt } from "./themes-Dw-dDudK.js";
+import { u as Ut } from "./usePanZoom-BVca3eMk.js";
+import { _ as Lt } from "./_plugin-vue_export-helper-CHgC5LLL.js";
+function Yt(C, b) {
+  const { width: v, height: h } = C, p = b.getImageData(0, 0, v, h).data;
   let l = v, o = h, s = 0, x = 0, M = !1;
   for (let r = 0; r < h; r += 1)
     for (let y = 0; y < v; y += 1)
-      f[(r * v + y) * 4 + 3] > 1 && (M = !0, y < l && (l = y), y > s && (s = y), r < o && (o = r), r > x && (x = r));
+      p[(r * v + y) * 4 + 3] > 1 && (M = !0, y < l && (l = y), y > s && (s = y), r < o && (o = r), r > x && (x = r));
   return M ? [l, o, s, x] : [0, 0, 0, 0];
 }
-function He({
+function Ze({
   word: C,
-  fontSize: g,
+  fontSize: b,
   pad: v,
   canvas: h,
   ctx: d,
-  svg: f
+  svg: p
 }) {
-  d.save(), d.font = `${f.style && f.style.bold ? "bold " : ""}${g}px Arial`;
-  const l = d.measureText(C.name), o = Math.ceil(l.width) + 2 + (v ? v * 2 : 0), s = Math.ceil(g) + 2 + (v ? v * 2 : 0);
-  h.width = o, h.height = s, d.clearRect(0, 0, o, s), d.font = `${f.style && f.style.bold ? "bold " : ""}${g}px Arial`, d.textAlign = "center", d.textBaseline = "middle", d.fillStyle = "black", d.fillText(C.name, o / 2, s / 2);
+  d.save(), d.font = `${p.style && p.style.bold ? "bold " : ""}${b}px Arial`;
+  const l = d.measureText(C.name), o = Math.ceil(l.width) + 2 + (v ? v * 2 : 0), s = Math.ceil(b) + 2 + (v ? v * 2 : 0);
+  h.width = o, h.height = s, d.clearRect(0, 0, o, s), d.font = `${p.style && p.style.bold ? "bold " : ""}${b}px Arial`, d.textAlign = "center", d.textBaseline = "middle", d.fillStyle = "black", d.fillText(C.name, o / 2, s / 2);
   const M = d.getImageData(0, 0, o, s).data, r = [];
   for (let B = 0; B < s; B += 1)
     for (let U = 0; U < o; U += 1)
       M[(B * o + U) * 4 + 3] > 1 && r.push([U, B]);
-  const [y, X, E, w] = Vt(h, d);
-  return d.restore(), { w: o, h: s, wordMask: r, minX: y, minY: X, maxX: E, maxY: w };
+  const [y, E, X, w] = Yt(h, d);
+  return d.restore(), { w: o, h: s, wordMask: r, minX: y, minY: E, maxX: X, maxY: w };
 }
-function Ze({ mask: C, maskW: g, maskH: v, wx: h, wy: d, wordMask: f }) {
-  for (let l = 0; l < f.length; l += 1) {
-    const o = h + f[l][0], s = d + f[l][1];
-    if (o < 0 || s < 0 || o >= g || s >= v || C[s * g + o]) return !1;
+function Je({ mask: C, maskW: b, maskH: v, wx: h, wy: d, wordMask: p }) {
+  for (let l = 0; l < p.length; l += 1) {
+    const o = h + p[l][0], s = d + p[l][1];
+    if (o < 0 || s < 0 || o >= b || s >= v || C[s * b + o]) return !1;
   }
   return !0;
 }
-function Je({ mask: C, maskW: g, maskH: v, wx: h, wy: d, wordMask: f }) {
-  for (let l = 0; l < f.length; l += 1) {
-    const o = h + f[l][0], s = d + f[l][1];
-    o >= 0 && s >= 0 && o < g && s < v && (C[s * g + o] = 1);
+function Ke({ mask: C, maskW: b, maskH: v, wx: h, wy: d, wordMask: p }) {
+  for (let l = 0; l < p.length; l += 1) {
+    const o = h + p[l][0], s = d + p[l][1];
+    o >= 0 && s >= 0 && o < b && s < v && (C[s * b + o] = 1);
   }
 }
-function Wt({ wordMask: C, w: g, h: v, dilation: h }) {
-  const d = new Set(C.map(([l, o]) => `${l},${o}`)), f = new Set(d);
+function Gt({ wordMask: C, w: b, h: v, dilation: h }) {
+  const d = new Set(C.map(([l, o]) => `${l},${o}`)), p = new Set(d);
   for (let [l, o] of C)
     for (let s = -h; s <= h; s += 1)
       for (let x = -h; x <= h; x += 1) {
         if (s === 0 && x === 0) continue;
         const M = l + s, r = o + x;
-        M >= 0 && M < g && r >= 0 && r < v && f.add(`${M},${r}`);
+        M >= 0 && M < b && r >= 0 && r < v && p.add(`${M},${r}`);
       }
-  return Array.from(f).map((l) => l.split(",").map(Number));
+  return Array.from(p).map((l) => l.split(",").map(Number));
 }
-function Xt({
+function jt({
   words: C,
-  proximity: g = 0,
+  proximity: b = 0,
   svg: v,
   strictPixelPadding: h
 }) {
-  const { width: d, height: f } = v, l = Math.round(d), o = Math.round(f), s = 1, x = v.minFontSize, M = Math.min(v.maxFontSize, 100), r = C.map(($) => $.value), y = Math.min(...r), X = Math.max(...r), E = new Uint8Array(l * o), w = document.createElement("canvas"), B = w.getContext("2d", { willReadFrequently: !0 });
+  const { width: d, height: p } = v, l = Math.round(d), o = Math.round(p), s = 1, x = v.minFontSize, M = Math.min(v.maxFontSize, 100), r = C.map(($) => $.value), y = Math.min(...r), E = Math.max(...r), X = new Uint8Array(l * o), w = document.createElement("canvas"), B = w.getContext("2d", { willReadFrequently: !0 });
   w.width = l, w.height = o;
-  const U = 6, me = 2, he = 2, ie = 1, Y = Math.floor(l / 2), K = Math.floor(o / 2), e = [...C].sort(($, R) => R.value - $.value), ue = [];
+  const U = 6, me = 2, he = 2, ue = 1, Y = Math.floor(l / 2), Q = Math.floor(o / 2), e = [...C].sort(($, R) => R.value - $.value), ie = [];
   for (const $ of e) {
     let R = x;
-    X !== y && (R = ($.value - y) / (X - y) * (M - x) + x), R = Math.max(x, Math.min(M, R));
-    let A = !1, I = R;
-    for (; !A && I >= s; ) {
-      let { w: O, h: z, wordMask: V, minX: G, minY: j, maxX: H, maxY: Z } = He({
+    E !== y && (R = ($.value - y) / (E - y) * (M - x) + x), R = Math.max(x, Math.min(M, R));
+    let O = !1, I = R;
+    for (; !O && I >= s; ) {
+      let { w: A, h: z, wordMask: V, minX: G, minY: H, maxX: Z, maxY: J } = Ze({
         word: $,
         fontSize: I,
-        pad: g,
+        pad: b,
         canvas: w,
         ctx: B,
         svg: v
       });
-      h && (V = Wt({ wordMask: V, w: O, h: z, dilation: 1 }));
+      h && (V = Gt({ wordMask: V, w: A, h: z, dilation: 1 }));
       let D = 0, L = 0;
-      for (; D < Math.max(l, o) && !A && L < 1e4; ) {
-        for (let i = 0; i < 360; i += U) {
+      for (; D < Math.max(l, o) && !O && L < 1e4; ) {
+        for (let u = 0; u < 360; u += U) {
           L += 1;
-          const P = Math.round(Y + D * Math.cos(i * Math.PI / 180) - O / 2), p = Math.round(K + D * Math.sin(i * Math.PI / 180) - z / 2);
-          if (!(P < 0 || p < 0 || P + O > l || p + z > o) && Ze({ mask: E, maskW: l, maskH: o, wx: P, wy: p, wordMask: V })) {
-            ue.push({ ...$, x: P - l / 2, y: p - o / 2, fontSize: I, width: O, height: z, angle: 0, minX: G, minY: j, maxX: H, maxY: Z }), Je({ mask: E, maskW: l, maskH: o, wx: P, wy: p, wordMask: V }), A = !0;
+          const P = Math.round(Y + D * Math.cos(u * Math.PI / 180) - A / 2), f = Math.round(Q + D * Math.sin(u * Math.PI / 180) - z / 2);
+          if (!(P < 0 || f < 0 || P + A > l || f + z > o) && Je({ mask: X, maskW: l, maskH: o, wx: P, wy: f, wordMask: V })) {
+            ie.push({ ...$, x: P - l / 2, y: f - o / 2, fontSize: I, width: A, height: z, angle: 0, minX: G, minY: H, maxX: Z, maxY: J }), Ke({ mask: X, maskW: l, maskH: o, wx: P, wy: f, wordMask: V }), O = !0;
             break;
           }
         }
         D += me;
       }
-      A || (I -= 1);
+      O || (I -= 1);
     }
-    if (!A && I < s) {
+    if (!O && I < s) {
       I = s;
-      const { w: O, h: z, wordMask: V, minX: G, minY: j, maxX: H, maxY: Z } = He({
+      const { w: A, h: z, wordMask: V, minX: G, minY: H, maxX: Z, maxY: J } = Ze({
         word: $,
         fontSize: I,
-        pad: g,
+        pad: b,
         canvas: w,
         ctx: B,
         svg: v
       });
       let D = 0, L = 0;
-      for (; D < Math.max(l, o) && !A && L < 25e3; ) {
-        for (let i = 0; i < 360; i += he) {
+      for (; D < Math.max(l, o) && !O && L < 25e3; ) {
+        for (let u = 0; u < 360; u += he) {
           L += 1;
-          const P = Math.round(Y + D * Math.cos(i * Math.PI / 180) - O / 2), p = Math.round(K + D * Math.sin(i * Math.PI / 180) - z / 2);
-          if (!(P < 0 || p < 0 || P + O > l || p + z > o) && Ze({ mask: E, maskW: l, maskH: o, wx: P, wy: p, wordMask: V })) {
-            ue.push({ ...$, x: P - l / 2, y: p - o / 2, fontSize: I, width: O, height: z, angle: 0, minX: G, minY: j, maxX: H, maxY: Z }), Je({ mask: E, maskW: l, maskH: o, wx: P, wy: p, wordMask: V }), A = !0;
+          const P = Math.round(Y + D * Math.cos(u * Math.PI / 180) - A / 2), f = Math.round(Q + D * Math.sin(u * Math.PI / 180) - z / 2);
+          if (!(P < 0 || f < 0 || P + A > l || f + z > o) && Je({ mask: X, maskW: l, maskH: o, wx: P, wy: f, wordMask: V })) {
+            ie.push({ ...$, x: P - l / 2, y: f - o / 2, fontSize: I, width: A, height: z, angle: 0, minX: G, minY: H, maxX: Z, maxY: J }), Ke({ mask: X, maskW: l, maskH: o, wx: P, wy: f, wordMask: V }), O = !0;
             break;
           }
         }
-        D += ie;
+        D += ue;
       }
     }
   }
-  return ue.sort(($, R) => R.fontSize - $.fontSize);
+  return ie.sort(($, R) => R.fontSize - $.fontSize);
 }
-const Et = ["id"], Ut = ["xmlns", "viewBox"], Lt = ["width", "height"], Yt = ["transform"], qt = ["x", "y", "width", "height", "onMouseover", "onMouseleave", "onClick"], Gt = ["fill", "font-weight", "x", "y", "font-size", "transform"], jt = {
+const qt = ["id"], Ht = ["xmlns", "viewBox"], Zt = ["width", "height"], Jt = ["transform"], Kt = ["x", "y", "width", "height", "onMouseover", "onMouseleave", "onClick"], Qt = ["fill", "font-weight", "x", "y", "font-size", "transform"], ea = {
   key: 3,
   class: "vue-data-ui-watermark"
-}, Ht = {
+}, ta = {
   key: 4,
   "data-dom-to-png-ignore": "",
   class: "reset-wrapper"
-}, Zt = ["innerHTML"], Jt = {
+}, aa = ["innerHTML"], oa = {
   __name: "vue-ui-word-cloud",
   props: {
     config: {
@@ -147,21 +148,21 @@ const Et = ["id"], Ut = ["xmlns", "viewBox"], Lt = ["width", "height"], Yt = ["t
       }
     }
   },
-  setup(C, { expose: g }) {
-    it((t) => ({
-      v555a2310: t.slicerColor
+  setup(C, { expose: b }) {
+    dt((t) => ({
+      v47a92ace: t.slicerColor
     }));
-    const v = q(() => import("./Tooltip-BOXz8skU.js")), h = q(() => import("./BaseIcon-Bz-1GQhu.js")), d = q(() => import("./vue-ui-accordion-CDIzGCG1.js")), f = q(() => import("./DataTable-BvjacRbw.js")), l = q(() => import("./PenAndPaper-CR8q353D.js")), o = q(() => import("./UserOptions-DsTgvAok.js")), s = q(() => import("./PackageVersion-C40g0Rfc.js")), x = q(() => import("./BaseDraggableDialog-CHhZIht2.js")), { vue_ui_word_cloud: M } = Mt(), r = C, y = ae({
+    const v = j(() => import("./Tooltip-CtVdvbZi.js")), h = j(() => import("./BaseIcon-CtqN7W_g.js")), d = j(() => import("./vue-ui-accordion-Dch9YrCi.js")), p = j(() => import("./DataTable-BeI6gYJX.js")), l = j(() => import("./PenAndPaper-BxbYiPy4.js")), o = j(() => import("./UserOptions-B3vCIe-u.js")), s = j(() => import("./PackageVersion-C9oklnuy.js")), x = j(() => import("./BaseDraggableDialog-q3pgSDTz.js")), { vue_ui_word_cloud: M } = zt(), r = C, y = q({
       get() {
         return !!r.dataset && r.dataset.length;
       },
       set(t) {
         return t;
       }
-    }), X = m(Ye()), E = m(0), w = m(null), B = m(null), U = m(null), me = m(0), he = m(0), ie = m(!1), Y = m(null), K = m(null), e = m(j()), { loading: ue, FINAL_DATASET: $, manualLoading: R } = Pt({
-      ...ut(r),
+    }), E = m(Ge()), X = m(0), w = m(null), B = m(null), U = m(null), me = m(0), he = m(0), ue = m(!1), Y = m(null), Q = m(null), e = m(H()), { loading: ie, FINAL_DATASET: $, manualLoading: R } = Dt({
+      ...mt(r),
       FINAL_CONFIG: e,
-      prepareConfig: j,
+      prepareConfig: H,
       skeletonDataset: [
         { name: "Lorem", value: 6 },
         { name: "ipsum", value: 3 },
@@ -212,7 +213,7 @@ const Et = ["id"], Ut = ["xmlns", "viewBox"], Lt = ["width", "height"], Yt = ["t
         { name: "fames", value: 1 },
         { name: "ante", value: 1 }
       ],
-      skeletonConfig: bt({
+      skeletonConfig: xt({
         defaultConfig: e.value,
         userConfig: {
           userOptions: { show: !1 },
@@ -232,81 +233,81 @@ const Et = ["id"], Ut = ["xmlns", "viewBox"], Lt = ["width", "height"], Yt = ["t
           }
         }
       })
-    }), A = m(I());
+    }), O = m(I());
     function I() {
-      return typeof $.value == "string" ? yt($.value) : $.value.map((t, n) => ({
+      return typeof $.value == "string" ? $t($.value) : $.value.map((t, n) => ({
         ...t,
-        value: wt(t.value)
+        value: Tt(t.value)
       }));
     }
     oe(() => r.dataset, () => {
-      A.value = I(), xe(), Z();
+      O.value = I(), xe(), J();
     });
-    const { userOptionsVisible: O, setUserOptionsVisibility: z, keepUserOptionState: V } = It({ config: e.value }), { svgRef: G } = zt({ config: e.value.style.chart.title });
-    function j() {
-      const t = je({
+    const { userOptionsVisible: A, setUserOptionsVisibility: z, keepUserOptionState: V } = Rt({ config: e.value }), { svgRef: G } = Vt({ config: e.value.style.chart.title });
+    function H() {
+      const t = He({
         userConfig: r.config,
         defaultConfig: M
       });
       return t.theme ? {
-        ...je({
-          userConfig: _t.vue_ui_word_cloud[t.theme] || r.config,
+        ...He({
+          userConfig: Xt.vue_ui_word_cloud[t.theme] || r.config,
           defaultConfig: t
         }),
-        customPalette: kt[t.theme] || Ce
+        customPalette: St[t.theme] || Ce
       } : t;
     }
-    const H = m({ x: 0, y: 0 });
-    function Z() {
+    const Z = m({ x: 0, y: 0 });
+    function J() {
       const t = {
         x: 0,
         y: 0,
-        width: Math.max(10, i.value.width),
-        height: Math.max(10, i.value.height)
+        width: Math.max(10, u.value.width),
+        height: Math.max(10, u.value.height)
       };
-      at(t), H.value = {
+      ot(t), Z.value = {
         x: t.x + t.width / 2,
         y: t.y + t.height / 2
       }, be();
     }
-    const D = ft(() => {
+    const D = wt(() => {
       xe();
     }, 10), L = m(!1);
     oe(() => L.value, (t) => {
-      t === !1 && (D(), Z());
+      t === !1 && (D(), J());
     }), oe(() => r.config, (t) => {
-      e.value = j(), O.value = !e.value.userOptions.showOnChartHover, Ae(), me.value += 1, he.value += 1, T.value.showTable = e.value.table.show, T.value.showTooltip = e.value.style.chart.tooltip.show;
+      e.value = H(), A.value = !e.value.userOptions.showOnChartHover, Oe(), me.value += 1, he.value += 1, T.value.showTable = e.value.table.show, T.value.showTooltip = e.value.style.chart.tooltip.show;
     }, { deep: !0 });
-    const i = m({
+    const u = m({
       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,
       bold: e.value.style.chart.words.bold
-    }), P = pt(() => {
+    }), P = kt(() => {
       L.value = !0;
-      const { width: t, height: n } = gt({
+      const { width: t, height: n } = Ct({
         chart: w.value,
         title: e.value.style.chart.title.text ? B.value : null,
         source: U.value
       });
       requestAnimationFrame(async () => {
-        i.value.width = Math.max(10, t), i.value.height = Math.max(10, n - 12), await Le(), L.value = !1;
+        u.value.width = Math.max(10, t), u.value.height = Math.max(10, n - 12), await Ye(), L.value = !1;
       });
-    }), p = We(null), Q = We(null);
-    rt(Ae);
-    const Pe = ae(() => !!e.value.debug);
-    function Ae() {
-      qe(r.dataset) ? Ge({
+    }), f = Ee(null), ee = Ee(null);
+    ht(Oe);
+    const Pe = q(() => !!e.value.debug);
+    function Oe() {
+      je(r.dataset) ? qe({
         componentName: "VueUiWordCloud",
         type: "dataset",
         debug: Pe.value
-      }) : A.value.forEach((t, n) => {
-        Ct({
+      }) : O.value.forEach((t, n) => {
+        Ft({
           datasetObject: t,
           requiredAttributes: ["name", "value"]
         }).forEach((a) => {
-          y.value = !1, Ge({
+          y.value = !1, qe({
             componentName: "VueUiWordCloud",
             type: "datasetSerieAttribute",
             property: a,
@@ -314,13 +315,13 @@ const Et = ["id"], Ut = ["xmlns", "viewBox"], Lt = ["width", "height"], Yt = ["t
             debug: Pe.value
           });
         });
-      }), qe(r.dataset) || (R.value = e.value.loading), e.value.responsive && (p.value && (Q.value && p.value.unobserve(Q.value), p.value.disconnect()), p.value = new ResizeObserver(P), Q.value = w.value.parentNode, p.value.observe(Q.value)), Z();
+      }), je(r.dataset) || (R.value = e.value.loading), e.value.responsive && (f.value && (ee.value && f.value.unobserve(ee.value), f.value.disconnect()), f.value = new ResizeObserver(P), ee.value = w.value.parentNode, f.value.observe(ee.value)), J();
     }
-    ct(() => {
-      p.value && (Q.value && p.value.unobserve(Q.value), p.value.disconnect());
+    pt(() => {
+      f.value && (ee.value && f.value.unobserve(ee.value), f.value.disconnect());
     });
-    const { isPrinting: Oe, isImaging: Ie, generatePdf: ze, generateImage: De } = Ot({
-      elementId: `wordCloud_${X.value}`,
+    const { isPrinting: Ae, isImaging: Ie, generatePdf: ze, generateImage: De } = _t({
+      elementId: `wordCloud_${E.value}`,
       fileName: e.value.style.chart.title.text || "vue-ui-word-cloud",
       options: e.value.userOptions.print
     }), T = m({
@@ -333,37 +334,37 @@ const Et = ["id"], Ut = ["xmlns", "viewBox"], Lt = ["width", "height"], Yt = ["t
         showTooltip: e.value.style.chart.tooltip.show
       };
     }, { immediate: !0 });
-    function Ke(t, n, a = "Arial") {
-      const b = document.createElement("canvas").getContext("2d");
-      return b.font = `${n}px ${e.value.style.chart.words.bold ? "bold" : "normal"} ${a}`, {
-        width: b.measureText(t).width + e.value.style.chart.words.proximity,
+    function Qe(t, n, a = "Arial") {
+      const g = document.createElement("canvas").getContext("2d");
+      return g.font = `${n}px ${e.value.style.chart.words.bold ? "bold" : "normal"} ${a}`, {
+        width: g.measureText(t).width + e.value.style.chart.words.proximity,
         height: n
       };
     }
     const re = m([]);
     oe(() => r.dataset, xe, { immediate: !0 });
     function xe() {
-      const t = [...A.value].map((b) => b.value), n = Math.max(...t), a = Math.min(...t), c = [...A.value].map((b, N) => {
-        let J = (b.value - a) / (n - a) * (i.value.maxFontSize - i.value.minFontSize) + i.value.minFontSize;
-        J = isNaN(J) ? i.value.minFontSize : J;
-        const Ve = Ke(b.name, J);
+      const t = [...O.value].map((g) => g.value), n = Math.max(...t), a = Math.min(...t), c = [...O.value].map((g, N) => {
+        let K = (g.value - a) / (n - a) * (u.value.maxFontSize - u.value.minFontSize) + u.value.minFontSize;
+        K = isNaN(K) ? u.value.minFontSize : K;
+        const We = Qe(g.name, K);
         return {
-          ...b,
-          id: Ye(),
-          fontSize: J,
-          width: Ve.width,
-          height: Ve.height,
+          ...g,
+          id: Ge(),
+          fontSize: K,
+          width: We.width,
+          height: We.height,
           color: e.value.style.chart.words.usePalette ? e.value.customPalette[N] || e.value.customPalette[N % e.value.customPalette.length] || Ce[N] || Ce[N % Ce.length] : e.value.style.chart.words.color
         };
       });
-      re.value = Xt({
+      re.value = jt({
         words: c,
-        svg: i.value,
+        svg: u.value,
         proximity: e.value.style.chart.words.proximity,
         strictPixelPadding: e.value.strictPixelPadding
       });
     }
-    const fe = ae(() => {
+    const pe = q(() => {
       const t = re.value.map((a) => ({
         name: a.name,
         color: a.color
@@ -371,25 +372,25 @@ const Et = ["id"], Ut = ["xmlns", "viewBox"], Lt = ["width", "height"], Yt = ["t
       return { head: t, body: n };
     });
     function $e(t = null) {
-      Le(() => {
-        const n = fe.value.head.map((b, N) => [[
-          b.name
-        ], [fe.value.body[N]]]), a = [[e.value.style.chart.title.text], [e.value.style.chart.title.subtitle.text], [[""], [e.value.table.columnNames.value]]].concat(n), c = Tt(a);
-        t ? t(c) : St({ csvContent: c, title: e.value.style.chart.title.text || "vue-ui-word-cloud" });
+      Ye(() => {
+        const n = pe.value.head.map((g, N) => [[
+          g.name
+        ], [pe.value.body[N]]]), a = [[e.value.style.chart.title.text], [e.value.style.chart.title.subtitle.text], [[""], [e.value.table.columnNames.value]]].concat(n), c = Ot(a);
+        t ? t(c) : At({ csvContent: c, title: e.value.style.chart.title.text || "vue-ui-word-cloud" });
       });
     }
-    const pe = ae(() => {
+    const fe = q(() => {
       const t = [
         e.value.table.columnNames.series,
         e.value.table.columnNames.value
-      ], n = fe.value.head.map((b, N) => {
-        const J = xt({ p: e.value.table.td.prefix, v: fe.value.body[N], s: e.value.table.td.suffix, r: e.value.table.td.roundingValue });
+      ], n = pe.value.head.map((g, N) => {
+        const K = Mt({ p: e.value.table.td.prefix, v: pe.value.body[N], s: e.value.table.td.suffix, r: e.value.table.td.roundingValue });
         return [
           {
-            color: b.color,
-            name: b.name
+            color: g.color,
+            name: g.name
           },
-          J
+          K
         ];
       }), a = {
         th: {
@@ -413,11 +414,11 @@ const Et = ["id"], Ut = ["xmlns", "viewBox"], Lt = ["width", "height"], Yt = ["t
         body: n,
         config: a
       };
-    }), ee = m(!1);
+    }), te = m(!1);
     function Ne(t) {
-      ee.value = t, E.value += 1;
+      te.value = t, X.value += 1;
     }
-    function Qe() {
+    function et() {
       return re.value;
     }
     function _e() {
@@ -430,17 +431,17 @@ const Et = ["id"], Ut = ["xmlns", "viewBox"], Lt = ["width", "height"], Yt = ["t
     function Te() {
       ce.value = !ce.value;
     }
-    const et = ae(() => !ce.value && e.value.style.chart.zoom.show), { viewBox: ge, resetZoom: be, isZoom: tt, setInitialViewBox: at } = Bt(G, {
+    const tt = q(() => !ce.value && e.value.style.chart.zoom.show), { viewBox: ge, resetZoom: be, isZoom: at, setInitialViewBox: ot } = Ut(G, {
       x: 0,
       y: 0,
-      width: i.value.width <= 0 ? 10 : i.value.width,
-      height: i.value.height <= 0 ? 10 : i.value.height
-    }, 1, et);
-    async function ot({ scale: t = 2 } = {}) {
+      width: u.value.width <= 0 ? 10 : u.value.width,
+      height: u.value.height <= 0 ? 10 : u.value.height
+    }, 1, tt);
+    async function lt({ scale: t = 2 } = {}) {
       if (!w.value) return;
-      const { width: n, height: a } = w.value.getBoundingClientRect(), c = n / a, { imageUri: b, base64: N } = await Dt({ domElement: w.value, base64: !0, img: !0, scale: t });
+      const { width: n, height: a } = w.value.getBoundingClientRect(), c = n / a, { imageUri: g, base64: N } = await Wt({ domElement: w.value, base64: !0, img: !0, scale: t });
       return {
-        imageUri: b,
+        imageUri: g,
         base64: N,
         title: e.value.style.chart.title.text,
         width: n,
@@ -448,7 +449,7 @@ const Et = ["id"], Ut = ["xmlns", "viewBox"], Lt = ["width", "height"], Yt = ["t
         aspectRatio: c
       };
     }
-    const ve = ae(() => {
+    const ve = q(() => {
       const t = e.value.table.useDialog && !e.value.table.show, n = T.value.showTable;
       return {
         component: t ? x : d,
@@ -458,7 +459,7 @@ const Et = ["id"], Ut = ["xmlns", "viewBox"], Lt = ["width", "height"], Yt = ["t
           color: e.value.table.th.color,
           headerColor: e.value.table.th.color,
           headerBg: e.value.table.th.backgroundColor,
-          isFullscreen: ee.value,
+          isFullscreen: te.value,
           fullscreenParent: w.value,
           forcedWidth: Math.min(500, window.innerWidth * 0.8)
         } : {
@@ -482,32 +483,45 @@ const Et = ["id"], Ut = ["xmlns", "viewBox"], Lt = ["width", "height"], Yt = ["t
       e.value.table.show || (t && e.value.table.useDialog && Y.value ? Y.value.open() : "close" in Y.value && Y.value.close());
     });
     function Re() {
-      T.value.showTable = !1, K.value && K.value.setTableIconState(!1);
+      T.value.showTable = !1, Q.value && Q.value.setTableIconState(!1);
     }
-    g({
-      getData: Qe,
-      getImage: ot,
+    const nt = q(() => e.value.style.chart.backgroundColor), st = q(() => e.value.style.chart.title), { exportSvg: ut, getSvg: it } = Bt({
+      svg: G,
+      title: st,
+      backgroundColor: nt
+    });
+    async function Ve({ isCb: t }) {
+      if (t) {
+        const { blob: n, url: a, text: c, dataUrl: g } = await it();
+        e.value.userOptions.callbacks.svg({ blob: n, url: a, text: c, dataUrl: g });
+      } else
+        ut();
+    }
+    b({
+      getData: et,
+      getImage: lt,
       generateCsv: $e,
       generatePdf: ze,
       generateImage: De,
+      generateSvg: Ve,
       resetZoom: be,
       toggleTable: _e,
       toggleTooltip: Be,
       toggleAnnotator: Te,
       toggleFullscreen: Ne
     });
-    const te = m(null), de = m(!1), Se = m(""), Fe = m(null);
-    function lt(t, n) {
-      te.value = null, ie.value = !1, e.value.events.datapointLeave && e.value.events.datapointLeave({ datapoint: t, seriesIndex: n });
+    const ae = m(null), de = m(!1), Se = m(""), Fe = m(null);
+    function rt(t, n) {
+      ae.value = null, ue.value = !1, e.value.events.datapointLeave && e.value.events.datapointLeave({ datapoint: t, seriesIndex: n });
     }
-    function nt(t, n) {
+    function ct(t, n) {
       e.value.events.datapointClick && e.value.events.datapointClick({ datapoint: t, seriesIndex: n });
     }
-    function st(t, n) {
+    function vt(t, n) {
       if (e.value.events.datapointEnter && e.value.events.datapointEnter({ datapoint: t, seriesIndex: n }), !T.value.showTooltip) return;
-      te.value = t.id, Fe.value = { datapoint: t, config: e.value };
+      ae.value = t.id, Fe.value = { datapoint: t, config: e.value };
       const a = e.value.style.chart.tooltip.customFormat;
-      if (de.value = !1, Ft(a))
+      if (de.value = !1, It(a))
         try {
           const c = a({
             datapoint: t,
@@ -521,20 +535,20 @@ const Et = ["id"], Ut = ["xmlns", "viewBox"], Lt = ["width", "height"], Yt = ["t
         let c = `<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>`;
         Se.value = `<div dir="auto" style="display:flex; gap:4px; align-items:center; jsutify-content:center;">${c}</div>`;
       }
-      ie.value = !0;
+      ue.value = !0;
     }
     return (t, n) => (k(), _("div", {
       class: "vue-data-ui-component vue-ui-word-cloud",
       ref_key: "wordCloudChart",
       ref: w,
-      id: `wordCloud_${X.value}`,
+      id: `wordCloud_${E.value}`,
       style: ye(`width: 100%; font-family:${e.value.style.fontFamily};background:${e.value.style.chart.backgroundColor};${e.value.responsive ? "height:100%" : ""}`),
-      onMouseenter: n[2] || (n[2] = () => u(z)(!0)),
-      onMouseleave: n[3] || (n[3] = () => u(z)(!1))
+      onMouseenter: n[2] || (n[2] = () => i(z)(!0)),
+      onMouseleave: n[3] || (n[3] = () => i(z)(!1))
     }, [
-      e.value.userOptions.buttons.annotator ? (k(), le(u(l), {
+      e.value.userOptions.buttons.annotator ? (k(), le(i(l), {
         key: 0,
-        svgRef: u(G),
+        svgRef: i(G),
         backgroundColor: e.value.style.chart.backgroundColor,
         color: e.value.style.chart.color,
         active: ce.value,
@@ -546,7 +560,7 @@ const Et = ["id"], Ut = ["xmlns", "viewBox"], Lt = ["width", "height"], Yt = ["t
         ref: B,
         style: "width:100%;background:transparent;padding-bottom:24px"
       }, [
-        (k(), le(Nt, {
+        (k(), le(Et, {
           key: `title_${me.value}`,
           config: {
             title: {
@@ -558,21 +572,22 @@ const Et = ["id"], Ut = ["xmlns", "viewBox"], Lt = ["width", "height"], Yt = ["t
           }
         }, null, 8, ["config"]))
       ], 512)) : W("", !0),
-      e.value.userOptions.show && y.value && (u(V) || u(O)) ? (k(), le(u(o), {
+      e.value.userOptions.show && y.value && (i(V) || i(A)) ? (k(), le(i(o), {
         ref_key: "userOptionsRef",
-        ref: K,
-        key: `user_option_${E.value}`,
+        ref: Q,
+        key: `user_option_${X.value}`,
         backgroundColor: e.value.style.chart.backgroundColor,
         color: e.value.style.chart.color,
-        isPrinting: u(Oe),
-        isImaging: u(Ie),
-        uid: X.value,
+        isPrinting: i(Ae),
+        isImaging: i(Ie),
+        uid: E.value,
         hasPdf: e.value.userOptions.buttons.pdf,
         hasXls: e.value.userOptions.buttons.csv,
         hasImg: e.value.userOptions.buttons.img,
+        hasSvg: e.value.userOptions.buttons.svg,
         hasTable: e.value.userOptions.buttons.table,
         hasFullscreen: e.value.userOptions.buttons.fullscreen,
-        isFullscreen: ee.value,
+        isFullscreen: te.value,
         titles: { ...e.value.userOptions.buttonTitles },
         chartElement: w.value,
         position: e.value.userOptions.position,
@@ -584,14 +599,15 @@ const Et = ["id"], Ut = ["xmlns", "viewBox"], Lt = ["width", "height"], Yt = ["t
         printScale: e.value.userOptions.print.scale,
         tableDialog: e.value.table.useDialog,
         onToggleFullscreen: Ne,
-        onGeneratePdf: u(ze),
+        onGeneratePdf: i(ze),
         onGenerateCsv: $e,
-        onGenerateImage: u(De),
+        onGenerateImage: i(De),
+        onGenerateSvg: Ve,
         onToggleTable: _e,
         onToggleTooltip: Be,
         onToggleAnnotator: Te,
         style: ye({
-          visibility: u(V) ? u(O) ? "visible" : "hidden" : "visible"
+          visibility: i(V) ? i(A) ? "visible" : "hidden" : "visible"
         })
       }, Xe({ _: 2 }, [
         t.$slots.menuIcon ? {
@@ -643,32 +659,32 @@ const Et = ["id"], Ut = ["xmlns", "viewBox"], Lt = ["width", "height"], Yt = ["t
           ]),
           key: "6"
         } : void 0
-      ]), 1032, ["backgroundColor", "color", "isPrinting", "isImaging", "uid", "hasPdf", "hasXls", "hasImg", "hasTable", "hasFullscreen", "isFullscreen", "titles", "chartElement", "position", "hasTooltip", "isTooltip", "hasAnnotator", "isAnnotation", "callbacks", "printScale", "tableDialog", "onGeneratePdf", "onGenerateImage", "style"])) : W("", !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"])) : W("", !0),
       (k(), _("svg", {
         ref_key: "svgRef",
         ref: G,
-        class: Ee({ "vue-data-ui-fullscreen--on": ee.value, "vue-data-ui-fulscreen--off": !ee.value }),
-        xmlns: u($t),
-        viewBox: `${u(ge).x} ${u(ge).y} ${u(ge).width} ${u(ge).height}`,
+        class: Ue({ "vue-data-ui-fullscreen--on": te.value, "vue-data-ui-fulscreen--off": !te.value }),
+        xmlns: i(Pt),
+        viewBox: `${i(ge).x} ${i(ge).y} ${i(ge).width} ${i(ge).height}`,
         style: "overflow:hidden;background:transparent;"
       }, [
-        we(u(s)),
+        we(i(s)),
         t.$slots["chart-background"] ? (k(), _("foreignObject", {
           key: 0,
           x: 0,
           y: 0,
-          width: i.value.width <= 0 ? 10 : i.value.width,
-          height: i.value.height <= 0 ? 10 : i.value.height,
+          width: u.value.width <= 0 ? 10 : u.value.width,
+          height: u.value.height <= 0 ? 10 : u.value.height,
           style: {
             pointerEvents: "none"
           }
         }, [
           F(t.$slots, "chart-background", {}, void 0, !0)
-        ], 8, Lt)) : W("", !0),
+        ], 8, Zt)) : W("", !0),
         ke("g", {
-          transform: `translate(${H.value.x}, ${H.value.y})`
+          transform: `translate(${Z.value.x}, ${Z.value.y})`
         }, [
-          (k(!0), _(vt, null, dt(re.value, (a, c) => (k(), _("g", null, [
+          (k(!0), _(ft, null, gt(re.value, (a, c) => (k(), _("g", null, [
             a.minX !== void 0 ? (k(), _("rect", {
               key: 0,
               x: a.x + a.minX,
@@ -677,10 +693,10 @@ const Et = ["id"], Ut = ["xmlns", "viewBox"], Lt = ["width", "height"], Yt = ["t
               height: a.maxY - a.minY,
               fill: "transparent",
               "pointer-events": "visiblePainted",
-              onMouseover: (b) => st(a, c),
-              onMouseleave: (b) => lt(a, c),
-              onClick: (b) => nt(a, c)
-            }, null, 40, qt)) : W("", !0),
+              onMouseover: (g) => vt(a, c),
+              onMouseleave: (g) => rt(a, c),
+              onClick: (g) => ct(a, c)
+            }, null, 40, Kt)) : W("", !0),
             (k(), _("text", {
               fill: a.color,
               "font-weight": e.value.style.chart.words.bold ? "bold" : "normal",
@@ -689,22 +705,22 @@ const Et = ["id"], Ut = ["xmlns", "viewBox"], Lt = ["width", "height"], Yt = ["t
               y: a.y,
               "font-size": a.fontSize,
               transform: `translate(${a.width / 2}, ${a.height / 2})`,
-              class: Ee({ animated: e.value.useCssAnimation, "word-selected": te.value && te.value === a.id && T.value.showTooltip, "word-not-selected": te.value && te.value !== a.id && T.value.showTooltip }),
+              class: Ue({ animated: e.value.useCssAnimation, "word-selected": ae.value && ae.value === a.id && T.value.showTooltip, "word-not-selected": ae.value && ae.value !== a.id && T.value.showTooltip }),
               "text-anchor": "middle",
               "dominant-baseline": "central",
               style: ye(`animation-delay:${c * e.value.animationDelayMs}ms !important; pointer-events:none;`)
-            }, Me(a.name), 15, Gt))
+            }, Me(a.name), 15, Qt))
           ]))), 256))
-        ], 8, Yt),
+        ], 8, Jt),
         F(t.$slots, "svg", {
-          svg: { height: i.value.height, width: i.value.width }
+          svg: { height: u.value.height, width: u.value.width }
         }, void 0, !0)
-      ], 10, Ut)),
-      t.$slots.watermark ? (k(), _("div", jt, [
-        F(t.$slots, "watermark", ne(se({ isPrinting: u(Oe) || u(Ie) })), void 0, !0)
+      ], 10, Ht)),
+      t.$slots.watermark ? (k(), _("div", ea, [
+        F(t.$slots, "watermark", ne(se({ isPrinting: i(Ae) || i(Ie) })), void 0, !0)
       ])) : W("", !0),
-      u(tt) ? (k(), _("div", Ht, [
-        F(t.$slots, "reset-action", { reset: u(be) }, () => [
+      i(at) ? (k(), _("div", ta, [
+        F(t.$slots, "reset-action", { reset: i(be) }, () => [
           ke("button", {
             "data-cy-reset": "",
             tabindex: "0",
@@ -713,17 +729,17 @@ const Et = ["id"], Ut = ["xmlns", "viewBox"], Lt = ["width", "height"], Yt = ["t
             style: ye({
               background: e.value.style.chart.backgroundColor
             }),
-            onClick: n[0] || (n[0] = (a) => u(be)(!0))
+            onClick: n[0] || (n[0] = (a) => i(be)(!0))
           }, [
-            we(u(h), {
+            we(i(h), {
               name: "refresh",
               stroke: e.value.style.chart.color
             }, null, 8, ["stroke"])
           ], 4)
         ], !0)
       ])) : W("", !0),
-      we(u(v), {
-        show: T.value.showTooltip && ie.value,
+      we(i(v), {
+        show: T.value.showTooltip && ue.value,
         backgroundColor: e.value.style.chart.tooltip.backgroundColor,
         color: e.value.style.chart.tooltip.color,
         fontSize: e.value.style.chart.tooltip.fontSize,
@@ -736,7 +752,7 @@ const Et = ["id"], Ut = ["xmlns", "viewBox"], Lt = ["width", "height"], Yt = ["t
         parent: w.value,
         content: Se.value,
         isCustom: de.value,
-        isFullscreen: ee.value,
+        isFullscreen: te.value,
         smooth: e.value.style.chart.tooltip.smooth,
         backdropFilter: e.value.style.chart.tooltip.backdropFilter,
         smoothForce: e.value.style.chart.tooltip.smoothForce,
@@ -758,18 +774,18 @@ const Et = ["id"], Ut = ["xmlns", "viewBox"], Lt = ["width", "height"], Yt = ["t
       }, [
         F(t.$slots, "source", {}, void 0, !0)
       ], 512)) : W("", !0),
-      y.value && e.value.userOptions.buttons.table ? (k(), le(mt(ve.value.component), ht({ key: 6 }, ve.value.props, {
+      y.value && e.value.userOptions.buttons.table ? (k(), le(bt(ve.value.component), yt({ key: 6 }, ve.value.props, {
         ref_key: "tableUnit",
         ref: Y,
         onClose: Re
       }), Xe({
         content: S(() => [
-          (k(), le(u(f), {
+          (k(), le(i(p), {
             key: `table_${he.value}`,
-            colNames: pe.value.colNames,
-            head: pe.value.head,
-            body: pe.value.body,
-            config: pe.value.config,
+            colNames: fe.value.colNames,
+            head: fe.value.head,
+            body: fe.value.body,
+            config: fe.value.config,
             title: e.value.table.useDialog ? "" : ve.value.title,
             withCloseButton: !e.value.table.useDialog,
             onClose: Re
@@ -778,10 +794,10 @@ const Et = ["id"], Ut = ["xmlns", "viewBox"], Lt = ["width", "height"], Yt = ["t
               ke("div", {
                 innerHTML: a,
                 style: { display: "flex", "align-items": "center" }
-              }, null, 8, Zt)
+              }, null, 8, aa)
             ]),
             td: S(({ td: a }) => [
-              Ue(Me(a.name || a), 1)
+              Le(Me(a.name || a), 1)
             ]),
             _: 1
           }, 8, ["colNames", "head", "body", "config", "title", "withCloseButton"]))
@@ -791,7 +807,7 @@ const Et = ["id"], Ut = ["xmlns", "viewBox"], Lt = ["width", "height"], Yt = ["t
         e.value.table.useDialog ? {
           name: "title",
           fn: S(() => [
-            Ue(Me(ve.value.title), 1)
+            Le(Me(ve.value.title), 1)
           ]),
           key: "0"
         } : void 0,
@@ -803,7 +819,7 @@ const Et = ["id"], Ut = ["xmlns", "viewBox"], Lt = ["width", "height"], Yt = ["t
               class: "vue-ui-user-options-button",
               onClick: n[1] || (n[1] = (a) => $e(e.value.userOptions.callbacks.csv))
             }, [
-              we(u(h), {
+              we(i(h), {
                 name: "excel",
                 stroke: ve.value.props.color
               }, null, 8, ["stroke"])
@@ -812,10 +828,10 @@ const Et = ["id"], Ut = ["xmlns", "viewBox"], Lt = ["width", "height"], Yt = ["t
           key: "1"
         } : void 0
       ]), 1040)) : W("", !0),
-      u(ue) ? (k(), le(At, { key: 7 })) : W("", !0)
-    ], 44, Et));
+      i(ie) ? (k(), le(Nt, { key: 7 })) : W("", !0)
+    ], 44, qt));
   }
-}, va = /* @__PURE__ */ Rt(Jt, [["__scopeId", "data-v-2ed36c3a"]]);
+}, ba = /* @__PURE__ */ Lt(oa, [["__scopeId", "data-v-4c8620b6"]]);
 export {
-  va as default
+  ba as default
 };