@alaarab/ogrid-vue-radix 2.7.3 → 2.8.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 +50 -0
- package/dist/esm/ColumnChooser/ColumnChooser.module.css +5 -5
- package/dist/esm/ColumnChooser/ColumnChooser.vue?vue&type=style&index=0&scoped=9d3085bf&lang.css +1 -1
- package/dist/esm/ColumnHeaderFilter/ColumnHeaderFilter.module.css +8 -8
- package/dist/esm/ColumnHeaderFilter/ColumnHeaderFilter.vue?vue&type=style&index=0&scoped=7b7a41e5&lang.css +1 -1
- package/dist/esm/ColumnHeaderFilter/MultiSelectFilterPopover.vue?vue&type=style&index=0&scoped=b40a6834&lang.css +1 -1
- package/dist/esm/ColumnHeaderFilter/PeopleFilterPopover.js +1 -1
- package/dist/esm/ColumnHeaderFilter/PeopleFilterPopover.vue?vue&type=style&index=0&scoped=92fea036&lang.css +1 -0
- package/dist/esm/ColumnHeaderFilter/PeopleFilterPopover.vue_vue_type_script_setup_true_lang.js +10 -10
- package/dist/esm/ColumnHeaderFilter/TextFilterPopover.vue?vue&type=style&index=0&scoped=0baa080d&lang.css +1 -1
- package/dist/esm/ColumnHeaderMenu/ColumnHeaderMenu.js +2 -2
- package/dist/esm/ColumnHeaderMenu/ColumnHeaderMenu.vue?vue&type=style&index=0&scoped=8a52b4a6&lang.css +1 -0
- package/dist/esm/DataGridTable/DataGridTable.css +1 -1
- package/dist/esm/DataGridTable/GridContextMenu.js +1 -1
- package/dist/esm/DataGridTable/GridContextMenu.vue?vue&type=style&index=0&scoped=79f1fcb1&lang.css +1 -0
- package/dist/esm/PaginationControls/PaginationControls.module.css +3 -3
- package/dist/esm/PaginationControls/PaginationControls.vue?vue&type=style&index=0&scoped=9f3ef127&lang.css +1 -1
- package/dist/esm/index.js +30 -29
- package/dist/types/index.d.ts +2 -2
- package/package.json +2 -2
- package/dist/esm/ColumnHeaderFilter/PeopleFilterPopover.vue?vue&type=style&index=0&scoped=58ce6f63&lang.css +0 -1
- package/dist/esm/ColumnHeaderMenu/ColumnHeaderMenu.vue?vue&type=style&index=0&scoped=217034af&lang.css +0 -1
- package/dist/esm/DataGridTable/GridContextMenu.vue?vue&type=style&index=0&scoped=204e9cc9&lang.css +0 -1
package/README.md
CHANGED
|
@@ -25,4 +25,54 @@ const columns = [
|
|
|
25
25
|
</template>
|
|
26
26
|
```
|
|
27
27
|
|
|
28
|
+
## Headless API — `useHeadlessGrid`
|
|
29
|
+
|
|
30
|
+
Render OGrid's sort/filter/paginate/select state with your own table chrome.
|
|
31
|
+
Same logic that powers `<OGrid>` exposed as a Vue composable returning refs
|
|
32
|
+
and computeds. Inputs accept refs, getters, or plain values.
|
|
33
|
+
|
|
34
|
+
```vue
|
|
35
|
+
<script setup lang="ts">
|
|
36
|
+
import { ref } from 'vue';
|
|
37
|
+
import { useHeadlessGrid } from '@alaarab/ogrid-vue-radix';
|
|
38
|
+
|
|
39
|
+
const grid = useHeadlessGrid({
|
|
40
|
+
columns,
|
|
41
|
+
data: ref(employees),
|
|
42
|
+
getRowId: (e) => e.id,
|
|
43
|
+
initialSort: { field: 'salary', direction: 'desc' },
|
|
44
|
+
initialPageSize: 25,
|
|
45
|
+
});
|
|
46
|
+
</script>
|
|
47
|
+
|
|
48
|
+
<template>
|
|
49
|
+
<table>
|
|
50
|
+
<thead>
|
|
51
|
+
<tr>
|
|
52
|
+
<th
|
|
53
|
+
v-for="col in grid.columns.value"
|
|
54
|
+
:key="col.columnId"
|
|
55
|
+
@click="grid.toggleSort(col.columnId)"
|
|
56
|
+
>
|
|
57
|
+
{{ col.name }} {{ grid.sortIndicator(col.columnId).value }}
|
|
58
|
+
</th>
|
|
59
|
+
</tr>
|
|
60
|
+
</thead>
|
|
61
|
+
<tbody>
|
|
62
|
+
<tr v-for="row in grid.rows.value" :key="grid.getRowId(row)">
|
|
63
|
+
<td v-for="col in grid.columns.value" :key="col.columnId">
|
|
64
|
+
{{ grid.getCellValue(row, col.columnId) }}
|
|
65
|
+
</td>
|
|
66
|
+
</tr>
|
|
67
|
+
</tbody>
|
|
68
|
+
</table>
|
|
69
|
+
</template>
|
|
70
|
+
```
|
|
71
|
+
|
|
72
|
+
The composable returns refs (`sort`, `filters`, `page`, `pageSize`,
|
|
73
|
+
`selectedRowIds`), computeds (`columns`, `rows`, `totalCount`,
|
|
74
|
+
`totalPages`, `allFilteredRows`, `hasActiveFilters`), and plain action
|
|
75
|
+
functions. See the React `useHeadlessGrid` docs for the full API
|
|
76
|
+
reference — the shape is identical, just Vue-flavored.
|
|
77
|
+
|
|
28
78
|
See the [OGrid docs](https://alaarab.github.io/ogrid/) for full documentation.
|
|
@@ -9,7 +9,7 @@
|
|
|
9
9
|
gap: 6px;
|
|
10
10
|
padding: 6px 12px;
|
|
11
11
|
border: 1px solid var(--ogrid-border, rgba(0, 0, 0, 0.12));
|
|
12
|
-
border-radius: 6px;
|
|
12
|
+
border-radius: var(--ogrid-radius-lg, 6px);
|
|
13
13
|
background: var(--ogrid-bg, #fff);
|
|
14
14
|
cursor: pointer;
|
|
15
15
|
font-size: 13px;
|
|
@@ -41,7 +41,7 @@
|
|
|
41
41
|
top: calc(100% + 4px);
|
|
42
42
|
min-width: 220px;
|
|
43
43
|
background: var(--ogrid-bg, #fff);
|
|
44
|
-
border-radius: 6px;
|
|
44
|
+
border-radius: var(--ogrid-radius-lg, 6px);
|
|
45
45
|
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
|
|
46
46
|
border: 1px solid var(--ogrid-border, rgba(0, 0, 0, 0.12));
|
|
47
47
|
display: flex;
|
|
@@ -80,7 +80,7 @@
|
|
|
80
80
|
width: 16px;
|
|
81
81
|
height: 16px;
|
|
82
82
|
border: 1px solid var(--ogrid-border, rgba(0, 0, 0, 0.12));
|
|
83
|
-
border-radius: 3px;
|
|
83
|
+
border-radius: var(--ogrid-radius-sm, 3px);
|
|
84
84
|
background: var(--ogrid-bg, #fff);
|
|
85
85
|
cursor: pointer;
|
|
86
86
|
flex-shrink: 0;
|
|
@@ -113,7 +113,7 @@
|
|
|
113
113
|
.clear-button {
|
|
114
114
|
padding: 6px 12px;
|
|
115
115
|
border: 1px solid var(--ogrid-border, rgba(0, 0, 0, 0.12));
|
|
116
|
-
border-radius: 4px;
|
|
116
|
+
border-radius: var(--ogrid-radius, 4px);
|
|
117
117
|
background: var(--ogrid-bg, #fff);
|
|
118
118
|
color: var(--ogrid-fg-secondary, rgba(0, 0, 0, 0.6));
|
|
119
119
|
font-size: 12px;
|
|
@@ -127,7 +127,7 @@
|
|
|
127
127
|
.select-all-button {
|
|
128
128
|
padding: 6px 16px;
|
|
129
129
|
border: none;
|
|
130
|
-
border-radius: 4px;
|
|
130
|
+
border-radius: var(--ogrid-radius, 4px);
|
|
131
131
|
background: var(--ogrid-accent, #0078d4);
|
|
132
132
|
color: #fff;
|
|
133
133
|
font-size: 12px;
|
package/dist/esm/ColumnChooser/ColumnChooser.vue?vue&type=style&index=0&scoped=9d3085bf&lang.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
.container[data-v-9d3085bf]{display:inline-flex;position:relative}.trigger-button[data-v-9d3085bf]{border:1px solid var(--ogrid-border,#0000001f);background:var(--ogrid-bg,#fff);cursor:pointer;color:var(--ogrid-fg,#000000de);
|
|
1
|
+
.container[data-v-9d3085bf]{display:inline-flex;position:relative}.trigger-button[data-v-9d3085bf]{border:1px solid var(--ogrid-border,#0000001f);border-radius:var(--ogrid-radius-lg,6px);background:var(--ogrid-bg,#fff);cursor:pointer;color:var(--ogrid-fg,#000000de);align-items:center;gap:6px;padding:6px 12px;font-size:13px;font-weight:600;transition:background .15s,border-color .15s;display:inline-flex}.trigger-button[data-v-9d3085bf]:hover{background:var(--ogrid-hover-bg,#0000000a);border-color:var(--ogrid-fg-muted,#00000080)}.trigger-button[aria-expanded=true][data-v-9d3085bf]{border-color:var(--ogrid-accent,#0078d4)}.button-icon[data-v-9d3085bf]{font-size:16px;line-height:1}.chevron[data-v-9d3085bf]{color:var(--ogrid-fg-muted,#00000080);font-size:12px}.dropdown[data-v-9d3085bf]{background:var(--ogrid-bg,#fff);border-radius:var(--ogrid-radius-lg,6px);border:1px solid var(--ogrid-border,#0000001f);z-index:50;flex-direction:column;min-width:220px;padding:0;display:flex;position:absolute;top:calc(100% + 4px);right:0;box-shadow:0 4px 16px #0000001f}.header[data-v-9d3085bf]{border-bottom:1px solid var(--ogrid-border,#0000001f);color:var(--ogrid-fg,#000000de);background:var(--ogrid-header-bg,#0000000a);padding:8px 12px;font-size:13px;font-weight:600}.options-list[data-v-9d3085bf]{max-height:320px;padding:0;overflow-y:auto}.option-item[data-v-9d3085bf]{align-items:center;gap:8px;min-height:32px;padding:4px 12px;display:flex}.option-item[data-v-9d3085bf]:hover{background:var(--ogrid-hover-bg,#0000000a)}.checkbox-input[data-v-9d3085bf]{border:1px solid var(--ogrid-border,#0000001f);border-radius:var(--ogrid-radius-sm,3px);background:var(--ogrid-bg,#fff);cursor:pointer;flex-shrink:0;width:16px;height:16px}.checkbox-input[data-v-9d3085bf]:checked{background:var(--ogrid-accent,#0078d4);border-color:var(--ogrid-accent,#0078d4)}.checkbox-input[data-v-9d3085bf]:disabled{opacity:.5;cursor:not-allowed}.checkbox-label[data-v-9d3085bf]{cursor:pointer;color:var(--ogrid-fg,#000000de);-webkit-user-select:none;user-select:none;font-size:13px}.actions[data-v-9d3085bf]{border-top:1px solid var(--ogrid-border,#0000001f);background:var(--ogrid-header-bg,#0000000a);justify-content:flex-end;gap:8px;padding:8px 12px;display:flex}.clear-button[data-v-9d3085bf]{border:1px solid var(--ogrid-border,#0000001f);border-radius:var(--ogrid-radius,4px);background:var(--ogrid-bg,#fff);color:var(--ogrid-fg-secondary,#0009);cursor:pointer;padding:6px 12px;font-size:12px}.clear-button[data-v-9d3085bf]:hover{background:var(--ogrid-hover-bg,#0000000a);color:var(--ogrid-fg,#000000de)}.select-all-button[data-v-9d3085bf]{border-radius:var(--ogrid-radius,4px);background:var(--ogrid-accent,#0078d4);color:#fff;cursor:pointer;border:none;padding:6px 16px;font-size:12px;font-weight:600}.select-all-button[data-v-9d3085bf]:hover{opacity:.85}
|
|
@@ -26,7 +26,7 @@
|
|
|
26
26
|
height: 24px;
|
|
27
27
|
padding: 4px;
|
|
28
28
|
border: none;
|
|
29
|
-
border-radius: 4px;
|
|
29
|
+
border-radius: var(--ogrid-radius, 4px);
|
|
30
30
|
background: transparent;
|
|
31
31
|
color: var(--ogrid-fg-muted, rgba(0, 0, 0, 0.5));
|
|
32
32
|
cursor: pointer;
|
|
@@ -60,7 +60,7 @@
|
|
|
60
60
|
width: 6px;
|
|
61
61
|
height: 6px;
|
|
62
62
|
background: var(--ogrid-accent, #0078d4);
|
|
63
|
-
border-radius: 50
|
|
63
|
+
border-radius: var(--ogrid-radius-full, 50%);
|
|
64
64
|
border: 1px solid var(--ogrid-bg, #fff);
|
|
65
65
|
}
|
|
66
66
|
|
|
@@ -78,7 +78,7 @@
|
|
|
78
78
|
.popover-content {
|
|
79
79
|
background: var(--ogrid-bg, #fff);
|
|
80
80
|
border: 1px solid var(--ogrid-border, rgba(0, 0, 0, 0.12));
|
|
81
|
-
border-radius: 8px;
|
|
81
|
+
border-radius: var(--ogrid-radius-xl, 8px);
|
|
82
82
|
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
|
|
83
83
|
overflow: hidden;
|
|
84
84
|
color: var(--ogrid-fg, rgba(0, 0, 0, 0.87));
|
|
@@ -102,7 +102,7 @@
|
|
|
102
102
|
width: 100%;
|
|
103
103
|
padding: 6px 10px;
|
|
104
104
|
border: 1px solid var(--ogrid-border, rgba(0, 0, 0, 0.12));
|
|
105
|
-
border-radius: 4px;
|
|
105
|
+
border-radius: var(--ogrid-radius, 4px);
|
|
106
106
|
font-size: 14px;
|
|
107
107
|
box-sizing: border-box;
|
|
108
108
|
background: var(--ogrid-bg, #fff);
|
|
@@ -135,7 +135,7 @@
|
|
|
135
135
|
font-weight: 500;
|
|
136
136
|
cursor: pointer;
|
|
137
137
|
padding: 4px 8px;
|
|
138
|
-
border-radius: 4px;
|
|
138
|
+
border-radius: var(--ogrid-radius, 4px);
|
|
139
139
|
}
|
|
140
140
|
.select-all-button:hover {
|
|
141
141
|
background: var(--ogrid-hover-bg, rgba(0, 0, 0, 0.04));
|
|
@@ -168,7 +168,7 @@
|
|
|
168
168
|
width: 16px;
|
|
169
169
|
height: 16px;
|
|
170
170
|
border: 1px solid var(--ogrid-border, rgba(0, 0, 0, 0.12));
|
|
171
|
-
border-radius: 3px;
|
|
171
|
+
border-radius: var(--ogrid-radius-sm, 3px);
|
|
172
172
|
cursor: pointer;
|
|
173
173
|
flex-shrink: 0;
|
|
174
174
|
}
|
|
@@ -185,7 +185,7 @@
|
|
|
185
185
|
.clear-button {
|
|
186
186
|
padding: 6px 12px;
|
|
187
187
|
border: 1px solid var(--ogrid-border, rgba(0, 0, 0, 0.12));
|
|
188
|
-
border-radius: 4px;
|
|
188
|
+
border-radius: var(--ogrid-radius, 4px);
|
|
189
189
|
background: var(--ogrid-bg, #fff);
|
|
190
190
|
color: var(--ogrid-fg-secondary, rgba(0, 0, 0, 0.6));
|
|
191
191
|
font-size: 12px;
|
|
@@ -209,7 +209,7 @@
|
|
|
209
209
|
.apply-button {
|
|
210
210
|
padding: 6px 16px;
|
|
211
211
|
border: none;
|
|
212
|
-
border-radius: 4px;
|
|
212
|
+
border-radius: var(--ogrid-radius, 4px);
|
|
213
213
|
background: var(--ogrid-accent, #0078d4);
|
|
214
214
|
color: #fff;
|
|
215
215
|
font-size: 12px;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
.column-header[data-v-7b7a41e5]{box-sizing:border-box;flex:1;align-items:center;gap:2px;min-width:0;display:flex}.column-name[data-v-7b7a41e5]{text-overflow:ellipsis;white-space:nowrap;min-width:0;color:var(--ogrid-fg,#000000de);flex:1;font-size:14px;font-weight:600;overflow:hidden}.filter-icon[data-v-7b7a41e5]{width:24px;height:24px;color:var(--ogrid-fg-muted,#00000080);cursor:pointer;background:0 0;border:none;
|
|
1
|
+
.column-header[data-v-7b7a41e5]{box-sizing:border-box;flex:1;align-items:center;gap:2px;min-width:0;display:flex}.column-name[data-v-7b7a41e5]{text-overflow:ellipsis;white-space:nowrap;min-width:0;color:var(--ogrid-fg,#000000de);flex:1;font-size:14px;font-weight:600;overflow:hidden}.filter-icon[data-v-7b7a41e5]{border-radius:var(--ogrid-radius,4px);width:24px;height:24px;color:var(--ogrid-fg-muted,#00000080);cursor:pointer;background:0 0;border:none;flex-shrink:0;justify-content:center;align-items:center;padding:4px;font-size:14px;display:flex;position:relative}@media (pointer:coarse){.filter-icon[data-v-7b7a41e5]{width:36px;height:36px;padding:6px}}.filter-icon[data-v-7b7a41e5]:hover{background:var(--ogrid-hover-bg,#0000000a);color:var(--ogrid-fg,#000000de)}.filter-icon.filter-active[data-v-7b7a41e5]{background:var(--ogrid-header-bg,#0000000a);color:var(--ogrid-accent,#0078d4)}.filter-icon.filter-open[data-v-7b7a41e5]{background:var(--ogrid-header-bg,#0000000a)}.filter-badge[data-v-7b7a41e5]{background:var(--ogrid-accent,#0078d4);border-radius:var(--ogrid-radius-full,50%);border:1px solid var(--ogrid-bg,#fff);width:6px;height:6px;position:absolute;top:2px;right:2px}.popover-content[data-v-7b7a41e5]{z-index:1000;min-width:280px;max-width:320px}@media (width<=360px){.popover-content[data-v-7b7a41e5]{min-width:calc(100vw - 24px);max-width:calc(100vw - 24px)}}.popover-content[data-v-7b7a41e5]{background:var(--ogrid-bg,#fff);border:1px solid var(--ogrid-border,#0000001f);border-radius:var(--ogrid-radius-xl,8px);color:var(--ogrid-fg,#000000de);overflow:hidden;box-shadow:0 4px 16px #0000001f}.popover-header[data-v-7b7a41e5]{color:var(--ogrid-fg-muted,#00000080);border-bottom:1px solid var(--ogrid-border,#0000001f);background:var(--ogrid-header-bg,#0000000a);padding:10px 14px;font-size:12px;font-weight:600}.popover-search[data-v-7b7a41e5]{border-bottom:1px solid var(--ogrid-border,#0000001f);padding:10px 12px}.search-input[data-v-7b7a41e5]{border:1px solid var(--ogrid-border,#0000001f);border-radius:var(--ogrid-radius,4px);box-sizing:border-box;background:var(--ogrid-bg,#fff);width:100%;color:var(--ogrid-fg,#000000de);padding:6px 10px;font-size:14px}.search-input[data-v-7b7a41e5]:focus{border-color:var(--ogrid-accent,#0078d4);outline:none}.result-count[data-v-7b7a41e5]{color:var(--ogrid-fg-muted,#00000080);margin-top:6px;font-size:11px}.select-all-row[data-v-7b7a41e5]{border-bottom:1px solid var(--ogrid-border,#0000001f);background:var(--ogrid-header-bg,#0000000a);gap:8px;padding:6px 12px;display:flex}.select-all-button[data-v-7b7a41e5]{color:var(--ogrid-accent,#0078d4);cursor:pointer;border-radius:var(--ogrid-radius,4px);background:0 0;border:none;padding:4px 8px;font-size:12px;font-weight:500}.select-all-button[data-v-7b7a41e5]:hover{background:var(--ogrid-hover-bg,#0000000a)}.popover-options[data-v-7b7a41e5]{max-height:250px;padding:6px 0;overflow-y:auto}.popover-option[data-v-7b7a41e5]{color:var(--ogrid-fg,#000000de);align-items:center;gap:8px;padding:4px 12px;font-size:13px;display:flex}@media (pointer:coarse){.popover-option[data-v-7b7a41e5]{min-height:44px}}.popover-option[data-v-7b7a41e5]:hover{background:var(--ogrid-hover-bg,#0000000a)}.filter-checkbox[data-v-7b7a41e5]{border:1px solid var(--ogrid-border,#0000001f);border-radius:var(--ogrid-radius-sm,3px);cursor:pointer;flex-shrink:0;width:16px;height:16px}.popover-actions[data-v-7b7a41e5]{border-top:1px solid var(--ogrid-border,#0000001f);background:var(--ogrid-header-bg,#0000000a);justify-content:flex-end;gap:8px;padding:8px 12px;display:flex}.clear-button[data-v-7b7a41e5]{border:1px solid var(--ogrid-border,#0000001f);border-radius:var(--ogrid-radius,4px);background:var(--ogrid-bg,#fff);color:var(--ogrid-fg-secondary,#0009);cursor:pointer;padding:6px 12px;font-size:12px}@media (pointer:coarse){.clear-button[data-v-7b7a41e5]{min-height:44px;padding:10px 16px}}.clear-button[data-v-7b7a41e5]:hover{background:var(--ogrid-hover-bg,#0000000a);color:var(--ogrid-fg,#000000de)}.clear-button[data-v-7b7a41e5]:disabled{opacity:.5;cursor:not-allowed}.apply-button[data-v-7b7a41e5]{border-radius:var(--ogrid-radius,4px);background:var(--ogrid-accent,#0078d4);color:#fff;cursor:pointer;border:none;padding:6px 16px;font-size:12px;font-weight:600}@media (pointer:coarse){.apply-button[data-v-7b7a41e5]{min-height:44px;padding:10px 20px}}.apply-button[data-v-7b7a41e5]:hover{opacity:.85}.loading-container[data-v-7b7a41e5],.no-results[data-v-7b7a41e5]{text-align:center;color:var(--ogrid-fg-secondary,#0009);padding:20px;font-size:13px}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
.column-header[data-v-b40a6834]{box-sizing:border-box;flex:1;align-items:center;gap:2px;min-width:0;display:flex}.column-name[data-v-b40a6834]{text-overflow:ellipsis;white-space:nowrap;min-width:0;color:var(--ogrid-fg,#000000de);flex:1;font-size:14px;font-weight:600;overflow:hidden}.filter-icon[data-v-b40a6834]{width:24px;height:24px;color:var(--ogrid-fg-muted,#00000080);cursor:pointer;background:0 0;border:none;
|
|
1
|
+
.column-header[data-v-b40a6834]{box-sizing:border-box;flex:1;align-items:center;gap:2px;min-width:0;display:flex}.column-name[data-v-b40a6834]{text-overflow:ellipsis;white-space:nowrap;min-width:0;color:var(--ogrid-fg,#000000de);flex:1;font-size:14px;font-weight:600;overflow:hidden}.filter-icon[data-v-b40a6834]{border-radius:var(--ogrid-radius,4px);width:24px;height:24px;color:var(--ogrid-fg-muted,#00000080);cursor:pointer;background:0 0;border:none;flex-shrink:0;justify-content:center;align-items:center;padding:4px;font-size:14px;display:flex;position:relative}@media (pointer:coarse){.filter-icon[data-v-b40a6834]{width:36px;height:36px;padding:6px}}.filter-icon[data-v-b40a6834]:hover{background:var(--ogrid-hover-bg,#0000000a);color:var(--ogrid-fg,#000000de)}.filter-icon.filter-active[data-v-b40a6834]{background:var(--ogrid-header-bg,#0000000a);color:var(--ogrid-accent,#0078d4)}.filter-icon.filter-open[data-v-b40a6834]{background:var(--ogrid-header-bg,#0000000a)}.filter-badge[data-v-b40a6834]{background:var(--ogrid-accent,#0078d4);border-radius:var(--ogrid-radius-full,50%);border:1px solid var(--ogrid-bg,#fff);width:6px;height:6px;position:absolute;top:2px;right:2px}.popover-content[data-v-b40a6834]{z-index:1000;min-width:280px;max-width:320px}@media (width<=360px){.popover-content[data-v-b40a6834]{min-width:calc(100vw - 24px);max-width:calc(100vw - 24px)}}.popover-content[data-v-b40a6834]{background:var(--ogrid-bg,#fff);border:1px solid var(--ogrid-border,#0000001f);border-radius:var(--ogrid-radius-xl,8px);color:var(--ogrid-fg,#000000de);overflow:hidden;box-shadow:0 4px 16px #0000001f}.popover-header[data-v-b40a6834]{color:var(--ogrid-fg-muted,#00000080);border-bottom:1px solid var(--ogrid-border,#0000001f);background:var(--ogrid-header-bg,#0000000a);padding:10px 14px;font-size:12px;font-weight:600}.popover-search[data-v-b40a6834]{border-bottom:1px solid var(--ogrid-border,#0000001f);padding:10px 12px}.search-input[data-v-b40a6834]{border:1px solid var(--ogrid-border,#0000001f);border-radius:var(--ogrid-radius,4px);box-sizing:border-box;background:var(--ogrid-bg,#fff);width:100%;color:var(--ogrid-fg,#000000de);padding:6px 10px;font-size:14px}.search-input[data-v-b40a6834]:focus{border-color:var(--ogrid-accent,#0078d4);outline:none}.result-count[data-v-b40a6834]{color:var(--ogrid-fg-muted,#00000080);margin-top:6px;font-size:11px}.select-all-row[data-v-b40a6834]{border-bottom:1px solid var(--ogrid-border,#0000001f);background:var(--ogrid-header-bg,#0000000a);gap:8px;padding:6px 12px;display:flex}.select-all-button[data-v-b40a6834]{color:var(--ogrid-accent,#0078d4);cursor:pointer;border-radius:var(--ogrid-radius,4px);background:0 0;border:none;padding:4px 8px;font-size:12px;font-weight:500}.select-all-button[data-v-b40a6834]:hover{background:var(--ogrid-hover-bg,#0000000a)}.popover-options[data-v-b40a6834]{max-height:250px;padding:6px 0;overflow-y:auto}.popover-option[data-v-b40a6834]{color:var(--ogrid-fg,#000000de);align-items:center;gap:8px;padding:4px 12px;font-size:13px;display:flex}@media (pointer:coarse){.popover-option[data-v-b40a6834]{min-height:44px}}.popover-option[data-v-b40a6834]:hover{background:var(--ogrid-hover-bg,#0000000a)}.filter-checkbox[data-v-b40a6834]{border:1px solid var(--ogrid-border,#0000001f);border-radius:var(--ogrid-radius-sm,3px);cursor:pointer;flex-shrink:0;width:16px;height:16px}.popover-actions[data-v-b40a6834]{border-top:1px solid var(--ogrid-border,#0000001f);background:var(--ogrid-header-bg,#0000000a);justify-content:flex-end;gap:8px;padding:8px 12px;display:flex}.clear-button[data-v-b40a6834]{border:1px solid var(--ogrid-border,#0000001f);border-radius:var(--ogrid-radius,4px);background:var(--ogrid-bg,#fff);color:var(--ogrid-fg-secondary,#0009);cursor:pointer;padding:6px 12px;font-size:12px}@media (pointer:coarse){.clear-button[data-v-b40a6834]{min-height:44px;padding:10px 16px}}.clear-button[data-v-b40a6834]:hover{background:var(--ogrid-hover-bg,#0000000a);color:var(--ogrid-fg,#000000de)}.clear-button[data-v-b40a6834]:disabled{opacity:.5;cursor:not-allowed}.apply-button[data-v-b40a6834]{border-radius:var(--ogrid-radius,4px);background:var(--ogrid-accent,#0078d4);color:#fff;cursor:pointer;border:none;padding:6px 16px;font-size:12px;font-weight:600}@media (pointer:coarse){.apply-button[data-v-b40a6834]{min-height:44px;padding:10px 20px}}.apply-button[data-v-b40a6834]:hover{opacity:.85}.loading-container[data-v-b40a6834],.no-results[data-v-b40a6834]{text-align:center;color:var(--ogrid-fg-secondary,#0009);padding:20px;font-size:13px}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import e from "../_virtual/_plugin-vue_export-helper.js";
|
|
2
2
|
import t from "./PeopleFilterPopover.vue_vue_type_script_setup_true_lang.js";
|
|
3
3
|
/* empty css */
|
|
4
|
-
var o = /* @__PURE__ */ e(t, [["__scopeId", "data-v-
|
|
4
|
+
var o = /* @__PURE__ */ e(t, [["__scopeId", "data-v-92fea036"]]);
|
|
5
5
|
export {
|
|
6
6
|
o as default
|
|
7
7
|
};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
.column-header[data-v-92fea036]{box-sizing:border-box;flex:1;align-items:center;gap:2px;min-width:0;display:flex}.column-name[data-v-92fea036]{text-overflow:ellipsis;white-space:nowrap;min-width:0;color:var(--ogrid-fg,#000000de);flex:1;font-size:14px;font-weight:600;overflow:hidden}.filter-icon[data-v-92fea036]{border-radius:var(--ogrid-radius,4px);width:24px;height:24px;color:var(--ogrid-fg-muted,#00000080);cursor:pointer;background:0 0;border:none;flex-shrink:0;justify-content:center;align-items:center;padding:4px;font-size:14px;display:flex;position:relative}@media (pointer:coarse){.filter-icon[data-v-92fea036]{width:36px;height:36px;padding:6px}}.filter-icon[data-v-92fea036]:hover{background:var(--ogrid-hover-bg,#0000000a);color:var(--ogrid-fg,#000000de)}.filter-icon.filter-active[data-v-92fea036]{background:var(--ogrid-header-bg,#0000000a);color:var(--ogrid-accent,#0078d4)}.filter-icon.filter-open[data-v-92fea036]{background:var(--ogrid-header-bg,#0000000a)}.filter-badge[data-v-92fea036]{background:var(--ogrid-accent,#0078d4);border-radius:var(--ogrid-radius-full,50%);border:1px solid var(--ogrid-bg,#fff);width:6px;height:6px;position:absolute;top:2px;right:2px}.popover-content[data-v-92fea036]{z-index:1000;min-width:280px;max-width:320px}@media (width<=360px){.popover-content[data-v-92fea036]{min-width:calc(100vw - 24px);max-width:calc(100vw - 24px)}}.popover-content[data-v-92fea036]{background:var(--ogrid-bg,#fff);border:1px solid var(--ogrid-border,#0000001f);border-radius:var(--ogrid-radius-xl,8px);color:var(--ogrid-fg,#000000de);overflow:hidden;box-shadow:0 4px 16px #0000001f}.popover-header[data-v-92fea036]{color:var(--ogrid-fg-muted,#00000080);border-bottom:1px solid var(--ogrid-border,#0000001f);background:var(--ogrid-header-bg,#0000000a);padding:10px 14px;font-size:12px;font-weight:600}.popover-search[data-v-92fea036]{border-bottom:1px solid var(--ogrid-border,#0000001f);padding:10px 12px}.search-input[data-v-92fea036]{border:1px solid var(--ogrid-border,#0000001f);border-radius:var(--ogrid-radius,4px);box-sizing:border-box;background:var(--ogrid-bg,#fff);width:100%;color:var(--ogrid-fg,#000000de);padding:6px 10px;font-size:14px}.search-input[data-v-92fea036]:focus{border-color:var(--ogrid-accent,#0078d4);outline:none}.result-count[data-v-92fea036]{color:var(--ogrid-fg-muted,#00000080);margin-top:6px;font-size:11px}.select-all-row[data-v-92fea036]{border-bottom:1px solid var(--ogrid-border,#0000001f);background:var(--ogrid-header-bg,#0000000a);gap:8px;padding:6px 12px;display:flex}.select-all-button[data-v-92fea036]{color:var(--ogrid-accent,#0078d4);cursor:pointer;border-radius:var(--ogrid-radius,4px);background:0 0;border:none;padding:4px 8px;font-size:12px;font-weight:500}.select-all-button[data-v-92fea036]:hover{background:var(--ogrid-hover-bg,#0000000a)}.popover-options[data-v-92fea036]{max-height:250px;padding:6px 0;overflow-y:auto}.popover-option[data-v-92fea036]{color:var(--ogrid-fg,#000000de);align-items:center;gap:8px;padding:4px 12px;font-size:13px;display:flex}@media (pointer:coarse){.popover-option[data-v-92fea036]{min-height:44px}}.popover-option[data-v-92fea036]:hover{background:var(--ogrid-hover-bg,#0000000a)}.filter-checkbox[data-v-92fea036]{border:1px solid var(--ogrid-border,#0000001f);border-radius:var(--ogrid-radius-sm,3px);cursor:pointer;flex-shrink:0;width:16px;height:16px}.popover-actions[data-v-92fea036]{border-top:1px solid var(--ogrid-border,#0000001f);background:var(--ogrid-header-bg,#0000000a);justify-content:flex-end;gap:8px;padding:8px 12px;display:flex}.clear-button[data-v-92fea036]{border:1px solid var(--ogrid-border,#0000001f);border-radius:var(--ogrid-radius,4px);background:var(--ogrid-bg,#fff);color:var(--ogrid-fg-secondary,#0009);cursor:pointer;padding:6px 12px;font-size:12px}@media (pointer:coarse){.clear-button[data-v-92fea036]{min-height:44px;padding:10px 16px}}.clear-button[data-v-92fea036]:hover{background:var(--ogrid-hover-bg,#0000000a);color:var(--ogrid-fg,#000000de)}.clear-button[data-v-92fea036]:disabled{opacity:.5;cursor:not-allowed}.apply-button[data-v-92fea036]{border-radius:var(--ogrid-radius,4px);background:var(--ogrid-accent,#0078d4);color:#fff;cursor:pointer;border:none;padding:6px 16px;font-size:12px;font-weight:600}@media (pointer:coarse){.apply-button[data-v-92fea036]{min-height:44px;padding:10px 20px}}.apply-button[data-v-92fea036]:hover{opacity:.85}.loading-container[data-v-92fea036],.no-results[data-v-92fea036]{text-align:center;color:var(--ogrid-fg-secondary,#0009);padding:20px;font-size:13px}.selected-user-section[data-v-92fea036]{border-bottom:1px solid var(--ogrid-border,#e0e0e0);padding:8px 12px}.selected-user-label[data-v-92fea036]{color:var(--ogrid-muted,#666);margin-bottom:4px;font-size:11px}.selected-user[data-v-92fea036]{justify-content:space-between;align-items:center;gap:8px;display:flex}.user-info[data-v-92fea036]{align-items:center;gap:8px;min-width:0;display:flex}.user-text[data-v-92fea036]{min-width:0;font-size:13px}.user-text .user-secondary[data-v-92fea036]{color:var(--ogrid-muted,#666);font-size:12px}.remove-user-button[data-v-92fea036]{cursor:pointer;color:var(--ogrid-muted,#666);background:0 0;border:none;flex-shrink:0;padding:4px}.remove-user-button[data-v-92fea036]:hover{color:var(--ogrid-fg,#333)}.native-input-wrapper[data-v-92fea036]{border:1px solid var(--ogrid-border,#d1d1d1);border-radius:var(--ogrid-radius,4px);background:var(--ogrid-bg,#fff);box-sizing:border-box;align-items:center;gap:8px;width:100%;min-height:36px;padding:6px 12px;display:flex}.native-input-wrapper[data-v-92fea036]:focus-within{border-color:var(--ogrid-primary,#06c);outline:none}.native-input[data-v-92fea036]{min-width:0;color:var(--ogrid-fg,#242424);background:0 0;border:none;outline:none;flex:1;padding:0;font-family:inherit;font-size:14px}.native-input[data-v-92fea036]::placeholder{color:var(--ogrid-muted,#707070)}.person-option[data-v-92fea036]{cursor:pointer;padding:8px 12px}.person-option[data-v-92fea036]:hover{background:var(--ogrid-bg-hover,#f5f5f5)}
|
package/dist/esm/ColumnHeaderFilter/PeopleFilterPopover.vue_vue_type_script_setup_true_lang.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { Fragment as
|
|
1
|
+
import { Fragment as v, createCommentVNode as d, createElementBlock as r, createElementVNode as t, defineComponent as h, openBlock as i, renderList as y, toDisplayString as o, withKeys as g } from "vue";
|
|
2
2
|
var m = {
|
|
3
3
|
key: 0,
|
|
4
4
|
class: "selected-user-section"
|
|
@@ -8,7 +8,7 @@ var m = {
|
|
|
8
8
|
style: {
|
|
9
9
|
width: "32px",
|
|
10
10
|
height: "32px",
|
|
11
|
-
"border-radius": "50%",
|
|
11
|
+
"border-radius": "var(--ogrid-radius-full, 50%)",
|
|
12
12
|
background: "var(--ogrid-border, #e0e0e0)",
|
|
13
13
|
display: "flex",
|
|
14
14
|
"align-items": "center",
|
|
@@ -26,7 +26,7 @@ var m = {
|
|
|
26
26
|
style: {
|
|
27
27
|
width: "32px",
|
|
28
28
|
height: "32px",
|
|
29
|
-
"border-radius": "50%",
|
|
29
|
+
"border-radius": "var(--ogrid-radius-full, 50%)",
|
|
30
30
|
background: "var(--ogrid-border, #e0e0e0)",
|
|
31
31
|
display: "flex",
|
|
32
32
|
"align-items": "center",
|
|
@@ -52,8 +52,8 @@ var m = {
|
|
|
52
52
|
inputRef: {}
|
|
53
53
|
},
|
|
54
54
|
setup(e) {
|
|
55
|
-
const
|
|
56
|
-
return (
|
|
55
|
+
const n = (l) => l.displayName?.charAt(0) ?? "?", c = (l) => l.id ?? l.email ?? l.displayName ?? "";
|
|
56
|
+
return (l, a) => (i(), r("div", null, [
|
|
57
57
|
e.selectedUser ? (i(), r("div", m, [a[3] || (a[3] = t("div", { class: "selected-user-label" }, "Currently filtered by:", -1)), t("div", f, [t("div", b, [e.selectedUser.photo ? (i(), r("img", {
|
|
58
58
|
key: 0,
|
|
59
59
|
src: e.selectedUser.photo,
|
|
@@ -61,7 +61,7 @@ var m = {
|
|
|
61
61
|
width: "32",
|
|
62
62
|
height: "32",
|
|
63
63
|
style: { "border-radius": "50%" }
|
|
64
|
-
}, null, 8, k)) : (i(), r("span", p, o(
|
|
64
|
+
}, null, 8, k)) : (i(), r("span", p, o(n(e.selectedUser)), 1)), t("div", x, [t("div", null, o(e.selectedUser.displayName), 1), t("div", U, o(e.selectedUser.email), 1)])]), t("button", {
|
|
65
65
|
type: "button",
|
|
66
66
|
class: "remove-user-button",
|
|
67
67
|
onClick: a[0] || (a[0] = (...s) => e.onClearUser && e.onClearUser(...s)),
|
|
@@ -76,11 +76,11 @@ var m = {
|
|
|
76
76
|
onInput: a[1] || (a[1] = (s) => e.onSearchChange(s.target.value)),
|
|
77
77
|
autocomplete: "off"
|
|
78
78
|
}, null, 40, S)])]),
|
|
79
|
-
t("div", F, [e.isLoading && e.searchText.trim() ? (i(), r("div", N, " Searching... ")) : e.suggestions.length === 0 && e.searchText.trim() ? (i(), r("div", T, " No results found ")) : e.searchText.trim() ? (i(!0), r(
|
|
79
|
+
t("div", F, [e.isLoading && e.searchText.trim() ? (i(), r("div", N, " Searching... ")) : e.suggestions.length === 0 && e.searchText.trim() ? (i(), r("div", T, " No results found ")) : e.searchText.trim() ? (i(!0), r(v, { key: 2 }, y(e.suggestions, (s) => (i(), r("div", {
|
|
80
80
|
key: c(s),
|
|
81
81
|
class: "person-option",
|
|
82
|
-
onClick: (
|
|
83
|
-
onKeydown: g((
|
|
82
|
+
onClick: (u) => e.onUserSelect(s),
|
|
83
|
+
onKeydown: g((u) => e.onUserSelect(s), ["enter"]),
|
|
84
84
|
role: "button",
|
|
85
85
|
tabindex: "0"
|
|
86
86
|
}, [t("div", P, [s.photo ? (i(), r("img", {
|
|
@@ -90,7 +90,7 @@ var m = {
|
|
|
90
90
|
width: "32",
|
|
91
91
|
height: "32",
|
|
92
92
|
style: { "border-radius": "50%" }
|
|
93
|
-
}, null, 8, _)) : (i(), r("span", B, o(
|
|
93
|
+
}, null, 8, _)) : (i(), r("span", B, o(n(s)), 1)), t("div", L, [t("div", null, o(s.displayName), 1), t("div", R, o(s.email), 1)])])], 40, K))), 128)) : (i(), r("div", j, "Type to search..."))]),
|
|
94
94
|
e.selectedUser ? (i(), r("div", z, [t("button", {
|
|
95
95
|
type: "button",
|
|
96
96
|
class: "clear-button",
|
|
@@ -1 +1 @@
|
|
|
1
|
-
.column-header[data-v-0baa080d]{box-sizing:border-box;flex:1;align-items:center;gap:2px;min-width:0;display:flex}.column-name[data-v-0baa080d]{text-overflow:ellipsis;white-space:nowrap;min-width:0;color:var(--ogrid-fg,#000000de);flex:1;font-size:14px;font-weight:600;overflow:hidden}.filter-icon[data-v-0baa080d]{width:24px;height:24px;color:var(--ogrid-fg-muted,#00000080);cursor:pointer;background:0 0;border:none;
|
|
1
|
+
.column-header[data-v-0baa080d]{box-sizing:border-box;flex:1;align-items:center;gap:2px;min-width:0;display:flex}.column-name[data-v-0baa080d]{text-overflow:ellipsis;white-space:nowrap;min-width:0;color:var(--ogrid-fg,#000000de);flex:1;font-size:14px;font-weight:600;overflow:hidden}.filter-icon[data-v-0baa080d]{border-radius:var(--ogrid-radius,4px);width:24px;height:24px;color:var(--ogrid-fg-muted,#00000080);cursor:pointer;background:0 0;border:none;flex-shrink:0;justify-content:center;align-items:center;padding:4px;font-size:14px;display:flex;position:relative}@media (pointer:coarse){.filter-icon[data-v-0baa080d]{width:36px;height:36px;padding:6px}}.filter-icon[data-v-0baa080d]:hover{background:var(--ogrid-hover-bg,#0000000a);color:var(--ogrid-fg,#000000de)}.filter-icon.filter-active[data-v-0baa080d]{background:var(--ogrid-header-bg,#0000000a);color:var(--ogrid-accent,#0078d4)}.filter-icon.filter-open[data-v-0baa080d]{background:var(--ogrid-header-bg,#0000000a)}.filter-badge[data-v-0baa080d]{background:var(--ogrid-accent,#0078d4);border-radius:var(--ogrid-radius-full,50%);border:1px solid var(--ogrid-bg,#fff);width:6px;height:6px;position:absolute;top:2px;right:2px}.popover-content[data-v-0baa080d]{z-index:1000;min-width:280px;max-width:320px}@media (width<=360px){.popover-content[data-v-0baa080d]{min-width:calc(100vw - 24px);max-width:calc(100vw - 24px)}}.popover-content[data-v-0baa080d]{background:var(--ogrid-bg,#fff);border:1px solid var(--ogrid-border,#0000001f);border-radius:var(--ogrid-radius-xl,8px);color:var(--ogrid-fg,#000000de);overflow:hidden;box-shadow:0 4px 16px #0000001f}.popover-header[data-v-0baa080d]{color:var(--ogrid-fg-muted,#00000080);border-bottom:1px solid var(--ogrid-border,#0000001f);background:var(--ogrid-header-bg,#0000000a);padding:10px 14px;font-size:12px;font-weight:600}.popover-search[data-v-0baa080d]{border-bottom:1px solid var(--ogrid-border,#0000001f);padding:10px 12px}.search-input[data-v-0baa080d]{border:1px solid var(--ogrid-border,#0000001f);border-radius:var(--ogrid-radius,4px);box-sizing:border-box;background:var(--ogrid-bg,#fff);width:100%;color:var(--ogrid-fg,#000000de);padding:6px 10px;font-size:14px}.search-input[data-v-0baa080d]:focus{border-color:var(--ogrid-accent,#0078d4);outline:none}.result-count[data-v-0baa080d]{color:var(--ogrid-fg-muted,#00000080);margin-top:6px;font-size:11px}.select-all-row[data-v-0baa080d]{border-bottom:1px solid var(--ogrid-border,#0000001f);background:var(--ogrid-header-bg,#0000000a);gap:8px;padding:6px 12px;display:flex}.select-all-button[data-v-0baa080d]{color:var(--ogrid-accent,#0078d4);cursor:pointer;border-radius:var(--ogrid-radius,4px);background:0 0;border:none;padding:4px 8px;font-size:12px;font-weight:500}.select-all-button[data-v-0baa080d]:hover{background:var(--ogrid-hover-bg,#0000000a)}.popover-options[data-v-0baa080d]{max-height:250px;padding:6px 0;overflow-y:auto}.popover-option[data-v-0baa080d]{color:var(--ogrid-fg,#000000de);align-items:center;gap:8px;padding:4px 12px;font-size:13px;display:flex}@media (pointer:coarse){.popover-option[data-v-0baa080d]{min-height:44px}}.popover-option[data-v-0baa080d]:hover{background:var(--ogrid-hover-bg,#0000000a)}.filter-checkbox[data-v-0baa080d]{border:1px solid var(--ogrid-border,#0000001f);border-radius:var(--ogrid-radius-sm,3px);cursor:pointer;flex-shrink:0;width:16px;height:16px}.popover-actions[data-v-0baa080d]{border-top:1px solid var(--ogrid-border,#0000001f);background:var(--ogrid-header-bg,#0000000a);justify-content:flex-end;gap:8px;padding:8px 12px;display:flex}.clear-button[data-v-0baa080d]{border:1px solid var(--ogrid-border,#0000001f);border-radius:var(--ogrid-radius,4px);background:var(--ogrid-bg,#fff);color:var(--ogrid-fg-secondary,#0009);cursor:pointer;padding:6px 12px;font-size:12px}@media (pointer:coarse){.clear-button[data-v-0baa080d]{min-height:44px;padding:10px 16px}}.clear-button[data-v-0baa080d]:hover{background:var(--ogrid-hover-bg,#0000000a);color:var(--ogrid-fg,#000000de)}.clear-button[data-v-0baa080d]:disabled{opacity:.5;cursor:not-allowed}.apply-button[data-v-0baa080d]{border-radius:var(--ogrid-radius,4px);background:var(--ogrid-accent,#0078d4);color:#fff;cursor:pointer;border:none;padding:6px 16px;font-size:12px;font-weight:600}@media (pointer:coarse){.apply-button[data-v-0baa080d]{min-height:44px;padding:10px 20px}}.apply-button[data-v-0baa080d]:hover{opacity:.85}.loading-container[data-v-0baa080d],.no-results[data-v-0baa080d]{text-align:center;color:var(--ogrid-fg-secondary,#0009);padding:20px;font-size:13px}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import e from "../_virtual/_plugin-vue_export-helper.js";
|
|
2
2
|
import _ from "./ColumnHeaderMenu.vue_vue_type_script_setup_true_lang.js";
|
|
3
3
|
/* empty css */
|
|
4
|
-
var
|
|
4
|
+
var r = /* @__PURE__ */ e(_, [["__scopeId", "data-v-8a52b4a6"]]);
|
|
5
5
|
export {
|
|
6
|
-
|
|
6
|
+
r as default
|
|
7
7
|
};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
.ogrid-column-header-menu[data-v-8a52b4a6]{z-index:9999;background-color:var(--ogrid-bg,#fff);color:var(--ogrid-fg,#000000de);border:1px solid var(--ogrid-border,#0000001f);border-radius:var(--ogrid-radius,4px);min-width:160px;padding:4px 0;position:fixed;box-shadow:0 2px 8px #00000026}.ogrid-column-header-menu-item[data-v-8a52b4a6]{cursor:pointer;color:var(--ogrid-fg,#000000de);align-items:center;padding:6px 12px;font-size:.875rem;display:flex}.ogrid-column-header-menu-item[data-v-8a52b4a6]:hover:not(.disabled){background-color:var(--ogrid-hover-bg,#0000000a)}.ogrid-column-header-menu-item.disabled[data-v-8a52b4a6]{cursor:default;opacity:.4}.ogrid-column-header-menu-divider[data-v-8a52b4a6]{background-color:var(--ogrid-border,#0000001f);height:1px;margin:4px 0}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
:where(:root){--ogrid-cell-padding:6px 10px;--ogrid-cell-padding-vertical:6px;--ogrid-cell-padding-horizontal:10px;--ogrid-bg:#fff;--ogrid-fg:#000000de;--ogrid-fg-secondary:#0009;--ogrid-fg-muted:#00000080;--ogrid-border:#0000001f;--ogrid-border-strong:#00000080;--ogrid-border-hover:#0000004d;--ogrid-header-bg:#f5f5f5;--ogrid-hover-bg:#0000000a;--ogrid-selected-row-bg:#e6f0fb;--ogrid-bg-selected-hover:#dae8f8;--ogrid-active-cell-bg:#00000005;--ogrid-range-bg:#2173461f;--ogrid-accent:#0078d4;--ogrid-accent-dark:#005a9e;--ogrid-selection-color:#217346;--ogrid-primary:#0078d4;--ogrid-primary-fg:#fff;--ogrid-primary-hover:#106ebe;--ogrid-bg-subtle:#f5f5f5;--ogrid-bg-hover:#0000000a;--ogrid-active-bg:#0000000f;--ogrid-muted:#00000080;--ogrid-shadow:0 4px 16px #0000001f;--ogrid-shadow-sm:0 2px 4px #00000014;--ogrid-pinned-shadow:#0000001a;--ogrid-loading-overlay:#ffffffb3;--ogrid-selection:#217346;--ogrid-bg-range:#2173461f;--ogrid-bg-selected:#e6f0fb;--ogrid-loading-bg:#ffffffb3}@media (prefers-color-scheme:dark){:where(:root:not([data-theme=light])){--ogrid-bg:#1e1e1e;--ogrid-fg:#ffffffde;--ogrid-fg-secondary:#fff9;--ogrid-fg-muted:#ffffff80;--ogrid-border:#ffffff1f;--ogrid-border-strong:#ffffff80;--ogrid-border-hover:#ffffff4d;--ogrid-header-bg:#2c2c2c;--ogrid-hover-bg:#ffffff14;--ogrid-selected-row-bg:#1a3a5c;--ogrid-bg-selected-hover:#1f3650;--ogrid-active-cell-bg:#ffffff0f;--ogrid-range-bg:#2ea04326;--ogrid-accent:#4da6ff;--ogrid-accent-dark:#3390e0;--ogrid-selection-color:#2ea043;--ogrid-primary:#4da6ff;--ogrid-primary-fg:#fff;--ogrid-primary-hover:#66b3ff;--ogrid-bg-subtle:#ffffff0a;--ogrid-bg-hover:#ffffff14;--ogrid-active-bg:#ffffff14;--ogrid-muted:#ffffff80;--ogrid-shadow:0 4px 16px #0006;--ogrid-shadow-sm:0 2px 4px #00000040;--ogrid-pinned-shadow:#0000004d;--ogrid-loading-overlay:#000000b3;--ogrid-selection:#2ea043;--ogrid-bg-range:#2ea04326;--ogrid-bg-selected:#1a3a5c;--ogrid-loading-bg:#000000b3}}:where([data-theme=dark]){--ogrid-bg:#1e1e1e;--ogrid-fg:#ffffffde;--ogrid-fg-secondary:#fff9;--ogrid-fg-muted:#ffffff80;--ogrid-border:#ffffff1f;--ogrid-border-strong:#ffffff80;--ogrid-border-hover:#ffffff4d;--ogrid-header-bg:#2c2c2c;--ogrid-hover-bg:#ffffff14;--ogrid-selected-row-bg:#1a3a5c;--ogrid-bg-selected-hover:#1f3650;--ogrid-active-cell-bg:#ffffff0f;--ogrid-range-bg:#2ea04326;--ogrid-accent:#4da6ff;--ogrid-accent-dark:#3390e0;--ogrid-selection-color:#2ea043;--ogrid-primary:#4da6ff;--ogrid-primary-fg:#fff;--ogrid-primary-hover:#66b3ff;--ogrid-bg-subtle:#ffffff0a;--ogrid-bg-hover:#ffffff14;--ogrid-active-bg:#ffffff14;--ogrid-muted:#ffffff80;--ogrid-shadow:0 4px 16px #0006;--ogrid-shadow-sm:0 2px 4px #00000040;--ogrid-pinned-shadow:#0000004d;--ogrid-loading-overlay:#000000b3;--ogrid-selection:#2ea043;--ogrid-bg-range:#2ea04326;--ogrid-bg-selected:#1a3a5c;--ogrid-loading-bg:#000000b3}[role=region][tabindex="0"]{outline:none}.ogrid-outer-container .ogrid-cell-in-range{background:var(--ogrid-bg-range,#2173461f)}.ogrid-outer-container .ogrid-cell-cut{background:var(--ogrid-hover-bg);opacity:.7}.ogrid-outer-container [data-drag-range]{background:var(--ogrid-range-bg,#2173461f)}.ogrid-outer-container [data-drag-anchor]{background:var(--ogrid-bg)}.ogrid-outer-container{background-color:var(--ogrid-bg);min-height:0;color:var(--ogrid-fg);flex-direction:column;flex:1;display:flex;position:relative}.ogrid-scroll-wrapper{flex-direction:column;min-height:100%;display:flex}.ogrid-table-container{position:relative}.ogrid-table-container--loading{opacity:.6}.ogrid-table{border-collapse:collapse;background-color:var(--ogrid-bg);width:100%;color:var(--ogrid-fg);font-size:.875rem}.ogrid-table tr th:first-child,.ogrid-table tr td:first-child{border-left:none}.ogrid-table tbody tr{height:var(--ogrid-row-height,auto)}.ogrid-thead{z-index:var(--ogrid-z-thead,8);background-color:var(--ogrid-header-bg)}.ogrid-header-row{background-color:var(--ogrid-header-bg)}.ogrid-header-cell{background-color:var(--ogrid-header-bg);z-index:var(--ogrid-z-thead,8);font-weight:600}.ogrid-sticky-header .ogrid-header-cell{position:sticky;top:0}.ogrid-header-cell--pinned-left{z-index:var(--ogrid-z-pinned-header,10);will-change:transform;border-right:1px solid var(--ogrid-border,#0000001f);box-shadow:2px 0 4px -1px #0000001a}.ogrid-header-cell--pinned-right{z-index:var(--ogrid-z-pinned-header,10);will-change:transform;border-left:1px solid var(--ogrid-border,#0000001f);box-shadow:-2px 0 4px -1px #0000001a}.ogrid-header-content{align-items:center;width:100%;display:flex}.ogrid-column-group-header{text-align:center;border-bottom:2px solid var(--ogrid-border);padding:6px;font-weight:600}.ogrid-column-menu-btn{cursor:pointer;color:var(--ogrid-fg-muted);background:0 0;border:none;border-radius:4px;flex-shrink:0;justify-content:center;align-items:center;min-width:24px;height:24px;padding:4px 6px;font-size:16px;line-height:1;transition:background-color .15s;display:inline-flex}.ogrid-column-menu-btn:focus-visible{visibility:visible}.ogrid-column-menu-btn:hover{background:var(--ogrid-hover-bg,#0000000a);color:var(--ogrid-fg)}.ogrid-column-letter-row{background:var(--ogrid-column-letter-bg,var(--ogrid-header-bg))}.ogrid-column-letter-cell{text-align:center;color:var(--ogrid-fg-muted,#00000080);background:var(--ogrid-column-letter-bg,var(--ogrid-header-bg));border-bottom:1px solid var(--ogrid-border,#0000001f);-webkit-user-select:none;user-select:none;font-variant-numeric:tabular-nums;padding:2px 4px;font-size:11px;font-weight:500}.ogrid-checkbox-header,.ogrid-checkbox-cell{text-align:center;padding:4px}.ogrid-checkbox-cell{padding:0}.ogrid-checkbox-wrapper{justify-content:center;align-items:center;display:flex}.ogrid-checkbox-spacer{padding:0}.ogrid-row-number-header{text-align:center;background-color:var(--ogrid-header-bg);color:var(--ogrid-fg-secondary);-webkit-user-select:none;user-select:none;font-weight:600}.ogrid-row-number-spacer{background-color:var(--ogrid-header-bg)}.ogrid-row-number-cell{text-align:center;font-variant-numeric:tabular-nums;background-color:var(--ogrid-header-bg);color:var(--ogrid-fg-secondary);-webkit-user-select:none;user-select:none;font-weight:600}.ogrid-data-cell{contain:content;height:1px;padding:0;position:relative}.ogrid-data-cell--pinned-left,.ogrid-data-cell--pinned-right{contain:none}.ogrid-table:not([data-virtual-scroll]) tbody tr{content-visibility:auto}.ogrid-data-cell--pinned-left{z-index:var(--ogrid-z-pinned,6);background-color:var(--ogrid-bg);will-change:transform;border-right:1px solid var(--ogrid-border,#0000001f);position:sticky;box-shadow:2px 0 4px -1px #0000001a}.ogrid-data-cell--pinned-right{z-index:var(--ogrid-z-pinned,6);background-color:var(--ogrid-bg);will-change:transform;border-left:1px solid var(--ogrid-border,#0000001f);position:sticky;box-shadow:-2px 0 4px -1px #0000001a}.ogrid-cell-content{width:100%;min-width:0;height:100%;padding:var(--ogrid-cell-padding,6px 10px);box-sizing:border-box;text-overflow:ellipsis;white-space:nowrap;-webkit-user-select:none;user-select:none;outline:none;align-items:center;display:flex;overflow:hidden}.ogrid-cell-content--numeric{text-align:right;justify-content:flex-end}.ogrid-cell-content--boolean{text-align:center;justify-content:center}.ogrid-cell-content--editable{cursor:cell}.ogrid-cell-content--active{outline:2px solid var(--ogrid-selection,#217346);outline-offset:-1px;z-index:var(--ogrid-z-active-cell,2);contain:none;position:relative;overflow:visible}:is(.ogrid-data-cell:has(>.ogrid-cell-content--active),.ogrid-data-cell:has(>.ogrid-editing-cell)){z-index:var(--ogrid-z-active-cell,2)}.ogrid-cell-content--active-in-range{background:var(--ogrid-bg,#fff);outline:none}.ogrid-editing-cell{box-sizing:border-box;outline:2px solid var(--ogrid-selection-color,#217346);outline-offset:-1px;width:100%;height:100%;z-index:var(--ogrid-z-active-cell,2);background:var(--ogrid-bg,#fff);align-items:center;padding:0;display:flex;position:relative;overflow:hidden}.ogrid-fill-handle{background-color:var(--ogrid-selection,#217346);border:1px solid var(--ogrid-bg);cursor:crosshair;pointer-events:auto;touch-action:none;width:7px;height:7px;z-index:var(--ogrid-z-fill-handle,3);border-radius:1px;position:absolute;bottom:-3px;right:-3px}@media (pointer:coarse){.ogrid-fill-handle{border-radius:2px;width:14px;height:14px;bottom:-7px;right:-7px}}.ogrid-resize-handle{cursor:col-resize;-webkit-user-select:none;user-select:none;touch-action:none;width:8px;position:absolute;top:0;bottom:0;right:-3px}@media (pointer:coarse){.ogrid-resize-handle{width:16px;right:-8px}}.ogrid-drop-indicator{background:var(--ogrid-primary,#217346);pointer-events:none;width:3px;z-index:var(--ogrid-z-drop-indicator,100);position:absolute;top:0;bottom:0}.ogrid-empty-state{text-align:center;border-top:1px solid var(--ogrid-border);background-color:var(--ogrid-header-bg);padding:32px 16px}.ogrid-empty-state-title{margin-bottom:8px;font-size:1.25rem;font-weight:600}.ogrid-empty-state-message{color:var(--ogrid-fg-secondary);font-size:.875rem}.ogrid-loading-overlay{z-index:var(--ogrid-z-loading,2);background-color:var(--ogrid-loading-overlay);justify-content:center;align-items:center;display:flex;position:absolute;inset:0}.ogrid-loading-inner{background-color:var(--ogrid-bg);border:1px solid var(--ogrid-border);border-radius:4px;flex-direction:column;align-items:center;gap:8px;padding:16px;display:flex}.ogrid-loading-message{color:var(--ogrid-fg-secondary);font-size:.875rem}.ogrid-popover-anchor{min-width:40px;min-height:100%}@media (width<=576px){.ogrid-pagination{flex-direction:column;align-items:stretch;gap:8px;padding:6px 8px}.ogrid-pagination-nav{order:-1;justify-content:center}.ogrid-pagination-info{text-align:center;font-size:11px}.ogrid-pagination-size{justify-content:center;font-size:11px}}.ogrid-checkbox-label{cursor:pointer;align-items:center;display:inline-flex}.ogrid-checkbox{cursor:pointer;width:16px;height:16px;accent-color:var(--ogrid-accent,#0078d4)}.ogrid-loading-spinner{border:3px solid var(--ogrid-border,#e0e0e0);border-top-color:var(--ogrid-accent,#0078d4);border-radius:50%;width:24px;height:24px;animation:.8s linear infinite ogrid-spin}@keyframes ogrid-spin{to{transform:rotate(360deg)}}.ogrid-empty-clear-btn{color:var(--ogrid-accent,#0078d4);cursor:pointer;font:inherit;background:0 0;border:none;padding:0;text-decoration:underline}.ogrid-empty-clear-btn:hover{color:var(--ogrid-accent,#005a9e)}
|
|
1
|
+
:where(:root){--ogrid-cell-padding:6px 10px;--ogrid-cell-padding-vertical:6px;--ogrid-cell-padding-horizontal:10px;--ogrid-radius:6px;--ogrid-radius-sm:calc(var(--ogrid-radius) * .6);--ogrid-radius-lg:calc(var(--ogrid-radius) * 1.4);--ogrid-radius-xl:calc(var(--ogrid-radius) * 1.8);--ogrid-radius-full:9999px;--ogrid-font:inherit;--ogrid-font-size:13px;--ogrid-ring:var(--ogrid-accent,#0078d4);--ogrid-z-resize-handle:1;--ogrid-z-active-cell:2;--ogrid-z-fill-handle:3;--ogrid-z-row-number:5;--ogrid-z-pinned:6;--ogrid-z-selection-cell:7;--ogrid-z-thead:8;--ogrid-z-pinned-header:10;--ogrid-z-header-focus:11;--ogrid-z-selection-header-pinned:12;--ogrid-z-checkbox:12;--ogrid-z-loading:2;--ogrid-z-drop-indicator:100;--ogrid-z-filter-popover:1000;--ogrid-z-popover:1000;--ogrid-z-fullscreen:9999;--ogrid-z-context-menu:10000;--ogrid-bg:#fff;--ogrid-fg:#000000de;--ogrid-fg-secondary:#0009;--ogrid-fg-muted:#00000080;--ogrid-border:#0000001f;--ogrid-border-strong:#00000080;--ogrid-border-hover:#0000004d;--ogrid-header-bg:#f5f5f5;--ogrid-hover-bg:#0000000a;--ogrid-selected-row-bg:#e6f0fb;--ogrid-bg-selected-hover:#dae8f8;--ogrid-active-cell-bg:#00000005;--ogrid-range-bg:#2173461f;--ogrid-accent:#0078d4;--ogrid-accent-dark:#005a9e;--ogrid-selection-color:#217346;--ogrid-primary:oklch(55% 0 0);--ogrid-primary-fg:oklch(100% 0 0);--ogrid-primary-hover:oklch(45% 0 0);--ogrid-bg-subtle:#f5f5f5;--ogrid-bg-hover:#0000000a;--ogrid-active-bg:#0000000f;--ogrid-muted:#00000080;--ogrid-shadow:0 4px 16px #0000001f;--ogrid-shadow-sm:0 2px 4px #00000014;--ogrid-pinned-shadow:#0000001a;--ogrid-loading-overlay:#ffffffb3;--ogrid-formula-error-color:#d32f2f}@media (prefers-color-scheme:dark){:where(:root:not([data-theme=light]):not(.light)){--ogrid-bg:#1e1e1e;--ogrid-fg:#ffffffde;--ogrid-fg-secondary:#fff9;--ogrid-fg-muted:#ffffff80;--ogrid-border:#ffffff1f;--ogrid-border-strong:#ffffff80;--ogrid-border-hover:#ffffff4d;--ogrid-header-bg:#2c2c2c;--ogrid-hover-bg:#ffffff14;--ogrid-selected-row-bg:#1a3a5c;--ogrid-bg-selected-hover:#1f3650;--ogrid-active-cell-bg:#ffffff0f;--ogrid-range-bg:#2ea04326;--ogrid-accent:#4da6ff;--ogrid-accent-dark:#3390e0;--ogrid-selection-color:#2ea043;--ogrid-primary:oklch(70% 0 0);--ogrid-primary-fg:oklch(10% 0 0);--ogrid-primary-hover:oklch(80% 0 0);--ogrid-bg-subtle:#ffffff0a;--ogrid-bg-hover:#ffffff14;--ogrid-active-bg:#ffffff14;--ogrid-muted:#ffffff80;--ogrid-shadow:0 4px 16px #0006;--ogrid-shadow-sm:0 2px 4px #00000040;--ogrid-pinned-shadow:#0000004d;--ogrid-loading-overlay:#000000b3;--ogrid-formula-error-color:#ef5350}}:where([data-theme=dark],.dark){--ogrid-bg:#1e1e1e;--ogrid-fg:#ffffffde;--ogrid-fg-secondary:#fff9;--ogrid-fg-muted:#ffffff80;--ogrid-border:#ffffff1f;--ogrid-border-strong:#ffffff80;--ogrid-border-hover:#ffffff4d;--ogrid-header-bg:#2c2c2c;--ogrid-hover-bg:#ffffff14;--ogrid-selected-row-bg:#1a3a5c;--ogrid-bg-selected-hover:#1f3650;--ogrid-active-cell-bg:#ffffff0f;--ogrid-range-bg:#2ea04326;--ogrid-accent:#4da6ff;--ogrid-accent-dark:#3390e0;--ogrid-selection-color:#2ea043;--ogrid-primary:#4da6ff;--ogrid-primary-fg:#fff;--ogrid-primary-hover:#66b3ff;--ogrid-bg-subtle:#ffffff0a;--ogrid-bg-hover:#ffffff14;--ogrid-active-bg:#ffffff14;--ogrid-muted:#ffffff80;--ogrid-shadow:0 4px 16px #0006;--ogrid-shadow-sm:0 2px 4px #00000040;--ogrid-pinned-shadow:#0000004d;--ogrid-loading-overlay:#000000b3;--ogrid-formula-error-color:#ef5350}[role=region][tabindex="0"]{outline:none}.ogrid-outer-container .ogrid-cell-in-range{background:var(--ogrid-range-bg,#2173461f)}.ogrid-outer-container .ogrid-cell-cut{background:var(--ogrid-hover-bg);opacity:.7}.ogrid-outer-container [data-drag-range]{background:var(--ogrid-range-bg,#2173461f)}.ogrid-outer-container [data-drag-anchor]{background:var(--ogrid-bg)}.ogrid-outer-container{background-color:var(--ogrid-bg);min-height:0;color:var(--ogrid-fg);flex-direction:column;flex:1;display:flex;position:relative}.ogrid-scroll-wrapper{flex-direction:column;min-height:100%;display:flex}.ogrid-table-container{position:relative}.ogrid-table-container--loading{opacity:.6}.ogrid-table{border-collapse:collapse;background-color:var(--ogrid-bg);width:100%;color:var(--ogrid-fg);font-size:.875rem;font-family:var(--ogrid-font,inherit);font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1, "ss01" 1, "cv11" 1}.ogrid-table tr th:first-child,.ogrid-table tr td:first-child{border-left:none}.ogrid-table tbody tr{height:var(--ogrid-row-height,auto)}.ogrid-thead{z-index:var(--ogrid-z-thead,8);background-color:var(--ogrid-header-bg)}.ogrid-header-row{background-color:var(--ogrid-header-bg)}.ogrid-header-cell{background-color:var(--ogrid-header-bg);z-index:var(--ogrid-z-thead,8);font-weight:600}.ogrid-sticky-header .ogrid-header-cell{position:sticky;top:0}.ogrid-header-cell--pinned-left{z-index:var(--ogrid-z-pinned-header,10);will-change:transform;border-right:1px solid var(--ogrid-border,#0000001f);box-shadow:2px 0 4px -1px #0000001a}.ogrid-header-cell--pinned-right{z-index:var(--ogrid-z-pinned-header,10);will-change:transform;border-left:1px solid var(--ogrid-border,#0000001f);box-shadow:-2px 0 4px -1px #0000001a}.ogrid-header-content{align-items:center;width:100%;display:flex}.ogrid-column-group-header{text-align:center;border-bottom:2px solid var(--ogrid-border);padding:6px;font-weight:600}.ogrid-column-menu-btn{cursor:pointer;color:var(--ogrid-fg-muted);background:0 0;border:none;border-radius:4px;flex-shrink:0;justify-content:center;align-items:center;min-width:24px;height:24px;padding:4px 6px;font-size:16px;line-height:1;transition:background-color .15s;display:inline-flex}.ogrid-column-menu-btn:focus-visible{visibility:visible}.ogrid-column-menu-btn:hover{background:var(--ogrid-hover-bg,#0000000a);color:var(--ogrid-fg)}.ogrid-column-letter-row{background:var(--ogrid-column-letter-bg,var(--ogrid-header-bg))}.ogrid-column-letter-cell{text-align:center;color:var(--ogrid-fg-muted,#00000080);background:var(--ogrid-column-letter-bg,var(--ogrid-header-bg));border-bottom:1px solid var(--ogrid-border,#0000001f);-webkit-user-select:none;user-select:none;font-variant-numeric:tabular-nums;padding:2px 4px;font-size:11px;font-weight:500}.ogrid-checkbox-header,.ogrid-checkbox-cell{text-align:center;padding:4px}.ogrid-checkbox-cell{padding:0}.ogrid-checkbox-wrapper{justify-content:center;align-items:center;display:flex}.ogrid-checkbox-spacer{padding:0}.ogrid-row-number-header{text-align:center;background-color:var(--ogrid-header-bg);color:var(--ogrid-fg-secondary);-webkit-user-select:none;user-select:none;font-weight:600}.ogrid-row-number-spacer{background-color:var(--ogrid-header-bg)}.ogrid-row-number-cell{text-align:center;font-variant-numeric:tabular-nums;background-color:var(--ogrid-header-bg);color:var(--ogrid-fg-secondary);-webkit-user-select:none;user-select:none;font-weight:600}.ogrid-data-cell{contain:content;height:1px;padding:0;position:relative}.ogrid-data-cell--pinned-left,.ogrid-data-cell--pinned-right{contain:none}.ogrid-table:not([data-virtual-scroll]) tbody tr{content-visibility:auto}.ogrid-data-cell--pinned-left{z-index:var(--ogrid-z-pinned,6);background-color:var(--ogrid-bg);will-change:transform;border-right:1px solid var(--ogrid-border,#0000001f);position:sticky;box-shadow:2px 0 4px -1px #0000001a}.ogrid-data-cell--pinned-right{z-index:var(--ogrid-z-pinned,6);background-color:var(--ogrid-bg);will-change:transform;border-left:1px solid var(--ogrid-border,#0000001f);position:sticky;box-shadow:-2px 0 4px -1px #0000001a}.ogrid-cell-content{width:100%;min-width:0;height:100%;padding:var(--ogrid-cell-padding,6px 10px);box-sizing:border-box;text-overflow:ellipsis;white-space:nowrap;-webkit-user-select:none;user-select:none;outline:none;align-items:center;display:flex;overflow:hidden}.ogrid-cell-content--numeric{text-align:right;justify-content:flex-end}.ogrid-cell-content--boolean{text-align:center;justify-content:center}.ogrid-cell-content--editable{cursor:cell}.ogrid-cell-content--active{outline:2px solid var(--ogrid-selection-color,#217346);outline-offset:-1px;z-index:var(--ogrid-z-active-cell,2);contain:none;position:relative;overflow:visible}:is(.ogrid-data-cell:has(>.ogrid-cell-content--active),.ogrid-data-cell:has(>.ogrid-editing-cell)){z-index:var(--ogrid-z-active-cell,2)}.ogrid-cell-content--active-in-range{background:var(--ogrid-bg,#fff);outline:none}.ogrid-editing-cell{box-sizing:border-box;outline:2px solid var(--ogrid-selection-color,#217346);outline-offset:-1px;width:100%;height:100%;z-index:var(--ogrid-z-active-cell,2);background:var(--ogrid-bg,#fff);align-items:center;padding:0;display:flex;position:relative;overflow:hidden}.ogrid-fill-handle{background-color:var(--ogrid-selection-color,#217346);border:1px solid var(--ogrid-bg);cursor:crosshair;pointer-events:auto;touch-action:none;width:7px;height:7px;z-index:var(--ogrid-z-fill-handle,3);border-radius:1px;position:absolute;bottom:-3px;right:-3px}@media (pointer:coarse){.ogrid-fill-handle{border-radius:2px;width:14px;height:14px;bottom:-7px;right:-7px}}.ogrid-resize-handle{cursor:col-resize;-webkit-user-select:none;user-select:none;touch-action:none;width:8px;position:absolute;top:0;bottom:0;right:-3px}@media (pointer:coarse){.ogrid-resize-handle{width:16px;right:-8px}}.ogrid-drop-indicator{background:var(--ogrid-primary,#217346);pointer-events:none;width:3px;z-index:var(--ogrid-z-drop-indicator,100);position:absolute;top:0;bottom:0}.ogrid-empty-state{text-align:center;border-top:1px solid var(--ogrid-border);background-color:var(--ogrid-header-bg);padding:32px 16px}.ogrid-empty-state-title{margin-bottom:8px;font-size:1.25rem;font-weight:600}.ogrid-empty-state-message{color:var(--ogrid-fg-secondary);font-size:.875rem}.ogrid-loading-overlay{z-index:var(--ogrid-z-loading,2);background-color:var(--ogrid-loading-overlay);justify-content:center;align-items:center;display:flex;position:absolute;inset:0}.ogrid-loading-inner{background-color:var(--ogrid-bg);border:1px solid var(--ogrid-border);border-radius:4px;flex-direction:column;align-items:center;gap:8px;padding:16px;display:flex}.ogrid-loading-message{color:var(--ogrid-fg-secondary);font-size:.875rem}.ogrid-popover-anchor{min-width:40px;min-height:100%}@media (width<=576px){.ogrid-pagination{flex-direction:column;align-items:stretch;gap:8px;padding:6px 8px}.ogrid-pagination-nav{order:-1;justify-content:center}.ogrid-pagination-info{text-align:center;font-size:11px}.ogrid-pagination-size{justify-content:center;font-size:11px}}.ogrid-checkbox-label{cursor:pointer;align-items:center;display:inline-flex}.ogrid-checkbox{cursor:pointer;width:16px;height:16px;accent-color:var(--ogrid-accent,#0078d4)}.ogrid-loading-spinner{border:3px solid var(--ogrid-border,#e0e0e0);border-top-color:var(--ogrid-accent,#0078d4);border-radius:var(--ogrid-radius-full,50%);width:24px;height:24px;animation:.8s linear infinite ogrid-spin}@keyframes ogrid-spin{to{transform:rotate(360deg)}}.ogrid-empty-clear-btn{color:var(--ogrid-accent,#0078d4);cursor:pointer;font:inherit;background:0 0;border:none;padding:0;text-decoration:underline}.ogrid-empty-clear-btn:hover{color:var(--ogrid-accent,#005a9e)}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import e from "../_virtual/_plugin-vue_export-helper.js";
|
|
2
2
|
import t from "./GridContextMenu.vue_vue_type_script_setup_true_lang.js";
|
|
3
3
|
/* empty css */
|
|
4
|
-
var p = /* @__PURE__ */ e(t, [["__scopeId", "data-v-
|
|
4
|
+
var p = /* @__PURE__ */ e(t, [["__scopeId", "data-v-79f1fcb1"]]);
|
|
5
5
|
export {
|
|
6
6
|
p as default
|
|
7
7
|
};
|
package/dist/esm/DataGridTable/GridContextMenu.vue?vue&type=style&index=0&scoped=79f1fcb1&lang.css
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
.context-menu-wrapper[data-v-79f1fcb1]{z-index:9999;position:relative}.context-menu[data-v-79f1fcb1]{border:1px solid var(--ogrid-border-color,#e0e0e0);border-radius:var(--ogrid-radius,4px);background:#fff;outline:none;min-width:200px;padding:4px 0;position:fixed;box-shadow:0 4px 12px #00000026}.menu-item[data-v-79f1fcb1]{text-align:left;cursor:pointer;width:100%;color:var(--ogrid-text-primary,#000);background:0 0;border:none;align-items:center;padding:8px 12px;font-size:14px;transition:background-color .1s;display:flex}.menu-item.active[data-v-79f1fcb1]:not(.disabled){background-color:var(--ogrid-bg-hover,#f5f5f5)}.menu-item.disabled[data-v-79f1fcb1]{color:var(--ogrid-text-disabled,#999);cursor:not-allowed;opacity:.5}.menu-item-label[data-v-79f1fcb1]{flex:1}.menu-item-shortcut[data-v-79f1fcb1]{color:var(--ogrid-text-secondary,#0006);margin-left:24px;font-size:.8em}.divider[data-v-79f1fcb1]{background-color:var(--ogrid-border-color,#e0e0e0);height:1px;margin:4px 0}
|
|
@@ -32,7 +32,7 @@
|
|
|
32
32
|
min-height: 28px;
|
|
33
33
|
padding: 4px;
|
|
34
34
|
border: 1px solid var(--ogrid-border, rgba(0, 0, 0, 0.12));
|
|
35
|
-
border-radius: 50
|
|
35
|
+
border-radius: var(--ogrid-radius-full, 50%);
|
|
36
36
|
background: var(--ogrid-bg, #fff);
|
|
37
37
|
color: var(--ogrid-fg, rgba(0, 0, 0, 0.87));
|
|
38
38
|
cursor: pointer;
|
|
@@ -62,7 +62,7 @@
|
|
|
62
62
|
min-height: 28px;
|
|
63
63
|
padding: 4px 8px;
|
|
64
64
|
border: 1px solid var(--ogrid-border, rgba(0, 0, 0, 0.12));
|
|
65
|
-
border-radius: 4px;
|
|
65
|
+
border-radius: var(--ogrid-radius, 4px);
|
|
66
66
|
background: var(--ogrid-bg, #fff);
|
|
67
67
|
color: var(--ogrid-fg, rgba(0, 0, 0, 0.87));
|
|
68
68
|
cursor: pointer;
|
|
@@ -104,7 +104,7 @@
|
|
|
104
104
|
min-width: 72px;
|
|
105
105
|
padding: 4px 8px;
|
|
106
106
|
border: 1px solid var(--ogrid-border, rgba(0, 0, 0, 0.12));
|
|
107
|
-
border-radius: 4px;
|
|
107
|
+
border-radius: var(--ogrid-radius, 4px);
|
|
108
108
|
background: var(--ogrid-bg, #fff);
|
|
109
109
|
color: var(--ogrid-fg, rgba(0, 0, 0, 0.87));
|
|
110
110
|
font-size: 13px;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
.pagination[data-v-9f3ef127]{box-sizing:border-box;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:14px 24px;width:100%;min-width:0;padding:0;display:flex}.pagination-info[data-v-9f3ef127]{color:var(--ogrid-fg-secondary,#0009);font-variant-numeric:tabular-nums;flex-shrink:0;font-size:13px}.pagination-controls[data-v-9f3ef127]{flex-wrap:wrap;flex:auto;justify-content:center;align-items:center;gap:4px;min-width:0;display:flex}.nav-btn[data-v-9f3ef127]{border:1px solid var(--ogrid-border,#0000001f);background:var(--ogrid-bg,#fff);min-width:28px;min-height:28px;color:var(--ogrid-fg,#000000de);cursor:pointer;
|
|
1
|
+
.pagination[data-v-9f3ef127]{box-sizing:border-box;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:14px 24px;width:100%;min-width:0;padding:0;display:flex}.pagination-info[data-v-9f3ef127]{color:var(--ogrid-fg-secondary,#0009);font-variant-numeric:tabular-nums;flex-shrink:0;font-size:13px}.pagination-controls[data-v-9f3ef127]{flex-wrap:wrap;flex:auto;justify-content:center;align-items:center;gap:4px;min-width:0;display:flex}.nav-btn[data-v-9f3ef127]{border:1px solid var(--ogrid-border,#0000001f);border-radius:var(--ogrid-radius-full,50%);background:var(--ogrid-bg,#fff);min-width:28px;min-height:28px;color:var(--ogrid-fg,#000000de);cursor:pointer;justify-content:center;align-items:center;padding:4px;font-size:14px;display:inline-flex}.nav-btn[data-v-9f3ef127]:hover:not(:disabled){background:var(--ogrid-hover-bg,#0000000a);border-color:var(--ogrid-fg-muted,#00000080)}.nav-btn[data-v-9f3ef127]:disabled{opacity:.5;cursor:not-allowed}.page-numbers[data-v-9f3ef127]{align-items:center;gap:4px;margin:0 8px;display:inline-flex}.page-btn[data-v-9f3ef127]{border:1px solid var(--ogrid-border,#0000001f);border-radius:var(--ogrid-radius,4px);background:var(--ogrid-bg,#fff);min-width:28px;min-height:28px;color:var(--ogrid-fg,#000000de);cursor:pointer;font-variant-numeric:tabular-nums;padding:4px 8px;font-size:13px}.page-btn[data-v-9f3ef127]:hover{background:var(--ogrid-hover-bg,#0000000a)}.page-btn.active[data-v-9f3ef127]{background:var(--ogrid-accent,#0078d4);border-color:var(--ogrid-accent,#0078d4);color:#fff}.ellipsis[data-v-9f3ef127]{min-width:24px;color:var(--ogrid-fg-muted,#00000080);-webkit-user-select:none;user-select:none;justify-content:center;align-items:center;font-size:12px;display:inline-flex}.page-size-selector[data-v-9f3ef127]{flex-shrink:0;align-items:center;gap:8px;display:inline-flex}.page-size-selector .page-size-label[data-v-9f3ef127]{color:var(--ogrid-fg-secondary,#0009);-webkit-user-select:none;user-select:none;white-space:nowrap;font-size:13px}.page-size-selector .page-size-select[data-v-9f3ef127]{border:1px solid var(--ogrid-border,#0000001f);border-radius:var(--ogrid-radius,4px);background:var(--ogrid-bg,#fff);min-width:72px;color:var(--ogrid-fg,#000000de);padding:4px 8px;font-size:13px}
|
package/dist/esm/index.js
CHANGED
|
@@ -3,17 +3,17 @@ import l from "./ColumnHeaderMenu/ColumnHeaderMenu.js";
|
|
|
3
3
|
import r from "./DataGridTable/InlineCellEditor.js";
|
|
4
4
|
import n from "./DataGridTable/GridContextMenu.js";
|
|
5
5
|
import s from "./DataGridTable/DataGridTable2.js";
|
|
6
|
-
import
|
|
6
|
+
import C from "./ColumnChooser/ColumnChooser.js";
|
|
7
7
|
import S from "./PaginationControls/PaginationControls.js";
|
|
8
8
|
import c from "./OGrid/OGrid.js";
|
|
9
|
-
import { AUTOSIZE_EXTRA_PX as _, AUTOSIZE_MAX_PX as E, CELL_PADDING as R, CHECKBOX_COLUMN_WIDTH as T, COLUMN_HEADER_MENU_ITEMS as D, DEFAULT_DEBOUNCE_MS as I, DEFAULT_MIN_COLUMN_WIDTH as M, GRID_BORDER_RADIUS as P, GRID_CONTEXT_MENU_ITEMS as F, MAX_PAGE_BUTTONS as A, MarchingAntsOverlay as O, PAGE_SIZE_OPTIONS as f, PEOPLE_SEARCH_DEBOUNCE_MS as b, ROW_NUMBER_COLUMN_WIDTH as N, SIDEBAR_TRANSITION_MS as
|
|
9
|
+
import { AUTOSIZE_EXTRA_PX as _, AUTOSIZE_MAX_PX as E, CELL_PADDING as R, CHECKBOX_COLUMN_WIDTH as T, COLUMN_HEADER_MENU_ITEMS as D, DEFAULT_DEBOUNCE_MS as I, DEFAULT_MIN_COLUMN_WIDTH as M, GRID_BORDER_RADIUS as P, GRID_CONTEXT_MENU_ITEMS as F, MAX_PAGE_BUTTONS as A, MarchingAntsOverlay as O, PAGE_SIZE_OPTIONS as f, PEOPLE_SEARCH_DEBOUNCE_MS as b, ROW_NUMBER_COLUMN_WIDTH as N, SIDEBAR_TRANSITION_MS as H, StatusBar as v, UndoRedoStack as G, Z_INDEX as U, applyCellDeletion as w, applyCutClear as y, applyFillValues as B, applyPastedValues as L, applyRangeRowSelection as V, areGridRowPropsEqual as h, booleanParser as x, buildCsvHeader as X, buildCsvRows as W, buildHeaderRows as Z, buildInlineEditorProps as k, buildPopoverEditorProps as q, calculateDropTarget as z, clampSelectionToBounds as K, computeAggregations as j, computeArrowNavigation as J, computeAutoScrollSpeed as Q, computeNextSortState as Y, computeRowSelectionState as $, computeTabNavigation as ee, computeTotalHeight as te, computeVisibleRange as oe, createDataGridTable as le, createInlineCellEditor as ae, createOGrid as re, currencyParser as ie, dateParser as ne, debounce as ue, deriveFilterOptionsFromData as se, emailParser as de, escapeCsvValue as Ce, exportToCsv as me, findCtrlArrowTarget as Se, flattenColumns as pe, formatCellValueForTsv as ce, formatSelectionAsTsv as ge, formatShortcut as _e, getCellInteractionProps as Ee, getCellRenderDescriptor as Re, getCellValue as Te, getColumnHeaderMenuItems as De, getContextMenuHandlers as Ie, getDataGridStatusBarConfig as Me, getFilterField as Pe, getHeaderFilterConfig as Fe, getMultiSelectFilterFields as Ae, getPaginationViewModel as Oe, getPinStateForColumn as fe, getScrollTopForRow as be, getStatusBarParts as Ne, injectGlobalStyles as He, isFilterConfig as ve, isInSelectionRange as Ge, isRowInRange as Ue, measureColumnContentWidth as we, measureRange as ye, mergeFilter as Be, normalizeSelectionRange as Le, numberParser as Ve, parseTsvClipboard as he, parseValue as xe, processClientSideData as Xe, rangesEqual as We, reorderColumnArray as Ze, resolveCellDisplayContent as ke, resolveCellStyle as qe, toUserLike as ze, triggerCsvDownload as Ke, useActiveCell as je, useCellEditing as Je, useCellSelection as Qe, useClipboard as Ye, useColumnChooserState as $e, useColumnHeaderFilterState as et, useColumnHeaderMenuState as tt, useColumnPinning as ot, useColumnReorder as lt, useColumnResize as at, useContextMenu as rt, useDataGridState as it, useDataGridTableSetup as nt, useDateFilterState as ut, useDebounce as st, useDebouncedCallback as dt, useFillHandle as Ct, useFilterOptions as mt, useHeadlessGrid as St, useInlineCellEditorState as pt, useKeyboardNavigation as ct, useMultiSelectFilterState as gt, useOGrid as _t, usePeopleFilterState as Et, useRichSelectState as Rt, useRowSelection as Tt, useSideBarState as Dt, useTableLayout as It, useTextFilterState as Mt, useUndoRedo as Pt, useVirtualScroll as Ft, validateColumns as At, validateRowIds as Ot } from "@alaarab/ogrid-vue";
|
|
10
10
|
export {
|
|
11
11
|
_ as AUTOSIZE_EXTRA_PX,
|
|
12
12
|
E as AUTOSIZE_MAX_PX,
|
|
13
13
|
R as CELL_PADDING,
|
|
14
14
|
T as CHECKBOX_COLUMN_WIDTH,
|
|
15
15
|
D as COLUMN_HEADER_MENU_ITEMS,
|
|
16
|
-
|
|
16
|
+
C as ColumnChooser,
|
|
17
17
|
t as ColumnHeaderFilter,
|
|
18
18
|
l as ColumnHeaderMenu,
|
|
19
19
|
I as DEFAULT_DEBOUNCE_MS,
|
|
@@ -30,10 +30,10 @@ export {
|
|
|
30
30
|
b as PEOPLE_SEARCH_DEBOUNCE_MS,
|
|
31
31
|
S as PaginationControls,
|
|
32
32
|
N as ROW_NUMBER_COLUMN_WIDTH,
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
33
|
+
H as SIDEBAR_TRANSITION_MS,
|
|
34
|
+
v as StatusBar,
|
|
35
|
+
G as UndoRedoStack,
|
|
36
|
+
U as Z_INDEX,
|
|
37
37
|
w as applyCellDeletion,
|
|
38
38
|
y as applyCutClear,
|
|
39
39
|
B as applyFillValues,
|
|
@@ -63,8 +63,8 @@ export {
|
|
|
63
63
|
ne as dateParser,
|
|
64
64
|
ue as debounce,
|
|
65
65
|
se as deriveFilterOptionsFromData,
|
|
66
|
-
|
|
67
|
-
|
|
66
|
+
de as emailParser,
|
|
67
|
+
Ce as escapeCsvValue,
|
|
68
68
|
me as exportToCsv,
|
|
69
69
|
Se as findCtrlArrowTarget,
|
|
70
70
|
pe as flattenColumns,
|
|
@@ -84,10 +84,10 @@ export {
|
|
|
84
84
|
fe as getPinStateForColumn,
|
|
85
85
|
be as getScrollTopForRow,
|
|
86
86
|
Ne as getStatusBarParts,
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
87
|
+
He as injectGlobalStyles,
|
|
88
|
+
ve as isFilterConfig,
|
|
89
|
+
Ge as isInSelectionRange,
|
|
90
|
+
Ue as isRowInRange,
|
|
91
91
|
we as measureColumnContentWidth,
|
|
92
92
|
ye as measureRange,
|
|
93
93
|
Be as mergeFilter,
|
|
@@ -117,21 +117,22 @@ export {
|
|
|
117
117
|
nt as useDataGridTableSetup,
|
|
118
118
|
ut as useDateFilterState,
|
|
119
119
|
st as useDebounce,
|
|
120
|
-
|
|
121
|
-
|
|
120
|
+
dt as useDebouncedCallback,
|
|
121
|
+
Ct as useFillHandle,
|
|
122
122
|
mt as useFilterOptions,
|
|
123
|
-
St as
|
|
124
|
-
pt as
|
|
125
|
-
ct as
|
|
126
|
-
gt as
|
|
127
|
-
_t as
|
|
128
|
-
Et as
|
|
129
|
-
Rt as
|
|
130
|
-
Tt as
|
|
131
|
-
Dt as
|
|
132
|
-
It as
|
|
133
|
-
Mt as
|
|
134
|
-
Pt as
|
|
135
|
-
Ft as
|
|
136
|
-
At as
|
|
123
|
+
St as useHeadlessGrid,
|
|
124
|
+
pt as useInlineCellEditorState,
|
|
125
|
+
ct as useKeyboardNavigation,
|
|
126
|
+
gt as useMultiSelectFilterState,
|
|
127
|
+
_t as useOGrid,
|
|
128
|
+
Et as usePeopleFilterState,
|
|
129
|
+
Rt as useRichSelectState,
|
|
130
|
+
Tt as useRowSelection,
|
|
131
|
+
Dt as useSideBarState,
|
|
132
|
+
It as useTableLayout,
|
|
133
|
+
Mt as useTextFilterState,
|
|
134
|
+
Pt as useUndoRedo,
|
|
135
|
+
Ft as useVirtualScroll,
|
|
136
|
+
At as validateColumns,
|
|
137
|
+
Ot as validateRowIds
|
|
137
138
|
};
|
package/dist/types/index.d.ts
CHANGED
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
export type { ColumnFilterType, IDateFilterValue, IColumnFilterDef, IColumnMeta, IValueParserParams, ICellValueChangedEvent, CellEditorParams, IColumnGroupDef, HeaderCell, HeaderRow, IColumnDefinition, RowId, UserLike, UserLikeInput, FilterValue, IFilters, IFetchParams, IPageResult, IDataSource, IGridColumnState, RowSelectionMode, IRowSelectionChangeEvent, StatusBarPanel, IStatusBarProps, IActiveCell, ISelectionRange, SideBarPanelId, ISideBarDef, IVirtualScrollConfig, IColumnReorderConfig, IOGridApi, CsvColumn, StatusBarPart, StatusBarPartsInput, PaginationViewModel, GridContextMenuItem, IColumnHeaderMenuItem, GridContextMenuHandlerProps, ColumnHeaderMenuInput, ColumnHeaderMenuHandlers, ParseValueResult, AggregationResult, GridRowComparatorProps, ColumnPinState, IDropTarget, ICalculateDropTargetParams, IVisibleRange, OverlayRect, ISortState, ArrowNavigationContext, ArrowNavigationResult, ZIndexKey, } from '@alaarab/ogrid-vue';
|
|
2
2
|
export { toUserLike, isInSelectionRange, normalizeSelectionRange, escapeCsvValue, buildCsvHeader, buildCsvRows, exportToCsv, triggerCsvDownload, getCellValue, flattenColumns, buildHeaderRows, isFilterConfig, getFilterField, mergeFilter, deriveFilterOptionsFromData, getMultiSelectFilterFields, getStatusBarParts, getDataGridStatusBarConfig, getPaginationViewModel, PAGE_SIZE_OPTIONS, MAX_PAGE_BUTTONS, GRID_CONTEXT_MENU_ITEMS, COLUMN_HEADER_MENU_ITEMS, getContextMenuHandlers, getColumnHeaderMenuItems, formatShortcut, parseValue, numberParser, currencyParser, dateParser, emailParser, booleanParser, computeAggregations, processClientSideData, areGridRowPropsEqual, isRowInRange, getPinStateForColumn, reorderColumnArray, calculateDropTarget, computeVisibleRange, computeTotalHeight, getScrollTopForRow, getHeaderFilterConfig, getCellRenderDescriptor, resolveCellDisplayContent, resolveCellStyle, buildInlineEditorProps, buildPopoverEditorProps, debounce, measureRange, injectGlobalStyles, computeNextSortState, measureColumnContentWidth, AUTOSIZE_EXTRA_PX, AUTOSIZE_MAX_PX, findCtrlArrowTarget, computeTabNavigation, computeArrowNavigation, applyCellDeletion, rangesEqual, clampSelectionToBounds, computeAutoScrollSpeed, applyRangeRowSelection, computeRowSelectionState, formatCellValueForTsv, formatSelectionAsTsv, parseTsvClipboard, applyPastedValues, applyCutClear, applyFillValues, UndoRedoStack, validateColumns, validateRowIds, CHECKBOX_COLUMN_WIDTH, ROW_NUMBER_COLUMN_WIDTH, DEFAULT_MIN_COLUMN_WIDTH, CELL_PADDING, GRID_BORDER_RADIUS, DEFAULT_DEBOUNCE_MS, PEOPLE_SEARCH_DEBOUNCE_MS, SIDEBAR_TRANSITION_MS, Z_INDEX, } from '@alaarab/ogrid-vue';
|
|
3
3
|
export type { IColumnDef, ICellEditorProps, IOGridProps, IOGridClientProps, IOGridServerProps, IOGridDataGridProps, } from '@alaarab/ogrid-vue';
|
|
4
|
-
export type { UseOGridResult, UseOGridPagination, UseOGridColumnChooser, UseOGridLayout, UseOGridFilters, ColumnChooserPlacement, UseDataGridStateParams, UseDataGridStateResult, DataGridLayoutState, DataGridRowSelectionState, DataGridEditingState, DataGridCellInteractionState, DataGridContextMenuState, DataGridViewModelState, DataGridPinningState, UseActiveCellResult, EditingCell, UseCellEditingParams, UseCellEditingResult, UseCellSelectionParams, UseCellSelectionResult, UseClipboardParams, UseClipboardResult, UseRowSelectionParams, UseRowSelectionResult, UseKeyboardNavigationParams, UseKeyboardNavigationResult, UseFillHandleParams, UseFillHandleResult, UseUndoRedoParams, UseUndoRedoResult, ContextMenuPosition, UseContextMenuResult, UseColumnResizeParams, UseColumnResizeResult, UseColumnReorderParams, UseColumnReorderResult, UseVirtualScrollParams, UseVirtualScrollResult, UseFilterOptionsResult, UseTableLayoutParams, UseTableLayoutResult, UseColumnHeaderFilterStateParams, UseColumnHeaderFilterStateResult, UseTextFilterStateParams, UseTextFilterStateResult, UseMultiSelectFilterStateParams, UseMultiSelectFilterStateResult, UsePeopleFilterStateParams, UsePeopleFilterStateResult, UseDateFilterStateParams, UseDateFilterStateResult, UseColumnChooserStateParams, UseColumnChooserStateResult, InlineCellEditorType, UseInlineCellEditorStateParams, UseInlineCellEditorStateResult, UseRichSelectStateParams, UseRichSelectStateResult, UseSideBarStateParams, UseSideBarStateResult, DebouncedFn, UseColumnPinningParams, UseColumnPinningResult, UseColumnHeaderMenuStateParams, UseColumnHeaderMenuStateResult, UseDataGridTableSetupParams, UseDataGridTableSetupResult, MaybeShallowRef, } from '@alaarab/ogrid-vue';
|
|
5
|
-
export { useOGrid, useDataGridState, useActiveCell, useCellEditing, useCellSelection, useClipboard, useRowSelection, useKeyboardNavigation, useFillHandle, useUndoRedo, useContextMenu, useColumnResize, useColumnReorder, useVirtualScroll, useFilterOptions, useDebounce, useDebouncedCallback, useTableLayout, useColumnHeaderFilterState, useTextFilterState, useMultiSelectFilterState, usePeopleFilterState, useDateFilterState, useColumnChooserState, useInlineCellEditorState, useRichSelectState, useSideBarState, useColumnPinning, useColumnHeaderMenuState, useDataGridTableSetup, } from '@alaarab/ogrid-vue';
|
|
4
|
+
export type { UseOGridResult, UseOGridPagination, UseOGridColumnChooser, UseOGridLayout, UseOGridFilters, ColumnChooserPlacement, UseHeadlessGridParams, UseHeadlessGridResult, HeadlessGridRowId, HeadlessGridSortState, UseDataGridStateParams, UseDataGridStateResult, DataGridLayoutState, DataGridRowSelectionState, DataGridEditingState, DataGridCellInteractionState, DataGridContextMenuState, DataGridViewModelState, DataGridPinningState, UseActiveCellResult, EditingCell, UseCellEditingParams, UseCellEditingResult, UseCellSelectionParams, UseCellSelectionResult, UseClipboardParams, UseClipboardResult, UseRowSelectionParams, UseRowSelectionResult, UseKeyboardNavigationParams, UseKeyboardNavigationResult, UseFillHandleParams, UseFillHandleResult, UseUndoRedoParams, UseUndoRedoResult, ContextMenuPosition, UseContextMenuResult, UseColumnResizeParams, UseColumnResizeResult, UseColumnReorderParams, UseColumnReorderResult, UseVirtualScrollParams, UseVirtualScrollResult, UseFilterOptionsResult, UseTableLayoutParams, UseTableLayoutResult, UseColumnHeaderFilterStateParams, UseColumnHeaderFilterStateResult, UseTextFilterStateParams, UseTextFilterStateResult, UseMultiSelectFilterStateParams, UseMultiSelectFilterStateResult, UsePeopleFilterStateParams, UsePeopleFilterStateResult, UseDateFilterStateParams, UseDateFilterStateResult, UseColumnChooserStateParams, UseColumnChooserStateResult, InlineCellEditorType, UseInlineCellEditorStateParams, UseInlineCellEditorStateResult, UseRichSelectStateParams, UseRichSelectStateResult, UseSideBarStateParams, UseSideBarStateResult, DebouncedFn, UseColumnPinningParams, UseColumnPinningResult, UseColumnHeaderMenuStateParams, UseColumnHeaderMenuStateResult, UseDataGridTableSetupParams, UseDataGridTableSetupResult, MaybeShallowRef, } from '@alaarab/ogrid-vue';
|
|
5
|
+
export { useOGrid, useHeadlessGrid, useDataGridState, useActiveCell, useCellEditing, useCellSelection, useClipboard, useRowSelection, useKeyboardNavigation, useFillHandle, useUndoRedo, useContextMenu, useColumnResize, useColumnReorder, useVirtualScroll, useFilterOptions, useDebounce, useDebouncedCallback, useTableLayout, useColumnHeaderFilterState, useTextFilterState, useMultiSelectFilterState, usePeopleFilterState, useDateFilterState, useColumnChooserState, useInlineCellEditorState, useRichSelectState, useSideBarState, useColumnPinning, useColumnHeaderMenuState, useDataGridTableSetup, } from '@alaarab/ogrid-vue';
|
|
6
6
|
export type { HeaderFilterConfigInput, HeaderFilterConfig, CellRenderDescriptorInput, CellRenderDescriptor, CellRenderMode, CellInteractionHandlers, CellInteractionProps, } from '@alaarab/ogrid-vue';
|
|
7
7
|
export { getCellInteractionProps } from '@alaarab/ogrid-vue';
|
|
8
8
|
export { createDataGridTable, type IDataGridTableUIBindings } from '@alaarab/ogrid-vue';
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@alaarab/ogrid-vue-radix",
|
|
3
|
-
"version": "2.
|
|
3
|
+
"version": "2.8.1",
|
|
4
4
|
"description": "OGrid Vue Radix – Lightweight data grid with sorting, filtering, pagination, column chooser, and CSV export. Built with Headless UI Vue.",
|
|
5
5
|
"main": "dist/esm/index.js",
|
|
6
6
|
"module": "dist/esm/index.js",
|
|
@@ -53,7 +53,7 @@
|
|
|
53
53
|
"node": ">=18"
|
|
54
54
|
},
|
|
55
55
|
"dependencies": {
|
|
56
|
-
"@alaarab/ogrid-vue": "2.
|
|
56
|
+
"@alaarab/ogrid-vue": "2.8.1"
|
|
57
57
|
},
|
|
58
58
|
"peerDependencies": {
|
|
59
59
|
"@headlessui/vue": "^1.7.23",
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
.column-header[data-v-58ce6f63]{box-sizing:border-box;flex:1;align-items:center;gap:2px;min-width:0;display:flex}.column-name[data-v-58ce6f63]{text-overflow:ellipsis;white-space:nowrap;min-width:0;color:var(--ogrid-fg,#000000de);flex:1;font-size:14px;font-weight:600;overflow:hidden}.filter-icon[data-v-58ce6f63]{width:24px;height:24px;color:var(--ogrid-fg-muted,#00000080);cursor:pointer;background:0 0;border:none;border-radius:4px;flex-shrink:0;justify-content:center;align-items:center;padding:4px;font-size:14px;display:flex;position:relative}@media (pointer:coarse){.filter-icon[data-v-58ce6f63]{width:36px;height:36px;padding:6px}}.filter-icon[data-v-58ce6f63]:hover{background:var(--ogrid-hover-bg,#0000000a);color:var(--ogrid-fg,#000000de)}.filter-icon.filter-active[data-v-58ce6f63]{background:var(--ogrid-header-bg,#0000000a);color:var(--ogrid-accent,#0078d4)}.filter-icon.filter-open[data-v-58ce6f63]{background:var(--ogrid-header-bg,#0000000a)}.filter-badge[data-v-58ce6f63]{background:var(--ogrid-accent,#0078d4);border:1px solid var(--ogrid-bg,#fff);border-radius:50%;width:6px;height:6px;position:absolute;top:2px;right:2px}.popover-content[data-v-58ce6f63]{z-index:1000;min-width:280px;max-width:320px}@media (width<=360px){.popover-content[data-v-58ce6f63]{min-width:calc(100vw - 24px);max-width:calc(100vw - 24px)}}.popover-content[data-v-58ce6f63]{background:var(--ogrid-bg,#fff);border:1px solid var(--ogrid-border,#0000001f);color:var(--ogrid-fg,#000000de);border-radius:8px;overflow:hidden;box-shadow:0 4px 16px #0000001f}.popover-header[data-v-58ce6f63]{color:var(--ogrid-fg-muted,#00000080);border-bottom:1px solid var(--ogrid-border,#0000001f);background:var(--ogrid-header-bg,#0000000a);padding:10px 14px;font-size:12px;font-weight:600}.popover-search[data-v-58ce6f63]{border-bottom:1px solid var(--ogrid-border,#0000001f);padding:10px 12px}.search-input[data-v-58ce6f63]{border:1px solid var(--ogrid-border,#0000001f);box-sizing:border-box;background:var(--ogrid-bg,#fff);width:100%;color:var(--ogrid-fg,#000000de);border-radius:4px;padding:6px 10px;font-size:14px}.search-input[data-v-58ce6f63]:focus{border-color:var(--ogrid-accent,#0078d4);outline:none}.result-count[data-v-58ce6f63]{color:var(--ogrid-fg-muted,#00000080);margin-top:6px;font-size:11px}.select-all-row[data-v-58ce6f63]{border-bottom:1px solid var(--ogrid-border,#0000001f);background:var(--ogrid-header-bg,#0000000a);gap:8px;padding:6px 12px;display:flex}.select-all-button[data-v-58ce6f63]{color:var(--ogrid-accent,#0078d4);cursor:pointer;background:0 0;border:none;border-radius:4px;padding:4px 8px;font-size:12px;font-weight:500}.select-all-button[data-v-58ce6f63]:hover{background:var(--ogrid-hover-bg,#0000000a)}.popover-options[data-v-58ce6f63]{max-height:250px;padding:6px 0;overflow-y:auto}.popover-option[data-v-58ce6f63]{color:var(--ogrid-fg,#000000de);align-items:center;gap:8px;padding:4px 12px;font-size:13px;display:flex}@media (pointer:coarse){.popover-option[data-v-58ce6f63]{min-height:44px}}.popover-option[data-v-58ce6f63]:hover{background:var(--ogrid-hover-bg,#0000000a)}.filter-checkbox[data-v-58ce6f63]{border:1px solid var(--ogrid-border,#0000001f);cursor:pointer;border-radius:3px;flex-shrink:0;width:16px;height:16px}.popover-actions[data-v-58ce6f63]{border-top:1px solid var(--ogrid-border,#0000001f);background:var(--ogrid-header-bg,#0000000a);justify-content:flex-end;gap:8px;padding:8px 12px;display:flex}.clear-button[data-v-58ce6f63]{border:1px solid var(--ogrid-border,#0000001f);background:var(--ogrid-bg,#fff);color:var(--ogrid-fg-secondary,#0009);cursor:pointer;border-radius:4px;padding:6px 12px;font-size:12px}@media (pointer:coarse){.clear-button[data-v-58ce6f63]{min-height:44px;padding:10px 16px}}.clear-button[data-v-58ce6f63]:hover{background:var(--ogrid-hover-bg,#0000000a);color:var(--ogrid-fg,#000000de)}.clear-button[data-v-58ce6f63]:disabled{opacity:.5;cursor:not-allowed}.apply-button[data-v-58ce6f63]{background:var(--ogrid-accent,#0078d4);color:#fff;cursor:pointer;border:none;border-radius:4px;padding:6px 16px;font-size:12px;font-weight:600}@media (pointer:coarse){.apply-button[data-v-58ce6f63]{min-height:44px;padding:10px 20px}}.apply-button[data-v-58ce6f63]:hover{opacity:.85}.loading-container[data-v-58ce6f63],.no-results[data-v-58ce6f63]{text-align:center;color:var(--ogrid-fg-secondary,#0009);padding:20px;font-size:13px}.selected-user-section[data-v-58ce6f63]{border-bottom:1px solid var(--ogrid-border,#e0e0e0);padding:8px 12px}.selected-user-label[data-v-58ce6f63]{color:var(--ogrid-muted,#666);margin-bottom:4px;font-size:11px}.selected-user[data-v-58ce6f63]{justify-content:space-between;align-items:center;gap:8px;display:flex}.user-info[data-v-58ce6f63]{align-items:center;gap:8px;min-width:0;display:flex}.user-text[data-v-58ce6f63]{min-width:0;font-size:13px}.user-text .user-secondary[data-v-58ce6f63]{color:var(--ogrid-muted,#666);font-size:12px}.remove-user-button[data-v-58ce6f63]{cursor:pointer;color:var(--ogrid-muted,#666);background:0 0;border:none;flex-shrink:0;padding:4px}.remove-user-button[data-v-58ce6f63]:hover{color:var(--ogrid-fg,#333)}.native-input-wrapper[data-v-58ce6f63]{border:1px solid var(--ogrid-border,#d1d1d1);background:var(--ogrid-bg,#fff);box-sizing:border-box;border-radius:4px;align-items:center;gap:8px;width:100%;min-height:36px;padding:6px 12px;display:flex}.native-input-wrapper[data-v-58ce6f63]:focus-within{border-color:var(--ogrid-primary,#06c);outline:none}.native-input[data-v-58ce6f63]{min-width:0;color:var(--ogrid-fg,#242424);background:0 0;border:none;outline:none;flex:1;padding:0;font-family:inherit;font-size:14px}.native-input[data-v-58ce6f63]::placeholder{color:var(--ogrid-muted,#707070)}.person-option[data-v-58ce6f63]{cursor:pointer;padding:8px 12px}.person-option[data-v-58ce6f63]:hover{background:var(--ogrid-bg-hover,#f5f5f5)}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
.ogrid-column-header-menu[data-v-217034af]{z-index:9999;background-color:var(--ogrid-bg,#fff);color:var(--ogrid-fg,#000000de);border:1px solid var(--ogrid-border,#0000001f);border-radius:4px;min-width:160px;padding:4px 0;position:fixed;box-shadow:0 2px 8px #00000026}.ogrid-column-header-menu-item[data-v-217034af]{cursor:pointer;color:var(--ogrid-fg,#000000de);align-items:center;padding:6px 12px;font-size:.875rem;display:flex}.ogrid-column-header-menu-item[data-v-217034af]:hover:not(.disabled){background-color:var(--ogrid-hover-bg,#0000000a)}.ogrid-column-header-menu-item.disabled[data-v-217034af]{cursor:default;opacity:.4}.ogrid-column-header-menu-divider[data-v-217034af]{background-color:var(--ogrid-border,#0000001f);height:1px;margin:4px 0}
|
package/dist/esm/DataGridTable/GridContextMenu.vue?vue&type=style&index=0&scoped=204e9cc9&lang.css
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
.context-menu-wrapper[data-v-204e9cc9]{z-index:9999;position:relative}.context-menu[data-v-204e9cc9]{border:1px solid var(--ogrid-border-color,#e0e0e0);background:#fff;border-radius:4px;outline:none;min-width:200px;padding:4px 0;position:fixed;box-shadow:0 4px 12px #00000026}.menu-item[data-v-204e9cc9]{text-align:left;cursor:pointer;width:100%;color:var(--ogrid-text-primary,#000);background:0 0;border:none;align-items:center;padding:8px 12px;font-size:14px;transition:background-color .1s;display:flex}.menu-item.active[data-v-204e9cc9]:not(.disabled){background-color:var(--ogrid-bg-hover,#f5f5f5)}.menu-item.disabled[data-v-204e9cc9]{color:var(--ogrid-text-disabled,#999);cursor:not-allowed;opacity:.5}.menu-item-label[data-v-204e9cc9]{flex:1}.menu-item-shortcut[data-v-204e9cc9]{color:var(--ogrid-text-secondary,#0006);margin-left:24px;font-size:.8em}.divider[data-v-204e9cc9]{background-color:var(--ogrid-border-color,#e0e0e0);height:1px;margin:4px 0}
|