misty.cafe/mistykey
1
0
Fork 0
Code Issues Pull requests 1 Projects Releases Packages Wiki Activity Actions

replace dynamic class name with inline styles for SkBadgeStrip

Browse source
This commit is contained in:
Hazelnoot 2025-07-26 15:44:52 -04:00
parent 0cfb48d363
commit 39dfe47d6a
1 changed files with 15 additions and 16 deletions
Download patch file Download diff file Expand all files Collapse all files

31
packages/frontend/src/components/SkBadgeStrip.vue
View file

@ -10,7 +10,11 @@ Horizontal strip that displays a user's badges.
<div <div
v-for="badge of badges" v-for="badge of badges"
:key="badge.key" :key="badge.key"
:class="[$style.badge, $style[`semantic_${badge.style ?? 'neutral'}`]]" :class="$style.badge"
:style="{
'color': color(badge),
'border-color': color(badge),
}"
> >
{{ badge.label }} {{ badge.label }}
</div> </div>
@ -42,6 +46,16 @@ export interface Badge {
defineProps<{ defineProps<{
badges: Badge[], badges: Badge[],
}>(); }>();
// These can't be classes, or Vite will optimize them away from production builds.
function color(badge: Badge) {
switch (badge.style) {
case 'success': return 'var(--MI_THEME-success)';
case 'warning': return 'var(--MI_THEME-warn)';
case 'error': return 'var(--MI_THEME-error)';
default: return 'unset';
}
}
</script> </script>
<style module lang="scss"> <style module lang="scss">
@ -59,19 +73,4 @@ defineProps<{
padding: 2px 6px; padding: 2px 6px;
font-size: 85%; 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> </style>