Refactor LongPressListener to use computed props for safer reactivity and simplify MobileHeader path check logic with optional chaining adjustments.

This commit is contained in:
Jeppe Bundgaard
2026-03-04 14:55:43 +01:00
parent 88a2361ccc
commit 15d1cd8558
2 changed files with 6 additions and 26 deletions
@@ -1,5 +1,5 @@
<script setup>
import {ref, defineEmits, defineProps, onMounted, onBeforeUnmount, watch} from 'vue';
import {ref, computed, defineEmits, defineProps, onBeforeUnmount} from 'vue';
const props = defineProps({
style: {
@@ -46,28 +46,9 @@ const onLongPress = () => {
console.warn('Long press detected');
}
// When the parent component passes down a style object, use it
const styleFromParent = ref(props.style);
const classesFromParent = ref(props.class);
onMounted(() => {
styleFromParent.value = props.style;
classesFromParent.value = props.class;
});
onBeforeUnmount(() => {
clearTimeout(timerId.value);
});
watch(() => props.style, (newStyle) => {
styleFromParent.value = newStyle;
});
watch(() => props.class, (newClass) => {
classesFromParent.value = newClass;
})
const wrapper = ref(null);
// Forward props reactively and safely
const styleFromParent = computed(() => props.style ?? {});
const classesFromParent = computed(() => props.class ?? []);
</script>
@@ -75,8 +56,7 @@ const wrapper = ref(null);
<template>
<div @pointerdown="pointerDown" @pointerup="pointerUp" @pointerleave="pointerLeave"
:style="styleFromParent"
:class="classesFromParent"
ref="wrapper">
:class="classesFromParent">
<slot v-bind="$attrs"/>
</div>
</template>
@@ -70,7 +70,7 @@ const showProfile = computed(() => {
</router-link>
<!-- Return to own account if impersonating -->
<template v-if="SessionUser.hasSuperUserToken()">
<router-link class="button is-white" to="/auth/return" :class="{'pl-1': SessionUser.canAccessAdmin() && !route.path.includes('/admin')}">
<router-link class="button is-white" to="/auth/return" :class="{'pl-1': SessionUser.canAccessAdmin() && !(route?.path || '').includes('/admin')}">
<span class="icon">
<i class="fas fa-undo-alt" :class="{'transform-color-black': !IS_DEV, 'transform-color-red': IS_DEV}"></i>
</span>