elk/components/status/StatusActionButton.vue
2022-11-30 08:30:35 +01:00

66 lines
1.5 KiB
Vue

<script setup lang="ts">
const props = defineProps<{
text?: string | number
content: string
color: string
icon: string
activeIcon?: string
hover: string
groupHover: string
active?: boolean
disabled?: boolean
as?: string
command?: boolean
}>()
defineOptions({
inheritAttrs: false,
})
const el = ref<HTMLDivElement>()
useCommand({
scope: 'Actions',
order: -2,
visible: () => props.command && !props.disabled,
name: () => props.content,
icon: () => props.icon,
onActivate() {
const clickEvent = new MouseEvent('click', {
view: window,
bubbles: true,
cancelable: true,
})
el.value?.dispatchEvent(clickEvent)
},
})
</script>
<template>
<component
:is="as || 'button'"
v-bind="$attrs" ref="el"
w-fit flex gap-1 items-center
rounded group :hover="hover"
focus:outline-none
:focus-visible="hover"
:class="active ? [color] : 'text-secondary'"
>
<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>
<CommonAnimateNumber :increased="active" text-sm>
<span text-secondary-light>{{ text }}</span>
<template #next>
<span :class="[color]">{{ text }}</span>
</template>
</CommonAnimateNumber>
</component>
</template>