MrUnknownDE/VRCX
1
0
Fork 0
mirror of https://github.com/MrUnknownDE/VRCX.git synced 2026-05-05 22:36:05 +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
src/app.css
+2 -2
View File
@@ -1012,7 +1012,7 @@ hr.x-vertical-divider {
display: flex;
align-items: center;
padding: 6px;
font-size: 12px;
font-size: 13px;
cursor: pointer;
}
@@ -1151,7 +1151,7 @@ img.friends-list-avatar {
.x-friend-item > .detail > .extra,
.extra {
color: var(--el-text-color-secondary);
font-size: 11px;
font-size: 12px;
& > span > span:first-child {
scale: 0.9;
margin-right: 2px;
src/components/dialogs/AvatarDialog/SetAvatarTagsDialog.vue
+29 -21
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);
}
}
src/components/dialogs/CustomNavDialog.vue
+7 -5
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';
src/components/dialogs/GroupDialog/GroupMemberModerationDialog.vue
+14 -17
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';
src/components/dialogs/GroupDialog/GroupMemberModerationExportDialog.vue
+23 -10
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);
src/components/dialogs/GroupDialog/GroupPostEditDialog.vue
+5 -6
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';
src/components/dialogs/NewInstanceDialog.vue
+5 -4
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';
src/components/dialogs/UserDialog/UserDialog.vue
+4 -3
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';
src/components/dialogs/UserDialog/UserSummaryHeader.vue
+13 -11
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';
src/components/dialogs/WorldDialog/SetWorldTagsDialog.vue
+61 -45
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';
src/components/ui/checkbox/Checkbox.vue
+45
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>
src/components/ui/checkbox/index.js
+1
View File
@@ -0,0 +1 @@
export { default as Checkbox } from './Checkbox.vue';
src/views/Favorites/FavoritesAvatar.vue
+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;
}
src/views/Favorites/FavoritesFriend.vue
+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;
}
src/views/Favorites/FavoritesWorld.vue
+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;
}
src/views/Favorites/components/FavoritesAvatarItem.vue
+2 -1
View File
@@ -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';
src/views/Favorites/components/FavoritesFriendItem.vue
+2 -1
View File
@@ -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';
src/views/Favorites/components/FavoritesWorldItem.vue
+2 -1
View File
@@ -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';
src/views/Favorites/dialogs/AvatarExportDialog.vue
+20 -8
View File
@@ -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;
src/views/Favorites/dialogs/WorldExportDialog.vue
+20 -8
View File
@@ -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;
src/views/FriendList/FriendList.vue
+15 -7
View File
@@ -56,11 +56,11 @@
@row-click="selectFriendsListRow">
<el-table-column v-if="friendsListBulkUnfriendMode" width="55">
<template #default="{ row }">
<el-button text size="small" @click.stop>
<el-checkbox
<div class="flex items-center justify-center" @click.stop>
<Checkbox
:model-value="selectedFriends.has(row.id)"
@change="toggleFriendSelection(row.id)"></el-checkbox>
</el-button>
@update:modelValue="toggleFriendSelection(row.id)" />
</div>
</template>
</el-table-column>
<el-table-column width="20"></el-table-column>
@@ -93,7 +93,11 @@
}}</span>
</template>
</el-table-column>
<el-table-column :label="t('table.friendList.rank')" width="140" prop="$trustSortNum" :sortable="'custom'">
<el-table-column
:label="t('table.friendList.rank')"
width="140"
prop="$trustSortNum"
:sortable="'custom'">
<template #default="{ row }">
<span
v-if="randomUserColours"
@@ -275,6 +279,7 @@
} from '../../shared/utils';
import { useAppearanceSettingsStore, useFriendStore, useSearchStore, useUserStore } from '../../stores';
import { friendRequest, userRequest } from '../../api';
import { Checkbox } from '../../components/ui/checkbox';
import { Switch } from '../../components/ui/switch';
import removeConfusables, { removeWhitespace } from '../../service/confusables';
import { router } from '../../plugin/router';
@@ -373,7 +378,10 @@
allFilteredData.value = results;
getAllUserStats();
getAllUserMutualCount();
applySortAndPagination(friendsListTable.tableProps.defaultSort.prop, friendsListTable.tableProps.defaultSort.order);
applySortAndPagination(
friendsListTable.tableProps.defaultSort.prop,
friendsListTable.tableProps.defaultSort.order
);
nextTick(() => {
friendsListLoading.value = false;
});
@@ -482,7 +490,7 @@
else showUserDialog(val.id);
}
function compareWithFriendNumber(a, b, primaryComparison, primarySelector = (x) => x) {
function compareWithFriendNumber(a, b, primaryComparison, primarySelector = (x) => x) {
const primaryComparisonResult = primaryComparison(primarySelector(a), primarySelector(b));
if (primaryComparisonResult === 0) {
return (a.$friendNumber || 0) - (b.$friendNumber || 0);
src/views/Login/Login.vue
+12 -10
View File
@@ -45,15 +45,14 @@
clearable
show-password></el-input>
</el-form-item>
<el-checkbox v-model="loginForm.saveCredentials">{{
t('view.login.field.saveCredentials')
}}</el-checkbox>
<el-checkbox
v-model="enableCustomEndpoint"
style="margin-top: 10px"
@change="toggleCustomEndpoint"
>{{ t('view.login.field.devEndpoint') }}</el-checkbox
>
<label class="inline-flex items-center gap-2 mr-2">
<Checkbox v-model="loginForm.saveCredentials" />
<span>{{ t('view.login.field.saveCredentials') }}</span>
</label>
<label class="inline-flex items-center gap-2" style="margin-top: 10px">
<Checkbox v-model="enableCustomEndpoint" @update:modelValue="toggleCustomEndpoint" />
<span>{{ t('view.login.field.devEndpoint') }}</span>
</label>
<el-form-item
v-if="enableCustomEndpoint"
:label="t('view.login.field.endpoint')"
@@ -77,7 +76,9 @@
clearable></el-input>
</el-form-item>
<el-form-item>
<Button type="submit" size="lg" style="width: 100%">{{ t('view.login.login') }}</Button>
<Button class="mt-2" type="submit" size="lg" style="width: 100%">{{
t('view.login.login')
}}</Button>
</el-form-item>
</el-form>
<Button
@@ -150,6 +151,7 @@
import { CircleArrowDown, Route } from 'lucide-vue-next';
import { useRoute, useRouter } from 'vue-router';
import { Button } from '@/components/ui/button';
import { Checkbox } from '@/components/ui/checkbox';
import { storeToRefs } from 'pinia';
import { useI18n } from 'vue-i18n';
src/views/Search/Search.vue
+13 -9
View File
@@ -16,12 +16,14 @@
</div>
<el-tabs ref="searchTabRef" style="margin-top: 15px" @tab-click="searchText = ''">
<el-tab-pane v-loading="isSearchUserLoading" :label="t('view.search.user.header')" style="min-height: 60px">
<el-checkbox v-model="searchUserByBio" style="margin-left: 10px">{{
t('view.search.user.search_by_bio')
}}</el-checkbox>
<el-checkbox v-model="searchUserSortByLastLoggedIn" style="margin-left: 10px">{{
t('view.search.user.sort_by_last_logged_in')
}}</el-checkbox>
<label class="inline-flex items-center gap-2" style="margin-left: 10px">
<Checkbox v-model="searchUserByBio" />
<span>{{ t('view.search.user.search_by_bio') }}</span>
</label>
<label class="inline-flex items-center gap-2" style="margin-left: 10px">
<Checkbox v-model="searchUserSortByLastLoggedIn" />
<span>{{ t('view.search.user.sort_by_last_logged_in') }}</span>
</label>
<div class="x-friend-list" style="min-height: 500px">
<div
v-for="user in searchUserResults"
@@ -87,9 +89,10 @@
</SelectGroup>
</SelectContent>
</Select>
<el-checkbox v-model="searchWorldLabs" style="margin-left: 10px">{{
t('view.search.world.community_lab')
}}</el-checkbox>
<label class="inline-flex items-center gap-2" style="margin-left: 10px">
<Checkbox v-model="searchWorldLabs" />
<span>{{ t('view.search.world.community_lab') }}</span>
</label>
<div class="x-friend-list" style="min-height: 500px">
<div
v-for="world in searchWorldResults"
@@ -339,6 +342,7 @@
import { RadioGroup, RadioGroupItem } from '@/components/ui/radio-group';
import { Button } from '@/components/ui/button';
import { ButtonGroup } from '@/components/ui/button-group';
import { Checkbox } from '@/components/ui/checkbox';
import { Trash2 } from 'lucide-vue-next';
import { ref } from 'vue';
import { storeToRefs } from 'pinia';
src/views/Settings/dialogs/VRChatConfigDialog.vue
+11 -12
View File
@@ -133,18 +133,16 @@
</div>
<br />
<el-checkbox
v-model="VRChatConfigFile.picture_output_split_by_date"
@change="refreshDialogValues"
style="margin-top: 5px; display: block">
{{ t('dialog.config_json.picture_sort_by_date') }}
</el-checkbox>
<el-checkbox
v-model="VRChatConfigFile.disableRichPresence"
@change="refreshDialogValues"
style="margin-top: 5px; display: block">
{{ t('dialog.config_json.disable_discord_presence') }}
</el-checkbox>
<label class="inline-flex items-center gap-2" style="margin-top: 5px; display: block">
<Checkbox
v-model="VRChatConfigFile.picture_output_split_by_date"
@update:modelValue="refreshDialogValues" />
<span>{{ t('dialog.config_json.picture_sort_by_date') }}</span>
</label>
<label class="inline-flex items-center gap-2" style="margin-top: 5px; display: block">
<Checkbox v-model="VRChatConfigFile.disableRichPresence" @update:modelValue="refreshDialogValues" />
<span>{{ t('dialog.config_json.disable_discord_presence') }}</span>
</label>
</div>
<template #footer>
<div style="display: flex; align-items: center; justify-content: space-between">
@@ -172,6 +170,7 @@
import { Select, SelectContent, SelectGroup, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
import { computed, ref, watch } from 'vue';
import { Button } from '@/components/ui/button';
import { Checkbox } from '@/components/ui/checkbox';
import { ElMessageBox } from 'element-plus';
import { Refresh } from '@element-plus/icons-vue';
import { storeToRefs } from 'pinia';
src/views/Tools/Gallery.vue
+10 -6
View File
@@ -212,9 +212,10 @@
</div>
</template>
</VirtualCombobox>
<el-checkbox v-model="emojiAnimType">
<label class="inline-flex items-center gap-2">
<Checkbox v-model="emojiAnimType" />
<span>{{ t('dialog.gallery_icons.emoji_animation_type') }}</span>
</el-checkbox>
</label>
<template v-if="emojiAnimType">
<el-button
type="default"
@@ -240,9 +241,10 @@
:min="2"
:max="64"
style="margin-right: 10px; width: 112px"></el-input-number>
<el-checkbox v-model="emojiAnimLoopPingPong" style="margin-left: 10px; margin-right: 10px">
<label class="inline-flex items-center gap-2" style="margin-left: 10px; margin-right: 10px">
<Checkbox v-model="emojiAnimLoopPingPong" />
<span>{{ t('dialog.gallery_icons.emoji_loop_pingpong') }}</span>
</el-checkbox>
</label>
<br />
<br />
<span>{{ t('dialog.gallery_icons.flipbook_info') }}</span>
@@ -408,9 +410,10 @@
maxlength="32"
style="margin-left: 10px; width: 300px"
:placeholder="t('dialog.gallery_icons.note')"></el-input>
<el-checkbox v-model="printCropBorder" style="margin-left: 10px; margin-right: 10px">
<label class="inline-flex items-center gap-2" style="margin-left: 10px; margin-right: 10px">
<Checkbox v-model="printCropBorder" />
<span>{{ t('dialog.gallery_icons.crop_print_border') }}</span>
</el-checkbox>
</label>
</div>
<br />
<div
@@ -534,6 +537,7 @@
import { computed, onBeforeUnmount, onMounted, ref } from 'vue';
import { Button } from '@/components/ui/button';
import { ButtonGroup } from '@/components/ui/button-group';
import { Checkbox } from '@/components/ui/checkbox';
import { ElMessageBox } from 'element-plus';
import { VirtualCombobox } from '@/components/ui/virtual-combobox';
import { storeToRefs } from 'pinia';