@ninebone/datagrid 0.0.3 → 0.0.4

package/README.md

@@ -42,7 +42,8 @@ npm install @ninebone/datagrid
 
 <html>
 <head>
-    <script type="text/javascript" src="[https://cdn.jsdelivr.net/npm/@ninebone/datagrid@latest/dist/nine-table.umd.js](https://cdn.jsdelivr.net/npm/@ninebone/table@latest/dist/nine-table.umd.js)"></script>
+    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/@ninebone/util@latest/dist/nine-util.umd.js"></script>
+    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/@ninebone/datagrid@latest/dist/nine-table.umd.js"></script>
 </head>
 <body>
 

package/dist/nine-table.js

@@ -2839,8 +2839,8 @@ var N = class {
 			let n = t === 0 ? "active" : "", i = e.id || `sheet${t + 1}`;
 			return `<nine-table-sheet class="${n}" data-index="${t}" data-sheet-id="${i}" id="${i}"></nine-table-sheet>` + (t < r - 1 ? `<nine-splitter class="h" data-split-index="${t}"></nine-splitter>` : "");
 		}).join("");
-		n.log("Welcome nine-table", "0.2.2");
-		let a = ["@import \"https://cdn.jsdelivr.net/npm/@ninebone/table@0.2.2/dist/css/nine-table.css\";"];
+		n.log("Welcome nine-table", "0.0.3");
+		let a = ["@import \"https://cdn.jsdelivr.net/npm/@ninebone/datagrid@0.0.3/dist/css/nine-table.css\";"];
 		nine["nine-table"] && nine["nine-table"].cssFile && a.push(`@import "${nine["nine-table"].cssFile}";`), this.#e.shadowRoot.innerHTML = `
             <style>
                 ${a.join("\n")}
@@ -3009,14 +3009,10 @@ customElements.get("nine-table") || customElements.define("nine-table", F), cust
 });
 // src/cell/core/BasicCellElement.js
 var I = class extends HTMLElement {
-	static _styleCache = /* @__PURE__ */ new Map();
-	static _customStyleCache = /* @__PURE__ */ new Map();
 	constructor() {
 		super();
 	}
-	applyBaseStyle() {
-		this.constructor.name;
-	}
+	applyBaseStyle() {}
 	connectedCallback() {}
 }, L = /* @__PURE__ */ new Map(), R = class extends I {
 	#e;
@@ -3134,8 +3130,8 @@ var I = class extends HTMLElement {
 		let t = this.#r.dataset.expr, n = this.#r.dataset.bind, r = parseInt(this.#r.dataset.row, 10);
 		if (t) try {
 			return this.#n.getAttribute("grouping") === "true" ? this.getGroupExprValue(t, this.#n.data, r, this.#r) : this.#e.exprEngine.evaluate(t, this.#n.data, r);
-		} catch (t) {
-			return console.trace(t), e;
+		} catch {
+			return e;
 		}
 		return n ? this.value ?? e : e;
 	};
@@ -3400,7 +3396,6 @@ var H = class extends z {
 		this.refresh();
 	};
 	#a = () => {
-		this.tr.data;
 		let e = this.cell.getAttribute("data-source");
 		if (e && (this.#n = super.getExprValue(e, this.tr.data, this.tr.dataset.row), this.querySelector("datalist")?.remove(), this.#n && Array.isArray(this.#n))) {
 			let e = `color-list-${Math.random().toString(36).substr(2, 9)}`, t = document.createElement("datalist");
@@ -3690,51 +3685,50 @@ var K = class extends HTMLElement {
 	connectedCallback() {
 		this.#u(), this.#l();
 	}
-	#i = (e, t, r, i, a) => {
-		let o = this.querySelector("nine-table-simple");
-		if (!o || !e || e.length === 0) return;
-		let s = this.#e.getAttribute("items"), c = [];
-		c = s ? s.split(",").map((e) => e.trim()) : [r].filter(Boolean);
-		let l = c.length;
-		o.shadowRoot.querySelector(".ng-container-left").style.display = i ? "" : "none", o.shadowRoot.querySelectorAll("table colgroup col, tbody td").forEach((e, t) => {
-			n.log(e);
-			let r = parseInt(e.dataset.col, 10);
-			r >= 2 && (e.style.display = r - 2 >= l ? "none" : "");
+	#i = (e, t, n, r, i) => {
+		let a = this.querySelector("nine-table-simple");
+		if (!a || !e || e.length === 0) return;
+		let o = this.#e.getAttribute("items"), s = [];
+		s = o ? o.split(",").map((e) => e.trim()) : [n].filter(Boolean);
+		let c = s.length;
+		a.shadowRoot.querySelector(".ng-container-left").style.display = r ? "" : "none", a.shadowRoot.querySelectorAll("table colgroup col, tbody td").forEach((e, t) => {
+			let n = parseInt(e.dataset.col, 10);
+			n >= 2 && (e.style.display = n - 2 >= c ? "none" : "");
 		});
-		let u = e.map((e) => {
+		let l = e.map((e) => {
 			let n = {
 				CHK: "N",
 				k: t && e[t] !== void 0 ? e[t] : e[0] === void 0 ? "" : e[0]
 			};
-			return c.forEach((t, r) => {
+			return s.forEach((t, r) => {
 				n[`tmp${r + 1}`] = e[t] === void 0 ? e[r] === void 0 ? "" : e[r] : e[t];
 			}), n;
 		});
-		if (o.data.set(u), i && this.#e.value) {
-			let e = String(this.#e.value).split(a || ",");
-			o.data.getValidData().forEach((t) => {
+		if (a.data.set(l), r && this.#e.value) {
+			let e = String(this.#e.value).split(i || ",");
+			a.data.getValidData().forEach((t) => {
 				e.includes(String(t.v[1])) && (t.v[0] = "Y");
-			}), o.refreshData();
+			}), a.refreshData();
 		}
 	};
-	open = (e, t, r, i, a, o) => {
-		this.#e = e, this.#t = r, this.#n = i, this.#r = !0, n.log(/* @__PURE__ */ new Date()), this.classList.add("active");
-		let s = this.querySelector("nine-table-simple");
-		if (!s || !t) return;
-		this.querySelector(".search-input").value = "", this.querySelector("#chkAll").checked = !0, t.length > 10 ? this.classList.add("expand") : this.classList.remove("expand"), a ? this.classList.add("multi") : this.classList.remove("multi");
-		let c = e.closest("nine-table-sheet"), l = e.querySelector(".btn1");
-		if (!l || !c) return;
-		let u = l.getBoundingClientRect(), d = c.getBoundingClientRect(), f = u.left - d.left, p = u.bottom - d.top + 2, m = this.offsetWidth || 250, h = this.offsetHeight || 250;
-		if (f + m > d.width && (f = Math.max(0, d.width - m - 5)), f < 0 && (f = 5), p + h > d.height) {
-			let e = u.top - d.top - h - 2;
-			p = e >= 0 ? e : Math.max(0, d.height - h - 5);
+	open = (e, t, n, r, i, a) => {
+		this.#e = e, this.#t = n, this.#n = r, this.#r = !0, this.classList.add("active");
+		let o = this.querySelector("nine-table-simple");
+		if (!o || !t) return;
+		this.querySelector(".search-input").value = "", this.querySelector("#chkAll").checked = !0, t.length > 10 ? this.classList.add("expand") : this.classList.remove("expand"), i ? this.classList.add("multi") : this.classList.remove("multi");
+		let s = e.closest("nine-table-sheet"), c = e.querySelector(".btn1");
+		if (!c || !s) return;
+		let l = c.getBoundingClientRect(), u = s.getBoundingClientRect(), d = l.left - u.left, f = l.bottom - u.top + 2, p = this.offsetWidth || 250, m = this.offsetHeight || 250;
+		if (d + p > u.width && (d = Math.max(0, u.width - p - 5)), d < 0 && (d = 5), f + m > u.height) {
+			let e = l.top - u.top - m - 2;
+			f = e >= 0 ? e : Math.max(0, u.height - m - 5);
 		}
-		this.style.left = `${f}px`, this.style.top = `${p}px`, n.log(/* @__PURE__ */ new Date()), setTimeout(() => {
-			n.log(/* @__PURE__ */ new Date()), this.#i(t, r, i, a, o), n.log(/* @__PURE__ */ new Date());
-			let e = s.shadowRoot.querySelector(".ng-container-body table tbody.body");
+		this.style.left = `${d}px`, this.style.top = `${f}px`, setTimeout(() => {
+			this.#i(t, n, r, i, a);
+			let e = o.shadowRoot.querySelector(".ng-container-body table tbody.body");
 			e.__hasClickEvent ||= (e.addEventListener("mousedown", (e) => {
-				n.log("==========================================", e.target), e.target.closest("tr") && (n.log("==========================================", a), a || this.#a(e));
-			}), !0), n.log(/* @__PURE__ */ new Date());
+				e.target.closest("tr") && (i || this.#a(e));
+			}), !0);
 		}, 100);
 	};
 	close = () => {
@@ -3789,13 +3783,13 @@ var q = class extends z {
 	#a;
 	#o;
 	constructor() {
-		super(), this.applyBaseStyle();
+		super();
 	}
 	connectedCallback() {
 		this.#u(), super.connectedCallback(), this.#n = super.cell.getAttribute("key-name") || "k", this.#r = super.cell.getAttribute("value-name") || "v", this.#i = super.cell.getAttribute("multi") === "true", this.#a = super.cell.getAttribute("multi-separator") || ",", this.#s(), this.#c();
 	}
 	rerenderer = () => {
-		n.log("rerenderer"), this.#s(), this.refresh();
+		this.#s(), this.refresh();
 	};
 	#s = () => {
 		if (!super.sheet || !super.cell) return;
@@ -3810,7 +3804,7 @@ var q = class extends z {
 		});
 	};
 	#l = () => {
-		n.log(/* @__PURE__ */ new Date()), this.#o || (this.#o = super.sheet.querySelector("cell-combo-panel"), this.#o || (this.#o = document.createElement("cell-combo-panel"), super.sheet.appendChild(this.#o))), n.log(/* @__PURE__ */ new Date()), this.#o.isOpen && this.#o.targetCell === this ? this.#o.close() : this.#o.open(this, this.#t, this.#n, this.#r, this.#i, this.#a), n.log(/* @__PURE__ */ new Date());
+		this.#o || (this.#o = super.sheet.querySelector("cell-combo-panel"), this.#o || (this.#o = document.createElement("cell-combo-panel"), super.sheet.appendChild(this.#o))), this.#o.isOpen && this.#o.targetCell === this ? this.#o.close() : this.#o.open(this, this.#t, this.#n, this.#r, this.#i, this.#a);
 	};
 	#u = () => {
 		this.innerHTML = "\n            <button class=\"btn1\" type=\"button\" tabindex=\"-1\">Select</button>\n            <button class=\"btn2\" type=\"button\" tabindex=\"-1\"></button>\n        ", this.#e = this.querySelector(".btn1");
@@ -3891,8 +3885,7 @@ var Y = class extends R {
 		this.#e.innerHTML = this.getDisplayText(e);
 	};
 	#n = () => {
-		let e = this.closest("th,td");
-		(parseInt(e.offsetHeight, 10) || 32) - 8, this.innerHTML = "\n            <button class=\"button\">...</button>\n        ";
+		this.innerHTML = "\n            <button class=\"button\">...</button>\n        ";
 	};
 };
 customElements.get("cell-button") || customElements.define("cell-button", Y);
@@ -3902,10 +3895,10 @@ var X = class extends R {
 	#t;
 	#n;
 	constructor() {
-		super(), this.applyBaseStyle();
+		super();
 	}
 	connectedCallback() {
-		this.#r(), super.connectedCallback?.(), this.cell && (this.cell.removeAttribute("tabindex"), this.cell.dataset.bind = "rowState", this.cell.dataset.expr || (this.cell.dataset.expr = "data.__ng._[ninegrid.ROW.ORDER]"), this.cell.setAttribute("text-align", "center")), 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.cell.dataset.expr, this.cell.setAttribute("text-align", "right")), this.#e = this.querySelector(".ng-row-main"), this.#t = this.querySelector(".ng-row-sub"), this.#n = this.querySelector(".ng-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        ";