MrUnknownDE/VRCX
1
0
Fork 0
mirror of https://github.com/MrUnknownDE/VRCX.git synced 2026-04-17 05:43:51 +02:00
Code Issues Packages Projects Releases Wiki Activity

replace el-dropdown

Browse Source
This commit is contained in:
pa
2026-01-08 22:41:05 +09:00
committed by Natsumi
parent 3d37cebefc
commit 4eabeb11e0
21 changed files with 799 additions and 683 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/app.css
View File

@@ -1326,6 +1326,8 @@ i.x-status-icon.red {
.options-container-item {
font-size: 12px;
margin-top: 5px;
display: flex;
align-items: center;
}
.options-container-item .name {

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

@@ -54,64 +54,60 @@
</el-form-item>
</el-form>
<template #footer>
<el-button
:disabled="!checkCanInvite(launchDialog.location)"
@click="showInviteDialog(launchDialog.location)">
{{ t('dialog.launch.invite') }}
</el-button>
<template v-if="canOpenInstanceInGame">
<el-button
<div class="flex justify-end">
<Button
class="mr-1.5"
variant="outline"
:disabled="!checkCanInvite(launchDialog.location)"
@click="showInviteDialog(launchDialog.location)">
{{ t('dialog.launch.invite') }}
</Button>
<Button
v-if="canOpenInstanceInGame"
variant="outline"
:disabled="!launchDialog.secureOrShortName"
@click="handleAttachGame(launchDialog.location, launchDialog.shortName)">
{{ t('dialog.launch.open_ingame') }}
</el-button>
<el-dropdown
split-button
type="primary"
:disabled="!launchDialog.secureOrShortName"
@click="handleLaunchDefault(launchDialog.location, launchDialog.shortName)"
@command="(cmd) => handleLaunchCommand(cmd, launchDialog.location, launchDialog.shortName)">
{{ launchModeLabel }}
<template #dropdown>
<el-dropdown-menu>
<el-dropdown-item :command="launchDialog.desktop ? 'vr' : 'desktop'">
{{
launchDialog.desktop
? t('dialog.launch.launch')
: t('dialog.launch.start_as_desktop')
}}
</el-dropdown-item>
</el-dropdown-menu>
</template>
</el-dropdown>
</template>
<template v-else>
<el-button
</Button>
<Button
v-else
variant="outline"
class="mr-1.25"
:disabled="!launchDialog.secureOrShortName"
@click="selfInvite(launchDialog.location, launchDialog.shortName)">
{{ t('dialog.launch.self_invite') }}
</el-button>
<el-dropdown
split-button
type="primary"
:disabled="!launchDialog.secureOrShortName"
@click="handleLaunchDefault(launchDialog.location, launchDialog.shortName)"
@command="(cmd) => handleLaunchCommand(cmd, launchDialog.location, launchDialog.shortName)">
{{ launchModeLabel }}
<template #dropdown>
<el-dropdown-menu>
<el-dropdown-item :command="launchDialog.desktop ? 'vr' : 'desktop'">
</Button>
<ButtonGroup>
<Button
:disabled="!launchDialog.secureOrShortName"
@click="handleLaunchDefault(launchDialog.location, launchDialog.shortName)">
{{ launchModeLabel }}
</Button>
<DropdownMenu>
<DropdownMenuTrigger as-child>
<Button size="icon" :disabled="!launchDialog.secureOrShortName" aria-label="More options">
<MoreHorizontal class="size-4" />
</Button>
</DropdownMenuTrigger>
<DropdownMenuContent align="end" class="w-52">
<DropdownMenuItem
@click="
handleLaunchCommand(
launchDialog.desktop ? 'vr' : 'desktop',
launchDialog.location,
launchDialog.shortName
)
">
{{
launchDialog.desktop
? t('dialog.launch.launch')
: t('dialog.launch.start_as_desktop')
}}
</el-dropdown-item>
</el-dropdown-menu>
</template>
</el-dropdown>
</template>
</DropdownMenuItem>
</DropdownMenuContent>
</DropdownMenu>
</ButtonGroup>
</div>
</template>
<InviteDialog :invite-dialog="inviteDialog" @closeInviteDialog="closeInviteDialog" />
</el-dialog>
@@ -119,8 +115,17 @@
<script setup>
import { computed, nextTick, onBeforeUnmount, ref, watch } from 'vue';
import {
DropdownMenu,
DropdownMenuContent,
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 { ElMessageBox } from 'element-plus';
import { MoreHorizontal } from 'lucide-vue-next';
import { storeToRefs } from 'pinia';
import { toast } from 'vue-sonner';
import { useI18n } from 'vue-i18n';

12
src/components/ui/button-group/ButtonGroup.vue
View File

@@ -1,12 +1,12 @@
<script setup>
import { cn } from '@/lib/utils';
import { cn } from '@/lib/utils';
import { buttonGroupVariants } from '.';
import { buttonGroupVariants } from '.';
const props = defineProps({
class: { type: null, required: false },
orientation: { type: null, required: false }
});
const props = defineProps({
class: { type: null, required: false },
orientation: { type: null, required: false }
});
</script>
<template>

22
src/components/ui/button-group/ButtonGroupSeparator.vue
View File

@@ -1,16 +1,16 @@
<script setup>
import { Separator } from '@/components/ui/separator';
import { cn } from '@/lib/utils';
import { reactiveOmit } from '@vueuse/core';
import { Separator } from '@/components/ui/separator';
import { cn } from '@/lib/utils';
import { reactiveOmit } from '@vueuse/core';
const props = defineProps({
orientation: { type: String, required: false, default: 'vertical' },
decorative: { type: Boolean, required: false },
asChild: { type: Boolean, required: false },
as: { type: null, required: false },
class: { type: null, required: false }
});
const delegatedProps = reactiveOmit(props, 'class');
const props = defineProps({
orientation: { type: String, required: false, default: 'vertical' },
decorative: { type: Boolean, required: false },
asChild: { type: Boolean, required: false },
as: { type: null, required: false },
class: { type: null, required: false }
});
const delegatedProps = reactiveOmit(props, 'class');
</script>
<template>

16
src/components/ui/button-group/ButtonGroupText.vue
View File

@@ -1,13 +1,13 @@
<script setup>
import { Primitive } from 'reka-ui';
import { cn } from '@/lib/utils';
import { Primitive } from 'reka-ui';
import { cn } from '@/lib/utils';
const props = defineProps({
class: { type: null, required: false },
orientation: { type: null, required: false },
asChild: { type: Boolean, required: false },
as: { type: null, required: false, default: 'div' }
});
const props = defineProps({
class: { type: null, required: false },
orientation: { type: null, required: false },
asChild: { type: Boolean, required: false },
as: { type: null, required: false, default: 'div' }
});
</script>
<template>

38
src/components/ui/select/Select.vue
View File

@@ -1,26 +1,26 @@
<script setup>
import { SelectRoot, useForwardPropsEmits } from "reka-ui";
import { SelectRoot, useForwardPropsEmits } from 'reka-ui';
const props = defineProps({
open: { type: Boolean, required: false },
defaultOpen: { type: Boolean, required: false },
defaultValue: { type: null, required: false },
modelValue: { type: null, required: false },
by: { type: [String, Function], required: false },
dir: { type: String, required: false },
multiple: { type: Boolean, required: false },
autocomplete: { type: String, required: false },
disabled: { type: Boolean, required: false },
name: { type: String, required: false },
required: { type: Boolean, required: false },
});
const emits = defineEmits(["update:modelValue", "update:open"]);
const props = defineProps({
open: { type: Boolean, required: false },
defaultOpen: { type: Boolean, required: false },
defaultValue: { type: null, required: false },
modelValue: { type: null, required: false },
by: { type: [String, Function], required: false },
dir: { type: String, required: false },
multiple: { type: Boolean, required: false },
autocomplete: { type: String, required: false },
disabled: { type: Boolean, required: false },
name: { type: String, required: false },
required: { type: Boolean, required: false }
});
const emits = defineEmits(['update:modelValue', 'update:open']);
const forwarded = useForwardPropsEmits(props, emits);
const forwarded = useForwardPropsEmits(props, emits);
</script>
<template>
<SelectRoot v-slot="slotProps" data-slot="select" v-bind="forwarded">
<slot v-bind="slotProps" />
</SelectRoot>
<SelectRoot v-slot="slotProps" data-slot="select" v-bind="forwarded">
<slot v-bind="slotProps" />
</SelectRoot>
</template>

136
src/components/ui/select/SelectContent.vue
View File

@@ -1,82 +1,72 @@
<script setup>
import { reactiveOmit } from "@vueuse/core";
import {
SelectContent,
SelectPortal,
SelectViewport,
useForwardPropsEmits,
} from "reka-ui";
import { cn } from "@/lib/utils";
import { SelectScrollDownButton, SelectScrollUpButton } from ".";
import { SelectContent, SelectPortal, SelectViewport, useForwardPropsEmits } from 'reka-ui';
import { cn } from '@/lib/utils';
import { reactiveOmit } from '@vueuse/core';
defineOptions({
inheritAttrs: false,
});
import { SelectScrollDownButton, SelectScrollUpButton } from '.';
const props = defineProps({
forceMount: { type: Boolean, required: false },
position: { type: String, required: false, default: "popper" },
bodyLock: { type: Boolean, required: false },
side: { type: null, required: false },
sideOffset: { type: Number, required: false },
sideFlip: { type: Boolean, required: false },
align: { type: null, required: false },
alignOffset: { type: Number, required: false },
alignFlip: { type: Boolean, required: false },
avoidCollisions: { type: Boolean, required: false },
collisionBoundary: { type: null, required: false },
collisionPadding: { type: [Number, Object], required: false },
arrowPadding: { type: Number, required: false },
sticky: { type: String, required: false },
hideWhenDetached: { type: Boolean, required: false },
positionStrategy: { type: String, required: false },
updatePositionStrategy: { type: String, required: false },
disableUpdateOnLayoutShift: { type: Boolean, required: false },
prioritizePosition: { type: Boolean, required: false },
reference: { type: null, required: false },
asChild: { type: Boolean, required: false },
as: { type: null, required: false },
disableOutsidePointerEvents: { type: Boolean, required: false },
class: { type: null, required: false },
});
const emits = defineEmits([
"closeAutoFocus",
"escapeKeyDown",
"pointerDownOutside",
]);
defineOptions({
inheritAttrs: false
});
const delegatedProps = reactiveOmit(props, "class");
const props = defineProps({
forceMount: { type: Boolean, required: false },
position: { type: String, required: false, default: 'popper' },
bodyLock: { type: Boolean, required: false },
side: { type: null, required: false },
sideOffset: { type: Number, required: false },
sideFlip: { type: Boolean, required: false },
align: { type: null, required: false },
alignOffset: { type: Number, required: false },
alignFlip: { type: Boolean, required: false },
avoidCollisions: { type: Boolean, required: false },
collisionBoundary: { type: null, required: false },
collisionPadding: { type: [Number, Object], required: false },
arrowPadding: { type: Number, required: false },
sticky: { type: String, required: false },
hideWhenDetached: { type: Boolean, required: false },
positionStrategy: { type: String, required: false },
updatePositionStrategy: { type: String, required: false },
disableUpdateOnLayoutShift: { type: Boolean, required: false },
prioritizePosition: { type: Boolean, required: false },
reference: { type: null, required: false },
asChild: { type: Boolean, required: false },
as: { type: null, required: false },
disableOutsidePointerEvents: { type: Boolean, required: false },
class: { type: null, required: false }
});
const emits = defineEmits(['closeAutoFocus', 'escapeKeyDown', 'pointerDownOutside']);
const forwarded = useForwardPropsEmits(delegatedProps, emits);
const delegatedProps = reactiveOmit(props, 'class');
const forwarded = useForwardPropsEmits(delegatedProps, emits);
</script>
<template>
<SelectPortal>
<SelectContent
data-slot="select-content"
v-bind="{ ...$attrs, ...forwarded }"
:class="
cn(
'bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 relative z-50 max-h-(--reka-select-content-available-height) min-w-[8rem] overflow-x-hidden overflow-y-auto rounded-md border shadow-md',
position === 'popper' &&
'data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1',
props.class,
)
"
>
<SelectScrollUpButton />
<SelectViewport
:class="
cn(
'p-1',
position === 'popper' &&
'h-[var(--reka-select-trigger-height)] w-full min-w-[var(--reka-select-trigger-width)] scroll-my-1',
)
"
>
<slot />
</SelectViewport>
<SelectScrollDownButton />
</SelectContent>
</SelectPortal>
<SelectPortal>
<SelectContent
data-slot="select-content"
v-bind="{ ...$attrs, ...forwarded }"
:class="
cn(
'bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 relative z-10000 max-h-(--reka-select-content-available-height) min-w-[8rem] overflow-x-hidden overflow-y-auto rounded-md border shadow-md',
position === 'popper' &&
'data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1',
props.class
)
">
<SelectScrollUpButton />
<SelectViewport
:class="
cn(
'p-1',
position === 'popper' &&
'h-[var(--reka-select-trigger-height)] w-full min-w-[var(--reka-select-trigger-width)] scroll-my-1'
)
">
<slot />
</SelectViewport>
<SelectScrollDownButton />
</SelectContent>
</SelectPortal>
</template>

28
src/components/ui/select/SelectTrigger.vue
View File

@@ -1,20 +1,20 @@
<script setup>
import { SelectIcon, SelectTrigger, useForwardProps } from 'reka-ui';
import { ChevronDown } from 'lucide-vue-next';
import { cn } from '@/lib/utils';
import { reactiveOmit } from '@vueuse/core';
import { SelectIcon, SelectTrigger, useForwardProps } from 'reka-ui';
import { ChevronDown } from 'lucide-vue-next';
import { cn } from '@/lib/utils';
import { reactiveOmit } from '@vueuse/core';
const props = defineProps({
disabled: { type: Boolean, required: false },
reference: { type: null, required: false },
asChild: { type: Boolean, required: false },
as: { type: null, required: false },
class: { type: null, required: false },
size: { type: String, required: false, default: 'default' }
});
const props = defineProps({
disabled: { type: Boolean, required: false },
reference: { type: null, required: false },
asChild: { type: Boolean, required: false },
as: { type: null, required: false },
class: { type: null, required: false },
size: { type: String, required: false, default: 'default' }
});
const delegatedProps = reactiveOmit(props, 'class', 'size');
const forwardedProps = useForwardProps(delegatedProps);
const delegatedProps = reactiveOmit(props, 'class', 'size');
const forwardedProps = useForwardProps(delegatedProps);
</script>
<template>

22
src/components/ui/separator/Separator.vue
View File

@@ -1,17 +1,17 @@
<script setup>
import { Separator } from 'reka-ui';
import { cn } from '@/lib/utils';
import { reactiveOmit } from '@vueuse/core';
import { Separator } from 'reka-ui';
import { cn } from '@/lib/utils';
import { reactiveOmit } from '@vueuse/core';
const props = defineProps({
orientation: { type: String, required: false, default: 'horizontal' },
decorative: { type: Boolean, required: false, default: true },
asChild: { type: Boolean, required: false },
as: { type: null, required: false },
class: { type: null, required: false }
});
const props = defineProps({
orientation: { type: String, required: false, default: 'horizontal' },
decorative: { type: Boolean, required: false, default: true },
asChild: { type: Boolean, required: false },
as: { type: null, required: false },
class: { type: null, required: false }
});
const delegatedProps = reactiveOmit(props, 'class');
const delegatedProps = reactiveOmit(props, 'class');
</script>
<template>

148
src/views/Favorites/dialogs/AvatarExportDialog.vue
View File

@@ -9,65 +9,43 @@
</template>
</el-checkbox-group>
<el-dropdown trigger="click" size="small">
<el-button size="small">
<span v-if="avatarExportFavoriteGroup">
{{ avatarExportFavoriteGroup.displayName }} ({{ avatarExportFavoriteGroup.count }}/{{
avatarExportFavoriteGroup.capacity
}})
<el-icon class="el-icon--right"><ArrowDown /></el-icon>
</span>
<span v-else>
All Favorites
<el-icon class="el-icon--right"><ArrowDown /></el-icon>
</span>
</el-button>
<template #dropdown>
<el-dropdown-menu>
<el-dropdown-item style="display: block; margin: 10px 0" @click="selectAvatarExportGroup(null)">
All Favorites
</el-dropdown-item>
<template v-for="groupAPI in favoriteAvatarGroups" :key="groupAPI.name">
<el-dropdown-item
style="display: block; margin: 10px 0"
@click="selectAvatarExportGroup(groupAPI)">
<div class="flex items-center gap-2">
<Select
:model-value="avatarExportFavoriteGroupSelection"
@update:modelValue="handleAvatarExportFavoriteGroupSelect">
<SelectTrigger size="sm">
<SelectValue placeholder="All Favorites" />
</SelectTrigger>
<SelectContent>
<SelectGroup>
<SelectItem :value="AVATAR_EXPORT_ALL_VALUE">All Favorites</SelectItem>
<SelectItem
v-for="groupAPI in favoriteAvatarGroups"
:key="groupAPI.name"
:value="groupAPI.name">
{{ groupAPI.displayName }} ({{ groupAPI.count }}/{{ groupAPI.capacity }})
</el-dropdown-item>
</template>
</el-dropdown-menu>
</template>
</el-dropdown>
</SelectItem>
</SelectGroup>
</SelectContent>
</Select>
<el-dropdown trigger="click" size="small" style="margin-left: 10px">
<el-button size="small">
<span v-if="avatarExportLocalFavoriteGroup">
{{ avatarExportLocalFavoriteGroup }} ({{
localAvatarFavGroupLength(avatarExportLocalFavoriteGroup)
}})
<el-icon class="el-icon--right"><ArrowDown /></el-icon>
</span>
<span v-else>
Select Group
<el-icon class="el-icon--right"><ArrowDown /></el-icon>
</span>
</el-button>
<template #dropdown>
<el-dropdown-menu>
<el-dropdown-item
style="display: block; margin: 10px 0"
@click="selectAvatarExportLocalGroup(null)">
None
</el-dropdown-item>
<template v-for="group in localAvatarFavoriteGroups" :key="group">
<el-dropdown-item
style="display: block; margin: 10px 0"
@click="selectAvatarExportLocalGroup(group)">
<Select
:model-value="avatarExportLocalFavoriteGroupSelection"
@update:modelValue="handleAvatarExportLocalFavoriteGroupSelect"
style="margin-left: 10px">
<SelectTrigger size="sm">
<SelectValue placeholder="Select Group" />
</SelectTrigger>
<SelectContent>
<SelectGroup>
<SelectItem :value="AVATAR_EXPORT_NONE_VALUE">None</SelectItem>
<SelectItem v-for="group in localAvatarFavoriteGroups" :key="group" :value="group">
{{ group }} ({{ localAvatarFavGroupLength(group) }})
</el-dropdown-item>
</template>
</el-dropdown-menu>
</template>
</el-dropdown>
</SelectItem>
</SelectGroup>
</SelectContent>
</Select>
</div>
<br />
<el-input
v-model="avatarExportContent"
@@ -82,8 +60,8 @@
</template>
<script setup>
import { Select, SelectContent, SelectGroup, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
import { computed, ref, watch } from 'vue';
import { ArrowDown } from '@element-plus/icons-vue';
import { storeToRefs } from 'pinia';
import { toast } from 'vue-sonner';
import { useI18n } from 'vue-i18n';
@@ -114,6 +92,12 @@
const avatarExportContent = ref('');
const avatarExportFavoriteGroup = ref(null);
const avatarExportLocalFavoriteGroup = ref(null);
const AVATAR_EXPORT_ALL_VALUE = '__all__';
const AVATAR_EXPORT_NONE_VALUE = '__none__';
const avatarExportFavoriteGroupSelection = ref(AVATAR_EXPORT_ALL_VALUE);
const avatarExportLocalFavoriteGroupSelection = ref(AVATAR_EXPORT_NONE_VALUE);
const exportSelectedOptions = ref(['ID', 'Name']);
const exportSelectOptions = ref([
{ label: 'ID', value: 'id' },
@@ -144,8 +128,29 @@
function showAvatarExportDialog() {
avatarExportFavoriteGroup.value = null;
avatarExportLocalFavoriteGroup.value = null;
avatarExportFavoriteGroupSelection.value = AVATAR_EXPORT_ALL_VALUE;
avatarExportLocalFavoriteGroupSelection.value = AVATAR_EXPORT_NONE_VALUE;
updateAvatarExportDialog();
}
function handleAvatarExportFavoriteGroupSelect(value) {
avatarExportFavoriteGroupSelection.value = value;
if (value === AVATAR_EXPORT_ALL_VALUE) {
selectAvatarExportGroup(null);
return;
}
const group = favoriteAvatarGroups.value.find((g) => g.name === value) || null;
selectAvatarExportGroup(group);
}
function handleAvatarExportLocalFavoriteGroupSelect(value) {
avatarExportLocalFavoriteGroupSelection.value = value;
if (value === AVATAR_EXPORT_NONE_VALUE) {
selectAvatarExportLocalGroup(null);
return;
}
selectAvatarExportLocalGroup(value);
}
function handleCopyAvatarExportData(event) {
if (event.target.tagName === 'TEXTAREA') {
event.target.select();
@@ -161,11 +166,24 @@
});
}
function updateAvatarExportDialog() {
const formatter = function (str) {
if (/[\x00-\x1f,"]/.test(str) === true) {
return `"${str.replace(/"/g, '""')}"`;
const needsCsvQuotes = (text) => {
for (let i = 0; i < text.length; i++) {
if (text.charCodeAt(i) < 0x20) {
return true;
}
}
return str;
return text.includes(',') || text.includes('"');
};
const formatter = function (value) {
if (value === null || typeof value === 'undefined') {
return '';
}
const text = String(value);
if (needsCsvQuotes(text)) {
return `"${text.replace(/"/g, '""')}"`;
}
return text;
};
const propsForQuery = exportSelectOptions.value
.filter((option) => exportSelectedOptions.value.includes(option.label))
@@ -205,8 +223,8 @@
favoriteAvatars.value.forEach((ref) => {
lines.push(resText(ref.ref));
});
for (let i = 0; i < localAvatarFavoritesList.length; ++i) {
const avatarId = localAvatarFavoritesList[i];
for (let i = 0; i < localAvatarFavoritesList.value.length; ++i) {
const avatarId = localAvatarFavoritesList.value[i];
const ref = cachedAvatars.get(avatarId);
if (typeof ref !== 'undefined') {
lines.push(resText(ref));
@@ -218,11 +236,15 @@
function selectAvatarExportGroup(group) {
avatarExportFavoriteGroup.value = group;
avatarExportLocalFavoriteGroup.value = null;
avatarExportFavoriteGroupSelection.value = group?.name ?? AVATAR_EXPORT_ALL_VALUE;
avatarExportLocalFavoriteGroupSelection.value = AVATAR_EXPORT_NONE_VALUE;
updateAvatarExportDialog();
}
function selectAvatarExportLocalGroup(group) {
avatarExportLocalFavoriteGroup.value = group;
avatarExportFavoriteGroup.value = null;
avatarExportLocalFavoriteGroupSelection.value = group ?? AVATAR_EXPORT_NONE_VALUE;
avatarExportFavoriteGroupSelection.value = AVATAR_EXPORT_ALL_VALUE;
updateAvatarExportDialog();
}
</script>

105
src/views/Favorites/dialogs/AvatarImportDialog.vue
View File

@@ -29,57 +29,43 @@
style="margin-top: 10px"></el-input>
<div style="display: flex; align-items: center; justify-content: space-between; margin-top: 5px">
<div>
<el-dropdown trigger="click" size="small" style="margin-right: 5px" @click.stop>
<el-button size="small">
<span v-if="avatarImportDialog.avatarImportFavoriteGroup">
{{ avatarImportDialog.avatarImportFavoriteGroup.displayName }} ({{
avatarImportDialog.avatarImportFavoriteGroup.count
}}/{{ avatarImportDialog.avatarImportFavoriteGroup.capacity }})
<el-icon class="el-icon--right"><ArrowDown /></el-icon>
</span>
<span v-else>
{{ t('dialog.avatar_import.select_group_placeholder') }}
<el-icon class="el-icon--right"><ArrowDown /></el-icon>
</span>
</el-button>
<template #dropdown>
<el-dropdown-menu>
<template v-for="groupAPI in favoriteAvatarGroups" :key="groupAPI.name">
<el-dropdown-item
style="display: block; margin: 10px 0"
:disabled="groupAPI.count >= groupAPI.capacity"
@click="selectAvatarImportGroup(groupAPI)">
<div class="flex items-center gap-2">
<Select
:model-value="avatarImportFavoriteGroupSelection"
@update:modelValue="handleAvatarImportGroupSelect"
style="margin-right: 5px">
<SelectTrigger size="sm">
<SelectValue :placeholder="t('dialog.avatar_import.select_group_placeholder')" />
</SelectTrigger>
<SelectContent>
<SelectGroup>
<SelectItem
v-for="groupAPI in favoriteAvatarGroups"
:key="groupAPI.name"
:value="groupAPI.name"
:disabled="groupAPI.count >= groupAPI.capacity">
{{ groupAPI.displayName }} ({{ groupAPI.count }}/{{ groupAPI.capacity }})
</el-dropdown-item>
</template>
</el-dropdown-menu>
</template>
</el-dropdown>
<el-dropdown trigger="click" size="small">
<el-button size="small">
<span v-if="avatarImportDialog.avatarImportLocalFavoriteGroup">
{{ avatarImportDialog.avatarImportLocalFavoriteGroup }} ({{
localAvatarFavGroupLength(avatarImportDialog.avatarImportLocalFavoriteGroup)
}})
<el-icon class="el-icon--right"><ArrowDown /></el-icon>
</span>
<span v-else>
{{ t('dialog.avatar_import.select_group_placeholder') }}
<el-icon class="el-icon--right"><ArrowDown /></el-icon>
</span>
</el-button>
<template #dropdown>
<el-dropdown-menu>
<template v-for="group in localAvatarFavoriteGroups" :key="group">
<el-dropdown-item
style="display: block; margin: 10px 0"
@click="selectAvatarImportLocalGroup(group)">
</SelectItem>
</SelectGroup>
</SelectContent>
</Select>
<Select
:model-value="avatarImportLocalFavoriteGroupSelection"
@update:modelValue="handleAvatarImportLocalGroupSelect"
style="margin-left: 10px">
<SelectTrigger size="sm">
<SelectValue :placeholder="t('dialog.avatar_import.select_group_placeholder')" />
</SelectTrigger>
<SelectContent>
<SelectGroup>
<SelectItem v-for="group in localAvatarFavoriteGroups" :key="group" :value="group">
{{ group }} ({{ localAvatarFavGroupLength(group) }})
</el-dropdown-item>
</template>
</el-dropdown-menu>
</template>
</el-dropdown>
</SelectItem>
</SelectGroup>
</SelectContent>
</Select>
</div>
<span v-if="avatarImportDialog.avatarImportFavoriteGroup" style="margin-left: 5px">
{{ avatarImportTable.data.length }} /
{{
@@ -176,8 +162,9 @@
</template>
<script setup>
import { ArrowDown, Close, Loading } from '@element-plus/icons-vue';
import { Select, SelectContent, SelectGroup, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
import { computed, ref, watch } from 'vue';
import { Close, Loading } from '@element-plus/icons-vue';
import { storeToRefs } from 'pinia';
import { toast } from 'vue-sonner';
import { useI18n } from 'vue-i18n';
@@ -209,6 +196,9 @@
importProgressTotal: 0
});
const avatarImportFavoriteGroupSelection = ref('');
const avatarImportLocalFavoriteGroupSelection = ref('');
const avatarImportTable = ref({
data: [],
tableProps: {
@@ -305,11 +295,26 @@
function selectAvatarImportGroup(group) {
avatarImportDialog.value.avatarImportLocalFavoriteGroup = null;
avatarImportDialog.value.avatarImportFavoriteGroup = group;
avatarImportFavoriteGroupSelection.value = group?.name ?? '';
avatarImportLocalFavoriteGroupSelection.value = '';
}
function selectAvatarImportLocalGroup(group) {
avatarImportDialog.value.avatarImportFavoriteGroup = null;
avatarImportDialog.value.avatarImportLocalFavoriteGroup = group;
avatarImportFavoriteGroupSelection.value = '';
avatarImportLocalFavoriteGroupSelection.value = group ?? '';
}
function handleAvatarImportGroupSelect(value) {
avatarImportFavoriteGroupSelection.value = value;
const group = favoriteAvatarGroups.value.find((g) => g.name === value) ?? null;
selectAvatarImportGroup(group);
}
function handleAvatarImportLocalGroupSelect(value) {
avatarImportLocalFavoriteGroupSelection.value = value;
selectAvatarImportLocalGroup(value || null);
}
function cancelAvatarImport() {

81
src/views/Favorites/dialogs/FriendExportDialog.vue
View File

@@ -5,34 +5,22 @@
:title="t('dialog.friend_export.header')"
width="650px"
destroy-on-close>
<el-dropdown trigger="click" size="small">
<el-button size="small">
<span v-if="friendExportFavoriteGroup">
{{ friendExportFavoriteGroup.displayName }} ({{ friendExportFavoriteGroup.count }}/{{
friendExportFavoriteGroup.capacity
}})
<el-icon class="el-icon--right"><ArrowDown /></el-icon>
</span>
<span v-else
>All Favorites <el-icon class="el-icon--right"><ArrowDown /></el-icon
></span>
</el-button>
<template #dropdown>
<el-dropdown-menu>
<el-dropdown-item style="display: block; margin: 10px 0" @click="selectFriendExportGroup(null)">
All Favorites
</el-dropdown-item>
<template v-for="groupAPI in favoriteFriendGroups" :key="groupAPI.name">
<el-dropdown-item
style="display: block; margin: 10px 0"
@click="selectFriendExportGroup(groupAPI)">
{{ groupAPI.displayName }} ({{ groupAPI.count }}/{{ groupAPI.capacity }})
</el-dropdown-item>
</template>
</el-dropdown-menu>
</template>
</el-dropdown>
<Select :model-value="friendExportFavoriteGroupSelection" @update:modelValue="handleFriendExportGroupSelect">
<SelectTrigger size="sm">
<SelectValue placeholder="All Favorites" />
</SelectTrigger>
<SelectContent>
<SelectGroup>
<SelectItem :value="FRIEND_EXPORT_ALL_VALUE">All Favorites</SelectItem>
<SelectItem v-for="groupAPI in favoriteFriendGroups" :key="groupAPI.name" :value="groupAPI.name">
{{ groupAPI.displayName }} ({{ groupAPI.count }}/{{ groupAPI.capacity }})
</SelectItem>
</SelectGroup>
</SelectContent>
</Select>
<br />
<el-input
v-model="friendExportContent"
type="textarea"
@@ -46,8 +34,8 @@
</template>
<script setup>
import { Select, SelectContent, SelectGroup, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
import { computed, ref, watch } from 'vue';
import { ArrowDown } from '@element-plus/icons-vue';
import { storeToRefs } from 'pinia';
import { toast } from 'vue-sonner';
import { useI18n } from 'vue-i18n';
@@ -68,6 +56,8 @@
const { favoriteFriends, favoriteFriendGroups } = storeToRefs(useFavoriteStore());
const friendExportFavoriteGroup = ref(null);
const FRIEND_EXPORT_ALL_VALUE = '__all__';
const friendExportFavoriteGroupSelection = ref(FRIEND_EXPORT_ALL_VALUE);
const friendExportContent = ref('');
const isDialogVisible = computed({
@@ -90,9 +80,20 @@
function showFriendExportDialog() {
friendExportFavoriteGroup.value = null;
friendExportFavoriteGroupSelection.value = FRIEND_EXPORT_ALL_VALUE;
updateFriendExportDialog();
}
function handleFriendExportGroupSelect(value) {
friendExportFavoriteGroupSelection.value = value;
if (value === FRIEND_EXPORT_ALL_VALUE) {
selectFriendExportGroup(null);
return;
}
const group = favoriteFriendGroups.value.find((g) => g.name === value) || null;
selectFriendExportGroup(group);
}
function handleCopyFriendExportData(event) {
if (event.target.tagName === 'TEXTAREA') {
event.target.select();
@@ -109,18 +110,31 @@
}
function updateFriendExportDialog() {
const _ = function (str) {
if (/[\x00-\x1f,"]/.test(str) === true) {
return `"${str.replace(/"/g, '""')}"`;
const needsCsvQuotes = (text) => {
for (let i = 0; i < text.length; i++) {
if (text.charCodeAt(i) < 0x20) {
return true;
}
}
return str;
return text.includes(',') || text.includes('"');
};
const formatter = function (value) {
if (value === null || typeof value === 'undefined') {
return '';
}
const text = String(value);
if (needsCsvQuotes(text)) {
return `"${text.replace(/"/g, '""')}"`;
}
return text;
};
const lines = ['UserID,Name'];
favoriteFriendGroups.value.forEach((group) => {
if (!friendExportFavoriteGroup.value || friendExportFavoriteGroup.value === group) {
favoriteFriends.value.forEach((ref) => {
if (group.key === ref.groupKey) {
lines.push(`${_(ref.id)},${_(ref.name)}`);
lines.push(`${formatter(ref.id)},${formatter(ref.name)}`);
}
});
}
@@ -130,6 +144,7 @@
function selectFriendExportGroup(group) {
friendExportFavoriteGroup.value = group;
friendExportFavoriteGroupSelection.value = group?.name ?? FRIEND_EXPORT_ALL_VALUE;
updateFriendExportDialog();
}
</script>

60
src/views/Favorites/dialogs/FriendImportDialog.vue
View File

@@ -29,32 +29,24 @@
style="margin-top: 10px" />
<div style="display: flex; align-items: center; justify-content: space-between; margin-top: 5px">
<div>
<el-dropdown trigger="click" size="small">
<el-button size="small">
<span v-if="friendImportDialog.friendImportFavoriteGroup">
{{ friendImportDialog.friendImportFavoriteGroup.displayName }} ({{
friendImportDialog.friendImportFavoriteGroup.count
}}/{{ friendImportDialog.friendImportFavoriteGroup.capacity }})
<el-icon class="el-icon--right"><ArrowDown /></el-icon>
</span>
<span v-else
>{{ t('dialog.friend_import.select_group_placeholder') }}
<el-icon class="el-icon--right"><ArrowDown /></el-icon
></span>
</el-button>
<template #dropdown>
<el-dropdown-menu>
<template v-for="groupAPI in favoriteFriendGroups" :key="groupAPI.name">
<el-dropdown-item
style="display: block; margin: 10px 0"
:disabled="groupAPI.count >= groupAPI.capacity"
@click="selectFriendImportGroup(groupAPI)">
{{ groupAPI.displayName }} ({{ groupAPI.count }}/{{ groupAPI.capacity }})
</el-dropdown-item>
</template>
</el-dropdown-menu>
</template>
</el-dropdown>
<Select
:model-value="friendImportFavoriteGroupSelection"
@update:modelValue="handleFriendImportGroupSelect">
<SelectTrigger size="sm">
<SelectValue :placeholder="t('dialog.friend_import.select_group_placeholder')" />
</SelectTrigger>
<SelectContent>
<SelectGroup>
<SelectItem
v-for="groupAPI in favoriteFriendGroups"
:key="groupAPI.name"
:value="groupAPI.name"
:disabled="groupAPI.count >= groupAPI.capacity">
{{ groupAPI.displayName }} ({{ groupAPI.count }}/{{ groupAPI.capacity }})
</SelectItem>
</SelectGroup>
</SelectContent>
</Select>
<span v-if="friendImportDialog.friendImportFavoriteGroup" style="margin-left: 5px">
{{ friendImportTable.data.length }} /
{{
@@ -123,8 +115,9 @@
</template>
<script setup>
import { ArrowDown, Close, Loading } from '@element-plus/icons-vue';
import { Select, SelectContent, SelectGroup, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
import { computed, ref, watch } from 'vue';
import { Close, Loading } from '@element-plus/icons-vue';
import { storeToRefs } from 'pinia';
import { toast } from 'vue-sonner';
import { useI18n } from 'vue-i18n';
@@ -155,6 +148,8 @@
importProgressTotal: 0
});
const friendImportFavoriteGroupSelection = ref('');
const friendImportTable = ref({
data: [],
tableProps: {
@@ -182,6 +177,8 @@
friendImportDialogIndex.value = getNextDialogIndex();
clearFriendImportTable();
resetFriendImport();
friendImportFavoriteGroupSelection.value =
friendImportDialog.value.friendImportFavoriteGroup?.name ?? '';
if (friendImportDialogInput.value) {
friendImportDialog.value.input = friendImportDialogInput.value;
processFriendImportList();
@@ -191,6 +188,14 @@
}
);
function handleFriendImportGroupSelect(value) {
friendImportFavoriteGroupSelection.value = value;
const group = favoriteFriendGroups.value.find((g) => g.name === value) || null;
if (group) {
selectFriendImportGroup(group);
}
}
function cancelFriendImport() {
friendImportDialog.value.loading = false;
}
@@ -204,6 +209,7 @@
}
function selectFriendImportGroup(group) {
friendImportDialog.value.friendImportFavoriteGroup = group;
friendImportFavoriteGroupSelection.value = group?.name ?? '';
}
async function importFriendImportTable() {
const D = friendImportDialog.value;

114
src/views/Favorites/dialogs/WorldExportDialog.vue
View File

@@ -9,61 +9,38 @@
</template>
</el-checkbox-group>
<el-dropdown trigger="click" size="small">
<el-button size="small">
<span v-if="worldExportFavoriteGroup">
{{ worldExportFavoriteGroup.displayName }} ({{ worldExportFavoriteGroup.count }}/{{
worldExportFavoriteGroup.capacity
}})
<el-icon class="el-icon--right"><ArrowDown /></el-icon>
</span>
<span v-else>
All Favorites
<el-icon class="el-icon--right"><ArrowDown /></el-icon>
</span>
</el-button>
<template #dropdown>
<el-dropdown-menu>
<el-dropdown-item style="display: block; margin: 10px 0" @click="selectWorldExportGroup(null)">
None
</el-dropdown-item>
<template v-for="groupAPI in favoriteWorldGroups" :key="groupAPI.name">
<el-dropdown-item
style="display: block; margin: 10px 0"
@click="selectWorldExportGroup(groupAPI)">
<div class="flex items-center gap-2">
<Select :model-value="worldExportFavoriteGroupSelection" @update:modelValue="handleWorldExportGroupSelect">
<SelectTrigger size="sm">
<SelectValue placeholder="All Favorites" />
</SelectTrigger>
<SelectContent>
<SelectGroup>
<SelectItem :value="WORLD_EXPORT_ALL_VALUE">None</SelectItem>
<SelectItem v-for="groupAPI in favoriteWorldGroups" :key="groupAPI.name" :value="groupAPI.name">
{{ groupAPI.displayName }} ({{ groupAPI.count }}/{{ groupAPI.capacity }})
</el-dropdown-item>
</template>
</el-dropdown-menu>
</template>
</el-dropdown>
</SelectItem>
</SelectGroup>
</SelectContent>
</Select>
<el-dropdown trigger="click" size="small" style="margin-left: 10px">
<el-button size="small">
<span v-if="worldExportLocalFavoriteGroup">
{{ worldExportLocalFavoriteGroup }} ({{ localWorldFavGroupLength(worldExportLocalFavoriteGroup) }})
<el-icon class="el-icon--right"><ArrowDown /></el-icon>
</span>
<span v-else>
Select Group
<el-icon class="el-icon--right"><ArrowDown /></el-icon>
</span>
</el-button>
<template #dropdown>
<el-dropdown-menu>
<el-dropdown-item style="display: block; margin: 10px 0" @click="selectWorldExportLocalGroup(null)">
None
</el-dropdown-item>
<template v-for="group in localWorldFavoriteGroups" :key="group">
<el-dropdown-item
style="display: block; margin: 10px 0"
@click="selectWorldExportLocalGroup(group)">
<Select
:model-value="worldExportLocalFavoriteGroupSelection"
@update:modelValue="handleWorldExportLocalGroupSelect"
style="margin-left: 10px">
<SelectTrigger size="sm">
<SelectValue placeholder="Select Group" />
</SelectTrigger>
<SelectContent>
<SelectGroup>
<SelectItem :value="WORLD_EXPORT_NONE_VALUE">None</SelectItem>
<SelectItem v-for="group in localWorldFavoriteGroups" :key="group" :value="group">
{{ group }} ({{ localWorldFavorites[group].length }})
</el-dropdown-item>
</template>
</el-dropdown-menu>
</template>
</el-dropdown>
</SelectItem>
</SelectGroup>
</SelectContent>
</Select>
</div>
<br />
@@ -80,8 +57,8 @@
</template>
<script setup>
import { Select, SelectContent, SelectGroup, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
import { computed, ref, watch } from 'vue';
import { ArrowDown } from '@element-plus/icons-vue';
import { storeToRefs } from 'pinia';
import { toast } from 'vue-sonner';
import { useI18n } from 'vue-i18n';
@@ -112,6 +89,12 @@
const worldExportContent = ref('');
const worldExportFavoriteGroup = ref(null);
const worldExportLocalFavoriteGroup = ref(null);
const WORLD_EXPORT_ALL_VALUE = '__all__';
const WORLD_EXPORT_NONE_VALUE = '__none__';
const worldExportFavoriteGroupSelection = ref(WORLD_EXPORT_ALL_VALUE);
const worldExportLocalFavoriteGroupSelection = ref(WORLD_EXPORT_NONE_VALUE);
// Storage of selected filtering options for model and world export
const exportSelectedOptions = ref(['ID', 'Name']);
const exportSelectOptions = ref([
@@ -143,9 +126,30 @@
function showWorldExportDialog() {
worldExportFavoriteGroup.value = null;
worldExportLocalFavoriteGroup.value = null;
worldExportFavoriteGroupSelection.value = WORLD_EXPORT_ALL_VALUE;
worldExportLocalFavoriteGroupSelection.value = WORLD_EXPORT_NONE_VALUE;
updateWorldExportDialog();
}
function handleWorldExportGroupSelect(value) {
worldExportFavoriteGroupSelection.value = value;
if (value === WORLD_EXPORT_ALL_VALUE) {
selectWorldExportGroup(null);
return;
}
const group = favoriteWorldGroups.value.find((g) => g.name === value) || null;
selectWorldExportGroup(group);
}
function handleWorldExportLocalGroupSelect(value) {
worldExportLocalFavoriteGroupSelection.value = value;
if (value === WORLD_EXPORT_NONE_VALUE) {
selectWorldExportLocalGroup(null);
return;
}
selectWorldExportLocalGroup(value);
}
function handleCopyWorldExportData(event) {
if (event.target.tagName === 'TEXTAREA') {
event.target.select();
@@ -221,12 +225,16 @@
function selectWorldExportGroup(group) {
worldExportFavoriteGroup.value = group;
worldExportLocalFavoriteGroup.value = null;
worldExportFavoriteGroupSelection.value = group?.name ?? WORLD_EXPORT_ALL_VALUE;
worldExportLocalFavoriteGroupSelection.value = WORLD_EXPORT_NONE_VALUE;
updateWorldExportDialog();
}
function selectWorldExportLocalGroup(group) {
worldExportLocalFavoriteGroup.value = group;
worldExportFavoriteGroup.value = null;
worldExportLocalFavoriteGroupSelection.value = group ?? WORLD_EXPORT_NONE_VALUE;
worldExportFavoriteGroupSelection.value = WORLD_EXPORT_ALL_VALUE;
updateWorldExportDialog();
}
</script>

104
src/views/Favorites/dialogs/WorldImportDialog.vue
View File

@@ -30,57 +30,42 @@
style="margin-top: 10px"></el-input>
<div style="display: flex; align-items: center; justify-content: space-between; margin-top: 5px">
<div>
<el-dropdown trigger="click" size="small" style="margin-right: 5px" @click.stop>
<el-button size="small">
<span v-if="worldImportDialog.worldImportFavoriteGroup">
{{ worldImportDialog.worldImportFavoriteGroup.displayName }}
({{ worldImportDialog.worldImportFavoriteGroup.count }}/{{
worldImportDialog.worldImportFavoriteGroup.capacity
}})
<el-icon class="el-icon--right"><ArrowDown /></el-icon>
</span>
<span v-else>
{{ t('dialog.world_import.select_vrchat_group_placeholder') }}
<el-icon class="el-icon--right"><ArrowDown /></el-icon>
</span>
</el-button>
<template #dropdown>
<el-dropdown-menu>
<template v-for="groupAPI in favoriteWorldGroups" :key="groupAPI.name">
<el-dropdown-item
style="display: block; margin: 10px 0"
:disabled="groupAPI.count >= groupAPI.capacity"
@click="selectWorldImportGroup(groupAPI)">
<div class="flex items-center gap-2">
<Select
:model-value="worldImportFavoriteGroupSelection"
@update:modelValue="handleWorldImportGroupSelect">
<SelectTrigger size="sm">
<SelectValue :placeholder="t('dialog.world_import.select_vrchat_group_placeholder')" />
</SelectTrigger>
<SelectContent>
<SelectGroup>
<SelectItem
v-for="groupAPI in favoriteWorldGroups"
:key="groupAPI.name"
:value="groupAPI.name"
:disabled="groupAPI.count >= groupAPI.capacity">
{{ groupAPI.displayName }} ({{ groupAPI.count }}/{{ groupAPI.capacity }})
</el-dropdown-item>
</template>
</el-dropdown-menu>
</template>
</el-dropdown>
<el-dropdown trigger="click" size="small" @click.stop>
<el-button size="small">
<span v-if="worldImportDialog.worldImportLocalFavoriteGroup">
{{ worldImportDialog.worldImportLocalFavoriteGroup }}
({{ localWorldFavGroupLength(worldImportDialog.worldImportLocalFavoriteGroup) }})
<el-icon class="el-icon--right"><ArrowDown /></el-icon>
</span>
<span v-else>
{{ t('dialog.world_import.select_local_group_placeholder') }}
<el-icon class="el-icon--right"><ArrowDown /></el-icon>
</span>
</el-button>
<template #dropdown>
<el-dropdown-menu>
<template v-for="group in localWorldFavoriteGroups" :key="group">
<el-dropdown-item
style="display: block; margin: 10px 0"
@click="selectWorldImportLocalGroup(group)">
</SelectItem>
</SelectGroup>
</SelectContent>
</Select>
<Select
:model-value="worldImportLocalFavoriteGroupSelection"
@update:modelValue="handleWorldImportLocalGroupSelect"
style="margin-left: 10px">
<SelectTrigger size="sm">
<SelectValue :placeholder="t('dialog.world_import.select_local_group_placeholder')" />
</SelectTrigger>
<SelectContent>
<SelectGroup>
<SelectItem v-for="group in localWorldFavoriteGroups" :key="group" :value="group">
{{ group }} ({{ localWorldFavGroupLength(group) }})
</el-dropdown-item>
</template>
</el-dropdown-menu>
</template>
</el-dropdown>
</SelectItem>
</SelectGroup>
</SelectContent>
</Select>
</div>
<span v-if="worldImportDialog.worldImportFavoriteGroup" style="margin-left: 5px">
{{ worldImportTable.data.length }} /
{{
@@ -172,8 +157,9 @@
</template>
<script setup>
import { ArrowDown, Close, Loading } from '@element-plus/icons-vue';
import { Select, SelectContent, SelectGroup, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
import { computed, ref, watch } from 'vue';
import { Close, Loading } from '@element-plus/icons-vue';
import { storeToRefs } from 'pinia';
import { toast } from 'vue-sonner';
import { useI18n } from 'vue-i18n';
@@ -209,6 +195,9 @@
importProgressTotal: 0
});
const worldImportFavoriteGroupSelection = ref('');
const worldImportLocalFavoriteGroupSelection = ref('');
const worldImportTable = ref({
data: [],
tableProps: {
@@ -302,11 +291,26 @@
function selectWorldImportGroup(group) {
worldImportDialog.value.worldImportLocalFavoriteGroup = null;
worldImportDialog.value.worldImportFavoriteGroup = group;
worldImportFavoriteGroupSelection.value = group?.name ?? '';
worldImportLocalFavoriteGroupSelection.value = '';
}
function selectWorldImportLocalGroup(group) {
worldImportDialog.value.worldImportFavoriteGroup = null;
worldImportDialog.value.worldImportLocalFavoriteGroup = group;
worldImportFavoriteGroupSelection.value = '';
worldImportLocalFavoriteGroupSelection.value = group ?? '';
}
function handleWorldImportGroupSelect(value) {
worldImportFavoriteGroupSelection.value = value;
const group = favoriteWorldGroups.value.find((g) => g.name === value) ?? null;
selectWorldImportGroup(group);
}
function handleWorldImportLocalGroupSelect(value) {
worldImportLocalFavoriteGroupSelection.value = value;
selectWorldImportLocalGroup(value || null);
}
function cancelWorldImport() {

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

@@ -71,24 +71,24 @@
v-loading="isSearchWorldLoading"
:label="t('view.search.world.header')"
style="min-height: 60px">
<el-dropdown
size="small"
trigger="click"
style="margin-bottom: 15px"
@command="(row) => searchWorld(row)">
<el-button size="small"
>{{ t('view.search.world.category') }} <el-icon class="el-icon--right"><ArrowDown /></el-icon
></el-button>
<template #dropdown>
<el-dropdown-menu>
<el-dropdown-item
<Select
:model-value="searchWorldCategoryIndex"
@update:modelValue="handleSearchWorldCategorySelect"
style="margin-bottom: 15px">
<SelectTrigger size="sm">
<SelectValue :placeholder="t('view.search.world.category')" />
</SelectTrigger>
<SelectContent>
<SelectGroup>
<SelectItem
v-for="row in cachedConfig.dynamicWorldRows"
:key="row.index"
:command="row"
v-text="row.name"></el-dropdown-item>
</el-dropdown-menu>
</template>
</el-dropdown>
:value="row.index">
{{ row.name }}
</SelectItem>
</SelectGroup>
</SelectContent>
</Select>
<el-checkbox v-model="searchWorldLabs" style="margin-left: 10px">{{
t('view.search.world.community_lab')
}}</el-checkbox>
@@ -135,30 +135,25 @@
style="min-height: 60px">
<div style="display: flex; align-items: center; justify-content: space-between">
<div style="display: flex; align-items: center">
<el-dropdown
<Select
v-if="avatarRemoteDatabaseProviderList.length > 1"
trigger="click"
size="small"
style="margin-right: 5px"
@click.stop>
<el-button size="small"
>{{ t('view.search.avatar.search_provider') }}
<el-icon class="el-icon--right"><ArrowDown /></el-icon
></el-button>
<template #dropdown>
<el-dropdown-menu>
<el-dropdown-item
:model-value="avatarRemoteDatabaseProvider"
@update:modelValue="setAvatarProvider"
style="margin-right: 5px">
<SelectTrigger size="sm">
<SelectValue :placeholder="t('view.search.avatar.search_provider')" />
</SelectTrigger>
<SelectContent>
<SelectGroup>
<SelectItem
v-for="provider in avatarRemoteDatabaseProviderList"
:key="provider"
@click="setAvatarProvider(provider)">
<el-icon v-if="provider === avatarRemoteDatabaseProvider" class="el-icon--left"
><Check
/></el-icon>
:value="provider">
{{ provider }}
</el-dropdown-item>
</el-dropdown-menu>
</template>
</el-dropdown>
</SelectItem>
</SelectGroup>
</SelectContent>
</Select>
<TooltipWrapper side="bottom" :content="t('view.search.avatar.refresh_tooltip')">
<el-button
type="default"
@@ -311,7 +306,8 @@
</template>
<script setup>
import { ArrowDown, Back, Check, Delete, Refresh, Right } from '@element-plus/icons-vue';
import { Select, SelectContent, SelectGroup, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
import { Back, Delete, Refresh, Right } from '@element-plus/icons-vue';
import { Button } from '@/components/ui/button';
import { ButtonGroup } from '@/components/ui/button-group';
import { ref } from 'vue';
@@ -368,6 +364,8 @@
const searchWorldOption = ref('');
const searchWorldLabs = ref(false);
const searchWorldParams = ref({});
const searchWorldCategoryIndex = ref(null);
const searchWorldResults = ref([]);
const searchAvatarFilter = ref('');
@@ -436,6 +434,7 @@
function searchWorld(ref) {
searchWorldOption.value = '';
searchWorldCategoryIndex.value = ref?.index ?? null;
const params = {
n: 10,
offset: 0
@@ -502,6 +501,12 @@
moreSearchWorld();
}
function handleSearchWorldCategorySelect(index) {
searchWorldCategoryIndex.value = index;
const row = cachedConfig.value?.dynamicWorldRows?.find((r) => r.index === index);
searchWorld(row || {});
}
function moreSearchWorld(go) {
const params = searchWorldParams.value;
if (go) {

1
src/views/Settings/components/SimpleSwitch.vue
View File

@@ -34,6 +34,7 @@
.simple-switch {
font-size: 12px;
display: flex;
align-items: center;
}
.simple-switch > .name {
width: 225px;

63
src/views/Settings/components/Tabs/AppearanceTab.vue
View File

@@ -4,45 +4,33 @@
<span class="header">{{ t('view.settings.appearance.appearance.header') }}</span>
<div class="options-container-item">
<span class="name">{{ t('view.settings.appearance.appearance.language') }}</span>
<el-dropdown trigger="click" size="small" @click.stop>
<el-button size="small">
<span>
{{ getLanguageName(appLanguage) }} <el-icon class="el-icon--right"> <ArrowDown /></el-icon
></span>
</el-button>
<template #dropdown>
<el-dropdown-menu>
<el-dropdown-item
v-for="language in languageCodes"
:key="language"
:class="{ 'is-active': appLanguage === language }"
@click="changeAppLanguage(language)"
v-text="getLanguageName(language)" />
</el-dropdown-menu>
</template>
</el-dropdown>
<Select :model-value="appLanguage" @update:modelValue="changeAppLanguage">
<SelectTrigger size="sm">
<SelectValue :placeholder="getLanguageName(appLanguage)" />
</SelectTrigger>
<SelectContent>
<SelectGroup>
<SelectItem v-for="language in languageCodes" :key="language" :value="language">
{{ getLanguageName(language) }}
</SelectItem>
</SelectGroup>
</SelectContent>
</Select>
</div>
<div class="options-container-item">
<span class="name">{{ t('view.settings.appearance.appearance.theme_mode') }}</span>
<el-dropdown trigger="click" size="small" @click.stop>
<el-button size="small">
<span
>{{ t(`view.settings.appearance.appearance.theme_mode_${themeMode}`) }}
<el-icon class="el-icon--right"><ArrowDown /></el-icon
></span>
</el-button>
<template #dropdown>
<el-dropdown-menu>
<el-dropdown-item
v-for="(config, themeKey) in THEME_CONFIG"
:key="themeKey"
@click="saveThemeMode(themeKey)"
:class="{ 'is-active': themeMode === themeKey }">
<Select :model-value="themeMode" @update:modelValue="saveThemeMode">
<SelectTrigger size="sm">
<SelectValue :placeholder="t(`view.settings.appearance.appearance.theme_mode_${themeMode}`)" />
</SelectTrigger>
<SelectContent>
<SelectGroup>
<SelectItem v-for="(config, themeKey) in THEME_CONFIG" :key="themeKey" :value="themeKey">
{{ t(`view.settings.appearance.appearance.theme_mode_${themeKey}`) }}
</el-dropdown-item>
</el-dropdown-menu>
</template>
</el-dropdown>
</SelectItem>
</SelectGroup>
</SelectContent>
</Select>
</div>
<div v-if="!isLinux" class="options-container-item">
<span class="name">{{ t('view.settings.appearance.appearance.zoom') }}</span>
@@ -314,7 +302,7 @@
:label="t('view.settings.appearance.user_colors.random_colors_from_user_id')"
:value="randomUserColours"
@change="updateTrustColor('', '', true)"></simple-switch>
<div class="options-container-item">
<div>
<div>
<el-color-picker
:model-value="trustColor.untrusted"
@@ -384,8 +372,9 @@
</template>
<script setup>
import { ArrowDown, ArrowRight, Notebook } from '@element-plus/icons-vue';
import { Select, SelectContent, SelectGroup, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
import { computed, onBeforeUnmount, ref } from 'vue';
import { ArrowRight, Notebook } from '@element-plus/icons-vue';
import { storeToRefs } from 'pinia';
import { toast } from 'vue-sonner';
import { useI18n } from 'vue-i18n';

49
src/views/Settings/components/Tabs/NotificationsTab.vue
View File

@@ -230,22 +230,21 @@
</div>
<div class="options-container-item">
<span class="name">{{ t('view.settings.notifications.notifications.text_to_speech.tts_voice') }}</span>
<el-dropdown trigger="click" size="small" @command="(voice) => changeTTSVoice(voice)">
<el-button size="small" :disabled="notificationTTS === 'Never'">
<span
>{{ getTTSVoiceName() }} <el-icon style="margin-left: 5px"><ArrowDown /></el-icon
></span>
</el-button>
<template #dropdown>
<el-dropdown-menu>
<el-dropdown-item
v-for="(voice, index) in TTSvoices"
:key="index"
:command="index"
v-text="voice.name" />
</el-dropdown-menu>
</template>
</el-dropdown>
<Select
:model-value="ttsVoiceIndex"
:disabled="notificationTTS === 'Never'"
@update:modelValue="(v) => (ttsVoiceIndex = v)">
<SelectTrigger size="sm">
<SelectValue :placeholder="getTTSVoiceName()" />
</SelectTrigger>
<SelectContent>
<SelectGroup>
<SelectItem v-for="(voice, index) in TTSvoices" :key="index" :value="index">
{{ voice.name }}
</SelectItem>
</SelectGroup>
</SelectContent>
</Select>
</div>
<simple-switch
:label="t('view.settings.notifications.notifications.text_to_speech.use_memo_nicknames')"
@@ -274,14 +273,15 @@
</template>
<script setup>
import { ArrowDown, ChatSquare, Rank, Timer, VideoPlay } from '@element-plus/icons-vue';
import { Select, SelectContent, SelectGroup, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
import { ChatSquare, Rank, Timer, VideoPlay } from '@element-plus/icons-vue';
import { computed, ref } from 'vue';
import { storeToRefs } from 'pinia';
import { useI18n } from 'vue-i18n';
import { useAdvancedSettingsStore, useNotificationsSettingsStore, useVrStore } from '../../../../stores';
import { Slider } from '../../../../components/ui/slider';
import { ToggleGroup, ToggleGroupItem } from '../../../../components/ui/toggle-group';
import { Slider } from '../../../../components/ui/slider';
import FeedFiltersDialog from '../../dialogs/FeedFiltersDialog.vue';
import NotificationPositionDialog from '../../dialogs/NotificationPositionDialog.vue';
@@ -345,6 +345,19 @@
}
});
const ttsVoiceIndex = computed({
get: () => {
const currentName = getTTSVoiceName();
const idx = TTSvoices.value.findIndex((v) => v?.name === currentName);
return idx >= 0 ? idx : null;
},
set: (value) => {
if (typeof value === 'number') {
changeTTSVoice(value);
}
}
});
function showNotyFeedFiltersDialog() {
feedFiltersDialogMode.value = 'noty';
}

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

@@ -7,23 +7,18 @@
@close="closeDialog">
<div class="options-container-item">
<span class="name">{{ t('view.settings.appearance.appearance.bio_language') }}</span>
<el-dropdown trigger="click" size="small" style="float: right" @click.stop>
<el-button size="small">
<span>
{{ getLanguageName(bioLanguage) || bioLanguage }}
<el-icon class="el-icon--right"><ArrowDown /></el-icon>
</span>
</el-button>
<template #dropdown>
<el-dropdown-menu>
<el-dropdown-item
v-for="language in languageCodes"
:key="language"
@click="setBioLanguage(language)"
v-text="getLanguageName(language)" />
</el-dropdown-menu>
</template>
</el-dropdown>
<Select :model-value="bioLanguage" @update:modelValue="setBioLanguage">
<SelectTrigger size="sm" style="float: right">
<SelectValue :placeholder="String(getLanguageName(bioLanguage) || bioLanguage || '')" />
</SelectTrigger>
<SelectContent>
<SelectGroup>
<SelectItem v-for="language in languageCodes" :key="language" :value="language">
{{ getLanguageName(language) }}
</SelectItem>
</SelectGroup>
</SelectContent>
</Select>
</div>
<br />
<el-form label-position="top" label-width="120px" size="small" style="margin-bottom: 12px">
@@ -102,8 +97,8 @@
</template>
<script setup>
import { Select, SelectContent, SelectGroup, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
import { reactive, watch } from 'vue';
import { ArrowDown } from '@element-plus/icons-vue';
import { storeToRefs } from 'pinia';
import { toast } from 'vue-sonner';
import { useI18n } from 'vue-i18n';

274
src/views/Settings/dialogs/VRChatConfigDialog.vue
View File

@@ -71,81 +71,69 @@
<div style="display: inline-block; margin-top: 10px">
<span>{{ t('dialog.config_json.camera_resolution') }}</span>
<br />
<el-dropdown
size="small"
trigger="click"
style="margin-top: 5px"
@command="(command) => setVRChatCameraResolution(command)">
<el-button size="small">
<span>
<span v-text="getVRChatCameraResolution()"></span>
<el-icon class="el-icon--right"><ArrowDown /></el-icon>
</span>
</el-button>
<template #dropdown>
<el-dropdown-menu>
<el-dropdown-item v-for="row in VRChatCameraResolutions" :key="row.index" :command="row">{{
row.name
}}</el-dropdown-item>
</el-dropdown-menu>
</template>
</el-dropdown>
<Select
:model-value="vrchatCameraResolutionKey"
@update:modelValue="(v) => (vrchatCameraResolutionKey = v)">
<SelectTrigger size="sm" style="margin-top: 5px">
<SelectValue :placeholder="getVRChatCameraResolution()" />
</SelectTrigger>
<SelectContent>
<SelectGroup>
<SelectItem
v-for="row in VRChatCameraResolutions"
:key="row.name"
:value="getVRChatResolutionKey(row)">
{{ row.name }}
</SelectItem>
</SelectGroup>
</SelectContent>
</Select>
</div>
<br />
<div style="display: inline-block; margin-top: 10px">
<span>{{ t('dialog.config_json.spout_resolution') }}</span>
<br />
<el-dropdown
size="small"
trigger="click"
style="margin-top: 5px"
@command="(command) => setVRChatSpoutResolution(command)">
<el-button size="small">
<span>
<span v-text="getVRChatSpoutResolution()"></span>
<el-icon class="el-icon--right"><ArrowDown /></el-icon>
</span>
</el-button>
<template #dropdown>
<el-dropdown-menu>
<el-dropdown-item
<Select
:model-value="vrchatSpoutResolutionKey"
@update:modelValue="(v) => (vrchatSpoutResolutionKey = v)">
<SelectTrigger size="sm" style="margin-top: 5px">
<SelectValue :placeholder="getVRChatSpoutResolution()" />
</SelectTrigger>
<SelectContent>
<SelectGroup>
<SelectItem
v-for="row in VRChatScreenshotResolutions"
:key="row.index"
:command="row"
>{{ row.name }}</el-dropdown-item
>
</el-dropdown-menu>
</template>
</el-dropdown>
:key="row.name"
:value="getVRChatResolutionKey(row)">
{{ row.name }}
</SelectItem>
</SelectGroup>
</SelectContent>
</Select>
</div>
<br />
<div style="display: inline-block; margin-top: 10px">
<span>{{ t('dialog.config_json.screenshot_resolution') }}</span>
<br />
<el-dropdown
size="small"
trigger="click"
style="margin-top: 5px"
@command="(command) => setVRChatScreenshotResolution(command)">
<el-button size="small">
<span>
<span v-text="getVRChatScreenshotResolution()"></span>
<el-icon class="el-icon--right"><ArrowDown /></el-icon>
</span>
</el-button>
<template #dropdown>
<el-dropdown-menu>
<el-dropdown-item
<Select
:model-value="vrchatScreenshotResolutionKey"
@update:modelValue="(v) => (vrchatScreenshotResolutionKey = v)">
<SelectTrigger size="sm" style="margin-top: 5px">
<SelectValue :placeholder="getVRChatScreenshotResolution()" />
</SelectTrigger>
<SelectContent>
<SelectGroup>
<SelectItem
v-for="row in VRChatScreenshotResolutions"
:key="row.index"
:command="row"
>{{ row.name }}</el-dropdown-item
>
</el-dropdown-menu>
</template>
</el-dropdown>
:key="row.name"
:value="getVRChatResolutionKey(row)">
{{ row.name }}
</SelectItem>
</SelectGroup>
</SelectContent>
</Select>
</div>
<br />
@@ -181,7 +169,8 @@
</template>
<script setup>
import { ArrowDown, Delete, FolderDelete, FolderOpened, Refresh } from '@element-plus/icons-vue';
import { Select, SelectContent, SelectGroup, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
import { Delete, FolderDelete, FolderOpened, Refresh } from '@element-plus/icons-vue';
import { computed, ref, watch } from 'vue';
import { ElMessageBox } from 'element-plus';
import { storeToRefs } from 'pinia';
@@ -199,52 +188,54 @@
const { t } = useI18n();
const VRChatConfigFile = ref({});
const VRChatConfigFile = ref(/** @type {Record<string, any>} */ ({}));
// it's a object
const VRChatConfigList = ref({
cache_size: {
name: t('dialog.config_json.max_cache_size'),
default: '30',
type: 'number',
min: 30
},
cache_expiry_delay: {
name: t('dialog.config_json.cache_expiry_delay'),
default: '30',
type: 'number',
min: 30
},
cache_directory: {
name: t('dialog.config_json.cache_directory'),
default: '%AppData%\\..\\LocalLow\\VRChat\\VRChat',
folderBrowser: true
},
picture_output_folder: {
name: t('dialog.config_json.picture_directory'),
// my pictures folder
default: `%UserProfile%\\Pictures\\VRChat`,
folderBrowser: true
},
// dynamic_bone_max_affected_transform_count: {
// name: 'Dynamic Bones Limit Max Transforms (0 disable all transforms)',
// default: '32',
// type: 'number',
// min: 0
// },
// dynamic_bone_max_collider_check_count: {
// name: 'Dynamic Bones Limit Max Collider Collisions (0 disable all colliders)',
// default: '8',
// type: 'number',
// min: 0
// },
fpv_steadycam_fov: {
name: t('dialog.config_json.fpv_steadycam_fov'),
default: '50',
type: 'number',
min: 30,
max: 110
}
});
const VRChatConfigList = ref(
/** @type {Record<string, any>} */ ({
cache_size: {
name: t('dialog.config_json.max_cache_size'),
default: '30',
type: 'number',
min: 30
},
cache_expiry_delay: {
name: t('dialog.config_json.cache_expiry_delay'),
default: '30',
type: 'number',
min: 30
},
cache_directory: {
name: t('dialog.config_json.cache_directory'),
default: '%AppData%\\..\\LocalLow\\VRChat\\VRChat',
folderBrowser: true
},
picture_output_folder: {
name: t('dialog.config_json.picture_directory'),
// my pictures folder
default: `%UserProfile%\\Pictures\\VRChat`,
folderBrowser: true
},
// dynamic_bone_max_affected_transform_count: {
// name: 'Dynamic Bones Limit Max Transforms (0 disable all transforms)',
// default: '32',
// type: 'number',
// min: 0
// },
// dynamic_bone_max_collider_check_count: {
// name: 'Dynamic Bones Limit Max Collider Collisions (0 disable all colliders)',
// default: '8',
// type: 'number',
// min: 0
// },
fpv_steadycam_fov: {
name: t('dialog.config_json.fpv_steadycam_fov'),
default: '50',
type: 'number',
min: 30,
max: 110
}
})
);
const loading = ref(false);
@@ -263,6 +254,68 @@
return VRChatConfigFile.value.cache_size || VRChatTotalCacheSize.value;
});
const VRCHAT_RESOLUTION_DEFAULT_KEY = '__default__';
function getVRChatResolutionKey(row) {
const width = Number(row?.width);
const height = Number(row?.height);
if (width > 0 && height > 0) {
return `${width}x${height}`;
}
return VRCHAT_RESOLUTION_DEFAULT_KEY;
}
const vrchatCameraResolutionKey = computed({
get: () => {
const width = Number(VRChatConfigFile.value.camera_res_width);
const height = Number(VRChatConfigFile.value.camera_res_height);
if (width > 0 && height > 0) {
return `${width}x${height}`;
}
return VRCHAT_RESOLUTION_DEFAULT_KEY;
},
set: (value) => {
const row = VRChatCameraResolutions.find((r) => getVRChatResolutionKey(r) === value);
if (row) {
setVRChatCameraResolution(row);
}
}
});
const vrchatSpoutResolutionKey = computed({
get: () => {
const width = Number(VRChatConfigFile.value.camera_spout_res_width);
const height = Number(VRChatConfigFile.value.camera_spout_res_height);
if (width > 0 && height > 0) {
return `${width}x${height}`;
}
return VRCHAT_RESOLUTION_DEFAULT_KEY;
},
set: (value) => {
const row = VRChatScreenshotResolutions.find((r) => getVRChatResolutionKey(r) === value);
if (row) {
setVRChatSpoutResolution(row);
}
}
});
const vrchatScreenshotResolutionKey = computed({
get: () => {
const width = Number(VRChatConfigFile.value.screenshot_res_width);
const height = Number(VRChatConfigFile.value.screenshot_res_height);
if (width > 0 && height > 0) {
return `${width}x${height}`;
}
return VRCHAT_RESOLUTION_DEFAULT_KEY;
},
set: (value) => {
const row = VRChatScreenshotResolutions.find((r) => getVRChatResolutionKey(r) === value);
if (row) {
setVRChatScreenshotResolution(row);
}
}
});
function showDeleteAllVRChatCacheConfirm() {
ElMessageBox.confirm(`Continue? Delete all VRChat cache`, 'Confirm', {
confirmButtonText: 'Confirm',
@@ -354,8 +407,11 @@
delete VRChatConfigFile.value[item];
} else if (typeof VRChatConfigFile.value[item] === 'boolean' && VRChatConfigFile.value[item] === false) {
delete VRChatConfigFile.value[item];
} else if (typeof VRChatConfigFile.value[item] === 'string' && !isNaN(VRChatConfigFile.value[item])) {
VRChatConfigFile.value[item] = parseInt(VRChatConfigFile.value[item], 10);
} else if (typeof VRChatConfigFile.value[item] === 'string') {
const parsed = parseInt(VRChatConfigFile.value[item], 10);
if (!Number.isNaN(parsed)) {
VRChatConfigFile.value[item] = parsed;
}
}
}
WriteVRChatConfigFile();