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) {
this.d_numToleratedItems = newValue;
},
loading(newValue) {
this.d_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,26 +508,28 @@ export default {
onScroll(event) {
this.$emit('scroll', event);
if (this.delay && this.isPageChanged()) {
if (this.delay) {
if (this.scrollTimeout) {
clearTimeout(this.scrollTimeout);
}
if (!this.d_loading && this.showLoader) {
const { isRangeChanged } = this.onScrollPositionChange(event);
const changed = isRangeChanged || (this.step ? this.isPageChanged() : false);
if (this.isPageChanged()) {
if (!this.d_loading && this.showLoader) {
const { isRangeChanged } = this.onScrollPositionChange(event);
const changed = isRangeChanged || (this.step ? this.isPageChanged() : false);
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();
changed && (this.d_loading = true);
}
}, 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 {
this.onScrollChange(event);
}

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

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