@antelopejs/dms 0.11.1 → 0.12.1

package/frontend-vue/layers/dms-ui/app/build/components/table/tableComponentPinning.ts

@@ -0,0 +1,92 @@
+import { computed, type Ref } from "vue";
+import type { Table, Column, Header } from "@tanstack/vue-table";
+
+export function useTableComponentPinning<T>(
+  getTable: () => Table<T>,
+  tableViewportWidth: Ref<number>,
+  hasPresenceRail: Ref<boolean>,
+) {
+  const PRESENCE_RAIL_WIDTH = 2;
+  const PINNED_MAX_VIEWPORT_SHARE = 0.6;
+  const stickyPinnedSides = computed(() => {
+    const budget = tableViewportWidth.value * PINNED_MAX_VIEWPORT_SHARE;
+    const left = getTable().getLeftTotalSize();
+    const right = getTable().getRightTotalSize();
+    if (!budget || left + right <= budget) return { left: true, right: true };
+    const keepLeft = left < right && left <= budget;
+    const keepRight = left >= right && right <= budget;
+    return { left: keepLeft, right: keepRight };
+  });
+
+  const scrollFadeInsets = computed(() => {
+    const sides = stickyPinnedSides.value;
+    return {
+      start:
+        (sides.left ? getTable().getLeftTotalSize() : 0) +
+        (hasPresenceRail.value ? PRESENCE_RAIL_WIDTH : 0),
+      end: sides.right ? getTable().getRightTotalSize() : 0,
+    };
+  });
+
+  const getStickyPin = (column: Pick<Column<T>, "getIsPinned">) => {
+    const pinned = column.getIsPinned();
+    if (pinned === "left" && stickyPinnedSides.value.left) return "left";
+    if (pinned === "right" && stickyPinnedSides.value.right) return "right";
+    return undefined;
+  };
+
+  const getPinnedLeftOffset = (
+    column: Pick<Column<T>, "getIsPinned" | "getStart">,
+  ) => {
+    if (getStickyPin(column) !== "left") return undefined;
+    const base = column.getStart("left");
+    const rail = hasPresenceRail.value ? PRESENCE_RAIL_WIDTH : 0;
+    return `${base + rail}px`;
+  };
+
+  const getPinnedRightOffset = (
+    column: Pick<Column<T>, "getIsPinned" | "getAfter">,
+  ) => {
+    if (getStickyPin(column) !== "right") return undefined;
+    return `${column.getAfter("right")}px`;
+  };
+
+  const getPinnedVariant = getStickyPin;
+
+  const MIN_SCROLLING_COLUMN_WIDTH = 120;
+  const scrollingColumnMaxWidth = computed(() => {
+    const viewport = tableViewportWidth.value;
+    if (!viewport) return Infinity;
+    const sides = stickyPinnedSides.value;
+    const sticky =
+      (sides.left ? getTable().getLeftTotalSize() : 0) +
+      (sides.right ? getTable().getRightTotalSize() : 0) +
+      (hasPresenceRail.value ? PRESENCE_RAIL_WIDTH : 0);
+    return Math.max(viewport - sticky, MIN_SCROLLING_COLUMN_WIDTH);
+  });
+
+  const getHeaderWidth = (header: Header<T, unknown>): string => {
+    const size = header.getSize();
+    if (getStickyPin(header.column)) return `${size}px`;
+    return `${Math.min(size, scrollingColumnMaxWidth.value)}px`;
+  };
+
+  const headerAriaSort = (
+    column: Header<T, unknown>["column"],
+  ): "ascending" | "descending" | "none" | undefined => {
+    if (!column.getCanSort()) return undefined;
+    const sorted = column.getIsSorted();
+    if (sorted === "asc") return "ascending";
+    if (sorted === "desc") return "descending";
+    return "none";
+  };
+
+  return {
+    scrollFadeInsets,
+    getPinnedLeftOffset,
+    getPinnedRightOffset,
+    getPinnedVariant,
+    getHeaderWidth,
+    headerAriaSort,
+  };
+}

package/frontend-vue/layers/dms-ui/app/build/components/table/tableComponentPreferences.ts

@@ -0,0 +1,85 @@
+import { computed, watch, type Ref } from "vue";
+import type {
+  ColumnPinningState,
+  SortingState,
+  VisibilityState,
+} from "@tanstack/vue-table";
+import type { Data, TableProps } from "./Table.types";
+import { defaultSortingState } from "../../composables/table-view/utils/sortableColumns";
+import { mergeColumnOrder } from "../../composables/table/utils/columnOrder";
+
+interface PreferenceState {
+  columnOrderState: Ref<string[]>;
+  columnPinningState: Ref<ColumnPinningState>;
+  columnVisibilityState: Ref<VisibilityState>;
+  sortingState: Ref<SortingState>;
+  isUsingDefaultSort: Ref<boolean>;
+}
+export function useTableComponentPreferences<T extends Data>(
+  props: TableProps<T>,
+  states: PreferenceState,
+  declaredColumnOrder: string[],
+) {
+  const {
+    columnOrderState,
+    columnPinningState,
+    columnVisibilityState,
+    sortingState,
+    isUsingDefaultSort,
+  } = states;
+  watch(columnOrderState, (order) => {
+    const merged = mergeColumnOrder(order, declaredColumnOrder);
+    if (!isSameColumnList(merged, order)) columnOrderState.value = merged;
+  });
+  const baselineColumnOrder = declaredColumnOrder;
+
+  function isSameColumnList(a: readonly unknown[], b: readonly unknown[]) {
+    return a.length === b.length && a.every((item, index) => item === b[index]);
+  }
+  const baselineColumnPinning: ColumnPinningState = JSON.parse(
+    JSON.stringify(columnPinningState.value),
+  );
+
+  const hasCustomSort = computed(() => {
+    const sorting = sortingState.value;
+    if (!props.defaultSort) return sorting.length > 0;
+    if (sorting.length === 0) return true;
+    return !isUsingDefaultSort.value;
+  });
+
+  const resetSorting = () => {
+    sortingState.value = defaultSortingState(props.defaultSort);
+  };
+
+  const arePinningEqual = (
+    a: ColumnPinningState,
+    b: ColumnPinningState,
+  ): boolean => {
+    return (
+      isSameColumnList(a.left ?? [], b.left ?? []) &&
+      isSameColumnList(a.right ?? [], b.right ?? [])
+    );
+  };
+
+  const hasCustomColumns = computed(() => {
+    if (!isSameColumnList(columnOrderState.value, baselineColumnOrder))
+      return true;
+    if (!arePinningEqual(columnPinningState.value, baselineColumnPinning))
+      return true;
+
+    if (props.initialColumnVisibility) {
+      const current = columnVisibilityState.value;
+      const baseline = props.initialColumnVisibility;
+      const keys = new Set([...Object.keys(current), ...Object.keys(baseline)]);
+      for (const key of keys) {
+        const a = current[key] ?? true;
+        const b = baseline[key] ?? true;
+        if (a !== b) return true;
+      }
+    }
+
+    return false;
+  });
+
+  return { hasCustomSort, resetSorting, hasCustomColumns };
+}

package/frontend-vue/layers/dms-ui/app/build/components/table/tableComponentRows.ts

@@ -0,0 +1,93 @@
+import { isString } from "#dms-core/app/utils/type-check";
+import {
+  resolveRowClickAction,
+  type RowClickAction,
+} from "../../../utils/rowClickAction";
+import { ref } from "vue";
+import { get } from "@nuxt/ui/runtime/utils/index.js";
+import { isRowClickTrigger } from "../../utils/rowClickTrigger";
+
+import type {
+  Data,
+  TableProps,
+  TableEmits,
+  TableRowPresenceActor,
+} from "./Table.types";
+import { PANEL_MATCH_BG, ROW_HOVER_CELL_BG } from "./tableComponentTheme";
+
+export function useTableComponentRows<T extends Data>(
+  props: TableProps<T>,
+  emits: TableEmits<T>,
+  t: ReturnType<typeof useI18n>["t"],
+) {
+  const PRESENCE_RAIL_ACTIVE_BG = "bg-secondary";
+  const DEFAULT_ROW_ID_KEY = "_id";
+  const rowIdKey = props.rowIdKey ?? DEFAULT_ROW_ID_KEY;
+  const hoveredRowId = ref<string | null>(null);
+
+  const handleRowHover = (row: { original: T; id: string }) => {
+    hoveredRowId.value = get(row.original, rowIdKey);
+  };
+
+  const handleRowLeave = () => {
+    hoveredRowId.value = null;
+  };
+
+  const getRowPresence = (row: T): TableRowPresenceActor[] | undefined => {
+    if (!props.presenceByRow) return undefined;
+    const id: string | undefined = get(row, rowIdKey);
+    if (!id) return undefined;
+    const actors = props.presenceByRow[id];
+    return actors && actors.length > 0 ? actors : undefined;
+  };
+
+  const presenceTooltipText = (actors: TableRowPresenceActor[]): string =>
+    t("dms.realtime.row_edited_by", {
+      names: actors.map((a) => a.displayName || a.id).join(", "),
+    });
+
+  const rowClickAction = (row: T): RowClickAction | undefined =>
+    resolveRowClickAction(props.rowActions, row);
+
+  const isRowClickable = (row: T): boolean => rowClickAction(row) !== undefined;
+
+  const runRowClickAction = (row: T) => {
+    const action = rowClickAction(row);
+    if (!action) return;
+    if (isString(action)) {
+      emits(action, row);
+      return;
+    }
+    props.onCustomRowAction?.(action, row);
+  };
+
+  const handleRowPointer = (event: MouseEvent, row: T) => {
+    if (!isRowClickTrigger(props.rowClick, event)) return;
+    runRowClickAction(row);
+  };
+
+  const isOpenRow = (row: T): boolean =>
+    props.openRowId !== undefined &&
+    String(get(row, rowIdKey)) === props.openRowId;
+
+  const isSingleClickRow = (row: T): boolean =>
+    props.rowClick === "single" && isRowClickable(row);
+
+  const presenceRailBackground = (row: T): string => {
+    if (getRowPresence(row)) return PRESENCE_RAIL_ACTIVE_BG;
+    if (props.loading || !isRowClickable(row)) return PANEL_MATCH_BG;
+    return `${PANEL_MATCH_BG} ${ROW_HOVER_CELL_BG}`;
+  };
+  return {
+    hoveredRowId,
+    handleRowHover,
+    handleRowLeave,
+    getRowPresence,
+    presenceTooltipText,
+    isRowClickable,
+    handleRowPointer,
+    isOpenRow,
+    isSingleClickRow,
+    presenceRailBackground,
+  };
+}

package/frontend-vue/layers/dms-ui/app/build/components/table/tableComponentScroll.ts

@@ -0,0 +1,68 @@
+import { computed, ref, useTemplateRef, watch } from "vue";
+import { useElementSize } from "@vueuse/core";
+import {
+  horizontalScrollEdges,
+  type ScrollEdges,
+} from "../../composables/table/utils/scrollEdges";
+import type { Data, TableProps } from "./Table.types";
+
+export function useTableComponentScroll<T extends Data>(props: TableProps<T>) {
+  const hasScrollArea = computed(() => !!props.maxHeight);
+  const isScrolled = ref(false);
+
+  const scrollEdges = ref<ScrollEdges>({ start: false, end: false });
+  const syncScrollEdges = () => {
+    const area = tableRootRef.value;
+    if (area) scrollEdges.value = horizontalScrollEdges(area);
+  };
+  const onTableScroll = (event: Event) => {
+    syncScrollEdges();
+    if (!hasScrollArea.value) return;
+    // SAFETY: This scroll listener is attached directly to the table's scrolling section.
+    isScrolled.value = (event.target as HTMLElement).scrollTop > 0;
+  };
+
+  const tableRootRef = useTemplateRef<HTMLElement>("tableRoot");
+  const { width: tableViewportWidth } = useElementSize(tableRootRef);
+  const tableBaseRef = useTemplateRef<HTMLElement>("tableBase");
+  const { width: tableContentWidth } = useElementSize(tableBaseRef);
+  watch([tableViewportWidth, tableContentWidth], syncScrollEdges);
+
+  const tableHeadRef = useTemplateRef<HTMLElement>("tableHead");
+  const { height: tableHeadHeight } = useElementSize(tableHeadRef, undefined, {
+    box: "border-box",
+  });
+  const rootStyle = computed(() => ({
+    "--dms-table-head-height":
+      tableHeadHeight.value > 0 ? `${tableHeadHeight.value}px` : undefined,
+  }));
+  const tableRootStyle = computed(() => ({
+    maxHeight: props.maxHeight,
+    "--dms-table-viewport":
+      tableViewportWidth.value > 0
+        ? `${tableViewportWidth.value}px`
+        : undefined,
+  }));
+
+  const syncClippedTitle = (event: MouseEvent) => {
+    // SAFETY: The mouseenter bindings attach this listener to the caption span and cell divs.
+    const cell = event.currentTarget as HTMLElement;
+    if (cell.scrollWidth > cell.clientWidth) {
+      cell.title = cell.textContent?.trim() ?? "";
+    } else {
+      cell.removeAttribute("title");
+    }
+  };
+
+  return {
+    hasScrollArea,
+    isScrolled,
+    scrollEdges,
+    onTableScroll,
+    tableRootRef,
+    tableViewportWidth,
+    rootStyle,
+    tableRootStyle,
+    syncClippedTitle,
+  };
+}

package/frontend-vue/layers/dms-ui/app/build/components/table/tableComponentTheme.ts

@@ -0,0 +1,241 @@
+import { REORDER_HANDLE_CLASS } from "../../composables/table-view/useReorderHandles";
+import { tv } from "tailwind-variants";
+import { EYEBROW_CLASS } from "../../utils/eyebrow";
+
+const PANEL_MATCH_BG = "bg-(--dms-surface-card)";
+
+const HEADER_PLACEMENT = "header";
+
+const HEADER_MATCH_BG = "bg-(--dms-bg-muted)";
+
+const ROW_HOVER_BG = "hover:bg-elevated";
+const ROW_HOVER_CELL_BG = "group-hover:bg-elevated";
+
+const ROW_SELECTED_BG = "data-[selected=true]:bg-primary/10";
+const ROW_SELECTED_CELL_BG =
+  "group-data-[selected=true]:bg-[color-mix(in_srgb,var(--ui-primary)_10%,var(--dms-surface-card))]";
+
+const ROW_OPEN_BG =
+  "data-[open=true]:bg-primary/10 data-[open=true]:[&>td:first-child]:shadow-[inset_2px_0_0_0_var(--ui-primary)]";
+const ROW_OPEN_CELL_BG =
+  "group-data-[open=true]:bg-[color-mix(in_srgb,var(--ui-primary)_10%,var(--dms-surface-card))]";
+
+const ROW_EXPANDED_BG = "data-[expanded=true]:bg-elevated";
+const ROW_EXPANDED_CELL_BG = "group-data-[expanded=true]:bg-elevated";
+
+const HEADER_SCROLL_SHADOW =
+  "shadow-[0_8px_10px_-8px_color-mix(in_srgb,var(--ui-border-accented)_90%,transparent)]";
+
+const FIRST_HEAD_CELL_GUTTER = "first:ps-[18px] [th:empty:first-child+&]:ps-4";
+const FIRST_ROW_CELL_GUTTER = "first:ps-[18px] [td:empty:first-child+&]:ps-4";
+
+const theme = tv({
+  slots: {
+    root: "dms-card flow-root overflow-hidden",
+    header:
+      "flex flex-wrap items-center gap-x-3 gap-y-2.5 py-3 ps-[18px] pe-3.5",
+    caption:
+      "me-auto flex min-w-0 items-center gap-2.5 text-[15px] leading-[1.2] font-[650] tracking-[-0.015em] text-highlighted",
+    captionLabel: "truncate",
+    captionCount: "font-mono text-xs font-medium tabular-nums text-dimmed",
+    captionCountPlaceholder: "h-3 w-6 rounded-[4px]",
+
+    scrollFrame: "relative",
+
+    scrollFade: "pointer-events-none absolute inset-y-0 z-30 w-3",
+    tableRoot: "relative overflow-x-auto whitespace-nowrap",
+    tableBase: "inline-block min-w-full align-middle",
+    table: "text-default w-full min-w-full table-fixed text-left text-[13px]/5",
+    tableCaption: "sr-only",
+
+    loadingBar:
+      "pointer-events-none absolute inset-x-0 top-9 z-40 h-0.5 overflow-hidden",
+    loadingBarIndicator:
+      "absolute inset-y-0 start-0 w-1/2 rounded-full bg-(--dms-accent-fill) animate-[carousel_1.3s_ease-in-out_infinite]",
+    skeletonRow: "pointer-events-none",
+    skeletonCell: "block h-2.5 rounded-md",
+
+    archiveStrip:
+      "flex flex-wrap items-center gap-x-2.5 gap-y-1.5 border-b border-(--dms-warning-line) bg-(--dms-warning-tint) py-[9px] ps-[18px] pe-3.5 text-[13px] text-highlighted",
+    archiveStripIcon: "size-[17px] shrink-0 text-warning",
+    archiveStripText: "min-w-0",
+    archiveStripTitle: "font-semibold",
+    archiveStripDescription: "text-[12.5px] text-muted",
+    archiveStripAction: "ms-auto",
+
+    expandedCell:
+      "border-b border-default bg-(--dms-bg-muted) p-0 whitespace-normal in-[tr:last-child]:border-b-0",
+
+    expandedBody:
+      "sticky start-0 w-[var(--dms-table-viewport,auto)] pt-4 pb-[18px] pe-[18px] ps-[18px] sm:ps-[68px]",
+
+    emptyBody: "sticky start-0 w-[var(--dms-table-viewport,auto)]",
+
+    headCell: `${HEADER_MATCH_BG} ${FIRST_HEAD_CELL_GUTTER} border-b-default text-dimmed group relative touch-none select-none overflow-hidden border-b h-9 px-3.5 py-0 ${EYEBROW_CLASS} last:pe-2.5`,
+    headCellInternal: "flex w-full items-center justify-between gap-1",
+    colOptionsTrigger: "opacity-0 transition-opacity group-hover:opacity-100",
+    colResizer:
+      "bg-primary/40 absolute right-0 top-0 z-10 h-full w-1 cursor-col-resize touch-none select-none opacity-0 hover:opacity-100",
+
+    row: `group ${ROW_SELECTED_BG} ${ROW_EXPANDED_BG} ${ROW_OPEN_BG}`,
+    rowCell: `${FIRST_ROW_CELL_GUTTER} border-b-muted border-b h-11 px-3.5 py-0 text-[13px] last:pe-2.5 in-[tr:last-child]:border-b-0 group-data-[expanded=true]:border-b-transparent`,
+    rowInternal: "transition-opacity duration-150",
+    rowContainer: "relative",
+    rowSpan: "line-clamp-1 text-ellipsis",
+
+    rowSelection:
+      "opacity-40 transition-opacity group-hover:opacity-100 focus-visible:opacity-100",
+    rowAction:
+      "flex items-center justify-end gap-1 opacity-40 transition-opacity group-hover:opacity-100 group-data-[selected=true]:opacity-100 focus-within:opacity-100 has-[[data-state=open]]:opacity-100",
+
+    columnActiveSortIcon: "size-3 shrink-0 text-primary",
+
+    groupCell: `${HEADER_MATCH_BG} border-b border-default p-0`,
+    groupHeader:
+      "sticky start-0 flex h-9 w-[var(--dms-table-viewport,auto)] items-center gap-2 ps-[18px] pe-3.5 text-[12.5px] text-muted",
+    groupToggle:
+      "inline-flex min-w-0 items-center gap-2 hover:text-highlighted",
+    groupCount:
+      "rounded-[4px] bg-elevated px-[5px] py-px font-mono text-[10.5px] font-semibold tabular-nums text-dimmed",
+
+    handleHeadCell: `${HEADER_MATCH_BG} border-b-default w-8 border-b p-0`,
+    handleCell:
+      "border-b-muted w-8 border-b ps-2 pe-0 in-[tr:last-child]:border-b-0",
+    handle: REORDER_HANDLE_CLASS,
+  },
+  variants: {
+    cellWrap: {
+      true: {
+        rowCell: "py-2.5",
+        rowSpan: "line-clamp-none whitespace-normal [overflow-wrap:anywhere]",
+      },
+    },
+
+    headerDivided: {
+      true: {
+        header: "border-b border-default",
+      },
+    },
+
+    tabsInline: {
+      true: {
+        header: "min-h-11 py-0",
+      },
+    },
+    pinned: {
+      left: {
+        headCell: `${HEADER_MATCH_BG} sticky z-10 shadow-[2px_0_0_0_rgba(0,0,0,0.06)]`,
+        rowCell: `${PANEL_MATCH_BG} ${ROW_SELECTED_CELL_BG} ${ROW_EXPANDED_CELL_BG} ${ROW_OPEN_CELL_BG} group-data-[presence=true]:bg-elevated sticky z-10 shadow-[2px_0_0_0_rgba(0,0,0,0.06)]`,
+      },
+      right: {
+        headCell: `${HEADER_MATCH_BG} sticky z-10 shadow-[-2px_0_0_0_rgba(0,0,0,0.06)]`,
+        rowCell: `${PANEL_MATCH_BG} ${ROW_SELECTED_CELL_BG} ${ROW_EXPANDED_CELL_BG} ${ROW_OPEN_CELL_BG} group-data-[presence=true]:bg-elevated sticky z-10 shadow-[-2px_0_0_0_rgba(0,0,0,0.06)]`,
+      },
+    },
+
+    density: {
+      default: "",
+      compact: {
+        headCell: "h-8",
+        rowCell: "h-9 text-[12.5px]",
+        loadingBar: "top-8",
+      },
+    },
+
+    scrollArea: {
+      true: {
+        tableRoot: "overflow-y-auto overscroll-contain",
+        table: "border-separate border-spacing-0",
+        headCell: "sticky top-0 z-20",
+      },
+    },
+    scrolled: {
+      true: "",
+    },
+    side: {
+      start: {
+        scrollFade: "shadow-[inset_12px_0_10px_-10px_rgb(0_0_0/0.28)]",
+      },
+      end: {
+        scrollFade: "shadow-[inset_-12px_0_10px_-10px_rgb(0_0_0/0.28)]",
+      },
+    },
+
+    archived: {
+      true: {
+        rowCell: "text-muted",
+        rowAction: "opacity-100",
+      },
+    },
+
+    loading: {
+      true: {
+        row: "cursor-wait hover:bg-transparent",
+        rowInternal: "opacity-60 delay-200",
+      },
+    },
+    rowClickable: {
+      true: "",
+    },
+    isResizing: {
+      true: {
+        colResizer: "opacity-100",
+      },
+    },
+    rowSelected: {
+      true: {
+        rowSelection: "opacity-100",
+      },
+    },
+
+    prominent: {
+      true: {
+        rowAction: "opacity-100",
+      },
+    },
+    presence: {
+      true: {
+        row: "bg-elevated",
+      },
+    },
+  },
+  compoundVariants: [
+    {
+      loading: false,
+      rowClickable: true,
+      class: {
+        row: ROW_HOVER_BG,
+      },
+    },
+    {
+      loading: false,
+      rowClickable: true,
+      pinned: ["left", "right"],
+      class: {
+        rowCell: ROW_HOVER_CELL_BG,
+      },
+    },
+    {
+      scrollArea: true,
+      pinned: ["left", "right"],
+      class: {
+        headCell: "z-30",
+      },
+    },
+    {
+      scrollArea: true,
+      scrolled: true,
+      class: {
+        headCell: HEADER_SCROLL_SHADOW,
+      },
+    },
+  ],
+});
+
+export {
+  PANEL_MATCH_BG,
+  HEADER_PLACEMENT,
+  HEADER_MATCH_BG,
+  ROW_HOVER_CELL_BG,
+  theme,
+};

package/frontend-vue/layers/dms-ui/app/build/components/table-view/CardAvatar.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { computed, watch } from "vue";
+import { isObject, isString } from "#dms-core/app/utils/type-check";
 import { useFileReadUrls } from "../../../composables/useFileReadUrls";
 
 /**
@@ -22,12 +23,12 @@ const INITIALS_LENGTH = 2;
 const { getUrl, resolve } = useFileReadUrls(props.storage);
 
 const avatarKey = computed(() =>
-  props.avatar && typeof props.avatar === "object" ? props.avatar.key : null,
+  props.avatar && isObject(props.avatar) ? props.avatar.key : null,
 );
 watch(avatarKey, (key) => key && resolve(key), { immediate: true });
 
 const src = computed(() => {
-  if (typeof props.avatar === "string") return props.avatar;
+  if (isString(props.avatar)) return props.avatar;
   return avatarKey.value ? getUrl(avatarKey.value) : undefined;
 });
 

package/frontend-vue/layers/dms-ui/app/build/components/table-view/CardGridSkeleton.vue

@@ -30,8 +30,6 @@ const props = withDefaults(defineProps<CardGridSkeletonProps>(), {
   labelClass: "text-[10.5px] leading-[1.2]",
 });
 
-// A full page of cards, as for the rows of a table: the pagination footer
-// below them stands where the loaded page puts it.
 const MAX_CARD_COUNT = MAX_PAGE_SIZE;
 const cardCount = computed(() =>
   Math.max(1, Math.min(props.count, MAX_CARD_COUNT)),

package/frontend-vue/layers/dms-ui/app/build/components/table-view/CardRowActions.vue

@@ -16,8 +16,6 @@ interface CardRowActionsProps {
 
 const props = defineProps<CardRowActionsProps>();
 
-// The core model holds every listed row: the paginated one may not, when the
-// table pages on the client.
 const cell = computed(() =>
   props.table
     ?.getCoreRowModel()

package/frontend-vue/layers/dms-ui/app/build/components/table-view/CardsDisplay.vue

@@ -1,7 +1,6 @@
 <script setup lang="ts" generic="T extends Record<string, unknown>">
 import { defineComponent, markRaw, type Component } from "vue";
 import { get } from "@nuxt/ui/runtime/utils/index.js";
-import type { Table } from "@tanstack/vue-table";
 import TablePagination from "../table/Pagination.vue";
 import TableEmpty from "../table/Empty.vue";
 import CardGridSkeleton from "./CardGridSkeleton.vue";
@@ -52,12 +51,10 @@ const titleOf = (item: T): string => {
     : rowId(item);
 };
 
-// The subtitle and avatar the title column's identity display declares.
 const identity = computed(() =>
   cardIdentity(props.context.columns, props.context.labelKey),
 );
 
-// An id or an address is data: only a composed text is translated.
 const subtitleOf = (item: T): string | undefined =>
   readSubline(
     cardSubtitle(item, identity.value, {
@@ -69,10 +66,10 @@ const subtitleOf = (item: T): string | undefined =>
 
 const card = computed(
   () =>
+    // oxlint-disable-next-line anti-slop/require-safety-comment-for-type-assertion -- Display options are supplied by backend configuration; retain the existing unchecked card shape.
     (props.context.options as { card?: TableViewCardConfig } | undefined)?.card,
 );
 
-// A custom card draws the whole card; it gets the props a kanban card gets.
 const cardComponent = computed(() => {
   const name = card.value?.component?.componentName;
   return name ? resolveDmsComponent(name) || name : undefined;
@@ -85,15 +82,11 @@ const fieldColumns = computed<TableViewColumn[]>(() =>
   }),
 );
 
-// A field renders the same way a table cell does: through its column's
-// display, else its data type (status pills, links, dates…).
 const FieldValue = (fieldProps: { column: TableViewColumn; item: T }) =>
   renderField(fieldProps.column, fieldProps.item);
 
 const openItem = (item: T) => props.context.actions.open(item);
 
-// A custom card draws its row's actions where it likes, as a component: one
-// per row, kept across renders so an open menu is not remounted shut.
 const rowActionsComponents = new Map<string, Component>();
 const rowActionsFor = (id: string): Component => {
   let component = rowActionsComponents.get(id);
@@ -103,8 +96,8 @@ const rowActionsFor = (id: string): Component => {
         name: "CardRowActionsOf",
         render: () =>
           h(CardRowActions, {
-            // `h` cannot carry the display's row type to a generic component.
-            table: props.context.table as Table<Record<string, unknown>>,
+            // oxlint-disable-next-line anti-slop/require-safety-comment-for-type-assertion -- Dynamic h erases the row generic; retain the existing unchecked table handoff without asserting that TanStack's row types are covariant.
+            table: props.context.table as TableViewDisplayContext["table"],
             rowId: id,
           }),
       }),
@@ -114,8 +107,6 @@ const rowActionsFor = (id: string): Component => {
   return component;
 };
 
-// A hand-ordered table (backend `reorder`): each card carries a move handle,
-// and is where another card dragged by its handle drops.
 const { draggedIndex, handleFor, drop, allowDrop } = useReorderHandles({
   reorder: () => props.context.reorder,
   count: () => props.context.items.length,