32 lines
772 B
Vue
32 lines
772 B
Vue
<script setup lang="ts">
|
|
import { type ColorProps, type PastelProps, type VariantProps, color } from '~/composables/color'
|
|
|
|
const emit = defineEmits<{
|
|
click: [event: MouseEvent]
|
|
}>()
|
|
const handleClick = (event: MouseEvent) => {
|
|
emit('click', event)
|
|
}
|
|
const props = defineProps<{ noUnderline?:true } & (PastelProps | ColorProps) & VariantProps>()
|
|
</script>
|
|
|
|
<template>
|
|
<button
|
|
class="funkwhale pill"
|
|
:class="props.noUnderline && 'no-underline'"
|
|
v-bind="color(props, ['interactive', 'outline'])()"
|
|
@click.stop="handleClick"
|
|
>
|
|
<div v-if="!!$slots.image" class="pill-image">
|
|
<slot name="image" />
|
|
</div>
|
|
<div class="pill-content">
|
|
<slot />
|
|
</div>
|
|
</button>
|
|
</template>
|
|
|
|
<style lang="scss">
|
|
@import './pill.scss';
|
|
</style>
|