@shopware/cms-base-layer 1.5.1 → 2.1.0

package/app/components/SwCategoryNavigationLink.vue

@@ -0,0 +1,128 @@
+<script setup lang="ts">
+import {
+  buildUrlPrefix,
+  getCategoryRoute,
+  getTranslatedProperty,
+  urlIsAbsolute,
+} from "@shopware/helpers";
+import { computed } from "vue";
+import { RouterLink } from "vue-router";
+import { useUrlResolver } from "#imports";
+import type { Schemas } from "#shopware";
+
+interface Props {
+  navigationElement: Schemas["Category"];
+  isActive?: boolean;
+  isExpanded?: boolean;
+  level?: number;
+}
+
+const props = defineProps<Props>();
+const emit = defineEmits<{
+  toggle: [];
+}>();
+
+const { getUrlPrefix } = useUrlResolver();
+const url = computed(() => {
+  return buildUrlPrefix(
+    getCategoryRoute(props.navigationElement),
+    getUrlPrefix(),
+  );
+});
+
+const hasChildren = computed(() => {
+  return (
+    props.navigationElement.children &&
+    props.navigationElement.children.length > 0
+  );
+});
+</script>
+<template>
+  <!-- Level 1 Category (Top-level with border and toggle) -->
+  <div
+    v-if="props.level === 0"
+    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-start items-center gap-1">
+      <div class="flex-1 flex justify-start items-center gap-2.5">
+        <RouterLink
+          v-if="!urlIsAbsolute(url.path)"
+          :to="url"
+          :class="[
+            'flex-1 justify-start text-surface-on-surface text-base leading-normal font-bold',
+          ]"
+        >
+          {{ getTranslatedProperty(navigationElement, "name") }}
+        </RouterLink>
+        <a
+          v-else
+          :href="url.path"
+          :class="[
+            'flex-1 justify-start text-surface-on-surface text-base leading-normal font-bold',
+          ]"
+          :target="
+            navigationElement.externalLink || navigationElement.linkNewTab
+              ? '_blank'
+              : ''
+          "
+        >
+          {{ getTranslatedProperty(navigationElement, "name") }}
+        </a>
+      </div>
+      <button
+        v-if="hasChildren"
+        @click="emit('toggle')"
+        class="w-6 h-6 relative flex items-center justify-center bg-transparent cursor-pointer focus:outline-none"
+        type="button"
+        :aria-label="props.isExpanded ? 'Collapse' : 'Expand'"
+      >
+        <SwChevronIcon :direction="props.isExpanded ? 'up' : 'down'" :size="20" />
+      </button>
+    </div>
+  </div>
+
+  <!-- Level 2+ Categories (Nested with left padding) -->
+  <div
+    v-else
+    class="self-stretch flex flex-col justify-center items-center"
+  >
+    <div class="self-stretch pl-4 py-1.5 inline-flex justify-start items-center gap-2">
+      <div class="py-0.5 flex-1 flex justify-start items-center gap-2.5">
+        <RouterLink
+          v-if="!urlIsAbsolute(url.path)"
+          :to="url"
+          :class="[
+            'justify-start text-surface-on-surface text-base leading-normal',
+            props.isActive ? 'font-bold' : 'font-normal',
+          ]"
+        >
+          {{ getTranslatedProperty(navigationElement, "name") }}
+        </RouterLink>
+        <a
+          v-else
+          :href="url.path"
+          :class="[
+            'justify-start text-surface-on-surface text-base leading-normal',
+            props.isActive ? 'font-bold' : 'font-normal',
+          ]"
+          :target="
+            navigationElement.externalLink || navigationElement.linkNewTab
+              ? '_blank'
+              : ''
+          "
+        >
+          {{ getTranslatedProperty(navigationElement, "name") }}
+        </a>
+      </div>
+      <button
+        v-if="hasChildren"
+        @click="emit('toggle')"
+        class="w-6 h-6 relative flex items-center justify-center bg-transparent cursor-pointer focus:outline-none"
+        type="button"
+        :aria-label="props.isExpanded ? 'Collapse' : 'Expand'"
+      >
+        <SwChevronIcon :direction="props.isExpanded ? 'up' : 'down'" :size="20" />
+      </button>
+    </div>
+  </div>
+</template>

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

@@ -178,7 +178,7 @@ const invokeSubmit = async () => {
             id="salutation"
             v-model="state.salutationId"
             name="salutation"
-            class="border-gray-300 focus:border-indigo-500 appearance-none relative block w-full px-3 py-2 border placeholder-gray-500 text-gray-900 rounded-md focus:outline-none focus:ring-indigo-500 focus:z-10 sm:text-sm"
+            class="border-outline-outline-variant focus:border-brand-primary appearance-none relative block w-full px-3 py-2 border placeholder-surface-on-surface-variant text-surface-on-surface rounded-md focus:outline-none focus:ring-brand-primary focus:z-10 sm:text-sm"
           >
             <option disabled selected value="">
               {{ translations.form.salutationPlaceholder }}
@@ -200,20 +200,20 @@ const invokeSubmit = async () => {
             name="first-name"
             type="text"
             autocomplete="given-name"
-            class="appearance-none relative block w-full px-3 py-2 border placeholder-gray-500 text-gray-900 rounded-md focus:outline-none focus:ring-indigo-500 focus:z-10 sm:text-sm"
+            class="appearance-none relative block w-full px-3 py-2 border placeholder-surface-on-surface-variant text-surface-on-surface rounded-md focus:outline-none focus:ring-brand-primary focus:z-10 sm:text-sm"
             :class="[
               $v.firstName.$error
                 ? 'border-red-600 focus:border-red-600'
-                : 'border-gray-300 focus:border-indigo-500',
+                : 'border-outline-outline-variant focus:border-brand-primary',
             ]"
             :placeholder="translations.form.firstNamePlaceholder"
             @blur="$v.firstName.$touch()"
           />
           <span
-            v-if="$v.firstName.$error"
+            v-if="$v.firstName.$error && $v.firstName.$errors[0]?.$message"
             class="pt-1 text-sm text-red-600 focus:ring-brand-primary border-gray-300"
           >
-            {{ $v.firstName.$errors[0]?.$message ?? '' }}
+            {{ $v.firstName.$errors[0].$message }}
           </span>
         </div>
         <div class="col-span-4">
@@ -224,20 +224,20 @@ const invokeSubmit = async () => {
             name="last-name"
             type="text"
             autocomplete="family-name"
-            class="appearance-none relative block w-full px-3 py-2 border placeholder-gray-500 text-gray-900 rounded-md focus:outline-none focus:ring-indigo-500 focus:z-10 sm:text-sm"
+            class="appearance-none relative block w-full px-3 py-2 border placeholder-surface-on-surface-variant text-surface-on-surface rounded-md focus:outline-none focus:ring-brand-primary focus:z-10 sm:text-sm"
             :class="[
               $v.lastName.$error
                 ? 'border-red-600 focus:border-red-600'
-                : 'border-gray-300 focus:border-indigo-500',
+                : 'border-outline-outline-variant focus:border-brand-primary',
             ]"
             :placeholder="translations.form.lastNamePlaceholder"
             @blur="$v.lastName.$touch()"
           />
           <span
-            v-if="$v.lastName.$error"
+            v-if="$v.lastName.$error && $v.lastName.$errors[0]?.$message"
             class="pt-1 text-sm text-red-600 focus:ring-brand-primary border-gray-300"
           >
-            {{ $v.lastName.$errors[0]?.$message ?? '' }}
+            {{ $v.lastName.$errors[0].$message }}
           </span>
         </div>
         <div class="col-span-6">
@@ -251,17 +251,17 @@ const invokeSubmit = async () => {
             :class="[
               $v.email.$error
                 ? 'border-red-600 focus:border-red-600'
-                : 'border-gray-300 focus:border-indigo-500',
+                : 'border-outline-outline-variant focus:border-brand-primary',
             ]"
-            class="appearance-none relative block w-full px-3 py-2 border placeholder-gray-500 text-gray-900 rounded-md focus:outline-none focus:ring-indigo-500 focus:z-10 sm:text-sm"
+            class="appearance-none relative block w-full px-3 py-2 border placeholder-surface-on-surface-variant text-surface-on-surface rounded-md focus:outline-none focus:ring-brand-primary focus:z-10 sm:text-sm"
             :placeholder="translations.form.emailPlaceholder"
             @blur="$v.email.$touch()"
           />
           <span
-            v-if="$v.email.$error"
+            v-if="$v.email.$error && $v.email.$errors[0]?.$message"
             class="pt-1 text-sm text-red-600 focus:ring-brand-primary border-gray-300"
           >
-            {{ $v.email.$errors[0]?.$message ?? '' }}
+            {{ $v.email.$errors[0].$message }}
           </span>
         </div>
         <div class="col-span-6">
@@ -272,20 +272,20 @@ const invokeSubmit = async () => {
             name="phone"
             type="text"
             autocomplete="phone"
-            class="appearance-none relative block w-full px-3 py-2 border placeholder-gray-500 text-gray-900 rounded-md focus:outline-none focus:ring-indigo-500 focus:z-10 sm:text-sm"
+            class="appearance-none relative block w-full px-3 py-2 border placeholder-surface-on-surface-variant text-surface-on-surface rounded-md focus:outline-none focus:ring-brand-primary focus:z-10 sm:text-sm"
             :class="[
               $v.phone.$error
                 ? 'border-red-600 focus:border-red-600'
-                : 'border-gray-300 focus:border-indigo-500',
+                : 'border-outline-outline-variant focus:border-brand-primary',
             ]"
             :placeholder="translations.form.phonePlaceholder"
             @blur="$v.phone.$touch()"
           />
           <span
-            v-if="$v.phone.$error"
+            v-if="$v.phone.$error && $v.phone.$errors[0]?.$message"
             class="pt-1 text-sm text-red-600 focus:ring-brand-primary border-gray-300"
           >
-            {{ $v.phone.$errors[0]?.$message ?? '' }}
+            {{ $v.phone.$errors[0].$message }}
           </span>
         </div>
         <div class="col-span-12">
@@ -296,20 +296,20 @@ const invokeSubmit = async () => {
             name="subject"
             type="text"
             autocomplete="subject"
-            class="appearance-none relative block w-full px-3 py-2 border placeholder-gray-500 text-gray-900 rounded-md focus:outline-none focus:ring-indigo-500 focus:z-10 sm:text-sm"
+            class="appearance-none relative block w-full px-3 py-2 border placeholder-surface-on-surface-variant text-surface-on-surface rounded-md focus:outline-none focus:ring-brand-primary focus:z-10 sm:text-sm"
             :class="[
               $v.subject.$error
                 ? 'border-red-600 focus:border-red-600'
-                : 'border-gray-300 focus:border-indigo-500',
+                : 'border-outline-outline-variant focus:border-brand-primary',
             ]"
             :placeholder="translations.form.subjectPlaceholder"
             @blur="$v.subject.$touch()"
           />
           <span
-            v-if="$v.subject.$error"
+            v-if="$v.subject.$error && $v.subject.$errors[0]?.$message"
             class="pt-1 text-sm text-red-600 focus:ring-brand-primary border-gray-300"
           >
-            {{ $v.subject.$errors[0]?.$message ?? '' }}
+            {{ $v.subject.$errors[0].$message }}
           </span>
         </div>
         <div class="col-span-12">
@@ -320,21 +320,21 @@ const invokeSubmit = async () => {
             name="comment"
             type="text"
             autocomplete="comment"
-            class="appearance-none relative block w-full px-3 py-2 border placeholder-gray-500 text-gray-900 rounded-md focus:outline-none focus:ring-indigo-500 focus:z-10 sm:text-sm"
+            class="appearance-none relative block w-full px-3 py-2 border placeholder-surface-on-surface-variant text-surface-on-surface rounded-md focus:outline-none focus:ring-brand-primary focus:z-10 sm:text-sm"
             :class="[
               $v.comment.$error
                 ? 'border-red-600 focus:border-red-600'
-                : 'border-gray-300 focus:border-indigo-500',
+                : 'border-outline-outline-variant focus:border-brand-primary',
             ]"
             :placeholder="translations.form.commentPlaceholder"
             rows="5"
             @blur="$v.comment.$touch()"
           />
           <span
-            v-if="$v.comment.$error"
+            v-if="$v.comment.$error && $v.comment.$errors[0]?.$message"
             class="pt-1 text-sm text-red-600 focus:ring-brand-primary border-gray-300"
           >
-            {{ $v.comment.$errors[0]?.$message || '' }}
+            {{ $v.comment.$errors[0].$message }}
           </span>
         </div>
         <div class="col-span-12">
@@ -345,7 +345,7 @@ const invokeSubmit = async () => {
               v-model="state.checkbox"
               name="privacy"
               type="checkbox"
-              class="mt-1 focus:ring-indigo-500 h-4 w-4 border text-indigo-600 rounded"
+              class="mt-1 focus:ring-brand-primary h-4 w-4 border text-brand-primary rounded"
               :class="[
                 $v.checkbox.$error ? 'border-red-600' : 'border-gray-300',
               ]"
@@ -363,7 +363,7 @@ const invokeSubmit = async () => {
       </div>
       <div class="flex justify-end mt-10">
         <button
-          class="group relative flex justify-center py-2 px-4 border border-transparent text-sm font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-indigo-500 disabled:opacity-75"
+          class="group relative flex justify-center py-2 px-4 border border-transparent text-sm font-medium rounded-md text-white bg-brand-primary hover:bg-brand-primary-hover focus:outline-none focus:ring-2 focus:ring-brand-primary disabled:opacity-75"
           type="submit"
         >
           {{ translations.form.submit }}

package/app/components/SwFilterChips.vue

@@ -0,0 +1,144 @@
+<script setup lang="ts">
+import { computed } from "vue";
+import type { Schemas } from "#shopware";
+
+type FilterState = {
+  manufacturer: Set<string>;
+  properties: Set<string>;
+  "min-price": number | undefined;
+  "max-price": number | undefined;
+  rating: number | undefined;
+  "shipping-free": boolean | undefined;
+};
+
+type Filter = {
+  id: string;
+  code: string;
+  options?: Array<
+    | Schemas["PropertyGroupOption"]
+    | { id: string; translated?: { name?: string } }
+  >;
+  entities?: Array<
+    | Schemas["ProductManufacturer"]
+    | { id: string; translated?: { name?: string } }
+  >;
+};
+
+const props = defineProps<{
+  filters: FilterState;
+  availableFilters: Filter[];
+}>();
+
+const emit = defineEmits<{
+  remove: [{ code: string; value: string | number }];
+}>();
+
+const getTranslatedName = (
+  item: { translated?: { name?: string }; name?: string } | undefined,
+): string | null => {
+  if (!item) return null;
+  if ("translated" in item) {
+    return item.translated?.name || ("name" in item ? item.name : null) || null;
+  }
+  return null;
+};
+
+const activeChips = computed(() => {
+  const chips: Array<{ label: string; code: string; value: string | number }> =
+    [];
+
+  // Add property filters
+  const properties = Array.from(props.filters.properties);
+  for (const propertyId of properties) {
+    // Check all filters, not just the one with code "properties"
+    // because properties can be in multiple filter groups
+    for (const filter of props.availableFilters) {
+      if ("options" in filter && filter.options) {
+        const option = filter.options.find((o) => o.id === propertyId);
+        const name = getTranslatedName(option);
+        if (name) {
+          chips.push({
+            label: name,
+            code: "properties",
+            value: propertyId,
+          });
+          break;
+        }
+      }
+    }
+  }
+
+  // Add manufacturer filters
+  const manufacturers = Array.from(props.filters.manufacturer);
+  for (const manufacturerId of manufacturers) {
+    const filter = props.availableFilters.find(
+      (f) => f.code === "manufacturer",
+    );
+    if (filter && "entities" in filter && filter.entities) {
+      const entity = filter.entities.find((e) => e.id === manufacturerId);
+      const name = getTranslatedName(entity);
+      if (name) {
+        chips.push({
+          label: name,
+          code: "manufacturer",
+          value: manufacturerId,
+        });
+      }
+    }
+  }
+
+  // Add price filters
+  if (props.filters["min-price"] || props.filters["max-price"]) {
+    const min = props.filters["min-price"] || 0;
+    const max = props.filters["max-price"] || "∞";
+    chips.push({
+      label: `Price: ${min} - ${max}`,
+      code: "price",
+      value: "price-range",
+    });
+  }
+
+  // Add rating filter
+  if (props.filters.rating) {
+    chips.push({
+      label: `Rating: ${props.filters.rating}★`,
+      code: "rating",
+      value: props.filters.rating,
+    });
+  }
+
+  // Add shipping free filter
+  if (props.filters["shipping-free"]) {
+    chips.push({
+      label: "Free Shipping",
+      code: "shipping-free",
+      value: "true",
+    });
+  }
+
+  return chips;
+});
+
+const handleRemoveChip = (chip: { code: string; value: string | number }) => {
+  emit("remove", chip);
+};
+</script>
+
+<template>
+  <div
+    v-if="activeChips.length > 0"
+    class="self-stretch inline-flex justify-start items-center gap-4 flex-wrap content-center mb-6"
+  >
+    <button
+      v-for="(chip, index) in activeChips"
+      :key="`${chip.code}-${chip.value}-${index}`"
+      @click="handleRemoveChip(chip)"
+      class="px-4 py-1.5 bg-brand-tertiary rounded-full inline-flex justify-center items-center gap-1 hover:bg-brand-tertiary-hover transition-colors"
+    >
+      <span class="text-brand-on-tertiary text-base font-normal leading-normal">
+        {{ chip.label }}
+      </span>
+      <span class="i-carbon-close w-5 h-5 text-brand-on-tertiary"></span>
+    </button>
+  </div>
+</template>

package/app/components/SwFilterDropdown.vue

@@ -0,0 +1,54 @@
+<script setup lang="ts">
+import { onClickOutside } from "@vueuse/core";
+import { ref, useTemplateRef } from "vue";
+
+defineProps<{
+  label: string;
+  isActive?: boolean;
+}>();
+
+const isOpen = ref(false);
+const dropdownElement = useTemplateRef<HTMLDivElement>("dropdownElement");
+
+onClickOutside(dropdownElement, () => {
+  isOpen.value = false;
+});
+
+function toggle() {
+  isOpen.value = !isOpen.value;
+}
+</script>
+
+<template>
+  <div ref="dropdownElement" class="relative">
+    <!-- Pill button -->
+    <button
+      type="button"
+      class="bg-brand-tertiary rounded-full px-4 py-1.5 inline-flex items-center hover:bg-brand-tertiary-hover transition-colors"
+      :class="{ 'ring-2 ring-brand-primary': isActive }"
+      @click="toggle"
+      :aria-expanded="isOpen"
+      aria-haspopup="true"
+    >
+      <div class="py-1 inline-flex items-center gap-1">
+        <span class="text-brand-on-tertiary text-base font-normal leading-6">
+          {{ label }}
+        </span>
+        <SwChevronIcon
+          :direction="isOpen ? 'up' : 'down'"
+          :size="24"
+          class="text-brand-on-tertiary"
+        />
+      </div>
+    </button>
+
+    <!-- Dropdown panel -->
+    <div
+      v-if="isOpen"
+      class="absolute top-full left-0 mt-2 min-w-64 bg-surface-surface rounded-lg shadow-lg ring-1 ring-outline-outline-variant z-50 p-4"
+      role="menu"
+    >
+      <slot />
+    </div>
+  </div>
+</template>

package/app/components/SwListingProductPrice.vue

@@ -0,0 +1,89 @@
+<script setup lang="ts">
+import { useCmsTranslations, useProductPrice } from "@shopware/composables";
+import { defu } from "defu";
+import { toRefs } from "vue";
+import type { Schemas } from "#shopware";
+
+const props = defineProps<{
+  product: Schemas["Product"];
+}>();
+
+type Translations = {
+  listing: {
+    variantsFrom: string;
+    previously: string;
+    from: string;
+    to: string;
+  };
+};
+
+let translations: Translations = {
+  listing: {
+    variantsFrom: "variants from",
+    previously: "previously",
+    from: "from",
+    to: "to",
+  },
+};
+
+translations = defu(useCmsTranslations(), translations) as Translations;
+
+const { product } = toRefs(props);
+
+const {
+  price,
+  unitPrice,
+  displayFromVariants,
+  displayFrom,
+  hasListPrice,
+  regulationPrice,
+} = useProductPrice(product);
+</script>
+
+<template>
+  <div :id="product.id" class="inline-flex justify-start items-center gap-2">
+    <!-- Sale price display -->
+    <div v-if="hasListPrice" class="flex items-center gap-2">
+      <div class="text-base font-bold leading-normal">
+        <SwSharedPrice :value="unitPrice">
+          <template #beforePrice>
+            <span v-if="displayFrom || displayFromVariants" class="text-sm">{{
+              translations.listing.from
+            }}</span>
+          </template>
+        </SwSharedPrice>
+      </div>
+      <div class="text-surface-on-surface-variant text-sm font-normal leading-tight line-through">
+        <SwSharedPrice :value="price?.listPrice?.price" />
+      </div>
+    </div>
+
+    <!-- Regular price display -->
+    <div v-else class="text-surface-on-surface text-base font-bold leading-normal">
+      <SwSharedPrice :value="unitPrice">
+        <template #beforePrice>
+          <span v-if="displayFrom || displayFromVariants" class="text-sm">{{
+            translations.listing.from
+          }}</span>
+        </template>
+      </SwSharedPrice>
+    </div>
+
+    <!-- Variants from price -->
+    <div v-if="displayFromVariants" class="text-surface-on-surface text-base font-bold leading-normal">
+      <SwSharedPrice :value="displayFromVariants">
+        <template #beforePrice>
+          <span v-if="displayFromVariants" class="text-sm">{{
+            translations.listing.variantsFrom
+          }}</span>
+        </template>
+      </SwSharedPrice>
+    </div>
+
+    <!-- Regulation price -->
+    <div v-if="regulationPrice" class="flex gap-2 text-surface-on-surface-variant text-sm">
+      {{ translations.listing.previously }}
+      <SwSharedPrice :value="regulationPrice" />
+    </div>
+  </div>
+</template>

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

@@ -2,6 +2,7 @@
 import { OrbitControls, useGLTF } from "@tresjs/cientos";
 import { TresCanvas } from "@tresjs/core";
 import { BasicShadowMap, NoToneMapping, SRGBColorSpace } from "three";
+import { computed } from "vue";
 
 const props = defineProps<{
   src: string;
@@ -17,7 +18,8 @@ const gl = {
   windowSize: false,
 };
 
-const { scene: model } = await useGLTF(props.src);
+const { state } = await useGLTF(props.src);
+const model = computed(() => state.value?.scene);
 </script>
 <template>
   <TresCanvas v-bind="gl">
@@ -27,7 +29,7 @@ const { scene: model } = await useGLTF(props.src);
       :look-at="[0, 0, 0]"
     />
     <OrbitControls />
-    <primitive :object="model" />
+    <primitive v-if="model" :object="model" />
     <TresDirectionalLight :position="[3, 3, 3]" :intensity="1" />
     <TresAmbientLight :intensity="2" />
   </TresCanvas>