| 1 | <script setup lang="ts"> |
| 2 | import { computed } from 'vue' |
| 3 | import { |
| 4 | getHashColorFromString, |
| 5 | getHsla, |
| 6 | } from '../logic/color' |
| 7 | |
| 8 | const props = withDefaults( |
| 9 | defineProps<{ |
| 10 | text?: string |
| 11 | color?: boolean | number |
| 12 | as?: string |
| 13 | size?: string |
| 14 | }>(), |
| 15 | { |
| 16 | color: true, |
| 17 | }, |
| 18 | ) |
| 19 | |
| 20 | const style = computed(() => { |
| 21 | if (!props.text || props.color === false) |
| 22 | return {} |
| 23 | return { |
| 24 | color: typeof props.color === 'number' |
| 25 | ? getHsla(props.color) |
| 26 | : getHashColorFromString(props.text), |
| 27 | background: typeof props.color === 'number' |
| 28 | ? getHsla(props.color, 0.1) |
| 29 | : getHashColorFromString(props.text, 0.1), |
| 30 | } |
| 31 | }) |
| 32 | |
| 33 | const sizeClasses = computed(() => { |
| 34 | switch (props.size || 'sm') { |
| 35 | case 'sm': |
| 36 | return 'px-1.5 text-11px leading-1.6em' |
| 37 | } |
| 38 | return '' |
| 39 | }) |
| 40 | </script> |
| 41 | |
| 42 | <template> |
| 43 | <component :is="as || 'span'" ws-nowrap rounded :class="sizeClasses" :style> |
| 44 | <slot> |
| 45 | <span v-text="props.text" /> |
| 46 | </slot> |
| 47 | </component> |
| 48 | </template> |
| 49 |