@empathyco/x-components 7.4.1 → 8.0.0

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

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

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

@@ -0,0 +1,54 @@
+<!-- Do not edit this file. It is automatically generated by API Documenter. -->
+
+[Home](./index.md) &gt; [@empathyco/x-components](./x-components.md) &gt; [VendorState](./x-components.vendorstate.md)
+
+## VendorState interface
+
+**Signature:**
+
+```typescript
+export interface VendorState 
+```
+
+## Properties
+
+<table><thead><tr><th>
+
+Property
+
+
+</th><th>
+
+Modifiers
+
+
+</th><th>
+
+Type
+
+
+</th><th>
+
+Description
+
+
+</th></tr></thead>
+<tbody><tr><td>
+
+[results](./x-components.vendorstate.results.md)
+
+
+</td><td>
+
+
+</td><td>
+
+[VendorResult](./x-components.vendorresult.md)<!-- -->\[\]
+
+
+</td><td>
+
+
+</td></tr>
+</tbody></table>
+

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

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

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

@@ -0,0 +1,58 @@
+<!-- Do not edit this file. It is automatically generated by API Documenter. -->
+
+[Home](./index.md) &gt; [@empathyco/x-components](./x-components.md) &gt; [VendorXEvents](./x-components.vendorxevents.md)
+
+## VendorXEvents interface
+
+Directory of events for the vendor module.
+
+**Signature:**
+
+```typescript
+export interface VendorXEvents 
+```
+
+## Properties
+
+<table><thead><tr><th>
+
+Property
+
+
+</th><th>
+
+Modifiers
+
+
+</th><th>
+
+Type
+
+
+</th><th>
+
+Description
+
+
+</th></tr></thead>
+<tbody><tr><td>
+
+[VendorResultsChanged](./x-components.vendorxevents.vendorresultschanged.md)
+
+
+</td><td>
+
+
+</td><td>
+
+Omit&lt;[VendorResult](./x-components.vendorresult.md)<!-- -->, 'modelName'&gt;\[\]
+
+
+</td><td>
+
+The x consumer has provided vendor results to be inserted in the result grid. Payload: The array of vendor result inputs with their items and positions. modelName is excluded since it is an internal field, and we will assign it under the hood.
+
+
+</td></tr>
+</tbody></table>
+

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

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

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

@@ -0,0 +1,13 @@
+<!-- Do not edit this file. It is automatically generated by API Documenter. -->
+
+[Home](./index.md) &gt; [@empathyco/x-components](./x-components.md) &gt; [vendorXModule](./x-components.vendorxmodule.md)
+
+## vendorXModule variable
+
+Vendor [XModule](./x-components.xmodule.md) implementation. This module is auto-registered as soon as you import any component from the `vendor` entry point.
+
+**Signature:**
+
+```typescript
+vendorXModule: VendorXModule
+```

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

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

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

@@ -9,9 +9,9 @@
 **Signature:**
 
 ```typescript
-export interface XEventsTypes extends DeviceXEvents, EmpathizeXEvents, ExtraParamsXEvents, FacetsXEvents, HistoryQueriesXEvents, IdentifierResultsXEvents, NextQueriesXEvents, PopularSearchesXEvents, QueriesPreviewXEvents, QuerySuggestionsXEvents, RecommendationsXEvents, RelatedTagsXEvents, ScrollXEvents, SearchBoxXEvents, SearchXEvents, BrowseXEvents, SemanticQueriesXEvents, TaggingXEvents, ExperienceControlsXEvents, UrlXEvents, RelatedPromptsXEvents, AiXEvents 
+export interface XEventsTypes extends DeviceXEvents, EmpathizeXEvents, ExtraParamsXEvents, FacetsXEvents, HistoryQueriesXEvents, IdentifierResultsXEvents, NextQueriesXEvents, PopularSearchesXEvents, QueriesPreviewXEvents, QuerySuggestionsXEvents, RecommendationsXEvents, RelatedTagsXEvents, ScrollXEvents, SearchBoxXEvents, SearchXEvents, BrowseXEvents, SemanticQueriesXEvents, TaggingXEvents, ExperienceControlsXEvents, UrlXEvents, RelatedPromptsXEvents, AiXEvents, VendorXEvents 
 ```
-**Extends:** [DeviceXEvents](./x-components.devicexevents.md)<!-- -->, [EmpathizeXEvents](./x-components.empathizexevents.md)<!-- -->, [ExtraParamsXEvents](./x-components.extraparamsxevents.md)<!-- -->, [FacetsXEvents](./x-components.facetsxevents.md)<!-- -->, [HistoryQueriesXEvents](./x-components.historyqueriesxevents.md)<!-- -->, [IdentifierResultsXEvents](./x-components.identifierresultsxevents.md)<!-- -->, [NextQueriesXEvents](./x-components.nextqueriesxevents.md)<!-- -->, [PopularSearchesXEvents](./x-components.popularsearchesxevents.md)<!-- -->, [QueriesPreviewXEvents](./x-components.queriespreviewxevents.md)<!-- -->, [QuerySuggestionsXEvents](./x-components.querysuggestionsxevents.md)<!-- -->, [RecommendationsXEvents](./x-components.recommendationsxevents.md)<!-- -->, [RelatedTagsXEvents](./x-components.relatedtagsxevents.md)<!-- -->, [ScrollXEvents](./x-components.scrollxevents.md)<!-- -->, [SearchBoxXEvents](./x-components.searchboxxevents.md)<!-- -->, [SearchXEvents](./x-components.searchxevents.md)<!-- -->, [BrowseXEvents](./x-components.browsexevents.md)<!-- -->, [SemanticQueriesXEvents](./x-components.semanticqueriesxevents.md)<!-- -->, [TaggingXEvents](./x-components.taggingxevents.md)<!-- -->, [ExperienceControlsXEvents](./x-components.experiencecontrolsxevents.md)<!-- -->, [UrlXEvents](./x-components.urlxevents.md)<!-- -->, [RelatedPromptsXEvents](./x-components.relatedpromptsxevents.md)<!-- -->, [AiXEvents](./x-components.aixevents.md)
+**Extends:** [DeviceXEvents](./x-components.devicexevents.md)<!-- -->, [EmpathizeXEvents](./x-components.empathizexevents.md)<!-- -->, [ExtraParamsXEvents](./x-components.extraparamsxevents.md)<!-- -->, [FacetsXEvents](./x-components.facetsxevents.md)<!-- -->, [HistoryQueriesXEvents](./x-components.historyqueriesxevents.md)<!-- -->, [IdentifierResultsXEvents](./x-components.identifierresultsxevents.md)<!-- -->, [NextQueriesXEvents](./x-components.nextqueriesxevents.md)<!-- -->, [PopularSearchesXEvents](./x-components.popularsearchesxevents.md)<!-- -->, [QueriesPreviewXEvents](./x-components.queriespreviewxevents.md)<!-- -->, [QuerySuggestionsXEvents](./x-components.querysuggestionsxevents.md)<!-- -->, [RecommendationsXEvents](./x-components.recommendationsxevents.md)<!-- -->, [RelatedTagsXEvents](./x-components.relatedtagsxevents.md)<!-- -->, [ScrollXEvents](./x-components.scrollxevents.md)<!-- -->, [SearchBoxXEvents](./x-components.searchboxxevents.md)<!-- -->, [SearchXEvents](./x-components.searchxevents.md)<!-- -->, [BrowseXEvents](./x-components.browsexevents.md)<!-- -->, [SemanticQueriesXEvents](./x-components.semanticqueriesxevents.md)<!-- -->, [TaggingXEvents](./x-components.taggingxevents.md)<!-- -->, [ExperienceControlsXEvents](./x-components.experiencecontrolsxevents.md)<!-- -->, [UrlXEvents](./x-components.urlxevents.md)<!-- -->, [RelatedPromptsXEvents](./x-components.relatedpromptsxevents.md)<!-- -->, [AiXEvents](./x-components.aixevents.md)<!-- -->, [VendorXEvents](./x-components.vendorxevents.md)
 
 ## Remarks
 

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

@@ -408,6 +408,23 @@ Description
 </td><td>
 
 
+</td></tr>
+<tr><td>
+
+[vendor](./x-components.xmodulestree.vendor.md)
+
+
+</td><td>
+
+
+</td><td>
+
+[VendorXModule](./x-components.vendorxmodule.md)
+
+
+</td><td>
+
+
 </td></tr>
 </tbody></table>
 

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

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

package/docs/API-reference/api/x-types.result.md

@@ -9,9 +9,9 @@ A search result.
 **Signature:**
 
 ```typescript
-export interface Result extends NamedModel<'Result'>, Identifiable, Taggable 
+export interface Result extends NamedModel<'Result' | 'VendorResult'>, Identifiable, Taggable 
 ```
-**Extends:** [NamedModel](./x-types.namedmodel.md)<!-- -->&lt;'Result'&gt;, [Identifiable](./x-types.identifiable.md)<!-- -->, [Taggable](./x-types.taggable.md)
+**Extends:** [NamedModel](./x-types.namedmodel.md)<!-- -->&lt;'Result' \| 'VendorResult'&gt;, [Identifiable](./x-types.identifiable.md)<!-- -->, [Taggable](./x-types.taggable.md)
 
 ## Properties
 

package/docs/API-reference/components/{search → common/sort}/x-components.sort-dropdown.md

@@ -11,10 +11,13 @@ also allows to change the selected sort programmatically.
 
 ## Props
 
-| Name                   | Description                                                 | Type                | Default       |
-| ---------------------- | ----------------------------------------------------------- | ------------------- | ------------- |
-| <code>items</code>     | The list of possible sort values.                           | <code>Sort[]</code> | <code></code> |
-| <code>animation</code> | The transition to use for opening and closing the dropdown. | <code></code>       | <code></code> |
+| Name                                   | Description                                                 | Type                | Default                             |
+| -------------------------------------- | ----------------------------------------------------------- | ------------------- | ----------------------------------- |
+| <code>animation</code>                 | The transition to use for opening and closing the dropdown. | <code></code>       | <code></code>                       |
+| <code>items</code>                     | The list of possible sort values.                           | <code>Sort[]</code> | <code></code>                       |
+| <code>selectedSort</code>              |                                                             | <code>Sort</code>   | <code></code>                       |
+| <code>selectedSortProvidedEvent</code> |                                                             | <code>XEvent</code> | <code>'SelectedSortProvided'</code> |
+| <code>clickedSortEvent</code>          |                                                             | <code>XEvent</code> | <code>'UserClickedASort'</code>     |
 
 ## Events
 

package/docs/API-reference/components/{search → common/sort}/x-components.sort-list.md

@@ -11,10 +11,13 @@ also allows to change the selected sort programmatically.
 
 ## Props
 
-| Name                   | Description                                   | Type                             | Default                 |
-| ---------------------- | --------------------------------------------- | -------------------------------- | ----------------------- |
-| <code>items</code>     | The list of possible sort values.             | <code>Sort[]</code>              | <code></code>           |
-| <code>animation</code> | The transition to use for rendering the list. | <code>string \| Component</code> | <code>() => 'ul'</code> |
+| Name                                   | Description                                   | Type                             | Default                             |
+| -------------------------------------- | --------------------------------------------- | -------------------------------- | ----------------------------------- |
+| <code>animation</code>                 | The transition to use for rendering the list. | <code>string \| Component</code> | <code>() => 'ul'</code>             |
+| <code>items</code>                     | The list of possible sort values.             | <code>Sort[]</code>              | <code></code>                       |
+| <code>selectedSort</code>              |                                               | <code>Sort</code>                | <code></code>                       |
+| <code>selectedSortProvidedEvent</code> |                                               | <code>XEvent</code>              | <code>'SelectedSortProvided'</code> |
+| <code>clickedSortEvent</code>          |                                               | <code>XEvent</code>              | <code>'UserClickedASort'</code>     |
 
 ## Slots
 

package/docs/API-reference/components/{search → common/sort}/x-components.sort-picker-list.md

@@ -11,11 +11,14 @@ also allows to change the selected sort programmatically.
 
 ## Props
 
-| Name                     | Description                                   | Type                             | Default                  |
-| ------------------------ | --------------------------------------------- | -------------------------------- | ------------------------ |
-| <code>items</code>       | The list of possible sort values.             | <code>Sort[]</code>              | <code></code>            |
-| <code>animation</code>   | The transition to use for rendering the list. | <code>string \| Component</code> | <code>() => 'div'</code> |
-| <code>buttonClass</code> | Class inherited by each sort button.          | <code>string</code>              | <code></code>            |
+| Name                                   | Description                                   | Type                             | Default                             |
+| -------------------------------------- | --------------------------------------------- | -------------------------------- | ----------------------------------- |
+| <code>animation</code>                 | The transition to use for rendering the list. | <code>string \| Component</code> | <code>() => 'div'</code>            |
+| <code>items</code>                     | The list of possible sort values.             | <code>Sort[]</code>              | <code></code>                       |
+| <code>selectedSort</code>              |                                               | <code>Sort</code>                | <code></code>                       |
+| <code>selectedSortProvidedEvent</code> |                                               | <code>XEvent</code>              | <code>'SelectedSortProvided'</code> |
+| <code>clickedSortEvent</code>          |                                               | <code>XEvent</code>              | <code>'UserClickedASort'</code>     |
+| <code>buttonClass</code>               | Class inherited by each sort button.          | <code>string</code>              | <code></code>                       |
 
 ## Slots
 

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

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

package/js/components/result/base-result-add-to-cart.vue.js.map

@@ -1 +1 @@
-{"version":3,"file":"base-result-add-to-cart.vue.js","sources":["../../../../src/components/result/base-result-add-to-cart.vue"],"sourcesContent":["<template>\n  <BaseEventButton\n    :events=\"events\"\n    :metadata=\"metadata\"\n    class=\"x-result-add-to-cart xds:button\"\n    data-test=\"result-add-to-cart\"\n  >\n    <!-- @slot (Required) Button content with a text, an icon or both -->\n    <slot />\n  </BaseEventButton>\n</template>\n\n<script lang=\"ts\">\nimport type { Result } from '@empathyco/x-types'\nimport type { PropType } from 'vue'\nimport type { PropsWithType } from '../../utils/index'\nimport type { XEventsTypes } from '../../wiring/events.types'\nimport type { WireMetadata } from '../../wiring/index'\nimport { computed, defineComponent, inject } from 'vue'\nimport BaseEventButton from '../base-event-button.vue'\n\n/**\n * Renders a button with a default slot. It receives the result with the data and emits\n * {@link XEventsTypes.UserClickedResultAddToCart} to the bus on click mouse event.\n *\n * @public\n */\nexport default defineComponent({\n  components: { BaseEventButton },\n  props: {\n    /**\n     * (Required) The {@link @empathyco/x-types#Result} information.\n     *\n     * @public\n     */\n    result: {\n      type: Object as PropType<Result>,\n      required: true,\n    },\n  },\n  setup(props) {\n    /**\n     * The list of additional events to be emitted by the component when user clicks the add2cart button.\n     *\n     * @internal\n     */\n    const resultAddToCartExtraEvents = inject<PropsWithType<XEventsTypes, Result>[]>(\n      'resultAddToCartExtraEvents',\n      [],\n    )\n\n    /**\n     * The metadata to be injected in the events emitted by the component.\n     */\n    const metadata = inject<Omit<WireMetadata, 'moduleName' | 'origin' | 'location'>>(\n      'resultAddToCartExtraEventsMetadata',\n      {},\n    )\n\n    /**\n     * The events to be emitted by the button.\n     *\n     * @returns Events {@link XEventsTypes} to emit.\n     *\n     * @public\n     */\n    const events = computed(() => {\n      return resultAddToCartExtraEvents.reduce(\n        (acc, event) => {\n          acc[event] = props.result\n          return acc\n        },\n        { UserClickedResultAddToCart: props.result } as Partial<XEventsTypes>,\n      )\n    })\n\n    return {\n      events,\n      metadata,\n    }\n  },\n})\n</script>\n\n<docs lang=\"mdx\">\n## Events\n\nA list of events that the component will emit:\n\n- [`UserClickedResultAddToCart`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts):\n  the event is emitted after the user clicks the button. The event payload is the result data.\n\n## Examples\n\nRenders a button with a default slot. It receives the result with the data and emits an event\n`UserClickedResultAddToCart` to the bus on click mouse event.\n\n### Basic example\n\nThis component is a button to emit `UserClickedResultAddToCart` when clicked by the user.\n\n```vue\n<template>\n  <BaseResultAddToCart :result=\"result\">\n    <img src=\"./add-to-cart.svg\" alt=\"Add to cart\" />\n    <span>Add to cart</span>\n  </BaseResultAddToCart>\n</template>\n\n<script setup>\nimport { BaseResultAddToCart } from '@empathyco/x-components'\nconst result = {\n  id: '123',\n  name: 'Product name',\n  price: 19.99,\n  // ...other result properties\n}\n</script>\n```\n</docs>\n"],"names":["_createBlock","_renderSlot"],"mappings":";;;;;;sBACEA,WAAA,CAQkB,0BAAA,EAAA;AAAA,IAPf,MAAA,EAAQ,IAAA,CAAA,MAAA;AAAA,IACR,QAAA,EAAU,IAAA,CAAA,QAAA;AAAA,IACX,KAAA,EAAM,iCAAA;AAAA,IACN,WAAA,EAAU;AAAA,GAAA,EAAA;qBAGV,MAAQ;AAAA,MAARC,UAAA,CAAQ,IAAA,CAAA,MAAA,EAAA,SAAA;AAAA,KAAA,CAAA;;;;;;;;;"}
+{"version":3,"file":"base-result-add-to-cart.vue.js","sources":["../../../../src/components/result/base-result-add-to-cart.vue"],"sourcesContent":["<template>\n  <BaseEventButton\n    :events=\"events\"\n    :metadata=\"metadata\"\n    class=\"x-result-add-to-cart xds:button\"\n    data-test=\"result-add-to-cart\"\n  >\n    <!-- @slot (Required) Button content with a text, an icon or both -->\n    <slot />\n  </BaseEventButton>\n</template>\n\n<script lang=\"ts\">\nimport type { Result } from '@empathyco/x-types'\nimport type { PropType } from 'vue'\nimport type { PropsWithType } from '../../utils/index'\nimport type { XEventsTypes } from '../../wiring/events.types'\nimport type { WireMetadata } from '../../wiring/index'\nimport { computed, defineComponent, inject } from 'vue'\nimport BaseEventButton from '../base-event-button.vue'\n\n/**\n * Renders a button with a default slot. It receives the result with the data and emits\n * {@link XEventsTypes.UserClickedResultAddToCart} to the bus on click mouse event.\n *\n * @public\n */\nexport default defineComponent({\n  components: { BaseEventButton },\n  props: {\n    /**\n     * (Required) The {@link @empathyco/x-types#Result} information.\n     *\n     * @public\n     */\n    result: {\n      type: Object as PropType<Result>,\n      required: true,\n    },\n  },\n  setup(props) {\n    /**\n     * The list of additional events to be emitted by the component when user clicks the add2cart button.\n     *\n     * @internal\n     */\n    const resultAddToCartExtraEvents = inject<PropsWithType<XEventsTypes, Result>[]>(\n      'resultAddToCartExtraEvents',\n      [],\n    )\n\n    /**\n     * The metadata to be injected in the events emitted by the component.\n     */\n    const metadata = inject<Omit<WireMetadata, 'moduleName' | 'origin' | 'location'>>(\n      'resultAddToCartExtraEventsMetadata',\n      {},\n    )\n\n    /**\n     * The events to be emitted by the button.\n     *\n     * @returns Events {@link XEventsTypes} to emit.\n     *\n     * @public\n     */\n    const events = computed(() => {\n      return resultAddToCartExtraEvents.reduce(\n        (acc, event) => {\n          acc[event] = props.result\n          return acc\n        },\n        { UserClickedResultAddToCart: props.result } as Partial<XEventsTypes>,\n      )\n    })\n\n    return {\n      events: props.result.modelName === 'Result' ? events : {},\n      metadata,\n    }\n  },\n})\n</script>\n\n<docs lang=\"mdx\">\n## Events\n\nA list of events that the component will emit:\n\n- [`UserClickedResultAddToCart`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts):\n  the event is emitted after the user clicks the button. The event payload is the result data.\n\n## Examples\n\nRenders a button with a default slot. It receives the result with the data and emits an event\n`UserClickedResultAddToCart` to the bus on click mouse event.\n\n### Basic example\n\nThis component is a button to emit `UserClickedResultAddToCart` when clicked by the user.\n\n```vue\n<template>\n  <BaseResultAddToCart :result=\"result\">\n    <img src=\"./add-to-cart.svg\" alt=\"Add to cart\" />\n    <span>Add to cart</span>\n  </BaseResultAddToCart>\n</template>\n\n<script setup>\nimport { BaseResultAddToCart } from '@empathyco/x-components'\nconst result = {\n  id: '123',\n  name: 'Product name',\n  price: 19.99,\n  // ...other result properties\n}\n</script>\n```\n</docs>\n"],"names":["_createBlock","_renderSlot"],"mappings":";;;;;;sBACEA,WAAA,CAQkB,0BAAA,EAAA;AAAA,IAPf,MAAA,EAAQ,IAAA,CAAA,MAAA;AAAA,IACR,QAAA,EAAU,IAAA,CAAA,QAAA;AAAA,IACX,KAAA,EAAM,iCAAA;AAAA,IACN,WAAA,EAAU;AAAA,GAAA,EAAA;qBAGV,MAAQ;AAAA,MAARC,UAAA,CAAQ,IAAA,CAAA,MAAA,EAAA,SAAA;AAAA,KAAA,CAAA;;;;;;;;;"}

package/js/components/result/base-result-add-to-cart.vue2.js

@@ -45,7 +45,7 @@ var _sfc_main = defineComponent({
             }, { UserClickedResultAddToCart: props.result });
         });
         return {
-            events,
+            events: props.result.modelName === 'Result' ? events : {},
             metadata,
         };
     },

package/js/components/result/base-result-add-to-cart.vue2.js.map

@@ -1 +1 @@
-{"version":3,"file":"base-result-add-to-cart.vue2.js","sources":["../../../../src/components/result/base-result-add-to-cart.vue"],"sourcesContent":["<template>\n  <BaseEventButton\n    :events=\"events\"\n    :metadata=\"metadata\"\n    class=\"x-result-add-to-cart xds:button\"\n    data-test=\"result-add-to-cart\"\n  >\n    <!-- @slot (Required) Button content with a text, an icon or both -->\n    <slot />\n  </BaseEventButton>\n</template>\n\n<script lang=\"ts\">\nimport type { Result } from '@empathyco/x-types'\nimport type { PropType } from 'vue'\nimport type { PropsWithType } from '../../utils/index'\nimport type { XEventsTypes } from '../../wiring/events.types'\nimport type { WireMetadata } from '../../wiring/index'\nimport { computed, defineComponent, inject } from 'vue'\nimport BaseEventButton from '../base-event-button.vue'\n\n/**\n * Renders a button with a default slot. It receives the result with the data and emits\n * {@link XEventsTypes.UserClickedResultAddToCart} to the bus on click mouse event.\n *\n * @public\n */\nexport default defineComponent({\n  components: { BaseEventButton },\n  props: {\n    /**\n     * (Required) The {@link @empathyco/x-types#Result} information.\n     *\n     * @public\n     */\n    result: {\n      type: Object as PropType<Result>,\n      required: true,\n    },\n  },\n  setup(props) {\n    /**\n     * The list of additional events to be emitted by the component when user clicks the add2cart button.\n     *\n     * @internal\n     */\n    const resultAddToCartExtraEvents = inject<PropsWithType<XEventsTypes, Result>[]>(\n      'resultAddToCartExtraEvents',\n      [],\n    )\n\n    /**\n     * The metadata to be injected in the events emitted by the component.\n     */\n    const metadata = inject<Omit<WireMetadata, 'moduleName' | 'origin' | 'location'>>(\n      'resultAddToCartExtraEventsMetadata',\n      {},\n    )\n\n    /**\n     * The events to be emitted by the button.\n     *\n     * @returns Events {@link XEventsTypes} to emit.\n     *\n     * @public\n     */\n    const events = computed(() => {\n      return resultAddToCartExtraEvents.reduce(\n        (acc, event) => {\n          acc[event] = props.result\n          return acc\n        },\n        { UserClickedResultAddToCart: props.result } as Partial<XEventsTypes>,\n      )\n    })\n\n    return {\n      events,\n      metadata,\n    }\n  },\n})\n</script>\n\n<docs lang=\"mdx\">\n## Events\n\nA list of events that the component will emit:\n\n- [`UserClickedResultAddToCart`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts):\n  the event is emitted after the user clicks the button. The event payload is the result data.\n\n## Examples\n\nRenders a button with a default slot. It receives the result with the data and emits an event\n`UserClickedResultAddToCart` to the bus on click mouse event.\n\n### Basic example\n\nThis component is a button to emit `UserClickedResultAddToCart` when clicked by the user.\n\n```vue\n<template>\n  <BaseResultAddToCart :result=\"result\">\n    <img src=\"./add-to-cart.svg\" alt=\"Add to cart\" />\n    <span>Add to cart</span>\n  </BaseResultAddToCart>\n</template>\n\n<script setup>\nimport { BaseResultAddToCart } from '@empathyco/x-components'\nconst result = {\n  id: '123',\n  name: 'Product name',\n  price: 19.99,\n  // ...other result properties\n}\n</script>\n```\n</docs>\n"],"names":[],"mappings":";;;AAqBA;;;;;AAKE;AACF,gBAAe,eAAe,CAAC;IAC7B,UAAU,EAAE,EAAE,eAAc,EAAG;AAC/B,IAAA,KAAK,EAAE;AACL;;;;AAIE;AACF,QAAA,MAAM,EAAE;AACN,YAAA,IAAI,EAAE,MAA0B;AAChC,YAAA,QAAQ,EAAE,IAAI;AACf,SAAA;AACF,KAAA;AACD,IAAA,KAAK,CAAC,KAAK,EAAA;AACT;;;;AAIE;QACF,MAAM,6BAA6B,MAAM,CACvC,4BAA4B,EAC5B,EAAE,CACJ;AAEA;;AAEE;QACF,MAAM,QAAO,GAAI,MAAM,CACrB,oCAAoC,EACpC,EAAE,CACJ;AAEA;;;;;;AAME;AACF,QAAA,MAAM,MAAK,GAAI,QAAQ,CAAC,MAAI;YAC1B,OAAO,0BAA0B,CAAC,MAAM,CACtC,CAAC,GAAG,EAAE,KAAK,KAAG;AACZ,gBAAA,GAAG,CAAC,KAAK,CAAA,GAAI,KAAK,CAAC,MAAK;AACxB,gBAAA,OAAO,GAAE;YACX,CAAC,EACD,EAAE,0BAA0B,EAAE,KAAK,CAAC,MAAK,EAA4B,CACvE;AACF,QAAA,CAAC,CAAA;QAED,OAAO;YACL,MAAM;YACN,QAAQ;SACV;IACF,CAAC;AACF,CAAA,CAAA;;;;"}
+{"version":3,"file":"base-result-add-to-cart.vue2.js","sources":["../../../../src/components/result/base-result-add-to-cart.vue"],"sourcesContent":["<template>\n  <BaseEventButton\n    :events=\"events\"\n    :metadata=\"metadata\"\n    class=\"x-result-add-to-cart xds:button\"\n    data-test=\"result-add-to-cart\"\n  >\n    <!-- @slot (Required) Button content with a text, an icon or both -->\n    <slot />\n  </BaseEventButton>\n</template>\n\n<script lang=\"ts\">\nimport type { Result } from '@empathyco/x-types'\nimport type { PropType } from 'vue'\nimport type { PropsWithType } from '../../utils/index'\nimport type { XEventsTypes } from '../../wiring/events.types'\nimport type { WireMetadata } from '../../wiring/index'\nimport { computed, defineComponent, inject } from 'vue'\nimport BaseEventButton from '../base-event-button.vue'\n\n/**\n * Renders a button with a default slot. It receives the result with the data and emits\n * {@link XEventsTypes.UserClickedResultAddToCart} to the bus on click mouse event.\n *\n * @public\n */\nexport default defineComponent({\n  components: { BaseEventButton },\n  props: {\n    /**\n     * (Required) The {@link @empathyco/x-types#Result} information.\n     *\n     * @public\n     */\n    result: {\n      type: Object as PropType<Result>,\n      required: true,\n    },\n  },\n  setup(props) {\n    /**\n     * The list of additional events to be emitted by the component when user clicks the add2cart button.\n     *\n     * @internal\n     */\n    const resultAddToCartExtraEvents = inject<PropsWithType<XEventsTypes, Result>[]>(\n      'resultAddToCartExtraEvents',\n      [],\n    )\n\n    /**\n     * The metadata to be injected in the events emitted by the component.\n     */\n    const metadata = inject<Omit<WireMetadata, 'moduleName' | 'origin' | 'location'>>(\n      'resultAddToCartExtraEventsMetadata',\n      {},\n    )\n\n    /**\n     * The events to be emitted by the button.\n     *\n     * @returns Events {@link XEventsTypes} to emit.\n     *\n     * @public\n     */\n    const events = computed(() => {\n      return resultAddToCartExtraEvents.reduce(\n        (acc, event) => {\n          acc[event] = props.result\n          return acc\n        },\n        { UserClickedResultAddToCart: props.result } as Partial<XEventsTypes>,\n      )\n    })\n\n    return {\n      events: props.result.modelName === 'Result' ? events : {},\n      metadata,\n    }\n  },\n})\n</script>\n\n<docs lang=\"mdx\">\n## Events\n\nA list of events that the component will emit:\n\n- [`UserClickedResultAddToCart`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts):\n  the event is emitted after the user clicks the button. The event payload is the result data.\n\n## Examples\n\nRenders a button with a default slot. It receives the result with the data and emits an event\n`UserClickedResultAddToCart` to the bus on click mouse event.\n\n### Basic example\n\nThis component is a button to emit `UserClickedResultAddToCart` when clicked by the user.\n\n```vue\n<template>\n  <BaseResultAddToCart :result=\"result\">\n    <img src=\"./add-to-cart.svg\" alt=\"Add to cart\" />\n    <span>Add to cart</span>\n  </BaseResultAddToCart>\n</template>\n\n<script setup>\nimport { BaseResultAddToCart } from '@empathyco/x-components'\nconst result = {\n  id: '123',\n  name: 'Product name',\n  price: 19.99,\n  // ...other result properties\n}\n</script>\n```\n</docs>\n"],"names":[],"mappings":";;;AAqBA;;;;;AAKE;AACF,gBAAe,eAAe,CAAC;IAC7B,UAAU,EAAE,EAAE,eAAc,EAAG;AAC/B,IAAA,KAAK,EAAE;AACL;;;;AAIE;AACF,QAAA,MAAM,EAAE;AACN,YAAA,IAAI,EAAE,MAA0B;AAChC,YAAA,QAAQ,EAAE,IAAI;AACf,SAAA;AACF,KAAA;AACD,IAAA,KAAK,CAAC,KAAK,EAAA;AACT;;;;AAIE;QACF,MAAM,6BAA6B,MAAM,CACvC,4BAA4B,EAC5B,EAAE,CACJ;AAEA;;AAEE;QACF,MAAM,QAAO,GAAI,MAAM,CACrB,oCAAoC,EACpC,EAAE,CACJ;AAEA;;;;;;AAME;AACF,QAAA,MAAM,MAAK,GAAI,QAAQ,CAAC,MAAI;YAC1B,OAAO,0BAA0B,CAAC,MAAM,CACtC,CAAC,GAAG,EAAE,KAAK,KAAG;AACZ,gBAAA,GAAG,CAAC,KAAK,CAAA,GAAI,KAAK,CAAC,MAAK;AACxB,gBAAA,OAAO,GAAE;YACX,CAAC,EACD,EAAE,0BAA0B,EAAE,KAAK,CAAC,MAAK,EAA4B,CACvE;AACF,QAAA,CAAC,CAAA;QAED,OAAO;AACL,YAAA,MAAM,EAAE,KAAK,CAAC,MAAM,CAAC,cAAc,QAAO,GAAI,MAAK,GAAI,EAAE;YACzD,QAAQ;SACV;IACF,CAAC;AACF,CAAA,CAAA;;;;"}

package/js/components/result/base-result-link.vue.js

@@ -1,21 +1,25 @@
 import _sfc_main from './base-result-link.vue2.js';
-import { openBlock, createElementBlock, withModifiers, renderSlot } from 'vue';
+import { openBlock, createElementBlock, mergeProps, toHandlers, renderSlot } from 'vue';
 import './base-result-link.vue3.js';
 import _export_sfc from '../../_virtual/_plugin-vue_export-helper.js';
 
 const _hoisted_1 = ["href"];
 function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
-  return openBlock(), createElementBlock("a", {
+  return openBlock(), createElementBlock("a", mergeProps({
     ref: _ctx.el,
     href: _ctx.result.url,
     class: "x-result-link",
-    "data-test": "result-link",
-    onClick: _cache[0] || (_cache[0] = (...args) => _ctx.emitUserClickedAResult && _ctx.emitUserClickedAResult(...args)),
-    onContextmenu: _cache[1] || (_cache[1] = withModifiers((...args) => _ctx.emitUserClickedAResult && _ctx.emitUserClickedAResult(...args), ["right"])),
-    onMouseup: _cache[2] || (_cache[2] = withModifiers((...args) => _ctx.emitUserClickedAResult && _ctx.emitUserClickedAResult(...args), ["middle"]))
-  }, [
+    "data-test": "result-link"
+  }, toHandlers(
+    _ctx.result.modelName === "Result" ? {
+      click: _ctx.emitUserClickedAResult,
+      contextmenu: _ctx.emitUserClickedAResult,
+      auxclick: (event) => event.button === 1 && _ctx.emitUserClickedAResult()
+    } : {},
+    true
+  )), [
     renderSlot(_ctx.$slots, "default", { result: _ctx.result }, void 0, true)
-  ], 40, _hoisted_1);
+  ], 16, _hoisted_1);
 }
 var baseResultLink = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__scopeId", "data-v-4d589f60"]]);
 

package/js/components/result/base-result-link.vue.js.map

@@ -1 +1 @@
-{"version":3,"file":"base-result-link.vue.js","sources":["../../../../src/components/result/base-result-link.vue"],"sourcesContent":["<template>\n  <a\n    :ref=\"el\"\n    :href=\"result.url\"\n    class=\"x-result-link\"\n    data-test=\"result-link\"\n    @click=\"emitUserClickedAResult\"\n    @click.right=\"emitUserClickedAResult\"\n    @click.middle=\"emitUserClickedAResult\"\n  >\n    <!--\n      @slot (Required) Link content with a text, an image, another component or both\n          @binding {Result} result - Result data\n     -->\n    <slot :result=\"result\" />\n  </a>\n</template>\n\n<script lang=\"ts\">\nimport type { Result } from '@empathyco/x-types'\nimport type { PropType } from 'vue'\nimport type { PropsWithType } from '../../utils/types'\nimport type { WireMetadata } from '../../wiring'\nimport type { XEventsTypes } from '../../wiring/events.types'\nimport { defineComponent, inject, ref } from 'vue'\nimport { use$x } from '../../composables/index'\n\n/**\n * Component to be reused that renders an `<a>` wrapping the result contents.\n *\n * @remarks\n * It has the logic to emit {@link XEventsTypes.UserClickedAResult} to the bus on click mouse\n * events. Additionally, this component may be injected other events to be emitted on click\n * event, so, depending on where it's used its father component may provide this events.\n *\n * @public\n */\nexport default defineComponent({\n  props: {\n    /**\n     * (Required) The {@link @empathyco/x-types#Result} information.\n     *\n     * @public\n     */\n    result: {\n      type: Object as PropType<Result>,\n      required: true,\n    },\n  },\n  setup(props) {\n    const $x = use$x()\n\n    /**\n     * The rendered DOM element.\n     *\n     * @internal\n     */\n    const el = ref()\n\n    /**\n     * The list of additional events to be emitted by the component when user clicks the link.\n     *\n     * @internal\n     */\n    const resultClickExtraEvents = inject<PropsWithType<XEventsTypes, Result>[]>(\n      'resultClickExtraEvents',\n      [],\n    )\n\n    /**\n     * The metadata to be injected in the events emitted by the component. This component can emit\n     * have extra events so this record pairs each event to its metadata.\n     */\n    const resultLinkMetadataPerEvent = inject<\n      // TODO: Refactor this inject key to the constants when doing EMP-909\n      Partial<\n        Record<\n          PropsWithType<XEventsTypes, Result>,\n          Omit<WireMetadata, 'moduleName' | 'origin' | 'location'>\n        >\n      >\n    >('resultLinkMetadataPerEvent', {})\n\n    /**\n     * Emits the {@link XEventsTypes.UserClickedAResult} when user clicks on the result, and also\n     * additional events if have been injected in the component.\n     *\n     * @internal\n     */\n    const emitUserClickedAResult = (): void => {\n      $x.emit('UserClickedAResult', props.result, {\n        target: el.value!,\n        ...resultLinkMetadataPerEvent.UserClickedAResult,\n      })\n      resultClickExtraEvents.forEach(event => {\n        $x.emit(event, props.result, { target: el.value!, ...resultLinkMetadataPerEvent[event] })\n      })\n    }\n\n    return {\n      el,\n      emitUserClickedAResult,\n    }\n  },\n})\n</script>\n\n<style lang=\"css\" scoped>\n.x-result-link {\n  text-decoration: none;\n}\n</style>\n\n<docs lang=\"mdx\">\n## Events\n\nThis component emits the following event:\n\n- [`UserClickedAResult`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts)\n\nThe component can emit more events on click using the `resultClickExtraEvents` prop.\n\n## Examples\n\nThis component is a wrapper for the result contents (images, name, price...). It may be part of the\nsearch result page, recommendations or other section which needs to include results.\n\nAdditionally, this component may be injected other events to be emitted on click event, so,\ndepending where it's used its father component may provide these events.\n\nThe result prop is required. It will render an anchor element with the href to the result URL:\n\n```vue\n<template>\n  <BaseResultLink :result=\"result\">\n    <template #default=\"{ result }\">\n      <img :src=\"result.images[0]\" alt=\"Result image\" />\n      <span>{{ result.name }}</span>\n    </template>\n  </BaseResultLink>\n</template>\n\n<script setup>\nimport { BaseResultLink } from '@empathyco/x-components'\nconst result = {\n  name: 'Jacket',\n  url: 'https://shop.com/jacket',\n  images: ['https://shop.com/jacket.jpg'],\n}\n</script>\n```\n</docs>\n"],"names":["_createElementBlock","_withModifiers","_renderSlot"],"mappings":";;;;;;;sBACEA,kBAAA,CAcI,GAAA,EAAA;AAAA,IAbD,GAAA,EAAK,IAAA,CAAA,EAAA;AAAA,IACL,MAAM,IAAA,CAAA,MAAA,CAAO,GAAA;AAAA,IACd,KAAA,EAAM,eAAA;AAAA,IACN,WAAA,EAAU,aAAA;AAAA,IACT,SAAK,MAAA,CAAA,CAAA,CAAA,KAAA,MAAA,CAAA,CAAA,CAAA,GAAA,CAAA,GAAA,IAAA,KAAE,IAAA,CAAA,sBAAA,IAAA,IAAA,CAAA,sBAAA,CAAA,GAAA,IAAA,CAAA,CAAA;AAAA,IAAA,aAAA,EAAA,MAAA,CAAA,CAAA,CAAA,KAAA,MAAA,CAAA,CAAA,CAAA,GAAAC,aAAA,CAAA,CAAA,GAAA,IAAA,KACM,IAAA,CAAA,sBAAA,IAAA,IAAA,CAAA,sBAAA,CAAA,GAAA,IAAA,CAAA,EAAsB,CAAA,OAAA,CAAA,CAAA,CAAA;AAAA,IAAA,SAAA,EAAA,MAAA,CAAA,CAAA,CAAA,KAAA,MAAA,CAAA,CAAA,CAAA,GAAAA,aAAA,CAAA,CAAA,GAAA,IAAA,KACrB,IAAA,CAAA,sBAAA,IAAA,IAAA,CAAA,sBAAA,CAAA,GAAA,IAAA,CAAA,EAAsB,CAAA,QAAA,CAAA,CAAA;AAAA,GAAA,EAAA;IAMrCC,UAAA,CAAyB,IAAA,CAAA,MAAA,EAAA,SAAA,EAAA,EAAlB,QAAQ,IAAA,CAAA,MAAA,EAAM,EAAA,MAAA,EAAA,IAAA;AAAA,GAAA,EAAA,EAAA,EAAA,UAAA,CAAA;;;;;;"}
+{"version":3,"file":"base-result-link.vue.js","sources":["../../../../src/components/result/base-result-link.vue"],"sourcesContent":["<template>\n  <a\n    :ref=\"el\"\n    :href=\"result.url\"\n    class=\"x-result-link\"\n    data-test=\"result-link\"\n    v-on=\"\n      result.modelName === 'Result'\n        ? {\n            click: emitUserClickedAResult,\n            contextmenu: emitUserClickedAResult,\n            auxclick: (event: { button: number }) => event.button === 1 && emitUserClickedAResult(),\n          }\n        : {}\n    \"\n  >\n    <!--\n      @slot (Required) Link content with a text, an image, another component or both\n          @binding {Result} result - Result data\n     -->\n    <slot :result=\"result\" />\n  </a>\n</template>\n\n<script lang=\"ts\">\nimport type { Result } from '@empathyco/x-types'\nimport type { PropType } from 'vue'\nimport type { PropsWithType } from '../../utils/types'\nimport type { WireMetadata } from '../../wiring'\nimport type { XEventsTypes } from '../../wiring/events.types'\nimport { defineComponent, inject, ref } from 'vue'\nimport { use$x } from '../../composables/index'\n\n/**\n * Component to be reused that renders an `<a>` wrapping the result contents.\n *\n * @remarks\n * It has the logic to emit {@link XEventsTypes.UserClickedAResult} to the bus on click mouse\n * events. Additionally, this component may be injected other events to be emitted on click\n * event, so, depending on where it's used its father component may provide this events.\n *\n * @public\n */\nexport default defineComponent({\n  props: {\n    /**\n     * (Required) The {@link @empathyco/x-types#Result} information.\n     *\n     * @public\n     */\n    result: {\n      type: Object as PropType<Result>,\n      required: true,\n    },\n  },\n  setup(props) {\n    const $x = use$x()\n\n    /**\n     * The rendered DOM element.\n     *\n     * @internal\n     */\n    const el = ref()\n\n    /**\n     * The list of additional events to be emitted by the component when user clicks the link.\n     *\n     * @internal\n     */\n    const resultClickExtraEvents = inject<PropsWithType<XEventsTypes, Result>[]>(\n      'resultClickExtraEvents',\n      [],\n    )\n\n    /**\n     * The metadata to be injected in the events emitted by the component. This component can emit\n     * have extra events so this record pairs each event to its metadata.\n     */\n    const resultLinkMetadataPerEvent = inject<\n      // TODO: Refactor this inject key to the constants when doing EMP-909\n      Partial<\n        Record<\n          PropsWithType<XEventsTypes, Result>,\n          Omit<WireMetadata, 'moduleName' | 'origin' | 'location'>\n        >\n      >\n    >('resultLinkMetadataPerEvent', {})\n\n    /**\n     * Emits the {@link XEventsTypes.UserClickedAResult} when user clicks on the result, and also\n     * additional events if have been injected in the component.\n     *\n     * @internal\n     */\n    const emitUserClickedAResult = (): void => {\n      $x.emit('UserClickedAResult', props.result, {\n        target: el.value!,\n        ...resultLinkMetadataPerEvent.UserClickedAResult,\n      })\n      resultClickExtraEvents.forEach(event => {\n        $x.emit(event, props.result, { target: el.value!, ...resultLinkMetadataPerEvent[event] })\n      })\n    }\n\n    return {\n      el,\n      emitUserClickedAResult,\n    }\n  },\n})\n</script>\n\n<style lang=\"css\" scoped>\n.x-result-link {\n  text-decoration: none;\n}\n</style>\n\n<docs lang=\"mdx\">\n## Events\n\nThis component emits the following event:\n\n- [`UserClickedAResult`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts)\n\nThe component can emit more events on click using the `resultClickExtraEvents` prop.\n\n## Examples\n\nThis component is a wrapper for the result contents (images, name, price...). It may be part of the\nsearch result page, recommendations or other section which needs to include results.\n\nAdditionally, this component may be injected other events to be emitted on click event, so,\ndepending where it's used its father component may provide these events.\n\nThe result prop is required. It will render an anchor element with the href to the result URL:\n\n```vue\n<template>\n  <BaseResultLink :result=\"result\">\n    <template #default=\"{ result }\">\n      <img :src=\"result.images[0]\" alt=\"Result image\" />\n      <span>{{ result.name }}</span>\n    </template>\n  </BaseResultLink>\n</template>\n\n<script setup>\nimport { BaseResultLink } from '@empathyco/x-components'\nconst result = {\n  name: 'Jacket',\n  url: 'https://shop.com/jacket',\n  images: ['https://shop.com/jacket.jpg'],\n}\n</script>\n```\n</docs>\n"],"names":["_openBlock","_createElementBlock","_mergeProps","_toHandlers","_renderSlot"],"mappings":";;;;;;;AACE,EAAA,OAAAA,SAAA,EAAA,EAAAC,kBAAA,CAoBI,KApBJC,UAAA,CAoBI;AAAA,IAnBD,GAAA,EAAK,IAAA,CAAA,EAAA;AAAA,IACL,MAAM,IAAA,CAAA,MAAA,CAAO,GAAA;AAAA,IACd,KAAA,EAAM,eAAA;AAAA,IACN,WAAA,EAAU;AAAA,GAAA,EACVC,UAAA;AAAA,IAAa,YAAO,SAAA,KAAS,QAAA,GAAA;AAA6C,MAAA,KAAA,EAAA,IAAA,CAAA,sBAAA;AAAA,MAAA,WAAA,EAAiD,IAAA,CAAA,sBAAA;AAAA,MAAA,QAAA,EAAA,CAA+C,KAAA,KAA8B,KAAA,CAAM,MAAA,KAAM,CAAA,IAAU,IAAA,CAAA,sBAAA;AAAsB,KAAA,GAAA,EAAA;;;IAcpPC,UAAA,CAAyB,IAAA,CAAA,MAAA,EAAA,SAAA,EAAA,EAAlB,QAAQ,IAAA,CAAA,MAAA,EAAM,EAAA,MAAA,EAAA,IAAA;AAAA,GAAA,EAAA,EAAA,EAAA,UAAA,CAAA;;;;;;"}

package/js/components/result/base-result-link.vue2.js.map

@@ -1 +1 @@
-{"version":3,"file":"base-result-link.vue2.js","sources":["../../../../src/components/result/base-result-link.vue"],"sourcesContent":["<template>\n  <a\n    :ref=\"el\"\n    :href=\"result.url\"\n    class=\"x-result-link\"\n    data-test=\"result-link\"\n    @click=\"emitUserClickedAResult\"\n    @click.right=\"emitUserClickedAResult\"\n    @click.middle=\"emitUserClickedAResult\"\n  >\n    <!--\n      @slot (Required) Link content with a text, an image, another component or both\n          @binding {Result} result - Result data\n     -->\n    <slot :result=\"result\" />\n  </a>\n</template>\n\n<script lang=\"ts\">\nimport type { Result } from '@empathyco/x-types'\nimport type { PropType } from 'vue'\nimport type { PropsWithType } from '../../utils/types'\nimport type { WireMetadata } from '../../wiring'\nimport type { XEventsTypes } from '../../wiring/events.types'\nimport { defineComponent, inject, ref } from 'vue'\nimport { use$x } from '../../composables/index'\n\n/**\n * Component to be reused that renders an `<a>` wrapping the result contents.\n *\n * @remarks\n * It has the logic to emit {@link XEventsTypes.UserClickedAResult} to the bus on click mouse\n * events. Additionally, this component may be injected other events to be emitted on click\n * event, so, depending on where it's used its father component may provide this events.\n *\n * @public\n */\nexport default defineComponent({\n  props: {\n    /**\n     * (Required) The {@link @empathyco/x-types#Result} information.\n     *\n     * @public\n     */\n    result: {\n      type: Object as PropType<Result>,\n      required: true,\n    },\n  },\n  setup(props) {\n    const $x = use$x()\n\n    /**\n     * The rendered DOM element.\n     *\n     * @internal\n     */\n    const el = ref()\n\n    /**\n     * The list of additional events to be emitted by the component when user clicks the link.\n     *\n     * @internal\n     */\n    const resultClickExtraEvents = inject<PropsWithType<XEventsTypes, Result>[]>(\n      'resultClickExtraEvents',\n      [],\n    )\n\n    /**\n     * The metadata to be injected in the events emitted by the component. This component can emit\n     * have extra events so this record pairs each event to its metadata.\n     */\n    const resultLinkMetadataPerEvent = inject<\n      // TODO: Refactor this inject key to the constants when doing EMP-909\n      Partial<\n        Record<\n          PropsWithType<XEventsTypes, Result>,\n          Omit<WireMetadata, 'moduleName' | 'origin' | 'location'>\n        >\n      >\n    >('resultLinkMetadataPerEvent', {})\n\n    /**\n     * Emits the {@link XEventsTypes.UserClickedAResult} when user clicks on the result, and also\n     * additional events if have been injected in the component.\n     *\n     * @internal\n     */\n    const emitUserClickedAResult = (): void => {\n      $x.emit('UserClickedAResult', props.result, {\n        target: el.value!,\n        ...resultLinkMetadataPerEvent.UserClickedAResult,\n      })\n      resultClickExtraEvents.forEach(event => {\n        $x.emit(event, props.result, { target: el.value!, ...resultLinkMetadataPerEvent[event] })\n      })\n    }\n\n    return {\n      el,\n      emitUserClickedAResult,\n    }\n  },\n})\n</script>\n\n<style lang=\"css\" scoped>\n.x-result-link {\n  text-decoration: none;\n}\n</style>\n\n<docs lang=\"mdx\">\n## Events\n\nThis component emits the following event:\n\n- [`UserClickedAResult`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts)\n\nThe component can emit more events on click using the `resultClickExtraEvents` prop.\n\n## Examples\n\nThis component is a wrapper for the result contents (images, name, price...). It may be part of the\nsearch result page, recommendations or other section which needs to include results.\n\nAdditionally, this component may be injected other events to be emitted on click event, so,\ndepending where it's used its father component may provide these events.\n\nThe result prop is required. It will render an anchor element with the href to the result URL:\n\n```vue\n<template>\n  <BaseResultLink :result=\"result\">\n    <template #default=\"{ result }\">\n      <img :src=\"result.images[0]\" alt=\"Result image\" />\n      <span>{{ result.name }}</span>\n    </template>\n  </BaseResultLink>\n</template>\n\n<script setup>\nimport { BaseResultLink } from '@empathyco/x-components'\nconst result = {\n  name: 'Jacket',\n  url: 'https://shop.com/jacket',\n  images: ['https://shop.com/jacket.jpg'],\n}\n</script>\n```\n</docs>\n"],"names":[],"mappings":";;;;;;;;;;AA2BA;;;;;;;;;AASE;AACF,gBAAe,eAAe,CAAC;AAC7B,IAAA,KAAK,EAAE;AACL;;;;AAIE;AACF,QAAA,MAAM,EAAE;AACN,YAAA,IAAI,EAAE,MAA0B;AAChC,YAAA,QAAQ,EAAE,IAAI;AACf,SAAA;AACF,KAAA;AACD,IAAA,KAAK,CAAC,KAAK,EAAA;AACT,QAAA,MAAM,EAAC,GAAI,KAAK,EAAC;AAEjB;;;;AAIE;AACF,QAAA,MAAM,KAAK,GAAG,EAAC;AAEf;;;;AAIE;QACF,MAAM,sBAAqB,GAAI,MAAM,CACnC,wBAAwB,EACxB,EAAE,CACJ;AAEA;;;AAGE;QACF,MAAM,0BAAyB,GAAI,MAAM,CAQvC,4BAA4B,EAAE,EAAE,CAAA;AAElC;;;;;AAKE;QACF,MAAM,sBAAqB,GAAI,MAAU;YACvC,EAAE,CAAC,IAAI,CAAC,oBAAoB,EAAE,KAAK,CAAC,MAAM,EAAE;gBAC1C,MAAM,EAAE,EAAE,CAAC,KAAM;gBACjB,GAAG,0BAA0B,CAAC,kBAAkB;AACjD,aAAA,CAAA;AACD,YAAA,sBAAsB,CAAC,OAAO,CAAC,KAAI,IAAG;gBACpC,EAAE,CAAC,IAAI,CAAC,KAAK,EAAE,KAAK,CAAC,MAAM,EAAE,EAAE,MAAM,EAAE,EAAE,CAAC,KAAM,EAAE,GAAG,0BAA0B,CAAC,KAAK,GAAG,CAAA;AAC1F,YAAA,CAAC,CAAA;AACH,QAAA,CAAA;QAEA,OAAO;YACL,EAAE;YACF,sBAAsB;SACxB;IACF,CAAC;AACF,CAAA,CAAA;;;;"}
+{"version":3,"file":"base-result-link.vue2.js","sources":["../../../../src/components/result/base-result-link.vue"],"sourcesContent":["<template>\n  <a\n    :ref=\"el\"\n    :href=\"result.url\"\n    class=\"x-result-link\"\n    data-test=\"result-link\"\n    v-on=\"\n      result.modelName === 'Result'\n        ? {\n            click: emitUserClickedAResult,\n            contextmenu: emitUserClickedAResult,\n            auxclick: (event: { button: number }) => event.button === 1 && emitUserClickedAResult(),\n          }\n        : {}\n    \"\n  >\n    <!--\n      @slot (Required) Link content with a text, an image, another component or both\n          @binding {Result} result - Result data\n     -->\n    <slot :result=\"result\" />\n  </a>\n</template>\n\n<script lang=\"ts\">\nimport type { Result } from '@empathyco/x-types'\nimport type { PropType } from 'vue'\nimport type { PropsWithType } from '../../utils/types'\nimport type { WireMetadata } from '../../wiring'\nimport type { XEventsTypes } from '../../wiring/events.types'\nimport { defineComponent, inject, ref } from 'vue'\nimport { use$x } from '../../composables/index'\n\n/**\n * Component to be reused that renders an `<a>` wrapping the result contents.\n *\n * @remarks\n * It has the logic to emit {@link XEventsTypes.UserClickedAResult} to the bus on click mouse\n * events. Additionally, this component may be injected other events to be emitted on click\n * event, so, depending on where it's used its father component may provide this events.\n *\n * @public\n */\nexport default defineComponent({\n  props: {\n    /**\n     * (Required) The {@link @empathyco/x-types#Result} information.\n     *\n     * @public\n     */\n    result: {\n      type: Object as PropType<Result>,\n      required: true,\n    },\n  },\n  setup(props) {\n    const $x = use$x()\n\n    /**\n     * The rendered DOM element.\n     *\n     * @internal\n     */\n    const el = ref()\n\n    /**\n     * The list of additional events to be emitted by the component when user clicks the link.\n     *\n     * @internal\n     */\n    const resultClickExtraEvents = inject<PropsWithType<XEventsTypes, Result>[]>(\n      'resultClickExtraEvents',\n      [],\n    )\n\n    /**\n     * The metadata to be injected in the events emitted by the component. This component can emit\n     * have extra events so this record pairs each event to its metadata.\n     */\n    const resultLinkMetadataPerEvent = inject<\n      // TODO: Refactor this inject key to the constants when doing EMP-909\n      Partial<\n        Record<\n          PropsWithType<XEventsTypes, Result>,\n          Omit<WireMetadata, 'moduleName' | 'origin' | 'location'>\n        >\n      >\n    >('resultLinkMetadataPerEvent', {})\n\n    /**\n     * Emits the {@link XEventsTypes.UserClickedAResult} when user clicks on the result, and also\n     * additional events if have been injected in the component.\n     *\n     * @internal\n     */\n    const emitUserClickedAResult = (): void => {\n      $x.emit('UserClickedAResult', props.result, {\n        target: el.value!,\n        ...resultLinkMetadataPerEvent.UserClickedAResult,\n      })\n      resultClickExtraEvents.forEach(event => {\n        $x.emit(event, props.result, { target: el.value!, ...resultLinkMetadataPerEvent[event] })\n      })\n    }\n\n    return {\n      el,\n      emitUserClickedAResult,\n    }\n  },\n})\n</script>\n\n<style lang=\"css\" scoped>\n.x-result-link {\n  text-decoration: none;\n}\n</style>\n\n<docs lang=\"mdx\">\n## Events\n\nThis component emits the following event:\n\n- [`UserClickedAResult`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts)\n\nThe component can emit more events on click using the `resultClickExtraEvents` prop.\n\n## Examples\n\nThis component is a wrapper for the result contents (images, name, price...). It may be part of the\nsearch result page, recommendations or other section which needs to include results.\n\nAdditionally, this component may be injected other events to be emitted on click event, so,\ndepending where it's used its father component may provide these events.\n\nThe result prop is required. It will render an anchor element with the href to the result URL:\n\n```vue\n<template>\n  <BaseResultLink :result=\"result\">\n    <template #default=\"{ result }\">\n      <img :src=\"result.images[0]\" alt=\"Result image\" />\n      <span>{{ result.name }}</span>\n    </template>\n  </BaseResultLink>\n</template>\n\n<script setup>\nimport { BaseResultLink } from '@empathyco/x-components'\nconst result = {\n  name: 'Jacket',\n  url: 'https://shop.com/jacket',\n  images: ['https://shop.com/jacket.jpg'],\n}\n</script>\n```\n</docs>\n"],"names":[],"mappings":";;;;;;;;;;AAiCA;;;;;;;;;AASE;AACF,gBAAe,eAAe,CAAC;AAC7B,IAAA,KAAK,EAAE;AACL;;;;AAIE;AACF,QAAA,MAAM,EAAE;AACN,YAAA,IAAI,EAAE,MAA0B;AAChC,YAAA,QAAQ,EAAE,IAAI;AACf,SAAA;AACF,KAAA;AACD,IAAA,KAAK,CAAC,KAAK,EAAA;AACT,QAAA,MAAM,EAAC,GAAI,KAAK,EAAC;AAEjB;;;;AAIE;AACF,QAAA,MAAM,KAAK,GAAG,EAAC;AAEf;;;;AAIE;QACF,MAAM,sBAAqB,GAAI,MAAM,CACnC,wBAAwB,EACxB,EAAE,CACJ;AAEA;;;AAGE;QACF,MAAM,0BAAyB,GAAI,MAAM,CAQvC,4BAA4B,EAAE,EAAE,CAAA;AAElC;;;;;AAKE;QACF,MAAM,sBAAqB,GAAI,MAAU;YACvC,EAAE,CAAC,IAAI,CAAC,oBAAoB,EAAE,KAAK,CAAC,MAAM,EAAE;gBAC1C,MAAM,EAAE,EAAE,CAAC,KAAM;gBACjB,GAAG,0BAA0B,CAAC,kBAAkB;AACjD,aAAA,CAAA;AACD,YAAA,sBAAsB,CAAC,OAAO,CAAC,KAAI,IAAG;gBACpC,EAAE,CAAC,IAAI,CAAC,KAAK,EAAE,KAAK,CAAC,MAAM,EAAE,EAAE,MAAM,EAAE,EAAE,CAAC,KAAM,EAAE,GAAG,0BAA0B,CAAC,KAAK,GAAG,CAAA;AAC1F,YAAA,CAAC,CAAA;AACH,QAAA,CAAA;QAEA,OAAO;YACL,EAAE;YACF,sBAAsB;SACxB;IACF,CAAC;AACF,CAAA,CAAA;;;;"}

package/js/{x-modules/search/components → components/sort}/sort-dropdown.vue.js

@@ -1,6 +1,6 @@
 import _sfc_main from './sort-dropdown.vue2.js';
 import { resolveComponent, openBlock, createBlock, withCtx, renderSlot, normalizeProps, guardReactiveProps, createTextVNode, toDisplayString } from 'vue';
-import _export_sfc from '../../../_virtual/_plugin-vue_export-helper.js';
+import _export_sfc from '../../_virtual/_plugin-vue_export-helper.js';
 
 function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_BaseDropdown = resolveComponent("BaseDropdown");

package/js/components/sort/sort-dropdown.vue.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"sort-dropdown.vue.js","sources":["../../../../src/components/sort/sort-dropdown.vue"],"sourcesContent":["<template>\n  <BaseDropdown\n    ref=\"rootRef\"\n    :items=\"items\"\n    :model-value=\"selectedSort\"\n    :animation=\"animation\"\n    class=\"x-sort-dropdown\"\n    data-test=\"sort-dropdown\"\n    aria-label=\"Select sorting\"\n    @update:model-value=\"emitUserClickedASort\"\n  >\n    <template #toggle=\"{ isOpen, item }\">\n      <!--\n       @slot Used to render the contents of the dropdown toggle button. If not provided, it uses\n       the item slot as fallback.\n       @binding {Sort} item - The sort data to render.\n       @binding {boolean} isOpen - True if the dropdown is opened, and false if it is closed.\n      -->\n      <slot v-bind=\"{ isOpen, item }\" name=\"toggle\">{{ item }}</slot>\n    </template>\n    <template #item=\"{ item, isHighlighted, isSelected }\">\n      <!--\n        @slot (required) Used to render each one of the items content, and as fallback\n        for the toggle button content slot if it is not provided.\n        @binding {Sort} item - Sort to render\n        @binding {boolean} isHighlighted - True when the item has the focus.\n        @binding {boolean} isSelected - True when the item is selected.\n      -->\n      <slot v-bind=\"{ item, isHighlighted, isSelected }\" name=\"item\">{{ item }}</slot>\n    </template>\n  </BaseDropdown>\n</template>\n\n<script lang=\"ts\">\nimport type { Sort } from '@empathyco/x-types'\nimport type { Component, PropType } from 'vue'\nimport type { XEvent } from '../../wiring/index'\nimport { defineComponent, ref, watch } from 'vue'\nimport { use$x } from '../../composables/use-$x'\nimport BaseDropdown from '../base-dropdown.vue'\n\n/**\n * The `SortDropdown` component allows user to select the search results order. This component\n * also allows to change the selected sort programmatically.\n */\nexport default defineComponent({\n  name: 'SortDropdown',\n  components: { BaseDropdown },\n  props: {\n    /** The transition to use for opening and closing the dropdown. */\n    animation: [String, Object] as PropType<string | Component>,\n    /** The list of possible sort values. */\n    items: {\n      type: Array as PropType<Sort[]>,\n      required: true,\n    },\n    selectedSort: {\n      type: String as PropType<Sort>,\n      required: true,\n    },\n    selectedSortProvidedEvent: {\n      type: String as PropType<XEvent>,\n      default: 'SelectedSortProvided',\n    },\n    clickedSortEvent: {\n      type: String as PropType<XEvent>,\n      default: 'UserClickedASort',\n    },\n  },\n  emits: ['change'],\n  setup(props, { emit }) {\n    const $x = use$x()\n    const rootRef = ref<typeof BaseDropdown>()\n\n    watch(\n      () => props.selectedSort,\n      value => $x.emit(props.selectedSortProvidedEvent, value),\n      {\n        immediate: true,\n      },\n    )\n\n    /**\n     * Emits the events related to the selection of a sort value.\n     *\n     * @remarks `(rootRef.value as any)?.$el` because rollup-plugin-vue understands\n     * `ref<typeof BaseDropdown>` as VueConstructor which doesn't contain $el.\n     *\n     * @param sort - The selected sort.\n     */\n    function emitUserClickedASort(sort: Sort) {\n      $x.emit(props.clickedSortEvent, sort, { target: (rootRef.value as any)?.$el })\n      emit('change', sort)\n    }\n\n    return {\n      emitUserClickedASort,\n      rootRef,\n    }\n  },\n})\n</script>\n\n<docs lang=\"mdx\">\n## Sort Dropdown\n\nThe `SortDropdown` component can be used to change the way the search results are ordered.\n\nTo do so, the list of valid sort values has to be provided using the `items` prop. These are the\nvalues that can be received then in the `SearchAdapter`.\n\nThe component also optionally accepts the selected sort, which can be set using the `v-model` prop.\nThis prop allows changing programmatically the selected sort, as it will be synced with the store\nimmediately. If this prop is not provided, the first item from the `items` prop will be the one\nselected by default.\n\nThis component also allows customizing both the toggle button and each one of the possible sort\nvalues. This can be done with the `toggle` and `item` slots.\n\n## Events\n\nThis component emits 2 different events:\n\n- [`SelectedSortProvided`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts):\n  To sync the selected sort with the store state value. This event is emitted as soon as the list of\n  items is received, whenever this list changes if there is no provided value, and when the provided\n  value changes.\n- [`UserClickedASort`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts):\n  As its name suggests, the event is emitted after the user clicks one of the sort options. This does\n  not mean that the sort has changed, only that the user has clicked it.\n\n## Examples\n\n### Only providing the list of items\n\n```vue\n<template>\n  <SortDropdown :items=\"sortValues\">\n    <template #toggle=\"{ item, isOpen }\">{{ item }} {{ isOpen ? '🔼' : '🔽' }}</template>\n    <template #item=\"{ item, isHighlighted, isSelected }\">\n      <span v-if=\"isSelected\">✅</span>\n      <span v-if=\"isHighlighted\">🟢</span>\n      {{ item }}\n    </template>\n  </SortDropdown>\n</template>\n\n<script setup>\nimport { SortDropdown } from '@empathyco/x-components/search'\nimport { ref } from 'vue'\n\nconst sortValues = ref(['Relevance', 'Price asc', 'Price desc'])\n</script>\n```\n\n### Providing also the selected value\n\n```vue\n<template>\n  <SortDropdown v-model=\"selectedSort\" :items=\"sortValues\">\n    <template #toggle=\"{ item, isOpen }\">{{ item }} {{ isOpen ? '🔼' : '🔽' }}</template>\n    <template #item=\"{ item, isHighlighted, isSelected }\">\n      <span v-if=\"isSelected\">✅</span>\n      <span v-if=\"isHighlighted\">🟢</span>\n      {{ item }}\n    </template>\n  </SortDropdown>\n</template>\n\n<script setup>\nimport { SortDropdown } from '@empathyco/x-components/search'\nimport { ref } from 'vue'\n\nconst selectedSort = ref('Price asc')\nconst sortValues = ref(['Relevance', 'Price asc', 'Price desc'])\n</script>\n```\n</docs>\n"],"names":["_createBlock","_withCtx","_renderSlot","_normalizeProps","_guardReactiveProps","_createTextVNode"],"mappings":";;;;;;sBACEA,WAAA,CA6Be,uBAAA,EAAA;AAAA,IA5Bb,GAAA,EAAI,SAAA;AAAA,IACH,KAAA,EAAO,IAAA,CAAA,KAAA;AAAA,IACP,aAAA,EAAa,IAAA,CAAA,YAAA;AAAA,IACb,SAAA,EAAW,IAAA,CAAA,SAAA;AAAA,IACZ,KAAA,EAAM,iBAAA;AAAA,IACN,WAAA,EAAU,eAAA;AAAA,IACV,YAAA,EAAW,gBAAA;AAAA,IACV,qBAAA,EAAoB,IAAA,CAAA;AAAA,GAAA,EAAA;AAEV,IAAA,MAAA,EAAMC,OAAA,CAOf,CAA+D,EAP5C,MAAA,EAAQ,IAAA,EAAI,KAAA;AAAA,MAO/BC,UAAA,CAA+D,IAAA,CAAA,MAAA,EAAA,QAAA,EAAAC,cAAA,CAAAC,kBAAA,CAAA,EAA/C,MAAA,EAAQ,IAAA,MAAxB,MAA+D;AAAA,QAAAC,eAAA;0BAAd,IAAI,CAAA;AAAA,UAAA;AAAA;AAAA;AAAA,OAAA;;AAE5C,IAAA,IAAA,EAAIJ,OAAA,CAQb,CAAgF,EAR/D,IAAA,EAAM,eAAe,UAAA,EAAU,KAAA;AAAA,MAQhDC,WAAgF,IAAA,CAAA,MAAA,EAAA,MAAA,EAAAC,cAAA,CAAAC,kBAAA,CAAA,EAAhE,IAAA,EAAM,aAAA,EAAe,UAAA,MAArC,MAAgF;AAAA,QAAAC,eAAA;0BAAd,IAAI,CAAA;AAAA,UAAA;AAAA;AAAA;AAAA,OAAA;;;;;;;;;;"}

package/js/{x-modules/search/components → components/sort}/sort-dropdown.vue2.js

@@ -1,8 +1,6 @@
 import { defineComponent, ref, watch } from 'vue';
-import BaseDropdown from '../../../components/base-dropdown.vue.js';
-import { use$x } from '../../../composables/use-_x.js';
-import { useState } from '../../../composables/use-state.js';
-import { searchXModule } from '../x-module.js';
+import { use$x } from '../../composables/use-_x.js';
+import BaseDropdown from '../base-dropdown.vue.js';
 
 /**
  * The `SortDropdown` component allows user to select the search results order. This component
@@ -10,23 +8,33 @@ import { searchXModule } from '../x-module.js';
  */
 var _sfc_main = defineComponent({
     name: 'SortDropdown',
-    xModule: searchXModule.name,
     components: { BaseDropdown },
     props: {
+        /** The transition to use for opening and closing the dropdown. */
+        animation: [String, Object],
         /** The list of possible sort values. */
         items: {
             type: Array,
             required: true,
         },
-        /** The transition to use for opening and closing the dropdown. */
-        animation: [String, Object],
+        selectedSort: {
+            type: String,
+            required: true,
+        },
+        selectedSortProvidedEvent: {
+            type: String,
+            default: 'SelectedSortProvided',
+        },
+        clickedSortEvent: {
+            type: String,
+            default: 'UserClickedASort',
+        },
     },
     emits: ['change'],
-    setup(_, { emit }) {
+    setup(props, { emit }) {
         const $x = use$x();
-        const { sort: selectedSort } = useState('search');
         const rootRef = ref();
-        watch(selectedSort, (value) => $x.emit('SelectedSortProvided', value), {
+        watch(() => props.selectedSort, value => $x.emit(props.selectedSortProvidedEvent, value), {
             immediate: true,
         });
         /**
@@ -38,13 +46,12 @@ var _sfc_main = defineComponent({
          * @param sort - The selected sort.
          */
         function emitUserClickedASort(sort) {
-            $x.emit('UserClickedASort', sort, { target: rootRef.value?.$el });
+            $x.emit(props.clickedSortEvent, sort, { target: rootRef.value?.$el });
             emit('change', sort);
         }
         return {
             emitUserClickedASort,
             rootRef,
-            selectedSort,
         };
     },
 });