mirror of
https://github.com/MrUnknownDE/VRCX.git
synced 2026-05-05 14:26:06 +02:00
replace el-dropdown
This commit is contained in:
pa
Natsumi
@@ -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>
|
||||
|
||||
@@ -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() {
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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;
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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() {
|
||||
|
||||
Reference in New Issue
Block a user