@toolbox-web/grid 1.6.0 → 1.6.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/all.js +561 -471
- package/all.js.map +1 -1
- package/index.js +3 -3
- package/index.js.map +1 -1
- package/lib/plugins/context-menu/ContextMenuPlugin.d.ts +11 -0
- package/lib/plugins/context-menu/ContextMenuPlugin.d.ts.map +1 -1
- package/lib/plugins/context-menu/index.js +136 -77
- package/lib/plugins/context-menu/index.js.map +1 -1
- package/lib/plugins/filtering/FilteringPlugin.d.ts.map +1 -1
- package/lib/plugins/filtering/index.js +246 -250
- package/lib/plugins/filtering/index.js.map +1 -1
- package/lib/plugins/multi-sort/index.js +11 -11
- package/lib/plugins/pivot/PivotPlugin.d.ts +2 -0
- package/lib/plugins/pivot/PivotPlugin.d.ts.map +1 -1
- package/lib/plugins/pivot/index.js +29 -27
- package/lib/plugins/pivot/index.js.map +1 -1
- package/lib/plugins/print/index.js +1 -1
- package/lib/plugins/print/index.js.map +1 -1
- package/lib/plugins/row-reorder/RowReorderPlugin.d.ts +18 -0
- package/lib/plugins/row-reorder/RowReorderPlugin.d.ts.map +1 -1
- package/lib/plugins/row-reorder/index.js +132 -72
- package/lib/plugins/row-reorder/index.js.map +1 -1
- package/lib/plugins/selection/index.js +1 -1
- package/lib/plugins/visibility/index.js +7 -7
- package/package.json +1 -1
- package/themes/dg-theme-bootstrap.css +60 -33
- package/themes/dg-theme-material.css +83 -52
- package/themes/dg-theme-standard.css +80 -12
- package/themes/dg-theme-vibrant.css +78 -9
- package/umd/grid.all.umd.js +17 -17
- package/umd/grid.all.umd.js.map +1 -1
- package/umd/grid.umd.js +1 -1
- package/umd/grid.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/filtering.umd.js +1 -1
- package/umd/plugins/filtering.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/pivot.umd.js +1 -1
- package/umd/plugins/pivot.umd.js.map +1 -1
- package/umd/plugins/print.umd.js +1 -1
- package/umd/plugins/print.umd.js.map +1 -1
- package/umd/plugins/row-reorder.umd.js +1 -1
- package/umd/plugins/row-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/visibility.umd.js +1 -1
- package/umd/plugins/visibility.umd.js.map +1 -1
|
@@ -1,19 +1,19 @@
|
|
|
1
|
-
function
|
|
2
|
-
const { totalRows: e, viewportHeight: t, scrollTop: r, rowHeight:
|
|
3
|
-
let
|
|
4
|
-
|
|
5
|
-
let i =
|
|
6
|
-
return i > e && (i = e), i === e &&
|
|
7
|
-
start:
|
|
1
|
+
function Y(N) {
|
|
2
|
+
const { totalRows: e, viewportHeight: t, scrollTop: r, rowHeight: a, overscan: l } = N, c = Math.ceil(t / a);
|
|
3
|
+
let d = Math.floor(r / a) - l;
|
|
4
|
+
d < 0 && (d = 0);
|
|
5
|
+
let i = d + c + l * 2;
|
|
6
|
+
return i > e && (i = e), i === e && d > 0 && (d = Math.max(0, i - c - l * 2)), {
|
|
7
|
+
start: d,
|
|
8
8
|
end: i,
|
|
9
|
-
offsetY:
|
|
10
|
-
totalHeight: e *
|
|
9
|
+
offsetY: d * a,
|
|
10
|
+
totalHeight: e * a
|
|
11
11
|
};
|
|
12
12
|
}
|
|
13
|
-
function
|
|
14
|
-
return
|
|
13
|
+
function G(N, e) {
|
|
14
|
+
return N <= e;
|
|
15
15
|
}
|
|
16
|
-
const
|
|
16
|
+
const q = '<svg viewBox="0 0 16 16" width="12" height="12"><path fill="currentColor" d="M6 10.5a.5.5 0 0 1 .5-.5h3a.5.5 0 0 1 0 1h-3a.5.5 0 0 1-.5-.5zm-2-3a.5.5 0 0 1 .5-.5h7a.5.5 0 0 1 0 1h-7a.5.5 0 0 1-.5-.5zm-2-3a.5.5 0 0 1 .5-.5h11a.5.5 0 0 1 0 1h-11a.5.5 0 0 1-.5-.5z"/></svg>', $ = {
|
|
17
17
|
expand: "▶",
|
|
18
18
|
collapse: "▼",
|
|
19
19
|
sortAsc: "▲",
|
|
@@ -22,11 +22,11 @@ const B = '<svg viewBox="0 0 16 16" width="12" height="12"><path fill="currentCo
|
|
|
22
22
|
submenuArrow: "▶",
|
|
23
23
|
dragHandle: "⋮⋮",
|
|
24
24
|
toolPanel: "☰",
|
|
25
|
-
filter:
|
|
26
|
-
filterActive:
|
|
25
|
+
filter: q,
|
|
26
|
+
filterActive: q,
|
|
27
27
|
print: "🖨️"
|
|
28
28
|
};
|
|
29
|
-
class
|
|
29
|
+
class K {
|
|
30
30
|
/**
|
|
31
31
|
* Plugin dependencies - declare other plugins this one requires.
|
|
32
32
|
*
|
|
@@ -250,7 +250,7 @@ class W {
|
|
|
250
250
|
*/
|
|
251
251
|
get gridIcons() {
|
|
252
252
|
const e = this.grid?.gridConfig?.icons ?? {};
|
|
253
|
-
return {
|
|
253
|
+
return { ...$, ...e };
|
|
254
254
|
}
|
|
255
255
|
// #region Animation Helpers
|
|
256
256
|
/**
|
|
@@ -326,31 +326,31 @@ class W {
|
|
|
326
326
|
}
|
|
327
327
|
// #endregion
|
|
328
328
|
}
|
|
329
|
-
function
|
|
330
|
-
return
|
|
329
|
+
function W(N) {
|
|
330
|
+
return N.meta?.utility === !0;
|
|
331
331
|
}
|
|
332
|
-
function
|
|
333
|
-
const r =
|
|
332
|
+
function j(N, e, t = !1) {
|
|
333
|
+
const r = N[e.field];
|
|
334
334
|
if (e.operator === "blank")
|
|
335
335
|
return r == null || r === "";
|
|
336
336
|
if (e.operator === "notBlank")
|
|
337
337
|
return r != null && r !== "";
|
|
338
338
|
if (r == null) return !1;
|
|
339
|
-
const
|
|
339
|
+
const a = String(r), l = t ? a : a.toLowerCase(), c = t ? String(e.value) : String(e.value).toLowerCase();
|
|
340
340
|
switch (e.operator) {
|
|
341
341
|
// Text operators
|
|
342
342
|
case "contains":
|
|
343
|
-
return
|
|
343
|
+
return l.includes(c);
|
|
344
344
|
case "notContains":
|
|
345
|
-
return !
|
|
345
|
+
return !l.includes(c);
|
|
346
346
|
case "equals":
|
|
347
|
-
return
|
|
347
|
+
return l === c;
|
|
348
348
|
case "notEquals":
|
|
349
|
-
return
|
|
349
|
+
return l !== c;
|
|
350
350
|
case "startsWith":
|
|
351
|
-
return
|
|
351
|
+
return l.startsWith(c);
|
|
352
352
|
case "endsWith":
|
|
353
|
-
return
|
|
353
|
+
return l.endsWith(c);
|
|
354
354
|
// Number/Date operators (use raw numeric values)
|
|
355
355
|
case "lessThan":
|
|
356
356
|
return Number(r) < Number(e.value);
|
|
@@ -371,12 +371,12 @@ function U(F, e, t = !1) {
|
|
|
371
371
|
return !0;
|
|
372
372
|
}
|
|
373
373
|
}
|
|
374
|
-
function
|
|
375
|
-
return e.length ?
|
|
374
|
+
function U(N, e, t = !1) {
|
|
375
|
+
return e.length ? N.filter((r) => e.every((a) => j(r, a, t))) : N;
|
|
376
376
|
}
|
|
377
|
-
function
|
|
377
|
+
function J(N) {
|
|
378
378
|
return JSON.stringify(
|
|
379
|
-
|
|
379
|
+
N.map((e) => ({
|
|
380
380
|
field: e.field,
|
|
381
381
|
operator: e.operator,
|
|
382
382
|
value: e.value,
|
|
@@ -384,20 +384,20 @@ function Q(F) {
|
|
|
384
384
|
}))
|
|
385
385
|
);
|
|
386
386
|
}
|
|
387
|
-
function
|
|
387
|
+
function B(N, e) {
|
|
388
388
|
const t = /* @__PURE__ */ new Set();
|
|
389
|
-
for (const r of
|
|
390
|
-
const
|
|
391
|
-
|
|
389
|
+
for (const r of N) {
|
|
390
|
+
const a = r[e];
|
|
391
|
+
a != null && t.add(a);
|
|
392
392
|
}
|
|
393
|
-
return [...t].sort((r,
|
|
393
|
+
return [...t].sort((r, a) => typeof r == "number" && typeof a == "number" ? r - a : String(r).localeCompare(String(a)));
|
|
394
394
|
}
|
|
395
|
-
const X = '@layer tbw-plugins{tbw-grid .tbw-quick-filter-input{flex:1;max-width:300px;height:var(--tbw-input-height, 1.75rem);padding:var(--tbw-input-padding, 0 .5rem);border:1px solid var(--tbw-color-border);border-radius:var(--tbw-border-radius);background:var(--tbw-color-bg);color:var(--tbw-color-fg);font-size:var(--tbw-font-size-sm, .8125rem)}tbw-grid .tbw-quick-filter-input:focus{outline:none;border-color:var(--tbw-color-accent)}tbw-grid .header-cell.filtered:before{content:"";position:absolute;top:var(--tbw-spacing-xs, .25rem);right:var(--tbw-spacing-xs, .25rem);width:var(--tbw-indicator-size, .375rem);height:var(--tbw-indicator-size, .375rem);background:var(--tbw-filter-accent, var(--tbw-color-accent, #3b82f6));border-radius:50%}tbw-grid .tbw-filter-btn{display:var(--tbw-filter-btn-display, inline-flex);visibility:var(--tbw-filter-btn-visibility, visible);align-items:center;justify-content:center;background:transparent;border:none;cursor:pointer;padding:2px;margin-left:var(--tbw-spacing-xs, .25rem);opacity:.4;transition:opacity .15s,visibility 0s,display 0s allow-discrete;color:inherit;vertical-align:middle;transition-behavior:allow-discrete}tbw-grid .tbw-filter-btn:hover,tbw-grid .tbw-filter-btn.active{opacity:1;visibility:visible;display:inline-flex}tbw-grid .tbw-filter-btn.active{color:var(--tbw-filter-accent, var(--tbw-color-accent, #3b82f6))}tbw-grid .header-row .cell:hover .tbw-filter-btn,tbw-grid .header-row .cell.filtered .tbw-filter-btn{display:inline-flex;visibility:visible}}', Z = "@layer tbw-plugins{.tbw-filter-panel{position:fixed;background:var(--tbw-filter-panel-bg, var(--tbw-color-panel-bg, light-dark(#eeeeee, #222222)));color:var(--tbw-filter-panel-fg, var(--tbw-color-fg, light-dark(#222222, #eeeeee)));border:1px solid var(--tbw-filter-panel-border, var(--tbw-color-border, light-dark(#d0d0d4, #454545)));border-radius:var(--tbw-filter-panel-radius, var(--tbw-border-radius, .25rem));box-shadow:0 4px 16px var(--tbw-filter-panel-shadow, var(--tbw-color-shadow, light-dark(rgba(0, 0, 0, .1), rgba(0, 0, 0, .3))));padding:var(--tbw-panel-padding, var(--tbw-spacing-lg, .75rem));z-index:10000;min-width:200px;max-width:280px;max-height:350px;display:flex;flex-direction:column;font-family:var(--tbw-font-family, system-ui, sans-serif);font-size:var(--tbw-font-size, .8125rem);transform-origin:top center}.tbw-filter-panel.tbw-filter-panel-above{transform-origin:bottom center}.tbw-filter-panel.tbw-filter-panel-animated{animation:tbw-filter-panel-enter var(--tbw-animation-duration, .15s) var(--tbw-animation-easing, ease-out)}.tbw-filter-panel.tbw-filter-panel-above.tbw-filter-panel-animated{animation:tbw-filter-panel-enter-above var(--tbw-animation-duration, .15s) var(--tbw-animation-easing, ease-out)}@keyframes tbw-filter-panel-enter{0%{opacity:0;transform:scaleY(.3) translateY(-10px)}to{opacity:1;transform:scaleY(1) translateY(0)}}@keyframes tbw-filter-panel-enter-above{0%{opacity:0;transform:scaleY(.3) translateY(10px)}to{opacity:1;transform:scaleY(1) translateY(0)}}@supports (anchor-name: --test){.tbw-filter-panel{position-anchor:--tbw-filter-anchor;top:anchor(bottom);left:anchor(left);margin-top:4px;position-try-fallbacks:flip-inline,flip-block,flip-block flip-inline}}.tbw-filter-search{margin-bottom:var(--tbw-panel-gap, var(--tbw-spacing-md, .5rem));min-height:var(--tbw-filter-item-height, 28px)}.tbw-filter-search-input{height:var(--tbw-filter-item-height, 28px);width:100%;padding:var(--tbw-filter-search-padding, var(--tbw-spacing-sm, .375rem) var(--tbw-spacing-md, .5rem));background:var(--tbw-filter-input-bg, var(--tbw-color-bg, transparent));color:inherit;border:1px solid var(--tbw-filter-input-border, var(--tbw-color-border, light-dark(#d0d0d4, #454545)));border-radius:var(--tbw-filter-input-radius, var(--tbw-border-radius, .25rem));font-size:inherit;box-sizing:border-box}.tbw-filter-search-input:focus{outline:none;border-color:var(--tbw-filter-accent, var(--tbw-color-accent, #3b82f6));box-shadow:0 0 0 2px rgba(from var(--tbw-filter-accent, var(--tbw-color-accent, #3b82f6)) r g b / 15%)}.tbw-filter-actions{display:flex;padding:var(--tbw-button-padding-sm, .25rem .125rem);margin-bottom:var(--tbw-panel-gap, var(--tbw-spacing-md, .5rem));border-bottom:1px solid var(--tbw-filter-divider, var(--tbw-color-border, light-dark(#d0d0d4, #454545)));min-height:var(--tbw-filter-item-height, 28px)}.tbw-filter-action-btn{background:transparent;border:none;color:var(--tbw-filter-accent, var(--tbw-color-accent, #3b82f6));cursor:pointer;font-size:var(--tbw-font-size-xs, .75rem);padding:2px 0}.tbw-filter-action-btn:hover{text-decoration:underline}.tbw-filter-values{flex:1;overflow-y:auto;margin-bottom:var(--tbw-panel-gap, var(--tbw-spacing-md, .5rem));max-height:180px;position:relative}.tbw-filter-values-spacer{width:1px}.tbw-filter-values-content{position:absolute;top:0;left:0;right:0}.tbw-filter-value-item{display:flex;align-items:center;gap:var(--tbw-panel-gap, var(--tbw-spacing-md, .5rem));padding:var(--tbw-button-padding-sm, .25rem .125rem);cursor:pointer;border-radius:3px;height:var(--tbw-filter-item-height, 28px)}.tbw-filter-value-item:hover{background:var(--tbw-filter-hover, var(--tbw-color-row-hover, light-dark(#f0f6ff, #1c1c1c)))}.tbw-filter-checkbox{margin:0;cursor:pointer;accent-color:var(--tbw-filter-accent, var(--tbw-color-accent, #3b82f6))}.tbw-filter-no-match{color:var(--tbw-filter-muted, var(--tbw-color-fg-muted, light-dark(#555555, #aaaaaa)));padding:var(--tbw-panel-gap, var(--tbw-spacing-md, .5rem)) 0;text-align:center;font-style:italic}.tbw-filter-buttons{display:flex;gap:var(--tbw-panel-gap, var(--tbw-spacing-md, .5rem));padding-top:var(--tbw-panel-gap, var(--tbw-spacing-md, .5rem));border-top:1px solid var(--tbw-filter-divider, var(--tbw-color-border, light-dark(#d0d0d4, #454545)))}.tbw-filter-apply-btn{flex:1;padding:var(--tbw-filter-btn-padding, var(--tbw-button-padding, .375rem .75rem));background:var(--tbw-filter-accent, var(--tbw-color-accent, #3b82f6));color:var(--tbw-filter-accent-fg, var(--tbw-color-accent-fg, light-dark(#ffffff, #000000)));border:none;border-radius:var(--tbw-border-radius, .25rem);cursor:pointer;font-size:var(--tbw-font-size-sm, .8125rem);font-weight:var(--tbw-filter-btn-font-weight, 500);min-height:var(--tbw-filter-btn-min-height, auto)}.tbw-filter-apply-btn:hover{filter:brightness(.9)}.tbw-filter-clear-btn{flex:1;padding:var(--tbw-filter-btn-padding, var(--tbw-button-padding, .375rem .75rem));background:transparent;color:var(--tbw-filter-muted, var(--tbw-color-fg-muted, light-dark(#555555, #aaaaaa)));border:1px solid var(--tbw-filter-input-border, var(--tbw-color-border, light-dark(#d0d0d4, #454545)));border-radius:var(--tbw-border-radius, .25rem);cursor:pointer;font-size:var(--tbw-font-size-sm, .8125rem);font-weight:var(--tbw-filter-btn-font-weight, 500);min-height:var(--tbw-filter-btn-min-height, auto)}.tbw-filter-clear-btn:hover{background:var(--tbw-filter-hover, var(--tbw-color-row-hover, light-dark(#f0f6ff, #1c1c1c)))}.tbw-filter-range-title{font-weight:500;margin-bottom:var(--tbw-panel-gap, var(--tbw-spacing-md, .5rem));padding-bottom:var(--tbw-spacing-sm, .375rem);border-bottom:1px solid var(--tbw-filter-divider, var(--tbw-color-border, light-dark(#d0d0d4, #454545)))}.tbw-filter-range-inputs,.tbw-filter-date-range{display:flex;align-items:flex-end;gap:var(--tbw-spacing-sm, .375rem);margin-bottom:var(--tbw-panel-gap, var(--tbw-spacing-md, .5rem))}.tbw-filter-range-group,.tbw-filter-date-group{display:flex;flex-direction:column;gap:var(--tbw-spacing-xs, .25rem);flex:1}.tbw-filter-range-label{font-size:var(--tbw-font-size-xs, .75rem);color:var(--tbw-filter-muted, var(--tbw-color-fg-muted, light-dark(#555555, #aaaaaa)))}.tbw-filter-range-input,.tbw-filter-date-input{width:100%;height:var(--tbw-filter-item-height, 28px);padding:var(--tbw-spacing-xs, .25rem) var(--tbw-spacing-sm, .375rem);background:var(--tbw-filter-input-bg, var(--tbw-color-bg, transparent));color:inherit;border:1px solid var(--tbw-filter-input-border, var(--tbw-color-border, light-dark(#d0d0d4, #454545)));border-radius:var(--tbw-filter-input-radius, var(--tbw-border-radius, .25rem));font-size:inherit;box-sizing:border-box}.tbw-filter-range-input:focus,.tbw-filter-date-input:focus{outline:none;border-color:var(--tbw-filter-accent, var(--tbw-color-accent, #3b82f6));box-shadow:0 0 0 2px rgba(from var(--tbw-filter-accent, var(--tbw-color-accent, #3b82f6)) r g b / 15%)}.tbw-filter-range-separator{color:var(--tbw-filter-muted, var(--tbw-color-fg-muted, light-dark(#555555, #aaaaaa)));padding-bottom:var(--tbw-spacing-xs, .25rem)}.tbw-filter-range-slider{position:relative;height:24px;margin:var(--tbw-spacing-md, .5rem) 0 var(--tbw-panel-gap, var(--tbw-spacing-md, .5rem))}.tbw-filter-range-track{position:absolute;top:50%;left:0;right:0;height:4px;background:var(--tbw-filter-input-border, var(--tbw-color-border, light-dark(#d0d0d4, #454545)));border-radius:2px;transform:translateY(-50%)}.tbw-filter-range-fill{position:absolute;top:50%;height:4px;background:var(--tbw-filter-accent, var(--tbw-color-accent, #3b82f6));border-radius:2px;transform:translateY(-50%)}.tbw-filter-range-thumb{position:absolute;top:0;width:100%;height:100%;background:none;pointer-events:none;-webkit-appearance:none;appearance:none}.tbw-filter-range-thumb::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:16px;height:16px;background:var(--tbw-filter-accent, var(--tbw-color-accent, #3b82f6));border:2px solid var(--tbw-filter-panel-bg, var(--tbw-color-panel-bg, light-dark(#eeeeee, #222222)));border-radius:50%;cursor:pointer;pointer-events:all;box-shadow:0 1px 3px #0003}.tbw-filter-range-thumb::-moz-range-thumb{width:16px;height:16px;background:var(--tbw-filter-accent, var(--tbw-color-accent, #3b82f6));border:2px solid var(--tbw-filter-panel-bg, var(--tbw-color-panel-bg, light-dark(#eeeeee, #222222)));border-radius:50%;cursor:pointer;pointer-events:all;box-shadow:0 1px 3px #0003}.tbw-filter-range-thumb::-webkit-slider-thumb:hover{transform:scale(1.1)}.tbw-filter-range-thumb::-moz-range-thumb:hover{transform:scale(1.1)}}";
|
|
396
|
-
class
|
|
395
|
+
const Q = '@layer tbw-plugins{tbw-grid .tbw-quick-filter-input{flex:1;max-width:300px;height:var(--tbw-input-height, 1.75rem);padding:var(--tbw-input-padding, 0 .5rem);border:1px solid var(--tbw-color-border);border-radius:var(--tbw-border-radius);background:var(--tbw-color-bg);color:var(--tbw-color-fg);font-size:var(--tbw-font-size-sm, .8125rem)}tbw-grid .tbw-quick-filter-input:focus{outline:none;border-color:var(--tbw-color-accent)}tbw-grid .header-cell.filtered:before{content:"";position:absolute;top:var(--tbw-spacing-xs, .25rem);right:var(--tbw-spacing-xs, .25rem);width:var(--tbw-indicator-size, .375rem);height:var(--tbw-indicator-size, .375rem);background:var(--tbw-filter-accent, var(--tbw-color-accent, #3b82f6));border-radius:50%}tbw-grid .tbw-filter-btn{display:var(--tbw-filter-btn-display, inline-flex);visibility:var(--tbw-filter-btn-visibility, visible);align-items:center;justify-content:center;background:transparent;border:none;cursor:pointer;padding:2px;margin-left:var(--tbw-spacing-xs, .25rem);opacity:.4;transition:opacity .15s,visibility 0s,display 0s allow-discrete;color:inherit;vertical-align:middle;transition-behavior:allow-discrete}tbw-grid .tbw-filter-btn:hover,tbw-grid .tbw-filter-btn.active{opacity:1;visibility:visible;display:inline-flex}tbw-grid .tbw-filter-btn.active{color:var(--tbw-filter-accent, var(--tbw-color-accent, #3b82f6))}tbw-grid .header-row .cell:hover .tbw-filter-btn,tbw-grid .header-row .cell.filtered .tbw-filter-btn{display:inline-flex;visibility:visible}}', X = "@layer tbw-plugins{.tbw-filter-panel{position:fixed;background:var(--tbw-filter-panel-bg, var(--tbw-color-panel-bg, light-dark(#eeeeee, #222222)));color:var(--tbw-filter-panel-fg, var(--tbw-color-fg, light-dark(#222222, #eeeeee)));border:1px solid var(--tbw-filter-panel-border, var(--tbw-color-border, light-dark(#d0d0d4, #454545)));border-radius:var(--tbw-filter-panel-radius, var(--tbw-border-radius, .25rem));box-shadow:0 4px 16px var(--tbw-filter-panel-shadow, var(--tbw-color-shadow, light-dark(rgba(0, 0, 0, .1), rgba(0, 0, 0, .3))));padding:var(--tbw-panel-padding, var(--tbw-spacing-lg, .75rem));z-index:10000;min-width:200px;max-width:280px;max-height:350px;display:flex;flex-direction:column;font-family:var(--tbw-font-family, system-ui, sans-serif);font-size:var(--tbw-font-size, .8125rem);transform-origin:top center}.tbw-filter-panel.tbw-filter-panel-above{transform-origin:bottom center}.tbw-filter-panel.tbw-filter-panel-animated{animation:tbw-filter-panel-enter var(--tbw-animation-duration, .15s) var(--tbw-animation-easing, ease-out)}.tbw-filter-panel.tbw-filter-panel-above.tbw-filter-panel-animated{animation:tbw-filter-panel-enter-above var(--tbw-animation-duration, .15s) var(--tbw-animation-easing, ease-out)}@keyframes tbw-filter-panel-enter{0%{opacity:0;transform:scaleY(.3) translateY(-10px)}to{opacity:1;transform:scaleY(1) translateY(0)}}@keyframes tbw-filter-panel-enter-above{0%{opacity:0;transform:scaleY(.3) translateY(10px)}to{opacity:1;transform:scaleY(1) translateY(0)}}@supports (anchor-name: --test){.tbw-filter-panel{position-anchor:--tbw-filter-anchor;top:anchor(bottom);left:anchor(left);margin-top:4px;position-try-fallbacks:flip-inline,flip-block,flip-block flip-inline}}.tbw-filter-search{margin-bottom:var(--tbw-panel-gap, var(--tbw-spacing-md, .5rem));min-height:var(--tbw-filter-item-height, 28px)}.tbw-filter-search-input{height:var(--tbw-filter-item-height, 28px);width:100%;padding:var(--tbw-filter-search-padding, var(--tbw-spacing-sm, .375rem) var(--tbw-spacing-md, .5rem));background:var(--tbw-filter-input-bg, var(--tbw-color-bg, transparent));color:inherit;border:1px solid var(--tbw-filter-input-border, var(--tbw-color-border, light-dark(#d0d0d4, #454545)));border-radius:var(--tbw-filter-input-radius, var(--tbw-border-radius, .25rem));font-size:inherit;box-sizing:border-box}.tbw-filter-search-input:focus{outline:none;border-color:var(--tbw-filter-accent, var(--tbw-color-accent, #3b82f6));box-shadow:0 0 0 2px rgba(from var(--tbw-filter-accent, var(--tbw-color-accent, #3b82f6)) r g b / 15%)}.tbw-filter-actions{display:flex;padding:var(--tbw-button-padding-sm, .25rem .125rem);margin-bottom:var(--tbw-panel-gap, var(--tbw-spacing-md, .5rem));border-bottom:1px solid var(--tbw-filter-divider, var(--tbw-color-border, light-dark(#d0d0d4, #454545)));min-height:var(--tbw-filter-item-height, 28px)}.tbw-filter-action-btn{background:transparent;border:none;color:var(--tbw-filter-accent, var(--tbw-color-accent, #3b82f6));cursor:pointer;font-size:var(--tbw-font-size-xs, .75rem);padding:2px 0}.tbw-filter-action-btn:hover{text-decoration:underline}.tbw-filter-values{flex:1;overflow-y:auto;margin-bottom:var(--tbw-panel-gap, var(--tbw-spacing-md, .5rem));max-height:180px;position:relative}.tbw-filter-values-spacer{width:1px}.tbw-filter-values-content{position:absolute;top:0;left:0;right:0}.tbw-filter-value-item{display:flex;align-items:center;gap:var(--tbw-panel-gap, var(--tbw-spacing-md, .5rem));padding:var(--tbw-button-padding-sm, .25rem .125rem);cursor:pointer;border-radius:3px;height:var(--tbw-filter-item-height, 28px)}.tbw-filter-value-item:hover{background:var(--tbw-filter-hover, var(--tbw-color-row-hover, light-dark(#f0f6ff, #1c1c1c)))}.tbw-filter-checkbox{margin:0;cursor:pointer;accent-color:var(--tbw-filter-accent, var(--tbw-color-accent, #3b82f6))}.tbw-filter-no-match{color:var(--tbw-filter-muted, var(--tbw-color-fg-muted, light-dark(#555555, #aaaaaa)));padding:var(--tbw-panel-gap, var(--tbw-spacing-md, .5rem)) 0;text-align:center;font-style:italic}.tbw-filter-buttons{display:flex;gap:var(--tbw-panel-gap, var(--tbw-spacing-md, .5rem));padding-top:var(--tbw-panel-gap, var(--tbw-spacing-md, .5rem));border-top:1px solid var(--tbw-filter-divider, var(--tbw-color-border, light-dark(#d0d0d4, #454545)))}.tbw-filter-apply-btn{flex:1;padding:var(--tbw-filter-btn-padding, var(--tbw-button-padding, .375rem .75rem));background:var(--tbw-filter-accent, var(--tbw-color-accent, #3b82f6));color:var(--tbw-filter-accent-fg, var(--tbw-color-accent-fg, light-dark(#ffffff, #000000)));border:none;border-radius:var(--tbw-border-radius, .25rem);cursor:pointer;font-size:var(--tbw-font-size-sm, .8125rem);font-weight:var(--tbw-filter-btn-font-weight, 500);min-height:var(--tbw-filter-btn-min-height, auto)}.tbw-filter-apply-btn:hover{filter:brightness(.9)}.tbw-filter-clear-btn{flex:1;padding:var(--tbw-filter-btn-padding, var(--tbw-button-padding, .375rem .75rem));background:transparent;color:var(--tbw-filter-muted, var(--tbw-color-fg-muted, light-dark(#555555, #aaaaaa)));border:1px solid var(--tbw-filter-input-border, var(--tbw-color-border, light-dark(#d0d0d4, #454545)));border-radius:var(--tbw-border-radius, .25rem);cursor:pointer;font-size:var(--tbw-font-size-sm, .8125rem);font-weight:var(--tbw-filter-btn-font-weight, 500);min-height:var(--tbw-filter-btn-min-height, auto)}.tbw-filter-clear-btn:hover{background:var(--tbw-filter-hover, var(--tbw-color-row-hover, light-dark(#f0f6ff, #1c1c1c)))}.tbw-filter-range-inputs,.tbw-filter-date-range{display:flex;align-items:flex-end;gap:var(--tbw-spacing-sm, .375rem);margin-bottom:var(--tbw-panel-gap, var(--tbw-spacing-md, .5rem))}.tbw-filter-range-group,.tbw-filter-date-group{display:flex;flex-direction:column;gap:var(--tbw-spacing-xs, .25rem);flex:1}.tbw-filter-range-label{font-size:var(--tbw-font-size-xs, .75rem);color:var(--tbw-filter-muted, var(--tbw-color-fg-muted, light-dark(#555555, #aaaaaa)))}.tbw-filter-range-input,.tbw-filter-date-input{width:100%;height:var(--tbw-filter-item-height, 28px);padding:var(--tbw-spacing-xs, .25rem) var(--tbw-spacing-sm, .375rem);background:var(--tbw-filter-input-bg, var(--tbw-color-bg, transparent));color:inherit;border:1px solid var(--tbw-filter-input-border, var(--tbw-color-border, light-dark(#d0d0d4, #454545)));border-radius:var(--tbw-filter-input-radius, var(--tbw-border-radius, .25rem));font-size:inherit;box-sizing:border-box}.tbw-filter-range-input:focus,.tbw-filter-date-input:focus{outline:none;border-color:var(--tbw-filter-accent, var(--tbw-color-accent, #3b82f6));box-shadow:0 0 0 2px rgba(from var(--tbw-filter-accent, var(--tbw-color-accent, #3b82f6)) r g b / 15%)}.tbw-filter-range-separator{color:var(--tbw-filter-muted, var(--tbw-color-fg-muted, light-dark(#555555, #aaaaaa)));padding-bottom:var(--tbw-spacing-xs, .25rem)}.tbw-filter-range-slider{position:relative;height:24px;margin:var(--tbw-spacing-md, .5rem) 0 var(--tbw-panel-gap, var(--tbw-spacing-md, .5rem))}.tbw-filter-range-track{position:absolute;top:50%;left:0;right:0;height:4px;background:var(--tbw-filter-input-border, var(--tbw-color-border, light-dark(#d0d0d4, #454545)));border-radius:2px;transform:translateY(-50%)}.tbw-filter-range-fill{position:absolute;top:50%;height:4px;background:var(--tbw-filter-accent, var(--tbw-color-accent, #3b82f6));border-radius:2px;transform:translateY(-50%)}.tbw-filter-range-thumb{position:absolute;top:0;width:100%;height:100%;background:none;pointer-events:none;-webkit-appearance:none;appearance:none}.tbw-filter-range-thumb::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:16px;height:16px;background:var(--tbw-filter-accent, var(--tbw-color-accent, #3b82f6));border:2px solid var(--tbw-filter-panel-bg, var(--tbw-color-panel-bg, light-dark(#eeeeee, #222222)));border-radius:50%;cursor:pointer;pointer-events:all;box-shadow:0 1px 3px #0003}.tbw-filter-range-thumb::-moz-range-thumb{width:16px;height:16px;background:var(--tbw-filter-accent, var(--tbw-color-accent, #3b82f6));border:2px solid var(--tbw-filter-panel-bg, var(--tbw-color-panel-bg, light-dark(#eeeeee, #222222)));border-radius:50%;cursor:pointer;pointer-events:all;box-shadow:0 1px 3px #0003}.tbw-filter-range-thumb::-webkit-slider-thumb:hover{transform:scale(1.1)}.tbw-filter-range-thumb::-moz-range-thumb:hover{transform:scale(1.1)}}";
|
|
396
|
+
class I extends K {
|
|
397
397
|
/** @internal */
|
|
398
398
|
name = "filtering";
|
|
399
399
|
/** @internal */
|
|
400
|
-
styles =
|
|
400
|
+
styles = Q;
|
|
401
401
|
/** @internal */
|
|
402
402
|
get defaultConfig() {
|
|
403
403
|
return {
|
|
@@ -453,7 +453,7 @@ class M extends W {
|
|
|
453
453
|
return t;
|
|
454
454
|
}
|
|
455
455
|
}
|
|
456
|
-
return
|
|
456
|
+
return I.DEFAULT_LIST_ITEM_HEIGHT;
|
|
457
457
|
}
|
|
458
458
|
/**
|
|
459
459
|
* Sync excludedValues map from a filter model (for set filters).
|
|
@@ -479,40 +479,40 @@ class M extends W {
|
|
|
479
479
|
if (!t.length) return [...e];
|
|
480
480
|
if (this.config.filterHandler)
|
|
481
481
|
return this.cachedResult ? this.cachedResult : [...e];
|
|
482
|
-
const r =
|
|
482
|
+
const r = J(t);
|
|
483
483
|
if (this.cacheKey === r && this.cachedResult)
|
|
484
484
|
return this.cachedResult;
|
|
485
|
-
const
|
|
486
|
-
return this.cachedResult =
|
|
485
|
+
const a = U([...e], t, this.config.caseSensitive);
|
|
486
|
+
return this.cachedResult = a, this.cacheKey = r, a;
|
|
487
487
|
}
|
|
488
488
|
/** @internal */
|
|
489
489
|
afterRender() {
|
|
490
490
|
const e = this.gridElement;
|
|
491
491
|
if (!e) return;
|
|
492
492
|
e.querySelectorAll('[part~="header-cell"]').forEach((r) => {
|
|
493
|
-
const
|
|
494
|
-
if (
|
|
495
|
-
const
|
|
496
|
-
if (!
|
|
497
|
-
const
|
|
498
|
-
if (!
|
|
499
|
-
const
|
|
493
|
+
const a = r.getAttribute("data-col");
|
|
494
|
+
if (a === null) return;
|
|
495
|
+
const l = this.visibleColumns[parseInt(a, 10)];
|
|
496
|
+
if (!l || !this.isColumnFilterable(l) || W(l)) return;
|
|
497
|
+
const c = l.field;
|
|
498
|
+
if (!c) return;
|
|
499
|
+
const d = this.filters.has(c);
|
|
500
500
|
let i = r.querySelector(".tbw-filter-btn");
|
|
501
501
|
if (i) {
|
|
502
502
|
const w = i.classList.contains("active");
|
|
503
|
-
if (i.classList.toggle("active",
|
|
504
|
-
const
|
|
505
|
-
this.setIcon(i, this.resolveIcon(
|
|
503
|
+
if (i.classList.toggle("active", d), r.classList.toggle("filtered", d), w !== d) {
|
|
504
|
+
const u = d ? "filterActive" : "filter";
|
|
505
|
+
this.setIcon(i, this.resolveIcon(u));
|
|
506
506
|
}
|
|
507
507
|
return;
|
|
508
508
|
}
|
|
509
|
-
i = document.createElement("button"), i.className = "tbw-filter-btn", i.setAttribute("aria-label", `Filter ${
|
|
510
|
-
const m =
|
|
511
|
-
this.setIcon(i, this.resolveIcon(m)),
|
|
512
|
-
w.stopPropagation(), this.toggleFilterPanel(
|
|
509
|
+
i = document.createElement("button"), i.className = "tbw-filter-btn", i.setAttribute("aria-label", `Filter ${l.header ?? c}`);
|
|
510
|
+
const m = d ? "filterActive" : "filter";
|
|
511
|
+
this.setIcon(i, this.resolveIcon(m)), d && (i.classList.add("active"), r.classList.add("filtered")), i.addEventListener("click", (w) => {
|
|
512
|
+
w.stopPropagation(), this.toggleFilterPanel(c, l, i);
|
|
513
513
|
});
|
|
514
|
-
const
|
|
515
|
-
|
|
514
|
+
const k = r.querySelector(".resize-handle");
|
|
515
|
+
k ? r.insertBefore(i, k) : r.appendChild(i);
|
|
516
516
|
});
|
|
517
517
|
}
|
|
518
518
|
// #endregion
|
|
@@ -599,7 +599,7 @@ class M extends W {
|
|
|
599
599
|
* Uses sourceRows to include all values regardless of current filter.
|
|
600
600
|
*/
|
|
601
601
|
getUniqueValues(e) {
|
|
602
|
-
return
|
|
602
|
+
return B(this.sourceRows, e);
|
|
603
603
|
}
|
|
604
604
|
// #endregion
|
|
605
605
|
// #region Private Methods
|
|
@@ -610,8 +610,8 @@ class M extends W {
|
|
|
610
610
|
copyGridThemeContext(e) {
|
|
611
611
|
const t = this.gridElement;
|
|
612
612
|
if (!t) return;
|
|
613
|
-
for (const
|
|
614
|
-
|
|
613
|
+
for (const a of t.classList)
|
|
614
|
+
a.startsWith("tbw-") || a === "selecting" || e.classList.add(a);
|
|
615
615
|
const r = t.dataset.theme;
|
|
616
616
|
r && (e.dataset.theme = r);
|
|
617
617
|
}
|
|
@@ -625,7 +625,7 @@ class M extends W {
|
|
|
625
625
|
return;
|
|
626
626
|
}
|
|
627
627
|
const e = document.createElement("style");
|
|
628
|
-
e.id = "tbw-filter-panel-styles", e.textContent =
|
|
628
|
+
e.id = "tbw-filter-panel-styles", e.textContent = X, document.head.appendChild(e), this.globalStylesInjected = !0;
|
|
629
629
|
}
|
|
630
630
|
/**
|
|
631
631
|
* Toggle the filter panel for a field
|
|
@@ -636,33 +636,33 @@ class M extends W {
|
|
|
636
636
|
return;
|
|
637
637
|
}
|
|
638
638
|
this.closeFilterPanel();
|
|
639
|
-
const
|
|
640
|
-
if (
|
|
641
|
-
|
|
642
|
-
this.openPanelField !== e || !this.panelElement || (
|
|
639
|
+
const a = document.createElement("div");
|
|
640
|
+
if (a.className = "tbw-filter-panel", this.copyGridThemeContext(a), this.isAnimationEnabled && a.classList.add("tbw-filter-panel-animated"), this.panelElement = a, this.openPanelField = e, this.config.valuesHandler) {
|
|
641
|
+
a.innerHTML = '<div class="tbw-filter-loading">Loading...</div>', document.body.appendChild(a), this.positionPanel(a, r), this.setupPanelCloseHandler(a, r), this.config.valuesHandler(e, t).then((c) => {
|
|
642
|
+
this.openPanelField !== e || !this.panelElement || (a.innerHTML = "", this.renderPanelContent(e, t, a, c));
|
|
643
643
|
});
|
|
644
644
|
return;
|
|
645
645
|
}
|
|
646
|
-
const
|
|
647
|
-
document.body.appendChild(
|
|
646
|
+
const l = B(this.sourceRows, e);
|
|
647
|
+
document.body.appendChild(a), this.positionPanel(a, r), this.renderPanelContent(e, t, a, l), this.setupPanelCloseHandler(a, r);
|
|
648
648
|
}
|
|
649
649
|
/**
|
|
650
650
|
* Render filter panel content with given values
|
|
651
651
|
*/
|
|
652
|
-
renderPanelContent(e, t, r,
|
|
653
|
-
let
|
|
654
|
-
|
|
655
|
-
const
|
|
652
|
+
renderPanelContent(e, t, r, a) {
|
|
653
|
+
let l = this.excludedValues.get(e);
|
|
654
|
+
l || (l = /* @__PURE__ */ new Set(), this.excludedValues.set(e, l));
|
|
655
|
+
const c = this.searchText.get(e) ?? "", d = {
|
|
656
656
|
field: e,
|
|
657
657
|
column: t,
|
|
658
|
-
uniqueValues:
|
|
659
|
-
excludedValues:
|
|
660
|
-
searchText:
|
|
658
|
+
uniqueValues: a,
|
|
659
|
+
excludedValues: l,
|
|
660
|
+
searchText: c,
|
|
661
661
|
applySetFilter: (m) => {
|
|
662
662
|
this.applySetFilter(e, m), this.closeFilterPanel();
|
|
663
663
|
},
|
|
664
|
-
applyTextFilter: (m,
|
|
665
|
-
this.applyTextFilter(e, m,
|
|
664
|
+
applyTextFilter: (m, k, w) => {
|
|
665
|
+
this.applyTextFilter(e, m, k, w), this.closeFilterPanel();
|
|
666
666
|
},
|
|
667
667
|
clearFilter: () => {
|
|
668
668
|
this.clearFieldFilter(e), this.closeFilterPanel();
|
|
@@ -670,13 +670,13 @@ class M extends W {
|
|
|
670
670
|
closePanel: () => this.closeFilterPanel()
|
|
671
671
|
};
|
|
672
672
|
let i = !1;
|
|
673
|
-
if (this.config.filterPanelRenderer && (this.config.filterPanelRenderer(r,
|
|
673
|
+
if (this.config.filterPanelRenderer && (this.config.filterPanelRenderer(r, d), i = r.children.length > 0), !i && t.type) {
|
|
674
674
|
const m = this.grid.effectiveConfig.typeDefaults?.[t.type];
|
|
675
|
-
m?.filterPanelRenderer && (m.filterPanelRenderer(r,
|
|
675
|
+
m?.filterPanelRenderer && (m.filterPanelRenderer(r, d), i = r.children.length > 0);
|
|
676
676
|
}
|
|
677
677
|
if (!i) {
|
|
678
678
|
const m = t.type;
|
|
679
|
-
m === "number" ? this.renderNumberFilterPanel(r,
|
|
679
|
+
m === "number" ? this.renderNumberFilterPanel(r, d, a) : m === "date" ? this.renderDateFilterPanel(r, d, a) : this.renderDefaultFilterPanel(r, d, a, l);
|
|
680
680
|
}
|
|
681
681
|
}
|
|
682
682
|
/**
|
|
@@ -706,245 +706,241 @@ class M extends W {
|
|
|
706
706
|
* Check if browser supports CSS Anchor Positioning
|
|
707
707
|
*/
|
|
708
708
|
static checkAnchorPositioningSupport() {
|
|
709
|
-
return
|
|
709
|
+
return I.supportsAnchorPositioning === null && (I.supportsAnchorPositioning = CSS.supports("anchor-name", "--test")), I.supportsAnchorPositioning;
|
|
710
710
|
}
|
|
711
711
|
/**
|
|
712
712
|
* Position the panel below the header cell
|
|
713
713
|
* Uses CSS Anchor Positioning if supported, falls back to JS positioning
|
|
714
714
|
*/
|
|
715
715
|
positionPanel(e, t) {
|
|
716
|
-
const
|
|
717
|
-
if (
|
|
716
|
+
const a = t.closest(".cell") ?? t;
|
|
717
|
+
if (a.style.anchorName = "--tbw-filter-anchor", this.panelAnchorElement = a, I.checkAnchorPositioningSupport()) {
|
|
718
718
|
requestAnimationFrame(() => {
|
|
719
|
-
const
|
|
720
|
-
|
|
719
|
+
const c = e.getBoundingClientRect(), d = a.getBoundingClientRect();
|
|
720
|
+
c.top < d.top && e.classList.add("tbw-filter-panel-above");
|
|
721
721
|
});
|
|
722
722
|
return;
|
|
723
723
|
}
|
|
724
|
-
const
|
|
725
|
-
e.style.position = "fixed", e.style.top = `${
|
|
726
|
-
const
|
|
727
|
-
|
|
724
|
+
const l = a.getBoundingClientRect();
|
|
725
|
+
e.style.position = "fixed", e.style.top = `${l.bottom + 4}px`, e.style.left = `${l.left}px`, requestAnimationFrame(() => {
|
|
726
|
+
const c = e.getBoundingClientRect();
|
|
727
|
+
c.right > window.innerWidth - 8 && (e.style.left = `${l.right - c.width}px`), c.bottom > window.innerHeight - 8 && (e.style.top = `${l.top - c.height - 4}px`, e.classList.add("tbw-filter-panel-above"));
|
|
728
728
|
});
|
|
729
729
|
}
|
|
730
730
|
/**
|
|
731
731
|
* Render the default filter panel content
|
|
732
732
|
*/
|
|
733
|
-
renderDefaultFilterPanel(e, t, r,
|
|
734
|
-
const { field:
|
|
735
|
-
|
|
733
|
+
renderDefaultFilterPanel(e, t, r, a) {
|
|
734
|
+
const { field: l } = t, c = this.getListItemHeight(), d = document.createElement("div");
|
|
735
|
+
d.className = "tbw-filter-search";
|
|
736
736
|
const i = document.createElement("input");
|
|
737
|
-
i.type = "text", i.placeholder = "Search...", i.className = "tbw-filter-search-input", i.value = this.searchText.get(
|
|
737
|
+
i.type = "text", i.placeholder = "Search...", i.className = "tbw-filter-search-input", i.value = this.searchText.get(l) ?? "", d.appendChild(i), e.appendChild(d);
|
|
738
738
|
const m = document.createElement("div");
|
|
739
739
|
m.className = "tbw-filter-actions";
|
|
740
|
-
const
|
|
741
|
-
|
|
740
|
+
const k = document.createElement("label");
|
|
741
|
+
k.className = "tbw-filter-value-item", k.style.padding = "0", k.style.margin = "0";
|
|
742
742
|
const w = document.createElement("input");
|
|
743
743
|
w.type = "checkbox", w.className = "tbw-filter-checkbox";
|
|
744
|
-
const
|
|
745
|
-
|
|
744
|
+
const u = document.createElement("span");
|
|
745
|
+
u.textContent = "Select All", k.appendChild(w), k.appendChild(u), m.appendChild(k);
|
|
746
746
|
const v = () => {
|
|
747
|
-
const
|
|
748
|
-
w.checked =
|
|
747
|
+
const o = [...S.values()], b = o.every((n) => n), y = o.every((n) => !n);
|
|
748
|
+
w.checked = b, w.indeterminate = !b && !y;
|
|
749
749
|
};
|
|
750
750
|
w.addEventListener("change", () => {
|
|
751
|
-
const
|
|
752
|
-
for (const
|
|
753
|
-
|
|
754
|
-
v(),
|
|
751
|
+
const o = w.checked;
|
|
752
|
+
for (const b of S.keys())
|
|
753
|
+
S.set(b, o);
|
|
754
|
+
v(), L();
|
|
755
755
|
}), e.appendChild(m);
|
|
756
|
-
const
|
|
757
|
-
|
|
756
|
+
const E = document.createElement("div");
|
|
757
|
+
E.className = "tbw-filter-values";
|
|
758
758
|
const g = document.createElement("div");
|
|
759
|
-
g.className = "tbw-filter-values-spacer",
|
|
759
|
+
g.className = "tbw-filter-values-spacer", E.appendChild(g);
|
|
760
760
|
const x = document.createElement("div");
|
|
761
|
-
x.className = "tbw-filter-values-content",
|
|
762
|
-
const
|
|
763
|
-
r.forEach((
|
|
764
|
-
const
|
|
765
|
-
|
|
761
|
+
x.className = "tbw-filter-values-content", E.appendChild(x);
|
|
762
|
+
const S = /* @__PURE__ */ new Map();
|
|
763
|
+
r.forEach((o) => {
|
|
764
|
+
const b = o == null ? "__null__" : String(o);
|
|
765
|
+
S.set(b, !a.has(o));
|
|
766
766
|
}), v();
|
|
767
|
-
let
|
|
768
|
-
const
|
|
769
|
-
const
|
|
770
|
-
|
|
771
|
-
const
|
|
772
|
-
|
|
773
|
-
|
|
767
|
+
let C = [];
|
|
768
|
+
const R = (o, b) => {
|
|
769
|
+
const y = o == null ? "(Blank)" : String(o), n = o == null ? "__null__" : String(o), s = document.createElement("label");
|
|
770
|
+
s.className = "tbw-filter-value-item", s.style.position = "absolute", s.style.top = `calc(var(--tbw-filter-item-height, 28px) * ${b})`, s.style.left = "0", s.style.right = "0", s.style.boxSizing = "border-box";
|
|
771
|
+
const F = document.createElement("input");
|
|
772
|
+
F.type = "checkbox", F.className = "tbw-filter-checkbox", F.checked = S.get(n) ?? !0, F.dataset.value = n, F.addEventListener("change", () => {
|
|
773
|
+
S.set(n, F.checked), v();
|
|
774
774
|
});
|
|
775
|
-
const
|
|
776
|
-
return
|
|
777
|
-
},
|
|
778
|
-
const
|
|
779
|
-
if (g.style.height = `${
|
|
780
|
-
x.innerHTML = "", x.style.transform = "translateY(0px)",
|
|
781
|
-
x.appendChild(
|
|
775
|
+
const M = document.createElement("span");
|
|
776
|
+
return M.textContent = y, s.appendChild(F), s.appendChild(M), s;
|
|
777
|
+
}, L = () => {
|
|
778
|
+
const o = C.length, b = E.clientHeight, y = E.scrollTop;
|
|
779
|
+
if (g.style.height = `${o * c}px`, G(o, I.LIST_BYPASS_THRESHOLD / 3)) {
|
|
780
|
+
x.innerHTML = "", x.style.transform = "translateY(0px)", C.forEach((s, F) => {
|
|
781
|
+
x.appendChild(R(s, F));
|
|
782
782
|
});
|
|
783
783
|
return;
|
|
784
784
|
}
|
|
785
|
-
const
|
|
786
|
-
totalRows:
|
|
787
|
-
viewportHeight:
|
|
788
|
-
scrollTop:
|
|
789
|
-
rowHeight:
|
|
790
|
-
overscan:
|
|
785
|
+
const n = Y({
|
|
786
|
+
totalRows: o,
|
|
787
|
+
viewportHeight: b,
|
|
788
|
+
scrollTop: y,
|
|
789
|
+
rowHeight: c,
|
|
790
|
+
overscan: I.LIST_OVERSCAN
|
|
791
791
|
});
|
|
792
|
-
x.style.transform = `translateY(${
|
|
793
|
-
for (let
|
|
794
|
-
x.appendChild(
|
|
795
|
-
},
|
|
796
|
-
const
|
|
797
|
-
if (
|
|
798
|
-
const
|
|
799
|
-
return !
|
|
800
|
-
}),
|
|
792
|
+
x.style.transform = `translateY(${n.offsetY}px)`, x.innerHTML = "";
|
|
793
|
+
for (let s = n.start; s < n.end; s++)
|
|
794
|
+
x.appendChild(R(C[s], s - n.start));
|
|
795
|
+
}, f = (o) => {
|
|
796
|
+
const b = this.config.caseSensitive ?? !1, y = b ? o : o.toLowerCase();
|
|
797
|
+
if (C = r.filter((n) => {
|
|
798
|
+
const s = n == null ? "(Blank)" : String(n), F = b ? s : s.toLowerCase();
|
|
799
|
+
return !o || F.includes(y);
|
|
800
|
+
}), C.length === 0) {
|
|
801
801
|
g.style.height = "0px", x.innerHTML = "";
|
|
802
|
-
const
|
|
803
|
-
|
|
802
|
+
const n = document.createElement("div");
|
|
803
|
+
n.className = "tbw-filter-no-match", n.textContent = "No matching values", x.appendChild(n);
|
|
804
804
|
return;
|
|
805
805
|
}
|
|
806
|
-
|
|
806
|
+
L();
|
|
807
807
|
};
|
|
808
|
-
|
|
808
|
+
E.addEventListener(
|
|
809
809
|
"scroll",
|
|
810
810
|
() => {
|
|
811
|
-
|
|
811
|
+
C.length > 0 && L();
|
|
812
812
|
},
|
|
813
813
|
{ passive: !0 }
|
|
814
|
-
),
|
|
815
|
-
let
|
|
814
|
+
), f(i.value), e.appendChild(E);
|
|
815
|
+
let P;
|
|
816
816
|
i.addEventListener("input", () => {
|
|
817
|
-
clearTimeout(
|
|
818
|
-
this.searchText.set(
|
|
817
|
+
clearTimeout(P), P = setTimeout(() => {
|
|
818
|
+
this.searchText.set(l, i.value), f(i.value);
|
|
819
819
|
}, this.config.debounceMs ?? 150);
|
|
820
820
|
});
|
|
821
|
-
const
|
|
822
|
-
|
|
823
|
-
const
|
|
824
|
-
|
|
825
|
-
const
|
|
826
|
-
for (const [
|
|
827
|
-
if (!
|
|
828
|
-
if (
|
|
829
|
-
|
|
821
|
+
const T = document.createElement("div");
|
|
822
|
+
T.className = "tbw-filter-buttons";
|
|
823
|
+
const A = document.createElement("button");
|
|
824
|
+
A.className = "tbw-filter-apply-btn", A.textContent = "Apply", A.addEventListener("click", () => {
|
|
825
|
+
const o = [];
|
|
826
|
+
for (const [b, y] of S)
|
|
827
|
+
if (!y)
|
|
828
|
+
if (b === "__null__")
|
|
829
|
+
o.push(null);
|
|
830
830
|
else {
|
|
831
|
-
const
|
|
832
|
-
|
|
831
|
+
const n = r.find((s) => String(s) === b);
|
|
832
|
+
o.push(n !== void 0 ? n : b);
|
|
833
833
|
}
|
|
834
|
-
t.applySetFilter(
|
|
835
|
-
}),
|
|
836
|
-
const
|
|
837
|
-
|
|
834
|
+
t.applySetFilter(o);
|
|
835
|
+
}), T.appendChild(A);
|
|
836
|
+
const p = document.createElement("button");
|
|
837
|
+
p.className = "tbw-filter-clear-btn", p.textContent = "Clear Filter", p.addEventListener("click", () => {
|
|
838
838
|
t.clearFilter();
|
|
839
|
-
}),
|
|
839
|
+
}), T.appendChild(p), e.appendChild(T);
|
|
840
840
|
}
|
|
841
841
|
/**
|
|
842
842
|
* Render a number range filter panel with min/max inputs and slider
|
|
843
843
|
*/
|
|
844
844
|
renderNumberFilterPanel(e, t, r) {
|
|
845
|
-
const { field:
|
|
845
|
+
const { field: a, column: l } = t, c = l.filterParams, d = l.editorParams, i = (h, V) => {
|
|
846
846
|
if (typeof h == "number") return h;
|
|
847
847
|
if (typeof h == "string") {
|
|
848
848
|
const H = parseFloat(h);
|
|
849
849
|
return isNaN(H) ? V : H;
|
|
850
850
|
}
|
|
851
851
|
return V;
|
|
852
|
-
}, m = r.filter((h) => typeof h == "number" && !isNaN(h)),
|
|
853
|
-
let x =
|
|
854
|
-
g?.operator === "between" ? (x = i(g.value,
|
|
855
|
-
const
|
|
856
|
-
|
|
857
|
-
const k = document.createElement("div");
|
|
858
|
-
k.className = "tbw-filter-range-inputs";
|
|
852
|
+
}, m = r.filter((h) => typeof h == "number" && !isNaN(h)), k = m.length > 0 ? Math.min(...m) : 0, w = m.length > 0 ? Math.max(...m) : 100, u = i(c?.min ?? d?.min, k), v = i(c?.max ?? d?.max, w), E = c?.step ?? d?.step ?? 1, g = this.filters.get(a);
|
|
853
|
+
let x = u, S = v;
|
|
854
|
+
g?.operator === "between" ? (x = i(g.value, u), S = i(g.valueTo, v)) : g?.operator === "greaterThanOrEqual" ? x = i(g.value, u) : g?.operator === "lessThanOrEqual" && (S = i(g.value, v));
|
|
855
|
+
const C = document.createElement("div");
|
|
856
|
+
C.className = "tbw-filter-range-inputs";
|
|
859
857
|
const R = document.createElement("div");
|
|
860
858
|
R.className = "tbw-filter-range-group";
|
|
861
|
-
const
|
|
862
|
-
|
|
859
|
+
const L = document.createElement("label");
|
|
860
|
+
L.textContent = "Min", L.className = "tbw-filter-range-label";
|
|
863
861
|
const f = document.createElement("input");
|
|
864
|
-
f.type = "number", f.className = "tbw-filter-range-input", f.min = String(
|
|
865
|
-
const
|
|
866
|
-
|
|
862
|
+
f.type = "number", f.className = "tbw-filter-range-input", f.min = String(u), f.max = String(v), f.step = String(E), f.value = String(x), R.appendChild(L), R.appendChild(f), C.appendChild(R);
|
|
863
|
+
const P = document.createElement("span");
|
|
864
|
+
P.className = "tbw-filter-range-separator", P.textContent = "–", C.appendChild(P);
|
|
867
865
|
const T = document.createElement("div");
|
|
868
866
|
T.className = "tbw-filter-range-group";
|
|
869
|
-
const
|
|
870
|
-
|
|
871
|
-
const
|
|
872
|
-
|
|
873
|
-
const
|
|
874
|
-
|
|
875
|
-
const
|
|
876
|
-
|
|
877
|
-
const
|
|
878
|
-
|
|
879
|
-
const
|
|
880
|
-
|
|
881
|
-
const
|
|
882
|
-
|
|
883
|
-
const
|
|
884
|
-
const h = parseFloat(
|
|
885
|
-
|
|
867
|
+
const A = document.createElement("label");
|
|
868
|
+
A.textContent = "Max", A.className = "tbw-filter-range-label";
|
|
869
|
+
const p = document.createElement("input");
|
|
870
|
+
p.type = "number", p.className = "tbw-filter-range-input", p.min = String(u), p.max = String(v), p.step = String(E), p.value = String(S), T.appendChild(A), T.appendChild(p), C.appendChild(T), e.appendChild(C);
|
|
871
|
+
const o = document.createElement("div");
|
|
872
|
+
o.className = "tbw-filter-range-slider";
|
|
873
|
+
const b = document.createElement("div");
|
|
874
|
+
b.className = "tbw-filter-range-track";
|
|
875
|
+
const y = document.createElement("div");
|
|
876
|
+
y.className = "tbw-filter-range-fill";
|
|
877
|
+
const n = document.createElement("input");
|
|
878
|
+
n.type = "range", n.className = "tbw-filter-range-thumb tbw-filter-range-thumb-min", n.min = String(u), n.max = String(v), n.step = String(E), n.value = String(x);
|
|
879
|
+
const s = document.createElement("input");
|
|
880
|
+
s.type = "range", s.className = "tbw-filter-range-thumb tbw-filter-range-thumb-max", s.min = String(u), s.max = String(v), s.step = String(E), s.value = String(S), o.appendChild(b), o.appendChild(y), o.appendChild(n), o.appendChild(s), e.appendChild(o);
|
|
881
|
+
const F = () => {
|
|
882
|
+
const h = parseFloat(n.value), V = parseFloat(s.value), H = v - u, D = (h - u) / H * 100, O = (V - u) / H * 100;
|
|
883
|
+
y.style.left = `${D}%`, y.style.width = `${O - D}%`;
|
|
886
884
|
};
|
|
887
|
-
|
|
888
|
-
const h = Math.min(parseFloat(
|
|
889
|
-
|
|
890
|
-
}),
|
|
891
|
-
const h = Math.max(parseFloat(
|
|
892
|
-
|
|
885
|
+
n.addEventListener("input", () => {
|
|
886
|
+
const h = Math.min(parseFloat(n.value), parseFloat(s.value));
|
|
887
|
+
n.value = String(h), f.value = String(h), F();
|
|
888
|
+
}), s.addEventListener("input", () => {
|
|
889
|
+
const h = Math.max(parseFloat(s.value), parseFloat(n.value));
|
|
890
|
+
s.value = String(h), p.value = String(h), F();
|
|
893
891
|
}), f.addEventListener("input", () => {
|
|
894
|
-
let h = parseFloat(f.value) ||
|
|
895
|
-
h = Math.max(
|
|
896
|
-
}),
|
|
897
|
-
let h = parseFloat(
|
|
898
|
-
h = Math.min(v, Math.max(h, parseFloat(f.value))),
|
|
899
|
-
}),
|
|
900
|
-
const
|
|
901
|
-
|
|
902
|
-
const
|
|
903
|
-
|
|
904
|
-
const h = parseFloat(f.value), V = parseFloat(
|
|
892
|
+
let h = parseFloat(f.value) || u;
|
|
893
|
+
h = Math.max(u, Math.min(h, parseFloat(p.value))), n.value = String(h), F();
|
|
894
|
+
}), p.addEventListener("input", () => {
|
|
895
|
+
let h = parseFloat(p.value) || v;
|
|
896
|
+
h = Math.min(v, Math.max(h, parseFloat(f.value))), s.value = String(h), F();
|
|
897
|
+
}), F();
|
|
898
|
+
const M = document.createElement("div");
|
|
899
|
+
M.className = "tbw-filter-buttons";
|
|
900
|
+
const _ = document.createElement("button");
|
|
901
|
+
_.className = "tbw-filter-apply-btn", _.textContent = "Apply", _.addEventListener("click", () => {
|
|
902
|
+
const h = parseFloat(f.value), V = parseFloat(p.value);
|
|
905
903
|
t.applyTextFilter("between", h, V);
|
|
906
|
-
}),
|
|
907
|
-
const
|
|
908
|
-
|
|
904
|
+
}), M.appendChild(_);
|
|
905
|
+
const z = document.createElement("button");
|
|
906
|
+
z.className = "tbw-filter-clear-btn", z.textContent = "Clear Filter", z.addEventListener("click", () => {
|
|
909
907
|
t.clearFilter();
|
|
910
|
-
}),
|
|
908
|
+
}), M.appendChild(z), e.appendChild(M);
|
|
911
909
|
}
|
|
912
910
|
/**
|
|
913
911
|
* Render a date range filter panel with from/to date inputs
|
|
914
912
|
*/
|
|
915
913
|
renderDateFilterPanel(e, t, r) {
|
|
916
|
-
const { field:
|
|
917
|
-
let x = "",
|
|
918
|
-
g?.operator === "between" ? (x =
|
|
919
|
-
const
|
|
920
|
-
|
|
921
|
-
const k = document.createElement("div");
|
|
922
|
-
k.className = "tbw-filter-date-range";
|
|
914
|
+
const { field: a, column: l } = t, c = l.filterParams, d = l.editorParams, i = r.filter((n) => n instanceof Date || typeof n == "string" && !isNaN(Date.parse(n))).map((n) => n instanceof Date ? n : new Date(n)).filter((n) => !isNaN(n.getTime())), m = i.length > 0 ? new Date(Math.min(...i.map((n) => n.getTime()))) : null, k = i.length > 0 ? new Date(Math.max(...i.map((n) => n.getTime()))) : null, w = (n) => n ? n.toISOString().split("T")[0] : "", u = (n) => n ? typeof n == "string" ? n : typeof n == "number" ? w(new Date(n)) : "" : "", v = u(c?.min) || u(d?.min) || w(m), E = u(c?.max) || u(d?.max) || w(k), g = this.filters.get(a);
|
|
915
|
+
let x = "", S = "";
|
|
916
|
+
g?.operator === "between" ? (x = u(g.value) || "", S = u(g.valueTo) || "") : g?.operator === "greaterThanOrEqual" ? x = u(g.value) || "" : g?.operator === "lessThanOrEqual" && (S = u(g.value) || "");
|
|
917
|
+
const C = document.createElement("div");
|
|
918
|
+
C.className = "tbw-filter-date-range";
|
|
923
919
|
const R = document.createElement("div");
|
|
924
920
|
R.className = "tbw-filter-date-group";
|
|
925
|
-
const
|
|
926
|
-
|
|
921
|
+
const L = document.createElement("label");
|
|
922
|
+
L.textContent = "From", L.className = "tbw-filter-range-label";
|
|
927
923
|
const f = document.createElement("input");
|
|
928
|
-
f.type = "date", f.className = "tbw-filter-date-input", v && (f.min = v),
|
|
929
|
-
const
|
|
930
|
-
|
|
924
|
+
f.type = "date", f.className = "tbw-filter-date-input", v && (f.min = v), E && (f.max = E), f.value = x, R.appendChild(L), R.appendChild(f), C.appendChild(R);
|
|
925
|
+
const P = document.createElement("span");
|
|
926
|
+
P.className = "tbw-filter-range-separator", P.textContent = "–", C.appendChild(P);
|
|
931
927
|
const T = document.createElement("div");
|
|
932
928
|
T.className = "tbw-filter-date-group";
|
|
933
|
-
const
|
|
934
|
-
|
|
935
|
-
const
|
|
936
|
-
|
|
937
|
-
const
|
|
938
|
-
|
|
939
|
-
const
|
|
940
|
-
|
|
941
|
-
const
|
|
942
|
-
|
|
943
|
-
}),
|
|
944
|
-
const
|
|
945
|
-
|
|
929
|
+
const A = document.createElement("label");
|
|
930
|
+
A.textContent = "To", A.className = "tbw-filter-range-label";
|
|
931
|
+
const p = document.createElement("input");
|
|
932
|
+
p.type = "date", p.className = "tbw-filter-date-input", v && (p.min = v), E && (p.max = E), p.value = S, T.appendChild(A), T.appendChild(p), C.appendChild(T), e.appendChild(C);
|
|
933
|
+
const o = document.createElement("div");
|
|
934
|
+
o.className = "tbw-filter-buttons";
|
|
935
|
+
const b = document.createElement("button");
|
|
936
|
+
b.className = "tbw-filter-apply-btn", b.textContent = "Apply", b.addEventListener("click", () => {
|
|
937
|
+
const n = f.value, s = p.value;
|
|
938
|
+
n && s ? t.applyTextFilter("between", n, s) : n ? t.applyTextFilter("greaterThanOrEqual", n) : s ? t.applyTextFilter("lessThanOrEqual", s) : t.clearFilter();
|
|
939
|
+
}), o.appendChild(b);
|
|
940
|
+
const y = document.createElement("button");
|
|
941
|
+
y.className = "tbw-filter-clear-btn", y.textContent = "Clear Filter", y.addEventListener("click", () => {
|
|
946
942
|
t.clearFilter();
|
|
947
|
-
}),
|
|
943
|
+
}), o.appendChild(y), e.appendChild(o);
|
|
948
944
|
}
|
|
949
945
|
/**
|
|
950
946
|
* Apply a set filter (exclude values)
|
|
@@ -960,13 +956,13 @@ class M extends W {
|
|
|
960
956
|
/**
|
|
961
957
|
* Apply a text/number/date filter
|
|
962
958
|
*/
|
|
963
|
-
applyTextFilter(e, t, r,
|
|
959
|
+
applyTextFilter(e, t, r, a) {
|
|
964
960
|
this.filters.set(e, {
|
|
965
961
|
field: e,
|
|
966
962
|
type: "text",
|
|
967
963
|
operator: t,
|
|
968
964
|
value: r,
|
|
969
|
-
valueTo:
|
|
965
|
+
valueTo: a
|
|
970
966
|
}), this.applyFiltersInternal();
|
|
971
967
|
}
|
|
972
968
|
/**
|
|
@@ -978,13 +974,13 @@ class M extends W {
|
|
|
978
974
|
if (this.config.filterHandler) {
|
|
979
975
|
const t = this.grid;
|
|
980
976
|
t.setAttribute("aria-busy", "true");
|
|
981
|
-
const r = this.config.filterHandler(e, this.sourceRows),
|
|
982
|
-
t.removeAttribute("aria-busy"), this.cachedResult =
|
|
977
|
+
const r = this.config.filterHandler(e, this.sourceRows), a = (l) => {
|
|
978
|
+
t.removeAttribute("aria-busy"), this.cachedResult = l, this.grid.rows = l, this.emit("filter-change", {
|
|
983
979
|
filters: e,
|
|
984
|
-
filteredRowCount:
|
|
980
|
+
filteredRowCount: l.length
|
|
985
981
|
}), this.requestRender();
|
|
986
982
|
};
|
|
987
|
-
r && typeof r.then == "function" ? r.then(
|
|
983
|
+
r && typeof r.then == "function" ? r.then(a) : a(r);
|
|
988
984
|
return;
|
|
989
985
|
}
|
|
990
986
|
this.emit("filter-change", {
|
|
@@ -1031,6 +1027,6 @@ class M extends W {
|
|
|
1031
1027
|
// #endregion
|
|
1032
1028
|
}
|
|
1033
1029
|
export {
|
|
1034
|
-
|
|
1030
|
+
I as FilteringPlugin
|
|
1035
1031
|
};
|
|
1036
1032
|
//# sourceMappingURL=index.js.map
|