@shopware/cms-base-layer 1.5.0 → 2.0.0

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>

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

@@ -1,123 +0,0 @@
-<script setup lang="ts">
-import type { CmsElementProductDescriptionReviews } from "@shopware/composables";
-import { useCmsTranslations } from "@shopware/composables";
-import { getProductName, getTranslatedProperty } from "@shopware/helpers";
-import { defu } from "defu";
-import { type Ref, computed, onMounted, ref } from "vue";
-import xss from "xss";
-import { useProduct } from "#imports";
-import type { Schemas } from "#shopware";
-
-const props = defineProps<{
-  content: CmsElementProductDescriptionReviews;
-}>();
-
-type Translations = {
-  product: {
-    description: string;
-    reviews: string;
-    messages: {
-      reviewAdded: string;
-    };
-  };
-};
-
-let translations: Translations = {
-  product: {
-    description: "Description",
-    reviews: "Reviews",
-    messages: {
-      reviewAdded: "Thank you for submitting your review",
-    },
-  },
-};
-translations = defu(useCmsTranslations(), translations) as Translations;
-
-const currentTab = ref<number>(1);
-const { product } = useProduct(props.content.data?.product);
-
-const description = computed(() =>
-  xss(getTranslatedProperty(product.value, "description")),
-);
-
-const toggleTabs = (tabNumber: number) => {
-  currentTab.value = tabNumber;
-};
-
-const reviews: Ref<Schemas["ProductReview"][]> = ref([]);
-
-onMounted(async () => {
-  if (props.content.data?.reviews?.elements) {
-    reviews.value = props.content.data.reviews.elements;
-  }
-});
-</script>
-
-<template>
-  <div
-    v-if="product"
-    class="cms-block-product-description-reviews flex flex-wrap"
-  >
-    <div class="w-full">
-      <ul
-        class="flex flex-wrap text-sm font-medium list-none text-center text-secondary-500 border-b border-secondary-200 dark:border-secondary-500 dark:text-secondary-400"
-      >
-        <li class="mr-2 text-center">
-          <a
-            class="font-bold uppercase px-5 py-3 block leading-normal cursor-pointer"
-            :class="[
-              currentTab !== 1
-                ? 'text-secondary-500 bg-white'
-                : 'text-white bg-secondary-500',
-            ]"
-            @click="() => toggleTabs(1)"
-          >
-            <i class="fas fa-space-shuttle text-base mr-1" />
-            {{ translations.product.description }}
-          </a>
-        </li>
-        <li class="mr-2 text-center">
-          <a
-            class="font-bold uppercase px-5 py-3 block leading-normal cursor-pointer"
-            :class="[
-              currentTab !== 2
-                ? 'text-secondary-500 bg-white'
-                : 'text-white bg-secondary-500',
-            ]"
-            data-testid="product-reviews-tab"
-            @click="() => toggleTabs(2)"
-          >
-            <i class="fas fa-cog text-base mr-1" />
-            {{ translations.product.reviews }} ({{ reviews.length }})
-          </a>
-        </li>
-      </ul>
-      <div class="relative flex flex-col min-w-0 break-words w-full mb-6">
-        <div class="px-4 py-5 flex-auto">
-          <div class="tab-content tab-space">
-            <div
-              :class="[
-                'cms-block-product-description-reviews__description',
-                currentTab !== 1 ? 'hidden' : 'block',
-              ]"
-            >
-              <p class="text-xl font-bold mt-3">
-                {{ getProductName({ product }) }}
-              </p>
-              <!-- eslint-disable-next-line vue/no-v-html -->
-              <div class="mt-2" v-html="description"></div>
-            </div>
-            <div
-              :class="[
-                'cms-block-product-description-reviews__reviews',
-                currentTab !== 2 ? 'hidden' : 'block',
-              ]"
-            >
-              <SwProductReviews :product="product" :reviews="reviews" />
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</template>

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

@@ -1,10 +0,0 @@
-<script setup lang="ts">
-import type { CmsElementProductName } from "@shopware/composables";
-
-defineProps<{
-  content: CmsElementProductName;
-}>();
-</script>
-<template>
-  <CmsElementText :content="content as any" />
-</template>

package/components/public/cms/section/CmsSectionSidebar.vue

@@ -1,49 +0,0 @@
-<script setup lang="ts">
-import { useCmsSection } from "@shopware/composables";
-import type { CmsSectionSidebar } from "@shopware/composables";
-import { getTranslatedProperty } from "@shopware/helpers";
-import { computed } from "vue";
-import { useCategory } from "#imports";
-
-const props = defineProps<{
-  content: CmsSectionSidebar;
-}>();
-const { getPositionContent } = useCmsSection(props.content);
-
-const sidebarBlocks = getPositionContent("sidebar");
-const mainBlocks = getPositionContent("main");
-const mobileBehavior = computed(() => props.content.mobileBehavior);
-const { category } = useCategory();
-</script>
-
-<template>
-  <div class="cms-section-sidebar grid grid-cols-12 md:grid">
-    <div class="col-span-12 mx-8 md:mx-5 mt-8">
-      <h1 class="text-4xl font-extrabold tracking-tight text-gray-900">
-        {{ getTranslatedProperty(category, "name") }}
-      </h1>
-    </div>
-    <div class="col-span-12 md:col-span-7 lg:col-span-9 order-1 md:order-2">
-      <CmsGenericBlock
-        v-for="cmsBlock in mainBlocks"
-        :key="cmsBlock.id"
-        class="overflow-auto"
-        :content="cmsBlock"
-      />
-    </div>
-    <div
-      :class="{
-        'align-top col-span-12 md:col-span-5 lg:col-span-3 order-2 md:order-1':
-          mobileBehavior !== 'hidden',
-        'hidden md:block': mobileBehavior === 'hidden',
-      }"
-    >
-      <CmsGenericBlock
-        v-for="cmsBlock in sidebarBlocks"
-        :key="cmsBlock.id"
-        class="overflow-auto"
-        :content="cmsBlock"
-      />
-    </div>
-  </div>
-</template>

package/components/public/cms/skeleton/ProductCardSkeleton.vue

@@ -1,44 +0,0 @@
-<template>
-  <div
-    role="status"
-    class="max-w-sm p-4 border border-gray-200 rounded shadow animate-pulse md:p-6 dark:border-gray-700"
-  >
-    <div
-      class="flex items-center justify-center h-48 mb-4 bg-gray-300 rounded dark:bg-gray-700"
-    >
-      <svg
-        class="w-10 h-10 text-gray-200 dark:text-gray-600"
-        aria-hidden="true"
-        xmlns="http://www.w3.org/2000/svg"
-        fill="currentColor"
-        viewBox="0 0 16 20"
-      >
-        <path
-          d="M14.066 0H7v5a2 2 0 0 1-2 2H0v11a1.97 1.97 0 0 0 1.934 2h12.132A1.97 1.97 0 0 0 16 18V2a1.97 1.97 0 0 0-1.934-2ZM10.5 6a1.5 1.5 0 1 1 0 2.999A1.5 1.5 0 0 1 10.5 6Zm2.221 10.515a1 1 0 0 1-.858.485h-8a1 1 0 0 1-.9-1.43L5.6 10.039a.978.978 0 0 1 .936-.57 1 1 0 0 1 .9.632l1.181 2.981.541-1a.945.945 0 0 1 .883-.522 1 1 0 0 1 .879.529l1.832 3.438a1 1 0 0 1-.031.988Z"
-        />
-        <path
-          d="M5 5V.13a2.96 2.96 0 0 0-1.293.749L.879 3.707A2.98 2.98 0 0 0 .13 5H5Z"
-        />
-      </svg>
-    </div>
-    <div
-      class="h-2.5 bg-gray-200 rounded-full dark:bg-gray-700 w-48 mb-4"
-    ></div>
-    <div class="h-2 bg-gray-200 rounded-full dark:bg-gray-700 mb-2.5"></div>
-    <div class="h-2.5 bg-gray-200 rounded-full dark:bg-gray-700 mb-2.5"></div>
-    <div class="mt-4 text-right">
-      <div
-        class="mt-8 h-2 bg-gray-200 rounded-full dark:bg-gray-700 w-24"
-      ></div>
-      <button
-        disabled
-        tabindex="-1"
-        class="select-none font-sans font-bold text-center uppercase transition-all disabled:opacity-50 disabled:shadow-none disabled:pointer-events-none text-xs py-3 px-6 rounded-lg text-white shadow-gray-900/10 hover:shadow-gray-900/20 focus:opacity-[0.85] focus:shadow-none active:opacity-[0.85] active:shadow-none h-8 w-20 bg-gray-300 shadow-none hover:shadow-none"
-        type="button"
-      >
-        &nbsp;
-      </button>
-    </div>
-    <span class="sr-only">Loading...</span>
-  </div>
-</template>