@yuneta/gobj-ui 7.26.29 → 7.26.30
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/README.md +56 -22
- package/dist/gobj-ui.cjs.js +384 -109
- package/dist/gobj-ui.es.js +384 -110
- package/index.js +1 -0
- package/package.json +1 -1
- package/src/c_yui_nav.js +152 -19
- package/src/c_yui_shell.css +84 -18
- package/src/c_yui_shell.js +145 -65
- package/src/nav_cards_helpers.js +21 -5
- package/src/nav_item_badge.wiring.test.js +564 -0
- package/src/yui_badge.js +145 -0
- package/src/yui_badge.test.js +148 -0
package/README.md
CHANGED
|
@@ -3152,45 +3152,79 @@ at 38%, which is the whole graph and worth nothing.
|
|
|
3152
3152
|
> `ResizeObserver`, and its canvas keeps its birth size for the life of the
|
|
3153
3153
|
> window while everything resizes around it (fixed in 7.23.31).
|
|
3154
3154
|
|
|
3155
|
-
###
|
|
3155
|
+
### Badges — a count on a toolbar item or a menu entry
|
|
3156
3156
|
|
|
3157
3157
|
```js
|
|
3158
|
-
/* app_config.json —
|
|
3159
|
-
|
|
3160
|
-
|
|
3161
|
-
|
|
3158
|
+
/* app_config.json — a toolbar item and a menu entry; the fields seed the
|
|
3159
|
+
* FIRST paint only */
|
|
3160
|
+
"toolbar": {"items": [
|
|
3161
|
+
{ "id": "bell", "icon": "yi-triangle-exclamation", "align": "end",
|
|
3162
|
+
"aria_label": "alarms", "badge": 0,
|
|
3163
|
+
"action": {"type": "navigate", "route": "/alarms"} }
|
|
3164
|
+
]},
|
|
3165
|
+
"menu": {"primary": {"items": [
|
|
3166
|
+
{ "id": "alarms", "name": "alarms", "icon": "yi-triangle-exclamation", "route": "/alarms",
|
|
3167
|
+
"badge": 0, "badge_tone": "warning",
|
|
3168
|
+
"target": {"stage": "main", "gclass": "C_ALARMS"} }
|
|
3169
|
+
]}}
|
|
3162
3170
|
|
|
3163
3171
|
/* the interface that matters: a count is a RUNTIME fact */
|
|
3164
|
-
yui_shell_set_toolbar_item_badge(shell, "
|
|
3165
|
-
|
|
3172
|
+
yui_shell_set_toolbar_item_badge(shell, "bell", 3);
|
|
3173
|
+
yui_shell_set_nav_item_badge(shell, "alarms", 3);
|
|
3174
|
+
yui_shell_set_nav_item_badge(shell, "alarms", 3, "danger"); // with a tone
|
|
3175
|
+
yui_shell_set_nav_item_badge(shell, "alarms", 0); // clears it
|
|
3166
3176
|
```
|
|
3167
3177
|
|
|
3168
3178
|
An icon-only toolbar button is a link; the badge is what makes it a
|
|
3169
3179
|
**signal**. Without a number, an alarm bell cannot say whether anything needs
|
|
3170
|
-
you — which is the reason to look at it at all.
|
|
3180
|
+
you — which is the reason to look at it at all. The same goes for the menu
|
|
3181
|
+
entry that leads to the alarms.
|
|
3171
3182
|
|
|
3172
|
-
Rules baked in,
|
|
3173
|
-
badge):
|
|
3183
|
+
Rules baked in, the same for both (`src/yui_badge.js` draws and paints them),
|
|
3184
|
+
all for the same reason (a badge that lies costs more than no badge):
|
|
3174
3185
|
|
|
3175
3186
|
- **`0`, `""`, `null` and `false` all clear it.** A badge reading "0" is worse
|
|
3176
3187
|
than none: it draws the eye to say nothing.
|
|
3177
|
-
- **Over 99 renders `99+`.** The toolbar
|
|
3178
|
-
pill pushes its neighbours off a phone screen.
|
|
3188
|
+
- **Over 99 renders `99+`.** The toolbar and an icon bar are fixed-width rows
|
|
3189
|
+
and a four-digit pill pushes its neighbours off a phone screen.
|
|
3179
3190
|
- **A string passes through** for the states that are not counts (`"!"`, `"…"`).
|
|
3180
|
-
- **
|
|
3181
|
-
|
|
3191
|
+
- **A tone, optional:** `"danger"` (the default look), `"warning"`, `"info"`,
|
|
3192
|
+
`"success"`, `"primary"` or `"link"` — Bulma's `is-<tone>` on the badge, to
|
|
3193
|
+
say HOW BAD the count is (the alarms coloured by the worst state among
|
|
3194
|
+
them). A fill: the raw Bulma token under its `-invert` ink, the same pair in
|
|
3195
|
+
both themes. **An unknown tone is logged** (`log_error`) and drawn with the
|
|
3196
|
+
default look. Each call states the WHOLE badge: a call without a tone draws
|
|
3197
|
+
the default look, so a call with three arguments works as it always did.
|
|
3198
|
+
- **Unknown item id is a silent no-op**, so an app whose toolbar or menu has no
|
|
3199
|
+
such item does not log an error on every tick of whatever feeds the number.
|
|
3182
3200
|
- Writing the **same** value again touches no DOM: the badge is a
|
|
3183
3201
|
`role="status"` live region, and rewriting it would have a screen reader
|
|
3184
3202
|
announce the same number on every tick.
|
|
3185
3203
|
|
|
3186
|
-
`role="status"` and not `aria-hidden`, deliberately: the button
|
|
3187
|
-
explicit `aria-label`, and an explicit label **replaces** an
|
|
3188
|
-
for a screen reader — a badge inside it would otherwise be
|
|
3189
|
-
live region it is both read and announced when it changes.
|
|
3190
|
-
|
|
3191
|
-
|
|
3192
|
-
|
|
3193
|
-
|
|
3204
|
+
`role="status"` and not `aria-hidden`, deliberately: the button or link
|
|
3205
|
+
carries an explicit `aria-label`, and an explicit label **replaces** an
|
|
3206
|
+
element's content for a screen reader — a badge inside it would otherwise be
|
|
3207
|
+
silent. As its own live region it is both read and announced when it changes.
|
|
3208
|
+
|
|
3209
|
+
**The menu entry's badge reaches every instance of the id.** A menu hosted by
|
|
3210
|
+
two zones (a rail on desktop, an icon bar on a phone) draws the same entry
|
|
3211
|
+
twice, and a drawer may repeat it: one `yui_shell_set_nav_item_badge()` call
|
|
3212
|
+
paints them all (it sends `EV_SET_ITEM_BADGE` to every `C_YUI_NAV` of the
|
|
3213
|
+
shell). And the value is KEPT — by each nav, in its `badges` attr, and by the
|
|
3214
|
+
shell, for the navs it creates later — so a rebuild draws it again: a
|
|
3215
|
+
`yui_shell_set_submenu()` with new item objects, a `submenu.index` landing
|
|
3216
|
+
mounted after the call. Once the call has spoken for an id, its value wins
|
|
3217
|
+
over the `badge` of any item with that id. It covers the entries of
|
|
3218
|
+
`app_config.json`'s menus and submenus and the items given to
|
|
3219
|
+
`yui_shell_set_submenu()`; the nodes of a `C_YUI_NODE` tree are not menu
|
|
3220
|
+
items, and carry none.
|
|
3221
|
+
|
|
3222
|
+
Where it sits: on the corner of the icon where the entry is an icon over its
|
|
3223
|
+
label (`icon-bar`, `cards`, a stacked item) or an icon alone; after the label
|
|
3224
|
+
elsewhere (`vertical`, `drawer`, `submenu`, `tabs`, an `accordion` head or
|
|
3225
|
+
leaf). A `breadcrumb` draws none, deliberately: a crumb names a step of the way
|
|
3226
|
+
in, and the count belongs to the entry that leads there. Logical class
|
|
3227
|
+
`NAV_ITEM_BADGE` (`TOOLBAR_ITEM_BADGE` in the toolbar), look `yui-badge`.
|
|
3194
3228
|
|
|
3195
3229
|
### Toasts — `yui_shell_show_info` / `_warning` / `_error`
|
|
3196
3230
|
|