npm - @empathyco/x-components - Versions diffs - 8.4.0 → 8.6.0 - Mend

@empathyco/x-components 8.4.0 → 8.6.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (71) hide show

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

	@@ -1 +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;;;;;;;;;;;;;;;;;;"}
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 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 CHANGED Viewed

@@ -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 CHANGED Viewed

	@@ -1 +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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"}
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 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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

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

package/js/x-modules/search/components/banner.vue.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"banner.vue.js","sources":["../../../../../src/x-modules/search/components/banner.vue"],"sourcesContent":["<template>\n <component\n :is=\"banner.url ? 'a' : 'figure'\"\n v-if=\"!imageFailed\"\n :href=\"banner.url\"\n class=\"x-banner\"\n data-test=\"banner\"\n v-on=\"banner.url ? anchorEvents() : {}\"\n >\n <img\n :src=\"banner.image\"\n :alt=\"banner.title ? banner.title : 'Banner'\"\n class=\"x-banner__image\"\n data-test=\"banner-image\"\n @error=\"imageFailed = true\"\n />\n <h2 v-if=\"banner.title\" class=\"x-banner__title\" :class=\"titleClass\" data-test=\"banner-title\">\n {{ banner.title }}\n </h2>\n </component>\n</template>\n\n<script lang=\"ts\">\nimport type { Banner as BannerModel } from '@empathyco/x-types'\nimport type { PropType } from 'vue'\nimport { defineComponent, ref } from 'vue'\nimport { useXBus } from '../../../composables/use-x-bus'\nimport { searchXModule } from '../x-module'\n\n/*.\n A banner result is just an item that has been inserted into the search results to advertise\n * something. Usually it is the first item in the grid or it can be placed in the middle of them\n * and fill the whole row where appears.\n * The banner may be clickable or non-clickable depending on whether it has an associated URL\n * or not. It contains an image and, optionally, a title. In case the image does not\n * load due to an error the banner will not be rendered.\n \n Additionally, this component exposes the following props to modify the classes of the\n * elements: `titleClass`.\n \n @public\n /\nexport default defineComponent({\n name: 'Banner',\n xModule: searchXModule.name,\n props: {\n /\n The banner data.\n \n @public\n /\n banner: {\n type: Object as PropType<BannerModel>,\n required: true,\n },\n titleClass: String,\n },\n setup(props) {\n const xBus = useXBus()\n\n /\n Flag to handle banner image errors.\n \n @public\n /\n const imageFailed = ref(false)\n\n /\n Emits the banner click event.\n \n @internal\n /\n const emitClickEvent = (): void => {\n xBus.emit(~~'UserClickedABanner'~~, props.banner)\n }\n\n /\n Returns the events supported by the anchor.\n \n @returns Events supported by the anchor.\n \n @internal\n */\n const anchorEvents = (): Partial<{\n [key in keyof GlobalEventHandlersEventMap]: () => void\n }> => ({\n click: () => emitClickEvent(),\n auxclick: () => emitClickEvent(),\n contextmenu: () => emitClickEvent(),\n })\n\n return {\n imageFailed,\n anchorEvents,\n }\n },\n})\n</script>\n\n<style lang=\"css\" scoped>\n.x-banner {\n display: flex;\n flex-flow: column nowrap;\n text-decoration: none;\n}\n\n.x-banner__image {\n width: 100%;\n object-fit: contain;\n}\n</style>\n\n<docs lang=\"mdx\">\n## Events\n\nThis component emits the following event:\n\n- [`UserClickedABanner`~~](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts~~):\n emitted when the user clicks the banner (if it has a URL).\n\n## See it in action\n\nIn this example, banner data is passed as a prop.\n\n_Here you can see how the `Banner` component is rendered._\n\n```vue\n<template>\n <Banner :banner=\"banner\" />\n</template>\n\n<script setup>\nimport { Banner } from '@empathyco/x-components/search'\nimport { ref } from 'vue'\n\nconst banner = ref({\n modelName: 'Banner',\n id: 'banner-example',\n url: 'https://my-website.com/summer-shirts',\n image: 'https://my-website.com/images/summer-shirts.jpg',\n title: 'Trendy summer shirts',\n position: 1,\n})\n</script>\n```\n\n### Customizing the items with classes\n\nThe `titleClass` prop can be used to add classes to the banner title.\n\n```vue\n<template>\n <Banner :banner=\"banner\" titleClass=\"x-bg-neutral-50\" />\n</template>\n\n<script setup>\nimport { Banner } from '@empathyco/x-components/search'\nimport { ref } from 'vue'\n\nconst banner = ref({\n modelName: 'Banner',\n id: 'banner-example',\n url: 'https://my-website.com/summer-shirts',\n image: 'https://my-website.com/images/summer-shirts.jpg',\n title: 'Trendy summer shirts',\n position: 1,\n})\n</script>\n```\n</docs>\n"],"names":["_openBlock","_createBlock","_resolveDynamicComponent","_mergeProps","_toHandlers","_withCtx","_createElementVNode","_createElementBlock","_normalizeClass","_toDisplayString","_createCommentVNode"],"mappings":";;;;;;;AAGW,EAAA,OAAA,CAAA,IAAA,CAAA,WAAA,IAAAA,SAAA,EAAA,EAFTC,WAAA,CAkBYC,uBAAA,CAjBL,IAAA,CAAA,MAAA,CAAO,GAAA,GAAG,iBADjBC,UAAA,CAkBY;AAAA,IAAA,GAAA,EAAA,CAAA;AAfT,IAAA,IAAA,EAAM,IAAA,CAAA,MAAA,CAAO,GAAA;AAAA,IACd,KAAA,EAAM,UAAA;AAAA,IACN,WAAA,EAAU;AAAA,GAAA,EACVC,UAAA,CAAuC,IAAA,CAAjC,MAAA,CAAO,GAAA,GAAM,IAAA,CAAA,YAAA,EAAY,GAAA,EAAA,CAAA,CAAA,EAAA;AAAA,IAAA,OAAA,EAAAC,OAAA,CAE/B,MAME;AAAA,MANFC,kBAAA,CAME,KAAA,EAAA;AAAA,QALC,KAAK,IAAA,CAAA,MAAA,CAAO,KAAA;AAAA,QACZ,GAAA,EAAK,IAAA,CAAA,MAAA,CAAO,KAAA,GAAQ,IAAA,CAAA,MAAA,CAAO,KAAA,GAAK,QAAA;AAAA,QACjC,KAAA,EAAM,iBAAA;AAAA,QACN,WAAA,EAAU,cAAA;AAAA,QACT,OAAA,EAAK,sCAAE,IAAA,CAAA,WAAA,GAAW,IAAA;AAAA,OAAA,EAAA,IAAA,EAAA,EAAA,EAAA,UAAA,CAAA;AAEX,MAAA,IAAA,CAAA,MAAA,CAAO,KAAA,IAAAN,SAAA,EAAA,EAAjBO,kBAAA;AAAA,QAEK,IAAA;AAAA,QAAA;AAAA,UAAA,GAAA,EAAA,CAAA;UAFmB,KAAA,EAAKC,cAAA,CAAA,CAAC,mBAA0B,IAAA,CAAA,UAAU,CAAA,CAAA;AAAA,UAAE,WAAA,EAAU;AAAA,SAAA;AACzE,QAAAC,eAAA,CAAA,IAAA,CAAA,MAAA,CAAO,KAAK,CAAA;AAAA,QAAA;AAAA;AAAA,OAAA,IAAAC,kBAAA,CAAA,MAAA,EAAA,IAAA;;;;;;;;;;"}
1	+ {"version":3,"file":"banner.vue.js","sources":["../../../../../src/x-modules/search/components/banner.vue"],"sourcesContent":["<template>\n <component\n :is=\"banner.url ? 'a' : 'figure'\"\n v-if=\"!imageFailed\"\n :href=\"banner.url\"\n class=\"x-banner\"\n data-test=\"banner\"\n v-on=\"banner.url ? anchorEvents() : {}\"\n >\n <img\n :src=\"banner.image\"\n :alt=\"banner.title ? banner.title : 'Banner'\"\n class=\"x-banner__image\"\n data-test=\"banner-image\"\n @error=\"imageFailed = true\"\n />\n <h2 v-if=\"banner.title\" class=\"x-banner__title\" :class=\"titleClass\" data-test=\"banner-title\">\n {{ banner.title }}\n </h2>\n </component>\n</template>\n\n<script lang=\"ts\">\nimport type { Banner as BannerModel } from '@empathyco/x-types'\nimport type { PropType } from 'vue'\nimport type { XEvent } from '../../../wiring'\nimport { defineComponent, ref } from 'vue'\nimport { useXBus } from '../../../composables/use-x-bus'\nimport { searchXModule } from '../x-module'\n\n/*.\n A banner result is just an item that has been inserted into the search results to advertise\n * something. Usually it is the first item in the grid or it can be placed in the middle of them\n * and fill the whole row where appears.\n * The banner may be clickable or non-clickable depending on whether it has an associated URL\n * or not. It contains an image and, optionally, a title. In case the image does not\n * load due to an error the banner will not be rendered.\n \n Additionally, this component exposes the following props to modify the classes of the\n * elements: `titleClass`.\n \n @public\n /\nexport default defineComponent({\n name: 'Banner',\n xModule: searchXModule.name,\n props: {\n /\n The banner data.\n \n @public\n /\n banner: {\n type: Object as PropType<BannerModel>,\n required: true,\n },\n titleClass: String,\n /\n Event to emit when the banner is clicked.\n \n @public\n /\n clickEvent: {\n type: String as PropType<XEvent>,\n default: 'UserClickedABanner',\n },\n },\n setup(props) {\n const xBus = useXBus()\n\n /\n Flag to handle banner image errors.\n \n @public\n /\n const imageFailed = ref(false)\n\n /\n Emits the banner click event.\n \n @internal\n /\n const emitClickEvent = (): void => {\n xBus.emit(props.clickEvent, props.banner)\n }\n\n /\n Returns the events supported by the anchor.\n \n @returns Events supported by the anchor.\n \n @internal\n */\n const anchorEvents = (): Partial<{\n [key in keyof GlobalEventHandlersEventMap]: () => void\n }> => ({\n click: () => emitClickEvent(),\n auxclick: () => emitClickEvent(),\n contextmenu: () => emitClickEvent(),\n })\n\n return {\n imageFailed,\n anchorEvents,\n }\n },\n})\n</script>\n\n<style lang=\"css\" scoped>\n.x-banner {\n display: flex;\n flex-flow: column nowrap;\n text-decoration: none;\n}\n\n.x-banner__image {\n width: 100%;\n object-fit: contain;\n}\n</style>\n\n<docs lang=\"mdx\">\n## Events\n\nThis component emits the following event:\n\n- `clickEvent` (default `UserClickedABanner`):\n emitted when the user clicks the banner (if it has a URL). The event name can be customized\n via the `clickEvent` prop.\n\n## See it in action\n\nIn this example, banner data is passed as a prop.\n\n_Here you can see how the `Banner` component is rendered._\n\n```vue\n<template>\n <Banner :banner=\"banner\" />\n</template>\n\n<script setup>\nimport { Banner } from '@empathyco/x-components/search'\nimport { ref } from 'vue'\n\nconst banner = ref({\n modelName: 'Banner',\n id: 'banner-example',\n url: 'https://my-website.com/summer-shirts',\n image: 'https://my-website.com/images/summer-shirts.jpg',\n title: 'Trendy summer shirts',\n position: 1,\n})\n</script>\n```\n\n### Customizing the items with classes\n\nThe `titleClass` prop can be used to add classes to the banner title.\n\n```vue\n<template>\n <Banner :banner=\"banner\" titleClass=\"x-bg-neutral-50\" />\n</template>\n\n<script setup>\nimport { Banner } from '@empathyco/x-components/search'\nimport { ref } from 'vue'\n\nconst banner = ref({\n modelName: 'Banner',\n id: 'banner-example',\n url: 'https://my-website.com/summer-shirts',\n image: 'https://my-website.com/images/summer-shirts.jpg',\n title: 'Trendy summer shirts',\n position: 1,\n})\n</script>\n```\n</docs>\n"],"names":["_openBlock","_createBlock","_resolveDynamicComponent","_mergeProps","_toHandlers","_withCtx","_createElementVNode","_createElementBlock","_normalizeClass","_toDisplayString","_createCommentVNode"],"mappings":";;;;;;;AAGW,EAAA,OAAA,CAAA,IAAA,CAAA,WAAA,IAAAA,SAAA,EAAA,EAFTC,WAAA,CAkBYC,uBAAA,CAjBL,IAAA,CAAA,MAAA,CAAO,GAAA,GAAG,iBADjBC,UAAA,CAkBY;AAAA,IAAA,GAAA,EAAA,CAAA;AAfT,IAAA,IAAA,EAAM,IAAA,CAAA,MAAA,CAAO,GAAA;AAAA,IACd,KAAA,EAAM,UAAA;AAAA,IACN,WAAA,EAAU;AAAA,GAAA,EACVC,UAAA,CAAuC,IAAA,CAAjC,MAAA,CAAO,GAAA,GAAM,IAAA,CAAA,YAAA,EAAY,GAAA,EAAA,CAAA,CAAA,EAAA;AAAA,IAAA,OAAA,EAAAC,OAAA,CAE/B,MAME;AAAA,MANFC,kBAAA,CAME,KAAA,EAAA;AAAA,QALC,KAAK,IAAA,CAAA,MAAA,CAAO,KAAA;AAAA,QACZ,GAAA,EAAK,IAAA,CAAA,MAAA,CAAO,KAAA,GAAQ,IAAA,CAAA,MAAA,CAAO,KAAA,GAAK,QAAA;AAAA,QACjC,KAAA,EAAM,iBAAA;AAAA,QACN,WAAA,EAAU,cAAA;AAAA,QACT,OAAA,EAAK,sCAAE,IAAA,CAAA,WAAA,GAAW,IAAA;AAAA,OAAA,EAAA,IAAA,EAAA,EAAA,EAAA,UAAA,CAAA;AAEX,MAAA,IAAA,CAAA,MAAA,CAAO,KAAA,IAAAN,SAAA,EAAA,EAAjBO,kBAAA;AAAA,QAEK,IAAA;AAAA,QAAA;AAAA,UAAA,GAAA,EAAA,CAAA;UAFmB,KAAA,EAAKC,cAAA,CAAA,CAAC,mBAA0B,IAAA,CAAA,UAAU,CAAA,CAAA;AAAA,UAAE,WAAA,EAAU;AAAA,SAAA;AACzE,QAAAC,eAAA,CAAA,IAAA,CAAA,MAAA,CAAO,KAAK,CAAA;AAAA,QAAA;AAAA;AAAA,OAAA,IAAAC,kBAAA,CAAA,MAAA,EAAA,IAAA;;;;;;;;;;"}

package/js/x-modules/search/components/banner.vue2.js CHANGED Viewed

@@ -29,6 +29,15 @@ var _sfc_main = defineComponent({
             required: true,
         },
         titleClass: String,
+        /**
+         * Event to emit when the banner is clicked.
+         *
+         * @public
+         */
+        clickEvent: {
+            type: String,
+            default: 'UserClickedABanner',
+        },
     },
     setup(props) {
         const xBus = useXBus();
@@ -44,7 +53,7 @@ var _sfc_main = defineComponent({
          * @internal
          */
         const emitClickEvent = () => {
-            xBus.emit('UserClickedABanner', props.banner);
+            xBus.emit(props.clickEvent, props.banner);
         };
         /**
          * Returns the events supported by the anchor.

package/js/x-modules/search/components/banner.vue2.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"banner.vue2.js","sources":["../../../../../src/x-modules/search/components/banner.vue"],"sourcesContent":["<template>\n <component\n :is=\"banner.url ? 'a' : 'figure'\"\n v-if=\"!imageFailed\"\n :href=\"banner.url\"\n class=\"x-banner\"\n data-test=\"banner\"\n v-on=\"banner.url ? anchorEvents() : {}\"\n >\n <img\n :src=\"banner.image\"\n :alt=\"banner.title ? banner.title : 'Banner'\"\n class=\"x-banner__image\"\n data-test=\"banner-image\"\n @error=\"imageFailed = true\"\n />\n <h2 v-if=\"banner.title\" class=\"x-banner__title\" :class=\"titleClass\" data-test=\"banner-title\">\n {{ banner.title }}\n </h2>\n </component>\n</template>\n\n<script lang=\"ts\">\nimport type { Banner as BannerModel } from '@empathyco/x-types'\nimport type { PropType } from 'vue'\nimport { defineComponent, ref } from 'vue'\nimport { useXBus } from '../../../composables/use-x-bus'\nimport { searchXModule } from '../x-module'\n\n/*.\n A banner result is just an item that has been inserted into the search results to advertise\n * something. Usually it is the first item in the grid or it can be placed in the middle of them\n * and fill the whole row where appears.\n * The banner may be clickable or non-clickable depending on whether it has an associated URL\n * or not. It contains an image and, optionally, a title. In case the image does not\n * load due to an error the banner will not be rendered.\n \n Additionally, this component exposes the following props to modify the classes of the\n * elements: `titleClass`.\n \n @public\n /\nexport default defineComponent({\n name: 'Banner',\n xModule: searchXModule.name,\n props: {\n /\n The banner data.\n \n @public\n /\n banner: {\n type: Object as PropType<BannerModel>,\n required: true,\n },\n titleClass: String,\n },\n setup(props) {\n const xBus = useXBus()\n\n /\n Flag to handle banner image errors.\n \n @public\n /\n const imageFailed = ref(false)\n\n /\n Emits the banner click event.\n \n @internal\n /\n const emitClickEvent = (): void => {\n xBus.emit(~~'UserClickedABanner'~~, props.banner)\n }\n\n /\n Returns the events supported by the anchor.\n \n @returns Events supported by the anchor.\n \n @internal\n */\n const anchorEvents = (): Partial<{\n [key in keyof GlobalEventHandlersEventMap]: () => void\n }> => ({\n click: () => emitClickEvent(),\n auxclick: () => emitClickEvent(),\n contextmenu: () => emitClickEvent(),\n })\n\n return {\n imageFailed,\n anchorEvents,\n }\n },\n})\n</script>\n\n<style lang=\"css\" scoped>\n.x-banner {\n display: flex;\n flex-flow: column nowrap;\n text-decoration: none;\n}\n\n.x-banner__image {\n width: 100%;\n object-fit: contain;\n}\n</style>\n\n<docs lang=\"mdx\">\n## Events\n\nThis component emits the following event:\n\n- [`UserClickedABanner`~~](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts~~):\n emitted when the user clicks the banner (if it has a URL).\n\n## See it in action\n\nIn this example, banner data is passed as a prop.\n\n_Here you can see how the `Banner` component is rendered._\n\n```vue\n<template>\n <Banner :banner=\"banner\" />\n</template>\n\n<script setup>\nimport { Banner } from '@empathyco/x-components/search'\nimport { ref } from 'vue'\n\nconst banner = ref({\n modelName: 'Banner',\n id: 'banner-example',\n url: 'https://my-website.com/summer-shirts',\n image: 'https://my-website.com/images/summer-shirts.jpg',\n title: 'Trendy summer shirts',\n position: 1,\n})\n</script>\n```\n\n### Customizing the items with classes\n\nThe `titleClass` prop can be used to add classes to the banner title.\n\n```vue\n<template>\n <Banner :banner=\"banner\" titleClass=\"x-bg-neutral-50\" />\n</template>\n\n<script setup>\nimport { Banner } from '@empathyco/x-components/search'\nimport { ref } from 'vue'\n\nconst banner = ref({\n modelName: 'Banner',\n id: 'banner-example',\n url: 'https://my-website.com/summer-shirts',\n image: 'https://my-website.com/images/summer-shirts.jpg',\n title: 'Trendy summer shirts',\n position: 1,\n})\n</script>\n```\n</docs>\n"],"names":[],"mappings":";;;;~~AA6BA~~;;;;;;;;;;;;AAYE;AACF,gBAAe,eAAe,CAAC;AAC7B,IAAA,IAAI,EAAE,QAAQ;IACd,OAAO,EAAE,aAAa,CAAC,IAAI;AAC3B,IAAA,KAAK,EAAE;AACL;;;;AAIE;AACF,QAAA,MAAM,EAAE;AACN,YAAA,IAAI,EAAE,MAA+B;AACrC,YAAA,QAAQ,EAAE,IAAI;AACf,SAAA;AACD,QAAA,UAAU,EAAE,MAAM;~~AACnB~~,KAAA;AACD,IAAA,KAAK,CAAC,KAAK,EAAA;AACT,QAAA,MAAM,IAAG,GAAI,OAAO,EAAC;AAErB;;;;AAIE;AACF,QAAA,MAAM,WAAU,GAAI,GAAG,CAAC,KAAK,CAAA;AAE7B;;;;AAIE;QACF,MAAM,cAAa,GAAI,MAAU;YAC/B,IAAI,CAAC,IAAI,CAAC,~~oBAAoB~~,EAAE,KAAK,CAAC,MAAM,CAAA;~~AAC9C~~,QAAA,CAAA;AAEA;;;;;;AAME;AACF,QAAA,MAAM,YAAW,GAAI,OAEd;AACL,YAAA,KAAK,EAAE,MAAM,cAAc,EAAE;AAC7B,YAAA,QAAQ,EAAE,MAAM,cAAc,EAAE;AAChC,YAAA,WAAW,EAAE,MAAM,cAAc,EAAE;AACpC,SAAA,CAAA;QAED,OAAO;YACL,WAAW;YACX,YAAY;SACd;IACF,CAAC;AACF,CAAA,CAAA;;;;"}
1	+ {"version":3,"file":"banner.vue2.js","sources":["../../../../../src/x-modules/search/components/banner.vue"],"sourcesContent":["<template>\n <component\n :is=\"banner.url ? 'a' : 'figure'\"\n v-if=\"!imageFailed\"\n :href=\"banner.url\"\n class=\"x-banner\"\n data-test=\"banner\"\n v-on=\"banner.url ? anchorEvents() : {}\"\n >\n <img\n :src=\"banner.image\"\n :alt=\"banner.title ? banner.title : 'Banner'\"\n class=\"x-banner__image\"\n data-test=\"banner-image\"\n @error=\"imageFailed = true\"\n />\n <h2 v-if=\"banner.title\" class=\"x-banner__title\" :class=\"titleClass\" data-test=\"banner-title\">\n {{ banner.title }}\n </h2>\n </component>\n</template>\n\n<script lang=\"ts\">\nimport type { Banner as BannerModel } from '@empathyco/x-types'\nimport type { PropType } from 'vue'\nimport type { XEvent } from '../../../wiring'\nimport { defineComponent, ref } from 'vue'\nimport { useXBus } from '../../../composables/use-x-bus'\nimport { searchXModule } from '../x-module'\n\n/*.\n A banner result is just an item that has been inserted into the search results to advertise\n * something. Usually it is the first item in the grid or it can be placed in the middle of them\n * and fill the whole row where appears.\n * The banner may be clickable or non-clickable depending on whether it has an associated URL\n * or not. It contains an image and, optionally, a title. In case the image does not\n * load due to an error the banner will not be rendered.\n \n Additionally, this component exposes the following props to modify the classes of the\n * elements: `titleClass`.\n \n @public\n /\nexport default defineComponent({\n name: 'Banner',\n xModule: searchXModule.name,\n props: {\n /\n The banner data.\n \n @public\n /\n banner: {\n type: Object as PropType<BannerModel>,\n required: true,\n },\n titleClass: String,\n /\n Event to emit when the banner is clicked.\n \n @public\n /\n clickEvent: {\n type: String as PropType<XEvent>,\n default: 'UserClickedABanner',\n },\n },\n setup(props) {\n const xBus = useXBus()\n\n /\n Flag to handle banner image errors.\n \n @public\n /\n const imageFailed = ref(false)\n\n /\n Emits the banner click event.\n \n @internal\n /\n const emitClickEvent = (): void => {\n xBus.emit(props.clickEvent, props.banner)\n }\n\n /\n Returns the events supported by the anchor.\n \n @returns Events supported by the anchor.\n \n @internal\n */\n const anchorEvents = (): Partial<{\n [key in keyof GlobalEventHandlersEventMap]: () => void\n }> => ({\n click: () => emitClickEvent(),\n auxclick: () => emitClickEvent(),\n contextmenu: () => emitClickEvent(),\n })\n\n return {\n imageFailed,\n anchorEvents,\n }\n },\n})\n</script>\n\n<style lang=\"css\" scoped>\n.x-banner {\n display: flex;\n flex-flow: column nowrap;\n text-decoration: none;\n}\n\n.x-banner__image {\n width: 100%;\n object-fit: contain;\n}\n</style>\n\n<docs lang=\"mdx\">\n## Events\n\nThis component emits the following event:\n\n- `clickEvent` (default `UserClickedABanner`):\n emitted when the user clicks the banner (if it has a URL). The event name can be customized\n via the `clickEvent` prop.\n\n## See it in action\n\nIn this example, banner data is passed as a prop.\n\n_Here you can see how the `Banner` component is rendered._\n\n```vue\n<template>\n <Banner :banner=\"banner\" />\n</template>\n\n<script setup>\nimport { Banner } from '@empathyco/x-components/search'\nimport { ref } from 'vue'\n\nconst banner = ref({\n modelName: 'Banner',\n id: 'banner-example',\n url: 'https://my-website.com/summer-shirts',\n image: 'https://my-website.com/images/summer-shirts.jpg',\n title: 'Trendy summer shirts',\n position: 1,\n})\n</script>\n```\n\n### Customizing the items with classes\n\nThe `titleClass` prop can be used to add classes to the banner title.\n\n```vue\n<template>\n <Banner :banner=\"banner\" titleClass=\"x-bg-neutral-50\" />\n</template>\n\n<script setup>\nimport { Banner } from '@empathyco/x-components/search'\nimport { ref } from 'vue'\n\nconst banner = ref({\n modelName: 'Banner',\n id: 'banner-example',\n url: 'https://my-website.com/summer-shirts',\n image: 'https://my-website.com/images/summer-shirts.jpg',\n title: 'Trendy summer shirts',\n position: 1,\n})\n</script>\n```\n</docs>\n"],"names":[],"mappings":";;;;AA8BA;;;;;;;;;;;;AAYE;AACF,gBAAe,eAAe,CAAC;AAC7B,IAAA,IAAI,EAAE,QAAQ;IACd,OAAO,EAAE,aAAa,CAAC,IAAI;AAC3B,IAAA,KAAK,EAAE;AACL;;;;AAIE;AACF,QAAA,MAAM,EAAE;AACN,YAAA,IAAI,EAAE,MAA+B;AACrC,YAAA,QAAQ,EAAE,IAAI;AACf,SAAA;AACD,QAAA,UAAU,EAAE,MAAM;AAClB;;;;AAIE;AACF,QAAA,UAAU,EAAE;AACV,YAAA,IAAI,EAAE,MAA0B;AAChC,YAAA,OAAO,EAAE,oBAAoB;AAC9B,SAAA;AACF,KAAA;AACD,IAAA,KAAK,CAAC,KAAK,EAAA;AACT,QAAA,MAAM,IAAG,GAAI,OAAO,EAAC;AAErB;;;;AAIE;AACF,QAAA,MAAM,WAAU,GAAI,GAAG,CAAC,KAAK,CAAA;AAE7B;;;;AAIE;QACF,MAAM,cAAa,GAAI,MAAU;YAC/B,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,UAAU,EAAE,KAAK,CAAC,MAAM,CAAA;AAC1C,QAAA,CAAA;AAEA;;;;;;AAME;AACF,QAAA,MAAM,YAAW,GAAI,OAEd;AACL,YAAA,KAAK,EAAE,MAAM,cAAc,EAAE;AAC7B,YAAA,QAAQ,EAAE,MAAM,cAAc,EAAE;AAChC,YAAA,WAAW,EAAE,MAAM,cAAc,EAAE;AACpC,SAAA,CAAA;QAED,OAAO;YACL,WAAW;YACX,YAAY;SACd;IACF,CAAC;AACF,CAAA,CAAA;;;;"}

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

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

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

@@ -0,0 +1 @@

+ {"version":3,"file":"vendor-banners-list.vue.js","sources":["../../../../../src/x-modules/vendor/components/vendor-banners-list.vue"],"sourcesContent":["<script lang=\"ts\">\nimport type { Ref } from 'vue'\nimport type { ListItem } from '../../../utils/types'\nimport { computed, defineComponent, h, inject, provide } from 'vue'\nimport { LIST_ITEMS_KEY } from '../../../components/decorators/injection.consts'\nimport ItemsList from '../../../components/items-list.vue'\nimport { use$x } from '../../../composables/use-$x'\nimport { useState } from '../../../composables/use-state'\nimport { AnimationProp } from '../../../types/animation-prop'\nimport { vendorXModule } from '../x-module'\n\n/**\n * It renders a {@link ItemsList} list of vendor banners from {@link VendorState.banners}.\n *\n * The component provides a default slot which wraps the whole component with the `vendorBanners`\n * plus the `injectedListItems` which also contains the injected list items from\n * the ancestor.\n *\n * It also provides the parent slots to customize the items.\n *\n * @public\n */\nexport default defineComponent({\n name: 'VendorBannersList',\n xModule: vendorXModule.name,\n props: {\n /** Animation component that will be used to animate the vendor banners. */\n animation: {\n type: AnimationProp,\n default: 'ul',\n },\n },\n setup(props, { slots }) {\n const $x = use$x()\n\n /** The vendor banners to render from the state. */\n const stateItems = useState('vendor').banners\n\n /** It injects {@link ListItem} provided by an ancestor as injectedListItems. */\n const injectedListItems = inject<Ref<ListItem[]>>(LIST_ITEMS_KEY as string)\n\n /**\n * The `stateItems` concatenated with the `injectedListItems` if there are.\n *\n * @remarks This computed defines the merging strategy of the `stateItems` and the\n * `injectedListItems`.\n *\n * @returns List of {@link ListItem}.\n */\n const items = computed(() => {\n if (!injectedListItems?.value!.length) {\n return stateItems.value\n }\n const items = [...injectedListItems.value]\n const positionedBanners = stateItems.value.filter(item => item.position != null)\n const unpositionedBanners = stateItems.value.filter(item => item.position == null)\n for (const item of positionedBanners) {\n let index = item.position! - 1\n while (items.at(index)?.modelName === 'VendorBanner') {\n index++\n }\n const isIndexInLoadedPages = index <= items.length\n const areAllPagesLoaded = $x.results.length === $x.totalResults\n if (!isIndexInLoadedPages && !areAllPagesLoaded) {\n break\n }\n items.splice(index, 0, item)\n }\n items.unshift(...unpositionedBanners)\n return items\n })\n\n /**\n * The computed list items of the entity that uses the mixin.\n *\n * @remarks It should be overridden in the component that uses the mixin and it's intended to be\n * filled with items from the state. Vue doesn't allow mixins as abstract classes.\n * @returns An empty array as fallback in case it is not overridden.\n */\n provide(LIST_ITEMS_KEY as string, items)\n\n return () => {\n const innerProps = { items: items.value, animation: props.animation }\n // https://vue-land.github.io/faq/forwarding-slots#passing-all-slots\n return slots.default?.(innerProps)[0] ?? h(ItemsList, innerProps, slots)\n }\n },\n})\n</script>\n"],"names":[],"mappings":";;;;;;;;AAWA;;;;;;;;;;AAUE;AACF,gBAAe,eAAe,CAAC;AAC7B,IAAA,IAAI,EAAE,mBAAmB;IACzB,OAAO,EAAE,aAAa,CAAC,IAAI;AAC3B,IAAA,KAAK,EAAE;;AAEL,QAAA,SAAS,EAAE;AACT,YAAA,IAAI,EAAE,aAAa;AACnB,YAAA,OAAO,EAAE,IAAI;AACd,SAAA;AACF,KAAA;AACD,IAAA,KAAK,CAAC,KAAK,EAAE,EAAE,KAAI,EAAG,EAAA;AACpB,QAAA,MAAM,EAAC,GAAI,KAAK,EAAC;;QAGjB,MAAM,aAAa,QAAQ,CAAC,QAAQ,CAAC,CAAC,OAAM;;AAG5C,QAAA,MAAM,iBAAgB,GAAI,MAAM,CAAkB,cAAwB,CAAA;AAE1E;;;;;;;AAOE;AACF,QAAA,MAAM,KAAI,GAAI,QAAQ,CAAC,MAAI;AACzB,YAAA,IAAI,CAAC,iBAAiB,EAAE,KAAM,CAAC,MAAM,EAAE;gBACrC,OAAO,UAAU,CAAC,KAAI;YACxB;YACA,MAAM,KAAI,GAAI,CAAC,GAAG,iBAAiB,CAAC,KAAK,CAAA;AACzC,YAAA,MAAM,iBAAgB,GAAI,UAAU,CAAC,KAAK,CAAC,MAAM,CAAC,IAAG,IAAK,IAAI,CAAC,YAAY,IAAI,CAAA;AAC/E,YAAA,MAAM,mBAAkB,GAAI,UAAU,CAAC,KAAK,CAAC,MAAM,CAAC,IAAG,IAAK,IAAI,CAAC,YAAY,IAAI,CAAA;AACjF,YAAA,KAAK,MAAM,IAAG,IAAK,iBAAiB,EAAE;AACpC,gBAAA,IAAI,KAAI,GAAI,IAAI,CAAC,QAAQ,GAAI,CAAA;gBAC7B,OAAO,KAAK,CAAC,EAAE,CAAC,KAAK,CAAC,EAAE,cAAc,cAAc,EAAE;AACpD,oBAAA,KAAK,EAAC;gBACR;AACA,gBAAA,MAAM,uBAAuB,SAAS,KAAK,CAAC,MAAK;gBACjD,MAAM,iBAAgB,GAAI,EAAE,CAAC,OAAO,CAAC,MAAK,KAAM,EAAE,CAAC,YAAW;AAC9D,gBAAA,IAAI,CAAC,oBAAmB,IAAK,CAAC,iBAAiB,EAAE;oBAC/C;gBACF;gBACA,KAAK,CAAC,MAAM,CAAC,KAAK,EAAE,CAAC,EAAE,IAAI,CAAA;YAC7B;AACA,YAAA,KAAK,CAAC,OAAO,CAAC,GAAG,mBAAmB,CAAA;AACpC,YAAA,OAAO,KAAI;AACb,QAAA,CAAC,CAAA;AAED;;;;;;AAME;AACF,QAAA,OAAO,CAAC,cAAwB,EAAE,KAAK,CAAA;AAEvC,QAAA,OAAO,MAAI;AACT,YAAA,MAAM,UAAS,GAAI,EAAE,KAAK,EAAE,KAAK,CAAC,KAAK,EAAE,SAAS,EAAE,KAAK,CAAC,SAAQ,EAAE;;AAEpE,YAAA,OAAO,KAAK,CAAC,OAAO,GAAG,UAAU,CAAC,CAAC,CAAC,CAAA,IAAK,CAAC,CAAC,SAAS,EAAE,UAAU,EAAE,KAAK,CAAA;AACzE,QAAA,CAAA;IACF,CAAC;AACF,CAAA,CAAA;;;;"}

package/js/x-modules/vendor/components/vendor-banners-list.vue2.js ADDED Viewed

@@ -0,0 +1,6 @@
+import _sfc_main from './vendor-banners-list.vue.js';
+export { _sfc_main as default };
+//# sourceMappingURL=vendor-banners-list.vue2.js.map

package/js/x-modules/vendor/components/vendor-banners-list.vue2.js.map ADDED Viewed

	@@ -0,0 +1 @@
1	+ {"version":3,"file":"vendor-banners-list.vue2.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;"}

package/js/x-modules/vendor/store/module.js CHANGED Viewed

@@ -1,9 +1,13 @@
 const vendorXStoreModule = {
     state: () => ({
+        banners: [],
         results: [],
     }),
     getters: {},
     mutations: {
+        setBanners(state, banners) {
+            state.banners = banners;
+        },
         setResults(state, results) {
             state.results = results;
         },

package/js/x-modules/vendor/store/module.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"module.js","sources":["../../../../../src/x-modules/vendor/store/module.ts"],"sourcesContent":["import type { VendorXStoreModule } from './types'\n\nexport const vendorXStoreModule: VendorXStoreModule = {\n state: () => ({\n results: [],\n }),\n getters: {},\n mutations: {\n setResults(state, results) {\n state.results = results\n },\n },\n actions: {},\n}\n"],"names":[],"mappings":"AAEO,MAAM,kBAAkB,GAAuB;AACpD,IAAA,KAAK,EAAE,OAAO;AACZ,QAAA,OAAO,EAAE,EAAE;KACZ,CAAC;AACF,IAAA,OAAO,EAAE,EAAE;AACX,IAAA,SAAS,EAAE;QACT,UAAU,CAAC,KAAK,EAAE,OAAO,EAAA;AACvB,YAAA,KAAK,CAAC,OAAO,GAAG,OAAO;QACzB,CAAC;AACF,KAAA;AACD,IAAA,OAAO,EAAE,EAAE;;;;;"}
1	+ {"version":3,"file":"module.js","sources":["../../../../../src/x-modules/vendor/store/module.ts"],"sourcesContent":["import type { VendorXStoreModule } from './types'\n\nexport const vendorXStoreModule: VendorXStoreModule = {\n state: () => ({\n banners: [],\n results: [],\n }),\n getters: {},\n mutations: {\n setBanners(state, banners) {\n state.banners = banners\n },\n setResults(state, results) {\n state.results = results\n },\n },\n actions: {},\n}\n"],"names":[],"mappings":"AAEO,MAAM,kBAAkB,GAAuB;AACpD,IAAA,KAAK,EAAE,OAAO;AACZ,QAAA,OAAO,EAAE,EAAE;AACX,QAAA,OAAO,EAAE,EAAE;KACZ,CAAC;AACF,IAAA,OAAO,EAAE,EAAE;AACX,IAAA,SAAS,EAAE;QACT,UAAU,CAAC,KAAK,EAAE,OAAO,EAAA;AACvB,YAAA,KAAK,CAAC,OAAO,GAAG,OAAO;QACzB,CAAC;QACD,UAAU,CAAC,KAAK,EAAE,OAAO,EAAA;AACvB,YAAA,KAAK,CAAC,OAAO,GAAG,OAAO;QACzB,CAAC;AACF,KAAA;AACD,IAAA,OAAO,EAAE,EAAE;;;;;"}

package/js/x-modules/vendor/wiring.js CHANGED Viewed

@@ -14,6 +14,8 @@ const fetchTagging = async (url) => fetch(url, { method: 'GET', keepalive: true
 const trackResultView = createWireFromFunction(({ eventPayload: { tagging } }) => tagging?.viewUrl && void fetchTagging(tagging.viewUrl));
 const trackResultClick = createWireFromFunction(({ eventPayload: { tagging } }) => tagging?.clickUrl && void fetchTagging(tagging.clickUrl));
 const trackResultAddToCart = createWireFromFunction(({ eventPayload: { tagging } }) => tagging?.add2cartUrl && void fetchTagging(tagging.add2cartUrl));
+const trackBannerView = createWireFromFunction(({ eventPayload: { tagging } }) => tagging?.viewUrl && void fetchTagging(tagging.viewUrl));
+const trackBannerClick = createWireFromFunction(({ eventPayload: { tagging } }) => tagging?.clickUrl && void fetchTagging(tagging.clickUrl));
 /**
  * Sets the vendor results of the {@link VendorXModule}.
  *
@@ -23,12 +25,27 @@ const setResults = wireCommit('setResults', ({ eventPayload }) => eventPayload.m
     ...vendorResult,
     modelName: 'VendorResult',
 })));
+/**
+ * Sets the vendor banners of the {@link VendorXModule}.
+ *
+ * @public
+ */
+const setBanners = wireCommit('setBanners', ({ eventPayload }) => eventPayload.map(vendorBanner => ({
+    ...vendorBanner,
+    modelName: 'VendorBanner',
+})));
 /**
  * Resets the vendor results of the {@link VendorXModule}.
  *
  * @public
  */
 const resetResults = wireCommit('setResults', []);
+/**
+ * Resets the vendor banners of the {@link VendorXModule}.
+ *
+ * @public
+ */
+const resetBanners = wireCommit('setBanners', []);
 /**
  * Wiring configuration for the {@link VendorXModule | vendor module}.
  *
@@ -47,10 +64,20 @@ const vendorWiring = createWiring({
     UserClickedVendorResultAddToCart: {
         trackResultAddToCart,
     },
+    VendorBannersChanged: {
+        setBanners,
+    },
+    UserViewedAVendorBanner: {
+        trackBannerView,
+    },
+    UserClickedAVendorBanner: {
+        trackBannerClick,
+    },
     SearchRequestChanged: {
         resetResults,
+        resetBanners,
     },
 });
-export { setResults, vendorWiring };
+export { setBanners, setResults, vendorWiring };
 //# sourceMappingURL=wiring.js.map

package/js/x-modules/vendor/wiring.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"wiring.js","sources":["../../../../src/x-modules/vendor/wiring.ts"],"sourcesContent":["import type { WirePayload, XEventPayload } from '../../wiring'\nimport { createWireFromFunction, createWiring, namespacedWireCommit } from '../../wiring'\n\n/*\n WireCommit for {@link VendorXModule}.\n \n @internal\n /\nconst wireCommit = namespacedWireCommit('vendor')\n\nconst fetchTagging = async (url: string) => fetch(url, { method: 'GET', keepalive: true })\n\nconst trackResultView = createWireFromFunction<XEventPayload<'UserViewedAVendorResult'>>(\n ({ eventPayload: { tagging } }) => tagging?.viewUrl && void fetchTagging(tagging.viewUrl),\n)\nconst trackResultClick = createWireFromFunction<XEventPayload<'UserClickedAVendorResult'>>(\n ({ eventPayload: { tagging } }) => tagging?.clickUrl && void fetchTagging(tagging.clickUrl),\n)\nconst trackResultAddToCart = createWireFromFunction<\n XEventPayload<'UserClickedVendorResultAddToCart'>\n>(({ eventPayload: { tagging } }) => tagging?.add2cartUrl && void fetchTagging(tagging.add2cartUrl))\n/\n Sets the vendor results of the {@link VendorXModule}.\n \n @public\n /\nexport const setResults = wireCommit(\n 'setResults',\n ({ eventPayload }: WirePayload<XEventPayload<'VendorResultsChanged'>>) =>\n eventPayload.map(vendorResult => ({\n ...vendorResult,\n modelName: 'VendorResult' as const,\n })),\n)\n\n/\n Resets the vendor results of the {@link VendorXModule}.\n \n @public\n /\nconst resetResults = wireCommit('setResults', [])\n\n/\n Wiring configuration for the {@link VendorXModule \| vendor module}.\n \n @internal\n */\nexport const vendorWiring = createWiring({\n VendorResultsChanged: {\n setResults,\n },\n UserViewedAVendorResult: {\n trackResultView,\n },\n UserClickedAVendorResult: {\n trackResultClick,\n },\n UserClickedVendorResultAddToCart: {\n trackResultAddToCart,\n },\n SearchRequestChanged: {\n resetResults,\n },\n})\n"],"names":[],"mappings":";;;;;;AAGA;;;;AAIG;AACH,MAAM,UAAU,GAAG,oBAAoB,CAAC,QAAQ,CAAC;AAEjD,MAAM,YAAY,GAAG,OAAO,GAAW,KAAK,KAAK,CAAC,GAAG,EAAE,EAAE,MAAM,EAAE,KAAK,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC;AAE1F,MAAM,eAAe,GAAG,sBAAsB,CAC5C,CAAC,EAAE,YAAY,EAAE,EAAE,OAAO,EAAE,EAAE,KAAK,OAAO,EAAE,OAAO,IAAI,KAAK,YAAY,CAAC,OAAO,CAAC,OAAO,CAAC,CAC1F;AACD,MAAM,gBAAgB,GAAG,sBAAsB,CAC7C,CAAC,EAAE,YAAY,EAAE,EAAE,OAAO,EAAE,EAAE,KAAK,OAAO,EAAE,QAAQ,IAAI,KAAK,YAAY,CAAC,OAAO,CAAC,QAAQ,CAAC,CAC5F;AACD,MAAM,oBAAoB,GAAG,sBAAsB,CAEjD,CAAC,EAAE,YAAY,EAAE,EAAE,OAAO,EAAE,EAAE,KAAK,OAAO,EAAE,WAAW,IAAI,KAAK,YAAY,CAAC,OAAO,CAAC,WAAW,CAAC,CAAC;AACpG;;;;AAIG;MACU,UAAU,GAAG,UAAU,CAClC,YAAY,EACZ,CAAC,EAAE,YAAY,EAAsD,KACnE,YAAY,CAAC,GAAG,CAAC,YAAY,KAAK;AAChC,IAAA,GAAG,YAAY;AACf,IAAA,SAAS,EAAE,cAAuB;CACnC,CAAC,CAAC;AAGP;;;;AAIG;AACH,MAAM,YAAY,GAAG,UAAU,CAAC,YAAY,EAAE,EAAE,CAAC;AAEjD;;;;AAIG;AACI,MAAM,YAAY,GAAG,YAAY,CAAC;AACvC,IAAA,oBAAoB,EAAE;QACpB,UAAU;AACX,KAAA;AACD,IAAA,uBAAuB,EAAE;QACvB,eAAe;AAChB,KAAA;AACD,IAAA,wBAAwB,EAAE;QACxB,gBAAgB;AACjB,KAAA;AACD,IAAA,gCAAgC,EAAE;QAChC,oBAAoB;AACrB,KAAA;AACD,IAAA,oBAAoB,EAAE;QACpB,YAAY;AACb,KAAA;AACF,CAAA;;;;"}
1	+ {"version":3,"file":"wiring.js","sources":["../../../../src/x-modules/vendor/wiring.ts"],"sourcesContent":["import type { WirePayload, XEventPayload } from '../../wiring'\nimport { createWireFromFunction, createWiring, namespacedWireCommit } from '../../wiring'\n\n/*\n WireCommit for {@link VendorXModule}.\n \n @internal\n /\nconst wireCommit = namespacedWireCommit('vendor')\n\nconst fetchTagging = async (url: string) => fetch(url, { method: 'GET', keepalive: true })\n\nconst trackResultView = createWireFromFunction<XEventPayload<'UserViewedAVendorResult'>>(\n ({ eventPayload: { tagging } }) => tagging?.viewUrl && void fetchTagging(tagging.viewUrl),\n)\nconst trackResultClick = createWireFromFunction<XEventPayload<'UserClickedAVendorResult'>>(\n ({ eventPayload: { tagging } }) => tagging?.clickUrl && void fetchTagging(tagging.clickUrl),\n)\nconst trackResultAddToCart = createWireFromFunction<\n XEventPayload<'UserClickedVendorResultAddToCart'>\n>(({ eventPayload: { tagging } }) => tagging?.add2cartUrl && void fetchTagging(tagging.add2cartUrl))\nconst trackBannerView = createWireFromFunction<XEventPayload<'UserViewedAVendorBanner'>>(\n ({ eventPayload: { tagging } }) => tagging?.viewUrl && void fetchTagging(tagging.viewUrl),\n)\nconst trackBannerClick = createWireFromFunction<XEventPayload<'UserClickedAVendorBanner'>>(\n ({ eventPayload: { tagging } }) => tagging?.clickUrl && void fetchTagging(tagging.clickUrl),\n)\n/\n Sets the vendor results of the {@link VendorXModule}.\n \n @public\n /\nexport const setResults = wireCommit(\n 'setResults',\n ({ eventPayload }: WirePayload<XEventPayload<'VendorResultsChanged'>>) =>\n eventPayload.map(vendorResult => ({\n ...vendorResult,\n modelName: 'VendorResult' as const,\n })),\n)\n\n/\n Sets the vendor banners of the {@link VendorXModule}.\n \n @public\n /\nexport const setBanners = wireCommit(\n 'setBanners',\n ({ eventPayload }: WirePayload<XEventPayload<'VendorBannersChanged'>>) =>\n eventPayload.map(vendorBanner => ({\n ...vendorBanner,\n modelName: 'VendorBanner' as const,\n })),\n)\n\n/\n Resets the vendor results of the {@link VendorXModule}.\n \n @public\n /\nconst resetResults = wireCommit('setResults', [])\n\n/\n Resets the vendor banners of the {@link VendorXModule}.\n \n @public\n /\nconst resetBanners = wireCommit('setBanners', [])\n\n/\n Wiring configuration for the {@link VendorXModule \| vendor module}.\n \n @internal\n */\nexport const vendorWiring = createWiring({\n VendorResultsChanged: {\n setResults,\n },\n UserViewedAVendorResult: {\n trackResultView,\n },\n UserClickedAVendorResult: {\n trackResultClick,\n },\n UserClickedVendorResultAddToCart: {\n trackResultAddToCart,\n },\n VendorBannersChanged: {\n setBanners,\n },\n UserViewedAVendorBanner: {\n trackBannerView,\n },\n UserClickedAVendorBanner: {\n trackBannerClick,\n },\n SearchRequestChanged: {\n resetResults,\n resetBanners,\n },\n})\n"],"names":[],"mappings":";;;;;;AAGA;;;;AAIG;AACH,MAAM,UAAU,GAAG,oBAAoB,CAAC,QAAQ,CAAC;AAEjD,MAAM,YAAY,GAAG,OAAO,GAAW,KAAK,KAAK,CAAC,GAAG,EAAE,EAAE,MAAM,EAAE,KAAK,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC;AAE1F,MAAM,eAAe,GAAG,sBAAsB,CAC5C,CAAC,EAAE,YAAY,EAAE,EAAE,OAAO,EAAE,EAAE,KAAK,OAAO,EAAE,OAAO,IAAI,KAAK,YAAY,CAAC,OAAO,CAAC,OAAO,CAAC,CAC1F;AACD,MAAM,gBAAgB,GAAG,sBAAsB,CAC7C,CAAC,EAAE,YAAY,EAAE,EAAE,OAAO,EAAE,EAAE,KAAK,OAAO,EAAE,QAAQ,IAAI,KAAK,YAAY,CAAC,OAAO,CAAC,QAAQ,CAAC,CAC5F;AACD,MAAM,oBAAoB,GAAG,sBAAsB,CAEjD,CAAC,EAAE,YAAY,EAAE,EAAE,OAAO,EAAE,EAAE,KAAK,OAAO,EAAE,WAAW,IAAI,KAAK,YAAY,CAAC,OAAO,CAAC,WAAW,CAAC,CAAC;AACpG,MAAM,eAAe,GAAG,sBAAsB,CAC5C,CAAC,EAAE,YAAY,EAAE,EAAE,OAAO,EAAE,EAAE,KAAK,OAAO,EAAE,OAAO,IAAI,KAAK,YAAY,CAAC,OAAO,CAAC,OAAO,CAAC,CAC1F;AACD,MAAM,gBAAgB,GAAG,sBAAsB,CAC7C,CAAC,EAAE,YAAY,EAAE,EAAE,OAAO,EAAE,EAAE,KAAK,OAAO,EAAE,QAAQ,IAAI,KAAK,YAAY,CAAC,OAAO,CAAC,QAAQ,CAAC,CAC5F;AACD;;;;AAIG;MACU,UAAU,GAAG,UAAU,CAClC,YAAY,EACZ,CAAC,EAAE,YAAY,EAAsD,KACnE,YAAY,CAAC,GAAG,CAAC,YAAY,KAAK;AAChC,IAAA,GAAG,YAAY;AACf,IAAA,SAAS,EAAE,cAAuB;CACnC,CAAC,CAAC;AAGP;;;;AAIG;MACU,UAAU,GAAG,UAAU,CAClC,YAAY,EACZ,CAAC,EAAE,YAAY,EAAsD,KACnE,YAAY,CAAC,GAAG,CAAC,YAAY,KAAK;AAChC,IAAA,GAAG,YAAY;AACf,IAAA,SAAS,EAAE,cAAuB;CACnC,CAAC,CAAC;AAGP;;;;AAIG;AACH,MAAM,YAAY,GAAG,UAAU,CAAC,YAAY,EAAE,EAAE,CAAC;AAEjD;;;;AAIG;AACH,MAAM,YAAY,GAAG,UAAU,CAAC,YAAY,EAAE,EAAE,CAAC;AAEjD;;;;AAIG;AACI,MAAM,YAAY,GAAG,YAAY,CAAC;AACvC,IAAA,oBAAoB,EAAE;QACpB,UAAU;AACX,KAAA;AACD,IAAA,uBAAuB,EAAE;QACvB,eAAe;AAChB,KAAA;AACD,IAAA,wBAAwB,EAAE;QACxB,gBAAgB;AACjB,KAAA;AACD,IAAA,gCAAgC,EAAE;QAChC,oBAAoB;AACrB,KAAA;AACD,IAAA,oBAAoB,EAAE;QACpB,UAAU;AACX,KAAA;AACD,IAAA,uBAAuB,EAAE;QACvB,eAAe;AAChB,KAAA;AACD,IAAA,wBAAwB,EAAE;QACxB,gBAAgB;AACjB,KAAA;AACD,IAAA,oBAAoB,EAAE;QACpB,YAAY;QACZ,YAAY;AACb,KAAA;AACF,CAAA;;;;"}

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@empathyco/x-components",
-  "version": "8.4.0",
+  "version": "8.6.0",
   "description": "Empathy X Components",
   "author": "Empathy Systems Corporation S.L.",
   "license": "Apache-2.0",
@@ -68,8 +68,8 @@
   },
   "dependencies": {
     "@empathyco/x-adapter": "8.1.8",
-    "@empathyco/x-adapter-platform": "1.7.1",
-    "@empathyco/x-types": "10.6.0",
+    "@empathyco/x-adapter-platform": "1.7.2",
+    "@empathyco/x-types": "10.7.0",
     "@empathyco/x-utils": "1.0.9",
     "@vue/devtools-api": "~6.6.4",
     "@vueuse/core": "~12.8.2",
@@ -117,5 +117,5 @@
     "access": "public",
     "directory": "dist"
   },
-  "gitHead": "d22a62cf9e98670408fa801df2c7927db7e57f58"
+  "gitHead": "b939fa80f9090a85ca9085dfc15fdc4e90cf5958"
 }