Button
9 months ago
HostingerTools
9 months ago
Icon
9 months ago
Loaders
9 months ago
Modals
9 months ago
AccordionCard.vue
9 months ago
Card.vue
9 months ago
CircleLoader.vue
9 months ago
CopyField.vue
9 months ago
Label.vue
9 months ago
NoResults.vue
9 months ago
Notice.vue
1 year ago
OverheadButton.vue
9 months ago
PluginSplitNotice.vue
9 months ago
Stepper.vue
9 months ago
Toggle.vue
9 months ago
Label.vue
40 lines
| 1 | <script setup lang="ts"> |
| 2 | import { computed } from "vue"; |
| 3 | |
| 4 | import { H_LABEL_THEME_CONFIGURATION, HLabelTheme } from "@/types"; |
| 5 | import { wrapInCssVar } from "@/utils/helpers"; |
| 6 | |
| 7 | interface Props { |
| 8 | theme?: HLabelTheme; |
| 9 | } |
| 10 | |
| 11 | const props = withDefaults(defineProps<Props>(), { |
| 12 | theme: "primary" |
| 13 | }); |
| 14 | |
| 15 | const configuration = computed(() => H_LABEL_THEME_CONFIGURATION[props.theme]); |
| 16 | |
| 17 | const style = computed(() => ({ |
| 18 | backgroundColor: wrapInCssVar(configuration.value.backgroundColor), |
| 19 | color: wrapInCssVar(configuration.value.color) |
| 20 | })); |
| 21 | </script> |
| 22 | |
| 23 | <template> |
| 24 | <div class="label text-overline"> |
| 25 | <slot /> |
| 26 | </div> |
| 27 | </template> |
| 28 | |
| 29 | <style lang="scss" scoped> |
| 30 | .label { |
| 31 | display: flex; |
| 32 | padding: 4px 8px; |
| 33 | align-items: center; |
| 34 | gap: 10px; |
| 35 | border-radius: 6px; |
| 36 | background-color: v-bind("style.backgroundColor"); |
| 37 | color: v-bind("style.color"); |
| 38 | } |
| 39 | </style> |
| 40 |