vue-chrts 2.1.0-beta-6 → 2.1.0-beta-8

package/dist/components/Maps/DottedMap/DottedMap.js

@@ -1,13 +1,9 @@
-import { defineComponent as M, ref as $, computed as c, watch as I, createElementBlock as y, openBlock as C, normalizeStyle as S, createElementVNode as O, createCommentVNode as H, renderSlot as m, withModifiers as B, unref as n, createVNode as z, mergeProps as E } from "vue";
-import { REGIONS as V, COUNTRIES as _, DEFAULT_ZOOM as D } from "./regions.js";
-import { USA_PINS as R, WORLD_PINS as L } from "./pins.js";
-import { useMapPanZoom as U } from "./useMapPanZoom.js";
-import j from "./core.js";
-import A from "./MapZoomControls.js";
-const T = {
-  key: 0,
-  class: "absolute top-0 right-0"
-}, F = { class: "absolute bottom-4 right-4 flex flex-col gap-2" }, Y = /* @__PURE__ */ M({
+import { defineComponent as x, ref as W, computed as d, watch as M, openBlock as Z, createElementBlock as H, normalizeStyle as f, createElementVNode as v, withModifiers as $, unref as a, createVNode as I, mergeProps as _, renderSlot as k } from "vue";
+import { REGIONS as B, COUNTRIES as E, DEFAULT_ZOOM as D } from "./regions.js";
+import { USA_PINS as V, WORLD_PINS as L } from "./pins.js";
+import { useMapPanZoom as R } from "./useMapPanZoom.js";
+import U from "./core.js";
+const j = { class: "absolute bottom-4 right-4 flex flex-col gap-2" }, J = /* @__PURE__ */ x({
   __name: "DottedMap",
   props: {
     regionName: { default: "world" },
@@ -34,21 +30,21 @@ const T = {
     backgroundColor: {}
   },
   emits: ["pin-click", "point-click", "pin-add", "pin-remove"],
-  setup(p, { expose: P, emit: b }) {
-    const e = p, l = b, {
-      offset: g,
-      scale: N,
-      zoomIn: h,
-      zoomOut: f,
-      resetView: d,
-      wasClick: v,
-      onWheel: k,
-      onMouseDown: w
-    } = U(), u = $([]), Z = c(() => e.pins ? e.pins : u.value), t = c(() => {
-      const i = V[e.regionName || "world"], o = _[e.regionName || "world"], r = D[e.regionName || "world"] ?? 1, a = e.regionName === "usa" ? R : L, s = {
+  setup(w, { expose: y, emit: C }) {
+    const e = w, l = C, {
+      offset: u,
+      scale: S,
+      zoomIn: z,
+      zoomOut: P,
+      resetView: p,
+      wasClick: m,
+      onWheel: g,
+      onMouseDown: h
+    } = R(), c = W([]), O = d(() => e.pins ? e.pins : c.value), o = d(() => {
+      const i = B[e.regionName || "world"], t = E[e.regionName || "world"], r = D[e.regionName || "world"] ?? 1, n = e.regionName === "usa" ? V : L, s = {
         region: e.region ?? i,
-        countries: e.countries ?? o,
-        pins: e.pins ?? a,
+        countries: e.countries ?? t,
+        pins: e.pins ?? n,
         defaultZoom: e.defaultZoom ?? r,
         color: e.color,
         countryColors: e.countryColors,
@@ -75,96 +71,87 @@ const T = {
           return { ...s, grid: e.grid ?? "vertical" };
       }
     });
-    c(() => e.legend);
-    const W = (i) => {
-      v() && l("pin-click", i);
-    }, x = (i, o) => {
-      if (v() && (l("point-click", i, o), !e.pins)) {
-        const r = u.value.findIndex(
-          (a) => Math.abs(a.lat - o.lat) < 1e-4 && Math.abs(a.lng - o.lng) < 1e-4
+    d(() => e.legend);
+    const b = (i) => {
+      m() && l("pin-click", i);
+    }, N = (i, t) => {
+      if (m() && (l("point-click", i, t), !e.pins)) {
+        const r = c.value.findIndex(
+          (n) => Math.abs(n.lat - t.lat) < 1e-4 && Math.abs(n.lng - t.lng) < 1e-4
         );
         if (r > -1) {
-          const a = u.value.splice(r, 1)[0];
-          l("pin-remove", a, r);
+          const n = c.value.splice(r, 1)[0];
+          l("pin-remove", n, r);
         } else {
-          const a = {
-            lat: o.lat,
-            lng: o.lng,
+          const n = {
+            lat: t.lat,
+            lng: t.lng,
             svgOptions: { color: "var(--ui-text)", radius: 0.15 },
             data: { city: "Custom Pin", region: "Other" }
           };
-          u.value.push(a), l("pin-add", a);
+          c.value.push(n), l("pin-add", n);
         }
       }
     };
-    return I(
+    return M(
       [() => e.regionName, () => e.defaultZoom],
       () => {
-        d(t.value.defaultZoom);
+        p(o.value.defaultZoom);
       },
       { immediate: !0 }
-    ), P({
-      zoomIn: h,
-      zoomOut: f,
-      resetView: () => d(t.value.defaultZoom)
-    }), (i, o) => (C(), y("div", {
+    ), y({
+      zoomIn: z,
+      zoomOut: P,
+      resetView: () => p(o.value.defaultZoom)
+    }), (i, t) => (Z(), H("div", {
       class: "w-full h-full overflow-hidden relative",
-      style: S({
+      style: f({
         width: "100%",
         height: e.maxHeight
       })
     }, [
-      O("div", {
+      v("div", {
         class: "w-full h-full flex items-center justify-center cursor-grab active:cursor-grabbing select-none touch-none",
-        style: S({
-          transform: `translate(${n(g).x}px, ${n(g).y}px) scale(${n(N)})`
+        style: f({
+          transform: `translate(${a(u).x}px, ${a(u).y}px) scale(${a(S)})`
         }),
-        onMousedown: o[0] || (o[0] = //@ts-ignore
-        (...r) => n(w) && n(w)(...r)),
-        onWheel: o[1] || (o[1] = B(
+        onMousedown: t[0] || (t[0] = //@ts-ignore
+        (...r) => a(h) && a(h)(...r)),
+        onWheel: t[1] || (t[1] = $(
           //@ts-ignore
-          (...r) => n(k) && n(k)(...r),
+          (...r) => a(g) && a(g)(...r),
           ["prevent"]
         ))
       }, [
-        z(j, E(i.$attrs, {
+        I(U, _(i.$attrs, {
           width: "100%",
           height: "100%",
-          "map-height": t.value.mapHeight || 60,
-          color: t.value.color || "var(--ui-text-dimmed)",
-          "dot-size": t.value.dotSize || 0.36,
-          grid: t.value.grid,
-          shape: t.value.shape,
-          countries: t.value.countries,
-          region: t.value.region,
-          pins: Z.value,
-          "stroke-width": t.value.strokeWidth,
-          "stroke-opacity": t.value.strokeOpacity,
-          "country-colors": t.value.countryColors,
+          "map-height": o.value.mapHeight || 60,
+          color: o.value.color || "var(--ui-text-dimmed)",
+          "dot-size": o.value.dotSize || 0.36,
+          grid: o.value.grid,
+          shape: o.value.shape,
+          countries: o.value.countries,
+          region: o.value.region,
+          pins: O.value,
+          "stroke-width": o.value.strokeWidth,
+          "stroke-opacity": o.value.strokeOpacity,
+          "country-colors": o.value.countryColors,
           "avoid-outer-pins": e.avoidOuterPins,
           "precomputed-map": e.precomputedMap,
           "background-color": e.backgroundColor,
           class: "w-full h-full object-contain",
-          onPinClick: W,
-          onPointClick: x
+          onPinClick: b,
+          onPointClick: N
         }), null, 16, ["map-height", "color", "dot-size", "grid", "shape", "countries", "region", "pins", "stroke-width", "stroke-opacity", "country-colors", "avoid-outer-pins", "precomputed-map", "background-color"])
       ], 36),
-      p.showControls ? (C(), y("div", T, [
-        m(i.$slots, "controls", {}, () => [
-          z(A, {
-            onZoomIn: n(h),
-            onZoomOut: n(f),
-            onReset: o[2] || (o[2] = (r) => n(d)(t.value.defaultZoom))
-          }, null, 8, ["onZoomIn", "onZoomOut"])
-        ])
-      ])) : H("", !0),
-      O("div", F, [
-        m(i.$slots, "legend")
+      v("div", j, [
+        k(i.$slots, "legend")
       ]),
-      m(i.$slots, "default")
+      k(i.$slots, "default")
     ], 4));
   }
 });
 export {
-  Y as default
+  J as default
 };

package/dist/components/Maps/DottedMap/DottedMap.vue.d.ts

@@ -16,7 +16,6 @@ interface Props extends DottedMapProps {
 declare function __VLS_template(): {
     attrs: Partial<{}>;
     slots: {
-        controls?(_: {}): any;
         legend?(_: {}): any;
         default?(_: {}): any;
     };

package/dist/components/Maps/DottedMap/core.js

@@ -1,4 +1,4 @@
-import { defineComponent as Y, computed as u, createElementBlock as q, openBlock as F, normalizeStyle as L, renderSlot as T, createElementVNode as J } from "vue";
+import { defineComponent as Y, computed as u, openBlock as q, createElementBlock as F, normalizeStyle as L, renderSlot as T, createElementVNode as J } from "vue";
 import { getMap as R, getPin as V } from "./mapUtils.js";
 import D from "../../../data/countries.geo.json.js";
 const G = ["innerHTML"], Z = /* @__PURE__ */ Y({
@@ -94,7 +94,7 @@ const G = ["innerHTML"], Z = /* @__PURE__ */ Y({
         O("point-click", n, l);
       }
     }
-    return (n, e) => (F(), q("div", {
+    return (n, e) => (q(), F("div", {
       class: "dotted-world-map-container",
       style: L({
         backgroundColor: p.backgroundColor,

package/dist/components/Maps/DottedMap/core.vue.d.ts

@@ -19,8 +19,8 @@ declare const __VLS_component: import('vue').DefineComponent<DottedMapProps, {},
     "onPoint-click"?: ((event: MouseEvent, point: any) => any) | undefined;
     "onPin-click"?: ((point: any) => any) | undefined;
 }>, {
-    grid: "vertical" | "diagonal";
     color: string;
+    grid: "vertical" | "diagonal";
     avoidOuterPins: boolean;
     dotSize: number;
     strokeWidth: number;

package/dist/components/Maps/DottedMap/mapUtils.js

@@ -1,5 +1,5 @@
 import y from "../../../node_modules/.pnpm/proj4@2.20.2/node_modules/proj4/lib/index.js";
-import Y from "../../../node_modules/.pnpm/@turf_boolean-point-in-polygon@7.3.1/node_modules/@turf/boolean-point-in-polygon/dist/esm/index.js";
+import Y from "../../../node_modules/.pnpm/@turf_boolean-point-in-polygon@7.3.2/node_modules/@turf/boolean-point-in-polygon/dist/esm/index.js";
 y.defs("GOOGLE") || y.defs("GOOGLE", "+proj=merc +a=6378137 +b=6378137 +lat_ts=0.0 +lon_0=0.0 +x_0=0.0 +y_0=0 +k=1.0 +units=m +nadgrids=@null +wktext +no_defs");
 const h = {
   lat: { min: -56, max: 71 },

package/dist/components/Maps/TopoJSONMap/TopoJSONMap.js

@@ -1,17 +1,17 @@
-import { defineComponent as O, useSlots as A, useTemplateRef as y, ref as C, computed as c, createElementBlock as h, openBlock as d, normalizeStyle as f, createVNode as s, createCommentVNode as m, createElementVNode as J, unref as r, withCtx as R, createBlock as $, renderSlot as v } from "vue";
+import { defineComponent as M, useSlots as O, useTemplateRef as y, ref as C, computed as u, openBlock as c, createElementBlock as h, normalizeStyle as d, createVNode as l, unref as r, withCtx as A, createBlock as R, createCommentVNode as f, createElementVNode as $, renderSlot as v } from "vue";
 import { VisSingleContainer as D, VisTopoJSONMap as K, VisTooltip as H, VisBulletLegend as q } from "@unovis/vue";
-import { TopoJSONMap as p } from "@unovis/ts";
+import { TopoJSONMap as s } from "@unovis/ts";
 import G from "../../Tooltip.js";
-import { LegendPosition as I } from "../../../types.js";
+import { LegendPosition as I } from "../../../packages/shared/dist/index.js";
 const Q = {
   ref: "slotWrapper",
   style: { display: "none" }
-}, et = /* @__PURE__ */ O({
+}, et = /* @__PURE__ */ M({
   __name: "TopoJSONMap",
   props: {
     mapFeatureKey: {},
     data: {},
-    topojson: {},
+    topoJson: {},
     zoomFactor: { default: 1 },
     zoomExtent: { default: () => [0.5, 6] },
     projection: {},
@@ -47,55 +47,55 @@ const Q = {
   },
   emits: ["mouseenter", "mouseleave", "feature-click", "point-click"],
   setup(T, { emit: S }) {
-    const e = T, a = S, w = A(), g = y("slotWrapper"), n = C(), F = c(() => {
+    const e = T, m = S, w = O(), g = y("slotWrapper"), n = C(), F = u(() => {
       var t;
       return (t = e.legendPosition) == null ? void 0 : t.startsWith("top");
-    }), P = c(() => {
-      var t, i;
-      return (t = e.legendPosition) != null && t.includes("left") ? "flex-start" : (i = e.legendPosition) != null && i.includes("right") ? "flex-end" : "center";
+    }), P = u(() => {
+      var t, o;
+      return (t = e.legendPosition) != null && t.includes("left") ? "flex-start" : (o = e.legendPosition) != null && o.includes("right") ? "flex-end" : "center";
     });
     function k(t) {
       return typeof window > "u" ? "" : g.value ? g.value.innerHTML : "";
     }
     const V = {
-      [p.selectors.feature]: (t) => {
-        const i = t.data ?? t.datum ?? {}, o = t.properties ?? {};
-        return n.value = { ...o, ...i, ...t }, k();
+      [s.selectors.feature]: (t) => {
+        const o = t.data ?? t.datum ?? {}, i = t.properties ?? {};
+        return n.value = { ...i, ...o, ...t }, k();
       },
-      [p.selectors.point]: (t) => (n.value = t, k())
-    }, u = y("map"), z = (t) => e.pointLabel ? e.pointLabel(t) : t.label, W = (t) => typeof e.pointSize == "function" ? e.pointSize(t) : e.pointSize ?? t.radius ?? 5, j = (t) => typeof e.pointColor == "function" ? e.pointColor(t) : e.pointColor ?? t.color, x = (t) => {
-      var o;
+      [s.selectors.point]: (t) => (n.value = t, k())
+    }, p = y("map"), z = (t) => e.pointLabel ? e.pointLabel(t) : t.label, W = (t) => typeof e.pointSize == "function" ? e.pointSize(t) : e.pointSize ?? t.radius ?? 5, x = (t) => typeof e.pointColor == "function" ? e.pointColor(t) : e.pointColor ?? t.color, _ = (t) => {
+      var i;
       if (typeof e.linkColor == "function") return e.linkColor(t);
-      const i = typeof t.source == "object" ? t.source : (o = e.data.points) == null ? void 0 : o.find((M) => M.id === t.target);
-      return e.linkColor ?? t.color ?? (i == null ? void 0 : i.color);
-    }, _ = (t) => typeof e.areaColor == "function" ? e.areaColor(t) : e.areaColor ?? t.color, b = (t) => typeof e.linkWidth == "function" ? e.linkWidth(t) : e.linkWidth ?? t.width ?? 1, L = C(null), B = (t, i) => {
-      a("feature-click", t, i);
-    }, N = (t, i) => {
-      var o;
-      L.value = t, a("point-click", t, i), (o = u.value) != null && o.component && u.value.component._fitToPoints([t], 0.1);
-    }, E = (t) => e.tooltipTitleFormatter ? e.tooltipTitleFormatter(t) : t ? ((t == null ? void 0 : t.properties) ?? {}).name ?? "" : "", l = c(() => e.data);
-    return (t, i) => (d(), h("div", {
-      style: f({
+      const o = typeof t.source == "object" ? t.source : (i = e.data.points) == null ? void 0 : i.find((E) => E.id === t.target);
+      return e.linkColor ?? t.color ?? (o == null ? void 0 : o.color);
+    }, b = (t) => typeof e.areaColor == "function" ? e.areaColor(t) : e.areaColor ?? t.color, L = (t) => typeof e.linkWidth == "function" ? e.linkWidth(t) : e.linkWidth ?? t.width ?? 1, j = C(null), B = (t, o) => {
+      m("feature-click", t, o);
+    }, N = (t, o) => {
+      var i;
+      j.value = t, m("point-click", t, o), (i = p.value) != null && i.component && p.value.component._fitToPoints([t], 0.1);
+    }, J = (t) => e.tooltipTitleFormatter ? e.tooltipTitleFormatter(t) : t ? ((t == null ? void 0 : t.properties) ?? {}).name ?? "" : "", a = u(() => e.data);
+    return (t, o) => (c(), h("div", {
+      style: d({
         display: "flex",
         flexDirection: F.value ? "column-reverse" : "column",
         gap: "var(--vis-legend-spacing)"
       })
     }, [
-      s(r(D), {
+      l(r(D), {
         duration: e.duration,
-        data: l.value,
+        data: a.value,
         height: e.height,
         width: e.width,
         padding: e.padding
       }, {
-        default: R(() => [
-          s(r(K), {
+        default: A(() => [
+          l(r(K), {
             ref_key: "map",
-            ref: u,
-            data: l.value.areas,
-            "point-data": l.value.points,
-            "link-data": l.value.links,
-            topojson: e.topojson,
+            ref: p,
+            data: a.value.areas,
+            "point-data": a.value.points,
+            "link-data": a.value.links,
+            topojson: e.topoJson,
             projection: e.projection,
             "zoom-factor": e.zoomFactor,
             "zoom-extent": e.zoomExtent,
@@ -103,64 +103,62 @@ const Q = {
             fitViewPadding: e.fitViewPadding,
             pointLabel: z,
             pointRadius: W,
-            pointColor: j,
+            pointColor: x,
             pointCursor: e.pointCursor,
             pointStrokeWidth: e.pointStrokeWidth,
-            linkColor: x,
-            linkWidth: b,
+            linkColor: _,
+            linkWidth: L,
             linkCursor: e.linkCursor,
             mapFitToPoints: e.mapFitToPoints,
-            areaColor: _,
+            areaColor: b,
             areaCursor: e.areaCursor,
             "map-feature-name": e.mapFeatureKey,
             events: {
-              [r(p).selectors.feature]: {
-                click: B,
-                mouseover: (o) => a("mouseenter", o),
-                mouseout: (o) => a("mouseleave", o)
+              [r(s).selectors.feature]: {
+                click: B
               },
-              [r(p).selectors.point]: {
+              [r(s).selectors.point]: {
                 click: N
               }
             }
           }, null, 8, ["data", "point-data", "link-data", "topojson", "projection", "zoom-factor", "zoom-extent", "fitView", "fitViewPadding", "pointCursor", "pointStrokeWidth", "linkCursor", "mapFitToPoints", "areaCursor", "map-feature-name", "events"]),
-          e.hideTooltip ? m("", !0) : (d(), $(r(H), {
+          e.hideTooltip ? f("", !0) : (c(), R(r(H), {
             key: 0,
             triggers: V
           }))
         ]),
         _: 1
       }, 8, ["duration", "data", "height", "width", "padding"]),
-      e.categories && !e.hideLegend ? (d(), h("div", {
+      e.categories && !e.hideLegend ? (c(), h("div", {
         key: 0,
-        style: f({
+        style: d({
           display: "flex",
           justifyContent: P.value
         })
       }, [
-        s(r(q), {
-          style: f([
+        l(r(q), {
+          style: d([
             e.legendStyle,
             "display: flex; gap: var(--vis-legend-spacing);"
           ]),
-          items: Object.values(e.categories).map((o) => ({
-            ...o,
-            color: Array.isArray(o.color) ? o.color[0] : o.color
+          items: Object.values(e.categories).map((i) => ({
+            ...i,
+            color: Array.isArray(i.color) ? i.color[0] : i.color
           }))
         }, null, 8, ["style", "items"])
-      ], 4)) : m("", !0),
-      J("div", Q, [
+      ], 4)) : f("", !0),
+      $("div", Q, [
         r(w).tooltip ? v(t.$slots, "tooltip", {
           key: 0,
           values: n.value
         }) : n.value ? v(t.$slots, "fallback", { key: 1 }, () => [
-          s(G, {
+          l(G, {
             data: n.value,
             categories: e.categories ?? {},
-            "title-formatter": e.tooltipTitleFormatter ?? E,
+            "title-formatter": e.tooltipTitleFormatter ?? J,
             "y-formatter": e.yFormatter
           }, null, 8, ["data", "categories", "title-formatter", "y-formatter"])
-        ]) : m("", !0)
+        ]) : f("", !0)
       ], 512)
     ], 4));
   }

package/dist/components/Maps/TopoJSONMap/types.d.ts

@@ -4,7 +4,11 @@ import { MapData, MapPoint } from '../types';
 export type MapsData<T extends Record<string, any>> = {
     mapFeatureKey: keyof T;
     data: MapData;
-    topojson: any;
+    /**
+     * TopoJSON data for the map.
+     * @see https://github.com/topojson/topojson-specification/
+     */
+    topoJson: any;
     zoomFactor?: number;
     zoomExtent?: [number, number];
     projection?: GeoProjection;

package/dist/components/Maps/types.d.ts

@@ -22,7 +22,6 @@ export type MapData = {
     areas?: MapArea[];
 };
 export interface TopoJSONMapProps {
-    mapType: 'uk' | 'france' | 'usa';
     data: MapData;
     width?: number;
     height?: number;

package/dist/components/SankeyChart/SankeyChart.js

@@ -1,12 +1,12 @@
-import { defineComponent as W, useSlots as x, useTemplateRef as V, ref as L, computed as f, createElementBlock as c, openBlock as d, normalizeStyle as r, createVNode as a, createCommentVNode as s, createElementVNode as p, unref as o, withCtx as P, createBlock as w, renderSlot as h } from "vue";
-import { SankeyNodeAlign as A, Sankey as B } from "@unovis/ts";
-import { VisSingleContainer as N, VisTooltip as H, VisSankey as T, VisBulletLegend as z } from "@unovis/vue";
-import M from "../Tooltip.js";
-import { LegendPosition as O } from "../../types.js";
-const F = {
+import { defineComponent as L, useSlots as p, useTemplateRef as P, ref as w, computed as y, openBlock as d, createElementBlock as b, normalizeStyle as r, createVNode as a, unref as o, withCtx as A, createBlock as B, createCommentVNode as s, createElementVNode as N, renderSlot as m } from "vue";
+import { SankeyNodeAlign as H, Sankey as T } from "@unovis/ts";
+import { VisSingleContainer as z, VisTooltip as M, VisSankey as O, VisBulletLegend as F } from "@unovis/vue";
+import D from "../Tooltip.js";
+import { LegendPosition as $ } from "../../packages/shared/dist/index.js";
+const j = {
   ref: "slotWrapper",
   style: { display: "none" }
-}, J = /* @__PURE__ */ W({
+}, I = /* @__PURE__ */ L({
   __name: "SankeyChart",
   props: {
     data: {},
@@ -19,7 +19,7 @@ const F = {
     }) },
     categories: {},
     hideLegend: { type: Boolean, default: !1 },
-    legendPosition: { default: O.BottomCenter },
+    legendPosition: { default: $.BottomCenter },
     legendStyle: { default: void 0 },
     label: {},
     subLabel: {},
@@ -27,12 +27,12 @@ const F = {
     linkColor: {},
     linkValue: {},
     nodeWidth: { default: 10 },
-    nodeAlign: { default: A.Justify },
+    nodeAlign: { default: H.Justify },
     nodePadding: { default: 10 },
     nodeSort: {},
     linkSort: {},
     iterations: { default: 32 },
-    hideTooltip: { type: Boolean },
+    hideTooltip: { type: Boolean, default: !1 },
     tooltip: { default: () => ({
       followCursor: !0
     }) },
@@ -43,66 +43,69 @@ const F = {
     duration: { default: 600 }
   },
   emits: ["click"],
-  setup(e, { emit: y }) {
-    const b = y, t = e, m = x(), k = V("slotWrapper"), i = L(), S = f(() => t.legendPosition.startsWith("top")), C = f(() => t.legendPosition.includes("left") ? "flex-start" : t.legendPosition.includes("right") ? "flex-end" : "center");
-    function v(n) {
+  setup(e, { emit: k }) {
+    const S = k, t = e, C = p(), v = P("slotWrapper"), i = w(), W = y(() => t.legendPosition.startsWith("top")), x = y(() => t.legendPosition.includes("left") ? "flex-start" : t.legendPosition.includes("right") ? "flex-end" : "center");
+    function V(n) {
       i.value = n;
     }
-    return (n, u) => (d(), c("div", {
+    return (n, u) => (d(), b("div", {
       style: r({
         display: "flex",
-        flexDirection: S.value ? "column-reverse" : "column",
+        flexDirection: W.value ? "column-reverse" : "column",
         gap: "var(--vis-legend-spacing)"
       }),
-      onClick: u[0] || (u[0] = (l) => b("click", l))
+      onClick: u[0] || (u[0] = (l) => S("click", l))
     }, [
-      a(o(N), {
+      a(o(z), {
         padding: e.padding,
         height: e.height,
         duration: e.duration
       }, {
-        default: P(() => [
-          e.hideTooltip ? s("", !0) : (d(), w(o(H), {
-            key: 0,
-            followCursor: t.tooltip.followCursor,
-            "show-delay": t.tooltip.showDelay,
-            "hide-delay": t.tooltip.hideDelay,
-            triggers: {
-              [o(B).selectors.node]: (l) => {
-                var g;
-                return v(l), l ? (g = k.value) == null ? void 0 : g.innerHTML : "";
+        default: A(() => {
+          var l, g, f;
+          return [
+            e.hideTooltip ? s("", !0) : (d(), B(o(M), {
+              key: 0,
+              followCursor: (l = t.tooltip) == null ? void 0 : l.followCursor,
+              "show-delay": (g = t.tooltip) == null ? void 0 : g.showDelay,
+              "hide-delay": (f = t.tooltip) == null ? void 0 : f.hideDelay,
+              triggers: {
+                [o(T).selectors.node]: (c) => {
+                  var h;
+                  return V(c), c ? (h = v.value) == null ? void 0 : h.innerHTML : "";
+                }
               }
-            }
-          }, null, 8, ["followCursor", "show-delay", "hide-delay", "triggers"])),
-          a(o(T), {
-            data: e.data,
-            label: e.label,
-            subLabel: e.subLabel,
-            nodeColor: e.nodeColor,
-            linkColor: e.linkColor,
-            linkValue: e.linkValue,
-            nodeWidth: e.nodeWidth,
-            nodeAlign: e.nodeAlign,
-            nodePadding: e.nodePadding,
-            nodeSort: e.nodeSort,
-            linkSort: e.linkSort,
-            iterations: e.iterations,
-            highlightSubtreeOnHover: e.highlightSubtreeOnHover,
-            labelFontSize: e.labelFontSize,
-            labelColor: e.labelColor,
-            labelMaxWidth: e.labelMaxWidth
-          }, null, 8, ["data", "label", "subLabel", "nodeColor", "linkColor", "linkValue", "nodeWidth", "nodeAlign", "nodePadding", "nodeSort", "linkSort", "iterations", "highlightSubtreeOnHover", "labelFontSize", "labelColor", "labelMaxWidth"])
-        ]),
+            }, null, 8, ["followCursor", "show-delay", "hide-delay", "triggers"])),
+            a(o(O), {
+              data: e.data,
+              label: e.label,
+              subLabel: e.subLabel,
+              nodeColor: e.nodeColor,
+              linkColor: e.linkColor,
+              linkValue: e.linkValue,
+              nodeWidth: e.nodeWidth,
+              nodeAlign: e.nodeAlign,
+              nodePadding: e.nodePadding,
+              nodeSort: e.nodeSort,
+              linkSort: e.linkSort,
+              iterations: e.iterations,
+              highlightSubtreeOnHover: e.highlightSubtreeOnHover,
+              labelFontSize: e.labelFontSize,
+              labelColor: e.labelColor,
+              labelMaxWidth: e.labelMaxWidth
+            }, null, 8, ["data", "label", "subLabel", "nodeColor", "linkColor", "linkValue", "nodeWidth", "nodeAlign", "nodePadding", "nodeSort", "linkSort", "iterations", "highlightSubtreeOnHover", "labelFontSize", "labelColor", "labelMaxWidth"])
+          ];
+        }),
         _: 1
       }, 8, ["padding", "height", "duration"]),
-      !t.hideLegend && t.categories ? (d(), c("div", {
+      !t.hideLegend && t.categories ? (d(), b("div", {
         key: 0,
         style: r({
           display: "flex",
-          justifyContent: C.value
+          justifyContent: x.value
         })
       }, [
-        a(o(z), {
+        a(o(F), {
           style: r([
             t.legendStyle,
             "display: flex; gap: var(--vis-legend-spacing);"
@@ -113,12 +116,12 @@ const F = {
           }))
         }, null, 8, ["style", "items"])
       ], 4)) : s("", !0),
-      p("div", F, [
-        o(m).tooltip ? h(n.$slots, "tooltip", {
+      N("div", j, [
+        o(C).tooltip ? m(n.$slots, "tooltip", {
           key: 0,
           node: i.value
-        }) : i.value ? h(n.$slots, "fallback", { key: 1 }, () => [
-          a(M, {
+        }) : i.value ? m(n.$slots, "fallback", { key: 1 }, () => [
+          a(D, {
             data: i.value,
             categories: t.categories ?? {},
             "title-formatter": (l) => l.label || l.id || "Node"
@@ -129,5 +132,5 @@ const F = {
   }
 });
 export {
-  J as default
+  I as default
 };