mirror of
https://github.com/MrUnknownDE/VRCX.git
synced 2026-04-24 01:03:50 +02:00
replace some el-select with VirtualCombobox
This commit is contained in:
pa
Natsumi
@@ -38,25 +38,28 @@
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
<el-form-item v-if="groupPostEditDialog.visibility === 'group'" :label="t('dialog.new_instance.roles')">
|
||||
<el-select
|
||||
v-model="groupPostEditDialog.roleIds"
|
||||
<Select
|
||||
multiple
|
||||
clearable
|
||||
:placeholder="t('dialog.new_instance.role_placeholder')"
|
||||
style="width: 100%">
|
||||
<el-option-group :label="t('dialog.new_instance.role_placeholder')">
|
||||
<el-option
|
||||
v-for="role in groupPostEditDialog.groupRef?.roles"
|
||||
:key="role.id"
|
||||
:label="role.name"
|
||||
:value="role.id"
|
||||
style="height: auto; width: 478px">
|
||||
<div class="detail">
|
||||
<span class="name" v-text="role.name"></span>
|
||||
</div>
|
||||
</el-option>
|
||||
</el-option-group>
|
||||
</el-select>
|
||||
:model-value="Array.isArray(groupPostEditDialog.roleIds) ? groupPostEditDialog.roleIds : []"
|
||||
@update:modelValue="handleRoleIdsChange">
|
||||
<SelectTrigger size="sm" class="w-full">
|
||||
<SelectValue>
|
||||
<span class="truncate">
|
||||
{{ selectedRoleSummary || t('dialog.new_instance.role_placeholder') }}
|
||||
</span>
|
||||
</SelectValue>
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectGroup>
|
||||
<SelectItem
|
||||
v-for="role in groupPostEditDialog.groupRef?.roles ?? []"
|
||||
:key="role.id"
|
||||
:value="role.id">
|
||||
{{ role.name }}
|
||||
</SelectItem>
|
||||
</SelectGroup>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</el-form-item>
|
||||
<el-form-item :label="t('dialog.group_post_edit.image')">
|
||||
<template v-if="gallerySelectDialog.selectedFileId">
|
||||
@@ -102,6 +105,7 @@
|
||||
import { toast } from 'vue-sonner';
|
||||
import { useI18n } from 'vue-i18n';
|
||||
|
||||
import { Select, SelectContent, SelectGroup, SelectItem, SelectTrigger, SelectValue } from '../../ui/select';
|
||||
import { groupRequest, vrcPlusIconRequest } from '../../../api';
|
||||
import { useGalleryStore, useGroupStore } from '../../../stores';
|
||||
|
||||
@@ -138,6 +142,21 @@
|
||||
}
|
||||
});
|
||||
|
||||
const selectedRoleSummary = computed(() => {
|
||||
const ids = groupPostEditDialog.value.roleIds ?? [];
|
||||
if (!Array.isArray(ids) || ids.length === 0) {
|
||||
return '';
|
||||
}
|
||||
const roleById = new Map((groupPostEditDialog.value.groupRef?.roles ?? []).map((r) => [r.id, r.name]));
|
||||
const names = ids.map((id) => roleById.get(id) ?? String(id));
|
||||
return names.slice(0, 3).join(', ') + (names.length > 3 ? ` +${names.length - 3}` : '');
|
||||
});
|
||||
|
||||
function handleRoleIdsChange(value) {
|
||||
const next = Array.isArray(value) ? value.map((v) => String(v ?? '')).filter(Boolean) : [];
|
||||
groupPostEditDialog.value.roleIds = next;
|
||||
}
|
||||
|
||||
function showGallerySelectDialog() {
|
||||
const D = gallerySelectDialog.value;
|
||||
D.visible = true;
|
||||
|
||||
@@ -27,125 +27,37 @@
|
||||
>{{ t('dialog.invite.add_favorite_friends') }}</el-button
|
||||
>
|
||||
|
||||
<el-select
|
||||
v-model="inviteDialog.userIds"
|
||||
multiple
|
||||
clearable
|
||||
:placeholder="t('dialog.invite.select_placeholder')"
|
||||
filterable
|
||||
:disabled="inviteDialog.loading"
|
||||
style="width: 100%; margin-top: 15px">
|
||||
<template v-if="currentUser">
|
||||
<el-option-group :label="t('side_panel.me')">
|
||||
<el-option
|
||||
class="x-friend-item"
|
||||
:label="currentUser.displayName"
|
||||
:value="currentUser.id"
|
||||
style="height: auto">
|
||||
<div :class="['avatar', userStatusClass(currentUser)]">
|
||||
<img :src="userImage(currentUser)" loading="lazy" />
|
||||
</div>
|
||||
<div class="detail">
|
||||
<span class="name">{{ currentUser.displayName }}</span>
|
||||
</div>
|
||||
</el-option>
|
||||
</el-option-group>
|
||||
</template>
|
||||
|
||||
<template v-if="inviteDialog.friendsInInstance.length">
|
||||
<el-option-group :label="t('dialog.invite.friends_in_instance')">
|
||||
<el-option
|
||||
v-for="friend in inviteDialog.friendsInInstance"
|
||||
:key="friend.id"
|
||||
class="x-friend-item"
|
||||
:label="friend.name"
|
||||
:value="friend.id"
|
||||
style="height: auto">
|
||||
<template v-if="friend.ref">
|
||||
<div :class="['avatar', userStatusClass(friend.ref)]">
|
||||
<img :src="userImage(friend.ref)" loading="lazy" />
|
||||
<div style="width: 100%; margin-top: 15px">
|
||||
<VirtualCombobox
|
||||
:model-value="Array.isArray(inviteDialog.userIds) ? inviteDialog.userIds : []"
|
||||
@update:modelValue="setInviteUserIds"
|
||||
:groups="userPickerGroups"
|
||||
multiple
|
||||
:disabled="inviteDialog.loading"
|
||||
:placeholder="t('dialog.invite.select_placeholder')"
|
||||
:search-placeholder="t('dialog.invite.select_placeholder')"
|
||||
:clearable="true">
|
||||
<template #item="{ item, selected }">
|
||||
<div class="x-friend-item flex w-full items-center">
|
||||
<template v-if="item.user">
|
||||
<div :class="['avatar', userStatusClass(item.user)]">
|
||||
<img :src="userImage(item.user)" loading="lazy" />
|
||||
</div>
|
||||
<div class="detail">
|
||||
<span class="name" :style="{ color: friend.ref.$userColour }">{{
|
||||
friend.ref.displayName
|
||||
<span class="name" :style="{ color: item.user.$userColour }">{{
|
||||
item.user.displayName
|
||||
}}</span>
|
||||
</div>
|
||||
</template>
|
||||
<span v-else>{{ friend.id }}</span>
|
||||
</el-option>
|
||||
</el-option-group>
|
||||
</template>
|
||||
|
||||
<template v-if="vipFriends.length">
|
||||
<el-option-group :label="t('side_panel.favorite')">
|
||||
<el-option
|
||||
v-for="friend in vipFriends"
|
||||
:key="friend.id"
|
||||
class="x-friend-item"
|
||||
:label="friend.name"
|
||||
:value="friend.id"
|
||||
style="height: auto">
|
||||
<template v-if="friend.ref">
|
||||
<div :class="['avatar', userStatusClass(friend.ref)]">
|
||||
<img :src="userImage(friend.ref)" loading="lazy" />
|
||||
</div>
|
||||
<div class="detail">
|
||||
<span class="name" :style="{ color: friend.ref.$userColour }">{{
|
||||
friend.ref.displayName
|
||||
}}</span>
|
||||
</div>
|
||||
<template v-else>
|
||||
<span>{{ item.label }}</span>
|
||||
</template>
|
||||
<span v-else>{{ friend.id }}</span>
|
||||
</el-option>
|
||||
</el-option-group>
|
||||
</template>
|
||||
|
||||
<template v-if="onlineFriends.length">
|
||||
<el-option-group :label="t('side_panel.online')">
|
||||
<el-option
|
||||
v-for="friend in onlineFriends"
|
||||
:key="friend.id"
|
||||
class="x-friend-item"
|
||||
:label="friend.name"
|
||||
:value="friend.id"
|
||||
style="height: auto">
|
||||
<template v-if="friend.ref">
|
||||
<div :class="['avatar', userStatusClass(friend.ref)]">
|
||||
<img :src="userImage(friend.ref)" loading="lazy" />
|
||||
</div>
|
||||
<div class="detail">
|
||||
<span class="name" :style="{ color: friend.ref.$userColour }">{{
|
||||
friend.ref.displayName
|
||||
}}</span>
|
||||
</div>
|
||||
</template>
|
||||
<span v-else>{{ friend.id }}</span>
|
||||
</el-option>
|
||||
</el-option-group>
|
||||
</template>
|
||||
|
||||
<template v-if="activeFriends.length">
|
||||
<el-option-group :label="t('side_panel.active')">
|
||||
<el-option
|
||||
v-for="friend in activeFriends"
|
||||
:key="friend.id"
|
||||
class="x-friend-item"
|
||||
:label="friend.name"
|
||||
:value="friend.id"
|
||||
style="height: auto">
|
||||
<template v-if="friend.ref">
|
||||
<div class="avatar"><img :src="userImage(friend.ref)" loading="lazy" /></div>
|
||||
<div class="detail">
|
||||
<span class="name" :style="{ color: friend.ref.$userColour }">{{
|
||||
friend.ref.displayName
|
||||
}}</span>
|
||||
</div>
|
||||
</template>
|
||||
<span v-else>{{ friend.id }}</span>
|
||||
</el-option>
|
||||
</el-option-group>
|
||||
</template>
|
||||
</el-select>
|
||||
<CheckIcon :class="['ml-auto size-4', selected ? 'opacity-100' : 'opacity-0']" />
|
||||
</div>
|
||||
</template>
|
||||
</VirtualCombobox>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<template #footer>
|
||||
@@ -168,8 +80,9 @@
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { computed, ref } from 'vue';
|
||||
import { Check as CheckIcon } from 'lucide-vue-next';
|
||||
import { ElMessageBox } from 'element-plus';
|
||||
import { ref } from 'vue';
|
||||
import { storeToRefs } from 'pinia';
|
||||
import { toast } from 'vue-sonner';
|
||||
import { useI18n } from 'vue-i18n';
|
||||
@@ -177,6 +90,7 @@
|
||||
import { useFriendStore, useGalleryStore, useInviteStore, useUserStore } from '../../../stores';
|
||||
import { parseLocation, userImage, userStatusClass } from '../../../shared/utils';
|
||||
import { instanceRequest, notificationRequest } from '../../../api';
|
||||
import { VirtualCombobox } from '../../ui/virtual-combobox';
|
||||
|
||||
import SendInviteDialog from './SendInviteDialog.vue';
|
||||
|
||||
@@ -202,6 +116,77 @@
|
||||
params: {}
|
||||
});
|
||||
|
||||
const userPickerGroups = computed(() => {
|
||||
const groups = [];
|
||||
|
||||
if (currentUser.value) {
|
||||
groups.push({
|
||||
key: 'me',
|
||||
label: t('side_panel.me'),
|
||||
items: [
|
||||
{
|
||||
value: String(currentUser.value.id),
|
||||
label: currentUser.value.displayName,
|
||||
search: currentUser.value.displayName,
|
||||
user: currentUser.value
|
||||
}
|
||||
]
|
||||
});
|
||||
}
|
||||
|
||||
const addFriendGroup = (key, label, friends) => {
|
||||
if (!friends?.length) return;
|
||||
groups.push({
|
||||
key,
|
||||
label,
|
||||
items: friends.map((friend) => {
|
||||
const user = friend?.ref ?? null;
|
||||
const displayName = resolveUserDisplayName(friend.id);
|
||||
return {
|
||||
value: String(friend.id),
|
||||
label: displayName,
|
||||
search: displayName,
|
||||
user
|
||||
};
|
||||
})
|
||||
});
|
||||
};
|
||||
|
||||
addFriendGroup(
|
||||
'friendsInInstance',
|
||||
t('dialog.invite.friends_in_instance'),
|
||||
props.inviteDialog?.friendsInInstance
|
||||
);
|
||||
addFriendGroup('vip', t('side_panel.favorite'), vipFriends.value);
|
||||
addFriendGroup('online', t('side_panel.online'), onlineFriends.value);
|
||||
addFriendGroup('active', t('side_panel.active'), activeFriends.value);
|
||||
|
||||
return groups;
|
||||
});
|
||||
|
||||
function setInviteUserIds(value) {
|
||||
const next = Array.isArray(value) ? value.map((v) => String(v ?? '')).filter(Boolean) : [];
|
||||
const ids = Array.isArray(props.inviteDialog.userIds) ? props.inviteDialog.userIds : [];
|
||||
ids.splice(0, ids.length, ...next);
|
||||
}
|
||||
|
||||
const friendById = computed(() => {
|
||||
const map = new Map();
|
||||
for (const friend of props.inviteDialog?.friendsInInstance ?? []) map.set(friend.id, friend);
|
||||
for (const friend of vipFriends.value) map.set(friend.id, friend);
|
||||
for (const friend of onlineFriends.value) map.set(friend.id, friend);
|
||||
for (const friend of activeFriends.value) map.set(friend.id, friend);
|
||||
return map;
|
||||
});
|
||||
|
||||
function resolveUserDisplayName(userId) {
|
||||
if (currentUser.value?.id && currentUser.value.id === userId) {
|
||||
return currentUser.value.displayName;
|
||||
}
|
||||
const friend = friendById.value.get(userId);
|
||||
return friend?.ref?.displayName ?? friend?.name ?? String(userId);
|
||||
}
|
||||
|
||||
function closeInviteDialog() {
|
||||
emit('closeInviteDialog');
|
||||
}
|
||||
|
||||
@@ -8,150 +8,62 @@
|
||||
<div v-if="inviteGroupDialog.visible" v-loading="inviteGroupDialog.loading">
|
||||
<span>{{ t('dialog.invite_to_group.description') }}</span>
|
||||
<br />
|
||||
<el-select
|
||||
v-model="inviteGroupDialog.groupId"
|
||||
clearable
|
||||
:placeholder="t('dialog.invite_to_group.choose_group_placeholder')"
|
||||
filterable
|
||||
:disabled="inviteGroupDialog.loading"
|
||||
style="margin-top: 15px; width: 100%">
|
||||
<el-option-group
|
||||
:label="t('dialog.invite_to_group.groups_with_invite_permission')"
|
||||
style="width: 410px">
|
||||
<el-option
|
||||
v-for="group in groupsWithInvitePermission"
|
||||
:key="group.id"
|
||||
:label="group.name"
|
||||
:value="group.id"
|
||||
style="height: auto"
|
||||
class="x-friend-item">
|
||||
<div class="avatar">
|
||||
<img :src="group.iconUrl" loading="lazy" />
|
||||
</div>
|
||||
<div class="detail">
|
||||
<span class="name" v-text="group.name"></span>
|
||||
</div>
|
||||
</el-option>
|
||||
</el-option-group>
|
||||
</el-select>
|
||||
<el-select
|
||||
v-model="inviteGroupDialog.userIds"
|
||||
multiple
|
||||
clearable
|
||||
:placeholder="t('dialog.invite_to_group.choose_friends_placeholder')"
|
||||
filterable
|
||||
:disabled="inviteGroupDialog.loading"
|
||||
style="width: 100%; margin-top: 15px">
|
||||
<el-option-group v-if="inviteGroupDialog.userId" :label="t('dialog.invite_to_group.selected_users')">
|
||||
<el-option
|
||||
:key="inviteGroupDialog.userObject.id"
|
||||
:label="inviteGroupDialog.userObject.displayName"
|
||||
:value="inviteGroupDialog.userObject.id"
|
||||
style="height: auto"
|
||||
class="x-friend-item">
|
||||
<template v-if="inviteGroupDialog.userObject.id">
|
||||
<div class="avatar" :class="userStatusClass(inviteGroupDialog.userObject)">
|
||||
<img :src="userImage(inviteGroupDialog.userObject)" loading="lazy" />
|
||||
</div>
|
||||
<div class="detail">
|
||||
<span
|
||||
class="name"
|
||||
:style="{ color: inviteGroupDialog.userObject.$userColour }"
|
||||
v-text="inviteGroupDialog.userObject.displayName"></span>
|
||||
</div>
|
||||
</template>
|
||||
<span v-else v-text="inviteGroupDialog.userId"></span>
|
||||
</el-option>
|
||||
</el-option-group>
|
||||
<el-option-group v-if="vipFriends.length" :label="t('side_panel.favorite')">
|
||||
<el-option
|
||||
v-for="friend in vipFriends"
|
||||
:key="friend.id"
|
||||
:label="friend.name"
|
||||
:value="friend.id"
|
||||
style="height: auto"
|
||||
class="x-friend-item">
|
||||
<template v-if="friend.ref">
|
||||
<div class="avatar" :class="userStatusClass(friend.ref)">
|
||||
<img :src="userImage(friend.ref)" loading="lazy" />
|
||||
</div>
|
||||
<div class="detail">
|
||||
<span
|
||||
class="name"
|
||||
:style="{ color: friend.ref.$userColour }"
|
||||
v-text="friend.ref.displayName"></span>
|
||||
</div>
|
||||
</template>
|
||||
<span v-else v-text="friend.id"></span>
|
||||
</el-option>
|
||||
</el-option-group>
|
||||
<el-option-group v-if="onlineFriends.length" :label="t('side_panel.online')">
|
||||
<el-option
|
||||
v-for="friend in onlineFriends"
|
||||
:key="friend.id"
|
||||
:label="friend.name"
|
||||
:value="friend.id"
|
||||
style="height: auto"
|
||||
class="x-friend-item">
|
||||
<template v-if="friend.ref">
|
||||
<div class="avatar" :class="userStatusClass(friend.ref)">
|
||||
<img :src="userImage(friend.ref)" loading="lazy" />
|
||||
</div>
|
||||
<div class="detail">
|
||||
<span
|
||||
class="name"
|
||||
:style="{ color: friend.ref.$userColour }"
|
||||
v-text="friend.ref.displayName"></span>
|
||||
</div>
|
||||
</template>
|
||||
<span v-else v-text="friend.id"></span>
|
||||
</el-option>
|
||||
</el-option-group>
|
||||
<el-option-group v-if="activeFriends.length" :label="t('side_panel.active')">
|
||||
<el-option
|
||||
v-for="friend in activeFriends"
|
||||
:key="friend.id"
|
||||
:label="friend.name"
|
||||
:value="friend.id"
|
||||
style="height: auto"
|
||||
class="x-friend-item">
|
||||
<template v-if="friend.ref">
|
||||
|
||||
<div style="margin-top: 15px; width: 100%">
|
||||
<VirtualCombobox
|
||||
v-model="inviteGroupDialog.groupId"
|
||||
:groups="groupPickerGroups"
|
||||
:disabled="inviteGroupDialog.loading"
|
||||
:placeholder="t('dialog.invite_to_group.choose_group_placeholder')"
|
||||
:search-placeholder="t('dialog.invite_to_group.choose_group_placeholder')"
|
||||
:clearable="true"
|
||||
:close-on-select="true"
|
||||
:deselect-on-reselect="true">
|
||||
<template #item="{ item, selected }">
|
||||
<div class="x-friend-item flex w-full items-center">
|
||||
<div class="avatar">
|
||||
<img :src="userImage(friend.ref)" loading="lazy" />
|
||||
<img :src="item.iconUrl" loading="lazy" />
|
||||
</div>
|
||||
<div class="detail">
|
||||
<span
|
||||
class="name"
|
||||
:style="{ color: friend.ref.$userColour }"
|
||||
v-text="friend.ref.displayName"></span>
|
||||
<span class="name" v-text="item.label"></span>
|
||||
</div>
|
||||
</template>
|
||||
<span v-else v-text="friend.id"></span>
|
||||
</el-option>
|
||||
</el-option-group>
|
||||
<el-option-group v-if="offlineFriends.length" :label="t('side_panel.offline')">
|
||||
<el-option
|
||||
v-for="friend in offlineFriends"
|
||||
:key="friend.id"
|
||||
:label="friend.name"
|
||||
:value="friend.id"
|
||||
style="height: auto"
|
||||
class="x-friend-item">
|
||||
<template v-if="friend.ref">
|
||||
<div class="avatar">
|
||||
<img :src="userImage(friend.ref)" loading="lazy" />
|
||||
</div>
|
||||
<div class="detail">
|
||||
<span
|
||||
class="name"
|
||||
:style="{ color: friend.ref.$userColour }"
|
||||
v-text="friend.ref.displayName"></span>
|
||||
</div>
|
||||
</template>
|
||||
<span v-else v-text="friend.id"></span>
|
||||
</el-option>
|
||||
</el-option-group>
|
||||
</el-select>
|
||||
<CheckIcon :class="['ml-auto size-4', selected ? 'opacity-100' : 'opacity-0']" />
|
||||
</div>
|
||||
</template>
|
||||
</VirtualCombobox>
|
||||
</div>
|
||||
|
||||
<div style="width: 100%; margin-top: 15px">
|
||||
<VirtualCombobox
|
||||
v-model="inviteGroupDialog.userIds"
|
||||
:groups="friendPickerGroups"
|
||||
multiple
|
||||
:disabled="inviteGroupDialog.loading"
|
||||
:placeholder="t('dialog.invite_to_group.choose_friends_placeholder')"
|
||||
:search-placeholder="t('dialog.invite_to_group.choose_friends_placeholder')"
|
||||
:clearable="true">
|
||||
<template #item="{ item, selected }">
|
||||
<div class="x-friend-item flex w-full items-center">
|
||||
<template v-if="item.user">
|
||||
<div class="avatar" :class="userStatusClass(item.user)">
|
||||
<img :src="userImage(item.user)" loading="lazy" />
|
||||
</div>
|
||||
<div class="detail">
|
||||
<span
|
||||
class="name"
|
||||
:style="{ color: item.user.$userColour }"
|
||||
v-text="item.user.displayName"></span>
|
||||
</div>
|
||||
</template>
|
||||
<template v-else>
|
||||
<span v-text="item.label"></span>
|
||||
</template>
|
||||
|
||||
<CheckIcon :class="['ml-auto size-4', selected ? 'opacity-100' : 'opacity-0']" />
|
||||
</div>
|
||||
</template>
|
||||
</VirtualCombobox>
|
||||
</div>
|
||||
</div>
|
||||
<template #footer>
|
||||
<el-button
|
||||
@@ -166,6 +78,7 @@
|
||||
|
||||
<script setup>
|
||||
import { computed, nextTick, ref, watch } from 'vue';
|
||||
import { Check as CheckIcon } from 'lucide-vue-next';
|
||||
import { ElMessageBox } from 'element-plus';
|
||||
import { storeToRefs } from 'pinia';
|
||||
import { toast } from 'vue-sonner';
|
||||
@@ -174,6 +87,7 @@
|
||||
import { hasGroupPermission, userImage, userStatusClass } from '../../shared/utils';
|
||||
import { groupRequest, userRequest } from '../../api';
|
||||
import { useFriendStore, useGroupStore } from '../../stores';
|
||||
import { VirtualCombobox } from '../ui/virtual-combobox';
|
||||
import { getNextDialogIndex } from '../../shared/utils/base/ui';
|
||||
|
||||
import configRepository from '../../service/config';
|
||||
@@ -203,6 +117,111 @@
|
||||
);
|
||||
});
|
||||
|
||||
const groupPickerGroups = computed(() => [
|
||||
{
|
||||
key: 'groupsWithInvitePermission',
|
||||
label: t('dialog.invite_to_group.groups_with_invite_permission'),
|
||||
items: groupsWithInvitePermission.value.map((group) => ({
|
||||
value: String(group.id),
|
||||
label: group.name,
|
||||
search: group.name,
|
||||
iconUrl: group.iconUrl
|
||||
}))
|
||||
}
|
||||
]);
|
||||
|
||||
const friendById = computed(() => {
|
||||
const map = new Map();
|
||||
for (const friend of vipFriends.value) map.set(friend.id, friend);
|
||||
for (const friend of onlineFriends.value) map.set(friend.id, friend);
|
||||
for (const friend of activeFriends.value) map.set(friend.id, friend);
|
||||
for (const friend of offlineFriends.value) map.set(friend.id, friend);
|
||||
return map;
|
||||
});
|
||||
|
||||
function resolveUserDisplayName(userId) {
|
||||
const D = inviteGroupDialog.value;
|
||||
if (D?.userObject?.id && D.userObject.id === userId) {
|
||||
return D.userObject.displayName;
|
||||
}
|
||||
const friend = friendById.value.get(userId);
|
||||
return friend?.ref?.displayName ?? friend?.name ?? String(userId);
|
||||
}
|
||||
|
||||
const friendPickerGroups = computed(() => {
|
||||
const D = inviteGroupDialog.value;
|
||||
|
||||
const groups = [];
|
||||
|
||||
if (D?.userId) {
|
||||
const selectedUser = D.userObject?.id
|
||||
? {
|
||||
value: String(D.userObject.id),
|
||||
label: D.userObject.displayName,
|
||||
search: D.userObject.displayName,
|
||||
user: D.userObject
|
||||
}
|
||||
: {
|
||||
value: String(D.userId),
|
||||
label: String(D.userId),
|
||||
search: String(D.userId)
|
||||
};
|
||||
|
||||
groups.push({
|
||||
key: 'selectedUsers',
|
||||
label: t('dialog.invite_to_group.selected_users'),
|
||||
items: [selectedUser]
|
||||
});
|
||||
}
|
||||
|
||||
const addFriendGroup = (key, label, friends) => {
|
||||
if (!friends?.length) return;
|
||||
groups.push({
|
||||
key,
|
||||
label,
|
||||
items: friends.map((friend) => {
|
||||
const user = friend?.ref ?? null;
|
||||
const displayName = resolveUserDisplayName(friend.id);
|
||||
return {
|
||||
value: String(friend.id),
|
||||
label: displayName,
|
||||
search: displayName,
|
||||
user
|
||||
};
|
||||
})
|
||||
});
|
||||
};
|
||||
|
||||
addFriendGroup('vip', t('side_panel.favorite'), vipFriends.value);
|
||||
addFriendGroup('online', t('side_panel.online'), onlineFriends.value);
|
||||
addFriendGroup('active', t('side_panel.active'), activeFriends.value);
|
||||
addFriendGroup('offline', t('side_panel.offline'), offlineFriends.value);
|
||||
|
||||
return groups;
|
||||
});
|
||||
|
||||
watch(
|
||||
() => inviteGroupDialog.value.groupId,
|
||||
(groupId) => {
|
||||
if (!inviteGroupDialog.value.visible) {
|
||||
return;
|
||||
}
|
||||
if (!groupId) {
|
||||
inviteGroupDialog.value.groupName = '';
|
||||
return;
|
||||
}
|
||||
groupRequest
|
||||
.getCachedGroup({ groupId })
|
||||
.then((args) => {
|
||||
inviteGroupDialog.value.groupName = args.ref.name;
|
||||
})
|
||||
.catch(() => {
|
||||
inviteGroupDialog.value.groupId = '';
|
||||
});
|
||||
isAllowedToInviteToGroup();
|
||||
}
|
||||
);
|
||||
|
||||
function initDialog() {
|
||||
nextTick(() => {
|
||||
inviteGroupDialogIndex.value = getNextDialogIndex();
|
||||
|
||||
@@ -19,31 +19,24 @@
|
||||
<span v-else v-text="moderateGroupDialog.userId"></span>
|
||||
</div>
|
||||
</div>
|
||||
<el-select
|
||||
v-model="moderateGroupDialog.groupId"
|
||||
clearable
|
||||
:placeholder="t('dialog.moderate_group.choose_group_placeholder')"
|
||||
filterable
|
||||
style="margin-top: 15px; width: 100%">
|
||||
<el-option-group
|
||||
v-if="currentUserGroups.size"
|
||||
:label="t('dialog.moderate_group.groups_with_moderation_permission')">
|
||||
<el-option
|
||||
v-for="group in groupsWithModerationPermission"
|
||||
:key="group.id"
|
||||
:label="group.name"
|
||||
:value="group.id"
|
||||
style="height: auto"
|
||||
class="x-friend-item">
|
||||
<div class="avatar">
|
||||
<img :src="group.iconUrl" loading="lazy" />
|
||||
|
||||
<div style="margin-top: 15px; width: 100%">
|
||||
<VirtualCombobox
|
||||
:model-value="moderateGroupDialog.groupId"
|
||||
@update:modelValue="setGroupId"
|
||||
:groups="groupPickerGroups"
|
||||
:placeholder="t('dialog.moderate_group.choose_group_placeholder')"
|
||||
:search-placeholder="t('dialog.moderate_group.choose_group_placeholder')"
|
||||
:close-on-select="true">
|
||||
<template #item="{ item, selected }">
|
||||
<div class="flex w-full items-center gap-2">
|
||||
<img :src="item.iconUrl" loading="lazy" class="size-5 rounded-sm" />
|
||||
<span class="truncate text-sm" v-text="item.label"></span>
|
||||
<span v-if="selected" class="ml-auto opacity-70">✓</span>
|
||||
</div>
|
||||
<div class="detail">
|
||||
<span class="name" v-text="group.name"></span>
|
||||
</div>
|
||||
</el-option>
|
||||
</el-option-group>
|
||||
</el-select>
|
||||
</template>
|
||||
</VirtualCombobox>
|
||||
</div>
|
||||
</div>
|
||||
<template #footer>
|
||||
<el-button
|
||||
@@ -66,6 +59,7 @@
|
||||
|
||||
import { groupRequest, userRequest } from '../../api';
|
||||
import { hasGroupModerationPermission, userImage } from '../../shared/utils';
|
||||
import { VirtualCombobox } from '../ui/virtual-combobox';
|
||||
import { getNextDialogIndex } from '../../shared/utils/base/ui';
|
||||
import { useGroupStore } from '../../stores';
|
||||
|
||||
@@ -77,6 +71,23 @@
|
||||
return Array.from(currentUserGroups.value.values()).filter((group) => hasGroupModerationPermission(group));
|
||||
});
|
||||
|
||||
const groupPickerGroups = computed(() => [
|
||||
{
|
||||
key: 'groups',
|
||||
label: t('dialog.moderate_group.header'),
|
||||
items: groupsWithModerationPermission.value.map((group) => ({
|
||||
value: group.id,
|
||||
label: group.name,
|
||||
search: group.name,
|
||||
iconUrl: group.iconUrl
|
||||
}))
|
||||
}
|
||||
]);
|
||||
|
||||
function setGroupId(value) {
|
||||
moderateGroupDialog.value.groupId = String(value ?? '');
|
||||
}
|
||||
|
||||
watch(
|
||||
() => {
|
||||
return moderateGroupDialog.value.visible;
|
||||
|
||||
@@ -125,65 +125,55 @@
|
||||
<el-form-item
|
||||
v-if="newInstanceDialog.accessType === 'group'"
|
||||
:label="t('dialog.new_instance.group_id')">
|
||||
<el-select
|
||||
<VirtualCombobox
|
||||
v-model="newInstanceDialog.groupId"
|
||||
clearable
|
||||
:groups="normalGroupPickerGroups"
|
||||
:placeholder="t('dialog.new_instance.group_placeholder')"
|
||||
filterable
|
||||
style="width: 100%"
|
||||
:search-placeholder="t('dialog.new_instance.group_placeholder')"
|
||||
:clearable="true"
|
||||
:close-on-select="true"
|
||||
:deselect-on-reselect="true"
|
||||
@change="buildInstance">
|
||||
<el-option-group :label="t('dialog.new_instance.group_placeholder')">
|
||||
<el-option
|
||||
v-for="group in currentUserGroups.values()"
|
||||
:key="group.id"
|
||||
:label="group.name"
|
||||
:value="group.id"
|
||||
class="x-friend-item"
|
||||
style="height: auto; width: 478px">
|
||||
<template
|
||||
v-if="
|
||||
group &&
|
||||
(hasGroupPermission(group, 'group-instance-public-create') ||
|
||||
hasGroupPermission(group, 'group-instance-plus-create') ||
|
||||
hasGroupPermission(group, 'group-instance-open-create'))
|
||||
">
|
||||
<div class="avatar">
|
||||
<img :src="group.iconUrl" loading="lazy" />
|
||||
</div>
|
||||
<div class="detail">
|
||||
<span class="name" v-text="group.name"></span>
|
||||
</div>
|
||||
</template>
|
||||
</el-option>
|
||||
</el-option-group>
|
||||
</el-select>
|
||||
<template #item="{ item, selected }">
|
||||
<div class="x-friend-item flex w-full items-center">
|
||||
<div class="avatar">
|
||||
<img :src="item.iconUrl" loading="lazy" />
|
||||
</div>
|
||||
<div class="detail">
|
||||
<span class="name" v-text="item.label"></span>
|
||||
</div>
|
||||
<CheckIcon :class="['ml-auto size-4', selected ? 'opacity-100' : 'opacity-0']" />
|
||||
</div>
|
||||
</template>
|
||||
</VirtualCombobox>
|
||||
</el-form-item>
|
||||
<el-form-item
|
||||
v-if="
|
||||
newInstanceDialog.accessType === 'group' && newInstanceDialog.groupAccessType === 'members'
|
||||
"
|
||||
:label="t('dialog.new_instance.roles')">
|
||||
<el-select
|
||||
v-model="newInstanceDialog.roleIds"
|
||||
<Select
|
||||
multiple
|
||||
clearable
|
||||
:placeholder="t('dialog.new_instance.role_placeholder')"
|
||||
style="width: 100%"
|
||||
@change="buildInstance">
|
||||
<el-option-group :label="t('dialog.new_instance.role_placeholder')">
|
||||
<el-option
|
||||
v-for="role in newInstanceDialog.selectedGroupRoles"
|
||||
:key="role.id"
|
||||
class="x-friend-item"
|
||||
:label="role.name"
|
||||
:value="role.id"
|
||||
style="height: auto; width: 478px">
|
||||
<div class="detail">
|
||||
<span class="name" v-text="role.name"></span>
|
||||
</div>
|
||||
</el-option>
|
||||
</el-option-group>
|
||||
</el-select>
|
||||
:model-value="Array.isArray(newInstanceDialog.roleIds) ? newInstanceDialog.roleIds : []"
|
||||
@update:modelValue="handleRoleIdsChange">
|
||||
<SelectTrigger size="sm" class="w-full">
|
||||
<SelectValue>
|
||||
<span class="truncate">
|
||||
{{ selectedRoleSummary || t('dialog.new_instance.role_placeholder') }}
|
||||
</span>
|
||||
</SelectValue>
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectGroup>
|
||||
<SelectItem
|
||||
v-for="role in newInstanceDialog.selectedGroupRoles"
|
||||
:key="role.id"
|
||||
:value="role.id">
|
||||
{{ role.name }}
|
||||
</SelectItem>
|
||||
</SelectGroup>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</el-form-item>
|
||||
<template v-if="newInstanceDialog.instanceCreated">
|
||||
<el-form-item :label="t('dialog.new_instance.location')">
|
||||
@@ -305,146 +295,61 @@
|
||||
newInstanceDialog.accessType !== 'group'
|
||||
"
|
||||
:label="t('dialog.new_instance.instance_creator')">
|
||||
<el-select
|
||||
<VirtualCombobox
|
||||
v-model="newInstanceDialog.userId"
|
||||
clearable
|
||||
:groups="creatorPickerGroups"
|
||||
:placeholder="t('dialog.new_instance.instance_creator_placeholder')"
|
||||
:persistent="false"
|
||||
filterable
|
||||
style="width: 100%"
|
||||
:search-placeholder="t('dialog.new_instance.instance_creator_placeholder')"
|
||||
:clearable="true"
|
||||
:close-on-select="true"
|
||||
:deselect-on-reselect="true"
|
||||
@change="buildLegacyInstance">
|
||||
<el-option-group v-if="currentUser" :label="t('side_panel.me')">
|
||||
<el-option
|
||||
class="x-friend-item"
|
||||
:label="currentUser.displayName"
|
||||
:value="currentUser.id"
|
||||
style="height: auto">
|
||||
<div class="avatar" :class="userStatusClass(currentUser)">
|
||||
<img :src="userImage(currentUser)" loading="lazy" />
|
||||
</div>
|
||||
<div class="detail">
|
||||
<span class="name" v-text="currentUser.displayName"></span>
|
||||
</div>
|
||||
</el-option>
|
||||
</el-option-group>
|
||||
<el-option-group v-if="vipFriends.length" :label="t('side_panel.favorite')">
|
||||
<el-option
|
||||
v-for="friend in vipFriends"
|
||||
:key="friend.id"
|
||||
class="x-friend-item"
|
||||
:label="friend.name"
|
||||
:value="friend.id"
|
||||
style="height: auto">
|
||||
<template v-if="friend.ref">
|
||||
<div class="avatar" :class="userStatusClass(friend.ref)">
|
||||
<img :src="userImage(friend.ref)" loading="lazy" />
|
||||
<template #item="{ item, selected }">
|
||||
<div class="x-friend-item flex w-full items-center">
|
||||
<template v-if="item.user">
|
||||
<div class="avatar" :class="userStatusClass(item.user)">
|
||||
<img :src="userImage(item.user)" loading="lazy" />
|
||||
</div>
|
||||
<div class="detail">
|
||||
<span
|
||||
class="name"
|
||||
:style="{ color: friend.ref.$userColour }"
|
||||
v-text="friend.ref.displayName"></span>
|
||||
:style="{ color: item.user.$userColour }"
|
||||
v-text="item.user.displayName"></span>
|
||||
</div>
|
||||
</template>
|
||||
<span v-else v-text="friend.id"></span>
|
||||
</el-option>
|
||||
</el-option-group>
|
||||
<el-option-group v-if="onlineFriends.length" :label="t('side_panel.online')">
|
||||
<el-option
|
||||
v-for="friend in onlineFriends"
|
||||
:key="friend.id"
|
||||
class="x-friend-item"
|
||||
:label="friend.name"
|
||||
:value="friend.id"
|
||||
style="height: auto">
|
||||
<template v-if="friend.ref">
|
||||
<div class="avatar" :class="userStatusClass(friend.ref)">
|
||||
<img :src="userImage(friend.ref)" loading="lazy" />
|
||||
</div>
|
||||
<div class="detail">
|
||||
<span
|
||||
class="name"
|
||||
:style="{ color: friend.ref.$userColour }"
|
||||
v-text="friend.ref.displayName"></span>
|
||||
</div>
|
||||
<template v-else>
|
||||
<span v-text="item.label"></span>
|
||||
</template>
|
||||
<span v-else v-text="friend.id"></span>
|
||||
</el-option>
|
||||
</el-option-group>
|
||||
<el-option-group v-if="activeFriends.length" :label="t('side_panel.active')">
|
||||
<el-option
|
||||
v-for="friend in activeFriends"
|
||||
:key="friend.id"
|
||||
class="x-friend-item"
|
||||
:label="friend.name"
|
||||
:value="friend.id"
|
||||
style="height: auto">
|
||||
<template v-if="friend.ref">
|
||||
<div class="avatar">
|
||||
<img :src="userImage(friend.ref)" loading="lazy" />
|
||||
</div>
|
||||
<div class="detail">
|
||||
<span
|
||||
class="name"
|
||||
:style="{ color: friend.ref.$userColour }"
|
||||
v-text="friend.ref.displayName"></span>
|
||||
</div>
|
||||
</template>
|
||||
<span v-else v-text="friend.id"></span>
|
||||
</el-option>
|
||||
</el-option-group>
|
||||
<el-option-group v-if="offlineFriends.length" :label="t('side_panel.offline')">
|
||||
<el-option
|
||||
v-for="friend in offlineFriends"
|
||||
:key="friend.id"
|
||||
class="x-friend-item"
|
||||
:label="friend.name"
|
||||
:value="friend.id"
|
||||
style="height: auto">
|
||||
<template v-if="friend.ref">
|
||||
<div class="avatar">
|
||||
<img :src="userImage(friend.ref)" loading="lazy" />
|
||||
</div>
|
||||
<div class="detail">
|
||||
<span
|
||||
class="name"
|
||||
:style="{ color: friend.ref.$userColour }"
|
||||
v-text="friend.ref.displayName"></span>
|
||||
</div>
|
||||
</template>
|
||||
<span v-else v-text="friend.id"></span>
|
||||
</el-option>
|
||||
</el-option-group>
|
||||
</el-select>
|
||||
|
||||
<CheckIcon :class="['ml-auto size-4', selected ? 'opacity-100' : 'opacity-0']" />
|
||||
</div>
|
||||
</template>
|
||||
</VirtualCombobox>
|
||||
</el-form-item>
|
||||
<el-form-item
|
||||
v-if="newInstanceDialog.accessType === 'group'"
|
||||
:label="t('dialog.new_instance.group_id')">
|
||||
<el-select
|
||||
<VirtualCombobox
|
||||
v-model="newInstanceDialog.groupId"
|
||||
clearable
|
||||
:groups="legacyGroupPickerGroups"
|
||||
:placeholder="t('dialog.new_instance.group_placeholder')"
|
||||
filterable
|
||||
style="width: 100%"
|
||||
:search-placeholder="t('dialog.new_instance.group_placeholder')"
|
||||
:clearable="true"
|
||||
:close-on-select="true"
|
||||
:deselect-on-reselect="true"
|
||||
@change="buildLegacyInstance">
|
||||
<el-option-group :label="t('dialog.new_instance.group_placeholder')">
|
||||
<el-option
|
||||
v-for="group in currentUserGroups.values()"
|
||||
:key="group.id"
|
||||
class="x-friend-item"
|
||||
:label="group.name"
|
||||
:value="group.id"
|
||||
style="height: auto; width: 478px">
|
||||
<template v-if="group">
|
||||
<div class="avatar">
|
||||
<img :src="group.iconUrl" loading="lazy" />
|
||||
</div>
|
||||
<div class="detail">
|
||||
<span class="name" v-text="group.name"></span></div
|
||||
></template>
|
||||
</el-option>
|
||||
</el-option-group>
|
||||
</el-select>
|
||||
<template #item="{ item, selected }">
|
||||
<div class="x-friend-item flex w-full items-center">
|
||||
<div class="avatar">
|
||||
<img :src="item.iconUrl" loading="lazy" />
|
||||
</div>
|
||||
<div class="detail">
|
||||
<span class="name" v-text="item.label"></span>
|
||||
</div>
|
||||
<CheckIcon :class="['ml-auto size-4', selected ? 'opacity-100' : 'opacity-0']" />
|
||||
</div>
|
||||
</template>
|
||||
</VirtualCombobox>
|
||||
</el-form-item>
|
||||
<el-form-item :label="t('dialog.new_instance.location')">
|
||||
<el-input
|
||||
@@ -535,7 +440,8 @@
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { nextTick, ref, watch } from 'vue';
|
||||
import { computed, nextTick, ref, watch } from 'vue';
|
||||
import { Check as CheckIcon } from 'lucide-vue-next';
|
||||
import { storeToRefs } from 'pinia';
|
||||
import { toast } from 'vue-sonner';
|
||||
import { useI18n } from 'vue-i18n';
|
||||
@@ -558,8 +464,11 @@
|
||||
useLocationStore,
|
||||
useUserStore
|
||||
} from '../../stores';
|
||||
import { Select, SelectContent, SelectGroup, SelectItem, SelectTrigger, SelectValue } from '../ui/select';
|
||||
import { groupRequest, instanceRequest, worldRequest } from '../../api';
|
||||
import { ToggleGroup, ToggleGroupItem } from '../ui/toggle-group';
|
||||
import { Button } from '../ui/button';
|
||||
import { VirtualCombobox } from '../ui/virtual-combobox';
|
||||
import { getNextDialogIndex } from '../../shared/utils/base/ui';
|
||||
|
||||
import InviteDialog from './InviteDialog/InviteDialog.vue';
|
||||
@@ -622,6 +531,124 @@
|
||||
friendsInInstance: []
|
||||
});
|
||||
|
||||
const instanceCreatableGroups = computed(() => {
|
||||
return Array.from(currentUserGroups.value.values()).filter((group) => {
|
||||
if (!group) {
|
||||
return false;
|
||||
}
|
||||
return (
|
||||
hasGroupPermission(group, 'group-instance-public-create') ||
|
||||
hasGroupPermission(group, 'group-instance-plus-create') ||
|
||||
hasGroupPermission(group, 'group-instance-open-create')
|
||||
);
|
||||
});
|
||||
});
|
||||
|
||||
const normalGroupPickerGroups = computed(() => [
|
||||
{
|
||||
key: 'instanceCreatableGroups',
|
||||
label: t('dialog.new_instance.group_placeholder'),
|
||||
items: instanceCreatableGroups.value.map((group) => ({
|
||||
value: String(group.id),
|
||||
label: group.name,
|
||||
search: group.name,
|
||||
iconUrl: group.iconUrl
|
||||
}))
|
||||
}
|
||||
]);
|
||||
|
||||
const legacyGroupPickerGroups = computed(() => [
|
||||
{
|
||||
key: 'currentUserGroups',
|
||||
label: t('dialog.new_instance.group_placeholder'),
|
||||
items: Array.from(currentUserGroups.value.values())
|
||||
.filter(Boolean)
|
||||
.map((group) => ({
|
||||
value: String(group.id),
|
||||
label: group.name,
|
||||
search: group.name,
|
||||
iconUrl: group.iconUrl
|
||||
}))
|
||||
}
|
||||
]);
|
||||
|
||||
const selectedRoleSummary = computed(() => {
|
||||
const roleIds = newInstanceDialog.value.roleIds ?? [];
|
||||
if (!Array.isArray(roleIds) || roleIds.length === 0) {
|
||||
return '';
|
||||
}
|
||||
const roleById = new Map((newInstanceDialog.value.selectedGroupRoles ?? []).map((r) => [r.id, r.name]));
|
||||
const names = roleIds.map((id) => roleById.get(id) ?? String(id));
|
||||
return names.slice(0, 3).join(', ') + (names.length > 3 ? ` +${names.length - 3}` : '');
|
||||
});
|
||||
|
||||
const friendById = computed(() => {
|
||||
const map = new Map();
|
||||
for (const friend of vipFriends.value) map.set(friend.id, friend);
|
||||
for (const friend of onlineFriends.value) map.set(friend.id, friend);
|
||||
for (const friend of activeFriends.value) map.set(friend.id, friend);
|
||||
for (const friend of offlineFriends.value) map.set(friend.id, friend);
|
||||
return map;
|
||||
});
|
||||
|
||||
function resolveUserDisplayName(userId) {
|
||||
if (currentUser.value?.id && currentUser.value.id === userId) {
|
||||
return currentUser.value.displayName;
|
||||
}
|
||||
const friend = friendById.value.get(userId);
|
||||
return friend?.ref?.displayName ?? friend?.name ?? String(userId);
|
||||
}
|
||||
|
||||
const creatorPickerGroups = computed(() => {
|
||||
const groups = [];
|
||||
|
||||
if (currentUser.value) {
|
||||
groups.push({
|
||||
key: 'me',
|
||||
label: t('side_panel.me'),
|
||||
items: [
|
||||
{
|
||||
value: String(currentUser.value.id),
|
||||
label: currentUser.value.displayName,
|
||||
search: currentUser.value.displayName,
|
||||
user: currentUser.value
|
||||
}
|
||||
]
|
||||
});
|
||||
}
|
||||
|
||||
const addFriendGroup = (key, label, friends) => {
|
||||
if (!friends?.length) return;
|
||||
groups.push({
|
||||
key,
|
||||
label,
|
||||
items: friends.map((friend) => {
|
||||
const user = friend?.ref ?? null;
|
||||
const displayName = resolveUserDisplayName(friend.id);
|
||||
return {
|
||||
value: String(friend.id),
|
||||
label: displayName,
|
||||
search: displayName,
|
||||
user
|
||||
};
|
||||
})
|
||||
});
|
||||
};
|
||||
|
||||
addFriendGroup('vip', t('side_panel.favorite'), vipFriends.value);
|
||||
addFriendGroup('online', t('side_panel.online'), onlineFriends.value);
|
||||
addFriendGroup('active', t('side_panel.active'), activeFriends.value);
|
||||
addFriendGroup('offline', t('side_panel.offline'), offlineFriends.value);
|
||||
|
||||
return groups;
|
||||
});
|
||||
|
||||
function handleRoleIdsChange(value) {
|
||||
const next = Array.isArray(value) ? value.map((v) => String(v ?? '')).filter(Boolean) : [];
|
||||
newInstanceDialog.value.roleIds = next;
|
||||
buildInstance();
|
||||
}
|
||||
|
||||
watch(
|
||||
() => props.newInstanceDialogLocationTag,
|
||||
(value) => {
|
||||
|
||||
@@ -10,23 +10,21 @@
|
||||
<br />
|
||||
<br />
|
||||
|
||||
<el-select
|
||||
v-if="sendBoopDialog.visible"
|
||||
v-model="fileId"
|
||||
clearable
|
||||
:placeholder="t('dialog.boop_dialog.select_default_emoji')"
|
||||
size="small"
|
||||
style="width: 100%">
|
||||
<el-option-group :label="t('dialog.boop_dialog.default_emojis')">
|
||||
<el-option
|
||||
v-for="emojiName in photonEmojis"
|
||||
:key="emojiName"
|
||||
:value="getEmojiValue(emojiName)"
|
||||
style="width: 100%; height: 100%">
|
||||
<span v-text="emojiName"></span>
|
||||
</el-option>
|
||||
</el-option-group>
|
||||
</el-select>
|
||||
<div v-if="sendBoopDialog.visible" style="width: 100%">
|
||||
<VirtualCombobox
|
||||
v-model="emojiModel"
|
||||
:groups="emojiPickerGroups"
|
||||
:placeholder="t('dialog.boop_dialog.select_default_emoji')"
|
||||
:search-placeholder="t('dialog.boop_dialog.select_default_emoji')"
|
||||
:clearable="true"
|
||||
:close-on-select="true"
|
||||
:deselect-on-reselect="true">
|
||||
<template #item="{ item, selected }">
|
||||
<span v-text="item.label"></span>
|
||||
<CheckIcon :class="['ml-auto size-4', selected ? 'opacity-100' : 'opacity-0']" />
|
||||
</template>
|
||||
</VirtualCombobox>
|
||||
</div>
|
||||
|
||||
<br />
|
||||
<br />
|
||||
@@ -73,16 +71,15 @@
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, watch } from 'vue';
|
||||
import { computed, ref, watch } from 'vue';
|
||||
import { Check as CheckIcon } from 'lucide-vue-next';
|
||||
import { storeToRefs } from 'pinia';
|
||||
import { useI18n } from 'vue-i18n';
|
||||
|
||||
import { notificationRequest, userRequest } from '../../api';
|
||||
import { miscRequest } from '../../api';
|
||||
import { miscRequest, notificationRequest, userRequest } from '../../api';
|
||||
import { useGalleryStore, useNotificationStore, useUserStore } from '../../stores';
|
||||
import { VirtualCombobox } from '../ui/virtual-combobox';
|
||||
import { photonEmojis } from '../../shared/constants/photon.js';
|
||||
import { useGalleryStore } from '../../stores';
|
||||
import { useNotificationStore } from '../../stores';
|
||||
import { useUserStore } from '../../stores/user.js';
|
||||
|
||||
import Emoji from '../Emoji.vue';
|
||||
|
||||
@@ -115,6 +112,14 @@
|
||||
function closeDialog() {
|
||||
sendBoopDialog.value.visible = false;
|
||||
}
|
||||
|
||||
const emojiModel = computed({
|
||||
get: () => (fileId.value ? String(fileId.value) : null),
|
||||
set: (value) => {
|
||||
fileId.value = value ? String(value) : '';
|
||||
}
|
||||
});
|
||||
|
||||
function getEmojiValue(emojiName) {
|
||||
if (!emojiName) {
|
||||
return '';
|
||||
@@ -122,6 +127,18 @@
|
||||
return `default_${emojiName.replace(/ /g, '_').toLowerCase()}`;
|
||||
}
|
||||
|
||||
const emojiPickerGroups = computed(() => [
|
||||
{
|
||||
key: 'defaultEmojis',
|
||||
label: t('dialog.boop_dialog.default_emojis'),
|
||||
items: photonEmojis.map((emojiName) => ({
|
||||
value: getEmojiValue(emojiName),
|
||||
label: emojiName,
|
||||
search: emojiName
|
||||
}))
|
||||
}
|
||||
]);
|
||||
|
||||
function sendBoop() {
|
||||
const D = sendBoopDialog.value;
|
||||
dismissBoop(D.userId);
|
||||
|
||||
Reference in New Issue
Block a user