From 5e53d04174327ebc6514085b77dddfc92951bc81 Mon Sep 17 00:00:00 2001
From: Tsanie <lchen@foresightintelligence.com>
Date: Wed, 28 Feb 2024 10:29:19 +0800
Subject: [PATCH] fix: do not change scroll position when refreshing grid. fix:
 change `button` to `span`, avoiding conflict styles.

---
 lib/ui/css/grid.scss | 10 ++++++++--
 lib/ui/grid/grid.js  | 39 ++++++++++++++++++++++-----------------
 2 files changed, 30 insertions(+), 19 deletions(-)

diff --git a/lib/ui/css/grid.scss b/lib/ui/css/grid.scss
index c2e8d9d..e5412f8 100644
--- a/lib/ui/css/grid.scss
+++ b/lib/ui/css/grid.scss
@@ -595,11 +595,14 @@
             justify-content: flex-end;
             padding: 4px;
 
-            >button {
+            >.button {
                 box-sizing: border-box;
+                padding-inline: 6px;
+                text-align: center;
                 margin-right: 10px;
                 min-width: 40px;
                 height: var(--filter-line-height);
+                line-height: var(--filter-line-height);
                 border: none;
                 background-color: transparent;
                 cursor: pointer;
@@ -625,8 +628,10 @@
             white-space: nowrap;
             overflow: hidden;
 
-            >button {
+            >.button {
                 margin-right: 6px;
+                padding-inline: 6px;
+                text-align: center;
                 border: none;
                 line-height: 28px;
                 color: var(--title-color);
@@ -634,6 +639,7 @@
                 padding: 0 10px;
                 box-sizing: border-box;
                 height: 28px;
+                line-height: 28px;
                 cursor: pointer;
                 user-select: none;
                 background-color: var(--title-bg-color);
diff --git a/lib/ui/grid/grid.js b/lib/ui/grid/grid.js
index 261d50d..ebe4f6f 100644
--- a/lib/ui/grid/grid.js
+++ b/lib/ui/grid/grid.js
@@ -1558,8 +1558,9 @@ export class Grid {
     /**
      * 根据当前排序字段进行列排序
      * @param {boolean} [reload] - 为 `true` 则在列排序后调用 [reload]{@linkcode Grid#reload} 方法
+     * @param {boolean} [keep] - 重载后是否保持当前滚动位置
      */
-    sortColumn(reload) {
+    sortColumn(reload, keep) {
         const index = this.sortIndex;
         const col = this.columns[index];
         if (col == null) {
@@ -1587,7 +1588,7 @@ export class Grid {
             return;
         }
         if (reload) {
-            this.reload();
+            this.reload(keep);
         } else {
             this.refresh();
         }
@@ -1596,8 +1597,9 @@ export class Grid {
     /**
      * 根据当前排序列数组进行多列排序
      * @param {boolean} [reload] - 为 `true` 则在多列排序后调用 [reload]{@linkcode Grid#reload} 方法
+     * @param {boolean} [keep] - 重载后是否保持当前滚动位置
      */
-    sort(reload) {
+    sort(reload, keep) {
         const sortArray = this.sortArray;
         if (sortArray == null || sortArray.length === 0) {
             return;
@@ -1624,7 +1626,7 @@ export class Grid {
             return;
         }
         if (reload) {
-            this.reload();
+            this.reload(keep);
         } else {
             this.refresh();
         }
@@ -1674,7 +1676,7 @@ export class Grid {
             rowChanged(index);
         }
         buttonWrapper.append(
-            createElement('button', null,
+            createElement('span', 'button',
                 createIcon('fa-light', 'plus'),
                 createElement('span', span => {
                     span.innerText = this.langs.addLevel;
@@ -1692,7 +1694,7 @@ export class Grid {
                     });
                 })
             ),
-            createElement('button', 'ui-button-delete',
+            createElement('span', 'button ui-button-delete',
                 createIcon('fa-light', 'times'),
                 createElement('span', span => {
                     span.innerText = this.langs.deleteLevel;
@@ -1710,7 +1712,7 @@ export class Grid {
                     });
                 })
             ),
-            createElement('button', 'ui-button-copy',
+            createElement('span', 'button ui-button-copy',
                 createIcon('fa-light', 'copy'),
                 createElement('span', span => {
                     span.innerText = this.langs.copyLevel;
@@ -1728,8 +1730,8 @@ export class Grid {
                     });
                 })
             ),
-            createElement('button', button => {
-                button.className = 'ui-button-move-up';
+            createElement('span', button => {
+                button.className = 'button ui-button-move-up';
                 const icon = createIcon('fa-light', 'chevron-up');
                 icon.addEventListener('click', () => {
                     const index = grid.selectedIndex;
@@ -1746,8 +1748,8 @@ export class Grid {
                 });
                 button.appendChild(icon);
             }),
-            createElement('button', button => {
-                button.className = 'ui-button-move-down';
+            createElement('span', button => {
+                button.className = 'button ui-button-move-down';
                 const icon = createIcon('fa-light', 'chevron-down');
                 icon.addEventListener('click', () => {
                     const index = grid.selectedIndex;
@@ -2081,9 +2083,10 @@ export class Grid {
 
     /**
      * @private
-     * @param {GridItemWrapper[]} list 
+     * @param {GridItemWrapper[]} [list] 
      */
     _refreshSource(list) {
+        const keep = list == null;
         list ??= this._var.source;
         if (this._var.colAttrs.__filtered === true) {
             this._var.currentSource = list.filter(it => {
@@ -2114,11 +2117,11 @@ export class Grid {
 
         this.resize(true, false, () => {
             if (this.sortIndex >= 0) {
-                this.sortColumn(true);
+                this.sortColumn(true, keep);
             } else if (this.sortArray?.length > 0) {
-                this.sort(true);
+                this.sort(true, keep);
             } else {
-                this.reload();
+                this.reload(keep);
             }
         });
     }
@@ -3276,7 +3279,8 @@ export class Grid {
         // function
         const functions = createElement('div', 'filter-function');
         functions.append(
-            createElement('button', ok => {
+            createElement('span', ok => {
+                ok.className = 'button';
                 ok.innerText = this.langs.ok;
                 ok.addEventListener('click', () => {
                     const array = this._get(col.key, 'filterSource').filter(i => i.__checked !== false);
@@ -3300,7 +3304,8 @@ export class Grid {
                     this._onCloseFilter();
                 });
             }),
-            createElement('button', reset => {
+            createElement('span', reset => {
+                reset.className = 'button';
                 reset.innerText = this.langs.reset;
                 reset.addEventListener('click', () => {
                     delete col.filterValues;