Refactor LongPressListener to use computed props for safer reactivity and simplify MobileHeader path check logic with optional chaining adjustments.
This commit is contained in:
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user