@antelopejs/dms 0.7.15 → 0.7.17

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.17",
   "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
@@ -50,6 +55,9 @@ target instead: a non-modal panel docked on the right whose header the DMS draws
 `rowTitle` naming the row from its fields, `positionLabel` "x of y", previous / next, J / K, close), `?record=` kept by default (`deepLink: false` opts out), a "not found" state on a 404 (`notFound: { title, description }`) and the table's
 `rowClick: "single"` (a `TableView.fromSource` table reads a deep-linked row beyond its first page through `fetchRowUrl: "/api/x/{id}"`) — never bridge the table's DOM to build one —
 `docs/04.components/06.tables/8.row-drawers.md#side-panel`.
+A button downloading a file the user's session may read (`/api/...`) takes a `download`
+target, `{ url, filename? }`, with the same `{field}` / `{{query.X}}` tokens — never a Vue
+header button or an `api` target for it — `docs/07.interfaces/3.base/2.types.md`.
 
 A row that must stay on top of a table under any sort (a base language, a default
 workspace) takes `pinnedRows: { field: "isBase", equals: true }` — never sort on the