@iyulab/flex-table 0.16.1 → 0.17.0

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

@@ -1416,11 +1416,18 @@ var Y = {
 	lte: "≤"
 }, X = 120, Z = 40, xe = 32, Q = 5, $ = class extends e {
 	constructor(...e) {
-		super(...e), this.columns = [], this.data = [], 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._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();
 	}
 	static {
 		this.styles = s;
 	}
+	get data() {
+		return this._data;
+	}
+	set data(e) {
+		let t = this._data;
+		this._data = e, this.clearUndoOnDataChange && !this._inUndoRedo && this._undo.clear(), this.requestUpdate("data", t);
+	}
 	set selectionMode(e) {
 		this._rowSelection.mode = e, this.requestUpdate();
 	}
@@ -1501,6 +1508,15 @@ var Y = {
 	refreshData() {
 		this.requestUpdate("data");
 	}
+	undo() {
+		this._inUndoRedo = !0, this._undo.undo(), this._inUndoRedo = !1, this.requestUpdate(), this._dispatchUndoStateEvent();
+	}
+	redo() {
+		this._inUndoRedo = !0, this._undo.redo(), this._inUndoRedo = !1, this.requestUpdate(), this._dispatchUndoStateEvent();
+	}
+	clearUndoHistory() {
+		this._undo.clear(), this._dispatchUndoStateEvent();
+	}
 	_dispatchUndoStateEvent() {
 		this.dispatchEvent(new CustomEvent("undo-state-change", {
 			detail: {
@@ -1601,10 +1617,32 @@ var Y = {
 		})), this._dispatchUndoStateEvent();
 	}
 	hideColumn(e) {
-		this._setColumnHidden(e, !0);
+		let t = this.columns.findIndex((t) => t.key === e);
+		if (t === -1) return;
+		let n = this.columns[t].hidden ?? !1;
+		this._setColumnHidden(e, !0), this._undo.push({
+			label: "column-visibility",
+			undo: () => {
+				this._setColumnHidden(e, n);
+			},
+			redo: () => {
+				this._setColumnHidden(e, !0);
+			}
+		});
 	}
 	showColumn(e) {
-		this._setColumnHidden(e, !1);
+		let t = this.columns.findIndex((t) => t.key === e);
+		if (t === -1) return;
+		let n = this.columns[t].hidden ?? !1;
+		this._setColumnHidden(e, !1), this._undo.push({
+			label: "column-visibility",
+			undo: () => {
+				this._setColumnHidden(e, n);
+			},
+			redo: () => {
+				this._setColumnHidden(e, !1);
+			}
+		});
 	}
 	_setColumnHidden(e, t) {
 		let n = this.columns.findIndex((t) => t.key === e);
@@ -1733,6 +1771,18 @@ var Y = {
 		G(this.exportToString(e), t ?? `export${le(e)}`, ce(e));
 	}
 	setComment(e, t, n) {
+		let r = this.getComment(e, t);
+		this._applyComment(e, t, n), this._undo.push({
+			label: "comment",
+			undo: () => {
+				this._applyComment(e, t, r);
+			},
+			redo: () => {
+				this._applyComment(e, t, n);
+			}
+		});
+	}
+	_applyComment(e, t, n) {
 		if (n) this._comments.has(e) || this._comments.set(e, /* @__PURE__ */ new Map()), this._comments.get(e).set(t, n);
 		else {
 			let n = this._comments.get(e);
@@ -1761,7 +1811,16 @@ var Y = {
 		return e;
 	}
 	clearComments() {
-		this._comments.clear(), this.requestUpdate();
+		let e = new Map([...this._comments].map(([e, t]) => [e, new Map(t)]));
+		this._comments.clear(), this.requestUpdate(), this._undo.push({
+			label: "clear-comments",
+			undo: () => {
+				this._comments = e, this.requestUpdate();
+			},
+			redo: () => {
+				this._comments.clear(), this.requestUpdate();
+			}
+		});
 	}
 	async importFromFile(e) {
 		let t = e.name.toLowerCase();
@@ -1782,8 +1841,16 @@ var Y = {
 				let o = this.columns.find((e) => e.key === a);
 				r[a] = o ? k(n[i] ?? "", o) : n[i] ?? null;
 			}), r;
-		});
-		this.data = n, this.dispatchEvent(new CustomEvent("data-import", {
+		}), r = [...this.data];
+		this.data = n, this._undo.push({
+			label: "import",
+			undo: () => {
+				this.data = r, this.requestUpdate();
+			},
+			redo: () => {
+				this.data = n, this.requestUpdate();
+			}
+		}), this.dispatchEvent(new CustomEvent("data-import", {
 			detail: { count: n.length },
 			bubbles: !0,
 			composed: !0
@@ -1799,8 +1866,16 @@ var Y = {
 				let o = this.columns.find((e) => e.key === a);
 				r[a] = o ? k(e[i] ?? "", o) : e[i] ?? null;
 			}), r;
-		});
-		this.data = r, this.dispatchEvent(new CustomEvent("data-import", {
+		}), i = [...this.data];
+		this.data = r, this._undo.push({
+			label: "import",
+			undo: () => {
+				this.data = i, this.requestUpdate();
+			},
+			redo: () => {
+				this.data = r, this.requestUpdate();
+			}
+		}), this.dispatchEvent(new CustomEvent("data-import", {
 			detail: { count: r.length },
 			bubbles: !0,
 			composed: !0
@@ -2234,8 +2309,8 @@ var Y = {
 	_handleCtrlKey(e) {
 		if (!(e.ctrlKey || e.metaKey) || e.altKey) return !1;
 		switch (e.key.toLowerCase()) {
-			case "z": return e.preventDefault(), e.shiftKey ? this._undo.redo() : this._undo.undo(), this.requestUpdate(), this._dispatchUndoStateEvent(), !0;
-			case "y": return e.preventDefault(), this._undo.redo(), this.requestUpdate(), this._dispatchUndoStateEvent(), !0;
+			case "z": return e.preventDefault(), e.shiftKey ? this.redo() : this.undo(), !0;
+			case "y": return e.preventDefault(), this.redo(), !0;
 			case "c": return e.preventDefault(), this._handleCopy(!1), !0;
 			case "x": return e.preventDefault(), this._handleCopy(this.editable), !0;
 			case "v": return e.preventDefault(), this.editable && this._handlePaste(), !0;
@@ -3717,7 +3792,10 @@ var Y = {
 J([a({ type: Array })], $.prototype, "columns", void 0), J([a({
 	type: Array,
 	hasChanged: () => !0
-})], $.prototype, "data", void 0), J([a({
+})], $.prototype, "data", null), J([a({
+	type: Boolean,
+	attribute: "clear-undo-on-data-change"
+})], $.prototype, "clearUndoOnDataChange", void 0), J([a({
 	type: Number,
 	attribute: "row-height"
 })], $.prototype, "rowHeight", void 0), J([a({

package/dist/flex-table.d.ts

@@ -8,7 +8,21 @@ import type { TemplateResult } from 'lit';
 export declare class FlexTable extends LitElement {
     static styles: import("lit").CSSResult;
     columns: ColumnDefinition[];
-    data: DataRow[];
+    private _data;
+    private _inUndoRedo;
+    /**
+     * The table data. When `clear-undo-on-data-change` is enabled, replacing this
+     * property externally (`table.data = newData`) will clear the undo/redo history.
+     * Internal undo/redo operations are exempt from this clearing.
+     * To manually clear history before data replacement, call `clearUndoHistory()`.
+     */
+    get data(): DataRow[];
+    set data(value: DataRow[]);
+    /**
+     * When true, replacing `data` externally automatically clears the undo/redo history.
+     * Default: false. Internal undo/redo operations are never affected.
+     */
+    clearUndoOnDataChange: boolean;
     rowHeight: number;
     showRowNumbers: boolean;
     theme: 'light' | 'dark' | undefined;
@@ -111,6 +125,12 @@ export declare class FlexTable extends LitElement {
      * Useful when `data` array contents are mutated in-place without reassignment.
      */
     refreshData(): void;
+    /** Undo the most recent action. */
+    undo(): void;
+    /** Redo the most recently undone action. */
+    redo(): void;
+    /** Clear all undo/redo history. */
+    clearUndoHistory(): void;
     private _dispatchUndoStateEvent;
     private _dispatchFilterEvent;
     /**
@@ -172,6 +192,7 @@ export declare class FlexTable extends LitElement {
      * Pass an empty string or null to remove the comment.
      */
     setComment(dataIndex: number, colKey: string, text: string | null): void;
+    private _applyComment;
     /**
      * Get the comment for a cell (by data index and column key). Returns null if none.
      */

package/dist/flex-table.js

@@ -1,2 +1,2 @@
-import { a as e, i as t, n, r, t as i } from "./flex-table-C06mZOgA.js";
+import { a as e, i as t, n, r, t as i } from "./flex-table-Dwdo2HpR.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-C06mZOgA.js";
+import { t as e } from "./flex-table-Dwdo2HpR.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.16.1",
+  "version": "0.17.0",
   "description": "A minimalist, input-centric data grid web component",
   "type": "module",
   "main": "./dist/flex-table.js",