@keenmate/web-grid 1.0.3 → 1.0.4
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/README.md +6 -3
- package/ai/basic-setup.txt +1 -0
- package/ai/editing.txt +21 -0
- package/ai/public-methods.txt +6 -0
- package/ai/styling-theming.txt +3 -0
- package/dist/grid.d.ts +11 -0
- package/dist/types.d.ts +1 -0
- package/dist/web-component.d.ts +4 -0
- package/dist/web-grid.js +411 -375
- package/dist/web-grid.umd.js +35 -35
- package/package.json +1 -1
- package/src/css/_dark-mode.css +5 -0
- package/src/css/_dirty-indicator.css +37 -0
- package/src/css/_variables.css +8 -0
- package/src/css/main.css +9 -8
package/package.json
CHANGED
package/src/css/_dark-mode.css
CHANGED
|
@@ -32,6 +32,9 @@
|
|
|
32
32
|
--wg-active-bg: #4a4a4a;
|
|
33
33
|
--wg-danger-bg-light: #442726;
|
|
34
34
|
--wg-danger-color: #f87c86;
|
|
35
|
+
--wg-dirty-indicator-color: #ffa940;
|
|
36
|
+
--wg-dirty-cell-bg: rgba(255, 169, 64, 0.12);
|
|
37
|
+
--wg-dirty-row-number-border-color: #ffa940;
|
|
35
38
|
}
|
|
36
39
|
}
|
|
37
40
|
|
|
@@ -56,6 +59,8 @@
|
|
|
56
59
|
--wg-active-bg: #4a4a4a;
|
|
57
60
|
--wg-danger-bg-light: #442726;
|
|
58
61
|
--wg-danger-color: #f87c86;
|
|
62
|
+
--wg-dirty-indicator-color: #ffa940;
|
|
63
|
+
--wg-dirty-row-number-border-color: #ffa940;
|
|
59
64
|
}
|
|
60
65
|
|
|
61
66
|
/* ==============================================================================
|
|
@@ -0,0 +1,37 @@
|
|
|
1
|
+
/* ==============================================================================
|
|
2
|
+
DIRTY INDICATOR (Unsaved Changes)
|
|
3
|
+
==============================================================================
|
|
4
|
+
Shows a small triangle in the top-left corner of cells that have been edited
|
|
5
|
+
but not yet saved/committed to the original data.
|
|
6
|
+
*/
|
|
7
|
+
|
|
8
|
+
/* Dirty cell - subtle background tint */
|
|
9
|
+
.wg__cell--dirty {
|
|
10
|
+
background: var(--wg-dirty-cell-bg) !important;
|
|
11
|
+
}
|
|
12
|
+
|
|
13
|
+
/* Dirty cell - small corner triangle via ::before */
|
|
14
|
+
.wg__cell--dirty::before {
|
|
15
|
+
content: "";
|
|
16
|
+
position: absolute;
|
|
17
|
+
top: 0;
|
|
18
|
+
left: 0;
|
|
19
|
+
width: 0;
|
|
20
|
+
height: 0;
|
|
21
|
+
border-style: solid;
|
|
22
|
+
border-width: var(--wg-dirty-indicator-size) var(--wg-dirty-indicator-size) 0 0;
|
|
23
|
+
border-color: var(--wg-dirty-indicator-color) transparent transparent transparent;
|
|
24
|
+
pointer-events: none;
|
|
25
|
+
}
|
|
26
|
+
|
|
27
|
+
/* Don't show dirty indicator when cell is being actively edited */
|
|
28
|
+
.wg__cell--dirty.wg__cell--editing::before {
|
|
29
|
+
display: none;
|
|
30
|
+
}
|
|
31
|
+
|
|
32
|
+
/* Row number dirty indicator - left border accent */
|
|
33
|
+
.wg__row-number--dirty {
|
|
34
|
+
box-shadow:
|
|
35
|
+
inset 3px 0 0 var(--wg-dirty-row-number-border-color),
|
|
36
|
+
inset calc(-1 * var(--wg-cell-splitter-width)) 0 0 var(--wg-cell-splitter-color);
|
|
37
|
+
}
|
package/src/css/_variables.css
CHANGED
|
@@ -209,6 +209,14 @@
|
|
|
209
209
|
--wg-error-message-font-size: var(--wg-font-size-xs);
|
|
210
210
|
--wg-error-indicator-color: var(--wg-danger-color);
|
|
211
211
|
|
|
212
|
+
/* ==========================================================================
|
|
213
|
+
DIRTY INDICATOR (unsaved changes)
|
|
214
|
+
========================================================================== */
|
|
215
|
+
--wg-dirty-indicator-color: #ed8b00;
|
|
216
|
+
--wg-dirty-indicator-size: 6px;
|
|
217
|
+
--wg-dirty-cell-bg: rgba(237, 139, 0, 0.08);
|
|
218
|
+
--wg-dirty-row-number-border-color: #ed8b00;
|
|
219
|
+
|
|
212
220
|
/* ==========================================================================
|
|
213
221
|
EDITOR
|
|
214
222
|
========================================================================== */
|
package/src/css/main.css
CHANGED
|
@@ -9,10 +9,10 @@
|
|
|
9
9
|
- _header.css : Header, sort indicators, filter row
|
|
10
10
|
- _resize.css : Column resize handles
|
|
11
11
|
- _reorder.css : Column reorder drag-and-drop
|
|
12
|
-
- _fill-handle.css : Fill handle (Excel-like autofill)
|
|
13
|
-
- _selection.css : Row selection via row numbers
|
|
14
|
-
- _cell-selection.css : Cell range selection (Excel-like)
|
|
15
|
-
- _freeze.css : Freeze panes (sticky columns)
|
|
12
|
+
- _fill-handle.css : Fill handle (Excel-like autofill)
|
|
13
|
+
- _selection.css : Row selection via row numbers
|
|
14
|
+
- _cell-selection.css : Cell range selection (Excel-like)
|
|
15
|
+
- _freeze.css : Freeze panes (sticky columns)
|
|
16
16
|
- _cells.css : Cells, editable states, editing, validation
|
|
17
17
|
- _editors.css : All editor types (text, number, date, combobox, etc)
|
|
18
18
|
- _dropdown.css : Dropdown menus, select triggers
|
|
@@ -32,12 +32,13 @@
|
|
|
32
32
|
@import '_header.css';
|
|
33
33
|
@import '_resize.css';
|
|
34
34
|
@import '_reorder.css';
|
|
35
|
-
@import '_fill-handle.css';
|
|
36
|
-
@import '_selection.css';
|
|
37
|
-
@import '_cell-selection.css';
|
|
38
|
-
@import '_freeze.css';
|
|
35
|
+
@import '_fill-handle.css';
|
|
36
|
+
@import '_selection.css';
|
|
37
|
+
@import '_cell-selection.css';
|
|
38
|
+
@import '_freeze.css';
|
|
39
39
|
@import '_cells.css';
|
|
40
40
|
@import '_row-locking.css';
|
|
41
|
+
@import '_dirty-indicator.css';
|
|
41
42
|
@import '_editors.css';
|
|
42
43
|
@import '_dropdown.css';
|
|
43
44
|
@import '_navigation.css';
|