MrUnknownDE/VRCX
1
0
Fork 0
mirror of https://github.com/MrUnknownDE/VRCX.git synced 2026-05-07 14:56:06 +02:00
Code Issues Packages Projects Releases Wiki Activity

replace el-button

Browse Source
This commit is contained in:
pa
2026-01-12 18:34:10 +09:00
committed by Natsumi
parent 59700b90ab
commit 4749e8cb56
24 changed files with 329 additions and 264 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/dialogs/AvatarDialog/AvatarDialog.vue
+10 -8
View File
@@ -338,16 +338,17 @@
accept="image/*" accept="image/*"
style="display: none" style="display: none"
@change="onFileChangeAvatarGallery" /> @change="onFileChangeAvatarGallery" />
<el-button <Button
v-if="avatarDialog.ref.authorId === currentUser.id" v-if="avatarDialog.ref.authorId === currentUser.id"
variant="outline"
size="sm"
:disabled="avatarDialog.galleryLoading" :disabled="avatarDialog.galleryLoading"
size="small" class="ml-1"
:icon="Upload" @click="displayAvatarGalleryUpload">
:loading="avatarDialog.galleryLoading" <Spinner v-if="avatarDialog.galleryLoading" />
style="margin-left: 5px" <Upload v-else />
@click="displayAvatarGalleryUpload" {{ t('dialog.screenshot_metadata.upload') }}
>{{ t('dialog.screenshot_metadata.upload') }}</el-button </Button>
>
<el-progress <el-progress
v-if="avatarDialog.galleryLoading" v-if="avatarDialog.galleryLoading"
:show-text="false" :show-text="false"
@@ -544,6 +545,7 @@
import { computed, defineAsyncComponent, nextTick, ref, watch } from 'vue'; import { computed, defineAsyncComponent, nextTick, ref, watch } from 'vue';
import { Button } from '@/components/ui/button'; import { Button } from '@/components/ui/button';
import { ElMessageBox } from 'element-plus'; import { ElMessageBox } from 'element-plus';
import { Spinner } from '@/components/ui/spinner';
import { storeToRefs } from 'pinia'; import { storeToRefs } from 'pinia';
import { toast } from 'vue-sonner'; import { toast } from 'vue-sonner';
import { useI18n } from 'vue-i18n'; import { useI18n } from 'vue-i18n';
src/components/dialogs/AvatarDialog/ChangeAvatarImageDialog.vue
+8 -6
View File
@@ -22,15 +22,15 @@
style="margin-bottom: 12px" /> style="margin-bottom: 12px" />
<span>{{ t('dialog.change_content_image.description') }}</span> <span>{{ t('dialog.change_content_image.description') }}</span>
<br /> <br />
<el-button <Button
type="default" variant="outline"
size="small" size="icon-sm"
:icon="Upload"
:loading="changeAvatarImageDialogLoading"
:disabled="changeAvatarImageDialogLoading" :disabled="changeAvatarImageDialogLoading"
@click="uploadAvatarImage"> @click="uploadAvatarImage">
<Spinner v-if="changeAvatarImageDialogLoading" />
<Upload v-else />
{{ t('dialog.change_content_image.upload') }} {{ t('dialog.change_content_image.upload') }}
</el-button> </Button>
<br /> <br />
<div class="x-change-image-item"> <div class="x-change-image-item">
<img :src="previousImageUrl" class="img-size" loading="lazy" /> <img :src="previousImageUrl" class="img-size" loading="lazy" />
@@ -40,6 +40,8 @@
</template> </template>
<script setup> <script setup>
import { Button } from '@/components/ui/button';
import { Spinner } from '@/components/ui/spinner';
import { Upload } from '@element-plus/icons-vue'; import { Upload } from '@element-plus/icons-vue';
import { ref } from 'vue'; import { ref } from 'vue';
import { storeToRefs } from 'pinia'; import { storeToRefs } from 'pinia';
src/components/dialogs/GroupDialog/GroupDialog.vue
+67 -55
View File
@@ -144,50 +144,54 @@
v-if="groupDialog.ref.myMember?.isRepresenting" v-if="groupDialog.ref.myMember?.isRepresenting"
side="top" side="top"
:content="t('dialog.group.actions.unrepresent_tooltip')"> :content="t('dialog.group.actions.unrepresent_tooltip')">
<el-button <Button
type="warning" class="rounded-full"
:icon="Star" variant="secondary"
size="large" size="icon-lg"
circle
style="margin-left: 5px" style="margin-left: 5px"
@click="clearGroupRepresentation(groupDialog.id)"></el-button> @click="clearGroupRepresentation(groupDialog.id)">
<Star />
</Button>
</TooltipWrapper> </TooltipWrapper>
<TooltipWrapper v-else side="top" :content="t('dialog.group.actions.represent_tooltip')"> <TooltipWrapper v-else side="top" :content="t('dialog.group.actions.represent_tooltip')">
<span> <span>
<el-button <Button
type="default" class="rounded-full"
:icon="StarFilled" variant="outline"
size="large" size="icon-lg"
circle
style="margin-left: 5px" style="margin-left: 5px"
:disabled="groupDialog.ref.privacy === 'private'" :disabled="groupDialog.ref.privacy === 'private'"
@click="setGroupRepresentation(groupDialog.id)"></el-button> @click="setGroupRepresentation(groupDialog.id)">
<StarFilled />
</Button>
</span> </span>
</TooltipWrapper> </TooltipWrapper>
</template> </template>
<template v-else-if="groupDialog.ref.myMember?.membershipStatus === 'requested'"> <template v-else-if="groupDialog.ref.myMember?.membershipStatus === 'requested'">
<TooltipWrapper side="top" :content="t('dialog.group.actions.cancel_join_request_tooltip')"> <TooltipWrapper side="top" :content="t('dialog.group.actions.cancel_join_request_tooltip')">
<span> <span>
<el-button <Button
type="default" class="rounded-full"
:icon="Close" variant="outline"
size="large" size="icon-lg"
circle
style="margin-left: 5px" style="margin-left: 5px"
@click="cancelGroupRequest(groupDialog.id)"></el-button> @click="cancelGroupRequest(groupDialog.id)">
<Close />
</Button>
</span> </span>
</TooltipWrapper> </TooltipWrapper>
</template> </template>
<template v-else-if="groupDialog.ref.myMember?.membershipStatus === 'invited'"> <template v-else-if="groupDialog.ref.myMember?.membershipStatus === 'invited'">
<TooltipWrapper side="top" :content="t('dialog.group.actions.pending_request_tooltip')"> <TooltipWrapper side="top" :content="t('dialog.group.actions.pending_request_tooltip')">
<span> <span>
<el-button <Button
type="default" class="rounded-full"
:icon="Check" variant="outline"
size="large" size="icon-lg"
circle
style="margin-left: 5px" style="margin-left: 5px"
@click="joinGroup(groupDialog.id)"></el-button> @click="joinGroup(groupDialog.id)">
<Check />
</Button>
</span> </span>
</TooltipWrapper> </TooltipWrapper>
</template> </template>
@@ -196,49 +200,55 @@
v-if="groupDialog.ref.joinState === 'request'" v-if="groupDialog.ref.joinState === 'request'"
side="top" side="top"
:content="t('dialog.group.actions.request_join_tooltip')"> :content="t('dialog.group.actions.request_join_tooltip')">
<el-button <Button
type="default" class="rounded-full"
:icon="Message" variant="outline"
size="large" size="icon-lg"
circle
style="margin-left: 5px" style="margin-left: 5px"
@click="joinGroup(groupDialog.id)"></el-button> @click="joinGroup(groupDialog.id)">
<Message />
</Button>
</TooltipWrapper> </TooltipWrapper>
<TooltipWrapper <TooltipWrapper
v-if="groupDialog.ref.joinState === 'invite'" v-if="groupDialog.ref.joinState === 'invite'"
side="top" side="top"
:content="t('dialog.group.actions.invite_required_tooltip')"> :content="t('dialog.group.actions.invite_required_tooltip')">
<span> <span>
<el-button <Button
type="default" class="rounded-full"
:icon="Message" variant="outline"
size="large" size="icon-lg"
disabled disabled
circle style="margin-left: 5px">
style="margin-left: 5px"></el-button> <Message />
</Button>
</span> </span>
</TooltipWrapper> </TooltipWrapper>
<TooltipWrapper <TooltipWrapper
v-if="groupDialog.ref.joinState === 'open'" v-if="groupDialog.ref.joinState === 'open'"
side="top" side="top"
:content="t('dialog.group.actions.join_group_tooltip')"> :content="t('dialog.group.actions.join_group_tooltip')">
<el-button <Button
type="default" class="rounded-full"
:icon="Check" variant="outline"
size="large" size="icon-lg"
circle
style="margin-left: 5px" style="margin-left: 5px"
@click="joinGroup(groupDialog.id)"></el-button> @click="joinGroup(groupDialog.id)">
<Check />
</Button>
</TooltipWrapper> </TooltipWrapper>
</template> </template>
<DropdownMenu> <DropdownMenu>
<DropdownMenuTrigger as-child> <DropdownMenuTrigger as-child>
<el-button <Button
:type="groupDialog.ref.membershipStatus === 'userblocked' ? 'danger' : 'default'" class="rounded-full"
:icon="MoreFilled" :variant="
size="large" groupDialog.ref.membershipStatus === 'userblocked' ? 'destructive' : 'outline'
style="margin-left: 5px" "
circle></el-button> size="icon-lg"
style="margin-left: 5px">
<MoreFilled />
</Button>
</DropdownMenuTrigger> </DropdownMenuTrigger>
<DropdownMenuContent> <DropdownMenuContent>
<DropdownMenuItem @click="groupDialogCommand('Refresh')"> <DropdownMenuItem @click="groupDialogCommand('Refresh')">
@@ -1042,13 +1052,15 @@
</template> </template>
</el-tab-pane> </el-tab-pane>
<el-tab-pane name="Photos" :label="t('dialog.group.gallery.header')" lazy> <el-tab-pane name="Photos" :label="t('dialog.group.gallery.header')" lazy>
<el-button <Button
type="default" class="rounded-full"
size="small" variant="outline"
:icon="Refresh" size="icon-sm"
:loading="isGroupGalleryLoading" :disabled="isGroupGalleryLoading"
circle @click="getGroupGalleries">
@click="getGroupGalleries" /> <Spinner v-if="isGroupGalleryLoading" />
<Refresh v-else />
</Button>
<el-tabs <el-tabs
v-model="groupDialogGalleryCurrentName" v-model="groupDialogGalleryCurrentName"
v-loading="isGroupGalleryLoading" v-loading="isGroupGalleryLoading"
src/components/dialogs/GroupDialog/GroupMemberModerationDialog.vue
+41 -31
View File
@@ -10,13 +10,15 @@
<el-tabs style="height: 100%"> <el-tabs style="height: 100%">
<el-tab-pane :label="t('dialog.group_member_moderation.members')"> <el-tab-pane :label="t('dialog.group_member_moderation.members')">
<div style="margin-top: 10px"> <div style="margin-top: 10px">
<el-button <Button
type="default" class="rounded-full"
size="small" variant="outline"
:icon="Refresh" size="icon-sm"
:loading="isGroupMembersLoading" :disabled="isGroupMembersLoading"
circle @click="loadAllGroupMembers">
@click="loadAllGroupMembers" /> <Spinner v-if="isGroupMembersLoading" />
<Refresh v-else />
</Button>
<span style="font-size: 14px; margin-left: 5px; margin-right: 5px"> <span style="font-size: 14px; margin-left: 5px; margin-right: 5px">
{{ groupMemberModerationTable.data.length }}/{{ {{ groupMemberModerationTable.data.length }}/{{
groupMemberModeration.groupRef.memberCount groupMemberModeration.groupRef.memberCount
@@ -34,8 +36,9 @@
!hasGroupPermission(groupMemberModeration.groupRef, 'group-bans-manage') !hasGroupPermission(groupMemberModeration.groupRef, 'group-bans-manage')
) )
"> ">
<el-button <Button
size="small" size="sm"
variant="outline"
:disabled=" :disabled="
Boolean( Boolean(
isGroupMembersLoading || isGroupMembersLoading ||
@@ -48,7 +51,7 @@
{{ t(memberSortOrder.name) }} {{ t(memberSortOrder.name) }}
<el-icon style="margin-left: 5px"><ArrowDown /></el-icon> <el-icon style="margin-left: 5px"><ArrowDown /></el-icon>
</span> </span>
</el-button> </Button>
</DropdownMenuTrigger> </DropdownMenuTrigger>
<DropdownMenuContent> <DropdownMenuContent>
<DropdownMenuItem <DropdownMenuItem
@@ -209,13 +212,15 @@
:label="t('dialog.group_member_moderation.bans')" :label="t('dialog.group_member_moderation.bans')"
:disabled="!hasGroupPermission(groupMemberModeration.groupRef, 'group-bans-manage')"> :disabled="!hasGroupPermission(groupMemberModeration.groupRef, 'group-bans-manage')">
<div style="margin-top: 10px"> <div style="margin-top: 10px">
<el-button <Button
type="default" class="rounded-full"
size="small" variant="outline"
:icon="Refresh" size="icon-sm"
:loading="isGroupMembersLoading" :disabled="isGroupMembersLoading"
circle @click="getAllGroupBans(groupMemberModeration.id)">
@click="getAllGroupBans(groupMemberModeration.id)"></el-button> <Spinner v-if="isGroupMembersLoading" />
<Refresh v-else />
</Button>
<span style="font-size: 14px; margin-left: 5px; margin-right: 5px">{{ <span style="font-size: 14px; margin-left: 5px; margin-right: 5px">{{
groupBansModerationTable.data.length groupBansModerationTable.data.length
}}</span> }}</span>
@@ -321,13 +326,15 @@
:label="t('dialog.group_member_moderation.invites')" :label="t('dialog.group_member_moderation.invites')"
:disabled="!hasGroupPermission(groupMemberModeration.groupRef, 'group-invites-manage')"> :disabled="!hasGroupPermission(groupMemberModeration.groupRef, 'group-invites-manage')">
<div style="margin-top: 10px"> <div style="margin-top: 10px">
<el-button <Button
type="default" class="rounded-full"
size="small" variant="outline"
:icon="Refresh" size="icon-sm"
:loading="isGroupMembersLoading" :disabled="isGroupMembersLoading"
circle @click="getAllGroupInvitesAndJoinRequests(groupMemberModeration.id)">
@click="getAllGroupInvitesAndJoinRequests(groupMemberModeration.id)"></el-button> <Spinner v-if="isGroupMembersLoading" />
<Refresh v-else />
</Button>
<br /> <br />
<el-tabs> <el-tabs>
<el-tab-pane> <el-tab-pane>
@@ -602,13 +609,15 @@
:label="t('dialog.group_member_moderation.logs')" :label="t('dialog.group_member_moderation.logs')"
:disabled="!hasGroupPermission(groupMemberModeration.groupRef, 'group-audit-view')"> :disabled="!hasGroupPermission(groupMemberModeration.groupRef, 'group-audit-view')">
<div style="margin-top: 10px"> <div style="margin-top: 10px">
<el-button <Button
type="default" class="rounded-full"
size="small" variant="outline"
:icon="Refresh" size="icon-sm"
:loading="isGroupMembersLoading" :disabled="isGroupMembersLoading"
circle @click="getAllGroupLogs(groupMemberModeration.id)">
@click="getAllGroupLogs(groupMemberModeration.id)"></el-button> <Spinner v-if="isGroupMembersLoading" />
<Refresh v-else />
</Button>
<span style="font-size: 14px; margin-left: 5px; margin-right: 5px">{{ <span style="font-size: 14px; margin-left: 5px; margin-right: 5px">{{
groupLogsModerationTable.data.length groupLogsModerationTable.data.length
}}</span> }}</span>
@@ -862,6 +871,7 @@
import { ArrowDown, Loading, Refresh, Warning } from '@element-plus/icons-vue'; import { ArrowDown, Loading, Refresh, Warning } from '@element-plus/icons-vue';
import { reactive, ref, watch } from 'vue'; import { reactive, ref, watch } from 'vue';
import { Button } from '@/components/ui/button'; import { Button } from '@/components/ui/button';
import { Spinner } from '@/components/ui/spinner';
import { Trash2 } from 'lucide-vue-next'; import { Trash2 } from 'lucide-vue-next';
import { storeToRefs } from 'pinia'; import { storeToRefs } from 'pinia';
import { toast } from 'vue-sonner'; import { toast } from 'vue-sonner';
src/components/dialogs/InviteDialog/SendInviteDialog.vue
+1
View File
@@ -93,6 +93,7 @@
<script setup> <script setup>
import { Button } from '@/components/ui/button'; import { Button } from '@/components/ui/button';
import { SquarePen } from 'lucide-vue-next';
import { ref } from 'vue'; import { ref } from 'vue';
import { storeToRefs } from 'pinia'; import { storeToRefs } from 'pinia';
import { useI18n } from 'vue-i18n'; import { useI18n } from 'vue-i18n';
src/components/dialogs/InviteGroupDialog.vue
+3 -3
View File
@@ -66,18 +66,18 @@
</div> </div>
</div> </div>
<template #footer> <template #footer>
<el-button <Button
type="primary"
:disabled="inviteGroupDialog.loading || !inviteGroupDialog.userIds.length || !inviteGroupDialog.groupId" :disabled="inviteGroupDialog.loading || !inviteGroupDialog.userIds.length || !inviteGroupDialog.groupId"
@click="sendGroupInvite"> @click="sendGroupInvite">
{{ t('dialog.invite_to_group.invite') }} {{ t('dialog.invite_to_group.invite') }}
</el-button> </Button>
</template> </template>
</el-dialog> </el-dialog>
</template> </template>
<script setup> <script setup>
import { computed, nextTick, ref, watch } from 'vue'; import { computed, nextTick, ref, watch } from 'vue';
import { Button } from '@/components/ui/button';
import { Check as CheckIcon } from 'lucide-vue-next'; import { Check as CheckIcon } from 'lucide-vue-next';
import { ElMessageBox } from 'element-plus'; import { ElMessageBox } from 'element-plus';
import { storeToRefs } from 'pinia'; import { storeToRefs } from 'pinia';
src/components/dialogs/UserDialog/EditNoteAndMemoDialog.vue
+1
View File
@@ -43,6 +43,7 @@
<script setup> <script setup>
import { ref, watch } from 'vue'; import { ref, watch } from 'vue';
import { Button } from '@/components/ui/button';
import { InputGroupCharCount } from '@/components/ui/input-group'; import { InputGroupCharCount } from '@/components/ui/input-group';
import { storeToRefs } from 'pinia'; import { storeToRefs } from 'pinia';
import { useI18n } from 'vue-i18n'; import { useI18n } from 'vue-i18n';
src/components/dialogs/UserDialog/PronounsDialog.vue
+3 -2
View File
@@ -14,14 +14,15 @@
:placeholder="t('dialog.pronouns.pronouns_placeholder')" /> :placeholder="t('dialog.pronouns.pronouns_placeholder')" />
</div> </div>
<template #footer> <template #footer>
<el-button type="primary" :disabled="pronounsDialog.loading" @click="savePronouns"> <Button :disabled="pronounsDialog.loading" @click="savePronouns">
{{ t('dialog.pronouns.update') }} {{ t('dialog.pronouns.update') }}
</el-button> </Button>
</template> </template>
</el-dialog> </el-dialog>
</template> </template>
<script setup> <script setup>
import { Button } from '@/components/ui/button';
import { InputGroupCharCount } from '@/components/ui/input-group'; import { InputGroupCharCount } from '@/components/ui/input-group';
import { toast } from 'vue-sonner'; import { toast } from 'vue-sonner';
import { useI18n } from 'vue-i18n'; import { useI18n } from 'vue-i18n';
src/components/dialogs/UserDialog/SocialStatusDialog.vue
+2 -2
View File
@@ -76,9 +76,9 @@
</div> </div>
<template #footer> <template #footer>
<el-button type="primary" :disabled="socialStatusDialog.loading" @click="saveSocialStatus"> <Button :disabled="socialStatusDialog.loading" @click="saveSocialStatus">
{{ t('dialog.social_status.update') }} {{ t('dialog.social_status.update') }}
</el-button> </Button>
</template> </template>
</el-dialog> </el-dialog>
</template> </template>
src/components/dialogs/UserDialog/UserDialog.vue
+60 -51
View File
@@ -555,14 +555,15 @@
lazy> lazy>
<div style="display: flex; align-items: center; justify-content: space-between"> <div style="display: flex; align-items: center; justify-content: space-between">
<div style="display: flex; align-items: center"> <div style="display: flex; align-items: center">
<el-button <Button
type="default" class="rounded-full"
:loading="userDialog.isMutualFriendsLoading" variant="outline"
size="small" size="icon-sm"
:icon="Refresh" :disabled="userDialog.isMutualFriendsLoading"
circle
@click="getUserMutualFriends(userDialog.id)"> @click="getUserMutualFriends(userDialog.id)">
</el-button> <Spinner v-if="userDialog.isMutualFriendsLoading" />
<Refresh v-else />
</Button>
<span style="margin-left: 5px">{{ <span style="margin-left: 5px">{{
t('dialog.user.groups.total_count', { count: userDialog.mutualFriends.length }) t('dialog.user.groups.total_count', { count: userDialog.mutualFriends.length })
}}</span> }}</span>
@@ -625,14 +626,15 @@
<el-tab-pane name="Groups" :label="t('dialog.user.groups.header')" lazy> <el-tab-pane name="Groups" :label="t('dialog.user.groups.header')" lazy>
<div style="display: flex; align-items: center; justify-content: space-between"> <div style="display: flex; align-items: center; justify-content: space-between">
<div style="display: flex; align-items: center"> <div style="display: flex; align-items: center">
<el-button <Button
type="default" class="rounded-full"
:loading="userDialog.isGroupsLoading" variant="outline"
size="small" size="icon-sm"
:icon="Refresh" :disabled="userDialog.isGroupsLoading"
circle
@click="getUserGroups(userDialog.id)"> @click="getUserGroups(userDialog.id)">
</el-button> <Spinner v-if="userDialog.isGroupsLoading" />
<Refresh v-else />
</Button>
<span style="margin-left: 5px">{{ <span style="margin-left: 5px">{{
t('dialog.user.groups.total_count', { count: userGroups.groups.length }) t('dialog.user.groups.total_count', { count: userGroups.groups.length })
}}</span> }}</span>
@@ -742,9 +744,9 @@
</div> </div>
<div style="margin-right: 3px; margin-left: 5px" @click.stop> <div style="margin-right: 3px; margin-left: 5px" @click.stop>
<el-button <Button
size="small" size="icon-sm"
:icon="DownloadIcon" variant="outline"
style=" style="
display: block; display: block;
padding: 7px; padding: 7px;
@@ -753,27 +755,31 @@
rotate: 180deg; rotate: 180deg;
" "
@click="moveGroupTop(group.id)"> @click="moveGroupTop(group.id)">
</el-button> <DownloadIcon />
<el-button </Button>
size="small" <Button
:icon="DownloadIcon" size="icon-sm"
variant="outline"
style="display: block; padding: 7px; font-size: 9px; margin-left: 0" style="display: block; padding: 7px; font-size: 9px; margin-left: 0"
@click="moveGroupBottom(group.id)"> @click="moveGroupBottom(group.id)">
</el-button> <DownloadIcon />
</Button>
</div> </div>
<div style="margin-right: 10px" @click.stop> <div style="margin-right: 10px" @click.stop>
<el-button <Button
size="small" size="icon-sm"
:icon="Top" variant="outline"
style="display: block; padding: 7px; font-size: 9px; margin-left: 0" style="display: block; padding: 7px; font-size: 9px; margin-left: 0"
@click="moveGroupUp(group.id)"> @click="moveGroupUp(group.id)">
</el-button> <Top />
<el-button </Button>
size="small" <Button
:icon="Bottom" size="icon-sm"
variant="outline"
style="display: block; padding: 7px; font-size: 9px; margin-left: 0" style="display: block; padding: 7px; font-size: 9px; margin-left: 0"
@click="moveGroupDown(group.id)"> @click="moveGroupDown(group.id)">
</el-button> <Bottom />
</Button>
</div> </div>
<div class="avatar"> <div class="avatar">
<img :src="group.iconUrl" loading="lazy" /> <img :src="group.iconUrl" loading="lazy" />
@@ -1011,14 +1017,15 @@
<el-tab-pane name="Worlds" :label="t('dialog.user.worlds.header')" lazy> <el-tab-pane name="Worlds" :label="t('dialog.user.worlds.header')" lazy>
<div style="display: flex; align-items: center; justify-content: space-between"> <div style="display: flex; align-items: center; justify-content: space-between">
<div style="display: flex; align-items: center"> <div style="display: flex; align-items: center">
<el-button <Button
type="default" class="rounded-full"
:loading="userDialog.isWorldsLoading" variant="outline"
size="small" size="icon-sm"
:icon="Refresh" :disabled="userDialog.isWorldsLoading"
circle
@click="refreshUserDialogWorlds()"> @click="refreshUserDialogWorlds()">
</el-button> <Spinner v-if="userDialog.isWorldsLoading" />
<Refresh v-else />
</Button>
<span style="margin-left: 5px">{{ <span style="margin-left: 5px">{{
t('dialog.user.worlds.total_count', { count: userDialog.worlds.length }) t('dialog.user.worlds.total_count', { count: userDialog.worlds.length })
}}</span> }}</span>
@@ -1149,24 +1156,26 @@
<el-tab-pane name="Avatars" :label="t('dialog.user.avatars.header')" lazy> <el-tab-pane name="Avatars" :label="t('dialog.user.avatars.header')" lazy>
<div style="display: flex; align-items: center; justify-content: space-between"> <div style="display: flex; align-items: center; justify-content: space-between">
<div style="display: flex; align-items: center"> <div style="display: flex; align-items: center">
<el-button <Button
v-if="userDialog.ref.id === currentUser.id" v-if="userDialog.ref.id === currentUser.id"
type="default" class="rounded-full"
:loading="userDialog.isAvatarsLoading" variant="outline"
size="small" size="icon-sm"
:icon="Refresh" :disabled="userDialog.isAvatarsLoading"
circle
@click="refreshUserDialogAvatars()"> @click="refreshUserDialogAvatars()">
</el-button> <Spinner v-if="userDialog.isAvatarsLoading" />
<el-button <Refresh v-else />
</Button>
<Button
v-else v-else
type="default" class="rounded-full"
:loading="userDialog.isAvatarsLoading" variant="outline"
size="small" size="icon-sm"
:icon="Refresh" :disabled="userDialog.isAvatarsLoading"
circle
@click="setUserDialogAvatarsRemote(userDialog.id)"> @click="setUserDialogAvatarsRemote(userDialog.id)">
</el-button> <Spinner v-if="userDialog.isAvatarsLoading" />
<Refresh v-else />
</Button>
<span style="margin-left: 5px">{{ <span style="margin-left: 5px">{{
t('dialog.user.avatars.total_count', { count: userDialogAvatars.length }) t('dialog.user.avatars.total_count', { count: userDialogAvatars.length })
}}</span> }}</span>
src/components/dialogs/WorldDialog/ChangeWorldImageDialog.vue
+6 -8
View File
@@ -22,15 +22,11 @@
style="margin-bottom: 12px" /> style="margin-bottom: 12px" />
<span>{{ t('dialog.change_content_image.description') }}</span> <span>{{ t('dialog.change_content_image.description') }}</span>
<br /> <br />
<el-button <Button variant="outline" size="sm" :disabled="changeWorldImageDialogLoading" @click="uploadWorldImage">
type="default" <Spinner v-if="changeWorldImageDialogLoading" />
size="small" <Upload v-else />
:icon="Upload"
:loading="changeWorldImageDialogLoading"
:disabled="changeWorldImageDialogLoading"
@click="uploadWorldImage">
{{ t('dialog.change_content_image.upload') }} {{ t('dialog.change_content_image.upload') }}
</el-button> </Button>
<br /> <br />
<div class="x-change-image-item"> <div class="x-change-image-item">
<img :src="previousImageUrl" class="img-size" loading="lazy" /> <img :src="previousImageUrl" class="img-size" loading="lazy" />
@@ -40,6 +36,8 @@
</template> </template>
<script setup> <script setup>
import { Button } from '@/components/ui/button';
import { Spinner } from '@/components/ui/spinner';
import { Upload } from '@element-plus/icons-vue'; import { Upload } from '@element-plus/icons-vue';
import { ref } from 'vue'; import { ref } from 'vue';
import { storeToRefs } from 'pinia'; import { storeToRefs } from 'pinia';
src/views/Charts/components/MutualFriends.vue
+4 -2
View File
@@ -13,9 +13,10 @@
</Button> </Button>
</TooltipWrapper> </TooltipWrapper>
<TooltipWrapper :content="fetchButtonLabel" side="top"> <TooltipWrapper :content="fetchButtonLabel" side="top">
<el-button type="primary" :disabled="fetchButtonDisabled" :loading="isFetching" @click="startFetch"> <Button :disabled="fetchButtonDisabled" @click="startFetch">
<Spinner v-if="isFetching" />
{{ fetchButtonLabel }} {{ fetchButtonLabel }}
</el-button> </Button>
</TooltipWrapper> </TooltipWrapper>
<TooltipWrapper <TooltipWrapper
v-if="isFetching" v-if="isFetching"
@@ -130,6 +131,7 @@
import { Button } from '@/components/ui/button'; import { Button } from '@/components/ui/button';
import { ElMessageBox } from 'element-plus'; import { ElMessageBox } from 'element-plus';
import { Settings } from 'lucide-vue-next'; import { Settings } from 'lucide-vue-next';
import { Spinner } from '@/components/ui/spinner';
import { onBeforeRouteLeave } from 'vue-router'; import { onBeforeRouteLeave } from 'vue-router';
import { storeToRefs } from 'pinia'; import { storeToRefs } from 'pinia';
import { toast } from 'vue-sonner'; import { toast } from 'vue-sonner';
src/views/Favorites/FavoritesAvatar.vue
+14 -12
View File
@@ -80,12 +80,15 @@
<div class="group-section__header"> <div class="group-section__header">
<span>{{ t('view.favorite.avatars.vrchat_favorites') }}</span> <span>{{ t('view.favorite.avatars.vrchat_favorites') }}</span>
<TooltipWrapper side="bottom" :content="t('view.favorite.refresh_favorites_tooltip')"> <TooltipWrapper side="bottom" :content="t('view.favorite.refresh_favorites_tooltip')">
<el-button <Button
:loading="isFavoriteLoading" class="rounded-full"
size="small" variant="outline"
:icon="Refresh" size="icon-sm"
circle :disabled="isFavoriteLoading"
@click.stop="handleRefreshFavorites" /> @click.stop="handleRefreshFavorites">
<Spinner v-if="isFavoriteLoading" />
<Refresh v-else />
</Button>
</TooltipWrapper> </TooltipWrapper>
</div> </div>
<div class="group-section__list"> <div class="group-section__list">
@@ -112,12 +115,9 @@
handleGroupMenuVisible(remoteGroupMenuKey(group.key), $event) handleGroupMenuVisible(remoteGroupMenuKey(group.key), $event)
"> ">
<PopoverTrigger asChild> <PopoverTrigger asChild>
<el-button <Button class="rounded-full" variant="ghost" size="icon-sm" @click.stop>
text <MoreFilled />
size="small" </Button>
:icon="MoreFilled"
circle
@click.stop></el-button>
</PopoverTrigger> </PopoverTrigger>
<PopoverContent side="right" class="w-55 p-1 rounded-lg"> <PopoverContent side="right" class="w-55 p-1 rounded-lg">
<div class="favorites-group-menu"> <div class="favorites-group-menu">
@@ -515,6 +515,8 @@
import { MoreFilled, Plus, Refresh } from '@element-plus/icons-vue'; import { MoreFilled, Plus, Refresh } from '@element-plus/icons-vue';
import { Ellipsis, RefreshCcw } from 'lucide-vue-next'; import { Ellipsis, RefreshCcw } from 'lucide-vue-next';
import { Button } from '@/components/ui/button'; import { Button } from '@/components/ui/button';
import { Loader } from 'lucide-vue-next';
import { Spinner } from '@/components/ui/spinner';
import { storeToRefs } from 'pinia'; import { storeToRefs } from 'pinia';
import { toast } from 'vue-sonner'; import { toast } from 'vue-sonner';
import { useI18n } from 'vue-i18n'; import { useI18n } from 'vue-i18n';
src/views/Favorites/FavoritesFriend.vue
+13 -12
View File
@@ -80,12 +80,15 @@
<div class="group-section__header"> <div class="group-section__header">
<span>{{ t('view.favorite.worlds.vrchat_favorites') }}</span> <span>{{ t('view.favorite.worlds.vrchat_favorites') }}</span>
<TooltipWrapper side="bottom" :content="t('view.favorite.refresh_favorites_tooltip')"> <TooltipWrapper side="bottom" :content="t('view.favorite.refresh_favorites_tooltip')">
<el-button <Button
:loading="isFavoriteLoading" class="rounded-full"
size="small" variant="outline"
:icon="Refresh" size="icon-sm"
circle :disabled="isFavoriteLoading"
@click.stop="handleRefreshFavorites" /> @click.stop="handleRefreshFavorites">
<Spinner v-if="isFavoriteLoading" />
<Refresh v-else />
</Button>
</TooltipWrapper> </TooltipWrapper>
</div> </div>
<div class="group-section__list"> <div class="group-section__list">
@@ -112,12 +115,9 @@
handleGroupMenuVisible(remoteGroupMenuKey(group.key), $event) handleGroupMenuVisible(remoteGroupMenuKey(group.key), $event)
"> ">
<PopoverTrigger asChild> <PopoverTrigger asChild>
<el-button <Button class="rounded-full" variant="ghost" size="icon-sm" @click.stop>
text <MoreFilled />
size="small" </Button>
:icon="MoreFilled"
circle
@click.stop></el-button>
</PopoverTrigger> </PopoverTrigger>
<PopoverContent side="right" class="w-55 p-1 rounded-lg"> <PopoverContent side="right" class="w-55 p-1 rounded-lg">
<div class="favorites-group-menu"> <div class="favorites-group-menu">
@@ -299,6 +299,7 @@
import { Button } from '@/components/ui/button'; import { Button } from '@/components/ui/button';
import { ElMessageBox } from 'element-plus'; import { ElMessageBox } from 'element-plus';
import { Ellipsis } from 'lucide-vue-next'; import { Ellipsis } from 'lucide-vue-next';
import { Spinner } from '@/components/ui/spinner';
import { storeToRefs } from 'pinia'; import { storeToRefs } from 'pinia';
import { toast } from 'vue-sonner'; import { toast } from 'vue-sonner';
import { useI18n } from 'vue-i18n'; import { useI18n } from 'vue-i18n';
src/views/Favorites/FavoritesWorld.vue
+13 -12
View File
@@ -80,12 +80,15 @@
<div class="group-section__header"> <div class="group-section__header">
<span>{{ t('view.favorite.worlds.vrchat_favorites') }}</span> <span>{{ t('view.favorite.worlds.vrchat_favorites') }}</span>
<TooltipWrapper side="bottom" :content="t('view.favorite.refresh_favorites_tooltip')"> <TooltipWrapper side="bottom" :content="t('view.favorite.refresh_favorites_tooltip')">
<el-button <Button
:loading="isFavoriteLoading" class="rounded-full"
size="small" variant="outline"
:icon="Refresh" size="icon-sm"
circle :disabled="isFavoriteLoading"
@click.stop="handleRefreshFavorites" /> @click.stop="handleRefreshFavorites">
<Spinner v-if="isFavoriteLoading" />
<Refresh v-else />
</Button>
</TooltipWrapper> </TooltipWrapper>
</div> </div>
<div class="group-section__list"> <div class="group-section__list">
@@ -112,12 +115,9 @@
handleGroupMenuVisible(remoteGroupMenuKey(group.key), $event) handleGroupMenuVisible(remoteGroupMenuKey(group.key), $event)
"> ">
<PopoverTrigger asChild> <PopoverTrigger asChild>
<el-button <Button class="rounded-full" variant="ghost" size="icon-sm" @click.stop>
text <MoreFilled />
size="small" </Button>
:icon="MoreFilled"
circle
@click.stop></el-button>
</PopoverTrigger> </PopoverTrigger>
<PopoverContent side="right" class="w-50 p-1 rounded-lg"> <PopoverContent side="right" class="w-50 p-1 rounded-lg">
<div class="favorites-group-menu"> <div class="favorites-group-menu">
@@ -429,6 +429,7 @@
import { Ellipsis, RefreshCcw } from 'lucide-vue-next'; import { Ellipsis, RefreshCcw } from 'lucide-vue-next';
import { Button } from '@/components/ui/button'; import { Button } from '@/components/ui/button';
import { ElMessageBox } from 'element-plus'; import { ElMessageBox } from 'element-plus';
import { Spinner } from '@/components/ui/spinner';
import { storeToRefs } from 'pinia'; import { storeToRefs } from 'pinia';
import { toast } from 'vue-sonner'; import { toast } from 'vue-sonner';
import { useI18n } from 'vue-i18n'; import { useI18n } from 'vue-i18n';
src/views/Favorites/components/FavoritesAvatarItem.vue
+5 -6
View File
@@ -52,14 +52,13 @@
? t('view.favorite.delete_tooltip') ? t('view.favorite.delete_tooltip')
: t('view.favorite.unfavorite_tooltip') : t('view.favorite.unfavorite_tooltip')
"> ">
<el-button <Button
size="small" size="icon-sm"
circle variant="outline"
class="favorites-search-card__action-btn" class="favorites-search-card__action-btn rounded-full text-xs h-6 w-6"
:type="isLocalFavorite ? 'default' : 'default'"
@click.stop="handlePrimaryDeleteAction"> @click.stop="handlePrimaryDeleteAction">
<i class="ri-delete-bin-line"></i> <i class="ri-delete-bin-line"></i>
</el-button> </Button>
</TooltipWrapper> </TooltipWrapper>
</div> </div>
</div> </div>
src/views/Favorites/components/FavoritesWorldLocalItem.vue
+5 -8
View File
@@ -32,14 +32,13 @@
type="world" /> type="world" />
</div> </div>
<div class="favorites-search-card__action"> <div class="favorites-search-card__action">
<el-button <Button
size="small" size="icon-sm"
circle :variant="shiftHeld ? 'destructive' : 'outline'"
class="favorites-search-card__action-btn" class="favorites-search-card__action-btn rounded-full text-xs h-6 w-6"
:type="deleteButtonType"
@click.stop="handlePrimaryDeleteAction"> @click.stop="handlePrimaryDeleteAction">
<i class="ri-delete-bin-line"></i> <i class="ri-delete-bin-line"></i>
</el-button> </Button>
</div> </div>
</div> </div>
</template> </template>
@@ -142,8 +141,6 @@
return url || props.favorite.thumbnailImageUrl; return url || props.favorite.thumbnailImageUrl;
}); });
const deleteButtonType = computed(() => (shiftHeld.value ? 'danger' : 'default'));
const inviteOrLaunchText = computed(() => { const inviteOrLaunchText = computed(() => {
return canOpenInstanceInGame return canOpenInstanceInGame
? t('dialog.world.actions.new_instance_and_open_ingame') ? t('dialog.world.actions.new_instance_and_open_ingame')
src/views/Moderation/Moderation.vue
+11 -6
View File
@@ -19,12 +19,15 @@
:placeholder="t('view.moderation.search_placeholder')" :placeholder="t('view.moderation.search_placeholder')"
class="filter-input" /> class="filter-input" />
<TooltipWrapper side="bottom" :content="t('view.moderation.refresh_tooltip')"> <TooltipWrapper side="bottom" :content="t('view.moderation.refresh_tooltip')">
<el-button <Button
type="default" class="rounded-full"
:loading="playerModerationTable.loading" variant="outline"
@click="refreshPlayerModerations()" size="icon-sm"
:icon="Refresh" :disabled="playerModerationTable.loading"
circle /> @click="refreshPlayerModerations()">
<Spinner v-if="playerModerationTable.loading" />
<Refresh v-else />
</Button>
</TooltipWrapper> </TooltipWrapper>
</div> </div>
@@ -40,8 +43,10 @@
<script setup> <script setup>
import { computed, ref, watch } from 'vue'; import { computed, ref, watch } from 'vue';
import { Button } from '@/components/ui/button';
import { ElMessageBox } from 'element-plus'; import { ElMessageBox } from 'element-plus';
import { Refresh } from '@element-plus/icons-vue'; import { Refresh } from '@element-plus/icons-vue';
import { Spinner } from '@/components/ui/spinner';
import { storeToRefs } from 'pinia'; import { storeToRefs } from 'pinia';
import { useI18n } from 'vue-i18n'; import { useI18n } from 'vue-i18n';
src/views/Notifications/Notification.vue
+11 -6
View File
@@ -49,13 +49,16 @@
class="flex-[0.4]" class="flex-[0.4]"
style="margin: 0 10px" /> style="margin: 0 10px" />
<TooltipWrapper side="bottom" :content="t('view.notification.refresh_tooltip')"> <TooltipWrapper side="bottom" :content="t('view.notification.refresh_tooltip')">
<el-button <Button
type="default" class="rounded-full"
:loading="isNotificationsLoading" variant="outline"
:icon="Refresh" size="icon-sm"
circle :disabled="isNotificationsLoading"
style="flex: none" style="flex: none"
@click="refreshNotifications()" /> @click="refreshNotifications()">
<Spinner v-if="isNotificationsLoading" />
<Refresh v-else />
</Button>
</TooltipWrapper> </TooltipWrapper>
</div> </div>
</template> </template>
@@ -71,8 +74,10 @@
<script setup> <script setup>
import { computed, ref, watch } from 'vue'; import { computed, ref, watch } from 'vue';
import { Button } from '@/components/ui/button';
import { ElMessageBox } from 'element-plus'; import { ElMessageBox } from 'element-plus';
import { Refresh } from '@element-plus/icons-vue'; import { Refresh } from '@element-plus/icons-vue';
import { Spinner } from '@/components/ui/spinner';
import { storeToRefs } from 'pinia'; import { storeToRefs } from 'pinia';
import { toast } from 'vue-sonner'; import { toast } from 'vue-sonner';
import { useI18n } from 'vue-i18n'; import { useI18n } from 'vue-i18n';
src/views/Search/Search.vue
+10 -8
View File
@@ -158,14 +158,15 @@
</SelectContent> </SelectContent>
</Select> </Select>
<TooltipWrapper side="bottom" :content="t('view.search.avatar.refresh_tooltip')"> <TooltipWrapper side="bottom" :content="t('view.search.avatar.refresh_tooltip')">
<el-button <Button
type="default" class="rounded-full ml-1"
:loading="userDialog.isAvatarsLoading" variant="outline"
size="small" size="icon-sm"
:icon="Refresh" :disabled="userDialog.isAvatarsLoading"
class="ml-1" @click="refreshUserDialogAvatars">
circle <Spinner v-if="userDialog.isAvatarsLoading" />
@click="refreshUserDialogAvatars"></el-button> <Refresh v-else />
</Button>
</TooltipWrapper> </TooltipWrapper>
<span style="font-size: 14px; margin-left: 5px; margin-right: 5px">{{ <span style="font-size: 14px; margin-left: 5px; margin-right: 5px">{{
t('view.search.avatar.result_count', { t('view.search.avatar.result_count', {
@@ -346,6 +347,7 @@
import { Button } from '@/components/ui/button'; import { Button } from '@/components/ui/button';
import { ButtonGroup } from '@/components/ui/button-group'; import { ButtonGroup } from '@/components/ui/button-group';
import { Checkbox } from '@/components/ui/checkbox'; import { Checkbox } from '@/components/ui/checkbox';
import { Spinner } from '@/components/ui/spinner';
import { Trash2 } from 'lucide-vue-next'; import { Trash2 } from 'lucide-vue-next';
import { ref } from 'vue'; import { ref } from 'vue';
import { storeToRefs } from 'pinia'; import { storeToRefs } from 'pinia';
src/views/Settings/dialogs/VRChatConfigDialog.vue
+10 -7
View File
@@ -17,14 +17,16 @@
<span v-text="totalCacheSize"></span> <span v-text="totalCacheSize"></span>
<span>GB</span> <span>GB</span>
<TooltipWrapper side="top" :content="t('dialog.config_json.refresh')"> <TooltipWrapper side="top" :content="t('dialog.config_json.refresh')">
<el-button <Button
type="default" class="rounded-full"
:loading="VRChatCacheSizeLoading" variant="outline"
size="small" size="icon-sm"
:icon="Refresh" :disabled="VRChatCacheSizeLoading"
circle
style="margin-left: 5px" style="margin-left: 5px"
@click="getVRChatCacheSize"></el-button> @click="getVRChatCacheSize">
<Spinner v-if="VRChatCacheSizeLoading" />
<Refresh v-else />
</Button>
</TooltipWrapper> </TooltipWrapper>
<div style="margin-top: 10px"> <div style="margin-top: 10px">
@@ -173,6 +175,7 @@
import { Checkbox } from '@/components/ui/checkbox'; import { Checkbox } from '@/components/ui/checkbox';
import { ElMessageBox } from 'element-plus'; import { ElMessageBox } from 'element-plus';
import { Refresh } from '@element-plus/icons-vue'; import { Refresh } from '@element-plus/icons-vue';
import { Spinner } from '@/components/ui/spinner';
import { storeToRefs } from 'pinia'; import { storeToRefs } from 'pinia';
import { toast } from 'vue-sonner'; import { toast } from 'vue-sonner';
import { useI18n } from 'vue-i18n'; import { useI18n } from 'vue-i18n';
src/views/Sidebar/Sidebar.vue
+11 -7
View File
@@ -42,14 +42,16 @@
</el-select> </el-select>
<div> <div>
<TooltipWrapper side="bottom" :content="t('side_panel.refresh_tooltip')"> <TooltipWrapper side="bottom" :content="t('side_panel.refresh_tooltip')">
<el-button <Button
type="default" class="rounded-full"
:loading="isRefreshFriendsLoading" variant="outline"
size="small" size="icon-sm"
:icon="Refresh" :disabled="isRefreshFriendsLoading"
circle
style="margin-right: 10px" style="margin-right: 10px"
@click="refreshFriendsList"></el-button> @click="refreshFriendsList">
<Spinner v-if="isRefreshFriendsLoading" />
<Refresh v-else />
</Button>
</TooltipWrapper> </TooltipWrapper>
</div> </div>
</div> </div>
@@ -74,7 +76,9 @@
</template> </template>
<script setup> <script setup>
import { Button } from '@/components/ui/button';
import { Refresh } from '@element-plus/icons-vue'; import { Refresh } from '@element-plus/icons-vue';
import { Spinner } from '@/components/ui/spinner';
import { storeToRefs } from 'pinia'; import { storeToRefs } from 'pinia';
import { useI18n } from 'vue-i18n'; import { useI18n } from 'vue-i18n';
src/views/Tools/components/GroupCalendarEventCard.vue
+9 -6
View File
@@ -15,14 +15,16 @@
</template> </template>
<el-descriptions-item> <el-descriptions-item>
<el-button type="default" :icon="Calendar" size="small" @click="openCalendarEvent(event)">{{ <Button variant="outline" size="sm" @click="openCalendarEvent(event)">
t('dialog.group_calendar.event_card.export_to_calendar') <Calendar />
}}</el-button> {{ t('dialog.group_calendar.event_card.export_to_calendar') }}
</Button>
</el-descriptions-item> </el-descriptions-item>
<el-descriptions-item> <el-descriptions-item>
<el-button type="default" :icon="Download" size="small" @click="downloadEventIcs(event)">{{ <Button variant="outline" size="sm" @click="downloadEventIcs(event)">
t('dialog.group_calendar.event_card.download_ics') <Download />
}}</el-button> {{ t('dialog.group_calendar.event_card.download_ics') }}
</Button>
</el-descriptions-item> </el-descriptions-item>
<el-descriptions-item :label="t('dialog.group_calendar.event_card.category')"> <el-descriptions-item :label="t('dialog.group_calendar.event_card.category')">
{{ capitalizeFirst(event.category) }} {{ capitalizeFirst(event.category) }}
@@ -72,6 +74,7 @@
<script setup> <script setup>
import { Calendar, Download, Share, Star, StarFilled } from '@element-plus/icons-vue'; import { Calendar, Download, Share, Star, StarFilled } from '@element-plus/icons-vue';
import { Button } from '@/components/ui/button';
import { computed } from 'vue'; import { computed } from 'vue';
import { toast } from 'vue-sonner'; import { toast } from 'vue-sonner';
import { useI18n } from 'vue-i18n'; import { useI18n } from 'vue-i18n';
src/views/Tools/dialogs/NoteExportDialog.vue
+11 -6
View File
@@ -16,15 +16,20 @@
{{ t('dialog.note_export.description8') }} <br /> {{ t('dialog.note_export.description8') }} <br />
</div> </div>
<el-button size="small" :disabled="loading" style="margin-top: 10px" @click="updateNoteExportDialog"> <Button
size="sm"
variant="outline"
:disabled="loading"
style="margin-top: 10px"
@click="updateNoteExportDialog">
{{ t('dialog.note_export.refresh') }} {{ t('dialog.note_export.refresh') }}
</el-button> </Button>
<el-button size="small" :disabled="loading" style="margin-top: 10px" @click="exportNoteExport"> <Button size="sm" variant="outline" :disabled="loading" style="margin-top: 10px" @click="exportNoteExport">
{{ t('dialog.note_export.export') }} {{ t('dialog.note_export.export') }}
</el-button> </Button>
<el-button v-if="loading" size="small" style="margin-top: 10px" @click="cancelNoteExport"> <Button v-if="loading" size="sm" variant="outline" style="margin-top: 10px" @click="cancelNoteExport">
{{ t('dialog.note_export.cancel') }} {{ t('dialog.note_export.cancel') }}
</el-button> </Button>
<span v-if="loading" style="margin: 10px"> <span v-if="loading" style="margin: 10px">
<el-icon style="margin-right: 5px"><Loading /></el-icon> <el-icon style="margin-right: 5px"><Loading /></el-icon>
{{ t('dialog.note_export.progress') }} {{ progress }}/{{ progressTotal }} {{ t('dialog.note_export.progress') }} {{ progress }}/{{ progressTotal }}