@shopware/cms-base-layer 4.0.0 → 4.1.0

package/app/helpers/cms/getVideoElementOptions.ts

@@ -0,0 +1,142 @@
+import type {
+  CmsElementVideo,
+  MediaDisplayMode,
+  VerticalAlign,
+} from "@shopware/composables";
+import { getTranslatedProperty } from "@shopware/helpers";
+
+type Alignment = Exclude<VerticalAlign, "">;
+
+export type VideoElementOptions = {
+  src?: string;
+  mimeType?: string;
+  poster?: string;
+  displayMode: MediaDisplayMode;
+  minHeight?: string;
+  placeholderAspectRatio?: string;
+  verticalAlign?: Alignment;
+  horizontalAlign?: Alignment;
+  autoplay: boolean;
+  muted: boolean;
+  loop: boolean;
+  playsInline: boolean;
+  controls: boolean;
+  preload: "auto" | "none";
+  ariaLabel?: string;
+  title?: string;
+};
+
+export type VideoToggleState = {
+  isPlaying: boolean;
+  hasFailed: boolean;
+  videoId: string;
+};
+
+export type VideoToggleLabels = {
+  playLabel: string;
+  pauseLabel: string;
+  loadError: string;
+};
+
+const DISPLAY_MODES: MediaDisplayMode[] = ["standard", "stretch", "cover"];
+const ALIGNMENTS: Alignment[] = ["flex-start", "center", "flex-end"];
+
+function getConfigValue<KEY extends keyof CmsElementVideo["config"]>(
+  element: CmsElementVideo,
+  key: KEY,
+): CmsElementVideo["config"][KEY]["value"] | undefined {
+  const config = element.config?.[key];
+
+  return config?.source === "mapped" ? undefined : config?.value;
+}
+
+function toAlignment(value: unknown): Alignment | undefined {
+  return ALIGNMENTS.find((alignment) => alignment === value);
+}
+
+export function getVideoElementOptions(
+  element: CmsElementVideo,
+): VideoElementOptions {
+  const media = element.data?.media ?? undefined;
+  const displayMode =
+    DISPLAY_MODES.find(
+      (mode) => mode === getConfigValue(element, "displayMode"),
+    ) ?? "standard";
+  const isCover = displayMode === "cover";
+  const showCover = !!getConfigValue(element, "showCover");
+  const autoplay = !showCover && !!getConfigValue(element, "autoPlay");
+  const poster =
+    (showCover && media?.extensions?.videoCoverMedia?.url) || undefined;
+  const label =
+    element.config?.ariaLabel?.source === "mapped"
+      ? ""
+      : (element.data?.ariaLabel ?? "").trim();
+
+  return {
+    src: media?.url || undefined,
+    mimeType: media?.mimeType || undefined,
+    poster,
+    displayMode,
+    minHeight: (isCover && getConfigValue(element, "minHeight")) || undefined,
+    placeholderAspectRatio:
+      showCover && !poster && displayMode === "stretch"
+        ? "auto 16 / 9"
+        : undefined,
+    verticalAlign: isCover
+      ? undefined
+      : toAlignment(getConfigValue(element, "verticalAlign")),
+    horizontalAlign: isCover
+      ? undefined
+      : toAlignment(getConfigValue(element, "horizontalAlign")),
+    autoplay,
+    muted: autoplay || !!getConfigValue(element, "muted"),
+    loop: !!getConfigValue(element, "loop"),
+    playsInline: !!getConfigValue(element, "playsInline"),
+    controls: !!getConfigValue(element, "showControls"),
+    preload: showCover ? "none" : "auto",
+    ariaLabel: label || getTranslatedProperty(media, "alt").trim() || undefined,
+    title: label || getTranslatedProperty(media, "title").trim() || undefined,
+  };
+}
+
+export function getVideoAttributes(options: VideoElementOptions) {
+  return {
+    preload: options.preload,
+    poster: options.poster,
+    autoplay: options.autoplay,
+    muted: options.muted,
+    loop: options.loop,
+    playsinline: options.playsInline || undefined,
+    controls: options.controls,
+    "aria-label": options.ariaLabel,
+    title: options.title,
+  };
+}
+
+function getToggleLabel(
+  state: VideoToggleState,
+  labels: VideoToggleLabels,
+): string {
+  if (state.hasFailed) return labels.loadError;
+
+  return state.isPlaying ? labels.pauseLabel : labels.playLabel;
+}
+
+export function getVideoToggleAttributes(
+  options: VideoElementOptions,
+  state: VideoToggleState,
+  labels: VideoToggleLabels,
+) {
+  if (options.controls) return {};
+
+  const label = getToggleLabel(state, labels);
+
+  return {
+    role: "button",
+    tabindex: 0,
+    "aria-label": label,
+    "aria-describedby": options.ariaLabel ? state.videoId : undefined,
+    "aria-disabled": state.hasFailed || undefined,
+    title: (!state.hasFailed && options.title) || label,
+  };
+}

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

@@ -44,6 +44,22 @@ describe("renderHtml", () => {
     expect(vnode.props?.class).toBeUndefined();
   });
 
+  it("passes the attributes of a tag as flat props", () => {
+    const vnode = render(
+      '<table><tr><td colspan="2" id="total" class="sum" style="color:red">1</td></tr></table>',
+    );
+    const table = (vnode.children as { children: unknown[] }[])[0];
+    const row = table?.children[0] as { children: unknown[] };
+    const cell = row.children[0] as { props: Record<string, unknown> };
+
+    expect(cell.props).toEqual({
+      colspan: "2",
+      id: "total",
+      class: "sum",
+      style: "color:red",
+    });
+  });
+
   it("keeps rendering the parsed children next to the container class", () => {
     const vnode = render("<h2>headline</h2>", {
       container: { type: "div", class: "cms-element-text" },

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

@@ -92,7 +92,6 @@ export function renderer(
         return config.textTransformer(node.content); // return text
       }
       if (node.type === "tag") {
-        const transformedNode = getOptionsFromNode(node, resolveUrl);
         const children: RawChildren[] = [];
         for (const child of node.children) {
           const rendered = _render(h, child);
@@ -104,8 +103,9 @@ export function renderer(
         if (componentConfig !== undefined) {
           return componentConfig.renderer(node, children, h, context);
         }
-        // else, create normal html element
-        return h(node.name, transformedNode, [...children]);
+        // else, create normal html element; Vue 3 takes attributes as flat props
+        const { attrs, ...options } = getOptionsFromNode(node, resolveUrl);
+        return h(node.name, { ...attrs, ...options }, [...children]);
       }
     }
     return undefined;

package/app/helpers/product/shouldShowBuyButton.test.ts

@@ -0,0 +1,21 @@
+import { describe, expect, it } from "vitest";
+
+import { shouldShowBuyButton } from "./shouldShowBuyButton";
+
+describe("shouldShowBuyButton", () => {
+  it("shows the button for a product without variants", () => {
+    expect(shouldShowBuyButton({ childCount: 0 })).toBe(true);
+  });
+
+  it("shows the button when childCount is missing", () => {
+    expect(shouldShowBuyButton({})).toBe(true);
+  });
+
+  it("hides the button for a variant parent", () => {
+    expect(shouldShowBuyButton({ childCount: 2 })).toBe(false);
+  });
+
+  it("hides the button when there is a from price", () => {
+    expect(shouldShowBuyButton({ childCount: 0 }, true)).toBe(false);
+  });
+});

package/app/helpers/product/shouldShowBuyButton.ts

@@ -0,0 +1,6 @@
+export function shouldShowBuyButton(
+  product: { childCount?: number } | undefined,
+  displayFrom = false,
+): boolean {
+  return !displayFrom && (product?.childCount ?? 0) <= 0;
+}

package/app/utils/{useSelectedListingFilters.test.ts → listingFilterState.test.ts}

@@ -3,7 +3,7 @@ import { describe, expect, it } from "vitest";
 import {
   applyQueryToFilters,
   createEmptyFilterState,
-} from "./useSelectedListingFilters";
+} from "./listingFilterState";
 
 describe("applyQueryToFilters", () => {
   it("populates sets from pipe-joined values", () => {

package/app/utils/{useSelectedListingFilters.ts → listingFilterState.ts}

@@ -1,6 +1,3 @@
-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";
@@ -77,35 +74,3 @@ export const applyQueryToFilters = (
     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();
-  // Fresh state per call, deliberately: the sidebar and the horizontal filter
-  // bar each hold their own selection object, so a mutation in one is invisible
-  // to the other until it reaches the route. The URL is what synchronises them.
-  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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@shopware/cms-base-layer",
-  "version": "4.0.0",
+  "version": "4.1.0",
   "description": "Vue CMS Nuxt Layer for Shopware",
   "author": "Shopware",
   "repository": {
@@ -32,34 +32,34 @@
     "nuxt.config.ts"
   ],
   "dependencies": {
-    "@iconify-json/carbon": "1.2.26",
+    "@iconify-json/carbon": "1.2.27",
     "@nuxt/image": "2.1.0",
     "@nuxt/kit": "4.5.2",
     "@tresjs/cientos": "5.8.1",
     "@tresjs/nuxt": "^5.6.3",
     "@vuelidate/core": "2.0.3",
     "@vuelidate/validators": "2.0.4",
-    "@vueuse/core": "14.4.0",
+    "@vueuse/core": "15.0.0",
     "entities": "8.0.0",
     "scule": "1.3.0",
     "html-to-ast": "0.0.6",
     "three": "0.185.1",
-    "vue": "3.5.42",
+    "vue": "3.5.43",
     "xss": "1.0.15",
-    "@shopware/composables": "1.13.0",
-    "@shopware/api-client": "1.6.0",
+    "@shopware/api-client": "1.7.0",
+    "@shopware/composables": "1.14.0",
     "@shopware/helpers": "1.8.0"
   },
   "devDependencies": {
     "@nuxt/schema": "4.5.2",
     "@types/three": "0.182.0",
     "@typescript/native-preview": "7.0.0-dev.20260205.1",
-    "@vitest/coverage-v8": "4.1.10",
+    "@vitest/coverage-v8": "5.0.0",
     "nuxt": "4.5.2",
     "typescript": "5.9.3",
-    "vitest": "4.1.10",
-    "vue-router": "5.2.0",
-    "vue-tsc": "3.3.9",
+    "vitest": "5.0.0",
+    "vue-router": "5.3.1",
+    "vue-tsc": "3.3.11",
     "tsconfig": "0.0.0"
   },
   "scripts": {