@ninebone/datagrid 0.0.12 → 0.0.14

package/dist/css/nine-table.css

@@ -546,24 +546,20 @@ tbody {
         }
     }
 
-    th.selected, td.selected {
-        .selected {
-            background-color: var(--cell-selection-bg);
-        }
-
-        .selected-start {
-            background-color: transparent;
-        }
+    .selected {
+        background-color: var(--cell-selection-bg);
+    }
 
-        .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-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); }
 }
 
-
 nine-table-col-expand {
     position: absolute;
     right: 2px;
@@ -1390,6 +1386,39 @@ nine-table-sheet.hscroll-visible {
     }
 }
 
+@media (hover: none) and (pointer: coarse) {
+
+    nine-table-sheet.vscroll-visible {
+        grid-template-columns: 1fr;
+        nine-table-vscrollbar {
+            display: none;
+        }
+    }
+    nine-table-sheet.hscroll-visible {
+        grid-template-rows: 1fr;
+
+        nine-table-hscrollbar, .scroll-edge {
+            display: none;
+        }
+    }
+
+    /* Hide custom scrollbar elements on touch-based mobile devices */
+    nine-table-vscrollbar,
+    nine-table-hscrollbar,
+    .scroll-edge {
+        display: none;
+    }
+
+    /* Optional: Hide native scrollbars visually while maintaining smooth touch/momentum scrolling */
+    .ng-sheet-body {
+        scrollbar-width: none; /* Firefox */
+        -ms-overflow-style: none; /* IE/Edge */
+    }
+    .ng-sheet-body::-webkit-scrollbar {
+        display: none; /* Chrome/Safari/Opera */
+    }
+}
+
 
 nine-table-sheet {
     --sheet-bg: #ffffff;

package/dist/nine-table.js

@@ -582,17 +582,13 @@ var f = class extends HTMLElement {
 		}, t = () => {
 			clearInterval(this.#r), clearInterval(this.#i);
 		};
-		[
-			"mouseup",
-			"mouseleave",
-			"touchend"
-		].forEach((e) => {
+		["mouseup", "mouseleave"].forEach((e) => {
 			this.#n.left.addEventListener(e, t), this.#n.right.addEventListener(e, t), this.#n.track.addEventListener(e, t);
 		}), this.#n.left.addEventListener("mousedown", (t) => {
 			t.button === 0 && e(-20);
 		}), this.#n.right.addEventListener("mousedown", (t) => {
 			t.button === 0 && e(20);
-		}), this.#n.left.addEventListener("touchstart", () => e(-20)), this.#n.right.addEventListener("touchstart", () => e(20)), this.#n.track.addEventListener("mousedown", (e) => {
+		}), this.#n.track.addEventListener("mousedown", (e) => {
 			if (e.button !== 0) return;
 			e.preventDefault();
 			let t = this.#n.track.getBoundingClientRect(), n = this.#n.thumb.clientWidth;
@@ -854,10 +850,10 @@ var m = {
 		}
 		let o = this.#n.templateLength, s = (this.#n.elements.body.thead?.offsetHeight || 0) + (this.#n.elements.body.tfoot?.offsetHeight || 0) + this.#n.elements.body.tbody.head.offsetHeight, c = this.#n.querySelector(".ng-sheet-body").offsetHeight || 0, l = Math.max(a * n - (c - s - n), 0), u = 15e6, d = l > u, f = 1, p = l;
 		d && (f = u / l, p = u), this.#n.elements.scrollHolder.style.height = `${p}px`;
-		let m = d ? e / f : e, h = Math.max(0, a - 1), g = Math.min(m, l), _ = Math.max(0, Math.min(Math.floor(g / n), h)), v = g % n;
-		this.#n.elements.left.tbody.body.style.top = this.#n.elements.body.tbody.body.style.top = this.#n.elements.right.tbody.body.style.top = `-${v}px`;
-		let y = this.#r.firstTr, b = y && y.dataset.row !== void 0 ? parseInt(y.dataset.row, 10) : -1;
-		(t || b !== _) && ([
+		let m = d ? e / f : e, h = Math.max(0, a - 1), g = Math.min(m, l), _ = Math.max(0, Math.min(Math.floor(g / n), h));
+		this.#n.elements.left.tbody.body.style.transform = this.#n.elements.body.tbody.body.style.transform = this.#n.elements.right.tbody.body.style.transform = `translate3d(0px, -${g % n}px, 0px)`;
+		let v = this.#r.firstTr, y = v && v.dataset.row !== void 0 ? parseInt(v.dataset.row, 10) : -1;
+		(t || y !== _) && ([
 			this.#n.elements.left.tbody.body,
 			this.#n.elements.body.tbody.body,
 			this.#n.elements.right.tbody.body
@@ -2852,7 +2848,7 @@ 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.12/dist/css/nine-table.css\";"];
+		}).join(""), i = ["@import \"https://cdn.jsdelivr.net/npm/@ninebone/datagrid@0.0.14/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")}
@@ -2921,7 +2917,7 @@ var N = class {
 	#r = 0;
 	#i = "";
 	constructor() {
-		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);
+		super(), ["NINE-TABLE"].includes(this.tagName) && n.log("Welcome nine-table", "0.0.14"), this.#e = this.attachShadow({ mode: "open" }), this.#t = new o(this);
 	}
 	connectedCallback() {
 		setTimeout(() => {