From 0be2078c45831ea4004e74f3ca0045fc422b81d0 Mon Sep 17 00:00:00 2001
From: Tsanie Lily <tsorgy@gmail.com>
Date: Tue, 25 Apr 2023 15:51:43 +0800
Subject: [PATCH] virtual mode issue fix.

---
 lib/ui/css/grid.scss |  3 ++-
 lib/ui/grid/grid.js  | 26 +++++++++++++-------------
 2 files changed, 15 insertions(+), 14 deletions(-)

diff --git a/lib/ui/css/grid.scss b/lib/ui/css/grid.scss
index 6515efe..c73d545 100644
--- a/lib/ui/css/grid.scss
+++ b/lib/ui/css/grid.scss
@@ -6,6 +6,7 @@
     display: flex;
     flex-direction: column;
     overflow: visible;
+    overflow-x: hidden;
 
     & {
         --cell-hover-bg-color: lightyellow;
@@ -77,7 +78,6 @@
         border-collapse: collapse;
         border-spacing: 0;
         table-layout: fixed;
-        position: relative;
 
         tr {
             position: relative;
@@ -438,6 +438,7 @@
                 text-indent: 16px;
                 width: 100%;
                 font-size: var(--font-smaller-size);
+                height: var(--line-height);
                 line-height: var(--line-height);
             }
 
diff --git a/lib/ui/grid/grid.js b/lib/ui/grid/grid.js
index 8838b4f..7b9a525 100644
--- a/lib/ui/grid/grid.js
+++ b/lib/ui/grid/grid.js
@@ -133,10 +133,9 @@ class Grid {
         if (this.#colAttrs.__filtered === true) {
             this.#currentSource = list.filter(it => {
                 for (let col of this.columns) {
-                    const f = this.#get(col.key, 'filter');
-                    if (Array.isArray(f)) {
+                    if (Array.isArray(col.filterValues)) {
                         const v = this.#getItemValue(it.values, col.key, col.filter);
-                        if (f.indexOf(v) < 0) {
+                        if (col.filterValues.indexOf(v) < 0) {
                             return false;
                         }
                     }
@@ -154,10 +153,9 @@ class Grid {
         this.#rowCount = -1;
 
         if (this.sortIndex >= 0) {
-            this.sortColumn(true);
-        } else {
-            this.resize();
+            this.sortColumn();
         }
+        this.resize();
     }
 
     get virtual() { return this.#currentSource?.length > this.virtualCount }
@@ -271,7 +269,7 @@ class Grid {
         this.#el = grid;
 
         this.#rendering = false;
-        if (this.sortIndex >= 0) {
+        if (this.#source != null && this.sortIndex >= 0) {
             this.sortColumn();
         }
     }
@@ -300,7 +298,7 @@ class Grid {
         } else if (isNaN(height) || height < 0) {
             height = this.#el.offsetHeight - top;
         }
-        const count = truncate((height - 1) / (this.rowHeight + 1)) * (RedumCount * 2) + 1;
+        const count = truncate((height - 1) / (this.rowHeight + 1)) + (RedumCount * 2) + 1;
         if (force || count !== this.#rowCount) {
             this.#rowCount = count;
             this.reload();
@@ -401,6 +399,9 @@ class Grid {
         if (this.#colAttrs.__filtered === true) {
             this.#currentSource.sort(comparer);
         }
+        if (this.#rowCount < 0) {
+            return;
+        }
         if (reload) {
             this.reload();
         } else {
@@ -1101,7 +1102,7 @@ class Grid {
                     if (typeof col.onFilterOk === 'function') {
                         col.onFilterOk.call(this, col, array);
                     } else {
-                        this.#set(col.key, 'filter', array.map(a => a.value));
+                        col.filterValues = array.map(a => a.value);
                     }
                     this.#colAttrs.__filtered = true;
                     this.#refreshSource();
@@ -1115,8 +1116,8 @@ class Grid {
             createElement('button', reset => {
                 reset.innerText = this.langs.reset;
                 reset.addEventListener('click', () => {
-                    this.#set(col.key, 'filter', null);
-                    this.#colAttrs.__filtered = this.columns.some(c => this.#get(c.key, 'filter') != null)
+                    delete col.filterValues;
+                    this.#colAttrs.__filtered = this.columns.some(c => col.filterValues != null)
                     this.#refreshSource();
                     if (typeof col.onFiltered === 'function') {
                         col.onFiltered.call(this, col);
@@ -1145,9 +1146,8 @@ class Grid {
         const content = createElement('div', 'filter-content');
         content.style.top = `${rowHeight}px`;
         this.#set(col.key, 'filterSource', array);
-        const filter = this.#get(col.key, 'filter');
         for (let item of array) {
-            item.__checked = !Array.isArray(filter) || filter.indexOf(item.value ?? item) >= 0;
+            item.__checked = !Array.isArray(col.filterValues) || col.filterValues.indexOf(item.value ?? item) >= 0;
         }
         if (array.length > 12) {
             array = array.slice(0, 12);