Fixed #1341 - Chip templating support for AutoComplete and MultiSelec
parent
eff295242c
commit
990e07c12d
|
@ -190,6 +190,10 @@ const AutoCompleteSlots = [
|
|||
{
|
||||
name: "footer",
|
||||
description: "Custom content for the component footer."
|
||||
},
|
||||
{
|
||||
name: "chip",
|
||||
description: "Custom content for the chip display."
|
||||
}
|
||||
];
|
||||
|
||||
|
|
|
@ -242,6 +242,10 @@ const MultiSelectSlots = [
|
|||
{
|
||||
name: "empty",
|
||||
description: "Custom content when there is no data to display"
|
||||
},
|
||||
{
|
||||
name: "chip",
|
||||
description: "Custom content for the chip display."
|
||||
}
|
||||
];
|
||||
|
||||
|
|
|
@ -28,7 +28,11 @@ declare class AutoComplete {
|
|||
$emit(eventName: 'complete', e: {originalEvent: Event, query: string}): this;
|
||||
$emit(eventName: 'clear'): this;
|
||||
$slots: {
|
||||
list: VNode[];
|
||||
item: VNode[];
|
||||
optiongroup: VNode[];
|
||||
header: VNode[];
|
||||
footer: VNode[];
|
||||
chip: VNode[];
|
||||
};
|
||||
}
|
||||
|
||||
|
|
|
@ -4,7 +4,9 @@
|
|||
type="text" autoComplete="off" v-if="!multiple" role="searchbox" aria-autocomplete="list" :aria-controls="listId">
|
||||
<ul ref="multiContainer" :class="multiContainerClass" v-if="multiple" @click="onMultiContainerClick">
|
||||
<li v-for="(item, i) of modelValue" :key="i" class="p-autocomplete-token">
|
||||
<slot name="chip" :value="item">
|
||||
<span class="p-autocomplete-token-label">{{getItemContent(item)}}</span>
|
||||
</slot>
|
||||
<span class="p-autocomplete-token-icon pi pi-times-circle" @click="removeItem($event, i)"></span>
|
||||
</li>
|
||||
<li class="p-autocomplete-input-token">
|
||||
|
|
|
@ -42,7 +42,13 @@ declare class MultiSelect {
|
|||
$emit(eventName: 'filter', e: { originalEvent: Event, value: string }): this;
|
||||
$slots: {
|
||||
value: VNode[];
|
||||
header: VNode[];
|
||||
footer: VNode[];
|
||||
emptyfilter: VNode[];
|
||||
empty: VNode[];
|
||||
option: VNode[];
|
||||
optiongroup: VNode[];
|
||||
chip: VNode[];
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
@ -12,7 +12,9 @@
|
|||
</template>
|
||||
<template v-else-if="display === 'chip'">
|
||||
<div v-for="item of modelValue" class="p-multiselect-token" :key="getLabelByValue(item)">
|
||||
<slot name="chip" :value="item">
|
||||
<span class="p-multiselect-token-label">{{getLabelByValue(item)}}</span>
|
||||
</slot>
|
||||
<span v-if="!disabled" class="p-multiselect-token-icon pi pi-times-circle" @click="removeChip(item)"></span>
|
||||
</div>
|
||||
<template v-if="!modelValue || modelValue.length === 0">{{placeholder || 'empty'}}</template>
|
||||
|
|
|
@ -115,7 +115,7 @@ export default {
|
|||
|
||||
<h5>Templating</h5>
|
||||
<p>Item template allows displaying custom content inside the suggestions panel. The slotProps variable passed to the template provides an item property to represent an item in the suggestions collection.
|
||||
In addition <i>optiongroup</i>, <i>header</i> and <i>footer</i> slots are provided for further customization</p>
|
||||
In addition <i>optiongroup</i>, <i>chip</i>, <i>header</i> and <i>footer</i> slots are provided for further customization</p>
|
||||
<pre v-code><code><template v-pre>
|
||||
<AutoComplete v-model="brand" :suggestions="filteredBrands" @complete="searchBrand($event)" placeholder="Hint: type 'v' or 'f'" :dropdown="true">
|
||||
<template #item="slotProps">
|
||||
|
@ -325,6 +325,10 @@ export default {
|
|||
<td>footer</td>
|
||||
<td>value: Value of the component <br />
|
||||
suggestions: Displayed options</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>chip</td>
|
||||
<td>value: A value in the selection</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
|
|
@ -98,7 +98,7 @@ export default {
|
|||
|
||||
<h5>Templating</h5>
|
||||
<p>Label of an option is used as the display text of an item by default, for custom content support define an <i>option</i> template that gets the option instance as a parameter.
|
||||
In addition <i>value</i>, <i>optiongroup</i>, <i>header</i>, <i>footer</i>, <i>emptyfilter</i> and <i>empty</i> slots are provided for further customization.</p>
|
||||
In addition <i>value</i>, <i>optiongroup</i>, <i>chip</i>, <i>header</i>, <i>footer</i>, <i>emptyfilter</i> and <i>empty</i> slots are provided for further customization.</p>
|
||||
<pre v-code><code><template v-pre>
|
||||
<MultiSelect v-model="selectedCars2" :options="cars" optionLabel="brand" placeholder="Select a Car">
|
||||
<template #value="slotProps">
|
||||
|
@ -420,6 +420,10 @@ export default {
|
|||
<tr>
|
||||
<td>empty</td>
|
||||
<td>-</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>chip</td>
|
||||
<td>value: A value in the selection</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
|
Loading…
Reference in New Issue