@alaarab/ogrid-vue-radix 2.7.1 → 2.7.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/esm/ColumnHeaderFilter/ColumnHeaderFilter.js +2 -2
- package/dist/esm/ColumnHeaderFilter/ColumnHeaderFilter.module.css +3 -22
- package/dist/esm/ColumnHeaderFilter/ColumnHeaderFilter.vue?vue&type=style&index=0&scoped=7b7a41e5&lang.css +1 -0
- package/dist/esm/ColumnHeaderFilter/ColumnHeaderFilter.vue_vue_type_script_setup_true_lang.js +22 -22
- package/dist/esm/ColumnHeaderFilter/MultiSelectFilterPopover.vue?vue&type=style&index=0&scoped=b40a6834&lang.css +1 -1
- package/dist/esm/ColumnHeaderFilter/PeopleFilterPopover.vue?vue&type=style&index=0&scoped=58ce6f63&lang.css +1 -1
- 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=adf9a406&lang.css → ColumnHeaderMenu.vue?vue&type=style&index=0&scoped=217034af&lang.css} +1 -1
- package/dist/esm/ColumnHeaderMenu/ColumnHeaderMenu.vue_vue_type_script_setup_true_lang.js +24 -22
- package/dist/esm/DataGridTable/DataGridTable.css +1 -1
- package/package.json +2 -2
- package/dist/esm/ColumnHeaderFilter/ColumnHeaderFilter.vue?vue&type=style&index=0&scoped=f4fffe45&lang.css +0 -1
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import e from "../_virtual/_plugin-vue_export-helper.js";
|
|
2
2
|
import t from "./ColumnHeaderFilter.vue_vue_type_script_setup_true_lang.js";
|
|
3
3
|
/* empty css */
|
|
4
|
-
var
|
|
4
|
+
var u = /* @__PURE__ */ e(t, [["__scopeId", "data-v-7b7a41e5"]]);
|
|
5
5
|
export {
|
|
6
|
-
|
|
6
|
+
u as default
|
|
7
7
|
};
|
|
@@ -1,26 +1,15 @@
|
|
|
1
1
|
.column-header {
|
|
2
2
|
display: flex;
|
|
3
3
|
align-items: center;
|
|
4
|
-
gap:
|
|
5
|
-
width: 100%;
|
|
6
|
-
max-width: 100%;
|
|
7
|
-
min-width: 0;
|
|
8
|
-
position: relative;
|
|
9
|
-
box-sizing: border-box;
|
|
10
|
-
}
|
|
11
|
-
|
|
12
|
-
.header-content {
|
|
13
|
-
display: flex;
|
|
14
|
-
align-items: center;
|
|
4
|
+
gap: 2px;
|
|
15
5
|
flex: 1;
|
|
16
6
|
min-width: 0;
|
|
17
|
-
|
|
7
|
+
box-sizing: border-box;
|
|
18
8
|
}
|
|
19
9
|
|
|
20
10
|
.column-name {
|
|
21
|
-
|
|
11
|
+
flex: 1;
|
|
22
12
|
min-width: 0;
|
|
23
|
-
max-width: 100%;
|
|
24
13
|
overflow: hidden;
|
|
25
14
|
text-overflow: ellipsis;
|
|
26
15
|
white-space: nowrap;
|
|
@@ -29,14 +18,6 @@
|
|
|
29
18
|
color: var(--ogrid-fg, rgba(0, 0, 0, 0.87));
|
|
30
19
|
}
|
|
31
20
|
|
|
32
|
-
.header-actions {
|
|
33
|
-
display: flex;
|
|
34
|
-
align-items: center;
|
|
35
|
-
gap: 2px;
|
|
36
|
-
margin-left: auto;
|
|
37
|
-
flex-shrink: 0;
|
|
38
|
-
}
|
|
39
|
-
|
|
40
21
|
.filter-icon {
|
|
41
22
|
display: flex;
|
|
42
23
|
align-items: center;
|
|
@@ -0,0 +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;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-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:1px solid var(--ogrid-bg,#fff);border-radius:50%;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);color:var(--ogrid-fg,#000000de);border-radius:8px;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);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-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;background:0 0;border:none;border-radius:4px;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);cursor:pointer;border-radius:3px;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);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-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]{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-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}
|
package/dist/esm/ColumnHeaderFilter/ColumnHeaderFilter.vue_vue_type_script_setup_true_lang.js
CHANGED
|
@@ -2,30 +2,30 @@ import I from "./TextFilterPopover.js";
|
|
|
2
2
|
import z from "./MultiSelectFilterPopover.js";
|
|
3
3
|
import E from "./PeopleFilterPopover.js";
|
|
4
4
|
import { useColumnHeaderFilterState as H } from "@alaarab/ogrid-vue";
|
|
5
|
-
import { Teleport as M, createBlock as p, createCommentVNode as u, createElementBlock as s, createElementVNode as n, createTextVNode as
|
|
6
|
-
var q =
|
|
5
|
+
import { Teleport as M, createBlock as p, createCommentVNode as u, createElementBlock as s, createElementVNode as n, createTextVNode as y, defineComponent as $, normalizeClass as w, normalizeStyle as K, openBlock as r, toDisplayString as C, unref as e, withModifiers as j } from "vue";
|
|
6
|
+
var q = ["title"], G = [
|
|
7
7
|
"aria-label",
|
|
8
8
|
"aria-expanded",
|
|
9
9
|
"title"
|
|
10
|
-
],
|
|
10
|
+
], J = {
|
|
11
11
|
key: 0,
|
|
12
12
|
class: "filter-badge"
|
|
13
|
-
},
|
|
13
|
+
}, Q = { class: "popover-header" }, W = { key: 3 }, X = { style: {
|
|
14
14
|
padding: "8px 12px",
|
|
15
15
|
display: "flex",
|
|
16
16
|
"flex-direction": "column",
|
|
17
17
|
gap: "6px"
|
|
18
|
-
} },
|
|
18
|
+
} }, Y = { style: {
|
|
19
19
|
display: "flex",
|
|
20
20
|
"align-items": "center",
|
|
21
21
|
gap: "6px",
|
|
22
22
|
"font-size": "12px"
|
|
23
|
-
} },
|
|
23
|
+
} }, Z = ["value"], _ = { style: {
|
|
24
24
|
display: "flex",
|
|
25
25
|
"align-items": "center",
|
|
26
26
|
gap: "6px",
|
|
27
27
|
"font-size": "12px"
|
|
28
|
-
} },
|
|
28
|
+
} }, ee = ["value"], te = { class: "popover-actions" }, le = ["disabled"], se = /* @__PURE__ */ $({
|
|
29
29
|
__name: "ColumnHeaderFilter",
|
|
30
30
|
props: {
|
|
31
31
|
columnKey: {},
|
|
@@ -56,7 +56,7 @@ var q = { class: "header-content" }, G = ["title"], J = { class: "header-actions
|
|
|
56
56
|
onDateChange: {}
|
|
57
57
|
},
|
|
58
58
|
setup(l) {
|
|
59
|
-
const a = l, { headerRef:
|
|
59
|
+
const a = l, { headerRef: v, popoverRef: x, isFilterOpen: c, hasActiveFilter: g, tempSelected: S, tempTextValue: T, searchText: F, filteredOptions: k, peopleSearchText: V, peopleSuggestions: b, isPeopleLoading: D, peopleInputRef: U, tempDateFrom: h, tempDateTo: m, setTempTextValue: A, setSearchText: O, setPeopleSearchText: L, setTempDateFrom: N, setTempDateTo: P, popoverPosition: f, handlers: o } = H({
|
|
60
60
|
filterType: a.filterType,
|
|
61
61
|
isSorted: a.isSorted,
|
|
62
62
|
isSortedDescending: a.isSortedDescending,
|
|
@@ -73,7 +73,7 @@ var q = { class: "header-content" }, G = ["title"], J = { class: "header-actions
|
|
|
73
73
|
dateValue: a.dateValue,
|
|
74
74
|
onDateChange: a.onDateChange
|
|
75
75
|
}), R = (d) => {
|
|
76
|
-
|
|
76
|
+
v.value = d;
|
|
77
77
|
}, B = (d) => {
|
|
78
78
|
x.value = d;
|
|
79
79
|
};
|
|
@@ -81,16 +81,16 @@ var q = { class: "header-content" }, G = ["title"], J = { class: "header-actions
|
|
|
81
81
|
class: "column-header",
|
|
82
82
|
ref: R
|
|
83
83
|
}, [
|
|
84
|
-
n("
|
|
84
|
+
n("span", {
|
|
85
85
|
class: "column-name",
|
|
86
86
|
title: l.columnName,
|
|
87
87
|
"data-header-label": ""
|
|
88
|
-
},
|
|
89
|
-
|
|
88
|
+
}, C(l.columnName), 9, q),
|
|
89
|
+
l.filterType !== "none" ? (r(), s("button", {
|
|
90
90
|
key: 0,
|
|
91
91
|
class: w([
|
|
92
92
|
"filter-icon",
|
|
93
|
-
{ "filter-active": e(
|
|
93
|
+
{ "filter-active": e(g) },
|
|
94
94
|
{ "filter-open": e(c) }
|
|
95
95
|
]),
|
|
96
96
|
onClick: t[0] || (t[0] = (...i) => e(o).handleFilterIconClick && e(o).handleFilterIconClick(...i)),
|
|
@@ -98,7 +98,7 @@ var q = { class: "header-content" }, G = ["title"], J = { class: "header-actions
|
|
|
98
98
|
"aria-expanded": e(c),
|
|
99
99
|
"aria-haspopup": "dialog",
|
|
100
100
|
title: `Filter ${l.columnName}`
|
|
101
|
-
}, [t[6] || (t[6] = n("span", { "aria-hidden": "" }, "▼", -1)), e(
|
|
101
|
+
}, [t[6] || (t[6] = n("span", { "aria-hidden": "" }, "▼", -1)), e(g) ? (r(), s("span", J)) : u("", !0)], 10, G)) : u("", !0),
|
|
102
102
|
(r(), p(M, { to: "body" }, [e(c) && l.filterType !== "none" ? (r(), s("div", {
|
|
103
103
|
key: 0,
|
|
104
104
|
ref: B,
|
|
@@ -110,7 +110,7 @@ var q = { class: "header-content" }, G = ["title"], J = { class: "header-actions
|
|
|
110
110
|
} : {}),
|
|
111
111
|
onClick: t[5] || (t[5] = j(() => {
|
|
112
112
|
}, ["stop"]))
|
|
113
|
-
}, [n("div",
|
|
113
|
+
}, [n("div", Q, "Filter: " + C(l.columnName), 1), l.filterType === "text" ? (r(), p(I, {
|
|
114
114
|
key: 0,
|
|
115
115
|
value: e(T) ?? "",
|
|
116
116
|
onValueChange: e(A),
|
|
@@ -163,21 +163,21 @@ var q = { class: "header-content" }, G = ["title"], J = { class: "header-actions
|
|
|
163
163
|
"onUserSelect",
|
|
164
164
|
"onClearUser",
|
|
165
165
|
"inputRef"
|
|
166
|
-
])) : l.filterType === "date" ? (r(), s("div",
|
|
166
|
+
])) : l.filterType === "date" ? (r(), s("div", W, [n("div", X, [n("label", Y, [t[7] || (t[7] = y(" From: ", -1)), n("input", {
|
|
167
167
|
type: "date",
|
|
168
|
-
value: e(
|
|
168
|
+
value: e(h),
|
|
169
169
|
onInput: t[1] || (t[1] = (i) => e(N)(i.target.value)),
|
|
170
170
|
style: { flex: "1" }
|
|
171
|
-
}, null, 40,
|
|
171
|
+
}, null, 40, Z)]), n("label", _, [t[8] || (t[8] = y(" To: ", -1)), n("input", {
|
|
172
172
|
type: "date",
|
|
173
173
|
value: e(m),
|
|
174
174
|
onInput: t[2] || (t[2] = (i) => e(P)(i.target.value)),
|
|
175
175
|
style: { flex: "1" }
|
|
176
|
-
}, null, 40,
|
|
176
|
+
}, null, 40, ee)])]), n("div", te, [n("button", {
|
|
177
177
|
class: "clear-button",
|
|
178
178
|
onClick: t[3] || (t[3] = (...i) => e(o).handleDateClear && e(o).handleDateClear(...i)),
|
|
179
|
-
disabled: !e(
|
|
180
|
-
}, " Clear ", 8,
|
|
179
|
+
disabled: !e(h) && !e(m)
|
|
180
|
+
}, " Clear ", 8, le), n("button", {
|
|
181
181
|
class: "apply-button",
|
|
182
182
|
onClick: t[4] || (t[4] = (...i) => e(o).handleDateApply && e(o).handleDateApply(...i))
|
|
183
183
|
}, " Apply ")])])) : u("", !0)], 4)) : u("", !0)]))
|
|
@@ -185,5 +185,5 @@ var q = { class: "header-content" }, G = ["title"], J = { class: "header-actions
|
|
|
185
185
|
}
|
|
186
186
|
});
|
|
187
187
|
export {
|
|
188
|
-
|
|
188
|
+
se as default
|
|
189
189
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
.column-header[data-v-b40a6834]{box-sizing:border-box;
|
|
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;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-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:1px solid var(--ogrid-bg,#fff);border-radius:50%;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);color:var(--ogrid-fg,#000000de);border-radius:8px;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);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-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;background:0 0;border:none;border-radius:4px;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);cursor:pointer;border-radius:3px;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);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-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]{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-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 +1 @@
|
|
|
1
|
-
.column-header[data-v-58ce6f63]{box-sizing:border-box;
|
|
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 +1 @@
|
|
|
1
|
-
.column-header[data-v-0baa080d]{box-sizing:border-box;
|
|
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;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-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:1px solid var(--ogrid-bg,#fff);border-radius:50%;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);color:var(--ogrid-fg,#000000de);border-radius:8px;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);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-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;background:0 0;border:none;border-radius:4px;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);cursor:pointer;border-radius:3px;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);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-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]{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-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 a = /* @__PURE__ */ e(_, [["__scopeId", "data-v-217034af"]]);
|
|
5
5
|
export {
|
|
6
|
-
|
|
6
|
+
a as default
|
|
7
7
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
.ogrid-column-header-menu[data-v-
|
|
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}
|
|
@@ -1,10 +1,10 @@
|
|
|
1
1
|
import { getColumnHeaderMenuItems as f } from "@alaarab/ogrid-vue";
|
|
2
|
-
import { Fragment as
|
|
3
|
-
var
|
|
2
|
+
import { Fragment as u, Teleport as h, computed as g, createBlock as v, createCommentVNode as d, createElementBlock as r, createElementVNode as C, defineComponent as b, normalizeClass as S, normalizeStyle as R, onBeforeUnmount as z, onMounted as B, openBlock as i, ref as k, renderList as A, toDisplayString as F } from "vue";
|
|
3
|
+
var P = {
|
|
4
4
|
key: 0,
|
|
5
5
|
class: "ogrid-column-header-menu-divider",
|
|
6
6
|
role: "separator"
|
|
7
|
-
},
|
|
7
|
+
}, L = ["aria-disabled", "onClick"], U = /* @__PURE__ */ b({
|
|
8
8
|
__name: "ColumnHeaderMenu",
|
|
9
9
|
props: {
|
|
10
10
|
isOpen: { type: Boolean },
|
|
@@ -25,15 +25,15 @@ var A = {
|
|
|
25
25
|
isSortable: { type: Boolean },
|
|
26
26
|
isResizable: { type: Boolean }
|
|
27
27
|
},
|
|
28
|
-
setup(
|
|
29
|
-
const e =
|
|
28
|
+
setup(o) {
|
|
29
|
+
const e = o, l = k(null), p = g(() => f({
|
|
30
30
|
canPinLeft: e.canPinLeft,
|
|
31
31
|
canPinRight: e.canPinRight,
|
|
32
32
|
canUnpin: e.canUnpin,
|
|
33
33
|
currentSort: e.currentSort,
|
|
34
34
|
isSortable: e.isSortable,
|
|
35
35
|
isResizable: e.isResizable
|
|
36
|
-
})),
|
|
36
|
+
})), a = {
|
|
37
37
|
pinLeft: e.onPinLeft,
|
|
38
38
|
pinRight: e.onPinRight,
|
|
39
39
|
unpin: e.onUnpin,
|
|
@@ -42,34 +42,36 @@ var A = {
|
|
|
42
42
|
clearSort: e.onClearSort,
|
|
43
43
|
autosizeThis: e.onAutosizeThis,
|
|
44
44
|
autosizeAll: e.onAutosizeAll
|
|
45
|
-
}, m = (
|
|
46
|
-
!
|
|
47
|
-
}, s = (
|
|
48
|
-
|
|
45
|
+
}, m = (t, c) => {
|
|
46
|
+
!c && a[t] && a[t]();
|
|
47
|
+
}, s = (t) => {
|
|
48
|
+
l.value && !l.value.contains(t.target) && e.onClose();
|
|
49
49
|
};
|
|
50
|
-
return
|
|
50
|
+
return B(() => {
|
|
51
51
|
document.addEventListener("mousedown", s);
|
|
52
|
-
}),
|
|
52
|
+
}), z(() => {
|
|
53
53
|
document.removeEventListener("mousedown", s);
|
|
54
|
-
}), (
|
|
54
|
+
}), (t, c) => (i(), v(h, { to: "body" }, [o.isOpen && o.anchorElement ? (i(), r("div", {
|
|
55
55
|
key: 0,
|
|
56
56
|
ref_key: "menuRef",
|
|
57
|
-
ref:
|
|
57
|
+
ref: l,
|
|
58
58
|
role: "menu",
|
|
59
59
|
"aria-label": "Column options",
|
|
60
60
|
class: "ogrid-column-header-menu",
|
|
61
|
-
style:
|
|
62
|
-
|
|
63
|
-
|
|
61
|
+
style: R({
|
|
62
|
+
position: "fixed",
|
|
63
|
+
zIndex: 9999,
|
|
64
|
+
top: `${o.anchorElement.getBoundingClientRect().bottom + 4}px`,
|
|
65
|
+
left: `${o.anchorElement.getBoundingClientRect().left}px`
|
|
64
66
|
})
|
|
65
|
-
}, [(
|
|
67
|
+
}, [(i(!0), r(u, null, A(p.value, (n, y) => (i(), r(u, { key: n.id }, [n.divider && y > 0 ? (i(), r("div", P)) : d("", !0), C("div", {
|
|
66
68
|
role: "menuitem",
|
|
67
69
|
"aria-disabled": n.disabled ? "true" : void 0,
|
|
68
|
-
class:
|
|
69
|
-
onClick: (
|
|
70
|
-
},
|
|
70
|
+
class: S(["ogrid-column-header-menu-item", { disabled: n.disabled }]),
|
|
71
|
+
onClick: (_) => m(n.id, n.disabled ?? !1)
|
|
72
|
+
}, F(n.label), 11, L)], 64))), 128))], 4)) : d("", !0)]));
|
|
71
73
|
}
|
|
72
74
|
});
|
|
73
75
|
export {
|
|
74
|
-
|
|
76
|
+
U as default
|
|
75
77
|
};
|
|
@@ -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}@media (hover:hover){.ogrid-column-menu-btn{visibility:hidden}th:hover .ogrid-column-menu-btn{visibility:visible}}.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-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)}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@alaarab/ogrid-vue-radix",
|
|
3
|
-
"version": "2.7.
|
|
3
|
+
"version": "2.7.2",
|
|
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.7.
|
|
56
|
+
"@alaarab/ogrid-vue": "2.7.2"
|
|
57
57
|
},
|
|
58
58
|
"peerDependencies": {
|
|
59
59
|
"@headlessui/vue": "^1.7.23",
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
.column-header[data-v-f4fffe45]{box-sizing:border-box;align-items:center;gap:4px;width:100%;min-width:0;max-width:100%;display:flex;position:relative}.header-content[data-v-f4fffe45]{flex:1;align-items:center;min-width:0;display:flex;overflow:hidden}.column-name[data-v-f4fffe45]{text-overflow:ellipsis;white-space:nowrap;min-width:0;max-width:100%;color:var(--ogrid-fg,#000000de);font-size:14px;font-weight:600;display:block;overflow:hidden}.header-actions[data-v-f4fffe45]{flex-shrink:0;align-items:center;gap:2px;margin-left:auto;display:flex}.filter-icon[data-v-f4fffe45]{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-f4fffe45]{width:36px;height:36px;padding:6px}}.filter-icon[data-v-f4fffe45]:hover{background:var(--ogrid-hover-bg,#0000000a);color:var(--ogrid-fg,#000000de)}.filter-icon.filter-active[data-v-f4fffe45]{background:var(--ogrid-header-bg,#0000000a);color:var(--ogrid-accent,#0078d4)}.filter-icon.filter-open[data-v-f4fffe45]{background:var(--ogrid-header-bg,#0000000a)}.filter-badge[data-v-f4fffe45]{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-f4fffe45]{z-index:1000;min-width:280px;max-width:320px}@media (width<=360px){.popover-content[data-v-f4fffe45]{min-width:calc(100vw - 24px);max-width:calc(100vw - 24px)}}.popover-content[data-v-f4fffe45]{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-f4fffe45]{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-f4fffe45]{border-bottom:1px solid var(--ogrid-border,#0000001f);padding:10px 12px}.search-input[data-v-f4fffe45]{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-f4fffe45]:focus{border-color:var(--ogrid-accent,#0078d4);outline:none}.result-count[data-v-f4fffe45]{color:var(--ogrid-fg-muted,#00000080);margin-top:6px;font-size:11px}.select-all-row[data-v-f4fffe45]{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-f4fffe45]{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-f4fffe45]:hover{background:var(--ogrid-hover-bg,#0000000a)}.popover-options[data-v-f4fffe45]{max-height:250px;padding:6px 0;overflow-y:auto}.popover-option[data-v-f4fffe45]{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-f4fffe45]{min-height:44px}}.popover-option[data-v-f4fffe45]:hover{background:var(--ogrid-hover-bg,#0000000a)}.filter-checkbox[data-v-f4fffe45]{border:1px solid var(--ogrid-border,#0000001f);cursor:pointer;border-radius:3px;flex-shrink:0;width:16px;height:16px}.popover-actions[data-v-f4fffe45]{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-f4fffe45]{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-f4fffe45]{min-height:44px;padding:10px 16px}}.clear-button[data-v-f4fffe45]:hover{background:var(--ogrid-hover-bg,#0000000a);color:var(--ogrid-fg,#000000de)}.clear-button[data-v-f4fffe45]:disabled{opacity:.5;cursor:not-allowed}.apply-button[data-v-f4fffe45]{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-f4fffe45]{min-height:44px;padding:10px 20px}}.apply-button[data-v-f4fffe45]:hover{opacity:.85}.loading-container[data-v-f4fffe45],.no-results[data-v-f4fffe45]{text-align:center;color:var(--ogrid-fg-secondary,#0009);padding:20px;font-size:13px}
|