vertumnus/primevue-mirror
1
0
Fork 0
mirror of https://github.com/primefaces/primevue.git synced 2025-05-09 00:42:36 +00:00
Code Issues Projects Releases Packages Wiki Activity

Refactor #3922 - For Chips

Browse source
This commit is contained in:
Tuğçe Küçükoğlu 2023-05-05 12:36:30 +03:00
parent 7db93eb073
commit 38a8f2c3e7
4 changed files with 97 additions and 5 deletions
Download patch file Download diff file Expand all files Collapse all files

14
components/lib/chips/Chips.vue
View file

@ -1,5 +1,5 @@
<template>
<div :class="containerClass">
<div :class="containerClass" v-bind="ptm('root')">
<ul
ref="container"
class="p-inputtext p-chips-multiple-container"
@ -13,6 +13,7 @@
@focus="onContainerFocus"
@blur="onContainerBlur"
@keydown="onContainerKeyDown"
v-bind="ptm('container')"
>
<li
v-for="(val, i) of modelValue"
@ -24,15 +25,16 @@
:aria-selected="true"
:aria-setsize="modelValue.length"
:aria-posinset="i + 1"
v-bind="ptm('token')"
>
<slot name="chip" :value="val">
<span class="p-chips-token-label">{{ val }}</span>
<span class="p-chips-token-label" v-bind="ptm('label')">{{ val }}</span>
</slot>
<slot name="removetokenicon" :onClick="(event) => removeItem(event, i)">
<component :is="removeTokenIcon ? 'span' : 'TimesCircleIcon'" :class="['p-chips-token-icon', removeTokenIcon]" @click="removeItem($event, i)" aria-hidden="true" />
<component :is="removeTokenIcon ? 'span' : 'TimesCircleIcon'" :class="['p-chips-token-icon', removeTokenIcon]" @click="removeItem($event, i)" aria-hidden="true" v-bind="ptm('removeTokenIcon')" />
</slot>
</li>
<li class="p-chips-input-token" role="option">
<li class="p-chips-input-token" role="option" v-bind="ptm('inputToken')">
<input
ref="input"
:id="inputId"
@ -46,7 +48,7 @@
@input="onInput"
@keydown="onKeyDown($event)"
@paste="onPaste($event)"
v-bind="inputProps"
v-bind="{ ...inputProps, ...ptm('input') }"
/>
</li>
</ul>
@ -54,11 +56,13 @@
</template>
<script>
import BaseComponent from 'primevue/basecomponent';
import TimesCircleIcon from 'primevue/icons/timescircle';
import { UniqueComponentId } from 'primevue/utils';
export default {
name: 'Chips',
extends: BaseComponent,
emits: ['update:modelValue', 'add', 'remove', 'focus', 'blur'],
props: {
modelValue: {