@synopackageland/ui 0.12.0 → 0.12.1

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # Changelog
 
+## 0.12.1 (2026-10-19)
+
+- Fix the development/workbench Reka patch loader reading Vite version query strings as part of a filename.
+
+- Fix: an app-local `AppRoot` with `dialog-bounds="viewport"` no longer throws `style is not iterable` where a `CSSStyleDeclaration` has no iterator (jsdom 27 and other older engines): the floating host reads the accent properties by index. Apps on jsdom 27 no longer need a jsdom upgrade to run their tests.
+- `DataGrid` and `DataTable` columns take a `type`: `text` (default), `number`, `date` or `actions`, and the JSON catalog's table column does too. The type sets the alignment the DSM way: every column left, header and cells alike, as File Station, Drive, Resource Monitor and Container Manager do; `number` and `date` cells use tabular digits; an `actions` cell lays out its buttons from the left with one gap, the first icon under the header text. `align` still overrides it, and `align: 'right'` still gives tabular digits. `TableColumnType` and `TableColumnAlign` are exported. Visible change for apps: none until a column sets `type`; an app that right-aligned numbers can switch to `type: 'number'`.
+- Fix: in an app-local `AppRoot` (`modal-scope="app"`), a mouse click on a control, such as a sidebar row, no longer draws the keyboard focus ring. The click now focuses the control without `:focus-visible`; Tab and arrow focus still show the ring. New browser check `pnpm check:sidebar-focus`.
+
 ## 0.12.0 (2026-10-18)
 
 - Colours come from five 12-step scales built from DSM 7's colours (`--ui-gray-*`, `--ui-blue-*`, `--ui-green-*`, `--ui-orange-*`, `--ui-red-*`, each with translucent `-a` steps, and `--ui-accent-*`), and every semantic token is now one step of a scale ([colour system](docs/color-system.md)). No token was renamed or removed. A few values changed so every text step reads at AA on its fills: `--ui-text-secondary` 78% → 82%, `--ui-danger-text` `#a81b1b`, the soft tone fills 10% of their tone, `--ui-surface-subtle`, `--ui-control-track` and `--ui-control-divider` one step of the grey scale. `--ui-info-soft` no longer follows `--ui-primary-soft`, and `--ui-info-text` no longer follows `--ui-primary-active` overrides. `--ui-selection` is deprecated (unused; use `--ui-surface-selected`).
@@ -183,8 +191,8 @@ No existing token was renamed or removed. These values change from 0.11.5; scale
 
 ## 0.9.7 (2026-10-14)
 
-Fixes from the t-0496 re-verification on DSM. **Behavior change:** a `Space` row packs its items at the start instead of centring them.
-修正 t-0496 DSM 複驗發現的問題。**行為變更：** `Space` 列的項目改為靠起點排列，不再置中。
+Fixes from the re-verification on DSM. **Behavior change:** a `Space` row packs its items at the start instead of centring them.
+修正 DSM 複驗發現的問題。**行為變更：** `Space` 列的項目改為靠起點排列，不再置中。
 
 - A `Space` row packs its items at the start of the line (`justify-content: flex-start`); before, it centred them, and every app had to add `justify-content="start"`. Pass `justify-content="center"` for the old layout.
 - `Space` 列的項目靠行首排列（`justify-content: flex-start`）；先前預設置中，每個 App 都得加上 `justify-content="start"`。需要舊版排列時傳入 `justify-content="center"`。

package/README.md

@@ -537,9 +537,9 @@ phone; use `DataGrid` for anything a user searches or arranges.
 <DataGrid
   :columns="[
     { key: 'name', label: '名稱', sortable: true, flex: 2, minWidth: 200, hideable: false },
-    { key: 'size', label: '大小', sortable: true, width: 90, align: 'right' },
+    { key: 'size', label: '大小', sortable: true, width: 90, type: 'number' },
     { key: 'location', label: '存放位置', minWidth: 120 },
-    { key: 'started', label: '開始時間', sortable: true, width: 140, defaultHidden: true },
+    { key: 'started', label: '開始時間', sortable: true, width: 140, type: 'date', defaultHidden: true },
   ]"
   :rows="rows"
   :filter="filter"
@@ -554,6 +554,7 @@ phone; use `DataGrid` for anything a user searches or arranges.
 ```
 
 - **Column widths.** A column with `width` (px, or a percentage of the grid) keeps it; a column without one is flexible and shares the rest by `flex` (default 1), never below its `minWidth` (default 80px for a flexible column, 40px for a fixed one). A long text cannot widen its column, and a header never wraps. When the minimums do not fit (a phone), the grid scrolls sideways instead of squeezing.
+- **Alignment.** Give a column a `type` instead of aligning it: `text` (the default), `number` (a size, a percentage, a speed, a count, a duration), `date`, or `actions` (a row of icon buttons). As in DSM's own grids (File Station, Drive, Resource Monitor, Container Manager), every column sits left, its header with it; `number` and `date` give their digits one width so they line up down the column, and `actions` lays its buttons out from the left with one gap, the first icon under the header's text (put the `IconButton`s straight in the `#cell-<key>` slot). The selection checkbox is centred. A `—` placeholder sits where the column's values do. `align` still overrides the type. `DataTable` takes the same `type`.
 - **Long text.** A plain cell is cut to one line with an ellipsis and shows its full text on hover (`title`); `wrap: true` wraps a column instead. A `#cell-<key>` slot renders its own content: `CellText` cuts and titles it the same way. Every body cell, a slot's included, carries `data-column="<key>"`.
 - **Row height.** Rows are one height (28px, 24px compact). `CellStatus` with a running `progress` fits it (a 4px bar under the label); its `detail` adds a line, so put speed or a reason in its own column. Dates: `formatDateTime(value, { locale, style: 'compact' })` in the cell (this year: `10/17 14:32`, `Oct 17, 2:32 PM`; another year: the date with its year, `2025/3/2`, `Mar 2, 2025`) and the full `formatDateTime(value, { locale })` as its `title`; it fits a 140px column in every built-in locale.
 - **Folders and status reasons.** Show a folder in a cell with `PathDisplay display="name"`: the folder icon and the last segment of the path on one unframed line (`/volume1/downloads/` reads `downloads`), cut at its end, the whole path as its `title` and read to a screen reader ("Path: …", nine locales); the copy button still copies the whole path. The default `display="path"` is the framed full path for forms. Give `CellStatus` a `description` to explain a status (why it failed, how to resume): the label opens it in a `Tooltip` on hover or keyboard focus (it becomes a Tab stop with a focus ring) and drops its own `title`, so two tooltips never stack; without one the cell is unchanged.

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

@@ -1,4 +1,5 @@
 import { DataGridLabels } from './labels';
+import { TableColumnAlign, TableColumnType } from './columnType';
 export type DataGridSort = {
     key: string;
     direction: 'asc' | 'desc';
@@ -28,7 +29,10 @@ export type DataGridColumn = {
     searchable?: boolean;
     /** The text the quick filter searches for a row; defaults to the cell value. */
     searchText?: (row: Record<string, unknown>) => string;
-    align?: 'left' | 'center' | 'right';
+    /** What the column holds; sets its alignment (see TableColumnType). Defaults to `text`. */
+    type?: TableColumnType;
+    /** Overrides the alignment the type sets. */
+    align?: TableColumnAlign;
     sortable?: boolean;
     /** Overrides the grid's `resizable` for this column. */
     resizable?: boolean;

package/dist/components/composite/data-grid/columnType.d.ts

@@ -0,0 +1,19 @@
+/**
+ * What a table column holds; it sets the column's alignment, so an App does
+ * not tune each column. As in DSM's own grids (File Station, Drive, Resource
+ * Monitor, Container Manager) every column sits left, numbers and dates too:
+ * `number` (a size, a percentage, a speed, a count, a duration) and `date`
+ * give their digits one width so they line up down the column; `actions`
+ * lays out its buttons in a row from the left edge, under the header's text.
+ */
+export type TableColumnType = 'text' | 'number' | 'date' | 'actions';
+export type TableColumnAlign = 'left' | 'center' | 'right';
+type TypedColumn = {
+    type?: TableColumnType;
+    align?: TableColumnAlign;
+};
+/** `align` overrides the type, for a column DSM itself aligns otherwise. */
+export declare function columnAlignClass(column: TypedColumn): "text-right" | "text-center" | "text-left";
+export declare function columnHasTabularDigits(column: TypedColumn): boolean;
+export declare const ACTIONS_CELL_CLASS = "-ml-1 flex items-center justify-start gap-1";
+export {};

package/dist/components/composite/data-table/DataTable.vue.d.ts

@@ -1,8 +1,12 @@
+import { TableColumnAlign, TableColumnType } from '../data-grid/columnType';
 export type DataTableColumn = {
     key: string;
     label: string;
     width?: string;
-    align?: 'left' | 'center' | 'right';
+    /** What the column holds; sets its alignment (see TableColumnType). Defaults to `text`. */
+    type?: TableColumnType;
+    /** Overrides the alignment the type sets. */
+    align?: TableColumnAlign;
 };
 type __VLS_Props = {
     columns: DataTableColumn[];
@@ -21,11 +25,17 @@ declare var __VLS_2: `cell-${string}`, __VLS_3: {
     row: Record<string, unknown>;
     value: unknown;
     column: DataTableColumn;
+}, __VLS_16: `cell-${string}`, __VLS_17: {
+    row: Record<string, unknown>;
+    value: unknown;
+    column: DataTableColumn;
 };
 type __VLS_Slots = {} & {
     [K in NonNullable<typeof __VLS_2>]?: (props: typeof __VLS_3) => any;
 } & {
     [K in NonNullable<typeof __VLS_12>]?: (props: typeof __VLS_13) => any;
+} & {
+    [K in NonNullable<typeof __VLS_16>]?: (props: typeof __VLS_17) => any;
 };
 declare const __VLS_base: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
     compact: boolean;

package/dist/index.d.ts

@@ -127,6 +127,7 @@ export { default as Statistic } from './components/composite/statistic/Statistic
 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 { 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';
 export type { TreeNode, TreeViewCheckPayload, TreeViewDraggableConfig, TreeViewPosition, TreeViewReorder } from './components/composite/tree-view/TreeView.vue';