@synopackageland/ui 0.17.6 → 0.17.8
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 +28 -0
- package/README.md +53 -1
- package/dist/CollaborationDemo.vue.d.ts +6 -0
- package/dist/components/app/app-layout/AppLayout.vue.d.ts +2 -0
- package/dist/components/app/app-tab-bar/AppTabBar.vue.d.ts +37 -0
- package/dist/components/composite/comment-item/CommentInlineParts.vue.d.ts +7 -0
- package/dist/components/composite/comment-item/CommentItem.vue.d.ts +46 -0
- package/dist/components/composite/completion-toggle/CompletionToggle.vue.d.ts +26 -0
- package/dist/components/composite/form/Form.vue.d.ts +2 -0
- package/dist/components/composite/form/FormGroup.vue.d.ts +22 -0
- package/dist/components/composite/form-note/FormNote.vue.d.ts +19 -0
- package/dist/components/composite/info-box/InfoBox.vue.d.ts +17 -0
- package/dist/components/composite/mention-textarea/MentionTextarea.vue.d.ts +52 -0
- package/dist/components/composite/mention-textarea/PersonInitials.vue.d.ts +13 -0
- package/dist/composables/formGroup.d.ts +12 -0
- package/dist/composables/softKeyboard.d.ts +6 -0
- package/dist/i18n/text.d.ts +11 -0
- package/dist/index.d.ts +14 -0
- package/dist/index.js +12104 -11177
- package/dist/json-preview/preview.js +6826 -6688
- package/dist/lib/adaptiveLayout.d.ts +12 -0
- package/dist/lib/commentMarkdown.d.ts +34 -0
- package/dist/lib/mentions.d.ts +38 -0
- 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 +3 -0
- package/docs/theme-hooks.md +10 -0
- package/package.json +1 -1
package/docs/layout-rules.md
CHANGED
|
@@ -40,6 +40,9 @@ These rules keep pages built from `@synopackageland/ui` consistent. The componen
|
|
|
40
40
|
- Colours are fixed by role: section title `--ui-text` semibold 14px, label and value `--ui-text`, help text `--ui-text-secondary` 12px.
|
|
41
41
|
- A `SettingsRow` with a `description` aligns its label with the control's first line, not the middle of control and description.
|
|
42
42
|
- 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.
|
|
43
|
+
- A DSM-native settings page reads its structure from indentation and spacing. Each section is a `Fieldset` (blue title over a dashed divider, collapsible); sections one after another keep a 20px gap. Fields are a `Form` with one `labelWidth` (or the theme's column) and `FormItem`s.
|
|
44
|
+
- Options that only matter while a checkbox or switch is on go in a `FormGroup` right after it, with `:disabled="!on"`: one 28px indent, every control inside disabled and dimmed, and the labels inside give up the indent so the controls stay on the form's column. Nest a `FormGroup` for a second level. Do not indent with your own padding or disable each child by hand.
|
|
45
|
+
- Explanation is a short `description` under its field. A note the user should read before changing a section is a `FormNote` (DSM's teal "Note:" with bullets) after the fields; facts to read or copy (addresses, paths) go in an `InfoBox`. A warning or an error is a `Callout`. Do not write long full-width paragraphs between fields.
|
|
43
46
|
|
|
44
47
|
## Tables
|
|
45
48
|
|
package/docs/theme-hooks.md
CHANGED
|
@@ -93,8 +93,18 @@ here stay implementation details and can change in any release.
|
|
|
93
93
|
| `data-ui-stat-tile` | `StatTile` (`data-tone`; a filter tile also `data-state` `on` / `off`) | present |
|
|
94
94
|
| `data-ui-stat-tile-label`, `-value`, `-unit`, `-note` | `StatTile` parts | present |
|
|
95
95
|
| `data-ui-stat-tile-group` | `StatTileGroup` | present |
|
|
96
|
+
| `data-ui-fieldset` | `Fieldset` | present |
|
|
97
|
+
| `data-ui-form-group` | `FormGroup` (`data-disabled` while disabled) | present |
|
|
98
|
+
| `data-ui-form-note`, `data-ui-form-note-title` | `FormNote` and its heading | present |
|
|
99
|
+
| `data-ui-info-box`, `data-ui-info-box-title` | `InfoBox` and its title | present |
|
|
96
100
|
| `data-ui-stacked-bar`, `-track`, `-segment`, `-legend`, `-remainder` | `StackedBar` parts (a segment has `data-key` and `data-tone`) | present |
|
|
97
101
|
| `data-ui-section-tabs-row`, `data-ui-section-tabs-actions` | `SectionTabs` with `#actions`: the row and the actions | present |
|
|
102
|
+
| `data-ui-tab-bar` | `AppTabBar` (`data-hidden` while hidden) | present |
|
|
103
|
+
| `data-ui-tab-bar-item`, `-more`, `-label`, `-badge` | `AppTabBar` parts (an item's value is its key) | key / present |
|
|
104
|
+
| `--ui-tab-bar-height`, `--ui-tab-bar-bg`, `--ui-tab-bar-border` | `AppTabBar` height (56px), fill and top border | CSS tokens |
|
|
105
|
+
| `data-ui-completion-toggle` | `CompletionToggle` (`data-state` `idle` / `done`, `data-error`) | present |
|
|
106
|
+
| `data-ui-mention-textarea`, `-input`, `-count`, `-list`, `-option`, `-empty` | `MentionTextarea` parts (`data-over` past `maxlength`) | present |
|
|
107
|
+
| `data-ui-comment`, `-author`, `-time`, `-edited`, `-body`, `-mention`, `-link`, `-code`, `-list`, `-actions` | `CommentItem` parts (`data-deleted`, `data-highlighted`) | present |
|
|
98
108
|
| `data-tone` | `Callout` | `info`, `success`, `warning`, `danger` |
|
|
99
109
|
| `data-variant` | `Callout` | `soft`, `inline` |
|
|
100
110
|
| `data-fill` | `Callout` | present when it spans its container |
|