@shopware/cms-base-layer 3.0.0 → 3.0.1

package/app/components/public/cms/section/CmsSectionSidebar.vue

@@ -18,14 +18,19 @@ provide("cms-section-layout", "sidebar");
 </script>
 
 <template>
-  <div class="self-stretch flex flex-col lg:flex-row items-stretch gap-16" :class="{
-    'px-6': fullWidth,
-  }">
-    <aside :class="{
-      'w-full lg:w-72 xl:w-80 flex-shrink-0 bg-surface-surface flex flex-col justify-start items-stretch gap-4 lg:sticky lg:top-20 px-4 lg:px-0':
-        mobileBehavior !== 'hidden',
-      'hidden lg:block': mobileBehavior === 'hidden',
-    }">
+  <div
+    class="self-stretch flex flex-col lg:flex-row items-stretch gap-16"
+    :class="{
+      'px-6': fullWidth,
+    }"
+  >
+    <aside
+      :class="{
+        'w-full lg:w-72 xl:w-80 flex-shrink-0 bg-surface-surface flex flex-col justify-start items-stretch gap-4 lg:sticky lg:top-20 px-4 lg:px-0':
+          mobileBehavior !== 'hidden',
+        'hidden lg:block': mobileBehavior === 'hidden',
+      }"
+    >
       <div v-for="cmsBlock in sidebarBlocks" :key="cmsBlock.id" class="w-full">
         <CmsGenericBlock :content="cmsBlock" />
       </div>

package/app/components/public/cms/skeleton/ProductCardSkeleton.vue

@@ -5,9 +5,14 @@ const placeholderSvg = useImagePlaceholder();
 </script>
 
 <template>
-  <div role="status" class="p-px flex flex-col justify-start items-start overflow-hidden">
+  <div
+    role="status"
+    class="p-px flex flex-col justify-start items-start overflow-hidden"
+  >
     <!-- Image skeleton -->
-    <div class="self-stretch min-h-[350px] relative flex items-center justify-center overflow-hidden aspect-square animate-pulse">
+    <div
+      class="self-stretch min-h-[350px] relative flex items-center justify-center overflow-hidden aspect-square animate-pulse"
+    >
       <img
         :src="placeholderSvg"
         alt=""
@@ -18,9 +23,15 @@ const placeholderSvg = useImagePlaceholder();
 
     <!-- Details skeleton -->
     <div class="w-full pt-4 animate-pulse">
-      <div class="h-4 bg-gray-200 rounded-full dark:bg-gray-700 w-3/4 mb-3"></div>
-      <div class="h-3 bg-gray-200 rounded-full dark:bg-gray-700 w-1/2 mb-4"></div>
-      <div class="h-5 bg-gray-200 rounded-full dark:bg-gray-700 w-20 mb-3"></div>
+      <div
+        class="h-4 bg-gray-200 rounded-full dark:bg-gray-700 w-3/4 mb-3"
+      ></div>
+      <div
+        class="h-3 bg-gray-200 rounded-full dark:bg-gray-700 w-1/2 mb-4"
+      ></div>
+      <div
+        class="h-5 bg-gray-200 rounded-full dark:bg-gray-700 w-20 mb-3"
+      ></div>
       <div class="h-10 bg-gray-200 rounded dark:bg-gray-700 w-full"></div>
     </div>
     <span class="sr-only">Loading...</span>

package/app/components/ui/SwitchButton.vue

@@ -47,9 +47,11 @@ const activateByClick = (ev?: Event) => {
   <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"
+      <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 }">
+        :class="{ 'cursor-not-allowed': disabled }"
+      >
         <span v-if="$slots.default">
           <slot />
         </span>
@@ -57,23 +59,55 @@ const activateByClick = (ev?: Event) => {
       </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"
+        <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"
+            :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"
+            :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>
+              :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">
+    <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>
@@ -82,7 +116,9 @@ const activateByClick = (ev?: Event) => {
 
 <style scoped>
 .switch-track {
-  transition: background-color 180ms ease-in-out, box-shadow 180ms ease-in-out;
+  transition:
+    background-color 180ms ease-in-out,
+    box-shadow 180ms ease-in-out;
 }
 
 .switch-track--on {
@@ -91,7 +127,10 @@ const activateByClick = (ev?: Event) => {
 }
 
 .switch-knob {
-  transition: left 180ms cubic-bezier(.2, .9, .2, 1), top 180ms cubic-bezier(.2, .9, .2, 1), background-color 120ms linear;
+  transition:
+    left 180ms cubic-bezier(0.2, 0.9, 0.2, 1),
+    top 180ms cubic-bezier(0.2, 0.9, 0.2, 1),
+    background-color 120ms linear;
 }
 
 .switch-track:focus {

package/app/components/ui/WishlistIcon.vue

@@ -9,7 +9,13 @@ const { filled = false } = defineProps<{
     <!-- <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
+      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/useLcpImagePreload.test.ts

@@ -1,4 +1,5 @@
 import { describe, expect, it } from "vitest";
+
 import { findFirstCmsImageUrl } from "../helpers/cms/findFirstCmsImageUrl";
 
 type Sections = Parameters<typeof findFirstCmsImageUrl>[0];

package/app/composables/useLcpImagePreload.ts

@@ -1,6 +1,8 @@
 import { computed } from "vue";
+
 import { useHead } from "#imports";
 import type { Schemas } from "#shopware";
+
 import { findFirstCmsImageUrl } from "../helpers/cms/findFirstCmsImageUrl";
 import { useTypedAppConfig } from "./useTypedAppConfig";
 

package/app/composables/useTypedAppConfig.ts

@@ -1,4 +1,5 @@
 import type { BackgroundImageOptions } from "@shopware/helpers";
+
 import { useAppConfig } from "#imports";
 
 type CmsBaseLayerAppConfig = ReturnType<typeof useAppConfig> & {

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

@@ -1,4 +1,5 @@
 import { describe, expect, it } from "vitest";
+
 import { getImageSizes } from "./getImageSizes";
 
 describe("getImageSizes", () => {

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

@@ -3,6 +3,7 @@
  */
 // @ts-expect-error - html-to-ast has type definition issues with package.json exports
 import { parse } from "html-to-ast";
+
 import type { NodeObject } from "./getOptionsFromNode";
 
 type ASTNode = NodeObject | NodeObject[];

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

@@ -1,4 +1,5 @@
 import { beforeEach, describe, expect, it, vi } from "vitest";
+
 import { getOptionsFromNode } from "./getOptionsFromNode";
 import type { NodeObject } from "./getOptionsFromNode";
 

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

@@ -3,6 +3,7 @@
  */
 
 import type { ComponentInternalInstance, h } from "vue";
+
 import { type RectifyConfig, generateAST, rectifyAST } from "./ast";
 import { type RendererConfig, renderer } from "./renderer";
 

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

@@ -3,6 +3,7 @@
  */
 
 import type { ComponentInternalInstance, VNode } from "vue";
+
 import { isNode } from "./ast";
 import type { NodeObject } from "./getOptionsFromNode";
 import { getOptionsFromNode } from "./getOptionsFromNode";

package/app/providers/shopware.test.ts

@@ -1,5 +1,6 @@
 import type { ImageCTX } from "@nuxt/image";
 import { describe, expect, it } from "vitest";
+
 import shopwareProvider from "./shopware";
 
 describe("Shopware Image Provider", () => {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@shopware/cms-base-layer",
-  "version": "3.0.0",
+  "version": "3.0.1",
   "description": "Vue CMS Nuxt Layer for Shopware",
   "author": "Shopware",
   "repository": {
@@ -32,43 +32,42 @@
     "uno.config.ts"
   ],
   "dependencies": {
-    "@iconify-json/carbon": "1.2.18",
+    "@iconify-json/carbon": "1.2.23",
     "@nuxt/image": "2.0.0",
-    "@nuxt/kit": "4.4.6",
-    "@tresjs/cientos": "5.7.0",
-    "@tresjs/nuxt": "^5.6.0",
+    "@nuxt/kit": "4.4.8",
+    "@tresjs/cientos": "5.7.2",
+    "@tresjs/nuxt": "^5.6.1",
     "@vuelidate/core": "2.0.3",
     "@vuelidate/validators": "2.0.4",
-    "@vueuse/core": "14.1.0",
+    "@vueuse/core": "14.3.0",
     "entities": "6.0.0",
     "scule": "1.3.0",
     "html-to-ast": "0.0.6",
     "three": "0.183.2",
-    "vue": "3.5.34",
+    "vue": "3.5.38",
     "xss": "1.0.15",
-    "@shopware/api-client": "1.5.0",
-    "@shopware/composables": "1.11.1",
-    "@shopware/helpers": "1.7.1"
+    "@shopware/helpers": "1.7.1",
+    "@shopware/composables": "1.12.0",
+    "@shopware/api-client": "1.5.0"
   },
   "devDependencies": {
-    "@biomejs/biome": "1.8.3",
-    "@nuxt/schema": "4.4.6",
+    "@nuxt/schema": "4.4.8",
     "@types/three": "0.182.0",
     "@typescript/native-preview": "7.0.0-dev.20260205.1",
-    "@vitest/coverage-v8": "4.1.5",
-    "nuxt": "4.4.6",
+    "@vitest/coverage-v8": "4.1.9",
+    "nuxt": "4.4.8",
     "typescript": "5.9.3",
-    "unbuild": "2.0.0",
-    "vitest": "4.1.6",
-    "vue-router": "5.0.7",
-    "vue-tsc": "3.2.9",
+    "unbuild": "3.6.1",
+    "vitest": "4.1.9",
+    "vue-router": "5.1.0",
+    "vue-tsc": "3.3.5",
     "tsconfig": "0.0.0"
   },
   "scripts": {
     "build": "nuxt prepare && unbuild",
     "dev": "unbuild --stub",
-    "lint": "biome check .",
-    "lint:fix": "biome check . --write && pnpm run typecheck",
+    "lint": "oxlint . && oxfmt --check .",
+    "lint:fix": "oxlint --fix . && oxfmt --write . && pnpm run typecheck",
     "typecheck": "pnpm nuxt prepare && tsgo --noEmit",
     "test": "vitest run",
     "test:watch": "vitest",