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

Refactor on Dropdown doc

pull/1453/head
mertsincan 2021-08-16 11:50:57 +03:00
parent d128063d59
commit 076d06773d
2 changed files with 107 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
api-generator/components/dropdown.js
View File

@ -154,6 +154,12 @@ const DividerProps = [
type: "string",
default: "pi pi-spinner pi-spin",
description: "Icon to display in loading state."
},
{
name: "virtualScrollerOptions",
type: "object",
default: "null",
description: "Whether to use the virtualScroller feature. The properties of VirtualScroller component can be used like an object in it."
}
];

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

@ -287,6 +287,12 @@ export default {
<td>string</td>
<td>pi pi-spinner pi-spin</td>
<td>Icon to display in loading state.</td>
</tr>
<tr>
<td>virtualScrollerOptions</td>
<td>object</td>
<td>null</td>
<td>Whether to use the virtualScroller feature. The properties of <router-link to="/virtualscroller">VirtualScroller</router-link> component can be used like an object in it.</td>
</tr>
</tbody>
</table>
@ -533,6 +539,18 @@ export default {
<h5>Loading State</h5>
<Dropdown placeholder="Loading..." loading></Dropdown>
<h5>Virtual Scroll (100000 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>
<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" >
<Skeleton :width="options.even ? '60%' : '50%'" height="1rem" />
</div>
</template>
</Dropdown>
</div>
</template>
@ -544,6 +562,9 @@ export default {
selectedCity2: null,
selectedCountry: null,
selectedGroupedCity: null,
selectedItem1: null,
selectedItem2: null,
loading: false,
cities: [
{name: 'New York', code: 'NY'},
{name: 'Rome', code: 'RM'},
@ -589,9 +610,34 @@ export default {
{label: 'Tokyo', value: 'Tokyo'},
{label: 'Yokohama', value: 'Yokohama'}
]
}]
}],
items: Array.from({ length: 100000 }, (_, i) => ({ label: \`Item #\${i}\`, value: i })),
lazyItems: Array.from({ length: 100000 })
}
},
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 lazyItems = [...this.lazyItems];
for (let i = first; i < last; i++) {
lazyItems[i] = { label: \`Item #\${i}\`, value: i };
}
this.lazyItems = lazyItems;
this.loading = false;
}, Math.random() * 1000 + 250);
}
},
}
<\\/script>
@ -650,6 +696,18 @@ export default {
<h5>Loading State</h5>
<Dropdown placeholder="Loading..." loading></Dropdown>
<h5>Virtual Scroll (100000 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>
<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" >
<Skeleton :width="options.even ? '60%' : '50%'" height="1rem" />
</div>
</template>
</Dropdown>
</div>
</template>
@ -662,6 +720,9 @@ export default {
const selectedCity2 = ref();
const selectedCountry = ref();
const selectedGroupedCity = ref();
const selectedItem1 = ref();
const selectedItem2 = ref();
const loading = ref(false);
const cities = ref([
{name: 'New York', code: 'NY'},
{name: 'Rome', code: 'RM'},
@ -711,7 +772,33 @@ export default {
}
]);
return { selectedCity1, selectedCity2, selectedCountry, selectedGroupedCity, cities, countries, groupedCities}
const items = ref(Array.from({ length: 100000 }, (_, i) => ({ label: \`Item #\${i}\`, value: i })));
const lazyItems = ref(Array.from({ length: 100000 }));
return { selectedCity1, selectedCity2, selectedCountry, selectedGroupedCity, cities, countries, groupedCities, selectedItem1, selectedItem2, loading, items, lazyItems}
},
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 lazyItems = [...this.lazyItems];
for (let i = first; i < last; i++) {
lazyItems[i] = { label: \`Item #\${i}\`, value: i };
}
this.lazyItems = lazyItems;
this.loading = false;
}, Math.random() * 1000 + 250);
}
}
}
<\\/script>