replace el-checkbox with Checkbox component

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

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

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

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

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

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

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