@synopackageland/ui 0.17.13 → 0.17.15

package/docs/layout-rules.md

@@ -29,18 +29,38 @@ These rules keep pages built from `@synopackageland/ui` consistent. The componen
 - Labels sit above their controls (`Form direction="vertical"`), except in short DSM-style dialogs.
 - Size a field by its content: number fields are 128px; text fields use `fieldWidth`. Put two short fields side by side rather than stretching one across the page.
 - A checkbox's text sits on the same line as its box. Do not apply `display: grid` to `label` in App CSS; `Checkbox` renders its own label.
+- For 2–4 mutually exclusive settings, use `RadioGroup` (vertical by default, `orientation="horizontal"` when labels fit). In a wizard step, `variant="card"` draws the options as choice cards with an optional `icon` each. A checkbox enables an independent option; a switch turns a feature on or off immediately. Keep the circular radio with a dot, square checkbox with a tick, and pill switch with a moving thumb.
+- Reserve `SegmentControl` for toolbar view switching: its selected item is a primary-filled capsule. `variant="sheet"` and `SectionTabs` are navigation tabs. Do not use either as a form value selector.
 - Choices side by side are 34px apart (`--ui-choice-inline-gap`, DSM's Task Scheduler) and share one top whether checked or not. For a set of checkboxes use `CheckboxGroup` (`orientation="horizontal"` for a row, `v-model` an array of values), as `RadioGroup` for one choice; Checkboxes written one after another get the same gap. Do not add margins between them.
 - A password field has a show/hide toggle; `Input type="password"` adds it.
 - Show a NAS path with `PathDisplay`, not a read-only input. It truncates from the start, shows the full path in a tooltip when it is cut, and offers copy. In a table cell use `display="name"`: the folder's name on one line, the full path always in its tooltip, copy still copies the full path.
 
+### Settings choice example
+
+```vue
+<FormItem label="Domain and LDAP people">
+  <RadioGroup
+    v-model="directoryReadMode"
+    :options="[
+      { value: 'lookup', label: 'When someone looks them up' },
+      { value: 'never', label: 'Not read' },
+    ]"
+  />
+</FormItem>
+```
+
+The setting is a form value, saved with the page's Apply action. It does not navigate between views.
+
 ## Settings pages
 
+- Use `<SectionTabs fill keep-mounted>` for settings with local unsaved drafts. `keep-mounted` mounts every supplied item panel immediately and hides inactive panels with `v-show`; their effects stay active. Without it, switching tabs unmounts the previous panel. `fill` alone only controls layout. Keep persistent business data and background work in the app when needed.
+- `SettingsPage` spaces direct sibling `SettingsSection`s by `--ui-space-6` (24px); place them directly in its default slot without a `Space` wrapper. `Fieldset` keeps its own DSM spacing.
 - A settings page has one label column. `FormItem` (horizontal), `SettingsRow` and `KeyValueRow` share `--ui-label-column` (`--ui-label-width`, at most 40% of a narrow row) and `--ui-label-gap`, so SDK panels and App rows line up; `FormActions inset` starts at the same edge. Labels and `KeyValueRow` values break between words, not inside one. Do not pass a different `labelWidth` per section.
 - Labels sit left in the column, as on DSM's own settings pages: the eye runs down one edge, and a long label wraps instead of pushing the value.
 - Colours are fixed by role: section title `--ui-text` semibold 14px, label and value `--ui-text`, help text `--ui-text-secondary` 12px.
 - A `SettingsRow` with a `description` aligns its label with the control's first line, not the middle of control and description.
 - A row that is only a button: give it a `SettingsRow` label when it acts on one thing, or put it in the section `#footer`. Inside a horizontal form, use `FormActions inset` so the button starts on the value edge.
-- A DSM-native settings page reads its structure from indentation and spacing (Control Panel > Security; measurements in [dsm-native-metrics.md](dsm-native-metrics.md#settings-page-control-panel--security-network)). Each section is a `Fieldset`: a 15px blue title over a dashed divider across the whole width, no chevron (`collapsible` adds one, as Control Panel > Network). The title text and the fields start 8px in; the next section's title follows 8px after the body. A one-line explanation of the section is the Fieldset's `description`, directly under the title and across the whole width, not in the label column. Fields are one `Form` with one `labelWidth` (or the theme's column) and `FormItem`s; one `Form` may hold several Fieldsets.
+- A DSM-native settings page reads its structure from indentation and spacing (Control Panel > Security; measurements in [dsm-native-metrics.md](dsm-native-metrics.md#settings-page-control-panel--security-network)). Each section is a `Fieldset`: a 15px blue title over a dashed divider across the whole width, collapsible and expanded by default, with a chevron pointing up when expanded and down when collapsed (as Control Panel > Network). Use `:collapsible="false"` for a fixed section without a chevron (as Control Panel > Security). The title text and the fields start 8px in; the next section's title follows 8px after the body. A one-line explanation of the section is the Fieldset's `description`, directly under the title and across the whole width, not in the label column. Fields are one `Form` with one `labelWidth` (or the theme's column) and `FormItem`s; one `Form` may hold several Fieldsets.
 - A checkbox option is a `FormItem :label="false"` with a `Checkbox`: the box sits on the section's left edge and its help text (`description`) is a line of its own under the label text. Do not put a label beside a checkbox or a switch that already says what it does.
 - A read-only value is a `FormItem` with `text-only`: plain text in the control column, level with its label. A button that acts on it (Edit) goes in the item's `#after` slot and follows the field column.
 - Options that only matter while a checkbox or switch is on go in a `FormGroup` right after it, with `:disabled="!on"`. The parent is a `FormItem :label="false"`, so it starts at the section's left edge. The group indents one 28px step, disables and dims every control inside, and the labels inside give up the indent so the controls stay on the form's column, as DSM draws them. Nest a `FormGroup` for a second level. Do not indent with your own padding or disable each child by hand.
@@ -65,7 +85,7 @@ These rules keep pages built from `@synopackageland/ui` consistent. The componen
 ## Fields
 
 - A field with buttons acting on it (a URL and its Install button) goes in `InputGroup`: one line, 8px gap, the field takes the room left.
-- Stack page sections with `Space direction="column"` and a pixel `spacing`; add `wrap` to a row of tags or buttons that may run out of room.
+- Outside `SettingsPage`, stack page sections with `Space direction="column"` and a pixel `spacing`; add `wrap` to a row of tags or buttons that may run out of room.
 
 ## Numbers and times
 

package/docs/wizard.md

@@ -53,6 +53,12 @@ const open = ref(false)
 - **Text.** `description` is one short line at the top of the step, under the
   hero, without a closing period. Keep the content to the controls the step
   needs; it may be wide (a row of cards) or a form.
+- **Choices.** A step's 2–4 options are choice cards:
+  `<RadioGroup variant="card" orientation="horizontal" :options>`. Each card
+  shows the option's `icon` in a tile, its label and one line, and keeps the
+  radio dot; the whole card picks it and the chosen card takes the primary
+  border and a soft fill. The cards share the row (180px at least) and wrap
+  in a narrow window.
 - **Types.** `welcome` offers only Start; `done` drops Back and Cancel, fills
   the progress and turns the main action into Finish. The last step without
   `next-step-key` turns it into Apply.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@synopackageland/ui",
-  "version": "0.17.13",
+  "version": "0.17.15",
   "description": "Shared Vue 3 UI component library with a DSM 7 inspired application theme",
   "license": "MIT",
   "type": "module",
@@ -52,6 +52,48 @@
     "./themes/dsm7-embedded-reset.css": "./dist/themes/dsm7-embedded-reset.css",
     "./themes/dsm7-embedded-theme.css": "./dist/themes/dsm7-embedded-theme.css"
   },
+  "scripts": {
+    "dev": "vite build --watch",
+    "build": "vite build && vite build --mode json && vite build --mode rich-text && vite build --mode cli && vite build --mode preview && vite build --mode embedded && node scripts/postbuild.mjs",
+    "lint": "eslint .",
+    "typecheck": "vue-tsc --noEmit -p tsconfig.json",
+    "test": "vitest run",
+    "test:watch": "vitest",
+    "test:changed": "echo \"test:changed skips the tests the changes since ${SYNOPKGLAND_GATE_BASE:-origin/master} do not reach (vitest --changed); pnpm check runs them all\" && vitest run --changed ${SYNOPKGLAND_GATE_BASE:-origin/master}",
+    "story": "histoire dev",
+    "story:build": "histoire build",
+    "check:host": "node scripts/dsm-host-shots.mjs",
+    "check:switch": "node scripts/check-switch.mjs",
+    "check:tabs": "node scripts/check-tabs.mjs",
+    "check:narrow": "node scripts/check-narrow-controls.mjs",
+    "check:responsive": "node scripts/check-responsive.mjs",
+    "check:adaptive": "node scripts/check-adaptive.mjs",
+    "check:sidebar-focus": "node scripts/check-sidebar-focus.mjs",
+    "check:json-render": "node scripts/check-json-render.mjs",
+    "check:motion": "node scripts/check-motion.mjs",
+    "check:topology": "node scripts/check-topology.mjs",
+    "check:wizard": "node scripts/check-wizard.mjs",
+    "check:edges": "node scripts/check-edges.mjs",
+    "check:data-grid": "node scripts/check-data-grid.mjs",
+    "check:truncation": "node scripts/check-truncation.mjs",
+    "check:link": "node scripts/check-link.mjs",
+    "check:text-select": "node scripts/check-text-select.mjs",
+    "check:date-picker": "node scripts/check-date-picker.mjs",
+    "check:full-page": "node scripts/check-full-page.mjs",
+    "check:internal": "node --test scripts/check-internal-content.test.mjs scripts/check-npm-metadata.test.mjs && node scripts/check-internal-content.mjs --repo .",
+    "check:npm-metadata": "node scripts/check-npm-metadata.mjs",
+    "check:package": "node scripts/check-package-content.mjs",
+    "notices:update": "node scripts/third-party-notices.mjs --write",
+    "notices:check": "node scripts/third-party-notices.mjs --check",
+    "check": "bash scripts/docker-check.sh 'pnpm check:internal && pnpm build && node scripts/run-parallel.mjs lint typecheck test && pnpm check:package'",
+    "check:fast": "bash scripts/docker-check.sh 'pnpm check:internal && pnpm build && node scripts/run-parallel.mjs lint typecheck test:changed && pnpm check:package'",
+    "check:local-browser": "node scripts/app-local-browser.mjs",
+    "check:infotip": "node scripts/check-infotip.mjs",
+    "release:stage": "node scripts/stage-release.mjs",
+    "check:polish": "bash scripts/docker-check.sh --build --out .polish-shots 'node scripts/check-polish.mjs'",
+    "check:acceptance": "node scripts/check-acceptance.mjs",
+    "check:palette": "node scripts/check-palette.mjs"
+  },
   "peerDependencies": {
     "vue": "^3.5.0"
   },
@@ -71,9 +113,42 @@
     "@tiptap/vue-3": "3.32.1",
     "zod": "^4.6.5"
   },
+  "devDependencies": {
+    "@eslint/js": "10.0.1",
+    "@histoire/plugin-vue": "1.0.0-beta.1",
+    "@tailwindcss/vite": "4.3.3",
+    "@vitejs/plugin-vue": "6.0.9",
+    "@vue/test-utils": "2.5.1",
+    "eslint": "10.11.0",
+    "eslint-plugin-vue": "10.11.1",
+    "flexsearch": "0.8.212",
+    "globals": "17.12.0",
+    "histoire": "1.0.0-beta.1",
+    "jsdom": "30.1.1",
+    "playwright": "1.58.2",
+    "reka-ui": "2.10.5",
+    "tailwindcss": "4.3.3",
+    "typescript": "5.9.3",
+    "typescript-eslint": "8.71.0",
+    "vite": "7.3.6",
+    "vite-plugin-dts": "5.1.1",
+    "vitest": "5.0.2",
+    "vscode-oniguruma": "2.0.1",
+    "vscode-textmate": "9.3.2",
+    "vue": "3.5.43",
+    "vue-eslint-parser": "10.4.1",
+    "vue-tsc": "3.3.11"
+  },
   "engines": {
     "node": ">=20"
   },
+  "packageManager": "pnpm@10.33.2",
+  "pnpm": {
+    "onlyBuiltDependencies": [
+      "esbuild",
+      "vue-demi"
+    ]
+  },
   "config": {
     "bundledRuntime": {
       "reka-ui": "2.10.5"