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

Update Listbox doc and demo

pull/1453/head
mertsincan 2021-08-16 13:48:49 +03:00
parent ba75e9c51c
commit 3c1bfd43dc
3 changed files with 46 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -147,6 +147,12 @@ const ListboxEvents = [
description: "Filter value" description: "Filter value"
} }
] ]
},
{
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."
} }
]; ];

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

@ -32,6 +32,9 @@
</div> </div>
</template> </template>
</Listbox> </Listbox>
<h5>Virtual Scroll (100000 Items)</h5>
<Listbox v-model="selectedItem" :options="items" optionLabel="label" optionValue="value" :virtualScrollerOptions="{ itemSize: 31 }" style="width:15rem" listStyle="height:250px" />
</div> </div>
</div> </div>
@ -48,6 +51,7 @@ export default {
selectedCity: null, selectedCity: null,
selectedCountries: null, selectedCountries: null,
selectedGroupedCity: null, selectedGroupedCity: null,
selectedItem: null,
cities: [ cities: [
{name: 'New York', code: 'NY'}, {name: 'New York', code: 'NY'},
{name: 'Rome', code: 'RM'}, {name: 'Rome', code: 'RM'},
@ -68,7 +72,7 @@ export default {
{name: 'United States', code: 'US'} {name: 'United States', code: 'US'}
], ],
groupedCities: [{ groupedCities: [{
label: 'Germany', code: 'DE', label: 'Germany', code: 'DE',
items: [ items: [
{label: 'Berlin', value: 'Berlin'}, {label: 'Berlin', value: 'Berlin'},
{label: 'Frankfurt', value: 'Frankfurt'}, {label: 'Frankfurt', value: 'Frankfurt'},
@ -77,7 +81,7 @@ export default {
] ]
}, },
{ {
label: 'USA', code: 'US', label: 'USA', code: 'US',
items: [ items: [
{label: 'Chicago', value: 'Chicago'}, {label: 'Chicago', value: 'Chicago'},
{label: 'Los Angeles', value: 'Los Angeles'}, {label: 'Los Angeles', value: 'Los Angeles'},
@ -86,18 +90,19 @@ export default {
] ]
}, },
{ {
label: 'Japan', code: 'JP', label: 'Japan', code: 'JP',
items: [ items: [
{label: 'Kyoto', value: 'Kyoto'}, {label: 'Kyoto', value: 'Kyoto'},
{label: 'Osaka', value: 'Osaka'}, {label: 'Osaka', value: 'Osaka'},
{label: 'Tokyo', value: 'Tokyo'}, {label: 'Tokyo', value: 'Tokyo'},
{label: 'Yokohama', value: 'Yokohama'} {label: 'Yokohama', value: 'Yokohama'}
] ]
}] }],
items: Array.from({ length: 100000 }, (_, i) => ({ label: `Item #${i}`, value: i }))
} }
}, },
components: { components: {
'ListboxDoc': ListboxDoc 'ListboxDoc': ListboxDoc
} }
} }
</script> </script>

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

@ -46,7 +46,7 @@ export default {
return { return {
selectedGroupedCity: null, selectedGroupedCity: null,
groupedCities: [{ groupedCities: [{
label: 'Germany', code: 'DE', label: 'Germany', code: 'DE',
items: [ items: [
{label: 'Berlin', value: 'Berlin'}, {label: 'Berlin', value: 'Berlin'},
{label: 'Frankfurt', value: 'Frankfurt'}, {label: 'Frankfurt', value: 'Frankfurt'},
@ -55,7 +55,7 @@ export default {
] ]
}, },
{ {
label: 'USA', code: 'US', label: 'USA', code: 'US',
items: [ items: [
{label: 'Chicago', value: 'Chicago'}, {label: 'Chicago', value: 'Chicago'},
{label: 'Los Angeles', value: 'Los Angeles'}, {label: 'Los Angeles', value: 'Los Angeles'},
@ -64,7 +64,7 @@ export default {
] ]
}, },
{ {
label: 'Japan', code: 'JP', label: 'Japan', code: 'JP',
items: [ items: [
{label: 'Kyoto', value: 'Kyoto'}, {label: 'Kyoto', value: 'Kyoto'},
{label: 'Osaka', value: 'Osaka'}, {label: 'Osaka', value: 'Osaka'},
@ -78,7 +78,7 @@ export default {
</code></pre> </code></pre>
<pre v-code><code><template v-pre> <pre v-code><code><template v-pre>
&lt;Listbox v-model="selectedGroupedCity" :options="groupedCities" &lt;Listbox v-model="selectedGroupedCity" :options="groupedCities"
optionLabel="label" optionGroupLabel="label" optionGroupChildren="items"&gt; optionLabel="label" optionGroupLabel="label" optionGroupChildren="items"&gt;
&lt;/Listbox&gt; &lt;/Listbox&gt;
</template> </template>
@ -235,6 +235,12 @@ export default {
<td>string</td> <td>string</td>
<td>No results found</td> <td>No results found</td>
<td>Text to display when there are no options available. Defaults to value from PrimeVue locale configuration.</td> <td>Text to display when there are no options available. Defaults to value from PrimeVue locale configuration.</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> </tr>
</tbody> </tbody>
</table> </table>
@ -381,6 +387,9 @@ export default {
</div> </div>
</template> </template>
</Listbox> </Listbox>
<h5>Virtual Scroll (100000 Items)</h5>
<Listbox v-model="selectedItem" :options="items" optionLabel="label" optionValue="value" :virtualScrollerOptions="{ itemSize: 31 }" style="width:15rem" listStyle="height:250px" />
</div> </div>
</template> </template>
@ -391,6 +400,7 @@ export default {
selectedCity: null, selectedCity: null,
selectedCountries: null, selectedCountries: null,
selectedGroupedCity: null, selectedGroupedCity: null,
selectedItem: null,
cities: [ cities: [
{name: 'New York', code: 'NY'}, {name: 'New York', code: 'NY'},
{name: 'Rome', code: 'RM'}, {name: 'Rome', code: 'RM'},
@ -411,7 +421,7 @@ export default {
{name: 'United States', code: 'US'} {name: 'United States', code: 'US'}
], ],
groupedCities: [{ groupedCities: [{
label: 'Germany', code: 'DE', label: 'Germany', code: 'DE',
items: [ items: [
{label: 'Berlin', value: 'Berlin'}, {label: 'Berlin', value: 'Berlin'},
{label: 'Frankfurt', value: 'Frankfurt'}, {label: 'Frankfurt', value: 'Frankfurt'},
@ -420,7 +430,7 @@ export default {
] ]
}, },
{ {
label: 'USA', code: 'US', label: 'USA', code: 'US',
items: [ items: [
{label: 'Chicago', value: 'Chicago'}, {label: 'Chicago', value: 'Chicago'},
{label: 'Los Angeles', value: 'Los Angeles'}, {label: 'Los Angeles', value: 'Los Angeles'},
@ -429,14 +439,15 @@ export default {
] ]
}, },
{ {
label: 'Japan', code: 'JP', label: 'Japan', code: 'JP',
items: [ items: [
{label: 'Kyoto', value: 'Kyoto'}, {label: 'Kyoto', value: 'Kyoto'},
{label: 'Osaka', value: 'Osaka'}, {label: 'Osaka', value: 'Osaka'},
{label: 'Tokyo', value: 'Tokyo'}, {label: 'Tokyo', value: 'Tokyo'},
{label: 'Yokohama', value: 'Yokohama'} {label: 'Yokohama', value: 'Yokohama'}
] ]
}] }],
items: Array.from({ length: 100000 }, (_, i) => ({ label: \`Item #\${i}\`, value: i }))
} }
} }
} }
@ -470,6 +481,9 @@ export default {
</div> </div>
</template> </template>
</Listbox> </Listbox>
<h5>Virtual Scroll (100000 Items)</h5>
<Listbox v-model="selectedItem" :options="items" optionLabel="label" optionValue="value" :virtualScrollerOptions="{ itemSize: 31 }" style="width:15rem" listStyle="height:250px" />
</div> </div>
</template> </template>
@ -481,6 +495,7 @@ export default {
const selectedCity = ref(); const selectedCity = ref();
const selectedCountries = ref(); const selectedCountries = ref();
const selectedGroupedCity = ref(); const selectedGroupedCity = ref();
const selectedItem = ref();
const cities = ref([ const cities = ref([
{name: 'New York', code: 'NY'}, {name: 'New York', code: 'NY'},
{name: 'Rome', code: 'RM'}, {name: 'Rome', code: 'RM'},
@ -502,7 +517,7 @@ export default {
]); ]);
const groupedCities = ref([ const groupedCities = ref([
{ {
label: 'Germany', code: 'DE', label: 'Germany', code: 'DE',
items: [ items: [
{label: 'Berlin', value: 'Berlin'}, {label: 'Berlin', value: 'Berlin'},
{label: 'Frankfurt', value: 'Frankfurt'}, {label: 'Frankfurt', value: 'Frankfurt'},
@ -511,7 +526,7 @@ export default {
] ]
}, },
{ {
label: 'USA', code: 'US', label: 'USA', code: 'US',
items: [ items: [
{label: 'Chicago', value: 'Chicago'}, {label: 'Chicago', value: 'Chicago'},
{label: 'Los Angeles', value: 'Los Angeles'}, {label: 'Los Angeles', value: 'Los Angeles'},
@ -520,7 +535,7 @@ export default {
] ]
}, },
{ {
label: 'Japan', code: 'JP', label: 'Japan', code: 'JP',
items: [ items: [
{label: 'Kyoto', value: 'Kyoto'}, {label: 'Kyoto', value: 'Kyoto'},
{label: 'Osaka', value: 'Osaka'}, {label: 'Osaka', value: 'Osaka'},
@ -530,7 +545,9 @@ export default {
} }
]); ]);
return { selectedCity, selectedCountries, selectedGroupedCity, cities, countries, groupedCities } const items = ref(Array.from({ length: 100000 }, (_, i) => ({ label: \`Item #\${i}\`, value: i })));
return { selectedCity, selectedCountries, selectedGroupedCity, cities, countries, groupedCities, items, selectedItem }
} }
} }
<\\/script> <\\/script>
@ -540,4 +557,4 @@ export default {
} }
} }
} }
</script> </script>