@shopware/cms-base-layer 2.1.0 → 3.0.1

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

package/app/components/public/cms/element/CmsElementBuyBox.vue

@@ -3,6 +3,7 @@ import type { CmsElementBuyBox } from "@shopware/composables";
 import { useCmsTranslations } from "@shopware/composables";
 import { defu } from "defu";
 import { computed } from "vue";
+
 import {
   useCmsElementConfig,
   usePrice,
@@ -67,79 +68,96 @@ const unitName = computed(() => product.value?.unit?.name);
 const productName = computed(() => product.value?.translated?.name || "");
 </script>
 <template>
-    <div v-if="product" :class="{
-        'h-full w-full flex flex-col': true,
-        'justify-start': alignment === 'flex-start',
-        'justify-end': alignment === 'flex-end',
-        'justify-center': alignment === 'center',
-    }">
-        <div class="self-stretch inline-flex flex-col justify-start items-start gap-8 mt-4 min-w-0">
-            <div
-                class="md:hidden self-stretch text-surface-on-surface text-4xl font-normal font-serif leading-[60px]">
-                {{ productName }}</div>
-
-            <div v-if="tierPrices.length <= 1">
-                <SwSharedPrice v-if="hasListPrice"
-                    class="text-1xl text-secondary-900 basis-2/6 justify-start line-through"
-                    :value="price?.listPrice?.price" />
-                <SwSharedPrice v-if="unitPrice"
-                    class="text-surface-on-surface text-base font-bold leading-normal"
-                    :class="{
-                        'text-red': hasListPrice,
-                    }" :value="unitPrice" />
-                <div v-if="regulationPrice" class="text-xs flex text-secondary-500">
-                    {{ translations.product.previously }}
-                    <SwSharedPrice class="ml-1" :value="regulationPrice" />
-                </div>
-            </div>
-            <div v-else>
-                <table class="border-collapse table-auto w-full text-sm mb-8">
-                    <thead>
-                        <tr>
-                            <th
-                                class="border-b dark:border-secondary-600 font-medium p-4 pl-8 pt-0 pb-3 text-secondary-600 dark:text-secondary-200 text-left">
-                                {{ translations.product.amount }}
-                            </th>
+  <div
+    v-if="product"
+    :class="{
+      'h-full w-full flex flex-col': true,
+      'justify-start': alignment === 'flex-start',
+      'justify-end': alignment === 'flex-end',
+      'justify-center': alignment === 'center',
+    }"
+  >
+    <div
+      class="self-stretch inline-flex flex-col justify-start items-start gap-8 mt-4 min-w-0"
+    >
+      <div
+        class="md:hidden self-stretch text-surface-on-surface text-4xl font-normal font-serif leading-[60px]"
+      >
+        {{ productName }}
+      </div>
 
-                            <th
-                                class="border-b dark:border-secondary-600 font-medium p-4 pr-8 pt-0 pb-3 text-secondary-600 dark:text-secondary-200 text-left">
-                                {{ translations.product.price.label }}
-                            </th>
-                        </tr>
-                    </thead>
-                    <tbody class="bg-white dark:bg-secondary-800">
-                        <tr v-for="(tierPrice, index) in tierPrices" :key="tierPrice.label">
-                            <td
-                                class="border-b border-secondary-100 dark:border-secondary-700 p-4 pl-8 font-medium text-secondary-500 dark:text-secondary-400">
-                                <span v-if="index < tierPrices.length - 1">{{
-                                    translations.product.to
-                                    }}</span><span v-else>{{ translations.product.from }}</span>
-                                {{ tierPrice.quantity }}
-                            </td>
-                            <td
-                                class="border-b border-secondary-100 dark:border-secondary-700 p-4 pr-8 font-medium text-current-500 dark:text-secondary-400">
-                                {{ getFormattedPrice(tierPrice.unitPrice) }}
-                            </td>
-                        </tr>
-                    </tbody>
-                </table>
-            </div>
-            <div v-if="purchaseUnit && unitName" class="mt-1">
-                <span class="font-light"> {{ translations.product.content }}: </span>
-                <span class="font-light"> {{ purchaseUnit }} {{ unitName }} </span>
-                <span v-if="referencePrice" class="font-light">
-                    {{ currency?.symbol }} {{ referencePrice?.price }} / /
-                    {{ referencePrice?.referenceUnit }} {{ referencePrice?.unitName }}
-                </span>
-            </div>
-            <span class="text-brand-primary">
-                <template v-if="taxState === 'gross'">
-                    {{ translations.product.pricesIncl }}
-                </template>
-                <template v-else> {{ translations.product.pricesExcl }} </template>
-            </span>
-            <SwVariantConfigurator @change="changeVariant" />
-            <SwProductAddToCart :product="product" />
+      <div v-if="tierPrices.length <= 1">
+        <SwSharedPrice
+          v-if="hasListPrice"
+          class="text-1xl text-secondary-900 basis-2/6 justify-start line-through"
+          :value="price?.listPrice?.price"
+        />
+        <SwSharedPrice
+          v-if="unitPrice"
+          class="text-surface-on-surface text-base font-bold leading-normal"
+          :class="{
+            'text-red': hasListPrice,
+          }"
+          :value="unitPrice"
+        />
+        <div v-if="regulationPrice" class="text-xs flex text-secondary-500">
+          {{ translations.product.previously }}
+          <SwSharedPrice class="ml-1" :value="regulationPrice" />
         </div>
+      </div>
+      <div v-else>
+        <table class="border-collapse table-auto w-full text-sm mb-8">
+          <thead>
+            <tr>
+              <th
+                class="border-b dark:border-secondary-600 font-medium p-4 pl-8 pt-0 pb-3 text-secondary-600 dark:text-secondary-200 text-left"
+              >
+                {{ translations.product.amount }}
+              </th>
+
+              <th
+                class="border-b dark:border-secondary-600 font-medium p-4 pr-8 pt-0 pb-3 text-secondary-600 dark:text-secondary-200 text-left"
+              >
+                {{ translations.product.price.label }}
+              </th>
+            </tr>
+          </thead>
+          <tbody class="bg-white dark:bg-secondary-800">
+            <tr v-for="(tierPrice, index) in tierPrices" :key="tierPrice.label">
+              <td
+                class="border-b border-secondary-100 dark:border-secondary-700 p-4 pl-8 font-medium text-secondary-500 dark:text-secondary-400"
+              >
+                <span v-if="index < tierPrices.length - 1">{{
+                  translations.product.to
+                }}</span
+                ><span v-else>{{ translations.product.from }}</span>
+                {{ tierPrice.quantity }}
+              </td>
+              <td
+                class="border-b border-secondary-100 dark:border-secondary-700 p-4 pr-8 font-medium text-current-500 dark:text-secondary-400"
+              >
+                {{ getFormattedPrice(tierPrice.unitPrice) }}
+              </td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+      <div v-if="purchaseUnit && unitName" class="mt-1">
+        <span class="font-light"> {{ translations.product.content }}: </span>
+        <span class="font-light"> {{ purchaseUnit }} {{ unitName }} </span>
+        <span v-if="referencePrice" class="font-light">
+          {{ currency?.symbol }} {{ referencePrice?.price }} / /
+          {{ referencePrice?.referenceUnit }} {{ referencePrice?.unitName }}
+        </span>
+      </div>
+      <span class="text-brand-primary">
+        <template v-if="taxState === 'gross'">
+          {{ translations.product.pricesIncl }}
+        </template>
+        <template v-else> {{ translations.product.pricesExcl }} </template>
+      </span>
+      <SwVariantConfigurator @change="changeVariant" />
+      <SwProductAddToCart :product="product" />
     </div>
+  </div>
 </template>

package/app/components/public/cms/element/CmsElementCategoryNavigation.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import type { Ref } from "vue";
 import { onMounted, ref } from "vue";
+
 import { useCategory, useNavigation } from "#imports";
 import type { Schemas } from "#shopware";
 
@@ -39,15 +40,25 @@ onMounted(async () => {
 </script>
 <template>
   <ClientOnly>
-    <div v-if="!loading && categoryNavigation && categoryNavigation.length" class="self-stretch inline-flex flex-col justify-start items-start gap-3">
+    <div
+      v-if="!loading && categoryNavigation && categoryNavigation.length"
+      class="self-stretch inline-flex flex-col justify-start items-start gap-3"
+    >
       <SwCategoryNavigation
         :level="0"
         :elements="categoryNavigation"
         :active-category="activeCategory"
       />
     </div>
-    <div v-else-if="loading" class="self-stretch flex flex-col justify-start items-start gap-4 animate-pulse">
-      <div v-for="i in 3" :key="i" class="w-full h-12 bg-surface-surface-container rounded"></div>
+    <div
+      v-else-if="loading"
+      class="self-stretch flex flex-col justify-start items-start gap-4 animate-pulse"
+    >
+      <div
+        v-for="i in 3"
+        :key="i"
+        class="w-full h-12 bg-surface-surface-container rounded"
+      ></div>
     </div>
   </ClientOnly>
 </template>