@shopware/cms-base-layer 1.5.1 → 2.1.0

package/app/components/public/cms/element/CmsElementProductSlider.vue

@@ -0,0 +1,101 @@
+<script setup lang="ts">
+import type {
+  CmsElementProductSlider,
+  SliderElementConfig,
+} from "@shopware/composables";
+import { useElementSize } from "@vueuse/core";
+import { computed, inject, useTemplateRef } from "vue";
+import type { CSSProperties, ComputedRef } from "vue";
+import { useCmsElementConfig } from "#imports";
+
+const props = defineProps<{
+  content: CmsElementProductSlider;
+}>();
+const { getConfigValue } = useCmsElementConfig(props.content);
+
+const productSlider = useTemplateRef<HTMLDivElement>("productSlider");
+const slotCount = inject<number>("cms-block-slot-count", 1);
+const elMinWidth = computed(
+  () => +getConfigValue("elMinWidth").replace(/\D+/g, "") || 300,
+);
+const { width } = useElementSize(productSlider);
+const slidesToShow = computed(() => {
+  // SSR: useElementSize returns 0, fallback to 1200px estimate divided by slot count
+  const containerWidth = width.value || 1200 / slotCount;
+  return Math.max(1, Math.floor(containerWidth / elMinWidth.value));
+});
+const products = computed(() => props.content?.data?.products ?? []);
+const config: ComputedRef<SliderElementConfig> = computed(() => ({
+  minHeight: {
+    value: "450px",
+    source: "static",
+  },
+  verticalAlign: {
+    source: "static",
+    value: getConfigValue("verticalAlign") || "",
+  },
+  displayMode: {
+    value: "contain",
+    source: "static",
+  },
+  navigationDots: {
+    value: getConfigValue("navigation") === true ? "outside" : "",
+    source: "static",
+  },
+  navigationArrows: {
+    value: getConfigValue("navigation") === true ? "outside" : "",
+    source: "static",
+  },
+}));
+
+// Responsive SSR breakpoints: scale by slotCount since container is ~1/slotCount of viewport
+const ssrBreakpoints = computed(() => {
+  const max = slidesToShow.value;
+  const bp: Record<string, number> = {};
+  for (let n = 2; n <= max; n++) {
+    bp[`(min-width: ${elMinWidth.value * n * slotCount}px)`] = n;
+  }
+  return bp;
+});
+
+const autoplay = computed(() => getConfigValue("rotate"));
+const title = computed(() => getConfigValue("title"));
+const border = computed(() => getConfigValue("border"));
+
+const verticalAlignStyle = computed<CSSProperties>(() => ({
+  alignContent: getConfigValue("verticalAlign"),
+}));
+const hasVerticalAlignment = computed(
+  () => !!verticalAlignStyle.value.alignContent,
+);
+</script>
+<template>
+  <div
+    :style="hasVerticalAlignment ? verticalAlignStyle : undefined"
+  >
+    <div ref="productSlider" class="cms-element-product-slider">
+      <h3 v-if="title" class="pl-6 pb-6 text-center md:text-left text-surface-on-surface">
+        {{ title }}
+      </h3>
+      <div :class="{ 'py-5 border border-outline-outline-variant': border }">
+        <SwSlider
+          :config="config"
+          gap="1.25rem"
+          :slides-to-show="slidesToShow"
+          :slides-to-scroll="1"
+          :autoplay="autoplay"
+          :ssr-breakpoints="ssrBreakpoints"
+        >
+          <SwProductCard
+            v-for="product of products"
+            :key="product.id"
+            class="h-full"
+            :product="product"
+            :layout-type="getConfigValue('boxLayout')"
+            :display-mode="getConfigValue('displayMode')"
+          />
+        </SwSlider>
+      </div>
+    </div>
+  </div>
+</template>

package/app/components/public/cms/element/CmsElementSidebarFilter.vue

@@ -0,0 +1,20 @@
+<script setup lang="ts">
+import type { CmsElementSidebarFilter } from "@shopware/composables";
+import { inject } from "vue";
+
+defineProps<{
+  content: CmsElementSidebarFilter;
+}>();
+
+// Inject layout context from parent section
+// If in sidebar section -> use vertical accordion filters
+// Otherwise -> use horizontal dropdown filters
+const sectionLayout = inject<string>("cms-section-layout", "default");
+const isInSidebar = sectionLayout === "sidebar";
+</script>
+<template>
+  <div>
+    <SwProductListingFilters v-if="isInSidebar" :content="content" />
+    <SwProductListingFiltersHorizontal v-else :content="content" />
+  </div>
+</template>

package/{components → app/components}/public/cms/element/CmsElementText.vue

@@ -20,10 +20,10 @@ const mappedContent = computed<string>(() => {
 });
 
 const style = computed<CSSProperties>(() => ({
-  alignItems: getConfigValue("verticalAlign"),
+  alignContent: getConfigValue("verticalAlign"),
 }));
 
-const hasVerticalAlignment = computed(() => !!style.value.alignItems);
+const hasVerticalAlignment = computed(() => !!style.value.alignContent);
 
 const CmsTextRender = defineComponent({
   setup() {
@@ -37,7 +37,7 @@ const CmsTextRender = defineComponent({
             return (
               node.type === "tag" &&
               node.name === "a" &&
-              !node.attrs?.class?.match(/btn\s?/)
+              !node.attrs?.class?.includes("btn")
             );
           },
           renderer(
@@ -61,7 +61,7 @@ const CmsTextRender = defineComponent({
             return (
               node.type === "tag" &&
               node.name === "a" &&
-              node.attrs?.class?.match(/btn\s?/)
+              !!node.attrs?.class?.includes("btn")
             );
           },
           renderer(
@@ -75,8 +75,16 @@ const CmsTextRender = defineComponent({
                 "rounded-md inline-block my-2 py-2 px-4 border border-transparent text-sm font-medium focus:outline-none disabled:opacity-75";
 
               _class = node.attrs.class
-                .replace("btn-secondary", `${btnClass} bg-dark text-white`)
-                .replace("btn-primary", `${btnClass} bg-primary text-white`);
+                .replace(/\bbtn\s+/, "")
+                .replace(
+                  "btn-secondary",
+                  `${btnClass} bg-brand-secondary text-brand-on-secondary hover:bg-brand-secondary-hover`,
+                )
+                .replace(
+                  "btn-primary",
+                  `${btnClass} bg-brand-primary text-brand-on-primary hover:bg-brand-primary-hover`,
+                )
+                .trim();
             }
 
             return createElement(
@@ -140,18 +148,15 @@ const CmsTextRender = defineComponent({
         ? mappedContent.value
         : "<div class='cms-element-text missing-content-element'></div>";
 
-    return () =>
-      h("div", {}, renderHtml(rawHtml, config, h, context, resolveUrl));
+    return () => renderHtml(rawHtml, config, h, context, resolveUrl);
   },
 });
 </script>
 <template>
-  <div
-    :class="{ flex: hasVerticalAlignment, 'flex-row': hasVerticalAlignment }"
-    :style="style"
-  >
+  <div v-if="hasVerticalAlignment" class="grid h-full" :style="style">
     <CmsTextRender />
   </div>
+  <CmsTextRender v-else />
 </template>
 <style scoped>
 /** Global CSS styles for text elements */

package/app/components/public/cms/element/SwProductListingPagination.vue

@@ -0,0 +1,70 @@
+<script setup lang="ts">
+type Translations = {
+  listing: {
+    perPage: string;
+    product: string;
+    products: string;
+  };
+};
+
+defineProps<{
+  total: number;
+  current: number;
+  limit: number;
+  translations: Translations;
+}>();
+
+const emit = defineEmits<{
+  changePage: [number];
+  changeLimit: [number];
+}>();
+
+const limitModel = defineModel<number>("limit", { required: true });
+
+const handlePageChange = (page: number) => {
+  emit("changePage", page);
+};
+
+const handleLimitChange = (event: Event) => {
+  const select = event.target as HTMLSelectElement;
+  emit("changeLimit", Number(select.value));
+};
+</script>
+
+<template>
+  <div v-if="total > 0" class="flex flex-col gap-6 sm:gap-8 mt-6 sm:mt-8">
+    <!-- Pagination Controls -->
+    <div class="flex justify-center w-full">
+      <SwPagination :total="total" :current="current" @change-page="handlePageChange" />
+    </div>
+
+    <!-- Items per page selector -->
+    <div class="flex justify-center items-center gap-3 sm:gap-4">
+      <label
+        for="limit"
+        class="text-sm sm:text-base text-surface-on-surface"
+        data-testid="listing-pagination-limit-label"
+      >
+        {{ translations.listing.perPage }}
+      </label>
+      <div class="relative">
+        <select
+          id="limit"
+          v-model="limitModel"
+          name="limitchoices"
+          class="appearance-none bg-surface-surface border border-outline-outline hover:border-outline-outline-primary focus:border-outline-outline-primary focus:ring-2 focus:ring-outline-outline-primary focus:ring-opacity-20 px-4 py-2 pr-10 rounded-md text-sm sm:text-base text-surface-on-surface cursor-pointer transition-colors"
+          data-testid="listing-pagination-limit-select"
+          @change="handleLimitChange"
+        >
+          <option :value="1">1 {{ translations.listing.product }}</option>
+          <option :value="15">15 {{ translations.listing.products }}</option>
+          <option :value="30">30 {{ translations.listing.products }}</option>
+          <option :value="45">45 {{ translations.listing.products }}</option>
+        </select>
+        <div class="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-3">
+          <SwChevronIcon direction="down" :size="16" />
+        </div>
+      </div>
+    </div>
+  </div>
+</template>

package/{components → app/components}/public/cms/section/CmsSectionDefault.vue

@@ -7,14 +7,14 @@ const props = defineProps<{
 }>();
 
 const { cssClasses, layoutStyles } = getCmsLayoutConfiguration(props.content);
+const { sizingMode: _, ...sectionStyles } = layoutStyles;
 </script>
 
 <template>
-  <div class="cms-section-default" :class="cssClasses" :styles="layoutStyles">
+  <div class="my-4" :class="cssClasses" :style="sectionStyles as any">
     <CmsGenericBlock
       v-for="cmsBlock in content.blocks"
       :key="cmsBlock.id"
-      class="overflow-auto"
       :content="cmsBlock"
     />
   </div>

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

@@ -0,0 +1,39 @@
+<script setup lang="ts">
+import { useCmsSection } from "@shopware/composables";
+import type { CmsSectionSidebar } from "@shopware/composables";
+import { computed, provide } from "vue";
+
+const props = defineProps<{
+  content: CmsSectionSidebar;
+}>();
+const { getPositionContent, section } = useCmsSection(props.content);
+
+const sidebarBlocks = getPositionContent("sidebar");
+const mainBlocks = getPositionContent("main");
+const mobileBehavior = computed(() => props.content.mobileBehavior);
+const fullWidth = computed(() => section.sizingMode === "full_width");
+
+// Provide layout context for child components
+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 v-for="cmsBlock in sidebarBlocks" :key="cmsBlock.id" class="w-full">
+        <CmsGenericBlock :content="cmsBlock" />
+      </div>
+    </aside>
+    <div class="flex-1 flex flex-col justify-start items-stretch gap-20">
+      <div v-for="cmsBlock in mainBlocks" :key="cmsBlock.id" class="w-full">
+        <CmsGenericBlock :content="cmsBlock" />
+      </div>
+    </div>
+  </div>
+</template>

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

@@ -0,0 +1,28 @@
+<script setup lang="ts">
+import { useImagePlaceholder } from "#imports";
+
+const placeholderSvg = useImagePlaceholder();
+</script>
+
+<template>
+  <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">
+      <img
+        :src="placeholderSvg"
+        alt=""
+        aria-hidden="true"
+        class="w-full h-full object-cover"
+      />
+    </div>
+
+    <!-- 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-10 bg-gray-200 rounded dark:bg-gray-700 w-full"></div>
+    </div>
+    <span class="sr-only">Loading...</span>
+  </div>
+</template>

package/app/components/ui/BaseButton.vue

@@ -0,0 +1,102 @@
+<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 {
+  variant = "primary",
+  size = "medium",
+  disabled = false,
+  loading = false,
+  type = "button",
+  block = false,
+} = defineProps<SwBaseButtonProps>();
+
+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[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 (disabled || loading) {
+    classes.push(
+      "bg-surface-surface-disabled text-surface-on-surface cursor-not-allowed opacity-50",
+    );
+  } else {
+    classes.push(variantClasses[variant]);
+  }
+
+  if (block) {
+    classes.push("w-full");
+  }
+
+  return classes.join(" ");
+});
+
+const handleClick = (event: MouseEvent) => {
+  if (!disabled && !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,34 @@
+<script setup lang="ts">
+import ChevronSvg from "@cms-assets/icons/chevron.svg";
+import { computed } from "vue";
+
+const {
+  direction = "down",
+  size = 24,
+  alt = "",
+} = defineProps<{
+  direction?: "up" | "down" | "left" | "right";
+  size?: number;
+  alt?: string;
+}>();
+
+const rotationClass = computed(() => {
+  const rotations = {
+    down: "",
+    up: "rotate-180",
+    left: "rotate-90",
+    right: "-rotate-90",
+  };
+  return rotations[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>