@shopware/cms-base-layer 1.5.1 → 2.0.0

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.1",
+  "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.17.5",
-    "@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.3.0",
+    "@vueuse/core": "14.0.0",
     "entities": "6.0.0",
     "html-to-ast": "0.0.6",
     "three": "0.173.0",
-    "vue": "3.5.16",
+    "unocss": "66.5.4",
+    "vue": "3.5.24",
     "xss": "1.0.15",
-    "@shopware/composables": "1.9.1",
-    "@shopware/api-client": "1.3.0",
-    "@shopware/helpers": "1.5.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.17.5",
+    "@nuxt/schema": "4.2.1",
     "@types/three": "0.173.0",
-    "@vitest/coverage-v8": "3.2.3",
-    "nuxt": "3.17.5",
-    "typescript": "5.8.3",
+    "@vitest/coverage-v8": "3.2.4",
+    "nuxt": "4.2.1",
+    "typescript": "5.9.3",
     "unbuild": "2.0.0",
-    "vitest": "3.2.3",
-    "vue-router": "4.5.1",
-    "vue-tsc": "2.2.10",
+    "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>

package/components/SwCategoryNavigationLink.vue

@@ -1,57 +0,0 @@
-<script setup lang="ts">
-import {
-  buildUrlPrefix,
-  getCategoryRoute,
-  getTranslatedProperty,
-  urlIsAbsolute,
-} from "@shopware/helpers";
-import { computed } from "vue";
-import { RouterLink } from "vue-router";
-import { useUrlResolver } from "#imports";
-import type { Schemas } from "#shopware";
-
-interface Props {
-  navigationElement: Schemas["Category"];
-  isActive?: boolean;
-  isHighlighted?: boolean;
-}
-
-const props = defineProps<Props>();
-const { getUrlPrefix } = useUrlResolver();
-const url = computed(() => {
-  return buildUrlPrefix(
-    getCategoryRoute(props.navigationElement),
-    getUrlPrefix(),
-  );
-});
-</script>
-<template>
-  <div
-    class="flex items-center py-2 px-5 text-base rounded-lg dark:text-white hover:bg-gray-100 dark:hover:bg-gray-700 my-2"
-  >
-    <RouterLink
-      v-if="!urlIsAbsolute(url.path)"
-      :to="url"
-      :class="[
-        props.isHighlighted ? 'font-bold' : 'font-normal',
-        props.isActive ? 'text-indigo-600' : 'text-gray-900',
-      ]"
-    >
-      <span>{{ getTranslatedProperty(navigationElement, "name") }}</span>
-    </RouterLink>
-    <a
-      v-else
-      :href="url.path"
-      :class="[
-        props.isHighlighted ? 'font-bold' : 'font-normal',
-        props.isActive ? 'text-indigo-600' : 'text-gray-900',
-      ]"
-      :target="
-        navigationElement.externalLink || navigationElement.linkNewTab
-          ? '_blank'
-          : ''
-      "
-      ><span>{{ getTranslatedProperty(navigationElement, "name") }}</span></a
-    >
-  </div>
-</template>

package/components/SwListingProductPrice.vue

@@ -1,89 +0,0 @@
-<script setup lang="ts">
-import { useCmsTranslations, useProductPrice } from "@shopware/composables";
-import { defu } from "defu";
-import { toRefs } from "vue";
-import type { Schemas } from "#shopware";
-
-const props = defineProps<{
-  product: Schemas["Product"];
-}>();
-
-type Translations = {
-  listing: {
-    variantsFrom: string;
-    previously: string;
-    from: string;
-    to: string;
-  };
-};
-
-let translations: Translations = {
-  listing: {
-    variantsFrom: "variants from",
-    previously: "previously",
-    from: "from",
-    to: "to",
-  },
-};
-
-translations = defu(useCmsTranslations(), translations) as Translations;
-
-const { product } = toRefs(props);
-
-const {
-  price,
-  unitPrice,
-  displayFromVariants,
-  displayFrom,
-  isListPrice,
-  regulationPrice,
-} = useProductPrice(product);
-</script>
-
-<template>
-  <div :id="product.id">
-    <SwSharedPrice
-      v-if="isListPrice"
-      class="text-l text-gray-900 basis-2/6 justify-end line-through"
-      :value="price?.listPrice?.price"
-    />
-    <template v-if="!isListPrice">
-      <div class="h-6"><!-- placeholder --></div>
-    </template>
-    <SwSharedPrice
-      v-if="displayFromVariants"
-      class="text-xl text-gray-900 basis-2/6 justify-end"
-      :value="displayFromVariants"
-    >
-      <template #beforePrice
-        ><span v-if="displayFromVariants" class="text-sm">{{
-          translations.listing.variantsFrom
-        }}</span></template
-      >
-    </SwSharedPrice>
-    <SwSharedPrice
-      class="text-gray-900 basis-2/6"
-      :class="{
-        'text-red-600 font-bold': isListPrice,
-        'justify-end text-xl':
-          regulationPrice || !regulationPrice || !displayFromVariants,
-      }"
-      :value="unitPrice"
-    >
-      <template #beforePrice
-        ><span v-if="displayFrom || displayFromVariants" class="text-sm">{{
-          translations.listing.from
-        }}</span></template
-      >
-    </SwSharedPrice>
-    <template v-if="regulationPrice">
-      <div class="flex gap-2 justify-end text-gray-500 text-3.5 mb-2">
-        {{ translations.listing.previously }}
-        <SwSharedPrice :value="regulationPrice" />
-      </div>
-    </template>
-    <template v-if="!regulationPrice">
-      <div class="h-7"><!-- placeholder --></div>
-    </template>
-  </div>
-</template>