@shopware/cms-base-layer 3.0.0 → 3.1.0

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

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import type { CmsElementYoutubeVideo } from "@shopware/composables";
 import { computed } from "vue";
+
 import { useCmsElementConfig } from "#imports";
 
 const props = defineProps<{

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

@@ -35,7 +35,11 @@ const handleLimitChange = (event: Event) => {
   <div v-if="total > 0" class="flex flex-col gap-6 sm:gap-8 mt-6 sm:mt-8">
     <!-- Pagination Controls -->
     <div class="flex justify-center w-full">
-      <SwPagination :total="total" :current="current" @change-page="handlePageChange" />
+      <SwPagination
+        :total="total"
+        :current="current"
+        @change-page="handlePageChange"
+      />
     </div>
 
     <!-- Items per page selector -->
@@ -61,7 +65,9 @@ const handleLimitChange = (event: Event) => {
           <option :value="30">30 {{ translations.listing.products }}</option>
           <option :value="45">45 {{ translations.listing.products }}</option>
         </select>
-        <div class="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-3">
+        <div
+          class="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-3"
+        >
           <SwChevronIcon direction="down" :size="16" />
         </div>
       </div>

package/app/components/public/cms/section/CmsSectionSidebar.vue

@@ -18,14 +18,19 @@ provide("cms-section-layout", "sidebar");
 </script>
 
 <template>
-  <div class="self-stretch flex flex-col lg:flex-row items-stretch gap-16" :class="{
-    'px-6': fullWidth,
-  }">
-    <aside :class="{
-      'w-full lg:w-72 xl:w-80 flex-shrink-0 bg-surface-surface flex flex-col justify-start items-stretch gap-4 lg:sticky lg:top-20 px-4 lg:px-0':
-        mobileBehavior !== 'hidden',
-      'hidden lg:block': mobileBehavior === 'hidden',
-    }">
+  <div
+    class="self-stretch flex flex-col lg:flex-row items-stretch gap-16"
+    :class="{
+      'px-6': fullWidth,
+    }"
+  >
+    <aside
+      :class="{
+        'w-full lg:w-72 xl:w-80 flex-shrink-0 bg-surface-surface flex flex-col justify-start items-stretch gap-4 lg:sticky lg:top-20 px-4 lg:px-0':
+          mobileBehavior !== 'hidden',
+        'hidden lg:block': mobileBehavior === 'hidden',
+      }"
+    >
       <div v-for="cmsBlock in sidebarBlocks" :key="cmsBlock.id" class="w-full">
         <CmsGenericBlock :content="cmsBlock" />
       </div>

package/app/components/public/cms/skeleton/ProductCardSkeleton.vue

@@ -5,9 +5,14 @@ const placeholderSvg = useImagePlaceholder();
 </script>
 
 <template>
-  <div role="status" class="p-px flex flex-col justify-start items-start overflow-hidden">
+  <div
+    role="status"
+    class="p-px flex flex-col justify-start items-start overflow-hidden"
+  >
     <!-- Image skeleton -->
-    <div class="self-stretch min-h-[350px] relative flex items-center justify-center overflow-hidden aspect-square animate-pulse">
+    <div
+      class="self-stretch min-h-[350px] relative flex items-center justify-center overflow-hidden aspect-square animate-pulse"
+    >
       <img
         :src="placeholderSvg"
         alt=""
@@ -18,9 +23,15 @@ const placeholderSvg = useImagePlaceholder();
 
     <!-- Details skeleton -->
     <div class="w-full pt-4 animate-pulse">
-      <div class="h-4 bg-gray-200 rounded-full dark:bg-gray-700 w-3/4 mb-3"></div>
-      <div class="h-3 bg-gray-200 rounded-full dark:bg-gray-700 w-1/2 mb-4"></div>
-      <div class="h-5 bg-gray-200 rounded-full dark:bg-gray-700 w-20 mb-3"></div>
+      <div
+        class="h-4 bg-gray-200 rounded-full dark:bg-gray-700 w-3/4 mb-3"
+      ></div>
+      <div
+        class="h-3 bg-gray-200 rounded-full dark:bg-gray-700 w-1/2 mb-4"
+      ></div>
+      <div
+        class="h-5 bg-gray-200 rounded-full dark:bg-gray-700 w-20 mb-3"
+      ></div>
       <div class="h-10 bg-gray-200 rounded dark:bg-gray-700 w-full"></div>
     </div>
     <span class="sr-only">Loading...</span>

package/app/components/ui/SwitchButton.vue

@@ -47,9 +47,11 @@ const activateByClick = (ev?: Event) => {
   <div class="w-full inline-flex flex-col justify-start items-start gap-2">
     <div class="self-stretch inline-flex justify-start items-center gap-3">
       <!-- left label that toggles the input via for="#inputId" -->
-      <label :for="inputId"
+      <label
+        :for="inputId"
         class="flex-1 flex justify-start items-center gap-1 text-surface-on-surface text-base font-normal leading-normal cursor-pointer"
-        :class="{ 'cursor-not-allowed': disabled }">
+        :class="{ 'cursor-not-allowed': disabled }"
+      >
         <span v-if="$slots.default">
           <slot />
         </span>
@@ -57,23 +59,55 @@ const activateByClick = (ev?: Event) => {
       </label>
 
       <div class="w-10 h-6 relative">
-        <label class="inline-block cursor-pointer" :class="{ 'cursor-not-allowed': disabled }">
-          <input ref="inputRef" :id="inputId" type="checkbox" :name="inputName" class="sr-only" :checked="localChecked"
+        <label
+          class="inline-block cursor-pointer"
+          :class="{ 'cursor-not-allowed': disabled }"
+        >
+          <input
+            ref="inputRef"
+            :id="inputId"
+            type="checkbox"
+            :name="inputName"
+            class="sr-only"
+            :checked="localChecked"
             @change="toggleState()"
-            :disabled="disabled" :aria-label="ariaLabel || undefined" v-bind="$attrs" />
-          <span role="switch" :aria-checked="localChecked" :tabindex="disabled ? -1 : 0"
+            :disabled="disabled"
+            :aria-label="ariaLabel || undefined"
+            v-bind="$attrs"
+          />
+          <span
+            role="switch"
+            :aria-checked="localChecked"
+            :tabindex="disabled ? -1 : 0"
             class="w-10 h-6 relative rounded-full flex-shrink-0 inline-block switch-track cursor-pointer"
-            :class="localChecked ? 'bg-brand-secondary switch-track--on' : 'bg-surface-surface-container-highest'"
-            @keydown.space.prevent="activateByKeyboard" @click.prevent="activateByClick">
-            <span class="w-4 h-4 rounded-full absolute switch-knob"
+            :class="
+              localChecked
+                ? 'bg-brand-secondary switch-track--on'
+                : 'bg-surface-surface-container-highest'
+            "
+            @keydown.space.prevent="activateByKeyboard"
+            @click.prevent="activateByClick"
+          >
+            <span
+              class="w-4 h-4 rounded-full absolute switch-knob"
               :style="{ left: localChecked ? '19px' : '4px', top: '4px' }"
-              :class="localChecked ? 'bg-brand-on-secondary' : 'bg-surface-on-surface-variant'"></span>
+              :class="
+                localChecked
+                  ? 'bg-brand-on-secondary'
+                  : 'bg-surface-on-surface-variant'
+              "
+            ></span>
           </span>
         </label>
       </div>
     </div>
-    <div v-if="description || $slots.description" class="self-stretch inline-flex justify-start items-center gap-2.5">
-      <div class="flex-1 justify-start text-surface-on-surface-variant text-sm font-normal leading-tight">
+    <div
+      v-if="description || $slots.description"
+      class="self-stretch inline-flex justify-start items-center gap-2.5"
+    >
+      <div
+        class="flex-1 justify-start text-surface-on-surface-variant text-sm font-normal leading-tight"
+      >
         <slot name="description">{{ description }}</slot>
       </div>
     </div>
@@ -82,7 +116,9 @@ const activateByClick = (ev?: Event) => {
 
 <style scoped>
 .switch-track {
-  transition: background-color 180ms ease-in-out, box-shadow 180ms ease-in-out;
+  transition:
+    background-color 180ms ease-in-out,
+    box-shadow 180ms ease-in-out;
 }
 
 .switch-track--on {
@@ -91,7 +127,10 @@ const activateByClick = (ev?: Event) => {
 }
 
 .switch-knob {
-  transition: left 180ms cubic-bezier(.2, .9, .2, 1), top 180ms cubic-bezier(.2, .9, .2, 1), background-color 120ms linear;
+  transition:
+    left 180ms cubic-bezier(0.2, 0.9, 0.2, 1),
+    top 180ms cubic-bezier(0.2, 0.9, 0.2, 1),
+    background-color 120ms linear;
 }
 
 .switch-track:focus {

package/app/components/ui/WishlistIcon.vue

@@ -9,7 +9,13 @@ const { filled = false } = defineProps<{
     <!-- <Icon size="1rem" name="shopware:heart" v-if="type !== 'filled'" class="w-6 h-5 block hover:cursor-pointer" :class="[
       styles[type]
     ]" /> -->
-    <div class="i-carbon-favorite w-6 h-5 hover:cursor-pointer" v-if="!filled"></div>
-    <div class="i-carbon-favorite-filled w-6 h-5 hover:cursor-pointer" v-else></div>
+    <div
+      class="i-carbon-favorite w-6 h-5 hover:cursor-pointer"
+      v-if="!filled"
+    ></div>
+    <div
+      class="i-carbon-favorite-filled w-6 h-5 hover:cursor-pointer"
+      v-else
+    ></div>
   </div>
 </template>

package/app/composables/useLcpImagePreload.test.ts

@@ -1,4 +1,5 @@
 import { describe, expect, it } from "vitest";
+
 import { findFirstCmsImageUrl } from "../helpers/cms/findFirstCmsImageUrl";
 
 type Sections = Parameters<typeof findFirstCmsImageUrl>[0];

package/app/composables/useLcpImagePreload.ts

@@ -1,6 +1,8 @@
 import { computed } from "vue";
+
 import { useHead } from "#imports";
 import type { Schemas } from "#shopware";
+
 import { findFirstCmsImageUrl } from "../helpers/cms/findFirstCmsImageUrl";
 import { useTypedAppConfig } from "./useTypedAppConfig";
 

package/app/composables/useTypedAppConfig.ts

@@ -1,4 +1,5 @@
 import type { BackgroundImageOptions } from "@shopware/helpers";
+
 import { useAppConfig } from "#imports";
 
 type CmsBaseLayerAppConfig = ReturnType<typeof useAppConfig> & {

package/app/helpers/cms/getImageSizes.test.ts

@@ -1,4 +1,5 @@
 import { describe, expect, it } from "vitest";
+
 import { getImageSizes } from "./getImageSizes";
 
 describe("getImageSizes", () => {

package/app/helpers/html-to-vue/ast.ts

@@ -3,6 +3,7 @@
  */
 // @ts-expect-error - html-to-ast has type definition issues with package.json exports
 import { parse } from "html-to-ast";
+
 import type { NodeObject } from "./getOptionsFromNode";
 
 type ASTNode = NodeObject | NodeObject[];

package/app/helpers/html-to-vue/getOptionsFromNode.test.ts

@@ -1,4 +1,5 @@
 import { beforeEach, describe, expect, it, vi } from "vitest";
+
 import { getOptionsFromNode } from "./getOptionsFromNode";
 import type { NodeObject } from "./getOptionsFromNode";
 

package/app/helpers/html-to-vue/renderToHtml.ts

@@ -3,6 +3,7 @@
  */
 
 import type { ComponentInternalInstance, h } from "vue";
+
 import { type RectifyConfig, generateAST, rectifyAST } from "./ast";
 import { type RendererConfig, renderer } from "./renderer";
 

package/app/helpers/html-to-vue/renderer.ts

@@ -3,6 +3,7 @@
  */
 
 import type { ComponentInternalInstance, VNode } from "vue";
+
 import { isNode } from "./ast";
 import type { NodeObject } from "./getOptionsFromNode";
 import { getOptionsFromNode } from "./getOptionsFromNode";

package/app/providers/shopware.test.ts

@@ -1,5 +1,6 @@
 import type { ImageCTX } from "@nuxt/image";
 import { describe, expect, it } from "vitest";
+
 import shopwareProvider from "./shopware";
 
 describe("Shopware Image Provider", () => {

package/app/utils/routeQuery.test.ts

@@ -0,0 +1,65 @@
+import { describe, expect, it } from "vitest";
+
+import { firstQueryValue, toNumber } from "./routeQuery";
+
+describe("firstQueryValue", () => {
+  it("returns a plain string value", () => {
+    expect(firstQueryValue("name-asc")).toBe("name-asc");
+  });
+
+  it("returns the first element of a repeated (array) param", () => {
+    expect(firstQueryValue(["30", "45"])).toBe("30");
+  });
+
+  it("returns undefined for undefined", () => {
+    expect(firstQueryValue(undefined)).toBeUndefined();
+  });
+
+  it("returns undefined for null", () => {
+    expect(firstQueryValue(null)).toBeUndefined();
+  });
+
+  it("returns undefined for an empty array", () => {
+    expect(firstQueryValue([])).toBeUndefined();
+  });
+
+  it("returns undefined when the first array element is null", () => {
+    expect(firstQueryValue([null])).toBeUndefined();
+  });
+});
+
+describe("toNumber", () => {
+  it("parses an integer string", () => {
+    expect(toNumber("15")).toBe(15);
+  });
+
+  it("parses a decimal string", () => {
+    expect(toNumber("19.99")).toBe(19.99);
+  });
+
+  it("parses zero and negative values", () => {
+    expect(toNumber("0")).toBe(0);
+    expect(toNumber("-5")).toBe(-5);
+  });
+
+  it("returns undefined for undefined", () => {
+    expect(toNumber(undefined)).toBeUndefined();
+  });
+
+  it("returns undefined for an empty string", () => {
+    expect(toNumber("")).toBeUndefined();
+  });
+
+  it("returns undefined for a non-numeric string", () => {
+    expect(toNumber("abc")).toBeUndefined();
+    expect(toNumber("12px")).toBeUndefined();
+  });
+
+  it("returns undefined for non-finite values", () => {
+    expect(toNumber("Infinity")).toBeUndefined();
+  });
+
+  it("composes with firstQueryValue for repeated numeric params", () => {
+    expect(toNumber(firstQueryValue(["30", "45"]))).toBe(30);
+  });
+});

package/app/utils/routeQuery.ts

@@ -0,0 +1,26 @@
+import type { LocationQuery } from "vue-router";
+
+/**
+ * Collapses a route-query param to a single string.
+ *
+ * Router query values are `string | null`, an array when a param is repeated
+ * (e.g. `?p=1&p=2`), or `undefined` when absent. Returns the first usable
+ * string, or `undefined` for missing/empty/null values.
+ */
+export const firstQueryValue = (
+  value: LocationQuery[string] | undefined,
+): string | undefined => {
+  const raw = Array.isArray(value) ? value[0] : value;
+  return raw ?? undefined;
+};
+
+/**
+ * Parses a query string (typically from {@link firstQueryValue}) into a finite
+ * number, or `undefined` when missing/empty/non-numeric. Lets callers fall back
+ * with `??` instead of forwarding `NaN` into a request.
+ */
+export const toNumber = (value: string | undefined): number | undefined => {
+  if (value === undefined || value === "") return undefined;
+  const parsed = Number(value);
+  return Number.isFinite(parsed) ? parsed : undefined;
+};

package/app/utils/useSelectedListingFilters.test.ts

@@ -0,0 +1,82 @@
+import { describe, expect, it } from "vitest";
+
+import {
+  applyQueryToFilters,
+  createEmptyFilterState,
+} from "./useSelectedListingFilters";
+
+describe("applyQueryToFilters", () => {
+  it("populates sets from pipe-joined values", () => {
+    const state = createEmptyFilterState();
+    applyQueryToFilters(state, { manufacturer: "a|b", properties: "x" });
+    expect([...state.manufacturer]).toEqual(["a", "b"]);
+    expect([...state.properties]).toEqual(["x"]);
+  });
+
+  it("clears removed filters when the query no longer has them (Back/Forward)", () => {
+    const state = createEmptyFilterState();
+    applyQueryToFilters(state, { manufacturer: "a|b", search: "shirt" });
+    applyQueryToFilters(state, { search: "shirt" }); // manufacturer removed
+    expect(state.manufacturer.size).toBe(0);
+    expect(state.properties.size).toBe(0);
+  });
+
+  it("clears removed scalar filters on resync", () => {
+    const state = createEmptyFilterState();
+    applyQueryToFilters(state, {
+      "min-price": "10",
+      "max-price": "20",
+      rating: "4",
+      "shipping-free": "true",
+    });
+    applyQueryToFilters(state, {});
+    expect(state["min-price"]).toBeUndefined();
+    expect(state["max-price"]).toBeUndefined();
+    expect(state.rating).toBeUndefined();
+    expect(state["shipping-free"]).toBeUndefined();
+  });
+
+  it("keeps the Set identity stable across re-applies (reactive binding)", () => {
+    const state = createEmptyFilterState();
+    const manufacturerRef = state.manufacturer;
+    const propertiesRef = state.properties;
+    applyQueryToFilters(state, { manufacturer: "a" });
+    expect(state.manufacturer).toBe(manufacturerRef);
+    expect(state.properties).toBe(propertiesRef);
+  });
+
+  it("drops empty members from pipe-joined values", () => {
+    const state = createEmptyFilterState();
+    applyQueryToFilters(state, { manufacturer: "a||b|" });
+    expect([...state.manufacturer]).toEqual(["a", "b"]);
+  });
+
+  it("parses scalars array/NaN-safe and ignores junk", () => {
+    const state = createEmptyFilterState();
+    applyQueryToFilters(state, {
+      "min-price": ["10", "20"],
+      "max-price": "abc",
+      rating: "4",
+      "shipping-free": "true",
+    });
+    expect(state["min-price"]).toBe(10); // first of repeated param
+    expect(state["max-price"]).toBeUndefined(); // NaN -> undefined
+    expect(state.rating).toBe(4);
+    expect(state["shipping-free"]).toBe(true);
+  });
+
+  it("treats shipping-free other than 'true' as false", () => {
+    const state = createEmptyFilterState();
+    applyQueryToFilters(state, { "shipping-free": "false" });
+    expect(state["shipping-free"]).toBe(false);
+  });
+
+  it("is idempotent (same query twice -> equal state)", () => {
+    const state = createEmptyFilterState();
+    const query = { manufacturer: "a|b", rating: "4" };
+    applyQueryToFilters(state, query);
+    applyQueryToFilters(state, query);
+    expect([...state.manufacturer]).toEqual(["a", "b"]);
+    expect(state.rating).toBe(4);
+  });
+});

package/app/utils/useSelectedListingFilters.ts

@@ -0,0 +1,105 @@
+import { reactive, watch } from "vue";
+import type { UnwrapNestedRefs } from "vue";
+import { useRoute } from "vue-router";
+import type { LocationQuery } from "vue-router";
+
+import { firstQueryValue, toNumber } from "./routeQuery";
+
+export type FilterState = {
+  manufacturer: Set<string>;
+  properties: Set<string>;
+  "min-price": number | undefined;
+  "max-price": number | undefined;
+  rating: number | undefined;
+  "shipping-free": boolean | undefined;
+};
+
+/** Fresh, fully-empty filter state. The single source of "no selection". */
+export const createEmptyFilterState = (): FilterState => ({
+  manufacturer: new Set<string>(),
+  properties: new Set<string>(),
+  "min-price": undefined,
+  "max-price": undefined,
+  rating: undefined,
+  "shipping-free": undefined,
+});
+
+/**
+ * Resets `state` to empty, then repopulates it from `query`. Pure with respect
+ * to the router: it only mutates `state`, never navigates or fetches.
+ *
+ * Reset-first is what clears filters whose query param vanished (e.g. browser
+ * Back/Forward), which the old add-only loop left lingering. Idempotent:
+ * applying the same query twice yields identical contents, so it is safe to
+ * call from a route.query watcher that also fires on the user's own
+ * executeSearch() push.
+ *
+ * Array-valued params (e.g. ?manufacturer=a&manufacturer=b) collapse to the
+ * first value via firstQueryValue; numeric params are NaN-safe via toNumber -
+ * consistent with the rest of the listing parsing.
+ */
+export const applyQueryToFilters = (
+  state: FilterState,
+  query: LocationQuery,
+): void => {
+  // 1) Reset every field. Clear the Sets in place so their identity is kept
+  //    (props bound to them stay reactive); replace scalars with undefined.
+  state.manufacturer.clear();
+  state.properties.clear();
+  state["min-price"] = undefined;
+  state["max-price"] = undefined;
+  state.rating = undefined;
+  state["shipping-free"] = undefined;
+
+  // 2) Repopulate from the current query.
+  for (const code of ["manufacturer", "properties"] as const) {
+    const value = firstQueryValue(query[code]);
+    if (!value) continue;
+    for (const element of value.split("|")) {
+      if (element) state[code].add(element);
+    }
+  }
+
+  const minPrice = toNumber(firstQueryValue(query["min-price"]));
+  if (minPrice !== undefined) state["min-price"] = minPrice;
+
+  const maxPrice = toNumber(firstQueryValue(query["max-price"]));
+  if (maxPrice !== undefined) state["max-price"] = maxPrice;
+
+  const rating = toNumber(firstQueryValue(query.rating));
+  if (rating !== undefined) state.rating = rating;
+
+  const shippingFree = firstQueryValue(query["shipping-free"]);
+  if (shippingFree !== undefined) {
+    state["shipping-free"] = shippingFree === "true";
+  }
+};
+
+/**
+ * Returns the reactive filter state, populated from the current route.query at
+ * setup (runs on server AND client -> identical first render, no hydration
+ * mismatch) and kept in sync on every subsequent query-only navigation
+ * (Back/Forward, manual URL edits, the component's own executeSearch push).
+ *
+ * The watcher is intentionally NOT immediate: the setup-time apply already
+ * covers the first render, and an immediate watcher would re-run during
+ * hydration. It only resyncs UI state - it never navigates or fetches - so it
+ * cannot loop with executeSearch() nor cause an extra listing request.
+ */
+export const useSelectedListingFilters = (): UnwrapNestedRefs<FilterState> => {
+  const route = useRoute();
+  const state = reactive<FilterState>(createEmptyFilterState());
+
+  // Initial parse (SSR + first client render).
+  applyQueryToFilters(state as FilterState, route.query);
+
+  // Resync on query-only route changes while the component stays mounted.
+  watch(
+    () => route.query,
+    (query) => {
+      applyQueryToFilters(state as FilterState, query);
+    },
+  );
+
+  return state;
+};

package/nuxt.config.ts

@@ -1,6 +1,7 @@
 import { createResolver } from "@nuxt/kit";
 import type { NuxtConfig } from "@nuxt/schema";
 import { defineNuxtConfig } from "nuxt/config";
+import type { LoggingFunction, RollupLog } from "rollup";
 
 const { resolve: resolveLayer } = createResolver(import.meta.url);
 
@@ -9,7 +10,11 @@ export default defineNuxtConfig({
   // to prevent bundling heavy 3D libraries in the initial bundle.
   // If you need 3D support, add "@tresjs/nuxt" to your app's nuxt.config.ts modules array
   // and dynamically import SwMedia3D using defineAsyncComponent.
-  modules: ["@unocss/nuxt", "@nuxt/image"],
+  //
+  // @unocss/nuxt is not included here either. This layer only ships CMS components,
+  // the UnoCSS setup lives in @shopware/unocss-design-tokens-layer (or your own config),
+  // so apps that don't use UnoCSS can still extend this layer.
+  modules: ["@nuxt/image"],
 
   hooks: {
     "components:extend"(components) {
@@ -115,6 +120,24 @@ export default defineNuxtConfig({
     optimizeDeps: {
       include: ["xss"],
     },
+    build: {
+      // Async SwMedia3D/three chunk is ~977 kB after minify; that split is intentional.
+      chunkSizeWarningLimit: 1000,
+    },
+  },
+  nitro: {
+    rollupConfig: {
+      // @vueuse/shared still embeds @__NO_SIDE_EFFECTS__ inside JSDoc (injectLocal).
+      // Nitro/Rollup treats that as a misplaced annotation. Track upstream vueuse.
+      onwarn(warning: RollupLog, warn: LoggingFunction) {
+        if (
+          warning.message?.includes("annotation that Rollup cannot interpret")
+        ) {
+          return;
+        }
+        warn(warning);
+      },
+    },
   },
   telemetry: {
     enabled: false,