45 lines
877 B
Vue
45 lines
877 B
Vue
<template>
|
|
<div class="strapi-map">
|
|
<component
|
|
v-for="item in items"
|
|
v-bind="item"
|
|
:is="MAP[item.__component]"
|
|
:desktopSize="mediaDS"
|
|
:mobileSize="mediaMS"
|
|
/>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import Copy from './Copy.vue'
|
|
import Diptych from './Diptych.vue'
|
|
import EmbeddedVideo from './EmbeddedVideo.vue'
|
|
import Media from './Media.vue'
|
|
|
|
const MAP = {
|
|
'global.copy': Copy,
|
|
'global.media': Media,
|
|
'global.dipytch': Diptych,
|
|
'global.embedded-video': EmbeddedVideo,
|
|
}
|
|
|
|
const props = defineProps({
|
|
items: Array,
|
|
mediaDS: String,
|
|
mediaMS: String,
|
|
})
|
|
|
|
console.log(props.items)
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
.strapi-map {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: desktop-vw(30px);
|
|
|
|
@include mobile() {
|
|
gap: mobile-vw(30px);
|
|
}
|
|
}
|
|
</style>
|