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

Refactor on virtual scroll demo

pull/1994/head
mertsincan 2021-08-17 12:46:20 +03:00
parent 4cfa62f29e
commit 0823bee377
6 changed files with 24 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/views/autocomplete/AutoCompleteDemo.vue
View File

@ -33,7 +33,7 @@
</template>
</AutoComplete>
<h5>Virtual Scroll (100000 Items)</h5>
<h5>Virtual Scroll (1000 Items)</h5>
<AutoComplete v-model="selectedItem" :suggestions="filteredItems" @complete="searchItems" :virtualScrollerOptions="{ itemSize: 31 }" field="label" dropdown />
<h5>Multiple</h5>
@ -91,7 +91,7 @@ export default {
{label: 'Yokohama', value: 'Yokohama'}
]
}],
items: Array.from({ length: 100000 }, (_, i) => ({ label: `Item #${i}`, value: i }))
items: Array.from({ length: 1000 }, (_, i) => ({ label: `Item #${i}`, value: i }))
}
},
countryService: null,

8
src/views/autocomplete/AutoCompleteDoc.vue
View File

@ -434,7 +434,7 @@ export default {
</template>
</AutoComplete>
<h5>Virtual Scroll (100000 Items)</h5>
<h5>Virtual Scroll (1000 Items)</h5>
<AutoComplete v-model="selectedItem" :suggestions="filteredItems" @complete="searchItems" :virtualScrollerOptions="{ itemSize: 31 }" field="label" dropdown />
<h5>Multiple</h5>
@ -488,7 +488,7 @@ export default {
{label: 'Yokohama', value: 'Yokohama'}
]
}],
items: Array.from({ length: 100000 }, (_, i) => ({ label: \`Item #\${i}\`, value: i }))
items: Array.from({ length: 1000 }, (_, i) => ({ label: \`Item #\${i}\`, value: i }))
}
},
countryService: null,
@ -571,7 +571,7 @@ export default {
</template>
</AutoComplete>
<h5>Virtual Scroll (100000 Items)</h5>
<h5>Virtual Scroll (1000 Items)</h5>
<AutoComplete v-model="selectedItem" :suggestions="filteredItems" @complete="searchItems" :virtualScrollerOptions="{ itemSize: 31 }" field="label" dropdown />
<h5>Multiple</h5>
@ -630,7 +630,7 @@ export default {
{label: 'Yokohama', value: 'Yokohama'}
]
}]);
const items = Array.from({ length: 100000 }, (_, i) => ({ label: \`Item #\${i}\`, value: i }));
const items = Array.from({ length: 1000 }, (_, i) => ({ label: \`Item #\${i}\`, value: i }));
const searchCountry = (event) => {
setTimeout(() => {

8
src/views/dropdown/DropdownDemo.vue
View File

@ -48,10 +48,10 @@
<h5>Loading State</h5>
<Dropdown placeholder="Loading..." loading></Dropdown>
<h5>Virtual Scroll (100000 Items)</h5>
<h5>Virtual Scroll (1000 Items)</h5>
<Dropdown v-model="selectedItem1" :options="items" optionLabel="label" optionValue="value" :virtualScrollerOptions="{ itemSize: 31 }" placeholder="Select Item"></Dropdown>
<h5>Virtual Scroll (100000 Items) and Lazy</h5>
<h5>Virtual Scroll (1000 Items) and Lazy</h5>
<Dropdown v-model="selectedItem2" :options="lazyItems" optionLabel="label" optionValue="value" :virtualScrollerOptions="{ lazy: true, onLazyLoad: onLazyLoad, itemSize: 31, showLoader: true, loading: loading, delay: 250 }" placeholder="Select Item">
<template v-slot:loader="{ options }">
<div class="p-d-flex p-ai-center p-p-2" style="height: 31px" >
@ -125,8 +125,8 @@ export default {
{label: 'Yokohama', value: 'Yokohama'}
]
}],
items: Array.from({ length: 100000 }, (_, i) => ({ label: `Item #${i}`, value: i })),
lazyItems: Array.from({ length: 100000 })
items: Array.from({ length: 1000 }, (_, i) => ({ label: `Item #${i}`, value: i })),
lazyItems: Array.from({ length: 1000 })
}
},
loadLazyTimeout: null,

16
src/views/dropdown/DropdownDoc.vue
View File

@ -540,10 +540,10 @@ export default {
<h5>Loading State</h5>
<Dropdown placeholder="Loading..." loading></Dropdown>
<h5>Virtual Scroll (100000 Items)</h5>
<h5>Virtual Scroll (1000 Items)</h5>
<Dropdown v-model="selectedItem1" :options="items" optionLabel="label" optionValue="value" :virtualScrollerOptions="{ itemSize: 31 }" placeholder="Select Item"></Dropdown>
<h5>Virtual Scroll (100000 Items) and Lazy</h5>
<h5>Virtual Scroll (1000 Items) and Lazy</h5>
<Dropdown v-model="selectedItem2" :options="lazyItems" optionLabel="label" optionValue="value" :virtualScrollerOptions="{ lazy: true, onLazyLoad: onLazyLoad, itemSize: 31, showLoader: true, loading: loading, delay: 250 }" placeholder="Select Item">
<template v-slot:loader="{ options }">
<div class="p-d-flex p-ai-center p-p-2" style="height: 31px" >
@ -611,8 +611,8 @@ export default {
{label: 'Yokohama', value: 'Yokohama'}
]
}],
items: Array.from({ length: 100000 }, (_, i) => ({ label: \`Item #\${i}\`, value: i })),
lazyItems: Array.from({ length: 100000 })
items: Array.from({ length: 1000 }, (_, i) => ({ label: \`Item #\${i}\`, value: i })),
lazyItems: Array.from({ length: 1000 })
}
},
loadLazyTimeout: null,
@ -697,10 +697,10 @@ export default {
<h5>Loading State</h5>
<Dropdown placeholder="Loading..." loading></Dropdown>
<h5>Virtual Scroll (100000 Items)</h5>
<h5>Virtual Scroll (1000 Items)</h5>
<Dropdown v-model="selectedItem1" :options="items" optionLabel="label" optionValue="value" :virtualScrollerOptions="{ itemSize: 31 }" placeholder="Select Item"></Dropdown>
<h5>Virtual Scroll (100000 Items) and Lazy</h5>
<h5>Virtual Scroll (1000 Items) and Lazy</h5>
<Dropdown v-model="selectedItem2" :options="lazyItems" optionLabel="label" optionValue="value" :virtualScrollerOptions="{ lazy: true, onLazyLoad: onLazyLoad, itemSize: 31, showLoader: true, loading: loading, delay: 250 }" placeholder="Select Item">
<template v-slot:loader="{ options }">
<div class="p-d-flex p-ai-center p-p-2" style="height: 31px" >
@ -772,8 +772,8 @@ export default {
}
]);
const items = ref(Array.from({ length: 100000 }, (_, i) => ({ label: \`Item #\${i}\`, value: i })));
const lazyItems = ref(Array.from({ length: 100000 }));
const items = ref(Array.from({ length: 1000 }, (_, i) => ({ label: \`Item #\${i}\`, value: i })));
const lazyItems = ref(Array.from({ length: 1000 }));
return { selectedCity1, selectedCity2, selectedCountry, selectedGroupedCity, cities, countries, groupedCities, selectedItem1, selectedItem2, loading, items, lazyItems}
},

4
src/views/listbox/ListboxDemo.vue
View File

@ -33,7 +33,7 @@
</template>
</Listbox>
<h5>Virtual Scroll (100000 Items)</h5>
<h5>Virtual Scroll (1000 Items)</h5>
<Listbox v-model="selectedItem" :options="items" optionLabel="label" optionValue="value" :virtualScrollerOptions="{ itemSize: 31 }" style="width:15rem" listStyle="height:250px" />
</div>
</div>
@ -98,7 +98,7 @@ export default {
{label: 'Yokohama', value: 'Yokohama'}
]
}],
items: Array.from({ length: 100000 }, (_, i) => ({ label: `Item #${i}`, value: i }))
items: Array.from({ length: 1000 }, (_, i) => ({ label: `Item #${i}`, value: i }))
}
},
components: {

8
src/views/listbox/ListboxDoc.vue
View File

@ -388,7 +388,7 @@ export default {
</template>
</Listbox>
<h5>Virtual Scroll (100000 Items)</h5>
<h5>Virtual Scroll (1000 Items)</h5>
<Listbox v-model="selectedItem" :options="items" optionLabel="label" optionValue="value" :virtualScrollerOptions="{ itemSize: 31 }" style="width:15rem" listStyle="height:250px" />
</div>
</template>
@ -447,7 +447,7 @@ export default {
{label: 'Yokohama', value: 'Yokohama'}
]
}],
items: Array.from({ length: 100000 }, (_, i) => ({ label: \`Item #\${i}\`, value: i }))
items: Array.from({ length: 1000 }, (_, i) => ({ label: \`Item #\${i}\`, value: i }))
}
}
}
@ -482,7 +482,7 @@ export default {
</template>
</Listbox>
<h5>Virtual Scroll (100000 Items)</h5>
<h5>Virtual Scroll (1000 Items)</h5>
<Listbox v-model="selectedItem" :options="items" optionLabel="label" optionValue="value" :virtualScrollerOptions="{ itemSize: 31 }" style="width:15rem" listStyle="height:250px" />
</div>
</template>
@ -545,7 +545,7 @@ export default {
}
]);
const items = ref(Array.from({ length: 100000 }, (_, i) => ({ label: \`Item #\${i}\`, value: i })));
const items = ref(Array.from({ length: 1000 }, (_, i) => ({ label: \`Item #\${i}\`, value: i })));
return { selectedCity, selectedCountries, selectedGroupedCity, cities, countries, groupedCities, items, selectedItem }
}