@synopackageland/ui 0.16.0 → 0.16.2
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 +11 -0
- package/README.md +5 -2
- package/dist/components/composite/connection-topology/ConnectionTopology.vue.d.ts +2 -1
- package/dist/components/composite/key-value-row/KeyValueRow.vue.d.ts +2 -0
- package/dist/components/composite/wizard/Wizard.vue.d.ts +10 -0
- package/dist/composables/fitHeight.d.ts +14 -0
- package/dist/index.js +5910 -5803
- 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
|
@@ -62,9 +62,12 @@ const open = ref(false)
|
|
|
62
62
|
| Prop | Default | |
|
|
63
63
|
| --- | --- | --- |
|
|
64
64
|
| `active-step-key` (`v-model`) | the first step | The shown step. The wizard also moves by itself; bind it back to follow. |
|
|
65
|
-
| `stepper` | `auto` | `rail`, `header` (the band), `none`; `auto` is the rail from
|
|
65
|
+
| `stepper` | `auto` | `rail`, `header` (the band), `none`; `auto` is the rail from `rail-min-width`. |
|
|
66
|
+
| `rail-min-width` | `600` | The wizard width from which `auto` shows the rail. |
|
|
66
67
|
| `title`, `description` | — | Shown above the steps in the rail. `WizardDialog` puts its `title` in the dialog header instead. |
|
|
67
68
|
| `framed` | `false` | Border, corners and card shadow, for a wizard on a page. |
|
|
69
|
+
| `fit` | `false` | On a page: takes the height left below it in its scroll container (or the window), so the steps, band and footer stay in view and only the step scrolls. |
|
|
70
|
+
| `fit-min-height` | `320` | The least height `fit` takes; a shorter window scrolls the page instead. |
|
|
68
71
|
| `cancellable` | `true` | Cancel in the footer. |
|
|
69
72
|
| `footer` | `true` | `false` hides the footer; an object renames `start`, `previous`, `next`, `apply`, `finish`, `cancel`. |
|
|
70
73
|
| `progress-text` | "Step n of total" | The progress line. |
|
|
@@ -79,7 +82,9 @@ runs. The step list does not navigate, so a guard cannot be skipped.
|
|
|
79
82
|
|
|
80
83
|
A wizard fills the height its container gives it (`WizardDialog` and
|
|
81
84
|
`<Dialog flush height="…">` give it one); on a page, set a height on its
|
|
82
|
-
container or let it take its content's height.
|
|
85
|
+
container, set `fit`, or let it take its content's height. A wizard held to a
|
|
86
|
+
height under 560px (`fit` in a short window, or a dialog) draws a smaller
|
|
87
|
+
headline, hero and spacing.
|
|
83
88
|
|
|
84
89
|
## Behaviour
|
|
85
90
|
|
|
@@ -94,6 +99,6 @@ container or let it take its content's height.
|
|
|
94
99
|
bar and the markers ease to their new state; the done mark pops with a ring
|
|
95
100
|
and a short burst. Reduced motion turns all of it off.
|
|
96
101
|
- **Size.** In a phone-width window the dialog is a bottom sheet with the
|
|
97
|
-
band; in a DSM window from 600px wide the rail shows.
|
|
102
|
+
band; in a DSM window from 600px wide (`rail-min-width`) the rail shows.
|
|
98
103
|
- **Theme.** Colours are the theme's roles, so the wizard follows the accent
|
|
99
104
|
and the dark theme.
|