@shopware/cms-base-layer 1.5.0 → 2.0.0

package/app/providers/shopware.test.ts

@@ -0,0 +1,213 @@
+import type { ImageCTX } from "@nuxt/image";
+import { describe, expect, it } from "vitest";
+import shopwareProvider from "./shopware";
+
+describe("Shopware Image Provider", () => {
+  const provider = shopwareProvider();
+  const mockContext: ImageCTX = {
+    options: {},
+  } as ImageCTX;
+
+  describe("basic functionality", () => {
+    it("should return original URL when no modifiers are provided", () => {
+      const result = provider.getImage(
+        "https://example.com/image.jpg",
+        { modifiers: {} },
+        mockContext,
+      );
+      expect(result.url).toBe("https://example.com/image.jpg");
+    });
+
+    it("should add width modifier to URL", () => {
+      const result = provider.getImage(
+        "https://example.com/image.jpg",
+        { modifiers: { width: 800 } },
+        mockContext,
+      );
+      expect(result.url).toBe("https://example.com/image.jpg?width=800");
+    });
+
+    it("should add height modifier to URL", () => {
+      const result = provider.getImage(
+        "https://example.com/image.jpg",
+        { modifiers: { height: 600 } },
+        mockContext,
+      );
+      expect(result.url).toBe("https://example.com/image.jpg?height=600");
+    });
+
+    it("should add multiple modifiers to URL", () => {
+      const result = provider.getImage(
+        "https://example.com/image.jpg",
+        {
+          modifiers: {
+            width: 800,
+            height: 600,
+            quality: 90,
+            format: "webp",
+            fit: "cover",
+          },
+        },
+        mockContext,
+      );
+      expect(result.url).toBe(
+        "https://example.com/image.jpg?width=800&height=600&quality=90&format=webp&fit=cover",
+      );
+    });
+  });
+
+  describe("existing query parameters", () => {
+    it("should append modifiers to existing query parameters", () => {
+      const result = provider.getImage(
+        "https://example.com/image.jpg?ts=123456",
+        { modifiers: { width: 800 } },
+        mockContext,
+      );
+      expect(result.url).toBe(
+        "https://example.com/image.jpg?ts=123456&width=800",
+      );
+    });
+
+    it("should handle multiple existing query parameters", () => {
+      const result = provider.getImage(
+        "https://example.com/image.jpg?ts=123456&v=2",
+        { modifiers: { width: 800, format: "webp" } },
+        mockContext,
+      );
+      expect(result.url).toBe(
+        "https://example.com/image.jpg?ts=123456&v=2&width=800&format=webp",
+      );
+    });
+  });
+
+  describe("special characters in URL", () => {
+    it("should encode commas in pathname", () => {
+      const result = provider.getImage(
+        "https://example.com/path/image, test.jpg",
+        { modifiers: { width: 800 } },
+        mockContext,
+      );
+      expect(result.url).toBe(
+        "https://example.com/path/image%2C%20test.jpg?width=800",
+      );
+    });
+
+    it("should encode spaces in pathname", () => {
+      const result = provider.getImage(
+        "https://example.com/path/image test.jpg",
+        { modifiers: { width: 800 } },
+        mockContext,
+      );
+      expect(result.url).toBe(
+        "https://example.com/path/image%20test.jpg?width=800",
+      );
+    });
+
+    it("should encode special characters in filename", () => {
+      const result = provider.getImage(
+        "https://cdn.shopware.store/media/ChatGPT Image 2 gru 2025, 14_08_58.png",
+        { modifiers: { height: 300, format: "webp" } },
+        mockContext,
+      );
+      expect(result.url).toBe(
+        "https://cdn.shopware.store/media/ChatGPT%20Image%202%20gru%202025%2C%2014_08_58.png?height=300&format=webp",
+      );
+    });
+
+    it("should handle already encoded URLs correctly", () => {
+      const result = provider.getImage(
+        "https://example.com/path/image%20test.jpg",
+        { modifiers: { width: 800 } },
+        mockContext,
+      );
+      expect(result.url).toBe(
+        "https://example.com/path/image%20test.jpg?width=800",
+      );
+    });
+
+    it("should encode parentheses in pathname", () => {
+      const result = provider.getImage(
+        "https://example.com/path/image (1).jpg",
+        { modifiers: { width: 800 } },
+        mockContext,
+      );
+      expect(result.url).toBe(
+        "https://example.com/path/image%20(1).jpg?width=800",
+      );
+    });
+  });
+
+  describe("edge cases", () => {
+    it("should handle relative URLs gracefully", () => {
+      const result = provider.getImage(
+        "/media/image.jpg",
+        { modifiers: { width: 800 } },
+        mockContext,
+      );
+      // Relative URLs cannot be parsed as URL objects, so they are returned as-is with modifiers
+      expect(result.url).toBe("/media/image.jpg?width=800");
+    });
+
+    it("should preserve existing query parameters with special characters", () => {
+      const result = provider.getImage(
+        "https://example.com/image.jpg?ts=123456&key=value",
+        { modifiers: { width: 800 } },
+        mockContext,
+      );
+      expect(result.url).toBe(
+        "https://example.com/image.jpg?ts=123456&key=value&width=800",
+      );
+    });
+
+    it("should handle URLs with fragments", () => {
+      const result = provider.getImage(
+        "https://example.com/image.jpg#section",
+        { modifiers: { width: 800 } },
+        mockContext,
+      );
+      // Note: URL constructor places hash after query params
+      expect(result.url).toBe(
+        "https://example.com/image.jpg#section?width=800",
+      );
+    });
+
+    it("should not double-encode already encoded characters", () => {
+      const result = provider.getImage(
+        "https://example.com/path/image%2Ctest.jpg",
+        { modifiers: { width: 800 } },
+        mockContext,
+      );
+      expect(result.url).toBe(
+        "https://example.com/path/image%2Ctest.jpg?width=800",
+      );
+    });
+  });
+
+  describe("Shopware CDN URLs", () => {
+    it("should handle Shopware CDN URLs with existing query parameters", () => {
+      const result = provider.getImage(
+        "https://cdn.shopware.store/a/B/m/pPkDE/media/51/69/bf/1764680961/image.png?width=280&ts=1764680961",
+        {
+          modifiers: { height: 300, format: "webp", quality: 90, fit: "cover" },
+        },
+        mockContext,
+      );
+      expect(result.url).toBe(
+        "https://cdn.shopware.store/a/B/m/pPkDE/media/51/69/bf/1764680961/image.png?width=280&ts=1764680961&height=300&quality=90&format=webp&fit=cover",
+      );
+    });
+
+    it("should properly encode commas in Shopware CDN URLs", () => {
+      const result = provider.getImage(
+        "https://cdn.shopware.store/a/B/m/pPkDE/media/51/69/bf/1764680961/ChatGPT Image 2 gru 2025, 14_08_58.png?width=280&ts=1764680961",
+        {
+          modifiers: { height: 300, format: "webp", quality: 90, fit: "cover" },
+        },
+        mockContext,
+      );
+      expect(result.url).toBe(
+        "https://cdn.shopware.store/a/B/m/pPkDE/media/51/69/bf/1764680961/ChatGPT%20Image%202%20gru%202025%2C%2014_08_58.png?width=280&ts=1764680961&height=300&quality=90&format=webp&fit=cover",
+      );
+    });
+  });
+});

package/app/providers/shopware.ts

@@ -0,0 +1,107 @@
+import { defineProvider } from "@nuxt/image/runtime";
+import { encodeUrlPath } from "@shopware/helpers";
+
+/**
+ * Shopware Image Provider for Nuxt Image
+ *
+ * Generates optimized image URLs compatible with Shopware's remote thumbnail generation feature.
+ * This provider appends transformation parameters as query strings to image URLs, which are then
+ * processed by your configured image transformation backend.
+ *
+ * @remarks
+ * Shopware has built-in thumbnail generation (using GD2 or ImageMagick) that creates predefined
+ * sizes (400x400, 800x800, 1920x1920) during upload. However, for **on-the-fly transformations**
+ * via query parameters (like `?width=800`), you need to configure remote thumbnail generation:
+ * - Shopware Cloud: Uses Fastly CDN (configured automatically)
+ * - Self-hosted: Requires external middleware (Thumbor, Sharp, imgproxy) or plugins like FroshPlatformThumbnailProcessor
+ *
+ * Without remote thumbnail generation, query parameters will have no effect and original/predefined thumbnails are served
+ *
+ * @param src - The source image URL (e.g., "/media/image/product.jpg")
+ * @param options - Configuration options
+ * @param options.modifiers - Image transformation modifiers
+ * @param options.modifiers.width - Target width in pixels
+ * @param options.modifiers.height - Target height in pixels
+ * @param options.modifiers.quality - Image quality (0-100)
+ * @param options.modifiers.format - Output format (jpg, png, webp, avif)
+ * @param options.modifiers.fit - Resize mode (cover, contain, crop, bounds, crop_center)
+ *
+ * @returns Object containing the transformed image URL with query parameters
+ *
+ * @example
+ * ```typescript
+ * // Basic usage
+ * const result = getImage('/media/image/product.jpg', {
+ *   modifiers: {
+ *     width: 800,
+ *     height: 600,
+ *     quality: 85,
+ *     format: 'webp',
+ *     fit: 'cover'
+ *   }
+ * });
+ * // Returns: { url: '/media/image/product.jpg?width=800&height=600&quality=85&format=webp&fit=cover' }
+ * ```
+ *
+ * @example
+ * ```typescript
+ * // With existing query parameters
+ * const result = getImage('/media/image/product.jpg?v=123', {
+ *   modifiers: { width: 400 }
+ * });
+ * // Returns: { url: '/media/image/product.jpg?v=123&width=400' }
+ * ```
+ *
+ * @example
+ * ```typescript
+ * // No modifiers - returns original URL
+ * const result = getImage('/media/image/product.jpg');
+ * // Returns: { url: '/media/image/product.jpg' }
+ * ```
+ *
+ * @see {@link https://developer.shopware.com/docs/guides/plugins/plugins/content/media/remote-thumbnail-generation.html | Shopware Remote Thumbnail Generation}
+ * @see {@link https://image.nuxt.com/providers/custom | Nuxt Image Custom Providers}
+ */
+
+export default defineProvider(() => ({
+  getImage(src, { modifiers }, _ctx) {
+    // Encode special characters in the URL pathname (commas, spaces, etc.)
+    const encodedSrc = encodeUrlPath(src);
+
+    const params = new URLSearchParams();
+
+    // Map Nuxt Image modifiers to Shopware query parameters
+    if (modifiers.width) {
+      params.set("width", String(modifiers.width));
+    }
+
+    if (modifiers.height) {
+      params.set("height", String(modifiers.height));
+    }
+
+    if (modifiers.quality) {
+      params.set("quality", String(modifiers.quality));
+    }
+
+    if (modifiers.format) {
+      params.set("format", String(modifiers.format));
+    }
+
+    if (modifiers.fit) {
+      params.set("fit", String(modifiers.fit));
+    }
+
+    const query = params.toString();
+
+    if (!query) {
+      return { url: encodedSrc };
+    }
+
+    // Check if URL already has query parameters
+    const separator = encodedSrc.includes("?") ? "&" : "?";
+
+    return {
+      url: `${encodedSrc}${separator}${query}`,
+    };
+  },
+}));

package/dist/index.d.mts

@@ -1,5 +1,5 @@
-import { NuxtModule } from '@nuxt/schema';
+import * as _nuxt_schema from '@nuxt/schema';
 
-declare const nuxtModule: NuxtModule;
+declare const _default: _nuxt_schema.NuxtModule<_nuxt_schema.ModuleOptions, _nuxt_schema.ModuleOptions, false>;
 
-export { nuxtModule as default };
+export { _default as default };

package/dist/index.d.ts

@@ -1,5 +1,5 @@
-import { NuxtModule } from '@nuxt/schema';
+import * as _nuxt_schema from '@nuxt/schema';
 
-declare const nuxtModule: NuxtModule;
+declare const _default: _nuxt_schema.NuxtModule<_nuxt_schema.ModuleOptions, _nuxt_schema.ModuleOptions, false>;
 
-export { nuxtModule as default };
+export { _default as default };

package/dist/index.mjs

@@ -10,7 +10,7 @@ import __cjs_mod__ from 'module';
 const __filename = __cjs_url__.fileURLToPath(import.meta.url);
 const __dirname = __cjs_path__.dirname(__filename);
 const require = __cjs_mod__.createRequire(import.meta.url);
-const nuxtModule = defineNuxtModule({
+const index = defineNuxtModule({
   meta: {
     name: "@shopware/cms-base",
     configKey: "shopware-cms"
@@ -28,4 +28,4 @@ const nuxtModule = defineNuxtModule({
   }
 });
 
-export { nuxtModule as default };
+export { index as default };

package/index.d.ts

@@ -0,0 +1,12 @@
+/// <reference types="@nuxt/schema" />
+
+export * from "@shopware/composables";
+export * from "./.nuxt/imports";
+
+declare module "nuxt/schema" {
+  interface AppConfig {
+    imagePlaceholder?: {
+      color?: string;
+    };
+  }
+}

package/nuxt.config.ts

@@ -1,19 +1,93 @@
+import { createResolver } from "@nuxt/kit";
 import type { NuxtConfig } from "@nuxt/schema";
 import { defineNuxtConfig } from "nuxt/config";
+
+const { resolve: resolveLayer } = createResolver(import.meta.url);
+
 export default defineNuxtConfig({
+  modules: ["@unocss/nuxt", "@nuxt/image"],
+
+  // @ts-ignore - @nuxt/image config may not be typed in some layer contexts
+  image: {
+    quality: 90,
+    format: ["webp", "avif", "jpg"],
+    // Custom Shopware provider that maps Nuxt Image modifiers to Shopware query parameters
+    provider: "shopware",
+    providers: {
+      shopware: {
+        name: "shopware",
+        provider: resolveLayer("./app/providers/shopware.ts"),
+      },
+    },
+
+    // Responsive breakpoints matching UnoCSS
+    screens: {
+      xs: 320,
+      sm: 640,
+      md: 768,
+      lg: 1024,
+      xl: 1280,
+      xxl: 1536,
+    },
+
+    // Presets for common CMS use cases
+    presets: {
+      productCard: {
+        modifiers: {
+          format: "webp",
+          quality: 90,
+          fit: "cover",
+        },
+      },
+      productDetail: {
+        modifiers: {
+          format: "webp",
+          quality: 90,
+          fit: "contain",
+        },
+      },
+      thumbnail: {
+        modifiers: {
+          format: "webp",
+          quality: 90,
+          width: 150,
+          height: 150,
+          fit: "cover",
+        },
+      },
+      hero: {
+        modifiers: {
+          format: "webp",
+          quality: 95,
+          fit: "cover",
+        },
+      },
+    },
+  },
+
   components: [
     {
-      path: "./components/public",
-      pathPrefix: false,
-      // global: true,
+      path: resolveLayer("./app/components"),
+      pattern: "Sw*",
+      extensions: [".vue"],
+      global: true,
     },
     {
-      path: "./components/",
-      pattern: "Sw*",
+      path: resolveLayer("./app/components/ui"),
+      extensions: [".vue"],
+      prefix: "Sw",
+      global: true,
+    },
+    {
+      path: resolveLayer("./app/components/public"),
+      pathPrefix: false,
+      global: true,
       extensions: [".vue"],
-      global: false,
     },
   ],
+  alias: {
+    "@cms-assets": resolveLayer("./app/assets"),
+  },
   build: {
     transpile: ["@shopware/cms-base-layer"],
   },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@shopware/cms-base-layer",
-  "version": "1.5.0",
+  "version": "2.0.0",
   "description": "Vue CMS Nuxt Layer for Shopware",
   "author": "Shopware",
   "repository": {
@@ -23,47 +23,55 @@
   "main": "./nuxt.config.ts",
   "files": [
     "dist",
-    "components",
+    "app",
     "helpers",
     "index.cjs",
-    "nuxt.config.ts"
+    "index.d.ts",
+    "app.config.ts",
+    "nuxt.config.ts",
+    "uno.config.ts"
   ],
   "dependencies": {
-    "@nuxt/kit": "3.16.2",
-    "@tresjs/cientos": "4.3.0",
-    "@tresjs/core": "4.3.3",
+    "@iconify-json/carbon": "1.2.14",
+    "@nuxt/image": "2.0.0",
+    "@nuxt/kit": "4.2.1",
+    "@tresjs/cientos": "4.3.1",
+    "@tresjs/core": "4.3.6",
+    "@unocss/nuxt": "66.5.4",
     "@vuelidate/core": "2.0.3",
     "@vuelidate/validators": "2.0.4",
-    "@vueuse/core": "13.1.0",
+    "@vueuse/core": "14.0.0",
     "entities": "6.0.0",
     "html-to-ast": "0.0.6",
     "three": "0.173.0",
-    "vue": "3.5.13",
+    "unocss": "66.5.4",
+    "vue": "3.5.24",
     "xss": "1.0.15",
-    "@shopware/composables": "1.9.0",
-    "@shopware/helpers": "1.4.0",
-    "@shopware/api-client": "1.3.0"
+    "@shopware/composables": "1.10.0",
+    "@shopware/api-client": "1.4.0",
+    "@shopware/helpers": "1.6.0"
   },
   "devDependencies": {
     "@biomejs/biome": "1.8.3",
-    "@nuxt/schema": "3.16.2",
+    "@nuxt/schema": "4.2.1",
     "@types/three": "0.173.0",
-    "@vitest/coverage-v8": "3.1.1",
-    "nuxt": "3.16.2",
-    "typescript": "5.8.3",
+    "@vitest/coverage-v8": "3.2.4",
+    "nuxt": "4.2.1",
+    "typescript": "5.9.3",
     "unbuild": "2.0.0",
-    "vitest": "3.1.1",
-    "vue-router": "4.5.0",
-    "vue-tsc": "2.2.8",
+    "vitest": "3.2.4",
+    "vue-router": "4.6.3",
+    "vue-tsc": "3.1.4",
     "tsconfig": "0.0.0"
   },
   "scripts": {
-    "build": "unbuild",
+    "build": "nuxt prepare && unbuild",
     "dev": "unbuild --stub",
     "lint": "biome check .",
     "lint:fix": "biome check . --write && pnpm run typecheck",
-    "typecheck": "tsc --noEmit",
+    "typecheck": "pnpm nuxt prepare && tsc --noEmit",
     "test": "vitest run",
-    "test:watch": "vitest"
+    "test:watch": "vitest",
+    "check-colors": "tsx scripts/check-unused-colors.ts"
   }
 }

package/uno.config.ts

@@ -0,0 +1,83 @@
+import {
+  defineConfig,
+  presetAttributify,
+  presetIcons,
+  presetTypography,
+  presetWind3,
+} from "unocss";
+
+export default defineConfig({
+  shortcuts: {},
+  preflights: [
+    {
+      getCSS: () => `
+        /* Filter collapse transition */
+        .filter-collapse-enter-active,
+        .filter-collapse-leave-active {
+          transition: all 0.3s ease-in-out;
+          overflow: hidden;
+        }
+
+        .filter-collapse-enter-from,
+        .filter-collapse-leave-to {
+          max-height: 0;
+          opacity: 0;
+        }
+
+        .filter-collapse-enter-to,
+        .filter-collapse-leave-from {
+          max-height: 1000px;
+          opacity: 1;
+        }
+      `,
+    },
+  ],
+  theme: {
+    colors: {
+      "brand-primary": "#543B95",
+      "surface-surface": "#FFFFFF",
+      "outline-outline": "#79747E",
+      "outline-outline-variant": "#CAC4D0",
+      "outline-outline-primary": "#543B95",
+      "surface-on-surface": "#1D1B20",
+      "surface-surface-variant": "#FBF6FF",
+      "states-success": "#15B31C",
+      "surface-on-surface-variant": "#696470",
+      "surface-surface-disabled": "#E8E8E8",
+      "surface-on-surface-disabled": "#9893A6",
+      "surface-surface-primary": "#D0BCFF",
+      "states-warning": "#F57C00",
+      "surface-surface-container": "#F3EDF7",
+      "surface-surface-container-highest": "#E6E0E9",
+      "states-error": "#D12D24",
+      "states-on-error": "#FFFFFF",
+      "brand-primary-hover": "#45317A",
+      "brand-on-primary": "#FFFFFF",
+      "brand-secondary": "#E1D5FF",
+      "brand-secondary-hover": "#D0BCFC",
+      "brand-on-secondary": "#3A276A",
+      "brand-tertiary": "#F1F1F1",
+      "brand-tertiary-hover": "#E3E3E3",
+      "brand-on-tertiary": "#1D1B20",
+      "other-sale": "#D12D24",
+    },
+    fontFamily: {
+      inter: "Inter",
+      Noto_Serif: "Noto Serif",
+    },
+  },
+  safelist: ["states-success", "states-error", "states-info", "states-warning"],
+  presets: [
+    presetWind3(),
+    presetIcons({
+      collections: {
+        carbon: () =>
+          import("@iconify-json/carbon/icons.json", {
+            with: { type: "json" },
+          }).then((i) => i.default),
+      },
+    }),
+    presetAttributify(),
+    presetTypography(),
+  ],
+});

package/components/SwCategoryNavigation.vue

@@ -1,44 +0,0 @@
-<script setup lang="ts">
-import type { Schemas } from "#shopware";
-
-const props = withDefaults(
-  defineProps<{
-    activeCategory: Schemas["Category"];
-    elements: Schemas["Category"][];
-    level: number;
-  }>(),
-  {
-    level: 0,
-  },
-);
-
-function getHighlightCategory(navigationElement: Schemas["Category"]) {
-  return (
-    (props.activeCategory?.path || "").includes(navigationElement.id) ||
-    navigationElement.id === props.activeCategory?.id
-  );
-}
-</script>
-<template>
-  <ul v-if="props.elements?.length" class="list-none m-0 px-5">
-    <li
-      v-for="(navigationElement, index) in props.elements"
-      :key="index"
-      :class="{
-        'border-b border-gray-200': props.level === 0,
-      }"
-    >
-      <SwCategoryNavigationLink
-        :navigation-element="navigationElement"
-        :is-highlighted="getHighlightCategory(navigationElement)"
-        :is-active="navigationElement.id === props.activeCategory?.id"
-      />
-      <SwCategoryNavigation
-        v-if="navigationElement.children"
-        :elements="navigationElement.children"
-        :active-category="props.activeCategory"
-        :level="props.level + 1"
-      />
-    </li>
-  </ul>
-</template>