@empathyco/x-components 3.0.0-alpha.151 → 3.0.0-alpha.154
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 +43 -0
- package/design-system/default-theme.css +10 -10
- package/docs/API-reference/api/x-components.md +1 -0
- package/docs/API-reference/api/x-components.nextquerypreview.maxitemstorender.md +13 -0
- package/docs/API-reference/api/x-components.nextquerypreview.md +2 -1
- package/docs/API-reference/api/x-components.nextquerypreview.suggestionresults.md +1 -1
- package/docs/API-reference/api/x-components.querypreview.md +21 -0
- package/docs/API-reference/api/x-components.querypreview.query.md +13 -0
- package/docs/API-reference/api/x-components.querypreview.title.md +13 -0
- package/docs/API-reference/api/x-components.snippetconfig.md +1 -0
- package/docs/API-reference/api/x-components.snippetconfig.queriespreview.md +13 -0
- package/docs/API-reference/api/x-types.md +1 -0
- package/docs/API-reference/api/x-types.result.identifier.md +1 -1
- package/docs/API-reference/api/x-types.result.images.md +1 -1
- package/docs/API-reference/api/x-types.result.iswishlisted.md +1 -1
- package/docs/API-reference/api/x-types.result.md +9 -8
- package/docs/API-reference/api/x-types.result.name.md +1 -1
- package/docs/API-reference/api/x-types.result.price.md +1 -1
- package/docs/API-reference/api/x-types.result.rating.md +1 -1
- package/docs/API-reference/api/x-types.result.type.md +1 -1
- package/docs/API-reference/api/x-types.result.url.md +1 -1
- package/docs/API-reference/api/x-types.result.variants.md +13 -0
- package/docs/API-reference/api/x-types.resultvariant.md +15 -0
- package/docs/API-reference/components/extra-params/x-components.snippet-config-extra-params.md +4 -4
- package/docs/API-reference/components/next-queries/x-components.next-query-preview.md +53 -3
- package/js/components/result/base-result-current-price.vue.js.map +1 -1
- package/js/components/result/base-result-current-price.vue_rollup-plugin-vue_script.vue.js +1 -1
- package/js/components/result/base-result-current-price.vue_rollup-plugin-vue_script.vue.js.map +1 -1
- package/js/components/result/base-result-image.vue.js +2 -2
- package/js/components/result/base-result-image.vue.js.map +1 -1
- package/js/components/result/base-result-image.vue_rollup-plugin-vue_script.vue.js +2 -2
- package/js/components/result/base-result-image.vue_rollup-plugin-vue_script.vue.js.map +1 -1
- package/js/x-modules/extra-params/components/snippet-config-extra-params.vue.js.map +1 -1
- package/js/x-modules/extra-params/components/snippet-config-extra-params.vue_rollup-plugin-vue_script.vue.js +5 -4
- package/js/x-modules/extra-params/components/snippet-config-extra-params.vue_rollup-plugin-vue_script.vue.js.map +1 -1
- package/js/x-modules/identifier-results/components/identifier-result.vue.js.map +1 -1
- package/js/x-modules/identifier-results/components/identifier-result.vue_rollup-plugin-vue_script.vue.js +1 -1
- package/js/x-modules/identifier-results/components/identifier-result.vue_rollup-plugin-vue_script.vue.js.map +1 -1
- package/js/x-modules/next-queries/components/next-query-preview.vue.js.map +1 -1
- package/js/x-modules/next-queries/components/next-query-preview.vue_rollup-plugin-vue_script.vue.js +10 -1
- package/js/x-modules/next-queries/components/next-query-preview.vue_rollup-plugin-vue_script.vue.js.map +1 -1
- package/package.json +4 -4
- package/report/x-components.api.json +174 -2
- package/report/x-components.api.md +11 -2
- package/report/x-types.api.json +85 -16
- package/types/x-installer/api/api.types.d.ts +16 -1
- package/types/x-installer/api/api.types.d.ts.map +1 -1
- package/types/x-modules/extra-params/components/snippet-config-extra-params.vue.d.ts.map +1 -1
- package/types/x-modules/next-queries/components/next-query-preview.vue.d.ts +7 -1
- package/types/x-modules/next-queries/components/next-query-preview.vue.d.ts.map +1 -1
package/CHANGELOG.md
CHANGED
|
@@ -3,6 +3,49 @@
|
|
|
3
3
|
All notable changes to this project will be documented in this file. See
|
|
4
4
|
[Conventional Commits](https://conventionalcommits.org) for commit guidelines.
|
|
5
5
|
|
|
6
|
+
## [3.0.0-alpha.154](https://github.com/empathyco/x/compare/@empathyco/x-components@3.0.0-alpha.153...@empathyco/x-components@3.0.0-alpha.154) (2022-08-12)
|
|
7
|
+
|
|
8
|
+
### Features
|
|
9
|
+
|
|
10
|
+
- add `queriesPreview` option to snippet config (#654)
|
|
11
|
+
([7733c98](https://github.com/empathyco/x/commit/7733c9856b2859574ca0cace9c79b8b58545f46a)),
|
|
12
|
+
closes [EX-6849](https://searchbroker.atlassian.net/browse/EX-6849)
|
|
13
|
+
|
|
14
|
+
# Change Log
|
|
15
|
+
|
|
16
|
+
All notable changes to this project will be documented in this file. See
|
|
17
|
+
[Conventional Commits](https://conventionalcommits.org) for commit guidelines.
|
|
18
|
+
|
|
19
|
+
## [3.0.0-alpha.153](https://github.com/empathyco/x/compare/@empathyco/x-components@3.0.0-alpha.152...@empathyco/x-components@3.0.0-alpha.153) (2022-08-10)
|
|
20
|
+
|
|
21
|
+
### Features
|
|
22
|
+
|
|
23
|
+
- **next-queries:** add `maxItemsToRender` prop to `NextQueryPreview` component (#646)
|
|
24
|
+
([848427c](https://github.com/empathyco/x/commit/848427cb9dae85c72549ab026b3785194ec4adbd)),
|
|
25
|
+
closes [EX-6820](https://searchbroker.atlassian.net/browse/EX-6820)
|
|
26
|
+
|
|
27
|
+
# Change Log
|
|
28
|
+
|
|
29
|
+
All notable changes to this project will be documented in this file. See
|
|
30
|
+
[Conventional Commits](https://conventionalcommits.org) for commit guidelines.
|
|
31
|
+
|
|
32
|
+
## [3.0.0-alpha.152](https://github.com/empathyco/x/compare/@empathyco/x-components@3.0.0-alpha.151...@empathyco/x-components@3.0.0-alpha.152) (2022-08-10)
|
|
33
|
+
|
|
34
|
+
### ⚠ BREAKING CHANGES
|
|
35
|
+
|
|
36
|
+
- **result:** `Result` model properties are optional, except `id`, `modelName` and `tagging`.
|
|
37
|
+
|
|
38
|
+
### Features
|
|
39
|
+
|
|
40
|
+
- **result:** add `variants` support (#644)
|
|
41
|
+
([d5db09e](https://github.com/empathyco/x/commit/d5db09e9be92d0df65329680ee286959030ccecc)),
|
|
42
|
+
closes [EX-6760](https://searchbroker.atlassian.net/browse/EX-6760)
|
|
43
|
+
|
|
44
|
+
# Change Log
|
|
45
|
+
|
|
46
|
+
All notable changes to this project will be documented in this file. See
|
|
47
|
+
[Conventional Commits](https://conventionalcommits.org) for commit guidelines.
|
|
48
|
+
|
|
6
49
|
## [3.0.0-alpha.151](https://github.com/empathyco/x/compare/@empathyco/x-components@3.0.0-alpha.150...@empathyco/x-components@3.0.0-alpha.151) (2022-08-09)
|
|
7
50
|
|
|
8
51
|
### Documentation
|
|
@@ -47,6 +47,16 @@
|
|
|
47
47
|
.x-badge-container {
|
|
48
48
|
position: relative;
|
|
49
49
|
}
|
|
50
|
+
:root {
|
|
51
|
+
--x-color-background-badge-default: var(--x-color-base-neutral-10);
|
|
52
|
+
--x-color-text-badge-default: var(--x-color-base-neutral-100);
|
|
53
|
+
--x-color-border-badge-default: var(--x-color-base-neutral-10);
|
|
54
|
+
--x-size-border-radius-badge-default: var(--x-size-border-radius-base-pill);
|
|
55
|
+
--x-size-border-width-badge-default: 0;
|
|
56
|
+
--x-size-width-badge-default: 1.5em;
|
|
57
|
+
--x-number-font-weight-badge-default: var(--x-number-font-weight-base-regular);
|
|
58
|
+
--x-size-font-badge-default: var(--x-size-font-base-xs);
|
|
59
|
+
}
|
|
50
60
|
:root {
|
|
51
61
|
--x-color-background-button-default: var(--x-color-base-lead);
|
|
52
62
|
--x-color-border-button-default: var(--x-color-background-button-default);
|
|
@@ -132,16 +142,6 @@
|
|
|
132
142
|
margin-right: var(--x-size-gap-button-default);
|
|
133
143
|
}
|
|
134
144
|
}
|
|
135
|
-
:root {
|
|
136
|
-
--x-color-background-badge-default: var(--x-color-base-neutral-10);
|
|
137
|
-
--x-color-text-badge-default: var(--x-color-base-neutral-100);
|
|
138
|
-
--x-color-border-badge-default: var(--x-color-base-neutral-10);
|
|
139
|
-
--x-size-border-radius-badge-default: var(--x-size-border-radius-base-pill);
|
|
140
|
-
--x-size-border-width-badge-default: 0;
|
|
141
|
-
--x-size-width-badge-default: 1.5em;
|
|
142
|
-
--x-number-font-weight-badge-default: var(--x-number-font-weight-base-regular);
|
|
143
|
-
--x-size-font-badge-default: var(--x-size-font-base-xs);
|
|
144
|
-
}
|
|
145
145
|
:root {
|
|
146
146
|
--x-color-background-button-default: var(--x-color-base-lead);
|
|
147
147
|
--x-color-border-button-default: var(--x-color-background-button-default);
|
|
@@ -272,6 +272,7 @@ X-Components is a library usable everywhere not only for search experiences.
|
|
|
272
272
|
| [PopularSearchesState](./x-components.popularsearchesstate.md) | Popular searches module state. |
|
|
273
273
|
| [PopularSearchesXEvents](./x-components.popularsearchesxevents.md) | Dictionary of the events of PopularSearches XModule, where each key is the event name, and the value is the event payload type or <code>void</code> if it has no payload. |
|
|
274
274
|
| [PrivateXModuleOptions](./x-components.privatexmoduleoptions.md) | Options for overriding the default store module and store emitters for a [XModule](./x-components.xmodule.md)<!-- -->. |
|
|
275
|
+
| [QueryPreview](./x-components.querypreview.md) | Information to render a query preview with. |
|
|
275
276
|
| [QuerySuggestionsActions](./x-components.querysuggestionsactions.md) | QuerySuggestions store actions. |
|
|
276
277
|
| [QuerySuggestionsConfig](./x-components.querysuggestionsconfig.md) | Configuration options for the [QuerySuggestionsXModule](./x-components.querysuggestionsxmodule.md)<!-- -->. |
|
|
277
278
|
| [QuerySuggestionsGetters](./x-components.querysuggestionsgetters.md) | QuerySuggestions store getters. |
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
<!-- Do not edit this file. It is automatically generated by API Documenter. -->
|
|
2
|
+
|
|
3
|
+
[Home](./index.md) > [@empathyco/x-components](./x-components.md) > [NextQueryPreview](./x-components.nextquerypreview.md) > [maxItemsToRender](./x-components.nextquerypreview.maxitemstorender.md)
|
|
4
|
+
|
|
5
|
+
## NextQueryPreview.maxItemsToRender property
|
|
6
|
+
|
|
7
|
+
Number of suggestion results to be rendered.
|
|
8
|
+
|
|
9
|
+
<b>Signature:</b>
|
|
10
|
+
|
|
11
|
+
```typescript
|
|
12
|
+
protected maxItemsToRender?: number;
|
|
13
|
+
```
|
|
@@ -17,9 +17,10 @@ export default class NextQueryPreview extends Vue
|
|
|
17
17
|
|
|
18
18
|
| Property | Modifiers | Type | Description |
|
|
19
19
|
| --- | --- | --- | --- |
|
|
20
|
+
| [maxItemsToRender?](./x-components.nextquerypreview.maxitemstorender.md) | | number | <i>(Optional)</i> Number of suggestion results to be rendered. |
|
|
20
21
|
| [previewResults](./x-components.nextquerypreview.previewresults.md) | | Dictionary<PreviewResults> | The results preview of the next queries mounted. It is a dictionary, indexed by the next query query. |
|
|
21
22
|
| [suggestion](./x-components.nextquerypreview.suggestion.md) | | NextQuery | The next query to retrieve the results preview. |
|
|
22
|
-
| [suggestionResults](./x-components.nextquerypreview.suggestionresults.md) | | PreviewResults | Gets from the state the results preview of the next query. |
|
|
23
|
+
| [suggestionResults](./x-components.nextquerypreview.suggestionresults.md) | | PreviewResults \| undefined | Gets from the state the results preview of the next query. |
|
|
23
24
|
|
|
24
25
|
## Methods
|
|
25
26
|
|
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
<!-- Do not edit this file. It is automatically generated by API Documenter. -->
|
|
2
|
+
|
|
3
|
+
[Home](./index.md) > [@empathyco/x-components](./x-components.md) > [QueryPreview](./x-components.querypreview.md)
|
|
4
|
+
|
|
5
|
+
## QueryPreview interface
|
|
6
|
+
|
|
7
|
+
Information to render a query preview with.
|
|
8
|
+
|
|
9
|
+
<b>Signature:</b>
|
|
10
|
+
|
|
11
|
+
```typescript
|
|
12
|
+
export interface QueryPreview
|
|
13
|
+
```
|
|
14
|
+
|
|
15
|
+
## Properties
|
|
16
|
+
|
|
17
|
+
| Property | Type | Description |
|
|
18
|
+
| --- | --- | --- |
|
|
19
|
+
| [query](./x-components.querypreview.query.md) | string | The query to search for. |
|
|
20
|
+
| [title?](./x-components.querypreview.title.md) | string | <i>(Optional)</i> An optional title for the container. |
|
|
21
|
+
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
<!-- Do not edit this file. It is automatically generated by API Documenter. -->
|
|
2
|
+
|
|
3
|
+
[Home](./index.md) > [@empathyco/x-components](./x-components.md) > [QueryPreview](./x-components.querypreview.md) > [query](./x-components.querypreview.query.md)
|
|
4
|
+
|
|
5
|
+
## QueryPreview.query property
|
|
6
|
+
|
|
7
|
+
The query to search for.
|
|
8
|
+
|
|
9
|
+
<b>Signature:</b>
|
|
10
|
+
|
|
11
|
+
```typescript
|
|
12
|
+
query: string;
|
|
13
|
+
```
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
<!-- Do not edit this file. It is automatically generated by API Documenter. -->
|
|
2
|
+
|
|
3
|
+
[Home](./index.md) > [@empathyco/x-components](./x-components.md) > [QueryPreview](./x-components.querypreview.md) > [title](./x-components.querypreview.title.md)
|
|
4
|
+
|
|
5
|
+
## QueryPreview.title property
|
|
6
|
+
|
|
7
|
+
An optional title for the container.
|
|
8
|
+
|
|
9
|
+
<b>Signature:</b>
|
|
10
|
+
|
|
11
|
+
```typescript
|
|
12
|
+
title?: string;
|
|
13
|
+
```
|
|
@@ -26,6 +26,7 @@ export interface SnippetConfig
|
|
|
26
26
|
| [isSpa?](./x-components.snippetconfig.isspa.md) | boolean | <i>(Optional)</i> Flag determining if the page is a single page application or not. |
|
|
27
27
|
| [lang](./x-components.snippetconfig.lang.md) | string | Language to display. |
|
|
28
28
|
| [productId?](./x-components.snippetconfig.productid.md) | string | <i>(Optional)</i> The id for the current product when product page is loaded. |
|
|
29
|
+
| [queriesPreview?](./x-components.snippetconfig.queriespreview.md) | [QueryPreview](./x-components.querypreview.md)<!-- -->\[\] | <i>(Optional)</i> List of queries to preview. |
|
|
29
30
|
| [scope](./x-components.snippetconfig.scope.md) | string | Execution scope (desktop, mobile, app, ...). |
|
|
30
31
|
| [searchLang?](./x-components.snippetconfig.searchlang.md) | string | <i>(Optional)</i> Language to send to backend services. |
|
|
31
32
|
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
<!-- Do not edit this file. It is automatically generated by API Documenter. -->
|
|
2
|
+
|
|
3
|
+
[Home](./index.md) > [@empathyco/x-components](./x-components.md) > [SnippetConfig](./x-components.snippetconfig.md) > [queriesPreview](./x-components.snippetconfig.queriespreview.md)
|
|
4
|
+
|
|
5
|
+
## SnippetConfig.queriesPreview property
|
|
6
|
+
|
|
7
|
+
List of queries to preview.
|
|
8
|
+
|
|
9
|
+
<b>Signature:</b>
|
|
10
|
+
|
|
11
|
+
```typescript
|
|
12
|
+
queriesPreview?: QueryPreview[];
|
|
13
|
+
```
|
|
@@ -74,6 +74,7 @@ Entry point to export search-type models and testing schemas in a unified api-ex
|
|
|
74
74
|
| [ResultIdentifier](./x-types.resultidentifier.md) | The client result identifier (SKU, MOCACO, a simple ID...). |
|
|
75
75
|
| [ResultPrice](./x-types.resultprice.md) | The result price. |
|
|
76
76
|
| [ResultRating](./x-types.resultrating.md) | The result rating. |
|
|
77
|
+
| [ResultVariant](./x-types.resultvariant.md) | A result variant. |
|
|
77
78
|
| [SearchRequest](./x-types.searchrequest.md) | The Request for the Search endpoint. |
|
|
78
79
|
| [SearchResponse](./x-types.searchresponse.md) | Response for the search endpoint. |
|
|
79
80
|
| [SimpleFacet](./x-types.simplefacet.md) | Simple facet is a trait for filtering results. It extends from [Facet](./x-types.facet.md)<!-- -->, changes the modelName and uses [SimpleFilter](./x-types.simplefilter.md) as filters. |
|
|
@@ -17,12 +17,13 @@ export interface Result extends NamedModel<'Result'>, Identifiable, Taggable
|
|
|
17
17
|
|
|
18
18
|
| Property | Type | Description |
|
|
19
19
|
| --- | --- | --- |
|
|
20
|
-
| [identifier](./x-types.result.identifier.md) | [ResultIdentifier](./x-types.resultidentifier.md) | [Result identifier](./x-types.resultidentifier.md)<!-- -->. |
|
|
21
|
-
| [images](./x-types.result.images.md) | string\[\] | Images of the result. It should be the URLs. |
|
|
22
|
-
| [isWishlisted](./x-types.result.iswishlisted.md) | boolean | Flag if the results has been added to the wishlist or not. |
|
|
23
|
-
| [name](./x-types.result.name.md) | string | Result name. |
|
|
24
|
-
| [price](./x-types.result.price.md) | [ResultPrice](./x-types.resultprice.md) | [Result price](./x-types.resultprice.md)<!-- -->. |
|
|
25
|
-
| [rating](./x-types.result.rating.md) | [ResultRating](./x-types.resultrating.md) | [Result rating](./x-types.resultrating.md)<!-- -->. |
|
|
26
|
-
| [type](./x-types.result.type.md) | string | The type of the result: product, article, pack, etc... |
|
|
27
|
-
| [url](./x-types.result.url.md) | string | Result URL to redirect to PDP. |
|
|
20
|
+
| [identifier?](./x-types.result.identifier.md) | [ResultIdentifier](./x-types.resultidentifier.md) | <i>(Optional)</i> [Result identifier](./x-types.resultidentifier.md)<!-- -->. |
|
|
21
|
+
| [images?](./x-types.result.images.md) | string\[\] | <i>(Optional)</i> Images of the result. It should be the URLs. |
|
|
22
|
+
| [isWishlisted?](./x-types.result.iswishlisted.md) | boolean | <i>(Optional)</i> Flag if the results has been added to the wishlist or not. |
|
|
23
|
+
| [name?](./x-types.result.name.md) | string | <i>(Optional)</i> Result name. |
|
|
24
|
+
| [price?](./x-types.result.price.md) | [ResultPrice](./x-types.resultprice.md) | <i>(Optional)</i> [Result price](./x-types.resultprice.md)<!-- -->. |
|
|
25
|
+
| [rating?](./x-types.result.rating.md) | [ResultRating](./x-types.resultrating.md) | <i>(Optional)</i> [Result rating](./x-types.resultrating.md)<!-- -->. |
|
|
26
|
+
| [type?](./x-types.result.type.md) | string | <i>(Optional)</i> The type of the result: product, article, pack, etc... |
|
|
27
|
+
| [url?](./x-types.result.url.md) | string | <i>(Optional)</i> Result URL to redirect to PDP. |
|
|
28
|
+
| [variants?](./x-types.result.variants.md) | [ResultVariant](./x-types.resultvariant.md)<!-- -->\[\] | <i>(Optional)</i> [Variants of the result](./x-types.resultvariant.md)<!-- -->. |
|
|
28
29
|
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
<!-- Do not edit this file. It is automatically generated by API Documenter. -->
|
|
2
|
+
|
|
3
|
+
[Home](./index.md) > [@empathyco/x-types](./x-types.md) > [Result](./x-types.result.md) > [variants](./x-types.result.variants.md)
|
|
4
|
+
|
|
5
|
+
## Result.variants property
|
|
6
|
+
|
|
7
|
+
[Variants of the result](./x-types.resultvariant.md)<!-- -->.
|
|
8
|
+
|
|
9
|
+
<b>Signature:</b>
|
|
10
|
+
|
|
11
|
+
```typescript
|
|
12
|
+
variants?: ResultVariant[];
|
|
13
|
+
```
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
<!-- Do not edit this file. It is automatically generated by API Documenter. -->
|
|
2
|
+
|
|
3
|
+
[Home](./index.md) > [@empathyco/x-types](./x-types.md) > [ResultVariant](./x-types.resultvariant.md)
|
|
4
|
+
|
|
5
|
+
## ResultVariant interface
|
|
6
|
+
|
|
7
|
+
A result variant.
|
|
8
|
+
|
|
9
|
+
<b>Signature:</b>
|
|
10
|
+
|
|
11
|
+
```typescript
|
|
12
|
+
export interface ResultVariant extends Omit<Result, 'id' | 'modelName' | 'tagging'>
|
|
13
|
+
```
|
|
14
|
+
<b>Extends:</b> Omit<[Result](./x-types.result.md)<!-- -->, 'id' \| 'modelName' \| 'tagging'>
|
|
15
|
+
|
package/docs/API-reference/components/extra-params/x-components.snippet-config-extra-params.md
CHANGED
|
@@ -11,10 +11,10 @@ objects of every x-module.
|
|
|
11
11
|
|
|
12
12
|
## Props
|
|
13
13
|
|
|
14
|
-
| Name | Description | Type | Default
|
|
15
|
-
| -------------------------------- | ---------------------------------------------------------------------------------------------- | ----------------------- |
|
|
16
|
-
| <code>values</code> | A Dictionary where the keys are the extra param names and its values. | <code>Dictionary</code> | <code></code>
|
|
17
|
-
| <code>excludedExtraParams</code> | Collection of properties from the snippet config to exclude from the<br />extra params object. | <code>Array</code> | <code>(): Array<keyof SnippetConfig> => [<br /> 'callbacks',<br /> 'productId',<br /> 'searchLang',<br /> 'consent',<br /> 'documentDirection',<br /> 'currency',<br /> 'filters'<br />]</code> |
|
|
14
|
+
| Name | Description | Type | Default |
|
|
15
|
+
| -------------------------------- | ---------------------------------------------------------------------------------------------- | ----------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
16
|
+
| <code>values</code> | A Dictionary where the keys are the extra param names and its values. | <code>Dictionary</code> | <code></code> |
|
|
17
|
+
| <code>excludedExtraParams</code> | Collection of properties from the snippet config to exclude from the<br />extra params object. | <code>Array</code> | <code>(): Array<keyof SnippetConfig> => [<br /> 'callbacks',<br /> 'productId',<br /> 'searchLang',<br /> 'consent',<br /> 'documentDirection',<br /> 'currency',<br /> 'filters',<br /> 'isSpa',<br /> 'queriesPreview'<br />]</code> |
|
|
18
18
|
|
|
19
19
|
## See it in action
|
|
20
20
|
|
|
@@ -12,9 +12,10 @@ By default, it renders the names of the results.
|
|
|
12
12
|
|
|
13
13
|
## Props
|
|
14
14
|
|
|
15
|
-
| Name
|
|
16
|
-
|
|
|
17
|
-
| <code>suggestion</code>
|
|
15
|
+
| Name | Description | Type | Default |
|
|
16
|
+
| ----------------------------- | ----------------------------------------------- | ---------------------- | ------------- |
|
|
17
|
+
| <code>suggestion</code> | The next query to retrieve the results preview. | <code>NextQuery</code> | <code></code> |
|
|
18
|
+
| <code>maxItemsToRender</code> | Number of suggestion results to be rendered. | <code>number</code> | <code></code> |
|
|
18
19
|
|
|
19
20
|
## Slots
|
|
20
21
|
|
|
@@ -153,3 +154,52 @@ export default {
|
|
|
153
154
|
};
|
|
154
155
|
</script>
|
|
155
156
|
```
|
|
157
|
+
|
|
158
|
+
### Play with props
|
|
159
|
+
|
|
160
|
+
In this example, the suggestions has been limited to render a maximum of 4 items.
|
|
161
|
+
|
|
162
|
+
```vue
|
|
163
|
+
<template>
|
|
164
|
+
<NextQueryPreview
|
|
165
|
+
:maxItemsToRender="maxItemsToRender"
|
|
166
|
+
:suggestion="suggestion"
|
|
167
|
+
#default="{ results }"
|
|
168
|
+
>
|
|
169
|
+
<BaseGrid #default="{ item }" :items="results">
|
|
170
|
+
<BaseResultLink :result="item">
|
|
171
|
+
<BaseResultImage :result="item" />
|
|
172
|
+
</BaseResultLink>
|
|
173
|
+
</BaseGrid>
|
|
174
|
+
</NextQueryPreview>
|
|
175
|
+
</template>
|
|
176
|
+
|
|
177
|
+
<script>
|
|
178
|
+
import {
|
|
179
|
+
BaseGrid,
|
|
180
|
+
BaseResultImage,
|
|
181
|
+
BaseResultLink
|
|
182
|
+
} from "@empathyco/x-components";
|
|
183
|
+
import { NextQueryPreview } from "@empathyco/x-components/next-queries";
|
|
184
|
+
|
|
185
|
+
export default {
|
|
186
|
+
name: "NextQueryPreviewDemo",
|
|
187
|
+
components: {
|
|
188
|
+
BaseGrid,
|
|
189
|
+
BaseResultImage,
|
|
190
|
+
BaseResultLink,
|
|
191
|
+
NextQueryPreview
|
|
192
|
+
},
|
|
193
|
+
data() {
|
|
194
|
+
return {
|
|
195
|
+
maxItemsToRender: 4,
|
|
196
|
+
suggestion: {
|
|
197
|
+
modelName: "NextQuery",
|
|
198
|
+
query: "tshirt",
|
|
199
|
+
facets: []
|
|
200
|
+
}
|
|
201
|
+
};
|
|
202
|
+
}
|
|
203
|
+
};
|
|
204
|
+
</script>
|
|
205
|
+
```
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"base-result-current-price.vue.js","sources":["../../../../src/components/result/base-result-current-price.vue"],"sourcesContent":["<template>\n <div :class=\"dynamicClasses\" class=\"x-result-current-price\" data-test=\"result-current-price\">\n <!--\n @slot Base currency item\n @binding {result} result - Result data\n -->\n <slot :result=\"result\">\n <BaseCurrency :value=\"result.price.value\" :format=\"format\" />\n </slot>\n </div>\n</template>\n\n<script lang=\"ts\">\n import { Result } from '@empathyco/x-types';\n import { Component, Prop } from 'vue-property-decorator';\n import Vue from 'vue';\n import { VueCSSClasses } from '../../utils/types';\n import BaseCurrency from '../currency/base-currency.vue';\n\n /**\n * Component that renders the {@link @empathyco/x-types#Result | result} current price\n * that may or may not be on sale.\n *\n * @public\n */\n @Component({\n components: { BaseCurrency }\n })\n export default class BaseResultCurrentPrice extends Vue {\n /**\n * (Required) The {@link @empathyco/x-types#Result | result} information.\n *\n * @public\n */\n @Prop({ required: true })\n protected result!: Result;\n\n /**\n * Format or mask to be defined as string.\n * - Use 'i' to define integer numbers.\n * - Use 'd' to define decimal numbers. You can define the length of the decimal part. If the\n * doesn't include decimals, it is filled with zeros until reach the length defined with 'd's.\n * - Integer separator must be defined between the 3rd and the 4th integer 'i' of a group.\n * - Decimal separator must be defined between the last 'i' and the first 'd'. It can be more\n * than one character.\n * - Set whatever you need around the integers and decimals marks.\n * - Default mask: 'i.iii,dd' which returns '1.345,67'.\n *\n * @remarks The number of 'd', which is the maximum decimal length, MUST match with the length\n * of decimals provided from the adapter. Otherwise, when the component truncate the decimal\n * part, delete significant digits.\n *\n * @public\n */\n @Prop()\n protected format?: string;\n\n /**\n * Dynamic CSS classes to add to the root element of this component.\n *\n * @returns A booleans dictionary where each key is the class name to add, and the boolean value\n * tells if it should be added or not.\n * @internal\n */\n protected get dynamicClasses(): VueCSSClasses {\n return {\n 'x-result-current-price--on-sale': this.result.price
|
|
1
|
+
{"version":3,"file":"base-result-current-price.vue.js","sources":["../../../../src/components/result/base-result-current-price.vue"],"sourcesContent":["<template>\n <div :class=\"dynamicClasses\" class=\"x-result-current-price\" data-test=\"result-current-price\">\n <!--\n @slot Base currency item\n @binding {result} result - Result data\n -->\n <slot :result=\"result\">\n <BaseCurrency :value=\"result.price.value\" :format=\"format\" />\n </slot>\n </div>\n</template>\n\n<script lang=\"ts\">\n import { Result } from '@empathyco/x-types';\n import { Component, Prop } from 'vue-property-decorator';\n import Vue from 'vue';\n import { VueCSSClasses } from '../../utils/types';\n import BaseCurrency from '../currency/base-currency.vue';\n\n /**\n * Component that renders the {@link @empathyco/x-types#Result | result} current price\n * that may or may not be on sale.\n *\n * @public\n */\n @Component({\n components: { BaseCurrency }\n })\n export default class BaseResultCurrentPrice extends Vue {\n /**\n * (Required) The {@link @empathyco/x-types#Result | result} information.\n *\n * @public\n */\n @Prop({ required: true })\n protected result!: Result;\n\n /**\n * Format or mask to be defined as string.\n * - Use 'i' to define integer numbers.\n * - Use 'd' to define decimal numbers. You can define the length of the decimal part. If the\n * doesn't include decimals, it is filled with zeros until reach the length defined with 'd's.\n * - Integer separator must be defined between the 3rd and the 4th integer 'i' of a group.\n * - Decimal separator must be defined between the last 'i' and the first 'd'. It can be more\n * than one character.\n * - Set whatever you need around the integers and decimals marks.\n * - Default mask: 'i.iii,dd' which returns '1.345,67'.\n *\n * @remarks The number of 'd', which is the maximum decimal length, MUST match with the length\n * of decimals provided from the adapter. Otherwise, when the component truncate the decimal\n * part, delete significant digits.\n *\n * @public\n */\n @Prop()\n protected format?: string;\n\n /**\n * Dynamic CSS classes to add to the root element of this component.\n *\n * @returns A booleans dictionary where each key is the class name to add, and the boolean value\n * tells if it should be added or not.\n * @internal\n */\n protected get dynamicClasses(): VueCSSClasses {\n return {\n 'x-result-current-price--on-sale': this.result.price?.hasDiscount ?? false\n };\n }\n }\n</script>\n\n<docs lang=\"mdx\">\n## Examples\n\n### Basic example\n\nThis component shows the current price formatted. You can provide the `format` by property or let\nthe `BaseCurrency` component use an injected one.\n\n```vue\n<BaseResultCurrentPrice :value=\"result\" :format=\"'i.iii,ddd €'\" />\n```\n\n### Overriding default slot\n\n```vue\n<BaseResultCurrentPrice :result=\"result\">\n <span class=\"custom-base-result-current-price\">{{ result.price.value }}</span>\n</BaseResultCurrentPrice>\n```\n</docs>\n"],"names":[],"mappings":";;;;AAEA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
|
|
@@ -19,7 +19,7 @@ let BaseResultCurrentPrice = class BaseResultCurrentPrice extends Vue {
|
|
|
19
19
|
*/
|
|
20
20
|
get dynamicClasses() {
|
|
21
21
|
return {
|
|
22
|
-
'x-result-current-price--on-sale': this.result.price
|
|
22
|
+
'x-result-current-price--on-sale': this.result.price?.hasDiscount ?? false
|
|
23
23
|
};
|
|
24
24
|
}
|
|
25
25
|
};
|
package/js/components/result/base-result-current-price.vue_rollup-plugin-vue_script.vue.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"base-result-current-price.vue_rollup-plugin-vue_script.vue.js","sources":["../../../../src/components/result/base-result-current-price.vue?rollup-plugin-vue=script.ts"],"sourcesContent":["\n\n\n\n\n\n\n\n\n\n\n\n\nimport { Result } from '@empathyco/x-types';\nimport { Component, Prop } from 'vue-property-decorator';\nimport Vue from 'vue';\nimport { VueCSSClasses } from '../../utils/types';\nimport BaseCurrency from '../currency/base-currency.vue';\n\n/**\n * Component that renders the {@link @empathyco/x-types#Result | result} current price\n * that may or may not be on sale.\n *\n * @public\n */\n@Component({\n components: { BaseCurrency }\n})\nexport default class BaseResultCurrentPrice extends Vue {\n /**\n * (Required) The {@link @empathyco/x-types#Result | result} information.\n *\n * @public\n */\n @Prop({ required: true })\n protected result!: Result;\n\n /**\n * Format or mask to be defined as string.\n * - Use 'i' to define integer numbers.\n * - Use 'd' to define decimal numbers. You can define the length of the decimal part. If the\n * doesn't include decimals, it is filled with zeros until reach the length defined with 'd's.\n * - Integer separator must be defined between the 3rd and the 4th integer 'i' of a group.\n * - Decimal separator must be defined between the last 'i' and the first 'd'. It can be more\n * than one character.\n * - Set whatever you need around the integers and decimals marks.\n * - Default mask: 'i.iii,dd' which returns '1.345,67'.\n *\n * @remarks The number of 'd', which is the maximum decimal length, MUST match with the length\n * of decimals provided from the adapter. Otherwise, when the component truncate the decimal\n * part, delete significant digits.\n *\n * @public\n */\n @Prop()\n protected format?: string;\n\n /**\n * Dynamic CSS classes to add to the root element of this component.\n *\n * @returns A booleans dictionary where each key is the class name to add, and the boolean value\n * tells if it should be added or not.\n * @internal\n */\n protected get dynamicClasses(): VueCSSClasses {\n return {\n 'x-result-current-price--on-sale': this.result.price
|
|
1
|
+
{"version":3,"file":"base-result-current-price.vue_rollup-plugin-vue_script.vue.js","sources":["../../../../src/components/result/base-result-current-price.vue?rollup-plugin-vue=script.ts"],"sourcesContent":["\n\n\n\n\n\n\n\n\n\n\n\n\nimport { Result } from '@empathyco/x-types';\nimport { Component, Prop } from 'vue-property-decorator';\nimport Vue from 'vue';\nimport { VueCSSClasses } from '../../utils/types';\nimport BaseCurrency from '../currency/base-currency.vue';\n\n/**\n * Component that renders the {@link @empathyco/x-types#Result | result} current price\n * that may or may not be on sale.\n *\n * @public\n */\n@Component({\n components: { BaseCurrency }\n})\nexport default class BaseResultCurrentPrice extends Vue {\n /**\n * (Required) The {@link @empathyco/x-types#Result | result} information.\n *\n * @public\n */\n @Prop({ required: true })\n protected result!: Result;\n\n /**\n * Format or mask to be defined as string.\n * - Use 'i' to define integer numbers.\n * - Use 'd' to define decimal numbers. You can define the length of the decimal part. If the\n * doesn't include decimals, it is filled with zeros until reach the length defined with 'd's.\n * - Integer separator must be defined between the 3rd and the 4th integer 'i' of a group.\n * - Decimal separator must be defined between the last 'i' and the first 'd'. It can be more\n * than one character.\n * - Set whatever you need around the integers and decimals marks.\n * - Default mask: 'i.iii,dd' which returns '1.345,67'.\n *\n * @remarks The number of 'd', which is the maximum decimal length, MUST match with the length\n * of decimals provided from the adapter. Otherwise, when the component truncate the decimal\n * part, delete significant digits.\n *\n * @public\n */\n @Prop()\n protected format?: string;\n\n /**\n * Dynamic CSS classes to add to the root element of this component.\n *\n * @returns A booleans dictionary where each key is the class name to add, and the boolean value\n * tells if it should be added or not.\n * @internal\n */\n protected get dynamicClasses(): VueCSSClasses {\n return {\n 'x-result-current-price--on-sale': this.result.price?.hasDiscount ?? false\n };\n }\n}\n"],"names":["BaseCurrency"],"mappings":";;;;;AAmBA;;;;;;AASA,IAAqB,sBAAsB,GAA3C,MAAqB,sBAAuB,SAAQ,GAAG;;;;;;;;IAoCrD,IAAc,cAAc;QAC1B,OAAO;YACL,iCAAiC,EAAE,IAAI,CAAC,MAAM,CAAC,KAAK,EAAE,WAAW,IAAI,KAAK;SAC3E,CAAC;KACH;CACF,CAAA;AAlCC;IADC,IAAI,CAAC,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC;sDACC;AAoB1B;IADC,IAAI,EAAE;sDACmB;AA3BP,sBAAsB;IAH1C,SAAS,CAAC;QACT,UAAU,EAAE,gBAAEA,iBAAY,EAAE;KAC7B,CAAC;GACmB,sBAAsB,CAyC1C;aAzCoB,sBAAsB;;;;"}
|
|
@@ -74,11 +74,11 @@ __vue_render__._withStripped = true;
|
|
|
74
74
|
/* style */
|
|
75
75
|
const __vue_inject_styles__ = function (inject) {
|
|
76
76
|
if (!inject) return
|
|
77
|
-
inject("data-v-
|
|
77
|
+
inject("data-v-66ab7bce_0", { source: ".x-result-picture[data-v-66ab7bce] {\n min-width: 1px;\n min-height: 1px;\n position: relative;\n}\n.x-result-picture__image[data-v-66ab7bce] {\n max-width: 100%;\n max-height: 100%;\n object-fit: contain;\n}", map: undefined, media: undefined });
|
|
78
78
|
|
|
79
79
|
};
|
|
80
80
|
/* scoped */
|
|
81
|
-
const __vue_scope_id__ = "data-v-
|
|
81
|
+
const __vue_scope_id__ = "data-v-66ab7bce";
|
|
82
82
|
/* module identifier */
|
|
83
83
|
const __vue_module_identifier__ = undefined;
|
|
84
84
|
/* functional template */
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"base-result-image.vue.js","sources":["../../../../src/components/result/base-result-image.vue"],"sourcesContent":["<template>\n <picture ref=\"image\" class=\"x-picture x-result-picture\" data-test=\"result-picture\">\n <component\n :is=\"animation\"\n v-if=\"!hasImageLoaded && !hasAllImagesFailed\"\n class=\"x-picture__image x-picture__image--placeholder\"\n data-test=\"result-picture-placeholder\"\n >\n <!-- eslint-disable-next-line max-len -->\n <!-- @slot (Required) Loading image content. It will be rendered while the real image is not loaded -->\n <slot name=\"placeholder\" />\n </component>\n <component :is=\"animation\">\n <img\n v-if=\"imageSrc\"\n v-show=\"hasImageLoaded\"\n @error=\"flagImageAsFailed\"\n @load=\"flagImageLoaded\"\n :alt=\"result.name\"\n :src=\"imageSrc\"\n class=\"x-picture__image x-result-picture-image\"\n data-test=\"result-picture-image\"\n />\n <NoElement v-else-if=\"hasAllImagesFailed\" class=\"x-picture__image x-picture__image--fallback\">\n <!--\n Vue styleguidist doesn't generate slot docs for v-else and v-else-if conditions\n due to a bug https://github.com/vuejs/vue/pull/10286.\n TODO - Bump styleguidist version when the fix branch is merged and a new version released.\n -->\n <!-- eslint-disable-next-line max-len -->\n <!-- @slot (Required) Fallback image content. It will be rendered when all the images failed -->\n <slot name=\"fallback\" />\n </NoElement>\n </component>\n </picture>\n</template>\n\n<script lang=\"ts\">\n import { Result } from '@empathyco/x-types';\n import Vue from 'vue';\n import { Component, Prop } from 'vue-property-decorator';\n import { NoElement } from '../no-element';\n\n /**\n * Component to be reused that renders an `<img>`.\n *\n * @public\n */\n @Component({\n components: {\n NoElement\n }\n })\n export default class BaseResultImage extends Vue {\n /**\n * Animation to use when switching between the placeholder, the loaded image, or the failed\n * image fallback.\n *\n * @public\n */\n @Prop({ default: () => NoElement })\n public animation!: string | typeof Vue;\n /**\n * The image has entered in the port view.\n *\n * @public\n */\n protected hasEnteredView = false;\n /**\n * An array of images that failed to load.\n *\n * @public\n */\n protected failedImages: string[] = [];\n /**\n * HTMLElement that references the picture element.\n *\n * @public\n */\n public $refs!: { image: HTMLElement };\n /**\n * Indicates if the result image is loaded.\n *\n * @public\n */\n protected hasImageLoaded = false;\n\n /**\n * (Required) The {@link @empathyco/x-types#Result | result} information.\n *\n * @public\n */\n @Prop({ required: true })\n protected result!: Result;\n\n /**\n * Checks if intersection observer is available in window object.\n *\n * @returns Boolean.\n *\n * @internal\n */\n protected get isIntersectionObserverAvailable(): boolean {\n return 'IntersectionObserver' in window;\n }\n\n mounted(): void {\n this.hasEnteredView = !this.isIntersectionObserverAvailable;\n if (this.isIntersectionObserverAvailable) {\n this.createObserver();\n }\n }\n\n /**\n * Gets the src from the result image.\n *\n * @returns The result image src.\n *\n * @internal\n */\n protected get imageSrc(): string {\n if (this.hasEnteredView && this.result.images
|
|
1
|
+
{"version":3,"file":"base-result-image.vue.js","sources":["../../../../src/components/result/base-result-image.vue"],"sourcesContent":["<template>\n <picture ref=\"image\" class=\"x-picture x-result-picture\" data-test=\"result-picture\">\n <component\n :is=\"animation\"\n v-if=\"!hasImageLoaded && !hasAllImagesFailed\"\n class=\"x-picture__image x-picture__image--placeholder\"\n data-test=\"result-picture-placeholder\"\n >\n <!-- eslint-disable-next-line max-len -->\n <!-- @slot (Required) Loading image content. It will be rendered while the real image is not loaded -->\n <slot name=\"placeholder\" />\n </component>\n <component :is=\"animation\">\n <img\n v-if=\"imageSrc\"\n v-show=\"hasImageLoaded\"\n @error=\"flagImageAsFailed\"\n @load=\"flagImageLoaded\"\n :alt=\"result.name\"\n :src=\"imageSrc\"\n class=\"x-picture__image x-result-picture-image\"\n data-test=\"result-picture-image\"\n />\n <NoElement v-else-if=\"hasAllImagesFailed\" class=\"x-picture__image x-picture__image--fallback\">\n <!--\n Vue styleguidist doesn't generate slot docs for v-else and v-else-if conditions\n due to a bug https://github.com/vuejs/vue/pull/10286.\n TODO - Bump styleguidist version when the fix branch is merged and a new version released.\n -->\n <!-- eslint-disable-next-line max-len -->\n <!-- @slot (Required) Fallback image content. It will be rendered when all the images failed -->\n <slot name=\"fallback\" />\n </NoElement>\n </component>\n </picture>\n</template>\n\n<script lang=\"ts\">\n import { Result } from '@empathyco/x-types';\n import Vue from 'vue';\n import { Component, Prop } from 'vue-property-decorator';\n import { NoElement } from '../no-element';\n\n /**\n * Component to be reused that renders an `<img>`.\n *\n * @public\n */\n @Component({\n components: {\n NoElement\n }\n })\n export default class BaseResultImage extends Vue {\n /**\n * Animation to use when switching between the placeholder, the loaded image, or the failed\n * image fallback.\n *\n * @public\n */\n @Prop({ default: () => NoElement })\n public animation!: string | typeof Vue;\n /**\n * The image has entered in the port view.\n *\n * @public\n */\n protected hasEnteredView = false;\n /**\n * An array of images that failed to load.\n *\n * @public\n */\n protected failedImages: string[] = [];\n /**\n * HTMLElement that references the picture element.\n *\n * @public\n */\n public $refs!: { image: HTMLElement };\n /**\n * Indicates if the result image is loaded.\n *\n * @public\n */\n protected hasImageLoaded = false;\n\n /**\n * (Required) The {@link @empathyco/x-types#Result | result} information.\n *\n * @public\n */\n @Prop({ required: true })\n protected result!: Result;\n\n /**\n * Checks if intersection observer is available in window object.\n *\n * @returns Boolean.\n *\n * @internal\n */\n protected get isIntersectionObserverAvailable(): boolean {\n return 'IntersectionObserver' in window;\n }\n\n mounted(): void {\n this.hasEnteredView = !this.isIntersectionObserverAvailable;\n if (this.isIntersectionObserverAvailable) {\n this.createObserver();\n }\n }\n\n /**\n * Gets the src from the result image.\n *\n * @returns The result image src.\n *\n * @internal\n */\n protected get imageSrc(): string {\n if (this.hasEnteredView && this.result.images?.length) {\n const image = this.result.images.find(image => !this.failedImages.includes(image));\n return image ?? '';\n }\n return '';\n }\n\n /**\n * Creates an intersection observer in the image element.\n *\n * @internal\n */\n protected createObserver(): void {\n const image = this.$refs.image as Element;\n const observer = new IntersectionObserver(this.observerHandler.bind(this));\n observer.observe(image);\n }\n\n /**\n * Observe all the observables items and detects when a element is intersected.\n *\n * @param entries - The observed items.\n * @param observer - The intersection observer object.\n *\n * @internal\n */\n protected observerHandler(\n entries: IntersectionObserverEntry[],\n observer: IntersectionObserver\n ): void {\n entries.forEach(entry => {\n if (entry.isIntersecting) {\n this.hasEnteredView = true;\n observer.disconnect();\n }\n });\n }\n\n /**\n * Sets an image as failed.\n *\n * @internal\n */\n protected flagImageAsFailed(): void {\n this.failedImages.push(this.imageSrc);\n }\n\n /**\n * Checks if all the images failed.\n *\n * @returns Boolean.\n *\n * @internal\n */\n protected get hasAllImagesFailed(): boolean {\n return this.failedImages.length === this.result.images?.length;\n }\n\n /**\n * Marks an image as loaded.\n *\n * @internal\n */\n protected flagImageLoaded(): void {\n this.hasImageLoaded = true;\n }\n }\n</script>\n\n<style lang=\"scss\" scoped>\n .x-result-picture {\n min-width: 1px;\n min-height: 1px;\n position: relative;\n\n &__image {\n max-width: 100%;\n max-height: 100%;\n object-fit: contain;\n }\n }\n</style>\n\n<docs lang=\"mdx\">\n## Examples\n\n### Basic example\n\nThis component is for the result image. It may be part of the search result page, recommendations or\nother section which needs to include results.\n\nThe result prop is required. It will render a `<img/>` with the result image:\n\n```vue\n<BaseResultImage :result=\"result\" />\n```\n\n### Customizing slots content\n\nFallback and placeholder contents can be customized.\n\nThe fallback slot allows you to replace the content of the fallback image.\n\nThe other slot is called `placeholder`, and allows you to set the image that its going to be\ndisplayed while the real one is loaded.\n\n```vue\n<BaseResultImage :result=\"result\">\n <template #placeholder>\n <img class=\"x-result-picture-placeholder\" src=\"./placeholder-image.svg\"/>\n </template>\n <template #fallback>\n <img class=\"x-result-picture-fallback\" src=\"./fallback-image.svg\"/>\n </template>\n</BaseResultImage>\n```\n</docs>\n"],"names":[],"mappings":";;;;;AAEA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
|
|
@@ -54,7 +54,7 @@ let BaseResultImage = class BaseResultImage extends Vue {
|
|
|
54
54
|
* @internal
|
|
55
55
|
*/
|
|
56
56
|
get imageSrc() {
|
|
57
|
-
if (this.hasEnteredView && this.result.images
|
|
57
|
+
if (this.hasEnteredView && this.result.images?.length) {
|
|
58
58
|
const image = this.result.images.find(image => !this.failedImages.includes(image));
|
|
59
59
|
return image ?? '';
|
|
60
60
|
}
|
|
@@ -102,7 +102,7 @@ let BaseResultImage = class BaseResultImage extends Vue {
|
|
|
102
102
|
* @internal
|
|
103
103
|
*/
|
|
104
104
|
get hasAllImagesFailed() {
|
|
105
|
-
return this.failedImages.length === this.result.images
|
|
105
|
+
return this.failedImages.length === this.result.images?.length;
|
|
106
106
|
}
|
|
107
107
|
/**
|
|
108
108
|
* Marks an image as loaded.
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"base-result-image.vue_rollup-plugin-vue_script.vue.js","sources":["../../../../src/components/result/base-result-image.vue?rollup-plugin-vue=script.ts"],"sourcesContent":["\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\nimport { Result } from '@empathyco/x-types';\nimport Vue from 'vue';\nimport { Component, Prop } from 'vue-property-decorator';\nimport { NoElement } from '../no-element';\n\n/**\n * Component to be reused that renders an `<img>`.\n *\n * @public\n */\n@Component({\n components: {\n NoElement\n }\n})\nexport default class BaseResultImage extends Vue {\n /**\n * Animation to use when switching between the placeholder, the loaded image, or the failed\n * image fallback.\n *\n * @public\n */\n @Prop({ default: () => NoElement })\n public animation!: string | typeof Vue;\n /**\n * The image has entered in the port view.\n *\n * @public\n */\n protected hasEnteredView = false;\n /**\n * An array of images that failed to load.\n *\n * @public\n */\n protected failedImages: string[] = [];\n /**\n * HTMLElement that references the picture element.\n *\n * @public\n */\n public $refs!: { image: HTMLElement };\n /**\n * Indicates if the result image is loaded.\n *\n * @public\n */\n protected hasImageLoaded = false;\n\n /**\n * (Required) The {@link @empathyco/x-types#Result | result} information.\n *\n * @public\n */\n @Prop({ required: true })\n protected result!: Result;\n\n /**\n * Checks if intersection observer is available in window object.\n *\n * @returns Boolean.\n *\n * @internal\n */\n protected get isIntersectionObserverAvailable(): boolean {\n return 'IntersectionObserver' in window;\n }\n\n mounted(): void {\n this.hasEnteredView = !this.isIntersectionObserverAvailable;\n if (this.isIntersectionObserverAvailable) {\n this.createObserver();\n }\n }\n\n /**\n * Gets the src from the result image.\n *\n * @returns The result image src.\n *\n * @internal\n */\n protected get imageSrc(): string {\n if (this.hasEnteredView && this.result.images
|
|
1
|
+
{"version":3,"file":"base-result-image.vue_rollup-plugin-vue_script.vue.js","sources":["../../../../src/components/result/base-result-image.vue?rollup-plugin-vue=script.ts"],"sourcesContent":["\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\nimport { Result } from '@empathyco/x-types';\nimport Vue from 'vue';\nimport { Component, Prop } from 'vue-property-decorator';\nimport { NoElement } from '../no-element';\n\n/**\n * Component to be reused that renders an `<img>`.\n *\n * @public\n */\n@Component({\n components: {\n NoElement\n }\n})\nexport default class BaseResultImage extends Vue {\n /**\n * Animation to use when switching between the placeholder, the loaded image, or the failed\n * image fallback.\n *\n * @public\n */\n @Prop({ default: () => NoElement })\n public animation!: string | typeof Vue;\n /**\n * The image has entered in the port view.\n *\n * @public\n */\n protected hasEnteredView = false;\n /**\n * An array of images that failed to load.\n *\n * @public\n */\n protected failedImages: string[] = [];\n /**\n * HTMLElement that references the picture element.\n *\n * @public\n */\n public $refs!: { image: HTMLElement };\n /**\n * Indicates if the result image is loaded.\n *\n * @public\n */\n protected hasImageLoaded = false;\n\n /**\n * (Required) The {@link @empathyco/x-types#Result | result} information.\n *\n * @public\n */\n @Prop({ required: true })\n protected result!: Result;\n\n /**\n * Checks if intersection observer is available in window object.\n *\n * @returns Boolean.\n *\n * @internal\n */\n protected get isIntersectionObserverAvailable(): boolean {\n return 'IntersectionObserver' in window;\n }\n\n mounted(): void {\n this.hasEnteredView = !this.isIntersectionObserverAvailable;\n if (this.isIntersectionObserverAvailable) {\n this.createObserver();\n }\n }\n\n /**\n * Gets the src from the result image.\n *\n * @returns The result image src.\n *\n * @internal\n */\n protected get imageSrc(): string {\n if (this.hasEnteredView && this.result.images?.length) {\n const image = this.result.images.find(image => !this.failedImages.includes(image));\n return image ?? '';\n }\n return '';\n }\n\n /**\n * Creates an intersection observer in the image element.\n *\n * @internal\n */\n protected createObserver(): void {\n const image = this.$refs.image as Element;\n const observer = new IntersectionObserver(this.observerHandler.bind(this));\n observer.observe(image);\n }\n\n /**\n * Observe all the observables items and detects when a element is intersected.\n *\n * @param entries - The observed items.\n * @param observer - The intersection observer object.\n *\n * @internal\n */\n protected observerHandler(\n entries: IntersectionObserverEntry[],\n observer: IntersectionObserver\n ): void {\n entries.forEach(entry => {\n if (entry.isIntersecting) {\n this.hasEnteredView = true;\n observer.disconnect();\n }\n });\n }\n\n /**\n * Sets an image as failed.\n *\n * @internal\n */\n protected flagImageAsFailed(): void {\n this.failedImages.push(this.imageSrc);\n }\n\n /**\n * Checks if all the images failed.\n *\n * @returns Boolean.\n *\n * @internal\n */\n protected get hasAllImagesFailed(): boolean {\n return this.failedImages.length === this.result.images?.length;\n }\n\n /**\n * Marks an image as loaded.\n *\n * @internal\n */\n protected flagImageLoaded(): void {\n this.hasImageLoaded = true;\n }\n}\n"],"names":[],"mappings":";;;;;AA2CA;;;;;AAUA,IAAqB,eAAe,GAApC,MAAqB,eAAgB,SAAQ,GAAG;IAAhD;;;;;;;QAcY,mBAAc,GAAG,KAAK,CAAC;;;;;;QAMvB,iBAAY,GAAa,EAAE,CAAC;;;;;;QAY5B,mBAAc,GAAG,KAAK,CAAC;KAsGlC;;;;;;;;IArFC,IAAc,+BAA+B;QAC3C,OAAO,sBAAsB,IAAI,MAAM,CAAC;KACzC;IAED,OAAO;QACL,IAAI,CAAC,cAAc,GAAG,CAAC,IAAI,CAAC,+BAA+B,CAAC;QAC5D,IAAI,IAAI,CAAC,+BAA+B,EAAE;YACxC,IAAI,CAAC,cAAc,EAAE,CAAC;SACvB;KACF;;;;;;;;IASD,IAAc,QAAQ;QACpB,IAAI,IAAI,CAAC,cAAc,IAAI,IAAI,CAAC,MAAM,CAAC,MAAM,EAAE,MAAM,EAAE;YACrD,MAAM,KAAK,GAAG,IAAI,CAAC,MAAM,CAAC,MAAM,CAAC,IAAI,CAAC,KAAK,IAAI,CAAC,IAAI,CAAC,YAAY,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC,CAAC;YACnF,OAAO,KAAK,IAAI,EAAE,CAAC;SACpB;QACD,OAAO,EAAE,CAAC;KACX;;;;;;IAOS,cAAc;QACtB,MAAM,KAAK,GAAG,IAAI,CAAC,KAAK,CAAC,KAAgB,CAAC;QAC1C,MAAM,QAAQ,GAAG,IAAI,oBAAoB,CAAC,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC;QAC3E,QAAQ,CAAC,OAAO,CAAC,KAAK,CAAC,CAAC;KACzB;;;;;;;;;IAUS,eAAe,CACvB,OAAoC,EACpC,QAA8B;QAE9B,OAAO,CAAC,OAAO,CAAC,KAAK;YACnB,IAAI,KAAK,CAAC,cAAc,EAAE;gBACxB,IAAI,CAAC,cAAc,GAAG,IAAI,CAAC;gBAC3B,QAAQ,CAAC,UAAU,EAAE,CAAC;aACvB;SACF,CAAC,CAAC;KACJ;;;;;;IAOS,iBAAiB;QACzB,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;KACvC;;;;;;;;IASD,IAAc,kBAAkB;QAC9B,OAAO,IAAI,CAAC,YAAY,CAAC,MAAM,KAAK,IAAI,CAAC,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC;KAChE;;;;;;IAOS,eAAe;QACvB,IAAI,CAAC,cAAc,GAAG,IAAI,CAAC;KAC5B;CACF,CAAA;AA9HC;IADC,IAAI,CAAC,EAAE,OAAO,EAAE,MAAM,SAAS,EAAE,CAAC;kDACI;AAgCvC;IADC,IAAI,CAAC,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC;+CACC;AAxCP,eAAe;IALnC,SAAS,CAAC;QACT,UAAU,EAAE;YACV,SAAS;SACV;KACF,CAAC;GACmB,eAAe,CAsInC;aAtIoB,eAAe;;;;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"snippet-config-extra-params.vue.js","sources":["../../../../../src/x-modules/extra-params/components/snippet-config-extra-params.vue"],"sourcesContent":["<template>\n <ExtraParams :values=\"extraParams\" />\n</template>\n\n<script lang=\"ts\">\n import { forEach, Dictionary } from '@empathyco/x-utils';\n import Vue from 'vue';\n import { Component, Watch, Inject, Prop } from 'vue-property-decorator';\n import { xComponentMixin } from '../../../components/x-component.mixin';\n import { SnippetConfig } from '../../../x-installer/api/api.types';\n import { extraParamsXModule } from '../x-module';\n import ExtraParams from './extra-params.vue';\n\n /**\n * Extracts the extra parameters from the {@link SnippetConfig} and syncs it with the request\n * objects of every x-module.\n *\n * @public\n */\n @Component({\n components: { ExtraParams },\n mixins: [xComponentMixin(extraParamsXModule)]\n })\n export default class SnippetConfigExtraParams extends Vue {\n /**\n * It injects {@link SnippetConfig} provided by an ancestor as snippetConfig.\n *\n * @internal\n */\n @Inject('snippetConfig')\n public snippetConfig!: SnippetConfig;\n\n /**\n * A Dictionary where the keys are the extra param names and its values.\n *\n * @public\n */\n @Prop()\n protected values?: Dictionary<unknown>;\n\n /**\n * Custom object containing the extra params from the snippet config.\n *\n * @remarks This object keeps manually the desired snippet config properties to avoid\n * unnecessary re-renders.\n *\n * @internal\n */\n protected extraParams: Dictionary<unknown> = {};\n\n /**\n * Collection of properties from the snippet config to exclude from the\n * extra params object.\n *\n * @public\n */\n @Prop({\n default: (): Array<keyof SnippetConfig> => [\n 'callbacks',\n 'productId',\n 'searchLang',\n 'consent',\n 'documentDirection',\n 'currency',\n 'filters'\n ]\n })\n protected excludedExtraParams!: Array<keyof SnippetConfig>;\n\n /**\n * Updates the extraParams object when the snippet config changes.\n *\n * @param snippetConfig - The new snippet config.\n *\n * @internal\n */\n @Watch('snippetConfig', { deep: true, immediate: true })\n syncExtraParams(snippetConfig: SnippetConfig): void {\n forEach({ ...this.values, ...snippetConfig }, (name, value) => {\n if (this.excludedExtraParams.includes(name)) {\n
|
|
1
|
+
{"version":3,"file":"snippet-config-extra-params.vue.js","sources":["../../../../../src/x-modules/extra-params/components/snippet-config-extra-params.vue"],"sourcesContent":["<template>\n <ExtraParams :values=\"extraParams\" />\n</template>\n\n<script lang=\"ts\">\n import { forEach, Dictionary } from '@empathyco/x-utils';\n import Vue from 'vue';\n import { Component, Watch, Inject, Prop } from 'vue-property-decorator';\n import { xComponentMixin } from '../../../components/x-component.mixin';\n import { SnippetConfig } from '../../../x-installer/api/api.types';\n import { extraParamsXModule } from '../x-module';\n import ExtraParams from './extra-params.vue';\n\n /**\n * Extracts the extra parameters from the {@link SnippetConfig} and syncs it with the request\n * objects of every x-module.\n *\n * @public\n */\n @Component({\n components: { ExtraParams },\n mixins: [xComponentMixin(extraParamsXModule)]\n })\n export default class SnippetConfigExtraParams extends Vue {\n /**\n * It injects {@link SnippetConfig} provided by an ancestor as snippetConfig.\n *\n * @internal\n */\n @Inject('snippetConfig')\n public snippetConfig!: SnippetConfig;\n\n /**\n * A Dictionary where the keys are the extra param names and its values.\n *\n * @public\n */\n @Prop()\n protected values?: Dictionary<unknown>;\n\n /**\n * Custom object containing the extra params from the snippet config.\n *\n * @remarks This object keeps manually the desired snippet config properties to avoid\n * unnecessary re-renders.\n *\n * @internal\n */\n protected extraParams: Dictionary<unknown> = {};\n\n /**\n * Collection of properties from the snippet config to exclude from the\n * extra params object.\n *\n * @public\n */\n @Prop({\n default: (): Array<keyof SnippetConfig> => [\n 'callbacks',\n 'productId',\n 'searchLang',\n 'consent',\n 'documentDirection',\n 'currency',\n 'filters',\n 'isSpa',\n 'queriesPreview'\n ]\n })\n protected excludedExtraParams!: Array<keyof SnippetConfig>;\n\n /**\n * Updates the extraParams object when the snippet config changes.\n *\n * @param snippetConfig - The new snippet config.\n *\n * @internal\n */\n @Watch('snippetConfig', { deep: true, immediate: true })\n syncExtraParams(snippetConfig: SnippetConfig): void {\n forEach({ ...this.values, ...snippetConfig }, (name, value) => {\n if (!this.excludedExtraParams.includes(name)) {\n this.$set(this.extraParams, name, value);\n }\n });\n }\n }\n</script>\n\n<docs lang=\"mdx\">\n## See it in action\n\n_See how the snippet config is injected and passed to the SnippetConfigExtraParams component._\n\n```vue\n<template>\n <Provider>\n <SnippetConfigExtraParams />\n </Provider>\n</template>\n\n<script>\n import { SnippetConfigExtraParams } from '@empathyco/x-components/extra-params';\n\n const Provider = {\n provide: {\n snippetConfig: {\n instance: 'demo',\n lang: 'es',\n warehouse: 1234\n }\n }\n };\n\n export default {\n name: 'SnippetConfigExtraParamsDemo',\n components: {\n Provider,\n SnippetConfigExtraParams\n }\n };\n</script>\n```\n</docs>\n"],"names":[],"mappings":";;;;AAEA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
|
|
@@ -34,10 +34,9 @@ let SnippetConfigExtraParams = class SnippetConfigExtraParams extends Vue {
|
|
|
34
34
|
*/
|
|
35
35
|
syncExtraParams(snippetConfig) {
|
|
36
36
|
forEach({ ...this.values, ...snippetConfig }, (name, value) => {
|
|
37
|
-
if (this.excludedExtraParams.includes(name)) {
|
|
38
|
-
|
|
37
|
+
if (!this.excludedExtraParams.includes(name)) {
|
|
38
|
+
this.$set(this.extraParams, name, value);
|
|
39
39
|
}
|
|
40
|
-
this.$set(this.extraParams, name, value);
|
|
41
40
|
});
|
|
42
41
|
}
|
|
43
42
|
};
|
|
@@ -56,7 +55,9 @@ __decorate([
|
|
|
56
55
|
'consent',
|
|
57
56
|
'documentDirection',
|
|
58
57
|
'currency',
|
|
59
|
-
'filters'
|
|
58
|
+
'filters',
|
|
59
|
+
'isSpa',
|
|
60
|
+
'queriesPreview'
|
|
60
61
|
]
|
|
61
62
|
})
|
|
62
63
|
], SnippetConfigExtraParams.prototype, "excludedExtraParams", void 0);
|