@shopware/cms-base-layer 1.5.1 → 2.1.0

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/element/CmsElementProductSlider.vue

@@ -1,80 +0,0 @@
-<script setup lang="ts">
-import type {
-  CmsElementProductSlider,
-  SliderElementConfig,
-} from "@shopware/composables";
-import { computed, onMounted, ref, useTemplateRef } from "vue";
-import type { ComputedRef } from "vue";
-import { useCmsElementConfig } from "#imports";
-
-const props = defineProps<{
-  content: CmsElementProductSlider;
-}>();
-const { getConfigValue } = useCmsElementConfig(props.content);
-
-const productSlider = useTemplateRef("productSlider");
-const slidesToShow = ref<number>();
-const products = computed(() => props.content?.data?.products ?? []);
-const config: ComputedRef<SliderElementConfig> = computed(() => ({
-  minHeight: {
-    value: "300px",
-    source: "static",
-  },
-  verticalAlign: {
-    source: "static",
-    value: getConfigValue("verticalAlign") || "",
-  },
-  displayMode: {
-    value: "contain",
-    source: "static",
-  },
-  navigationDots: {
-    value: "",
-    source: "static",
-  },
-  navigationArrows: {
-    value: getConfigValue("navigation") ? "outside" : "",
-    source: "static",
-  },
-}));
-
-onMounted(() => {
-  setTimeout(() => {
-    let temp = 1;
-    const minWidth = +getConfigValue("elMinWidth").replace(/\D+/g, "");
-    if (productSlider.value?.clientWidth) {
-      temp = Math.ceil(productSlider.value?.clientWidth / (minWidth * 1.2));
-    }
-    slidesToShow.value = temp;
-  }, 100);
-});
-
-const autoplay = computed(() => getConfigValue("rotate"));
-const title = computed(() => getConfigValue("title"));
-const border = computed(() => getConfigValue("border"));
-</script>
-<template>
-  <div ref="productSlider" class="cms-element-product-slider">
-    <h3 v-if="title" class="mb-5 text-lg font-bold text-secondary-700">
-      {{ title }}
-    </h3>
-    <div :class="{ 'py-5 border border-secondary-300': border }">
-      <SwSlider
-        :config="config"
-        gap="1.25rem"
-        :slides-to-show="slidesToShow"
-        :slides-to-scroll="1"
-        :autoplay="autoplay"
-      >
-        <SwProductCard
-          v-for="product of products"
-          :key="product.id"
-          class="h-full"
-          :product="product"
-          :layout-type="getConfigValue('boxLayout')"
-          :display-mode="getConfigValue('displayMode')"
-        />
-      </SwSlider>
-    </div>
-  </div>
-</template>

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

@@ -1,12 +0,0 @@
-<script setup lang="ts">
-import type { CmsElementSidebarFilter } from "@shopware/composables";
-
-defineProps<{
-  content: CmsElementSidebarFilter;
-}>();
-</script>
-<template>
-  <div class="max-w-screen-xl mx-auto">
-    <SwProductListingFilters :content="content" />
-  </div>
-</template>

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

@@ -1,41 +0,0 @@
-<script setup lang="ts">
-import { useCmsSection } from "@shopware/composables";
-import type { CmsSectionSidebar } from "@shopware/composables";
-import { computed } from "vue";
-
-const props = defineProps<{
-  content: CmsSectionSidebar;
-}>();
-const { getPositionContent } = useCmsSection(props.content);
-
-const sidebarBlocks = getPositionContent("sidebar");
-const mainBlocks = getPositionContent("main");
-const mobileBehavior = computed(() => props.content.mobileBehavior);
-</script>
-
-<template>
-  <div class="cms-section-sidebar grid grid-cols-12 md:grid">
-    <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>

package/helpers/html-to-vue/ast.ts

@@ -1,72 +0,0 @@
-//@ts-nocheck
-/**
- * Based on the https://github.com/HCESrl/html-to-vue
- */
-import { parse } from "html-to-ast";
-import type { NodeObject } from "./getOptionsFromNode";
-
-/**
- * Visit each node in the AST - with callback (adapted from https://lihautan.com/manipulating-ast-with-javascript/)
- * @param {*} ast html-parse-stringify AST
- * @param {*} callback
- */
-function _visitAST(ast, callback) {
-  function _visit(node, parent, key, index) {
-    callback(node, parent, key, index);
-    if (Array.isArray(node)) {
-      // node is an array
-      node.forEach((value, index) => {
-        _visit.call(this, value, node, null, index);
-      });
-    } else if (isNode(node)) {
-      const keys = Object.keys(node);
-      for (let i = 0; i < keys.length; i++) {
-        const child = node[keys[i]];
-        if (Array.isArray(child)) {
-          for (let j = 0; j < child.length; j++) {
-            _visit.call(this, child[j], node, key, j);
-          }
-        } else if (isNode(child)) {
-          _visit.call(this, child, node, key, undefined);
-        }
-      }
-    }
-  }
-  _visit.call(this, ast, null, undefined, undefined);
-}
-
-/**
- *
- * @param node html-parse-stringify AST node
- * @returns {boolean|boolean}
- */
-export function isNode(node: NodeObject) {
-  return typeof node === "object" && typeof node.type !== "undefined";
-}
-
-export function generateAST(html) {
-  return parse(html);
-}
-
-/**
- * Converts ast html nodes in vue components
- * @param ast
- * @param config
- * @returns {*}
- */
-export function rectifyAST(ast, config) {
-  const _ast = JSON.parse(JSON.stringify(ast));
-  const keys = config.extraComponentsMap
-    ? Object.keys(config.extraComponentsMap)
-    : [];
-  _visitAST(_ast, (node) => {
-    // checking whether the AST has some components that has to become Vue Components
-    for (let i = 0; i < keys.length; i++) {
-      const currentKey = keys[i];
-      if (config.extraComponentsMap[currentKey].conditions(node)) {
-        node.name = currentKey;
-      }
-    }
-  });
-  return _ast;
-}

package/helpers/html-to-vue/renderer.ts

@@ -1,56 +0,0 @@
-//@ts-nocheck
-/**
- * Based on the https://github.com/HCESrl/html-to-vue
- */
-
-import { isNode } from "./ast";
-import { getOptionsFromNode } from "./getOptionsFromNode";
-
-/**
- * rendering the ast into vue render functions
- * @param {*} ast AST generated by html-parse-stringify
- * @param {*} config our configuration
- * @param {*} createElement vue's createElement
- * @param {*} context vue functional component context
- */
-export function renderer(ast, config, createElement, context, resolveUrl) {
-  function _render(h, node) {
-    if (Array.isArray(node)) {
-      const nodes = [];
-      // node is an array
-      node.forEach((subnode, index) => {
-        nodes.push(_render.call(this, h, subnode, node, null, index, h));
-      });
-      return nodes;
-    }
-
-    if (isNode(node)) {
-      // node is either a node with children or a node or a text node
-      if (node.type === "text") {
-        return config.textTransformer(node.content); // return text
-      }
-      if (node.type === "tag") {
-        const transformedNode = getOptionsFromNode(node, resolveUrl);
-        const children = [];
-        node.children.forEach((child, index) => {
-          children.push(_render.call(this, h, child, transformedNode, index));
-        });
-        // if it's an extra component use custom renderer
-        if (typeof config.extraComponentsMap[node.name] !== "undefined") {
-          return config.extraComponentsMap[node.name].renderer.call(
-            this,
-            transformedNode,
-            children,
-            h,
-            context,
-          );
-        }
-        // else, create normal html element
-        return h(node.name, transformedNode, [...children]);
-      }
-    }
-  }
-  return createElement(config.container.type, context.data, [
-    ..._render.call(this, createElement, ast),
-  ]);
-}