@tenorlab/vue-dashboard 1.0.0

package/dist/core.es.js

@@ -0,0 +1,367 @@
+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 i = e.value.match(/([\d.]+)/), a = i ? parseFloat(i[1]) : 0, s = e.value.match(/([^\d.]+)/), n = s ? s[1] : e.defaultUnit, r = b(n, e.step) * t, c = `${Math.max(a + r, e.minValue).toFixed(1)}${n}`;
+    return {
+      ...e,
+      value: c
+    };
+  }
+}, f = (e, t) => `dashboards_${t}_${e}`, v = async (e, t, i, a) => {
+  const s = localStorage.getItem(f(e, t));
+  if (s)
+    try {
+      const n = JSON.parse(s);
+      return n.length < 1 ? [a] : (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 = a.widgets);
+        const c = (r.cssSettings || []).filter(
+          (o) => a.cssSettings.some((d) => d.key === o.key)
+        );
+        if (c.length < 1)
+          r.cssSettings = [...a.cssSettings];
+        else {
+          c.forEach((d) => {
+            d.value = (d.value || "").replace(/NaN/g, "");
+            const l = a.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 = a.cssSettings.filter((d) => !c.some(
+            (l) => l.key === d.key
+          ));
+          r.cssSettings = [...c, ...o];
+        }
+        r.widgets = r.widgets.filter(
+          (o) => o.includes("WidgetContainer") || i.has(o)
+        ), r.childWidgetsConfig = r.childWidgetsConfig.filter(
+          (o) => i.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 [a];
+}, C = async (e, t, i, a) => {
+  i.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") || a.has(r)
+    ), n.childWidgetsConfig = n.childWidgetsConfig.filter(
+      (r) => a.has(r.widgetKey)
+    ), n.zoomScale ? n.zoomScale < 0.7 && (n.zoomScale = 0.7) : n.zoomScale = 1;
+  });
+  const s = JSON.stringify(i);
+  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";
+}, m = 0.7, p = 1, V = 0.05, D = (e) => {
+  let t = Number(e || 0);
+  return t < m && (t = m), t > p && (t = p), t;
+}, j = (e, t) => {
+  let i = Number(Number((V * t).toFixed(2)).toFixed(2)), a = Number((Number(e) + i).toFixed(2));
+  return D(a);
+}, N = (e) => {
+  let t = {
+    ...e
+  };
+  return t.widgets = t.widgets.filter((i) => {
+    if (`${i}`.includes("WidgetContainer")) {
+      const a = t.childWidgetsConfig.filter(
+        (s) => s.parentWidgetKey === i
+      );
+      if (!a || a.length === 0)
+        return t.widgets = t.widgets.filter(
+          (s) => s !== i
+        ), !1;
+    }
+    return !0;
+  }), t;
+}, x = (e) => {
+  const t = e.widgets.filter(
+    (a) => a.includes("WidgetContainer")
+  ), i = {};
+  return t.forEach((a, s) => {
+    const n = `${a.split("_container")[0]}_container${s + 1}`;
+    i[a] = n;
+  }), e.widgets = e.widgets.map((a) => i[a] || a), e.childWidgetsConfig = e.childWidgetsConfig.map((a) => {
+    const s = a.parentWidgetKey, n = i[s];
+    return {
+      ...a,
+      // If a new key exists, use it. If not, keep the original key.
+      parentWidgetKey: n || s
+    };
+  }), e;
+}, u = (e, t) => {
+  const i = `${e}`.includes("Container"), a = i ? ["Container"] : ["Widget"], s = t?.name || e, n = t?.description || (i ? "Container" : "Unknown");
+  return {
+    name: s,
+    description: n,
+    categories: a,
+    noDuplicatedWidgets: !0,
+    icon: void 0,
+    externalDependencies: []
+  };
+}, I = (e, t, i) => t[e] || u(e, i), M = (e, t) => t.get(e)?.meta || u(e), k = (e, t, i) => {
+  const a = i || u(e);
+  return [
+    e,
+    {
+      key: e,
+      title: a.name,
+      isContainer: `${e}`.includes("Container"),
+      meta: a,
+      component: t
+    }
+  ];
+}, h = (e, t, i) => {
+  const a = i || u(e);
+  return [
+    e,
+    {
+      key: e,
+      title: a.name,
+      isContainer: !1,
+      meta: a,
+      loader: t
+    }
+  ];
+}, F = (e) => {
+  const t = e.match(/\/widget-([a-zA-Z0-9-]+)\/index\.ts$/);
+  if (t && t[1]) {
+    const i = t[1], a = i.split("-"), s = `Widget${a.map((r) => r.charAt(0).toUpperCase() + r.slice(1)).join("")}`, n = a.map((r) => r.charAt(0).toUpperCase() + r.slice(1)).join(" ");
+    return {
+      key: s,
+      title: n,
+      folder: i
+    };
+  }
+  return null;
+}, $ = (e, t, i, a) => {
+  const s = `${t}/widget-${i}/meta.ts`, n = e[s];
+  if (!n)
+    return;
+  const r = `${a}Meta`;
+  return n[r] || void 0;
+}, A = async (e) => new Promise(async (t, i) => {
+  const a = [];
+  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 || []
+      };
+      a.push(h(n, c, o));
+    }
+    t({
+      entries: a,
+      message: "",
+      details: ""
+    });
+  } catch (s) {
+    console.error("Remote plugin discovery failed:", s), i({
+      entries: [],
+      message: "Remote plugin discovery failed:",
+      details: typeof s == "object" ? JSON.stringify(s) : s
+    });
+  }
+}), K = (e, t, i, a = !0) => {
+  const s = [];
+  for (const n in t) {
+    const r = t[n], c = F(n);
+    if (c && r) {
+      const { key: o, title: d, folder: l } = c;
+      let g = $(i, e, l, o);
+      if (g || (g = u(o, {
+        description: `Local ${a ? "dynamic" : "static"} widget`
+      })), a)
+        s.push(
+          h(o, r, g)
+        );
+      else {
+        const y = r.default || r;
+        s.push(k(o, y, g));
+      }
+    }
+  }
+  return s;
+}, G = (e, t = "color") => {
+  if (typeof window > "u") return "#FFFFFF";
+  const i = document.createElement("div");
+  Array.isArray(e) ? e.forEach((s) => i.classList.add(s)) : e.split(" ").forEach((s) => i.classList.add(s)), i.style.display = "none", document.body.appendChild(i);
+  const a = window.getComputedStyle(i)[t];
+  return document.body.removeChild(i), a;
+}, R = {
+  /**
+   * @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((i) => {
+      t.style.setProperty(i.cssProperty, i.value);
+    });
+  }
+}, Z = (e, ...t) => [
+  ...new Set(
+    [e || "", ...t].join(" ").trim().replace(/\n+/gi, " ").replace(/\s+/gi, " ").split(" ")
+  )
+].join(" ").trim();
+export {
+  p as DashboardMaxZoomScale,
+  m as DashboardMinZoomScale,
+  V as DashboardZoomStep,
+  z as blankDashboardConfig,
+  h as createDynamicEntry,
+  k as createStaticEntry,
+  w as cssSettingsCatalog,
+  R as cssVarsUtils,
+  E as dashboardSettingsUtils,
+  x as ensureContainersSequence,
+  D as ensureZoomScaleIsWithinRange,
+  u 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,
+  G as resolveColorFromClass,
+  P as useDashboardStorageService
+};

package/dist/styles.css

@@ -0,0 +1 @@
+html{--bwj-dashboard-num-columns: 3;--bwj-dashboard-gap: 1.25rem;--bwj-dashboard-transform-scale: 1;--bwj-dashboard-add-cols: 1;--bwj-widget-width: 21rem;--bwj-widget-border-radius: .33rem;--bwj-widget-inner-px: 1rem;--bwj-widget-inner-py: .75rem;--bwj-widget-header-px: var(--bwj-widget-inner-px);--bwj-widget-header-py: 1rem;--bwj-widget-title-size: .8rem;--bwj-widget-title-weight: 600;--bwj-dashboard-debug-container-flex-row: none;--bwj-dashboard-debug-container-flex-column: none;--bwj-dashboard-debug-container-grid-large-inner: none}html .dashboard-main-grid{width:100%;display:grid;grid-template-columns:repeat(var(--bwj-dashboard-num-columns, 4),minmax(var(--bwj-widget-width),1fr));gap:var(--bwj-dashboard-gap, 1.5rem);transform:scale(var(--bwj-dashboard-transform-scale, 1));transform-origin:top left}html .dashboard-main-grid.editing{row-gap:calc(var(--bwj-dashboard-gap) + .8rem)}html .dashboard-main-grid:not(.responsive-grid){max-width:min-content}html .dashboard-main-grid.responsive-grid{width:100%}html .dashboard-widget-container{--bwj-border-opacity: .5;flex:1 1 0%;width:100%}html .dashboard-widget-container .widget-container-header{display:none;position:absolute;height:1.85rem;inset:-1.85rem -1px auto;cursor:pointer;padding:0 .33rem}html .dashboard-widget-container .widget-container-header .actions-inner{transition:all .3s ease-in-out;width:100%;display:none;align-items:center;justify-content:space-between;font-size:.8rem}html .dashboard-widget-container.editing{border-top:none!important;border-bottom-left-radius:var(--bwj-widget-border-radius, .3rem);border-bottom-right-radius:var(--bwj-widget-border-radius, .3rem)}html .dashboard-widget-container.editing .widget-container-header{display:flex;border-bottom:none!important;border-top-left-radius:var(--bwj-widget-border-radius, .3rem);border-top-right-radius:var(--bwj-widget-border-radius, .3rem)}html .dashboard-widget-container.editing .widget-container-header>.actions-inner{display:flex!important}html .dashboard-widget-container.editing.highlight-container:before{content:"";position:absolute;inset:-1.85rem 0 0;box-shadow:0 2px 10px 6px oklch(var(--bwj-primary-okl) var(--bwj-primary-okc) var(--bwj-primary-okh) / .5);pointer-events:none}html .dashboard-widget{flex:1 1 0%;display:flex;flex-direction:column;position:relative;border-radius:var(--bwj-widget-border-radius, .3rem);height:100%;width:100%}html .dashboard-widget:not(.no-shadow){box-shadow:1px 2px 8px #0000001a}html .dashboard-widget.no-shadow{box-shadow:none}html .dashboard-widget.transparent-widget{background-color:transparent}html .dashboard-widget .widget-title-wrapper .widget-title{font-size:var(--bwj-widget-title-size, .75rem);font-weight:var(--bwj-widget-title-weight, 600)}html .dashboard-widget .widget-inner{flex:1 1 0%;display:flex;flex-direction:column;justify-content:space-between}html .dashboard-widget:not(.no-padding) .widget-inner{padding:var(--bwj-widget-inner-py, 1rem) var(--bwj-widget-inner-px, 1.5rem)}html .dashboard-widget.no-padding .widget-inner{padding:0}html .dashboard-widget .widget-header{padding:var(--bwj-widget-header-py, 1rem) var(--bwj-widget-header-px, 1.5rem)}html .dashboard-widget-container .widget-container-inner{padding:0;gap:var(--bwj-dashboard-gap, 1.5rem)}html .dashboard-widget-container.direction-row.widget-container-flex{grid-column:1 / -1;width:100%;outline:var(--bwj-dashboard-debug-container-flex-row)}html .dashboard-widget-container.direction-row.widget-container-flex .widget-container-inner{display:flex;flex-direction:row;height:100%}html .dashboard-widget-container.direction-row.widget-container-flex .widget-container-inner .dashboard-widget{min-width:5%;max-width:100%}html .dashboard-widget-container.direction-column.widget-container-flex .widget-container-inner{display:flex;flex-direction:column;height:100%;outline:var(--bwj-dashboard-debug-container-flex-column)}html .dashboard-widget-container.direction-column.widget-container-flex .widget-container-inner .dashboard-widget{min-width:5%;max-width:100%}html .dashboard-widget-container.large-widget.widget-container-grid .widget-container-inner{display:grid;grid-template-columns:repeat(2,minmax(var(--bwj-widget-width),1fr));outline:var(--bwj-dashboard-debug-container-grid-large-inner)}html .dashboard-main-grid.responsive-grid .dashboard-widget-container:not(.large-widget):not(.xlarge-widget),html .dashboard-main-grid.responsive-grid .dashboard-widget:not(.large-widget):not(.xlarge-widget){min-width:20%;max-width:100%}html .dashboard-main-grid:not(.responsive-grid) .dashboard-widget-container:not(.widget-container-flex):not(.large-widget):not(.xlarge-widget),html .widget-container-flex:not(.direction-row) .dashboard-main-grid:not(.responsive-grid) .dashboard-widget:not(.large-widget):not(.xlarge-widget){min-width:var(--bwj-widget-width);max-width:var(--bwj-widget-width)}html .dashboard-widget-container.large-widget,html .dashboard-widget.large-widget{grid-column:span 2}html .dashboard-main-grid:not(.responsive-grid) .dashboard-widget-container.large-widget,html .dashboard-main-grid:not(.responsive-grid) .dashboard-widget.large-widget{max-width:calc(680px + var(--bwj-dashboard-gap, 1.5rem))}html .dashboard-widget-container.xlarge-widget,html .dashboard-widget.xlarge-widget{grid-column:span 3}html .dashboard-main-grid:not(.responsive-grid) .dashboard-widget-container.xlarge-widget,html .dashboard-main-grid:not(.responsive-grid) .dashboard-widget.xlarge-widget{max-width:calc(1020px + (var(--bwj-dashboard-gap, 1.5rem) * 2))}html .widget-header .actions-inner{display:none;align-items:center;gap:.25rem}html .widget-header .actions-inner .actions-buttons-container{align-items:center;gap:.25rem}html .dashboard-widget.editing:hover .actions-inner{display:flex!important}html .dashboard-widget-container.editing .widget-container-header .actions-inner{display:flex}html .actions-buttons-container{display:flex!important;align-items:center!important;gap:.25rem!important}html .dashboard-number{font-variant-numeric:tabular-nums;font-size:2.5rem;font-weight:700}html .dashboard-number.number-xl{font-size:3.5rem}html .dashboard-number.number-lg{font-size:2.5rem}html .dashboard-number.number-base{font-size:1.5rem}html .dashboard-progress-bar{padding:0;width:100%;height:1.5rem;border-radius:.75rem}html .dashboard-progress{padding:0;height:1.25rem;border-radius:.75rem}@media(max-width:769px){html .dashboard-main-grid{display:flex;flex-direction:column;width:100%;max-width:100%!important}html .dashboard-widget-container.widget-container-flex.direction-row{max-width:100%;grid-column:auto}html .dashboard-widget-container.widget-container-flex.direction-row .widget-container-inner{display:flex;flex-wrap:wrap;flex-direction:column!important;width:100%}}@media(min-width:770px){html .dashboard-main-grid{--bwj-dashboard-num-columns: calc(2 + var(--bwj-dashboard-add-cols))}}@media(max-width:1119px){html .dashboard-widget-container.widget-container-flex.direction-row{max-width:100%;grid-column:auto}html .dashboard-widget-container.widget-container-flex.direction-row .widget-container-inner{display:flex;flex-wrap:wrap;flex-direction:column!important;width:100%}}@media(min-width:1120px){html .dashboard-main-grid{--bwj-dashboard-num-columns: calc(3 + var(--bwj-dashboard-add-cols))}}@media(min-width:1480px){html .dashboard-main-grid{--bwj-dashboard-num-columns: calc(4 + var(--bwj-dashboard-add-cols))}}@media(min-width:1840px){html .dashboard-main-grid{--bwj-dashboard-num-columns: calc(5 + var(--bwj-dashboard-add-cols))}}@media(min-width:2220px){html .dashboard-main-grid{--bwj-dashboard-num-columns: calc(6 + var(--bwj-dashboard-add-cols))}}