@ninebone/datagrid 0.0.10 → 0.0.12

package/dist/css/nine-table.css

@@ -506,34 +506,64 @@ cell-row-indicator {
         pointer-events: none;
     }
 
-    .ng-row-status {
+    .row-status {
+        display: inline-block;
         position: absolute;
-        right: 2px;
+        right: 0;
         top: 1px;
-        font-size: var(--row-indicator-status-size);
-        line-height: 1;
-        pointer-events: none;
+        width: 4px;
+        height: 4px;
+        border-radius: 50%;
     }
 }
+
+
+cell-row-indicator.is-insert .row-status {
+    background-color: #333;
+}
+
+cell-row-indicator.is-update .row-status {
+    background-color: darkgoldenrod;
+}
+
+cell-row-indicator.is-delete .row-status {
+    background-color: red;
+}
 :host {
     --cell-selection-bg: rgba(37, 99, 235, 0.08);
     --cell-selection-border-color: #2563eb;
 }
 
 tbody {
-    .selected {
-        background-color: var(--cell-selection-bg);
+
+    tr.selected {
+        cell-row-indicator {
+            border-left: 2px solid darkgoldenrod;
+        }
+
+        cell-row-indicator {
+            border-left: 2px solid darkgoldenrod;
+        }
     }
 
-    .selected-start {
-        background-color: transparent;
+    th.selected, td.selected {
+        .selected {
+            background-color: var(--cell-selection-bg);
+        }
+
+        .selected-start {
+            background-color: transparent;
+        }
+
+        .selected-top    { border-top: 2px solid var(--cell-selection-border-color); }
+        .selected-bottom { border-bottom: 2px solid var(--cell-selection-border-color); }
+        .selected-left   { border-left: 2px solid var(--cell-selection-border-color); }
+        .selected-right  { border-right: 2px solid var(--cell-selection-border-color); }
     }
 
-    .selected-top    { border-top: 2px solid var(--cell-selection-border-color); }
-    .selected-bottom { border-bottom: 2px solid var(--cell-selection-border-color); }
-    .selected-left   { border-left: 2px solid var(--cell-selection-border-color); }
-    .selected-right  { border-right: 2px solid var(--cell-selection-border-color); }
 }
+
+
 nine-table-col-expand {
     position: absolute;
     right: 2px;
@@ -1496,31 +1526,54 @@ nine-table-sheets-footer {
 }
 
 
+
 .asc::after,
 .desc::after {
-    --sort-icon-size: 10px;
-
+    z-index: 1;
     content: "";
     display: inline-block;
-    width: var(--sort-icon-size);
-    height: var(--sort-icon-size);
-    flex-shrink: 0;
-    margin-left: 4px;
-    vertical-align: middle;
+    width: 10px;
+    height: 10px;
+    position: absolute;
+    left: 50%;
+    top: -2px;
+    transform: translateX(-50%);
     background-repeat: no-repeat;
     background-position: center;
     background-size: contain;
 }
 
 .asc::after {
-    --sort-icon-color: #2563eb;
     background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="10" height="10" viewBox="0 0 16 16"><path fill="%232563eb" d="M8 3L3 11h10L8 3z"/></svg>');
 }
 
 .desc::after {
-    --sort-icon-color: #dc2626;
     background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="10" height="10" viewBox="0 0 16 16"><path fill="%23dc2626" d="M8 13L3 5h10l-5 8z"/></svg>');
 }
+
+
+tbody.body td *:first-child, tbody.body th *:first-child {
+    transform: translate(0, 0);
+    transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1.35), opacity 0.4s ease-out;
+}
+
+tbody.body .sorting-anim-asc *:first-child {
+    transform: translate(0px, 20px);
+    opacity: 0.2;
+    transition: none;
+}
+
+tbody.body .sorting-anim-desc *:first-child {
+    transform: translate(0px, -30px);
+    opacity: 0.2;
+    transition: none;
+}
+
+tbody.body .sorting-anim-none *:first-child {
+    transform: translate(0px, 0px);
+    opacity: 0.2;
+    transition: none;
+}
 table {
     --table-th-bg: #f9fafb;
     --table-th-color: #111827;

package/dist/nine-table.js

@@ -56,15 +56,16 @@ var n = new class extends e.constructor {
 }(), r = {
 	META: { INDEX: {
 		ROWID: 0,
-		FILTER: 1,
-		GROUP: 2
+		ROW_STATE: 1,
+		FILTER: 2,
+		GROUP: 3
 	} },
 	ROW_STATE: {
-		EMPTY: "EMPTY",
-		NORMAL: "NORMAL",
-		INSERT: "INSERT",
-		UPDATE: "UPDATE",
-		DELETE: "DELETE"
+		EMPTY: 0,
+		NORMAL: 1,
+		INSERT: 2,
+		UPDATE: 3,
+		DELETE: 9
 	},
 	EVENT: {
 		LOAD: "load",
@@ -99,7 +100,7 @@ var n = new class extends e.constructor {
 	constructor(e, t) {
 		this.#e = e, this.#t = t, this.#a();
 	}
-	#i = () => (this.#t.rawRecords || []).filter((e) => !e.__ng?.deleted);
+	#i = () => (this.#t.rawRecords || []).filter((e) => e.m._[r.META.INDEX.ROW_STATE] !== r.ROW_STATE.DELETE);
 	get count() {
 		return this.length;
 	}
@@ -121,14 +122,14 @@ var n = new class extends e.constructor {
 	};
 	get = (e, t) => {
 		let n = this.#i();
-		if (e == null) return this.#u(n);
+		if (e == null) return this.#d(n);
 		if (e < 0 || e >= n.length) return null;
 		let r = n[e], i = this.getHostFields();
 		if (t != null) {
 			let e = i.indexOf(t);
 			return e >= 0 ? r.v[e] : null;
 		}
-		return this.#u(r);
+		return this.#d(r);
 	};
 	getAll = () => this.#t.rawRecords || [];
 	getHostFields = () => typeof this.#e.fields?.get == "function" ? this.#e.fields.get() : [];
@@ -142,7 +143,7 @@ var n = new class extends e.constructor {
 		});
 	};
 	get source() {
-		return this.#u(this.#t.rawRecords);
+		return this.#d(this.#t.rawRecords);
 	}
 	set source(e) {
 		this.set(e);
@@ -203,7 +204,12 @@ var n = new class extends e.constructor {
 			{},
 			{}
 		],
-		_: [t, []]
+		_: [
+			t,
+			r.ROW_STATE.EMPTY,
+			[],
+			[]
+		]
 	});
 	reset = () => {
 		this.#t.rawRecords = [], this.#o();
@@ -221,43 +227,54 @@ var n = new class extends e.constructor {
 			}), n.push(r);
 		}), n;
 	};
-	#l = (t) => (Array.isArray(t) || (t = [t]), t.forEach((t) => {
-		let n = this.nextId;
-		t.m = this.#s(n), t.__ng = t.m, t.__ng.rowid = n, t.__ng.rowState = e.ROW_STATE.INSERT, t.__ng._[0] = n;
-	}), t);
-	add = (t, n = !0) => {
-		t === void 0 && (t = {});
-		let r = this.#c(t);
-		this.#t.rawRecords = this.#t.rawRecords.concat(this.#l(r));
+	#l = (e) => (Array.isArray(e) || (e = [e]), e.forEach((e) => {
+		let t = this.nextId;
+		e.m = this.#s(t), e.__ng = e.m, e.__ng.rowid = t, e.m._[r.META.INDEX.ROWID] = t, e.m._[r.META.INDEX.ROW_STATE] = r.ROW_STATE.EMPTY;
+	}), e);
+	#u = (e) => this.#t.rawRecords.findIndex((t) => !t || !t.m || !t.m._ ? !1 : t.m._[r.META.INDEX.ROWID] === e);
+	add = (e, t = !0) => {
+		e === void 0 && (e = {});
+		let n = this.#c(e);
+		this.#t.rawRecords = this.#t.rawRecords.concat(this.#l(n));
 		let i = this.count() - 1;
-		return n || r.forEach((t, n) => {
-			let r = this.#t.rawRecords[this.#t.rawRecords.length - 1 - n];
-			r && (r.__ng.rowState = e.ROW_STATE.EMPTY);
+		return t && n.forEach((e, t) => {
+			let n = this.#t.rawRecords[this.#t.rawRecords.length - 1 - t];
+			n && (n.m._[r.META.INDEX.ROW_STATE] = r.ROW_STATE.INSERT);
 		}), this.#o(), i;
 	};
-	delete = (t) => {
+	insert = (e, t, n = !0) => {
+		t === void 0 && (t = {});
+		let i = this.#c(t);
+		if (i.length === 0) return -1;
+		let a = this.#u(e), o = this.#l(i);
+		return this.#t.rawRecords.splice(a, 0, ...o), n && o.forEach((e, t) => {
+			let n = this.#t.rawRecords[a + t];
+			n && n.m && n.m._ && (n.m._[r.META.INDEX.ROW_STATE] = r.ROW_STATE.INSERT);
+		}), this.#o(), o[0].m._[r.META.INDEX.ROWID];
+	};
+	remove = (e) => {
+		let t = [];
+		t = Array.isArray(e) ? at : [parseInt(e, 10)];
 		let n = [];
-		n = Array.isArray(t) ? t : t === void 0 ? [this.#t.host.row.at] : [parseInt(t, 10)];
-		let r = this.#i();
-		n.sort((e, t) => t - e).forEach((t) => {
-			if (r[t]) {
-				let n = r[t].__ng.rowid;
-				r[t].__ng.rowState === e.ROW_STATE.INSERT ? this.#t.rawRecords = this.#t.rawRecords.filter((e) => e.__ng.rowid !== n) : this.#t.rawRecords.forEach((t) => {
-					t.__ng.rowid === n && (t.__ng.deleted = !0, t.__ng.rowState = e.ROW_STATE.DELETE);
-				});
-			}
+		t.forEach((e) => {
+			n.push(this.#u(e));
+		});
+		let i = this.#t.rawRecords;
+		n.sort((e, t) => t - e).forEach((e) => {
+			let t = i[e].m._[r.META.INDEX.ROWID];
+			i[e].m._[r.META.INDEX.ROW_STATE] === r.ROW_STATE.INSERT ? this.#t.rawRecords = this.#t.rawRecords.filter((e) => e.m._[r.META.INDEX.ROWID] !== t) : this.#t.rawRecords.forEach((e) => {
+				e.m._[r.META.INDEX.ROWID] === t && (e.m._[r.META.INDEX.ROW_STATE] = r.ROW_STATE.DELETE);
+			});
 		}), this.#o();
 	};
-	setValue = (t, n, r) => {
-		t = parseInt(t, 10);
-		let i = this.getHostFields().indexOf(n);
+	setValue = (e, t, n) => {
+		e = parseInt(e, 10);
+		let i = this.getHostFields().indexOf(t);
 		if (i < 0) return;
-		let a = this.#i()[t];
-		if (!a) return;
-		let o = a.v[i];
-		o !== r && a.__ng.rowState !== e.ROW_STATE.INSERT && (a.__ng.o.hasOwnProperty(n) || (a.__ng.o[n] = o), a.__ng.rowState = e.ROW_STATE.UPDATE), a.v[i] = r;
+		let a = this.#u(e), o = this.#t.rawRecords[a];
+		o && (o.v[i] !== n && o.m._[r.META.INDEX.ROW_STATE] !== r.ROW_STATE.INSERT && (o.m._[r.META.INDEX.ROW_STATE] = r.ROW_STATE.UPDATE), o.v[i] = n);
 	};
-	#u = (e) => {
+	#d = (e) => {
 		if (!e) return e;
 		let t = !Array.isArray(e), n = t ? [e] : e, r = this.getHostFields(), i = n.filter((e) => !e.__ng?.deleted).map((e) => {
 			let t = {};
@@ -1156,6 +1173,18 @@ var m = {
 			endCol: s
 		}, this.render();
 	}
+	get minRow() {
+		return this.#t.startRow;
+	}
+	get maxRow() {
+		return this.#t.endRow;
+	}
+	get minCol() {
+		return this.#t.startCol;
+	}
+	get maxCol() {
+		return this.#t.endCol;
+	}
 	refresh = () => {
 		this.render();
 	};
@@ -1170,12 +1199,12 @@ var m = {
 		}), e < 0 || t < 0 || i.forEach((i) => {
 			Array.from(i.querySelectorAll("tbody tr")).filter((e) => e.style.display !== "none").forEach((i) => {
 				let { matrixRow: a } = this.#n(i);
-				a < 0 || i.querySelectorAll("td, th").forEach((i) => {
+				a < 0 || (a >= e && a <= n && i.classList.add("selected"), i.querySelectorAll("td, th").forEach((i) => {
 					let o = parseInt(i.dataset.col, 10);
 					if (isNaN(o)) return;
 					let s = parseInt(i.rowSpan || 1, 10), c = parseInt(i.colSpan || 1, 10), l = a + s - 1, u = o + c - 1;
 					l >= e && a <= n && u >= t && o <= r && (i.classList.add("selected"), a <= e && i.classList.add("selected-top"), l >= n && i.classList.add("selected-bottom"), o <= t && i.classList.add("selected-left"), u >= r && i.classList.add("selected-right"));
-				});
+				}));
 			});
 		});
 	};
@@ -2200,10 +2229,19 @@ var k = class {
 		}) : c ? u >= 0 ? this.#n[u].asc = !1 : this.#n.push({
 			...d,
 			asc: !1
-		}) : this.#n = this.#n.filter((e) => !(e.colIndex === n && e.subRowIndex === i || e.colName === o)), this.#a();
+		}) : this.#n = this.#n.filter((e) => !(e.colIndex === n && e.subRowIndex === i || e.colName === o)), this.#a(t);
 	}
-	#a() {
-		this.#e.view && (this.#e.view.setSorting(this.#n), this.#o(), this.#e.invalidate());
+	#a(e) {
+		this.#e.view.setSorting(this.#n), this.#o(), this.#e.invalidate(), requestAnimationFrame(() => {
+			let t = this.#e.querySelectorAll("tbody.body th, tbody.body td");
+			t.forEach((t) => {
+				t.classList.remove("sorting-anim-asc", "sorting-anim-desc", "sorting-anim-none"), e.classList.contains("asc") ? t.classList.add("sorting-anim-asc") : e.classList.contains("desc") ? t.classList.add("sorting-anim-desc") : t.classList.add("sorting-anim-none");
+			}), requestAnimationFrame(() => {
+				t.forEach((e) => {
+					e.classList.remove("sorting-anim-asc", "sorting-anim-desc", "sorting-anim-none");
+				});
+			});
+		});
 	}
 	#o() {
 		this.#e.querySelectorAll("thead th, thead td").forEach((e) => {
@@ -2550,6 +2588,9 @@ var k = class {
 	get #m() {
 		return this.#t.hasAttribute("simple") || this.#t.getAttribute("theme") === "simple";
 	}
+	scrollTo = (e, t) => {
+		this.rowManager.scrollToDataRow(e, "top", t);
+	};
 	recompileAndRefresh() {
 		this.#f.table && (v.recompile(this.#f.table), [
 			"left",
@@ -2811,10 +2852,11 @@ var N = class {
 		let e = Array.from(this.#e.children).filter((e) => e.tagName.toUpperCase() === "TABLE"), t = this.#e.getAttribute("auto-height") === "true", n = e.length, r = e.map((e, t) => {
 			let r = t === 0 ? "active" : "", i = e.id || `sheet${t + 1}`;
 			return `<nine-table-sheet class="${r}" data-index="${t}" data-sheet-id="${i}" id="${i}"></nine-table-sheet>` + (t < n - 1 ? `<nine-splitter class="h" data-split-index="${t}"></nine-splitter>` : "");
-		}).join(""), i = ["@import \"https://cdn.jsdelivr.net/npm/@ninebone/datagrid@0.0.10/dist/css/nine-table.css\";"];
+		}).join(""), i = ["@import \"https://cdn.jsdelivr.net/npm/@ninebone/datagrid@0.0.12/dist/css/nine-table.css\";"];
 		nine["nine-table"] && nine["nine-table"].cssFile && i.push(`@import "${nine["nine-table"].cssFile}";`), this.#e.shadowRoot.innerHTML = `
             <style>
                 ${i.join("\n")}
+                ${this.#e.customStyle}
             </style>
             
             <nine-table-toolbar></nine-table-toolbar>
@@ -2877,16 +2919,17 @@ var N = class {
 	#t;
 	#n;
 	#r = 0;
+	#i = "";
 	constructor() {
-		super(), ["NINE-TABLE"].includes(this.tagName) && n.log("Welcome nine-table", "0.0.10"), this.#e = this.attachShadow({ mode: "open" }), this.#t = new o(this);
+		super(), ["NINE-TABLE"].includes(this.tagName) && n.log("Welcome nine-table", "0.0.12"), this.#e = this.attachShadow({ mode: "open" }), this.#t = new o(this);
 	}
 	connectedCallback() {
 		setTimeout(() => {
-			this.#r = this.querySelectorAll("table")?.length, this.fields = new s(this), this.exprEngine = new P(this), this.#a(), this.#n = new N(this), this.#i();
+			this.#r = this.querySelectorAll("table")?.length, this.fields = new s(this), this.exprEngine = new P(this), this.#o(), this.#n = new N(this), this.#a();
 		});
 	}
 	disconnectedCallback() {}
-	#i = () => {
+	#a = () => {
 		let e = 0, t = setInterval(() => {
 			e++;
 			let n = this.shadow.querySelectorAll("nine-table-sheet");
@@ -2913,9 +2956,58 @@ var N = class {
 	get row() {
 		return this.#t.row;
 	}
+	get customStyle() {
+		return this.#i;
+	}
+	scrollTo = (e, t) => {
+		this.#e.querySelectorAll("nine-table-sheet.active").forEach((n) => {
+			n.scrollTo(e, t);
+		});
+	};
+	currentRow = () => {
+		let e = this.currentRows();
+		return e.length === 0 ? -1 : e[0];
+	};
+	currentRows = () => {
+		let e = [];
+		return this.#e.querySelectorAll("nine-table-sheet.active").forEach((t) => {
+			let n = t.view.getArray(t.selection.minRow).m._[r.META.INDEX.ROWID];
+			e.push(n);
+		}), e;
+	};
+	addRow = (e, t = !0) => this.data.add(e, t);
+	insertRow = (e, t, n = !0) => {
+		let i = this.#e.querySelector("nine-table-sheet.active");
+		if (!i) return;
+		let a = i.view.get(e).m._[r.META.INDEX.ROWID], o = this.data.insert(a, t, n);
+		return i.view.getArray().findIndex((e) => !e || !e.m || !e.m._ ? !1 : e.m._[r.META.INDEX.ROWID] === o);
+	};
+	removeRow = (e) => {
+		let t = this.#e.querySelector("nine-table-sheet.active");
+		if (!t) return;
+		let n = t.view.get(e).m._[r.META.INDEX.ROWID];
+		this.data.remove(n);
+	};
+	currentIndex = () => {
+		let e = this.currentIndexs();
+		return e.length === 0 ? -1 : e[0];
+	};
+	currentIndexs = () => {
+		let e = [];
+		return this.#e.querySelectorAll("nine-table-sheet.active").forEach((t) => {
+			e.push(t.selection.minRow);
+		}), e;
+	};
 	addProvider(e) {
-		e && typeof e == "object" && setTimeout(() => {
-			Object.entries(e).forEach(([e, t]) => {
+		if (!e || typeof e != "object") return;
+		let { style: t, ...n } = e;
+		if (t && typeof t == "string") {
+			this.#i = t;
+			let e = this.#e.getElementById("nine-table-scoped-custom-style");
+			e && (e.textContent = t);
+		}
+		Object.keys(n).length > 0 && setTimeout(() => {
+			Object.entries(n).forEach(([e, t]) => {
 				typeof t == "function" && (this[e] = t);
 			}), this.rerenderer();
 		});
@@ -2945,7 +3037,7 @@ var N = class {
 	get activeSheet() {
 		return this.shadow.querySelector("nine-table-sheet.active") || null;
 	}
-	#a() {
+	#o() {
 		let e = /* @__PURE__ */ new Set();
 		this.querySelectorAll("[data-source]").forEach((t) => {
 			let n = t.getAttribute("data-source");
@@ -3085,10 +3177,8 @@ var I = class extends HTMLElement {
 	}
 	set value(e) {
 		if (!this.#r || !this.#e?.data) return;
-		let t = parseInt(this.#r.dataset.row, 10), n = this.#r.dataset.bind;
-		if (isNaN(t) || !n) return;
-		let r = this.getAttribute("update-row-state") !== "false";
-		this.#e.data.setValue(t, n, e, r);
+		let t = parseInt(this.#n.dataset.row, 10), n = this.#r.dataset.bind;
+		!isNaN(t) && n && this.#e.data.setValue(t, n, e);
 	}
 	get row() {
 		return parseInt(this.#r?.dataset?.row, 10);
@@ -3875,27 +3965,37 @@ var X = class extends R {
 		super();
 	}
 	connectedCallback() {
-		this.#r(), super.connectedCallback(), this.cell && (this.cell.removeAttribute("tabindex"), this.cell.dataset.bind = "rowState"), this.#e = this.querySelector(".ng-row-main"), this.#t = this.querySelector(".ng-row-sub"), this.#n = this.querySelector(".ng-row-status");
+		this.#r(), super.connectedCallback(), this.cell && (this.cell.removeAttribute("tabindex"), this.cell.dataset.bind = "rowState"), this.#e = this.querySelector(".ng-row-main"), this.#t = this.querySelector(".ng-row-sub"), this.#n = this.querySelector(".row-status");
 	}
 	#r = () => {
-		this.innerHTML = "\n			<span class=\"ng-row-main\"></span>\n            <span class=\"ng-row-sub\"></span>\n            <span class=\"ng-row-status\"></span>\n        ";
+		this.innerHTML = "\n			<span class=\"ng-row-main\"></span>\n            <span class=\"ng-row-sub\"></span>\n            <span class=\"row-status\"></span>\n        ";
 	};
 	refresh = () => {
 		if (!this.cell || !this.tr) return;
+		this.classList.remove("is-insert", "is-update", "is-delete");
 		let e = this.row;
 		if (isNaN(e)) return;
 		let t = this.tr.data;
-		t && t.__ng;
-		let n = this.index + 1, r = n.toLocaleString();
+		if (t) switch (t.m._[r.META.INDEX.ROW_STATE]) {
+			case r.ROW_STATE.INSERT:
+				this.classList.add("is-insert");
+				break;
+			case r.ROW_STATE.UPDATE:
+				this.classList.add("is-update");
+				break;
+			case r.ROW_STATE.DELETE: this.classList.add("is-delete");
+		}
+		let n = this.index + 1, i = n.toLocaleString();
 		if (n >= 1e4) {
-			let e = r.length - 4, t = r.substring(0, e + 1), n = r.substring(e + 1);
+			let e = i.length - 4, t = i.substring(0, e + 1), n = i.substring(e + 1);
 			this.#e.innerHTML = `
             	<span class="ng-row-prefix">${t}</span>
             	<span class="ng-row-suffix">${n}</span>
+            	<div class="row-status"></div>
         	`;
-		} else this.#e.innerHTML = `${r}`;
-		let i = !!this.sheet.querySelector("thead .asc,thead .desc"), a = !!this.sheet.querySelector("thead nine-table-filter-button.filtered");
-		this.#t.innerHTML = e, this.#t.style.display = i || a ? "" : "none";
+		} else this.#e.innerHTML = `${i}`;
+		let a = !!this.sheet.querySelector("thead .asc,thead .desc"), o = !!this.sheet.querySelector("thead nine-table-filter-button.filtered");
+		this.#t.innerHTML = e, this.#t.style.display = a || o ? "" : "none";
 	};
 };
 customElements.get("cell-row-indicator") || customElements.define("cell-row-indicator", X);