@zeyos/zx 2.2.1 → 3.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 +197 -0
- package/DESIGN-SYSTEM.md +136 -0
- package/MIGRATION.md +155 -4
- package/README.md +51 -14
- package/dist/types/compat/map/data.d.ts +3 -2
- package/dist/types/components/account-menu/account-menu.d.ts +144 -0
- package/dist/types/components/app-rail/app-rail.d.ts +250 -0
- package/dist/types/components/app-sidebar/app-sidebar.d.ts +169 -0
- package/dist/types/components/avatar/avatar.d.ts +100 -0
- package/dist/types/components/chart/chart.d.ts +321 -0
- package/dist/types/components/date-picker/month-picker.d.ts +6 -0
- package/dist/types/components/dialog/dialog.d.ts +9 -0
- package/dist/types/components/dock/dock.d.ts +495 -0
- package/dist/types/components/dropdown/dropdown.d.ts +2 -2
- package/dist/types/components/field/field.d.ts +14 -0
- package/dist/types/components/field-upload/field-upload.d.ts +37 -4
- package/dist/types/components/form/form.d.ts +25 -3
- package/dist/types/components/grid/grid.d.ts +172 -0
- package/dist/types/components/launcher/launcher.d.ts +300 -0
- package/dist/types/components/layout/layout.d.ts +4 -4
- package/dist/types/components/menu-button/menu-button.d.ts +10 -2
- package/dist/types/components/modal/modal.d.ts +25 -0
- package/dist/types/components/multi-value-editor/multi-value-editor.d.ts +74 -9
- package/dist/types/components/questionnaire/items.d.ts +327 -0
- package/dist/types/components/questionnaire/questionnaire.d.ts +449 -0
- package/dist/types/components/select/select.d.ts +36 -1
- package/dist/types/components/sheet/sheet-stack.d.ts +167 -0
- package/dist/types/components/sheet/sheet.d.ts +294 -0
- package/dist/types/components/split-view/split-view.d.ts +2 -21
- package/dist/types/components/tabbox/tabbox.d.ts +12 -3
- package/dist/types/components/table/table.d.ts +219 -12
- package/dist/types/components/tooltip/tooltip.d.ts +2 -2
- package/dist/types/components/value-list/value-list.d.ts +24 -3
- package/dist/types/core/dom.d.ts +114 -0
- package/dist/types/core/drag-axis.d.ts +111 -0
- package/dist/types/core/position.d.ts +4 -2
- package/dist/types/index.d.ts +12 -2
- package/dist/zx-compat.esm.js +943 -311
- package/dist/zx-compat.esm.min.js +1 -1
- package/dist/zx-compat.global.js +7893 -2252
- package/dist/zx-compat.global.min.js +3 -3
- package/dist/zx-zeyos.esm.js +826 -114
- package/dist/zx-zeyos.esm.min.js +1 -1
- package/dist/zx.css +1720 -243
- package/dist/zx.esm.js +8227 -2599
- package/dist/zx.esm.min.js +3 -3
- package/dist/zx.global.js +8227 -2599
- package/dist/zx.global.min.js +3 -3
- package/dist/zx.min.css +1 -1
- package/docs/api.json +2597 -255
- package/docs/llms.md +475 -37
- package/docs/llms.txt +21 -9
- package/package.json +4 -2
- package/src/compat/globals.js +3 -1
- package/src/compat/map/data.js +31 -9
- package/src/components/account-menu/account-menu.css +70 -0
- package/src/components/account-menu/account-menu.js +208 -0
- package/src/components/app-rail/app-rail.css +107 -0
- package/src/components/app-rail/app-rail.js +668 -0
- package/src/components/app-sidebar/app-sidebar.css +68 -0
- package/src/components/app-sidebar/app-sidebar.js +388 -0
- package/src/components/avatar/avatar.css +61 -0
- package/src/components/avatar/avatar.js +222 -0
- package/src/components/button/button.css +0 -1
- package/src/components/chart/chart.css +61 -0
- package/src/components/chart/chart.js +518 -0
- package/src/components/date-picker/date-range-picker.css +7 -0
- package/src/components/date-picker/month-picker.js +9 -0
- package/src/components/dialog/dialog.js +11 -4
- package/src/components/dock/dock.css +228 -0
- package/src/components/dock/dock.js +977 -0
- package/src/components/dropdown/dropdown.js +1 -1
- package/src/components/field/field.js +2 -0
- package/src/components/field-upload/field-upload.js +9 -4
- package/src/components/fieldset/fieldset.css +7 -0
- package/src/components/form/form.css +7 -0
- package/src/components/form/form.js +6 -3
- package/src/components/grid/grid.css +6 -0
- package/src/components/grid/grid.js +213 -0
- package/src/components/launcher/launcher.css +100 -0
- package/src/components/launcher/launcher.js +557 -0
- package/src/components/layout/layout.js +2 -2
- package/src/components/menu-button/menu-button.js +27 -2
- package/src/components/modal/modal.css +5 -1
- package/src/components/modal/modal.js +37 -2
- package/src/components/multi-value-editor/multi-value-editor.css +99 -15
- package/src/components/multi-value-editor/multi-value-editor.js +237 -19
- package/src/components/navigation-bar/navigation-bar.css +7 -0
- package/src/components/questionnaire/items.js +370 -0
- package/src/components/questionnaire/questionnaire.css +387 -0
- package/src/components/questionnaire/questionnaire.js +1033 -0
- package/src/components/search/search.css +10 -2
- package/src/components/select/select.css +6 -1
- package/src/components/select/select.js +99 -11
- package/src/components/sheet/sheet-stack.js +304 -0
- package/src/components/sheet/sheet.css +351 -0
- package/src/components/sheet/sheet.js +551 -0
- package/src/components/split-view/split-view.js +76 -161
- package/src/components/stepper/stepper.css +12 -2
- package/src/components/tabbox/tabbox.css +13 -3
- package/src/components/tabbox/tabbox.js +34 -10
- package/src/components/table/table.css +43 -0
- package/src/components/table/table.js +523 -45
- package/src/components/tooltip/tooltip.js +5 -2
- package/src/components/value-list/value-list.js +6 -3
- package/src/core/dom.js +302 -0
- package/src/core/drag-axis.js +203 -0
- package/src/core/position.js +68 -22
- package/src/index.js +19 -2
- package/styles/tokens/dark.css +15 -13
- package/styles/tokens/global.css +17 -5
- package/styles/tokens/semantic.css +14 -8
- package/styles/tokens/themes.css +72 -0
- package/styles/zx.css +11 -1
- package/dist/types/components/permission/permission.d.ts +0 -93
- package/src/components/permission/permission.css +0 -47
- package/src/components/permission/permission.js +0 -198
|
@@ -0,0 +1,172 @@
|
|
|
1
|
+
import { Table } from '../table/table.js';
|
|
2
|
+
export type BillingRow = Record<string, any>;
|
|
3
|
+
export type GridOptions = Object;
|
|
4
|
+
export type BillingFields = {
|
|
5
|
+
/**
|
|
6
|
+
* Row identifier field.
|
|
7
|
+
*/
|
|
8
|
+
id?: string;
|
|
9
|
+
/**
|
|
10
|
+
* Parent identifier field.
|
|
11
|
+
*/
|
|
12
|
+
parent?: string;
|
|
13
|
+
/**
|
|
14
|
+
* Line description field.
|
|
15
|
+
*/
|
|
16
|
+
item?: string;
|
|
17
|
+
/**
|
|
18
|
+
* Line-kind field (`group`/`subtotal` rows are read-only).
|
|
19
|
+
*/
|
|
20
|
+
kind?: string;
|
|
21
|
+
/**
|
|
22
|
+
* Quantity field.
|
|
23
|
+
*/
|
|
24
|
+
quantity?: string;
|
|
25
|
+
/**
|
|
26
|
+
* Unit field.
|
|
27
|
+
*/
|
|
28
|
+
unit?: string;
|
|
29
|
+
/**
|
|
30
|
+
* Unit-price field.
|
|
31
|
+
*/
|
|
32
|
+
unitPrice?: string;
|
|
33
|
+
/**
|
|
34
|
+
* Currency-code field.
|
|
35
|
+
*/
|
|
36
|
+
currency?: string;
|
|
37
|
+
/**
|
|
38
|
+
* Line-total field.
|
|
39
|
+
*/
|
|
40
|
+
total?: string;
|
|
41
|
+
};
|
|
42
|
+
export type BillingItemsOptions = {
|
|
43
|
+
/**
|
|
44
|
+
* Billing rows.
|
|
45
|
+
*/
|
|
46
|
+
data?: BillingRow[];
|
|
47
|
+
/**
|
|
48
|
+
* Schema field overrides.
|
|
49
|
+
*/
|
|
50
|
+
fields?: Partial<BillingFields>;
|
|
51
|
+
/**
|
|
52
|
+
* Unit choices.
|
|
53
|
+
*/
|
|
54
|
+
units?: Array<{
|
|
55
|
+
value: unknown;
|
|
56
|
+
label: string;
|
|
57
|
+
}> | Record<string, string>;
|
|
58
|
+
/**
|
|
59
|
+
* Currency choices.
|
|
60
|
+
*/
|
|
61
|
+
currencies?: Array<{
|
|
62
|
+
value: unknown;
|
|
63
|
+
label: string;
|
|
64
|
+
}> | Record<string, string>;
|
|
65
|
+
/**
|
|
66
|
+
* Fallback currency.
|
|
67
|
+
*/
|
|
68
|
+
currency?: string;
|
|
69
|
+
/**
|
|
70
|
+
* Number/currency locale.
|
|
71
|
+
*/
|
|
72
|
+
locale?: string;
|
|
73
|
+
/**
|
|
74
|
+
* Currency fraction digits.
|
|
75
|
+
*/
|
|
76
|
+
decimals?: number;
|
|
77
|
+
/**
|
|
78
|
+
* Per-canonical-column overrides.
|
|
79
|
+
*/
|
|
80
|
+
columnOverrides?: Record<string, object>;
|
|
81
|
+
/**
|
|
82
|
+
* Optional total calculation; defaults to quantity × unit price.
|
|
83
|
+
*/
|
|
84
|
+
lineTotal?: (row: BillingRow, changes: Record<string, unknown>) => number | null | undefined;
|
|
85
|
+
/**
|
|
86
|
+
* Complete column replacement.
|
|
87
|
+
*/
|
|
88
|
+
columns?: import('../table/table.js').TableColumn[];
|
|
89
|
+
/**
|
|
90
|
+
* Caller edit listener, invoked after total calculation.
|
|
91
|
+
*/
|
|
92
|
+
oneditcommit?: (event: CustomEvent<import('../table/table.js').TableEditCommitDetail>) => void;
|
|
93
|
+
};
|
|
94
|
+
/** @typedef {Record<string, any>} BillingRow */
|
|
95
|
+
/**
|
|
96
|
+
* @typedef {Object} GridOptions
|
|
97
|
+
* Grid inherits its constructor options and runtime API from `Table`; this record owns the Grid
|
|
98
|
+
* name in generated documentation, where the Table API is shown alongside it.
|
|
99
|
+
*/
|
|
100
|
+
/**
|
|
101
|
+
* @typedef {Object} BillingFields
|
|
102
|
+
* @property {string} [id='id'] Row identifier field.
|
|
103
|
+
* @property {string} [parent='parent'] Parent identifier field.
|
|
104
|
+
* @property {string} [item='item'] Line description field.
|
|
105
|
+
* @property {string} [kind='kind'] Line-kind field (`group`/`subtotal` rows are read-only).
|
|
106
|
+
* @property {string} [quantity='quantity'] Quantity field.
|
|
107
|
+
* @property {string} [unit='unit'] Unit field.
|
|
108
|
+
* @property {string} [unitPrice='unitPrice'] Unit-price field.
|
|
109
|
+
* @property {string} [currency='currency'] Currency-code field.
|
|
110
|
+
* @property {string} [total='total'] Line-total field.
|
|
111
|
+
*/
|
|
112
|
+
/**
|
|
113
|
+
* @typedef {Object} BillingItemsOptions
|
|
114
|
+
* @property {BillingRow[]} [data=[]] Billing rows.
|
|
115
|
+
* @property {Partial<BillingFields>} [fields={}] Schema field overrides.
|
|
116
|
+
* @property {Array<{value: unknown, label: string}>|Record<string, string>} [units=[]] Unit choices.
|
|
117
|
+
* @property {Array<{value: unknown, label: string}>|Record<string, string>} [currencies=[]] Currency choices.
|
|
118
|
+
* @property {string} [currency='EUR'] Fallback currency.
|
|
119
|
+
* @property {string} [locale] Number/currency locale.
|
|
120
|
+
* @property {number} [decimals=2] Currency fraction digits.
|
|
121
|
+
* @property {Record<string, object>} [columnOverrides={}] Per-canonical-column overrides.
|
|
122
|
+
* @property {(row: BillingRow, changes: Record<string, unknown>) => number|null|undefined} [lineTotal] Optional total calculation; defaults to quantity × unit price.
|
|
123
|
+
* @property {import('../table/table.js').TableColumn[]} [columns] Complete column replacement.
|
|
124
|
+
* @property {(event: CustomEvent<import('../table/table.js').TableEditCommitDetail>) => void} [oneditcommit] Caller edit listener, invoked after total calculation.
|
|
125
|
+
*/
|
|
126
|
+
/**
|
|
127
|
+
* Public data grid. It deliberately inherits Table's DOM/CSS/API instead of forking the data layer.
|
|
128
|
+
* @extends {Table}
|
|
129
|
+
*/
|
|
130
|
+
export declare class Grid extends Table {
|
|
131
|
+
static cssName: string;
|
|
132
|
+
/**
|
|
133
|
+
* Creates a generic data grid with the complete inherited Table contract.
|
|
134
|
+
* @param {Element|string|null} target Grid target.
|
|
135
|
+
* @param {GridOptions & import('../table/table.js').TableOptions} [options={}] Grid/Table options.
|
|
136
|
+
*/
|
|
137
|
+
constructor(target?: Element | string | null, options?: GridOptions & import('../table/table.js').TableOptions);
|
|
138
|
+
/**
|
|
139
|
+
* Creates an editable hierarchical billing-line grid.
|
|
140
|
+
* @param {Element|string|null} target Grid target.
|
|
141
|
+
* @param {BillingItemsOptions & import('../table/table.js').TableOptions} [options={}] Preset and Table overrides.
|
|
142
|
+
* @returns {Grid}
|
|
143
|
+
*/
|
|
144
|
+
static BillingItems(target: Element | string | null, options?: BillingItemsOptions & import('../table/table.js').TableOptions): Grid;
|
|
145
|
+
}
|
|
146
|
+
/**
|
|
147
|
+
* Builds the Table-compatible options behind `Grid.BillingItems()` without touching the DOM.
|
|
148
|
+
* @param {BillingItemsOptions & import('../table/table.js').TableOptions} [options={}] Preset and Table overrides.
|
|
149
|
+
* @returns {import('../table/table.js').TableOptions}
|
|
150
|
+
*/
|
|
151
|
+
export declare function billingItemsConfig(options?: BillingItemsOptions & import('../table/table.js').TableOptions): import('../table/table.js').TableOptions;
|
|
152
|
+
/**
|
|
153
|
+
* Returns whether a billing row is an editable line rather than a group/subtotal.
|
|
154
|
+
* @param {BillingRow} row Row.
|
|
155
|
+
* @param {BillingFields} [fields=DEFAULT_FIELDS] Field map.
|
|
156
|
+
* @returns {boolean}
|
|
157
|
+
*/
|
|
158
|
+
export declare function isBillingLine(row: BillingRow, fields?: BillingFields): boolean;
|
|
159
|
+
/**
|
|
160
|
+
* Produces the preset columns without mutating overrides.
|
|
161
|
+
* @param {BillingFields} fields Field map.
|
|
162
|
+
* @param {{units: unknown, currencies: unknown, currency: string, locale?: string, decimals: number, columnOverrides: Record<string, object>}} options Formatting/editor options.
|
|
163
|
+
* @returns {import('../table/table.js').TableColumn[]}
|
|
164
|
+
*/
|
|
165
|
+
export declare function billingColumns(fields: BillingFields, { units, currencies, currency, locale, decimals, columnOverrides }: {
|
|
166
|
+
units: unknown;
|
|
167
|
+
currencies: unknown;
|
|
168
|
+
currency: string;
|
|
169
|
+
locale?: string;
|
|
170
|
+
decimals: number;
|
|
171
|
+
columnOverrides: Record<string, object>;
|
|
172
|
+
}): import('../table/table.js').TableColumn[];
|
|
@@ -0,0 +1,300 @@
|
|
|
1
|
+
import { Component } from '../../core/component.js';
|
|
2
|
+
export type LauncherItem = {
|
|
3
|
+
/**
|
|
4
|
+
* Stable item identifier.
|
|
5
|
+
*/
|
|
6
|
+
id: string | number;
|
|
7
|
+
/**
|
|
8
|
+
* Visible label.
|
|
9
|
+
*/
|
|
10
|
+
label: string;
|
|
11
|
+
/**
|
|
12
|
+
* Secondary text.
|
|
13
|
+
*/
|
|
14
|
+
description?: string;
|
|
15
|
+
/**
|
|
16
|
+
* Additional search text.
|
|
17
|
+
*/
|
|
18
|
+
keywords?: string | string[];
|
|
19
|
+
/**
|
|
20
|
+
* Result group.
|
|
21
|
+
*/
|
|
22
|
+
group?: string;
|
|
23
|
+
/**
|
|
24
|
+
* Kernel icon name.
|
|
25
|
+
*/
|
|
26
|
+
icon?: string;
|
|
27
|
+
/**
|
|
28
|
+
* Compact metadata.
|
|
29
|
+
*/
|
|
30
|
+
badge?: string | number;
|
|
31
|
+
/**
|
|
32
|
+
* Emitted value; defaults to `id`.
|
|
33
|
+
*/
|
|
34
|
+
value?: unknown;
|
|
35
|
+
/**
|
|
36
|
+
* Native link target.
|
|
37
|
+
*/
|
|
38
|
+
href?: string;
|
|
39
|
+
/**
|
|
40
|
+
* Native link browsing context.
|
|
41
|
+
*/
|
|
42
|
+
target?: string;
|
|
43
|
+
/**
|
|
44
|
+
* Application-owned callback for non-link actions.
|
|
45
|
+
*/
|
|
46
|
+
invoke?: () => void;
|
|
47
|
+
/**
|
|
48
|
+
* Pinned state or explicit pinned order.
|
|
49
|
+
*/
|
|
50
|
+
pinned?: boolean | number;
|
|
51
|
+
/**
|
|
52
|
+
* Whether activation is unavailable.
|
|
53
|
+
*/
|
|
54
|
+
disabled?: boolean;
|
|
55
|
+
};
|
|
56
|
+
export type LauncherSource = {
|
|
57
|
+
/**
|
|
58
|
+
* Source identifier.
|
|
59
|
+
*/
|
|
60
|
+
id: string;
|
|
61
|
+
/**
|
|
62
|
+
* Default group label.
|
|
63
|
+
*/
|
|
64
|
+
label?: string;
|
|
65
|
+
/**
|
|
66
|
+
* Per-source minimum query length.
|
|
67
|
+
*/
|
|
68
|
+
minQuery?: number;
|
|
69
|
+
/**
|
|
70
|
+
* Loader.
|
|
71
|
+
*/
|
|
72
|
+
load: (query: string, context: {
|
|
73
|
+
signal: AbortSignal;
|
|
74
|
+
}) => Promise<LauncherItem[]> | LauncherItem[];
|
|
75
|
+
};
|
|
76
|
+
export type LauncherOptions = {
|
|
77
|
+
/**
|
|
78
|
+
* Local application/action catalogue.
|
|
79
|
+
*/
|
|
80
|
+
items?: LauncherItem[];
|
|
81
|
+
/**
|
|
82
|
+
* Abortable asynchronous result sources.
|
|
83
|
+
*/
|
|
84
|
+
sources?: LauncherSource[];
|
|
85
|
+
/**
|
|
86
|
+
* Initial query.
|
|
87
|
+
*/
|
|
88
|
+
query?: string;
|
|
89
|
+
/**
|
|
90
|
+
* Source-query delay in milliseconds.
|
|
91
|
+
*/
|
|
92
|
+
debounce?: number;
|
|
93
|
+
/**
|
|
94
|
+
* Global source minimum query length.
|
|
95
|
+
*/
|
|
96
|
+
minQuery?: number;
|
|
97
|
+
/**
|
|
98
|
+
* Maximum combined results.
|
|
99
|
+
*/
|
|
100
|
+
maxResults?: number;
|
|
101
|
+
/**
|
|
102
|
+
* Search-field placeholder.
|
|
103
|
+
*/
|
|
104
|
+
placeholder?: string;
|
|
105
|
+
/**
|
|
106
|
+
* Dialog and field label.
|
|
107
|
+
*/
|
|
108
|
+
label?: string;
|
|
109
|
+
/**
|
|
110
|
+
* Empty-state text.
|
|
111
|
+
*/
|
|
112
|
+
emptyText?: string;
|
|
113
|
+
/**
|
|
114
|
+
* Loading-state text.
|
|
115
|
+
*/
|
|
116
|
+
loadingText?: string;
|
|
117
|
+
/**
|
|
118
|
+
* Optional global keyboard shortcut.
|
|
119
|
+
*/
|
|
120
|
+
shortcut?: 'mod+k' | false;
|
|
121
|
+
/**
|
|
122
|
+
* Preventable selection listener.
|
|
123
|
+
*/
|
|
124
|
+
onselect?: (event: CustomEvent<LauncherSelectDetail>) => void;
|
|
125
|
+
/**
|
|
126
|
+
* Query-change listener.
|
|
127
|
+
*/
|
|
128
|
+
onquery?: (event: CustomEvent<{
|
|
129
|
+
query: string;
|
|
130
|
+
}>) => void;
|
|
131
|
+
/**
|
|
132
|
+
* Open listener.
|
|
133
|
+
*/
|
|
134
|
+
onopen?: (event: CustomEvent<Record<string, never>>) => void;
|
|
135
|
+
/**
|
|
136
|
+
* Close listener.
|
|
137
|
+
*/
|
|
138
|
+
onclose?: (event: CustomEvent<Record<string, never>>) => void;
|
|
139
|
+
/**
|
|
140
|
+
* Source error listener.
|
|
141
|
+
*/
|
|
142
|
+
onerror?: (event: CustomEvent<{
|
|
143
|
+
source: LauncherSource;
|
|
144
|
+
error: unknown;
|
|
145
|
+
}>) => void;
|
|
146
|
+
};
|
|
147
|
+
export type LauncherSelectDetail = {
|
|
148
|
+
item: LauncherItem;
|
|
149
|
+
value: unknown;
|
|
150
|
+
source: string | null;
|
|
151
|
+
query: string;
|
|
152
|
+
};
|
|
153
|
+
export type RankedLauncherItem = LauncherItem & {
|
|
154
|
+
_source?: string | null;
|
|
155
|
+
_score?: number;
|
|
156
|
+
};
|
|
157
|
+
/**
|
|
158
|
+
* @typedef {Object} LauncherItem
|
|
159
|
+
* @property {string|number} id Stable item identifier.
|
|
160
|
+
* @property {string} label Visible label.
|
|
161
|
+
* @property {string} [description] Secondary text.
|
|
162
|
+
* @property {string|string[]} [keywords] Additional search text.
|
|
163
|
+
* @property {string} [group] Result group.
|
|
164
|
+
* @property {string} [icon] Kernel icon name.
|
|
165
|
+
* @property {string|number} [badge] Compact metadata.
|
|
166
|
+
* @property {unknown} [value] Emitted value; defaults to `id`.
|
|
167
|
+
* @property {string} [href] Native link target.
|
|
168
|
+
* @property {string} [target] Native link browsing context.
|
|
169
|
+
* @property {() => void} [invoke] Application-owned callback for non-link actions.
|
|
170
|
+
* @property {boolean|number} [pinned] Pinned state or explicit pinned order.
|
|
171
|
+
* @property {boolean} [disabled] Whether activation is unavailable.
|
|
172
|
+
*/
|
|
173
|
+
/**
|
|
174
|
+
* @typedef {Object} LauncherSource
|
|
175
|
+
* @property {string} id Source identifier.
|
|
176
|
+
* @property {string} [label] Default group label.
|
|
177
|
+
* @property {number} [minQuery] Per-source minimum query length.
|
|
178
|
+
* @property {(query: string, context: {signal: AbortSignal}) => Promise<LauncherItem[]>|LauncherItem[]} load Loader.
|
|
179
|
+
*/
|
|
180
|
+
/**
|
|
181
|
+
* @typedef {Object} LauncherOptions
|
|
182
|
+
* @property {LauncherItem[]} [items=[]] Local application/action catalogue.
|
|
183
|
+
* @property {LauncherSource[]} [sources=[]] Abortable asynchronous result sources.
|
|
184
|
+
* @property {string} [query=''] Initial query.
|
|
185
|
+
* @property {number} [debounce=250] Source-query delay in milliseconds.
|
|
186
|
+
* @property {number} [minQuery=0] Global source minimum query length.
|
|
187
|
+
* @property {number} [maxResults=100] Maximum combined results.
|
|
188
|
+
* @property {string} [placeholder='Search applications and records'] Search-field placeholder.
|
|
189
|
+
* @property {string} [label='Launcher'] Dialog and field label.
|
|
190
|
+
* @property {string} [emptyText='No results'] Empty-state text.
|
|
191
|
+
* @property {string} [loadingText='Searching…'] Loading-state text.
|
|
192
|
+
* @property {'mod+k'|false} [shortcut='mod+k'] Optional global keyboard shortcut.
|
|
193
|
+
* @property {(event: CustomEvent<LauncherSelectDetail>) => void} [onselect] Preventable selection listener.
|
|
194
|
+
* @property {(event: CustomEvent<{query: string}>) => void} [onquery] Query-change listener.
|
|
195
|
+
* @property {(event: CustomEvent<Record<string, never>>) => void} [onopen] Open listener.
|
|
196
|
+
* @property {(event: CustomEvent<Record<string, never>>) => void} [onclose] Close listener.
|
|
197
|
+
* @property {(event: CustomEvent<{source: LauncherSource, error: unknown}>) => void} [onerror] Source error listener.
|
|
198
|
+
*/
|
|
199
|
+
/** @typedef {{item: LauncherItem, value: unknown, source: string|null, query: string}} LauncherSelectDetail */
|
|
200
|
+
/** @typedef {LauncherItem & {_source?: string|null, _score?: number}} RankedLauncherItem */
|
|
201
|
+
/**
|
|
202
|
+
* Abortable command/search dialog that emits application-owned actions without routing itself.
|
|
203
|
+
* @fires Launcher#select
|
|
204
|
+
* @fires Launcher#query
|
|
205
|
+
* @fires Launcher#open
|
|
206
|
+
* @fires Launcher#close
|
|
207
|
+
* @fires Launcher#error
|
|
208
|
+
* @extends {Component<LauncherOptions>}
|
|
209
|
+
*/
|
|
210
|
+
export declare class Launcher extends Component<LauncherOptions> {
|
|
211
|
+
_createdRoot: boolean;
|
|
212
|
+
_original: {
|
|
213
|
+
attributes: string[][];
|
|
214
|
+
children: ChildNode[];
|
|
215
|
+
};
|
|
216
|
+
_items: LauncherItem[];
|
|
217
|
+
_sources: LauncherSource[];
|
|
218
|
+
_sourceItems: Map<any, any>;
|
|
219
|
+
_query: string;
|
|
220
|
+
_results: any[];
|
|
221
|
+
_active: number;
|
|
222
|
+
_request: AbortController;
|
|
223
|
+
_requestSequence: number;
|
|
224
|
+
_queryTimer: number;
|
|
225
|
+
_busy: boolean;
|
|
226
|
+
_destroyed: boolean;
|
|
227
|
+
static cssName: string;
|
|
228
|
+
/** @type {Readonly<LauncherOptions>} */
|
|
229
|
+
static defaults: Readonly<LauncherOptions>;
|
|
230
|
+
/**
|
|
231
|
+
* Creates an owned launcher dialog or enhances an existing `<dialog>` target.
|
|
232
|
+
* @param {HTMLDialogElement|string|null} [target=null] Dialog target, selector, or null.
|
|
233
|
+
* @param {LauncherOptions} [options={}] Launcher options.
|
|
234
|
+
*/
|
|
235
|
+
constructor(target?: HTMLDialogElement | string | null, options?: LauncherOptions);
|
|
236
|
+
/** @returns {HTMLDialogElement} */
|
|
237
|
+
render(): HTMLDialogElement;
|
|
238
|
+
/** Opens the launcher and focuses/selects its query. @returns {this} @fires Launcher#open */
|
|
239
|
+
open(): this;
|
|
240
|
+
/** Closes the launcher. @returns {this} */
|
|
241
|
+
close(): this;
|
|
242
|
+
/** Toggles the launcher. @returns {this} */
|
|
243
|
+
toggle(): this;
|
|
244
|
+
/** Reports whether the launcher is open. @returns {boolean} */
|
|
245
|
+
isOpen(): boolean;
|
|
246
|
+
/** Focuses and selects the query field. @returns {this} */
|
|
247
|
+
focus(): this;
|
|
248
|
+
/** Replaces the query and refreshes local and remote results. @param {string} query @returns {this} */
|
|
249
|
+
setQuery(query: string): this;
|
|
250
|
+
/** Returns the untrimmed query. @returns {string} */
|
|
251
|
+
getQuery(): string;
|
|
252
|
+
/** Replaces local catalogue items. @param {LauncherItem[]} items @returns {this} */
|
|
253
|
+
setItems(items: LauncherItem[]): this;
|
|
254
|
+
/** Replaces asynchronous sources and aborts work from the old set. @param {LauncherSource[]} sources @returns {this} */
|
|
255
|
+
setSources(sources: LauncherSource[]): this;
|
|
256
|
+
/** Aborts sources and removes the owned dialog. @returns {void} */
|
|
257
|
+
destroy(): void;
|
|
258
|
+
/** @returns {void} */
|
|
259
|
+
_refresh(): void;
|
|
260
|
+
/** @returns {Promise<void>} */
|
|
261
|
+
_loadSources(): Promise<void>;
|
|
262
|
+
/** @param {boolean} busy @returns {void} */
|
|
263
|
+
_setBusy(busy: boolean): void;
|
|
264
|
+
/** @returns {void} */
|
|
265
|
+
_abortRequest(): void;
|
|
266
|
+
/** @returns {void} */
|
|
267
|
+
_renderResults(): void;
|
|
268
|
+
/** @param {RankedLauncherItem} item @param {number} index @returns {HTMLElement} */
|
|
269
|
+
_option(item: RankedLauncherItem, index: number): HTMLElement;
|
|
270
|
+
/** @returns {void} */
|
|
271
|
+
_renderStatus(): void;
|
|
272
|
+
/** @returns {void} */
|
|
273
|
+
_syncActive(): void;
|
|
274
|
+
/** @param {KeyboardEvent} event @returns {void} */
|
|
275
|
+
_onKeydown(event: KeyboardEvent): void;
|
|
276
|
+
/** @param {number} index @param {Event} event @returns {void} */
|
|
277
|
+
_activate(index: number, event: Event): void;
|
|
278
|
+
/** @param {KeyboardEvent} event @returns {void} */
|
|
279
|
+
_onDocumentKeydown(event: KeyboardEvent): void;
|
|
280
|
+
}
|
|
281
|
+
/**
|
|
282
|
+
* Ranks launcher items using the current ZeyOS application tiers.
|
|
283
|
+
* @param {RankedLauncherItem[]} items Items to rank.
|
|
284
|
+
* @param {string} query Query.
|
|
285
|
+
* @param {number} [limit=100] Maximum returned items.
|
|
286
|
+
* @returns {RankedLauncherItem[]}
|
|
287
|
+
*/
|
|
288
|
+
export declare function rankLauncherItems(items: RankedLauncherItem[], query: string, limit?: number): RankedLauncherItem[];
|
|
289
|
+
/**
|
|
290
|
+
* Flattens loaded source results in configured source order rather than response-completion order.
|
|
291
|
+
* @param {LauncherSource[]} sources Configured sources.
|
|
292
|
+
* @param {Map<string, RankedLauncherItem[]>} sourceItems Loaded result map.
|
|
293
|
+
* @returns {RankedLauncherItem[]}
|
|
294
|
+
*/
|
|
295
|
+
export declare function orderedLauncherSourceItems(sources: LauncherSource[], sourceItems: Map<string, RankedLauncherItem[]>): RankedLauncherItem[];
|
|
296
|
+
/** Fired when a result is activated. @event Launcher#select @type {CustomEvent<LauncherSelectDetail>} */
|
|
297
|
+
/** Fired when the query changes. @event Launcher#query @type {CustomEvent<{query: string}>} */
|
|
298
|
+
/** Fired after the dialog opens. @event Launcher#open @type {CustomEvent<Record<string, never>>} */
|
|
299
|
+
/** Fired after the dialog closes. @event Launcher#close @type {CustomEvent<Record<string, never>>} */
|
|
300
|
+
/** Fired when one asynchronous source fails. @event Launcher#error @type {CustomEvent<{source: LauncherSource, error: unknown}>} */
|
|
@@ -29,7 +29,7 @@ export type StackOptions = {
|
|
|
29
29
|
*/
|
|
30
30
|
class?: string;
|
|
31
31
|
};
|
|
32
|
-
export type
|
|
32
|
+
export type LayoutGridOptions = {
|
|
33
33
|
/**
|
|
34
34
|
* Column count at full width. Null fills the row with as
|
|
35
35
|
* many tracks of `min` width as fit.
|
|
@@ -80,7 +80,7 @@ export type DomChild = import('../../core/dom.js').DomChild;
|
|
|
80
80
|
* @property {string} [class=''] Extra class names.
|
|
81
81
|
*/
|
|
82
82
|
/**
|
|
83
|
-
* @typedef {Object}
|
|
83
|
+
* @typedef {Object} LayoutGridOptions
|
|
84
84
|
* @property {number|null} [columns=null] Column count at full width. Null fills the row with as
|
|
85
85
|
* many tracks of `min` width as fit.
|
|
86
86
|
* @property {number|string} [min='16rem'] Narrowest a track may get before the grid drops a
|
|
@@ -117,11 +117,11 @@ export declare function stack(options?: StackOptions, ...children: DomChild[]):
|
|
|
117
117
|
* in a full-width page, a split pane, and a modal. Nothing here consults the viewport, which is
|
|
118
118
|
* the usual reason a "responsive" grid still breaks inside a narrow panel.
|
|
119
119
|
*
|
|
120
|
-
* @param {
|
|
120
|
+
* @param {LayoutGridOptions} [options={}] Grid options.
|
|
121
121
|
* @param {...DomChild} children Cells.
|
|
122
122
|
* @returns {HTMLDivElement}
|
|
123
123
|
*/
|
|
124
|
-
export declare function grid(options?:
|
|
124
|
+
export declare function grid(options?: LayoutGridOptions, ...children: DomChild[]): HTMLDivElement;
|
|
125
125
|
/**
|
|
126
126
|
* Creates a box that holds a fixed aspect ratio whatever its width, so an image, a map, or a
|
|
127
127
|
* chart placeholder reserves its space before it loads.
|
|
@@ -46,7 +46,7 @@ export type MenuButtonOptions = {
|
|
|
46
46
|
/**
|
|
47
47
|
* Menu placement.
|
|
48
48
|
*/
|
|
49
|
-
placement?: 'bottom-start' | 'bottom-end' | 'top-start' | 'top-end' | 'bottom' | 'top';
|
|
49
|
+
placement?: 'bottom-start' | 'bottom-end' | 'top-start' | 'top-end' | 'bottom' | 'top' | 'right-start' | 'right-end' | 'left-start' | 'left-end' | 'right' | 'left';
|
|
50
50
|
/**
|
|
51
51
|
* Select event listener.
|
|
52
52
|
*/
|
|
@@ -79,7 +79,7 @@ export type MenuButtonOptions = {
|
|
|
79
79
|
* @property {string|null} [icon=null] Trigger icon name.
|
|
80
80
|
* @property {'default'|'primary'|'danger'|'ghost'} [kind='default'] Trigger button kind.
|
|
81
81
|
* @property {MenuButtonItem[]} [items=[]] Menu items and separators.
|
|
82
|
-
* @property {'bottom-start'|'bottom-end'|'top-start'|'top-end'|'bottom'|'top'} [placement='bottom-start'] Menu placement.
|
|
82
|
+
* @property {'bottom-start'|'bottom-end'|'top-start'|'top-end'|'bottom'|'top'|'right-start'|'right-end'|'left-start'|'left-end'|'right'|'left'} [placement='bottom-start'] Menu placement.
|
|
83
83
|
* @property {(event: CustomEvent<{value: unknown, item: MenuItem}>) => void} [onselect] Select event listener.
|
|
84
84
|
* @property {(event: CustomEvent<Record<string, never>>) => void} [onopen] Open event listener.
|
|
85
85
|
* @property {(event: CustomEvent<Record<string, never>>) => void} [onclose] Close event listener.
|
|
@@ -128,6 +128,14 @@ export declare class MenuButton extends Component<MenuButtonOptions> {
|
|
|
128
128
|
* @returns {boolean}
|
|
129
129
|
*/
|
|
130
130
|
isOpen(): boolean;
|
|
131
|
+
/** Returns the trigger button. @returns {HTMLElement} */
|
|
132
|
+
getTrigger(): HTMLElement;
|
|
133
|
+
/** Returns the owned menu panel. @returns {HTMLElement} */
|
|
134
|
+
getPanel(): HTMLElement;
|
|
135
|
+
/** Opens the menu and focuses its first enabled item. @returns {this} */
|
|
136
|
+
focusFirst(): this;
|
|
137
|
+
/** Opens the menu and focuses its last enabled item. @returns {this} */
|
|
138
|
+
focusLast(): this;
|
|
131
139
|
/**
|
|
132
140
|
* Sets the visible trigger label.
|
|
133
141
|
* @param {string} label Trigger label.
|
|
@@ -67,6 +67,31 @@ export declare class Modal extends Component<ModalOptions> {
|
|
|
67
67
|
* @param {ModalOptions} [options={}] Modal options.
|
|
68
68
|
*/
|
|
69
69
|
constructor(_target?: Element | string | null, options?: ModalOptions);
|
|
70
|
+
/**
|
|
71
|
+
* Element the owned dialog is appended to. Overridden by subclasses that live inside a host
|
|
72
|
+
* rather than at the document level.
|
|
73
|
+
*
|
|
74
|
+
* Called from `render()`, which the base constructor runs before any subclass field
|
|
75
|
+
* initializers, so an override may read `this.options` but must not touch instance state.
|
|
76
|
+
* @returns {Element}
|
|
77
|
+
*/
|
|
78
|
+
mountTarget(): Element;
|
|
79
|
+
/**
|
|
80
|
+
* Puts the dialog on screen. Overridden by subclasses that open non-modally.
|
|
81
|
+
* @returns {void}
|
|
82
|
+
*/
|
|
83
|
+
_show(): void;
|
|
84
|
+
/**
|
|
85
|
+
* Whether an incoming `close` event is a real dismissal.
|
|
86
|
+
*
|
|
87
|
+
* A dialog cannot move between the top layer and the page flow while it is open, so a subclass
|
|
88
|
+
* that re-hosts itself has to close and immediately reopen. `close` is dispatched in a queued
|
|
89
|
+
* task, not synchronously, so that stale event arrives once the dialog is already open again —
|
|
90
|
+
* late enough to clobber `data-state`, fire a `close` nobody asked for, and trip
|
|
91
|
+
* `destroyOnClose`. Returning false from an override drops it at the source instead.
|
|
92
|
+
* @returns {boolean}
|
|
93
|
+
*/
|
|
94
|
+
_isRealClose(): boolean;
|
|
70
95
|
/**
|
|
71
96
|
* Creates the owned native dialog.
|
|
72
97
|
* @returns {HTMLDialogElement}
|
|
@@ -12,21 +12,34 @@ export type MultiValueEditorOptions = {
|
|
|
12
12
|
* Add-row button text.
|
|
13
13
|
*/
|
|
14
14
|
addLabel?: string;
|
|
15
|
+
/**
|
|
16
|
+
* Reordering affordances each row gets:
|
|
17
|
+
* a drag handle, the up/down buttons, both, or neither.
|
|
18
|
+
*/
|
|
19
|
+
reorder?: 'both' | 'buttons' | 'drag' | 'none';
|
|
20
|
+
/**
|
|
21
|
+
* Values change listener.
|
|
22
|
+
*/
|
|
23
|
+
onchange?: (event: CustomEvent<{
|
|
24
|
+
values: string[];
|
|
25
|
+
}>) => void;
|
|
15
26
|
};
|
|
16
|
-
/**
|
|
17
|
-
* @typedef {Object} MultiValueEditorOptions
|
|
18
|
-
* @property {unknown[]} [values=[]] Initial ordered values.
|
|
19
|
-
* @property {unknown[]|Record<string, string>|null} [options=null] Allowed values; null uses text inputs.
|
|
20
|
-
* @property {string} [addLabel='Add value'] Add-row button text.
|
|
21
|
-
*/
|
|
22
27
|
/**
|
|
23
28
|
* Ordered value editor with explicit editable rows and controls.
|
|
29
|
+
*
|
|
30
|
+
* Rows reorder by dragging their handle or by pressing the up/down buttons — `reorder` picks which
|
|
31
|
+
* of the two a row offers. The handle is also a keyboard control (arrows, Home, End), so drag-only
|
|
32
|
+
* mode still reorders without a pointer.
|
|
24
33
|
* @fires MultiValueEditor#change
|
|
25
34
|
* @extends {Component<MultiValueEditorOptions>}
|
|
26
35
|
*/
|
|
27
36
|
export declare class MultiValueEditor extends Component<MultiValueEditorOptions> {
|
|
28
37
|
_values: string[];
|
|
29
38
|
_ownedNodes: any[];
|
|
39
|
+
_initialState: string;
|
|
40
|
+
_dragIndex: number;
|
|
41
|
+
/** @type {HTMLElement|null} Row made draggable by a pointer press on its handle. */
|
|
42
|
+
_armed: HTMLElement | null;
|
|
30
43
|
_rows: HTMLElement;
|
|
31
44
|
_add: HTMLElement;
|
|
32
45
|
static cssName: string;
|
|
@@ -48,12 +61,64 @@ export declare class MultiValueEditor extends Component<MultiValueEditorOptions>
|
|
|
48
61
|
setValues(values: unknown[], { silent }?: {
|
|
49
62
|
silent?: boolean;
|
|
50
63
|
}): this;
|
|
51
|
-
/** @
|
|
52
|
-
|
|
64
|
+
/** @returns {{drag: boolean, buttons: boolean}} */
|
|
65
|
+
_reorder(): {
|
|
66
|
+
drag: boolean;
|
|
67
|
+
buttons: boolean;
|
|
68
|
+
};
|
|
69
|
+
/**
|
|
70
|
+
* @param {number} [focusIndex=-1] Row to focus after the render, or -1 for none.
|
|
71
|
+
* @param {keyof PARTS} [focusPart='value'] Which control of that row takes focus.
|
|
72
|
+
* @returns {void}
|
|
73
|
+
*/
|
|
74
|
+
_renderRows(focusIndex?: number, focusPart?: keyof PARTS): void;
|
|
53
75
|
/** @param {MouseEvent} event @returns {void} */
|
|
54
76
|
_handleClick(event: MouseEvent): void;
|
|
55
77
|
/** @param {Event} event @returns {void} */
|
|
56
78
|
_handleChange(event: Event): void;
|
|
79
|
+
/**
|
|
80
|
+
* The handle is the keyboard equivalent of dragging it, so `reorder: 'drag'` is still operable
|
|
81
|
+
* without a pointer.
|
|
82
|
+
* @param {KeyboardEvent} event
|
|
83
|
+
* @returns {void}
|
|
84
|
+
*/
|
|
85
|
+
_handleKeydown(event: KeyboardEvent): void;
|
|
86
|
+
/**
|
|
87
|
+
* Arms the row for dragging. Only the handle does this, so text selection inside a row's input
|
|
88
|
+
* keeps working and a stray drag cannot reorder anything.
|
|
89
|
+
* @param {PointerEvent} event
|
|
90
|
+
* @returns {void}
|
|
91
|
+
*/
|
|
92
|
+
_handlePointerDown(event: PointerEvent): void;
|
|
93
|
+
/** @returns {void} */
|
|
94
|
+
_disarm(): void;
|
|
95
|
+
/** @param {DragEvent} event @returns {void} */
|
|
96
|
+
_handleDragStart(event: DragEvent): void;
|
|
97
|
+
/** @param {DragEvent} event @returns {void} */
|
|
98
|
+
_handleDragOver(event: DragEvent): void;
|
|
99
|
+
/** @param {DragEvent} event @returns {void} */
|
|
100
|
+
_handleDragLeave(event: DragEvent): void;
|
|
101
|
+
/** @param {DragEvent} event @returns {void} */
|
|
102
|
+
_handleDrop(event: DragEvent): void;
|
|
103
|
+
/** @returns {void} */
|
|
104
|
+
_finishDrag(): void;
|
|
105
|
+
/**
|
|
106
|
+
* Insertion slot (0…length) for a pointer at `clientY`.
|
|
107
|
+
* @param {number} clientY Pointer position.
|
|
108
|
+
* @returns {number}
|
|
109
|
+
*/
|
|
110
|
+
_dropTarget(clientY: number): number;
|
|
111
|
+
/** @param {number} slot Insertion slot to mark. @returns {void} */
|
|
112
|
+
_showDrop(slot: number): void;
|
|
113
|
+
/** @returns {void} */
|
|
114
|
+
_clearDrop(): void;
|
|
115
|
+
/**
|
|
116
|
+
* @param {number} from Index to move.
|
|
117
|
+
* @param {number} to Destination index.
|
|
118
|
+
* @param {keyof PARTS} part Control of the moved row that takes focus.
|
|
119
|
+
* @returns {boolean} Whether anything moved.
|
|
120
|
+
*/
|
|
121
|
+
_move(from: number, to: number, part: keyof PARTS): boolean;
|
|
57
122
|
/** @returns {void} */
|
|
58
123
|
_emitChange(): void;
|
|
59
124
|
/** @returns {void} */
|
|
@@ -62,5 +127,5 @@ export declare class MultiValueEditor extends Component<MultiValueEditorOptions>
|
|
|
62
127
|
/**
|
|
63
128
|
* Ordered values changed event.
|
|
64
129
|
* @event MultiValueEditor#change
|
|
65
|
-
* @type {CustomEvent<{values: string[]}>
|
|
130
|
+
* @type {CustomEvent<{values: string[]}>}
|
|
66
131
|
*/
|