mirror of https://github.com/rancher/dashboard.git
80 lines
1.2 KiB
Vue
80 lines
1.2 KiB
Vue
<script setup lang="ts">
|
|
|
|
const STATUS = {
|
|
success: {
|
|
color: 'text-success',
|
|
icon: 'icon-checkmark'
|
|
},
|
|
warning: {
|
|
color: 'text-warning',
|
|
icon: 'icon-warning'
|
|
},
|
|
info: {
|
|
color: 'text-info',
|
|
icon: 'icon-info'
|
|
},
|
|
error: {
|
|
color: 'text-error',
|
|
icon: 'icon-error'
|
|
}
|
|
};
|
|
|
|
export interface Props {
|
|
status?: 'success' | 'warning' | 'info' | 'error',
|
|
label?: string
|
|
}
|
|
|
|
withDefaults(
|
|
defineProps<Props>(),
|
|
{
|
|
status: 'success',
|
|
label: '',
|
|
}
|
|
);
|
|
|
|
</script>
|
|
<template>
|
|
<div
|
|
class="status-badge"
|
|
>
|
|
<i
|
|
class="status-badge__icon icon"
|
|
:class="{
|
|
[STATUS[status].icon]: true,
|
|
[STATUS[status].color]: true
|
|
}"
|
|
/>
|
|
<div
|
|
v-if="label"
|
|
class="status-badge__label"
|
|
>
|
|
{{ label }}
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<style lang="scss" scoped>
|
|
.status-badge {
|
|
align-items: center;
|
|
display: inline-flex;
|
|
border: 1px solid;
|
|
border-color: var(--border);
|
|
margin-top: 20px;
|
|
|
|
& + & {
|
|
margin-left: 20px;
|
|
}
|
|
|
|
&__label {
|
|
border-left: 1px solid var(--border);
|
|
padding: 5px 20px;
|
|
color: var(--body-text);
|
|
}
|
|
|
|
&__icon {
|
|
text-align: center;
|
|
padding: 5px 10px;
|
|
}
|
|
}
|
|
</style>
|