Cellule-financiere-transverse-PMO/visua-vue
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

🐛 fix: bug fixed

Browse Source
This commit is contained in:
Paul Valerie GOMA 2025-07-23 15:38:02 +02:00
parent 19398994c4
commit fba4e36538
1 changed files with 17 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
src/components/badge/VBadge.vue
View File

@ -23,15 +23,17 @@ const severity = computed(() => {
const icon = computed(() => {
switch (props.type) {
case 'error': return 'ri-close-circle-fill';
case 'warning' : return 'ri-alert-fill';
case 'success' : return 'ri-checkbox-circle-fill';
case 'info': return 'ri-information-fill';
case 'new': return 'ri-flashlight-fill';
case 'error': return 'ri-close-circle-line';
case 'warning' : return 'ri-alert-line';
case 'success' : return 'ri-checkbox-circle-line';
case 'info': return 'ri-information-line';
case 'new': return 'ri-flashlight-line';
default:
return undefined;
}
})
const limit = computed(() => props.maxWidth);
</script>
<template>
@ -39,25 +41,31 @@ const icon = computed(() => {
role="alert"
:value="props.label"
:severity="severity"
:title="props.label"
class="p-tag"
:style="(!!props.maxWidth) ? {width: props.maxWidth} : {width: 'fit-content'}"
:class="{'small': props.small}"
>
<template v-if="!props.noIcon || props.type === undefined">
<i :class="icon"></i>
</template>
<i v-if="!props.noIcon || props.type === undefined" :class="icon"></i>
<span :class="{'limit': props.maxWidth}">{{ props.label }}</span>
</Tag>
</template>
<style lang="css" scoped>
.p-tag{height: fit-content;}
.p-tag.small{
--p-tag-icon-size: var( --text-body-SM-detail-text-Maj-size);
--p-tag-font-size: var( --text-body-XS-mention-text-Maj-size);
--p-tag-font-weight: var( --text-body-XS-mention-text-Maj-weight);
--p-tag-padding: 0.125rem 0.325rem;
align-self: center;
}
.limit{
max-width: v-bind(limit);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
</style>