@empathyco/x-components 8.4.0 → 8.5.0

package/CHANGELOG.md

@@ -3,6 +3,13 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [8.5.0](https://github.com/empathyco/x/compare/@empathyco/x-components@8.4.0...@empathyco/x-components@8.5.0) (2026-07-16)
+
+### Features
+
+* **vendor:** banners (#2136)
+
+
 ## [8.4.0](https://github.com/empathyco/x/compare/@empathyco/x-components@8.3.0...@empathyco/x-components@8.4.0) (2026-07-16)
 
 ### Features

package/core/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/docs/API-reference/api/x-components.hierarchicalfilter.md

@@ -213,6 +213,7 @@ _default: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
         UserViewedAVendorResult?: import("../../../vendor").VendorResult | undefined;
         UserClickedAVendorResult?: import("../../../vendor").VendorResult | undefined;
         UserClickedVendorResultAddToCart?: import("../../../vendor").VendorResult | undefined;
+        VendorBannersChanged?: Omit<import("../../../vendor").VendorBanner, "modelName">[] | undefined;
     }>;
     innerCssClasses: import("vue").ComputedRef<(string | Dictionary<boolean>)[]>;
     renderedChildrenFilters: import("vue").ComputedRef<HierarchicalFilterModel[]>;

package/docs/API-reference/api/x-components.md

@@ -3384,6 +3384,17 @@ Alias to facilitate retrieving the modules with status.
 </td><td>
 
 
+</td></tr>
+<tr><td>
+
+[VendorBanner](./x-components.vendorbanner.md)
+
+
+</td><td>
+
+The interface for a vendor banner, extending the base Banner interface. The optional position means: - If the position is defined, the banner will be displayed in that position inside the grid. - If the position is undefined, the banner will be displayed on top of the grid and full width.
+
+
 </td></tr>
 <tr><td>
 
@@ -6734,6 +6745,17 @@ Default implementation for the [HistoryQueriesGetters.sessionHistoryQueries](./x
 Default implementation setUrlParams.
 
 
+</td></tr>
+<tr><td>
+
+[setBanners](./x-components.setbanners.md)
+
+
+</td><td>
+
+Sets the vendor banners of the [VendorXModule](./x-components.vendorxmodule.md)<!-- -->.
+
+
 </td></tr>
 <tr><td>
 
@@ -8111,6 +8133,21 @@ URL [XModule](./x-components.xmodule.md) implementation. This module is auto-reg
 Function which returns the requested getter's properties as a dictionary.
 
 
+</td></tr>
+<tr><td>
+
+[VendorBannersList](./x-components.vendorbannerslist.md)
+
+
+</td><td>
+
+It renders a [ItemsList](./x-components.itemslist.md) list of vendor banners from [VendorState.banners](./x-components.vendorstate.banners.md)<!-- -->.
+
+The component provides a default slot which wraps the whole component with the `vendorBanners` plus the `injectedListItems` which also contains the injected list items from the ancestor.
+
+It also provides the parent slots to customize the items.
+
+
 </td></tr>
 <tr><td>
 

package/docs/API-reference/api/x-components.setbanners.md

@@ -0,0 +1,13 @@
+<!-- Do not edit this file. It is automatically generated by API Documenter. -->
+
+[Home](./index.md) &gt; [@empathyco/x-components](./x-components.md) &gt; [setBanners](./x-components.setbanners.md)
+
+## setBanners variable
+
+Sets the vendor banners of the [VendorXModule](./x-components.vendorxmodule.md)<!-- -->.
+
+**Signature:**
+
+```typescript
+setBanners: import("../../wiring").AnyWire
+```

package/docs/API-reference/api/x-components.simplefilter.md

@@ -210,6 +210,7 @@ _default: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
         UserViewedAVendorResult?: import("../../../vendor").VendorResult | undefined;
         UserClickedAVendorResult?: import("../../../vendor").VendorResult | undefined;
         UserClickedVendorResultAddToCart?: import("../../../vendor").VendorResult | undefined;
+        VendorBannersChanged?: Omit<import("../../../vendor").VendorBanner, "modelName">[] | undefined;
     }>;
     innerCssClasses: import("vue").ComputedRef<(string | Dictionary<boolean>)[]>;
 }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{

package/docs/API-reference/api/x-components.snippetcallbacks.md

@@ -200,6 +200,7 @@ _default: import("vue").DefineComponent<{}, {
         UserViewedAVendorResult: (payload: import("..").VendorResult, metadata: WireMetadata) => unknown;
         UserClickedAVendorResult: (payload: import("..").VendorResult, metadata: WireMetadata) => unknown;
         UserClickedVendorResultAddToCart: (payload: import("..").VendorResult, metadata: WireMetadata) => unknown;
+        VendorBannersChanged: (payload: Omit<import("..").VendorBanner, "modelName">[], metadata: WireMetadata) => unknown;
     }>>;
 }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {
     GlobalXBus: import("vue").DefineComponent<{}, {}, any>;

package/docs/API-reference/api/x-components.vendorbanner.md

@@ -0,0 +1,59 @@
+<!-- Do not edit this file. It is automatically generated by API Documenter. -->
+
+[Home](./index.md) &gt; [@empathyco/x-components](./x-components.md) &gt; [VendorBanner](./x-components.vendorbanner.md)
+
+## VendorBanner interface
+
+The interface for a vendor banner, extending the base Banner interface. The optional position means: - If the position is defined, the banner will be displayed in that position inside the grid. - If the position is undefined, the banner will be displayed on top of the grid and full width.
+
+**Signature:**
+
+```typescript
+export interface VendorBanner extends Omit<Banner, 'modelName'>, NamedModel<'VendorBanner'> 
+```
+**Extends:** Omit&lt;Banner, 'modelName'&gt;, NamedModel&lt;'VendorBanner'&gt;
+
+## Properties
+
+<table><thead><tr><th>
+
+Property
+
+
+</th><th>
+
+Modifiers
+
+
+</th><th>
+
+Type
+
+
+</th><th>
+
+Description
+
+
+</th></tr></thead>
+<tbody><tr><td>
+
+[position?](./x-components.vendorbanner.position.md)
+
+
+</td><td>
+
+
+</td><td>
+
+number
+
+
+</td><td>
+
+_(Optional)_
+
+
+</td></tr>
+</tbody></table>
+

package/docs/API-reference/api/x-components.vendorbanner.position.md

@@ -0,0 +1,11 @@
+<!-- Do not edit this file. It is automatically generated by API Documenter. -->
+
+[Home](./index.md) &gt; [@empathyco/x-components](./x-components.md) &gt; [VendorBanner](./x-components.vendorbanner.md) &gt; [position](./x-components.vendorbanner.position.md)
+
+## VendorBanner.position property
+
+**Signature:**
+
+```typescript
+position?: number;
+```

package/docs/API-reference/api/x-components.vendorbannerslist.md

@@ -0,0 +1,31 @@
+<!-- Do not edit this file. It is automatically generated by API Documenter. -->
+
+[Home](./index.md) &gt; [@empathyco/x-components](./x-components.md) &gt; [VendorBannersList](./x-components.vendorbannerslist.md)
+
+## VendorBannersList variable
+
+It renders a [ItemsList](./x-components.itemslist.md) list of vendor banners from [VendorState.banners](./x-components.vendorstate.banners.md)<!-- -->.
+
+The component provides a default slot which wraps the whole component with the `vendorBanners` plus the `injectedListItems` which also contains the injected list items from the ancestor.
+
+It also provides the parent slots to customize the items.
+
+**Signature:**
+
+```typescript
+_default: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    animation: {
+        type: (StringConstructor | ObjectConstructor | FunctionConstructor)[];
+        default: string;
+    };
+}>, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+    [key: string]: any;
+}>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    animation: {
+        type: (StringConstructor | ObjectConstructor | FunctionConstructor)[];
+        default: string;
+    };
+}>> & Readonly<{}>, {
+    animation: string | Function | Record<string, any>;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>
+```

package/docs/API-reference/api/x-components.vendormutations.md

@@ -35,6 +35,23 @@ Description
 </th></tr></thead>
 <tbody><tr><td>
 
+[setBanners](./x-components.vendormutations.setbanners.md)
+
+
+</td><td>
+
+
+</td><td>
+
+(banners: [VendorBanner](./x-components.vendorbanner.md)<!-- -->\[\]) =&gt; void
+
+
+</td><td>
+
+
+</td></tr>
+<tr><td>
+
 [setResults](./x-components.vendormutations.setresults.md)
 
 

package/docs/API-reference/api/x-components.vendormutations.setbanners.md

@@ -0,0 +1,11 @@
+<!-- Do not edit this file. It is automatically generated by API Documenter. -->
+
+[Home](./index.md) &gt; [@empathyco/x-components](./x-components.md) &gt; [VendorMutations](./x-components.vendormutations.md) &gt; [setBanners](./x-components.vendormutations.setbanners.md)
+
+## VendorMutations.setBanners property
+
+**Signature:**
+
+```typescript
+setBanners: (banners: VendorBanner[]) => void;
+```

package/docs/API-reference/api/x-components.vendorstate.banners.md

@@ -0,0 +1,11 @@
+<!-- Do not edit this file. It is automatically generated by API Documenter. -->
+
+[Home](./index.md) &gt; [@empathyco/x-components](./x-components.md) &gt; [VendorState](./x-components.vendorstate.md) &gt; [banners](./x-components.vendorstate.banners.md)
+
+## VendorState.banners property
+
+**Signature:**
+
+```typescript
+banners: VendorBanner[];
+```

package/docs/API-reference/api/x-components.vendorstate.md

@@ -35,6 +35,23 @@ Description
 </th></tr></thead>
 <tbody><tr><td>
 
+[banners](./x-components.vendorstate.banners.md)
+
+
+</td><td>
+
+
+</td><td>
+
+[VendorBanner](./x-components.vendorbanner.md)<!-- -->\[\]
+
+
+</td><td>
+
+
+</td></tr>
+<tr><td>
+
 [results](./x-components.vendorstate.results.md)
 
 

package/docs/API-reference/api/x-components.vendorxevents.md

@@ -91,6 +91,25 @@ The user clicked on the add to cart button of a vendor result. Payload: The [ven
 The user viewed a vendor result. Payload: The [vendor result](./x-components.vendorresult.md) that was viewed.
 
 
+</td></tr>
+<tr><td>
+
+[VendorBannersChanged](./x-components.vendorxevents.vendorbannerschanged.md)
+
+
+</td><td>
+
+
+</td><td>
+
+Omit&lt;[VendorBanner](./x-components.vendorbanner.md)<!-- -->, 'modelName'&gt;\[\]
+
+
+</td><td>
+
+The x consumer has provided vendor banners to be inserted in the result grid. Payload: The array of vendor banner inputs with their items and positions. modelName is excluded since it is an internal field, and we will assign it under the hood.
+
+
 </td></tr>
 <tr><td>
 

package/docs/API-reference/api/x-components.vendorxevents.vendorbannerschanged.md

@@ -0,0 +1,13 @@
+<!-- Do not edit this file. It is automatically generated by API Documenter. -->
+
+[Home](./index.md) &gt; [@empathyco/x-components](./x-components.md) &gt; [VendorXEvents](./x-components.vendorxevents.md) &gt; [VendorBannersChanged](./x-components.vendorxevents.vendorbannerschanged.md)
+
+## VendorXEvents.VendorBannersChanged property
+
+The x consumer has provided vendor banners to be inserted in the result grid. Payload: The array of vendor banner inputs with their items and positions. modelName is excluded since it is an internal field, and we will assign it under the hood.
+
+**Signature:**
+
+```typescript
+VendorBannersChanged: Omit<VendorBanner, 'modelName'>[];
+```

package/docs/API-reference/components/vendor/x-components.vendor-banners-list.md

@@ -0,0 +1,21 @@
+---
+
+title: VendorBannersList
+
+---
+
+# VendorBannersList
+
+It renders a ItemsList list of vendor banners from VendorState.banners.
+
+The component provides a default slot which wraps the whole component with the `vendorBanners`
+plus the `injectedListItems` which also contains the injected list items from
+the ancestor.
+
+It also provides the parent slots to customize the items.
+
+## Props
+
+| Name                   | Description                                                          | Type                       | Default           |
+| ---------------------- | -------------------------------------------------------------------- | -------------------------- | ----------------- |
+| <code>animation</code> | Animation component that will be used to animate the vendor banners. | <code>AnimationProp</code> | <code>'ul'</code> |

package/js/components/base-grid.vue.js.map

@@ -1 +1 @@
-{"version":3,"file":"base-grid.vue.js","sources":["../../../src/components/base-grid.vue"],"sourcesContent":["<template>\n  <component\n    :is=\"animation\"\n    ref=\"gridEl\"\n    :style=\"style\"\n    class=\"x-base-grid\"\n    :class=\"cssClasses\"\n    tag=\"ul\"\n    data-test=\"grid\"\n  >\n    <li\n      v-for=\"{ item, cssClass, slotName } in gridItems\"\n      :key=\"item.id\"\n      :class=\"cssClass\"\n      class=\"x-base-grid__item\"\n    >\n      <!--\n        @slot Customized item rendering. Specifying a slot with the item's modelName will result in\n        the item using that slot composition to render.\n            @binding {item} item - Item to render\n      -->\n      <slot v-if=\"slots[slotName]\" :name=\"slotName\" :item=\"item\" />\n      <!--\n        @slot (required) Default item rendering. This slot will be used by default for rendering\n        the item without an specific slot implementation.\n            @binding {item} item - Item to render\n      -->\n      <slot v-else :item=\"item\">{{ (item as any).name || item.modelName || item.id || item }}</slot>\n    </li>\n  </component>\n</template>\n\n<script lang=\"ts\">\nimport type { MaybeComputedElementRef, UseResizeObserverReturn } from '@vueuse/core'\nimport type { PropType, Ref } from 'vue'\nimport type { ListItem } from '../utils/types'\nimport type { GridItem } from './base-grid.types'\nimport { useResizeObserver } from '@vueuse/core'\nimport { computed, defineComponent, inject, onBeforeUnmount, onMounted, ref, watch } from 'vue'\nimport { useXBus } from '../composables/use-x-bus'\nimport { AnimationProp } from '../types/animation-prop'\nimport { toKebabCase } from '../utils/string'\nimport { LIST_ITEMS_KEY } from './decorators/injection.consts'\n\n/**\n * Grid component that is able to render different items based on their modelName value. In order\n * to achieve this, it exposes a scopedSlot for each different modelName. In case the items used\n * do not have modelName property, the default slot is used instead. It has a required property:\n * the `items` to render; and an optional one: the number `columns` the grid is divided in. If the\n * number of columns is not specified, the grid automatically fills the rows with as many columns\n * as it can fit.\n *\n * @public\n */\nexport default defineComponent({\n  name: 'BaseGrid',\n  props: {\n    /** Animation component that will be used to animate the base grid. */\n    animation: {\n      type: AnimationProp,\n      default: 'ul',\n    },\n    /**\n     * Number of columns the grid is divided into. By default, its value is 0, setting the grid\n     * columns mode to auto-fill.\n     */\n    columns: {\n      type: Number,\n      default: 0,\n    },\n    /**\n     * The list of items to be rendered.\n     *\n     * @remarks The items must have an ID property.\n     */\n    items: {\n      type: Array as PropType<ListItem[]>,\n    },\n  },\n  setup(props, { slots }) {\n    // eslint-disable-next-line ts/consistent-type-definitions\n    type ElementRef = {\n      $el: HTMLElement\n    }\n\n    const xBus = useXBus()\n\n    /** It injects {@link ListItem} provided by an ancestor. */\n    const injectedListItems = inject<Ref<ListItem[]>>(LIST_ITEMS_KEY as string)\n    const gridEl = ref<ElementRef | HTMLElement>()\n    const renderedColumnsNumber = ref(0)\n\n    /**\n     * Emits the {@link XEventsTypes.RenderedColumnsNumberChanged}\n     * event whenever the number of columns rendered inside the grid changes.\n     */\n    watch(\n      renderedColumnsNumber,\n      () => xBus.emit('RenderedColumnsNumberChanged', renderedColumnsNumber.value),\n      { immediate: false },\n    )\n\n    /**\n     * It returns the items passed as props or the injected ones.\n     *\n     * @returns List of grid items.\n     */\n    const computedItems = computed<ListItem[] | void>(() => {\n      return (\n        props.items ??\n        injectedListItems?.value ??\n        console.warn('It is necessary to pass a prop or inject the list of filters')\n      )\n    })\n\n    /**\n     * CSS class based on the column property value so items inside the grid can fill different\n     * amount of columns or rows based on how many columns the grid is divided into.\n     *\n     * @returns CSS class with the column property value.\n     */\n    const cssClasses = computed(() => `x-base-grid--cols-${props.columns || 'auto'}`)\n\n    /**\n     * CSSStyleDeclaration object specifying the number of columns the grid is divided into based on\n     * the column property value.\n     *\n     * @returns A CSSStyleDeclaration to use as the style attribute.\n     */\n    const style = computed<Partial<CSSStyleDeclaration>>(() => ({\n      gridTemplateColumns: props.columns\n        ? `repeat(${props.columns}, minmax(0, 1fr))`\n        : 'repeat(auto-fill, minmax(var(--x-size-min-width-grid-item, 150px), 1fr))',\n    }))\n\n    /**\n     * Maps the item to an object containing: the `item`, its `CSS class` and its slot name.\n     *\n     * @returns An array of objects containing the item and its CSS class.\n     */\n    const gridItems = computed<GridItem[]>(() =>\n      (computedItems.value as ListItem[]).map(item => {\n        const slotName = toKebabCase(item.modelName)\n        return {\n          slotName,\n          item,\n          cssClass: `x-base-grid__${slotName}`,\n        }\n      }),\n    )\n\n    /**\n     * Checks if a given value is an `ElementRef` object.\n     *\n     * @param value - The value to check.\n     * @returns `true` if the value is an `ElementRef` object, `false` otherwise.\n     */\n    const isElementRef = (value: any): value is ElementRef => {\n      return value && value.$el instanceof HTMLElement\n    }\n\n    /** Updates the number of columns rendered inside the grid. */\n    function updateRenderedColumnsNumber() {\n      const { gridTemplateColumns } = getComputedStyle(\n        isElementRef(gridEl.value) ? gridEl.value.$el : (gridEl.value as Element),\n      )\n      renderedColumnsNumber.value = gridTemplateColumns.split(' ').length\n    }\n\n    /** Initialises the rendered columns number and sets a ResizeObserver to keep it updated. */\n    let resizeObserver: UseResizeObserverReturn\n    onMounted(() => {\n      resizeObserver = useResizeObserver(\n        gridEl as MaybeComputedElementRef,\n        updateRenderedColumnsNumber,\n      )\n    })\n    onBeforeUnmount(() => resizeObserver?.stop())\n\n    return {\n      gridItems,\n      cssClasses,\n      style,\n      gridEl,\n      slots,\n    }\n  },\n})\n</script>\n\n<style lang=\"css\" scoped>\n.x-base-grid {\n  display: grid;\n  grid-auto-flow: dense;\n  list-style: none;\n  align-items: stretch;\n}\n\n.x-base-grid__banner,\n.x-base-grid__next-queries-group,\n.x-base-grid__related-prompts-group {\n  grid-column-start: 1;\n  grid-column-end: -1;\n}\n\n.x-base-grid__related-prompts-group.x-staggered-fade-and-slide-leave-active,\n.x-base-grid__related-prompts-group.x-staggered-fade-and-slide-enter-active {\n  transition: none;\n  position: relative;\n}\n\n.x-base-grid__item {\n  display: flex;\n  flex-flow: column nowrap;\n}\n\n.x-base-grid__item > * {\n  flex-grow: 1;\n}\n\n.x-base-grid--cols-auto .x-base-grid__item {\n  min-width: var(--x-size-min-width-grid-item);\n}\n</style>\n\n<docs lang=\"mdx\">\n## Examples\n\nThis component renders a list of elements in different slots depending on their modelName. In order\nto achieve this, it exposes a scopedSlot for each different modelName. In case the items used do not\nhave modelName property, the default slot is used instead. It has a required property, the `items`\nto render, and an optional one, the number of `columns` the grid is divided in. If the number of\ncolumns is not specified, the grid automatically fills the rows with as many columns as it can fit.\n\n### Basic example\n\nIt renders a list of items using the default slot:\n\n```vue\n<template>\n  <BaseGrid :items=\"items\">\n    <template #default=\"{ item }\">\n      {{ `Default slot content: ${item.id}` }}\n    </template>\n  </BaseGrid>\n</template>\n\n<script setup>\nimport { BaseGrid } from '@empathyco/x-components'\nconst items = [\n  { id: 1, name: 'Item 1' },\n  { id: 2, name: 'Item 2' },\n  { id: 3, name: 'Item 3' },\n]\n</script>\n```\n\n### Configuring the number of columns\n\nIt renders a grid with 12 columns instead of 6, which is the default value:\n\n```vue\n<template>\n  <BaseGrid :items=\"items\" :columns=\"12\">\n    <template #default=\"{ item }\">\n      {{ `Default slot content: ${item.id}` }}\n    </template>\n  </BaseGrid>\n</template>\n\n<script setup>\nimport { BaseGrid } from '@empathyco/x-components'\nconst items = [\n  { id: 1, name: 'Item 1' },\n  { id: 2, name: 'Item 2' },\n  { id: 3, name: 'Item 3' },\n]\n</script>\n```\n\n### Rendering usage\n\nConfiguring the number of columns.\n\nIt renders a list of items using the different scopedSlots created by the item's modelName. For\nexample, if you want to use this component as the search grid, you pass the search results (results,\nbanners, promoted, next queries...etc) as items. Each of these results have a different modelName\nand are rendered in different slots.\n\n```vue\n<template>\n  <BaseGrid :animation=\"animation\" :items=\"items\">\n    <template #banner=\"{ item }\">\n      <span class=\"banner\">\n        {{ `${item.title} banner` }}\n      </span>\n    </template>\n    <template #next-queries=\"{ item }\">\n      <span>\n        {{ `${item.totalResults} next queries` }}\n      </span>\n    </template>\n    <template #promoted=\"{ item }\">\n      <span class=\"promoted\">\n        {{ `${item.title} promoted` }}\n      </span>\n    </template>\n    <template #result=\"{ item }\">\n      <BaseResultLink :result=\"item\">\n        {{ item.name }}\n      </BaseResultLink>\n    </template>\n  </BaseGrid>\n</template>\n\n<script setup>\nimport { BaseGrid } from '@empathyco/x-components'\nimport BaseResultLink from './BaseResultLink.vue'\nconst animation = 'ul'\nconst items = [\n  { id: 1, modelName: 'banner', title: 'Banner 1' },\n  { id: 2, modelName: 'next-queries', totalResults: 5 },\n  { id: 3, modelName: 'promoted', title: 'Promo 1' },\n  { id: 4, modelName: 'result', name: 'Result 1' },\n]\n</script>\n```\n\n### Customizing the items width\n\nThe `--x-size-min-width-grid-item` variable can be used to customize the min width of the grid\nitems.\n\n```vue\n<template>\n  <BaseGrid :items=\"items\" style=\"--x-size-min-width-grid-item: 150px\">\n    <template #default=\"{ item }\">\n      {{ `Default slot content: ${item.id}` }}\n    </template>\n  </BaseGrid>\n</template>\n\n<script setup>\nimport { BaseGrid } from '@empathyco/x-components'\nconst items = [\n  { id: 1, name: 'Item 1' },\n  { id: 2, name: 'Item 2' },\n  { id: 3, name: 'Item 3' },\n]\n</script>\n```\n</docs>\n"],"names":["_openBlock","_createBlock","_resolveDynamicComponent","_normalizeStyle","_normalizeClass","_createElementBlock","_Fragment","_renderList","_renderSlot","_createTextVNode","_toDisplayString"],"mappings":";;;;;;AACE,EAAA,OAAAA,SAAA,EAAA,EAAAC,WAAA,CA4BYC,wBA3BL,IAAA,CAAA,SAAS,CAAA,EAAA;AAAA,IACd,GAAA,EAAI,QAAA;AAAA,IACH,KAAA,EAAKC,eAAE,IAAA,CAAA,KAAK,CAAA;AAAA,IACb,KAAA,EAAKC,cAAA,CAAA,CAAC,aAAA,EACE,IAAA,CAAA,UAAU,CAAA,CAAA;AAAA,IAClB,GAAA,EAAI,IAAA;AAAA,IACJ,WAAA,EAAU;AAAA,GAAA,EAAA;qBAGR,MAAiD;AAAA,OAAAJ,SAAA,CAAA,IAAA,CAAA,EADnDK,kBAAA;AAAA,QAkBKC,QAAA;AAAA,QAAA,IAAA;AAAA,QAAAC,UAAA,CAjBoC,IAAA,CAAA,SAAA,EAAS,CAAA,EAAvC,IAAA,EAAM,QAAA,EAAU,QAAA,EAAQ,KAAA;AADnC,UAAA,OAAAP,SAAA,EAAA,EAAAK,kBAAA;AAAA,YAkBK,IAAA;AAAA,YAAA;AAAA,cAhBF,KAAK,IAAA,CAAK,EAAA;AAAA,cACV,KAAA,EAAKD,cAAA,CAAA,CAAE,QAAA,EACF,mBAAmB,CAAA;AAAA,aAAA;;AAOb,cAAA,IAAA,CAAA,KAAA,CAAM,QAAQ,CAAA,GAA1BI,UAAA,CAA6D,IAAA,CAAA,MAAA,EAAzB,QAAA,EAAQ;AAAA,gBAAA,GAAA,EAAA,CAAA;AAAG,gBAAA;AAAA,eAAA,EAAA,MAAA,EAAA,IAAA,CAAA,GAM/CA,UAAA,CAA8F,IAAA,CAAA,MAAA,EAAA,SAAA,EAAA;AAAA,gBAAA,GAAA,EAAA,CAAA;AAAhF,gBAAA;AAAA,eAAA,EAAd,MAA8F;AAAA,gBAAAC,eAAA;AAAhE,kBAAAC,eAAA,CAAA,IAAA,CAAa,IAAA,IAAQ,IAAA,CAAK,SAAA,IAAa,IAAA,CAAK,MAAM,IAAI,CAAA;AAAA,kBAAA;AAAA;AAAA;AAAA,eAAA,EAAA,IAAA;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"base-grid.vue.js","sources":["../../../src/components/base-grid.vue"],"sourcesContent":["<template>\n  <component\n    :is=\"animation\"\n    ref=\"gridEl\"\n    :style=\"style\"\n    class=\"x-base-grid\"\n    :class=\"cssClasses\"\n    tag=\"ul\"\n    data-test=\"grid\"\n  >\n    <li\n      v-for=\"{ item, cssClass, slotName } in gridItems\"\n      :key=\"item.id\"\n      :class=\"cssClass\"\n      class=\"x-base-grid__item\"\n    >\n      <!--\n        @slot Customized item rendering. Specifying a slot with the item's modelName will result in\n        the item using that slot composition to render.\n            @binding {item} item - Item to render\n      -->\n      <slot v-if=\"slots[slotName]\" :name=\"slotName\" :item=\"item\" />\n      <!--\n        @slot (required) Default item rendering. This slot will be used by default for rendering\n        the item without an specific slot implementation.\n            @binding {item} item - Item to render\n      -->\n      <slot v-else :item=\"item\">{{ (item as any).name || item.modelName || item.id || item }}</slot>\n    </li>\n  </component>\n</template>\n\n<script lang=\"ts\">\nimport type { MaybeComputedElementRef, UseResizeObserverReturn } from '@vueuse/core'\nimport type { PropType, Ref } from 'vue'\nimport type { ListItem } from '../utils/types'\nimport type { GridItem } from './base-grid.types'\nimport { useResizeObserver } from '@vueuse/core'\nimport { computed, defineComponent, inject, onBeforeUnmount, onMounted, ref, watch } from 'vue'\nimport { useXBus } from '../composables/use-x-bus'\nimport { AnimationProp } from '../types/animation-prop'\nimport { toKebabCase } from '../utils/string'\nimport { LIST_ITEMS_KEY } from './decorators/injection.consts'\n\n/**\n * Grid component that is able to render different items based on their modelName value. In order\n * to achieve this, it exposes a scopedSlot for each different modelName. In case the items used\n * do not have modelName property, the default slot is used instead. It has a required property:\n * the `items` to render; and an optional one: the number `columns` the grid is divided in. If the\n * number of columns is not specified, the grid automatically fills the rows with as many columns\n * as it can fit.\n *\n * @public\n */\nexport default defineComponent({\n  name: 'BaseGrid',\n  props: {\n    /** Animation component that will be used to animate the base grid. */\n    animation: {\n      type: AnimationProp,\n      default: 'ul',\n    },\n    /**\n     * Number of columns the grid is divided into. By default, its value is 0, setting the grid\n     * columns mode to auto-fill.\n     */\n    columns: {\n      type: Number,\n      default: 0,\n    },\n    /**\n     * The list of items to be rendered.\n     *\n     * @remarks The items must have an ID property.\n     */\n    items: {\n      type: Array as PropType<ListItem[]>,\n    },\n  },\n  setup(props, { slots }) {\n    // eslint-disable-next-line ts/consistent-type-definitions\n    type ElementRef = {\n      $el: HTMLElement\n    }\n\n    const xBus = useXBus()\n\n    /** It injects {@link ListItem} provided by an ancestor. */\n    const injectedListItems = inject<Ref<ListItem[]>>(LIST_ITEMS_KEY as string)\n    const gridEl = ref<ElementRef | HTMLElement>()\n    const renderedColumnsNumber = ref(0)\n\n    /**\n     * Emits the {@link XEventsTypes.RenderedColumnsNumberChanged}\n     * event whenever the number of columns rendered inside the grid changes.\n     */\n    watch(\n      renderedColumnsNumber,\n      () => xBus.emit('RenderedColumnsNumberChanged', renderedColumnsNumber.value),\n      { immediate: false },\n    )\n\n    /**\n     * It returns the items passed as props or the injected ones.\n     *\n     * @returns List of grid items.\n     */\n    const computedItems = computed<ListItem[] | void>(() => {\n      return (\n        props.items ??\n        injectedListItems?.value ??\n        console.warn('It is necessary to pass a prop or inject the list of filters')\n      )\n    })\n\n    /**\n     * CSS class based on the column property value so items inside the grid can fill different\n     * amount of columns or rows based on how many columns the grid is divided into.\n     *\n     * @returns CSS class with the column property value.\n     */\n    const cssClasses = computed(() => `x-base-grid--cols-${props.columns || 'auto'}`)\n\n    /**\n     * CSSStyleDeclaration object specifying the number of columns the grid is divided into based on\n     * the column property value.\n     *\n     * @returns A CSSStyleDeclaration to use as the style attribute.\n     */\n    const style = computed<Partial<CSSStyleDeclaration>>(() => ({\n      gridTemplateColumns: props.columns\n        ? `repeat(${props.columns}, minmax(0, 1fr))`\n        : 'repeat(auto-fill, minmax(var(--x-size-min-width-grid-item, 150px), 1fr))',\n    }))\n\n    /**\n     * Maps the item to an object containing: the `item`, its `CSS class` and its slot name.\n     *\n     * @returns An array of objects containing the item and its CSS class.\n     */\n    const gridItems = computed<GridItem[]>(() =>\n      (computedItems.value as ListItem[]).map(item => {\n        const slotName = toKebabCase(item.modelName)\n        let cssClass = `x-base-grid__${slotName}`\n        if (item.modelName === 'VendorBanner' && (item as any).position === undefined) {\n          cssClass += ` x-base-grid__${slotName}--row`\n        }\n        return {\n          slotName,\n          item,\n          cssClass,\n        }\n      }),\n    )\n\n    /**\n     * Checks if a given value is an `ElementRef` object.\n     *\n     * @param value - The value to check.\n     * @returns `true` if the value is an `ElementRef` object, `false` otherwise.\n     */\n    const isElementRef = (value: any): value is ElementRef => {\n      return value && value.$el instanceof HTMLElement\n    }\n\n    /** Updates the number of columns rendered inside the grid. */\n    function updateRenderedColumnsNumber() {\n      const { gridTemplateColumns } = getComputedStyle(\n        isElementRef(gridEl.value) ? gridEl.value.$el : (gridEl.value as Element),\n      )\n      renderedColumnsNumber.value = gridTemplateColumns.split(' ').length\n    }\n\n    /** Initialises the rendered columns number and sets a ResizeObserver to keep it updated. */\n    let resizeObserver: UseResizeObserverReturn\n    onMounted(() => {\n      resizeObserver = useResizeObserver(\n        gridEl as MaybeComputedElementRef,\n        updateRenderedColumnsNumber,\n      )\n    })\n    onBeforeUnmount(() => resizeObserver?.stop())\n\n    return {\n      gridItems,\n      cssClasses,\n      style,\n      gridEl,\n      slots,\n    }\n  },\n})\n</script>\n\n<style lang=\"css\" scoped>\n.x-base-grid {\n  display: grid;\n  grid-auto-flow: dense;\n  list-style: none;\n  align-items: stretch;\n}\n\n.x-base-grid__banner,\n.x-base-grid__vendor-banner--row,\n.x-base-grid__next-queries-group,\n.x-base-grid__related-prompts-group {\n  grid-column-start: 1;\n  grid-column-end: -1;\n}\n\n.x-base-grid__related-prompts-group.x-staggered-fade-and-slide-leave-active,\n.x-base-grid__related-prompts-group.x-staggered-fade-and-slide-enter-active {\n  transition: none;\n  position: relative;\n}\n\n.x-base-grid__item {\n  display: flex;\n  flex-flow: column nowrap;\n}\n\n.x-base-grid__item > * {\n  flex-grow: 1;\n}\n\n.x-base-grid--cols-auto .x-base-grid__item {\n  min-width: var(--x-size-min-width-grid-item);\n}\n</style>\n\n<docs lang=\"mdx\">\n## Examples\n\nThis component renders a list of elements in different slots depending on their modelName. In order\nto achieve this, it exposes a scopedSlot for each different modelName. In case the items used do not\nhave modelName property, the default slot is used instead. It has a required property, the `items`\nto render, and an optional one, the number of `columns` the grid is divided in. If the number of\ncolumns is not specified, the grid automatically fills the rows with as many columns as it can fit.\n\n### Basic example\n\nIt renders a list of items using the default slot:\n\n```vue\n<template>\n  <BaseGrid :items=\"items\">\n    <template #default=\"{ item }\">\n      {{ `Default slot content: ${item.id}` }}\n    </template>\n  </BaseGrid>\n</template>\n\n<script setup>\nimport { BaseGrid } from '@empathyco/x-components'\nconst items = [\n  { id: 1, name: 'Item 1' },\n  { id: 2, name: 'Item 2' },\n  { id: 3, name: 'Item 3' },\n]\n</script>\n```\n\n### Configuring the number of columns\n\nIt renders a grid with 12 columns instead of 6, which is the default value:\n\n```vue\n<template>\n  <BaseGrid :items=\"items\" :columns=\"12\">\n    <template #default=\"{ item }\">\n      {{ `Default slot content: ${item.id}` }}\n    </template>\n  </BaseGrid>\n</template>\n\n<script setup>\nimport { BaseGrid } from '@empathyco/x-components'\nconst items = [\n  { id: 1, name: 'Item 1' },\n  { id: 2, name: 'Item 2' },\n  { id: 3, name: 'Item 3' },\n]\n</script>\n```\n\n### Rendering usage\n\nConfiguring the number of columns.\n\nIt renders a list of items using the different scopedSlots created by the item's modelName. For\nexample, if you want to use this component as the search grid, you pass the search results (results,\nbanners, promoted, next queries...etc) as items. Each of these results have a different modelName\nand are rendered in different slots.\n\n```vue\n<template>\n  <BaseGrid :animation=\"animation\" :items=\"items\">\n    <template #banner=\"{ item }\">\n      <span class=\"banner\">\n        {{ `${item.title} banner` }}\n      </span>\n    </template>\n    <template #next-queries=\"{ item }\">\n      <span>\n        {{ `${item.totalResults} next queries` }}\n      </span>\n    </template>\n    <template #promoted=\"{ item }\">\n      <span class=\"promoted\">\n        {{ `${item.title} promoted` }}\n      </span>\n    </template>\n    <template #result=\"{ item }\">\n      <BaseResultLink :result=\"item\">\n        {{ item.name }}\n      </BaseResultLink>\n    </template>\n  </BaseGrid>\n</template>\n\n<script setup>\nimport { BaseGrid } from '@empathyco/x-components'\nimport BaseResultLink from './BaseResultLink.vue'\nconst animation = 'ul'\nconst items = [\n  { id: 1, modelName: 'banner', title: 'Banner 1' },\n  { id: 2, modelName: 'next-queries', totalResults: 5 },\n  { id: 3, modelName: 'promoted', title: 'Promo 1' },\n  { id: 4, modelName: 'result', name: 'Result 1' },\n]\n</script>\n```\n\n### Customizing the items width\n\nThe `--x-size-min-width-grid-item` variable can be used to customize the min width of the grid\nitems.\n\n```vue\n<template>\n  <BaseGrid :items=\"items\" style=\"--x-size-min-width-grid-item: 150px\">\n    <template #default=\"{ item }\">\n      {{ `Default slot content: ${item.id}` }}\n    </template>\n  </BaseGrid>\n</template>\n\n<script setup>\nimport { BaseGrid } from '@empathyco/x-components'\nconst items = [\n  { id: 1, name: 'Item 1' },\n  { id: 2, name: 'Item 2' },\n  { id: 3, name: 'Item 3' },\n]\n</script>\n```\n</docs>\n"],"names":["_openBlock","_createBlock","_resolveDynamicComponent","_normalizeStyle","_normalizeClass","_createElementBlock","_Fragment","_renderList","_renderSlot","_createTextVNode","_toDisplayString"],"mappings":";;;;;;AACE,EAAA,OAAAA,SAAA,EAAA,EAAAC,WAAA,CA4BYC,wBA3BL,IAAA,CAAA,SAAS,CAAA,EAAA;AAAA,IACd,GAAA,EAAI,QAAA;AAAA,IACH,KAAA,EAAKC,eAAE,IAAA,CAAA,KAAK,CAAA;AAAA,IACb,KAAA,EAAKC,cAAA,CAAA,CAAC,aAAA,EACE,IAAA,CAAA,UAAU,CAAA,CAAA;AAAA,IAClB,GAAA,EAAI,IAAA;AAAA,IACJ,WAAA,EAAU;AAAA,GAAA,EAAA;qBAGR,MAAiD;AAAA,OAAAJ,SAAA,CAAA,IAAA,CAAA,EADnDK,kBAAA;AAAA,QAkBKC,QAAA;AAAA,QAAA,IAAA;AAAA,QAAAC,UAAA,CAjBoC,IAAA,CAAA,SAAA,EAAS,CAAA,EAAvC,IAAA,EAAM,QAAA,EAAU,QAAA,EAAQ,KAAA;AADnC,UAAA,OAAAP,SAAA,EAAA,EAAAK,kBAAA;AAAA,YAkBK,IAAA;AAAA,YAAA;AAAA,cAhBF,KAAK,IAAA,CAAK,EAAA;AAAA,cACV,KAAA,EAAKD,cAAA,CAAA,CAAE,QAAA,EACF,mBAAmB,CAAA;AAAA,aAAA;;AAOb,cAAA,IAAA,CAAA,KAAA,CAAM,QAAQ,CAAA,GAA1BI,UAAA,CAA6D,IAAA,CAAA,MAAA,EAAzB,QAAA,EAAQ;AAAA,gBAAA,GAAA,EAAA,CAAA;AAAG,gBAAA;AAAA,eAAA,EAAA,MAAA,EAAA,IAAA,CAAA,GAM/CA,UAAA,CAA8F,IAAA,CAAA,MAAA,EAAA,SAAA,EAAA;AAAA,gBAAA,GAAA,EAAA,CAAA;AAAhF,gBAAA;AAAA,eAAA,EAAd,MAA8F;AAAA,gBAAAC,eAAA;AAAhE,kBAAAC,eAAA,CAAA,IAAA,CAAa,IAAA,IAAQ,IAAA,CAAK,SAAA,IAAa,IAAA,CAAK,MAAM,IAAI,CAAA;AAAA,kBAAA;AAAA;AAAA;AAAA,eAAA,EAAA,IAAA;;;;;;;;;;;;;;;;;;"}

package/js/components/base-grid.vue2.js

@@ -86,10 +86,14 @@ var _sfc_main = defineComponent({
          */
         const gridItems = computed(() => computedItems.value.map(item => {
             const slotName = toKebabCase(item.modelName);
+            let cssClass = `x-base-grid__${slotName}`;
+            if (item.modelName === 'VendorBanner' && item.position === undefined) {
+                cssClass += ` x-base-grid__${slotName}--row`;
+            }
             return {
                 slotName,
                 item,
-                cssClass: `x-base-grid__${slotName}`,
+                cssClass,
             };
         }));
         /**

package/js/components/base-grid.vue2.js.map

@@ -1 +1 @@
-{"version":3,"file":"base-grid.vue2.js","sources":["../../../src/components/base-grid.vue"],"sourcesContent":["<template>\n  <component\n    :is=\"animation\"\n    ref=\"gridEl\"\n    :style=\"style\"\n    class=\"x-base-grid\"\n    :class=\"cssClasses\"\n    tag=\"ul\"\n    data-test=\"grid\"\n  >\n    <li\n      v-for=\"{ item, cssClass, slotName } in gridItems\"\n      :key=\"item.id\"\n      :class=\"cssClass\"\n      class=\"x-base-grid__item\"\n    >\n      <!--\n        @slot Customized item rendering. Specifying a slot with the item's modelName will result in\n        the item using that slot composition to render.\n            @binding {item} item - Item to render\n      -->\n      <slot v-if=\"slots[slotName]\" :name=\"slotName\" :item=\"item\" />\n      <!--\n        @slot (required) Default item rendering. This slot will be used by default for rendering\n        the item without an specific slot implementation.\n            @binding {item} item - Item to render\n      -->\n      <slot v-else :item=\"item\">{{ (item as any).name || item.modelName || item.id || item }}</slot>\n    </li>\n  </component>\n</template>\n\n<script lang=\"ts\">\nimport type { MaybeComputedElementRef, UseResizeObserverReturn } from '@vueuse/core'\nimport type { PropType, Ref } from 'vue'\nimport type { ListItem } from '../utils/types'\nimport type { GridItem } from './base-grid.types'\nimport { useResizeObserver } from '@vueuse/core'\nimport { computed, defineComponent, inject, onBeforeUnmount, onMounted, ref, watch } from 'vue'\nimport { useXBus } from '../composables/use-x-bus'\nimport { AnimationProp } from '../types/animation-prop'\nimport { toKebabCase } from '../utils/string'\nimport { LIST_ITEMS_KEY } from './decorators/injection.consts'\n\n/**\n * Grid component that is able to render different items based on their modelName value. In order\n * to achieve this, it exposes a scopedSlot for each different modelName. In case the items used\n * do not have modelName property, the default slot is used instead. It has a required property:\n * the `items` to render; and an optional one: the number `columns` the grid is divided in. If the\n * number of columns is not specified, the grid automatically fills the rows with as many columns\n * as it can fit.\n *\n * @public\n */\nexport default defineComponent({\n  name: 'BaseGrid',\n  props: {\n    /** Animation component that will be used to animate the base grid. */\n    animation: {\n      type: AnimationProp,\n      default: 'ul',\n    },\n    /**\n     * Number of columns the grid is divided into. By default, its value is 0, setting the grid\n     * columns mode to auto-fill.\n     */\n    columns: {\n      type: Number,\n      default: 0,\n    },\n    /**\n     * The list of items to be rendered.\n     *\n     * @remarks The items must have an ID property.\n     */\n    items: {\n      type: Array as PropType<ListItem[]>,\n    },\n  },\n  setup(props, { slots }) {\n    // eslint-disable-next-line ts/consistent-type-definitions\n    type ElementRef = {\n      $el: HTMLElement\n    }\n\n    const xBus = useXBus()\n\n    /** It injects {@link ListItem} provided by an ancestor. */\n    const injectedListItems = inject<Ref<ListItem[]>>(LIST_ITEMS_KEY as string)\n    const gridEl = ref<ElementRef | HTMLElement>()\n    const renderedColumnsNumber = ref(0)\n\n    /**\n     * Emits the {@link XEventsTypes.RenderedColumnsNumberChanged}\n     * event whenever the number of columns rendered inside the grid changes.\n     */\n    watch(\n      renderedColumnsNumber,\n      () => xBus.emit('RenderedColumnsNumberChanged', renderedColumnsNumber.value),\n      { immediate: false },\n    )\n\n    /**\n     * It returns the items passed as props or the injected ones.\n     *\n     * @returns List of grid items.\n     */\n    const computedItems = computed<ListItem[] | void>(() => {\n      return (\n        props.items ??\n        injectedListItems?.value ??\n        console.warn('It is necessary to pass a prop or inject the list of filters')\n      )\n    })\n\n    /**\n     * CSS class based on the column property value so items inside the grid can fill different\n     * amount of columns or rows based on how many columns the grid is divided into.\n     *\n     * @returns CSS class with the column property value.\n     */\n    const cssClasses = computed(() => `x-base-grid--cols-${props.columns || 'auto'}`)\n\n    /**\n     * CSSStyleDeclaration object specifying the number of columns the grid is divided into based on\n     * the column property value.\n     *\n     * @returns A CSSStyleDeclaration to use as the style attribute.\n     */\n    const style = computed<Partial<CSSStyleDeclaration>>(() => ({\n      gridTemplateColumns: props.columns\n        ? `repeat(${props.columns}, minmax(0, 1fr))`\n        : 'repeat(auto-fill, minmax(var(--x-size-min-width-grid-item, 150px), 1fr))',\n    }))\n\n    /**\n     * Maps the item to an object containing: the `item`, its `CSS class` and its slot name.\n     *\n     * @returns An array of objects containing the item and its CSS class.\n     */\n    const gridItems = computed<GridItem[]>(() =>\n      (computedItems.value as ListItem[]).map(item => {\n        const slotName = toKebabCase(item.modelName)\n        return {\n          slotName,\n          item,\n          cssClass: `x-base-grid__${slotName}`,\n        }\n      }),\n    )\n\n    /**\n     * Checks if a given value is an `ElementRef` object.\n     *\n     * @param value - The value to check.\n     * @returns `true` if the value is an `ElementRef` object, `false` otherwise.\n     */\n    const isElementRef = (value: any): value is ElementRef => {\n      return value && value.$el instanceof HTMLElement\n    }\n\n    /** Updates the number of columns rendered inside the grid. */\n    function updateRenderedColumnsNumber() {\n      const { gridTemplateColumns } = getComputedStyle(\n        isElementRef(gridEl.value) ? gridEl.value.$el : (gridEl.value as Element),\n      )\n      renderedColumnsNumber.value = gridTemplateColumns.split(' ').length\n    }\n\n    /** Initialises the rendered columns number and sets a ResizeObserver to keep it updated. */\n    let resizeObserver: UseResizeObserverReturn\n    onMounted(() => {\n      resizeObserver = useResizeObserver(\n        gridEl as MaybeComputedElementRef,\n        updateRenderedColumnsNumber,\n      )\n    })\n    onBeforeUnmount(() => resizeObserver?.stop())\n\n    return {\n      gridItems,\n      cssClasses,\n      style,\n      gridEl,\n      slots,\n    }\n  },\n})\n</script>\n\n<style lang=\"css\" scoped>\n.x-base-grid {\n  display: grid;\n  grid-auto-flow: dense;\n  list-style: none;\n  align-items: stretch;\n}\n\n.x-base-grid__banner,\n.x-base-grid__next-queries-group,\n.x-base-grid__related-prompts-group {\n  grid-column-start: 1;\n  grid-column-end: -1;\n}\n\n.x-base-grid__related-prompts-group.x-staggered-fade-and-slide-leave-active,\n.x-base-grid__related-prompts-group.x-staggered-fade-and-slide-enter-active {\n  transition: none;\n  position: relative;\n}\n\n.x-base-grid__item {\n  display: flex;\n  flex-flow: column nowrap;\n}\n\n.x-base-grid__item > * {\n  flex-grow: 1;\n}\n\n.x-base-grid--cols-auto .x-base-grid__item {\n  min-width: var(--x-size-min-width-grid-item);\n}\n</style>\n\n<docs lang=\"mdx\">\n## Examples\n\nThis component renders a list of elements in different slots depending on their modelName. In order\nto achieve this, it exposes a scopedSlot for each different modelName. In case the items used do not\nhave modelName property, the default slot is used instead. It has a required property, the `items`\nto render, and an optional one, the number of `columns` the grid is divided in. If the number of\ncolumns is not specified, the grid automatically fills the rows with as many columns as it can fit.\n\n### Basic example\n\nIt renders a list of items using the default slot:\n\n```vue\n<template>\n  <BaseGrid :items=\"items\">\n    <template #default=\"{ item }\">\n      {{ `Default slot content: ${item.id}` }}\n    </template>\n  </BaseGrid>\n</template>\n\n<script setup>\nimport { BaseGrid } from '@empathyco/x-components'\nconst items = [\n  { id: 1, name: 'Item 1' },\n  { id: 2, name: 'Item 2' },\n  { id: 3, name: 'Item 3' },\n]\n</script>\n```\n\n### Configuring the number of columns\n\nIt renders a grid with 12 columns instead of 6, which is the default value:\n\n```vue\n<template>\n  <BaseGrid :items=\"items\" :columns=\"12\">\n    <template #default=\"{ item }\">\n      {{ `Default slot content: ${item.id}` }}\n    </template>\n  </BaseGrid>\n</template>\n\n<script setup>\nimport { BaseGrid } from '@empathyco/x-components'\nconst items = [\n  { id: 1, name: 'Item 1' },\n  { id: 2, name: 'Item 2' },\n  { id: 3, name: 'Item 3' },\n]\n</script>\n```\n\n### Rendering usage\n\nConfiguring the number of columns.\n\nIt renders a list of items using the different scopedSlots created by the item's modelName. For\nexample, if you want to use this component as the search grid, you pass the search results (results,\nbanners, promoted, next queries...etc) as items. Each of these results have a different modelName\nand are rendered in different slots.\n\n```vue\n<template>\n  <BaseGrid :animation=\"animation\" :items=\"items\">\n    <template #banner=\"{ item }\">\n      <span class=\"banner\">\n        {{ `${item.title} banner` }}\n      </span>\n    </template>\n    <template #next-queries=\"{ item }\">\n      <span>\n        {{ `${item.totalResults} next queries` }}\n      </span>\n    </template>\n    <template #promoted=\"{ item }\">\n      <span class=\"promoted\">\n        {{ `${item.title} promoted` }}\n      </span>\n    </template>\n    <template #result=\"{ item }\">\n      <BaseResultLink :result=\"item\">\n        {{ item.name }}\n      </BaseResultLink>\n    </template>\n  </BaseGrid>\n</template>\n\n<script setup>\nimport { BaseGrid } from '@empathyco/x-components'\nimport BaseResultLink from './BaseResultLink.vue'\nconst animation = 'ul'\nconst items = [\n  { id: 1, modelName: 'banner', title: 'Banner 1' },\n  { id: 2, modelName: 'next-queries', totalResults: 5 },\n  { id: 3, modelName: 'promoted', title: 'Promo 1' },\n  { id: 4, modelName: 'result', name: 'Result 1' },\n]\n</script>\n```\n\n### Customizing the items width\n\nThe `--x-size-min-width-grid-item` variable can be used to customize the min width of the grid\nitems.\n\n```vue\n<template>\n  <BaseGrid :items=\"items\" style=\"--x-size-min-width-grid-item: 150px\">\n    <template #default=\"{ item }\">\n      {{ `Default slot content: ${item.id}` }}\n    </template>\n  </BaseGrid>\n</template>\n\n<script setup>\nimport { BaseGrid } from '@empathyco/x-components'\nconst items = [\n  { id: 1, name: 'Item 1' },\n  { id: 2, name: 'Item 2' },\n  { id: 3, name: 'Item 3' },\n]\n</script>\n```\n</docs>\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"base-grid.vue2.js","sources":["../../../src/components/base-grid.vue"],"sourcesContent":["<template>\n  <component\n    :is=\"animation\"\n    ref=\"gridEl\"\n    :style=\"style\"\n    class=\"x-base-grid\"\n    :class=\"cssClasses\"\n    tag=\"ul\"\n    data-test=\"grid\"\n  >\n    <li\n      v-for=\"{ item, cssClass, slotName } in gridItems\"\n      :key=\"item.id\"\n      :class=\"cssClass\"\n      class=\"x-base-grid__item\"\n    >\n      <!--\n        @slot Customized item rendering. Specifying a slot with the item's modelName will result in\n        the item using that slot composition to render.\n            @binding {item} item - Item to render\n      -->\n      <slot v-if=\"slots[slotName]\" :name=\"slotName\" :item=\"item\" />\n      <!--\n        @slot (required) Default item rendering. This slot will be used by default for rendering\n        the item without an specific slot implementation.\n            @binding {item} item - Item to render\n      -->\n      <slot v-else :item=\"item\">{{ (item as any).name || item.modelName || item.id || item }}</slot>\n    </li>\n  </component>\n</template>\n\n<script lang=\"ts\">\nimport type { MaybeComputedElementRef, UseResizeObserverReturn } from '@vueuse/core'\nimport type { PropType, Ref } from 'vue'\nimport type { ListItem } from '../utils/types'\nimport type { GridItem } from './base-grid.types'\nimport { useResizeObserver } from '@vueuse/core'\nimport { computed, defineComponent, inject, onBeforeUnmount, onMounted, ref, watch } from 'vue'\nimport { useXBus } from '../composables/use-x-bus'\nimport { AnimationProp } from '../types/animation-prop'\nimport { toKebabCase } from '../utils/string'\nimport { LIST_ITEMS_KEY } from './decorators/injection.consts'\n\n/**\n * Grid component that is able to render different items based on their modelName value. In order\n * to achieve this, it exposes a scopedSlot for each different modelName. In case the items used\n * do not have modelName property, the default slot is used instead. It has a required property:\n * the `items` to render; and an optional one: the number `columns` the grid is divided in. If the\n * number of columns is not specified, the grid automatically fills the rows with as many columns\n * as it can fit.\n *\n * @public\n */\nexport default defineComponent({\n  name: 'BaseGrid',\n  props: {\n    /** Animation component that will be used to animate the base grid. */\n    animation: {\n      type: AnimationProp,\n      default: 'ul',\n    },\n    /**\n     * Number of columns the grid is divided into. By default, its value is 0, setting the grid\n     * columns mode to auto-fill.\n     */\n    columns: {\n      type: Number,\n      default: 0,\n    },\n    /**\n     * The list of items to be rendered.\n     *\n     * @remarks The items must have an ID property.\n     */\n    items: {\n      type: Array as PropType<ListItem[]>,\n    },\n  },\n  setup(props, { slots }) {\n    // eslint-disable-next-line ts/consistent-type-definitions\n    type ElementRef = {\n      $el: HTMLElement\n    }\n\n    const xBus = useXBus()\n\n    /** It injects {@link ListItem} provided by an ancestor. */\n    const injectedListItems = inject<Ref<ListItem[]>>(LIST_ITEMS_KEY as string)\n    const gridEl = ref<ElementRef | HTMLElement>()\n    const renderedColumnsNumber = ref(0)\n\n    /**\n     * Emits the {@link XEventsTypes.RenderedColumnsNumberChanged}\n     * event whenever the number of columns rendered inside the grid changes.\n     */\n    watch(\n      renderedColumnsNumber,\n      () => xBus.emit('RenderedColumnsNumberChanged', renderedColumnsNumber.value),\n      { immediate: false },\n    )\n\n    /**\n     * It returns the items passed as props or the injected ones.\n     *\n     * @returns List of grid items.\n     */\n    const computedItems = computed<ListItem[] | void>(() => {\n      return (\n        props.items ??\n        injectedListItems?.value ??\n        console.warn('It is necessary to pass a prop or inject the list of filters')\n      )\n    })\n\n    /**\n     * CSS class based on the column property value so items inside the grid can fill different\n     * amount of columns or rows based on how many columns the grid is divided into.\n     *\n     * @returns CSS class with the column property value.\n     */\n    const cssClasses = computed(() => `x-base-grid--cols-${props.columns || 'auto'}`)\n\n    /**\n     * CSSStyleDeclaration object specifying the number of columns the grid is divided into based on\n     * the column property value.\n     *\n     * @returns A CSSStyleDeclaration to use as the style attribute.\n     */\n    const style = computed<Partial<CSSStyleDeclaration>>(() => ({\n      gridTemplateColumns: props.columns\n        ? `repeat(${props.columns}, minmax(0, 1fr))`\n        : 'repeat(auto-fill, minmax(var(--x-size-min-width-grid-item, 150px), 1fr))',\n    }))\n\n    /**\n     * Maps the item to an object containing: the `item`, its `CSS class` and its slot name.\n     *\n     * @returns An array of objects containing the item and its CSS class.\n     */\n    const gridItems = computed<GridItem[]>(() =>\n      (computedItems.value as ListItem[]).map(item => {\n        const slotName = toKebabCase(item.modelName)\n        let cssClass = `x-base-grid__${slotName}`\n        if (item.modelName === 'VendorBanner' && (item as any).position === undefined) {\n          cssClass += ` x-base-grid__${slotName}--row`\n        }\n        return {\n          slotName,\n          item,\n          cssClass,\n        }\n      }),\n    )\n\n    /**\n     * Checks if a given value is an `ElementRef` object.\n     *\n     * @param value - The value to check.\n     * @returns `true` if the value is an `ElementRef` object, `false` otherwise.\n     */\n    const isElementRef = (value: any): value is ElementRef => {\n      return value && value.$el instanceof HTMLElement\n    }\n\n    /** Updates the number of columns rendered inside the grid. */\n    function updateRenderedColumnsNumber() {\n      const { gridTemplateColumns } = getComputedStyle(\n        isElementRef(gridEl.value) ? gridEl.value.$el : (gridEl.value as Element),\n      )\n      renderedColumnsNumber.value = gridTemplateColumns.split(' ').length\n    }\n\n    /** Initialises the rendered columns number and sets a ResizeObserver to keep it updated. */\n    let resizeObserver: UseResizeObserverReturn\n    onMounted(() => {\n      resizeObserver = useResizeObserver(\n        gridEl as MaybeComputedElementRef,\n        updateRenderedColumnsNumber,\n      )\n    })\n    onBeforeUnmount(() => resizeObserver?.stop())\n\n    return {\n      gridItems,\n      cssClasses,\n      style,\n      gridEl,\n      slots,\n    }\n  },\n})\n</script>\n\n<style lang=\"css\" scoped>\n.x-base-grid {\n  display: grid;\n  grid-auto-flow: dense;\n  list-style: none;\n  align-items: stretch;\n}\n\n.x-base-grid__banner,\n.x-base-grid__vendor-banner--row,\n.x-base-grid__next-queries-group,\n.x-base-grid__related-prompts-group {\n  grid-column-start: 1;\n  grid-column-end: -1;\n}\n\n.x-base-grid__related-prompts-group.x-staggered-fade-and-slide-leave-active,\n.x-base-grid__related-prompts-group.x-staggered-fade-and-slide-enter-active {\n  transition: none;\n  position: relative;\n}\n\n.x-base-grid__item {\n  display: flex;\n  flex-flow: column nowrap;\n}\n\n.x-base-grid__item > * {\n  flex-grow: 1;\n}\n\n.x-base-grid--cols-auto .x-base-grid__item {\n  min-width: var(--x-size-min-width-grid-item);\n}\n</style>\n\n<docs lang=\"mdx\">\n## Examples\n\nThis component renders a list of elements in different slots depending on their modelName. In order\nto achieve this, it exposes a scopedSlot for each different modelName. In case the items used do not\nhave modelName property, the default slot is used instead. It has a required property, the `items`\nto render, and an optional one, the number of `columns` the grid is divided in. If the number of\ncolumns is not specified, the grid automatically fills the rows with as many columns as it can fit.\n\n### Basic example\n\nIt renders a list of items using the default slot:\n\n```vue\n<template>\n  <BaseGrid :items=\"items\">\n    <template #default=\"{ item }\">\n      {{ `Default slot content: ${item.id}` }}\n    </template>\n  </BaseGrid>\n</template>\n\n<script setup>\nimport { BaseGrid } from '@empathyco/x-components'\nconst items = [\n  { id: 1, name: 'Item 1' },\n  { id: 2, name: 'Item 2' },\n  { id: 3, name: 'Item 3' },\n]\n</script>\n```\n\n### Configuring the number of columns\n\nIt renders a grid with 12 columns instead of 6, which is the default value:\n\n```vue\n<template>\n  <BaseGrid :items=\"items\" :columns=\"12\">\n    <template #default=\"{ item }\">\n      {{ `Default slot content: ${item.id}` }}\n    </template>\n  </BaseGrid>\n</template>\n\n<script setup>\nimport { BaseGrid } from '@empathyco/x-components'\nconst items = [\n  { id: 1, name: 'Item 1' },\n  { id: 2, name: 'Item 2' },\n  { id: 3, name: 'Item 3' },\n]\n</script>\n```\n\n### Rendering usage\n\nConfiguring the number of columns.\n\nIt renders a list of items using the different scopedSlots created by the item's modelName. For\nexample, if you want to use this component as the search grid, you pass the search results (results,\nbanners, promoted, next queries...etc) as items. Each of these results have a different modelName\nand are rendered in different slots.\n\n```vue\n<template>\n  <BaseGrid :animation=\"animation\" :items=\"items\">\n    <template #banner=\"{ item }\">\n      <span class=\"banner\">\n        {{ `${item.title} banner` }}\n      </span>\n    </template>\n    <template #next-queries=\"{ item }\">\n      <span>\n        {{ `${item.totalResults} next queries` }}\n      </span>\n    </template>\n    <template #promoted=\"{ item }\">\n      <span class=\"promoted\">\n        {{ `${item.title} promoted` }}\n      </span>\n    </template>\n    <template #result=\"{ item }\">\n      <BaseResultLink :result=\"item\">\n        {{ item.name }}\n      </BaseResultLink>\n    </template>\n  </BaseGrid>\n</template>\n\n<script setup>\nimport { BaseGrid } from '@empathyco/x-components'\nimport BaseResultLink from './BaseResultLink.vue'\nconst animation = 'ul'\nconst items = [\n  { id: 1, modelName: 'banner', title: 'Banner 1' },\n  { id: 2, modelName: 'next-queries', totalResults: 5 },\n  { id: 3, modelName: 'promoted', title: 'Promo 1' },\n  { id: 4, modelName: 'result', name: 'Result 1' },\n]\n</script>\n```\n\n### Customizing the items width\n\nThe `--x-size-min-width-grid-item` variable can be used to customize the min width of the grid\nitems.\n\n```vue\n<template>\n  <BaseGrid :items=\"items\" style=\"--x-size-min-width-grid-item: 150px\">\n    <template #default=\"{ item }\">\n      {{ `Default slot content: ${item.id}` }}\n    </template>\n  </BaseGrid>\n</template>\n\n<script setup>\nimport { BaseGrid } from '@empathyco/x-components'\nconst items = [\n  { id: 1, name: 'Item 1' },\n  { id: 2, name: 'Item 2' },\n  { id: 3, name: 'Item 3' },\n]\n</script>\n```\n</docs>\n"],"names":[],"mappings":"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"}

package/js/components/base-grid.vue3.js

@@ -1,6 +1,6 @@
 import injectCss from '../../tools/inject-css.js';
 
-var css = ".x-base-grid[data-v-070eaadb]{align-items:stretch;display:grid;grid-auto-flow:dense;list-style:none}.x-base-grid__banner[data-v-070eaadb],.x-base-grid__next-queries-group[data-v-070eaadb],.x-base-grid__related-prompts-group[data-v-070eaadb]{grid-column-end:-1;grid-column-start:1}.x-base-grid__related-prompts-group.x-staggered-fade-and-slide-enter-active[data-v-070eaadb],.x-base-grid__related-prompts-group.x-staggered-fade-and-slide-leave-active[data-v-070eaadb]{position:relative;transition:none}.x-base-grid__item[data-v-070eaadb]{display:flex;flex-flow:column nowrap}.x-base-grid__item[data-v-070eaadb]>*{flex-grow:1}.x-base-grid--cols-auto .x-base-grid__item[data-v-070eaadb]{min-width:var(--x-size-min-width-grid-item)}";
+var css = ".x-base-grid[data-v-070eaadb]{align-items:stretch;display:grid;grid-auto-flow:dense;list-style:none}.x-base-grid__banner[data-v-070eaadb],.x-base-grid__next-queries-group[data-v-070eaadb],.x-base-grid__related-prompts-group[data-v-070eaadb],.x-base-grid__vendor-banner--row[data-v-070eaadb]{grid-column-end:-1;grid-column-start:1}.x-base-grid__related-prompts-group.x-staggered-fade-and-slide-enter-active[data-v-070eaadb],.x-base-grid__related-prompts-group.x-staggered-fade-and-slide-leave-active[data-v-070eaadb]{position:relative;transition:none}.x-base-grid__item[data-v-070eaadb]{display:flex;flex-flow:column nowrap}.x-base-grid__item[data-v-070eaadb]>*{flex-grow:1}.x-base-grid--cols-auto .x-base-grid__item[data-v-070eaadb]{min-width:var(--x-size-min-width-grid-item)}";
 injectCss(css);
 
 export { css };

package/js/index.js

@@ -458,9 +458,10 @@ export { replaceableParams, urlEmitters } from './x-modules/url/store/emitters.j
 export { urlXStoreModule } from './x-modules/url/store/module.js';
 export { resetUrlBrowseCategory, resetUrlQuery, setInitialExtraParams, setParams, setUrlBrowseCategory, setUrlFilters, setUrlPage, setUrlParamsFromPreview, setUrlPrompt, setUrlQuery, setUrlQueryFromPreview, setUrlRelatedTags, setUrlScroll, setUrlSelectedFiltersFromPreview, setUrlSort, urlWiring } from './x-modules/url/wiring.js';
 export { urlXModule } from './x-modules/url/x-module.js';
+export { default as VendorBannersList } from './x-modules/vendor/components/vendor-banners-list.vue.js';
 export { default as VendorResultsList } from './x-modules/vendor/components/vendor-results-list.vue.js';
 export { vendorEmitters } from './x-modules/vendor/store/emitters.js';
 export { vendorXStoreModule } from './x-modules/vendor/store/module.js';
-export { setResults, vendorWiring } from './x-modules/vendor/wiring.js';
+export { setBanners, setResults, vendorWiring } from './x-modules/vendor/wiring.js';
 export { vendorXModule } from './x-modules/vendor/x-module.js';
 //# sourceMappingURL=index.js.map

package/js/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/js/x-modules/vendor/components/vendor-banners-list.vue.js

@@ -0,0 +1,83 @@
+import { defineComponent, inject, computed, provide, h } from 'vue';
+import { LIST_ITEMS_KEY } from '../../../components/decorators/injection.consts.js';
+import ItemsList from '../../../components/items-list.vue.js';
+import { use$x } from '../../../composables/use-_x.js';
+import { useState } from '../../../composables/use-state.js';
+import { AnimationProp } from '../../../types/animation-prop.js';
+import { vendorXModule } from '../x-module.js';
+
+/**
+ * It renders a {@link ItemsList} list of vendor banners from {@link VendorState.banners}.
+ *
+ * The component provides a default slot which wraps the whole component with the `vendorBanners`
+ * plus the `injectedListItems` which also contains the injected list items from
+ * the ancestor.
+ *
+ * It also provides the parent slots to customize the items.
+ *
+ * @public
+ */
+var _sfc_main = defineComponent({
+    name: 'VendorBannersList',
+    xModule: vendorXModule.name,
+    props: {
+        /** Animation component that will be used to animate the vendor banners. */
+        animation: {
+            type: AnimationProp,
+            default: 'ul',
+        },
+    },
+    setup(props, { slots }) {
+        const $x = use$x();
+        /** The vendor banners to render from the state. */
+        const stateItems = useState('vendor').banners;
+        /** It injects {@link ListItem} provided by an ancestor as injectedListItems. */
+        const injectedListItems = inject(LIST_ITEMS_KEY);
+        /**
+         * The `stateItems` concatenated with the `injectedListItems` if there are.
+         *
+         * @remarks This computed defines the merging strategy of the `stateItems` and the
+         * `injectedListItems`.
+         *
+         * @returns List of {@link ListItem}.
+         */
+        const items = computed(() => {
+            if (!injectedListItems?.value.length) {
+                return stateItems.value;
+            }
+            const items = [...injectedListItems.value];
+            const positionedBanners = stateItems.value.filter(item => item.position != null);
+            const unpositionedBanners = stateItems.value.filter(item => item.position == null);
+            for (const item of positionedBanners) {
+                let index = item.position - 1;
+                while (items.at(index)?.modelName === 'VendorBanner') {
+                    index++;
+                }
+                const isIndexInLoadedPages = index <= items.length;
+                const areAllPagesLoaded = $x.results.length === $x.totalResults;
+                if (!isIndexInLoadedPages && !areAllPagesLoaded) {
+                    break;
+                }
+                items.splice(index, 0, item);
+            }
+            items.unshift(...unpositionedBanners);
+            return items;
+        });
+        /**
+         * The computed list items of the entity that uses the mixin.
+         *
+         * @remarks It should be overridden in the component that uses the mixin and it's intended to be
+         * filled with items from the state. Vue doesn't allow mixins as abstract classes.
+         * @returns An empty array as fallback in case it is not overridden.
+         */
+        provide(LIST_ITEMS_KEY, items);
+        return () => {
+            const innerProps = { items: items.value, animation: props.animation };
+            // https://vue-land.github.io/faq/forwarding-slots#passing-all-slots
+            return slots.default?.(innerProps)[0] ?? h(ItemsList, innerProps, slots);
+        };
+    },
+});
+
+export { _sfc_main as default };
+//# sourceMappingURL=vendor-banners-list.vue.js.map