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

replace clickable el-popover with Popover components

Browse Source
This commit is contained in:
pa
2026-01-07 19:59:33 +09:00
committed by Natsumi
parent 738d22461e
commit acbc0ca0fc
12 changed files with 517 additions and 395 deletions
Download Patch File Download Diff File Expand all files Collapse all files

74
src/components/IconPicker.vue
View File

@@ -1,52 +1,56 @@
<template>
<el-popover v-model:visible="visible" trigger="click" placement="bottom-start" :width="620">
<template #reference>
<Popover v-model:open="visible">
<PopoverTrigger asChild>
<el-button class="icon-picker__trigger" plain>
<i v-if="modelValue" :class="modelValue"></i>
<span>{{ t('nav_menu.icon_picker.pick_icon') }}</span>
</el-button>
</template>
<div class="icon-picker">
<el-input
v-model="search"
clearable
class="icon-picker__search"
:placeholder="t('nav_menu.icon_picker.search_placeholder')" />
<el-scrollbar v-if="filteredCategories.length" height="600px" class="icon-picker__scroll">
<div v-for="category in filteredCategories" :key="category.name" class="icon-picker__category">
<div class="icon-picker__category-title">
{{ category.name }}
</div>
<div class="icon-picker__grid">
<div v-for="group in category.groups" :key="group.id" class="icon-picker__group">
<div class="icon-picker__group-label">
{{ group.label }}
</div>
<div class="icon-picker__variants">
<button
v-for="variant in group.variants"
:key="variant.className"
type="button"
class="icon-picker__variant"
:class="{ 'is-active': variant.className === modelValue }"
:title="group.tooltip"
@click="handleSelect(variant.className)">
<i :class="[variant.className, 'ri-2x']"></i>
</button>
</PopoverTrigger>
<PopoverContent side="bottom" align="start" class="w-[620px]">
<div class="icon-picker">
<el-input
v-model="search"
clearable
class="icon-picker__search"
:placeholder="t('nav_menu.icon_picker.search_placeholder')" />
<el-scrollbar v-if="filteredCategories.length" height="600px" class="icon-picker__scroll">
<div v-for="category in filteredCategories" :key="category.name" class="icon-picker__category">
<div class="icon-picker__category-title">
{{ category.name }}
</div>
<div class="icon-picker__grid">
<div v-for="group in category.groups" :key="group.id" class="icon-picker__group">
<div class="icon-picker__group-label">
{{ group.label }}
</div>
<div class="icon-picker__variants">
<button
v-for="variant in group.variants"
:key="variant.className"
type="button"
class="icon-picker__variant"
:class="{ 'is-active': variant.className === modelValue }"
:title="group.tooltip"
@click="handleSelect(variant.className)">
<i :class="[variant.className, 'ri-2x']"></i>
</button>
</div>
</div>
</div>
</div>
</div>
</el-scrollbar>
<div v-else class="icon-picker__empty">{{ t('nav_menu.icon_picker.no_icon_found') }}</div>
</div>
</el-popover>
</el-scrollbar>
<div v-else class="icon-picker__empty">{{ t('nav_menu.icon_picker.no_icon_found') }}</div>
</div>
</PopoverContent>
</Popover>
</template>
<script setup>
import { computed, ref, watch } from 'vue';
import { useI18n } from 'vue-i18n';
import { Popover, PopoverContent, PopoverTrigger } from './ui/popover';
import remixIconTags from '../shared/constants/remixIconTags.json';
const { t } = useI18n();