@shopware/cms-base-layer 1.5.0 → 2.0.0

package/app/components/ui/BaseButton.vue

@@ -0,0 +1,99 @@
+<script setup lang="ts">
+import { computed } from "vue";
+
+export interface SwBaseButtonProps {
+  variant?:
+    | "primary"
+    | "secondary"
+    | "success"
+    | "warning"
+    | "outline"
+    | "ghost";
+  size?: "small" | "medium" | "large";
+  disabled?: boolean;
+  loading?: boolean;
+  type?: "button" | "submit" | "reset";
+  block?: boolean;
+}
+
+defineOptions({
+  inheritAttrs: false,
+});
+
+const props = withDefaults(defineProps<SwBaseButtonProps>(), {
+  variant: "primary",
+  size: "medium",
+  disabled: false,
+  loading: false,
+  type: "button",
+  block: false,
+});
+
+const emit = defineEmits<{
+  click: [event: MouseEvent];
+}>();
+
+const buttonClasses = computed(() => {
+  const classes = [
+    "inline-flex justify-center items-center gap-2 rounded font-bold transition-colors focus:outline-none focus:ring-2 focus:ring-offset-2",
+  ];
+
+  const sizeClasses = {
+    small: "px-3 py-2 text-sm",
+    medium: "px-4 py-3 text-base",
+    large: "px-6 py-4 text-lg",
+  };
+  classes.push(sizeClasses[props.size]);
+
+  const variantClasses = {
+    primary:
+      "bg-brand-primary hover:bg-brand-primary-hover text-brand-on-primary focus:ring-brand-primary",
+    secondary:
+      "bg-brand-secondary hover:bg-brand-secondary-hover text-brand-on-secondary focus:ring-brand-secondary",
+    success:
+      "bg-states-success hover:opacity-90 text-white focus:ring-states-success transition-opacity",
+    warning:
+      "bg-states-warning hover:opacity-90 text-white focus:ring-states-warning transition-opacity",
+    outline:
+      "border-2 border-brand-primary text-brand-primary hover:bg-brand-primary hover:text-brand-on-primary focus:ring-brand-primary",
+    ghost:
+      "bg-transparent text-surface-on-surface-variant hover:text-surface-on-surface focus:ring-surface-on-surface",
+  };
+
+  if (props.disabled || props.loading) {
+    classes.push(
+      "bg-surface-surface-disabled text-surface-on-surface cursor-not-allowed opacity-50",
+    );
+  } else {
+    classes.push(variantClasses[props.variant]);
+  }
+
+  if (props.block) {
+    classes.push("w-full");
+  }
+
+  return classes.join(" ");
+});
+
+const handleClick = (event: MouseEvent) => {
+  if (!props.disabled && !props.loading) {
+    emit("click", event);
+  }
+};
+</script>
+
+<template>
+  <button
+    :type="type"
+    :class="buttonClasses"
+    :disabled="disabled || loading"
+    @click="handleClick"
+    v-bind="$attrs"
+  >
+    <div v-if="loading" class="w-4 h-4 border-2 border-current border-t-transparent rounded-full animate-spin"></div>
+
+    <span :class="{ 'opacity-0': loading }">
+      <slot />
+    </span>
+  </button>
+</template>

package/app/components/ui/BaseIcon.vue

@@ -0,0 +1,15 @@
+<script setup lang="ts">
+const {
+  src,
+  size = 24,
+  alt = "",
+} = defineProps<{
+  src: string;
+  size?: number;
+  alt?: string;
+}>();
+</script>
+
+<template>
+  <NuxtImg :src="src" :alt="alt" :width="size" :height="size" />
+</template>

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);