@empathyco/x-components 3.0.0-alpha.151 → 3.0.0-alpha.152
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 +17 -0
- package/design-system/default-theme.css +10 -10
- package/design-system/full-theme.css +11 -11
- 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/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/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/package.json +4 -4
- package/report/x-types.api.json +85 -16
package/CHANGELOG.md
CHANGED
|
@@ -3,6 +3,23 @@
|
|
|
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.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)
|
|
7
|
+
|
|
8
|
+
### ⚠ BREAKING CHANGES
|
|
9
|
+
|
|
10
|
+
- **result:** `Result` model properties are optional, except `id`, `modelName` and `tagging`.
|
|
11
|
+
|
|
12
|
+
### Features
|
|
13
|
+
|
|
14
|
+
- **result:** add `variants` support (#644)
|
|
15
|
+
([d5db09e](https://github.com/empathyco/x/commit/d5db09e9be92d0df65329680ee286959030ccecc)),
|
|
16
|
+
closes [EX-6760](https://searchbroker.atlassian.net/browse/EX-6760)
|
|
17
|
+
|
|
18
|
+
# Change Log
|
|
19
|
+
|
|
20
|
+
All notable changes to this project will be documented in this file. See
|
|
21
|
+
[Conventional Commits](https://conventionalcommits.org) for commit guidelines.
|
|
22
|
+
|
|
6
23
|
## [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
24
|
|
|
8
25
|
### 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);
|
|
@@ -677,9 +677,6 @@
|
|
|
677
677
|
.x-dropdown.x-dropdown--m {
|
|
678
678
|
--x-size-width-dropdown-toggle-default: var(--x-size-width-dropdown-m);
|
|
679
679
|
}
|
|
680
|
-
:root {
|
|
681
|
-
--x-size-width-dropdown-m: 130px;
|
|
682
|
-
}
|
|
683
680
|
.x-dropdown--pill {
|
|
684
681
|
--x-size-gap-dropdown-default: var(--x-size-gap-dropdown-pill);
|
|
685
682
|
--x-size-border-radius-top-left-dropdown-default: calc(
|
|
@@ -3071,6 +3068,9 @@
|
|
|
3071
3068
|
--x-number-font-weight-option-list-button-default: var(--x-number-font-weight-base-regular);
|
|
3072
3069
|
--x-number-font-weight-option-list-button-default-selected: var(--x-number-font-weight-base-bold);
|
|
3073
3070
|
}
|
|
3071
|
+
:root {
|
|
3072
|
+
--x-size-width-dropdown-m: 130px;
|
|
3073
|
+
}
|
|
3074
3074
|
.x-picture--card.x-picture {
|
|
3075
3075
|
--x-size-border-radius-picture-default: var(--x-size-border-radius-picture-card);
|
|
3076
3076
|
--x-size-border-radius-top-picture-default: var(--x-size-border-radius-top-picture-card);
|
|
@@ -3526,14 +3526,6 @@
|
|
|
3526
3526
|
.x-row--padding-06 {
|
|
3527
3527
|
--x-size-padding-row: var(--x-size-padding-row-06);
|
|
3528
3528
|
}
|
|
3529
|
-
/* @deprecated */
|
|
3530
|
-
:root {
|
|
3531
|
-
--x-size-padding-row-02: var(--x-size-base-02);
|
|
3532
|
-
--x-size-padding-row-03: var(--x-size-base-03);
|
|
3533
|
-
--x-size-padding-row-04: var(--x-size-base-04);
|
|
3534
|
-
--x-size-padding-row-05: var(--x-size-base-05);
|
|
3535
|
-
--x-size-padding-row-06: var(--x-size-base-06);
|
|
3536
|
-
}
|
|
3537
3529
|
.x-scroll {
|
|
3538
3530
|
overflow-y: var(--x-string-overflow-scroll);
|
|
3539
3531
|
}
|
|
@@ -3560,6 +3552,14 @@
|
|
|
3560
3552
|
--x-color-thumb-scroll-bar: var(--x-color-thumb-scroll-bar-hover);
|
|
3561
3553
|
}
|
|
3562
3554
|
}
|
|
3555
|
+
/* @deprecated */
|
|
3556
|
+
:root {
|
|
3557
|
+
--x-size-padding-row-02: var(--x-size-base-02);
|
|
3558
|
+
--x-size-padding-row-03: var(--x-size-base-03);
|
|
3559
|
+
--x-size-padding-row-04: var(--x-size-base-04);
|
|
3560
|
+
--x-size-padding-row-05: var(--x-size-base-05);
|
|
3561
|
+
--x-size-padding-row-06: var(--x-size-base-06);
|
|
3562
|
+
}
|
|
3563
3563
|
:root {
|
|
3564
3564
|
--x-string-overflow-scroll: auto;
|
|
3565
3565
|
--x-color-background-scroll-bar: transparent;
|
|
@@ -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
|
+
|
|
@@ -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":"identifier-result.vue.js","sources":["../../../../../src/x-modules/identifier-results/components/identifier-result.vue"],"sourcesContent":["<template>\n <span\n v-if=\"query\"\n v-html=\"highlightedQueryHTML\"\n class=\"x-identifier-result\"\n data-test=\"identifier-result\"\n ></span>\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 { Getter, State } from '../../../components/decorators/store.decorators';\n import { xComponentMixin } from '../../../components/x-component.mixin';\n import { identifierResultsXModule } from '../x-module';\n\n /**\n * This component renders an identifier result value and highlights its matching part with the\n * query from the state. Receives as prop the {@link @empathyco/x-types#Result | result data}.\n *\n * @public\n */\n @Component({\n mixins: [xComponentMixin(identifierResultsXModule)]\n })\n export default class IdentifierResult 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 * Query from the module state.\n *\n * @public\n */\n @State('identifierResults', 'query')\n public query!: string;\n\n /**\n * The RegExp with the current query from the state adding the separatorChars after each\n * matching character.\n *\n * @public\n */\n @Getter('identifierResults', 'identifierHighlightRegexp')\n public identifierHighlightRegexp!: RegExp;\n\n /**\n * Highlights the matching part of the identifier result with the query from the state.\n *\n * @returns String - The identifier result s query with the matching part inside a `<span>` tag.\n * @public\n */\n protected get highlightedQueryHTML(): string {\n const identifierValue = this.result.identifier
|
|
1
|
+
{"version":3,"file":"identifier-result.vue.js","sources":["../../../../../src/x-modules/identifier-results/components/identifier-result.vue"],"sourcesContent":["<template>\n <span\n v-if=\"query\"\n v-html=\"highlightedQueryHTML\"\n class=\"x-identifier-result\"\n data-test=\"identifier-result\"\n ></span>\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 { Getter, State } from '../../../components/decorators/store.decorators';\n import { xComponentMixin } from '../../../components/x-component.mixin';\n import { identifierResultsXModule } from '../x-module';\n\n /**\n * This component renders an identifier result value and highlights its matching part with the\n * query from the state. Receives as prop the {@link @empathyco/x-types#Result | result data}.\n *\n * @public\n */\n @Component({\n mixins: [xComponentMixin(identifierResultsXModule)]\n })\n export default class IdentifierResult 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 * Query from the module state.\n *\n * @public\n */\n @State('identifierResults', 'query')\n public query!: string;\n\n /**\n * The RegExp with the current query from the state adding the separatorChars after each\n * matching character.\n *\n * @public\n */\n @Getter('identifierResults', 'identifierHighlightRegexp')\n public identifierHighlightRegexp!: RegExp;\n\n /**\n * Highlights the matching part of the identifier result with the query from the state.\n *\n * @returns String - The identifier result s query with the matching part inside a `<span>` tag.\n * @public\n */\n protected get highlightedQueryHTML(): string {\n const identifierValue = this.result.identifier?.value ?? '';\n if (identifierValue && this.identifierHighlightRegexp) {\n return identifierValue.replace(\n this.identifierHighlightRegexp,\n '<span class=\"x-identifier-result__matching-part\">$1</span>'\n );\n }\n return identifierValue;\n }\n }\n</script>\n\n<docs lang=\"mdx\">\n## Examples\n\nThis component renders an identifier result value and highlights its matching part with the query\nfrom the state. Receives as prop the result data\n\n### Basic usage:\n\n```vue\n<IdentifierResult v-bind=\"{ result }\" />\n```\n</docs>\n"],"names":[],"mappings":";;;;AAEA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
|
|
@@ -19,7 +19,7 @@ let IdentifierResult = class IdentifierResult extends Vue {
|
|
|
19
19
|
* @public
|
|
20
20
|
*/
|
|
21
21
|
get highlightedQueryHTML() {
|
|
22
|
-
const identifierValue = this.result.identifier
|
|
22
|
+
const identifierValue = this.result.identifier?.value ?? '';
|
|
23
23
|
if (identifierValue && this.identifierHighlightRegexp) {
|
|
24
24
|
return identifierValue.replace(this.identifierHighlightRegexp, '<span class="x-identifier-result__matching-part">$1</span>');
|
|
25
25
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"identifier-result.vue_rollup-plugin-vue_script.vue.js","sources":["../../../../../src/x-modules/identifier-results/components/identifier-result.vue?rollup-plugin-vue=script.ts"],"sourcesContent":["\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 { Getter, State } from '../../../components/decorators/store.decorators';\nimport { xComponentMixin } from '../../../components/x-component.mixin';\nimport { identifierResultsXModule } from '../x-module';\n\n/**\n * This component renders an identifier result value and highlights its matching part with the\n * query from the state. Receives as prop the {@link @empathyco/x-types#Result | result data}.\n *\n * @public\n */\n@Component({\n mixins: [xComponentMixin(identifierResultsXModule)]\n})\nexport default class IdentifierResult 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 * Query from the module state.\n *\n * @public\n */\n @State('identifierResults', 'query')\n public query!: string;\n\n /**\n * The RegExp with the current query from the state adding the separatorChars after each\n * matching character.\n *\n * @public\n */\n @Getter('identifierResults', 'identifierHighlightRegexp')\n public identifierHighlightRegexp!: RegExp;\n\n /**\n * Highlights the matching part of the identifier result with the query from the state.\n *\n * @returns String - The identifier result s query with the matching part inside a `<span>` tag.\n * @public\n */\n protected get highlightedQueryHTML(): string {\n const identifierValue = this.result.identifier
|
|
1
|
+
{"version":3,"file":"identifier-result.vue_rollup-plugin-vue_script.vue.js","sources":["../../../../../src/x-modules/identifier-results/components/identifier-result.vue?rollup-plugin-vue=script.ts"],"sourcesContent":["\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 { Getter, State } from '../../../components/decorators/store.decorators';\nimport { xComponentMixin } from '../../../components/x-component.mixin';\nimport { identifierResultsXModule } from '../x-module';\n\n/**\n * This component renders an identifier result value and highlights its matching part with the\n * query from the state. Receives as prop the {@link @empathyco/x-types#Result | result data}.\n *\n * @public\n */\n@Component({\n mixins: [xComponentMixin(identifierResultsXModule)]\n})\nexport default class IdentifierResult 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 * Query from the module state.\n *\n * @public\n */\n @State('identifierResults', 'query')\n public query!: string;\n\n /**\n * The RegExp with the current query from the state adding the separatorChars after each\n * matching character.\n *\n * @public\n */\n @Getter('identifierResults', 'identifierHighlightRegexp')\n public identifierHighlightRegexp!: RegExp;\n\n /**\n * Highlights the matching part of the identifier result with the query from the state.\n *\n * @returns String - The identifier result s query with the matching part inside a `<span>` tag.\n * @public\n */\n protected get highlightedQueryHTML(): string {\n const identifierValue = this.result.identifier?.value ?? '';\n if (identifierValue && this.identifierHighlightRegexp) {\n return identifierValue.replace(\n this.identifierHighlightRegexp,\n '<span class=\"x-identifier-result__matching-part\">$1</span>'\n );\n }\n return identifierValue;\n }\n}\n"],"names":[],"mappings":";;;;;;;AAiBA;;;;;;AASA,IAAqB,gBAAgB,GAArC,MAAqB,gBAAiB,SAAQ,GAAG;;;;;;;IAgC/C,IAAc,oBAAoB;QAChC,MAAM,eAAe,GAAG,IAAI,CAAC,MAAM,CAAC,UAAU,EAAE,KAAK,IAAI,EAAE,CAAC;QAC5D,IAAI,eAAe,IAAI,IAAI,CAAC,yBAAyB,EAAE;YACrD,OAAO,eAAe,CAAC,OAAO,CAC5B,IAAI,CAAC,yBAAyB,EAC9B,4DAA4D,CAC7D,CAAC;SACH;QACD,OAAO,eAAe,CAAC;KACxB;CACF,CAAA;AAnCC;IADC,IAAI,CAAC,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC;gDACC;AAQ1B;IADC,KAAK,CAAC,mBAAmB,EAAE,OAAO,CAAC;+CACd;AAStB;IADC,MAAM,CAAC,mBAAmB,EAAE,2BAA2B,CAAC;mEACf;AAxBvB,gBAAgB;IAHpC,SAAS,CAAC;QACT,MAAM,EAAE,CAAC,eAAe,CAAC,wBAAwB,CAAC,CAAC;KACpD,CAAC;GACmB,gBAAgB,CA0CpC;aA1CoB,gBAAgB;;;;"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@empathyco/x-components",
|
|
3
|
-
"version": "3.0.0-alpha.
|
|
3
|
+
"version": "3.0.0-alpha.152",
|
|
4
4
|
"description": "Empathy X Components",
|
|
5
5
|
"author": "Empathy Systems Corporation S.L.",
|
|
6
6
|
"license": "Apache-2.0",
|
|
@@ -63,7 +63,7 @@
|
|
|
63
63
|
"@empathyco/x-deep-merge": "^1.3.0-alpha.19",
|
|
64
64
|
"@empathyco/x-logger": "^1.2.0-alpha.3",
|
|
65
65
|
"@empathyco/x-storage-service": "^2.0.0-alpha.2",
|
|
66
|
-
"@empathyco/x-types": "^10.0.0-alpha.
|
|
66
|
+
"@empathyco/x-types": "^10.0.0-alpha.31",
|
|
67
67
|
"@empathyco/x-utils": "^1.0.0-alpha.5",
|
|
68
68
|
"@types/resize-observer-browser": "~0.1.5",
|
|
69
69
|
"rxjs": "~7.4.0",
|
|
@@ -78,7 +78,7 @@
|
|
|
78
78
|
"devDependencies": {
|
|
79
79
|
"@cypress/vue": "~2.2.4",
|
|
80
80
|
"@cypress/webpack-dev-server": "~1.8.4",
|
|
81
|
-
"@empathyco/x-adapter-platform": "^1.0.0-alpha.
|
|
81
|
+
"@empathyco/x-adapter-platform": "^1.0.0-alpha.30",
|
|
82
82
|
"@microsoft/api-documenter": "~7.15.3",
|
|
83
83
|
"@microsoft/api-extractor": "~7.19.4",
|
|
84
84
|
"@rollup/plugin-commonjs": "~21.0.1",
|
|
@@ -125,5 +125,5 @@
|
|
|
125
125
|
"access": "public",
|
|
126
126
|
"directory": "dist"
|
|
127
127
|
},
|
|
128
|
-
"gitHead": "
|
|
128
|
+
"gitHead": "478dd99614dd1a5b666df9193cb3666aa2d1b6c0"
|
|
129
129
|
}
|
package/report/x-types.api.json
CHANGED
|
@@ -4455,7 +4455,7 @@
|
|
|
4455
4455
|
"excerptTokens": [
|
|
4456
4456
|
{
|
|
4457
4457
|
"kind": "Content",
|
|
4458
|
-
"text": "identifier
|
|
4458
|
+
"text": "identifier?: "
|
|
4459
4459
|
},
|
|
4460
4460
|
{
|
|
4461
4461
|
"kind": "Reference",
|
|
@@ -4467,7 +4467,7 @@
|
|
|
4467
4467
|
"text": ";"
|
|
4468
4468
|
}
|
|
4469
4469
|
],
|
|
4470
|
-
"isOptional":
|
|
4470
|
+
"isOptional": true,
|
|
4471
4471
|
"releaseTag": "Public",
|
|
4472
4472
|
"name": "identifier",
|
|
4473
4473
|
"propertyTypeTokenRange": {
|
|
@@ -4482,7 +4482,7 @@
|
|
|
4482
4482
|
"excerptTokens": [
|
|
4483
4483
|
{
|
|
4484
4484
|
"kind": "Content",
|
|
4485
|
-
"text": "images
|
|
4485
|
+
"text": "images?: "
|
|
4486
4486
|
},
|
|
4487
4487
|
{
|
|
4488
4488
|
"kind": "Content",
|
|
@@ -4493,7 +4493,7 @@
|
|
|
4493
4493
|
"text": ";"
|
|
4494
4494
|
}
|
|
4495
4495
|
],
|
|
4496
|
-
"isOptional":
|
|
4496
|
+
"isOptional": true,
|
|
4497
4497
|
"releaseTag": "Public",
|
|
4498
4498
|
"name": "images",
|
|
4499
4499
|
"propertyTypeTokenRange": {
|
|
@@ -4508,7 +4508,7 @@
|
|
|
4508
4508
|
"excerptTokens": [
|
|
4509
4509
|
{
|
|
4510
4510
|
"kind": "Content",
|
|
4511
|
-
"text": "isWishlisted
|
|
4511
|
+
"text": "isWishlisted?: "
|
|
4512
4512
|
},
|
|
4513
4513
|
{
|
|
4514
4514
|
"kind": "Content",
|
|
@@ -4519,7 +4519,7 @@
|
|
|
4519
4519
|
"text": ";"
|
|
4520
4520
|
}
|
|
4521
4521
|
],
|
|
4522
|
-
"isOptional":
|
|
4522
|
+
"isOptional": true,
|
|
4523
4523
|
"releaseTag": "Public",
|
|
4524
4524
|
"name": "isWishlisted",
|
|
4525
4525
|
"propertyTypeTokenRange": {
|
|
@@ -4534,7 +4534,7 @@
|
|
|
4534
4534
|
"excerptTokens": [
|
|
4535
4535
|
{
|
|
4536
4536
|
"kind": "Content",
|
|
4537
|
-
"text": "name
|
|
4537
|
+
"text": "name?: "
|
|
4538
4538
|
},
|
|
4539
4539
|
{
|
|
4540
4540
|
"kind": "Content",
|
|
@@ -4545,7 +4545,7 @@
|
|
|
4545
4545
|
"text": ";"
|
|
4546
4546
|
}
|
|
4547
4547
|
],
|
|
4548
|
-
"isOptional":
|
|
4548
|
+
"isOptional": true,
|
|
4549
4549
|
"releaseTag": "Public",
|
|
4550
4550
|
"name": "name",
|
|
4551
4551
|
"propertyTypeTokenRange": {
|
|
@@ -4560,7 +4560,7 @@
|
|
|
4560
4560
|
"excerptTokens": [
|
|
4561
4561
|
{
|
|
4562
4562
|
"kind": "Content",
|
|
4563
|
-
"text": "price
|
|
4563
|
+
"text": "price?: "
|
|
4564
4564
|
},
|
|
4565
4565
|
{
|
|
4566
4566
|
"kind": "Reference",
|
|
@@ -4572,7 +4572,7 @@
|
|
|
4572
4572
|
"text": ";"
|
|
4573
4573
|
}
|
|
4574
4574
|
],
|
|
4575
|
-
"isOptional":
|
|
4575
|
+
"isOptional": true,
|
|
4576
4576
|
"releaseTag": "Public",
|
|
4577
4577
|
"name": "price",
|
|
4578
4578
|
"propertyTypeTokenRange": {
|
|
@@ -4587,7 +4587,7 @@
|
|
|
4587
4587
|
"excerptTokens": [
|
|
4588
4588
|
{
|
|
4589
4589
|
"kind": "Content",
|
|
4590
|
-
"text": "rating
|
|
4590
|
+
"text": "rating?: "
|
|
4591
4591
|
},
|
|
4592
4592
|
{
|
|
4593
4593
|
"kind": "Reference",
|
|
@@ -4599,7 +4599,7 @@
|
|
|
4599
4599
|
"text": ";"
|
|
4600
4600
|
}
|
|
4601
4601
|
],
|
|
4602
|
-
"isOptional":
|
|
4602
|
+
"isOptional": true,
|
|
4603
4603
|
"releaseTag": "Public",
|
|
4604
4604
|
"name": "rating",
|
|
4605
4605
|
"propertyTypeTokenRange": {
|
|
@@ -4614,7 +4614,7 @@
|
|
|
4614
4614
|
"excerptTokens": [
|
|
4615
4615
|
{
|
|
4616
4616
|
"kind": "Content",
|
|
4617
|
-
"text": "type
|
|
4617
|
+
"text": "type?: "
|
|
4618
4618
|
},
|
|
4619
4619
|
{
|
|
4620
4620
|
"kind": "Content",
|
|
@@ -4625,7 +4625,7 @@
|
|
|
4625
4625
|
"text": ";"
|
|
4626
4626
|
}
|
|
4627
4627
|
],
|
|
4628
|
-
"isOptional":
|
|
4628
|
+
"isOptional": true,
|
|
4629
4629
|
"releaseTag": "Public",
|
|
4630
4630
|
"name": "type",
|
|
4631
4631
|
"propertyTypeTokenRange": {
|
|
@@ -4640,7 +4640,7 @@
|
|
|
4640
4640
|
"excerptTokens": [
|
|
4641
4641
|
{
|
|
4642
4642
|
"kind": "Content",
|
|
4643
|
-
"text": "url
|
|
4643
|
+
"text": "url?: "
|
|
4644
4644
|
},
|
|
4645
4645
|
{
|
|
4646
4646
|
"kind": "Content",
|
|
@@ -4651,13 +4651,44 @@
|
|
|
4651
4651
|
"text": ";"
|
|
4652
4652
|
}
|
|
4653
4653
|
],
|
|
4654
|
-
"isOptional":
|
|
4654
|
+
"isOptional": true,
|
|
4655
4655
|
"releaseTag": "Public",
|
|
4656
4656
|
"name": "url",
|
|
4657
4657
|
"propertyTypeTokenRange": {
|
|
4658
4658
|
"startIndex": 1,
|
|
4659
4659
|
"endIndex": 2
|
|
4660
4660
|
}
|
|
4661
|
+
},
|
|
4662
|
+
{
|
|
4663
|
+
"kind": "PropertySignature",
|
|
4664
|
+
"canonicalReference": "@empathyco/x-types!Result#variants:member",
|
|
4665
|
+
"docComment": "/**\n * {@link ResultVariant | Variants of the result}.\n */\n",
|
|
4666
|
+
"excerptTokens": [
|
|
4667
|
+
{
|
|
4668
|
+
"kind": "Content",
|
|
4669
|
+
"text": "variants?: "
|
|
4670
|
+
},
|
|
4671
|
+
{
|
|
4672
|
+
"kind": "Reference",
|
|
4673
|
+
"text": "ResultVariant",
|
|
4674
|
+
"canonicalReference": "@empathyco/x-types!ResultVariant:interface"
|
|
4675
|
+
},
|
|
4676
|
+
{
|
|
4677
|
+
"kind": "Content",
|
|
4678
|
+
"text": "[]"
|
|
4679
|
+
},
|
|
4680
|
+
{
|
|
4681
|
+
"kind": "Content",
|
|
4682
|
+
"text": ";"
|
|
4683
|
+
}
|
|
4684
|
+
],
|
|
4685
|
+
"isOptional": true,
|
|
4686
|
+
"releaseTag": "Public",
|
|
4687
|
+
"name": "variants",
|
|
4688
|
+
"propertyTypeTokenRange": {
|
|
4689
|
+
"startIndex": 1,
|
|
4690
|
+
"endIndex": 3
|
|
4691
|
+
}
|
|
4661
4692
|
}
|
|
4662
4693
|
],
|
|
4663
4694
|
"extendsTokenRanges": [
|
|
@@ -4875,6 +4906,44 @@
|
|
|
4875
4906
|
"endIndex": 2
|
|
4876
4907
|
}
|
|
4877
4908
|
},
|
|
4909
|
+
{
|
|
4910
|
+
"kind": "Interface",
|
|
4911
|
+
"canonicalReference": "@empathyco/x-types!ResultVariant:interface",
|
|
4912
|
+
"docComment": "/**\n * A result variant.\n *\n * @public\n */\n",
|
|
4913
|
+
"excerptTokens": [
|
|
4914
|
+
{
|
|
4915
|
+
"kind": "Content",
|
|
4916
|
+
"text": "export interface ResultVariant extends "
|
|
4917
|
+
},
|
|
4918
|
+
{
|
|
4919
|
+
"kind": "Reference",
|
|
4920
|
+
"text": "Omit",
|
|
4921
|
+
"canonicalReference": "!Omit:type"
|
|
4922
|
+
},
|
|
4923
|
+
{
|
|
4924
|
+
"kind": "Content",
|
|
4925
|
+
"text": "<"
|
|
4926
|
+
},
|
|
4927
|
+
{
|
|
4928
|
+
"kind": "Reference",
|
|
4929
|
+
"text": "Result",
|
|
4930
|
+
"canonicalReference": "@empathyco/x-types!Result:interface"
|
|
4931
|
+
},
|
|
4932
|
+
{
|
|
4933
|
+
"kind": "Content",
|
|
4934
|
+
"text": ", 'id' | 'modelName' | 'tagging'> "
|
|
4935
|
+
}
|
|
4936
|
+
],
|
|
4937
|
+
"releaseTag": "Public",
|
|
4938
|
+
"name": "ResultVariant",
|
|
4939
|
+
"members": [],
|
|
4940
|
+
"extendsTokenRanges": [
|
|
4941
|
+
{
|
|
4942
|
+
"startIndex": 1,
|
|
4943
|
+
"endIndex": 5
|
|
4944
|
+
}
|
|
4945
|
+
]
|
|
4946
|
+
},
|
|
4878
4947
|
{
|
|
4879
4948
|
"kind": "Interface",
|
|
4880
4949
|
"canonicalReference": "@empathyco/x-types!SearchRequest:interface",
|