@ixfx/components 0.16.1 → 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 +272 -58
- package/bundle/index.js +400 -337
- package/dist/ac-token.js +1 -1
- package/dist/{crumb-navigation-YnFVFqrx.js → crumb-navigation-D3ndPgFg.js} +2 -2
- package/dist/crumbs.js +1 -1
- package/dist/{data-grid-Cqxuwgbb.js → data-grid-8TsiF2ES.js} +142 -60
- package/dist/{data-grid-Csh5EJW9.d.ts → data-grid-CslzF16R.d.ts} +21 -3
- package/dist/data-grid.d.ts +2 -2
- package/dist/data-grid.js +1 -1
- package/dist/{detail-list-DSZ1DDor.d.ts → detail-list-n1MbNbhF.d.ts} +11 -3
- package/dist/{detail-list-Bo5ze3SN.js → detail-list-w3GXKO2k.js} +71 -19
- package/dist/detail-list.d.ts +2 -2
- package/dist/detail-list.js +1 -1
- package/dist/{flat-list-CT9kX3TQ.d.ts → flat-list-D_4y3wgn.d.ts} +7 -2
- package/dist/flat-list.d.ts +1 -1
- package/dist/flat-list.js +5 -2
- package/dist/{grid-list-DDLrWRxm.d.ts → grid-list-CqYS28NY.d.ts} +60 -14
- package/dist/{grid-list-D0dJNVEF.js → grid-list-Cz2tKcNZ.js} +55 -17
- package/dist/grid-list.d.ts +2 -2
- package/dist/grid-list.js +1 -1
- package/dist/{grouped-item-lister-DETte0Dh.d.ts → grouped-item-lister-CS4yInuw.d.ts} +1 -1
- package/dist/grouped-item-lister.d.ts +1 -1
- package/dist/{incr-search-CgbL-OlS.js → incr-search-Dc6gYpJG.js} +34 -5
- package/dist/incr-search.d.ts +1 -1
- package/dist/incr-search.js +1 -1
- package/dist/{index-CUErGhCg.d.ts → index-Bm9a9S3_.d.ts} +2 -1
- package/dist/{index-Bnm-kKGC.d.ts → index-DyaHA9Kk.d.ts} +20 -1
- package/dist/{index-D-lZNlHa.d.ts → index-VAs9akt4.d.ts} +18 -2
- package/dist/{index-DxyyVqzA.d.ts → index-ZaA90u09.d.ts} +1 -0
- package/dist/index.d.ts +45 -14
- package/dist/index.js +93 -17
- package/dist/{list-selection-controller-5L0Nj9tR.js → list-selection-controller-D4iIrvJH.js} +199 -57
- package/dist/list-selection-types-Dnamh2Lu.d.ts +109 -0
- package/dist/{menu-CU9KAm8s.js → menu-BX1FHxY8.js} +16 -1
- package/dist/{menu-item-BUv8An2k.js → menu-item-oxU1VKiJ.js} +34 -9
- package/dist/menu.d.ts +1 -1
- package/dist/menu.js +2 -2
- package/dist/{miller-DUqiUAWQ.js → miller-Be7x4ufN.js} +142 -10
- package/dist/miller.d.ts +1 -1
- package/dist/miller.js +1 -1
- package/dist/narrowed-text.js +1 -1
- package/dist/partial-keys-Ck6CiprB.js +32 -0
- package/dist/sunburst-tree.d.ts +1 -1
- package/dist/sunburst-tree.js +1 -1
- package/dist/{sunbursttree-list-DePuFYlU.d.ts → sunbursttree-list-Bk20giTF.d.ts} +1 -1
- package/dist/{sunbursttree-list-B_M0YTEA.js → sunbursttree-list-DQF6DcsS.js} +1 -1
- package/dist/timeline.d.ts +1 -1
- package/dist/{tree-DAlgvaHB.js → tree-BaXYyt5U.js} +185 -69
- package/dist/tree.d.ts +1 -1
- package/dist/tree.js +1 -1
- package/dist/{vertical-list-SAx56U-l.d.ts → vertical-list-DtHX26JO.d.ts} +11 -2
- package/dist/{vertical-list-DyKPKGxK.js → vertical-list-o5hfqH87.js} +54 -19
- 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 +10 -3
- package/docs-user/detail-list.md +1 -1
- package/docs-user/grid-list.md +4 -1
- package/docs-user/index.json +6 -2
- package/docs-user/llms.txt +1 -0
- package/docs-user/menu.md +11 -1
- 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 +9 -1
- package/llms.txt +1 -0
- package/package.json +1 -1
- package/dist/list-selection-types-PjKdhF-a.d.ts +0 -45
- /package/dist/{index-DV3iaUBW.d.ts → index-DV3iaUBW2.d.ts} +0 -0
package/dist/ac-token.js
CHANGED
|
@@ -4,7 +4,7 @@ import { t as themeFallbacks } from "./fallbacks-DQ_5OsmR.js";
|
|
|
4
4
|
import { n as safeCustomElement, t as __decorate } from "./decorate-VRK8rslU.js";
|
|
5
5
|
import "./icon-1gpwtPx8.js";
|
|
6
6
|
import { t as DataController } from "./data-controller-DOlmqNKb.js";
|
|
7
|
-
import {
|
|
7
|
+
import { h as createAcCompletionProvider } from "./incr-search-Dc6gYpJG.js";
|
|
8
8
|
import { LitElement, css, html, nothing } from "lit";
|
|
9
9
|
import { property, state } from "lit/decorators.js";
|
|
10
10
|
import { styleMap } from "lit/directives/style-map.js";
|
|
@@ -3,10 +3,10 @@ import { n as tickledStyles, t as tickledItemStyles } from "./tickled-styles-BrA
|
|
|
3
3
|
import { t as themeFallbacks } from "./fallbacks-DQ_5OsmR.js";
|
|
4
4
|
import { n as safeCustomElement, t as __decorate } from "./decorate-VRK8rslU.js";
|
|
5
5
|
import "./interaction-E-uMGHkJ.js";
|
|
6
|
-
import "./
|
|
6
|
+
import { t as scrollFadeStyles } from "./scroll-fade-Xx28D7mH.js";
|
|
7
|
+
import "./menu-item-oxU1VKiJ.js";
|
|
7
8
|
import { t as collectDataResult } from "./data-provider-35TyWclX.js";
|
|
8
9
|
import { t as ViewStateController } from "./view-state-controller-BdyXWUUM.js";
|
|
9
|
-
import { t as scrollFadeStyles } from "./scroll-fade-Xx28D7mH.js";
|
|
10
10
|
import "./narrowed-text.js";
|
|
11
11
|
import { LitElement, css, html, nothing } from "lit";
|
|
12
12
|
import { property, state } from "lit/decorators.js";
|
package/dist/crumbs.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import { t as CrumbNavigationElement } from "./crumb-navigation-
|
|
1
|
+
import { t as CrumbNavigationElement } from "./crumb-navigation-D3ndPgFg.js";
|
|
2
2
|
export { CrumbNavigationElement };
|
|
@@ -3,16 +3,17 @@ import { n as tickledStyles, t as tickledItemStyles } from "./tickled-styles-BrA
|
|
|
3
3
|
import { t as themeFallbacks } from "./fallbacks-DQ_5OsmR.js";
|
|
4
4
|
import { n as safeCustomElement, t as __decorate } from "./decorate-VRK8rslU.js";
|
|
5
5
|
import "./icon-1gpwtPx8.js";
|
|
6
|
-
import { i as ListSearchController, n as listSearchStyles, o as registerListSearchCommands, r as LIST_SEARCH_MODES } from "./incr-search-
|
|
6
|
+
import { i as ListSearchController, n as listSearchStyles, o as registerListSearchCommands, r as LIST_SEARCH_MODES } from "./incr-search-Dc6gYpJG.js";
|
|
7
7
|
import { t as handleStyles } from "./handle-DAXs7kbJ.js";
|
|
8
8
|
import { a as listItemFadeKeyframes, t as ListNativeDragController } from "./list-native-drag-controller-CcXoS0YX.js";
|
|
9
9
|
import { a as capKeys, l as keysToArray, n as EMPTY_KEYS, o as flagsFromRecord, r as MAX_PENDING_KEYS } from "./pending-BGidHppL.js";
|
|
10
|
+
import { i as sameKeySet, r as isPartialKey, t as PARTIAL_DESCRIPTION } from "./partial-keys-Ck6CiprB.js";
|
|
10
11
|
import "./interaction-E-uMGHkJ.js";
|
|
11
|
-
import { n as anchorFromRow, o as scrollToOffset, t as ViewStateController } from "./view-state-controller-BdyXWUUM.js";
|
|
12
12
|
import { t as scrollFadeStyles } from "./scroll-fade-Xx28D7mH.js";
|
|
13
|
+
import { n as anchorFromRow, o as scrollToOffset, t as ViewStateController } from "./view-state-controller-BdyXWUUM.js";
|
|
13
14
|
import { n as appearanceColor, t as appearanceAbsent } from "./item-appearance-BjcMyauw.js";
|
|
14
15
|
import { t as createDragGhost } from "./drag-ghost-DtSDvjri.js";
|
|
15
|
-
import "./menu-
|
|
16
|
+
import "./menu-BX1FHxY8.js";
|
|
16
17
|
import "./pan-text-CqtvjPyK.js";
|
|
17
18
|
import { LitElement, css, html, nothing } from "lit";
|
|
18
19
|
import { property, query, state } from "lit/decorators.js";
|
|
@@ -417,6 +418,7 @@ let DataGridElement = class DataGridElement extends LitElement {
|
|
|
417
418
|
this.#emitViewportChangeIfChanged();
|
|
418
419
|
});
|
|
419
420
|
};
|
|
421
|
+
this._partialKeys = /* @__PURE__ */ new Set();
|
|
420
422
|
this._onKeyDown = (e) => {
|
|
421
423
|
const before = this._tickled.tickledId;
|
|
422
424
|
this.#handleKeyDown(e);
|
|
@@ -581,6 +583,7 @@ let DataGridElement = class DataGridElement extends LitElement {
|
|
|
581
583
|
}
|
|
582
584
|
/* Hover: background only, no border change (avoids layout shift + colour flash). */
|
|
583
585
|
.row.item.tickled { background: var(--item-bg-tickled); color: var(--item-text-tickled); }
|
|
586
|
+
.row.item.partial:not(.selected) { background: var(--item-bg-partial, color-mix(in srgb, var(--item-bg-selected) 35%, transparent)); outline: 1px dashed var(--item-border-partial, var(--border)); outline-offset: -1px; }
|
|
584
587
|
.row.item.selected { background: var(--item-bg-selected); border: var(--item-border-selected); color: var(--item-text-selected); }
|
|
585
588
|
.row.item.selected.tickled { background: var(--item-bg-selected-tickled); }
|
|
586
589
|
.row.item.dragging-origin { opacity: 0.6; }
|
|
@@ -1130,24 +1133,96 @@ let DataGridElement = class DataGridElement extends LitElement {
|
|
|
1130
1133
|
if (this.#nativeDrag.isDragging || this.#postDragSuppressTimer !== 0) return;
|
|
1131
1134
|
if (col && col.selectable === false) return;
|
|
1132
1135
|
if (this.selectionMode === `none` && this.interactionMode !== `checked` && this.interactionMode !== `sticky`) return;
|
|
1133
|
-
|
|
1134
|
-
|
|
1135
|
-
|
|
1136
|
+
const source = e.pointerType === `touch` ? `touch` : `pointer`;
|
|
1137
|
+
const mode = this.interactionMode;
|
|
1138
|
+
const multi = this.selectionMode === `multiple` || mode === `vscode`;
|
|
1139
|
+
const modified = e.ctrlKey || e.metaKey;
|
|
1140
|
+
switch (mode) {
|
|
1141
|
+
case `implicit`:
|
|
1142
|
+
this.#requestReplace(rowKey, source);
|
|
1143
|
+
break;
|
|
1144
|
+
case `checked`: break;
|
|
1145
|
+
case `sticky`:
|
|
1146
|
+
this.#requestToggle(rowKey, source);
|
|
1147
|
+
break;
|
|
1148
|
+
case `manual`:
|
|
1149
|
+
if (modified) this.#requestToggle(rowKey, source);
|
|
1150
|
+
else if (e.shiftKey) this.#requestExtend(rowKey, source);
|
|
1151
|
+
else this.#requestReplace(rowKey, source);
|
|
1152
|
+
break;
|
|
1153
|
+
default: if (modified) {
|
|
1154
|
+
if (multi) this.#requestToggle(rowKey, source);
|
|
1155
|
+
} else if (e.shiftKey && multi) this.#requestExtend(rowKey, source);
|
|
1156
|
+
else this.#requestReplace(rowKey, source);
|
|
1157
|
+
}
|
|
1158
|
+
}
|
|
1159
|
+
_onCheckboxClick(rowKey, e) {
|
|
1160
|
+
e.stopPropagation();
|
|
1161
|
+
if (this.interactionMode === `checked`) this.#requestToggle(rowKey, `pointer`);
|
|
1162
|
+
else this._onRowClick(rowKey, null, e);
|
|
1163
|
+
}
|
|
1164
|
+
/** Report an intent before changing the selection; `true` when the caller took over. */
|
|
1165
|
+
#intercepted(intent) {
|
|
1166
|
+
return !this.dispatchEvent(new CustomEvent(`list-select-intent`, {
|
|
1167
|
+
detail: intent,
|
|
1168
|
+
bubbles: true,
|
|
1169
|
+
composed: true,
|
|
1170
|
+
cancelable: true
|
|
1171
|
+
}));
|
|
1172
|
+
}
|
|
1173
|
+
/** Select only `key`. In `manual` mode (or when cancelled) only the anchor moves. */
|
|
1174
|
+
#requestReplace(key, source) {
|
|
1175
|
+
if (this.selectionMode === `none`) return;
|
|
1176
|
+
if (this.#intercepted({
|
|
1177
|
+
kind: `replace`,
|
|
1178
|
+
keys: [key],
|
|
1179
|
+
source
|
|
1180
|
+
}) || this.interactionMode === `manual`) {
|
|
1181
|
+
this._anchorKey = key;
|
|
1136
1182
|
return;
|
|
1137
1183
|
}
|
|
1138
|
-
|
|
1139
|
-
|
|
1140
|
-
|
|
1184
|
+
this._replaceSelection(key);
|
|
1185
|
+
}
|
|
1186
|
+
/** Flip `key`. `applyInManual`: Space has always toggled in `manual` mode. */
|
|
1187
|
+
#requestToggle(key, source, applyInManual = false) {
|
|
1188
|
+
if (this.#intercepted({
|
|
1189
|
+
kind: `toggle`,
|
|
1190
|
+
keys: [key],
|
|
1191
|
+
source
|
|
1192
|
+
})) return;
|
|
1193
|
+
if (this.interactionMode === `manual` && !applyInManual) return;
|
|
1194
|
+
this._toggleSelection(key);
|
|
1195
|
+
}
|
|
1196
|
+
/** Extend the range from the anchor to `key`. */
|
|
1197
|
+
#requestExtend(key, source) {
|
|
1198
|
+
if (this.selectionMode === `none`) return;
|
|
1199
|
+
const range = this._anchorKey === void 0 ? void 0 : this.#rangeKeys(key);
|
|
1200
|
+
if (this.#intercepted({
|
|
1201
|
+
kind: `extend`,
|
|
1202
|
+
keys: range ?? [key],
|
|
1203
|
+
...this._anchorKey === void 0 ? {} : { anchorKey: this._anchorKey },
|
|
1204
|
+
targetKey: key,
|
|
1205
|
+
source
|
|
1206
|
+
})) {
|
|
1207
|
+
this._anchorKey ??= key;
|
|
1141
1208
|
return;
|
|
1142
1209
|
}
|
|
1143
|
-
if (
|
|
1144
|
-
|
|
1145
|
-
} else if (e.shiftKey && (this.selectionMode === `multiple` || this.interactionMode === `vscode`)) this._rangeSelectTo(rowKey);
|
|
1146
|
-
else this._replaceSelection(rowKey);
|
|
1210
|
+
if (this.interactionMode === `manual`) return;
|
|
1211
|
+
this._rangeSelectTo(key);
|
|
1147
1212
|
}
|
|
1148
|
-
|
|
1149
|
-
|
|
1150
|
-
this.
|
|
1213
|
+
/** Row keys between the anchor and `key` (inclusive), or `undefined` when the range degrades to a replace. */
|
|
1214
|
+
#rangeKeys(key) {
|
|
1215
|
+
if (!this._anchorKey) return void 0;
|
|
1216
|
+
let keys = this._flat.filter((f) => f.type === `row`).map((f) => f.key);
|
|
1217
|
+
if (this.groupBy && !this.crossGroupSelection) {
|
|
1218
|
+
const group = this._getGroupKey(this._getRowForKey(this._anchorKey) ?? { key: this._anchorKey });
|
|
1219
|
+
if (group !== this._getGroupKey(this._getRowForKey(key) ?? { key })) return void 0;
|
|
1220
|
+
keys = keys.filter((k) => this._getGroupKey(this._getRowForKey(k) ?? { key: k }) === group);
|
|
1221
|
+
}
|
|
1222
|
+
const a = keys.indexOf(this._anchorKey);
|
|
1223
|
+
const b = keys.indexOf(key);
|
|
1224
|
+
if (a < 0 || b < 0) return void 0;
|
|
1225
|
+
return keys.slice(Math.min(a, b), Math.max(a, b) + 1);
|
|
1151
1226
|
}
|
|
1152
1227
|
_onVisibilityToggle(col, checked) {
|
|
1153
1228
|
col.visible = checked;
|
|
@@ -1295,6 +1370,19 @@ let DataGridElement = class DataGridElement extends LitElement {
|
|
|
1295
1370
|
get selectedKeys() {
|
|
1296
1371
|
return this._selectedKeys;
|
|
1297
1372
|
}
|
|
1373
|
+
/**
|
|
1374
|
+
* Rows shown as *partially* selected (a part of the resource is selected):
|
|
1375
|
+
* `[data-partial]`, `.partial` and an accessible description. Independent of
|
|
1376
|
+
* `selectedKeys` — a key in both counts as selected. Replace-on-set; keys
|
|
1377
|
+
* without a row are kept for when the row appears.
|
|
1378
|
+
*/
|
|
1379
|
+
get partialKeys() {
|
|
1380
|
+
return this._partialKeys;
|
|
1381
|
+
}
|
|
1382
|
+
set partialKeys(keys) {
|
|
1383
|
+
const next = new Set(keys);
|
|
1384
|
+
if (!sameKeySet(next, this._partialKeys)) this._partialKeys = next;
|
|
1385
|
+
}
|
|
1298
1386
|
/** Replace the selection with these row keys (clamped to known rows). */
|
|
1299
1387
|
set selectedKeys(keys) {
|
|
1300
1388
|
this.selectKeys(keys);
|
|
@@ -1333,6 +1421,15 @@ let DataGridElement = class DataGridElement extends LitElement {
|
|
|
1333
1421
|
bubbles: true,
|
|
1334
1422
|
composed: true
|
|
1335
1423
|
}));
|
|
1424
|
+
this.dispatchEvent(new CustomEvent(`list-select`, {
|
|
1425
|
+
detail: {
|
|
1426
|
+
selectedKeys: new Set(this._selectedKeys),
|
|
1427
|
+
previousKeys: previous,
|
|
1428
|
+
previous
|
|
1429
|
+
},
|
|
1430
|
+
bubbles: true,
|
|
1431
|
+
composed: true
|
|
1432
|
+
}));
|
|
1336
1433
|
}
|
|
1337
1434
|
/** The row key under the cursor, or `undefined`. */
|
|
1338
1435
|
get tickledKey() {
|
|
@@ -1425,52 +1522,29 @@ let DataGridElement = class DataGridElement extends LitElement {
|
|
|
1425
1522
|
this.#dispatchSelect(prev);
|
|
1426
1523
|
}
|
|
1427
1524
|
_rangeSelectTo(key) {
|
|
1428
|
-
|
|
1525
|
+
const range = this.#rangeKeys(key);
|
|
1526
|
+
if (range === void 0) {
|
|
1429
1527
|
this._replaceSelection(key);
|
|
1430
1528
|
return;
|
|
1431
1529
|
}
|
|
1432
|
-
const keys = this._flat.filter((f) => f.type === `row`).map((f) => f.key);
|
|
1433
|
-
const a = keys.indexOf(this._anchorKey);
|
|
1434
|
-
const b = keys.indexOf(key);
|
|
1435
|
-
if (a < 0 || b < 0) {
|
|
1436
|
-
this._replaceSelection(key);
|
|
1437
|
-
return;
|
|
1438
|
-
}
|
|
1439
|
-
if (this.groupBy && !this.crossGroupSelection) {
|
|
1440
|
-
const anchorGroup = this._getGroupKey(this._getRowForKey(this._anchorKey) ?? { key: this._anchorKey });
|
|
1441
|
-
if (anchorGroup !== this._getGroupKey(this._getRowForKey(key) ?? { key })) {
|
|
1442
|
-
this._replaceSelection(key);
|
|
1443
|
-
return;
|
|
1444
|
-
}
|
|
1445
|
-
const groupKeys = keys.filter((k) => this._getGroupKey(this._getRowForKey(k) ?? { key: k }) === anchorGroup);
|
|
1446
|
-
const ga = groupKeys.indexOf(this._anchorKey);
|
|
1447
|
-
const gb = groupKeys.indexOf(key);
|
|
1448
|
-
if (ga < 0 || gb < 0) {
|
|
1449
|
-
this._replaceSelection(key);
|
|
1450
|
-
return;
|
|
1451
|
-
}
|
|
1452
|
-
const lo = Math.min(ga, gb);
|
|
1453
|
-
const hi = Math.max(ga, gb);
|
|
1454
|
-
const prev = new Set(this._selectedKeys);
|
|
1455
|
-
this._selectedKeys = new Set(groupKeys.slice(lo, hi + 1));
|
|
1456
|
-
this.#dispatchSelect(prev);
|
|
1457
|
-
return;
|
|
1458
|
-
}
|
|
1459
|
-
const lo = Math.min(a, b);
|
|
1460
|
-
const hi = Math.max(a, b);
|
|
1461
1530
|
const prev = new Set(this._selectedKeys);
|
|
1462
|
-
this._selectedKeys = new Set(
|
|
1531
|
+
this._selectedKeys = new Set(range);
|
|
1463
1532
|
this.#dispatchSelect(prev);
|
|
1464
1533
|
}
|
|
1465
1534
|
#handleKeyDown(e) {
|
|
1466
1535
|
if ((e.ctrlKey || e.metaKey) && e.key.toLowerCase() === `a`) {
|
|
1467
1536
|
if (this.selectionMode === `multiple` || this.interactionMode === `checked` || this.interactionMode === `sticky` || this.interactionMode === `vscode` || this.interactionMode === `standard`) {
|
|
1468
1537
|
e.preventDefault();
|
|
1538
|
+
const group = this.groupBy && !this.crossGroupSelection && this._anchorKey ? this._getGroupKey(this._getRowForKey(this._anchorKey) ?? { key: this._anchorKey }) : void 0;
|
|
1539
|
+
if (this.#intercepted({
|
|
1540
|
+
kind: `all`,
|
|
1541
|
+
keys: [],
|
|
1542
|
+
...group === void 0 ? {} : { groupKey: group },
|
|
1543
|
+
source: `keyboard`
|
|
1544
|
+
})) return;
|
|
1469
1545
|
const prev = new Set(this._selectedKeys);
|
|
1470
|
-
if (this.
|
|
1471
|
-
|
|
1472
|
-
this._selectedKeys = new Set(this._flat.filter((f) => f.type === `row` && this._getGroupKey(f.row) === g).map((f) => f.key));
|
|
1473
|
-
} else this._selectedKeys = new Set(this._flat.filter((f) => f.type === `row`).map((f) => f.key));
|
|
1546
|
+
if (group !== void 0) this._selectedKeys = new Set(this._flat.filter((f) => f.type === `row` && this._getGroupKey(f.row) === group).map((f) => f.key));
|
|
1547
|
+
else this._selectedKeys = new Set(this._flat.filter((f) => f.type === `row`).map((f) => f.key));
|
|
1474
1548
|
this.#dispatchSelect(prev);
|
|
1475
1549
|
}
|
|
1476
1550
|
return;
|
|
@@ -1515,14 +1589,14 @@ let DataGridElement = class DataGridElement extends LitElement {
|
|
|
1515
1589
|
case `ArrowDown`:
|
|
1516
1590
|
this._tickled.handleKeyboardNavigation(`next`);
|
|
1517
1591
|
if (this._tickled.tickledId) this._scrollRowIntoView(this._tickled.tickledId);
|
|
1518
|
-
if (this.interactionMode === `implicit` && this._tickled.tickledId) this
|
|
1519
|
-
if (e.shiftKey && (this.interactionMode === `standard` || this.interactionMode === `vscode`) && this._tickled.tickledId) this
|
|
1592
|
+
if (this.interactionMode === `implicit` && this._tickled.tickledId) this.#requestReplace(this._tickled.tickledId, `keyboard`);
|
|
1593
|
+
if (e.shiftKey && (this.interactionMode === `standard` || this.interactionMode === `vscode` || this.interactionMode === `manual`) && this._tickled.tickledId) this.#requestExtend(this._tickled.tickledId, `keyboard`);
|
|
1520
1594
|
break;
|
|
1521
1595
|
case `ArrowUp`:
|
|
1522
1596
|
this._tickled.handleKeyboardNavigation(`previous`);
|
|
1523
1597
|
if (this._tickled.tickledId) this._scrollRowIntoView(this._tickled.tickledId);
|
|
1524
|
-
if (this.interactionMode === `implicit` && this._tickled.tickledId) this
|
|
1525
|
-
if (e.shiftKey && (this.interactionMode === `standard` || this.interactionMode === `vscode`) && this._tickled.tickledId) this
|
|
1598
|
+
if (this.interactionMode === `implicit` && this._tickled.tickledId) this.#requestReplace(this._tickled.tickledId, `keyboard`);
|
|
1599
|
+
if (e.shiftKey && (this.interactionMode === `standard` || this.interactionMode === `vscode` || this.interactionMode === `manual`) && this._tickled.tickledId) this.#requestExtend(this._tickled.tickledId, `keyboard`);
|
|
1526
1600
|
break;
|
|
1527
1601
|
case `Home`:
|
|
1528
1602
|
this._tickled.handleKeyboardNavigation(`first`);
|
|
@@ -1561,7 +1635,7 @@ let DataGridElement = class DataGridElement extends LitElement {
|
|
|
1561
1635
|
this._activateRow(key, entry?.row, idx);
|
|
1562
1636
|
break;
|
|
1563
1637
|
}
|
|
1564
|
-
if (this.interactionMode !== `
|
|
1638
|
+
if (this.interactionMode !== `checked`) this.#requestReplace(key, `keyboard`);
|
|
1565
1639
|
this.dispatchEvent(new CustomEvent(`datagrid-cell-click`, {
|
|
1566
1640
|
detail: {
|
|
1567
1641
|
rowKey: key,
|
|
@@ -1602,8 +1676,8 @@ let DataGridElement = class DataGridElement extends LitElement {
|
|
|
1602
1676
|
const key = this._tickled.tickledId;
|
|
1603
1677
|
if (!key) break;
|
|
1604
1678
|
e.preventDefault();
|
|
1605
|
-
if (this.interactionMode === `checked` || this.interactionMode === `sticky` || this.interactionMode === `standard` || this.interactionMode === `vscode` || this.interactionMode === `manual`) this
|
|
1606
|
-
else this
|
|
1679
|
+
if (this.interactionMode === `checked` || this.interactionMode === `sticky` || this.interactionMode === `standard` || this.interactionMode === `vscode` || this.interactionMode === `manual`) this.#requestToggle(key, `keyboard`, true);
|
|
1680
|
+
else this.#requestReplace(key, `keyboard`);
|
|
1607
1681
|
break;
|
|
1608
1682
|
}
|
|
1609
1683
|
case `Escape`: if (this._editing || this._editingRow) {
|
|
@@ -1613,6 +1687,11 @@ let DataGridElement = class DataGridElement extends LitElement {
|
|
|
1613
1687
|
this.requestUpdate();
|
|
1614
1688
|
} else if (this._selectedKeys.size) {
|
|
1615
1689
|
e.preventDefault();
|
|
1690
|
+
if (this.#intercepted({
|
|
1691
|
+
kind: `clear`,
|
|
1692
|
+
keys: [],
|
|
1693
|
+
source: `keyboard`
|
|
1694
|
+
})) break;
|
|
1616
1695
|
const prev = new Set(this._selectedKeys);
|
|
1617
1696
|
this._selectedKeys = /* @__PURE__ */ new Set();
|
|
1618
1697
|
this.#dispatchSelect(prev);
|
|
@@ -2220,10 +2299,12 @@ let DataGridElement = class DataGridElement extends LitElement {
|
|
|
2220
2299
|
const absIdx2 = entry.idx;
|
|
2221
2300
|
const rowKey = entry.key;
|
|
2222
2301
|
const selected = this._selectedKeys.has(rowKey);
|
|
2302
|
+
const partial = isPartialKey(rowKey, this._partialKeys, selected);
|
|
2223
2303
|
const tickled = this._tickled.isTickled(rowKey);
|
|
2224
2304
|
return html`
|
|
2225
|
-
<div class="row item ${selected ? `selected` : ``} ${tickled ? `tickled` : ``} ${this.zebraStripes && absIdx2 % 2 === 1 ? `zebra-odd` : ``} ${this.#enteringRowKeys.has(rowKey) ? `entering` : ``} ${this.#nativeDragging && rowKey === this.#dragOriginKey ? `dragging-origin` : ``}" role="row" aria-rowindex=${absIdx + 2} aria-selected=${selected ? `true` : `false`} style="top:${absIdx * rh}px; height:${rh}px"
|
|
2305
|
+
<div class="row item ${selected ? `selected` : ``} ${partial ? `partial` : ``} ${tickled ? `tickled` : ``} ${this.zebraStripes && absIdx2 % 2 === 1 ? `zebra-odd` : ``} ${this.#enteringRowKeys.has(rowKey) ? `entering` : ``} ${this.#nativeDragging && rowKey === this.#dragOriginKey ? `dragging-origin` : ``}" role="row" aria-rowindex=${absIdx + 2} aria-selected=${selected ? `true` : `false`} aria-description=${partial ? PARTIAL_DESCRIPTION : nothing} style="top:${absIdx * rh}px; height:${rh}px"
|
|
2226
2306
|
data-key=${rowKey}
|
|
2307
|
+
?data-partial=${partial}
|
|
2227
2308
|
draggable=${this.#nativeDrag.draggableAttr}
|
|
2228
2309
|
@click=${(e) => {
|
|
2229
2310
|
this._onRowClick(rowKey, null, e);
|
|
@@ -2244,7 +2325,7 @@ let DataGridElement = class DataGridElement extends LitElement {
|
|
|
2244
2325
|
if (this._visibleColumns[0] && this._isEditable(row, this._visibleColumns[0])) this._startEdit(rowKey, this._visibleColumns[0].key);
|
|
2245
2326
|
else this._activateRow(rowKey, row, absIdx2);
|
|
2246
2327
|
}}>
|
|
2247
|
-
${showCheckbox ? html`<div class="checkbox-col"><input type="checkbox" .checked=${selected} @click=${(e) => this._onCheckboxClick(rowKey, e)} /></div>` : nothing}
|
|
2328
|
+
${showCheckbox ? html`<div class="checkbox-col"><input type="checkbox" .checked=${selected} .indeterminate=${partial} aria-checked=${partial ? `mixed` : String(selected)} @click=${(e) => this._onCheckboxClick(rowKey, e)} /></div>` : nothing}
|
|
2248
2329
|
${repeat(this._visibleColumns, (c) => c.key, (col) => {
|
|
2249
2330
|
const val = row[col.key];
|
|
2250
2331
|
if (this._isCellEditing(rowKey, col.key)) {
|
|
@@ -2535,6 +2616,7 @@ __decorate([state()], DataGridElement.prototype, "_lastClickedCell", void 0);
|
|
|
2535
2616
|
__decorate([state()], DataGridElement.prototype, "_editValue", void 0);
|
|
2536
2617
|
__decorate([query(`.viewport`)], DataGridElement.prototype, "_viewportEl", void 0);
|
|
2537
2618
|
__decorate([query(`.header-row`)], DataGridElement.prototype, "_headerRowEl", void 0);
|
|
2619
|
+
__decorate([state()], DataGridElement.prototype, "_partialKeys", void 0);
|
|
2538
2620
|
DataGridElement = __decorate([safeCustomElement(`ixfx-data-grid`)], DataGridElement);
|
|
2539
2621
|
//#endregion
|
|
2540
2622
|
export { DataGridElement as t };
|
|
@@ -3,8 +3,9 @@ import { L as ListDragPreviewRenderer, R as ListDragPreviewSourceResolver, V as
|
|
|
3
3
|
import { a as ViewStateBase, t as GetViewStateOptions } from "./types-LU1u0CB8.js";
|
|
4
4
|
import "./index-9ttcdwlL.js";
|
|
5
5
|
import { n as ListViewportChangeEvent, t as ListViewportChangeDetail } from "./list-viewport-types-BRZsLcvp.js";
|
|
6
|
-
import {
|
|
7
|
-
import "./index-
|
|
6
|
+
import { m as ListSelectKeysDetail, u as ListSelectIntentDetail } from "./list-selection-types-Dnamh2Lu.js";
|
|
7
|
+
import { S as ListSearchController } from "./index-Bm9a9S3_.js";
|
|
8
|
+
import "./index-ZaA90u09.js";
|
|
8
9
|
import "./pan-text-CoYmt2qd.js";
|
|
9
10
|
import { LitElement } from "lit";
|
|
10
11
|
import { CommandId, CommandRegistry } from "@clinth/ui-commands";
|
|
@@ -137,6 +138,12 @@ type DataGridSelectDetail = {
|
|
|
137
138
|
readonly previous: ReadonlySet<string>;
|
|
138
139
|
};
|
|
139
140
|
type DataGridSelectEvent = CustomEvent<DataGridSelectDetail>;
|
|
141
|
+
/** `list-select`: the same event name and key-based detail as the other list-like components. */
|
|
142
|
+
type DataGridListSelectDetail = ListSelectKeysDetail & {
|
|
143
|
+
readonly previous: ReadonlySet<string>;
|
|
144
|
+
};
|
|
145
|
+
type DataGridListSelectEvent = CustomEvent<DataGridListSelectDetail>;
|
|
146
|
+
type DataGridSelectIntentEvent = CustomEvent<ListSelectIntentDetail>;
|
|
140
147
|
type DataGridColumnReorderDetail = {
|
|
141
148
|
readonly from: number;
|
|
142
149
|
readonly to: number;
|
|
@@ -183,6 +190,8 @@ type DataGridViewportChangeEvent = ListViewportChangeEvent;
|
|
|
183
190
|
interface DataGridElementEventMap {
|
|
184
191
|
'datagrid-sort': DataGridSortEvent;
|
|
185
192
|
'datagrid-select': DataGridSelectEvent;
|
|
193
|
+
'list-select': DataGridListSelectEvent;
|
|
194
|
+
'list-select-intent': DataGridSelectIntentEvent;
|
|
186
195
|
'datagrid-column-reorder': DataGridColumnReorderEvent;
|
|
187
196
|
'datagrid-column-resize': DataGridColumnResizeEvent;
|
|
188
197
|
'datagrid-column-visibility': DataGridColumnVisibilityEvent;
|
|
@@ -343,6 +352,15 @@ declare class DataGridElement extends LitElement {
|
|
|
343
352
|
private _getRowForKey;
|
|
344
353
|
/** The selected row keys (read-only). */
|
|
345
354
|
get selectedKeys(): ReadonlySet<string>;
|
|
355
|
+
private _partialKeys;
|
|
356
|
+
/**
|
|
357
|
+
* Rows shown as *partially* selected (a part of the resource is selected):
|
|
358
|
+
* `[data-partial]`, `.partial` and an accessible description. Independent of
|
|
359
|
+
* `selectedKeys` — a key in both counts as selected. Replace-on-set; keys
|
|
360
|
+
* without a row are kept for when the row appears.
|
|
361
|
+
*/
|
|
362
|
+
get partialKeys(): ReadonlySet<string>;
|
|
363
|
+
set partialKeys(keys: Iterable<string>);
|
|
346
364
|
/** Replace the selection with these row keys (clamped to known rows). */
|
|
347
365
|
set selectedKeys(keys: Iterable<string>);
|
|
348
366
|
/**
|
|
@@ -449,4 +467,4 @@ interface DataGridElement {
|
|
|
449
467
|
removeEventListener: (<K extends keyof DataGridElementEventMap>(type: K, listener: (this: DataGridElement, event: DataGridElementEventMap[K]) => void, options?: boolean | EventListenerOptions) => void) & ((type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions) => void);
|
|
450
468
|
}
|
|
451
469
|
//#endregion
|
|
452
|
-
export {
|
|
470
|
+
export { DataGridColumn as A, DataGridInteractionMode as B, DataGridSortEvent as C, DataGridViewState as D, DataGridColumnViewState as E, DataGridEditorFactory as F, GlobalFormatter as G, DataGridSelectionMode as H, DataGridEditorType as I, DataGridGetRowKey as L, DataGridDataType as M, DataGridEditability as N, BuiltInFormatterName as O, DataGridEditorContext as P, DataGridGroupBy as R, DataGridSortDetail as S, DataGridViewportChangeEvent as T, DataGridSortDirection as U, DataGridRowLook as V, DataGridSortState as W, DataGridRowActivateDetail as _, DataGridColumnReorderDetail as a, DataGridSelectEvent as b, DataGridColumnResizeEvent as c, DataGridElement as d, DataGridElementEventMap as f, DataGridListSelectEvent as g, DataGridListSelectDetail as h, DataGridCellEditEvent as i, DataGridColumnMenu as j, BuiltInFormatterOptions as k, DataGridColumnVisibilityDetail as l, DataGridGroupChangeEvent as m, DataGridCellClickEvent as n, DataGridColumnReorderEvent as o, DataGridGroupChangeDetail as p, DataGridCellEditDetail as r, DataGridColumnResizeDetail as s, DataGridCellClickDetail as t, DataGridColumnVisibilityEvent as u, DataGridRowActivateEvent as v, DataGridViewportChangeDetail as w, DataGridSelectIntentEvent as x, DataGridSelectDetail as y, DataGridGroupLabel as z };
|
package/dist/data-grid.d.ts
CHANGED
|
@@ -1,3 +1,3 @@
|
|
|
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
|
-
import { A as
|
|
3
|
-
export { type BuiltInFormatterName, type BuiltInFormatterOptions, DataGridCellClickDetail, DataGridCellClickEvent, DataGridCellEditDetail, DataGridCellEditEvent, type DataGridColumn, type DataGridColumnMenu, DataGridColumnReorderDetail, DataGridColumnReorderEvent, DataGridColumnResizeDetail, DataGridColumnResizeEvent, type DataGridColumnViewState, DataGridColumnVisibilityDetail, DataGridColumnVisibilityEvent, type DataGridDataType, type DataGridEditability, type DataGridEditorContext, type DataGridEditorFactory, type DataGridEditorType, DataGridElement, DataGridElementEventMap, type DataGridGetRowKey, type DataGridGroupBy, DataGridGroupChangeDetail, DataGridGroupChangeEvent, type DataGridGroupLabel, type DataGridInteractionMode, DataGridRowActivateDetail, DataGridRowActivateEvent, type DataGridRowLook, DataGridSelectDetail, DataGridSelectEvent, type DataGridSelectionMode, DataGridSortDetail, type DataGridSortDirection, DataGridSortEvent, type DataGridSortState, type DataGridViewState, DataGridViewportChangeDetail, DataGridViewportChangeEvent, type GlobalFormatter, type ListDragEntry, type ListDragPreview, type ListDragPreviewContext, type ListDragPreviewRenderer, type ListDragSource, type ListNativeDragStartDetail, type ListNativeDragStartEvent };
|
|
2
|
+
import { A as DataGridColumn, B as DataGridInteractionMode, C as DataGridSortEvent, D as DataGridViewState, E as DataGridColumnViewState, F as DataGridEditorFactory, G as GlobalFormatter, H as DataGridSelectionMode, I as DataGridEditorType, L as DataGridGetRowKey, M as DataGridDataType, N as DataGridEditability, O as BuiltInFormatterName, P as DataGridEditorContext, R as DataGridGroupBy, S as DataGridSortDetail, T as DataGridViewportChangeEvent, U as DataGridSortDirection, V as DataGridRowLook, W as DataGridSortState, _ as DataGridRowActivateDetail, a as DataGridColumnReorderDetail, b as DataGridSelectEvent, c as DataGridColumnResizeEvent, d as DataGridElement, f as DataGridElementEventMap, g as DataGridListSelectEvent, h as DataGridListSelectDetail, i as DataGridCellEditEvent, j as DataGridColumnMenu, k as BuiltInFormatterOptions, l as DataGridColumnVisibilityDetail, m as DataGridGroupChangeEvent, n as DataGridCellClickEvent, o as DataGridColumnReorderEvent, p as DataGridGroupChangeDetail, r as DataGridCellEditDetail, s as DataGridColumnResizeDetail, t as DataGridCellClickDetail, u as DataGridColumnVisibilityEvent, v as DataGridRowActivateEvent, w as DataGridViewportChangeDetail, x as DataGridSelectIntentEvent, y as DataGridSelectDetail, z as DataGridGroupLabel } from "./data-grid-CslzF16R.js";
|
|
3
|
+
export { type BuiltInFormatterName, type BuiltInFormatterOptions, DataGridCellClickDetail, DataGridCellClickEvent, DataGridCellEditDetail, DataGridCellEditEvent, type DataGridColumn, type DataGridColumnMenu, DataGridColumnReorderDetail, DataGridColumnReorderEvent, DataGridColumnResizeDetail, DataGridColumnResizeEvent, type DataGridColumnViewState, DataGridColumnVisibilityDetail, DataGridColumnVisibilityEvent, type DataGridDataType, type DataGridEditability, type DataGridEditorContext, type DataGridEditorFactory, type DataGridEditorType, DataGridElement, DataGridElementEventMap, type DataGridGetRowKey, type DataGridGroupBy, DataGridGroupChangeDetail, DataGridGroupChangeEvent, type DataGridGroupLabel, type DataGridInteractionMode, DataGridListSelectDetail, DataGridListSelectEvent, DataGridRowActivateDetail, DataGridRowActivateEvent, type DataGridRowLook, DataGridSelectDetail, DataGridSelectEvent, DataGridSelectIntentEvent, type DataGridSelectionMode, DataGridSortDetail, type DataGridSortDirection, DataGridSortEvent, type DataGridSortState, type DataGridViewState, DataGridViewportChangeDetail, DataGridViewportChangeEvent, type GlobalFormatter, type ListDragEntry, type ListDragPreview, type ListDragPreviewContext, type ListDragPreviewRenderer, type ListDragSource, type ListNativeDragStartDetail, type ListNativeDragStartEvent };
|
package/dist/data-grid.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import { t as DataGridElement } from "./data-grid-
|
|
1
|
+
import { t as DataGridElement } from "./data-grid-8TsiF2ES.js";
|
|
2
2
|
export { DataGridElement };
|
|
@@ -4,10 +4,10 @@ import { L as ListDragPreviewRenderer, R as ListDragPreviewSourceResolver, V as
|
|
|
4
4
|
import { a as ViewStateBase, s as ViewStateChangeEvent, t as GetViewStateOptions } from "./types-LU1u0CB8.js";
|
|
5
5
|
import "./index-9ttcdwlL.js";
|
|
6
6
|
import { n as ListViewportChangeEvent } from "./list-viewport-types-BRZsLcvp.js";
|
|
7
|
-
import {
|
|
7
|
+
import { h as ListSelectionMode, i as ListInteractionMode, r as ListElementEventMap } from "./list-selection-types-Dnamh2Lu.js";
|
|
8
|
+
import { S as ListSearchController } from "./index-Bm9a9S3_.js";
|
|
8
9
|
import { a as ListGroupEventMap, o as ListGroupInfo, s as ListGroupLabel } from "./grouping-CUKgmkMm.js";
|
|
9
|
-
import {
|
|
10
|
-
import { n as CustomCheckboxOptions, t as AddItemOptions } from "./vertical-list-SAx56U-l.js";
|
|
10
|
+
import { n as CustomCheckboxOptions, t as AddItemOptions } from "./vertical-list-DtHX26JO.js";
|
|
11
11
|
import "./list-group-header.js";
|
|
12
12
|
import { LitElement, PropertyValues } from "lit";
|
|
13
13
|
import { CommandId, CommandRegistry } from "@clinth/ui-commands";
|
|
@@ -267,6 +267,14 @@ declare class DetailListElement extends LitElement {
|
|
|
267
267
|
* only the items whose state changed are touched, so hovering is O(1).
|
|
268
268
|
*/
|
|
269
269
|
private _syncItemStates;
|
|
270
|
+
/**
|
|
271
|
+
* Rows shown as *partially* selected (a part of the resource is selected):
|
|
272
|
+
* `data-partial`, an indeterminate checkbox in `checked` mode, and an
|
|
273
|
+
* accessible description. Independent of `selectedKeys` — a key in both
|
|
274
|
+
* counts as selected. Replace-on-set.
|
|
275
|
+
*/
|
|
276
|
+
get partialKeys(): ReadonlySet<string>;
|
|
277
|
+
set partialKeys(keys: Iterable<string>);
|
|
270
278
|
private _syncCheckboxes;
|
|
271
279
|
/**
|
|
272
280
|
* Native checkbox cell: a span that stretches to the row's full cross-axis
|