Dominik Milacher
0dc24c4db7
Some checks failed
Build and deploy updated apps / Build & deploy (push) Failing after 50s
53 lines
1.1 KiB
Vue
53 lines
1.1 KiB
Vue
<script setup lang="ts">
|
|
import { type Type, type Color, useTypography } from '../composables/useTypography'
|
|
import { ULink } from '#components'
|
|
|
|
const props = withDefaults(
|
|
defineProps<{
|
|
class?: string
|
|
ux?: any
|
|
as: Type
|
|
visual?: Type
|
|
color?: Color
|
|
text?: string
|
|
margin?: boolean
|
|
linkProps?: any
|
|
}>(),
|
|
{ margin: true }
|
|
)
|
|
|
|
const additionalProps = computed(() => (props.as === 'link' ? props.linkProps : undefined))
|
|
|
|
const tags: Record<string, string> = {
|
|
page: 'h1',
|
|
section: 'h2',
|
|
heading: 'h3',
|
|
subheading: 'h4',
|
|
paragraph: 'p',
|
|
label: 'p',
|
|
detail: 'p',
|
|
hint: 'p',
|
|
link: ULink,
|
|
}
|
|
|
|
const config = computed(() => ({
|
|
tag: tags[props.as],
|
|
classes: useTypography({
|
|
class: props.class,
|
|
ux: props.ux,
|
|
type: props.visual ?? props.as,
|
|
color: props.color,
|
|
margin: props.margin,
|
|
}).value,
|
|
}))
|
|
</script>
|
|
|
|
<template>
|
|
<component :is="config.tag" :class="config.classes.base" v-bind="additionalProps">
|
|
<slot v-if="$slots.default" />
|
|
<template v-else-if="props.text">
|
|
{{ props.text }}
|
|
</template>
|
|
</component>
|
|
</template>
|