@ninebone/datagrid 0.0.11 → 0.0.12

package/dist/css/nine-table.css

@@ -506,25 +506,17 @@ 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 .row-status {
-    display: inline-block;
-    position: absolute;
-    right: 0;
-    top: 1px;
-    width: 4px;
-    height: 4px;
-    border-radius: 50%;
-}
 
 cell-row-indicator.is-insert .row-status {
     background-color: #333;
@@ -543,20 +535,35 @@ cell-row-indicator.is-delete .row-status {
 }
 
 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;
@@ -1519,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

@@ -271,8 +271,8 @@ var n = new class extends e.constructor {
 		e = parseInt(e, 10);
 		let i = this.getHostFields().indexOf(t);
 		if (i < 0) return;
-		let a = this.#i()[e];
-		a && (a.v[i] !== n && a.m._[r.META.INDEX.ROW_STATE] !== r.ROW_STATE.INSERT && (a.m._[r.META.INDEX.ROW_STATE] = r.ROW_STATE.UPDATE), a.v[i] = n);
+		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);
 	};
 	#d = (e) => {
 		if (!e) return e;
@@ -2229,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) => {
@@ -2843,7 +2852,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.11/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")}
@@ -2912,7 +2921,7 @@ var N = class {
 	#r = 0;
 	#i = "";
 	constructor() {
-		super(), ["NINE-TABLE"].includes(this.tagName) && n.log("Welcome nine-table", "0.0.11"), 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(() => {