@ixfx/components 0.18.0 → 0.18.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/bundle/index.d.ts +209 -4
- package/bundle/index.js +359 -319
- package/dist/ac-text.js +1 -1
- package/dist/ac-token.js +2 -2
- package/dist/{checked-select-DsQ-o9lI.js → checked-select-CC-qSO1P.js} +2 -2
- package/dist/checked-select.js +1 -1
- package/dist/{crumb-navigation-09YFje6W.js → crumb-navigation-C78edQGt.js} +3 -3
- package/dist/crumbs.js +1 -1
- package/dist/{data-grid-BQWmVYg0.d.ts → data-grid-BYMZZbNc.d.ts} +25 -2
- package/dist/{data-grid-BGmJbMCb.js → data-grid-CJrbLzLr.js} +79 -18
- package/dist/data-grid.d.ts +1 -1
- package/dist/data-grid.js +1 -1
- package/dist/{detail-list-CfjoIl2N.d.ts → detail-list-CBgnKkEm.d.ts} +29 -3
- package/dist/{detail-list-CrHASoAx.js → detail-list-Dk9oSvAZ.js} +74 -10
- package/dist/detail-list.d.ts +2 -2
- package/dist/detail-list.js +1 -1
- package/dist/{flat-list-C2z81bK6.d.ts → flat-list-D5glF_vD.d.ts} +1 -1
- package/dist/flat-list.d.ts +1 -1
- package/dist/flat-list.js +3 -3
- package/dist/{grid-list-DYU_z2K9.js → grid-list-0wC2xGBS.js} +103 -14
- package/dist/{grid-list-Crv-hFJL.d.ts → grid-list-B3T_2N0N.d.ts} +26 -2
- package/dist/grid-list.d.ts +1 -1
- package/dist/grid-list.js +1 -1
- package/dist/{incr-search-C5114RxZ.js → incr-search-Bk4acsCM.js} +14 -6
- package/dist/incr-search.d.ts +1 -1
- package/dist/incr-search.js +1 -1
- package/dist/{index-BymYKGY-.d.ts → index-BIv_Hu7C.d.ts} +2 -2
- package/dist/{index-Db5VGFR1.d.ts → index-BuvySJEc.d.ts} +4 -0
- package/dist/{index-BE0hk8xS.d.ts → index-fhZCKSY6.d.ts} +2 -2
- package/dist/index.d.ts +63 -17
- package/dist/index.js +200 -37
- package/dist/interaction-DNuFnTm0.js +3 -0
- package/dist/item-tags-Dz-jQq-4.d.ts +65 -0
- package/dist/{list-native-drag-controller-Brk30s5d.js → list-native-drag-controller-B_INa6_G.js} +106 -1
- package/dist/{menu-B6NFqEtm.js → menu-CgT60B3-.js} +2 -2
- package/dist/{menu-item-D0zy1yax.js → menu-item-CbywH4Xo.js} +2 -2
- package/dist/menu.js +2 -2
- package/dist/{miller-B0qbnWwe.js → miller-Dyv4UM7k.js} +3 -3
- package/dist/miller.d.ts +1 -1
- package/dist/miller.js +1 -1
- package/dist/narrowed-text.js +3 -3
- package/dist/{node-graph-D9iovxQp.js → node-graph-yrbOLbYo.js} +1 -1
- package/dist/node-graph.js +1 -1
- package/dist/select-horiz.js +2 -2
- package/dist/sunburst-tree.d.ts +1 -1
- package/dist/sunburst-tree.js +1 -1
- package/dist/{sunbursttree-list-C-FuZB5z.js → sunbursttree-list-CJdznPzN.js} +2 -2
- package/dist/{sunbursttree-list-XF7gBKod.d.ts → sunbursttree-list-CmydFG66.d.ts} +1 -1
- package/dist/{tickled-controller-BVhGKzjZ.js → tickled-controller-BsFFr_1N.js} +1 -1
- package/dist/{tickled-controller-DSPoG551.d.ts → tickled-controller-Dz0UqwlQ.d.ts} +5 -0
- package/dist/{tree-1CSNgw72.js → tree-C3rgEEmm.js} +4 -4
- package/dist/tree.d.ts +1 -1
- package/dist/tree.js +1 -1
- package/dist/{vertical-list-BNCRA_zy.js → vertical-list-By-yuhkw.js} +60 -6
- package/dist/{vertical-list-Dyc5azxv.d.ts → vertical-list-C4z3La0C.d.ts} +20 -2
- package/dist/vertical-list.d.ts +1 -1
- package/dist/vertical-list.js +1 -1
- package/docs-user/README.md +1 -0
- package/docs-user/button.md +31 -1
- package/docs-user/data-grid.md +3 -0
- package/docs-user/detail-list.md +3 -0
- package/docs-user/grid-list.md +3 -0
- package/docs-user/index.json +6 -2
- package/docs-user/llms.txt +1 -0
- package/docs-user/multicol-list.md +3 -0
- package/docs-user/user-item-tags.md +68 -0
- package/llms.txt +1 -0
- package/package.json +1 -1
- package/dist/interaction-BEcBIY0d.js +0 -3
|
@@ -1,14 +1,14 @@
|
|
|
1
1
|
import { n as appearanceColor, t as appearanceAbsent } from "./item-appearance-FRO3TRFI.js";
|
|
2
2
|
import { n as tickledStyles, t as tickledItemStyles } from "./tickled-styles-pnieYweS.js";
|
|
3
|
-
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-
|
|
3
|
+
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-Bk4acsCM.js";
|
|
4
4
|
import { i as resolveGroupKey, r as partitionByGroup } from "./grouping-kENdqzSV.js";
|
|
5
|
-
import "./interaction-
|
|
5
|
+
import "./interaction-DNuFnTm0.js";
|
|
6
|
+
import { a as listItemFadeKeyframes, d as ItemTagResolver, g as sameTagKeys, t as ListNativeDragController, v as tagPartTokens, y as tagsAttribute } from "./list-native-drag-controller-B_INa6_G.js";
|
|
6
7
|
import { i as ListDragSelectController, n as gestureOf, t as ListSelectionController } from "./list-selection-controller-Dkh3m3hX.js";
|
|
7
|
-
import { a as listItemFadeKeyframes, t as ListNativeDragController } from "./list-native-drag-controller-Brk30s5d.js";
|
|
8
8
|
import { i as sameKeySet, r as isPartialKey, t as PARTIAL_DESCRIPTION } from "./partial-keys-D4l_ede_.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-Afl4LT64.js";
|
|
10
10
|
import { n as createScrollHoverGuard } from "./scroll-hover-guard-BGAjtyXT.js";
|
|
11
|
-
import { t as TickledController } from "./tickled-controller-
|
|
11
|
+
import { t as TickledController } from "./tickled-controller-BsFFr_1N.js";
|
|
12
12
|
import { t as themeFallbacks } from "./fallbacks-BPjjBoED.js";
|
|
13
13
|
import { t as scrollFadeStyles } from "./scroll-fade-DH8OXSqL.js";
|
|
14
14
|
import { t as ViewStateController } from "./view-state-controller-DiPAPiA7.js";
|
|
@@ -19,6 +19,7 @@ import { LitElement, css, html, nothing } from "lit";
|
|
|
19
19
|
import { property, state } from "lit/decorators.js";
|
|
20
20
|
import { createCommandRegistry } from "@clinth/ui-commands";
|
|
21
21
|
import { repeat } from "lit/directives/repeat.js";
|
|
22
|
+
import { ifDefined } from "lit/directives/if-defined.js";
|
|
22
23
|
import { keyed } from "lit/directives/keyed.js";
|
|
23
24
|
import { createRef, ref } from "lit/directives/ref.js";
|
|
24
25
|
// src/grid-list/grid-list-key-index.ts
|
|
@@ -575,6 +576,8 @@ var ElementGridListSource = class {
|
|
|
575
576
|
const eff = this.#effectiveIndices[index];
|
|
576
577
|
return eff !== void 0 && !this.#items[eff].hasAttribute(`not-checked`);
|
|
577
578
|
}
|
|
579
|
+
rawTagsAt(_index) {}
|
|
580
|
+
tagsAt(_index) {}
|
|
578
581
|
/**
|
|
579
582
|
* Element mode cells project their item through a per-cell `<slot>` that
|
|
580
583
|
* `GridListElement` renders and assigns itself (see its `#applyCellSlots`).
|
|
@@ -717,6 +720,13 @@ var DataGridListSource = class {
|
|
|
717
720
|
const eff = this.#effectiveIndices[index];
|
|
718
721
|
return eff !== void 0 && !this.#adapter.disabled?.(this.#items[eff], eff);
|
|
719
722
|
}
|
|
723
|
+
rawTagsAt(index) {
|
|
724
|
+
return index < 0 || index >= this.#items.length || this.#adapter.tags === void 0 ? void 0 : this.#adapter.tags(this.#items[index], index);
|
|
725
|
+
}
|
|
726
|
+
tagsAt(index) {
|
|
727
|
+
const eff = this.#effectiveIndices[index];
|
|
728
|
+
return eff === void 0 || this.#adapter.tags === void 0 ? void 0 : this.#adapter.tags(this.#items[eff], eff);
|
|
729
|
+
}
|
|
720
730
|
renderCellContent(index) {
|
|
721
731
|
const eff = this.#effectiveIndices[index];
|
|
722
732
|
return eff === void 0 ? void 0 : this.#adapter.render(this.#items[eff], eff);
|
|
@@ -965,7 +975,7 @@ let GridListElement = class GridListElement extends LitElement {
|
|
|
965
975
|
getOrderedItems: () => this.#source.keys(),
|
|
966
976
|
isSelectable: (k) => {
|
|
967
977
|
const i = this.#source.indexOfKey(k);
|
|
968
|
-
return i >= 0 && this.#
|
|
978
|
+
return i >= 0 && this.#canSelect(i);
|
|
969
979
|
},
|
|
970
980
|
getModes: () => ({
|
|
971
981
|
selectionMode: this.selectionMode,
|
|
@@ -988,7 +998,8 @@ let GridListElement = class GridListElement extends LitElement {
|
|
|
988
998
|
this.tickled = new TickledController(this, {
|
|
989
999
|
getItems: () => this.#source.keys().map((k, i) => ({
|
|
990
1000
|
id: k,
|
|
991
|
-
enabled: this.#
|
|
1001
|
+
enabled: this.#canSelect(i),
|
|
1002
|
+
focusable: this.#flagsAt(i).focusable
|
|
992
1003
|
})),
|
|
993
1004
|
onTickle: (k) => {
|
|
994
1005
|
this.#stopActiveCaptionPan();
|
|
@@ -1094,9 +1105,11 @@ let GridListElement = class GridListElement extends LitElement {
|
|
|
1094
1105
|
this.#keyIndex = new KeyIndex();
|
|
1095
1106
|
this.#cellRevisions = /* @__PURE__ */ new Map();
|
|
1096
1107
|
this.#resolveKey = (key) => this.#source.indexOfKey(key) >= 0 ? key : void 0;
|
|
1108
|
+
this.#tagResolver = new ItemTagResolver();
|
|
1097
1109
|
this.#markedTickled = /* @__PURE__ */ new Set();
|
|
1098
1110
|
this.#markedSelected = /* @__PURE__ */ new Set();
|
|
1099
1111
|
this.#markedPartial = /* @__PURE__ */ new Set();
|
|
1112
|
+
this.#taggedEls = /* @__PURE__ */ new Set();
|
|
1100
1113
|
this.#partialKeys = /* @__PURE__ */ new Set();
|
|
1101
1114
|
this.#selectedSnapshot = /* @__PURE__ */ new Set();
|
|
1102
1115
|
this.#onScroll = (e) => {
|
|
@@ -1704,7 +1717,7 @@ let GridListElement = class GridListElement extends LitElement {
|
|
|
1704
1717
|
}
|
|
1705
1718
|
#prepareNativeDrag(originKey) {
|
|
1706
1719
|
const index = this.#source.indexOfKey(originKey);
|
|
1707
|
-
if (index < 0 || !this.#
|
|
1720
|
+
if (index < 0 || !this.#canSelect(index) || !this.#flagsAt(index).draggable) return void 0;
|
|
1708
1721
|
if (!this.selection.selectedKeys.has(originKey)) this.selection.replace(originKey);
|
|
1709
1722
|
const ordered = this.#source.keys().filter((k) => !isSyntheticKey(k) && this.selection.selectedKeys.has(k));
|
|
1710
1723
|
const selected = [];
|
|
@@ -1772,7 +1785,7 @@ let GridListElement = class GridListElement extends LitElement {
|
|
|
1772
1785
|
for (const index of out) {
|
|
1773
1786
|
const key = this.#source.keyAt(index);
|
|
1774
1787
|
if (!key || isSyntheticKey(key)) continue;
|
|
1775
|
-
if (!this.#
|
|
1788
|
+
if (!this.#canSelect(index)) continue;
|
|
1776
1789
|
keys.push(key);
|
|
1777
1790
|
}
|
|
1778
1791
|
return keys;
|
|
@@ -1792,6 +1805,7 @@ let GridListElement = class GridListElement extends LitElement {
|
|
|
1792
1805
|
rawCount: () => this.#source?.rawCount ?? 0,
|
|
1793
1806
|
rawKeyAt: (i) => this.#source?.rawKeyAt(i) ?? ``,
|
|
1794
1807
|
rawSearchTextAt: (i) => this.#source?.rawSearchTextAt(i) ?? ``,
|
|
1808
|
+
isSearchable: (i) => this.#isRawSearchable(i),
|
|
1795
1809
|
onFilterChange: (keys) => {
|
|
1796
1810
|
this.#searchFilterKeys = keys;
|
|
1797
1811
|
this.#source?.setFilters({ searchKeys: keys });
|
|
@@ -2719,10 +2733,61 @@ let GridListElement = class GridListElement extends LitElement {
|
|
|
2719
2733
|
this._scrollTop = next;
|
|
2720
2734
|
}
|
|
2721
2735
|
}
|
|
2736
|
+
#tagResolver;
|
|
2737
|
+
/**
|
|
2738
|
+
* Tags assigned by key, for callers who keep them apart from the item data
|
|
2739
|
+
* (like {@link partialKeys}): tag name → keys carrying it. Merged with the
|
|
2740
|
+
* adapter's `tags` hook. Each tag shows as a `tag-<name>` `part` token and in
|
|
2741
|
+
* `data-tags`. Works in element mode too.
|
|
2742
|
+
*/
|
|
2743
|
+
get tagKeys() {
|
|
2744
|
+
return this.#tagResolver.tagKeys;
|
|
2745
|
+
}
|
|
2746
|
+
set tagKeys(value) {
|
|
2747
|
+
if (sameTagKeys(value, this.#tagResolver.tagKeys)) return;
|
|
2748
|
+
const old = this.#tagResolver.tagKeys;
|
|
2749
|
+
this.#tagResolver.tagKeys = value;
|
|
2750
|
+
this._syncItemStates(true);
|
|
2751
|
+
this.requestUpdate(`tagKeys`, old);
|
|
2752
|
+
}
|
|
2753
|
+
/**
|
|
2754
|
+
* Interaction flags per tag name: `selectable`, `focusable`, `draggable`,
|
|
2755
|
+
* `searchable` (each `false` to switch off; omitted keeps the default). With
|
|
2756
|
+
* several tags the most restrictive wins. Items stay rendered and keep their
|
|
2757
|
+
* place in layout and scroll.
|
|
2758
|
+
*/
|
|
2759
|
+
get tagBehaviour() {
|
|
2760
|
+
return this.#tagResolver.behaviour;
|
|
2761
|
+
}
|
|
2762
|
+
set tagBehaviour(value) {
|
|
2763
|
+
const old = this.#tagResolver.behaviour;
|
|
2764
|
+
if (value === old) return;
|
|
2765
|
+
this.#tagResolver.behaviour = value;
|
|
2766
|
+
this.requestUpdate(`tagBehaviour`, old);
|
|
2767
|
+
}
|
|
2768
|
+
/** Tags of the item at an effective index (adapter hook + `tagKeys`). */
|
|
2769
|
+
#tagsAt(index) {
|
|
2770
|
+
return this.#tagResolver.tagsFor(this.#source.keyAt(index), this.#source.tagsAt(index));
|
|
2771
|
+
}
|
|
2772
|
+
/** Search sees the unfiltered collection, so it resolves flags from the raw index. */
|
|
2773
|
+
#isRawSearchable(rawIndex) {
|
|
2774
|
+
if (!this.#tagResolver.behaviour) return true;
|
|
2775
|
+
return this.#tagResolver.flagsForItem(this.#source.rawKeyAt(rawIndex), this.#source.rawTagsAt(rawIndex)).searchable;
|
|
2776
|
+
}
|
|
2777
|
+
#flagsAt(index) {
|
|
2778
|
+
const hook = this.#source.tagsAt(index);
|
|
2779
|
+
if (hook === void 0 && this.#tagResolver.tagKeys === void 0) return this.#tagResolver.flagsFor([]);
|
|
2780
|
+
return this.#tagResolver.flagsForItem(this.#source.keyAt(index), hook);
|
|
2781
|
+
}
|
|
2782
|
+
/** Source selectability (`disabled` / `not-checked`) combined with the tag flags. */
|
|
2783
|
+
#canSelect(index) {
|
|
2784
|
+
return this.#source.isSelectable(index) && this.#flagsAt(index).selectable;
|
|
2785
|
+
}
|
|
2722
2786
|
/** Light-DOM items currently carrying `data-tickled` / `data-selected`. */
|
|
2723
2787
|
#markedTickled;
|
|
2724
2788
|
#markedSelected;
|
|
2725
2789
|
#markedPartial;
|
|
2790
|
+
#taggedEls;
|
|
2726
2791
|
#partialKeys;
|
|
2727
2792
|
/**
|
|
2728
2793
|
* Cells shown as *partially* selected (a part of the resource is selected):
|
|
@@ -2773,8 +2838,26 @@ let GridListElement = class GridListElement extends LitElement {
|
|
|
2773
2838
|
if (el) partialEls.add(el);
|
|
2774
2839
|
}
|
|
2775
2840
|
this.#markedPartial = syncMarker(`data-partial`, this.#markedPartial, partialEls);
|
|
2841
|
+
this.#syncLightDomTags();
|
|
2776
2842
|
this.setAttribute(`data-input-mode`, this.tickled.inputMode);
|
|
2777
2843
|
}
|
|
2844
|
+
/** Element mode: mirror tags onto the light-DOM items as `data-tags`. Only touches items whose value changed. */
|
|
2845
|
+
#syncLightDomTags() {
|
|
2846
|
+
if (this.#tagResolver.tagKeys === void 0 && this.#taggedEls.size === 0) return;
|
|
2847
|
+
const next = /* @__PURE__ */ new Set();
|
|
2848
|
+
this.#items.forEach((el, i) => {
|
|
2849
|
+
const key = this.#source.keyAt(i);
|
|
2850
|
+
const value = tagsAttribute(this.#tagResolver.tagsFor(key, void 0));
|
|
2851
|
+
if (value === void 0) {
|
|
2852
|
+
if (this.#taggedEls.has(el)) el.removeAttribute(`data-tags`);
|
|
2853
|
+
return;
|
|
2854
|
+
}
|
|
2855
|
+
if (el.getAttribute(`data-tags`) !== value) el.setAttribute(`data-tags`, value);
|
|
2856
|
+
next.add(el);
|
|
2857
|
+
});
|
|
2858
|
+
for (const el of this.#taggedEls) if (!next.has(el)) el.removeAttribute(`data-tags`);
|
|
2859
|
+
this.#taggedEls = next;
|
|
2860
|
+
}
|
|
2778
2861
|
#emitSelect(selected, previous) {
|
|
2779
2862
|
this.#viewState.notify();
|
|
2780
2863
|
const selectedEls = /* @__PURE__ */ new Set();
|
|
@@ -2901,8 +2984,10 @@ let GridListElement = class GridListElement extends LitElement {
|
|
|
2901
2984
|
const partial = isPartialKey(key, this.#partialKeys, selected);
|
|
2902
2985
|
const marquee = this.#marqueePreview.has(key);
|
|
2903
2986
|
const tickled = this.tickled.isTickled(key);
|
|
2904
|
-
const
|
|
2905
|
-
const
|
|
2987
|
+
const flags = this.#flagsAt(index);
|
|
2988
|
+
const tags = this.#tagsAt(index);
|
|
2989
|
+
const selectable = this.#source.isSelectable(index) && flags.selectable;
|
|
2990
|
+
const draggable = this.itemsDraggable && selectable && flags.draggable;
|
|
2906
2991
|
const style = this.captionStyle;
|
|
2907
2992
|
const separate = style === `separate`;
|
|
2908
2993
|
const caption = style === `hidden` ? `` : this.#source.labelAt(index);
|
|
@@ -2915,7 +3000,7 @@ let GridListElement = class GridListElement extends LitElement {
|
|
|
2915
3000
|
return html`
|
|
2916
3001
|
<div
|
|
2917
3002
|
class="cell${selected ? ` selected` : ``}${partial ? ` partial` : ``}${tickled ? ` tickled` : ``}${marquee ? ` marquee` : ``}${this.#recycledKeys.has(key) ? ` recycled` : ``}${this.#nativeDragging && key === this.#dragOriginKey ? ` dragging-origin` : ``}"
|
|
2918
|
-
part="item${selected ? ` selected` : ``}${partial ? ` partial` : ``}${tickled ? ` tickled` : ``}"
|
|
3003
|
+
part="item${selected ? ` selected` : ``}${partial ? ` partial` : ``}${tickled ? ` tickled` : ``}${tagPartTokens(tags)}"
|
|
2919
3004
|
role="option"
|
|
2920
3005
|
aria-selected=${selected ? `true` : `false`}
|
|
2921
3006
|
aria-description=${partial ? PARTIAL_DESCRIPTION : nothing}
|
|
@@ -2927,6 +3012,7 @@ let GridListElement = class GridListElement extends LitElement {
|
|
|
2927
3012
|
draggable=${draggable ? `true` : `false`}
|
|
2928
3013
|
?data-selected=${selected}
|
|
2929
3014
|
?data-partial=${partial}
|
|
3015
|
+
data-tags=${ifDefined(tagsAttribute(tags))}
|
|
2930
3016
|
?data-tickled=${tickled}
|
|
2931
3017
|
?data-marquee=${marquee}
|
|
2932
3018
|
@click=${(e) => this.#onCellClick(e, key)}
|
|
@@ -3038,8 +3124,10 @@ let GridListElement = class GridListElement extends LitElement {
|
|
|
3038
3124
|
const marquee = this.#marqueePreview.has(key);
|
|
3039
3125
|
const tickled = this.tickled.isTickled(key);
|
|
3040
3126
|
const entering = this.#entering.has(el);
|
|
3041
|
-
const
|
|
3042
|
-
const
|
|
3127
|
+
const flags = this.#flagsAt(index);
|
|
3128
|
+
const tags = this.#tagsAt(index);
|
|
3129
|
+
const selectable = this.#source.isSelectable(index) && flags.selectable;
|
|
3130
|
+
const draggable = this.itemsDraggable && selectable && flags.draggable;
|
|
3043
3131
|
const style = this.captionStyle;
|
|
3044
3132
|
const separate = style === `separate`;
|
|
3045
3133
|
const caption = style === `hidden` ? `` : this.#captionFor(el);
|
|
@@ -3051,7 +3139,7 @@ let GridListElement = class GridListElement extends LitElement {
|
|
|
3051
3139
|
return html`
|
|
3052
3140
|
<div
|
|
3053
3141
|
class="cell${selected ? ` selected` : ``}${partial ? ` partial` : ``}${tickled ? ` tickled` : ``}${entering ? ` entering` : ``}${marquee ? ` marquee` : ``}${this.#recycledKeys.has(key) ? ` recycled` : ``}${this.#nativeDragging && key === this.#dragOriginKey ? ` dragging-origin` : ``}"
|
|
3054
|
-
part="item${selected ? ` selected` : ``}${partial ? ` partial` : ``}${tickled ? ` tickled` : ``}"
|
|
3142
|
+
part="item${selected ? ` selected` : ``}${partial ? ` partial` : ``}${tickled ? ` tickled` : ``}${tagPartTokens(tags)}"
|
|
3055
3143
|
role="option"
|
|
3056
3144
|
aria-selected=${selected ? `true` : `false`}
|
|
3057
3145
|
aria-description=${partial ? PARTIAL_DESCRIPTION : nothing}
|
|
@@ -3063,6 +3151,7 @@ let GridListElement = class GridListElement extends LitElement {
|
|
|
3063
3151
|
draggable=${draggable ? `true` : `false`}
|
|
3064
3152
|
?data-selected=${selected}
|
|
3065
3153
|
?data-partial=${partial}
|
|
3154
|
+
data-tags=${ifDefined(tagsAttribute(tags))}
|
|
3066
3155
|
?data-tickled=${tickled}
|
|
3067
3156
|
?data-marquee=${marquee}
|
|
3068
3157
|
@click=${(e) => this.#onCellClick(e, key)}
|
|
@@ -2,10 +2,11 @@ import { i as ListGroupChangeEvent, n as ListGroupBy, o as ListGroupInfo, s as L
|
|
|
2
2
|
import { a as ViewStateBase, t as GetViewStateOptions } from "./types-16GC5k1z.js";
|
|
3
3
|
import { h as ListSelectionMode, i as ListInteractionMode, p as ListSelectIntentSource, s as ListMarqueeMode, u as ListSelectIntentDetail } from "./list-selection-types-CKTt7Rrw.js";
|
|
4
4
|
import "./list-native-drag-controller-Cs-Tmtaa.js";
|
|
5
|
-
import { i as TickledItem, n as TickledController } from "./tickled-controller-
|
|
5
|
+
import { i as TickledItem, n as TickledController } from "./tickled-controller-Dz0UqwlQ.js";
|
|
6
|
+
import { i as ItemTagKeys, n as ItemTagBehaviour } from "./item-tags-Dz-jQq-4.js";
|
|
6
7
|
import "./index-Cdcek1Oj.js";
|
|
7
8
|
import { H as ListNativeDragStartEvent, P as ListDragDataTransferWriter, R as ListDragPreviewRenderer, z as ListDragPreviewSourceResolver } from "./tree-component-BE7OEIiH.js";
|
|
8
|
-
import { S as ListSearchController } from "./index-
|
|
9
|
+
import { S as ListSearchController } from "./index-BuvySJEc.js";
|
|
9
10
|
import "./list-group-header.js";
|
|
10
11
|
import "./pan-text-DKe2zinH.js";
|
|
11
12
|
import { LitElement, PropertyValues, ReactiveController, ReactiveControllerHost, html } from "lit";
|
|
@@ -385,6 +386,13 @@ type GridListDataAdapter<T> = {
|
|
|
385
386
|
label?: (item: T, index: number) => string;
|
|
386
387
|
render: (item: T, index: number) => unknown;
|
|
387
388
|
disabled?: (item: T, index: number) => boolean;
|
|
389
|
+
/**
|
|
390
|
+
* Caller-assigned tags for the item (`undefined` ⇒ none). Each tag is exposed as a
|
|
391
|
+
* `tag-<name>` token in the cell's `part` and in `data-tags`; `tagBehaviour` can
|
|
392
|
+
* switch off selection, focus, drag or search per tag. Re-read on every render, so
|
|
393
|
+
* `updateItem` / `updateItems` pick up changes.
|
|
394
|
+
*/
|
|
395
|
+
tags?: (item: T, index: number) => readonly string[] | undefined;
|
|
388
396
|
searchableText?: (item: T, index: number) => string;
|
|
389
397
|
/**
|
|
390
398
|
* Per-item icon, rendered above `render`'s output inside the cell's content
|
|
@@ -854,6 +862,22 @@ declare class GridListElement<T = unknown> extends LitElement {
|
|
|
854
862
|
* Auto-assigned keyless-item keys are omitted.
|
|
855
863
|
*/
|
|
856
864
|
visibleKeys(): string[];
|
|
865
|
+
/**
|
|
866
|
+
* Tags assigned by key, for callers who keep them apart from the item data
|
|
867
|
+
* (like {@link partialKeys}): tag name → keys carrying it. Merged with the
|
|
868
|
+
* adapter's `tags` hook. Each tag shows as a `tag-<name>` `part` token and in
|
|
869
|
+
* `data-tags`. Works in element mode too.
|
|
870
|
+
*/
|
|
871
|
+
get tagKeys(): ItemTagKeys | undefined;
|
|
872
|
+
set tagKeys(value: ItemTagKeys | undefined);
|
|
873
|
+
/**
|
|
874
|
+
* Interaction flags per tag name: `selectable`, `focusable`, `draggable`,
|
|
875
|
+
* `searchable` (each `false` to switch off; omitted keeps the default). With
|
|
876
|
+
* several tags the most restrictive wins. Items stay rendered and keep their
|
|
877
|
+
* place in layout and scroll.
|
|
878
|
+
*/
|
|
879
|
+
get tagBehaviour(): ItemTagBehaviour | undefined;
|
|
880
|
+
set tagBehaviour(value: ItemTagBehaviour | undefined);
|
|
857
881
|
/**
|
|
858
882
|
* Cells shown as *partially* selected (a part of the resource is selected):
|
|
859
883
|
* `data-partial` / `part="item partial"` and an accessible description.
|
package/dist/grid-list.d.ts
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { B as ListDragSource, F as ListDragEntry, H as ListNativeDragStartEvent, I as ListDragPreview, L as ListDragPreviewContext, R as ListDragPreviewRenderer, V as ListNativeDragStartDetail } from "./tree-component-BE7OEIiH.js";
|
|
2
|
-
import { S as GridListViewportChangeEvent, _ as GridListSelectDetail, a as GridListCaptionAlign, b as GridListTickleEvent, c as GridListCaptionStyle, d as GridListFullElementEventMap, f as GridListItemClickDetail, g as GridListOrientation, h as GridListItemUpdate, 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 GridListSelectEvent, x as GridListViewportChangeDetail, y as GridListTickleDetail } from "./grid-list-
|
|
2
|
+
import { S as GridListViewportChangeEvent, _ as GridListSelectDetail, a as GridListCaptionAlign, b as GridListTickleEvent, c as GridListCaptionStyle, d as GridListFullElementEventMap, f as GridListItemClickDetail, g as GridListOrientation, h as GridListItemUpdate, 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 GridListSelectEvent, x as GridListViewportChangeDetail, y as GridListTickleDetail } from "./grid-list-B3T_2N0N.js";
|
|
3
3
|
import { h as ListSelectionMode, i as ListInteractionMode } from "./list-selection-types-CKTt7Rrw.js";
|
|
4
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-OoQ8WaKc.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 GridListItemUpdate, 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,2 +1,2 @@
|
|
|
1
1
|
import "./list-group-header.js";
|
|
2
|
-
export { t as GridListElement } from "./grid-list-
|
|
2
|
+
export { t as GridListElement } from "./grid-list-0wC2xGBS.js";
|
|
@@ -241,10 +241,18 @@ var IncrSearchTreeController = class {
|
|
|
241
241
|
*/
|
|
242
242
|
function createDataListSearchAdapter(host, options) {
|
|
243
243
|
return {
|
|
244
|
-
getItems: () =>
|
|
245
|
-
|
|
246
|
-
|
|
247
|
-
|
|
244
|
+
getItems: () => {
|
|
245
|
+
const items = [];
|
|
246
|
+
const count = options.rawCount();
|
|
247
|
+
for (let i = 0; i < count; i++) {
|
|
248
|
+
if (options.isSearchable && !options.isSearchable(i)) continue;
|
|
249
|
+
items.push({
|
|
250
|
+
key: options.rawKeyAt(i),
|
|
251
|
+
index: i
|
|
252
|
+
});
|
|
253
|
+
}
|
|
254
|
+
return items;
|
|
255
|
+
},
|
|
248
256
|
getLabel: (item) => options.rawSearchTextAt(item.index),
|
|
249
257
|
getKey: (item) => item.key,
|
|
250
258
|
focusItem: (item) => {
|
|
@@ -367,8 +375,8 @@ function createElementListSearchAdapter(host, options = {}) {
|
|
|
367
375
|
const hidden = /* @__PURE__ */ new Set();
|
|
368
376
|
const observeContainer = options.observeContainer ?? true;
|
|
369
377
|
const items = () => {
|
|
370
|
-
|
|
371
|
-
return
|
|
378
|
+
const all = options.getAllItems ? options.getAllItems() : Array.from(host.querySelectorAll(itemSelector));
|
|
379
|
+
return options.isSearchable ? all.filter(options.isSearchable) : all;
|
|
372
380
|
};
|
|
373
381
|
return {
|
|
374
382
|
getItems: items,
|
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-BuvySJEc.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-noLHFSKZ.js";
|
|
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-
|
|
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-Bk4acsCM.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 };
|
|
@@ -3,9 +3,9 @@ import { a as TreeItem, i as TreeInteractionMode, n as TreeExclusivity, o as Tre
|
|
|
3
3
|
import { a as ViewStateBase, t as GetViewStateOptions } from "./types-16GC5k1z.js";
|
|
4
4
|
import { m as ListSelectKeysDetail, p as ListSelectIntentSource, u as ListSelectIntentDetail } from "./list-selection-types-CKTt7Rrw.js";
|
|
5
5
|
import "./index-Cdcek1Oj.js";
|
|
6
|
-
import { S as ListSearchController } from "./index-
|
|
6
|
+
import { S as ListSearchController } from "./index-BuvySJEc.js";
|
|
7
7
|
import { t as ListNativeDragController } from "./list-native-drag-controller-Cs-Tmtaa.js";
|
|
8
|
-
import { n as TickledController } from "./tickled-controller-
|
|
8
|
+
import { n as TickledController } from "./tickled-controller-Dz0UqwlQ.js";
|
|
9
9
|
import { LitElement, PropertyValues, ReactiveController, ReactiveControllerHost, TemplateResult, nothing } from "lit";
|
|
10
10
|
import { CommandRegistry } from "@clinth/ui-commands";
|
|
11
11
|
import { TraversableTree } from "@ixfx/collections";
|
|
@@ -280,6 +280,8 @@ interface DataListSearchAdapterOptions {
|
|
|
280
280
|
rawKeyAt: (index: number) => string;
|
|
281
281
|
/** Raw (unfiltered) index → text matched against the query. */
|
|
282
282
|
rawSearchTextAt: (index: number) => string;
|
|
283
|
+
/** Raw index → whether the item takes part in search. Default: all do. */
|
|
284
|
+
isSearchable?: (index: number) => boolean;
|
|
283
285
|
/** `filter` mode: the host hides items whose key is not in `matchedKeys` (`undefined` clears). */
|
|
284
286
|
onFilterChange?: (matchedKeys: ReadonlySet<string> | undefined) => void;
|
|
285
287
|
/** `navigate` + Enter: activate the item with this key. Falls back to `focusKey`. */
|
|
@@ -316,6 +318,8 @@ interface ElementListSearchAdapterOptions {
|
|
|
316
318
|
highlightKey?: string;
|
|
317
319
|
/** Full ordered item set, including rows not currently in the DOM (virtualised hosts). Defaults to querying `itemSelector`. */
|
|
318
320
|
getAllItems?: () => Element[];
|
|
321
|
+
/** Items for which this returns `false` take no part in search. Default: all do. */
|
|
322
|
+
isSearchable?: (el: Element) => boolean;
|
|
319
323
|
/** Observe host child-list mutations to refresh the item set. Default true. */
|
|
320
324
|
observeContainer?: boolean;
|
|
321
325
|
}
|
|
@@ -3,8 +3,8 @@ import { a as TreeItem, n as TreeExclusivity, o as TreeNode, r as TreeFilterPred
|
|
|
3
3
|
import { a as ViewStateBase, n as ScrollState, t as GetViewStateOptions } from "./types-16GC5k1z.js";
|
|
4
4
|
import { m as ListSelectKeysDetail, u as ListSelectIntentDetail } from "./list-selection-types-CKTt7Rrw.js";
|
|
5
5
|
import "./index-Cdcek1Oj.js";
|
|
6
|
-
import { S as ListSearchController } from "./index-
|
|
7
|
-
import { n as TickledController } from "./tickled-controller-
|
|
6
|
+
import { S as ListSearchController } from "./index-BuvySJEc.js";
|
|
7
|
+
import { n as TickledController } from "./tickled-controller-Dz0UqwlQ.js";
|
|
8
8
|
import { LitElement, PropertyValues, TemplateResult, nothing } from "lit";
|
|
9
9
|
import { CommandRegistry } from "@clinth/ui-commands";
|
|
10
10
|
import { TraversableTree } from "@ixfx/collections";
|