@synopackageland/ui 0.19.4 → 0.19.6
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +9 -0
- package/dist/components/composite/form/FormItem.vue.d.ts +2 -0
- package/dist/index.js +100 -93
- package/dist/json-preview/preview.js +840 -833
- package/dist/reka-runtime.json +1 -1
- package/dist/theme.css +1 -1
- package/dist/themes/dsm7-embedded-theme.css +1 -1
- package/dist/themes/dsm7-embedded.css +1 -1
- package/dist/themes/dsm7.css +1 -1
- package/docs/layout-rules.md +1 -0
- package/package.json +1 -1
package/docs/layout-rules.md
CHANGED
|
@@ -63,6 +63,7 @@ The setting is a form value, saved with the page's Apply action. It does not nav
|
|
|
63
63
|
- 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.
|
|
64
64
|
- 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.
|
|
65
65
|
- 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.
|
|
66
|
+
- A row without a label that belongs to the field above it - the exposure consent that unlocks the button under it, a name conflict, the error a start came back with - takes `FormItem inset`: it starts on the value column with the field, `FormActions inset` and `FormNote inset`, and drops back to the edge when the form stacks its labels. Do not give the row its own padding.
|
|
66
67
|
- 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.
|
|
67
68
|
- 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.
|
|
68
69
|
- A section button such as Advanced Settings goes inside the `FormGroup` it belongs to, after its fields, as a plain `Button`: it starts on the group's indent and follows the group's disabled state. Do not centre it or put it in the label column.
|