@zeyos/zx 3.0.0 → 4.0.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 +51 -0
- package/DESIGN-SYSTEM.md +28 -68
- package/README.md +16 -37
- package/dist/types/components/app-sidebar/app-sidebar.d.ts +106 -32
- package/dist/types/components/card/card.d.ts +128 -0
- package/dist/types/components/chart/chart.d.ts +1 -0
- package/dist/types/components/launcher/launcher.d.ts +65 -6
- package/dist/types/components/select/select.d.ts +51 -0
- package/dist/types/components/table/table.d.ts +4 -3
- package/dist/types/core/dom.d.ts +8 -0
- package/dist/types/index.d.ts +2 -1
- package/dist/types/{components/app-rail → internal}/app-rail.d.ts +34 -19
- package/dist/types/zeyos/icons.d.ts +5 -0
- package/dist/types/zeyos/index.d.ts +2 -1
- package/dist/types/zeyos/launcher.d.ts +147 -0
- package/dist/types/zeyos/select.d.ts +39 -0
- package/dist/zx-zeyos.esm.js +1324 -46
- package/dist/zx-zeyos.esm.min.js +1 -1
- package/dist/zx.css +400 -12
- package/dist/zx.esm.js +1059 -189
- package/dist/zx.esm.min.js +3 -3
- package/dist/zx.global.js +1059 -189
- package/dist/zx.global.min.js +3 -3
- package/dist/zx.min.css +1 -1
- package/docs/api.json +258 -145
- package/docs/llms.md +93 -112
- package/docs/llms.txt +16 -15
- package/package.json +8 -17
- package/src/components/app-sidebar/app-sidebar.css +12 -0
- package/src/components/app-sidebar/app-sidebar.js +310 -110
- package/src/components/card/card.css +149 -0
- package/src/components/card/card.js +285 -0
- package/src/components/chart/chart.js +8 -3
- package/src/components/grid/grid.js +10 -3
- package/src/components/launcher/launcher.css +113 -3
- package/src/components/launcher/launcher.js +234 -26
- package/src/components/select/field-adapter.js +9 -4
- package/src/components/select/select.css +144 -10
- package/src/components/select/select.js +259 -27
- package/src/components/table/table.js +8 -7
- package/src/core/dom.js +20 -0
- package/src/index.js +2 -1
- package/src/{components/app-rail → internal}/app-rail.js +80 -30
- package/src/zeyos/icons.js +8 -3
- package/src/zeyos/index.js +7 -1
- package/src/zeyos/launcher.js +338 -0
- package/src/zeyos/modules.js +1 -0
- package/src/zeyos/select.js +115 -1
- package/styles/tokens/global.css +1 -1
- package/styles/tokens/modules.css +1 -0
- package/styles/zx.css +1 -0
- package/MIGRATION.md +0 -749
- package/dist/types/compat/base.d.ts +0 -156
- package/dist/types/compat/globals.d.ts +0 -20
- package/dist/types/compat/index.d.ts +0 -128
- package/dist/types/compat/map/basic.d.ts +0 -175
- package/dist/types/compat/map/data.d.ts +0 -103
- package/dist/types/compat/map/date-time.d.ts +0 -80
- package/dist/types/compat/map/factory.d.ts +0 -9
- package/dist/types/compat/map/form.d.ts +0 -98
- package/dist/types/compat/map/helpers.d.ts +0 -12
- package/dist/types/compat/map/http.d.ts +0 -36
- package/dist/types/compat/map/layout.d.ts +0 -106
- package/dist/types/compat/map/options.d.ts +0 -80
- package/dist/types/compat/map/select.d.ts +0 -95
- package/dist/types/compat/map/stubs.d.ts +0 -32
- package/dist/types/compat/map/utilities.d.ts +0 -37
- package/dist/types/compat-entry.d.ts +0 -5
- package/dist/zx-compat.esm.js +0 -17848
- package/dist/zx-compat.esm.min.js +0 -1
- package/dist/zx-compat.global.js +0 -29008
- package/dist/zx-compat.global.min.js +0 -3
- package/src/compat/base.js +0 -291
- package/src/compat/globals.js +0 -167
- package/src/compat/index.js +0 -84
- package/src/compat/map/basic.js +0 -464
- package/src/compat/map/data.js +0 -254
- package/src/compat/map/date-time.js +0 -177
- package/src/compat/map/factory.js +0 -45
- package/src/compat/map/form.js +0 -330
- package/src/compat/map/helpers.js +0 -46
- package/src/compat/map/http.js +0 -117
- package/src/compat/map/layout.js +0 -256
- package/src/compat/map/options.js +0 -267
- package/src/compat/map/select.js +0 -198
- package/src/compat/map/stubs.js +0 -26
- package/src/compat/map/utilities.js +0 -113
- package/src/compat-entry.js +0 -11
|
@@ -0,0 +1,128 @@
|
|
|
1
|
+
import { Component } from '../../core/component.js';
|
|
2
|
+
export type CardContent = string | Node | Component | null;
|
|
3
|
+
export type ButtonOptions = import('../button/button.js').ButtonOptions;
|
|
4
|
+
export type CardAction = Element | ButtonOptions;
|
|
5
|
+
export type CardLinkDescriptor = {
|
|
6
|
+
/**
|
|
7
|
+
* Native link destination; executable/data schemes are rejected.
|
|
8
|
+
*/
|
|
9
|
+
href: string;
|
|
10
|
+
/**
|
|
11
|
+
* Native browsing context.
|
|
12
|
+
*/
|
|
13
|
+
target?: string;
|
|
14
|
+
/**
|
|
15
|
+
* Native link relationship.
|
|
16
|
+
*/
|
|
17
|
+
rel?: string;
|
|
18
|
+
/**
|
|
19
|
+
* Native click listener.
|
|
20
|
+
*/
|
|
21
|
+
onclick?: (event: MouseEvent) => void;
|
|
22
|
+
};
|
|
23
|
+
export type CardLink = string | CardLinkDescriptor | null;
|
|
24
|
+
export type CardOptions = {
|
|
25
|
+
/**
|
|
26
|
+
* Card title.
|
|
27
|
+
*/
|
|
28
|
+
title?: string;
|
|
29
|
+
/**
|
|
30
|
+
* Optional image, avatar, icon, or other media.
|
|
31
|
+
*/
|
|
32
|
+
media?: CardContent;
|
|
33
|
+
/**
|
|
34
|
+
* Main card content; enhanced children are adopted by default.
|
|
35
|
+
*/
|
|
36
|
+
content?: CardContent;
|
|
37
|
+
/**
|
|
38
|
+
* Secondary native controls beside the title.
|
|
39
|
+
*/
|
|
40
|
+
actions?: CardAction[];
|
|
41
|
+
/**
|
|
42
|
+
* Optional metadata or trailing content.
|
|
43
|
+
*/
|
|
44
|
+
footer?: CardContent;
|
|
45
|
+
/**
|
|
46
|
+
* Optional native primary link rendered around the title.
|
|
47
|
+
*/
|
|
48
|
+
link?: CardLink;
|
|
49
|
+
/**
|
|
50
|
+
* Surface treatment.
|
|
51
|
+
*/
|
|
52
|
+
variant?: 'outlined' | 'raised' | 'filled';
|
|
53
|
+
/**
|
|
54
|
+
* Media/content arrangement.
|
|
55
|
+
*/
|
|
56
|
+
orientation?: 'vertical' | 'horizontal';
|
|
57
|
+
/**
|
|
58
|
+
* Semantic title heading level.
|
|
59
|
+
*/
|
|
60
|
+
headingLevel?: 1 | 2 | 3 | 4 | 5 | 6;
|
|
61
|
+
};
|
|
62
|
+
/** @typedef {string|Node|Component|null} CardContent */
|
|
63
|
+
/** @typedef {import('../button/button.js').ButtonOptions} ButtonOptions */
|
|
64
|
+
/** @typedef {Element|ButtonOptions} CardAction */
|
|
65
|
+
/**
|
|
66
|
+
* @typedef {Object} CardLinkDescriptor
|
|
67
|
+
* @property {string} href Native link destination; executable/data schemes are rejected.
|
|
68
|
+
* @property {string} [target] Native browsing context.
|
|
69
|
+
* @property {string} [rel] Native link relationship.
|
|
70
|
+
* @property {(event: MouseEvent) => void} [onclick] Native click listener.
|
|
71
|
+
*/
|
|
72
|
+
/** @typedef {string|CardLinkDescriptor|null} CardLink */
|
|
73
|
+
/**
|
|
74
|
+
* @typedef {Object} CardOptions
|
|
75
|
+
* @property {string} [title=''] Card title.
|
|
76
|
+
* @property {CardContent} [media=null] Optional image, avatar, icon, or other media.
|
|
77
|
+
* @property {CardContent} [content=null] Main card content; enhanced children are adopted by default.
|
|
78
|
+
* @property {CardAction[]} [actions=[]] Secondary native controls beside the title.
|
|
79
|
+
* @property {CardContent} [footer=null] Optional metadata or trailing content.
|
|
80
|
+
* @property {CardLink} [link=null] Optional native primary link rendered around the title.
|
|
81
|
+
* @property {'outlined'|'raised'|'filled'} [variant='outlined'] Surface treatment.
|
|
82
|
+
* @property {'vertical'|'horizontal'} [orientation='vertical'] Media/content arrangement.
|
|
83
|
+
* @property {1|2|3|4|5|6} [headingLevel=3] Semantic title heading level.
|
|
84
|
+
*/
|
|
85
|
+
/**
|
|
86
|
+
* Semantic content or record surface with optional media, native primary link, actions, and footer.
|
|
87
|
+
* The root is never interactive: linked cards keep a real title anchor, so secondary controls are
|
|
88
|
+
* siblings rather than invalid nested actions.
|
|
89
|
+
* @extends {Component<CardOptions>}
|
|
90
|
+
*/
|
|
91
|
+
export declare class Card extends Component<CardOptions> {
|
|
92
|
+
_createdRoot: boolean;
|
|
93
|
+
_original: import("../../core/dom.js").TargetSnapshot;
|
|
94
|
+
_cleaned: boolean;
|
|
95
|
+
_title: string;
|
|
96
|
+
_link: CardLinkDescriptor;
|
|
97
|
+
_actionAbort: AbortController;
|
|
98
|
+
_linkAbort: AbortController;
|
|
99
|
+
static cssName: string;
|
|
100
|
+
/** @type {Readonly<CardOptions>} */
|
|
101
|
+
static defaults: Readonly<CardOptions>;
|
|
102
|
+
/**
|
|
103
|
+
* Creates or enhances one card.
|
|
104
|
+
* @param {Element|string|null} [target=null] Existing card container, selector, or null.
|
|
105
|
+
* @param {CardOptions} [options={}] Card options.
|
|
106
|
+
*/
|
|
107
|
+
constructor(target?: Element | string | null, options?: CardOptions);
|
|
108
|
+
/** @returns {HTMLElement} */
|
|
109
|
+
render(): HTMLElement;
|
|
110
|
+
/** Replaces the card title. @param {string} title Next title. @returns {this} */
|
|
111
|
+
setTitle(title: string): this;
|
|
112
|
+
/** Replaces or removes the media region. @param {CardContent} content Media. @returns {this} */
|
|
113
|
+
setMedia(content: CardContent): this;
|
|
114
|
+
/** Replaces or clears the main content. @param {CardContent} content Content. @returns {this} */
|
|
115
|
+
setContent(content: CardContent): this;
|
|
116
|
+
/** Replaces the secondary action controls. @param {CardAction[]} actions Actions. @returns {this} */
|
|
117
|
+
setActions(actions: CardAction[]): this;
|
|
118
|
+
/** Replaces or removes the footer. @param {CardContent} content Footer. @returns {this} */
|
|
119
|
+
setFooter(content: CardContent): this;
|
|
120
|
+
/** Sets or removes the title's native primary link. @param {CardLink} link Link. @returns {this} */
|
|
121
|
+
setLink(link: CardLink): this;
|
|
122
|
+
/** Restores an enhanced target exactly, or removes an owned card. @returns {void} */
|
|
123
|
+
destroy(): void;
|
|
124
|
+
/** @returns {void} */
|
|
125
|
+
_renderHeading(): void;
|
|
126
|
+
/** @returns {void} */
|
|
127
|
+
_syncHeader(): void;
|
|
128
|
+
}
|
|
@@ -219,6 +219,7 @@ export declare class Chart extends Component<ChartOptions> {
|
|
|
219
219
|
_chartOptions: Record<string, unknown>;
|
|
220
220
|
_loading: boolean;
|
|
221
221
|
_error: unknown;
|
|
222
|
+
_hasError: boolean;
|
|
222
223
|
_handle: ChartHandle;
|
|
223
224
|
_destroyed: boolean;
|
|
224
225
|
_observer: ResizeObserver;
|
|
@@ -21,19 +21,39 @@ export type LauncherItem = {
|
|
|
21
21
|
*/
|
|
22
22
|
group?: string;
|
|
23
23
|
/**
|
|
24
|
-
*
|
|
24
|
+
* Decorative icon name, node, or factory.
|
|
25
25
|
*/
|
|
26
|
-
icon?: string;
|
|
26
|
+
icon?: string | Node | ((item: LauncherItem) => Node | null);
|
|
27
27
|
/**
|
|
28
28
|
* Compact metadata.
|
|
29
29
|
*/
|
|
30
30
|
badge?: string | number;
|
|
31
|
+
/**
|
|
32
|
+
* Tile or row presentation.
|
|
33
|
+
*/
|
|
34
|
+
kind?: 'application' | 'record' | 'action';
|
|
35
|
+
/**
|
|
36
|
+
* Whether this is the current application or destination.
|
|
37
|
+
*/
|
|
38
|
+
current?: boolean;
|
|
39
|
+
/**
|
|
40
|
+
* Query state in which the item is visible.
|
|
41
|
+
*/
|
|
42
|
+
when?: 'always' | 'empty' | 'query';
|
|
43
|
+
/**
|
|
44
|
+
* Explicit group order.
|
|
45
|
+
*/
|
|
46
|
+
groupOrder?: number;
|
|
47
|
+
/**
|
|
48
|
+
* Stable order within equally ranked results.
|
|
49
|
+
*/
|
|
50
|
+
itemOrder?: number;
|
|
31
51
|
/**
|
|
32
52
|
* Emitted value; defaults to `id`.
|
|
33
53
|
*/
|
|
34
54
|
value?: unknown;
|
|
35
55
|
/**
|
|
36
|
-
* Native link target.
|
|
56
|
+
* Native link target; executable/data schemes are disabled.
|
|
37
57
|
*/
|
|
38
58
|
href?: string;
|
|
39
59
|
/**
|
|
@@ -66,6 +86,14 @@ export type LauncherSource = {
|
|
|
66
86
|
* Per-source minimum query length.
|
|
67
87
|
*/
|
|
68
88
|
minQuery?: number;
|
|
89
|
+
/**
|
|
90
|
+
* Query state in which the source runs.
|
|
91
|
+
*/
|
|
92
|
+
when?: 'always' | 'empty' | 'query';
|
|
93
|
+
/**
|
|
94
|
+
* Whether Zx ranks results or preserves source order.
|
|
95
|
+
*/
|
|
96
|
+
order?: 'rank' | 'source';
|
|
69
97
|
/**
|
|
70
98
|
* Loader.
|
|
71
99
|
*/
|
|
@@ -106,6 +134,14 @@ export type LauncherOptions = {
|
|
|
106
134
|
* Dialog and field label.
|
|
107
135
|
*/
|
|
108
136
|
label?: string;
|
|
137
|
+
/**
|
|
138
|
+
* Close-button accessible label.
|
|
139
|
+
*/
|
|
140
|
+
closeLabel?: string;
|
|
141
|
+
/**
|
|
142
|
+
* Results-region accessible label.
|
|
143
|
+
*/
|
|
144
|
+
resultsLabel?: string;
|
|
109
145
|
/**
|
|
110
146
|
* Empty-state text.
|
|
111
147
|
*/
|
|
@@ -118,6 +154,14 @@ export type LauncherOptions = {
|
|
|
118
154
|
* Optional global keyboard shortcut.
|
|
119
155
|
*/
|
|
120
156
|
shortcut?: 'mod+k' | false;
|
|
157
|
+
/**
|
|
158
|
+
* Visible keyboard hints, or false.
|
|
159
|
+
*/
|
|
160
|
+
hints?: false | {
|
|
161
|
+
move?: string;
|
|
162
|
+
open?: string;
|
|
163
|
+
close?: string;
|
|
164
|
+
};
|
|
121
165
|
/**
|
|
122
166
|
* Preventable selection listener.
|
|
123
167
|
*/
|
|
@@ -161,10 +205,15 @@ export type RankedLauncherItem = LauncherItem & {
|
|
|
161
205
|
* @property {string} [description] Secondary text.
|
|
162
206
|
* @property {string|string[]} [keywords] Additional search text.
|
|
163
207
|
* @property {string} [group] Result group.
|
|
164
|
-
* @property {string} [icon]
|
|
208
|
+
* @property {string|Node|((item: LauncherItem) => Node|null)} [icon] Decorative icon name, node, or factory.
|
|
165
209
|
* @property {string|number} [badge] Compact metadata.
|
|
210
|
+
* @property {'application'|'record'|'action'} [kind='action'] Tile or row presentation.
|
|
211
|
+
* @property {boolean} [current=false] Whether this is the current application or destination.
|
|
212
|
+
* @property {'always'|'empty'|'query'} [when='always'] Query state in which the item is visible.
|
|
213
|
+
* @property {number} [groupOrder] Explicit group order.
|
|
214
|
+
* @property {number} [itemOrder] Stable order within equally ranked results.
|
|
166
215
|
* @property {unknown} [value] Emitted value; defaults to `id`.
|
|
167
|
-
* @property {string} [href] Native link target.
|
|
216
|
+
* @property {string} [href] Native link target; executable/data schemes are disabled.
|
|
168
217
|
* @property {string} [target] Native link browsing context.
|
|
169
218
|
* @property {() => void} [invoke] Application-owned callback for non-link actions.
|
|
170
219
|
* @property {boolean|number} [pinned] Pinned state or explicit pinned order.
|
|
@@ -175,6 +224,8 @@ export type RankedLauncherItem = LauncherItem & {
|
|
|
175
224
|
* @property {string} id Source identifier.
|
|
176
225
|
* @property {string} [label] Default group label.
|
|
177
226
|
* @property {number} [minQuery] Per-source minimum query length.
|
|
227
|
+
* @property {'always'|'empty'|'query'} [when='always'] Query state in which the source runs.
|
|
228
|
+
* @property {'rank'|'source'} [order='rank'] Whether Zx ranks results or preserves source order.
|
|
178
229
|
* @property {(query: string, context: {signal: AbortSignal}) => Promise<LauncherItem[]>|LauncherItem[]} load Loader.
|
|
179
230
|
*/
|
|
180
231
|
/**
|
|
@@ -187,9 +238,12 @@ export type RankedLauncherItem = LauncherItem & {
|
|
|
187
238
|
* @property {number} [maxResults=100] Maximum combined results.
|
|
188
239
|
* @property {string} [placeholder='Search applications and records'] Search-field placeholder.
|
|
189
240
|
* @property {string} [label='Launcher'] Dialog and field label.
|
|
241
|
+
* @property {string} [closeLabel='Close launcher'] Close-button accessible label.
|
|
242
|
+
* @property {string} [resultsLabel='Launcher results'] Results-region accessible label.
|
|
190
243
|
* @property {string} [emptyText='No results'] Empty-state text.
|
|
191
244
|
* @property {string} [loadingText='Searching…'] Loading-state text.
|
|
192
245
|
* @property {'mod+k'|false} [shortcut='mod+k'] Optional global keyboard shortcut.
|
|
246
|
+
* @property {false|{move?: string, open?: string, close?: string}} [hints] Visible keyboard hints, or false.
|
|
193
247
|
* @property {(event: CustomEvent<LauncherSelectDetail>) => void} [onselect] Preventable selection listener.
|
|
194
248
|
* @property {(event: CustomEvent<{query: string}>) => void} [onquery] Query-change listener.
|
|
195
249
|
* @property {(event: CustomEvent<Record<string, never>>) => void} [onopen] Open listener.
|
|
@@ -217,8 +271,9 @@ export declare class Launcher extends Component<LauncherOptions> {
|
|
|
217
271
|
_sources: LauncherSource[];
|
|
218
272
|
_sourceItems: Map<any, any>;
|
|
219
273
|
_query: string;
|
|
274
|
+
_renderedQuery: string;
|
|
220
275
|
_results: any[];
|
|
221
|
-
_active:
|
|
276
|
+
_active: any;
|
|
222
277
|
_request: AbortController;
|
|
223
278
|
_requestSequence: number;
|
|
224
279
|
_queryTimer: number;
|
|
@@ -251,6 +306,8 @@ export declare class Launcher extends Component<LauncherOptions> {
|
|
|
251
306
|
getQuery(): string;
|
|
252
307
|
/** Replaces local catalogue items. @param {LauncherItem[]} items @returns {this} */
|
|
253
308
|
setItems(items: LauncherItem[]): this;
|
|
309
|
+
/** Marks one local item as the current destination. @param {string|number|null} id Item id. @returns {this} */
|
|
310
|
+
setCurrent(id: string | number | null): this;
|
|
254
311
|
/** Replaces asynchronous sources and aborts work from the old set. @param {LauncherSource[]} sources @returns {this} */
|
|
255
312
|
setSources(sources: LauncherSource[]): this;
|
|
256
313
|
/** Aborts sources and removes the owned dialog. @returns {void} */
|
|
@@ -273,6 +330,8 @@ export declare class Launcher extends Component<LauncherOptions> {
|
|
|
273
330
|
_syncActive(): void;
|
|
274
331
|
/** @param {KeyboardEvent} event @returns {void} */
|
|
275
332
|
_onKeydown(event: KeyboardEvent): void;
|
|
333
|
+
/** @param {string} direction @param {number[]} enabled @returns {number|null} */
|
|
334
|
+
_spatialIndex(direction: string, enabled: number[]): number | null;
|
|
276
335
|
/** @param {number} index @param {Event} event @returns {void} */
|
|
277
336
|
_activate(index: number, event: Event): void;
|
|
278
337
|
/** @param {KeyboardEvent} event @returns {void} */
|
|
@@ -3,6 +3,14 @@ export type Primitive = string | number | boolean | symbol | bigint | null | und
|
|
|
3
3
|
export type SelectItem = Record<string, any> | Primitive;
|
|
4
4
|
export type SelectValueReader = string | ((item: SelectItem) => unknown);
|
|
5
5
|
export type SelectLabelReader = string | ((item: SelectItem) => string);
|
|
6
|
+
export type SelectAction = {
|
|
7
|
+
id: string | number;
|
|
8
|
+
label: string;
|
|
9
|
+
icon?: string | Node;
|
|
10
|
+
description?: string;
|
|
11
|
+
group?: string;
|
|
12
|
+
invoke?: (detail: SelectActionDetail) => void;
|
|
13
|
+
};
|
|
6
14
|
export type SelectOptions = {
|
|
7
15
|
/**
|
|
8
16
|
* Available values.
|
|
@@ -28,6 +36,22 @@ export type SelectOptions = {
|
|
|
28
36
|
* Selected-value renderer.
|
|
29
37
|
*/
|
|
30
38
|
renderValue?: ((item: SelectItem) => string) | null;
|
|
39
|
+
/**
|
|
40
|
+
* Decorative content before the selected text.
|
|
41
|
+
*/
|
|
42
|
+
renderValueAdornment?: ((item: SelectItem) => Node | string | null) | null;
|
|
43
|
+
/**
|
|
44
|
+
* Clear-row renderer.
|
|
45
|
+
*/
|
|
46
|
+
renderNone?: ((label: string) => Node | string) | null;
|
|
47
|
+
/**
|
|
48
|
+
* Clear-row label independent from the input placeholder.
|
|
49
|
+
*/
|
|
50
|
+
noneLabel?: string | null;
|
|
51
|
+
/**
|
|
52
|
+
* Command rows that emit `action` without changing value.
|
|
53
|
+
*/
|
|
54
|
+
actions?: SelectAction[];
|
|
31
55
|
/**
|
|
32
56
|
* Initially selected ID or item.
|
|
33
57
|
*/
|
|
@@ -92,6 +116,10 @@ export type SelectOptions = {
|
|
|
92
116
|
* Async-loaded listener.
|
|
93
117
|
*/
|
|
94
118
|
onloaded?: (event: CustomEvent<SelectLoadedDetail>) => void;
|
|
119
|
+
/**
|
|
120
|
+
* Preventable command-row listener.
|
|
121
|
+
*/
|
|
122
|
+
onaction?: (event: CustomEvent<SelectActionDetail>) => void;
|
|
95
123
|
};
|
|
96
124
|
export type SelectChangeDetail = {
|
|
97
125
|
value: unknown;
|
|
@@ -103,9 +131,16 @@ export type SelectQueryDetail = {
|
|
|
103
131
|
export type SelectLoadedDetail = {
|
|
104
132
|
items: SelectItem[];
|
|
105
133
|
};
|
|
134
|
+
export type SelectActionDetail = {
|
|
135
|
+
id: string | number;
|
|
136
|
+
action: SelectAction;
|
|
137
|
+
query: string;
|
|
138
|
+
select: Select;
|
|
139
|
+
};
|
|
106
140
|
export type SelectOptionEntry = {
|
|
107
141
|
item: SelectItem | null;
|
|
108
142
|
clear: boolean;
|
|
143
|
+
action: SelectAction | null;
|
|
109
144
|
element: HTMLElement;
|
|
110
145
|
};
|
|
111
146
|
export type SelectSetOptions = {
|
|
@@ -126,6 +161,7 @@ export declare class Select extends Component<SelectOptions> {
|
|
|
126
161
|
_visibleItems: any[];
|
|
127
162
|
_fixedItems: any[] | SelectItem[];
|
|
128
163
|
_visibleFixed: any[] | SelectItem[];
|
|
164
|
+
_actions: any[] | SelectAction[];
|
|
129
165
|
_selected: SelectItem;
|
|
130
166
|
_optionEntries: any[];
|
|
131
167
|
_activeIndex: number;
|
|
@@ -171,6 +207,8 @@ export declare class Select extends Component<SelectOptions> {
|
|
|
171
207
|
* @returns {this}
|
|
172
208
|
*/
|
|
173
209
|
setFixedItems(items: SelectItem[]): this;
|
|
210
|
+
/** Replaces command rows without changing the selected value. @param {SelectAction[]} actions @returns {this} */
|
|
211
|
+
setActions(actions: SelectAction[]): this;
|
|
174
212
|
/**
|
|
175
213
|
* Restores the configured initial value.
|
|
176
214
|
* @param {{silent?: boolean}} [options={}] Reset behavior.
|
|
@@ -196,6 +234,15 @@ export declare class Select extends Component<SelectOptions> {
|
|
|
196
234
|
* @returns {Select}
|
|
197
235
|
*/
|
|
198
236
|
static priority(target: Element | string | null, options?: SelectOptions): Select;
|
|
237
|
+
/**
|
|
238
|
+
* Creates a status picker with shape- and color-distinct workflow indicators.
|
|
239
|
+
* @param {Element|string|null} target Component target.
|
|
240
|
+
* @param {SelectOptions & {items?: Array<Record<string, any>>}} [options={}] Select overrides and status items.
|
|
241
|
+
* @returns {Select}
|
|
242
|
+
*/
|
|
243
|
+
static status(target: Element | string | null, options?: SelectOptions & {
|
|
244
|
+
items?: Array<Record<string, any>>;
|
|
245
|
+
}): Select;
|
|
199
246
|
/**
|
|
200
247
|
* Creates the record-permission picker: the fixed Private and Public choices above the groups a
|
|
201
248
|
* record can be shared with. The value is the tri-state ZeyOS stores — `false` for private,
|
|
@@ -228,6 +275,8 @@ export declare class Select extends Component<SelectOptions> {
|
|
|
228
275
|
_renderOptions(): void;
|
|
229
276
|
/** @param {SelectItem|null} item @param {boolean} clear @param {string} [label] @returns {void} */
|
|
230
277
|
_appendOption(item: SelectItem | null, clear: boolean, label?: string): void;
|
|
278
|
+
/** @param {SelectAction} action @returns {void} */
|
|
279
|
+
_appendAction(action: SelectAction): void;
|
|
231
280
|
/** @param {SelectItem|null} item @returns {Node|string} */
|
|
232
281
|
_renderItem(item: SelectItem | null): Node | string;
|
|
233
282
|
/** @param {string} query @returns {void} */
|
|
@@ -241,6 +290,8 @@ export declare class Select extends Component<SelectOptions> {
|
|
|
241
290
|
/** @returns {void} */
|
|
242
291
|
_syncInputValue(): void;
|
|
243
292
|
/** @returns {void} */
|
|
293
|
+
_syncValueAdornment(): void;
|
|
294
|
+
/** @returns {void} */
|
|
244
295
|
_syncDisabled(): void;
|
|
245
296
|
/** @param {unknown} candidate @returns {SelectItem|null} */
|
|
246
297
|
_findItem(candidate: unknown): SelectItem | null;
|
|
@@ -444,7 +444,8 @@ export type TableEditorEntry = {
|
|
|
444
444
|
* @extends {Component<TableOptions>}
|
|
445
445
|
*/
|
|
446
446
|
export declare class Table extends Component<TableOptions> {
|
|
447
|
-
|
|
447
|
+
_createdRoot: boolean;
|
|
448
|
+
_original: import("../../core/dom.js").TargetSnapshot;
|
|
448
449
|
_columns: {
|
|
449
450
|
id: string;
|
|
450
451
|
label: string;
|
|
@@ -523,8 +524,8 @@ export declare class Table extends Component<TableOptions> {
|
|
|
523
524
|
render(): HTMLElement;
|
|
524
525
|
/**
|
|
525
526
|
* Toggles a loading state. While loading, the body is dimmed, an indeterminate progress bar is
|
|
526
|
-
* shown, and `aria-busy` is set — a lightweight
|
|
527
|
-
*
|
|
527
|
+
* shown, and `aria-busy` is set — a lightweight enterprise-table busy and skeleton pattern.
|
|
528
|
+
* Call `setLoading(false)` (or `setData`) when done.
|
|
528
529
|
* @param {boolean} [loading=true] Whether the table is loading.
|
|
529
530
|
* @returns {this}
|
|
530
531
|
*/
|
package/dist/types/core/dom.d.ts
CHANGED
|
@@ -64,6 +64,14 @@ export declare function parseCompactTag(compact: string): CompactTag;
|
|
|
64
64
|
export declare function compactElement(compact: string, properties?: DomBuilderProperties | null, content?: unknown): HTMLElement;
|
|
65
65
|
/** Exact migration-facing alias retained for existing ZeyOS builder calls. */
|
|
66
66
|
export declare const __: typeof compactElement;
|
|
67
|
+
/**
|
|
68
|
+
* Returns a trimmed native-link destination unless its parsed scheme can execute document code.
|
|
69
|
+
* Relative URLs, fragments, and ordinary application protocols remain valid; malformed and
|
|
70
|
+
* control-obfuscated script/data schemes are rejected.
|
|
71
|
+
* @param {unknown} value Candidate href.
|
|
72
|
+
* @returns {string|null}
|
|
73
|
+
*/
|
|
74
|
+
export declare function safeHref(value: unknown): string | null;
|
|
67
75
|
/**
|
|
68
76
|
* Applies the established ZeyOS property rules to an existing element:
|
|
69
77
|
* `Dname` → `data-name`, `SfontSize` → `style.fontSize`, `on*` → a legacy-compatible listener,
|
package/dist/types/index.d.ts
CHANGED
|
@@ -37,6 +37,7 @@ export { CopyInput } from './components/copy/copy-input.js';
|
|
|
37
37
|
export { Toolbar } from './components/toolbar/toolbar.js';
|
|
38
38
|
export { Toggle } from './components/toggle/toggle.js';
|
|
39
39
|
export { Groupbox } from './components/groupbox/groupbox.js';
|
|
40
|
+
export { Card } from './components/card/card.js';
|
|
40
41
|
export { Panel } from './components/panel/panel.js';
|
|
41
42
|
export { MasterPanel } from './components/master-panel/master-panel.js';
|
|
42
43
|
export { SplitView, clampSize, resolveSize, snapSize } from './components/split-view/split-view.js';
|
|
@@ -50,7 +51,7 @@ export { Search } from './components/search/search.js';
|
|
|
50
51
|
export { Launcher, rankLauncherItems } from './components/launcher/launcher.js';
|
|
51
52
|
export { Avatar, avatarInitials } from './components/avatar/avatar.js';
|
|
52
53
|
export { AccountMenu } from './components/account-menu/account-menu.js';
|
|
53
|
-
export {
|
|
54
|
+
export { normalizeAppItems } from './internal/app-rail.js';
|
|
54
55
|
export { AppSidebar } from './components/app-sidebar/app-sidebar.js';
|
|
55
56
|
export { Message } from './components/message/message.js';
|
|
56
57
|
export { Modal } from './components/modal/modal.js';
|
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import { Component } from '
|
|
2
|
-
import { Dropdown } from '../dropdown/dropdown.js';
|
|
1
|
+
import { Component } from '../core/component.js';
|
|
2
|
+
import { Dropdown } from '../components/dropdown/dropdown.js';
|
|
3
3
|
export type AppNavItem = {
|
|
4
4
|
/**
|
|
5
5
|
* Stable item identifier.
|
|
@@ -10,9 +10,11 @@ export type AppNavItem = {
|
|
|
10
10
|
*/
|
|
11
11
|
label: string;
|
|
12
12
|
/**
|
|
13
|
-
*
|
|
13
|
+
* Icon name, node, component, or factory.
|
|
14
14
|
*/
|
|
15
|
-
icon?: string
|
|
15
|
+
icon?: string | Node | {
|
|
16
|
+
toElement: () => Node | null;
|
|
17
|
+
} | ((context: Record<string, any>, item: AppNavItem) => Node | null);
|
|
16
18
|
/**
|
|
17
19
|
* Count or status badge.
|
|
18
20
|
*/
|
|
@@ -22,7 +24,7 @@ export type AppNavItem = {
|
|
|
22
24
|
*/
|
|
23
25
|
value?: unknown;
|
|
24
26
|
/**
|
|
25
|
-
* Native navigation target.
|
|
27
|
+
* Native navigation target; executable/data schemes are disabled.
|
|
26
28
|
*/
|
|
27
29
|
href?: string;
|
|
28
30
|
/**
|
|
@@ -42,7 +44,7 @@ export type AppNavItem = {
|
|
|
42
44
|
*/
|
|
43
45
|
children?: AppNavItem[];
|
|
44
46
|
};
|
|
45
|
-
export type
|
|
47
|
+
export type AppRailPresenterOptions = {
|
|
46
48
|
/**
|
|
47
49
|
* Application navigation tree.
|
|
48
50
|
*/
|
|
@@ -83,6 +85,10 @@ export type AppRailOptions = {
|
|
|
83
85
|
* Pointer/focus crossing grace in milliseconds.
|
|
84
86
|
*/
|
|
85
87
|
closeDelay?: number;
|
|
88
|
+
/**
|
|
89
|
+
* Optional host icon renderer.
|
|
90
|
+
*/
|
|
91
|
+
renderIcon?: (item: AppNavItem, context: Record<string, any>) => Node | null;
|
|
86
92
|
/**
|
|
87
93
|
* Preventable action listener.
|
|
88
94
|
*/
|
|
@@ -115,17 +121,17 @@ export type RailFlyout = {
|
|
|
115
121
|
* @typedef {Object} AppNavItem
|
|
116
122
|
* @property {string|number} id Stable item identifier.
|
|
117
123
|
* @property {string} label Visible/accessibility label.
|
|
118
|
-
* @property {string} [icon]
|
|
124
|
+
* @property {string|Node|{toElement: () => Node|null}|((context: Record<string, any>, item: AppNavItem) => Node|null)} [icon] Icon name, node, component, or factory.
|
|
119
125
|
* @property {string|number} [badge] Count or status badge.
|
|
120
126
|
* @property {unknown} [value] Emitted value; defaults to `id`.
|
|
121
|
-
* @property {string} [href] Native navigation target.
|
|
127
|
+
* @property {string} [href] Native navigation target; executable/data schemes are disabled.
|
|
122
128
|
* @property {string} [target] Native link browsing context.
|
|
123
129
|
* @property {() => void} [invoke] Application-owned non-link action.
|
|
124
130
|
* @property {boolean} [disabled] Whether activation is unavailable.
|
|
125
131
|
* @property {AppNavItem[]} [children] Child destinations/actions.
|
|
126
132
|
*/
|
|
127
133
|
/**
|
|
128
|
-
* @typedef {Object}
|
|
134
|
+
* @typedef {Object} AppRailPresenterOptions
|
|
129
135
|
* @property {AppNavItem[]} [items=[]] Application navigation tree.
|
|
130
136
|
* @property {string|number|null} [active=null] Active item id.
|
|
131
137
|
* @property {'vertical'|'horizontal'} [orientation='vertical'] Rail flow.
|
|
@@ -135,6 +141,7 @@ export type RailFlyout = {
|
|
|
135
141
|
* @property {Node|string|number|{toElement: () => Node|null}|null} [footer=null] Trailing rail content.
|
|
136
142
|
* @property {number} [openDelay=80] Hover-open delay in milliseconds.
|
|
137
143
|
* @property {number} [closeDelay=160] Pointer/focus crossing grace in milliseconds.
|
|
144
|
+
* @property {(item: AppNavItem, context: Record<string, any>) => Node|null} [renderIcon] Optional host icon renderer.
|
|
138
145
|
* @property {(event: CustomEvent<AppNavSelectDetail>) => void} [onselect] Preventable action listener.
|
|
139
146
|
* @property {(event: CustomEvent<{item: AppNavItem, id: string|number, open: boolean}>) => void} [onflyoutchange] Flyout-state listener.
|
|
140
147
|
*/
|
|
@@ -142,11 +149,11 @@ export type RailFlyout = {
|
|
|
142
149
|
/** @typedef {{key: string, parentKey: string|null, item: AppNavItem, trigger: HTMLElement, panel: HTMLElement, dropdown: Dropdown}} RailFlyout */
|
|
143
150
|
/**
|
|
144
151
|
* Minimized application navigation; descendants always open in hover/focus flyouts, never inline.
|
|
145
|
-
* @fires
|
|
146
|
-
* @fires
|
|
147
|
-
* @extends {Component<
|
|
152
|
+
* @fires AppRailPresenter#select
|
|
153
|
+
* @fires AppRailPresenter#flyoutchange
|
|
154
|
+
* @extends {Component<AppRailPresenterOptions>}
|
|
148
155
|
*/
|
|
149
|
-
export declare class
|
|
156
|
+
export declare class AppRailPresenter extends Component<AppRailPresenterOptions> {
|
|
150
157
|
_createdRoot: boolean;
|
|
151
158
|
_original: {
|
|
152
159
|
attributes: string[][];
|
|
@@ -163,14 +170,14 @@ export declare class AppRail extends Component<AppRailOptions> {
|
|
|
163
170
|
_pointerFocus: WeakSet<object>;
|
|
164
171
|
_silenceFlyoutEvents: boolean;
|
|
165
172
|
static cssName: string;
|
|
166
|
-
/** @type {Readonly<
|
|
167
|
-
static defaults: Readonly<
|
|
173
|
+
/** @type {Readonly<AppRailPresenterOptions>} */
|
|
174
|
+
static defaults: Readonly<AppRailPresenterOptions>;
|
|
168
175
|
/**
|
|
169
176
|
* Creates or enhances a rail host.
|
|
170
177
|
* @param {Element|string|null} target Rail target.
|
|
171
|
-
* @param {
|
|
178
|
+
* @param {AppRailPresenterOptions} [options={}] Rail options.
|
|
172
179
|
*/
|
|
173
|
-
constructor(target?: Element | string | null, options?:
|
|
180
|
+
constructor(target?: Element | string | null, options?: AppRailPresenterOptions);
|
|
174
181
|
/** @returns {HTMLElement} */
|
|
175
182
|
render(): HTMLElement;
|
|
176
183
|
/** Replaces navigation items and closes removed flyouts. @param {AppNavItem[]} items @returns {this} */
|
|
@@ -245,6 +252,14 @@ declare class RailListenerScope extends Component {
|
|
|
245
252
|
* @returns {AppNavItem[]}
|
|
246
253
|
*/
|
|
247
254
|
export declare function normalizeAppItems(items: unknown): AppNavItem[];
|
|
255
|
+
/**
|
|
256
|
+
* Resolves a host-rendered or item-owned navigation icon without moving a mounted source node.
|
|
257
|
+
* @param {AppNavItem} item Navigation item.
|
|
258
|
+
* @param {unknown} renderer Optional component-level renderer.
|
|
259
|
+
* @param {Record<string, any>} context Presentation context.
|
|
260
|
+
* @returns {Node|null}
|
|
261
|
+
*/
|
|
262
|
+
export declare function appNavIcon(item: AppNavItem, renderer: unknown, context: Record<string, any>): Node | null;
|
|
248
263
|
export {};
|
|
249
|
-
/** Fired when a destination/action is activated. @event
|
|
250
|
-
/** Fired when a flyout opens or closes. @event
|
|
264
|
+
/** Fired when a destination/action is activated. @event AppRailPresenter#select @type {CustomEvent<AppNavSelectDetail>} */
|
|
265
|
+
/** Fired when a flyout opens or closes. @event AppRailPresenter#flyoutchange @type {CustomEvent<{item: AppNavItem, id: string|number, open: boolean}>} */
|
|
@@ -79,6 +79,10 @@ export type ModuleChipOptions = {
|
|
|
79
79
|
* Use the stock Font Awesome fallback glyph.
|
|
80
80
|
*/
|
|
81
81
|
standard?: boolean;
|
|
82
|
+
/**
|
|
83
|
+
* Override the module colour for a server-defined fork or weblet.
|
|
84
|
+
*/
|
|
85
|
+
color?: string;
|
|
82
86
|
/**
|
|
83
87
|
* Extra class names.
|
|
84
88
|
*/
|
|
@@ -91,6 +95,7 @@ export type ModuleChipOptions = {
|
|
|
91
95
|
* @property {string|null} [label=null] Accessible label; null marks the chip decorative.
|
|
92
96
|
* @property {boolean} [title=false] Adds the module's display name as a `title` tooltip.
|
|
93
97
|
* @property {boolean} [standard=false] Use the stock Font Awesome fallback glyph.
|
|
98
|
+
* @property {string} [color] Override the module colour for a server-defined fork or weblet.
|
|
94
99
|
* @property {string|string[]} [class] Extra class names.
|
|
95
100
|
*/
|
|
96
101
|
/**
|
|
@@ -7,6 +7,7 @@ export { buildListQuery, tableSortToQuery, dataFilterStateToFilters, dateToUnixS
|
|
|
7
7
|
export { connect } from './connect.js';
|
|
8
8
|
export { zeyosModules, moduleAliases, moduleInfo, moduleColor, moduleIconName, moduleKeys, moduleGlyphColor, normalizeModuleName, registerModules } from './modules.js';
|
|
9
9
|
export { ZEYOS_ICON_KIT, useZeyosIcons, moduleIcon, moduleChip } from './icons.js';
|
|
10
|
-
export {
|
|
10
|
+
export { ZEYOS_LAUNCHER_APPLICATIONS, buildZeyosLauncherConfig, zeyosLauncher, normalizeZeyosLauncherApplications, normalizeZeyosLauncherRecords, zeyosActiveIdentifier } from './launcher.js';
|
|
11
|
+
export { zeyosSelect, buildZeyosSelectConfig, zeyosEntitySelect, buildZeyosEntitySelectConfig } from './select.js';
|
|
11
12
|
export { zeyosForm } from './form.js';
|
|
12
13
|
export { zeyosTable } from './table.js';
|