@shopware/cms-base-layer 1.5.1 → 2.0.0

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,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>