@empathyco/x-components 3.0.0-alpha.86 → 3.0.0-alpha.89

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (86) hide show
  1. package/CHANGELOG.md +22 -0
  2. package/core/index.js.map +1 -1
  3. package/design-system/full-theme.css +34 -34
  4. package/docs/API-reference/api/x-adapter.searchresponse.banners.md +1 -1
  5. package/docs/API-reference/api/x-adapter.searchresponse.md +5 -5
  6. package/docs/API-reference/api/x-adapter.searchresponse.partialresults.md +1 -1
  7. package/docs/API-reference/api/x-adapter.searchresponse.promoteds.md +1 -1
  8. package/docs/API-reference/api/x-adapter.searchresponse.redirections.md +1 -1
  9. package/docs/API-reference/api/x-adapter.searchresponse.spellcheck.md +1 -1
  10. package/docs/API-reference/api/x-components.increasepageappendingresults.md +2 -2
  11. package/docs/API-reference/api/x-components.increasepageappendingresultswire.md +13 -0
  12. package/docs/API-reference/api/x-components.md +7 -3
  13. package/docs/API-reference/api/x-components.resetstate.md +13 -0
  14. package/docs/API-reference/api/{x-components.saveorigin.md → x-components.saveidentifierresultsorigin.md} +2 -2
  15. package/docs/API-reference/api/x-components.savesearchorigin.md +13 -0
  16. package/docs/API-reference/api/x-components.savesearchresponse.md +13 -0
  17. package/docs/API-reference/api/x-components.searchactions.md +1 -0
  18. package/docs/API-reference/api/x-components.searchactions.savesearchresponse.md +24 -0
  19. package/docs/API-reference/api/x-components.setsearchurlparams.md +13 -0
  20. package/docs/API-reference/api/x-components.snippetconfigextraparams.excludedextraparams.md +13 -0
  21. package/docs/API-reference/api/x-components.snippetconfigextraparams.md +1 -0
  22. package/docs/API-reference/components/extra-params/x-components.snippet-config-extra-params.md +4 -3
  23. package/docs/build-search-ui/README.md +39 -34
  24. package/docs/build-search-ui/web-archetype-development-guide.md +28 -27
  25. package/docs/build-search-ui/web-archetype-integration-guide.md +159 -98
  26. package/docs/build-search-ui/web-how-to-use-x-components-guide.md +28 -37
  27. package/docs/build-search-ui/{x-architecture/README.md → web-x-architecture.md} +4 -52
  28. package/docs/build-search-ui/{web-x-components-integration-guide.md → web-x-components-development-guide.md} +27 -30
  29. package/identifier-results/index.js +1 -1
  30. package/js/components/decorators/injection.decorators.js.map +1 -1
  31. package/js/index.js +7 -2
  32. package/js/index.js.map +1 -1
  33. package/js/plugins/x-plugin.mixin.js.map +1 -1
  34. package/js/store/utils/fetch-and-save-action.utils.js +4 -2
  35. package/js/store/utils/fetch-and-save-action.utils.js.map +1 -1
  36. package/js/store/utils/store-emitters.utils.js.map +1 -1
  37. package/js/x-modules/empathize/components/empathize.vue.js.map +1 -1
  38. package/js/x-modules/empathize/components/empathize.vue_rollup-plugin-vue_script.vue.js +2 -2
  39. package/js/x-modules/empathize/components/empathize.vue_rollup-plugin-vue_script.vue.js.map +1 -1
  40. package/js/x-modules/extra-params/components/snippet-config-extra-params.vue.js.map +1 -1
  41. package/js/x-modules/extra-params/components/snippet-config-extra-params.vue_rollup-plugin-vue_script.vue.js +15 -129
  42. package/js/x-modules/extra-params/components/snippet-config-extra-params.vue_rollup-plugin-vue_script.vue.js.map +1 -1
  43. package/js/x-modules/next-queries/components/next-queries-list.vue.js.map +1 -1
  44. package/js/x-modules/next-queries/components/next-queries-list.vue_rollup-plugin-vue_script.vue.js.map +1 -1
  45. package/js/x-modules/search/store/actions/fetch-and-save-search-response.action.js +2 -19
  46. package/js/x-modules/search/store/actions/fetch-and-save-search-response.action.js.map +1 -1
  47. package/js/x-modules/search/store/actions/save-search-response.action.js +32 -0
  48. package/js/x-modules/search/store/actions/save-search-response.action.js.map +1 -0
  49. package/js/x-modules/search/store/module.js +2 -0
  50. package/js/x-modules/search/store/module.js.map +1 -1
  51. package/js/x-modules/search/wiring.js +3 -9
  52. package/js/x-modules/search/wiring.js.map +1 -1
  53. package/js/x-modules/url/components/url-handler.vue.js.map +1 -1
  54. package/js/x-modules/url/components/url-handler.vue_rollup-plugin-vue_script.vue.js +2 -1
  55. package/js/x-modules/url/components/url-handler.vue_rollup-plugin-vue_script.vue.js.map +1 -1
  56. package/package.json +4 -4
  57. package/report/x-adapter.api.json +10 -10
  58. package/report/x-components.api.json +238 -51
  59. package/report/x-components.api.md +22 -10
  60. package/search/index.js +6 -1
  61. package/types/plugins/x-plugin.mixin.d.ts.map +1 -1
  62. package/types/store/utils/fetch-and-save-action.utils.d.ts.map +1 -1
  63. package/types/x-modules/extra-params/components/snippet-config-extra-params.vue.d.ts +5 -4
  64. package/types/x-modules/extra-params/components/snippet-config-extra-params.vue.d.ts.map +1 -1
  65. package/types/x-modules/identifier-results/store/actions/index.d.ts +5 -0
  66. package/types/x-modules/identifier-results/store/actions/index.d.ts.map +1 -0
  67. package/types/x-modules/identifier-results/store/index.d.ts +1 -4
  68. package/types/x-modules/identifier-results/store/index.d.ts.map +1 -1
  69. package/types/x-modules/next-queries/components/next-queries-list.vue.d.ts +1 -0
  70. package/types/x-modules/next-queries/components/next-queries-list.vue.d.ts.map +1 -1
  71. package/types/x-modules/search/store/actions/fetch-and-save-search-response.action.d.ts.map +1 -1
  72. package/types/x-modules/search/store/actions/index.d.ts +8 -0
  73. package/types/x-modules/search/store/actions/index.d.ts.map +1 -0
  74. package/types/x-modules/search/store/actions/save-search-response.action.d.ts +12 -0
  75. package/types/x-modules/search/store/actions/save-search-response.action.d.ts.map +1 -0
  76. package/types/x-modules/search/store/getters/index.d.ts +3 -0
  77. package/types/x-modules/search/store/getters/index.d.ts.map +1 -0
  78. package/types/x-modules/search/store/index.d.ts +2 -4
  79. package/types/x-modules/search/store/index.d.ts.map +1 -1
  80. package/types/x-modules/search/store/module.d.ts.map +1 -1
  81. package/types/x-modules/search/store/types.d.ts +6 -0
  82. package/types/x-modules/search/store/types.d.ts.map +1 -1
  83. package/types/x-modules/search/wiring.d.ts +2 -8
  84. package/types/x-modules/search/wiring.d.ts.map +1 -1
  85. package/types/x-modules/url/components/url-handler.vue.d.ts.map +1 -1
  86. package/docs/API-reference/api/x-components.setpagesize.md +0 -13
package/js/x-modules/extra-params/components/snippet-config-extra-params.vue.js.map CHANGED
@@ -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';\n import { SnippetConfig } from '../../../x-installer';\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 not allowed to be sent as extra params.\n *\n * @internal\n */\n protected notAllowedExtraParams: Array<keyof SnippetConfig> = [\n 'callbacks',\n 'productId',\n 'instance',\n 'lang',\n 'searchLang',\n 'consent',\n 'documentDirection',\n 'currency'\n ];\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.notAllowedExtraParams.includes(name)) {\n return;\n }\n this.$set(this.extraParams, name, value);\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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
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 'instance',\n 'lang',\n 'searchLang',\n 'consent',\n 'documentDirection',\n 'currency'\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 return;\n }\n this.$set(this.extraParams, name, value);\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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
package/js/x-modules/extra-params/components/snippet-config-extra-params.vue_rollup-plugin-vue_script.vue.js CHANGED
@@ -2,119 +2,6 @@ import { __decorate } from 'tslib';
2
2
  import { forEach } from '@empathyco/x-utils';
3
3
  import Vue from 'vue';
4
4
  import { Inject, Prop, Watch, Component } from 'vue-property-decorator';
5
- import '../../../components/animations/animate-width.vue.js';
6
- import '../../../components/animations/collapse-height.vue.js';
7
- import '../../../components/animations/collapse-width.vue.js';
8
- import '../../../components/animations/cross-fade.vue.js';
9
- import '../../../components/animations/fade-and-slide.vue.js';
10
- import '../../../components/animations/staggered-fade-and-slide.vue.js';
11
- import '../../../components/animations/staggering-transition-group.vue_rollup-plugin-vue_script.vue.js';
12
- import 'vue-runtime-helpers/dist/normalize-component.mjs';
13
- import 'vue-runtime-helpers/dist/inject-style/browser.mjs';
14
- import '../../../components/animations/animate-clip-path/animate-clip-path.style.scss.js';
15
- import '../../../components/animations/animate-scale/animate-scale.style.scss.js';
16
- import '../../../components/animations/animate-translate/animate-translate.style.scss.js';
17
- import '../../../components/column-picker/base-column-picker-dropdown.vue.js';
18
- import '../../../components/column-picker/base-column-picker-list.vue.js';
19
- import '../../../components/column-picker/column-picker.mixin.js';
20
- import '../../../components/currency/base-currency.vue.js';
21
- import '../../../components/filters/labels/base-price-filter-label.vue_rollup-plugin-vue_script.vue.js';
22
- import '../../../components/filters/labels/base-rating-filter-label.vue.js';
23
- import '../../../components/icons/arrow-down.vue.js';
24
- import '../../../components/icons/arrow-left.vue.js';
25
- import '../../../components/icons/arrow-right.vue.js';
26
- import '../../../components/icons/arrow-up.vue.js';
27
- import '../../../components/icons/bag.vue.js';
28
- import '../../../components/icons/bar-code.vue.js';
29
- import '../../../components/icons/barcode-tiny.vue.js';
30
- import '../../../components/icons/cart.vue.js';
31
- import '../../../components/icons/check-tiny.vue.js';
32
- import '../../../components/icons/check.vue.js';
33
- import '../../../components/icons/checkbox-card-selected.vue.js';
34
- import '../../../components/icons/checkbox-card-unselected.vue.js';
35
- import '../../../components/icons/checkbox-selected.vue.js';
36
- import '../../../components/icons/checkbox-unselected.vue.js';
37
- import '../../../components/icons/chevron-down.vue.js';
38
- import '../../../components/icons/chevron-left.vue.js';
39
- import '../../../components/icons/chevron-right.vue.js';
40
- import '../../../components/icons/chevron-tiny-down.vue.js';
41
- import '../../../components/icons/chevron-tiny-left.vue.js';
42
- import '../../../components/icons/chevron-tiny-right.vue.js';
43
- import '../../../components/icons/chevron-tiny-up.vue.js';
44
- import '../../../components/icons/chevron-up.vue.js';
45
- import '../../../components/icons/cross-tiny.vue.js';
46
- import '../../../components/icons/cross.vue.js';
47
- import '../../../components/icons/curated-check.vue.js';
48
- import '../../../components/icons/filters.vue.js';
49
- import '../../../components/icons/grid-1-col.vue.js';
50
- import '../../../components/icons/grid-2-col.vue.js';
51
- import '../../../components/icons/grid-2-rows.vue.js';
52
- import '../../../components/icons/hide.vue.js';
53
- import '../../../components/icons/history-tiny.vue.js';
54
- import '../../../components/icons/history.vue.js';
55
- import '../../../components/icons/light-bulb-off.vue.js';
56
- import '../../../components/icons/light-bulb-on.vue.js';
57
- import '../../../components/icons/menu.vue.js';
58
- import '../../../components/icons/minus-tiny.vue.js';
59
- import '../../../components/icons/minus.vue.js';
60
- import '../../../components/icons/nq-1.vue.js';
61
- import '../../../components/icons/nq-2.vue.js';
62
- import '../../../components/icons/nq-3.vue.js';
63
- import '../../../components/icons/nq-4.vue.js';
64
- import '../../../components/icons/plus.vue.js';
65
- import '../../../components/icons/search.vue.js';
66
- import '../../../components/icons/show.vue.js';
67
- import '../../../components/icons/star.vue.js';
68
- import '../../../components/icons/search-tiny.vue.js';
69
- import '../../../components/icons/tag.vue.js';
70
- import '../../../components/icons/trash-open.vue.js';
71
- import '../../../components/icons/trash.vue.js';
72
- import '../../../components/icons/trending-tiny.vue.js';
73
- import '../../../components/icons/trending.vue.js';
74
- import '../../../components/icons/user.vue.js';
75
- import '../../../components/layouts/fixed-header-and-asides-layout.vue.js';
76
- import '../../../components/layouts/multi-column-max-width-layout.vue.js';
77
- import '../../../components/layouts/single-column-layout.vue.js';
78
- import '../../../components/modals/base-events-modal-close.vue.js';
79
- import '../../../components/modals/base-events-modal.vue.js';
80
- import '../../../components/modals/base-events-modal-open.vue.js';
81
- import '../../../components/modals/base-modal.vue.js';
82
- import '../../../components/modals/base-id-modal.vue.js';
83
- import '../../../components/modals/base-id-modal-close.vue.js';
84
- import '../../../components/modals/base-id-modal-open.vue.js';
85
- import '../../../components/panels/base-header-toggle-panel.vue.js';
86
- import '../../../components/panels/base-toggle-panel.vue.js';
87
- import '../../../components/panels/base-id-toggle-panel.vue.js';
88
- import '../../../components/panels/base-id-toggle-panel-button.vue.js';
89
- import '../../../components/result/base-result-add-to-cart.vue.js';
90
- import '../../../components/result/base-result-current-price.vue.js';
91
- import '../../../components/result/base-result-image.vue.js';
92
- import '../../../components/result/base-result-link.vue.js';
93
- import '../../../components/result/base-result-previous-price.vue.js';
94
- import '../../../components/result/base-result-fallback-image.vue.js';
95
- import '../../../components/result/base-result-placeholder-image.vue.js';
96
- import '../../../components/result/base-result-rating.vue.js';
97
- import '../../../components/scroll/base-scroll.vue.js';
98
- import '../../../components/scroll/scroll.mixin.js';
99
- import '../../../components/suggestions/base-suggestion.vue.js';
100
- import '../../../components/suggestions/base-suggestions.vue.js';
101
- import '../../../components/auto-progress-bar.vue.js';
102
- import '../../../components/base-event-button.vue.js';
103
- import '../../../components/base-dropdown.vue.js';
104
- import '../../../components/base-grid.vue.js';
105
- import '../../../components/base-keyboard-navigation.vue.js';
106
- import '../../../components/base-rating.vue.js';
107
- import '../../../components/base-variable-column-grid.vue.js';
108
- import '../../../components/no-element.js';
109
- import '../../../components/sliding-panel.vue.js';
110
- import '../../../components/items-list.vue.js';
111
- import '../../../components/location-provider.vue_rollup-plugin-vue_script.vue.js';
112
- import '../../../components/global-x-bus.vue_rollup-plugin-vue_script.vue.js';
113
- import '../../../components/snippet-callbacks.vue.js';
114
- import 'rxjs';
115
- import 'rxjs/operators';
116
- import 'vue-class-component';
117
- import '../../../components/items-list-injection.mixin.js';
118
5
  import { xComponentMixin } from '../../../components/x-component.mixin.js';
119
6
  import { extraParamsXModule } from '../x-module.js';
120
7
  import __vue_component__ from './extra-params.vue.js';
@@ -137,21 +24,6 @@ let SnippetConfigExtraParams = class SnippetConfigExtraParams extends Vue {
137
24
  * @internal
138
25
  */
139
26
  this.extraParams = {};
140
- /**
141
- * Collection of properties from the snippet config not allowed to be sent as extra params.
142
- *
143
- * @internal
144
- */
145
- this.notAllowedExtraParams = [
146
- 'callbacks',
147
- 'productId',
148
- 'instance',
149
- 'lang',
150
- 'searchLang',
151
- 'consent',
152
- 'documentDirection',
153
- 'currency'
154
- ];
155
27
  }
156
28
  /**
157
29
  * Updates the extraParams object when the snippet config changes.
@@ -162,7 +34,7 @@ let SnippetConfigExtraParams = class SnippetConfigExtraParams extends Vue {
162
34
  */
163
35
  syncExtraParams(snippetConfig) {
164
36
  forEach({ ...this.values, ...snippetConfig }, (name, value) => {
165
- if (this.notAllowedExtraParams.includes(name)) {
37
+ if (this.excludedExtraParams.includes(name)) {
166
38
  return;
167
39
  }
168
40
  this.$set(this.extraParams, name, value);
@@ -175,6 +47,20 @@ __decorate([
175
47
  __decorate([
176
48
  Prop()
177
49
  ], SnippetConfigExtraParams.prototype, "values", void 0);
50
+ __decorate([
51
+ Prop({
52
+ default: () => [
53
+ 'callbacks',
54
+ 'productId',
55
+ 'instance',
56
+ 'lang',
57
+ 'searchLang',
58
+ 'consent',
59
+ 'documentDirection',
60
+ 'currency'
61
+ ]
62
+ })
63
+ ], SnippetConfigExtraParams.prototype, "excludedExtraParams", void 0);
178
64
  __decorate([
179
65
  Watch('snippetConfig', { deep: true, immediate: true })
180
66
  ], SnippetConfigExtraParams.prototype, "syncExtraParams", null);
package/js/x-modules/extra-params/components/snippet-config-extra-params.vue_rollup-plugin-vue_script.vue.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"snippet-config-extra-params.vue_rollup-plugin-vue_script.vue.js","sources":["../../../../../src/x-modules/extra-params/components/snippet-config-extra-params.vue?rollup-plugin-vue=script.ts"],"sourcesContent":["\n\n\n\n\nimport { forEach, Dictionary } from '@empathyco/x-utils';\nimport Vue from 'vue';\nimport { Component, Watch, Inject, Prop } from 'vue-property-decorator';\nimport { xComponentMixin } from '../../../components';\nimport { SnippetConfig } from '../../../x-installer';\nimport { extraParamsXModule } from '../x-module';\nimport 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})\nexport 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 not allowed to be sent as extra params.\n *\n * @internal\n */\n protected notAllowedExtraParams: Array<keyof SnippetConfig> = [\n 'callbacks',\n 'productId',\n 'instance',\n 'lang',\n 'searchLang',\n 'consent',\n 'documentDirection',\n 'currency'\n ];\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.notAllowedExtraParams.includes(name)) {\n return;\n }\n this.$set(this.extraParams, name, value);\n });\n }\n}\n"],"names":["ExtraParams"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAaA;;;;;;AAUA,IAAqB,wBAAwB,GAA7C,MAAqB,wBAAyB,SAAQ,GAAG;IAAzD;;;;;;;;;;QAyBY,gBAAW,GAAwB,EAAE,CAAC;;;;;;QAOtC,0BAAqB,GAA+B;YAC5D,WAAW;YACX,WAAW;YACX,UAAU;YACV,MAAM;YACN,YAAY;YACZ,SAAS;YACT,mBAAmB;YACnB,UAAU;SACX,CAAC;KAkBH;;;;;;;;IARC,eAAe,CAAC,aAA4B;QAC1C,OAAO,CAAC,EAAE,GAAG,IAAI,CAAC,MAAM,EAAE,GAAG,aAAa,EAAE,EAAE,CAAC,IAAI,EAAE,KAAK;YACxD,IAAI,IAAI,CAAC,qBAAqB,CAAC,QAAQ,CAAC,IAAI,CAAC,EAAE;gBAC7C,OAAO;aACR;YACD,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,WAAW,EAAE,IAAI,EAAE,KAAK,CAAC,CAAC;SAC1C,CAAC,CAAC;KACJ;CACF,CAAA;AApDC;IADC,MAAM,CAAC,eAAe,CAAC;+DACa;AAQrC;IADC,IAAI,EAAE;wDACgC;AAoCvC;IADC,KAAK,CAAC,eAAe,EAAE,EAAE,IAAI,EAAE,IAAI,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC;+DAQvD;AA1DkB,wBAAwB;IAJ5C,SAAS,CAAC;QACT,UAAU,EAAE,eAAEA,iBAAW,EAAE;QAC3B,MAAM,EAAE,CAAC,eAAe,CAAC,kBAAkB,CAAC,CAAC;KAC9C,CAAC;GACmB,wBAAwB,CA2D5C;aA3DoB,wBAAwB;;;;"}
1
+ {"version":3,"file":"snippet-config-extra-params.vue_rollup-plugin-vue_script.vue.js","sources":["../../../../../src/x-modules/extra-params/components/snippet-config-extra-params.vue?rollup-plugin-vue=script.ts"],"sourcesContent":["\n\n\n\n\nimport { forEach, Dictionary } from '@empathyco/x-utils';\nimport Vue from 'vue';\nimport { Component, Watch, Inject, Prop } from 'vue-property-decorator';\nimport { xComponentMixin } from '../../../components/x-component.mixin';\nimport { SnippetConfig } from '../../../x-installer/api/api.types';\nimport { extraParamsXModule } from '../x-module';\nimport 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})\nexport 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 'instance',\n 'lang',\n 'searchLang',\n 'consent',\n 'documentDirection',\n 'currency'\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 return;\n }\n this.$set(this.extraParams, name, value);\n });\n }\n}\n"],"names":["ExtraParams"],"mappings":";;;;;;;;AAaA;;;;;;AAUA,IAAqB,wBAAwB,GAA7C,MAAqB,wBAAyB,SAAQ,GAAG;IAAzD;;;;;;;;;;QAyBY,gBAAW,GAAwB,EAAE,CAAC;KAsCjD;;;;;;;;IARC,eAAe,CAAC,aAA4B;QAC1C,OAAO,CAAC,EAAE,GAAG,IAAI,CAAC,MAAM,EAAE,GAAG,aAAa,EAAE,EAAE,CAAC,IAAI,EAAE,KAAK;YACxD,IAAI,IAAI,CAAC,mBAAmB,CAAC,QAAQ,CAAC,IAAI,CAAC,EAAE;gBAC3C,OAAO;aACR;YACD,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,WAAW,EAAE,IAAI,EAAE,KAAK,CAAC,CAAC;SAC1C,CAAC,CAAC;KACJ;CACF,CAAA;AAxDC;IADC,MAAM,CAAC,eAAe,CAAC;+DACa;AAQrC;IADC,IAAI,EAAE;wDACgC;AA8BvC;IAZC,IAAI,CAAC;QACJ,OAAO,EAAE,MAAkC;YACzC,WAAW;YACX,WAAW;YACX,UAAU;YACV,MAAM;YACN,YAAY;YACZ,SAAS;YACT,mBAAmB;YACnB,UAAU;SACX;KACF,CAAC;qEACyD;AAU3D;IADC,KAAK,CAAC,eAAe,EAAE,EAAE,IAAI,EAAE,IAAI,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC;+DAQvD;AA9DkB,wBAAwB;IAJ5C,SAAS,CAAC;QACT,UAAU,EAAE,eAAEA,iBAAW,EAAE;QAC3B,MAAM,EAAE,CAAC,eAAe,CAAC,kBAAkB,CAAC,CAAC;KAC9C,CAAC;GACmB,wBAAwB,CA+D5C;aA/DoB,wBAAwB;;;;"}
package/js/x-modules/next-queries/components/next-queries-list.vue.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"next-queries-list.vue.js","sources":["../../../../../src/x-modules/next-queries/components/next-queries-list.vue"],"sourcesContent":["<template>\n <NoElement>\n <!--\n @slot Next queries list layout.\n @binding {SearchItem[]} items - Next queries groups plus the injected list items to\n render.\n @binding {Vue | string} animation - Animation to animate the elements.\n -->\n <slot v-bind=\"{ items, animation }\">\n <ItemsList :animation=\"animation\" :items=\"items\">\n <template v-for=\"(_, slotName) in $scopedSlots\" v-slot:[slotName]=\"{ item }\">\n <slot :name=\"slotName\" :item=\"item\" />\n </template>\n </ItemsList>\n </slot>\n </NoElement>\n</template>\n\n<script lang=\"ts\">\n import { NextQuery } from '@empathyco/x-types';\n import { mixins } from 'vue-class-component';\n import { Component, Prop } from 'vue-property-decorator';\n import { Getter } from '../../../components/decorators/store.decorators';\n import { NoElement } from '../../../components/no-element';\n import { ItemsListInjectionMixin } from '../../../components/items-list-injection.mixin';\n import ItemsList from '../../../components/items-list.vue';\n import { xComponentMixin } from '../../../components/x-component.mixin';\n import { groupItemsBy } from '../../../utils/array';\n import { ListItem } from '../../../utils/types';\n import ResultsList from '../../search/components/results-list.vue';\n import { NextQueriesGroup } from '../types';\n import { nextQueriesXModule } from '../x-module';\n\n /**\n * Component that inserts groups of next queries in different positions of the injected search\n * items list, based on the provided configuration.\n *\n * @public\n */\n @Component({\n components: {\n ResultsList,\n NoElement,\n ItemsList\n },\n mixins: [xComponentMixin(nextQueriesXModule)]\n })\n export default class NextQueriesList extends mixins(ItemsListInjectionMixin) {\n /**\n * Animation component that will be used to animate the next queries groups.\n *\n * @public\n */\n @Prop()\n protected animation?: Vue | string;\n\n /**\n * The first index to insert a group of next queries at.\n *\n * @public\n */\n @Prop({ default: 24 })\n public offset!: number;\n\n /**\n * The items cycle size to keep inserting next queries groups at.\n *\n * @public\n */\n @Prop({ default: 24 })\n public frequency!: number;\n\n /**\n * The maximum amount of next queries to add in a single group.\n *\n * @public\n */\n @Prop({ default: 4 })\n public maxNextQueriesPerGroup!: number;\n\n /**\n * The maximum number of groups to insert into the injected list items list.\n *\n * @public\n */\n @Prop()\n public maxGroups!: number;\n\n /**\n * The state next queries.\n *\n * @internal\n */\n @Getter('nextQueries', 'nextQueries')\n public nextQueries!: NextQuery[];\n\n /**\n * The grouped next queries based on the given config.\n *\n * @returns A list of next queries groups.\n * @internal\n */\n protected get nextQueriesGroups(): NextQueriesGroup[] {\n return Object.values(\n groupItemsBy(this.nextQueries, (_, index) =>\n Math.floor(index / this.maxNextQueriesPerGroup)\n )\n )\n .slice(0, this.maxGroups)\n .map(nextQueries => ({\n modelName: 'NextQueriesGroup' as const,\n id: nextQueries.map(nextQuery => nextQuery.query).join(','),\n nextQueries\n }));\n }\n\n /**\n * New list of {@link ListItem}s to render.\n *\n * @returns The new list of {@link ListItem}s with the next queries groups inserted.\n * @internal\n */\n public override get items(): ListItem[] {\n if (!this.injectedListItems) {\n return this.nextQueriesGroups;\n }\n\n return this.nextQueriesGroups.reduce(\n (items, nextQueriesGroup, index) => {\n const targetIndex = this.offset + this.frequency * index;\n if (targetIndex <= items.length) {\n items.splice(targetIndex, 0, nextQueriesGroup);\n }\n return items;\n },\n [...this.injectedListItems]\n );\n }\n }\n</script>\n\n<docs lang=\"mdx\">\n## Events\n\nThis component emits no events.\n\n## See it in action\n\n<!-- prettier-ignore-start -->\n:::warning Backend microservice required\nTo use this component, the <b>QuerySignals</b> microservice must be\nimplemented.\n:::\n<!-- prettier-ignore-end -->\n\nUsually, this component is going to be used together with the `ResultsList` one. Next queries groups\nwill be inserted between the results, guiding users to discover new searches directly from the\nresults list.\n\n```vue live\n<template>\n <div>\n <SearchInput />\n <ResultsList>\n <NextQueriesList />\n </ResultsList>\n </div>\n</template>\n\n<script>\n import { NextQueriesList } from '@empathyco/x-components/next-queries';\n import { ResultsList } from '@empathyco/x-components/search';\n import { SearchInput } from '@empathyco/x-components/search-box';\n\n export default {\n name: 'NextQueriesListDemo',\n components: {\n NextQueriesList,\n ResultsList,\n SearchInput\n }\n };\n</script>\n```\n\n### Play with the index that next queries groups are inserted at\n\nThe component allows to customise where are the next queries groups inserted. In the following\nexample, the first group of next queries will be inserted at the index `48` (`offset`), and then a\nsecond group will be inserted at index `120` because of the `frequency` prop configured to `72`.\nFinally, a third group will be inserted at index `192`. Because `maxGroups` is configured to `3`, no\nmore groups will be inserted. Each one of this groups will have up to `6` next queries\n(`maxNextQueriesPerGroup`).\n\n```vue live\n<template>\n <div>\n <SearchInput />\n <ResultsList>\n <NextQueriesList :offset=\"48\" :frequency=\"72\" :maxNextQueriesPerGroup=\"6\" :maxGroups=\"3\" />\n </ResultsList>\n </div>\n</template>\n\n<script>\n import { NextQueriesList } from '@empathyco/x-components/next-queries';\n import { ResultsList } from '@empathyco/x-components/search';\n import { SearchInput } from '@empathyco/x-components/search-box';\n\n export default {\n name: 'NextQueriesListDemo',\n components: {\n NextQueriesList,\n ResultsList,\n SearchInput\n }\n };\n</script>\n```\n\n### Customise the layout of the component\n\nThis component will render by default the `id` of each search item, both the injected, and for the\ngroups of next queries generated, but the common case is to integrate it with another layout\ncomponent, for example the `BaseGrid`. To do so, you can use the `default` slot\n\n```vue\n<template>\n <div>\n <SearchInput />\n <ResultsList>\n <NextQueriesList\n :offset=\"48\"\n :frequency=\"72\"\n :maxNextQueriesPerGroup=\"6\"\n :maxGroups=\"3\"\n #default=\"{ items }\"\n >\n <BaseGrid :items=\"items\" :animation=\"animation\">\n <template #next-queries-group=\"{ item }\">\n <span>NextQueriesGroup: {{ item.queries.join(', ') }}</span>\n </template>\n <template #result=\"{ item }\">\n <span>Result: {{ item.name }}</span>\n </template>\n <template #default=\"{ item }\">\n <span>Default: {{ item }}</span>\n </template>\n </BaseGrid>\n </NextQueriesList>\n </ResultsList>\n </div>\n</template>\n\n<script>\n import { NextQueriesList } from '@empathyco/x-components/next-queries';\n import { ResultsList } from '@empathyco/x-components/search';\n import { SearchInput } from '@empathyco/x-components/search-box';\n import { BaseGrid } from '@empathyco/x-components';\n\n export default {\n name: 'NextQueriesListDemo',\n components: {\n NextQueriesList,\n ResultsList,\n BaseGrid,\n SearchInput\n }\n };\n</script>\n```\n</docs>\n"],"names":[],"mappings":";;;;AAEA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
1
+ {"version":3,"file":"next-queries-list.vue.js","sources":["../../../../../src/x-modules/next-queries/components/next-queries-list.vue"],"sourcesContent":["<template>\n <NoElement>\n <!--\n @slot Next queries list layout.\n @binding {SearchItem[]} items - Next queries groups plus the injected list items to\n render.\n @binding {Vue | string} animation - Animation to animate the elements.\n -->\n <slot v-bind=\"{ items, animation }\">\n <ItemsList :animation=\"animation\" :items=\"items\">\n <template v-for=\"(_, slotName) in $scopedSlots\" v-slot:[slotName]=\"{ item }\">\n <slot :name=\"slotName\" :item=\"item\" />\n </template>\n </ItemsList>\n </slot>\n </NoElement>\n</template>\n\n<script lang=\"ts\">\n import Vue from 'vue';\n import { NextQuery } from '@empathyco/x-types';\n import { mixins } from 'vue-class-component';\n import { Component, Prop } from 'vue-property-decorator';\n import { Getter } from '../../../components/decorators/store.decorators';\n import { NoElement } from '../../../components/no-element';\n import { ItemsListInjectionMixin } from '../../../components/items-list-injection.mixin';\n import ItemsList from '../../../components/items-list.vue';\n import { xComponentMixin } from '../../../components/x-component.mixin';\n import { groupItemsBy } from '../../../utils/array';\n import { ListItem } from '../../../utils/types';\n import ResultsList from '../../search/components/results-list.vue';\n import { NextQueriesGroup } from '../types';\n import { nextQueriesXModule } from '../x-module';\n\n /**\n * Component that inserts groups of next queries in different positions of the injected search\n * items list, based on the provided configuration.\n *\n * @public\n */\n @Component({\n components: {\n ResultsList,\n NoElement,\n ItemsList\n },\n mixins: [xComponentMixin(nextQueriesXModule)]\n })\n export default class NextQueriesList extends mixins(ItemsListInjectionMixin) {\n /**\n * Animation component that will be used to animate the next queries groups.\n *\n * @public\n */\n @Prop()\n protected animation?: Vue | string;\n\n /**\n * The first index to insert a group of next queries at.\n *\n * @public\n */\n @Prop({ default: 24 })\n public offset!: number;\n\n /**\n * The items cycle size to keep inserting next queries groups at.\n *\n * @public\n */\n @Prop({ default: 24 })\n public frequency!: number;\n\n /**\n * The maximum amount of next queries to add in a single group.\n *\n * @public\n */\n @Prop({ default: 4 })\n public maxNextQueriesPerGroup!: number;\n\n /**\n * The maximum number of groups to insert into the injected list items list.\n *\n * @public\n */\n @Prop()\n public maxGroups!: number;\n\n /**\n * The state next queries.\n *\n * @internal\n */\n @Getter('nextQueries', 'nextQueries')\n public nextQueries!: NextQuery[];\n\n /**\n * The grouped next queries based on the given config.\n *\n * @returns A list of next queries groups.\n * @internal\n */\n protected get nextQueriesGroups(): NextQueriesGroup[] {\n return Object.values(\n groupItemsBy(this.nextQueries, (_, index) =>\n Math.floor(index / this.maxNextQueriesPerGroup)\n )\n )\n .slice(0, this.maxGroups)\n .map(nextQueries => ({\n modelName: 'NextQueriesGroup' as const,\n id: nextQueries.map(nextQuery => nextQuery.query).join(','),\n nextQueries\n }));\n }\n\n /**\n * New list of {@link ListItem}s to render.\n *\n * @returns The new list of {@link ListItem}s with the next queries groups inserted.\n * @internal\n */\n public override get items(): ListItem[] {\n if (!this.injectedListItems) {\n return this.nextQueriesGroups;\n }\n\n return this.nextQueriesGroups.reduce(\n (items, nextQueriesGroup, index) => {\n const targetIndex = this.offset + this.frequency * index;\n if (targetIndex <= items.length) {\n items.splice(targetIndex, 0, nextQueriesGroup);\n }\n return items;\n },\n [...this.injectedListItems]\n );\n }\n }\n</script>\n\n<docs lang=\"mdx\">\n## Events\n\nThis component emits no events.\n\n## See it in action\n\n<!-- prettier-ignore-start -->\n:::warning Backend microservice required\nTo use this component, the <b>QuerySignals</b> microservice must be\nimplemented.\n:::\n<!-- prettier-ignore-end -->\n\nUsually, this component is going to be used together with the `ResultsList` one. Next queries groups\nwill be inserted between the results, guiding users to discover new searches directly from the\nresults list.\n\n```vue live\n<template>\n <div>\n <SearchInput />\n <ResultsList>\n <NextQueriesList />\n </ResultsList>\n </div>\n</template>\n\n<script>\n import { NextQueriesList } from '@empathyco/x-components/next-queries';\n import { ResultsList } from '@empathyco/x-components/search';\n import { SearchInput } from '@empathyco/x-components/search-box';\n\n export default {\n name: 'NextQueriesListDemo',\n components: {\n NextQueriesList,\n ResultsList,\n SearchInput\n }\n };\n</script>\n```\n\n### Play with the index that next queries groups are inserted at\n\nThe component allows to customise where are the next queries groups inserted. In the following\nexample, the first group of next queries will be inserted at the index `48` (`offset`), and then a\nsecond group will be inserted at index `120` because of the `frequency` prop configured to `72`.\nFinally, a third group will be inserted at index `192`. Because `maxGroups` is configured to `3`, no\nmore groups will be inserted. Each one of this groups will have up to `6` next queries\n(`maxNextQueriesPerGroup`).\n\n```vue live\n<template>\n <div>\n <SearchInput />\n <ResultsList>\n <NextQueriesList :offset=\"48\" :frequency=\"72\" :maxNextQueriesPerGroup=\"6\" :maxGroups=\"3\" />\n </ResultsList>\n </div>\n</template>\n\n<script>\n import { NextQueriesList } from '@empathyco/x-components/next-queries';\n import { ResultsList } from '@empathyco/x-components/search';\n import { SearchInput } from '@empathyco/x-components/search-box';\n\n export default {\n name: 'NextQueriesListDemo',\n components: {\n NextQueriesList,\n ResultsList,\n SearchInput\n }\n };\n</script>\n```\n\n### Customise the layout of the component\n\nThis component will render by default the `id` of each search item, both the injected, and for the\ngroups of next queries generated, but the common case is to integrate it with another layout\ncomponent, for example the `BaseGrid`. To do so, you can use the `default` slot\n\n```vue\n<template>\n <div>\n <SearchInput />\n <ResultsList>\n <NextQueriesList\n :offset=\"48\"\n :frequency=\"72\"\n :maxNextQueriesPerGroup=\"6\"\n :maxGroups=\"3\"\n #default=\"{ items }\"\n >\n <BaseGrid :items=\"items\" :animation=\"animation\">\n <template #next-queries-group=\"{ item }\">\n <span>NextQueriesGroup: {{ item.queries.join(', ') }}</span>\n </template>\n <template #result=\"{ item }\">\n <span>Result: {{ item.name }}</span>\n </template>\n <template #default=\"{ item }\">\n <span>Default: {{ item }}</span>\n </template>\n </BaseGrid>\n </NextQueriesList>\n </ResultsList>\n </div>\n</template>\n\n<script>\n import { NextQueriesList } from '@empathyco/x-components/next-queries';\n import { ResultsList } from '@empathyco/x-components/search';\n import { SearchInput } from '@empathyco/x-components/search-box';\n import { BaseGrid } from '@empathyco/x-components';\n\n export default {\n name: 'NextQueriesListDemo',\n components: {\n NextQueriesList,\n ResultsList,\n BaseGrid,\n SearchInput\n }\n };\n</script>\n```\n</docs>\n"],"names":[],"mappings":";;;;AAEA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
package/js/x-modules/next-queries/components/next-queries-list.vue_rollup-plugin-vue_script.vue.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"next-queries-list.vue_rollup-plugin-vue_script.vue.js","sources":["../../../../../src/x-modules/next-queries/components/next-queries-list.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\nimport { NextQuery } from '@empathyco/x-types';\nimport { mixins } from 'vue-class-component';\nimport { Component, Prop } from 'vue-property-decorator';\nimport { Getter } from '../../../components/decorators/store.decorators';\nimport { NoElement } from '../../../components/no-element';\nimport { ItemsListInjectionMixin } from '../../../components/items-list-injection.mixin';\nimport ItemsList from '../../../components/items-list.vue';\nimport { xComponentMixin } from '../../../components/x-component.mixin';\nimport { groupItemsBy } from '../../../utils/array';\nimport { ListItem } from '../../../utils/types';\nimport ResultsList from '../../search/components/results-list.vue';\nimport { NextQueriesGroup } from '../types';\nimport { nextQueriesXModule } from '../x-module';\n\n/**\n * Component that inserts groups of next queries in different positions of the injected search\n * items list, based on the provided configuration.\n *\n * @public\n */\n@Component({\n components: {\n ResultsList,\n NoElement,\n ItemsList\n },\n mixins: [xComponentMixin(nextQueriesXModule)]\n})\nexport default class NextQueriesList extends mixins(ItemsListInjectionMixin) {\n /**\n * Animation component that will be used to animate the next queries groups.\n *\n * @public\n */\n @Prop()\n protected animation?: Vue | string;\n\n /**\n * The first index to insert a group of next queries at.\n *\n * @public\n */\n @Prop({ default: 24 })\n public offset!: number;\n\n /**\n * The items cycle size to keep inserting next queries groups at.\n *\n * @public\n */\n @Prop({ default: 24 })\n public frequency!: number;\n\n /**\n * The maximum amount of next queries to add in a single group.\n *\n * @public\n */\n @Prop({ default: 4 })\n public maxNextQueriesPerGroup!: number;\n\n /**\n * The maximum number of groups to insert into the injected list items list.\n *\n * @public\n */\n @Prop()\n public maxGroups!: number;\n\n /**\n * The state next queries.\n *\n * @internal\n */\n @Getter('nextQueries', 'nextQueries')\n public nextQueries!: NextQuery[];\n\n /**\n * The grouped next queries based on the given config.\n *\n * @returns A list of next queries groups.\n * @internal\n */\n protected get nextQueriesGroups(): NextQueriesGroup[] {\n return Object.values(\n groupItemsBy(this.nextQueries, (_, index) =>\n Math.floor(index / this.maxNextQueriesPerGroup)\n )\n )\n .slice(0, this.maxGroups)\n .map(nextQueries => ({\n modelName: 'NextQueriesGroup' as const,\n id: nextQueries.map(nextQuery => nextQuery.query).join(','),\n nextQueries\n }));\n }\n\n /**\n * New list of {@link ListItem}s to render.\n *\n * @returns The new list of {@link ListItem}s with the next queries groups inserted.\n * @internal\n */\n public override get items(): ListItem[] {\n if (!this.injectedListItems) {\n return this.nextQueriesGroups;\n }\n\n return this.nextQueriesGroups.reduce(\n (items, nextQueriesGroup, index) => {\n const targetIndex = this.offset + this.frequency * index;\n if (targetIndex <= items.length) {\n items.splice(targetIndex, 0, nextQueriesGroup);\n }\n return items;\n },\n [...this.injectedListItems]\n );\n }\n}\n"],"names":["ResultsList","ItemsList"],"mappings":";;;;;;;;;;;;AAiCA;;;;;;AAcA,IAAqB,eAAe,GAApC,MAAqB,eAAgB,SAAQ,MAAM,CAAC,uBAAuB,CAAC;;;;;;;IAuD1E,IAAc,iBAAiB;QAC7B,OAAO,MAAM,CAAC,MAAM,CAClB,YAAY,CAAC,IAAI,CAAC,WAAW,EAAE,CAAC,CAAC,EAAE,KAAK,KACtC,IAAI,CAAC,KAAK,CAAC,KAAK,GAAG,IAAI,CAAC,sBAAsB,CAAC,CAChD,CACF;aACE,KAAK,CAAC,CAAC,EAAE,IAAI,CAAC,SAAS,CAAC;aACxB,GAAG,CAAC,WAAW,KAAK;YACnB,SAAS,EAAE,kBAA2B;YACtC,EAAE,EAAE,WAAW,CAAC,GAAG,CAAC,SAAS,IAAI,SAAS,CAAC,KAAK,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC;YAC3D,WAAW;SACZ,CAAC,CAAC,CAAC;KACP;;;;;;;IAQD,IAAoB,KAAK;QACvB,IAAI,CAAC,IAAI,CAAC,iBAAiB,EAAE;YAC3B,OAAO,IAAI,CAAC,iBAAiB,CAAC;SAC/B;QAED,OAAO,IAAI,CAAC,iBAAiB,CAAC,MAAM,CAClC,CAAC,KAAK,EAAE,gBAAgB,EAAE,KAAK;YAC7B,MAAM,WAAW,GAAG,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC,SAAS,GAAG,KAAK,CAAC;YACzD,IAAI,WAAW,IAAI,KAAK,CAAC,MAAM,EAAE;gBAC/B,KAAK,CAAC,MAAM,CAAC,WAAW,EAAE,CAAC,EAAE,gBAAgB,CAAC,CAAC;aAChD;YACD,OAAO,KAAK,CAAC;SACd,EACD,CAAC,GAAG,IAAI,CAAC,iBAAiB,CAAC,CAC5B,CAAC;KACH;CACF,CAAA;AApFC;IADC,IAAI,EAAE;kDAC4B;AAQnC;IADC,IAAI,CAAC,EAAE,OAAO,EAAE,EAAE,EAAE,CAAC;+CACC;AAQvB;IADC,IAAI,CAAC,EAAE,OAAO,EAAE,EAAE,EAAE,CAAC;kDACI;AAQ1B;IADC,IAAI,CAAC,EAAE,OAAO,EAAE,CAAC,EAAE,CAAC;+DACkB;AAQvC;IADC,IAAI,EAAE;kDACmB;AAQ1B;IADC,MAAM,CAAC,aAAa,EAAE,aAAa,CAAC;oDACJ;AA/Cd,eAAe;IARnC,SAAS,CAAC;QACT,UAAU,EAAE;yBACVA,iBAAW;YACX,SAAS;uBACTC,mBAAS;SACV;QACD,MAAM,EAAE,CAAC,eAAe,CAAC,kBAAkB,CAAC,CAAC;KAC9C,CAAC;GACmB,eAAe,CA2FnC;aA3FoB,eAAe;;;;"}
1
+ {"version":3,"file":"next-queries-list.vue_rollup-plugin-vue_script.vue.js","sources":["../../../../../src/x-modules/next-queries/components/next-queries-list.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\nimport Vue from 'vue';\nimport { NextQuery } from '@empathyco/x-types';\nimport { mixins } from 'vue-class-component';\nimport { Component, Prop } from 'vue-property-decorator';\nimport { Getter } from '../../../components/decorators/store.decorators';\nimport { NoElement } from '../../../components/no-element';\nimport { ItemsListInjectionMixin } from '../../../components/items-list-injection.mixin';\nimport ItemsList from '../../../components/items-list.vue';\nimport { xComponentMixin } from '../../../components/x-component.mixin';\nimport { groupItemsBy } from '../../../utils/array';\nimport { ListItem } from '../../../utils/types';\nimport ResultsList from '../../search/components/results-list.vue';\nimport { NextQueriesGroup } from '../types';\nimport { nextQueriesXModule } from '../x-module';\n\n/**\n * Component that inserts groups of next queries in different positions of the injected search\n * items list, based on the provided configuration.\n *\n * @public\n */\n@Component({\n components: {\n ResultsList,\n NoElement,\n ItemsList\n },\n mixins: [xComponentMixin(nextQueriesXModule)]\n})\nexport default class NextQueriesList extends mixins(ItemsListInjectionMixin) {\n /**\n * Animation component that will be used to animate the next queries groups.\n *\n * @public\n */\n @Prop()\n protected animation?: Vue | string;\n\n /**\n * The first index to insert a group of next queries at.\n *\n * @public\n */\n @Prop({ default: 24 })\n public offset!: number;\n\n /**\n * The items cycle size to keep inserting next queries groups at.\n *\n * @public\n */\n @Prop({ default: 24 })\n public frequency!: number;\n\n /**\n * The maximum amount of next queries to add in a single group.\n *\n * @public\n */\n @Prop({ default: 4 })\n public maxNextQueriesPerGroup!: number;\n\n /**\n * The maximum number of groups to insert into the injected list items list.\n *\n * @public\n */\n @Prop()\n public maxGroups!: number;\n\n /**\n * The state next queries.\n *\n * @internal\n */\n @Getter('nextQueries', 'nextQueries')\n public nextQueries!: NextQuery[];\n\n /**\n * The grouped next queries based on the given config.\n *\n * @returns A list of next queries groups.\n * @internal\n */\n protected get nextQueriesGroups(): NextQueriesGroup[] {\n return Object.values(\n groupItemsBy(this.nextQueries, (_, index) =>\n Math.floor(index / this.maxNextQueriesPerGroup)\n )\n )\n .slice(0, this.maxGroups)\n .map(nextQueries => ({\n modelName: 'NextQueriesGroup' as const,\n id: nextQueries.map(nextQuery => nextQuery.query).join(','),\n nextQueries\n }));\n }\n\n /**\n * New list of {@link ListItem}s to render.\n *\n * @returns The new list of {@link ListItem}s with the next queries groups inserted.\n * @internal\n */\n public override get items(): ListItem[] {\n if (!this.injectedListItems) {\n return this.nextQueriesGroups;\n }\n\n return this.nextQueriesGroups.reduce(\n (items, nextQueriesGroup, index) => {\n const targetIndex = this.offset + this.frequency * index;\n if (targetIndex <= items.length) {\n items.splice(targetIndex, 0, nextQueriesGroup);\n }\n return items;\n },\n [...this.injectedListItems]\n );\n }\n}\n"],"names":["ResultsList","ItemsList"],"mappings":";;;;;;;;;;;;AAkCA;;;;;;AAcA,IAAqB,eAAe,GAApC,MAAqB,eAAgB,SAAQ,MAAM,CAAC,uBAAuB,CAAC;;;;;;;IAuD1E,IAAc,iBAAiB;QAC7B,OAAO,MAAM,CAAC,MAAM,CAClB,YAAY,CAAC,IAAI,CAAC,WAAW,EAAE,CAAC,CAAC,EAAE,KAAK,KACtC,IAAI,CAAC,KAAK,CAAC,KAAK,GAAG,IAAI,CAAC,sBAAsB,CAAC,CAChD,CACF;aACE,KAAK,CAAC,CAAC,EAAE,IAAI,CAAC,SAAS,CAAC;aACxB,GAAG,CAAC,WAAW,KAAK;YACnB,SAAS,EAAE,kBAA2B;YACtC,EAAE,EAAE,WAAW,CAAC,GAAG,CAAC,SAAS,IAAI,SAAS,CAAC,KAAK,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC;YAC3D,WAAW;SACZ,CAAC,CAAC,CAAC;KACP;;;;;;;IAQD,IAAoB,KAAK;QACvB,IAAI,CAAC,IAAI,CAAC,iBAAiB,EAAE;YAC3B,OAAO,IAAI,CAAC,iBAAiB,CAAC;SAC/B;QAED,OAAO,IAAI,CAAC,iBAAiB,CAAC,MAAM,CAClC,CAAC,KAAK,EAAE,gBAAgB,EAAE,KAAK;YAC7B,MAAM,WAAW,GAAG,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC,SAAS,GAAG,KAAK,CAAC;YACzD,IAAI,WAAW,IAAI,KAAK,CAAC,MAAM,EAAE;gBAC/B,KAAK,CAAC,MAAM,CAAC,WAAW,EAAE,CAAC,EAAE,gBAAgB,CAAC,CAAC;aAChD;YACD,OAAO,KAAK,CAAC;SACd,EACD,CAAC,GAAG,IAAI,CAAC,iBAAiB,CAAC,CAC5B,CAAC;KACH;CACF,CAAA;AApFC;IADC,IAAI,EAAE;kDAC4B;AAQnC;IADC,IAAI,CAAC,EAAE,OAAO,EAAE,EAAE,EAAE,CAAC;+CACC;AAQvB;IADC,IAAI,CAAC,EAAE,OAAO,EAAE,EAAE,EAAE,CAAC;kDACI;AAQ1B;IADC,IAAI,CAAC,EAAE,OAAO,EAAE,CAAC,EAAE,CAAC;+DACkB;AAQvC;IADC,IAAI,EAAE;kDACmB;AAQ1B;IADC,MAAM,CAAC,aAAa,EAAE,aAAa,CAAC;oDACJ;AA/Cd,eAAe;IARnC,SAAS,CAAC;QACT,UAAU,EAAE;yBACVA,iBAAW;YACX,SAAS;uBACTC,mBAAS;SACV;QACD,MAAM,EAAE,CAAC,eAAe,CAAC,kBAAkB,CAAC,CAAC;KAC9C,CAAC;GACmB,eAAe,CA2FnC;aA3FoB,eAAe;;;;"}
package/js/x-modules/search/store/actions/fetch-and-save-search-response.action.js CHANGED
@@ -4,25 +4,8 @@ const { fetchAndSave, cancelPrevious } = createFetchAndSaveActions({
4
4
  fetch({ dispatch, state }, request) {
5
5
  return dispatch('fetchSearchResponse', request ? enrichRequest(request, state) : null);
6
6
  },
7
- onSuccess({ commit, state }, { results, partialResults, facets, banners, promoteds, totalResults, spellcheck, redirections, queryTagging }) {
8
- if (state.isAppendResults) {
9
- commit('appendResults', results);
10
- }
11
- else {
12
- commit('setResults', results);
13
- commit('setBanners', banners);
14
- commit('setPromoteds', promoteds);
15
- commit('setRedirections', redirections);
16
- }
17
- commit('setPartialResults', partialResults ?? []);
18
- if (facets) {
19
- commit('setFacets', facets);
20
- }
21
- if (queryTagging) {
22
- commit('setQueryTagging', queryTagging);
23
- }
24
- commit('setTotalResults', totalResults);
25
- commit('setSpellcheck', spellcheck ?? '');
7
+ onSuccess({ dispatch }, response) {
8
+ dispatch('saveSearchResponse', response);
26
9
  }
27
10
  });
28
11
  /**
package/js/x-modules/search/store/actions/fetch-and-save-search-response.action.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"fetch-and-save-search-response.action.js","sources":["../../../../../../src/x-modules/search/store/actions/fetch-and-save-search-response.action.ts"],"sourcesContent":["import { SearchResponse, SearchRequest } from '@empathyco/x-adapter';\nimport { createFetchAndSaveActions } from '../../../../store/utils/fetch-and-save-action.utils';\nimport { InternalSearchRequest } from '../../types';\nimport { SearchActionContext, SearchState } from '../types';\n\nconst { fetchAndSave, cancelPrevious } = createFetchAndSaveActions<\n SearchActionContext,\n InternalSearchRequest | null,\n SearchResponse\n>({\n fetch({ dispatch, state }, request) {\n return dispatch('fetchSearchResponse', request ? enrichRequest(request, state) : null);\n },\n onSuccess(\n { commit, state },\n {\n results,\n partialResults,\n facets,\n banners,\n promoteds,\n totalResults,\n spellcheck,\n redirections,\n queryTagging\n }\n ) {\n if (state.isAppendResults) {\n commit('appendResults', results);\n } else {\n commit('setResults', results);\n commit('setBanners', banners);\n commit('setPromoteds', promoteds);\n commit('setRedirections', redirections);\n }\n\n commit('setPartialResults', partialResults ?? []);\n\n if (facets) {\n commit('setFacets', facets);\n }\n\n if (queryTagging) {\n commit('setQueryTagging', queryTagging);\n }\n commit('setTotalResults', totalResults);\n commit('setSpellcheck', spellcheck ?? '');\n }\n});\n\n/**\n * Enriches the {@link SearchRequest} object with the origin and page properties taken from the\n * {@link SearchState | search state}.\n *\n * @param request - The {@link InternalSearchRequest}.\n * @param state - {@link SearchState}.\n *\n * @returns The search request.\n * @internal\n */\nfunction enrichRequest(request: InternalSearchRequest, state: SearchState): SearchRequest {\n const { page, ...restRequest } = request;\n const {\n config: { pageSize },\n origin,\n results\n } = state;\n const start = page === 1 ? 0 : results.length;\n\n return {\n ...restRequest,\n // eslint-disable-next-line @typescript-eslint/no-extra-parens\n ...(origin && { origin }),\n start,\n rows: pageSize * page - start\n };\n}\n\n/**\n * Default implementation for {@link SearchActions.fetchAndSaveSearchResponse} action.\n *\n * @public\n */\nexport const fetchAndSaveSearchResponse = fetchAndSave;\n\n/**\n * Default implementation for {@link SearchActions.cancelFetchAndSaveSearchResponse} action.\n *\n * @public\n */\nexport const cancelFetchAndSaveSearchResponse = cancelPrevious;\n"],"names":[],"mappings":";;AAKA,MAAM,EAAE,YAAY,EAAE,cAAc,EAAE,GAAG,yBAAyB,CAIhE;IACA,KAAK,CAAC,EAAE,QAAQ,EAAE,KAAK,EAAE,EAAE,OAAO;QAChC,OAAO,QAAQ,CAAC,qBAAqB,EAAE,OAAO,GAAG,aAAa,CAAC,OAAO,EAAE,KAAK,CAAC,GAAG,IAAI,CAAC,CAAC;KACxF;IACD,SAAS,CACP,EAAE,MAAM,EAAE,KAAK,EAAE,EACjB,EACE,OAAO,EACP,cAAc,EACd,MAAM,EACN,OAAO,EACP,SAAS,EACT,YAAY,EACZ,UAAU,EACV,YAAY,EACZ,YAAY,EACb;QAED,IAAI,KAAK,CAAC,eAAe,EAAE;YACzB,MAAM,CAAC,eAAe,EAAE,OAAO,CAAC,CAAC;SAClC;aAAM;YACL,MAAM,CAAC,YAAY,EAAE,OAAO,CAAC,CAAC;YAC9B,MAAM,CAAC,YAAY,EAAE,OAAO,CAAC,CAAC;YAC9B,MAAM,CAAC,cAAc,EAAE,SAAS,CAAC,CAAC;YAClC,MAAM,CAAC,iBAAiB,EAAE,YAAY,CAAC,CAAC;SACzC;QAED,MAAM,CAAC,mBAAmB,EAAE,cAAc,IAAI,EAAE,CAAC,CAAC;QAElD,IAAI,MAAM,EAAE;YACV,MAAM,CAAC,WAAW,EAAE,MAAM,CAAC,CAAC;SAC7B;QAED,IAAI,YAAY,EAAE;YAChB,MAAM,CAAC,iBAAiB,EAAE,YAAY,CAAC,CAAC;SACzC;QACD,MAAM,CAAC,iBAAiB,EAAE,YAAY,CAAC,CAAC;QACxC,MAAM,CAAC,eAAe,EAAE,UAAU,IAAI,EAAE,CAAC,CAAC;KAC3C;CACF,CAAC,CAAC;AAEH;;;;;;;;;;AAUA,SAAS,aAAa,CAAC,OAA8B,EAAE,KAAkB;IACvE,MAAM,EAAE,IAAI,EAAE,GAAG,WAAW,EAAE,GAAG,OAAO,CAAC;IACzC,MAAM,EACJ,MAAM,EAAE,EAAE,QAAQ,EAAE,EACpB,MAAM,EACN,OAAO,EACR,GAAG,KAAK,CAAC;IACV,MAAM,KAAK,GAAG,IAAI,KAAK,CAAC,GAAG,CAAC,GAAG,OAAO,CAAC,MAAM,CAAC;IAE9C,OAAO;QACL,GAAG,WAAW;;QAEd,IAAI,MAAM,IAAI,EAAE,MAAM,EAAE,CAAC;QACzB,KAAK;QACL,IAAI,EAAE,QAAQ,GAAG,IAAI,GAAG,KAAK;KAC9B,CAAC;AACJ,CAAC;AAED;;;;;MAKa,0BAA0B,GAAG,aAAa;AAEvD;;;;;MAKa,gCAAgC,GAAG;;;;"}
1
+ {"version":3,"file":"fetch-and-save-search-response.action.js","sources":["../../../../../../src/x-modules/search/store/actions/fetch-and-save-search-response.action.ts"],"sourcesContent":["import { SearchResponse, SearchRequest } from '@empathyco/x-adapter';\nimport { createFetchAndSaveActions } from '../../../../store/utils/fetch-and-save-action.utils';\nimport { InternalSearchRequest } from '../../types';\nimport { SearchActionContext, SearchState } from '../types';\n\nconst { fetchAndSave, cancelPrevious } = createFetchAndSaveActions<\n SearchActionContext,\n InternalSearchRequest | null,\n SearchResponse\n>({\n fetch({ dispatch, state }, request) {\n return dispatch('fetchSearchResponse', request ? enrichRequest(request, state) : null);\n },\n onSuccess({ dispatch }, response) {\n dispatch('saveSearchResponse', response);\n }\n});\n\n/**\n * Enriches the {@link SearchRequest} object with the origin and page properties taken from the\n * {@link SearchState | search state}.\n *\n * @param request - The {@link InternalSearchRequest}.\n * @param state - {@link SearchState}.\n *\n * @returns The search request.\n * @internal\n */\nfunction enrichRequest(request: InternalSearchRequest, state: SearchState): SearchRequest {\n const { page, ...restRequest } = request;\n const {\n config: { pageSize },\n origin,\n results\n } = state;\n const start = page === 1 ? 0 : results.length;\n\n return {\n ...restRequest,\n // eslint-disable-next-line @typescript-eslint/no-extra-parens\n ...(origin && { origin }),\n start,\n rows: pageSize * page - start\n };\n}\n\n/**\n * Default implementation for {@link SearchActions.fetchAndSaveSearchResponse} action.\n *\n * @public\n */\nexport const fetchAndSaveSearchResponse = fetchAndSave;\n\n/**\n * Default implementation for {@link SearchActions.cancelFetchAndSaveSearchResponse} action.\n *\n * @public\n */\nexport const cancelFetchAndSaveSearchResponse = cancelPrevious;\n"],"names":[],"mappings":";;AAKA,MAAM,EAAE,YAAY,EAAE,cAAc,EAAE,GAAG,yBAAyB,CAIhE;IACA,KAAK,CAAC,EAAE,QAAQ,EAAE,KAAK,EAAE,EAAE,OAAO;QAChC,OAAO,QAAQ,CAAC,qBAAqB,EAAE,OAAO,GAAG,aAAa,CAAC,OAAO,EAAE,KAAK,CAAC,GAAG,IAAI,CAAC,CAAC;KACxF;IACD,SAAS,CAAC,EAAE,QAAQ,EAAE,EAAE,QAAQ;QAC9B,QAAQ,CAAC,oBAAoB,EAAE,QAAQ,CAAC,CAAC;KAC1C;CACF,CAAC,CAAC;AAEH;;;;;;;;;;AAUA,SAAS,aAAa,CAAC,OAA8B,EAAE,KAAkB;IACvE,MAAM,EAAE,IAAI,EAAE,GAAG,WAAW,EAAE,GAAG,OAAO,CAAC;IACzC,MAAM,EACJ,MAAM,EAAE,EAAE,QAAQ,EAAE,EACpB,MAAM,EACN,OAAO,EACR,GAAG,KAAK,CAAC;IACV,MAAM,KAAK,GAAG,IAAI,KAAK,CAAC,GAAG,CAAC,GAAG,OAAO,CAAC,MAAM,CAAC;IAE9C,OAAO;QACL,GAAG,WAAW;;QAEd,IAAI,MAAM,IAAI,EAAE,MAAM,EAAE,CAAC;QACzB,KAAK;QACL,IAAI,EAAE,QAAQ,GAAG,IAAI,GAAG,KAAK;KAC9B,CAAC;AACJ,CAAC;AAED;;;;;MAKa,0BAA0B,GAAG,aAAa;AAEvD;;;;;MAKa,gCAAgC,GAAG;;;;"}
package/js/x-modules/search/store/actions/save-search-response.action.js ADDED
@@ -0,0 +1,32 @@
1
+ /**
2
+ * Default implementation for the {@link SearchActions.saveSearchResponse}.
3
+ *
4
+ * @param context - The {@link https://vuex.vuejs.org/guide/actions.html | context} of the actions,
5
+ * provided by Vuex.
6
+ * @param response - The {@link @empathyco/x-adapter#SearchResponse} to save.
7
+ *
8
+ * @public
9
+ */
10
+ const saveSearchResponse = ({ commit, state }, { results, partialResults, facets, banners, promoteds, totalResults, spellcheck, redirections, queryTagging }) => {
11
+ if (state.isAppendResults) {
12
+ commit('appendResults', results);
13
+ }
14
+ else {
15
+ commit('setResults', results);
16
+ commit('setBanners', banners ?? []);
17
+ commit('setPromoteds', promoteds ?? []);
18
+ commit('setRedirections', redirections ?? []);
19
+ }
20
+ commit('setPartialResults', partialResults ?? []);
21
+ if (facets) {
22
+ commit('setFacets', facets);
23
+ }
24
+ if (queryTagging) {
25
+ commit('setQueryTagging', queryTagging);
26
+ }
27
+ commit('setTotalResults', totalResults);
28
+ commit('setSpellcheck', spellcheck ?? '');
29
+ };
30
+
31
+ export { saveSearchResponse };
32
+ //# sourceMappingURL=save-search-response.action.js.map
package/js/x-modules/search/store/actions/save-search-response.action.js.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"save-search-response.action.js","sources":["../../../../../../src/x-modules/search/store/actions/save-search-response.action.ts"],"sourcesContent":["import { SearchXStoreModule } from '../types';\n\n/**\n * Default implementation for the {@link SearchActions.saveSearchResponse}.\n *\n * @param context - The {@link https://vuex.vuejs.org/guide/actions.html | context} of the actions,\n * provided by Vuex.\n * @param response - The {@link @empathyco/x-adapter#SearchResponse} to save.\n *\n * @public\n */\nexport const saveSearchResponse: SearchXStoreModule['actions']['saveSearchResponse'] = (\n { commit, state },\n {\n results,\n partialResults,\n facets,\n banners,\n promoteds,\n totalResults,\n spellcheck,\n redirections,\n queryTagging\n }\n) => {\n if (state.isAppendResults) {\n commit('appendResults', results);\n } else {\n commit('setResults', results);\n commit('setBanners', banners ?? []);\n commit('setPromoteds', promoteds ?? []);\n commit('setRedirections', redirections ?? []);\n }\n\n commit('setPartialResults', partialResults ?? []);\n\n if (facets) {\n commit('setFacets', facets);\n }\n\n if (queryTagging) {\n commit('setQueryTagging', queryTagging);\n }\n commit('setTotalResults', totalResults);\n commit('setSpellcheck', spellcheck ?? '');\n};\n"],"names":[],"mappings":"AAEA;;;;;;;;;MASa,kBAAkB,GAAwD,CACrF,EAAE,MAAM,EAAE,KAAK,EAAE,EACjB,EACE,OAAO,EACP,cAAc,EACd,MAAM,EACN,OAAO,EACP,SAAS,EACT,YAAY,EACZ,UAAU,EACV,YAAY,EACZ,YAAY,EACb;IAED,IAAI,KAAK,CAAC,eAAe,EAAE;QACzB,MAAM,CAAC,eAAe,EAAE,OAAO,CAAC,CAAC;KAClC;SAAM;QACL,MAAM,CAAC,YAAY,EAAE,OAAO,CAAC,CAAC;QAC9B,MAAM,CAAC,YAAY,EAAE,OAAO,IAAI,EAAE,CAAC,CAAC;QACpC,MAAM,CAAC,cAAc,EAAE,SAAS,IAAI,EAAE,CAAC,CAAC;QACxC,MAAM,CAAC,iBAAiB,EAAE,YAAY,IAAI,EAAE,CAAC,CAAC;KAC/C;IAED,MAAM,CAAC,mBAAmB,EAAE,cAAc,IAAI,EAAE,CAAC,CAAC;IAElD,IAAI,MAAM,EAAE;QACV,MAAM,CAAC,WAAW,EAAE,MAAM,CAAC,CAAC;KAC7B;IAED,IAAI,YAAY,EAAE;QAChB,MAAM,CAAC,iBAAiB,EAAE,YAAY,CAAC,CAAC;KACzC;IACD,MAAM,CAAC,iBAAiB,EAAE,YAAY,CAAC,CAAC;IACxC,MAAM,CAAC,eAAe,EAAE,UAAU,IAAI,EAAE,CAAC,CAAC;AAC5C;;;;"}
package/js/x-modules/search/store/module.js CHANGED
@@ -7,6 +7,7 @@ import { fetchSearchResponse } from './actions/fetch-search-response.action.js';
7
7
  import { increasePageAppendingResults } from './actions/increase-page-apending-results.action.js';
8
8
  import { resetState } from './actions/reset-state.action.js';
9
9
  import { saveOrigin } from './actions/save-origin.action.js';
10
+ import { saveSearchResponse } from './actions/save-search-response.action.js';
10
11
  import { setUrlParams } from './actions/set-url-params.action.js';
11
12
  import { query } from './getters/query.getter.js';
12
13
  import { request } from './getters/request.getter.js';
@@ -111,6 +112,7 @@ const searchXStoreModule = {
111
112
  fetchAndSaveSearchResponse,
112
113
  increasePageAppendingResults,
113
114
  resetState,
115
+ saveSearchResponse,
114
116
  setUrlParams,
115
117
  saveOrigin
116
118
  }
package/js/x-modules/search/store/module.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"module.js","sources":["../../../../../src/x-modules/search/store/module.ts"],"sourcesContent":["import { isFacetFilter } from '@empathyco/x-types';\nimport { setQuery } from '../../../store/utils/query.utils';\nimport { setStatus } from '../../../store/utils/status-store.utils';\nimport { groupItemsBy } from '../../../utils/array';\n// eslint-disable-next-line max-len\nimport {\n cancelFetchAndSaveSearchResponse,\n fetchAndSaveSearchResponse\n} from './actions/fetch-and-save-search-response.action';\nimport { fetchSearchResponse } from './actions/fetch-search-response.action';\nimport { increasePageAppendingResults } from './actions/increase-page-apending-results.action';\nimport { resetState } from './actions/reset-state.action';\nimport { saveOrigin } from './actions/save-origin.action';\nimport { setUrlParams } from './actions/set-url-params.action';\nimport { query } from './getters/query.getter';\nimport { request } from './getters/request.getter';\nimport { SearchXStoreModule } from './types';\n\n/**\n * {@link XStoreModule} For the search module.\n *\n * @internal\n */\nexport const searchXStoreModule: SearchXStoreModule = {\n state: () => ({\n query: '',\n params: {},\n results: [],\n partialResults: [],\n facets: [],\n relatedTags: [],\n banners: [],\n promoteds: [],\n selectedFilters: {},\n config: {\n pageSize: 24\n },\n totalResults: 0,\n spellcheckedQuery: '',\n status: 'initial',\n sort: '',\n page: 1,\n origin: null,\n isAppendResults: false,\n redirections: [],\n queryTagging: {\n url: '',\n params: {}\n }\n }),\n getters: {\n request,\n query\n },\n mutations: {\n setQuery,\n setResults(state, results) {\n state.results = results;\n },\n appendResults(state, results) {\n state.results.push(...results);\n },\n setPartialResults(state, partialResults) {\n state.partialResults = partialResults;\n },\n setFacets(state, facets) {\n state.facets = facets;\n },\n setRelatedTags(state, relatedTags) {\n state.relatedTags = relatedTags;\n },\n setSelectedFilters(state, selectedFilters) {\n state.selectedFilters = groupItemsBy(selectedFilters, filter =>\n isFacetFilter(filter) ? filter.facetId : '__unknown__'\n );\n },\n setBanners(state, banners) {\n state.banners = banners;\n },\n setPromoteds(state, promoteds) {\n state.promoteds = promoteds;\n },\n setSpellcheck(state, spellcheckedQuery) {\n state.spellcheckedQuery = spellcheckedQuery;\n },\n setTotalResults(state, totalResults) {\n state.totalResults = totalResults;\n },\n setSort(state, sort) {\n state.sort = sort;\n },\n setPage(state, page) {\n state.page = page;\n },\n setPageSize(state, pageSize) {\n state.config.pageSize = pageSize;\n },\n setIsAppendResults(state, isAppendResults) {\n state.isAppendResults = isAppendResults;\n },\n setStatus,\n setParams(state, params) {\n state.params = params;\n },\n setOrigin(state, origin = null) {\n state.origin = origin;\n },\n setRedirections(state, redirections) {\n state.redirections = redirections;\n },\n setQueryTagging(state, queryTagging) {\n state.queryTagging = queryTagging;\n }\n },\n actions: {\n cancelFetchAndSaveSearchResponse,\n fetchSearchResponse,\n fetchAndSaveSearchResponse,\n increasePageAppendingResults,\n resetState,\n setUrlParams,\n saveOrigin\n }\n};\n"],"names":[],"mappings":";;;;;;;;;;;;;AAkBA;;;;;MAKa,kBAAkB,GAAuB;IACpD,KAAK,EAAE,OAAO;QACZ,KAAK,EAAE,EAAE;QACT,MAAM,EAAE,EAAE;QACV,OAAO,EAAE,EAAE;QACX,cAAc,EAAE,EAAE;QAClB,MAAM,EAAE,EAAE;QACV,WAAW,EAAE,EAAE;QACf,OAAO,EAAE,EAAE;QACX,SAAS,EAAE,EAAE;QACb,eAAe,EAAE,EAAE;QACnB,MAAM,EAAE;YACN,QAAQ,EAAE,EAAE;SACb;QACD,YAAY,EAAE,CAAC;QACf,iBAAiB,EAAE,EAAE;QACrB,MAAM,EAAE,SAAS;QACjB,IAAI,EAAE,EAAE;QACR,IAAI,EAAE,CAAC;QACP,MAAM,EAAE,IAAI;QACZ,eAAe,EAAE,KAAK;QACtB,YAAY,EAAE,EAAE;QAChB,YAAY,EAAE;YACZ,GAAG,EAAE,EAAE;YACP,MAAM,EAAE,EAAE;SACX;KACF,CAAC;IACF,OAAO,EAAE;QACP,OAAO;QACP,KAAK;KACN;IACD,SAAS,EAAE;QACT,QAAQ;QACR,UAAU,CAAC,KAAK,EAAE,OAAO;YACvB,KAAK,CAAC,OAAO,GAAG,OAAO,CAAC;SACzB;QACD,aAAa,CAAC,KAAK,EAAE,OAAO;YAC1B,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC,GAAG,OAAO,CAAC,CAAC;SAChC;QACD,iBAAiB,CAAC,KAAK,EAAE,cAAc;YACrC,KAAK,CAAC,cAAc,GAAG,cAAc,CAAC;SACvC;QACD,SAAS,CAAC,KAAK,EAAE,MAAM;YACrB,KAAK,CAAC,MAAM,GAAG,MAAM,CAAC;SACvB;QACD,cAAc,CAAC,KAAK,EAAE,WAAW;YAC/B,KAAK,CAAC,WAAW,GAAG,WAAW,CAAC;SACjC;QACD,kBAAkB,CAAC,KAAK,EAAE,eAAe;YACvC,KAAK,CAAC,eAAe,GAAG,YAAY,CAAC,eAAe,EAAE,MAAM,IAC1D,aAAa,CAAC,MAAM,CAAC,GAAG,MAAM,CAAC,OAAO,GAAG,aAAa,CACvD,CAAC;SACH;QACD,UAAU,CAAC,KAAK,EAAE,OAAO;YACvB,KAAK,CAAC,OAAO,GAAG,OAAO,CAAC;SACzB;QACD,YAAY,CAAC,KAAK,EAAE,SAAS;YAC3B,KAAK,CAAC,SAAS,GAAG,SAAS,CAAC;SAC7B;QACD,aAAa,CAAC,KAAK,EAAE,iBAAiB;YACpC,KAAK,CAAC,iBAAiB,GAAG,iBAAiB,CAAC;SAC7C;QACD,eAAe,CAAC,KAAK,EAAE,YAAY;YACjC,KAAK,CAAC,YAAY,GAAG,YAAY,CAAC;SACnC;QACD,OAAO,CAAC,KAAK,EAAE,IAAI;YACjB,KAAK,CAAC,IAAI,GAAG,IAAI,CAAC;SACnB;QACD,OAAO,CAAC,KAAK,EAAE,IAAI;YACjB,KAAK,CAAC,IAAI,GAAG,IAAI,CAAC;SACnB;QACD,WAAW,CAAC,KAAK,EAAE,QAAQ;YACzB,KAAK,CAAC,MAAM,CAAC,QAAQ,GAAG,QAAQ,CAAC;SAClC;QACD,kBAAkB,CAAC,KAAK,EAAE,eAAe;YACvC,KAAK,CAAC,eAAe,GAAG,eAAe,CAAC;SACzC;QACD,SAAS;QACT,SAAS,CAAC,KAAK,EAAE,MAAM;YACrB,KAAK,CAAC,MAAM,GAAG,MAAM,CAAC;SACvB;QACD,SAAS,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;YAC5B,KAAK,CAAC,MAAM,GAAG,MAAM,CAAC;SACvB;QACD,eAAe,CAAC,KAAK,EAAE,YAAY;YACjC,KAAK,CAAC,YAAY,GAAG,YAAY,CAAC;SACnC;QACD,eAAe,CAAC,KAAK,EAAE,YAAY;YACjC,KAAK,CAAC,YAAY,GAAG,YAAY,CAAC;SACnC;KACF;IACD,OAAO,EAAE;QACP,gCAAgC;QAChC,mBAAmB;QACnB,0BAA0B;QAC1B,4BAA4B;QAC5B,UAAU;QACV,YAAY;QACZ,UAAU;KACX;;;;;"}
1
+ {"version":3,"file":"module.js","sources":["../../../../../src/x-modules/search/store/module.ts"],"sourcesContent":["import { isFacetFilter } from '@empathyco/x-types';\nimport { setQuery } from '../../../store/utils/query.utils';\nimport { setStatus } from '../../../store/utils/status-store.utils';\nimport { groupItemsBy } from '../../../utils/array';\n// eslint-disable-next-line max-len\nimport {\n cancelFetchAndSaveSearchResponse,\n fetchAndSaveSearchResponse\n} from './actions/fetch-and-save-search-response.action';\nimport { fetchSearchResponse } from './actions/fetch-search-response.action';\nimport { increasePageAppendingResults } from './actions/increase-page-apending-results.action';\nimport { resetState } from './actions/reset-state.action';\nimport { saveOrigin } from './actions/save-origin.action';\nimport { saveSearchResponse } from './actions/save-search-response.action';\nimport { setUrlParams } from './actions/set-url-params.action';\nimport { query } from './getters/query.getter';\nimport { request } from './getters/request.getter';\nimport { SearchXStoreModule } from './types';\n\n/**\n * {@link XStoreModule} For the search module.\n *\n * @internal\n */\nexport const searchXStoreModule: SearchXStoreModule = {\n state: () => ({\n query: '',\n params: {},\n results: [],\n partialResults: [],\n facets: [],\n relatedTags: [],\n banners: [],\n promoteds: [],\n selectedFilters: {},\n config: {\n pageSize: 24\n },\n totalResults: 0,\n spellcheckedQuery: '',\n status: 'initial',\n sort: '',\n page: 1,\n origin: null,\n isAppendResults: false,\n redirections: [],\n queryTagging: {\n url: '',\n params: {}\n }\n }),\n getters: {\n request,\n query\n },\n mutations: {\n setQuery,\n setResults(state, results) {\n state.results = results;\n },\n appendResults(state, results) {\n state.results.push(...results);\n },\n setPartialResults(state, partialResults) {\n state.partialResults = partialResults;\n },\n setFacets(state, facets) {\n state.facets = facets;\n },\n setRelatedTags(state, relatedTags) {\n state.relatedTags = relatedTags;\n },\n setSelectedFilters(state, selectedFilters) {\n state.selectedFilters = groupItemsBy(selectedFilters, filter =>\n isFacetFilter(filter) ? filter.facetId : '__unknown__'\n );\n },\n setBanners(state, banners) {\n state.banners = banners;\n },\n setPromoteds(state, promoteds) {\n state.promoteds = promoteds;\n },\n setSpellcheck(state, spellcheckedQuery) {\n state.spellcheckedQuery = spellcheckedQuery;\n },\n setTotalResults(state, totalResults) {\n state.totalResults = totalResults;\n },\n setSort(state, sort) {\n state.sort = sort;\n },\n setPage(state, page) {\n state.page = page;\n },\n setPageSize(state, pageSize) {\n state.config.pageSize = pageSize;\n },\n setIsAppendResults(state, isAppendResults) {\n state.isAppendResults = isAppendResults;\n },\n setStatus,\n setParams(state, params) {\n state.params = params;\n },\n setOrigin(state, origin = null) {\n state.origin = origin;\n },\n setRedirections(state, redirections) {\n state.redirections = redirections;\n },\n setQueryTagging(state, queryTagging) {\n state.queryTagging = queryTagging;\n }\n },\n actions: {\n cancelFetchAndSaveSearchResponse,\n fetchSearchResponse,\n fetchAndSaveSearchResponse,\n increasePageAppendingResults,\n resetState,\n saveSearchResponse,\n setUrlParams,\n saveOrigin\n }\n};\n"],"names":[],"mappings":";;;;;;;;;;;;;;AAmBA;;;;;MAKa,kBAAkB,GAAuB;IACpD,KAAK,EAAE,OAAO;QACZ,KAAK,EAAE,EAAE;QACT,MAAM,EAAE,EAAE;QACV,OAAO,EAAE,EAAE;QACX,cAAc,EAAE,EAAE;QAClB,MAAM,EAAE,EAAE;QACV,WAAW,EAAE,EAAE;QACf,OAAO,EAAE,EAAE;QACX,SAAS,EAAE,EAAE;QACb,eAAe,EAAE,EAAE;QACnB,MAAM,EAAE;YACN,QAAQ,EAAE,EAAE;SACb;QACD,YAAY,EAAE,CAAC;QACf,iBAAiB,EAAE,EAAE;QACrB,MAAM,EAAE,SAAS;QACjB,IAAI,EAAE,EAAE;QACR,IAAI,EAAE,CAAC;QACP,MAAM,EAAE,IAAI;QACZ,eAAe,EAAE,KAAK;QACtB,YAAY,EAAE,EAAE;QAChB,YAAY,EAAE;YACZ,GAAG,EAAE,EAAE;YACP,MAAM,EAAE,EAAE;SACX;KACF,CAAC;IACF,OAAO,EAAE;QACP,OAAO;QACP,KAAK;KACN;IACD,SAAS,EAAE;QACT,QAAQ;QACR,UAAU,CAAC,KAAK,EAAE,OAAO;YACvB,KAAK,CAAC,OAAO,GAAG,OAAO,CAAC;SACzB;QACD,aAAa,CAAC,KAAK,EAAE,OAAO;YAC1B,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC,GAAG,OAAO,CAAC,CAAC;SAChC;QACD,iBAAiB,CAAC,KAAK,EAAE,cAAc;YACrC,KAAK,CAAC,cAAc,GAAG,cAAc,CAAC;SACvC;QACD,SAAS,CAAC,KAAK,EAAE,MAAM;YACrB,KAAK,CAAC,MAAM,GAAG,MAAM,CAAC;SACvB;QACD,cAAc,CAAC,KAAK,EAAE,WAAW;YAC/B,KAAK,CAAC,WAAW,GAAG,WAAW,CAAC;SACjC;QACD,kBAAkB,CAAC,KAAK,EAAE,eAAe;YACvC,KAAK,CAAC,eAAe,GAAG,YAAY,CAAC,eAAe,EAAE,MAAM,IAC1D,aAAa,CAAC,MAAM,CAAC,GAAG,MAAM,CAAC,OAAO,GAAG,aAAa,CACvD,CAAC;SACH;QACD,UAAU,CAAC,KAAK,EAAE,OAAO;YACvB,KAAK,CAAC,OAAO,GAAG,OAAO,CAAC;SACzB;QACD,YAAY,CAAC,KAAK,EAAE,SAAS;YAC3B,KAAK,CAAC,SAAS,GAAG,SAAS,CAAC;SAC7B;QACD,aAAa,CAAC,KAAK,EAAE,iBAAiB;YACpC,KAAK,CAAC,iBAAiB,GAAG,iBAAiB,CAAC;SAC7C;QACD,eAAe,CAAC,KAAK,EAAE,YAAY;YACjC,KAAK,CAAC,YAAY,GAAG,YAAY,CAAC;SACnC;QACD,OAAO,CAAC,KAAK,EAAE,IAAI;YACjB,KAAK,CAAC,IAAI,GAAG,IAAI,CAAC;SACnB;QACD,OAAO,CAAC,KAAK,EAAE,IAAI;YACjB,KAAK,CAAC,IAAI,GAAG,IAAI,CAAC;SACnB;QACD,WAAW,CAAC,KAAK,EAAE,QAAQ;YACzB,KAAK,CAAC,MAAM,CAAC,QAAQ,GAAG,QAAQ,CAAC;SAClC;QACD,kBAAkB,CAAC,KAAK,EAAE,eAAe;YACvC,KAAK,CAAC,eAAe,GAAG,eAAe,CAAC;SACzC;QACD,SAAS;QACT,SAAS,CAAC,KAAK,EAAE,MAAM;YACrB,KAAK,CAAC,MAAM,GAAG,MAAM,CAAC;SACvB;QACD,SAAS,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;YAC5B,KAAK,CAAC,MAAM,GAAG,MAAM,CAAC;SACvB;QACD,eAAe,CAAC,KAAK,EAAE,YAAY;YACjC,KAAK,CAAC,YAAY,GAAG,YAAY,CAAC;SACnC;QACD,eAAe,CAAC,KAAK,EAAE,YAAY;YACjC,KAAK,CAAC,YAAY,GAAG,YAAY,CAAC;SACnC;KACF;IACD,OAAO,EAAE;QACP,gCAAgC;QAChC,mBAAmB;QACnB,0BAA0B;QAC1B,4BAA4B;QAC5B,UAAU;QACV,kBAAkB;QAClB,YAAY;QACZ,UAAU;KACX;;;;;"}
package/js/x-modules/search/wiring.js CHANGED
@@ -96,13 +96,7 @@ const setSearchExtraParams = wireCommit('setParams');
96
96
  *
97
97
  * @public
98
98
  */
99
- const increasePageAppendingResults = wireDispatchWithoutPayload('increasePageAppendingResults');
100
- /**
101
- * Sets the search state `pageSize`.
102
- *
103
- * @public
104
- */
105
- const setPageSize = wireCommit('setPageSize');
99
+ const increasePageAppendingResultsWire = wireDispatchWithoutPayload('increasePageAppendingResults');
106
100
  /**
107
101
  * Resets the search state `isAppendingResults`.
108
102
  *
@@ -146,7 +140,7 @@ const searchWiring = createWiring({
146
140
  saveOriginWire
147
141
  },
148
142
  UserReachedResultsListEnd: {
149
- increasePageAppendingResults
143
+ increasePageAppendingResultsWire
150
144
  },
151
145
  SearchRequestChanged: {
152
146
  fetchAndSaveSearchResponseWire
@@ -171,5 +165,5 @@ const searchWiring = createWiring({
171
165
  }
172
166
  });
173
167
 
174
- export { cancelFetchAndSaveSearchResponseWire, fetchAndSaveSearchResponseWire, increasePageAppendingResults, resetAppending, resetSpellcheckQuery, resetStateWire, saveOriginWire, searchWiring, setPageSize, setRelatedTags, setSearchExtraParams, setSearchPage, setSearchQuery, setSelectedFilters, setSort, setUrlParams };
168
+ export { cancelFetchAndSaveSearchResponseWire, fetchAndSaveSearchResponseWire, increasePageAppendingResultsWire, resetAppending, resetSpellcheckQuery, resetStateWire, saveOriginWire, searchWiring, setRelatedTags, setSearchExtraParams, setSearchPage, setSearchQuery, setSelectedFilters, setSort, setUrlParams };
175
169
  //# sourceMappingURL=wiring.js.map
package/js/x-modules/search/wiring.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"wiring.js","sources":["../../../../src/x-modules/search/wiring.ts"],"sourcesContent":["import {\n namespacedWireCommit,\n namespacedWireDispatch,\n namespacedWireDispatchWithoutPayload\n} from '../../wiring/namespaced-wires.factory';\nimport { WirePayload } from '../../wiring/wiring.types';\nimport { createWiring } from '../../wiring/wiring.utils';\nimport { InternalSearchRequest } from './types';\n\n/**\n * `search` {@link XModuleName | XModule name}.\n *\n * @internal\n */\nconst moduleName = 'search';\n/**\n * WireCommit for {@link SearchXModule}.\n *\n * @internal\n */\nconst wireCommit = namespacedWireCommit(moduleName);\n\n/**\n * WireDispatch for {@link SearchXModule}.\n *\n * @internal\n */\nconst wireDispatch = namespacedWireDispatch(moduleName);\n\n/**\n * WireDispatchWithoutPayload for {@link SearchXModule}.\n *\n * @internal\n */\nconst wireDispatchWithoutPayload = namespacedWireDispatchWithoutPayload(moduleName);\n\n/**\n * Cancels the {@link SearchActions.fetchAndSaveSearchResponse} request promise.\n *\n * @public\n */\nexport const cancelFetchAndSaveSearchResponseWire = wireDispatchWithoutPayload(\n 'cancelFetchAndSaveSearchResponse'\n);\n\n/**\n * Sets the search state `origin`.\n *\n * @public\n */\nexport const saveOriginWire = wireDispatch('saveOrigin', ({ metadata }) => metadata);\n\n/**\n * Requests and stores the search response.\n *\n * @public\n */\nexport const fetchAndSaveSearchResponseWire = wireDispatch('fetchAndSaveSearchResponse');\n\n/**\n * Resets the search state `spellcheckedQuery` to its initial value, an empty string.\n *\n * @public\n */\nexport const resetSpellcheckQuery = wireCommit('setSpellcheck', '');\n\n/**\n * Sets the search state `relatedTags`.\n *\n * @public\n */\nexport const setRelatedTags = wireCommit('setRelatedTags');\n\n/**\n * Sets the search state `query`.\n *\n * @public\n */\nexport const setSearchQuery = wireCommit('setQuery');\n\n/**\n * Sets the search state `selectedFilters`.\n *\n * @public\n */\nexport const setSelectedFilters = wireCommit('setSelectedFilters');\n\n/**\n * Sets the search state `sort`.\n *\n * @public\n */\nexport const setSort = wireCommit('setSort');\n\n/**\n * Sets the search state `query`.\n *\n * @public\n */\nexport const setUrlParams = wireDispatch('setUrlParams');\n\n/**\n * Sets the search state `page`.\n *\n * @public\n */\nexport const setSearchPage = wireCommit('setPage');\n\n/**\n * Sets the search state `params`.\n *\n * @public\n */\nexport const setSearchExtraParams = wireCommit('setParams');\n\n/**\n * Increases the current search state `page` by one.\n *\n * @public\n */\nexport const increasePageAppendingResults = wireDispatchWithoutPayload(\n 'increasePageAppendingResults'\n);\n\n/**\n * Sets the search state `pageSize`.\n *\n * @public\n */\nexport const setPageSize = wireCommit('setPageSize');\n\n/**\n * Resets the search state `isAppendingResults`.\n *\n * @public\n */\nexport const resetAppending = wireCommit('setIsAppendResults', false);\n\n/**\n * Batches state resets after {@link SearchGetters.request} parameters update.\n *\n * @public\n */\nexport const resetStateWire = wireDispatch(\n 'resetState',\n ({ eventPayload: newRequest, metadata: { oldValue } }: WirePayload<InternalSearchRequest>) => ({\n newRequest,\n oldRequest: oldValue as InternalSearchRequest\n })\n);\n\n/**\n * Search wiring.\n *\n * @internal\n */\nexport const searchWiring = createWiring({\n ParamsLoadedFromUrl: {\n setUrlParams,\n saveOriginWire\n },\n UserAcceptedAQuery: {\n setSearchQuery,\n saveOriginWire\n },\n UserAcceptedSpellcheckQuery: {\n resetSpellcheckQuery\n },\n UserClearedQuery: {\n setSearchQuery,\n cancelFetchAndSaveSearchResponseWire\n },\n UserClickedASort: {\n setSort\n },\n UserPickedARelatedTag: {\n saveOriginWire\n },\n UserReachedResultsListEnd: {\n increasePageAppendingResults\n },\n SearchRequestChanged: {\n fetchAndSaveSearchResponseWire\n },\n SearchRequestUpdated: {\n resetStateWire\n },\n SelectedRelatedTagsChanged: {\n setRelatedTags\n },\n SelectedFiltersChanged: {\n setSelectedFilters\n },\n ResultsChanged: {\n resetAppending\n },\n SelectedSortProvided: {\n setSort\n },\n ExtraParamsChanged: {\n setSearchExtraParams\n }\n});\n"],"names":[],"mappings":";;;AASA;;;;;AAKA,MAAM,UAAU,GAAG,QAAQ,CAAC;AAC5B;;;;;AAKA,MAAM,UAAU,GAAG,oBAAoB,CAAC,UAAU,CAAC,CAAC;AAEpD;;;;;AAKA,MAAM,YAAY,GAAG,sBAAsB,CAAC,UAAU,CAAC,CAAC;AAExD;;;;;AAKA,MAAM,0BAA0B,GAAG,oCAAoC,CAAC,UAAU,CAAC,CAAC;AAEpF;;;;;MAKa,oCAAoC,GAAG,0BAA0B,CAC5E,kCAAkC,EAClC;AAEF;;;;;MAKa,cAAc,GAAG,YAAY,CAAC,YAAY,EAAE,CAAC,EAAE,QAAQ,EAAE,KAAK,QAAQ,EAAE;AAErF;;;;;MAKa,8BAA8B,GAAG,YAAY,CAAC,4BAA4B,EAAE;AAEzF;;;;;MAKa,oBAAoB,GAAG,UAAU,CAAC,eAAe,EAAE,EAAE,EAAE;AAEpE;;;;;MAKa,cAAc,GAAG,UAAU,CAAC,gBAAgB,EAAE;AAE3D;;;;;MAKa,cAAc,GAAG,UAAU,CAAC,UAAU,EAAE;AAErD;;;;;MAKa,kBAAkB,GAAG,UAAU,CAAC,oBAAoB,EAAE;AAEnE;;;;;MAKa,OAAO,GAAG,UAAU,CAAC,SAAS,EAAE;AAE7C;;;;;MAKa,YAAY,GAAG,YAAY,CAAC,cAAc,EAAE;AAEzD;;;;;MAKa,aAAa,GAAG,UAAU,CAAC,SAAS,EAAE;AAEnD;;;;;MAKa,oBAAoB,GAAG,UAAU,CAAC,WAAW,EAAE;AAE5D;;;;;MAKa,4BAA4B,GAAG,0BAA0B,CACpE,8BAA8B,EAC9B;AAEF;;;;;MAKa,WAAW,GAAG,UAAU,CAAC,aAAa,EAAE;AAErD;;;;;MAKa,cAAc,GAAG,UAAU,CAAC,oBAAoB,EAAE,KAAK,EAAE;AAEtE;;;;;MAKa,cAAc,GAAG,YAAY,CACxC,YAAY,EACZ,CAAC,EAAE,YAAY,EAAE,UAAU,EAAE,QAAQ,EAAE,EAAE,QAAQ,EAAE,EAAsC,MAAM;IAC7F,UAAU;IACV,UAAU,EAAE,QAAiC;CAC9C,CAAC,EACF;AAEF;;;;;MAKa,YAAY,GAAG,YAAY,CAAC;IACvC,mBAAmB,EAAE;QACnB,YAAY;QACZ,cAAc;KACf;IACD,kBAAkB,EAAE;QAClB,cAAc;QACd,cAAc;KACf;IACD,2BAA2B,EAAE;QAC3B,oBAAoB;KACrB;IACD,gBAAgB,EAAE;QAChB,cAAc;QACd,oCAAoC;KACrC;IACD,gBAAgB,EAAE;QAChB,OAAO;KACR;IACD,qBAAqB,EAAE;QACrB,cAAc;KACf;IACD,yBAAyB,EAAE;QACzB,4BAA4B;KAC7B;IACD,oBAAoB,EAAE;QACpB,8BAA8B;KAC/B;IACD,oBAAoB,EAAE;QACpB,cAAc;KACf;IACD,0BAA0B,EAAE;QAC1B,cAAc;KACf;IACD,sBAAsB,EAAE;QACtB,kBAAkB;KACnB;IACD,cAAc,EAAE;QACd,cAAc;KACf;IACD,oBAAoB,EAAE;QACpB,OAAO;KACR;IACD,kBAAkB,EAAE;QAClB,oBAAoB;KACrB;CACF;;;;"}
1
+ {"version":3,"file":"wiring.js","sources":["../../../../src/x-modules/search/wiring.ts"],"sourcesContent":["import {\n namespacedWireCommit,\n namespacedWireDispatch,\n namespacedWireDispatchWithoutPayload\n} from '../../wiring/namespaced-wires.factory';\nimport { WirePayload } from '../../wiring/wiring.types';\nimport { createWiring } from '../../wiring/wiring.utils';\nimport { InternalSearchRequest } from './types';\n\n/**\n * `search` {@link XModuleName | XModule name}.\n *\n * @internal\n */\nconst moduleName = 'search';\n/**\n * WireCommit for {@link SearchXModule}.\n *\n * @internal\n */\nconst wireCommit = namespacedWireCommit(moduleName);\n\n/**\n * WireDispatch for {@link SearchXModule}.\n *\n * @internal\n */\nconst wireDispatch = namespacedWireDispatch(moduleName);\n\n/**\n * WireDispatchWithoutPayload for {@link SearchXModule}.\n *\n * @internal\n */\nconst wireDispatchWithoutPayload = namespacedWireDispatchWithoutPayload(moduleName);\n\n/**\n * Cancels the {@link SearchActions.fetchAndSaveSearchResponse} request promise.\n *\n * @public\n */\nexport const cancelFetchAndSaveSearchResponseWire = wireDispatchWithoutPayload(\n 'cancelFetchAndSaveSearchResponse'\n);\n\n/**\n * Sets the search state `origin`.\n *\n * @public\n */\nexport const saveOriginWire = wireDispatch('saveOrigin', ({ metadata }) => metadata);\n\n/**\n * Requests and stores the search response.\n *\n * @public\n */\nexport const fetchAndSaveSearchResponseWire = wireDispatch('fetchAndSaveSearchResponse');\n\n/**\n * Resets the search state `spellcheckedQuery` to its initial value, an empty string.\n *\n * @public\n */\nexport const resetSpellcheckQuery = wireCommit('setSpellcheck', '');\n\n/**\n * Sets the search state `relatedTags`.\n *\n * @public\n */\nexport const setRelatedTags = wireCommit('setRelatedTags');\n\n/**\n * Sets the search state `query`.\n *\n * @public\n */\nexport const setSearchQuery = wireCommit('setQuery');\n\n/**\n * Sets the search state `selectedFilters`.\n *\n * @public\n */\nexport const setSelectedFilters = wireCommit('setSelectedFilters');\n\n/**\n * Sets the search state `sort`.\n *\n * @public\n */\nexport const setSort = wireCommit('setSort');\n\n/**\n * Sets the search state `query`.\n *\n * @public\n */\nexport const setUrlParams = wireDispatch('setUrlParams');\n\n/**\n * Sets the search state `page`.\n *\n * @public\n */\nexport const setSearchPage = wireCommit('setPage');\n\n/**\n * Sets the search state `params`.\n *\n * @public\n */\nexport const setSearchExtraParams = wireCommit('setParams');\n\n/**\n * Increases the current search state `page` by one.\n *\n * @public\n */\nexport const increasePageAppendingResultsWire = wireDispatchWithoutPayload(\n 'increasePageAppendingResults'\n);\n\n/**\n * Resets the search state `isAppendingResults`.\n *\n * @public\n */\nexport const resetAppending = wireCommit('setIsAppendResults', false);\n\n/**\n * Batches state resets after {@link SearchGetters.request} parameters update.\n *\n * @public\n */\nexport const resetStateWire = wireDispatch(\n 'resetState',\n ({ eventPayload: newRequest, metadata: { oldValue } }: WirePayload<InternalSearchRequest>) => ({\n newRequest,\n oldRequest: oldValue as InternalSearchRequest\n })\n);\n\n/**\n * Search wiring.\n *\n * @internal\n */\nexport const searchWiring = createWiring({\n ParamsLoadedFromUrl: {\n setUrlParams,\n saveOriginWire\n },\n UserAcceptedAQuery: {\n setSearchQuery,\n saveOriginWire\n },\n UserAcceptedSpellcheckQuery: {\n resetSpellcheckQuery\n },\n UserClearedQuery: {\n setSearchQuery,\n cancelFetchAndSaveSearchResponseWire\n },\n UserClickedASort: {\n setSort\n },\n UserPickedARelatedTag: {\n saveOriginWire\n },\n UserReachedResultsListEnd: {\n increasePageAppendingResultsWire\n },\n SearchRequestChanged: {\n fetchAndSaveSearchResponseWire\n },\n SearchRequestUpdated: {\n resetStateWire\n },\n SelectedRelatedTagsChanged: {\n setRelatedTags\n },\n SelectedFiltersChanged: {\n setSelectedFilters\n },\n ResultsChanged: {\n resetAppending\n },\n SelectedSortProvided: {\n setSort\n },\n ExtraParamsChanged: {\n setSearchExtraParams\n }\n});\n"],"names":[],"mappings":";;;AASA;;;;;AAKA,MAAM,UAAU,GAAG,QAAQ,CAAC;AAC5B;;;;;AAKA,MAAM,UAAU,GAAG,oBAAoB,CAAC,UAAU,CAAC,CAAC;AAEpD;;;;;AAKA,MAAM,YAAY,GAAG,sBAAsB,CAAC,UAAU,CAAC,CAAC;AAExD;;;;;AAKA,MAAM,0BAA0B,GAAG,oCAAoC,CAAC,UAAU,CAAC,CAAC;AAEpF;;;;;MAKa,oCAAoC,GAAG,0BAA0B,CAC5E,kCAAkC,EAClC;AAEF;;;;;MAKa,cAAc,GAAG,YAAY,CAAC,YAAY,EAAE,CAAC,EAAE,QAAQ,EAAE,KAAK,QAAQ,EAAE;AAErF;;;;;MAKa,8BAA8B,GAAG,YAAY,CAAC,4BAA4B,EAAE;AAEzF;;;;;MAKa,oBAAoB,GAAG,UAAU,CAAC,eAAe,EAAE,EAAE,EAAE;AAEpE;;;;;MAKa,cAAc,GAAG,UAAU,CAAC,gBAAgB,EAAE;AAE3D;;;;;MAKa,cAAc,GAAG,UAAU,CAAC,UAAU,EAAE;AAErD;;;;;MAKa,kBAAkB,GAAG,UAAU,CAAC,oBAAoB,EAAE;AAEnE;;;;;MAKa,OAAO,GAAG,UAAU,CAAC,SAAS,EAAE;AAE7C;;;;;MAKa,YAAY,GAAG,YAAY,CAAC,cAAc,EAAE;AAEzD;;;;;MAKa,aAAa,GAAG,UAAU,CAAC,SAAS,EAAE;AAEnD;;;;;MAKa,oBAAoB,GAAG,UAAU,CAAC,WAAW,EAAE;AAE5D;;;;;MAKa,gCAAgC,GAAG,0BAA0B,CACxE,8BAA8B,EAC9B;AAEF;;;;;MAKa,cAAc,GAAG,UAAU,CAAC,oBAAoB,EAAE,KAAK,EAAE;AAEtE;;;;;MAKa,cAAc,GAAG,YAAY,CACxC,YAAY,EACZ,CAAC,EAAE,YAAY,EAAE,UAAU,EAAE,QAAQ,EAAE,EAAE,QAAQ,EAAE,EAAsC,MAAM;IAC7F,UAAU;IACV,UAAU,EAAE,QAAiC;CAC9C,CAAC,EACF;AAEF;;;;;MAKa,YAAY,GAAG,YAAY,CAAC;IACvC,mBAAmB,EAAE;QACnB,YAAY;QACZ,cAAc;KACf;IACD,kBAAkB,EAAE;QAClB,cAAc;QACd,cAAc;KACf;IACD,2BAA2B,EAAE;QAC3B,oBAAoB;KACrB;IACD,gBAAgB,EAAE;QAChB,cAAc;QACd,oCAAoC;KACrC;IACD,gBAAgB,EAAE;QAChB,OAAO;KACR;IACD,qBAAqB,EAAE;QACrB,cAAc;KACf;IACD,yBAAyB,EAAE;QACzB,gCAAgC;KACjC;IACD,oBAAoB,EAAE;QACpB,8BAA8B;KAC/B;IACD,oBAAoB,EAAE;QACpB,cAAc;KACf;IACD,0BAA0B,EAAE;QAC1B,cAAc;KACf;IACD,sBAAsB,EAAE;QACtB,kBAAkB;KACnB;IACD,cAAc,EAAE;QACd,cAAc;KACf;IACD,oBAAoB,EAAE;QACpB,OAAO;KACR;IACD,kBAAkB,EAAE;QAClB,oBAAoB;KACrB;CACF;;;;"}
package/js/x-modules/url/components/url-handler.vue.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"url-handler.vue.js","sources":["../../../../../src/x-modules/url/components/url-handler.vue"],"sourcesContent":["<template>\n <GlobalEvents @pageshow=\"onPageShow\" @popstate=\"emitEvents\" target=\"window\" />\n</template>\n\n<script lang=\"ts\">\n import { Dictionary, objectFilter } from '@empathyco/x-utils';\n import Vue from 'vue';\n import GlobalEvents from 'vue-global-events';\n import { Component, Inject } from 'vue-property-decorator';\n import { State } from '../../../components';\n import { XOn } from '../../../components/decorators/bus.decorators';\n import { xComponentMixin } from '../../../components/x-component.mixin';\n import { FeatureLocation } from '../../../types/origin';\n import { UrlParams } from '../../../types/url-params';\n import { isArrayEmpty } from '../../../utils/array';\n import { WireMetadata } from '../../../wiring/wiring.types';\n import { SnippetConfig } from '../../../x-installer/api/api.types';\n import { initialUrlState } from '../store/initial-state';\n import { UrlParamValue } from '../store/types';\n import { urlXModule } from '../x-module';\n\n interface ParsedUrlParams {\n all: UrlParams;\n extra: Dictionary<unknown>;\n }\n\n /**\n * This component manage the browser URL parameters to perserve them through reloads and browser\n * history navigation. It allow to configure the default url parameter names using its attributes.\n * This component doesn't render elements to the DOM.\n *\n * @public\n */\n @Component({\n components: {\n GlobalEvents\n },\n mixins: [xComponentMixin(urlXModule)]\n })\n export default class UrlHandler extends Vue {\n /**\n * The {@link SnippetConfig} provided by an ancestor.\n *\n * @internal\n */\n @Inject({ default: undefined })\n protected snippetConfig?: SnippetConfig;\n\n /**\n * Flag to know if the params were already loaded from the URL.\n *\n * @internal\n */\n protected urlLoaded = false;\n\n /**\n * The page URL. It is used to compare against the current URL to check navigation state.\n *\n * @internal\n */\n protected url?: URL;\n\n /**\n * Flag to know if the page has been persisted by the browser's back-forward cache.\n *\n * @internal\n */\n protected isPagePersisted = false;\n\n /**\n * Computed to know which params we must get from URL. It gets the params names from the initial\n * state, to get all default params names, and also from the `$attrs` to get the extra params\n * names to take into account.\n *\n * @returns An array with the name of the params.\n *\n * @internal\n */\n protected get managedParamsNames(): string[] {\n return Object.keys({ ...initialUrlState, ...this.$attrs });\n }\n\n @State('url', 'initialExtraParams')\n public initialExtraParams!: Dictionary<unknown>;\n\n /**\n * Returns the mapping of the param keys used in the URL is configured through $attrs. This way\n * we can support any param and extra param, no matters its name.\n *\n * @param paramName - The param name to get the Url key.\n * @returns The key used in the URL for the `paramName` passed.\n *\n * @internal\n */\n protected getUrlKey(paramName: string): string {\n return this.$attrs[paramName] ?? paramName;\n }\n\n /**\n * To emit the Url events just when the URL is load, and before the components mounted events\n * and state changes, we do it in the created of this component.\n */\n created(): void {\n this.emitEvents();\n }\n\n /**\n * Updates the browser URL with the new {@link UrlParams} using the history `pushState` method.\n *\n * @param newUrlParams - The new params to update browser URL.\n */\n @XOn('PushableUrlStateChanged')\n updateUrlWithPush(newUrlParams: UrlParams): void {\n this.updateUrl(newUrlParams, window.history.pushState.bind(window.history));\n }\n\n /**\n * Updates the browser URL with the new {@link UrlParams} using the history `replaceState`\n * method.\n *\n * @param newUrlParams - The new params to update browser URL.\n */\n @XOn('ReplaceableUrlStateChanged')\n updateUrlWithReplace(newUrlParams: UrlParams): void {\n this.updateUrl(newUrlParams, window.history.replaceState.bind(window.history));\n }\n\n /**\n * Handler of the\n * {@link https://developer.mozilla.org/en-US/docs/Web/API/Window/pageshow_event | pageshow }\n * event.\n *\n * @remarks The pageshow event is listened to check if the browser has performed a navigation\n * using the back-forward cache. This information is available in the\n * PageTransitionEvent.persisted property.\n *\n * @param event - The page transition event.\n * @internal\n */\n protected onPageShow(event: PageTransitionEvent): void {\n this.isPagePersisted = event.persisted;\n if (event.persisted) {\n // The internal url is reset due to the back-forward cache storing the previous value which\n // is no longer valid.\n this.url = undefined;\n }\n }\n\n /**\n * Emits the {@link UrlXEvents.ParamsLoadedFromUrl} XEvent,\n * the {@link UrlXEvents.ExtraParamsLoadedFromUrl} XEvent and, if there is query, also emits\n * the {@link XEventsTypes.UserOpenXProgrammatically}.\n *\n * @internal\n */\n protected emitEvents(): void {\n const { all, extra } = this.parseUrlParams();\n const metadata = this.createWireMetadata();\n this.$x.emit('ParamsLoadedFromUrl', all, metadata);\n this.$x.emit('ExtraParamsLoadedFromUrl', extra, metadata);\n // TODO: Move this logic from here.\n if (all.query) {\n this.$x.emit('UserOpenXProgrammatically', undefined, metadata);\n }\n this.urlLoaded = true;\n }\n\n /**\n * Creates the wire metadata to include in every emitted {@link XEvent | XEvents}.\n *\n * @returns The {@link WireMetadata | metadata}.\n * @internal\n */\n protected createWireMetadata(): Pick<WireMetadata, 'feature' | 'location'> {\n return {\n feature: 'url',\n location: this.detectLocation()\n };\n }\n\n /**\n * Detects the {@link FeatureLocation | location} used to build the\n * {@link QueryOriginInit | events metadata origin}.\n *\n * @returns The {@link FeatureLocation | location}.\n * @internal\n */\n protected detectLocation(): FeatureLocation {\n const currentUrl = new URL(window.location.href);\n const previousUrl = this.url;\n this.url = currentUrl;\n\n const isInternalNavigation =\n previousUrl?.search !== currentUrl.search && previousUrl?.pathname === currentUrl.pathname;\n if (isInternalNavigation) {\n return 'url_history';\n }\n\n if (this.isNavigatingFromPdp()) {\n return 'url_history_pdp';\n }\n\n return 'external';\n }\n\n /**\n * Check if the navigation is from a product page.\n *\n * @remarks Due to Safari 14 not supporting the new and standard PerformanceNavigationTiming\n * API, we are falling back to the deprecated one, PerformanceNavigation. We also fallback to\n * this API whenever we get a navigationType equal to reload, because Safari has a bug that the\n * navigationType is permanently set to reload after you have reload the page and it never\n * resets. As some browsers have a back-forward cache implemented, we also take into account if\n * the page is persisted.\n *\n * @returns True if the navigation is from a product page, false otherwise.\n * @internal\n */\n protected isNavigatingFromPdp(): boolean {\n const isPagePersisted = this.isPagePersisted;\n const navigationEntries = window.performance.getEntriesByType('navigation');\n const navigationType = (navigationEntries[0] as PerformanceNavigationTiming)?.type;\n const useFallbackStrategy =\n window.performance.navigation &&\n (isArrayEmpty(navigationEntries) || navigationType === 'reload');\n\n // Reset internal isPagePersisted property value\n this.isPagePersisted = false;\n\n if (useFallbackStrategy) {\n const {\n type: fallbackNavigationType,\n TYPE_BACK_FORWARD,\n TYPE_NAVIGATE\n } = window.performance.navigation;\n const isNavigatingInSpa =\n !!this.snippetConfig?.isSpa && fallbackNavigationType === TYPE_NAVIGATE;\n return fallbackNavigationType === TYPE_BACK_FORWARD || isNavigatingInSpa || isPagePersisted;\n } else {\n const isNavigatingInSpa = !!this.snippetConfig?.isSpa && navigationType === 'navigate';\n return navigationType === 'back_forward' || isNavigatingInSpa || isPagePersisted;\n }\n }\n\n /**\n * Gets the {@link UrlParams} from the URL, including only the params defined by `paramsNames`.\n *\n * @returns ParsedUrlParams obtained from URL.\n * @internal\n */\n protected parseUrlParams(): ParsedUrlParams {\n const urlSearchParams = new URL(window.location.href).searchParams;\n return this.managedParamsNames.reduce<ParsedUrlParams>(\n (params, name) => {\n const urlKey = this.getUrlKey(name);\n if (urlSearchParams.has(urlKey)) {\n if (name in initialUrlState) {\n const urlValue = urlSearchParams.getAll(urlKey);\n params.all[name] = this.parseUrlParam(name, urlValue);\n } else {\n params.all[name] = params.extra[name] = urlSearchParams.get(urlKey);\n }\n }\n return params;\n },\n { all: { ...initialUrlState }, extra: { ...this.initialExtraParams } }\n );\n }\n\n /**\n * Updates the browser URL with the passed `newUrlParams` and using the browser history method\n * passed as `historyMethod`. It only updates the browser history if the new URL is different\n * from the current.\n *\n * @param newUrlParams - The new params to add to the browser URL.\n * @param historyMethod - The browser history method used to add the new URL.\n *\n * @internal\n */\n protected updateUrl(\n newUrlParams: UrlParams,\n historyMethod: History['pushState'] | History['replaceState']\n ): void {\n if (this.urlLoaded) {\n const url = new URL(window.location.href);\n this.deleteUrlParameters(url);\n this.setUrlParameters(url, newUrlParams);\n if (url.href.replace(/\\+/g, '%20') !== window.location.href) {\n historyMethod({ ...window.history.state }, document.title, url.href);\n }\n this.url = url;\n }\n }\n\n /**\n * Deletes all the parameters in the passed URL.\n *\n * @param url - The URL to remove parameters from.\n * @internal\n * **/\n protected deleteUrlParameters(url: URL): void {\n this.managedParamsNames.forEach(paramName =>\n url.searchParams.delete(this.getUrlKey(paramName))\n );\n }\n\n /**\n * Set all the provided parameters to the url with the mapped key.\n *\n * @param url - The current URL.\n * @param urlParams - The list of parameters to add.\n * @remarks The params are filtered because there maybe received extra params which will not be\n * managed by URL. This is defined by the `managedParamsNames` computed. Also, the parameters\n * are sorted Alphabetically to produce always the same URL with the same parameters.This is\n * important for SEO purposes.\n *\n * @internal\n * **/\n protected setUrlParameters(url: URL, urlParams: UrlParams): void {\n const filteredParams = objectFilter(urlParams, paramName =>\n this.managedParamsNames.includes(paramName as string)\n );\n const sortedParameters = this.sortParams(filteredParams);\n sortedParameters.forEach(([paramName, paramValue]) => {\n const urlParamKey = this.getUrlKey(paramName);\n if (Array.isArray(paramValue)) {\n paramValue.forEach(value => {\n url.searchParams.append(urlParamKey, String(value));\n });\n } else {\n url.searchParams.set(urlParamKey, String(paramValue));\n }\n });\n }\n\n /**\n * Sorts the params in a tuple array [key,value] to generate always the same URL with the params\n * in the same order.\n *\n * @param urlParams - The {@link UrlParams} to sort.\n * @returns An array of tuples with the key-value of each paramter, sorted by key.\n * @internal\n */\n protected sortParams(urlParams: UrlParams): Array<[string, unknown]> {\n return Object.entries(urlParams).sort(([param1], [param2]) => {\n return param1 < param2 ? -1 : 1;\n });\n }\n\n /**\n * Returns the URL param value parsed depending on its type in the initial store state. As we\n * can not know what type can have an extra param, all extra params are parsed as strings. We\n * know if it is an extra param because it is not in the initial state.\n *\n * @param name - The name of the param in {@link UrlParams}.\n * @param value - The `URLSearchParams` value as an arry of strings.\n * @returns The parsed value.\n *\n * @internal\n */\n protected parseUrlParam(name: string, value: string[]): UrlParamValue {\n switch (typeof initialUrlState[name]) {\n case 'number':\n return Number(value[0]);\n case 'boolean':\n return value[0].toLowerCase() === 'true';\n case 'string':\n return value[0];\n default:\n // array\n return value;\n }\n }\n }\n</script>\n\n<docs lang=\"mdx\">\n## Events\n\nThis component emits the following events:\n\n- [`ParamsLoadedFromUrl`](./../../api/x-components.urlxevents.paramsloadedfromurl.md)\n- [`ExtraParamsLoadedFromUrl`](./../../api/x-components.urlxevents.extraparamsloadedfromurl.md)\n- [`UserOpenXProgrammatically`](./../../api/x-components.xeventstypes.useropenxprogrammatically.md)\n\n## See it in action\n\nThis component manages the browser URL parameters to preserve them through reloads and browser\nhistory navigation. It allow to configure the default url parameter names using its attributes. This\ncomponent doesn't render elements to the DOM.\n\n_Try to make some requests and take a look to the url!_\n\n```vue\n<template>\n <UrlHandler />\n</template>\n\n<script>\n import { UrlHandler } from '@empathyco/x-components/url-handler';\n\n export default {\n name: 'UrlHandlerDemo',\n components: {\n UrlHandler\n }\n };\n</script>\n```\n\n### Play with props\n\nIn this example, the `UrlHandler` component changes the following query parameter names:\n\n- `query` to be `q`.\n- `page` to be `p`.\n- `filter` to be `f`\n- `sort` to be `s`\n\n_Try to make some requests and take a look to the url!_\n\n```vue\n<template>\n <UrlHandler query=\"q\" page=\"p\" filter=\"f\" sort=\"s\" />\n</template>\n\n<script>\n import { UrlHandler } from '@empathyco/x-components/url-handler';\n\n export default {\n name: 'UrlHandlerDemo',\n components: {\n UrlHandler\n }\n };\n</script>\n```\n\n### Play with events\n\nThe `UrlHandler` will emit the `ParamsLoadedFromUrl` when the page is loaded.\n\nThe `UrlHandler` will emit the `ExtraParamsLoadedFromUrl` when the page is loaded with an extra\nparam configured and with a value in URL.\n\nThe `UrlHandler` will emit the `UserOpenXProgrammatically` when the page is loaded with a query in\nthe URL.\n</docs>\n"],"names":[],"mappings":";;;;AAEA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
1
+ {"version":3,"file":"url-handler.vue.js","sources":["../../../../../src/x-modules/url/components/url-handler.vue"],"sourcesContent":["<template>\n <GlobalEvents @pageshow=\"onPageShow\" @popstate=\"emitEvents\" target=\"window\" />\n</template>\n\n<script lang=\"ts\">\n import { Dictionary, objectFilter } from '@empathyco/x-utils';\n import Vue from 'vue';\n import GlobalEvents from 'vue-global-events';\n import { Component, Inject } from 'vue-property-decorator';\n import { State } from '../../../components';\n import { XOn } from '../../../components/decorators/bus.decorators';\n import { xComponentMixin } from '../../../components/x-component.mixin';\n import { FeatureLocation } from '../../../types/origin';\n import { UrlParams } from '../../../types/url-params';\n import { isArrayEmpty } from '../../../utils/array';\n import { WireMetadata } from '../../../wiring/wiring.types';\n import { SnippetConfig } from '../../../x-installer/api/api.types';\n import { initialUrlState } from '../store/initial-state';\n import { UrlParamValue } from '../store/types';\n import { urlXModule } from '../x-module';\n\n interface ParsedUrlParams {\n all: UrlParams;\n extra: Dictionary<unknown>;\n }\n\n /**\n * This component manage the browser URL parameters to perserve them through reloads and browser\n * history navigation. It allow to configure the default url parameter names using its attributes.\n * This component doesn't render elements to the DOM.\n *\n * @public\n */\n @Component({\n components: {\n GlobalEvents\n },\n mixins: [xComponentMixin(urlXModule)]\n })\n export default class UrlHandler extends Vue {\n /**\n * The {@link SnippetConfig} provided by an ancestor.\n *\n * @internal\n */\n @Inject({ default: undefined })\n protected snippetConfig?: SnippetConfig;\n\n /**\n * Flag to know if the params were already loaded from the URL.\n *\n * @internal\n */\n protected urlLoaded = false;\n\n /**\n * The page URL. It is used to compare against the current URL to check navigation state.\n *\n * @internal\n */\n protected url?: URL;\n\n /**\n * Flag to know if the page has been persisted by the browser's back-forward cache.\n *\n * @internal\n */\n protected isPagePersisted = false;\n\n /**\n * Computed to know which params we must get from URL. It gets the params names from the initial\n * state, to get all default params names, and also from the `$attrs` to get the extra params\n * names to take into account.\n *\n * @returns An array with the name of the params.\n *\n * @internal\n */\n protected get managedParamsNames(): string[] {\n return Object.keys({ ...initialUrlState, ...this.$attrs });\n }\n\n @State('url', 'initialExtraParams')\n public initialExtraParams!: Dictionary<unknown>;\n\n /**\n * Returns the mapping of the param keys used in the URL is configured through $attrs. This way\n * we can support any param and extra param, no matters its name.\n *\n * @param paramName - The param name to get the Url key.\n * @returns The key used in the URL for the `paramName` passed.\n *\n * @internal\n */\n protected getUrlKey(paramName: string): string {\n return this.$attrs[paramName] ?? paramName;\n }\n\n /**\n * To emit the Url events just when the URL is load, and before the components mounted events\n * and state changes, we do it in the created of this component.\n */\n created(): void {\n this.emitEvents();\n }\n\n /**\n * Updates the browser URL with the new {@link UrlParams} using the history `pushState` method.\n *\n * @param newUrlParams - The new params to update browser URL.\n */\n @XOn('PushableUrlStateChanged')\n updateUrlWithPush(newUrlParams: UrlParams): void {\n this.updateUrl(newUrlParams, window.history.pushState.bind(window.history));\n }\n\n /**\n * Updates the browser URL with the new {@link UrlParams} using the history `replaceState`\n * method.\n *\n * @param newUrlParams - The new params to update browser URL.\n */\n @XOn('ReplaceableUrlStateChanged')\n updateUrlWithReplace(newUrlParams: UrlParams): void {\n this.updateUrl(newUrlParams, window.history.replaceState.bind(window.history));\n }\n\n /**\n * Handler of the\n * {@link https://developer.mozilla.org/en-US/docs/Web/API/Window/pageshow_event | pageshow }\n * event.\n *\n * @remarks The pageshow event is listened to check if the browser has performed a navigation\n * using the back-forward cache. This information is available in the\n * PageTransitionEvent.persisted property.\n *\n * @param event - The page transition event.\n * @internal\n */\n protected onPageShow(event: PageTransitionEvent): void {\n this.isPagePersisted = event.persisted;\n if (event.persisted) {\n // The internal url is reset due to the back-forward cache storing the previous value which\n // is no longer valid.\n this.url = undefined;\n }\n }\n\n /**\n * Emits the {@link UrlXEvents.ParamsLoadedFromUrl} XEvent,\n * the {@link UrlXEvents.ExtraParamsLoadedFromUrl} XEvent and, if there is query, also emits\n * the {@link XEventsTypes.UserOpenXProgrammatically}.\n *\n * @internal\n */\n protected emitEvents(): void {\n const { all, extra } = this.parseUrlParams();\n const metadata = this.createWireMetadata();\n this.$x.emit('ParamsLoadedFromUrl', all, metadata);\n this.$x.emit('ExtraParamsLoadedFromUrl', extra, metadata);\n // TODO: Move this logic from here.\n if (all.query) {\n this.$x.emit('UserOpenXProgrammatically', undefined, metadata);\n }\n this.urlLoaded = true;\n }\n\n /**\n * Creates the wire metadata to include in every emitted {@link XEvent | XEvents}.\n *\n * @returns The {@link WireMetadata | metadata}.\n * @internal\n */\n protected createWireMetadata(): Pick<WireMetadata, 'feature' | 'location'> {\n return {\n feature: 'url',\n location: this.detectLocation()\n };\n }\n\n /**\n * Detects the {@link FeatureLocation | location} used to build the\n * {@link QueryOriginInit | events metadata origin}.\n *\n * @returns The {@link FeatureLocation | location}.\n * @internal\n */\n protected detectLocation(): FeatureLocation {\n const currentUrl = new URL(window.location.href);\n const previousUrl = this.url;\n this.url = currentUrl;\n\n const isInternalNavigation =\n previousUrl?.search !== currentUrl.search && previousUrl?.pathname === currentUrl.pathname;\n if (isInternalNavigation) {\n return 'url_history';\n }\n\n if (this.isNavigatingFromPdp()) {\n return 'url_history_pdp';\n }\n\n return 'external';\n }\n\n /**\n * Check if the navigation is from a product page.\n *\n * @remarks Due to Safari 14 not supporting the new and standard PerformanceNavigationTiming\n * API, we are falling back to the deprecated one, PerformanceNavigation. We also fallback to\n * this API whenever we get a navigationType equal to reload, because Safari has a bug that the\n * navigationType is permanently set to reload after you have reload the page and it never\n * resets. As some browsers have a back-forward cache implemented, we also take into account if\n * the page is persisted.\n *\n * @returns True if the navigation is from a product page, false otherwise.\n * @internal\n */\n protected isNavigatingFromPdp(): boolean {\n const isPagePersisted = this.isPagePersisted;\n const navigationEntries = window.performance.getEntriesByType('navigation');\n const navigationType = (navigationEntries[0] as PerformanceNavigationTiming)?.type;\n const useFallbackStrategy =\n window.performance.navigation &&\n (isArrayEmpty(navigationEntries) || navigationType === 'reload');\n\n // Reset internal isPagePersisted property value\n this.isPagePersisted = false;\n\n if (useFallbackStrategy) {\n const {\n type: fallbackNavigationType,\n TYPE_BACK_FORWARD,\n TYPE_NAVIGATE\n } = window.performance.navigation;\n const isNavigatingInSpa =\n !!this.snippetConfig?.isSpa && fallbackNavigationType === TYPE_NAVIGATE;\n return fallbackNavigationType === TYPE_BACK_FORWARD || isNavigatingInSpa || isPagePersisted;\n } else {\n const isNavigatingInSpa = !!this.snippetConfig?.isSpa && navigationType === 'navigate';\n return navigationType === 'back_forward' || isNavigatingInSpa || isPagePersisted;\n }\n }\n\n /**\n * Gets the {@link UrlParams} from the URL, including only the params defined by `paramsNames`.\n *\n * @returns ParsedUrlParams obtained from URL.\n * @internal\n */\n protected parseUrlParams(): ParsedUrlParams {\n const urlSearchParams = new URL(window.location.href).searchParams;\n return this.managedParamsNames.reduce<ParsedUrlParams>(\n (params, name) => {\n const urlKey = this.getUrlKey(name);\n if (urlSearchParams.has(urlKey)) {\n if (name in initialUrlState) {\n const urlValue = urlSearchParams.getAll(urlKey);\n params.all[name] = this.parseUrlParam(name, urlValue);\n } else {\n params.all[name] = params.extra[name] = urlSearchParams.get(urlKey);\n }\n }\n return params;\n },\n { all: { ...initialUrlState }, extra: { ...this.initialExtraParams } }\n );\n }\n\n /**\n * Updates the browser URL with the passed `newUrlParams` and using the browser history method\n * passed as `historyMethod`. It only updates the browser history if the new URL is different\n * from the current.\n *\n * @param newUrlParams - The new params to add to the browser URL.\n * @param historyMethod - The browser history method used to add the new URL.\n *\n * @internal\n */\n protected updateUrl(\n newUrlParams: UrlParams,\n historyMethod: History['pushState'] | History['replaceState']\n ): void {\n if (this.urlLoaded) {\n const url = new URL(window.location.href);\n this.deleteUrlParameters(url);\n this.setUrlParameters(url, newUrlParams);\n\n url.href = url.href.replace(/\\+/g, '%20');\n\n if (url.href !== window.location.href) {\n historyMethod({ ...window.history.state }, document.title, url.href);\n }\n this.url = url;\n }\n }\n\n /**\n * Deletes all the parameters in the passed URL.\n *\n * @param url - The URL to remove parameters from.\n * @internal\n * **/\n protected deleteUrlParameters(url: URL): void {\n this.managedParamsNames.forEach(paramName =>\n url.searchParams.delete(this.getUrlKey(paramName))\n );\n }\n\n /**\n * Set all the provided parameters to the url with the mapped key.\n *\n * @param url - The current URL.\n * @param urlParams - The list of parameters to add.\n * @remarks The params are filtered because there maybe received extra params which will not be\n * managed by URL. This is defined by the `managedParamsNames` computed. Also, the parameters\n * are sorted Alphabetically to produce always the same URL with the same parameters.This is\n * important for SEO purposes.\n *\n * @internal\n * **/\n protected setUrlParameters(url: URL, urlParams: UrlParams): void {\n const filteredParams = objectFilter(urlParams, paramName =>\n this.managedParamsNames.includes(paramName as string)\n );\n const sortedParameters = this.sortParams(filteredParams);\n sortedParameters.forEach(([paramName, paramValue]) => {\n const urlParamKey = this.getUrlKey(paramName);\n if (Array.isArray(paramValue)) {\n paramValue.forEach(value => {\n url.searchParams.append(urlParamKey, String(value));\n });\n } else {\n url.searchParams.set(urlParamKey, String(paramValue));\n }\n });\n }\n\n /**\n * Sorts the params in a tuple array [key,value] to generate always the same URL with the params\n * in the same order.\n *\n * @param urlParams - The {@link UrlParams} to sort.\n * @returns An array of tuples with the key-value of each paramter, sorted by key.\n * @internal\n */\n protected sortParams(urlParams: UrlParams): Array<[string, unknown]> {\n return Object.entries(urlParams).sort(([param1], [param2]) => {\n return param1 < param2 ? -1 : 1;\n });\n }\n\n /**\n * Returns the URL param value parsed depending on its type in the initial store state. As we\n * can not know what type can have an extra param, all extra params are parsed as strings. We\n * know if it is an extra param because it is not in the initial state.\n *\n * @param name - The name of the param in {@link UrlParams}.\n * @param value - The `URLSearchParams` value as an arry of strings.\n * @returns The parsed value.\n *\n * @internal\n */\n protected parseUrlParam(name: string, value: string[]): UrlParamValue {\n switch (typeof initialUrlState[name]) {\n case 'number':\n return Number(value[0]);\n case 'boolean':\n return value[0].toLowerCase() === 'true';\n case 'string':\n return value[0];\n default:\n // array\n return value;\n }\n }\n }\n</script>\n\n<docs lang=\"mdx\">\n## Events\n\nThis component emits the following events:\n\n- [`ParamsLoadedFromUrl`](./../../api/x-components.urlxevents.paramsloadedfromurl.md)\n- [`ExtraParamsLoadedFromUrl`](./../../api/x-components.urlxevents.extraparamsloadedfromurl.md)\n- [`UserOpenXProgrammatically`](./../../api/x-components.xeventstypes.useropenxprogrammatically.md)\n\n## See it in action\n\nThis component manages the browser URL parameters to preserve them through reloads and browser\nhistory navigation. It allow to configure the default url parameter names using its attributes. This\ncomponent doesn't render elements to the DOM.\n\n_Try to make some requests and take a look to the url!_\n\n```vue\n<template>\n <UrlHandler />\n</template>\n\n<script>\n import { UrlHandler } from '@empathyco/x-components/url-handler';\n\n export default {\n name: 'UrlHandlerDemo',\n components: {\n UrlHandler\n }\n };\n</script>\n```\n\n### Play with props\n\nIn this example, the `UrlHandler` component changes the following query parameter names:\n\n- `query` to be `q`.\n- `page` to be `p`.\n- `filter` to be `f`\n- `sort` to be `s`\n\n_Try to make some requests and take a look to the url!_\n\n```vue\n<template>\n <UrlHandler query=\"q\" page=\"p\" filter=\"f\" sort=\"s\" />\n</template>\n\n<script>\n import { UrlHandler } from '@empathyco/x-components/url-handler';\n\n export default {\n name: 'UrlHandlerDemo',\n components: {\n UrlHandler\n }\n };\n</script>\n```\n\n### Play with events\n\nThe `UrlHandler` will emit the `ParamsLoadedFromUrl` when the page is loaded.\n\nThe `UrlHandler` will emit the `ExtraParamsLoadedFromUrl` when the page is loaded with an extra\nparam configured and with a value in URL.\n\nThe `UrlHandler` will emit the `UserOpenXProgrammatically` when the page is loaded with a query in\nthe URL.\n</docs>\n"],"names":[],"mappings":";;;;AAEA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
package/js/x-modules/url/components/url-handler.vue_rollup-plugin-vue_script.vue.js CHANGED
@@ -330,7 +330,8 @@ let UrlHandler = class UrlHandler extends Vue {
330
330
  const url = new URL(window.location.href);
331
331
  this.deleteUrlParameters(url);
332
332
  this.setUrlParameters(url, newUrlParams);
333
- if (url.href.replace(/\+/g, '%20') !== window.location.href) {
333
+ url.href = url.href.replace(/\+/g, '%20');
334
+ if (url.href !== window.location.href) {
334
335
  historyMethod({ ...window.history.state }, document.title, url.href);
335
336
  }
336
337
  this.url = url;