MrUnknownDE/VRCX
1
0
Fork 0
mirror of https://github.com/MrUnknownDE/VRCX.git synced 2026-04-16 13:23:52 +02:00
Code Issues Packages Projects Releases Wiki Activity

use vueuse

Browse Source
This commit is contained in:
pa
2026-03-15 21:17:02 +09:00
parent 8624ac20fa
commit 9e0116fce7
9 changed files with 48 additions and 199 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
src/components/FullscreenImagePreview.vue
View File

@@ -97,7 +97,8 @@
<script setup>
import { Copy, Download, RefreshCcw, RotateCcw, RotateCw, X, ZoomIn, ZoomOut } from 'lucide-vue-next';
import { computed, onBeforeUnmount, onMounted, ref, watch } from 'vue';
import { useEventListener } from '@vueuse/core';
import { computed, onBeforeUnmount, ref, watch } from 'vue';
import { DialogContent as RekaDialogContent, DialogOverlay as RekaDialogOverlay, DialogPortal } from 'reka-ui';
import { Button } from '@/components/ui/button';
import { Dialog } from '@/components/ui/dialog';
@@ -285,8 +286,7 @@
else if (e.key.toLowerCase() === 'r') rotateCW();
else if (e.key === '0') resetTransform();
}
onMounted(() => window.addEventListener('keydown', onKeydown));
onBeforeUnmount(() => window.removeEventListener('keydown', onKeydown));
useEventListener(window, 'keydown', onKeydown);
async function copyImageToClipboard(url) {
if (!url) return;

15
src/components/Timer.vue
View File

@@ -2,7 +2,8 @@
<span>{{ text }}</span>
</template>
<script setup>
import { computed, onBeforeUnmount, onMounted, ref } from 'vue';
import { useNow } from '@vueuse/core';
import { computed } from 'vue';
import { timeToText } from '../shared/utils';
@@ -13,18 +14,8 @@
}
});
const now = ref(Date.now());
const now = useNow({ interval: 15000 });
const text = computed(() => {
return props.epoch ? timeToText(now.value - props.epoch) : '-';
});
let timerId = null;
onMounted(() => {
timerId = setInterval(() => {
now.value = Date.now();
}, 15000);
});
onBeforeUnmount(() => {
clearInterval(timerId);
});
</script>

27
src/components/nav-menu/composables/useNavLayout.js
View File

@@ -1,4 +1,5 @@
import { computed, onMounted, onUnmounted, ref, watch } from 'vue';
import { useEventListener } from '@vueuse/core';
import { computed, ref, watch } from 'vue';
import configRepository from '../../../services/config';
import {
@@ -312,25 +313,11 @@ export function useNavLayout({
await loadNavMenuConfig();
};
onMounted(() => {
if (typeof window === 'undefined') {
return;
}
window.addEventListener(
NAV_LAYOUT_UPDATED_EVENT,
handleExternalNavLayoutUpdate
);
});
onUnmounted(() => {
if (typeof window === 'undefined') {
return;
}
window.removeEventListener(
NAV_LAYOUT_UPDATED_EVENT,
handleExternalNavLayoutUpdate
);
});
useEventListener(
typeof window !== 'undefined' ? window : undefined,
NAV_LAYOUT_UPDATED_EVENT,
handleExternalNavLayoutUpdate
);
return {
navLayout,

24
src/composables/useToolNavPinning.js
View File

@@ -1,4 +1,5 @@
import { computed, onMounted, onUnmounted, ref } from 'vue';
import { useEventListener } from '@vueuse/core';
import { computed, ref } from 'vue';
import { useI18n } from 'vue-i18n';
import { toast } from 'vue-sonner';
@@ -243,22 +244,11 @@ export function useToolNavPinning() {
dispatchNavLayoutUpdated();
};
onMounted(() => {
if (typeof window === 'undefined') {
return;
}
window.addEventListener(NAV_LAYOUT_UPDATED_EVENT, refreshPinnedState);
});
onUnmounted(() => {
if (typeof window === 'undefined') {
return;
}
window.removeEventListener(
NAV_LAYOUT_UPDATED_EVENT,
refreshPinnedState
);
});
useEventListener(
typeof window !== 'undefined' ? window : undefined,
NAV_LAYOUT_UPDATED_EVENT,
refreshPinnedState
);
return {
pinnedToolKeys: computed(() => pinnedToolKeysRef.value),

18
src/views/Charts/components/MutualFriends.vue
View File

@@ -244,6 +244,7 @@
<script setup>
defineOptions({ name: 'ChartsMutual' });
import { useLocalStorage } from '@vueuse/core';
import { computed, nextTick, onBeforeUnmount, onMounted, reactive, ref, watch } from 'vue';
import { Sheet, SheetContent, SheetHeader, SheetTitle, SheetTrigger } from '@/components/ui/sheet';
import { Field, FieldContent, FieldGroup, FieldLabel } from '@/components/ui/field';
@@ -516,24 +517,9 @@
const selectedFriendId = ref(null);
const EXCLUDED_FRIENDS_KEY = 'VRCX_MutualGraphExcludedFriends';
const excludedFriendIds = ref(loadExcludedFriends());
function loadExcludedFriends() {
try {
const stored = localStorage.getItem(EXCLUDED_FRIENDS_KEY);
if (stored) return JSON.parse(stored);
} catch {
/* ignore */
}
return [];
}
function saveExcludedFriends() {
localStorage.setItem(EXCLUDED_FRIENDS_KEY, JSON.stringify(excludedFriendIds.value));
}
const excludedFriendIds = useLocalStorage(EXCLUDED_FRIENDS_KEY, []);
watch(excludedFriendIds, async () => {
saveExcludedFriends();
if (lastMutualMap) {
try {
await applyGraph(lastMutualMap);

51
src/views/Favorites/composables/useFavoritesCardScaling.js
View File

@@ -2,10 +2,10 @@ import {
computed,
nextTick,
onBeforeMount,
onBeforeUnmount,
ref,
watch
} from 'vue';
import { useResizeObserver } from '@vueuse/core';
import configRepository from '../../../services/config.js';
@@ -58,9 +58,6 @@ export function useFavoritesCardScaling(options = {}) {
const containerRef = ref(null);
const containerWidth = ref(0);
let resizeObserver;
let cleanupWindowResize;
const updateContainerWidth = (el = containerRef.value) => {
const element = el ?? containerRef.value;
if (!element) {
@@ -73,17 +70,6 @@ export function useFavoritesCardScaling(options = {}) {
);
};
const disconnectResizeObserver = () => {
if (resizeObserver) {
resizeObserver.disconnect();
resizeObserver = undefined;
}
if (cleanupWindowResize) {
cleanupWindowResize();
cleanupWindowResize = undefined;
}
};
const cardScale = computed({
get: () => cardScaleBase.value,
set: (value) => {
@@ -212,46 +198,21 @@ export function useFavoritesCardScaling(options = {}) {
watch(
containerRef,
(element) => {
disconnectResizeObserver();
if (!element) {
containerWidth.value = 0;
return;
}
nextTick(() => updateContainerWidth(element));
if (typeof ResizeObserver !== 'undefined') {
const observedElement = element;
resizeObserver = new ResizeObserver((entries) => {
if (!entries?.length) {
return;
}
const [entry] = entries;
const width =
entry.contentRect?.width ??
observedElement?.clientWidth ??
0;
containerWidth.value = Math.max(width, 0);
});
resizeObserver.observe(element);
return;
}
if (typeof window !== 'undefined') {
const handleResize = () => updateContainerWidth(element);
window.addEventListener('resize', handleResize, {
passive: true
});
cleanupWindowResize = () => {
window.removeEventListener('resize', handleResize);
};
}
},
{ immediate: true }
);
onBeforeUnmount(() => {
disconnectResizeObserver();
useResizeObserver(containerRef, (entries) => {
const [entry] = entries;
const width =
entry?.contentRect?.width ?? containerRef.value?.clientWidth ?? 0;
containerWidth.value = Math.max(width, 0);
});
onBeforeMount(async () => {

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

@@ -138,7 +138,8 @@
</template>
<script setup>
import { computed, nextTick, onBeforeMount, onBeforeUnmount, onMounted, reactive, ref, watch } from 'vue';
import { useResizeObserver } from '@vueuse/core';
import { computed, nextTick, onBeforeMount, onMounted, reactive, ref, watch } from 'vue';
import { ChevronDown, Loader2, Settings } from 'lucide-vue-next';
import { Field, FieldContent, FieldLabel } from '@/components/ui/field';
import { Tabs, TabsList, TabsTrigger } from '@/components/ui/tabs';
@@ -262,8 +263,6 @@
const gridWidth = ref(0);
let measureScheduled = false;
let pendingGridWidthUpdate = false;
let resizeObserver;
let cleanupResize;
const updateGridWidth = () => {
const wrap = scrollbarRef.value;
@@ -275,45 +274,19 @@
};
const setupResizeHandling = () => {
if (cleanupResize) {
cleanupResize();
cleanupResize = undefined;
}
const wrap = scrollbarRef.value;
if (!wrap) {
return;
}
updateGridWidth();
if (typeof ResizeObserver !== 'undefined') {
resizeObserver = new ResizeObserver((entries) => {
if (!entries || entries.length === 0) {
return;
}
const [entry] = entries;
gridWidth.value = entry.contentRect?.width ?? wrap.clientWidth ?? 0;
});
resizeObserver.observe(wrap);
cleanupResize = () => {
resizeObserver?.disconnect();
resizeObserver = undefined;
};
return;
}
if (typeof window !== 'undefined') {
const handleResize = () => {
updateGridWidth();
};
window.addEventListener('resize', handleResize, { passive: true });
cleanupResize = () => {
window.removeEventListener('resize', handleResize);
};
}
};
useResizeObserver(scrollbarRef, (entries) => {
const [entry] = entries;
gridWidth.value = entry?.contentRect?.width ?? scrollbarRef.value?.clientWidth ?? 0;
});
const normalizedSearchTerm = computed(() => searchTerm.value.trim().toLowerCase());
const toEntries = (list = [], instanceId) =>
@@ -905,13 +878,6 @@
});
});
onBeforeUnmount(() => {
if (cleanupResize) {
cleanupResize();
cleanupResize = undefined;
}
});
/**
*
*/

47
src/views/MyAvatars/composables/useAvatarCardGrid.js
View File

@@ -2,10 +2,10 @@ import {
computed,
nextTick,
onBeforeMount,
onBeforeUnmount,
ref,
watch
} from 'vue';
import { useResizeObserver } from '@vueuse/core';
import configRepository from '../../../services/config.js';
@@ -47,9 +47,6 @@ export function useAvatarCardGrid(options = {}) {
const gridContainerRef = ref(null);
const containerWidth = ref(0);
let resizeObserver;
let cleanupResize;
const updateContainerWidth = (el) => {
const element = el ?? gridContainerRef.value;
if (!element) {
@@ -62,17 +59,6 @@ export function useAvatarCardGrid(options = {}) {
);
};
const disconnectResize = () => {
if (resizeObserver) {
resizeObserver.disconnect();
resizeObserver = undefined;
}
if (cleanupResize) {
cleanupResize();
cleanupResize = undefined;
}
};
const cardScale = computed({
get: () => cardScaleBase.value,
set: (value) => {
@@ -207,39 +193,22 @@ export function useAvatarCardGrid(options = {}) {
watch(
gridContainerRef,
(element) => {
disconnectResize();
if (!element) {
containerWidth.value = 0;
return;
}
nextTick(() => updateContainerWidth(element));
if (typeof ResizeObserver !== 'undefined') {
resizeObserver = new ResizeObserver((entries) => {
if (!entries?.length) return;
const [entry] = entries;
containerWidth.value = Math.max(
entry.contentRect?.width ?? element.clientWidth ?? 0,
0
);
});
resizeObserver.observe(element);
return;
}
if (typeof window !== 'undefined') {
const handleResize = () => updateContainerWidth(element);
window.addEventListener('resize', handleResize, {
passive: true
});
cleanupResize = () =>
window.removeEventListener('resize', handleResize);
}
},
{ immediate: true }
);
onBeforeUnmount(() => disconnectResize());
useResizeObserver(gridContainerRef, (entries) => {
const [entry] = entries;
containerWidth.value = Math.max(
entry?.contentRect?.width ?? gridContainerRef.value?.clientWidth ?? 0,
0
);
});
onBeforeMount(async () => {
try {

11
src/views/Tools/ScreenshotMetadata.vue
View File

@@ -148,7 +148,8 @@
<script setup>
import { Select, SelectContent, SelectGroup, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
import { Carousel, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious } from '@/components/ui/carousel';
import { onBeforeUnmount, onMounted, reactive, ref } from 'vue';
import { useEventListener } from '@vueuse/core';
import { onMounted, reactive, ref } from 'vue';
import { useGalleryStore, useUserStore, useVrcxStore } from '@/stores';
import { ArrowLeft } from 'lucide-vue-next';
import { Badge } from '@/components/ui/badge';
@@ -198,11 +199,6 @@
if (!screenshotMetadataDialog.metadata.filePath) {
getAndDisplayLastScreenshot();
}
window.addEventListener('keyup', handleComponentKeyup);
});
onBeforeUnmount(() => {
window.removeEventListener('keyup', handleComponentKeyup);
});
const handleComponentKeyup = (event) => {
@@ -220,6 +216,9 @@
}
};
useEventListener(window, 'keyup', handleComponentKeyup);
/**
*
*/