@svgrid/grid-wc 3.0.0 → 3.0.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +110 -110
- package/dist/{GridMenus-DpmS1pzo.js → GridMenus-YwTw9Upd.js} +64 -62
- package/dist/{SvDateRangeInput-u4ibte8S.js → SvDateRangeInput-CrxeppBV.js} +6 -6
- package/dist/{shadow/SvDateTimePicker-DVFiDxUq.js → SvDateTimePicker-xAO-Pb4S.js} +22 -22
- package/dist/{shadow/SvField-ChCI-O2O.js → SvField-CE345DyF.js} +3 -3
- package/dist/{SvGridCellEditor-DvsQyE9a.js → SvGridCellEditor-D7SyHtff.js} +2 -2
- package/dist/SvGridChart-CMaVmlso.js +1477 -0
- package/dist/SvGridChartPanel-Pc_IW0eA.js +833 -0
- package/dist/{SvGridChartView-ScXTF6t-.js → SvGridChartView-DLhhzmFy.js} +6 -4
- package/dist/{shadow/SvGridDropdown-DnAESFDu.js → SvGridDropdown-DUncHqM-.js} +2 -2
- package/dist/{cell-formatting-C0OsDmi_.js → cell-formatting-Eypm-id0.js} +1 -1
- package/dist/chart-GRBAgN1M.js +1658 -0
- package/dist/{date-format-CPHqTHN6.js → date-format-D_oQ5Yw0.js} +13 -13
- package/dist/{export-format-B6FUgOll.js → export-format-uGayRKWM.js} +3 -3
- package/dist/shadow/{GridMenus-DpmS1pzo.js → GridMenus-YwTw9Upd.js} +64 -62
- package/dist/shadow/{SvDateRangeInput-u4ibte8S.js → SvDateRangeInput-CrxeppBV.js} +6 -6
- package/dist/{SvDateTimePicker-DVFiDxUq.js → shadow/SvDateTimePicker-xAO-Pb4S.js} +22 -22
- package/dist/{SvField-ChCI-O2O.js → shadow/SvField-CE345DyF.js} +3 -3
- package/dist/shadow/{SvGridCellEditor-DvsQyE9a.js → SvGridCellEditor-D7SyHtff.js} +2 -2
- package/dist/shadow/SvGridChart-CMaVmlso.js +1477 -0
- package/dist/shadow/SvGridChartPanel-Pc_IW0eA.js +833 -0
- package/dist/shadow/{SvGridChartView-ScXTF6t-.js → SvGridChartView-DLhhzmFy.js} +6 -4
- package/dist/{SvGridDropdown-DnAESFDu.js → shadow/SvGridDropdown-DUncHqM-.js} +2 -2
- package/dist/shadow/{cell-formatting-C0OsDmi_.js → cell-formatting-Eypm-id0.js} +1 -1
- package/dist/shadow/chart-GRBAgN1M.js +1658 -0
- package/dist/shadow/{date-format-CPHqTHN6.js → date-format-D_oQ5Yw0.js} +13 -13
- package/dist/shadow/{export-format-C8kZGZfz.js → export-format-DhdZREP1.js} +3 -3
- package/dist/shadow/sv-grid-shadow-element.js +2160 -2000
- package/dist/sv-grid-element.js +2158 -1998
- package/package.json +3 -3
- package/dist/SvGridChart-yK5Zv85y.js +0 -1199
- package/dist/SvGridChartPanel-B38_VjXM.js +0 -584
- package/dist/chart-uvs3sFJA.js +0 -1220
- package/dist/shadow/SvGridChart-yK5Zv85y.js +0 -1199
- package/dist/shadow/SvGridChartPanel-B38_VjXM.js +0 -584
- package/dist/shadow/chart-uvs3sFJA.js +0 -1220
package/README.md
CHANGED
|
@@ -1,110 +1,110 @@
|
|
|
1
|
-
<p align="center">
|
|
2
|
-
<img src="https://svgrid.com/brand/svgrid-logo-icon-1200.png" alt="SvGrid" width="100" height="100" />
|
|
3
|
-
</p>
|
|
4
|
-
|
|
5
|
-
<h1 align="center">@svgrid/grid-wc</h1>
|
|
6
|
-
|
|
7
|
-
<p align="center"><strong>SvGrid as a framework-agnostic web component.</strong></p>
|
|
8
|
-
|
|
9
|
-
<p align="center">
|
|
10
|
-
<a href="https://www.npmjs.com/package/@svgrid/grid-wc"><img src="https://img.shields.io/npm/v/%40svgrid%2Fgrid-wc.svg?label=%40svgrid%2Fgrid-wc" alt="npm version" /></a>
|
|
11
|
-
<a href="https://www.npmjs.com/package/@svgrid/grid-wc"><img src="https://img.shields.io/npm/dm/%40svgrid%2Fgrid-wc.svg" alt="npm downloads" /></a>
|
|
12
|
-
<a href="./LICENSE"><img src="https://img.shields.io/badge/license-MIT-brightgreen.svg" alt="MIT License" /></a>
|
|
13
|
-
</p>
|
|
14
|
-
|
|
15
|
-
<p align="center">
|
|
16
|
-
<a href="https://svgrid.com">Website</a> ·
|
|
17
|
-
<a href="https://svgrid.com/docs/">Docs</a> ·
|
|
18
|
-
<a href="https://svgrid.com/demos/">Demos</a>
|
|
19
|
-
</p>
|
|
20
|
-
|
|
21
|
-
---
|
|
22
|
-
|
|
23
|
-
A single, self-contained `<sv-grid>`
|
|
24
|
-
[custom element](https://developer.mozilla.org/en-US/docs/Web/API/Web_components)
|
|
25
|
-
you can drop into **React, Vue, Angular, or plain HTML** - no build step, no Svelte
|
|
26
|
-
required in the host app.
|
|
27
|
-
|
|
28
|
-
Powered by [SvGrid](https://svgrid.com), the Svelte 5 data grid and data table:
|
|
29
|
-
virtual scrolling, Excel-style filters, sorting, inline editing, grouping, and
|
|
30
|
-
pagination.
|
|
31
|
-
|
|
32
|
-
## CDN (zero build)
|
|
33
|
-
|
|
34
|
-
```html
|
|
35
|
-
<script type="module" src="https://unpkg.com/@svgrid/grid-wc"></script>
|
|
36
|
-
|
|
37
|
-
<sv-grid id="grid" sortable filterable style="display:block;height:420px"></sv-grid>
|
|
38
|
-
|
|
39
|
-
<script type="module">
|
|
40
|
-
const grid = document.getElementById('grid')
|
|
41
|
-
// Arrays/objects are set as PROPERTIES, not attributes:
|
|
42
|
-
grid.columns = [
|
|
43
|
-
{ field: 'name', header: 'Name', editorType: 'text', width: 200 },
|
|
44
|
-
{ field: 'salary', header: 'Salary', align: 'right',
|
|
45
|
-
format: { type: 'currency', currency: 'USD' } },
|
|
46
|
-
]
|
|
47
|
-
grid.data = [
|
|
48
|
-
{ name: 'Ada Lovelace', salary: 145000 },
|
|
49
|
-
{ name: 'Alan Turing', salary: 160000 },
|
|
50
|
-
]
|
|
51
|
-
grid.addEventListener('rowclick', (e) => console.log(e.detail))
|
|
52
|
-
</script>
|
|
53
|
-
```
|
|
54
|
-
|
|
55
|
-
## npm
|
|
56
|
-
|
|
57
|
-
```bash
|
|
58
|
-
npm install @svgrid/grid-wc
|
|
59
|
-
```
|
|
60
|
-
|
|
61
|
-
```js
|
|
62
|
-
import '@svgrid/grid-wc' // registers <sv-grid> globally
|
|
63
|
-
```
|
|
64
|
-
|
|
65
|
-
## Attributes & properties
|
|
66
|
-
|
|
67
|
-
| Name | Kind | Default | Notes |
|
|
68
|
-
| --- | --- | --- | --- |
|
|
69
|
-
| `data` | property | `[]` | Array of row objects. Set via `el.data = [...]`. |
|
|
70
|
-
| `columns` | property | `[]` | Array of column defs. Set via `el.columns = [...]`. |
|
|
71
|
-
| `sortable` | attribute (boolean) | `true` | Enable column sorting. |
|
|
72
|
-
| `filterable` | attribute (boolean) | `true` | Enable column filtering. |
|
|
73
|
-
| `selectable` | attribute (boolean) | `false` | Row checkboxes + selection. |
|
|
74
|
-
| `editable` | attribute (boolean) | `false` | Inline cell editing. |
|
|
75
|
-
| `row-height` | attribute (number) | `36` | Row height in px. |
|
|
76
|
-
|
|
77
|
-
### Events
|
|
78
|
-
|
|
79
|
-
| Event | `detail` |
|
|
80
|
-
| --- | --- |
|
|
81
|
-
| `rowclick` | the clicked row object |
|
|
82
|
-
| `selectionchange` | array of selected rows |
|
|
83
|
-
|
|
84
|
-
## Frameworks
|
|
85
|
-
|
|
86
|
-
- **React 19+**: `<sv-grid sortable .data={rows} .columns={cols} />` (older React: set via a `ref`).
|
|
87
|
-
- **Vue 3**: `<sv-grid sortable :data.prop="rows" :columns.prop="cols" />`.
|
|
88
|
-
- **Angular**: add `CUSTOM_ELEMENTS_SCHEMA`, then `<sv-grid [data]="rows" [columns]="cols" sortable>`.
|
|
89
|
-
|
|
90
|
-
Full guide: [svgrid.com/docs/help/web-components](https://svgrid.com/docs/help/web-components/).
|
|
91
|
-
|
|
92
|
-
## Styling
|
|
93
|
-
|
|
94
|
-
Built with `shadow: 'none'` (light DOM) so your page CSS and the `--sg-*` theme
|
|
95
|
-
tokens apply, and the grid's overlay popups stay styled:
|
|
96
|
-
|
|
97
|
-
```css
|
|
98
|
-
sv-grid {
|
|
99
|
-
--sg-bg: #fff;
|
|
100
|
-
--sg-header-bg: #f8fafc;
|
|
101
|
-
--sg-border: #e2e8f0;
|
|
102
|
-
}
|
|
103
|
-
```
|
|
104
|
-
|
|
105
|
-
## Pro
|
|
106
|
-
|
|
107
|
-
This element ships the free MIT `@svgrid/grid` core. For export, import,
|
|
108
|
-
print, pivot, and AI, see [@svgrid/enterprise](https://svgrid.com/pricing/).
|
|
109
|
-
|
|
110
|
-
SvGrid(TM) is a trademark of jQWidgets Ltd. This package is MIT-licensed.
|
|
1
|
+
<p align="center">
|
|
2
|
+
<img src="https://svgrid.com/brand/svgrid-logo-icon-1200.png" alt="SvGrid" width="100" height="100" />
|
|
3
|
+
</p>
|
|
4
|
+
|
|
5
|
+
<h1 align="center">@svgrid/grid-wc</h1>
|
|
6
|
+
|
|
7
|
+
<p align="center"><strong>SvGrid as a framework-agnostic web component.</strong></p>
|
|
8
|
+
|
|
9
|
+
<p align="center">
|
|
10
|
+
<a href="https://www.npmjs.com/package/@svgrid/grid-wc"><img src="https://img.shields.io/npm/v/%40svgrid%2Fgrid-wc.svg?label=%40svgrid%2Fgrid-wc" alt="npm version" /></a>
|
|
11
|
+
<a href="https://www.npmjs.com/package/@svgrid/grid-wc"><img src="https://img.shields.io/npm/dm/%40svgrid%2Fgrid-wc.svg" alt="npm downloads" /></a>
|
|
12
|
+
<a href="./LICENSE"><img src="https://img.shields.io/badge/license-MIT-brightgreen.svg" alt="MIT License" /></a>
|
|
13
|
+
</p>
|
|
14
|
+
|
|
15
|
+
<p align="center">
|
|
16
|
+
<a href="https://svgrid.com">Website</a> ·
|
|
17
|
+
<a href="https://svgrid.com/docs/">Docs</a> ·
|
|
18
|
+
<a href="https://svgrid.com/demos/">Demos</a>
|
|
19
|
+
</p>
|
|
20
|
+
|
|
21
|
+
---
|
|
22
|
+
|
|
23
|
+
A single, self-contained `<sv-grid>`
|
|
24
|
+
[custom element](https://developer.mozilla.org/en-US/docs/Web/API/Web_components)
|
|
25
|
+
you can drop into **React, Vue, Angular, or plain HTML** - no build step, no Svelte
|
|
26
|
+
required in the host app.
|
|
27
|
+
|
|
28
|
+
Powered by [SvGrid](https://svgrid.com), the Svelte 5 data grid and data table:
|
|
29
|
+
virtual scrolling, Excel-style filters, sorting, inline editing, grouping, and
|
|
30
|
+
pagination.
|
|
31
|
+
|
|
32
|
+
## CDN (zero build)
|
|
33
|
+
|
|
34
|
+
```html
|
|
35
|
+
<script type="module" src="https://unpkg.com/@svgrid/grid-wc"></script>
|
|
36
|
+
|
|
37
|
+
<sv-grid id="grid" sortable filterable style="display:block;height:420px"></sv-grid>
|
|
38
|
+
|
|
39
|
+
<script type="module">
|
|
40
|
+
const grid = document.getElementById('grid')
|
|
41
|
+
// Arrays/objects are set as PROPERTIES, not attributes:
|
|
42
|
+
grid.columns = [
|
|
43
|
+
{ field: 'name', header: 'Name', editorType: 'text', width: 200 },
|
|
44
|
+
{ field: 'salary', header: 'Salary', align: 'right',
|
|
45
|
+
format: { type: 'currency', currency: 'USD' } },
|
|
46
|
+
]
|
|
47
|
+
grid.data = [
|
|
48
|
+
{ name: 'Ada Lovelace', salary: 145000 },
|
|
49
|
+
{ name: 'Alan Turing', salary: 160000 },
|
|
50
|
+
]
|
|
51
|
+
grid.addEventListener('rowclick', (e) => console.log(e.detail))
|
|
52
|
+
</script>
|
|
53
|
+
```
|
|
54
|
+
|
|
55
|
+
## npm
|
|
56
|
+
|
|
57
|
+
```bash
|
|
58
|
+
npm install @svgrid/grid-wc
|
|
59
|
+
```
|
|
60
|
+
|
|
61
|
+
```js
|
|
62
|
+
import '@svgrid/grid-wc' // registers <sv-grid> globally
|
|
63
|
+
```
|
|
64
|
+
|
|
65
|
+
## Attributes & properties
|
|
66
|
+
|
|
67
|
+
| Name | Kind | Default | Notes |
|
|
68
|
+
| --- | --- | --- | --- |
|
|
69
|
+
| `data` | property | `[]` | Array of row objects. Set via `el.data = [...]`. |
|
|
70
|
+
| `columns` | property | `[]` | Array of column defs. Set via `el.columns = [...]`. |
|
|
71
|
+
| `sortable` | attribute (boolean) | `true` | Enable column sorting. |
|
|
72
|
+
| `filterable` | attribute (boolean) | `true` | Enable column filtering. |
|
|
73
|
+
| `selectable` | attribute (boolean) | `false` | Row checkboxes + selection. |
|
|
74
|
+
| `editable` | attribute (boolean) | `false` | Inline cell editing. |
|
|
75
|
+
| `row-height` | attribute (number) | `36` | Row height in px. |
|
|
76
|
+
|
|
77
|
+
### Events
|
|
78
|
+
|
|
79
|
+
| Event | `detail` |
|
|
80
|
+
| --- | --- |
|
|
81
|
+
| `rowclick` | the clicked row object |
|
|
82
|
+
| `selectionchange` | array of selected rows |
|
|
83
|
+
|
|
84
|
+
## Frameworks
|
|
85
|
+
|
|
86
|
+
- **React 19+**: `<sv-grid sortable .data={rows} .columns={cols} />` (older React: set via a `ref`).
|
|
87
|
+
- **Vue 3**: `<sv-grid sortable :data.prop="rows" :columns.prop="cols" />`.
|
|
88
|
+
- **Angular**: add `CUSTOM_ELEMENTS_SCHEMA`, then `<sv-grid [data]="rows" [columns]="cols" sortable>`.
|
|
89
|
+
|
|
90
|
+
Full guide: [svgrid.com/docs/help/web-components](https://svgrid.com/docs/help/web-components/).
|
|
91
|
+
|
|
92
|
+
## Styling
|
|
93
|
+
|
|
94
|
+
Built with `shadow: 'none'` (light DOM) so your page CSS and the `--sg-*` theme
|
|
95
|
+
tokens apply, and the grid's overlay popups stay styled:
|
|
96
|
+
|
|
97
|
+
```css
|
|
98
|
+
sv-grid {
|
|
99
|
+
--sg-bg: #fff;
|
|
100
|
+
--sg-header-bg: #f8fafc;
|
|
101
|
+
--sg-border: #e2e8f0;
|
|
102
|
+
}
|
|
103
|
+
```
|
|
104
|
+
|
|
105
|
+
## Pro
|
|
106
|
+
|
|
107
|
+
This element ships the free MIT `@svgrid/grid` core. For export, import,
|
|
108
|
+
print, pivot, and AI, see [@svgrid/enterprise](https://svgrid.com/pricing/).
|
|
109
|
+
|
|
110
|
+
SvGrid(TM) is a trademark of jQWidgets Ltd. This package is MIT-licensed.
|
|
@@ -2,7 +2,7 @@ import { $ as e, A as t, C as n, D as r, E as i, F as a, H as o, I as s, J as c,
|
|
|
2
2
|
import { c as B, s as V, t as H } from "./svelte-virtualizer.svelte-DZ9UcyfT.js";
|
|
3
3
|
import { S as ie, h as ae, u as oe, w as se } from "./SvGrid.helpers-BdVDtjUm.js";
|
|
4
4
|
import { i as U, t as W } from "./editor-contract-peBDxir_.js";
|
|
5
|
-
import { t as ce } from "./SvField-
|
|
5
|
+
import { t as ce } from "./SvField-CE345DyF.js";
|
|
6
6
|
import { n as le } from "./dismissable-DvhBKm3q.js";
|
|
7
7
|
//#region ../grid/dist/list-option.js
|
|
8
8
|
function ue(e) {
|
|
@@ -294,14 +294,14 @@ function he(t) {
|
|
|
294
294
|
}
|
|
295
295
|
//#endregion
|
|
296
296
|
//#region ../grid/dist/SvListBox.svelte
|
|
297
|
-
var ge = D("<span aria-hidden=\"true\"></span>"), _e = D("<span class=\"sv-listbox__check svelte-
|
|
297
|
+
var ge = D("<span aria-hidden=\"true\"></span>"), _e = D("<span class=\"sv-listbox__check svelte-1qscmce\" aria-hidden=\"true\"> </span>"), ve = D("<span class=\"sv-listbox__label svelte-1qscmce\"> </span>"), ye = D("<span class=\"sv-listbox__hint svelte-1qscmce\" aria-hidden=\"true\"> </span>"), be = D("<!> <!> <!>", 1), xe = D("<div><!></div>"), Se = D("<div class=\"sv-listbox__group svelte-1qscmce\" role=\"presentation\"> </div>"), Ce = D("<div class=\"sv-listbox__sb svelte-1qscmce\" aria-hidden=\"true\"><div></div></div>"), we = D("<div class=\"sv-listbox__vp svelte-1qscmce\"></div> <!>", 1), Te = D("<div class=\"sv-listbox__group svelte-1qscmce\" role=\"presentation\"> </div>"), Ee = D("<!> <!>", 1), X = D("<input type=\"hidden\"/>"), De = D("<div><!></div> <!>", 1);
|
|
298
298
|
function Oe(n, a) {
|
|
299
299
|
ne(a, !0);
|
|
300
300
|
let p = (e, n = E) => {
|
|
301
301
|
var o = be(), s = N(o), u = (e) => {
|
|
302
302
|
var t = ge();
|
|
303
303
|
let r;
|
|
304
|
-
m((e) => r = R(t, 1, "sv-listbox__box svelte-
|
|
304
|
+
m((e) => r = R(t, 1, "sv-listbox__box svelte-1qscmce", null, r, e), [() => ({ "is-on": q(n()) })]), O(e, t);
|
|
305
305
|
}, f = (e) => {
|
|
306
306
|
var t = _e(), r = l(t, !0);
|
|
307
307
|
P(t), m((e) => d(r, e), [() => q(n()) ? "✓" : ""]), O(e, t);
|
|
@@ -344,7 +344,7 @@ function Oe(n, a) {
|
|
|
344
344
|
height: `${r() ?? fe(t())}px`,
|
|
345
345
|
transform: i() == null ? void 0 : `translateY(${i()}px)`
|
|
346
346
|
})
|
|
347
|
-
], void 0, void 0, "svelte-
|
|
347
|
+
], void 0, void 0, "svelte-1qscmce");
|
|
348
348
|
var o = l(a);
|
|
349
349
|
p(o, t), P(a), O(e, a);
|
|
350
350
|
}, v = A(a, "value", 3, null), w = A(a, "multiple", 3, !1), D = A(a, "checkbox", 3, !1), j = A(a, "block", 3, !1), ee = A(a, "disabled", 3, !1), te = A(a, "size", 3, "md"), re = A(a, "rows", 3, 7), B = A(a, "virtual", 3, !1), V = A(a, "rowHeight", 3, 32), ie = A(a, "groupHeaderHeight", 3, 28), ae = A(a, "invalid", 3, !1), oe = A(a, "required", 3, !1), se = U("sv-lb"), W = e(() => a.id ?? se), le = e(() => ue(a.options)), K = me({
|
|
@@ -429,7 +429,7 @@ function Oe(n, a) {
|
|
|
429
429
|
"--sv-rows": re(),
|
|
430
430
|
"--sv-row-h": `${f(J)}px`
|
|
431
431
|
}
|
|
432
|
-
}), [() => K.rootProps()], void 0, void 0, "svelte-
|
|
432
|
+
}), [() => K.rootProps()], void 0, void 0, "svelte-1qscmce");
|
|
433
433
|
var _ = l(p), v = (n) => {
|
|
434
434
|
var r = we(), a = N(r);
|
|
435
435
|
L(a, 21, () => f(Ne), (e) => e.key, (n, r) => {
|
|
@@ -455,7 +455,7 @@ function Oe(n, a) {
|
|
|
455
455
|
var t = Ce(), n = l(t);
|
|
456
456
|
let r, i;
|
|
457
457
|
P(t), m(() => {
|
|
458
|
-
r = R(n, 1, "sv-listbox__thumb svelte-
|
|
458
|
+
r = R(n, 1, "sv-listbox__thumb svelte-1qscmce", null, r, { "is-dragging": Q.dragging }), i = I(n, "", i, {
|
|
459
459
|
height: `${Q.thumbH}px`,
|
|
460
460
|
transform: `translateY(${Q.thumbTop}px)`
|
|
461
461
|
});
|
|
@@ -524,7 +524,7 @@ a([
|
|
|
524
524
|
]);
|
|
525
525
|
//#endregion
|
|
526
526
|
//#region ../grid/dist/GridMenus.svelte
|
|
527
|
-
var ke = D("<option> </option>"), Ae = D("<input class=\"sv-grid-menu-condition-value\" placeholder=\"To\"/>"), je = D("<input class=\"sv-grid-menu-condition-value\"/> <!>", 1), Me = D("<option> </option>"), Z = D("<input class=\"sv-grid-menu-condition-value\" placeholder=\"To\"/>"), Ne = D("<input class=\"sv-grid-menu-condition-value\"/> <!>", 1), Pe = D("<div class=\"sv-grid-menu-join\" role=\"radiogroup\" aria-label=\"Combine conditions\"><button type=\"button\">AND</button> <button type=\"button\">OR</button> <button type=\"button\" class=\"sv-grid-menu-join-x\" title=\"Remove second condition\" aria-label=\"Remove second condition\"
|
|
527
|
+
var ke = D("<option> </option>"), Ae = D("<input class=\"sv-grid-menu-condition-value\" placeholder=\"To\"/>"), je = D("<input class=\"sv-grid-menu-condition-value\"/> <!>", 1), Me = D("<option> </option>"), Z = D("<input class=\"sv-grid-menu-condition-value\" placeholder=\"To\"/>"), Ne = D("<input class=\"sv-grid-menu-condition-value\"/> <!>", 1), Pe = D("<div class=\"sv-grid-menu-join\" role=\"radiogroup\" aria-label=\"Combine conditions\"><button type=\"button\">AND</button> <button type=\"button\">OR</button> <button type=\"button\" class=\"sv-grid-menu-join-x\" title=\"Remove second condition\" aria-label=\"Remove second condition\"><!></button></div> <select class=\"sv-grid-menu-operator-select\" aria-label=\"Second filter condition\"></select> <!>", 1), Q = D("<button type=\"button\" class=\"sv-grid-menu-add-cond\">+ Add condition</button>"), Fe = D("<!> <!>", 1), Ie = D("<span class=\"sv-grid-menu-head-note\">and the condition above</span>"), Le = D("<span class=\"sv-grid-menu-head-note\"> </span>"), Re = D("<div class=\"sv-grid-facet-empty\">No values</div>"), ze = D("<div class=\"sv-grid-facet-note\"> </div>"), Be = D("<div class=\"sv-grid-menu-filter\"><div class=\"sv-grid-menu-filter-head\"><span class=\"sv-grid-header-icon\"><!></span> Filter\n condition</div> <select class=\"sv-grid-menu-operator-select\" aria-label=\"Filter condition\"></select> <!> <div class=\"sv-grid-menu-sep\"></div> <div class=\"sv-grid-menu-filter-head\">Values <!></div> <span class=\"sv-grid-menu-search-wrap\"><!> <input class=\"sv-grid-menu-search\" placeholder=\"Search values...\"/></span> <label class=\"sv-grid-facet sv-grid-facet-all\"><input type=\"checkbox\"/> <span class=\"sv-grid-facet-label\"> </span></label> <!> <!> <div class=\"sv-grid-menu-actions\"><button type=\"button\" class=\"sv-grid-menu-btn\">Clear filter</button> <button type=\"button\" class=\"sv-grid-menu-btn sv-grid-menu-btn-primary\">Done</button></div></div>"), Ve = D("<div role=\"tooltip\"> </div>"), He = D("<div class=\"sv-grid-menu-backdrop\" role=\"presentation\"></div>"), Ue = D("<button type=\"button\" role=\"tab\">Filter</button>"), We = D("<div class=\"sv-grid-menu-tabs\" role=\"tablist\"><button type=\"button\" role=\"tab\">General</button> <!> <button type=\"button\" role=\"tab\">Columns</button></div>"), Ge = D("<div class=\"sv-grid-menu-filter-head\">Visible columns</div> <!>", 1), Ke = D("<button type=\"button\" class=\"sv-grid-menu-item\" role=\"menuitem\"><span class=\"sv-grid-header-icon\"><!></span> Sort\n ascending</button> <button type=\"button\" class=\"sv-grid-menu-item\" role=\"menuitem\"><span class=\"sv-grid-header-icon\"><!></span> Sort\n descending</button> <button type=\"button\" class=\"sv-grid-menu-item\" role=\"menuitem\"><span class=\"sv-grid-header-icon\"><!></span> Remove sort</button>", 1), qe = D("<div class=\"sv-grid-menu-sep\"></div> <button type=\"button\" class=\"sv-grid-menu-item\" role=\"menuitem\"><span class=\"sv-grid-header-icon\"><!></span> Pin to left</button> <button type=\"button\" class=\"sv-grid-menu-item\" role=\"menuitem\"><span class=\"sv-grid-header-icon\"><!></span> Pin to right</button> <button type=\"button\" class=\"sv-grid-menu-item\" role=\"menuitem\"><span class=\"sv-grid-header-icon\"><!></span> Unpin column</button>", 1), Je = D("<button type=\"button\" class=\"sv-grid-menu-item\" role=\"menuitem\"><span class=\"sv-grid-header-icon\"><!></span> Autosize\n this column</button>"), Ye = D("<div class=\"sv-grid-menu-sep\"></div> <button type=\"button\" class=\"sv-grid-menu-item\" role=\"menuitem\"><span class=\"sv-grid-header-icon\"><!></span> Group\n by this column</button> <button type=\"button\" class=\"sv-grid-menu-item\" role=\"menuitem\"><span class=\"sv-grid-header-icon\"><!></span> Remove grouping</button>", 1), Xe = D("<button type=\"button\" role=\"menuitem\" aria-haspopup=\"menu\"><span class=\"sv-grid-header-icon\"><!></span> Choose columns <span class=\"sv-grid-header-icon sv-grid-menu-item-chevron\"><!></span></button>"), Ze = D("<!> <!> <div class=\"sv-grid-menu-sep\"></div> <!> <button type=\"button\" class=\"sv-grid-menu-item\" role=\"menuitem\"><span class=\"sv-grid-header-icon\"><!></span> Autosize\n all columns</button> <!> <div class=\"sv-grid-menu-sep\"></div> <!> <button type=\"button\" class=\"sv-grid-menu-item\" role=\"menuitem\"><span class=\"sv-grid-header-icon\"><!></span> Reset columns</button>", 1), Qe = D("<div class=\"sv-grid-menu sv-grid-column-menu\" role=\"menu\"><!> <!></div>"), $e = D("<div class=\"sv-grid-menu sv-grid-filter-menu\" role=\"menu\" tabindex=\"-1\"><!></div>"), et = D("<div class=\"sv-grid-menu sv-grid-choose-columns-menu\" role=\"menu\"><div class=\"sv-grid-menu-filter-head\">Visible columns</div> <!></div>"), tt = D("<button type=\"button\" class=\"sv-grid-menu-item\" role=\"menuitemradio\"><span class=\"sv-grid-header-icon\"><!></span> </button>"), nt = D("<div class=\"sv-grid-menu sv-grid-operator-menu\" role=\"menu\"></div>"), rt = D("<div class=\"sv-grid-facet-empty\">No values</div>"), it = D("<div class=\"sv-grid-menu sv-grid-in-suggest\"><!></div>"), at = D("<div class=\"sv-grid-menu-sep\"></div>"), ot = D("<button type=\"button\" class=\"sv-grid-menu-item\" role=\"menuitem\"> </button>"), st = D("<div class=\"sv-grid-menu-backdrop\" role=\"presentation\"></div> <div class=\"sv-grid-menu sv-grid-context-menu\" role=\"menu\"></div>", 1), ct = D("<div class=\"sv-grid-menu-backdrop\" role=\"presentation\"></div> <div class=\"sv-grid-menu sv-grid-comment-editor\" role=\"dialog\" aria-label=\"Edit comment\"><textarea class=\"sv-grid-comment-textarea\" rows=\"3\" placeholder=\"Add a comment…\"></textarea> <div class=\"sv-grid-comment-actions\"><button type=\"button\" class=\"sv-grid-comment-remove\">Remove</button> <span class=\"sv-grid-comment-spacer\"></span> <button type=\"button\" class=\"sv-grid-comment-cancel\">Cancel</button> <button type=\"button\" class=\"sv-grid-comment-save\">Save</button></div></div>", 1), lt = D("<!> <!> <!> <!> <!> <!> <!> <!> <!>", 1);
|
|
528
528
|
function $(a, y) {
|
|
529
529
|
ne(y, !0);
|
|
530
530
|
let b = (a, o = E) => {
|
|
@@ -542,9 +542,9 @@ function $(a, y) {
|
|
|
542
542
|
}), P(B);
|
|
543
543
|
var V;
|
|
544
544
|
w(B);
|
|
545
|
-
var H = c(B, 2), U = (
|
|
546
|
-
let
|
|
547
|
-
var
|
|
545
|
+
var H = c(B, 2), U = (a) => {
|
|
546
|
+
let S = e(() => f(M)[o()]);
|
|
547
|
+
var E = Fe(), D = N(E), k = (r) => {
|
|
548
548
|
var a = t(), s = N(a), c = (r) => {
|
|
549
549
|
var a = t(), s = N(a), c = (r) => {
|
|
550
550
|
let i = e(() => f(St)), a = e(() => oe(f(M)[o()]?.value)), s = e(() => oe(f(M)[o()]?.valueTo));
|
|
@@ -594,7 +594,7 @@ function $(a, y) {
|
|
|
594
594
|
i(s, (e) => {
|
|
595
595
|
f(g) === "between" ? e(c) : f(xt) && e(l, 1);
|
|
596
596
|
}), O(r, a);
|
|
597
|
-
},
|
|
597
|
+
}, A = (t) => {
|
|
598
598
|
let n = e(() => f(g) === "in" || f(g) === "notIn");
|
|
599
599
|
var r = je(), a = N(r);
|
|
600
600
|
x(a);
|
|
@@ -617,54 +617,54 @@ function $(a, y) {
|
|
|
617
617
|
f(ye)(o(), t.value), f(n) && It(t, o());
|
|
618
618
|
}), O(t, r);
|
|
619
619
|
};
|
|
620
|
-
i(
|
|
621
|
-
f(b) ? e(
|
|
620
|
+
i(D, (e) => {
|
|
621
|
+
f(b) ? e(k) : e(A, -1);
|
|
622
622
|
});
|
|
623
|
-
var
|
|
624
|
-
let n = e(() => f(
|
|
625
|
-
var
|
|
626
|
-
let
|
|
627
|
-
var
|
|
628
|
-
let
|
|
629
|
-
var
|
|
630
|
-
P(u);
|
|
631
|
-
var
|
|
632
|
-
L(
|
|
623
|
+
var j = c(D, 2), ee = (t) => {
|
|
624
|
+
let n = e(() => f(S).operator2 ?? f(Se)(f(p)));
|
|
625
|
+
var a = Pe(), u = N(a), g = l(u);
|
|
626
|
+
let b;
|
|
627
|
+
var E = c(g, 2);
|
|
628
|
+
let D;
|
|
629
|
+
var k = c(E, 2), A = l(k);
|
|
630
|
+
r(A, () => y.icon, () => "remove"), P(k), P(u);
|
|
631
|
+
var j = c(u, 2);
|
|
632
|
+
L(j, 21, () => f(h), (e) => e.value, (e, t) => {
|
|
633
633
|
var n = Me(), r = l(n, !0);
|
|
634
634
|
P(n);
|
|
635
635
|
var i = {};
|
|
636
636
|
m((e) => {
|
|
637
637
|
d(r, e), i !== (i = f(t).value) && (n.value = (n.__value = f(t).value) ?? "");
|
|
638
638
|
}, [() => f(Ce)(f(t), f(p))]), O(e, n);
|
|
639
|
-
}), P(
|
|
640
|
-
var
|
|
641
|
-
w(
|
|
642
|
-
var
|
|
639
|
+
}), P(j);
|
|
640
|
+
var M;
|
|
641
|
+
w(j);
|
|
642
|
+
var ee = c(j, 2), te = (e) => {
|
|
643
643
|
var t = Ne(), r = N(t);
|
|
644
644
|
x(r);
|
|
645
|
-
var
|
|
645
|
+
var a = c(r, 2), l = (e) => {
|
|
646
646
|
var t = Z();
|
|
647
647
|
x(t), m(() => {
|
|
648
|
-
C(t, "type", f(_)), T(t, f(
|
|
648
|
+
C(t, "type", f(_)), T(t, f(S).valueTo2 ?? "");
|
|
649
649
|
}), s("input", t, (e) => X(o(), { valueTo2: e.currentTarget.value })), O(e, t);
|
|
650
650
|
};
|
|
651
|
-
i(
|
|
652
|
-
f(n) === "between" && e(
|
|
651
|
+
i(a, (e) => {
|
|
652
|
+
f(n) === "between" && e(l);
|
|
653
653
|
}), m(() => {
|
|
654
|
-
C(r, "type", f(_)), T(r, f(
|
|
654
|
+
C(r, "type", f(_)), T(r, f(S).value2 ?? ""), C(r, "placeholder", f(n) === "between" ? "From" : "Filter value...");
|
|
655
655
|
}), s("input", r, (e) => X(o(), { value2: e.currentTarget.value })), O(e, t);
|
|
656
656
|
};
|
|
657
|
-
i(
|
|
658
|
-
f(n) !== "isBlank" && e(
|
|
657
|
+
i(ee, (e) => {
|
|
658
|
+
f(n) !== "isBlank" && e(te);
|
|
659
659
|
}), m(() => {
|
|
660
|
-
|
|
661
|
-
}), s("click", g, () => X(o(), { join: "AND" })), s("click",
|
|
660
|
+
b = R(g, 1, "", null, b, { "is-on": (f(S).join ?? "AND") === "AND" }), D = R(E, 1, "", null, D, { "is-on": f(S).join === "OR" }), M !== (M = f(n)) && (j.value = (j.__value = f(n)) ?? "", v(j, f(n)));
|
|
661
|
+
}), s("click", g, () => X(o(), { join: "AND" })), s("click", E, () => X(o(), { join: "OR" })), s("click", k, () => X(o(), {
|
|
662
662
|
operator2: void 0,
|
|
663
663
|
value2: void 0,
|
|
664
664
|
valueTo2: void 0,
|
|
665
665
|
join: void 0
|
|
666
|
-
})), s("change",
|
|
667
|
-
},
|
|
666
|
+
})), s("change", j, (e) => X(o(), { operator2: e.currentTarget.value })), O(t, a);
|
|
667
|
+
}, te = (e) => {
|
|
668
668
|
var t = Q();
|
|
669
669
|
s("click", t, () => X(o(), {
|
|
670
670
|
operator2: f(Se)(f(p)),
|
|
@@ -672,9 +672,9 @@ function $(a, y) {
|
|
|
672
672
|
join: "AND"
|
|
673
673
|
})), O(e, t);
|
|
674
674
|
};
|
|
675
|
-
i(
|
|
676
|
-
f(
|
|
677
|
-
}), O(
|
|
675
|
+
i(j, (e) => {
|
|
676
|
+
f(S)?.operator2 ? e(ee) : e(te, -1);
|
|
677
|
+
}), O(a, E);
|
|
678
678
|
};
|
|
679
679
|
i(H, (e) => {
|
|
680
680
|
f(g) !== "isBlank" && f(g) !== "isNotBlank" && e(U);
|
|
@@ -689,13 +689,15 @@ function $(a, y) {
|
|
|
689
689
|
i(ce, (e) => {
|
|
690
690
|
f(k) ? e(le) : f(A) < f(ne) && e(ue, 1);
|
|
691
691
|
}), P(W);
|
|
692
|
-
var G = c(W, 2);
|
|
693
|
-
|
|
694
|
-
var
|
|
695
|
-
x(K);
|
|
696
|
-
var q = c(
|
|
697
|
-
|
|
698
|
-
var Y = c(
|
|
692
|
+
var G = c(W, 2), de = l(G);
|
|
693
|
+
r(de, () => y.icon, () => "search");
|
|
694
|
+
var K = c(de, 2);
|
|
695
|
+
x(K), P(G);
|
|
696
|
+
var q = c(G, 2), fe = l(q);
|
|
697
|
+
x(fe);
|
|
698
|
+
var Y = c(fe, 2), pe = l(Y, !0);
|
|
699
|
+
P(Y), P(q);
|
|
700
|
+
var me = c(q, 2), he = (t) => {
|
|
699
701
|
{
|
|
700
702
|
let n = e(() => f(Tt).length > Pt);
|
|
701
703
|
Oe(t, {
|
|
@@ -720,24 +722,24 @@ function $(a, y) {
|
|
|
720
722
|
onChange: (e) => f(Dt)(o(), e)
|
|
721
723
|
});
|
|
722
724
|
}
|
|
723
|
-
},
|
|
725
|
+
}, ge = (e) => {
|
|
724
726
|
var t = Re();
|
|
725
727
|
O(e, t);
|
|
726
728
|
};
|
|
727
|
-
i(
|
|
728
|
-
f(Tt).length ? e(
|
|
729
|
+
i(me, (e) => {
|
|
730
|
+
f(Tt).length ? e(he) : e(ge, -1);
|
|
729
731
|
});
|
|
730
|
-
var
|
|
732
|
+
var _e = c(me, 2), we = (e) => {
|
|
731
733
|
var t = ze(), n = l(t);
|
|
732
734
|
P(t), m(() => d(n, `Showing ${f(yt).length ?? ""} of ${f(vt).length ?? ""}`)), O(e, t);
|
|
733
735
|
};
|
|
734
|
-
i(
|
|
735
|
-
f(vt).length > f(yt).length && e(
|
|
736
|
+
i(_e, (e) => {
|
|
737
|
+
f(vt).length > f(yt).length && e(we);
|
|
736
738
|
});
|
|
737
|
-
var
|
|
738
|
-
P(
|
|
739
|
-
V !== (V = f(g)) && (B.value = (B.__value = f(g)) ?? "", v(B, f(g))), ee(
|
|
740
|
-
}, [() => f(Mt)(o()), () => !f(De)(o())]), s("change", B, (e) => f(ve)(o(), e.currentTarget.value)), te(
|
|
739
|
+
var Te = c(_e, 2), Ee = l(Te), Ve = c(Ee, 2);
|
|
740
|
+
P(Te), P(F), m((e, t) => {
|
|
741
|
+
V !== (V = f(g)) && (B.value = (B.__value = f(g)) ?? "", v(B, f(g))), ee(fe, e), d(pe, f(S) ? "(Select all results)" : "(Select all)"), Ee.disabled = t;
|
|
742
|
+
}, [() => f(Mt)(o()), () => !f(De)(o())]), s("change", B, (e) => f(ve)(o(), e.currentTarget.value)), te(K, () => D().columnMenuSearch, (e) => D().columnMenuSearch = e), s("change", fe, () => f(Nt)(o())), s("click", Ee, () => f(Bt)(o())), s("click", Ve, function(...e) {
|
|
741
743
|
f($)?.apply(this, e);
|
|
742
744
|
}), O(a, F);
|
|
743
745
|
}, D = A(y, "ctrl", 7), k = e(() => D().groupingControlsEnabled), M = e(() => D().filterMenuValues), F = e(() => D().tooltip), z = e(() => D().columnMenuFor), H = e(() => D().columnMenuPos), U = e(() => D().filterMenuFor), W = e(() => D().filterMenuPos), ce = e(() => D().operatorMenuFor), ue = e(() => D().operatorMenuPos), G = e(() => D().chooseColumnsPos), de = e(() => D().showColumnFiltersEffective), K = e(() => D().props.columnMenuTabs === !0), q = e(() => D().grid), J = e(() => D().allColumns), fe = e(() => D().isColumnPinned), Y = e(() => D().pinColumnLeft), pe = e(() => D().pinColumnRight), me = e(() => D().unpinColumn), he = e(() => D().sortDirectionByColumn), ge = e(() => D().groupingColumns), _e = e(() => D().columnVirtualizationEnabled), ve = e(() => D().updateFilterOperator), ye = e(() => D().updateFilterMenuValue), be = e(() => D().updateFilterMenuValueTo), xe = e(() => D().operatorsForColumn), Se = e(() => D().defaultOperatorFor), Ce = e(() => D().operatorLabelFor), we = e(() => D().filterRowValues), Te = e(() => D().inSuggestFor), Ee = e(() => D().inSuggestPos);
|
|
@@ -773,7 +775,7 @@ function $(a, y) {
|
|
|
773
775
|
let e = f(U) ?? f(z);
|
|
774
776
|
if (!e) return;
|
|
775
777
|
let t = f(J).find((t) => t.id === e);
|
|
776
|
-
se(t?.columnDef.editorType) && (f(xt) || import("./SvDateTimePicker-
|
|
778
|
+
se(t?.columnDef.editorType) && (f(xt) || import("./SvDateTimePicker-xAO-Pb4S.js").then((e) => g(xt, e.default, !0)), f(St) || import("./SvDateRangeInput-CrxeppBV.js").then((e) => g(St, e.default, !0)));
|
|
777
779
|
});
|
|
778
780
|
function Ct(e) {
|
|
779
781
|
requestAnimationFrame(() => {
|
|
@@ -896,11 +898,11 @@ function $(a, y) {
|
|
|
896
898
|
var p = c(u, 2), h = (t) => {
|
|
897
899
|
let i = e(() => f(fe)(f(n)));
|
|
898
900
|
var a = qe(), o = c(N(a), 2), u = l(o), d = l(u);
|
|
899
|
-
r(d, () => y.icon, () => "
|
|
901
|
+
r(d, () => y.icon, () => "pin-left"), P(u), j(), P(o);
|
|
900
902
|
var p = c(o, 2), h = l(p), g = l(h);
|
|
901
|
-
r(g, () => y.icon, () => "
|
|
903
|
+
r(g, () => y.icon, () => "pin-right"), P(h), j(), P(p);
|
|
902
904
|
var _ = c(p, 2), v = l(_), b = l(v);
|
|
903
|
-
r(b, () => y.icon, () => "
|
|
905
|
+
r(b, () => y.icon, () => "unpin"), P(v), j(), P(_), m(() => {
|
|
904
906
|
o.disabled = f(i) === "left", p.disabled = f(i) === "right", _.disabled = !f(i);
|
|
905
907
|
}), s("click", o, () => f(Y)(f(n))), s("click", p, () => f(pe)(f(n))), s("click", _, () => f(me)(f(n))), O(t, a);
|
|
906
908
|
};
|
|
@@ -1,10 +1,10 @@
|
|
|
1
1
|
import { $ as e, E as t, F as n, H as r, I as i, J as a, K as o, R as s, V as c, X as l, Y as u, Z as d, a as f, d as p, et as m, f as h, h as g, j as _, k as v, n as y, q as ee, rt as b, tt as x, u as te, v as ne, x as S, y as C } from "./client-DjwUji8D.js";
|
|
2
2
|
import { a as w, i as T, t as re } from "./editor-contract-peBDxir_.js";
|
|
3
|
-
import { i as E, o as D, r as ie, t as O } from "./date-format-
|
|
3
|
+
import { i as E, o as D, r as ie, t as O } from "./date-format-D_oQ5Yw0.js";
|
|
4
4
|
import { n as ae, r as oe, t as se } from "./popover-WsGlvtQv.js";
|
|
5
|
-
import { t as k } from "./SvField-
|
|
5
|
+
import { t as k } from "./SvField-CE345DyF.js";
|
|
6
6
|
//#region ../grid/dist/SvDateRangeInput.svelte
|
|
7
|
-
var ce = _("<button type=\"button\" class=\"sv-dri__clear svelte-
|
|
7
|
+
var ce = _("<button type=\"button\" class=\"sv-dri__clear svelte-1rb3yee\">×</button>"), le = _("<div class=\"sv-dri__panel\" role=\"dialog\"><!></div>"), A = _("<input type=\"hidden\"/> <input type=\"hidden\"/>", 1), ue = _("<div><div><svg class=\"sv-dri__icon svelte-1rb3yee\" viewBox=\"0 0 24 24\" width=\"15\" height=\"15\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><rect x=\"3\" y=\"4\" width=\"18\" height=\"18\" rx=\"2\"></rect><path d=\"M16 2v4M8 2v4M3 10h18\"></path></svg> <input/> <!></div> <!> <!></div>");
|
|
8
8
|
function j(n, _) {
|
|
9
9
|
x(_, !0);
|
|
10
10
|
let j = {
|
|
@@ -111,7 +111,7 @@ function j(n, _) {
|
|
|
111
111
|
error: _.error,
|
|
112
112
|
hint: _.hint,
|
|
113
113
|
ariaLabel: _.ariaLabel
|
|
114
|
-
})], void 0, void 0, "svelte-
|
|
114
|
+
})], void 0, void 0, "svelte-1rb3yee", !0), f(y, (e) => l(X, e), () => s(X)), S(y, (e) => Ee?.(e));
|
|
115
115
|
var x = a(y, 2), w = (e) => {
|
|
116
116
|
var t = ce();
|
|
117
117
|
c(() => h(t, "aria-label", s(V).clear)), i("click", t, (e) => {
|
|
@@ -180,10 +180,10 @@ function j(n, _) {
|
|
|
180
180
|
t(D, (e) => {
|
|
181
181
|
_.name && e(O);
|
|
182
182
|
}), b(r), c(() => {
|
|
183
|
-
u = C(r, 1, "sv-dri svelte-
|
|
183
|
+
u = C(r, 1, "sv-dri svelte-1rb3yee", null, u, {
|
|
184
184
|
"is-block": ye(),
|
|
185
185
|
"sv-dri--disabled": L()
|
|
186
|
-
}), m = C(d, 1, `sv-dri__field sv-dri__field--${ve() ?? ""}`, "svelte-
|
|
186
|
+
}), m = C(d, 1, `sv-dri__field sv-dri__field--${ve() ?? ""}`, "svelte-1rb3yee", m, { "is-invalid": R() }), h(d, "dir", s(H)), d.dir = d.dir;
|
|
187
187
|
}), i("click", d, () => {
|
|
188
188
|
s(U) && (s(X)?.focus(), J());
|
|
189
189
|
}), v(e, r);
|