@zeyos/zx 4.3.4 → 4.4.0
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 +155 -0
- package/README.md +7 -0
- package/dist/types/components/activity-item/activity-item.d.ts +351 -0
- package/dist/types/components/activity-list/activity-list.d.ts +195 -0
- package/dist/types/components/app-sidebar/app-sidebar.d.ts +28 -0
- package/dist/types/components/button/button.d.ts +8 -0
- package/dist/types/components/calendar/calendar.d.ts +19 -0
- package/dist/types/components/card/card.d.ts +7 -0
- package/dist/types/components/card-view/card-view.d.ts +11 -3
- package/dist/types/components/card-view/record-card.d.ts +7 -1
- package/dist/types/components/code-editor/code-editor.d.ts +160 -0
- package/dist/types/components/code-editor/field-adapter.d.ts +5 -0
- package/dist/types/components/context-menu/context-menu.d.ts +18 -2
- package/dist/types/components/date-picker/date-picker.d.ts +8 -0
- package/dist/types/components/date-picker/time-picker.d.ts +7 -0
- package/dist/types/components/dialog/dialog.d.ts +29 -0
- package/dist/types/components/entity-ref/entity-ref.d.ts +331 -0
- package/dist/types/components/file-item/file-item.d.ts +234 -0
- package/dist/types/components/file-list/file-list.d.ts +171 -0
- package/dist/types/components/filter/filter.d.ts +91 -36
- package/dist/types/components/filter-panel/filter-panel.d.ts +449 -0
- package/dist/types/components/kanban-view/kanban-card.d.ts +138 -0
- package/dist/types/components/kanban-view/kanban-view.d.ts +170 -4
- package/dist/types/components/launcher/launcher.d.ts +19 -12
- package/dist/types/components/list-toolbar/list-toolbar.d.ts +599 -0
- package/dist/types/components/menu-button/menu-button.d.ts +4 -37
- package/dist/types/components/message/message.d.ts +7 -0
- package/dist/types/components/modal/modal.d.ts +48 -0
- package/dist/types/components/navigation-bar/navigation-bar.d.ts +105 -21
- package/dist/types/components/panel/panel.d.ts +7 -0
- package/dist/types/components/search/search.d.ts +7 -0
- package/dist/types/components/select/select.d.ts +4 -0
- package/dist/types/components/sort-control/sort-control.d.ts +105 -0
- package/dist/types/components/stat-tile/stat-tile.d.ts +277 -0
- package/dist/types/components/tabbox/tabbox.d.ts +7 -0
- package/dist/types/components/table/table.d.ts +144 -0
- package/dist/types/components/table-view/table-view.d.ts +11 -5
- package/dist/types/components/timebox/timebox.d.ts +7 -0
- package/dist/types/components/value-list/value-list.d.ts +8 -0
- package/dist/types/components/view/record-view.d.ts +96 -5
- package/dist/types/core/icons.d.ts +17 -0
- package/dist/types/index.d.ts +11 -0
- package/dist/types/internal/app-rail.d.ts +10 -0
- package/dist/types/internal/menu-items.d.ts +134 -0
- package/dist/zx-zeyos.esm.js +616 -77
- package/dist/zx-zeyos.esm.min.js +8 -1
- package/dist/zx.css +2085 -238
- package/dist/zx.esm.js +6704 -1542
- package/dist/zx.esm.min.js +10 -3
- package/dist/zx.global.js +6704 -1542
- package/dist/zx.global.min.js +10 -3
- package/dist/zx.min.css +1 -1
- package/docs/api.json +1479 -127
- package/docs/llms.md +315 -10
- package/docs/llms.txt +11 -5
- package/package.json +1 -1
- package/src/components/activity-item/activity-item.css +137 -0
- package/src/components/activity-item/activity-item.js +599 -0
- package/src/components/activity-list/activity-list.css +64 -0
- package/src/components/activity-list/activity-list.js +375 -0
- package/src/components/app-rail/app-rail.css +227 -19
- package/src/components/app-sidebar/app-sidebar.css +414 -24
- package/src/components/app-sidebar/app-sidebar.js +65 -5
- package/src/components/button/button.css +8 -0
- package/src/components/button/button.js +6 -1
- package/src/components/calendar/calendar.js +33 -3
- package/src/components/card/card.js +12 -1
- package/src/components/card-view/card-view.css +1 -0
- package/src/components/card-view/card-view.js +25 -9
- package/src/components/card-view/record-card.js +7 -3
- package/src/components/code-editor/code-editor.css +67 -0
- package/src/components/code-editor/code-editor.js +288 -0
- package/src/components/code-editor/field-adapter.js +34 -0
- package/src/components/context-menu/context-menu.css +80 -3
- package/src/components/context-menu/context-menu.js +22 -30
- package/src/components/date-picker/date-picker.js +22 -8
- package/src/components/date-picker/month-picker.js +3 -3
- package/src/components/date-picker/time-picker.js +20 -8
- package/src/components/dialog/dialog.js +88 -66
- package/src/components/dropdown/dropdown.js +2 -2
- package/src/components/entity-ref/entity-ref.css +182 -0
- package/src/components/entity-ref/entity-ref.js +496 -0
- package/src/components/file-item/file-item.css +88 -0
- package/src/components/file-item/file-item.js +371 -0
- package/src/components/file-list/file-list.css +51 -0
- package/src/components/file-list/file-list.js +320 -0
- package/src/components/filter/filter.css +27 -1
- package/src/components/filter/filter.js +199 -45
- package/src/components/filter-panel/filter-panel.css +104 -0
- package/src/components/filter-panel/filter-panel.js +964 -0
- package/src/components/kanban-view/kanban-card.js +239 -0
- package/src/components/kanban-view/kanban-view.css +194 -0
- package/src/components/kanban-view/kanban-view.js +251 -8
- package/src/components/launcher/launcher.js +59 -27
- package/src/components/list-toolbar/list-toolbar.css +189 -0
- package/src/components/list-toolbar/list-toolbar.js +851 -0
- package/src/components/menu-button/menu-button.css +80 -3
- package/src/components/menu-button/menu-button.js +21 -37
- package/src/components/message/message.css +5 -2
- package/src/components/message/message.js +13 -2
- package/src/components/modal/modal.css +15 -0
- package/src/components/modal/modal.js +141 -0
- package/src/components/navigation-bar/navigation-bar.css +77 -2
- package/src/components/navigation-bar/navigation-bar.js +171 -4
- package/src/components/panel/panel.js +13 -2
- package/src/components/search/search.js +17 -5
- package/src/components/select/field-adapter.js +4 -1
- package/src/components/select/select.js +3 -0
- package/src/components/sort-control/sort-control.css +17 -0
- package/src/components/sort-control/sort-control.js +140 -0
- package/src/components/stat-tile/stat-tile.css +213 -0
- package/src/components/stat-tile/stat-tile.js +590 -0
- package/src/components/tabbox/tabbox.js +12 -1
- package/src/components/table/table.css +51 -2
- package/src/components/table/table.js +298 -19
- package/src/components/table-view/table-view.css +8 -2
- package/src/components/table-view/table-view.js +21 -6
- package/src/components/tag-picker/tag-picker.css +3 -1
- package/src/components/timebox/timebox.js +18 -5
- package/src/components/value-list/value-list.js +22 -6
- package/src/components/view/record-view.css +5 -0
- package/src/components/view/record-view.js +100 -7
- package/src/core/icons.js +74 -5
- package/src/index.js +25 -0
- package/src/internal/app-rail.js +19 -1
- package/src/internal/menu-items.js +142 -0
- package/styles/print.css +192 -0
- package/styles/zx.css +11 -0
|
@@ -0,0 +1,599 @@
|
|
|
1
|
+
import { Component } from '../../core/component.js';
|
|
2
|
+
import { Search } from '../search/search.js';
|
|
3
|
+
export type ListToolbarSearch = {
|
|
4
|
+
/**
|
|
5
|
+
* Field placeholder; also names the field. Defaults to the
|
|
6
|
+
* `listToolbar.search` message.
|
|
7
|
+
*/
|
|
8
|
+
placeholder?: string;
|
|
9
|
+
/**
|
|
10
|
+
* Initial query.
|
|
11
|
+
*/
|
|
12
|
+
value?: string;
|
|
13
|
+
/**
|
|
14
|
+
* Debounce before `search` is emitted, in milliseconds.
|
|
15
|
+
*/
|
|
16
|
+
debounce?: number;
|
|
17
|
+
/**
|
|
18
|
+
* Whether the field shows its clear control.
|
|
19
|
+
*/
|
|
20
|
+
clearable?: boolean;
|
|
21
|
+
};
|
|
22
|
+
export type ListToolbarTool = {
|
|
23
|
+
/**
|
|
24
|
+
* Stable identifier, reported by `action` and addressed by `setBadge()`.
|
|
25
|
+
*/
|
|
26
|
+
id: string;
|
|
27
|
+
/**
|
|
28
|
+
* Visible label, and the base of the accessible name.
|
|
29
|
+
*/
|
|
30
|
+
label?: string;
|
|
31
|
+
/**
|
|
32
|
+
* Icon name from `icons.js`.
|
|
33
|
+
*/
|
|
34
|
+
icon?: string | null;
|
|
35
|
+
/**
|
|
36
|
+
* Badge content. `null` renders no badge; `0` is a
|
|
37
|
+
* value and renders one.
|
|
38
|
+
*/
|
|
39
|
+
badge?: string | number | null;
|
|
40
|
+
/**
|
|
41
|
+
* Badge intent.
|
|
42
|
+
*/
|
|
43
|
+
badgeKind?: 'neutral' | 'accent' | 'success' | 'warning' | 'danger' | 'info';
|
|
44
|
+
/**
|
|
45
|
+
* Present makes the tool a toggle (`aria-pressed`), which flips on
|
|
46
|
+
* activation; absent makes it a plain button.
|
|
47
|
+
*/
|
|
48
|
+
pressed?: boolean;
|
|
49
|
+
/**
|
|
50
|
+
* Whether the tool starts disabled.
|
|
51
|
+
*/
|
|
52
|
+
disabled?: boolean;
|
|
53
|
+
/**
|
|
54
|
+
* Native tooltip; defaults to the accessible name.
|
|
55
|
+
*/
|
|
56
|
+
title?: string;
|
|
57
|
+
/**
|
|
58
|
+
* Callback, called after the `action` event.
|
|
59
|
+
*/
|
|
60
|
+
onclick?: (event: MouseEvent) => void;
|
|
61
|
+
};
|
|
62
|
+
export type ListToolbarView = {
|
|
63
|
+
/**
|
|
64
|
+
* View identifier reported by `viewchange`.
|
|
65
|
+
*/
|
|
66
|
+
id: string;
|
|
67
|
+
/**
|
|
68
|
+
* Visible label; omitted falls back to the built-in preset word.
|
|
69
|
+
*/
|
|
70
|
+
label?: string;
|
|
71
|
+
/**
|
|
72
|
+
* Icon name from `icons.js`.
|
|
73
|
+
*/
|
|
74
|
+
icon?: string | null;
|
|
75
|
+
};
|
|
76
|
+
export type ListToolbarOptions = {
|
|
77
|
+
/**
|
|
78
|
+
* Search field configuration; `false` omits it.
|
|
79
|
+
*/
|
|
80
|
+
search?: ListToolbarSearch | boolean;
|
|
81
|
+
/**
|
|
82
|
+
* Initial result count shown in the live status line.
|
|
83
|
+
*/
|
|
84
|
+
count?: number | null;
|
|
85
|
+
/**
|
|
86
|
+
* Formats the count line; omitted
|
|
87
|
+
* uses the `listToolbar.results` message (`'%1 results'`).
|
|
88
|
+
*/
|
|
89
|
+
countText?: ((count: number) => string) | null;
|
|
90
|
+
/**
|
|
91
|
+
* Shape switch entries; `[]` omits the switch.
|
|
92
|
+
*/
|
|
93
|
+
views?: Array<string | ListToolbarView>;
|
|
94
|
+
/**
|
|
95
|
+
* Initially selected shape; omitted selects the first entry.
|
|
96
|
+
*/
|
|
97
|
+
view?: string | null;
|
|
98
|
+
/**
|
|
99
|
+
* Tool buttons, in display order.
|
|
100
|
+
*/
|
|
101
|
+
tools?: ListToolbarTool[];
|
|
102
|
+
/**
|
|
103
|
+
* Accessible name of the bar; omitted uses the
|
|
104
|
+
* `listToolbar.label` message.
|
|
105
|
+
*/
|
|
106
|
+
label?: string | null;
|
|
107
|
+
/**
|
|
108
|
+
* Localized messages.
|
|
109
|
+
*/
|
|
110
|
+
msg?: Record<string, string> | Record<string, Record<string, string>>;
|
|
111
|
+
/**
|
|
112
|
+
* Search listener.
|
|
113
|
+
*/
|
|
114
|
+
onsearch?: (event: CustomEvent<{
|
|
115
|
+
value: string;
|
|
116
|
+
}>) => void;
|
|
117
|
+
/**
|
|
118
|
+
* Shape listener.
|
|
119
|
+
*/
|
|
120
|
+
onviewchange?: (event: CustomEvent<{
|
|
121
|
+
view: string;
|
|
122
|
+
previous: string | null;
|
|
123
|
+
}>) => void;
|
|
124
|
+
/**
|
|
125
|
+
* Tool listener.
|
|
126
|
+
*/
|
|
127
|
+
onaction?: (event: CustomEvent<{
|
|
128
|
+
id: string;
|
|
129
|
+
pressed: boolean | null;
|
|
130
|
+
tool: Element;
|
|
131
|
+
}>) => void;
|
|
132
|
+
};
|
|
133
|
+
/**
|
|
134
|
+
* @typedef {Object} ListToolbarSearch
|
|
135
|
+
* @property {string} [placeholder] Field placeholder; also names the field. Defaults to the
|
|
136
|
+
* `listToolbar.search` message.
|
|
137
|
+
* @property {string} [value=''] Initial query.
|
|
138
|
+
* @property {number} [debounce=250] Debounce before `search` is emitted, in milliseconds.
|
|
139
|
+
* @property {boolean} [clearable=true] Whether the field shows its clear control.
|
|
140
|
+
*/
|
|
141
|
+
/**
|
|
142
|
+
* @typedef {Object} ListToolbarTool
|
|
143
|
+
* @property {string} id Stable identifier, reported by `action` and addressed by `setBadge()`.
|
|
144
|
+
* @property {string} [label=''] Visible label, and the base of the accessible name.
|
|
145
|
+
* @property {string|null} [icon=null] Icon name from `icons.js`.
|
|
146
|
+
* @property {string|number|null} [badge=null] Badge content. `null` renders no badge; `0` is a
|
|
147
|
+
* value and renders one.
|
|
148
|
+
* @property {'neutral'|'accent'|'success'|'warning'|'danger'|'info'} [badgeKind='accent'] Badge intent.
|
|
149
|
+
* @property {boolean} [pressed] Present makes the tool a toggle (`aria-pressed`), which flips on
|
|
150
|
+
* activation; absent makes it a plain button.
|
|
151
|
+
* @property {boolean} [disabled=false] Whether the tool starts disabled.
|
|
152
|
+
* @property {string} [title] Native tooltip; defaults to the accessible name.
|
|
153
|
+
* @property {(event: MouseEvent) => void} [onclick] Callback, called after the `action` event.
|
|
154
|
+
*/
|
|
155
|
+
/**
|
|
156
|
+
* @typedef {Object} ListToolbarView
|
|
157
|
+
* @property {string} id View identifier reported by `viewchange`.
|
|
158
|
+
* @property {string} [label] Visible label; omitted falls back to the built-in preset word.
|
|
159
|
+
* @property {string|null} [icon] Icon name from `icons.js`.
|
|
160
|
+
*/
|
|
161
|
+
/**
|
|
162
|
+
* @typedef {Object} ListToolbarOptions
|
|
163
|
+
* @property {ListToolbarSearch|boolean} [search={}] Search field configuration; `false` omits it.
|
|
164
|
+
* @property {number|null} [count=null] Initial result count shown in the live status line.
|
|
165
|
+
* @property {((count: number) => string)|null} [countText=null] Formats the count line; omitted
|
|
166
|
+
* uses the `listToolbar.results` message (`'%1 results'`).
|
|
167
|
+
* @property {Array<string|ListToolbarView>} [views=[]] Shape switch entries; `[]` omits the switch.
|
|
168
|
+
* @property {string|null} [view=null] Initially selected shape; omitted selects the first entry.
|
|
169
|
+
* @property {ListToolbarTool[]} [tools=[]] Tool buttons, in display order.
|
|
170
|
+
* @property {string|null} [label=null] Accessible name of the bar; omitted uses the
|
|
171
|
+
* `listToolbar.label` message.
|
|
172
|
+
* @property {Record<string, string>|Record<string, Record<string, string>>} [msg] Localized messages.
|
|
173
|
+
* @property {(event: CustomEvent<{value: string}>) => void} [onsearch] Search listener.
|
|
174
|
+
* @property {(event: CustomEvent<{view: string, previous: string|null}>) => void} [onviewchange] Shape listener.
|
|
175
|
+
* @property {(event: CustomEvent<{id: string, pressed: boolean|null, tool: Element}>) => void} [onaction] Tool listener.
|
|
176
|
+
*/
|
|
177
|
+
/**
|
|
178
|
+
* The bar above a record view: one search field, a live result count, the tools that change what
|
|
179
|
+
* the list shows, and the shape switch. Every application writes this row, and most of them write
|
|
180
|
+
* it slightly wrong — this is the composition, not a new primitive. It builds on `Search` and
|
|
181
|
+
* `badge()` and reimplements neither.
|
|
182
|
+
*
|
|
183
|
+
* This is not `Toolbar`, which stays the right component for a row of commands. `Toolbar` is the
|
|
184
|
+
* APG toolbar pattern — one tab stop, arrow keys between controls — and it collapses whatever no
|
|
185
|
+
* longer fits into an overflow menu. Both are wrong here: the row contains a text input, where
|
|
186
|
+
* arrow keys must move the caret, and the first thing an overflow menu would swallow is the badge
|
|
187
|
+
* saying why the list is showing four rows out of twenty.
|
|
188
|
+
*
|
|
189
|
+
* Three properties are the reason it exists:
|
|
190
|
+
*
|
|
191
|
+
* - **A tool's badge is part of its accessible name.** A tool showing `2` announces as
|
|
192
|
+
* "Filters (2)"; the badge itself is `aria-hidden`, so the number is heard once, as part of the
|
|
193
|
+
* control, rather than found separately beside it.
|
|
194
|
+
* - **The count line is a live region**, and `setCount(null)` clears it. The previous number
|
|
195
|
+
* describes the previous filters, and a stale count during a load is worse than none.
|
|
196
|
+
* - **Tool buttons meet the 44 px target** in both densities. An icon button sized to its glyph is
|
|
197
|
+
* the control people miss twice before hitting once.
|
|
198
|
+
*
|
|
199
|
+
* `bind()` is optional sugar; the toolbar is fully functional without it.
|
|
200
|
+
* @fires ListToolbar#search
|
|
201
|
+
* @fires ListToolbar#viewchange
|
|
202
|
+
* @fires ListToolbar#action
|
|
203
|
+
* @extends {Component<ListToolbarOptions>}
|
|
204
|
+
*/
|
|
205
|
+
export declare class ListToolbar extends Component<ListToolbarOptions> {
|
|
206
|
+
_createdRoot: boolean;
|
|
207
|
+
_snapshot: import("../../core/dom.js").TargetSnapshot;
|
|
208
|
+
_destroyed: boolean;
|
|
209
|
+
/** @type {Map<string, ToolRecord>} */
|
|
210
|
+
_tools: Map<string, ToolRecord>;
|
|
211
|
+
_views: {
|
|
212
|
+
id: string;
|
|
213
|
+
label?: string;
|
|
214
|
+
icon?: string | null;
|
|
215
|
+
}[];
|
|
216
|
+
_view: any;
|
|
217
|
+
_count: number;
|
|
218
|
+
/** @type {Search|null} */
|
|
219
|
+
_search: Search | null;
|
|
220
|
+
/** @type {{view: Record<string, any>, capabilities: RecordViewCapabilities}|null} */
|
|
221
|
+
_bound: {
|
|
222
|
+
view: Record<string, any>;
|
|
223
|
+
capabilities: RecordViewCapabilities;
|
|
224
|
+
} | null;
|
|
225
|
+
/** @type {AdoptedElement[]} */
|
|
226
|
+
_adopted: AdoptedElement[];
|
|
227
|
+
/** @type {AdoptedElement|null} */
|
|
228
|
+
_chooser: AdoptedElement | null;
|
|
229
|
+
static cssName: string;
|
|
230
|
+
/** @type {Readonly<ListToolbarOptions>} */
|
|
231
|
+
static defaults: Readonly<ListToolbarOptions>;
|
|
232
|
+
/**
|
|
233
|
+
* Creates the bar, or turns an existing element into one.
|
|
234
|
+
* @param {Element|string|null} [target=null] Existing container, selector, or null to create one.
|
|
235
|
+
* @param {ListToolbarOptions} [options={}] Toolbar options.
|
|
236
|
+
*/
|
|
237
|
+
constructor(target?: Element | string | null, options?: ListToolbarOptions);
|
|
238
|
+
/**
|
|
239
|
+
* Builds the bar. Runs inside the base constructor, so every piece of instance state is
|
|
240
|
+
* initialized here rather than in a class field.
|
|
241
|
+
* @returns {HTMLElement}
|
|
242
|
+
*/
|
|
243
|
+
render(): HTMLElement;
|
|
244
|
+
/**
|
|
245
|
+
* Replaces the count line. `null` clears it, which is the right answer while a request is in
|
|
246
|
+
* flight: the number on screen describes the filters the reader has just changed.
|
|
247
|
+
* @param {number|null} count Result count, or null.
|
|
248
|
+
* @returns {this}
|
|
249
|
+
*/
|
|
250
|
+
setCount(count: number | null): this;
|
|
251
|
+
/**
|
|
252
|
+
* Returns the count currently shown, or null when the line is empty.
|
|
253
|
+
* @returns {number|null}
|
|
254
|
+
*/
|
|
255
|
+
getCount(): number | null;
|
|
256
|
+
/**
|
|
257
|
+
* Replaces a tool's badge and its accessible name with it. `null` removes the badge.
|
|
258
|
+
* @param {string} id Tool id.
|
|
259
|
+
* @param {string|number|null} value Badge content; `0` is a value, `null` removes it.
|
|
260
|
+
* @returns {this}
|
|
261
|
+
*/
|
|
262
|
+
setBadge(id: string, value: string | number | null): this;
|
|
263
|
+
/**
|
|
264
|
+
* Sets the pressed state of a toggle tool. A tool declared without `pressed` is a plain button
|
|
265
|
+
* and is left alone.
|
|
266
|
+
* @param {string} id Tool id.
|
|
267
|
+
* @param {boolean} [pressed=true] Next state.
|
|
268
|
+
* @returns {this}
|
|
269
|
+
*/
|
|
270
|
+
setPressed(id: string, pressed?: boolean): this;
|
|
271
|
+
/**
|
|
272
|
+
* Enables or disables a tool, for instance while its panel is loading.
|
|
273
|
+
* @param {string} id Tool id.
|
|
274
|
+
* @param {boolean} [disabled=true] Next state.
|
|
275
|
+
* @returns {this}
|
|
276
|
+
*/
|
|
277
|
+
setToolDisabled(id: string, disabled?: boolean): this;
|
|
278
|
+
/**
|
|
279
|
+
* Replaces every tool. Elements adopted with `addTool()` and a chooser mounted by `bind()` stay
|
|
280
|
+
* where they are.
|
|
281
|
+
* @param {ListToolbarTool[]} tools Tool descriptors.
|
|
282
|
+
* @returns {this}
|
|
283
|
+
*/
|
|
284
|
+
setTools(tools: ListToolbarTool[]): this;
|
|
285
|
+
/**
|
|
286
|
+
* Returns a tool's button element.
|
|
287
|
+
* @param {string} id Tool id.
|
|
288
|
+
* @returns {HTMLButtonElement|null}
|
|
289
|
+
*/
|
|
290
|
+
getTool(id: string): HTMLButtonElement | null;
|
|
291
|
+
/**
|
|
292
|
+
* The element tools are mounted into. Hand it to a view as `fieldControls: {target}` to place
|
|
293
|
+
* that view's field chooser in this bar without calling `bind()`.
|
|
294
|
+
*
|
|
295
|
+
* A control mounted here by somebody else stays theirs: the toolbar puts back what it adopted
|
|
296
|
+
* through `addTool()` or `bind()`, and everything else goes wherever this slot goes. Use
|
|
297
|
+
* `addTool()` instead to hand the toolbar an element it should return on `destroy()`.
|
|
298
|
+
* @returns {HTMLElement}
|
|
299
|
+
*/
|
|
300
|
+
getToolsElement(): HTMLElement;
|
|
301
|
+
/**
|
|
302
|
+
* Adopts a ready-made control into the tools slot. The element's original position is recorded,
|
|
303
|
+
* and `destroy()` puts it back.
|
|
304
|
+
* @param {Element} element Control to mount.
|
|
305
|
+
* @returns {this}
|
|
306
|
+
*/
|
|
307
|
+
addTool(element: Element): this;
|
|
308
|
+
/**
|
|
309
|
+
* Selects a view shape. A value outside `views` is ignored, so the switch can only ever report
|
|
310
|
+
* one of the shapes it was configured with.
|
|
311
|
+
* @param {string} view View id.
|
|
312
|
+
* @param {{silent?: boolean}} [options={}] Set `silent` to suppress `viewchange`.
|
|
313
|
+
* @returns {this}
|
|
314
|
+
* @fires ListToolbar#viewchange
|
|
315
|
+
*/
|
|
316
|
+
setView(view: string, { silent }?: {
|
|
317
|
+
silent?: boolean;
|
|
318
|
+
}): this;
|
|
319
|
+
/**
|
|
320
|
+
* Returns the selected view shape, or null when no shape switch is configured.
|
|
321
|
+
* @returns {string|null}
|
|
322
|
+
*/
|
|
323
|
+
getView(): string | null;
|
|
324
|
+
/**
|
|
325
|
+
* Returns the current query, or an empty string when the field is omitted.
|
|
326
|
+
* @returns {string}
|
|
327
|
+
*/
|
|
328
|
+
getSearch(): string;
|
|
329
|
+
/**
|
|
330
|
+
* Sets the query.
|
|
331
|
+
* @param {string} value Next query.
|
|
332
|
+
* @param {{silent?: boolean}} [options={}] Set `silent` to suppress `search`.
|
|
333
|
+
* @returns {this}
|
|
334
|
+
*/
|
|
335
|
+
setSearch(value: string, options?: {
|
|
336
|
+
silent?: boolean;
|
|
337
|
+
}): this;
|
|
338
|
+
/**
|
|
339
|
+
* Focuses the search field, for a host that binds a "/" shortcut.
|
|
340
|
+
* @returns {this}
|
|
341
|
+
*/
|
|
342
|
+
focusSearch(): this;
|
|
343
|
+
/**
|
|
344
|
+
* Optional sugar for a `TableView` or `CardView`: it wires the shape switch to the view and
|
|
345
|
+
* mounts the view's field chooser into this bar.
|
|
346
|
+
*
|
|
347
|
+
* Nothing is imported and nothing is required — every capability is feature-detected, so a view
|
|
348
|
+
* that offers none of them still works and still gets `viewchange`, and the host swaps the view
|
|
349
|
+
* itself. See `recordViewCapabilities()` for what is looked for.
|
|
350
|
+
* @param {object} view A record view, or anything that quacks like one.
|
|
351
|
+
* @returns {this}
|
|
352
|
+
*/
|
|
353
|
+
bind(view: object): this;
|
|
354
|
+
/**
|
|
355
|
+
* Releases a bound view and returns its field chooser to where it was found.
|
|
356
|
+
* @returns {this}
|
|
357
|
+
*/
|
|
358
|
+
unbind(): this;
|
|
359
|
+
/**
|
|
360
|
+
* Destroys the search field, returns every adopted control to where it came from, and restores
|
|
361
|
+
* an enhanced target to the markup it had before the takeover.
|
|
362
|
+
* @returns {void}
|
|
363
|
+
*/
|
|
364
|
+
destroy(): void;
|
|
365
|
+
/** @returns {import('../search/search.js').SearchOptions|null} The options `Search` is built with. */
|
|
366
|
+
_searchOptions(): import('../search/search.js').SearchOptions | null;
|
|
367
|
+
/** @returns {(count: number) => string} The count formatter, host-supplied or translated. */
|
|
368
|
+
_countFormat(): (count: number) => string;
|
|
369
|
+
/**
|
|
370
|
+
* Builds one tool button.
|
|
371
|
+
* @param {Required<ListToolbarTool>} descriptor Normalized descriptor.
|
|
372
|
+
* @returns {ToolRecord}
|
|
373
|
+
*/
|
|
374
|
+
_createTool(descriptor: Required<ListToolbarTool>): ToolRecord;
|
|
375
|
+
/**
|
|
376
|
+
* Rebuilds a tool's badge and the accessible name that carries it.
|
|
377
|
+
*
|
|
378
|
+
* The badge element is `aria-hidden`: the number it shows is already in the button's name, and a
|
|
379
|
+
* screen reader meeting both would announce "Filters 2 2".
|
|
380
|
+
* @param {ToolRecord} record Tool record.
|
|
381
|
+
* @returns {void}
|
|
382
|
+
*/
|
|
383
|
+
_syncTool(record: ToolRecord): void;
|
|
384
|
+
/**
|
|
385
|
+
* Reports a tool activation and flips a toggle tool.
|
|
386
|
+
* @param {MouseEvent} event Click event.
|
|
387
|
+
* @returns {void}
|
|
388
|
+
* @fires ListToolbar#action
|
|
389
|
+
*/
|
|
390
|
+
_toolClick(event: MouseEvent): void;
|
|
391
|
+
/**
|
|
392
|
+
* Selects the clicked shape.
|
|
393
|
+
* @param {MouseEvent} event Click event.
|
|
394
|
+
* @returns {void}
|
|
395
|
+
*/
|
|
396
|
+
_viewClick(event: MouseEvent): void;
|
|
397
|
+
/** Rebuilds the shape switch, or just its pressed states. @returns {void} */
|
|
398
|
+
_syncViews(): void;
|
|
399
|
+
/**
|
|
400
|
+
* @param {string} id View id.
|
|
401
|
+
* @returns {string} The translated preset word, or the id when the shape is the host's own.
|
|
402
|
+
*/
|
|
403
|
+
_viewLabel(id: string): string;
|
|
404
|
+
/**
|
|
405
|
+
* Moves a bound view's field chooser into the tools slot. A view that mounted it here itself —
|
|
406
|
+
* `fieldControls: {target: toolbar.getToolsElement()}` — is already where it belongs and is left
|
|
407
|
+
* alone, and a view with `fieldControls: false` has none to move.
|
|
408
|
+
* @param {Record<string, any>} view Bound view.
|
|
409
|
+
* @returns {void}
|
|
410
|
+
*/
|
|
411
|
+
_mountFieldControls(view: Record<string, any>): void;
|
|
412
|
+
/**
|
|
413
|
+
* Finds a view's field chooser without importing the view, newest accessor first.
|
|
414
|
+
* @param {Record<string, any>} view Bound view.
|
|
415
|
+
* @returns {Element|null}
|
|
416
|
+
*/
|
|
417
|
+
_findFieldControls(view: Record<string, any>): Element | null;
|
|
418
|
+
/**
|
|
419
|
+
* Resolves a message through the host translator, falling back to the built-in English text.
|
|
420
|
+
* @param {string} key Message key.
|
|
421
|
+
* @param {string} fallback Built-in text, with `%1`-style placeholders.
|
|
422
|
+
* @param {...unknown} args Interpolation values.
|
|
423
|
+
* @returns {string}
|
|
424
|
+
*/
|
|
425
|
+
_message(key: string, fallback: string, ...args: unknown[]): string;
|
|
426
|
+
}
|
|
427
|
+
export type ToolRecord = {
|
|
428
|
+
/**
|
|
429
|
+
* Tool id.
|
|
430
|
+
*/
|
|
431
|
+
id: string;
|
|
432
|
+
/**
|
|
433
|
+
* Rendered button.
|
|
434
|
+
*/
|
|
435
|
+
element: HTMLButtonElement;
|
|
436
|
+
/**
|
|
437
|
+
* Name the badge is composed onto.
|
|
438
|
+
*/
|
|
439
|
+
label: string;
|
|
440
|
+
/**
|
|
441
|
+
* Host-supplied tooltip.
|
|
442
|
+
*/
|
|
443
|
+
title: string | null;
|
|
444
|
+
/**
|
|
445
|
+
* Normalized badge content.
|
|
446
|
+
*/
|
|
447
|
+
badge: string | null;
|
|
448
|
+
/**
|
|
449
|
+
* Badge intent.
|
|
450
|
+
*/
|
|
451
|
+
badgeKind: string;
|
|
452
|
+
/**
|
|
453
|
+
* Rendered badge.
|
|
454
|
+
*/
|
|
455
|
+
badgeEl: HTMLElement | null;
|
|
456
|
+
/**
|
|
457
|
+
* Whether the tool carries `aria-pressed`.
|
|
458
|
+
*/
|
|
459
|
+
toggle: boolean;
|
|
460
|
+
/**
|
|
461
|
+
* Current pressed state.
|
|
462
|
+
*/
|
|
463
|
+
pressed: boolean;
|
|
464
|
+
/**
|
|
465
|
+
* Descriptor callback.
|
|
466
|
+
*/
|
|
467
|
+
onclick: ((event: MouseEvent) => void) | null;
|
|
468
|
+
};
|
|
469
|
+
export type AdoptedElement = {
|
|
470
|
+
element: Element;
|
|
471
|
+
parent: Node | null;
|
|
472
|
+
next: Node | null;
|
|
473
|
+
};
|
|
474
|
+
export type RecordViewCapabilities = {
|
|
475
|
+
/**
|
|
476
|
+
* Whether the object publishes the record-view state surface.
|
|
477
|
+
*/
|
|
478
|
+
isRecordView: boolean;
|
|
479
|
+
/**
|
|
480
|
+
* Method that changes the view shape, if any.
|
|
481
|
+
*/
|
|
482
|
+
setShape: string | null;
|
|
483
|
+
/**
|
|
484
|
+
* Method that reads the view shape, if any.
|
|
485
|
+
*/
|
|
486
|
+
getShape: string | null;
|
|
487
|
+
/**
|
|
488
|
+
* Whether the object emits component events.
|
|
489
|
+
*/
|
|
490
|
+
events: boolean;
|
|
491
|
+
/**
|
|
492
|
+
* Whether the object offers its field chooser through a method.
|
|
493
|
+
*/
|
|
494
|
+
fieldControls: boolean;
|
|
495
|
+
};
|
|
496
|
+
/**
|
|
497
|
+
* Debounced query change, and the reader pressing Enter.
|
|
498
|
+
* @event ListToolbar#search
|
|
499
|
+
* @type {CustomEvent<{value: string}>}
|
|
500
|
+
*/
|
|
501
|
+
/**
|
|
502
|
+
* Shape switch change.
|
|
503
|
+
* @event ListToolbar#viewchange
|
|
504
|
+
* @type {CustomEvent<{view: string, previous: string|null}>}
|
|
505
|
+
*/
|
|
506
|
+
/**
|
|
507
|
+
* Tool activation. `pressed` is the new state of a toggle tool, and null for a plain button.
|
|
508
|
+
* @event ListToolbar#action
|
|
509
|
+
* @type {CustomEvent<{id: string, pressed: boolean|null, tool: Element}>}
|
|
510
|
+
*/
|
|
511
|
+
/**
|
|
512
|
+
* @typedef {Object} ToolRecord
|
|
513
|
+
* @property {string} id Tool id.
|
|
514
|
+
* @property {HTMLButtonElement} element Rendered button.
|
|
515
|
+
* @property {string} label Name the badge is composed onto.
|
|
516
|
+
* @property {string|null} title Host-supplied tooltip.
|
|
517
|
+
* @property {string|null} badge Normalized badge content.
|
|
518
|
+
* @property {string} badgeKind Badge intent.
|
|
519
|
+
* @property {HTMLElement|null} badgeEl Rendered badge.
|
|
520
|
+
* @property {boolean} toggle Whether the tool carries `aria-pressed`.
|
|
521
|
+
* @property {boolean} pressed Current pressed state.
|
|
522
|
+
* @property {((event: MouseEvent) => void)|null} onclick Descriptor callback.
|
|
523
|
+
*/
|
|
524
|
+
/** @typedef {{element: Element, parent: Node|null, next: Node|null}} AdoptedElement */
|
|
525
|
+
/**
|
|
526
|
+
* @typedef {Object} RecordViewCapabilities
|
|
527
|
+
* @property {boolean} isRecordView Whether the object publishes the record-view state surface.
|
|
528
|
+
* @property {string|null} setShape Method that changes the view shape, if any.
|
|
529
|
+
* @property {string|null} getShape Method that reads the view shape, if any.
|
|
530
|
+
* @property {boolean} events Whether the object emits component events.
|
|
531
|
+
* @property {boolean} fieldControls Whether the object offers its field chooser through a method.
|
|
532
|
+
*/
|
|
533
|
+
/**
|
|
534
|
+
* Describes what `bind()` can wire on an object, by feature rather than by class.
|
|
535
|
+
*
|
|
536
|
+
* `ListToolbar` must not import `TableView` or `CardView`: it would hard-depend on two components
|
|
537
|
+
* a host may not use, and on their current shape. A record view is recognised instead by the state
|
|
538
|
+
* surface `RecordView` publishes — `setViewState`/`getViewState` plus the component event
|
|
539
|
+
* methods that carry `sortchange` and friends. Everything beyond that is optional and detected
|
|
540
|
+
* one method at a time, so a view that grows a shape switch later is wired the day it does.
|
|
541
|
+
*
|
|
542
|
+
* Pure: it reads types, never the DOM.
|
|
543
|
+
* @param {unknown} view Candidate view.
|
|
544
|
+
* @returns {RecordViewCapabilities}
|
|
545
|
+
*/
|
|
546
|
+
export declare function recordViewCapabilities(view: unknown): RecordViewCapabilities;
|
|
547
|
+
/**
|
|
548
|
+
* Normalizes badge content. `null`, `undefined`, `false`, and `''` mean no badge; everything else
|
|
549
|
+
* is text. `0` is a value: a tool that counts something and counts none of it still says so.
|
|
550
|
+
* @param {unknown} value Badge content.
|
|
551
|
+
* @returns {string|null}
|
|
552
|
+
*/
|
|
553
|
+
export declare function normalizeToolBadge(value: unknown): string | null;
|
|
554
|
+
/**
|
|
555
|
+
* Composes a tool's accessible name from its label and badge, so the badge is announced as part of
|
|
556
|
+
* the control rather than as a second thing to find beside it: "Filters (2)".
|
|
557
|
+
* @param {string} label Visible label.
|
|
558
|
+
* @param {string|null} badgeText Normalized badge content.
|
|
559
|
+
* @param {string} [template='%1 (%2)'] Composition template.
|
|
560
|
+
* @returns {string}
|
|
561
|
+
*/
|
|
562
|
+
export declare function toolAccessibleName(label: string, badgeText: string | null, template?: string): string;
|
|
563
|
+
/**
|
|
564
|
+
* Validates and copies tool descriptors.
|
|
565
|
+
* @param {ListToolbarTool[]} tools Raw descriptors.
|
|
566
|
+
* @returns {Required<ListToolbarTool>[]} Normalized descriptors.
|
|
567
|
+
*/
|
|
568
|
+
export declare function normalizeTools(tools: ListToolbarTool[]): Required<ListToolbarTool>[];
|
|
569
|
+
/**
|
|
570
|
+
* Normalizes the shape switch entries. Strings name a built-in preset or a shape of the host's
|
|
571
|
+
* own; descriptors carry their own label and icon. Nullish and duplicate entries are dropped.
|
|
572
|
+
* @param {Array<string|ListToolbarView>} views Raw entries.
|
|
573
|
+
* @returns {Array<{id: string, label?: string, icon?: string|null}>}
|
|
574
|
+
*/
|
|
575
|
+
export declare function normalizeViewList(views: Array<string | ListToolbarView>): Array<{
|
|
576
|
+
id: string;
|
|
577
|
+
label?: string;
|
|
578
|
+
icon?: string | null;
|
|
579
|
+
}>;
|
|
580
|
+
/**
|
|
581
|
+
* Resolves a requested shape against the configured list. A value the toolbar was not configured
|
|
582
|
+
* with is never selected — the switch can only report shapes the host said it can render.
|
|
583
|
+
* @param {Array<{id: string}>} views Normalized entries.
|
|
584
|
+
* @param {unknown} requested Requested shape.
|
|
585
|
+
* @param {string|null} current Shape to keep when the request is not on offer; `null` means the
|
|
586
|
+
* toolbar is choosing its initial shape and takes the first entry.
|
|
587
|
+
* @returns {string|null} A configured shape id, or null when there are none.
|
|
588
|
+
*/
|
|
589
|
+
export declare function resolveView(views: Array<{
|
|
590
|
+
id: string;
|
|
591
|
+
}>, requested: unknown, current: string | null): string | null;
|
|
592
|
+
/**
|
|
593
|
+
* The text of the count line. Anything that is not a finite number — including `null` while a
|
|
594
|
+
* request is in flight — is an empty line rather than a stale one.
|
|
595
|
+
* @param {unknown} count Result count.
|
|
596
|
+
* @param {(count: number) => string} format Formatter for a real count.
|
|
597
|
+
* @returns {string}
|
|
598
|
+
*/
|
|
599
|
+
export declare function countLineText(count: unknown, format: (count: number) => string): string;
|
|
@@ -1,31 +1,6 @@
|
|
|
1
1
|
import { Component } from '../../core/component.js';
|
|
2
|
-
export type MenuItem =
|
|
3
|
-
|
|
4
|
-
* Item label.
|
|
5
|
-
*/
|
|
6
|
-
label: string;
|
|
7
|
-
/**
|
|
8
|
-
* Kernel icon name.
|
|
9
|
-
*/
|
|
10
|
-
icon?: string;
|
|
11
|
-
/**
|
|
12
|
-
* Value emitted on selection.
|
|
13
|
-
*/
|
|
14
|
-
value?: unknown;
|
|
15
|
-
/**
|
|
16
|
-
* Whether selection is disabled.
|
|
17
|
-
*/
|
|
18
|
-
disabled?: boolean;
|
|
19
|
-
/**
|
|
20
|
-
* Whether the action is dangerous.
|
|
21
|
-
*/
|
|
22
|
-
danger?: boolean;
|
|
23
|
-
/**
|
|
24
|
-
* Selection callback.
|
|
25
|
-
*/
|
|
26
|
-
onselect?: (value: unknown, item: MenuItem, menuButton: MenuButton) => void;
|
|
27
|
-
};
|
|
28
|
-
export type MenuButtonItem = MenuItem | '-';
|
|
2
|
+
export type MenuItem = import('../../internal/menu-items.js').MenuItem;
|
|
3
|
+
export type MenuButtonItem = import('../../internal/menu-items.js').MenuEntry;
|
|
29
4
|
export type MenuButtonOptions = {
|
|
30
5
|
/**
|
|
31
6
|
* Trigger label.
|
|
@@ -63,16 +38,8 @@ export type MenuButtonOptions = {
|
|
|
63
38
|
*/
|
|
64
39
|
onclose?: (event: CustomEvent<Record<string, never>>) => void;
|
|
65
40
|
};
|
|
66
|
-
/**
|
|
67
|
-
|
|
68
|
-
* @property {string} label Item label.
|
|
69
|
-
* @property {string} [icon] Kernel icon name.
|
|
70
|
-
* @property {unknown} [value] Value emitted on selection.
|
|
71
|
-
* @property {boolean} [disabled=false] Whether selection is disabled.
|
|
72
|
-
* @property {boolean} [danger=false] Whether the action is dangerous.
|
|
73
|
-
* @property {(value: unknown, item: MenuItem, menuButton: MenuButton) => void} [onselect] Selection callback.
|
|
74
|
-
*/
|
|
75
|
-
/** @typedef {MenuItem|'-'} MenuButtonItem */
|
|
41
|
+
/** @typedef {import('../../internal/menu-items.js').MenuItem} MenuItem */
|
|
42
|
+
/** @typedef {import('../../internal/menu-items.js').MenuEntry} MenuButtonItem */
|
|
76
43
|
/**
|
|
77
44
|
* @typedef {Object} MenuButtonOptions
|
|
78
45
|
* @property {string} [label=''] Trigger label.
|
|
@@ -217,4 +217,11 @@ export declare class Message extends Component<MessageOptions> {
|
|
|
217
217
|
_close(entry: any): void;
|
|
218
218
|
/** @param {any} entry @returns {void} */
|
|
219
219
|
_finish(entry: any): void;
|
|
220
|
+
/**
|
|
221
|
+
* Resolves a message through the host translator, falling back to the built-in English text.
|
|
222
|
+
* @param {string} key Message key.
|
|
223
|
+
* @param {string} fallback English default.
|
|
224
|
+
* @returns {string}
|
|
225
|
+
*/
|
|
226
|
+
_message(key: string, fallback: string): string;
|
|
220
227
|
}
|