@antelopejs/dms 0.5.5 → 0.6.0

package/frontend-vue/tests/stat-cell-shared.test.ts

@@ -0,0 +1,64 @@
+import { createSSRApp, defineComponent, h, ref, type Component } from "vue";
+import { renderToString } from "vue/server-renderer";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import KpiCard from "../layers/dms-ui/app/components/kpi/KpiCard.vue";
+import StatGroup from "../layers/dms-ui/app/components/stat-group/StatGroup.vue";
+
+vi.mock("../layers/dms-ui/app/composables/chart/useChartFetch", () => ({
+  useChartFetch: () => ({
+    data: ref({ value: 12 }),
+    isLoading: ref(false),
+    error: ref(null),
+    refresh: async () => {},
+  }),
+}));
+
+const Slot = defineComponent({
+  setup:
+    (_, { slots }) =>
+    () =>
+      h("div", slots.default?.()),
+});
+
+// The compact stat card both components draw through DmsStatCell.
+const STAT_CARD = 'class="dms-card flex items-center gap-3.5 px-4 py-3.5';
+const STAT_VALUE =
+  "text-highlighted text-[22px] leading-[1.1] font-[650] tracking-[-0.035em] tabular-nums";
+
+async function render(component: Component, props: Record<string, unknown>) {
+  const app = createSSRApp({ render: () => h(component, props) });
+  for (const name of ["DmsCard", "UIcon", "USkeleton", "UButton"]) {
+    app.component(name, Slot);
+  }
+  return renderToString(app);
+}
+
+beforeEach(() => {
+  vi.stubGlobal("useI18n", () => ({ locale: ref("en-GB"), t: String }));
+  vi.stubGlobal("useTranslation", () => ({ processI18n: String }));
+  vi.stubGlobal("useComponentEvent", () => ({}));
+  vi.stubGlobal("useWatch", () => ({ state: ref({}) }));
+});
+
+afterEach(() => vi.unstubAllGlobals());
+
+describe("the compact stat card", () => {
+  it("is the same cell in a stat KPI card and a StatGroup of cards", async () => {
+    const kpi = await render(KpiCard, {
+      title: "Installed",
+      icon: "i-ph-package",
+      variant: "stat",
+      componentId: "kpi",
+      pageId: "page",
+    });
+    const group = await render(StatGroup, {
+      layout: "cards",
+      items: [{ icon: "i-ph-package", eyebrow: "Installed", value: "12" }],
+    });
+    for (const html of [kpi, group]) {
+      expect(html).toContain(STAT_CARD);
+      expect(html).toContain(STAT_VALUE);
+      expect(html).toContain("Installed");
+    }
+  });
+});

package/frontend-vue/tests/tab-slot-spacing.test.ts

@@ -0,0 +1,21 @@
+import { readFileSync } from "node:fs";
+import { expect, it } from "vitest";
+
+/** The room the page leaves between its blocks. */
+const BLOCK_SPACING = "space-y-6";
+
+const sourceOf = (file: string) =>
+  readFileSync(new URL(`../layers/${file}`, import.meta.url), "utf8");
+
+// A tab holding two blocks stacked them edge to edge, while the page spaces
+// the same two blocks placed outside a tab.
+it("spaces the blocks of a tab the way the page spaces its own", () => {
+  expect(sourceOf("dms-layout/app/pages/[...slug].vue")).toContain(
+    `dms-page-stack ${BLOCK_SPACING}`,
+  );
+  expect(sourceOf("dms-ui/app/components/tab/Tab.vue")).toMatch(
+    new RegExp(
+      `<div class="[^"]*\\b${BLOCK_SPACING}\\b[^"]*"[^>]*>\\s*<slot :name="item.slot" />`,
+    ),
+  );
+});

package/frontend-vue/tests/table-actions-column-width.test.ts

@@ -0,0 +1,85 @@
+import { afterEach, beforeEach, expect, it, vi } from "vitest";
+import { computed, h, ref, watch } from "vue";
+import { useTableColumns } from "../layers/dms-ui/app/build/composables/table/useTableColumns";
+import * as ruleEvaluator from "../layers/dms-core/app/utils/row-action-rule-evaluator";
+import * as colors from "../layers/dms-core/app/types/color";
+
+vi.mock("@nuxt/ui/components/Button.vue", () => ({
+  default: { render: () => null },
+}));
+vi.mock("@nuxt/ui/components/Checkbox.vue", () => ({
+  default: { render: () => null },
+}));
+vi.mock("@nuxt/ui/components/DropdownMenu.vue", () => ({
+  default: { render: () => null },
+}));
+vi.mock("@nuxt/ui/runtime/utils/index.js", () => ({
+  get: (row: Record<string, unknown>, key: string) => row[key],
+}));
+
+type Row = Record<string, unknown>;
+
+// An invitation is pending (Revoke) or expired (Remove), never both: two
+// labelled actions sharing a row only through their rules.
+const PENDING = { field: "status", equals: true };
+const EXPIRED = { field: "status", equals: false };
+
+const rowActions = {
+  add: false,
+  copyLink: false,
+  delete: false,
+  details: false,
+  duplicate: false,
+  edit: false,
+  hasSelection: false,
+  custom: [
+    { label: "Resend", isVisible: true, showLabel: true },
+    { label: "Revoke", isVisible: true, showLabel: true, rule: PENDING },
+    { label: "Remove", isVisible: true, showLabel: true, rule: EXPIRED },
+  ],
+};
+
+beforeEach(() => {
+  for (const [name, value] of Object.entries({ ...ruleEvaluator, ...colors })) {
+    vi.stubGlobal(name, value);
+  }
+  vi.stubGlobal("computed", computed);
+  vi.stubGlobal("ref", ref);
+  vi.stubGlobal("watch", watch);
+  vi.stubGlobal("h", h);
+  vi.stubGlobal("isString", (value: unknown) => typeof value === "string");
+  vi.stubGlobal("useI18n", () => ({ t: (key: string) => key }));
+  vi.stubGlobal("useDmsRouter", () => ({ push: vi.fn() }));
+  vi.stubGlobal("useToast", () => ({ add: vi.fn() }));
+  vi.stubGlobal("useDmsAppConfig", () => ({}));
+  vi.stubGlobal("useTranslation", () => ({
+    processI18n: (key: string) => key,
+  }));
+  vi.stubGlobal("useConfirm", () => ({ confirm: vi.fn() }));
+  vi.stubGlobal("useAuthFetch", () => ({ $authFetch: vi.fn() }));
+  vi.stubGlobal("useDataTypes", () => ({ getDataType: () => undefined }));
+});
+
+afterEach(() => {
+  vi.unstubAllGlobals();
+});
+
+function actionsColumnSize(rows: Row[]): number | undefined {
+  const { columns } = useTableColumns<Row>({
+    data: computed(() => rows),
+    columns: [{ accessorKey: "email", header: "Email" }],
+    rowIdKey: "_id",
+    rowActions,
+    emits: (() => undefined) as never,
+    ui: computed(() => ({}) as never),
+  });
+  return columns.value.find((column) => column.id === "actions")?.size;
+}
+
+it("sizes an empty list's actions as a row with no values, through the rules", () => {
+  const empty = actionsColumnSize([]);
+  const pending = actionsColumnSize([{ _id: "1", status: true }]);
+  // Resend alone shows on a row without a status; a pending row adds Revoke.
+  expect(empty).toBeLessThan(pending!);
+  expect(empty).toBe(actionsColumnSize([{ _id: "1" }]));
+});

package/frontend-vue/tests/table-cell-wrap.test.ts

@@ -1,6 +1,7 @@
 import { readFileSync } from "node:fs";
 import { describe, expect, it } from "vitest";
 import { tv } from "tailwind-variants";
+import { EYEBROW_CLASS } from "../layers/dms-ui/app/build/utils/eyebrow";
 
 const tableSource = readFileSync(
   new URL(
@@ -13,11 +14,15 @@ const themeSource = tableSource.slice(
   tableSource.indexOf("const PANEL_MATCH_BG"),
   tableSource.indexOf("// Grid-like default"),
 );
-const theme = new Function("tv", `${themeSource}; return theme;`)(tv);
+const theme = new Function(
+  "tv",
+  "EYEBROW_CLASS",
+  `${themeSource}; return theme;`,
+)(tv, EYEBROW_CLASS);
 
 describe("Table grid cell layout theme", () => {
   it.each([undefined, false])("preserves the default for %s", (cellWrap) => {
-    expect(theme().rowSpan({ cellWrap })).toBe("line-clamp-1");
+    expect(theme().rowSpan({ cellWrap })).toBe("line-clamp-1 text-ellipsis");
   });
 
   it("removes the clamp and inherited nowrap only for opted-in cells", () => {
@@ -26,7 +31,7 @@ describe("Table grid cell layout theme", () => {
     expect(classes).toContain("whitespace-normal");
     expect(classes).toContain("[overflow-wrap:anywhere]");
     expect(classes).not.toContain("line-clamp-1");
-    expect(theme().rowSpan()).toBe("line-clamp-1");
+    expect(theme().rowSpan()).toBe("line-clamp-1 text-ellipsis");
   });
 
   it("preserves pinned cell and table layout classes", () => {

package/frontend-vue/tests/table-clear-filters.test.ts

@@ -0,0 +1,254 @@
+// @vitest-environment jsdom
+import {
+  computed,
+  createApp,
+  defineComponent,
+  h,
+  nextTick,
+  provide,
+  ref,
+  shallowRef,
+  type App,
+  type Ref,
+} from "vue";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import type { PaginationState } from "@tanstack/vue-table";
+import type { TableFilter } from "../layers/dms-ui/app/build/components/table/Table.vue";
+import {
+  clearTableFilters,
+  clearTableFiltersLabelKey,
+  clearableTableFilters,
+  isTableNarrowed,
+  resetColumnFilters,
+  type TableNarrowingState,
+} from "../layers/dms-ui/app/build/composables/table/utils/clearTableFilters";
+import TableEmpty from "../layers/dms-ui/app/build/components/table/Empty.vue";
+
+const pinnedStatus = (value: unknown): TableFilter => ({
+  accessorKey: "status",
+  mode: "is",
+  value,
+  pinned: true,
+  initialValue: "open",
+});
+const dueDate: TableFilter = {
+  accessorKey: "dueDate",
+  mode: "before",
+  value: "2026-01-01",
+  pinned: false,
+};
+
+interface Harness extends TableNarrowingState {
+  columnFilters: Ref<TableFilter[]>;
+  globalFilter: Ref<string | undefined>;
+  pagination: Ref<PaginationState>;
+}
+
+// What a quick filter writes: the column's own filter.
+const quickPriority = (value: string): TableFilter => ({
+  accessorKey: "priority",
+  mode: "is",
+  value,
+  pinned: false,
+});
+
+const createState = (
+  overrides: Partial<{
+    columnFilters: TableFilter[];
+    globalFilter: string;
+    pageIndex: number;
+  }> = {},
+): Harness => ({
+  columnFilters: ref(overrides.columnFilters ?? []),
+  globalFilter: ref(overrides.globalFilter ?? ""),
+  pagination: ref({ pageIndex: overrides.pageIndex ?? 0, pageSize: 25 }),
+});
+
+describe("clearTableFilters", () => {
+  it("clears the chips, the search and the quick filters, back to page 1", () => {
+    const state = createState({
+      columnFilters: [pinnedStatus("done"), dueDate, quickPriority("high")],
+      globalFilter: "dfgdf",
+      pageIndex: 3,
+    });
+
+    clearTableFilters(state);
+
+    // The default filter goes back to its value, the added chip is dropped.
+    expect(state.columnFilters.value).toEqual([pinnedStatus("open")]);
+    expect(state.globalFilter.value).toBe("");
+    expect(state.pagination.value).toEqual({ pageIndex: 0, pageSize: 25 });
+  });
+
+  it("keeps the page size", () => {
+    const state = createState({ globalFilter: "x", pageIndex: 2 });
+    state.pagination.value = { pageIndex: 2, pageSize: 50 };
+    clearTableFilters(state);
+    expect(state.pagination.value).toEqual({ pageIndex: 0, pageSize: 50 });
+  });
+
+  it("drops the added chips and resets the default ones", () => {
+    expect(resetColumnFilters([dueDate, pinnedStatus("done")])).toEqual([
+      pinnedStatus("open"),
+    ]);
+  });
+
+  it("names what a clear would change", () => {
+    expect(clearableTableFilters(createState())).toEqual({
+      filters: false,
+      search: false,
+    });
+    // A default filter at its own value is nothing to clear.
+    expect(
+      clearableTableFilters(
+        createState({ columnFilters: [pinnedStatus("open")] }),
+      ),
+    ).toEqual({ filters: false, search: false });
+    expect(clearableTableFilters(createState({ globalFilter: "abc" }))).toEqual(
+      { filters: false, search: true },
+    );
+    expect(
+      clearableTableFilters(
+        createState({ columnFilters: [quickPriority("high")] }),
+      ),
+    ).toEqual({ filters: true, search: false });
+    expect(
+      clearableTableFilters(
+        createState({ columnFilters: [dueDate], globalFilter: "abc" }),
+      ),
+    ).toEqual({ filters: true, search: true });
+  });
+
+  it("picks the label of what it clears", () => {
+    expect(clearTableFiltersLabelKey({ filters: true, search: false })).toBe(
+      "dms.table.clear_filters",
+    );
+    expect(clearTableFiltersLabelKey({ filters: false, search: true })).toBe(
+      "dms.table.clear_search",
+    );
+    expect(clearTableFiltersLabelKey({ filters: true, search: true })).toBe(
+      "dms.table.clear_filters_and_search",
+    );
+  });
+
+  it("tells when the rows are narrowed", () => {
+    expect(isTableNarrowed(createState())).toBe(false);
+    // An empty chip narrows nothing.
+    expect(
+      isTableNarrowed(
+        createState({ columnFilters: [{ ...dueDate, value: undefined }] }),
+      ),
+    ).toBe(false);
+    expect(isTableNarrowed(createState({ globalFilter: "a" }))).toBe(true);
+    expect(isTableNarrowed(createState({ columnFilters: [dueDate] }))).toBe(
+      true,
+    );
+    expect(
+      isTableNarrowed(createState({ columnFilters: [quickPriority("low")] })),
+    ).toBe(true);
+  });
+
+  it("ignores a search the active display does not apply", () => {
+    const state = {
+      ...createState({ globalFilter: "a" }),
+      searchApplies: ref(false),
+    };
+    expect(isTableNarrowed(state)).toBe(false);
+    expect(clearableTableFilters(state)).toEqual({
+      filters: false,
+      search: false,
+    });
+  });
+});
+
+describe("table empty state", () => {
+  let app: App | undefined;
+
+  const mountEmpty = (state: Harness) => {
+    const sharedData = shallowRef({
+      resetFilters: () => clearTableFilters(state),
+      clearableFilters: computed(() => clearableTableFilters(state)),
+      isFiltered: computed(() => isTableNarrowed(state)),
+      showArchivedState: ref(false),
+      emits: vi.fn(),
+    });
+    const Host = defineComponent({
+      setup() {
+        provide("tableSharedData", sharedData);
+        return () => h(TableEmpty);
+      },
+    });
+    app = createApp(Host);
+    app.component(
+      "UButton",
+      defineComponent({
+        props: { label: String, onClick: Function },
+        setup: (props) => () =>
+          h("button", { onClick: props.onClick }, props.label),
+      }),
+    );
+    app.component("UIcon", defineComponent({ setup: () => () => h("i") }));
+    const container = document.createElement("div");
+    app.mount(container);
+    return container;
+  };
+
+  beforeEach(() => {
+    vi.stubGlobal("computed", computed);
+    vi.stubGlobal("useTranslation", () => ({
+      processI18n: (text: string) => text,
+    }));
+    vi.stubGlobal("useI18n", () => ({
+      t: (key: string) => key,
+      te: () => false,
+    }));
+  });
+
+  afterEach(() => {
+    app?.unmount();
+    app = undefined;
+    vi.unstubAllGlobals();
+  });
+
+  it("clears the filters and the search from the no-results state", async () => {
+    const state = createState({
+      columnFilters: [dueDate],
+      globalFilter: "dfgdf",
+      pageIndex: 1,
+    });
+    const container = mountEmpty(state);
+
+    expect(container.textContent).toContain("dms.table.no_results_title");
+    const button = container.querySelector("button")!;
+    expect(button.textContent).toBe("dms.table.clear_filters_and_search");
+
+    button.click();
+    await nextTick();
+
+    expect(state.globalFilter.value).toBe("");
+    expect(state.columnFilters.value).toEqual([]);
+    expect(state.pagination.value.pageIndex).toBe(0);
+    // Nothing narrows the rows any more: the plain empty state is back.
+    expect(container.textContent).toContain("dms.table.empty_title");
+    expect(container.querySelector("button")).toBeNull();
+  });
+
+  it("offers to clear a search alone", async () => {
+    const state = createState({ globalFilter: "dfgdf" });
+    const container = mountEmpty(state);
+
+    const button = container.querySelector("button")!;
+    expect(button.textContent).toBe("dms.table.clear_search");
+    button.click();
+    await nextTick();
+    expect(state.globalFilter.value).toBe("");
+  });
+
+  it("offers no clear action when only default filters narrow the rows", () => {
+    const container = mountEmpty(
+      createState({ columnFilters: [pinnedStatus("open")] }),
+    );
+    expect(container.textContent).toContain("dms.table.no_results_title");
+    expect(container.querySelector("button")).toBeNull();
+  });
+});

package/frontend-vue/tests/table-density-menu.test.ts

@@ -0,0 +1,128 @@
+// @vitest-environment jsdom
+import {
+  computed,
+  createApp,
+  defineComponent,
+  h,
+  nextTick,
+  provide,
+  ref,
+  shallowRef,
+  type App,
+} from "vue";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import { readFileSync } from "node:fs";
+import { resolve } from "node:path";
+import TableMenuDensity from "../layers/dms-ui/app/build/components/table/MenuDensity.vue";
+import TableMenuRoot from "../layers/dms-ui/app/build/components/table/MenuRoot.vue";
+
+const tableViewSource = readFileSync(
+  resolve(
+    __dirname,
+    "../layers/dms-ui/app/components/table-view/TableView.vue",
+  ),
+  "utf8",
+);
+
+describe("table density menu", () => {
+  let app: App | undefined;
+
+  const mount = (
+    component: ReturnType<typeof defineComponent>,
+    sharedData: Record<string, unknown>,
+  ) => {
+    const Host = defineComponent({
+      setup() {
+        provide("tableSharedData", shallowRef(sharedData));
+        return () => h(component);
+      },
+    });
+    app = createApp(Host);
+    app.component(
+      "Icon",
+      defineComponent({
+        props: { name: String },
+        setup: (props) => () => h("i", { "data-icon": props.name }),
+      }),
+    );
+    app.component(
+      "UChip",
+      defineComponent({
+        setup:
+          (_, { slots }) =>
+          () =>
+            slots.default?.(),
+      }),
+    );
+    app.component("UKbd", defineComponent({ setup: () => () => h("kbd") }));
+    const container = document.createElement("div");
+    app.mount(container);
+    return container;
+  };
+
+  beforeEach(() => {
+    vi.stubGlobal("computed", computed);
+    vi.stubGlobal("useI18n", () => ({ t: (key: string) => key }));
+    vi.stubGlobal("useDmsAppConfig", () => ({
+      ui: { icons: { check: "i-check", chevronRight: "i-chevron" } },
+    }));
+    vi.stubGlobal("useToast", () => ({ add: vi.fn() }));
+  });
+
+  afterEach(() => {
+    app?.unmount();
+    app = undefined;
+    vi.unstubAllGlobals();
+  });
+
+  it("switches the table to compact rows and marks the active density", async () => {
+    const densityState = ref<"default" | "compact">("default");
+    const container = mount(TableMenuDensity, { densityState });
+
+    const items = container.querySelectorAll("li");
+    expect([...items].map((item) => item.textContent?.trim())).toEqual([
+      "dms.table.density_default",
+      "dms.table.density_compact",
+    ]);
+    expect(items[0]!.querySelector('[data-icon="i-check"]')).not.toBeNull();
+
+    (items[1] as HTMLElement).click();
+    await nextTick();
+
+    expect(densityState.value).toBe("compact");
+    expect(
+      container
+        .querySelectorAll("li")[1]!
+        .querySelector('[data-icon="i-check"]'),
+    ).not.toBeNull();
+  });
+
+  it("offers the Density entry on the grid only", () => {
+    const sharedData = (columnManagement: boolean) => ({
+      activeCapabilities: computed(() => ({ columnManagement })),
+      hasDisplaySwitcher: false,
+      customNavItems: [],
+      hasCustomColumns: computed(() => false),
+    });
+    const labels = (container: HTMLElement) =>
+      [...container.querySelectorAll("li")].map((li) => li.textContent?.trim());
+
+    expect(labels(mount(TableMenuRoot, sharedData(true)))).toContain(
+      "dms.table.density_title",
+    );
+    app?.unmount();
+    expect(labels(mount(TableMenuRoot, sharedData(false)))).not.toContain(
+      "dms.table.density_title",
+    );
+  });
+
+  it("keeps the user's density with the table state, the module's as default", () => {
+    expect(tableViewSource).toMatch(
+      /getTablePreferenceKey\("density"\),\s*props\.density \?\? DEFAULT_DENSITY/,
+    );
+    expect(tableViewSource).toMatch(
+      /groupedGroupBy,\s*density,\s*\} as const;/,
+    );
+    expect(tableViewSource).toContain('v-model:density="density"');
+  });
+});

package/frontend-vue/tests/table-header-placement.test.ts

@@ -0,0 +1,21 @@
+import { readFileSync } from "node:fs";
+import { resolve } from "node:path";
+import { describe, expect, it } from "vitest";
+
+const tableSource = readFileSync(
+  resolve(__dirname, "../layers/dms-ui/app/build/components/table/Table.vue"),
+  "utf8",
+);
+
+describe("Table buttons placed in the page header", () => {
+  it("leaves them out of the toolbar", () => {
+    expect(tableSource).toMatch(
+      /\(props\.customButtons \?\? \[\]\)\.filter\(\s*\(button\) => button\.placement !== HEADER_PLACEMENT,\s*\)/,
+    );
+    expect(tableSource).toMatch(
+      /add\.isEnabled && add\.placement !== HEADER_PLACEMENT/,
+    );
+    expect(tableSource).toContain(':can-add-row="canAddFromToolbar"');
+    expect(tableSource).not.toContain("button.hidden");
+  });
+});