blob: 6611d35b07d9a60acef974298172725ca00ee2f9 (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
|
<!--
SPDX-FileCopyrightText: hazelnoot and other Sharkey contributors
SPDX-License-Identifier: AGPL-3.0-only
-->
<template>
<div :class="$style.badges">
<div
v-for="badge of badges"
:key="badge.key"
:class="[$style.badge, semanticClass(badge)]"
>
{{ badge.label }}
</div>
</div>
</template>
<script lang="ts">
export interface Badge {
/**
* ID/key of this badge, must be unique within the strip.
*/
key: string;
/**
* Label text to display.
* Should already be translated.
*/
label: string;
/**
* Semantic style of the badge.
* Defaults to "neutral" if unset.
*/
style?: 'success' | 'neutral' | 'warning' | 'error';
}
</script>
<script setup lang="ts">
import { useCssModule } from 'vue';
const $style = useCssModule();
defineProps<{
badges: Badge[],
}>();
function semanticClass(badge: Badge): string {
const style = badge.style ?? 'neutral';
return $style[`semantic_${style}`];
}
</script>
<style module lang="scss">
.badges {
display: flex;
flex-direction: row;
flex-wrap: wrap;
gap: var(--MI-margin);
}
.badge {
display: inline-block;
border: solid 1px;
border-radius: var(--MI-radius-sm);
padding: 2px 6px;
font-size: 85%;
}
.semantic_error {
color: var(--MI_THEME-error);
border-color: var(--MI_THEME-error);
}
.semantic_warning {
color: var(--MI_THEME-warn);
border-color: var(--MI_THEME-warn);
}
.semantic_success {
color: var(--MI_THEME-success);
border-color: var(--MI_THEME-success);
}
</style>
|
