@antelopejs/dms 0.5.5 → 0.6.0

package/frontend-vue/tests/page-fill-height.test.ts

@@ -40,30 +40,58 @@ vi.mock(
   "../layers/dms-layout/app/build/components/layout/DashboardBanners.vue",
   () => ({ default: () => null }),
 );
+vi.mock(
+  "../layers/dms-layout/app/build/components/layout/RolePreviewBar.vue",
+  () => ({ default: () => null }),
+);
+vi.mock(
+  "../layers/dms-layout/app/build/composables/dev-reload/useDevReloadHolder",
+  async () => {
+    const { ref } = await import("vue");
+    return { useDevReloading: () => ref(false) };
+  },
+);
 
 interface PageLayoutFixture {
   components: Record<string, { componentName: string }>;
 }
 
 const route = reactive({ path: "/tools/explorer", query: {} });
+const pageLoading = ref(false);
 const pageLayout = ref<PageLayoutFixture | null>(null);
 
-// The markup `DefaultLayout` and `pages/[...slug].vue` rendered for a
-// two-component page before `fillHeight` existed, with the stubs below.
+// The page skeleton the layout keeps after the page (shown only while the page
+// is pending after a client navigation, once a short delay passes).
+const PAGE_SKELETON_MARKUP =
+  '<div aria-hidden="true" class="dms-page-skeleton space-y-6 hidden [html[data-dms-role-preview=pending]_&amp;]:block"><!--v-if-->' +
+  '<div class="dms-card space-y-4 p-[18px]"><USkeleton class="h-3.5 w-40"></USkeleton><!--[-->' +
+  ["72%", "58%", "66%", "44%"]
+    .map(
+      (width) =>
+        `<USkeleton class="h-2.5" style="width:${width};"></USkeleton>`,
+    )
+    .join("") +
+  "<!--]--></div></div>";
+
+// The markup `DefaultLayout` and `pages/[...slug].vue` render for a
+// two-component page outside the settings area, with the stubs below.
 const FLOW_PAGE_MARKUP =
-  "<div data-dms-persistent-shell data-group><!---->" +
-  "<div data-panel><!--[--><!----><!----><!--]-->" +
+  '<div data-dms-persistent-shell storage-key="dms-dashboard" unit="px" data-group><!---->' +
+  "<div data-panel><!--[--><!----><!----><!----><!--]-->" +
   "<div data-body>" +
-  '<div class="w-full max-w-none" data-dms-page-region data-dms-page-content><!--[-->' +
-  '<section class="flex gap-4 items-start pt-6 pb-7">' +
-  '<div class="rounded-lg bg-primary/10 shrink-0 ring ring-primary/20 flex items-center justify-center size-12"><i class="text-primary"></i></div>' +
-  '<div class="flex-1 min-w-0">' +
-  '<h1 class="text-highlighted text-[22px] font-semibold leading-tight tracking-tight"><!--[-->Explorer<!--]--></h1><!--v-if--></div><!--[--><!--]--></section><!--[-->' +
+  '<div class="w-full max-w-none pb-12 lg:pb-16" data-dms-page-region data-dms-page-content><!--[--><!--[--><!--[-->' +
+  '<section class="flex flex-wrap gap-x-3.5 gap-y-4 items-start pb-6">' +
+  '<div class="mt-px rounded-[9px] bg-primary/10 shrink-0 ring ring-inset ring-primary/35 flex items-center justify-center size-9"><i class="text-primary"></i></div>' +
+  '<div class="flex-1 min-w-0 md:flex-[1_1_16rem]">' +
+  '<h1 class="text-highlighted text-2xl font-[650] leading-[1.2] tracking-[-0.03em]"><!--[-->Explorer<!--]--></h1><!--v-if--></div><!--[--><!--[--><!-- eslint-disable vue/no-v-html --><!--v-if--><!--]--><!--]--></section>' +
+  '<div class="contents [html[data-dms-role-preview=pending]_&amp;]:hidden"><!--[--><!--[--><!--[-->' +
   '<div class="dms-page-stack space-y-6">' +
   '<div class="">' +
-  '<section data-component="stats" page-id="tools.explorer"></section></div>' +
+  '<section data-component="stats" page-id="tools.explorer" layout-path="stats"></section></div>' +
   '<div class="">' +
-  '<section data-component="explorer" page-id="tools.explorer"></section></div></div><!--]--><!--]--></div></div><!--[--><!----><!--]--></div></div>';
+  '<section data-component="explorer" page-id="tools.explorer" layout-path="explorer"></section></div></div><!----><!--]--><!--]--><!--]--></div>' +
+  PAGE_SKELETON_MARKUP +
+  "<!----><!--]--><!--]--><!--]--></div></div><!--[--><!----><!--]--></div></div>";
 
 function withComponents(...ids: string[]): PageLayoutFixture {
   return {
@@ -126,8 +154,9 @@ function installRuntime(): void {
     showError: vi.fn(),
     validateRequiredQueryParams: vi.fn(),
     useDefinedFunctions: () => ({ getFunction: () => undefined }),
-    useDevReloading: () => ref(false),
+    useDmsPageLoading: () => pageLoading,
     useDmsRoute: () => route,
+    useDmsState: <T>(_key: string, init?: () => T) => ref(init?.()),
     useHomepage: () => "/",
     usePageLayout: async () => ({ pageLayout }),
     usePageRealtime: () => ({}),
@@ -151,6 +180,10 @@ function installRuntime(): void {
         metadata: { fullId: "tools.explorer", hasAccess: true },
         params: {},
       }),
+      findMatchingRouteOrCategory: () => ({
+        metadata: { fullId: "tools.explorer", hasAccess: true },
+        params: {},
+      }),
     }),
     useTranslation: () => ({ processI18n: (value: string) => value }),
   };
@@ -211,6 +244,7 @@ function expectNoFillClasses(element: Element | null | undefined) {
 
 beforeEach(() => {
   installRuntime();
+  pageLoading.value = false;
   route.path = "/tools/explorer";
   pageLayout.value = withComponents("stats", "explorer");
 });
@@ -264,7 +298,7 @@ describe("DefaultLayout with fillHeight", () => {
     );
     const region = host.querySelector("[data-dms-page-content]");
     expectClasses(region, PAGE_FILL_HEIGHT_CLASSES.region);
-    expectClasses(region, "w-full max-w-none");
+    expectClasses(region, "w-full max-w-none pb-12 lg:pb-16");
   });
 
   it("keeps the page header a plain item of that column", async () => {
@@ -274,10 +308,11 @@ describe("DefaultLayout with fillHeight", () => {
     const header = host.querySelector("[data-dms-page-content] > section");
     expect(classesOf(header)).toEqual([
       "flex",
-      "gap-4",
+      "flex-wrap",
+      "gap-x-3.5",
+      "gap-y-4",
       "items-start",
-      "pt-6",
-      "pb-7",
+      "pb-6",
     ]);
   });
 
@@ -350,3 +385,34 @@ describe("DefaultLayout with fillHeight", () => {
     app.unmount();
   });
 });
+
+describe("DefaultLayout while the page loads", () => {
+  it("shows the skeleton in place of the page while the engine waits on it", async () => {
+    const app = withStubs(
+      createApp(() =>
+        h(
+          DefaultLayout,
+          { title: "Explorer" },
+          { default: () => h("section", { "data-page": "" }) },
+        ),
+      ),
+    );
+    const host = document.createElement("div");
+    app.mount(host);
+    const skeleton = () => host.querySelector(".dms-page-skeleton");
+    const pageWrapper = () => host.querySelector("[data-page]")?.parentElement;
+    expect(classesOf(skeleton())).toContain("hidden");
+    expect(classesOf(pageWrapper())).not.toContain("hidden");
+
+    pageLoading.value = true;
+    await nextTick();
+    expect(classesOf(skeleton())).not.toContain("hidden");
+    expect(classesOf(pageWrapper())).toContain("hidden");
+
+    pageLoading.value = false;
+    await nextTick();
+    expect(classesOf(skeleton())).toContain("hidden");
+    expect(classesOf(pageWrapper())).not.toContain("hidden");
+    app.unmount();
+  });
+});

package/frontend-vue/tests/password-input.test.ts

@@ -0,0 +1,122 @@
+// @vitest-environment jsdom
+import { afterEach, beforeEach, expect, it, vi } from "vitest";
+import {
+  type App,
+  createApp,
+  type FunctionalComponent,
+  h,
+  nextTick,
+  ref,
+} from "vue";
+
+interface InputStubProps {
+  modelValue?: string;
+  icon?: string;
+  color?: string;
+}
+
+const Input: FunctionalComponent<InputStubProps> = (props, { attrs, slots }) =>
+  h("div", [
+    h("input", {
+      ...attrs,
+      value: props.modelValue,
+      "data-icon": props.icon,
+      "data-color": props.color,
+    }),
+    slots.trailing?.(),
+  ]);
+Input.props = ["modelValue", "icon", "color"];
+Input.inheritAttrs = false;
+
+interface ButtonStubProps {
+  label?: string;
+  icon?: string;
+}
+
+const Button: FunctionalComponent<ButtonStubProps> = (props, { attrs }) =>
+  h(
+    "button",
+    { type: "button", ...attrs, "data-icon": props.icon },
+    props.label,
+  );
+Button.props = ["label", "icon"];
+Button.inheritAttrs = false;
+
+let app: App | undefined;
+let host: HTMLDivElement;
+
+async function mount(props: Record<string, unknown> = {}) {
+  const { default: PasswordInput } = await import(
+    "../layers/dms-ui/app/build/components/form/PasswordInput.vue"
+  );
+  const visible = ref(false);
+  app = createApp({
+    setup: () => () =>
+      h(PasswordInput, {
+        id: "secret",
+        visible: visible.value,
+        "onUpdate:visible": (value: boolean) => {
+          visible.value = value;
+        },
+        ...props,
+      }),
+  });
+  app.component("UInput", Input);
+  app.component("UButton", Button);
+  app.mount(host);
+  await nextTick();
+  return visible;
+}
+
+const input = () => host.querySelector("input")!;
+const toggle = () => host.querySelector("button")!;
+
+beforeEach(() => {
+  vi.stubGlobal("useI18n", () => ({ t: (key: string) => key }));
+  host = document.createElement("div");
+  document.body.append(host);
+});
+
+afterEach(() => {
+  app?.unmount();
+  host.remove();
+  vi.unstubAllGlobals();
+});
+
+it("hides the value until the eye shows it, and says which it does", async () => {
+  const visible = await mount();
+  expect(input().type).toBe("password");
+  expect(toggle().getAttribute("aria-label")).toBe(
+    "dms.form.input.show_password",
+  );
+  expect(toggle().getAttribute("aria-controls")).toBe("secret");
+  expect(toggle().dataset.icon).toBe("i-ph-eye");
+
+  toggle().click();
+  await nextTick();
+
+  expect(visible.value).toBe(true);
+  expect(input().type).toBe("text");
+  expect(toggle().getAttribute("aria-pressed")).toBe("true");
+  expect(toggle().getAttribute("aria-label")).toBe(
+    "dms.form.input.hide_password",
+  );
+  expect(toggle().dataset.icon).toBe("i-ph-eye-slash");
+});
+
+it("writes Show / Hide on the toggle of a new password, with the lock icon", async () => {
+  await mount({ labelledToggle: true, hasLockIcon: true });
+  expect(toggle().textContent).toBe("dms.form.input.show");
+  expect(input().dataset.icon).toBe("i-ph-lock-simple");
+});
+
+it("keeps the caller's colour unless the value is invalid", async () => {
+  await mount({ color: "primary" });
+  expect(input().dataset.color).toBe("primary");
+  expect(input().getAttribute("aria-invalid")).toBeNull();
+  app?.unmount();
+
+  await mount({ color: "primary", invalid: true });
+  expect(input().dataset.color).toBe("error");
+  expect(input().getAttribute("aria-invalid")).toBe("true");
+});

package/frontend-vue/tests/period-draft.test.ts

@@ -0,0 +1,120 @@
+import { effectScope } from "vue";
+import { describe, expect, it } from "vitest";
+import { usePeriod } from "../layers/dms-core/app/composables/period/usePeriod";
+import { usePeriodDraft } from "../layers/dms-ui/app/build/composables/period/usePeriodDraft";
+import { localeWeekStart } from "../layers/dms-core/app/utils/regional";
+import {
+  formatPeriodRange,
+  periodDuration,
+} from "../layers/dms-ui/app/build/composables/period/periodDisplay";
+
+function setup() {
+  const scope = effectScope();
+  const result = scope.run(() => {
+    const period = usePeriod({
+      defaultPreset: "this-month",
+      presets: ["last-7-days", "this-month", "custom"],
+    });
+    return { period, draft: usePeriodDraft(period) };
+  });
+  if (!result) throw new Error("scope did not run");
+  return { ...result, stop: () => scope.stop() };
+}
+
+describe("period draft", () => {
+  it("stages presets and comparisons without moving the period", () => {
+    const { period, draft, stop } = setup();
+    const before = period.state.value.key;
+
+    draft.selectPreset("last-7-days");
+    draft.selectComparison("previous-period");
+
+    expect(draft.isDirty.value).toBe(true);
+    expect(draft.compareRange.value).not.toBeNull();
+    expect(period.state.value.key).toBe(before);
+    stop();
+  });
+
+  it("commits the staged selection on apply", () => {
+    const { period, draft, stop } = setup();
+
+    draft.selectPreset("last-7-days");
+    draft.selectComparison("previous-year");
+    draft.apply();
+
+    expect(period.preset.value).toBe("last-7-days");
+    expect(period.comparison.value).toBe("previous-year");
+    expect(draft.isDirty.value).toBe(false);
+    stop();
+  });
+
+  it("applies a picked range as the custom preset", () => {
+    const { period, draft, stop } = setup();
+    const range = {
+      from: new Date(2026, 8, 14),
+      to: new Date(2026, 8, 20, 23, 59, 59, 999),
+    };
+
+    draft.selectRange(range);
+    expect(period.preset.value).toBe("this-month");
+    draft.apply();
+
+    expect(period.preset.value).toBe("custom");
+    expect(period.state.value.range).toEqual(range);
+    stop();
+  });
+
+  it("drops staged changes on reset", () => {
+    const { period, draft, stop } = setup();
+
+    draft.selectPreset("last-7-days");
+    draft.reset();
+
+    expect(draft.preset.value).toBe(period.preset.value);
+    expect(draft.isDirty.value).toBe(false);
+    stop();
+  });
+
+  it("starts a custom selection on the whole days on screen", () => {
+    const { draft, stop } = setup();
+
+    draft.selectPreset("custom");
+
+    const range = draft.customRange.value;
+    expect(range?.from.getHours()).toBe(0);
+    expect(range?.to.getHours()).toBe(23);
+    stop();
+  });
+});
+
+describe("period display", () => {
+  it("counts whole days, and hours below a day", () => {
+    expect(
+      periodDuration({
+        from: new Date(2026, 8, 1),
+        to: new Date(2026, 8, 30, 23, 59, 59, 999),
+      }),
+    ).toEqual({ unit: "days", count: 30 });
+    expect(
+      periodDuration({
+        from: new Date(2026, 8, 1, 10),
+        to: new Date(2026, 8, 1, 11),
+      }),
+    ).toEqual({ unit: "hours", count: 1 });
+  });
+
+  it("keeps the year off a comparison label on request", () => {
+    const range = {
+      from: new Date(2026, 7, 1),
+      to: new Date(2026, 7, 30, 23, 59, 59, 999),
+    };
+    expect(formatPeriodRange(range, "en-US")).toContain("2026");
+    expect(formatPeriodRange(range, "en-US", false)).not.toContain("2026");
+  });
+
+  it("starts the week on Monday for the DMS locales", () => {
+    expect(localeWeekStart("en")).toBe(1);
+    expect(localeWeekStart("fr")).toBe(1);
+    expect(localeWeekStart("fr-FR")).toBe(1);
+  });
+});

package/frontend-vue/tests/period-presets.test.ts

@@ -82,6 +82,18 @@ describe("previous-period comparison", () => {
     expect(range.from.getTime() - compare!.to.getTime()).toBe(1);
   });
 
+  it("keeps whole-day comparisons on midnight across a DST change", () => {
+    // October 2026 holds the European DST change (Oct 25); the previous
+    // 31 days must still start at local midnight.
+    const range = {
+      from: new Date(2026, 9, 1),
+      to: new Date(new Date(2026, 10, 1).getTime() - 1),
+    };
+    const compare = resolveComparisonRange("previous-period", range, null);
+    expect(compare!.from).toEqual(new Date(2026, 7, 31));
+    expect(compare!.to.getTime()).toBe(range.from.getTime() - 1);
+  });
+
   it("keeps previous-year on the same calendar dates", () => {
     const range = resolvePresetRange("last-30-days", NOW, FALLBACK);
     const compare = resolveComparisonRange("previous-year", range, null);

package/frontend-vue/tests/period-scope-first-fetch.test.ts

@@ -9,6 +9,7 @@
  */
 import {
   computed,
+  createApp,
   createSSRApp,
   defineAsyncComponent,
   defineComponent,
@@ -44,7 +45,7 @@ const { usePeriod } = await import(
 const { registerPeriodScope } = await import(
   "../layers/dms-core/app/composables/period/usePeriodScope"
 );
-const { useChartFetch } = await import(
+const { useChartFetch, PENDING_SCOPE_TIMEOUT_MS } = await import(
   "../layers/dms-ui/app/composables/chart/useChartFetch"
 );
 const KpiCard = (
@@ -52,7 +53,9 @@ const KpiCard = (
 ).default;
 
 const SCOPE = "demo";
-const GRACE_MS = 250;
+// usePeriodScope warns about a missing scope after this long; a card must not
+// give up on its scope that early (a selector chunk can land later).
+const MISSING_SCOPE_WARN_MS = 250;
 // useChartFetch debounces every refresh past the first by 180ms; settle past
 // that, or a duplicate first fetch lands after the assertions and goes unseen.
 const SETTLE_MS = 300;
@@ -261,16 +264,98 @@ describe("period-scoped cards on first paint", () => {
     expect(html).not.toContain("<span>0</span>");
   });
 
-  it("stops loading when no selector ever registers the scope", async () => {
-    const Orphan = defineComponent({
+  it("keeps loading while a late selector may still register the scope", async () => {
+    const Late = defineComponent({
       setup: () => () =>
-        h(Card, { url: "/api/metrics/kpi/orphan", scope: "never-registered" }),
+        h(Card, { url: "/api/metrics/kpi/late", scope: "late-scope" }),
     });
-    const { container } = await ssrThenHydrate(Orphan);
-    await new Promise((resolve) => setTimeout(resolve, GRACE_MS + 50));
+    const { container } = await ssrThenHydrate(Late);
+    await new Promise((resolve) =>
+      setTimeout(resolve, MISSING_SCOPE_WARN_MS + 50),
+    );
     await nextTick();
 
     expect(requests).toHaveLength(0);
-    expect(container.querySelector(".card")?.textContent).toBe("false");
+    expect(container.querySelector(".card")?.textContent).toBe("true");
+  });
+
+  it("stops loading when no selector ever registers the scope", async () => {
+    vi.useFakeTimers({ shouldAdvanceTime: true });
+    try {
+      const Orphan = defineComponent({
+        setup: () => () =>
+          h(Card, {
+            url: "/api/metrics/kpi/orphan",
+            scope: "never-registered",
+          }),
+      });
+      const { container } = await ssrThenHydrate(Orphan);
+      vi.advanceTimersByTime(PENDING_SCOPE_TIMEOUT_MS + 50);
+      await nextTick();
+
+      expect(requests).toHaveLength(0);
+      expect(container.querySelector(".card")?.textContent).toBe("false");
+    } finally {
+      vi.useRealTimers();
+    }
+  });
+});
+
+describe("chart fetch loading state", () => {
+  it("stays loading when an aborted request settles after a newer one started", async () => {
+    const pending: Array<{
+      url: string;
+      resolve: (value: unknown) => void;
+      reject: (error: unknown) => void;
+    }> = [];
+    vi.stubGlobal("useAuthFetch", () => ({
+      $authFetch: (url: string, opts: { signal: AbortSignal }) =>
+        new Promise((resolve, reject) => {
+          pending.push({ url, resolve, reject });
+          opts.signal.addEventListener("abort", () =>
+            reject(Object.assign(new Error("aborted"), { name: "AbortError" })),
+          );
+        }),
+    }));
+    const watched = ref(0);
+    let loading: { value: boolean } | undefined;
+    let refresh: (() => Promise<void>) | undefined;
+    const Probe = defineComponent({
+      setup() {
+        const fetch = useChartFetch<{ value: number }>({
+          fetchUrl: "/api/metrics/kpi/race",
+          watchSource: () => watched.value,
+        });
+        loading = fetch.isLoading;
+        refresh = fetch.refresh;
+        return () => h("div");
+      },
+    });
+    const app = createApp(Probe);
+    app.mount(document.createElement("div"));
+    mounted.push(app);
+    await nextTick();
+    expect(pending).toHaveLength(1);
+
+    // A second request supersedes the first, whose abort settles meanwhile.
+    void refresh?.();
+    await new Promise((resolve) => setTimeout(resolve, 0));
+    expect(pending).toHaveLength(2);
+    expect(loading?.value).toBe(true);
+
+    pending[1]!.resolve({ value: 2 });
+    await new Promise((resolve) => setTimeout(resolve, 0));
+    expect(loading?.value).toBe(false);
+
+    // New inputs: loading from the change on, through the debounce.
+    watched.value = 1;
+    await nextTick();
+    expect(loading?.value).toBe(true);
+    vi.stubGlobal("useAuthFetch", () => ({
+      $authFetch: async (url: string) => {
+        requests.push(url);
+        return { value: 1 };
+      },
+    }));
   });
 });