elk/components/status/StatusActionButton.vue
2022-11-24 13:04:29 +08:00

38 lines
798 B
Vue

<script setup lang="ts">
defineProps<{
text?: string | number
color: string
icon: string
activeIcon: string
tooltip: string
hover: string
groupHover: string
active?: boolean
disabled?: boolean
}>()
defineOptions({
inheritAttrs: false,
})
</script>
<template>
<CommonTooltip placement="bottom">
<button
flex gap-1 items-center rounded :hover="`op100 ${hover}`" group
:class="active ? [color, 'op100'] : 'op50'"
v-bind="$attrs"
>
<div rounded-full p2 :group-hover="groupHover">
<div :class="[active && activeIcon ? activeIcon : icon, { 'pointer-events-none': disabled }]" />
</div>
<span v-if="text">{{ text }}</span>
</button>
<template #popper>
{{ tooltip }}
</template>
</CommonTooltip>
</template>