MrUnknownDE/VRCX
1
0
Fork 0
mirror of https://github.com/MrUnknownDE/VRCX.git synced 2026-05-05 14:26:06 +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
src/views/Favorites/FavoritesAvatar.vue
+28 -11
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('');
src/views/Favorites/FavoritesFriend.vue
+26 -9
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('');
src/views/Favorites/FavoritesWorld.vue
+27 -10
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);