parent
dbfbc31e8a
commit
ad64a8aeab
|
@ -106,6 +106,10 @@ const ChipsSlots = [
|
|||
{
|
||||
name: 'chips',
|
||||
description: 'Custom content for the chips'
|
||||
},
|
||||
{
|
||||
name: 'removetokenicon',
|
||||
description: 'Custom remove token icon template.'
|
||||
}
|
||||
];
|
||||
|
||||
|
|
|
@ -76,7 +76,6 @@ export interface ChipsProps {
|
|||
inputProps?: InputHTMLAttributes | undefined;
|
||||
/**
|
||||
* Icon to display in chip remove action.
|
||||
* @defaultValue pi pi-times-circle
|
||||
*/
|
||||
removeTokenIcon?: string | undefined;
|
||||
/**
|
||||
|
@ -110,6 +109,10 @@ export interface ChipsSlots {
|
|||
*/
|
||||
value: any;
|
||||
}): VNode[];
|
||||
/**
|
||||
* Custom remove token icon template.
|
||||
*/
|
||||
removetokenicon(): VNode[];
|
||||
}
|
||||
/**
|
||||
* Defines valid emits in Chips component.
|
||||
|
|
|
@ -28,7 +28,9 @@
|
|||
<slot name="chip" :value="val">
|
||||
<span class="p-chips-token-label">{{ val }}</span>
|
||||
</slot>
|
||||
<span :class="['p-chips-token-icon', removeTokenIcon]" @click="removeItem($event, i)" aria-hidden="true"></span>
|
||||
<slot name="removetokenicon">
|
||||
<component :is="removeTokenIcon ? 'span' : 'TimesCircleIcon'" :class="['p-chips-token-icon', removeTokenIcon]" @click="removeItem($event, i)" aria-hidden="true" />
|
||||
</slot>
|
||||
</li>
|
||||
<li class="p-chips-input-token" role="option">
|
||||
<input
|
||||
|
@ -52,6 +54,7 @@
|
|||
</template>
|
||||
|
||||
<script>
|
||||
import TimesCircleIcon from 'primevue/icon/timescircle';
|
||||
import { UniqueComponentId } from 'primevue/utils';
|
||||
|
||||
export default {
|
||||
|
@ -104,7 +107,7 @@ export default {
|
|||
},
|
||||
removeTokenIcon: {
|
||||
type: String,
|
||||
default: 'pi pi-times-circle'
|
||||
default: undefined
|
||||
},
|
||||
'aria-labelledby': {
|
||||
type: String,
|
||||
|
@ -309,6 +312,9 @@ export default {
|
|||
focusedOptionId() {
|
||||
return this.focusedIndex !== null ? `${this.id}_chips_item_${this.focusedIndex}` : null;
|
||||
}
|
||||
},
|
||||
components: {
|
||||
TimesCircleIcon: TimesCircleIcon
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
Loading…
Reference in New Issue