@synopackageland/ui 0.25.18 → 0.25.19
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 +6 -0
- package/dist/index.js +19 -9
- package/dist/json-preview/preview.js +8 -4
- 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/button-policy.md +17 -0
- package/package.json +99 -1
package/docs/button-policy.md
CHANGED
|
@@ -76,6 +76,13 @@ are in [dsm-native-metrics.md](dsm-native-metrics.md).
|
|
|
76
76
|
least 44px high on a phone, with hover, pressed and focus states, and
|
|
77
77
|
Enter or Space opens it. Use a text button when only a word in a line acts;
|
|
78
78
|
use a DisclosureRow when the row is the action.
|
|
79
|
+
13. A label is never cut to "…", in any language at any width. When space is
|
|
80
|
+
short the text beside the button gives way, or the label wraps onto a
|
|
81
|
+
second line; a button never shows part of its label. Do not add
|
|
82
|
+
`truncate`, `text-overflow: ellipsis` or a fixed `height` to a button or
|
|
83
|
+
its label, and give the neighbouring text `min-width: 0` so it is the one
|
|
84
|
+
that shrinks. Prefer a shorter label, or a layout that moves the button
|
|
85
|
+
under the text on a narrow screen, to a button that wraps.
|
|
79
86
|
|
|
80
87
|
## What the components do
|
|
81
88
|
|
|
@@ -86,6 +93,16 @@ are in [dsm-native-metrics.md](dsm-native-metrics.md).
|
|
|
86
93
|
- A Button in a `Callout`'s `#actions` and a toast's action are drawn as
|
|
87
94
|
capsules by the Callout and the Toast themselves ([callout](callout.md)).
|
|
88
95
|
They stay `kind="tool"` buttons, so they do not count as a footer's action.
|
|
96
|
+
- A Button, a SplitButton and a NewItemsPill keep their label whole. The
|
|
97
|
+
button does not shrink below its label's width in a flex row (`shrink-0`),
|
|
98
|
+
so a long text beside a small button wraps instead of the button ("從清單移除"
|
|
99
|
+
stays whole, never "從清..."). It is never wider than its container
|
|
100
|
+
(`max-w-full`): a label wider than the whole container wraps onto more
|
|
101
|
+
lines, centred, between words (CJK between characters), and breaks inside
|
|
102
|
+
a word only when the word alone is wider than the line. The size is a
|
|
103
|
+
minimum height with block padding, so a two-line button keeps even space
|
|
104
|
+
above and below its text. The phone bar's text action and the phone FAB's
|
|
105
|
+
pills wrap the same way. `pnpm check:button-wrap` checks this in a browser.
|
|
89
106
|
- In development, a Button warns in the console when `kind="action"` is set
|
|
90
107
|
outside a footer, when a footer has two main actions, or when the main action
|
|
91
108
|
is not last. Production builds do not check.
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@synopackageland/ui",
|
|
3
|
-
"version": "0.25.
|
|
3
|
+
"version": "0.25.19",
|
|
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,6 +60,69 @@
|
|
|
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
|
+
"check:tokens": "node scripts/check-tokens.mjs",
|
|
66
|
+
"dev": "vite build --watch",
|
|
67
|
+
"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",
|
|
68
|
+
"lint": "eslint .",
|
|
69
|
+
"typecheck": "vue-tsc --noEmit -p tsconfig.json",
|
|
70
|
+
"test": "vitest run",
|
|
71
|
+
"test:watch": "vitest",
|
|
72
|
+
"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}",
|
|
73
|
+
"story": "histoire dev",
|
|
74
|
+
"story:build": "histoire build",
|
|
75
|
+
"check:host": "node scripts/dsm-host-shots.mjs",
|
|
76
|
+
"check:switch": "node scripts/check-switch.mjs",
|
|
77
|
+
"check:tabs": "node scripts/check-tabs.mjs",
|
|
78
|
+
"check:mobile": "node scripts/check-mobile-overflow.mjs",
|
|
79
|
+
"check:ui-patch": "node scripts/check-ui-patch.mjs",
|
|
80
|
+
"check:narrow": "node scripts/check-narrow-controls.mjs",
|
|
81
|
+
"check:drawer-form": "node scripts/check-drawer-form.mjs",
|
|
82
|
+
"check:responsive": "node scripts/check-responsive.mjs",
|
|
83
|
+
"check:adaptive": "node scripts/check-adaptive.mjs",
|
|
84
|
+
"check:sidebar-focus": "node scripts/check-sidebar-focus.mjs",
|
|
85
|
+
"check:json-render": "node scripts/check-json-render.mjs",
|
|
86
|
+
"check:motion": "node scripts/check-motion.mjs",
|
|
87
|
+
"check:topology": "node scripts/check-topology.mjs",
|
|
88
|
+
"check:wizard": "node scripts/check-wizard.mjs",
|
|
89
|
+
"check:press": "node scripts/check-press.mjs",
|
|
90
|
+
"check:edges": "node scripts/check-edges.mjs",
|
|
91
|
+
"check:data-grid": "node scripts/check-data-grid.mjs",
|
|
92
|
+
"check:truncation": "node scripts/check-truncation.mjs",
|
|
93
|
+
"check:button-wrap": "node scripts/check-button-wrap.mjs",
|
|
94
|
+
"check:link": "node scripts/check-link.mjs",
|
|
95
|
+
"check:text-select": "node scripts/check-text-select.mjs",
|
|
96
|
+
"check:date-picker": "node scripts/check-date-picker.mjs",
|
|
97
|
+
"check:full-page": "node scripts/check-full-page.mjs",
|
|
98
|
+
"check:short-viewport": "node scripts/check-short-viewport.mjs",
|
|
99
|
+
"check:phone-layout": "node scripts/check-phone-layout.mjs",
|
|
100
|
+
"check:phone-bars": "node scripts/check-phone-bars.mjs",
|
|
101
|
+
"check:phone-fill": "node scripts/check-phone-fill.mjs",
|
|
102
|
+
"check:text-zoom": "node scripts/check-text-zoom.mjs",
|
|
103
|
+
"check:focus-restore": "node scripts/check-focus-restore.mjs",
|
|
104
|
+
"check:detail-surface": "node scripts/check-detail-surface.mjs",
|
|
105
|
+
"check:internal": "node --test scripts/check-internal-content.test.mjs scripts/check-npm-metadata.test.mjs && node scripts/check-internal-content.mjs --repo .",
|
|
106
|
+
"check:npm-metadata": "node scripts/check-npm-metadata.mjs",
|
|
107
|
+
"check:package": "node scripts/check-package-content.mjs",
|
|
108
|
+
"trace:restyle": "node scripts/trace-restyle.mjs",
|
|
109
|
+
"check:public-api-consumer": "node scripts/check-public-api-consumer.mjs",
|
|
110
|
+
"notices:update": "node scripts/third-party-notices.mjs --write",
|
|
111
|
+
"notices:check": "node scripts/third-party-notices.mjs --check",
|
|
112
|
+
"check": "bash scripts/docker-check.sh \"npm run gates\"",
|
|
113
|
+
"check:fast": "bash scripts/docker-check.sh \"npm run gates\"",
|
|
114
|
+
"check:local-browser": "node scripts/app-local-browser.mjs",
|
|
115
|
+
"check:infotip": "node scripts/check-infotip.mjs",
|
|
116
|
+
"release:stage": "node scripts/stage-release.mjs",
|
|
117
|
+
"check:polish": "bash scripts/docker-check.sh --build --out .polish-shots 'node scripts/check-polish.mjs'",
|
|
118
|
+
"check:acceptance": "node scripts/check-acceptance.mjs",
|
|
119
|
+
"check:palette": "node scripts/check-palette.mjs",
|
|
120
|
+
"gates": "node scripts/gates.mjs",
|
|
121
|
+
"gates:full": "node scripts/gates.mjs --full",
|
|
122
|
+
"check:layout": "node scripts/check-layout.mjs",
|
|
123
|
+
"release:smoke": "node scripts/release-smoke.mjs",
|
|
124
|
+
"check:browser-install": "playwright install chromium webkit"
|
|
125
|
+
},
|
|
63
126
|
"peerDependencies": {
|
|
64
127
|
"vue": "^3.5.0"
|
|
65
128
|
},
|
|
@@ -79,9 +142,44 @@
|
|
|
79
142
|
"@tiptap/vue-3": "3.32.1",
|
|
80
143
|
"zod": "^4.6.5"
|
|
81
144
|
},
|
|
145
|
+
"devDependencies": {
|
|
146
|
+
"@eslint/js": "10.0.1",
|
|
147
|
+
"@histoire/plugin-vue": "1.0.0-beta.1",
|
|
148
|
+
"@tailwindcss/vite": "4.3.3",
|
|
149
|
+
"@tanstack/vue-virtual": "3.13.39",
|
|
150
|
+
"@vitejs/plugin-vue": "6.0.9",
|
|
151
|
+
"@vue/test-utils": "2.5.1",
|
|
152
|
+
"@vueuse/core": "14.4.0",
|
|
153
|
+
"eslint": "10.11.0",
|
|
154
|
+
"eslint-plugin-vue": "10.11.1",
|
|
155
|
+
"flexsearch": "0.8.212",
|
|
156
|
+
"globals": "17.12.0",
|
|
157
|
+
"histoire": "1.0.0-beta.1",
|
|
158
|
+
"jsdom": "30.1.1",
|
|
159
|
+
"playwright": "1.58.2",
|
|
160
|
+
"reka-ui": "2.11.0",
|
|
161
|
+
"tailwindcss": "4.3.3",
|
|
162
|
+
"typescript": "5.9.3",
|
|
163
|
+
"typescript-eslint": "8.71.0",
|
|
164
|
+
"vite": "7.3.6",
|
|
165
|
+
"vite-plugin-dts": "5.1.1",
|
|
166
|
+
"vitest": "5.0.2",
|
|
167
|
+
"vscode-oniguruma": "2.0.1",
|
|
168
|
+
"vscode-textmate": "9.3.2",
|
|
169
|
+
"vue": "3.5.43",
|
|
170
|
+
"vue-eslint-parser": "10.4.1",
|
|
171
|
+
"vue-tsc": "3.3.11"
|
|
172
|
+
},
|
|
82
173
|
"engines": {
|
|
83
174
|
"node": ">=20"
|
|
84
175
|
},
|
|
176
|
+
"packageManager": "pnpm@10.33.2",
|
|
177
|
+
"pnpm": {
|
|
178
|
+
"onlyBuiltDependencies": [
|
|
179
|
+
"esbuild",
|
|
180
|
+
"vue-demi"
|
|
181
|
+
]
|
|
182
|
+
},
|
|
85
183
|
"config": {
|
|
86
184
|
"bundledRuntime": {
|
|
87
185
|
"@tanstack/vue-virtual": "3.13.39",
|