@keenmate/web-grid 1.0.0-rc05 → 1.0.0-rc06
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/grid.d.ts +21 -5
- package/dist/modules/toolbar/index.d.ts +3 -1
- package/dist/types.d.ts +30 -2
- package/dist/web-component.d.ts +28 -3
- package/dist/web-grid.js +933 -733
- package/dist/web-grid.umd.js +101 -73
- package/package.json +1 -1
- package/src/css/_dialogs.css +2 -0
- package/src/css/_header.css +1 -0
- package/src/css/_pagination.css +2 -0
- package/src/css/_shortcuts.css +126 -0
- package/src/css/_toolbar.css +1 -0
- package/src/css/_variables.css +6 -6
- package/src/css/main.css +2 -0
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@keenmate/web-grid",
|
|
3
|
-
"version": "1.0.0-
|
|
3
|
+
"version": "1.0.0-rc06",
|
|
4
4
|
"description": "Framework-agnostic data grid web component with sorting, filtering, inline editing, and keyboard navigation",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"main": "./dist/web-grid.umd.js",
|
package/src/css/_dialogs.css
CHANGED
|
@@ -79,6 +79,7 @@
|
|
|
79
79
|
padding: var(--wg-spacing-sm) var(--wg-spacing-md);
|
|
80
80
|
border: 1px solid var(--wg-border-color);
|
|
81
81
|
border-radius: var(--wg-border-radius-sm);
|
|
82
|
+
font-family: inherit; /* Form elements don't inherit font by default */
|
|
82
83
|
font-size: var(--wg-font-size-base);
|
|
83
84
|
margin-bottom: var(--wg-spacing-md);
|
|
84
85
|
box-sizing: border-box;
|
|
@@ -100,6 +101,7 @@
|
|
|
100
101
|
padding: var(--wg-spacing-sm) var(--wg-spacing-md);
|
|
101
102
|
border: 1px solid var(--wg-border-color);
|
|
102
103
|
border-radius: var(--wg-border-radius-sm);
|
|
104
|
+
font-family: inherit; /* Form elements don't inherit font by default */
|
|
103
105
|
font-size: var(--wg-font-size-sm);
|
|
104
106
|
cursor: pointer;
|
|
105
107
|
background: var(--wg-surface-1);
|
package/src/css/_header.css
CHANGED
|
@@ -94,6 +94,7 @@
|
|
|
94
94
|
border-radius: var(--wg-filter-input-border-radius);
|
|
95
95
|
background: var(--wg-surface-1);
|
|
96
96
|
color: var(--wg-text-color-1);
|
|
97
|
+
font-family: inherit; /* Form elements don't inherit font by default */
|
|
97
98
|
font-size: var(--wg-filter-input-font-size);
|
|
98
99
|
box-sizing: border-box;
|
|
99
100
|
}
|
package/src/css/_pagination.css
CHANGED
|
@@ -20,6 +20,7 @@
|
|
|
20
20
|
border: var(--wg-pagination-btn-border);
|
|
21
21
|
border-radius: var(--wg-pagination-btn-border-radius);
|
|
22
22
|
color: var(--wg-cell-color);
|
|
23
|
+
font-family: inherit; /* Form elements don't inherit font by default */
|
|
23
24
|
font-size: var(--wg-font-size-base);
|
|
24
25
|
cursor: pointer;
|
|
25
26
|
transition: all var(--wg-transition-fast);
|
|
@@ -62,6 +63,7 @@
|
|
|
62
63
|
border: var(--wg-pagination-btn-border);
|
|
63
64
|
border-radius: var(--wg-pagination-btn-border-radius);
|
|
64
65
|
color: var(--wg-cell-color);
|
|
66
|
+
font-family: inherit; /* Form elements don't inherit font by default */
|
|
65
67
|
font-size: var(--wg-font-size-base);
|
|
66
68
|
cursor: pointer;
|
|
67
69
|
}
|
|
@@ -0,0 +1,126 @@
|
|
|
1
|
+
/* ==============================================================================
|
|
2
|
+
SHORTCUTS HELP - Info icon and overlay for keyboard shortcuts
|
|
3
|
+
============================================================================== */
|
|
4
|
+
|
|
5
|
+
/* Container - positioned absolutely in top-right corner */
|
|
6
|
+
.wg__shortcuts-help {
|
|
7
|
+
position: absolute;
|
|
8
|
+
top: var(--wg-spacing-xs);
|
|
9
|
+
right: var(--wg-spacing-sm);
|
|
10
|
+
z-index: 5;
|
|
11
|
+
}
|
|
12
|
+
|
|
13
|
+
.wg__shortcuts-help--left {
|
|
14
|
+
right: auto;
|
|
15
|
+
left: var(--wg-spacing-sm);
|
|
16
|
+
}
|
|
17
|
+
|
|
18
|
+
/* Info icon button */
|
|
19
|
+
.wg__shortcuts-help-icon {
|
|
20
|
+
display: flex;
|
|
21
|
+
align-items: center;
|
|
22
|
+
justify-content: center;
|
|
23
|
+
width: 24px;
|
|
24
|
+
height: 24px;
|
|
25
|
+
padding: 0;
|
|
26
|
+
border: none;
|
|
27
|
+
border-radius: 50%;
|
|
28
|
+
background: var(--wg-layer-01);
|
|
29
|
+
color: var(--wg-text-color-2);
|
|
30
|
+
cursor: pointer;
|
|
31
|
+
opacity: 0.7;
|
|
32
|
+
}
|
|
33
|
+
|
|
34
|
+
.wg__shortcuts-help-icon:hover {
|
|
35
|
+
opacity: 1;
|
|
36
|
+
background: var(--wg-layer-02);
|
|
37
|
+
}
|
|
38
|
+
|
|
39
|
+
.wg__shortcuts-help-icon svg {
|
|
40
|
+
width: 16px;
|
|
41
|
+
height: 16px;
|
|
42
|
+
}
|
|
43
|
+
|
|
44
|
+
/* Overlay - hidden by default, shown on hover/focus */
|
|
45
|
+
.wg__shortcuts-help-overlay {
|
|
46
|
+
display: none;
|
|
47
|
+
position: absolute;
|
|
48
|
+
top: 100%;
|
|
49
|
+
right: 0;
|
|
50
|
+
margin-top: var(--wg-spacing-xs);
|
|
51
|
+
padding: var(--wg-spacing-md);
|
|
52
|
+
background: var(--wg-layer-01);
|
|
53
|
+
border: 1px solid var(--wg-border-color);
|
|
54
|
+
border-radius: var(--wg-border-radius-md);
|
|
55
|
+
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
|
|
56
|
+
min-width: 200px;
|
|
57
|
+
max-width: 300px;
|
|
58
|
+
z-index: 100;
|
|
59
|
+
}
|
|
60
|
+
|
|
61
|
+
.wg__shortcuts-help--left .wg__shortcuts-help-overlay {
|
|
62
|
+
right: auto;
|
|
63
|
+
left: 0;
|
|
64
|
+
}
|
|
65
|
+
|
|
66
|
+
/* Show overlay on hover or focus-within */
|
|
67
|
+
.wg__shortcuts-help:hover .wg__shortcuts-help-overlay,
|
|
68
|
+
.wg__shortcuts-help:focus-within .wg__shortcuts-help-overlay {
|
|
69
|
+
display: block;
|
|
70
|
+
}
|
|
71
|
+
|
|
72
|
+
/* Title */
|
|
73
|
+
.wg__shortcuts-help-title {
|
|
74
|
+
font-weight: var(--wg-font-weight-semibold);
|
|
75
|
+
font-size: var(--wg-font-size-base);
|
|
76
|
+
color: var(--wg-text-color-1);
|
|
77
|
+
margin-bottom: var(--wg-spacing-sm);
|
|
78
|
+
padding-bottom: var(--wg-spacing-xs);
|
|
79
|
+
border-bottom: 1px solid var(--wg-border-color);
|
|
80
|
+
}
|
|
81
|
+
|
|
82
|
+
/* Custom content area */
|
|
83
|
+
.wg__shortcuts-help-custom {
|
|
84
|
+
margin-bottom: var(--wg-spacing-sm);
|
|
85
|
+
padding-bottom: var(--wg-spacing-sm);
|
|
86
|
+
border-bottom: 1px solid var(--wg-border-color);
|
|
87
|
+
font-size: var(--wg-font-size-sm);
|
|
88
|
+
color: var(--wg-text-color-2);
|
|
89
|
+
}
|
|
90
|
+
|
|
91
|
+
/* Shortcuts list */
|
|
92
|
+
.wg__shortcuts-help-list {
|
|
93
|
+
display: flex;
|
|
94
|
+
flex-direction: column;
|
|
95
|
+
gap: var(--wg-spacing-xs);
|
|
96
|
+
}
|
|
97
|
+
|
|
98
|
+
/* Individual shortcut item */
|
|
99
|
+
.wg__shortcuts-help-item {
|
|
100
|
+
display: flex;
|
|
101
|
+
align-items: center;
|
|
102
|
+
gap: var(--wg-spacing-md);
|
|
103
|
+
}
|
|
104
|
+
|
|
105
|
+
/* Key badge */
|
|
106
|
+
.wg__shortcuts-help-key {
|
|
107
|
+
display: inline-flex;
|
|
108
|
+
align-items: center;
|
|
109
|
+
justify-content: center;
|
|
110
|
+
min-width: 28px;
|
|
111
|
+
padding: 2px 6px;
|
|
112
|
+
font-family: var(--wg-font-family-mono, ui-monospace, monospace);
|
|
113
|
+
font-size: var(--wg-font-size-xs);
|
|
114
|
+
font-weight: var(--wg-font-weight-medium);
|
|
115
|
+
color: var(--wg-text-color-1);
|
|
116
|
+
background: var(--wg-layer-02);
|
|
117
|
+
border: 1px solid var(--wg-border-color);
|
|
118
|
+
border-radius: var(--wg-border-radius-sm);
|
|
119
|
+
}
|
|
120
|
+
|
|
121
|
+
/* Label */
|
|
122
|
+
.wg__shortcuts-help-label {
|
|
123
|
+
flex: 1;
|
|
124
|
+
font-size: var(--wg-font-size-sm);
|
|
125
|
+
color: var(--wg-text-color-2);
|
|
126
|
+
}
|
package/src/css/_toolbar.css
CHANGED
package/src/css/_variables.css
CHANGED
|
@@ -26,7 +26,7 @@
|
|
|
26
26
|
/* ==========================================================================
|
|
27
27
|
FONT FAMILY (set at :host so all shadow DOM content inherits)
|
|
28
28
|
========================================================================== */
|
|
29
|
-
font-family: var(--wg-font-family, var(--base-font-family,
|
|
29
|
+
font-family: var(--wg-font-family, var(--base-font-family, inherit));
|
|
30
30
|
|
|
31
31
|
/* ==========================================================================
|
|
32
32
|
HOST ELEMENT SIZING
|
|
@@ -82,12 +82,12 @@
|
|
|
82
82
|
/* ==========================================================================
|
|
83
83
|
TYPOGRAPHY
|
|
84
84
|
========================================================================== */
|
|
85
|
-
--wg-font-size-base: calc(var(--base-font-size-
|
|
86
|
-
--wg-font-size-sm: calc(var(--base-font-size-
|
|
87
|
-
--wg-font-size-xs: calc(var(--base-font-size-
|
|
88
|
-
--wg-font-size-lg: calc(var(--base-font-size-
|
|
85
|
+
--wg-font-size-base: calc(var(--base-font-size-sm, 1.4) * var(--wg-rem));
|
|
86
|
+
--wg-font-size-sm: calc(var(--base-font-size-xs, 1.2) * var(--wg-rem));
|
|
87
|
+
--wg-font-size-xs: calc(var(--base-font-size-2xs, 1.1) * var(--wg-rem));
|
|
88
|
+
--wg-font-size-lg: calc(var(--base-font-size-base, 1.6) * var(--wg-rem));
|
|
89
89
|
|
|
90
|
-
--wg-line-height-base:
|
|
90
|
+
--wg-line-height-base: var(--base-line-height-normal, 1.5);
|
|
91
91
|
--wg-font-weight-normal: var(--base-font-weight-normal, 400);
|
|
92
92
|
--wg-font-weight-semibold: var(--base-font-weight-semibold, 600);
|
|
93
93
|
|
package/src/css/main.css
CHANGED
|
@@ -13,6 +13,7 @@
|
|
|
13
13
|
- _navigation.css : Keyboard navigation, focus states
|
|
14
14
|
- _pagination.css : Pagination controls, summary, footer
|
|
15
15
|
- _toolbar.css : Row toolbar styles
|
|
16
|
+
- _shortcuts.css : Keyboard shortcuts help icon and overlay
|
|
16
17
|
- _modifiers.css : Striped rows, hover effects, empty state
|
|
17
18
|
- _dialogs.css : Tooltips, go-to dialog
|
|
18
19
|
- _virtual-scroll.css : Virtual scroll support
|
|
@@ -29,6 +30,7 @@
|
|
|
29
30
|
@import '_navigation.css';
|
|
30
31
|
@import '_pagination.css';
|
|
31
32
|
@import '_toolbar.css';
|
|
33
|
+
@import '_shortcuts.css';
|
|
32
34
|
@import '_modifiers.css';
|
|
33
35
|
@import '_dialogs.css';
|
|
34
36
|
@import '_virtual-scroll.css';
|