@toolbox-web/grid 0.4.1 → 0.5.0
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 +9 -13
- package/all.js +1678 -1588
- package/all.js.map +1 -1
- package/index.js +762 -568
- package/index.js.map +1 -1
- package/lib/core/grid.d.ts +21 -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/dom-builder.d.ts +2 -0
- package/lib/core/internal/dom-builder.d.ts.map +1 -1
- package/lib/core/internal/header.d.ts.map +1 -1
- package/lib/core/internal/keyboard.d.ts.map +1 -1
- package/lib/core/internal/resize.d.ts.map +1 -1
- package/lib/core/internal/rows.d.ts.map +1 -1
- package/lib/core/internal/shell.d.ts +19 -13
- package/lib/core/internal/shell.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 +70 -3
- 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/plugin-manager.d.ts +6 -2
- package/lib/core/plugin/plugin-manager.d.ts.map +1 -1
- 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 +10 -5
- 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 +295 -190
- 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 +143 -56
- 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 +189 -102
- package/lib/plugins/context-menu/index.js.map +1 -1
- package/lib/plugins/editing/EditingPlugin.d.ts +2 -7
- package/lib/plugins/editing/EditingPlugin.d.ts.map +1 -1
- package/lib/plugins/editing/index.js +227 -150
- 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 +184 -97
- package/lib/plugins/export/index.js.map +1 -1
- package/lib/plugins/filtering/FilteringPlugin.d.ts +14 -3
- package/lib/plugins/filtering/FilteringPlugin.d.ts.map +1 -1
- package/lib/plugins/filtering/index.js +296 -176
- package/lib/plugins/filtering/index.js.map +1 -1
- package/lib/plugins/grouping-columns/GroupingColumnsPlugin.d.ts +2 -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 +169 -61
- 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 +243 -140
- 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 +278 -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 +125 -40
- 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 +156 -75
- package/lib/plugins/pinned-columns/index.js.map +1 -1
- package/lib/plugins/pinned-columns/pinned-columns.d.ts +2 -2
- package/lib/plugins/pinned-columns/pinned-columns.d.ts.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 +202 -117
- 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 +413 -314
- 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.d.ts +1 -1
- package/lib/plugins/reorder/index.d.ts.map +1 -1
- package/lib/plugins/reorder/index.js +296 -223
- 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 +282 -141
- 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 +96 -9
- 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 +209 -113
- 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 +98 -11
- 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 +155 -64
- package/lib/plugins/visibility/index.js.map +1 -1
- package/package.json +1 -1
- package/themes/dg-theme-bootstrap.css +55 -53
- package/themes/dg-theme-contrast.css +42 -40
- package/themes/dg-theme-large.css +38 -37
- package/themes/dg-theme-material.css +54 -52
- package/themes/dg-theme-standard.css +19 -17
- package/themes/dg-theme-vibrant.css +16 -14
- package/umd/grid.all.umd.js +23 -24
- package/umd/grid.all.umd.js.map +1 -1
- package/umd/grid.umd.js +12 -11
- 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,4 +1,4 @@
|
|
|
1
|
-
const
|
|
1
|
+
const E = {
|
|
2
2
|
expand: "▶",
|
|
3
3
|
collapse: "▼",
|
|
4
4
|
sortAsc: "▲",
|
|
@@ -8,7 +8,7 @@ const A = {
|
|
|
8
8
|
dragHandle: "⋮⋮",
|
|
9
9
|
toolPanel: "☰"
|
|
10
10
|
};
|
|
11
|
-
class
|
|
11
|
+
class A {
|
|
12
12
|
/**
|
|
13
13
|
* Plugin dependencies - declare other plugins this one requires.
|
|
14
14
|
*
|
|
@@ -25,8 +25,11 @@ class R {
|
|
|
25
25
|
* ```
|
|
26
26
|
*/
|
|
27
27
|
static dependencies;
|
|
28
|
-
/**
|
|
29
|
-
|
|
28
|
+
/**
|
|
29
|
+
* Plugin version - defaults to grid version for built-in plugins.
|
|
30
|
+
* Third-party plugins can override with their own semver.
|
|
31
|
+
*/
|
|
32
|
+
version = typeof __GRID_VERSION__ < "u" ? __GRID_VERSION__ : "dev";
|
|
30
33
|
/** CSS styles to inject into the grid's shadow DOM */
|
|
31
34
|
styles;
|
|
32
35
|
/** Custom cell renderers keyed by type name */
|
|
@@ -110,8 +113,16 @@ class R {
|
|
|
110
113
|
/**
|
|
111
114
|
* Emit a custom event from the grid.
|
|
112
115
|
*/
|
|
113
|
-
emit(t,
|
|
114
|
-
this.grid?.dispatchEvent?.(new CustomEvent(t, { detail:
|
|
116
|
+
emit(t, e) {
|
|
117
|
+
this.grid?.dispatchEvent?.(new CustomEvent(t, { detail: e, bubbles: !0 }));
|
|
118
|
+
}
|
|
119
|
+
/**
|
|
120
|
+
* Emit a cancelable custom event from the grid.
|
|
121
|
+
* @returns `true` if the event was cancelled (preventDefault called), `false` otherwise
|
|
122
|
+
*/
|
|
123
|
+
emitCancelable(t, e) {
|
|
124
|
+
const o = new CustomEvent(t, { detail: e, bubbles: !0, cancelable: !0 });
|
|
125
|
+
return this.grid?.dispatchEvent?.(o), o.defaultPrevented;
|
|
115
126
|
}
|
|
116
127
|
/**
|
|
117
128
|
* Request a re-render of the grid.
|
|
@@ -119,6 +130,14 @@ class R {
|
|
|
119
130
|
requestRender() {
|
|
120
131
|
this.grid?.requestRender?.();
|
|
121
132
|
}
|
|
133
|
+
/**
|
|
134
|
+
* Request a re-render and restore focus styling afterward.
|
|
135
|
+
* Use this when a plugin action (like expand/collapse) triggers a render
|
|
136
|
+
* but needs to maintain keyboard navigation focus.
|
|
137
|
+
*/
|
|
138
|
+
requestRenderWithFocus() {
|
|
139
|
+
this.grid?.requestRenderWithFocus?.();
|
|
140
|
+
}
|
|
122
141
|
/**
|
|
123
142
|
* Request a lightweight style update without rebuilding DOM.
|
|
124
143
|
* Use this instead of requestRender() when only CSS classes need updating.
|
|
@@ -153,10 +172,34 @@ class R {
|
|
|
153
172
|
return this.grid?._visibleColumns ?? [];
|
|
154
173
|
}
|
|
155
174
|
/**
|
|
156
|
-
* Get the
|
|
175
|
+
* Get the grid as an HTMLElement for direct DOM operations.
|
|
176
|
+
* Use sparingly - prefer the typed GridElementRef API when possible.
|
|
177
|
+
*
|
|
178
|
+
* @example
|
|
179
|
+
* ```ts
|
|
180
|
+
* const width = this.gridElement.clientWidth;
|
|
181
|
+
* this.gridElement.classList.add('my-plugin-active');
|
|
182
|
+
* ```
|
|
183
|
+
*/
|
|
184
|
+
get gridElement() {
|
|
185
|
+
return this.grid;
|
|
186
|
+
}
|
|
187
|
+
/**
|
|
188
|
+
* Get the render root of the grid for DOM queries.
|
|
189
|
+
* @deprecated Use `gridElement` instead. This getter exists only for backward compatibility.
|
|
190
|
+
*
|
|
191
|
+
* With Shadow DOM removed, the grid element itself is the render root.
|
|
192
|
+
* All new code should use `this.gridElement` for DOM queries.
|
|
193
|
+
*
|
|
194
|
+
* @example
|
|
195
|
+
* // OLD (deprecated)
|
|
196
|
+
* const rows = this.shadowRoot?.querySelector('.rows');
|
|
197
|
+
*
|
|
198
|
+
* // NEW (preferred)
|
|
199
|
+
* const rows = this.gridElement.querySelector('.rows');
|
|
157
200
|
*/
|
|
158
201
|
get shadowRoot() {
|
|
159
|
-
return this.
|
|
202
|
+
return this.gridElement;
|
|
160
203
|
}
|
|
161
204
|
/**
|
|
162
205
|
* Get the disconnect signal for event listener cleanup.
|
|
@@ -184,8 +227,53 @@ class R {
|
|
|
184
227
|
*/
|
|
185
228
|
get gridIcons() {
|
|
186
229
|
const t = this.grid?.gridConfig?.icons ?? {};
|
|
187
|
-
return { ...
|
|
230
|
+
return { ...E, ...t };
|
|
188
231
|
}
|
|
232
|
+
// #region Animation Helpers
|
|
233
|
+
/**
|
|
234
|
+
* Check if animations are enabled at the grid level.
|
|
235
|
+
* Respects gridConfig.animation.mode and the CSS variable set by the grid.
|
|
236
|
+
*
|
|
237
|
+
* Plugins should use this to skip animations when:
|
|
238
|
+
* - Animation mode is 'off' or `false`
|
|
239
|
+
* - User prefers reduced motion and mode is 'reduced-motion' (default)
|
|
240
|
+
*
|
|
241
|
+
* @example
|
|
242
|
+
* ```ts
|
|
243
|
+
* private get animationStyle(): 'slide' | 'fade' | false {
|
|
244
|
+
* if (!this.isAnimationEnabled) return false;
|
|
245
|
+
* return this.config.animation ?? 'slide';
|
|
246
|
+
* }
|
|
247
|
+
* ```
|
|
248
|
+
*/
|
|
249
|
+
get isAnimationEnabled() {
|
|
250
|
+
const t = this.grid?.effectiveConfig?.animation?.mode ?? "reduced-motion";
|
|
251
|
+
if (t === !1 || t === "off") return !1;
|
|
252
|
+
if (t === !0 || t === "on") return !0;
|
|
253
|
+
const e = this.gridElement;
|
|
254
|
+
return e ? getComputedStyle(e).getPropertyValue("--tbw-animation-enabled").trim() !== "0" : !0;
|
|
255
|
+
}
|
|
256
|
+
/**
|
|
257
|
+
* Get the animation duration in milliseconds from CSS variable.
|
|
258
|
+
* Falls back to 200ms if not set.
|
|
259
|
+
*
|
|
260
|
+
* Plugins can use this for their animation timing to stay consistent
|
|
261
|
+
* with the grid-level animation.duration setting.
|
|
262
|
+
*
|
|
263
|
+
* @example
|
|
264
|
+
* ```ts
|
|
265
|
+
* element.animate(keyframes, { duration: this.animationDuration });
|
|
266
|
+
* ```
|
|
267
|
+
*/
|
|
268
|
+
get animationDuration() {
|
|
269
|
+
const t = this.gridElement;
|
|
270
|
+
if (t) {
|
|
271
|
+
const e = getComputedStyle(t).getPropertyValue("--tbw-animation-duration").trim(), o = parseInt(e, 10);
|
|
272
|
+
if (!isNaN(o)) return o;
|
|
273
|
+
}
|
|
274
|
+
return 200;
|
|
275
|
+
}
|
|
276
|
+
// #endregion
|
|
189
277
|
/**
|
|
190
278
|
* Resolve an icon value to string or HTMLElement.
|
|
191
279
|
* Checks plugin config first, then grid-level icons, then defaults.
|
|
@@ -194,8 +282,8 @@ class R {
|
|
|
194
282
|
* @param pluginOverride - Optional plugin-level override
|
|
195
283
|
* @returns The resolved icon value
|
|
196
284
|
*/
|
|
197
|
-
resolveIcon(t,
|
|
198
|
-
return
|
|
285
|
+
resolveIcon(t, e) {
|
|
286
|
+
return e !== void 0 ? e : this.gridIcons[t];
|
|
199
287
|
}
|
|
200
288
|
/**
|
|
201
289
|
* Set an icon value on an element.
|
|
@@ -204,8 +292,8 @@ class R {
|
|
|
204
292
|
* @param element - The element to set the icon on
|
|
205
293
|
* @param icon - The icon value (string or HTMLElement)
|
|
206
294
|
*/
|
|
207
|
-
setIcon(t,
|
|
208
|
-
typeof
|
|
295
|
+
setIcon(t, e) {
|
|
296
|
+
typeof e == "string" ? t.innerHTML = e : e instanceof HTMLElement && (t.innerHTML = "", t.appendChild(e.cloneNode(!0)));
|
|
209
297
|
}
|
|
210
298
|
/**
|
|
211
299
|
* Log a warning message.
|
|
@@ -216,90 +304,90 @@ class R {
|
|
|
216
304
|
// #endregion
|
|
217
305
|
}
|
|
218
306
|
const p = {
|
|
219
|
-
sum: (
|
|
220
|
-
avg: (
|
|
221
|
-
const
|
|
222
|
-
return
|
|
307
|
+
sum: (n, t) => n.reduce((e, o) => e + (Number(o[t]) || 0), 0),
|
|
308
|
+
avg: (n, t) => {
|
|
309
|
+
const e = n.reduce((o, r) => o + (Number(r[t]) || 0), 0);
|
|
310
|
+
return n.length ? e / n.length : 0;
|
|
223
311
|
},
|
|
224
|
-
count: (
|
|
225
|
-
min: (
|
|
226
|
-
max: (
|
|
227
|
-
first: (
|
|
228
|
-
last: (
|
|
229
|
-
},
|
|
312
|
+
count: (n) => n.length,
|
|
313
|
+
min: (n, t) => Math.min(...n.map((e) => Number(e[t]) || 1 / 0)),
|
|
314
|
+
max: (n, t) => Math.max(...n.map((e) => Number(e[t]) || -1 / 0)),
|
|
315
|
+
first: (n, t) => n[0]?.[t],
|
|
316
|
+
last: (n, t) => n[n.length - 1]?.[t]
|
|
317
|
+
}, f = /* @__PURE__ */ new Map(), d = {
|
|
230
318
|
/**
|
|
231
319
|
* Register a custom aggregator function.
|
|
232
320
|
*/
|
|
233
|
-
register(
|
|
234
|
-
|
|
321
|
+
register(n, t) {
|
|
322
|
+
f.set(n, t);
|
|
235
323
|
},
|
|
236
324
|
/**
|
|
237
325
|
* Unregister a custom aggregator function.
|
|
238
326
|
*/
|
|
239
|
-
unregister(
|
|
240
|
-
|
|
327
|
+
unregister(n) {
|
|
328
|
+
f.delete(n);
|
|
241
329
|
},
|
|
242
330
|
/**
|
|
243
331
|
* Get an aggregator function by reference.
|
|
244
332
|
*/
|
|
245
|
-
get(
|
|
246
|
-
if (
|
|
247
|
-
return typeof
|
|
333
|
+
get(n) {
|
|
334
|
+
if (n !== void 0)
|
|
335
|
+
return typeof n == "function" ? n : f.get(n) ?? p[n];
|
|
248
336
|
},
|
|
249
337
|
/**
|
|
250
338
|
* Run an aggregator on a set of rows.
|
|
251
339
|
*/
|
|
252
|
-
run(
|
|
253
|
-
const r = this.get(
|
|
254
|
-
return r ? r(t,
|
|
340
|
+
run(n, t, e, o) {
|
|
341
|
+
const r = this.get(n);
|
|
342
|
+
return r ? r(t, e, o) : void 0;
|
|
255
343
|
},
|
|
256
344
|
/**
|
|
257
345
|
* Check if an aggregator exists.
|
|
258
346
|
*/
|
|
259
|
-
has(
|
|
260
|
-
return
|
|
347
|
+
has(n) {
|
|
348
|
+
return f.has(n) || n in p;
|
|
261
349
|
},
|
|
262
350
|
/**
|
|
263
351
|
* List all available aggregator names.
|
|
264
352
|
*/
|
|
265
353
|
list() {
|
|
266
|
-
return [...Object.keys(p), ...
|
|
354
|
+
return [...Object.keys(p), ...f.keys()];
|
|
267
355
|
}
|
|
268
356
|
};
|
|
269
357
|
d.register.bind(d);
|
|
270
358
|
d.unregister.bind(d);
|
|
271
|
-
const
|
|
359
|
+
const b = d.get.bind(d);
|
|
272
360
|
d.run.bind(d);
|
|
273
361
|
d.list.bind(d);
|
|
274
|
-
function
|
|
275
|
-
return typeof
|
|
362
|
+
function R(n) {
|
|
363
|
+
return typeof n == "object" && n !== null && "aggFunc" in n;
|
|
276
364
|
}
|
|
277
|
-
function m(
|
|
278
|
-
const
|
|
279
|
-
|
|
280
|
-
const
|
|
281
|
-
|
|
365
|
+
function m(n, t) {
|
|
366
|
+
const e = document.createElement("div");
|
|
367
|
+
e.className = "tbw-pinned-rows", e.setAttribute("role", "presentation"), e.setAttribute("aria-live", "polite");
|
|
368
|
+
const o = document.createElement("div");
|
|
369
|
+
o.className = "tbw-pinned-rows-left";
|
|
282
370
|
const r = document.createElement("div");
|
|
283
371
|
r.className = "tbw-pinned-rows-center";
|
|
284
372
|
const s = document.createElement("div");
|
|
285
|
-
if (s.className = "tbw-pinned-rows-right",
|
|
286
|
-
const
|
|
287
|
-
|
|
288
|
-
}
|
|
289
|
-
if (
|
|
290
|
-
const
|
|
291
|
-
|
|
292
|
-
}
|
|
293
|
-
if (
|
|
294
|
-
const
|
|
295
|
-
|
|
296
|
-
}
|
|
297
|
-
if (
|
|
298
|
-
for (const
|
|
299
|
-
const a =
|
|
300
|
-
switch (
|
|
373
|
+
if (s.className = "tbw-pinned-rows-right", n.showRowCount !== !1) {
|
|
374
|
+
const i = document.createElement("span");
|
|
375
|
+
i.className = "tbw-status-panel tbw-status-panel-row-count", i.textContent = `Total: ${t.totalRows} rows`, o.appendChild(i);
|
|
376
|
+
}
|
|
377
|
+
if (n.showFilteredCount && t.filteredRows !== t.totalRows) {
|
|
378
|
+
const i = document.createElement("span");
|
|
379
|
+
i.className = "tbw-status-panel tbw-status-panel-filtered-count", i.textContent = `Filtered: ${t.filteredRows}`, o.appendChild(i);
|
|
380
|
+
}
|
|
381
|
+
if (n.showSelectedCount && t.selectedRows > 0) {
|
|
382
|
+
const i = document.createElement("span");
|
|
383
|
+
i.className = "tbw-status-panel tbw-status-panel-selected-count", i.textContent = `Selected: ${t.selectedRows}`, s.appendChild(i);
|
|
384
|
+
}
|
|
385
|
+
if (n.customPanels)
|
|
386
|
+
for (const i of n.customPanels) {
|
|
387
|
+
const a = y(i, t);
|
|
388
|
+
switch (i.position) {
|
|
301
389
|
case "left":
|
|
302
|
-
|
|
390
|
+
o.appendChild(a);
|
|
303
391
|
break;
|
|
304
392
|
case "center":
|
|
305
393
|
r.appendChild(a);
|
|
@@ -309,62 +397,62 @@ function m(e, t) {
|
|
|
309
397
|
break;
|
|
310
398
|
}
|
|
311
399
|
}
|
|
312
|
-
return
|
|
400
|
+
return e.appendChild(o), e.appendChild(r), e.appendChild(s), e;
|
|
313
401
|
}
|
|
314
|
-
function
|
|
402
|
+
function w(n) {
|
|
315
403
|
const t = document.createElement("div");
|
|
316
|
-
return t.className = `tbw-aggregation-rows tbw-aggregation-rows-${
|
|
404
|
+
return t.className = `tbw-aggregation-rows tbw-aggregation-rows-${n}`, t.setAttribute("role", "presentation"), t;
|
|
317
405
|
}
|
|
318
|
-
function C(
|
|
319
|
-
|
|
406
|
+
function C(n, t, e, o) {
|
|
407
|
+
n.innerHTML = "";
|
|
320
408
|
for (const r of t) {
|
|
321
409
|
const s = document.createElement("div");
|
|
322
410
|
if (s.className = "tbw-aggregation-row", s.setAttribute("role", "presentation"), r.id && s.setAttribute("data-aggregation-id", r.id), r.fullWidth) {
|
|
323
|
-
const
|
|
324
|
-
|
|
411
|
+
const i = document.createElement("div");
|
|
412
|
+
i.className = "tbw-aggregation-cell tbw-aggregation-cell-full", i.style.gridColumn = "1 / -1", i.textContent = r.label || "", s.appendChild(i);
|
|
325
413
|
} else
|
|
326
|
-
for (const
|
|
414
|
+
for (const i of e) {
|
|
327
415
|
const a = document.createElement("div");
|
|
328
|
-
a.className = "tbw-aggregation-cell", a.setAttribute("data-field",
|
|
329
|
-
let l,
|
|
330
|
-
const h = r.aggregators?.[
|
|
416
|
+
a.className = "tbw-aggregation-cell", a.setAttribute("data-field", i.field);
|
|
417
|
+
let l, u;
|
|
418
|
+
const h = r.aggregators?.[i.field];
|
|
331
419
|
if (h)
|
|
332
|
-
if (
|
|
333
|
-
const g =
|
|
334
|
-
g && (l = g(
|
|
420
|
+
if (R(h)) {
|
|
421
|
+
const g = b(h.aggFunc);
|
|
422
|
+
g && (l = g(o, i.field, i)), u = h.formatter;
|
|
335
423
|
} else {
|
|
336
|
-
const g =
|
|
337
|
-
g && (l = g(
|
|
424
|
+
const g = b(h);
|
|
425
|
+
g && (l = g(o, i.field, i));
|
|
338
426
|
}
|
|
339
|
-
else if (r.cells && Object.prototype.hasOwnProperty.call(r.cells,
|
|
340
|
-
const g = r.cells[
|
|
341
|
-
typeof g == "function" ? l = g(
|
|
427
|
+
else if (r.cells && Object.prototype.hasOwnProperty.call(r.cells, i.field)) {
|
|
428
|
+
const g = r.cells[i.field];
|
|
429
|
+
typeof g == "function" ? l = g(o, i.field, i) : l = g;
|
|
342
430
|
}
|
|
343
|
-
l != null ? a.textContent =
|
|
431
|
+
l != null ? a.textContent = u ? u(l, i.field, i) : String(l) : a.textContent = "", s.appendChild(a);
|
|
344
432
|
}
|
|
345
|
-
|
|
433
|
+
n.appendChild(s);
|
|
346
434
|
}
|
|
347
435
|
}
|
|
348
|
-
function
|
|
349
|
-
const
|
|
350
|
-
|
|
351
|
-
const
|
|
352
|
-
return typeof
|
|
436
|
+
function y(n, t) {
|
|
437
|
+
const e = document.createElement("div");
|
|
438
|
+
e.className = "tbw-status-panel tbw-status-panel-custom", e.id = `status-panel-${n.id}`;
|
|
439
|
+
const o = n.render(t);
|
|
440
|
+
return typeof o == "string" ? e.innerHTML = o : e.appendChild(o), e;
|
|
353
441
|
}
|
|
354
|
-
function v(
|
|
442
|
+
function v(n, t, e, o, r) {
|
|
355
443
|
return {
|
|
356
|
-
totalRows:
|
|
357
|
-
filteredRows: r?.cachedResult?.length ??
|
|
358
|
-
selectedRows:
|
|
444
|
+
totalRows: n.length,
|
|
445
|
+
filteredRows: r?.cachedResult?.length ?? n.length,
|
|
446
|
+
selectedRows: o?.selected?.size ?? 0,
|
|
359
447
|
columns: t,
|
|
360
|
-
rows:
|
|
361
|
-
grid:
|
|
448
|
+
rows: n,
|
|
449
|
+
grid: e
|
|
362
450
|
};
|
|
363
451
|
}
|
|
364
|
-
const
|
|
365
|
-
class
|
|
452
|
+
const S = "@layer tbw-plugins{.tbw-footer{flex-shrink:0;z-index:var(--tbw-z-layer-pinned-rows, 20);background:var(--tbw-color-panel-bg)}.tbw-pinned-rows{display:flex;align-items:center;justify-content:space-between;padding:var(--tbw-button-padding, var(--tbw-spacing-md, .5rem) var(--tbw-spacing-lg, .75rem));background:var(--tbw-pinned-rows-bg, var(--tbw-color-panel-bg));border-top:1px solid var(--tbw-pinned-rows-border, var(--tbw-color-border));font-size:var(--tbw-font-size-xs, .75rem);color:var(--tbw-pinned-rows-color, var(--tbw-color-fg-muted));min-height:32px;box-sizing:border-box;min-width:fit-content}.tbw-pinned-rows-left,.tbw-pinned-rows-center,.tbw-pinned-rows-right{display:flex;align-items:center;gap:var(--tbw-spacing-xl, 1rem)}.tbw-pinned-rows-left{justify-content:flex-start}.tbw-pinned-rows-center{justify-content:center;flex:1}.tbw-pinned-rows-right{justify-content:flex-end}.tbw-status-panel{white-space:nowrap}.tbw-aggregation-rows{min-width:fit-content;background:var(--tbw-aggregation-bg, var(--tbw-color-header-bg))}.tbw-aggregation-rows-top{border-bottom:1px solid var(--tbw-aggregation-border, var(--tbw-color-border))}.tbw-aggregation-rows-bottom{border-top:1px solid var(--tbw-aggregation-border, var(--tbw-color-border))}.tbw-aggregation-row{display:grid;grid-template-columns:var(--tbw-column-template);font-size:var(--tbw-aggregation-font-size, .8em);font-weight:var(--tbw-aggregation-font-weight, 600)}.tbw-aggregation-cell{padding:var(--tbw-cell-padding, .125rem .5rem);min-height:var(--tbw-row-height, 1.75rem);display:flex;align-items:center;border-right:1px solid var(--tbw-color-border-cell)}.tbw-aggregation-cell:last-child{border-right:0}.tbw-aggregation-cell-full{grid-column:1 / -1;border-right:0}}";
|
|
453
|
+
class B extends A {
|
|
366
454
|
name = "pinnedRows";
|
|
367
|
-
|
|
455
|
+
styles = S;
|
|
368
456
|
get defaultConfig() {
|
|
369
457
|
return {
|
|
370
458
|
position: "bottom",
|
|
@@ -386,23 +474,23 @@ class y extends R {
|
|
|
386
474
|
// #endregion
|
|
387
475
|
// #region Hooks
|
|
388
476
|
afterRender() {
|
|
389
|
-
const t = this.
|
|
477
|
+
const t = this.gridElement;
|
|
390
478
|
if (!t) return;
|
|
391
|
-
const
|
|
392
|
-
if (!
|
|
393
|
-
this.footerWrapper && !
|
|
394
|
-
const
|
|
479
|
+
const e = t.querySelector(".tbw-scroll-area") ?? t.querySelector(".tbw-grid-content") ?? t.children[0];
|
|
480
|
+
if (!e) return;
|
|
481
|
+
this.footerWrapper && !e.contains(this.footerWrapper) && (this.footerWrapper = null, this.bottomAggregationContainer = null, this.infoBarElement = null), this.topAggregationContainer && !e.contains(this.topAggregationContainer) && (this.topAggregationContainer = null), this.infoBarElement && !e.contains(this.infoBarElement) && (this.infoBarElement = null);
|
|
482
|
+
const o = this.getSelectionState(), r = this.getFilterState(), s = v(
|
|
395
483
|
this.rows,
|
|
396
484
|
this.columns,
|
|
397
485
|
this.grid,
|
|
398
|
-
|
|
486
|
+
o,
|
|
399
487
|
r
|
|
400
|
-
),
|
|
488
|
+
), i = this.config.aggregationRows || [], a = i.filter((c) => c.position === "top"), l = i.filter((c) => c.position !== "top");
|
|
401
489
|
if (a.length > 0) {
|
|
402
490
|
if (!this.topAggregationContainer) {
|
|
403
|
-
this.topAggregationContainer =
|
|
491
|
+
this.topAggregationContainer = w("top");
|
|
404
492
|
const c = t.querySelector(".header");
|
|
405
|
-
c && c.nextSibling ?
|
|
493
|
+
c && c.nextSibling ? e.insertBefore(this.topAggregationContainer, c.nextSibling) : e.appendChild(this.topAggregationContainer);
|
|
406
494
|
}
|
|
407
495
|
C(
|
|
408
496
|
this.topAggregationContainer,
|
|
@@ -411,16 +499,16 @@ class y extends R {
|
|
|
411
499
|
this.rows
|
|
412
500
|
);
|
|
413
501
|
} else this.topAggregationContainer && (this.topAggregationContainer.remove(), this.topAggregationContainer = null);
|
|
414
|
-
const
|
|
415
|
-
if (
|
|
502
|
+
const u = this.config.showRowCount !== !1 || this.config.showSelectedCount && s.selectedRows > 0 || this.config.showFilteredCount && s.filteredRows !== s.totalRows || this.config.customPanels && this.config.customPanels.length > 0, h = u && this.config.position !== "top", g = l.length > 0 || h;
|
|
503
|
+
if (u && this.config.position === "top")
|
|
416
504
|
if (!this.infoBarElement)
|
|
417
|
-
this.infoBarElement = m(this.config, s),
|
|
505
|
+
this.infoBarElement = m(this.config, s), e.insertBefore(this.infoBarElement, e.firstChild);
|
|
418
506
|
else {
|
|
419
507
|
const c = m(this.config, s);
|
|
420
508
|
this.infoBarElement.replaceWith(c), this.infoBarElement = c;
|
|
421
509
|
}
|
|
422
510
|
else this.config.position === "top" && this.infoBarElement && (this.infoBarElement.remove(), this.infoBarElement = null);
|
|
423
|
-
g ? (this.footerWrapper || (this.footerWrapper = document.createElement("div"), this.footerWrapper.className = "tbw-footer",
|
|
511
|
+
g ? (this.footerWrapper || (this.footerWrapper = document.createElement("div"), this.footerWrapper.className = "tbw-footer", e.appendChild(this.footerWrapper)), this.footerWrapper.innerHTML = "", l.length > 0 && (this.bottomAggregationContainer || (this.bottomAggregationContainer = w("bottom")), this.footerWrapper.appendChild(this.bottomAggregationContainer), C(
|
|
424
512
|
this.bottomAggregationContainer,
|
|
425
513
|
l,
|
|
426
514
|
this.visibleColumns,
|
|
@@ -462,13 +550,13 @@ class y extends R {
|
|
|
462
550
|
* @returns The context with row counts and other info
|
|
463
551
|
*/
|
|
464
552
|
getContext() {
|
|
465
|
-
const t = this.getSelectionState(),
|
|
553
|
+
const t = this.getSelectionState(), e = this.getFilterState();
|
|
466
554
|
return v(
|
|
467
555
|
this.rows,
|
|
468
556
|
this.columns,
|
|
469
557
|
this.grid,
|
|
470
558
|
t,
|
|
471
|
-
|
|
559
|
+
e
|
|
472
560
|
);
|
|
473
561
|
}
|
|
474
562
|
/**
|
|
@@ -483,7 +571,7 @@ class y extends R {
|
|
|
483
571
|
* @param id - The panel ID to remove
|
|
484
572
|
*/
|
|
485
573
|
removePanel(t) {
|
|
486
|
-
this.config.customPanels && (this.config.customPanels = this.config.customPanels.filter((
|
|
574
|
+
this.config.customPanels && (this.config.customPanels = this.config.customPanels.filter((e) => e.id !== t), this.requestRender());
|
|
487
575
|
}
|
|
488
576
|
/**
|
|
489
577
|
* Add an aggregation row.
|
|
@@ -497,14 +585,11 @@ class y extends R {
|
|
|
497
585
|
* @param id - The aggregation row ID to remove
|
|
498
586
|
*/
|
|
499
587
|
removeAggregationRow(t) {
|
|
500
|
-
this.config.aggregationRows && (this.config.aggregationRows = this.config.aggregationRows.filter((
|
|
588
|
+
this.config.aggregationRows && (this.config.aggregationRows = this.config.aggregationRows.filter((e) => e.id !== t), this.requestRender());
|
|
501
589
|
}
|
|
502
590
|
// #endregion
|
|
503
|
-
// #region Styles
|
|
504
|
-
styles = B;
|
|
505
|
-
// #endregion
|
|
506
591
|
}
|
|
507
592
|
export {
|
|
508
|
-
|
|
593
|
+
B as PinnedRowsPlugin
|
|
509
594
|
};
|
|
510
595
|
//# sourceMappingURL=index.js.map
|