@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
|
@@ -2,15 +2,16 @@ import { t as TickledController } from "./tickled-controller-D-HZymaZ.js";
|
|
|
2
2
|
import { n as tickledStyles, t as tickledItemStyles } from "./tickled-styles-BrAHEj1q.js";
|
|
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
|
-
import { c as createElementListSearchAdapter,
|
|
5
|
+
import { c as createElementListSearchAdapter, f as createDataListSearchAdapter, i as ListSearchController, n as listSearchStyles, o as registerListSearchCommands, r as LIST_SEARCH_MODES, u as keyForElement } from "./incr-search-Dc6gYpJG.js";
|
|
6
6
|
import { i as resolveGroupKey, r as partitionByGroup } from "./grouping-RYPnHkrS.js";
|
|
7
7
|
import { a as listItemFadeKeyframes, t as ListNativeDragController } from "./list-native-drag-controller-CcXoS0YX.js";
|
|
8
|
-
import {
|
|
8
|
+
import { i as ListDragSelectController, n as gestureOf, t as ListSelectionController } from "./list-selection-controller-D4iIrvJH.js";
|
|
9
9
|
import { c as keysAsFlags, f as withoutFlag, i as capFlags, l as keysToArray, o as flagsFromRecord, s as flagsToRecord, t as EMPTY_FLAGS } from "./pending-BGidHppL.js";
|
|
10
|
+
import { i as sameKeySet, r as isPartialKey, t as PARTIAL_DESCRIPTION } from "./partial-keys-Ck6CiprB.js";
|
|
10
11
|
import { n as createScrollHoverGuard } from "./scroll-hover-guard-Cjw6179Q.js";
|
|
11
12
|
import "./interaction-E-uMGHkJ.js";
|
|
12
|
-
import { t as ViewStateController } from "./view-state-controller-BdyXWUUM.js";
|
|
13
13
|
import { t as scrollFadeStyles } from "./scroll-fade-Xx28D7mH.js";
|
|
14
|
+
import { t as ViewStateController } from "./view-state-controller-BdyXWUUM.js";
|
|
14
15
|
import { n as appearanceColor, t as appearanceAbsent } from "./item-appearance-BjcMyauw.js";
|
|
15
16
|
import "./pan-text-CqtvjPyK.js";
|
|
16
17
|
import "./list-group-header.js";
|
|
@@ -847,6 +848,7 @@ let GridListElement = class GridListElement extends LitElement {
|
|
|
847
848
|
interactionMode: this.interactionMode
|
|
848
849
|
}),
|
|
849
850
|
getKey: (k) => k,
|
|
851
|
+
onIntent: (intent) => this._dispatch(`list-select-intent`, intent, true) === false,
|
|
850
852
|
getGroupKey: (k) => this.groupBy === null ? null : this.#source.groupKeyOfKey(k),
|
|
851
853
|
crossGroupSelection: () => this.crossGroupSelection,
|
|
852
854
|
getFallbackGroupKey: () => {
|
|
@@ -940,8 +942,8 @@ let GridListElement = class GridListElement extends LitElement {
|
|
|
940
942
|
this.#marqueeRect = rect;
|
|
941
943
|
this.requestUpdate();
|
|
942
944
|
},
|
|
943
|
-
onCommit: (finalSet) => {
|
|
944
|
-
this.selection.applyDragSelection(finalSet);
|
|
945
|
+
onCommit: (finalSet, info) => {
|
|
946
|
+
this.selection.applyDragSelection(finalSet, info);
|
|
945
947
|
this.#marqueePreview = /* @__PURE__ */ new Set();
|
|
946
948
|
this.#marqueeRect = void 0;
|
|
947
949
|
this.requestUpdate();
|
|
@@ -968,6 +970,8 @@ let GridListElement = class GridListElement extends LitElement {
|
|
|
968
970
|
this.#resolveKey = (key) => this.#source.indexOfKey(key) >= 0 ? key : void 0;
|
|
969
971
|
this.#markedTickled = /* @__PURE__ */ new Set();
|
|
970
972
|
this.#markedSelected = /* @__PURE__ */ new Set();
|
|
973
|
+
this.#markedPartial = /* @__PURE__ */ new Set();
|
|
974
|
+
this.#partialKeys = /* @__PURE__ */ new Set();
|
|
971
975
|
this.#selectedSnapshot = /* @__PURE__ */ new Set();
|
|
972
976
|
this.#onScroll = (e) => {
|
|
973
977
|
const el = e.target;
|
|
@@ -1001,7 +1005,7 @@ let GridListElement = class GridListElement extends LitElement {
|
|
|
1001
1005
|
if ((e.ctrlKey || e.metaKey) && e.key === `a`) {
|
|
1002
1006
|
if (this.selection.canSelectAll()) {
|
|
1003
1007
|
e.preventDefault();
|
|
1004
|
-
this.selection.selectAll();
|
|
1008
|
+
this.selection.selectAll(`keyboard`);
|
|
1005
1009
|
}
|
|
1006
1010
|
return;
|
|
1007
1011
|
}
|
|
@@ -1065,7 +1069,7 @@ let GridListElement = class GridListElement extends LitElement {
|
|
|
1065
1069
|
if (id) {
|
|
1066
1070
|
e.preventDefault();
|
|
1067
1071
|
this.#emitItemEvent(`list-item-click`, id);
|
|
1068
|
-
this.#onCellActivate(id);
|
|
1072
|
+
this.#onCellActivate(id, `keyboard`);
|
|
1069
1073
|
}
|
|
1070
1074
|
break;
|
|
1071
1075
|
}
|
|
@@ -1079,7 +1083,7 @@ let GridListElement = class GridListElement extends LitElement {
|
|
|
1079
1083
|
}
|
|
1080
1084
|
case `Escape`:
|
|
1081
1085
|
if (this.#nativeDragging) this.#clearNativeDragState();
|
|
1082
|
-
this.selection.
|
|
1086
|
+
this.selection.handleClear(`keyboard`);
|
|
1083
1087
|
break;
|
|
1084
1088
|
default: return;
|
|
1085
1089
|
}
|
|
@@ -1314,6 +1318,11 @@ let GridListElement = class GridListElement extends LitElement {
|
|
|
1314
1318
|
outline: 2px solid var(--accent);
|
|
1315
1319
|
outline-offset: -2px;
|
|
1316
1320
|
}
|
|
1321
|
+
/* Partially selected: a dashed ring, lighter than a full selection. */
|
|
1322
|
+
.cell.partial:not(.selected) {
|
|
1323
|
+
outline: 2px dashed var(--grid-list-partial-outline, var(--accent));
|
|
1324
|
+
outline-offset: -2px;
|
|
1325
|
+
}
|
|
1317
1326
|
:host(:not([caption-style="separate"])) .cell.selected.tickled {
|
|
1318
1327
|
background: var(--item-bg-selected-tickled);
|
|
1319
1328
|
outline: 2px dashed var(--surface-3);
|
|
@@ -2489,6 +2498,24 @@ let GridListElement = class GridListElement extends LitElement {
|
|
|
2489
2498
|
/** Light-DOM items currently carrying `data-tickled` / `data-selected`. */
|
|
2490
2499
|
#markedTickled;
|
|
2491
2500
|
#markedSelected;
|
|
2501
|
+
#markedPartial;
|
|
2502
|
+
#partialKeys;
|
|
2503
|
+
/**
|
|
2504
|
+
* Cells shown as *partially* selected (a part of the resource is selected):
|
|
2505
|
+
* `data-partial` / `part="item partial"` and an accessible description.
|
|
2506
|
+
* Independent of `selectedKeys` — a key in both counts as selected.
|
|
2507
|
+
* Replace-on-set; keys without a cell are kept for when it appears.
|
|
2508
|
+
*/
|
|
2509
|
+
get partialKeys() {
|
|
2510
|
+
return this.#partialKeys;
|
|
2511
|
+
}
|
|
2512
|
+
set partialKeys(keys) {
|
|
2513
|
+
const next = new Set(keys);
|
|
2514
|
+
if (sameKeySet(next, this.#partialKeys)) return;
|
|
2515
|
+
this.#partialKeys = next;
|
|
2516
|
+
this._syncItemStates();
|
|
2517
|
+
this.requestUpdate();
|
|
2518
|
+
}
|
|
2492
2519
|
/**
|
|
2493
2520
|
* Mirror cursor / selection onto the light-DOM items as `data-tickled` /
|
|
2494
2521
|
* `data-selected`. Only the items whose state changed are touched, so a
|
|
@@ -2516,6 +2543,12 @@ let GridListElement = class GridListElement extends LitElement {
|
|
|
2516
2543
|
}
|
|
2517
2544
|
this.#markedTickled = syncMarker(`data-tickled`, this.#markedTickled, tickledEl ? /* @__PURE__ */ new Set([tickledEl]) : /* @__PURE__ */ new Set());
|
|
2518
2545
|
this.#markedSelected = syncMarker(`data-selected`, this.#markedSelected, selectedEls);
|
|
2546
|
+
const partialEls = /* @__PURE__ */ new Set();
|
|
2547
|
+
for (const key of this.#partialKeys) {
|
|
2548
|
+
const el = selected.has(key) ? void 0 : elementFor(key);
|
|
2549
|
+
if (el) partialEls.add(el);
|
|
2550
|
+
}
|
|
2551
|
+
this.#markedPartial = syncMarker(`data-partial`, this.#markedPartial, partialEls);
|
|
2519
2552
|
this.setAttribute(`data-input-mode`, this.tickled.inputMode);
|
|
2520
2553
|
}
|
|
2521
2554
|
#emitSelect(selected, previous) {
|
|
@@ -2641,6 +2674,7 @@ let GridListElement = class GridListElement extends LitElement {
|
|
|
2641
2674
|
#renderDataCell(index, win) {
|
|
2642
2675
|
const key = this.#source.keyAt(index);
|
|
2643
2676
|
const selected = this.#selectedSnapshot.has(key);
|
|
2677
|
+
const partial = isPartialKey(key, this.#partialKeys, selected);
|
|
2644
2678
|
const marquee = this.#marqueePreview.has(key);
|
|
2645
2679
|
const tickled = this.tickled.isTickled(key);
|
|
2646
2680
|
const selectable = this.#source.isSelectable(index);
|
|
@@ -2656,10 +2690,11 @@ let GridListElement = class GridListElement extends LitElement {
|
|
|
2656
2690
|
const icon = appearanceAbsent(rawIcon) ? void 0 : rawIcon;
|
|
2657
2691
|
return html`
|
|
2658
2692
|
<div
|
|
2659
|
-
class="cell${selected ? ` selected` : ``}${tickled ? ` tickled` : ``}${marquee ? ` marquee` : ``}${this.#recycledKeys.has(key) ? ` recycled` : ``}${this.#nativeDragging && key === this.#dragOriginKey ? ` dragging-origin` : ``}"
|
|
2660
|
-
part="item${selected ? ` selected` : ``}${tickled ? ` tickled` : ``}"
|
|
2693
|
+
class="cell${selected ? ` selected` : ``}${partial ? ` partial` : ``}${tickled ? ` tickled` : ``}${marquee ? ` marquee` : ``}${this.#recycledKeys.has(key) ? ` recycled` : ``}${this.#nativeDragging && key === this.#dragOriginKey ? ` dragging-origin` : ``}"
|
|
2694
|
+
part="item${selected ? ` selected` : ``}${partial ? ` partial` : ``}${tickled ? ` tickled` : ``}"
|
|
2661
2695
|
role="option"
|
|
2662
2696
|
aria-selected=${selected ? `true` : `false`}
|
|
2697
|
+
aria-description=${partial ? PARTIAL_DESCRIPTION : nothing}
|
|
2663
2698
|
aria-setsize=${this.#source.count}
|
|
2664
2699
|
aria-posinset=${index + 1}
|
|
2665
2700
|
style="width:${this.itemSize}px;height:${cellHeight}px;transform:translate(${x}px,${y}px)"
|
|
@@ -2667,6 +2702,7 @@ let GridListElement = class GridListElement extends LitElement {
|
|
|
2667
2702
|
data-key=${key}
|
|
2668
2703
|
draggable=${draggable ? `true` : `false`}
|
|
2669
2704
|
?data-selected=${selected}
|
|
2705
|
+
?data-partial=${partial}
|
|
2670
2706
|
?data-tickled=${tickled}
|
|
2671
2707
|
?data-marquee=${marquee}
|
|
2672
2708
|
@click=${(e) => this.#onCellClick(e, key)}
|
|
@@ -2763,6 +2799,7 @@ let GridListElement = class GridListElement extends LitElement {
|
|
|
2763
2799
|
#renderCell(el, index, win) {
|
|
2764
2800
|
const key = this.#source.keyAt(index);
|
|
2765
2801
|
const selected = this.#selectedSnapshot.has(key);
|
|
2802
|
+
const partial = isPartialKey(key, this.#partialKeys, selected);
|
|
2766
2803
|
const marquee = this.#marqueePreview.has(key);
|
|
2767
2804
|
const tickled = this.tickled.isTickled(key);
|
|
2768
2805
|
const entering = this.#entering.has(el);
|
|
@@ -2778,10 +2815,11 @@ let GridListElement = class GridListElement extends LitElement {
|
|
|
2778
2815
|
const captionCss = separate ? `height:${Math.max(0, this.captionHeight - 4)}px` : style === `under` ? `height:${this.captionHeight}px` : ``;
|
|
2779
2816
|
return html`
|
|
2780
2817
|
<div
|
|
2781
|
-
class="cell${selected ? ` selected` : ``}${tickled ? ` tickled` : ``}${entering ? ` entering` : ``}${marquee ? ` marquee` : ``}${this.#recycledKeys.has(key) ? ` recycled` : ``}${this.#nativeDragging && key === this.#dragOriginKey ? ` dragging-origin` : ``}"
|
|
2782
|
-
part="item${selected ? ` selected` : ``}${tickled ? ` tickled` : ``}"
|
|
2818
|
+
class="cell${selected ? ` selected` : ``}${partial ? ` partial` : ``}${tickled ? ` tickled` : ``}${entering ? ` entering` : ``}${marquee ? ` marquee` : ``}${this.#recycledKeys.has(key) ? ` recycled` : ``}${this.#nativeDragging && key === this.#dragOriginKey ? ` dragging-origin` : ``}"
|
|
2819
|
+
part="item${selected ? ` selected` : ``}${partial ? ` partial` : ``}${tickled ? ` tickled` : ``}"
|
|
2783
2820
|
role="option"
|
|
2784
2821
|
aria-selected=${selected ? `true` : `false`}
|
|
2822
|
+
aria-description=${partial ? PARTIAL_DESCRIPTION : nothing}
|
|
2785
2823
|
aria-setsize=${this.#source.count}
|
|
2786
2824
|
aria-posinset=${index + 1}
|
|
2787
2825
|
style="width:${this.itemSize}px;height:${cellHeight}px;transform:translate(${x}px,${y}px)"
|
|
@@ -2789,6 +2827,7 @@ let GridListElement = class GridListElement extends LitElement {
|
|
|
2789
2827
|
data-key=${key}
|
|
2790
2828
|
draggable=${draggable ? `true` : `false`}
|
|
2791
2829
|
?data-selected=${selected}
|
|
2830
|
+
?data-partial=${partial}
|
|
2792
2831
|
?data-tickled=${tickled}
|
|
2793
2832
|
?data-marquee=${marquee}
|
|
2794
2833
|
@click=${(e) => this.#onCellClick(e, key)}
|
|
@@ -2869,7 +2908,7 @@ let GridListElement = class GridListElement extends LitElement {
|
|
|
2869
2908
|
}
|
|
2870
2909
|
#onCellClick(e, key) {
|
|
2871
2910
|
if (this.#dragSelect.isDragging || this.#nativeDragging || this.#nativeDrag.isDragging || this.#postDragSuppressTimer !== 0) return;
|
|
2872
|
-
this.selection.handleClick(key, e);
|
|
2911
|
+
this.selection.handleClick(key, gestureOf(e));
|
|
2873
2912
|
this.#emitItemEvent(`list-item-click`, key);
|
|
2874
2913
|
}
|
|
2875
2914
|
/**
|
|
@@ -2882,11 +2921,10 @@ let GridListElement = class GridListElement extends LitElement {
|
|
|
2882
2921
|
*/
|
|
2883
2922
|
#onViewportClick(e) {
|
|
2884
2923
|
const mode = this.interactionMode;
|
|
2885
|
-
if (mode === `manual`) return;
|
|
2886
2924
|
if (this.selectionMode === `none` && mode !== `checked` && mode !== `sticky`) return;
|
|
2887
2925
|
if (this.#dragSelect.isDragging || this.#nativeDragging || this.#nativeDrag.isDragging || this.#postDragSuppressTimer !== 0) return;
|
|
2888
2926
|
for (const node of e.composedPath()) if (node instanceof Element && (node.classList.contains(`cell`) || node.classList.contains(`group-header`))) return;
|
|
2889
|
-
this.selection.
|
|
2927
|
+
this.selection.handleClear(`pointer`, true);
|
|
2890
2928
|
}
|
|
2891
2929
|
#startPostDragSuppressTimer() {
|
|
2892
2930
|
if (this.#postDragSuppressTimer) clearTimeout(this.#postDragSuppressTimer);
|
|
@@ -2900,8 +2938,8 @@ let GridListElement = class GridListElement extends LitElement {
|
|
|
2900
2938
|
this.toggleAttribute(`data-native-dragging`, false);
|
|
2901
2939
|
this.removeAttribute(`aria-label`);
|
|
2902
2940
|
}
|
|
2903
|
-
#onCellActivate(key) {
|
|
2904
|
-
|
|
2941
|
+
#onCellActivate(key, source = `pointer`) {
|
|
2942
|
+
this.selection.handleReplace(key, source);
|
|
2905
2943
|
this.#emitItemEvent(`list-activate`, key);
|
|
2906
2944
|
}
|
|
2907
2945
|
};
|
package/dist/grid-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
|
-
import { _ as GridListSelectEvent, a as GridListCaptionAlign, b as GridListViewportChangeDetail, c as GridListCaptionStyle, d as GridListFullElementEventMap, f as GridListItemClickDetail, g as GridListSelectDetail, h as GridListOrientation, i as GridListActivateEvent, l as GridListDataAdapter, m as GridListItemEventDetail, n as GridListViewState, o as GridListCaptionBackdrop, p as GridListItemClickEvent, r as GridListActivateDetail, s as GridListCaptionPosition, t as GridListElement, u as GridListElementEventMap, v as GridListTickleDetail, x as GridListViewportChangeEvent, y as GridListTickleEvent } from "./grid-list-
|
|
2
|
+
import { _ as GridListSelectEvent, a as GridListCaptionAlign, b as GridListViewportChangeDetail, c as GridListCaptionStyle, d as GridListFullElementEventMap, f as GridListItemClickDetail, g as GridListSelectDetail, h as GridListOrientation, i as GridListActivateEvent, l as GridListDataAdapter, m as GridListItemEventDetail, n as GridListViewState, o as GridListCaptionBackdrop, p as GridListItemClickEvent, r as GridListActivateDetail, s as GridListCaptionPosition, t as GridListElement, u as GridListElementEventMap, v as GridListTickleDetail, x as GridListViewportChangeEvent, y as GridListTickleEvent } from "./grid-list-CqYS28NY.js";
|
|
3
|
+
import { h as ListSelectionMode, i as ListInteractionMode } from "./list-selection-types-Dnamh2Lu.js";
|
|
3
4
|
import { i as ListGroupChangeEvent, l as ListGroupToggleDetail, n as ListGroupBy, o as ListGroupInfo, r as ListGroupChangeDetail, s as ListGroupLabel, u as ListGroupToggleEvent } from "./grouping-CUKgmkMm.js";
|
|
4
|
-
import { i as ListInteractionMode, l as ListSelectionMode } from "./list-selection-types-PjKdhF-a.js";
|
|
5
5
|
export { type GridListActivateDetail, type GridListActivateEvent, type GridListCaptionAlign, type GridListCaptionBackdrop, type GridListCaptionPosition, type GridListCaptionStyle, type GridListDataAdapter, GridListElement, type GridListElementEventMap, type GridListFullElementEventMap, type GridListItemClickDetail, type GridListItemClickEvent, type GridListItemEventDetail, type GridListOrientation, type GridListSelectDetail, type GridListSelectEvent, type GridListTickleDetail, type GridListTickleEvent, type GridListViewState, type GridListViewportChangeDetail, type GridListViewportChangeEvent, type ListDragEntry, type ListDragPreview, type ListDragPreviewContext, type ListDragPreviewRenderer, type ListDragSource, type ListGroupBy, type ListGroupChangeDetail, type ListGroupChangeEvent, type ListGroupInfo, type ListGroupLabel, type ListGroupToggleDetail, type ListGroupToggleEvent, type ListInteractionMode, type ListNativeDragStartDetail, type ListNativeDragStartEvent, type ListSelectionMode };
|
package/dist/grid-list.js
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { r as IDataProvider } from "./data-provider-BAn_-oR1.js";
|
|
2
|
-
import {
|
|
2
|
+
import { h as ListSelectionMode } from "./list-selection-types-Dnamh2Lu.js";
|
|
3
3
|
import "./panel.js";
|
|
4
4
|
import { LitElement, PropertyValues, nothing } from "lit";
|
|
5
5
|
import { CommandId } from "@clinth/ui-commands";
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import { a as IGroupedSubComponent, c as SubComponentActivateEvent, d as SubComponentItemClickEvent, f as SubComponentSelectDetail, h as SubComponentTickleEvent, i as GroupedSelectEvent, l as SubComponentFactory, m as SubComponentTickleDetail, n as GroupedItemListerElementEventMap, o as IGroupedSubComponentEventMap, p as SubComponentSelectEvent, r as GroupedSelectDetail, s as SubComponentActivateDetail, t as GroupedItemListerElement, u as SubComponentItemClickDetail } from "./grouped-item-lister-
|
|
1
|
+
import { a as IGroupedSubComponent, c as SubComponentActivateEvent, d as SubComponentItemClickEvent, f as SubComponentSelectDetail, h as SubComponentTickleEvent, i as GroupedSelectEvent, l as SubComponentFactory, m as SubComponentTickleDetail, n as GroupedItemListerElementEventMap, o as IGroupedSubComponentEventMap, p as SubComponentSelectEvent, r as GroupedSelectDetail, s as SubComponentActivateDetail, t as GroupedItemListerElement, u as SubComponentItemClickDetail } from "./grouped-item-lister-CS4yInuw.js";
|
|
2
2
|
export { GroupedItemListerElement, type GroupedItemListerElementEventMap, type GroupedSelectDetail, type GroupedSelectEvent, type IGroupedSubComponent, type IGroupedSubComponentEventMap, type SubComponentActivateDetail, type SubComponentActivateEvent, type SubComponentFactory, type SubComponentItemClickDetail, type SubComponentItemClickEvent, type SubComponentSelectDetail, type SubComponentSelectEvent, type SubComponentTickleDetail, type SubComponentTickleEvent };
|
|
@@ -288,6 +288,15 @@ function createDataListSearchAdapter(host, options) {
|
|
|
288
288
|
function keyForElement(el) {
|
|
289
289
|
return el.getAttribute(`data-key`) ?? el.getAttribute(`data-value`) ?? void 0;
|
|
290
290
|
}
|
|
291
|
+
/** The stable keys of a set of item elements (items without a key are omitted). */
|
|
292
|
+
function keysOfElements(els) {
|
|
293
|
+
const out = /* @__PURE__ */ new Set();
|
|
294
|
+
for (const el of els) {
|
|
295
|
+
const key = keyForElement(el);
|
|
296
|
+
if (key !== void 0) out.add(key);
|
|
297
|
+
}
|
|
298
|
+
return out;
|
|
299
|
+
}
|
|
291
300
|
/**
|
|
292
301
|
* A lazily-built key → element index over a container. Rebuilt on first use
|
|
293
302
|
* and after any child-list mutation under `root`; `invalidate()` forces a
|
|
@@ -737,11 +746,31 @@ var ListSearchController = class {
|
|
|
737
746
|
this.#host.updateComplete.then(() => this.#focusInput(true));
|
|
738
747
|
}
|
|
739
748
|
/** One-shot: turn the current match set into the selection, staying in the current mode. */
|
|
740
|
-
selectMatches() {
|
|
749
|
+
selectMatches(source = `api`) {
|
|
741
750
|
if (!this.#modes.includes(`select`)) return;
|
|
742
|
-
this.#
|
|
751
|
+
this.#selectCurrentMatches(source);
|
|
743
752
|
this.#host.requestUpdate();
|
|
744
753
|
}
|
|
754
|
+
/**
|
|
755
|
+
* Turn the current matches into the selection, after reporting a `match`
|
|
756
|
+
* intent on the host. A caller that takes over (`preventDefault()`) keeps
|
|
757
|
+
* the query; the popover still shows the matches either way.
|
|
758
|
+
*/
|
|
759
|
+
#selectCurrentMatches(source) {
|
|
760
|
+
const items = this.#currentItems();
|
|
761
|
+
const intent = {
|
|
762
|
+
kind: `match`,
|
|
763
|
+
keys: items.map((i) => this.#adapter.getKey(i)),
|
|
764
|
+
query: this.#query,
|
|
765
|
+
source
|
|
766
|
+
};
|
|
767
|
+
if (this.#host.dispatchEvent(new CustomEvent(`list-select-intent`, {
|
|
768
|
+
detail: intent,
|
|
769
|
+
bubbles: true,
|
|
770
|
+
composed: true,
|
|
771
|
+
cancelable: true
|
|
772
|
+
}))) this.#adapter.selectItems(items);
|
|
773
|
+
}
|
|
745
774
|
nextMatch() {
|
|
746
775
|
this.#cycle(1);
|
|
747
776
|
}
|
|
@@ -818,7 +847,7 @@ var ListSearchController = class {
|
|
|
818
847
|
${others.length > 0 || showSelectMatches ? html`
|
|
819
848
|
<div class="list-search-switch">
|
|
820
849
|
${others.map((m) => html`<button class="list-search-btn" title=${this.#switchTitle(m)} @click=${() => this.switchMode(m)}>${m}</button>`)}
|
|
821
|
-
${showSelectMatches ? html`<button class="list-search-btn" @click=${() => this.selectMatches()}>Select matches</button>` : nothing}
|
|
850
|
+
${showSelectMatches ? html`<button class="list-search-btn" @click=${() => this.selectMatches(`pointer`)}>Select matches</button>` : nothing}
|
|
822
851
|
</div>
|
|
823
852
|
` : nothing}
|
|
824
853
|
</div>
|
|
@@ -929,7 +958,7 @@ var ListSearchController = class {
|
|
|
929
958
|
this.#adapter.focusItem(this.#itemFor(this.#matches[this.#matchIndex]));
|
|
930
959
|
break;
|
|
931
960
|
case `select`:
|
|
932
|
-
this.#
|
|
961
|
+
this.#selectCurrentMatches(`keyboard`);
|
|
933
962
|
break;
|
|
934
963
|
case `filter`:
|
|
935
964
|
this.#adapter.applyFilter(new Set(this.#matches.map((m) => m.item.key)));
|
|
@@ -1147,4 +1176,4 @@ function createTreeListSearchAdapter(host, options = {}) {
|
|
|
1147
1176
|
};
|
|
1148
1177
|
}
|
|
1149
1178
|
//#endregion
|
|
1150
|
-
export { LIST_SEARCH_COMMAND_IDS as a, createElementListSearchAdapter as c,
|
|
1179
|
+
export { LIST_SEARCH_COMMAND_IDS as a, createElementListSearchAdapter as c, keysOfElements as d, createDataListSearchAdapter as f, createFuzzySearch as g, createAcCompletionProvider as h, ListSearchController as i, KeyedElementIndex as l, createIncrSearch as m, listSearchStyles as n, registerListSearchCommands as o, IncrSearchTreeController as p, LIST_SEARCH_MODES as r, createElementIncrSearch as s, createTreeListSearchAdapter as t, keyForElement as u };
|
package/dist/incr-search.d.ts
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import { A as FuzzySearch, C as ListSearchControllerOptions, D as IncrSearchTreeOptions, E as IncrSearchTreeController, F as IncrSearchChangeCallback, I as IncrSearchOptions, L as IncrSearchResult, M as HighlightOptions, N as HighlightTarget, O as createAcCompletionProvider, P as IncrSearch, R as IncrSearchState, S as ListSearchController, T as ListSearchMode, _ as DataListSearchAdapterOptions, a as RegisterListSearchCommandsOptions, b as LIST_SEARCH_MODES, c as applyHighlights, d as createFuzzySearch, f as ElementIncrSearch, g as createElementListSearchAdapter, h as ElementListSearchHost, i as LIST_SEARCH_COMMAND_IDS, j as FuzzySearchOptions, k as ElementIncrSearchOptions, l as buildHighlightTargets, m as ElementListSearchAdapterOptions, n as createTreeListSearchAdapter, o as registerListSearchCommands, p as createElementIncrSearch, r as listSearchStyles, s as createIncrSearch, t as TreeListSearchAdapterOptions, u as clearHighlights, v as DataListSearchItem, w as ListSearchHost, x as ListSearchAdapter, y as createDataListSearchAdapter } from "./index-
|
|
1
|
+
import { A as FuzzySearch, C as ListSearchControllerOptions, D as IncrSearchTreeOptions, E as IncrSearchTreeController, F as IncrSearchChangeCallback, I as IncrSearchOptions, L as IncrSearchResult, M as HighlightOptions, N as HighlightTarget, O as createAcCompletionProvider, P as IncrSearch, R as IncrSearchState, S as ListSearchController, T as ListSearchMode, _ as DataListSearchAdapterOptions, a as RegisterListSearchCommandsOptions, b as LIST_SEARCH_MODES, c as applyHighlights, d as createFuzzySearch, f as ElementIncrSearch, g as createElementListSearchAdapter, h as ElementListSearchHost, i as LIST_SEARCH_COMMAND_IDS, j as FuzzySearchOptions, k as ElementIncrSearchOptions, l as buildHighlightTargets, m as ElementListSearchAdapterOptions, n as createTreeListSearchAdapter, o as registerListSearchCommands, p as createElementIncrSearch, r as listSearchStyles, s as createIncrSearch, t as TreeListSearchAdapterOptions, u as clearHighlights, v as DataListSearchItem, w as ListSearchHost, x as ListSearchAdapter, y as createDataListSearchAdapter } from "./index-Bm9a9S3_.js";
|
|
2
2
|
export { type DataListSearchAdapterOptions, type DataListSearchItem, type ElementIncrSearch, type ElementIncrSearchOptions, type ElementListSearchAdapterOptions, type ElementListSearchHost, type FuzzySearch, type FuzzySearchOptions, type HighlightOptions, type HighlightTarget, type IncrSearch, type IncrSearchChangeCallback, IncrSearchTreeController as IncrSearchMillerController, IncrSearchTreeController, type IncrSearchTreeOptions as IncrSearchMillerOptions, type IncrSearchTreeOptions, type IncrSearchOptions, type IncrSearchResult, type IncrSearchState, LIST_SEARCH_COMMAND_IDS, LIST_SEARCH_MODES, type ListSearchAdapter, ListSearchController, type ListSearchControllerOptions, type ListSearchHost, type ListSearchMode, type RegisterListSearchCommandsOptions, type TreeListSearchAdapterOptions, applyHighlights, buildHighlightTargets, clearHighlights, createAcCompletionProvider, createDataListSearchAdapter, createElementIncrSearch, createElementListSearchAdapter, createFuzzySearch, createIncrSearch, createTreeListSearchAdapter, listSearchStyles, registerListSearchCommands };
|
package/dist/incr-search.js
CHANGED
|
@@ -1,3 +1,3 @@
|
|
|
1
1
|
import { n as buildHighlightTargets, r as clearHighlights, t as applyHighlights } from "./highlight-B-eQrhhb.js";
|
|
2
|
-
import { a as LIST_SEARCH_COMMAND_IDS, c as createElementListSearchAdapter,
|
|
2
|
+
import { a as LIST_SEARCH_COMMAND_IDS, c as createElementListSearchAdapter, f as createDataListSearchAdapter, g as createFuzzySearch, h as createAcCompletionProvider, i as ListSearchController, m as createIncrSearch, n as listSearchStyles, o as registerListSearchCommands, p as IncrSearchTreeController, r as LIST_SEARCH_MODES, s as createElementIncrSearch, t as createTreeListSearchAdapter } from "./incr-search-Dc6gYpJG.js";
|
|
3
3
|
export { IncrSearchTreeController as IncrSearchMillerController, IncrSearchTreeController, LIST_SEARCH_COMMAND_IDS, LIST_SEARCH_MODES, ListSearchController, applyHighlights, buildHighlightTargets, clearHighlights, createAcCompletionProvider, createDataListSearchAdapter, createElementIncrSearch, createElementListSearchAdapter, createFuzzySearch, createIncrSearch, createTreeListSearchAdapter, listSearchStyles, registerListSearchCommands };
|
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
import "./icon-CDGprSdE.js";
|
|
2
2
|
import { E as TreeSearchHost } from "./tree-component-DgfkxmVY.js";
|
|
3
3
|
import { o as TreeNode } from "./types-Jky6oNAp.js";
|
|
4
|
+
import { p as ListSelectIntentSource } from "./list-selection-types-Dnamh2Lu.js";
|
|
4
5
|
import { ReactiveController, ReactiveControllerHost, TemplateResult, nothing } from "lit";
|
|
5
6
|
import { FzfOptions } from "fzf";
|
|
6
7
|
import { CommandRegistry } from "@clinth/ui-commands";
|
|
@@ -259,7 +260,7 @@ declare class ListSearchController<TItem> implements ReactiveController {
|
|
|
259
260
|
/** Refocus the popover input (text selected) without touching the query. No-op when closed. */
|
|
260
261
|
focus(): void;
|
|
261
262
|
/** One-shot: turn the current match set into the selection, staying in the current mode. */
|
|
262
|
-
selectMatches(): void;
|
|
263
|
+
selectMatches(source?: ListSelectIntentSource): void;
|
|
263
264
|
nextMatch(): void;
|
|
264
265
|
prevMatch(): void;
|
|
265
266
|
/**
|
|
@@ -2,7 +2,8 @@ import { E as TreeSearchHost, M as TreeDataModel, a as TreeComponent, i as TreeC
|
|
|
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
3
|
import { a as ViewStateBase, n as ScrollState, t as GetViewStateOptions } from "./types-LU1u0CB8.js";
|
|
4
4
|
import "./index-9ttcdwlL.js";
|
|
5
|
-
import {
|
|
5
|
+
import { m as ListSelectKeysDetail, u as ListSelectIntentDetail } from "./list-selection-types-Dnamh2Lu.js";
|
|
6
|
+
import { S as ListSearchController } from "./index-Bm9a9S3_.js";
|
|
6
7
|
import { n as TickledController } from "./tickled-controller-DodxD3eQ.js";
|
|
7
8
|
import { LitElement, PropertyValues, TemplateResult, nothing } from "lit";
|
|
8
9
|
import { CommandRegistry } from "@clinth/ui-commands";
|
|
@@ -240,6 +241,20 @@ declare class MillerBaseElement extends LitElement implements TreeComponent, Tre
|
|
|
240
241
|
clearSelection(): void;
|
|
241
242
|
/** Not implemented on miller-list. */
|
|
242
243
|
selectAll(): void;
|
|
244
|
+
private _partialKeys;
|
|
245
|
+
/**
|
|
246
|
+
* Nodes shown as *partially* selected (a part of the resource is selected):
|
|
247
|
+
* an indeterminate checkbox in `checked` mode, `.partial` and an accessible
|
|
248
|
+
* description otherwise. Independent of the selection — a key in both counts
|
|
249
|
+
* as selected. In `checked` mode this overrides the state derived from
|
|
250
|
+
* loaded descendants. Replace-on-set.
|
|
251
|
+
*/
|
|
252
|
+
get partialKeys(): ReadonlySet<string>;
|
|
253
|
+
set partialKeys(keys: Iterable<string>);
|
|
254
|
+
/** Accessible description for a partial row outside checked mode. */
|
|
255
|
+
protected readonly _partialDescription = "Partially selected";
|
|
256
|
+
/** Whether `node` is shown as partial (and, being selected, not). */
|
|
257
|
+
protected _isPartial(node: TreeNode, depth: number): boolean;
|
|
243
258
|
/** Not implemented on miller-list. */
|
|
244
259
|
deselectAll(): void;
|
|
245
260
|
/**
|
|
@@ -346,6 +361,10 @@ interface MillerBaseElementEventMap extends TreeComponentEventMap {
|
|
|
346
361
|
'expand': TreeExpandEvent;
|
|
347
362
|
'collapse': TreeCollapseEvent;
|
|
348
363
|
'select': TreeSelectEvent;
|
|
364
|
+
'list-select': CustomEvent<ListSelectKeysDetail & {
|
|
365
|
+
previous: ReadonlySet<TreeNode>;
|
|
366
|
+
}>;
|
|
367
|
+
'list-select-intent': CustomEvent<ListSelectIntentDetail>;
|
|
349
368
|
'tickle': TreeTickleEvent;
|
|
350
369
|
'activate': TreeActivateEvent;
|
|
351
370
|
'item-dblclick': CustomEvent<MillerItemDblClickDetail>;
|
|
@@ -2,7 +2,8 @@ import { B as ListNativeDragStartDetail, C as TreeItemDblClickEvent, D as TreeSe
|
|
|
2
2
|
import { a as TreeItem, i as TreeInteractionMode, n as TreeExclusivity, o as TreeNode, r as TreeFilterPredicate, s as TreeSelectionFilter, t as LoadChildrenCallback } from "./types-Jky6oNAp.js";
|
|
3
3
|
import { a as ViewStateBase, t as GetViewStateOptions } from "./types-LU1u0CB8.js";
|
|
4
4
|
import "./index-9ttcdwlL.js";
|
|
5
|
-
import {
|
|
5
|
+
import { m as ListSelectKeysDetail, p as ListSelectIntentSource, u as ListSelectIntentDetail } from "./list-selection-types-Dnamh2Lu.js";
|
|
6
|
+
import { S as ListSearchController } from "./index-Bm9a9S3_.js";
|
|
6
7
|
import { t as ListNativeDragController } from "./list-native-drag-controller-D_UrXipS.js";
|
|
7
8
|
import { n as TickledController } from "./tickled-controller-DodxD3eQ.js";
|
|
8
9
|
import { LitElement, PropertyValues, ReactiveController, ReactiveControllerHost, TemplateResult, nothing } from "lit";
|
|
@@ -219,7 +220,7 @@ declare class TreeBaseElement extends LitElement implements TreeComponent, TreeS
|
|
|
219
220
|
}>;
|
|
220
221
|
protected renderNodeContent(node: TreeNode, depth: number): TemplateResult | typeof nothing;
|
|
221
222
|
protected _handleItemClick(node: TreeNode, depth: number, event?: MouseEvent): void;
|
|
222
|
-
protected _handleCheckboxClick(event: MouseEvent, node: TreeNode, _depth: number): void;
|
|
223
|
+
protected _handleCheckboxClick(event: MouseEvent, node: TreeNode, _depth: number, source?: ListSelectIntentSource): void;
|
|
223
224
|
protected _isSelected(node: TreeNode): boolean;
|
|
224
225
|
protected _isFocused(node: TreeNode): boolean;
|
|
225
226
|
protected _isExpanded(node: TreeNode, _depth?: number): boolean;
|
|
@@ -256,6 +257,10 @@ interface TreeBaseElementEventMap extends TreeComponentEventMap {
|
|
|
256
257
|
'expand': TreeExpandEvent;
|
|
257
258
|
'collapse': TreeCollapseEvent;
|
|
258
259
|
'select': TreeSelectEvent;
|
|
260
|
+
'list-select': CustomEvent<ListSelectKeysDetail & {
|
|
261
|
+
previous: ReadonlySet<TreeNode>;
|
|
262
|
+
}>;
|
|
263
|
+
'list-select-intent': CustomEvent<ListSelectIntentDetail>;
|
|
259
264
|
'tickle': TreeTickleEvent;
|
|
260
265
|
'activate': TreeActivateEvent;
|
|
261
266
|
'list-native-drag-start': CustomEvent<ListNativeDragStartDetail<TreeNode>>;
|
|
@@ -302,6 +307,17 @@ declare class TreeListElement extends TreeBaseElement {
|
|
|
302
307
|
* up with selectable siblings. When off (default) they reserve no space.
|
|
303
308
|
*/
|
|
304
309
|
alignCheckboxes: boolean;
|
|
310
|
+
private _partialKeys;
|
|
311
|
+
/**
|
|
312
|
+
* Nodes shown as *partially* selected (a part of the resource is selected):
|
|
313
|
+
* `data-partial`, an indeterminate checkbox in `checked` mode, and an
|
|
314
|
+
* accessible description otherwise. Independent of the selection — a key in
|
|
315
|
+
* both counts as selected. In `checked` mode it combines with the state
|
|
316
|
+
* derived from loaded descendants: a node is indeterminate if either says so.
|
|
317
|
+
* Replace-on-set.
|
|
318
|
+
*/
|
|
319
|
+
get partialKeys(): ReadonlySet<string>;
|
|
320
|
+
set partialKeys(keys: Iterable<string>);
|
|
305
321
|
willUpdate(changedProps: PropertyValues): void;
|
|
306
322
|
protected renderNodeContent(node: TreeNode, depth: number): TemplateResult;
|
|
307
323
|
protected _renderNode(node: TreeNode, depth: number): TemplateResult;
|