@shopware/cms-base-layer 3.0.0 → 3.0.1

package/app/components/listing-filters/SwFilterShippingFree.vue

@@ -14,6 +14,7 @@ import { useCmsTranslations } from "@shopware/composables";
 import { onClickOutside } from "@vueuse/core";
 import { defu } from "defu";
 import { computed, ref } from "vue";
+
 import type { Schemas } from "#shopware";
 
 const {
@@ -77,15 +78,17 @@ const handleRadioUpdate = (val: string | null | boolean | undefined) => {
           @keydown.space.prevent="toggle"
         >
           <div class="flex-1 flex items-center gap-2.5">
-            <div class="flex-1 text-surface-on-surface text-base font-bold leading-normal text-left">
+            <div
+              class="flex-1 text-surface-on-surface text-base font-bold leading-normal text-left"
+            >
               {{ filter.label }}
             </div>
           </div>
-          <span
-            class="flex items-center justify-center"
-            aria-hidden="true"
-          >
-            <SwChevronIcon :direction="isFilterVisible ? 'up' : 'down'" :size="24" />
+          <span class="flex items-center justify-center" aria-hidden="true">
+            <SwChevronIcon
+              :direction="isFilterVisible ? 'up' : 'down'"
+              :size="24"
+            />
           </span>
         </div>
       </div>
@@ -93,9 +96,14 @@ const handleRadioUpdate = (val: string | null | boolean | undefined) => {
 
     <!-- Filter content -->
     <transition name="filter-collapse">
-      <div v-if="isFilterVisible || displayMode === 'dropdown'" class="self-stretch">
+      <div
+        v-if="isFilterVisible || displayMode === 'dropdown'"
+        class="self-stretch"
+      >
         <div class="pt-6 space-y-4">
-          <div class="self-stretch inline-flex justify-start items-start gap-2 w-full">
+          <div
+            class="self-stretch inline-flex justify-start items-start gap-2 w-full"
+          >
             <div class="flex-1 pt-[3px]">
               <SwSwitchButton
                 :model-value="currentFilterData"

package/app/components/public/cms/CmsBlockSpatialViewer.vue

@@ -1,5 +1,6 @@
 <script lang="ts" setup>
 import { computed, defineAsyncComponent } from "vue";
+
 import { useCmsBlock } from "#imports";
 import type { Schemas } from "#shopware";
 

package/app/components/public/cms/CmsGenericBlock.vue

@@ -5,7 +5,9 @@ import {
   getCmsLayoutConfiguration,
 } from "@shopware/helpers";
 import { h, provide, resolveComponent } from "vue";
+
 import type { Schemas } from "#shopware";
+
 import { useTypedAppConfig } from "../../../composables/useTypedAppConfig";
 import { getImageSizes } from "../../../helpers/cms/getImageSizes";
 

package/app/components/public/cms/CmsGenericElement.vue

@@ -2,6 +2,7 @@
 import { resolveCmsComponent } from "@shopware/composables";
 import { getCmsLayoutConfiguration } from "@shopware/helpers";
 import { h, resolveComponent } from "vue";
+
 import type { Schemas } from "#shopware";
 
 const props = defineProps<{

package/app/components/public/cms/CmsNoComponent.vue

@@ -2,6 +2,7 @@
 import { refAutoReset } from "@vueuse/core";
 import { pascalCase } from "scule";
 import { computed } from "vue";
+
 import type { Schemas } from "#shopware";
 
 const props = defineProps<{

package/app/components/public/cms/CmsPage.md

@@ -15,7 +15,7 @@ export default defineAppConfig({
 });
 ```
 
-See the [cms-base-layer README](../../../../../../README.md#%EF%B8%8F-background-image-optimization) for full details.
+See the [cms-base-layer README](https://github.com/shopware/frontends/tree/main/packages/cms-base-layer#%EF%B8%8F-background-image-optimization) for full details.
 
 ### Example usage
 

package/app/components/public/cms/CmsPage.vue

@@ -6,8 +6,10 @@ import {
 } from "@shopware/helpers";
 import { pascalCase } from "scule";
 import { computed, h, resolveComponent, watchEffect } from "vue";
+
 import { createCategoryListingContext, useNavigationContext } from "#imports";
 import type { Schemas } from "#shopware";
+
 import { useLcpImagePreload } from "../../../composables/useLcpImagePreload";
 import { useTypedAppConfig } from "../../../composables/useTypedAppConfig";
 

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

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

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

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

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

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

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

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

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

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

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

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import type { CmsBlockGalleryBuybox } from "@shopware/composables";
+
 import { useCmsBlock } from "#imports";
 
 const props = defineProps<{
@@ -12,7 +13,9 @@ const leftContent = getSlotContent("left");
 </script>
 
 <template>
-  <div class="w-full flex flex-col lg:flex-row justify-center items-stretch gap-4 lg:gap-10 lg:px-0 overflow-hidden">
+  <div
+    class="w-full flex flex-col lg:flex-row justify-center items-stretch gap-4 lg:gap-10 lg:px-0 overflow-hidden"
+  >
     <!-- Gallery Section -->
     <div class="w-full lg:w-3/5">
       <CmsGenericElement :content="leftContent" />

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

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

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>

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>

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<{

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>

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" />

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>

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>

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<{

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<{