@ninebone/datagrid 0.1.3 → 0.1.6

package/README.md

@@ -71,6 +71,11 @@ npm install @ninebone/datagrid
             ]);
         });
     </script>
+    
+```
+
+```html
+<ninelab-table show-footer="true">
 ```
 
 

package/dist/css/nine-table.css

@@ -1740,6 +1740,11 @@ col {
     width: attr(width px);
 }
 
+col:last-child {
+    width: 100% !important;
+}
+
+
 thead {
     display: table-header-group;
     position: sticky;

package/dist/nine-table.js

@@ -1136,7 +1136,7 @@ var m = {
 		endCol: -1
 	};
 	constructor(e) {
-		this.#e = e, this.#t = e.getRootNode().host, this.#i();
+		this.#e = e, this.#t = e.getRootNode().host, this.#d();
 	}
 	#r(e) {
 		if (!e) return {
@@ -1238,39 +1238,45 @@ var m = {
 			});
 		});
 	};
-	#i() {
+	#i;
+	#a;
+	#o;
+	#s;
+	#c = (e, t) => {
+		let n = this.#e.getRootNode();
+		if (n && typeof n.elementsFromPoint == "function") {
+			let r = n.elementsFromPoint(e, t);
+			for (let e of r) {
+				let t = e.closest("td, th");
+				if (t && this.#e.contains(t) && t.dataset.row !== void 0) return t;
+			}
+		}
+		let r = this.#e.querySelectorAll(".ng-sheet-body-content tbody tr td, .ng-sheet-body-content tbody tr:not(.nodata) th");
+		for (let n of r) {
+			let r = n.getBoundingClientRect();
+			if (e >= r.left && e <= r.right && t >= r.top && t <= r.bottom) return n;
+		}
+		return null;
+	};
+	#l = (e) => {
+		let t = this.#c(e.clientX, e.clientY);
+		if (!t || t.dataset.row === void 0 || t.dataset.col === void 0) return;
+		let n = t.closest("tr"), { matrixRow: r } = this.#r(n), i = parseInt(t.dataset.col, 10);
+		r < 0 || (this.#i !== r || this.#a !== i) && (this.#i = r, this.#a = i, this.setRange(this.#o, this.#s, r, i));
+	};
+	#u = () => {
+		document.removeEventListener("mousemove", this.#l);
+	};
+	#d() {
 		let e = this.#e.querySelector(".ng-sheet-body");
-		e && e.addEventListener("mousedown", (e) => {
+		e && (document.addEventListener("mouseup", this.#u), e.addEventListener("mousedown", (e) => {
 			if (e.button !== 0) return;
 			let t = e.target.closest("td, th");
 			if (!t || t.dataset.row === void 0 || t.dataset.col === void 0) return;
 			this.#e.style.userSelect = "none", this.#e.style.webkitUserSelect = "none";
 			let n = t.closest("tr"), { matrixRow: r } = this.#r(n), i = parseInt(t.dataset.col, 10);
-			if (r < 0) {
-				this.#e.style.userSelect = "", this.#e.style.webkitUserSelect = "";
-				return;
-			}
-			this.setFocus(r, i), this.setRange(r, i, r, i);
-			let a = r, o = i, s = (e) => {
-				let t = document.elementFromPoint(e.clientX, e.clientY)?.closest("td, th");
-				if (!t || !this.#e.contains(t)) {
-					let n = this.#e.querySelectorAll(".ng-sheet-body-content tbody tr td, .ng-sheet-body-content tbody tr:not(.nodata) th");
-					for (let r of n) {
-						let n = r.getBoundingClientRect();
-						if (e.clientX >= n.left && e.clientX <= n.right && e.clientY >= n.top && e.clientY <= n.bottom) {
-							t = r;
-							break;
-						}
-					}
-				}
-				if (!t || t.dataset.row === void 0 || t.dataset.col === void 0) return;
-				let n = t.closest("tr"), { matrixRow: s } = this.#r(n), c = parseInt(t.dataset.col, 10);
-				s < 0 || (a !== s || o !== c) && (a = s, o = c, this.setRange(r, i, s, c));
-			}, c = () => {
-				this.#e.style.userSelect = "", this.#e.style.webkitUserSelect = "", document.removeEventListener("mousemove", s), document.removeEventListener("mouseup", c);
-			};
-			document.addEventListener("mousemove", s), document.addEventListener("mouseup", c);
-		});
+			this.#o = r, this.#s = i, r < 0 ? (this.#e.style.userSelect = "", this.#e.style.webkitUserSelect = "") : (this.setFocus(r, i), this.setRange(r, i, r, i), this.#i = r, this.#a = i, document.addEventListener("mousemove", this.#l));
+		}));
 	}
 }, b = class {
 	#e;
@@ -2026,7 +2032,7 @@ var w = class {
 		let s = this.querySelector(".search-box");
 		s.value = "", this.classList.add("active"), this.classList.add("loading"), setTimeout(() => {
 			try {
-				this.#c(), this.#r.rowManager.scrollToDataRow(0), s.focus();
+				this.#c(), this.#r.rowManager.scrollToDataRow(0), s.focus({ preventScroll: !0 });
 			} finally {
 				this.classList.remove("loading");
 			}
@@ -2993,7 +2999,7 @@ var P = class {
 		let e = Array.from(this.#e.children).filter((e) => e.tagName.toUpperCase() === "TABLE"), t = e.length, n = e.map((e, n) => {
 			let r = n === 0 ? "active" : "", i = e.id || `sheet${n + 1}`;
 			return `<nine-table-sheet class="${r}" data-index="${n}" data-sheet-id="${i}" id="${i}"></nine-table-sheet>` + (n < t - 1 ? `<nine-splitter class="h" data-split-index="${n}"></nine-splitter>` : "");
-		}).join(""), r = ["@import \"https://cdn.jsdelivr.net/npm/@ninebone/datagrid@0.1.3/dist/css/nine-table.css\";"];
+		}).join(""), r = ["@import \"https://cdn.jsdelivr.net/npm/@ninebone/datagrid@0.1.6/dist/css/nine-table.css\";"];
 		nine["nine-table"] && nine["nine-table"].cssFile && r.push(`@import "${nine["nine-table"].cssFile}";`), this.#e.shadowRoot.innerHTML = `
             <style>
                 ${r.join("\n")}
@@ -3130,7 +3136,7 @@ var P = class {
 	#i;
 	#a = 0;
 	constructor() {
-		super(), ["NINE-TABLE"].includes(this.tagName) && n.log("Welcome nine-table", "0.1.3"), this.#e = this.attachShadow({ mode: "open" }), this.#t = new o(this), this.#r = new I(this), this.#i = new L(this), this.#c();
+		super(), ["NINE-TABLE"].includes(this.tagName) && n.log("Welcome nine-table", "0.1.6"), this.#e = this.attachShadow({ mode: "open" }), this.#t = new o(this), this.#r = new I(this), this.#i = new L(this), this.#c();
 	}
 	connectedCallback() {
 		setTimeout(() => {
@@ -3465,8 +3471,8 @@ var z = class extends HTMLElement {
 	get attr() {
 		return super.attr;
 	}
-	getExprValue(e, t, n, r) {
-		return super.getExprValue(e, t, n, r);
+	getExprValue(e, t, n) {
+		return super.getExprValue(e, t, n);
 	}
 	constructor() {
 		super();
@@ -3904,180 +3910,173 @@ var J = class extends H {
 customElements.get("cell-radio") || customElements.define("cell-radio", J);
 // src/cell/cell-combo-panel.js
 var Y = class extends HTMLElement {
-	#e;
+	#e = 10;
 	#t;
 	#n;
-	#r = !1;
-	#i;
-	#a;
-	#o;
+	#r;
 	constructor() {
 		super();
 	}
 	connectedCallback() {
-		this.#x(), this.#i = this.querySelector("nine-table-simple"), setTimeout(() => {
-			this.#a = this.#i.shadowRoot.querySelector("nine-table-sheet"), this.#b();
+		this.#v(), this.#n = this.querySelector("nine-table-simple"), setTimeout(() => {
+			this.#r = this.#n.shadowRoot.querySelector("nine-table-sheet"), this.#_();
 		});
 	}
-	#s = (e, t, n, i) => {
-		let a = this.querySelector("nine-table-simple");
-		if (!a || !e || e.length === 0) return;
-		let o = this.#e.closest("th,td").getAttribute("items"), s = [];
-		s = o ? o.split(",").map((e) => e.trim()) : [n].filter(Boolean);
-		let c = s.length, l = a.shadowRoot.querySelector("nine-table-sheet");
-		l.source.table.querySelectorAll("colgroup col, tbody td").forEach((e, t) => {
-			let n = parseInt(e.dataset.col, 10);
-			n >= 2 && (e.style.display = n - 2 >= c ? "none" : "");
-		}), a.shadowRoot.querySelectorAll("table colgroup col").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 n = {
-				CHK: "N",
-				k: t && e[t] !== void 0 ? e[t] : e[0] === void 0 ? "" : e[0]
-			};
-			return s.forEach((t, r) => {
-				n[`tmp${r + 1}`] = e[t] === void 0 ? e[r] === void 0 ? "" : e[r] : e[t];
-			}), n;
-		});
-		a.addEventListener(r.EVENT.ROW_ADDED, () => {
+	#i = (e) => {
+		if (!this.#n || !this.#t.dataSource || this.#t.dataSource.length === 0) return;
+		let t = this.#t.items.length || 1;
+		this.#r.source.table.querySelectorAll("colgroup col, tbody td").forEach((e, n) => {
+			let r = parseInt(e.dataset.col, 10);
+			r >= 2 && (e.style.display = r - 2 >= t ? "none" : "");
+		}), this.#r.querySelectorAll("table colgroup col").forEach((e, n) => {
+			let r = parseInt(e.dataset.col, 10);
+			r >= 2 && (e.style.display = r - 2 >= t ? "none" : "");
+		}), this.#n.addEventListener(r.EVENT.ROW_ADDED, () => {
 			setTimeout(() => {
-				this.style.opacity = "", this.classList.add("active"), a.shadowRoot.querySelectorAll("colgroup col").forEach((e, t) => {
+				this.style.opacity = "", this.classList.add("active"), this.#r.querySelectorAll("colgroup col").forEach((e, t) => {
 					let n = parseInt(e.dataset.col, 10);
-					n >= 2 && e.style.display !== "none" && l.col.autoFit(n);
+					n >= 2 && e.style.display !== "none" && this.#r.col.autoFit(n);
 				});
-				let e = this.#i.fields.get();
-				if (i) {
-					let t = this.#e.value ? String(this.#e.value).split(this.#o).map((e) => e.trim()) : [], n = e.indexOf("k"), r = e.indexOf("CHK");
-					this.#i.data.getArray().forEach((e) => {
+				let e = this.#n.fields.get();
+				if (this.#t.multi) {
+					let t = this.#t.value ? String(this.#t.value).split(this.#t.separator).map((e) => e.trim()) : [], n = e.indexOf("k"), r = e.indexOf("CHK");
+					this.#n.data.getArray().forEach((e) => {
 						e.v[r] = t.includes(String(e.v[n])) ? "Y" : "N";
 					});
-					let i = this.#a.view.getArray().findIndex((e, r) => e.v[n] === t[0]);
-					this.#_(i);
+					let i = this.#r.view.getArray().findIndex((e, r) => e.v[n] === t[0]);
+					this.#m(i);
 				} else {
-					let t = this.#e.value, n = e.indexOf("k"), r = this.#a.view.getArray().findIndex((e, r) => e.v[n] === t);
-					this.#_(r);
+					let t = this.#t.value, n = e.indexOf("k"), r = this.#r.view.getArray().findIndex((e, r) => e.v[n] === t);
+					this.#m(r);
 				}
 			});
-		}, { once: !0 }), i && this.#e.value, u.length * this.#a.template.height >= this.offsetHeight ? this.classList.add("expand") : this.classList.remove("expand"), a.data.set(u);
+		}, { once: !0 }), e.length > this.#e ? this.classList.add("expand") : this.classList.remove("expand"), this.#n.data.set(e);
 	};
-	#c = (e) => {
+	#a = (e) => {
 		let t = e.closest(".ng-sheet-body"), n = e.getBoundingClientRect(), r = t.getBoundingClientRect();
 		return r.bottom - n.bottom >= n.top - r.top;
 	};
-	#l = (e, t = 0) => {
-		let n = e.closest(".ng-sheet-body"), r = e.getBoundingClientRect(), i = n.getBoundingClientRect();
-		return (t ? i.bottom - r.bottom : r.top - i.top) - 5;
+	#o = (e, t, n) => {
+		let r = e.closest(".ng-sheet-body"), i = e.getBoundingClientRect(), a = r.getBoundingClientRect(), o = (t ? a.bottom - i.bottom : i.top - a.top) - 5, s = n * this.#r.template.height + (n > this.#e ? 32 : 0) + 2;
+		return Math.min(o, s);
 	};
-	#u = (e) => {
+	#s = (e) => {
 		let t = e.closest("th,td"), n = t.closest(".ng-sheet-body"), r = t.getBoundingClientRect(), i = n.getBoundingClientRect(), a = r.left - i.left, o = this.offsetWidth;
 		return a + o > i.width && (a = Math.max(0, i.width - o - 2)), a < 0 && (a = 5), a;
 	};
-	open = (e, t, n, r, i, a) => {
-		this.#e = e, this.#t = n, this.#n = r, this.#r = !0, this.#o = a, this.classList.add("active"), this.style.opacity = "0", setTimeout(() => {
-			if (!this.querySelector("nine-table-simple") || !t) return;
+	open = (e) => {
+		this.#t = e, this.classList.add("active"), this.style.opacity = "0";
+		let t = this.#t.items;
+		t.length === 0 && t.push(this.#t.valueName);
+		let n = this.#t.dataSource.map((e) => {
+			let n = {
+				CHK: "N",
+				k: this.#t.keyName && e[this.#t.keyName] !== void 0 ? e[this.#t.keyName] : e[0] === void 0 ? "" : e[0]
+			};
+			return t.forEach((t, r) => {
+				n[`tmp${r + 1}`] = e[t] === void 0 ? e[r] === void 0 ? "" : e[r] : e[t];
+			}), n;
+		});
+		setTimeout(() => {
+			if (!this.#n || !this.#t.dataSource) return;
 			this.querySelector(".search-input").value = "", this.querySelector("#chkAll").checked = !0;
-			let a = e.closest(".ng-sheet-body"), o = e.getBoundingClientRect(), s = a.getBoundingClientRect(), c = this.#c(e), l = this.#l(e, c), u = this.#u(e), d = c ? o.bottom - s.top : o.top - s.top - l;
-			this.style.height = `${l}px`, this.style.left = `${u}px`, this.style.top = `${d}px`, i ? (this.classList.add("multi"), this.#i.classList.add("multi")) : (this.classList.remove("multi"), this.#i.classList.remove("multi")), this.#s(t, n, r, i);
+			let t = e.closest(".ng-sheet-body"), r = e.getBoundingClientRect(), i = t.getBoundingClientRect(), a = this.#a(e), o = this.#o(e, a, n.length), s = this.#s(e), c = a ? r.bottom - i.top : r.top - i.top - o;
+			this.style.height = `${o}px`, this.style.left = `${s}px`, this.style.top = `${c}px`, this.#t.multi ? (this.classList.add("multi"), this.#n.classList.add("multi")) : (this.classList.remove("multi"), this.#n.classList.remove("multi")), this.#i(n);
 		}, 100);
 	};
 	close = () => {
-		this.classList.remove("active"), this.#r = !1, this.#e && this.#e.cell && this.#e.cell.focus();
+		this.classList.remove("active"), this.#t && this.#t.cell && this.#t.cell.focus({ preventScroll: !0 });
 	};
-	#d = (e) => {
+	#c = (e) => {
 		let t = e.target.closest("th,td");
-		if (this.#i.classList.contains("multi")) {
+		if (this.#n.classList.contains("multi")) {
 			let e = parseInt(t?.dataset.index, 10);
-			this.#g(e);
-		} else parseInt(t?.dataset.col, 10) >= 2 && this.#h();
+			this.#p(e);
+		} else parseInt(t?.dataset.col, 10) >= 2 && this.#f();
 	};
-	#f = (e) => {
+	#l = (e) => {
 		switch (e.code) {
 			case "Enter":
 			case "ArrowDown":
-				let e = this.#i.row.at();
-				e < 0 ? this.#_(0) : this.#_(e);
+				let e = this.#n.row.at();
+				e < 0 ? this.#m(0) : this.#m(e);
 				break;
-			case "Tab": this.#_(this.#i.row.at());
+			case "Tab": this.#m(this.#n.row.at());
 		}
 	};
-	#p = (e) => {
+	#u = (e) => {
 		let t;
 		switch (e.code) {
 			case "Escape":
 				this.close();
 				break;
 			case "Enter":
-				this.classList.contains("multi") ? this.#m() : this.#h();
+				this.classList.contains("multi") ? this.#d() : this.#f();
 				break;
 			case "Tab":
-				this.classList.contains("expand") && (e.preventDefault(), this.querySelector("input[type='text']").focus());
+				this.classList.contains("expand") && (e.preventDefault(), this.querySelector("input[type='text']").focus({ preventScroll: !0 }));
 				break;
 			case "ArrowDown":
-				t = this.#i.row.at(), t < 0 && this.#_(0);
+				t = this.#n.row.at(), t < 0 && this.#m(0);
 				break;
-			case "Space": e.preventDefault(), ["TH", "TD"].includes(e.target.tagName) && this.#g(this.#i.row.at());
+			case "Space": e.preventDefault(), ["TH", "TD"].includes(e.target.tagName) && this.#p(this.#n.row.at());
 		}
 	};
-	#m = () => {
-		let e = this.#i.fields.get(), t = e.indexOf("k"), n = e.indexOf("CHK"), r = [];
-		this.#a.view.getArray().forEach((e) => {
+	#d = () => {
+		let e = this.#n.fields.get(), t = e.indexOf("k"), n = e.indexOf("CHK"), r = [];
+		this.#r.view.getArray().forEach((e) => {
 			e.v[n] === "Y" && r.push(e.v[t]);
-		}), this.#e.value = r.join(this.#o), this.#e.sheet.rowManager.refresh(!0), this.close();
+		}), this.#t.value = r.join(this.#t.separator), this.#t.sheet.rowManager.refresh(!0), this.close();
 	};
-	#h = () => {
-		let e = this.#i.row.at();
+	#f = () => {
+		let e = this.#n.row.at();
 		if (e >= 0) {
-			let t = this.#a.view.get(e);
-			this.#e.value = t.k, this.#e.sheet.rowManager.refresh(!0), this.close();
+			let t = this.#r.view.get(e);
+			this.#t.value = t.k, this.#t.sheet.rowManager.refresh(!0), this.close();
 		}
 	};
-	#g = (e) => {
-		if (this.#i.classList.contains("multi") && e >= 0) {
-			let t = this.#a.view.get(e);
-			this.#i.data.setValue(t.m._[r.META.INDEX.ROWID], "CHK", t.CHK === "Y" ? "N" : "Y"), this.#i.refresh();
+	#p = (e) => {
+		if (this.#n.classList.contains("multi") && e >= 0) {
+			let t = this.#r.view.get(e);
+			this.#n.data.setValue(t.m._[r.META.INDEX.ROWID], "CHK", t.CHK === "Y" ? "N" : "Y"), this.#n.refresh();
 		}
 	};
-	#_ = (e) => {
-		e === -1 ? (this.#a.row.focus(-1, () => {}), setTimeout(() => {
-			this.#a.selection.clear(), this.#a.navigation.currentCell = this.#a.querySelector("tr[data-index=\"0\"] td[data-col=\"2\"]"), this.#a.focus(), this.#a.invalidate();
-		})) : this.#a.row.focus(e, () => {
+	#m = (e) => {
+		e === -1 ? (this.#r.row.focus(-1, () => {}), setTimeout(() => {
+			this.#r.selection.clear(), this.#r.navigation.currentCell = this.#r.querySelector("tr[data-index=\"0\"] td[data-col=\"2\"]"), this.#r.focus({ preventScroll: !0 }), this.#r.invalidate();
+		})) : this.#r.row.focus(e, () => {
 			setTimeout(() => {
-				let t = this.#a.querySelector(`tr[data-index="${e}"] td[data-col="2"]`);
-				this.#a.navigation.currentCell = t, t.focus(), this.#a.invalidate();
+				let t = this.#r.querySelector(`tr[data-index="${e}"] td[data-col="2"]`);
+				this.#r.navigation.currentCell = t, t.focus({ preventScroll: !0 }), this.#r.invalidate();
 			});
 		});
 	};
-	#v = (e) => {
-		let t = this.#i.fields.get().indexOf("CHK");
-		this.#i.data.getArray().forEach((n) => {
+	#h = (e) => {
+		let t = this.#n.fields.get().indexOf("CHK");
+		this.#n.data.getArray().forEach((n) => {
 			n.v[t] = e.target.checked ? "Y" : "N";
-		}), this.#a.invalidate();
+		}), this.#r.invalidate();
 	};
-	#y = (e) => {
+	#g = (e) => {
 		let t = e.target.value.toLowerCase().trim();
-		if (!t) this.#a.filtering.clear();
+		if (!t) this.#r.filtering.clear();
 		else {
-			let e = this.#i.data.getArray(), n = this.#i.fields.get(), r = "tmp1", i = n.indexOf(r), a = [];
+			let e = this.#n.data.getArray(), n = this.#n.fields.get(), r = "tmp1", i = n.indexOf(r), a = [];
 			e.forEach((e) => {
 				let n = i >= 0 && e.v ? e.v[i] : "";
 				String(n).replace(/<[^>]*>?/gm, "").toLowerCase().includes(t) && a.push(n);
-			}), this.#a.filtering.set({ [r]: [...new Set(a)] });
+			}), this.#r.filtering.set({ [r]: [...new Set(a)] });
 		}
 	};
-	get isOpen() {
-		return this.#r;
-	}
 	get targetCell() {
-		return this.#e;
+		return this.#t;
 	}
-	#b = () => {
-		this.querySelector(".search-input").addEventListener("input", this.#y), this.querySelector(".search-input").addEventListener("keydown", this.#f), this.querySelector("#btnOk").addEventListener("click", this.#m), this.querySelector("#chkAll").addEventListener("change", this.#v), this.#a.addEventListener("keydown", this.#p), this.#a.addEventListener("click", this.#d), document.addEventListener("mousedown", (e) => {
+	#_ = () => {
+		this.querySelector(".search-input").addEventListener("input", this.#g), this.querySelector(".search-input").addEventListener("keydown", this.#l), this.querySelector("#btnOk").addEventListener("click", this.#d), this.querySelector("#chkAll").addEventListener("change", this.#h), this.#r.addEventListener("keydown", this.#u), this.#r.addEventListener("click", this.#c), document.addEventListener("mousedown", (e) => {
 			(e.composedPath ? e.composedPath() : []).includes(this) || this.close();
 		});
 	};
-	#x = () => {
+	#v = () => {
 		this.innerHTML = "\n            <input type=\"text\" class=\"search-input\" placeholder=\"Search...\" />\n            \n            <nine-table-simple class=\"combo-list\" theme=\"simple\">\n                <table auto-fit-col=\"true\">\n                    <colgroup>\n                        <col width=\"30\" fixed=\"left\" />\n                        <col width=\"100\" />\n                        <col width=\"100\" />\n                        <col width=\"100\" />\n                        <col width=\"100\" />\n                        <col width=\"100\" />\n                        <col width=\"100\" />\n                        <col width=\"100\" />\n                        <col width=\"100\" />\n                        <col width=\"100\" />\n                        <col width=\"100\" />\n                        <col width=\"0\" />\n                    </colgroup>\n                    <tbody>\n                        <tr>\n                            <td cell-type=\"checkbox\" data-bind=\"CHK\"></td>\n                            <td data-bind=\"tmp1\" />\n                            <td data-bind=\"tmp2\" />\n                            <td data-bind=\"tmp3\" />\n                            <td data-bind=\"tmp4\" />\n                            <td data-bind=\"tmp5\" />\n                            <td data-bind=\"tmp6\" />\n                            <td data-bind=\"tmp7\" />\n                            <td data-bind=\"tmp8\" />\n                            <td data-bind=\"tmp9\" />\n                            <td data-bind=\"tmp10\" />\n                            <td data-bind=\"k\" />\n                        </tr>\n                    </tbody>\n                </table>\n            </nine-table-simple>\n            \n            <div class=\"footer\">\n                <label for=\"chkAll\"><input id=\"chkAll\" type=\"checkbox\" checked><span>Select All</span></label>\n                <button id=\"btnOk\">OK</button>\n            </div>\n        ";
 	};
 };
@@ -4087,68 +4086,80 @@ var X = class extends H {
 	#e;
 	#t = [];
 	#n;
-	#r;
-	#i;
-	#a;
-	#o;
 	constructor() {
 		super();
 	}
 	connectedCallback() {
-		super.connectedCallback(), this.#l();
+		super.connectedCallback(), this.#a();
 	}
 	rerenderer = () => {
-		this.#u(), this.refresh();
+		this.#o(), this.refresh();
 	};
 	refresh = () => {
-		let e = super.refresh();
-		return this.#e && (this.#e.textContent = this.#s() || "Select", this.#c()), e;
+		super.refresh(), this.#e.textContent = this.#r() || "Select", this.#i();
 	};
-	#s = () => {
+	#r = () => {
 		if (!this.value || !Array.isArray(this.#t)) return "";
-		if (this.#i) {
-			let e = String(this.value).split(this.#a);
-			return this.#t.filter((t) => e.includes(String(t[this.#n]))).map((e) => e[this.#r]).join(this.#a);
+		if (this.multi) {
+			let e = String(this.value).split(this.multiSeparator);
+			return this.#t.filter((t) => e.includes(String(t[this.keyName]))).map((e) => e[this.valueName]).join(this.multiSeparator);
 		}
 		{
-			let e = this.#t.find((e) => String(e[this.#n]) === String(this.value));
-			return e ? e[this.#r] : this.value;
+			let e = this.#t.find((e) => String(e[this.keyName]) === String(this.value));
+			return e ? e[this.valueName] : this.value;
 		}
 	};
-	#c = () => {
+	#i = () => {
 		if (!super.cell || (super.cell.classList.remove("invalid"), this.value === null || this.value === void 0 || this.value === "" || !Array.isArray(this.#t))) return;
-		let e = this.#i ? String(this.value).split(this.#a) : [this.value];
-		for (let t of e) if (this.#t.findIndex((e) => String(t) === String(e[this.#n])) < 0) {
+		let e = this.multi ? String(this.value).split(this.multiSeparator) : [this.value];
+		for (let t of e) if (this.#t.findIndex((e) => String(t) === String(e[this.keyName])) < 0) {
 			super.cell.classList.add("invalid");
 			break;
 		}
 	};
-	#l = () => {
-		this.#d(), this.#n = this.cell.getAttribute("key-name") || "k", this.#r = this.cell.getAttribute("value-name") || "v", this.#i = this.cell.getAttribute("multi") === "true", this.#a = this.cell.getAttribute("multi-separator") || ",", this.#u(), this.#f();
+	#a = () => {
+		this.#s(), this.#o(), this.#c();
 	};
-	#u = () => {
-		if (!super.sheet || !super.cell) return;
-		let e = super.cell?.getAttribute("data-source");
+	#o = () => {
+		let e = this.cell.getAttribute("data-source");
 		e && (this.#t = super.getExprValue(e, super.tr.data, super.tr.dataset.row));
 	};
-	#d = () => {
+	#s = () => {
 		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");
 	};
-	#f = () => {
+	#c = () => {
 		this.querySelectorAll("button").forEach((e) => {
 			e.addEventListener("click", (e) => {
-				e.stopPropagation(), this.#p();
+				e.stopPropagation(), this.#l();
 			});
 		}), this.cell.addEventListener("keydown", (e) => {
-			["Space"].includes(e.code) && this.#p();
+			["Space"].includes(e.code) && this.#l();
 		});
 	};
-	#p = () => {
-		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);
+	#l = () => {
+		this.#n || (this.#n = this.sheet.querySelector("cell-combo-panel"), this.#n || (this.#n = document.createElement("cell-combo-panel"), this.sheet.appendChild(this.#n))), this.#n.classList.contains("active") && this.#n.targetCell === this ? this.#n.close() : this.#n.open(this, this.#t, this.keyName, this.valueName, this.multi, this.multiSeparator);
 	};
 	get dataSource() {
 		return this.#t;
 	}
+	get keyName() {
+		return this.cell.getAttribute("key-name") || "k";
+	}
+	get valueName() {
+		return this.cell.getAttribute("value-name") || "v";
+	}
+	get multi() {
+		return this.cell.getAttribute("multi") === "true";
+	}
+	get multiSeparator() {
+		return this.cell.getAttribute("multi-separator") || ",";
+	}
+	get items() {
+		return this.cell.getAttribute("items")?.split(",").map((e) => e.trim()) || [];
+	}
+	get separator() {
+		return this.multiSeparator;
+	}
 };
 customElements.get("cell-combo") || customElements.define("cell-combo", X);
 // src/cell/cell-renderer.js