feat: disabled boost button (#2326)
parent
a4d34323ed
commit
2267db11c6
|
@ -9,6 +9,7 @@ const { as = 'button', command, disabled, content, icon } = defineProps<{
|
||||||
color: string
|
color: string
|
||||||
icon: string
|
icon: string
|
||||||
activeIcon?: string
|
activeIcon?: string
|
||||||
|
inactiveIcon?: string
|
||||||
hover: string
|
hover: string
|
||||||
elkGroupHover: string
|
elkGroupHover: string
|
||||||
active?: boolean
|
active?: boolean
|
||||||
|
@ -54,7 +55,7 @@ useCommand({
|
||||||
:hover=" !disabled ? hover : undefined"
|
:hover=" !disabled ? hover : undefined"
|
||||||
focus:outline-none
|
focus:outline-none
|
||||||
:focus-visible="hover"
|
:focus-visible="hover"
|
||||||
:class="active ? color : 'text-secondary'"
|
:class="active ? color : (disabled ? 'op25 pointer-events-none' : 'text-secondary')"
|
||||||
:aria-label="content"
|
:aria-label="content"
|
||||||
:disabled="disabled"
|
:disabled="disabled"
|
||||||
>
|
>
|
||||||
|
@ -67,7 +68,7 @@ useCommand({
|
||||||
'group-focus-visible:ring': '2 current',
|
'group-focus-visible:ring': '2 current',
|
||||||
}"
|
}"
|
||||||
>
|
>
|
||||||
<div :class="active && activeIcon ? activeIcon : icon" />
|
<div :class="active && activeIcon ? activeIcon : (disabled ? inactiveIcon : icon)" />
|
||||||
</div>
|
</div>
|
||||||
</CommonTooltip>
|
</CommonTooltip>
|
||||||
|
|
||||||
|
|
|
@ -60,6 +60,7 @@ function reply() {
|
||||||
color="text-green" hover="text-green" elk-group-hover="bg-green/10"
|
color="text-green" hover="text-green" elk-group-hover="bg-green/10"
|
||||||
icon="i-ri:repeat-line"
|
icon="i-ri:repeat-line"
|
||||||
active-icon="i-ri:repeat-fill"
|
active-icon="i-ri:repeat-fill"
|
||||||
|
inactive-icon="i-tabler:repeat-off"
|
||||||
:active="!!status.reblogged"
|
:active="!!status.reblogged"
|
||||||
:disabled="isLoading.reblogged || !canReblog"
|
:disabled="isLoading.reblogged || !canReblog"
|
||||||
:command="command"
|
:command="command"
|
||||||
|
|
Loading…
Reference in New Issue