@keenmate/web-grid 1.0.3 → 1.0.4

package/README.md

@@ -2,14 +2,17 @@
 
 A feature-rich, framework-agnostic data grid web component built with TypeScript. Sorting, filtering, pagination, inline editing (8 editor types), cell range selection, clipboard support, row toolbar, context menus, frozen columns, column reorder/resize, fill handle, virtual scroll, dark mode, and full CSS variable theming — all in a Shadow DOM encapsulated `<web-grid>` element.
 
-## What's New in v1.0.3
+## What's New in v1.0.4
+
+- **Dirty cell/row indicator**: New `isDirtyIndicatorVisible` property (default: `true`). Edited cells show a subtle orange tint + corner triangle; row numbers get an orange left border. Themable via `--wg-dirty-*` variables. Public methods: `isCellDirty()`, `isRowDirty()`.
+- **Dropdown positioning fix**: Fixed dropdown editors appearing offset in shadow DOM by switching from `position: fixed` to `position: absolute`.
+
+### v1.0.3
 
 - **`onrowfocus` fixes**: No longer fires during cell range selection (drag/shift+click). Mouse-triggered row focus now defers to click (mouseup) instead of mousedown; keyboard navigation still fires immediately.
 - **Cell selection visual fix**: Focused cell outline no longer persists during cell range drag.
 - **Toolbar fixes**: Tooltip hides when toolbar moves/closes. Selections cleared on toolbar action click. `triggerElement` in `ontoolbarclick` detail stays alive (no longer detached by synchronous re-render).
 - **Z-index layer system**: All z-index values now use CSS custom properties (`--wg-z-header`, `--wg-z-frozen`, etc.). Fixes cell selection bleeding through sticky header and frozen header stacking.
-- **Logging system**: loglevel-based logging with 4 categories (`GRID:INIT`, `GRID:DATA`, `GRID:UI`, `GRID:INTERACTION`). Enable via `window.components['web-grid'].logging.enableLogging()`.
-- **Runtime API**: `window.components['web-grid']` with `version()`, `config`, and `logging` — matching web-multiselect and web-daterangepicker.
 
 ### v1.0.2
 

package/ai/basic-setup.txt

@@ -89,6 +89,7 @@ page-size               pageSize                number     10        Rows per pa
 is-editable             isEditable              boolean    false     Enable cell editing
 edit-trigger            editTrigger             string     'dblclick' How editing starts (see below)
 is-row-numbers-visible  isRowNumbersVisible     boolean    false     Show row number column
+                        isDirtyIndicatorVisible boolean    true      Show dirty indicator on edited cells
 mode                    mode                    string     (none)    Grid mode (see below)
 is-scrollable           isScrollable            boolean    false     Enable scroll container
 freeze-columns          freezeColumns           number     0         Freeze first N columns

package/ai/editing.txt

@@ -427,6 +427,27 @@ Draft behavior:
   - The onrowchange callback includes both row (original) and draftRow (with
     changes) so the consumer can compare.
 
+Dirty indicator:
+  grid.isDirtyIndicatorVisible (boolean, default: true)
+    When enabled, edited cells show a subtle orange background tint and a small
+    corner triangle. Row numbers show an orange left border when any cell in
+    the row has been modified.
+
+  grid.isCellDirty(rowIndex, field)  -- Returns true if the cell's draft value
+                                        differs from the original.
+  grid.isRowDirty(rowIndex)          -- Returns true if any cell in the row
+                                        has been modified (draft exists).
+
+  CSS variables for theming:
+    --wg-dirty-indicator-color       (default: #ed8b00)
+    --wg-dirty-indicator-size        (default: 6px)
+    --wg-dirty-cell-bg               (default: rgba(237, 139, 0, 0.08))
+    --wg-dirty-row-number-border-color (default: #ed8b00)
+
+  CSS classes applied:
+    .wg__cell--dirty                 -- on dirty data cells
+    .wg__row-number--dirty           -- on row number cells of dirty rows
+
 
 EVENTS (CALLBACKS)
 ------------------

package/ai/public-methods.txt

@@ -53,6 +53,12 @@ discardAllDrafts(): void
   Discard all draft changes across all rows. Reverts every edited cell
   to its original value.
 
+isCellDirty(rowIndex: number, field: string): boolean
+  Check if a specific cell has been modified (draft value differs from original).
+
+isRowDirty(rowIndex: number): boolean
+  Check if any cell in a row has been modified (draft exists for that row).
+
 
 ----------------------------------------------------------------------
 VALIDATION

package/ai/styling-theming.txt

@@ -115,6 +115,9 @@ All four methods apply the same dark palette overrides:
   --wg-hover-bg: #3a3a3a
   --wg-danger-color: #f87c86
   --wg-danger-bg-light: #442726
+  --wg-dirty-indicator-color: #ffa940
+  --wg-dirty-cell-bg: rgba(255, 169, 64, 0.12)
+  --wg-dirty-row-number-border-color: #ffa940
 
 The attribute can be on the <web-grid> element itself or any ancestor:
 

package/dist/grid.d.ts

@@ -28,6 +28,7 @@ export declare class WebGrid<T = unknown> {
     protected _isStickyRowNumbers: boolean;
     protected _freezeColumns: number;
     protected _invalidCells: CellValidationState[];
+    protected _isDirtyIndicatorVisible: boolean;
     protected _isRowToolbarVisible: boolean;
     protected _rowToolbar: RowToolbarConfig<T>[];
     protected _toolbarVerticalAlign: 'top' | 'center' | 'bottom';
@@ -200,6 +201,8 @@ export declare class WebGrid<T = unknown> {
     set isCheckboxAlwaysEditable(value: boolean);
     get isRowNumbersVisible(): boolean;
     set isRowNumbersVisible(value: boolean);
+    get isDirtyIndicatorVisible(): boolean;
+    set isDirtyIndicatorVisible(value: boolean);
     get isStickyRowNumbers(): boolean;
     set isStickyRowNumbers(value: boolean);
     get freezeColumns(): number;
@@ -544,6 +547,14 @@ export declare class WebGrid<T = unknown> {
     protected requestUpdate(): void;
     getRowDraft(rowIndex: number): T | undefined;
     hasRowDraft(rowIndex: number): boolean;
+    /**
+     * Check if a specific cell has been modified (draft value differs from original)
+     */
+    isCellDirty(rowIndex: number, field: string): boolean;
+    /**
+     * Check if any cell in a row has been modified
+     */
+    isRowDirty(rowIndex: number): boolean;
     discardRowDraft(rowIndex: number): void;
     /**
      * Discard draft value for a single cell (field)

package/dist/types.d.ts

@@ -305,6 +305,7 @@ export type QuickGridProps<T> = {
     isStriped?: boolean;
     isHoverable?: boolean;
     isRowNumbersVisible?: boolean;
+    isDirtyIndicatorVisible?: boolean;
     isStickyRowNumbers?: boolean;
     freezeColumns?: number;
     class?: string;

package/dist/web-component.d.ts

@@ -113,6 +113,10 @@ export declare class GridElement<T = unknown> extends HTMLElement implements Gri
     set isCheckboxAlwaysEditable(value: boolean);
     get isRowNumbersVisible(): boolean;
     set isRowNumbersVisible(value: boolean);
+    get isDirtyIndicatorVisible(): boolean;
+    set isDirtyIndicatorVisible(value: boolean);
+    isCellDirty(rowIndex: number, field: string): boolean;
+    isRowDirty(rowIndex: number): boolean;
     get isStickyRowNumbers(): boolean;
     set isStickyRowNumbers(value: boolean);
     get freezeColumns(): number;