vertumnus
/
primevue-mirror
mirror of https://github.com/primefaces/primevue.git
1
0
Fork 0
Code Packages Releases Activity

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

pull/4992/head
mertsincan 2023-12-20 13:07:52 +00:00
parent d56461080c
commit 5663e4e879
2 changed files with 73 additions and 67 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

36
components/lib/virtualscroller/VirtualScroller.vue
View File

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

104
components/lib/virtualscroller/style/VirtualScrollerStyle.js
View File

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