@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.
- package/CHANGELOG.md +37 -0
- package/core/index.js.map +1 -1
- package/design-system/default-theme.css +6 -1
- package/design-system/full-theme.css +6 -1
- package/design-system/list-default.css +3 -0
- package/design-system/suggestion-default.css +3 -1
- package/docs/API-reference/api/x-components.identifierresultsactions.md +0 -1
- package/docs/API-reference/api/x-components.identifierresultsmutations.md +1 -0
- package/docs/API-reference/api/x-components.identifierresultsmutations.setparams.md +24 -0
- package/docs/API-reference/api/x-components.identifierresultsstate.md +1 -0
- package/docs/API-reference/api/x-components.identifierresultsstate.params.md +13 -0
- package/docs/API-reference/api/x-components.md +3 -0
- package/docs/API-reference/api/x-components.setconsent.md +1 -1
- package/docs/API-reference/api/x-components.setidentifierresultsextraparams.md +13 -0
- package/docs/API-reference/api/x-components.setquerytaggingdebounce.md +1 -1
- package/docs/API-reference/api/x-components.setsessionduration.md +1 -1
- package/docs/API-reference/api/x-components.taggingactions.md +7 -0
- package/docs/API-reference/api/x-components.taggingactions.track.md +24 -0
- package/docs/API-reference/api/x-components.track.md +13 -0
- package/docs/API-reference/api/x-components.trackwire.md +13 -0
- package/docs/build-search-ui/README.md +113 -0
- package/docs/build-search-ui/web-archetype-integration-guide.md +183 -0
- package/docs/build-search-ui/web-use-x-components-guide.md +170 -0
- package/docs/build-search-ui/web-x-components-integration-guide.md +197 -0
- package/docs/build-search-ui/x-architecture/README.md +133 -0
- package/docs/sidebar.json +1 -1
- package/identifier-results/index.js +1 -1
- package/js/index.js +3 -2
- package/js/index.js.map +1 -1
- package/js/x-modules/history-queries/components/history-query.vue.js +1 -1
- package/js/x-modules/history-queries/components/history-query.vue.js.map +1 -1
- package/js/x-modules/history-queries/components/history-query.vue_rollup-plugin-vue=script.js.map +1 -1
- package/js/x-modules/identifier-results/store/actions/save-query.action.js +4 -0
- package/js/x-modules/identifier-results/store/actions/save-query.action.js.map +1 -1
- package/js/x-modules/identifier-results/store/getters/identifier-results-request.getter.js +4 -8
- package/js/x-modules/identifier-results/store/getters/identifier-results-request.getter.js.map +1 -1
- package/js/x-modules/identifier-results/store/module.js +5 -3
- package/js/x-modules/identifier-results/store/module.js.map +1 -1
- package/js/x-modules/identifier-results/wiring.js +14 -2
- package/js/x-modules/identifier-results/wiring.js.map +1 -1
- package/js/x-modules/next-queries/components/next-query.vue.js +2 -1
- package/js/x-modules/next-queries/components/next-query.vue.js.map +1 -1
- package/js/x-modules/next-queries/components/next-query.vue_rollup-plugin-vue=script.js.map +1 -1
- package/js/x-modules/popular-searches/components/popular-search.vue.js +2 -1
- package/js/x-modules/popular-searches/components/popular-search.vue.js.map +1 -1
- package/js/x-modules/popular-searches/components/popular-search.vue_rollup-plugin-vue=script.js.map +1 -1
- package/js/x-modules/query-suggestions/components/query-suggestion.vue.js +2 -1
- package/js/x-modules/query-suggestions/components/query-suggestion.vue.js.map +1 -1
- package/js/x-modules/query-suggestions/components/query-suggestion.vue_rollup-plugin-vue=script.js.map +1 -1
- package/js/x-modules/related-tags/components/related-tag.vue.js +2 -2
- package/js/x-modules/related-tags/components/related-tag.vue.js.map +1 -1
- package/js/x-modules/related-tags/components/related-tag.vue_rollup-plugin-vue=script.js +15 -7
- package/js/x-modules/related-tags/components/related-tag.vue_rollup-plugin-vue=script.js.map +1 -1
- package/js/x-modules/search/components/partial-query-button.vue.js.map +1 -1
- package/js/x-modules/search/components/partial-query-button.vue_rollup-plugin-vue=script.js +14 -6
- package/js/x-modules/search/components/partial-query-button.vue_rollup-plugin-vue=script.js.map +1 -1
- package/js/x-modules/search/components/spellcheck-button.vue.js.map +1 -1
- package/js/x-modules/search/components/spellcheck-button.vue_rollup-plugin-vue=script.js +14 -6
- package/js/x-modules/search/components/spellcheck-button.vue_rollup-plugin-vue=script.js.map +1 -1
- package/js/x-modules/search/store/emitters.js +8 -1
- package/js/x-modules/search/store/emitters.js.map +1 -1
- package/js/x-modules/search-box/components/search-button.vue.js.map +1 -1
- package/js/x-modules/search-box/components/search-button.vue_rollup-plugin-vue=script.js +14 -6
- package/js/x-modules/search-box/components/search-button.vue_rollup-plugin-vue=script.js.map +1 -1
- package/js/x-modules/search-box/components/search-input.vue.js +2 -2
- package/js/x-modules/search-box/components/search-input.vue.js.map +1 -1
- package/js/x-modules/search-box/components/search-input.vue_rollup-plugin-vue=script.js +10 -9
- package/js/x-modules/search-box/components/search-input.vue_rollup-plugin-vue=script.js.map +1 -1
- package/js/x-modules/tagging/store/actions/track.action.js +43 -0
- package/js/x-modules/tagging/store/actions/track.action.js.map +1 -0
- package/js/x-modules/tagging/store/module.js +6 -2
- package/js/x-modules/tagging/store/module.js.map +1 -1
- package/js/x-modules/tagging/wiring.js +26 -2
- package/js/x-modules/tagging/wiring.js.map +1 -1
- package/js/x-modules/url/components/url-handler.vue.js.map +1 -1
- package/js/x-modules/url/components/url-handler.vue_rollup-plugin-vue=script.js +2 -2
- package/js/x-modules/url/components/url-handler.vue_rollup-plugin-vue=script.js.map +1 -1
- package/package.json +2 -2
- package/report/x-components.api.json +234 -49
- package/report/x-components.api.md +34 -6
- package/tagging/index.js +2 -1
- package/types/adapter/mocked-adapter.d.ts.map +1 -1
- package/types/x-modules/history-queries/components/history-query.vue.d.ts.map +1 -1
- package/types/x-modules/identifier-results/store/actions/save-query.action.d.ts.map +1 -1
- package/types/x-modules/identifier-results/store/getters/identifier-results-request.getter.d.ts.map +1 -1
- package/types/x-modules/identifier-results/store/module.d.ts.map +1 -1
- package/types/x-modules/identifier-results/store/types.d.ts +9 -7
- package/types/x-modules/identifier-results/store/types.d.ts.map +1 -1
- package/types/x-modules/identifier-results/wiring.d.ts +10 -1
- package/types/x-modules/identifier-results/wiring.d.ts.map +1 -1
- package/types/x-modules/next-queries/components/next-query.vue.d.ts.map +1 -1
- package/types/x-modules/popular-searches/components/popular-search.vue.d.ts.map +1 -1
- package/types/x-modules/query-suggestions/components/query-suggestion.vue.d.ts.map +1 -1
- package/types/x-modules/related-tags/components/related-tag.vue.d.ts +8 -0
- package/types/x-modules/related-tags/components/related-tag.vue.d.ts.map +1 -1
- package/types/x-modules/search/components/partial-query-button.vue.d.ts +8 -0
- package/types/x-modules/search/components/partial-query-button.vue.d.ts.map +1 -1
- package/types/x-modules/search/components/spellcheck-button.vue.d.ts +8 -0
- package/types/x-modules/search/components/spellcheck-button.vue.d.ts.map +1 -1
- package/types/x-modules/search/store/emitters.d.ts +4 -1
- package/types/x-modules/search/store/emitters.d.ts.map +1 -1
- package/types/x-modules/search-box/components/search-button.vue.d.ts +8 -0
- package/types/x-modules/search-box/components/search-button.vue.d.ts.map +1 -1
- package/types/x-modules/search-box/components/search-input.vue.d.ts +1 -1
- package/types/x-modules/search-box/components/search-input.vue.d.ts.map +1 -1
- package/types/x-modules/tagging/store/actions/index.d.ts +2 -0
- package/types/x-modules/tagging/store/actions/index.d.ts.map +1 -0
- package/types/x-modules/tagging/store/actions/track.action.d.ts +12 -0
- package/types/x-modules/tagging/store/actions/track.action.d.ts.map +1 -0
- package/types/x-modules/tagging/store/index.d.ts +1 -0
- package/types/x-modules/tagging/store/index.d.ts.map +1 -1
- package/types/x-modules/tagging/store/module.d.ts.map +1 -1
- package/types/x-modules/tagging/store/types.d.ts +7 -0
- package/types/x-modules/tagging/store/types.d.ts.map +1 -1
- package/types/x-modules/tagging/wiring.d.ts +17 -7
- package/types/x-modules/tagging/wiring.d.ts.map +1 -1
- package/docs/API-reference/api/x-components.identifierresultsactions.seturlparams.md +0 -24
- package/docs/css/global.scss +0 -1
- package/docs/css/utils/utils.scss +0 -35
- package/docs/css/xcomponents/clear-search-input.scss +0 -9
- package/docs/css/xcomponents/index.scss +0 -16
- package/docs/css/xcomponents/search-input.scss +0 -10
- package/docs/css/xcomponents/suggestions.scss +0 -19
- package/docs/guide/getting-started/components/clear-search-input.md +0 -98
- package/docs/guide/getting-started/components/live-examples.md +0 -100
- package/docs/guide/getting-started/components/query-suggestions.md +0 -76
- package/docs/guide/getting-started/components/search-button.md +0 -98
- package/docs/guide/getting-started/components/search-input.md +0 -105
- package/docs/guide/getting-started/install-xplugin.md +0 -72
- package/docs/guide/getting-started/use-components.md +0 -75
- package/docs/guide/install.md +0 -30
- package/docs/react-components/ReactComponents.jsx +0 -46
- package/docs/react-components/Utils.jsx +0 -34
- package/js/x-modules/identifier-results/store/actions/set-url-params.action.js +0 -17
- package/js/x-modules/identifier-results/store/actions/set-url-params.action.js.map +0 -1
- package/types/x-modules/identifier-results/store/actions/set-url-params.action.d.ts +0 -12
- 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 X 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 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 X 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 X 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 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 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 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 X 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 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 Components to define types.
|
|
67
|
+
|
|
68
|
+
- **reflect-metadata**: Polyfill that allows the internal decorators of X 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 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 X 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 X 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 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 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 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 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 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 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 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 X can potentially be integrated in commerce shops built with React. In any case,
|
|
131
|
+
Interface 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":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
|