@empathyco/x-components 3.0.0-alpha.30 → 3.0.0-alpha.31

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 (137) hide show
  1. package/CHANGELOG.md +37 -0
  2. package/core/index.js.map +1 -1
  3. package/design-system/default-theme.css +6 -1
  4. package/design-system/full-theme.css +6 -1
  5. package/design-system/list-default.css +3 -0
  6. package/design-system/suggestion-default.css +3 -1
  7. package/docs/API-reference/api/x-components.identifierresultsactions.md +0 -1
  8. package/docs/API-reference/api/x-components.identifierresultsmutations.md +1 -0
  9. package/docs/API-reference/api/x-components.identifierresultsmutations.setparams.md +24 -0
  10. package/docs/API-reference/api/x-components.identifierresultsstate.md +1 -0
  11. package/docs/API-reference/api/x-components.identifierresultsstate.params.md +13 -0
  12. package/docs/API-reference/api/x-components.md +3 -0
  13. package/docs/API-reference/api/x-components.setconsent.md +1 -1
  14. package/docs/API-reference/api/x-components.setidentifierresultsextraparams.md +13 -0
  15. package/docs/API-reference/api/x-components.setquerytaggingdebounce.md +1 -1
  16. package/docs/API-reference/api/x-components.setsessionduration.md +1 -1
  17. package/docs/API-reference/api/x-components.taggingactions.md +7 -0
  18. package/docs/API-reference/api/x-components.taggingactions.track.md +24 -0
  19. package/docs/API-reference/api/x-components.track.md +13 -0
  20. package/docs/API-reference/api/x-components.trackwire.md +13 -0
  21. package/docs/build-search-ui/README.md +113 -0
  22. package/docs/build-search-ui/web-archetype-integration-guide.md +183 -0
  23. package/docs/build-search-ui/web-use-x-components-guide.md +170 -0
  24. package/docs/build-search-ui/web-x-components-integration-guide.md +197 -0
  25. package/docs/build-search-ui/x-architecture/README.md +133 -0
  26. package/docs/sidebar.json +1 -1
  27. package/identifier-results/index.js +1 -1
  28. package/js/index.js +3 -2
  29. package/js/index.js.map +1 -1
  30. package/js/x-modules/history-queries/components/history-query.vue.js +1 -1
  31. package/js/x-modules/history-queries/components/history-query.vue.js.map +1 -1
  32. package/js/x-modules/history-queries/components/history-query.vue_rollup-plugin-vue=script.js.map +1 -1
  33. package/js/x-modules/identifier-results/store/actions/save-query.action.js +4 -0
  34. package/js/x-modules/identifier-results/store/actions/save-query.action.js.map +1 -1
  35. package/js/x-modules/identifier-results/store/getters/identifier-results-request.getter.js +4 -8
  36. package/js/x-modules/identifier-results/store/getters/identifier-results-request.getter.js.map +1 -1
  37. package/js/x-modules/identifier-results/store/module.js +5 -3
  38. package/js/x-modules/identifier-results/store/module.js.map +1 -1
  39. package/js/x-modules/identifier-results/wiring.js +14 -2
  40. package/js/x-modules/identifier-results/wiring.js.map +1 -1
  41. package/js/x-modules/next-queries/components/next-query.vue.js +2 -1
  42. package/js/x-modules/next-queries/components/next-query.vue.js.map +1 -1
  43. package/js/x-modules/next-queries/components/next-query.vue_rollup-plugin-vue=script.js.map +1 -1
  44. package/js/x-modules/popular-searches/components/popular-search.vue.js +2 -1
  45. package/js/x-modules/popular-searches/components/popular-search.vue.js.map +1 -1
  46. package/js/x-modules/popular-searches/components/popular-search.vue_rollup-plugin-vue=script.js.map +1 -1
  47. package/js/x-modules/query-suggestions/components/query-suggestion.vue.js +2 -1
  48. package/js/x-modules/query-suggestions/components/query-suggestion.vue.js.map +1 -1
  49. package/js/x-modules/query-suggestions/components/query-suggestion.vue_rollup-plugin-vue=script.js.map +1 -1
  50. package/js/x-modules/related-tags/components/related-tag.vue.js +2 -2
  51. package/js/x-modules/related-tags/components/related-tag.vue.js.map +1 -1
  52. package/js/x-modules/related-tags/components/related-tag.vue_rollup-plugin-vue=script.js +15 -7
  53. package/js/x-modules/related-tags/components/related-tag.vue_rollup-plugin-vue=script.js.map +1 -1
  54. package/js/x-modules/search/components/partial-query-button.vue.js.map +1 -1
  55. package/js/x-modules/search/components/partial-query-button.vue_rollup-plugin-vue=script.js +14 -6
  56. package/js/x-modules/search/components/partial-query-button.vue_rollup-plugin-vue=script.js.map +1 -1
  57. package/js/x-modules/search/components/spellcheck-button.vue.js.map +1 -1
  58. package/js/x-modules/search/components/spellcheck-button.vue_rollup-plugin-vue=script.js +14 -6
  59. package/js/x-modules/search/components/spellcheck-button.vue_rollup-plugin-vue=script.js.map +1 -1
  60. package/js/x-modules/search/store/emitters.js +8 -1
  61. package/js/x-modules/search/store/emitters.js.map +1 -1
  62. package/js/x-modules/search-box/components/search-button.vue.js.map +1 -1
  63. package/js/x-modules/search-box/components/search-button.vue_rollup-plugin-vue=script.js +14 -6
  64. package/js/x-modules/search-box/components/search-button.vue_rollup-plugin-vue=script.js.map +1 -1
  65. package/js/x-modules/search-box/components/search-input.vue.js +2 -2
  66. package/js/x-modules/search-box/components/search-input.vue.js.map +1 -1
  67. package/js/x-modules/search-box/components/search-input.vue_rollup-plugin-vue=script.js +10 -9
  68. package/js/x-modules/search-box/components/search-input.vue_rollup-plugin-vue=script.js.map +1 -1
  69. package/js/x-modules/tagging/store/actions/track.action.js +43 -0
  70. package/js/x-modules/tagging/store/actions/track.action.js.map +1 -0
  71. package/js/x-modules/tagging/store/module.js +6 -2
  72. package/js/x-modules/tagging/store/module.js.map +1 -1
  73. package/js/x-modules/tagging/wiring.js +26 -2
  74. package/js/x-modules/tagging/wiring.js.map +1 -1
  75. package/js/x-modules/url/components/url-handler.vue.js.map +1 -1
  76. package/js/x-modules/url/components/url-handler.vue_rollup-plugin-vue=script.js +2 -2
  77. package/js/x-modules/url/components/url-handler.vue_rollup-plugin-vue=script.js.map +1 -1
  78. package/package.json +2 -2
  79. package/report/x-components.api.json +234 -49
  80. package/report/x-components.api.md +34 -6
  81. package/tagging/index.js +2 -1
  82. package/types/adapter/mocked-adapter.d.ts.map +1 -1
  83. package/types/x-modules/history-queries/components/history-query.vue.d.ts.map +1 -1
  84. package/types/x-modules/identifier-results/store/actions/save-query.action.d.ts.map +1 -1
  85. package/types/x-modules/identifier-results/store/getters/identifier-results-request.getter.d.ts.map +1 -1
  86. package/types/x-modules/identifier-results/store/module.d.ts.map +1 -1
  87. package/types/x-modules/identifier-results/store/types.d.ts +9 -7
  88. package/types/x-modules/identifier-results/store/types.d.ts.map +1 -1
  89. package/types/x-modules/identifier-results/wiring.d.ts +10 -1
  90. package/types/x-modules/identifier-results/wiring.d.ts.map +1 -1
  91. package/types/x-modules/next-queries/components/next-query.vue.d.ts.map +1 -1
  92. package/types/x-modules/popular-searches/components/popular-search.vue.d.ts.map +1 -1
  93. package/types/x-modules/query-suggestions/components/query-suggestion.vue.d.ts.map +1 -1
  94. package/types/x-modules/related-tags/components/related-tag.vue.d.ts +8 -0
  95. package/types/x-modules/related-tags/components/related-tag.vue.d.ts.map +1 -1
  96. package/types/x-modules/search/components/partial-query-button.vue.d.ts +8 -0
  97. package/types/x-modules/search/components/partial-query-button.vue.d.ts.map +1 -1
  98. package/types/x-modules/search/components/spellcheck-button.vue.d.ts +8 -0
  99. package/types/x-modules/search/components/spellcheck-button.vue.d.ts.map +1 -1
  100. package/types/x-modules/search/store/emitters.d.ts +4 -1
  101. package/types/x-modules/search/store/emitters.d.ts.map +1 -1
  102. package/types/x-modules/search-box/components/search-button.vue.d.ts +8 -0
  103. package/types/x-modules/search-box/components/search-button.vue.d.ts.map +1 -1
  104. package/types/x-modules/search-box/components/search-input.vue.d.ts +1 -1
  105. package/types/x-modules/search-box/components/search-input.vue.d.ts.map +1 -1
  106. package/types/x-modules/tagging/store/actions/index.d.ts +2 -0
  107. package/types/x-modules/tagging/store/actions/index.d.ts.map +1 -0
  108. package/types/x-modules/tagging/store/actions/track.action.d.ts +12 -0
  109. package/types/x-modules/tagging/store/actions/track.action.d.ts.map +1 -0
  110. package/types/x-modules/tagging/store/index.d.ts +1 -0
  111. package/types/x-modules/tagging/store/index.d.ts.map +1 -1
  112. package/types/x-modules/tagging/store/module.d.ts.map +1 -1
  113. package/types/x-modules/tagging/store/types.d.ts +7 -0
  114. package/types/x-modules/tagging/store/types.d.ts.map +1 -1
  115. package/types/x-modules/tagging/wiring.d.ts +17 -7
  116. package/types/x-modules/tagging/wiring.d.ts.map +1 -1
  117. package/docs/API-reference/api/x-components.identifierresultsactions.seturlparams.md +0 -24
  118. package/docs/css/global.scss +0 -1
  119. package/docs/css/utils/utils.scss +0 -35
  120. package/docs/css/xcomponents/clear-search-input.scss +0 -9
  121. package/docs/css/xcomponents/index.scss +0 -16
  122. package/docs/css/xcomponents/search-input.scss +0 -10
  123. package/docs/css/xcomponents/suggestions.scss +0 -19
  124. package/docs/guide/getting-started/components/clear-search-input.md +0 -98
  125. package/docs/guide/getting-started/components/live-examples.md +0 -100
  126. package/docs/guide/getting-started/components/query-suggestions.md +0 -76
  127. package/docs/guide/getting-started/components/search-button.md +0 -98
  128. package/docs/guide/getting-started/components/search-input.md +0 -105
  129. package/docs/guide/getting-started/install-xplugin.md +0 -72
  130. package/docs/guide/getting-started/use-components.md +0 -75
  131. package/docs/guide/install.md +0 -30
  132. package/docs/react-components/ReactComponents.jsx +0 -46
  133. package/docs/react-components/Utils.jsx +0 -34
  134. package/js/x-modules/identifier-results/store/actions/set-url-params.action.js +0 -17
  135. package/js/x-modules/identifier-results/store/actions/set-url-params.action.js.map +0 -1
  136. package/types/x-modules/identifier-results/store/actions/set-url-params.action.d.ts +0 -12
  137. package/types/x-modules/identifier-results/store/actions/set-url-params.action.d.ts.map +0 -1
@@ -0,0 +1,170 @@
1
+ ---
2
+ id: x-components.web-use-x-components-guide
3
+ title: Web Use X Components Guide
4
+ sidebar_label: Web Use X Components Guide
5
+ ---
6
+ ---
7
+ title: Use & configure Interface X Components in your project
8
+ tags:
9
+ - configuration
10
+ - x configuration
11
+ - x component configuration
12
+ ---
13
+
14
+ # Use and configure Interface X Components in your project
15
+
16
+ Interface X Components are like building blocks that you pick up and mix to craft your
17
+ search UI experiences. The goal of using components is to include only the components you want,
18
+ wherever you want. So, **just import the components, register, and go!**
19
+
20
+ Once you’ve installed the
21
+ [dependencies and the xPlugin](web-x-components-integration-guide.md#_1-install-the-dependencies),
22
+ you’re ready to use X Components in your project.
23
+
24
+ ## 1. Import and register the X Components
25
+
26
+ Many of the X Components are distributed into modules to make them easier to manage. So you
27
+ need to indicate from which module you’re importing each component as appropriate.
28
+
29
+ For example, the `search-box` module contains the `SearchInput`, `SearchButton`, and
30
+ `ClearSearchInput` components.
31
+
32
+ ### Import and register components from a module
33
+
34
+ When importing the components, you can register each component **locally for each Vue instance** as
35
+ you go.
36
+
37
+ ```typescript
38
+ //Import each component you'd like to use, before you register it.
39
+ import { ComponentA } from './Module1';
40
+ import { ComponentB } from './Module1';
41
+ import { ComponentC } from './Module1';
42
+
43
+ //Locally register each component.
44
+ export default {
45
+ components: {
46
+ ComponentA,
47
+ ComponentB,
48
+ ComponentC
49
+ }
50
+ // ...
51
+ };
52
+
53
+ //The components are now ready to be used inside your template.
54
+ ```
55
+
56
+ ### Import and register components globally
57
+
58
+ Alternatively, you can **globally** register components in Vue directly in the `main.js` file if you
59
+ plan on using a component more than once in your app. By registering the components globally, you
60
+ can use them in the template of any root Vue instance you create afterwards.
61
+
62
+ ::: develop Although you can register components globally, it should be done with caution as **it
63
+ may impact future performance**. Remember if you register the components globally, the entire
64
+ X Component module is loaded and registered each time this code line is run. :::
65
+
66
+ ```typescript
67
+ import { ComponentA, ComponentB, ComponentC } from './ModuleA';
68
+
69
+ Vue.component('ComponentAName', ComponentA);
70
+ Vue.component('ComponentBName', ComponentB);
71
+ Vue.component('ComponentCName', ComponentC);
72
+ ```
73
+
74
+ ## 2. Configure the X Components
75
+
76
+ You can configure some behaviors for each component to customize the search experience.
77
+
78
+ To provide different project-specific behaviors, you can use:
79
+
80
+ - **Props**: custom attributes to pass data into a component. It modifies the behavior or the
81
+ properties in a component.
82
+
83
+ ```vue
84
+ //Configure a component with props.
85
+ <SearchInput :maxLength="5" :autofocus="false" :instant="true" :instantDebounceInMs="1000" />
86
+ ```
87
+
88
+ - **Scoped slots**: a slot exposes data from a child component to create your own custom
89
+ implementation.
90
+
91
+ ```vue
92
+ //Configure a component with slots.
93
+ <ClearSearchInput>Clear</ClearSearchInput>
94
+ ```
95
+
96
+ You can pass the configuration attributes documented in the
97
+ [UI Reference](/develop-empathy-platform/ui-reference/) for the Interface&nbsp;X&nbsp;Components.
98
+
99
+ You can combine components at your ease and use resource modules such as modals, panels, and
100
+ animations. You can also use base components, i.e. standard Vue components that don’t have any
101
+ dependencies with the X&nbsp;Components. Use them as a foundation to build other components.
102
+
103
+ Your components are ready to go, but you can provide your search UI with a friendly and fancy style
104
+ and layout. For more information, see
105
+ [Design tokens](https://github.com/empathyco/x/blob/main/packages/x-components/contributing/design-system.md).
106
+
107
+ <!--If you want to support multiple languages, you can use the [x-translation](https://github.com/empathyco/x/tree/main/packages/x-translations) library to manage localization options.-->
108
+
109
+ ## Example: Using the search box components
110
+
111
+ To build your search UI, you need to provide at least a search field that allows users to input a
112
+ query. Additionally, you can include a button to trigger the search and a button to delete the input
113
+ query.
114
+
115
+ The search-box module contains these components:
116
+
117
+ - `SearchInput`
118
+ - `SearchButton`
119
+ - `ClearSearchInput`
120
+
121
+ ::: interact Learn more about the
122
+ [Search Box UI](/explore-empathy-platform/experience-search-&-discovery/search-box.md) :::
123
+
124
+ ### Importing the components from the search-box module
125
+
126
+ For this purpose, you need to import the `SearchInput`, `SearchButton`, and `ClearSearchInput`
127
+ components from the `search-box` module to the desired app component. Then, register them and
128
+ include them in the template.
129
+
130
+ First, import and locally register the components.
131
+
132
+ ```vue
133
+ //Import the components from the corresponding module.
134
+ <script>
135
+ import { SearchInput, SearchButton, ClearSearchInput } from '@empathyco/x-components/search-box';
136
+
137
+ //Locally register each component.
138
+ export default {
139
+ components: { SearchInput, SearchButton, ClearSearchInput }
140
+ };
141
+ </script>
142
+ ```
143
+
144
+ Now, you’re ready to start using the component wherever you want in your template.
145
+
146
+ ```vue
147
+ <template>
148
+ <div>
149
+ <SearchInput />
150
+ <SearchButton />
151
+ <ClearSearchInput />
152
+ </div>
153
+ </template>
154
+ ```
155
+
156
+ ### Configuring the SearchInput component
157
+
158
+ Next, you want to configure the behavior of the `SearchInput` component. Here you use the
159
+ `maxLength` prop to limit the maximum length to 20 characters.
160
+
161
+ ```vue
162
+ <SearchInput
163
+ :maxLength="20"
164
+ :autofocus="false"
165
+ :instant="true"
166
+ :instantDebounceInMs="1000"
167
+ :autocompleteKeyboardKeys="['ArrowDown']"
168
+ :autocompleteSuggestionsEvent="'NextQueriesChanged'"
169
+ />
170
+ ```
@@ -0,0 +1,197 @@
1
+ ---
2
+ id: x-components.web-x-components-integration-guide
3
+ title: Web X Components Integration Guide
4
+ sidebar_label: Web X Components Integration Guide
5
+ ---
6
+ ---
7
+ title: Integrate Interface X Components in your Vue application
8
+ tags:
9
+ - integration
10
+ - interface x components integration
11
+ - web integration
12
+ - x integration
13
+ - interface x
14
+ ---
15
+
16
+ # Integrate Interface X Components in your Vue application
17
+
18
+ In this tutorial, you’ll learn the basics to integrate the Interface&nbsp;X&nbsp;Components library
19
+ in your own project to craft enticing Vue search experiences for your shop in a matter of minutes.
20
+
21
+ ::: interact If you are looking to use the ready-to-go project Interface&nbsp;X&nbsp;Archetype as
22
+ your starting point, see
23
+ **[Integrate Interface X Archetype project](/develop-empathy-platform/build-search-ui/web-archetype-integration-guide.md)**.
24
+ :::
25
+
26
+ For this tutorial, the Empathy Search API is used, but you can use any search API. This step-by-step
27
+ guide requires a knowledge of **JavaScript** and **Vue.js**.
28
+
29
+ You can find the X&nbsp;Components library in the
30
+ [Interface X open source project in GitHub](https://github.com/empathyco/x).
31
+
32
+ ::: note Before you begin
33
+
34
+ To integrate the X&nbsp;Components in a frontend UI, you need:
35
+
36
+ - **Empathy Search API** to retrieve search data (or any other search API)
37
+ - A **search adapter** to communicate with the search API. You can use the Empathy Adapter and
38
+ configure it with the `EmpathyAdapterBuilder`
39
+
40
+ :::
41
+
42
+ ##### Steps to integrate the X&nbsp;Components in your project:
43
+
44
+ 1. Install **project dependencies**.
45
+ 2. Configure the **search adapter**.
46
+ 3. Configure the **xPlugin**.
47
+ 4. Install and **initialize the xPlugin**.
48
+
49
+ ## 1. Install the dependencies
50
+
51
+ To build your search and discovery UI, the following project dependencies are required:
52
+
53
+ - **x-components** library
54
+ ([`@empathyco/x-components`](https://github.com/empathyco/x/tree/main/packages/x-components)):
55
+ Interface&nbsp;X&nbsp;Components Vue.js library to implement out-of-the-box search UI components
56
+ in a couple of minutes.
57
+
58
+ - **x-adapter**
59
+ ([`@empathyco/x-adapter`](https://github.com/empathyco/x/tree/main/packages/search-adapter)): A
60
+ search adapter connector that tells the app how to communicate with the Empathy Search API you’re
61
+ using, translating the response into understandable information for X&nbsp;Components. If you are
62
+ not using the Empathy Search API, you need to build your own search adapter.
63
+
64
+ - **x-types**
65
+ ([`@empathyco/x-types`](https://github.com/empathyco/x/tree/main/packages/search-types)): The data
66
+ model used in the X&nbsp;Components to define types.
67
+
68
+ - **reflect-metadata**: Polyfill that allows the internal decorators of X&nbsp;Components to be
69
+ used. This is only required if you use the Empathy search adapter (`x-adapter`).
70
+
71
+ Install the project dependencies via `npm` as follows:
72
+
73
+ ```batch
74
+ //Install the dependencies via npm.
75
+ npm install --save @empathyco/x-components @empathyco/x-types @empathyco/x-adapter reflect-metadata
76
+ ```
77
+
78
+ ## 2. Configure the search adapter
79
+
80
+ ::: warning If you are using the Empathy search API and the Empathy Search Adapter (`x-adapter`),
81
+ make sure you have imported the `reflect-metadata` polyfill before executing any code of the search
82
+ adapter. :::
83
+
84
+ Next, construct the search adapter. You will need the search adapter in the
85
+ [xPlugin configuration](#_3-configure-the-xplugin).
86
+
87
+ Empathy Search Adapter is a library for making it easier to consume search APIs. The project
88
+ contains two main parts: an **implementation** to consume the Empathy Search API, and an
89
+ **interface** that you can use to build your own adapter for other APIs.
90
+
91
+ It contains a specific builder that helps you to configure the Empathy Search Adapter. If you are
92
+ using Empathy Search API, you need to only configure the values for `instance`, `language`, `scope`,
93
+ and `endpoint` properties in the `empathy-adapter.config.ts` file.
94
+
95
+ ```typescript
96
+ // Import the search adapter and metadata
97
+ import 'reflect-metadata';
98
+ import { EmpathyAdapterBuilder } from '@empathyco/x-adapter';
99
+
100
+ // Construct the EmpathyAdapterBuilder
101
+ export const adapter = new EmpathyAdapterBuilder()
102
+ .withConfiguration({ instance: 'my-instance-id' })
103
+ .setLang('es')
104
+ .setScope('demo')
105
+ .setFeatureConfig('search', { endpoint: 'http://my-search-API-url' })
106
+ .build();
107
+ ```
108
+
109
+ ::: warning If you do not use the Empathy Search API, you need to build your own adapter. :::
110
+
111
+ For more information, see
112
+ [Using the Empathy Search Adapter](https://github.com/empathyco/x/tree/main/packages/search-adapter).
113
+
114
+ ## 3. Configure the plugin
115
+
116
+ Plugins are self-contained code that usually add global-level functionality to Vue projects. They’re
117
+ specifically objects that expose an `install` method, allowing you to keep your components clear and
118
+ small.
119
+
120
+ The xPlugin is designed to connect the X&nbsp;Components to the Vue components in your project.
121
+
122
+ **Import** the xPlugin in your Vue instance.
123
+
124
+ ```typescript
125
+ import Vue from 'vue';
126
+ import { xPlugin } from '@empathyco/x-components';
127
+ import { adapter } from './my-adapter';
128
+ import { store } from './my-store';
129
+ ```
130
+
131
+ Then, **configure** the xPlugin. It has two key options you need to configure:
132
+
133
+ 1. **Adapter**: A search adapter is required to connect and communicate with the search API. Here
134
+ you’re using the `EmpathyAdapterBuilder` to communicate specifically with the Empathy Search API.
135
+ If you are not using the Empathy Search API, you need to build your own adapter. See
136
+ [Configure the search adapter](#_2-configure-the-search-adapter).
137
+
138
+ ::: develop
139
+
140
+ When using your own adapter, remember to configure the `instance`, `language`, `scope`, and
141
+ `endpoint` methods.
142
+
143
+ :::
144
+
145
+ 2. **Store**: The Vuex store. If you use a store for Vuex, you need to provide the store you’re
146
+ currently using for your project to the Vue instance.
147
+
148
+ ::: warning
149
+
150
+ If you don’t provide any parameters for the `store`, a default store is created automatically. Leave
151
+ the `store` blank **only if you’re not using any store** for Vuex.
152
+
153
+ :::
154
+
155
+ ## 4. Install and initialize the plugin
156
+
157
+ Finally, the last step is to install and initialize the xPlugin. You need to do this in the
158
+ `main.ts` or `main.js file` of the project.
159
+
160
+ ```typescript
161
+ //Initialize the plugin. Pass the search adapter and the store you use as parameters.
162
+ Vue.use(xPlugin, { adapter, store });
163
+ ```
164
+
165
+ ---
166
+
167
+ ### Next steps
168
+
169
+ Watch how our frontend Team Lead, [Iván Tajes](https://github.com/tajespasarela), integrates the
170
+ Interface&nbsp;X&nbsp;Components in a project from scratch.
171
+
172
+ <VideoContent
173
+ title="Want to learn more?"
174
+ source="/assets/media/videos/How-to-use-X-components-in-a-real-project.mp4"
175
+ poster="/assets/media/videos/How-to-use-X-components-in-a-real-project.jpeg"
176
+ :links="[
177
+ {
178
+ title:'Architecture',
179
+ path:'/develop-empathy-platform/build-search-ui/x-architecture/'
180
+ },
181
+ {
182
+ title:'UI reference',
183
+ path:'/develop-empathy-platform/ui-reference/'
184
+ }
185
+ ]">
186
+
187
+ Once you have integrated the Interface&nbsp;X&nbsp;Components in your project, you're ready to start
188
+ building your search and discovery UI:
189
+
190
+ - Change the configuration of the [X Components](web-use-x-components-guide.md) or create new ones.
191
+ - Adapt the
192
+ [design system](https://github.com/empathyco/x/blob/main/packages/x-components/contributing/design-system.md)
193
+ to your branding.
194
+
195
+ </VideoContent>
196
+
197
+ <!-- Manage [internationalization options](https://github.com/empathyco/x/tree/main/packages/x-translations) to support different languages.-->
@@ -0,0 +1,133 @@
1
+ ---
2
+ id: x-components.README
3
+ title: README
4
+ sidebar_label: README
5
+ ---
6
+ ---
7
+ title: How Interface X works
8
+ tags:
9
+ - x components
10
+ - interface x
11
+ - x architecture
12
+ - architecture
13
+ ---
14
+
15
+ # How Interface X works
16
+
17
+ <img :src="$withBase('/assets/media/interfacex-architecture.svg')" alt="Interface X architecture">
18
+
19
+ <FootNote>
20
+
21
+ Data journey: The frontend components collect user interactions or events. The wiring orchestrates
22
+ the UI events by emitting actions for the client API through the adapter. The API returns the
23
+ required data, travelling to the Vuex store through actions that can modify the app data state in
24
+ the Vuex store with mutation objects. The UI components are bound to the data state, so that they
25
+ render the new state to the user.
26
+
27
+ </FootNote>
28
+
29
+ ## Understand how the pieces work together
30
+
31
+ The Interface&nbsp;X architecture is designed into separate tiers and elements:
32
+
33
+ 1. **Presentation tier**. Mainly represented by the UI **components**, responsible for determining
34
+ how to display the data. It not only presents data in an understandable manner to users, but
35
+ also monitors user interactions, emitting events to the Interface&nbsp;X application.
36
+
37
+ Components can be customised according to client requirements, even allowing custom CSS styles.
38
+
39
+ 2. **Orchestration tier**. The x-factor in charge of orchestrating all the event wiring. When an
40
+ event is emitted, other components are listening to it to react. This behavioural connection
41
+ between components through events is the **wiring**. Then, the wiring decides what happens when
42
+ an event is emitted in the Presentation layer.
43
+
44
+ The wiring is customisable and flexible to meet client requirements. The behaviour can change
45
+ without modifying the entire application. The event-driven operators in charge of the wiring
46
+ routing logic enable different wiring configurations per event.
47
+
48
+ 3. **Business logic tier**. The heart of the app in charge of keeping all the data processing,
49
+ where:
50
+ - UI events emit **actions** for the client API. These actions can modify the state of the
51
+ store.
52
+ - The **store** holds all the app data that should be presented to the user at any given time.
53
+ It acts as a single source of truth, providing great performance and reactivity.
54
+
55
+ The Interface&nbsp;X app needs an **adapter** to handle all client API communications. The API
56
+ adapter mainly translates the related app data and use models to the client API and vice versa,
57
+ solving any incompatibility issues. It is the entry point for all external data into the
58
+ application.
59
+
60
+ The API adapter can be customised and extended to meet the client requirements. It’s a plug-in
61
+ element that can be changed and adjusted to the specific client API, even when using other search
62
+ services not based on the Empathy search API.
63
+
64
+ ::: note Architecture patterns
65
+ If you’re already experienced in the Vue universe, you’ll find the Interface&nbsp;X architecture
66
+ somewhat familiar. Although the [ViewModel layer](https://012.vuejs.org/guide/#Introduction) of the
67
+ **MVVM pattern** sprinkles traces all over the presentation tier, the Interface X architecture is
68
+ basically inspired by the
69
+ [**Flux pattern**](https://vuex.vuejs.org/#what-is-a-state-management-pattern) behind the state. As
70
+ the X&nbsp;Components emit events that dispatch actions in the business logic tier, these actions
71
+ can commit mutations to modify the state of the store.
72
+ To sum up, the design of Interface&nbsp;X takes advantage of the MVVM and Flux patterns to design,
73
+ develop, and configure each tier separately and independently. :::
74
+
75
+ ## Technical stack
76
+
77
+ - [Vue.js](https://vuejs.org/) framework
78
+ - JavaScript + [TypeScript](https://www.typescriptlang.org/) languages
79
+ - [RxJS](https://rxjs.dev/) for the wiring configuration logic
80
+
81
+ **The story so far**
82
+ Not long ago, exploring alternative options for the architecture design and technical stack became a
83
+ must. There were several design challenges that needed to be overcome to make the frontend service
84
+ easier to configure:
85
+
86
+ - Improve reusability and performance that were hindered by the logic in components and the bundle
87
+ size
88
+ - Facilitate setup by solving synchronicity and extendability problems
89
+ - Provide easier maintenance over time, reducing regression issues
90
+
91
+ After studying different approaches to build fast and reusable components, **Vue.js** (also Vue)
92
+ seemed to be the best fit for the technical requirements and the level of abstraction required.
93
+
94
+ Revamping the architecture and technical stack has helped the former frontend services to evolve
95
+ into the latest Interface&nbsp;X application. Now, all the required **attributes and design
96
+ principles** are combined to make the solution easy to implement, change, test, and reuse:
97
+
98
+ - **Flexible**. Make changes to any element without impacting the rest of the app. For example, you
99
+ can modify a visual component without impacting the business logic.
100
+ - **Customizable & extensible**. Add new custom components andor features.
101
+ - **Lightweight**. The bundle includes only the modules you want. You’ll get only the code you
102
+ really need.
103
+ - **Incremental**. The modules interact and communicate automatically with each other. The more
104
+ modules you use, the more features you get.
105
+ - **Easy-to-integrate**. Install the library as an NPM dependency in Vue and React projects.
106
+ Interface X can be used in any webpage, as long as it is integrated as an isolated search layer.
107
+
108
+ **Why Vue?**
109
+ Due to the flexibility required, using a library for the presentation layer instead of a
110
+ full-fledged framework is the best choice. Among the state-of-the-art technologies available for
111
+ building component-based UIs, Vue meets all the requirements:
112
+
113
+ - Lightweight, flexible, and stand-alone library
114
+ - Easy to learn and use with a user-friendly template syntax
115
+ - Smooth dynamic components and composition creation
116
+ - Outperformance with reactive approach, proxies, and interceptors
117
+ - Out-of-the-box solution, allowing you to focus just on developing features
118
+ - Small bundle size with no dependencies
119
+
120
+ **How does Vue meet the design challenges?**
121
+
122
+ - Stateless components. Centralised management through the Vuex library reduces the logic in
123
+ components.
124
+ - Smooth setups. Dynamic component creation helps to track the modified data and re-render only the
125
+ required components.
126
+ - Improved performance out of the box
127
+ - Seamless maintenance. Framework or library-agnostic
128
+
129
+ ::: note
130
+ Interface&nbsp;X can potentially be integrated in commerce shops built with React. In any case,
131
+ Interface&nbsp;X can be used in any webpage, as long as it is integrated as an isolated search
132
+ layer.
133
+ :::
package/docs/sidebar.json CHANGED
@@ -1 +1 @@
1
- {"API Reference":[{"Components":[{"Common":[{"Animations":["front/xcomponents/API-reference/components/common/animations/x-components.x-components.animate-width","front/xcomponents/API-reference/components/common/animations/x-components.x-components.collapse-from-top","front/xcomponents/API-reference/components/common/animations/x-components.x-components.collapse-height","front/xcomponents/API-reference/components/common/animations/x-components.x-components.collapse-width","front/xcomponents/API-reference/components/common/animations/x-components.x-components.cross-fade","front/xcomponents/API-reference/components/common/animations/x-components.x-components.fade-and-slide","front/xcomponents/API-reference/components/common/animations/x-components.x-components.staggered-fade-and-slide","front/xcomponents/API-reference/components/common/animations/x-components.x-components.translate-from-left","front/xcomponents/API-reference/components/common/animations/x-components.x-components.translate-from-right"]},{"Column Picker":["front/xcomponents/API-reference/components/common/column-picker/x-components.x-components.base-column-picker-dropdown","front/xcomponents/API-reference/components/common/column-picker/x-components.x-components.base-column-picker-list"]},{"Currency":["front/xcomponents/API-reference/components/common/currency/x-components.x-components.base-currency"]},{"Filters":[{"Labels":["front/xcomponents/API-reference/components/common/filters/labels/x-components.x-components.base-price-filter-label","front/xcomponents/API-reference/components/common/filters/labels/x-components.x-components.base-rating-filter-label"]}]},{"Icons":["front/xcomponents/API-reference/components/common/icons/x-components.x-components.arrow","front/xcomponents/API-reference/components/common/icons/x-components.x-components.bag","front/xcomponents/API-reference/components/common/icons/x-components.x-components.bar-code","front/xcomponents/API-reference/components/common/icons/x-components.x-components.barcode-tiny","front/xcomponents/API-reference/components/common/icons/x-components.x-components.cart","front/xcomponents/API-reference/components/common/icons/x-components.x-components.check-tiny","front/xcomponents/API-reference/components/common/icons/x-components.x-components.check","front/xcomponents/API-reference/components/common/icons/x-components.x-components.checkbox-card-selected","front/xcomponents/API-reference/components/common/icons/x-components.x-components.checkbox-card-unselected","front/xcomponents/API-reference/components/common/icons/x-components.x-components.checkbox-selected","front/xcomponents/API-reference/components/common/icons/x-components.x-components.checkbox-unselected","front/xcomponents/API-reference/components/common/icons/x-components.x-components.chevron-down","front/xcomponents/API-reference/components/common/icons/x-components.x-components.chevron-left","front/xcomponents/API-reference/components/common/icons/x-components.x-components.chevron-right","front/xcomponents/API-reference/components/common/icons/x-components.x-components.chevron-tiny-down","front/xcomponents/API-reference/components/common/icons/x-components.x-components.chevron-tiny-left","front/xcomponents/API-reference/components/common/icons/x-components.x-components.chevron-tiny-right","front/xcomponents/API-reference/components/common/icons/x-components.x-components.chevron-tiny-up","front/xcomponents/API-reference/components/common/icons/x-components.x-components.chevron-up","front/xcomponents/API-reference/components/common/icons/x-components.x-components.cross-tiny","front/xcomponents/API-reference/components/common/icons/x-components.x-components.cross","front/xcomponents/API-reference/components/common/icons/x-components.x-components.filters","front/xcomponents/API-reference/components/common/icons/x-components.x-components.grid-1-col","front/xcomponents/API-reference/components/common/icons/x-components.x-components.grid-2-col","front/xcomponents/API-reference/components/common/icons/x-components.x-components.hide","front/xcomponents/API-reference/components/common/icons/x-components.x-components.history-tiny","front/xcomponents/API-reference/components/common/icons/x-components.x-components.history","front/xcomponents/API-reference/components/common/icons/x-components.x-components.menu","front/xcomponents/API-reference/components/common/icons/x-components.x-components.minus-tiny","front/xcomponents/API-reference/components/common/icons/x-components.x-components.minus","front/xcomponents/API-reference/components/common/icons/x-components.x-components.nq-1","front/xcomponents/API-reference/components/common/icons/x-components.x-components.nq-2","front/xcomponents/API-reference/components/common/icons/x-components.x-components.nq-3","front/xcomponents/API-reference/components/common/icons/x-components.x-components.nq-4","front/xcomponents/API-reference/components/common/icons/x-components.x-components.plus","front/xcomponents/API-reference/components/common/icons/x-components.x-components.search-tiny","front/xcomponents/API-reference/components/common/icons/x-components.x-components.search","front/xcomponents/API-reference/components/common/icons/x-components.x-components.show","front/xcomponents/API-reference/components/common/icons/x-components.x-components.star","front/xcomponents/API-reference/components/common/icons/x-components.x-components.trash-open","front/xcomponents/API-reference/components/common/icons/x-components.x-components.trash","front/xcomponents/API-reference/components/common/icons/x-components.x-components.trending-tiny","front/xcomponents/API-reference/components/common/icons/x-components.x-components.trending","front/xcomponents/API-reference/components/common/icons/x-components.x-components.user"]},{"Layouts":["front/xcomponents/API-reference/components/common/layouts/x-components.x-components.fixed-header-and-asides-layout","front/xcomponents/API-reference/components/common/layouts/x-components.x-components.multi-column-max-width-layout","front/xcomponents/API-reference/components/common/layouts/x-components.x-components.single-column-layout"]},{"Modals":["front/xcomponents/API-reference/components/common/modals/x-components.x-components.base-events-modal-close","front/xcomponents/API-reference/components/common/modals/x-components.x-components.base-events-modal-open","front/xcomponents/API-reference/components/common/modals/x-components.x-components.base-events-modal","front/xcomponents/API-reference/components/common/modals/x-components.x-components.base-id-modal-close","front/xcomponents/API-reference/components/common/modals/x-components.x-components.base-id-modal-open","front/xcomponents/API-reference/components/common/modals/x-components.x-components.base-id-modal","front/xcomponents/API-reference/components/common/modals/x-components.x-components.base-modal"]},{"Panels":["front/xcomponents/API-reference/components/common/panels/x-components.x-components.base-header-toggle-panel","front/xcomponents/API-reference/components/common/panels/x-components.x-components.base-id-toggle-panel-button","front/xcomponents/API-reference/components/common/panels/x-components.x-components.base-id-toggle-panel","front/xcomponents/API-reference/components/common/panels/x-components.x-components.base-toggle-panel"]},{"Result":["front/xcomponents/API-reference/components/common/result/x-components.x-components.base-result-add-to-cart","front/xcomponents/API-reference/components/common/result/x-components.x-components.base-result-current-price","front/xcomponents/API-reference/components/common/result/x-components.x-components.base-result-fallback-image","front/xcomponents/API-reference/components/common/result/x-components.x-components.base-result-image","front/xcomponents/API-reference/components/common/result/x-components.x-components.base-result-link","front/xcomponents/API-reference/components/common/result/x-components.x-components.base-result-placeholder-image","front/xcomponents/API-reference/components/common/result/x-components.x-components.base-result-previous-price"]},{"Scroll":["front/xcomponents/API-reference/components/common/scroll/x-components.x-components.base-scroll"]},{"Suggestions":["front/xcomponents/API-reference/components/common/suggestions/x-components.x-components.base-suggestion","front/xcomponents/API-reference/components/common/suggestions/x-components.x-components.base-suggestions"]},"front/xcomponents/API-reference/components/common/x-components.x-components.auto-progress-bar","front/xcomponents/API-reference/components/common/x-components.x-components.base-dropdown","front/xcomponents/API-reference/components/common/x-components.x-components.base-event-button","front/xcomponents/API-reference/components/common/x-components.x-components.base-grid","front/xcomponents/API-reference/components/common/x-components.x-components.base-keyboard-navigation","front/xcomponents/API-reference/components/common/x-components.x-components.base-rating","front/xcomponents/API-reference/components/common/x-components.x-components.base-variable-column-grid","front/xcomponents/API-reference/components/common/x-components.x-components.items-list","front/xcomponents/API-reference/components/common/x-components.x-components.location-provider","front/xcomponents/API-reference/components/common/x-components.x-components.sliding-panel","front/xcomponents/API-reference/components/common/x-components.x-components.staggering-transition-group"]},{"Device":["front/xcomponents/API-reference/components/device/x-components.x-components.device-detector"]},{"Empathize":["front/xcomponents/API-reference/components/empathize/x-components.x-components.empathize"]},{"Extra Params":["front/xcomponents/API-reference/components/extra-params/x-components.x-components.extra-params","front/xcomponents/API-reference/components/extra-params/x-components.x-components.renderless-extra-param","front/xcomponents/API-reference/components/extra-params/x-components.x-components.snippet-config-extra-params"]},{"Facets":["front/xcomponents/API-reference/components/facets/x-components.x-components.clear-filters",{"Facets":["front/xcomponents/API-reference/components/facets/x-components.facets/x-components.facets-provider","front/xcomponents/API-reference/components/facets/x-components.facets/x-components.facets"]},{"Filters":["front/xcomponents/API-reference/components/facets/x-components.filters/x-components.all-filter","front/xcomponents/API-reference/components/facets/x-components.filters/x-components.base-filter","front/xcomponents/API-reference/components/facets/x-components.filters/x-components.editable-number-range-filter","front/xcomponents/API-reference/components/facets/x-components.filters/x-components.hierarchical-filter","front/xcomponents/API-reference/components/facets/x-components.filters/x-components.number-range-filter","front/xcomponents/API-reference/components/facets/x-components.filters/x-components.renderless-filter","front/xcomponents/API-reference/components/facets/x-components.filters/x-components.simple-filter"]},{"Lists":["front/xcomponents/API-reference/components/facets/x-components.lists/x-components.exclude-filters-with-no-results","front/xcomponents/API-reference/components/facets/x-components.lists/x-components.filters-list","front/xcomponents/API-reference/components/facets/x-components.lists/x-components.filters-search","front/xcomponents/API-reference/components/facets/x-components.lists/x-components.selected-filters-list","front/xcomponents/API-reference/components/facets/x-components.lists/x-components.selected-filters","front/xcomponents/API-reference/components/facets/x-components.lists/x-components.sliced-filters","front/xcomponents/API-reference/components/facets/x-components.lists/x-components.sorted-filters"]}]},{"History Queries":["front/xcomponents/API-reference/components/history-queries/x-components.x-components.clear-history-queries","front/xcomponents/API-reference/components/history-queries/x-components.x-components.history-queries","front/xcomponents/API-reference/components/history-queries/x-components.x-components.history-query","front/xcomponents/API-reference/components/history-queries/x-components.x-components.remove-history-query"]},{"Identifier Results":["front/xcomponents/API-reference/components/identifier-results/x-components.x-components.identifier-result","front/xcomponents/API-reference/components/identifier-results/x-components.x-components.identifier-results"]},{"Next Queries":["front/xcomponents/API-reference/components/next-queries/x-components.x-components.next-queries-list","front/xcomponents/API-reference/components/next-queries/x-components.x-components.next-queries","front/xcomponents/API-reference/components/next-queries/x-components.x-components.next-query"]},{"Popular Searches":["front/xcomponents/API-reference/components/popular-searches/x-components.x-components.popular-search","front/xcomponents/API-reference/components/popular-searches/x-components.x-components.popular-searches"]},{"Query Suggestions":["front/xcomponents/API-reference/components/query-suggestions/x-components.x-components.query-suggestion","front/xcomponents/API-reference/components/query-suggestions/x-components.x-components.query-suggestions"]},{"Recommendations":["front/xcomponents/API-reference/components/recommendations/x-components.x-components.recommendations"]},{"Related Tags":["front/xcomponents/API-reference/components/related-tags/x-components.x-components.related-tag","front/xcomponents/API-reference/components/related-tags/x-components.x-components.related-tags"]},{"Scroll":["front/xcomponents/API-reference/components/scroll/x-components.x-components.main-scroll-item","front/xcomponents/API-reference/components/scroll/x-components.x-components.main-scroll","front/xcomponents/API-reference/components/scroll/x-components.x-components.scroll-to-top","front/xcomponents/API-reference/components/scroll/x-components.x-components.scroll","front/xcomponents/API-reference/components/scroll/x-components.x-components.window-scroll"]},{"Search Box":["front/xcomponents/API-reference/components/search-box/x-components.x-components.clear-search-input","front/xcomponents/API-reference/components/search-box/x-components.x-components.search-button","front/xcomponents/API-reference/components/search-box/x-components.x-components.search-input"]},{"Search":["front/xcomponents/API-reference/components/search/x-components.x-components.banner","front/xcomponents/API-reference/components/search/x-components.x-components.banners-list","front/xcomponents/API-reference/components/search/x-components.x-components.partial-query-button","front/xcomponents/API-reference/components/search/x-components.x-components.partial-results-list","front/xcomponents/API-reference/components/search/x-components.x-components.promoted","front/xcomponents/API-reference/components/search/x-components.x-components.promoteds-list","front/xcomponents/API-reference/components/search/x-components.x-components.redirection","front/xcomponents/API-reference/components/search/x-components.x-components.results-list","front/xcomponents/API-reference/components/search/x-components.x-components.sort-dropdown","front/xcomponents/API-reference/components/search/x-components.x-components.sort-list","front/xcomponents/API-reference/components/search/x-components.x-components.spellcheck-button","front/xcomponents/API-reference/components/search/x-components.x-components.spellcheck"]},{"Tagging":["front/xcomponents/API-reference/components/tagging/x-components.x-components.tagging"]},{"Url":["front/xcomponents/API-reference/components/url/x-components.x-components.url-handler"]}]}],"Guide":[{"Getting Started":[{"Components":["front/xcomponents/guide/getting-started/components/x-components.clear-search-input","front/xcomponents/guide/getting-started/components/x-components.live-examples","front/xcomponents/guide/getting-started/components/x-components.query-suggestions","front/xcomponents/guide/getting-started/components/x-components.search-button","front/xcomponents/guide/getting-started/components/x-components.search-input"]},"front/xcomponents/guide/getting-started/x-components.install-xplugin","front/xcomponents/guide/getting-started/x-components.use-components"]},"front/xcomponents/guide/x-components.install"]}
1
+ {"API Reference":[{"Components":[{"Common":[{"Animations":["front/xcomponents/API-reference/components/common/animations/x-components.x-components.animate-width","front/xcomponents/API-reference/components/common/animations/x-components.x-components.collapse-from-top","front/xcomponents/API-reference/components/common/animations/x-components.x-components.collapse-height","front/xcomponents/API-reference/components/common/animations/x-components.x-components.collapse-width","front/xcomponents/API-reference/components/common/animations/x-components.x-components.cross-fade","front/xcomponents/API-reference/components/common/animations/x-components.x-components.fade-and-slide","front/xcomponents/API-reference/components/common/animations/x-components.x-components.staggered-fade-and-slide","front/xcomponents/API-reference/components/common/animations/x-components.x-components.translate-from-left","front/xcomponents/API-reference/components/common/animations/x-components.x-components.translate-from-right"]},{"Column Picker":["front/xcomponents/API-reference/components/common/column-picker/x-components.x-components.base-column-picker-dropdown","front/xcomponents/API-reference/components/common/column-picker/x-components.x-components.base-column-picker-list"]},{"Currency":["front/xcomponents/API-reference/components/common/currency/x-components.x-components.base-currency"]},{"Filters":[{"Labels":["front/xcomponents/API-reference/components/common/filters/labels/x-components.x-components.base-price-filter-label","front/xcomponents/API-reference/components/common/filters/labels/x-components.x-components.base-rating-filter-label"]}]},{"Icons":["front/xcomponents/API-reference/components/common/icons/x-components.x-components.arrow","front/xcomponents/API-reference/components/common/icons/x-components.x-components.bag","front/xcomponents/API-reference/components/common/icons/x-components.x-components.bar-code","front/xcomponents/API-reference/components/common/icons/x-components.x-components.barcode-tiny","front/xcomponents/API-reference/components/common/icons/x-components.x-components.cart","front/xcomponents/API-reference/components/common/icons/x-components.x-components.check-tiny","front/xcomponents/API-reference/components/common/icons/x-components.x-components.check","front/xcomponents/API-reference/components/common/icons/x-components.x-components.checkbox-card-selected","front/xcomponents/API-reference/components/common/icons/x-components.x-components.checkbox-card-unselected","front/xcomponents/API-reference/components/common/icons/x-components.x-components.checkbox-selected","front/xcomponents/API-reference/components/common/icons/x-components.x-components.checkbox-unselected","front/xcomponents/API-reference/components/common/icons/x-components.x-components.chevron-down","front/xcomponents/API-reference/components/common/icons/x-components.x-components.chevron-left","front/xcomponents/API-reference/components/common/icons/x-components.x-components.chevron-right","front/xcomponents/API-reference/components/common/icons/x-components.x-components.chevron-tiny-down","front/xcomponents/API-reference/components/common/icons/x-components.x-components.chevron-tiny-left","front/xcomponents/API-reference/components/common/icons/x-components.x-components.chevron-tiny-right","front/xcomponents/API-reference/components/common/icons/x-components.x-components.chevron-tiny-up","front/xcomponents/API-reference/components/common/icons/x-components.x-components.chevron-up","front/xcomponents/API-reference/components/common/icons/x-components.x-components.cross-tiny","front/xcomponents/API-reference/components/common/icons/x-components.x-components.cross","front/xcomponents/API-reference/components/common/icons/x-components.x-components.filters","front/xcomponents/API-reference/components/common/icons/x-components.x-components.grid-1-col","front/xcomponents/API-reference/components/common/icons/x-components.x-components.grid-2-col","front/xcomponents/API-reference/components/common/icons/x-components.x-components.hide","front/xcomponents/API-reference/components/common/icons/x-components.x-components.history-tiny","front/xcomponents/API-reference/components/common/icons/x-components.x-components.history","front/xcomponents/API-reference/components/common/icons/x-components.x-components.menu","front/xcomponents/API-reference/components/common/icons/x-components.x-components.minus-tiny","front/xcomponents/API-reference/components/common/icons/x-components.x-components.minus","front/xcomponents/API-reference/components/common/icons/x-components.x-components.nq-1","front/xcomponents/API-reference/components/common/icons/x-components.x-components.nq-2","front/xcomponents/API-reference/components/common/icons/x-components.x-components.nq-3","front/xcomponents/API-reference/components/common/icons/x-components.x-components.nq-4","front/xcomponents/API-reference/components/common/icons/x-components.x-components.plus","front/xcomponents/API-reference/components/common/icons/x-components.x-components.search-tiny","front/xcomponents/API-reference/components/common/icons/x-components.x-components.search","front/xcomponents/API-reference/components/common/icons/x-components.x-components.show","front/xcomponents/API-reference/components/common/icons/x-components.x-components.star","front/xcomponents/API-reference/components/common/icons/x-components.x-components.trash-open","front/xcomponents/API-reference/components/common/icons/x-components.x-components.trash","front/xcomponents/API-reference/components/common/icons/x-components.x-components.trending-tiny","front/xcomponents/API-reference/components/common/icons/x-components.x-components.trending","front/xcomponents/API-reference/components/common/icons/x-components.x-components.user"]},{"Layouts":["front/xcomponents/API-reference/components/common/layouts/x-components.x-components.fixed-header-and-asides-layout","front/xcomponents/API-reference/components/common/layouts/x-components.x-components.multi-column-max-width-layout","front/xcomponents/API-reference/components/common/layouts/x-components.x-components.single-column-layout"]},{"Modals":["front/xcomponents/API-reference/components/common/modals/x-components.x-components.base-events-modal-close","front/xcomponents/API-reference/components/common/modals/x-components.x-components.base-events-modal-open","front/xcomponents/API-reference/components/common/modals/x-components.x-components.base-events-modal","front/xcomponents/API-reference/components/common/modals/x-components.x-components.base-id-modal-close","front/xcomponents/API-reference/components/common/modals/x-components.x-components.base-id-modal-open","front/xcomponents/API-reference/components/common/modals/x-components.x-components.base-id-modal","front/xcomponents/API-reference/components/common/modals/x-components.x-components.base-modal"]},{"Panels":["front/xcomponents/API-reference/components/common/panels/x-components.x-components.base-header-toggle-panel","front/xcomponents/API-reference/components/common/panels/x-components.x-components.base-id-toggle-panel-button","front/xcomponents/API-reference/components/common/panels/x-components.x-components.base-id-toggle-panel","front/xcomponents/API-reference/components/common/panels/x-components.x-components.base-toggle-panel"]},{"Result":["front/xcomponents/API-reference/components/common/result/x-components.x-components.base-result-add-to-cart","front/xcomponents/API-reference/components/common/result/x-components.x-components.base-result-current-price","front/xcomponents/API-reference/components/common/result/x-components.x-components.base-result-fallback-image","front/xcomponents/API-reference/components/common/result/x-components.x-components.base-result-image","front/xcomponents/API-reference/components/common/result/x-components.x-components.base-result-link","front/xcomponents/API-reference/components/common/result/x-components.x-components.base-result-placeholder-image","front/xcomponents/API-reference/components/common/result/x-components.x-components.base-result-previous-price"]},{"Scroll":["front/xcomponents/API-reference/components/common/scroll/x-components.x-components.base-scroll"]},{"Suggestions":["front/xcomponents/API-reference/components/common/suggestions/x-components.x-components.base-suggestion","front/xcomponents/API-reference/components/common/suggestions/x-components.x-components.base-suggestions"]},"front/xcomponents/API-reference/components/common/x-components.x-components.auto-progress-bar","front/xcomponents/API-reference/components/common/x-components.x-components.base-dropdown","front/xcomponents/API-reference/components/common/x-components.x-components.base-event-button","front/xcomponents/API-reference/components/common/x-components.x-components.base-grid","front/xcomponents/API-reference/components/common/x-components.x-components.base-keyboard-navigation","front/xcomponents/API-reference/components/common/x-components.x-components.base-rating","front/xcomponents/API-reference/components/common/x-components.x-components.base-variable-column-grid","front/xcomponents/API-reference/components/common/x-components.x-components.items-list","front/xcomponents/API-reference/components/common/x-components.x-components.location-provider","front/xcomponents/API-reference/components/common/x-components.x-components.sliding-panel","front/xcomponents/API-reference/components/common/x-components.x-components.staggering-transition-group"]},{"Device":["front/xcomponents/API-reference/components/device/x-components.x-components.device-detector"]},{"Empathize":["front/xcomponents/API-reference/components/empathize/x-components.x-components.empathize"]},{"Extra Params":["front/xcomponents/API-reference/components/extra-params/x-components.x-components.extra-params","front/xcomponents/API-reference/components/extra-params/x-components.x-components.renderless-extra-param","front/xcomponents/API-reference/components/extra-params/x-components.x-components.snippet-config-extra-params"]},{"Facets":["front/xcomponents/API-reference/components/facets/x-components.x-components.clear-filters",{"Facets":["front/xcomponents/API-reference/components/facets/x-components.facets/x-components.facets-provider","front/xcomponents/API-reference/components/facets/x-components.facets/x-components.facets"]},{"Filters":["front/xcomponents/API-reference/components/facets/x-components.filters/x-components.all-filter","front/xcomponents/API-reference/components/facets/x-components.filters/x-components.base-filter","front/xcomponents/API-reference/components/facets/x-components.filters/x-components.editable-number-range-filter","front/xcomponents/API-reference/components/facets/x-components.filters/x-components.hierarchical-filter","front/xcomponents/API-reference/components/facets/x-components.filters/x-components.number-range-filter","front/xcomponents/API-reference/components/facets/x-components.filters/x-components.renderless-filter","front/xcomponents/API-reference/components/facets/x-components.filters/x-components.simple-filter"]},{"Lists":["front/xcomponents/API-reference/components/facets/x-components.lists/x-components.exclude-filters-with-no-results","front/xcomponents/API-reference/components/facets/x-components.lists/x-components.filters-list","front/xcomponents/API-reference/components/facets/x-components.lists/x-components.filters-search","front/xcomponents/API-reference/components/facets/x-components.lists/x-components.selected-filters-list","front/xcomponents/API-reference/components/facets/x-components.lists/x-components.selected-filters","front/xcomponents/API-reference/components/facets/x-components.lists/x-components.sliced-filters","front/xcomponents/API-reference/components/facets/x-components.lists/x-components.sorted-filters"]}]},{"History Queries":["front/xcomponents/API-reference/components/history-queries/x-components.x-components.clear-history-queries","front/xcomponents/API-reference/components/history-queries/x-components.x-components.history-queries","front/xcomponents/API-reference/components/history-queries/x-components.x-components.history-query","front/xcomponents/API-reference/components/history-queries/x-components.x-components.remove-history-query"]},{"Identifier Results":["front/xcomponents/API-reference/components/identifier-results/x-components.x-components.identifier-result","front/xcomponents/API-reference/components/identifier-results/x-components.x-components.identifier-results"]},{"Next Queries":["front/xcomponents/API-reference/components/next-queries/x-components.x-components.next-queries-list","front/xcomponents/API-reference/components/next-queries/x-components.x-components.next-queries","front/xcomponents/API-reference/components/next-queries/x-components.x-components.next-query"]},{"Popular Searches":["front/xcomponents/API-reference/components/popular-searches/x-components.x-components.popular-search","front/xcomponents/API-reference/components/popular-searches/x-components.x-components.popular-searches"]},{"Query Suggestions":["front/xcomponents/API-reference/components/query-suggestions/x-components.x-components.query-suggestion","front/xcomponents/API-reference/components/query-suggestions/x-components.x-components.query-suggestions"]},{"Recommendations":["front/xcomponents/API-reference/components/recommendations/x-components.x-components.recommendations"]},{"Related Tags":["front/xcomponents/API-reference/components/related-tags/x-components.x-components.related-tag","front/xcomponents/API-reference/components/related-tags/x-components.x-components.related-tags"]},{"Scroll":["front/xcomponents/API-reference/components/scroll/x-components.x-components.main-scroll-item","front/xcomponents/API-reference/components/scroll/x-components.x-components.main-scroll","front/xcomponents/API-reference/components/scroll/x-components.x-components.scroll-to-top","front/xcomponents/API-reference/components/scroll/x-components.x-components.scroll","front/xcomponents/API-reference/components/scroll/x-components.x-components.window-scroll"]},{"Search Box":["front/xcomponents/API-reference/components/search-box/x-components.x-components.clear-search-input","front/xcomponents/API-reference/components/search-box/x-components.x-components.search-button","front/xcomponents/API-reference/components/search-box/x-components.x-components.search-input"]},{"Search":["front/xcomponents/API-reference/components/search/x-components.x-components.banner","front/xcomponents/API-reference/components/search/x-components.x-components.banners-list","front/xcomponents/API-reference/components/search/x-components.x-components.partial-query-button","front/xcomponents/API-reference/components/search/x-components.x-components.partial-results-list","front/xcomponents/API-reference/components/search/x-components.x-components.promoted","front/xcomponents/API-reference/components/search/x-components.x-components.promoteds-list","front/xcomponents/API-reference/components/search/x-components.x-components.redirection","front/xcomponents/API-reference/components/search/x-components.x-components.results-list","front/xcomponents/API-reference/components/search/x-components.x-components.sort-dropdown","front/xcomponents/API-reference/components/search/x-components.x-components.sort-list","front/xcomponents/API-reference/components/search/x-components.x-components.spellcheck-button","front/xcomponents/API-reference/components/search/x-components.x-components.spellcheck"]},{"Tagging":["front/xcomponents/API-reference/components/tagging/x-components.x-components.tagging"]},{"Url":["front/xcomponents/API-reference/components/url/x-components.x-components.url-handler"]}]}],"Build Search Ui":["front/xcomponents/build-search-ui/x-components.README","front/xcomponents/build-search-ui/x-components.web-archetype-integration-guide","front/xcomponents/build-search-ui/x-components.web-use-x-components-guide","front/xcomponents/build-search-ui/x-components.web-x-components-integration-guide",{"X Architecture":["front/xcomponents/build-search-ui/x-architecture/x-components.README"]}]}
@@ -7,7 +7,7 @@ export { identifierHighlightRegexp } from '../js/x-modules/identifier-results/st
7
7
  export { identifierResultsRequest } from '../js/x-modules/identifier-results/store/getters/identifier-results-request.getter.js';
8
8
  export { identifierResultsXStoreModule } from '../js/x-modules/identifier-results/store/module.js';
9
9
  export { identifierResultsEmitters } from '../js/x-modules/identifier-results/store/emitters.js';
10
- export { cancelFetchAndSaveIdentifierResultsWire, clearIdentifierResultsQuery, fetchAndSaveIdentifierResultsWire, identifierResultsWiring, saveIdentifierResultsOriginWire, setIdentifierResultsQuery } from '../js/x-modules/identifier-results/wiring.js';
10
+ export { cancelFetchAndSaveIdentifierResultsWire, clearIdentifierResultsQuery, fetchAndSaveIdentifierResultsWire, identifierResultsWiring, saveIdentifierResultsOriginWire, setIdentifierResultsExtraParams, setIdentifierResultsQuery } from '../js/x-modules/identifier-results/wiring.js';
11
11
  export { identifierResultsXModule } from '../js/x-modules/identifier-results/x-module.js';
12
12
  export { default as IdentifierResult } from '../js/x-modules/identifier-results/components/identifier-result.vue.js';
13
13
  export { default as IdentifierResults } from '../js/x-modules/identifier-results/components/identifier-results.vue.js';
package/js/index.js CHANGED
@@ -220,7 +220,7 @@ export { identifierHighlightRegexp } from './x-modules/identifier-results/store/
220
220
  export { identifierResultsRequest } from './x-modules/identifier-results/store/getters/identifier-results-request.getter.js';
221
221
  export { identifierResultsXStoreModule } from './x-modules/identifier-results/store/module.js';
222
222
  export { identifierResultsEmitters } from './x-modules/identifier-results/store/emitters.js';
223
- export { cancelFetchAndSaveIdentifierResultsWire, clearIdentifierResultsQuery, fetchAndSaveIdentifierResultsWire, identifierResultsWiring, saveIdentifierResultsOriginWire, setIdentifierResultsQuery } from './x-modules/identifier-results/wiring.js';
223
+ export { cancelFetchAndSaveIdentifierResultsWire, clearIdentifierResultsQuery, fetchAndSaveIdentifierResultsWire, identifierResultsWiring, saveIdentifierResultsOriginWire, setIdentifierResultsExtraParams, setIdentifierResultsQuery } from './x-modules/identifier-results/wiring.js';
224
224
  export { identifierResultsXModule } from './x-modules/identifier-results/x-module.js';
225
225
  export { default as IdentifierResult } from './x-modules/identifier-results/components/identifier-result.vue.js';
226
226
  export { default as IdentifierResults } from './x-modules/identifier-results/components/identifier-results.vue.js';
@@ -308,9 +308,10 @@ export { default as ClearSearchInput } from './x-modules/search-box/components/c
308
308
  export { default as SearchButton } from './x-modules/search-box/components/search-button.vue.js';
309
309
  export { default as SearchInput } from './x-modules/search-box/components/search-input.vue.js';
310
310
  export { DefaultSessionService } from './x-modules/tagging/service/session.service.js';
311
+ export { track } from './x-modules/tagging/store/actions/track.action.js';
311
312
  export { taggingXStoreModule } from './x-modules/tagging/store/module.js';
312
313
  export { taggingEmitters } from './x-modules/tagging/store/emitters.js';
313
- export { setConsent, setQueryTaggingDebounce, setSessionDuration, taggingWiring } from './x-modules/tagging/wiring.js';
314
+ export { setConsent, setQueryTaggingDebounce, setSessionDuration, taggingWiring, trackWire } from './x-modules/tagging/wiring.js';
314
315
  export { taggingXModule } from './x-modules/tagging/x-module.js';
315
316
  export { urlXStoreModule } from './x-modules/url/store/module.js';
316
317
  export { replaceableParams, urlEmitters } from './x-modules/url/store/emitters.js';
package/js/index.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
1
+ {"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
@@ -18,7 +18,7 @@ var __vue_render__ = function() {
18
18
  _vm._b(
19
19
  {
20
20
  staticClass: "x-history-query__suggestion",
21
- attrs: { "data-test": "history-query" },
21
+ attrs: { "data-test": "history-query", feature: "history_query" },
22
22
  scopedSlots: _vm._u(
23
23
  [
24
24
  {