LayoutTest.vue 1.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051
  1. <!-- Copyright (C) 2012-2024 Zammad Foundation, https://zammad-foundation.org/ -->
  2. <script setup lang="ts">
  3. import { headerOptions as header } from '#mobile/composables/useHeader.ts'
  4. import { computed, unref } from 'vue'
  5. import { useRoute } from 'vue-router'
  6. import LayoutHeader from '#mobile/components/layout/LayoutHeader.vue'
  7. import CommonNotifications from '#shared/components/CommonNotifications/CommonNotifications.vue'
  8. import DynamicInitializer from '#shared/components/DynamicInitializer/DynamicInitializer.vue'
  9. import useAuthenticationChanges from '#shared/composables/authentication/useAuthenticationUpdates.ts'
  10. import CommonConfirmation from '#mobile/components/CommonConfirmation/CommonConfirmation.vue'
  11. import CommonImageViewer from '#shared/components/CommonImageViewer/CommonImageViewer.vue'
  12. defineProps<{ testKey: number }>()
  13. const route = useRoute()
  14. const title = computed(() => {
  15. return unref(header.value.title) || route.meta.title
  16. })
  17. const showHeader = computed(() => {
  18. return route.meta.hasHeader
  19. })
  20. const hasOwnLandmarks = computed(() => {
  21. return route.meta.hasOwnLandmarks
  22. })
  23. const mainContainer = computed(() => (hasOwnLandmarks.value ? 'div' : 'main'))
  24. const footerContainer = computed(() =>
  25. hasOwnLandmarks.value ? 'div' : 'footer',
  26. )
  27. useAuthenticationChanges()
  28. </script>
  29. <template>
  30. <div>
  31. <LayoutHeader v-if="showHeader" v-bind="header" :title="title" />
  32. <component :is="mainContainer" data-test-id="appMain">
  33. <RouterView :key="testKey" />
  34. </component>
  35. <component :is="footerContainer" data-bottom-navigation />
  36. <DynamicInitializer name="dialog" />
  37. <CommonNotifications />
  38. <CommonImageViewer />
  39. <CommonConfirmation />
  40. </div>
  41. </template>