@tenorlab/vue-dashboard 1.4.903 → 1.5.2

package/README.md

@@ -135,9 +135,9 @@ import {
   TWidgetFactory,
 } from '@tenorlab/vue-dashboard'
 import {
-  createStaticEntry as _createStaticEntry,
+  createStaticEntry,
   localWidgetDiscovery,
-  remoteWidgetDiscovery as _remoteWidgetDiscovery,
+  remoteWidgetDiscovery,
 } from '@tenorlab/vue-dashboard/core'
 
 import WidgetRecentPaymentInfo from './other-widgets/WidgetRecentPaymentInfo.vue'
@@ -146,9 +146,6 @@ import WidgetRecentPaymentInfo from './other-widgets/WidgetRecentPaymentInfo.vue
 const bundledWidgetsSrcPath = '/src/bundled-widgets'
 const asyncWidgetsSrcPath = '/src/async-widgets'
 
-import { markRaw } from 'vue'
-import type { Component as VueComponent } from 'vue'
-
 // Use Vite's Glob Import
 // This creates an object where the keys are file paths, and the values are the TWidgetFactory functions.
 // We target the 'index.ts' files within the widgets subdirectories.
@@ -169,18 +166,6 @@ const allMetaModules = import.meta.glob('/src/**/widget-*/meta.ts', {
 
 const hasPermission = (_user: any, _permission: string) => true
 
-/**
- * @name createStaticEntry
- * Wraps around createStaticEntry from npm package to ensure the component added is marked raw (using markRaw)
- */
-export const createStaticEntry = (
-  key: string,
-  component: VueComponent,
-  metaData?: TWidgetMetaInfoBase,
-): [string, IDynamicWidgetCatalogEntry] => {
-  return _createStaticEntry(key, markRaw(component), metaData)
-}
-
 /**
  * @name getWidgetCatalog
  * @description Dynamically builds the widgets catalog based on user type and operations/permissions.

package/dist/core.d.ts

@@ -1,5 +1,3 @@
-import { Component } from 'vue';
-
 export declare const blankDashboardConfig: IDashboardConfig;
 
 /**
@@ -11,10 +9,10 @@ export declare const createDynamicEntry: (key: string, loader: TWidgetFactoryBas
 
 /**
  * @name createStaticEntry
- * Wraps around (and shadows) the @tenorlab/dashboard-core createStaticEntry to ensure
- * the component added is marked raw (using markRaw)
+ * Helper function to create static entries
+ * This helps keep the catalog registration clean
  */
-export declare const createStaticEntry: (key: string, component: Component, metaData?: TWidgetMetaInfoBase) => [string, IDynamicWidgetCatalogEntry];
+export declare const createStaticEntry: <TFrameworkComponentType = any>(key: string, component: TFrameworkComponentType, metaData?: TWidgetMetaInfoBase) => [string, IDynamicWidgetCatalogEntryBase];
 
 /**
  * @name cssSettingsCatalog
@@ -226,17 +224,6 @@ export declare interface IDashboardWidgetPropsBase<TExtraProps = any> {
     extraProps?: TExtraProps;
 }
 
-/**
- * @name IDynamicWidgetCatalogEntry
- * @description Represents a dynamic widget catalog entry for Vue components.
- * @interface IDynamicWidgetCatalogEntry
- * @extends IDynamicWidgetCatalogEntryBase
- * @template TFrameworkElementType - The type representing a Vue component instance.
- * @template TFrameworkComponentType - The type representing a Vue component.
- */
-declare interface IDynamicWidgetCatalogEntry extends IDynamicWidgetCatalogEntryBase<TFrameworkElementType, TFrameworkComponentType> {
-}
-
 /**
  * @name IDynamicWidgetCatalogEntryBase
  * @description Catalog entry describing how to create or load a widget.
@@ -268,8 +255,8 @@ export declare interface IDynamicWidgetCatalogEntryBase<TFrameworkElementType =
 
 /**
  * @name localWidgetDiscovery
- * Wraps around (and shadows) the @tenorlab/dashboard-core localWidgetDiscovery to ensure
- * the component added is marked raw (using markRaw)
+ * @description Scans local directories for widgets.
+ * If lazy is true, it registers loaders. If false, it registers static components.
  */
 export declare const localWidgetDiscovery: (baseSrcPath: string, // e.g., "/src/async-widgets" or "/src/bundled-widgets"
 widgetModules: Record<string, any>, widgetMetaModules: Record<string, any>, lazy?: boolean) => [string, IDynamicWidgetCatalogEntryBase][];
@@ -279,13 +266,14 @@ export declare const parseContainerTitle: (containerWidgetKey: TDashboardWidgetK
 /**
  * Enhanced helper to derive key and title from widget file paths.
  * Handles:
+ * - widget-total-orders -> WidgetTotalOrders
  * - widget-revenue-trends1 -> WidgetRevenueTrends1
  * - widget-with-extraprops -> WidgetWithExtraprops
  * - widget-revenue-trends-async -> WidgetRevenueTrendsAsync
  */
 export declare const parseKeyAndTitleFromFilePath: (path: string) => {
     key: TDashboardWidgetKey;
-    title: string;
+    name: string;
     folder: string;
 } | null;
 
@@ -339,18 +327,6 @@ export declare type TDashboardWidgetCatalogBase<TFrameworkElementType = any, TFr
  */
 export declare type TDashboardWidgetKey = string;
 
-/**
- * @name TFrameworkComponentType
- * @description Represents a Vue component type.
- */
-declare type TFrameworkComponentType = Component;
-
-/**
- * @name TFrameworkElementType
- * @description Represents a Vue component instance.
- */
-declare type TFrameworkElementType = Component;
-
 /**
  * @name TGetDefaultWidgetMetaFromKey
  * @description Function that returns default `TWidgetMetaInfoBase` metadata for a widget key.
@@ -369,7 +345,7 @@ export declare type TGetDefaultWidgetMetaFromKey = (widgetKey: TDashboardWidgetK
  * and/or `description`.
  */
 export declare type TGetDefaultWidgetMetaFromKeyOptions = {
-    title?: string;
+    name?: string;
     description?: string;
 };
 

package/dist/core.es.js

@@ -1,10 +1,370 @@
-import { markRaw as n } from "vue";
-import { createStaticEntry as a, localWidgetDiscovery as i } from "@tenorlab/vue-dashboard/core";
-export * from "@tenorlab/vue-dashboard/core";
-const E = (t, r, c) => a(t, n(r), c), f = (t, r, c, e = !0) => e ? i(t, r, c, e) : i(t, r, c, e).map(
-  (o) => a(o[0], n(o[1].component), o[1].meta)
-);
+const w = [
+  {
+    key: "grid-gap",
+    name: "Gap",
+    description: "Set the gap between widgets in the dashboard grid",
+    cssProperty: "--bwj-dashboard-gap",
+    step: 0.1,
+    defaultUnit: "rem",
+    minValue: 0,
+    defaultValue: "1.25rem",
+    value: "1.25rem"
+  },
+  {
+    key: "widget-width",
+    name: "Widget Width",
+    description: "Set the min width for the widgets",
+    cssProperty: "--bwj-widget-width",
+    step: 0.1,
+    defaultUnit: "rem",
+    minValue: 6,
+    defaultValue: "21rem",
+    value: "21rem"
+  },
+  {
+    key: "widget-border-radius",
+    name: "Widget Border Radius",
+    description: "Set the border radius for the widgets",
+    cssProperty: "--bwj-widget-border-radius",
+    step: 0.1,
+    defaultUnit: "rem",
+    minValue: 0,
+    defaultValue: "0.33rem",
+    value: "0.33rem"
+  },
+  {
+    key: "widget-inner-padding-x",
+    name: "Widget Horiz Padding",
+    description: "Set the horizontal padding for the widgets",
+    cssProperty: "--bwj-widget-inner-px",
+    step: 0.1,
+    defaultUnit: "rem",
+    minValue: 0,
+    defaultValue: "1.0rem",
+    value: "1.0rem"
+  },
+  {
+    key: "widget-inner-padding-y",
+    name: "Widget Vertical Padding",
+    description: "Set the vertical padding for the widgets",
+    cssProperty: "--bwj-widget-inner-py",
+    step: 0.1,
+    defaultUnit: "rem",
+    minValue: 0,
+    defaultValue: "0.75rem",
+    value: "0.75rem"
+  },
+  {
+    key: "widget-header-padding-y",
+    name: "Widget Header Vertical Padding",
+    description: "Set the vertical padding for the widget headers",
+    cssProperty: "--bwj-widget-header-py",
+    step: 0.1,
+    defaultUnit: "rem",
+    minValue: 0,
+    defaultValue: "1.0rem",
+    value: "1.0rem"
+  },
+  {
+    key: "widget-title-font-size",
+    name: "Widget Title Font Size",
+    description: "Set the font size for the widget titles",
+    cssProperty: "--bwj-widget-title-size",
+    step: 0.1,
+    defaultUnit: "rem",
+    minValue: 0,
+    defaultValue: "1.0rem",
+    value: "1.0rem"
+  }
+], S = ["rem", "pc", "cm", "in", "em", "vh", "vw", "%"], b = (e, t) => S.includes(e) ? t : 1, E = {
+  /**
+   * @name incrementOrDecrementValue
+   * @description Increments or decrement a value based on the direction parameter
+   * @param item: an instance of IDashboardSettingEntry
+   * @param direction: -1 (for decrement) or 1 (for increment)
+   * @returns the update item
+   */
+  incrementOrDecrementValue: (e, t) => {
+    const a = e.value.match(/([\d.]+)/), i = a ? parseFloat(a[1]) : 0, s = e.value.match(/([^\d.]+)/), n = s ? s[1] : e.defaultUnit, r = b(n, e.step) * t, c = `${Math.max(i + r, e.minValue).toFixed(1)}${n}`;
+    return {
+      ...e,
+      value: c
+    };
+  }
+}, f = (e, t) => `dashboards_${t}_${e}`, v = async (e, t, a, i) => {
+  const s = localStorage.getItem(f(e, t));
+  if (s)
+    try {
+      const n = JSON.parse(s);
+      return n.length < 1 ? [i] : (n.forEach((r) => {
+        r.dashboardId || (r.dashboardId = "default"), r.dashboardName || (r.dashboardName = `Dashboard ${r.dashboardId}`), r.responsiveGrid = r.responsiveGrid ?? !1, (r.widgets || []).length < 1 && (r.widgets = i.widgets);
+        const c = (r.cssSettings || []).filter(
+          (o) => i.cssSettings.some((d) => d.key === o.key)
+        );
+        if (c.length < 1)
+          r.cssSettings = [...i.cssSettings];
+        else {
+          c.forEach((d) => {
+            d.value = (d.value || "").replace(/NaN/g, "");
+            const l = i.cssSettings.find(
+              (g) => g.key === d.key
+            );
+            l && (Object.keys(l).forEach((g) => {
+              g in d || (d[g] = l[g]);
+            }), d.step = l.step, d.minValue = l.minValue, d.defaultValue = l.defaultValue, d.defaultUnit = l.defaultUnit, /\d+/g.test(d.value) === !1 && (d.value = l ? l.value : "1.0rem"));
+          });
+          const o = i.cssSettings.filter((d) => !c.some(
+            (l) => l.key === d.key
+          ));
+          r.cssSettings = [...c, ...o];
+        }
+        r.widgets = r.widgets.filter(
+          (o) => o.includes("WidgetContainer") || a.has(o)
+        ), r.childWidgetsConfig = r.childWidgetsConfig.filter(
+          (o) => a.has(o.widgetKey)
+        ), r.zoomScale ? r.zoomScale < 0.7 && (r.zoomScale = 0.7) : r.zoomScale = 1;
+      }), n);
+    } catch (n) {
+      console.warn("Error parsing saved dashboard config:", n);
+    }
+  return [i];
+}, C = async (e, t, a, i) => {
+  a.forEach((n) => {
+    if (n.userID = e, n.clientAppKey = t, n.responsiveGrid = n.responsiveGrid ?? !1, typeof n != "object")
+      throw new Error("Invalid dashboard configuration");
+    n.widgets = n.widgets.filter(
+      (r) => r.includes("WidgetContainer") || i.has(r)
+    ), n.childWidgetsConfig = n.childWidgetsConfig.filter(
+      (r) => i.has(r.widgetKey)
+    ), n.zoomScale ? n.zoomScale < 0.7 && (n.zoomScale = 0.7) : n.zoomScale = 1;
+  });
+  const s = JSON.stringify(a);
+  return localStorage.setItem(f(e, t), s), !0;
+}, W = {
+  getSavedDashboards: v,
+  saveDashboards: C
+}, P = () => W, z = {
+  userID: 0,
+  clientAppKey: "",
+  dashboardId: "default",
+  dashboardName: "Default",
+  zoomScale: 1,
+  responsiveGrid: !1,
+  widgets: [],
+  childWidgetsConfig: [],
+  cssSettings: [...w]
+}, U = (e) => {
+  const t = `${e}`.split("_");
+  return t.length > 1 ? t[1].replace(/(\D)(\d+)/, "$1 $2") : "Container";
+}, u = 0.7, p = 1, V = 0.05, D = (e) => {
+  let t = Number(e || 0);
+  return t < u && (t = u), t > p && (t = p), t;
+}, j = (e, t) => {
+  let a = Number(Number((V * t).toFixed(2)).toFixed(2)), i = Number((Number(e) + a).toFixed(2));
+  return D(i);
+}, N = (e) => {
+  let t = {
+    ...e
+  };
+  return t.widgets = t.widgets.filter((a) => {
+    if (`${a}`.includes("WidgetContainer")) {
+      const i = t.childWidgetsConfig.filter(
+        (s) => s.parentWidgetKey === a
+      );
+      if (!i || i.length === 0)
+        return t.widgets = t.widgets.filter(
+          (s) => s !== a
+        ), !1;
+    }
+    return !0;
+  }), t;
+}, x = (e) => {
+  const t = e.widgets.filter(
+    (i) => i.includes("WidgetContainer")
+  ), a = {};
+  return t.forEach((i, s) => {
+    const n = `${i.split("_container")[0]}_container${s + 1}`;
+    a[i] = n;
+  }), e.widgets = e.widgets.map((i) => a[i] || i), e.childWidgetsConfig = e.childWidgetsConfig.map((i) => {
+    const s = i.parentWidgetKey, n = a[s];
+    return {
+      ...i,
+      // If a new key exists, use it. If not, keep the original key.
+      parentWidgetKey: n || s
+    };
+  }), e;
+}, m = (e, t) => {
+  const a = `${e}`.includes("Container"), i = a ? ["Container"] : ["Widget"], s = t?.name || e, n = t?.description || (a ? "Container" : "Unknown");
+  return {
+    name: s,
+    description: n,
+    categories: i,
+    noDuplicatedWidgets: !0,
+    icon: void 0,
+    externalDependencies: []
+  };
+}, I = (e, t, a) => t[e] || m(e, a), M = (e, t) => t.get(e)?.meta || m(e), k = (e, t, a) => {
+  const i = a || m(e);
+  return [
+    e,
+    {
+      key: e,
+      title: i.name,
+      isContainer: `${e}`.includes("Container"),
+      isRemote: !1,
+      meta: i,
+      component: t
+    }
+  ];
+}, h = (e, t, a, i) => {
+  const s = i || m(e);
+  return [
+    e,
+    {
+      key: e,
+      title: s.name,
+      isContainer: !1,
+      isRemote: a,
+      meta: s,
+      loader: t
+    }
+  ];
+}, F = (e) => {
+  const t = e.match(/\/widget-([a-zA-Z0-9-]+)\/index\.ts$/);
+  if (t && t[1]) {
+    const a = t[1], i = a.split("-"), s = `Widget${i.map((r) => r.charAt(0).toUpperCase() + r.slice(1)).join("")}`, n = i.map((r) => r.charAt(0).toUpperCase() + r.slice(1)).join(" ");
+    return {
+      key: s,
+      name: n,
+      folder: a
+    };
+  }
+  return null;
+}, $ = (e, t, a, i) => {
+  const s = `${t}/widget-${a}/meta.ts`, n = e[s];
+  if (!n)
+    return;
+  const r = `${i}Meta`;
+  return n[r] || void 0;
+}, A = async (e) => new Promise(async (t, a) => {
+  const i = [];
+  try {
+    const s = await (await fetch(`${e}?${Math.random()}`)).json();
+    for (const n in s) {
+      const r = s[n], c = () => import(
+        /* @vite-ignore */
+        r.url
+      ), o = {
+        name: r.meta?.name || "Unknown",
+        description: r.meta?.description || "Remote Plugin",
+        categories: r.meta?.categories || ["Widget"],
+        noDuplicatedWidgets: r.meta?.noDuplicatedWidgets ?? !0,
+        icon: void 0,
+        // Or a logic to map a string name to a Lucide component
+        externalDependencies: r.meta?.externalDependencies || []
+      };
+      i.push(h(n, c, !0, o));
+    }
+    t({
+      entries: i,
+      message: "",
+      details: ""
+    });
+  } catch (s) {
+    console.error("Remote plugin discovery failed:", s), a({
+      entries: [],
+      message: "Remote plugin discovery failed:",
+      details: typeof s == "object" ? JSON.stringify(s) : s
+    });
+  }
+}), K = (e, t, a, i = !0) => {
+  const s = [];
+  for (const n in t) {
+    const r = t[n], c = F(n);
+    if (c && r) {
+      const { key: o, name: d, folder: l } = c;
+      let g = $(a, e, l, o);
+      if (g || (g = m(o, {
+        name: d,
+        description: `Local ${i ? "dynamic" : "static"} widget`
+      })), i)
+        s.push(
+          h(o, r, !1, g)
+        );
+      else {
+        const y = r.default || r;
+        s.push(k(o, y, g));
+      }
+    }
+  }
+  return s;
+}, R = (e, t = "color") => {
+  if (typeof window > "u") return "#FFFFFF";
+  const a = document.createElement("div");
+  Array.isArray(e) ? e.forEach((s) => a.classList.add(s)) : e.split(" ").forEach((s) => a.classList.add(s)), a.style.display = "none", document.body.appendChild(a);
+  const i = window.getComputedStyle(a)[t];
+  return document.body.removeChild(a), i;
+}, G = {
+  /**
+   * @name getCssVariableValue
+   * @description Return the value of a CSS custom property from the current HTML document
+   * @param cssPropertyName
+   * @returns
+   */
+  getCssVariableValue: (e) => {
+    const t = document.documentElement;
+    return getComputedStyle(t).getPropertyValue(e).trim() || null;
+  },
+  /**
+   * @name setCssVariableValue
+   * @description Sets the value of a CSS custom property on the current HTML document
+   * @param cssPropertyName
+   * @param value
+   */
+  setCssVariableValue: (e, t) => {
+    document.documentElement.style.setProperty(e, t);
+  },
+  /**
+   * @name restoreCssVarsFromSettings
+   * @description
+   * Sets the values of many CSS custom properties on the current HTML document
+   * from the list of dashboard settings provided
+   * @param settings, an array of IDashboardSettingEntry
+   */
+  restoreCssVarsFromSettings: (e) => {
+    const t = document.documentElement;
+    e.forEach((a) => {
+      t.style.setProperty(a.cssProperty, a.value);
+    });
+  }
+}, Z = (e, ...t) => [
+  ...new Set(
+    [e || "", ...t].join(" ").trim().replace(/\n+/gi, " ").replace(/\s+/gi, " ").split(" ")
+  )
+].join(" ").trim();
 export {
-  E as createStaticEntry,
-  f as localWidgetDiscovery
+  p as DashboardMaxZoomScale,
+  u as DashboardMinZoomScale,
+  V as DashboardZoomStep,
+  z as blankDashboardConfig,
+  h as createDynamicEntry,
+  k as createStaticEntry,
+  w as cssSettingsCatalog,
+  G as cssVarsUtils,
+  E as dashboardSettingsUtils,
+  x as ensureContainersSequence,
+  D as ensureZoomScaleIsWithinRange,
+  m as getDefaultWidgetMetaFromKey,
+  I as getDefaultWidgetMetaFromMap,
+  Z as getDistinctCssClasses,
+  $ as getMetaInfoFromFile,
+  j as getNewZoomScaleWithinRange,
+  M as getWidgetMetaFromCatalog,
+  K as localWidgetDiscovery,
+  U as parseContainerTitle,
+  F as parseKeyAndTitleFromFilePath,
+  A as remoteWidgetDiscovery,
+  N as removeEmptyContainers,
+  R as resolveColorFromClass,
+  P as useDashboardStorageService
 };

package/dist/vue-dashboard.es.js

@@ -1,5 +1,5 @@
-import { reactive as de, computed as v, readonly as we, defineComponent as b, createElementBlock as f, openBlock as l, normalizeClass as C, createElementVNode as o, createStaticVNode as se, withModifiers as z, normalizeStyle as oe, renderSlot as V, mergeProps as q, createBlock as E, withCtx as K, unref as x, toDisplayString as B, ref as j, onMounted as xe, onUnmounted as ye, createVNode as I, Fragment as U, renderList as P, shallowRef as ne, watchEffect as be, markRaw as Q, defineAsyncComponent as _e, resolveComponent as ke, Suspense as $e, resolveDynamicComponent as le, createSlots as Ie, createTextVNode as ce, withKeys as ie, watch as De, createCommentVNode as Y } from "vue";
-import { blankDashboardConfig as te, ensureContainersSequence as We, getDistinctCssClasses as T, ensureZoomScaleIsWithinRange as Ke, parseContainerTitle as ue, dashboardSettingsUtils as Be, getWidgetMetaFromCatalog as Me } from "@tenorlab/vue-dashboard/core";
+import { reactive as de, computed as v, readonly as we, defineComponent as b, createElementBlock as f, openBlock as l, normalizeClass as C, createElementVNode as o, createStaticVNode as se, withModifiers as z, normalizeStyle as oe, renderSlot as H, mergeProps as q, createBlock as E, withCtx as K, unref as x, toDisplayString as B, ref as R, onMounted as xe, onUnmounted as ye, createVNode as I, Fragment as U, renderList as P, shallowRef as ne, watchEffect as be, markRaw as Q, defineAsyncComponent as _e, resolveComponent as ke, Suspense as $e, resolveDynamicComponent as le, createSlots as Ie, createTextVNode as ce, withKeys as ie, watch as De, createCommentVNode as Y } from "vue";
+import { blankDashboardConfig as te, ensureContainersSequence as We, getDistinctCssClasses as T, ensureZoomScaleIsWithinRange as Ke, parseContainerTitle as ue, dashboardSettingsUtils as Be, getWidgetMetaFromCatalog as Me } from "./core.es.js";
 const Ee = (t) => {
   const s = t.widgets.filter((n) => n.includes("WidgetContainer")).map((n) => Number(n.split("_")[1].replace("container", "")));
   return `container${s.length > 0 ? Math.max(...s) + 1 : 1}`;
@@ -205,13 +205,13 @@ const Ee = (t) => {
   addWidget: (t) => N.addWidget(t),
   removeWidget: (t, s) => N.removeWidget(t, s),
   moveWidget: (t, s, e) => N.moveWidget(t, s, e)
-}, He = {
+}, je = {
   getNextContainerKey: (t) => Se(y.currentDashboardConfig, t),
   getCurrentDashboardConfig: () => y.currentDashboardConfig,
   getCurrentDashboardId: () => y.currentDashboardConfig.dashboardId,
   getIsResponsive: () => y.currentDashboardConfig.responsiveGrid || !1,
   getTargetContainerKey: () => y.targetContainerKey
-}, Ve = {
+}, He = {
   isLoading: v(() => y.isLoading),
   isEditing: v(() => y.isEditing),
   targetContainerKey: v(() => y.targetContainerKey),
@@ -220,18 +220,18 @@ const Ee = (t) => {
     const e = t.dashboardId === "default", n = s.dashboardId === "default";
     return e && !n ? -1 : n && !e ? 1 : t.dashboardId.localeCompare(s.dashboardId);
   }))
-}, je = {
+}, Re = {
   ...re,
   actions: re,
-  getters: He,
-  computed: Ve
-}, gs = () => je, S = de({
+  getters: je,
+  computed: He
+}, gs = () => Re, S = de({
   currentDashboardId: "",
   undoHistory: {},
   historyIndex: {}
 }), G = (t) => S.undoHistory[t] || [], Z = (t) => S.historyIndex[t] ?? -1, X = (t, s) => {
   S.historyIndex[t] = s;
-}, Re = (t) => {
+}, Ve = (t) => {
   const s = t.dashboardId;
   if (S.currentDashboardId !== s) {
     S.currentDashboardId = s;
@@ -267,7 +267,7 @@ const Ee = (t) => {
     _historyLength: e
   };
 }, Oe = v(() => ge()), ps = () => ({
-  initializeHistoryForDashboard: Re,
+  initializeHistoryForDashboard: Ve,
   resetAllHistory: () => {
     S.undoHistory = {}, S.historyIndex = {};
   },
@@ -900,7 +900,7 @@ const hs = /* @__PURE__ */ b({
       o("path", { d: "M12 17h.01" }, null, -1)
     ])], 2));
   }
-}), tt = ["title", "disabled"], H = /* @__PURE__ */ b({
+}), tt = ["title", "disabled"], j = /* @__PURE__ */ b({
   __name: "Button",
   props: {
     disabled: { type: Boolean, default: !1 },
@@ -935,7 +935,7 @@ const hs = /* @__PURE__ */ b({
       const d = e.isIconButton || !1, p = e.category || "primary", c = e.type || "normal", m = e.disabled || !1, _ = e.className || "", k = e.font || "", W = Number((e.border || 0) > 0 ? e.border : 0);
       let M = (e.borderColor || "").trim();
       M = M.length > 0 ? M : "";
-      const L = Number((e.borderHover || 0) > 0 ? e.borderHover : 0), R = e.shadow || "sm", $ = e.shadowHover || "md", D = (e.addCss || "").trim(), h = e.justifyCss || "justify-center";
+      const L = Number((e.borderHover || 0) > 0 ? e.borderHover : 0), V = e.shadow || "sm", $ = e.shadowHover || "md", D = (e.addCss || "").trim(), h = e.justifyCss || "justify-center";
       if (d)
         return T(
           "flex flex-row items-center",
@@ -958,7 +958,7 @@ const hs = /* @__PURE__ */ b({
         const A = u.replaceAll("[category]", p).trim();
         a.push(A);
       }
-      return W > 0 ? (a.push(`border-[${W}px]`), a.push(`border-${M}`)) : (a.push("border-[1px]"), a.push("border-transparent")), L > 0 ? (a.push(`hover:border-[${L}px] group-hover:border-[${L}px]`), a.push(`hover:border-${M} group-hover:border-${M}`)) : a.push("hover:border-[1px] group-hover:border-[1px]"), a.push(`shadow-${R}`), a.push(`hover:shadow-${$} group-hover:shadow-${$}`), D.length > 0 && a.push(D), D.indexOf("hidden") === -1 && a.push("inline-flex"), a.push(h), a.join(" ").trim();
+      return W > 0 ? (a.push(`border-[${W}px]`), a.push(`border-${M}`)) : (a.push("border-[1px]"), a.push("border-transparent")), L > 0 ? (a.push(`hover:border-[${L}px] group-hover:border-[${L}px]`), a.push(`hover:border-${M} group-hover:border-${M}`)) : a.push("hover:border-[1px] group-hover:border-[1px]"), a.push(`shadow-${V}`), a.push(`hover:shadow-${$} group-hover:shadow-${$}`), D.length > 0 && a.push(D), D.indexOf("hidden") === -1 && a.push("inline-flex"), a.push(h), a.join(" ").trim();
     }), g = v(() => ({
       padding: e.isIconButton ? 0 : `${e.py}rem ${e.px}rem `
     })), w = (d) => {
@@ -976,7 +976,7 @@ const hs = /* @__PURE__ */ b({
       disabled: t.disabled,
       onClick: z(w, ["stop"])
     }, [
-      V(d.$slots, "default")
+      H(d.$slots, "default")
     ], 14, tt));
   }
 }), st = ["data-testid"], ot = /* @__PURE__ */ b({
@@ -996,7 +996,7 @@ const hs = /* @__PURE__ */ b({
       "data-testid": t.testId || "not-set",
       class: n.value
     }, e.value), [
-      V(i.$slots, "default")
+      H(i.$slots, "default")
     ], 16, st));
   }
 }), ks = /* @__PURE__ */ b({
@@ -1025,7 +1025,7 @@ const hs = /* @__PURE__ */ b({
         o("div", {
           class: C(x(i))
         }, [
-          V(r.$slots, "default")
+          H(r.$slots, "default")
         ], 2)
       ]),
       _: 3
@@ -1080,7 +1080,7 @@ const hs = /* @__PURE__ */ b({
   },
   emits: ["draggingChange"],
   setup(t, { emit: s }) {
-    const e = t, n = s, i = j(null), r = j({ x: 0, y: 0 }), g = j({ x: 0, y: 0 }), w = j({ x: 0, y: 0 }), d = {
+    const e = t, n = s, i = R(null), r = R({ x: 0, y: 0 }), g = R({ x: 0, y: 0 }), w = R({ x: 0, y: 0 }), d = {
       // 1. Take it out of the document flow
       position: "fixed",
       // 2. Set initial viewport position (e.g., top right)
@@ -1127,7 +1127,7 @@ const hs = /* @__PURE__ */ b({
       class: C(e.className),
       style: oe(p.value)
     }, [
-      V(k.$slots, "default")
+      H(k.$slots, "default")
     ], 14, at));
   }
 }), Ce = (t, s) => {
@@ -1141,13 +1141,13 @@ const hs = /* @__PURE__ */ b({
 };
 function ut(t, s) {
   return l(), f("div", ct, [
-    V(t.$slots, "default")
+    H(t.$slots, "default")
   ]);
 }
 const $s = /* @__PURE__ */ Ce(lt, [["render", ut]]), gt = {}, pt = { className: "w-full flex flex-col items-end" };
 function ht(t, s) {
   return l(), f("div", pt, [
-    V(t.$slots, "default")
+    H(t.$slots, "default")
   ]);
 }
 const Is = /* @__PURE__ */ Ce(gt, [["render", ht]]), Ds = (t) => {
@@ -1176,7 +1176,7 @@ const Is = /* @__PURE__ */ Ce(gt, [["render", ht]]), Ds = (t) => {
       class: C(i.value),
       style: oe(n.value)
     }, [
-      V(r.$slots, "default")
+      H(r.$slots, "default")
     ], 6));
   }
 }), mt = { class: "widget-title-wrapper w-full flex flex-row gap-2 items-center justify-between" }, ft = { class: "widget-title" }, Ct = { "data-testid": "collapse-and-other-actions" }, vt = { class: "actions-inner" }, wt = { class: "actions-buttons-container" }, xt = { class: "widget-inner" }, J = "size-5", yt = /* @__PURE__ */ b({
@@ -1234,7 +1234,7 @@ const Is = /* @__PURE__ */ Ce(gt, [["render", ht]]), Ds = (t) => {
               o("span", { class: "hidden" }, "Widget")
             ], -1)),
             o("div", wt, [
-              I(x(H), {
+              I(x(j), {
                 "data-testid": `move-widget-left_${e.title}`,
                 isIconButton: !0,
                 disabled: e.index < 1,
@@ -1251,7 +1251,7 @@ const Is = /* @__PURE__ */ Ce(gt, [["render", ht]]), Ds = (t) => {
                 ]),
                 _: 1
               }, 8, ["data-testid", "disabled", "tooltip"]),
-              I(x(H), {
+              I(x(j), {
                 "data-testid": `move-widget-right_${e.title}`,
                 isIconButton: !0,
                 disabled: e.index >= e.maxIndex,
@@ -1268,7 +1268,7 @@ const Is = /* @__PURE__ */ Ce(gt, [["render", ht]]), Ds = (t) => {
                 ]),
                 _: 1
               }, 8, ["data-testid", "disabled", "tooltip"]),
-              I(x(H), {
+              I(x(j), {
                 "data-testid": `remove-container_${e.title}`,
                 isIconButton: !0,
                 tooltip: {
@@ -1289,7 +1289,7 @@ const Is = /* @__PURE__ */ Ce(gt, [["render", ht]]), Ds = (t) => {
         ])
       ], 2),
       o("div", xt, [
-        V(p.$slots, "default")
+        H(p.$slots, "default")
       ])
     ], 2));
   }
@@ -1432,7 +1432,7 @@ const Is = /* @__PURE__ */ Ce(gt, [["render", ht]]), Ds = (t) => {
       r.removeClick($, D);
     }, L = ($, D, h) => {
       r.moveClick($, D, h);
-    }, R = ($) => {
+    }, V = ($) => {
       r.selectContainer($);
     };
     return ($, D) => {
@@ -1452,7 +1452,7 @@ const Is = /* @__PURE__ */ Ce(gt, [["render", ht]]), Ds = (t) => {
               extraProps: k.value,
               onRemoveClick: M,
               onMoveClick: L,
-              onSelectContainer: R
+              onSelectContainer: V
             }, Ie({ _: 2 }, [
               w.value ? {
                 name: "default",
@@ -1488,7 +1488,7 @@ const Is = /* @__PURE__ */ Ce(gt, [["render", ht]]), Ds = (t) => {
       });
     };
   }
-}), zt = ["data-testid"], Ht = { class: "text-sm font-semibold capitalize" }, Vt = { "data-testid": "collapse-and-other-actions" }, jt = { class: "actions-inner" }, Rt = { class: "actions-buttons-container" }, At = ["data-testid"], O = "size-5", Ut = "border-transparent", Pt = "border-card-invert", ve = /* @__PURE__ */ b({
+}), zt = ["data-testid"], jt = { class: "text-sm font-semibold capitalize" }, Ht = { "data-testid": "collapse-and-other-actions" }, Rt = { class: "actions-inner" }, Vt = { class: "actions-buttons-container" }, At = ["data-testid"], O = "size-5", Ut = "border-transparent", Pt = "border-card-invert", ve = /* @__PURE__ */ b({
   __name: "WidgetContainer",
   props: {
     index: {},
@@ -1551,12 +1551,12 @@ const Is = /* @__PURE__ */ Ce(gt, [["render", ht]]), Ds = (t) => {
           class: "widget-title-wrapper w-full flex whitespace-nowrap",
           onClick: z(m, ["stop"])
         }, [
-          o("span", Ht, B(e.title), 1)
+          o("span", jt, B(e.title), 1)
         ]),
-        o("div", Vt, [
-          o("div", jt, [
-            o("div", Rt, [
-              I(x(H), {
+        o("div", Ht, [
+          o("div", Rt, [
+            o("div", Vt, [
+              I(x(j), {
                 "data-testid": `open-widgets-catalog-from-container_${e.title}`,
                 isIconButton: !0,
                 class: "whitespace-nowrap",
@@ -1570,7 +1570,7 @@ const Is = /* @__PURE__ */ Ce(gt, [["render", ht]]), Ds = (t) => {
                 ]),
                 _: 1
               }, 8, ["data-testid"]),
-              I(x(H), {
+              I(x(j), {
                 "data-testid": `move-container-left_${e.title}`,
                 isIconButton: !0,
                 disabled: e.index < 1,
@@ -1587,7 +1587,7 @@ const Is = /* @__PURE__ */ Ce(gt, [["render", ht]]), Ds = (t) => {
                 ]),
                 _: 1
               }, 8, ["data-testid", "disabled", "tooltip"]),
-              I(x(H), {
+              I(x(j), {
                 "data-testid": `move-container-right_${e.title}`,
                 isIconButton: !0,
                 disabled: e.index >= e.maxIndex,
@@ -1604,7 +1604,7 @@ const Is = /* @__PURE__ */ Ce(gt, [["render", ht]]), Ds = (t) => {
                 ]),
                 _: 1
               }, 8, ["data-testid", "disabled", "tooltip"]),
-              I(x(H), {
+              I(x(j), {
                 "data-testid": `remove-container_${e.title}`,
                 isIconButton: !0,
                 tooltip: { placement: "top", title: "Remove Container" },
@@ -1625,7 +1625,7 @@ const Is = /* @__PURE__ */ Ce(gt, [["render", ht]]), Ds = (t) => {
         "data-testid": `childrenwrapper_${e.widgetKey}`,
         class: "widget-container-inner"
       }, [
-        V(_.$slots, "default")
+        H(_.$slots, "default")
       ], 8, At)
     ], 10, zt));
   }
@@ -1662,7 +1662,7 @@ const Is = /* @__PURE__ */ Ce(gt, [["render", ht]]), Ds = (t) => {
       onSelectContainer: x(g)
     }), {
       default: K(() => [
-        V(d.$slots, "default")
+        H(d.$slots, "default")
       ]),
       _: 3
     }, 16, ["onRemoveClick", "onMoveClick", "onSelectContainer"]));
@@ -1700,7 +1700,7 @@ const Is = /* @__PURE__ */ Ce(gt, [["render", ht]]), Ds = (t) => {
       onSelectContainer: x(g)
     }), {
       default: K(() => [
-        V(d.$slots, "default")
+        H(d.$slots, "default")
       ]),
       _: 3
     }, 16, ["onRemoveClick", "onMoveClick", "onSelectContainer"]));
@@ -1804,7 +1804,7 @@ const Is = /* @__PURE__ */ Ce(gt, [["render", ht]]), Ds = (t) => {
     const s = t, e = (h, a) => [
       ...a.widgets.filter((A) => A.indexOf("Container") === -1),
       ...a.childWidgetsConfig.map((A) => A.widgetKey)
-    ].includes(h), n = j("Editing"), i = j(0), r = j(""), g = j(!1), w = v(() => Array.from(s.widgetsCatalog.keys())), d = v(() => w.value.map((h) => ({
+    ].includes(h), n = R("Editing"), i = R(0), r = R(""), g = R(!1), w = v(() => Array.from(s.widgetsCatalog.keys())), d = v(() => w.value.map((h) => ({
       widgetKey: h,
       metaData: Me(h, s.widgetsCatalog)
     }))), p = v(() => d.value.filter(
@@ -1824,7 +1824,7 @@ const Is = /* @__PURE__ */ Ce(gt, [["render", ht]]), Ds = (t) => {
     }, L = (h) => T(
       "px-4 py-2 font-medium cursor-pointer border-b-2 border-transparent hover:border-primary focus:outline-none",
       h === i.value ? "text-primary border-primary" : ""
-    ), R = (h) => {
+    ), V = (h) => {
       _.value ? s.addWidget(h, s.targetContainerKey) : s.addWidget(h);
     }, $ = (h) => {
       const a = (s.currentDashboardConfig.cssSettings || []).map((u) => u.key === h.key ? h : u);
@@ -1872,7 +1872,7 @@ const Is = /* @__PURE__ */ Ce(gt, [["render", ht]]), Ds = (t) => {
               }, B(n.value), 9, ns)
             ]),
             o("div", is, [
-              I(x(H), {
+              I(x(j), {
                 "data-testid": "undo-dashboard-config-change",
                 isIconButton: !0,
                 tooltip: {
@@ -1887,7 +1887,7 @@ const Is = /* @__PURE__ */ Ce(gt, [["render", ht]]), Ds = (t) => {
                 ]),
                 _: 1
               }, 8, ["disabled"]),
-              I(x(H), {
+              I(x(j), {
                 "data-testid": "redo-dashboard-config-change",
                 isIconButton: !0,
                 tooltip: {
@@ -1902,7 +1902,7 @@ const Is = /* @__PURE__ */ Ce(gt, [["render", ht]]), Ds = (t) => {
                 ]),
                 _: 1
               }, 8, ["disabled"]),
-              I(x(H), {
+              I(x(j), {
                 "data-testid": "reset-dashboard-to-default",
                 isIconButton: !0,
                 tooltip: {
@@ -1958,13 +1958,13 @@ const Is = /* @__PURE__ */ Ce(gt, [["render", ht]]), Ds = (t) => {
               widgetKey: u.widgetKey,
               metaData: u.metaData,
               alreadyAdded: e(u.widgetKey, t.currentDashboardConfig),
-              onAddWidget: () => R(u.widgetKey)
+              onAddWidget: () => V(u.widgetKey)
             }, null, 8, ["widgetKey", "metaData", "alreadyAdded", "onAddWidget"]))), 128)) : i.value === 1 ? (l(!0), f(U, { key: 1 }, P(c.value, (u) => (l(), E(ee, {
               key: u.widgetKey,
               widgetKey: u.widgetKey,
               metaData: u.metaData,
               alreadyAdded: e(u.widgetKey, t.currentDashboardConfig),
-              onAddWidget: () => R(u.widgetKey)
+              onAddWidget: () => V(u.widgetKey)
             }, null, 8, ["widgetKey", "metaData", "alreadyAdded", "onAddWidget"]))), 128)) : i.value === 2 && !_.value ? (l(!0), f(U, { key: 2 }, P(m.value, (u) => (l(), E(ee, {
               key: u.widgetKey,
               widgetKey: u.widgetKey,
@@ -1980,7 +1980,7 @@ const Is = /* @__PURE__ */ Ce(gt, [["render", ht]]), Ds = (t) => {
             }, null, 8, ["item"]))), 128)) : Y("", !0)
           ]),
           o("div", ls, [
-            I(x(H), {
+            I(x(j), {
               class: "bg-opacity-100",
               tooltip: {
                 placement: "bottom",
@@ -2002,7 +2002,7 @@ const Is = /* @__PURE__ */ Ce(gt, [["render", ht]]), Ds = (t) => {
 });
 export {
   hs as AddIcon,
-  H as Button,
+  j as Button,
   et as CircleQuestionMarkIcon,
   Je as CrosshairIcon,
   Ws as DashboardGrid,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tenorlab/vue-dashboard",
-  "version": "1.4.903",
+  "version": "1.5.2",
   "description": "Foundation components for creating user-configurable dashboards in Vue",
   "author": "Damiano Fusco",
   "type": "module",
@@ -47,7 +47,7 @@
   "main": "./dist/vue-dashboard.es.js",
   "module": "./dist/vue-dashboard.es.js",
   "devDependencies": {
-    "@tenorlab/dashboard-core": "^1.5.1",
+    "@tenorlab/dashboard-core": "^1.5.2",
     "@types/node": "^24.10.1",
     "@vitejs/plugin-vue": "^6.0.3",
     "prettier": "^3.7.4",