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

Filter added MultiSelect demos

pull/5756/head
tugcekucukoglu 2024-05-09 09:00:26 +03:00
parent 08b62ecc01
commit 36eeb0375e
8 changed files with 32 additions and 31 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
doc/multiselect/BasicDoc.vue
View File

@ -6,7 +6,7 @@
</p> </p>
</DocSectionText> </DocSectionText>
<div class="card flex justify-content-center"> <div class="card flex justify-content-center">
<MultiSelect v-model="selectedCities" :options="cities" optionLabel="name" placeholder="Select Cities" :maxSelectedLabels="3" class="w-full md:w-20rem" /> <MultiSelect v-model="selectedCities" :options="cities" optionLabel="name" filter placeholder="Select Cities" :maxSelectedLabels="3" class="w-full md:w-20rem" />
</div> </div>
<DocSectionCode :code="code" /> <DocSectionCode :code="code" />
</template> </template>
@ -25,13 +25,13 @@ export default {
], ],
code: { code: {
basic: ` basic: `
<MultiSelect v-model="selectedCities" :options="cities" optionLabel="name" placeholder="Select Cities" <MultiSelect v-model="selectedCities" :options="cities" optionLabel="name" filter placeholder="Select Cities"
:maxSelectedLabels="3" class="w-full md:w-20rem" /> :maxSelectedLabels="3" class="w-full md:w-20rem" />
`, `,
options: ` options: `
<template> <template>
<div class="card flex justify-content-center"> <div class="card flex justify-content-center">
<MultiSelect v-model="selectedCities" :options="cities" optionLabel="name" placeholder="Select Cities" <MultiSelect v-model="selectedCities" :options="cities" optionLabel="name" filter placeholder="Select Cities"
:maxSelectedLabels="3" class="w-full md:w-20rem" /> :maxSelectedLabels="3" class="w-full md:w-20rem" />
</div> </div>
</template> </template>
@ -56,7 +56,7 @@ export default {
composition: ` composition: `
<template> <template>
<div class="card flex justify-content-center"> <div class="card flex justify-content-center">
<MultiSelect v-model="selectedCities" :options="cities" optionLabel="name" placeholder="Select Cities" <MultiSelect v-model="selectedCities" :options="cities" optionLabel="name" filter placeholder="Select Cities"
:maxSelectedLabels="3" class="w-full md:w-20rem" /> :maxSelectedLabels="3" class="w-full md:w-20rem" />
</div> </div>
</template> </template>

8
doc/multiselect/ChipsDoc.vue
View File

@ -3,7 +3,7 @@
<p>Selected values are displayed as a comma separated list by default, setting <i>display</i> as <i>chip</i> displays them as chips.</p> <p>Selected values are displayed as a comma separated list by default, setting <i>display</i> as <i>chip</i> displays them as chips.</p>
</DocSectionText> </DocSectionText>
<div class="card flex justify-content-center"> <div class="card flex justify-content-center">
<MultiSelect v-model="selectedCities" display="chip" :options="cities" optionLabel="name" placeholder="Select Cities" :maxSelectedLabels="3" class="w-full md:w-20rem" /> <MultiSelect v-model="selectedCities" display="chip" :options="cities" optionLabel="name" filter placeholder="Select Cities" :maxSelectedLabels="3" class="w-full md:w-20rem" />
</div> </div>
<DocSectionCode :code="code" /> <DocSectionCode :code="code" />
</template> </template>
@ -22,13 +22,13 @@ export default {
], ],
code: { code: {
basic: ` basic: `
<MultiSelect v-model="selectedCities" display="chip" :options="cities" optionLabel="name" placeholder="Select Cities" <MultiSelect v-model="selectedCities" display="chip" :options="cities" optionLabel="name" filter placeholder="Select Cities"
:maxSelectedLabels="3" class="w-full md:w-20rem" /> :maxSelectedLabels="3" class="w-full md:w-20rem" />
`, `,
options: ` options: `
<template> <template>
<div class="card flex justify-content-center"> <div class="card flex justify-content-center">
<MultiSelect v-model="selectedCities" display="chip" :options="cities" optionLabel="name" placeholder="Select Cities" <MultiSelect v-model="selectedCities" display="chip" :options="cities" optionLabel="name" filter placeholder="Select Cities"
:maxSelectedLabels="3" class="w-full md:w-20rem" /> :maxSelectedLabels="3" class="w-full md:w-20rem" />
</div> </div>
</template> </template>
@ -53,7 +53,7 @@ export default {
composition: ` composition: `
<template> <template>
<div class="card flex justify-content-center"> <div class="card flex justify-content-center">
<MultiSelect v-model="selectedCities" display="chip" :options="cities" optionLabel="name" placeholder="Select Cities" <MultiSelect v-model="selectedCities" display="chip" :options="cities" optionLabel="name" filter placeholder="Select Cities"
:maxSelectedLabels="3" class="w-full md:w-20rem" /> :maxSelectedLabels="3" class="w-full md:w-20rem" />
</div> </div>
</template> </template>

8
doc/multiselect/FilledDoc.vue
View File

@ -3,7 +3,7 @@
<p>Specify the <i>variant</i> property as <i>filled</i> to display the component with a higher visual emphasis than the default <i>outlined</i> style.</p> <p>Specify the <i>variant</i> property as <i>filled</i> to display the component with a higher visual emphasis than the default <i>outlined</i> style.</p>
</DocSectionText> </DocSectionText>
<div class="card flex justify-content-center"> <div class="card flex justify-content-center">
<MultiSelect v-model="selectedCities" variant="filled" :options="cities" optionLabel="name" placeholder="Select Cities" :maxSelectedLabels="3" class="w-full md:w-20rem" /> <MultiSelect v-model="selectedCities" variant="filled" :options="cities" optionLabel="name" filter placeholder="Select Cities" :maxSelectedLabels="3" class="w-full md:w-20rem" />
</div> </div>
<DocSectionCode :code="code" /> <DocSectionCode :code="code" />
</template> </template>
@ -22,13 +22,13 @@ export default {
], ],
code: { code: {
basic: ` basic: `
<MultiSelect v-model="selectedCities" variant="filled" :options="cities" optionLabel="name" placeholder="Select Cities" <MultiSelect v-model="selectedCities" variant="filled" :options="cities" optionLabel="name" filter placeholder="Select Cities"
:maxSelectedLabels="3" class="w-full md:w-20rem" /> :maxSelectedLabels="3" class="w-full md:w-20rem" />
`, `,
options: ` options: `
<template> <template>
<div class="card flex justify-content-center"> <div class="card flex justify-content-center">
<MultiSelect v-model="selectedCities" variant="filled" :options="cities" optionLabel="name" placeholder="Select Cities" <MultiSelect v-model="selectedCities" variant="filled" :options="cities" optionLabel="name" filter placeholder="Select Cities"
:maxSelectedLabels="3" class="w-full md:w-20rem" /> :maxSelectedLabels="3" class="w-full md:w-20rem" />
</div> </div>
</template> </template>
@ -53,7 +53,7 @@ export default {
composition: ` composition: `
<template> <template>
<div class="card flex justify-content-center"> <div class="card flex justify-content-center">
<MultiSelect v-model="selectedCities" variant="filled" :options="cities" optionLabel="name" placeholder="Select Cities" <MultiSelect v-model="selectedCities" variant="filled" :options="cities" optionLabel="name" filter placeholder="Select Cities"
:maxSelectedLabels="3" class="w-full md:w-20rem" /> :maxSelectedLabels="3" class="w-full md:w-20rem" />
</div> </div>
</template> </template>

8
doc/multiselect/FloatLabelDoc.vue
View File

@ -4,7 +4,7 @@
</DocSectionText> </DocSectionText>
<div class="card flex justify-content-center"> <div class="card flex justify-content-center">
<FloatLabel class="w-full md:w-20rem"> <FloatLabel class="w-full md:w-20rem">
<MultiSelect id="ms-cities" v-model="selectedCities" :options="cities" optionLabel="name" :maxSelectedLabels="3" class="w-full" /> <MultiSelect id="ms-cities" v-model="selectedCities" :options="cities" optionLabel="name" filter :maxSelectedLabels="3" class="w-full" />
<label for="ms-cities">MultiSelect</label> <label for="ms-cities">MultiSelect</label>
</FloatLabel> </FloatLabel>
</div> </div>
@ -26,7 +26,7 @@ export default {
code: { code: {
basic: ` basic: `
<FloatLabel class="w-full md:w-20rem"> <FloatLabel class="w-full md:w-20rem">
<MultiSelect id="ms-cities" v-model="selectedCities" :options="cities" optionLabel="name" :maxSelectedLabels="3" class="w-full" /> <MultiSelect id="ms-cities" v-model="selectedCities" :options="cities" optionLabel="name" filter :maxSelectedLabels="3" class="w-full" />
<label for="ms-cities">MultiSelect</label> <label for="ms-cities">MultiSelect</label>
</FloatLabel> </FloatLabel>
`, `,
@ -34,7 +34,7 @@ export default {
<template> <template>
<div class="card flex justify-content-center"> <div class="card flex justify-content-center">
<FloatLabel class="w-full md:w-20rem"> <FloatLabel class="w-full md:w-20rem">
<MultiSelect id="ms-cities" v-model="selectedCities" :options="cities" optionLabel="name" :maxSelectedLabels="3" class="w-full" /> <MultiSelect id="ms-cities" v-model="selectedCities" :options="cities" optionLabel="name" filter :maxSelectedLabels="3" class="w-full" />
<label for="ms-cities">MultiSelect</label> <label for="ms-cities">MultiSelect</label>
</FloatLabel> </FloatLabel>
</div> </div>
@ -61,7 +61,7 @@ export default {
<template> <template>
<div class="card flex justify-content-center"> <div class="card flex justify-content-center">
<FloatLabel class="w-full md:w-20rem"> <FloatLabel class="w-full md:w-20rem">
<MultiSelect id="ms-cities" v-model="selectedCities" :options="cities" optionLabel="name" :maxSelectedLabels="3" class="w-full" /> <MultiSelect id="ms-cities" v-model="selectedCities" :options="cities" optionLabel="name" filter :maxSelectedLabels="3" class="w-full" />
<label for="ms-cities">MultiSelect</label> <label for="ms-cities">MultiSelect</label>
</FloatLabel> </FloatLabel>
</div> </div>

8
doc/multiselect/GroupDoc.vue
View File

@ -6,7 +6,7 @@
</p> </p>
</DocSectionText> </DocSectionText>
<div class="card flex justify-content-center"> <div class="card flex justify-content-center">
<MultiSelect v-model="selectedCities" :options="groupedCities" optionLabel="label" optionGroupLabel="label" optionGroupChildren="items" display="chip" placeholder="Select Cities" class="w-full md:w-20rem"> <MultiSelect v-model="selectedCities" :options="groupedCities" optionLabel="label" filter optionGroupLabel="label" optionGroupChildren="items" display="chip" placeholder="Select Cities" class="w-full md:w-20rem">
<template #optiongroup="slotProps"> <template #optiongroup="slotProps">
<div class="flex align-items-center"> <div class="flex align-items-center">
<img :alt="slotProps.option.label" src="https://primefaces.org/cdn/primevue/images/flag/flag_placeholder.png" :class="`flag flag-${slotProps.option.code.toLowerCase()} mr-2`" style="width: 18px" /> <img :alt="slotProps.option.label" src="https://primefaces.org/cdn/primevue/images/flag/flag_placeholder.png" :class="`flag flag-${slotProps.option.code.toLowerCase()} mr-2`" style="width: 18px" />
@ -57,7 +57,7 @@ export default {
], ],
code: { code: {
basic: ` basic: `
<MultiSelect v-model="selectedCities" :options="groupedCities" optionLabel="label" optionGroupLabel="label" optionGroupChildren="items" display="chip" placeholder="Select Cities" class="w-full md:w-20rem"> <MultiSelect v-model="selectedCities" :options="groupedCities" optionLabel="label" filter optionGroupLabel="label" optionGroupChildren="items" display="chip" placeholder="Select Cities" class="w-full md:w-20rem">
<template #optiongroup="slotProps"> <template #optiongroup="slotProps">
<div class="flex align-items-center"> <div class="flex align-items-center">
<img :alt="slotProps.option.label" src="https://primefaces.org/cdn/primevue/images/flag/flag_placeholder.png" :class="\`flag flag-\${slotProps.option.code.toLowerCase()} mr-2\`" style="width: 18px" /> <img :alt="slotProps.option.label" src="https://primefaces.org/cdn/primevue/images/flag/flag_placeholder.png" :class="\`flag flag-\${slotProps.option.code.toLowerCase()} mr-2\`" style="width: 18px" />
@ -69,7 +69,7 @@ export default {
options: ` options: `
<template> <template>
<div class="card flex justify-content-center"> <div class="card flex justify-content-center">
<MultiSelect v-model="selectedCities" :options="groupedCities" optionLabel="label" optionGroupLabel="label" optionGroupChildren="items" display="chip" placeholder="Select Cities" class="w-full md:w-20rem"> <MultiSelect v-model="selectedCities" :options="groupedCities" optionLabel="label" filter optionGroupLabel="label" optionGroupChildren="items" display="chip" placeholder="Select Cities" class="w-full md:w-20rem">
<template #optiongroup="slotProps"> <template #optiongroup="slotProps">
<div class="flex align-items-center"> <div class="flex align-items-center">
<img :alt="slotProps.option.label" src="https://primefaces.org/cdn/primevue/images/flag/flag_placeholder.png" :class="\`flag flag-\${slotProps.option.code.toLowerCase()} mr-2\`" style="width: 18px" /> <img :alt="slotProps.option.label" src="https://primefaces.org/cdn/primevue/images/flag/flag_placeholder.png" :class="\`flag flag-\${slotProps.option.code.toLowerCase()} mr-2\`" style="width: 18px" />
@ -125,7 +125,7 @@ export default {
composition: ` composition: `
<template> <template>
<div class="card flex justify-content-center"> <div class="card flex justify-content-center">
<MultiSelect v-model="selectedCities" :options="groupedCities" optionLabel="label" optionGroupLabel="label" optionGroupChildren="items" display="chip" placeholder="Select Cities" class="w-full md:w-20rem"> <MultiSelect v-model="selectedCities" :options="groupedCities" optionLabel="label" filter optionGroupLabel="label" optionGroupChildren="items" display="chip" placeholder="Select Cities" class="w-full md:w-20rem">
<template #optiongroup="slotProps"> <template #optiongroup="slotProps">
<div class="flex align-items-center"> <div class="flex align-items-center">
<img :alt="slotProps.option.label" src="https://primefaces.org/cdn/primevue/images/flag/flag_placeholder.png" :class="\`flag flag-\${slotProps.option.code.toLowerCase()} mr-2\`" style="width: 18px" /> <img :alt="slotProps.option.label" src="https://primefaces.org/cdn/primevue/images/flag/flag_placeholder.png" :class="\`flag flag-\${slotProps.option.code.toLowerCase()} mr-2\`" style="width: 18px" />

8
doc/multiselect/InvalidDoc.vue
View File

@ -3,7 +3,7 @@
<p>Invalid state is displayed using the <i>invalid</i> prop to indicate a failed validation. You can use this style when integrating with form validation libraries.</p> <p>Invalid state is displayed using the <i>invalid</i> prop to indicate a failed validation. You can use this style when integrating with form validation libraries.</p>
</DocSectionText> </DocSectionText>
<div class="card flex justify-content-center"> <div class="card flex justify-content-center">
<MultiSelect v-model="selectedCities" :options="cities" optionLabel="name" placeholder="Select Cities" :maxSelectedLabels="3" invalid class="w-full md:w-20rem" /> <MultiSelect v-model="selectedCities" :options="cities" optionLabel="name" filter placeholder="Select Cities" :maxSelectedLabels="3" invalid class="w-full md:w-20rem" />
</div> </div>
<DocSectionCode :code="code" /> <DocSectionCode :code="code" />
</template> </template>
@ -22,13 +22,13 @@ export default {
], ],
code: { code: {
basic: ` basic: `
<MultiSelect v-model="selectedCities" :options="cities" optionLabel="name" placeholder="Select Cities" <MultiSelect v-model="selectedCities" :options="cities" optionLabel="name" filter placeholder="Select Cities"
:maxSelectedLabels="3" invalid class="w-full md:w-20rem" /> :maxSelectedLabels="3" invalid class="w-full md:w-20rem" />
`, `,
options: ` options: `
<template> <template>
<div class="card flex justify-content-center"> <div class="card flex justify-content-center">
<MultiSelect v-model="selectedCities" :options="cities" optionLabel="name" placeholder="Select Cities" <MultiSelect v-model="selectedCities" :options="cities" optionLabel="name" filter placeholder="Select Cities"
:maxSelectedLabels="3" invalid class="w-full md:w-20rem" /> :maxSelectedLabels="3" invalid class="w-full md:w-20rem" />
</div> </div>
</template> </template>
@ -53,7 +53,7 @@ export default {
composition: ` composition: `
<template> <template>
<div class="card flex justify-content-center"> <div class="card flex justify-content-center">
<MultiSelect v-model="selectedCities" :options="cities" optionLabel="name" placeholder="Select Cities" <MultiSelect v-model="selectedCities" :options="cities" optionLabel="name" filter placeholder="Select Cities"
:maxSelectedLabels="3" invalid class="w-full md:w-20rem" /> :maxSelectedLabels="3" invalid class="w-full md:w-20rem" />
</div> </div>
</template> </template>

8
doc/multiselect/TemplateDoc.vue
View File

@ -6,7 +6,7 @@
</p> </p>
</DocSectionText> </DocSectionText>
<div class="card flex justify-content-center"> <div class="card flex justify-content-center">
<MultiSelect v-model="selectedCountries" :options="countries" optionLabel="name" placeholder="Select Countries" display="chip" class="w-full md:w-20rem"> <MultiSelect v-model="selectedCountries" :options="countries" optionLabel="name" filter placeholder="Select Countries" display="chip" class="w-full md:w-20rem">
<template #option="slotProps"> <template #option="slotProps">
<div class="flex align-items-center"> <div class="flex align-items-center">
<img :alt="slotProps.option.name" src="https://primefaces.org/cdn/primevue/images/flag/flag_placeholder.png" :class="`flag flag-${slotProps.option.code.toLowerCase()} mr-2`" style="width: 18px" /> <img :alt="slotProps.option.name" src="https://primefaces.org/cdn/primevue/images/flag/flag_placeholder.png" :class="`flag flag-${slotProps.option.code.toLowerCase()} mr-2`" style="width: 18px" />
@ -42,7 +42,7 @@ export default {
], ],
code: { code: {
basic: ` basic: `
<MultiSelect v-model="selectedCountries" :options="countries" optionLabel="name" placeholder="Select Countries" display="chip" class="w-full md:w-20rem"> <MultiSelect v-model="selectedCountries" :options="countries" optionLabel="name" filter placeholder="Select Countries" display="chip" class="w-full md:w-20rem">
<template #option="slotProps"> <template #option="slotProps">
<div class="flex align-items-center"> <div class="flex align-items-center">
<img :alt="slotProps.option.name" src="https://primefaces.org/cdn/primevue/images/flag/flag_placeholder.png" :class="\`flag flag-\${slotProps.option.code.toLowerCase()} mr-2\`" style="width: 18px" /> <img :alt="slotProps.option.name" src="https://primefaces.org/cdn/primevue/images/flag/flag_placeholder.png" :class="\`flag flag-\${slotProps.option.code.toLowerCase()} mr-2\`" style="width: 18px" />
@ -59,7 +59,7 @@ export default {
options: ` options: `
<template> <template>
<div class="card flex justify-content-center"> <div class="card flex justify-content-center">
<MultiSelect v-model="selectedCountries" :options="countries" optionLabel="name" placeholder="Select Countries" display="chip" class="w-full md:w-20rem"> <MultiSelect v-model="selectedCountries" :options="countries" optionLabel="name" filter placeholder="Select Countries" display="chip" class="w-full md:w-20rem">
<template #option="slotProps"> <template #option="slotProps">
<div class="flex align-items-center"> <div class="flex align-items-center">
<img :alt="slotProps.option.name" src="https://primefaces.org/cdn/primevue/images/flag/flag_placeholder.png" :class="\`flag flag-\${slotProps.option.code.toLowerCase()} mr-2\`" style="width: 18px" /> <img :alt="slotProps.option.name" src="https://primefaces.org/cdn/primevue/images/flag/flag_placeholder.png" :class="\`flag flag-\${slotProps.option.code.toLowerCase()} mr-2\`" style="width: 18px" />
@ -100,7 +100,7 @@ export default {
composition: ` composition: `
<template> <template>
<div class="card flex justify-content-center"> <div class="card flex justify-content-center">
<MultiSelect v-model="selectedCountries" :options="countries" optionLabel="name" placeholder="Select Countries" display="chip" class="w-full md:w-20rem"> <MultiSelect v-model="selectedCountries" :options="countries" optionLabel="name" filter placeholder="Select Countries" display="chip" class="w-full md:w-20rem">
<template #option="slotProps"> <template #option="slotProps">
<div class="flex align-items-center"> <div class="flex align-items-center">
<img :alt="slotProps.option.name" src="https://primefaces.org/cdn/primevue/images/flag/flag_placeholder.png" :class="\`flag flag-\${slotProps.option.code.toLowerCase()} mr-2\`" style="width: 18px" /> <img :alt="slotProps.option.name" src="https://primefaces.org/cdn/primevue/images/flag/flag_placeholder.png" :class="\`flag flag-\${slotProps.option.code.toLowerCase()} mr-2\`" style="width: 18px" />

7
doc/multiselect/VirtualScrollDoc.vue
View File

@ -16,6 +16,7 @@
optionLabel="label" optionLabel="label"
optionValue="value" optionValue="value"
:virtualScrollerOptions="{ itemSize: 44 }" :virtualScrollerOptions="{ itemSize: 44 }"
filter
placeholder="Select Item" placeholder="Select Item"
class="w-full md:w-20rem" class="w-full md:w-20rem"
/> />
@ -33,13 +34,13 @@ export default {
code: { code: {
basic: ` basic: `
<MultiSelect v-model="selectedItems" :options="items" :maxSelectedLabels="3" :selectAll="selectAll" optionLabel="label" optionValue="value" <MultiSelect v-model="selectedItems" :options="items" :maxSelectedLabels="3" :selectAll="selectAll" optionLabel="label" optionValue="value"
@selectall-change="onSelectAllChange($event)" @change="onChange($event)" :virtualScrollerOptions="{ itemSize: 44 }" placeholder="Select Item" class="w-full md:w-20rem" /> @selectall-change="onSelectAllChange($event)" @change="onChange($event)" :virtualScrollerOptions="{ itemSize: 44 }" filter placeholder="Select Item" class="w-full md:w-20rem" />
`, `,
options: ` options: `
<template> <template>
<div class="card flex justify-content-center"> <div class="card flex justify-content-center">
<MultiSelect v-model="selectedItems" :options="items" :maxSelectedLabels="3" :selectAll="selectAll" optionLabel="label" optionValue="value" <MultiSelect v-model="selectedItems" :options="items" :maxSelectedLabels="3" :selectAll="selectAll" optionLabel="label" optionValue="value"
@selectall-change="onSelectAllChange($event)" @change="onChange($event)" :virtualScrollerOptions="{ itemSize: 44 }" placeholder="Select Item" class="w-full md:w-20rem" /> @selectall-change="onSelectAllChange($event)" @change="onChange($event)" :virtualScrollerOptions="{ itemSize: 44 }" filter placeholder="Select Item" class="w-full md:w-20rem" />
</div> </div>
</template> </template>
@ -68,7 +69,7 @@ export default {
<template> <template>
<div class="card flex justify-content-center"> <div class="card flex justify-content-center">
<MultiSelect v-model="selectedItems" :options="items" :maxSelectedLabels="3" :selectAll="selectAll" optionLabel="label" optionValue="value" <MultiSelect v-model="selectedItems" :options="items" :maxSelectedLabels="3" :selectAll="selectAll" optionLabel="label" optionValue="value"
@selectall-change="onSelectAllChange($event)" @change="onChange($event)" :virtualScrollerOptions="{ itemSize: 44 }" placeholder="Select Item" class="w-full md:w-20rem" /> @selectall-change="onSelectAllChange($event)" @change="onChange($event)" :virtualScrollerOptions="{ itemSize: 44 }" filter placeholder="Select Item" class="w-full md:w-20rem" />
</div> </div>
</template> </template>