elk/components/status/StatusActionButton.vue

34 lines
818 B
Vue
Raw Normal View History

2022-11-24 08:04:20 +03:00
<script setup lang="ts">
defineProps<{
text?: string | number
color: string
icon: string
2022-11-24 11:34:05 +03:00
activeIcon?: string
2022-11-24 08:04:20 +03:00
hover: string
groupHover: string
active?: boolean
disabled?: boolean
2022-11-26 02:46:25 +03:00
as?: string
2022-11-24 08:04:20 +03:00
}>()
defineOptions({
inheritAttrs: false,
})
</script>
<template>
2022-11-26 02:46:25 +03:00
<component
:is="as || 'button'"
flex gap-1 items-center rounded group
:hover="`op100 ${hover}`" focus:outline-none :focus-visible="`op100 ${hover}`"
2022-11-24 11:34:05 +03:00
:class="active ? [color, 'op100'] : 'op50'"
v-bind="$attrs"
>
2022-11-26 02:46:25 +03:00
<div rounded-full p2 :group-hover="groupHover" :group-focus-visible="groupHover" group-focus-visible:ring="2 current">
2022-11-24 11:34:05 +03:00
<div :class="[active && activeIcon ? activeIcon : icon, { 'pointer-events-none': disabled }]" />
</div>
2022-11-24 08:04:20 +03:00
2022-11-24 11:34:05 +03:00
<span v-if="text">{{ text }}</span>
2022-11-26 02:46:25 +03:00
</component>
2022-11-24 08:04:20 +03:00
</template>