replace el-checkbox with Checkbox component

package-lock.json

@@ -15813,13 +15813,34 @@
                 "truncate-utf8-bytes": "^1.0.0"
             }
         },
+        "node_modules/sass": {
+            "version": "1.97.2",
+            "resolved": "https://registry.npmjs.org/sass/-/sass-1.97.2.tgz",
+            "integrity": "sha512-y5LWb0IlbO4e97Zr7c3mlpabcbBtS+ieiZ9iwDooShpFKWXf62zz5pEPdwrLYm+Bxn1fnbwFGzHuCLSA9tBmrw==",
+            "dev": true,
+            "license": "MIT",
+            "optional": true,
+            "dependencies": {
+                "chokidar": "^4.0.0",
+                "immutable": "^5.0.2",
+                "source-map-js": ">=0.6.2 <2.0.0"
+            },
+            "bin": {
+                "sass": "sass.js"
+            },
+            "engines": {
+                "node": ">=14.0.0"
+            },
+            "optionalDependencies": {
+                "@parcel/watcher": "^2.4.1"
+            }
+        },
         "node_modules/sass-embedded": {
             "version": "1.97.2",
             "resolved": "https://registry.npmjs.org/sass-embedded/-/sass-embedded-1.97.2.tgz",
             "integrity": "sha512-lKJcskySwAtJ4QRirKrikrWMFa2niAuaGenY2ElHjd55IwHUiur5IdKu6R1hEmGYMs4Qm+6rlRW0RvuAkmcryg==",
             "dev": true,
             "license": "MIT",
-            "peer": true,
             "dependencies": {
                 "@bufbuild/protobuf": "^2.5.0",
                 "buffer-builder": "^0.2.0",

src/app.css

@@ -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

@@ -8,21 +8,26 @@
         width="780px"
         append-to-body>
         <template v-if="setAvatarTagsDialog.visible">
-            <el-checkbox v-model="setAvatarTagsDialog.contentHorror" @change="updateSelectedAvatarTags">{{
+            <label class="inline-flex items-center gap-2">
-                t('dialog.set_avatar_tags.content_horror')
+                <Checkbox v-model="setAvatarTagsDialog.contentHorror" @update:modelValue="updateSelectedAvatarTags" />
-            }}</el-checkbox>
+                <span>{{ t('dialog.set_avatar_tags.content_horror') }}</span>
-            <el-checkbox v-model="setAvatarTagsDialog.contentGore" @change="updateSelectedAvatarTags">{{
+            </label>
-                t('dialog.set_avatar_tags.content_gore')
+            <label class="inline-flex items-center gap-2">
-            }}</el-checkbox>
+                <Checkbox v-model="setAvatarTagsDialog.contentGore" @update:modelValue="updateSelectedAvatarTags" />
-            <el-checkbox v-model="setAvatarTagsDialog.contentViolence" @change="updateSelectedAvatarTags">{{
+                <span>{{ t('dialog.set_avatar_tags.content_gore') }}</span>
-                t('dialog.set_avatar_tags.content_violence')
+            </label>
-            }}</el-checkbox>
+            <label class="inline-flex items-center gap-2">
-            <el-checkbox v-model="setAvatarTagsDialog.contentAdult" @change="updateSelectedAvatarTags">{{
+                <Checkbox v-model="setAvatarTagsDialog.contentViolence" @update:modelValue="updateSelectedAvatarTags" />
-                t('dialog.set_avatar_tags.content_adult')
+                <span>{{ t('dialog.set_avatar_tags.content_violence') }}</span>
-            }}</el-checkbox>
+            </label>
-            <el-checkbox v-model="setAvatarTagsDialog.contentSex" @change="updateSelectedAvatarTags">{{
+            <label class="inline-flex items-center gap-2">
-                t('dialog.set_avatar_tags.content_sex')
+                <Checkbox v-model="setAvatarTagsDialog.contentAdult" @update:modelValue="updateSelectedAvatarTags" />
-            }}</el-checkbox>
+                <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)) {
+        const isSelected = D.selectedAvatarIds.includes(avatarId);
-            removeFromArray(D.selectedAvatarIds, avatarId);
+        const shouldSelect = typeof checked === 'boolean' ? checked : !isSelected;
-        } else {
+        if (shouldSelect && !isSelected) {
             D.selectedAvatarIds.push(avatarId);
+        } else if (!shouldSelect && isSelected) {
+            removeFromArray(D.selectedAvatarIds, avatarId);
         }
     }
 

src/components/dialogs/CustomNavDialog.vue

@@ -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
+                            <label class="folder-editor__option-label">
+                                <Checkbox
                                     :model-value="folderEditor.data.items.includes(item.key)"
-                                @change="(val) => toggleFolderItem(item.key, val)">
+                                    @update:modelValue="(val) => toggleFolderItem(item.key, val)" />
-                                <span class="folder-editor__option-label">
+                                <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

@@ -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="
+                                            @update:modelValue="groupMemberModerationTableSelectionChange(scope.row)" />
-                                                groupMemberModerationTableSelectionChange(scope.row)
-                                            "></el-checkbox>
                                     </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="
+                                            @update:modelValue="groupMemberModerationTableSelectionChange(scope.row)" />
-                                                groupMemberModerationTableSelectionChange(scope.row)
-                                            "></el-checkbox>
                                     </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

@@ -6,16 +6,17 @@
         width="650px"
         append-to-body
         @close="setIsGroupLogsExportDialogVisible">
-        <el-checkbox-group
+        <div style="margin-bottom: 10px" class="flex flex-col gap-2">
-            v-model="checkedGroupLogsExportLogsOptions"
+            <label
-            style="margin-bottom: 10px"
+                v-for="option in checkGroupsLogsExportLogsOptions"
-            @change="updateGroupLogsExportContent">
+                :key="option.label"
-            <template v-for="option in checkGroupsLogsExportLogsOptions" :key="option.label">
+                class="inline-flex items-center gap-2">
-                <el-checkbox :label="option.label">
+                <Checkbox
-                    {{ t(option.text) }}
+                    :model-value="checkedGroupLogsExportLogsOptions.includes(option.label)"
-                </el-checkbox>
+                    @update:modelValue="(val) => toggleGroupLogsExportOption(option.label, val)" />
-            </template>
+                <span>{{ t(option.text) }}</span>
-        </el-checkbox-group>
+            </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

@@ -20,12 +20,10 @@
                         resize="none"></el-input>
                 </el-form-item>
                 <el-form-item>
-                    <el-checkbox
+                    <label v-if="!groupPostEditDialog.postId" class="inline-flex items-center gap-2">
-                        v-if="!groupPostEditDialog.postId"
+                        <Checkbox v-model="groupPostEditDialog.sendNotification" />
-                        v-model="groupPostEditDialog.sendNotification"
+                        <span>{{ t('dialog.group_post_edit.send_notification') }}</span>
-                        size="small">
+                    </label>
-                        {{ t('dialog.group_post_edit.send_notification') }}
-                    </el-checkbox>
                 </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

@@ -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

@@ -737,9 +737,9 @@
                                             transform-origin: left center;
                                         "
                                         @click.stop>
-                                        <el-checkbox
+                                        <Checkbox
-                                            :checked="userDialogGroupEditSelectedGroupIds.includes(group.id)"
+                                            :model-value="userDialogGroupEditSelectedGroupIds.includes(group.id)"
-                                            @change="() => toggleGroupSelection(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

@@ -220,18 +220,19 @@
                                         </span>
                                         <template v-if="userDialog.id === currentUser.id">
                                             <br />
-                                            <el-checkbox
+                                            <label class="inline-flex items-center gap-2" style="margin-top: 5px">
+                                                <Checkbox
                                                     v-model="badge.hidden"
-                                                style="margin-top: 5px"
+                                                    @update:modelValue="toggleBadgeVisibility(badge)" />
-                                                @change="toggleBadgeVisibility(badge)">
+                                                <span>{{ t('dialog.user.badges.hidden') }}</span>
-                                                {{ t('dialog.user.badges.hidden') }}
+                                            </label>
-                                            </el-checkbox>
                                             <br />
-                                            <el-checkbox
+                                            <label class="inline-flex items-center gap-2">
+                                                <Checkbox
                                                     v-model="badge.showcased"
-                                                @change="toggleBadgeShowcased(badge)">
+                                                    @update:modelValue="toggleBadgeShowcased(badge)" />
-                                                {{ t('dialog.user.badges.showcased') }}
+                                                <span>{{ t('dialog.user.badges.showcased') }}</span>
-                                            </el-checkbox>
+                                            </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

@@ -5,17 +5,20 @@
         width="400px"
         destroy-on-close
         append-to-body>
-        <el-checkbox v-model="setWorldTagsDialog.avatarScalingDisabled">
+        <label class="inline-flex items-center gap-2">
-            {{ t('dialog.set_world_tags.avatar_scaling_disabled') }}
+            <Checkbox v-model="setWorldTagsDialog.avatarScalingDisabled" />
-        </el-checkbox>
+            <span>{{ t('dialog.set_world_tags.avatar_scaling_disabled') }}</span>
+        </label>
         <br />
-        <el-checkbox v-model="setWorldTagsDialog.focusViewDisabled">
+        <label class="inline-flex items-center gap-2">
-            {{ t('dialog.set_world_tags.focus_view_disabled') }}
+            <Checkbox v-model="setWorldTagsDialog.focusViewDisabled" />
-        </el-checkbox>
+            <span>{{ t('dialog.set_world_tags.focus_view_disabled') }}</span>
+        </label>
         <br />
-        <el-checkbox v-model="setWorldTagsDialog.debugAllowed">
+        <label class="inline-flex items-center gap-2">
-            {{ t('dialog.set_world_tags.enable_debugging') }}
+            <Checkbox v-model="setWorldTagsDialog.debugAllowed" />
-        </el-checkbox>
+            <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">
+        <label class="inline-flex items-center gap-2">
-            {{ t('dialog.set_world_tags.content_horror') }}
+            <Checkbox v-model="setWorldTagsDialog.contentHorror" />
-        </el-checkbox>
+            <span>{{ t('dialog.set_world_tags.content_horror') }}</span>
+        </label>
         <br />
-        <el-checkbox v-model="setWorldTagsDialog.contentGore">
+        <label class="inline-flex items-center gap-2">
-            {{ t('dialog.set_world_tags.content_gore') }}
+            <Checkbox v-model="setWorldTagsDialog.contentGore" />
-        </el-checkbox>
+            <span>{{ t('dialog.set_world_tags.content_gore') }}</span>
+        </label>
         <br />
-        <el-checkbox v-model="setWorldTagsDialog.contentViolence">
+        <label class="inline-flex items-center gap-2">
-            {{ t('dialog.set_world_tags.content_violence') }}
+            <Checkbox v-model="setWorldTagsDialog.contentViolence" />
-        </el-checkbox>
+            <span>{{ t('dialog.set_world_tags.content_violence') }}</span>
+        </label>
         <br />
-        <el-checkbox v-model="setWorldTagsDialog.contentAdult">
+        <label class="inline-flex items-center gap-2">
-            {{ t('dialog.set_world_tags.content_adult') }}
+            <Checkbox v-model="setWorldTagsDialog.contentAdult" />
-        </el-checkbox>
+            <span>{{ t('dialog.set_world_tags.content_adult') }}</span>
+        </label>
         <br />
-        <el-checkbox v-model="setWorldTagsDialog.contentSex">
+        <label class="inline-flex items-center gap-2">
-            {{ t('dialog.set_world_tags.content_sex') }}
+            <Checkbox v-model="setWorldTagsDialog.contentSex" />
-        </el-checkbox>
+            <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">
+        <label class="inline-flex items-center gap-2">
-            {{ t('dialog.new_instance.content_emoji') }}
+            <Checkbox v-model="setWorldTagsDialog.emoji" />
-        </el-checkbox>
+            <span>{{ t('dialog.new_instance.content_emoji') }}</span>
+        </label>
         <br />
-        <el-checkbox v-model="setWorldTagsDialog.stickers">
+        <label class="inline-flex items-center gap-2">
-            {{ t('dialog.new_instance.content_stickers') }}
+            <Checkbox v-model="setWorldTagsDialog.stickers" />
-        </el-checkbox>
+            <span>{{ t('dialog.new_instance.content_stickers') }}</span>
+        </label>
         <br />
-        <el-checkbox v-model="setWorldTagsDialog.pedestals">
+        <label class="inline-flex items-center gap-2">
-            {{ t('dialog.new_instance.content_pedestals') }}
+            <Checkbox v-model="setWorldTagsDialog.pedestals" />
-        </el-checkbox>
+            <span>{{ t('dialog.new_instance.content_pedestals') }}</span>
+        </label>
         <br />
-        <el-checkbox v-model="setWorldTagsDialog.prints">
+        <label class="inline-flex items-center gap-2">
-            {{ t('dialog.new_instance.content_prints') }}
+            <Checkbox v-model="setWorldTagsDialog.prints" />
-        </el-checkbox>
+            <span>{{ t('dialog.new_instance.content_prints') }}</span>
+        </label>
         <br />
-        <el-checkbox v-model="setWorldTagsDialog.drones">
+        <label class="inline-flex items-center gap-2">
-            {{ t('dialog.new_instance.content_drones') }}
+            <Checkbox v-model="setWorldTagsDialog.drones" />
-        </el-checkbox>
+            <span>{{ t('dialog.new_instance.content_drones') }}</span>
+        </label>
         <br />
-        <el-checkbox v-model="setWorldTagsDialog.props">
+        <label class="inline-flex items-center gap-2">
-            {{ t('dialog.new_instance.content_items') }}
+            <Checkbox v-model="setWorldTagsDialog.props" />
-        </el-checkbox>
+            <span>{{ t('dialog.new_instance.content_items') }}</span>
+        </label>
         <br />
-        <el-checkbox v-model="setWorldTagsDialog.thirdPerson">
+        <label class="inline-flex items-center gap-2">
-            {{ t('dialog.new_instance.content_third_person') }}
+            <Checkbox v-model="setWorldTagsDialog.thirdPerson" />
-        </el-checkbox>
+            <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

@@ -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

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

src/views/Favorites/FavoritesAvatar.vue

@@ -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

@@ -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

@@ -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

@@ -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

@@ -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

@@ -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

@@ -1,13 +1,13 @@
 <template>
     <el-dialog v-model="isDialogVisible" :title="t('dialog.avatar_export.header')" width="650px">
-        <el-checkbox-group
+        <div style="margin-bottom: 10px" class="flex flex-col gap-2">
-            v-model="exportSelectedOptions"
+            <label v-for="option in exportSelectOptions" :key="option.value" class="inline-flex items-center gap-2">
-            style="margin-bottom: 10px"
+                <Checkbox
-            @change="updateAvatarExportDialog()">
+                    :model-value="exportSelectedOptions.includes(option.label)"
-            <template v-for="option in exportSelectOptions" :key="option.value">
+                    @update:modelValue="(val) => toggleAvatarExportOption(option.label, val)" />
-                <el-checkbox :label="option.label"></el-checkbox>
+                <span>{{ option.label }}</span>
-            </template>
+            </label>
-        </el-checkbox-group>
+        </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

@@ -1,13 +1,13 @@
 <template>
     <el-dialog v-model="isDialogVisible" :title="t('dialog.world_export.header')" width="650px">
-        <el-checkbox-group
+        <div style="margin-bottom: 10px" class="flex flex-col gap-2">
-            v-model="exportSelectedOptions"
+            <label v-for="option in exportSelectOptions" :key="option.value" class="inline-flex items-center gap-2">
-            style="margin-bottom: 10px"
+                <Checkbox
-            @change="updateWorldExportDialog">
+                    :model-value="exportSelectedOptions.includes(option.label)"
-            <template v-for="option in exportSelectOptions" :key="option.value">
+                    @update:modelValue="(val) => toggleWorldExportOption(option.label, val)" />
-                <el-checkbox :label="option.label"></el-checkbox>
+                <span>{{ option.label }}</span>
-            </template>
+            </label>
-        </el-checkbox-group>
+        </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

@@ -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>
+                        <div class="flex items-center justify-center" @click.stop>
-                            <el-checkbox
+                            <Checkbox
                                 :model-value="selectedFriends.has(row.id)"
-                                @change="toggleFriendSelection(row.id)"></el-checkbox>
+                                @update:modelValue="toggleFriendSelection(row.id)" />
-                        </el-button>
+                        </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;
         });

src/views/Login/Login.vue

@@ -45,15 +45,14 @@
                                 clearable
                                 show-password></el-input>
                         </el-form-item>
-                        <el-checkbox v-model="loginForm.saveCredentials">{{
+                        <label class="inline-flex items-center gap-2 mr-2">
-                            t('view.login.field.saveCredentials')
+                            <Checkbox v-model="loginForm.saveCredentials" />
-                        }}</el-checkbox>
+                            <span>{{ t('view.login.field.saveCredentials') }}</span>
-                        <el-checkbox
+                        </label>
-                            v-model="enableCustomEndpoint"
+                        <label class="inline-flex items-center gap-2" style="margin-top: 10px">
-                            style="margin-top: 10px"
+                            <Checkbox v-model="enableCustomEndpoint" @update:modelValue="toggleCustomEndpoint" />
-                            @change="toggleCustomEndpoint"
+                            <span>{{ t('view.login.field.devEndpoint') }}</span>
-                            >{{ t('view.login.field.devEndpoint') }}</el-checkbox
+                        </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

@@ -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">{{
+                <label class="inline-flex items-center gap-2" style="margin-left: 10px">
-                    t('view.search.user.search_by_bio')
+                    <Checkbox v-model="searchUserByBio" />
-                }}</el-checkbox>
+                    <span>{{ t('view.search.user.search_by_bio') }}</span>
-                <el-checkbox v-model="searchUserSortByLastLoggedIn" style="margin-left: 10px">{{
+                </label>
-                    t('view.search.user.sort_by_last_logged_in')
+                <label class="inline-flex items-center gap-2" style="margin-left: 10px">
-                }}</el-checkbox>
+                    <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">{{
+                <label class="inline-flex items-center gap-2" style="margin-left: 10px">
-                    t('view.search.world.community_lab')
+                    <Checkbox v-model="searchWorldLabs" />
-                }}</el-checkbox>
+                    <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

@@ -133,18 +133,16 @@
             </div>
             <br />
 
-            <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"
-                @change="refreshDialogValues"
+                    @update:modelValue="refreshDialogValues" />
-                style="margin-top: 5px; display: block">
+                <span>{{ t('dialog.config_json.picture_sort_by_date') }}</span>
-                {{ t('dialog.config_json.picture_sort_by_date') }}
+            </label>
-            </el-checkbox>
+            <label class="inline-flex items-center gap-2" style="margin-top: 5px; display: block">
-            <el-checkbox
+                <Checkbox v-model="VRChatConfigFile.disableRichPresence" @update:modelValue="refreshDialogValues" />
-                v-model="VRChatConfigFile.disableRichPresence"
+                <span>{{ t('dialog.config_json.disable_discord_presence') }}</span>
-                @change="refreshDialogValues"
+            </label>
-                style="margin-top: 5px; display: block">
-                {{ t('dialog.config_json.disable_discord_presence') }}
-            </el-checkbox>
         </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

@@ -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';