@toolbox-web/grid 0.4.1 → 0.4.2
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/README.md +10 -13
- package/all.js +1101 -1048
- package/all.js.map +1 -1
- package/index.js +245 -137
- package/index.js.map +1 -1
- package/lib/core/grid.d.ts +10 -0
- package/lib/core/grid.d.ts.map +1 -1
- package/lib/core/internal/config-manager.d.ts +1 -0
- package/lib/core/internal/config-manager.d.ts.map +1 -1
- package/lib/core/internal/keyboard.d.ts.map +1 -1
- package/lib/core/internal/utils.d.ts +1 -0
- package/lib/core/internal/utils.d.ts.map +1 -1
- package/lib/core/plugin/base-plugin.d.ts +57 -1
- package/lib/core/plugin/base-plugin.d.ts.map +1 -1
- package/lib/core/plugin/expander-column.d.ts +51 -0
- package/lib/core/plugin/expander-column.d.ts.map +1 -0
- package/lib/core/plugin/types.d.ts +117 -1
- package/lib/core/plugin/types.d.ts.map +1 -1
- package/lib/core/types.d.ts +4 -2
- package/lib/core/types.d.ts.map +1 -1
- package/lib/plugins/clipboard/ClipboardPlugin.d.ts +5 -4
- package/lib/plugins/clipboard/ClipboardPlugin.d.ts.map +1 -1
- package/lib/plugins/clipboard/index.d.ts +1 -1
- package/lib/plugins/clipboard/index.d.ts.map +1 -1
- package/lib/plugins/clipboard/index.js +282 -188
- package/lib/plugins/clipboard/index.js.map +1 -1
- package/lib/plugins/clipboard/types.d.ts +72 -2
- package/lib/plugins/clipboard/types.d.ts.map +1 -1
- package/lib/plugins/column-virtualization/ColumnVirtualizationPlugin.d.ts +0 -1
- package/lib/plugins/column-virtualization/ColumnVirtualizationPlugin.d.ts.map +1 -1
- package/lib/plugins/column-virtualization/index.js +102 -26
- package/lib/plugins/column-virtualization/index.js.map +1 -1
- package/lib/plugins/context-menu/ContextMenuPlugin.d.ts +0 -1
- package/lib/plugins/context-menu/ContextMenuPlugin.d.ts.map +1 -1
- package/lib/plugins/context-menu/index.js +154 -78
- package/lib/plugins/context-menu/index.js.map +1 -1
- package/lib/plugins/editing/EditingPlugin.d.ts +1 -7
- package/lib/plugins/editing/EditingPlugin.d.ts.map +1 -1
- package/lib/plugins/editing/index.js +200 -136
- package/lib/plugins/editing/index.js.map +1 -1
- package/lib/plugins/export/ExportPlugin.d.ts +0 -1
- package/lib/plugins/export/ExportPlugin.d.ts.map +1 -1
- package/lib/plugins/export/index.js +175 -99
- package/lib/plugins/export/index.js.map +1 -1
- package/lib/plugins/filtering/FilteringPlugin.d.ts +5 -2
- package/lib/plugins/filtering/FilteringPlugin.d.ts.map +1 -1
- package/lib/plugins/filtering/index.js +129 -43
- package/lib/plugins/filtering/index.js.map +1 -1
- package/lib/plugins/grouping-columns/GroupingColumnsPlugin.d.ts +1 -2
- package/lib/plugins/grouping-columns/GroupingColumnsPlugin.d.ts.map +1 -1
- package/lib/plugins/grouping-columns/grouping-columns.d.ts +1 -1
- package/lib/plugins/grouping-columns/grouping-columns.d.ts.map +1 -1
- package/lib/plugins/grouping-columns/index.js +144 -66
- package/lib/plugins/grouping-columns/index.js.map +1 -1
- package/lib/plugins/grouping-rows/GroupingRowsPlugin.d.ts +14 -2
- package/lib/plugins/grouping-rows/GroupingRowsPlugin.d.ts.map +1 -1
- package/lib/plugins/grouping-rows/index.js +230 -138
- package/lib/plugins/grouping-rows/index.js.map +1 -1
- package/lib/plugins/master-detail/MasterDetailPlugin.d.ts +13 -11
- package/lib/plugins/master-detail/MasterDetailPlugin.d.ts.map +1 -1
- package/lib/plugins/master-detail/index.js +265 -196
- package/lib/plugins/master-detail/index.js.map +1 -1
- package/lib/plugins/master-detail/types.d.ts +0 -10
- package/lib/plugins/master-detail/types.d.ts.map +1 -1
- package/lib/plugins/multi-sort/MultiSortPlugin.d.ts +1 -2
- package/lib/plugins/multi-sort/MultiSortPlugin.d.ts.map +1 -1
- package/lib/plugins/multi-sort/index.js +105 -31
- package/lib/plugins/multi-sort/index.js.map +1 -1
- package/lib/plugins/pinned-columns/PinnedColumnsPlugin.d.ts +0 -1
- package/lib/plugins/pinned-columns/PinnedColumnsPlugin.d.ts.map +1 -1
- package/lib/plugins/pinned-columns/index.js +128 -52
- package/lib/plugins/pinned-columns/index.js.map +1 -1
- package/lib/plugins/pinned-rows/PinnedRowsPlugin.d.ts +1 -2
- package/lib/plugins/pinned-rows/PinnedRowsPlugin.d.ts.map +1 -1
- package/lib/plugins/pinned-rows/index.js +162 -88
- package/lib/plugins/pinned-rows/index.js.map +1 -1
- package/lib/plugins/pivot/PivotPlugin.d.ts +26 -4
- package/lib/plugins/pivot/PivotPlugin.d.ts.map +1 -1
- package/lib/plugins/pivot/index.js +398 -310
- package/lib/plugins/pivot/index.js.map +1 -1
- package/lib/plugins/pivot/pivot-rows.d.ts +2 -1
- package/lib/plugins/pivot/pivot-rows.d.ts.map +1 -1
- package/lib/plugins/reorder/ReorderPlugin.d.ts +13 -10
- package/lib/plugins/reorder/ReorderPlugin.d.ts.map +1 -1
- package/lib/plugins/reorder/index.js +288 -226
- package/lib/plugins/reorder/index.js.map +1 -1
- package/lib/plugins/selection/SelectionPlugin.d.ts +21 -3
- package/lib/plugins/selection/SelectionPlugin.d.ts.map +1 -1
- package/lib/plugins/selection/index.d.ts +2 -2
- package/lib/plugins/selection/index.d.ts.map +1 -1
- package/lib/plugins/selection/index.js +276 -145
- package/lib/plugins/selection/index.js.map +1 -1
- package/lib/plugins/selection/types.d.ts +24 -0
- package/lib/plugins/selection/types.d.ts.map +1 -1
- package/lib/plugins/server-side/ServerSidePlugin.d.ts +0 -1
- package/lib/plugins/server-side/ServerSidePlugin.d.ts.map +1 -1
- package/lib/plugins/server-side/index.js +83 -7
- package/lib/plugins/server-side/index.js.map +1 -1
- package/lib/plugins/tree/TreePlugin.d.ts +5 -1
- package/lib/plugins/tree/TreePlugin.d.ts.map +1 -1
- package/lib/plugins/tree/index.js +197 -112
- package/lib/plugins/tree/index.js.map +1 -1
- package/lib/plugins/tree/types.d.ts +0 -10
- package/lib/plugins/tree/types.d.ts.map +1 -1
- package/lib/plugins/undo-redo/UndoRedoPlugin.d.ts +0 -1
- package/lib/plugins/undo-redo/UndoRedoPlugin.d.ts.map +1 -1
- package/lib/plugins/undo-redo/index.js +93 -17
- package/lib/plugins/undo-redo/index.js.map +1 -1
- package/lib/plugins/visibility/VisibilityPlugin.d.ts +7 -4
- package/lib/plugins/visibility/VisibilityPlugin.d.ts.map +1 -1
- package/lib/plugins/visibility/index.js +144 -65
- package/lib/plugins/visibility/index.js.map +1 -1
- package/package.json +1 -1
- package/umd/grid.all.umd.js +17 -19
- package/umd/grid.all.umd.js.map +1 -1
- package/umd/grid.umd.js +7 -7
- package/umd/grid.umd.js.map +1 -1
- package/umd/plugins/clipboard.umd.js +5 -7
- package/umd/plugins/clipboard.umd.js.map +1 -1
- package/umd/plugins/column-virtualization.umd.js +1 -1
- package/umd/plugins/column-virtualization.umd.js.map +1 -1
- package/umd/plugins/context-menu.umd.js +1 -1
- package/umd/plugins/context-menu.umd.js.map +1 -1
- package/umd/plugins/editing.umd.js +1 -1
- package/umd/plugins/editing.umd.js.map +1 -1
- package/umd/plugins/export.umd.js +1 -1
- package/umd/plugins/export.umd.js.map +1 -1
- package/umd/plugins/filtering.umd.js +1 -1
- package/umd/plugins/filtering.umd.js.map +1 -1
- package/umd/plugins/grouping-columns.umd.js +1 -1
- package/umd/plugins/grouping-columns.umd.js.map +1 -1
- package/umd/plugins/grouping-rows.umd.js +1 -1
- package/umd/plugins/grouping-rows.umd.js.map +1 -1
- package/umd/plugins/master-detail.umd.js +1 -1
- package/umd/plugins/master-detail.umd.js.map +1 -1
- package/umd/plugins/multi-sort.umd.js +1 -1
- package/umd/plugins/multi-sort.umd.js.map +1 -1
- package/umd/plugins/pinned-columns.umd.js +1 -1
- package/umd/plugins/pinned-columns.umd.js.map +1 -1
- package/umd/plugins/pinned-rows.umd.js +1 -1
- package/umd/plugins/pinned-rows.umd.js.map +1 -1
- package/umd/plugins/pivot.umd.js +1 -1
- package/umd/plugins/pivot.umd.js.map +1 -1
- package/umd/plugins/reorder.umd.js +1 -1
- package/umd/plugins/reorder.umd.js.map +1 -1
- package/umd/plugins/selection.umd.js +1 -1
- package/umd/plugins/selection.umd.js.map +1 -1
- package/umd/plugins/server-side.umd.js +1 -1
- package/umd/plugins/server-side.umd.js.map +1 -1
- package/umd/plugins/tree.umd.js +1 -1
- package/umd/plugins/tree.umd.js.map +1 -1
- package/umd/plugins/undo-redo.umd.js +1 -1
- package/umd/plugins/undo-redo.umd.js.map +1 -1
- package/umd/plugins/visibility.umd.js +1 -1
- package/umd/plugins/visibility.umd.js.map +1 -1
- package/lib/core/internal/editing.d.ts +0 -76
- package/lib/core/internal/editing.d.ts.map +0 -1
|
@@ -1,12 +1,49 @@
|
|
|
1
|
-
function
|
|
1
|
+
function x(n, e, t, s) {
|
|
2
|
+
const r = new Set(n.selected);
|
|
3
|
+
let o = n.anchor;
|
|
4
|
+
if (t === "single")
|
|
5
|
+
r.clear(), r.add(e), o = e;
|
|
6
|
+
else if (t === "multiple") {
|
|
7
|
+
const i = s.ctrlKey || s.metaKey;
|
|
8
|
+
if (s.shiftKey && n.anchor !== null) {
|
|
9
|
+
const c = Math.min(n.anchor, e), a = Math.max(n.anchor, e);
|
|
10
|
+
for (let h = c; h <= a; h++)
|
|
11
|
+
r.add(h);
|
|
12
|
+
} else i ? (r.has(e) ? r.delete(e) : r.add(e), o = e) : (r.clear(), r.add(e), o = e);
|
|
13
|
+
}
|
|
14
|
+
return { selected: r, lastSelected: e, anchor: o };
|
|
15
|
+
}
|
|
16
|
+
function _(n) {
|
|
17
|
+
const e = /* @__PURE__ */ new Set();
|
|
18
|
+
for (let t = 0; t < n; t++)
|
|
19
|
+
e.add(t);
|
|
20
|
+
return e;
|
|
21
|
+
}
|
|
22
|
+
function D(n, e) {
|
|
23
|
+
const t = [], s = [];
|
|
24
|
+
for (const r of e)
|
|
25
|
+
n.has(r) || t.push(r);
|
|
26
|
+
for (const r of n)
|
|
27
|
+
e.has(r) || s.push(r);
|
|
28
|
+
return { added: t, removed: s };
|
|
29
|
+
}
|
|
30
|
+
function b(n) {
|
|
31
|
+
if (!n) return -1;
|
|
32
|
+
const e = n.getAttribute("data-row");
|
|
33
|
+
if (e) return parseInt(e, 10);
|
|
34
|
+
const t = n.closest(".data-grid-row");
|
|
35
|
+
if (!t) return -1;
|
|
36
|
+
const s = t.parentElement;
|
|
2
37
|
if (!s) return -1;
|
|
3
|
-
const
|
|
4
|
-
|
|
38
|
+
const r = s.querySelectorAll(":scope > .data-grid-row");
|
|
39
|
+
for (let o = 0; o < r.length; o++)
|
|
40
|
+
if (r[o] === t) return o;
|
|
41
|
+
return -1;
|
|
5
42
|
}
|
|
6
|
-
function
|
|
7
|
-
|
|
43
|
+
function g(n) {
|
|
44
|
+
n && n.querySelectorAll(".cell-focus").forEach((e) => e.classList.remove("cell-focus"));
|
|
8
45
|
}
|
|
9
|
-
const
|
|
46
|
+
const p = {
|
|
10
47
|
expand: "▶",
|
|
11
48
|
collapse: "▼",
|
|
12
49
|
sortAsc: "▲",
|
|
@@ -16,7 +53,7 @@ const R = {
|
|
|
16
53
|
dragHandle: "⋮⋮",
|
|
17
54
|
toolPanel: "☰"
|
|
18
55
|
};
|
|
19
|
-
class
|
|
56
|
+
class y {
|
|
20
57
|
/**
|
|
21
58
|
* Plugin dependencies - declare other plugins this one requires.
|
|
22
59
|
*
|
|
@@ -33,8 +70,11 @@ class C {
|
|
|
33
70
|
* ```
|
|
34
71
|
*/
|
|
35
72
|
static dependencies;
|
|
36
|
-
/**
|
|
37
|
-
|
|
73
|
+
/**
|
|
74
|
+
* Plugin version - defaults to grid version for built-in plugins.
|
|
75
|
+
* Third-party plugins can override with their own semver.
|
|
76
|
+
*/
|
|
77
|
+
version = typeof __GRID_VERSION__ < "u" ? __GRID_VERSION__ : "dev";
|
|
38
78
|
/** CSS styles to inject into the grid's shadow DOM */
|
|
39
79
|
styles;
|
|
40
80
|
/** Custom cell renderers keyed by type name */
|
|
@@ -121,12 +161,28 @@ class C {
|
|
|
121
161
|
emit(e, t) {
|
|
122
162
|
this.grid?.dispatchEvent?.(new CustomEvent(e, { detail: t, bubbles: !0 }));
|
|
123
163
|
}
|
|
164
|
+
/**
|
|
165
|
+
* Emit a cancelable custom event from the grid.
|
|
166
|
+
* @returns `true` if the event was cancelled (preventDefault called), `false` otherwise
|
|
167
|
+
*/
|
|
168
|
+
emitCancelable(e, t) {
|
|
169
|
+
const s = new CustomEvent(e, { detail: t, bubbles: !0, cancelable: !0 });
|
|
170
|
+
return this.grid?.dispatchEvent?.(s), s.defaultPrevented;
|
|
171
|
+
}
|
|
124
172
|
/**
|
|
125
173
|
* Request a re-render of the grid.
|
|
126
174
|
*/
|
|
127
175
|
requestRender() {
|
|
128
176
|
this.grid?.requestRender?.();
|
|
129
177
|
}
|
|
178
|
+
/**
|
|
179
|
+
* Request a re-render and restore focus styling afterward.
|
|
180
|
+
* Use this when a plugin action (like expand/collapse) triggers a render
|
|
181
|
+
* but needs to maintain keyboard navigation focus.
|
|
182
|
+
*/
|
|
183
|
+
requestRenderWithFocus() {
|
|
184
|
+
this.grid?.requestRenderWithFocus?.();
|
|
185
|
+
}
|
|
130
186
|
/**
|
|
131
187
|
* Request a lightweight style update without rebuilding DOM.
|
|
132
188
|
* Use this instead of requestRender() when only CSS classes need updating.
|
|
@@ -160,6 +216,19 @@ class C {
|
|
|
160
216
|
get visibleColumns() {
|
|
161
217
|
return this.grid?._visibleColumns ?? [];
|
|
162
218
|
}
|
|
219
|
+
/**
|
|
220
|
+
* Get the grid as an HTMLElement for direct DOM operations.
|
|
221
|
+
* Use sparingly - prefer the typed GridElementRef API when possible.
|
|
222
|
+
*
|
|
223
|
+
* @example
|
|
224
|
+
* ```ts
|
|
225
|
+
* const width = this.gridElement.clientWidth;
|
|
226
|
+
* this.gridElement.classList.add('my-plugin-active');
|
|
227
|
+
* ```
|
|
228
|
+
*/
|
|
229
|
+
get gridElement() {
|
|
230
|
+
return this.grid;
|
|
231
|
+
}
|
|
163
232
|
/**
|
|
164
233
|
* Get the shadow root of the grid.
|
|
165
234
|
*/
|
|
@@ -192,8 +261,53 @@ class C {
|
|
|
192
261
|
*/
|
|
193
262
|
get gridIcons() {
|
|
194
263
|
const e = this.grid?.gridConfig?.icons ?? {};
|
|
195
|
-
return { ...
|
|
264
|
+
return { ...p, ...e };
|
|
265
|
+
}
|
|
266
|
+
// #region Animation Helpers
|
|
267
|
+
/**
|
|
268
|
+
* Check if animations are enabled at the grid level.
|
|
269
|
+
* Respects gridConfig.animation.mode and the CSS variable set by the grid.
|
|
270
|
+
*
|
|
271
|
+
* Plugins should use this to skip animations when:
|
|
272
|
+
* - Animation mode is 'off' or `false`
|
|
273
|
+
* - User prefers reduced motion and mode is 'reduced-motion' (default)
|
|
274
|
+
*
|
|
275
|
+
* @example
|
|
276
|
+
* ```ts
|
|
277
|
+
* private get animationStyle(): 'slide' | 'fade' | false {
|
|
278
|
+
* if (!this.isAnimationEnabled) return false;
|
|
279
|
+
* return this.config.animation ?? 'slide';
|
|
280
|
+
* }
|
|
281
|
+
* ```
|
|
282
|
+
*/
|
|
283
|
+
get isAnimationEnabled() {
|
|
284
|
+
const e = this.grid?.effectiveConfig?.animation?.mode ?? "reduced-motion";
|
|
285
|
+
if (e === !1 || e === "off") return !1;
|
|
286
|
+
if (e === !0 || e === "on") return !0;
|
|
287
|
+
const t = this.shadowRoot?.host;
|
|
288
|
+
return t ? getComputedStyle(t).getPropertyValue("--tbw-animation-enabled").trim() !== "0" : !0;
|
|
289
|
+
}
|
|
290
|
+
/**
|
|
291
|
+
* Get the animation duration in milliseconds from CSS variable.
|
|
292
|
+
* Falls back to 200ms if not set.
|
|
293
|
+
*
|
|
294
|
+
* Plugins can use this for their animation timing to stay consistent
|
|
295
|
+
* with the grid-level animation.duration setting.
|
|
296
|
+
*
|
|
297
|
+
* @example
|
|
298
|
+
* ```ts
|
|
299
|
+
* element.animate(keyframes, { duration: this.animationDuration });
|
|
300
|
+
* ```
|
|
301
|
+
*/
|
|
302
|
+
get animationDuration() {
|
|
303
|
+
const e = this.shadowRoot?.host;
|
|
304
|
+
if (e) {
|
|
305
|
+
const t = getComputedStyle(e).getPropertyValue("--tbw-animation-duration").trim(), s = parseInt(t, 10);
|
|
306
|
+
if (!isNaN(s)) return s;
|
|
307
|
+
}
|
|
308
|
+
return 200;
|
|
196
309
|
}
|
|
310
|
+
// #endregion
|
|
197
311
|
/**
|
|
198
312
|
* Resolve an icon value to string or HTMLElement.
|
|
199
313
|
* Checks plugin config first, then grid-level icons, then defaults.
|
|
@@ -223,58 +337,61 @@ class C {
|
|
|
223
337
|
}
|
|
224
338
|
// #endregion
|
|
225
339
|
}
|
|
226
|
-
function
|
|
340
|
+
function d(n) {
|
|
341
|
+
return n.meta?.utility === !0;
|
|
342
|
+
}
|
|
343
|
+
function u(n) {
|
|
227
344
|
return {
|
|
228
|
-
startRow: Math.min(
|
|
229
|
-
startCol: Math.min(
|
|
230
|
-
endRow: Math.max(
|
|
231
|
-
endCol: Math.max(
|
|
345
|
+
startRow: Math.min(n.startRow, n.endRow),
|
|
346
|
+
startCol: Math.min(n.startCol, n.endCol),
|
|
347
|
+
endRow: Math.max(n.startRow, n.endRow),
|
|
348
|
+
endCol: Math.max(n.startCol, n.endCol)
|
|
232
349
|
};
|
|
233
350
|
}
|
|
234
|
-
function
|
|
235
|
-
const e =
|
|
351
|
+
function A(n) {
|
|
352
|
+
const e = u(n);
|
|
236
353
|
return {
|
|
237
354
|
from: { row: e.startRow, col: e.startCol },
|
|
238
355
|
to: { row: e.endRow, col: e.endCol }
|
|
239
356
|
};
|
|
240
357
|
}
|
|
241
|
-
function
|
|
242
|
-
return
|
|
358
|
+
function m(n) {
|
|
359
|
+
return n.map(A);
|
|
243
360
|
}
|
|
244
|
-
function
|
|
245
|
-
const
|
|
246
|
-
return
|
|
361
|
+
function v(n, e, t) {
|
|
362
|
+
const s = u(t);
|
|
363
|
+
return n >= s.startRow && n <= s.endRow && e >= s.startCol && e <= s.endCol;
|
|
247
364
|
}
|
|
248
|
-
function
|
|
249
|
-
return t.some((
|
|
365
|
+
function R(n, e, t) {
|
|
366
|
+
return t.some((s) => v(n, e, s));
|
|
250
367
|
}
|
|
251
|
-
function
|
|
252
|
-
const e = [], t =
|
|
253
|
-
for (let
|
|
254
|
-
for (let
|
|
255
|
-
e.push({ row:
|
|
368
|
+
function S(n) {
|
|
369
|
+
const e = [], t = u(n);
|
|
370
|
+
for (let s = t.startRow; s <= t.endRow; s++)
|
|
371
|
+
for (let r = t.startCol; r <= t.endCol; r++)
|
|
372
|
+
e.push({ row: s, col: r });
|
|
256
373
|
return e;
|
|
257
374
|
}
|
|
258
|
-
function
|
|
375
|
+
function I(n) {
|
|
259
376
|
const e = /* @__PURE__ */ new Map();
|
|
260
|
-
for (const t of
|
|
261
|
-
for (const
|
|
262
|
-
e.set(`${
|
|
377
|
+
for (const t of n)
|
|
378
|
+
for (const s of S(t))
|
|
379
|
+
e.set(`${s.row},${s.col}`, s);
|
|
263
380
|
return [...e.values()];
|
|
264
381
|
}
|
|
265
|
-
function
|
|
382
|
+
function f(n, e) {
|
|
266
383
|
return {
|
|
267
|
-
startRow:
|
|
268
|
-
startCol:
|
|
384
|
+
startRow: n.row,
|
|
385
|
+
startCol: n.col,
|
|
269
386
|
endRow: e.row,
|
|
270
387
|
endCol: e.col
|
|
271
388
|
};
|
|
272
389
|
}
|
|
273
|
-
const
|
|
274
|
-
function
|
|
275
|
-
if (
|
|
390
|
+
const K = ':host .selecting .data-grid-row>.cell{-webkit-user-select:none;user-select:none}:host([data-has-focus]) .data-grid-row.row-focus{background-color:var(--tbw-focus-background, rgba(from var(--tbw-color-accent) r g b / 12%))}:host([data-selection-mode="row"]) .cell-focus{outline:none}:host .data-grid-row>.cell.selected{background-color:var(--tbw-range-selection-bg)}:host .data-grid-row>.cell.selected.top{border-top:2px solid var(--tbw-range-border-color)}:host .data-grid-row>.cell.selected.bottom{border-bottom:2px solid var(--tbw-range-border-color)}:host .data-grid-row>.cell.selected.first{border-left:2px solid var(--tbw-range-border-color)}:host .data-grid-row>.cell.selected.last{border-right:2px solid var(--tbw-range-border-color)}:host .tbw-selection-summary{font-size:13px;color:var(--tbw-color-fg-muted);white-space:nowrap}';
|
|
391
|
+
function q(n, e, t) {
|
|
392
|
+
if (n === "cell" && e.selectedCell)
|
|
276
393
|
return {
|
|
277
|
-
mode:
|
|
394
|
+
mode: n,
|
|
278
395
|
ranges: [
|
|
279
396
|
{
|
|
280
397
|
from: { row: e.selectedCell.row, col: e.selectedCell.col },
|
|
@@ -282,18 +399,18 @@ function v(s, e, t) {
|
|
|
282
399
|
}
|
|
283
400
|
]
|
|
284
401
|
};
|
|
285
|
-
if (
|
|
286
|
-
const
|
|
287
|
-
from: { row:
|
|
288
|
-
to: { row:
|
|
402
|
+
if (n === "row" && e.selected.size > 0) {
|
|
403
|
+
const s = [...e.selected].map((r) => ({
|
|
404
|
+
from: { row: r, col: 0 },
|
|
405
|
+
to: { row: r, col: t - 1 }
|
|
289
406
|
}));
|
|
290
|
-
return { mode:
|
|
407
|
+
return { mode: n, ranges: s };
|
|
291
408
|
}
|
|
292
|
-
return
|
|
409
|
+
return n === "range" && e.ranges.length > 0 ? { mode: n, ranges: m(e.ranges) } : { mode: n, ranges: [] };
|
|
293
410
|
}
|
|
294
|
-
class
|
|
411
|
+
class M extends y {
|
|
295
412
|
name = "selection";
|
|
296
|
-
|
|
413
|
+
styles = K;
|
|
297
414
|
get defaultConfig() {
|
|
298
415
|
return {
|
|
299
416
|
mode: "cell"
|
|
@@ -321,42 +438,44 @@ class q extends C {
|
|
|
321
438
|
// #endregion
|
|
322
439
|
// #region Event Handlers
|
|
323
440
|
onCellClick(e) {
|
|
324
|
-
const { rowIndex: t, colIndex:
|
|
441
|
+
const { rowIndex: t, colIndex: s, originalEvent: r } = e, { mode: o } = this.config, i = this.columns[s], c = i && d(i);
|
|
325
442
|
if (o === "cell")
|
|
326
|
-
return this.selectedCell = { row: t, col:
|
|
443
|
+
return c || (this.selectedCell = { row: t, col: s }, this.emit("selection-change", this.#e()), this.requestAfterRender()), !1;
|
|
327
444
|
if (o === "row")
|
|
328
445
|
return this.selected.clear(), this.selected.add(t), this.lastSelected = t, this.emit("selection-change", this.#e()), this.requestAfterRender(), !1;
|
|
329
446
|
if (o === "range") {
|
|
330
|
-
|
|
331
|
-
|
|
332
|
-
|
|
333
|
-
|
|
334
|
-
|
|
335
|
-
|
|
447
|
+
if (c)
|
|
448
|
+
return !1;
|
|
449
|
+
const a = r.shiftKey, h = r.ctrlKey || r.metaKey;
|
|
450
|
+
if (a && this.cellAnchor) {
|
|
451
|
+
const l = f(this.cellAnchor, { row: t, col: s });
|
|
452
|
+
h ? this.ranges.length > 0 ? this.ranges[this.ranges.length - 1] = l : this.ranges.push(l) : this.ranges = [l], this.activeRange = l;
|
|
453
|
+
} else if (h) {
|
|
454
|
+
const l = {
|
|
336
455
|
startRow: t,
|
|
337
|
-
startCol:
|
|
456
|
+
startCol: s,
|
|
338
457
|
endRow: t,
|
|
339
|
-
endCol:
|
|
458
|
+
endCol: s
|
|
340
459
|
};
|
|
341
|
-
this.ranges.push(
|
|
460
|
+
this.ranges.push(l), this.activeRange = l, this.cellAnchor = { row: t, col: s };
|
|
342
461
|
} else {
|
|
343
|
-
const
|
|
462
|
+
const l = {
|
|
344
463
|
startRow: t,
|
|
345
|
-
startCol:
|
|
464
|
+
startCol: s,
|
|
346
465
|
endRow: t,
|
|
347
|
-
endCol:
|
|
466
|
+
endCol: s
|
|
348
467
|
};
|
|
349
|
-
this.ranges = [
|
|
468
|
+
this.ranges = [l], this.activeRange = l, this.cellAnchor = { row: t, col: s };
|
|
350
469
|
}
|
|
351
470
|
return this.emit("selection-change", this.#e()), this.requestAfterRender(), !1;
|
|
352
471
|
}
|
|
353
472
|
return !1;
|
|
354
473
|
}
|
|
355
474
|
onKeyDown(e) {
|
|
356
|
-
const { mode: t } = this.config,
|
|
475
|
+
const { mode: t } = this.config, r = ["ArrowUp", "ArrowDown", "ArrowLeft", "ArrowRight", "Tab", "Home", "End", "PageUp", "PageDown"].includes(e.key);
|
|
357
476
|
if (e.key === "Escape")
|
|
358
477
|
return t === "cell" ? this.selectedCell = null : t === "row" ? (this.selected.clear(), this.anchor = null) : t === "range" && (this.ranges = [], this.activeRange = null, this.cellAnchor = null), this.emit("selection-change", this.#e()), this.requestAfterRender(), !0;
|
|
359
|
-
if (t === "cell" &&
|
|
478
|
+
if (t === "cell" && r)
|
|
360
479
|
return queueMicrotask(() => {
|
|
361
480
|
this.selectedCell = { row: this.grid._focusRow, col: this.grid._focusCol }, this.emit("selection-change", this.#e()), this.requestAfterRender();
|
|
362
481
|
}), !1;
|
|
@@ -364,42 +483,50 @@ class q extends C {
|
|
|
364
483
|
return queueMicrotask(() => {
|
|
365
484
|
this.selected.clear(), this.selected.add(this.grid._focusRow), this.lastSelected = this.grid._focusRow, this.emit("selection-change", this.#e()), this.requestAfterRender();
|
|
366
485
|
}), !1;
|
|
367
|
-
if (t === "range" &&
|
|
368
|
-
const o = e.key === "Tab",
|
|
369
|
-
return
|
|
486
|
+
if (t === "range" && r) {
|
|
487
|
+
const o = e.key === "Tab", i = e.shiftKey && !o;
|
|
488
|
+
return i && !this.cellAnchor && (this.cellAnchor = { row: this.grid._focusRow, col: this.grid._focusCol }), this.pendingKeyboardUpdate = { shiftKey: i }, queueMicrotask(() => this.requestAfterRender()), !1;
|
|
370
489
|
}
|
|
371
490
|
if (t === "range" && e.key === "a" && (e.ctrlKey || e.metaKey)) {
|
|
372
|
-
const o = this.rows.length,
|
|
373
|
-
if (o > 0 &&
|
|
374
|
-
const
|
|
491
|
+
const o = this.rows.length, i = this.columns.length;
|
|
492
|
+
if (o > 0 && i > 0) {
|
|
493
|
+
const c = {
|
|
375
494
|
startRow: 0,
|
|
376
495
|
startCol: 0,
|
|
377
496
|
endRow: o - 1,
|
|
378
|
-
endCol:
|
|
497
|
+
endCol: i - 1
|
|
379
498
|
};
|
|
380
|
-
return this.ranges = [
|
|
499
|
+
return this.ranges = [c], this.activeRange = c, this.emit("selection-change", this.#e()), this.requestAfterRender(), !0;
|
|
381
500
|
}
|
|
382
501
|
}
|
|
383
502
|
return !1;
|
|
384
503
|
}
|
|
385
504
|
onCellMouseDown(e) {
|
|
386
|
-
if (this.config.mode !== "range" || e.rowIndex === void 0 || e.colIndex === void 0 || e.rowIndex < 0
|
|
505
|
+
if (this.config.mode !== "range" || e.rowIndex === void 0 || e.colIndex === void 0 || e.rowIndex < 0) return;
|
|
506
|
+
const t = this.columns[e.colIndex];
|
|
507
|
+
if (t && d(t) || e.originalEvent.shiftKey && this.cellAnchor)
|
|
387
508
|
return;
|
|
388
509
|
this.isDragging = !0;
|
|
389
|
-
const
|
|
390
|
-
this.cellAnchor = { row:
|
|
391
|
-
const
|
|
392
|
-
startRow:
|
|
510
|
+
const s = e.rowIndex, r = e.colIndex;
|
|
511
|
+
this.cellAnchor = { row: s, col: r }, e.originalEvent.ctrlKey || e.originalEvent.metaKey || (this.ranges = []);
|
|
512
|
+
const i = {
|
|
513
|
+
startRow: s,
|
|
393
514
|
startCol: r,
|
|
394
|
-
endRow:
|
|
515
|
+
endRow: s,
|
|
395
516
|
endCol: r
|
|
396
517
|
};
|
|
397
|
-
return this.ranges.push(
|
|
518
|
+
return this.ranges.push(i), this.activeRange = i, this.emit("selection-change", this.#e()), this.requestAfterRender(), !0;
|
|
398
519
|
}
|
|
399
520
|
onCellMouseMove(e) {
|
|
400
521
|
if (this.config.mode !== "range" || !this.isDragging || !this.cellAnchor || e.rowIndex === void 0 || e.colIndex === void 0 || e.rowIndex < 0) return;
|
|
401
|
-
|
|
402
|
-
|
|
522
|
+
let t = e.colIndex;
|
|
523
|
+
const s = this.columns[t];
|
|
524
|
+
if (s && d(s)) {
|
|
525
|
+
const o = this.columns.findIndex((i) => !d(i));
|
|
526
|
+
o >= 0 && (t = o);
|
|
527
|
+
}
|
|
528
|
+
const r = f(this.cellAnchor, { row: e.rowIndex, col: t });
|
|
529
|
+
return this.ranges.length > 0 ? this.ranges[this.ranges.length - 1] = r : this.ranges.push(r), this.activeRange = r, this.emit("selection-change", this.#e()), this.requestAfterRender(), !0;
|
|
403
530
|
}
|
|
404
531
|
onCellMouseUp(e) {
|
|
405
532
|
if (this.config.mode === "range" && this.isDragging)
|
|
@@ -416,37 +543,46 @@ class q extends C {
|
|
|
416
543
|
e.querySelectorAll(".cell").forEach((o) => {
|
|
417
544
|
o.classList.remove("selected", "top", "bottom", "first", "last");
|
|
418
545
|
});
|
|
419
|
-
const
|
|
420
|
-
if (
|
|
546
|
+
const r = e.querySelectorAll(".data-grid-row");
|
|
547
|
+
if (r.forEach((o) => {
|
|
421
548
|
o.classList.remove("selected", "row-focus");
|
|
422
|
-
}), t === "row" && (
|
|
423
|
-
const
|
|
424
|
-
|
|
549
|
+
}), t === "row" && (g(e), r.forEach((o) => {
|
|
550
|
+
const i = o.querySelector(".cell[data-row]"), c = b(i);
|
|
551
|
+
c >= 0 && this.selected.has(c) && o.classList.add("selected", "row-focus");
|
|
425
552
|
})), t === "range" && this.ranges.length > 0) {
|
|
426
|
-
|
|
427
|
-
const o = this.activeRange ?
|
|
428
|
-
e.querySelectorAll(".cell[data-row][data-col]").forEach((
|
|
429
|
-
const
|
|
430
|
-
|
|
553
|
+
g(e);
|
|
554
|
+
const o = this.activeRange ? u(this.activeRange) : null, i = this.columns.findIndex((a) => !d(a));
|
|
555
|
+
this.columns.length - 1, e.querySelectorAll(".cell[data-row][data-col]").forEach((a) => {
|
|
556
|
+
const h = parseInt(a.getAttribute("data-row") ?? "-1", 10), l = parseInt(a.getAttribute("data-col") ?? "-1", 10);
|
|
557
|
+
if (h >= 0 && l >= 0) {
|
|
558
|
+
const w = this.columns[l];
|
|
559
|
+
if (w && d(w))
|
|
560
|
+
return;
|
|
561
|
+
if (R(h, l, this.ranges) && (a.classList.add("selected"), o)) {
|
|
562
|
+
h === o.startRow && a.classList.add("top"), h === o.endRow && a.classList.add("bottom");
|
|
563
|
+
const C = Math.max(o.startCol, i);
|
|
564
|
+
l === C && a.classList.add("first"), l === o.endCol && a.classList.add("last");
|
|
565
|
+
}
|
|
566
|
+
}
|
|
431
567
|
});
|
|
432
568
|
}
|
|
433
|
-
t === "cell" && this.selectedCell &&
|
|
569
|
+
t === "cell" && this.selectedCell && g(e);
|
|
434
570
|
}
|
|
435
571
|
afterRender() {
|
|
436
572
|
const e = this.shadowRoot;
|
|
437
573
|
if (!e) return;
|
|
438
|
-
const t = e.children[0], { mode:
|
|
439
|
-
if (this.pendingKeyboardUpdate &&
|
|
440
|
-
const { shiftKey:
|
|
574
|
+
const t = e.children[0], { mode: s } = this.config;
|
|
575
|
+
if (this.pendingKeyboardUpdate && s === "range") {
|
|
576
|
+
const { shiftKey: r } = this.pendingKeyboardUpdate;
|
|
441
577
|
this.pendingKeyboardUpdate = null;
|
|
442
|
-
const o = this.grid._focusRow,
|
|
443
|
-
if (
|
|
444
|
-
const
|
|
445
|
-
this.ranges = [
|
|
446
|
-
} else
|
|
578
|
+
const o = this.grid._focusRow, i = this.grid._focusCol;
|
|
579
|
+
if (r && this.cellAnchor) {
|
|
580
|
+
const c = f(this.cellAnchor, { row: o, col: i });
|
|
581
|
+
this.ranges = [c], this.activeRange = c;
|
|
582
|
+
} else r || (this.ranges = [], this.activeRange = null, this.cellAnchor = { row: o, col: i });
|
|
447
583
|
this.emit("selection-change", this.#e());
|
|
448
584
|
}
|
|
449
|
-
this.grid.setAttribute("data-selection-mode",
|
|
585
|
+
this.grid.setAttribute("data-selection-mode", s), t && t.classList.toggle("selecting", this.isDragging), this.#t();
|
|
450
586
|
}
|
|
451
587
|
/**
|
|
452
588
|
* Called after scroll-triggered row rendering.
|
|
@@ -457,35 +593,62 @@ class q extends C {
|
|
|
457
593
|
}
|
|
458
594
|
// #endregion
|
|
459
595
|
// #region Public API
|
|
596
|
+
/**
|
|
597
|
+
* Get the current selection as a unified result.
|
|
598
|
+
* Works for all selection modes and always returns ranges.
|
|
599
|
+
*
|
|
600
|
+
* @example
|
|
601
|
+
* ```ts
|
|
602
|
+
* const selection = plugin.getSelection();
|
|
603
|
+
* if (selection.ranges.length > 0) {
|
|
604
|
+
* const { from, to } = selection.ranges[0];
|
|
605
|
+
* // For cell mode: from === to (single cell)
|
|
606
|
+
* // For row mode: from.col = 0, to.col = lastCol (full row)
|
|
607
|
+
* // For range mode: rectangular selection
|
|
608
|
+
* }
|
|
609
|
+
* ```
|
|
610
|
+
*/
|
|
611
|
+
getSelection() {
|
|
612
|
+
return {
|
|
613
|
+
mode: this.config.mode,
|
|
614
|
+
ranges: this.#e().ranges,
|
|
615
|
+
anchor: this.cellAnchor
|
|
616
|
+
};
|
|
617
|
+
}
|
|
460
618
|
/**
|
|
461
619
|
* Get the selected cell (cell mode only).
|
|
620
|
+
* @deprecated Use `getSelection()` instead for a unified API across all modes.
|
|
462
621
|
*/
|
|
463
622
|
getSelectedCell() {
|
|
464
|
-
|
|
623
|
+
const { mode: e, ranges: t } = this.getSelection();
|
|
624
|
+
return e === "cell" && t.length > 0 ? t[0].from : null;
|
|
465
625
|
}
|
|
466
626
|
/**
|
|
467
627
|
* Get all selected row indices (row mode).
|
|
628
|
+
* @deprecated Use `getSelection().ranges` instead - each range represents a full row.
|
|
468
629
|
*/
|
|
469
630
|
getSelectedRows() {
|
|
470
|
-
|
|
631
|
+
const { mode: e, ranges: t } = this.getSelection();
|
|
632
|
+
return e === "row" ? t.map((s) => s.from.row) : [];
|
|
471
633
|
}
|
|
472
634
|
/**
|
|
473
635
|
* Get all selected cell ranges in public format.
|
|
636
|
+
* @deprecated Use `getSelection().ranges` instead.
|
|
474
637
|
*/
|
|
475
638
|
getRanges() {
|
|
476
|
-
return
|
|
639
|
+
return this.getSelection().ranges;
|
|
477
640
|
}
|
|
478
641
|
/**
|
|
479
642
|
* Get all selected cells across all ranges.
|
|
480
643
|
*/
|
|
481
644
|
getSelectedCells() {
|
|
482
|
-
return
|
|
645
|
+
return I(this.ranges);
|
|
483
646
|
}
|
|
484
647
|
/**
|
|
485
648
|
* Check if a specific cell is in range selection.
|
|
486
649
|
*/
|
|
487
650
|
isCellSelected(e, t) {
|
|
488
|
-
return
|
|
651
|
+
return R(e, t, this.ranges);
|
|
489
652
|
}
|
|
490
653
|
/**
|
|
491
654
|
* Clear all selection.
|
|
@@ -504,13 +667,13 @@ class q extends C {
|
|
|
504
667
|
endCol: t.to.col
|
|
505
668
|
})), this.activeRange = this.ranges.length > 0 ? this.ranges[this.ranges.length - 1] : null, this.emit("selection-change", {
|
|
506
669
|
mode: this.config.mode,
|
|
507
|
-
ranges:
|
|
670
|
+
ranges: m(this.ranges)
|
|
508
671
|
}), this.requestAfterRender();
|
|
509
672
|
}
|
|
510
673
|
// #endregion
|
|
511
674
|
// #region Private Helpers
|
|
512
675
|
#e() {
|
|
513
|
-
return
|
|
676
|
+
return q(
|
|
514
677
|
this.config.mode,
|
|
515
678
|
{
|
|
516
679
|
selectedCell: this.selectedCell,
|
|
@@ -521,43 +684,11 @@ class q extends C {
|
|
|
521
684
|
);
|
|
522
685
|
}
|
|
523
686
|
// #endregion
|
|
524
|
-
// #region Styles
|
|
525
|
-
styles = y;
|
|
526
|
-
// #endregion
|
|
527
|
-
}
|
|
528
|
-
function S(s, e, t, r) {
|
|
529
|
-
const n = new Set(s.selected);
|
|
530
|
-
let o = s.anchor;
|
|
531
|
-
if (t === "single")
|
|
532
|
-
n.clear(), n.add(e), o = e;
|
|
533
|
-
else if (t === "multiple") {
|
|
534
|
-
const c = r.ctrlKey || r.metaKey;
|
|
535
|
-
if (r.shiftKey && s.anchor !== null) {
|
|
536
|
-
const l = Math.min(s.anchor, e), i = Math.max(s.anchor, e);
|
|
537
|
-
for (let a = l; a <= i; a++)
|
|
538
|
-
n.add(a);
|
|
539
|
-
} else c ? (n.has(e) ? n.delete(e) : n.add(e), o = e) : (n.clear(), n.add(e), o = e);
|
|
540
|
-
}
|
|
541
|
-
return { selected: n, lastSelected: e, anchor: o };
|
|
542
|
-
}
|
|
543
|
-
function x(s) {
|
|
544
|
-
const e = /* @__PURE__ */ new Set();
|
|
545
|
-
for (let t = 0; t < s; t++)
|
|
546
|
-
e.add(t);
|
|
547
|
-
return e;
|
|
548
|
-
}
|
|
549
|
-
function I(s, e) {
|
|
550
|
-
const t = [], r = [];
|
|
551
|
-
for (const n of e)
|
|
552
|
-
s.has(n) || t.push(n);
|
|
553
|
-
for (const n of s)
|
|
554
|
-
e.has(n) || r.push(n);
|
|
555
|
-
return { added: t, removed: r };
|
|
556
687
|
}
|
|
557
688
|
export {
|
|
558
|
-
|
|
559
|
-
|
|
560
|
-
|
|
561
|
-
|
|
689
|
+
M as SelectionPlugin,
|
|
690
|
+
D as computeSelectionDiff,
|
|
691
|
+
x as handleRowClick,
|
|
692
|
+
_ as selectAll
|
|
562
693
|
};
|
|
563
694
|
//# sourceMappingURL=index.js.map
|