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

replace el-select

Browse Source
This commit is contained in:
pa
2026-01-13 13:41:11 +09:00
committed by Natsumi
parent 4fbae859f4
commit 9e693e0e97
7 changed files with 290 additions and 151 deletions
Download Patch File Download Diff File Expand all files Collapse all files

122
src/views/Sidebar/Sidebar.vue
View File

@@ -1,45 +1,63 @@
<template>
<div class="x-aside-container">
<div style="display: flex; align-items: baseline">
<el-select
clearable
:placeholder="t('side_panel.search_placeholder')"
filterable
remote
:remote-method="quickSearchRemoteMethod"
popper-class="x-quick-search"
style="flex: 1; padding: 10px; padding-left: 0"
@change="quickSearchChange">
<el-option v-for="item in quickSearchItems" :key="item.value" :value="item.value" :label="item.label">
<div class="x-friend-item">
<template v-if="item.ref">
<div class="detail">
<span class="name" :style="{ color: item.ref.$userColour }">{{
item.ref.displayName
}}</span>
<span v-if="!item.ref.isFriend" class="extra"></span>
<span v-else-if="item.ref.state === 'offline'" class="extra">{{
t('side_panel.search_result_active')
}}</span>
<span v-else-if="item.ref.state === 'active'" class="extra">{{
t('side_panel.search_result_offline')
}}</span>
<Location
v-else
class="extra"
:location="item.ref.location"
:traveling="item.ref.travelingToLocation"
:link="false" />
<div style="flex: 1; padding: 10px; padding-left: 0">
<Popover v-model:open="isQuickSearchOpen">
<PopoverTrigger as-child>
<Input
v-model="quickSearchQuery"
:placeholder="t('side_panel.search_placeholder')"
@focus="handleQuickSearchFocus" />
</PopoverTrigger>
<PopoverContent
side="bottom"
align="start"
class="x-quick-search-popover w-(--reka-popover-trigger-width) p-2"
@open-auto-focus.prevent
@close-auto-focus.prevent>
<div class="max-h-80 overflow-auto">
<button
v-for="item in quickSearchItems"
:key="item.value"
type="button"
class="w-full bg-transparent p-0 text-left"
@mousedown.prevent
@click="handleQuickSearchSelect(item.value)">
<div class="x-friend-item">
<template v-if="item.ref">
<div class="detail">
<span class="name" :style="{ color: item.ref.$userColour }">{{
item.ref.displayName
}}</span>
<span v-if="!item.ref.isFriend" class="extra"></span>
<span v-else-if="item.ref.state === 'offline'" class="extra">{{
t('side_panel.search_result_active')
}}</span>
<span v-else-if="item.ref.state === 'active'" class="extra">{{
t('side_panel.search_result_offline')
}}</span>
<Location
v-else
class="extra"
:location="item.ref.location"
:traveling="item.ref.travelingToLocation"
:link="false" />
</div>
<img :src="userImage(item.ref)" class="avatar" loading="lazy" />
</template>
<span v-else>
{{ t('side_panel.search_result_more') }}
<span style="font-weight: bold">{{ item.label }}</span>
</span>
</div>
</button>
<div v-if="quickSearchItems.length === 0" class="px-2 py-2 text-xs opacity-70">
No results
</div>
<img :src="userImage(item.ref)" class="avatar" loading="lazy" />
</template>
<span v-else>
{{ t('side_panel.search_result_more') }}
<span style="font-weight: bold">{{ item.label }}</span>
</span>
</div>
</el-option>
</el-select>
</div>
</PopoverContent>
</Popover>
</div>
<div>
<TooltipWrapper side="bottom" :content="t('side_panel.refresh_tooltip')">
<Button
@@ -76,7 +94,10 @@
</template>
<script setup>
import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover';
import { ref, watch } from 'vue';
import { Button } from '@/components/ui/button';
import { Input } from '@/components/ui/input';
import { Refresh } from '@element-plus/icons-vue';
import { Spinner } from '@/components/ui/spinner';
import { storeToRefs } from 'pinia';
@@ -94,6 +115,31 @@
const { quickSearchItems } = storeToRefs(useSearchStore());
const { inGameGroupOrder, groupInstances } = storeToRefs(useGroupStore());
const { t } = useI18n();
const quickSearchQuery = ref('');
const isQuickSearchOpen = ref(false);
watch(
quickSearchQuery,
(value) => {
quickSearchRemoteMethod(String(value ?? ''));
},
{ immediate: true }
);
function handleQuickSearchFocus() {
isQuickSearchOpen.value = true;
quickSearchRemoteMethod(String(quickSearchQuery.value ?? ''));
}
function handleQuickSearchSelect(value) {
if (!value) {
return;
}
isQuickSearchOpen.value = false;
quickSearchQuery.value = '';
quickSearchChange(String(value));
}
</script>
<style scoped>