@shopware/cms-base-layer 3.0.0 → 3.1.0

package/app/components/public/cms/block/CmsBlockImageBubbleRow.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import type { CmsBlockImageBubbleRow } from "@shopware/composables";
+
 import { useCmsBlock } from "#imports";
 
 const props = defineProps<{
@@ -13,7 +14,9 @@ const rightContent = getSlotContent("right");
 const centerContent = getSlotContent("center");
 </script>
 <template>
-  <div class="cms-block-image-bubble-row flex flex-col sm:flex-row justify-start items-start gap-6 w-full">
+  <div
+    class="cms-block-image-bubble-row flex flex-col sm:flex-row justify-start items-start gap-6 w-full"
+  >
     <div class="w-full sm:flex-1 flex items-center justify-center">
       <CmsGenericElement :content="leftContent" class="w-full" />
     </div>
@@ -27,6 +30,10 @@ const centerContent = getSlotContent("center");
 </template>
 <style scoped>
 .cms-block-image-bubble-row :deep(.cms-element-image) {
-  @apply object-cover max-w-xs overflow-hidden rounded-full aspect-square;
+  aspect-ratio: 1 / 1;
+  max-width: 20rem;
+  overflow: hidden;
+  border-radius: 9999px;
+  object-fit: cover;
 }
 </style>

package/app/components/public/cms/block/CmsBlockImageCover.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import type { CmsBlockImageCover } from "@shopware/composables";
+
 import { useCmsBlock } from "#imports";
 
 const props = defineProps<{

package/app/components/public/cms/block/CmsBlockImageFourColumn.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import type { CmsBlockImageFourColumn } from "@shopware/composables";
+
 import { useCmsBlock } from "#imports";
 
 const props = defineProps<{
@@ -14,7 +15,9 @@ const centerLeftContent = getSlotContent("center-left");
 const centerRightContent = getSlotContent("center-right");
 </script>
 <template>
-  <div class="cms-block-image-four-column flex flex-col sm:flex-row sm:flex-wrap lg:flex-nowrap justify-start items-start gap-6 w-full">
+  <div
+    class="cms-block-image-four-column flex flex-col sm:flex-row sm:flex-wrap lg:flex-nowrap justify-start items-start gap-6 w-full"
+  >
     <div class="w-full sm:w-[calc(50%-12px)] lg:flex-1">
       <CmsGenericElement :content="leftContent" />
     </div>
@@ -32,10 +35,14 @@ const centerRightContent = getSlotContent("center-right");
 
 <style scoped>
 .cms-block-image-four-column :deep(.cms-element-image) {
-  @apply relative h-full w-full;
+  position: relative;
+  height: 100%;
+  width: 100%;
 }
 
 .cms-block-image-four-column :deep(.cms-element-image img) {
-  @apply w-full h-full object-cover;
+  height: 100%;
+  width: 100%;
+  object-fit: cover;
 }
 </style>

package/app/components/public/cms/block/CmsBlockImageGallery.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import type { CmsBlockImageGallery } from "@shopware/composables";
+
 import { useCmsBlock } from "#imports";
 
 const props = defineProps<{

package/app/components/public/cms/block/CmsBlockImageGalleryBig.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import type { CmsBlockImageGalleryBig } from "@shopware/composables";
+
 import { useCmsBlock } from "#imports";
 
 const props = defineProps<{
@@ -19,24 +20,28 @@ const cmsContent = getSlotContent("imageGallery");
 
 <style scoped>
 .cms-block-image-gallery-big {
-  @apply w-full;
+  width: 100%;
 }
 
 .cms-block-image-gallery-big :deep(.cms-element-image-gallery) {
-  @apply max-w-screen-xl mx-auto;
+  max-width: 1280px;
+  margin-left: auto;
+  margin-right: auto;
 }
 
 /* Enhanced styling for the big gallery version */
 .cms-block-image-gallery-big :deep(.gallery-slider) {
-  @apply max-h-[800px];
+  max-height: 800px;
 }
 
 .cms-block-image-gallery-big :deep(img) {
-  @apply object-contain mx-auto;
+  margin-left: auto;
+  margin-right: auto;
+  object-fit: contain;
 }
 
 /* Larger navigation controls */
 .cms-block-image-gallery-big :deep(.gallery-slider-controls) {
-  @apply scale-125;
+  transform: scale(1.25);
 }
 </style>

package/app/components/public/cms/block/CmsBlockImageHighlightRow.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import type { CmsBlockImageHighlightRow } from "@shopware/composables";
+
 import { useCmsBlock } from "#imports";
 
 const props = defineProps<{
@@ -13,7 +14,9 @@ const rightContent = getSlotContent("right");
 const centerContent = getSlotContent("center");
 </script>
 <template>
-  <div class="cms-block-image-highlight-row flex flex-col sm:flex-row justify-start items-start gap-6 w-full">
+  <div
+    class="cms-block-image-highlight-row flex flex-col sm:flex-row justify-start items-start gap-6 w-full"
+  >
     <div class="w-full sm:flex-1">
       <CmsGenericElement :content="leftContent" />
     </div>
@@ -28,10 +31,15 @@ const centerContent = getSlotContent("center");
 
 <style scoped>
 .cms-block-image-highlight-row :deep(.cms-element-image) {
-  @apply relative h-full w-full border-[12px] border-surface-surface;
+  position: relative;
+  height: 100%;
+  width: 100%;
+  border: 12px solid #ffffff;
 }
 
 .cms-block-image-highlight-row :deep(.cms-element-image img) {
-  @apply w-full h-full object-cover;
+  height: 100%;
+  width: 100%;
+  object-fit: cover;
 }
 </style>

package/app/components/public/cms/block/CmsBlockImageSimpleGrid.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import type { CmsBlockImageSimpleGrid } from "@shopware/composables";
+
 import { useCmsBlock } from "#imports";
 
 const props = defineProps<{

package/app/components/public/cms/block/CmsBlockImageSlider.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import type { CmsBlockImageSlider } from "@shopware/composables";
+
 import { useCmsBlock } from "#imports";
 
 const props = defineProps<{

package/app/components/public/cms/block/CmsBlockImageText.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import type { CmsBlockImageText } from "@shopware/composables";
+
 import { useCmsBlock } from "#imports";
 
 const props = defineProps<{
@@ -12,7 +13,9 @@ const leftContent = getSlotContent("left");
 const rightContent = getSlotContent("right");
 </script>
 <template>
-  <div class="flex flex-col md:flex-row justify-start items-stretch gap-6 w-full">
+  <div
+    class="flex flex-col md:flex-row justify-start items-stretch gap-6 w-full"
+  >
     <div class="w-full md:flex-1 min-w-0 p-4 flex flex-col">
       <CmsGenericElement :content="leftContent" class="flex-1" />
     </div>

package/app/components/public/cms/block/CmsBlockImageTextBubble.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import type { CmsBlockImageTextBubble } from "@shopware/composables";
+
 import { useCmsBlock } from "#imports";
 
 const props = defineProps<{
@@ -16,7 +17,9 @@ const rightText = getSlotContent("right-text");
 const rightImage = getSlotContent("right-image");
 </script>
 <template>
-  <div class="cms-block-image-text-bubble flex flex-col sm:flex-row justify-start items-start gap-6 w-full">
+  <div
+    class="cms-block-image-text-bubble flex flex-col sm:flex-row justify-start items-start gap-6 w-full"
+  >
     <div class="w-full sm:flex-1">
       <div class="self-stretch flex justify-center">
         <CmsGenericElement

package/app/components/public/cms/block/CmsBlockImageTextCover.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import type { CmsBlockImageTextCover } from "@shopware/composables";
+
 import { useCmsBlock } from "#imports";
 
 const props = defineProps<{
@@ -12,7 +13,9 @@ const leftContent = getSlotContent("left");
 const rightContent = getSlotContent("right");
 </script>
 <template>
-  <article class="flex flex-col md:flex-row justify-start items-start gap-6 w-full pb-6">
+  <article
+    class="flex flex-col md:flex-row justify-start items-start gap-6 w-full pb-6"
+  >
     <div class="w-full md:flex-1 px-6 pt-6 md:px-0 md:pt-6 md:pl-6">
       <CmsGenericElement :content="leftContent" />
     </div>

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

@@ -4,6 +4,7 @@ import type {
   CmsElementImage,
   CmsElementText,
 } from "@shopware/composables";
+
 import { useCmsBlock } from "#imports";
 
 const props = defineProps<{
@@ -55,10 +56,7 @@ function onImageClick(
         :style="{ cursor: leftImageContent.data?.url && 'pointer' }"
         @click="onImageClick(leftImageContent)"
       />
-      <CmsElementText
-        :content="leftTextContent"
-        class="self-stretch"
-      />
+      <CmsElementText :content="leftTextContent" class="self-stretch" />
     </div>
     <div class="w-full sm:flex-1">
       <CmsElementImage
@@ -68,10 +66,7 @@ function onImageClick(
         }"
         @click="onImageClick(centerImageContent)"
       />
-      <CmsElementText
-        :content="centerTextContent"
-        class="self-stretch"
-      />
+      <CmsElementText :content="centerTextContent" class="self-stretch" />
     </div>
     <div class="w-full sm:flex-1">
       <CmsElementImage
@@ -79,10 +74,7 @@ function onImageClick(
         :style="{ cursor: rightImageContent.data?.url && 'pointer' }"
         @click="onImageClick(rightImageContent)"
       />
-      <CmsElementText
-        :content="rightTextContent"
-        class="self-stretch"
-      />
+      <CmsElementText :content="rightTextContent" class="self-stretch" />
     </div>
   </article>
 </template>

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

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import type { CmsBlockImageTextRow } from "@shopware/composables";
+
 import { useCmsBlock } from "#imports";
 
 const props = defineProps<{
@@ -16,7 +17,9 @@ const rightImageContent = getSlotContent("right-image");
 const rightTextContent = getSlotContent("right-text");
 </script>
 <template>
-  <div class="cms-block-image-text-row flex flex-col md:flex-row justify-center items-stretch gap-6 w-full">
+  <div
+    class="cms-block-image-text-row flex flex-col md:flex-row justify-center items-stretch gap-6 w-full"
+  >
     <div class="w-full md:flex-1 flex flex-col">
       <div class="flex-1 mb-4 overflow-hidden rounded-lg min-h-64">
         <CmsGenericElement :content="leftImageContent" />
@@ -40,14 +43,20 @@ const rightTextContent = getSlotContent("right-text");
 
 <style scoped>
 .cms-block-image-text-row :deep(.cms-element-image) {
-  @apply relative h-full w-full;
+  position: relative;
+  height: 100%;
+  width: 100%;
 }
 
 .cms-block-image-text-row :deep(.cms-element-image img) {
-  @apply w-full h-full object-cover rounded-lg;
+  height: 100%;
+  width: 100%;
+  border-radius: 0.5rem;
+  object-fit: cover;
 }
 
 .cms-block-image-text-row :deep(.cms-element-text) {
-  @apply self-stretch min-h-12;
+  align-self: stretch;
+  min-height: 3rem;
 }
 </style>

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

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import type { CmsBlockImageThreeColumn } from "@shopware/composables";
+
 import { useCmsBlock } from "#imports";
 
 const props = defineProps<{

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

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import type { CmsBlockImageThreeCover } from "@shopware/composables";
+
 import { useCmsBlock } from "#imports";
 
 const props = defineProps<{
@@ -13,7 +14,9 @@ const rightContent = getSlotContent("right");
 const centerContent = getSlotContent("center");
 </script>
 <template>
-  <div class="cms-block-image-three-cover flex flex-col sm:flex-row justify-start items-start gap-6 w-full">
+  <div
+    class="cms-block-image-three-cover flex flex-col sm:flex-row justify-start items-start gap-6 w-full"
+  >
     <div class="w-full sm:flex-1">
       <CmsGenericElement :content="leftContent" />
     </div>
@@ -28,10 +31,15 @@ const centerContent = getSlotContent("center");
 
 <style scoped>
 .cms-block-image-three-cover :deep(.cms-element-image) {
-  @apply aspect-square relative h-full w-full;
+  position: relative;
+  aspect-ratio: 1 / 1;
+  height: 100%;
+  width: 100%;
 }
 
 .cms-block-image-three-cover :deep(.cms-element-image img) {
-  @apply w-full h-full object-cover;
+  height: 100%;
+  width: 100%;
+  object-fit: cover;
 }
 </style>

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

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import type { CmsBlockImageTwoColumn } from "@shopware/composables";
+
 import { useCmsBlock } from "#imports";
 
 const props = defineProps<{
@@ -12,7 +13,9 @@ const leftContent = getSlotContent("left");
 const rightContent = getSlotContent("right");
 </script>
 <template>
-  <div class="cms-block-image-two-column flex flex-col md:flex-row justify-start items-start gap-6 w-full">
+  <div
+    class="cms-block-image-two-column flex flex-col md:flex-row justify-start items-start gap-6 w-full"
+  >
     <div class="w-full md:flex-1 md:min-w-0">
       <CmsGenericElement :content="leftContent" />
     </div>
@@ -24,14 +27,18 @@ const rightContent = getSlotContent("right");
 
 <style scoped>
 .cms-block-image-two-column :deep(.cms-element-image) {
-  @apply relative h-full w-full;
+  position: relative;
+  height: 100%;
+  width: 100%;
 }
 
 .cms-block-image-two-column :deep(.cms-element-image img) {
-  @apply w-full h-full object-cover;
+  height: 100%;
+  width: 100%;
+  object-fit: cover;
 }
 
 .cms-block-image-two-column :deep(.cms-element-image-slider) {
-  @apply w-full;
+  width: 100%;
 }
 </style>

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

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import type { CmsBlockProductDescriptionReviews } from "@shopware/composables";
+
 import { useCmsBlock } from "#imports";
 
 const props = defineProps<{

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

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import type { CmsBlockProductHeading } from "@shopware/composables";
+
 import { useCmsBlock } from "#imports";
 
 const props = defineProps<{
@@ -21,6 +22,7 @@ const rightContent = getSlotContent("right");
 
 <style scoped>
 .cms-block-product-heading .cms-element-image {
-  @apply max-w-[7.5rem] max-h-[7.5rem];
+  max-height: 7.5rem;
+  max-width: 7.5rem;
 }
 </style>

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

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import type { CmsBlockProductListing } from "@shopware/composables";
+
 import { useCmsBlock } from "#imports";
 
 const props = defineProps<{

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

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import type { CmsBlockProductThreeColumn } from "@shopware/composables";
+
 import { useCmsBlock } from "#imports";
 
 const props = defineProps<{

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

@@ -3,6 +3,7 @@ import type {
   CmsBlockSidebarFilter,
   CmsElementSidebarFilter,
 } from "@shopware/composables";
+
 import { useCmsBlock } from "#imports";
 
 const props = defineProps<{

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

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import type { CmsBlockText } from "@shopware/composables";
+
 import { useCmsBlock } from "#imports";
 
 const props = defineProps<{

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

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import type { CmsBlockTextHero } from "@shopware/composables";
+
 import { useCmsBlock } from "#imports";
 
 const props = defineProps<{

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

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import type { CmsBlockTextOnImage } from "@shopware/composables";
+
 import { useCmsBlock } from "#imports";
 
 const props = defineProps<{
@@ -15,9 +16,6 @@ const slotContent = getSlotContent("content");
   <div
     class="cms-block-text-on-image min-h-[500px] py-20 bg-cover bg-bottom bg-no-repeat relative"
   >
-    <CmsGenericElement
-      v-if="slotContent"
-      :content="slotContent"
-    />
+    <CmsGenericElement v-if="slotContent" :content="slotContent" />
   </div>
 </template>

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

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import type { CmsBlockTextThreeColumn } from "@shopware/composables";
+
 import { useCmsBlock } from "#imports";
 
 const props = defineProps<{

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

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import type { CmsBlockTextTwoColumn } from "@shopware/composables";
+
 import { useCmsBlock } from "#imports";
 
 const props = defineProps<{
@@ -13,7 +14,9 @@ const rightContent = getSlotContent("right");
 </script>
 
 <template>
-  <article class="cms-block-text-two-column grid md:grid-cols-2 gap-5 md:gap-20">
+  <article
+    class="cms-block-text-two-column grid md:grid-cols-2 gap-5 md:gap-20"
+  >
     <CmsGenericElement
       :content="leftContent"
       class="cms-block-text-two-column__text"

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

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import type { CmsBlockVimeoVideo } from "@shopware/composables";
+
 import { useCmsBlock } from "#imports";
 
 const props = defineProps<{

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

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import type { CmsBlockYoutubeVideo } from "@shopware/composables";
+
 import { useCmsBlock } from "#imports";
 
 const props = defineProps<{