@shopware/cms-base-layer 1.5.1 → 2.1.0

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>

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