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

replace el-slider with Slider component

Browse Source
This commit is contained in:
pa
2026-01-07 21:28:17 +09:00
committed by Natsumi
parent 8d1c3e2927
commit 1566a2bcbf
8 changed files with 205 additions and 53 deletions
Download Patch File Download Diff File Expand all files Collapse all files

56
src/components/ui/slider/Slider.vue Normal file
View File

@@ -0,0 +1,56 @@
<script setup>
import { SliderRange, SliderRoot, SliderThumb, SliderTrack, useForwardPropsEmits } from 'reka-ui';
import { cn } from '@/lib/utils';
import { reactiveOmit } from '@vueuse/core';
const props = defineProps({
defaultValue: { type: Array, required: false },
modelValue: { type: [Array, null], required: false },
disabled: { type: Boolean, required: false },
orientation: { type: String, required: false },
dir: { type: String, required: false },
inverted: { type: Boolean, required: false },
min: { type: Number, required: false },
max: { type: Number, required: false },
step: { type: Number, required: false },
minStepsBetweenThumbs: { type: Number, required: false },
thumbAlignment: { 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', 'valueCommit']);
const delegatedProps = reactiveOmit(props, 'class');
const forwarded = useForwardPropsEmits(delegatedProps, emits);
</script>
<template>
<SliderRoot
v-slot="{ modelValue }"
data-slot="slider"
:class="
cn(
'relative flex w-full touch-none items-center select-none data-[disabled]:opacity-50 data-[orientation=vertical]:h-full data-[orientation=vertical]:min-h-44 data-[orientation=vertical]:w-auto data-[orientation=vertical]:flex-col',
props.class
)
"
v-bind="forwarded">
<SliderTrack
data-slot="slider-track"
class="bg-muted relative grow overflow-hidden rounded-full data-[orientation=horizontal]:h-1.5 data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-1.5">
<SliderRange
data-slot="slider-range"
class="bg-primary absolute data-[orientation=horizontal]:h-full data-[orientation=vertical]:w-full" />
</SliderTrack>
<SliderThumb
v-for="(_, key) in modelValue"
:key="key"
data-slot="slider-thumb"
class="bg-white border-primary ring-ring/50 block size-4 shrink-0 rounded-full border shadow-sm transition-[color,box-shadow] hover:ring-4 focus-visible:ring-4 focus-visible:outline-hidden disabled:pointer-events-none disabled:opacity-50" />
</SliderRoot>
</template>

1
src/components/ui/slider/index.js Normal file
View File

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

34
src/views/Charts/components/InstanceActivity.vue
View File

@@ -33,18 +33,16 @@
</TooltipWrapper>
</div>
</PopoverTrigger>
<PopoverContent side="bottom" class="w-[250px]">
<PopoverContent side="bottom" class="w-62.5">
<div class="settings">
<div>
<span>{{ t('view.charts.instance_activity.settings.bar_width') }}</span>
<div>
<el-slider
v-model.lazy="barWidth"
<Slider
v-model="barWidthDraftValue"
:max="50"
:min="1"
@change="
(value) => changeBarWidth(value, () => handleEchartsRerender())
"></el-slider>
@valueCommit="handleBarWidthCommit"></Slider>
</div>
</div>
<div>
@@ -126,8 +124,8 @@
</template>
<script setup>
import { computed, nextTick, onBeforeMount, onBeforeUnmount, onMounted, ref, watch } from 'vue';
import { ArrowLeft, ArrowRight, InfoFilled, Refresh, Setting, WarningFilled } from '@element-plus/icons-vue';
import { nextTick, onBeforeMount, onBeforeUnmount, onMounted, ref, watch } from 'vue';
import { storeToRefs } from 'pinia';
import { useI18n } from 'vue-i18n';
@@ -136,6 +134,7 @@
import { Popover, PopoverContent, PopoverTrigger } from '../../../components/ui/popover';
import { useAppearanceSettingsStore, useFriendStore, useUserStore } from '../../../stores';
import { parseLocation, timeToText } from '../../../shared/utils';
import { Slider } from '../../../components/ui/slider';
import { Switch } from '../../../components/ui/switch';
import { useActivityDataProcessor } from '../composables/useActivityDataProcessor';
import { useChartHelpers } from '../composables/useChartHelpers';
@@ -194,6 +193,27 @@
changeIsNoFriendInstanceVisible,
handleChangeSettings
} = useInstanceActivitySettings();
const barWidthDraft = ref(barWidth.value);
const barWidthDraftValue = computed({
get: () => [barWidthDraft.value],
set: (value) => {
const next = value?.[0];
if (typeof next === 'number') {
barWidthDraft.value = next;
}
}
});
function handleBarWidthCommit(value) {
changeBarWidth(value?.[0] ?? barWidthDraft.value, () => handleEchartsRerender());
}
watch(
() => barWidth.value,
(value) => {
barWidthDraft.value = value;
}
);
const {
activityData,

39
src/views/Favorites/FavoritesAvatar.vue
View File

@@ -26,13 +26,12 @@
<span>Scale</span>
<span class="favorites-dropdown__control-value">{{ avatarCardScalePercent }}%</span>
</div>
<el-slider
v-model="avatarCardScale"
<Slider
v-model="avatarCardScaleValue"
class="favorites-dropdown__slider"
:min="avatarCardScaleSlider.min"
:max="avatarCardScaleSlider.max"
:step="avatarCardScaleSlider.step"
:show-tooltip="false" />
:step="avatarCardScaleSlider.step" />
</li>
<li class="favorites-dropdown__control" @click.stop>
<div class="favorites-dropdown__control-header">
@@ -41,13 +40,12 @@
{{ avatarCardSpacingPercent }}%
</span>
</div>
<el-slider
v-model="avatarCardSpacing"
<Slider
v-model="avatarCardSpacingValue"
class="favorites-dropdown__slider"
:min="avatarCardSpacingSlider.min"
:max="avatarCardSpacingSlider.max"
:step="avatarCardSpacingSlider.step"
:show-tooltip="false" />
:step="avatarCardSpacingSlider.step" />
</li>
<el-dropdown-item @click="handleAvatarImportClick">
{{ t('view.favorite.import') }}
@@ -106,7 +104,7 @@
circle
@click.stop></el-button>
</PopoverTrigger>
<PopoverContent side="right" class="w-[220px] p-1 rounded-lg">
<PopoverContent side="right" class="w-55 p-1 rounded-lg">
<div class="favorites-group-menu">
<button
type="button"
@@ -220,7 +218,7 @@
circle
@click.stop></el-button>
</PopoverTrigger>
<PopoverContent side="right" class="w-[200px] p-1 rounded-lg">
<PopoverContent side="right" class="w-50 p-1 rounded-lg">
<div class="favorites-group-menu">
<button
type="button"
@@ -284,7 +282,7 @@
<PopoverTrigger asChild>
<el-button text size="small" :icon="MoreFilled" circle @click.stop></el-button>
</PopoverTrigger>
<PopoverContent side="right" class="w-[180px] p-1 rounded-lg">
<PopoverContent side="right" class="w-45 p-1 rounded-lg">
<div class="favorites-group-menu">
<button
type="button"
@@ -493,6 +491,7 @@
import { Popover, PopoverContent, PopoverTrigger } from '../../components/ui/popover';
import { avatarRequest, favoriteRequest } from '../../api';
import { Badge } from '../../components/ui/badge';
import { Slider } from '../../components/ui/slider';
import { Switch } from '../../components/ui/switch';
import { useFavoritesCardScaling } from './composables/useFavoritesCardScaling.js';
@@ -573,6 +572,24 @@
const avatarCardScalePercent = computed(() => Math.round(avatarCardScale.value * 100));
const avatarCardSpacingPercent = computed(() => Math.round(avatarCardSpacing.value * 100));
const avatarCardScaleValue = computed({
get: () => [avatarCardScale.value],
set: (value) => {
const next = value?.[0];
if (typeof next === 'number') {
avatarCardScale.value = next;
}
}
});
const avatarCardSpacingValue = computed({
get: () => [avatarCardSpacing.value],
set: (value) => {
const next = value?.[0];
if (typeof next === 'number') {
avatarCardSpacing.value = next;
}
}
});
const avatarExportDialogVisible = ref(false);
const avatarFavoriteSearch = ref('');

35
src/views/Favorites/FavoritesFriend.vue
View File

@@ -28,13 +28,12 @@
{{ friendCardScalePercent }}%
</span>
</div>
<el-slider
v-model="friendCardScale"
<Slider
v-model="friendCardScaleValue"
class="favorites-dropdown__slider"
:min="friendCardScaleSlider.min"
:max="friendCardScaleSlider.max"
:step="friendCardScaleSlider.step"
:show-tooltip="false" />
:step="friendCardScaleSlider.step" />
</li>
<li class="favorites-dropdown__control" @click.stop>
<div class="favorites-dropdown__control-header">
@@ -43,13 +42,12 @@
{{ friendCardSpacingPercent }}%
</span>
</div>
<el-slider
v-model="friendCardSpacing"
<Slider
v-model="friendCardSpacingValue"
class="favorites-dropdown__slider"
:min="friendCardSpacingSlider.min"
:max="friendCardSpacingSlider.max"
:step="friendCardSpacingSlider.step"
:show-tooltip="false" />
:step="friendCardSpacingSlider.step" />
</li>
<el-dropdown-item @click="handleFriendImportClick">
{{ t('view.favorite.import') }}
@@ -108,7 +106,7 @@
circle
@click.stop></el-button>
</PopoverTrigger>
<PopoverContent side="right" class="w-[220px] p-1 rounded-lg">
<PopoverContent side="right" class="w-55 p-1 rounded-lg">
<div class="favorites-group-menu">
<button
type="button"
@@ -284,6 +282,7 @@
import { Popover, PopoverContent, PopoverTrigger } from '../../components/ui/popover';
import { useAppearanceSettingsStore, useFavoriteStore, useUserStore } from '../../stores';
import { Badge } from '../../components/ui/badge';
import { Slider } from '../../components/ui/slider';
import { Switch } from '../../components/ui/switch';
import { favoriteRequest } from '../../api';
import { useFavoritesCardScaling } from './composables/useFavoritesCardScaling.js';
@@ -339,6 +338,24 @@
const friendCardScalePercent = computed(() => Math.round(friendCardScale.value * 100));
const friendCardSpacingPercent = computed(() => Math.round(friendCardSpacing.value * 100));
const friendCardScaleValue = computed({
get: () => [friendCardScale.value],
set: (value) => {
const next = value?.[0];
if (typeof next === 'number') {
friendCardScale.value = next;
}
}
});
const friendCardSpacingValue = computed({
get: () => [friendCardSpacing.value],
set: (value) => {
const next = value?.[0];
if (typeof next === 'number') {
friendCardSpacing.value = next;
}
}
});
const friendExportDialogVisible = ref(false);
const friendFavoriteSearch = ref('');

37
src/views/Favorites/FavoritesWorld.vue
View File

@@ -28,13 +28,12 @@
{{ worldCardScalePercent }}%
</span>
</div>
<el-slider
v-model="worldCardScale"
<Slider
v-model="worldCardScaleValue"
class="favorites-dropdown__slider"
:min="worldCardScaleSlider.min"
:max="worldCardScaleSlider.max"
:step="worldCardScaleSlider.step"
:show-tooltip="false" />
:step="worldCardScaleSlider.step" />
</li>
<li class="favorites-dropdown__control" @click.stop>
<div class="favorites-dropdown__control-header">
@@ -43,13 +42,12 @@
{{ worldCardSpacingPercent }}%
</span>
</div>
<el-slider
v-model="worldCardSpacing"
<Slider
v-model="worldCardSpacingValue"
class="favorites-dropdown__slider"
:min="worldCardSpacingSlider.min"
:max="worldCardSpacingSlider.max"
:step="worldCardSpacingSlider.step"
:show-tooltip="false" />
:step="worldCardSpacingSlider.step" />
</li>
<el-dropdown-item @click="handleWorldImportClick">
{{ t('view.favorite.import') }}
@@ -108,7 +106,7 @@
circle
@click.stop></el-button>
</PopoverTrigger>
<PopoverContent side="right" class="w-[200px] p-1 rounded-lg">
<PopoverContent side="right" class="w-50 p-1 rounded-lg">
<div class="favorites-group-menu">
<button
type="button"
@@ -222,7 +220,7 @@
circle
@click.stop></el-button>
</PopoverTrigger>
<PopoverContent side="right" class="w-[200px] p-1 rounded-lg">
<PopoverContent side="right" class="w-50 p-1 rounded-lg">
<div class="favorites-group-menu">
<button
type="button"
@@ -412,6 +410,7 @@
import { useAppearanceSettingsStore, useFavoriteStore, useWorldStore } from '../../stores';
import { favoriteRequest, worldRequest } from '../../api';
import { Badge } from '../../components/ui/badge';
import { Slider } from '../../components/ui/slider';
import { Switch } from '../../components/ui/switch';
import { useFavoritesCardScaling } from './composables/useFavoritesCardScaling.js';
@@ -485,6 +484,24 @@
const worldCardScalePercent = computed(() => Math.round(worldCardScale.value * 100));
const worldCardSpacingPercent = computed(() => Math.round(worldCardSpacing.value * 100));
const worldCardScaleValue = computed({
get: () => [worldCardScale.value],
set: (value) => {
const next = value?.[0];
if (typeof next === 'number') {
worldCardScale.value = next;
}
}
});
const worldCardSpacingValue = computed({
get: () => [worldCardSpacing.value],
set: (value) => {
const next = value?.[0];
if (typeof next === 'number') {
worldCardSpacing.value = next;
}
}
});
const worldGroupVisibilityOptions = ref(['public', 'friends', 'private']);
const worldSplitterSize = ref(260);

35
src/views/FriendsLocations/FriendsLocations.vue
View File

@@ -19,7 +19,7 @@
</TooltipWrapper>
</div>
</PopoverTrigger>
<PopoverContent side="bottom" class="w-[350px]">
<PopoverContent side="bottom" class="w-87.5">
<div style="display: flex; justify-content: space-between; align-items: center">
<span class="friend-view__settings-label">{{
t('view.friends_locations.separate_same_instance_friends')
@@ -30,26 +30,24 @@
<span class="friend-view__settings-label">{{ t('view.friends_locations.scale') }}</span>
<div class="friend-view__scale-control">
<span class="friend-view__scale-value">{{ cardScalePercentLabel }}&nbsp;</span>
<el-slider
v-model="cardScale"
<Slider
v-model="cardScaleValue"
class="friend-view__slider"
:min="0.5"
:max="1.0"
:step="0.01"
:show-tooltip="false" />
:step="0.01" />
</div>
</div>
<div class="friend-view__settings-row">
<span class="friend-view__settings-label">{{ t('view.friends_locations.spacing') }}</span>
<div class="friend-view__scale-control">
<span class="friend-view__scale-value">{{ cardSpacingPercentLabel }}&nbsp;</span>
<el-slider
v-model="cardSpacing"
<Slider
v-model="cardSpacingValue"
class="friend-view__slider"
:min="0.25"
:max="1.0"
:step="0.05"
:show-tooltip="false" />
:step="0.05" />
</div>
</div>
</PopoverContent>
@@ -170,6 +168,7 @@
import { useI18n } from 'vue-i18n';
import { Popover, PopoverContent, PopoverTrigger } from '../../components/ui/popover';
import { Slider } from '../../components/ui/slider';
import { Switch } from '../../components/ui/switch';
import { getFriendsLocations } from '../../shared/utils/location.js';
import { useFriendStore } from '../../stores';
@@ -218,6 +217,24 @@
const cardScalePercentLabel = computed(() => `${Math.round(cardScale.value * 100)}%`);
const cardSpacingPercentLabel = computed(() => `${Math.round(cardSpacing.value * 100)}%`);
const cardScaleValue = computed({
get: () => [cardScale.value],
set: (value) => {
const next = value?.[0];
if (typeof next === 'number') {
cardScale.value = next;
}
}
});
const cardSpacingValue = computed({
get: () => [cardSpacing.value],
set: (value) => {
const next = value?.[0];
if (typeof next === 'number') {
cardSpacing.value = next;
}
}
});
const showSameInstanceBase = ref(false);

21
src/views/Settings/components/Tabs/NotificationsTab.vue
View File

@@ -77,12 +77,9 @@
<span class="name" style="vertical-align: top; padding-top: 10px">{{
t('view.settings.notifications.notifications.steamvr_notifications.notification_opacity')
}}</span>
<el-slider
:model-value="notificationOpacity"
@input="setNotificationOpacity"
:min="0"
:max="100"
style="display: inline-block; width: 300px; padding-top: 16px" />
<div style="flex: 0 0 300px; width: 300px; max-width: 100%; padding-top: 16px">
<Slider v-model="notificationOpacityValue" :min="0" :max="100" />
</div>
</div>
<div class="options-container-item">
<el-button
@@ -162,7 +159,7 @@
:model-value="desktopToast"
size="small"
style="margin-top: 5px"
@change="setDesktopToast($event)">
@change="setDesktopToast(String($event))">
<el-radio-button value="Never">{{
t('view.settings.notifications.notifications.conditions.never')
}}</el-radio-button>
@@ -274,6 +271,7 @@
import { useI18n } from 'vue-i18n';
import { useAdvancedSettingsStore, useNotificationsSettingsStore, useVrStore } from '../../../../stores';
import { Slider } from '../../../../components/ui/slider';
import FeedFiltersDialog from '../../dialogs/FeedFiltersDialog.vue';
import NotificationPositionDialog from '../../dialogs/NotificationPositionDialog.vue';
@@ -327,6 +325,15 @@
const feedFiltersDialogMode = ref('');
const isNotificationPositionDialogVisible = ref(false);
const isLinux = computed(() => LINUX);
const notificationOpacityValue = computed({
get: () => [notificationOpacity.value],
set: (value) => {
const next = value?.[0];
if (typeof next === 'number') {
setNotificationOpacity(next);
}
}
});
function showNotyFeedFiltersDialog() {
feedFiltersDialogMode.value = 'noty';