@shopware/cms-base-layer 3.1.0 → 4.1.0

package/app/components/listing-filters/SwFilterCategories.vue

@@ -0,0 +1,158 @@
+<script
+  setup
+  lang="ts"
+  generic="
+    ListingFilter extends {
+      code: string;
+      label: string;
+      name: string;
+      entities?: Array<{
+        id: string;
+        name?: string;
+        translated?: { name?: string };
+      }>;
+    }
+  "
+>
+import { useCmsTranslations } from "@shopware/composables";
+import { excludeRootCategory, getTranslatedProperty } from "@shopware/helpers";
+import { defu } from "defu";
+import { computed, ref } from "vue";
+
+import { useSessionContext } from "#imports";
+
+const {
+  filter,
+  selectedFilters,
+  displayMode = "accordion",
+} = defineProps<{
+  filter: ListingFilter;
+  selectedFilters: {
+    categories?: string[];
+    [key: string]: unknown;
+  };
+  displayMode?: "accordion" | "dropdown";
+}>();
+
+const emits =
+  defineEmits<
+    (e: "select-value", value: { code: string; value: unknown }) => void
+  >();
+
+type Translations = {
+  listing: {
+    categories: string;
+  };
+};
+
+let translations: Translations = {
+  listing: {
+    categories: "Categories",
+  },
+};
+
+translations = defu(useCmsTranslations(), translations) as Translations;
+
+const { sessionContext } = useSessionContext();
+
+const categoryOptions = computed(() =>
+  excludeRootCategory(
+    filter.entities,
+    sessionContext.value?.salesChannel?.navigationCategoryId,
+  ),
+);
+
+const isFilterVisible = ref<boolean>(false);
+const toggle = () => {
+  isFilterVisible.value = !isFilterVisible.value;
+};
+
+const selectedIds = computed(() => selectedFilters?.categories || []);
+
+const isChecked = (id: string) => selectedIds.value.includes(id);
+
+const selectValue = (id: string) => {
+  emits("select-value", {
+    code: filter.code,
+    value: id,
+  });
+};
+</script>
+
+<template>
+  <div
+    v-if="categoryOptions.length"
+    class="self-stretch flex flex-col justify-start items-start gap-4"
+  >
+    <!-- Accordion header (only in accordion mode) -->
+    <template v-if="displayMode === 'accordion'">
+      <div class="self-stretch flex flex-col justify-center items-center">
+        <div
+          class="self-stretch py-3 border-b border-outline-outline-variant inline-flex justify-between items-center gap-1 cursor-pointer"
+          @click="toggle"
+          role="button"
+          tabindex="0"
+          :aria-expanded="isFilterVisible"
+          :aria-controls="filter.code"
+          :aria-label="translations.listing.categories"
+          @keydown.enter="toggle"
+          @keydown.space.prevent="toggle"
+        >
+          <div class="flex-1 flex items-center gap-2.5">
+            <div
+              class="flex-1 text-surface-on-surface text-base font-bold leading-normal text-left"
+            >
+              {{ translations.listing.categories }}
+            </div>
+          </div>
+          <span class="flex items-center justify-center" aria-hidden="true">
+            <SwChevronIcon
+              :direction="isFilterVisible ? 'up' : 'down'"
+              :size="24"
+            />
+          </span>
+        </div>
+      </div>
+    </template>
+
+    <!-- Filter content -->
+    <transition name="filter-collapse">
+      <div
+        v-if="isFilterVisible || displayMode === 'dropdown'"
+        :id="filter.code"
+        class="self-stretch flex flex-col justify-start items-start gap-4"
+      >
+        <fieldset
+          class="self-stretch flex flex-col justify-start items-start gap-4"
+        >
+          <legend class="sr-only">{{ translations.listing.categories }}</legend>
+          <label
+            v-for="option in categoryOptions"
+            :key="option.id"
+            class="self-stretch inline-flex justify-start items-start gap-2 cursor-pointer"
+          >
+            <div
+              class="w-4 self-stretch pt-[3px] flex justify-start items-start gap-2.5"
+            >
+              <SwCheckbox
+                :model-value="isChecked(option.id)"
+                @update:model-value="() => selectValue(option.id)"
+              />
+            </div>
+            <div
+              class="flex-1 inline-flex flex-col justify-start items-start gap-0.5"
+            >
+              <div class="inline-flex justify-start items-center gap-1">
+                <div
+                  class="flex-1 text-surface-on-surface text-base font-normal leading-normal"
+                >
+                  {{ getTranslatedProperty(option, "name") }}
+                </div>
+              </div>
+            </div>
+          </label>
+        </fieldset>
+      </div>
+    </transition>
+  </div>
+</template>

package/app/components/public/cms/CmsBlockSpatialViewer.vue

@@ -12,13 +12,13 @@ const props = defineProps<{
   content: Schemas["CmsBlock"];
 }>();
 
-const { getSlotContent } = useCmsBlock(props.content);
-const slotContent = getSlotContent("default");
+const { getSlotContent } = useCmsBlock(() => props.content);
+const slotContent = computed(() => getSlotContent("default"));
 
 function getConfigValue(key: string): unknown {
-  if (!slotContent?.config) return null;
-  const configEntry =
-    slotContent.config[key as keyof typeof slotContent.config];
+  const slot = slotContent.value;
+  if (!slot?.config) return null;
+  const configEntry = slot.config[key as keyof typeof slot.config];
   if (
     configEntry &&
     typeof configEntry === "object" &&
@@ -31,8 +31,8 @@ function getConfigValue(key: string): unknown {
 }
 
 const modelUrl = computed(() => {
-  if (slotContent?.data) {
-    const data = slotContent.data as unknown as Schemas["Media"];
+  if (slotContent.value?.data) {
+    const data = slotContent.value.data as unknown as Schemas["Media"];
     if (data?.url && typeof data.url === "string") {
       return data.url;
     }

package/app/components/public/cms/CmsGenericBlock.vue

@@ -17,22 +17,17 @@ const props = defineProps<{
 
 const appConfig = useTypedAppConfig();
 
+// Plain values, not refs: custom elements inject these as a `number` and a
+// `string` (see the README), so providing a ref here would break them.
 const slotCount = props.content.slots?.length || 1;
 provide("cms-block-slot-count", slotCount);
 provide("cms-image-sizes", getImageSizes(slotCount, appConfig.imageSizes));
 
 const DynamicRender = () => {
-  const {
-    resolvedComponent,
-    componentName,
-    isResolved,
-    componentNameToResolve,
-  } = resolveCmsComponent(props.content);
+  const { resolvedComponent, componentName, componentNameToResolve } =
+    resolveCmsComponent(props.content);
 
   if (resolvedComponent) {
-    if (!isResolved)
-      return h("div", {}, `Problem resolving component: ${componentName}`);
-
     const { cssClasses, layoutStyles } = getCmsLayoutConfiguration(
       props.content,
     );
@@ -75,7 +70,8 @@ const DynamicRender = () => {
     );
     return h(resolveComponent("CmsNoComponent"), { content: props.content });
   }
-  return h("div", {}, "");
+  // Production: a block type with no component renders nothing.
+  return null;
 };
 </script>
 

package/app/components/public/cms/CmsGenericElement.md

@@ -1,19 +1,25 @@
-Renders an Element type structure
+Renders an Element type structure.
+
+`content` is optional: `getSlotContent()` returns `undefined` for a slot the block
+does not carry, and this component renders nothing in that case.
 
 Example usage:
 
-```vue{19,22}
+```vue{22,25}
 <script setup lang="ts">
 import type { CmsBlockGalleryBuybox } from "@shopware/composables";
+import { computed } from "vue";
 import { useCmsBlock } from "#imports";
 
 const props = defineProps<{
   content: CmsBlockGalleryBuybox;
 }>();
 
-const { getSlotContent } = useCmsBlock(props.content);
-const rightContent = getSlotContent("right");
-const leftContent = getSlotContent("left");
+// Pass a getter so the lookups follow a replaced block, and read them through
+// computeds so each one re-runs when it does.
+const { getSlotContent } = useCmsBlock(() => props.content);
+const rightContent = computed(() => getSlotContent("right"));
+const leftContent = computed(() => getSlotContent("left"));
 </script>
 
 <template>

package/app/components/public/cms/CmsGenericElement.vue

@@ -6,20 +6,24 @@ import { h, resolveComponent } from "vue";
 import type { Schemas } from "#shopware";
 
 const props = defineProps<{
-  content: Schemas["CmsSlot"];
+  /**
+   * A block asks for its slots by name, and a block does not have to carry
+   * every slot its layout allows, so this can be undefined.
+   */
+  content?: Schemas["CmsSlot"];
 }>();
 
 const DynamicRender = () => {
-  const {
-    resolvedComponent,
-    componentName,
-    isResolved,
-    componentNameToResolve,
-  } = resolveCmsComponent(props.content);
-  if (resolvedComponent) {
-    if (!isResolved)
-      return h("div", {}, `Problem resolving component: ${componentName}`);
+  // Nothing to render for a slot the block does not carry. An element would
+  // take the class the call site passes and occupy a cell of its own wherever a
+  // block renders this straight into a grid, as CmsBlockCenterText does. A
+  // wrapper the block puts around the call site renders either way — sizing
+  // that wrapper for an absent slot is the block's business, not this one's.
+  if (!props.content) return null;
 
+  const { resolvedComponent, componentName, componentNameToResolve } =
+    resolveCmsComponent(props.content);
+  if (resolvedComponent) {
     const { cssClasses, layoutStyles } = getCmsLayoutConfiguration(
       props.content,
     );
@@ -35,7 +39,9 @@ const DynamicRender = () => {
     );
     return h(resolveComponent("CmsNoComponent"), { content: props.content });
   }
-  return h("div", {}, "");
+  // Production: an element type with no component renders nothing, for the same
+  // reason the missing slot above does.
+  return null;
 };
 </script>
 

package/app/components/public/cms/FrontendAccountCustomerGroupRegistrationPage.vue

@@ -38,7 +38,7 @@ useSeoMeta({
     >
       <div
         v-if="registrationResponse?.translated.registrationIntroduction"
-        class="px-6 sm:px-4 mb-6"
+        class="cms-element-text px-6 sm:px-4 mb-6"
         v-html="registrationResponse.translated.registrationIntroduction"
       />
       <AccountRegistrationForm

package/app/components/public/cms/block/CmsBlockAppRenderer.vue

@@ -0,0 +1,48 @@
+<script setup lang="ts">
+import type { CmsBlockAppRenderer } from "@shopware/composables";
+import { computed, getCurrentInstance } from "vue";
+import type { Component, CSSProperties } from "vue";
+
+import { getAppRendererLayout } from "../../../../helpers/cms/getAppRendererLayout";
+
+const props = defineProps<{
+  content: CmsBlockAppRenderer;
+}>();
+
+const appContext = getCurrentInstance()?.appContext;
+
+const layout = computed(() => getAppRendererLayout(props.content));
+
+const appBlockComponent = computed<Component | undefined>(() => {
+  const name = layout.value.componentName;
+
+  return name ? appContext?.components[name] : undefined;
+});
+
+const gridStyle = computed<CSSProperties>(() => ({
+  display: "grid",
+  grid: layout.value.grid,
+}));
+</script>
+<template>
+  <component
+    :is="appBlockComponent"
+    v-if="appBlockComponent"
+    :content="content"
+  />
+  <div
+    v-else
+    class="cms-block-app-renderer"
+    :class="`cms-block-app-renderer-fallback-block-${layout.appBlockName}`"
+    :style="gridStyle"
+  >
+    <div
+      v-for="slot in layout.slots"
+      :key="slot.id"
+      class="min-w-0"
+      :class="`cms-block-app-renderer-fallback-slot-${slot.type}`"
+    >
+      <CmsGenericElement :content="slot" />
+    </div>
+  </div>
+</template>

package/app/components/public/cms/block/CmsBlockCategoryHeading.vue

@@ -0,0 +1,19 @@
+<script setup lang="ts">
+import type { CmsBlockCategoryHeading } from "@shopware/composables";
+import { computed } from "vue";
+
+import { useCmsBlock } from "#imports";
+
+const props = defineProps<{
+  content: CmsBlockCategoryHeading;
+}>();
+
+const { getSlotContent } = useCmsBlock(() => props.content);
+
+const slotContent = computed(() => getSlotContent("content"));
+</script>
+<template>
+  <div class="cms-block-category-heading">
+    <CmsGenericElement :content="slotContent" />
+  </div>
+</template>

package/app/components/public/cms/block/CmsBlockCategoryNavigation.vue

@@ -1,13 +1,14 @@
 <script setup lang="ts">
 import type { CmsBlockCategoryNavigation } from "@shopware/composables";
+import { computed } from "vue";
 
 import { useCmsBlock } from "#imports";
 
 const props = defineProps<{
   content: CmsBlockCategoryNavigation;
 }>();
-const { getSlotContent } = useCmsBlock(props.content);
-const slotContent = getSlotContent("content");
+const { getSlotContent } = useCmsBlock(() => props.content);
+const slotContent = computed(() => getSlotContent("content"));
 </script>
 
 <template>

package/app/components/public/cms/block/CmsBlockCenterText.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import type { CmsBlockCenterText } from "@shopware/composables";
+import { computed } from "vue";
 
 import { useCmsBlock } from "#imports";
 
@@ -7,10 +8,10 @@ const props = defineProps<{
   content: CmsBlockCenterText;
 }>();
 
-const { getSlotContent } = useCmsBlock(props.content);
-const slotLeftContent = getSlotContent("left");
-const slotRightContent = getSlotContent("right");
-const slotCenterContent = getSlotContent("center");
+const { getSlotContent } = useCmsBlock(() => props.content);
+const slotLeftContent = computed(() => getSlotContent("left"));
+const slotRightContent = computed(() => getSlotContent("right"));
+const slotCenterContent = computed(() => getSlotContent("center"));
 </script>
 <template>
   <div class="cms-block-center-text grid md:grid-cols-3 gap-10 content-center">

package/app/components/public/cms/block/CmsBlockCrossSelling.vue

@@ -1,13 +1,14 @@
 <script setup lang="ts">
 import type { CmsBlockCrossSelling } from "@shopware/composables";
+import { computed } from "vue";
 
 import { useCmsBlock } from "#imports";
 
 const props = defineProps<{
   content: CmsBlockCrossSelling;
 }>();
-const { getSlotContent } = useCmsBlock(props.content);
-const slotContent = getSlotContent("content");
+const { getSlotContent } = useCmsBlock(() => props.content);
+const slotContent = computed(() => getSlotContent("content"));
 </script>
 <template>
   <div class="cms-block-cross-selling">

package/app/components/public/cms/block/CmsBlockCustomForm.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import type { CmsBlockForm } from "@shopware/composables";
+import { computed } from "vue";
 
 import { useCmsBlock } from "#imports";
 
@@ -7,9 +8,9 @@ const props = defineProps<{
   content: CmsBlockForm;
 }>();
 
-const { getSlotContent } = useCmsBlock(props.content);
+const { getSlotContent } = useCmsBlock(() => props.content);
 
-const cmsContent = getSlotContent("content");
+const cmsContent = computed(() => getSlotContent("content"));
 </script>
 <template>
   <div class="cms-block-form">

package/app/components/public/cms/block/CmsBlockForm.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import type { CmsBlockForm } from "@shopware/composables";
+import { computed } from "vue";
 
 import { useCmsBlock } from "#imports";
 
@@ -7,9 +8,9 @@ const props = defineProps<{
   content: CmsBlockForm;
 }>();
 
-const { getSlotContent } = useCmsBlock(props.content);
+const { getSlotContent } = useCmsBlock(() => props.content);
 
-const cmsContent = getSlotContent("content");
+const cmsContent = computed(() => getSlotContent("content"));
 </script>
 <template>
   <div class="cms-block-form">

package/app/components/public/cms/block/CmsBlockGalleryBuybox.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import type { CmsBlockGalleryBuybox } from "@shopware/composables";
+import { computed } from "vue";
 
 import { useCmsBlock } from "#imports";
 
@@ -7,9 +8,9 @@ const props = defineProps<{
   content: CmsBlockGalleryBuybox;
 }>();
 
-const { getSlotContent } = useCmsBlock(props.content);
-const rightContent = getSlotContent("right");
-const leftContent = getSlotContent("left");
+const { getSlotContent } = useCmsBlock(() => props.content);
+const rightContent = computed(() => getSlotContent("right"));
+const leftContent = computed(() => getSlotContent("left"));
 </script>
 
 <template>

package/app/components/public/cms/block/CmsBlockImage.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import type { CmsBlockImage } from "@shopware/composables";
+import { computed } from "vue";
 
 import { useCmsBlock } from "#imports";
 
@@ -7,8 +8,8 @@ const props = defineProps<{
   content: CmsBlockImage;
 }>();
 
-const { getSlotContent } = useCmsBlock(props.content);
-const imageContent = getSlotContent("image");
+const { getSlotContent } = useCmsBlock(() => props.content);
+const imageContent = computed(() => getSlotContent("image"));
 </script>
 <template>
   <div>

package/app/components/public/cms/block/CmsBlockImageBubbleRow.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import type { CmsBlockImageBubbleRow } from "@shopware/composables";
+import { computed } from "vue";
 
 import { useCmsBlock } from "#imports";
 
@@ -7,11 +8,11 @@ const props = defineProps<{
   content: CmsBlockImageBubbleRow;
 }>();
 
-const { getSlotContent } = useCmsBlock(props.content);
+const { getSlotContent } = useCmsBlock(() => props.content);
 
-const leftContent = getSlotContent("left");
-const rightContent = getSlotContent("right");
-const centerContent = getSlotContent("center");
+const leftContent = computed(() => getSlotContent("left"));
+const rightContent = computed(() => getSlotContent("right"));
+const centerContent = computed(() => getSlotContent("center"));
 </script>
 <template>
   <div

package/app/components/public/cms/block/CmsBlockImageCover.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import type { CmsBlockImageCover } from "@shopware/composables";
+import { computed } from "vue";
 
 import { useCmsBlock } from "#imports";
 
@@ -7,9 +8,9 @@ const props = defineProps<{
   content: CmsBlockImageCover;
 }>();
 
-const { getSlotContent } = useCmsBlock(props.content);
+const { getSlotContent } = useCmsBlock(() => props.content);
 
-const cmsContent = getSlotContent("image");
+const cmsContent = computed(() => getSlotContent("image"));
 </script>
 <template>
   <div class="cms-block-image-cover">

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

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import type { CmsBlockImageFourColumn } from "@shopware/composables";
+import { computed } from "vue";
 
 import { useCmsBlock } from "#imports";
 
@@ -7,12 +8,12 @@ const props = defineProps<{
   content: CmsBlockImageFourColumn;
 }>();
 
-const { getSlotContent } = useCmsBlock(props.content);
+const { getSlotContent } = useCmsBlock(() => props.content);
 
-const leftContent = getSlotContent("left");
-const rightContent = getSlotContent("right");
-const centerLeftContent = getSlotContent("center-left");
-const centerRightContent = getSlotContent("center-right");
+const leftContent = computed(() => getSlotContent("left"));
+const rightContent = computed(() => getSlotContent("right"));
+const centerLeftContent = computed(() => getSlotContent("center-left"));
+const centerRightContent = computed(() => getSlotContent("center-right"));
 </script>
 <template>
   <div

package/app/components/public/cms/block/CmsBlockImageGallery.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import type { CmsBlockImageGallery } from "@shopware/composables";
+import { computed } from "vue";
 
 import { useCmsBlock } from "#imports";
 
@@ -7,9 +8,9 @@ const props = defineProps<{
   content: CmsBlockImageGallery;
 }>();
 
-const { getSlotContent } = useCmsBlock(props.content);
+const { getSlotContent } = useCmsBlock(() => props.content);
 
-const cmsContent = getSlotContent("imageGallery");
+const cmsContent = computed(() => getSlotContent("imageGallery"));
 </script>
 
 <template>

package/app/components/public/cms/block/CmsBlockImageGalleryBig.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import type { CmsBlockImageGalleryBig } from "@shopware/composables";
+import { computed } from "vue";
 
 import { useCmsBlock } from "#imports";
 
@@ -7,9 +8,9 @@ const props = defineProps<{
   content: CmsBlockImageGalleryBig;
 }>();
 
-const { getSlotContent } = useCmsBlock(props.content);
+const { getSlotContent } = useCmsBlock(() => props.content);
 
-const cmsContent = getSlotContent("imageGallery");
+const cmsContent = computed(() => getSlotContent("imageGallery"));
 </script>
 
 <template>

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

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import type { CmsBlockImageHighlightRow } from "@shopware/composables";
+import { computed } from "vue";
 
 import { useCmsBlock } from "#imports";
 
@@ -7,11 +8,11 @@ const props = defineProps<{
   content: CmsBlockImageHighlightRow;
 }>();
 
-const { getSlotContent } = useCmsBlock(props.content);
+const { getSlotContent } = useCmsBlock(() => props.content);
 
-const leftContent = getSlotContent("left");
-const rightContent = getSlotContent("right");
-const centerContent = getSlotContent("center");
+const leftContent = computed(() => getSlotContent("left"));
+const rightContent = computed(() => getSlotContent("right"));
+const centerContent = computed(() => getSlotContent("center"));
 </script>
 <template>
   <div