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

Showcase updates

Browse source
This commit is contained in:
tugcekucukoglu 2024-04-18 17:22:30 +03:00
parent fcf8599cfa
commit b2ec54e364
134 changed files with 6160 additions and 1238 deletions
Download patch file Download diff file Expand all files Collapse all files

136
doc/dropdown/LazyVirtualScrollDoc.vue
View file

@ -1,136 +0,0 @@
<template>
<DocSectionText v-bind="$attrs" />
<div class="card flex justify-content-center">
<Dropdown
v-model="selectedItem"
:options="items"
optionLabel="label"
optionValue="value"
:virtualScrollerOptions="{ lazy: true, onLazyLoad: onLazyLoad, itemSize: 38, showLoader: true, loading: loading, delay: 250 }"
placeholder="Select Item"
class="w-full md:w-14rem"
/>
</div>
<DocSectionCode :code="code" />
</template>
<script>
export default {
data() {
return {
selectedItem: null,
items: Array.from({ length: 100000 }),
loading: false,
code: {
basic: `
<Dropdown v-model="selectedItem" :options="items" optionLabel="label" optionValue="value" class="w-full md:w-14rem"
:virtualScrollerOptions="{ lazy: true, onLazyLoad: onLazyLoad, itemSize: 38, showLoader: true, loading: loading, delay: 250 }" placeholder="Select Item" />
`,
options: `
<template>
<div class="card flex justify-content-center">
<Dropdown v-model="selectedItem" :options="items" optionLabel="label" optionValue="value" class="w-full md:w-14rem"
:virtualScrollerOptions="{ lazy: true, onLazyLoad: onLazyLoad, itemSize: 38, showLoader: true, loading: loading, delay: 250 }" placeholder="Select Item" />
</div>
</template>
<script>
export default {
data() {
return {
selectedItem: null,
items: Array.from({ length: 100000 }),
loading: false
};
},
loadLazyTimeout: null,
methods: {
onLazyLoad(event) {
this.loading = true;
if (this.loadLazyTimeout) {
clearTimeout(this.loadLazyTimeout);
}
//imitate delay of a backend call
this.loadLazyTimeout = setTimeout(() => {
const { first, last } = event;
const _items = [...this.items];
for (let i = first; i < last; i++) {
_items[i] = { label: \`Item #\${i}\`, value: i };
}
this.items = _items;
this.loading = false;
}, Math.random() * 1000 + 250);
}
}
};
<\/script>
`,
composition: `
<template>
<div class="card flex justify-content-center">
<Dropdown v-model="selectedItem" :options="items" optionLabel="label" optionValue="value" class="w-full md:w-14rem"
:virtualScrollerOptions="{ lazy: true, onLazyLoad: onLazyLoad, itemSize: 38, showLoader: true, loading: loading, delay: 250 }" placeholder="Select Item" />
</div>
</template>
<script setup>
import { ref } from "vue";
const selectedItem = ref();
const items = ref(Array.from({ length: 100000 }));
const loading = ref(false);
const loadLazyTimeout = ref();
const onLazyLoad = (event) => {
loading.value = true;
if (loadLazyTimeout.value) {
clearTimeout(loadLazyTimeout.value);
}
//imitate delay of a backend call
loadLazyTimeout.value = setTimeout(() => {
const { first, last } = event;
const _items = [...items.value];
for (let i = first; i < last; i++) {
_items[i] = { label: \`Item #\${i}\`, value: i };
}
items.value = _items;
loading.value = false;
}, Math.random() * 1000 + 250);
}
<\/script>
`
}
};
},
loadLazyTimeout: null,
methods: {
onLazyLoad(event) {
this.loading = true;
if (this.loadLazyTimeout) {
clearTimeout(this.loadLazyTimeout);
}
//imitate delay of a backend call
this.loadLazyTimeout = setTimeout(() => {
const { first, last } = event;
const items = [...this.items];
for (let i = first; i < last; i++) {
items[i] = { label: `Item #${i}`, value: i };
}
this.items = items;
this.loading = false;
}, Math.random() * 1000 + 250);
}
}
};
</script>