67 lines
1.5 KiB
Vue
67 lines
1.5 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: "basic", icon: "flight_takeoff", label: "Základní informace"},
|
|
{name: "copilot", icon: "person_add", label: "Spolucestující"},
|
|
{name: "track", icon: "route", label: "Trasa"},
|
|
{name: "photos", icon: "add_a_photo", label: "Fotky"},
|
|
{name: "notes", icon: "edit_note", label: "Poznámky"},
|
|
];
|
|
|
|
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">
|
|
<q-route-tab
|
|
v-for="step in steps"
|
|
:key="step.name"
|
|
:icon="step.icon"
|
|
:label="step.label"
|
|
replace
|
|
:to="{name: 'flightEdit', params: {id: flightId, step: step.name}}"
|
|
: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>
|