@shopware/cms-base-layer 1.5.0 → 2.0.0

package/components/listing-filters/SwFilterShippingFree.vue

@@ -1,104 +0,0 @@
-<script
-  setup
-  lang="ts"
-  generic="
-    ListingFilter extends {
-      id: string;
-      code: keyof Schemas['ProductListingResult']['currentFilters'];
-      label: string;
-      name: string;
-    }
-  "
->
-import { onClickOutside } from "@vueuse/core";
-import { computed, ref } from "vue";
-import type { Schemas } from "#shopware";
-
-const props = defineProps<{
-  filter: ListingFilter;
-  selectedFilters: Schemas["ProductListingResult"]["currentFilters"];
-}>();
-
-const emits =
-  defineEmits<
-    (e: "select-value", value: { code: string; value: unknown }) => void
-  >();
-const currentFilterData = computed(
-  () => !!props.selectedFilters[props.filter?.code],
-);
-const onChangeOption = (): void => {
-  emits("select-value", {
-    code: props.filter?.code,
-    value: !currentFilterData.value,
-  });
-};
-
-const isFilterVisible = ref<boolean>(false);
-const toggle = () => {
-  isFilterVisible.value = !isFilterVisible.value;
-};
-
-const dropdownElement = ref(null);
-onClickOutside(dropdownElement, () => {
-  isFilterVisible.value = false;
-});
-</script>
-
-<template>
-  <div class="border-b border-gray-200 py-6 px-5">
-    <h3 class="-my-3 flow-root">
-      <button
-        type="button"
-        class="flex w-full items-center justify-between bg-white py-2 text-base text-gray-400 hover:text-gray-500"
-        @click="toggle"
-      >
-        <span class="font-medium text-gray-900 text-left">{{
-          props.filter.label
-        }}</span>
-        <span class="ml-6 flex items-center">
-          <i
-            :class="[
-              !isFilterVisible
-                ? 'i-carbon-chevron-down'
-                : 'i-carbon-chevron-up',
-            ]"
-          />
-        </span>
-      </button>
-    </h3>
-    <transition name="fade" mode="out-in">
-      <div v-show="isFilterVisible" id="filter-section-0" class="pt-6">
-        <div class="space-y-4">
-          <div class="flex items-center" @click="onChangeOption()">
-            <input
-              :id="`filter-mobile-${props.filter.id || props.filter.code}`"
-              :checked="currentFilterData"
-              :name="props.filter.name"
-              :value="props.filter.name"
-              type="checkbox"
-              class="h-4 w-4 border-gray-300 rounded text-indigo-600 focus:ring-indigo-500"
-            />
-
-            <label
-              :for="`filter-mobile-${props.filter.id || props.filter.code}`"
-              class="ml-3 text-gray-600"
-            >
-              {{ props.filter.label }}
-            </label>
-          </div>
-        </div>
-      </div>
-    </transition>
-  </div>
-</template>
-<style scoped>
-.fade-enter-active,
-.fade-leave-active {
-  transition: all 0.2s ease;
-}
-
-.fade-enter-from,
-.fade-leave-to {
-  opacity: 0;
-}
-</style>

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

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

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

@@ -1,27 +0,0 @@
-<script setup lang="ts">
-import type { CmsBlockImageHighlightRow } from "@shopware/composables";
-import { useCmsBlock } from "#imports";
-
-const props = defineProps<{
-  content: CmsBlockImageHighlightRow;
-}>();
-
-const { getSlotContent } = useCmsBlock(props.content);
-
-const leftContent = getSlotContent("left");
-const rightContent = getSlotContent("right");
-const centerContent = getSlotContent("center");
-</script>
-<template>
-  <div class="cms-block-image-highlight-row grid md:grid-cols-3 gap-10">
-    <CmsGenericElement :content="leftContent" />
-    <CmsGenericElement :content="centerContent" />
-    <CmsGenericElement :content="rightContent" />
-  </div>
-</template>
-
-<style scoped>
-.cms-block-image-highlight-row .cms-element-image {
-  @apply border-[12px] border-white;
-}
-</style>

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

@@ -1,85 +0,0 @@
-<script setup lang="ts">
-import type {
-  CmsBlockImageTextGallery,
-  CmsElementImage,
-  CmsElementText,
-} from "@shopware/composables";
-import { useCmsBlock } from "#imports";
-import type { Schemas } from "#shopware";
-
-const props = defineProps<{
-  content: CmsBlockImageTextGallery;
-}>();
-
-const { getSlotContent } = useCmsBlock(props.content);
-
-const leftTextContent = getSlotContent("left-text") as CmsElementText;
-const rightTextContent = getSlotContent("right-text") as CmsElementText;
-const centerTextContent = getSlotContent("center-text") as CmsElementText;
-
-const leftImageContent = getSlotContent("left-image") as CmsElementImage;
-const rightImageContent = getSlotContent("right-image") as CmsElementImage;
-const centerImageContent = getSlotContent("center-image") as CmsElementImage;
-
-// TODO: useRouter
-function onImageClick(
-  slotContent: Schemas["CmsSlot"] & {
-    data: {
-      url?: string;
-      newTab?: boolean;
-    };
-  },
-) {
-  if (slotContent.data?.url) {
-    if (slotContent.data?.newTab) {
-      window.open(slotContent.data.url);
-    } else {
-      window.location.href = slotContent.data.url;
-    }
-  }
-}
-</script>
-<template>
-  <article
-    class="cms-block-image-text-gallery"
-    :style="{ backgroundColor: content.backgroundColor || '' }"
-  >
-    <div class="cms-block-image-text-gallery__container">
-      <div class="cms-block-image-text-gallery__container__column">
-        <CmsElementImage
-          :content="leftImageContent"
-          :style="{ cursor: leftImageContent.data?.url && 'pointer' }"
-          @click="onImageClick(leftImageContent)"
-        />
-        <CmsElementText
-          :content="leftTextContent"
-          class="cms-block-imag)e-text-gallery__container__column--text"
-        />
-      </div>
-      <div class="cms-block-image-text-gallery__container__column">
-        <CmsElementImage
-          :content="centerImageContent"
-          :style="{
-            cursor: centerImageContent.data?.url && 'pointer',
-          }"
-          @click="onImageClick(centerImageContent)"
-        />
-        <CmsElementText
-          :content="centerTextContent"
-          class="cms-block-image-text-gallery__container__column--text"
-        />
-      </div>
-      <div class="cms-block-image-text-gallery__container__column">
-        <CmsElementImage
-          :content="rightImageContent"
-          :style="{ cursor: rightImageContent.data?.url && 'pointer' }"
-          @click="onImageClick(rightImageContent)"
-        />
-        <CmsElementText
-          :content="rightTextContent"
-          class="cms-block-image-text-gallery__container__column--text"
-        />
-      </div>
-    </div>
-  </article>
-</template>

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/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/CmsBlockHtml.md

@@ -1 +0,0 @@
-Render a HTML section

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>