@shopware/cms-base-layer 1.5.0 → 2.0.0

package/app/components/SwQuantitySelect.vue

@@ -0,0 +1,106 @@
+<script setup lang="ts">
+import { defu } from "defu";
+import { computed, getCurrentInstance } from "vue";
+import { useCmsTranslations } from "#imports";
+
+type Translations = {
+  form: {
+    quantitySelect: {
+      label: string;
+      increaseButton: string;
+      decreaseButton: string;
+    };
+  };
+};
+
+let translations = {
+  form: {
+    quantitySelect: {
+      label: "Quantity",
+      increaseButton: "Increase quantity",
+      decreaseButton: "Decrease quantity",
+    },
+  },
+};
+
+translations = defu(useCmsTranslations(), translations) as Translations;
+
+const quantity = defineModel<number>({
+  required: true,
+});
+
+const {
+  size = "large",
+  steps,
+  max,
+  min,
+  id: propId,
+} = defineProps<{
+  size?: "small" | "large";
+  steps?: number;
+  min?: number;
+  max?: number;
+  id?: string;
+}>();
+
+// generate an id that prefers a provided prop and otherwise uses the component uid
+const inputId = computed(() => {
+  if (propId) return propId;
+  const uid = Math.random().toString(36).substr(2, 9);
+  return `sw-quantity-${uid}`;
+});
+
+function increaseQty() {
+  quantity.value++;
+}
+
+function decreaseQty() {
+  if (quantity.value > 1) {
+    quantity.value--;
+  }
+}
+
+const sizeClasses = {
+  small: "w-8 h-8",
+  large: "w-10 h-10",
+};
+</script>
+<template>
+  <div class="rounded outline outline-1 outline-offset-[-1px] outline-outline-outline inline-flex">
+    <button
+      type="button"
+      :class="sizeClasses[size]"
+      class="bg-surface-surface border-0 border-r-1 cursor-pointer hover:bg-brand-tertiary-hover font-semibold"
+      @click="decreaseQty"
+      :aria-label="translations.form.quantitySelect.decreaseButton"
+    >
+      -
+    </button>
+    <div class="bg-white border-l border-r border-outline-outline inline-flex flex-col justify-center items-center">
+      <!-- visually hidden label for screen readers -->
+      <label :for="inputId" class="sr-only">{{ translations.form.quantitySelect.label }}</label>
+
+      <input
+        :id="inputId"
+        v-model="quantity"
+        type="number"
+        :min="min"
+        :max="max"
+        :step="steps"
+        data-testid="product-quantity"
+        :class="sizeClasses[size]"
+        class="self-stretch text-center justify-start text-surface-on-surface text-xs font-bold leading-[18px] appearance-none [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none"
+        :aria-label="translations.form.quantitySelect.label"
+      />
+    </div>
+    <button
+      type="button"
+      :class="sizeClasses[size]"
+      class="w-10 bg-surface-surface border-0 border-l-1 cursor-pointer hover:bg-brand-tertiary-hover font-semibold"
+      @click="increaseQty"
+      :aria-label="translations.form.quantitySelect.increaseButton"
+    >
+      +
+    </button>
+  </div>
+</template>

package/{components → app/components}/SwSlider.vue

@@ -34,7 +34,7 @@ const props = withDefaults(
 
 const { getConfigValue } = useCmsElementConfig({
   config: props.config,
-} as Schemas["CmsSlot"] & {
+} as Omit<Schemas["CmsSlot"], "config"> & {
   config: SliderElementConfig;
 });
 
@@ -63,12 +63,12 @@ const children = computed<string[]>(() => {
   ] as string[];
 });
 const emit = defineEmits<(e: "changeSlide", index: number) => void>();
-const slider = useTemplateRef("slider");
-const imageSlider = useTemplateRef("imageSlider");
+const slider = useTemplateRef<HTMLDivElement>("slider");
+const imageSlider = useTemplateRef<HTMLDivElement>("imageSlider");
 const imageSliderTrackStyle = ref<CSSProperties>();
 const activeSlideIndex = ref<number>(0);
 const speed = ref<number>(300);
-const imageSliderTrack = useTemplateRef("imageSliderTrack");
+const imageSliderTrack = useTemplateRef<HTMLDivElement>("imageSliderTrack");
 const autoPlayInterval = ref();
 const isReady = ref<boolean>();
 const isSliding = ref<boolean>();

package/app/components/SwSortDropdown.vue

@@ -0,0 +1,83 @@
+<script setup lang="ts">
+import { onClickOutside } from "@vueuse/core";
+import { ref, useTemplateRef } from "vue";
+
+type SortOption = {
+  key: string;
+  label: string;
+};
+
+defineProps<{
+  sortOptions: SortOption[];
+  currentSort: string;
+  label: string;
+}>();
+
+const emit = defineEmits<{
+  "sort-change": [string];
+}>();
+
+const isSortMenuOpen = ref(false);
+const dropdownElement = useTemplateRef<HTMLDivElement>("dropdownElement");
+
+onClickOutside(dropdownElement, () => {
+  isSortMenuOpen.value = false;
+});
+
+const handleSortingClick = (key: string) => {
+  emit("sort-change", key);
+  isSortMenuOpen.value = false;
+};
+</script>
+
+<template>
+  <div ref="dropdownElement" class="flex items-center">
+    <div class="relative inline-block text-left">
+      <SwBaseButton
+        variant="ghost"
+        size="medium"
+        type="button"
+        @click="isSortMenuOpen = !isSortMenuOpen"
+        id="menu-button"
+        aria-expanded="false"
+        aria-haspopup="true"
+        class="group pr-0"
+      >
+        <span class="inline-flex items-center gap-1">
+          {{ label }}
+          <SwChevronIcon
+            :direction="isSortMenuOpen ? 'up' : 'down'"
+            :size="24"
+            :aria-label="isSortMenuOpen ? 'Close sort menu' : 'Open sort menu'"
+          />
+        </span>
+      </SwBaseButton>
+      <div
+        :class="[isSortMenuOpen ? 'absolute' : 'hidden']"
+        class="origin-top-right right-0 mt-2 w-40 rounded-md shadow-2xl bg-surface-surface ring-1 ring-opacity-dark-low focus:outline-none z-1000"
+        role="menu"
+        aria-orientation="vertical"
+        aria-labelledby="menu-button"
+        tabindex="-1"
+      >
+        <div class="py-1" role="none">
+          <button
+            v-for="sorting in sortOptions"
+            :key="sorting.key"
+            @click="handleSortingClick(sorting.key)"
+            :class="[
+              sorting.key === currentSort
+                ? 'font-medium text-surface-on-surface'
+                : 'text-surface-on-surface-variant',
+            ]"
+            class="block px-4 py-2 text-sm bg-transparent hover:bg-surface-surface-container"
+            role="menuitem"
+            tabindex="-1"
+          >
+            {{ sorting.label }}
+          </button>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>

package/app/components/SwStockInfo.vue

@@ -0,0 +1,44 @@
+<script setup lang="ts">
+import { defu } from "defu";
+
+import { useCmsTranslations } from "#imports";
+import type { Schemas } from "#shopware";
+
+defineProps<{
+  availableStock: number;
+  minPurchase: number;
+  deliveryTime?: Schemas["DeliveryTime"];
+  restockTime?: number;
+}>();
+
+type Translations = {
+  product: {
+    deliveryTime: string;
+    days: string;
+    noAvailable: string;
+  };
+};
+
+let translations: Translations = {
+  product: {
+    deliveryTime: "Available, delivery time",
+    days: "days",
+    noAvailable: "No longer available",
+  },
+};
+
+translations = defu(useCmsTranslations(), translations) as Translations;
+</script>
+<template>
+  <div class="inline-flex justify-start items-center gap-2">
+    <div class="w-2 h-2 bg-states-success rounded-full" v-if="availableStock > 0"></div>
+    <div class="w-2 h-2 bg-states-error rounded-full" v-else></div>
+    <span v-if="availableStock >= minPurchase && deliveryTime">{{ translations.product.deliveryTime }} {{
+      deliveryTime?.name }}
+    </span>
+    <span v-else-if="availableStock < minPurchase && deliveryTime && restockTime">
+      {{ translations.product.deliveryTime }} {{ restockTime }}
+      {{ translations.product.days }} {{ deliveryTime?.name }}</span>
+    <span v-else>{{ translations.product.noAvailable }}</span>
+  </div>
+</template>

package/{components → app/components}/SwVariantConfigurator.vue

@@ -102,7 +102,7 @@ const onHandleChange = async () => {
             data-testid="product-variant"
             class="group relative border rounded-md py-3 px-4 flex items-center justify-center text-sm font-medium uppercase hover:bg-gray-50 focus:outline-none sm:flex-1 bg-white shadow-sm text-gray-900 cursor-pointer"
             :class="{
-              'border-3 border-indigo-600': isOptionSelected(option.id),
+              'border-3 border-brand-primary': isOptionSelected(option.id),
             }"
             @click="handleChange(optionGroup.translated.name, option.id, onHandleChange)"
           >

package/app/components/listing-filters/SwFilterPrice.vue

@@ -0,0 +1,214 @@
+<script setup lang="ts" generic="
+    ListingFilter extends {
+      code: string;
+      min?: number;
+      max?: number;
+      label: string;
+    }
+  ">
+import { useCmsTranslations } from "@shopware/composables";
+import { onClickOutside, useDebounceFn, useEventListener } from "@vueuse/core";
+import { defu } from "defu";
+import { onMounted, reactive, ref, watch } from "vue";
+import type { Schemas } from "#shopware";
+
+const emits =
+  defineEmits<
+    (e: "select-value", value: { code: string; value: unknown }) => void
+  >();
+
+const props = defineProps<{
+  filter: ListingFilter;
+  selectedFilters: Schemas["ProductListingResult"]["currentFilters"];
+}>();
+
+type Translations = {
+  listing: {
+    min: string;
+    max: string;
+  };
+};
+let translations: Translations = {
+  listing: {
+    min: "Min",
+    max: "Max",
+  },
+};
+translations = defu(useCmsTranslations(), translations) as Translations;
+
+const prices = reactive<{ min: number; max: number }>({
+  min: 0,
+  max: 0,
+});
+
+onMounted(() => {
+  prices.min = Math.floor(
+    props.selectedFilters.price?.min ?? props.filter.min ?? 0,
+  );
+  prices.max = Math.floor(
+    props.selectedFilters.price?.max ?? props.filter.max ?? 0,
+  );
+});
+
+const isFilterVisible = ref<boolean>(false);
+const toggle = () => {
+  isFilterVisible.value = !isFilterVisible.value;
+};
+
+const dropdownElement = ref(null);
+onClickOutside(dropdownElement, () => {
+  isFilterVisible.value = false;
+});
+
+function onMinPriceChange(newPrice: number, oldPrice: number) {
+  if (newPrice === oldPrice || oldPrice === 0) return;
+  emits("select-value", {
+    code: "min-price",
+    value: newPrice,
+  });
+}
+const debounceMinPriceUpdate = useDebounceFn(onMinPriceChange, 500);
+watch(() => prices.min, debounceMinPriceUpdate);
+
+function onMaxPriceChange(newPrice: number, oldPrice: number) {
+  if (newPrice === oldPrice || oldPrice === 0) return;
+  emits("select-value", {
+    code: "max-price",
+    value: newPrice,
+  });
+}
+const debounceMaxPriceUpdate = useDebounceFn(onMaxPriceChange, 500);
+watch(() => prices.max, debounceMaxPriceUpdate);
+
+// Slider drag logic
+type DragType = "min" | "max" | null;
+const dragging = ref<DragType>(null);
+const sliderRect = ref<DOMRect | null>(null);
+
+const getClientX = (event: MouseEvent | TouchEvent): number =>
+  event instanceof MouseEvent ? event.clientX : event.touches[0]?.clientX || 0;
+
+const updateSliderValue = (clientX: number) => {
+  if (!dragging.value || !sliderRect.value) return;
+
+  const min = props.filter.min ?? 0;
+  const max = props.filter.max ?? 100;
+  const percent = Math.min(
+    Math.max((clientX - sliderRect.value.left) / sliderRect.value.width, 0),
+    1,
+  );
+  const value = Math.round(min + percent * (max - min));
+
+  if (dragging.value === "min") {
+    if (value >= min && value <= prices.max) prices.min = value;
+  } else {
+    if (value <= max && value >= prices.min) prices.max = value;
+  }
+};
+
+const onDrag = (event: MouseEvent | TouchEvent) => {
+  if (!dragging.value) return;
+  event.preventDefault();
+  updateSliderValue(getClientX(event));
+};
+
+const stopDrag = () => {
+  dragging.value = null;
+  sliderRect.value = null;
+};
+
+useEventListener(window, "mousemove", onDrag);
+useEventListener(window, "mouseup", stopDrag);
+useEventListener(window, "touchmove", onDrag, { passive: false });
+useEventListener(window, "touchend", stopDrag);
+
+const startDrag = (type: "min" | "max", event: MouseEvent | TouchEvent) => {
+  event.preventDefault();
+  dragging.value = type;
+  const slider = (event.target as HTMLElement).closest(".relative.w-64.h-10");
+  if (slider) {
+    sliderRect.value = slider.getBoundingClientRect();
+  }
+};
+</script>
+
+<template>
+  <div class="self-stretch flex flex-col justify-start items-start gap-4">
+    <div class="self-stretch flex flex-col justify-center items-center">
+      <div 
+        class="self-stretch py-3 border-b border-outline-outline-variant inline-flex justify-between items-center gap-1 cursor-pointer"
+        @click="toggle"
+        role="button"
+        tabindex="0"
+        :aria-expanded="isFilterVisible"
+        :aria-controls="`filter-${props.filter.code}`"
+        @keydown.enter="toggle"
+        @keydown.space.prevent="toggle"
+      >
+        <div class="flex-1 flex items-center gap-2.5">
+          <div class="flex-1 text-surface-on-surface text-base font-bold leading-normal text-left">
+            {{ props.filter.label }}
+          </div>
+        </div>
+        <SwIconButton 
+          type="ghost" 
+          :aria-label="isFilterVisible ? 'Collapse filter' : 'Expand filter'"
+          tabindex="-1"
+        >
+          <SwChevronIcon :direction="isFilterVisible ? 'up' : 'down'" :size="24" />
+        </SwIconButton>
+      </div>
+    </div>
+    <transition name="filter-collapse">
+      <div v-if="isFilterVisible" :id="props.filter.code"
+        class="self-stretch flex flex-col justify-start items-start gap-2.5">
+        <div class="self-stretch flex flex-col justify-start items-start gap-1">
+          <div class="self-stretch inline-flex justify-between items-center gap-2">
+            <div
+              class="w-16 h-10 px-2 py-1 rounded-lg outline outline-1 outline-offset-[-1px] outline-outline-outline-variant inline-flex flex-col justify-center items-start gap-2.5">
+              <input type="number" :placeholder="translations.listing.min" v-model.number="prices.min"
+                class="w-full bg-transparent border-none outline-none text-surface-on-surface text-sm font-normal leading-tight"
+                @change="emits('select-value', { code: props.filter.code, value: { min: prices.min, max: prices.max } })"
+                :min="props.filter.min" :max="prices.max" />
+            </div>
+            <div
+              class="w-16 h-10 px-2 py-1 rounded-lg outline outline-1 outline-offset-[-1px] outline-outline-outline-variant inline-flex flex-col justify-center items-start gap-2.5">
+              <input type="number" :placeholder="translations.listing.max" v-model.number="prices.max"
+                class="w-full bg-transparent border-none outline-none text-surface-on-surface text-sm font-normal leading-tight"
+                @change="emits('select-value', { code: props.filter.code, value: { min: prices.min, max: prices.max } })"
+                :min="prices.min" :max="props.filter.max" />
+            </div>
+          </div>
+          <!-- Custom slider UI -->
+          <div class="relative w-64 h-10 mt-2 mx-auto flex items-center select-none">
+            <!-- Track -->
+            <div
+              class="absolute left-0 top-1/2 -translate-y-1/2 w-full h-2 bg-surface-surface-container-highest rounded-full">
+            </div>
+            <!-- Active range -->
+            <div class="absolute top-1/2 -translate-y-1/2 h-2 bg-surface-surface-primary rounded-full" :style="{
+              left: ((prices.min - (props.filter.min ?? 0)) / ((props.filter.max ?? 100) - (props.filter.min ?? 0))) * 100 + '%',
+              width: ((prices.max - prices.min) / ((props.filter.max ?? 100) - (props.filter.min ?? 0))) * 100 + '%',
+            }"></div>
+            <!-- Min thumb -->
+            <div
+              class="absolute top-1/2 -translate-y-1/2 w-5 h-5 bg-brand-primary rounded-full shadow-[2px_2px_10px_0px_rgba(0,0,0,0.15)] cursor-pointer touch-none"
+              :style="{
+                left: `calc(${((prices.min - (props.filter.min ?? 0)) / ((props.filter.max ?? 100) - (props.filter.min ?? 0))) * 100}% - 10px)`
+              }"
+              @mousedown.prevent="startDrag('min', $event)"
+              @touchstart.prevent="startDrag('min', $event)"></div>
+            <!-- Max thumb -->
+            <div
+              class="absolute top-1/2 -translate-y-1/2 w-5 h-5 bg-brand-primary rounded-full shadow-[2px_2px_10px_0px_rgba(0,0,0,0.15)] cursor-pointer touch-none"
+              :style="{
+                left: `calc(${((prices.max - (props.filter.min ?? 0)) / ((props.filter.max ?? 100) - (props.filter.min ?? 0))) * 100}% - 10px)`
+              }"
+              @mousedown.prevent="startDrag('max', $event)"
+              @touchstart.prevent="startDrag('max', $event)"></div>
+          </div>
+        </div>
+      </div>
+    </transition>
+  </div>
+</template>

package/app/components/listing-filters/SwFilterProperties.vue

@@ -0,0 +1,113 @@
+<script
+  setup
+  lang="ts"
+  generic="
+    ListingFilter extends {
+      code: string;
+      label: string;
+      name: string;
+      options: Array<Schemas['PropertyGroupOption']>;
+      entities: Array<Schemas['ProductManufacturer']>;
+    }
+  "
+>
+import { getTranslatedProperty } from "@shopware/helpers";
+import { computed, ref } from "vue";
+import type { Schemas } from "#shopware";
+
+const props = defineProps<{
+  filter: ListingFilter;
+  selectedFilters: {
+    manufacturer?: string[];
+    properties?: string[];
+    [key: string]: unknown;
+  };
+}>();
+
+const emits =
+  defineEmits<
+    (e: "select-value", value: { code: string; value: unknown }) => void
+  >();
+
+const isFilterVisible = ref<boolean>(false);
+const toggle = () => {
+  isFilterVisible.value = !isFilterVisible.value;
+};
+
+const selectedIds = computed(() => {
+  if (props.filter.code === "manufacturer") {
+    return props.selectedFilters?.manufacturer || [];
+  }
+  return props.selectedFilters?.properties || [];
+});
+
+const isChecked = (id: string) => selectedIds.value.includes(id);
+
+const selectValue = (id: string) => {
+  const emitCode =
+    props.filter.code === "manufacturer" ? "manufacturer" : "properties";
+  emits("select-value", {
+    code: emitCode,
+    value: id,
+  });
+};
+</script>
+
+<template>
+  <div class="self-stretch flex flex-col justify-start items-start gap-4">
+    <div class="self-stretch flex flex-col justify-center items-center">
+      <div
+        class="self-stretch py-3 border-b border-outline-outline-variant inline-flex justify-between items-center gap-1 cursor-pointer"
+        @click="toggle"
+        role="button"
+        tabindex="0"
+        :aria-expanded="isFilterVisible"
+        :aria-controls="props.filter.code"
+        :aria-label="props.filter.label"
+        @keydown.enter="toggle"
+        @keydown.space.prevent="toggle"
+      >
+        <div class="flex-1 flex items-center gap-2.5">
+          <div class="flex-1 text-surface-on-surface text-base font-bold leading-normal text-left">
+            {{ props.filter.label }}
+          </div>
+        </div>
+        <SwIconButton 
+          type="ghost" 
+          :aria-label="isFilterVisible ? 'Collapse filter' : 'Expand filter'"
+          tabindex="-1"
+        >
+          <SwChevronIcon :direction="isFilterVisible ? 'up' : 'down'" :size="24" />
+        </SwIconButton>
+      </div>
+    </div>
+    <transition name="filter-collapse">
+      <div v-if="isFilterVisible" :id="props.filter.code" class="self-stretch flex flex-col justify-start items-start gap-4">
+        <fieldset class="self-stretch flex flex-col justify-start items-start gap-4">
+        <legend class="sr-only">{{ props.filter.name }}</legend>
+        <label
+          v-for="option in props.filter.options || props.filter.entities"
+          :key="`${option.id}-${isChecked(option.id)}`"
+          class="self-stretch inline-flex justify-start items-start gap-2 cursor-pointer"
+          @click="selectValue(option.id)"
+        >
+          <div class="w-4 self-stretch pt-[3px] flex justify-start items-start gap-2.5">
+            <SwCheckbox
+              :model-value="isChecked(option.id)"
+              @update:model-value="() => selectValue(option.id)"
+              @click.stop
+            />
+          </div>
+          <div class="flex-1 inline-flex flex-col justify-start items-start gap-0.5">
+            <div class="inline-flex justify-start items-center gap-1">
+              <div class="flex-1 text-surface-on-surface text-base font-normal leading-normal">
+                {{ getTranslatedProperty(option, 'name') }}
+              </div>
+            </div>
+          </div>
+        </label>
+        </fieldset>
+      </div>
+    </transition>
+  </div>
+</template>

package/app/components/listing-filters/SwFilterRating.vue

@@ -0,0 +1,90 @@
+<script
+  setup
+  lang="ts"
+  generic="
+    ListingFilter extends {
+      code: string;
+      label: string;
+    }
+  "
+>
+import { computed, ref } from "vue";
+import type { Schemas } from "#shopware";
+
+const emits =
+  defineEmits<
+    (e: "select-value", value: { code: string; value: unknown }) => void
+  >();
+
+const props = defineProps<{
+  filter: ListingFilter;
+  selectedFilters: Schemas["ProductListingResult"]["currentFilters"];
+}>();
+const isHoverActive = ref(false);
+const hoveredIndex = ref(0);
+const displayedScore = computed(() =>
+  isHoverActive.value ? hoveredIndex.value : props.selectedFilters?.rating || 0,
+);
+
+const hoverRating = (key: number) => {
+  hoveredIndex.value = key;
+  isHoverActive.value = true;
+};
+const onChangeRating = () => {
+  const newValue =
+    props.selectedFilters?.rating !== hoveredIndex.value
+      ? hoveredIndex.value
+      : undefined;
+  emits("select-value", { code: props.filter?.code, value: newValue });
+};
+
+const isFilterVisible = ref<boolean>(false);
+const toggle = () => {
+  isFilterVisible.value = !isFilterVisible.value;
+};
+</script>
+
+<template>
+  <div class="self-stretch flex flex-col justify-start items-start gap-4">
+    <div class="self-stretch flex flex-col justify-center items-center">
+      <div 
+        class="self-stretch py-3 border-b border-outline-outline-variant inline-flex justify-between items-center gap-1 cursor-pointer"
+        @click="toggle"
+        role="button"
+        tabindex="0"
+        :aria-expanded="isFilterVisible"
+        :aria-controls="`filter-rating`"
+        @keydown.enter="toggle"
+        @keydown.space.prevent="toggle"
+      >
+        <div class="flex-1 flex items-center gap-2.5">
+          <div class="flex-1 text-surface-on-surface text-base font-bold leading-normal text-left">
+            {{ props.filter.label }}
+          </div>
+        </div>
+        <SwIconButton 
+          type="ghost" 
+          :aria-label="isFilterVisible ? 'Collapse filter' : 'Expand filter'"
+          tabindex="-1"
+        >
+          <SwChevronIcon :direction="isFilterVisible ? 'up' : 'down'" :size="24" />
+        </SwIconButton>
+      </div>
+    </div>
+    <transition name="filter-collapse">
+      <div v-if="isFilterVisible" class="self-stretch flex flex-col justify-start items-start gap-4">
+        <div class="flex flex-row items-center gap-2 mt-2">
+          <div
+            v-for="i in 5"
+            :key="i"
+            :class="['h-6 w-6 cursor-pointer', displayedScore >= i ? 'i-carbon-star-filled' : 'i-carbon-star']"
+            @mouseleave="isHoverActive = false"
+            @click="hoverRating(i); onChangeRating()"
+            @mouseover="hoverRating(i)"
+            :aria-label="`${i} star${i !== 1 ? 's' : ''}`"
+          />
+        </div>
+      </div>
+    </transition>
+  </div>
+</template>