@shopware/cms-base-layer 1.5.1 → 2.0.0

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>

package/components/listing-filters/SwFilterShippingFree.vue

@@ -1,104 +0,0 @@
-<script
-  setup
-  lang="ts"
-  generic="
-    ListingFilter extends {
-      id: string;
-      code: keyof Schemas['ProductListingResult']['currentFilters'];
-      label: string;
-      name: string;
-    }
-  "
->
-import { onClickOutside } from "@vueuse/core";
-import { computed, ref } from "vue";
-import type { Schemas } from "#shopware";
-
-const props = defineProps<{
-  filter: ListingFilter;
-  selectedFilters: Schemas["ProductListingResult"]["currentFilters"];
-}>();
-
-const emits =
-  defineEmits<
-    (e: "select-value", value: { code: string; value: unknown }) => void
-  >();
-const currentFilterData = computed(
-  () => !!props.selectedFilters[props.filter?.code],
-);
-const onChangeOption = (): void => {
-  emits("select-value", {
-    code: props.filter?.code,
-    value: !currentFilterData.value,
-  });
-};
-
-const isFilterVisible = ref<boolean>(false);
-const toggle = () => {
-  isFilterVisible.value = !isFilterVisible.value;
-};
-
-const dropdownElement = ref(null);
-onClickOutside(dropdownElement, () => {
-  isFilterVisible.value = false;
-});
-</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" id="filter-section-0" class="pt-6">
-        <div class="space-y-4">
-          <div class="flex items-center" @click="onChangeOption()">
-            <input
-              :id="`filter-mobile-${props.filter.id || props.filter.code}`"
-              :checked="currentFilterData"
-              :name="props.filter.name"
-              :value="props.filter.name"
-              type="checkbox"
-              class="h-4 w-4 border-gray-300 rounded text-indigo-600 focus:ring-indigo-500"
-            />
-
-            <label
-              :for="`filter-mobile-${props.filter.id || props.filter.code}`"
-              class="ml-3 text-gray-600"
-            >
-              {{ props.filter.label }}
-            </label>
-          </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/public/cms/block/CmsBlockImageFourColumn.vue

@@ -1,29 +0,0 @@
-<script setup lang="ts">
-import type { CmsBlockImageFourColumn } from "@shopware/composables";
-import { useCmsBlock } from "#imports";
-
-const props = defineProps<{
-  content: CmsBlockImageFourColumn;
-}>();
-
-const { getSlotContent } = useCmsBlock(props.content);
-
-const leftContent = getSlotContent("left");
-const rightContent = getSlotContent("right");
-const centerLeftContent = getSlotContent("center-left");
-const centerRightContent = getSlotContent("center-right");
-</script>
-<template>
-  <div class="cms-block-image-four-column grid md:grid-cols-4 gap-10">
-    <CmsGenericElement :content="leftContent" />
-    <CmsGenericElement :content="centerLeftContent" />
-    <CmsGenericElement :content="centerRightContent" />
-    <CmsGenericElement :content="rightContent" />
-  </div>
-</template>
-
-<style scoped>
-.cms-block-image-four-column .cms-element-image {
-  @apply object-cover;
-}
-</style>

package/components/public/cms/block/CmsBlockImageHighlightRow.vue

@@ -1,27 +0,0 @@
-<script setup lang="ts">
-import type { CmsBlockImageHighlightRow } from "@shopware/composables";
-import { useCmsBlock } from "#imports";
-
-const props = defineProps<{
-  content: CmsBlockImageHighlightRow;
-}>();
-
-const { getSlotContent } = useCmsBlock(props.content);
-
-const leftContent = getSlotContent("left");
-const rightContent = getSlotContent("right");
-const centerContent = getSlotContent("center");
-</script>
-<template>
-  <div class="cms-block-image-highlight-row grid md:grid-cols-3 gap-10">
-    <CmsGenericElement :content="leftContent" />
-    <CmsGenericElement :content="centerContent" />
-    <CmsGenericElement :content="rightContent" />
-  </div>
-</template>
-
-<style scoped>
-.cms-block-image-highlight-row .cms-element-image {
-  @apply border-[12px] border-white;
-}
-</style>

package/components/public/cms/block/CmsBlockImageTextGallery.vue

@@ -1,85 +0,0 @@
-<script setup lang="ts">
-import type {
-  CmsBlockImageTextGallery,
-  CmsElementImage,
-  CmsElementText,
-} from "@shopware/composables";
-import { useCmsBlock } from "#imports";
-import type { Schemas } from "#shopware";
-
-const props = defineProps<{
-  content: CmsBlockImageTextGallery;
-}>();
-
-const { getSlotContent } = useCmsBlock(props.content);
-
-const leftTextContent = getSlotContent("left-text") as CmsElementText;
-const rightTextContent = getSlotContent("right-text") as CmsElementText;
-const centerTextContent = getSlotContent("center-text") as CmsElementText;
-
-const leftImageContent = getSlotContent("left-image") as CmsElementImage;
-const rightImageContent = getSlotContent("right-image") as CmsElementImage;
-const centerImageContent = getSlotContent("center-image") as CmsElementImage;
-
-// TODO: useRouter
-function onImageClick(
-  slotContent: Schemas["CmsSlot"] & {
-    data: {
-      url?: string;
-      newTab?: boolean;
-    };
-  },
-) {
-  if (slotContent.data?.url) {
-    if (slotContent.data?.newTab) {
-      window.open(slotContent.data.url);
-    } else {
-      window.location.href = slotContent.data.url;
-    }
-  }
-}
-</script>
-<template>
-  <article
-    class="cms-block-image-text-gallery"
-    :style="{ backgroundColor: content.backgroundColor || '' }"
-  >
-    <div class="cms-block-image-text-gallery__container">
-      <div class="cms-block-image-text-gallery__container__column">
-        <CmsElementImage
-          :content="leftImageContent"
-          :style="{ cursor: leftImageContent.data?.url && 'pointer' }"
-          @click="onImageClick(leftImageContent)"
-        />
-        <CmsElementText
-          :content="leftTextContent"
-          class="cms-block-imag)e-text-gallery__container__column--text"
-        />
-      </div>
-      <div class="cms-block-image-text-gallery__container__column">
-        <CmsElementImage
-          :content="centerImageContent"
-          :style="{
-            cursor: centerImageContent.data?.url && 'pointer',
-          }"
-          @click="onImageClick(centerImageContent)"
-        />
-        <CmsElementText
-          :content="centerTextContent"
-          class="cms-block-image-text-gallery__container__column--text"
-        />
-      </div>
-      <div class="cms-block-image-text-gallery__container__column">
-        <CmsElementImage
-          :content="rightImageContent"
-          :style="{ cursor: rightImageContent.data?.url && 'pointer' }"
-          @click="onImageClick(rightImageContent)"
-        />
-        <CmsElementText
-          :content="rightTextContent"
-          class="cms-block-image-text-gallery__container__column--text"
-        />
-      </div>
-    </div>
-  </article>
-</template>

package/components/public/cms/block/CmsBlockImageTextRow.vue

@@ -1,43 +0,0 @@
-<script setup lang="ts">
-import type { CmsBlockImageTextRow } from "@shopware/composables";
-import { useCmsBlock } from "#imports";
-
-const props = defineProps<{
-  content: CmsBlockImageTextRow;
-}>();
-
-const { getSlotContent } = useCmsBlock(props.content);
-
-const leftImageContent = getSlotContent("left-image");
-const leftTextContent = getSlotContent("left-text");
-const centerImageContent = getSlotContent("center-image");
-const centerTextContent = getSlotContent("center-text");
-const rightImageContent = getSlotContent("right-image");
-const rightTextContent = getSlotContent("right-text");
-</script>
-<template>
-  <div class="cms-block-image-text-row grid md:grid-cols-3 gap-10">
-    <div class="cms-block-image-text-row__column">
-      <CmsGenericElement :content="leftImageContent" />
-      <CmsGenericElement :content="leftTextContent" />
-    </div>
-    <div class="cms-block-image-text-row__column">
-      <CmsGenericElement :content="centerImageContent" />
-      <CmsGenericElement :content="centerTextContent" />
-    </div>
-    <div class="cms-block-image-text-row__column">
-      <CmsGenericElement :content="rightImageContent" />
-      <CmsGenericElement :content="rightTextContent" />
-    </div>
-  </div>
-</template>
-
-<style scoped>
-.cms-block-image-text-row .cms-element-image {
-  @apply object-cover;
-}
-
-.cms-block-image-text-row .cms-block-image-text-row__column div:first-child {
-  @apply mb-5;
-}
-</style>