@stachelock/ui 0.6.15 → 0.6.17

package/dist/UiMapAll.vue_vue_type_script_setup_true_lang-DKcK0HmT.js

@@ -0,0 +1,501 @@
+import { defineComponent as de, ref as m, computed as B, watch as E, onMounted as ce, createElementBlock as g, openBlock as f, Fragment as S, createVNode as C, mergeProps as fe, withCtx as M, createElementVNode as x, createCommentVNode as y, renderSlot as Z, normalizeClass as d, unref as b, toDisplayString as U, renderList as K, createBlock as q, nextTick as me } from "vue";
+import { PlusIcon as ge, MinusIcon as ve, ArrowsPointingOutIcon as he } from "@heroicons/vue/24/outline";
+import pe from "./maps/UiMap.js";
+import G from "./maps/UiMapMarker.js";
+import ye from "./maps/UiInfoWindow.js";
+import { u as be } from "./useMap-CM59TKX6.js";
+import { g as H } from "./mapThemes-DFE9fZm3.js";
+const ke = { class: "sl-flex sl-flex-col sl-gap-2" }, Se = /* @__PURE__ */ de({
+  __name: "UiMapAll",
+  props: {
+    /** Google Maps API key */
+    apiKey: {
+      type: String,
+      default: ""
+    },
+    /** Google Cloud Map ID (required for Advanced Markers) */
+    googleMapId: {
+      type: String,
+      default: ""
+    },
+    /** Array of markers or data objects */
+    items: {
+      type: Array,
+      default: () => []
+    },
+    /** Custom coordinate extractor for data objects */
+    coordinateExtractor: {
+      type: Function,
+      default: void 0
+    },
+    /** ID field for data objects */
+    idField: {
+      type: String,
+      default: "id"
+    },
+    /** Title field for data objects */
+    titleField: {
+      type: String,
+      default: "name"
+    },
+    /** Initial map center */
+    center: {
+      type: Object,
+      default: () => ({ lat: 39.8283, lng: -98.5795 })
+      // US center
+    },
+    /** Initial zoom level */
+    zoom: {
+      type: Number,
+      default: 4
+    },
+    /** Map width */
+    width: {
+      type: String,
+      default: "100%"
+    },
+    /** Map height */
+    height: {
+      type: String,
+      default: "400px"
+    },
+    /** Map theme */
+    theme: {
+      type: String,
+      default: "ultraLight"
+    },
+    /** Auto-switch theme based on dark mode */
+    autoTheme: {
+      type: Boolean,
+      default: !0
+    },
+    /** Enable clustering */
+    enableClustering: {
+      type: Boolean,
+      default: !0
+    },
+    /** Clustering options */
+    clusteringOptions: {
+      type: Object,
+      default: () => ({
+        minimumClusterSize: 2,
+        maxZoom: 15,
+        gridSize: 60,
+        maxMarkersWithoutClustering: 50
+        // Lower threshold for better performance
+      })
+    },
+    /** Maximum markers to render */
+    maxMarkers: {
+      type: Number,
+      default: 500
+    },
+    /** Marker color */
+    markerColor: {
+      type: String,
+      default: "primary"
+    },
+    /** Marker size */
+    markerSize: {
+      type: String,
+      default: "md"
+    },
+    /** Use pin-style markers */
+    pinMarkers: {
+      type: Boolean,
+      default: !1
+    },
+    /** Custom marker icon */
+    markerIcon: {
+      type: Object,
+      default: void 0
+    },
+    /** Show info window on marker click */
+    showInfoWindow: {
+      type: Boolean,
+      default: !0
+    },
+    /** Show avatar in info window */
+    showInfoAvatar: {
+      type: Boolean,
+      default: !0
+    },
+    /** Info window actions */
+    infoActions: {
+      type: Array,
+      default: () => []
+    },
+    /** Info window field mapping */
+    infoFields: {
+      type: Array,
+      default: () => []
+    },
+    /** Data loading state */
+    isDataLoading: {
+      type: Boolean,
+      default: !1
+    },
+    /** Data loading text */
+    dataLoadingText: {
+      type: String,
+      default: "Loading data..."
+    },
+    /** Show marker count badge */
+    showMarkerCount: {
+      type: Boolean,
+      default: !1
+    },
+    /** Show controls */
+    showControls: {
+      type: Boolean,
+      default: !0
+    },
+    /** Show default zoom controls */
+    showDefaultZoomControls: {
+      type: Boolean,
+      default: !0
+    },
+    /** Show fit to markers button */
+    showFitButton: {
+      type: Boolean,
+      default: !0
+    },
+    /** Controls position */
+    controlsPosition: {
+      type: String,
+      default: "bottom-left"
+    },
+    /** Auto fit to markers on load */
+    autoFit: {
+      type: Boolean,
+      default: !1
+    },
+    /** Fit padding */
+    fitPadding: {
+      type: Number,
+      default: 50
+    }
+  },
+  emits: ["marker-click", "cluster-click", "info-action", "ready", "error", "update:visible-markers", "update:center", "update:zoom"],
+  setup(n, { expose: J, emit: Q }) {
+    function X(e, o) {
+      let t = null;
+      return (...c) => {
+        t && clearTimeout(t), t = setTimeout(() => e(...c), o);
+      };
+    }
+    const l = n, h = Q, {
+      markers: z,
+      clusters: k,
+      processMarkers: F,
+      markersFromData: Y
+    } = be({
+      clustering: l.enableClustering ? {
+        enabled: !0,
+        ...l.clusteringOptions
+      } : { enabled: !1 }
+    }), T = m(!1), w = m(null), A = m(l.center), i = m(l.zoom), u = m(null), v = m(null), p = m(null), O = m(!1), r = m({
+      visible: !1,
+      loading: !1,
+      error: null,
+      title: "",
+      subtitle: "",
+      imageUrl: "",
+      details: [],
+      actions: [],
+      data: void 0
+    }), D = B(() => ({
+      apiKey: l.apiKey,
+      googleMapId: l.googleMapId,
+      width: l.width,
+      height: l.height,
+      theme: l.theme,
+      autoTheme: l.autoTheme
+    })), a = B(() => {
+      if (!l.items.length) return [];
+      const e = l.items[0];
+      return "position" in e && "id" in e ? l.items : Y(
+        l.items,
+        l.coordinateExtractor,
+        l.idField
+      ).slice(0, l.maxMarkers);
+    }), W = B(() => {
+      if (!l.enableClustering) return !1;
+      const e = l.clusteringOptions?.maxZoom ?? 15;
+      return i.value < e && k.value.length > 0;
+    }), N = X((e, o) => {
+      T.value || (T.value = !0, me(() => {
+        z.value = a.value, F(e, o), T.value = !1;
+      }));
+    }, 150), j = B(() => {
+      if (W.value && l.enableClustering) {
+        const e = /* @__PURE__ */ new Set();
+        return k.value.forEach((o) => {
+          o.markers.forEach((t) => e.add(t.id));
+        }), a.value.filter((o) => !e.has(o.id)).slice(0, l.maxMarkers);
+      }
+      return a.value.slice(0, l.maxMarkers);
+    });
+    function _(e) {
+      if (p.value = e.map, O.value = !0, h("ready", e), l.enableClustering && a.value.length > 0) {
+        z.value = a.value;
+        const o = e.map.getBounds();
+        if (o) {
+          const t = o.getNorthEast(), c = o.getSouthWest(), s = {
+            north: t.lat(),
+            south: c.lat(),
+            east: t.lng(),
+            west: c.lng()
+          };
+          u.value = s;
+          const P = e.map.getZoom() || i.value;
+          i.value = P, F(P, void 0);
+        }
+      }
+      l.autoFit && a.value.length > 0 && setTimeout(() => I(), 100);
+    }
+    function ee() {
+      L();
+    }
+    function te(e) {
+      const o = e.bounds;
+      u.value && !(Math.abs(u.value.north - o.north) > 1e-3 || Math.abs(u.value.south - o.south) > 1e-3 || Math.abs(u.value.east - o.east) > 1e-3 || Math.abs(u.value.west - o.west) > 1e-3) || (u.value = o, l.enableClustering && a.value.length > 0 && N(i.value, o));
+    }
+    function le(e) {
+      i.value !== e.zoom && (i.value = e.zoom, h("update:zoom", e.zoom), l.enableClustering && u.value && a.value.length > 0 && N(e.zoom, u.value));
+    }
+    function oe() {
+    }
+    function ae(e) {
+      h("error", e);
+    }
+    function se(e) {
+      h("marker-click", e), l.showInfoWindow && (v.value = e.marker, R(e.marker));
+    }
+    function ne(e, o) {
+      h("cluster-click", { cluster: e, markers: e.markers });
+      const t = new google.maps.LatLngBounds();
+      e.markers.forEach((c) => t.extend(c.position)), o.fitBounds(t, l.fitPadding);
+    }
+    function R(e) {
+      const o = e.data;
+      r.value = {
+        visible: !0,
+        loading: !1,
+        error: null,
+        title: e.title || o?.[l.titleField] || "Details",
+        subtitle: o?.subtitle || "",
+        imageUrl: o?.imageUrl || o?.profile_image || o?.image || "",
+        details: l.infoFields.length > 0 ? l.infoFields.map((t) => ({
+          label: t.label,
+          value: o?.[t.field] || "",
+          type: t.type
+        })) : [],
+        actions: l.infoActions,
+        data: e.data
+      };
+    }
+    function L() {
+      r.value.visible = !1, v.value = null;
+    }
+    function re() {
+      v.value && R(v.value);
+    }
+    function ie(e) {
+      h("info-action", { ...e, marker: v.value || void 0 });
+    }
+    function ue(e) {
+      return {
+        path: 0,
+        // google.maps.SymbolPath.CIRCLE
+        scale: Math.min(20 + Math.log(e.size) * 5, 40),
+        fillColor: H(e.size),
+        fillOpacity: 0.8,
+        strokeColor: "#ffffff",
+        strokeWeight: 2
+      };
+    }
+    function $() {
+      if (w.value) {
+        const e = i.value;
+        w.value.setZoom?.(Math.min(e + 1, 21));
+      }
+    }
+    function V() {
+      if (w.value) {
+        const e = i.value;
+        w.value.setZoom?.(Math.max(e - 1, 1));
+      }
+    }
+    function I() {
+      if (!p.value || a.value.length === 0) return;
+      const e = new google.maps.LatLngBounds();
+      a.value.forEach((o) => e.extend(o.position)), p.value.fitBounds(e, l.fitPadding);
+    }
+    return E(() => l.items, () => {
+      z.value = a.value, l.enableClustering && u.value && a.value.length > 0 && F(i.value, u.value), l.autoFit && O.value && a.value.length > 0 && I();
+    }, { deep: !0 }), E(() => l.center, (e) => {
+      A.value = e;
+    }), E(() => l.zoom, (e) => {
+      i.value = e;
+    }), ce(() => {
+      z.value = a.value;
+    }), J({
+      getMap: () => p.value,
+      fitToMarkers: I,
+      zoomIn: $,
+      zoomOut: V,
+      panTo: (e) => p.value?.panTo(e),
+      setZoom: (e) => p.value?.setZoom(e),
+      closeInfoWindow: L,
+      getMarkers: () => a.value,
+      getVisibleMarkers: () => j.value,
+      getClusters: () => k.value,
+      getClusterIcon: ue
+    }), (e, o) => (f(), g(S, null, [
+      C(pe, fe({
+        ref_key: "mapRef",
+        ref: w
+      }, D.value, {
+        "show-custom-controls": n.showControls,
+        "show-default-zoom-controls": n.showDefaultZoomControls,
+        "controls-position": n.controlsPosition,
+        onReady: _,
+        onClick: ee,
+        onBoundsChanged: te,
+        onZoomChanged: le,
+        onIdle: oe,
+        onError: ae,
+        center: A.value,
+        "onUpdate:center": o[0] || (o[0] = (t) => A.value = t),
+        zoom: i.value,
+        "onUpdate:zoom": o[1] || (o[1] = (t) => i.value = t)
+      }), {
+        default: M(({ ready: t, map: c }) => [
+          t && c ? (f(), g(S, { key: 0 }, [
+            W.value ? (f(!0), g(S, { key: 0 }, K(b(k), (s) => (f(), q(G, {
+              key: s.id,
+              position: s.position,
+              id: s.id,
+              title: `${s.size} items in this area`,
+              ready: t,
+              cluster: !0,
+              "cluster-size": s.size,
+              "cluster-color": b(H)(s.size),
+              "z-index": 1e3,
+              onClick: (P) => ne(s, c)
+            }, null, 8, ["position", "id", "title", "ready", "cluster-size", "cluster-color", "onClick"]))), 128)) : y("", !0),
+            (f(!0), g(S, null, K(j.value, (s) => (f(), q(G, {
+              key: s.id,
+              position: s.position,
+              id: s.id,
+              title: s.title,
+              data: s.data,
+              ready: t,
+              color: n.markerColor,
+              size: n.markerSize,
+              pin: n.pinMarkers,
+              icon: n.markerIcon,
+              "z-index": 100,
+              onClick: se
+            }, null, 8, ["position", "id", "title", "data", "ready", "color", "size", "pin", "icon"]))), 128))
+          ], 64)) : y("", !0)
+        ]),
+        overlay: M(({ isDark: t }) => [
+          n.isDataLoading ? (f(), g("div", {
+            key: 0,
+            class: d(["sl-absolute sl-top-4 sl-left-4 sl-z-10 sl-flex sl-items-center sl-gap-2 sl-px-3 sl-py-2 sl-rounded-lg sl-shadow-md", t ? "sl-bg-gray-800" : "sl-bg-white"])
+          }, [
+            x("div", {
+              class: d(["sl-animate-spin sl-h-4 sl-w-4 sl-border-2 sl-border-t-transparent sl-rounded-full", t ? "sl-border-primary-400" : "sl-border-primary-600"])
+            }, null, 2),
+            x("span", {
+              class: d(["sl-text-sm", t ? "sl-text-gray-300" : "sl-text-gray-600"])
+            }, U(n.dataLoadingText), 3)
+          ], 2)) : y("", !0),
+          n.showMarkerCount && a.value.length > 0 ? (f(), g("div", {
+            key: 1,
+            class: d(["sl-absolute sl-top-4 sl-right-4 sl-z-10 sl-px-2 sl-py-1 sl-rounded-md sl-text-xs sl-font-medium", t ? "sl-bg-gray-800/90 sl-text-gray-300" : "sl-bg-white/90 sl-text-gray-700"])
+          }, U(a.value.length) + " " + U(a.value.length === 1 ? "marker" : "markers"), 3)) : y("", !0),
+          Z(e.$slots, "overlay", {
+            isDark: t,
+            markers: a.value,
+            clusters: b(k)
+          })
+        ]),
+        controls: M(({ isDark: t }) => [
+          x("div", ke, [
+            n.showDefaultZoomControls ? (f(), g("div", {
+              key: 0,
+              class: d(["sl-flex sl-flex-col sl-rounded-lg sl-shadow-md sl-overflow-hidden", t ? "sl-bg-gray-800" : "sl-bg-white"])
+            }, [
+              x("button", {
+                onClick: $,
+                class: d(["sl-w-8 sl-h-8 sl-flex sl-items-center sl-justify-center sl-border-b sl-transition-colors", t ? "sl-border-gray-700 hover:sl-bg-gray-700" : "sl-border-gray-200 hover:sl-bg-gray-50"]),
+                title: "Zoom in"
+              }, [
+                C(b(ge), {
+                  class: d(["sl-w-4 sl-h-4", t ? "sl-text-gray-300" : "sl-text-gray-600"])
+                }, null, 8, ["class"])
+              ], 2),
+              x("button", {
+                onClick: V,
+                class: d(["sl-w-8 sl-h-8 sl-flex sl-items-center sl-justify-center sl-transition-colors", t ? "hover:sl-bg-gray-700" : "hover:sl-bg-gray-50"]),
+                title: "Zoom out"
+              }, [
+                C(b(ve), {
+                  class: d(["sl-w-4 sl-h-4", t ? "sl-text-gray-300" : "sl-text-gray-600"])
+                }, null, 8, ["class"])
+              ], 2)
+            ], 2)) : y("", !0),
+            n.showFitButton && a.value.length > 0 ? (f(), g("button", {
+              key: 1,
+              onClick: I,
+              class: d(["sl-w-8 sl-h-8 sl-flex sl-items-center sl-justify-center sl-rounded-lg sl-shadow-md sl-transition-colors", t ? "sl-bg-gray-800 hover:sl-bg-gray-700" : "sl-bg-white hover:sl-bg-gray-50"]),
+              title: "Fit to all markers"
+            }, [
+              C(b(he), {
+                class: d(["sl-w-4 sl-h-4", t ? "sl-text-gray-300" : "sl-text-gray-600"])
+              }, null, 8, ["class"])
+            ], 2)) : y("", !0),
+            Z(e.$slots, "controls", { isDark: t })
+          ])
+        ]),
+        _: 3
+      }, 16, ["show-custom-controls", "show-default-zoom-controls", "controls-position", "center", "zoom"]),
+      C(ye, {
+        visible: r.value.visible,
+        "onUpdate:visible": o[2] || (o[2] = (t) => r.value.visible = t),
+        loading: r.value.loading,
+        error: r.value.error,
+        title: r.value.title,
+        subtitle: r.value.subtitle,
+        "image-url": r.value.imageUrl,
+        details: r.value.details,
+        actions: r.value.actions,
+        data: r.value.data,
+        "show-avatar": n.showInfoAvatar,
+        onClose: L,
+        onRetry: re,
+        onAction: ie
+      }, {
+        footer: M(() => [
+          Z(e.$slots, "info-footer", {
+            data: r.value.data,
+            marker: v.value
+          })
+        ]),
+        default: M(() => [
+          Z(e.$slots, "info-content", {
+            data: r.value.data,
+            marker: v.value
+          })
+        ]),
+        _: 3
+      }, 8, ["visible", "loading", "error", "title", "subtitle", "image-url", "details", "actions", "data", "show-avatar"])
+    ], 64));
+  }
+});
+export {
+  Se as _
+};

package/dist/charts/BaseChart.js

@@ -1,16 +1,17 @@
-import { defineComponent as b, ref as h, computed as r, onMounted as D, provide as S, createElementBlock as p, openBlock as l, normalizeStyle as A, normalizeClass as L, createBlock as u, unref as O, createElementVNode as c, resolveDynamicComponent as T, toDisplayString as f } from "vue";
+import { defineComponent as w, ref as p, computed as i, onMounted as z, provide as D, createElementBlock as h, openBlock as l, normalizeStyle as T, normalizeClass as S, createBlock as u, unref as L, createElementVNode as c, resolveDynamicComponent as O, toDisplayString as f } from "vue";
 import I from "vue-echarts";
 import { use as R } from "echarts/core";
 import { CanvasRenderer as E } from "echarts/renderers";
 import { LineChart as N, BarChart as V, PieChart as $, FunnelChart as j, ScatterChart as F } from "echarts/charts";
 import { TitleComponent as G, TooltipComponent as M, LegendComponent as P, GridComponent as Z, DataZoomComponent as q } from "echarts/components";
-import { chartColors as H, baseTheme as i } from "./chartTheme.js";
-import { ChartBarIcon as J } from "@heroicons/vue/24/outline";
-import { _ as K } from "../_plugin-vue_export-helper-CHgC5LLL.js";
-const Q = {
+import { chartColors as H, getTheme as J } from "./chartTheme.js";
+import { ChartBarIcon as K } from "@heroicons/vue/24/outline";
+import { useTheme as Q } from "../composables/useTheme.js";
+import { _ as U } from "../_plugin-vue_export-helper-CHgC5LLL.js";
+const W = {
   key: 1,
   class: "sl-flex sl-items-center sl-justify-center sl-h-full"
-}, U = { class: "sl-text-center" }, W = { class: "sl-mt-2 sl-text-sm sl-font-medium sl-text-gray-900 dark:sl-text-white" }, X = { class: "sl-mt-1 sl-text-sm sl-text-gray-500 dark:sl-text-slate-400" }, Y = /* @__PURE__ */ b({
+}, X = { class: "sl-text-center" }, Y = { class: "sl-mt-2 sl-text-sm sl-font-medium sl-text-gray-900 dark:sl-text-white" }, ee = { class: "sl-mt-1 sl-text-sm sl-text-gray-500 dark:sl-text-slate-400" }, te = /* @__PURE__ */ w({
   __name: "BaseChart",
   props: {
     option: {},
@@ -23,7 +24,7 @@ const Q = {
     theme: { default: "light" },
     emptyTitle: { default: "No data available" },
     emptyDescription: { default: "Data will appear here once available." },
-    emptyIcon: { default: () => J }
+    emptyIcon: { default: () => K }
   },
   emits: ["click", "legendselectchanged", "ready"],
   setup(o, { expose: g, emit: y }) {
@@ -40,79 +41,98 @@ const Q = {
       Z,
       q
     ]);
-    const e = o, s = y, C = h(null), a = h(null), x = r(() => ({
-      height: typeof e.height == "number" ? `${e.height}px` : e.height,
-      width: typeof e.width == "number" ? `${e.width}px` : e.width
-    })), v = r(() => ({
+    const t = o, s = y, x = p(null), a = p(null), { isDark: r } = Q(), C = i(() => ({
+      height: typeof t.height == "number" ? `${t.height}px` : t.height,
+      width: typeof t.width == "number" ? `${t.width}px` : t.width
+    })), v = i(() => ({
       text: "Loading...",
       color: H.primary[0],
-      textColor: "#6b7280",
-      maskColor: "rgba(255, 255, 255, 0.8)",
-      ...e.loadingOptions
-    })), k = r(() => {
-      const t = e.option;
-      if (!t) return !1;
-      const n = t.series;
+      textColor: r.value ? "#94a3b8" : "#6b7280",
+      maskColor: r.value ? "rgba(15, 23, 42, 0.8)" : "rgba(255, 255, 255, 0.8)",
+      ...t.loadingOptions
+    })), k = i(() => {
+      const e = t.option;
+      if (!e) return !1;
+      const n = e.series;
       if (!n) return !1;
       if (Array.isArray(n))
-        return n.some((z) => {
-          const m = z.data;
+        return n.some((_) => {
+          const m = _.data;
           return Array.isArray(m) && m.length > 0;
         });
       const d = n.data;
       return Array.isArray(d) && d.length > 0;
-    }), B = r(() => ({
-      ...i,
-      ...e.option,
-      textStyle: {
-        ...i.textStyle || {},
-        ...e.option?.textStyle || {}
-      },
-      tooltip: {
-        ...i.tooltip || {},
-        ...e.option?.tooltip || {}
-      },
-      grid: {
-        ...i.grid || {},
-        ...e.option?.grid || {}
-      }
-    })), _ = (t) => {
-      s("click", t);
-    }, w = (t) => {
-      s("legendselectchanged", t);
+    }), A = i(() => {
+      const e = J(r.value);
+      return {
+        ...e,
+        ...t.option,
+        textStyle: {
+          ...e.textStyle || {},
+          ...t.option?.textStyle || {}
+        },
+        tooltip: {
+          ...e.tooltip || {},
+          ...t.option?.tooltip || {}
+        },
+        grid: {
+          ...e.grid || {},
+          ...t.option?.grid || {}
+        },
+        title: {
+          ...e.title || {},
+          ...t.option?.title || {}
+        },
+        xAxis: {
+          ...e.xAxis || {},
+          ...t.option?.xAxis || {}
+        },
+        yAxis: {
+          ...e.yAxis || {},
+          ...t.option?.yAxis || {}
+        },
+        legend: {
+          ...e.legend || {},
+          ...t.option?.legend || {}
+        }
+      };
+    }), b = (e) => {
+      s("click", e);
+    }, B = (e) => {
+      s("legendselectchanged", e);
     };
     return g({
       getChart: () => a.value?.chart,
       resize: () => a.value?.resize(),
-      setOption: (t) => a.value?.setOption(t)
-    }), D(() => {
+      setOption: (e) => a.value?.setOption(e)
+    }), z(() => {
       a.value?.chart && s("ready", a.value.chart);
-    }), S("chartTheme", e.theme), (t, n) => (l(), p("div", {
+    }), D("chartTheme", r.value ? "dark" : "light"), (e, n) => (l(), h("div", {
       ref_key: "chartContainer",
-      ref: C,
-      class: L(o.containerClass),
-      style: A(x.value)
+      ref: x,
+      class: S(o.containerClass),
+      style: T(C.value)
     }, [
-      k.value ? (l(), u(O(I), {
+      k.value ? (l(), u(L(I), {
         key: 0,
         ref_key: "chartRef",
         ref: a,
-        option: B.value,
+        option: A.value,
         autoresize: o.autoresize,
         loading: o.loading,
         "loading-options": v.value,
-        onClick: _,
-        onLegendselectchanged: w
-      }, null, 8, ["option", "autoresize", "loading", "loading-options"])) : (l(), p("div", Q, [
-        c("div", U, [
-          (l(), u(T(o.emptyIcon), { class: "sl-mx-auto sl-h-12 sl-w-12 sl-text-gray-300 dark:sl-text-slate-600" })),
-          c("h3", W, f(o.emptyTitle), 1),
-          c("p", X, f(o.emptyDescription), 1)
+        onClick: b,
+        onLegendselectchanged: B
+      }, null, 8, ["option", "autoresize", "loading", "loading-options"])) : (l(), h("div", W, [
+        c("div", X, [
+          (l(), u(O(o.emptyIcon), { class: "sl-mx-auto sl-h-12 sl-w-12 sl-text-gray-300 dark:sl-text-slate-600" })),
+          c("h3", Y, f(o.emptyTitle), 1),
+          c("p", ee, f(o.emptyDescription), 1)
         ])
       ]))
     ], 6));
   }
-}), ce = /* @__PURE__ */ K(Y, [["__scopeId", "data-v-7a9624c5"]]);
+}), pe = /* @__PURE__ */ U(te, [["__scopeId", "data-v-ca77ba23"]]);
 export {
-  ce as default
+  pe as default
 };