@ixfx/components 0.16.2 → 0.16.3
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/bundle/index.d.ts +59 -5
- package/bundle/index.js +148 -140
- package/dist/ac-text.d.ts +1 -1
- package/dist/{ac-token-Cq7lsYf-.d.ts → ac-token-qEs3FsQv.d.ts} +1 -1
- package/dist/ac-token.d.ts +1 -1
- package/dist/ac-token.js +1 -1
- package/dist/{button-D1sPDUCM.d.ts → button-N92DKoWb.d.ts} +1 -1
- package/dist/button.d.ts +1 -1
- package/dist/colour-picker.d.ts +1 -1
- package/dist/{crumb-navigation-nnr881n-.d.ts → crumb-navigation-BbqfmkYs.d.ts} +1 -1
- package/dist/crumbs.d.ts +1 -1
- package/dist/{data-grid-CaPLWt5E.js → data-grid-8TsiF2ES.js} +7 -6
- package/dist/{data-grid-BAEpfTkb.d.ts → data-grid-CslzF16R.d.ts} +4 -4
- package/dist/data-grid.d.ts +1 -1
- package/dist/data-grid.js +1 -1
- package/dist/{detail-list-DK49TsJd.d.ts → detail-list-n1MbNbhF.d.ts} +4 -4
- package/dist/{detail-list-C3XKTRmE.js → detail-list-w3GXKO2k.js} +4 -3
- package/dist/detail-list.d.ts +2 -2
- package/dist/detail-list.js +1 -1
- package/dist/{flat-list-Bv4-qfjp.d.ts → flat-list-D_4y3wgn.d.ts} +4 -4
- package/dist/flat-list.d.ts +1 -1
- package/dist/flat-list.js +2 -2
- package/dist/{grid-list-DaeSHv9P.d.ts → grid-list-CqYS28NY.d.ts} +4 -2
- package/dist/{grid-list-51XsR2X2.js → grid-list-Cz2tKcNZ.js} +4 -3
- package/dist/grid-list.d.ts +2 -2
- package/dist/grid-list.js +1 -1
- package/dist/{grouped-item-lister-DZIjo9nO.d.ts → grouped-item-lister-CS4yInuw.d.ts} +2 -2
- package/dist/grouped-item-lister.d.ts +1 -1
- package/dist/{icon-DR_3rSyZ.d.ts → icon-CDGprSdE.d.ts} +1 -1
- package/dist/icons.d.ts +2 -2
- package/dist/{incr-search-2YaxUUA9.js → incr-search-Dc6gYpJG.js} +24 -4
- package/dist/incr-search.d.ts +1 -1
- package/dist/incr-search.js +1 -1
- package/dist/{index-BjRoPrwj.d.ts → index-Bm9a9S3_.d.ts} +3 -2
- package/dist/{index-garxxqgV.d.ts → index-CYndvTWH.d.ts} +1 -1
- package/dist/{index-BUB5SICW.d.ts → index-CoqtMSd9.d.ts} +1 -1
- package/dist/{index-Bz3loIAf.d.ts → index-DN2BWctP.d.ts} +1 -1
- package/dist/{index-DXDz60XH.d.ts → index-DyaHA9Kk.d.ts} +2 -2
- package/dist/{index-CJ5fshD3.d.ts → index-UvnoZUAo.d.ts} +1 -1
- package/dist/{index-vdbbGE7N.d.ts → index-VAs9akt4.d.ts} +18 -2
- package/dist/{index-DM9OLgTH.d.ts → index-ZaA90u09.d.ts} +2 -2
- package/dist/index.d.ts +37 -26
- package/dist/index.js +88 -13
- package/dist/item-appearance-BjcMyauw.js +29 -0
- package/dist/{labelled-input-base-Dp_9KP0G.d.ts → labelled-input-base-DiTme1JO.d.ts} +1 -1
- package/dist/labelled-radial-input.d.ts +2 -2
- package/dist/labelled-range-input.d.ts +1 -1
- package/dist/labelled-slider-input.d.ts +1 -1
- package/dist/list-group-header.d.ts +1 -1
- package/dist/{list-selection-controller-CJDdjH7E.js → list-selection-controller-D4iIrvJH.js} +12 -8
- package/dist/{list-selection-types-hj9Njei3.d.ts → list-selection-types-Dnamh2Lu.d.ts} +29 -3
- package/dist/{menu-item-B0zqw2xp.d.ts → menu-item-bF6narIz.d.ts} +1 -1
- package/dist/menu.d.ts +2 -2
- package/dist/{miller-BfrTcujx.js → miller-Be7x4ufN.js} +3 -2
- package/dist/miller.d.ts +1 -1
- package/dist/miller.js +1 -1
- package/dist/narrowed-text.js +1 -1
- package/dist/panel.d.ts +1 -1
- package/dist/{item-appearance-Bl6rMIID.js → partial-keys-Ck6CiprB.js} +1 -29
- package/dist/{split-layout-ChZ0Glrs.d.ts → split-layout-CophkNeU.d.ts} +1 -1
- package/dist/split-layout.d.ts +1 -1
- package/dist/sunburst-tree.d.ts +1 -1
- package/dist/sunburst-tree.js +1 -1
- package/dist/{sunbursttree-list-BAS0KrDG.d.ts → sunbursttree-list-Bk20giTF.d.ts} +1 -1
- package/dist/{sunbursttree-list-906G33ME.js → sunbursttree-list-DQF6DcsS.js} +1 -1
- package/dist/{tab-list-wC0xNz1b.d.ts → tab-list-Df371rqw.d.ts} +1 -1
- package/dist/tabs.d.ts +1 -1
- package/dist/timeline.d.ts +1 -1
- package/dist/{titlebar-B5zSTZnF.d.ts → titlebar-Tqu-VvMU.d.ts} +1 -1
- package/dist/titlebar.d.ts +1 -1
- package/dist/{tree-C_H1COTf.js → tree-BaXYyt5U.js} +185 -69
- package/dist/tree.d.ts +1 -1
- package/dist/tree.js +1 -1
- package/dist/{vertical-list-od4050Bo.d.ts → vertical-list-DtHX26JO.d.ts} +2 -2
- package/dist/{vertical-list-qMRIxZIT.js → vertical-list-o5hfqH87.js} +4 -3
- package/dist/vertical-list.d.ts +2 -2
- package/dist/vertical-list.js +1 -1
- package/docs-user/README.md +1 -0
- package/docs-user/data-grid.md +1 -1
- package/docs-user/grid-list.md +1 -1
- package/docs-user/index.json +6 -2
- package/docs-user/llms.txt +1 -0
- package/docs-user/miller.md +4 -0
- package/docs-user/multicol-list.md +6 -0
- package/docs-user/select-horiz.md +1 -1
- package/docs-user/tree.md +6 -0
- package/docs-user/user-selection-intents.md +86 -0
- package/docs-user/vertical-list.md +1 -1
- package/llms.txt +1 -0
- package/package.json +1 -1
- /package/dist/{index-DV3iaUBW.d.ts → index-DV3iaUBW2.d.ts} +0 -0
package/dist/tree.d.ts
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
import { A as TreeTickleDetail, M as TreeDataModel, N as TreeDataModelOptions, O as TreeSelectDetail, T as TreeRevealMode, _ as TreeDropTarget, b as TreeItemClickDetail, c as TreeDragContext, d as TreeDragStartEvent, g as TreeDropPosition, h as TreeDropEvent, i as TreeCollapseEvent, j as TreeTickleEvent, k as TreeSelectEvent, l as TreeDragEndEvent, m as TreeDropDetail, n as TreeActivateEvent, o as TreeComponentEventMap, p as TreeDropContext, r as TreeCollapseDetail, s as TreeDndMode, t as TreeActivateDetail, u as TreeDragOverEvent, v as TreeExpandDetail, w as TreeNavigateOptions, x as TreeItemClickEvent, y as TreeExpandEvent } from "./tree-component-DgfkxmVY.js";
|
|
2
2
|
import { a as TreeItem, n as TreeExclusivity, o as TreeNode, r as TreeFilterPredicate, s as TreeSelectionFilter, t as LoadChildrenCallback } from "./types-Jky6oNAp.js";
|
|
3
|
-
import { a as TreeDropVisibleRow, c as TreeListElement, d as TreeBaseElement, f as TreeBaseElementEventMap, h as TreeConfig, i as TreeDropRowInfo, l as TreeCheckboxState, m as TreeListViewState, n as TreeDropControllerConfig, o as TreeController, p as TreeVirtualize, r as TreeDropResolvedDrag, s as TreeControllerOptions, t as TreeDropController, u as TreeAnimation } from "./index-
|
|
3
|
+
import { a as TreeDropVisibleRow, c as TreeListElement, d as TreeBaseElement, f as TreeBaseElementEventMap, h as TreeConfig, i as TreeDropRowInfo, l as TreeCheckboxState, m as TreeListViewState, n as TreeDropControllerConfig, o as TreeController, p as TreeVirtualize, r as TreeDropResolvedDrag, s as TreeControllerOptions, t as TreeDropController, u as TreeAnimation } from "./index-VAs9akt4.js";
|
|
4
4
|
export { type LoadChildrenCallback, type TreeActivateDetail, type TreeActivateEvent, TreeAnimation, TreeBaseElement, TreeBaseElementEventMap, type TreeCheckboxState, type TreeCollapseDetail, type TreeCollapseEvent, type TreeComponentEventMap, TreeConfig, TreeController, TreeControllerOptions, TreeDataModel, type TreeDataModelOptions, type TreeDndMode, type TreeDragContext, type TreeDragEndEvent, type TreeDragOverEvent, type TreeDragStartEvent, type TreeDropContext, TreeDropController, TreeDropControllerConfig, type TreeDropDetail, type TreeDropEvent, type TreeDropPosition, TreeDropResolvedDrag, TreeDropRowInfo, type TreeDropTarget, TreeDropVisibleRow, type TreeExclusivity, type TreeExpandDetail, type TreeExpandEvent, type TreeFilterPredicate, type TreeItem, type TreeItemClickDetail, type TreeItemClickEvent, TreeListElement, type TreeListViewState, type TreeNavigateOptions, type TreeNode, type TreeRevealMode, type TreeSelectDetail, type TreeSelectEvent, type TreeSelectionFilter, type TreeTickleDetail, type TreeTickleEvent, TreeVirtualize };
|
package/dist/tree.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import { a as TreeDataModel, i as TreeDropController, n as TreeListElement, r as TreeBaseElement, t as TreeController } from "./tree-
|
|
1
|
+
import { a as TreeDataModel, i as TreeDropController, n as TreeListElement, r as TreeBaseElement, t as TreeController } from "./tree-BaXYyt5U.js";
|
|
2
2
|
export { TreeBaseElement, TreeController, TreeDataModel, TreeDropController, TreeListElement };
|
|
@@ -2,8 +2,8 @@ import { L as ListDragPreviewRenderer, R as ListDragPreviewSourceResolver, V as
|
|
|
2
2
|
import { a as ViewStateBase, t as GetViewStateOptions } from "./types-LU1u0CB8.js";
|
|
3
3
|
import "./index-9ttcdwlL.js";
|
|
4
4
|
import { n as ListViewportChangeEvent } from "./list-viewport-types-BRZsLcvp.js";
|
|
5
|
-
import {
|
|
6
|
-
import { S as ListSearchController } from "./index-
|
|
5
|
+
import { h as ListSelectionMode, i as ListInteractionMode, r as ListElementEventMap } from "./list-selection-types-Dnamh2Lu.js";
|
|
6
|
+
import { S as ListSearchController } from "./index-Bm9a9S3_.js";
|
|
7
7
|
import "./editable-label-rzXkjf1H.js";
|
|
8
8
|
import { LitElement, PropertyValues } from "lit";
|
|
9
9
|
import { CommandId, CommandRegistry } from "@clinth/ui-commands";
|
|
@@ -1,13 +1,14 @@
|
|
|
1
1
|
import { t as TickledController } from "./tickled-controller-D-HZymaZ.js";
|
|
2
2
|
import { t as themeFallbacks } from "./fallbacks-DQ_5OsmR.js";
|
|
3
3
|
import { n as safeCustomElement, t as __decorate } from "./decorate-VRK8rslU.js";
|
|
4
|
-
import { c as createElementListSearchAdapter, d as keysOfElements, i as ListSearchController, n as listSearchStyles, o as registerListSearchCommands, r as LIST_SEARCH_MODES, u as keyForElement } from "./incr-search-
|
|
4
|
+
import { c as createElementListSearchAdapter, d as keysOfElements, i as ListSearchController, n as listSearchStyles, o as registerListSearchCommands, r as LIST_SEARCH_MODES, u as keyForElement } from "./incr-search-Dc6gYpJG.js";
|
|
5
5
|
import { i as animateListItemOut, r as animateListItemIn, t as ListNativeDragController } from "./list-native-drag-controller-CcXoS0YX.js";
|
|
6
|
-
import { i as ListDragSelectController, n as gestureOf, t as ListSelectionController } from "./list-selection-controller-
|
|
6
|
+
import { i as ListDragSelectController, n as gestureOf, t as ListSelectionController } from "./list-selection-controller-D4iIrvJH.js";
|
|
7
7
|
import { l as keysToArray } from "./pending-BGidHppL.js";
|
|
8
|
-
import {
|
|
8
|
+
import { i as sameKeySet, n as applyPartialAttributes, r as isPartialKey } from "./partial-keys-Ck6CiprB.js";
|
|
9
9
|
import { t as scrollFadeStyles } from "./scroll-fade-Xx28D7mH.js";
|
|
10
10
|
import { a as restoreElementScroll, n as anchorFromRow, o as scrollToOffset, r as captureElementScroll, t as ViewStateController } from "./view-state-controller-BdyXWUUM.js";
|
|
11
|
+
import { n as appearanceColor, t as appearanceAbsent } from "./item-appearance-BjcMyauw.js";
|
|
11
12
|
import "./editable-label.js";
|
|
12
13
|
import { LitElement, css, html, render } from "lit";
|
|
13
14
|
import { property } from "lit/decorators.js";
|
package/dist/vertical-list.d.ts
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { B as ListNativeDragStartDetail, F as ListDragPreview, I as ListDragPreviewContext, L as ListDragPreviewRenderer, P as ListDragEntry, V as ListNativeDragStartEvent, z as ListDragSource } from "./tree-component-DgfkxmVY.js";
|
|
2
2
|
import { n as ListViewportChangeEvent, t as ListViewportChangeDetail } from "./list-viewport-types-BRZsLcvp.js";
|
|
3
|
-
import { a as ListItemClickDetail, c as
|
|
4
|
-
import { a as VerticalListViewState, c as ListDragLeaveDetail, d as ListDropDetail, f as ListDropEvent, g as ListEditCommitEvent, h as ListEditCommitDetail, i as VerticalListElementEventMap, l as ListDragLeaveEvent, m as ListEditCancelEvent, n as CustomCheckboxOptions, o as ListContextMenuDetail, p as ListEditCancelDetail, r as VerticalListElement, s as ListContextMenuEvent, t as AddItemOptions, u as ListDragOverEvent } from "./vertical-list-
|
|
3
|
+
import { _ as ListTickleEvent, a as ListItemClickDetail, c as ListSelectDetail, g as ListTickleDetail, h as ListSelectionMode, i as ListInteractionMode, l as ListSelectEvent, n as ListActivateEvent, o as ListItemClickEvent, r as ListElementEventMap, t as ListActivateDetail } from "./list-selection-types-Dnamh2Lu.js";
|
|
4
|
+
import { a as VerticalListViewState, c as ListDragLeaveDetail, d as ListDropDetail, f as ListDropEvent, g as ListEditCommitEvent, h as ListEditCommitDetail, i as VerticalListElementEventMap, l as ListDragLeaveEvent, m as ListEditCancelEvent, n as CustomCheckboxOptions, o as ListContextMenuDetail, p as ListEditCancelDetail, r as VerticalListElement, s as ListContextMenuEvent, t as AddItemOptions, u as ListDragOverEvent } from "./vertical-list-DtHX26JO.js";
|
|
5
5
|
export { AddItemOptions, CustomCheckboxOptions, type ListActivateDetail, type ListActivateEvent, type ListContextMenuDetail, type ListContextMenuEvent, type ListDragEntry, type ListDragLeaveDetail, type ListDragLeaveEvent, type ListDragOverEvent, type ListDragPreview, type ListDragPreviewContext, type ListDragPreviewRenderer, type ListDragSource, type ListDropDetail, type ListDropEvent, type ListEditCancelDetail, type ListEditCancelEvent, type ListEditCommitDetail, type ListEditCommitEvent, type ListElementEventMap, type ListInteractionMode, type ListItemClickDetail, type ListItemClickEvent, type ListNativeDragStartDetail, type ListNativeDragStartEvent, type ListSelectDetail, type ListSelectEvent, type ListSelectionMode, type ListTickleDetail, type ListTickleEvent, type ListViewportChangeDetail, type ListViewportChangeEvent, VerticalListElement, VerticalListElementEventMap, type VerticalListViewState };
|
package/dist/vertical-list.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import { t as VerticalListElement } from "./vertical-list-
|
|
1
|
+
import { t as VerticalListElement } from "./vertical-list-o5hfqH87.js";
|
|
2
2
|
export { VerticalListElement };
|
package/docs-user/README.md
CHANGED
package/docs-user/data-grid.md
CHANGED
|
@@ -227,7 +227,7 @@ The setter fires `datagrid-select` `{ selectedKeys, previous }` (and `list-selec
|
|
|
227
227
|
only when the selection actually changes. A cancelable `list-select-intent` fires
|
|
228
228
|
before every selection gesture, and `partialKeys` marks partially selected rows
|
|
229
229
|
(`data-partial`, indeterminate checkbox in `checked` mode).
|
|
230
|
-
See [Selection intents, partial rows, unloaded keys](
|
|
230
|
+
See [Selection intents, partial rows, unloaded keys](./user-selection-intents.md): `list-select-intent`, `partialKeys`, and keys that arrive later.
|
|
231
231
|
|
|
232
232
|
Selected rows that leave `rows` are deselected silently, and reselected if they
|
|
233
233
|
return. See [View state](#view-state). In `checked` mode the row checkbox toggles
|
package/docs-user/grid-list.md
CHANGED
|
@@ -194,7 +194,7 @@ grid.addEventListener('list-select', ({ detail }) => {
|
|
|
194
194
|
```
|
|
195
195
|
|
|
196
196
|
Caller-owned selection: a cancelable `list-select-intent` fires before every gesture, and `partialKeys` marks partially selected cells (`data-partial`, `part="item partial"`).
|
|
197
|
-
See [Selection intents, partial rows, unloaded keys](
|
|
197
|
+
See [Selection intents, partial rows, unloaded keys](./user-selection-intents.md): `list-select-intent`, `partialKeys`, and keys that arrive later.
|
|
198
198
|
|
|
199
199
|
Restore across a reload:
|
|
200
200
|
|
package/docs-user/index.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@ixfx/components",
|
|
3
|
-
"version": "0.16.
|
|
4
|
-
"generated": "2026-11-
|
|
3
|
+
"version": "0.16.3",
|
|
4
|
+
"generated": "2026-11-02T20:40:41.501Z",
|
|
5
5
|
"components": [
|
|
6
6
|
{
|
|
7
7
|
"name": "ac-text",
|
|
@@ -313,6 +313,10 @@
|
|
|
313
313
|
"name": "user-catalog.md",
|
|
314
314
|
"path": "docs-user/user-catalog.md"
|
|
315
315
|
},
|
|
316
|
+
{
|
|
317
|
+
"name": "user-selection-intents.md",
|
|
318
|
+
"path": "docs-user/user-selection-intents.md"
|
|
319
|
+
},
|
|
316
320
|
{
|
|
317
321
|
"name": "user-theming.md",
|
|
318
322
|
"path": "docs-user/user-theming.md"
|
package/docs-user/llms.txt
CHANGED
|
@@ -75,4 +75,5 @@ import '@ixfx/components/data-grid';
|
|
|
75
75
|
## Overviews
|
|
76
76
|
- [infra-tickled.md](docs-user/infra-tickled.md)
|
|
77
77
|
- [user-catalog.md](docs-user/user-catalog.md)
|
|
78
|
+
- [user-selection-intents.md](docs-user/user-selection-intents.md)
|
|
78
79
|
- [user-theming.md](docs-user/user-theming.md)
|
package/docs-user/miller.md
CHANGED
|
@@ -149,6 +149,10 @@ The `change` event is fired on the component after every checkbox toggle.
|
|
|
149
149
|
|
|
150
150
|
---
|
|
151
151
|
|
|
152
|
+
## Selection intents and partial rows
|
|
153
|
+
|
|
154
|
+
`ixfx-miller-list` fires a cancelable `list-select-intent` before a click (all interaction modes, including `manual`), a checkbox toggle or a Shift+Arrow range changes the selection; `preventDefault()` means "I'll apply it". Navigation (opening the node's column) still happens. It also fires `list-select` `{ selectedKeys, previousKeys, previous }` next to `select`, and supports `partialKeys` (indeterminate checkbox in `checked` mode, `.partial` otherwise; selected wins; in `checked` mode it overrides the state derived from loaded descendants). In `checked` mode the checkbox intent is for the node only: the cascade to loaded descendants is the caller's call. See [Selection intents, partial rows, unloaded keys](./user-selection-intents.md).
|
|
155
|
+
|
|
152
156
|
## Selection API
|
|
153
157
|
|
|
154
158
|
```typescript
|
|
@@ -62,6 +62,12 @@ one column (the first category) once `categories` is assigned.
|
|
|
62
62
|
|
|
63
63
|
---
|
|
64
64
|
|
|
65
|
+
## Selection intents and partial rows
|
|
66
|
+
|
|
67
|
+
Gestures in a column (click, Space, Enter, Shift+Arrow, Cmd/Ctrl+A, marquee, the column's incremental search, the "All" row) fire a cancelable `list-select-intent` on the multicol host with `columnId` set; `keys` are that column's item keys. Going back to "All" is a `clear` intent. `preventDefault()` leaves the column alone.
|
|
68
|
+
|
|
69
|
+
`partialKeys` marks items as partially selected in every column that has an item with that key; `setColumnPartialKeys(columnId, keys)` adds keys for one column only. Selected wins. See [Selection intents, partial rows, unloaded keys](./user-selection-intents.md).
|
|
70
|
+
|
|
65
71
|
## Data flow
|
|
66
72
|
|
|
67
73
|
1. A selection change in column *i* re-queries **every other** column; column *i*'s list
|
|
@@ -98,7 +98,7 @@ Click an item (or Tab to the element) to focus it first — a focus ring appears
|
|
|
98
98
|
| `--select-horiz-spacer-width` | `10%` | Width of the leading/trailing spacer that lets the first/last item scroll to center |
|
|
99
99
|
| `--scroll-fade-width` | `30px` | Width of the edge fade and the inner horizontal padding (shared with `scrollFadeStyles`) |
|
|
100
100
|
|
|
101
|
-
Items are styled with the standard `--item-*` theming tokens (see [`docs/user-theming.md`](
|
|
101
|
+
Items are styled with the standard `--item-*` theming tokens (see [`docs/user-theming.md`](./user-theming.md)):
|
|
102
102
|
|
|
103
103
|
| Property | State |
|
|
104
104
|
|---|---|
|
package/docs-user/tree.md
CHANGED
|
@@ -424,6 +424,12 @@ el.addEventListener('select', ({ detail }) => {
|
|
|
424
424
|
|
|
425
425
|
---
|
|
426
426
|
|
|
427
|
+
### Selection intents and partial rows (`ixfx-tree-list`)
|
|
428
|
+
|
|
429
|
+
A cancelable `list-select-intent` fires before a click, Space, Enter, Shift+Arrow, Ctrl/Cmd+A, a checkbox or `selectAll()` changes the selection (in every interaction mode, including `manual`); `preventDefault()` means "I'll apply it". Expansion and the cursor still behave normally. Checking a branch in `checked` mode is one `toggle` intent with `descendants: true` and `checked` (the state it is being set to): `keys` lists the loaded selectable nodes under it, but the caller can express it as a rule ("this folder and everything under it"). `list-select` `{ selectedKeys, previousKeys, previous }` fires next to `select`.
|
|
430
|
+
|
|
431
|
+
`partialKeys` marks nodes as partially selected: in `checked` mode the checkbox is indeterminate if either the loaded descendants or `partialKeys` say so (selected wins over partial); otherwise `data-partial` and an accessible description. Incremental search in `select` mode fires a `match` intent first (see below). See [Selection intents, partial rows, unloaded keys](./user-selection-intents.md).
|
|
432
|
+
|
|
427
433
|
## Expansion
|
|
428
434
|
|
|
429
435
|
### Programmatic expansion
|
|
@@ -0,0 +1,86 @@
|
|
|
1
|
+
# Selection intents, partial rows, unloaded keys
|
|
2
|
+
|
|
3
|
+
Shared by every list-like component: `ixfx-vertical-list`, `ixfx-flat-list`, `ixfx-detail-list`, `ixfx-grid-list`, `ixfx-data-grid`, `ixfx-miller-list`, `ixfx-tree-list` and `ixfx-multicol-list`. For a caller that owns the selection itself (e.g. a selection that is an expression or a set of rules, not a key set), so a list shows what it is given and reports what the user did.
|
|
4
|
+
|
|
5
|
+
---
|
|
6
|
+
|
|
7
|
+
## `list-select-intent` (cancelable)
|
|
8
|
+
|
|
9
|
+
Fired **before** a component changes its selection, in every interaction mode (including `manual`, where nothing is selected by default). `preventDefault()` means "I apply this myself": the component changes nothing. Without it, behaviour is unchanged.
|
|
10
|
+
|
|
11
|
+
```ts
|
|
12
|
+
type ListSelectIntentDetail = {
|
|
13
|
+
readonly kind:
|
|
14
|
+
| `replace` // plain click / Enter: select only `keys`
|
|
15
|
+
| `toggle` // Cmd/Ctrl-click, Space, sticky tap, checkbox: flip `keys`
|
|
16
|
+
| `extend` // Shift-click / Shift+Arrow: range from `anchorKey` to `targetKey`
|
|
17
|
+
| `all` // Cmd/Ctrl+A or selectAll(): "everything in this view", not a key list
|
|
18
|
+
| `marquee` // drag-select: `keys` covered; `mode` says how they combine with the selection
|
|
19
|
+
| `match` // incremental search in `select` mode / "Select matches"
|
|
20
|
+
| `clear`; // Escape / click on empty space / back to "All" in a multicol column
|
|
21
|
+
readonly keys: readonly string[]; // keys directly affected (empty for `all` / `clear`)
|
|
22
|
+
readonly anchorKey?: string; // `extend`
|
|
23
|
+
readonly targetKey?: string; // `extend`
|
|
24
|
+
readonly mode?: `replace` | `add` | `toggle`; // `marquee`
|
|
25
|
+
readonly additive?: boolean; // `marquee`: `mode` is not `replace`
|
|
26
|
+
readonly query?: string; // `match`: the search text
|
|
27
|
+
readonly groupKey?: string | null; // `all`: the group the select-all is confined to
|
|
28
|
+
readonly descendants?: boolean; // `toggle` on a tree branch checkbox: node + loaded descendants
|
|
29
|
+
readonly checked?: boolean; // ...and the state it is being set to
|
|
30
|
+
readonly columnId?: string; // multicol-list: the column
|
|
31
|
+
readonly source: `pointer` | `keyboard` | `touch` | `api`;
|
|
32
|
+
};
|
|
33
|
+
```
|
|
34
|
+
|
|
35
|
+
```ts
|
|
36
|
+
list.addEventListener('list-select-intent', (e) => {
|
|
37
|
+
e.preventDefault();
|
|
38
|
+
const { kind, keys, anchorKey, targetKey } = e.detail;
|
|
39
|
+
// ...compute the new selection from your own model, then:
|
|
40
|
+
list.selectKeys(newKeys);
|
|
41
|
+
});
|
|
42
|
+
```
|
|
43
|
+
|
|
44
|
+
- **`extend` gives endpoints.** `keys` also holds the range as loaded here, but rows in between may not be loaded (virtualised / progressive listings): compute the range from your own order using `anchorKey` / `targetKey`.
|
|
45
|
+
- **`all` is a meaning, not a list.** Turn it into your own scope rule instead of enumerating keys. In grouped lists with `cross-group-selection` off, select-all is confined to one group (the anchor's group, else the cursor's): `groupKey` names it, so a caller that takes over does the same. It is absent when select-all is not confined.
|
|
46
|
+
- **`marquee` `mode`.** `replace`: the selection becomes the covered `keys` (plain drag). `add`: covered keys are added (Shift-drag). `toggle`: each covered key flips, so a Cmd/Ctrl-drag can deselect. `additive` is just `mode !== 'replace'`; use `mode`.
|
|
47
|
+
- **`match` is a search.** Incremental search in `select` mode (typing, and `selectMatches()` / the "Select matches" button) reports `{ kind: 'match', query, keys }` — `keys` are the current matches, a convenience; `query` is what to keep as a live rule. Cancelling it leaves the selection untouched while the popover keeps showing the matches. Source is `keyboard` while typing, `pointer` for the button, `api` for `selectMatches()`.
|
|
48
|
+
- **Tree branch checkboxes.** In `ixfx-tree-list` `checked` mode, checking a branch is one `toggle` with `descendants: true` and `checked` (the state the branch is being set to); `keys` lists the loaded selectable nodes under it, but express it as a rule.
|
|
49
|
+
- **Cursor and anchor keep moving when cancelled.** They are view state, not selection; the next `extend` still has its `anchorKey`.
|
|
50
|
+
- **Who fires it.** Gestures (click, Space, Enter, double-click, checkbox, Shift+Arrow, Cmd/Ctrl+A, marquee, Escape, click on empty space) and `selectAll()`. The imperative `select()` / `selectKeys()` / `clearSelection()` family never fires it, so applying your decision through them cannot re-enter your handler.
|
|
51
|
+
- **`manual` mode.** The intent is reported and nothing else happens, so the caller never re-implements modifier handling. (`ixfx-data-grid` keeps Space toggling in `manual`, as before.)
|
|
52
|
+
- **Not covered.** Right-click auto-select and the drag-origin auto-select of native drag-out still apply directly. `ixfx-miller-list` reports click / checkbox / Shift+Arrow; it has no select-all, and Escape navigates rather than clears. In `checked` mode a miller checkbox intent is for the node only; the descendant cascade is the caller's decision.
|
|
53
|
+
|
|
54
|
+
## `list-select` (consistent)
|
|
55
|
+
|
|
56
|
+
Every list-like component fires `list-select` with the same key-based detail:
|
|
57
|
+
|
|
58
|
+
```ts
|
|
59
|
+
{ selectedKeys: ReadonlySet<string>, previousKeys: ReadonlySet<string> /* , plus component-specific extras */ }
|
|
60
|
+
```
|
|
61
|
+
|
|
62
|
+
Vertical-list, detail-list and grid-list keep their element-based `selected` / `previous`; data-grid keeps `datagrid-select` (and adds `list-select` with `previous` as keys); miller keeps `select` (and adds `list-select`). One adapter can read any of them through `selectedKeys` / `previousKeys`. Miller now also fires for Cmd-click and Shift-click selection changes.
|
|
63
|
+
|
|
64
|
+
## `partialKeys`
|
|
65
|
+
|
|
66
|
+
A row whose resource is only partly selected (a time range of an audio file, a region of an image):
|
|
67
|
+
|
|
68
|
+
```ts
|
|
69
|
+
list.partialKeys = ['k1', 'k2']; // ReadonlySet<string> getter; replace-on-set
|
|
70
|
+
```
|
|
71
|
+
|
|
72
|
+
- Independent of `selectedKeys`; a key in both counts as selected.
|
|
73
|
+
- Light-DOM lists (vertical, detail): `data-partial` on the row; grid-list cell and data-grid row: `data-partial` plus `.partial` (`part="item partial"` on grid-list); miller: `.partial`.
|
|
74
|
+
- Accessibility: in `checked` mode the checkbox is indeterminate with `aria-checked="mixed"`; otherwise the row gets `aria-description="Partially selected"` (an author-set `aria-description` is never overwritten).
|
|
75
|
+
- Style hooks: `--item-bg-partial`, `--item-border-partial` (`--grid-list-partial-outline` on grid-list).
|
|
76
|
+
- `ixfx-flat-list` forwards `partialKeys` to its inner list. Miller's `checked` mode still derives indeterminate from loaded descendants; `partialKeys` overrides that for the keys you set.
|
|
77
|
+
|
|
78
|
+
## Selected keys that aren't loaded yet
|
|
79
|
+
|
|
80
|
+
`selectKeys()` on vertical-list, flat-list (`flat.list`), detail-list and grid-list keeps keys with no row yet as *pending* and selects them when the row appears (`selectedKeys` lists only present rows). `addSelectedKeys()` does the same; `removeSelectedKeys()` also drops pending keys. Any explicit gesture-driven selection change supersedes pending keys, in single-select only the last unresolved key is kept, and pending keys are capped (2000, oldest dropped). `ixfx-data-grid` already behaved this way. A key that is selected and then leaves the data is reselected if it returns (view-state pending).
|
|
81
|
+
|
|
82
|
+
## Per-component notes
|
|
83
|
+
|
|
84
|
+
- **`ixfx-tree-list`** — also fires `list-select` next to `select`. `partialKeys` combines with the checkbox state derived from loaded descendants: indeterminate if either says so; selected wins.
|
|
85
|
+
- **`ixfx-multicol-list`** — the intent is re-fired on the host with `columnId`; the "All" row is a `clear`. `partialKeys` applies to every column with a matching item key; `setColumnPartialKeys(columnId, keys)` targets one column.
|
|
86
|
+
- **`ixfx-miller-list`** — see above; `checked` mode checkbox intents are for the node only.
|
|
@@ -537,7 +537,7 @@ type ListItemClickDetail = { readonly item: Element };
|
|
|
537
537
|
### Caller-owned selection: `list-select-intent` and `partialKeys`
|
|
538
538
|
|
|
539
539
|
`list-select-intent` is fired before any gesture changes the selection (in every `interactionMode`, including `manual`); `preventDefault()` means "I'll apply it". `partialKeys` marks rows as partially selected (`data-partial`, indeterminate checkbox in `checked` mode). Both are shared across the list-like components.
|
|
540
|
-
See [Selection intents, partial rows, unloaded keys](
|
|
540
|
+
See [Selection intents, partial rows, unloaded keys](./user-selection-intents.md): `list-select-intent`, `partialKeys`, and keys that arrive later.
|
|
541
541
|
|
|
542
542
|
### Usage example
|
|
543
543
|
|
package/llms.txt
CHANGED
|
@@ -75,4 +75,5 @@ import '@ixfx/components/data-grid';
|
|
|
75
75
|
## Overviews
|
|
76
76
|
- [infra-tickled.md](docs-user/infra-tickled.md)
|
|
77
77
|
- [user-catalog.md](docs-user/user-catalog.md)
|
|
78
|
+
- [user-selection-intents.md](docs-user/user-selection-intents.md)
|
|
78
79
|
- [user-theming.md](docs-user/user-theming.md)
|
package/package.json
CHANGED
|
File without changes
|