mirror of
https://github.com/MrUnknownDE/VRCX.git
synced 2026-04-18 14:23:51 +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);
|
||||
|
||||
16
src/components/ui/command/index.js
Normal file
16
src/components/ui/command/index.js
Normal file
@@ -0,0 +1,16 @@
|
||||
import { createContext } from 'reka-ui';
|
||||
|
||||
export { default as Command } from './Command.vue';
|
||||
export { default as CommandDialog } from './CommandDialog.vue';
|
||||
export { default as CommandEmpty } from './CommandEmpty.vue';
|
||||
export { default as CommandGroup } from './CommandGroup.vue';
|
||||
export { default as CommandInput } from './CommandInput.vue';
|
||||
export { default as CommandItem } from './CommandItem.vue';
|
||||
export { default as CommandList } from './CommandList.vue';
|
||||
export { default as CommandSeparator } from './CommandSeparator.vue';
|
||||
export { default as CommandShortcut } from './CommandShortcut.vue';
|
||||
|
||||
export const [useCommand, provideCommandContext] = createContext('Command');
|
||||
|
||||
export const [useCommandGroup, provideCommandGroupContext] =
|
||||
createContext('CommandGroup');
|
||||
10
src/components/ui/dialog/index.js
Normal file
10
src/components/ui/dialog/index.js
Normal file
@@ -0,0 +1,10 @@
|
||||
export { default as Dialog } from './Dialog.vue';
|
||||
export { default as DialogClose } from './DialogClose.vue';
|
||||
export { default as DialogContent } from './DialogContent.vue';
|
||||
export { default as DialogDescription } from './DialogDescription.vue';
|
||||
export { default as DialogFooter } from './DialogFooter.vue';
|
||||
export { default as DialogHeader } from './DialogHeader.vue';
|
||||
export { default as DialogOverlay } from './DialogOverlay.vue';
|
||||
export { default as DialogScrollContent } from './DialogScrollContent.vue';
|
||||
export { default as DialogTitle } from './DialogTitle.vue';
|
||||
export { default as DialogTrigger } from './DialogTrigger.vue';
|
||||
32
src/components/ui/input/Input.vue
Normal file
32
src/components/ui/input/Input.vue
Normal file
@@ -0,0 +1,32 @@
|
||||
<script setup>
|
||||
import { useVModel } from "@vueuse/core";
|
||||
import { cn } from "@/lib/utils";
|
||||
|
||||
const props = defineProps({
|
||||
defaultValue: { type: [String, Number], required: false },
|
||||
modelValue: { type: [String, Number], required: false },
|
||||
class: { type: null, required: false },
|
||||
});
|
||||
|
||||
const emits = defineEmits(["update:modelValue"]);
|
||||
|
||||
const modelValue = useVModel(props, "modelValue", emits, {
|
||||
passive: true,
|
||||
defaultValue: props.defaultValue,
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<input
|
||||
v-model="modelValue"
|
||||
data-slot="input"
|
||||
:class="
|
||||
cn(
|
||||
'file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 border-input h-9 w-full min-w-0 rounded-md border bg-transparent px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm',
|
||||
'focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]',
|
||||
'aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive',
|
||||
props.class,
|
||||
)
|
||||
"
|
||||
/>
|
||||
</template>
|
||||
1
src/components/ui/input/index.js
Normal file
1
src/components/ui/input/index.js
Normal file
@@ -0,0 +1 @@
|
||||
export { default as Input } from "./Input.vue";
|
||||
@@ -1,3 +1,78 @@
|
||||
<template>
|
||||
<Popover v-model:open="isOpen">
|
||||
<PopoverTrigger as-child>
|
||||
<Button variant="outline" size="sm" role="combobox" class="w-full justify-between" :disabled="disabled">
|
||||
<slot name="trigger" :text="selectionSummaryText" :clear="clearSelection">
|
||||
<span class="truncate">
|
||||
{{ selectionSummaryText || placeholder }}
|
||||
</span>
|
||||
</slot>
|
||||
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="opacity-60">▾</span>
|
||||
</div>
|
||||
</Button>
|
||||
</PopoverTrigger>
|
||||
|
||||
<PopoverContent class="w-(--reka-popover-trigger-width) p-2">
|
||||
<Input v-if="searchable" v-model="searchText" :placeholder="searchPlaceholder" class="mb-2" />
|
||||
|
||||
<div
|
||||
ref="scrollContainerRef"
|
||||
class="overflow-auto rounded-md border"
|
||||
:style="{ maxHeight: `${maxHeight}px` }">
|
||||
<div
|
||||
:style="{
|
||||
height: `${virtualizer.getTotalSize()}px`,
|
||||
position: 'relative'
|
||||
}">
|
||||
<template v-for="virtualRow in virtualizer.getVirtualItems()" :key="String(virtualRow.key)">
|
||||
<div
|
||||
class="absolute left-0 top-0 w-full"
|
||||
:style="{ transform: `translateY(${virtualRow.start}px)` }">
|
||||
<template v-if="virtualListEntries[virtualRow.index]?.type === 'group'">
|
||||
<div
|
||||
class="px-2 text-xs font-medium opacity-70 flex items-center"
|
||||
:style="{ height: `${groupHeaderHeight}px` }">
|
||||
<slot name="group" :group="virtualListEntries[virtualRow.index].group">
|
||||
{{ virtualListEntries[virtualRow.index].group.label }}
|
||||
</slot>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<template v-else>
|
||||
<button
|
||||
type="button"
|
||||
class="flex w-full items-center gap-2 px-2 text-left"
|
||||
:style="{ height: `${itemHeight}px` }"
|
||||
@click="toggleSelection(virtualListEntries[virtualRow.index].value)">
|
||||
<slot
|
||||
name="item"
|
||||
:item="virtualListEntries[virtualRow.index].item"
|
||||
:selected="selectedValueSet.has(virtualListEntries[virtualRow.index].value)">
|
||||
<span class="truncate text-sm">
|
||||
{{ virtualListEntries[virtualRow.index].item.label }}
|
||||
</span>
|
||||
<span
|
||||
v-if="selectedValueSet.has(virtualListEntries[virtualRow.index].value)"
|
||||
class="ml-auto opacity-70">
|
||||
✓
|
||||
</span>
|
||||
</slot>
|
||||
</button>
|
||||
</template>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<div v-if="virtualListEntries.length === 0" class="p-3 text-sm opacity-70">
|
||||
<slot name="empty">Nothing found</slot>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</PopoverContent>
|
||||
</Popover>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { computed, ref, shallowRef, watch } from 'vue';
|
||||
import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover';
|
||||
@@ -22,7 +97,8 @@
|
||||
itemHeight: { type: Number, default: 40 },
|
||||
groupHeaderHeight: { type: Number, default: 28 },
|
||||
|
||||
closeOnSelect: { type: Boolean, default: false }
|
||||
closeOnSelect: { type: Boolean, default: false },
|
||||
deselectOnReselect: { type: Boolean, default: false }
|
||||
});
|
||||
|
||||
const emit = defineEmits(['update:modelValue', 'change', 'clear']);
|
||||
@@ -31,6 +107,8 @@
|
||||
const searchText = ref('');
|
||||
const scrollContainerRef = shallowRef(null);
|
||||
|
||||
const normalizedGroups = computed(() => /** @type {Array<any>} */ (props.groups ?? []));
|
||||
|
||||
const selectedValueSet = computed(() => {
|
||||
if (props.multiple) {
|
||||
const values = Array.isArray(props.modelValue) ? props.modelValue : [];
|
||||
@@ -44,8 +122,8 @@
|
||||
|
||||
const entries = [];
|
||||
|
||||
for (const group of props.groups) {
|
||||
const groupItems = Array.isArray(group.items) ? group.items : [];
|
||||
for (const group of normalizedGroups.value) {
|
||||
const groupItems = Array.isArray(group?.items) ? group.items : [];
|
||||
|
||||
const filteredItems = normalizedSearch
|
||||
? groupItems.filter((item) =>
|
||||
@@ -57,14 +135,14 @@
|
||||
|
||||
entries.push({
|
||||
type: 'group',
|
||||
key: `group:${group.key}`,
|
||||
key: `group:${group?.key ?? ''}`,
|
||||
group
|
||||
});
|
||||
|
||||
for (const item of filteredItems) {
|
||||
entries.push({
|
||||
type: 'item',
|
||||
key: `item:${group.key}:${item.value}`,
|
||||
key: `item:${group?.key ?? ''}:${item?.value}`,
|
||||
group,
|
||||
item,
|
||||
value: String(item.value)
|
||||
@@ -81,8 +159,8 @@
|
||||
|
||||
const valueToLabelMap = new Map();
|
||||
|
||||
for (const group of props.groups) {
|
||||
for (const item of group.items ?? []) {
|
||||
for (const group of normalizedGroups.value) {
|
||||
for (const item of group?.items ?? []) {
|
||||
valueToLabelMap.set(String(item.value), item.label);
|
||||
}
|
||||
}
|
||||
@@ -103,6 +181,13 @@
|
||||
emit('update:modelValue', next);
|
||||
emit('change', next);
|
||||
} else {
|
||||
if (props.deselectOnReselect && selectedValueSet.value.has(value)) {
|
||||
clearSelection();
|
||||
if (props.closeOnSelect) {
|
||||
isOpen.value = false;
|
||||
}
|
||||
return;
|
||||
}
|
||||
emit('update:modelValue', value);
|
||||
emit('change', value);
|
||||
|
||||
@@ -133,85 +218,3 @@
|
||||
virtualizer.value?.scrollToOffset?.(0);
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Popover v-model:open="isOpen">
|
||||
<PopoverTrigger as-child>
|
||||
<Button variant="outline" size="sm" role="combobox" class="w-full justify-between" :disabled="disabled">
|
||||
<slot name="trigger" :text="selectionSummaryText" :clear="clearSelection">
|
||||
<span class="truncate">
|
||||
{{ selectionSummaryText || placeholder }}
|
||||
</span>
|
||||
</slot>
|
||||
|
||||
<div class="flex items-center gap-2">
|
||||
<button
|
||||
v-if="clearable && selectedValueSet.size && !disabled"
|
||||
type="button"
|
||||
class="opacity-60 hover:opacity-90"
|
||||
@click.stop="clearSelection">
|
||||
✕
|
||||
</button>
|
||||
<span class="opacity-60">▾</span>
|
||||
</div>
|
||||
</Button>
|
||||
</PopoverTrigger>
|
||||
|
||||
<PopoverContent class="w-(--reka-popover-trigger-width) p-2">
|
||||
<Input v-if="searchable" v-model="searchText" :placeholder="searchPlaceholder" class="mb-2" />
|
||||
|
||||
<div
|
||||
ref="scrollContainerRef"
|
||||
class="overflow-auto rounded-md border"
|
||||
:style="{ maxHeight: `${maxHeight}px` }">
|
||||
<div
|
||||
:style="{
|
||||
height: `${virtualizer.getTotalSize()}px`,
|
||||
position: 'relative'
|
||||
}">
|
||||
<template v-for="virtualRow in virtualizer.getVirtualItems()" :key="virtualRow.key">
|
||||
<div
|
||||
class="absolute left-0 top-0 w-full"
|
||||
:style="{ transform: `translateY(${virtualRow.start}px)` }">
|
||||
<template v-if="virtualListEntries[virtualRow.index]?.type === 'group'">
|
||||
<div
|
||||
class="px-2 text-xs font-medium opacity-70 flex items-center"
|
||||
:style="{ height: `${groupHeaderHeight}px` }">
|
||||
<slot name="group" :group="virtualListEntries[virtualRow.index].group">
|
||||
{{ virtualListEntries[virtualRow.index].group.label }}
|
||||
</slot>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<template v-else>
|
||||
<button
|
||||
type="button"
|
||||
class="flex w-full items-center gap-2 px-2 hover:bg-accent text-left"
|
||||
:style="{ height: `${itemHeight}px` }"
|
||||
@click="toggleSelection(virtualListEntries[virtualRow.index].value)">
|
||||
<slot
|
||||
name="item"
|
||||
:item="virtualListEntries[virtualRow.index].item"
|
||||
:selected="selectedValueSet.has(virtualListEntries[virtualRow.index].value)">
|
||||
<span class="truncate text-sm">
|
||||
{{ virtualListEntries[virtualRow.index].item.label }}
|
||||
</span>
|
||||
<span
|
||||
v-if="selectedValueSet.has(virtualListEntries[virtualRow.index].value)"
|
||||
class="ml-auto opacity-70">
|
||||
✓
|
||||
</span>
|
||||
</slot>
|
||||
</button>
|
||||
</template>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<div v-if="virtualListEntries.length === 0" class="p-3 text-sm opacity-70">
|
||||
<slot name="empty">Nothing found</slot>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</PopoverContent>
|
||||
</Popover>
|
||||
</template>
|
||||
|
||||
1
src/components/ui/virtual-combobox/index.js
Normal file
1
src/components/ui/virtual-combobox/index.js
Normal file
@@ -0,0 +1 @@
|
||||
export { default as VirtualCombobox } from './VirtualCombobox.vue';
|
||||
Reference in New Issue
Block a user