51 lines
1.4 KiB
Vue
51 lines
1.4 KiB
Vue
<template>
|
|
<!--
|
|
ChatRoot
|
|
--------
|
|
Root-component voor de chatclient. Deze component zorgt ervoor dat er
|
|
altijd precies één SafeViewport-wrapper is rond de gekozen Shell
|
|
(DesktopChatShell, MobileChatShell, ...).
|
|
|
|
De daadwerkelijke shell-component en zijn props worden vanuit
|
|
chat-client.js doorgegeven via de props shellComponent en shellProps.
|
|
-->
|
|
<SafeViewport>
|
|
<component :is="shellComponent" v-bind="shellProps" />
|
|
</SafeViewport>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { computed } from 'vue';
|
|
import SafeViewport from './SafeViewport.vue';
|
|
import DesktopChatShell from './DesktopChatShell.vue';
|
|
import MobileChatShell from './MobileChatShell.vue';
|
|
|
|
const props = defineProps({
|
|
shellComponent: {
|
|
type: [Object, Function, String],
|
|
default: null
|
|
},
|
|
shellProps: {
|
|
type: Object,
|
|
default: () => ({})
|
|
}
|
|
});
|
|
|
|
// Fallbacks voor het geval chat-client.js geen shellComponent meegeeft.
|
|
const resolvedShellComponent = computed(() => {
|
|
if (props.shellComponent) {
|
|
return props.shellComponent;
|
|
}
|
|
|
|
// Eenvoudige fallback: gebruik DesktopShell op brede schermen,
|
|
// MobileShell op smalle schermen.
|
|
if (typeof window !== 'undefined' && window.innerWidth <= 768) {
|
|
return MobileChatShell;
|
|
}
|
|
return DesktopChatShell;
|
|
});
|
|
|
|
const shellComponent = resolvedShellComponent;
|
|
const shellProps = props.shellProps;
|
|
</script>
|