@fusion.dev/helix-headless 0.144.0 → 0.146.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/custom-elements.json +15195 -4240
- package/dist/accordion/item/accordion-item.d.ts +62 -12
- package/dist/accordion/item/accordion-item.js +41 -10
- package/dist/accordion/root/accordion-root.d.ts +14 -5
- package/dist/accordion/root/accordion-root.js +7 -1
- package/dist/announcement/root/announcement-root.d.ts +24 -3
- package/dist/announcement/root/announcement-root.js +39 -2
- package/dist/app-header/root/app-header-root.d.ts +12 -0
- package/dist/app-header/root/app-header-root.js +13 -1
- package/dist/app-header/sectioning.d.ts +9 -0
- package/dist/app-header/sectioning.js +27 -0
- package/dist/avatar/group/avatar-group.d.ts +20 -14
- package/dist/avatar/group/avatar-group.js +17 -19
- package/dist/badge/root/badge-root.d.ts +3 -1
- package/dist/badge/root/badge-root.js +2 -2
- package/dist/bar-chart/root/bar-chart-root.d.ts +18 -1
- package/dist/bar-chart/root/bar-chart-root.js +52 -15
- package/dist/bar-chart/stack.d.ts +15 -0
- package/dist/bar-chart/stack.js +19 -0
- package/dist/breadcrumbs/root/breadcrumbs-root.d.ts +57 -1
- package/dist/breadcrumbs/root/breadcrumbs-root.js +73 -3
- package/dist/button/root/button-root.d.ts +26 -0
- package/dist/button/root/button-root.js +38 -18
- package/dist/button-group/root/button-group-root.d.ts +2 -1
- package/dist/button-group/root/button-group-root.js +5 -1
- package/dist/canvas/node/canvas-node.d.ts +4 -3
- package/dist/canvas/node/canvas-node.js +3 -2
- package/dist/canvas/root/canvas-root.d.ts +38 -3
- package/dist/canvas/root/canvas-root.js +123 -42
- package/dist/card/root/card-root.d.ts +24 -3
- package/dist/card/root/card-root.js +20 -8
- package/dist/carousel/root/carousel-root.d.ts +133 -4
- package/dist/carousel/root/carousel-root.js +174 -24
- package/dist/carousel/stops.d.ts +20 -0
- package/dist/carousel/stops.js +30 -0
- package/dist/chat/composer/chat-composer.d.ts +38 -6
- package/dist/chat/composer/chat-composer.js +42 -9
- package/dist/chat/message/chat-message.d.ts +32 -1
- package/dist/chat/message/chat-message.js +27 -10
- package/dist/chat/naming.d.ts +26 -0
- package/dist/chat/naming.js +14 -0
- package/dist/chat/root/chat-root.d.ts +58 -0
- package/dist/chat/root/chat-root.js +43 -3
- package/dist/checkbox/root/checkbox-root.d.ts +20 -0
- package/dist/checkbox/root/checkbox-root.js +14 -1
- package/dist/checkbox-group/root/checkbox-group-root.d.ts +8 -2
- package/dist/checkbox-group/root/checkbox-group-root.js +12 -10
- package/dist/checkbox-group/select-all.d.ts +27 -0
- package/dist/checkbox-group/select-all.js +12 -0
- package/dist/code-block/highlight.d.ts +15 -0
- package/dist/code-block/highlight.js +4 -0
- package/dist/code-block/root/code-block-root.d.ts +57 -2
- package/dist/code-block/root/code-block-root.js +63 -8
- package/dist/color-input/root/color-input-root.d.ts +3 -0
- package/dist/color-input/root/color-input-root.js +6 -3
- package/dist/color-picker/root/color-picker-root.d.ts +33 -4
- package/dist/color-picker/root/color-picker-root.js +80 -21
- package/dist/color-picker/swatches.d.ts +12 -0
- package/dist/color-picker/swatches.js +26 -0
- package/dist/combobox/root/combobox-root.d.ts +43 -0
- package/dist/combobox/root/combobox-root.js +79 -15
- package/dist/command/root/command-root.d.ts +16 -1
- package/dist/command/root/command-root.js +22 -4
- package/dist/copy-button/root/copy-button-root.d.ts +26 -1
- package/dist/copy-button/root/copy-button-root.js +12 -5
- package/dist/data-table/index.d.ts +1 -1
- package/dist/data-table/index.js +1 -1
- package/dist/data-table/keys.d.ts +24 -0
- package/dist/data-table/keys.js +24 -0
- package/dist/data-table/root/data-table-root.d.ts +170 -13
- package/dist/data-table/root/data-table-root.js +294 -52
- package/dist/data-table/tree.d.ts +55 -0
- package/dist/data-table/tree.js +54 -0
- package/dist/date-input/root/date-input-root.d.ts +3 -1
- package/dist/date-input/root/date-input-root.js +18 -7
- package/dist/date-picker/root/date-picker-root.js +12 -6
- package/dist/description-list/item/description-list-item.d.ts +17 -2
- package/dist/description-list/item/description-list-item.js +15 -2
- package/dist/description-list/root/description-list-root.d.ts +27 -1
- package/dist/description-list/root/description-list-root.js +26 -1
- package/dist/dialog/description.js +15 -1
- package/dist/dialog/root/dialog-root.d.ts +8 -2
- package/dist/dialog/root/dialog-root.js +16 -1
- package/dist/divider/root/divider-root.d.ts +3 -0
- package/dist/divider/root/divider-root.js +2 -1
- package/dist/donut-chart/root/donut-chart-root.d.ts +31 -0
- package/dist/donut-chart/root/donut-chart-root.js +48 -1
- package/dist/drawer/reveal.d.ts +8 -0
- package/dist/drawer/reveal.js +1 -0
- package/dist/drawer/root/drawer-root.d.ts +59 -0
- package/dist/drawer/root/drawer-root.js +63 -4
- package/dist/drilldown/item/drilldown-item.d.ts +11 -6
- package/dist/drilldown/item/drilldown-item.js +8 -5
- package/dist/drilldown/root/drilldown-root.d.ts +29 -0
- package/dist/drilldown/root/drilldown-root.js +28 -5
- package/dist/element-events.generated.js +83 -12
- package/dist/empty/root/empty-root.d.ts +3 -1
- package/dist/empty/root/empty-root.js +3 -2
- package/dist/file-input/root/file-input-root.d.ts +69 -6
- package/dist/file-input/root/file-input-root.js +82 -19
- package/dist/file-input/screen.d.ts +2 -1
- package/dist/filter-input/menu/filter-menu.d.ts +5 -0
- package/dist/filter-input/menu/filter-menu.js +16 -4
- package/dist/filter-input/root/filter-input-root.d.ts +30 -6
- package/dist/filter-input/root/filter-input-root.js +1 -1
- package/dist/filter-input/suggest.d.ts +28 -3
- package/dist/filter-input/suggest.js +18 -8
- package/dist/format-date/root/format-date-root.d.ts +9 -16
- package/dist/format-date/root/format-date-root.js +10 -27
- package/dist/heatmap/root/heatmap-root.d.ts +24 -13
- package/dist/heatmap/root/heatmap-root.js +34 -12
- package/dist/icon/root/icon-root.d.ts +12 -1
- package/dist/icon/root/icon-root.js +21 -10
- package/dist/icon/settle.d.ts +7 -0
- package/dist/icon/settle.js +10 -0
- package/dist/icon-button/root/icon-button-root.d.ts +2 -0
- package/dist/image/root/image-root.d.ts +5 -1
- package/dist/image/root/image-root.js +10 -2
- package/dist/input/root/input-root.d.ts +13 -3
- package/dist/input/root/input-root.js +12 -3
- package/dist/kbd/root/kbd-root.d.ts +35 -1
- package/dist/kbd/root/kbd-root.js +23 -4
- package/dist/legend/root/legend-root.d.ts +55 -8
- package/dist/legend/root/legend-root.js +55 -13
- package/dist/lightbox/root/lightbox-root.d.ts +49 -6
- package/dist/lightbox/root/lightbox-root.js +86 -19
- package/dist/lightbox/zoom-controller.d.ts +59 -0
- package/dist/lightbox/zoom-controller.js +128 -0
- package/dist/lightbox/zoom.d.ts +22 -0
- package/dist/lightbox/zoom.js +16 -0
- package/dist/line-chart/root/line-chart-root.d.ts +22 -1
- package/dist/line-chart/root/line-chart-root.js +21 -1
- package/dist/list/item/list-item.d.ts +70 -1
- package/dist/list/item/list-item.js +77 -6
- package/dist/list/numbering.d.ts +14 -0
- package/dist/list/numbering.js +8 -0
- package/dist/list/root/list-root.d.ts +155 -9
- package/dist/list/root/list-root.js +246 -4
- package/dist/list/selection.d.ts +49 -0
- package/dist/list/selection.js +30 -0
- package/dist/listbox/root/listbox-root.d.ts +37 -1
- package/dist/listbox/root/listbox-root.js +49 -4
- package/dist/loader/busy.d.ts +10 -0
- package/dist/loader/busy.js +11 -0
- package/dist/loader/root/loader-root.d.ts +9 -2
- package/dist/loader/root/loader-root.js +23 -3
- package/dist/map/root/map-root.d.ts +6 -2
- package/dist/map/root/map-root.js +5 -2
- package/dist/megamenu/root/megamenu-root.d.ts +62 -0
- package/dist/megamenu/root/megamenu-root.js +90 -5
- package/dist/menu/index.d.ts +1 -0
- package/dist/menu/index.js +1 -0
- package/dist/menu/item/menu-item.d.ts +87 -11
- package/dist/menu/item/menu-item.js +78 -22
- package/dist/menu/root/menu-root.d.ts +39 -1
- package/dist/menu/root/menu-root.js +65 -8
- package/dist/menu/section/menu-section.d.ts +55 -0
- package/dist/menu/section/menu-section.js +60 -0
- package/dist/meter/root/meter-root.d.ts +20 -1
- package/dist/meter/root/meter-root.js +11 -15
- package/dist/navigation/root/navigation-root.d.ts +18 -2
- package/dist/navigation/root/navigation-root.js +29 -3
- package/dist/notifications/root/notifications-root.d.ts +25 -0
- package/dist/notifications/root/notifications-root.js +33 -5
- package/dist/number-input/root/number-input-root.d.ts +17 -8
- package/dist/number-input/root/number-input-root.js +2 -7
- package/dist/object-inspector/root/object-inspector-root.d.ts +161 -32
- package/dist/object-inspector/root/object-inspector-root.js +264 -123
- package/dist/object-inspector/rows.d.ts +75 -0
- package/dist/object-inspector/rows.js +119 -0
- package/dist/option/root/option-root.d.ts +5 -3
- package/dist/outline/levels.d.ts +31 -0
- package/dist/outline/levels.js +23 -0
- package/dist/outline/root/outline-root.d.ts +86 -3
- package/dist/outline/root/outline-root.js +95 -12
- package/dist/pagination/size/pagination-size.d.ts +12 -2
- package/dist/pagination/size/pagination-size.js +20 -5
- package/dist/pin-input/code.d.ts +10 -0
- package/dist/pin-input/code.js +13 -0
- package/dist/pin-input/root/pin-input-root.d.ts +25 -1
- package/dist/pin-input/root/pin-input-root.js +10 -11
- package/dist/popover/hide-outside.d.ts +14 -0
- package/dist/popover/hide-outside.js +41 -0
- package/dist/popover/root/popover-root.d.ts +57 -7
- package/dist/popover/root/popover-root.js +58 -3
- package/dist/progress/root/progress-root.d.ts +20 -0
- package/dist/progress/root/progress-root.js +15 -15
- package/dist/qr-code/export.d.ts +26 -1
- package/dist/qr-code/export.js +14 -0
- package/dist/qr-code/root/qr-code-root.d.ts +19 -5
- package/dist/qr-code/root/qr-code-root.js +58 -9
- package/dist/quote/marks.d.ts +8 -0
- package/dist/quote/marks.js +5 -0
- package/dist/quote/root/quote-root.d.ts +14 -2
- package/dist/quote/root/quote-root.js +23 -1
- package/dist/radio/group/radio-group.d.ts +4 -10
- package/dist/radio/group/radio-group.js +5 -10
- package/dist/radio/root/radio-root.d.ts +6 -2
- package/dist/radio/root/radio-root.js +6 -1
- package/dist/rating/root/rating-root.d.ts +10 -5
- package/dist/rating/root/rating-root.js +32 -8
- package/dist/rating/steps.d.ts +7 -0
- package/dist/rating/steps.js +9 -0
- package/dist/scatter-chart/fit.d.ts +15 -0
- package/dist/scatter-chart/fit.js +35 -0
- package/dist/scatter-chart/root/scatter-chart-root.d.ts +21 -1
- package/dist/scatter-chart/root/scatter-chart-root.js +30 -17
- package/dist/scroll-area/root/scroll-area-root.d.ts +84 -0
- package/dist/scroll-area/root/scroll-area-root.js +106 -7
- package/dist/scroll-area/scrollbar-controller.d.ts +111 -0
- package/dist/scroll-area/scrollbar-controller.js +172 -0
- package/dist/scroll-area/scrollbar.d.ts +92 -0
- package/dist/scroll-area/scrollbar.js +33 -0
- package/dist/select/root/select-root.d.ts +15 -0
- package/dist/select/root/select-root.js +18 -6
- package/dist/skeleton/root/skeleton-root.d.ts +3 -0
- package/dist/skeleton/root/skeleton-root.js +4 -2
- package/dist/skip-link/root/skip-link-root.js +2 -2
- package/dist/slider/root/slider-root.d.ts +41 -4
- package/dist/slider/root/slider-root.js +23 -3
- package/dist/sparkline/readings.d.ts +18 -0
- package/dist/sparkline/readings.js +19 -0
- package/dist/sparkline/root/sparkline-root.d.ts +78 -7
- package/dist/sparkline/root/sparkline-root.js +118 -23
- package/dist/speed-dial/root/speed-dial-root.js +2 -2
- package/dist/splitter/root/splitter-root.d.ts +20 -12
- package/dist/splitter/root/splitter-root.js +226 -203
- package/dist/splitter/snap.d.ts +9 -0
- package/dist/splitter/snap.js +12 -0
- package/dist/stat/root/stat-root.d.ts +14 -5
- package/dist/stat/root/stat-root.js +21 -5
- package/dist/steps/reach.d.ts +20 -0
- package/dist/steps/reach.js +15 -0
- package/dist/steps/root/steps-root.d.ts +76 -0
- package/dist/steps/root/steps-root.js +93 -1
- package/dist/steps/step/step.d.ts +45 -2
- package/dist/steps/step/step.js +33 -6
- package/dist/switch/root/switch-root.d.ts +10 -0
- package/dist/table/column/table-column.d.ts +11 -10
- package/dist/table/column/table-column.js +8 -19
- package/dist/table/root/table-root.d.ts +126 -4
- package/dist/table/root/table-root.js +156 -6
- package/dist/table/row/table-row.d.ts +47 -1
- package/dist/table/row/table-row.js +39 -2
- package/dist/tabs/panel/tab-panel.d.ts +22 -5
- package/dist/tabs/panel/tab-panel.js +34 -6
- package/dist/tabs/root/tabs-root.d.ts +37 -1
- package/dist/tabs/root/tabs-root.js +22 -4
- package/dist/tabs/tab/tab.d.ts +41 -4
- package/dist/tabs/tab/tab.js +49 -3
- package/dist/tag/group/tag-group.d.ts +31 -4
- package/dist/tag/group/tag-group.js +46 -7
- package/dist/tag/root/tag-root.js +9 -2
- package/dist/textarea/root/textarea-root.d.ts +28 -1
- package/dist/textarea/root/textarea-root.js +40 -1
- package/dist/time-input/root/time-input-root.d.ts +5 -1
- package/dist/time-input/root/time-input-root.js +16 -8
- package/dist/time-picker/root/time-picker-root.d.ts +18 -4
- package/dist/time-picker/root/time-picker-root.js +7 -10
- package/dist/time-picker/wheel-name.d.ts +9 -0
- package/dist/time-picker/wheel-name.js +15 -0
- package/dist/timeline/group/timeline-group.d.ts +46 -0
- package/dist/timeline/group/timeline-group.js +37 -0
- package/dist/timeline/index.d.ts +1 -0
- package/dist/timeline/index.js +1 -0
- package/dist/timeline/root/timeline-root.d.ts +10 -3
- package/dist/toast/item/toast-item.d.ts +24 -18
- package/dist/toast/item/toast-item.js +36 -40
- package/dist/toast/root/toast-root.d.ts +6 -0
- package/dist/toast/root/toast-root.js +16 -1
- package/dist/toggle/group/toggle-group.d.ts +24 -3
- package/dist/toggle/group/toggle-group.js +34 -5
- package/dist/toolbar/root/toolbar-root.d.ts +13 -0
- package/dist/toolbar/root/toolbar-root.js +15 -5
- package/dist/tooltip/root/tooltip-root.d.ts +13 -2
- package/dist/tooltip/root/tooltip-root.js +9 -1
- package/dist/tour/back.d.ts +10 -0
- package/dist/tour/back.js +8 -0
- package/dist/tour/root/tour-root.d.ts +30 -2
- package/dist/tour/root/tour-root.js +34 -8
- package/dist/tree/item/tree-item.d.ts +61 -4
- package/dist/tree/item/tree-item.js +92 -20
- package/dist/tree/root/tree-root.d.ts +58 -0
- package/dist/tree/root/tree-root.js +80 -16
- package/dist/tree/selection.d.ts +24 -0
- package/dist/tree/selection.js +13 -0
- package/dist/trend/root/trend-root.d.ts +43 -18
- package/dist/trend/root/trend-root.js +31 -6
- package/dist/video/media-events.d.ts +44 -0
- package/dist/video/media-events.js +35 -0
- package/dist/video/root/video-root.d.ts +117 -18
- package/dist/video/root/video-root.js +93 -47
- package/dist/video-playlist/menu/video-playlist-menu.d.ts +5 -0
- package/dist/video-playlist/menu/video-playlist-menu.js +3 -1
- package/dist/video-playlist/order.d.ts +41 -0
- package/dist/video-playlist/order.js +34 -0
- package/dist/video-playlist/root/video-playlist-root.d.ts +77 -3
- package/dist/video-playlist/root/video-playlist-root.js +60 -16
- package/dist/virtual-list/controls.d.ts +4 -0
- package/dist/virtual-list/controls.js +30 -0
- package/dist/virtual-list/fill.d.ts +22 -0
- package/dist/virtual-list/fill.js +23 -0
- package/dist/virtual-list/keys.d.ts +15 -0
- package/dist/virtual-list/keys.js +24 -0
- package/dist/virtual-list/plan.d.ts +49 -0
- package/dist/virtual-list/plan.js +16 -0
- package/dist/virtual-list/root/virtual-list-root.d.ts +259 -26
- package/dist/virtual-list/root/virtual-list-root.js +333 -49
- package/lint.json +1 -1
- package/package.json +8 -8
- package/types/jsx.d.ts +8113 -1394
- package/types/svelte.d.ts +2 -0
- package/types/vue.d.ts +1678 -353
- package/dist/data-table/root/order.d.ts +0 -141
- package/dist/data-table/root/order.js +0 -76
- package/dist/listbox/range.d.ts +0 -17
- package/dist/listbox/range.js +0 -5
- package/dist/tag/selection.d.ts +0 -10
- package/dist/tag/selection.js +0 -12
|
@@ -5,6 +5,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
|
|
|
5
5
|
return c > 3 && r && Object.defineProperty(target, key, r), r;
|
|
6
6
|
};
|
|
7
7
|
import { customElement, HelixElement, HelixSelectEvent, MixinControllerOpen, } from '@fusion.dev/helix-core';
|
|
8
|
+
import { nothing } from 'lit';
|
|
8
9
|
import { property, state } from 'lit/decorators.js';
|
|
9
10
|
import { html } from 'lit/static-html.js';
|
|
10
11
|
import '../../dialog/index.js';
|
|
@@ -25,6 +26,7 @@ let HelixHeadlessCommand = class HelixHeadlessCommand extends MixinControllerOpe
|
|
|
25
26
|
this.filterDelay = 0;
|
|
26
27
|
this.hotkey = 'mod+k';
|
|
27
28
|
this.label = 'Commands';
|
|
29
|
+
this.loadError = '';
|
|
28
30
|
this.loading = false;
|
|
29
31
|
this.loadingText = 'Loading';
|
|
30
32
|
this.placeholder = 'Search commands';
|
|
@@ -150,15 +152,17 @@ let HelixHeadlessCommand = class HelixHeadlessCommand extends MixinControllerOpe
|
|
|
150
152
|
>
|
|
151
153
|
<${this.tag('listbox')}
|
|
152
154
|
part="listbox"
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
155
|
+
exportparts="empty: listbox-empty, error: listbox-error, feedback: listbox-feedback,
|
|
156
|
+
filter-icon: listbox-filter-icon, filter-mark: listbox-filter-mark, hint: listbox-hint,
|
|
157
|
+
items: listbox-items, label: listbox-label, live: listbox-live, loading: listbox-loading,
|
|
158
|
+
search: listbox-search, search-field: listbox-search-field"
|
|
157
159
|
aria-label=${this.label}
|
|
158
160
|
empty-text=${this.emptyText}
|
|
159
161
|
filter-delay=${this.filterDelay}
|
|
160
162
|
filter-label=${this.placeholder}
|
|
163
|
+
load-error=${this.loadError}
|
|
161
164
|
loading-text=${this.loadingText}
|
|
165
|
+
no-results-text=${this.noResultsText ?? nothing}
|
|
162
166
|
result-label=${this.resultLabel}
|
|
163
167
|
results-label=${this.resultsLabel}
|
|
164
168
|
?loading=${this.loading}
|
|
@@ -172,6 +176,14 @@ let HelixHeadlessCommand = class HelixHeadlessCommand extends MixinControllerOpe
|
|
|
172
176
|
gives: the list's own fallback never shows behind a passed slot. -->
|
|
173
177
|
<slot name="empty" slot="empty">${this.emptyText}</slot>
|
|
174
178
|
<slot name="loading" slot="loading">${this.loadingText}</slot>
|
|
179
|
+
<slot name="error" slot="error">${this.loadError}</slot>
|
|
180
|
+
<!-- Handed on only while something fills it: an assigned slot hides the
|
|
181
|
+
list's own fallback, which is no-results-text or empty-text. -->
|
|
182
|
+
<slot
|
|
183
|
+
name="no-results"
|
|
184
|
+
slot=${this.querySelector?.(':scope > [slot="no-results"]') ? 'no-results' : nothing}
|
|
185
|
+
@slotchange=${() => this.requestUpdate()}
|
|
186
|
+
></slot>
|
|
175
187
|
</${this.tag('listbox')}>
|
|
176
188
|
<div ?hidden=${!this.footed} part="footer" slot="footer">
|
|
177
189
|
<slot
|
|
@@ -199,12 +211,18 @@ __decorate([
|
|
|
199
211
|
__decorate([
|
|
200
212
|
property()
|
|
201
213
|
], HelixHeadlessCommand.prototype, "label", void 0);
|
|
214
|
+
__decorate([
|
|
215
|
+
property({ attribute: 'load-error' })
|
|
216
|
+
], HelixHeadlessCommand.prototype, "loadError", void 0);
|
|
202
217
|
__decorate([
|
|
203
218
|
property({ reflect: true, type: Boolean })
|
|
204
219
|
], HelixHeadlessCommand.prototype, "loading", void 0);
|
|
205
220
|
__decorate([
|
|
206
221
|
property({ attribute: 'loading-text' })
|
|
207
222
|
], HelixHeadlessCommand.prototype, "loadingText", void 0);
|
|
223
|
+
__decorate([
|
|
224
|
+
property({ attribute: 'no-results-text' })
|
|
225
|
+
], HelixHeadlessCommand.prototype, "noResultsText", void 0);
|
|
208
226
|
__decorate([
|
|
209
227
|
property()
|
|
210
228
|
], HelixHeadlessCommand.prototype, "placeholder", void 0);
|
|
@@ -37,7 +37,7 @@ import '../../tooltip/index.js';
|
|
|
37
37
|
* @slot failed - The icon shown after a copy that put nothing on the clipboard. Defaults to a cross.
|
|
38
38
|
*
|
|
39
39
|
* @event {HelixCopyEvent} helix-copy - Fired after the clipboard write succeeds.
|
|
40
|
-
* @event {
|
|
40
|
+
* @event {HelixCopyErrorEvent} helix-copy-error - Fired when a press put nothing on the clipboard: the browser did not allow the write, or there was nothing to copy.
|
|
41
41
|
*
|
|
42
42
|
* @csspart button - The inner button.
|
|
43
43
|
* @csspart live - The live region that says `pending-label` when the button becomes pending under focus. It is rendered from the first time the button is pending.
|
|
@@ -66,6 +66,11 @@ export declare class HelixHeadlessCopyButton extends HelixHeadlessIconButton {
|
|
|
66
66
|
* clipboard.
|
|
67
67
|
*/
|
|
68
68
|
errorLabel: string;
|
|
69
|
+
/**
|
|
70
|
+
* How long the confirmation or the failure stands, in milliseconds, before
|
|
71
|
+
* the button goes back to `label`.
|
|
72
|
+
*/
|
|
73
|
+
feedbackDuration: number;
|
|
69
74
|
/**
|
|
70
75
|
* The element to copy from, by its id: `key` for its text, `key[value]` for
|
|
71
76
|
* an attribute, and `key.value` for a property. Read at the press, and used
|
|
@@ -88,6 +93,26 @@ export declare class HelixHeadlessCopyButton extends HelixHeadlessIconButton {
|
|
|
88
93
|
* whatever its `type`. Declared here so its own page says what it holds.
|
|
89
94
|
*/
|
|
90
95
|
value: string;
|
|
96
|
+
/** @internal A copy button sends no command. */
|
|
97
|
+
command: string;
|
|
98
|
+
/** @internal A copy button sends no command. */
|
|
99
|
+
commandFor: string;
|
|
100
|
+
/** @internal A copy button discloses nothing. */
|
|
101
|
+
expanded?: boolean;
|
|
102
|
+
/** @internal A copy button submits no form. */
|
|
103
|
+
formAction: string;
|
|
104
|
+
/** @internal A copy button submits no form. */
|
|
105
|
+
formEnctype: string;
|
|
106
|
+
/** @internal A copy button submits no form. */
|
|
107
|
+
formMethod: string;
|
|
108
|
+
/** @internal A copy button submits no form. */
|
|
109
|
+
formNoValidate: boolean;
|
|
110
|
+
/** @internal A copy button submits no form. */
|
|
111
|
+
formTarget: string;
|
|
112
|
+
/** @internal A copy button opens nothing. */
|
|
113
|
+
popup?: 'dialog' | 'grid' | 'listbox' | 'menu' | 'tree';
|
|
114
|
+
/** @internal A copy button never submits or resets, whatever its `type`. */
|
|
115
|
+
type: 'button' | 'submit' | 'reset';
|
|
91
116
|
/**
|
|
92
117
|
* The words for the state it is in, used twice on purpose.
|
|
93
118
|
*
|
|
@@ -5,7 +5,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
|
|
|
5
5
|
return c > 3 && r && Object.defineProperty(target, key, r), r;
|
|
6
6
|
};
|
|
7
7
|
var HelixHeadlessCopyButton_1;
|
|
8
|
-
import { CopyController, customElement } from '@fusion.dev/helix-core';
|
|
8
|
+
import { CopyController, customElement, HelixCopyErrorEvent } from '@fusion.dev/helix-core';
|
|
9
9
|
import { check, copy, x } from '@fusion.dev/helix-icons';
|
|
10
10
|
import { nothing } from 'lit';
|
|
11
11
|
import { property } from 'lit/decorators.js';
|
|
@@ -14,17 +14,17 @@ import { html } from 'lit/static-html.js';
|
|
|
14
14
|
import { HelixHeadlessIconButton } from '../../icon-button/root/icon-button-root.js';
|
|
15
15
|
import { readFrom } from '../from.js';
|
|
16
16
|
import '../../tooltip/index.js';
|
|
17
|
-
const CONFIRM = 1600;
|
|
18
17
|
let HelixHeadlessCopyButton = HelixHeadlessCopyButton_1 = class HelixHeadlessCopyButton extends HelixHeadlessIconButton {
|
|
19
18
|
constructor() {
|
|
20
19
|
super(...arguments);
|
|
21
20
|
this.copiedLabel = 'Copied';
|
|
22
21
|
this.errorLabel = 'Could not copy';
|
|
22
|
+
this.feedbackDuration = 1600;
|
|
23
23
|
this.from = '';
|
|
24
24
|
this.label = 'Copy';
|
|
25
25
|
this.value = '';
|
|
26
26
|
this.namedBy = null;
|
|
27
|
-
this.clipboard = new CopyController(this, { after:
|
|
27
|
+
this.clipboard = new CopyController(this, Object.defineProperty({}, 'after', { get: () => this.feedbackDuration }));
|
|
28
28
|
this.handleCopy = async (event) => {
|
|
29
29
|
if (this.pending) {
|
|
30
30
|
event.preventDefault();
|
|
@@ -34,9 +34,11 @@ let HelixHeadlessCopyButton = HelixHeadlessCopyButton_1 = class HelixHeadlessCop
|
|
|
34
34
|
if (this.isDisabled) {
|
|
35
35
|
return;
|
|
36
36
|
}
|
|
37
|
-
const
|
|
37
|
+
const copying = this.clipboard.copy(this.text);
|
|
38
|
+
this.announcePress(event);
|
|
39
|
+
const wrote = await copying;
|
|
38
40
|
if (!wrote && this.isConnected) {
|
|
39
|
-
this.dispatchEvent(new
|
|
41
|
+
this.dispatchEvent(new HelixCopyErrorEvent());
|
|
40
42
|
}
|
|
41
43
|
};
|
|
42
44
|
}
|
|
@@ -78,6 +80,8 @@ let HelixHeadlessCopyButton = HelixHeadlessCopyButton_1 = class HelixHeadlessCop
|
|
|
78
80
|
tabindex=${this.focusable ? nothing : '-1'}
|
|
79
81
|
?disabled=${this.isDisabled}
|
|
80
82
|
@click=${this.handleCopy}
|
|
83
|
+
@keydown=${this.notePress}
|
|
84
|
+
@pointerdown=${this.notePress}
|
|
81
85
|
>
|
|
82
86
|
${this.renderCopiedIcon()} ${this.renderFailedIcon()} ${this.renderCopyIcon()}
|
|
83
87
|
</button>`)}${this.renderLive()}`;
|
|
@@ -113,6 +117,9 @@ __decorate([
|
|
|
113
117
|
__decorate([
|
|
114
118
|
property({ attribute: 'error-label' })
|
|
115
119
|
], HelixHeadlessCopyButton.prototype, "errorLabel", void 0);
|
|
120
|
+
__decorate([
|
|
121
|
+
property({ attribute: 'feedback-duration', type: Number })
|
|
122
|
+
], HelixHeadlessCopyButton.prototype, "feedbackDuration", void 0);
|
|
116
123
|
__decorate([
|
|
117
124
|
property()
|
|
118
125
|
], HelixHeadlessCopyButton.prototype, "from", void 0);
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
+
export { type Axis, cycle, type DataRow, filter, format, ordered, parse, type Sort, sort, window_, } from '@fusion.dev/helix-core';
|
|
1
2
|
export { HelixHeadlessDataTable } from './root/data-table-root.js';
|
|
2
|
-
export { type Axis, cycle, type DataRow, filter, format, ordered, parse, type Sort, sort, window_, } from './root/order.js';
|
package/dist/data-table/index.js
CHANGED
|
@@ -0,0 +1,24 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* `keys` in the order the rows are, which is `order`: the keys of the whole
|
|
3
|
+
* result. A key the result does not hold, a selected row a search has hidden
|
|
4
|
+
* say, keeps its place after them in the order it was given.
|
|
5
|
+
*
|
|
6
|
+
* So `selected` and `expanded`, and the events that carry them, read in row
|
|
7
|
+
* order whatever order the rows were chosen in.
|
|
8
|
+
*/
|
|
9
|
+
export declare const inRowOrder: (keys: Iterable<string>, order: readonly string[]) => string[];
|
|
10
|
+
/**
|
|
11
|
+
* The `expanded` a toggle of row `key` leaves, in row order, or `undefined`
|
|
12
|
+
* where the row is open or closed already. Keys are split on commas only, so a
|
|
13
|
+
* key may hold a space.
|
|
14
|
+
*/
|
|
15
|
+
export declare const toggledOpen: (expanded: string, key: string, open: boolean, order: readonly string[]) => string | undefined;
|
|
16
|
+
/**
|
|
17
|
+
* Where a Shift range runs from, as an index into the page's `keys`: the row
|
|
18
|
+
* last chosen while it is on the page, and otherwise the row the reader is on,
|
|
19
|
+
* `from`, which becomes the one to run from.
|
|
20
|
+
*/
|
|
21
|
+
export declare const anchorAt: (keys: readonly string[], anchorKey: string | undefined, from: number) => {
|
|
22
|
+
anchor: number;
|
|
23
|
+
anchorKey: string | undefined;
|
|
24
|
+
};
|
|
@@ -0,0 +1,24 @@
|
|
|
1
|
+
import { commaList } from '@fusion.dev/helix-core';
|
|
2
|
+
export const inRowOrder = (keys, order) => {
|
|
3
|
+
const wanted = new Set(keys);
|
|
4
|
+
const placed = order.filter((key) => wanted.has(key));
|
|
5
|
+
const seen = new Set(placed);
|
|
6
|
+
return [...placed, ...[...wanted].filter((key) => !seen.has(key))];
|
|
7
|
+
};
|
|
8
|
+
export const toggledOpen = (expanded, key, open, order) => {
|
|
9
|
+
const keys = new Set(commaList(expanded));
|
|
10
|
+
if (keys.has(key) === open) {
|
|
11
|
+
return undefined;
|
|
12
|
+
}
|
|
13
|
+
if (open) {
|
|
14
|
+
keys.add(key);
|
|
15
|
+
}
|
|
16
|
+
else {
|
|
17
|
+
keys.delete(key);
|
|
18
|
+
}
|
|
19
|
+
return inRowOrder(keys, order).join(',');
|
|
20
|
+
};
|
|
21
|
+
export const anchorAt = (keys, anchorKey, from) => {
|
|
22
|
+
const anchor = anchorKey === undefined ? -1 : keys.indexOf(anchorKey);
|
|
23
|
+
return anchor < 0 ? { anchor: from, anchorKey: keys[from] } : { anchor, anchorKey };
|
|
24
|
+
};
|
|
@@ -1,9 +1,8 @@
|
|
|
1
|
-
import { HelixElement } from '@fusion.dev/helix-core';
|
|
1
|
+
import { type DataRow, HelixElement } from '@fusion.dev/helix-core';
|
|
2
2
|
import { type PropertyValues, type TemplateResult } from 'lit';
|
|
3
3
|
import { type HelixHeadlessTableColumn } from '../../table/column/table-column.js';
|
|
4
4
|
import '../../checkbox/index.js';
|
|
5
5
|
import '../../pagination/index.js';
|
|
6
|
-
import { type DataRow } from './order.js';
|
|
7
6
|
declare const HelixHeadlessDataTable_base: (new (...args: any[]) => import("@fusion.dev/helix-core").CollectionElement) & typeof HelixElement;
|
|
8
7
|
/**
|
|
9
8
|
* @summary A table drawn from an array of rows, with sorting, filtering, and paging.
|
|
@@ -39,19 +38,51 @@ declare const HelixHeadlessDataTable_base: (new (...args: any[]) => import("@fus
|
|
|
39
38
|
* selection, and `default-selected` holds what the markup declared.
|
|
40
39
|
* - The checkbox in the heading selects every row in the result, across pages,
|
|
41
40
|
* and shows a dash while only some are chosen.
|
|
41
|
+
* - Shift with a press on a checkbox selects every row between it and the row
|
|
42
|
+
* last chosen.
|
|
42
43
|
*
|
|
43
44
|
* To act on a single row, such as opening it, put a link or a button in a cell.
|
|
44
45
|
*
|
|
45
|
-
* The grid is one tab stop, and the arrow keys move between its
|
|
46
|
-
* headings included
|
|
46
|
+
* **Keyboard.** The grid is one tab stop, and the arrow keys move between its
|
|
47
|
+
* cells, the headings included.
|
|
47
48
|
*
|
|
48
|
-
*
|
|
49
|
-
*
|
|
50
|
-
*
|
|
51
|
-
*
|
|
52
|
-
*
|
|
53
|
-
*
|
|
54
|
-
*
|
|
49
|
+
* | Key | What it does |
|
|
50
|
+
* |---|---|
|
|
51
|
+
* | Right, Left | Moves one cell along the row. Left moves on, on a right-to-left page. |
|
|
52
|
+
* | Down, Up | Moves one row, the heading row and the `load-more` row included. |
|
|
53
|
+
* | Home, End | Moves to the first or the last cell of the row. |
|
|
54
|
+
* | Control with Home or End | Moves to the first or the last cell of the grid. |
|
|
55
|
+
* | Page Down, Page Up | Moves by the rows that fit in view. |
|
|
56
|
+
* | Enter, F2 | Moves into the cell's controls. Escape moves back to the cell, and Tab moves between the controls of one cell. |
|
|
57
|
+
* | Enter, Space on a sortable heading | Sorts by the column. |
|
|
58
|
+
* | Enter, Space on the `load-more` row | Sends `helix-load-more`. |
|
|
59
|
+
* | Space on a row | Selects the row, in a `selectable` table. |
|
|
60
|
+
* | Shift with Down or Up | Selects the rows it moves across, in a `selectable` table. |
|
|
61
|
+
* | Shift with Space | Selects every row from the one last chosen, in a `selectable` table. |
|
|
62
|
+
* | Control or Command with A | Selects every row, in a `selectable` table. |
|
|
63
|
+
* | Right on a row header in a tree grid | Opens a closed row, and moves one cell along an open one. |
|
|
64
|
+
* | Left on a row header in a tree grid | Closes an open row, and moves to the parent of a closed one. |
|
|
65
|
+
* | A letter or a word | Moves to the next row whose row header starts with what you typed. |
|
|
66
|
+
*
|
|
67
|
+
* `selected` and `expanded` hold their keys in the order of the rows, as do
|
|
68
|
+
* `helix-select`, `helix-selected` and `helix-expand`.
|
|
69
|
+
*
|
|
70
|
+
* Each row is named by its row header, the column marked `row-header`, or the
|
|
71
|
+
* first column with a `field` where none is. A screen reader says it as a reader
|
|
72
|
+
* moves between rows.
|
|
73
|
+
*
|
|
74
|
+
* **Rows that hold rows.** `child-field` names the field that holds a row's
|
|
75
|
+
* child rows, and the grid becomes a tree grid. The row header column draws a
|
|
76
|
+
* mark that a press opens and closes a row by, and `expanded` holds the keys of the open
|
|
77
|
+
* rows, which `row-key` names. Right on a closed row's header opens it, Left on
|
|
78
|
+
* an open one closes it, and Left on a child moves to its parent. A sort orders
|
|
79
|
+
* the rows under each parent, and a search shows the rows that lead to each
|
|
80
|
+
* match, open.
|
|
81
|
+
*
|
|
82
|
+
* `load-more` adds a row after the last one with a button that sends
|
|
83
|
+
* `helix-load-more`. A `windowed` table also sends it by itself once a reader
|
|
84
|
+
* scrolls within one screen of the end, once for each number of rows. Add the
|
|
85
|
+
* next rows to `rows`, and set `loading` while they are on their way.
|
|
55
86
|
*
|
|
56
87
|
* The controls inside the cells leave the tab order, so Tab moves past the
|
|
57
88
|
* whole grid. A windowed table keeps the row holding focus drawn while the
|
|
@@ -83,8 +114,10 @@ declare const HelixHeadlessDataTable_base: (new (...args: any[]) => import("@fus
|
|
|
83
114
|
* @slot toolbar - Content above the grid, such as a search field or actions.
|
|
84
115
|
*
|
|
85
116
|
* @event {HelixActivateEvent} helix-activate - Fired after the page changes, with the new page as a string in `detail.value`.
|
|
117
|
+
* @event {HelixExpandEvent} helix-expand - Fired after a row opens or closes, with every open row's key, separated by commas, which `expanded` also holds.
|
|
86
118
|
* @event {HelixFilterEvent} helix-filter - The search query is about to change. Cancelable: cancel it to keep the current query.
|
|
87
119
|
* @event {HelixFilteredEvent} helix-filtered - Fired after the search query changes, with the new query.
|
|
120
|
+
* @event {HelixLoadMoreEvent} helix-load-more - Fired when a reader asks for more rows, by the `load-more` row's button or by scrolling a `windowed` table near its end.
|
|
88
121
|
* @event {HelixNavigateEvent} helix-navigate - Another page was requested. Cancelable: cancel it to stay on the current page.
|
|
89
122
|
* @event {HelixReorderEvent} helix-reorder - The columns are about to move. The event carries every field in the new order. Cancelable: cancel it to keep the current order.
|
|
90
123
|
* @event {HelixReorderedEvent} helix-reordered - Fired after the columns move, with every field in the new order.
|
|
@@ -96,6 +129,7 @@ declare const HelixHeadlessDataTable_base: (new (...args: any[]) => import("@fus
|
|
|
96
129
|
* @csspart after - The space that stands in for the rows below the window. Only while `windowed`.
|
|
97
130
|
* @csspart before - The space that stands in for the rows above the window. Only while `windowed`.
|
|
98
131
|
* @csspart cell - One cell.
|
|
132
|
+
* @csspart cell-header - Added to `cell` for a cell of the row header column.
|
|
99
133
|
* @csspart cell-selected - Added to `cell` in a selected row.
|
|
100
134
|
* @csspart checkbox - A row's checkbox, or the checkbox in the heading that selects every row.
|
|
101
135
|
* @csspart checkbox-box - The box drawn for the checkbox's input.
|
|
@@ -113,6 +147,9 @@ declare const HelixHeadlessDataTable_base: (new (...args: any[]) => import("@fus
|
|
|
113
147
|
* @csspart head - The row that holds the column headings. It is `display: contents`, so it takes no space.
|
|
114
148
|
* @csspart live - A copy of the empty and loading messages, which screen readers announce when they change. Visually hidden in the styled tier.
|
|
115
149
|
* @csspart loading - Shown while the rows are loading.
|
|
150
|
+
* @csspart more - The row after the last one that holds the button for more rows, while `load-more` is set.
|
|
151
|
+
* @csspart more-button - The button that asks for more rows.
|
|
152
|
+
* @csspart more-cell - The cell of the `more` row, which spans every column.
|
|
116
153
|
* @csspart pagination - The built-in pagination, when it is shown.
|
|
117
154
|
* @csspart pagination-first - The pagination's button that goes to the first page, shown with `ends`.
|
|
118
155
|
* @csspart pagination-gap - The pagination's marker for pages that are not shown.
|
|
@@ -131,9 +168,13 @@ declare const HelixHeadlessDataTable_base: (new (...args: any[]) => import("@fus
|
|
|
131
168
|
* @csspart select-all - The heading that holds the checkbox that selects every row.
|
|
132
169
|
* @csspart select-selected - Added to `select` in a selected row.
|
|
133
170
|
* @csspart table - The grid.
|
|
171
|
+
* @csspart toggle - The mark in a row header that a press opens and closes its row by, in a tree grid.
|
|
172
|
+
* @csspart toggle-mark - The caret in `toggle`. It points along the line while the row is closed and down while it is open.
|
|
173
|
+
* @csspart toggle-open - Added to `toggle` while its row is open.
|
|
134
174
|
* @csspart toolbar - The region above the grid.
|
|
135
175
|
*
|
|
136
176
|
* @cssproperty --data-table-cell-align - The alignment of the cell's column: `start`, `center`, or `end`. Unset when the column sets none. The component writes it on each cell it draws, and the stylesheet reads it. `Table` sets `--table-cell-align` for the same purpose.
|
|
177
|
+
* @cssproperty --data-table-level - How deep a row is in a tree grid, from 1. The component writes it on each row header cell, and the stylesheet indents by it.
|
|
137
178
|
* @cssproperty --data-table-template - The column track list, worked out from the columns. The component writes it inline on the element that reads it, so setting it has no effect. Set a column's `width` to change it.
|
|
138
179
|
*/
|
|
139
180
|
export declare class HelixHeadlessDataTable extends HelixHeadlessDataTable_base {
|
|
@@ -150,6 +191,19 @@ export declare class HelixHeadlessDataTable extends HelixHeadlessDataTable_base
|
|
|
150
191
|
static shadowRootOptions: ShadowRootInit;
|
|
151
192
|
/** The word for an ascending sort, in `sorted-label`. */
|
|
152
193
|
ascendingLabel: string;
|
|
194
|
+
/**
|
|
195
|
+
* The field that holds a row's child rows, as an array. Set it, and `row-key`,
|
|
196
|
+
* and the grid becomes a tree grid.
|
|
197
|
+
*
|
|
198
|
+
* Reflected, because the styled tier indents a tree grid's row headers by
|
|
199
|
+
* it. No default, so a table that sets none writes nothing onto its host.
|
|
200
|
+
*/
|
|
201
|
+
childField?: string;
|
|
202
|
+
/**
|
|
203
|
+
* The keys of the rows open at the start, separated by commas. Used until
|
|
204
|
+
* `expanded` is set.
|
|
205
|
+
*/
|
|
206
|
+
defaultExpanded: string;
|
|
153
207
|
/**
|
|
154
208
|
* The starting search query, used until `filter` is set.
|
|
155
209
|
*/
|
|
@@ -187,6 +241,12 @@ export declare class HelixHeadlessDataTable extends HelixHeadlessDataTable_base
|
|
|
187
241
|
* been measured.
|
|
188
242
|
*/
|
|
189
243
|
estimate: number;
|
|
244
|
+
/**
|
|
245
|
+
* The keys of the open rows in a tree grid, separated by commas, the shape of
|
|
246
|
+
* `selected`. A reader's press writes it and then sends `helix-expand`.
|
|
247
|
+
*/
|
|
248
|
+
get expanded(): string;
|
|
249
|
+
set expanded(next: string);
|
|
190
250
|
/**
|
|
191
251
|
* The search query. A row is shown when the query matches any of its columns.
|
|
192
252
|
*
|
|
@@ -205,6 +265,16 @@ export declare class HelixHeadlessDataTable extends HelixHeadlessDataTable_base
|
|
|
205
265
|
* The grid's name, read by screen readers.
|
|
206
266
|
*/
|
|
207
267
|
label: string;
|
|
268
|
+
/**
|
|
269
|
+
* Draws a row after the last one with a button that asks for more rows.
|
|
270
|
+
*
|
|
271
|
+
* The button sends `helix-load-more`, and a `windowed` table sends it by
|
|
272
|
+
* itself once a reader scrolls within one screen of the end. Turn it off
|
|
273
|
+
* when there are no more rows to load.
|
|
274
|
+
*/
|
|
275
|
+
loadMore: boolean;
|
|
276
|
+
/** The words on the button in the `more` row. */
|
|
277
|
+
loadMoreLabel: string;
|
|
208
278
|
/**
|
|
209
279
|
* Where filtering, sorting, and paging happen. `client` does them in the
|
|
210
280
|
* table, and `server` leaves them to your code.
|
|
@@ -394,6 +464,7 @@ export declare class HelixHeadlessDataTable extends HelixHeadlessDataTable_base
|
|
|
394
464
|
private paginatedState;
|
|
395
465
|
private orderState;
|
|
396
466
|
private selectedState;
|
|
467
|
+
private expandedState;
|
|
397
468
|
/**
|
|
398
469
|
* The row holding the grid's tab stop: `-1` for the headings, otherwise a
|
|
399
470
|
* row of the page counted from 0. Unset until a reader moves, when the stop
|
|
@@ -411,6 +482,17 @@ export declare class HelixHeadlessDataTable extends HelixHeadlessDataTable_base
|
|
|
411
482
|
private focusWanted;
|
|
412
483
|
/** The page as last drawn, for the keys to count rows against between renders. */
|
|
413
484
|
private drawnPage;
|
|
485
|
+
/** Whether the last render drew the `more` row, which follows the page's rows. */
|
|
486
|
+
private moreDrawn;
|
|
487
|
+
/** The letters typed at the grid, which move to the row whose header they start. */
|
|
488
|
+
private readonly typeahead;
|
|
489
|
+
/**
|
|
490
|
+
* The key of the row a range selection runs from: the row last chosen or let
|
|
491
|
+
* go one at a time.
|
|
492
|
+
*/
|
|
493
|
+
private anchorKey;
|
|
494
|
+
/** Whether Shift was held on the last press, for a checkbox that asks to range. */
|
|
495
|
+
private shiftPressed;
|
|
414
496
|
/** The grid's size as the last render counted it, for the internals. */
|
|
415
497
|
private counts;
|
|
416
498
|
/** The order while a grip is being dragged, before anybody has been asked. */
|
|
@@ -456,6 +538,24 @@ export declare class HelixHeadlessDataTable extends HelixHeadlessDataTable_base
|
|
|
456
538
|
* result to save a sort is the wrong trade.
|
|
457
539
|
*/
|
|
458
540
|
private held;
|
|
541
|
+
/** The tree last laid out, kept against what laid it out. */
|
|
542
|
+
private grown;
|
|
543
|
+
/**
|
|
544
|
+
* The rows of a tree grid, laid out flat with each open row's children under
|
|
545
|
+
* it. `server` mode lays out the rows it was handed and neither filters nor
|
|
546
|
+
* sorts them.
|
|
547
|
+
*/
|
|
548
|
+
private tree;
|
|
549
|
+
/**
|
|
550
|
+
* The keys of the open rows. Split on commas only, as every other list of
|
|
551
|
+
* keys is, so a key may hold a space.
|
|
552
|
+
*/
|
|
553
|
+
private get opened();
|
|
554
|
+
/**
|
|
555
|
+
* The result in order: the tree laid out flat in a tree grid, and the
|
|
556
|
+
* arranged rows otherwise.
|
|
557
|
+
*/
|
|
558
|
+
private flat;
|
|
459
559
|
private arrange;
|
|
460
560
|
/**
|
|
461
561
|
* The part of a page the reader can see, which is every row when not
|
|
@@ -635,9 +735,34 @@ export declare class HelixHeadlessDataTable extends HelixHeadlessDataTable_base
|
|
|
635
735
|
* is all it holds.
|
|
636
736
|
*/
|
|
637
737
|
private get everyKey();
|
|
638
|
-
/**
|
|
738
|
+
/**
|
|
739
|
+
* Ticks or clears one row, which the checkbox asked for and was refused. With
|
|
740
|
+
* Shift held it selects every row from the one last chosen.
|
|
741
|
+
*/
|
|
639
742
|
private readonly toggleRow;
|
|
640
|
-
/**
|
|
743
|
+
/** The keys of the rows on the page, in the order they are drawn. */
|
|
744
|
+
private get pageKeys();
|
|
745
|
+
/**
|
|
746
|
+
* Selects every row on the page from the one a range runs from to row `to`,
|
|
747
|
+
* keeping what was already selected. With no row to run from, the range is
|
|
748
|
+
* the row the reader is on, `from`, and it becomes the one to run from.
|
|
749
|
+
*/
|
|
750
|
+
private selectRange;
|
|
751
|
+
/** The words a typed search matches each row by: its row header's value. */
|
|
752
|
+
private get rowWords();
|
|
753
|
+
/**
|
|
754
|
+
* The column whose cells head their rows: the one marked `row-header`, or
|
|
755
|
+
* the first with a `field`.
|
|
756
|
+
*/
|
|
757
|
+
private get headerColumn();
|
|
758
|
+
/** Sends `helix-load-more`, for the button in the `more` row or a scroll near the end. */
|
|
759
|
+
private askForMore;
|
|
760
|
+
/**
|
|
761
|
+
* Asks for more rows on its own once a reader scrolls a `windowed` table to
|
|
762
|
+
* within one screen of the end, once for each number of rows it holds.
|
|
763
|
+
*/
|
|
764
|
+
private askNearEnd;
|
|
765
|
+
/** Asks for one row to be chosen or let go, and makes it where a range runs from. */
|
|
641
766
|
private chooseRow;
|
|
642
767
|
/** Selects every row, or clears them all where every one already was. */
|
|
643
768
|
private readonly toggleAll;
|
|
@@ -758,6 +883,20 @@ export declare class HelixHeadlessDataTable extends HelixHeadlessDataTable_base
|
|
|
758
883
|
* same value to the same three.
|
|
759
884
|
*/
|
|
760
885
|
private renderCell;
|
|
886
|
+
/**
|
|
887
|
+
* The mark a pointer opens or closes a row of a tree grid by.
|
|
888
|
+
*
|
|
889
|
+
* **Hidden from assistive technology, and no button.** The row says whether
|
|
890
|
+
* it is open with `aria-expanded`, and Right and Left open and close it. A
|
|
891
|
+
* button in the row header put its own name, "Expand src", into the name of
|
|
892
|
+
* the header that names the row.
|
|
893
|
+
*/
|
|
894
|
+
private renderToggle;
|
|
895
|
+
/**
|
|
896
|
+
* Opens or closes a row of a tree grid, and says so with `helix-expand`.
|
|
897
|
+
* Nothing moves where it is that way already.
|
|
898
|
+
*/
|
|
899
|
+
private toggleOpen;
|
|
761
900
|
/**
|
|
762
901
|
* A checkbox, named for what it chooses, whose change the table takes.
|
|
763
902
|
*
|
|
@@ -801,6 +940,13 @@ export declare class HelixHeadlessDataTable extends HelixHeadlessDataTable_base
|
|
|
801
940
|
private readonly handleScroll;
|
|
802
941
|
/** The heading of the checkbox column, which selects the whole result. */
|
|
803
942
|
private renderSelectAll;
|
|
943
|
+
/**
|
|
944
|
+
* The row after the last one, holding the button that asks for more rows.
|
|
945
|
+
*
|
|
946
|
+
* A row of the grid, one cell spanning every column, so the arrows reach it
|
|
947
|
+
* after the last row and Enter or Space on it asks.
|
|
948
|
+
*/
|
|
949
|
+
private renderMore;
|
|
804
950
|
protected render(): TemplateResult;
|
|
805
951
|
/**
|
|
806
952
|
* Listens on the host, not on the slot the columns are assigned to.
|
|
@@ -819,6 +965,11 @@ export declare class HelixHeadlessDataTable extends HelixHeadlessDataTable_base
|
|
|
819
965
|
*/
|
|
820
966
|
connectedCallback(): void;
|
|
821
967
|
disconnectedCallback(): void;
|
|
968
|
+
/**
|
|
969
|
+
* Notes whether Shift is held, before the press reaches a checkbox, whose
|
|
970
|
+
* request carries only the state it asks for.
|
|
971
|
+
*/
|
|
972
|
+
private readonly notePress;
|
|
822
973
|
/**
|
|
823
974
|
* A click on a sortable heading, anywhere but its grip or its edge.
|
|
824
975
|
*
|
|
@@ -875,6 +1026,12 @@ export declare class HelixHeadlessDataTable extends HelixHeadlessDataTable_base
|
|
|
875
1026
|
* alone.
|
|
876
1027
|
*/
|
|
877
1028
|
private readonly handleGridKey;
|
|
1029
|
+
/**
|
|
1030
|
+
* Left and Right on a row header of a tree grid: forward opens a closed row,
|
|
1031
|
+
* back closes an open one, and back on a child moves to its parent. Says
|
|
1032
|
+
* whether it took the key, and the arrows move between cells where it did not.
|
|
1033
|
+
*/
|
|
1034
|
+
private treeKey;
|
|
878
1035
|
/** Enter, Space and F2 on a cell. */
|
|
879
1036
|
private activate;
|
|
880
1037
|
/** The keys the grid takes while focus is on a control inside a cell. */
|