@antelopejs/dms 0.5.5 → 0.6.0

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

@@ -0,0 +1,186 @@
+<script setup lang="ts" generic="T extends Record<string, unknown>">
+import { get } from "@nuxt/ui/runtime/utils/index.js";
+import TablePagination from "../table/Pagination.vue";
+import TableEmpty from "../table/Empty.vue";
+import CardGridSkeleton from "./CardGridSkeleton.vue";
+import type { TableViewColumn } from "../../../composables/table-view/types/column";
+import type {
+  TableViewCardConfig,
+  TableViewDisplayContext,
+} from "../../../composables/table-view/types/display";
+import {
+  buildCardProps,
+  cardFieldColumns,
+} from "../../composables/table-view/utils/card";
+
+interface CardsDisplayProps {
+  context: TableViewDisplayContext<T>;
+}
+
+const props = defineProps<CardsDisplayProps>();
+
+const INITIALS_LENGTH = 2;
+const EMPTY_VALUE = "—";
+
+const { locale } = useI18n();
+const { processI18n } = useTranslation();
+const { getDataType } = useDataTypes();
+
+const rowId = (item: T): string =>
+  String(get(item, props.context.rowIdKey) ?? "");
+
+const titleOf = (item: T): string => {
+  const label = props.context.labelKey
+    ? get(item, props.context.labelKey)
+    : undefined;
+  return label !== undefined && label !== null && label !== ""
+    ? String(label)
+    : rowId(item);
+};
+
+const initialsOf = (item: T): string =>
+  titleOf(item)
+    .split(/\s+/)
+    .filter(Boolean)
+    .slice(0, INITIALS_LENGTH)
+    .map((word) => word.charAt(0).toUpperCase())
+    .join("");
+
+const card = computed(
+  () =>
+    (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;
+});
+
+const fieldColumns = computed<TableViewColumn[]>(() =>
+  cardFieldColumns(props.context.columns, card.value?.fields, {
+    labelKey: props.context.labelKey,
+    rowIdKey: props.context.rowIdKey,
+  }),
+);
+
+// A field renders the same way a table cell does: through the formatter of
+// the column's data type (status pills, links, dates…).
+const FieldValue = (fieldProps: { column: TableViewColumn; item: T }) => {
+  const value = get(fieldProps.item, fieldProps.column.accessorKey);
+  if (value === null || value === undefined || value === "") {
+    return h("span", { class: "text-dimmed" }, EMPTY_VALUE);
+  }
+  const options = fieldProps.column.type.inputComponent?.options as
+    | Record<string, unknown>
+    | undefined;
+  const formatter = getDataType(fieldProps.column.type.id)?.formatter;
+  const rendered = formatter
+    ? formatter.default(value, locale.value, options)
+    : value;
+  if (typeof rendered === "string" || typeof rendered === "number") {
+    return h("span", { class: "truncate" }, String(rendered));
+  }
+  return rendered as ReturnType<typeof h>;
+};
+
+const openItem = (item: T) => props.context.actions.open(item);
+</script>
+
+<template>
+  <div>
+    <!-- v2 cards display: an auto-fill grid inside the table card, sharing
+         its selection and its pagination footer. -->
+    <CardGridSkeleton
+      v-if="props.context.loading && props.context.items.length === 0"
+      :count="props.context.pagination.pageSize"
+      :fields="fieldColumns.length"
+    />
+
+    <TableEmpty
+      v-else-if="props.context.items.length === 0"
+      :can-add-row="props.context.actions.canAdd"
+    />
+
+    <div
+      v-else
+      class="grid grid-cols-[repeat(auto-fill,minmax(min(230px,100%),1fr))] gap-3 px-[18px] pt-4 pb-[18px]"
+    >
+      <template v-if="cardComponent">
+        <component
+          :is="cardComponent"
+          v-for="item in props.context.items"
+          :key="rowId(item)"
+          v-bind="{
+            ...(card?.component?.options ?? {}),
+            ...buildCardProps(item, props.context),
+          }"
+        />
+      </template>
+      <template v-else>
+        <article
+          v-for="item in props.context.items"
+          :key="rowId(item)"
+          class="group border-default hover:border-primary/35 @container cursor-pointer rounded-[10px] border bg-(--ui-bg) p-3.5 text-[12.5px] transition-colors focus-visible:outline-2 focus-visible:outline-(--dms-accent-line)"
+          :class="{
+            'border-primary ring-primary ring-1':
+              props.context.selection.isSelected(rowId(item)),
+          }"
+          tabindex="0"
+          @click="openItem(item)"
+          @keydown.enter.self="openItem(item)"
+        >
+          <header class="flex items-center gap-2.5">
+            <span
+              class="bg-accented text-default grid size-7 shrink-0 place-items-center rounded-[7px] font-mono text-[10.5px] font-bold"
+            >
+              {{ initialsOf(item) }}
+            </span>
+            <div class="min-w-0 flex-1">
+              <div
+                class="text-highlighted truncate text-[13px] font-semibold"
+                :title="titleOf(item)"
+              >
+                {{ titleOf(item) }}
+              </div>
+              <div class="text-dimmed truncate font-mono text-[11px]">
+                {{ rowId(item) }}
+              </div>
+            </div>
+            <UCheckbox
+              :model-value="props.context.selection.isSelected(rowId(item))"
+              :aria-label="titleOf(item)"
+              @click.stop
+              @update:model-value="
+                props.context.selection.toggle(rowId(item), !!$event)
+              "
+            />
+          </header>
+
+          <!-- A phone-narrow card stacks its fields: two columns would clip
+          every value. -->
+          <dl
+            class="mt-3 grid grid-cols-2 gap-x-3 gap-y-2.5 max-sm:@max-[16rem]:grid-cols-1"
+          >
+            <div
+              v-for="column in fieldColumns"
+              :key="column.id"
+              class="min-w-0"
+            >
+              <DmsEyebrow
+                as="dt"
+                truncate
+                :label="processI18n(column.header)"
+              />
+              <dd class="text-default mt-0.5 flex min-w-0">
+                <FieldValue :column="column" :item="item" />
+              </dd>
+            </div>
+          </dl>
+        </article>
+      </template>
+    </div>
+
+    <TablePagination />
+  </div>
+</template>

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

@@ -0,0 +1,147 @@
+<script setup lang="ts">
+import { computed, type Component, type VNodeChild } from "vue";
+import { get } from "@nuxt/ui/runtime/utils/index.js";
+import DmsKeyValueList, {
+  type KeyValueItem,
+} from "../../../components/key-value-list/KeyValueList.vue";
+import DmsEyebrow from "../../../components/section-header/Eyebrow.vue";
+import { useColumnValueRenderer } from "../../composables/data-types/useColumnValueRenderer";
+import type {
+  TableViewColumn,
+  TableViewExpandableConfig,
+  TableViewExpandedRowProps,
+} from "../../../composables/table-view/types";
+import type { ExpandedRowLoadState } from "../../composables/table-view/useExpandedRowDetails";
+
+/**
+ * Detail band of an expanded TableView row: the configured `component`, which
+ * draws the whole band, or else the configured `fields` as a label/value list
+ * (each value drawn by its column's data type, like a cell). While a
+ * `lazyLoad` row loads, or if it fails, the band says so in its place.
+ */
+interface ExpandedRowDetailProps {
+  /** What the band details, as a custom band receives it. */
+  rowProps: TableViewExpandedRowProps;
+  /** The table view's `expandable` configuration. */
+  config: TableViewExpandableConfig;
+  /** Where the row a `lazyLoad` band shows stands. */
+  loadState?: ExpandedRowLoadState;
+}
+
+const props = withDefaults(defineProps<ExpandedRowDetailProps>(), {
+  loadState: "ready",
+});
+const emit = defineEmits<{ retry: [] }>();
+
+const { processI18n } = useTranslation();
+const { t } = useI18n();
+
+const SKELETON_LINE_COUNT = 2;
+const { renderColumnValue } = useColumnValueRenderer();
+
+const EMPTY_VALUE = "—";
+
+interface DetailField {
+  item: KeyValueItem;
+  column: TableViewColumn;
+}
+
+const fields = computed<DetailField[]>(() =>
+  (props.config.fields ?? []).flatMap((field) => {
+    const column = props.rowProps.columns.find(
+      (candidate) => candidate.accessorKey === field.key,
+    );
+    if (!column) return [];
+    return [
+      {
+        column,
+        item: {
+          id: field.key,
+          label: processI18n(field.label ?? column.header),
+          value: "",
+        },
+      },
+    ];
+  }),
+);
+
+const columnByKey = computed(
+  () => new Map(fields.value.map(({ column }) => [column.accessorKey, column])),
+);
+
+const detailComponent = computed<Component | string | undefined>(() => {
+  const name = props.config.component?.componentName;
+  if (!name) return undefined;
+  return resolveDmsComponent(name) || name;
+});
+
+function renderField(key: string | undefined): VNodeChild {
+  const column = key ? columnByKey.value.get(key) : undefined;
+  if (!column) return EMPTY_VALUE;
+  const row = props.rowProps.row;
+  if (get(row, column.accessorKey) === "") return EMPTY_VALUE;
+  return renderColumnValue(column, row, "detail");
+}
+
+// The value slot renders a VNode tree; a functional wrapper keeps it in the
+// template's flow.
+const FieldValue = (fieldProps: { item: KeyValueItem }) =>
+  renderField(fieldProps.item.id);
+</script>
+
+<template>
+  <div
+    v-if="props.loadState === 'loading'"
+    class="grid min-w-0 gap-2"
+    aria-busy="true"
+  >
+    <USkeleton
+      v-for="line in SKELETON_LINE_COUNT"
+      :key="line"
+      class="h-4 w-full max-w-md"
+    />
+  </div>
+  <div
+    v-else-if="props.loadState === 'error'"
+    class="flex items-center justify-between gap-2"
+    role="alert"
+  >
+    <p class="text-error flex min-w-0 items-center gap-1.5 text-[12.5px]">
+      <UIcon name="i-ph-warning-circle" class="size-4 shrink-0" />
+      <span class="truncate">{{ t("dms.table.load_error_title") }}</span>
+    </p>
+    <UButton
+      :label="t('dms.table.load_error_retry')"
+      icon="i-ph-arrows-clockwise"
+      color="neutral"
+      variant="outline"
+      size="xs"
+      @click="emit('retry')"
+    />
+  </div>
+  <component
+    :is="detailComponent"
+    v-else-if="detailComponent"
+    v-bind="{ ...(props.config.component?.options ?? {}), ...props.rowProps }"
+  />
+  <section
+    v-else-if="fields.length > 0"
+    class="grid min-w-0 content-start gap-2"
+  >
+    <DmsEyebrow
+      v-if="props.config.fieldsLabel"
+      :label="processI18n(props.config.fieldsLabel)"
+    />
+    <DmsKeyValueList
+      :items="fields.map((field) => field.item)"
+      :columns="2"
+      dense
+    >
+      <template #value="{ item }">
+        <span class="text-highlighted min-w-0 truncate">
+          <FieldValue :item="item" />
+        </span>
+      </template>
+    </DmsKeyValueList>
+  </section>
+</template>

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

@@ -0,0 +1,126 @@
+<script setup lang="ts">
+import { computed, watch } from "vue";
+import { useFileReadUrls } from "../../../composables/useFileReadUrls";
+
+/**
+ * The `identity` cell of a table: an avatar (or an icon tile), a name with an
+ * optional "You" tag and status badges, and a secondary line (an address).
+ * Rendered by the `identity` data type, which reads the extras off the row.
+ */
+interface IdentityCellBadge {
+  label: string;
+  /** Badge color (Nuxt UI color name). Defaults to `neutral`. */
+  color?: string;
+}
+
+interface IdentityCellProps {
+  /** Main line; the subtitle takes its place when empty. */
+  title?: string;
+  /** Secondary line under the title. */
+  subtitle?: string;
+  /** Image value (`{ key }`, resolved through the file API) or a URL. */
+  avatar?: { key: string; alt?: string } | string | null;
+  /** Icon drawn in a tile instead of an avatar. */
+  icon?: string;
+  /** User id the row stands for: the signed-in user's row gets `selfLabel`. */
+  selfId?: string;
+  /** Tag of the signed-in user's row. */
+  selfLabel?: string;
+  /** Badges after the title. */
+  badges?: IdentityCellBadge[];
+  /** Storage the avatar's file key lives in. */
+  storage?: string;
+}
+
+const props = withDefaults(defineProps<IdentityCellProps>(), {
+  title: "",
+  subtitle: "",
+  avatar: null,
+  icon: undefined,
+  selfId: undefined,
+  selfLabel: undefined,
+  badges: () => [],
+  storage: undefined,
+});
+
+const { user } = useCurrentUser();
+const { getUrl, resolve } = useFileReadUrls(props.storage);
+
+const MAX_INITIALS = 2;
+const INITIALS_SPLIT = /[\s.@_-]+/;
+
+const label = computed(() => props.title || props.subtitle);
+const isSelf = computed(
+  () => !!props.selfId && props.selfId === user.value?._id,
+);
+
+const avatarKey = computed(() =>
+  props.avatar && typeof props.avatar === "object" ? props.avatar.key : null,
+);
+watch(avatarKey, (key) => key && resolve(key), { immediate: true });
+
+const avatarSrc = computed(() => {
+  if (typeof props.avatar === "string") return props.avatar || undefined;
+  return avatarKey.value ? getUrl(avatarKey.value) : undefined;
+});
+
+const initials = computed(() =>
+  label.value
+    .split(INITIALS_SPLIT)
+    .filter(Boolean)
+    .slice(0, MAX_INITIALS)
+    .map((word) => word[0]!.toLocaleUpperCase())
+    .join(""),
+);
+</script>
+
+<template>
+  <!-- In a narrow column the badges give way first (down to a readable
+    ellipsis, the full label in their tooltip), then the name. -->
+  <div class="flex min-w-0 items-center gap-2.5">
+    <span
+      v-if="props.icon"
+      class="bg-accented text-toned grid size-7 shrink-0 place-items-center rounded-[7px]"
+    >
+      <UIcon :name="props.icon" class="size-3.5" />
+    </span>
+    <UAvatar
+      v-else
+      :src="avatarSrc"
+      :alt="label"
+      :text="initials"
+      size="sm"
+      class="shrink-0"
+    />
+    <div class="min-w-0">
+      <span
+        class="text-highlighted flex min-w-0 items-center gap-1.5 leading-[1.3] font-semibold"
+      >
+        <span class="truncate" :title="label">{{ label }}</span>
+        <span
+          v-if="isSelf && props.selfLabel"
+          class="text-dimmed shrink-0 font-mono text-[10px] font-semibold tracking-[0.06em] uppercase"
+        >
+          {{ props.selfLabel }}
+        </span>
+        <UBadge
+          v-for="badge in props.badges"
+          :key="badge.label"
+          :color="(badge.color ?? 'neutral') as 'neutral'"
+          variant="soft"
+          size="sm"
+          :label="badge.label"
+          :title="badge.label"
+          :ui="{ label: 'truncate' }"
+          class="min-w-16 shrink-[3]"
+        />
+      </span>
+      <span
+        v-if="props.title && props.subtitle"
+        class="text-dimmed block truncate text-xs leading-[1.2]"
+      >
+        {{ props.subtitle }}
+      </span>
+    </div>
+  </div>
+</template>

package/frontend-vue/layers/dms-ui/app/build/composables/actions/bulkSelection.ts

@@ -0,0 +1,67 @@
+import type { ActionTarget } from "../../../composables/table-view/types/action-target";
+import type { CustomRowAction } from "../../../types/row-action";
+
+/** Query flag of a bulk request covering every matching row. */
+export const ALL_MATCHING_QUERY_KEY = "allMatching";
+const IDS_QUERY_KEY = "ids";
+
+/**
+ * The rows a bulk action runs on: the selected ids, or every row the table's
+ * filters match (`matching`, the list query without paging).
+ */
+export interface BulkSelection {
+  ids?: string[];
+  matching?: Record<string, unknown>;
+  /** How many rows that is. */
+  count: number;
+}
+
+type QueryValue = string | string[];
+
+/** The query a bulk request carries: `ids=a&ids=b`, or the filters. */
+export function bulkSelectionQuery(
+  selection: BulkSelection,
+): Record<string, QueryValue> {
+  if (selection.ids) return { [IDS_QUERY_KEY]: [...selection.ids] };
+  const query: Record<string, QueryValue> = {
+    [ALL_MATCHING_QUERY_KEY]: "true",
+  };
+  for (const [key, value] of Object.entries(selection.matching ?? {})) {
+    if (value !== undefined && value !== null && value !== "") {
+      query[key] = String(value);
+    }
+  }
+  return query;
+}
+
+/** `url` with `query` appended, a list value as a repeated key. */
+export function withQuery(url: string, query: Record<string, QueryValue>) {
+  const [path, search = ""] = url.split("?");
+  const params = new URLSearchParams(search);
+  for (const [key, value] of Object.entries(query)) {
+    for (const entry of Array.isArray(value) ? value : [value]) {
+      params.append(key, entry);
+    }
+  }
+  const joined = params.toString();
+  return joined ? `${path}?${joined}` : (path ?? url);
+}
+
+const URL_TARGET_TYPES = new Set(["page", "external", "api", "exportJob"]);
+
+/** A target sending the selection along: its URL carries the query. */
+export function targetWithSelection(
+  target: ActionTarget,
+  query: Record<string, QueryValue>,
+): ActionTarget {
+  if (!URL_TARGET_TYPES.has(target.type)) return target;
+  const { url } = target as ActionTarget & { url: string };
+  return { ...target, url: withQuery(url, query) } as ActionTarget;
+}
+
+/** Whether a custom action runs on the selection bar. */
+export const isBulkAction = (action: CustomRowAction): boolean => !!action.bulk;
+
+/** Whether a custom action runs on every matching row too. */
+export const isAllMatchingAction = (action: CustomRowAction): boolean =>
+  typeof action.bulk === "object" && !!action.bulk.allMatching;

package/frontend-vue/layers/dms-ui/app/build/composables/actions/rowNavigation.ts

@@ -0,0 +1,85 @@
+import { get } from "@nuxt/ui/runtime/utils/index.js";
+
+/**
+ * What a drawer or modal opened on a row receives to step through the rows
+ * the table shows (`navigation` prop): J and K do the same.
+ */
+export interface RowNavigation {
+  /** Position of the row among the rows shown, from 0. */
+  index: number;
+  total: number;
+  hasPrev: boolean;
+  hasNext: boolean;
+  prev: () => void;
+  next: () => void;
+}
+
+/** The rows a container steps through, in the order the table shows them. */
+export interface RowNavigationSource {
+  rows: () => Data[];
+  rowIdKey: string;
+}
+
+const rowIdOf = (row: Data, rowIdKey: string): string =>
+  String(get(row, rowIdKey));
+
+/**
+ * The navigation of `row` among the rows shown; `go` opens another row in
+ * its place. Undefined when the row is not among them (opened from a link).
+ */
+export function rowNavigation(
+  source: RowNavigationSource,
+  row: Data,
+  go: (row: Data) => void,
+): RowNavigation | undefined {
+  const rows = source.rows();
+  const id = rowIdOf(row, source.rowIdKey);
+  const index = rows.findIndex(
+    (candidate) => rowIdOf(candidate, source.rowIdKey) === id,
+  );
+  if (index < 0) return undefined;
+  const at = (position: number) => () => {
+    const target = rows[position];
+    if (target) go(target);
+  };
+  return {
+    index,
+    total: rows.length,
+    hasPrev: index > 0,
+    hasNext: index < rows.length - 1,
+    prev: at(index - 1),
+    next: at(index + 1),
+  };
+}
+
+const ROW_STEP_KEYS: Record<
+  string,
+  keyof Pick<RowNavigation, "prev" | "next">
+> = { j: "next", k: "prev" };
+
+// A key typed into a field is text, not a step.
+const TYPING_TAGS = new Set(["INPUT", "TEXTAREA", "SELECT"]);
+
+const isTypingTarget = (target: EventTarget | null): boolean => {
+  const element = target as HTMLElement | null;
+  if (!element) return false;
+  return element.isContentEditable || TYPING_TAGS.has(element.tagName);
+};
+
+/**
+ * J and K step to the next and previous row while a row's container is
+ * open, unless the user types in a field. Returns the listener's removal.
+ */
+export function listenRowSteps(current: () => RowNavigation | undefined) {
+  const onKey = (event: KeyboardEvent) => {
+    if (event.metaKey || event.ctrlKey || event.altKey) return;
+    if (isTypingTarget(event.target)) return;
+    const step = ROW_STEP_KEYS[event.key.toLowerCase()];
+    const navigation = current();
+    if (!step || !navigation) return;
+    event.preventDefault();
+    navigation[step]();
+  };
+  window.addEventListener("keydown", onKey);
+  return () => window.removeEventListener("keydown", onKey);
+}