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

Merge branch 'master' of https://github.com/primefaces/primevue

pull/1533/head
Cagatay Civici 2021-08-31 10:44:09 +03:00
parent 945880e99a bc19f7f587
commit 928e98034e
1 changed files with 22 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

50
src/views/virtualscroller/VirtualScrollerDoc.vue
View File

@ -2,7 +2,7 @@
<AppDoc name="VirtualScrollerDemo" :sources="sources" github="virtualscroller/VirtualScrollerDemo.vue"> <AppDoc name="VirtualScrollerDemo" :sources="sources" github="virtualscroller/VirtualScrollerDemo.vue">
<h5>Imports</h5> <h5>Imports</h5>
<pre v-code.script><code> <pre v-code.script><code>
import VirtualScroller from 'primevue/virtualscroller'; import VirtualScroller from 'primevue/virtualscroller';
</code></pre> </code></pre>
@ -11,7 +11,7 @@ import VirtualScroller from 'primevue/virtualscroller';
The <i>item</i> and <i>itemSize</i> properties and <i>item</i> template are required on component. In addition, an initial array is required based on the total number of items to display.<br /> The <i>item</i> and <i>itemSize</i> properties and <i>item</i> template are required on component. In addition, an initial array is required based on the total number of items to display.<br />
VirtualScroller automatically calculates how many items will be displayed in the view according to <i>itemSize</i> using a specified scroll height. Its scroll height can be adjusted with <i>scrollHeight</i> VirtualScroller automatically calculates how many items will be displayed in the view according to <i>itemSize</i> using a specified scroll height. Its scroll height can be adjusted with <i>scrollHeight</i>
property or height property of CSS.</p> property or height property of CSS.</p>
<pre v-code><code><template v-pre> <pre v-code><code><template v-pre>
&lt;VirtualScroller :items="basicItems" :itemSize="50"&gt; &lt;VirtualScroller :items="basicItems" :itemSize="50"&gt;
&lt;template v-slot:item="{ item, options }"&gt; &lt;template v-slot:item="{ item, options }"&gt;
@ -84,12 +84,12 @@ export default {
if (this.loadLazyTimeout) { if (this.loadLazyTimeout) {
clearTimeout(this.loadLazyTimeout); clearTimeout(this.loadLazyTimeout);
} }
//imitate delay of a backend call //imitate delay of a backend call
this.loadLazyTimeout = setTimeout(() => { this.loadLazyTimeout = setTimeout(() => {
const { first, last } = event; const { first, last } = event;
const lazyItems = [...this.lazyItems]; const lazyItems = [...this.lazyItems];
for (let i = first; i &lt; last; i++) { for (let i = first; i &lt; last; i++) {
lazyItems[i] = `Item #${i}`; lazyItems[i] = `Item #${i}`;
} }
@ -334,7 +334,7 @@ export default {
<script> <script>
export default { export default {
data() { data() {
return { return {
sources: { sources: {
'options-api': { 'options-api': {
tabName: 'Options API Source', tabName: 'Options API Source',
@ -373,7 +373,7 @@ export default {
</div> </div>
</template> </template>
</VirtualScroller> </VirtualScroller>
</div> </div>
</div> </div>
</div> </div>
@ -507,12 +507,12 @@ export default {
if (this.loadLazyTimeout) { if (this.loadLazyTimeout) {
clearTimeout(this.loadLazyTimeout); clearTimeout(this.loadLazyTimeout);
} }
//imitate delay of a backend call //imitate delay of a backend call
this.loadLazyTimeout = setTimeout(() => { this.loadLazyTimeout = setTimeout(() => {
const { first, last } = event; const { first, last } = event;
const lazyItems = [...this.lazyItems]; const lazyItems = [...this.lazyItems];
for (let i = first; i < last; i++) { for (let i = first; i < last; i++) {
lazyItems[i] = \`Item #\${i}\`; lazyItems[i] = \`Item #\${i}\`;
} }
@ -554,7 +554,7 @@ export default {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
} }
.scroll-item { .scroll-item {
writing-mode: vertical-lr; writing-mode: vertical-lr;
} }
@ -569,7 +569,7 @@ export default {
` `
}, },
'composition-api': { 'composition-api': {
tabName: 'Composition API Source', tabName: 'Composition API Source',
content: ` content: `
<template> <template>
<div class="virtualscroller-demo"> <div class="virtualscroller-demo">
@ -605,7 +605,7 @@ export default {
</div> </div>
</template> </template>
</VirtualScroller> </VirtualScroller>
</div> </div>
</div> </div>
</div> </div>
@ -721,15 +721,9 @@ import { ref, onMounted } from 'vue';
export default { export default {
setup() { setup() {
onMounted(() => { const basicItems = ref(Array.from({ length: 100000 }).map((_, i) => \`Item #\${i}\`));
basicItems.value = Array.from({ length: 100000 }).map((_, i) => \`Item #\${i}\`); const multiItems = ref(Array.from({ length: 1000 }).map((_, i) => Array.from({ length: 1000 }).map((_j, j) => \`Item #\${i}_\${j}\`)));
multiItems.value = Array.from({ length: 1000 }).map((_, i) => Array.from({ length: 1000 }).map((_j, j) => \`Item #\${i}_\${j}\`)); const lazyItems = ref(Array.from({ length: 10000 }));
lazyItems.value = Array.from({ length: 10000 });
})
const basicItems = ref(null);
const multiItems = ref(null);
const lazyItems = ref(null);
const lazyLoading = ref(false); const lazyLoading = ref(false);
const loadLazyTimeout = ref(null); const loadLazyTimeout = ref(null);
@ -739,17 +733,17 @@ export default {
if (loadLazyTimeout.value) { if (loadLazyTimeout.value) {
clearTimeout(loadLazyTimeout.value); clearTimeout(loadLazyTimeout.value);
} }
//imitate delay of a backend call //imitate delay of a backend call
loadLazyTimeout.value = setTimeout(() => { loadLazyTimeout.value = setTimeout(() => {
const { first, last } = event; const { first, last } = event;
const lazyItems = [...lazyItems.value]; const _lazyItems = [...lazyItems.value];
for (let i = first; i < last; i++) { for (let i = first; i < last; i++) {
lazyItems[i] = \`Item #\${i}\`; _lazyItems[i] = \`Item #\${i}\`;
} }
lazyItems.value = lazyItems; lazyItems.value = _lazyItems;
lazyLoading.value = false; lazyLoading.value = false;
}, Math.random() * 1000 + 250); }, Math.random() * 1000 + 250);
@ -758,7 +752,7 @@ export default {
return { basicItems, multiItems, lazyItems, lazyLoading, onLazyLoad } return { basicItems, multiItems, lazyItems, lazyLoading, onLazyLoad }
}, },
methods: { methods: {
} }
} }
<\\/script> <\\/script>
@ -791,7 +785,7 @@ export default {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
} }
.scroll-item { .scroll-item {
writing-mode: vertical-lr; writing-mode: vertical-lr;
} }
@ -808,4 +802,4 @@ export default {
} }
} }
} }
</script> </script>