parent
5075fdf194
commit
b7b6f0d1ca
|
@ -1,5 +1,5 @@
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
const props = defineProps<{
|
const { as = 'button', command, disabled, content, icon } = defineProps<{
|
||||||
text?: string | number
|
text?: string | number
|
||||||
content: string
|
content: string
|
||||||
color: string
|
color: string
|
||||||
|
@ -27,10 +27,10 @@ useCommand({
|
||||||
scope: 'Actions',
|
scope: 'Actions',
|
||||||
|
|
||||||
order: -2,
|
order: -2,
|
||||||
visible: () => props.command && !props.disabled,
|
visible: () => command && !disabled,
|
||||||
|
|
||||||
name: () => props.content,
|
name: () => content,
|
||||||
icon: () => props.icon,
|
icon: () => icon,
|
||||||
|
|
||||||
onActivate() {
|
onActivate() {
|
||||||
if (!checkLogin())
|
if (!checkLogin())
|
||||||
|
@ -47,18 +47,27 @@ useCommand({
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<component
|
<component
|
||||||
:is="as || 'button'"
|
:is="as"
|
||||||
v-bind="$attrs" ref="el"
|
v-bind="$attrs" ref="el"
|
||||||
w-fit flex gap-1 items-center
|
w-fit flex gap-1 items-center
|
||||||
rounded group :hover="hover"
|
rounded group
|
||||||
focus:outline-none cursor-pointer
|
:hover=" !disabled ? hover : undefined"
|
||||||
|
focus:outline-none
|
||||||
:focus-visible="hover"
|
:focus-visible="hover"
|
||||||
:class="active ? [color] : 'text-secondary'"
|
:class="active ? color : 'text-secondary'"
|
||||||
:aria-label="content"
|
:aria-label="content"
|
||||||
|
:disabled="disabled"
|
||||||
>
|
>
|
||||||
<CommonTooltip placement="bottom" :content="content">
|
<CommonTooltip placement="bottom" :content="content">
|
||||||
<div rounded-full p2 :group-hover="groupHover" :group-focus-visible="groupHover" group-focus-visible:ring="2 current">
|
<div
|
||||||
<div :class="[active && activeIcon ? activeIcon : icon, { 'pointer-events-none': disabled }]" />
|
rounded-full p2
|
||||||
|
v-bind="disabled ? {} : {
|
||||||
|
'group-hover': groupHover,
|
||||||
|
'group-focus-visible': groupHover,
|
||||||
|
'group-focus-visible:ring': '2 current',
|
||||||
|
}"
|
||||||
|
>
|
||||||
|
<div :class="active && activeIcon ? activeIcon : icon" />
|
||||||
</div>
|
</div>
|
||||||
</CommonTooltip>
|
</CommonTooltip>
|
||||||
|
|
||||||
|
|
|
@ -14,6 +14,7 @@ const { details, command } = $(props)
|
||||||
const {
|
const {
|
||||||
status,
|
status,
|
||||||
isLoading,
|
isLoading,
|
||||||
|
canReblog,
|
||||||
toggleBookmark,
|
toggleBookmark,
|
||||||
toggleFavourite,
|
toggleFavourite,
|
||||||
toggleReblog,
|
toggleReblog,
|
||||||
|
@ -62,7 +63,7 @@ const reply = () => {
|
||||||
icon="i-ri:repeat-line"
|
icon="i-ri:repeat-line"
|
||||||
active-icon="i-ri:repeat-fill"
|
active-icon="i-ri:repeat-fill"
|
||||||
:active="!!status.reblogged"
|
:active="!!status.reblogged"
|
||||||
:disabled="isLoading.reblogged"
|
:disabled="isLoading.reblogged || !canReblog"
|
||||||
:command="command"
|
:command="command"
|
||||||
@click="toggleReblog()"
|
@click="toggleReblog()"
|
||||||
>
|
>
|
||||||
|
|
|
@ -31,6 +31,7 @@ export function useStatusActions(props: StatusActionsProps) {
|
||||||
// check login
|
// check login
|
||||||
if (!checkLogin())
|
if (!checkLogin())
|
||||||
return
|
return
|
||||||
|
|
||||||
isLoading[action] = true
|
isLoading[action] = true
|
||||||
fetchNewStatus().then((newStatus) => {
|
fetchNewStatus().then((newStatus) => {
|
||||||
Object.assign(status, newStatus)
|
Object.assign(status, newStatus)
|
||||||
|
@ -44,6 +45,12 @@ export function useStatusActions(props: StatusActionsProps) {
|
||||||
if (countField)
|
if (countField)
|
||||||
status[countField] += status[action] ? 1 : -1
|
status[countField] += status[action] ? 1 : -1
|
||||||
}
|
}
|
||||||
|
|
||||||
|
const canReblog = $computed(() =>
|
||||||
|
status.visibility !== 'direct'
|
||||||
|
&& (status.visibility !== 'private' || status.account.id === currentUser.value?.account.id),
|
||||||
|
)
|
||||||
|
|
||||||
const toggleReblog = () => toggleStatusAction(
|
const toggleReblog = () => toggleStatusAction(
|
||||||
'reblogged',
|
'reblogged',
|
||||||
() => masto.v1.statuses[status.reblogged ? 'unreblog' : 'reblog'](status.id).then((res) => {
|
() => masto.v1.statuses[status.reblogged ? 'unreblog' : 'reblog'](status.id).then((res) => {
|
||||||
|
@ -79,6 +86,7 @@ export function useStatusActions(props: StatusActionsProps) {
|
||||||
return {
|
return {
|
||||||
status: $$(status),
|
status: $$(status),
|
||||||
isLoading: $$(isLoading),
|
isLoading: $$(isLoading),
|
||||||
|
canReblog: $$(canReblog),
|
||||||
toggleMute,
|
toggleMute,
|
||||||
toggleReblog,
|
toggleReblog,
|
||||||
toggleFavourite,
|
toggleFavourite,
|
||||||
|
|
Loading…
Reference in New Issue