@shopware/cms-base-layer 1.5.1 → 2.1.0

package/app/components/ui/SwitchButton.vue

@@ -0,0 +1,100 @@
+<script setup lang="ts">
+import { computed, ref, watch } from "vue";
+
+const props = defineProps<{
+  name?: string;
+  ariaLabel?: string;
+  label?: string;
+  description?: string;
+  disabled?: boolean;
+}>();
+
+const modelValue = defineModel<boolean | null>();
+
+const emits = defineEmits<{
+  change: [v: boolean | null];
+}>();
+
+const value = computed(() => !!modelValue.value);
+
+const localChecked = ref<boolean>(value.value);
+watch(value, (v) => {
+  localChecked.value = v;
+});
+
+const inputName = props.name ?? "switch-button";
+const inputId = `switch-${inputName}`;
+const inputRef = ref<HTMLInputElement | null>(null);
+
+const activateByKeyboard = () => {
+  inputRef.value?.click();
+};
+const toggleState = (next?: boolean) => {
+  if (props.disabled) return;
+  const v = typeof next === "boolean" ? next : !localChecked.value;
+  localChecked.value = v;
+  modelValue.value = v;
+  emits("change", v);
+};
+
+const activateByClick = (ev?: Event) => {
+  ev?.stopPropagation();
+  toggleState();
+};
+</script>
+
+<template>
+  <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"
+        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 }">
+        <span v-if="$slots.default">
+          <slot />
+        </span>
+        <span v-else-if="label">{{ label }}</span>
+      </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"
+            @change="toggleState()"
+            :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"
+              :style="{ left: localChecked ? '19px' : '4px', top: '4px' }"
+              :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">
+        <slot name="description">{{ description }}</slot>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.switch-track {
+  transition: background-color 180ms ease-in-out, box-shadow 180ms ease-in-out;
+}
+
+.switch-track--on {
+  box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.08);
+  /* subtle glow when on */
+}
+
+.switch-knob {
+  transition: left 180ms cubic-bezier(.2, .9, .2, 1), top 180ms cubic-bezier(.2, .9, .2, 1), background-color 120ms linear;
+}
+
+.switch-track:focus {
+  outline: none;
+}
+</style>

package/app/components/ui/UserIcon.vue

@@ -0,0 +1,11 @@
+<script setup lang="ts">
+import UserSvg from "@cms-assets/icons/user.svg";
+
+const { size = 24 } = defineProps<{
+  size?: number;
+}>();
+</script>
+
+<template>
+  <SwBaseIcon :src="UserSvg" :size="size" alt="User" />
+</template>

package/app/components/ui/WishlistIcon.vue

@@ -0,0 +1,15 @@
+<script setup lang="ts">
+const { filled = false } = defineProps<{
+  filled?: boolean;
+}>();
+</script>
+<template>
+  <div class="relative">
+    <!-- use when filled icon is ready -->
+    <!-- <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>
+</template>

package/app/composables/useImagePlaceholder.ts

@@ -0,0 +1,27 @@
+import { useAppConfig } from "nuxt/app";
+
+/**
+ * Composable that provides an SVG placeholder image as a data URI
+ * Note: CSS variables and currentColor don't work in data URIs since SVGs are rendered in isolation
+ *
+ * @param color - Hex color for the placeholder (optional - defaults to appConfig.imagePlaceholder.color or #543B95)
+ * @returns Base64-encoded SVG data URI
+ */
+export function useImagePlaceholder(color?: string) {
+  const appConfig = useAppConfig();
+  const placeholderColor =
+    color || appConfig.imagePlaceholder?.color || "#543B95";
+
+  const placeholderSvg = `data:image/svg+xml;base64,${btoa(
+    `
+<svg width="96" height="96" viewBox="0 0 96 96" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <rect width="96" height="96" fill="${placeholderColor}" opacity="0.08"/>
+  <g transform="translate(36, 36)">
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M3 22H21C21.5523 22 22 21.5523 22 21V17L17.7071 12.7071C17.3166 12.3166 16.6834 12.3166 16.2929 12.7071L10.5 18.5C10.2239 18.7761 9.77614 18.7761 9.5 18.5C9.22386 18.2239 9.22386 17.7761 9.5 17.5L11 16L8.70711 13.7071C8.31658 13.3166 7.68342 13.3166 7.29289 13.7071L2 19V21C2 21.5523 2.44772 22 3 22ZM21 24H3C1.34315 24 0 22.6569 0 21V3C0 1.34315 1.34315 0 3 0H21C22.6569 0 24 1.34315 24 3V21C24 22.6569 22.6569 24 21 24ZM6.5 9C7.88071 9 9 7.88071 9 6.5C9 5.11929 7.88071 4 6.5 4C5.11929 4 4 5.11929 4 6.5C4 7.88071 5.11929 9 6.5 9Z" fill="${placeholderColor}" opacity="0.4"/>
+  </g>
+</svg>
+`.trim(),
+  )}`;
+
+  return placeholderSvg;
+}

package/app/composables/useLcpImagePreload.test.ts

@@ -0,0 +1,229 @@
+import { describe, expect, it } from "vitest";
+import { findFirstCmsImageUrl } from "../helpers/cms/findFirstCmsImageUrl";
+
+type Sections = Parameters<typeof findFirstCmsImageUrl>[0];
+
+function makeSection(overrides: Record<string, unknown> = {}) {
+  return {
+    id: "s1",
+    position: 0,
+    type: "default",
+    sizingMode: "boxed",
+    mobileBehavior: "wrap",
+    visibility: {},
+    ...overrides,
+  } as Sections[number];
+}
+
+function makeBlock(overrides: Record<string, unknown> = {}) {
+  return {
+    id: "b1",
+    position: 0,
+    type: "image",
+    sectionPosition: "main",
+    marginTop: "0",
+    marginBottom: "0",
+    marginLeft: "0",
+    marginRight: "0",
+    visibility: {},
+    ...overrides,
+  };
+}
+
+describe("findFirstCmsImageUrl", () => {
+  it("should return undefined for empty sections", () => {
+    expect(findFirstCmsImageUrl([])).toBeUndefined();
+  });
+
+  it("should return undefined when no images exist", () => {
+    const sections = [
+      makeSection({ blocks: [makeBlock({ slots: [] })] }),
+    ] as Sections;
+    expect(findFirstCmsImageUrl(sections)).toBeUndefined();
+  });
+
+  it("should find a section background image", () => {
+    const sections = [
+      makeSection({
+        backgroundMedia: {
+          url: "https://cdn.example.com/section-bg.jpg",
+          metaData: { width: 1920, height: 1080 },
+        },
+      }),
+    ] as Sections;
+    const result = findFirstCmsImageUrl(sections);
+    expect(result).toContain("cdn.example.com");
+    expect(result).toContain("section-bg.jpg");
+  });
+
+  it("should find a block background image", () => {
+    const sections = [
+      makeSection({
+        blocks: [
+          makeBlock({
+            backgroundMedia: {
+              url: "https://cdn.example.com/block-bg.jpg",
+              metaData: { width: 800, height: 600 },
+            },
+            slots: [],
+          }),
+        ],
+      }),
+    ] as Sections;
+    const result = findFirstCmsImageUrl(sections);
+    expect(result).toContain("cdn.example.com");
+    expect(result).toContain("block-bg.jpg");
+  });
+
+  it("should find an image element media URL", () => {
+    const sections = [
+      makeSection({
+        blocks: [
+          makeBlock({
+            slots: [
+              {
+                id: "slot1",
+                type: "image",
+                slot: "content",
+                data: {
+                  media: { url: "https://cdn.example.com/element.jpg" },
+                },
+              },
+            ],
+          }),
+        ],
+      }),
+    ] as Sections;
+    const result = findFirstCmsImageUrl(sections);
+    expect(result).toBe("https://cdn.example.com/element.jpg");
+  });
+
+  it("should apply format option to element media URL", () => {
+    const sections = [
+      makeSection({
+        blocks: [
+          makeBlock({
+            slots: [
+              {
+                id: "slot1",
+                type: "image",
+                slot: "content",
+                data: {
+                  media: { url: "https://cdn.example.com/element.jpg" },
+                },
+              },
+            ],
+          }),
+        ],
+      }),
+    ] as Sections;
+    const result = findFirstCmsImageUrl(sections, { format: "webp" });
+    expect(result).toBe("https://cdn.example.com/element.jpg?format=webp");
+  });
+
+  it("should apply format and quality options to element media URL", () => {
+    const sections = [
+      makeSection({
+        blocks: [
+          makeBlock({
+            slots: [
+              {
+                id: "slot1",
+                type: "image",
+                slot: "content",
+                data: {
+                  media: { url: "https://cdn.example.com/element.jpg" },
+                },
+              },
+            ],
+          }),
+        ],
+      }),
+    ] as Sections;
+    const result = findFirstCmsImageUrl(sections, {
+      format: "webp",
+      quality: 85,
+    });
+    expect(result).toBe(
+      "https://cdn.example.com/element.jpg?format=webp&quality=85",
+    );
+  });
+
+  it("should prioritize section bg over block bg over element media", () => {
+    const sections = [
+      makeSection({
+        backgroundMedia: {
+          url: "https://cdn.example.com/section-bg.jpg",
+          metaData: { width: 1920, height: 1080 },
+        },
+        blocks: [
+          makeBlock({
+            backgroundMedia: {
+              url: "https://cdn.example.com/block-bg.jpg",
+              metaData: { width: 800, height: 600 },
+            },
+            slots: [
+              {
+                id: "slot1",
+                type: "image",
+                slot: "content",
+                data: {
+                  media: { url: "https://cdn.example.com/element.jpg" },
+                },
+              },
+            ],
+          }),
+        ],
+      }),
+    ] as Sections;
+    const result = findFirstCmsImageUrl(sections);
+    expect(result).toContain("section-bg.jpg");
+  });
+
+  it("should skip sections without blocks and find next image", () => {
+    const sections = [
+      makeSection({}),
+      makeSection({
+        blocks: [
+          makeBlock({
+            slots: [
+              {
+                id: "slot1",
+                type: "image",
+                slot: "content",
+                data: {
+                  media: { url: "https://cdn.example.com/found.jpg" },
+                },
+              },
+            ],
+          }),
+        ],
+      }),
+    ] as Sections;
+    const result = findFirstCmsImageUrl(sections);
+    expect(result).toBe("https://cdn.example.com/found.jpg");
+  });
+
+  it("should handle invalid element media URLs gracefully", () => {
+    const sections = [
+      makeSection({
+        blocks: [
+          makeBlock({
+            slots: [
+              {
+                id: "slot1",
+                type: "image",
+                slot: "content",
+                data: {
+                  media: { url: "not a valid url" },
+                },
+              },
+            ],
+          }),
+        ],
+      }),
+    ] as Sections;
+    const result = findFirstCmsImageUrl(sections);
+    expect(result).toBe("not a valid url");
+  });
+});

package/app/composables/useLcpImagePreload.ts

@@ -0,0 +1,39 @@
+import { computed } from "vue";
+import { useAppConfig, useHead } from "#imports";
+import type { Schemas } from "#shopware";
+import { findFirstCmsImageUrl } from "../helpers/cms/findFirstCmsImageUrl";
+
+/**
+ * Preloads the first image found in CMS sections (background or element).
+ * This is typically the LCP (Largest Contentful Paint) candidate.
+ *
+ * Injects a `<link rel="preload" as="image">` in the `<head>` during SSR,
+ * allowing the browser to fetch the image before parsing CSS.
+ */
+export function useLcpImagePreload(sections: Schemas["CmsSection"][]) {
+  const appConfig = useAppConfig();
+
+  const lcpImageHref = computed(() =>
+    findFirstCmsImageUrl(sections, {
+      format: appConfig.backgroundImage?.format,
+      quality: appConfig.backgroundImage?.quality,
+    }),
+  );
+
+  useHead(
+    computed(() =>
+      lcpImageHref.value
+        ? {
+            link: [
+              {
+                rel: "preload",
+                as: "image",
+                fetchpriority: "high",
+                href: lcpImageHref.value,
+              },
+            ],
+          }
+        : {},
+    ),
+  );
+}

package/{helpers → app/helpers}/clientOnly.ts

@@ -1,5 +1,10 @@
 import { defineComponent, onMounted, ref } from "vue";
 
+/**
+ * @deprecated This component is deprecated and will be removed in the next major release.
+ * Use Nuxt's built-in `<ClientOnly>` component instead.
+ * @see https://nuxt.com/docs/api/components/client-only
+ */
 export const ClientOnly = defineComponent({
   setup(_, { slots }) {
     const init = ref(false);

package/app/helpers/cms/findFirstCmsImageUrl.ts

@@ -0,0 +1,86 @@
+import { getBackgroundImageUrl } from "@shopware/helpers";
+
+interface MediaMeta {
+  width?: number;
+  height?: number;
+}
+
+interface BackgroundMediaHolder {
+  backgroundMedia?: {
+    url?: string;
+    metaData?: MediaMeta;
+  };
+}
+
+interface CmsSlot {
+  data?: { media?: { url?: string } } | unknown;
+}
+
+interface CmsBlock extends BackgroundMediaHolder {
+  slots?: CmsSlot[];
+}
+
+interface CmsSection extends BackgroundMediaHolder {
+  blocks?: CmsBlock[];
+}
+
+/**
+ * Finds the first visible image URL in CMS page sections by scanning:
+ * 1. Section background images
+ * 2. Block background images
+ * 3. Image element media (slot data)
+ *
+ * Returns the URL with optimized format/quality params applied,
+ * or undefined if no image is found.
+ */
+export function findFirstCmsImageUrl(
+  sections: CmsSection[],
+  options?: { format?: string; quality?: number },
+): string | undefined {
+  for (const section of sections) {
+    // 1. Section background
+    if (section.backgroundMedia?.url) {
+      return getBackgroundImageUrl(
+        `url("${section.backgroundMedia.url}")`,
+        section,
+        options,
+      ).replace(/^url\("([^"]+)"\)$/, "$1");
+    }
+
+    if (!section.blocks) continue;
+
+    for (const block of section.blocks) {
+      // 2. Block background
+      if (block.backgroundMedia?.url) {
+        return getBackgroundImageUrl(
+          `url("${block.backgroundMedia.url}")`,
+          block,
+          options,
+        ).replace(/^url\("([^"]+)"\)$/, "$1");
+      }
+
+      if (!block.slots) continue;
+
+      for (const slot of block.slots) {
+        // 3. Image element media
+        const media = (slot.data as { media?: { url?: string } })?.media;
+        if (media?.url) {
+          try {
+            const url = new URL(media.url);
+            if (options?.format) {
+              url.searchParams.set("format", options.format);
+            }
+            if (typeof options?.quality === "number") {
+              url.searchParams.set("quality", String(options.quality));
+            }
+            return url.toString();
+          } catch {
+            return media.url;
+          }
+        }
+      }
+    }
+  }
+
+  return undefined;
+}

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

@@ -0,0 +1,50 @@
+import { describe, expect, it } from "vitest";
+import { getImageSizes } from "./getImageSizes";
+
+describe("getImageSizes", () => {
+  it("should return sizes for 1 slot", () => {
+    expect(getImageSizes(1)).toBe("(max-width: 768px) 100vw, 100vw");
+  });
+
+  it("should return sizes for 2 slots", () => {
+    expect(getImageSizes(2)).toBe("(max-width: 768px) 100vw, 50vw");
+  });
+
+  it("should return sizes for 3 slots", () => {
+    expect(getImageSizes(3)).toBe("(max-width: 768px) 100vw, 33vw");
+  });
+
+  it("should return default sizes for slot count > 3", () => {
+    expect(getImageSizes(4)).toBe("(max-width: 768px) 50vw, 25vw");
+  });
+
+  it("should return default sizes for slot count 0", () => {
+    expect(getImageSizes(0)).toBe("(max-width: 768px) 50vw, 25vw");
+  });
+
+  it("should use custom config overrides", () => {
+    const config = {
+      1: "100vw",
+      2: "50vw",
+    };
+    expect(getImageSizes(1, config)).toBe("100vw");
+    expect(getImageSizes(2, config)).toBe("50vw");
+  });
+
+  it("should fall back to custom default from config", () => {
+    const config = {
+      default: "80vw",
+    };
+    expect(getImageSizes(5, config)).toBe("80vw");
+  });
+
+  it("should fall back to 100vw when no default exists", () => {
+    const config = {
+      1: "100vw",
+    };
+    // Override default to empty by spreading — slot 5 not found, default not in config
+    // but DEFAULT_IMAGE_SIZES has a default, so config must explicitly remove it
+    // Actually, the spread keeps DEFAULT_IMAGE_SIZES.default unless overridden
+    expect(getImageSizes(5, config)).toBe("(max-width: 768px) 50vw, 25vw");
+  });
+});

package/app/helpers/cms/getImageSizes.ts

@@ -0,0 +1,36 @@
+/**
+ * Default mapping of CMS block slot count to responsive `sizes` attribute values.
+ * Used by CmsGenericBlock to provide sizing hints to child image elements.
+ *
+ * Can be overridden via `app.config.ts`:
+ * ```ts
+ * export default defineAppConfig({
+ *   imageSizes: {
+ *     1: "(max-width: 768px) 100vw, 1200px",
+ *     2: "(max-width: 768px) 100vw, 600px",
+ *   },
+ * });
+ * ```
+ */
+const DEFAULT_IMAGE_SIZES: Record<string, string> = {
+  1: "(max-width: 768px) 100vw, 100vw",
+  2: "(max-width: 768px) 100vw, 50vw",
+  3: "(max-width: 768px) 100vw, 33vw",
+  default: "(max-width: 768px) 50vw, 25vw",
+};
+
+/**
+ * Returns the responsive `sizes` attribute value for an image
+ * based on the number of slots in its parent CMS block.
+ *
+ * @param slotCount - Number of slots in the block
+ * @param config - Optional override map from app.config.ts (imageSizes)
+ * @returns A valid HTML `sizes` attribute string
+ */
+export function getImageSizes(
+  slotCount: number,
+  config?: Record<string, string>,
+): string {
+  const sizes = { ...DEFAULT_IMAGE_SIZES, ...config };
+  return sizes[slotCount] || sizes.default || "100vw";
+}