@shopware/cms-base-layer 3.0.0 → 3.0.1

package/app/components/SwProductGallery.vue

@@ -4,6 +4,7 @@ import type {
   SliderElementConfig,
 } from "@shopware/composables";
 import { ref, watch } from "vue";
+
 import type { Schemas } from "#shopware";
 
 const { product, config = {} } = defineProps<{

package/app/components/SwProductListingFilter.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts" generic="ListingFilter extends { code: string }">
 import { computed } from "vue";
 import type { Component } from "vue";
+
 import SwFilterPriceVue from "./listing-filters/SwFilterPrice.vue";
 import SwFilterPropertiesVue from "./listing-filters/SwFilterProperties.vue";
 import SwFilterRatingVue from "./listing-filters/SwFilterRating.vue";
@@ -58,7 +59,10 @@ const filterComponent = computed<Component | undefined>(() => {
 const handleSelectValue = ({
   code,
   value,
-}: { code: string; value: string | number | boolean }) => {
+}: {
+  code: string;
+  value: string | number | boolean;
+}) => {
   emit("filter-change", { code, value });
 };
 </script>

package/app/components/SwProductListingFilters.vue

@@ -8,6 +8,7 @@ import { defu } from "defu";
 import { computed, reactive } from "vue";
 import type { ComputedRef, UnwrapNestedRefs } from "vue";
 import type { LocationQueryRaw } from "vue-router";
+
 import { useCategoryListing, useRoute, useRouter } from "#imports";
 import type { Schemas, operations } from "#shopware";
 
@@ -268,8 +269,11 @@ const handleRemoveFilterChip = async (chip: {
     <!-- Filters Header -->
     <div class="self-stretch flex flex-col justify-start items-start gap-4">
       <div
-        class="flex flex-row items-center justify-between w-full mb-4 py-3 border-b border-outline-outline-variant">
-        <div class="flex-1 text-surface-on-surface text-base font-bold leading-normal">
+        class="flex flex-row items-center justify-between w-full mb-4 py-3 border-b border-outline-outline-variant"
+      >
+        <div
+          class="flex-1 text-surface-on-surface text-base font-bold leading-normal"
+        >
           {{ translations.listing.filters }}
         </div>
         <SwSortDropdown
@@ -283,7 +287,9 @@ const handleRemoveFilterChip = async (chip: {
 
     <!-- Filters List -->
     <div class="self-stretch flex flex-col justify-start items-start gap-4">
-      <SwProductListingFilter v-for="filter in getInitialFilters" :key="filter.id"
+      <SwProductListingFilter
+        v-for="filter in getInitialFilters"
+        :key="filter.id"
         :filter="filter"
         :selected-manufacturer="sidebarSelectedFilters.manufacturer"
         :selected-properties="sidebarSelectedFilters.properties"
@@ -292,11 +298,20 @@ const handleRemoveFilterChip = async (chip: {
         :selected-rating="sidebarSelectedFilters.rating"
         :selected-shipping-free="sidebarSelectedFilters['shipping-free']"
         @filter-change="handleFilterChange"
-        class="w-full" />
+        class="w-full"
+      />
       <div v-if="showResetFiltersButton" class="w-full">
-        <SwBaseButton variant="primary" size="medium" block @click="invokeCleanFilters" type="button">
+        <SwBaseButton
+          variant="primary"
+          size="medium"
+          block
+          @click="invokeCleanFilters"
+          type="button"
+        >
           {{ translations.listing.resetFilters }}
-          <span class="w-6 h-6 i-carbon-close-filled inline-block align-middle ml-2"></span>
+          <span
+            class="w-6 h-6 i-carbon-close-filled inline-block align-middle ml-2"
+          ></span>
         </SwBaseButton>
       </div>
     </div>

package/app/components/SwProductListingFiltersHorizontal.vue

@@ -8,6 +8,7 @@ import { defu } from "defu";
 import { computed, reactive } from "vue";
 import type { ComputedRef, UnwrapNestedRefs } from "vue";
 import type { LocationQueryRaw } from "vue-router";
+
 import { useCategoryListing, useRoute, useRouter } from "#imports";
 import type { Schemas, operations } from "#shopware";
 
@@ -299,7 +300,9 @@ const hasActiveFilter = (filter: { code: string }) => {
         type="button"
       >
         {{ translations.listing.resetFilters }}
-        <span class="w-5 h-5 i-carbon-close inline-block align-middle ml-1"></span>
+        <span
+          class="w-5 h-5 i-carbon-close inline-block align-middle ml-1"
+        ></span>
       </SwBaseButton>
     </div>
   </div>

package/app/components/SwProductPrice.vue

@@ -2,6 +2,7 @@
 import { useCmsTranslations } from "@shopware/composables";
 import { defu } from "defu";
 import { toRefs } from "vue";
+
 import { usePrice, useProductPrice } from "#imports";
 import type { Schemas } from "#shopware";
 

package/app/components/SwProductReviews.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { defu } from "defu";
 import { computed, onMounted, ref, toRefs } from "vue";
+
 import {
   useCmsTranslations,
   useProductReviews,
@@ -77,7 +78,10 @@ const formatDate = (date: string) => {
       v-for="(review, index) in reviewsList"
       :key="review.id"
       class="pb-6"
-      :class="{ 'border-b border-surface-surface-container-highest': index < reviewsList.length - 1 }"
+      :class="{
+        'border-b border-surface-surface-container-highest':
+          index < reviewsList.length - 1,
+      }"
     >
       <div
         v-if="review.createdAt"
@@ -87,19 +91,23 @@ const formatDate = (date: string) => {
         <span>{{ formatDate(review.createdAt) }}</span>
       </div>
       <div
-          v-if="!review.status"
-          class="mt-2 text-3 p-2 bg-states-info-container text-states-on-info-container flex gap-2 items-center"
-        >
+        v-if="!review.status"
+        class="mt-2 text-3 p-2 bg-states-info-container text-states-on-info-container flex gap-2 items-center"
+      >
         <div class="w-6 h-6 i-carbon-warning" />
         {{ translations.product.reviewNotAccepted }}
       </div>
-      <div class="cms-block-product-description-reviews__reviews-rating inline-flex items-center mt-2">
+      <div
+        class="cms-block-product-description-reviews__reviews-rating inline-flex items-center mt-2"
+      >
         <SwProductRating
           :rating="review.points ?? 0"
           :star-size="20"
           :show-count="false"
         />
-        <div class="cms-block-product-description-reviews__reviews-title font-semibold ml-2">
+        <div
+          class="cms-block-product-description-reviews__reviews-title font-semibold ml-2"
+        >
           <p>{{ review.title }}</p>
         </div>
       </div>

package/app/components/SwProductReviewsForm.vue

@@ -7,6 +7,7 @@ import type { ValidationRuleWithoutParams } from "@vuelidate/core";
 import { minLength, required } from "@vuelidate/validators";
 import { defu } from "defu";
 import { computed, reactive, ref } from "vue";
+
 import { useShopwareContext } from "#imports";
 
 const props = defineProps<{
@@ -154,7 +155,10 @@ const invokeRating = (value: number) => {
 </script>
 
 <template>
-  <form class="flex flex-col gap-4 md:gap-5 relative" @submit.prevent="invokeSend">
+  <form
+    class="flex flex-col gap-4 md:gap-5 relative"
+    @submit.prevent="invokeSend"
+  >
     <div
       v-if="isLoading"
       class="absolute inset-0 flex items-center justify-center z-10 bg-surface-surface/80 rounded-md"
@@ -171,7 +175,11 @@ const invokeRating = (value: number) => {
         <span class="text-sm text-surface-on-surface-variant">{{
           translations.product.reviewsForm.rating
         }}</span>
-        <div class="flex flex-row gap-2" role="group" :aria-label="translations.product.reviewsForm.rating">
+        <div
+          class="flex flex-row gap-2"
+          role="group"
+          :aria-label="translations.product.reviewsForm.rating"
+        >
           <SwStarIcon
             v-for="index in state.rating || 0"
             :key="`filled-${index}`"
@@ -217,7 +225,11 @@ const invokeRating = (value: number) => {
         <SwExclamationIcon :size="20" />
       </div>
       <div class="flex-1">
-        <p v-for="(error, index) in errorMessages" :key="index" class="text-sm text-states-error">
+        <p
+          v-for="(error, index) in errorMessages"
+          :key="index"
+          class="text-sm text-states-error"
+        >
           {{ error.detail }}
         </p>
       </div>

package/app/components/SwProductUnits.vue

@@ -2,6 +2,7 @@
 import { useCmsTranslations } from "@shopware/composables";
 import { defu } from "defu";
 import { computed } from "vue";
+
 import type { Schemas } from "#shopware";
 
 const { product, showContent = true } = defineProps<{

package/app/components/SwQuantitySelect.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { defu } from "defu";
 import { computed, useId } from "vue";
+
 import { useCmsTranslations } from "#imports";
 
 type Translations = {
@@ -63,7 +64,9 @@ const sizeClasses = {
 };
 </script>
 <template>
-  <div class="rounded outline outline-1 outline-offset-[-1px] outline-outline-outline inline-flex">
+  <div
+    class="rounded outline outline-1 outline-offset-[-1px] outline-outline-outline inline-flex"
+  >
     <button
       type="button"
       :class="sizeClasses[size]"
@@ -73,9 +76,13 @@ const sizeClasses = {
     >
       -
     </button>
-    <div class="bg-white border-l border-r border-outline-outline inline-flex flex-col justify-center items-center">
+    <div
+      class="bg-white border-l border-r border-outline-outline inline-flex flex-col justify-center items-center"
+    >
       <!-- visually hidden label for screen readers -->
-      <label :for="inputId" class="sr-only">{{ translations.form.quantitySelect.label }}</label>
+      <label :for="inputId" class="sr-only">{{
+        translations.form.quantitySelect.label
+      }}</label>
 
       <input
         :id="inputId"

package/app/components/SwSharedPrice.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { computed } from "vue";
+
 import { usePrice } from "#imports";
 
 const { getFormattedPrice } = usePrice();

package/app/components/SwSlider.vue

@@ -11,6 +11,7 @@ import {
   watch,
 } from "vue";
 import type { CSSProperties, VNode, VNodeArrayChildren } from "vue";
+
 import { useCmsElementConfig, useHead, useId } from "#imports";
 import type { Schemas } from "#shopware";
 

package/app/components/SwStockInfo.vue

@@ -31,14 +31,20 @@ translations = defu(useCmsTranslations(), translations) as Translations;
 </script>
 <template>
   <div class="inline-flex justify-start items-center gap-2">
-    <div class="w-2 h-2 bg-states-success rounded-full" v-if="availableStock > 0"></div>
+    <div
+      class="w-2 h-2 bg-states-success rounded-full"
+      v-if="availableStock > 0"
+    ></div>
     <div class="w-2 h-2 bg-states-error rounded-full" v-else></div>
-    <span v-if="availableStock >= minPurchase && deliveryTime">{{ translations.product.deliveryTime }} {{
-      deliveryTime?.name }}
+    <span v-if="availableStock >= minPurchase && deliveryTime"
+      >{{ translations.product.deliveryTime }} {{ deliveryTime?.name }}
     </span>
-    <span v-else-if="availableStock < minPurchase && deliveryTime && restockTime">
+    <span
+      v-else-if="availableStock < minPurchase && deliveryTime && restockTime"
+    >
       {{ translations.product.deliveryTime }} {{ restockTime }}
-      {{ translations.product.days }} {{ deliveryTime?.name }}</span>
+      {{ translations.product.days }} {{ deliveryTime?.name }}</span
+    >
     <span v-else>{{ translations.product.noAvailable }}</span>
   </div>
-</template>
+</template>

package/app/components/SwVariantConfigurator.vue

@@ -4,6 +4,7 @@ import { buildUrlPrefix, getProductRoute } from "@shopware/helpers";
 import { defu } from "defu";
 import { computed, ref, unref } from "vue";
 import type { ComputedRef } from "vue";
+
 import { useProductConfigurator, useRouter, useUrlResolver } from "#imports";
 import type { Schemas } from "#shopware";
 
@@ -84,7 +85,9 @@ const onHandleChange = async () => {
       :key="optionGroup.id"
       class="mt-6"
     >
-      <div class="text-sm text-gray-900 font-medium">{{ optionGroup.name }}</div>
+      <div class="text-sm text-gray-900 font-medium">
+        {{ optionGroup.name }}
+      </div>
       <fieldset class="mt-4 flex-1">
         <legend class="sr-only">
           {{ translations.product.chooseA }} {{ optionGroup.name }}

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

@@ -1,15 +1,20 @@
-<script setup lang="ts" generic="
+<script
+  setup
+  lang="ts"
+  generic="
     ListingFilter extends {
       code: string;
       min?: number;
       max?: number;
       label: string;
     }
-  ">
+  "
+>
 import { useCmsTranslations } from "@shopware/composables";
 import { onClickOutside, useDebounceFn, useEventListener } from "@vueuse/core";
 import { defu } from "defu";
 import { onMounted, reactive, ref, watch } from "vue";
+
 import type { Schemas } from "#shopware";
 
 const emits =
@@ -149,15 +154,17 @@ const startDrag = (type: "min" | "max", event: MouseEvent | TouchEvent) => {
           @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>
@@ -165,52 +172,94 @@ const startDrag = (type: "min" | "max", event: MouseEvent | TouchEvent) => {
 
     <!-- Filter content -->
     <transition name="filter-collapse">
-      <div v-if="isFilterVisible || displayMode === 'dropdown'" :id="filter.code"
-        class="self-stretch flex flex-col justify-start items-start gap-2.5">
+      <div
+        v-if="isFilterVisible || displayMode === 'dropdown'"
+        :id="filter.code"
+        class="self-stretch flex flex-col justify-start items-start gap-2.5"
+      >
         <div class="self-stretch flex flex-col justify-start items-start gap-1">
-          <div class="self-stretch inline-flex justify-between items-center gap-2">
+          <div
+            class="self-stretch inline-flex justify-between items-center gap-2"
+          >
             <div
-              class="w-16 h-10 px-2 py-1 rounded-lg outline outline-1 outline-offset-[-1px] outline-outline-outline-variant inline-flex flex-col justify-center items-start gap-2.5">
-              <input type="number" :placeholder="translations.listing.min" v-model.number="prices.min"
+              class="w-16 h-10 px-2 py-1 rounded-lg outline outline-1 outline-offset-[-1px] outline-outline-outline-variant inline-flex flex-col justify-center items-start gap-2.5"
+            >
+              <input
+                type="number"
+                :placeholder="translations.listing.min"
+                v-model.number="prices.min"
                 class="w-full bg-transparent border-none outline-none text-surface-on-surface text-sm font-normal leading-tight"
-                @change="emits('select-value', { code: filter.code, value: { min: prices.min, max: prices.max } })"
-                :min="filter.min" :max="prices.max" />
+                @change="
+                  emits('select-value', {
+                    code: filter.code,
+                    value: { min: prices.min, max: prices.max },
+                  })
+                "
+                :min="filter.min"
+                :max="prices.max"
+              />
             </div>
             <div
-              class="w-16 h-10 px-2 py-1 rounded-lg outline outline-1 outline-offset-[-1px] outline-outline-outline-variant inline-flex flex-col justify-center items-start gap-2.5">
-              <input type="number" :placeholder="translations.listing.max" v-model.number="prices.max"
+              class="w-16 h-10 px-2 py-1 rounded-lg outline outline-1 outline-offset-[-1px] outline-outline-outline-variant inline-flex flex-col justify-center items-start gap-2.5"
+            >
+              <input
+                type="number"
+                :placeholder="translations.listing.max"
+                v-model.number="prices.max"
                 class="w-full bg-transparent border-none outline-none text-surface-on-surface text-sm font-normal leading-tight"
-                @change="emits('select-value', { code: filter.code, value: { min: prices.min, max: prices.max } })"
-                :min="prices.min" :max="filter.max" />
+                @change="
+                  emits('select-value', {
+                    code: filter.code,
+                    value: { min: prices.min, max: prices.max },
+                  })
+                "
+                :min="prices.min"
+                :max="filter.max"
+              />
             </div>
           </div>
           <!-- Custom slider UI -->
-          <div class="relative w-64 h-10 mt-2 mx-auto flex items-center select-none">
+          <div
+            class="relative w-64 h-10 mt-2 mx-auto flex items-center select-none"
+          >
             <!-- Track -->
             <div
-              class="absolute left-0 top-1/2 -translate-y-1/2 w-full h-2 bg-surface-surface-container-highest rounded-full">
-            </div>
+              class="absolute left-0 top-1/2 -translate-y-1/2 w-full h-2 bg-surface-surface-container-highest rounded-full"
+            ></div>
             <!-- Active range -->
-            <div class="absolute top-1/2 -translate-y-1/2 h-2 bg-surface-surface-primary rounded-full" :style="{
-              left: ((prices.min - (filter.min ?? 0)) / ((filter.max ?? 100) - (filter.min ?? 0))) * 100 + '%',
-              width: ((prices.max - prices.min) / ((filter.max ?? 100) - (filter.min ?? 0))) * 100 + '%',
-            }"></div>
+            <div
+              class="absolute top-1/2 -translate-y-1/2 h-2 bg-surface-surface-primary rounded-full"
+              :style="{
+                left:
+                  ((prices.min - (filter.min ?? 0)) /
+                    ((filter.max ?? 100) - (filter.min ?? 0))) *
+                    100 +
+                  '%',
+                width:
+                  ((prices.max - prices.min) /
+                    ((filter.max ?? 100) - (filter.min ?? 0))) *
+                    100 +
+                  '%',
+              }"
+            ></div>
             <!-- Min thumb -->
             <div
               class="absolute top-1/2 -translate-y-1/2 w-5 h-5 bg-brand-primary rounded-full shadow-[2px_2px_10px_0px_rgba(0,0,0,0.15)] cursor-pointer touch-none"
               :style="{
-                left: `calc(${((prices.min - (filter.min ?? 0)) / ((filter.max ?? 100) - (filter.min ?? 0))) * 100}% - 10px)`
+                left: `calc(${((prices.min - (filter.min ?? 0)) / ((filter.max ?? 100) - (filter.min ?? 0))) * 100}% - 10px)`,
               }"
               @mousedown.prevent="startDrag('min', $event)"
-              @touchstart.prevent="startDrag('min', $event)"></div>
+              @touchstart.prevent="startDrag('min', $event)"
+            ></div>
             <!-- Max thumb -->
             <div
               class="absolute top-1/2 -translate-y-1/2 w-5 h-5 bg-brand-primary rounded-full shadow-[2px_2px_10px_0px_rgba(0,0,0,0.15)] cursor-pointer touch-none"
               :style="{
-                left: `calc(${((prices.max - (filter.min ?? 0)) / ((filter.max ?? 100) - (filter.min ?? 0))) * 100}% - 10px)`
+                left: `calc(${((prices.max - (filter.min ?? 0)) / ((filter.max ?? 100) - (filter.min ?? 0))) * 100}% - 10px)`,
               }"
               @mousedown.prevent="startDrag('max', $event)"
-              @touchstart.prevent="startDrag('max', $event)"></div>
+              @touchstart.prevent="startDrag('max', $event)"
+            ></div>
           </div>
         </div>
       </div>

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

@@ -13,6 +13,7 @@
 >
 import { getTranslatedProperty } from "@shopware/helpers";
 import { computed, ref } from "vue";
+
 import type { Schemas } from "#shopware";
 
 const {
@@ -75,15 +76,17 @@ const selectValue = (id: string) => {
           @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>
@@ -91,28 +94,40 @@ const selectValue = (id: string) => {
 
     <!-- Filter content -->
     <transition name="filter-collapse">
-      <div v-if="isFilterVisible || displayMode === 'dropdown'" :id="filter.code" class="self-stretch flex flex-col justify-start items-start gap-4">
-        <fieldset class="self-stretch flex flex-col justify-start items-start gap-4">
-        <legend class="sr-only">{{ filter.name }}</legend>
-        <label
-          v-for="option in filter.options || filter.entities"
-          :key="`${option.id}-${isChecked(option.id)}`"
-          class="self-stretch inline-flex justify-start items-start gap-2 cursor-pointer"
+      <div
+        v-if="isFilterVisible || displayMode === 'dropdown'"
+        :id="filter.code"
+        class="self-stretch flex flex-col justify-start items-start gap-4"
+      >
+        <fieldset
+          class="self-stretch flex flex-col justify-start items-start gap-4"
         >
-          <div class="w-4 self-stretch pt-[3px] flex justify-start items-start gap-2.5">
-            <SwCheckbox
-              :model-value="isChecked(option.id)"
-              @update:model-value="() => selectValue(option.id)"
-            />
-          </div>
-          <div class="flex-1 inline-flex flex-col justify-start items-start gap-0.5">
-            <div class="inline-flex justify-start items-center gap-1">
-              <div class="flex-1 text-surface-on-surface text-base font-normal leading-normal">
-                {{ getTranslatedProperty(option, 'name') }}
+          <legend class="sr-only">{{ filter.name }}</legend>
+          <label
+            v-for="option in filter.options || filter.entities"
+            :key="`${option.id}-${isChecked(option.id)}`"
+            class="self-stretch inline-flex justify-start items-start gap-2 cursor-pointer"
+          >
+            <div
+              class="w-4 self-stretch pt-[3px] flex justify-start items-start gap-2.5"
+            >
+              <SwCheckbox
+                :model-value="isChecked(option.id)"
+                @update:model-value="() => selectValue(option.id)"
+              />
+            </div>
+            <div
+              class="flex-1 inline-flex flex-col justify-start items-start gap-0.5"
+            >
+              <div class="inline-flex justify-start items-center gap-1">
+                <div
+                  class="flex-1 text-surface-on-surface text-base font-normal leading-normal"
+                >
+                  {{ getTranslatedProperty(option, "name") }}
+                </div>
               </div>
             </div>
-          </div>
-        </label>
+          </label>
         </fieldset>
       </div>
     </transition>

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

@@ -9,6 +9,7 @@
   "
 >
 import { computed, ref } from "vue";
+
 import type { Schemas } from "#shopware";
 
 const emits =
@@ -65,15 +66,17 @@ const toggle = () => {
           @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>
@@ -81,14 +84,23 @@ const toggle = () => {
 
     <!-- Filter content -->
     <transition name="filter-collapse">
-      <div v-if="isFilterVisible || displayMode === 'dropdown'" class="self-stretch flex flex-col justify-start items-start gap-4">
+      <div
+        v-if="isFilterVisible || displayMode === 'dropdown'"
+        class="self-stretch flex flex-col justify-start items-start gap-4"
+      >
         <div class="flex flex-row items-center gap-2 mt-2">
           <div
             v-for="i in 5"
             :key="i"
-            :class="['h-6 w-6 cursor-pointer', displayedScore >= i ? 'i-carbon-star-filled' : 'i-carbon-star']"
+            :class="[
+              'h-6 w-6 cursor-pointer',
+              displayedScore >= i ? 'i-carbon-star-filled' : 'i-carbon-star',
+            ]"
             @mouseleave="isHoverActive = false"
-            @click="hoverRating(i); onChangeRating()"
+            @click="
+              hoverRating(i);
+              onChangeRating();
+            "
             @mouseover="hoverRating(i)"
             :aria-label="`${i} star${i !== 1 ? 's' : ''}`"
           />