@shopware/cms-base-layer 0.0.0-canary-20250116171244

package/components/public/cms/block/CmsBlockImageTextGallery.vue

@@ -0,0 +1,85 @@
+<script setup lang="ts">
+import type {
+  CmsBlockImageTextGallery,
+  CmsElementImage,
+  CmsElementText,
+} from "@shopware/composables";
+import { useCmsBlock } from "#imports";
+import type { Schemas } from "#shopware";
+
+const props = defineProps<{
+  content: CmsBlockImageTextGallery;
+}>();
+
+const { getSlotContent } = useCmsBlock(props.content);
+
+const leftTextContent = getSlotContent("left-text") as CmsElementText;
+const rightTextContent = getSlotContent("right-text") as CmsElementText;
+const centerTextContent = getSlotContent("center-text") as CmsElementText;
+
+const leftImageContent = getSlotContent("left-image") as CmsElementImage;
+const rightImageContent = getSlotContent("right-image") as CmsElementImage;
+const centerImageContent = getSlotContent("center-image") as CmsElementImage;
+
+// TODO: useRouter
+function onImageClick(
+  slotContent: Schemas["CmsSlot"] & {
+    data: {
+      url?: string;
+      newTab?: boolean;
+    };
+  },
+) {
+  if (slotContent.data?.url) {
+    if (slotContent.data?.newTab) {
+      window.open(slotContent.data.url);
+    } else {
+      window.location.href = slotContent.data.url;
+    }
+  }
+}
+</script>
+<template>
+  <article
+    class="cms-block-image-text-gallery"
+    :style="{ backgroundColor: content.backgroundColor || '' }"
+  >
+    <div class="cms-block-image-text-gallery__container">
+      <div class="cms-block-image-text-gallery__container__column">
+        <CmsElementImage
+          :content="leftImageContent"
+          :style="{ cursor: leftImageContent.data?.url && 'pointer' }"
+          @click="onImageClick(leftImageContent)"
+        />
+        <CmsElementText
+          :content="leftTextContent"
+          class="cms-block-imag)e-text-gallery__container__column--text"
+        />
+      </div>
+      <div class="cms-block-image-text-gallery__container__column">
+        <CmsElementImage
+          :content="centerImageContent"
+          :style="{
+            cursor: centerImageContent.data?.url && 'pointer',
+          }"
+          @click="onImageClick(centerImageContent)"
+        />
+        <CmsElementText
+          :content="centerTextContent"
+          class="cms-block-image-text-gallery__container__column--text"
+        />
+      </div>
+      <div class="cms-block-image-text-gallery__container__column">
+        <CmsElementImage
+          :content="rightImageContent"
+          :style="{ cursor: rightImageContent.data?.url && 'pointer' }"
+          @click="onImageClick(rightImageContent)"
+        />
+        <CmsElementText
+          :content="rightTextContent"
+          class="cms-block-image-text-gallery__container__column--text"
+        />
+      </div>
+    </div>
+  </article>
+</template>

package/components/public/cms/block/CmsBlockImageTextRow.vue

@@ -0,0 +1,43 @@
+<script setup lang="ts">
+import type { CmsBlockImageTextRow } from "@shopware/composables";
+import { useCmsBlock } from "#imports";
+
+const props = defineProps<{
+  content: CmsBlockImageTextRow;
+}>();
+
+const { getSlotContent } = useCmsBlock(props.content);
+
+const leftImageContent = getSlotContent("left-image");
+const leftTextContent = getSlotContent("left-text");
+const centerImageContent = getSlotContent("center-image");
+const centerTextContent = getSlotContent("center-text");
+const rightImageContent = getSlotContent("right-image");
+const rightTextContent = getSlotContent("right-text");
+</script>
+<template>
+  <div class="cms-block-image-text-row grid md:grid-cols-3 gap-10">
+    <div class="cms-block-image-text-row__column">
+      <CmsGenericElement :content="leftImageContent" />
+      <CmsGenericElement :content="leftTextContent" />
+    </div>
+    <div class="cms-block-image-text-row__column">
+      <CmsGenericElement :content="centerImageContent" />
+      <CmsGenericElement :content="centerTextContent" />
+    </div>
+    <div class="cms-block-image-text-row__column">
+      <CmsGenericElement :content="rightImageContent" />
+      <CmsGenericElement :content="rightTextContent" />
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.cms-block-image-text-row .cms-element-image {
+  @apply object-cover;
+}
+
+.cms-block-image-text-row .cms-block-image-text-row__column div:first-child {
+  @apply mb-5;
+}
+</style>

package/components/public/cms/block/CmsBlockImageThreeColumn.vue

@@ -0,0 +1,21 @@
+<script setup lang="ts">
+import type { CmsBlockImageThreeColumn } from "@shopware/composables";
+import { useCmsBlock } from "#imports";
+
+const props = defineProps<{
+  content: CmsBlockImageThreeColumn;
+}>();
+
+const { getSlotContent } = useCmsBlock(props.content);
+
+const leftContent = getSlotContent("left");
+const rightContent = getSlotContent("right");
+const centerContent = getSlotContent("center");
+</script>
+<template>
+  <div class="grid md:grid-cols-3 gap-10">
+    <CmsGenericElement :content="leftContent" />
+    <CmsGenericElement :content="centerContent" />
+    <CmsGenericElement :content="rightContent" />
+  </div>
+</template>

package/components/public/cms/block/CmsBlockImageThreeCover.vue

@@ -0,0 +1,27 @@
+<script setup lang="ts">
+import type { CmsBlockImageThreeCover } from "@shopware/composables";
+import { useCmsBlock } from "#imports";
+
+const props = defineProps<{
+  content: CmsBlockImageThreeCover;
+}>();
+
+const { getSlotContent } = useCmsBlock(props.content);
+
+const leftContent = getSlotContent("left");
+const rightContent = getSlotContent("right");
+const centerContent = getSlotContent("center");
+</script>
+<template>
+  <div class="cms-block-image-three-cover grid md:grid-cols-3 gap-10">
+    <CmsGenericElement :content="leftContent" />
+    <CmsGenericElement :content="centerContent" />
+    <CmsGenericElement :content="rightContent" />
+  </div>
+</template>
+
+<style scoped>
+.cms-block-image-three-cover .cms-element-image {
+  @apply aspect-square object-cover;
+}
+</style>

package/components/public/cms/block/CmsBlockImageTwoColumn.vue

@@ -0,0 +1,25 @@
+<script setup lang="ts">
+import type { CmsBlockImageTwoColumn } from "@shopware/composables";
+import { useCmsBlock } from "#imports";
+
+const props = defineProps<{
+  content: CmsBlockImageTwoColumn;
+}>();
+
+const { getSlotContent } = useCmsBlock(props.content);
+
+const leftContent = getSlotContent("left");
+const rightContent = getSlotContent("right");
+</script>
+<template>
+  <div class="cms-block-image-two-column grid md:grid-cols-2 gap-10">
+    <CmsGenericElement :content="leftContent" />
+    <CmsGenericElement :content="rightContent" />
+  </div>
+</template>
+
+<style scoped>
+.cms-block-image-two-column .cms-element-image {
+  @apply object-cover;
+}
+</style>

package/components/public/cms/block/CmsBlockProductDescriptionReviews.vue

@@ -0,0 +1,15 @@
+<script setup lang="ts">
+import type { CmsBlockProductDescriptionReviews } from "@shopware/composables";
+import { useCmsBlock } from "#imports";
+
+const props = defineProps<{
+  content: CmsBlockProductDescriptionReviews;
+}>();
+const { getSlotContent } = useCmsBlock(props.content);
+const slotContent = getSlotContent("content");
+</script>
+<template>
+  <div class="cms-block-product-description-reviews">
+    <CmsGenericElement :content="slotContent" />
+  </div>
+</template>

package/components/public/cms/block/CmsBlockProductHeading.vue

@@ -0,0 +1,26 @@
+<script setup lang="ts">
+import type { CmsBlockProductHeading } from "@shopware/composables";
+import { useCmsBlock } from "#imports";
+
+const props = defineProps<{
+  content: CmsBlockProductHeading;
+}>();
+
+const { getSlotContent } = useCmsBlock(props.content);
+
+const leftContent = getSlotContent("left");
+const rightContent = getSlotContent("right");
+</script>
+
+<template>
+  <div class="cms-block-product-heading flex justify-between">
+    <CmsGenericElement :content="leftContent" />
+    <CmsGenericElement :content="rightContent" />
+  </div>
+</template>
+
+<style scoped>
+.cms-block-product-heading .cms-element-image {
+  @apply max-w-[7.5rem] max-h-[7.5rem];
+}
+</style>

package/components/public/cms/block/CmsBlockProductListing.vue

@@ -0,0 +1,17 @@
+<script setup lang="ts">
+import type { CmsBlockProductListing } from "@shopware/composables";
+import { useCmsBlock } from "#imports";
+
+const props = defineProps<{
+  content: CmsBlockProductListing;
+}>();
+
+const { getSlotContent } = useCmsBlock(props.content);
+const slotContent = getSlotContent("content");
+</script>
+
+<template>
+  <div>
+    <CmsGenericElement v-if="slotContent" :content="slotContent" />
+  </div>
+</template>

package/components/public/cms/block/CmsBlockProductSlider.vue

@@ -0,0 +1,16 @@
+<script setup lang="ts">
+import type { CmsBlockProductSlider } from "@shopware/composables";
+
+defineProps<{
+  content: CmsBlockProductSlider;
+}>();
+</script>
+<template>
+  <div class="cms-block-product-slider">
+    <CmsGenericElement
+      v-for="slot in content.slots"
+      :key="slot.id"
+      :content="slot"
+    />
+  </div>
+</template>

package/components/public/cms/block/CmsBlockProductThreeColumn.vue

@@ -0,0 +1,22 @@
+<script setup lang="ts">
+import type { CmsBlockProductThreeColumn } from "@shopware/composables";
+import { useCmsBlock } from "#imports";
+
+const props = defineProps<{
+  content: CmsBlockProductThreeColumn;
+}>();
+
+const { getSlotContent } = useCmsBlock(props.content);
+
+const leftContent = getSlotContent("left");
+const rightContent = getSlotContent("right");
+const centerContent = getSlotContent("center");
+</script>
+
+<template>
+  <div class="grid md:grid-cols-3 gap-10 place-items-center">
+    <CmsGenericElement :content="leftContent" class="w-full" />
+    <CmsGenericElement :content="centerContent" class="w-full" />
+    <CmsGenericElement :content="rightContent" class="w-full" />
+  </div>
+</template>

package/components/public/cms/block/CmsBlockSidebarFilter.vue

@@ -0,0 +1,17 @@
+<script setup lang="ts">
+import type {
+  CmsBlockSidebarFilter,
+  CmsElementSidebarFilter,
+} from "@shopware/composables";
+import { useCmsBlock } from "#imports";
+
+const props = defineProps<{
+  content: CmsBlockSidebarFilter;
+}>();
+
+const { getSlotContent } = useCmsBlock(props.content);
+const slotContent = getSlotContent("content") as CmsElementSidebarFilter;
+</script>
+<template>
+  <CmsElementSidebarFilter :content="slotContent" />
+</template>

package/components/public/cms/block/CmsBlockText.vue

@@ -0,0 +1,15 @@
+<script setup lang="ts">
+import type { CmsBlockText } from "@shopware/composables";
+import { useCmsBlock } from "#imports";
+
+const props = defineProps<{
+  content: CmsBlockText;
+}>();
+
+const { getSlotContent } = useCmsBlock(props.content);
+
+const slotContent = getSlotContent("content");
+</script>
+<template>
+  <CmsGenericElement :content="slotContent" />
+</template>

package/components/public/cms/block/CmsBlockTextHero.vue

@@ -0,0 +1,15 @@
+<script setup lang="ts">
+import type { CmsBlockTextHero } from "@shopware/composables";
+import { useCmsBlock } from "#imports";
+
+const props = defineProps<{
+  content: CmsBlockTextHero;
+}>();
+
+const { getSlotContent } = useCmsBlock(props.content);
+
+const slotContent = getSlotContent("content");
+</script>
+<template>
+  <CmsGenericElement :content="slotContent" />
+</template>

package/components/public/cms/block/CmsBlockTextOnImage.vue

@@ -0,0 +1,20 @@
+<script setup lang="ts">
+import type { CmsBlockTextOnImage } from "@shopware/composables";
+import { useCmsBlock } from "#imports";
+
+const props = defineProps<{
+  content: CmsBlockTextOnImage;
+}>();
+
+const { getSlotContent } = useCmsBlock(props.content);
+
+const slotContent = getSlotContent("content");
+</script>
+
+<template>
+  <CmsGenericElement
+    v-if="slotContent"
+    :content="slotContent"
+    class="cms-block-text-on-image min-h-md"
+  />
+</template>

package/components/public/cms/block/CmsBlockTextTeaser.vue

@@ -0,0 +1,16 @@
+<script setup lang="ts">
+import type { CmsBlockTextTeaser } from "@shopware/composables";
+
+defineProps<{
+  content: CmsBlockTextTeaser;
+}>();
+</script>
+<template>
+  <div>
+    <CmsGenericElement
+      v-for="slot in content.slots"
+      :key="slot.id"
+      :content="slot"
+    />
+  </div>
+</template>

package/components/public/cms/block/CmsBlockTextTeaserSection.vue

@@ -0,0 +1,21 @@
+<script setup lang="ts">
+import type { CmsBlockTextTeaserSection } from "@shopware/composables";
+
+defineProps<{
+  content: CmsBlockTextTeaserSection;
+}>();
+</script>
+<template>
+  <div class="container mx-auto flex pt-6 pb-6">
+    <CmsGenericElement
+      v-for="(slot, i) in content.slots"
+      :key="slot.id"
+      :content="slot"
+      class="cms-block-text-teaser-section flex"
+      :class="{
+        'flex-basis-1/3 flex-col ': i == 0,
+        'pl-4 flex-basis-2/3': i == 1,
+      }"
+    />
+  </div>
+</template>

package/components/public/cms/block/CmsBlockTextThreeColumn.vue

@@ -0,0 +1,22 @@
+<script setup lang="ts">
+import type { CmsBlockTextThreeColumn } from "@shopware/composables";
+import { useCmsBlock } from "#imports";
+
+const props = defineProps<{
+  content: CmsBlockTextThreeColumn;
+}>();
+
+const { getSlotContent } = useCmsBlock(props.content);
+
+const leftContent = getSlotContent("left");
+const rightContent = getSlotContent("right");
+const centerContent = getSlotContent("center");
+</script>
+
+<template>
+  <article class="grid md:grid-cols-3 gap-4">
+    <CmsGenericElement :content="leftContent" class="" />
+    <CmsGenericElement :content="centerContent" class="" />
+    <CmsGenericElement :content="rightContent" class="" />
+  </article>
+</template>

package/components/public/cms/block/CmsBlockTextTwoColumn.vue

@@ -0,0 +1,28 @@
+<script setup lang="ts">
+import type { CmsBlockTextTwoColumn } from "@shopware/composables";
+import { useCmsBlock } from "#imports";
+
+const props = defineProps<{
+  content: CmsBlockTextTwoColumn;
+}>();
+
+const { getSlotContent } = useCmsBlock(props.content);
+
+const leftContent = getSlotContent("left");
+const rightContent = getSlotContent("right");
+</script>
+
+<template>
+  <article
+    class="cms-block-text-two-column flex justify-center gap-5 md:gap-20"
+  >
+    <CmsGenericElement
+      :content="leftContent"
+      class="w-1/2 cms-block-text-two-column__text"
+    />
+    <CmsGenericElement
+      :content="rightContent"
+      class="w-1/2 cms-block-text-two-column__text"
+    />
+  </article>
+</template>

package/components/public/cms/block/CmsBlockVimeoVideo.vue

@@ -0,0 +1,17 @@
+<script setup lang="ts">
+import type { CmsBlockVimeoVideo } from "@shopware/composables";
+import { useCmsBlock } from "#imports";
+
+const props = defineProps<{
+  content: CmsBlockVimeoVideo;
+}>();
+
+const { getSlotContent } = useCmsBlock(props.content);
+
+const slotContent = getSlotContent("video");
+</script>
+<template>
+  <div class="cms-block-vimeo-video relative">
+    <CmsGenericElement :content="slotContent" />
+  </div>
+</template>

package/components/public/cms/block/CmsBlockYoutubeVideo.vue

@@ -0,0 +1,17 @@
+<script setup lang="ts">
+import type { CmsBlockYoutubeVideo } from "@shopware/composables";
+import { useCmsBlock } from "#imports";
+
+const props = defineProps<{
+  content: CmsBlockYoutubeVideo;
+}>();
+
+const { getSlotContent } = useCmsBlock(props.content);
+
+const slotContent = getSlotContent("video");
+</script>
+<template>
+  <div class="cms-block-youtube-video relative">
+    <CmsGenericElement :content="slotContent" />
+  </div>
+</template>

package/components/public/cms/element/CmsElementBuyBox.md

@@ -0,0 +1 @@
+Render a product including prices, basic information and add to cart button