vue-data-ui 3.6.0 → 3.7.0

package/dist/vue-ui-molecule-UzQ3o5HW.js

@@ -0,0 +1,782 @@
+import { useCssVars as Do, defineAsyncComponent as f, computed as h, onMounted as Oo, ref as u, toRefs as So, watch as H, nextTick as x, createElementBlock as y, openBlock as d, unref as a, normalizeStyle as M, normalizeClass as De, createBlock as T, createCommentVNode as A, createVNode as O, withCtx as r, renderSlot as i, normalizeProps as p, guardReactiveProps as C, createSlots as Oe, createElementVNode as S, Fragment as Eo, renderList as Bo, resolveDynamicComponent as Po, mergeProps as Io, createTextVNode as Se, toDisplayString as Ee } from "vue";
+import { o as No, g as Lo, c as Be, t as Ro, i as Uo, p as Pe, j as Ho, ab as xo, X as Mo, n as zo, e as Vo, l as Ie, u as Go, q as jo, x as Wo, R as Xo } from "./lib-C5BH09_g.js";
+import { u as Yo, a as oe } from "./useNestedProp-CWo6bftQ.js";
+import { u as Zo, B as qo } from "./BaseScanner-BgWxam9d.js";
+import { u as Jo } from "./usePrinter-DCJzEiS8.js";
+import { u as Ko } from "./useSvgExport-DrjCWun4.js";
+import { u as Qo } from "./useThemeCheck-DGJ31Vi5.js";
+import { u as et } from "./useUserOptionState-BIvW1Kz7.js";
+import { u as ot } from "./useChartAccessibility-9icAAmYg.js";
+import tt from "./img-DUzJeMlr.js";
+import { u as lt } from "./usePanZoom-BVca3eMk.js";
+import { _ as at } from "./_plugin-vue_export-helper-CHgC5LLL.js";
+const Ne = { style: { chart: { backgroundColor: "#1A1A1A", color: "#CCCCCC", nodes: { stroke: "#4A4A4A", strokeHovered: "#CCCCCC" }, links: { stroke: "#4A4A4A" }, title: { color: "#CCCCCC", subtitle: { color: "#757575" } }, tooltip: { backgroundColor: "#1A1A1A", backgroundOpacity: 70, color: "#CCCCCC", borderColor: "#5A5A5A" } } }, table: { th: { backgroundColor: "#1A1A1A", color: "#CCCCCC" }, td: { backgroundColor: "#1A1A1A", color: "#CCCCCC" } } }, Le = { style: { chart: { backgroundColor: "#FFF8E1", color: "#424242", nodes: { stroke: "#333333", strokeHovered: "#FFFFFF" }, links: { stroke: "#333333" }, title: { color: "#424242", subtitle: { color: "#757575" } }, tooltip: { backgroundColor: "#FFECB3", backgroundOpacity: 30, color: "#424242", borderColor: "#FF8A65" } } }, table: { th: { backgroundColor: "#FFF8E1", color: "#424242" }, td: { backgroundColor: "#FFF8E1", color: "#424242" } } }, Re = { style: { chart: { backgroundColor: "#1E1E1E", color: "#BDBDBD", nodes: { stroke: "#333333", strokeHovered: "#FFF8E1" }, links: { stroke: "#333333" }, title: { color: "#FFF8E1", subtitle: { color: "#BDBDBD" } }, tooltip: { backgroundColor: "#1E1E1E", backgroundOpacity: 30, color: "#FFF8E1", borderColor: "#FF8A65" } } }, table: { th: { backgroundColor: "#1E1E1E", color: "#BDBDBD" }, td: { backgroundColor: "#1E1E1E", color: "#BDBDBD" } } }, Ue = { style: { chart: { backgroundColor: "#1A1A1A", color: "#99AA99", nodes: { stroke: "#1A1A1A", strokeHovered: "#00FF00" }, links: { stroke: "#333333" }, title: { color: "#66CC66", subtitle: { color: "#99AA99" } }, tooltip: { backgroundColor: "#2A2F2A", color: "#AACCAA", borderColor: "#66CC66" } } }, table: { th: { backgroundColor: "#1A1A1A", color: "#99AA99" }, td: { backgroundColor: "#1A1A1A", color: "#AACCAA" } } }, He = { style: { chart: { backgroundColor: "#fbfafa", color: "#8A9892", nodes: { stroke: "#fbfafa", strokeHovered: "#5E5E5E" }, links: { stroke: "#e8ede1" }, title: { color: "#8A9892", subtitle: { color: "#99AA99" } }, tooltip: { backgroundColor: "#fbfafa", color: "#8A9892" } } }, table: { th: { backgroundColor: "#fbfafa", color: "#8F837A" }, td: { backgroundColor: "#fbfafa", color: "#8F837A" } } }, xe = { style: { chart: { backgroundColor: "#f6f6fb", color: "#50606C", nodes: { stroke: "#61747E", strokeHovered: "#404C4D" }, links: { stroke: "#BBCBC7" }, title: { color: "#50606C", subtitle: { color: "#718890" } }, tooltip: { backgroundColor: "#f6f6fb", color: "#50606C" } } }, table: { th: { backgroundColor: "#f6f6fb", color: "#50606C" }, td: { backgroundColor: "#f6f6fb", color: "#50606C" } } }, Me = {
+  default: {},
+  dark: Ne,
+  celebration: Le,
+  celebrationNight: Re,
+  hack: Ue,
+  zen: He,
+  concrete: xe
+}, Et = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
+  __proto__: null,
+  celebration: Le,
+  celebrationNight: Re,
+  concrete: xe,
+  dark: Ne,
+  default: Me,
+  hack: Ue,
+  zen: He
+}, Symbol.toStringTag, { value: "Module" })), st = ["id"], nt = {
+  key: 1,
+  ref: "noTitle",
+  class: "vue-data-ui-no-title-space",
+  style: "height:36px; width: 100%;background:transparent"
+}, rt = {
+  key: 2,
+  style: "width:100%;background:transparent;"
+}, it = ["xmlns", "viewBox"], ut = ["width", "height"], ct = ["id"], dt = ["stop-color"], vt = ["stop-color"], ft = {
+  key: 4,
+  class: "vue-data-ui-watermark"
+}, ht = {
+  key: 5,
+  "data-dom-to-png-ignore": "",
+  class: "reset-wrapper"
+}, pt = {
+  key: 6,
+  ref: "source",
+  dir: "auto"
+}, Ct = ["innerHTML"], bt = {
+  __name: "vue-ui-molecule",
+  props: {
+    config: {
+      type: Object,
+      default() {
+        return {};
+      }
+    },
+    dataset: {
+      type: Array,
+      default() {
+        return [];
+      }
+    }
+  },
+  emits: ["selectNode"],
+  setup(ze, { expose: Ve, emit: Ge }) {
+    Do((o) => ({
+      v679f6f1a: o.slicerColor
+    }));
+    const je = f(() => import("./Title-DfFUb9hd.js")), We = f(() => import("./Tooltip-WD0Ros6G.js")), te = f(() => import("./BaseIcon-CofSxalQ.js")), Xe = f(() => import("./vue-ui-accordion-DSdZUn2C.js")), Ye = f(() => import("./DataTable-CHaOCmsE.js")), Ze = f(() => import("./PenAndPaper-HCZQTkqi.js")), qe = f(() => import("./UserOptions-B3I-s3Lw.js")), Je = f(() => import("./PackageVersion-Bq_mtsqr.js")), Ke = f(() => import("./RecursiveLinks-00zGWPf9.js")), Qe = f(() => import("./RecursiveLabels-Bgcv0pzu.js")), eo = f(() => import("./RecursiveCircles-BcLb1aRS.js")), oo = f(() => import("./BaseDraggableDialog-CRF94NJQ.js")), { vue_ui_molecule: to } = Yo(), { isThemeValid: lo, warnInvalidTheme: ao } = Qo(), w = ze, so = Ge, le = h(() => !!w.dataset && w.dataset.length);
+    Oo(() => {
+      ae();
+    });
+    const no = h(() => e.value.debug);
+    function ae() {
+      No(w.dataset) && Lo({
+        componentName: "VueUiMolecule",
+        type: "dataset",
+        debug: no.value
+      });
+    }
+    const z = u(Be()), V = u(!1), N = u(""), $ = u(null), se = u(0), ne = u(0), re = u(0), E = u(null), G = u(null), e = u(Y()), { loading: j, FINAL_DATASET: W } = Zo({
+      ...So(w),
+      FINAL_CONFIG: e,
+      prepareConfig: Y,
+      skeletonDataset: [
+        {
+          name: "_",
+          color: "#CACACA",
+          nodes: [
+            { name: "_", color: "#CACACA", nodes: [
+              { name: "_", color: "#CACACA" },
+              { name: "_", color: "#CACACA" },
+              { name: "_", color: "#CACACA" }
+            ] },
+            { name: "_", color: "#CACACA", nodes: [
+              { name: "_", color: "#CACACA" },
+              { name: "_", color: "#CACACA" },
+              { name: "_", color: "#CACACA" }
+            ] },
+            { name: "_", color: "#CACACA", nodes: [
+              { name: "_", color: "#CACACA" },
+              { name: "_", color: "#CACACA" },
+              { name: "_", color: "#CACACA" }
+            ] },
+            { name: "_", color: "#CACACA", nodes: [
+              { name: "_", color: "#CACACA" },
+              { name: "_", color: "#CACACA" },
+              { name: "_", color: "#CACACA" }
+            ] },
+            { name: "_", color: "#CACACA", nodes: [
+              { name: "_", color: "#CACACA" },
+              { name: "_", color: "#CACACA" },
+              { name: "_", color: "#CACACA" }
+            ] },
+            { name: "_", color: "#CACACA", nodes: [
+              { name: "_", color: "#CACACA" },
+              { name: "_", color: "#CACACA" },
+              { name: "_", color: "#CACACA" }
+            ] }
+          ]
+        }
+      ],
+      skeletonConfig: Ro({
+        defaultConfig: e.value,
+        userConfig: {
+          userOptions: { show: !1 },
+          table: { show: !1 },
+          style: {
+            chart: {
+              backgroundColor: "#99999930",
+              nodes: { stroke: "#6A6A6A" },
+              links: { stroke: "#6A6A6A80" }
+            }
+          }
+        }
+      })
+    }), { userOptionsVisible: X, setUserOptionsVisibility: ie, keepUserOptionState: ue } = et({ config: e.value }), { svgRef: L } = ot({ config: e.value.style.chart.title });
+    function Y() {
+      const o = oe({
+        userConfig: w.config,
+        defaultConfig: to
+      }), l = o.theme;
+      if (!l) return o;
+      if (!lo.value(o))
+        return ao(o), o;
+      const t = oe({
+        userConfig: Me[l] || w.config,
+        defaultConfig: o
+      }), n = oe({
+        userConfig: w.config,
+        defaultConfig: t
+      });
+      return {
+        ...n,
+        customPalette: n.customPalette.length ? n.customPalette : Uo[l] || Pe
+      };
+    }
+    H(() => w.config, (o) => {
+      e.value = Y(), X.value = !e.value.userOptions.showOnChartHover, ae(), ne.value += 1, re.value += 1, v.value.showTable = e.value.table.show, v.value.showTooltip = e.value.style.chart.tooltip.show;
+    }, { deep: !0 });
+    const ce = u(0), ro = () => {
+      ce.value += 1;
+    };
+    H([() => j.value, () => W.value], async ([o]) => {
+      o || (await x(), b.value = Ce(), await x(), ro(), await x(), Ao({ x: 0, y: 0, width: 400, height: 400 }), K(!1));
+    }, { flush: "post", deep: !1 });
+    const { isPrinting: de, isImaging: ve, generatePdf: fe, generateImage: he } = Jo({
+      elementId: `cluster_${z.value}`,
+      fileName: e.value.style.chart.title.text || "vue-ui-molecule",
+      options: e.value.userOptions.print
+    }), io = h(() => e.value.userOptions.show && !e.value.style.chart.title.text), uo = h(() => Ho(e.value.customPalette)), v = u({
+      showTable: e.value.table.show,
+      showDataLabels: !0,
+      showTooltip: e.value.style.chart.tooltip.show
+    });
+    H(e, () => {
+      v.value = {
+        showTable: e.value.table.show,
+        showDataLabels: !0,
+        showTooltip: e.value.style.chart.tooltip.show
+      };
+    }, { immediate: !0 });
+    function pe(o, l = 0) {
+      return Array.isArray(o) && o.length > 0 && o[0].nodes ? pe(o[0].nodes, l + 1) : l;
+    }
+    function Ce() {
+      const o = pe(W.value);
+      let l = 100, t = l;
+      for (let n = 0; n < o; n += 1)
+        l /= 1, t += l;
+      return {
+        height: t,
+        width: t
+      };
+    }
+    const b = u(Ce());
+    function be(o, l = { x: -b.value.width / 2.43, y: b.value.height / 2 }, t = b.value.width / 1.1, n = 24, s = 0, c = 0, g = "#BBBBBB", Q = 0) {
+      if (!Array.isArray(o) || o.length === 0) return o;
+      const _o = Vo({
+        plot: l,
+        radius: t,
+        sides: o.length,
+        rotation: s
+      });
+      return o.forEach((m, Te) => {
+        const Fe = _o.coordinates[Te], _e = m.color ? (() => {
+          let ee = Ie(m.color);
+          return ee.startsWith("#") ? ee : `#${ee}`;
+        })() : null;
+        let D;
+        _e ? D = _e : Q === 0 ? D = g : Q === 1 ? (D = uo.value[c] || Pe[c] || g, c += 1) : D = g, m.polygonPath = { coordinates: [Fe] }, m.circleRadius = n, m.color = D, m.uid = Be(), Array.isArray(m.nodes) && m.nodes.length && (m.nodes = be(
+          m.nodes,
+          Fe,
+          t / 2.9,
+          n / 2.2,
+          s + Math.PI * Te / m.nodes.length,
+          c,
+          D,
+          Q + 1
+        ));
+      }), o;
+    }
+    function co(o) {
+      const l = /* @__PURE__ */ new Set();
+      function t(s) {
+        s.forEach((c) => {
+          if (!c.color) return;
+          let g = c.color;
+          /^#?[0-9A-F]{6}$/i.test(g) || (g = Ie(g)), g.startsWith("#") || (g = `#${g}`), l.add(g), Array.isArray(c.nodes) && c.nodes.length && t(c.nodes);
+        });
+      }
+      t(o);
+      const n = {};
+      return Array.from(l).forEach((s) => {
+        const c = s.slice(1);
+        n[s] = `gradient_${c}`;
+      }), n;
+    }
+    const vo = h(() => co(k.value)), k = h(() => {
+      const o = xo(W.value);
+      return be(o);
+    }), Z = u(null);
+    function fo(o) {
+      Z.value = {
+        datapoint: o,
+        seriesIndex: -1,
+        series: k.value,
+        config: e.value
+      };
+      const l = e.value.style.chart.tooltip.customFormat;
+      if (Wo(l) && Xo(() => l({
+        seriesIndex: -1,
+        datapoint: o,
+        series: k.value,
+        config: e.value
+      })))
+        N.value = l({
+          seriesIndex: -1,
+          // well, ok
+          datapoint: o,
+          series: k.value,
+          config: e.value
+        });
+      else {
+        let t = "";
+        t += `<div style="display:flex;align-items:center;gap:3px"><div style="color:${o.color}">⬤</div><div>${o.name}</div></div>`, o.details && (t += `<div style="width:100%;border-top:1px solid ${e.value.style.chart.tooltip.borderColor};margin-top: 2px">${o.details}</div>`), N.value = `<div style="font-family:inherit">${t}</div>`;
+      }
+    }
+    const R = u(null), B = u(null), ge = u(null);
+    function ho(o) {
+      ge.value = R.value, R.value = o, o ? e.value.events.datapointEnter && e.value.events.datapointEnter({ datapoint: o, seriesIndex: -1 }) : e.value.events.datapointLeave && e.value.events.datapointLeave({ datapoint: ge.value || R.value, seriesIndex: -1 }), o ? (V.value = !0, fo(o), B.value = o.uid) : (V.value = !1, N.value = "", B.value = null);
+    }
+    function po(o) {
+      const l = [];
+      function t(n) {
+        n.forEach((s) => {
+          const c = {
+            name: s.name,
+            details: s.details || "-",
+            ancestor: s.ancestor && s.ancestor.name || "-",
+            color: s.color || ""
+          };
+          l.push(c), s.nodes && s.nodes.length > 0 && t(s.nodes, s.name);
+        });
+      }
+      return t(o), l;
+    }
+    const Co = h(() => po(k.value)), F = h(() => {
+      const o = [
+        e.value.table.translations.nodeName,
+        e.value.table.translations.details,
+        e.value.table.translations.ancestor
+      ], l = Co.value.map((s, c) => [
+        {
+          color: s.color,
+          name: s.name
+        },
+        s.details,
+        s.ancestor || ""
+      ]), t = {
+        th: {
+          backgroundColor: e.value.table.th.backgroundColor,
+          color: e.value.table.th.color,
+          outline: e.value.table.th.outline
+        },
+        td: {
+          backgroundColor: e.value.table.td.backgroundColor,
+          color: e.value.table.td.color,
+          outline: e.value.table.td.outline
+        },
+        breakpoint: e.value.table.responsiveBreakpoint
+      }, n = [
+        e.value.table.translations.nodeName,
+        e.value.table.translations.details,
+        e.value.table.translations.ancestor
+      ];
+      return {
+        head: o,
+        body: l,
+        config: t,
+        colNames: n
+      };
+    });
+    function q(o = null) {
+      x(() => {
+        const l = F.value.body.map((s, c) => [[s[0].name], [s[1]], [s[2]]]), t = [[e.value.style.chart.title.text], [e.value.style.chart.title.subtitle.text], [[...F.value.head]]].concat(l), n = Go(t);
+        o ? o(n) : jo({ csvContent: n, title: e.value.style.chart.title.text || "vue-ui-molecule" });
+      });
+    }
+    function bo() {
+      return k.value;
+    }
+    const _ = u(!1);
+    function me(o) {
+      _.value = o, se.value += 1;
+    }
+    function Ae() {
+      v.value.showTable = !v.value.showTable;
+    }
+    function ye() {
+      v.value.showDataLabels = !v.value.showDataLabels;
+    }
+    function ke() {
+      v.value.showTooltip = !v.value.showTooltip;
+    }
+    const P = u(!1);
+    function J() {
+      P.value = !P.value;
+    }
+    const go = h(() => !P.value), { viewBox: U, resetZoom: K, isZoom: mo, setInitialViewBox: Ao } = lt(L, {
+      x: 0,
+      y: 0,
+      width: Math.max(10, b.value.width),
+      height: Math.max(10, b.value.height)
+    }, e.value.style.chart.zoom.speed, go);
+    function yo(o) {
+      e.value.events.datapointClick && e.value.events.datapointClick({ datapoint: o, seriesIndex: -1 }), so("selectNode", o);
+    }
+    async function ko({ scale: o = 2 } = {}) {
+      if (!$.value) return;
+      const { width: l, height: t } = $.value.getBoundingClientRect(), n = l / t, { imageUri: s, base64: c } = await tt({ domElement: $.value, base64: !0, img: !0, scale: o });
+      return {
+        imageUri: s,
+        base64: c,
+        title: e.value.style.chart.title.text,
+        width: l,
+        height: t,
+        aspectRatio: n
+      };
+    }
+    const I = h(() => {
+      const o = e.value.table.useDialog && !e.value.table.show, l = v.value.showTable;
+      return {
+        component: o ? oo : Xe,
+        title: `${e.value.style.chart.title.text}${e.value.style.chart.title.subtitle.text ? `: ${e.value.style.chart.title.subtitle.text}` : ""}`,
+        props: o ? {
+          backgroundColor: e.value.table.th.backgroundColor,
+          color: e.value.table.th.color,
+          headerColor: e.value.table.th.color,
+          headerBg: e.value.table.th.backgroundColor,
+          isFullscreen: _.value,
+          fullscreenParent: $.value,
+          forcedWidth: Math.min(800, window.innerWidth * 0.8)
+        } : {
+          hideDetails: !0,
+          config: {
+            open: l,
+            maxHeight: 1e4,
+            body: {
+              backgroundColor: e.value.style.chart.backgroundColor,
+              color: e.value.style.chart.color
+            },
+            head: {
+              backgroundColor: e.value.style.chart.backgroundColor,
+              color: e.value.style.chart.color
+            }
+          }
+        }
+      };
+    });
+    H(() => v.value.showTable, (o) => {
+      e.value.table.show || (o && e.value.table.useDialog && E.value ? E.value.open() : "close" in E.value && E.value.close());
+    });
+    function we() {
+      v.value.showTable = !1, G.value && G.value.setTableIconState(!1);
+    }
+    const wo = h(() => e.value.style.chart.backgroundColor), $o = h(() => e.value.style.chart.title), { exportSvg: To, getSvg: Fo } = Ko({
+      svg: L,
+      title: $o,
+      backgroundColor: wo
+    });
+    async function $e({ isCb: o }) {
+      if (o) {
+        const { blob: l, url: t, text: n, dataUrl: s } = await Fo();
+        e.value.userOptions.callbacks.svg({ blob: l, url: t, text: n, dataUrl: s });
+      } else
+        To();
+    }
+    return Ve({
+      getData: bo,
+      getImage: ko,
+      generatePdf: fe,
+      generateCsv: q,
+      generateImage: he,
+      generateSvg: $e,
+      toggleTable: Ae,
+      toggleLabels: ye,
+      toggleTooltip: ke,
+      toggleAnnotator: J,
+      toggleFullscreen: me
+    }), (o, l) => (d(), y("div", {
+      ref_key: "moleculeChart",
+      ref: $,
+      class: De(`vue-data-ui-component vue-ui-molecule ${_.value ? "vue-data-ui-wrapper-fullscreen" : ""}`),
+      style: M(`font-family:${e.value.style.fontFamily};width:100%; text-align:center;background:${e.value.style.chart.backgroundColor}`),
+      id: `cluster_${z.value}`,
+      onMouseleave: l[2] || (l[2] = (t) => {
+        R.value = null, B.value = null, a(ie)(!1);
+      }),
+      onMouseenter: l[3] || (l[3] = () => a(ie)(!0))
+    }, [
+      e.value.userOptions.buttons.annotator ? (d(), T(a(Ze), {
+        key: 0,
+        svgRef: a(L),
+        backgroundColor: e.value.style.chart.backgroundColor,
+        color: e.value.style.chart.color,
+        active: P.value,
+        onClose: J
+      }, {
+        "annotator-action-close": r(() => [
+          i(o.$slots, "annotator-action-close", {}, void 0, !0)
+        ]),
+        "annotator-action-color": r(({ color: t }) => [
+          i(o.$slots, "annotator-action-color", p(C({ color: t })), void 0, !0)
+        ]),
+        "annotator-action-draw": r(({ mode: t }) => [
+          i(o.$slots, "annotator-action-draw", p(C({ mode: t })), void 0, !0)
+        ]),
+        "annotator-action-undo": r(({ disabled: t }) => [
+          i(o.$slots, "annotator-action-undo", p(C({ disabled: t })), void 0, !0)
+        ]),
+        "annotator-action-redo": r(({ disabled: t }) => [
+          i(o.$slots, "annotator-action-redo", p(C({ disabled: t })), void 0, !0)
+        ]),
+        "annotator-action-delete": r(({ disabled: t }) => [
+          i(o.$slots, "annotator-action-delete", p(C({ disabled: t })), void 0, !0)
+        ]),
+        _: 3
+      }, 8, ["svgRef", "backgroundColor", "color", "active"])) : A("", !0),
+      io.value ? (d(), y("div", nt, null, 512)) : A("", !0),
+      e.value.style.chart.title.text ? (d(), y("div", rt, [
+        (d(), T(a(je), {
+          key: `title_${ne.value}`,
+          config: {
+            title: {
+              cy: "molecule-div-title",
+              ...e.value.style.chart.title
+            },
+            subtitle: {
+              cy: "molecule-div-subtitle",
+              ...e.value.style.chart.title.subtitle
+            }
+          }
+        }, null, 8, ["config"]))
+      ])) : A("", !0),
+      e.value.userOptions.show && le.value && (a(ue) || a(X)) ? (d(), T(a(qe), {
+        ref_key: "userOptionsRef",
+        ref: G,
+        key: `user_options_${se.value}`,
+        backgroundColor: e.value.style.chart.backgroundColor,
+        color: e.value.style.chart.color,
+        isPrinting: a(de),
+        isImaging: a(ve),
+        uid: z.value,
+        hasTooltip: e.value.userOptions.buttons.tooltip && e.value.style.chart.tooltip.show,
+        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,
+        hasLabel: e.value.userOptions.buttons.labels,
+        hasFullscreen: e.value.userOptions.buttons.fullscreen,
+        isTooltip: v.value.showTooltip,
+        titles: { ...e.value.userOptions.buttonTitles },
+        chartElement: $.value,
+        position: e.value.userOptions.position,
+        hasAnnotator: e.value.userOptions.buttons.annotator,
+        isAnnotation: P.value,
+        callbacks: e.value.userOptions.callbacks,
+        printScale: e.value.userOptions.print.scale,
+        tableDialog: e.value.table.useDialog,
+        onToggleFullscreen: me,
+        onGeneratePdf: a(fe),
+        onGenerateCsv: q,
+        onGenerateImage: a(he),
+        onGenerateSvg: $e,
+        onToggleTable: Ae,
+        onToggleLabels: ye,
+        onToggleTooltip: ke,
+        onToggleAnnotator: J,
+        style: M({
+          visibility: a(ue) ? a(X) ? "visible" : "hidden" : "visible"
+        })
+      }, Oe({ _: 2 }, [
+        o.$slots.menuIcon ? {
+          name: "menuIcon",
+          fn: r(({ isOpen: t, color: n }) => [
+            i(o.$slots, "menuIcon", p(C({ isOpen: t, color: n })), void 0, !0)
+          ]),
+          key: "0"
+        } : void 0,
+        o.$slots.optionTooltip ? {
+          name: "optionTooltip",
+          fn: r(() => [
+            i(o.$slots, "optionTooltip", {}, void 0, !0)
+          ]),
+          key: "1"
+        } : void 0,
+        o.$slots.optionPdf ? {
+          name: "optionPdf",
+          fn: r(() => [
+            i(o.$slots, "optionPdf", {}, void 0, !0)
+          ]),
+          key: "2"
+        } : void 0,
+        o.$slots.optionCsv ? {
+          name: "optionCsv",
+          fn: r(() => [
+            i(o.$slots, "optionCsv", {}, void 0, !0)
+          ]),
+          key: "3"
+        } : void 0,
+        o.$slots.optionImg ? {
+          name: "optionImg",
+          fn: r(() => [
+            i(o.$slots, "optionImg", {}, void 0, !0)
+          ]),
+          key: "4"
+        } : void 0,
+        o.$slots.optionSvg ? {
+          name: "optionSvg",
+          fn: r(() => [
+            i(o.$slots, "optionSvg", {}, void 0, !0)
+          ]),
+          key: "5"
+        } : void 0,
+        o.$slots.optionTable ? {
+          name: "optionTable",
+          fn: r(() => [
+            i(o.$slots, "optionTable", {}, void 0, !0)
+          ]),
+          key: "6"
+        } : void 0,
+        o.$slots.optionLabels ? {
+          name: "optionLabels",
+          fn: r(() => [
+            i(o.$slots, "optionLabels", {}, void 0, !0)
+          ]),
+          key: "7"
+        } : void 0,
+        o.$slots.optionFullscreen ? {
+          name: "optionFullscreen",
+          fn: r(({ toggleFullscreen: t, isFullscreen: n }) => [
+            i(o.$slots, "optionFullscreen", p(C({ toggleFullscreen: t, isFullscreen: n })), void 0, !0)
+          ]),
+          key: "8"
+        } : void 0,
+        o.$slots.optionAnnotator ? {
+          name: "optionAnnotator",
+          fn: r(({ toggleAnnotator: t, isAnnotator: n }) => [
+            i(o.$slots, "optionAnnotator", p(C({ toggleAnnotator: t, isAnnotator: n })), void 0, !0)
+          ]),
+          key: "9"
+        } : void 0
+      ]), 1032, ["backgroundColor", "color", "isPrinting", "isImaging", "uid", "hasTooltip", "hasPdf", "hasXls", "hasImg", "hasSvg", "hasTable", "hasLabel", "hasFullscreen", "isTooltip", "titles", "chartElement", "position", "hasAnnotator", "isAnnotation", "callbacks", "printScale", "tableDialog", "onGeneratePdf", "onGenerateImage", "style"])) : A("", !0),
+      (d(), y("svg", {
+        ref_key: "svgRef",
+        ref: L,
+        key: `svg_${ce.value}`,
+        xmlns: a(Mo),
+        viewBox: `${a(U).x} ${a(U).y} ${a(U).width} ${a(U).height}`,
+        class: De({ "vue-data-ui-fullscreen--on": _.value, "vue-data-ui-fulscreen--off": !_.value }),
+        style: M(`overflow: hidden; background:transparent;color:${e.value.style.chart.color}`)
+      }, [
+        O(a(Je)),
+        o.$slots["chart-background"] ? (d(), y("foreignObject", {
+          key: 0,
+          x: 0,
+          y: 0,
+          width: b.value.width <= 0 ? 10 : b.value.width,
+          height: b.value.height <= 0 ? 10 : b.value.height,
+          style: {
+            pointerEvents: "none"
+          }
+        }, [
+          i(o.$slots, "chart-background", {}, void 0, !0)
+        ], 8, ut)) : A("", !0),
+        S("defs", null, [
+          (d(!0), y(Eo, null, Bo(Object.keys(vo.value), (t) => (d(), y("radialGradient", {
+            id: `gradient_${t}`,
+            cx: "50%",
+            cy: "30%",
+            r: "50%",
+            fx: "50%",
+            fy: "50%"
+          }, [
+            S("stop", {
+              offset: "0%",
+              "stop-color": a(zo)(t, 0.5)
+            }, null, 8, dt),
+            S("stop", {
+              offset: "100%",
+              "stop-color": t
+            }, null, 8, vt)
+          ], 8, ct))), 256))
+        ]),
+        O(a(Ke), {
+          dataset: k.value,
+          color: e.value.style.chart.links.stroke,
+          backgroundColor: e.value.style.chart.backgroundColor
+        }, null, 8, ["dataset", "color", "backgroundColor"]),
+        O(a(eo), {
+          dataset: k.value,
+          hoveredUid: B.value,
+          stroke: e.value.style.chart.nodes.stroke,
+          strokeHovered: e.value.style.chart.nodes.strokeHovered,
+          onClick: yo,
+          onHover: ho
+        }, {
+          node: r(({ node: t }) => [
+            i(o.$slots, "node", p(C({ node: t })), void 0, !0)
+          ]),
+          _: 3
+        }, 8, ["dataset", "hoveredUid", "stroke", "strokeHovered"]),
+        v.value.showDataLabels && !a(j) ? (d(), T(a(Qe), {
+          key: 1,
+          dataset: k.value,
+          color: e.value.style.chart.color,
+          hoveredUid: B.value
+        }, null, 8, ["dataset", "color", "hoveredUid"])) : A("", !0),
+        i(o.$slots, "svg", { svg: b.value }, void 0, !0)
+      ], 14, it)),
+      o.$slots.watermark ? (d(), y("div", ft, [
+        i(o.$slots, "watermark", p(C({ isPrinting: a(de) || a(ve) })), void 0, !0)
+      ])) : A("", !0),
+      a(mo) ? (d(), y("div", ht, [
+        i(o.$slots, "reset-action", { reset: a(K) }, () => [
+          S("button", {
+            "data-cy-reset": "",
+            tabindex: "0",
+            role: "button",
+            class: "vue-data-ui-refresh-button",
+            style: M({
+              background: e.value.style.chart.backgroundColor
+            }),
+            onClick: l[0] || (l[0] = (t) => a(K)(!0))
+          }, [
+            O(a(te), {
+              name: "refresh",
+              stroke: e.value.style.chart.color
+            }, null, 8, ["stroke"])
+          ], 4)
+        ], !0)
+      ])) : A("", !0),
+      o.$slots.source ? (d(), y("div", pt, [
+        i(o.$slots, "source", {}, void 0, !0)
+      ], 512)) : A("", !0),
+      O(a(We), {
+        show: v.value.showTooltip && V.value,
+        backgroundColor: e.value.style.chart.tooltip.backgroundColor,
+        color: e.value.style.chart.tooltip.color,
+        borderRadius: e.value.style.chart.tooltip.borderRadius,
+        borderColor: e.value.style.chart.tooltip.borderColor,
+        borderWidth: e.value.style.chart.tooltip.borderWidth,
+        fontSize: e.value.style.chart.tooltip.fontSize,
+        backgroundOpacity: e.value.style.chart.tooltip.backgroundOpacity,
+        position: e.value.style.chart.tooltip.position,
+        offsetY: e.value.style.chart.tooltip.offsetY,
+        parent: $.value,
+        content: N.value,
+        isFullscreen: _.value,
+        isCustom: e.value.style.chart.tooltip.customFormat && typeof e.value.style.chart.tooltip.customFormat == "function",
+        smooth: e.value.style.chart.tooltip.smooth,
+        backdropFilter: e.value.style.chart.tooltip.backdropFilter,
+        smoothForce: e.value.style.chart.tooltip.smoothForce,
+        smoothSnapThreshold: e.value.style.chart.tooltip.smoothSnapThreshold
+      }, {
+        "tooltip-before": r(() => [
+          i(o.$slots, "tooltip-before", p(C({ ...Z.value })), void 0, !0)
+        ]),
+        "tooltip-after": r(() => [
+          i(o.$slots, "tooltip-after", p(C({ ...Z.value })), void 0, !0)
+        ]),
+        _: 3
+      }, 8, ["show", "backgroundColor", "color", "borderRadius", "borderColor", "borderWidth", "fontSize", "backgroundOpacity", "position", "offsetY", "parent", "content", "isFullscreen", "isCustom", "smooth", "backdropFilter", "smoothForce", "smoothSnapThreshold"]),
+      le.value && e.value.userOptions.buttons.table ? (d(), T(Po(I.value.component), Io({ key: 7 }, I.value.props, {
+        ref_key: "tableUnit",
+        ref: E,
+        onClose: we
+      }), Oe({
+        content: r(() => [
+          (d(), T(a(Ye), {
+            key: `table_${re.value}`,
+            colNames: F.value.colNames,
+            head: F.value.head,
+            body: F.value.body,
+            config: F.value.config,
+            title: e.value.table.useDialog ? "" : I.value.title,
+            withCloseButton: !e.value.table.useDialog,
+            onClose: we
+          }, {
+            th: r(({ th: t }) => [
+              S("div", {
+                innerHTML: t,
+                style: { display: "flex", "align-items": "center" }
+              }, null, 8, Ct)
+            ]),
+            td: r(({ td: t }) => [
+              Se(Ee(t.name || t), 1)
+            ]),
+            _: 1
+          }, 8, ["colNames", "head", "body", "config", "title", "withCloseButton"]))
+        ]),
+        _: 2
+      }, [
+        e.value.table.useDialog ? {
+          name: "title",
+          fn: r(() => [
+            Se(Ee(I.value.title), 1)
+          ]),
+          key: "0"
+        } : void 0,
+        e.value.table.useDialog ? {
+          name: "actions",
+          fn: r(() => [
+            S("button", {
+              tabindex: "0",
+              class: "vue-ui-user-options-button",
+              onClick: l[1] || (l[1] = (t) => q(e.value.userOptions.callbacks.csv))
+            }, [
+              O(a(te), {
+                name: "excel",
+                stroke: I.value.props.color
+              }, null, 8, ["stroke"])
+            ])
+          ]),
+          key: "1"
+        } : void 0
+      ]), 1040)) : A("", !0),
+      a(j) ? (d(), T(qo, { key: 8 })) : A("", !0)
+    ], 46, st));
+  }
+}, gt = /* @__PURE__ */ at(bt, [["__scopeId", "data-v-3823dab9"]]), Bt = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
+  __proto__: null,
+  default: gt
+}, Symbol.toStringTag, { value: "Module" }));
+export {
+  Et as a,
+  Bt as b,
+  gt as v
+};