vue-data-ui 2.12.6 → 2.12.7-beta.1

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

@@ -0,0 +1,580 @@
+import { useCssVars as Qe, defineAsyncComponent as p, computed as k, onMounted as Je, ref as u, watch as Ke, createElementBlock as y, openBlock as r, unref as l, normalizeStyle as B, normalizeClass as he, createBlock as $, createCommentVNode as f, createVNode as F, createSlots as et, withCtx as d, renderSlot as i, normalizeProps as w, guardReactiveProps as T, createElementVNode as _, Fragment as tt, renderList as ot, createTextVNode as lt, toDisplayString as st, nextTick as at } from "vue";
+import { u as nt, o as rt, e as it, c as pe, t as ut, p as fe, a as ct, b as dt, P as vt, X as ht, l as pt, Q as ft, d as ge, q as gt, r as mt, x as yt, y as bt } from "./index-BHEd2dgu.js";
+import { u as me } from "./useNestedProp-CZztHZIm.js";
+import { u as kt } from "./usePrinter-C8URL2IU.js";
+import { u as Ct } from "./useUserOptionState-BIvW1Kz7.js";
+import { u as $t } from "./useChartAccessibility-9icAAmYg.js";
+import { u as wt } from "./usePanZoom-BQMvRXEQ.js";
+import { _ as Tt } from "./_plugin-vue_export-helper-CHgC5LLL.js";
+const Pt = ["id"], Ot = {
+  key: 1,
+  ref: "noTitle",
+  class: "vue-data-ui-no-title-space",
+  style: "height:36px; width: 100%;background:transparent"
+}, At = {
+  key: 2,
+  style: "width:100%;background:transparent;"
+}, It = ["xmlns", "viewBox"], Nt = ["width", "height"], Ft = ["id"], _t = ["stop-color"], St = ["stop-color"], Lt = {
+  key: 5,
+  class: "vue-data-ui-watermark"
+}, Dt = {
+  key: 6,
+  "data-dom-to-png-ignore": "",
+  class: "reset-wrapper"
+}, Bt = {
+  key: 8,
+  ref: "source",
+  dir: "auto"
+}, Ut = ["innerHTML"], Rt = {
+  __name: "vue-ui-molecule",
+  props: {
+    config: {
+      type: Object,
+      default() {
+        return {};
+      }
+    },
+    dataset: {
+      type: Array,
+      default() {
+        return [];
+      }
+    }
+  },
+  emits: ["selectNode"],
+  setup(ye, { expose: be, emit: ke }) {
+    Qe((t) => ({
+      ee2a6d54: t.slicerColor
+    }));
+    const Ce = p(() => import("./vue-ui-accordion-DntThSTF.js")), $e = p(() => import("./BaseIcon-DhWmrDAn.js")), we = p(() => import("./DataTable-Y5HbiUZU.js")), Te = p(() => import("./PackageVersion-DaWGaZxE.js")), Pe = p(() => import("./PenAndPaper-C-CpE0NC.js")), Oe = p(() => import("./RecursiveCircles-Dn3TGoL6.js")), Ae = p(() => import("./RecursiveLabels-NTMB9w5C.js")), Ie = p(() => import("./RecursiveLinks-ld_gDZH4.js")), Ne = p(() => import("./vue-ui-skeleton-CG3Pn3Zg.js")), Fe = p(() => import("./Title-Bc66VstS.js")), _e = p(() => import("./Tooltip-B07vY6jm.js")), Se = p(() => import("./UserOptions-C8X2STEg.js")), { vue_ui_molecule: Le } = nt(), C = ye, De = ke, S = k(() => !!C.dataset && C.dataset.length);
+    Je(() => {
+      W();
+    });
+    function W() {
+      rt(C.dataset) && it({
+        componentName: "VueUiMolecule",
+        type: "dataset"
+      });
+    }
+    const U = u(pe()), Be = u(null), R = u(!1), L = u(""), E = u(null), X = u(0), j = u(0), Y = u(0), e = k({
+      get: () => Q(),
+      set: (t) => t
+    }), { userOptionsVisible: x, setUserOptionsVisibility: Z, keepUserOptionState: q } = Ct({ config: e.value }), { svgRef: z } = $t({ config: e.value.style.chart.title });
+    function Q() {
+      const t = me({
+        userConfig: C.config,
+        defaultConfig: Le
+      });
+      return t.theme ? {
+        ...me({
+          userConfig: ct.vue_ui_molecule[t.theme] || C.config,
+          defaultConfig: t
+        }),
+        customPalette: ut[t.theme] || fe
+      } : t;
+    }
+    Ke(() => C.config, (t) => {
+      e.value = Q(), x.value = !e.value.userOptions.showOnChartHover, W(), j.value += 1, Y.value += 1, h.value.showTable = e.value.table.show, h.value.showTooltip = e.value.style.chart.tooltip.show;
+    }, { deep: !0 });
+    const { isPrinting: J, isImaging: K, generatePdf: ee, generateImage: te } = kt({
+      elementId: `cluster_${U.value}`,
+      fileName: e.value.style.chart.title.text || "vue-ui-molecule",
+      options: e.value.userOptions.print
+    }), Ue = k(() => e.value.userOptions.show && !e.value.style.chart.title.text), Re = k(() => dt(e.value.customPalette)), h = u({
+      showTable: e.value.table.show,
+      showDataLabels: !0,
+      showTooltip: e.value.style.chart.tooltip.show
+    });
+    function oe(t, s = 0) {
+      return Array.isArray(t) && t.length > 0 && t[0].nodes ? oe(t[0].nodes, s + 1) : s;
+    }
+    function Ee() {
+      const t = oe(C.dataset);
+      let s = 100, o = s;
+      for (let n = 0; n < t; n += 1)
+        s /= 1, o += s;
+      return {
+        height: o,
+        width: o
+      };
+    }
+    const v = u(Ee());
+    u(`0 0 ${v.value.width} ${v.value.height}`);
+    function le(t, s = { x: -v.value.width / 2.43, y: v.value.height / 2 }, o = v.value.width / 1.1, n = 24, a = 0, c = 0, g = "#BBBBBB", G = 0) {
+      if (!Array.isArray(t) || t.length === 0) return t;
+      const qe = ft({
+        plot: s,
+        radius: o,
+        sides: t.length,
+        rotation: a
+      });
+      return t.forEach((m, ce) => {
+        const de = qe.coordinates[ce], ve = m.color ? (() => {
+          let M = ge(m.color);
+          return M.startsWith("#") ? M : `#${M}`;
+        })() : null;
+        let O;
+        ve ? O = ve : G === 0 ? O = g : G === 1 ? (O = Re.value[c] || fe[c] || g, c += 1) : O = g, m.polygonPath = { coordinates: [de] }, m.circleRadius = n, m.color = O, m.uid = pe(), Array.isArray(m.nodes) && m.nodes.length && (m.nodes = le(
+          m.nodes,
+          de,
+          o / 2.9,
+          n / 2.2,
+          a + Math.PI * ce / m.nodes.length,
+          c,
+          O,
+          G + 1
+        ));
+      }), t;
+    }
+    function xe(t) {
+      const s = /* @__PURE__ */ new Set();
+      function o(a) {
+        a.forEach((c) => {
+          if (!c.color) return;
+          let g = c.color;
+          /^#?[0-9A-F]{6}$/i.test(g) || (g = ge(g)), g.startsWith("#") || (g = `#${g}`), s.add(g), Array.isArray(c.nodes) && c.nodes.length && o(c.nodes);
+        });
+      }
+      o(t);
+      const n = {};
+      return Array.from(s).forEach((a) => {
+        const c = a.slice(1);
+        n[a] = `gradient_${c}`;
+      }), n;
+    }
+    const ze = k(() => xe(b.value)), b = k(() => {
+      const t = vt(C.dataset);
+      return le(t);
+    }), H = u(null);
+    function He(t) {
+      H.value = {
+        datapoint: t,
+        seriesIndex: -1,
+        series: b.value,
+        config: e.value
+      };
+      const s = e.value.style.chart.tooltip.customFormat;
+      if (yt(s) && bt(() => s({
+        seriesIndex: -1,
+        datapoint: t,
+        series: b.value,
+        config: e.value
+      })))
+        L.value = s({
+          seriesIndex: -1,
+          // well, ok
+          datapoint: t,
+          series: b.value,
+          config: e.value
+        });
+      else {
+        let o = "";
+        o += `<div style="display:flex;align-items:center;gap:3px"><div style="color:${t.color}">⬤</div><div>${t.name}</div></div>`, t.details && (o += `<div style="width:100%;border-top:1px solid ${e.value.style.chart.tooltip.borderColor};margin-top: 2px">${t.details}</div>`), L.value = `<div style="font-family:inherit">${o}</div>`;
+      }
+    }
+    const se = u(null), A = u(null);
+    function Ve(t) {
+      se.value = t, t ? (R.value = !0, He(t), A.value = t.uid) : (R.value = !1, L.value = "", A.value = null);
+    }
+    function Ge(t) {
+      const s = [];
+      function o(n) {
+        n.forEach((a) => {
+          const c = {
+            name: a.name,
+            details: a.details || "-",
+            ancestor: a.ancestor && a.ancestor.name || "-",
+            color: a.color || ""
+          };
+          s.push(c), a.nodes && a.nodes.length > 0 && o(a.nodes, a.name);
+        });
+      }
+      return o(t), s;
+    }
+    const Me = k(() => Ge(b.value)), P = k(() => {
+      const t = [
+        e.value.table.translations.nodeName,
+        e.value.table.translations.details,
+        e.value.table.translations.ancestor
+      ], s = Me.value.map((a, c) => [
+        {
+          color: a.color,
+          name: a.name
+        },
+        a.details,
+        a.ancestor || ""
+      ]), o = {
+        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: t,
+        body: s,
+        config: o,
+        colNames: n
+      };
+    });
+    function ae() {
+      at(() => {
+        const t = P.value.body.map((n, a) => [[n[0].name], [n[1]], [n[2]]]), s = [[e.value.style.chart.title.text], [e.value.style.chart.title.subtitle.text], [[...P.value.head]]].concat(t), o = gt(s);
+        mt({ csvContent: o, title: e.value.style.chart.title.text || "vue-ui-molecule" });
+      });
+    }
+    function We() {
+      return b.value;
+    }
+    const I = u(!1);
+    function Xe(t) {
+      I.value = t, X.value += 1;
+    }
+    function ne() {
+      h.value.showTable = !h.value.showTable;
+    }
+    function re() {
+      h.value.showDataLabels = !h.value.showDataLabels;
+    }
+    function ie() {
+      h.value.showTooltip = !h.value.showTooltip;
+    }
+    const N = u(!1);
+    function V() {
+      N.value = !N.value;
+    }
+    const je = k(() => !N.value), { viewBox: D, resetZoom: ue, isZoom: Ye } = wt(z, {
+      x: 0,
+      y: 0,
+      width: v.value.width <= 0 ? 10 : v.value.width,
+      height: v.value.height <= 0 ? 10 : v.value.height
+    }, e.value.style.chart.zoom.speed, je);
+    function Ze(t) {
+      De("selectNode", t);
+    }
+    return be({
+      getData: We,
+      generatePdf: ee,
+      generateCsv: ae,
+      generateImage: te,
+      toggleTable: ne,
+      toggleLabels: re,
+      toggleTooltip: ie,
+      toggleAnnotator: V
+    }), (t, s) => (r(), y("div", {
+      ref_key: "moleculeChart",
+      ref: E,
+      class: he(`vue-ui-molecule ${I.value ? "vue-data-ui-wrapper-fullscreen" : ""}`),
+      style: B(`font-family:${e.value.style.fontFamily};width:100%; text-align:center;background:${e.value.style.chart.backgroundColor}`),
+      id: `cluster_${U.value}`,
+      onMouseleave: s[2] || (s[2] = (o) => {
+        se.value = null, A.value = null, l(Z)(!1);
+      }),
+      onMouseenter: s[3] || (s[3] = () => l(Z)(!0))
+    }, [
+      e.value.userOptions.buttons.annotator ? (r(), $(l(Pe), {
+        key: 0,
+        svgRef: l(z),
+        backgroundColor: e.value.style.chart.backgroundColor,
+        color: e.value.style.chart.color,
+        active: N.value,
+        onClose: V
+      }, null, 8, ["svgRef", "backgroundColor", "color", "active"])) : f("", !0),
+      Ue.value ? (r(), y("div", Ot, null, 512)) : f("", !0),
+      e.value.style.chart.title.text ? (r(), y("div", At, [
+        (r(), $(l(Fe), {
+          key: `title_${j.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"]))
+      ])) : f("", !0),
+      e.value.userOptions.show && S.value && (l(q) || l(x)) ? (r(), $(l(Se), {
+        ref_key: "details",
+        ref: Be,
+        key: `user_options_${X.value}`,
+        backgroundColor: e.value.style.chart.backgroundColor,
+        color: e.value.style.chart.color,
+        isPrinting: l(J),
+        isImaging: l(K),
+        uid: U.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,
+        hasTable: e.value.userOptions.buttons.table,
+        hasLabel: e.value.userOptions.buttons.labels,
+        hasFullscreen: e.value.userOptions.buttons.fullscreen,
+        isTooltip: h.value.showTooltip,
+        titles: { ...e.value.userOptions.buttonTitles },
+        chartElement: E.value,
+        position: e.value.userOptions.position,
+        hasAnnotator: e.value.userOptions.buttons.annotator,
+        isAnnotation: N.value,
+        onToggleFullscreen: Xe,
+        onGeneratePdf: l(ee),
+        onGenerateCsv: ae,
+        onGenerateImage: l(te),
+        onToggleTable: ne,
+        onToggleLabels: re,
+        onToggleTooltip: ie,
+        onToggleAnnotator: V,
+        style: B({
+          visibility: l(q) ? l(x) ? "visible" : "hidden" : "visible"
+        })
+      }, et({ _: 2 }, [
+        t.$slots.menuIcon ? {
+          name: "menuIcon",
+          fn: d(({ isOpen: o, color: n }) => [
+            i(t.$slots, "menuIcon", w(T({ isOpen: o, color: n })), void 0, !0)
+          ]),
+          key: "0"
+        } : void 0,
+        t.$slots.optionTooltip ? {
+          name: "optionTooltip",
+          fn: d(() => [
+            i(t.$slots, "optionTooltip", {}, void 0, !0)
+          ]),
+          key: "1"
+        } : void 0,
+        t.$slots.optionPdf ? {
+          name: "optionPdf",
+          fn: d(() => [
+            i(t.$slots, "optionPdf", {}, void 0, !0)
+          ]),
+          key: "2"
+        } : void 0,
+        t.$slots.optionCsv ? {
+          name: "optionCsv",
+          fn: d(() => [
+            i(t.$slots, "optionCsv", {}, void 0, !0)
+          ]),
+          key: "3"
+        } : void 0,
+        t.$slots.optionImg ? {
+          name: "optionImg",
+          fn: d(() => [
+            i(t.$slots, "optionImg", {}, void 0, !0)
+          ]),
+          key: "4"
+        } : void 0,
+        t.$slots.optionTable ? {
+          name: "optionTable",
+          fn: d(() => [
+            i(t.$slots, "optionTable", {}, void 0, !0)
+          ]),
+          key: "5"
+        } : void 0,
+        t.$slots.optionLabels ? {
+          name: "optionLabels",
+          fn: d(() => [
+            i(t.$slots, "optionLabels", {}, void 0, !0)
+          ]),
+          key: "6"
+        } : void 0,
+        t.$slots.optionFullscreen ? {
+          name: "optionFullscreen",
+          fn: d(({ toggleFullscreen: o, isFullscreen: n }) => [
+            i(t.$slots, "optionFullscreen", w(T({ toggleFullscreen: o, isFullscreen: n })), void 0, !0)
+          ]),
+          key: "7"
+        } : void 0,
+        t.$slots.optionAnnotator ? {
+          name: "optionAnnotator",
+          fn: d(({ toggleAnnotator: o, isAnnotator: n }) => [
+            i(t.$slots, "optionAnnotator", w(T({ toggleAnnotator: o, isAnnotator: n })), void 0, !0)
+          ]),
+          key: "8"
+        } : void 0
+      ]), 1032, ["backgroundColor", "color", "isPrinting", "isImaging", "uid", "hasTooltip", "hasPdf", "hasXls", "hasImg", "hasTable", "hasLabel", "hasFullscreen", "isTooltip", "titles", "chartElement", "position", "hasAnnotator", "isAnnotation", "onGeneratePdf", "onGenerateImage", "style"])) : f("", !0),
+      S.value ? (r(), y("svg", {
+        key: 4,
+        ref_key: "svgRef",
+        ref: z,
+        xmlns: l(ht),
+        viewBox: `${l(D).x} ${l(D).y} ${l(D).width} ${l(D).height}`,
+        class: he({ "vue-data-ui-fullscreen--on": I.value, "vue-data-ui-fulscreen--off": !I.value }),
+        style: B(`overflow: hidden; background:transparent;color:${e.value.style.chart.color}`)
+      }, [
+        F(l(Te)),
+        t.$slots["chart-background"] ? (r(), y("foreignObject", {
+          key: 0,
+          x: 0,
+          y: 0,
+          width: v.value.width <= 0 ? 10 : v.value.width,
+          height: v.value.height <= 0 ? 10 : v.value.height,
+          style: {
+            pointerEvents: "none"
+          }
+        }, [
+          i(t.$slots, "chart-background", {}, void 0, !0)
+        ], 8, Nt)) : f("", !0),
+        _("defs", null, [
+          (r(!0), y(tt, null, ot(Object.keys(ze.value), (o) => (r(), y("radialGradient", {
+            id: `gradient_${o}`,
+            cx: "50%",
+            cy: "30%",
+            r: "50%",
+            fx: "50%",
+            fy: "50%"
+          }, [
+            _("stop", {
+              offset: "0%",
+              "stop-color": l(pt)(o, 0.5)
+            }, null, 8, _t),
+            _("stop", {
+              offset: "100%",
+              "stop-color": o
+            }, null, 8, St)
+          ], 8, Ft))), 256))
+        ]),
+        F(l(Ie), {
+          dataset: b.value,
+          color: e.value.style.chart.links.stroke,
+          backgroundColor: e.value.style.chart.backgroundColor
+        }, null, 8, ["dataset", "color", "backgroundColor"]),
+        F(l(Oe), {
+          dataset: b.value,
+          hoveredUid: A.value,
+          stroke: e.value.style.chart.nodes.stroke,
+          strokeHovered: e.value.style.chart.nodes.strokeHovered,
+          onClick: Ze,
+          onHover: Ve
+        }, {
+          node: d(({ node: o }) => [
+            i(t.$slots, "node", w(T({ node: o })), void 0, !0)
+          ]),
+          _: 3
+        }, 8, ["dataset", "hoveredUid", "stroke", "strokeHovered"]),
+        h.value.showDataLabels ? (r(), $(l(Ae), {
+          key: 1,
+          dataset: b.value,
+          color: e.value.style.chart.color,
+          hoveredUid: A.value
+        }, null, 8, ["dataset", "color", "hoveredUid"])) : f("", !0),
+        i(t.$slots, "svg", { svg: v.value }, void 0, !0)
+      ], 14, It)) : f("", !0),
+      t.$slots.watermark ? (r(), y("div", Lt, [
+        i(t.$slots, "watermark", w(T({ isPrinting: l(J) || l(K) })), void 0, !0)
+      ])) : f("", !0),
+      l(Ye) ? (r(), y("div", Dt, [
+        i(t.$slots, "reset-action", { reset: l(ue) }, () => [
+          _("button", {
+            "data-cy-reset": "",
+            tabindex: "0",
+            role: "button",
+            class: "vue-data-ui-refresh-button",
+            style: B({
+              background: e.value.style.chart.backgroundColor
+            }),
+            onClick: s[0] || (s[0] = (o) => l(ue)(!0))
+          }, [
+            F(l($e), {
+              name: "refresh",
+              stroke: e.value.style.chart.color
+            }, null, 8, ["stroke"])
+          ], 4)
+        ], !0)
+      ])) : f("", !0),
+      S.value ? f("", !0) : (r(), $(l(Ne), {
+        key: 7,
+        config: {
+          type: "molecule",
+          style: {
+            backgroundColor: e.value.style.chart.backgroundColor,
+            molecule: {
+              color: "#CCCCCC"
+            }
+          }
+        }
+      }, null, 8, ["config"])),
+      t.$slots.source ? (r(), y("div", Bt, [
+        i(t.$slots, "source", {}, void 0, !0)
+      ], 512)) : f("", !0),
+      F(l(_e), {
+        show: h.value.showTooltip && R.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: E.value,
+        content: L.value,
+        isFullscreen: I.value,
+        isCustom: e.value.style.chart.tooltip.customFormat && typeof e.value.style.chart.tooltip.customFormat == "function"
+      }, {
+        "tooltip-before": d(() => [
+          i(t.$slots, "tooltip-before", w(T({ ...H.value })), void 0, !0)
+        ]),
+        "tooltip-after": d(() => [
+          i(t.$slots, "tooltip-after", w(T({ ...H.value })), void 0, !0)
+        ]),
+        _: 3
+      }, 8, ["show", "backgroundColor", "color", "borderRadius", "borderColor", "borderWidth", "fontSize", "backgroundOpacity", "position", "offsetY", "parent", "content", "isFullscreen", "isCustom"]),
+      S.value ? (r(), $(l(Ce), {
+        key: 9,
+        hideDetails: "",
+        config: {
+          open: h.value.showTable,
+          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
+          }
+        }
+      }, {
+        content: d(() => [
+          (r(), $(l(we), {
+            key: `table_${Y.value}`,
+            colNames: P.value.colNames,
+            head: P.value.head,
+            body: P.value.body,
+            config: P.value.config,
+            title: `${e.value.style.chart.title.text}${e.value.style.chart.title.subtitle.text ? ` : ${e.value.style.chart.title.subtitle.text}` : ""}`,
+            onClose: s[1] || (s[1] = (o) => h.value.showTable = !1)
+          }, {
+            th: d(({ th: o }) => [
+              _("div", {
+                innerHTML: o,
+                style: { display: "flex", "align-items": "center" }
+              }, null, 8, Ut)
+            ]),
+            td: d(({ td: o }) => [
+              lt(st(o.name || o), 1)
+            ]),
+            _: 1
+          }, 8, ["colNames", "head", "body", "config", "title"]))
+        ]),
+        _: 1
+      }, 8, ["config"])) : f("", !0)
+    ], 46, Pt));
+  }
+}, Xt = /* @__PURE__ */ Tt(Rt, [["__scopeId", "data-v-7b4f61ba"]]);
+export {
+  Xt as default
+};