BuildingCapture.vue

<script setup>
import { ref } from 'vue'

import TabComponent from '@/components/TabComponent.vue'
import CharacteristicsForm from '@/components/forms/CharacteristicsForm.vue'
import HeatingForm from '@/components/forms/HeatingForm.vue'
import FacadeForm from '@/components/forms/FacadeForm.vue'
import RoofForm from '@/components/forms/RoofForm.vue'
import BasementForm from '@/components/forms/BasementForm.vue'

const activeTab = ref('characteristics')

function setActiveTab(value) {
  activeTab.value = value
}
</script>

<template>
  <div class="building-capture">
    <TabComponent :active="activeTab" :tabs="[
      { key: 'characteristics', value: 'characteristics', name: 'Allgemein' },
      { key: 'heating', value: 'heating', name: 'Heizung' },
      { key: 'facade', value: 'facade', name: 'Fassade' },
      { key: 'roof', value: 'roof', name: 'Dach' },
      { key: 'basement', value: 'basement', name: 'Keller' }
    ]" @on-tab-select="setActiveTab" />
    <div class="building-capture__content">
      <CharacteristicsForm v-if="activeTab === 'characteristics'" />
      <HeatingForm v-else-if="activeTab === 'heating'" />
      <FacadeForm v-else-if="activeTab === 'facade'" />
      <RoofForm v-else-if="activeTab === 'roof'" />
      <BasementForm v-else-if="activeTab === 'basement'" />
    </div>
  </div>
</template>

<style scoped>
.building-capture {
  display: flex;
  flex-direction: column;
}

@media (min-width: 48em) {
  .building-capture {
    overflow: hidden;
    height: 100%;
  }
}

.building-capture__content {
  overflow: hidden;
  flex: 1;
  display: flex;
  flex-direction: column;
}
</style>