@alaarab/ogrid-vue-radix 2.6.0 → 2.7.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/esm/ColumnChooser/ColumnChooser.css +1 -1
- package/dist/esm/ColumnChooser/ColumnChooser.vue.js +2 -2
- package/dist/esm/ColumnChooser/ColumnChooser.vue2.js +71 -62
- package/dist/esm/DataGridTable/DataGridTable.css +1 -1
- package/dist/esm/DataGridTable/GridContextMenu.css +1 -1
- package/dist/esm/DataGridTable/GridContextMenu.vue.js +2 -2
- package/dist/esm/DataGridTable/GridContextMenu.vue2.js +39 -28
- package/dist/types/DataGridTable/GridContextMenu.vue.d.ts +62 -1
- package/package.json +14 -3
|
@@ -1 +1 @@
|
|
|
1
|
-
.container[data-v-
|
|
1
|
+
.container[data-v-9d3085bf]{position:relative;display:inline-flex}.trigger-button[data-v-9d3085bf]{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border:1px solid var(--ogrid-border, rgba(0, 0, 0, .12));border-radius:6px;background:var(--ogrid-bg, #fff);cursor:pointer;font-size:13px;font-weight:600;color:var(--ogrid-fg, rgba(0, 0, 0, .87));transition:background .15s,border-color .15s}.trigger-button[data-v-9d3085bf]:hover{background:var(--ogrid-hover-bg, rgba(0, 0, 0, .04));border-color:var(--ogrid-fg-muted, rgba(0, 0, 0, .5))}.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]{font-size:12px;color:var(--ogrid-fg-muted, rgba(0, 0, 0, .5))}.dropdown[data-v-9d3085bf]{position:absolute;right:0;top:calc(100% + 4px);min-width:220px;background:var(--ogrid-bg, #fff);border-radius:6px;box-shadow:0 4px 16px #0000001f;border:1px solid var(--ogrid-border, rgba(0, 0, 0, .12));display:flex;flex-direction:column;padding:0;z-index:50}.header[data-v-9d3085bf]{padding:8px 12px;border-bottom:1px solid var(--ogrid-border, rgba(0, 0, 0, .12));font-weight:600;font-size:13px;color:var(--ogrid-fg, rgba(0, 0, 0, .87));background:var(--ogrid-header-bg, rgba(0, 0, 0, .04))}.options-list[data-v-9d3085bf]{max-height:320px;overflow-y:auto;padding:0}.option-item[data-v-9d3085bf]{padding:4px 12px;display:flex;align-items:center;min-height:32px;gap:8px}.option-item[data-v-9d3085bf]:hover{background:var(--ogrid-hover-bg, rgba(0, 0, 0, .04))}.checkbox-input[data-v-9d3085bf]{width:16px;height:16px;border:1px solid var(--ogrid-border, rgba(0, 0, 0, .12));border-radius:3px;background:var(--ogrid-bg, #fff);cursor:pointer;flex-shrink:0}.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;font-size:13px;color:var(--ogrid-fg, rgba(0, 0, 0, .87));-webkit-user-select:none;user-select:none}.actions[data-v-9d3085bf]{display:flex;justify-content:flex-end;gap:8px;padding:8px 12px;border-top:1px solid var(--ogrid-border, rgba(0, 0, 0, .12));background:var(--ogrid-header-bg, rgba(0, 0, 0, .04))}.clear-button[data-v-9d3085bf]{padding:6px 12px;border:1px solid var(--ogrid-border, rgba(0, 0, 0, .12));border-radius:4px;background:var(--ogrid-bg, #fff);color:var(--ogrid-fg-secondary, rgba(0, 0, 0, .6));font-size:12px;cursor:pointer}.clear-button[data-v-9d3085bf]:hover{background:var(--ogrid-hover-bg, rgba(0, 0, 0, .04));color:var(--ogrid-fg, rgba(0, 0, 0, .87))}.select-all-button[data-v-9d3085bf]{padding:6px 16px;border:none;border-radius:4px;background:var(--ogrid-accent, #0078d4);color:#fff;font-size:12px;font-weight:600;cursor:pointer}.select-all-button[data-v-9d3085bf]:hover{opacity:.85}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import o from "./ColumnChooser.vue2.js";
|
|
2
2
|
import './ColumnChooser.css';
|
|
3
3
|
import r from "../_virtual/_plugin-vue_export-helper.js";
|
|
4
|
-
const
|
|
4
|
+
const p = /* @__PURE__ */ r(o, [["__scopeId", "data-v-9d3085bf"]]);
|
|
5
5
|
export {
|
|
6
|
-
|
|
6
|
+
p as default
|
|
7
7
|
};
|
|
@@ -1,10 +1,10 @@
|
|
|
1
|
-
import { defineComponent as
|
|
2
|
-
import { Menu as
|
|
3
|
-
import { useColumnChooserState as
|
|
4
|
-
const
|
|
1
|
+
import { defineComponent as V, computed as k, openBlock as u, createElementBlock as m, normalizeClass as S, createVNode as a, unref as s, withCtx as c, createElementVNode as o, toDisplayString as n, Transition as A, Fragment as M, renderList as N, withModifiers as d } from "vue";
|
|
2
|
+
import { Menu as _, MenuButton as w, MenuItems as B } from "@headlessui/vue";
|
|
3
|
+
import { useColumnChooserState as $ } from "@alaarab/ogrid-vue";
|
|
4
|
+
const q = {
|
|
5
5
|
class: "chevron",
|
|
6
6
|
"aria-hidden": ""
|
|
7
|
-
},
|
|
7
|
+
}, E = { class: "header" }, z = { class: "options-list" }, D = ["aria-checked", "aria-disabled"], F = ["id", "checked", "disabled", "onChange"], L = ["for"], T = { class: "actions" }, J = /* @__PURE__ */ V({
|
|
8
8
|
__name: "ColumnChooser",
|
|
9
9
|
props: {
|
|
10
10
|
columns: {},
|
|
@@ -12,45 +12,45 @@ const E = {
|
|
|
12
12
|
onVisibilityChange: {},
|
|
13
13
|
className: { default: "" }
|
|
14
14
|
},
|
|
15
|
-
setup(
|
|
16
|
-
const r =
|
|
15
|
+
setup(l) {
|
|
16
|
+
const r = l, {
|
|
17
17
|
open: v,
|
|
18
|
-
setOpen:
|
|
19
|
-
handleCheckboxChange:
|
|
20
|
-
handleSelectAll:
|
|
21
|
-
handleClearAll:
|
|
22
|
-
visibleCount:
|
|
23
|
-
totalCount:
|
|
24
|
-
} =
|
|
25
|
-
columns:
|
|
26
|
-
visibleColumns:
|
|
18
|
+
setOpen: g,
|
|
19
|
+
handleCheckboxChange: y,
|
|
20
|
+
handleSelectAll: C,
|
|
21
|
+
handleClearAll: b,
|
|
22
|
+
visibleCount: p,
|
|
23
|
+
totalCount: h
|
|
24
|
+
} = $({
|
|
25
|
+
columns: k(() => r.columns),
|
|
26
|
+
visibleColumns: k(() => r.visibleColumns),
|
|
27
27
|
onVisibilityChange: r.onVisibilityChange
|
|
28
|
-
}),
|
|
29
|
-
const i =
|
|
30
|
-
|
|
28
|
+
}), x = (f) => (e) => {
|
|
29
|
+
const i = e.target;
|
|
30
|
+
y(f)(i.checked);
|
|
31
31
|
};
|
|
32
|
-
return (
|
|
33
|
-
class:
|
|
32
|
+
return (f, e) => (u(), m("div", {
|
|
33
|
+
class: S(["container", l.className])
|
|
34
34
|
}, [
|
|
35
|
-
|
|
36
|
-
default:
|
|
37
|
-
|
|
35
|
+
a(s(_), null, {
|
|
36
|
+
default: c(({ open: i }) => [
|
|
37
|
+
a(s(w), {
|
|
38
38
|
class: "trigger-button",
|
|
39
39
|
"aria-expanded": i,
|
|
40
40
|
"aria-haspopup": "listbox",
|
|
41
|
-
onClick:
|
|
41
|
+
onClick: e[0] || (e[0] = (t) => s(g)(!s(v)))
|
|
42
42
|
}, {
|
|
43
|
-
default:
|
|
44
|
-
|
|
43
|
+
default: c(() => [
|
|
44
|
+
e[5] || (e[5] = o("span", {
|
|
45
45
|
class: "button-icon",
|
|
46
46
|
"aria-hidden": ""
|
|
47
47
|
}, "⚙", -1)),
|
|
48
|
-
|
|
49
|
-
|
|
48
|
+
o("span", null, "Column Visibility (" + n(s(p)) + " of " + n(s(h)) + ")", 1),
|
|
49
|
+
o("span", q, n(i ? "▲" : "▼"), 1)
|
|
50
50
|
]),
|
|
51
51
|
_: 2
|
|
52
52
|
}, 1032, ["aria-expanded"]),
|
|
53
|
-
|
|
53
|
+
a(A, {
|
|
54
54
|
"enter-active-class": "transition duration-100 ease-out",
|
|
55
55
|
"enter-from-class": "opacity-0 scale-95",
|
|
56
56
|
"enter-to-class": "opacity-100 scale-100",
|
|
@@ -58,45 +58,54 @@ const E = {
|
|
|
58
58
|
"leave-from-class": "opacity-100 scale-100",
|
|
59
59
|
"leave-to-class": "opacity-0 scale-95"
|
|
60
60
|
}, {
|
|
61
|
-
default:
|
|
62
|
-
|
|
63
|
-
default:
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
(
|
|
61
|
+
default: c(() => [
|
|
62
|
+
a(s(B), { class: "dropdown" }, {
|
|
63
|
+
default: c(() => [
|
|
64
|
+
o("div", E, "Select Columns (" + n(s(p)) + " of " + n(s(h)) + ")", 1),
|
|
65
|
+
o("div", z, [
|
|
66
|
+
(u(!0), m(M, null, N(l.columns, (t) => (u(), m("div", {
|
|
67
67
|
key: t.columnId,
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
68
|
+
class: "option-item",
|
|
69
|
+
role: "menuitemcheckbox",
|
|
70
|
+
"aria-checked": l.visibleColumns.has(t.columnId),
|
|
71
|
+
"aria-disabled": t.required === !0
|
|
72
|
+
}, [
|
|
73
|
+
o("input", {
|
|
74
|
+
id: `col-${t.columnId}`,
|
|
75
|
+
type: "checkbox",
|
|
76
|
+
checked: l.visibleColumns.has(t.columnId),
|
|
77
|
+
disabled: t.required === !0,
|
|
78
|
+
class: "checkbox-input",
|
|
79
|
+
onClick: e[1] || (e[1] = d(() => {
|
|
80
|
+
}, ["stop"])),
|
|
81
|
+
onChange: (I) => x(t.columnId)(I)
|
|
82
|
+
}, null, 40, F),
|
|
83
|
+
o("label", {
|
|
84
|
+
for: `col-${t.columnId}`,
|
|
85
|
+
class: "checkbox-label",
|
|
86
|
+
onClick: e[2] || (e[2] = d(() => {
|
|
87
|
+
}, ["stop"]))
|
|
88
|
+
}, n(t.name), 9, L)
|
|
89
|
+
], 8, D))), 128))
|
|
87
90
|
]),
|
|
88
|
-
|
|
89
|
-
|
|
91
|
+
o("div", T, [
|
|
92
|
+
o("button", {
|
|
90
93
|
type: "button",
|
|
91
94
|
class: "clear-button",
|
|
92
|
-
onClick:
|
|
93
|
-
|
|
95
|
+
onClick: e[3] || (e[3] = d(
|
|
96
|
+
//@ts-ignore
|
|
97
|
+
(...t) => s(b) && s(b)(...t),
|
|
98
|
+
["stop"]
|
|
99
|
+
))
|
|
94
100
|
}, " Clear All "),
|
|
95
|
-
|
|
101
|
+
o("button", {
|
|
96
102
|
type: "button",
|
|
97
103
|
class: "select-all-button",
|
|
98
|
-
onClick:
|
|
99
|
-
|
|
104
|
+
onClick: e[4] || (e[4] = d(
|
|
105
|
+
//@ts-ignore
|
|
106
|
+
(...t) => s(C) && s(C)(...t),
|
|
107
|
+
["stop"]
|
|
108
|
+
))
|
|
100
109
|
}, " Select All ")
|
|
101
110
|
])
|
|
102
111
|
]),
|
|
@@ -1 +1 @@
|
|
|
1
|
-
:where(:root){--ogrid-cell-padding: 6px 10px;--ogrid-cell-padding-vertical: 6px;--ogrid-cell-padding-horizontal: 10px;--ogrid-bg: #ffffff;--ogrid-fg: rgba(0, 0, 0, .87);--ogrid-fg-secondary: rgba(0, 0, 0, .6);--ogrid-fg-muted: rgba(0, 0, 0, .5);--ogrid-border: rgba(0, 0, 0, .12);--ogrid-border-strong: rgba(0, 0, 0, .5);--ogrid-border-hover: rgba(0, 0, 0, .3);--ogrid-header-bg: #f5f5f5;--ogrid-hover-bg: rgba(0, 0, 0, .04);--ogrid-selected-row-bg: #e6f0fb;--ogrid-bg-selected-hover: #dae8f8;--ogrid-active-cell-bg: rgba(0, 0, 0, .02);--ogrid-range-bg: rgba(33, 115, 70, .12);--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: rgba(0, 0, 0, .04);--ogrid-active-bg: rgba(0, 0, 0, .06);--ogrid-muted: rgba(0, 0, 0, .5);--ogrid-shadow: 0 4px 16px rgba(0, 0, 0, .12);--ogrid-shadow-sm: 0 2px 4px rgba(0, 0, 0, .08);--ogrid-pinned-shadow: rgba(0, 0, 0, .1);--ogrid-loading-overlay: rgba(255, 255, 255, .7);--ogrid-selection: #217346;--ogrid-bg-range: rgba(33, 115, 70, .12);--ogrid-bg-selected: #e6f0fb;--ogrid-loading-bg: rgba(255, 255, 255, .7)}@media(prefers-color-scheme:dark){:where(:root:not([data-theme=light])){--ogrid-bg: #1e1e1e;--ogrid-fg: rgba(255, 255, 255, .87);--ogrid-fg-secondary: rgba(255, 255, 255, .6);--ogrid-fg-muted: rgba(255, 255, 255, .5);--ogrid-border: rgba(255, 255, 255, .12);--ogrid-border-strong: rgba(255, 255, 255, .5);--ogrid-border-hover: rgba(255, 255, 255, .3);--ogrid-header-bg: #2c2c2c;--ogrid-hover-bg: rgba(255, 255, 255, .08);--ogrid-selected-row-bg: #1a3a5c;--ogrid-bg-selected-hover: #1f3650;--ogrid-active-cell-bg: rgba(255, 255, 255, .06);--ogrid-range-bg: rgba(46, 160, 67, .15);--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: rgba(255, 255, 255, .04);--ogrid-bg-hover: rgba(255, 255, 255, .08);--ogrid-active-bg: rgba(255, 255, 255, .08);--ogrid-muted: rgba(255, 255, 255, .5);--ogrid-shadow: 0 4px 16px rgba(0, 0, 0, .4);--ogrid-shadow-sm: 0 2px 4px rgba(0, 0, 0, .25);--ogrid-pinned-shadow: rgba(0, 0, 0, .3);--ogrid-loading-overlay: rgba(0, 0, 0, .7);--ogrid-selection: #2ea043;--ogrid-bg-range: rgba(46, 160, 67, .15);--ogrid-bg-selected: #1a3a5c;--ogrid-loading-bg: rgba(0, 0, 0, .7)}}:where([data-theme=dark]){--ogrid-bg: #1e1e1e;--ogrid-fg: rgba(255, 255, 255, .87);--ogrid-fg-secondary: rgba(255, 255, 255, .6);--ogrid-fg-muted: rgba(255, 255, 255, .5);--ogrid-border: rgba(255, 255, 255, .12);--ogrid-border-strong: rgba(255, 255, 255, .5);--ogrid-border-hover: rgba(255, 255, 255, .3);--ogrid-header-bg: #2c2c2c;--ogrid-hover-bg: rgba(255, 255, 255, .08);--ogrid-selected-row-bg: #1a3a5c;--ogrid-bg-selected-hover: #1f3650;--ogrid-active-cell-bg: rgba(255, 255, 255, .06);--ogrid-range-bg: rgba(46, 160, 67, .15);--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: rgba(255, 255, 255, .04);--ogrid-bg-hover: rgba(255, 255, 255, .08);--ogrid-active-bg: rgba(255, 255, 255, .08);--ogrid-muted: rgba(255, 255, 255, .5);--ogrid-shadow: 0 4px 16px rgba(0, 0, 0, .4);--ogrid-shadow-sm: 0 2px 4px rgba(0, 0, 0, .25);--ogrid-pinned-shadow: rgba(0, 0, 0, .3);--ogrid-loading-overlay: rgba(0, 0, 0, .7);--ogrid-selection: #2ea043;--ogrid-bg-range: rgba(46, 160, 67, .15);--ogrid-bg-selected: #1a3a5c;--ogrid-loading-bg: rgba(0, 0, 0, .7)}[role=region][tabindex="0"]{outline:none}.ogrid-outer-container .ogrid-cell-in-range{background:var(--ogrid-bg-range, rgba(33, 115, 70, .12))}.ogrid-outer-container .ogrid-cell-cut{background:var(--ogrid-hover-bg);opacity:.7}.ogrid-outer-container [data-drag-range]{background:var(--ogrid-range-bg, rgba(33, 115, 70, .12))}.ogrid-outer-container [data-drag-anchor]{background:var(--ogrid-bg)}.ogrid-outer-container{position:relative;flex:1;min-height:0;display:flex;flex-direction:column;background-color:var(--ogrid-bg);color:var(--ogrid-fg)}.ogrid-scroll-wrapper{display:flex;flex-direction:column;min-height:100%}.ogrid-table-container{position:relative}.ogrid-table-container--loading{opacity:.6}.ogrid-table{width:100%;border-collapse:collapse;font-size:.875rem;background-color:var(--ogrid-bg);color:var(--ogrid-fg)}.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{font-weight:600;background-color:var(--ogrid-header-bg);z-index:var(--ogrid-z-thead, 8)}.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, rgba(0, 0, 0, .12));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, rgba(0, 0, 0, .12));box-shadow:-2px 0 4px -1px #0000001a}.ogrid-header-content{display:flex;align-items:center;width:100%}.ogrid-column-group-header{text-align:center;font-weight:600;border-bottom:2px solid var(--ogrid-border);padding:6px}.ogrid-column-menu-btn{background:none;border:none;cursor:pointer;padding:4px 6px;font-size:16px;color:var(--ogrid-fg-muted);line-height:1;flex-shrink:0;border-radius:4px;display:inline-flex;align-items:center;justify-content:center;min-width:24px;height:24px;transition:background-color .15s}@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, rgba(0, 0, 0, .04));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;font-size:11px;font-weight:500;color:var(--ogrid-fg-muted, rgba(0, 0, 0, .5));padding:2px 4px;background:var(--ogrid-column-letter-bg, var(--ogrid-header-bg));border-bottom:1px solid var(--ogrid-border, rgba(0, 0, 0, .12));-webkit-user-select:none;user-select:none;font-variant-numeric:tabular-nums}.ogrid-checkbox-header,.ogrid-checkbox-cell{text-align:center;padding:4px}.ogrid-checkbox-cell{padding:0}.ogrid-checkbox-wrapper{display:flex;align-items:center;justify-content:center}.ogrid-checkbox-spacer{padding:0}.ogrid-row-number-header{text-align:center;font-weight:600;background-color:var(--ogrid-header-bg);color:var(--ogrid-fg-secondary)}.ogrid-row-number-spacer{background-color:var(--ogrid-header-bg)}.ogrid-row-number-cell{text-align:center;font-weight:600;font-variant-numeric:tabular-nums;background-color:var(--ogrid-header-bg);color:var(--ogrid-fg-secondary)}.ogrid-data-cell{position:relative;padding:0;height:1px;contain:content}.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{position:sticky;z-index:var(--ogrid-z-pinned, 6);background-color:var(--ogrid-bg);will-change:transform;border-right:1px solid var(--ogrid-border, rgba(0, 0, 0, .12));box-shadow:2px 0 4px -1px #0000001a}.ogrid-data-cell--pinned-right{position:sticky;z-index:var(--ogrid-z-pinned, 6);background-color:var(--ogrid-bg);will-change:transform;border-left:1px solid var(--ogrid-border, rgba(0, 0, 0, .12));box-shadow:-2px 0 4px -1px #0000001a}.ogrid-cell-content{width:100%;height:100%;display:flex;align-items:center;min-width:0;padding:var(--ogrid-cell-padding, 6px 10px);box-sizing:border-box;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;-webkit-user-select:none;user-select:none;outline:none}.ogrid-cell-content--numeric{justify-content:flex-end;text-align:right}.ogrid-cell-content--boolean{justify-content:center;text-align: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);position:relative;overflow:visible;contain:none}.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{outline:none;background:var(--ogrid-bg, #fff)}.ogrid-editing-cell{width:100%;height:100%;display:flex;align-items:center;box-sizing:border-box;outline:2px solid var(--ogrid-selection-color, #217346);outline-offset:-1px;z-index:var(--ogrid-z-active-cell, 2);position:relative;background:var(--ogrid-bg, #fff);overflow:hidden;padding:0}.ogrid-fill-handle{position:absolute;right:-3px;bottom:-3px;width:7px;height:7px;background-color:var(--ogrid-selection, #217346);border:1px solid var(--ogrid-bg);border-radius:1px;cursor:crosshair;pointer-events:auto;touch-action:none;z-index:var(--ogrid-z-fill-handle, 3)}@media(pointer:coarse){.ogrid-fill-handle{width:14px;height:14px;right:-7px;bottom:-7px;border-radius:2px}}.ogrid-resize-handle{position:absolute;top:0;right:-3px;bottom:0;width:8px;cursor:col-resize;-webkit-user-select:none;user-select:none;touch-action:none}@media(pointer:coarse){.ogrid-resize-handle{width:16px;right:-8px}}.ogrid-drop-indicator{position:absolute;top:0;bottom:0;width:3px;background:var(--ogrid-primary, #217346);pointer-events:none;z-index:var(--ogrid-z-drop-indicator, 100)}.ogrid-empty-state{padding:32px 16px;text-align:center;border-top:1px solid var(--ogrid-border);background-color:var(--ogrid-header-bg)}.ogrid-empty-state-title{font-size:1.25rem;font-weight:600;margin-bottom:8px}.ogrid-empty-state-message{font-size:.875rem;color:var(--ogrid-fg-secondary)}.ogrid-loading-overlay{position:absolute;inset:0;z-index:var(--ogrid-z-loading, 2);display:flex;align-items:center;justify-content:center;background-color:var(--ogrid-loading-overlay)}.ogrid-loading-inner{display:flex;flex-direction:column;align-items:center;gap:8px;padding:16px;background-color:var(--ogrid-bg);border:1px solid var(--ogrid-border);border-radius:4px}.ogrid-loading-message{font-size:.875rem;color:var(--ogrid-fg-secondary)}.ogrid-popover-anchor{min-height:100%;min-width:40px}@media(max-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{font-size:11px;text-align:center}.ogrid-pagination-size{font-size:11px;justify-content:center}}.ogrid-checkbox-label{display:inline-flex;align-items:center;cursor:pointer}.ogrid-checkbox{cursor:pointer;width:16px;height:16px;accent-color:var(--ogrid-accent, #0078d4)}.ogrid-loading-spinner{width:24px;height:24px;border:3px solid var(--ogrid-border, #e0e0e0);border-top-color:var(--ogrid-accent, #0078d4);border-radius:50%;animation:ogrid-spin .8s linear infinite}@keyframes ogrid-spin{to{transform:rotate(360deg)}}.ogrid-empty-clear-btn{background:none;border:none;color:var(--ogrid-accent, #0078d4);text-decoration:underline;cursor:pointer;padding:0;font:inherit}.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: #ffffff;--ogrid-fg: rgba(0, 0, 0, .87);--ogrid-fg-secondary: rgba(0, 0, 0, .6);--ogrid-fg-muted: rgba(0, 0, 0, .5);--ogrid-border: rgba(0, 0, 0, .12);--ogrid-border-strong: rgba(0, 0, 0, .5);--ogrid-border-hover: rgba(0, 0, 0, .3);--ogrid-header-bg: #f5f5f5;--ogrid-hover-bg: rgba(0, 0, 0, .04);--ogrid-selected-row-bg: #e6f0fb;--ogrid-bg-selected-hover: #dae8f8;--ogrid-active-cell-bg: rgba(0, 0, 0, .02);--ogrid-range-bg: rgba(33, 115, 70, .12);--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: rgba(0, 0, 0, .04);--ogrid-active-bg: rgba(0, 0, 0, .06);--ogrid-muted: rgba(0, 0, 0, .5);--ogrid-shadow: 0 4px 16px rgba(0, 0, 0, .12);--ogrid-shadow-sm: 0 2px 4px rgba(0, 0, 0, .08);--ogrid-pinned-shadow: rgba(0, 0, 0, .1);--ogrid-loading-overlay: rgba(255, 255, 255, .7);--ogrid-selection: #217346;--ogrid-bg-range: rgba(33, 115, 70, .12);--ogrid-bg-selected: #e6f0fb;--ogrid-loading-bg: rgba(255, 255, 255, .7)}@media(prefers-color-scheme:dark){:where(:root:not([data-theme=light])){--ogrid-bg: #1e1e1e;--ogrid-fg: rgba(255, 255, 255, .87);--ogrid-fg-secondary: rgba(255, 255, 255, .6);--ogrid-fg-muted: rgba(255, 255, 255, .5);--ogrid-border: rgba(255, 255, 255, .12);--ogrid-border-strong: rgba(255, 255, 255, .5);--ogrid-border-hover: rgba(255, 255, 255, .3);--ogrid-header-bg: #2c2c2c;--ogrid-hover-bg: rgba(255, 255, 255, .08);--ogrid-selected-row-bg: #1a3a5c;--ogrid-bg-selected-hover: #1f3650;--ogrid-active-cell-bg: rgba(255, 255, 255, .06);--ogrid-range-bg: rgba(46, 160, 67, .15);--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: rgba(255, 255, 255, .04);--ogrid-bg-hover: rgba(255, 255, 255, .08);--ogrid-active-bg: rgba(255, 255, 255, .08);--ogrid-muted: rgba(255, 255, 255, .5);--ogrid-shadow: 0 4px 16px rgba(0, 0, 0, .4);--ogrid-shadow-sm: 0 2px 4px rgba(0, 0, 0, .25);--ogrid-pinned-shadow: rgba(0, 0, 0, .3);--ogrid-loading-overlay: rgba(0, 0, 0, .7);--ogrid-selection: #2ea043;--ogrid-bg-range: rgba(46, 160, 67, .15);--ogrid-bg-selected: #1a3a5c;--ogrid-loading-bg: rgba(0, 0, 0, .7)}}:where([data-theme=dark]){--ogrid-bg: #1e1e1e;--ogrid-fg: rgba(255, 255, 255, .87);--ogrid-fg-secondary: rgba(255, 255, 255, .6);--ogrid-fg-muted: rgba(255, 255, 255, .5);--ogrid-border: rgba(255, 255, 255, .12);--ogrid-border-strong: rgba(255, 255, 255, .5);--ogrid-border-hover: rgba(255, 255, 255, .3);--ogrid-header-bg: #2c2c2c;--ogrid-hover-bg: rgba(255, 255, 255, .08);--ogrid-selected-row-bg: #1a3a5c;--ogrid-bg-selected-hover: #1f3650;--ogrid-active-cell-bg: rgba(255, 255, 255, .06);--ogrid-range-bg: rgba(46, 160, 67, .15);--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: rgba(255, 255, 255, .04);--ogrid-bg-hover: rgba(255, 255, 255, .08);--ogrid-active-bg: rgba(255, 255, 255, .08);--ogrid-muted: rgba(255, 255, 255, .5);--ogrid-shadow: 0 4px 16px rgba(0, 0, 0, .4);--ogrid-shadow-sm: 0 2px 4px rgba(0, 0, 0, .25);--ogrid-pinned-shadow: rgba(0, 0, 0, .3);--ogrid-loading-overlay: rgba(0, 0, 0, .7);--ogrid-selection: #2ea043;--ogrid-bg-range: rgba(46, 160, 67, .15);--ogrid-bg-selected: #1a3a5c;--ogrid-loading-bg: rgba(0, 0, 0, .7)}[role=region][tabindex="0"]{outline:none}.ogrid-outer-container .ogrid-cell-in-range{background:var(--ogrid-bg-range, rgba(33, 115, 70, .12))}.ogrid-outer-container .ogrid-cell-cut{background:var(--ogrid-hover-bg);opacity:.7}.ogrid-outer-container [data-drag-range]{background:var(--ogrid-range-bg, rgba(33, 115, 70, .12))}.ogrid-outer-container [data-drag-anchor]{background:var(--ogrid-bg)}.ogrid-outer-container{position:relative;flex:1;min-height:0;display:flex;flex-direction:column;background-color:var(--ogrid-bg);color:var(--ogrid-fg)}.ogrid-scroll-wrapper{display:flex;flex-direction:column;min-height:100%}.ogrid-table-container{position:relative}.ogrid-table-container--loading{opacity:.6}.ogrid-table{width:100%;border-collapse:collapse;font-size:.875rem;background-color:var(--ogrid-bg);color:var(--ogrid-fg)}.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{font-weight:600;background-color:var(--ogrid-header-bg);z-index:var(--ogrid-z-thead, 8)}.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, rgba(0, 0, 0, .12));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, rgba(0, 0, 0, .12));box-shadow:-2px 0 4px -1px #0000001a}.ogrid-header-content{display:flex;align-items:center;width:100%}.ogrid-column-group-header{text-align:center;font-weight:600;border-bottom:2px solid var(--ogrid-border);padding:6px}.ogrid-column-menu-btn{background:none;border:none;cursor:pointer;padding:4px 6px;font-size:16px;color:var(--ogrid-fg-muted);line-height:1;flex-shrink:0;border-radius:4px;display:inline-flex;align-items:center;justify-content:center;min-width:24px;height:24px;transition:background-color .15s}@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, rgba(0, 0, 0, .04));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;font-size:11px;font-weight:500;color:var(--ogrid-fg-muted, rgba(0, 0, 0, .5));padding:2px 4px;background:var(--ogrid-column-letter-bg, var(--ogrid-header-bg));border-bottom:1px solid var(--ogrid-border, rgba(0, 0, 0, .12));-webkit-user-select:none;user-select:none;font-variant-numeric:tabular-nums}.ogrid-checkbox-header,.ogrid-checkbox-cell{text-align:center;padding:4px}.ogrid-checkbox-cell{padding:0}.ogrid-checkbox-wrapper{display:flex;align-items:center;justify-content:center}.ogrid-checkbox-spacer{padding:0}.ogrid-row-number-header{text-align:center;font-weight:600;background-color:var(--ogrid-header-bg);color:var(--ogrid-fg-secondary);-webkit-user-select:none;user-select:none}.ogrid-row-number-spacer{background-color:var(--ogrid-header-bg)}.ogrid-row-number-cell{text-align:center;font-weight:600;font-variant-numeric:tabular-nums;background-color:var(--ogrid-header-bg);color:var(--ogrid-fg-secondary);-webkit-user-select:none;user-select:none}.ogrid-data-cell{position:relative;padding:0;height:1px;contain:content}.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{position:sticky;z-index:var(--ogrid-z-pinned, 6);background-color:var(--ogrid-bg);will-change:transform;border-right:1px solid var(--ogrid-border, rgba(0, 0, 0, .12));box-shadow:2px 0 4px -1px #0000001a}.ogrid-data-cell--pinned-right{position:sticky;z-index:var(--ogrid-z-pinned, 6);background-color:var(--ogrid-bg);will-change:transform;border-left:1px solid var(--ogrid-border, rgba(0, 0, 0, .12));box-shadow:-2px 0 4px -1px #0000001a}.ogrid-cell-content{width:100%;height:100%;display:flex;align-items:center;min-width:0;padding:var(--ogrid-cell-padding, 6px 10px);box-sizing:border-box;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;-webkit-user-select:none;user-select:none;outline:none}.ogrid-cell-content--numeric{justify-content:flex-end;text-align:right}.ogrid-cell-content--boolean{justify-content:center;text-align: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);position:relative;overflow:visible;contain:none}.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{outline:none;background:var(--ogrid-bg, #fff)}.ogrid-editing-cell{width:100%;height:100%;display:flex;align-items:center;box-sizing:border-box;outline:2px solid var(--ogrid-selection-color, #217346);outline-offset:-1px;z-index:var(--ogrid-z-active-cell, 2);position:relative;background:var(--ogrid-bg, #fff);overflow:hidden;padding:0}.ogrid-fill-handle{position:absolute;right:-3px;bottom:-3px;width:7px;height:7px;background-color:var(--ogrid-selection, #217346);border:1px solid var(--ogrid-bg);border-radius:1px;cursor:crosshair;pointer-events:auto;touch-action:none;z-index:var(--ogrid-z-fill-handle, 3)}@media(pointer:coarse){.ogrid-fill-handle{width:14px;height:14px;right:-7px;bottom:-7px;border-radius:2px}}.ogrid-resize-handle{position:absolute;top:0;right:-3px;bottom:0;width:8px;cursor:col-resize;-webkit-user-select:none;user-select:none;touch-action:none}@media(pointer:coarse){.ogrid-resize-handle{width:16px;right:-8px}}.ogrid-drop-indicator{position:absolute;top:0;bottom:0;width:3px;background:var(--ogrid-primary, #217346);pointer-events:none;z-index:var(--ogrid-z-drop-indicator, 100)}.ogrid-empty-state{padding:32px 16px;text-align:center;border-top:1px solid var(--ogrid-border);background-color:var(--ogrid-header-bg)}.ogrid-empty-state-title{font-size:1.25rem;font-weight:600;margin-bottom:8px}.ogrid-empty-state-message{font-size:.875rem;color:var(--ogrid-fg-secondary)}.ogrid-loading-overlay{position:absolute;inset:0;z-index:var(--ogrid-z-loading, 2);display:flex;align-items:center;justify-content:center;background-color:var(--ogrid-loading-overlay)}.ogrid-loading-inner{display:flex;flex-direction:column;align-items:center;gap:8px;padding:16px;background-color:var(--ogrid-bg);border:1px solid var(--ogrid-border);border-radius:4px}.ogrid-loading-message{font-size:.875rem;color:var(--ogrid-fg-secondary)}.ogrid-popover-anchor{min-height:100%;min-width:40px}@media(max-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{font-size:11px;text-align:center}.ogrid-pagination-size{font-size:11px;justify-content:center}}.ogrid-checkbox-label{display:inline-flex;align-items:center;cursor:pointer}.ogrid-checkbox{cursor:pointer;width:16px;height:16px;accent-color:var(--ogrid-accent, #0078d4)}.ogrid-loading-spinner{width:24px;height:24px;border:3px solid var(--ogrid-border, #e0e0e0);border-top-color:var(--ogrid-accent, #0078d4);border-radius:50%;animation:ogrid-spin .8s linear infinite}@keyframes ogrid-spin{to{transform:rotate(360deg)}}.ogrid-empty-clear-btn{background:none;border:none;color:var(--ogrid-accent, #0078d4);text-decoration:underline;cursor:pointer;padding:0;font:inherit}.ogrid-empty-clear-btn:hover{color:var(--ogrid-accent, #005a9e)}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
.context-menu-wrapper[data-v-
|
|
1
|
+
.context-menu-wrapper[data-v-204e9cc9]{position:relative;z-index:9999}.context-menu[data-v-204e9cc9]{position:fixed;min-width:200px;background:#fff;border:1px solid var(--ogrid-border-color, #e0e0e0);border-radius:4px;box-shadow:0 4px 12px #00000026;padding:4px 0;outline:none}.menu-item[data-v-204e9cc9]{display:flex;align-items:center;width:100%;padding:8px 12px;border:none;background:none;text-align:left;cursor:pointer;font-size:14px;color:var(--ogrid-text-primary, #000);transition:background-color .1s ease}.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]{margin-left:24px;font-size:.8em;color:var(--ogrid-text-secondary, rgba(0, 0, 0, .4))}.divider[data-v-204e9cc9]{height:1px;margin:4px 0;background-color:var(--ogrid-border-color, #e0e0e0)}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import o from "./GridContextMenu.vue2.js";
|
|
2
2
|
import './GridContextMenu.css';
|
|
3
3
|
import t from "../_virtual/_plugin-vue_export-helper.js";
|
|
4
|
-
const
|
|
4
|
+
const m = /* @__PURE__ */ t(o, [["__scopeId", "data-v-204e9cc9"]]);
|
|
5
5
|
export {
|
|
6
|
-
|
|
6
|
+
m as default
|
|
7
7
|
};
|
|
@@ -1,13 +1,13 @@
|
|
|
1
|
-
import { defineComponent as
|
|
2
|
-
import { Menu as
|
|
3
|
-
import { getContextMenuHandlers as
|
|
4
|
-
const
|
|
1
|
+
import { defineComponent as x, ref as b, onMounted as E, nextTick as w, onUnmounted as M, openBlock as r, createBlock as D, unref as s, withCtx as d, createVNode as m, withModifiers as F, normalizeStyle as S, createElementBlock as l, Fragment as f, renderList as B, createCommentVNode as y, createElementVNode as C, normalizeClass as N, toDisplayString as h } from "vue";
|
|
2
|
+
import { Menu as R, MenuItems as g, MenuItem as I } from "@headlessui/vue";
|
|
3
|
+
import { getContextMenuHandlers as L, GRID_CONTEXT_MENU_ITEMS as U, formatShortcut as T } from "@alaarab/ogrid-vue";
|
|
4
|
+
const G = {
|
|
5
5
|
key: 0,
|
|
6
6
|
class: "divider"
|
|
7
|
-
},
|
|
7
|
+
}, V = ["disabled", "onClick"], $ = { class: "menu-item-label" }, z = {
|
|
8
8
|
key: 0,
|
|
9
9
|
class: "menu-item-shortcut"
|
|
10
|
-
},
|
|
10
|
+
}, O = /* @__PURE__ */ x({
|
|
11
11
|
__name: "GridContextMenu",
|
|
12
12
|
props: {
|
|
13
13
|
x: {},
|
|
@@ -23,39 +23,50 @@ const R = {
|
|
|
23
23
|
onSelectAll: { type: Function },
|
|
24
24
|
onClose: { type: Function }
|
|
25
25
|
},
|
|
26
|
-
setup(
|
|
27
|
-
const
|
|
28
|
-
|
|
26
|
+
setup(u) {
|
|
27
|
+
const n = u, a = b(null), k = L(n), c = (e) => !!(e.disabledWhenNoSelection && !n.hasSelection || e.id === "undo" && !n.canUndo || e.id === "redo" && !n.canRedo), _ = (e) => {
|
|
28
|
+
c(e) || (k[e.id](), n.onClose());
|
|
29
|
+
}, i = (e) => {
|
|
30
|
+
const o = e.target;
|
|
31
|
+
a.value && o instanceof Node && !a.value.contains(o) && n.onClose();
|
|
32
|
+
}, p = (e) => {
|
|
33
|
+
e.key === "Escape" && (e.preventDefault(), n.onClose());
|
|
29
34
|
};
|
|
30
|
-
return (
|
|
35
|
+
return E(() => {
|
|
36
|
+
document.addEventListener("pointerdown", i, !0), document.addEventListener("keydown", p, !0), w(() => a.value?.focus());
|
|
37
|
+
}), M(() => {
|
|
38
|
+
document.removeEventListener("pointerdown", i, !0), document.removeEventListener("keydown", p, !0);
|
|
39
|
+
}), (e, o) => (r(), D(s(R), {
|
|
31
40
|
as: "div",
|
|
32
41
|
class: "context-menu-wrapper"
|
|
33
42
|
}, {
|
|
34
|
-
default:
|
|
35
|
-
|
|
43
|
+
default: d(() => [
|
|
44
|
+
m(s(g), {
|
|
45
|
+
ref_key: "menuRef",
|
|
46
|
+
ref: a,
|
|
36
47
|
static: "",
|
|
37
48
|
class: "context-menu",
|
|
38
|
-
style:
|
|
49
|
+
style: S({ left: `${u.x}px`, top: `${u.y}px` }),
|
|
39
50
|
"aria-label": "Grid context menu",
|
|
40
|
-
onClick:
|
|
51
|
+
onClick: o[0] || (o[0] = F(() => {
|
|
41
52
|
}, ["stop"]))
|
|
42
53
|
}, {
|
|
43
|
-
default:
|
|
44
|
-
(
|
|
45
|
-
key:
|
|
54
|
+
default: d(() => [
|
|
55
|
+
(r(!0), l(f, null, B(s(U), (t) => (r(), l(f, {
|
|
56
|
+
key: t.id
|
|
46
57
|
}, [
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
default:
|
|
50
|
-
|
|
58
|
+
t.dividerBefore ? (r(), l("div", G)) : y("", !0),
|
|
59
|
+
m(s(I), { as: "template" }, {
|
|
60
|
+
default: d(({ active: v }) => [
|
|
61
|
+
C("button", {
|
|
51
62
|
type: "button",
|
|
52
|
-
class:
|
|
53
|
-
disabled:
|
|
54
|
-
onClick: (
|
|
63
|
+
class: N(["menu-item", { active: v, disabled: c(t) }]),
|
|
64
|
+
disabled: c(t),
|
|
65
|
+
onClick: (P) => _(t)
|
|
55
66
|
}, [
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
], 10,
|
|
67
|
+
C("span", $, h(t.label), 1),
|
|
68
|
+
t.shortcut ? (r(), l("span", z, h(s(T)(t.shortcut)), 1)) : y("", !0)
|
|
69
|
+
], 10, V)
|
|
59
70
|
]),
|
|
60
71
|
_: 2
|
|
61
72
|
}, 1024)
|
|
@@ -69,5 +80,5 @@ const R = {
|
|
|
69
80
|
}
|
|
70
81
|
});
|
|
71
82
|
export {
|
|
72
|
-
|
|
83
|
+
O as default
|
|
73
84
|
};
|
|
@@ -12,5 +12,66 @@ export interface GridContextMenuProps {
|
|
|
12
12
|
onSelectAll: () => void;
|
|
13
13
|
onClose: () => void;
|
|
14
14
|
}
|
|
15
|
-
declare const _default: import('vue').DefineComponent<GridContextMenuProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<GridContextMenuProps> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {
|
|
15
|
+
declare const _default: import('vue').DefineComponent<GridContextMenuProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<GridContextMenuProps> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {
|
|
16
|
+
menuRef: import('vue').CreateComponentPublicInstanceWithMixins<Readonly<import('vue').ExtractPropTypes<{
|
|
17
|
+
as: {
|
|
18
|
+
type: (ObjectConstructor | StringConstructor)[];
|
|
19
|
+
default: string;
|
|
20
|
+
};
|
|
21
|
+
static: {
|
|
22
|
+
type: BooleanConstructor;
|
|
23
|
+
default: boolean;
|
|
24
|
+
};
|
|
25
|
+
unmount: {
|
|
26
|
+
type: BooleanConstructor;
|
|
27
|
+
default: boolean;
|
|
28
|
+
};
|
|
29
|
+
id: {
|
|
30
|
+
type: StringConstructor;
|
|
31
|
+
default: null;
|
|
32
|
+
};
|
|
33
|
+
}>>, () => import('vue').VNode<import('vue').RendererNode, import('vue').RendererElement, {
|
|
34
|
+
[key: string]: any;
|
|
35
|
+
}> | import('vue').VNode<import('vue').RendererNode, import('vue').RendererElement, {
|
|
36
|
+
[key: string]: any;
|
|
37
|
+
}>[] | null, unknown, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, Record<string, any>, import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps, {
|
|
38
|
+
id: string;
|
|
39
|
+
as: string | Record<string, any>;
|
|
40
|
+
unmount: boolean;
|
|
41
|
+
static: boolean;
|
|
42
|
+
}, true, {}, {}, import('vue').GlobalComponents, import('vue').GlobalDirectives, string, {}, any, import('vue').ComponentProvideOptions, {
|
|
43
|
+
P: {};
|
|
44
|
+
B: {};
|
|
45
|
+
D: {};
|
|
46
|
+
C: {};
|
|
47
|
+
M: {};
|
|
48
|
+
Defaults: {};
|
|
49
|
+
}, Readonly<import('vue').ExtractPropTypes<{
|
|
50
|
+
as: {
|
|
51
|
+
type: (ObjectConstructor | StringConstructor)[];
|
|
52
|
+
default: string;
|
|
53
|
+
};
|
|
54
|
+
static: {
|
|
55
|
+
type: BooleanConstructor;
|
|
56
|
+
default: boolean;
|
|
57
|
+
};
|
|
58
|
+
unmount: {
|
|
59
|
+
type: BooleanConstructor;
|
|
60
|
+
default: boolean;
|
|
61
|
+
};
|
|
62
|
+
id: {
|
|
63
|
+
type: StringConstructor;
|
|
64
|
+
default: null;
|
|
65
|
+
};
|
|
66
|
+
}>>, () => import('vue').VNode<import('vue').RendererNode, import('vue').RendererElement, {
|
|
67
|
+
[key: string]: any;
|
|
68
|
+
}> | import('vue').VNode<import('vue').RendererNode, import('vue').RendererElement, {
|
|
69
|
+
[key: string]: any;
|
|
70
|
+
}>[] | null, {}, {}, {}, {
|
|
71
|
+
id: string;
|
|
72
|
+
as: string | Record<string, any>;
|
|
73
|
+
unmount: boolean;
|
|
74
|
+
static: boolean;
|
|
75
|
+
}> | null;
|
|
76
|
+
}, any>;
|
|
16
77
|
export default _default;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@alaarab/ogrid-vue-radix",
|
|
3
|
-
"version": "2.
|
|
3
|
+
"version": "2.7.0",
|
|
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",
|
|
@@ -11,7 +11,18 @@
|
|
|
11
11
|
"import": "./dist/esm/index.js",
|
|
12
12
|
"default": "./dist/esm/index.js"
|
|
13
13
|
},
|
|
14
|
-
"./styles
|
|
14
|
+
"./styles/ColumnChooser/ColumnChooser.css": "./dist/esm/ColumnChooser/ColumnChooser.css",
|
|
15
|
+
"./styles/ColumnChooser/ColumnChooser.module.css": "./dist/esm/ColumnChooser/ColumnChooser.module.css",
|
|
16
|
+
"./styles/ColumnHeaderFilter/ColumnHeaderFilter.css": "./dist/esm/ColumnHeaderFilter/ColumnHeaderFilter.css",
|
|
17
|
+
"./styles/ColumnHeaderFilter/ColumnHeaderFilter.module.css": "./dist/esm/ColumnHeaderFilter/ColumnHeaderFilter.module.css",
|
|
18
|
+
"./styles/ColumnHeaderFilter/MultiSelectFilterPopover.css": "./dist/esm/ColumnHeaderFilter/MultiSelectFilterPopover.css",
|
|
19
|
+
"./styles/ColumnHeaderFilter/PeopleFilterPopover.css": "./dist/esm/ColumnHeaderFilter/PeopleFilterPopover.css",
|
|
20
|
+
"./styles/ColumnHeaderFilter/TextFilterPopover.css": "./dist/esm/ColumnHeaderFilter/TextFilterPopover.css",
|
|
21
|
+
"./styles/ColumnHeaderMenu/ColumnHeaderMenu.css": "./dist/esm/ColumnHeaderMenu/ColumnHeaderMenu.css",
|
|
22
|
+
"./styles/DataGridTable/DataGridTable.css": "./dist/esm/DataGridTable/DataGridTable.css",
|
|
23
|
+
"./styles/DataGridTable/GridContextMenu.css": "./dist/esm/DataGridTable/GridContextMenu.css",
|
|
24
|
+
"./styles/PaginationControls/PaginationControls.css": "./dist/esm/PaginationControls/PaginationControls.css",
|
|
25
|
+
"./styles/PaginationControls/PaginationControls.module.css": "./dist/esm/PaginationControls/PaginationControls.module.css"
|
|
15
26
|
},
|
|
16
27
|
"scripts": {
|
|
17
28
|
"build": "rimraf dist && vite build && node scripts/compile-styles.js",
|
|
@@ -42,7 +53,7 @@
|
|
|
42
53
|
"node": ">=18"
|
|
43
54
|
},
|
|
44
55
|
"dependencies": {
|
|
45
|
-
"@alaarab/ogrid-vue": "2.
|
|
56
|
+
"@alaarab/ogrid-vue": "2.7.0"
|
|
46
57
|
},
|
|
47
58
|
"peerDependencies": {
|
|
48
59
|
"@headlessui/vue": "^1.7.23",
|