feat(cms): cms three columns element (#500)

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);