@zeyos/zx 4.3.0 → 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 +266 -1
- package/README.md +7 -3
- 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-model.d.ts +22 -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 +12 -4
- package/dist/types/components/card-view/record-card.d.ts +53 -5
- 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-policy.d.ts +268 -0
- package/dist/types/components/kanban-view/kanban-view.d.ts +837 -26
- 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/component.d.ts +6 -1
- package/dist/types/core/icons.d.ts +17 -0
- package/dist/types/index.d.ts +13 -1
- 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 +651 -88
- package/dist/zx-zeyos.esm.min.js +8 -1
- package/dist/zx.css +6266 -3900
- package/dist/zx.esm.js +8487 -1805
- package/dist/zx.esm.min.js +10 -3
- package/dist/zx.global.js +8487 -1805
- package/dist/zx.global.min.js +10 -3
- package/dist/zx.min.css +1 -1
- package/docs/api.json +1811 -247
- package/docs/llms.md +345 -40
- package/docs/llms.txt +11 -7
- package/package.json +1 -2
- 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-model.js +45 -0
- package/src/components/calendar/calendar.css +30 -10
- package/src/components/calendar/calendar.js +41 -13
- package/src/components/card/card.js +12 -1
- package/src/components/card-view/card-view.css +212 -9
- package/src/components/card-view/card-view.js +32 -16
- package/src/components/card-view/record-card.js +98 -21
- 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-policy.js +412 -0
- package/src/components/kanban-view/kanban-view.css +674 -36
- package/src/components/kanban-view/kanban-view.js +1762 -240
- 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 +14 -12
- 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/component.js +8 -3
- package/src/core/icons.js +74 -5
- package/src/index.js +33 -3
- 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
- package/DESIGN-SYSTEM.md +0 -182
|
@@ -0,0 +1,277 @@
|
|
|
1
|
+
import { Component } from '../../core/component.js';
|
|
2
|
+
export type StatTileFormatName = 'number' | 'currency' | 'percent' | 'fileSize' | null;
|
|
3
|
+
export type StatTileFormat = StatTileFormatName | ((value: number | string | null | undefined) => string);
|
|
4
|
+
export type StatTileKind = 'neutral' | 'accent' | 'success' | 'warning' | 'danger' | 'info';
|
|
5
|
+
export type StatTileDeltaKind = 'positive' | 'negative' | 'neutral';
|
|
6
|
+
export type StatTileDirection = 'up' | 'down' | 'flat';
|
|
7
|
+
export type StatTileDelta = {
|
|
8
|
+
/**
|
|
9
|
+
* Which way the metric moved, read from the sign alone.
|
|
10
|
+
*/
|
|
11
|
+
direction: StatTileDirection;
|
|
12
|
+
/**
|
|
13
|
+
* `'+'`, `'−'` (U+2212), or `''` for an unchanged metric.
|
|
14
|
+
*/
|
|
15
|
+
sign: string;
|
|
16
|
+
/**
|
|
17
|
+
* The formatted absolute change, without a sign.
|
|
18
|
+
*/
|
|
19
|
+
magnitude: string;
|
|
20
|
+
/**
|
|
21
|
+
* The visible change: `sign` followed by `magnitude`.
|
|
22
|
+
*/
|
|
23
|
+
text: string;
|
|
24
|
+
};
|
|
25
|
+
export type StatTileNameParts = {
|
|
26
|
+
/**
|
|
27
|
+
* The metric's name.
|
|
28
|
+
*/
|
|
29
|
+
label?: string;
|
|
30
|
+
/**
|
|
31
|
+
* The formatted value.
|
|
32
|
+
*/
|
|
33
|
+
value?: string;
|
|
34
|
+
/**
|
|
35
|
+
* The change, already worded for speech (`'up 2'`, not `'+2'`).
|
|
36
|
+
*/
|
|
37
|
+
delta?: string;
|
|
38
|
+
/**
|
|
39
|
+
* What the change is measured against.
|
|
40
|
+
*/
|
|
41
|
+
deltaLabel?: string;
|
|
42
|
+
};
|
|
43
|
+
export type StatTileOptions = {
|
|
44
|
+
/**
|
|
45
|
+
* The metric's name, set small above the value.
|
|
46
|
+
*/
|
|
47
|
+
label?: string;
|
|
48
|
+
/**
|
|
49
|
+
* The metric. A string is rendered as given.
|
|
50
|
+
*/
|
|
51
|
+
value?: number | string | null;
|
|
52
|
+
/**
|
|
53
|
+
* How a numeric value is rendered: a named mode, a
|
|
54
|
+
* callback receiving the raw value, or null to print the value unformatted.
|
|
55
|
+
*/
|
|
56
|
+
format?: StatTileFormat;
|
|
57
|
+
/**
|
|
58
|
+
* ISO 4217 code used by `format: 'currency'`.
|
|
59
|
+
*/
|
|
60
|
+
currency?: string | null;
|
|
61
|
+
/**
|
|
62
|
+
* BCP 47 tag for every formatter; defaults to the active language.
|
|
63
|
+
*/
|
|
64
|
+
locale?: string;
|
|
65
|
+
/**
|
|
66
|
+
* Change against the previous period. Rendered with
|
|
67
|
+
* its own sign and an arrow, never with colour alone.
|
|
68
|
+
*/
|
|
69
|
+
delta?: number | string | null;
|
|
70
|
+
/**
|
|
71
|
+
* Whether the change is good, bad, or merely a
|
|
72
|
+
* change. This — not the sign's direction — picks the delta colour: a rising ticket count is not
|
|
73
|
+
* a success, so "up is good" is never assumed.
|
|
74
|
+
*/
|
|
75
|
+
deltaKind?: StatTileDeltaKind;
|
|
76
|
+
/**
|
|
77
|
+
* How the delta is rendered; defaults to `format`.
|
|
78
|
+
*/
|
|
79
|
+
deltaFormat?: StatTileFormat;
|
|
80
|
+
/**
|
|
81
|
+
* What the change is measured against, e.g. `'vs. last week'`.
|
|
82
|
+
*/
|
|
83
|
+
deltaLabel?: string;
|
|
84
|
+
/**
|
|
85
|
+
* Values for a decorative sparkline. Fewer than two usable numbers
|
|
86
|
+
* render nothing.
|
|
87
|
+
*/
|
|
88
|
+
trend?: number[];
|
|
89
|
+
/**
|
|
90
|
+
* Icon name from `icons.js`, shown beside the label.
|
|
91
|
+
*/
|
|
92
|
+
icon?: string | null;
|
|
93
|
+
/**
|
|
94
|
+
* Semantic intent. It tints the icon and the sparkline
|
|
95
|
+
* and never the value, which stays at full text contrast whatever intent a record carries.
|
|
96
|
+
*/
|
|
97
|
+
kind?: StatTileKind;
|
|
98
|
+
/**
|
|
99
|
+
* Destination. A tile with an href is an `<a>`.
|
|
100
|
+
*/
|
|
101
|
+
href?: string | null;
|
|
102
|
+
/**
|
|
103
|
+
* Renders a `<button>` without an href. Passing `onclick`
|
|
104
|
+
* sets this implicitly; set it directly to subscribe with `on('click', …)` instead.
|
|
105
|
+
*/
|
|
106
|
+
clickable?: boolean;
|
|
107
|
+
/**
|
|
108
|
+
* Renders a skeleton shaped like the tile.
|
|
109
|
+
*/
|
|
110
|
+
loading?: boolean;
|
|
111
|
+
/**
|
|
112
|
+
* Message overrides, keyed as `statTile.*`.
|
|
113
|
+
*/
|
|
114
|
+
msg?: Record<string, unknown>;
|
|
115
|
+
/**
|
|
116
|
+
* Activation listener; its
|
|
117
|
+
* presence is what turns a tile with no href into a button. It is the tile's `click` event, as
|
|
118
|
+
* every Zx component's `on*` option is, so it receives the `CustomEvent` carrying the native
|
|
119
|
+
* event in `detail.event`.
|
|
120
|
+
*/
|
|
121
|
+
onclick?: (event: CustomEvent<{
|
|
122
|
+
event: MouseEvent;
|
|
123
|
+
}>) => void;
|
|
124
|
+
};
|
|
125
|
+
/**
|
|
126
|
+
* Renders a metric: a label, the number it names, and — optionally — how that number moved.
|
|
127
|
+
*
|
|
128
|
+
* The value is the loudest thing on the tile; the label sits small above it and the delta and the
|
|
129
|
+
* sparkline are subordinate to both. Nothing here assumes a fixed set of metrics: the label, the
|
|
130
|
+
* intent colour, the icon and the formatting all arrive per instance, so a tile whose content
|
|
131
|
+
* comes from a server is the normal case rather than the exception.
|
|
132
|
+
*
|
|
133
|
+
* The element shape follows the tile's behaviour, and a tag cannot be rewritten in place, so the
|
|
134
|
+
* component normally builds its own root — pass `null` as the target, or use {@link statTile}. An
|
|
135
|
+
* existing element is adopted only when its tag already is the one the options call for; a mismatch
|
|
136
|
+
* throws rather than silently shipping a `<div>` with a click handler or a link that cannot
|
|
137
|
+
* navigate.
|
|
138
|
+
*
|
|
139
|
+
* @fires StatTile#click
|
|
140
|
+
* @extends {Component<StatTileOptions>}
|
|
141
|
+
*/
|
|
142
|
+
export declare class StatTile extends Component<StatTileOptions> {
|
|
143
|
+
_createdRoot: boolean;
|
|
144
|
+
_snapshot: import("../../core/dom.js").TargetSnapshot;
|
|
145
|
+
_closed: boolean;
|
|
146
|
+
_state: any;
|
|
147
|
+
static cssName: string;
|
|
148
|
+
/** @type {Readonly<StatTileOptions>} */
|
|
149
|
+
static defaults: Readonly<StatTileOptions>;
|
|
150
|
+
/**
|
|
151
|
+
* Creates or adopts one metric tile.
|
|
152
|
+
* @param {Element|string|null} [target=null] Existing element of the required tag, or null.
|
|
153
|
+
* @param {StatTileOptions} [options={}] Tile options.
|
|
154
|
+
*/
|
|
155
|
+
constructor(target?: Element | string | null, options?: StatTileOptions);
|
|
156
|
+
/**
|
|
157
|
+
* @returns {HTMLElement}
|
|
158
|
+
* @throws {TypeError} When an adopted target is not the tag the options require.
|
|
159
|
+
*/
|
|
160
|
+
render(): HTMLElement;
|
|
161
|
+
/**
|
|
162
|
+
* Replaces any subset of the tile's content and redraws it. This is how a tile leaves
|
|
163
|
+
* `loading: true` behind once the server answers.
|
|
164
|
+
* @param {StatTileOptions} options Options to merge over the current ones.
|
|
165
|
+
* @returns {this}
|
|
166
|
+
* @throws {TypeError} When the merged options would need a different element tag.
|
|
167
|
+
*/
|
|
168
|
+
update(options?: StatTileOptions): this;
|
|
169
|
+
/**
|
|
170
|
+
* Reports the tile's own accessible name, which is what assistive technology announces.
|
|
171
|
+
* @returns {string} Label, value, and delta, in that order.
|
|
172
|
+
*/
|
|
173
|
+
getAccessibleName(): string;
|
|
174
|
+
/**
|
|
175
|
+
* Aborts listeners and restores an adopted target to the state it was found in.
|
|
176
|
+
* @returns {void}
|
|
177
|
+
*/
|
|
178
|
+
destroy(): void;
|
|
179
|
+
/**
|
|
180
|
+
* Resolves a message through the host translator, falling back to the built-in English text.
|
|
181
|
+
* @param {string} key Message key.
|
|
182
|
+
* @param {...unknown} args Interpolation values.
|
|
183
|
+
* @returns {string}
|
|
184
|
+
*/
|
|
185
|
+
_message(key: string, ...args: unknown[]): string;
|
|
186
|
+
}
|
|
187
|
+
/**
|
|
188
|
+
* Creates a tile that builds its own root: the convenience form of `new StatTile(null, options)`,
|
|
189
|
+
* the way `tooltip()` stands in for `new Tooltip(…)`.
|
|
190
|
+
*
|
|
191
|
+
* It returns the component, not an element, so there is one construction idiom and one click path.
|
|
192
|
+
* Call `.toElement()` for the node to place.
|
|
193
|
+
*
|
|
194
|
+
* @param {StatTileOptions} [opts={}] Tile options.
|
|
195
|
+
* @returns {StatTile} The component, whose root is an `<a>`, a `<button>`, or a `<div>`.
|
|
196
|
+
*/
|
|
197
|
+
export declare function statTile(opts?: StatTileOptions): StatTile;
|
|
198
|
+
/**
|
|
199
|
+
* Formats the metric itself.
|
|
200
|
+
*
|
|
201
|
+
* A string value is the host's own final text and is passed through untouched; an explicit
|
|
202
|
+
* callback outranks that, because a host that supplies one has asked to decide every case.
|
|
203
|
+
*
|
|
204
|
+
* @param {number|string|null|undefined} value The metric.
|
|
205
|
+
* @param {{format?: StatTileFormat, locale?: string, currency?: string|null}} [options={}] Mode,
|
|
206
|
+
* language, and currency.
|
|
207
|
+
* @returns {string} The text to display; empty for a missing value.
|
|
208
|
+
*/
|
|
209
|
+
export declare function formatStatValue(value: number | string | null | undefined, options?: {
|
|
210
|
+
format?: StatTileFormat;
|
|
211
|
+
locale?: string;
|
|
212
|
+
currency?: string | null;
|
|
213
|
+
}): string;
|
|
214
|
+
/**
|
|
215
|
+
* Describes a change without judging it.
|
|
216
|
+
*
|
|
217
|
+
* The direction is read from the sign and nothing else; whether that direction is good news is
|
|
218
|
+
* `deltaKind`'s business, not this function's. The magnitude is formatted from the absolute value
|
|
219
|
+
* and the sign is prepended, because no locale prints a leading `+` on its own.
|
|
220
|
+
*
|
|
221
|
+
* @param {number|string|null|undefined} delta The change.
|
|
222
|
+
* @param {{format?: StatTileFormat, locale?: string, currency?: string|null}} [options={}]
|
|
223
|
+
* Formatting, defaulting to the tile's own.
|
|
224
|
+
* @returns {StatTileDelta|null} The change, or null when there is none to show.
|
|
225
|
+
*/
|
|
226
|
+
export declare function statDelta(delta: number | string | null | undefined, options?: {
|
|
227
|
+
format?: StatTileFormat;
|
|
228
|
+
locale?: string;
|
|
229
|
+
currency?: string | null;
|
|
230
|
+
}): StatTileDelta | null;
|
|
231
|
+
/**
|
|
232
|
+
* Chooses the element a tile must be, from what the tile does.
|
|
233
|
+
*
|
|
234
|
+
* A destination is a link, an action is a button, and a tile that does neither is a plain
|
|
235
|
+
* container. A `<div>` never gets a click handler, and an href that could execute script is not a
|
|
236
|
+
* destination at all — it falls through to whichever shape the remaining options justify.
|
|
237
|
+
*
|
|
238
|
+
* @param {{href?: string|null, clickable?: boolean, onclick?: unknown}} [options={}] The options
|
|
239
|
+
* that carry behaviour.
|
|
240
|
+
* @returns {'a'|'button'|'div'} The tag to render.
|
|
241
|
+
*/
|
|
242
|
+
export declare function statTileTag(options?: {
|
|
243
|
+
href?: string | null;
|
|
244
|
+
clickable?: boolean;
|
|
245
|
+
onclick?: unknown;
|
|
246
|
+
}): 'a' | 'button' | 'div';
|
|
247
|
+
/**
|
|
248
|
+
* Composes the tile's accessible name: label, then value, then how it changed.
|
|
249
|
+
*
|
|
250
|
+
* The sparkline is decoration and contributes nothing, and the delta arrives already worded —
|
|
251
|
+
* `'up 2'` rather than `'+2'` — because a screen reader should not have to interpret a glyph.
|
|
252
|
+
*
|
|
253
|
+
* @param {StatTileNameParts} [parts={}] The pieces, already formatted and translated.
|
|
254
|
+
* @returns {string} The name, with empty pieces dropped rather than left as stray punctuation.
|
|
255
|
+
*/
|
|
256
|
+
export declare function statTileName(parts?: StatTileNameParts): string;
|
|
257
|
+
/**
|
|
258
|
+
* Projects a series onto the sparkline's user-unit box.
|
|
259
|
+
*
|
|
260
|
+
* A series needs two usable numbers to be a line; a flat series is drawn down the middle rather
|
|
261
|
+
* than along the floor, which would read as zero.
|
|
262
|
+
*
|
|
263
|
+
* @param {unknown[]} values The series, in order. Unusable entries are dropped.
|
|
264
|
+
* @param {{width?: number, height?: number, inset?: number}} [box={}] The target box.
|
|
265
|
+
* @returns {string|null} An SVG `points` list, or null when there is no line to draw.
|
|
266
|
+
*/
|
|
267
|
+
export declare function statTrendPoints(values: unknown[], box?: {
|
|
268
|
+
width?: number;
|
|
269
|
+
height?: number;
|
|
270
|
+
inset?: number;
|
|
271
|
+
}): string | null;
|
|
272
|
+
/**
|
|
273
|
+
* Fired when a linked or clickable tile is activated. A tile with neither an href nor a click
|
|
274
|
+
* handler is a `<div>` and never emits it.
|
|
275
|
+
* @event StatTile#click
|
|
276
|
+
* @type {CustomEvent<{event: MouseEvent}>}
|
|
277
|
+
*/
|
|
@@ -236,4 +236,11 @@ export declare class Tabbox extends Component<TabboxOptions> {
|
|
|
236
236
|
_require(name: string): TabRecord;
|
|
237
237
|
/** @param {Element} tab @returns {TabRecord|null} */
|
|
238
238
|
_recordForTab(tab: Element): TabRecord | null;
|
|
239
|
+
/**
|
|
240
|
+
* Resolves a message through the host translator, falling back to the built-in English text.
|
|
241
|
+
* @param {string} key Message key.
|
|
242
|
+
* @param {string} fallback English default.
|
|
243
|
+
* @returns {string}
|
|
244
|
+
*/
|
|
245
|
+
_message(key: string, fallback: string): string;
|
|
239
246
|
}
|
|
@@ -25,6 +25,29 @@ export type TableHierarchyOptions = {
|
|
|
25
25
|
*/
|
|
26
26
|
expanded?: boolean | unknown[];
|
|
27
27
|
};
|
|
28
|
+
export type TableRowKind = {
|
|
29
|
+
/**
|
|
30
|
+
* Draw the row as a single cell across every rendered column — a
|
|
31
|
+
* section heading rather than a record. The cell is a `<th scope="colgroup">`, not a `<td>`,
|
|
32
|
+
* because it labels the columns of the rows beneath it and a screen reader walking the table
|
|
33
|
+
* should meet it as a heading rather than as a value. A spanning row carries no selection
|
|
34
|
+
* checkbox, is never editable, and is skipped by `rowReorder`; it still emits `rowclick` and still
|
|
35
|
+
* participates in `getData()` and `updateRow()`.
|
|
36
|
+
*/
|
|
37
|
+
span?: boolean;
|
|
38
|
+
/**
|
|
39
|
+
* Content
|
|
40
|
+
* of the spanning cell. Omitted, the cell falls back to the row's raw value for the first visible
|
|
41
|
+
* column, which is what a host otherwise writes by hand.
|
|
42
|
+
*/
|
|
43
|
+
render?: (row: TableRow, index: number) => Node | string | number | null | undefined;
|
|
44
|
+
/**
|
|
45
|
+
* Space-separated classes added to the row, on top of `rowClass`. Zx
|
|
46
|
+
* ships no section look: a billing section is not a kanban swimlane, so the tint, the weight and
|
|
47
|
+
* the rule above it are the host's to decide.
|
|
48
|
+
*/
|
|
49
|
+
class?: string;
|
|
50
|
+
};
|
|
28
51
|
export type TableEditorApi = {
|
|
29
52
|
/**
|
|
30
53
|
* Value the cell holds when the editor opens.
|
|
@@ -207,6 +230,21 @@ export type TableOptions = {
|
|
|
207
230
|
* Additional row class callback.
|
|
208
231
|
*/
|
|
209
232
|
rowClass?: ((row: TableRow) => string) | null;
|
|
233
|
+
/**
|
|
234
|
+
* Row property or callback
|
|
235
|
+
* naming each row's kind — the `type` on a ZeyOS transaction line, where one value is a position
|
|
236
|
+
* carrying quantities and amounts and another is a section heading that groups the positions under
|
|
237
|
+
* it. `null`, the default, renders every row exactly as before.
|
|
238
|
+
*/
|
|
239
|
+
rowKind?: string | ((row: TableRow) => unknown) | null;
|
|
240
|
+
/**
|
|
241
|
+
* Presentation per kind, keyed by the
|
|
242
|
+
* resolved kind coerced to a string. A kind with no entry here renders as an ordinary row. While
|
|
243
|
+
* any row in the current data resolves to a `span` kind the header sort controls are withheld and
|
|
244
|
+
* `setSort()` is inert: sorting a grouped table scatters the positions out of their sections, and
|
|
245
|
+
* doing that silently is worse than not offering it. `sortMode: 'server'` still owns its own order.
|
|
246
|
+
*/
|
|
247
|
+
rowKinds?: Record<string, TableRowKind> | null;
|
|
210
248
|
/**
|
|
211
249
|
* Whether alternate rows use the zebra background.
|
|
212
250
|
*/
|
|
@@ -487,6 +525,10 @@ export declare class Table extends Component<TableOptions> {
|
|
|
487
525
|
_original: import("../../core/dom.js").TargetSnapshot;
|
|
488
526
|
_columns: any[] | TableColumn[];
|
|
489
527
|
_data: any[] | TableRow[];
|
|
528
|
+
_rowKind: string | ((row: TableRow) => unknown);
|
|
529
|
+
_rowKinds: Record<string, TableRowKind>;
|
|
530
|
+
_spanning: boolean;
|
|
531
|
+
_sortWarned: boolean;
|
|
490
532
|
_selected: Set<any>;
|
|
491
533
|
_selectionAnchorId: any;
|
|
492
534
|
_sort: any;
|
|
@@ -533,6 +575,7 @@ export declare class Table extends Component<TableOptions> {
|
|
|
533
575
|
_columnList: HTMLElement;
|
|
534
576
|
_selectAll: HTMLElement;
|
|
535
577
|
_headers: Map<any, any>;
|
|
578
|
+
_headerSpanning: boolean;
|
|
536
579
|
_hierarchyMeta: Map<unknown, TableHierarchyEntry>;
|
|
537
580
|
static cssName: string;
|
|
538
581
|
/** @type {TableOptions} */
|
|
@@ -678,6 +721,10 @@ export declare class Table extends Component<TableOptions> {
|
|
|
678
721
|
/**
|
|
679
722
|
* Activates a column sort. Local mode stably reorders data; server mode only updates the
|
|
680
723
|
* header state and emits the request event.
|
|
724
|
+
*
|
|
725
|
+
* Inert while the data holds a spanning row: a sort would scatter the positions out of the
|
|
726
|
+
* sections that group them, in either sort mode. The header withholds its controls for the same
|
|
727
|
+
* reason, so nothing on screen invites the call.
|
|
681
728
|
* @param {string} id Column id.
|
|
682
729
|
* @param {TableSortDirection} [dir] Direction; omitted toggles the current column.
|
|
683
730
|
* @param {{silent?: boolean}} [options={}] Event options.
|
|
@@ -896,6 +943,28 @@ export declare class Table extends Component<TableOptions> {
|
|
|
896
943
|
destroy(): void;
|
|
897
944
|
/** @returns {TableColumn[]} */
|
|
898
945
|
_visibleColumns(): TableColumn[];
|
|
946
|
+
/**
|
|
947
|
+
* Whether a row draws as one cell across the table instead of as a record.
|
|
948
|
+
* @param {TableRow} row Row to classify.
|
|
949
|
+
* @returns {boolean}
|
|
950
|
+
*/
|
|
951
|
+
_isSpanningRow(row: TableRow): boolean;
|
|
952
|
+
/**
|
|
953
|
+
* Whether any row in the current data — not only the rendered prefix — spans. This is what
|
|
954
|
+
* withholds the sort controls, and the reader must not be offered a control that the next
|
|
955
|
+
* `growBy()` would have to take away again.
|
|
956
|
+
* @returns {boolean}
|
|
957
|
+
*/
|
|
958
|
+
_hasSpanningRow(): boolean;
|
|
959
|
+
/**
|
|
960
|
+
* How many cells one row occupies: every visible column plus the structural columns the table
|
|
961
|
+
* renders beside them. Shared by the spanning cell and the empty-state cell so the two can never
|
|
962
|
+
* disagree about the table's width.
|
|
963
|
+
* @returns {number}
|
|
964
|
+
*/
|
|
965
|
+
_spanColspan(): number;
|
|
966
|
+
/** @returns {TableRow[]} Rendered rows that can carry a selection; spanning rows cannot. */
|
|
967
|
+
_selectableData(): TableRow[];
|
|
899
968
|
/** @returns {HTMLElement} */
|
|
900
969
|
_createColumnControls(): HTMLElement;
|
|
901
970
|
/**
|
|
@@ -1091,6 +1160,8 @@ export declare class Table extends Component<TableOptions> {
|
|
|
1091
1160
|
_emitRowToggle(id: unknown, expanded: boolean): void;
|
|
1092
1161
|
/** Keeps the reader's current expansion state limited to branches still present in the data. */
|
|
1093
1162
|
_reconcileExpanded(): void;
|
|
1163
|
+
/** @returns {Set<unknown>} Ids of every row in the data that may hold a selection. */
|
|
1164
|
+
_selectableIds(): Set<unknown>;
|
|
1094
1165
|
/** @returns {boolean} Whether selection changed. */
|
|
1095
1166
|
_pruneSelection(): boolean;
|
|
1096
1167
|
/** @param {TableRow} row @returns {unknown} */
|
|
@@ -1141,6 +1212,79 @@ export declare class Table extends Component<TableOptions> {
|
|
|
1141
1212
|
* @event Table#editinvalid
|
|
1142
1213
|
* @type {CustomEvent<TableEditInvalidDetail>}
|
|
1143
1214
|
*/
|
|
1215
|
+
/**
|
|
1216
|
+
* Resolves a row's kind through the `rowKind` accessor and coerces it to the string `rowKinds` is
|
|
1217
|
+
* keyed by.
|
|
1218
|
+
*
|
|
1219
|
+
* Only `null` and `undefined` mean "no kind". `0` and `''` are kinds like any other: a ZeyOS
|
|
1220
|
+
* transaction line uses `0` for a position and `1` for a section, so a falsy test here would render
|
|
1221
|
+
* every position as though the table had never been told about kinds at all.
|
|
1222
|
+
* @param {TableRow} row Row to classify.
|
|
1223
|
+
* @param {string|((row: TableRow) => unknown)|null|undefined} rowKind Field name or accessor.
|
|
1224
|
+
* @returns {string|null} The kind as a string, or null when there is none.
|
|
1225
|
+
*/
|
|
1226
|
+
export declare function resolveRowKind(row: TableRow, rowKind: string | ((row: TableRow) => unknown) | null | undefined): string | null;
|
|
1227
|
+
/**
|
|
1228
|
+
* Looks one resolved kind up in the `rowKinds` map.
|
|
1229
|
+
*
|
|
1230
|
+
* Own properties only: a kind read out of server data could just as easily be `toString` or
|
|
1231
|
+
* `constructor`, and inherited members of `Object.prototype` are not configuration.
|
|
1232
|
+
* @param {Record<string, TableRowKind>|null|undefined} rowKinds Kind map.
|
|
1233
|
+
* @param {string|null} kind Resolved kind.
|
|
1234
|
+
* @returns {TableRowKind|null} Matching entry, or null.
|
|
1235
|
+
*/
|
|
1236
|
+
export declare function resolveRowKindSpec(rowKinds: Record<string, TableRowKind> | null | undefined, kind: string | null): TableRowKind | null;
|
|
1237
|
+
/**
|
|
1238
|
+
* Whether a row draws as one spanning cell under the given configuration.
|
|
1239
|
+
* @param {TableRow} row Row to classify.
|
|
1240
|
+
* @param {string|((row: TableRow) => unknown)|null|undefined} rowKind Field name or accessor.
|
|
1241
|
+
* @param {Record<string, TableRowKind>|null|undefined} rowKinds Kind map.
|
|
1242
|
+
* @returns {boolean}
|
|
1243
|
+
*/
|
|
1244
|
+
export declare function isSpanningRow(row: TableRow, rowKind: string | ((row: TableRow) => unknown) | null | undefined, rowKinds: Record<string, TableRowKind> | null | undefined): boolean;
|
|
1245
|
+
/**
|
|
1246
|
+
* Whether a data set holds a row that spans — the question that decides whether `Table` offers its
|
|
1247
|
+
* sort controls at all.
|
|
1248
|
+
*
|
|
1249
|
+
* Asked of the whole data rather than of the rendered prefix: with `growing` on, a sort control
|
|
1250
|
+
* that disappeared the moment the reader pressed "show 20 more" would be worse than one that was
|
|
1251
|
+
* never there. Asked again on every data change, so a filter that removes the last section gives
|
|
1252
|
+
* the sort back.
|
|
1253
|
+
* @param {TableRow[]} rows Rows to scan.
|
|
1254
|
+
* @param {string|((row: TableRow) => unknown)|null|undefined} rowKind Field name or accessor.
|
|
1255
|
+
* @param {Record<string, TableRowKind>|null|undefined} rowKinds Kind map.
|
|
1256
|
+
* @returns {boolean}
|
|
1257
|
+
*/
|
|
1258
|
+
export declare function hasSpanningRow(rows: TableRow[], rowKind: string | ((row: TableRow) => unknown) | null | undefined, rowKinds: Record<string, TableRowKind> | null | undefined): boolean;
|
|
1259
|
+
/**
|
|
1260
|
+
* How many cells one table row occupies.
|
|
1261
|
+
*
|
|
1262
|
+
* `selectable: 'multi'` and `rowReorder` each render a `<col>` and a leading cell of their own, and
|
|
1263
|
+
* a spanning cell that ignored them would leave the row one or two columns short — the table would
|
|
1264
|
+
* still lay out, silently and wrongly. `selectable: 'single'` adds no column: the whole row is the
|
|
1265
|
+
* control there.
|
|
1266
|
+
* @param {number} columnCount Number of visible data columns.
|
|
1267
|
+
* @param {{selectable?: TableSelectionMode, rowReorder?: boolean}} [structure={}] Structural columns.
|
|
1268
|
+
* @returns {number} Colspan covering every rendered cell, never below 1.
|
|
1269
|
+
*/
|
|
1270
|
+
export declare function tableSpanColspan(columnCount: number, structure?: {
|
|
1271
|
+
selectable?: TableSelectionMode;
|
|
1272
|
+
rowReorder?: boolean;
|
|
1273
|
+
}): number;
|
|
1274
|
+
/**
|
|
1275
|
+
* Content for a spanning row's single cell.
|
|
1276
|
+
*
|
|
1277
|
+
* Without a `render` the cell shows the row's raw value for the first visible column — the same
|
|
1278
|
+
* thing a host writes by hand today. Deliberately raw rather than routed through the column's own
|
|
1279
|
+
* renderer or display type: that renderer was written for a record, and running it against a
|
|
1280
|
+
* heading that carries no quantities or amounts is how a section row ends up showing `0,00 €`.
|
|
1281
|
+
* @param {TableRow} row Row being rendered.
|
|
1282
|
+
* @param {TableRowKind|null|undefined} spec Resolved kind presentation.
|
|
1283
|
+
* @param {TableColumn[]} visibleColumns Columns currently rendered, in display order.
|
|
1284
|
+
* @param {number} [index=0] Flat row index.
|
|
1285
|
+
* @returns {Node|string|number|null|undefined} Cell content.
|
|
1286
|
+
*/
|
|
1287
|
+
export declare function spanRowContent(row: TableRow, spec: TableRowKind | null | undefined, visibleColumns: TableColumn[], index?: number): Node | string | number | null | undefined;
|
|
1144
1288
|
/**
|
|
1145
1289
|
* Applies a column's built-in display type. A custom renderer always wins and may still return a
|
|
1146
1290
|
* Node; all built-in results are strings so `_renderCellContent` can insert them as text.
|
|
@@ -43,9 +43,11 @@ export type TableViewOptions = {
|
|
|
43
43
|
*/
|
|
44
44
|
hiddenFields?: string[];
|
|
45
45
|
/**
|
|
46
|
-
* Show the accessible visibility and reorder disclosure.
|
|
46
|
+
* Show the accessible visibility and reorder disclosure. `true` keeps the composed Table's own
|
|
47
|
+
* column chooser and `false` omits it; an object renders the shared record-view chooser instead,
|
|
48
|
+
* with a translated `label` and, with `target`, mounted into a host element.
|
|
47
49
|
*/
|
|
48
|
-
fieldControls?: boolean;
|
|
50
|
+
fieldControls?: boolean | import('../view/record-view.js').ViewFieldControlsConfig;
|
|
49
51
|
/**
|
|
50
52
|
* Empty-result content.
|
|
51
53
|
*/
|
|
@@ -93,7 +95,10 @@ export type TableViewOptions = {
|
|
|
93
95
|
* @property {unknown[]} [selection=[]] Initially selected record ids.
|
|
94
96
|
* @property {string[]} [fieldOrder=[]] Preferred stable field order.
|
|
95
97
|
* @property {string[]} [hiddenFields=[]] Initially hidden field ids.
|
|
96
|
-
* @property {boolean} [fieldControls=true]
|
|
98
|
+
* @property {boolean|import('../view/record-view.js').ViewFieldControlsConfig} [fieldControls=true]
|
|
99
|
+
* Show the accessible visibility and reorder disclosure. `true` keeps the composed Table's own
|
|
100
|
+
* column chooser and `false` omits it; an object renders the shared record-view chooser instead,
|
|
101
|
+
* with a translated `label` and, with `target`, mounted into a host element.
|
|
97
102
|
* @property {string|Node|(()=>string|Node)|null} [emptyText=null] Empty-result content.
|
|
98
103
|
* @property {TableOptions} [table={}] Advanced low-level Table options. Shared options win where
|
|
99
104
|
* their contracts overlap; all other options and callbacks are forwarded unchanged.
|
|
@@ -126,6 +131,7 @@ export declare class TableView extends RecordView {
|
|
|
126
131
|
_tableSyncDepth: number;
|
|
127
132
|
_tableViewDestroyed: boolean;
|
|
128
133
|
_tableHost: HTMLElement;
|
|
134
|
+
_tableViewToolbar: HTMLElement;
|
|
129
135
|
table: Table;
|
|
130
136
|
static cssName: string;
|
|
131
137
|
/** @type {Readonly<TableViewOptions>} */
|
|
@@ -176,7 +182,7 @@ export declare function fieldsToTableColumns(fields: ViewField[]): TableColumn[]
|
|
|
176
182
|
* Builds the composed Table configuration. Shared options deliberately overwrite overlapping
|
|
177
183
|
* low-level options; every advanced option remains untouched.
|
|
178
184
|
* @param {TableOptions|undefined} table Advanced Table options.
|
|
179
|
-
* @param {{fields:ViewField[],data:TableViewRecord[],recordId:string|((record:TableViewRecord)=>unknown),sort:ViewSort|null,sortMode:'local'|'server',selectable:false|'single'|'multi',hiddenFields:string[],fieldControls:boolean,emptyText:string|Node|(()=>string|Node)|null}} shared Shared state.
|
|
185
|
+
* @param {{fields:ViewField[],data:TableViewRecord[],recordId:string|((record:TableViewRecord)=>unknown),sort:ViewSort|null,sortMode:'local'|'server',selectable:false|'single'|'multi',hiddenFields:string[],fieldControls:boolean|import('../view/record-view.js').ViewFieldControlsConfig,emptyText:string|Node|(()=>string|Node)|null}} shared Shared state.
|
|
180
186
|
* @returns {TableOptions} Table configuration.
|
|
181
187
|
*/
|
|
182
188
|
export declare function tableOptionsForView(table: TableOptions | undefined, shared: {
|
|
@@ -187,6 +193,6 @@ export declare function tableOptionsForView(table: TableOptions | undefined, sha
|
|
|
187
193
|
sortMode: 'local' | 'server';
|
|
188
194
|
selectable: false | 'single' | 'multi';
|
|
189
195
|
hiddenFields: string[];
|
|
190
|
-
fieldControls: boolean;
|
|
196
|
+
fieldControls: boolean | import('../view/record-view.js').ViewFieldControlsConfig;
|
|
191
197
|
emptyText: string | Node | (() => string | Node) | null;
|
|
192
198
|
}): TableOptions;
|
|
@@ -118,4 +118,11 @@ export declare class Timebox extends Component<TimeboxOptions> {
|
|
|
118
118
|
_syncDisabled(): void;
|
|
119
119
|
/** @returns {void} */
|
|
120
120
|
_emitChange(): void;
|
|
121
|
+
/**
|
|
122
|
+
* Resolves a message through the host translator, falling back to the built-in English text.
|
|
123
|
+
* @param {string} key Message key.
|
|
124
|
+
* @param {string} fallback English default.
|
|
125
|
+
* @returns {string}
|
|
126
|
+
*/
|
|
127
|
+
_message(key: string, fallback: string): string;
|
|
121
128
|
}
|
|
@@ -144,6 +144,14 @@ export declare class ValueList extends Component<ValueListOptions> {
|
|
|
144
144
|
_removeAt(index: number, focusIndex?: number): void;
|
|
145
145
|
/** @param {string} message @returns {void} */
|
|
146
146
|
_showError(message: string): void;
|
|
147
|
+
/**
|
|
148
|
+
* Resolves a message through the host translator, falling back to the built-in English text.
|
|
149
|
+
* @param {string} key Message key.
|
|
150
|
+
* @param {string} fallback Built-in text, with `%1`-style placeholders.
|
|
151
|
+
* @param {...unknown} args Interpolation values.
|
|
152
|
+
* @returns {string}
|
|
153
|
+
*/
|
|
154
|
+
_message(key: string, fallback: string, ...args: unknown[]): string;
|
|
147
155
|
/** @returns {void} */
|
|
148
156
|
destroy(): void;
|
|
149
157
|
}
|