@empathyco/x-components 4.1.0-alpha.32 → 4.1.0-alpha.34

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 (18) hide show
  1. package/CHANGELOG.md +18 -0
  2. package/design-system/deprecated-full-theme.css +85 -85
  3. package/docs/API-reference/api/x-components.baseresultimage.md +2 -2
  4. package/docs/API-reference/api/x-components.md +1 -1
  5. package/docs/API-reference/api/x-components.snippetcallbacks.md +162 -4
  6. package/js/components/no-element.js +15 -4
  7. package/js/components/no-element.js.map +1 -1
  8. package/js/components/snippet-callbacks.vue.js.map +1 -1
  9. package/js/components/snippet-callbacks.vue2.js +50 -38
  10. package/js/components/snippet-callbacks.vue2.js.map +1 -1
  11. package/package.json +2 -2
  12. package/report/x-components.api.json +2132 -142
  13. package/report/x-components.api.md +164 -10
  14. package/types/components/no-element.d.ts +1 -2
  15. package/types/components/no-element.d.ts.map +1 -1
  16. package/types/components/result/base-result-image.vue.d.ts +2 -2
  17. package/types/components/snippet-callbacks.vue.d.ts +163 -20
  18. package/types/components/snippet-callbacks.vue.d.ts.map +1 -1
package/CHANGELOG.md CHANGED
@@ -3,6 +3,24 @@
3
3
  All notable changes to this project will be documented in this file.
4
4
  See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
5
5
 
6
+ ## [4.1.0-alpha.34](https://github.com/empathyco/x/compare/@empathyco/x-components@4.1.0-alpha.33...@empathyco/x-components@4.1.0-alpha.34) (2024-03-19)
7
+
8
+
9
+ ### Code Refactoring
10
+
11
+ * migrate no-element component to vue 2.7 ([29d6a61](https://github.com/empathyco/x/commit/29d6a613aa5a46a6584fcb99015a5cbd99d43b42))
12
+
13
+
14
+
15
+ ## [4.1.0-alpha.33](https://github.com/empathyco/x/compare/@empathyco/x-components@4.1.0-alpha.32...@empathyco/x-components@4.1.0-alpha.33) (2024-03-19)
16
+
17
+
18
+ ### Code Refactoring
19
+
20
+ * migrate snippet-callbacks to vue 2.7 (#1431) ([168ff1d](https://github.com/empathyco/x/commit/168ff1db8ac964fd12c307c61756d23d84e6ad76))
21
+
22
+
23
+
6
24
  ## [4.1.0-alpha.32](https://github.com/empathyco/x/compare/@empathyco/x-components@4.1.0-alpha.31...@empathyco/x-components@4.1.0-alpha.32) (2024-03-13)
7
25
 
8
26
 
package/design-system/deprecated-full-theme.css CHANGED
@@ -1,5 +1,4 @@
1
1
 
2
-
3
2
  .x-uppercase {
4
3
  text-transform: uppercase;
5
4
  }
@@ -34,6 +33,7 @@
34
33
  -webkit-text-decoration-line: none;
35
34
  text-decoration-line: none;
36
35
  }
36
+
37
37
  .x-static {
38
38
  position: static !important;
39
39
  }
@@ -3329,6 +3329,21 @@
3329
3329
  .x-border-color--transparent {
3330
3330
  border-color: var(--x-color-base-transparent) !important;
3331
3331
  }
3332
+ .x-text--stroke.x-text {
3333
+ --x-string-text-decoration: line-through;
3334
+ }
3335
+ .x-text--stroke.x-title1 {
3336
+ --x-string-text-decoration-title1: line-through;
3337
+ }
3338
+ .x-text--stroke.x-title2 {
3339
+ --x-string-text-decoration-title2: line-through;
3340
+ }
3341
+ .x-text--stroke.x-title3 {
3342
+ --x-string-text-decoration-title3: line-through;
3343
+ }
3344
+ .x-text--stroke.x-small {
3345
+ --x-string-text-decoration-small: line-through;
3346
+ }
3332
3347
  .x-background--lead {
3333
3348
  background-color: var(--x-color-base-lead) !important;
3334
3349
  }
@@ -3372,21 +3387,6 @@
3372
3387
  .x-background--transparent {
3373
3388
  background-color: var(--x-color-base-transparent) !important;
3374
3389
  }
3375
- .x-text--stroke.x-text {
3376
- --x-string-text-decoration: line-through;
3377
- }
3378
- .x-text--stroke.x-title1 {
3379
- --x-string-text-decoration-title1: line-through;
3380
- }
3381
- .x-text--stroke.x-title2 {
3382
- --x-string-text-decoration-title2: line-through;
3383
- }
3384
- .x-text--stroke.x-title3 {
3385
- --x-string-text-decoration-title3: line-through;
3386
- }
3387
- .x-text--stroke.x-small {
3388
- --x-string-text-decoration-small: line-through;
3389
- }
3390
3390
  :root {
3391
3391
  --x-color-text-secondary: var(--x-color-base-neutral-35);
3392
3392
  }
@@ -3684,6 +3684,13 @@
3684
3684
  --x-number-font-weight-tag-default-selected
3685
3685
  );
3686
3686
  }
3687
+ :root {
3688
+ --x-size-border-radius-tag-card: var(--x-size-border-radius-base-s);
3689
+ --x-size-border-radius-top-left-tag-card: var(--x-size-border-radius-tag-card);
3690
+ --x-size-border-radius-top-right-tag-card: var(--x-size-border-radius-tag-card);
3691
+ --x-size-border-radius-bottom-right-tag-card: var(--x-size-border-radius-tag-card);
3692
+ --x-size-border-radius-bottom-left-tag-card: var(--x-size-border-radius-tag-card);
3693
+ }
3687
3694
  :root {
3688
3695
  --x-color-background-tag-default: var(--x-color-base-neutral-100);
3689
3696
  --x-color-border-tag-default: var(--x-color-text-tag-default);
@@ -3912,13 +3919,6 @@
3912
3919
  --x-size-border-radius-bottom-right-tag-card: var(--x-size-border-radius-tag-card);
3913
3920
  --x-size-border-radius-bottom-left-tag-card: var(--x-size-border-radius-tag-card);
3914
3921
  }
3915
- :root {
3916
- --x-size-border-radius-tag-card: var(--x-size-border-radius-base-s);
3917
- --x-size-border-radius-top-left-tag-card: var(--x-size-border-radius-tag-card);
3918
- --x-size-border-radius-top-right-tag-card: var(--x-size-border-radius-tag-card);
3919
- --x-size-border-radius-bottom-right-tag-card: var(--x-size-border-radius-tag-card);
3920
- --x-size-border-radius-bottom-left-tag-card: var(--x-size-border-radius-tag-card);
3921
- }
3922
3922
 
3923
3923
  .x-tag--card.x-tag,
3924
3924
  .x-tag--card .x-tag {
@@ -4822,23 +4822,6 @@
4822
4822
  --x-size-border-width-result-description-default: 0;
4823
4823
  --x-size-border-width-result-picture-default: 0;
4824
4824
  }
4825
- :root {
4826
- --x-color-border-result-default: var(--x-color-base-lead);
4827
- --x-color-border-result-overlay-default: var(--x-color-border-result-default);
4828
- --x-color-border-result-description-default: var(--x-color-border-result-default);
4829
- --x-color-border-result-picture-default: var(--x-color-border-result-default);
4830
- --x-color-background-result-default: transparent;
4831
- --x-size-padding-result-default: 0;
4832
- --x-size-padding-result-overlay-default: 0;
4833
- --x-size-padding-result-description-default: 0;
4834
- --x-size-gap-result-default: var(--x-size-base-03);
4835
- --x-size-padding-result-picture-default: 0;
4836
- --x-size-border-radius-result-default: var(--x-size-border-radius-base-none);
4837
- --x-size-border-width-result-default: 0;
4838
- --x-size-border-width-result-overlay-default: 0;
4839
- --x-size-border-width-result-description-default: 0;
4840
- --x-size-border-width-result-picture-default: 0;
4841
- }
4842
4825
 
4843
4826
  .x-result {
4844
4827
  display: grid;
@@ -4892,6 +4875,23 @@
4892
4875
  opacity: 1;
4893
4876
  }
4894
4877
  }
4878
+ :root {
4879
+ --x-color-border-result-default: var(--x-color-base-lead);
4880
+ --x-color-border-result-overlay-default: var(--x-color-border-result-default);
4881
+ --x-color-border-result-description-default: var(--x-color-border-result-default);
4882
+ --x-color-border-result-picture-default: var(--x-color-border-result-default);
4883
+ --x-color-background-result-default: transparent;
4884
+ --x-size-padding-result-default: 0;
4885
+ --x-size-padding-result-overlay-default: 0;
4886
+ --x-size-padding-result-description-default: 0;
4887
+ --x-size-gap-result-default: var(--x-size-base-03);
4888
+ --x-size-padding-result-picture-default: 0;
4889
+ --x-size-border-radius-result-default: var(--x-size-border-radius-base-none);
4890
+ --x-size-border-width-result-default: 0;
4891
+ --x-size-border-width-result-overlay-default: 0;
4892
+ --x-size-border-width-result-description-default: 0;
4893
+ --x-size-border-width-result-picture-default: 0;
4894
+ }
4895
4895
  :root {
4896
4896
  --x-size-border-radius-result-card: var(--x-size-border-radius-base-s);
4897
4897
  }
@@ -5093,21 +5093,6 @@
5093
5093
  --x-size-border-radius-bottom-picture-card: var(--x-size-border-radius-picture-card);
5094
5094
  --x-size-border-radius-left-picture-card: var(--x-size-border-radius-picture-card);
5095
5095
  }
5096
- :root {
5097
- --x-size-border-radius-picture-card: var(--x-size-border-radius-base-s);
5098
- --x-size-border-radius-top-picture-card: var(--x-size-border-radius-picture-card);
5099
- --x-size-border-radius-right-picture-card: var(--x-size-border-radius-picture-card);
5100
- --x-size-border-radius-bottom-picture-card: var(--x-size-border-radius-picture-card);
5101
- --x-size-border-radius-left-picture-card: var(--x-size-border-radius-picture-card);
5102
- }
5103
-
5104
- .x-picture--card.x-picture {
5105
- --x-size-border-radius-picture-default: var(--x-size-border-radius-picture-card);
5106
- --x-size-border-radius-top-picture-default: var(--x-size-border-radius-top-picture-card);
5107
- --x-size-border-radius-right-picture-default: var(--x-size-border-radius-right-picture-card);
5108
- --x-size-border-radius-bottom-picture-default: var(--x-size-border-radius-bottom-picture-card);
5109
- --x-size-border-radius-left-picture-default: var(--x-size-border-radius-left-picture-card);
5110
- }
5111
5096
  :root {
5112
5097
  --x-color-background-option-list-button-default: transparent;
5113
5098
  --x-color-border-option-list-button-default: transparent;
@@ -5188,6 +5173,21 @@
5188
5173
  --x-number-font-weight-option-list-button-default: var(--x-number-font-weight-base-regular);
5189
5174
  --x-number-font-weight-option-list-button-default-selected: var(--x-number-font-weight-base-bold);
5190
5175
  }
5176
+ :root {
5177
+ --x-size-border-radius-picture-card: var(--x-size-border-radius-base-s);
5178
+ --x-size-border-radius-top-picture-card: var(--x-size-border-radius-picture-card);
5179
+ --x-size-border-radius-right-picture-card: var(--x-size-border-radius-picture-card);
5180
+ --x-size-border-radius-bottom-picture-card: var(--x-size-border-radius-picture-card);
5181
+ --x-size-border-radius-left-picture-card: var(--x-size-border-radius-picture-card);
5182
+ }
5183
+
5184
+ .x-picture--card.x-picture {
5185
+ --x-size-border-radius-picture-default: var(--x-size-border-radius-picture-card);
5186
+ --x-size-border-radius-top-picture-default: var(--x-size-border-radius-top-picture-card);
5187
+ --x-size-border-radius-right-picture-default: var(--x-size-border-radius-right-picture-card);
5188
+ --x-size-border-radius-bottom-picture-default: var(--x-size-border-radius-bottom-picture-card);
5189
+ --x-size-border-radius-left-picture-default: var(--x-size-border-radius-left-picture-card);
5190
+ }
5191
5191
  :root {
5192
5192
  --x-color-background-option-list-button-default: transparent;
5193
5193
  --x-color-border-option-list-button-default: transparent;
@@ -6726,15 +6726,6 @@
6726
6726
  );
6727
6727
  --x-size-border-radius-bottom-left-input-group-pill: var(--x-size-border-radius-input-group-pill);
6728
6728
  }
6729
- :root {
6730
- --x-size-border-radius-input-group-pill: var(--x-size-border-radius-base-pill);
6731
- --x-size-border-radius-top-left-input-group-pill: var(--x-size-border-radius-input-group-pill);
6732
- --x-size-border-radius-top-right-input-group-pill: var(--x-size-border-radius-input-group-pill);
6733
- --x-size-border-radius-bottom-right-input-group-pill: var(
6734
- --x-size-border-radius-input-group-pill
6735
- );
6736
- --x-size-border-radius-bottom-left-input-group-pill: var(--x-size-border-radius-input-group-pill);
6737
- }
6738
6729
 
6739
6730
  .x-input-group--pill.x-input-group,
6740
6731
  .x-input-group--pill .x-input-group {
@@ -6752,6 +6743,15 @@
6752
6743
  --x-size-border-radius-bottom-left-input-group-pill
6753
6744
  );
6754
6745
  }
6746
+ :root {
6747
+ --x-size-border-radius-input-group-pill: var(--x-size-border-radius-base-pill);
6748
+ --x-size-border-radius-top-left-input-group-pill: var(--x-size-border-radius-input-group-pill);
6749
+ --x-size-border-radius-top-right-input-group-pill: var(--x-size-border-radius-input-group-pill);
6750
+ --x-size-border-radius-bottom-right-input-group-pill: var(
6751
+ --x-size-border-radius-input-group-pill
6752
+ );
6753
+ --x-size-border-radius-bottom-left-input-group-pill: var(--x-size-border-radius-input-group-pill);
6754
+ }
6755
6755
  :root {
6756
6756
  --x-size-padding-left-input-group-line: 0;
6757
6757
  --x-size-padding-right-input-group-line: 0;
@@ -7308,6 +7308,10 @@
7308
7308
  --x-size-width-icon-s: var(--x-size-base-03);
7309
7309
  --x-size-height-icon-s: var(--x-size-base-03);
7310
7310
  }
7311
+ :root {
7312
+ --x-size-width-icon-m: var(--x-size-base-05);
7313
+ --x-size-height-icon-m: var(--x-size-base-05);
7314
+ }
7311
7315
  :root {
7312
7316
  --x-size-width-icon-s: var(--x-size-base-03);
7313
7317
  --x-size-height-icon-s: var(--x-size-base-03);
@@ -7321,10 +7325,6 @@
7321
7325
  --x-size-width-icon-m: var(--x-size-base-05);
7322
7326
  --x-size-height-icon-m: var(--x-size-base-05);
7323
7327
  }
7324
- :root {
7325
- --x-size-width-icon-m: var(--x-size-base-05);
7326
- --x-size-height-icon-m: var(--x-size-base-05);
7327
- }
7328
7328
 
7329
7329
  .x-icon--m {
7330
7330
  --x-size-width-icon-default: var(--x-size-width-icon-m);
@@ -7352,6 +7352,11 @@
7352
7352
  --x-string-stroke-linejoin-icon-default: mitter;
7353
7353
  --x-size-stroke-width-icon-default: 1px;
7354
7354
  }
7355
+ :root {
7356
+ --x-size-padding-grid: 0;
7357
+ --x-size-gap-grid: var(--x-size-base-03);
7358
+ --x-size-min-width-grid-item: 150px;
7359
+ }
7355
7360
  :root {
7356
7361
  --x-color-stroke-icon-default: currentColor;
7357
7362
  --x-color-fill-icon-default: none;
@@ -7387,11 +7392,6 @@
7387
7392
  --x-size-gap-grid: var(--x-size-base-03);
7388
7393
  --x-size-min-width-grid-item: 150px;
7389
7394
  }
7390
- :root {
7391
- --x-size-padding-grid: 0;
7392
- --x-size-gap-grid: var(--x-size-base-03);
7393
- --x-size-min-width-grid-item: 150px;
7394
- }
7395
7395
 
7396
7396
  .x-grid-list {
7397
7397
  margin: 0;
@@ -8582,11 +8582,6 @@
8582
8582
  --x-color-border-button-ghost: transparent;
8583
8583
  --x-color-text-button-ghost: var(--x-color-base-lead);
8584
8584
  }
8585
- :root {
8586
- --x-color-background-button-ghost: transparent;
8587
- --x-color-border-button-ghost: transparent;
8588
- --x-color-text-button-ghost: var(--x-color-base-lead);
8589
- }
8590
8585
 
8591
8586
  .x-button--ghost.x-button,
8592
8587
  .x-button--ghost .x-button {
@@ -8604,6 +8599,11 @@
8604
8599
  .x-button--ghost.x-button--ghost-end .x-button {
8605
8600
  --x-size-padding-right-button-default: 0;
8606
8601
  }
8602
+ :root {
8603
+ --x-color-background-button-ghost: transparent;
8604
+ --x-color-border-button-ghost: transparent;
8605
+ --x-color-text-button-ghost: var(--x-color-base-lead);
8606
+ }
8607
8607
  :root {
8608
8608
  --x-color-background-button-default: var(--x-color-base-lead);
8609
8609
  --x-color-border-button-default: var(--x-color-background-button-default);
@@ -8822,6 +8822,13 @@
8822
8822
  --x-size-base-19: 280px;
8823
8823
  --x-size-base-20: 344px;
8824
8824
  }
8825
+ :root {
8826
+ --x-size-border-radius-base-none: 0;
8827
+ --x-size-border-radius-base-s: var(--x-size-base-02);
8828
+ --x-size-border-radius-base-m: var(--x-size-base-06);
8829
+ --x-size-border-radius-base-pill: 99999px;
8830
+ --x-size-border-width-base: 1px;
8831
+ }
8825
8832
  :root {
8826
8833
  --x-color-base-lead: #243d48;
8827
8834
  --x-color-base-auxiliary: #bfe1ec;
@@ -8834,11 +8841,4 @@
8834
8841
  --x-color-base-enable: #00705c;
8835
8842
  --x-color-base-disable: #e11f26;
8836
8843
  --x-color-base-transparent: transparent;
8837
- }
8838
- :root {
8839
- --x-size-border-radius-base-none: 0;
8840
- --x-size-border-radius-base-s: var(--x-size-base-02);
8841
- --x-size-border-radius-base-m: var(--x-size-base-06);
8842
- --x-size-border-radius-base-pill: 99999px;
8843
- --x-size-border-width-base: 1px;
8844
8844
  }
package/docs/API-reference/api/x-components.baseresultimage.md CHANGED
@@ -16,7 +16,7 @@ _default: DefineComponent<{
16
16
  };
17
17
  loadAnimation: {
18
18
  type: PropType<string | DefineComponent<{}, {}, {}, import("vue").ComponentComputedOptions, import("vue").ComponentMethodOptions, import("vue/types/v3-component-options").ComponentOptionsMixin, import("vue/types/v3-component-options").ComponentOptionsMixin, {}, string, Readonly<import("vue").ExtractPropTypes<{}>>, {}>>;
19
- default: () => import("vue/types/vue").ExtendedVue<import("vue").default<Record<string, any>, Record<string, any>, never, never, (event: string, ...args: any[]) => import("vue").default<Record<string, any>, Record<string, any>, never, never, any>>, unknown, unknown, unknown, Record<never, any>, {}, import("vue/types/v3-component-options").ComponentOptionsMixin, import("vue/types/v3-component-options").ComponentOptionsMixin>;
19
+ default: () => DefineComponent<{}, unknown, {}, {}, {}, import("vue/types/v3-component-options").ComponentOptionsMixin, import("vue/types/v3-component-options").ComponentOptionsMixin, {}, string, Readonly<import("vue").ExtractPropTypes<{}>>, {}>;
20
20
  };
21
21
  hoverAnimation: {
22
22
  type: PropType<string | DefineComponent<{}, {}, {}, import("vue").ComponentComputedOptions, import("vue").ComponentMethodOptions, import("vue/types/v3-component-options").ComponentOptionsMixin, import("vue/types/v3-component-options").ComponentOptionsMixin, {}, string, Readonly<import("vue").ExtractPropTypes<{}>>, {}>>;
@@ -43,7 +43,7 @@ _default: DefineComponent<{
43
43
  };
44
44
  loadAnimation: {
45
45
  type: PropType<string | DefineComponent<{}, {}, {}, import("vue").ComponentComputedOptions, import("vue").ComponentMethodOptions, import("vue/types/v3-component-options").ComponentOptionsMixin, import("vue/types/v3-component-options").ComponentOptionsMixin, {}, string, Readonly<import("vue").ExtractPropTypes<{}>>, {}>>;
46
- default: () => import("vue/types/vue").ExtendedVue<import("vue").default<Record<string, any>, Record<string, any>, never, never, (event: string, ...args: any[]) => import("vue").default<Record<string, any>, Record<string, any>, never, never, any>>, unknown, unknown, unknown, Record<never, any>, {}, import("vue/types/v3-component-options").ComponentOptionsMixin, import("vue/types/v3-component-options").ComponentOptionsMixin>;
46
+ default: () => DefineComponent<{}, unknown, {}, {}, {}, import("vue/types/v3-component-options").ComponentOptionsMixin, import("vue/types/v3-component-options").ComponentOptionsMixin, {}, string, Readonly<import("vue").ExtractPropTypes<{}>>, {}>;
47
47
  };
48
48
  hoverAnimation: {
49
49
  type: PropType<string | DefineComponent<{}, {}, {}, import("vue").ComponentComputedOptions, import("vue").ComponentMethodOptions, import("vue/types/v3-component-options").ComponentOptionsMixin, import("vue/types/v3-component-options").ComponentOptionsMixin, {}, string, Readonly<import("vue").ExtractPropTypes<{}>>, {}>>;
package/docs/API-reference/api/x-components.md CHANGED
@@ -111,7 +111,6 @@ X-Components is a library usable everywhere not only for search experiences.
111
111
  | [SingleColumnLayout](./x-components.singlecolumnlayout.md) | Component for use as Layout to be filled with the rest of the Components. |
112
112
  | [SlicedFilters](./x-components.slicedfilters.md) | Component that slices a list of filters and returns them using the default scoped slot, allowing the user to show the full list of them or slicing them again using the show more/less buttons. |
113
113
  | [SlidingPanel](./x-components.slidingpanel.md) | <p>This component allows for any other component or element inside it to be horizontally navigable. It also implements customizable buttons as well as other minor customizations to its general behavior.</p><p>Additionally, this component exposes the following props to modify the classes of the elements: <code>buttonClass</code>.</p> |
114
- | [SnippetCallbacks](./x-components.snippetcallbacks.md) | This component subscribes to any [XEvent](./x-components.xevent.md) with a custom callbacks provided by the snippet configuration. |
115
114
  | [SnippetConfigExtraParams](./x-components.snippetconfigextraparams.md) | Extracts the extra parameters from the [SnippetConfig](./x-components.snippetconfig.md) and syncs it with the request objects of every x-module. |
116
115
  | [SortDropdown](./x-components.sortdropdown.md) | The <code>SortDropdown</code> component allows user to select the search results order. This component also allows to change the selected sort programmatically. |
117
116
  | [SortedFilters](./x-components.sortedfilters.md) | Component that sorts a list of filters and returns them using the default scoped slot. |
@@ -675,6 +674,7 @@ X-Components is a library usable everywhere not only for search experiences.
675
674
  | [setUrlSelectedFiltersFromPreview](./x-components.seturlselectedfiltersfrompreview.md) | Sets the filters of the url module from a selectedQueryPreview's filters. |
676
675
  | [setUrlSort](./x-components.seturlsort.md) | Sets the sort of the url module. |
677
676
  | [ShowIcon](./x-components.showicon.md) | |
677
+ | [SnippetCallbacks](./x-components.snippetcallbacks.md) | This component subscribes to any [XEvent](./x-components.xevent.md) with a custom callbacks provided by the snippet configuration. |
678
678
  | [SortAZIcon](./x-components.sortazicon.md) | |
679
679
  | [SortPriceDownIcon](./x-components.sortpricedownicon.md) | |
680
680
  | [SortPriceUpIcon](./x-components.sortpriceupicon.md) | |
package/docs/API-reference/api/x-components.snippetcallbacks.md CHANGED
@@ -2,14 +2,172 @@
2
2
 
3
3
  [Home](./index.md) &gt; [@empathyco/x-components](./x-components.md) &gt; [SnippetCallbacks](./x-components.snippetcallbacks.md)
4
4
 
5
- ## SnippetCallbacks class
5
+ ## SnippetCallbacks variable
6
6
 
7
7
  This component subscribes to any [XEvent](./x-components.xevent.md) with a custom callbacks provided by the snippet configuration.
8
8
 
9
9
  **Signature:**
10
10
 
11
11
  ```typescript
12
- export default class SnippetCallbacks extends Vue
12
+ _default: import("vue").DefineComponent<{}, {
13
+ eventListeners: import("vue").ComputedRef<Partial<{
14
+ ColumnsNumberProvided: (payload: number, metadata: WireMetadata) => unknown;
15
+ RenderedColumnsNumberChanged: (payload: number, metadata: WireMetadata) => unknown;
16
+ SuggestionsDisplayed: (payload: import("@empathyco/x-types").Suggestion[], metadata: WireMetadata) => unknown;
17
+ TogglePanelStateChanged: (payload: boolean, metadata: WireMetadata) => unknown;
18
+ UserAcceptedAQuery: (payload: string, metadata: WireMetadata) => unknown;
19
+ UserAcceptedSpellcheckQuery: (payload: string, metadata: WireMetadata) => unknown;
20
+ UserClickedAResult: (payload: import("@empathyco/x-types").Result, metadata: WireMetadata) => unknown;
21
+ UserClickedADisplayResult: (payload: import("@empathyco/x-types").Result, metadata: WireMetadata) => unknown;
22
+ UserClickedCloseEventsModal: (payload: undefined, metadata: WireMetadata) => unknown;
23
+ UserClickedCloseModal: (payload: string, metadata: WireMetadata) => unknown;
24
+ UserClickedCloseX: (payload: undefined, metadata: WireMetadata) => unknown;
25
+ UserClickedOutOfMainModal: (payload: undefined, metadata: WireMetadata) => unknown;
26
+ UserClickedColumnPicker: (payload: number, metadata: WireMetadata) => unknown;
27
+ UserClickedOpenEventsModal: (payload: undefined, metadata: WireMetadata) => unknown;
28
+ UserClickedOpenModal: (payload: string, metadata: WireMetadata) => unknown;
29
+ UserClickedOpenX: (payload: undefined, metadata: WireMetadata) => unknown;
30
+ UserClickedOutOfEventsModal: (payload: undefined, metadata: WireMetadata) => unknown;
31
+ UserClickedOutOfModal: (payload: string, metadata: WireMetadata) => unknown;
32
+ UserClickedPanelToggleButton: (payload: string, metadata: WireMetadata) => unknown;
33
+ UserClickedResultAddToCart: (payload: import("@empathyco/x-types").Result, metadata: WireMetadata) => unknown;
34
+ UserClickedAResultRating: (payload: import("@empathyco/x-types").Result, metadata: WireMetadata) => unknown;
35
+ UserClickedScrollToTop: (payload: string, metadata: WireMetadata) => unknown;
36
+ UserOpenXProgrammatically: (payload: undefined, metadata: WireMetadata) => unknown;
37
+ UserPressedArrowKey: (payload: import("..").ArrowKey, metadata: WireMetadata) => unknown;
38
+ UserReachedEmpathizeTop: (payload: undefined, metadata: WireMetadata) => unknown;
39
+ UserSelectedAResultVariant: (payload: {
40
+ result: import("@empathyco/x-types").Result;
41
+ variant: import("@empathyco/x-types").ResultVariant;
42
+ level: number;
43
+ }, metadata: WireMetadata) => unknown;
44
+ UserSelectedASuggestion: (payload: import("@empathyco/x-types").Suggestion, metadata: WireMetadata) => unknown;
45
+ SnippetCallbackExecuted: (payload: {
46
+ event: keyof import("../wiring").XEventsTypes;
47
+ callbackReturn: unknown;
48
+ payload: never;
49
+ metadata: WireMetadata;
50
+ }, metadata: WireMetadata) => unknown;
51
+ ModuleRegistered: (payload: keyof import("..").XModulesTree, metadata: WireMetadata) => unknown;
52
+ DeviceProvided: (payload: string | null, metadata: WireMetadata) => unknown;
53
+ EmpathizeClosed: (payload: undefined, metadata: WireMetadata) => unknown;
54
+ EmpathizeOpened: (payload: undefined, metadata: WireMetadata) => unknown;
55
+ UserClosedEmpathize: (payload: undefined, metadata: WireMetadata) => unknown;
56
+ UserChangedExtraParams: (payload: import("@empathyco/x-utils").Dictionary<unknown>, metadata: WireMetadata) => unknown;
57
+ ExtraParamsChanged: (payload: import("@empathyco/x-utils").Dictionary<unknown>, metadata: WireMetadata) => unknown;
58
+ ExtraParamsProvided: (payload: import("@empathyco/x-utils").Dictionary<unknown>, metadata: WireMetadata) => unknown;
59
+ ExtraParamsInitialized: (payload: import("@empathyco/x-utils").Dictionary<unknown>, metadata: WireMetadata) => unknown;
60
+ FacetsGroupChanged: (payload: import("..").FacetsGroup, metadata: WireMetadata) => unknown;
61
+ FacetsGroupProvided: (payload: import("..").FacetsGroup, metadata: WireMetadata) => unknown;
62
+ PreselectedFiltersProvided: (payload: import("@empathyco/x-types").RawFilter[], metadata: WireMetadata) => unknown;
63
+ SelectedFiltersChanged: (payload: import("@empathyco/x-types").Filter[], metadata: WireMetadata) => unknown;
64
+ SelectedFiltersForRequestChanged: (payload: import("@empathyco/x-types").Filter[], metadata: WireMetadata) => unknown;
65
+ UserChangedSelectedFilters: (payload: import("@empathyco/x-types").Filter[], metadata: WireMetadata) => unknown;
66
+ UserClickedAFilter: (payload: import("@empathyco/x-types").Filter, metadata: WireMetadata) => unknown;
67
+ UserClickedAHierarchicalFilter: (payload: import("@empathyco/x-types").HierarchicalFilter, metadata: WireMetadata) => unknown;
68
+ UserClickedANumberRangeFilter: (payload: import("@empathyco/x-types").NumberRangeFilter, metadata: WireMetadata) => unknown;
69
+ UserClickedASimpleFilter: (payload: import("@empathyco/x-types").SimpleFilter, metadata: WireMetadata) => unknown;
70
+ UserClickedAllFilter: (payload: [string | number], metadata: WireMetadata) => unknown;
71
+ UserModifiedEditableNumberRangeFilter: (payload: import("@empathyco/x-types").EditableNumberRangeFilter, metadata: WireMetadata) => unknown;
72
+ UserClickedClearAllFilters: (payload: (string | number)[] | undefined, metadata: WireMetadata) => unknown;
73
+ FacetsQueryChanged: (payload: string, metadata: WireMetadata) => unknown;
74
+ HistoryQueriesDisplayed: (payload: import("@empathyco/x-types").HistoryQuery[], metadata: WireMetadata) => unknown;
75
+ HistoryQueriesQueryChanged: (payload: string, metadata: WireMetadata) => unknown;
76
+ HistoryQueriesStorageKeyChanged: (payload: string, metadata: WireMetadata) => unknown;
77
+ SessionHistoryQueriesChanged: (payload: import("@empathyco/x-types").HistoryQuery[], metadata: WireMetadata) => unknown;
78
+ UserPressedClearHistoryQueries: (payload: undefined, metadata: WireMetadata) => unknown;
79
+ UserPressedRemoveHistoryQuery: (payload: import("@empathyco/x-types").HistoryQuery, metadata: WireMetadata) => unknown;
80
+ UserSelectedAHistoryQuery: (payload: import("@empathyco/x-types").HistoryQuery, metadata: WireMetadata) => unknown;
81
+ UserClickedEnableHistoryQueries: (payload: undefined, metadata: WireMetadata) => unknown;
82
+ UserClickedDisableHistoryQueries: (payload: undefined, metadata: WireMetadata) => unknown;
83
+ UserClickedConfirmDisableHistoryQueries: (payload: undefined, metadata: WireMetadata) => unknown;
84
+ UserClickedDismissDisableHistoryQueries: (payload: undefined, metadata: WireMetadata) => unknown;
85
+ IdentifierResultsChanged: (payload: import("@empathyco/x-types").Result[], metadata: WireMetadata) => unknown;
86
+ IdentifierResultsRequestUpdated: (payload: import("@empathyco/x-types").IdentifierResultsRequest | null, metadata: WireMetadata) => unknown;
87
+ UserClickedAIdentifierResult: (payload: import("@empathyco/x-types").Result, metadata: WireMetadata) => unknown;
88
+ NextQueriesChanged: (payload: import("@empathyco/x-types").NextQuery[], metadata: WireMetadata) => unknown;
89
+ NextQueriesDisplayed: (payload: import("@empathyco/x-types").NextQuery[], metadata: WireMetadata) => unknown;
90
+ NextQueriesRequestUpdated: (payload: import("@empathyco/x-types").NextQueriesRequest | null, metadata: WireMetadata) => unknown;
91
+ UserSelectedANextQuery: (payload: import("@empathyco/x-types").NextQuery, metadata: WireMetadata) => unknown;
92
+ NextQueryPreviewMountedHook: (payload: string, metadata: WireMetadata) => unknown;
93
+ PopularSearchesRequestUpdated: (payload: import("@empathyco/x-types").PopularSearchesRequest, metadata: WireMetadata) => unknown;
94
+ PopularSearchDisplayed: (payload: import("@empathyco/x-types").Suggestion[], metadata: WireMetadata) => unknown;
95
+ UserSelectedAPopularSearch: (payload: import("@empathyco/x-types").Suggestion, metadata: WireMetadata) => unknown;
96
+ QueryPreviewRequestUpdated: (payload: import("@empathyco/x-types").SearchRequest, metadata: WireMetadata) => unknown;
97
+ UserAcceptedAQueryPreview: (payload: import("..").QueryPreviewInfo, metadata: WireMetadata) => unknown;
98
+ QueryPreviewUnselected: (payload: import("@empathyco/x-utils").Dictionary<unknown>, metadata: WireMetadata) => unknown;
99
+ QueryPreviewMounted: (payload: string, metadata: WireMetadata) => unknown;
100
+ QueryPreviewUnmounted: (payload: {
101
+ queryPreviewHash: string;
102
+ cache: boolean;
103
+ }, metadata: WireMetadata) => unknown;
104
+ QuerySuggestionsChanged: (payload: import("@empathyco/x-types").Suggestion[], metadata: WireMetadata) => unknown;
105
+ QuerySuggestionsDisplayed: (payload: import("@empathyco/x-types").Suggestion[], metadata: WireMetadata) => unknown;
106
+ QuerySuggestionsRequestUpdated: (payload: import("@empathyco/x-types").QuerySuggestionsRequest | null, metadata: WireMetadata) => unknown;
107
+ UserSelectedAQuerySuggestion: (payload: import("@empathyco/x-types").Suggestion, metadata: WireMetadata) => unknown;
108
+ RecommendationsChanged: (payload: import("@empathyco/x-types").Result[], metadata: WireMetadata) => unknown;
109
+ RecommendationsRequestUpdated: (payload: import("@empathyco/x-types").RecommendationsRequest, metadata: WireMetadata) => unknown;
110
+ UserClickedARecommendation: (payload: import("@empathyco/x-types").Result, metadata: WireMetadata) => unknown;
111
+ RelatedTagsChanged: (payload: import("@empathyco/x-types").RelatedTag[], metadata: WireMetadata) => unknown;
112
+ RelatedTagsRequestUpdated: (payload: import("@empathyco/x-types").RelatedTagsRequest | null, metadata: WireMetadata) => unknown;
113
+ SelectedRelatedTagsChanged: (payload: import("@empathyco/x-types").RelatedTag[], metadata: WireMetadata) => unknown;
114
+ UserDeselectedARelatedTag: (payload: import("@empathyco/x-types").RelatedTag, metadata: WireMetadata) => unknown;
115
+ UserPickedARelatedTag: (payload: import("@empathyco/x-types").RelatedTag, metadata: WireMetadata) => unknown;
116
+ UserSelectedARelatedTag: (payload: import("@empathyco/x-types").RelatedTag, metadata: WireMetadata) => unknown;
117
+ ScrollRestoreSucceeded: (payload: undefined, metadata: WireMetadata) => unknown;
118
+ ScrollRestoreFailed: (payload: undefined, metadata: WireMetadata) => unknown;
119
+ UserAlmostReachedScrollEnd: (payload: boolean, metadata: WireMetadata) => unknown;
120
+ UserChangedScrollDirection: (payload: import("./scroll").ScrollDirection, metadata: WireMetadata) => unknown;
121
+ UserReachedScrollEnd: (payload: boolean, metadata: WireMetadata) => unknown;
122
+ UserReachedScrollStart: (payload: boolean, metadata: WireMetadata) => unknown;
123
+ UserScrolled: (payload: number, metadata: WireMetadata) => unknown;
124
+ UserScrolledToElement: (payload: string, metadata: WireMetadata) => unknown;
125
+ SearchBoxQueryChanged: (payload: string, metadata: WireMetadata) => unknown;
126
+ UserHoveredInSearchBox: (payload: undefined, metadata: WireMetadata) => unknown;
127
+ UserHoveredOutSearchBox: (payload: undefined, metadata: WireMetadata) => unknown;
128
+ UserBlurredSearchBox: (payload: undefined, metadata: WireMetadata) => unknown;
129
+ UserClearedQuery: (payload: string, metadata: WireMetadata) => unknown;
130
+ UserClickedSearchBox: (payload: undefined, metadata: WireMetadata) => unknown;
131
+ UserFocusedSearchBox: (payload: undefined, metadata: WireMetadata) => unknown;
132
+ UserIsTypingAQuery: (payload: string, metadata: WireMetadata) => unknown;
133
+ UserPressedClearSearchBoxButton: (payload: undefined, metadata: WireMetadata) => unknown;
134
+ UserPressedEnterKey: (payload: string, metadata: WireMetadata) => unknown;
135
+ UserPressedSearchButton: (payload: string, metadata: WireMetadata) => unknown;
136
+ UserTalked: (payload: string, metadata: WireMetadata) => unknown;
137
+ FacetsChanged: (payload: import("@empathyco/x-types").Facet[], metadata: WireMetadata) => unknown;
138
+ PageChanged: (payload: number, metadata: WireMetadata) => unknown;
139
+ ResultsChanged: (payload: import("@empathyco/x-types").Result[], metadata: WireMetadata) => unknown;
140
+ SearchRequestChanged: (payload: import("..").InternalSearchRequest | null, metadata: WireMetadata) => unknown;
141
+ SearchRequestUpdated: (payload: import("..").InternalSearchRequest | null, metadata: WireMetadata) => unknown;
142
+ SearchResponseChanged: (payload: import("..").InternalSearchResponse, metadata: WireMetadata) => unknown;
143
+ SearchTaggingChanged: (payload: import("@empathyco/x-types").TaggingRequest, metadata: WireMetadata) => unknown;
144
+ SortChanged: (payload: string, metadata: WireMetadata) => unknown;
145
+ SpellcheckChanged: (payload: string, metadata: WireMetadata) => unknown;
146
+ UserClickedASort: (payload: string, metadata: WireMetadata) => unknown;
147
+ SelectedSortProvided: (payload: string, metadata: WireMetadata) => unknown;
148
+ UserClickedPartialQuery: (payload: string, metadata: WireMetadata) => unknown;
149
+ UserReachedResultsListEnd: (payload: undefined, metadata: WireMetadata) => unknown;
150
+ UserClickedARedirection: (payload: import("@empathyco/x-types").Redirection, metadata: WireMetadata) => unknown;
151
+ UserClickedAPromoted: (payload: import("@empathyco/x-types").Promoted, metadata: WireMetadata) => unknown;
152
+ UserClickedABanner: (payload: import("@empathyco/x-types").Banner, metadata: WireMetadata) => unknown;
153
+ UserClickedAbortARedirection: (payload: undefined, metadata: WireMetadata) => unknown;
154
+ SemanticQueryRequestUpdated: (payload: import("@empathyco/x-types").SemanticQueriesRequest | null, metadata: WireMetadata) => unknown;
155
+ SemanticQueriesResponseChanged: (payload: import("@empathyco/x-types").SemanticQuery[], metadata: WireMetadata) => unknown;
156
+ UserSelectedASemanticQuery: (payload: import("@empathyco/x-types").SemanticQuery, metadata: WireMetadata) => unknown;
157
+ ConsentChanged: (payload: boolean, metadata: WireMetadata) => unknown;
158
+ ConsentProvided: (payload: boolean, metadata: WireMetadata) => unknown;
159
+ PDPIsLoaded: (payload: string, metadata: WireMetadata) => unknown;
160
+ ResultURLTrackingEnabled: (payload: string, metadata: WireMetadata) => unknown;
161
+ SearchTaggingReceived: (payload: import("@empathyco/x-types").TaggingRequest, metadata: WireMetadata) => unknown;
162
+ TrackableElementDisplayed: (payload: import("@empathyco/x-types").Taggable, metadata: WireMetadata) => unknown;
163
+ UserClickedPDPAddToCart: (payload: string | undefined, metadata: WireMetadata) => unknown;
164
+ TaggingConfigProvided: (payload: import("..").TaggingConfig, metadata: WireMetadata) => unknown;
165
+ ExperienceControlsEventsChanged: (payload: Partial<import("../wiring").XEventsTypes>, metadata: WireMetadata) => unknown;
166
+ ExperienceControlsRequestUpdated: (payload: import("@empathyco/x-types").ExperienceControlsRequest | null, metadata: WireMetadata) => unknown;
167
+ ParamsLoadedFromUrl: (payload: import("..").UrlParams, metadata: WireMetadata) => unknown;
168
+ ExtraParamsLoadedFromUrl: (payload: import("@empathyco/x-utils").Dictionary<unknown>, metadata: WireMetadata) => unknown;
169
+ PushableUrlStateUpdated: (payload: import("..").UrlParams, metadata: WireMetadata) => unknown;
170
+ ReplaceableUrlStateUpdated: (payload: import("..").UrlParams, metadata: WireMetadata) => unknown;
171
+ }>>;
172
+ }, {}, {}, {}, import("vue/types/v3-component-options").ComponentOptionsMixin, import("vue/types/v3-component-options").ComponentOptionsMixin, {}, string, Readonly<import("vue").ExtractPropTypes<{}>>, {}>
13
173
  ```
14
- **Extends:** Vue
15
-
package/js/components/no-element.js CHANGED
@@ -1,4 +1,15 @@
1
- import Vue from 'vue';
1
+ import { defineComponent } from 'vue';
2
+ import '../composables/create-use-device.composable.js';
3
+ import { useNoElementRender } from '../composables/use-no-element-render.js';
4
+ import '../plugins/x-plugin.js';
5
+ import '@vueuse/core';
6
+ import '@vue/devtools-api';
7
+ import '../plugins/devtools/timeline.devtools.js';
8
+ import '@empathyco/x-utils';
9
+ import 'rxjs/operators';
10
+ import 'rxjs';
11
+ import '../plugins/devtools/colors.utils.js';
12
+ import '../plugins/x-bus.js';
2
13
 
3
14
  /**
4
15
  * The purpose of this Component is to use as default value for props that receive a Component that
@@ -6,9 +17,9 @@ import Vue from 'vue';
6
17
  *
7
18
  * @internal
8
19
  */
9
- const NoElement = Vue.extend({
10
- render(h) {
11
- return this.$slots.default?.[0] ?? h();
20
+ const NoElement = defineComponent({
21
+ render() {
22
+ return useNoElementRender(this.$slots);
12
23
  }
13
24
  });
14
25
 
package/js/components/no-element.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"no-element.js","sources":["../../../src/components/no-element.ts"],"sourcesContent":["import Vue, { CreateElement, VNode } from 'vue';\n\n/**\n * The purpose of this Component is to use as default value for props that receive a Component that\n * doesn't render any DOM element. For example the animations with `Transition` component.\n *\n * @internal\n */\nexport const NoElement = Vue.extend({\n render(h: CreateElement): VNode {\n return this.$slots.default?.[0] ?? h();\n }\n});\n"],"names":[],"mappings":";;AAEA;;;;;AAKG;AACU,MAAA,SAAS,GAAG,GAAG,CAAC,MAAM,CAAC;AAClC,IAAA,MAAM,CAAC,CAAgB,EAAA;AACrB,QAAA,OAAO,IAAI,CAAC,MAAM,CAAC,OAAO,GAAG,CAAC,CAAC,IAAI,CAAC,EAAE,CAAC;KACxC;AACF,CAAA;;;;"}
1
+ {"version":3,"file":"no-element.js","sources":["../../../src/components/no-element.ts"],"sourcesContent":["import { defineComponent } from 'vue';\nimport { useNoElementRender } from '../composables/index';\n\n/**\n * The purpose of this Component is to use as default value for props that receive a Component that\n * doesn't render any DOM element. For example the animations with `Transition` component.\n *\n * @internal\n */\nexport const NoElement = defineComponent({\n render() {\n return useNoElementRender(this.$slots);\n }\n});\n"],"names":[],"mappings":";;;;;;;;;;;;;AAGA;;;;;AAKG;AACI,MAAM,SAAS,GAAG,eAAe,CAAC;IACvC,MAAM,GAAA;AACJ,QAAA,OAAO,kBAAkB,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;KACxC;AACF,CAAA;;;;"}
package/js/components/snippet-callbacks.vue.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"snippet-callbacks.vue.js","sources":["../../../src/components/snippet-callbacks.vue"],"sourcesContent":["<template>\n <GlobalXBus v-on=\"eventListeners\" />\n</template>\n\n<script lang=\"ts\">\n import { map } from '@empathyco/x-utils';\n import { Component, Inject } from 'vue-property-decorator';\n import Vue from 'vue';\n import { WireMetadata } from '../wiring';\n import { SnippetConfig, XEventListeners } from '../x-installer/api/api.types';\n import GlobalXBus from './global-x-bus.vue';\n\n /**\n * This component subscribes to any {@link XEvent} with a custom callbacks provided by the snippet\n * configuration.\n *\n * @public\n */\n @Component({\n components: { GlobalXBus }\n })\n export default class SnippetCallbacks extends Vue {\n /**\n * Injects {@link SnippetConfig} provided by an ancestor as snippetConfig.\n *\n * @internal\n */\n @Inject('snippetConfig')\n public snippetConfig!: SnippetConfig;\n\n /**\n * It maps all the callbacks provided by the snippetConfig and adds an emit to each one.\n *\n * @returns The event listeners with the {@link XEventsTypes.SnippetCallbackExecuted} emit in\n * the callback.\n *\n * @internal\n *\n */\n protected get eventListeners(): XEventListeners {\n const { callbacks } = this.snippetConfig;\n return callbacks\n ? map(callbacks, (eventName, callback) => {\n return (payload: unknown, metadata: WireMetadata) => {\n const callbackReturn = callback(payload as never, metadata);\n this.$x.emit('SnippetCallbackExecuted', {\n event: eventName,\n callbackReturn,\n payload: payload as never,\n metadata\n });\n };\n })\n : ({} as XEventListeners);\n }\n }\n</script>\n\n<docs lang=\"mdx\">\n## Events\n\nThe `SnippetCallbacks` will emit these events:\n\n- [`SnippetCallbackExecuted`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts):\n each time a callback provided by the snippetConfig is fired.\n\n## See it in action\n\nThis component does not render anything. Its only responsibility is to receive any callback that\nwill be triggered once its listened event is emitted.\n\n```vue\n<template>\n <SnippetCallbacks />\n</template>\n\n<script>\n import { SnippetCallbacks } from '@empathyco/x-components';\n export default {\n name: 'SnippetCallbacksTest',\n components: {\n SnippetCallbacks\n }\n };\n</script>\n```\n</docs>\n"],"names":[],"mappings":";;;;AAEA,MAAc,cAAA,GAAA,OAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
1
+ {"version":3,"file":"snippet-callbacks.vue.js","sources":["../../../src/components/snippet-callbacks.vue"],"sourcesContent":["<template>\n <GlobalXBus v-on=\"eventListeners\" />\n</template>\n\n<script lang=\"ts\">\n import { map } from '@empathyco/x-utils';\n import { computed, defineComponent } from 'vue';\n import { WireMetadata } from '../wiring';\n import { SnippetConfig, XEventListeners } from '../x-installer/api/api.types';\n import { useHybridInject } from '../composables';\n import { useXBus } from '../composables/use-x-bus';\n import GlobalXBus from './global-x-bus.vue';\n\n /**\n * This component subscribes to any {@link XEvent} with a custom callbacks provided by the snippet\n * configuration.\n *\n * @public\n */\n export default defineComponent({\n name: 'SnippetCallbacks',\n components: { GlobalXBus },\n setup() {\n const xBus = useXBus();\n\n /**\n * Injects {@link SnippetConfig} provided by an ancestor as snippetConfig.\n *\n * @internal\n */\n const snippetConfig = useHybridInject<SnippetConfig>('snippetConfig');\n\n /**\n * It maps all the callbacks provided by the snippetConfig and adds an emit to each one.\n *\n * @returns The event listeners with the {@link XEventsTypes.SnippetCallbackExecuted} emit in\n * the callback.\n *\n * @internal\n *\n */\n const eventListeners = computed<XEventListeners>(() => {\n const callbacks = snippetConfig?.callbacks;\n\n return callbacks\n ? map(callbacks, (eventName, callback) => {\n return (payload: unknown, metadata: WireMetadata) => {\n const callbackReturn = callback(payload as never, metadata);\n xBus.emit('SnippetCallbackExecuted', {\n event: eventName,\n callbackReturn,\n payload: payload as never,\n metadata\n });\n };\n })\n : ({} as XEventListeners);\n });\n\n return { eventListeners };\n }\n });\n</script>\n\n<docs lang=\"mdx\">\n## Events\n\nThe `SnippetCallbacks` will emit these events:\n\n- [`SnippetCallbackExecuted`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts):\n each time a callback provided by the snippetConfig is fired.\n\n## See it in action\n\nThis component does not render anything. Its only responsibility is to receive any callback that\nwill be triggered once its listened event is emitted.\n\n```vue\n<template>\n <SnippetCallbacks />\n</template>\n\n<script>\n import { SnippetCallbacks } from '@empathyco/x-components';\n export default {\n name: 'SnippetCallbacksTest',\n components: {\n SnippetCallbacks\n }\n };\n</script>\n```\n</docs>\n"],"names":[],"mappings":";;;;AAEA,MAAc,cAAA,GAAA,OAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}