@alaarab/ogrid-vue-radix 2.2.0 → 2.4.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.
|
@@ -274,6 +274,24 @@
|
|
|
274
274
|
color: var(--ogrid-fg);
|
|
275
275
|
}
|
|
276
276
|
|
|
277
|
+
/* === Column letter row (cell references) === */
|
|
278
|
+
|
|
279
|
+
.ogrid-column-letter-row {
|
|
280
|
+
background: var(--ogrid-column-letter-bg, var(--ogrid-header-bg));
|
|
281
|
+
}
|
|
282
|
+
|
|
283
|
+
.ogrid-column-letter-cell {
|
|
284
|
+
text-align: center;
|
|
285
|
+
font-size: 11px;
|
|
286
|
+
font-weight: 500;
|
|
287
|
+
color: var(--ogrid-fg-muted, rgba(0, 0, 0, 0.5));
|
|
288
|
+
padding: 2px 4px;
|
|
289
|
+
background: var(--ogrid-column-letter-bg, var(--ogrid-header-bg));
|
|
290
|
+
border-bottom: 1px solid var(--ogrid-border, rgba(0, 0, 0, 0.12));
|
|
291
|
+
user-select: none;
|
|
292
|
+
font-variant-numeric: tabular-nums;
|
|
293
|
+
}
|
|
294
|
+
|
|
277
295
|
/* === Checkbox column === */
|
|
278
296
|
|
|
279
297
|
.ogrid-checkbox-header,
|
|
@@ -390,6 +408,15 @@
|
|
|
390
408
|
overflow: visible;
|
|
391
409
|
}
|
|
392
410
|
|
|
411
|
+
/* Active cell inside a selection range: suppress outline (Excel behavior).
|
|
412
|
+
The range overlay border is sufficient; the active cell is distinguished
|
|
413
|
+
by its white background vs. the dimmed range cells. */
|
|
414
|
+
|
|
415
|
+
.ogrid-cell-content--active-in-range {
|
|
416
|
+
outline: none;
|
|
417
|
+
background: var(--ogrid-bg, #fff);
|
|
418
|
+
}
|
|
419
|
+
|
|
393
420
|
/* === Editing cell wrapper === */
|
|
394
421
|
|
|
395
422
|
.ogrid-editing-cell {
|
|
@@ -18,6 +18,16 @@ const InlineCellEditor = createInlineCellEditor({
|
|
|
18
18
|
type: "date",
|
|
19
19
|
value,
|
|
20
20
|
style: { width: "100%", height: "100%", border: "none", outline: "none", padding: "0 4px", fontSize: "inherit" },
|
|
21
|
+
onVnodeMounted: (vnode) => {
|
|
22
|
+
const el = vnode.el;
|
|
23
|
+
if (el) {
|
|
24
|
+
el.focus();
|
|
25
|
+
try {
|
|
26
|
+
el.showPicker();
|
|
27
|
+
} catch {
|
|
28
|
+
}
|
|
29
|
+
}
|
|
30
|
+
},
|
|
21
31
|
onKeydown: (e) => {
|
|
22
32
|
if (e.key === "Enter") {
|
|
23
33
|
e.preventDefault();
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@alaarab/ogrid-vue-radix",
|
|
3
|
-
"version": "2.
|
|
3
|
+
"version": "2.4.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",
|
|
@@ -42,7 +42,7 @@
|
|
|
42
42
|
"node": ">=18"
|
|
43
43
|
},
|
|
44
44
|
"dependencies": {
|
|
45
|
-
"@alaarab/ogrid-vue": "2.
|
|
45
|
+
"@alaarab/ogrid-vue": "2.4.0",
|
|
46
46
|
"@headlessui/vue": "^1.7.23"
|
|
47
47
|
},
|
|
48
48
|
"peerDependencies": {
|