replace el-switch with Switch component

src/components/ui/switch/Switch.vue

@@ -0,0 +1,47 @@
+<script setup>
+    import { SwitchRoot, SwitchThumb, useForwardPropsEmits } from 'reka-ui';
+    import { cn } from '@/lib/utils';
+    import { reactiveOmit } from '@vueuse/core';
+
+    const props = defineProps({
+        defaultValue: { type: Boolean, required: false },
+        modelValue: { type: [Boolean, null], required: false },
+        disabled: { type: Boolean, required: false },
+        id: { type: String, required: false },
+        value: { 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>
+    <SwitchRoot
+        v-slot="slotProps"
+        data-slot="switch"
+        v-bind="forwarded"
+        :class="
+            cn(
+                'peer data-[state=checked]:bg-primary data-[state=unchecked]:bg-input focus-visible:border-ring focus-visible:ring-ring/50 dark:data-[state=unchecked]:bg-input/80 inline-flex h-[1.15rem] w-8 shrink-0 items-center rounded-full border border-transparent shadow-xs transition-all outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50',
+                props.class
+            )
+        ">
+        <SwitchThumb
+            data-slot="switch-thumb"
+            :class="
+                cn(
+                    'bg-background dark:data-[state=unchecked]:bg-foreground dark:data-[state=checked]:bg-primary-foreground pointer-events-none block size-4 rounded-full ring-0 transition-transform data-[state=checked]:translate-x-[calc(100%-2px)] data-[state=unchecked]:translate-x-0'
+                )
+            ">
+            <slot name="thumb" v-bind="slotProps" />
+        </SwitchThumb>
+    </SwitchRoot>
+</template>

src/components/ui/switch/index.js

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

src/styles/globals.css

@@ -4,13 +4,15 @@
 @custom-variant dark (&:is(.dark *));
 
 :root {
+    --primary: var(--el-color-primary);
+    --ring: var(--el-color-primary);
     --background: oklch(1 0 0);
     --foreground: oklch(0.145 0 0);
     --card: oklch(1 0 0);
     --card-foreground: oklch(0.145 0 0);
     --popover: oklch(1 0 0);
     --popover-foreground: oklch(0.145 0 0);
-    --primary: oklch(0.205 0 0);
+    /* --primary: oklch(0.205 0 0); */
     --primary-foreground: oklch(0.985 0 0);
     --secondary: oklch(0.97 0 0);
     --secondary-foreground: oklch(0.205 0 0);
@@ -22,7 +24,7 @@
     --destructive-foreground: oklch(0.577 0.245 27.325);
     --border: oklch(0.922 0 0);
     --input: oklch(0.922 0 0);
-    --ring: oklch(0.708 0 0);
+    /* --ring: oklch(0.708 0 0); */
     --chart-1: oklch(0.646 0.222 41.116);
     --chart-2: oklch(0.6 0.118 184.704);
     --chart-3: oklch(0.398 0.07 227.392);
@@ -40,13 +42,15 @@
 }
 
 .dark {
+    --primary: var(--el-color-primary);
+    --ring: var(--el-color-primary);
     --background: oklch(0.145 0 0);
     --foreground: oklch(0.985 0 0);
     --card: oklch(0.145 0 0);
     --card-foreground: oklch(0.985 0 0);
     --popover: oklch(0.145 0 0);
     --popover-foreground: oklch(0.985 0 0);
-    --primary: oklch(0.985 0 0);
+    /* --primary: oklch(0.985 0 0); */
     --primary-foreground: oklch(0.205 0 0);
     --secondary: oklch(0.269 0 0);
     --secondary-foreground: oklch(0.985 0 0);
@@ -58,7 +62,7 @@
     --destructive-foreground: oklch(0.637 0.237 25.331);
     --border: oklch(0.269 0 0);
     --input: oklch(0.269 0 0);
-    --ring: oklch(0.439 0 0);
+    /* --ring: oklch(0.439 0 0); */
     --chart-1: oklch(0.488 0.243 264.376);
     --chart-2: oklch(0.696 0.17 162.48);
     --chart-3: oklch(0.769 0.188 70.08);

src/views/Charts/components/InstanceActivity.vue

@@ -49,30 +49,27 @@
                             </div>
                             <div>
                                 <span>{{ t('view.charts.instance_activity.settings.show_detail') }}</span>
-                                <el-switch
+                                <Switch
                                     v-model="isDetailVisible"
-                                    @change="
+                                    @update:modelValue="
                                         (value) => changeIsDetailInstanceVisible(value, () => handleSettingsChange())
-                                    ">
-                                </el-switch>
+                                    " />
                             </div>
                             <div v-if="isDetailVisible">
                                 <span>{{ t('view.charts.instance_activity.settings.show_solo_instance') }}</span>
-                                <el-switch
+                                <Switch
                                     v-model="isSoloInstanceVisible"
-                                    @change="
+                                    @update:modelValue="
                                         (value) => changeIsSoloInstanceVisible(value, () => handleSettingsChange())
-                                    ">
-                                </el-switch>
+                                    " />
                             </div>
                             <div v-if="isDetailVisible">
                                 <span>{{ t('view.charts.instance_activity.settings.show_no_friend_instance') }}</span>
-                                <el-switch
+                                <Switch
                                     v-model="isNoFriendInstanceVisible"
-                                    @change="
+                                    @update:modelValue="
                                         (value) => changeIsNoFriendInstanceVisible(value, () => handleSettingsChange())
-                                    ">
-                                </el-switch>
+                                    " />
                             </div>
                         </div>
                     </PopoverContent>
@@ -139,6 +136,7 @@
     import { Popover, PopoverContent, PopoverTrigger } from '../../../components/ui/popover';
     import { useAppearanceSettingsStore, useFriendStore, useUserStore } from '../../../stores';
     import { parseLocation, timeToText } from '../../../shared/utils';
+    import { Switch } from '../../../components/ui/switch';
     import { useActivityDataProcessor } from '../composables/useActivityDataProcessor';
     import { useChartHelpers } from '../composables/useChartHelpers';
     import { useDateNavigation } from '../composables/useDateNavigation';

src/views/Favorites/FavoritesAvatar.vue

@@ -339,10 +339,7 @@
                         </div>
                         <div class="favorites-content__edit">
                             <span>{{ t('view.favorite.edit_mode') }}</span>
-                            <el-switch
-                                v-model="avatarEditMode"
-                                size="small"
-                                :disabled="isSearchActive || !activeRemoteGroup"></el-switch>
+                            <Switch v-model="avatarEditMode" :disabled="isSearchActive || !activeRemoteGroup" />
                         </div>
                     </div>
                     <div class="favorites-content__edit-actions">
@@ -496,6 +493,7 @@
     import { Popover, PopoverContent, PopoverTrigger } from '../../components/ui/popover';
     import { avatarRequest, favoriteRequest } from '../../api';
     import { Badge } from '../../components/ui/badge';
+    import { Switch } from '../../components/ui/switch';
     import { useFavoritesCardScaling } from './composables/useFavoritesCardScaling.js';
 
     import AvatarExportDialog from './dialogs/AvatarExportDialog.vue';

src/views/Favorites/FavoritesFriend.vue

@@ -180,10 +180,7 @@
                         </div>
                         <div class="favorites-content__edit">
                             <span>{{ t('view.favorite.edit_mode') }}</span>
-                            <el-switch
-                                v-model="friendEditMode"
-                                size="small"
-                                :disabled="isSearchActive || !activeRemoteGroup"></el-switch>
+                            <Switch v-model="friendEditMode" :disabled="isSearchActive || !activeRemoteGroup" />
                         </div>
                     </div>
                     <div class="favorites-content__edit-actions">
@@ -287,6 +284,7 @@
     import { Popover, PopoverContent, PopoverTrigger } from '../../components/ui/popover';
     import { useAppearanceSettingsStore, useFavoriteStore, useUserStore } from '../../stores';
     import { Badge } from '../../components/ui/badge';
+    import { Switch } from '../../components/ui/switch';
     import { favoriteRequest } from '../../api';
     import { useFavoritesCardScaling } from './composables/useFavoritesCardScaling.js';
     import { userImage } from '../../shared/utils';

src/views/Favorites/FavoritesWorld.vue

@@ -286,7 +286,7 @@
                         </div>
                         <div class="favorites-content__edit">
                             <span>{{ t('view.favorite.edit_mode') }}</span>
-                            <el-switch v-model="worldEditMode" size="small" :disabled="isSearchActive"></el-switch>
+                            <Switch v-model="worldEditMode" :disabled="isSearchActive" />
                         </div>
                     </div>
                     <div class="favorites-content__edit-actions">
@@ -412,6 +412,7 @@
     import { useAppearanceSettingsStore, useFavoriteStore, useWorldStore } from '../../stores';
     import { favoriteRequest, worldRequest } from '../../api';
     import { Badge } from '../../components/ui/badge';
+    import { Switch } from '../../components/ui/switch';
     import { useFavoritesCardScaling } from './composables/useFavoritesCardScaling.js';
 
     import FavoritesWorldItem from './components/FavoritesWorldItem.vue';

src/views/Feed/Feed.vue

@@ -11,10 +11,7 @@
                 <div style="margin: 0 0 10px; display: flex; align-items: center">
                     <div style="flex: none; margin-right: 10px; display: flex; align-items: center">
                         <TooltipWrapper side="bottom" :content="t('view.feed.favorites_only_tooltip')">
-                            <el-switch
-                                v-model="feedTable.vip"
-                                active-color="var(--el-color-success)"
-                                @change="feedTableLookup"></el-switch>
+                            <Switch v-model="feedTable.vip" @update:modelValue="feedTableLookup" />
                         </TooltipWrapper>
                     </div>
                     <el-select
@@ -58,6 +55,7 @@
 
     import { useAppearanceSettingsStore, useFeedStore, useVrcxStore } from '../../stores';
     import { DataTableLayout } from '../../components/ui/data-table';
+    import { Switch } from '../../components/ui/switch';
     import { columns as baseColumns } from './columns.jsx';
     import { useDataTableScrollHeight } from '../../composables/useDataTableScrollHeight';
     import { valueUpdater } from '../../components/ui/table/utils';

src/views/FriendList/FriendList.vue

@@ -4,10 +4,7 @@
             <div style="display: flex; align-items: center; justify-content: space-between">
                 <div style="flex: none; margin-right: 10px; display: flex; align-items: center">
                     <TooltipWrapper side="bottom" :content="t('view.friend_list.favorites_only_tooltip')">
-                        <el-switch
-                            v-model="friendsListSearchFilterVIP"
-                            active-color="var(--el-color-success)"
-                            @change="friendsListSearchChange"></el-switch>
+                        <Switch v-model="friendsListSearchFilterVIP" @update:modelValue="friendsListSearchChange" />
                     </TooltipWrapper>
                     <el-select
                         v-model="friendsListSearchFilters"
@@ -39,9 +36,9 @@
                     </div>
                     <div class="flex items-center mr-3">
                         <span class="name mr-2 text-xs">{{ t('view.friend_list.bulk_unfriend') }}</span>
-                        <el-switch
+                        <Switch
                             v-model="friendsListBulkUnfriendMode"
-                            @change="toggleFriendsListBulkUnfriendMode"></el-switch>
+                            @update:modelValue="toggleFriendsListBulkUnfriendMode" />
                     </div>
                     <div class="flex items-center">
                         <el-button @click="openChartsTab">
@@ -284,6 +281,7 @@
     } from '../../shared/utils';
     import { useAppearanceSettingsStore, useFriendStore, useSearchStore, useUserStore } from '../../stores';
     import { friendRequest, userRequest } from '../../api';
+    import { Switch } from '../../components/ui/switch';
     import removeConfusables, { removeWhitespace } from '../../service/confusables';
     import { router } from '../../plugin/router';
     import { useTableHeight } from '../../composables/useTableHeight';

src/views/FriendsLocations/FriendsLocations.vue

@@ -24,7 +24,7 @@
                             <span class="friend-view__settings-label">{{
                                 t('view.friends_locations.separate_same_instance_friends')
                             }}</span>
-                            <el-switch v-model="showSameInstance" />
+                            <Switch v-model="showSameInstance" />
                         </div>
                         <div class="friend-view__settings-row">
                             <span class="friend-view__settings-label">{{ t('view.friends_locations.scale') }}</span>
@@ -170,6 +170,7 @@
     import { useI18n } from 'vue-i18n';
 
     import { Popover, PopoverContent, PopoverTrigger } from '../../components/ui/popover';
+    import { Switch } from '../../components/ui/switch';
     import { getFriendsLocations } from '../../shared/utils/location.js';
     import { useFriendStore } from '../../stores';
 

src/views/GameLog/GameLog.vue

@@ -11,10 +11,7 @@
                 <div style="margin: 0 0 10px; display: flex; align-items: center">
                     <div style="flex: none; margin-right: 10px; display: flex; align-items: center">
                         <TooltipWrapper side="bottom" :content="t('view.feed.favorites_only_tooltip')">
-                            <el-switch
-                                v-model="gameLogTable.vip"
-                                active-color="var(--el-color-success)"
-                                @change="gameLogTableLookup"></el-switch>
+                            <Switch v-model="gameLogTable.vip" @update:modelValue="gameLogTableLookup" />
                         </TooltipWrapper>
                     </div>
                     <el-select
@@ -69,6 +66,7 @@
 
     import { useAppearanceSettingsStore, useGameLogStore, useSharedFeedStore, useVrcxStore } from '../../stores';
     import { DataTableLayout } from '../../components/ui/data-table';
+    import { Switch } from '../../components/ui/switch';
     import { createColumns } from './columns.jsx';
     import { database } from '../../service/database';
     import { removeFromArray } from '../../shared/utils';

src/views/Settings/components/SimpleSwitch.vue

@@ -7,12 +7,14 @@
             ></TooltipWrapper>
         </div>
 
-        <el-switch class="switch" :model-value="value" @change="change" :disabled="disabled"></el-switch>
+        <Switch class="switch" :model-value="value" @update:modelValue="change" :disabled="disabled" />
     </div>
 </template>
 
 <script setup>
     import { InfoFilled } from '@element-plus/icons-vue';
+
+    import { Switch } from '../../../components/ui/switch';
     defineProps({
         label: String,
         value: Boolean,

src/views/Settings/dialogs/RegistryBackupDialog.vue

@@ -9,7 +9,7 @@
         <div style="margin-top: 10px">
             <div style="display: flex; align-items: center; justify-content: space-between; font-size: 12px">
                 <span class="name" style="margin-right: 24px">{{ t('dialog.registry_backup.auto_backup') }}</span>
-                <el-switch :model-value="vrcRegistryAutoBackup" @change="setVrcRegistryAutoBackup"></el-switch>
+                <Switch :model-value="vrcRegistryAutoBackup" @update:modelValue="setVrcRegistryAutoBackup" />
             </div>
             <div
                 style="
@@ -20,7 +20,7 @@
                     margin-top: 5px;
                 ">
                 <span class="name" style="margin-right: 24px">{{ t('dialog.registry_backup.ask_to_restore') }}</span>
-                <el-switch :model-value="vrcRegistryAskRestore" @change="setVrcRegistryAskRestore"></el-switch>
+                <Switch :model-value="vrcRegistryAskRestore" @update:modelValue="setVrcRegistryAskRestore" />
             </div>
             <DataTable v-bind="registryBackupTable" style="margin-top: 10px">
                 <el-table-column :label="t('dialog.registry_backup.name')" prop="name"></el-table-column>
@@ -85,6 +85,7 @@
 
     import { downloadAndSaveJson, formatDateFilter, removeFromArray } from '../../../shared/utils';
     import { useAdvancedSettingsStore, useVrcxStore } from '../../../stores';
+    import { Switch } from '../../../components/ui/switch';
 
     import configRepository from '../../../service/config';
 

src/views/Tools/dialogs/GroupCalendarDialog.vue

@@ -19,7 +19,7 @@
             </div>
             <div class="featured-switch">
                 <span class="featured-switch-text">{{ t('dialog.group_calendar.featured_events') }}</span>
-                <el-switch v-model="showFeaturedEvents" @change="toggleFeaturedEvents" size="small" />
+                <Switch v-model="showFeaturedEvents" @update:modelValue="toggleFeaturedEvents" />
             </div>
         </template>
         <div class="top-content">
@@ -131,6 +131,7 @@
     import dayjs from 'dayjs';
 
     import { formatDateFilter, getGroupName, replaceBioSymbols } from '../../../shared/utils';
+    import { Switch } from '../../../components/ui/switch';
     import { groupRequest } from '../../../api';
     import { processBulk } from '../../../service/request';
     import { useGroupStore } from '../../../stores';