MrUnknownDE/VRCX
1
0
Fork 0
mirror of https://github.com/MrUnknownDE/VRCX.git synced 2026-04-19 06:43:51 +02:00
Code Issues Packages Projects Releases Wiki Activity

replace el-checkbox with Checkbox component

Browse Source
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
Download Patch File Download Diff File Expand all files Collapse all files

50
src/components/dialogs/AvatarDialog/SetAvatarTagsDialog.vue
View File

@@ -8,21 +8,26 @@
width="780px"
append-to-body>
<template v-if="setAvatarTagsDialog.visible">
<el-checkbox v-model="setAvatarTagsDialog.contentHorror" @change="updateSelectedAvatarTags">{{
t('dialog.set_avatar_tags.content_horror')
}}</el-checkbox>
<el-checkbox v-model="setAvatarTagsDialog.contentGore" @change="updateSelectedAvatarTags">{{
t('dialog.set_avatar_tags.content_gore')
}}</el-checkbox>
<el-checkbox v-model="setAvatarTagsDialog.contentViolence" @change="updateSelectedAvatarTags">{{
t('dialog.set_avatar_tags.content_violence')
}}</el-checkbox>
<el-checkbox v-model="setAvatarTagsDialog.contentAdult" @change="updateSelectedAvatarTags">{{
t('dialog.set_avatar_tags.content_adult')
}}</el-checkbox>
<el-checkbox v-model="setAvatarTagsDialog.contentSex" @change="updateSelectedAvatarTags">{{
t('dialog.set_avatar_tags.content_sex')
}}</el-checkbox>
<label class="inline-flex items-center gap-2">
<Checkbox v-model="setAvatarTagsDialog.contentHorror" @update:modelValue="updateSelectedAvatarTags" />
<span>{{ t('dialog.set_avatar_tags.content_horror') }}</span>
</label>
<label class="inline-flex items-center gap-2">
<Checkbox v-model="setAvatarTagsDialog.contentGore" @update:modelValue="updateSelectedAvatarTags" />
<span>{{ t('dialog.set_avatar_tags.content_gore') }}</span>
</label>
<label class="inline-flex items-center gap-2">
<Checkbox v-model="setAvatarTagsDialog.contentViolence" @update:modelValue="updateSelectedAvatarTags" />
<span>{{ t('dialog.set_avatar_tags.content_violence') }}</span>
</label>
<label class="inline-flex items-center gap-2">
<Checkbox v-model="setAvatarTagsDialog.contentAdult" @update:modelValue="updateSelectedAvatarTags" />
<span>{{ t('dialog.set_avatar_tags.content_adult') }}</span>
</label>
<label class="inline-flex items-center gap-2">
<Checkbox v-model="setAvatarTagsDialog.contentSex" @update:modelValue="updateSelectedAvatarTags" />
<span>{{ t('dialog.set_avatar_tags.content_sex') }}</span>
</label>
<br />
<el-input
v-model="setAvatarTagsDialog.selectedTagsCsv"
@@ -77,9 +82,9 @@
<span class="extra" v-text="avatarTagStrings.get(avatar.id)"></span>
</div>
<Button size="sm" variant="ghost" style="margin-left: 5px" @click.stop>
<el-checkbox
<Checkbox
:model-value="props.setAvatarTagsDialog.selectedAvatarIds.includes(avatar.id)"
@click="toggleAvatarSelection(avatar.id)"></el-checkbox>
@update:modelValue="(val) => toggleAvatarSelection(avatar.id, val)" />
</Button>
</div>
</div>
@@ -95,6 +100,7 @@
<script setup>
import { Button } from '@/components/ui/button';
import { Checkbox } from '@/components/ui/checkbox';
import { Loading } from '@element-plus/icons-vue';
import { toast } from 'vue-sonner';
import { useI18n } from 'vue-i18n';
@@ -177,12 +183,14 @@
D.selectedTagsCsv = D.selectedTags.join(',').replace(/content_/g, '');
}
function toggleAvatarSelection(avatarId) {
function toggleAvatarSelection(avatarId, checked) {
const D = props.setAvatarTagsDialog;
if (D.selectedAvatarIds.includes(avatarId)) {
removeFromArray(D.selectedAvatarIds, avatarId);
} else {
const isSelected = D.selectedAvatarIds.includes(avatarId);
const shouldSelect = typeof checked === 'boolean' ? checked : !isSelected;
if (shouldSelect && !isSelected) {
D.selectedAvatarIds.push(avatarId);
} else if (!shouldSelect && isSelected) {
removeFromArray(D.selectedAvatarIds, avatarId);
}
}

12
src/components/dialogs/CustomNavDialog.vue
View File

@@ -127,14 +127,15 @@
</div>
<el-scrollbar v-else always class="folder-editor__scroll">
<div v-for="item in folderEditorAvailableItems" :key="item.key" class="folder-editor__option">
<el-checkbox
:model-value="folderEditor.data.items.includes(item.key)"
@change="(val) => toggleFolderItem(item.key, val)">
<span class="folder-editor__option-label">
<label class="folder-editor__option-label">
<Checkbox
:model-value="folderEditor.data.items.includes(item.key)"
@update:modelValue="(val) => toggleFolderItem(item.key, val)" />
<span>
<i :class="item.icon"></i>
{{ t(item.labelKey) }}
</span>
</el-checkbox>
</label>
</div>
</el-scrollbar>
</div>
@@ -206,6 +207,7 @@
import dayjs from 'dayjs';
import { Badge } from '../ui/badge';
import { Checkbox } from '../ui/checkbox';
import { navDefinitions } from '../../shared/constants/ui.js';
import IconPicker from '../IconPicker.vue';

31
src/components/dialogs/GroupDialog/GroupMemberModerationDialog.vue
View File

@@ -120,11 +120,9 @@
<el-table-column width="55" prop="$selected">
<template #default="scope">
<el-button text size="small" @click.stop>
<el-checkbox
<Checkbox
v-model="scope.row.$selected"
@change="
groupMemberModerationTableSelectionChange(scope.row)
"></el-checkbox>
@update:modelValue="groupMemberModerationTableSelectionChange(scope.row)" />
</el-button>
</template>
</el-table-column>
@@ -237,11 +235,9 @@
<el-table-column width="55" prop="$selected">
<template #default="scope">
<el-button text size="small" @click.stop>
<el-checkbox
<Checkbox
v-model="scope.row.$selected"
@change="
groupMemberModerationTableSelectionChange(scope.row)
"></el-checkbox>
@update:modelValue="groupMemberModerationTableSelectionChange(scope.row)" />
</el-button>
</template>
</el-table-column>
@@ -353,11 +349,11 @@
<el-table-column width="55" prop="$selected">
<template #default="scope">
<el-button text size="small" @click.stop>
<el-checkbox
<Checkbox
v-model="scope.row.$selected"
@change="
@update:modelValue="
groupMemberModerationTableSelectionChange(scope.row)
"></el-checkbox>
" />
</el-button>
</template>
</el-table-column>
@@ -435,11 +431,11 @@
<el-table-column width="55" prop="$selected">
<template #default="scope">
<el-button text size="small" @click.stop>
<el-checkbox
<Checkbox
v-model="scope.row.$selected"
@change="
@update:modelValue="
groupMemberModerationTableSelectionChange(scope.row)
"></el-checkbox>
" />
</el-button>
</template>
</el-table-column>
@@ -537,11 +533,11 @@
<el-table-column width="55" prop="$selected">
<template #default="scope">
<el-button text size="small" @click.stop>
<el-checkbox
<Checkbox
v-model="scope.row.$selected"
@change="
@update:modelValue="
groupMemberModerationTableSelectionChange(scope.row)
"></el-checkbox>
" />
</el-button>
</template>
</el-table-column>
@@ -871,6 +867,7 @@
import { groupDialogFilterOptions, groupDialogSortingOptions } from '../../../shared/constants';
import { groupRequest, userRequest } from '../../../api';
import { Badge } from '../../ui/badge';
import { Checkbox } from '../../ui/checkbox';
import GroupMemberModerationExportDialog from './GroupMemberModerationExportDialog.vue';

33
src/components/dialogs/GroupDialog/GroupMemberModerationExportDialog.vue
View File

@@ -6,16 +6,17 @@
width="650px"
append-to-body
@close="setIsGroupLogsExportDialogVisible">
<el-checkbox-group
v-model="checkedGroupLogsExportLogsOptions"
style="margin-bottom: 10px"
@change="updateGroupLogsExportContent">
<template v-for="option in checkGroupsLogsExportLogsOptions" :key="option.label">
<el-checkbox :label="option.label">
{{ t(option.text) }}
</el-checkbox>
</template>
</el-checkbox-group>
<div style="margin-bottom: 10px" class="flex flex-col gap-2">
<label
v-for="option in checkGroupsLogsExportLogsOptions"
:key="option.label"
class="inline-flex items-center gap-2">
<Checkbox
:model-value="checkedGroupLogsExportLogsOptions.includes(option.label)"
@update:modelValue="(val) => toggleGroupLogsExportOption(option.label, val)" />
<span>{{ t(option.text) }}</span>
</label>
</div>
<br />
<el-input
v-model="groupLogsExportContent"
@@ -31,6 +32,7 @@
<script setup>
import { ref, watch } from 'vue';
import { Checkbox } from '@/components/ui/checkbox';
import { useI18n } from 'vue-i18n';
import { copyToClipboard } from '../../../shared/utils';
@@ -75,6 +77,17 @@
'data'
]);
function toggleGroupLogsExportOption(label, checked) {
const selection = checkedGroupLogsExportLogsOptions.value;
const index = selection.indexOf(label);
if (checked && index === -1) {
selection.push(label);
} else if (!checked && index !== -1) {
selection.splice(index, 1);
}
updateGroupLogsExportContent();
}
function updateGroupLogsExportContent() {
const formatter = (str) => (/[\x00-\x1f,"]/.test(str) ? `"${str.replace(/"/g, '""')}"` : str);

11
src/components/dialogs/GroupDialog/GroupPostEditDialog.vue
View File

@@ -20,12 +20,10 @@
resize="none"></el-input>
</el-form-item>
<el-form-item>
<el-checkbox
v-if="!groupPostEditDialog.postId"
v-model="groupPostEditDialog.sendNotification"
size="small">
{{ t('dialog.group_post_edit.send_notification') }}
</el-checkbox>
<label v-if="!groupPostEditDialog.postId" class="inline-flex items-center gap-2">
<Checkbox v-model="groupPostEditDialog.sendNotification" />
<span>{{ t('dialog.group_post_edit.send_notification') }}</span>
</label>
</el-form-item>
<el-form-item :label="t('dialog.group_post_edit.post_visibility')">
<RadioGroup v-model="groupPostEditDialog.visibility" class="flex items-center gap-4">
@@ -113,6 +111,7 @@
<script setup>
import { computed, ref } from 'vue';
import { Button } from '@/components/ui/button';
import { Checkbox } from '@/components/ui/checkbox';
import { toast } from 'vue-sonner';
import { useI18n } from 'vue-i18n';

9
src/components/dialogs/NewInstanceDialog.vue
View File

@@ -102,17 +102,17 @@
<el-form-item
v-if="newInstanceDialog.accessType === 'group'"
:label="t('dialog.new_instance.queueEnabled')">
<el-checkbox v-model="newInstanceDialog.queueEnabled" @change="buildInstance"></el-checkbox>
<Checkbox v-model="newInstanceDialog.queueEnabled" @update:modelValue="buildInstance" />
</el-form-item>
<el-form-item
v-if="newInstanceDialog.accessType === 'group'"
:label="t('dialog.new_instance.ageGate')">
<el-checkbox
<Checkbox
v-model="newInstanceDialog.ageGate"
:disabled="
!hasGroupPermission(newInstanceDialog.groupRef, 'group-instance-age-gated-create')
"
@change="buildInstance"></el-checkbox>
@update:modelValue="buildInstance" />
</el-form-item>
<el-form-item :label="t('dialog.new_instance.display_name')">
<el-input
@@ -272,7 +272,7 @@
<el-form-item
v-if="newInstanceDialog.accessType === 'group'"
:label="t('dialog.new_instance.ageGate')">
<el-checkbox v-model="newInstanceDialog.ageGate" @change="buildInstance"></el-checkbox>
<Checkbox v-model="newInstanceDialog.ageGate" @update:modelValue="buildInstance" />
</el-form-item>
<el-form-item :label="t('dialog.new_instance.world_id')">
<el-input
@@ -443,6 +443,7 @@
<script setup>
import { computed, nextTick, ref, watch } from 'vue';
import { Button } from '@/components/ui/button';
import { Checkbox } from '@/components/ui/checkbox';
import { Check as CheckIcon } from 'lucide-vue-next';
import { storeToRefs } from 'pinia';
import { toast } from 'vue-sonner';

7
src/components/dialogs/UserDialog/UserDialog.vue
View File

@@ -737,9 +737,9 @@
transform-origin: left center;
"
@click.stop>
<el-checkbox
:checked="userDialogGroupEditSelectedGroupIds.includes(group.id)"
@change="() => toggleGroupSelection(group.id)" />
<Checkbox
:model-value="userDialogGroupEditSelectedGroupIds.includes(group.id)"
@update:modelValue="() => toggleGroupSelection(group.id)" />
</div>
<div style="margin-right: 3px; margin-left: 5px" @click.stop>
@@ -1306,6 +1306,7 @@
} from '@/components/ui/dropdown-menu';
import { Download, LogOut, RefreshCcw } from 'lucide-vue-next';
import { Button } from '@/components/ui/button';
import { Checkbox } from '@/components/ui/checkbox';
import { ElMessageBox } from 'element-plus';
import { Spinner } from '@/components/ui/spinner';
import { storeToRefs } from 'pinia';

24
src/components/dialogs/UserDialog/UserSummaryHeader.vue
View File

@@ -220,18 +220,19 @@
</span>
<template v-if="userDialog.id === currentUser.id">
<br />
<el-checkbox
v-model="badge.hidden"
style="margin-top: 5px"
@change="toggleBadgeVisibility(badge)">
{{ t('dialog.user.badges.hidden') }}
</el-checkbox>
<label class="inline-flex items-center gap-2" style="margin-top: 5px">
<Checkbox
v-model="badge.hidden"
@update:modelValue="toggleBadgeVisibility(badge)" />
<span>{{ t('dialog.user.badges.hidden') }}</span>
</label>
<br />
<el-checkbox
v-model="badge.showcased"
@change="toggleBadgeShowcased(badge)">
{{ t('dialog.user.badges.showcased') }}
</el-checkbox>
<label class="inline-flex items-center gap-2">
<Checkbox
v-model="badge.showcased"
@update:modelValue="toggleBadgeShowcased(badge)" />
<span>{{ t('dialog.user.badges.showcased') }}</span>
</label>
</template>
</div>
</PopoverContent>
@@ -267,6 +268,7 @@
import { Popover, PopoverContent, PopoverTrigger } from '../../ui/popover';
import { useGalleryStore, useUserStore } from '../../../stores';
import { Badge } from '../../ui/badge';
import { Checkbox } from '../../ui/checkbox';
import UserActionDropdown from './UserActionDropdown.vue';

106
src/components/dialogs/WorldDialog/SetWorldTagsDialog.vue
View File

@@ -5,17 +5,20 @@
width="400px"
destroy-on-close
append-to-body>
<el-checkbox v-model="setWorldTagsDialog.avatarScalingDisabled">
{{ t('dialog.set_world_tags.avatar_scaling_disabled') }}
</el-checkbox>
<label class="inline-flex items-center gap-2">
<Checkbox v-model="setWorldTagsDialog.avatarScalingDisabled" />
<span>{{ t('dialog.set_world_tags.avatar_scaling_disabled') }}</span>
</label>
<br />
<el-checkbox v-model="setWorldTagsDialog.focusViewDisabled">
{{ t('dialog.set_world_tags.focus_view_disabled') }}
</el-checkbox>
<label class="inline-flex items-center gap-2">
<Checkbox v-model="setWorldTagsDialog.focusViewDisabled" />
<span>{{ t('dialog.set_world_tags.focus_view_disabled') }}</span>
</label>
<br />
<el-checkbox v-model="setWorldTagsDialog.debugAllowed">
{{ t('dialog.set_world_tags.enable_debugging') }}
</el-checkbox>
<label class="inline-flex items-center gap-2">
<Checkbox v-model="setWorldTagsDialog.debugAllowed" />
<span>{{ t('dialog.set_world_tags.enable_debugging') }}</span>
</label>
<div style="font-size: 12px; margin-top: 10px">{{ t('dialog.set_world_tags.author_tags') }}<br /></div>
<el-input
v-model="setWorldTagsDialog.authorTags"
@@ -26,55 +29,67 @@
placeholder=""
style="margin-top: 10px"></el-input>
<div style="font-size: 12px; margin-top: 10px">{{ t('dialog.set_world_tags.content_tags') }}<br /></div>
<el-checkbox v-model="setWorldTagsDialog.contentHorror">
{{ t('dialog.set_world_tags.content_horror') }}
</el-checkbox>
<label class="inline-flex items-center gap-2">
<Checkbox v-model="setWorldTagsDialog.contentHorror" />
<span>{{ t('dialog.set_world_tags.content_horror') }}</span>
</label>
<br />
<el-checkbox v-model="setWorldTagsDialog.contentGore">
{{ t('dialog.set_world_tags.content_gore') }}
</el-checkbox>
<label class="inline-flex items-center gap-2">
<Checkbox v-model="setWorldTagsDialog.contentGore" />
<span>{{ t('dialog.set_world_tags.content_gore') }}</span>
</label>
<br />
<el-checkbox v-model="setWorldTagsDialog.contentViolence">
{{ t('dialog.set_world_tags.content_violence') }}
</el-checkbox>
<label class="inline-flex items-center gap-2">
<Checkbox v-model="setWorldTagsDialog.contentViolence" />
<span>{{ t('dialog.set_world_tags.content_violence') }}</span>
</label>
<br />
<el-checkbox v-model="setWorldTagsDialog.contentAdult">
{{ t('dialog.set_world_tags.content_adult') }}
</el-checkbox>
<label class="inline-flex items-center gap-2">
<Checkbox v-model="setWorldTagsDialog.contentAdult" />
<span>{{ t('dialog.set_world_tags.content_adult') }}</span>
</label>
<br />
<el-checkbox v-model="setWorldTagsDialog.contentSex">
{{ t('dialog.set_world_tags.content_sex') }}
</el-checkbox>
<label class="inline-flex items-center gap-2">
<Checkbox v-model="setWorldTagsDialog.contentSex" />
<span>{{ t('dialog.set_world_tags.content_sex') }}</span>
</label>
<div style="font-size: 12px; margin-top: 10px">
{{ t('dialog.set_world_tags.default_content_settings') }}<br />
</div>
<el-checkbox v-model="setWorldTagsDialog.emoji">
{{ t('dialog.new_instance.content_emoji') }}
</el-checkbox>
<label class="inline-flex items-center gap-2">
<Checkbox v-model="setWorldTagsDialog.emoji" />
<span>{{ t('dialog.new_instance.content_emoji') }}</span>
</label>
<br />
<el-checkbox v-model="setWorldTagsDialog.stickers">
{{ t('dialog.new_instance.content_stickers') }}
</el-checkbox>
<label class="inline-flex items-center gap-2">
<Checkbox v-model="setWorldTagsDialog.stickers" />
<span>{{ t('dialog.new_instance.content_stickers') }}</span>
</label>
<br />
<el-checkbox v-model="setWorldTagsDialog.pedestals">
{{ t('dialog.new_instance.content_pedestals') }}
</el-checkbox>
<label class="inline-flex items-center gap-2">
<Checkbox v-model="setWorldTagsDialog.pedestals" />
<span>{{ t('dialog.new_instance.content_pedestals') }}</span>
</label>
<br />
<el-checkbox v-model="setWorldTagsDialog.prints">
{{ t('dialog.new_instance.content_prints') }}
</el-checkbox>
<label class="inline-flex items-center gap-2">
<Checkbox v-model="setWorldTagsDialog.prints" />
<span>{{ t('dialog.new_instance.content_prints') }}</span>
</label>
<br />
<el-checkbox v-model="setWorldTagsDialog.drones">
{{ t('dialog.new_instance.content_drones') }}
</el-checkbox>
<label class="inline-flex items-center gap-2">
<Checkbox v-model="setWorldTagsDialog.drones" />
<span>{{ t('dialog.new_instance.content_drones') }}</span>
</label>
<br />
<el-checkbox v-model="setWorldTagsDialog.props">
{{ t('dialog.new_instance.content_items') }}
</el-checkbox>
<label class="inline-flex items-center gap-2">
<Checkbox v-model="setWorldTagsDialog.props" />
<span>{{ t('dialog.new_instance.content_items') }}</span>
</label>
<br />
<el-checkbox v-model="setWorldTagsDialog.thirdPerson">
{{ t('dialog.new_instance.content_third_person') }}
</el-checkbox>
<label class="inline-flex items-center gap-2">
<Checkbox v-model="setWorldTagsDialog.thirdPerson" />
<span>{{ t('dialog.new_instance.content_third_person') }}</span>
</label>
<template #footer>
<div style="display: flex">
<Button variant="secondary" @click="isVisible = false">
@@ -91,6 +106,7 @@
<script setup>
import { computed, ref, watch } from 'vue';
import { Button } from '@/components/ui/button';
import { Checkbox } from '@/components/ui/checkbox';
import { toast } from 'vue-sonner';
import { useI18n } from 'vue-i18n';

45
src/components/ui/checkbox/Checkbox.vue Normal file
View File

@@ -0,0 +1,45 @@
<script setup>
import { CheckboxIndicator, CheckboxRoot, useForwardPropsEmits } from 'reka-ui';
import { Check } from 'lucide-vue-next';
import { cn } from '@/lib/utils';
import { reactiveOmit } from '@vueuse/core';
const props = defineProps({
defaultValue: { type: [Boolean, String], required: false },
modelValue: { type: [Boolean, String, null], required: false },
disabled: { type: Boolean, required: false },
value: { type: null, required: false },
id: { type: String, required: false },
asChild: { type: Boolean, required: false },
as: { type: null, required: false },
name: { type: String, required: false },
required: { type: Boolean, required: false },
class: { type: null, required: false }
});
const emits = defineEmits(['update:modelValue']);
const delegatedProps = reactiveOmit(props, 'class');
const forwarded = useForwardPropsEmits(delegatedProps, emits);
</script>
<template>
<CheckboxRoot
v-slot="slotProps"
data-slot="checkbox"
v-bind="forwarded"
:class="
cn(
'peer border-input data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground data-[state=checked]:border-primary focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive size-4 shrink-0 rounded-[4px] border shadow-xs transition-shadow outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50',
props.class
)
">
<CheckboxIndicator
data-slot="checkbox-indicator"
class="grid place-content-center text-current transition-none">
<slot v-bind="slotProps">
<Check class="size-3.5" />
</slot>
</CheckboxIndicator>
</CheckboxRoot>
</template>

1
src/components/ui/checkbox/index.js Normal file
View File

@@ -0,0 +1 @@
export { default as Checkbox } from './Checkbox.vue';