vertumnus/primevue-mirror
1
0
Fork 0
mirror of https://github.com/primefaces/primevue.git synced 2025-05-09 17:02:38 +00:00
Code Issues Projects Releases Packages Wiki Activity

Fixed #4723 - DataTable: #loading templates broken with lazy virtual scroller

Browse source
This commit is contained in:
mertsincan 2023-12-20 13:07:52 +00:00
parent d56461080c
commit 5663e4e879
2 changed files with 73 additions and 67 deletions
Download patch file Download diff file Expand all files Collapse all files

8
components/lib/virtualscroller/VirtualScroller.vue
View file

@ -83,8 +83,10 @@ export default {
numToleratedItems(newValue) {
this.d_numToleratedItems = newValue;
},
loading(newValue) {
loading(newValue, oldValue) {
if (this.lazy && newValue !== oldValue && newValue !== this.d_loading) {
this.d_loading = newValue;
}
},
items(newValue, oldValue) {
if (!oldValue || oldValue.length !== (newValue || []).length) {
@ -506,11 +508,12 @@ export default {
onScroll(event) {
this.$emit('scroll', event);
if (this.delay && this.isPageChanged()) {
if (this.delay) {
if (this.scrollTimeout) {
clearTimeout(this.scrollTimeout);
}
if (this.isPageChanged()) {
if (!this.d_loading && this.showLoader) {
const { isRangeChanged } = this.onScrollPositionChange(event);
const changed = isRangeChanged || (this.step ? this.isPageChanged() : false);
@ -526,6 +529,7 @@ export default {
this.page = this.getPageByFirst();
}
}, this.delay);
}
} else {
this.onScrollChange(event);
}

38
components/lib/virtualscroller/style/VirtualScrollerStyle.js
View file

@ -1,16 +1,17 @@
import BaseStyle from 'primevue/base/style';
const css = `
.p-virtualscroller {
@layer primevue {
.p-virtualscroller {
position: relative;
overflow: auto;
contain: strict;
transform: translateZ(0);
will-change: scroll-position;
outline: 0 none;
}
}
.p-virtualscroller-content {
.p-virtualscroller-content {
position: absolute;
top: 0;
left: 0;
@ -18,9 +19,9 @@ const css = `
min-height: 100%;
min-width: 100%;
will-change: transform;
}
}
.p-virtualscroller-spacer {
.p-virtualscroller-spacer {
position: absolute;
top: 0;
left: 0;
@ -28,38 +29,39 @@ const css = `
width: 1px;
transform-origin: 0 0;
pointer-events: none;
}
}
.p-virtualscroller .p-virtualscroller-loader {
.p-virtualscroller .p-virtualscroller-loader {
position: sticky;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
}
.p-virtualscroller-loader.p-component-overlay {
.p-virtualscroller-loader.p-component-overlay {
display: flex;
align-items: center;
justify-content: center;
}
}
.p-virtualscroller-loading-icon {
.p-virtualscroller-loading-icon {
font-size: 2rem;
}
}
.p-virtualscroller-loading-icon.p-icon {
.p-virtualscroller-loading-icon.p-icon {
width: 2rem;
height: 2rem;
}
}
.p-virtualscroller-horizontal > .p-virtualscroller-content {
.p-virtualscroller-horizontal > .p-virtualscroller-content {
display: flex;
}
}
/* Inline */
.p-virtualscroller-inline .p-virtualscroller-content {
/* Inline */
.p-virtualscroller-inline .p-virtualscroller-content {
position: static;
}
}
`;