@shopware/cms-base-layer 1.5.1 → 2.0.0

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

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

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

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

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

@@ -1,20 +0,0 @@
-<script setup lang="ts">
-import type { CmsBlockTextOnImage } from "@shopware/composables";
-import { useCmsBlock } from "#imports";
-
-const props = defineProps<{
-  content: CmsBlockTextOnImage;
-}>();
-
-const { getSlotContent } = useCmsBlock(props.content);
-
-const slotContent = getSlotContent("content");
-</script>
-
-<template>
-  <CmsGenericElement
-    v-if="slotContent"
-    :content="slotContent"
-    class="cms-block-text-on-image min-h-md"
-  />
-</template>

package/components/public/cms/element/CmsElementBuyBox.vue

@@ -1,190 +0,0 @@
-<script setup lang="ts">
-import type { CmsElementBuyBox } from "@shopware/composables";
-import { useCmsTranslations } from "@shopware/composables";
-import { defu } from "defu";
-import { computed } from "vue";
-import {
-  useCmsElementConfig,
-  usePrice,
-  useProduct,
-  useProductPrice,
-  useSessionContext,
-} from "#imports";
-
-const props = defineProps<{
-  content: CmsElementBuyBox;
-}>();
-
-type Translations = {
-  product: {
-    previously: string;
-    amount: string;
-    price: {
-      [key: string]: string;
-    };
-    to: string;
-    from: string;
-    content: string;
-    pricesIncl: string;
-    pricesExcl: string;
-    deliveryTime: string;
-    days: string;
-    noAvailable: string;
-    productNumber: string;
-  };
-};
-
-let translations: Translations = {
-  product: {
-    previously: "Previously",
-    amount: "Amount",
-    price: {
-      label: "Price",
-      to: "To",
-      from: "From",
-    },
-    to: "To",
-    from: "From",
-    content: "Content",
-    pricesIncl: "Prices incl. VAT plus shipping costs",
-    pricesExcl: "Prices excl. VAT plus shipping costs",
-    deliveryTime: "Available, delivery time",
-    days: "days",
-    noAvailable: "No longer available",
-    productNumber: "Product number",
-  },
-};
-
-translations = defu(useCmsTranslations(), translations) as Translations;
-
-const { getConfigValue } = useCmsElementConfig(props.content);
-const alignment = computed(() => getConfigValue("alignment"));
-
-const { taxState, currency } = useSessionContext();
-
-const { product, changeVariant } = useProduct(
-  props.content.data.product,
-  props.content.data.configuratorSettings || [],
-);
-
-const { unitPrice, price, tierPrices, isListPrice } = useProductPrice(product);
-const regulationPrice = computed(() => price.value?.regulationPrice?.price);
-const { getFormattedPrice } = usePrice();
-
-const referencePrice = computed(
-  () => product.value?.calculatedPrice?.referencePrice,
-);
-const productNumber = computed(() => product.value?.productNumber);
-const purchaseUnit = computed(() => product.value?.purchaseUnit);
-const unitName = computed(() => product.value?.unit?.name);
-const availableStock = computed(() => product.value?.availableStock ?? 0);
-const minPurchase = computed(() => product.value?.minPurchase ?? 0);
-const deliveryTime = computed(() => product.value?.deliveryTime);
-const restockTime = computed(() => product.value?.restockTime);
-</script>
-<template>
-  <div
-    v-if="product"
-    :class="{
-      'h-full flex flex-col': true,
-      'justify-start': alignment === 'flex-start',
-      'justify-end': alignment === 'flex-end',
-      'justify-center': alignment === 'center',
-    }"
-  >
-    <div>
-      <div v-if="tierPrices.length <= 1">
-        <SwSharedPrice
-          v-if="isListPrice"
-          class="text-1xl text-secondary-900 basis-2/6 justify-start line-through"
-          :value="price?.listPrice?.price"
-        />
-        <SwSharedPrice
-          v-if="unitPrice"
-          class="text-3xl text-secondary-900 basis-2/6 justify-start"
-          :class="{
-            'text-red': isListPrice,
-          }"
-          :value="unitPrice"
-        />
-        <div v-if="regulationPrice" class="text-xs flex text-secondary-500">
-          {{ translations.product.previously }}
-          <SwSharedPrice class="ml-1" :value="regulationPrice" />
-        </div>
-      </div>
-      <div v-else>
-        <table class="border-collapse table-auto w-full text-sm mb-8">
-          <thead>
-            <tr>
-              <th
-                class="border-b dark:border-secondary-600 font-medium p-4 pl-8 pt-0 pb-3 text-secondary-600 dark:text-secondary-200 text-left"
-              >
-                {{ translations.product.amount }}
-              </th>
-
-              <th
-                class="border-b dark:border-secondary-600 font-medium p-4 pr-8 pt-0 pb-3 text-secondary-600 dark:text-secondary-200 text-left"
-              >
-                {{ translations.product.price.label }}
-              </th>
-            </tr>
-          </thead>
-          <tbody class="bg-white dark:bg-secondary-800">
-            <tr v-for="(tierPrice, index) in tierPrices" :key="tierPrice.label">
-              <td
-                class="border-b border-secondary-100 dark:border-secondary-700 p-4 pl-8 font-medium text-secondary-500 dark:text-secondary-400"
-              >
-                <span v-if="index < tierPrices.length - 1">{{
-                  translations.product.to
-                }}</span
-                ><span v-else>{{ translations.product.from }}</span>
-                {{ tierPrice.quantity }}
-              </td>
-              <td
-                class="border-b border-secondary-100 dark:border-secondary-700 p-4 pr-8 font-medium text-current-500 dark:text-secondary-400"
-              >
-                {{ getFormattedPrice(tierPrice.unitPrice) }}
-              </td>
-            </tr>
-          </tbody>
-        </table>
-      </div>
-      <div v-if="purchaseUnit && unitName" class="mt-1">
-        <span class="font-light"> {{ translations.product.content }}: </span>
-        <span class="font-light"> {{ purchaseUnit }} {{ unitName }} </span>
-        <span v-if="referencePrice" class="font-light">
-          {{ currency?.symbol }} {{ referencePrice?.price }} / /
-          {{ referencePrice?.referenceUnit }} {{ referencePrice?.unitName }}
-        </span>
-      </div>
-      <span class="text-indigo-600">
-        <template v-if="taxState === 'gross'">
-          {{ translations.product.pricesIncl }}
-        </template>
-        <template v-else> {{ translations.product.pricesExcl }} </template>
-      </span>
-    </div>
-    <div class="mt-4">
-      <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>
-    <SwVariantConfigurator @change="changeVariant" />
-    <SwProductAddToCart :product="product" />
-    <div class="mt-3 product-detail-ordernumber-container">
-      <span class="font-bold text-secondary-900">
-        {{ translations.product.productNumber }}:
-      </span>
-      <span>
-        {{ productNumber }}
-      </span>
-    </div>
-  </div>
-</template>

package/components/public/cms/element/CmsElementCategoryNavigation.vue

@@ -1,167 +0,0 @@
-<script setup lang="ts">
-import { useCmsTranslations } from "@shopware/composables";
-import { getTranslatedProperty } from "@shopware/helpers";
-import { defu } from "defu";
-import type { Ref } from "vue";
-import { onMounted, ref } from "vue";
-import { useCategory, useNavigation } from "#imports";
-import type { Schemas } from "#shopware";
-
-type Translations = {
-  listing: {
-    category: string;
-    subCategory: string;
-    subCategoryOf: string;
-    loading: string;
-    categories: string;
-    subCategories: string;
-  };
-};
-
-let translations: Translations = {
-  listing: {
-    category: "Category",
-    subCategory: "Sub-category",
-    subCategoryOf: "of",
-    loading: "Loading ...",
-    categories: "Categories",
-    subCategories: "Sub-categories",
-  },
-};
-
-translations = defu(useCmsTranslations(), translations) as Translations;
-
-const { category: activeCategory } = useCategory();
-const loading: Ref<boolean> = ref(true);
-const flagAllowSubcategories: boolean = true; // could be passed maybe as a prop in the future
-const categoryNavigation: Ref<Schemas["Category"][]> = ref([]);
-
-const currentCategoryId = activeCategory.value?.id ?? "main-navigation";
-const type = flagAllowSubcategories ? currentCategoryId : "main-navigation";
-const { loadNavigationElements } = useNavigation({
-  type: type,
-});
-const removeChildrenIfNotActiveCategory = () => {
-  const navigation: Schemas["Category"][] = JSON.parse(
-    JSON.stringify(categoryNavigation.value),
-  );
-  return navigation?.map((navigationElement) => {
-    navigationElement.children =
-      activeCategory.value?.id === navigationElement.id
-        ? navigationElement.children
-        : [];
-    return navigationElement;
-  });
-};
-
-onMounted(async () => {
-  // depth 0 means, we load only first level of categories, depth 1 means we load first and second level of categories ...
-  const depth = flagAllowSubcategories ? 0 : 1;
-  categoryNavigation.value = await loadNavigationElements({ depth });
-  if (!flagAllowSubcategories) {
-    categoryNavigation.value = removeChildrenIfNotActiveCategory();
-  }
-  loading.value = false;
-});
-</script>
-<template>
-  <div>
-    <div
-      v-if="categoryNavigation && categoryNavigation.length"
-      class="cms-element-category-navigation max-w-screen-xl mx-auto"
-    >
-      <h2
-        v-if="categoryNavigation.length > 0 && !flagAllowSubcategories"
-        class="text-3xl tracking-tight text-secondary-900 m-0 px-5"
-      >
-        {{
-          categoryNavigation.length > 1
-            ? translations.listing.categories
-            : translations.listing.category
-        }}
-      </h2>
-      <h2
-        v-if="categoryNavigation.length > 0 && flagAllowSubcategories"
-        class="text-3xl tracking-tight text-secondary-900 m-0 px-5"
-      >
-        {{
-          categoryNavigation.length > 1
-            ? translations.listing.subCategories
-            : translations.listing.subCategory
-        }}
-        {{ translations.listing.subCategoryOf }}
-        {{ getTranslatedProperty(activeCategory, "name") }}
-      </h2>
-      <SwCategoryNavigation
-        :level="0"
-        :elements="categoryNavigation"
-        :active-category="activeCategory"
-      />
-    </div>
-    <div v-if="loading">
-      <div class="px-5">
-        <h2 class="text-3xl tracking-tight text-secondary-900 m-0 px-5 pl-0">
-          {{ translations.listing.loading }}
-        </h2>
-        <div
-          class="border border-secondary-200 shadow rounded-md p-4 max-w-screen-xl mx-auto"
-        >
-          <div class="animate-pulse flex space-x-4">
-            <div class="flex-1 space-y-6 py-1">
-              <div class="space-y-3">
-                <div class="grid grid-cols-3 gap-4">
-                  <div class="h-2 bg-light-200 rounded col-span-2"></div>
-                  <div class="h-2 bg-light-200 rounded col-span-1"></div>
-                </div>
-                <div class="h-2 bg-secondary-200 rounded"></div>
-              </div>
-              <div class="space-y-3">
-                <div class="grid grid-cols-3 gap-4">
-                  <div class="h-2 bg-light-200 rounded col-span-1"></div>
-                  <div class="h-2 bg-light-200 rounded col-span-2"></div>
-                </div>
-                <div class="h-2 bg-secondary-200 rounded"></div>
-              </div>
-            </div>
-          </div>
-          <div class="animate-pulse flex space-x-4">
-            <div class="flex-1 space-y-6 py-4">
-              <div class="space-y-3">
-                <div class="grid grid-cols-3 gap-4">
-                  <div class="h-2 bg-light-200 rounded col-span-2"></div>
-                  <div class="h-2 bg-light-200 rounded col-span-1"></div>
-                </div>
-                <div class="h-2 bg-secondary-200 rounded"></div>
-              </div>
-              <div class="space-y-3">
-                <div class="grid grid-cols-3 gap-4">
-                  <div class="h-2 bg-light-200 rounded col-span-1"></div>
-                  <div class="h-2 bg-light-200 rounded col-span-2"></div>
-                </div>
-                <div class="h-2 bg-secondary-200 rounded"></div>
-              </div>
-            </div>
-          </div>
-          <div class="animate-pulse flex space-x-4">
-            <div class="flex-1 space-y-6 pt-4">
-              <div class="space-y-3">
-                <div class="grid grid-cols-6 gap-4">
-                  <div class="h-2 bg-light-200 rounded col-span-1"></div>
-                  <div class="h-2 bg-light-200 rounded col-span-5"></div>
-                </div>
-                <div class="h-2 bg-secondary-200 rounded"></div>
-              </div>
-              <div class="space-y-3">
-                <div class="grid grid-cols-3 gap-4">
-                  <div class="h-2 bg-light-200 rounded col-span-2"></div>
-                  <div class="h-2 bg-light-200 rounded col-span-1"></div>
-                </div>
-                <div class="h-2 bg-secondary-200 rounded"></div>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</template>

package/components/public/cms/element/CmsElementImageGallery.vue

@@ -1,249 +0,0 @@
-<script setup lang="ts">
-import type { CmsElementImageGallery } from "@shopware/composables";
-import { computed, onMounted, ref, useTemplateRef } from "vue";
-import { useCmsElementConfig } from "#imports";
-import { isSpatial } from "../../../../helpers/media/isSpatial";
-
-const props = withDefaults(
-  defineProps<{
-    content: CmsElementImageGallery;
-    slidesToShow?: number;
-    slidesToScroll?: number;
-  }>(),
-  {
-    slidesToShow: 5,
-    slidesToScroll: 4,
-  },
-);
-
-const { getConfigValue } = useCmsElementConfig(props.content);
-
-const speed = ref<number>(300);
-const currentIndex = ref(0);
-const currentThumb = ref(0);
-const imageSlider = useTemplateRef("imageSlider");
-const imageThumbsTrack = useTemplateRef("imageThumbsTrack");
-const isLoading = ref(true);
-const imageThumbsTrackStyle = ref({});
-const imageThumbs = useTemplateRef("imageThumbs");
-const imageThumbsStyle = ref({});
-const mediaGallery = computed(() => props.content.data?.sliderItems ?? []);
-const galleryPosition = computed<string>(
-  () => getConfigValue("galleryPosition") ?? "left",
-);
-const scrollPx = ref(0);
-
-onMounted(() => {
-  initThumbs();
-});
-
-function initThumbs() {
-  if (imageThumbsTrack.value) {
-    setTimeout(() => {
-      if (galleryPosition.value === "left") {
-        const clientHeight = imageThumbsTrack.value?.clientHeight ?? 0;
-        scrollPx.value = clientHeight / mediaGallery.value.length;
-        imageThumbsStyle.value = {
-          height: `${scrollPx.value * +props.slidesToShow}px`,
-        };
-      } else {
-        const clientWidth = imageThumbs.value?.clientWidth ?? 0;
-        scrollPx.value = clientWidth / props.slidesToShow;
-        imageThumbsTrackStyle.value = {
-          width: `${scrollPx.value * mediaGallery.value.length}px`,
-        };
-      }
-      isLoading.value = false;
-    }, 100);
-  }
-}
-
-function changeCover(i: number) {
-  if (i === currentIndex.value) return;
-  imageSlider.value?.goToSlide(i);
-}
-
-function handleChangeSlide(e: number) {
-  currentIndex.value = e;
-  if (currentIndex.value > currentThumb.value + props.slidesToShow - 1) {
-    move("next", currentIndex.value);
-    return;
-  }
-  if (currentIndex.value < currentThumb.value) {
-    move("previous", currentIndex.value);
-    return;
-  }
-}
-
-function move(type: "next" | "previous", specificIndex?: number | string) {
-  let step: number;
-  const index =
-    typeof specificIndex !== "number"
-      ? Number.parseInt(specificIndex as string)
-      : specificIndex;
-  if (index >= 0) {
-    if (type === "next") {
-      step =
-        index + props.slidesToScroll < mediaGallery.value.length
-          ? index
-          : mediaGallery.value.length - props.slidesToShow;
-    } else {
-      step =
-        index - props.slidesToScroll > 0 ? index - props.slidesToScroll : 0;
-    }
-  } else {
-    if (type === "next") {
-      step =
-        currentThumb.value + props.slidesToShow - 1 + props.slidesToScroll <
-        mediaGallery.value.length
-          ? currentThumb.value + props.slidesToScroll
-          : mediaGallery.value.length - props.slidesToShow;
-    } else {
-      step =
-        currentThumb.value - props.slidesToScroll > 0
-          ? currentThumb.value - props.slidesToScroll
-          : 0;
-    }
-  }
-  currentThumb.value = step;
-  let xAxis = 0;
-  let yAxis = 0;
-  if (galleryPosition.value === "left") {
-    yAxis = scrollPx.value * currentThumb.value;
-  } else {
-    xAxis = scrollPx.value * currentThumb.value;
-  }
-  imageThumbsTrackStyle.value = {
-    ...imageThumbsTrackStyle.value,
-    transform: `translate3d(-${xAxis}px, -${yAxis}px, 0px)`,
-    transition: `transform ${speed.value}ms ease 0s`,
-  };
-}
-
-function previous() {
-  if (currentThumb.value <= 0) {
-    return;
-  }
-  move("previous");
-}
-
-function next() {
-  if (currentThumb.value + props.slidesToShow >= mediaGallery.value.length) {
-    return;
-  }
-  move("next");
-}
-</script>
-
-<template>
-  <div
-    :class="{
-      'opacity-0': isLoading,
-      'flex gap-10': true,
-      'flex-col-reverse': galleryPosition === 'underneath',
-    }"
-  >
-    <div
-      :class="{
-        'hidden lg:flex basis-20 relative flex-col items-center':
-          galleryPosition === 'left',
-        'flex relative w-full': galleryPosition === 'underneath',
-      }"
-    >
-      <button
-        v-if="mediaGallery.length > slidesToShow"
-        class="disabled:opacity-10 p-1"
-        aria-label="Previous image"
-        @click="previous"
-      >
-        <div
-          class="h-7 w-7"
-          :class="{
-            'i-carbon-chevron-up': galleryPosition === 'left',
-            'i-carbon-chevron-left': galleryPosition !== 'left',
-          }"
-        />
-      </button>
-      <span class="sr-only">Previous image</span>
-      <div
-        ref="imageThumbs"
-        class="overflow-hidden -my-2.5"
-        :style="imageThumbsStyle"
-      >
-        <div
-          ref="imageThumbsTrack"
-          :class="{
-            flex: true,
-            'flex-col': galleryPosition === 'left',
-          }"
-          :style="imageThumbsTrackStyle"
-        >
-          <div
-            v-for="(image, i) in mediaGallery"
-            :key="image.media.url"
-            :class="{
-              'py-2.5': galleryPosition === 'left',
-              'flex-1 px-2.5': galleryPosition === 'underneath',
-            }"
-          >
-            <div
-              class="w-20 h-20 overflow-hidden cursor-pointer p-1 border-secondary-200 rounded transition duration-150 ease-in-out"
-              :class="{
-                border: i !== currentIndex,
-                'border-indigo-500 border-3': i === currentIndex,
-              }"
-              @click="() => changeCover(i)"
-            >
-              <div v-if="isSpatial(image.media)" class="h-full relative">
-                <CmsElementImageGallery3dPlaceholder
-                  class="w-full h-full object-center"
-                />
-                <span
-                  class="absolute bottom-0 text-sm bg-gray rounded px-1 text-white"
-                >
-                  3D</span
-                >
-              </div>
-              <img
-                v-else
-                loading="lazy"
-                :src="image.media.url"
-                class="w-full h-full object-center object-cover"
-                alt="Product image"
-              />
-            </div>
-          </div>
-        </div>
-      </div>
-      <button
-        v-if="mediaGallery.length > slidesToShow"
-        class="disabled:opacity-10 p-1"
-        aria-label="Next image"
-        @click="next"
-      >
-        <span class="sr-only">Next image</span>
-        <div
-          class="h-7 w-7"
-          :class="{
-            'i-carbon-chevron-down': galleryPosition === 'left',
-            'i-carbon-chevron-right': galleryPosition !== 'left',
-          }"
-        />
-      </button>
-    </div>
-    <div class="flex-1 overflow-hidden">
-      <SwSlider
-        ref="imageSlider"
-        :config="props.content.config"
-        @change-slide="handleChangeSlide"
-      >
-        <CmsElementImage
-          v-for="image of mediaGallery"
-          :key="image.media.url"
-          :image-gallery="true"
-          :content="{ data: image, config: props.content.config } as any"
-        />
-      </SwSlider>
-    </div>
-  </div>
-</template>