@shopware/cms-base-layer 1.5.1 → 2.0.0

package/app/components/ui/Checkbox.vue

@@ -0,0 +1,49 @@
+<script setup lang="ts">
+const model = defineModel<boolean>({
+  required: true,
+});
+
+const {
+  label,
+  description,
+  disabled = false,
+} = defineProps<{
+  label?: string;
+  description?: string;
+  disabled?: boolean;
+}>();
+</script>
+
+<template>
+  <label class="flex items-start gap-2">
+    <input
+      class="accent-brand-primary w-4 h-4 focus-within:outline-2 focus-within:outline-brand-primary focus-within:outline focus-within:outline-offset-[2px] focus-within"
+      type="checkbox"
+      v-model="model"
+      :disabled
+    />
+    <div v-if="label || description">
+      <p
+        v-if="label"
+        :class="
+          disabled
+            ? 'text-surface-on-surface-disabled'
+            : 'text-surface-on-surface'
+        "
+      >
+        {{ label }}
+      </p>
+      <p
+        v-if="description"
+        class="text-sm"
+        :class="
+          disabled
+            ? 'text-surface-on-surface-disabled'
+            : 'text-surface-on-surface-variant'
+        "
+      >
+        {{ description }}
+      </p>
+    </div>
+  </label>
+</template>

package/app/components/ui/CheckmarkIcon.vue

@@ -0,0 +1,23 @@
+<script setup lang="ts">
+import CheckmarkFilledSvg from "@cms-assets/icons/check-circle.svg";
+import CheckmarkSvg from "@cms-assets/icons/checkmark.svg";
+
+const {
+  filled = false,
+  size = 24,
+  alt = "",
+} = defineProps<{
+  filled?: boolean;
+  size?: number;
+  alt?: string;
+}>();
+</script>
+
+<template>
+  <NuxtImg
+    :src="filled ? CheckmarkFilledSvg : CheckmarkSvg"
+    :alt="alt"
+    :width="size"
+    :height="size"
+  />
+</template>

package/app/components/ui/ChevronIcon.vue

@@ -0,0 +1,37 @@
+<script setup lang="ts">
+import ChevronSvg from "@cms-assets/icons/chevron.svg";
+import { computed } from "vue";
+
+const props = withDefaults(
+  defineProps<{
+    direction?: "up" | "down" | "left" | "right";
+    size?: number;
+    alt?: string;
+  }>(),
+  {
+    direction: "down",
+    size: 24,
+    alt: "",
+  },
+);
+
+const rotationClass = computed(() => {
+  const rotations = {
+    down: "",
+    up: "rotate-180",
+    left: "rotate-90",
+    right: "-rotate-90",
+  };
+  return rotations[props.direction];
+});
+</script>
+
+<template>
+  <NuxtImg
+    :src="ChevronSvg"
+    :alt="alt"
+    :class="['transition-transform', rotationClass]"
+    :width="size"
+    :height="size"
+  />
+</template>

package/app/components/ui/ExclamationIcon.vue

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

package/app/components/ui/IconButton.vue

@@ -0,0 +1,32 @@
+<script lang="ts" setup>
+const { type = "primary" } = defineProps<{
+  type?: "primary" | "secondary" | "tertiary" | "outline" | "ghost";
+}>();
+
+const styles = {
+  primary:
+    "bg-brand-primary hover:focus:bg-brand-primary-hover text-brand-on-primary",
+  secondary:
+    "bg-brand-secondary hover:focus:bg-brand-secondary-hover text-brand-on-secondary",
+  tertiary:
+    "bg-brand-tertiary hover:focus:bg-brand-tertiary-hover text-brand-on-tertiary",
+  outline:
+    "text-brand-primary bg-transparent hover:focus:bg-surface-surface-container outline outline-2 outline-offset-[-2px] outline-brand-primary",
+  ghost: "bg-transparent hover:focus:bg-surface-surface-container",
+};
+</script>
+
+<template>
+  <button
+    :class="[
+      styles[type],
+      {
+        'bg-surface-on-surface-disabled text-surface-surface-disabled':
+          $attrs.disabled,
+        'w-10 h-10': type !== 'ghost',
+      },
+    ]"
+  >
+    <slot />
+  </button>
+</template>

package/app/components/ui/RadioButton.vue

@@ -0,0 +1,26 @@
+<script setup lang="ts">
+const modelValue = defineModel<string | null>();
+
+const { selected } = defineProps<{
+  selected: boolean;
+}>();
+</script>
+<template>
+  <input
+    type="radio"
+    class="sr-only"
+    v-bind="$attrs"
+    v-model="modelValue"
+    name="shipping-method"
+  />
+  <div
+    class="w-4 h-4 rounded-full border border-outline-outline border-spacing-1 flex items-center justify-center"
+  >
+    <div
+      :class="{
+        'bg-brand-primary': selected,
+      }"
+      class="w-2.5 h-2.5 rounded-full"
+    ></div>
+  </div>
+</template>

package/app/components/ui/StarIcon.vue

@@ -0,0 +1,18 @@
+<script setup lang="ts">
+import StarEmptySvg from "@cms-assets/icons/star-empty.svg";
+import StarFilledSvg from "@cms-assets/icons/star-filled.svg";
+
+const { filled = true, size = 20 } = defineProps<{
+  filled?: boolean;
+  size?: number;
+}>();
+</script>
+
+<template>
+  <NuxtImg
+    :src="filled ? StarFilledSvg : StarEmptySvg"
+    alt="Star"
+    :width="size"
+    :height="size"
+  />
+</template>

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,20 @@
+<script setup lang="ts">
+withDefaults(
+  defineProps<{
+    filled?: boolean;
+  }>(),
+  {
+    filled: false,
+  },
+);
+</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" rx="8" 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/{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/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",
+      );
+    });
+  });
+});