tsanie/ui-lib
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix: do not change scroll position when refreshing grid.

Browse Source 
fix: change `button` to `span`, avoiding conflict styles.
This commit is contained in:
Chen Lily 2024-02-28 10:29:19 +08:00
parent 38bad864e0
commit 5e53d04174
2 changed files with 30 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
lib/ui/css/grid.scss
View File

@ -595,11 +595,14 @@
justify-content: flex-end; justify-content: flex-end;
padding: 4px; padding: 4px;
>button { >.button {
box-sizing: border-box; box-sizing: border-box;
padding-inline: 6px;
text-align: center;
margin-right: 10px; margin-right: 10px;
min-width: 40px; min-width: 40px;
height: var(--filter-line-height); height: var(--filter-line-height);
line-height: var(--filter-line-height);
border: none; border: none;
background-color: transparent; background-color: transparent;
cursor: pointer; cursor: pointer;
@ -625,8 +628,10 @@
white-space: nowrap; white-space: nowrap;
overflow: hidden; overflow: hidden;
>button { >.button {
margin-right: 6px; margin-right: 6px;
padding-inline: 6px;
text-align: center;
border: none; border: none;
line-height: 28px; line-height: 28px;
color: var(--title-color); color: var(--title-color);
@ -634,6 +639,7 @@
padding: 0 10px; padding: 0 10px;
box-sizing: border-box; box-sizing: border-box;
height: 28px; height: 28px;
line-height: 28px;
cursor: pointer; cursor: pointer;
user-select: none; user-select: none;
background-color: var(--title-bg-color); background-color: var(--title-bg-color);

39
lib/ui/grid/grid.js
View File

@ -1558,8 +1558,9 @@ export class Grid {
/** /**
* 根据当前排序字段进行列排序 * 根据当前排序字段进行列排序
* @param {boolean} [reload] - 为 `true` 则在列排序后调用 [reload]{@linkcode Grid#reload} 方法 * @param {boolean} [reload] - 为 `true` 则在列排序后调用 [reload]{@linkcode Grid#reload} 方法
* @param {boolean} [keep] - 重载后是否保持当前滚动位置
*/ */
sortColumn(reload) { sortColumn(reload, keep) {
const index = this.sortIndex; const index = this.sortIndex;
const col = this.columns[index]; const col = this.columns[index];
if (col == null) { if (col == null) {
@ -1587,7 +1588,7 @@ export class Grid {
return; return;
} }
if (reload) { if (reload) {
this.reload(); this.reload(keep);
} else { } else {
this.refresh(); this.refresh();
} }
@ -1596,8 +1597,9 @@ export class Grid {
/** /**
* 根据当前排序列数组进行多列排序 * 根据当前排序列数组进行多列排序
* @param {boolean} [reload] - 为 `true` 则在多列排序后调用 [reload]{@linkcode Grid#reload} 方法 * @param {boolean} [reload] - 为 `true` 则在多列排序后调用 [reload]{@linkcode Grid#reload} 方法
* @param {boolean} [keep] - 重载后是否保持当前滚动位置
*/ */
sort(reload) { sort(reload, keep) {
const sortArray = this.sortArray; const sortArray = this.sortArray;
if (sortArray == null || sortArray.length === 0) { if (sortArray == null || sortArray.length === 0) {
return; return;
@ -1624,7 +1626,7 @@ export class Grid {
return; return;
} }
if (reload) { if (reload) {
this.reload(); this.reload(keep);
} else { } else {
this.refresh(); this.refresh();
} }
@ -1674,7 +1676,7 @@ export class Grid {
rowChanged(index); rowChanged(index);
} }
buttonWrapper.append( buttonWrapper.append(
createElement('button', null, createElement('span', 'button',
createIcon('fa-light', 'plus'), createIcon('fa-light', 'plus'),
createElement('span', span => { createElement('span', span => {
span.innerText = this.langs.addLevel; 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'), createIcon('fa-light', 'times'),
createElement('span', span => { createElement('span', span => {
span.innerText = this.langs.deleteLevel; 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'), createIcon('fa-light', 'copy'),
createElement('span', span => { createElement('span', span => {
span.innerText = this.langs.copyLevel; span.innerText = this.langs.copyLevel;
@ -1728,8 +1730,8 @@ export class Grid {
}); });
}) })
), ),
createElement('button', button => { createElement('span', button => {
button.className = 'ui-button-move-up'; button.className = 'button ui-button-move-up';
const icon = createIcon('fa-light', 'chevron-up'); const icon = createIcon('fa-light', 'chevron-up');
icon.addEventListener('click', () => { icon.addEventListener('click', () => {
const index = grid.selectedIndex; const index = grid.selectedIndex;
@ -1746,8 +1748,8 @@ export class Grid {
}); });
button.appendChild(icon); button.appendChild(icon);
}), }),
createElement('button', button => { createElement('span', button => {
button.className = 'ui-button-move-down'; button.className = 'button ui-button-move-down';
const icon = createIcon('fa-light', 'chevron-down'); const icon = createIcon('fa-light', 'chevron-down');
icon.addEventListener('click', () => { icon.addEventListener('click', () => {
const index = grid.selectedIndex; const index = grid.selectedIndex;
@ -2081,9 +2083,10 @@ export class Grid {
/** /**
* @private * @private
* @param {GridItemWrapper[]} list * @param {GridItemWrapper[]} [list]
*/ */
_refreshSource(list) { _refreshSource(list) {
const keep = list == null;
list ??= this._var.source; list ??= this._var.source;
if (this._var.colAttrs.__filtered === true) { if (this._var.colAttrs.__filtered === true) {
this._var.currentSource = list.filter(it => { this._var.currentSource = list.filter(it => {
@ -2114,11 +2117,11 @@ export class Grid {
this.resize(true, false, () => { this.resize(true, false, () => {
if (this.sortIndex >= 0) { if (this.sortIndex >= 0) {
this.sortColumn(true); this.sortColumn(true, keep);
} else if (this.sortArray?.length > 0) { } else if (this.sortArray?.length > 0) {
this.sort(true); this.sort(true, keep);
} else { } else {
this.reload(); this.reload(keep);
} }
}); });
} }
@ -3276,7 +3279,8 @@ export class Grid {
// function // function
const functions = createElement('div', 'filter-function'); const functions = createElement('div', 'filter-function');
functions.append( functions.append(
createElement('button', ok => { createElement('span', ok => {
ok.className = 'button';
ok.innerText = this.langs.ok; ok.innerText = this.langs.ok;
ok.addEventListener('click', () => { ok.addEventListener('click', () => {
const array = this._get(col.key, 'filterSource').filter(i => i.__checked !== false); const array = this._get(col.key, 'filterSource').filter(i => i.__checked !== false);
@ -3300,7 +3304,8 @@ export class Grid {
this._onCloseFilter(); this._onCloseFilter();
}); });
}), }),
createElement('button', reset => { createElement('span', reset => {
reset.className = 'button';
reset.innerText = this.langs.reset; reset.innerText = this.langs.reset;
reset.addEventListener('click', () => { reset.addEventListener('click', () => {
delete col.filterValues; delete col.filterValues;