1
0
mirror of https://github.com/elk-zone/elk synced 2024-12-25 12:07:59 +09:00
elk/components/status/StatusActionButton.vue
2022-11-27 16:11:34 +01:00

37 lines
965 B
Vue

<script setup lang="ts">
defineProps<{
text?: string | number
content: string
color: string
icon: string
activeIcon?: string
hover: string
groupHover: string
active?: boolean
disabled?: boolean
as?: string
}>()
defineOptions({
inheritAttrs: false,
})
</script>
<template>
<component
:is="as || 'button'" w-fit
flex gap-1 items-center rounded group
:hover="hover" focus:outline-none :focus-visible="hover"
:class="active ? [color] : 'text-secondary'"
v-bind="$attrs"
>
<CommonTooltip placement="bottom" :content="content">
<div rounded-full p2 :group-hover="groupHover" :group-focus-visible="groupHover" group-focus-visible:ring="2 current">
<div :class="[active && activeIcon ? activeIcon : icon, { 'pointer-events-none': disabled }]" />
</div>
</CommonTooltip>
<span v-if="text" :class="active ? [color] : 'text-secondary-light'" text-sm>{{ text }}</span>
</component>
</template>