replace el-checkbox with Checkbox component

This commit is contained in:
pa
2026-01-11 22:25:54 +09:00
committed by Natsumi
parent 6222becd3d
commit 3ed266089a
26 changed files with 341 additions and 191 deletions
+1 -1
View File
@@ -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;
}
+1 -1
View File
@@ -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;
}
+1 -1
View File
@@ -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;