@synopackageland/ui 0.20.13 → 0.20.15
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/dist/composables/openerFocus.d.ts +14 -0
- package/dist/index.js +8794 -8760
- package/dist/json-preview/preview.js +7724 -7693
- package/dist/reka-runtime.json +1 -1
- package/dist/theme.css +1 -1
- package/dist/themes/dsm7-embedded-reset.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/adaptive-layout.md +13 -0
- package/docs/mobile-native.md +11 -0
- package/package.json +1 -90
package/docs/adaptive-layout.md
CHANGED
|
@@ -170,6 +170,19 @@ components below it. Every App gets it; there is nothing to set.
|
|
|
170
170
|
Other pages, such as a DataGrid that scrolls itself, keep their layout.
|
|
171
171
|
- **The header does not stick.** A `PageHeader` scrolls with the page, in a
|
|
172
172
|
tight row (8px above and below).
|
|
173
|
+
- **The bars are compact on touch.** Under a coarse pointer the `SectionTabs`
|
|
174
|
+
strip is drawn 36px tall and a `SettingsPage` footer 48px (its buttons
|
|
175
|
+
36px), not the 44px strip and 64px footer of a taller touch layout. The 44px
|
|
176
|
+
tap boxes come from the hit slop (`data-ui-hit`, docs/mobile-native.md): a
|
|
177
|
+
tab's box reaches 8px down, into the strip's unpainted bottom padding,
|
|
178
|
+
which hangs over the top of the page (the strip sticks at the top of the
|
|
179
|
+
window, with nothing above it to reach into); a footer button's box reaches
|
|
180
|
+
4px up and down inside the footer. At 753×239 (a 279px landscape window
|
|
181
|
+
under DSM's 40px header) that leaves the rows 147px from the strip's box,
|
|
182
|
+
155px from what is drawn. This follows the media query, not
|
|
183
|
+
`data-ui-layout-short`, so an App without `AppLayout` gets it too. A taller
|
|
184
|
+
touch layout keeps the drawn 44px: there the slop would only hide a strip
|
|
185
|
+
of the page under the bar, for no room the page needs.
|
|
173
186
|
|
|
174
187
|
At any height, a `SectionTabs fill` strip (and a pushed section's Back header on a phone) sticks below a sticky `PageHeader`
|
|
175
188
|
in the same `PageContent` (`--ui-page-sticky-top`, the header's height)
|
package/docs/mobile-native.md
CHANGED
|
@@ -160,6 +160,17 @@ hidden` (or `truncate`) on the control or a scroller around it cuts the box
|
|
|
160
160
|
off, so truncate the label inside instead and clip a row sideways only
|
|
161
161
|
(`overflow-x-clip`).
|
|
162
162
|
|
|
163
|
+
At a page's end edge the box sticks out past the page: a 36px IconButton
|
|
164
|
+
flush with the right of a header row reaches 4px further. On touch,
|
|
165
|
+
AppLayout's column and page area and every `PageContent` clip their
|
|
166
|
+
children sideways (`overflow-x: clip`), so a page scroller never counts that
|
|
167
|
+
overhang as content and never scrolls sideways; the box keeps its full 44px
|
|
168
|
+
wherever the page has room, vertical scrolling and sticky headers are
|
|
169
|
+
unchanged, and a table or code block that scrolls sideways (a scroller of its
|
|
170
|
+
own) keeps scrolling. An App that puts small controls flush with the edge of
|
|
171
|
+
its own scroller, outside a `PageContent`, clips that content sideways the
|
|
172
|
+
same way.
|
|
173
|
+
|
|
163
174
|
`check:mobile` exempts a link set in a sentence (inline, with text beside it
|
|
164
175
|
in the same parent): WCAG 2.5.8 lets the line of text decide its size. A link
|
|
165
176
|
alone on its line still needs 44px.
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@synopackageland/ui",
|
|
3
|
-
"version": "0.20.
|
|
3
|
+
"version": "0.20.15",
|
|
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,60 +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:detail-surface": "node scripts/check-detail-surface.mjs",
|
|
97
|
-
"check:internal": "node --test scripts/check-internal-content.test.mjs scripts/check-npm-metadata.test.mjs && node scripts/check-internal-content.mjs --repo .",
|
|
98
|
-
"check:npm-metadata": "node scripts/check-npm-metadata.mjs",
|
|
99
|
-
"check:package": "node scripts/check-package-content.mjs",
|
|
100
|
-
"check:public-api-consumer": "node scripts/check-public-api-consumer.mjs",
|
|
101
|
-
"notices:update": "node scripts/third-party-notices.mjs --write",
|
|
102
|
-
"notices:check": "node scripts/third-party-notices.mjs --check",
|
|
103
|
-
"check": "bash scripts/docker-check.sh \"npm run gates\"",
|
|
104
|
-
"check:fast": "bash scripts/docker-check.sh \"npm run gates\"",
|
|
105
|
-
"check:local-browser": "node scripts/app-local-browser.mjs",
|
|
106
|
-
"check:infotip": "node scripts/check-infotip.mjs",
|
|
107
|
-
"release:stage": "node scripts/stage-release.mjs",
|
|
108
|
-
"check:polish": "bash scripts/docker-check.sh --build --out .polish-shots 'node scripts/check-polish.mjs'",
|
|
109
|
-
"check:acceptance": "node scripts/check-acceptance.mjs",
|
|
110
|
-
"check:palette": "node scripts/check-palette.mjs",
|
|
111
|
-
"gates": "node scripts/gates.mjs",
|
|
112
|
-
"gates:full": "node scripts/gates.mjs --full",
|
|
113
|
-
"check:layout": "node scripts/check-layout.mjs",
|
|
114
|
-
"release:smoke": "node scripts/release-smoke.mjs",
|
|
115
|
-
"check:browser-install": "playwright install chromium"
|
|
116
|
-
},
|
|
117
63
|
"peerDependencies": {
|
|
118
64
|
"vue": "^3.5.0"
|
|
119
65
|
},
|
|
@@ -133,44 +79,9 @@
|
|
|
133
79
|
"@tiptap/vue-3": "3.32.1",
|
|
134
80
|
"zod": "^4.6.5"
|
|
135
81
|
},
|
|
136
|
-
"devDependencies": {
|
|
137
|
-
"@eslint/js": "10.0.1",
|
|
138
|
-
"@histoire/plugin-vue": "1.0.0-beta.1",
|
|
139
|
-
"@tailwindcss/vite": "4.3.3",
|
|
140
|
-
"@tanstack/vue-virtual": "3.13.39",
|
|
141
|
-
"@vitejs/plugin-vue": "6.0.9",
|
|
142
|
-
"@vue/test-utils": "2.5.1",
|
|
143
|
-
"@vueuse/core": "14.4.0",
|
|
144
|
-
"eslint": "10.11.0",
|
|
145
|
-
"eslint-plugin-vue": "10.11.1",
|
|
146
|
-
"flexsearch": "0.8.212",
|
|
147
|
-
"globals": "17.12.0",
|
|
148
|
-
"histoire": "1.0.0-beta.1",
|
|
149
|
-
"jsdom": "30.1.1",
|
|
150
|
-
"playwright": "1.58.2",
|
|
151
|
-
"reka-ui": "2.11.0",
|
|
152
|
-
"tailwindcss": "4.3.3",
|
|
153
|
-
"typescript": "5.9.3",
|
|
154
|
-
"typescript-eslint": "8.71.0",
|
|
155
|
-
"vite": "7.3.6",
|
|
156
|
-
"vite-plugin-dts": "5.1.1",
|
|
157
|
-
"vitest": "5.0.2",
|
|
158
|
-
"vscode-oniguruma": "2.0.1",
|
|
159
|
-
"vscode-textmate": "9.3.2",
|
|
160
|
-
"vue": "3.5.43",
|
|
161
|
-
"vue-eslint-parser": "10.4.1",
|
|
162
|
-
"vue-tsc": "3.3.11"
|
|
163
|
-
},
|
|
164
82
|
"engines": {
|
|
165
83
|
"node": ">=20"
|
|
166
84
|
},
|
|
167
|
-
"packageManager": "pnpm@10.33.2",
|
|
168
|
-
"pnpm": {
|
|
169
|
-
"onlyBuiltDependencies": [
|
|
170
|
-
"esbuild",
|
|
171
|
-
"vue-demi"
|
|
172
|
-
]
|
|
173
|
-
},
|
|
174
85
|
"config": {
|
|
175
86
|
"bundledRuntime": {
|
|
176
87
|
"@tanstack/vue-virtual": "3.13.39",
|