Abizrh
73 lines
1.2 KiB
Vue
73 lines
1.2 KiB
Vue
<script setup lang="ts">
|
|
const props = withDefaults(
|
|
defineProps<{
|
|
size?: 'default' | 'narrow' | 'wide'
|
|
height?: 'default' | 'compact'
|
|
position?: 'default' | 'dynamic'
|
|
class?: string
|
|
}>(),
|
|
{
|
|
size: 'default',
|
|
height: 'default',
|
|
position: 'default',
|
|
class: '',
|
|
},
|
|
)
|
|
|
|
const classVal = computed(() => {
|
|
let val = ''
|
|
|
|
if (props.size === 'narrow') val += 'size-narrow '
|
|
else if (props.size === 'wide') val += 'size-wide '
|
|
else val += 'size-default '
|
|
|
|
if (props.height === 'compact') val += 'height-compact '
|
|
else val += 'height-default '
|
|
|
|
if (props.position === 'dynamic') val += 'position-dynamic '
|
|
else val += 'position-default '
|
|
|
|
return (val + (props.class || '')).trim()
|
|
})
|
|
</script>
|
|
|
|
<template>
|
|
<div class="label" :class="classVal">
|
|
<label>
|
|
<slot />
|
|
</label>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.label {
|
|
@apply block flex-shrink-0 shrink-0;
|
|
}
|
|
|
|
.size-default {
|
|
@apply w-28 2xl:w-36;
|
|
}
|
|
.size-narrow {
|
|
@apply w-24 2xl:w-28;
|
|
}
|
|
.size-wide {
|
|
@apply w-44 2xl:w-48;
|
|
}
|
|
|
|
.height-default {
|
|
@apply pt-2 2xl:pt-2.5;
|
|
}
|
|
|
|
.height-compact {
|
|
line-height: 14pt;
|
|
}
|
|
|
|
.position-default {
|
|
@apply pe-2 text-start;
|
|
}
|
|
|
|
.position-dynamic > * {
|
|
@apply block pe-2.5 md:text-end;
|
|
}
|
|
</style>
|