Fixed #1341 - Chip templating support for AutoComplete and MultiSelec
parent
eff295242c
commit
990e07c12d
|
@ -190,6 +190,10 @@ const AutoCompleteSlots = [
|
||||||
{
|
{
|
||||||
name: "footer",
|
name: "footer",
|
||||||
description: "Custom content for the component 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",
|
name: "empty",
|
||||||
description: "Custom content when there is no data to display"
|
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: 'complete', e: {originalEvent: Event, query: string}): this;
|
||||||
$emit(eventName: 'clear'): this;
|
$emit(eventName: 'clear'): this;
|
||||||
$slots: {
|
$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">
|
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">
|
<ul ref="multiContainer" :class="multiContainerClass" v-if="multiple" @click="onMultiContainerClick">
|
||||||
<li v-for="(item, i) of modelValue" :key="i" class="p-autocomplete-token">
|
<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>
|
<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>
|
<span class="p-autocomplete-token-icon pi pi-times-circle" @click="removeItem($event, i)"></span>
|
||||||
</li>
|
</li>
|
||||||
<li class="p-autocomplete-input-token">
|
<li class="p-autocomplete-input-token">
|
||||||
|
|
|
@ -42,7 +42,13 @@ declare class MultiSelect {
|
||||||
$emit(eventName: 'filter', e: { originalEvent: Event, value: string }): this;
|
$emit(eventName: 'filter', e: { originalEvent: Event, value: string }): this;
|
||||||
$slots: {
|
$slots: {
|
||||||
value: VNode[];
|
value: VNode[];
|
||||||
|
header: VNode[];
|
||||||
|
footer: VNode[];
|
||||||
|
emptyfilter: VNode[];
|
||||||
|
empty: VNode[];
|
||||||
option: VNode[];
|
option: VNode[];
|
||||||
|
optiongroup: VNode[];
|
||||||
|
chip: VNode[];
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -12,7 +12,9 @@
|
||||||
</template>
|
</template>
|
||||||
<template v-else-if="display === 'chip'">
|
<template v-else-if="display === 'chip'">
|
||||||
<div v-for="item of modelValue" class="p-multiselect-token" :key="getLabelByValue(item)">
|
<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>
|
<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>
|
<span v-if="!disabled" class="p-multiselect-token-icon pi pi-times-circle" @click="removeChip(item)"></span>
|
||||||
</div>
|
</div>
|
||||||
<template v-if="!modelValue || modelValue.length === 0">{{placeholder || 'empty'}}</template>
|
<template v-if="!modelValue || modelValue.length === 0">{{placeholder || 'empty'}}</template>
|
||||||
|
|
|
@ -115,7 +115,7 @@ export default {
|
||||||
|
|
||||||
<h5>Templating</h5>
|
<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.
|
<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>
|
<pre v-code><code><template v-pre>
|
||||||
<AutoComplete v-model="brand" :suggestions="filteredBrands" @complete="searchBrand($event)" placeholder="Hint: type 'v' or 'f'" :dropdown="true">
|
<AutoComplete v-model="brand" :suggestions="filteredBrands" @complete="searchBrand($event)" placeholder="Hint: type 'v' or 'f'" :dropdown="true">
|
||||||
<template #item="slotProps">
|
<template #item="slotProps">
|
||||||
|
@ -325,6 +325,10 @@ export default {
|
||||||
<td>footer</td>
|
<td>footer</td>
|
||||||
<td>value: Value of the component <br />
|
<td>value: Value of the component <br />
|
||||||
suggestions: Displayed options</td>
|
suggestions: Displayed options</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>chip</td>
|
||||||
|
<td>value: A value in the selection</td>
|
||||||
</tr>
|
</tr>
|
||||||
</tbody>
|
</tbody>
|
||||||
</table>
|
</table>
|
||||||
|
|
|
@ -98,7 +98,7 @@ export default {
|
||||||
|
|
||||||
<h5>Templating</h5>
|
<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.
|
<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>
|
<pre v-code><code><template v-pre>
|
||||||
<MultiSelect v-model="selectedCars2" :options="cars" optionLabel="brand" placeholder="Select a Car">
|
<MultiSelect v-model="selectedCars2" :options="cars" optionLabel="brand" placeholder="Select a Car">
|
||||||
<template #value="slotProps">
|
<template #value="slotProps">
|
||||||
|
@ -420,6 +420,10 @@ export default {
|
||||||
<tr>
|
<tr>
|
||||||
<td>empty</td>
|
<td>empty</td>
|
||||||
<td>-</td>
|
<td>-</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>chip</td>
|
||||||
|
<td>value: A value in the selection</td>
|
||||||
</tr>
|
</tr>
|
||||||
</tbody>
|
</tbody>
|
||||||
</table>
|
</table>
|
||||||
|
|
Loading…
Reference in New Issue