elk/components/status/StatusActionButton.vue

88 lines
2 KiB
Vue
Raw Normal View History

2022-11-24 05:04:20 +00:00
<script setup lang="ts">
defineOptions({
inheritAttrs: false,
})
const { as = 'button', command, disabled, content, icon } = 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
2023-08-11 11:56:47 +00:00
inactiveIcon?: string
2022-11-24 05:04:20 +00:00
hover: string
elkGroupHover: string
2022-11-24 05:04:20 +00:00
active?: boolean
disabled?: boolean
2022-11-25 23:46:25 +00:00
as?: string
command?: boolean
2022-11-24 05:04:20 +00:00
}>()
defineSlots<{
text: (props: object) => void
}>()
const el = ref<HTMLDivElement>()
useCommand({
scope: 'Actions',
order: -2,
visible: () => command && !disabled,
name: () => content,
icon: () => icon,
onActivate() {
2022-12-02 02:18:57 +00:00
if (!checkLogin())
return
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"
v-bind="$attrs" ref="el"
w-fit flex gap-1 items-center transition-all select-none
rounded group
:hover=" !disabled ? hover : undefined"
focus:outline-none
:focus-visible="hover"
:class="active ? color : (disabled ? 'op25 cursor-not-allowed' : 'text-secondary')"
:aria-label="content"
:disabled="disabled"
:aria-disabled="disabled"
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
v-bind="disabled ? {} : {
'elk-group-hover': elkGroupHover,
'group-focus-visible': elkGroupHover,
'group-focus-visible:ring': '2 current',
}"
>
<div :class="active && activeIcon ? activeIcon : (disabled && inactiveIcon ? inactiveIcon : icon)" />
2022-11-27 15:11:34 +00:00
</div>
</CommonTooltip>
2022-11-24 05:04:20 +00:00
<CommonAnimateNumber v-if="text !== undefined || $slots.text" :increased="active" text-sm>
<span text-secondary-light>
<slot name="text">{{ text }}</slot>
</span>
<template #next>
<span :class="[color]">
<slot name="text">{{ text }}</slot>
</span>
</template>
</CommonAnimateNumber>
2022-11-25 23:46:25 +00:00
</component>
2022-11-24 05:04:20 +00:00
</template>