Fix/cms three columns

packages/default-theme/components/cms/cmsNameMapper.js

@@ -1,19 +1,45 @@
 const slotsMap = {
-  "product-box": "CmsSwProductCart",
-  "product-slider": "SwProductSlider",
-  image: "SwImage",
-  text: "SwTextSlot",
-  "vimeo-video": "SwVimeoVideo",
-  "youtube-video": "SwYoutubeVideo",
-  "product-listing": "SwProductListingSlot",
-  "category-navigation": "SwCategoryNavigationSlot", // waiting for navigation hydration, and domething wrong with accordion
-  "sidebar-filter": "SwCategorySidebarFilter"
-};
+  'product-box': 'CmsSwProductCart',
+  'product-slider': 'SwProductSlider',
+  image: 'SwImage',
+  text: 'SwTextSlot',
+  'vimeo-video': 'SwVimeoVideo',
+  'youtube-video': 'SwYoutubeVideo',
+  'product-listing': 'SwProductListingSlot',
+  'category-navigation': 'SwCategoryNavigationSlot', // waiting for navigation hydration, and domething wrong with accordion
+  'sidebar-filter': 'SwCategorySidebarFilter',
+  'image-bubble-row': 'SwImageBubbleRow'
+}
+
+const excludedSlots = ['image-bubble-row']
 
 export function getComponentBy(content) {
-  if (!content) return;
-  const isSlot = !!content.slot;
-  let componentName = isSlot ? slotsMap[content.type] : "SwSlots";
-  if (!componentName) componentName = "SwNoComponent";
-  return () => import(`@shopware-pwa/default-theme/components/cms/elements/${componentName}`);
+  if (!content) return
+  const isSlot =
+    !!content.slot || !!excludedSlots.find(slot => slot === content.type)
+  let componentName = isSlot ? slotsMap[content.type] : 'SwSlots'
+  if (!componentName) componentName = 'SwNoComponent'
+  return () =>
+    import(
+      `@shopware-pwa/default-theme/components/cms/elements/${componentName}`
+    )
+}
+
+export const setContentOrder = content => {
+  const newContent = JSON.parse(JSON.stringify(content))
+  const slotsArr = []
+  newContent.slots.forEach(slot => {
+    switch (slot.slot) {
+      case 'left':
+        slotsArr[0] = slot
+        break
+      case 'right':
+        slotsArr[2] = slot
+        break
+      default:
+        slotsArr[1] = slot
+    }
+  })
+  newContent.slots = slotsArr
+  return newContent
 }

packages/default-theme/components/cms/elements/SwImage.vue

@@ -45,8 +45,4 @@ export default {
   display: flex;
   justify-content: center;
 }
-
-::v-deep .sf-image__img {
-  width: 100%;
-}
 </style>

packages/default-theme/components/cms/elements/SwImageBubbleRow.vue

@@ -0,0 +1,53 @@
+<template>
+  <div class="sw-image-bubble-row">
+    <SwImage v-for="image in slots.slots" :key="image.id" :content="image"/>
+  </div>
+</template>
+
+<script>
+import SwImage from "./SwImage";
+import { setContentOrder } from "../cmsNameMapper";
+import { reactive } from "@vue/composition-api";
+
+export default {
+  name: 'SwImageBubbleRow',
+  components: {
+    SwImage,
+  },
+  props: {
+    content: {
+      type: Object,
+      default: () => ({})
+    }
+  },
+  setup(props) {
+    const slots = reactive(setContentOrder(props.content))
+    return {slots}
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+@import '~@storefront-ui/vue/styles.scss';
+
+.sw-image-bubble-row {
+  display: flex;
+  flex-direction: column;
+  margin: var(--spacer-extra-big) 0;
+
+  @include for-desktop {
+    flex-direction: row;
+    justify-content: space-around;
+  }
+}
+::v-deep .sf-image {
+  border-radius: 50%;
+  margin: var(--spacer-small);
+  & img {
+    height: 300px;
+    width: 300px;
+    object-fit: cover;
+  }
+
+}
+</style>

packages/default-theme/pages/_.vue

@@ -52,10 +52,6 @@ export default {
       cmsPage
     }
   },
-  data() {
-    return {
-    }
-  },
   computed: {
     getComponent() {
       return this.page && getComponentBy(this.page.resourceType);