72 lines
1.6 KiB
Vue
72 lines
1.6 KiB
Vue
<script setup>
|
|
import {onMounted, ref, watch} from "vue";
|
|
|
|
const props = defineProps({
|
|
modelValue: String,
|
|
disabled: {
|
|
type: Array,
|
|
required: false,
|
|
default: () => []
|
|
},
|
|
routerEditMode: {
|
|
type: Boolean,
|
|
required: false,
|
|
default: false,
|
|
},
|
|
flightId: {
|
|
type: Number,
|
|
required: false,
|
|
}
|
|
})
|
|
|
|
const currentStep = ref("");
|
|
onMounted(() => {
|
|
currentStep.value = props.modelValue;
|
|
})
|
|
|
|
const steps = [
|
|
{name: "editFlightBasic", icon: "flight_takeoff", label: "Základní informace"},
|
|
{name: "editFlightTrack", icon: "route", label: "Trasa"},
|
|
{name: "editFlightPhotos", icon: "add_a_photo", label: "Fotky"},
|
|
{name: "editFlightNotes", icon: "edit_note", label: "Poznámky"},
|
|
{name: "editFlightSetPlan", icon: "pin_drop", label: "Plán"},
|
|
];
|
|
|
|
const emit = defineEmits(["update:modelValue"])
|
|
watch(currentStep, (val) => emit("update:modelValue", val));
|
|
</script>
|
|
|
|
<template>
|
|
<q-tabs
|
|
v-if="routerEditMode"
|
|
active-color="primary"
|
|
class="q-mb-lg"
|
|
left-icon="chevron_left"
|
|
right-icon="chevron_right"
|
|
>
|
|
<q-route-tab
|
|
v-for="step in steps"
|
|
:key="step.name"
|
|
:icon="step.icon"
|
|
:label="step.label"
|
|
replace
|
|
:to="{name: step.name, params: {id: flightId}}"
|
|
:disable="disabled.includes(step.name)"
|
|
exact
|
|
/>
|
|
</q-tabs>
|
|
|
|
<q-tabs
|
|
v-else
|
|
v-model="currentStep"
|
|
outside-arrows
|
|
mobile-arrows
|
|
left-icon="chevron_left"
|
|
right-icon="chevron_right"
|
|
active-color="primary"
|
|
class="q-mb-lg"
|
|
>
|
|
<q-tab v-for="step in steps" :key="step.name" v-bind="step" :disable="disabled.includes(step.name)"/>
|
|
</q-tabs>
|
|
</template>
|