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

replace some el-select with VirtualCombobox

Browse Source
This commit is contained in:
pa
2026-01-10 19:31:32 +09:00
committed by Natsumi
parent 926aacc15e
commit 6e0a3ffc7d
15 changed files with 768 additions and 610 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -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;