@antelopejs/dms 0.9.8 → 0.10.0

package/frontend-vue/layers/dms-ui/app/components/form/components/Repeater.vue

@@ -6,6 +6,7 @@ import {
   useFormField,
 } from "@nuxt/ui/composables/useFormField";
 import { resolveDmsComponent } from "../../../composables/resolveDmsComponent";
+import DmsRepeaterTable from "./RepeaterTable.vue";
 
 /** A field of the rows: one column. */
 interface RepeaterColumn {
@@ -72,21 +73,43 @@ const FLUID_COLUMN = "minmax(0,1fr)";
 const COLUMN_WIDTHS: Record<string, string> = { boolean: "20px" };
 const HANDLE_COLUMN = "20px";
 const REMOVE_COLUMN = "28px";
+
+/** The columns of a row: the handle, the given cell columns, the remove button. */
+function rowTemplate(cellColumns: string[]): string {
+  return [props.sortable ? HANDLE_COLUMN : "", ...cellColumns, REMOVE_COLUMN]
+    .filter(Boolean)
+    .join(" ");
+}
+
+// Below 480px of the field's own width (a drawer, a phone), columns side by
+// side would each be a few characters wide: each row stacks its cells in one
+// column instead, a labelled field under another, as a card, and the column
+// heads hide.
+const STACKED_HIDDEN_CLASS = "@max-[30rem]:hidden";
+const STACKED_ROW_CLASSES = {
+  row: "@max-[30rem]:grid-cols-(--dms-repeater-stacked-columns) @max-[30rem]:items-start @max-[30rem]:rounded-md @max-[30rem]:border @max-[30rem]:border-default @max-[30rem]:p-2.5",
+  // Side by side, each cell is a column of the row itself.
+  cells: "contents @max-[30rem]:grid @max-[30rem]:min-w-0 @max-[30rem]:gap-2.5",
+  cell: "grid min-w-0 gap-1",
+  label: `${EYEBROW_CLASS} text-dimmed hidden truncate @max-[30rem]:block`,
+};
 const gridTemplate = computed(() => ({
-  gridTemplateColumns: [
-    props.sortable ? HANDLE_COLUMN : "",
-    ...props.columns.map(
+  "--dms-repeater-columns": rowTemplate(
+    props.columns.map(
       (column) => COLUMN_WIDTHS[column.type ?? ""] ?? FLUID_COLUMN,
     ),
-    REMOVE_COLUMN,
-  ]
-    .filter(Boolean)
-    .join(" "),
+  ),
+  "--dms-repeater-stacked-columns": rowTemplate([FLUID_COLUMN]),
 }));
 
-function emitRows(next: RepeaterRow[]): void {
+/**
+ * Sets the rows; `shouldValidate: false` leaves the form's validation alone: a row
+ * just added is empty, and is only checked once filled or on submit, never
+ * flagged "required" the moment it appears.
+ */
+function emitRows(next: RepeaterRow[], shouldValidate = true): void {
   model.value = next;
-  emitFormChange();
+  if (shouldValidate) emitFormChange();
 }
 
 function setCell(index: number, column: string, value: unknown): void {
@@ -99,7 +122,7 @@ function setCell(index: number, column: string, value: unknown): void {
 
 function addRow(): void {
   rowKeys.value.push(nextKey++);
-  emitRows([...rows.value, {}]);
+  emitRows([...rows.value, {}], false);
 }
 
 function removeRow(index: number): void {
@@ -176,10 +199,21 @@ const hasHeaders = computed(() => props.columns.some((column) => column.label));
 </script>
 
 <template>
-  <div :id="props.id" class="grid gap-1.5" role="group">
+  <!-- Read-only, the rows are values to read, not controls: a table. -->
+  <DmsRepeaterTable
+    v-if="props.disabled"
+    :id="props.id"
+    :columns="props.columns"
+    :rows="rows"
+  />
+  <div v-else :id="props.id" class="@container grid gap-1.5" role="group">
     <div
       v-if="hasHeaders && rows.length"
-      :class="[EYEBROW_CLASS, 'text-dimmed grid items-end gap-2']"
+      :class="[
+        EYEBROW_CLASS,
+        'text-dimmed grid grid-cols-(--dms-repeater-columns) items-end gap-2',
+        STACKED_HIDDEN_CLASS,
+      ]"
       :style="gridTemplate"
       aria-hidden="true"
     >
@@ -193,8 +227,11 @@ const hasHeaders = computed(() => props.columns.some((column) => column.label));
     <div
       v-for="(row, index) in rows"
       :key="rowKeys[index]"
-      class="grid items-center gap-2"
-      :class="draggedIndex === index && 'opacity-50'"
+      :class="[
+        'grid grid-cols-(--dms-repeater-columns) items-center gap-2',
+        STACKED_ROW_CLASSES.row,
+        draggedIndex === index && 'opacity-50',
+      ]"
       :style="gridTemplate"
       @dragover.prevent
       @drop.prevent="onDrop(index)"
@@ -212,22 +249,35 @@ const hasHeaders = computed(() => props.columns.some((column) => column.label));
       >
         <UIcon name="i-ph-dots-six-vertical" class="size-4" />
       </button>
-      <Component
-        :is="cellComponent(column)"
-        v-for="column in props.columns"
-        :id="cellName(index, column.id)"
-        :key="column.id"
-        :model-value="row[column.id]"
-        size="sm"
-        class="w-full min-w-0"
-        :disabled="props.disabled"
-        :aria-label="column.label"
-        :aria-invalid="isCellInvalid(index, column.id) || undefined"
-        :color="isCellInvalid(index, column.id) ? 'error' : undefined"
-        :highlight="isCellInvalid(index, column.id) || undefined"
-        v-bind="column.component.options || {}"
-        @update:model-value="setCell(index, column.id, $event)"
-      />
+      <div :class="STACKED_ROW_CLASSES.cells">
+        <div
+          v-for="column in props.columns"
+          :key="column.id"
+          :class="STACKED_ROW_CLASSES.cell"
+        >
+          <span
+            v-if="column.label"
+            :class="STACKED_ROW_CLASSES.label"
+            aria-hidden="true"
+          >
+            {{ column.label }}
+          </span>
+          <Component
+            :is="cellComponent(column)"
+            :id="cellName(index, column.id)"
+            :model-value="row[column.id]"
+            size="sm"
+            class="w-full min-w-0"
+            :disabled="props.disabled"
+            :aria-label="column.label"
+            :aria-invalid="isCellInvalid(index, column.id) || undefined"
+            :color="isCellInvalid(index, column.id) ? 'error' : undefined"
+            :highlight="isCellInvalid(index, column.id) || undefined"
+            v-bind="column.component.options || {}"
+            @update:model-value="setCell(index, column.id, $event)"
+          />
+        </div>
+      </div>
       <UButton
         icon="i-ph-x"
         color="neutral"

package/frontend-vue/layers/dms-ui/app/components/form/components/RepeaterTable.vue

@@ -0,0 +1,203 @@
+<script setup lang="ts">
+import { useId, type VNodeChild } from "vue";
+import { EYEBROW_CLASS } from "../../../build/utils/eyebrow";
+import {
+  relationRowValue,
+  useRelationRows,
+} from "../../../build/composables/data-types/relationRows";
+import { unlabeledRelationIds } from "../../../build/composables/data-types/relationValue";
+import {
+  NUMERIC_TYPE_IDS,
+  useColumnValueRenderer,
+} from "../../../build/composables/data-types/useColumnValueRenderer";
+import {
+  type RelationLabelSource,
+  type RepeaterTableColumn,
+  joinRelationValue,
+  relationLabelSource,
+  renderableColumn,
+} from "../../../build/composables/form/repeaterTable";
+
+/**
+ * The rows of a read-only list (an array or key-value field shown, not
+ * edited) as a table: each value drawn as a grid cell draws it (amounts
+ * right-aligned in the form's tabular figures, a select's label, a
+ * relation's name), text wrapping between words. In a narrow container
+ * (a phone's drawer) a list of more than two fields reads each row as a
+ * block of `label value` lines instead, so no amount is ever cut; a wider
+ * table still too narrow for its words scrolls sideways.
+ */
+interface RepeaterTableProps {
+  columns: RepeaterTableColumn[];
+  rows: Record<string, unknown>[];
+}
+
+const props = defineProps<RepeaterTableProps>();
+const { renderValue } = useColumnValueRenderer();
+const { getDataType } = useDataTypes();
+const { readRelationRows } = useRelationRows();
+// Each column of each list reads its own ids: a key shared by two columns or
+// two lists naming the same route would hand one of them the other's rows.
+const instanceId = useId();
+
+/**
+ * The related rows of a relation column, by the value its cells hold: read
+ * once for the ids the rows hold, narrowed to them with `?ids=`.
+ */
+function useColumnRelationRows(columnId: string, source: RelationLabelSource) {
+  const ids = computed(() =>
+    unlabeledRelationIds(
+      props.rows.flatMap((row) => [row[columnId]].flat()),
+      NO_LABELS,
+    ),
+  );
+  const { data } = useDmsAsyncData(
+    `repeater-table-relation-${instanceId}-${columnId}`,
+    () => readRelationRows(source, ids.value),
+    // Names for the cells, not the page's data.
+    { lazy: true, refreshOnPageRefresh: false, watch: [ids] },
+  );
+  return computed(
+    () =>
+      new Map(
+        (data.value ?? []).map((row) => [relationRowValue(source, row), row]),
+      ),
+  );
+}
+
+const NO_LABELS: ReadonlySet<string> = new Set();
+
+// The columns are the field's own and do not change while it is shown.
+const relationRows = new Map(
+  props.columns.flatMap((column) => {
+    const source = relationLabelSource(column, getDataType(column.type ?? ""));
+    return source
+      ? [
+          [
+            column.id,
+            { source, rows: useColumnRelationRows(column.id, source) },
+          ],
+        ]
+      : [];
+  }),
+);
+
+// Two fields (a key and its value) fit any width as a table; more stack
+// below the container's `@md` width.
+const TABLE_FITS_COLUMNS = 2;
+const stacksWhenNarrow = computed(
+  () => props.columns.length > TABLE_FITS_COLUMNS,
+);
+
+const renderables = computed(() => props.columns.map(renderableColumn));
+
+function isNumeric(column: RepeaterTableColumn): boolean {
+  return NUMERIC_TYPE_IDS.has(column.type ?? "");
+}
+
+function cellValue(column: RepeaterTableColumn, row: Record<string, unknown>) {
+  const value = row[column.id];
+  const relation = relationRows.get(column.id);
+  if (!relation) return value;
+  return joinRelationValue(
+    value,
+    relation.rows.value,
+    relation.source.multiple,
+  );
+}
+
+// A cell renders a VNode tree; a functional wrapper keeps it in the
+// template's flow.
+interface CellProps {
+  index: number;
+  rowIndex: number;
+}
+const Cell = ({ index, rowIndex }: CellProps): VNodeChild => {
+  const column = props.columns[index]!;
+  const row = props.rows[rowIndex]!;
+  return renderValue(
+    renderables.value[index]!,
+    cellValue(column, row),
+    row,
+    "detail",
+  );
+};
+// Declared, so `row-index` reaches it camelized, as a component's props do.
+Cell.props = ["index", "rowIndex"];
+</script>
+
+<template>
+  <div class="@container min-w-0">
+    <div
+      class="min-w-0 overflow-x-auto"
+      :class="stacksWhenNarrow && 'hidden @md:block'"
+    >
+      <table class="w-full text-sm">
+        <thead>
+          <tr :class="[EYEBROW_CLASS, 'text-dimmed']">
+            <th
+              v-for="column in props.columns"
+              :key="column.id"
+              scope="col"
+              class="pe-4 pb-1.5 text-start align-bottom font-semibold whitespace-nowrap last:pe-0"
+              :class="isNumeric(column) && 'text-end'"
+            >
+              {{ column.label }}
+            </th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr
+            v-for="(row, rowIndex) in props.rows"
+            :key="rowIndex"
+            class="border-default border-t"
+          >
+            <!-- A text cell wraps between words: `break-word`, unlike
+                 `anywhere`, keeps a column at least as wide as its longest
+                 word, so a narrow table scrolls instead of splitting one. -->
+            <td
+              v-for="(column, index) in props.columns"
+              :key="column.id"
+              class="text-default py-2 pe-4 align-top last:pe-0"
+              :class="
+                isNumeric(column)
+                  ? 'text-end whitespace-nowrap'
+                  : 'min-w-24 [overflow-wrap:break-word]'
+              "
+            >
+              <Cell :index :row-index="rowIndex" />
+            </td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+    <!-- The narrow reading: a row per block, a field per line, its label
+         beside its value. A value has the line's remaining width, an amount
+         never wraps. -->
+    <ul v-if="stacksWhenNarrow" class="text-sm @md:hidden">
+      <li
+        v-for="(row, rowIndex) in props.rows"
+        :key="rowIndex"
+        class="border-default border-t py-2 first:border-t-0 first:pt-0"
+      >
+        <dl class="grid grid-cols-[auto_minmax(0,1fr)] gap-x-4 gap-y-1">
+          <template v-for="(column, index) in props.columns" :key="column.id">
+            <dt class="text-dimmed pt-0.5 font-semibold" :class="EYEBROW_CLASS">
+              {{ column.label }}
+            </dt>
+            <dd
+              class="text-default min-w-0"
+              :class="
+                isNumeric(column)
+                  ? 'text-end whitespace-nowrap'
+                  : '[overflow-wrap:break-word]'
+              "
+            >
+              <Cell :index :row-index="rowIndex" />
+            </dd>
+          </template>
+        </dl>
+      </li>
+    </ul>
+  </div>
+</template>

package/frontend-vue/layers/dms-ui/app/components/form/components/Select.vue

@@ -89,14 +89,16 @@ function handleUpdateModelValue(value: unknown) {
       "
       #default
     >
-      <span class="inline-flex items-center gap-1.5">
+      <!-- Top-aligned: on the text's baseline, the icon would add the
+        line's descent and make the trigger taller than a text field. -->
+      <span class="inline-flex max-w-full items-center gap-1.5 align-top">
         <UIcon
           v-if="selectedItem.icon"
           :name="selectedItem.icon"
           class="size-4 shrink-0"
           :style="colorVar(selectedItem.iconColor)"
         />
-        <span :style="colorVar(selectedItem.textColor)">
+        <span class="truncate" :style="colorVar(selectedItem.textColor)">
           {{ selectedItem.label }}
         </span>
       </span>

package/frontend-vue/layers/dms-ui/app/components/grid/GridRow.vue

@@ -17,7 +17,13 @@ const DEFAULT_GAP = "1rem";
 
 const props = defineProps<GridRowProps>();
 
-const gridContext = inject<GridContext>(GRID_CONTEXT);
+const gridContext = inject<GridContext | null>(GRID_CONTEXT, null);
+
+// The grid's template is for its own rows only. A row nested in one of this
+// row's cells (inside a Section, a stack...) lays out its own children: were it
+// to read the outer grid, it would take that grid's column count and leave
+// empty tracks beside its cells. A Grid inside a cell provides its own context.
+provide<GridContext | null>(GRID_CONTEXT, null);
 
 /** The identity this row counts under, so its width dies with it. */
 const rowId = Symbol("grid-row");
@@ -28,7 +34,10 @@ watchEffect(() => gridContext?.setRowColumnCount(rowId, columnCount.value));
 onUnmounted(() => gridContext?.dropRow(rowId));
 
 const gap = computed(() => gridContext?.gap.value ?? DEFAULT_GAP);
-const maxColumns = computed(() => gridContext?.maxColumns.value || 1);
+// Outside a Grid, the row spreads its own children over the width.
+const maxColumns = computed(() =>
+  Math.max(1, gridContext ? gridContext.maxColumns.value : columnCount.value),
+);
 const minColumnWidth = computed(
   () => gridContext?.minColumnWidth.value ?? GRID_DEFAULT_MIN_COLUMN_WIDTH,
 );

package/frontend-vue/layers/dms-ui/app/components/key-value-list/KeyValueList.vue

@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import { readableNumberFormat } from "#dms-core/app/utils/formatter";
 import { pageLink } from "../../build/composables/page/pageUrlValues";
 import { computed } from "vue";
 import { regionalDateTimeFormat } from "#dms-core/app/utils/regional";
@@ -48,7 +49,7 @@ interface KeyValueListProps {
   items?: KeyValueItem[];
   /** Tighter rows (32px instead of 38px) for side panels. */
   dense?: boolean;
-  /** Columns on wide screens (1–3); one on phones. */
+  /** Columns once the list is wide enough (1–3); one when narrow. */
   columns?: number;
   /** Loading: values turn to skeletons, or `skeletonCount` rows are drawn. */
   loading?: boolean;
@@ -76,11 +77,13 @@ const EMPTY_VALUE = "—";
 const MAX_COLUMNS = 3;
 
 // v2 .c-dl: label left, value right, rows split by a muted hairline. Each
-// column's first row drops its line, at every breakpoint.
+// column's first row drops its line, at every breakpoint. The columns follow
+// the list's own width (a drawer, a card), not the window's: each keeps its
+// 120px label and room for a value.
 const COLUMN_CLASSES: Record<number, string> = {
   1: "[&>div:first-child]:border-t-0",
-  2: "gap-x-8 sm:grid-cols-2 [&>div:first-child]:border-t-0 sm:[&>div:nth-child(2)]:border-t-0",
-  3: "gap-x-8 sm:grid-cols-2 lg:grid-cols-3 [&>div:first-child]:border-t-0 sm:[&>div:nth-child(2)]:border-t-0 lg:[&>div:nth-child(3)]:border-t-0",
+  2: "gap-x-8 @min-[560px]:grid-cols-2 [&>div:first-child]:border-t-0 @min-[560px]:[&>div:nth-child(2)]:border-t-0",
+  3: "gap-x-8 @min-[560px]:grid-cols-2 @min-[840px]:grid-cols-3 [&>div:first-child]:border-t-0 @min-[560px]:[&>div:nth-child(2)]:border-t-0 @min-[840px]:[&>div:nth-child(3)]:border-t-0",
 };
 
 const { locale, t } = useI18n();
@@ -105,13 +108,13 @@ type ValueFormatter = (item: KeyValueItem, value: string | number) => string;
 
 function formatNumber(_item: KeyValueItem, value: string | number): string {
   if (typeof value !== "number") return value;
-  return new Intl.NumberFormat(locale.value).format(value);
+  return readableNumberFormat(locale.value).format(value);
 }
 
 function formatMoney(item: KeyValueItem, value: string | number): string {
   if (typeof value !== "number") return value;
   try {
-    return new Intl.NumberFormat(locale.value, {
+    return readableNumberFormat(locale.value, {
       style: "currency",
       currency: item.currency ?? props.currency,
     }).format(value);
@@ -178,70 +181,76 @@ function keyOf(item: KeyValueItem, index: number): string {
 <template>
   <!-- grid-cols-1: minmax(0, 1fr) tracks, so a long value truncates instead
        of widening the list past a narrow screen. -->
-  <dl
-    class="grid grid-cols-1"
-    :class="[columnClass, props.dense ? 'text-[12.5px]' : 'text-[13px]']"
-    :aria-busy="props.loading || undefined"
-  >
-    <template v-if="showPlaceholders">
-      <div v-for="index in props.skeletonCount" :key="index" :class="rowClass">
-        <dt class="min-w-[120px] flex-none">
-          <USkeleton :aria-label="t('dms.a11y.loading')" class="h-3 w-20" />
-        </dt>
-        <dd class="ms-auto">
-          <USkeleton :aria-label="t('dms.a11y.loading')" class="h-3 w-24" />
-        </dd>
-      </div>
-    </template>
-    <template v-else>
-      <div
-        v-for="(item, index) in props.items"
-        :key="keyOf(item, index)"
-        :class="rowClass"
-      >
-        <dt class="text-muted min-w-[120px] flex-none">{{ item.label }}</dt>
-        <dd
-          class="ms-auto flex min-w-0 flex-wrap items-center justify-end gap-x-1.5 gap-y-0.5 text-end"
+  <div class="@container">
+    <dl
+      class="grid grid-cols-1"
+      :class="[columnClass, props.dense ? 'text-[12.5px]' : 'text-[13px]']"
+      :aria-busy="props.loading || undefined"
+    >
+      <template v-if="showPlaceholders">
+        <div
+          v-for="index in props.skeletonCount"
+          :key="index"
+          :class="rowClass"
         >
-          <USkeleton
-            :aria-label="t('dms.a11y.loading')"
-            v-if="props.loading || item.loading"
-            class="h-3 w-24"
-          />
-          <slot
-            v-else-if="slots.value"
-            name="value"
-            :item="item"
-            :formatted="format(item)"
-          />
-          <template v-else>
-            <component
-              :is="item.to ? DmsAutoLink : 'span'"
-              :to="pageLink(item.to)"
-              class="min-w-0"
-              :class="item.to && item.type !== 'status' && 'hover:underline'"
-            >
-              <DmsStatusPill
-                v-if="item.type === 'status'"
-                :tone="item.tone ?? 'neutral'"
-                :label="format(item)"
-              />
-              <span v-else class="block" :class="valueClass(item)">
-                {{ format(item) }}
+          <dt class="min-w-[120px] flex-none">
+            <USkeleton :aria-label="t('dms.a11y.loading')" class="h-3 w-20" />
+          </dt>
+          <dd class="ms-auto">
+            <USkeleton :aria-label="t('dms.a11y.loading')" class="h-3 w-24" />
+          </dd>
+        </div>
+      </template>
+      <template v-else>
+        <div
+          v-for="(item, index) in props.items"
+          :key="keyOf(item, index)"
+          :class="rowClass"
+        >
+          <dt class="text-muted min-w-[120px] flex-none">{{ item.label }}</dt>
+          <dd
+            class="ms-auto flex min-w-0 flex-wrap items-center justify-end gap-x-1.5 gap-y-0.5 text-end"
+          >
+            <USkeleton
+              :aria-label="t('dms.a11y.loading')"
+              v-if="props.loading || item.loading"
+              class="h-3 w-24"
+            />
+            <slot
+              v-else-if="slots.value"
+              name="value"
+              :item="item"
+              :formatted="format(item)"
+            />
+            <template v-else>
+              <component
+                :is="item.to ? DmsAutoLink : 'span'"
+                :to="pageLink(item.to)"
+                class="min-w-0"
+                :class="item.to && item.type !== 'status' && 'hover:underline'"
+              >
+                <DmsStatusPill
+                  v-if="item.type === 'status'"
+                  :tone="item.tone ?? 'neutral'"
+                  :label="format(item)"
+                />
+                <span v-else class="block" :class="valueClass(item)">
+                  {{ format(item) }}
+                </span>
+              </component>
+              <span v-if="item.detail" class="text-dimmed truncate text-xs">
+                {{ item.detail }}
               </span>
-            </component>
-            <span v-if="item.detail" class="text-dimmed truncate text-xs">
-              {{ item.detail }}
-            </span>
-          </template>
-          <!-- -my-1: the button is taller than a dense row's text line. -->
-          <DmsCopyButton
-            v-if="!props.loading && !item.loading && copyTextOf(item)"
-            :value="copyTextOf(item)!"
-            class="-my-1"
-          />
-        </dd>
-      </div>
-    </template>
-  </dl>
+            </template>
+            <!-- -my-1: the button is taller than a dense row's text line. -->
+            <DmsCopyButton
+              v-if="!props.loading && !item.loading && copyTextOf(item)"
+              :value="copyTextOf(item)!"
+              class="-my-1"
+            />
+          </dd>
+        </div>
+      </template>
+    </dl>
+  </div>
 </template>