elk/components/status/StatusActionButton.vue

66 lines
1.5 KiB
Vue
Raw Normal View History

2022-11-24 05:04:20 +00:00
<script setup lang="ts">
const props = defineProps<{
2022-11-24 05:04:20 +00:00
text?: string | number
2022-11-27 15:11:34 +00:00
content: string
2022-11-24 05:04:20 +00:00
color: string
icon: string
2022-11-24 08:34:05 +00:00
activeIcon?: string
2022-11-24 05:04:20 +00:00
hover: string
groupHover: string
active?: boolean
disabled?: boolean
2022-11-25 23:46:25 +00:00
as?: string
command?: boolean
2022-11-24 05:04:20 +00:00
}>()
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)
},
})
2022-11-24 05:04:20 +00:00
</script>
<template>
2022-11-25 23:46:25 +00:00
<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"
2022-11-27 15:11:34 +00:00
:class="active ? [color] : 'text-secondary'"
2022-11-24 08:34:05 +00:00
>
2022-11-27 15:11:34 +00:00
<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>
2022-11-24 05:04:20 +00:00
<CommonAnimateNumber :increased="active">
<span display-block text-secondary-light text-sm>{{ text }}</span>
<template #next>
<span display-block :class="[color]" text-sm>{{ text }}</span>
</template>
</CommonAnimateNumber>
2022-11-25 23:46:25 +00:00
</component>
2022-11-24 05:04:20 +00:00
</template>