MrUnknownDE/VRCX
1
0
Fork 0
mirror of https://github.com/MrUnknownDE/VRCX.git synced 2026-04-19 14:53:50 +02:00
Code Issues Packages Projects Releases Wiki Activity

replace el-radio with RadioGroup and RadioGroupItem

Browse Source
This commit is contained in:
pa
2026-01-10 20:48:37 +09:00
committed by Natsumi
parent 90fc5733af
commit c2e34e3395
9 changed files with 385 additions and 116 deletions
Download Patch File Download Diff File Expand all files Collapse all files

23
src/components/dialogs/GroupDialog/GroupPostEditDialog.vue
View File

@@ -28,14 +28,20 @@
</el-checkbox> </el-checkbox>
</el-form-item> </el-form-item>
<el-form-item :label="t('dialog.group_post_edit.post_visibility')"> <el-form-item :label="t('dialog.group_post_edit.post_visibility')">
<el-radio-group v-model="groupPostEditDialog.visibility" size="small"> <RadioGroup v-model="groupPostEditDialog.visibility" class="flex items-center gap-4">
<el-radio value="public"> <div class="flex items-center space-x-2">
{{ t('dialog.group_post_edit.visibility_public') }} <RadioGroupItem id="groupPostVisibility-public" value="public" />
</el-radio> <label for="groupPostVisibility-public">
<el-radio value="group"> {{ t('dialog.group_post_edit.visibility_public') }}
{{ t('dialog.group_post_edit.visibility_group') }} </label>
</el-radio> </div>
</el-radio-group> <div class="flex items-center space-x-2">
<RadioGroupItem id="groupPostVisibility-group" value="group" />
<label for="groupPostVisibility-group">
{{ t('dialog.group_post_edit.visibility_group') }}
</label>
</div>
</RadioGroup>
</el-form-item> </el-form-item>
<el-form-item v-if="groupPostEditDialog.visibility === 'group'" :label="t('dialog.new_instance.roles')"> <el-form-item v-if="groupPostEditDialog.visibility === 'group'" :label="t('dialog.new_instance.roles')">
<Select <Select
@@ -106,6 +112,7 @@
import { useI18n } from 'vue-i18n'; import { useI18n } from 'vue-i18n';
import { Select, SelectContent, SelectGroup, SelectItem, SelectTrigger, SelectValue } from '../../ui/select'; import { Select, SelectContent, SelectGroup, SelectItem, SelectTrigger, SelectValue } from '../../ui/select';
import { RadioGroup, RadioGroupItem } from '../../ui/radio-group';
import { groupRequest, vrcPlusIconRequest } from '../../../api'; import { groupRequest, vrcPlusIconRequest } from '../../../api';
import { useGalleryStore, useGroupStore } from '../../../stores'; import { useGalleryStore, useGroupStore } from '../../../stores';

34
src/components/ui/radio-group/RadioGroup.vue Normal file
View File

@@ -0,0 +1,34 @@
<script setup>
import { RadioGroupRoot, useForwardPropsEmits } from 'reka-ui';
import { cn } from '@/lib/utils';
import { reactiveOmit } from '@vueuse/core';
const props = defineProps({
modelValue: { type: null, required: false },
defaultValue: { type: null, required: false },
disabled: { type: Boolean, required: false },
orientation: { type: String, required: false },
dir: { type: String, required: false },
loop: { type: Boolean, 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>
<RadioGroupRoot
v-slot="slotProps"
data-slot="radio-group"
:class="cn('grid gap-3', props.class)"
v-bind="forwarded">
<slot v-bind="slotProps" />
</RadioGroupRoot>
</template>

39
src/components/ui/radio-group/RadioGroupItem.vue Normal file
View File

@@ -0,0 +1,39 @@
<script setup>
import { RadioGroupIndicator, RadioGroupItem, useForwardProps } from 'reka-ui';
import { CircleIcon } from 'lucide-vue-next';
import { cn } from '@/lib/utils';
import { reactiveOmit } from '@vueuse/core';
const props = defineProps({
id: { type: String, required: false },
value: { type: null, required: false },
disabled: { type: Boolean, 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 delegatedProps = reactiveOmit(props, 'class');
const forwardedProps = useForwardProps(delegatedProps);
</script>
<template>
<RadioGroupItem
data-slot="radio-group-item"
v-bind="forwardedProps"
:class="
cn(
'border-input text-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 dark:bg-input/30 aspect-square size-4 shrink-0 rounded-full border shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50',
props.class
)
">
<RadioGroupIndicator data-slot="radio-group-indicator" class="relative flex items-center justify-center">
<slot>
<CircleIcon class="fill-primary absolute top-1/2 left-1/2 size-2 -translate-x-1/2 -translate-y-1/2" />
</slot>
</RadioGroupIndicator>
</RadioGroupItem>
</template>

2
src/components/ui/radio-group/index.js Normal file
View File

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

104
src/views/Search/Search.vue
View File

@@ -170,40 +170,70 @@
}}</span> }}</span>
</div> </div>
<div style="display: flex; align-items: center"> <div style="display: flex; align-items: center">
<el-radio-group <RadioGroup
v-model="searchAvatarFilter" :model-value="searchAvatarFilter"
size="small" class="flex items-center gap-4"
style="margin: 5px; display: block" style="margin: 5px"
@change="searchAvatar"> @update:modelValue="handleSearchAvatarFilterChange">
<el-radio value="all">{{ t('view.search.avatar.all') }}</el-radio> <div class="flex items-center space-x-2">
<el-radio value="public">{{ t('view.search.avatar.public') }}</el-radio> <RadioGroupItem id="searchAvatarFilter-all" value="all" />
<el-radio value="private">{{ t('view.search.avatar.private') }}</el-radio> <label for="searchAvatarFilter-all">{{ t('view.search.avatar.all') }}</label>
</el-radio-group> </div>
<div class="flex items-center space-x-2">
<RadioGroupItem id="searchAvatarFilter-public" value="public" />
<label for="searchAvatarFilter-public">{{ t('view.search.avatar.public') }}</label>
</div>
<div class="flex items-center space-x-2">
<RadioGroupItem id="searchAvatarFilter-private" value="private" />
<label for="searchAvatarFilter-private">{{ t('view.search.avatar.private') }}</label>
</div>
</RadioGroup>
<el-divider direction="vertical"></el-divider> <el-divider direction="vertical"></el-divider>
<el-radio-group <RadioGroup
v-model="searchAvatarFilterRemote" :model-value="searchAvatarFilterRemote"
size="small" class="flex items-center gap-4"
style="margin: 5px; display: block" style="margin: 5px"
@change="searchAvatar"> @update:modelValue="handleSearchAvatarFilterRemoteChange">
<el-radio value="all">{{ t('view.search.avatar.all') }}</el-radio> <div class="flex items-center space-x-2">
<el-radio value="local">{{ t('view.search.avatar.local') }}</el-radio> <RadioGroupItem id="searchAvatarFilterRemote-all" value="all" />
<el-radio value="remote" :disabled="!avatarRemoteDatabase">{{ <label for="searchAvatarFilterRemote-all">{{ t('view.search.avatar.all') }}</label>
t('view.search.avatar.remote') </div>
}}</el-radio> <div class="flex items-center space-x-2">
</el-radio-group> <RadioGroupItem id="searchAvatarFilterRemote-local" value="local" />
<label for="searchAvatarFilterRemote-local">{{ t('view.search.avatar.local') }}</label>
</div>
<div class="flex items-center space-x-2">
<RadioGroupItem
id="searchAvatarFilterRemote-remote"
value="remote"
:disabled="!avatarRemoteDatabase" />
<label for="searchAvatarFilterRemote-remote">{{
t('view.search.avatar.remote')
}}</label>
</div>
</RadioGroup>
</div> </div>
</div> </div>
<div style="display: flex; justify-content: end"> <div style="display: flex; justify-content: end">
<el-radio-group <RadioGroup
v-model="searchAvatarSort" :model-value="searchAvatarSort"
:disabled="searchAvatarFilterRemote !== 'local'" :disabled="searchAvatarFilterRemote !== 'local'"
size="small" class="flex items-center gap-4"
style="margin: 5px; display: block" style="margin: 5px"
@change="searchAvatar"> @update:modelValue="handleSearchAvatarSortChange">
<el-radio value="name">{{ t('view.search.avatar.sort_name') }}</el-radio> <div class="flex items-center space-x-2">
<el-radio value="update">{{ t('view.search.avatar.sort_update') }}</el-radio> <RadioGroupItem id="searchAvatarSort-name" value="name" />
<el-radio value="created">{{ t('view.search.avatar.sort_created') }}</el-radio> <label for="searchAvatarSort-name">{{ t('view.search.avatar.sort_name') }}</label>
</el-radio-group> </div>
<div class="flex items-center space-x-2">
<RadioGroupItem id="searchAvatarSort-update" value="update" />
<label for="searchAvatarSort-update">{{ t('view.search.avatar.sort_update') }}</label>
</div>
<div class="flex items-center space-x-2">
<RadioGroupItem id="searchAvatarSort-created" value="created" />
<label for="searchAvatarSort-created">{{ t('view.search.avatar.sort_created') }}</label>
</div>
</RadioGroup>
</div> </div>
<div class="x-friend-list" style="margin-top: 20px; min-height: 500px"> <div class="x-friend-list" style="margin-top: 20px; min-height: 500px">
<div <div
@@ -308,6 +338,7 @@
<script setup> <script setup>
import { Select, SelectContent, SelectGroup, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select'; import { Select, SelectContent, SelectGroup, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
import { Back, Delete, Refresh, Right } from '@element-plus/icons-vue'; import { Back, Delete, Refresh, Right } from '@element-plus/icons-vue';
import { RadioGroup, RadioGroupItem } from '@/components/ui/radio-group';
import { Button } from '@/components/ui/button'; import { Button } from '@/components/ui/button';
import { ButtonGroup } from '@/components/ui/button-group'; import { ButtonGroup } from '@/components/ui/button-group';
import { ref } from 'vue'; import { ref } from 'vue';
@@ -368,6 +399,21 @@
const searchWorldCategoryIndex = ref(null); const searchWorldCategoryIndex = ref(null);
const searchWorldResults = ref([]); const searchWorldResults = ref([]);
function handleSearchAvatarFilterChange(value) {
searchAvatarFilter.value = value;
searchAvatar();
}
function handleSearchAvatarFilterRemoteChange(value) {
searchAvatarFilterRemote.value = value;
searchAvatar();
}
function handleSearchAvatarSortChange(value) {
searchAvatarSort.value = value;
searchAvatar();
}
const searchAvatarFilter = ref(''); const searchAvatarFilter = ref('');
const searchAvatarSort = ref(''); const searchAvatarSort = ref('');
const searchAvatarFilterRemote = ref(''); const searchAvatarFilterRemote = ref('');

102
src/views/Settings/components/Tabs/AppearanceTab.vue
View File

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

32
src/views/Settings/components/Tabs/GeneralTab.vue
View File

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

71
src/views/Settings/components/WristOverlaySettings.vue
View File

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

94
src/views/Settings/dialogs/NotificationPositionDialog.vue
View File

@@ -8,32 +8,73 @@
<div style="font-size: 12px"> <div style="font-size: 12px">
{{ t('dialog.notification_position.description') }} {{ t('dialog.notification_position.description') }}
</div> </div>
<svg <div class="relative mx-auto mt-4 size-75">
version="1.1" <svg
xmlns="http://www.w3.org/2000/svg" version="1.1"
xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg"
x="0px" xmlns:xlink="http://www.w3.org/1999/xlink"
y="0px" x="0px"
viewBox="0 0 300 200" y="0px"
style="margin-top: 15px" viewBox="80 80 80 100"
xml:space="preserve" style="margin-top: 24px"
class="notification-position"> xml:space="preserve"
<path class="absolute inset-0 size-full">
style="fill: black" <path
d="M291.89,5A3.11,3.11,0,0,1,295,8.11V160.64a3.11,3.11,0,0,1-3.11,3.11H8.11A3.11,3.11,0,0,1,5,160.64V8.11A3.11,3.11,0,0,1,8.11,5H291.89m0-5H8.11A8.11,8.11,0,0,0,0,8.11V160.64a8.11,8.11,0,0,0,8.11,8.11H291.89a8.11,8.11,0,0,0,8.11-8.11V8.11A8.11,8.11,0,0,0,291.89,0Z" /> style="fill: black"
<rect style="fill: #c4c4c4" x="5" y="5" width="290" height="158.75" rx="2.5" /> d="M291.89,5A3.11,3.11,0,0,1,295,8.11V160.64a3.11,3.11,0,0,1-3.11,3.11H8.11A3.11,3.11,0,0,1,5,160.64V8.11A3.11,3.11,0,0,1,8.11,5H291.89m0-5H8.11A8.11,8.11,0,0,0,0,8.11V160.64a8.11,8.11,0,0,0,8.11,8.11H291.89a8.11,8.11,0,0,0,8.11-8.11V8.11A8.11,8.11,0,0,0,291.89,0Z" />
</svg> <rect style="fill: #c4c4c4" x="5" y="5" width="290" height="158.75" rx="2.5" />
<el-radio-group :model-value="notificationPosition" size="small" @change="changeNotificationPosition"> </svg>
<el-radio value="topLeft" style="margin: 0; position: absolute; left: 35px; top: 120px">‎</el-radio> <RadioGroup
<el-radio value="top" style="margin: 0; position: absolute; left: 195px; top: 120px">‎</el-radio> :model-value="notificationPosition"
<el-radio value="topRight" style="margin: 0; position: absolute; right: 25px; top: 120px">‎</el-radio> class="absolute inset-0"
<el-radio value="centerLeft" style="margin: 0; position: absolute; left: 35px; top: 200px">‎</el-radio> @update:modelValue="changeNotificationPosition">
<el-radio value="center" style="margin: 0; position: absolute; left: 195px; top: 200px">‎</el-radio> <RadioGroupItem
<el-radio value="centerRight" style="margin: 0; position: absolute; right: 25px; top: 200px">‎</el-radio> id="notificationPosition-topLeft"
<el-radio value="bottomLeft" style="margin: 0; position: absolute; left: 35px; top: 280px">‎</el-radio> aria-label="topLeft"
<el-radio value="bottom" style="margin: 0; position: absolute; left: 195px; top: 280px">‎</el-radio> value="topLeft"
<el-radio value="bottomRight" style="margin: 0; position: absolute; right: 25px; top: 280px">‎</el-radio> class="absolute top-[20%] left-[10%] -translate-x-1/2 -translate-y-1/2" />
</el-radio-group> <RadioGroupItem
id="notificationPosition-top"
aria-label="top"
value="top"
class="absolute top-[20%] left-1/2 -translate-x-1/2 -translate-y-1/2" />
<RadioGroupItem
id="notificationPosition-topRight"
aria-label="topRight"
value="topRight"
class="absolute top-[20%] left-[90%] -translate-x-1/2 -translate-y-1/2" />
<RadioGroupItem
id="notificationPosition-centerLeft"
aria-label="centerLeft"
value="centerLeft"
class="absolute top-1/2 left-[10%] -translate-x-1/2 -translate-y-1/2" />
<RadioGroupItem
id="notificationPosition-center"
aria-label="center"
value="center"
class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2" />
<RadioGroupItem
id="notificationPosition-centerRight"
aria-label="centerRight"
value="centerRight"
class="absolute top-1/2 left-[90%] -translate-x-1/2 -translate-y-1/2" />
<RadioGroupItem
id="notificationPosition-bottomLeft"
aria-label="bottomLeft"
value="bottomLeft"
class="absolute top-[80%] left-[10%] -translate-x-1/2 -translate-y-1/2" />
<RadioGroupItem
id="notificationPosition-bottom"
aria-label="bottom"
value="bottom"
class="absolute top-[80%] left-1/2 -translate-x-1/2 -translate-y-1/2" />
<RadioGroupItem
id="notificationPosition-bottomRight"
aria-label="bottomRight"
value="bottomRight"
class="absolute top-[80%] left-[90%] -translate-x-1/2 -translate-y-1/2" />
</RadioGroup>
</div>
<template #footer> <template #footer>
<div style="display: flex"> <div style="display: flex">
@@ -49,6 +90,7 @@
import { storeToRefs } from 'pinia'; import { storeToRefs } from 'pinia';
import { useI18n } from 'vue-i18n'; import { useI18n } from 'vue-i18n';
import { RadioGroup, RadioGroupItem } from '../../../components/ui/radio-group';
import { useNotificationsSettingsStore } from '../../../stores'; import { useNotificationsSettingsStore } from '../../../stores';
const { t } = useI18n(); const { t } = useI18n();