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

Refactor #3965 - For Chip

Browse source
This commit is contained in:
Bahadır Sofuoğlu 2023-05-24 10:39:02 +03:00
parent 2d2b2dff1e
commit ae43587f19
3 changed files with 92 additions and 63 deletions
Download patch file Download diff file Expand all files Collapse all files

70
components/lib/chip/Chip.vue
View file

@ -1,47 +1,25 @@
<template>
<div v-if="visible" :class="containerClass" :aria-label="label" v-bind="ptm('root')">
<div v-if="visible" :class="cx('root')" :aria-label="label" v-bind="ptm('root')">
<slot>
<img v-if="image" :src="image" v-bind="ptm('image')" />
<component v-else-if="$slots.icon" :is="$slots.icon" class="p-chip-icon" v-bind="ptm('icon')" />
<span v-else-if="icon" :class="['p-chip-icon', icon]" v-bind="ptm('icon')" />
<div v-if="label" class="p-chip-text" v-bind="ptm('label')">{{ label }}</div>
<component v-else-if="$slots.icon" :is="$slots.icon" :class="cx('icon')" v-bind="ptm('icon')" />
<span v-else-if="icon" :class="cx('icon')" v-bind="ptm('icon')" />
<div v-if="label" :class="cx('label')" v-bind="ptm('label')">{{ label }}</div>
</slot>
<slot v-if="removable" name="removeicon" :onClick="close" :onKeydown="onKeydown">
<component :is="removeIcon ? 'span' : 'TimesCircleIcon'" tabindex="0" :class="['p-chip-remove-icon', removeIcon]" @click="close" @keydown="onKeydown" v-bind="ptm('removeIcon')"></component>
<component :is="removeIcon ? 'span' : 'TimesCircleIcon'" tabindex="0" :class="cx('removeIcon')" @click="close" @keydown="onKeydown" v-bind="ptm('removeIcon')"></component>
</slot>
</div>
</template>
<script>
import BaseComponent from 'primevue/basecomponent';
import BaseChip from './BaseChip.vue';
import TimesCircleIcon from 'primevue/icons/timescircle';
export default {
name: 'Chip',
extends: BaseComponent,
extends: BaseChip,
emits: ['remove'],
props: {
label: {
type: String,
default: null
},
icon: {
type: String,
default: null
},
image: {
type: String,
default: null
},
removable: {
type: Boolean,
default: false
},
removeIcon: {
type: String,
default: undefined
}
},
data() {
return {
visible: true
@ -58,42 +36,8 @@ export default {
this.$emit('remove', event);
}
},
computed: {
containerClass() {
return [
'p-chip p-component',
{
'p-chip-image': this.image != null
}
];
}
},
components: {
TimesCircleIcon
}
};
</script>
<style>
.p-chip {
display: inline-flex;
align-items: center;
}
.p-chip-text {
line-height: 1.5;
}
.p-chip-icon.pi {
line-height: 1.5;
}
.p-chip-remove-icon {
line-height: 1.5;
cursor: pointer;
}
.p-chip img {
border-radius: 50%;
}
</style>