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

Fixed #1341 - Chip templating support for AutoComplete and MultiSelec

pull/1340/head^2
Cagatay Civici 2021-06-11 15:38:06 +03:00
parent eff295242c
commit 990e07c12d
8 changed files with 35 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
api-generator/components/autocomplete.js
View File

@ -190,6 +190,10 @@ const AutoCompleteSlots = [
{
name: "footer",
description: "Custom content for the component footer."
},
{
name: "chip",
description: "Custom content for the chip display."
}
];

4
api-generator/components/multiselect.js
View File

@ -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."
}
];

6
src/components/autocomplete/AutoComplete.d.ts vendored
View File

@ -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
src/components/autocomplete/AutoComplete.vue
View File

@ -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">
<span class="p-autocomplete-token-label">{{getItemContent(item)}}</span>
<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">

6
src/components/multiselect/MultiSelect.d.ts vendored
View File

@ -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[];
}
}

4
src/components/multiselect/MultiSelect.vue
View File

@ -12,7 +12,9 @@
</template>
<template v-else-if="display === 'chip'">
<div v-for="item of modelValue" class="p-multiselect-token" :key="getLabelByValue(item)">
<span class="p-multiselect-token-label">{{getLabelByValue(item)}}</span>
<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>

6
src/views/autocomplete/AutoCompleteDoc.vue
View File

@ -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>
&lt;AutoComplete v-model="brand" :suggestions="filteredBrands" @complete="searchBrand($event)" placeholder="Hint: type 'v' or 'f'" :dropdown="true"&gt;
&lt;template #item="slotProps"&gt;
@ -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>

6
src/views/multiselect/MultiSelectDoc.vue
View File

@ -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>
&lt;MultiSelect v-model="selectedCars2" :options="cars" optionLabel="brand" placeholder="Select a Car"&gt;
&lt;template #value="slotProps"&gt;
@ -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>