ApartmentCapture.vue

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

import TabComponent from '@/components/TabComponent.vue'
import ApartmentHeatingForm from '@/components/forms/ApartmentHeatingForm.vue'
import WindowForm from '@/components/forms/WindowForm.vue'

const activeTab = ref('windows')

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

<template>
  <div class="apartment-capture">
    <TabComponent :active="activeTab" :tabs="[
      { key: 'windows', value: 'windows', name: 'Fenster' },
      { key: 'apartment', value: 'apartment', name: 'Wohnung' }
    ]" @on-tab-select="setActiveTab" />
    <div class="apartment-capture__content">
      <WindowForm v-if="activeTab === 'windows'" />
      <ApartmentHeatingForm v-else-if="activeTab === 'apartment'" />
    </div>
  </div>
</template>

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

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

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