Refactor on Dropdown doc
mertsincan
parent
d128063d59
commit
076d06773d
|
|
@ -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."
|
||||
}
|
||||
];
|
||||
|
||||
|
|
|
|||
|
|
@ -40,7 +40,7 @@ export default {
|
|||
return {
|
||||
selectedGroupedCity: null,
|
||||
groupedCities: [{
|
||||
label: 'Germany', code: 'DE',
|
||||
label: 'Germany', code: 'DE',
|
||||
items: [
|
||||
{label: 'Berlin', value: 'Berlin'},
|
||||
{label: 'Frankfurt', value: 'Frankfurt'},
|
||||
|
|
@ -49,7 +49,7 @@ export default {
|
|||
]
|
||||
},
|
||||
{
|
||||
label: 'USA', code: 'US',
|
||||
label: 'USA', code: 'US',
|
||||
items: [
|
||||
{label: 'Chicago', value: 'Chicago'},
|
||||
{label: 'Los Angeles', value: 'Los Angeles'},
|
||||
|
|
@ -58,7 +58,7 @@ export default {
|
|||
]
|
||||
},
|
||||
{
|
||||
label: 'Japan', code: 'JP',
|
||||
label: 'Japan', code: 'JP',
|
||||
items: [
|
||||
{label: 'Kyoto', value: 'Kyoto'},
|
||||
{label: 'Osaka', value: 'Osaka'},
|
||||
|
|
@ -72,7 +72,7 @@ export default {
|
|||
</code></pre>
|
||||
|
||||
<pre v-code><code><template v-pre>
|
||||
<Dropdown v-model="selectedGroupedCity" :options="groupedCities"
|
||||
<Dropdown v-model="selectedGroupedCity" :options="groupedCities"
|
||||
optionLabel="label" optionGroupLabel="label" optionGroupChildren="items">
|
||||
</Dropdown>
|
||||
</template>
|
||||
|
|
@ -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'},
|
||||
|
|
@ -564,7 +585,7 @@ export default {
|
|||
{name: 'United States', code: 'US'}
|
||||
],
|
||||
groupedCities: [{
|
||||
label: 'Germany', code: 'DE',
|
||||
label: 'Germany', code: 'DE',
|
||||
items: [
|
||||
{label: 'Berlin', value: 'Berlin'},
|
||||
{label: 'Frankfurt', value: 'Frankfurt'},
|
||||
|
|
@ -573,7 +594,7 @@ export default {
|
|||
]
|
||||
},
|
||||
{
|
||||
label: 'USA', code: 'US',
|
||||
label: 'USA', code: 'US',
|
||||
items: [
|
||||
{label: 'Chicago', value: 'Chicago'},
|
||||
{label: 'Los Angeles', value: 'Los Angeles'},
|
||||
|
|
@ -582,16 +603,41 @@ export default {
|
|||
]
|
||||
},
|
||||
{
|
||||
label: 'Japan', code: 'JP',
|
||||
label: 'Japan', code: 'JP',
|
||||
items: [
|
||||
{label: 'Kyoto', value: 'Kyoto'},
|
||||
{label: 'Osaka', value: 'Osaka'},
|
||||
{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'},
|
||||
|
|
@ -683,7 +744,7 @@ export default {
|
|||
]);
|
||||
const groupedCities = ref([
|
||||
{
|
||||
label: 'Germany', code: 'DE',
|
||||
label: 'Germany', code: 'DE',
|
||||
items: [
|
||||
{label: 'Berlin', value: 'Berlin'},
|
||||
{label: 'Frankfurt', value: 'Frankfurt'},
|
||||
|
|
@ -692,7 +753,7 @@ export default {
|
|||
]
|
||||
},
|
||||
{
|
||||
label: 'USA', code: 'US',
|
||||
label: 'USA', code: 'US',
|
||||
items: [
|
||||
{label: 'Chicago', value: 'Chicago'},
|
||||
{label: 'Los Angeles', value: 'Los Angeles'},
|
||||
|
|
@ -701,7 +762,7 @@ export default {
|
|||
]
|
||||
},
|
||||
{
|
||||
label: 'Japan', code: 'JP',
|
||||
label: 'Japan', code: 'JP',
|
||||
items: [
|
||||
{label: 'Kyoto', value: 'Kyoto'},
|
||||
{label: 'Osaka', value: 'Osaka'},
|
||||
|
|
@ -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>
|
||||
|
|
@ -733,4 +820,4 @@ export default {
|
|||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
</script>
|
||||
|
|
|
|||
Loading…
Reference in New Issue