@synopackageland/ui 0.25.12 → 0.25.13

package/CHANGELOG.md

@@ -2,6 +2,17 @@
 
 ## Unreleased
 
+## 0.25.13 (2026-11-13)
+
+### Lists
+
+- **DetailList: sub-rows inside an expanded DataGrid row.** Each line has a leading cell (a `Tag`), a text with a secondary text and trailing actions; the leading cells share one column as wide as the widest, and the list starts under the Name column's text. `max` shows that many lines and a summary line counts the rest ("3 more"), with its own leading, text and trailing slots for a "Show all" action. Under 448px wide the parts stack. Exported with its `DetailListItem` type
+- **The DataGrid expand slot gets `indent`.** The pixels from the row's start to the first data column's text (past the chevron and checkbox columns), also set as `--ui-grid-detail-indent` on the expand row; `DataGridExpandSlotProps` is now exported
+
+### Docs
+
+- `expandable.type: 'cell'` draws no chevron column and ignores double click; a cell slot opens the row with its `toggleExpand` prop. The type comment and README now say so
+
 ## 0.25.12 (2026-11-12)
 
 ### Phone

package/README.md

@@ -548,7 +548,7 @@ DSM-style application building blocks:
 - SettingsPage / Form / FormItem / FormGroup / FormNote / InfoBox / FormActions / Fieldset (DSM-native settings structure, see [docs/layout-rules.md](docs/layout-rules.md))
 - Callout (see [docs/callout.md](docs/callout.md) for when to use a Callout, a toast or an inline note) / EmptyState / StepList
 - ConnectionTopology
-- DataTable / DataGrid
+- DataTable / DataGrid / DetailList (sub-rows inside an expanded DataGrid row)
 - TreeView
 - FilePicker
 - AppRoot (DSM-embedded app root)
@@ -903,6 +903,20 @@ for one column.
 - **Selection.** The header box selects every selectable row of its scope: the current page (`select-all-scope="page"`, the default) or every row the filter leaves, across pages (`"all"`). It is checked when all of them are selected, mixed (`aria-checked="mixed"`, a dash) when some are, and a click when all are clears them; keys outside the scope (another page, rows the filter hides) are kept. `row-selectable(row)` returning `false` disables a row's box, and the header box skips that row and keeps its state. `row-select-disabled-reason(row)` says why: the box is wrapped in a Tab stop with that text as its accessible name and as a `Tooltip`, so the reason is visible on hover and keyboard focus, not only in a native `title`. With no selectable row the header box is disabled.
 - **Footer bar.** `footer` shows the DSM bar with the item count; `refreshable` adds the refresh button (`@refresh`, `refreshing` spins it). Without `footer` it appears when there is more than one page, a page-size choice that matters, or a `#footer` slot.
 - **Localisation.** Every built-in string goes through `labels`: `empty`, `noMatch`, `items(count)`, `filtered(count, total)`, `page(page, count)`, `previous`, `next`, `pageSize`, `refresh`, `selectAll`, `selectRow(key, row)`, `resizeColumn(label)`, `columns`, `resetColumns`, `hiddenByWidth`. `emptyText` still works.
+- **Expanded rows.** `:expandable="{ type: 'row' }"` adds a chevron column (double click toggles too) and renders the `#expand` slot under an open row; bind `v-model:expanded-keys` or call the exposed `expandRow` / `collapseRow` / `expandAllRows`. `type: 'cell'` draws no chevron column and ignores double click: a `#cell-<key>` slot opens the row itself with its `toggleExpand` and `expanded` props, so give that control an `aria-expanded`. The slot gets `indent`, the pixels to the first data column's text, also set as `--ui-grid-detail-indent` on the expand row.
+- **Detail rows.** For sub-rows in that slot (the copies of a file, the members of a group) use `DetailList`: it starts under the Name column's text, puts each line's `#leading` (a `Tag`) in a column as wide as the widest, then the item's `text` and `secondary` (or the default slot), then `#trailing` actions (an `IconButton` with a `label`, or a `variant="text"` Button). `max` shows that many lines and a summary line counts the rest ("3 more", or `summary` / `#summary`); `#summary-leading` and `#summary-trailing` fill that line, for example a "Show all 20 copies" button that opens a `Sheet`. A `#summary` slot keeps the line even when nothing is hidden. Under 448px the lead, text and actions stack.
+
+  ```vue
+  <DataGrid :columns="columns" :rows="files" selectable :expandable="{ type: 'row' }">
+    <template #expand="{ row }">
+      <DetailList :items="row.copies" :max="5" :label="`Copies of ${row.name}`">
+        <template #leading="{ item }"><Tag :label="item.role" :appearance="item.role === 'Keep' ? 'success' : 'warning'" /></template>
+        <template #trailing="{ item }"><Button variant="text" @click="toggle(item)">Keep</Button></template>
+        <template #summary-trailing><Button variant="text" @click="showAll(row)">Show all {{ row.copies.length }} copies</Button></template>
+      </DetailList>
+    </template>
+  </DataGrid>
+  ```
 - **Loading.** `loading` masks the table with a centred indicator; `loading-text` adds a message.
 - **Footer layout.** The footer has top and bottom divider lines and a separator
   before Refresh. In a flex column with a bounded height, the grid fills the

package/dist/components/composite/data-grid/DataGrid.vue.d.ts

@@ -63,7 +63,11 @@ export type DataGridGroup = {
     compare?: (a: unknown, b: unknown) => number;
 };
 export type DataGridExpandable = {
-    /** `row` toggles on double click as well; `cell` needs the chevron button only. */
+    /**
+     * `row` (default) adds a chevron column and toggles on double click as well.
+     * `cell` draws no chevron column and ignores double click: a cell slot
+     * toggles the row itself with its `toggleExpand` and `expanded` props.
+     */
     type?: 'row' | 'cell';
     /** Slot name of the expanded content; defaults to `expand`. */
     slot?: string;
@@ -129,6 +133,12 @@ export type DataGridSelectionSlotProps = {
 export type DataGridExpandSlotProps = {
     row: Record<string, unknown>;
     index: number;
+    /**
+     * Pixels from the row's start to the text of the first data column (the
+     * Name column). The expand row also sets it as `--ui-grid-detail-indent`,
+     * which `DetailList` follows.
+     */
+    indent: number;
 };
 export type { DataGridLabels } from './labels';
 export type { ResolvedDataGridLabels } from './labels';

package/dist/components/composite/detail-list/DetailList.vue.d.ts

@@ -0,0 +1,54 @@
+import { DetailListItem } from './types';
+declare const __VLS_export: <T extends DetailListItem>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_exposed?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
+    props: import('vue').PublicProps & __VLS_PrettifyLocal<{
+        items: T[];
+        /** Show at most this many lines; the rest are counted on the summary line. */
+        max?: number;
+        /** Text of the summary line; defaults to "{count} more" when lines are hidden. */
+        summary?: string;
+        /** Accessible name of the list, e.g. "Copies of ubuntu.iso". */
+        label?: string;
+        /** Width of the leading column, e.g. `120px`; defaults to the widest leading cell. */
+        leadingWidth?: string;
+    }> & (typeof globalThis extends {
+        __VLS_PROPS_FALLBACK: infer P;
+    } ? P : {});
+    expose: (exposed: {}) => void;
+    attrs: any;
+    slots: {
+        leading?: (props: {
+            item: T;
+            index: number;
+        }) => unknown;
+        default?: (props: {
+            item: T;
+            index: number;
+        }) => unknown;
+        trailing?: (props: {
+            item: T;
+            index: number;
+        }) => unknown;
+        'summary-leading'?: (props: {
+            hidden: T[];
+            count: number;
+        }) => unknown;
+        summary?: (props: {
+            hidden: T[];
+            count: number;
+        }) => unknown;
+        'summary-trailing'?: (props: {
+            hidden: T[];
+            count: number;
+        }) => unknown;
+    };
+    emit: {};
+}>) => import('vue').VNode & {
+    __ctx?: NonNullable<Awaited<typeof __VLS_setup>>;
+};
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_PrettifyLocal<T> = (T extends any ? {
+    [K in keyof T]: T[K];
+} : {
+    [K in keyof T as K]: T[K];
+}) & {};

package/dist/components/composite/detail-list/types.d.ts

@@ -0,0 +1,8 @@
+/** One line of a DetailList; `key` must be unique in the list. */
+export type DetailListItem = {
+    key: string | number;
+    /** Main text, e.g. a path; a default slot replaces it. */
+    text?: string;
+    /** Quieter text after the main text, e.g. a date. */
+    secondary?: string;
+};

package/dist/grid.js

@@ -4084,6 +4084,7 @@ const qe = (e, t) => e.x >= t.x && e.x < t.x + t.width && e.y >= t.y && e.y < t.
   "Show password": "Show password",
   "Hide password": "Hide password",
   "Learn more": "Learn more",
+  "{count} more": "{count} more",
   "Show less": "Show less",
   "Note:": "Note:",
   "Copy path": "Copy path",
@@ -4348,6 +4349,7 @@ const qe = (e, t) => e.x >= t.x && e.x < t.x + t.width && e.y >= t.y && e.y < t.
     "Show password": "顯示密碼",
     "Hide password": "隱藏密碼",
     "Learn more": "了解更多",
+    "{count} more": "還有 {count} 項",
     "Show less": "收合",
     "Note:": "附註：",
     "Copy path": "複製路徑",
@@ -4611,6 +4613,7 @@ const qe = (e, t) => e.x >= t.x && e.x < t.x + t.width && e.y >= t.y && e.y < t.
     "Show password": "显示密码",
     "Hide password": "隐藏密码",
     "Learn more": "了解更多",
+    "{count} more": "还有 {count} 项",
     "Show less": "收起",
     "Note:": "注意：",
     "Copy path": "复制路径",
@@ -4874,6 +4877,7 @@ const qe = (e, t) => e.x >= t.x && e.x < t.x + t.width && e.y >= t.y && e.y < t.
     "Show password": "パスワードを表示",
     "Hide password": "パスワードを隠す",
     "Learn more": "詳細",
+    "{count} more": "ほか {count} 件",
     "Show less": "閉じる",
     "Note:": "注：",
     "Copy path": "パスをコピー",
@@ -5137,6 +5141,7 @@ const qe = (e, t) => e.x >= t.x && e.x < t.x + t.width && e.y >= t.y && e.y < t.
     "Show password": "비밀번호 표시",
     "Hide password": "비밀번호 숨기기",
     "Learn more": "자세히 알아보기",
+    "{count} more": "{count}개 더",
     "Show less": "간단히 보기",
     "Note:": "참고:",
     "Copy path": "경로 복사",
@@ -5400,6 +5405,7 @@ const qe = (e, t) => e.x >= t.x && e.x < t.x + t.width && e.y >= t.y && e.y < t.
     "Show password": "Passwort anzeigen",
     "Hide password": "Passwort verbergen",
     "Learn more": "Mehr erfahren",
+    "{count} more": "{count} weitere",
     "Show less": "Weniger anzeigen",
     "Note:": "Hinweis:",
     "Copy path": "Pfad kopieren",
@@ -5663,6 +5669,7 @@ const qe = (e, t) => e.x >= t.x && e.x < t.x + t.width && e.y >= t.y && e.y < t.
     "Show password": "Afficher le mot de passe",
     "Hide password": "Masquer le mot de passe",
     "Learn more": "En savoir plus",
+    "{count} more": "{count} de plus",
     "Show less": "Afficher moins",
     "Note:": "Remarque :",
     "Copy path": "Copier le chemin",
@@ -5926,6 +5933,7 @@ const qe = (e, t) => e.x >= t.x && e.x < t.x + t.width && e.y >= t.y && e.y < t.
     "Show password": "Mostrar contraseña",
     "Hide password": "Ocultar contraseña",
     "Learn more": "Más información",
+    "{count} more": "{count} más",
     "Show less": "Mostrar menos",
     "Note:": "Nota:",
     "Copy path": "Copiar ruta",
@@ -6189,6 +6197,7 @@ const qe = (e, t) => e.x >= t.x && e.x < t.x + t.width && e.y >= t.y && e.y < t.
     "Show password": "Mostra password",
     "Hide password": "Nascondi password",
     "Learn more": "Scopri di più",
+    "{count} more": "Altri {count}",
     "Show less": "Mostra meno",
     "Note:": "Nota:",
     "Copy path": "Copia percorso",

package/dist/i18n/text.d.ts

@@ -238,6 +238,7 @@ export declare const englishUiText: {
     readonly "Show password": "Show password";
     readonly "Hide password": "Hide password";
     readonly "Learn more": "Learn more";
+    readonly "{count} more": "{count} more";
     readonly "Show less": "Show less";
     readonly "Note:": "Note:";
     readonly "Copy path": "Copy path";

package/dist/index.d.ts

@@ -176,7 +176,7 @@ export { isPicture, isUnsupportedPicture } from './lib/files';
 export type { FileItem, FileState } from './lib/files';
 export type { DataTableColumn } from './components/composite/data-table/DataTable.vue';
 export { default as DataGrid } from './components/composite/data-grid/DataGrid.vue';
-export type { DataGridColumn, DataGridColumnWidths, DataGridLabels, ResolvedDataGridLabels, DataGridSort, DataGridGroup, DataGridExpandable, DataGridDraggable, DataGridReorder, DataGridCellUpdate, DataGridAdapter, DataGridCellSlotProps } from './components/composite/data-grid/DataGrid.vue';
+export type { DataGridColumn, DataGridColumnWidths, DataGridLabels, ResolvedDataGridLabels, DataGridSort, DataGridGroup, DataGridExpandable, DataGridDraggable, DataGridReorder, DataGridCellUpdate, DataGridAdapter, DataGridCellSlotProps, DataGridExpandSlotProps } from './components/composite/data-grid/DataGrid.vue';
 export type { TableColumnType, TableColumnAlign } from './components/composite/data-grid/columnType';
 export { loadGridState, saveGridState, type DataGridViewState } from './components/composite/data-grid/viewState';
 export { default as TreeView } from './components/composite/tree-view/TreeView.vue';
@@ -319,3 +319,5 @@ export { filePickerText } from './i18n/filePicker';
 export type { FilePickerText } from './i18n/filePicker';
 export { default as Link } from './components/primitives/link/Link.vue';
 export { default as KeyValueRow } from './components/composite/key-value-row/KeyValueRow.vue';
+export { default as DetailList } from './components/composite/detail-list/DetailList.vue';
+export type { DetailListItem } from './components/composite/detail-list/types';