@vc-shell/framework 1.2.4-beta.3 → 1.2.4-beta.5

package/core/utilities/date/convertMomentFormat.ts

@@ -0,0 +1,30 @@
+const LOCALE_SHORTCUTS: [string, string][] = [
+  ["LLLL", "PPPp"],
+  ["LLL", "PPp"],
+  ["LTS", "pp"],
+  ["LT", "p"],
+  ["LL", "PP"],
+  ["L", "P"],
+];
+
+const TOKEN_MAP: [RegExp, string][] = [
+  [/YYYY/g, "yyyy"],
+  [/YY/g, "yy"],
+  [/dddd/g, "EEEE"],
+  [/ddd/g, "EEE"],
+  [/DD/g, "dd"],
+  [/Do/g, "do"],
+  [/D(?![\w])/g, "d"],
+  [/A/g, "a"],
+];
+
+export function convertMomentFormat(momentFormat: string): string {
+  let result = momentFormat;
+  for (const [moment, dateFns] of LOCALE_SHORTCUTS) {
+    result = result.split(moment).join(dateFns);
+  }
+  for (const [pattern, replacement] of TOKEN_MAP) {
+    result = result.replace(pattern, replacement);
+  }
+  return result;
+}

package/core/utilities/date/formatDate.test.ts

@@ -0,0 +1,60 @@
+import { describe, it, expect, vi, afterEach } from "vitest";
+import { formatDateRelative, formatDateWithPattern } from "./formatDate";
+
+describe("formatDateRelative", () => {
+  afterEach(() => {
+    vi.useRealTimers();
+  });
+
+  it("returns relative time for a past date", () => {
+    vi.useFakeTimers();
+    vi.setSystemTime(new Date("2024-06-15T12:00:00Z"));
+
+    const pastDate = new Date("2024-06-15T11:00:00Z");
+    const result = formatDateRelative(pastDate);
+    expect(result).toContain("ago");
+  });
+
+  it("handles ISO string input", () => {
+    vi.useFakeTimers();
+    vi.setSystemTime(new Date("2024-06-15T12:00:00Z"));
+
+    const result = formatDateRelative("2024-06-15T11:30:00Z");
+    expect(result).toContain("ago");
+  });
+
+  it('returns "" for null', () => {
+    expect(formatDateRelative(null)).toBe("");
+  });
+
+  it('returns "" for undefined', () => {
+    expect(formatDateRelative(undefined)).toBe("");
+  });
+
+  it('returns "" for empty string', () => {
+    expect(formatDateRelative("")).toBe("");
+  });
+});
+
+describe("formatDateWithPattern", () => {
+  it("formats with 'YYYY-MM-DD HH:mm' pattern", () => {
+    const date = new Date("2024-03-15T14:30:00Z");
+    const result = formatDateWithPattern(date, "YYYY-MM-DD HH:mm");
+    expect(result).toMatch(/2024-03-15 \d{2}:30/);
+  });
+
+  it("formats with 'DD.MM.YYYY' pattern", () => {
+    const date = new Date("2024-03-15T00:00:00Z");
+    const result = formatDateWithPattern(date, "DD.MM.YYYY");
+    expect(result).toMatch(/15\.03\.2024/);
+  });
+
+  it("accepts string date input", () => {
+    const result = formatDateWithPattern("2024-01-01T00:00:00Z", "YYYY-MM-DD");
+    expect(result).toMatch(/2024-01-01/);
+  });
+
+  it('returns "" for null', () => {
+    expect(formatDateWithPattern(null, "YYYY-MM-DD")).toBe("");
+  });
+});

package/core/utilities/date/formatDate.ts

@@ -0,0 +1,31 @@
+import { formatDistanceToNow, format } from "date-fns";
+import { convertMomentFormat } from "./convertMomentFormat";
+import { resolveLocaleSync } from "./resolveLocale";
+
+type DateInput = string | number | Date | null | undefined;
+
+function toDate(value: DateInput): Date | null {
+  if (value == null || value === "") return null;
+  if (value instanceof Date) return value;
+  const d = new Date(value);
+  return isNaN(d.getTime()) ? null : d;
+}
+
+export function formatDateRelative(value: DateInput, localeCode?: string): string {
+  const date = toDate(value);
+  if (!date) return "";
+  const locale = localeCode ? resolveLocaleSync(localeCode) : undefined;
+  return formatDistanceToNow(date, { addSuffix: true, locale });
+}
+
+export function formatDateWithPattern(
+  value: DateInput,
+  momentFormatStr: string,
+  localeCode?: string,
+): string {
+  const date = toDate(value);
+  if (!date) return "";
+  const dateFnsFormat = convertMomentFormat(momentFormatStr);
+  const locale = localeCode ? resolveLocaleSync(localeCode) : undefined;
+  return format(date, dateFnsFormat, { locale });
+}

package/core/utilities/date/index.ts

@@ -0,0 +1,3 @@
+export { formatDateRelative, formatDateWithPattern } from "./formatDate";
+export { convertMomentFormat } from "./convertMomentFormat";
+export { resolveLocale, resolveLocaleSync } from "./resolveLocale";

package/core/utilities/date/resolveLocale.test.ts

@@ -0,0 +1,44 @@
+import { describe, it, expect } from "vitest";
+import { resolveLocale, resolveLocaleSync } from "./resolveLocale";
+import { enUS } from "date-fns/locale";
+
+describe("resolveLocale", () => {
+  it("returns enUS for 'en-US'", async () => {
+    const locale = await resolveLocale("en-US");
+    expect(locale).toBe(enUS);
+  });
+
+  it("returns enUS for 'en'", async () => {
+    const locale = await resolveLocale("en");
+    expect(locale).toBe(enUS);
+  });
+
+  it("returns enUS as fallback for unknown locale 'xx-XX'", async () => {
+    const locale = await resolveLocale("xx-XX");
+    expect(locale).toBe(enUS);
+  });
+
+  it("returns correct locale for 'de' (dynamic load)", async () => {
+    const locale = await resolveLocale("de");
+    expect(locale).toBeDefined();
+    expect(locale).not.toBe(enUS);
+  });
+
+  it("returns correct locale for 'fr-CA' (compound, dynamic load)", async () => {
+    const locale = await resolveLocale("fr-CA");
+    expect(locale).toBeDefined();
+    expect(locale).not.toBe(enUS);
+  });
+});
+
+describe("resolveLocaleSync", () => {
+  it("returns cached enUS for 'en-US'", () => {
+    const locale = resolveLocaleSync("en-US");
+    expect(locale).toBe(enUS);
+  });
+
+  it("returns enUS fallback for uncached locale", () => {
+    const locale = resolveLocaleSync("zz-ZZ");
+    expect(locale).toBe(enUS);
+  });
+});

package/core/utilities/date/resolveLocale.ts

@@ -0,0 +1,41 @@
+import { type Locale } from "date-fns";
+import { enUS } from "date-fns/locale";
+
+const localeCache = new Map<string, Locale>();
+localeCache.set("en-US", enUS);
+localeCache.set("en", enUS);
+
+export async function resolveLocale(localeCode: string): Promise<Locale> {
+  if (localeCache.has(localeCode)) {
+    return localeCache.get(localeCode)!;
+  }
+  try {
+    const mod = await import(/* @vite-ignore */ `date-fns/locale/${localeCode}`);
+    const dateFnsKey = localeCode.replace("-", "");
+    const locale = mod.default ?? mod[dateFnsKey] ?? enUS;
+    localeCache.set(localeCode, locale);
+    return locale;
+  } catch {
+    const base = localeCode.split("-")[0];
+    if (base !== localeCode) {
+      try {
+        const mod = await import(/* @vite-ignore */ `date-fns/locale/${base}`);
+        const locale = mod.default ?? mod[base] ?? enUS;
+        localeCache.set(localeCode, locale);
+        return locale;
+      } catch {
+        /* fall through */
+      }
+    }
+    localeCache.set(localeCode, enUS);
+    return enUS;
+  }
+}
+
+export function resolveLocaleSync(localeCode: string): Locale {
+  if (localeCache.has(localeCode)) {
+    return localeCache.get(localeCode)!;
+  }
+  void resolveLocale(localeCode);
+  return enUS;
+}

package/core/utilities/index.ts

@@ -4,3 +4,8 @@ export * from "@core/utilities/camelize";
 export * from "@core/utilities/generateId";
 export * from "@core/utilities/logger";
 export * from "@core/utilities/errorTypes";
+export * from "@core/utilities/error";
+export * from "./date";
+// Note: pendingErrorNotifications is NOT re-exported here to avoid a circular
+// dependency (notification.ts → @core/utilities → pendingErrorNotifications → notification.ts).
+// Import directly from "@core/utilities/pendingErrorNotifications" where needed.

package/core/utilities/pendingErrorNotifications.ts

@@ -0,0 +1,64 @@
+/**
+ * Shared WeakMap that allows useAsync to register a deferred toast notification,
+ * and ErrorInterceptor to cancel it when the same error is caught for blade banner display.
+ *
+ * This decouples the two modules — neither imports the other directly.
+ *
+ * IMPORTANT: This module must NOT have top-level imports from @shared/components
+ * because it is transitively imported by useAsync (in the @core/composables barrel),
+ * and @shared/components/notifications pulls in @ui/components which imports from
+ * @core/composables — creating a circular dependency.
+ */
+
+interface PendingNotification {
+  timerId: ReturnType<typeof setTimeout>;
+  notifId: string;
+}
+
+const pending = new WeakMap<object, PendingNotification>();
+
+/**
+ * Register a deferred error notification for an error object.
+ * Called by useAsync after scheduling a setTimeout for the toast.
+ */
+export function setPendingErrorNotification(
+  error: object,
+  timerId: ReturnType<typeof setTimeout>,
+  notifId: string,
+): void {
+  pending.set(error, { timerId, notifId });
+}
+
+/**
+ * Cancel a deferred error notification for an error object.
+ * Called by ErrorInterceptor when it catches the error and will show a blade banner instead.
+ * Returns true if a pending notification was found and cancelled.
+ */
+export function cancelPendingErrorNotification(error: unknown): boolean {
+  if (error && typeof error === "object") {
+    // Try direct lookup first, then fall back to originalError.
+    // useErrorHandler wraps errors via parseError() → DisplayableError,
+    // so the watch receives a different object than what useAsync stored.
+    const directEntry = pending.get(error);
+    const originalError =
+      "originalError" in error && error.originalError && typeof error.originalError === "object"
+        ? (error.originalError as object)
+        : undefined;
+    const entry = directEntry ?? (originalError ? pending.get(originalError) : undefined);
+    const key = directEntry ? error : originalError;
+
+    if (entry && key) {
+      clearTimeout(entry.timerId);
+      // Lazy import to avoid circular dependency at module load time.
+      // In practice, clearTimeout above is sufficient since the deferred
+      // setTimeout(0) hasn't fired yet when this runs synchronously from
+      // ErrorInterceptor's onErrorCaptured. The remove() is a safety net.
+      import("@shared/components/notifications/core/notification").then(({ notification }) => {
+        notification.remove(entry.notifId);
+      });
+      pending.delete(key);
+      return true;
+    }
+  }
+  return false;
+}

package/dist/DashboardBarChart-B-g_a-7F.js

@@ -0,0 +1,123 @@
+import { defineComponent as K, computed as c, openBlock as i, createBlock as n, withCtx as f, createVNode as d, unref as l, createCommentVNode as s } from "vue";
+import { w as B, S, z as A, b as F, a as m } from "./vendor-unovis-vue-C_K1g5KH.js";
+import { b as p, c as C } from "./index-DVyGELzS.js";
+import { f as L, r as g, b as V, a as X, c as Y } from "./chart-utils-BTs6UFaZ.js";
+const G = /* @__PURE__ */ K({
+  __name: "DashboardBarChart",
+  props: {
+    data: {},
+    config: {},
+    xKey: {},
+    yKeys: {},
+    height: { default: void 0 },
+    showTooltip: { type: Boolean, default: !0 },
+    showXAxis: { type: Boolean, default: !0 },
+    showYAxis: { type: Boolean, default: !0 },
+    showGrid: { type: Boolean, default: !0 },
+    showLegend: { type: Boolean, default: !0 },
+    numXTicks: { default: void 0 },
+    numYTicks: { default: 5 },
+    rangeStart: { default: void 0 },
+    rangeEnd: { default: void 0 },
+    xTickFormat: { type: Function, default: void 0 },
+    yTickFormat: { type: Function, default: void 0 }
+  },
+  setup(t) {
+    const e = t, y = { top: 8, right: 8, bottom: 4, left: 4 }, h = (a) => a[e.xKey], k = c(
+      () => L(
+        e.data,
+        (a) => a[e.xKey],
+        e.rangeStart,
+        e.rangeEnd
+      )
+    ), x = c(
+      () => e.yKeys.map((a) => (o) => o[a])
+    ), b = c(
+      () => e.yKeys.map(
+        (a, o) => g({
+          config: e.config,
+          key: String(a),
+          index: o,
+          fallbackLabel: String(a)
+        }).color
+      )
+    ), T = c(() => ({
+      [B.bar]: (a, o) => {
+        if (!e.yKeys.length || o < 0)
+          return null;
+        const u = o % e.yKeys.length, r = e.yKeys[u];
+        if (!r)
+          return null;
+        const { label: v, color: w } = g({
+          config: e.config,
+          key: String(r),
+          index: u,
+          fallbackLabel: String(r)
+        });
+        return V({
+          title: Y(a[e.xKey], e.xTickFormat),
+          items: [
+            {
+              label: v,
+              color: w,
+              value: X(a[r], e.yTickFormat)
+            }
+          ]
+        });
+      }
+    }));
+    return (a, o) => (i(), n(p, { config: t.config }, {
+      default: f(() => [
+        d(l(S), {
+          data: k.value,
+          height: t.height,
+          margin: y
+        }, {
+          default: f(() => [
+            t.showTooltip ? (i(), n(l(A), {
+              key: 0,
+              "allow-hover": !0,
+              "class-name": "dashboard-chart-tooltip-host",
+              "vertical-shift": 8,
+              triggers: T.value
+            }, null, 8, ["triggers"])) : s("", !0),
+            d(l(F), {
+              x: h,
+              y: x.value,
+              color: b.value,
+              "rounded-corners": 4,
+              "bar-padding": 0.2
+            }, null, 8, ["y", "color"]),
+            t.showXAxis ? (i(), n(l(m), {
+              key: 1,
+              type: "x",
+              "tick-line": !1,
+              "domain-line": !1,
+              "grid-line": !1,
+              "num-ticks": t.numXTicks,
+              "tick-format": t.xTickFormat
+            }, null, 8, ["num-ticks", "tick-format"])) : s("", !0),
+            t.showYAxis ? (i(), n(l(m), {
+              key: 2,
+              type: "y",
+              "tick-line": !1,
+              "domain-line": !1,
+              "grid-line": t.showGrid,
+              "num-ticks": t.numYTicks,
+              "tick-format": t.yTickFormat
+            }, null, 8, ["grid-line", "num-ticks", "tick-format"])) : s("", !0)
+          ]),
+          _: 1
+        }, 8, ["data", "height"]),
+        t.showLegend ? (i(), n(C, {
+          key: 0,
+          config: t.config
+        }, null, 8, ["config"])) : s("", !0)
+      ]),
+      _: 1
+    }, 8, ["config"]));
+  }
+});
+export {
+  G as default
+};

package/dist/DashboardDonutChart-AktPFUNo.js

@@ -0,0 +1,89 @@
+import { defineComponent as K, computed as f, openBlock as n, createBlock as i, withCtx as s, createVNode as g, unref as u, createCommentVNode as b } from "vue";
+import { D as L, c as w, E as k, z as C } from "./vendor-unovis-vue-C_K1g5KH.js";
+import { b as S, c as T } from "./index-DVyGELzS.js";
+import { r as B, b as p, a as x } from "./chart-utils-BTs6UFaZ.js";
+const A = /* @__PURE__ */ K({
+  __name: "DashboardDonutChart",
+  props: {
+    data: {},
+    config: {},
+    valueKey: {},
+    colorKey: { default: void 0 },
+    height: { default: void 0 },
+    arcWidth: { default: 60 },
+    cornerRadius: { default: 4 },
+    showTooltip: { type: Boolean, default: !0 },
+    showLegend: { type: Boolean, default: !0 },
+    centralLabel: { default: void 0 },
+    centralSubLabel: { default: void 0 },
+    valueFormat: { type: Function, default: void 0 }
+  },
+  setup(a) {
+    const o = a, h = (e) => e[o.valueKey], c = f(() => Object.keys(o.config)), d = (e, t) => o.colorKey && e[o.colorKey] ? e[o.colorKey] : c.value[t] ? o.config[c.value[t]].color : void 0, v = (e, t) => {
+      const l = e.label;
+      if (typeof l == "string" && l.trim())
+        return l;
+      const r = c.value[t];
+      return r ? o.config[r]?.label ?? r : `Segment ${t + 1}`;
+    }, m = f(() => ({
+      [L.segment]: (e) => {
+        if (!e?.data)
+          return;
+        const t = e.index ?? 0, l = v(e.data, t), r = c.value[t], { color: y } = B({
+          config: o.config,
+          key: r,
+          index: t,
+          fallbackLabel: l
+        });
+        return p({
+          items: [
+            {
+              label: l,
+              color: d(e.data, t) ?? y,
+              value: x(
+                e.value ?? e.data[o.valueKey],
+                o.valueFormat
+              )
+            }
+          ]
+        });
+      }
+    }));
+    return (e, t) => (n(), i(S, { config: a.config }, {
+      default: s(() => [
+        g(u(w), {
+          data: a.data,
+          height: a.height
+        }, {
+          default: s(() => [
+            g(u(k), {
+              value: h,
+              color: d,
+              "arc-width": a.arcWidth,
+              "corner-radius": a.cornerRadius,
+              "pad-angle": 0.02,
+              "central-label": a.centralLabel,
+              "central-sub-label": a.centralSubLabel
+            }, null, 8, ["arc-width", "corner-radius", "central-label", "central-sub-label"]),
+            a.showTooltip ? (n(), i(u(C), {
+              key: 0,
+              "allow-hover": !0,
+              "class-name": "dashboard-chart-tooltip-host",
+              "vertical-shift": 8,
+              triggers: m.value
+            }, null, 8, ["triggers"])) : b("", !0)
+          ]),
+          _: 1
+        }, 8, ["data", "height"]),
+        a.showLegend ? (n(), i(T, {
+          key: 0,
+          config: a.config
+        }, null, 8, ["config"])) : b("", !0)
+      ]),
+      _: 1
+    }, 8, ["config"]));
+  }
+});
+export {
+  A as default
+};

package/dist/DashboardLineChart-BQKqRFhM.js

@@ -0,0 +1,125 @@
+import { defineComponent as b, computed as f, openBlock as i, createBlock as n, withCtx as g, createVNode as p, unref as r, createCommentVNode as u, createElementBlock as B, Fragment as F, renderList as A } from "vue";
+import { S as K, z as S, A as C, C as L, a as h } from "./vendor-unovis-vue-C_K1g5KH.js";
+import { b as V, c as X } from "./index-DVyGELzS.js";
+import { f as Y, r as k, b as D, a as E, c as $ } from "./chart-utils-BTs6UFaZ.js";
+const H = /* @__PURE__ */ b({
+  __name: "DashboardLineChart",
+  props: {
+    data: {},
+    config: {},
+    xKey: {},
+    yKeys: {},
+    height: { default: void 0 },
+    showTooltip: { type: Boolean, default: !0 },
+    showXAxis: { type: Boolean, default: !0 },
+    showYAxis: { type: Boolean, default: !0 },
+    showGrid: { type: Boolean, default: !0 },
+    showLegend: { type: Boolean, default: !0 },
+    numXTicks: { default: void 0 },
+    numYTicks: { default: 5 },
+    rangeStart: { default: void 0 },
+    rangeEnd: { default: void 0 },
+    xTickFormat: { type: Function, default: void 0 },
+    yTickFormat: { type: Function, default: void 0 }
+  },
+  setup(e) {
+    const o = e, v = { top: 8, right: 8, bottom: 4, left: 4 }, m = (t) => t[o.xKey], x = f(
+      () => Y(
+        o.data,
+        (t) => t[o.xKey],
+        o.rangeStart,
+        o.rangeEnd
+      )
+    ), d = f(
+      () => o.yKeys.map((t) => (a) => a[t])
+    ), y = f(
+      () => o.yKeys.map(
+        (t, a) => k({
+          config: o.config,
+          key: String(t),
+          index: a,
+          fallbackLabel: String(t)
+        }).color
+      )
+    ), T = (t) => D({
+      title: $(t[o.xKey], o.xTickFormat),
+      items: o.yKeys.map((a, c) => {
+        const { label: l, color: s } = k({
+          config: o.config,
+          key: String(a),
+          index: c,
+          fallbackLabel: String(a)
+        });
+        return {
+          label: l,
+          color: s,
+          value: E(t[a], o.yTickFormat)
+        };
+      })
+    }), w = (t, a, c, l) => {
+      const s = t ?? (typeof l == "number" ? c[l] : void 0);
+      if (s)
+        return T(s);
+    };
+    return (t, a) => (i(), n(V, { config: e.config }, {
+      default: g(() => [
+        p(r(K), {
+          data: x.value,
+          height: e.height,
+          margin: v
+        }, {
+          default: g(() => [
+            e.showTooltip ? (i(), n(r(S), {
+              key: 0,
+              "allow-hover": !0,
+              "class-name": "dashboard-chart-tooltip-host",
+              "vertical-shift": 8
+            })) : u("", !0),
+            e.showTooltip ? (i(), n(r(C), {
+              key: 1,
+              x: m,
+              y: d.value,
+              color: y.value,
+              template: w
+            }, null, 8, ["y", "color"])) : u("", !0),
+            (i(!0), B(F, null, A(d.value, (c, l) => (i(), n(r(L), {
+              key: l,
+              x: m,
+              y: c,
+              color: y.value[l],
+              "curve-type": "monotoneX",
+              "line-width": 2
+            }, null, 8, ["y", "color"]))), 128)),
+            e.showXAxis ? (i(), n(r(h), {
+              key: 2,
+              type: "x",
+              "tick-line": !1,
+              "domain-line": !1,
+              "grid-line": !1,
+              "num-ticks": e.numXTicks,
+              "tick-format": e.xTickFormat
+            }, null, 8, ["num-ticks", "tick-format"])) : u("", !0),
+            e.showYAxis ? (i(), n(r(h), {
+              key: 3,
+              type: "y",
+              "tick-line": !1,
+              "domain-line": !1,
+              "grid-line": e.showGrid,
+              "num-ticks": e.numYTicks,
+              "tick-format": e.yTickFormat
+            }, null, 8, ["grid-line", "num-ticks", "tick-format"])) : u("", !0)
+          ]),
+          _: 1
+        }, 8, ["data", "height"]),
+        e.showLegend ? (i(), n(X, {
+          key: 0,
+          config: e.config
+        }, null, 8, ["config"])) : u("", !0)
+      ]),
+      _: 1
+    }, 8, ["config"]));
+  }
+});
+export {
+  H as default
+};