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 element plus components

Browse Source
This commit is contained in:
pa
2026-01-15 22:38:09 +09:00
committed by Natsumi
parent bdc1d3a347
commit c430ce1b63
46 changed files with 2143 additions and 1752 deletions
Download Patch File Download Diff File Expand all files Collapse all files

108
src/components/dialogs/SendBoopDialog.vue
View File

@@ -4,79 +4,79 @@
<DialogHeader>
<DialogTitle>{{ t('dialog.boop_dialog.header') }}</DialogTitle>
</DialogHeader>
<span>{{ displayName }}</span>
<span>{{ displayName }}</span>
<br />
<br />
<br />
<br />
<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>
<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 />
<br />
<br />
<div
v-if="isLocalUserVrcPlusSupporter"
style="
display: grid;
grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
gap: 15px;
margin-top: 10px;
max-height: 600px;
overflow-y: auto;
">
<div
v-for="image in emojiTable"
:key="image.id"
:class="image.id === fileId ? 'x-image-selected' : ''"
style="cursor: pointer; border: 1px solid transparent; border-radius: 8px"
@click="fileId = image.id">
v-if="isLocalUserVrcPlusSupporter"
style="
display: grid;
grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
gap: 15px;
margin-top: 10px;
max-height: 600px;
overflow-y: auto;
">
<div
v-if="
image.versions &&
image.versions.length > 0 &&
image.versions[image.versions.length - 1].file.url
"
class="x-popover-image"
style="padding: 8px">
<Emoji :imageUrl="image.versions[image.versions.length - 1].file.url" :size="100"></Emoji>
v-for="image in emojiTable"
:key="image.id"
:class="image.id === fileId ? 'x-image-selected' : ''"
style="cursor: pointer; border: 1px solid transparent; border-radius: 8px"
@click="fileId = image.id">
<div
v-if="
image.versions &&
image.versions.length > 0 &&
image.versions[image.versions.length - 1].file.url
"
class="x-popover-image"
style="padding: 8px">
<Emoji :imageUrl="image.versions[image.versions.length - 1].file.url" :size="100"></Emoji>
</div>
</div>
</div>
</div>
<DialogFooter>
<Button size="sm" variant="outline" class="mr-2" @click="showGalleryPage">{{
t('dialog.boop_dialog.emoji_manager')
}}</Button>
<Button size="sm" variant="secondary" class="mr-2" @click="closeDialog">{{
t('dialog.boop_dialog.cancel')
}}</Button>
<Button size="sm" :disabled="!sendBoopDialog.userId" @click="sendBoop">{{
t('dialog.boop_dialog.send')
}}</Button>
<Button size="sm" variant="outline" class="mr-2" @click="showGalleryPage">{{
t('dialog.boop_dialog.emoji_manager')
}}</Button>
<Button size="sm" variant="secondary" class="mr-2" @click="closeDialog">{{
t('dialog.boop_dialog.cancel')
}}</Button>
<Button size="sm" :disabled="!sendBoopDialog.userId" @click="sendBoop">{{
t('dialog.boop_dialog.send')
}}</Button>
</DialogFooter>
</DialogContent>
</Dialog>
</template>
<script setup>
import { Dialog, DialogContent, DialogFooter, DialogHeader, DialogTitle } from '@/components/ui/dialog';
import { computed, ref, watch } from 'vue';
import { Button } from '@/components/ui/button';
import { Check as CheckIcon } from 'lucide-vue-next';
import { Dialog, DialogContent, DialogFooter, DialogHeader, DialogTitle } from '@/components/ui/dialog';
import { storeToRefs } from 'pinia';
import { useI18n } from 'vue-i18n';