@antelopejs/dms 0.7.15 → 0.7.16

package/frontend-vue/tests/period-max-days.test.ts

@@ -0,0 +1,128 @@
+// @vitest-environment jsdom
+/**
+ * `maxDays` caps the custom range a PeriodSelector lets the user pick: the
+ * calendar disables the days past it once a start day is picked, and a range
+ * from the date fields or a long preset is cut to it.
+ */
+import { CalendarDate } from "@internationalized/date";
+import { readFileSync } from "node:fs";
+import { resolve } from "node:path";
+import { createApp, defineComponent, h, nextTick, type App } from "vue";
+import { afterEach, describe, expect, it } from "vitest";
+import PeriodRangeCalendar from "../layers/dms-ui/app/build/components/period/PeriodRangeCalendar.vue";
+import {
+  calendarRangeDays,
+  isBeyondMaxDays,
+  limitCalendarRange,
+} from "../layers/dms-ui/app/build/composables/period/periodDisplay";
+
+const OCTOBER_FIRST = new CalendarDate(2026, 10, 1);
+const OCTOBER_LAST = new CalendarDate(2026, 10, 31);
+
+describe("limitCalendarRange", () => {
+  const october = { start: OCTOBER_FIRST, end: OCTOBER_LAST };
+
+  it("keeps a range within the limit", () => {
+    expect(limitCalendarRange(october, 31, "start")).toBe(october);
+    expect(limitCalendarRange(october, undefined, "start")).toBe(october);
+  });
+
+  it("moves the end when the start is kept", () => {
+    const limited = limitCalendarRange(october, 7, "start");
+    expect(limited.start.toString()).toBe("2026-10-01");
+    expect(limited.end.toString()).toBe("2026-10-07");
+    expect(calendarRangeDays(limited)).toBe(7);
+  });
+
+  it("moves the start when the end is kept", () => {
+    const limited = limitCalendarRange(october, 7, "end");
+    expect(limited.start.toString()).toBe("2026-10-25");
+    expect(limited.end.toString()).toBe("2026-10-31");
+  });
+});
+
+describe("isBeyondMaxDays", () => {
+  it("allows exactly maxDays days on either side of the picked day", () => {
+    const picked = new CalendarDate(2026, 10, 10);
+    expect(isBeyondMaxDays(picked.add({ days: 6 }), picked, 7)).toBe(false);
+    expect(isBeyondMaxDays(picked.add({ days: 7 }), picked, 7)).toBe(true);
+    expect(isBeyondMaxDays(picked.subtract({ days: 6 }), picked, 7)).toBe(
+      false,
+    );
+    expect(isBeyondMaxDays(picked.subtract({ days: 7 }), picked, 7)).toBe(true);
+    expect(isBeyondMaxDays(picked.add({ days: 400 }), picked, undefined)).toBe(
+      false,
+    );
+  });
+});
+
+describe("the range calendar with maxDays", () => {
+  let app: App | undefined;
+
+  afterEach(() => {
+    app?.unmount();
+    app = undefined;
+  });
+
+  function mountCalendar(maxDays?: number): HTMLElement {
+    const host = document.createElement("div");
+    document.body.appendChild(host);
+    app = createApp(
+      defineComponent({
+        setup: () => () =>
+          h(PeriodRangeCalendar, {
+            modelValue: {
+              start: new CalendarDate(2026, 9, 1),
+              end: new CalendarDate(2026, 9, 2),
+            },
+            locale: "en-US",
+            numberOfMonths: 1,
+            maxDays,
+          }),
+      }),
+    );
+    app.config.globalProperties.$t = (_key: string, fallback: string) =>
+      fallback;
+    app.component(
+      "UButton",
+      defineComponent({ setup: () => () => h("button") }),
+    );
+    app.mount(host);
+    return host;
+  }
+
+  function day(host: HTMLElement, value: string): HTMLElement {
+    const cell = host.querySelector<HTMLElement>(`[data-value="${value}"]`);
+    if (!cell) throw new Error(`No day ${value}`);
+    return cell;
+  }
+
+  it("disables the days past the limit once a start day is picked", async () => {
+    const host = mountCalendar(7);
+    expect(day(host, "2026-09-20").hasAttribute("data-disabled")).toBe(false);
+    day(host, "2026-09-10").click();
+    await nextTick();
+    expect(day(host, "2026-09-16").hasAttribute("data-disabled")).toBe(false);
+    expect(day(host, "2026-09-17").hasAttribute("data-disabled")).toBe(true);
+    expect(day(host, "2026-09-03").hasAttribute("data-disabled")).toBe(true);
+  });
+
+  it("leaves every day enabled without a limit", async () => {
+    const host = mountCalendar();
+    day(host, "2026-09-10").click();
+    await nextTick();
+    expect(day(host, "2026-09-30").hasAttribute("data-disabled")).toBe(false);
+  });
+});
+
+it("hands maxDays to the calendar and cuts the date fields to it", () => {
+  const source = readFileSync(
+    resolve(
+      __dirname,
+      "../layers/dms-ui/app/components/period/PeriodSelector.vue",
+    ),
+    "utf8",
+  );
+  expect(source).toContain(':max-days="maxDays"');
+  expect(source).toContain("limitCalendarRange(range, props.maxDays, anchor)");
+});

package/frontend-vue/tests/period-selector-url.test.ts

@@ -25,12 +25,13 @@ const preferences = new Map<string, unknown>();
 vi.stubGlobal("useDmsRoute", () => route);
 // Inertia's client-side replace moves its page URL, which the DMS route
 // follows: the route then holds the query the browser shows.
+function followInertiaPage({ url }: { url: string }): void {
+  route.query = Object.fromEntries(
+    new URL(url, "http://dms.local").searchParams,
+  );
+}
 const { inertiaReplace } = vi.hoisted(() => ({
-  inertiaReplace: vi.fn(({ url }: { url: string }) => {
-    route.query = Object.fromEntries(
-      new URL(url, "http://dms.local").searchParams,
-    );
-  }),
+  inertiaReplace: vi.fn(),
 }));
 vi.mock("@inertiajs/vue3", () => ({ router: { replace: inertiaReplace } }));
 vi.stubGlobal("usePreferences", () => ({
@@ -116,13 +117,24 @@ function mount(...ids: string[]): void {
 
 const search = () => new URLSearchParams(window.location.search);
 
+/** A navigation from outside: the browser's URL moves, then the route. */
+function navigate(query: Record<string, string>): void {
+  window.history.replaceState(
+    null,
+    "",
+    `${PAGE_PATH}?${new URLSearchParams(query)}`,
+  );
+  route.query = query;
+}
+
 const remember = (query: Record<string, string>) =>
   preferences.set(PERIOD_PREFERENCE_KEY, { [`${PAGE_ID}#page`]: query });
 
 beforeEach(() => {
   route.query = {};
   preferences.clear();
-  inertiaReplace.mockClear();
+  inertiaReplace.mockReset();
+  inertiaReplace.mockImplementation(followInertiaPage);
   window.history.replaceState(null, "", PAGE_PATH);
 });
 
@@ -272,10 +284,34 @@ describe("a change of period", () => {
   });
 });
 
+describe("the route while Inertia catches up", () => {
+  it("holds the new period at once", async () => {
+    inertiaReplace.mockImplementation(() => {});
+    mount("page");
+    handles.page!.setPreset("last-7-days");
+    await nextTick();
+    expect(route.query["page.period"]).toBe("last-7-days");
+    expect(search().get("page.period")).toBe("last-7-days");
+  });
+
+  it("does not move the period back when it reports the old URL late", async () => {
+    inertiaReplace.mockImplementation(() => {});
+    mount("page");
+    await nextTick();
+    const before = { ...route.query };
+    handles.page!.setPreset("last-7-days");
+    await nextTick();
+    route.query = before;
+    await nextTick();
+    expect(handles.page!.preset.value).toBe("last-7-days");
+    expect(search().get("page.period")).toBe("last-7-days");
+  });
+});
+
 describe("a route changed from outside", () => {
   it("moves the period of the selector it names", async () => {
     mount("sales", "traffic");
-    route.query = { "sales.period": "last-30-days" };
+    navigate({ "sales.period": "last-30-days" });
     await nextTick();
     expect(handles.sales!.preset.value).toBe("last-30-days");
     expect(handles.traffic!.preset.value).toBe("this-month");
@@ -285,7 +321,7 @@ describe("a route changed from outside", () => {
     mount("page");
     handles.page!.setPreset("last-7-days");
     await nextTick();
-    route.query = { "page.period": "last-decade" };
+    navigate({ "page.period": "last-decade" });
     await nextTick();
     expect(handles.page!.preset.value).toBe("last-7-days");
   });

package/frontend-vue/tests/table-view-url-tab.test.ts

@@ -0,0 +1,115 @@
+// @vitest-environment jsdom
+/**
+ * A table view opens the tab its URL names (`?<tableId>.tab=`, or `?tab=` on
+ * a page with a single table view), on arrival and afterwards: a link or a
+ * `router.replace` naming another tab switches to it in place, without
+ * remounting the page.
+ */
+import { readFileSync } from "node:fs";
+import { resolve } from "node:path";
+import { createApp, defineComponent, h, nextTick, reactive, ref } from "vue";
+import { afterEach, describe, expect, it } from "vitest";
+import {
+  readTableUrlTab,
+  useTableUrlTab,
+} from "../layers/dms-ui/app/build/composables/table-view/useTableUrlTab";
+import type { TableUrlScope } from "../layers/dms-ui/app/build/composables/table-view/utils/views";
+
+const OPENABLE_TABS = new Set(["all", "active", "archived"]);
+const mounted: Array<{ unmount: () => void }> = [];
+
+function mountTable(scope: TableUrlScope, query: Record<string, string>) {
+  const route = reactive({ query });
+  const activeTabId = ref(readTableUrlTab(route.query, scope) ?? "all");
+  const app = createApp(
+    defineComponent({
+      setup() {
+        useTableUrlTab({
+          route,
+          urlScope: scope,
+          activeTabId,
+          isOpenable: (tabId) => OPENABLE_TABS.has(tabId),
+        });
+        return () => h("div");
+      },
+    }),
+  );
+  app.mount(document.createElement("div"));
+  mounted.push(app);
+  return { route, activeTabId };
+}
+
+afterEach(() => {
+  mounted.splice(0).forEach((app) => app.unmount());
+});
+
+describe("the tab a URL names", () => {
+  it("opens on arrival", () => {
+    const { activeTabId } = mountTable(
+      { tableId: "runs" },
+      { "runs.tab": "active" },
+    );
+    expect(activeTabId.value).toBe("active");
+  });
+
+  it("switches the tab when the prefixed key changes after mount", async () => {
+    const { route, activeTabId } = mountTable({ tableId: "runs" }, {});
+    route.query = { "runs.tab": "archived" };
+    await nextTick();
+    expect(activeTabId.value).toBe("archived");
+  });
+
+  it("follows the short key on a page with a single table view", async () => {
+    const { route, activeTabId } = mountTable(
+      { tableId: "runs", isSoleTableView: true },
+      { tab: "active" },
+    );
+    expect(activeTabId.value).toBe("active");
+    route.query = { tab: "archived" };
+    await nextTick();
+    expect(activeTabId.value).toBe("archived");
+  });
+
+  it("ignores the short key on a page with several table views", async () => {
+    const { route, activeTabId } = mountTable({ tableId: "runs" }, {});
+    route.query = { tab: "archived" };
+    await nextTick();
+    expect(activeTabId.value).toBe("all");
+  });
+
+  it("keeps the open tab when the key is dropped or unknown", async () => {
+    const { route, activeTabId } = mountTable(
+      { tableId: "runs" },
+      { "runs.tab": "active" },
+    );
+    route.query = {};
+    await nextTick();
+    expect(activeTabId.value).toBe("active");
+    route.query = { "runs.tab": "missing" };
+    await nextTick();
+    expect(activeTabId.value).toBe("active");
+  });
+
+  it("lets the user change tabs while the URL stays put", async () => {
+    const { route, activeTabId } = mountTable(
+      { tableId: "runs" },
+      { "runs.tab": "active" },
+    );
+    activeTabId.value = "archived";
+    route.query = { "runs.tab": "active", other: "1" };
+    await nextTick();
+    expect(activeTabId.value).toBe("archived");
+  });
+});
+
+it("wires the URL tab into the table view", () => {
+  const source = readFileSync(
+    resolve(
+      __dirname,
+      "../layers/dms-ui/app/components/table-view/TableView.vue",
+    ),
+    "utf8",
+  );
+  expect(source).toContain("readTableUrlTab(route.query, urlScope)");
+  expect(source).toContain("useTableUrlTab({");
+});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@antelopejs/dms",
-  "version": "0.7.15",
+  "version": "0.7.16",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/AntelopeJS/dms.git"
@@ -37,7 +37,7 @@
     "@antelopejs/interface-data-api": ">=0.2.0 <1.0.0",
     "@antelopejs/interface-database": ">=0.1.8 <1.0.0",
     "@antelopejs/interface-database-decorators": ">=0.1.7 <1.0.0",
-    "@antelopejs/interface-dms": ">=0.5.10 <0.6.0",
+    "@antelopejs/interface-dms": ">=0.5.11 <0.6.0",
     "@antelopejs/interface-email": ">=0.0.5 <1.0.0",
     "@antelopejs/interface-file-storage": ">=0.1.3 <1.0.0",
     "archiver": "^7.0.1",

package/skills/dms-pages/REFERENCE.md

@@ -39,7 +39,12 @@ A page's `headerActions` follow its URL: a target URL takes `{{params.X}}` / `{{
 (`?workspace={{query.workspace}}`, a pair the page has no value for is dropped), and an
 `availability` reads `context.query`, asked again when the query changes — no need to build
 the header in Vue with `usePageHeaderActions` to carry the scope —
-`docs/07.interfaces/3.base/6.layout.md#buttons-that-follow-the-page-url`.
+`docs/07.interfaces/3.base/6.layout.md#buttons-that-follow-the-page-url`. An `availability`
+answering `{ hidden: true }` leaves the button out for that query (`{ reason }` only
+disables it): no Vue header to hide "Add key" on a read-only workspace. `order` on a
+header button and `usePageHeaderActions(render, { order })` interleave served buttons with a
+component's client-side ones (default `0`, served first on a tie: `order: -1` puts a Vue
+"Export" before a served "Add key") — `docs/07.interfaces/3.base/6.layout.md#ordering-the-header`.
 
 A button or row action (`customButtons`, `rowActions.custom`, a page's `headerActions`)
 points at an `ActionTarget`. A `drawer` target opens from the bottom; give it