@synopackageland/ui 0.11.1 → 0.11.3

package/CHANGELOG.md

@@ -1,5 +1,22 @@
 # Changelog
 
+## 0.11.3 (2026-10-17)
+
+- Fixed: on an iPhone a Portal/standalone app opened with the desktop layout (a 200 px sidebar, the page cut off on the right). DSM sizes its Portal window to the ~980 px page before the app sets a device-width viewport and refits it only on a window resize, which iOS Safari does not fire for a viewport change. `ensureDeviceViewport()` now fires one `resize` on the next frame after it changes the viewport (and after it restores it), so the window narrows to the phone and the app reaches mobile mode.
+- A `wide-layout="web"` page (a full page) heads its sidebar with the app's logo and name at every width above a phone's, not only at 1200 px and wider: a Portal page with DSM's banner hidden has no title bar on a tablet or a narrow browser either. A DSM window still shows no brand.
+- Visible changes for apps: none to code. Apps on the SDK `AppShell` get both fixes once rebuilt on this version (SDK 0.13 accepts it; an app on SDK 0.12 first moves to 0.13).
+
+繁中摘要：修正 iPhone 開 Portal／獨立頁的 App 時呈現桌面版面（約 200px 側欄、內容被裁在右側）。DSM 在 App 設定 device-width viewport 之前就以約 980px 的頁面寬度建立 Portal 視窗，之後只在 window resize 時重新貼合，而 iOS Safari 改 viewport 不會發出 resize。`ensureDeviceViewport()` 現在改了（或還原）viewport 後，會在下一個 frame 補發一次 `resize`，視窗因此縮到手機寬度，App 進入 mobile 模式。`wide-layout="web"`（整頁）在手機以上的所有寬度都在側欄頂端顯示 App 圖示與名稱，不再只限 1200px 以上：隱藏 DSM banner 的 Portal 在平板或窄瀏覽器上同樣沒有標題列。DSM 視窗仍不顯示。App 程式不必改；使用 SDK `AppShell` 的 App 以此版重 build 即可取得兩項修正（SDK 0.13 接受此版；仍用 SDK 0.12 的 App 須先升到 0.13）。
+
+## 0.11.2 (2026-10-17)
+
+- `PathDisplay display="name"` shows only the last segment of the path (`/volume1/downloads/` reads `downloads`) with the folder icon, unframed on one line, for a DataGrid cell: it never widens its column and keeps the row one height. The whole path is its `title` and is read to a screen reader as "Path: …" (new label, nine locales); the copy button still copies the whole path. The default `display="path"` is unchanged.
+- `CellStatus` takes a `description`: the label opens it in a UI `Tooltip` on hover or keyboard focus (the label becomes a Tab stop with a focus ring) instead of its own native `title`, so the two never stack. Without a description the cell is unchanged. JSON UI `CellStatus` takes `description` too.
+- `writeClipboard(text)` is exported: it tries the Clipboard API, falls back to the legacy copy command inside a DSM app window, and resolves `false` when the page cannot copy.
+- Visible changes for apps: none unless the new props are used. Download Hub can show its location column with `PathDisplay display="name"` and move a paused or failed row's reason into `CellStatus` `description` instead of the label's `title`; Studio Office and Reclaim can replace their own clipboard code with `writeClipboard`.
+
+繁中摘要：`PathDisplay` 新增 `display="name"`：只顯示路徑最後一層（`/volume1/downloads/` 顯示 `downloads`）加資料夾圖示，無外框、單行，適合放進 DataGrid 儲存格，不撐寬欄位、維持列高一致；hover 顯示完整路徑，螢幕報讀器讀出「路徑：…」（新 label，九語系），複製按鈕仍複製完整路徑。預設 `display="path"` 不變。`CellStatus` 新增 `description`：有值時標籤以 UI `Tooltip` 顯示說明（hover 或鍵盤 focus 皆可開啟，標籤可用 Tab 聚焦並有 focus ring），取代標籤本身的原生 `title`，不會疊出兩個 tooltip；沒有值時行為不變；JSON UI 的 `CellStatus` 也支援 `description`。新匯出 `writeClipboard(text)`：先用 Clipboard API，在 DSM App 視窗中改用舊式 copy 指令，無法複製時回傳 `false`。App 不使用新 prop 就沒有可見變更；Download Hub 可把存放位置欄改用 `PathDisplay display="name"`，並把暫停／失敗原因從標籤的 `title` 移到 `CellStatus` 的 `description`；Studio Office、Reclaim 可改用 `writeClipboard` 取代自寫的剪貼簿程式。
+
 ## 0.11.1 (2026-10-17)
 
 - Fill-height pages: `AppLayout height="fill"` takes its container's height (a DSM window) and scrolls its content area instead of the document; `PageContent height="fill"` keeps the page header, tabs and toolbar in place and lets its last child (a `DataGrid`, or a flex column holding one) take the height left. The grid scrolls its rows under its sticky header and its pager stays in view, so a 50-row page no longer pushes the pager far below. Both default to `height="auto"` (unchanged). The SDK's `AppShell` page `fill: true` does the same.

package/README.md

@@ -529,6 +529,14 @@ 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.
 - **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.
+
+  ```vue
+  <template #cell-location="{ row }"><PathDisplay :path="row.location" display="name" /></template>
+  <template #cell-status="{ row }">
+    <CellStatus :label="row.status" :tone="row.tone" :progress="row.progress" :description="row.reason" />
+  </template>
+  ```
 - **Sort.** Click a sortable header, or focus it and press Enter/Space (`aria-sort` is set). Cycle: ascending, descending, off. Leave `sort` unbound and the grid sorts itself (start with `default-sort`); bind `v-model:sort` to control it; with `:local-sort="false"` it only emits.
 - **Column chooser.** `column-chooser` adds a columns button at the right of the header: the user shows and hides columns and resets them. `hideable: false` keeps a column, `defaultHidden: true` starts one hidden; the last shown column cannot be hidden. Bind `v-model:hidden-columns` to control it. A click on a column toggles it and **keeps the menu open**, so several columns can be changed in a row; Reset, Escape or a click outside closes it.
 - **Column priority (narrow windows).** Give optional columns a `priority`: when the shown columns do not fit at their minimum widths (a fixed `width`, else `minWidth`), the grid leaves out the lowest priority first (the rightmost of a tie first) until the rest fits, so an 800px DSM window loses its least needed columns instead of scrolling sideways. A column without a `priority`, or with `hideable: false`, is never left out, so a grid of such columns still scrolls (a phone). A column left out for width is not hidden by the user: it is not saved, the quick filter still searches it, it returns when the window widens, and the chooser lists it unchecked with "Too narrow" (`labels.hiddenByWidth`). Checking it there shows it anyway for this view; the next lowest priority then makes room, or the grid scrolls.
@@ -771,6 +779,12 @@ with `B`, `KB`, `MB`, `GB`, `TB` labels and at most one decimal, so
 it. The same rule is exported as `formatFileSize(bytes)`; use it, or the same
 DSM labels, in application text that repeats a limit, rather than `GiB`/`MiB`.
 
+Copy text with `writeClipboard(text)`, which resolves `true` once copied and
+`false` when the page cannot copy. It tries the Clipboard API, which a DSM app
+window (a frame without `clipboard-write`) or a page outside a secure context
+refuses, then the legacy copy command; `navigator.clipboard.writeText` alone
+fails there. `PathDisplay` and `CopyCutField` use it.
+
 FilePicker retains browser `File[]` semantics. Built-in `locale` values are
 `en`, `zh-TW`, `zh-CN`, `ja`, `ko`, `de`, `fr`, `es`, `it`; an explicit picker
 locale overrides ConfigProvider. Its `text` accepts partial overrides of

package/dist/components/composite/path-display/PathDisplay.vue.d.ts

@@ -1,6 +1,8 @@
 type __VLS_Props = {
     path: string;
     copyable?: boolean;
+    /** `path` (default) shows the whole path in a frame; `name` only its last segment. */
+    display?: 'path' | 'name';
 };
 declare var __VLS_16: {};
 type __VLS_Slots = {} & {
@@ -13,6 +15,7 @@ declare const __VLS_base: import('vue').DefineComponent<__VLS_Props, {}, {}, {},
     onCopied?: ((path: string) => any) | undefined;
     onCopyFailed?: (() => any) | undefined;
 }>, {
+    display: "path" | "name";
     copyable: boolean;
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;

package/dist/components/composite/table-cell/CellStatus.vue.d.ts

@@ -5,10 +5,12 @@ type __VLS_Props = {
     /** 0–100 while running; leave unset when there is nothing to measure. */
     progress?: number;
     detail?: string;
+    /** Why the task is in this status (a reason, the next step), shown in a tooltip. */
+    description?: string;
 };
-declare var __VLS_11: {};
+declare var __VLS_17: {};
 type __VLS_Slots = {} & {
-    detail?: (props: typeof __VLS_11) => any;
+    detail?: (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<{}>, {
     progress: number;

package/dist/i18n/text.d.ts

@@ -149,6 +149,7 @@ export declare const englishUiText: {
     readonly "Show password": "Show password";
     readonly "Hide password": "Hide password";
     readonly "Copy path": "Copy path";
+    readonly "Path: {path}": "Path: {path}";
     readonly Copied: "Copied";
     readonly "Couldn't copy. Select the text and copy it manually.": "Couldn't copy. Select the text and copy it manually.";
 };

package/dist/index.d.ts

@@ -109,6 +109,7 @@ export { formatDateTime, formatDuration, formatPercent, formatRelativeTime } fro
 export type { DateTimeFormatOptions, FormatOptions } from './lib/format';
 export { resolveFieldWidth } from './lib/fieldWidth';
 export type { FieldWidth } from './lib/fieldWidth';
+export { writeClipboard } from './lib/clipboard';
 export { default as SettingsSection } from './components/composite/settings-section/SettingsSection.vue';
 export { default as Footbar } from './components/composite/footbar/Footbar.vue';
 export type { FootbarButton, FootbarButtonRegion, FootbarButtonSize, FootbarButtonVariant, } from './components/composite/footbar/types';