@synopackageland/ui 0.12.2 → 0.12.4

package/CHANGELOG.md

@@ -1,10 +1,25 @@
 # Changelog
 
-## 0.12.2 (unreleased)
+## 0.12.4 (2026-10-20)
+
+- Full-page (`web`) layout is flush and compact: the page content sits straight beside the sidebar and under the toolbar, with the same page padding as a DSM window (16px), the DSM window section and field gaps, and the page header's bottom space. The rounded page card around `PageContent` (its border, background, shadow, outer margin and inner padding) is gone for `surface="auto"` and `surface="card"`, and content starts at the left edge instead of centring when capped by `width`. An `AppToolbar` lines up with the page content. `surface="flat"` keeps the canvas behind its own cards. DSM-window and phone layouts are unchanged.
+- New browser check `pnpm check:full-page` (screenshots in en and zh-TW, full page and DSM window, from phone to wide).
+- Visible changes for apps: full-page apps at 1200px or wider show more content and no outer card. An app that relied on the card's inner padding for its own spacing gets the DSM window padding instead; an app that set `--ui-page-padding-x` or `--ui-page-padding-y` keeps its values.
+
+## 0.12.3 (2026-10-19)
+
+- Cut text shows its whole text in the UI tooltip, and only when it is cut. A `DataGrid` cell or header that ends in "…" opens a tooltip after the hover delay, or at once on keyboard focus, measured at that moment (`scrollWidth > clientWidth`), so a resized column is right and a large grid adds no observer per cell. It finds the cut text inside rich cells too: a `CellText` link, a `PathDisplay` folder (icon and name), a `CellStatus` label. A cell that fits shows nothing. The native `title` on grid cells, headers, `CellText`, `CellStatus` and `PathDisplay` is gone, so one tooltip shows, not two.
+- New `DataGridColumn.tooltip`: `false` turns the cell tooltip off for a column, a function `(row) => string` names the whole text itself. `headerTooltip: false` does the same for the header. An element in a cell can set `data-ui-tooltip-text` (its whole text), `data-ui-tooltip-hint` (a tooltip it shows even when not cut) or `data-ui-tooltip-off`; an element with its own `title` keeps it.
+- New `OverflowTooltip` (exported): the same behaviour for an app's own list or region; wrap it, or point `target` at its element.
+- `CellText` with `openLabel` shows the action in the UI tooltip, after the whole name when the name is cut. `PathDisplay display="name"` still names the whole path on hover; the framed path only when it is cut.
+- `MultipleSelect` and `SuperboxSelect` lists: every row has a checkbox at the left, checked when chosen; the row under the pointer or keyboard gets a neutral grey tint (`--ui-neutral-soft`) and keeps its text colour, no more blue text on blue. "+N" is a quiet count chip whose tooltip names the hidden values, one per line; a cut tag names itself. `Select` and the single `Combobox`: the chosen row keeps its check and the selected tint, the active row the same grey tint, never blue text.
+- New browser check `pnpm check:truncation` (before/after screenshots in en and zh-TW).
+- Visible changes for apps: tooltips on cut cells and headers; the select lists described above. An app that set its own `title` on a cell slot keeps it; it can drop it now.
+
+## 0.12.2 (2026-10-19)
 
 - Remove environment-specific release notes and source comments from distributed content.
 - Prepare npm releases from a clean package directory without local archive references.
-- 清理發佈內容中的環境識別敘述；以乾淨套件目錄準備 npm 發佈。
 
 ## 0.12.1 (2026-10-19)
 

package/dist/components/app/app-layout/AppLayout.vue.d.ts

@@ -4,7 +4,7 @@ type __VLS_Props = {
     minHeight?: string;
     /** Disable responsive layout if an application deliberately manages it itself. */
     responsive?: boolean;
-    /** `web` opts a full-page Portal into the spacious layout at 1200px or wider; DSM windows keep `window`. */
+    /** `web` opts a full-page Portal into the full-page layout at 1200px or wider; DSM windows keep `window`. */
     wideLayout?: WideLayout;
     /** Remembers the web sidebar's width and collapse under `${key}:app-sidebar`; use an app-unique key. */
     sidebarStorageKey?: string;

package/dist/components/app/page-content/PageContent.vue.d.ts

@@ -4,7 +4,7 @@ type __VLS_Props = {
      * `--ui-page-readable-width`; any other value is a CSS maximum width.
      */
     width?: 'fill' | 'readable' | (string & {});
-    /** Web/portal mode uses a page surface by default. Set flat for card-based dashboards. */
+    /** Web/portal mode puts the page flush on a white content area (`auto`, `card`). Set flat for card-based dashboards on the canvas. */
     surface?: 'auto' | 'flat' | 'card';
     /**
      * `'fill'` takes the container's height and does not scroll: the header,

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

@@ -15,6 +15,14 @@ export type DataGridColumn = {
     flex?: number;
     /** Wraps the cell text instead of cutting it to one line with an ellipsis. */
     wrap?: boolean;
+    /**
+     * A cell cut with an ellipsis shows its whole text in a tooltip on hover or
+     * keyboard focus. `false` turns that off for this column's cells; a function
+     * names the whole text itself (a link or a rich cell).
+     */
+    tooltip?: boolean | ((row: Record<string, unknown>) => string | undefined);
+    /** `false` keeps a cut header label from naming itself in a tooltip. */
+    headerTooltip?: boolean;
     /** `false` keeps the column shown: the column chooser cannot hide it. */
     hideable?: boolean;
     /** Starts hidden; the user can show it from the column chooser. */

package/dist/components/composite/tree-view/TreeView.vue.d.ts

@@ -42,11 +42,11 @@ declare const __VLS_base: import('vue').DefineComponent<__VLS_Props, {
 }, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
     select: (node: TreeNode) => any;
     "update:modelValue": (value: string | string[] | undefined) => any;
-    "update:checkedKeys": (value: string[]) => any;
     load: (payload: {
         node: TreeNode;
         children: TreeNode[];
     }) => any;
+    "update:checkedKeys": (value: string[]) => any;
     reorder: (payload: {
         node: TreeNode;
         target: TreeNode;
@@ -61,11 +61,11 @@ declare const __VLS_base: import('vue').DefineComponent<__VLS_Props, {
 }, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{
     onSelect?: ((node: TreeNode) => any) | undefined;
     "onUpdate:modelValue"?: ((value: string | string[] | undefined) => any) | undefined;
-    "onUpdate:checkedKeys"?: ((value: string[]) => any) | undefined;
     onLoad?: ((payload: {
         node: TreeNode;
         children: TreeNode[];
     }) => any) | undefined;
+    "onUpdate:checkedKeys"?: ((value: string[]) => any) | undefined;
     onReorder?: ((payload: {
         node: TreeNode;
         target: TreeNode;

package/dist/components/feedback/notification/Notification.vue.d.ts

@@ -32,9 +32,9 @@ declare const __VLS_base: import('vue').DefineComponent<__VLS_Props, {}, {}, {},
 }>, {
     title: string | false;
     open: boolean;
-    tone: NotificationTone;
-    content: string | false;
     cancel: NotificationAction;
+    content: string | false;
+    tone: NotificationTone;
     duration: number | false;
     confirm: NotificationAction;
     paused: boolean;

package/dist/components/primitives/tooltip/OverflowTooltip.vue.d.ts

@@ -0,0 +1,30 @@
+import { CutText } from '../../../lib/truncation';
+type __VLS_Props = {
+    /** The region's element; without it the tooltip wraps its slot. */
+    target?: HTMLElement | null;
+    side?: 'top' | 'right' | 'bottom' | 'left';
+    /** `start` lines the tooltip up with the start of the cut text it completes. */
+    align?: 'start' | 'center' | 'end';
+    delay?: number;
+    /** Replaces the whole text of a cut element; `false` shows nothing for it. */
+    resolve?: (found: CutText) => string | false | undefined;
+};
+declare var __VLS_1: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_1) => any;
+};
+declare const __VLS_base: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    target: HTMLElement | null;
+    side: "top" | "right" | "bottom" | "left";
+    align: "start" | "center" | "end";
+    delay: number;
+    resolve: (found: CutText) => string | false | undefined;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/components/primitives/tooltip/tooltipStyle.d.ts

@@ -0,0 +1 @@
+export declare const TOOLTIP_CONTENT_CLASS = "z-[1100] max-w-72 rounded-[var(--ui-radius-sm)] bg-[var(--ui-tooltip-bg)] px-2.5 py-1.5 text-[12px] leading-4 text-[var(--ui-tooltip-fg)] whitespace-pre-line shadow-[var(--ui-shadow-menu)] [overflow-wrap:anywhere] animate-[ui-fade-in_var(--ui-motion-fast)_var(--ui-motion-ease)]";

package/dist/index.d.ts

@@ -34,6 +34,7 @@ export { default as Skeleton } from './components/primitives/skeleton/Skeleton.v
 export { default as SectionSkeleton } from './components/primitives/skeleton/SectionSkeleton.vue';
 export { default as Surface } from './components/primitives/surface/Surface.vue';
 export { default as Tooltip } from './components/primitives/tooltip/Tooltip.vue';
+export { default as OverflowTooltip } from './components/primitives/tooltip/OverflowTooltip.vue';
 export { default as Popover } from './components/primitives/popover/Popover.vue';
 export { default as DropdownMenu } from './components/primitives/dropdown-menu/DropdownMenu.vue';
 export type { DropdownMenuEntry } from './components/primitives/dropdown-menu/DropdownMenu.vue';