@synopackageland/ui 0.10.3 → 0.10.5

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # Changelog
 
+## 0.10.5 (2026-10-17)
+
+- **Visible change:** `Checkbox`, `RadioGroup` and the `TreeView` checkbox use an 18 px box with a 9 px text gap (was 16 px and 8 px); the check, indeterminate dash and radio dot scale with the box. Labels use a 20 px line height and vertical `RadioGroup` / `CheckboxGroup` items have an 8 px gap: the net row pitch is 28 px (20 + 8), down from the intermediate 30 px. Tokens `--ui-choice-box-size`, `--ui-choice-box-gap`, `--ui-choice-box-offset` and `--ui-choice-stack-gap` control these sizes. Textless DataGrid selection boxes, including select-all, are centred without the inline line-box offset; the horizontal gap remains 34 px (`--ui-choice-inline-gap`).
+
+繁中摘要：**可見變更：**`Checkbox`、`RadioGroup` 與 `TreeView` 勾選框改為 18px、文字間距 9px（原 16px、8px），勾號、半選橫線及 radio 圓點隨框縮放。標籤行高 20px，直向 `RadioGroup`／`CheckboxGroup` 項目間距 8px，淨列距為 28px（20＋8），相較中間版本的 30px 減少 2px。新增尺寸、間距及 offset token；修正無文字的 DataGrid 選取框及表頭全選框受行框影響而偏上的問題，維持儲存格置中，橫向間距維持 34px。App 升級後可移除僅為分隔 checkbox 加入的 margin，並檢查以舊框尺寸或列高寫死的樣式。
+
+## 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.

package/README.md

@@ -379,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/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';