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