@synopackageland/ui 0.21.0 → 0.21.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/cli.js +0 -0
- package/dist/index.js +3505 -3499
- package/dist/json-preview/preview.js +1014 -1008
- 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/mobile-native.md +10 -2
- package/package.json +59 -66
package/docs/mobile-native.md
CHANGED
|
@@ -267,7 +267,7 @@ are in `src/feedback/feedback.css`.
|
|
|
267
267
|
|
|
268
268
|
| | Desktop, tablet, narrow window with a mouse | Phone |
|
|
269
269
|
|---|---|---|
|
|
270
|
-
| Toast | bottom right, 360px, swipe right, a stack | bottom, 8px from each side, above the visible tab bar or the keyboard (`--ui-kb-inset`), whichever is higher, plus `--ui-safe-bottom` and 8px; swipe down; only the newest shows, with a `+N` count of the others still open |
|
|
270
|
+
| Toast | bottom right, 360px, swipe right, a stack | bottom, 8px from each side, above the visible tab bar or the keyboard (`--ui-kb-inset`), whichever is higher, plus `--ui-safe-bottom` and 8px, and 8px above a shown FAB; swipe down; only the newest shows, with a `+N` count of the others still open |
|
|
271
271
|
| Notification | the chosen corner, 360px | top, 8px from each side, below `--ui-safe-top` plus 8px; `alignment` is ignored |
|
|
272
272
|
|
|
273
273
|
- Toasts behind the front one keep their own timers, so a short one can
|
|
@@ -531,6 +531,10 @@ change: the same slot moves.
|
|
|
531
531
|
it and focus returns to the FAB. A pick runs the action and closes the dial;
|
|
532
532
|
an action that opens a menu closes it once the menu closes. The page behind
|
|
533
533
|
is inert while it is open. Reduced motion shows and hides it at once.
|
|
534
|
+
- Every pill is its icon and its text. An action with no text of its own (an
|
|
535
|
+
`IconButton` such as "More actions", an icon-only Button) shows its
|
|
536
|
+
accessible name, from `aria-label` or `title`; the pill sizes to it and a
|
|
537
|
+
name too long for the screen ends in an ellipsis inside the pill.
|
|
534
538
|
- Rare or destructive items belong in `headerActions` ("…" in the bar), not
|
|
535
539
|
in the page actions.
|
|
536
540
|
- `phone-actions` on `AppLayout`, and on a `PageHeader`, `AppToolbar` or
|
|
@@ -542,7 +546,11 @@ change: the same slot moves.
|
|
|
542
546
|
- A page whose primary action is in a footer bar (a `SettingsPage` footer, a
|
|
543
547
|
sticky `FormActions`) keeps its actions in the bar: the bottom already has a
|
|
544
548
|
primary. Content gets `--ui-fab-room` (88px) of bottom padding so the last
|
|
545
|
-
row is never under the FAB.
|
|
549
|
+
row is never under the FAB.
|
|
550
|
+
- A toast sits 8px above the FAB while the FAB is shown, and back at its own
|
|
551
|
+
place while the FAB is hidden on scroll or by the keyboard, and steps aside
|
|
552
|
+
(fades out) while the speed dial is open; it moves with the bars (`--ui-motion-bars`, at once with reduced motion). A page without a FAB,
|
|
553
|
+
a DSM window and a desktop place toasts as before.
|
|
546
554
|
|
|
547
555
|
**Hide on scroll.** On by default (`AppLayout` `hide-on-scroll`). Scrolling
|
|
548
556
|
the page down 16px or more slides the bar, the tab bar, the FAB and a clean
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@synopackageland/ui",
|
|
3
|
-
"version": "0.21.
|
|
3
|
+
"version": "0.21.1",
|
|
4
4
|
"description": "Shared Vue 3 UI component library with a DSM 7 inspired application theme",
|
|
5
5
|
"license": "MIT",
|
|
6
6
|
"type": "module",
|
|
@@ -60,62 +60,6 @@
|
|
|
60
60
|
"./themes/dsm7-embedded-reset.css": "./dist/themes/dsm7-embedded-reset.css",
|
|
61
61
|
"./themes/dsm7-embedded-theme.css": "./dist/themes/dsm7-embedded-theme.css"
|
|
62
62
|
},
|
|
63
|
-
"scripts": {
|
|
64
|
-
"check:docs": "node --test scripts/check-doc-versions.test.mjs && node scripts/check-doc-versions.mjs",
|
|
65
|
-
"dev": "vite build --watch",
|
|
66
|
-
"build": "vite build && vite build --mode json && vite build --mode rich-text && vite build --mode grid && vite build --mode cli && vite build --mode preview && vite build --mode embedded && node scripts/postbuild.mjs",
|
|
67
|
-
"lint": "eslint .",
|
|
68
|
-
"typecheck": "vue-tsc --noEmit -p tsconfig.json",
|
|
69
|
-
"test": "vitest run",
|
|
70
|
-
"test:watch": "vitest",
|
|
71
|
-
"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}",
|
|
72
|
-
"story": "histoire dev",
|
|
73
|
-
"story:build": "histoire build",
|
|
74
|
-
"check:host": "node scripts/dsm-host-shots.mjs",
|
|
75
|
-
"check:switch": "node scripts/check-switch.mjs",
|
|
76
|
-
"check:tabs": "node scripts/check-tabs.mjs",
|
|
77
|
-
"check:mobile": "node scripts/check-mobile-overflow.mjs",
|
|
78
|
-
"check:ui-patch": "node scripts/check-ui-patch.mjs",
|
|
79
|
-
"check:narrow": "node scripts/check-narrow-controls.mjs",
|
|
80
|
-
"check:drawer-form": "node scripts/check-drawer-form.mjs",
|
|
81
|
-
"check:responsive": "node scripts/check-responsive.mjs",
|
|
82
|
-
"check:adaptive": "node scripts/check-adaptive.mjs",
|
|
83
|
-
"check:sidebar-focus": "node scripts/check-sidebar-focus.mjs",
|
|
84
|
-
"check:json-render": "node scripts/check-json-render.mjs",
|
|
85
|
-
"check:motion": "node scripts/check-motion.mjs",
|
|
86
|
-
"check:topology": "node scripts/check-topology.mjs",
|
|
87
|
-
"check:wizard": "node scripts/check-wizard.mjs",
|
|
88
|
-
"check:edges": "node scripts/check-edges.mjs",
|
|
89
|
-
"check:data-grid": "node scripts/check-data-grid.mjs",
|
|
90
|
-
"check:truncation": "node scripts/check-truncation.mjs",
|
|
91
|
-
"check:link": "node scripts/check-link.mjs",
|
|
92
|
-
"check:text-select": "node scripts/check-text-select.mjs",
|
|
93
|
-
"check:date-picker": "node scripts/check-date-picker.mjs",
|
|
94
|
-
"check:full-page": "node scripts/check-full-page.mjs",
|
|
95
|
-
"check:short-viewport": "node scripts/check-short-viewport.mjs",
|
|
96
|
-
"check:phone-layout": "node scripts/check-phone-layout.mjs",
|
|
97
|
-
"check:focus-restore": "node scripts/check-focus-restore.mjs",
|
|
98
|
-
"check:detail-surface": "node scripts/check-detail-surface.mjs",
|
|
99
|
-
"check:internal": "node --test scripts/check-internal-content.test.mjs scripts/check-npm-metadata.test.mjs && node scripts/check-internal-content.mjs --repo .",
|
|
100
|
-
"check:npm-metadata": "node scripts/check-npm-metadata.mjs",
|
|
101
|
-
"check:package": "node scripts/check-package-content.mjs",
|
|
102
|
-
"check:public-api-consumer": "node scripts/check-public-api-consumer.mjs",
|
|
103
|
-
"notices:update": "node scripts/third-party-notices.mjs --write",
|
|
104
|
-
"notices:check": "node scripts/third-party-notices.mjs --check",
|
|
105
|
-
"check": "bash scripts/docker-check.sh \"npm run gates\"",
|
|
106
|
-
"check:fast": "bash scripts/docker-check.sh \"npm run gates\"",
|
|
107
|
-
"check:local-browser": "node scripts/app-local-browser.mjs",
|
|
108
|
-
"check:infotip": "node scripts/check-infotip.mjs",
|
|
109
|
-
"release:stage": "node scripts/stage-release.mjs",
|
|
110
|
-
"check:polish": "bash scripts/docker-check.sh --build --out .polish-shots 'node scripts/check-polish.mjs'",
|
|
111
|
-
"check:acceptance": "node scripts/check-acceptance.mjs",
|
|
112
|
-
"check:palette": "node scripts/check-palette.mjs",
|
|
113
|
-
"gates": "node scripts/gates.mjs",
|
|
114
|
-
"gates:full": "node scripts/gates.mjs --full",
|
|
115
|
-
"check:layout": "node scripts/check-layout.mjs",
|
|
116
|
-
"release:smoke": "node scripts/release-smoke.mjs",
|
|
117
|
-
"check:browser-install": "playwright install chromium"
|
|
118
|
-
},
|
|
119
63
|
"peerDependencies": {
|
|
120
64
|
"vue": "^3.5.0"
|
|
121
65
|
},
|
|
@@ -166,13 +110,6 @@
|
|
|
166
110
|
"engines": {
|
|
167
111
|
"node": ">=20"
|
|
168
112
|
},
|
|
169
|
-
"packageManager": "pnpm@10.33.2",
|
|
170
|
-
"pnpm": {
|
|
171
|
-
"onlyBuiltDependencies": [
|
|
172
|
-
"esbuild",
|
|
173
|
-
"vue-demi"
|
|
174
|
-
]
|
|
175
|
-
},
|
|
176
113
|
"config": {
|
|
177
114
|
"bundledRuntime": {
|
|
178
115
|
"@tanstack/vue-virtual": "3.13.39",
|
|
@@ -180,5 +117,61 @@
|
|
|
180
117
|
"reka-ui": "2.11.0"
|
|
181
118
|
}
|
|
182
119
|
},
|
|
183
|
-
"homepage": "https://www.varvis.me/docs/"
|
|
184
|
-
|
|
120
|
+
"homepage": "https://www.varvis.me/docs/",
|
|
121
|
+
"scripts": {
|
|
122
|
+
"check:docs": "node --test scripts/check-doc-versions.test.mjs && node scripts/check-doc-versions.mjs",
|
|
123
|
+
"dev": "vite build --watch",
|
|
124
|
+
"build": "vite build && vite build --mode json && vite build --mode rich-text && vite build --mode grid && vite build --mode cli && vite build --mode preview && vite build --mode embedded && node scripts/postbuild.mjs",
|
|
125
|
+
"lint": "eslint .",
|
|
126
|
+
"typecheck": "vue-tsc --noEmit -p tsconfig.json",
|
|
127
|
+
"test": "vitest run",
|
|
128
|
+
"test:watch": "vitest",
|
|
129
|
+
"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}",
|
|
130
|
+
"story": "histoire dev",
|
|
131
|
+
"story:build": "histoire build",
|
|
132
|
+
"check:host": "node scripts/dsm-host-shots.mjs",
|
|
133
|
+
"check:switch": "node scripts/check-switch.mjs",
|
|
134
|
+
"check:tabs": "node scripts/check-tabs.mjs",
|
|
135
|
+
"check:mobile": "node scripts/check-mobile-overflow.mjs",
|
|
136
|
+
"check:ui-patch": "node scripts/check-ui-patch.mjs",
|
|
137
|
+
"check:narrow": "node scripts/check-narrow-controls.mjs",
|
|
138
|
+
"check:drawer-form": "node scripts/check-drawer-form.mjs",
|
|
139
|
+
"check:responsive": "node scripts/check-responsive.mjs",
|
|
140
|
+
"check:adaptive": "node scripts/check-adaptive.mjs",
|
|
141
|
+
"check:sidebar-focus": "node scripts/check-sidebar-focus.mjs",
|
|
142
|
+
"check:json-render": "node scripts/check-json-render.mjs",
|
|
143
|
+
"check:motion": "node scripts/check-motion.mjs",
|
|
144
|
+
"check:topology": "node scripts/check-topology.mjs",
|
|
145
|
+
"check:wizard": "node scripts/check-wizard.mjs",
|
|
146
|
+
"check:edges": "node scripts/check-edges.mjs",
|
|
147
|
+
"check:data-grid": "node scripts/check-data-grid.mjs",
|
|
148
|
+
"check:truncation": "node scripts/check-truncation.mjs",
|
|
149
|
+
"check:link": "node scripts/check-link.mjs",
|
|
150
|
+
"check:text-select": "node scripts/check-text-select.mjs",
|
|
151
|
+
"check:date-picker": "node scripts/check-date-picker.mjs",
|
|
152
|
+
"check:full-page": "node scripts/check-full-page.mjs",
|
|
153
|
+
"check:short-viewport": "node scripts/check-short-viewport.mjs",
|
|
154
|
+
"check:phone-layout": "node scripts/check-phone-layout.mjs",
|
|
155
|
+
"check:focus-restore": "node scripts/check-focus-restore.mjs",
|
|
156
|
+
"check:detail-surface": "node scripts/check-detail-surface.mjs",
|
|
157
|
+
"check:internal": "node --test scripts/check-internal-content.test.mjs scripts/check-npm-metadata.test.mjs && node scripts/check-internal-content.mjs --repo .",
|
|
158
|
+
"check:npm-metadata": "node scripts/check-npm-metadata.mjs",
|
|
159
|
+
"check:package": "node scripts/check-package-content.mjs",
|
|
160
|
+
"check:public-api-consumer": "node scripts/check-public-api-consumer.mjs",
|
|
161
|
+
"notices:update": "node scripts/third-party-notices.mjs --write",
|
|
162
|
+
"notices:check": "node scripts/third-party-notices.mjs --check",
|
|
163
|
+
"check": "bash scripts/docker-check.sh \"npm run gates\"",
|
|
164
|
+
"check:fast": "bash scripts/docker-check.sh \"npm run gates\"",
|
|
165
|
+
"check:local-browser": "node scripts/app-local-browser.mjs",
|
|
166
|
+
"check:infotip": "node scripts/check-infotip.mjs",
|
|
167
|
+
"release:stage": "node scripts/stage-release.mjs",
|
|
168
|
+
"check:polish": "bash scripts/docker-check.sh --build --out .polish-shots 'node scripts/check-polish.mjs'",
|
|
169
|
+
"check:acceptance": "node scripts/check-acceptance.mjs",
|
|
170
|
+
"check:palette": "node scripts/check-palette.mjs",
|
|
171
|
+
"gates": "node scripts/gates.mjs",
|
|
172
|
+
"gates:full": "node scripts/gates.mjs --full",
|
|
173
|
+
"check:layout": "node scripts/check-layout.mjs",
|
|
174
|
+
"release:smoke": "node scripts/release-smoke.mjs",
|
|
175
|
+
"check:browser-install": "playwright install chromium"
|
|
176
|
+
}
|
|
177
|
+
}
|