@antelopejs/dms 0.4.5 → 0.4.7

package/frontend-vue/tests/table-view-escape-shortcut.test.ts

@@ -0,0 +1,141 @@
+// @vitest-environment jsdom
+import { afterEach, beforeEach, describe, expect, it } from "vitest";
+import {
+  computed,
+  createApp,
+  defineComponent,
+  nextTick,
+  ref,
+  shallowRef,
+  type App,
+  type Ref,
+  type ShallowRef,
+} from "vue";
+import { useActiveElement } from "@vueuse/core";
+import type { RowSelectionState } from "@tanstack/vue-table";
+import { defineShortcuts } from "@nuxt/ui/runtime/composables/defineShortcuts.js";
+import {
+  TABLE_VIEW_SHORTCUTS_METADATA,
+  buildTableViewShortcuts,
+} from "../layers/dms-ui/app/composables/table-view/shortcuts";
+
+let app: App;
+let host: HTMLDivElement;
+let globalFilter: ShallowRef<string | undefined>;
+let rowSelect: Ref<RowSelectionState>;
+
+function mountTableShortcuts() {
+  const Harness = defineComponent({
+    setup() {
+      defineShortcuts(
+        buildTableViewShortcuts({
+          refresh: () => {},
+          tableProps: computed(() => ({})),
+          newRow: () => {},
+          globalFilter,
+          rowSelect,
+          data: ref(null),
+          activeElement: useActiveElement(),
+        }),
+      );
+      return () => null;
+    },
+  });
+  app = createApp(Harness);
+  app.mount(host);
+}
+
+function pressEscape(target: EventTarget = document.body): KeyboardEvent {
+  const event = new KeyboardEvent("keydown", {
+    key: "Escape",
+    code: "Escape",
+    bubbles: true,
+    cancelable: true,
+  });
+  target.dispatchEvent(event);
+  return event;
+}
+
+beforeEach(() => {
+  host = document.createElement("div");
+  document.body.appendChild(host);
+  globalFilter = shallowRef<string | undefined>(undefined);
+  rowSelect = ref<RowSelectionState>({});
+});
+
+afterEach(() => {
+  app.unmount();
+  document.body.innerHTML = "";
+});
+
+describe("TableView Escape shortcut", () => {
+  it("leaves Escape to overlays when there is nothing to clear", async () => {
+    mountTableShortcuts();
+    await nextTick();
+
+    expect(pressEscape().defaultPrevented).toBe(false);
+  });
+
+  it("closes the search when a global filter is set", async () => {
+    globalFilter.value = "acme";
+    mountTableShortcuts();
+    await nextTick();
+
+    expect(pressEscape().defaultPrevented).toBe(true);
+    expect(globalFilter.value).toBeUndefined();
+  });
+
+  it("clears the row selection when no search is open", async () => {
+    rowSelect.value = { a: true, b: true };
+    mountTableShortcuts();
+    await nextTick();
+
+    expect(pressEscape().defaultPrevented).toBe(true);
+    expect(rowSelect.value).toEqual({});
+  });
+
+  it("closes the search before touching the selection", async () => {
+    globalFilter.value = "";
+    rowSelect.value = { a: true };
+    mountTableShortcuts();
+    await nextTick();
+
+    pressEscape();
+    expect(globalFilter.value).toBeUndefined();
+    expect(rowSelect.value).toEqual({ a: true });
+  });
+
+  it("stops handling Escape once the filter is cleared", async () => {
+    globalFilter.value = "acme";
+    mountTableShortcuts();
+    await nextTick();
+
+    pressEscape();
+    await nextTick();
+    expect(pressEscape().defaultPrevented).toBe(false);
+  });
+
+  it("lets an open dialog take Escape even with a filter set", async () => {
+    globalFilter.value = "acme";
+    mountTableShortcuts();
+    const dialog = document.createElement("div");
+    dialog.setAttribute("role", "dialog");
+    const button = document.createElement("button");
+    dialog.appendChild(button);
+    document.body.appendChild(dialog);
+    button.focus();
+    await nextTick();
+
+    expect(pressEscape(button).defaultPrevented).toBe(false);
+    expect(globalFilter.value).toBe("acme");
+  });
+
+  it("describes when the shortcut applies in the help list", () => {
+    const escape = TABLE_VIEW_SHORTCUTS_METADATA.find((metadata) =>
+      metadata.key.includes("$keyboard.escape"),
+    );
+    expect(escape?.condition?.descriptionKey).toBe(
+      "$dms.shortcuts.tableview.escape.condition",
+    );
+  });
+});

package/frontend-vue/tests/tree-escape-shortcut.test.ts

@@ -0,0 +1,138 @@
+// @vitest-environment jsdom
+import { afterEach, beforeEach, describe, expect, it } from "vitest";
+import {
+  computed,
+  createApp,
+  defineComponent,
+  nextTick,
+  ref,
+  type App,
+  type Ref,
+} from "vue";
+import { useActiveElement } from "@vueuse/core";
+import { defineShortcuts } from "@nuxt/ui/runtime/composables/defineShortcuts.js";
+import {
+  TREE_SHORTCUTS_METADATA,
+  buildTreeShortcuts,
+} from "../layers/dms-ui/app/composables/tree/shortcuts";
+import type {
+  TreeNode,
+  TreeProps,
+} from "../layers/dms-ui/app/composables/tree/types";
+
+let app: App;
+let host: HTMLDivElement;
+let selected: Ref<TreeNode | TreeNode[] | undefined>;
+
+const nodeA = { label: "A", value: "a" } as TreeNode;
+const nodeB = { label: "B", value: "b" } as TreeNode;
+
+function mountTreeShortcuts(multiple = false) {
+  const Harness = defineComponent({
+    setup() {
+      defineShortcuts(
+        buildTreeShortcuts({
+          navigateTree: () => {},
+          props: { multiple } as TreeProps,
+          items: computed(() => [nodeA, nodeB]),
+          selected,
+          activeElement: useActiveElement(),
+        }),
+      );
+      return () => null;
+    },
+  });
+  app = createApp(Harness);
+  app.mount(host);
+}
+
+function pressEscape(target: EventTarget = document.body): KeyboardEvent {
+  const event = new KeyboardEvent("keydown", {
+    key: "Escape",
+    code: "Escape",
+    bubbles: true,
+    cancelable: true,
+  });
+  target.dispatchEvent(event);
+  return event;
+}
+
+beforeEach(() => {
+  host = document.createElement("div");
+  document.body.appendChild(host);
+  selected = ref<TreeNode | TreeNode[] | undefined>(undefined);
+});
+
+afterEach(() => {
+  app.unmount();
+  document.body.innerHTML = "";
+});
+
+describe("Tree Escape shortcut", () => {
+  it("leaves Escape to overlays when nothing is selected", async () => {
+    mountTreeShortcuts();
+    await nextTick();
+
+    expect(pressEscape().defaultPrevented).toBe(false);
+  });
+
+  it("leaves Escape to overlays when a multiple selection is empty", async () => {
+    selected.value = [];
+    mountTreeShortcuts(true);
+    await nextTick();
+
+    expect(pressEscape().defaultPrevented).toBe(false);
+  });
+
+  it("deselects the node in single selection mode", async () => {
+    selected.value = nodeA;
+    mountTreeShortcuts();
+    await nextTick();
+
+    expect(pressEscape().defaultPrevented).toBe(true);
+    expect(selected.value).toBeUndefined();
+  });
+
+  it("clears every node in multiple selection mode", async () => {
+    selected.value = [nodeA, nodeB];
+    mountTreeShortcuts(true);
+    await nextTick();
+
+    expect(pressEscape().defaultPrevented).toBe(true);
+    expect(selected.value).toEqual([]);
+  });
+
+  it("stops handling Escape once the selection is cleared", async () => {
+    selected.value = [nodeA];
+    mountTreeShortcuts(true);
+    await nextTick();
+
+    pressEscape();
+    await nextTick();
+    expect(pressEscape().defaultPrevented).toBe(false);
+  });
+
+  it("lets an open dialog take Escape even with a selection", async () => {
+    selected.value = nodeA;
+    mountTreeShortcuts();
+    const dialog = document.createElement("div");
+    dialog.setAttribute("role", "dialog");
+    const button = document.createElement("button");
+    dialog.appendChild(button);
+    document.body.appendChild(dialog);
+    button.focus();
+    await nextTick();
+
+    expect(pressEscape(button).defaultPrevented).toBe(false);
+    expect(selected.value).toStrictEqual(nodeA);
+  });
+
+  it("describes when the shortcut applies in the help list", () => {
+    const escape = TREE_SHORTCUTS_METADATA.find((metadata) =>
+      metadata.key.includes("$keyboard.escape"),
+    );
+    expect(escape?.condition?.descriptionKey).toBe(
+      "$dms.shortcuts.tree.escape.condition",
+    );
+  });
+});

package/frontend-vue/tests/vue-inventory.test.ts

@@ -2,7 +2,7 @@ import { readFileSync, readdirSync, statSync } from "node:fs";
 import { join, relative } from "node:path";
 import { describe, expect, it } from "vitest";
 
-const EXPECTED_VUE_FILES = 143;
+const EXPECTED_VUE_FILES = 144;
 
 function walk(directory: string): string[] {
   return readdirSync(directory).flatMap((name) => {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@antelopejs/dms",
-  "version": "0.4.5",
+  "version": "0.4.7",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/AntelopeJS/dms.git"
@@ -36,7 +36,7 @@
     "@antelopejs/interface-data-api": ">=0.1.9 <1.0.0",
     "@antelopejs/interface-database": ">=0.1.7 <1.0.0",
     "@antelopejs/interface-database-decorators": ">=0.1.6 <1.0.0",
-    "@antelopejs/interface-dms": ">=0.2.0 <1.0.0",
+    "@antelopejs/interface-dms": ">=0.2.6 <1.0.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/REFERENCE.md

@@ -21,7 +21,7 @@ List a section to see its files:
 
 Everything the DMS exposes to a consumer ships in **one** package, `@antelopejs/interface-dms`,
 split into subpaths: `/page`, `/component`, `/permissions`, `/guards`, `/db`, `/hooks`, `/realtime`,
-`/quick-actions`, `/auth` (+ `/auth/db`), `/base` (+ `/base/form`, `/base/table-view`,
+`/quick-actions`, `/layout-banners`, `/auth` (+ `/auth/db`), `/base` (+ `/base/form`, `/base/table-view`,
 `/base/data-types`, `/base/types`, …), `/notifications`, `/html-render`. There is no separate
 `dms-auth` or `dms-base` interface, and nothing is imported through the runtime package
 `@antelopejs/dms`. Other modules follow the same shape: one `interface-<name>` package per module.