replace el-radio with RadioGroup and RadioGroupItem

src/views/Settings/components/Tabs/AppearanceTab.vue

@@ -72,25 +72,45 @@
                 @change="setIsAgeGatedInstancesVisible" />
             <div class="options-container-item">
                 <span class="name">{{ t('view.settings.appearance.appearance.sort_favorite_by') }}</span>
-                <el-radio-group :model-value="sortFavorites" @change="saveSortFavoritesOption">
-                    <el-radio :value="false">{{
-                        t('view.settings.appearance.appearance.sort_favorite_by_name')
-                    }}</el-radio>
-                    <el-radio :value="true">{{
-                        t('view.settings.appearance.appearance.sort_favorite_by_date')
-                    }}</el-radio>
-                </el-radio-group>
+                <RadioGroup
+                    :model-value="sortFavorites ? 'true' : 'false'"
+                    class="gap-2"
+                    style="margin-top: 8px"
+                    @update:modelValue="handleSortFavoritesRadio">
+                    <div class="flex items-center space-x-2">
+                        <RadioGroupItem id="sortFavorites-false" value="false" />
+                        <label for="sortFavorites-false">
+                            {{ t('view.settings.appearance.appearance.sort_favorite_by_name') }}
+                        </label>
+                    </div>
+                    <div class="flex items-center space-x-2">
+                        <RadioGroupItem id="sortFavorites-true" value="true" />
+                        <label for="sortFavorites-true">
+                            {{ t('view.settings.appearance.appearance.sort_favorite_by_date') }}
+                        </label>
+                    </div>
+                </RadioGroup>
             </div>
             <div class="options-container-item">
                 <span class="name">{{ t('view.settings.appearance.appearance.sort_instance_users_by') }}</span>
-                <el-radio-group :model-value="instanceUsersSortAlphabetical" @change="setInstanceUsersSortAlphabetical">
-                    <el-radio :value="false">{{
-                        t('view.settings.appearance.appearance.sort_instance_users_by_time')
-                    }}</el-radio>
-                    <el-radio :value="true">{{
-                        t('view.settings.appearance.appearance.sort_instance_users_by_alphabet')
-                    }}</el-radio>
-                </el-radio-group>
+                <RadioGroup
+                    :model-value="instanceUsersSortAlphabetical ? 'true' : 'false'"
+                    class="gap-2"
+                    style="margin-top: 8px"
+                    @update:modelValue="handleInstanceUsersSortAlphabeticalRadio">
+                    <div class="flex items-center space-x-2">
+                        <RadioGroupItem id="instanceUsersSortAlphabetical-false" value="false" />
+                        <label for="instanceUsersSortAlphabetical-false">
+                            {{ t('view.settings.appearance.appearance.sort_instance_users_by_time') }}
+                        </label>
+                    </div>
+                    <div class="flex items-center space-x-2">
+                        <RadioGroupItem id="instanceUsersSortAlphabetical-true" value="true" />
+                        <label for="instanceUsersSortAlphabetical-true">
+                            {{ t('view.settings.appearance.appearance.sort_instance_users_by_alphabet') }}
+                        </label>
+                    </div>
+                </RadioGroup>
             </div>
 
             <div class="options-container-item">
@@ -154,15 +174,24 @@
             <span class="header">{{ t('view.settings.appearance.timedate.header') }}</span>
             <div class="options-container-item">
                 <span class="name">{{ t('view.settings.appearance.timedate.time_format') }}</span>
-                <el-radio-group
-                    :model-value="dtHour12"
-                    @change="
-                        setDtHour12();
-                        updateVRConfigVars();
-                    ">
-                    <el-radio :value="true">{{ t('view.settings.appearance.timedate.time_format_12') }}</el-radio>
-                    <el-radio :value="false">{{ t('view.settings.appearance.timedate.time_format_24') }}</el-radio>
-                </el-radio-group>
+                <RadioGroup
+                    :model-value="dtHour12 ? 'true' : 'false'"
+                    class="gap-2"
+                    style="margin-top: 8px"
+                    @update:modelValue="handleDtHour12Radio">
+                    <div class="flex items-center space-x-2">
+                        <RadioGroupItem id="dtHour12-true" value="true" />
+                        <label for="dtHour12-true">
+                            {{ t('view.settings.appearance.timedate.time_format_12') }}
+                        </label>
+                    </div>
+                    <div class="flex items-center space-x-2">
+                        <RadioGroupItem id="dtHour12-false" value="false" />
+                        <label for="dtHour12-false">
+                            {{ t('view.settings.appearance.timedate.time_format_24') }}
+                        </label>
+                    </div>
+                </RadioGroup>
             </div>
             <simple-switch
                 :label="t('view.settings.appearance.timedate.force_iso_date_format')"
@@ -398,6 +427,7 @@
     import { computed, onBeforeUnmount, ref, watch } from 'vue';
     import { ArrowRight, Notebook } from '@element-plus/icons-vue';
     import { CheckIcon, ChevronDown } from 'lucide-vue-next';
+    import { RadioGroup, RadioGroupItem } from '@/components/ui/radio-group';
     import { Button } from '@/components/ui/button';
     import { storeToRefs } from 'pinia';
     import { toast } from 'vue-sonner';
@@ -483,6 +513,28 @@
 
     initGetZoomLevel();
 
+    function handleSortFavoritesRadio(value) {
+        const nextValue = value === 'true';
+        if (nextValue !== sortFavorites.value) {
+            saveSortFavoritesOption();
+        }
+    }
+
+    function handleInstanceUsersSortAlphabeticalRadio(value) {
+        const nextValue = value === 'true';
+        if (nextValue !== instanceUsersSortAlphabetical.value) {
+            setInstanceUsersSortAlphabetical();
+        }
+    }
+
+    function handleDtHour12Radio(value) {
+        const nextValue = value === 'true';
+        if (nextValue !== dtHour12.value) {
+            setDtHour12();
+            updateVRConfigVars();
+        }
+    }
+
     const tablePageSizesModel = computed({
         get: () => tablePageSizes.value.map(String),
         set: (values) => {

src/views/Settings/components/Tabs/GeneralTab.vue

@@ -217,13 +217,25 @@
             </div>
             <div class="options-container-item">
                 <span class="name">{{ t('view.settings.general.automation.alone_condition') }}</span>
-                <el-radio-group
-                    :model-value="autoStateChangeNoFriends"
+                <RadioGroup
+                    :model-value="autoStateChangeNoFriends ? 'true' : 'false'"
                     :disabled="!autoStateChangeEnabled"
-                    @change="setAutoStateChangeNoFriends">
-                    <el-radio :value="false">{{ t('view.settings.general.automation.alone') }}</el-radio>
-                    <el-radio :value="true">{{ t('view.settings.general.automation.no_friends') }}</el-radio>
-                </el-radio-group>
+                    class="gap-2"
+                    style="margin-top: 8px"
+                    @update:modelValue="handleAutoStateChangeNoFriendsRadio">
+                    <div class="flex items-center space-x-2">
+                        <RadioGroupItem id="autoStateChangeNoFriends-false" value="false" />
+                        <label for="autoStateChangeNoFriends-false">
+                            {{ t('view.settings.general.automation.alone') }}
+                        </label>
+                    </div>
+                    <div class="flex items-center space-x-2">
+                        <RadioGroupItem id="autoStateChangeNoFriends-true" value="true" />
+                        <label for="autoStateChangeNoFriends-true">
+                            {{ t('view.settings.general.automation.no_friends') }}
+                        </label>
+                    </div>
+                </RadioGroup>
             </div>
             <div class="options-container-item">
                 <span class="name"
@@ -296,6 +308,7 @@
 
     import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '../../../../components/ui/select';
     import { useFavoriteStore, useGeneralSettingsStore, useVRCXUpdaterStore } from '../../../../stores';
+    import { RadioGroup, RadioGroupItem } from '../../../../components/ui/radio-group';
     import { ToggleGroup, ToggleGroupItem } from '../../../../components/ui/toggle-group';
     import { links } from '../../../../shared/constants';
     import { openExternalLink } from '../../../../shared/utils';
@@ -374,4 +387,11 @@
     function openOSSDialog() {
         ossDialog.value = true;
     }
+
+    function handleAutoStateChangeNoFriendsRadio(value) {
+        const nextValue = value === 'true';
+        if (nextValue !== autoStateChangeNoFriends.value) {
+            setAutoStateChangeNoFriends();
+        }
+    }
 </script>

src/views/Settings/components/WristOverlaySettings.vue

@@ -43,33 +43,43 @@
             " />
         <div class="options-container-item" style="min-width: 118px">
             <span class="name">{{ t('view.settings.wrist_overlay.steamvr_wrist_overlay.start_overlay_with') }}</span>
-            <el-radio-group
-                :model-value="openVRAlways"
+            <RadioGroup
+                :model-value="openVRAlways ? 'true' : 'false'"
                 :disabled="!openVR"
-                @change="
-                    setOpenVRAlways();
-                    saveOpenVROption();
-                ">
-                <el-radio :value="false">{{ 'VRChat' }}</el-radio>
-                <el-radio :value="true">{{ 'SteamVR' }}</el-radio>
-            </el-radio-group>
+                class="gap-2"
+                style="margin-top: 8px"
+                @update:modelValue="handleOpenVRAlwaysRadio">
+                <div class="flex items-center space-x-2">
+                    <RadioGroupItem id="openVRAlways-false" value="false" />
+                    <label for="openVRAlways-false">{{ 'VRChat' }}</label>
+                </div>
+                <div class="flex items-center space-x-2">
+                    <RadioGroupItem id="openVRAlways-true" value="true" />
+                    <label for="openVRAlways-true">{{ 'SteamVR' }}</label>
+                </div>
+            </RadioGroup>
         </div>
         <div class="options-container-item">
             <span class="name">{{ t('view.settings.wrist_overlay.steamvr_wrist_overlay.overlay_button') }}</span>
-            <el-radio-group
-                :model-value="overlaybutton"
+            <RadioGroup
+                :model-value="overlaybutton ? 'true' : 'false'"
                 :disabled="!openVR || !overlayWrist"
-                @change="
-                    setOverlaybutton();
-                    saveOpenVROption();
-                ">
-                <el-radio :value="false">{{
-                    t('view.settings.wrist_overlay.steamvr_wrist_overlay.overlay_button_grip')
-                }}</el-radio>
-                <el-radio :value="true">{{
-                    t('view.settings.wrist_overlay.steamvr_wrist_overlay.overlay_button_menu')
-                }}</el-radio>
-            </el-radio-group>
+                class="gap-2"
+                style="margin-top: 8px"
+                @update:modelValue="handleOverlayButtonRadio">
+                <div class="flex items-center space-x-2">
+                    <RadioGroupItem id="overlaybutton-false" value="false" />
+                    <label for="overlaybutton-false">{{
+                        t('view.settings.wrist_overlay.steamvr_wrist_overlay.overlay_button_grip')
+                    }}</label>
+                </div>
+                <div class="flex items-center space-x-2">
+                    <RadioGroupItem id="overlaybutton-true" value="true" />
+                    <label for="overlaybutton-true">{{
+                        t('view.settings.wrist_overlay.steamvr_wrist_overlay.overlay_button_menu')
+                    }}</label>
+                </div>
+            </RadioGroup>
         </div>
         <div class="options-container-item">
             <span class="name">{{ t('view.settings.wrist_overlay.steamvr_wrist_overlay.display_overlay_on') }}</span>
@@ -151,6 +161,7 @@
     import { useI18n } from 'vue-i18n';
 
     import { useNotificationsSettingsStore, useVrStore, useWristOverlaySettingsStore } from '../../../stores';
+    import { RadioGroup, RadioGroupItem } from '../../../components/ui/radio-group';
     import { ToggleGroup, ToggleGroupItem } from '../../../components/ui/toggle-group';
 
     import SimpleSwitch from './SimpleSwitch.vue';
@@ -194,4 +205,20 @@
     } = wristOverlaySettingsStore;
 
     const { saveOpenVROption } = useVrStore();
+
+    function handleOpenVRAlwaysRadio(value) {
+        const nextValue = value === 'true';
+        if (nextValue !== openVRAlways.value) {
+            setOpenVRAlways();
+            saveOpenVROption();
+        }
+    }
+
+    function handleOverlayButtonRadio(value) {
+        const nextValue = value === 'true';
+        if (nextValue !== overlaybutton.value) {
+            setOverlaybutton();
+            saveOpenVROption();
+        }
+    }
 </script>