MrUnknownDE/VRCX
1
0
Fork 0
mirror of https://github.com/MrUnknownDE/VRCX.git synced 2026-04-24 01:03:50 +02:00
Code Issues Packages Projects Releases Wiki Activity

replace some el-button

Browse Source
This commit is contained in:
pa
2026-01-11 12:24:58 +09:00
committed by Natsumi
parent 66d8addc9f
commit 2043a321a4
34 changed files with 317 additions and 237 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
src/components/IconPicker.vue
View File

@@ -1,10 +1,9 @@
<template>
<Popover v-model:open="visible">
<PopoverTrigger asChild>
<el-button class="icon-picker__trigger" plain>
<i v-if="modelValue" :class="modelValue"></i>
<span>{{ t('nav_menu.icon_picker.pick_icon') }}</span>
</el-button>
<Button>
{{ t('nav_menu.icon_picker.pick_icon') }}
</Button>
</PopoverTrigger>
<PopoverContent side="bottom" align="start" class="w-155">
<div class="icon-picker">
@@ -47,6 +46,7 @@
<script setup>
import { computed, ref, watch } from 'vue';
import { Button } from '@/components/ui/button';
import { useI18n } from 'vue-i18n';
import { Popover, PopoverContent, PopoverTrigger } from './ui/popover';
@@ -145,14 +145,6 @@
</script>
<style scoped>
.icon-picker__trigger {
display: inline-flex;
align-items: center;
gap: 6px;
min-width: 110px;
justify-content: center;
}
.icon-picker__trigger i {
font-size: 16px;
}

9
src/components/InstanceInfo.vue
View File

@@ -7,12 +7,12 @@
>Closed At: {{ formatDateFilter(props.instance.closedAt, 'long') }}<br
/></span>
<template v-if="state.canCloseInstance">
<el-button
<Button
class="mt-1"
size="sm"
:disabled="!!props.instance.closedAt"
size="small"
type="primary"
@click="closeInstance(props.location)">
{{ t('dialog.user.info.close_instance') }} </el-button
{{ t('dialog.user.info.close_instance') }} </Button
><br /><br />
</template>
<span
@@ -64,6 +64,7 @@
<script setup>
import { reactive, watch } from 'vue';
import { Button } from '@/components/ui/button';
import { CaretBottom } from '@element-plus/icons-vue';
import { ElMessageBox } from 'element-plus';
import { toast } from 'vue-sonner';

3
src/components/LastJoin.vue
View File

@@ -4,14 +4,13 @@
<template #content>
<span>{{ t('dialog.user.info.last_join') }} <Timer :epoch="lastJoin" /></span>
</template>
<el-icon style="display: inline-block"><Location /></el-icon>
<i class="ri-history-line"></i>
</TooltipWrapper>
</span>
</template>
<script setup>
import { ref, watch } from 'vue';
import { Location } from '@element-plus/icons-vue';
import { storeToRefs } from 'pinia';
import { useI18n } from 'vue-i18n';

10
src/components/Launch.vue
View File

@@ -1,13 +1,19 @@
<template>
<div v-if="isVisible" class="inline-block">
<TooltipWrapper side="top" :content="t('dialog.user.info.launch_invite_tooltip')"
><el-button @click="confirm" size="small" :icon="SwitchButton" circle />
><Button
class="rounded-full w-6 h-6 text-xs text-muted-foreground hover:text-foreground"
size="icon"
variant="outline"
@click="confirm"
><i class="ri-login-box-line"></i
></Button>
</TooltipWrapper>
</div>
</template>
<script setup>
import { SwitchButton } from '@element-plus/icons-vue';
import { Button } from '@/components/ui/button';
import { computed } from 'vue';
import { useI18n } from 'vue-i18n';

9
src/components/dialogs/AvatarDialog/SetAvatarStylesDialog.vue
View File

@@ -68,15 +68,18 @@
</template>
<template #footer>
<el-button @click="closeSetAvatarStylesDialog">{{ t('dialog.set_avatar_styles.cancel') }}</el-button>
<el-button type="primary" @click="saveSetAvatarStylesDialog">
<Button variant="secondary" @click="closeSetAvatarStylesDialog">{{
t('dialog.set_avatar_styles.cancel')
}}</Button>
<Button @click="saveSetAvatarStylesDialog">
{{ t('dialog.set_avatar_styles.save') }}
</el-button>
</Button>
</template>
</el-dialog>
</template>
<script setup>
import { Button } from '@/components/ui/button';
import { toast } from 'vue-sonner';
import { useI18n } from 'vue-i18n';
import { watch } from 'vue';

62
src/components/dialogs/ChooseFavoriteGroupDialog.vue
View File

@@ -3,59 +3,68 @@
<div v-loading="loading">
<span style="display: block; text-align: center">{{ t('dialog.favorite.vrchat_favorites') }}</span>
<template v-if="favoriteDialog.currentGroup && favoriteDialog.currentGroup.key">
<el-button
style="display: block; width: 100%; margin: 10px 0; white-space: initial; height: auto"
<Button
variant="outline"
style="width: 100%; white-space: initial"
class="my-1"
@click="deleteFavoriteNoConfirm(favoriteDialog.objectId)">
<el-icon style="margin-right: 5px"><Check /></el-icon>
{{ favoriteDialog.currentGroup.displayName }} ({{ favoriteDialog.currentGroup.count }} /
<Check />{{ favoriteDialog.currentGroup.displayName }} ({{ favoriteDialog.currentGroup.count }} /
{{ favoriteDialog.currentGroup.capacity }})
</el-button>
</Button>
</template>
<template v-else>
<el-button
<Button
variant="outline"
v-for="group in groups"
:key="group.key"
style="display: block; width: 100%; margin: 10px 0; white-space: initial; height: auto"
style="width: 100%; white-space: initial"
class="my-1"
@click="addFavorite(group)">
{{ group.displayName }} ({{ group.count }} / {{ group.capacity }})
</el-button>
</Button>
</template>
</div>
<div v-if="favoriteDialog.type === 'world'" style="margin-top: 20px">
<span style="display: block; text-align: center">{{ t('dialog.favorite.local_favorites') }}</span>
<template v-for="group in localWorldFavoriteGroups" :key="group">
<el-button
<Button
variant="outline"
v-if="hasLocalWorldFavorite(favoriteDialog.objectId, group)"
style="display: block; width: 100%; margin: 10px 0; white-space: initial; height: auto"
style="width: 100%; white-space: initial"
class="my-1"
@click="removeLocalWorldFavorite(favoriteDialog.objectId, group)">
<el-icon style="margin-right: 5px"><Check /></el-icon>
{{ group }} ({{ localWorldFavGroupLength(group) }})
</el-button>
<el-button
<Check />{{ group }} ({{ localWorldFavGroupLength(group) }})
</Button>
<Button
variant="outline"
v-else
style="display: block; width: 100%; margin: 10px 0; white-space: initial; height: auto"
style="width: 100%; white-space: initial"
class="my-1"
@click="addLocalWorldFavorite(favoriteDialog.objectId, group)">
{{ group }} ({{ localWorldFavGroupLength(group) }})
</el-button>
</Button>
</template>
</div>
<div v-if="favoriteDialog.type === 'avatar'" style="margin-top: 20px">
<span style="display: block; text-align: center">{{ t('dialog.favorite.local_avatar_favorites') }}</span>
<span style="text-align: center">{{ t('dialog.favorite.local_avatar_favorites') }}</span>
<template v-for="group in localAvatarFavoriteGroups" :key="group">
<el-button
<Button
variant="outline"
v-if="hasLocalAvatarFavorite(favoriteDialog.objectId, group)"
style="display: block; width: 100%; margin: 10px 0; white-space: initial; height: auto"
style="width: 100%; white-space: initial"
class="my-1"
@click="removeLocalAvatarFavorite(favoriteDialog.objectId, group)">
<el-icon style="margin-right: 5px"><Check /></el-icon>
{{ group }} ({{ localAvatarFavGroupLength(group) }})
</el-button>
<el-button
<Check />{{ group }} ({{ localAvatarFavGroupLength(group) }})
</Button>
<Button
variant="outline"
v-else
style="display: block; width: 100%; margin: 10px 0; white-space: initial; height: auto"
style="width: 100%; white-space: initial"
class="my-1"
:disabled="!isLocalUserVrcPlusSupporter"
@click="addLocalAvatarFavorite(favoriteDialog.objectId, group)">
{{ group }} ({{ localAvatarFavGroupLength(group) }})
</el-button>
</Button>
</template>
</div>
</el-dialog>
@@ -63,7 +72,8 @@
<script setup>
import { computed, nextTick, ref, watch } from 'vue';
import { Check } from '@element-plus/icons-vue';
import { Button } from '@/components/ui/button';
import { Check } from 'lucide-vue-next';
import { storeToRefs } from 'pinia';
import { useI18n } from 'vue-i18n';

9
src/components/dialogs/InviteDialog/EditAndSendInviteDialog.vue
View File

@@ -21,17 +21,18 @@
style="margin-top: 10px"></el-input>
<template #footer>
<el-button @click="cancelEditAndSendInvite">
<Button variant="secondary" @click="cancelEditAndSendInvite">
{{ t('dialog.edit_send_invite_message.cancel') }}
</el-button>
<el-button type="primary" @click="saveEditAndSendInvite" :disabled="!editAndSendInviteDialog.newMessage">
</Button>
<Button @click="saveEditAndSendInvite" :disabled="!editAndSendInviteDialog.newMessage">
{{ t('dialog.edit_send_invite_message.send') }}
</el-button>
</Button>
</template>
</el-dialog>
</template>
<script setup>
import { Button } from '@/components/ui/button';
import { storeToRefs } from 'pinia';
import { toast } from 'vue-sonner';
import { useI18n } from 'vue-i18n';

35
src/components/dialogs/InviteDialog/InviteDialog.vue
View File

@@ -9,22 +9,25 @@
<div v-if="inviteDialog.visible" v-loading="inviteDialog.loading">
<Location :location="inviteDialog.worldId" :link="false" />
<br />
<el-button size="small" style="margin-top: 10px" @click="addSelfToInvite">{{
<Button size="sm" class="mr-2" variant="outline" style="margin-top: 10px" @click="addSelfToInvite">{{
t('dialog.invite.add_self')
}}</el-button>
<el-button
size="small"
}}</Button>
<Button
size="sm"
class="mr-2"
variant="outline"
:disabled="inviteDialog.friendsInInstance.length === 0"
style="margin-top: 10px"
@click="addFriendsInInstanceToInvite"
>{{ t('dialog.invite.add_friends_in_instance') }}</el-button
>{{ t('dialog.invite.add_friends_in_instance') }}</Button
>
<el-button
size="small"
<Button
size="sm"
variant="outline"
:disabled="vipFriends.length === 0"
style="margin-top: 10px"
@click="addFavoriteFriendsToInvite"
>{{ t('dialog.invite.add_favorite_friends') }}</el-button
>{{ t('dialog.invite.add_favorite_friends') }}</Button
>
<div style="width: 100%; margin-top: 15px">
@@ -61,15 +64,16 @@
</div>
<template #footer>
<el-button :disabled="inviteDialog.loading || !inviteDialog.userIds.length" @click="showSendInviteDialog">{{
t('dialog.invite.invite_with_message')
}}</el-button>
<el-button
type="primary"
<Button
variant="secondary"
class="mr-2"
:disabled="inviteDialog.loading || !inviteDialog.userIds.length"
@click="sendInvite"
>{{ t('dialog.invite.invite') }}</el-button
@click="showSendInviteDialog"
>{{ t('dialog.invite.invite_with_message') }}</Button
>
<Button :disabled="inviteDialog.loading || !inviteDialog.userIds.length" @click="sendInvite">{{
t('dialog.invite.invite')
}}</Button>
</template>
<SendInviteDialog
v-model:sendInviteDialogVisible="sendInviteDialogVisible"
@@ -81,6 +85,7 @@
<script setup>
import { computed, ref } from 'vue';
import { Button } from '@/components/ui/button';
import { Check as CheckIcon } from 'lucide-vue-next';
import { ElMessageBox } from 'element-plus';
import { storeToRefs } from 'pinia';

52
src/components/dialogs/LaunchDialog.vue
View File

@@ -8,20 +8,23 @@
style="width: 230px"
@click="$event.target.tagName === 'INPUT' && $event.target.select()" />
<TooltipWrapper side="right" :content="t('dialog.launch.copy_tooltip')">
<el-button
size="small"
:icon="CopyDocument"
style="margin-left: 5px"
circle
@click="copyInstanceMessage(launchDialog.url)" />
<Button
class="rounded-full ml-1"
size="icon-sm"
variant="ghost"
@click="copyInstanceMessage(launchDialog.url)"
><Copy
/></Button>
</TooltipWrapper>
</el-form-item>
<el-form-item v-if="launchDialog.shortUrl">
<template #label>
<span>{{ t('dialog.launch.short_url') }}</span>
<TooltipWrapper side="top" :content="t('dialog.launch.short_url_notice')">
<el-icon style="display: inline-block; margin-left: 5px"><Warning /></el-icon>
</TooltipWrapper>
<div class="flex items-center">
<span>{{ t('dialog.launch.short_url') }}</span>
<TooltipWrapper side="top" :content="t('dialog.launch.short_url_notice')">
<el-icon style="display: inline-block; margin-left: 5px"><Warning /></el-icon>
</TooltipWrapper>
</div>
</template>
<el-input
v-model="launchDialog.shortUrl"
@@ -29,12 +32,13 @@
style="width: 230px"
@click="$event.target.tagName === 'INPUT' && $event.target.select()" />
<TooltipWrapper side="right" :content="t('dialog.launch.copy_tooltip')">
<el-button
size="small"
:icon="CopyDocument"
style="display: inline-block; margin-left: 5px"
circle
@click="copyInstanceMessage(launchDialog.shortUrl)" />
<Button
class="rounded-full ml-1"
size="icon-sm"
variant="ghost"
@click="copyInstanceMessage(launchDialog.shortUrl)"
><Copy
/></Button>
</TooltipWrapper>
</el-form-item>
<el-form-item :label="t('dialog.launch.location')">
@@ -44,12 +48,13 @@
style="width: 230px"
@click="$event.target.tagName === 'INPUT' && $event.target.select()" />
<TooltipWrapper side="right" :content="t('dialog.launch.copy_tooltip')">
<el-button
size="small"
:icon="CopyDocument"
style="display: inline-block; margin-left: 5px"
circle
@click="copyInstanceMessage(launchDialog.location)" />
<Button
class="rounded-full ml-1"
size="icon-sm"
variant="ghost"
@click="copyInstanceMessage(launchDialog.location)"
><Copy
/></Button>
</TooltipWrapper>
</el-form-item>
</el-form>
@@ -121,11 +126,12 @@
DropdownMenuItem,
DropdownMenuTrigger
} from '@/components/ui/dropdown-menu';
import { CopyDocument, Warning } from '@element-plus/icons-vue';
import { Button } from '@/components/ui/button';
import { ButtonGroup } from '@/components/ui/button-group';
import { Copy } from 'lucide-vue-next';
import { ElMessageBox } from 'element-plus';
import { MoreHorizontal } from 'lucide-vue-next';
import { Warning } from '@element-plus/icons-vue';
import { storeToRefs } from 'pinia';
import { toast } from 'vue-sonner';
import { useI18n } from 'vue-i18n';

6
src/components/dialogs/ModerateGroupDialog.vue
View File

@@ -39,21 +39,21 @@
</div>
</div>
<template #footer>
<el-button
type="primary"
<Button
:disabled="!moderateGroupDialog.userId || !moderateGroupDialog.groupId"
@click="
showGroupMemberModerationDialog(moderateGroupDialog.groupId, moderateGroupDialog.userId);
moderateGroupDialog.visible = false;
">
{{ t('dialog.moderate_group.moderation_tools') }}
</el-button>
</Button>
</template>
</el-dialog>
</template>
<script setup>
import { computed, nextTick, ref, watch } from 'vue';
import { Button } from '@/components/ui/button';
import { storeToRefs } from 'pinia';
import { useI18n } from 'vue-i18n';

13
src/components/dialogs/SendBoopDialog.vue
View File

@@ -61,17 +61,22 @@
</div>
<template #footer>
<el-button size="small" @click="showGalleryPage">{{ t('dialog.boop_dialog.emoji_manager') }}</el-button>
<el-button size="small" @click="closeDialog">{{ t('dialog.boop_dialog.cancel') }}</el-button>
<el-button size="small" :disabled="!sendBoopDialog.userId" @click="sendBoop">{{
<Button size="sm" variant="outline" class="mr-2" @click="showGalleryPage">{{
t('dialog.boop_dialog.emoji_manager')
}}</Button>
<Button size="sm" variant="secondary" class="mr-2" @click="closeDialog">{{
t('dialog.boop_dialog.cancel')
}}</Button>
<Button size="sm" :disabled="!sendBoopDialog.userId" @click="sendBoop">{{
t('dialog.boop_dialog.send')
}}</el-button>
}}</Button>
</template>
</el-dialog>
</template>
<script setup>
import { computed, ref, watch } from 'vue';
import { Button } from '@/components/ui/button';
import { Check as CheckIcon } from 'lucide-vue-next';
import { storeToRefs } from 'pinia';
import { useI18n } from 'vue-i18n';

4
src/components/dialogs/UserDialog/EditNoteAndMemoDialog.vue
View File

@@ -38,8 +38,8 @@
</template>
<template #footer>
<div class="dialog-footer">
<el-button @click="cancel">Cancel</el-button>
<el-button type="primary" @click="saveChanges"> Confirm </el-button>
<Button variant="secondary" @click="cancel">Cancel</Button>
<Button @click="saveChanges"> Confirm </Button>
</div>
</template>
</el-dialog>

55
src/components/dialogs/UserDialog/UserActionDropdown.vue
View File

@@ -1,40 +1,29 @@
<template>
<div style="flex: none">
<div style="flex: none" class="flex items-center">
<template v-if="(currentUser.id !== userDialog.ref.id && userDialog.isFriend) || userDialog.isFavorite">
<TooltipWrapper
v-if="userDialog.isFavorite"
side="top"
:content="t('dialog.user.actions.unfavorite_tooltip')">
<el-button
type="warning"
:icon="StarFilled"
size="large"
circle
@click="userDialogCommand('Add Favorite')"></el-button>
<Button class="rounded-full" size="icon-lg" @click="userDialogCommand('Add Favorite')"><Star /></Button>
</TooltipWrapper>
<TooltipWrapper v-else side="top" :content="t('dialog.user.actions.favorite_tooltip')">
<el-button
type="default"
:icon="Star"
size="large"
circle
@click="userDialogCommand('Add Favorite')"></el-button>
<Button class="rounded-full" size="icon-lg" variant="outline" @click="userDialogCommand('Add Favorite')"
><Star
/></Button>
</TooltipWrapper>
</template>
<DropdownMenu>
<DropdownMenuTrigger as-child>
<el-button
:type="
userDialog.incomingRequest || userDialog.outgoingRequest
? 'success'
: userDialog.isBlock || userDialog.isMute
? 'danger'
: 'default'
"
:icon="MoreFilled"
size="large"
circle
style="margin-left: 5px"></el-button>
<div class="ml-2">
<Button variant="outline" size="icon-lg" class="rounded-full">
<Ellipsis />
<span
v-if="dotClass"
class="absolute -right-0.5 -top-0.5 h-2.5 w-2.5 rounded-full ring-2 ring-background"
:class="dotClass" />
</Button>
</div>
</DropdownMenuTrigger>
<DropdownMenuContent>
<DropdownMenuItem @click="onCommand('Refresh')">
@@ -244,21 +233,20 @@
Flag,
Message,
Microphone,
MoreFilled,
Mute,
Operation,
Picture,
Plus,
Pointer,
Postcard,
Refresh,
Share,
Star,
StarFilled,
SwitchButton,
User,
UserFilled
} from '@element-plus/icons-vue';
import { MoreHorizontal as Ellipsis, Star } from 'lucide-vue-next';
import { Button } from '@/components/ui/button';
import { computed } from 'vue';
import { storeToRefs } from 'pinia';
import { useI18n } from 'vue-i18n';
@@ -285,6 +273,15 @@
const { isGameRunning } = storeToRefs(useGameStore());
const { lastLocation } = storeToRefs(useLocationStore());
const hasRequest = computed(() => userDialog.value.incomingRequest || userDialog.value.outgoingRequest);
const hasRisk = computed(() => userDialog.value.isBlock || userDialog.value.isMute);
const dotClass = computed(() => {
if (hasRequest.value) return 'bg-emerald-500';
if (hasRisk.value) return 'bg-destructive';
return null;
});
function onCommand(command) {
props.userDialogCommand(command);
}

15
src/components/dialogs/VRCXUpdateDialog.vue
View File

@@ -53,25 +53,26 @@
</div>
<template #footer>
<el-button v-if="updateInProgress" type="primary" @click="cancelUpdate">
<Button variant="secondary" class="mr-2" v-if="updateInProgress" @click="cancelUpdate">
{{ t('dialog.vrcx_updater.cancel') }}
</el-button>
<el-button
</Button>
<Button
variant="default"
v-if="VRCXUpdateDialog.release !== pendingVRCXInstall"
:disabled="updateInProgress"
type="primary"
@click="installVRCXUpdate">
{{ t('dialog.vrcx_updater.download') }}
</el-button>
<el-button v-if="!updateInProgress && pendingVRCXInstall" type="primary" @click="restartVRCX(true)">
</Button>
<Button variant="default" v-if="!updateInProgress && pendingVRCXInstall" @click="restartVRCX(true)">
{{ t('dialog.vrcx_updater.install') }}
</el-button>
</Button>
</template>
</el-dialog>
</template>
<script setup>
import { nextTick, ref, watch } from 'vue';
import { Button } from '@/components/ui/button';
import { storeToRefs } from 'pinia';
import { useI18n } from 'vue-i18n';

9
src/components/dialogs/WorldDialog/SetWorldTagsDialog.vue
View File

@@ -77,12 +77,12 @@
</el-checkbox>
<template #footer>
<div style="display: flex">
<el-button @click="isVisible = false">
<Button variant="secondary" @click="isVisible = false">
{{ t('dialog.set_world_tags.cancel') }}
</el-button>
<el-button type="primary" @click="saveSetWorldTagsDialog">
</Button>
<Button @click="saveSetWorldTagsDialog">
{{ t('dialog.set_world_tags.save') }}
</el-button>
</Button>
</div>
</template>
</el-dialog>
@@ -90,6 +90,7 @@
<script setup>
import { computed, ref, watch } from 'vue';
import { Button } from '@/components/ui/button';
import { toast } from 'vue-sonner';
import { useI18n } from 'vue-i18n';

7
src/components/ui/button/Button.vue
View File

@@ -1,6 +1,7 @@
<script setup>
import { Primitive } from 'reka-ui';
import { cn } from '@/lib/utils';
import { computed } from 'vue';
import { buttonVariants } from '.';
@@ -8,9 +9,12 @@
variant: { type: null, required: false },
size: { type: null, required: false },
class: { type: null, required: false },
disabled: { type: Boolean, required: false },
asChild: { type: Boolean, required: false },
as: { type: null, required: false, default: 'button' }
});
const isNativeButton = computed(() => props.as === 'button' && !props.asChild);
</script>
<template>
@@ -18,6 +22,9 @@
data-slot="button"
:as="as"
:as-child="asChild"
:disabled="isNativeButton ? props.disabled : undefined"
:data-disabled="props.disabled ? '' : undefined"
:aria-disabled="props.disabled || undefined"
:class="cn(buttonVariants({ variant, size }), props.class)">
<slot />
</Primitive>

2
src/components/ui/button/index.js
View File

@@ -3,7 +3,7 @@ import { cva } from 'class-variance-authority';
export { default as Button } from './Button.vue';
export const buttonVariants = cva(
"inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
"inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:bg-muted disabled:text-muted-foreground disabled:shadow-none disabled:opacity-100 aria-disabled:pointer-events-none aria-disabled:bg-muted aria-disabled:text-muted-foreground aria-disabled:shadow-none aria-disabled:opacity-100 data-[disabled]:pointer-events-none data-[disabled]:bg-muted data-[disabled]:text-muted-foreground data-[disabled]:shadow-none data-[disabled]:opacity-100 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
{
variants: {
variant: {

12
src/components/ui/spinner/Spinner.vue Normal file
View File

@@ -0,0 +1,12 @@
<script setup>
import { Loader2Icon } from 'lucide-vue-next';
import { cn } from '@/lib/utils';
const props = defineProps({
class: { type: null, required: false }
});
</script>
<template>
<Loader2Icon role="status" aria-label="Loading" :class="cn('size-4 animate-spin', props.class)" />
</template>

1
src/components/ui/spinner/index.js Normal file
View File

@@ -0,0 +1 @@
export { default as Spinner } from "./Spinner.vue";

20
src/views/Charts/components/InstanceActivity.vue
View File

@@ -21,15 +21,24 @@
</div>
<div>
<TooltipWrapper :content="t('view.charts.instance_activity.refresh')" side="top"
><el-button :icon="Refresh" circle style="margin-right: 5px" @click="reloadData"></el-button
></TooltipWrapper>
<TooltipWrapper :content="t('view.charts.instance_activity.refresh')" side="top">
<Button
class="rounded-full"
size="icon"
variant="outline"
style="margin-right: 5px"
@click="reloadData">
<RefreshCcw />
</Button>
</TooltipWrapper>
<Popover>
<PopoverTrigger asChild>
<div>
<TooltipWrapper :content="t('view.charts.instance_activity.settings.header')" side="top">
<el-button :icon="Setting" style="margin-right: 5px" circle></el-button>
<Button class="rounded-full" size="icon" variant="outline" style="margin-right: 5px">
<Settings />
</Button>
</TooltipWrapper>
</div>
</PopoverTrigger>
@@ -132,7 +141,8 @@
<script setup>
import { computed, nextTick, onBeforeMount, onBeforeUnmount, onMounted, ref, watch } from 'vue';
import { ArrowLeft, ArrowRight, InfoFilled, Refresh, Setting, WarningFilled } from '@element-plus/icons-vue';
import { ArrowLeft, ArrowRight, InfoFilled, WarningFilled } from '@element-plus/icons-vue';
import { RefreshCcw, Settings } from 'lucide-vue-next';
import { Button } from '@/components/ui/button';
import { ButtonGroup } from '@/components/ui/button-group';
import { storeToRefs } from 'pinia';

8
src/views/FriendsLocations/FriendsLocations.vue
View File

@@ -13,9 +13,9 @@
<PopoverTrigger asChild>
<div>
<TooltipWrapper :content="t('view.charts.instance_activity.settings.header')" side="top">
<el-button style="margin-right: 5px" circle
><i class="ri-settings-3-line"></i
></el-button>
<Button class="rounded-full mr-2" size="icon" variant="outline">
<Settings />
</Button>
</TooltipWrapper>
</div>
</PopoverTrigger>
@@ -164,6 +164,8 @@
<script setup>
import { computed, nextTick, onBeforeMount, onBeforeUnmount, onMounted, ref, watch } from 'vue';
import { Loading, Search } from '@element-plus/icons-vue';
import { Button } from '@/components/ui/button';
import { Settings } from 'lucide-vue-next';
import { storeToRefs } from 'pinia';
import { useI18n } from 'vue-i18n';

41
src/views/Login/Login.vue
View File

@@ -1,16 +1,14 @@
<template>
<div style="float: left; margin: 5px; z-index: 3000">
<TooltipWrapper v-if="!noUpdater" side="top" :content="t('view.login.updater')">
<el-button type="default" size="small" :icon="Download" circle @click="showVRCXUpdateDialog"></el-button>
<Button class="rounded-full mr-2 text-xs" size="icon-sm" variant="ghost" @click="showVRCXUpdateDialog"
><CircleArrowDown
/></Button>
</TooltipWrapper>
<TooltipWrapper side="top" :content="t('view.login.proxy_settings')">
<el-button
type="default"
size="small"
:icon="Connection"
style="margin-left: 5px"
circle
@click="promptProxySettings"></el-button>
<Button class="rounded-full text-xs" size="icon-sm" variant="ghost" @click="promptProxySettings"
><Route
/></Button>
</TooltipWrapper>
</div>
<div v-loading="loginForm.loading" class="x-login-container">
@@ -79,16 +77,15 @@
clearable></el-input>
</el-form-item>
<el-form-item>
<el-button native-type="submit" type="primary" style="width: 100%">{{
t('view.login.login')
}}</el-button>
<Button type="submit" size="lg" style="width: 100%">{{ t('view.login.login') }}</Button>
</el-form-item>
</el-form>
<el-button
type="primary"
<Button
variant="Secondary"
size="lg"
style="width: 100%"
@click="openExternalLink('https://vrchat.com/register')"
>{{ t('view.login.register') }}</el-button
>{{ t('view.login.register') }}</Button
>
</div>
@@ -113,13 +110,14 @@
<span class="extra" v-text="user.user.username"></span>
<span class="extra" v-text="user.loginParams.endpoint"></span>
</div>
<el-button
type="default"
size="small"
:icon="Delete"
<Button
class="rounded-full"
size="icon-sm"
variant="ghost"
style="margin-left: 10px"
circle
@click.stop="clickDeleteSavedLogin(user.user.id)"></el-button>
@click.stop="clickDeleteSavedLogin(user.user.id)"
><i class="ri-delete-bin-line h-3 w-3"></i
></Button>
</div>
</div>
</div>
@@ -149,8 +147,9 @@
<script setup>
import { onBeforeMount, onBeforeUnmount, ref, watch } from 'vue';
import { Connection, Delete, Download } from '@element-plus/icons-vue';
import { CircleArrowDown, Route } from 'lucide-vue-next';
import { useRoute, useRouter } from 'vue-router';
import { Button } from '@/components/ui/button';
import { storeToRefs } from 'pinia';
import { useI18n } from 'vue-i18n';

5
src/views/PlayerList/components/PhotonEventTable.vue
View File

@@ -25,9 +25,9 @@
clearable
style="width: 150px"
@input="photonEventTableFilterChange"></el-input>
<el-button @click="emitShowChatboxBlacklist">{{
<Button variant="outline" @click="emitShowChatboxBlacklist">{{
t('view.player_list.photon.chatbox_blacklist')
}}</el-button>
}}</Button>
<TooltipWrapper side="bottom" :content="t('view.player_list.photon.status_tooltip')">
<div style="display: inline-flex; align-items: center; font-size: 14px">
<span v-if="ipcEnabled && !photonEventIcon">🟢</span>
@@ -389,6 +389,7 @@
<script setup>
import { ArrowRight, Download } from '@element-plus/icons-vue';
import { Button } from '@/components/ui/button';
import { storeToRefs } from 'pinia';
import { useI18n } from 'vue-i18n';

12
src/views/PlayerList/dialogs/ChatboxBlacklistDialog.vue
View File

@@ -14,18 +14,18 @@
style="margin-top: 5px"
@change="saveChatboxBlacklist">
<template #append>
<el-button
:icon="Delete"
<Button
variant="outline"
@click="
chatboxBlacklist.splice(index, 1);
saveChatboxBlacklist();
">
</el-button>
</Button>
</template>
</el-input>
<el-button size="small" style="margin-top: 5px" @click="chatboxBlacklist.push('')">
<Button size="sm" variant="outline" style="margin-top: 5px" @click="chatboxBlacklist.push('')">
{{ t('dialog.chatbox_blacklist.add_item') }}
</el-button>
</Button>
<br />
<h2>{{ t('dialog.chatbox_blacklist.user_blacklist') }}</h2>
<Badge
@@ -55,7 +55,7 @@
</template>
<script setup>
import { Delete } from '@element-plus/icons-vue';
import { Button } from '@/components/ui/button';
import { storeToRefs } from 'pinia';
import { useI18n } from 'vue-i18n';

15
src/views/Search/Search.vue
View File

@@ -5,15 +5,13 @@
:model-value="searchText"
:placeholder="t('view.search.search_placeholder')"
style="flex: 1"
clearable
@input="updateSearchText"
@keyup.enter="search"></el-input>
<TooltipWrapper side="bottom" :content="t('view.search.clear_results_tooltip')">
<el-button
type="default"
:icon="Delete"
circle
style="flex: none; margin-left: 10px"
@click="handleClearSearch"></el-button>
<Button class="rounded-full mr-2" size="icon-sm" variant="ghost" @click="handleClearSearch"
><Trash2
/></Button>
</TooltipWrapper>
</div>
<el-tabs ref="searchTabRef" style="margin-top: 15px" @tab-click="searchText = ''">
@@ -337,10 +335,11 @@
<script setup>
import { Select, SelectContent, SelectGroup, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
import { Back, Delete, Refresh, Right } from '@element-plus/icons-vue';
import { Back, Refresh, Right } from '@element-plus/icons-vue';
import { RadioGroup, RadioGroupItem } from '@/components/ui/radio-group';
import { Button } from '@/components/ui/button';
import { ButtonGroup } from '@/components/ui/button-group';
import { Trash2 } from 'lucide-vue-next';
import { ref } from 'vue';
import { storeToRefs } from 'pinia';
import { useI18n } from 'vue-i18n';
@@ -374,7 +373,7 @@
const { showUserDialog, refreshUserDialogAvatars } = useUserStore();
const { showAvatarDialog, lookupAvatars, cachedAvatars } = useAvatarStore();
const { cachedWorlds, showWorldDialog } = useWorldStore();
const { showGroupDialog, applyGroup } = useGroupStore();
const { showGroupDialog } = useGroupStore();
const { searchText, searchUserResults } = storeToRefs(useSearchStore());
const { clearSearch, moreSearchUser } = useSearchStore();
const { cachedConfig } = storeToRefs(useAuthStore());

10
src/views/Settings/components/PhotonSettings.vue
View File

@@ -35,9 +35,9 @@
</ToggleGroup>
</div>
<div class="options-container-item">
<el-button size="small" :icon="Timer" :disabled="!openVR" @click="promptPhotonOverlayMessageTimeout">{{
<Button size="sm" variant="outline" :disabled="!openVR" @click="promptPhotonOverlayMessageTimeout">{{
t('view.settings.advanced.photon.event_hud.message_timeout')
}}</el-button>
}}</Button>
</div>
<div class="options-container-item">
<Select
@@ -92,15 +92,15 @@
</ToggleGroup>
</div>
<div class="options-container-item">
<el-button size="small" :icon="Timer" :disabled="!openVR" @click="promptPhotonLobbyTimeoutThreshold">{{
<Button size="sm" variant="outline" :disabled="!openVR" @click="promptPhotonLobbyTimeoutThreshold">{{
t('view.settings.advanced.photon.timeout_hud.timeout_threshold')
}}</el-button>
}}</Button>
</div>
</div>
</template>
<script setup>
import { Timer } from '@element-plus/icons-vue';
import { Button } from '@/components/ui/button';
import { storeToRefs } from 'pinia';
import { useI18n } from 'vue-i18n';

16
src/views/Settings/dialogs/ChangelogDialog.vue
View File

@@ -21,20 +21,24 @@
style="height: 62vh; overflow-y: auto; margin-top: 10px" />
</div>
<template #footer>
<el-button @click="openExternalLink('https://github.com/vrcx-team/VRCX/releases')">
<Button
variant="ghost"
class="mr-2"
@click="openExternalLink('https://github.com/vrcx-team/VRCX/releases')">
{{ t('dialog.change_log.github') }}
</el-button>
<el-button @click="openExternalLink('https://patreon.com/Natsumi_VRCX')">
</Button>
<Button variant="outline" class="mr-2" @click="openExternalLink('https://patreon.com/Natsumi_VRCX')">
{{ t('dialog.change_log.donate') }}
</el-button>
<el-button @click="closeDialog">
</Button>
<Button @click="closeDialog">
{{ t('dialog.change_log.close') }}
</el-button>
</Button>
</template>
</el-dialog>
</template>
<script setup>
import { Button } from '@/components/ui/button';
import { defineAsyncComponent } from 'vue';
import { storeToRefs } from 'pinia';
import { useI18n } from 'vue-i18n';

26
src/views/Settings/dialogs/LaunchOptionsDialog.vue
View File

@@ -38,16 +38,23 @@
</template>
<template #footer>
<div style="display: flex">
<el-button @click="openExternalLink('https://docs.vrchat.com/docs/launch-options')">
{{ t('dialog.launch_options.vrchat_docs') }}
</el-button>
<el-button @click="openExternalLink('https://docs.unity3d.com/Manual/CommandLineArguments.html')">
{{ t('dialog.launch_options.unity_manual') }}
</el-button>
<el-button type="primary" style="margin-left: auto" @click="updateLaunchOptions">
<div class="flex items-center justify-between">
<div>
<Button
variant="outline"
class="mr-2"
@click="openExternalLink('https://docs.vrchat.com/docs/launch-options')">
{{ t('dialog.launch_options.vrchat_docs') }}
</Button>
<Button
variant="outline"
@click="openExternalLink('https://docs.unity3d.com/Manual/CommandLineArguments.html')">
{{ t('dialog.launch_options.unity_manual') }}
</Button>
</div>
<Button @click="updateLaunchOptions">
{{ t('dialog.launch_options.save') }}
</el-button>
</Button>
</div>
</template>
</el-dialog>
@@ -55,6 +62,7 @@
<script setup>
import { computed, ref } from 'vue';
import { Button } from '@/components/ui/button';
import { storeToRefs } from 'pinia';
import { toast } from 'vue-sonner';
import { useI18n } from 'vue-i18n';

5
src/views/Settings/dialogs/NotificationPositionDialog.vue
View File

@@ -78,15 +78,16 @@
<template #footer>
<div style="display: flex">
<el-button type="primary" style="margin-left: auto" @click="closeDialog">
<Button @click="closeDialog">
{{ t('dialog.notification_position.ok') }}
</el-button>
</Button>
</div>
</template>
</el-dialog>
</template>
<script setup>
import { Button } from '@/components/ui/button';
import { storeToRefs } from 'pinia';
import { useI18n } from 'vue-i18n';

6
src/views/Settings/dialogs/PrimaryPasswordDialog.vue
View File

@@ -25,20 +25,20 @@
show-password>
</el-input>
<template #footer>
<el-button
type="primary"
<Button
:disabled="
enablePrimaryPasswordDialog.password.length === 0 ||
enablePrimaryPasswordDialog.password !== enablePrimaryPasswordDialog.rePassword
"
@click="handleSetPrimaryPassword()">
{{ t('dialog.primary_password.ok') }}
</el-button>
</Button>
</template>
</el-dialog>
</template>
<script setup>
import { Button } from '@/components/ui/button';
import { storeToRefs } from 'pinia';
import { useI18n } from 'vue-i18n';

26
src/views/Settings/dialogs/TranslationApiDialog.vue
View File

@@ -86,11 +86,9 @@
</template>
<template #footer>
<div style="display: flex">
<el-button v-if="form.translationApiType === 'openai'" @click="testOpenAiTranslation" plain>
{{ t('dialog.translation_api.test') }}
</el-button>
<el-button
<div class="flex items-center justify-between">
<Button
variant="outline"
v-if="form.translationApiType === 'google'"
@click="
openExternalLink(
@@ -98,10 +96,19 @@
)
">
{{ t('dialog.translation_api.guide') }}
</el-button>
<el-button type="primary" style="margin-left: auto" @click="saveTranslationApiConfig">
{{ t('dialog.translation_api.save') }}
</el-button>
</Button>
<div>
<Button
variant="secondary"
class="mr-2"
v-if="form.translationApiType === 'openai'"
@click="testOpenAiTranslation">
{{ t('dialog.translation_api.test') }}
</Button>
<Button style="margin-left: auto" @click="saveTranslationApiConfig">
{{ t('dialog.translation_api.save') }}
</Button>
</div>
</div>
</template>
</el-dialog>
@@ -110,6 +117,7 @@
<script setup>
import { Select, SelectContent, SelectGroup, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
import { reactive, watch } from 'vue';
import { Button } from '@/components/ui/button';
import { storeToRefs } from 'pinia';
import { toast } from 'vue-sonner';
import { useI18n } from 'vue-i18n';

11
src/views/Settings/dialogs/YouTubeApiDialog.vue
View File

@@ -17,19 +17,20 @@
</el-input>
<template #footer>
<div style="display: flex">
<el-button @click="openExternalLink('https://smashballoon.com/doc/youtube-api-key/')">
<div class="flex items-center justify-between">
<Button variant="outline" @click="openExternalLink('https://smashballoon.com/doc/youtube-api-key/')">
{{ t('dialog.youtube_api.guide') }}
</el-button>
<el-button type="primary" style="margin-left: auto" @click="testYouTubeApiKey">
</Button>
<Button style="margin-left: auto" @click="testYouTubeApiKey">
{{ t('dialog.youtube_api.save') }}
</el-button>
</Button>
</div>
</template>
</el-dialog>
</template>
<script setup>
import { Button } from '@/components/ui/button';
import { storeToRefs } from 'pinia';
import { toast } from 'vue-sonner';
import { useI18n } from 'vue-i18n';

17
src/views/Sidebar/components/FriendItem.vue
View File

@@ -38,13 +38,13 @@
</template>
<template v-else-if="!friend.ref && !isRefreshFriendsLoading">
<span>{{ friend.name || friend.id }}</span>
<el-button
text
:icon="Close"
size="small"
style="margin-left: 5px"
@click.stop="$emit('confirm-delete-friend', friend.id)">
</el-button>
<Button
size="sm"
variant="ghost"
class="mr-1 w-6 h-6 text-xs"
@click.stop="$emit('confirm-delete-friend', friend.id)"
><i class="ri-delete-bin-2-line"></i>
</Button>
</template>
<el-skeleton v-else animated class="skeleton" :throttle="100">
@@ -62,7 +62,8 @@
</template>
<script setup>
import { Close, Loading, WarningFilled } from '@element-plus/icons-vue';
import { Loading, WarningFilled } from '@element-plus/icons-vue';
import { Button } from '@/components/ui/button';
import { computed } from 'vue';
import { storeToRefs } from 'pinia';
import { useI18n } from 'vue-i18n';

7
src/views/Tools/dialogs/EditInviteMessageDialog.vue
View File

@@ -18,16 +18,15 @@
style="margin-top: 10px"></el-input>
</div>
<template #footer>
<el-button @click="closeDialog">{{ t('dialog.edit_invite_message.cancel') }}</el-button>
<el-button type="primary" @click="saveEditInviteMessage">{{
t('dialog.edit_invite_message.save')
}}</el-button>
<Button variant="secondary" @click="closeDialog">{{ t('dialog.edit_invite_message.cancel') }}</Button>
<Button @click="saveEditInviteMessage">{{ t('dialog.edit_invite_message.save') }}</Button>
</template>
</el-dialog>
</template>
<script setup>
import { ref, watch } from 'vue';
import { Button } from '@/components/ui/button';
import { toast } from 'vue-sonner';
import { useI18n } from 'vue-i18n';