@shopware/cms-base-layer 1.5.0 → 2.0.0

package/components/SwProductListingFilters.vue

@@ -1,292 +0,0 @@
-<script setup lang="ts">
-import type {
-  CmsElementProductListing,
-  CmsElementSidebarFilter,
-} from "@shopware/composables";
-import { useCmsTranslations } from "@shopware/composables";
-import { onClickOutside } from "@vueuse/core";
-import { defu } from "defu";
-import { computed, provide, reactive, ref, useTemplateRef } from "vue";
-import type { ComputedRef, UnwrapNestedRefs } from "vue";
-import { type LocationQueryRaw, useRoute, useRouter } from "vue-router";
-import { useCategoryListing } from "#imports";
-import type { Schemas, operations } from "#shopware";
-
-const props = defineProps<{
-  content: CmsElementProductListing | CmsElementSidebarFilter;
-  listingType?: string;
-}>();
-
-type Translations = {
-  listing: {
-    filters: string;
-    sort: string;
-    resetFilters: string;
-  };
-};
-
-let translations: Translations = {
-  listing: {
-    filters: "Filters",
-    sort: "Sort",
-    resetFilters: "Reset filters",
-  },
-};
-
-translations = defu(useCmsTranslations(), translations) as Translations;
-
-const route = useRoute();
-const router = useRouter();
-
-const isSortMenuOpen = ref(false);
-const {
-  changeCurrentSortingOrder,
-  filtersToQuery,
-  getCurrentFilters,
-  getCurrentSortingOrder,
-  getInitialFilters,
-  getSortingOrders,
-  search,
-} = useCategoryListing();
-
-const sidebarSelectedFilters: UnwrapNestedRefs<{
-  [key: string]: Set<string> | string | number | boolean | undefined;
-}> = reactive<{
-  manufacturer: Set<string>;
-  properties: Set<string>;
-  "min-price": string | number | undefined;
-  "max-price": string | number | undefined;
-  rating: string | number | undefined;
-  "shipping-free": boolean | undefined;
-}>({
-  manufacturer: new Set(),
-  properties: new Set(),
-  "min-price": undefined,
-  "max-price": undefined,
-  rating: undefined,
-  "shipping-free": undefined,
-});
-
-const showResetFiltersButton = computed<boolean>(() => {
-  if (
-    selectedOptionIds.value.length !== 0 ||
-    sidebarSelectedFilters["max-price"] ||
-    sidebarSelectedFilters["min-price"] ||
-    sidebarSelectedFilters.rating ||
-    sidebarSelectedFilters["shipping-free"]
-  ) {
-    return true;
-  }
-
-  return false;
-});
-
-const searchCriteriaForRequest: ComputedRef<Schemas["ProductListingCriteria"]> =
-  computed(() => ({
-    manufacturer: [
-      ...(sidebarSelectedFilters.manufacturer as Set<string>),
-    ]?.join("|"),
-    properties: [...(sidebarSelectedFilters.properties as Set<string>)]?.join(
-      "|",
-    ),
-    "min-price": sidebarSelectedFilters["min-price"] as number,
-    "max-price": sidebarSelectedFilters["max-price"] as number,
-    order: getCurrentSortingOrder.value as string,
-    "shipping-free": sidebarSelectedFilters["shipping-free"] as boolean,
-    rating: sidebarSelectedFilters.rating as number,
-    search: "",
-    limit: route.query.limit ? Number(route.query.limit) : 15,
-  }));
-
-for (const param in route.query) {
-  if (Object.prototype.hasOwnProperty.call(sidebarSelectedFilters, param)) {
-    if (
-      sidebarSelectedFilters[param] &&
-      typeof sidebarSelectedFilters[param] === "object"
-    ) {
-      const elements = (route.query[param] as unknown as string).split("|");
-      for (const element of elements) {
-        sidebarSelectedFilters[param].add(element);
-      }
-    } else {
-      const queryValue = route.query[param];
-      if (queryValue !== null && !Array.isArray(queryValue)) {
-        sidebarSelectedFilters[param] = queryValue;
-      }
-    }
-  }
-}
-
-const onOptionSelectToggle = async ({
-  code,
-  value,
-}: {
-  code: string;
-  value: string | number | boolean;
-}) => {
-  if (!["properties", "manufacturer"].includes(code)) {
-    sidebarSelectedFilters[code] = value;
-  } else {
-    const filterSet = sidebarSelectedFilters[code] as Set<string>;
-    const stringValue = String(value);
-    if (filterSet?.has(stringValue)) {
-      filterSet.delete(stringValue);
-    } else {
-      filterSet?.add(stringValue);
-    }
-  }
-
-  await executeSearch();
-};
-
-const executeSearch = async () => {
-  await search(searchCriteriaForRequest.value);
-  const query = filtersToQuery(searchCriteriaForRequest.value);
-  const { limit: _, ...queryWithoutLimit } = query; // remove limit from query
-  await router.push({
-    query: queryWithoutLimit as LocationQueryRaw,
-  });
-};
-
-const clearFilters = () => {
-  (sidebarSelectedFilters.manufacturer as Set<string>).clear();
-  (sidebarSelectedFilters.properties as Set<string>).clear();
-  sidebarSelectedFilters["min-price"] = undefined;
-  sidebarSelectedFilters["max-price"] = undefined;
-  sidebarSelectedFilters.rating = undefined;
-  sidebarSelectedFilters["shipping-free"] = undefined;
-};
-
-const currentSortingOrder = computed({
-  get: (): string => getCurrentSortingOrder.value || "",
-  set: async (order: string): Promise<void> => {
-    await router.push({
-      query: {
-        ...route.query,
-        order,
-      },
-    });
-
-    await changeCurrentSortingOrder(order, {
-      ...(route.query as unknown as operations["searchPage post /search"]["body"]),
-      limit: route.query.limit ? Number(route.query.limit) : 15,
-    });
-  },
-});
-
-const selectedOptionIds = computed(() => [
-  ...(sidebarSelectedFilters.properties as Set<string>),
-  ...(sidebarSelectedFilters.manufacturer as Set<string>),
-]);
-provide("selectedOptionIds", selectedOptionIds);
-
-async function invokeCleanFilters() {
-  clearFilters();
-  await executeSearch();
-}
-const isDefaultSidebarFilter =
-  props.content.type === "sidebar-filter" &&
-  props.content.config?.boxLayout?.value === "standard";
-const dropdownElement = useTemplateRef("dropdownElement");
-onClickOutside(dropdownElement, () => {
-  isSortMenuOpen.value = false;
-});
-
-const handleSortingClick = (key: string) => {
-  currentSortingOrder.value = key;
-  isSortMenuOpen.value = false;
-};
-</script>
-<template>
-  <div class="bg-white">
-    <div class="mx-auto m-0" :class="{ 'px-5': isDefaultSidebarFilter }">
-      <ClientOnly>
-        <div
-          class="relative flex items-baseline justify-between pt-6 pb-6 border-b border-gray-200"
-        >
-          <div class="text-4xl tracking-tight text-gray-900">
-            {{ translations.listing.filters }}
-          </div>
-
-          <div ref="dropdownElement" class="flex items-center">
-            <div class="relative inline-block text-left">
-              <div>
-                <button
-                  type="button"
-                  @click="isSortMenuOpen = !isSortMenuOpen"
-                  class="group inline-flex justify-center bg-transparent text-base font-medium text-gray-700 hover:text-gray-900"
-                  id="menu-button"
-                  aria-expanded="false"
-                  aria-haspopup="true"
-                >
-                  {{ translations.listing.sort }}
-                  <div
-                    class="i-carbon-chevron-down h-5 w-5 ml-1"
-                    :class="{ hidden: isSortMenuOpen }"
-                  ></div>
-                  <div
-                    class="i-carbon-chevron-up h-5 w-5 ml-1"
-                    :class="{ hidden: !isSortMenuOpen }"
-                  ></div>
-                </button>
-              </div>
-              <div
-                :class="[isSortMenuOpen ? 'absolute' : 'hidden']"
-                class="origin-top-left left-0 lg:origin-top-right lg:right-0 lg:left-auto mt-2 w-40 rounded-md shadow-2xl bg-white ring-1 ring-black ring-opacity-5 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 getSortingOrders"
-                    :key="sorting.key"
-                    @click="handleSortingClick(sorting.key)"
-                    :class="[
-                      sorting.key === getCurrentSortingOrder
-                        ? 'font-medium text-gray-900'
-                        : 'text-gray-500',
-                    ]"
-                    class="block px-4 py-2 text-sm bg-transparent"
-                    role="menuitem"
-                    tabindex="-1"
-                  >
-                    {{ sorting.label }}
-                  </button>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-
-        <div class="flex flex-wrap" v-if="getInitialFilters.length">
-          <div
-            v-for="filter in getInitialFilters"
-            :key="`${filter?.id || filter?.code}`"
-            class="mb-2 w-full"
-          >
-            <SwProductListingFilter
-              @select-filter-value="onOptionSelectToggle"
-              :selected-filters="getCurrentFilters"
-              :filter="filter"
-              class="relative"
-            />
-          </div>
-          <div v-if="showResetFiltersButton" class="mx-auto mt-4 mb-2">
-            <button
-              class="w-full justify-center py-2 px-6 border border-transparent shadow-sm text-md font-medium rounded-md text-white bg-black hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500"
-              @click="invokeCleanFilters"
-              type="button"
-            >
-              {{ translations.listing.resetFilters
-              }}<span
-                class="w-6 h-6 i-carbon-close-filled inline-block align-middle ml-2"
-              ></span>
-            </button>
-          </div>
-        </div>
-      </ClientOnly>
-    </div>
-  </div>
-</template>

package/components/listing-filters/SwFilterPrice.vue

@@ -1,160 +0,0 @@
-<script
-  setup
-  lang="ts"
-  generic="
-    ListingFilter extends {
-      code: string;
-      min?: number;
-      max?: number;
-      label: string;
-    }
-  "
->
-import { useCmsTranslations } from "@shopware/composables";
-import { onClickOutside, useDebounceFn } 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);
-</script>
-
-<template>
-  <div class="border-b border-gray-200 py-6 px-5">
-    <h3 class="-my-3 flow-root">
-      <button
-        type="button"
-        class="flex w-full items-center justify-between bg-white py-2 text-base text-gray-400 hover:text-gray-500"
-        @click="toggle"
-      >
-        <span class="font-medium text-gray-900 text-left">{{
-          props.filter.label
-        }}</span>
-        <span class="ml-6 flex items-center">
-          <i
-            :class="[
-              !isFilterVisible
-                ? 'i-carbon-chevron-down'
-                : 'i-carbon-chevron-up',
-            ]"
-          />
-        </span>
-      </button>
-    </h3>
-
-    <transition name="fade" mode="out-in">
-      <div v-show="isFilterVisible" class="space-y-6 mt-5">
-        <div class="mt-2 flex">
-          <div class="w-1/2 flex rounded-md mr-4">
-            <span
-              class="inline-flex items-center px-3 rounded-l-md border border-r-0 border-gray-300 bg-gray-50 text-gray-500 text-sm"
-            >
-              {{ translations.listing.min }}
-            </span>
-            <input
-              id="min-price"
-              v-model="prices.min"
-              step="1"
-              type="number"
-              name="min-price"
-              class="pl-2 focus:ring-indigo-500 focus:border-indigo-500 flex-1 block w-full rounded-none rounded-r-md sm:text-sm border border-gray-300"
-              :placeholder="prices.min?.toString()"
-            />
-          </div>
-          <div class="w-1/2 flex rounded-md">
-            <span
-              class="inline-flex items-center px-3 rounded-l-md border border-r-0 border-gray-300 bg-gray-50 text-gray-500 text-sm"
-            >
-              {{ translations.listing.max }}
-            </span>
-            <input
-              id="max-price"
-              v-model="prices.max"
-              type="number"
-              name="max-price"
-              class="pl-2 focus:ring-indigo-500 focus:border-indigo-500 flex-1 block w-full rounded-none rounded-r-md sm:text-sm border border-gray-300"
-              :placeholder="prices.max?.toString()"
-            />
-          </div>
-        </div>
-      </div>
-    </transition>
-  </div>
-</template>
-<style scoped>
-.fade-enter-active,
-.fade-leave-active {
-  transition: all 0.2s ease;
-}
-
-.fade-enter-from,
-.fade-leave-to {
-  opacity: 0;
-}
-</style>

package/components/listing-filters/SwFilterProperties.vue

@@ -1,123 +0,0 @@
-<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 { inject, ref } from "vue";
-import type { Schemas } from "#shopware";
-
-const props = defineProps<{
-  filter: ListingFilter;
-}>();
-
-const emits =
-  defineEmits<
-    (e: "select-value", value: { code: string; value: unknown }) => void
-  >();
-const selectedOptionIds = inject<string[]>("selectedOptionIds");
-const isFilterVisible = ref<boolean>(false);
-const toggle = () => {
-  isFilterVisible.value = !isFilterVisible.value;
-};
-</script>
-
-<template>
-  <div class="border-b border-gray-200 py-6 px-5">
-    <h2 class="-my-3 flow-root">
-      <button
-        type="button"
-        class="flex w-full items-center justify-between bg-white py-2 text-base text-gray-400 hover:text-gray-500"
-        @click="toggle"
-      >
-        <span class="font-medium text-gray-900 text-left">{{
-          props.filter.label
-        }}</span>
-        <span class="ml-6 flex items-center">
-          <i
-            :class="[
-              !isFilterVisible
-                ? 'i-carbon-chevron-down'
-                : 'i-carbon-chevron-up',
-            ]"
-          />
-        </span>
-      </button>
-    </h2>
-    <transition name="fade" mode="out-in">
-      <div v-show="isFilterVisible" :id="props.filter.code" class="pt-6">
-        <fieldset class="space-y-4">
-          <legend class="sr-only">{{ props.filter.name }}</legend>
-          <div
-            v-for="option in props.filter.options || props.filter.entities"
-            :key="`${option.id}-${selectedOptionIds?.includes(option.id)}`"
-            class="flex items-center"
-          >
-            <input
-              :id="`filter-mobile-${props.filter.code}-${option.id}`"
-              :checked="selectedOptionIds?.includes(option.id)"
-              :name="props.filter.name"
-              :value="option.name"
-              :aria-label="`${option.name} filter`"
-              type="checkbox"
-              class="h-4 w-4 border-gray-300 rounded text-indigo-600 focus:ring-indigo-500"
-              @change="
-                emits('select-value', {
-                  code: props.filter.code,
-                  value: option.id,
-                })
-              "
-            />
-
-            <div v-if="option.media?.url">
-              <img
-                loading="lazy"
-                class="ml-2 h-4 w-4"
-                :src="option.media.url"
-                :alt="option.media.translated.alt || ''"
-                :class="{
-                  'border-blue border-2': selectedOptionIds?.includes(
-                    option.id,
-                  ),
-                }"
-              />
-            </div>
-            <div
-              v-else-if="option.colorHexCode"
-              class="ml-2 h-4 w-4"
-              :style="`background-color: ${option.colorHexCode}`"
-              :class="{
-                'border-blue border-2': selectedOptionIds?.includes(option.id),
-              }"
-            />
-            <label
-              :for="`filter-mobile-${props.filter.code}-${option.id}`"
-              class="ml-3 text-gray-600"
-            >
-              {{ getTranslatedProperty(option, "name") }}
-            </label>
-          </div>
-        </fieldset>
-      </div>
-    </transition>
-  </div>
-</template>
-<style scoped>
-.fade-enter-active,
-.fade-leave-active {
-  transition: all 0.2s ease;
-}
-
-.fade-enter-from,
-.fade-leave-to {
-  opacity: 0;
-}
-</style>

package/components/listing-filters/SwFilterRating.vue

@@ -1,101 +0,0 @@
-<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="border-b border-gray-200 py-6 px-5">
-    <h3 class="-my-3 flow-root">
-      <button
-        type="button"
-        class="flex w-full items-center justify-between bg-white py-2 text-base text-gray-400 hover:text-gray-500"
-        @click="toggle"
-      >
-        <span class="font-medium text-gray-900 text-left">{{
-          props.filter.label
-        }}</span>
-        <span class="ml-6 flex items-center">
-          <i
-            :class="[
-              !isFilterVisible
-                ? 'i-carbon-chevron-down'
-                : 'i-carbon-chevron-up',
-            ]"
-          />
-        </span>
-      </button>
-    </h3>
-    <transition name="fade" mode="out-in">
-      <div v-show="isFilterVisible">
-        <div class="space-y-6 mt-4">
-          <div class="flex">
-            <div
-              v-for="i in 5"
-              :key="i"
-              class="h-6 w-6 c-yellow-500"
-              :class="{
-                'i-carbon-star-filled': displayedScore >= i,
-                'i-carbon-star': displayedScore < i,
-              }"
-              @mouseleave="isHoverActive = false"
-              @click="onChangeRating()"
-              @mouseover="hoverRating(i)"
-            />
-          </div>
-        </div>
-      </div>
-    </transition>
-  </div>
-</template>
-<style scoped>
-.fade-enter-active,
-.fade-leave-active {
-  transition: all 0.2s ease;
-}
-
-.fade-enter-from,
-.fade-leave-to {
-  opacity: 0;
-}
-</style>