@keenmate/web-grid 1.0.0-rc08 → 1.0.0-rc10
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 +70 -67
- package/dist/modules/contextmenu/index.d.ts +15 -1
- package/dist/modules/navigation/index.d.ts +1 -1
- package/dist/types.d.ts +70 -33
- package/dist/web-component.d.ts +54 -44
- package/dist/web-grid.js +5821 -5441
- package/dist/web-grid.umd.js +273 -235
- package/package.json +78 -78
- package/src/css/_cells.css +13 -2
- package/src/css/_dialogs.css +2 -2
- package/src/css/_dropdown.css +33 -3
- package/src/css/_freeze.css +7 -8
- package/src/css/_header.css +53 -9
- package/src/css/_reorder.css +9 -8
- package/src/css/_resize.css +14 -5
- package/src/css/_table.css +25 -2
- package/src/css/_toolbar.css +7 -7
- package/src/css/_variables.css +37 -7
package/package.json
CHANGED
|
@@ -1,78 +1,78 @@
|
|
|
1
|
-
{
|
|
2
|
-
"name": "@keenmate/web-grid",
|
|
3
|
-
"version": "1.0.0-
|
|
4
|
-
"description": "Framework-agnostic data grid web component with sorting, filtering, inline editing, and keyboard navigation",
|
|
5
|
-
"type": "module",
|
|
6
|
-
"main": "./dist/web-grid.umd.js",
|
|
7
|
-
"module": "./dist/web-grid.js",
|
|
8
|
-
"types": "./dist/index.d.ts",
|
|
9
|
-
"exports": {
|
|
10
|
-
".": {
|
|
11
|
-
"types": "./dist/index.d.ts",
|
|
12
|
-
"import": "./dist/web-grid.js",
|
|
13
|
-
"require": "./dist/web-grid.umd.js",
|
|
14
|
-
"default": "./dist/web-grid.js"
|
|
15
|
-
},
|
|
16
|
-
"./css": "./src/css/main.css",
|
|
17
|
-
"./manifest": "./component-variables.manifest.json",
|
|
18
|
-
"./dist/*": "./dist/*",
|
|
19
|
-
"./src/css/*": "./src/css/*",
|
|
20
|
-
"./package.json": "./package.json"
|
|
21
|
-
},
|
|
22
|
-
"sideEffects": [
|
|
23
|
-
"./dist/web-grid.js",
|
|
24
|
-
"./dist/web-grid.umd.js",
|
|
25
|
-
"*.css"
|
|
26
|
-
],
|
|
27
|
-
"files": [
|
|
28
|
-
"dist",
|
|
29
|
-
"src/css",
|
|
30
|
-
"component-variables.manifest.json"
|
|
31
|
-
],
|
|
32
|
-
"scripts": {
|
|
33
|
-
"dev": "vite --port 12500",
|
|
34
|
-
"build": "npm run clean:dist && tsc && vite build",
|
|
35
|
-
"build:types": "tsc",
|
|
36
|
-
"preview": "vite preview",
|
|
37
|
-
"clean": "rimraf dist --glob \"*.tgz\"",
|
|
38
|
-
"clean:dist": "rimraf dist"
|
|
39
|
-
},
|
|
40
|
-
"keywords": [
|
|
41
|
-
"grid",
|
|
42
|
-
"data-grid",
|
|
43
|
-
"table",
|
|
44
|
-
"datagrid",
|
|
45
|
-
"editable",
|
|
46
|
-
"sortable",
|
|
47
|
-
"filterable",
|
|
48
|
-
"pagination",
|
|
49
|
-
"inline-editing",
|
|
50
|
-
"web-component",
|
|
51
|
-
"custom-element",
|
|
52
|
-
"shadow-dom",
|
|
53
|
-
"typescript",
|
|
54
|
-
"dark-mode",
|
|
55
|
-
"context-menu",
|
|
56
|
-
"row-toolbar",
|
|
57
|
-
"keyboard-navigation",
|
|
58
|
-
"keenmate"
|
|
59
|
-
],
|
|
60
|
-
"author": "KeenMate",
|
|
61
|
-
"license": "MIT",
|
|
62
|
-
"repository": {
|
|
63
|
-
"type": "git",
|
|
64
|
-
"url": "git+https://github.com/KeenMate/web-grid.git"
|
|
65
|
-
},
|
|
66
|
-
"bugs": {
|
|
67
|
-
"url": "https://github.com/KeenMate/web-grid/issues"
|
|
68
|
-
},
|
|
69
|
-
"homepage": "https://github.com/KeenMate/web-grid#readme",
|
|
70
|
-
"devDependencies": {
|
|
71
|
-
"rimraf": "^5.0.5",
|
|
72
|
-
"typescript": "^5.3.3",
|
|
73
|
-
"vite": "^5.0.8"
|
|
74
|
-
},
|
|
75
|
-
"dependencies": {
|
|
76
|
-
"@floating-ui/dom": "^1.7.4"
|
|
77
|
-
}
|
|
78
|
-
}
|
|
1
|
+
{
|
|
2
|
+
"name": "@keenmate/web-grid",
|
|
3
|
+
"version": "1.0.0-rc10",
|
|
4
|
+
"description": "Framework-agnostic data grid web component with sorting, filtering, inline editing, and keyboard navigation",
|
|
5
|
+
"type": "module",
|
|
6
|
+
"main": "./dist/web-grid.umd.js",
|
|
7
|
+
"module": "./dist/web-grid.js",
|
|
8
|
+
"types": "./dist/index.d.ts",
|
|
9
|
+
"exports": {
|
|
10
|
+
".": {
|
|
11
|
+
"types": "./dist/index.d.ts",
|
|
12
|
+
"import": "./dist/web-grid.js",
|
|
13
|
+
"require": "./dist/web-grid.umd.js",
|
|
14
|
+
"default": "./dist/web-grid.js"
|
|
15
|
+
},
|
|
16
|
+
"./css": "./src/css/main.css",
|
|
17
|
+
"./manifest": "./component-variables.manifest.json",
|
|
18
|
+
"./dist/*": "./dist/*",
|
|
19
|
+
"./src/css/*": "./src/css/*",
|
|
20
|
+
"./package.json": "./package.json"
|
|
21
|
+
},
|
|
22
|
+
"sideEffects": [
|
|
23
|
+
"./dist/web-grid.js",
|
|
24
|
+
"./dist/web-grid.umd.js",
|
|
25
|
+
"*.css"
|
|
26
|
+
],
|
|
27
|
+
"files": [
|
|
28
|
+
"dist",
|
|
29
|
+
"src/css",
|
|
30
|
+
"component-variables.manifest.json"
|
|
31
|
+
],
|
|
32
|
+
"scripts": {
|
|
33
|
+
"dev": "vite --port 12500",
|
|
34
|
+
"build": "npm run clean:dist && tsc && vite build",
|
|
35
|
+
"build:types": "tsc",
|
|
36
|
+
"preview": "vite preview",
|
|
37
|
+
"clean": "rimraf dist --glob \"*.tgz\"",
|
|
38
|
+
"clean:dist": "rimraf dist"
|
|
39
|
+
},
|
|
40
|
+
"keywords": [
|
|
41
|
+
"grid",
|
|
42
|
+
"data-grid",
|
|
43
|
+
"table",
|
|
44
|
+
"datagrid",
|
|
45
|
+
"editable",
|
|
46
|
+
"sortable",
|
|
47
|
+
"filterable",
|
|
48
|
+
"pagination",
|
|
49
|
+
"inline-editing",
|
|
50
|
+
"web-component",
|
|
51
|
+
"custom-element",
|
|
52
|
+
"shadow-dom",
|
|
53
|
+
"typescript",
|
|
54
|
+
"dark-mode",
|
|
55
|
+
"context-menu",
|
|
56
|
+
"row-toolbar",
|
|
57
|
+
"keyboard-navigation",
|
|
58
|
+
"keenmate"
|
|
59
|
+
],
|
|
60
|
+
"author": "KeenMate",
|
|
61
|
+
"license": "MIT",
|
|
62
|
+
"repository": {
|
|
63
|
+
"type": "git",
|
|
64
|
+
"url": "git+https://github.com/KeenMate/web-grid.git"
|
|
65
|
+
},
|
|
66
|
+
"bugs": {
|
|
67
|
+
"url": "https://github.com/KeenMate/web-grid/issues"
|
|
68
|
+
},
|
|
69
|
+
"homepage": "https://github.com/KeenMate/web-grid#readme",
|
|
70
|
+
"devDependencies": {
|
|
71
|
+
"rimraf": "^5.0.5",
|
|
72
|
+
"typescript": "^5.3.3",
|
|
73
|
+
"vite": "^5.0.8"
|
|
74
|
+
},
|
|
75
|
+
"dependencies": {
|
|
76
|
+
"@floating-ui/dom": "^1.7.4"
|
|
77
|
+
}
|
|
78
|
+
}
|
package/src/css/_cells.css
CHANGED
|
@@ -7,6 +7,8 @@
|
|
|
7
7
|
.wg__cell {
|
|
8
8
|
padding: var(--wg-cell-padding);
|
|
9
9
|
color: var(--wg-cell-color);
|
|
10
|
+
height: var(--wg-row-min-height); /* In table layout, height acts as min-height */
|
|
11
|
+
max-height: var(--wg-row-max-height); /* Cap row height when set */
|
|
10
12
|
box-sizing: border-box; /* Include padding in width calculation */
|
|
11
13
|
/* Account for sticky header when scrolling into view */
|
|
12
14
|
scroll-margin-top: 3rem;
|
|
@@ -22,13 +24,22 @@
|
|
|
22
24
|
user-select: none;
|
|
23
25
|
}
|
|
24
26
|
|
|
25
|
-
/* Text overflow ellipsis */
|
|
26
|
-
|
|
27
|
+
/* Text overflow ellipsis - applied to inner text element */
|
|
28
|
+
/* This allows the cell itself to have overflow:visible for frozen column shadows */
|
|
29
|
+
.wg__cell--ellipsis .wg__cell-text {
|
|
30
|
+
display: block;
|
|
27
31
|
overflow: hidden;
|
|
28
32
|
text-overflow: ellipsis;
|
|
29
33
|
white-space: nowrap;
|
|
30
34
|
}
|
|
31
35
|
|
|
36
|
+
/* Line clamp - limit visible lines with ellipsis */
|
|
37
|
+
.wg__cell--line-clamp .wg__cell-text {
|
|
38
|
+
display: -webkit-box;
|
|
39
|
+
-webkit-box-orient: vertical;
|
|
40
|
+
overflow: hidden;
|
|
41
|
+
}
|
|
42
|
+
|
|
32
43
|
/* ==============================================================================
|
|
33
44
|
EDITABLE CELLS
|
|
34
45
|
============================================================================== */
|
package/src/css/_dialogs.css
CHANGED
|
@@ -5,13 +5,13 @@
|
|
|
5
5
|
position: fixed;
|
|
6
6
|
z-index: var(--wg-z-tooltip);
|
|
7
7
|
max-width: 300px;
|
|
8
|
-
padding:
|
|
8
|
+
padding: var(--wg-tooltip-padding);
|
|
9
9
|
background: var(--wg-tooltip-bg, #333);
|
|
10
10
|
color: var(--wg-tooltip-color, #fff);
|
|
11
11
|
font-size: var(--wg-font-size-sm);
|
|
12
12
|
line-height: 1.4;
|
|
13
13
|
border-radius: var(--wg-border-radius-sm);
|
|
14
|
-
box-shadow:
|
|
14
|
+
box-shadow: var(--wg-tooltip-shadow);
|
|
15
15
|
pointer-events: none;
|
|
16
16
|
opacity: 0;
|
|
17
17
|
transition: opacity var(--wg-transition-fast);
|
package/src/css/_dropdown.css
CHANGED
|
@@ -136,8 +136,8 @@
|
|
|
136
136
|
.wg__dropdown-option {
|
|
137
137
|
display: flex;
|
|
138
138
|
align-items: center;
|
|
139
|
-
gap: var(--wg-
|
|
140
|
-
padding:
|
|
139
|
+
gap: var(--wg-dropdown-option-gap);
|
|
140
|
+
padding: var(--wg-dropdown-option-padding);
|
|
141
141
|
cursor: pointer;
|
|
142
142
|
color: var(--wg-text-color-1);
|
|
143
143
|
}
|
|
@@ -145,6 +145,7 @@
|
|
|
145
145
|
.wg__dropdown-option:hover,
|
|
146
146
|
.wg__dropdown-option--highlighted {
|
|
147
147
|
background: var(--wg-hover-bg, #f0f0f0);
|
|
148
|
+
box-shadow: inset 0 0 0 2px var(--wg-accent-color, #0078d4);
|
|
148
149
|
}
|
|
149
150
|
|
|
150
151
|
.wg__dropdown-option--selected {
|
|
@@ -186,8 +187,37 @@
|
|
|
186
187
|
}
|
|
187
188
|
|
|
188
189
|
.wg__dropdown-empty {
|
|
189
|
-
padding:
|
|
190
|
+
padding: var(--wg-dropdown-empty-padding);
|
|
190
191
|
color: var(--wg-text-color-2);
|
|
191
192
|
font-style: italic;
|
|
192
193
|
text-align: center;
|
|
193
194
|
}
|
|
195
|
+
|
|
196
|
+
/* Dropdown option alignment modifiers - inherit from column.align */
|
|
197
|
+
.wg__dropdown-option--align-left {
|
|
198
|
+
justify-content: flex-start;
|
|
199
|
+
}
|
|
200
|
+
.wg__dropdown-option--align-left .wg__dropdown-option-content {
|
|
201
|
+
text-align: left;
|
|
202
|
+
}
|
|
203
|
+
|
|
204
|
+
.wg__dropdown-option--align-center {
|
|
205
|
+
justify-content: center;
|
|
206
|
+
}
|
|
207
|
+
.wg__dropdown-option--align-center .wg__dropdown-option-content {
|
|
208
|
+
text-align: center;
|
|
209
|
+
}
|
|
210
|
+
|
|
211
|
+
.wg__dropdown-option--align-right {
|
|
212
|
+
justify-content: flex-end;
|
|
213
|
+
}
|
|
214
|
+
.wg__dropdown-option--align-right .wg__dropdown-option-content {
|
|
215
|
+
text-align: right;
|
|
216
|
+
}
|
|
217
|
+
|
|
218
|
+
.wg__dropdown-option--align-justify {
|
|
219
|
+
justify-content: flex-start; /* Justify doesn't apply to single-line options */
|
|
220
|
+
}
|
|
221
|
+
.wg__dropdown-option--align-justify .wg__dropdown-option-content {
|
|
222
|
+
text-align: justify;
|
|
223
|
+
}
|
package/src/css/_freeze.css
CHANGED
|
@@ -10,8 +10,6 @@
|
|
|
10
10
|
|
|
11
11
|
.wg__header--frozen {
|
|
12
12
|
background: var(--wg-frozen-header-bg, var(--wg-header-bg));
|
|
13
|
-
/* Shadow on right edge to indicate frozen state */
|
|
14
|
-
box-shadow: var(--wg-frozen-column-shadow, 2px 0 4px rgba(0, 0, 0, 0.1));
|
|
15
13
|
}
|
|
16
14
|
|
|
17
15
|
/* Corner cell (row number header when sticky) - highest z-index */
|
|
@@ -25,16 +23,17 @@
|
|
|
25
23
|
|
|
26
24
|
.wg__cell--frozen {
|
|
27
25
|
background: var(--wg-frozen-column-bg, var(--wg-surface-1));
|
|
28
|
-
|
|
29
|
-
|
|
26
|
+
}
|
|
27
|
+
|
|
28
|
+
/* Only the last frozen cell gets the separator border */
|
|
29
|
+
.wg__cell--frozen-last {
|
|
30
|
+
box-shadow: inset -1px 0 0 var(--wg-border-color);
|
|
30
31
|
}
|
|
31
32
|
|
|
32
33
|
/* Row number cells when sticky */
|
|
33
34
|
.wg__row-number.wg__cell--frozen {
|
|
34
35
|
background: var(--wg-header-bg);
|
|
35
36
|
z-index: 2 !important;
|
|
36
|
-
/* Combine border shadow with frozen shadow */
|
|
37
|
-
box-shadow: inset -1px 0 0 var(--wg-border-color), var(--wg-frozen-column-shadow, 2px 0 4px rgba(0, 0, 0, 0.1));
|
|
38
37
|
}
|
|
39
38
|
|
|
40
39
|
/* ==========================================================================
|
|
@@ -67,8 +66,8 @@
|
|
|
67
66
|
SCROLL-AWARE FROZEN COLUMN INDICATOR
|
|
68
67
|
========================================================================== */
|
|
69
68
|
|
|
70
|
-
/* Last frozen column needs overflow:visible for ::after to
|
|
71
|
-
/*
|
|
69
|
+
/* Last frozen column needs overflow:visible for ::after shadow to extend outside */
|
|
70
|
+
/* Text ellipsis is handled by the inner .wg__cell-text element */
|
|
72
71
|
.wg__header.wg__header--frozen-last,
|
|
73
72
|
.wg__cell.wg__cell--frozen-last {
|
|
74
73
|
overflow: visible;
|
package/src/css/_header.css
CHANGED
|
@@ -12,16 +12,19 @@
|
|
|
12
12
|
color: var(--wg-header-color);
|
|
13
13
|
font-weight: var(--wg-header-font-weight);
|
|
14
14
|
padding: var(--wg-header-padding);
|
|
15
|
+
height: var(--wg-header-min-height); /* In table layout, height acts as min-height */
|
|
15
16
|
border-bottom: var(--wg-header-border);
|
|
16
|
-
border-right
|
|
17
|
+
/* Use box-shadow instead of border-right to avoid flicker with sticky + border-collapse */
|
|
18
|
+
box-shadow: inset -1px 0 0 var(--wg-border-color);
|
|
17
19
|
box-sizing: border-box; /* Include padding in width calculation */
|
|
18
|
-
text-align
|
|
20
|
+
/* text-align set by inline style from column.headerAlign or column.align */
|
|
19
21
|
user-select: none;
|
|
22
|
+
overflow: hidden; /* Required for text-overflow to work in table cells */
|
|
20
23
|
}
|
|
21
24
|
|
|
22
25
|
/* Remove separator from last header */
|
|
23
26
|
.wg__header:last-child {
|
|
24
|
-
|
|
27
|
+
box-shadow: none;
|
|
25
28
|
}
|
|
26
29
|
|
|
27
30
|
.wg__header--sortable {
|
|
@@ -36,16 +39,59 @@
|
|
|
36
39
|
background: var(--wg-header-bg-sorted);
|
|
37
40
|
}
|
|
38
41
|
|
|
39
|
-
/* Header
|
|
42
|
+
/* Header Container - flex layout for content + controls */
|
|
43
|
+
.wg__header-container {
|
|
44
|
+
display: flex;
|
|
45
|
+
align-items: stretch; /* Children take full height */
|
|
46
|
+
gap: 4px;
|
|
47
|
+
height: 100%;
|
|
48
|
+
}
|
|
49
|
+
|
|
50
|
+
/* Header Content - takes remaining space */
|
|
40
51
|
.wg__header-content {
|
|
52
|
+
flex: 1;
|
|
53
|
+
min-width: 0; /* Allow shrinking */
|
|
41
54
|
display: flex;
|
|
55
|
+
align-items: center; /* Vertically center title */
|
|
56
|
+
justify-content: flex-start; /* Default: left */
|
|
57
|
+
}
|
|
58
|
+
|
|
59
|
+
/* Horizontal alignment modifiers */
|
|
60
|
+
.wg__header-content--align-left {
|
|
61
|
+
justify-content: flex-start;
|
|
62
|
+
}
|
|
63
|
+
.wg__header-content--align-center {
|
|
64
|
+
justify-content: center;
|
|
65
|
+
}
|
|
66
|
+
.wg__header-content--align-right {
|
|
67
|
+
justify-content: flex-end;
|
|
68
|
+
}
|
|
69
|
+
.wg__header-content--align-justify {
|
|
70
|
+
justify-content: flex-start; /* Justify doesn't apply to single-line headers, fallback to left */
|
|
71
|
+
}
|
|
72
|
+
|
|
73
|
+
/* Vertical alignment modifiers */
|
|
74
|
+
.wg__header-content--valign-top {
|
|
75
|
+
align-items: flex-start;
|
|
76
|
+
}
|
|
77
|
+
.wg__header-content--valign-middle {
|
|
42
78
|
align-items: center;
|
|
43
|
-
|
|
44
|
-
|
|
79
|
+
}
|
|
80
|
+
.wg__header-content--valign-bottom {
|
|
81
|
+
align-items: flex-end;
|
|
45
82
|
}
|
|
46
83
|
|
|
47
84
|
.wg__header-title {
|
|
48
|
-
|
|
85
|
+
overflow: hidden;
|
|
86
|
+
text-overflow: ellipsis;
|
|
87
|
+
white-space: nowrap;
|
|
88
|
+
}
|
|
89
|
+
|
|
90
|
+
/* Header Controls - fixed space for sort indicator */
|
|
91
|
+
.wg__header-controls {
|
|
92
|
+
flex-shrink: 0;
|
|
93
|
+
display: flex;
|
|
94
|
+
align-items: center; /* Vertically center sort indicator */
|
|
49
95
|
}
|
|
50
96
|
|
|
51
97
|
/* Sort Indicator */
|
|
@@ -54,8 +100,6 @@
|
|
|
54
100
|
opacity: var(--wg-sort-indicator-opacity);
|
|
55
101
|
min-width: 16px;
|
|
56
102
|
text-align: center;
|
|
57
|
-
display: inline-flex;
|
|
58
|
-
align-items: center;
|
|
59
103
|
}
|
|
60
104
|
|
|
61
105
|
.wg__sort-placeholder {
|
package/src/css/_reorder.css
CHANGED
|
@@ -4,15 +4,18 @@
|
|
|
4
4
|
Drag-and-drop column reordering styles
|
|
5
5
|
*/
|
|
6
6
|
|
|
7
|
-
/* Dragging header -
|
|
7
|
+
/* Dragging header - use dashed outline instead of opacity to avoid showing body data through */
|
|
8
8
|
.wg__header--dragging {
|
|
9
|
-
opacity:
|
|
9
|
+
opacity: 1;
|
|
10
|
+
background: var(--wg-header-bg) !important;
|
|
11
|
+
outline: 2px dashed var(--wg-accent-color);
|
|
12
|
+
outline-offset: -2px;
|
|
10
13
|
}
|
|
11
14
|
|
|
12
|
-
/* Ghost element that follows cursor */
|
|
15
|
+
/* Ghost element that follows cursor - fixed to viewport for simplicity */
|
|
13
16
|
.wg__reorder-ghost {
|
|
14
|
-
position:
|
|
15
|
-
z-index:
|
|
17
|
+
position: fixed;
|
|
18
|
+
z-index: 10000;
|
|
16
19
|
background: var(--wg-header-bg);
|
|
17
20
|
border: 2px solid var(--wg-accent-color);
|
|
18
21
|
border-radius: var(--wg-border-radius-sm);
|
|
@@ -26,11 +29,9 @@
|
|
|
26
29
|
white-space: nowrap;
|
|
27
30
|
}
|
|
28
31
|
|
|
29
|
-
/* Drop indicator line */
|
|
32
|
+
/* Drop indicator line - top/height set dynamically to account for scroll */
|
|
30
33
|
.wg__drop-indicator {
|
|
31
34
|
position: absolute;
|
|
32
|
-
top: 0;
|
|
33
|
-
bottom: 0;
|
|
34
35
|
width: 3px;
|
|
35
36
|
background: var(--wg-accent-color);
|
|
36
37
|
z-index: 999;
|
package/src/css/_resize.css
CHANGED
|
@@ -4,10 +4,9 @@
|
|
|
4
4
|
Resize handles for column width adjustment
|
|
5
5
|
*/
|
|
6
6
|
|
|
7
|
-
/*
|
|
8
|
-
.
|
|
9
|
-
|
|
10
|
-
}
|
|
7
|
+
/* Note: .wg__header has position: sticky in _header.css, which also
|
|
8
|
+
creates a containing block for absolutely positioned children.
|
|
9
|
+
Do NOT add position: relative here - it would break sticky headers! */
|
|
11
10
|
|
|
12
11
|
/* Resize handle - invisible by default, appears on hover */
|
|
13
12
|
.wg__resize-handle {
|
|
@@ -54,6 +53,16 @@
|
|
|
54
53
|
bottom: 0;
|
|
55
54
|
}
|
|
56
55
|
|
|
56
|
+
/* Disabled state - non-resizable columns */
|
|
57
|
+
.wg__resize-handle--disabled {
|
|
58
|
+
cursor: not-allowed;
|
|
59
|
+
}
|
|
60
|
+
|
|
61
|
+
/* Hide visual indicator for disabled handles */
|
|
62
|
+
.wg__resize-handle--disabled::after {
|
|
63
|
+
display: none;
|
|
64
|
+
}
|
|
65
|
+
|
|
57
66
|
/* Keep handle visible during drag */
|
|
58
67
|
.wg--resizing .wg__resize-handle {
|
|
59
68
|
opacity: 1;
|
|
@@ -71,7 +80,7 @@
|
|
|
71
80
|
cursor: col-resize;
|
|
72
81
|
}
|
|
73
82
|
|
|
74
|
-
/* Allow table to shrink during resize
|
|
83
|
+
/* Allow table to shrink during resize - override min-width: 100% to allow smaller */
|
|
75
84
|
.wg--resizing .wg__table {
|
|
76
85
|
min-width: 0 !important;
|
|
77
86
|
}
|
package/src/css/_table.css
CHANGED
|
@@ -33,8 +33,8 @@ web-grid:not(:defined) {
|
|
|
33
33
|
TABLE
|
|
34
34
|
============================================================================== */
|
|
35
35
|
.wg__table {
|
|
36
|
-
width:
|
|
37
|
-
min-width: max-content; /*
|
|
36
|
+
width: 100%;
|
|
37
|
+
min-width: max-content; /* Expand beyond container if columns are wide */
|
|
38
38
|
border-collapse: collapse;
|
|
39
39
|
table-layout: fixed;
|
|
40
40
|
background: var(--wg-table-bg);
|
|
@@ -42,6 +42,29 @@ web-grid:not(:defined) {
|
|
|
42
42
|
line-height: var(--wg-line-height-base);
|
|
43
43
|
}
|
|
44
44
|
|
|
45
|
+
/* Filler column - absorbs extra space so data columns keep exact widths */
|
|
46
|
+
.wg__filler {
|
|
47
|
+
width: auto;
|
|
48
|
+
min-width: 0;
|
|
49
|
+
padding: 0 !important;
|
|
50
|
+
border: none !important;
|
|
51
|
+
box-shadow: none !important;
|
|
52
|
+
}
|
|
53
|
+
|
|
54
|
+
/* Filler header matches header row - needs same sticky behavior */
|
|
55
|
+
th.wg__filler {
|
|
56
|
+
position: sticky;
|
|
57
|
+
top: 0;
|
|
58
|
+
z-index: 1;
|
|
59
|
+
background: var(--wg-header-bg);
|
|
60
|
+
border-bottom: var(--wg-header-border) !important;
|
|
61
|
+
}
|
|
62
|
+
|
|
63
|
+
/* Filler body cells are transparent */
|
|
64
|
+
td.wg__filler {
|
|
65
|
+
background: transparent;
|
|
66
|
+
}
|
|
67
|
+
|
|
45
68
|
/* ==============================================================================
|
|
46
69
|
ROWS
|
|
47
70
|
============================================================================== */
|
package/src/css/_toolbar.css
CHANGED
|
@@ -21,11 +21,11 @@
|
|
|
21
21
|
|
|
22
22
|
.wg__toolbar-row {
|
|
23
23
|
display: flex;
|
|
24
|
-
gap:
|
|
24
|
+
gap: var(--wg-toolbar-row-gap);
|
|
25
25
|
align-items: center;
|
|
26
26
|
/* Match grid row height: vertical padding (design-unit * 2 * 2) + line-height (~21px) */
|
|
27
27
|
height: var(--wg-toolbar-row-height);
|
|
28
|
-
padding:
|
|
28
|
+
padding: var(--wg-toolbar-row-padding);
|
|
29
29
|
}
|
|
30
30
|
|
|
31
31
|
.wg__toolbar-row + .wg__toolbar-row {
|
|
@@ -51,7 +51,7 @@
|
|
|
51
51
|
display: flex;
|
|
52
52
|
align-items: center;
|
|
53
53
|
justify-content: center;
|
|
54
|
-
gap:
|
|
54
|
+
gap: var(--wg-toolbar-btn-gap);
|
|
55
55
|
font-family: inherit; /* Form elements don't inherit font by default */
|
|
56
56
|
font-size: var(--wg-font-size-base);
|
|
57
57
|
font-weight: 500;
|
|
@@ -82,7 +82,7 @@
|
|
|
82
82
|
}
|
|
83
83
|
|
|
84
84
|
.wg__toolbar-label {
|
|
85
|
-
font-size:
|
|
85
|
+
font-size: var(--wg-toolbar-label-font-size);
|
|
86
86
|
white-space: nowrap;
|
|
87
87
|
}
|
|
88
88
|
|
|
@@ -149,7 +149,7 @@
|
|
|
149
149
|
width: 1%; /* Shrink to content */
|
|
150
150
|
white-space: nowrap;
|
|
151
151
|
text-align: center;
|
|
152
|
-
padding: var(--wg-
|
|
152
|
+
padding: var(--wg-inline-actions-padding);
|
|
153
153
|
}
|
|
154
154
|
|
|
155
155
|
.wg__inline-actions-header {
|
|
@@ -159,13 +159,13 @@
|
|
|
159
159
|
.wg__inline-actions-wrap {
|
|
160
160
|
display: flex;
|
|
161
161
|
flex-direction: column;
|
|
162
|
-
gap:
|
|
162
|
+
gap: var(--wg-inline-actions-gap);
|
|
163
163
|
align-items: center;
|
|
164
164
|
}
|
|
165
165
|
|
|
166
166
|
.wg__inline-actions-row {
|
|
167
167
|
display: flex;
|
|
168
|
-
gap:
|
|
168
|
+
gap: var(--wg-inline-actions-gap);
|
|
169
169
|
align-items: center;
|
|
170
170
|
justify-content: center;
|
|
171
171
|
}
|
package/src/css/_variables.css
CHANGED
|
@@ -124,15 +124,18 @@
|
|
|
124
124
|
--wg-header-color: var(--wg-text-color-1);
|
|
125
125
|
--wg-header-border: 2px solid var(--wg-border-color);
|
|
126
126
|
--wg-header-separator: 1px solid var(--wg-border-color); /* Vertical separator between headers */
|
|
127
|
-
--wg-header-padding: var(--wg-spacing-sm)
|
|
127
|
+
--wg-header-padding: var(--wg-spacing-sm);
|
|
128
128
|
--wg-header-font-weight: var(--wg-font-weight-semibold);
|
|
129
|
+
--wg-header-min-height: auto; /* Set to e.g. 40px for consistent header height */
|
|
129
130
|
|
|
130
131
|
/* ==========================================================================
|
|
131
132
|
CELL COMPONENT
|
|
132
133
|
========================================================================== */
|
|
133
|
-
--wg-cell-padding: var(--wg-spacing-sm)
|
|
134
|
+
--wg-cell-padding: var(--wg-spacing-sm);
|
|
134
135
|
--wg-cell-padding-block: var(--wg-spacing-sm);
|
|
135
|
-
--wg-cell-padding-inline: var(--wg-spacing-
|
|
136
|
+
--wg-cell-padding-inline: var(--wg-spacing-sm);
|
|
137
|
+
--wg-row-min-height: auto; /* Set to e.g. 40px for consistent row heights */
|
|
138
|
+
--wg-row-max-height: none; /* Set to e.g. 100px to cap row height (overflow hidden) */
|
|
136
139
|
--wg-cell-color: var(--wg-text-color-1);
|
|
137
140
|
--wg-cell-border: 1px solid var(--wg-border-color);
|
|
138
141
|
--wg-cell-bg-hover: var(--wg-hover-bg);
|
|
@@ -211,7 +214,7 @@
|
|
|
211
214
|
--wg-editor-validating-opacity: 0.7;
|
|
212
215
|
|
|
213
216
|
/* Dropdown Toggle */
|
|
214
|
-
--wg-dropdown-toggle-right: var(--wg-spacing-
|
|
217
|
+
--wg-dropdown-toggle-right: var(--wg-spacing-sm);
|
|
215
218
|
--wg-dropdown-toggle-size: calc(1.2 * var(--wg-rem));
|
|
216
219
|
--wg-dropdown-toggle-hitbox: calc(2.4 * var(--wg-rem));
|
|
217
220
|
|
|
@@ -286,8 +289,8 @@
|
|
|
286
289
|
/* ==========================================================================
|
|
287
290
|
COLUMN RESIZE
|
|
288
291
|
========================================================================== */
|
|
289
|
-
--wg-resize-handle-width:
|
|
290
|
-
--wg-resize-handle-offset: -
|
|
292
|
+
--wg-resize-handle-width: 12px;
|
|
293
|
+
--wg-resize-handle-offset: -6px; /* Centered on column border */
|
|
291
294
|
--wg-resize-handle-line-width: 2px;
|
|
292
295
|
--wg-resize-handle-color: var(--wg-border-color);
|
|
293
296
|
--wg-resize-handle-active-color: var(--wg-accent-color);
|
|
@@ -296,7 +299,7 @@
|
|
|
296
299
|
FILL HANDLE (Excel-like autofill)
|
|
297
300
|
========================================================================== */
|
|
298
301
|
--wg-fill-handle-size: 8px;
|
|
299
|
-
--wg-fill-handle-bg: var(--wg-
|
|
302
|
+
--wg-fill-handle-bg: var(--wg-surface-1);
|
|
300
303
|
--wg-fill-handle-border-color: var(--wg-accent-color);
|
|
301
304
|
--wg-fill-handle-border-width: 2px;
|
|
302
305
|
--wg-fill-range-bg: color-mix(in srgb, var(--wg-accent-color) 15%, transparent);
|
|
@@ -308,4 +311,31 @@
|
|
|
308
311
|
--wg-selection-bg: color-mix(in srgb, var(--wg-accent-color) 15%, transparent);
|
|
309
312
|
--wg-selection-row-number-bg: var(--wg-accent-color);
|
|
310
313
|
--wg-selection-row-number-color: var(--base-text-inverted, #fff);
|
|
314
|
+
|
|
315
|
+
/* ==========================================================================
|
|
316
|
+
DROPDOWN MENU (Component-Specific)
|
|
317
|
+
========================================================================== */
|
|
318
|
+
--wg-dropdown-option-gap: var(--wg-spacing-sm);
|
|
319
|
+
--wg-dropdown-option-padding: calc(0.6 * var(--wg-rem)) var(--wg-spacing-sm) calc(0.6 * var(--wg-rem)) calc(var(--wg-spacing-sm) - 1px);
|
|
320
|
+
--wg-dropdown-empty-padding: calc(0.8 * var(--wg-rem)) var(--wg-spacing-sm) calc(0.8 * var(--wg-rem)) calc(var(--wg-spacing-sm) - 1px);
|
|
321
|
+
|
|
322
|
+
/* ==========================================================================
|
|
323
|
+
INLINE ACTIONS (Component-Specific)
|
|
324
|
+
========================================================================== */
|
|
325
|
+
--wg-inline-actions-padding: var(--wg-spacing-xs) var(--wg-spacing-sm);
|
|
326
|
+
--wg-inline-actions-gap: calc(0.2 * var(--wg-rem));
|
|
327
|
+
|
|
328
|
+
/* ==========================================================================
|
|
329
|
+
TOOLBAR EXTRAS (Component-Specific)
|
|
330
|
+
========================================================================== */
|
|
331
|
+
--wg-toolbar-row-gap: calc(0.2 * var(--wg-rem));
|
|
332
|
+
--wg-toolbar-row-padding: 0 calc(0.4 * var(--wg-rem));
|
|
333
|
+
--wg-toolbar-label-font-size: var(--wg-font-size-sm);
|
|
334
|
+
--wg-toolbar-btn-gap: calc(0.4 * var(--wg-rem));
|
|
335
|
+
|
|
336
|
+
/* ==========================================================================
|
|
337
|
+
TOOLTIP EXTRAS (Component-Specific)
|
|
338
|
+
========================================================================== */
|
|
339
|
+
--wg-tooltip-padding: calc(0.6 * var(--wg-rem)) calc(1.0 * var(--wg-rem));
|
|
340
|
+
--wg-tooltip-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
|
|
311
341
|
}
|