@shopware/cms-base-layer 1.5.1 → 2.1.0

package/nuxt.config.ts

@@ -1,19 +1,113 @@
+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({
+  // @tresjs/nuxt is not included here because SwMedia3D is excluded from auto-import
+  // 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"],
+
+  hooks: {
+    "components:extend"(components) {
+      // Exclude SwMedia3D from auto-import to prevent bundling heavy 3D libraries
+      // It should be dynamically imported when needed using defineAsyncComponent.
+      const index = components.findIndex(
+        (c) =>
+          c.pascalName === "SwMedia3D" ||
+          c.kebabName === "sw-media3-d" ||
+          c.filePath?.includes("SwMedia3D.vue"),
+      );
+      if (index > -1) {
+        components.splice(index, 1);
+      }
+    },
+  },
+
+  // @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.1.0",
   "description": "Vue CMS Nuxt Layer for Shopware",
   "author": "Shopware",
   "repository": {
@@ -23,47 +23,57 @@
   "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.18",
+    "@nuxt/image": "2.0.0",
+    "@nuxt/kit": "4.2.2",
+    "@tresjs/cientos": "5.2.4",
+    "@tresjs/nuxt": "^5.1.6",
+    "@unocss/nuxt": "66.6.0",
+    "@unocss/runtime": "66.6.0",
     "@vuelidate/core": "2.0.3",
     "@vuelidate/validators": "2.0.4",
-    "@vueuse/core": "13.3.0",
+    "@vueuse/core": "14.1.0",
     "entities": "6.0.0",
     "html-to-ast": "0.0.6",
-    "three": "0.173.0",
-    "vue": "3.5.16",
+    "three": "0.182.0",
+    "unocss": "66.6.0",
+    "vue": "3.5.27",
     "xss": "1.0.15",
-    "@shopware/composables": "1.9.1",
-    "@shopware/api-client": "1.3.0",
-    "@shopware/helpers": "1.5.0"
+    "@shopware/api-client": "1.5.0",
+    "@shopware/composables": "1.11.0",
+    "@shopware/helpers": "1.7.0"
   },
   "devDependencies": {
     "@biomejs/biome": "1.8.3",
-    "@nuxt/schema": "3.17.5",
-    "@types/three": "0.173.0",
-    "@vitest/coverage-v8": "3.2.3",
-    "nuxt": "3.17.5",
-    "typescript": "5.8.3",
+    "@nuxt/schema": "4.2.2",
+    "@types/three": "0.182.0",
+    "@typescript/native-preview": "7.0.0-dev.20260111.1",
+    "@vitest/coverage-v8": "4.0.18",
+    "nuxt": "4.2.2",
+    "typescript": "5.9.3",
     "unbuild": "2.0.0",
-    "vitest": "3.2.3",
-    "vue-router": "4.5.1",
-    "vue-tsc": "2.2.10",
+    "vitest": "4.0.18",
+    "vue-router": "4.6.4",
+    "vue-tsc": "3.2.2",
     "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 && tsgo --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,94 @@
+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",
+      "overlay-dark-highest": "rgba(0, 0, 0, 0.75)",
+      "overlay-dark-high": "rgba(0, 0, 0, 0.5)",
+      "overlay-dark": "rgba(0, 0, 0, 0.3)",
+      "overlay-dark-low": "rgba(0, 0, 0, 0.12)",
+      "overlay-dark-lowest": "rgba(0, 0, 0, 0.08)",
+      "overlay-light-highest": "rgba(255, 255, 255, 0.75)",
+      "overlay-light-high": "rgba(255, 255, 255, 0.5)",
+      "overlay-light": "rgba(255, 255, 255, 0.25)",
+      "overlay-light-low": "rgba(255, 255, 255, 0.12)",
+      "overlay-light-lowest": "rgba(255, 255, 255, 0.08)",
+      "fixed-fixed-on-image": "#FFFFFF",
+    },
+    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>