@synopackageland/ui 0.10.2 → 0.10.4

package/CHANGELOG.md

@@ -1,5 +1,27 @@
 # Changelog
 
+## 0.10.4 (2026-10-17)
+
+- Choices side by side are 34 px apart, as in DSM 7.4 (Task Scheduler's service action: a composite field's 6 px margin plus a 28 px indent; `--ui-choice-inline-gap`). Checkboxes written one after another get this gap after each box; before, the next box touched the previous label. A column of checkboxes is not indented.
+- A checked `Checkbox` no longer sits 2 px below an unchecked one in the same row: the box sits on the top of its line, as DSM's check wraps do. This also steadies the selection column of `DataGrid`.
+- New `CheckboxGroup`: `options` (`label`, `value`, `description`, `disabled`), `v-model` an array of values in option order, `orientation="vertical" | "horizontal"`, `disabled`. It is a FormItem's primary control, like `RadioGroup`.
+- **Visible change:** a horizontal `RadioGroup` spaces its options 34 px apart (was 20 px).
+- Visible changes for apps: rows of bare Checkboxes (Studio Office's role mapping) get their gap without app CSS. Remove margins added only to separate checkboxes, or use `CheckboxGroup orientation="horizontal"`.
+
+繁中摘要：並排的選項依 DSM 7.4 實測（任務排程「服務動作」：compositefield 6px 加 28px 縮排）相距 34px（`--ui-choice-inline-gap`）。連續寫的 Checkbox 會在每個 box 之後留這個間距，之前下一個 box 會貼著前一個文字；直向排列不會縮排。已勾選的 Checkbox 不再比未勾選的低 2px（改為對齊行頂，與 DSM 相同），DataGrid 選取欄也因此一致。新增 `CheckboxGroup`：`options`、`v-model` 為值陣列（依選項順序）、`orientation` vertical／horizontal、`disabled`，與 RadioGroup 一樣是 FormItem 的主要控制項。**可見變更：**horizontal RadioGroup 的選項間距由 20px 改為 34px。App 升級後，連續的 Checkbox（如 Studio Office 角色對應）不需自訂 CSS 即有間距；移除只為分開 checkbox 而加的 margin，或改用 `CheckboxGroup orientation="horizontal"`。
+
+## 0.10.3 (2026-10-16)
+
+- `Dialog` takes `size="sm" | "md" | "lg" | "xl"`: the DSM 7.4 dialog widths 450, 530, 740 and 860 px (`--ui-dialog-width-<size>`), measured on File Station's Create folder, Task Scheduler's Create task, Storage Manager's Data Scrubbing and a shared folder's Edit. An explicit `width` still wins. JSON UI `Dialog` takes `size` too.
+- A content-sized `Dialog` holding a `Textarea` opens at least `md` (530 px) wide, and one holding a row-wide `Input` at least `sm` (450 px), as DSM builds dialogs around such fields. A number field does not widen it. The floor never passes the maximum width.
+- Every dialog width, presets included, stays inside its DSM window less a 12 px margin, also when the dialog floats over the desktop (`dialogBounds: 'viewport'`, as the SDK's AppShell sets in a DSM window). A 760 px dialog in a 700 px window no longer overflows it.
+- A content-sized dialog can grow to the whole room it is given; before, its centring limited it to half its container's width.
+- A dialog with a title bar draws DSM's 3 px modal-window corner (`--ui-radius-window`); a message box without a title keeps 8 px (`--ui-radius-dialog`). Both measured on DSM 7.4.
+- On a phone-width app, the bottom sheet of an app-local dialog now runs edge to edge; it was 24 px short of the app.
+- Visible changes for apps: dialogs with a text area or text fields get wider, titled dialogs get squarer corners, and some content-sized dialogs grow up to 760 px. Download Hub's 新增下載 dialog needs no change: its text area makes it 530 px. Remove hard-coded dialog widths that only imitated DSM, and use `size` for a wide form.
+
+繁中摘要：Dialog 新增 `size`（sm 450／md 530／lg 740／xl 860px，依 DSM 7.4 實測），明確的 `width` 仍優先；JSON UI 的 Dialog 同樣支援。依內容決定寬度的 Dialog 內含 Textarea 時至少 530px、含整列 Input 時至少 450px（數字欄位不影響），不超過最大寬度。所有寬度（含 size）都夾在 DSM 視窗內寬減 12px 邊距內，浮在桌面上的對話框（SDK AppShell 在 DSM 視窗中的 `dialogBounds: 'viewport'`）也一樣；700px 視窗中的 760px 對話框不再溢出。依內容決定寬度的對話框不再因置中方式被限制在容器一半寬。有標題列的 Dialog 改用 DSM 模態視窗的 3px 圓角（`--ui-radius-window`），無標題的訊息框維持 8px。手機寬度下 app-local 對話框的底部面板改為滿版（先前比 App 窄 24px）。App 升級後：含文字區域／文字欄位的對話框變寬、有標題的對話框圓角變小、部分依內容決定寬度的對話框可寬到 760px。Download Hub 的「新增下載」不需修改即為 530px；移除只為模仿 DSM 而寫死的寬度，寬表單改用 `size`。
+
 ## 0.10.2 (2026-10-16)
 
 - A `PageHeader` inside `PageContent` no longer gets the section gap on top of its own bottom padding: the title sits 12 px above the content in a DSM window again (16 px on a phone, 24 px in the web layout), not 24 px.

package/README.md

@@ -257,10 +257,17 @@ const open = ref(false)
 </template>
 ```
 
-Without `width` the dialog sizes to its content between
+Without `width` or `size` the dialog sizes to its content between
 `--ui-dialog-min-width` (420px) and `--ui-dialog-max-width` (760px, or the
-`max-width` prop); a long paragraph wraps at the maximum. `width` sets a fixed
-width, capped to the viewport. A dialog with no title and no close button is a
+`max-width` prop); a long paragraph wraps at the maximum. A field without a
+width of its own raises that minimum to the DSM width of a dialog built around
+it: a `Textarea` to `md` (530px), a row-wide `Input` to `sm` (450px). `size`
+picks a fixed DSM dialog width: `sm` 450px (one field), `md` 530px (a form
+with a text area), `lg` 740px (a wide form), `xl` 860px (tabs of settings),
+as measured on DSM 7.4. `width` sets any
+fixed width and wins over `size`. Every width stays inside the room the
+container leaves: the viewport or the app less a margin, and in a DSM window
+the window itself, also when the dialog floats over the desktop. A dialog with no title and no close button is a
 question and takes DSM's message-box layout. Buttons in the `footer` slot are
 capsule `action` buttons (`kind="tool"` opts one out). `height` or
 `min-height` (for example `min-height="420px"`) keeps a panel with little
@@ -372,7 +379,7 @@ Primitives:
 
 - Button / IconButton
 - Input / Textarea
-- Checkbox / RadioGroup / Switch
+- Checkbox / CheckboxGroup / RadioGroup / Switch
 - Select
 - Badge / StatusDot / Separator / Spinner / LoadingMask / LoadingArea / Progress / Skeleton / Surface
 - SplitButton

package/dist/components/primitives/checkbox/CheckboxGroup.vue.d.ts

@@ -0,0 +1,23 @@
+export type CheckboxOption = {
+    label: string;
+    value: string;
+    description?: string;
+    disabled?: boolean;
+};
+type __VLS_Props = {
+    modelValue?: string[];
+    options: CheckboxOption[];
+    orientation?: 'vertical' | 'horizontal';
+    disabled?: boolean;
+};
+declare const __VLS_export: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    "update:modelValue": (value: string[]) => any;
+}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{
+    "onUpdate:modelValue"?: ((value: string[]) => any) | undefined;
+}>, {
+    disabled: boolean;
+    modelValue: string[];
+    orientation: "vertical" | "horizontal";
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/components/primitives/dialog/Dialog.vue.d.ts

@@ -1,10 +1,13 @@
+import { DialogSize } from './dialogSize';
 type __VLS_Props = {
     open?: boolean;
     defaultOpen?: boolean;
     title?: string;
     description?: string;
-    /** A fixed width, capped to the viewport. Without it the dialog sizes to its content. */
+    /** A fixed width, capped to the room the app window leaves. Without it (or `size`) the dialog sizes to its content. */
     width?: string;
+    /** A fixed DSM dialog width (`--ui-dialog-width-<size>`), capped like `width`; `width` wins over it. */
+    size?: DialogSize;
     /** The widest a content-sized dialog grows (default `--ui-dialog-max-width`). */
     maxWidth?: string;
     /** A fixed panel height, capped to the available height. */

package/dist/components/primitives/dialog/dialogSize.d.ts

@@ -0,0 +1,12 @@
+import { ComputedRef } from 'vue';
+/** A Dialog width preset: one of the dialog widths DSM 7 itself uses (`--ui-dialog-width-<size>`). */
+export type DialogSize = 'sm' | 'md' | 'lg' | 'xl';
+/**
+ * The narrowest DSM dialog width the fields in a dialog ask for: the widest
+ * of their wishes, or undefined. A field without a width of its own (a text
+ * area, a row-wide input) would otherwise shrink to a content-sized dialog's
+ * minimum.
+ */
+export declare function provideDialogContentWidth(): ComputedRef<DialogSize | undefined>;
+/** Asks the dialog a field is in, if any, to be at least `size` wide while the field is shown. */
+export declare function useDialogContentWidth(size: () => DialogSize | undefined): void;

package/dist/index.d.ts

@@ -11,6 +11,8 @@ export type { SliderInputOptions } from './components/primitives/slider/Slider.v
 export { default as ColorPicker } from './components/primitives/color-picker/ColorPicker.vue';
 export type { ColorPickerFormat, ColorSwatch } from './components/primitives/color-picker/ColorPicker.vue';
 export { default as Checkbox } from './components/primitives/checkbox/Checkbox.vue';
+export { default as CheckboxGroup } from './components/primitives/checkbox/CheckboxGroup.vue';
+export type { CheckboxOption } from './components/primitives/checkbox/CheckboxGroup.vue';
 export { default as Switch } from './components/primitives/switch/Switch.vue';
 export { default as RadioGroup } from './components/primitives/radio-group/RadioGroup.vue';
 export type { RadioOption } from './components/primitives/radio-group/RadioGroup.vue';
@@ -40,6 +42,7 @@ export { default as SplitButton } from './components/primitives/split-button/Spl
 export { default as ContextMenu } from './components/primitives/context-menu/ContextMenu.vue';
 export type { ContextMenuEntry } from './components/primitives/context-menu/types';
 export { default as Dialog } from './components/primitives/dialog/Dialog.vue';
+export type { DialogSize } from './components/primitives/dialog/dialogSize';
 export { default as Sheet, default as Drawer } from './components/primitives/sheet/Sheet.vue';
 export { default as DatePicker } from './components/primitives/date-picker/DatePicker.vue';
 export type { DateFormat, DateTimeParts, TimeFormat } from './components/primitives/date-picker/dateTime';