mirror of
https://github.com/MrUnknownDE/VRCX.git
synced 2026-05-07 06:56:04 +02:00
replace el-checkbox with Checkbox component
This commit is contained in:
@@ -2001,7 +2001,7 @@
|
||||
margin-right: var(--favorites-card-checkbox-margin, 10px);
|
||||
}
|
||||
|
||||
:deep(.favorites-search-card__action--checkbox .el-checkbox) {
|
||||
:deep(.favorites-search-card__action--checkbox [data-slot='checkbox']) {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
|
||||
@@ -1187,7 +1187,7 @@
|
||||
margin-right: var(--favorites-card-checkbox-margin, 10px);
|
||||
}
|
||||
|
||||
:deep(.favorites-search-card__action--checkbox .el-checkbox) {
|
||||
:deep(.favorites-search-card__action--checkbox [data-slot='checkbox']) {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
|
||||
@@ -1704,7 +1704,7 @@
|
||||
margin-right: var(--favorites-card-checkbox-margin, 10px);
|
||||
}
|
||||
|
||||
:deep(.favorites-search-card__action--checkbox .el-checkbox) {
|
||||
:deep(.favorites-search-card__action--checkbox [data-slot='checkbox']) {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
|
||||
@@ -32,7 +32,7 @@
|
||||
v-if="!isLocalFavorite"
|
||||
class="favorites-search-card__action favorites-search-card__action--checkbox"
|
||||
@click.stop>
|
||||
<el-checkbox v-model="isSelected"></el-checkbox>
|
||||
<Checkbox v-model="isSelected" />
|
||||
</div>
|
||||
<div class="favorites-search-card__action-group">
|
||||
<div class="favorites-search-card__action favorites-search-card__action--full" @click.stop>
|
||||
@@ -124,6 +124,7 @@
|
||||
|
||||
<script setup>
|
||||
import { Check, Close, Star } from '@element-plus/icons-vue';
|
||||
import { Checkbox } from '@/components/ui/checkbox';
|
||||
import { computed } from 'vue';
|
||||
import { storeToRefs } from 'pinia';
|
||||
import { useI18n } from 'vue-i18n';
|
||||
|
||||
@@ -21,7 +21,7 @@
|
||||
<div class="favorites-search-card__actions">
|
||||
<template v-if="editMode">
|
||||
<div class="favorites-search-card__action favorites-search-card__action--checkbox" @click.stop>
|
||||
<el-checkbox v-model="isSelected"></el-checkbox>
|
||||
<Checkbox v-model="isSelected" />
|
||||
</div>
|
||||
<div class="favorites-search-card__action-group">
|
||||
<div class="favorites-search-card__action favorites-search-card__action--full" @click.stop>
|
||||
@@ -79,6 +79,7 @@
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { Checkbox } from '@/components/ui/checkbox';
|
||||
import { Star } from '@element-plus/icons-vue';
|
||||
import { computed } from 'vue';
|
||||
import { storeToRefs } from 'pinia';
|
||||
|
||||
@@ -38,7 +38,7 @@
|
||||
<div class="favorites-search-card__actions">
|
||||
<template v-if="editMode">
|
||||
<div class="favorites-search-card__action favorites-search-card__action--checkbox" @click.stop>
|
||||
<el-checkbox v-model="isSelected"></el-checkbox>
|
||||
<Checkbox v-model="isSelected" />
|
||||
</div>
|
||||
<div class="favorites-search-card__action-group">
|
||||
<div class="favorites-search-card__action favorites-search-card__action--full" @click.stop>
|
||||
@@ -124,6 +124,7 @@
|
||||
|
||||
<script setup>
|
||||
import { Close, Message, Star } from '@element-plus/icons-vue';
|
||||
import { Checkbox } from '@/components/ui/checkbox';
|
||||
import { computed } from 'vue';
|
||||
import { storeToRefs } from 'pinia';
|
||||
import { useI18n } from 'vue-i18n';
|
||||
|
||||
@@ -1,13 +1,13 @@
|
||||
<template>
|
||||
<el-dialog v-model="isDialogVisible" :title="t('dialog.avatar_export.header')" width="650px">
|
||||
<el-checkbox-group
|
||||
v-model="exportSelectedOptions"
|
||||
style="margin-bottom: 10px"
|
||||
@change="updateAvatarExportDialog()">
|
||||
<template v-for="option in exportSelectOptions" :key="option.value">
|
||||
<el-checkbox :label="option.label"></el-checkbox>
|
||||
</template>
|
||||
</el-checkbox-group>
|
||||
<div style="margin-bottom: 10px" class="flex flex-col gap-2">
|
||||
<label v-for="option in exportSelectOptions" :key="option.value" class="inline-flex items-center gap-2">
|
||||
<Checkbox
|
||||
:model-value="exportSelectedOptions.includes(option.label)"
|
||||
@update:modelValue="(val) => toggleAvatarExportOption(option.label, val)" />
|
||||
<span>{{ option.label }}</span>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div class="flex items-center gap-2">
|
||||
<Select
|
||||
@@ -62,6 +62,7 @@
|
||||
<script setup>
|
||||
import { Select, SelectContent, SelectGroup, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
|
||||
import { computed, ref, watch } from 'vue';
|
||||
import { Checkbox } from '@/components/ui/checkbox';
|
||||
import { storeToRefs } from 'pinia';
|
||||
import { toast } from 'vue-sonner';
|
||||
import { useI18n } from 'vue-i18n';
|
||||
@@ -107,6 +108,17 @@
|
||||
{ label: 'Thumbnail', value: 'thumbnailImageUrl' }
|
||||
]);
|
||||
|
||||
function toggleAvatarExportOption(label, checked) {
|
||||
const selection = exportSelectedOptions.value;
|
||||
const index = selection.indexOf(label);
|
||||
if (checked && index === -1) {
|
||||
selection.push(label);
|
||||
} else if (!checked && index !== -1) {
|
||||
selection.splice(index, 1);
|
||||
}
|
||||
updateAvatarExportDialog();
|
||||
}
|
||||
|
||||
const isDialogVisible = computed({
|
||||
get() {
|
||||
return props.avatarExportDialogVisible;
|
||||
|
||||
@@ -1,13 +1,13 @@
|
||||
<template>
|
||||
<el-dialog v-model="isDialogVisible" :title="t('dialog.world_export.header')" width="650px">
|
||||
<el-checkbox-group
|
||||
v-model="exportSelectedOptions"
|
||||
style="margin-bottom: 10px"
|
||||
@change="updateWorldExportDialog">
|
||||
<template v-for="option in exportSelectOptions" :key="option.value">
|
||||
<el-checkbox :label="option.label"></el-checkbox>
|
||||
</template>
|
||||
</el-checkbox-group>
|
||||
<div style="margin-bottom: 10px" class="flex flex-col gap-2">
|
||||
<label v-for="option in exportSelectOptions" :key="option.value" class="inline-flex items-center gap-2">
|
||||
<Checkbox
|
||||
:model-value="exportSelectedOptions.includes(option.label)"
|
||||
@update:modelValue="(val) => toggleWorldExportOption(option.label, val)" />
|
||||
<span>{{ option.label }}</span>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div class="flex items-center gap-2">
|
||||
<Select :model-value="worldExportFavoriteGroupSelection" @update:modelValue="handleWorldExportGroupSelect">
|
||||
@@ -59,6 +59,7 @@
|
||||
<script setup>
|
||||
import { Select, SelectContent, SelectGroup, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
|
||||
import { computed, ref, watch } from 'vue';
|
||||
import { Checkbox } from '@/components/ui/checkbox';
|
||||
import { storeToRefs } from 'pinia';
|
||||
import { toast } from 'vue-sonner';
|
||||
import { useI18n } from 'vue-i18n';
|
||||
@@ -105,6 +106,17 @@
|
||||
{ label: 'Thumbnail', value: 'thumbnailImageUrl' }
|
||||
]);
|
||||
|
||||
function toggleWorldExportOption(label, checked) {
|
||||
const selection = exportSelectedOptions.value;
|
||||
const index = selection.indexOf(label);
|
||||
if (checked && index === -1) {
|
||||
selection.push(label);
|
||||
} else if (!checked && index !== -1) {
|
||||
selection.splice(index, 1);
|
||||
}
|
||||
updateWorldExportDialog();
|
||||
}
|
||||
|
||||
const isDialogVisible = computed({
|
||||
get() {
|
||||
return props.worldExportDialogVisible;
|
||||
|
||||
Reference in New Issue
Block a user