60 lines
1.1 KiB
Vue
60 lines
1.1 KiB
Vue
<template>
|
|
<q-item
|
|
clickable
|
|
:active="isButtonActive"
|
|
tag="router-link"
|
|
:to="to"
|
|
>
|
|
<q-item-section
|
|
v-if="icon"
|
|
avatar
|
|
>
|
|
<q-icon :name="icon" />
|
|
</q-item-section>
|
|
|
|
<q-item-section>
|
|
<q-item-label>{{ title }}</q-item-label>
|
|
<q-item-label caption>{{ caption }}</q-item-label>
|
|
</q-item-section>
|
|
</q-item>
|
|
</template>
|
|
|
|
<script setup>
|
|
import {computed} from "vue";
|
|
import {useRoute, useRouter} from "vue-router";
|
|
|
|
const props = defineProps({
|
|
title: {
|
|
type: String,
|
|
required: true
|
|
},
|
|
|
|
caption: {
|
|
type: String,
|
|
default: ''
|
|
},
|
|
|
|
to: {
|
|
type: Object,
|
|
required: true
|
|
},
|
|
|
|
icon: {
|
|
type: String,
|
|
default: ''
|
|
}
|
|
});
|
|
|
|
const $route = useRoute();
|
|
const $router = useRouter();
|
|
const isButtonActive = computed(() => {
|
|
const btnResolvedPath = $router.resolve(props.to).path;
|
|
|
|
if (props.to.name === 'myFlights') {
|
|
return $route.name.toLowerCase().includes("flight");
|
|
} else {
|
|
return $route.fullPath === btnResolvedPath || $route.fullPath.startsWith(btnResolvedPath);
|
|
}
|
|
});
|
|
</script>
|