n8n/packages/editor-ui/src/components/Badge.vue
Mutasem Aldmour 60da5bb7ec
refactor(design-system): replace functional components (#3802)
* update creator item

* update warning tooltip

* update badge and trigger icon

* update action box

* update avatar component

* update badge

* update heading component

* update icon component

* update link component

* update menu

* update route component

* fix avatar bug

* fix avatar bug

* update input component

* update select

* update input

* update tags component

* update spinner

* update square button

* update tag component

* update text component

* add danger color

* add vue.extend

* add human readable names

* add human readable name

* revert button changes

* update name

* revert name

* update classes

* delete unused component

* redo name change

* rename

* rename back

* rename back

* update snapshots
2022-08-05 15:03:24 +02:00

52 lines
904 B
Vue

<template>
<fragment>
<el-tag
v-if="type === 'danger'"
type="danger"
size="small"
:class="$style['danger']"
>
{{ text }}
</el-tag>
<el-tag
v-else-if="type === 'warning'"
size="small"
:class="$style['warning']"
>
{{ text }}
</el-tag>
</fragment>
</template>
<script lang="ts">
export default {
props: ["text", "type"],
};
</script>
<style lang="scss" module>
.badge {
font-size: 11px;
line-height: 18px;
max-height: 18px;
font-weight: 400;
display: flex;
align-items: center;
padding: 2px 4px;
}
.danger {
composes: badge;
color: $--badge-danger-color;
background-color: $--badge-danger-background-color;
border-color: $--badge-danger-border-color;
}
.warning {
composes: badge;
background-color: $--badge-warning-background-color;
color: $--badge-warning-color;
border: none;
}
</style>