@iyulab/flex-table 0.17.0 → 0.18.0

package/dist/{flex-table-Dwdo2HpR.js → flex-table-DPEaaiUQ.js}

@@ -641,6 +641,70 @@ var s = t`
     margin: 4px 0;
   }
 
+  /* Comment edit popup */
+  .ft-comment-popup {
+    background: var(--ft-editor-bg, #fff);
+    border: 1px solid var(--ft-border-color);
+    box-shadow: 0 2px 10px rgba(0,0,0,0.18);
+    border-radius: 4px;
+    padding: 8px;
+    display: flex;
+    flex-direction: column;
+    gap: 6px;
+    min-width: 220px;
+  }
+
+  .ft-comment-popup-textarea {
+    width: 100%;
+    box-sizing: border-box;
+    resize: vertical;
+    font-size: var(--ft-font-size, 14px);
+    font-family: inherit;
+    color: var(--ft-text-color);
+    background: var(--ft-editor-bg, #fff);
+    border: 1px solid var(--ft-border-color);
+    border-radius: 3px;
+    padding: 4px 6px;
+    outline: none;
+    min-height: 72px;
+  }
+
+  .ft-comment-popup-textarea:focus {
+    border-color: var(--ft-active-color, #3b82f6);
+    box-shadow: 0 0 0 2px rgba(59,130,246,0.2);
+  }
+
+  .ft-comment-popup-buttons {
+    display: flex;
+    justify-content: flex-end;
+    gap: 6px;
+  }
+
+  .ft-comment-popup-cancel,
+  .ft-comment-popup-save {
+    padding: 4px 12px;
+    font-size: var(--ft-font-size, 13px);
+    border-radius: 3px;
+    border: 1px solid var(--ft-border-color);
+    cursor: pointer;
+    background: var(--ft-editor-bg, #fff);
+    color: var(--ft-text-color);
+  }
+
+  .ft-comment-popup-save {
+    background: var(--ft-active-color, #3b82f6);
+    color: #fff;
+    border-color: transparent;
+  }
+
+  .ft-comment-popup-cancel:hover {
+    background: var(--ft-selection-bg);
+  }
+
+  .ft-comment-popup-save:hover {
+    opacity: 0.9;
+  }
+
   /* Find / Replace panel */
   .ft-find-panel {
     position: sticky;
@@ -1416,7 +1480,9 @@ var Y = {
 	lte: "≤"
 }, X = 120, Z = 40, xe = 32, Q = 5, $ = class extends e {
 	constructor(...e) {
-		super(...e), this.columns = [], this._data = [], this._inUndoRedo = !1, this.clearUndoOnDataChange = !1, this.rowHeight = xe, this.showRowNumbers = !1, this.theme = void 0, this.maxRows = 0, this.editable = !0, this.showFilters = !1, this.showContextMenu = !1, this.frozenRows = 0, this.importEnabled = !1, this.selectable = !1, this.dataMode = "client", this.footerData = null, this._scrollTop = 0, this._scrollLeft = 0, this._viewportHeight = 0, this._viewportWidth = 0, this._colLeftOffsets = [], this._totalRowWidth = 0, this._activeCell = null, this._editingCell = null, this._sortCriteria = [], this._selection = new y(), this._editing = new b(), this._rowSelection = new x(), this._undo = new D(), this._filters = [], this._filteredIndices = [], this._sortedIndices = [], this._openFilterKey = null, this._rowSelectionVersion = 0, this._autocompleteState = null, this._headerMenu = null, this._bodyContextMenu = null, this._viewDirty = !0, this._isDragging = !1, this._wasDrag = !1, this._resizing = null, this._resizeCleanup = null, this._colDrag = null, this._colDragIndicatorLeft = null, this._fillDrag = null, this._rowDrag = null, this._rowDragIndicatorY = null, this._findState = null, this._columnWidths = /* @__PURE__ */ new Map(), this._hostResizeObserver = null, this._comments = /* @__PURE__ */ new Map(), this._isDragOver = !1, this._invalidCells = /* @__PURE__ */ new Map(), this._textFilterState = /* @__PURE__ */ new Map(), this._numberFilterState = /* @__PURE__ */ new Map(), this._dateFilterState = /* @__PURE__ */ new Map(), this._emptyFilterState = /* @__PURE__ */ new Map();
+		super(...e), this.columns = [], this._data = [], this._inUndoRedo = !1, this.clearUndoOnDataChange = !1, this.rowHeight = xe, this.showRowNumbers = !1, this.theme = void 0, this.maxRows = 0, this.editable = !0, this.showFilters = !1, this.showContextMenu = !1, this.frozenRows = 0, this.importEnabled = !1, this.selectable = !1, this.dataMode = "client", this.footerData = null, this._scrollTop = 0, this._scrollLeft = 0, this._viewportHeight = 0, this._viewportWidth = 0, this._colLeftOffsets = [], this._totalRowWidth = 0, this._activeCell = null, this._editingCell = null, this._sortCriteria = [], this._selection = new y(), this._editing = new b(), this._rowSelection = new x(), this._undo = new D(), this._filters = [], this._filteredIndices = [], this._sortedIndices = [], this._openFilterKey = null, this._rowSelectionVersion = 0, this._autocompleteState = null, this._headerMenu = null, this._bodyContextMenu = null, this._commentPopup = null, this._viewDirty = !0, this._isDragging = !1, this._wasDrag = !1, this._resizing = null, this._resizeCleanup = null, this._colDrag = null, this._colDragIndicatorLeft = null, this._fillDrag = null, this._rowDrag = null, this._rowDragIndicatorY = null, this._findState = null, this._columnWidths = /* @__PURE__ */ new Map(), this._hostResizeObserver = null, this._comments = /* @__PURE__ */ new Map(), this._isDragOver = !1, this._onCommentPopupOutsideClick = () => {
+			this._commitCommentPopup();
+		}, this._invalidCells = /* @__PURE__ */ new Map(), this._textFilterState = /* @__PURE__ */ new Map(), this._numberFilterState = /* @__PURE__ */ new Map(), this._dateFilterState = /* @__PURE__ */ new Map(), this._emptyFilterState = /* @__PURE__ */ new Map();
 	}
 	static {
 		this.styles = s;
@@ -1946,7 +2012,7 @@ var Y = {
 		super.connectedCallback(), this._onScroll = this._onScroll.bind(this), this._onKeyDown = this._onKeyDown.bind(this), this._onDocumentClick = this._onDocumentClick.bind(this), this._onContextMenu = this._onContextMenu.bind(this), this._onDragover = this._onDragover.bind(this), this._onDragleave = this._onDragleave.bind(this), this._onDrop = this._onDrop.bind(this), this.addEventListener("scroll", this._onScroll, { passive: !0 }), this.addEventListener("keydown", this._onKeyDown), this.addEventListener("contextmenu", this._onContextMenu), this.addEventListener("dragover", this._onDragover), this.addEventListener("dragleave", this._onDragleave), this.addEventListener("drop", this._onDrop), this.hasAttribute("tabindex") || this.setAttribute("tabindex", "0"), this.setAttribute("role", "grid"), typeof ResizeObserver < "u" && (this._hostResizeObserver = new ResizeObserver(() => this._measureViewport()), this._hostResizeObserver.observe(this));
 	}
 	disconnectedCallback() {
-		super.disconnectedCallback(), this.removeEventListener("scroll", this._onScroll), this.removeEventListener("keydown", this._onKeyDown), this.removeEventListener("contextmenu", this._onContextMenu), this.removeEventListener("dragover", this._onDragover), this.removeEventListener("dragleave", this._onDragleave), this.removeEventListener("drop", this._onDrop), document.removeEventListener("click", this._onDocumentClick), this._isDragging = !1, this._wasDrag = !1, this._resizeCleanup &&= (this._resizeCleanup(), null), this._hostResizeObserver &&= (this._hostResizeObserver.disconnect(), null);
+		super.disconnectedCallback(), this.removeEventListener("scroll", this._onScroll), this.removeEventListener("keydown", this._onKeyDown), this.removeEventListener("contextmenu", this._onContextMenu), this.removeEventListener("dragover", this._onDragover), this.removeEventListener("dragleave", this._onDragleave), this.removeEventListener("drop", this._onDrop), document.removeEventListener("click", this._onDocumentClick), document.removeEventListener("mousedown", this._onCommentPopupOutsideClick), this._isDragging = !1, this._wasDrag = !1, this._resizeCleanup &&= (this._resizeCleanup(), null), this._hostResizeObserver &&= (this._hostResizeObserver.disconnect(), null);
 	}
 	firstUpdated() {
 		this._measureViewport();
@@ -1986,8 +2052,11 @@ var Y = {
 	willUpdate(e) {
 		(!(e.size <= 2 && !e.has("data") && !e.has("columns") && !e.has("_openFilterKey") && !e.has("_editingCell") && !e.has("_activeCell") && (e.has("_scrollTop") || e.has("_scrollLeft"))) || this._viewDirty) && (this._recomputeView(), this._viewDirty = !1), this._updateColOffsets(), this._selection.setDimensions(this._visibleRowCount, this.visibleColumns.length), this._rowSelection.setRowCount(this._visibleRowCount);
 	}
-	updated() {
-		this._focusEditor(), this._adjustFilterDropdown(), this.setAttribute("aria-rowcount", String(this._visibleRowCount)), this.setAttribute("aria-colcount", String(this.visibleColumns.length));
+	updated(e) {
+		if (this._focusEditor(), this._adjustFilterDropdown(), this.setAttribute("aria-rowcount", String(this._visibleRowCount)), this.setAttribute("aria-colcount", String(this.visibleColumns.length)), e.has("_commentPopup") && this._commentPopup) {
+			let e = this.shadowRoot?.querySelector(".ft-comment-popup textarea");
+			e && (e.value = this.getComment(this._commentPopup.dataIndex, this._commentPopup.colKey) ?? "", e.focus(), e.select());
+		}
 	}
 	_recomputeView() {
 		if (this.dataMode === "server") {
@@ -2053,7 +2122,7 @@ var Y = {
 			composed: !0,
 			cancelable: !0
 		});
-		this.dispatchEvent(c), this.showContextMenu && !c.defaultPrevented && (this._bodyContextMenu = {
+		this.dispatchEvent(c), this._cancelCommentPopup(), this.showContextMenu && !c.defaultPrevented && (this._bodyContextMenu = {
 			rowIndex: a,
 			colIndex: r,
 			dataIndex: o,
@@ -2797,6 +2866,60 @@ var Y = {
             Clear filter
           </div>
         ` : ""}
+        <div class="ft-context-menu-separator"></div>
+        <div class="ft-context-menu-item"
+          @click=${() => {
+			this._openCommentPopup(t, o.key, i, a), l();
+		}}>
+          ${this.getComment(t, o.key) ? "Edit Comment" : "Add Comment"}
+        </div>
+        ${this.getComment(t, o.key) ? n`
+          <div class="ft-context-menu-item ft-context-menu-danger"
+            @click=${() => {
+			this.setComment(t, o.key, null), l();
+		}}>
+            Delete Comment
+          </div>
+        ` : ""}
+      </div>
+    `;
+	}
+	_openCommentPopup(e, t, n, r) {
+		this._commentPopup = {
+			dataIndex: e,
+			colKey: t,
+			x: n,
+			y: r
+		}, requestAnimationFrame(() => {
+			document.addEventListener("mousedown", this._onCommentPopupOutsideClick);
+		});
+	}
+	_commitCommentPopup() {
+		if (!this._commentPopup) return;
+		document.removeEventListener("mousedown", this._onCommentPopupOutsideClick);
+		let e = (this.shadowRoot?.querySelector(".ft-comment-popup textarea"))?.value?.trim() || null;
+		e !== this.getComment(this._commentPopup.dataIndex, this._commentPopup.colKey) && this.setComment(this._commentPopup.dataIndex, this._commentPopup.colKey, e), this._commentPopup = null;
+	}
+	_cancelCommentPopup() {
+		this._commentPopup &&= (document.removeEventListener("mousedown", this._onCommentPopupOutsideClick), null);
+	}
+	_renderCommentPopup() {
+		if (!this._commentPopup) return r;
+		let { x: e, y: t } = this._commentPopup;
+		return n`
+      <div class="ft-comment-popup"
+        style="position: fixed; left: ${e + 240 > window.innerWidth ? e - 240 : e}px; top: ${t + 150 > window.innerHeight ? t - 150 : t}px; z-index: 201;"
+        @mousedown=${(e) => e.stopPropagation()}>
+        <textarea class="ft-comment-popup-textarea"
+          rows="4"
+          placeholder="Add a comment… (Ctrl+Enter to save)"
+          @keydown=${(e) => {
+			e.key === "Escape" && (e.preventDefault(), this._cancelCommentPopup()), e.key === "Enter" && (e.ctrlKey || e.metaKey) && (e.preventDefault(), this._commitCommentPopup());
+		}}></textarea>
+        <div class="ft-comment-popup-buttons">
+          <button class="ft-comment-popup-cancel" @click=${() => this._cancelCommentPopup()}>Cancel</button>
+          <button class="ft-comment-popup-save" @click=${() => this._commitCommentPopup()}>Save</button>
+        </div>
       </div>
     `;
 	}
@@ -3598,6 +3721,7 @@ var Y = {
       ${y}
       ${this._renderHeaderContextMenu()}
       ${this._renderBodyContextMenu()}
+      ${this._renderCommentPopup()}
     `;
 	}
 	_onSelectAllChange(e) {
@@ -3831,6 +3955,6 @@ J([a({ type: Array })], $.prototype, "columns", void 0), J([a({
 })], $.prototype, "footerData", void 0), J([a({
 	type: Number,
 	attribute: "max-undo-size"
-})], $.prototype, "maxUndoSize", null), J([o()], $.prototype, "_scrollTop", void 0), J([o()], $.prototype, "_scrollLeft", void 0), J([o()], $.prototype, "_viewportHeight", void 0), J([o()], $.prototype, "_viewportWidth", void 0), J([o()], $.prototype, "_activeCell", void 0), J([o()], $.prototype, "_editingCell", void 0), J([o()], $.prototype, "_sortCriteria", void 0), J([o()], $.prototype, "_openFilterKey", void 0), J([o()], $.prototype, "_rowSelectionVersion", void 0), J([o()], $.prototype, "_autocompleteState", void 0), J([o()], $.prototype, "_headerMenu", void 0), J([o()], $.prototype, "_bodyContextMenu", void 0), J([o()], $.prototype, "_isDragOver", void 0), $ = J([i("flex-table")], $);
+})], $.prototype, "maxUndoSize", null), J([o()], $.prototype, "_scrollTop", void 0), J([o()], $.prototype, "_scrollLeft", void 0), J([o()], $.prototype, "_viewportHeight", void 0), J([o()], $.prototype, "_viewportWidth", void 0), J([o()], $.prototype, "_activeCell", void 0), J([o()], $.prototype, "_editingCell", void 0), J([o()], $.prototype, "_sortCriteria", void 0), J([o()], $.prototype, "_openFilterKey", void 0), J([o()], $.prototype, "_rowSelectionVersion", void 0), J([o()], $.prototype, "_autocompleteState", void 0), J([o()], $.prototype, "_headerMenu", void 0), J([o()], $.prototype, "_bodyContextMenu", void 0), J([o()], $.prototype, "_commentPopup", void 0), J([o()], $.prototype, "_isDragOver", void 0), $ = J([i("flex-table")], $);
 //#endregion
 export { f as a, x as i, B as n, D as r, $ as t };

package/dist/flex-table.d.ts

@@ -1,4 +1,4 @@
-import { LitElement } from 'lit';
+import { LitElement, type PropertyValues } from 'lit';
 import type { ExportFormat } from './export/export.js';
 import type { CellPosition, CellRange } from './core/selection.js';
 import type { SortCriteria } from './core/sorting.js';
@@ -67,6 +67,7 @@ export declare class FlexTable extends LitElement {
     private _autocompleteState;
     private _headerMenu;
     private _bodyContextMenu;
+    private _commentPopup;
     private _viewDirty;
     private _isDragging;
     private _wasDrag;
@@ -240,7 +241,7 @@ export declare class FlexTable extends LitElement {
     private _updateColOffsets;
     private get visibleColRange();
     protected willUpdate(changedProperties: Map<string, unknown>): void;
-    protected updated(): void;
+    protected updated(changedProps: PropertyValues): void;
     /** Recompute filter → sort pipeline. */
     private _recomputeView;
     /** Map visual row index to data row index */
@@ -295,6 +296,11 @@ export declare class FlexTable extends LitElement {
     private _showHiddenBefore;
     private _renderHeaderContextMenu;
     private _renderBodyContextMenu;
+    private _openCommentPopup;
+    private _onCommentPopupOutsideClick;
+    private _commitCommentPopup;
+    private _cancelCommentPopup;
+    private _renderCommentPopup;
     private _applySortFromMenu;
     private _adjustFilterDropdown;
     private _onFilterBtnClick;

package/dist/flex-table.js

@@ -1,2 +1,2 @@
-import { a as e, i as t, n, r, t as i } from "./flex-table-Dwdo2HpR.js";
+import { a as e, i as t, n, r, t as i } from "./flex-table-DPEaaiUQ.js";
 export { i as FlexTable, t as RowSelectionState, r as UndoStack, n as exportData, e as renderCell };

package/dist/react.js

@@ -1,4 +1,4 @@
-import { t as e } from "./flex-table-Dwdo2HpR.js";
+import { t as e } from "./flex-table-DPEaaiUQ.js";
 import t from "react";
 import { createComponent as n } from "@lit/react";
 //#region src/react.ts

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@iyulab/flex-table",
-  "version": "0.17.0",
+  "version": "0.18.0",
   "description": "A minimalist, input-centric data grid web component",
   "type": "module",
   "main": "./dist/flex-table.js",