zio/elk
2
0
Fork 0
Code Releases 2 Packages 1 Activity

fix: align status actions (#143)

Browse source
This commit is contained in:
Shinigami 2022-11-27 16:11:34 +01:00 • committed by GitHub
parent 509ff9e016
commit e2000321c5
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 28 additions and 23 deletions
Download patch file Download diff file Expand all files Collapse all files

17
components/status/StatusActionButton.vue
View file

@ -1,6 +1,7 @@
<script setup lang="ts">
defineProps<{
text?: string | number
content: string
color: string
icon: string
activeIcon?: string
@ -18,16 +19,18 @@ defineOptions({
<template>
<component
:is="as || 'button'"
:is="as || 'button'" w-fit
flex gap-1 items-center rounded group
:hover="`op100 ${hover}`" focus:outline-none :focus-visible="`op100 ${hover}`"
:class="active ? [color, 'op100'] : 'op50'"
:hover="hover" focus:outline-none :focus-visible="hover"
:class="active ? [color] : 'text-secondary'"
v-bind="$attrs"
>
<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 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>
<span v-if="text">{{ text }}</span>
<span v-if="text" :class="active ? [color] : 'text-secondary-light'" text-sm>{{ text }}</span>
</component>
</template>