@synopackageland/ui 0.17.0 → 0.17.1
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 +8 -0
- package/dist/components/composite/wizard/WizardDialog.vue.d.ts +3 -3
- package/dist/composables/inputModality.d.ts +2 -0
- package/dist/index.js +4496 -4487
- package/dist/json-preview/preview.js +2881 -2872
- 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/wizard.md +8 -3
- package/package.json +1 -1
package/docs/wizard.md
CHANGED
|
@@ -14,7 +14,7 @@ action together at the end, in the same place on every step.
|
|
|
14
14
|
|
|
15
15
|
| Component | Use |
|
|
16
16
|
| --- | --- |
|
|
17
|
-
| `WizardDialog` | The wizard in an app-local dialog
|
|
17
|
+
| `WizardDialog` | The wizard in an app-local dialog sized like DSM's wizard windows: 75% of the app's width (560–860px) and its height less 48px (600px at most), so the app shows around it; `width`, `height` or `size` set your own. Its `title` is the wizard's name, beside the close button; see [Modal](#modal). Other attributes and listeners go to the `Wizard`. |
|
|
18
18
|
| `Wizard` | The layout and the step flow, for a dialog of your own (`<Dialog flush>`) or a page (`framed`). |
|
|
19
19
|
| `WizardStep` | One step: its title (shown in the header), hero, one line, content, and the step's own footer actions. |
|
|
20
20
|
|
|
@@ -45,7 +45,10 @@ const open = ref(false)
|
|
|
45
45
|
shorter name for the step list (read by screen readers, and in the rail).
|
|
46
46
|
- **Hero.** The step opens with its hero: `icon` puts an icon tile beside the
|
|
47
47
|
step's line; the `#hero` slot puts a picture or a diagram on a stage; prefer
|
|
48
|
-
one there to a paragraph. A `
|
|
48
|
+
one there to a paragraph. A compact `ConnectionTopology` on the stage is a
|
|
49
|
+
centred row of three boxes of one width, without a frame of its own. A
|
|
50
|
+
short step with a hero takes a little of its free room above it (32px at
|
|
51
|
+
most) and leaves the rest below. A `type="done"` step shows a success mark that pops
|
|
49
52
|
in once, centred.
|
|
50
53
|
- **Text.** `description` is one short line at the top of the step, under the
|
|
51
54
|
hero, without a closing period. Keep the content to the controls the step
|
|
@@ -113,7 +116,9 @@ a `WizardDialog` closes from its header.
|
|
|
113
116
|
- a light scrim over the app (`--ui-overlay-light`) instead of the dark mask:
|
|
114
117
|
the app stays readable, but takes no presses,
|
|
115
118
|
- a press outside does nothing: it neither closes the wizard nor reaches the
|
|
116
|
-
app; Escape and the close button close it, and either emits `cancel
|
|
119
|
+
app; Escape and the close button close it, and either emits `cancel`,
|
|
120
|
+
- the focus it moves (on opening, to the first field; on a step change, to the
|
|
121
|
+
step title) shows a ring only after a key, never after a click.
|
|
117
122
|
|
|
118
123
|
These are `Dialog` props (`scrim="light"`, `:close-on-outside="false"`,
|
|
119
124
|
`:header-divider="false"`), so a dialog of your own around a `Wizard` can
|