@zeyos/zx 4.1.1 → 4.3.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 +81 -0
- package/DESIGN-SYSTEM.md +33 -3
- package/README.md +22 -5
- package/dist/types/components/app-icon/app-icon.d.ts +8 -1
- package/dist/types/components/aurora/aurora.d.ts +72 -0
- package/dist/types/components/calendar/calendar-model.d.ts +202 -0
- package/dist/types/components/calendar/calendar.d.ts +517 -0
- package/dist/types/components/card-view/card-view.d.ts +303 -0
- package/dist/types/components/card-view/record-card.d.ts +242 -0
- package/dist/types/components/dialog/dialog.d.ts +6 -1
- package/dist/types/components/dropdown/dropdown.d.ts +5 -0
- package/dist/types/components/kanban-view/kanban-view.d.ts +572 -0
- package/dist/types/components/launcher/launcher.d.ts +5 -0
- package/dist/types/components/message/message.d.ts +9 -1
- package/dist/types/components/modal/modal.d.ts +44 -7
- package/dist/types/components/sheet/sheet.d.ts +22 -12
- package/dist/types/components/table/table.d.ts +120 -31
- package/dist/types/components/table-view/table-view.d.ts +192 -0
- package/dist/types/components/view/record-view.d.ts +464 -0
- package/dist/types/core/overlay-host.d.ts +12 -0
- package/dist/types/index.d.ts +7 -0
- package/dist/types/zeyos/calendar.d.ts +91 -0
- package/dist/types/zeyos/icons.d.ts +18 -2
- package/dist/types/zeyos/index.d.ts +4 -0
- package/dist/types/zeyos/legacy-saved-views.d.ts +66 -0
- package/dist/types/zeyos/saved-views.d.ts +331 -0
- package/dist/types/zeyos/view.d.ts +305 -0
- package/dist/zx-zeyos.esm.js +4742 -1470
- package/dist/zx-zeyos.esm.min.js +1 -1
- package/dist/zx.css +2536 -471
- package/dist/zx.esm.js +5193 -223
- package/dist/zx.esm.min.js +3 -3
- package/dist/zx.global.js +5193 -223
- package/dist/zx.global.min.js +3 -3
- package/dist/zx.min.css +1 -1
- package/docs/api.json +1729 -182
- package/docs/llms.md +236 -32
- package/docs/llms.txt +16 -6
- package/package.json +1 -1
- package/src/components/account-menu/account-menu.css +1 -1
- package/src/components/app-icon/app-icon.css +77 -51
- package/src/components/app-icon/app-icon.js +28 -4
- package/src/components/app-rail/app-rail.css +12 -3
- package/src/components/app-sidebar/app-sidebar.css +11 -2
- package/src/components/aurora/aurora.css +143 -0
- package/src/components/aurora/aurora.js +146 -0
- package/src/components/avatar/avatar.css +1 -1
- package/src/components/button/button.css +2 -2
- package/src/components/calendar/calendar-model.js +402 -0
- package/src/components/calendar/calendar.css +609 -0
- package/src/components/calendar/calendar.js +1619 -0
- package/src/components/card/card.css +2 -2
- package/src/components/card-view/card-view.css +389 -0
- package/src/components/card-view/card-view.js +527 -0
- package/src/components/card-view/record-card.js +392 -0
- package/src/components/context-menu/context-menu.css +4 -4
- package/src/components/context-menu/context-menu.js +5 -1
- package/src/components/date-picker/date-picker.css +31 -12
- package/src/components/datebox/date-range-box.css +17 -2
- package/src/components/datebox/datebox.css +18 -3
- package/src/components/dialog/dialog.css +4 -3
- package/src/components/dialog/dialog.js +2 -1
- package/src/components/dropdown/dropdown.css +17 -3
- package/src/components/dropdown/dropdown.js +7 -2
- package/src/components/kanban-view/kanban-view.css +216 -0
- package/src/components/kanban-view/kanban-view.js +1228 -0
- package/src/components/launcher/launcher.css +24 -9
- package/src/components/launcher/launcher.js +9 -2
- package/src/components/master-panel/master-panel.css +14 -3
- package/src/components/menu-button/menu-button.css +4 -4
- package/src/components/message/message.css +13 -21
- package/src/components/message/message.js +17 -11
- package/src/components/modal/modal.css +19 -5
- package/src/components/modal/modal.js +99 -25
- package/src/components/navigation-bar/navigation-bar.css +17 -5
- package/src/components/panel/panel.css +10 -2
- package/src/components/select/select.css +26 -8
- package/src/components/sheet/sheet.css +28 -7
- package/src/components/sheet/sheet.js +43 -23
- package/src/components/table/table.css +83 -5
- package/src/components/table/table.js +322 -37
- package/src/components/table-view/table-view.css +18 -0
- package/src/components/table-view/table-view.js +347 -0
- package/src/components/tag-picker/tag-picker.css +18 -4
- package/src/components/tooltip/tooltip.css +17 -3
- package/src/components/tooltip/tooltip.js +4 -1
- package/src/components/view/record-view.css +114 -0
- package/src/components/view/record-view.js +770 -0
- package/src/core/overlay-host.js +23 -0
- package/src/index.js +15 -0
- package/src/zeyos/calendar.js +115 -0
- package/src/zeyos/icons.js +11 -4
- package/src/zeyos/index.js +13 -0
- package/src/zeyos/launcher.js +2 -2
- package/src/zeyos/legacy-saved-views.js +155 -0
- package/src/zeyos/saved-views.js +815 -0
- package/src/zeyos/table.js +3 -1
- package/src/zeyos/view.js +543 -0
- package/styles/icons.css +3 -10
- package/styles/tokens/dark.css +4 -0
- package/styles/tokens/semantic.css +142 -3
- package/styles/zx.css +6 -0
|
@@ -22,6 +22,10 @@ export type ModalOptions = {
|
|
|
22
22
|
* Whether to destroy the modal after it closes.
|
|
23
23
|
*/
|
|
24
24
|
destroyOnClose?: boolean;
|
|
25
|
+
/**
|
|
26
|
+
* Element whose nearest Zx theme scope owns the overlay; defaults to the opener.
|
|
27
|
+
*/
|
|
28
|
+
scope?: Element | string | null;
|
|
25
29
|
/**
|
|
26
30
|
* Open event listener.
|
|
27
31
|
*/
|
|
@@ -44,6 +48,7 @@ export type ModalOptions = {
|
|
|
44
48
|
* @property {boolean} [closable=true] Whether Escape may close the modal.
|
|
45
49
|
* @property {boolean} [lightDismiss=false] Whether a backdrop click closes the modal.
|
|
46
50
|
* @property {boolean} [destroyOnClose=false] Whether to destroy the modal after it closes.
|
|
51
|
+
* @property {Element|string|null} [scope=null] Element whose nearest Zx theme scope owns the overlay; defaults to the opener.
|
|
47
52
|
* @property {(event: CustomEvent<Record<string, never>>) => void} [onopen] Open event listener.
|
|
48
53
|
* @property {(event: CustomEvent<{result: unknown}>) => void} [onclose] Close event listener.
|
|
49
54
|
* @property {(event: CustomEvent<Record<string, never>>) => void} [oncancel] Cancel event listener.
|
|
@@ -62,7 +67,7 @@ export declare class Modal extends Component<ModalOptions> {
|
|
|
62
67
|
/** @type {Readonly<ModalOptions>} */
|
|
63
68
|
static defaults: Readonly<ModalOptions>;
|
|
64
69
|
/**
|
|
65
|
-
* Creates a modal
|
|
70
|
+
* Creates a modal in the configured theme scope, or at document level when none is present.
|
|
66
71
|
* @param {Element|string|null} [_target=null] Ignored; Modal always owns its root dialog.
|
|
67
72
|
* @param {ModalOptions} [options={}] Modal options.
|
|
68
73
|
*/
|
|
@@ -81,17 +86,49 @@ export declare class Modal extends Component<ModalOptions> {
|
|
|
81
86
|
* @returns {void}
|
|
82
87
|
*/
|
|
83
88
|
_show(): void;
|
|
89
|
+
/**
|
|
90
|
+
* Removes the dialog from its current presentation layer.
|
|
91
|
+
* Subclasses may replace native dialog presentation while preserving Modal lifecycle events.
|
|
92
|
+
* @param {string} [result=''] Native string return value.
|
|
93
|
+
* @param {number} [presentation=this.#presentation] Presentation generation being hidden.
|
|
94
|
+
* @returns {void}
|
|
95
|
+
*/
|
|
96
|
+
_hide(result?: string, presentation?: number): void;
|
|
97
|
+
/**
|
|
98
|
+
* Shows a new presentation and gives it a generation of its own. Close events are queued by the
|
|
99
|
+
* platform, so the generation lets an event from an earlier presentation expire harmlessly if
|
|
100
|
+
* the same overlay has already reopened.
|
|
101
|
+
* @returns {void}
|
|
102
|
+
*/
|
|
103
|
+
_present(): void;
|
|
104
|
+
/**
|
|
105
|
+
* Hides the current presentation and records which generation its queued close event belongs to.
|
|
106
|
+
* @param {string} [result=''] Native string return value.
|
|
107
|
+
* @returns {void}
|
|
108
|
+
*/
|
|
109
|
+
_dismiss(result?: string): void;
|
|
110
|
+
/**
|
|
111
|
+
* Reports whether the current presentation layer is visible.
|
|
112
|
+
* @returns {boolean}
|
|
113
|
+
*/
|
|
114
|
+
_isShown(): boolean;
|
|
84
115
|
/**
|
|
85
116
|
* Whether an incoming `close` event is a real dismissal.
|
|
86
117
|
*
|
|
87
|
-
*
|
|
88
|
-
*
|
|
89
|
-
*
|
|
90
|
-
*
|
|
91
|
-
* `destroyOnClose`. Returning false from an override drops it at the source instead.
|
|
118
|
+
* `close` is dispatched in a queued task, not synchronously. By the time it arrives the overlay
|
|
119
|
+
* may have reopened or crossed presentation layers, so only the event for the current hidden
|
|
120
|
+
* generation may settle state, emit lifecycle events, or trigger `destroyOnClose`.
|
|
121
|
+
* @param {number|undefined} closingPresentation Presentation that produced the event, if known.
|
|
92
122
|
* @returns {boolean}
|
|
93
123
|
*/
|
|
94
|
-
_isRealClose(): boolean;
|
|
124
|
+
_isRealClose(closingPresentation: number | undefined): boolean;
|
|
125
|
+
/**
|
|
126
|
+
* Settles one presentation's close without allowing a queued event to invalidate a newer one.
|
|
127
|
+
* Popover-based subclasses call this directly; native dialog events arrive through the listener.
|
|
128
|
+
* @param {number|undefined} closingPresentation Presentation that was hidden, if known.
|
|
129
|
+
* @returns {boolean} Whether this event closed the current presentation.
|
|
130
|
+
*/
|
|
131
|
+
_settleClose(closingPresentation: number | undefined): boolean;
|
|
95
132
|
/**
|
|
96
133
|
* Creates the owned native dialog.
|
|
97
134
|
* @returns {HTMLDialogElement}
|
|
@@ -80,6 +80,10 @@ export type SheetOptions = {
|
|
|
80
80
|
* Whether to destroy the sheet after it closes.
|
|
81
81
|
*/
|
|
82
82
|
destroyOnClose?: boolean;
|
|
83
|
+
/**
|
|
84
|
+
* Element whose nearest Zx theme scope owns a floating sheet; defaults to the opener.
|
|
85
|
+
*/
|
|
86
|
+
scope?: Element | string | null;
|
|
83
87
|
/**
|
|
84
88
|
* Open event listener.
|
|
85
89
|
*/
|
|
@@ -138,6 +142,7 @@ export type SheetOptions = {
|
|
|
138
142
|
* @property {boolean} [lightDismiss=true] Whether a click outside closes the sheet — the backdrop
|
|
139
143
|
* when modal, a document-level pointer press when not.
|
|
140
144
|
* @property {boolean} [destroyOnClose=false] Whether to destroy the sheet after it closes.
|
|
145
|
+
* @property {Element|string|null} [scope=null] Element whose nearest Zx theme scope owns a floating sheet; defaults to the opener.
|
|
141
146
|
* @property {(event: CustomEvent<Record<string, never>>) => void} [onopen] Open event listener.
|
|
142
147
|
* @property {(event: CustomEvent<{result: unknown}>) => void} [onclose] Close event listener.
|
|
143
148
|
* @property {(event: CustomEvent<Record<string, never>>) => void} [oncancel] Cancel event listener.
|
|
@@ -153,9 +158,11 @@ export type SheetOptions = {
|
|
|
153
158
|
*
|
|
154
159
|
* Modality is a three-way choice rather than a boolean because the three real behaviours do not
|
|
155
160
|
* collapse into two: a modal sheet delegates focus containment, page inertness, and Escape to the
|
|
156
|
-
* browser via `showModal()`;
|
|
157
|
-
*
|
|
158
|
-
*
|
|
161
|
+
* browser via `showModal()`; floating non-modal sheets use the manual Popover top layer so a
|
|
162
|
+
* transformed or clipped application scope cannot displace them, and re-implement only what they
|
|
163
|
+
* still want. Docked sheets remain native non-modal dialogs in flow. That is also why `backdrop`
|
|
164
|
+
* applies only to `modal: true`: painting one for either non-modal mode would make the sheet look
|
|
165
|
+
* blocking while it is not.
|
|
159
166
|
* @fires Sheet#open
|
|
160
167
|
* @fires Sheet#close
|
|
161
168
|
* @fires Sheet#cancel
|
|
@@ -165,7 +172,6 @@ export type SheetOptions = {
|
|
|
165
172
|
export declare class Sheet extends Dialog {
|
|
166
173
|
#private;
|
|
167
174
|
_dock: any;
|
|
168
|
-
_handoff: boolean;
|
|
169
175
|
static cssName: string;
|
|
170
176
|
/** @type {Readonly<SheetOptions>} */
|
|
171
177
|
static defaults: Readonly<SheetOptions>;
|
|
@@ -217,17 +223,12 @@ export declare class Sheet extends Dialog {
|
|
|
217
223
|
/**
|
|
218
224
|
* Moves the dialog to its current mount and, when it was open, reopens it there.
|
|
219
225
|
*
|
|
220
|
-
* The close is unavoidable — a dialog cannot cross between
|
|
221
|
-
*
|
|
222
|
-
* `open()` so no lifecycle event is emitted for what is only a change of address.
|
|
226
|
+
* The close is unavoidable — a dialog cannot cross between presentation layers while open —
|
|
227
|
+
* but it is invisible: Modal's presentation generation drops the stale event, and reopening
|
|
228
|
+
* bypasses `open()` so no lifecycle event is emitted for what is only a change of address.
|
|
223
229
|
* @returns {void}
|
|
224
230
|
*/
|
|
225
231
|
_rehost(): void;
|
|
226
|
-
/**
|
|
227
|
-
* Drops the stale `close` a re-hosting handoff leaves behind.
|
|
228
|
-
* @returns {boolean}
|
|
229
|
-
*/
|
|
230
|
-
_isRealClose(): boolean;
|
|
231
232
|
/**
|
|
232
233
|
* Opens the sheet, trapping focus first where the modality asks for it.
|
|
233
234
|
* @returns {this}
|
|
@@ -276,6 +277,15 @@ export declare class Sheet extends Dialog {
|
|
|
276
277
|
* @returns {void}
|
|
277
278
|
*/
|
|
278
279
|
_show(): void;
|
|
280
|
+
/**
|
|
281
|
+
* Hides a native dialog or a non-modal Sheet promoted through the popover top layer.
|
|
282
|
+
* @param {string} [result=''] Native string return value.
|
|
283
|
+
* @param {number} [presentation] Presentation generation being hidden.
|
|
284
|
+
* @returns {void}
|
|
285
|
+
*/
|
|
286
|
+
_hide(result?: string, presentation?: number): void;
|
|
287
|
+
/** @returns {boolean} */
|
|
288
|
+
_isShown(): boolean;
|
|
279
289
|
/**
|
|
280
290
|
* Releases the focus trap and the owned dialog.
|
|
281
291
|
* @returns {void}
|
|
@@ -229,6 +229,11 @@ export type TableOptions = {
|
|
|
229
229
|
* Whether a column visibility chooser is rendered.
|
|
230
230
|
*/
|
|
231
231
|
columnVisibility?: boolean;
|
|
232
|
+
/**
|
|
233
|
+
* Whether the column chooser also exposes accessible
|
|
234
|
+
* earlier/later controls. Column headers never become draggable.
|
|
235
|
+
*/
|
|
236
|
+
columnReorder?: boolean;
|
|
232
237
|
/**
|
|
233
238
|
* Initially hidden column IDs; at least one stays visible.
|
|
234
239
|
*/
|
|
@@ -268,6 +273,9 @@ export type TableOptions = {
|
|
|
268
273
|
visible: string[];
|
|
269
274
|
hidden: string[];
|
|
270
275
|
}>) => void;
|
|
276
|
+
oncolumnorderchange?: (event: CustomEvent<{
|
|
277
|
+
order: string[];
|
|
278
|
+
}>) => void;
|
|
271
279
|
};
|
|
272
280
|
export type TableRowClickDetail = {
|
|
273
281
|
row: TableRow;
|
|
@@ -276,8 +284,8 @@ export type TableRowClickDetail = {
|
|
|
276
284
|
event: Event;
|
|
277
285
|
};
|
|
278
286
|
export type TableSortDetail = {
|
|
279
|
-
id: string;
|
|
280
|
-
dir: TableSortDirection;
|
|
287
|
+
id: string | null;
|
|
288
|
+
dir: TableSortDirection | null;
|
|
281
289
|
};
|
|
282
290
|
export type TableSelectionDetail = {
|
|
283
291
|
rows: TableRow[];
|
|
@@ -471,37 +479,13 @@ export type TableEditorEntry = {
|
|
|
471
479
|
* @fires Table#grow
|
|
472
480
|
* @fires Table#rowmove
|
|
473
481
|
* @fires Table#columnvisibilitychange
|
|
482
|
+
* @fires Table#columnorderchange
|
|
474
483
|
* @extends {Component<TableOptions>}
|
|
475
484
|
*/
|
|
476
485
|
export declare class Table extends Component<TableOptions> {
|
|
477
486
|
_createdRoot: boolean;
|
|
478
487
|
_original: import("../../core/dom.js").TargetSnapshot;
|
|
479
|
-
_columns:
|
|
480
|
-
id: string;
|
|
481
|
-
label: string;
|
|
482
|
-
sortable?: boolean;
|
|
483
|
-
width?: string;
|
|
484
|
-
align?: 'start' | 'center' | 'end' | 'left' | 'right';
|
|
485
|
-
render?: (row: TableRow, rowIndex: number) => Node | string | number | null | undefined;
|
|
486
|
-
sortValue?: (row: TableRow) => unknown;
|
|
487
|
-
headerTitle?: string;
|
|
488
|
-
type?: TableColumnType;
|
|
489
|
-
locale?: string | ((row: TableRow) => string | null | undefined);
|
|
490
|
-
decimals?: number | ((row: TableRow) => number | null | undefined);
|
|
491
|
-
currency?: string | ((row: TableRow) => string | null | undefined);
|
|
492
|
-
unit?: string | ((row: TableRow) => string | null | undefined);
|
|
493
|
-
popin?: boolean;
|
|
494
|
-
editable?: boolean | TableEditorType | ((row: TableRow) => boolean | TableEditorType);
|
|
495
|
-
options?: TableEditorOption[] | Record<string, string> | ((row: TableRow) => TableEditorOption[] | Record<string, string>);
|
|
496
|
-
editorProps?: Record<string, unknown>;
|
|
497
|
-
editor?: (row: TableRow, api: TableEditorApi) => Node | {
|
|
498
|
-
toElement: () => Node;
|
|
499
|
-
destroy?: () => void;
|
|
500
|
-
};
|
|
501
|
-
parse?: (raw: unknown, row: TableRow) => unknown;
|
|
502
|
-
format?: (value: unknown, row: TableRow) => string;
|
|
503
|
-
validate?: (value: unknown, row: TableRow) => true | string;
|
|
504
|
-
}[];
|
|
488
|
+
_columns: any[] | TableColumn[];
|
|
505
489
|
_data: any[] | TableRow[];
|
|
506
490
|
_selected: Set<any>;
|
|
507
491
|
_selectionAnchorId: any;
|
|
@@ -513,7 +497,7 @@ export declare class Table extends Component<TableOptions> {
|
|
|
513
497
|
_editTrigger: string;
|
|
514
498
|
_edit: {
|
|
515
499
|
id: unknown;
|
|
516
|
-
columnId:
|
|
500
|
+
columnId: any;
|
|
517
501
|
row: any;
|
|
518
502
|
cells: Map<string, TableEditorEntry>;
|
|
519
503
|
tr: any;
|
|
@@ -536,6 +520,8 @@ export declare class Table extends Component<TableOptions> {
|
|
|
536
520
|
_hiddenColumns: Set<string>;
|
|
537
521
|
_dragId: any;
|
|
538
522
|
_grabbedId: any;
|
|
523
|
+
_columnControlIds: Map<any, any>;
|
|
524
|
+
_columnStatus: HTMLElement;
|
|
539
525
|
_expanded: Set<unknown>;
|
|
540
526
|
_table: HTMLElement;
|
|
541
527
|
_colgroup: HTMLElement;
|
|
@@ -612,6 +598,48 @@ export declare class Table extends Component<TableOptions> {
|
|
|
612
598
|
* @returns {TableRow[]} Current table rows.
|
|
613
599
|
*/
|
|
614
600
|
getData(): TableRow[];
|
|
601
|
+
/**
|
|
602
|
+
* Returns shallow-cloned column descriptors in their current display order.
|
|
603
|
+
* @returns {TableColumn[]} Current columns.
|
|
604
|
+
*/
|
|
605
|
+
getColumns(): TableColumn[];
|
|
606
|
+
/**
|
|
607
|
+
* Replaces all column descriptors. Hidden state and the active sort follow retained stable IDs;
|
|
608
|
+
* an edit is canceled before cells are rebuilt.
|
|
609
|
+
* @param {TableColumn[]} columns New column descriptors.
|
|
610
|
+
* @param {{silent?:boolean}} [options={}] Event behavior.
|
|
611
|
+
* @returns {this}
|
|
612
|
+
* @fires Table#columnvisibilitychange
|
|
613
|
+
* @fires Table#columnorderchange
|
|
614
|
+
* @fires Table#editcancel
|
|
615
|
+
*/
|
|
616
|
+
setColumns(columns: TableColumn[], options?: {
|
|
617
|
+
silent?: boolean;
|
|
618
|
+
}): this;
|
|
619
|
+
/** Returns every stable column ID in current display order. @returns {string[]} */
|
|
620
|
+
getColumnOrder(): string[];
|
|
621
|
+
/**
|
|
622
|
+
* Reconciles a partial or stale preferred order with every current column.
|
|
623
|
+
* @param {string[]} order Preferred stable IDs.
|
|
624
|
+
* @param {{silent?:boolean}} [options={}] Event behavior.
|
|
625
|
+
* @returns {this}
|
|
626
|
+
* @fires Table#columnorderchange
|
|
627
|
+
* @fires Table#editcancel
|
|
628
|
+
*/
|
|
629
|
+
setColumnOrder(order: string[], options?: {
|
|
630
|
+
silent?: boolean;
|
|
631
|
+
}): this;
|
|
632
|
+
/**
|
|
633
|
+
* Moves one column to an edge of another column. Unknown IDs are a safe no-op.
|
|
634
|
+
* @param {string} id Moving stable ID.
|
|
635
|
+
* @param {string} targetId Target stable ID.
|
|
636
|
+
* @param {'before'|'after'} [position='before'] Target edge.
|
|
637
|
+
* @param {{silent?:boolean}} [options={}] Event behavior.
|
|
638
|
+
* @returns {this}
|
|
639
|
+
*/
|
|
640
|
+
moveColumn(id: string, targetId: string, position?: 'before' | 'after', options?: {
|
|
641
|
+
silent?: boolean;
|
|
642
|
+
}): this;
|
|
615
643
|
/** Returns visible column IDs in caller order. @returns {string[]} */
|
|
616
644
|
getVisibleColumns(): string[];
|
|
617
645
|
/** Returns hidden column IDs in caller order. @returns {string[]} */
|
|
@@ -660,6 +688,22 @@ export declare class Table extends Component<TableOptions> {
|
|
|
660
688
|
setSort(id: string, dir?: TableSortDirection, options?: {
|
|
661
689
|
silent?: boolean;
|
|
662
690
|
}): this;
|
|
691
|
+
/** Returns a defensive copy of the active sort. @returns {{id:string,dir:TableSortDirection}|null} */
|
|
692
|
+
getSort(): {
|
|
693
|
+
id: string;
|
|
694
|
+
dir: TableSortDirection;
|
|
695
|
+
} | null;
|
|
696
|
+
/**
|
|
697
|
+
* Clears the active sort indicator without attempting to reconstruct the caller's original row
|
|
698
|
+
* order. The current display order becomes the unsorted order until data is replaced.
|
|
699
|
+
* @param {{silent?:boolean}} [options={}] Event behavior.
|
|
700
|
+
* @returns {this}
|
|
701
|
+
* @fires Table#sort
|
|
702
|
+
* @fires Table#editcancel
|
|
703
|
+
*/
|
|
704
|
+
clearSort(options?: {
|
|
705
|
+
silent?: boolean;
|
|
706
|
+
}): this;
|
|
663
707
|
/**
|
|
664
708
|
* Returns selected rows in current display order.
|
|
665
709
|
* @returns {TableRow[]} Selected rows.
|
|
@@ -854,8 +898,28 @@ export declare class Table extends Component<TableOptions> {
|
|
|
854
898
|
_visibleColumns(): TableColumn[];
|
|
855
899
|
/** @returns {HTMLElement} */
|
|
856
900
|
_createColumnControls(): HTMLElement;
|
|
857
|
-
/**
|
|
858
|
-
|
|
901
|
+
/**
|
|
902
|
+
* @param {{id:string,action:string}|null} [focusControl=null] Control that keeps focus.
|
|
903
|
+
* @returns {void}
|
|
904
|
+
*/
|
|
905
|
+
_renderColumnControls(focusControl?: {
|
|
906
|
+
id: string;
|
|
907
|
+
action: string;
|
|
908
|
+
} | null): void;
|
|
909
|
+
/** @returns {{id:string,action:string}|null} */
|
|
910
|
+
_activeColumnControl(): {
|
|
911
|
+
id: string;
|
|
912
|
+
action: string;
|
|
913
|
+
} | null;
|
|
914
|
+
/** @param {Event} event @returns {void} */
|
|
915
|
+
_handleColumnControlClick(event: Event): void;
|
|
916
|
+
/**
|
|
917
|
+
* Adds Arrow/Home/End movement to the reorder buttons; Enter and Space retain native button
|
|
918
|
+
* activation. Focus follows the stable column id across the cancel-safe row/header rebuild.
|
|
919
|
+
* @param {KeyboardEvent} event Keyboard event.
|
|
920
|
+
* @returns {void}
|
|
921
|
+
*/
|
|
922
|
+
_handleColumnControlKeydown(event: KeyboardEvent): void;
|
|
859
923
|
/** @param {DragEvent} event @returns {void} */
|
|
860
924
|
_handleRowDragStart(event: DragEvent): void;
|
|
861
925
|
/** @param {DragEvent} event @returns {void} */
|
|
@@ -1052,6 +1116,9 @@ export declare class Table extends Component<TableOptions> {
|
|
|
1052
1116
|
/** @event Table#rowtoggle @type {CustomEvent<TableRowToggleDetail>} */
|
|
1053
1117
|
/** @event Table#stackedchange @type {CustomEvent<{stacked: boolean}>} */
|
|
1054
1118
|
/** @event Table#grow @type {CustomEvent<{rendered: number, total: number}>} */
|
|
1119
|
+
/** @event Table#rowmove @type {CustomEvent<TableRowMoveDetail>} */
|
|
1120
|
+
/** @event Table#columnvisibilitychange @type {CustomEvent<{visible:string[],hidden:string[]}>} */
|
|
1121
|
+
/** @event Table#columnorderchange @type {CustomEvent<{order:string[]}>} */
|
|
1055
1122
|
/**
|
|
1056
1123
|
* Editor opened for a cell (or, in row mode, for the row).
|
|
1057
1124
|
* @event Table#editstart
|
|
@@ -1181,3 +1248,25 @@ export declare function firstValidationError(values: Record<string, unknown>, co
|
|
|
1181
1248
|
columnId: string;
|
|
1182
1249
|
message: string;
|
|
1183
1250
|
} | null;
|
|
1251
|
+
/**
|
|
1252
|
+
* Validates and shallow-clones table columns so stable-id APIs never mutate caller descriptors.
|
|
1253
|
+
* @param {unknown} columns Column descriptors.
|
|
1254
|
+
* @returns {TableColumn[]} Normalized descriptors.
|
|
1255
|
+
*/
|
|
1256
|
+
export declare function normalizeTableColumns(columns: unknown): TableColumn[];
|
|
1257
|
+
/**
|
|
1258
|
+
* Reconciles saved or partial column IDs with every current column.
|
|
1259
|
+
* @param {TableColumn[]} columns Current columns.
|
|
1260
|
+
* @param {unknown} order Preferred IDs.
|
|
1261
|
+
* @returns {string[]} Complete stable order.
|
|
1262
|
+
*/
|
|
1263
|
+
export declare function reconcileTableColumnOrder(columns: TableColumn[], order: unknown): string[];
|
|
1264
|
+
/**
|
|
1265
|
+
* Moves one stable column ID without changing the supplied order.
|
|
1266
|
+
* @param {string[]} order Current IDs.
|
|
1267
|
+
* @param {string} id Moving ID.
|
|
1268
|
+
* @param {string} targetId Target ID.
|
|
1269
|
+
* @param {'before'|'after'} [position='before'] Target edge.
|
|
1270
|
+
* @returns {string[]} Reordered copy, or an unchanged copy for unknown/same IDs.
|
|
1271
|
+
*/
|
|
1272
|
+
export declare function moveTableColumn(order: string[], id: string, targetId: string, position?: 'before' | 'after'): string[];
|
|
@@ -0,0 +1,192 @@
|
|
|
1
|
+
import { Table } from '../table/table.js';
|
|
2
|
+
import { RecordView } from '../view/record-view.js';
|
|
3
|
+
export type TableViewRecord = Record<string, any>;
|
|
4
|
+
export type ViewField = import('../view/record-view.js').ViewField;
|
|
5
|
+
export type ViewSort = import('../view/record-view.js').ViewSort;
|
|
6
|
+
export type TableColumn = import('../table/table.js').TableColumn;
|
|
7
|
+
export type TableOptions = import('../table/table.js').TableOptions;
|
|
8
|
+
export type TableViewOptions = {
|
|
9
|
+
/**
|
|
10
|
+
* Shared ordered field descriptors. These win over `table.columns`.
|
|
11
|
+
*/
|
|
12
|
+
fields?: ViewField[];
|
|
13
|
+
/**
|
|
14
|
+
* Initial records. These win over `table.data`.
|
|
15
|
+
*/
|
|
16
|
+
data?: TableViewRecord[];
|
|
17
|
+
/**
|
|
18
|
+
* Stable record id accessor.
|
|
19
|
+
*/
|
|
20
|
+
recordId?: string | ((record: TableViewRecord) => unknown);
|
|
21
|
+
/**
|
|
22
|
+
* Initial shared sort.
|
|
23
|
+
*/
|
|
24
|
+
sort?: ViewSort | null;
|
|
25
|
+
/**
|
|
26
|
+
* Local or server-controlled sorting.
|
|
27
|
+
*/
|
|
28
|
+
sortMode?: 'local' | 'server';
|
|
29
|
+
/**
|
|
30
|
+
* Shared selection behavior.
|
|
31
|
+
*/
|
|
32
|
+
selectable?: false | 'single' | 'multi';
|
|
33
|
+
/**
|
|
34
|
+
* Initially selected record ids.
|
|
35
|
+
*/
|
|
36
|
+
selection?: unknown[];
|
|
37
|
+
/**
|
|
38
|
+
* Preferred stable field order.
|
|
39
|
+
*/
|
|
40
|
+
fieldOrder?: string[];
|
|
41
|
+
/**
|
|
42
|
+
* Initially hidden field ids.
|
|
43
|
+
*/
|
|
44
|
+
hiddenFields?: string[];
|
|
45
|
+
/**
|
|
46
|
+
* Show the accessible visibility and reorder disclosure.
|
|
47
|
+
*/
|
|
48
|
+
fieldControls?: boolean;
|
|
49
|
+
/**
|
|
50
|
+
* Empty-result content.
|
|
51
|
+
*/
|
|
52
|
+
emptyText?: string | Node | (() => string | Node) | null;
|
|
53
|
+
/**
|
|
54
|
+
* Advanced low-level Table options. Shared options win where
|
|
55
|
+
* their contracts overlap; all other options and callbacks are forwarded unchanged.
|
|
56
|
+
*/
|
|
57
|
+
table?: TableOptions;
|
|
58
|
+
onrecordclick?: (event: CustomEvent<Record<string, unknown>>) => void;
|
|
59
|
+
onrecorddblclick?: (event: CustomEvent<Record<string, unknown>>) => void;
|
|
60
|
+
ondatachange?: (event: CustomEvent<{
|
|
61
|
+
records: TableViewRecord[];
|
|
62
|
+
}>) => void;
|
|
63
|
+
onselectionchange?: (event: CustomEvent<{
|
|
64
|
+
records: TableViewRecord[];
|
|
65
|
+
ids: unknown[];
|
|
66
|
+
}>) => void;
|
|
67
|
+
onsortchange?: (event: CustomEvent<{
|
|
68
|
+
id: string | null;
|
|
69
|
+
dir: 'asc' | 'desc' | null;
|
|
70
|
+
}>) => void;
|
|
71
|
+
onfieldvisibilitychange?: (event: CustomEvent<{
|
|
72
|
+
visible: string[];
|
|
73
|
+
hidden: string[];
|
|
74
|
+
}>) => void;
|
|
75
|
+
onfieldorderchange?: (event: CustomEvent<{
|
|
76
|
+
order: string[];
|
|
77
|
+
}>) => void;
|
|
78
|
+
onstatechange?: (event: CustomEvent<Record<string, unknown>>) => void;
|
|
79
|
+
};
|
|
80
|
+
/** @typedef {Record<string, any>} TableViewRecord */
|
|
81
|
+
/** @typedef {import('../view/record-view.js').ViewField} ViewField */
|
|
82
|
+
/** @typedef {import('../view/record-view.js').ViewSort} ViewSort */
|
|
83
|
+
/** @typedef {import('../table/table.js').TableColumn} TableColumn */
|
|
84
|
+
/** @typedef {import('../table/table.js').TableOptions} TableOptions */
|
|
85
|
+
/**
|
|
86
|
+
* @typedef {Object} TableViewOptions
|
|
87
|
+
* @property {ViewField[]} [fields=[]] Shared ordered field descriptors. These win over `table.columns`.
|
|
88
|
+
* @property {TableViewRecord[]} [data=[]] Initial records. These win over `table.data`.
|
|
89
|
+
* @property {string|((record:TableViewRecord)=>unknown)} [recordId='ID'] Stable record id accessor.
|
|
90
|
+
* @property {ViewSort|null} [sort=null] Initial shared sort.
|
|
91
|
+
* @property {'local'|'server'} [sortMode='local'] Local or server-controlled sorting.
|
|
92
|
+
* @property {false|'single'|'multi'} [selectable=false] Shared selection behavior.
|
|
93
|
+
* @property {unknown[]} [selection=[]] Initially selected record ids.
|
|
94
|
+
* @property {string[]} [fieldOrder=[]] Preferred stable field order.
|
|
95
|
+
* @property {string[]} [hiddenFields=[]] Initially hidden field ids.
|
|
96
|
+
* @property {boolean} [fieldControls=true] Show the accessible visibility and reorder disclosure.
|
|
97
|
+
* @property {string|Node|(()=>string|Node)|null} [emptyText=null] Empty-result content.
|
|
98
|
+
* @property {TableOptions} [table={}] Advanced low-level Table options. Shared options win where
|
|
99
|
+
* their contracts overlap; all other options and callbacks are forwarded unchanged.
|
|
100
|
+
* @property {(event:CustomEvent<Record<string,unknown>>)=>void} [onrecordclick]
|
|
101
|
+
* @property {(event:CustomEvent<Record<string,unknown>>)=>void} [onrecorddblclick]
|
|
102
|
+
* @property {(event:CustomEvent<{records:TableViewRecord[]}> )=>void} [ondatachange]
|
|
103
|
+
* @property {(event:CustomEvent<{records:TableViewRecord[],ids:unknown[]}> )=>void} [onselectionchange]
|
|
104
|
+
* @property {(event:CustomEvent<{id:string|null,dir:'asc'|'desc'|null}>)=>void} [onsortchange]
|
|
105
|
+
* @property {(event:CustomEvent<{visible:string[],hidden:string[]}> )=>void} [onfieldvisibilitychange]
|
|
106
|
+
* @property {(event:CustomEvent<{order:string[]}> )=>void} [onfieldorderchange]
|
|
107
|
+
* @property {(event:CustomEvent<Record<string,unknown>>)=>void} [onstatechange]
|
|
108
|
+
*/
|
|
109
|
+
/**
|
|
110
|
+
* Record-oriented table view. Shared record state stays in RecordView while the composed `table`
|
|
111
|
+
* instance retains Table's editing, hierarchy, growth, movement, responsive, and loading behavior.
|
|
112
|
+
* @fires TableView#recordclick
|
|
113
|
+
* @fires TableView#recorddblclick
|
|
114
|
+
* @fires TableView#datachange
|
|
115
|
+
* @fires TableView#selectionchange
|
|
116
|
+
* @fires TableView#sortchange
|
|
117
|
+
* @fires TableView#fieldvisibilitychange
|
|
118
|
+
* @fires TableView#fieldorderchange
|
|
119
|
+
* @fires TableView#statechange
|
|
120
|
+
* @extends {RecordView}
|
|
121
|
+
*/
|
|
122
|
+
export declare class TableView extends RecordView {
|
|
123
|
+
_createdTableViewRoot: boolean;
|
|
124
|
+
_tableViewOriginal: import("../../core/dom.js").TargetSnapshot;
|
|
125
|
+
_tableViewRestored: boolean;
|
|
126
|
+
_tableSyncDepth: number;
|
|
127
|
+
_tableViewDestroyed: boolean;
|
|
128
|
+
_tableHost: HTMLElement;
|
|
129
|
+
table: Table;
|
|
130
|
+
static cssName: string;
|
|
131
|
+
/** @type {Readonly<TableViewOptions>} */
|
|
132
|
+
static defaults: Readonly<TableViewOptions>;
|
|
133
|
+
/**
|
|
134
|
+
* Creates or enhances a record table view.
|
|
135
|
+
* @param {Element|string|null} [target=null] Existing root, selector, or null.
|
|
136
|
+
* @param {TableViewOptions} [options={}] Shared and table-specific options.
|
|
137
|
+
*/
|
|
138
|
+
constructor(target?: Element | string | null, options?: TableViewOptions);
|
|
139
|
+
/** @returns {HTMLElement} Table view root. */
|
|
140
|
+
render(): HTMLElement;
|
|
141
|
+
/** Returns the composed Table for advanced methods and Table-specific events. @returns {Table} */
|
|
142
|
+
getTable(): Table;
|
|
143
|
+
/** @protected @param {string} reason Shared refresh reason. @returns {void} */
|
|
144
|
+
protected _refreshView(reason: string): void;
|
|
145
|
+
/** Destroys the inner Table and restores an enhanced target exactly once. @returns {void} */
|
|
146
|
+
destroy(): void;
|
|
147
|
+
/** @private @param {()=>void} callback Guarded synchronization. @returns {void} */
|
|
148
|
+
private _withTableSync;
|
|
149
|
+
/** @private @returns {void} */
|
|
150
|
+
private _syncTableFieldState;
|
|
151
|
+
/** @private @returns {void} */
|
|
152
|
+
private _bridgeTableEvents;
|
|
153
|
+
/** @private @param {{id:string|null,dir:'asc'|'desc'|null}} detail Sort detail. @returns {void} */
|
|
154
|
+
private _tableSortChanged;
|
|
155
|
+
/** @private @param {{rows:TableViewRecord[],ids:unknown[]}} detail Selection detail. @returns {void} */
|
|
156
|
+
private _tableSelectionChanged;
|
|
157
|
+
/** @private @returns {void} */
|
|
158
|
+
private _tableDataChanged;
|
|
159
|
+
/** @private @param {{visible:string[],hidden:string[]}} detail Visibility detail. @returns {void} */
|
|
160
|
+
private _tableVisibilityChanged;
|
|
161
|
+
/** @private @param {{order:string[]}} detail Order detail. @returns {void} */
|
|
162
|
+
private _tableOrderChanged;
|
|
163
|
+
/** @private @returns {void} */
|
|
164
|
+
private _emitTableViewSelection;
|
|
165
|
+
/** @private @param {string} reason State-change reason. @returns {void} */
|
|
166
|
+
private _emitTableViewState;
|
|
167
|
+
}
|
|
168
|
+
/**
|
|
169
|
+
* Maps common fields to Table columns without mutating descriptors. Shared get/render/sortValue
|
|
170
|
+
* semantics win; `field.view.table` may provide the remaining advanced TableColumn properties.
|
|
171
|
+
* @param {ViewField[]} fields Shared fields in display order.
|
|
172
|
+
* @returns {TableColumn[]} Table columns.
|
|
173
|
+
*/
|
|
174
|
+
export declare function fieldsToTableColumns(fields: ViewField[]): TableColumn[];
|
|
175
|
+
/**
|
|
176
|
+
* Builds the composed Table configuration. Shared options deliberately overwrite overlapping
|
|
177
|
+
* low-level options; every advanced option remains untouched.
|
|
178
|
+
* @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.
|
|
180
|
+
* @returns {TableOptions} Table configuration.
|
|
181
|
+
*/
|
|
182
|
+
export declare function tableOptionsForView(table: TableOptions | undefined, shared: {
|
|
183
|
+
fields: ViewField[];
|
|
184
|
+
data: TableViewRecord[];
|
|
185
|
+
recordId: string | ((record: TableViewRecord) => unknown);
|
|
186
|
+
sort: ViewSort | null;
|
|
187
|
+
sortMode: 'local' | 'server';
|
|
188
|
+
selectable: false | 'single' | 'multi';
|
|
189
|
+
hiddenFields: string[];
|
|
190
|
+
fieldControls: boolean;
|
|
191
|
+
emptyText: string | Node | (() => string | Node) | null;
|
|
192
|
+
}): TableOptions;
|