@zeyos/zx 2.1.0 → 2.2.1
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/README.md +15 -0
- package/dist/types/compat/base.d.ts +156 -0
- package/dist/types/compat/globals.d.ts +20 -0
- package/dist/types/compat/index.d.ts +128 -0
- package/dist/types/compat/map/basic.d.ts +175 -0
- package/dist/types/compat/map/data.d.ts +102 -0
- package/dist/types/compat/map/date-time.d.ts +80 -0
- package/dist/types/compat/map/factory.d.ts +9 -0
- package/dist/types/compat/map/form.d.ts +98 -0
- package/dist/types/compat/map/helpers.d.ts +12 -0
- package/dist/types/compat/map/http.d.ts +36 -0
- package/dist/types/compat/map/layout.d.ts +106 -0
- package/dist/types/compat/map/options.d.ts +80 -0
- package/dist/types/compat/map/select.d.ts +95 -0
- package/dist/types/compat/map/stubs.d.ts +32 -0
- package/dist/types/compat/map/utilities.d.ts +37 -0
- package/dist/types/compat-entry.d.ts +5 -0
- package/dist/types/components/badge/badge.d.ts +46 -0
- package/dist/types/components/breadcrumb/breadcrumb.d.ts +200 -0
- package/dist/types/components/button/button.d.ts +42 -0
- package/dist/types/components/check-button/check-button.d.ts +98 -0
- package/dist/types/components/checklist/checklist.d.ts +143 -0
- package/dist/types/components/checklist/field-adapter.d.ts +5 -0
- package/dist/types/components/context-menu/context-menu.d.ts +130 -0
- package/dist/types/components/copy/copy-button.d.ts +48 -0
- package/dist/types/components/copy/copy-input.d.ts +91 -0
- package/dist/types/components/data-filter/data-filter.d.ts +250 -0
- package/dist/types/components/data-filter/filter-core.d.ts +52 -0
- package/dist/types/components/date-picker/date-picker.d.ts +137 -0
- package/dist/types/components/date-picker/date-range-picker.d.ts +350 -0
- package/dist/types/components/date-picker/field-adapter.d.ts +6 -0
- package/dist/types/components/date-picker/month-picker.d.ts +75 -0
- package/dist/types/components/date-picker/range-field-adapter.d.ts +7 -0
- package/dist/types/components/date-picker/time-picker.d.ts +127 -0
- package/dist/types/components/datebox/date-range-box.d.ts +218 -0
- package/dist/types/components/datebox/datebox.d.ts +160 -0
- package/dist/types/components/datebox/field-adapter.d.ts +5 -0
- package/dist/types/components/dialog/dialog.d.ts +284 -0
- package/dist/types/components/dropdown/dropdown.d.ts +118 -0
- package/dist/types/components/empty-state/empty-state.d.ts +38 -0
- package/dist/types/components/field/field.d.ts +231 -0
- package/dist/types/components/field-upload/field-adapter.d.ts +5 -0
- package/dist/types/components/field-upload/field-upload.d.ts +213 -0
- package/dist/types/components/fieldset/fieldset.d.ts +125 -0
- package/dist/types/components/finder/finder.d.ts +252 -0
- package/dist/types/components/form/form.d.ts +194 -0
- package/dist/types/components/groupbox/groupbox.d.ts +89 -0
- package/dist/types/components/layout/layout.d.ts +132 -0
- package/dist/types/components/loading/inline-loading.d.ts +86 -0
- package/dist/types/components/loading/progress-bar.d.ts +168 -0
- package/dist/types/components/loading/spinner.d.ts +34 -0
- package/dist/types/components/master-panel/master-panel.d.ts +112 -0
- package/dist/types/components/menu-button/menu-button.d.ts +142 -0
- package/dist/types/components/message/message.d.ts +212 -0
- package/dist/types/components/modal/modal.d.ts +105 -0
- package/dist/types/components/multi-value-editor/field-adapter.d.ts +5 -0
- package/dist/types/components/multi-value-editor/multi-value-editor.d.ts +66 -0
- package/dist/types/components/navigation-bar/navigation-bar.d.ts +229 -0
- package/dist/types/components/number-field/field-adapter.d.ts +5 -0
- package/dist/types/components/number-field/number-field.d.ts +292 -0
- package/dist/types/components/pagination/pagination.d.ts +267 -0
- package/dist/types/components/panel/panel.d.ts +194 -0
- package/dist/types/components/permission/permission.d.ts +93 -0
- package/dist/types/components/rating/field-adapter.d.ts +5 -0
- package/dist/types/components/rating/rating.d.ts +213 -0
- package/dist/types/components/search/search.d.ts +98 -0
- package/dist/types/components/select/field-adapter.d.ts +5 -0
- package/dist/types/components/select/filter.d.ts +11 -0
- package/dist/types/components/select/select.d.ts +235 -0
- package/dist/types/components/skeleton/skeleton.d.ts +97 -0
- package/dist/types/components/slider/field-adapter.d.ts +5 -0
- package/dist/types/components/slider/slider.d.ts +216 -0
- package/dist/types/components/split-view/split-view.d.ts +335 -0
- package/dist/types/components/stepper/stepper.d.ts +314 -0
- package/dist/types/components/stepper/steps.d.ts +131 -0
- package/dist/types/components/tabbox/tabbox.d.ts +230 -0
- package/dist/types/components/table/sort.d.ts +49 -0
- package/dist/types/components/table/table.d.ts +872 -0
- package/dist/types/components/tag-picker/field-adapter.d.ts +5 -0
- package/dist/types/components/tag-picker/tag-picker.d.ts +375 -0
- package/dist/types/components/timebox/field-adapter.d.ts +5 -0
- package/dist/types/components/timebox/timebox.d.ts +121 -0
- package/dist/types/components/toggle/field-adapter.d.ts +5 -0
- package/dist/types/components/toggle/toggle.d.ts +94 -0
- package/dist/types/components/toolbar/toolbar.d.ts +230 -0
- package/dist/types/components/tooltip/tooltip.d.ts +183 -0
- package/dist/types/components/tree/hierarchy.d.ts +113 -0
- package/dist/types/components/tree/tree.d.ts +383 -0
- package/dist/types/components/truncate/truncate.d.ts +61 -0
- package/dist/types/components/value-list/field-adapter.d.ts +5 -0
- package/dist/types/components/value-list/value-list.d.ts +143 -0
- package/dist/types/core/breakpoint.d.ts +68 -0
- package/dist/types/core/component.d.ts +115 -0
- package/dist/types/core/date.d.ts +50 -0
- package/dist/types/core/dom.d.ts +86 -0
- package/dist/types/core/export.d.ts +70 -0
- package/dist/types/core/fontawesome.d.ts +107 -0
- package/dist/types/core/format.d.ts +107 -0
- package/dist/types/core/http.d.ts +122 -0
- package/dist/types/core/i18n.d.ts +35 -0
- package/dist/types/core/icons.d.ts +137 -0
- package/dist/types/core/keyboard.d.ts +72 -0
- package/dist/types/core/position.d.ts +45 -0
- package/dist/types/core/storage.d.ts +46 -0
- package/dist/types/core/util.d.ts +117 -0
- package/dist/types/elements/define.d.ts +73 -0
- package/dist/types/elements/reflect.d.ts +27 -0
- package/dist/types/index.d.ts +79 -0
- package/dist/types/zeyos/connect.d.ts +65 -0
- package/dist/types/zeyos/form.d.ts +140 -0
- package/dist/types/zeyos/icons.d.ts +104 -0
- package/dist/types/zeyos/index.d.ts +12 -0
- package/dist/types/zeyos/modules.d.ts +110 -0
- package/dist/types/zeyos/query.d.ts +157 -0
- package/dist/types/zeyos/schema.d.ts +79 -0
- package/dist/types/zeyos/select.d.ts +167 -0
- package/dist/types/zeyos/table.d.ts +205 -0
- package/dist/zx-compat.esm.js +375 -39
- package/dist/zx-compat.esm.min.js +1 -1
- package/dist/zx-compat.global.js +372 -73
- package/dist/zx-compat.global.min.js +3 -3
- package/dist/zx-zeyos.esm.js +355 -49
- package/dist/zx-zeyos.esm.min.js +1 -1
- package/dist/zx.css +68 -6
- package/dist/zx.esm.js +359 -73
- package/dist/zx.esm.min.js +3 -3
- package/dist/zx.global.js +359 -73
- package/dist/zx.global.min.js +3 -3
- package/dist/zx.min.css +1 -1
- package/docs/api.json +48 -2
- package/docs/llms.md +31 -0
- package/package.json +37 -9
- package/src/compat/base.js +291 -0
- package/src/compat/globals.js +165 -0
- package/src/compat/index.js +84 -0
- package/src/compat/map/basic.js +464 -0
- package/src/compat/map/data.js +232 -0
- package/src/compat/map/date-time.js +177 -0
- package/src/compat/map/factory.js +45 -0
- package/src/compat/map/form.js +330 -0
- package/src/compat/map/helpers.js +46 -0
- package/src/compat/map/http.js +117 -0
- package/src/compat/map/layout.js +256 -0
- package/src/compat/map/options.js +267 -0
- package/src/compat/map/select.js +198 -0
- package/src/compat/map/stubs.js +26 -0
- package/src/compat/map/utilities.js +113 -0
- package/src/compat-entry.js +11 -0
- package/src/components/badge/badge.css +147 -0
- package/src/components/badge/badge.js +92 -0
- package/src/components/breadcrumb/breadcrumb.css +105 -0
- package/src/components/breadcrumb/breadcrumb.js +331 -0
- package/src/components/button/button.css +104 -0
- package/src/components/button/button.js +76 -0
- package/src/components/check-button/check-button.css +66 -0
- package/src/components/check-button/check-button.js +167 -0
- package/src/components/checklist/checklist.css +65 -0
- package/src/components/checklist/checklist.js +282 -0
- package/src/components/checklist/field-adapter.js +46 -0
- package/src/components/context-menu/context-menu.css +54 -0
- package/src/components/context-menu/context-menu.js +334 -0
- package/src/components/copy/copy-button.css +27 -0
- package/src/components/copy/copy-button.js +78 -0
- package/src/components/copy/copy-input.css +59 -0
- package/src/components/copy/copy-input.js +123 -0
- package/src/components/data-filter/data-filter.css +53 -0
- package/src/components/data-filter/data-filter.js +400 -0
- package/src/components/data-filter/filter-core.js +128 -0
- package/src/components/date-picker/date-picker.css +181 -0
- package/src/components/date-picker/date-picker.js +500 -0
- package/src/components/date-picker/date-range-picker.css +264 -0
- package/src/components/date-picker/date-range-picker.js +990 -0
- package/src/components/date-picker/field-adapter.js +36 -0
- package/src/components/date-picker/month-picker.js +223 -0
- package/src/components/date-picker/range-field-adapter.js +31 -0
- package/src/components/date-picker/time-picker.css +191 -0
- package/src/components/date-picker/time-picker.js +406 -0
- package/src/components/datebox/date-range-box.css +128 -0
- package/src/components/datebox/date-range-box.js +492 -0
- package/src/components/datebox/datebox.css +108 -0
- package/src/components/datebox/datebox.js +358 -0
- package/src/components/datebox/field-adapter.js +34 -0
- package/src/components/dialog/dialog.css +74 -0
- package/src/components/dialog/dialog.js +450 -0
- package/src/components/dropdown/dropdown.css +24 -0
- package/src/components/dropdown/dropdown.js +288 -0
- package/src/components/empty-state/empty-state.css +80 -0
- package/src/components/empty-state/empty-state.js +92 -0
- package/src/components/field/field.css +127 -0
- package/src/components/field/field.js +605 -0
- package/src/components/field-upload/field-adapter.js +21 -0
- package/src/components/field-upload/field-upload.css +108 -0
- package/src/components/field-upload/field-upload.js +475 -0
- package/src/components/fieldset/fieldset.css +37 -0
- package/src/components/fieldset/fieldset.js +307 -0
- package/src/components/finder/finder.css +98 -0
- package/src/components/finder/finder.js +509 -0
- package/src/components/form/form.css +32 -0
- package/src/components/form/form.js +302 -0
- package/src/components/groupbox/groupbox.css +51 -0
- package/src/components/groupbox/groupbox.js +199 -0
- package/src/components/layout/layout.css +117 -0
- package/src/components/layout/layout.js +136 -0
- package/src/components/loading/inline-loading.css +34 -0
- package/src/components/loading/inline-loading.js +140 -0
- package/src/components/loading/progress-bar.css +115 -0
- package/src/components/loading/progress-bar.js +259 -0
- package/src/components/loading/spinner.css +58 -0
- package/src/components/loading/spinner.js +57 -0
- package/src/components/master-panel/master-panel.css +51 -0
- package/src/components/master-panel/master-panel.js +203 -0
- package/src/components/menu-button/menu-button.css +49 -0
- package/src/components/menu-button/menu-button.js +294 -0
- package/src/components/message/message.css +122 -0
- package/src/components/message/message.js +499 -0
- package/src/components/modal/modal.css +47 -0
- package/src/components/modal/modal.js +203 -0
- package/src/components/multi-value-editor/field-adapter.js +44 -0
- package/src/components/multi-value-editor/multi-value-editor.css +56 -0
- package/src/components/multi-value-editor/multi-value-editor.js +170 -0
- package/src/components/navigation-bar/navigation-bar.css +130 -0
- package/src/components/navigation-bar/navigation-bar.js +450 -0
- package/src/components/number-field/field-adapter.js +40 -0
- package/src/components/number-field/number-field.css +77 -0
- package/src/components/number-field/number-field.js +545 -0
- package/src/components/pagination/pagination.css +95 -0
- package/src/components/pagination/pagination.js +481 -0
- package/src/components/panel/panel.css +123 -0
- package/src/components/panel/panel.js +336 -0
- package/src/components/permission/permission.css +47 -0
- package/src/components/permission/permission.js +198 -0
- package/src/components/rating/field-adapter.js +34 -0
- package/src/components/rating/rating.css +97 -0
- package/src/components/rating/rating.js +395 -0
- package/src/components/search/search.css +70 -0
- package/src/components/search/search.js +193 -0
- package/src/components/select/field-adapter.js +24 -0
- package/src/components/select/filter.js +39 -0
- package/src/components/select/select.css +180 -0
- package/src/components/select/select.js +663 -0
- package/src/components/skeleton/skeleton.css +76 -0
- package/src/components/skeleton/skeleton.js +139 -0
- package/src/components/slider/field-adapter.js +36 -0
- package/src/components/slider/slider.css +181 -0
- package/src/components/slider/slider.js +399 -0
- package/src/components/split-view/split-view.css +139 -0
- package/src/components/split-view/split-view.js +806 -0
- package/src/components/stepper/stepper.css +234 -0
- package/src/components/stepper/stepper.js +459 -0
- package/src/components/stepper/steps.js +131 -0
- package/src/components/tabbox/tabbox.css +281 -0
- package/src/components/tabbox/tabbox.js +484 -0
- package/src/components/table/sort.js +85 -0
- package/src/components/table/table.css +364 -0
- package/src/components/table/table.js +1711 -0
- package/src/components/tag-picker/field-adapter.js +35 -0
- package/src/components/tag-picker/tag-picker.css +169 -0
- package/src/components/tag-picker/tag-picker.js +837 -0
- package/src/components/timebox/field-adapter.js +24 -0
- package/src/components/timebox/timebox.css +51 -0
- package/src/components/timebox/timebox.js +276 -0
- package/src/components/toggle/field-adapter.js +24 -0
- package/src/components/toggle/toggle.css +66 -0
- package/src/components/toggle/toggle.js +150 -0
- package/src/components/toolbar/toolbar.css +81 -0
- package/src/components/toolbar/toolbar.js +511 -0
- package/src/components/tooltip/tooltip.css +36 -0
- package/src/components/tooltip/tooltip.js +420 -0
- package/src/components/tree/hierarchy.js +151 -0
- package/src/components/tree/tree.css +99 -0
- package/src/components/tree/tree.js +784 -0
- package/src/components/truncate/truncate.css +20 -0
- package/src/components/truncate/truncate.js +92 -0
- package/src/components/value-list/field-adapter.js +24 -0
- package/src/components/value-list/value-list.css +108 -0
- package/src/components/value-list/value-list.js +336 -0
- package/src/core/breakpoint.js +150 -0
- package/src/core/component.js +292 -0
- package/src/core/date.js +216 -0
- package/src/core/dom.js +260 -0
- package/src/core/export.js +204 -0
- package/src/core/fontawesome.js +177 -0
- package/src/core/format.js +283 -0
- package/src/core/http.js +246 -0
- package/src/core/i18n.js +83 -0
- package/src/core/icons.js +283 -0
- package/src/core/keyboard.js +240 -0
- package/src/core/position.js +177 -0
- package/src/core/storage.js +175 -0
- package/src/core/util.js +336 -0
- package/src/elements/define.js +715 -0
- package/src/elements/reflect.js +79 -0
- package/src/index.js +131 -0
- package/src/zeyos/connect.js +142 -0
- package/src/zeyos/form.js +254 -0
- package/src/zeyos/icons.js +92 -0
- package/src/zeyos/index.js +21 -0
- package/src/zeyos/modules.js +269 -0
- package/src/zeyos/query.js +199 -0
- package/src/zeyos/schema.js +474 -0
- package/src/zeyos/select.js +175 -0
- package/src/zeyos/table.js +272 -0
- package/styles/base.css +124 -0
- package/styles/icons.css +34 -0
- package/styles/tokens/dark.css +84 -0
- package/styles/tokens/density.css +9 -0
- package/styles/tokens/global.css +80 -0
- package/styles/tokens/modules.css +109 -0
- package/styles/tokens/semantic.css +49 -0
- package/styles/zx.css +61 -0
|
@@ -0,0 +1,872 @@
|
|
|
1
|
+
import { Component } from '../../core/component.js';
|
|
2
|
+
export type TableRow = Record<string, any>;
|
|
3
|
+
export type TableSortDirection = 'asc' | 'desc';
|
|
4
|
+
export type TableSelectionMode = false | 'single' | 'multi';
|
|
5
|
+
export type TableEditMode = false | 'cell' | 'row';
|
|
6
|
+
export type TableEditorType = 'text' | 'number' | 'select' | 'date' | 'checkbox' | 'textarea' | 'custom';
|
|
7
|
+
export type TableEditorOption = {
|
|
8
|
+
value: unknown;
|
|
9
|
+
label: string;
|
|
10
|
+
};
|
|
11
|
+
export type TableEditorApi = {
|
|
12
|
+
/**
|
|
13
|
+
* Value the cell holds when the editor opens.
|
|
14
|
+
*/
|
|
15
|
+
value: unknown;
|
|
16
|
+
/**
|
|
17
|
+
* Commits the edit with the given value.
|
|
18
|
+
*/
|
|
19
|
+
commit: (value: unknown) => void;
|
|
20
|
+
/**
|
|
21
|
+
* Cancels the edit and restores the cell.
|
|
22
|
+
*/
|
|
23
|
+
cancel: () => void;
|
|
24
|
+
/**
|
|
25
|
+
* Row being edited.
|
|
26
|
+
*/
|
|
27
|
+
row: TableRow;
|
|
28
|
+
/**
|
|
29
|
+
* Column being edited.
|
|
30
|
+
*/
|
|
31
|
+
column: TableColumn;
|
|
32
|
+
};
|
|
33
|
+
export type TableColumn = {
|
|
34
|
+
/**
|
|
35
|
+
* Row property and stable column identifier.
|
|
36
|
+
*/
|
|
37
|
+
id: string;
|
|
38
|
+
/**
|
|
39
|
+
* Visible header label.
|
|
40
|
+
*/
|
|
41
|
+
label: string;
|
|
42
|
+
/**
|
|
43
|
+
* Whether the header changes the active sort.
|
|
44
|
+
*/
|
|
45
|
+
sortable?: boolean;
|
|
46
|
+
/**
|
|
47
|
+
* CSS width, `auto`, or an `fr` proportion. `fr` values are
|
|
48
|
+
* converted into proportional percentages on `<col>` elements and enable `table-layout: fixed`;
|
|
49
|
+
* this preserves a single aligned header/body table without measuring layout in JavaScript.
|
|
50
|
+
*/
|
|
51
|
+
width?: string;
|
|
52
|
+
/**
|
|
53
|
+
* Cell alignment.
|
|
54
|
+
*/
|
|
55
|
+
align?: 'start' | 'center' | 'end' | 'left' | 'right';
|
|
56
|
+
/**
|
|
57
|
+
* Cell renderer. Non-Node results are inserted as text.
|
|
58
|
+
*/
|
|
59
|
+
render?: (row: TableRow, rowIndex: number) => Node | string | number | null | undefined;
|
|
60
|
+
/**
|
|
61
|
+
* Sort-value accessor.
|
|
62
|
+
*/
|
|
63
|
+
sortValue?: (row: TableRow) => unknown;
|
|
64
|
+
/**
|
|
65
|
+
* Header tooltip.
|
|
66
|
+
*/
|
|
67
|
+
headerTitle?: string;
|
|
68
|
+
/**
|
|
69
|
+
* While stacked, whether this column becomes a labelled line.
|
|
70
|
+
* `false` keeps it in the card's headline — the identifying columns usually want that.
|
|
71
|
+
*/
|
|
72
|
+
popin?: boolean;
|
|
73
|
+
/**
|
|
74
|
+
* Editor for this column while the table runs with `editMode`. `true` means `'text'`; a function is
|
|
75
|
+
* evaluated per row so individual rows stay read-only.
|
|
76
|
+
*/
|
|
77
|
+
editable?: boolean | TableEditorType | ((row: TableRow) => boolean | TableEditorType);
|
|
78
|
+
/**
|
|
79
|
+
* Choices for an `'select'` editor: `[{value, label}]`, a `{value: label}` map, or a row callback.
|
|
80
|
+
*/
|
|
81
|
+
options?: TableEditorOption[] | Record<string, string> | ((row: TableRow) => TableEditorOption[] | Record<string, string>);
|
|
82
|
+
/**
|
|
83
|
+
* Options forwarded to the underlying editor
|
|
84
|
+
* component (NumberField, Select, Datebox, Toggle) or to the generated `<input>`/`<textarea>`.
|
|
85
|
+
*/
|
|
86
|
+
editorProps?: Record<string, unknown>;
|
|
87
|
+
/**
|
|
88
|
+
* Fully custom editor. Wins over `editable`, except that a per-row `editable` function returning
|
|
89
|
+
* `false` still marks the cell read-only. A returned Zx component is destroyed with the edit.
|
|
90
|
+
*/
|
|
91
|
+
editor?: (row: TableRow, api: TableEditorApi) => Node | {
|
|
92
|
+
toElement: () => Node;
|
|
93
|
+
destroy?: () => void;
|
|
94
|
+
};
|
|
95
|
+
/**
|
|
96
|
+
* Converts the editor's raw output into
|
|
97
|
+
* the value written back into the row.
|
|
98
|
+
*/
|
|
99
|
+
parse?: (raw: unknown, row: TableRow) => unknown;
|
|
100
|
+
/**
|
|
101
|
+
* Renders the value as the initial
|
|
102
|
+
* text of a `'text'` or `'textarea'` editor.
|
|
103
|
+
*/
|
|
104
|
+
format?: (value: unknown, row: TableRow) => string;
|
|
105
|
+
/**
|
|
106
|
+
* Commit guard. A returned
|
|
107
|
+
* string marks the cell invalid, shows the message, and refuses the commit.
|
|
108
|
+
*/
|
|
109
|
+
validate?: (value: unknown, row: TableRow) => true | string;
|
|
110
|
+
};
|
|
111
|
+
export type TableOptions = {
|
|
112
|
+
/**
|
|
113
|
+
* Column definitions.
|
|
114
|
+
*/
|
|
115
|
+
columns?: TableColumn[];
|
|
116
|
+
/**
|
|
117
|
+
* Initial rows.
|
|
118
|
+
*/
|
|
119
|
+
data?: TableRow[];
|
|
120
|
+
/**
|
|
121
|
+
* Row id accessor.
|
|
122
|
+
*/
|
|
123
|
+
rowId?: string | ((row: TableRow) => unknown);
|
|
124
|
+
/**
|
|
125
|
+
* Initial sort.
|
|
126
|
+
*/
|
|
127
|
+
sort?: {
|
|
128
|
+
id: string;
|
|
129
|
+
dir: TableSortDirection;
|
|
130
|
+
} | null;
|
|
131
|
+
/**
|
|
132
|
+
* Whether sorting reorders local rows.
|
|
133
|
+
*/
|
|
134
|
+
sortMode?: 'local' | 'server';
|
|
135
|
+
/**
|
|
136
|
+
* Row selection mode.
|
|
137
|
+
*/
|
|
138
|
+
selectable?: TableSelectionMode;
|
|
139
|
+
/**
|
|
140
|
+
* Whether column headers stick while scrolling.
|
|
141
|
+
*/
|
|
142
|
+
stickyHeader?: boolean;
|
|
143
|
+
/**
|
|
144
|
+
* Number of rows to render at first, with a control that
|
|
145
|
+
* appends the next batch on demand. A result set an ERP query returns happily — tens of thousands
|
|
146
|
+
* of rows — costs more to lay out than anyone will ever scroll through.
|
|
147
|
+
*/
|
|
148
|
+
growing?: false | number;
|
|
149
|
+
/**
|
|
150
|
+
* Width below which each row stacks into a
|
|
151
|
+
* card of label/value pairs instead of scrolling sideways. Measured on the table's own container,
|
|
152
|
+
* not the viewport, so a table inside a split pane stacks when *it* is narrow.
|
|
153
|
+
*/
|
|
154
|
+
responsive?: false | 'sm' | 'md' | 'lg' | 'xl';
|
|
155
|
+
/**
|
|
156
|
+
* Scroll-region height in pixels or CSS units.
|
|
157
|
+
*/
|
|
158
|
+
height?: number | string | null;
|
|
159
|
+
/**
|
|
160
|
+
* What to show when there are no
|
|
161
|
+
* rows; null resolves `table.empty`. A Node — an `emptyState()` with an action in it, say — is
|
|
162
|
+
* placed as given, and a function is called on each render, which is what to use when the
|
|
163
|
+
* placeholder holds live controls.
|
|
164
|
+
*/
|
|
165
|
+
emptyText?: string | Node | (() => Node | string) | null;
|
|
166
|
+
/**
|
|
167
|
+
* Additional row class callback.
|
|
168
|
+
*/
|
|
169
|
+
rowClass?: ((row: TableRow) => string) | null;
|
|
170
|
+
/**
|
|
171
|
+
* Whether alternate rows use the zebra background.
|
|
172
|
+
*/
|
|
173
|
+
zebra?: boolean;
|
|
174
|
+
/**
|
|
175
|
+
* Inline editing mode. `'cell'` edits one cell, `'row'`
|
|
176
|
+
* opens every editable cell of the row together and commits them as a unit. Editing is completely
|
|
177
|
+
* inert while this is `false`.
|
|
178
|
+
*/
|
|
179
|
+
editMode?: TableEditMode;
|
|
180
|
+
onrowclick?: (event: CustomEvent<TableRowClickDetail>) => void;
|
|
181
|
+
onrowdblclick?: (event: CustomEvent<TableRowClickDetail>) => void;
|
|
182
|
+
onsort?: (event: CustomEvent<TableSortDetail>) => void;
|
|
183
|
+
onselectionchange?: (event: CustomEvent<TableSelectionDetail>) => void;
|
|
184
|
+
ondatachange?: (event: CustomEvent<TableDataDetail>) => void;
|
|
185
|
+
/**
|
|
186
|
+
* Fired when the
|
|
187
|
+
* table crosses its `responsive` width in either direction.
|
|
188
|
+
*/
|
|
189
|
+
onstackedchange?: (event: CustomEvent<{
|
|
190
|
+
stacked: boolean;
|
|
191
|
+
}>) => void;
|
|
192
|
+
/**
|
|
193
|
+
* Fired after
|
|
194
|
+
* more rows are rendered.
|
|
195
|
+
*/
|
|
196
|
+
ongrow?: (event: CustomEvent<{
|
|
197
|
+
rendered: number;
|
|
198
|
+
total: number;
|
|
199
|
+
}>) => void;
|
|
200
|
+
oneditstart?: (event: CustomEvent<TableEditStartDetail>) => void;
|
|
201
|
+
oneditcommit?: (event: CustomEvent<TableEditCommitDetail>) => void;
|
|
202
|
+
oneditcancel?: (event: CustomEvent<TableEditCancelDetail>) => void;
|
|
203
|
+
oneditinvalid?: (event: CustomEvent<TableEditInvalidDetail>) => void;
|
|
204
|
+
};
|
|
205
|
+
export type TableRowClickDetail = {
|
|
206
|
+
row: TableRow;
|
|
207
|
+
id: unknown;
|
|
208
|
+
index: number;
|
|
209
|
+
event: Event;
|
|
210
|
+
};
|
|
211
|
+
export type TableSortDetail = {
|
|
212
|
+
id: string;
|
|
213
|
+
dir: TableSortDirection;
|
|
214
|
+
};
|
|
215
|
+
export type TableSelectionDetail = {
|
|
216
|
+
rows: TableRow[];
|
|
217
|
+
ids: unknown[];
|
|
218
|
+
};
|
|
219
|
+
export type TableDataDetail = {
|
|
220
|
+
rows: TableRow[];
|
|
221
|
+
};
|
|
222
|
+
export type TableEditStartDetail = {
|
|
223
|
+
/**
|
|
224
|
+
* Row being edited.
|
|
225
|
+
*/
|
|
226
|
+
row: TableRow;
|
|
227
|
+
/**
|
|
228
|
+
* Row id.
|
|
229
|
+
*/
|
|
230
|
+
id: unknown;
|
|
231
|
+
/**
|
|
232
|
+
* Focused column.
|
|
233
|
+
*/
|
|
234
|
+
column: TableColumn | null;
|
|
235
|
+
/**
|
|
236
|
+
* Focused column id.
|
|
237
|
+
*/
|
|
238
|
+
columnId: string;
|
|
239
|
+
/**
|
|
240
|
+
* Value the editor opened with.
|
|
241
|
+
*/
|
|
242
|
+
value: unknown;
|
|
243
|
+
};
|
|
244
|
+
export type TableEditCommitDetail = {
|
|
245
|
+
/**
|
|
246
|
+
* Row as it is before the commit.
|
|
247
|
+
*/
|
|
248
|
+
row: TableRow;
|
|
249
|
+
/**
|
|
250
|
+
* Row id.
|
|
251
|
+
*/
|
|
252
|
+
id: unknown;
|
|
253
|
+
/**
|
|
254
|
+
* Focused column.
|
|
255
|
+
*/
|
|
256
|
+
column: TableColumn | null;
|
|
257
|
+
/**
|
|
258
|
+
* Focused column id.
|
|
259
|
+
*/
|
|
260
|
+
columnId: string;
|
|
261
|
+
/**
|
|
262
|
+
* Committed value of the focused column.
|
|
263
|
+
*/
|
|
264
|
+
value: unknown;
|
|
265
|
+
/**
|
|
266
|
+
* Previous value of the focused column.
|
|
267
|
+
*/
|
|
268
|
+
previous: unknown;
|
|
269
|
+
/**
|
|
270
|
+
* Every changed cell of the row, keyed by column id.
|
|
271
|
+
*/
|
|
272
|
+
changes: Record<string, unknown>;
|
|
273
|
+
};
|
|
274
|
+
export type TableEditCancelDetail = {
|
|
275
|
+
/**
|
|
276
|
+
* Row that was being edited.
|
|
277
|
+
*/
|
|
278
|
+
row: TableRow;
|
|
279
|
+
/**
|
|
280
|
+
* Row id.
|
|
281
|
+
*/
|
|
282
|
+
id: unknown;
|
|
283
|
+
/**
|
|
284
|
+
* Focused column.
|
|
285
|
+
*/
|
|
286
|
+
column: TableColumn | null;
|
|
287
|
+
/**
|
|
288
|
+
* Focused column id.
|
|
289
|
+
*/
|
|
290
|
+
columnId: string;
|
|
291
|
+
};
|
|
292
|
+
export type TableEditInvalidDetail = {
|
|
293
|
+
/**
|
|
294
|
+
* Row being edited.
|
|
295
|
+
*/
|
|
296
|
+
row: TableRow;
|
|
297
|
+
/**
|
|
298
|
+
* Row id.
|
|
299
|
+
*/
|
|
300
|
+
id: unknown;
|
|
301
|
+
/**
|
|
302
|
+
* Rejected column.
|
|
303
|
+
*/
|
|
304
|
+
column: TableColumn | null;
|
|
305
|
+
/**
|
|
306
|
+
* Rejected column id.
|
|
307
|
+
*/
|
|
308
|
+
columnId: string;
|
|
309
|
+
/**
|
|
310
|
+
* Rejected value.
|
|
311
|
+
*/
|
|
312
|
+
value: unknown;
|
|
313
|
+
/**
|
|
314
|
+
* Validation message.
|
|
315
|
+
*/
|
|
316
|
+
message: string;
|
|
317
|
+
};
|
|
318
|
+
export type TableEditorEntry = {
|
|
319
|
+
/**
|
|
320
|
+
* Edited column.
|
|
321
|
+
*/
|
|
322
|
+
column: TableColumn;
|
|
323
|
+
/**
|
|
324
|
+
* Resolved editor type.
|
|
325
|
+
*/
|
|
326
|
+
type: TableEditorType;
|
|
327
|
+
/**
|
|
328
|
+
* Edited cell.
|
|
329
|
+
*/
|
|
330
|
+
td: HTMLTableCellElement;
|
|
331
|
+
/**
|
|
332
|
+
* Element the editor lives in.
|
|
333
|
+
*/
|
|
334
|
+
host: HTMLElement;
|
|
335
|
+
/**
|
|
336
|
+
* Focusable control inside the editor.
|
|
337
|
+
*/
|
|
338
|
+
control: HTMLElement | null;
|
|
339
|
+
/**
|
|
340
|
+
* Zx component instance, when the editor uses one.
|
|
341
|
+
*/
|
|
342
|
+
component: {
|
|
343
|
+
destroy: () => void;
|
|
344
|
+
} | null;
|
|
345
|
+
/**
|
|
346
|
+
* Reads the editor's current value.
|
|
347
|
+
*/
|
|
348
|
+
read: () => unknown;
|
|
349
|
+
/**
|
|
350
|
+
* Destroys the editor and removes its DOM.
|
|
351
|
+
*/
|
|
352
|
+
destroy: () => void;
|
|
353
|
+
};
|
|
354
|
+
/**
|
|
355
|
+
* Semantic, sortable data table with optional single or checkbox-based multi-selection and
|
|
356
|
+
* opt-in inline cell or row editing.
|
|
357
|
+
* @fires Table#rowclick
|
|
358
|
+
* @fires Table#rowdblclick
|
|
359
|
+
* @fires Table#sort
|
|
360
|
+
* @fires Table#selectionchange
|
|
361
|
+
* @fires Table#datachange
|
|
362
|
+
* @fires Table#editstart
|
|
363
|
+
* @fires Table#editcommit
|
|
364
|
+
* @fires Table#editcancel
|
|
365
|
+
* @fires Table#editinvalid
|
|
366
|
+
* @extends {Component<TableOptions>}
|
|
367
|
+
*/
|
|
368
|
+
export declare class Table extends Component<TableOptions> {
|
|
369
|
+
_originalChildren: ChildNode[];
|
|
370
|
+
_columns: {
|
|
371
|
+
id: string;
|
|
372
|
+
label: string;
|
|
373
|
+
sortable?: boolean;
|
|
374
|
+
width?: string;
|
|
375
|
+
align?: 'start' | 'center' | 'end' | 'left' | 'right';
|
|
376
|
+
render?: (row: TableRow, rowIndex: number) => Node | string | number | null | undefined;
|
|
377
|
+
sortValue?: (row: TableRow) => unknown;
|
|
378
|
+
headerTitle?: string;
|
|
379
|
+
popin?: boolean;
|
|
380
|
+
editable?: boolean | TableEditorType | ((row: TableRow) => boolean | TableEditorType);
|
|
381
|
+
options?: TableEditorOption[] | Record<string, string> | ((row: TableRow) => TableEditorOption[] | Record<string, string>);
|
|
382
|
+
editorProps?: Record<string, unknown>;
|
|
383
|
+
editor?: (row: TableRow, api: TableEditorApi) => Node | {
|
|
384
|
+
toElement: () => Node;
|
|
385
|
+
destroy?: () => void;
|
|
386
|
+
};
|
|
387
|
+
parse?: (raw: unknown, row: TableRow) => unknown;
|
|
388
|
+
format?: (value: unknown, row: TableRow) => string;
|
|
389
|
+
validate?: (value: unknown, row: TableRow) => true | string;
|
|
390
|
+
}[];
|
|
391
|
+
_data: any[] | TableRow[];
|
|
392
|
+
_selected: Set<any>;
|
|
393
|
+
_selectionAnchorId: any;
|
|
394
|
+
_sort: any;
|
|
395
|
+
_rowMeta: WeakMap<object, any>;
|
|
396
|
+
_rowElements: Map<any, any>;
|
|
397
|
+
_restored: boolean;
|
|
398
|
+
_editMode: TableEditMode;
|
|
399
|
+
_edit: {
|
|
400
|
+
id: unknown;
|
|
401
|
+
columnId: string;
|
|
402
|
+
row: any;
|
|
403
|
+
cells: Map<string, TableEditorEntry>;
|
|
404
|
+
tr: any;
|
|
405
|
+
};
|
|
406
|
+
_editMessage: HTMLElement;
|
|
407
|
+
_stacked: any;
|
|
408
|
+
_width: import("../../core/breakpoint.js").BreakpointController;
|
|
409
|
+
_growStep: number;
|
|
410
|
+
_rendered: number;
|
|
411
|
+
_more: HTMLElement;
|
|
412
|
+
_rovingKey: {
|
|
413
|
+
id: unknown;
|
|
414
|
+
columnId: string;
|
|
415
|
+
};
|
|
416
|
+
_rovingCell: any;
|
|
417
|
+
_rovingMatched: boolean;
|
|
418
|
+
_table: HTMLElement;
|
|
419
|
+
_colgroup: HTMLElement;
|
|
420
|
+
_thead: HTMLElement;
|
|
421
|
+
_tbody: HTMLElement;
|
|
422
|
+
_scroll: HTMLElement;
|
|
423
|
+
_selectAll: HTMLElement;
|
|
424
|
+
_headers: Map<any, any>;
|
|
425
|
+
static cssName: string;
|
|
426
|
+
/** @type {TableOptions} */
|
|
427
|
+
static defaults: TableOptions;
|
|
428
|
+
/**
|
|
429
|
+
* Creates a table around a target or creates a new root when target is null.
|
|
430
|
+
* @param {Element|string|null} target Existing root, selector, or null.
|
|
431
|
+
* @param {TableOptions} [options={}] Table options.
|
|
432
|
+
*/
|
|
433
|
+
constructor(target: Element | string | null, options?: TableOptions);
|
|
434
|
+
/** @returns {HTMLElement} Table root. */
|
|
435
|
+
render(): HTMLElement;
|
|
436
|
+
/**
|
|
437
|
+
* Toggles a loading state. While loading, the body is dimmed, an indeterminate progress bar is
|
|
438
|
+
* shown, and `aria-busy` is set — a lightweight take on the busy/skeleton pattern used by
|
|
439
|
+
* enterprise tables (SAP UI5, Salesforce SLDS). Call `setLoading(false)` (or `setData`) when done.
|
|
440
|
+
* @param {boolean} [loading=true] Whether the table is loading.
|
|
441
|
+
* @returns {this}
|
|
442
|
+
*/
|
|
443
|
+
setLoading(loading?: boolean): this;
|
|
444
|
+
/**
|
|
445
|
+
* Replaces all rows.
|
|
446
|
+
* @param {TableRow[]} rows New rows.
|
|
447
|
+
* @returns {this}
|
|
448
|
+
* @fires Table#datachange
|
|
449
|
+
* @fires Table#editcancel
|
|
450
|
+
*/
|
|
451
|
+
setData(rows: TableRow[]): this;
|
|
452
|
+
/**
|
|
453
|
+
* Appends rows to the current data.
|
|
454
|
+
* @param {TableRow[]} rows Rows to append.
|
|
455
|
+
* @returns {this}
|
|
456
|
+
* @fires Table#datachange
|
|
457
|
+
* @fires Table#editcancel
|
|
458
|
+
*/
|
|
459
|
+
addData(rows: TableRow[]): this;
|
|
460
|
+
/**
|
|
461
|
+
* Replaces the row identified by its current id.
|
|
462
|
+
* @param {unknown} id Existing row id.
|
|
463
|
+
* @param {TableRow} row Replacement row.
|
|
464
|
+
* @returns {this}
|
|
465
|
+
* @fires Table#datachange
|
|
466
|
+
* @fires Table#editcancel
|
|
467
|
+
*/
|
|
468
|
+
updateRow(id: unknown, row: TableRow): this;
|
|
469
|
+
/**
|
|
470
|
+
* Removes the row with the given id.
|
|
471
|
+
* @param {unknown} id Row id.
|
|
472
|
+
* @returns {this}
|
|
473
|
+
* @fires Table#selectionchange
|
|
474
|
+
* @fires Table#datachange
|
|
475
|
+
* @fires Table#editcancel
|
|
476
|
+
*/
|
|
477
|
+
removeRow(id: unknown): this;
|
|
478
|
+
/**
|
|
479
|
+
* Returns a row by id.
|
|
480
|
+
* @param {unknown} id Row id.
|
|
481
|
+
* @returns {TableRow|null} Matching row or null.
|
|
482
|
+
*/
|
|
483
|
+
getRow(id: unknown): TableRow | null;
|
|
484
|
+
/** @returns {TableRow[]} Shallow copy of current rows in display order. */
|
|
485
|
+
getData(): TableRow[];
|
|
486
|
+
/**
|
|
487
|
+
* Removes all rows.
|
|
488
|
+
* @returns {this}
|
|
489
|
+
* @fires Table#selectionchange
|
|
490
|
+
* @fires Table#datachange
|
|
491
|
+
* @fires Table#editcancel
|
|
492
|
+
*/
|
|
493
|
+
empty(): this;
|
|
494
|
+
/**
|
|
495
|
+
* Activates a column sort. Local mode stably reorders data; server mode only updates the
|
|
496
|
+
* header state and emits the request event.
|
|
497
|
+
* @param {string} id Column id.
|
|
498
|
+
* @param {TableSortDirection} [dir] Direction; omitted toggles the current column.
|
|
499
|
+
* @param {{silent?: boolean}} [options={}] Event options.
|
|
500
|
+
* @returns {this}
|
|
501
|
+
* @fires Table#sort
|
|
502
|
+
* @fires Table#editcancel
|
|
503
|
+
*/
|
|
504
|
+
setSort(id: string, dir?: TableSortDirection, options?: {
|
|
505
|
+
silent?: boolean;
|
|
506
|
+
}): this;
|
|
507
|
+
/** @returns {TableRow[]} Selected rows in current display order. */
|
|
508
|
+
getSelection(): TableRow[];
|
|
509
|
+
/**
|
|
510
|
+
* Replaces selected ids, ignoring ids absent from the current data.
|
|
511
|
+
* @param {unknown[]} ids Row ids.
|
|
512
|
+
* @returns {this}
|
|
513
|
+
* @fires Table#selectionchange
|
|
514
|
+
*/
|
|
515
|
+
setSelection(ids: unknown[]): this;
|
|
516
|
+
/**
|
|
517
|
+
* Clears all selected rows.
|
|
518
|
+
* @returns {this}
|
|
519
|
+
* @fires Table#selectionchange
|
|
520
|
+
*/
|
|
521
|
+
clearSelection(): this;
|
|
522
|
+
/**
|
|
523
|
+
* Opens the editor for a cell. No-op unless the table runs with `editMode` and the column
|
|
524
|
+
* resolves to an editable type for that row. In `'row'` mode every editable cell of the row is
|
|
525
|
+
* opened and `columnId` only decides which editor receives focus. Any other open edit is
|
|
526
|
+
* committed first.
|
|
527
|
+
* @param {unknown} rowId Row id.
|
|
528
|
+
* @param {string} columnId Column id.
|
|
529
|
+
* @returns {this}
|
|
530
|
+
* @fires Table#editstart
|
|
531
|
+
*/
|
|
532
|
+
startEdit(rowId: unknown, columnId: string): this;
|
|
533
|
+
/**
|
|
534
|
+
* Commits the open edit. Validation runs first: the first column whose `validate` rejects marks
|
|
535
|
+
* its cell invalid, emits `editinvalid`, and leaves the editor open. A listener may
|
|
536
|
+
* `preventDefault()` the `editcommit` event — e.g. while a server round-trip is pending — which
|
|
537
|
+
* also keeps the editor open. Otherwise every changed cell is written back through `updateRow()`,
|
|
538
|
+
* so `datachange` fires exactly as it does for a programmatic row update.
|
|
539
|
+
* @returns {this}
|
|
540
|
+
* @fires Table#editcommit
|
|
541
|
+
* @fires Table#editinvalid
|
|
542
|
+
* @fires Table#datachange
|
|
543
|
+
*/
|
|
544
|
+
commitEdit(): this;
|
|
545
|
+
/**
|
|
546
|
+
* Closes the open edit without writing anything back and returns focus to the cell.
|
|
547
|
+
* @returns {this}
|
|
548
|
+
* @fires Table#editcancel
|
|
549
|
+
*/
|
|
550
|
+
cancelEdit(): this;
|
|
551
|
+
/** @returns {boolean} Whether a cell or row is currently open for editing. */
|
|
552
|
+
isEditing(): boolean;
|
|
553
|
+
/** @returns {{id: unknown, columnId: string}|null} Row id and focused column id, or null. */
|
|
554
|
+
getEditing(): {
|
|
555
|
+
id: unknown;
|
|
556
|
+
columnId: string;
|
|
557
|
+
} | null;
|
|
558
|
+
/**
|
|
559
|
+
* The rows currently rendered — all of them unless `growing` is on.
|
|
560
|
+
* @returns {TableRow[]}
|
|
561
|
+
*/
|
|
562
|
+
_visibleData(): TableRow[];
|
|
563
|
+
/**
|
|
564
|
+
* Renders the next batch of rows.
|
|
565
|
+
* @param {number} [count] How many to add; defaults to the configured batch size.
|
|
566
|
+
* @returns {this}
|
|
567
|
+
* @fires Table#grow
|
|
568
|
+
*/
|
|
569
|
+
growBy(count?: number): this;
|
|
570
|
+
/**
|
|
571
|
+
* Renders every remaining row.
|
|
572
|
+
* @returns {this}
|
|
573
|
+
* @fires Table#grow
|
|
574
|
+
*/
|
|
575
|
+
showAll(): this;
|
|
576
|
+
/**
|
|
577
|
+
* How many rows are currently rendered.
|
|
578
|
+
* @returns {number}
|
|
579
|
+
*/
|
|
580
|
+
getRenderedCount(): number;
|
|
581
|
+
/**
|
|
582
|
+
* Keeps the "show more" control in step with what is rendered.
|
|
583
|
+
*
|
|
584
|
+
* The control sits outside the table rather than in a `<tfoot>` row spanning every column: it is
|
|
585
|
+
* a command, not data, and a button inside the grid would be reachable by the row navigation
|
|
586
|
+
* keys as though it were a cell.
|
|
587
|
+
* @returns {void}
|
|
588
|
+
*/
|
|
589
|
+
_syncGrowing(): void;
|
|
590
|
+
/**
|
|
591
|
+
* Resolves a localized message, falling back to a built-in template.
|
|
592
|
+
* @param {string} key Message key.
|
|
593
|
+
* @param {string} fallback Template used when the host has no translation.
|
|
594
|
+
* @param {unknown[]} args Positional interpolation values.
|
|
595
|
+
* @returns {string}
|
|
596
|
+
*/
|
|
597
|
+
_message(key: string, fallback: string, args: unknown[]): string;
|
|
598
|
+
/**
|
|
599
|
+
* Watches the table's own width and stacks the rows below `responsive`.
|
|
600
|
+
*
|
|
601
|
+
* The width comes from `onBreakpoint` observing this element rather than the window, which is the
|
|
602
|
+
* whole point of the option: a table inside a split pane or a modal has no idea how wide the
|
|
603
|
+
* viewport is, and a media query would stack it on a phone while leaving it unreadable in a
|
|
604
|
+
* 320px pane on a desktop.
|
|
605
|
+
* @returns {void}
|
|
606
|
+
*/
|
|
607
|
+
_watchWidth(): void;
|
|
608
|
+
/**
|
|
609
|
+
* Enters or leaves stacked mode.
|
|
610
|
+
* @param {boolean} stacked Whether rows should stack.
|
|
611
|
+
* @returns {void}
|
|
612
|
+
* @fires Table#stackedchange
|
|
613
|
+
*/
|
|
614
|
+
_setStacked(stacked: boolean): void;
|
|
615
|
+
/**
|
|
616
|
+
* States the table roles explicitly while stacked, and removes them again on the way out.
|
|
617
|
+
*
|
|
618
|
+
* Stacking works by changing `display` on the table elements, and a table whose display is not
|
|
619
|
+
* `table` loses its implicit ARIA roles — leaving a screen reader with a pile of generic blocks
|
|
620
|
+
* where a table used to be. The roles are only asserted while the layout has taken them away.
|
|
621
|
+
* @param {boolean} stacked Whether the roles should be present.
|
|
622
|
+
* @returns {void}
|
|
623
|
+
*/
|
|
624
|
+
_applyStackedRoles(stacked: boolean): void;
|
|
625
|
+
/**
|
|
626
|
+
* Reports whether the rows are currently stacked.
|
|
627
|
+
* @returns {boolean}
|
|
628
|
+
*/
|
|
629
|
+
isStacked(): boolean;
|
|
630
|
+
/** Restores an enhanced target and releases all component listeners. @returns {void} */
|
|
631
|
+
destroy(): void;
|
|
632
|
+
/** @returns {void} */
|
|
633
|
+
_renderColumns(): void;
|
|
634
|
+
/** @returns {void} */
|
|
635
|
+
_renderHeader(): void;
|
|
636
|
+
/** @returns {void} @fires Table#editcancel */
|
|
637
|
+
_renderBody(): void;
|
|
638
|
+
/**
|
|
639
|
+
* What to put in the empty row.
|
|
640
|
+
*
|
|
641
|
+
* An empty table is a screen in its own right — the place to say why there is nothing and what to
|
|
642
|
+
* do about it — so this takes a node as readily as a string. A function is re-called on every
|
|
643
|
+
* render, which matters when the placeholder contains a button: reusing one node would move the
|
|
644
|
+
* same element between renders and quietly share its listeners.
|
|
645
|
+
* @returns {Node|string}
|
|
646
|
+
*/
|
|
647
|
+
_emptyContent(): Node | string;
|
|
648
|
+
/** @param {TableRow} row @param {number} index @returns {HTMLTableRowElement} */
|
|
649
|
+
_createRow(row: TableRow, index: number): HTMLTableRowElement;
|
|
650
|
+
/**
|
|
651
|
+
* Fills a cell with the column's rendered value, replacing anything already in it.
|
|
652
|
+
* @param {HTMLTableCellElement} cell Target cell.
|
|
653
|
+
* @param {TableColumn} column Column definition.
|
|
654
|
+
* @param {TableRow} row Row data.
|
|
655
|
+
* @param {number} index Row index.
|
|
656
|
+
* @returns {void}
|
|
657
|
+
*/
|
|
658
|
+
_renderCellContent(cell: HTMLTableCellElement, column: TableColumn, row: TableRow, index: number): void;
|
|
659
|
+
/** @param {MouseEvent} event @returns {void} */
|
|
660
|
+
_handleBodyClick(event: MouseEvent): void;
|
|
661
|
+
/** @param {MouseEvent} event @returns {void} @fires Table#editstart */
|
|
662
|
+
_handleBodyDoubleClick(event: MouseEvent): void;
|
|
663
|
+
/**
|
|
664
|
+
* Builds the editor for one cell and mounts it over the cell's content.
|
|
665
|
+
* @param {HTMLTableCellElement} td Cell to edit.
|
|
666
|
+
* @param {TableColumn} column Column definition.
|
|
667
|
+
* @param {TableRow} row Row being edited.
|
|
668
|
+
* @param {number} index Row index.
|
|
669
|
+
* @returns {TableEditorEntry|null} Editor entry, or null when the column is read-only.
|
|
670
|
+
*/
|
|
671
|
+
_createEditor(td: HTMLTableCellElement, column: TableColumn, row: TableRow, index: number): TableEditorEntry | null;
|
|
672
|
+
/**
|
|
673
|
+
* Moves focus into one of the open editors.
|
|
674
|
+
* @param {string} columnId Column id.
|
|
675
|
+
* @returns {void}
|
|
676
|
+
*/
|
|
677
|
+
_focusEditor(columnId: string): void;
|
|
678
|
+
/**
|
|
679
|
+
* Moves focus back onto a cell.
|
|
680
|
+
* @param {unknown} id Row id.
|
|
681
|
+
* @param {string} columnId Column id.
|
|
682
|
+
* @returns {void}
|
|
683
|
+
*/
|
|
684
|
+
_focusCell(id: unknown, columnId: string): void;
|
|
685
|
+
/** Destroys every open editor and restores the cells they covered. @returns {void} */
|
|
686
|
+
_teardownEdit(): void;
|
|
687
|
+
/**
|
|
688
|
+
* Cancels the open edit, optionally returning focus to its cell.
|
|
689
|
+
* @param {{focus?: boolean}} [options={}] Whether focus returns to the edited cell.
|
|
690
|
+
* @returns {void}
|
|
691
|
+
* @fires Table#editcancel
|
|
692
|
+
*/
|
|
693
|
+
_abortEdit({ focus }?: {
|
|
694
|
+
focus?: boolean;
|
|
695
|
+
}): void;
|
|
696
|
+
/** @returns {boolean} Whether focus currently sits inside this table. */
|
|
697
|
+
_editHasFocus(): boolean;
|
|
698
|
+
/**
|
|
699
|
+
* Marks one edited cell invalid and announces the message.
|
|
700
|
+
* @param {string} columnId Rejected column id.
|
|
701
|
+
* @param {string} message Validation message.
|
|
702
|
+
* @returns {void}
|
|
703
|
+
*/
|
|
704
|
+
_markInvalid(columnId: string, message: string): void;
|
|
705
|
+
/** Clears the invalid marks and the validation message. @returns {void} */
|
|
706
|
+
_clearInvalid(): void;
|
|
707
|
+
/**
|
|
708
|
+
* Handles Enter/F2 on a focused cell and Escape/Enter/Tab inside an open editor.
|
|
709
|
+
* @param {KeyboardEvent} event Keydown event.
|
|
710
|
+
* @returns {void}
|
|
711
|
+
*/
|
|
712
|
+
_handleEditKeydown(event: KeyboardEvent): void;
|
|
713
|
+
/**
|
|
714
|
+
* Commits the current editor and moves the edit one editable cell forward or backward.
|
|
715
|
+
* @param {KeyboardEvent} event Tab keydown.
|
|
716
|
+
* @returns {void}
|
|
717
|
+
*/
|
|
718
|
+
_moveEdit(event: KeyboardEvent): void;
|
|
719
|
+
/**
|
|
720
|
+
* Finds the next editable cell, wrapping from the end of a row into the next row.
|
|
721
|
+
* @param {number} rowIndex Row index to start from.
|
|
722
|
+
* @param {string} columnId Column id to start from.
|
|
723
|
+
* @param {number} direction `1` forward, `-1` backward.
|
|
724
|
+
* @returns {{id: unknown, columnId: string, index: number}|null} Next cell, or null at the end.
|
|
725
|
+
*/
|
|
726
|
+
_nextEditableCell(rowIndex: number, columnId: string, direction: number): {
|
|
727
|
+
id: unknown;
|
|
728
|
+
columnId: string;
|
|
729
|
+
index: number;
|
|
730
|
+
} | null;
|
|
731
|
+
/** @param {Event} event @returns {void} */
|
|
732
|
+
_handleEditFocusIn(event: Event): void;
|
|
733
|
+
/** @param {Event} event @returns {void} @fires Table#editcommit */
|
|
734
|
+
_handleDocumentPointerDown(event: Event): void;
|
|
735
|
+
/**
|
|
736
|
+
* Keeps exactly one editable cell in the tab order, preferring the last focused one.
|
|
737
|
+
* @param {HTMLTableCellElement} cell Newly rendered editable cell.
|
|
738
|
+
* @param {unknown} id Row id.
|
|
739
|
+
* @param {string} columnId Column id.
|
|
740
|
+
* @returns {void}
|
|
741
|
+
*/
|
|
742
|
+
_offerRovingCell(cell: HTMLTableCellElement, id: unknown, columnId: string): void;
|
|
743
|
+
/** @param {HTMLTableCellElement} cell @param {unknown} id @param {string} columnId @returns {void} */
|
|
744
|
+
_setRovingCell(cell: HTMLTableCellElement, id: unknown, columnId: string): void;
|
|
745
|
+
/**
|
|
746
|
+
* Resolves a message key with an English fallback for hosts without a translator.
|
|
747
|
+
* @param {string} key Message key.
|
|
748
|
+
* @param {string} fallback Text used when the key is untranslated.
|
|
749
|
+
* @returns {string}
|
|
750
|
+
*/
|
|
751
|
+
_msgOr(key: string, fallback: string): string;
|
|
752
|
+
/** @param {{row: TableRow, id: unknown, index: number}} meta @param {boolean} checked @param {boolean} shiftKey @returns {void} */
|
|
753
|
+
_toggleMultiSelection(meta: {
|
|
754
|
+
row: TableRow;
|
|
755
|
+
id: unknown;
|
|
756
|
+
index: number;
|
|
757
|
+
}, checked: boolean, shiftKey: boolean): void;
|
|
758
|
+
/** @returns {void} */
|
|
759
|
+
_syncSelection(): void;
|
|
760
|
+
/** @returns {void} */
|
|
761
|
+
_syncSelectAll(): void;
|
|
762
|
+
/** @returns {void} */
|
|
763
|
+
_syncSortHeader(): void;
|
|
764
|
+
/** @returns {void} */
|
|
765
|
+
_sortData(): void;
|
|
766
|
+
/** @returns {boolean} Whether selection changed. */
|
|
767
|
+
_pruneSelection(): boolean;
|
|
768
|
+
/** @param {TableRow} row @returns {unknown} */
|
|
769
|
+
_idFor(row: TableRow): unknown;
|
|
770
|
+
/** @returns {void} @fires Table#selectionchange */
|
|
771
|
+
_emitSelectionChange(): void;
|
|
772
|
+
/** @returns {void} @fires Table#datachange */
|
|
773
|
+
_emitDataChange(): void;
|
|
774
|
+
}
|
|
775
|
+
/**
|
|
776
|
+
* Row activation event.
|
|
777
|
+
* @event Table#rowclick
|
|
778
|
+
* @type {CustomEvent<TableRowClickDetail>}
|
|
779
|
+
*/
|
|
780
|
+
/**
|
|
781
|
+
* Row double-activation event.
|
|
782
|
+
* @event Table#rowdblclick
|
|
783
|
+
* @type {CustomEvent<TableRowClickDetail>}
|
|
784
|
+
*/
|
|
785
|
+
/** @event Table#sort @type {CustomEvent<TableSortDetail>} */
|
|
786
|
+
/** @event Table#selectionchange @type {CustomEvent<TableSelectionDetail>} */
|
|
787
|
+
/** @event Table#datachange @type {CustomEvent<TableDataDetail>} */
|
|
788
|
+
/**
|
|
789
|
+
* Editor opened for a cell (or, in row mode, for the row).
|
|
790
|
+
* @event Table#editstart
|
|
791
|
+
* @type {CustomEvent<TableEditStartDetail>}
|
|
792
|
+
*/
|
|
793
|
+
/**
|
|
794
|
+
* Values are about to be written back. Cancelable: `preventDefault()` keeps the editor open, which
|
|
795
|
+
* lets a server round-trip reject the change.
|
|
796
|
+
* @event Table#editcommit
|
|
797
|
+
* @type {CustomEvent<TableEditCommitDetail>}
|
|
798
|
+
*/
|
|
799
|
+
/**
|
|
800
|
+
* Editing ended without writing anything back — Escape, `cancelEdit()`, or a data refresh
|
|
801
|
+
* (`setData`, `setSort`, …) that replaced the edited rows.
|
|
802
|
+
* @event Table#editcancel
|
|
803
|
+
* @type {CustomEvent<TableEditCancelDetail>}
|
|
804
|
+
*/
|
|
805
|
+
/**
|
|
806
|
+
* A column's `validate` rejected the commit.
|
|
807
|
+
* @event Table#editinvalid
|
|
808
|
+
* @type {CustomEvent<TableEditInvalidDetail>}
|
|
809
|
+
*/
|
|
810
|
+
/**
|
|
811
|
+
* Resolves the editor type of a column for one row.
|
|
812
|
+
*
|
|
813
|
+
* `column.editor` wins over `column.editable`, except that a per-row `editable` function returning
|
|
814
|
+
* `false` still marks the cell read-only. `editable: true` means `'text'`; unknown type names are
|
|
815
|
+
* treated as not editable.
|
|
816
|
+
* @param {TableColumn} column Column definition.
|
|
817
|
+
* @param {TableRow} row Row the cell belongs to.
|
|
818
|
+
* @returns {TableEditorType|false} Editor type, or false when the cell is read-only.
|
|
819
|
+
*/
|
|
820
|
+
export declare function resolveEditable(column: TableColumn, row: TableRow): TableEditorType | false;
|
|
821
|
+
/**
|
|
822
|
+
* Normalizes `column.options` into `[{value, label}]`. Object maps always yield string values,
|
|
823
|
+
* because object keys are strings; use the array form to keep other value types.
|
|
824
|
+
* @param {TableEditorOption[]|Record<string, string>|((row: TableRow) => unknown)|undefined} source Option source.
|
|
825
|
+
* @param {TableRow} row Row the options are resolved for.
|
|
826
|
+
* @returns {TableEditorOption[]} Normalized options.
|
|
827
|
+
*/
|
|
828
|
+
export declare function normalizeEditorOptions(source: TableEditorOption[] | Record<string, string> | ((row: TableRow) => unknown) | undefined, row: TableRow): TableEditorOption[];
|
|
829
|
+
/**
|
|
830
|
+
* Renders a value as the initial text of a text or textarea editor.
|
|
831
|
+
* @param {TableColumn} column Column definition.
|
|
832
|
+
* @param {unknown} value Cell value.
|
|
833
|
+
* @param {TableRow} row Row the cell belongs to.
|
|
834
|
+
* @returns {string} Editor text.
|
|
835
|
+
*/
|
|
836
|
+
export declare function formatCellValue(column: TableColumn, value: unknown, row: TableRow): string;
|
|
837
|
+
/**
|
|
838
|
+
* Converts an editor's raw output into the value written back into the row.
|
|
839
|
+
* @param {TableColumn} column Column definition.
|
|
840
|
+
* @param {unknown} raw Editor output.
|
|
841
|
+
* @param {TableRow} row Row the cell belongs to.
|
|
842
|
+
* @returns {unknown} Value for the row.
|
|
843
|
+
*/
|
|
844
|
+
export declare function parseCellValue(column: TableColumn, raw: unknown, row: TableRow): unknown;
|
|
845
|
+
/**
|
|
846
|
+
* Compares two cell values, treating equal-timestamp dates as unchanged.
|
|
847
|
+
* @param {unknown} left First value.
|
|
848
|
+
* @param {unknown} right Second value.
|
|
849
|
+
* @returns {boolean} Whether the values are equal.
|
|
850
|
+
*/
|
|
851
|
+
export declare function valuesEqual(left: unknown, right: unknown): boolean;
|
|
852
|
+
/**
|
|
853
|
+
* Diffs edited values against a row and returns only what actually changed. This is the `changes`
|
|
854
|
+
* map carried by `editcommit`; in row mode it holds every changed cell of the row.
|
|
855
|
+
* @param {TableRow} row Row before the commit.
|
|
856
|
+
* @param {Record<string, unknown>} values Edited values keyed by column id.
|
|
857
|
+
* @returns {Record<string, unknown>} Changed values keyed by column id.
|
|
858
|
+
*/
|
|
859
|
+
export declare function diffChanges(row: TableRow, values: Record<string, unknown>): Record<string, unknown>;
|
|
860
|
+
/**
|
|
861
|
+
* Runs the columns' `validate` callbacks in column order and stops at the first rejection, so a
|
|
862
|
+
* later validator never runs once one has failed.
|
|
863
|
+
* @param {Record<string, unknown>} values Edited values keyed by column id.
|
|
864
|
+
* @param {TableColumn[]} columns Columns to validate, in order.
|
|
865
|
+
* @param {TableRow} row Row being edited.
|
|
866
|
+
* @param {string} [fallbackMessage='Invalid value'] Message used when a validator returns `false`.
|
|
867
|
+
* @returns {{columnId: string, message: string}|null} First rejection, or null when all pass.
|
|
868
|
+
*/
|
|
869
|
+
export declare function firstValidationError(values: Record<string, unknown>, columns: TableColumn[], row: TableRow, fallbackMessage?: string): {
|
|
870
|
+
columnId: string;
|
|
871
|
+
message: string;
|
|
872
|
+
} | null;
|