koel/resources/assets/js/components/ui/tabs/TabButton.vue
2024-10-14 00:37:01 +07:00

21 lines
628 B
Vue

<template>
<button
:aria-selected="selected"
class="cursor-pointer relative px-5 py-3 rounded-t-md opacity-70 bg-white/5 uppercase text-k-text-secondary duration-200 hover:bg-white/10
aria-selected:transition-none aria-selected:text-k-text-primary aria-selected:bg-white/10 aria-selected:opacity-100"
role="tab"
type="button"
@click.prevent="emit('click')"
>
<slot />
</button>
</template>
<script lang="ts" setup>
import { toRefs } from 'vue'
const props = defineProps<{ selected: boolean }>()
const emit = defineEmits<{ (e: 'click'): void }>()
const { selected } = toRefs(props)
</script>