@empathyco/x-components 3.0.0-alpha.142 → 3.0.0-alpha.145
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +42 -0
- package/design-system/default-theme.css +13 -13
- package/design-system/full-theme.css +44 -64
- package/design-system/picture-fixed-ratio.css +1 -25
- package/docs/API-reference/api/{x-components.baseidmodalclose.events.md → x-components.baseidmodalclose.emitclosemodalevent.md} +7 -3
- package/docs/API-reference/api/x-components.baseidmodalclose.md +7 -2
- package/docs/API-reference/api/x-components.md +1 -1
- package/docs/API-reference/components/common/modals/x-components.base-id-modal-close.md +40 -8
- package/docs/build-search-ui/web-archetype-development-guide.md +10 -7
- package/docs/build-search-ui/web-archetype-integration-guide.md +15 -14
- package/docs/build-search-ui/web-x-components-development-guide.md +5 -4
- package/js/components/modals/base-id-modal-close.vue.js +21 -9
- package/js/components/modals/base-id-modal-close.vue.js.map +1 -1
- package/js/components/modals/base-id-modal-close.vue_rollup-plugin-vue_script.vue.js +7 -5
- package/js/components/modals/base-id-modal-close.vue_rollup-plugin-vue_script.vue.js.map +1 -1
- package/package.json +2 -2
- package/report/x-components.api.json +12 -24
- package/report/x-components.api.md +1 -1
- package/types/components/modals/base-id-modal-close.vue.d.ts +4 -4
- package/types/components/modals/base-id-modal-close.vue.d.ts.map +1 -1
package/CHANGELOG.md
CHANGED
|
@@ -3,6 +3,48 @@
|
|
|
3
3
|
All notable changes to this project will be documented in this file. See
|
|
4
4
|
[Conventional Commits](https://conventionalcommits.org) for commit guidelines.
|
|
5
5
|
|
|
6
|
+
## [3.0.0-alpha.145](https://github.com/empathyco/x/compare/@empathyco/x-components@3.0.0-alpha.144...@empathyco/x-components@3.0.0-alpha.145) (2022-08-01)
|
|
7
|
+
|
|
8
|
+
### Documentation
|
|
9
|
+
|
|
10
|
+
- update archetype integration and x-adapter docs (#628)
|
|
11
|
+
([247899e](https://github.com/empathyco/x/commit/247899e39d4f415f59b8ec1b7376fc72530028c2)),
|
|
12
|
+
closes [EX-6728](https://searchbroker.atlassian.net/browse/EX-6728)
|
|
13
|
+
|
|
14
|
+
# Change Log
|
|
15
|
+
|
|
16
|
+
All notable changes to this project will be documented in this file. See
|
|
17
|
+
[Conventional Commits](https://conventionalcommits.org) for commit guidelines.
|
|
18
|
+
|
|
19
|
+
## [3.0.0-alpha.144](https://github.com/empathyco/x/compare/@empathyco/x-components@3.0.0-alpha.143...@empathyco/x-components@3.0.0-alpha.144) (2022-08-01)
|
|
20
|
+
|
|
21
|
+
### ⚠ BREAKING CHANGES
|
|
22
|
+
|
|
23
|
+
- `--x-number-aspect-ratio-picture` is now inverted. Previously a value of 2 meant that it was twice
|
|
24
|
+
taller than wider. Now it means twice wider than taller.
|
|
25
|
+
|
|
26
|
+
- feat(design-system): Re-do aspect ratio logic with modern `aspect-ratio` property
|
|
27
|
+
([7fae9dc](https://github.com/empathyco/x/commit/7fae9dcab71ec8a945f70aa706cce1cb57b4ddd8)),
|
|
28
|
+
closes [EX-6463](https://searchbroker.atlassian.net/browse/EX-6463)
|
|
29
|
+
|
|
30
|
+
# Change Log
|
|
31
|
+
|
|
32
|
+
All notable changes to this project will be documented in this file. See
|
|
33
|
+
[Conventional Commits](https://conventionalcommits.org) for commit guidelines.
|
|
34
|
+
|
|
35
|
+
## [3.0.0-alpha.143](https://github.com/empathyco/x/compare/@empathyco/x-components@3.0.0-alpha.142...@empathyco/x-components@3.0.0-alpha.143) (2022-08-01)
|
|
36
|
+
|
|
37
|
+
### Features
|
|
38
|
+
|
|
39
|
+
- **components:** make `BaseIdModalClose` rendering configurable (#627)
|
|
40
|
+
([4bf97af](https://github.com/empathyco/x/commit/4bf97af19ac5f2fd1b08b6e4097dec45eef00679)),
|
|
41
|
+
closes [EX-6726](https://searchbroker.atlassian.net/browse/EX-6726)
|
|
42
|
+
|
|
43
|
+
# Change Log
|
|
44
|
+
|
|
45
|
+
All notable changes to this project will be documented in this file. See
|
|
46
|
+
[Conventional Commits](https://conventionalcommits.org) for commit guidelines.
|
|
47
|
+
|
|
6
48
|
## [3.0.0-alpha.142](https://github.com/empathyco/x/compare/@empathyco/x-components@3.0.0-alpha.141...@empathyco/x-components@3.0.0-alpha.142) (2022-07-29)
|
|
7
49
|
|
|
8
50
|
### Features
|
|
@@ -2858,6 +2858,19 @@
|
|
|
2858
2858
|
--x-size-border-radius-base-pill: 99999px;
|
|
2859
2859
|
--x-size-border-width-base: 1px;
|
|
2860
2860
|
}
|
|
2861
|
+
:root {
|
|
2862
|
+
--x-color-base-lead: #36515b;
|
|
2863
|
+
--x-color-base-auxiliary: #667981;
|
|
2864
|
+
--x-color-base-neutral-10: #1a1a1a;
|
|
2865
|
+
--x-color-base-neutral-35: #595959;
|
|
2866
|
+
--x-color-base-neutral-70: #b3b3b3;
|
|
2867
|
+
--x-color-base-neutral-95: #f2f2f2;
|
|
2868
|
+
--x-color-base-neutral-100: #ffffff;
|
|
2869
|
+
--x-color-base-accent: #b90276;
|
|
2870
|
+
--x-color-base-enable: #00705c;
|
|
2871
|
+
--x-color-base-disable: #e11f26;
|
|
2872
|
+
--x-color-base-transparent: transparent;
|
|
2873
|
+
}
|
|
2861
2874
|
:root {
|
|
2862
2875
|
--x-size-base-01: 2px;
|
|
2863
2876
|
--x-size-base-02: 4px;
|
|
@@ -2893,17 +2906,4 @@
|
|
|
2893
2906
|
--x-size-line-height-base-s: 16px;
|
|
2894
2907
|
--x-size-line-height-base-m: 24px;
|
|
2895
2908
|
--x-size-line-height-base-l: 32px;
|
|
2896
|
-
}
|
|
2897
|
-
:root {
|
|
2898
|
-
--x-color-base-lead: #36515b;
|
|
2899
|
-
--x-color-base-auxiliary: #667981;
|
|
2900
|
-
--x-color-base-neutral-10: #1a1a1a;
|
|
2901
|
-
--x-color-base-neutral-35: #595959;
|
|
2902
|
-
--x-color-base-neutral-70: #b3b3b3;
|
|
2903
|
-
--x-color-base-neutral-95: #f2f2f2;
|
|
2904
|
-
--x-color-base-neutral-100: #ffffff;
|
|
2905
|
-
--x-color-base-accent: #b90276;
|
|
2906
|
-
--x-color-base-enable: #00705c;
|
|
2907
|
-
--x-color-base-disable: #e11f26;
|
|
2908
|
-
--x-color-base-transparent: transparent;
|
|
2909
2909
|
}
|
|
@@ -3173,30 +3173,10 @@
|
|
|
3173
3173
|
--x-mix-blend-mode-picture-fallback-default: var(--x-mix-blend-mode-picture-default);
|
|
3174
3174
|
--x-mix-blend-mode-picture-placeholder-default: var(--x-mix-blend-mode-picture-default);
|
|
3175
3175
|
}
|
|
3176
|
-
[dir="ltr"] .x-picture--fixed-ratio.x-picture {
|
|
3177
|
-
padding-left: 0;
|
|
3178
|
-
}
|
|
3179
|
-
[dir="rtl"] .x-picture--fixed-ratio.x-picture {
|
|
3180
|
-
padding-right: 0;
|
|
3181
|
-
}
|
|
3182
|
-
[dir="ltr"] .x-picture--fixed-ratio.x-picture {
|
|
3183
|
-
padding-right: 0;
|
|
3184
|
-
}
|
|
3185
|
-
[dir="rtl"] .x-picture--fixed-ratio.x-picture {
|
|
3186
|
-
padding-left: 0;
|
|
3187
|
-
}
|
|
3188
3176
|
.x-picture--fixed-ratio.x-picture {
|
|
3189
|
-
|
|
3190
|
-
height: 0;
|
|
3191
|
-
padding-top: calc(var(--x-number-aspect-ratio-picture) * 100%);
|
|
3192
|
-
padding-bottom: 0;
|
|
3177
|
+
aspect-ratio: var(--x-number-aspect-ratio-picture);
|
|
3193
3178
|
width: 100%;
|
|
3194
3179
|
}
|
|
3195
|
-
.x-picture--fixed-ratio.x-picture .x-picture__image {
|
|
3196
|
-
position: absolute;
|
|
3197
|
-
top: 0;
|
|
3198
|
-
left: 0;
|
|
3199
|
-
}
|
|
3200
3180
|
:root {
|
|
3201
3181
|
--x-number-aspect-ratio-picture: 1;
|
|
3202
3182
|
}
|
|
@@ -6468,6 +6448,49 @@
|
|
|
6468
6448
|
.x-self-baseline {
|
|
6469
6449
|
align-self: baseline !important;
|
|
6470
6450
|
}
|
|
6451
|
+
.x-font-color--lead {
|
|
6452
|
+
color: var(--x-color-base-lead) !important;
|
|
6453
|
+
}
|
|
6454
|
+
|
|
6455
|
+
.x-font-color--auxiliary {
|
|
6456
|
+
color: var(--x-color-base-auxiliary) !important;
|
|
6457
|
+
}
|
|
6458
|
+
|
|
6459
|
+
.x-font-color--neutral-10 {
|
|
6460
|
+
color: var(--x-color-base-neutral-10) !important;
|
|
6461
|
+
}
|
|
6462
|
+
|
|
6463
|
+
.x-font-color--neutral-35 {
|
|
6464
|
+
color: var(--x-color-base-neutral-35) !important;
|
|
6465
|
+
}
|
|
6466
|
+
|
|
6467
|
+
.x-font-color--neutral-70 {
|
|
6468
|
+
color: var(--x-color-base-neutral-70) !important;
|
|
6469
|
+
}
|
|
6470
|
+
|
|
6471
|
+
.x-font-color--neutral-95 {
|
|
6472
|
+
color: var(--x-color-base-neutral-95) !important;
|
|
6473
|
+
}
|
|
6474
|
+
|
|
6475
|
+
.x-font-color--neutral-100 {
|
|
6476
|
+
color: var(--x-color-base-neutral-100) !important;
|
|
6477
|
+
}
|
|
6478
|
+
|
|
6479
|
+
.x-font-color--accent {
|
|
6480
|
+
color: var(--x-color-base-accent) !important;
|
|
6481
|
+
}
|
|
6482
|
+
|
|
6483
|
+
.x-font-color--enable {
|
|
6484
|
+
color: var(--x-color-base-enable) !important;
|
|
6485
|
+
}
|
|
6486
|
+
|
|
6487
|
+
.x-font-color--disable {
|
|
6488
|
+
color: var(--x-color-base-disable) !important;
|
|
6489
|
+
}
|
|
6490
|
+
|
|
6491
|
+
.x-font-color--transparent {
|
|
6492
|
+
color: var(--x-color-base-transparent) !important;
|
|
6493
|
+
}
|
|
6471
6494
|
.x-font-size--01 {
|
|
6472
6495
|
font-size: var(--x-size-base-01) !important;
|
|
6473
6496
|
line-height: 1.5;
|
|
@@ -6614,49 +6637,6 @@
|
|
|
6614
6637
|
.x-line-height--loose {
|
|
6615
6638
|
line-height: 2 !important;
|
|
6616
6639
|
}
|
|
6617
|
-
.x-font-color--lead {
|
|
6618
|
-
color: var(--x-color-base-lead) !important;
|
|
6619
|
-
}
|
|
6620
|
-
|
|
6621
|
-
.x-font-color--auxiliary {
|
|
6622
|
-
color: var(--x-color-base-auxiliary) !important;
|
|
6623
|
-
}
|
|
6624
|
-
|
|
6625
|
-
.x-font-color--neutral-10 {
|
|
6626
|
-
color: var(--x-color-base-neutral-10) !important;
|
|
6627
|
-
}
|
|
6628
|
-
|
|
6629
|
-
.x-font-color--neutral-35 {
|
|
6630
|
-
color: var(--x-color-base-neutral-35) !important;
|
|
6631
|
-
}
|
|
6632
|
-
|
|
6633
|
-
.x-font-color--neutral-70 {
|
|
6634
|
-
color: var(--x-color-base-neutral-70) !important;
|
|
6635
|
-
}
|
|
6636
|
-
|
|
6637
|
-
.x-font-color--neutral-95 {
|
|
6638
|
-
color: var(--x-color-base-neutral-95) !important;
|
|
6639
|
-
}
|
|
6640
|
-
|
|
6641
|
-
.x-font-color--neutral-100 {
|
|
6642
|
-
color: var(--x-color-base-neutral-100) !important;
|
|
6643
|
-
}
|
|
6644
|
-
|
|
6645
|
-
.x-font-color--accent {
|
|
6646
|
-
color: var(--x-color-base-accent) !important;
|
|
6647
|
-
}
|
|
6648
|
-
|
|
6649
|
-
.x-font-color--enable {
|
|
6650
|
-
color: var(--x-color-base-enable) !important;
|
|
6651
|
-
}
|
|
6652
|
-
|
|
6653
|
-
.x-font-color--disable {
|
|
6654
|
-
color: var(--x-color-base-disable) !important;
|
|
6655
|
-
}
|
|
6656
|
-
|
|
6657
|
-
.x-font-color--transparent {
|
|
6658
|
-
color: var(--x-color-base-transparent) !important;
|
|
6659
|
-
}
|
|
6660
6640
|
.x-margin--auto {
|
|
6661
6641
|
margin: auto !important;
|
|
6662
6642
|
}
|
|
@@ -2,31 +2,7 @@
|
|
|
2
2
|
--x-number-aspect-ratio-picture: 1;
|
|
3
3
|
}
|
|
4
4
|
|
|
5
|
-
[dir="ltr"] .x-picture--fixed-ratio.x-picture {
|
|
6
|
-
padding-left: 0;
|
|
7
|
-
}
|
|
8
|
-
|
|
9
|
-
[dir="rtl"] .x-picture--fixed-ratio.x-picture {
|
|
10
|
-
padding-right: 0;
|
|
11
|
-
}
|
|
12
|
-
|
|
13
|
-
[dir="ltr"] .x-picture--fixed-ratio.x-picture {
|
|
14
|
-
padding-right: 0;
|
|
15
|
-
}
|
|
16
|
-
|
|
17
|
-
[dir="rtl"] .x-picture--fixed-ratio.x-picture {
|
|
18
|
-
padding-left: 0;
|
|
19
|
-
}
|
|
20
|
-
|
|
21
5
|
.x-picture--fixed-ratio.x-picture {
|
|
22
|
-
|
|
23
|
-
height: 0;
|
|
24
|
-
padding-top: calc(var(--x-number-aspect-ratio-picture) * 100%);
|
|
25
|
-
padding-bottom: 0;
|
|
6
|
+
aspect-ratio: var(--x-number-aspect-ratio-picture);
|
|
26
7
|
width: 100%;
|
|
27
|
-
}
|
|
28
|
-
.x-picture--fixed-ratio.x-picture .x-picture__image {
|
|
29
|
-
position: absolute;
|
|
30
|
-
top: 0;
|
|
31
|
-
left: 0;
|
|
32
8
|
}
|
|
@@ -1,11 +1,15 @@
|
|
|
1
1
|
<!-- Do not edit this file. It is automatically generated by API Documenter. -->
|
|
2
2
|
|
|
3
|
-
[Home](./index.md) > [@empathyco/x-components](./x-components.md) > [BaseIdModalClose](./x-components.baseidmodalclose.md) > [
|
|
3
|
+
[Home](./index.md) > [@empathyco/x-components](./x-components.md) > [BaseIdModalClose](./x-components.baseidmodalclose.md) > [emitCloseModalEvent](./x-components.baseidmodalclose.emitclosemodalevent.md)
|
|
4
4
|
|
|
5
|
-
## BaseIdModalClose.
|
|
5
|
+
## BaseIdModalClose.emitCloseModalEvent() method
|
|
6
6
|
|
|
7
7
|
<b>Signature:</b>
|
|
8
8
|
|
|
9
9
|
```typescript
|
|
10
|
-
protected
|
|
10
|
+
protected emitCloseModalEvent(): void;
|
|
11
11
|
```
|
|
12
|
+
<b>Returns:</b>
|
|
13
|
+
|
|
14
|
+
void
|
|
15
|
+
|
|
@@ -4,7 +4,7 @@
|
|
|
4
4
|
|
|
5
5
|
## BaseIdModalClose class
|
|
6
6
|
|
|
7
|
-
Component
|
|
7
|
+
Component that allows to close a modal by emitting [XEventsTypes.UserClickedCloseModal](./x-components.xeventstypes.userclickedclosemodal.md)<!-- -->. It's fully customizable as it exposes the closing event but by default it renders a customizable button.
|
|
8
8
|
|
|
9
9
|
<b>Signature:</b>
|
|
10
10
|
|
|
@@ -17,6 +17,11 @@ export default class BaseIdModalClose extends Vue
|
|
|
17
17
|
|
|
18
18
|
| Property | Modifiers | Type | Description |
|
|
19
19
|
| --- | --- | --- | --- |
|
|
20
|
-
| [events](./x-components.baseidmodalclose.events.md) | | Partial<[XEventsTypes](./x-components.xeventstypes.md)<!-- -->> | |
|
|
21
20
|
| [modalId](./x-components.baseidmodalclose.modalid.md) | | string | |
|
|
22
21
|
|
|
22
|
+
## Methods
|
|
23
|
+
|
|
24
|
+
| Method | Modifiers | Description |
|
|
25
|
+
| --- | --- | --- |
|
|
26
|
+
| [emitCloseModalEvent()](./x-components.baseidmodalclose.emitclosemodalevent.md) | | |
|
|
27
|
+
|
|
@@ -28,7 +28,7 @@ X-Components is a library usable everywhere not only for search experiences.
|
|
|
28
28
|
| [BaseGrid](./x-components.basegrid.md) | Grid component that is able to render different items based on their modelName value. In order to achieve this, it exposes a scopedSlot for each different modelName. In case the items used do not have modelName property, the default slot is used instead. It has a required property: the <code>items</code> to render; and an optional one: the number <code>columns</code> the grid is divided in. If the number of columns is not specified, the grid automatically fills the rows with as many columns as it can fit. |
|
|
29
29
|
| [BaseHeaderTogglePanel](./x-components.baseheadertogglepanel.md) | Toggle panel which uses the base toggle panel, adds a header and manage the open / close state of the panel. |
|
|
30
30
|
| [BaseIdModal](./x-components.baseidmodal.md) | Component containing a modal expecting a required prop, named <code>modalId</code>. It reacts to <code>UserClickedOpenModal</code>, <code>UserClickedCloseModal</code> and <code>UserClickedOutOfModal</code> events, when their payload matches the component's 'modalId' prop, to handle its open/close state. The default slot offers the possibility to customise the modal content. |
|
|
31
|
-
| [BaseIdModalClose](./x-components.baseidmodalclose.md) | Component
|
|
31
|
+
| [BaseIdModalClose](./x-components.baseidmodalclose.md) | Component that allows to close a modal by emitting [XEventsTypes.UserClickedCloseModal](./x-components.xeventstypes.userclickedclosemodal.md)<!-- -->. It's fully customizable as it exposes the closing event but by default it renders a customizable button. |
|
|
32
32
|
| [BaseIdModalOpen](./x-components.baseidmodalopen.md) | Component containing an event button that emits [XEventsTypes.UserClickedOpenModal](./x-components.xeventstypes.userclickedopenmodal.md) when clicked with the modalId as payload. It has a default slot to customize its contents. |
|
|
33
33
|
| [BaseIdTogglePanel](./x-components.baseidtogglepanel.md) | Simple panel that could receives its initial open state via prop, if not the default is opens and a required prop, named <code>panelId</code>, which are responsible of rendering default slot inside a configurable transition.<!-- -->It reacts to <code>UserClickedPanelToggleButton</code> event, when their payload matches the component's 'panelId' prop, to handle its open/close state.<!-- -->The default slot offers the possibility to customise the modal content. |
|
|
34
34
|
| [BaseIdTogglePanelButton](./x-components.baseidtogglepanelbutton.md) | Component containing an event button that emits [XEventsTypes.UserClickedPanelToggleButton](./x-components.xeventstypes.userclickedpaneltogglebutton.md) when clicked with the panelId as payload.<!-- -->It has a default slot to customize its contents. |
|
|
@@ -6,8 +6,9 @@ title: BaseIdModalClose
|
|
|
6
6
|
|
|
7
7
|
# BaseIdModalClose
|
|
8
8
|
|
|
9
|
-
Component
|
|
10
|
-
|
|
9
|
+
Component that allows to close a modal by emitting {@link XEventsTypes.UserClickedCloseModal}.
|
|
10
|
+
It's fully customizable as it exposes the closing event but by default it renders a
|
|
11
|
+
customizable button.
|
|
11
12
|
|
|
12
13
|
## Props
|
|
13
14
|
|
|
@@ -17,19 +18,21 @@ clicked with the modalId as payload. It has a default slot to customize its cont
|
|
|
17
18
|
|
|
18
19
|
## Slots
|
|
19
20
|
|
|
20
|
-
| Name
|
|
21
|
-
|
|
|
22
|
-
| <code>
|
|
21
|
+
| Name | Description | Bindings<br />(name - type - description) |
|
|
22
|
+
| ---------------------------- | ----------------------------------------------------------------------------- | ----------------------------------------------------------------------- |
|
|
23
|
+
| <code>closing-element</code> | closing-element. It's the element that will trigger the modal closing. It's a | **closeModal** <code>Function</code> - The function to close the modal. |
|
|
24
|
+
| <code>default</code> | | None |
|
|
23
25
|
|
|
24
26
|
## Examples
|
|
25
27
|
|
|
26
28
|
Component containing an event button that emits `UserClickedCloseModal` when clicked with the
|
|
27
|
-
modalId as payload. It has a default slot to customize its contents
|
|
29
|
+
modalId as payload. It has a default slot to customize its contents and can also be fully
|
|
30
|
+
customized, replacing the default button with any other element.
|
|
28
31
|
|
|
29
32
|
### Basic example
|
|
30
33
|
|
|
31
|
-
The component renders whatever is passed to it in the default slot and
|
|
32
|
-
modalId `my-modal`.
|
|
34
|
+
The component renders whatever is passed to it in the default slot inside the button and closes the
|
|
35
|
+
modal with modalId `my-modal`.
|
|
33
36
|
|
|
34
37
|
```vue
|
|
35
38
|
<template>
|
|
@@ -50,6 +53,35 @@ export default {
|
|
|
50
53
|
</script>
|
|
51
54
|
```
|
|
52
55
|
|
|
56
|
+
### Replacing the default button
|
|
57
|
+
|
|
58
|
+
The component renders whatever element is passed, replacing the default button and exposing the
|
|
59
|
+
function to close the modal with modalId `my-modal`.
|
|
60
|
+
|
|
61
|
+
```vue
|
|
62
|
+
<template>
|
|
63
|
+
<BaseIdModalClose modalId="my-modal">
|
|
64
|
+
<template #closing-element="{ closeModal }">
|
|
65
|
+
<ul>
|
|
66
|
+
<li @click="closeModal">Close here</li>
|
|
67
|
+
<li>Not here</li>
|
|
68
|
+
</ul>
|
|
69
|
+
</template>
|
|
70
|
+
</BaseIdModalClose>
|
|
71
|
+
</template>
|
|
72
|
+
|
|
73
|
+
<script>
|
|
74
|
+
import { BaseIdModalClose } from "@empathyco/x-components";
|
|
75
|
+
|
|
76
|
+
export default {
|
|
77
|
+
name: "BaseIdModalCloseTest",
|
|
78
|
+
components: {
|
|
79
|
+
BaseIdModalClose
|
|
80
|
+
}
|
|
81
|
+
};
|
|
82
|
+
</script>
|
|
83
|
+
```
|
|
84
|
+
|
|
53
85
|
## Events
|
|
54
86
|
|
|
55
87
|
A list of events that the component will emit:
|
|
@@ -22,9 +22,9 @@ requires knowledge of JavaScript and Vue.js.
|
|
|
22
22
|
|
|
23
23
|
To use Interface X Archetype as a search UI layer, you need:
|
|
24
24
|
|
|
25
|
-
- **Empathy Search API** (or any search API that you use to retrieve search data).
|
|
26
|
-
- **Empathy Search Adapter** to communicate with the Empathy Search API (or
|
|
27
|
-
connect with the search API you are using).
|
|
25
|
+
- **Empathy Platform Search API** (or any search API that you use to retrieve search data).
|
|
26
|
+
- **Empathy Platform Search Adapter** to communicate with the Empathy Platform Search API (or the
|
|
27
|
+
Empathy Search Adapter to connect with the search API you are using).
|
|
28
28
|
|
|
29
29
|
:::
|
|
30
30
|
|
|
@@ -102,16 +102,19 @@ Interface X Archetype repository.
|
|
|
102
102
|
|
|
103
103
|
## Configuring the search adapter
|
|
104
104
|
|
|
105
|
-
Before using your project, configure the Empathy Search Adapter in the
|
|
106
|
-
`x-archetype/src/adapter/adapter.ts` file
|
|
105
|
+
Before using your project, configure the Empathy Platform Search Adapter in the
|
|
106
|
+
`x-archetype/src/adapter/adapter.ts` file. The Empathy Platform Search Adapter contains a sample
|
|
107
|
+
configuration for setup, global configurations, or mappers that points to a demo environment. You
|
|
108
|
+
need to adjust the configuration according to the search features you use in your project.
|
|
107
109
|
|
|
108
110
|
Export the required search adapter with your configuration as you will need it for the search
|
|
109
111
|
[xPlugin configuration](#configuring-the-plugin).
|
|
110
112
|
|
|
111
113
|
::: interact
|
|
112
114
|
|
|
113
|
-
For detailed information about other configuration options in the Empathy Search Adapter,
|
|
114
|
-
|
|
115
|
+
For detailed information about other configuration options in the Empathy Platform Search Adapter,
|
|
116
|
+
go to the
|
|
117
|
+
[x-adapter-platform repository](https://github.com/empathyco/x/tree/main/packages/x-adapter-platform).
|
|
115
118
|
|
|
116
119
|
:::
|
|
117
120
|
|
|
@@ -69,7 +69,6 @@ initialize Interface X:
|
|
|
69
69
|
```js
|
|
70
70
|
window.initX = {
|
|
71
71
|
instance: 'my-store',
|
|
72
|
-
env: 'live',
|
|
73
72
|
scope: 'desktop',
|
|
74
73
|
lang: 'en',
|
|
75
74
|
currency: 'EUR',
|
|
@@ -83,7 +82,7 @@ window.initX = {
|
|
|
83
82
|
window.initX = function () {
|
|
84
83
|
return {
|
|
85
84
|
instance: 'my-store',
|
|
86
|
-
env: location.href.includes('.pre.') ? 'staging' :
|
|
85
|
+
env: location.href.includes('.pre.') ? 'staging' : undefined,
|
|
87
86
|
scope: 'web',
|
|
88
87
|
lang: localStorage.get('lang'),
|
|
89
88
|
currency: localStorage.get('currency'),
|
|
@@ -105,7 +104,9 @@ more information on the supported parameters, check out
|
|
|
105
104
|
|
|
106
105
|
Once the snippet configuration is ready, add the Interface X script to your webpage. The script
|
|
107
106
|
is hosted in a URL with the following syntax:
|
|
108
|
-
|
|
107
|
+
|
|
108
|
+
- **Production**: `https://x.empathy.co/{INSTANCE}/app.js`
|
|
109
|
+
- **Staging**: `https://x.staging.empathy.co/{INSTANCE}/app.js`
|
|
109
110
|
|
|
110
111
|
For example, to load the production version script for the instance _my-store_, you need to add the
|
|
111
112
|
following scripts to your HTML:
|
|
@@ -114,7 +115,6 @@ following scripts to your HTML:
|
|
|
114
115
|
<script>
|
|
115
116
|
window.initX = {
|
|
116
117
|
instance: 'my-store',
|
|
117
|
-
env: 'live',
|
|
118
118
|
scope: 'desktop',
|
|
119
119
|
lang: 'en',
|
|
120
120
|
currency: 'EUR',
|
|
@@ -131,7 +131,7 @@ attribute `src` so that it points to the staging environment as follows:
|
|
|
131
131
|
<script>
|
|
132
132
|
window.initX = {
|
|
133
133
|
instance: 'my-store',
|
|
134
|
-
env: '
|
|
134
|
+
env: 'staging', // By removing this param you would be using a production API with the staging version of Interface X
|
|
135
135
|
scope: 'desktop',
|
|
136
136
|
lang: 'en',
|
|
137
137
|
currency: 'EUR',
|
|
@@ -156,7 +156,9 @@ On-demand initialization allows you to control when Interface X is loaded.
|
|
|
156
156
|
#### Loading the script
|
|
157
157
|
|
|
158
158
|
Add the Interface X script hosted in a URL with the following syntax:
|
|
159
|
-
|
|
159
|
+
|
|
160
|
+
- **Production**: `https://x.empathy.co/{INSTANCE}/app.js`
|
|
161
|
+
- **Staging**: `https://x.staging.empathy.co/{INSTANCE}/app.js`
|
|
160
162
|
|
|
161
163
|
For example, to load the production version script for the instance _my-store_, you need to add the
|
|
162
164
|
following script to your HTML:
|
|
@@ -180,11 +182,10 @@ initialization function** created automatically in the
|
|
|
180
182
|
object to provide the initialization options:
|
|
181
183
|
|
|
182
184
|
```html
|
|
183
|
-
<script src="https://x.empathy.co/my-store/app.js"></script>
|
|
185
|
+
<script src="https://x.empathy.co/my-store/app.js" type="module"></script>
|
|
184
186
|
<script>
|
|
185
187
|
window.InterfaceX.init({
|
|
186
188
|
instance: 'my-store',
|
|
187
|
-
env: 'live',
|
|
188
189
|
scope: 'desktop',
|
|
189
190
|
lang: 'en',
|
|
190
191
|
currency: 'EUR',
|
|
@@ -219,12 +220,12 @@ The
|
|
|
219
220
|
[snippet configuration](https://github.com/empathyco/x-archetype/blob/main/public/snippet-script.js)
|
|
220
221
|
allows you to configure multiple initialization options for the Interface X project such as
|
|
221
222
|
language, currency, and shopper's personal data consent. The snippet configuration supports the
|
|
222
|
-
following configuration
|
|
223
|
+
following configuration parameters:
|
|
223
224
|
|
|
224
|
-
|
|
|
225
|
+
| Parameter | Type | Description |
|
|
225
226
|
| ------------------------------------------------------ | ------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
|
|
226
227
|
| `instance` | `string` | _Required._ ID of the API client instance. It's provided by Empathy. |
|
|
227
|
-
| `env` | `
|
|
228
|
+
| `env` | `staging` | _Optional_. API environment to use. Note that if you **do not** declare this parameter, you'll use the production API. Instead, use `env: 'staging'` to point to the staging API. |
|
|
228
229
|
| `scope` | `string` | _Optional_. Context where the search interface is executed, i.e. `mobile`, `mobile-app`, `tablet`, `desktop`. |
|
|
229
230
|
| `lang` | `string` | _Required._ Language to use. By default, it's used for both the frontend and the API requests. |
|
|
230
231
|
| `searchLang` | `string` | _Optional_. Language to use for the API requests **only**. |
|
|
@@ -260,11 +261,10 @@ For example, you subscribe to the `UserClickedResultAddToCart` event to add a pr
|
|
|
260
261
|
shopping cart:
|
|
261
262
|
|
|
262
263
|
```html
|
|
263
|
-
<script src="https://x.empathy.co/my-store/app.js"></script>
|
|
264
|
+
<script src="https://x.empathy.co/my-store/app.js" type="module"></script>
|
|
264
265
|
<script>
|
|
265
266
|
window.InterfaceX.init({
|
|
266
267
|
instance: 'my-store',
|
|
267
|
-
env: 'live',
|
|
268
268
|
scope: 'desktop',
|
|
269
269
|
lang: 'en',
|
|
270
270
|
currency: 'EUR',
|
|
@@ -297,7 +297,8 @@ etc.). See the corresponding `events.types.ts` file for each module in the
|
|
|
297
297
|
The
|
|
298
298
|
[X API](https://github.com/empathyco/x/blob/main/packages/x-components/src/x-installer/api/base-api.ts)
|
|
299
299
|
object allows your commerce store to communicate with Interface X. It supports multiple
|
|
300
|
-
functions to integrate Interface X in your website.
|
|
300
|
+
functions to integrate Interface X in your website. You can access these functions inside the
|
|
301
|
+
`window.InterfaceX` object.
|
|
301
302
|
|
|
302
303
|
| Function | Parameters | Description |
|
|
303
304
|
| ------------------ | ------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
|
|
@@ -33,8 +33,7 @@ You can find the X Components library in the
|
|
|
33
33
|
To integrate the X Components in a frontend UI, you need:
|
|
34
34
|
|
|
35
35
|
- **Empathy Search API** to retrieve search data (or any other search API)
|
|
36
|
-
- A **search adapter** to communicate with the search API.
|
|
37
|
-
[Empathy Platform Adapter](https://github.com/empathyco/x/tree/main/packages/x-adapter-platform)
|
|
36
|
+
- A **search adapter** to communicate with the search API.
|
|
38
37
|
- Your commerce store built on a **Vue** project, or on a **React** project using the
|
|
39
38
|
[React Wrapper](https://github.com/empathyco/x/tree/main/packages/react-wrapper).
|
|
40
39
|
|
|
@@ -93,8 +92,10 @@ If you do not use the Empathy Search API, you need to build your own adapter.
|
|
|
93
92
|
|
|
94
93
|
:::
|
|
95
94
|
|
|
96
|
-
For more information, see
|
|
97
|
-
[
|
|
95
|
+
For more information, see the
|
|
96
|
+
[Empathy Search Adapter](https://github.com/empathyco/x/tree/main/packages/x-adapter) and
|
|
97
|
+
[Empathy Platform Search Adapter](https://github.com/empathyco/x/tree/main/packages/x-adapter-platform)
|
|
98
|
+
libraries.
|
|
98
99
|
|
|
99
100
|
## Configuring the plugin
|
|
100
101
|
|
|
@@ -10,15 +10,27 @@ var __vue_render__ = function () {
|
|
|
10
10
|
var _h = _vm.$createElement;
|
|
11
11
|
var _c = _vm._self._c || _h;
|
|
12
12
|
return _c(
|
|
13
|
-
"
|
|
14
|
-
_vm._g(
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
13
|
+
"NoElement",
|
|
14
|
+
_vm._g({ attrs: { "data-test": "close-modal-id" } }, _vm.$listeners),
|
|
15
|
+
[
|
|
16
|
+
_vm._t(
|
|
17
|
+
"closing-element",
|
|
18
|
+
function () {
|
|
19
|
+
return [
|
|
20
|
+
_c(
|
|
21
|
+
"button",
|
|
22
|
+
{
|
|
23
|
+
staticClass: "x-button x-events-modal-id-close-button",
|
|
24
|
+
on: { click: _vm.emitCloseModalEvent },
|
|
25
|
+
},
|
|
26
|
+
[_vm._t("default")],
|
|
27
|
+
2
|
|
28
|
+
),
|
|
29
|
+
]
|
|
30
|
+
},
|
|
31
|
+
{ closeModal: _vm.emitCloseModalEvent }
|
|
32
|
+
),
|
|
33
|
+
],
|
|
22
34
|
2
|
|
23
35
|
)
|
|
24
36
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"base-id-modal-close.vue.js","sources":["../../../../src/components/modals/base-id-modal-close.vue"],"sourcesContent":["<template>\n <
|
|
1
|
+
{"version":3,"file":"base-id-modal-close.vue.js","sources":["../../../../src/components/modals/base-id-modal-close.vue"],"sourcesContent":["<template>\n <NoElement v-on=\"$listeners\" data-test=\"close-modal-id\">\n <!--\n @slot closing-element. It's the element that will trigger the modal closing. It's a\n button by default.\n @binding {Function} closeModal - The function to close the modal.\n -->\n <slot :closeModal=\"emitCloseModalEvent\" name=\"closing-element\">\n <button @click=\"emitCloseModalEvent\" class=\"x-button x-events-modal-id-close-button\">\n <slot />\n </button>\n </slot>\n </NoElement>\n</template>\n\n<script lang=\"ts\">\n import Vue from 'vue';\n import { Component, Prop } from 'vue-property-decorator';\n import BaseEventButton from '../base-event-button.vue';\n import { NoElement } from '../no-element';\n\n /**\n * Component that allows to close a modal by emitting {@link XEventsTypes.UserClickedCloseModal}.\n * It's fully customizable as it exposes the closing event but by default it renders a\n * customizable button.\n *\n * @public\n */\n @Component({\n components: { BaseEventButton, NoElement }\n })\n export default class BaseIdModalClose extends Vue {\n @Prop({ required: true })\n protected modalId!: string;\n\n protected emitCloseModalEvent(): void {\n this.$x.emit('UserClickedCloseModal', this.modalId, { target: this.$el as HTMLElement });\n }\n }\n</script>\n\n<docs lang=\"mdx\">\n## Examples\n\nComponent containing an event button that emits `UserClickedCloseModal` when clicked with the\nmodalId as payload. It has a default slot to customize its contents and can also be fully\ncustomized, replacing the default button with any other element.\n\n### Basic example\n\nThe component renders whatever is passed to it in the default slot inside the button and closes the\nmodal with modalId `my-modal`.\n\n```vue\n<template>\n <BaseIdModalClose modalId=\"my-modal\">\n <img src=\"./close-button-icon.svg\" />\n </BaseIdModalClose>\n</template>\n\n<script>\n import { BaseIdModalClose } from '@empathyco/x-components';\n\n export default {\n name: 'BaseIdModalCloseTest',\n components: {\n BaseIdModalClose\n }\n };\n</script>\n```\n\n### Replacing the default button\n\nThe component renders whatever element is passed, replacing the default button and exposing the\nfunction to close the modal with modalId `my-modal`.\n\n```vue\n<template>\n <BaseIdModalClose modalId=\"my-modal\">\n <template #closing-element=\"{ closeModal }\">\n <ul>\n <li @click=\"closeModal\">Close here</li>\n <li>Not here</li>\n </ul>\n </template>\n </BaseIdModalClose>\n</template>\n\n<script>\n import { BaseIdModalClose } from '@empathyco/x-components';\n\n export default {\n name: 'BaseIdModalCloseTest',\n components: {\n BaseIdModalClose\n }\n };\n</script>\n```\n\n## Events\n\nA list of events that the component will emit:\n\n- `UserClickedCloseModal`: the event is emitted after the user clicks the button. The event payload\n is the id of the modal that is going to be closed.\n</docs>\n"],"names":[],"mappings":";;;;AAEA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
|
|
@@ -2,16 +2,18 @@ import { __decorate } from 'tslib';
|
|
|
2
2
|
import Vue from 'vue';
|
|
3
3
|
import { Prop, Component } from 'vue-property-decorator';
|
|
4
4
|
import __vue_component__ from '../base-event-button.vue.js';
|
|
5
|
+
import { NoElement } from '../no-element.js';
|
|
5
6
|
|
|
6
7
|
/**
|
|
7
|
-
* Component
|
|
8
|
-
*
|
|
8
|
+
* Component that allows to close a modal by emitting {@link XEventsTypes.UserClickedCloseModal}.
|
|
9
|
+
* It's fully customizable as it exposes the closing event but by default it renders a
|
|
10
|
+
* customizable button.
|
|
9
11
|
*
|
|
10
12
|
* @public
|
|
11
13
|
*/
|
|
12
14
|
let BaseIdModalClose = class BaseIdModalClose extends Vue {
|
|
13
|
-
|
|
14
|
-
|
|
15
|
+
emitCloseModalEvent() {
|
|
16
|
+
this.$x.emit('UserClickedCloseModal', this.modalId, { target: this.$el });
|
|
15
17
|
}
|
|
16
18
|
};
|
|
17
19
|
__decorate([
|
|
@@ -19,7 +21,7 @@ __decorate([
|
|
|
19
21
|
], BaseIdModalClose.prototype, "modalId", void 0);
|
|
20
22
|
BaseIdModalClose = __decorate([
|
|
21
23
|
Component({
|
|
22
|
-
components: { BaseEventButton: __vue_component__ }
|
|
24
|
+
components: { BaseEventButton: __vue_component__, NoElement }
|
|
23
25
|
})
|
|
24
26
|
], BaseIdModalClose);
|
|
25
27
|
var script = BaseIdModalClose;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"base-id-modal-close.vue_rollup-plugin-vue_script.vue.js","sources":["../../../../src/components/modals/base-id-modal-close.vue?rollup-plugin-vue=script.ts"],"sourcesContent":["\n\n\n\n\n\n\n\n\n\n\n\n\nimport Vue from 'vue';\nimport { Component, Prop } from 'vue-property-decorator';\nimport
|
|
1
|
+
{"version":3,"file":"base-id-modal-close.vue_rollup-plugin-vue_script.vue.js","sources":["../../../../src/components/modals/base-id-modal-close.vue?rollup-plugin-vue=script.ts"],"sourcesContent":["\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\nimport Vue from 'vue';\nimport { Component, Prop } from 'vue-property-decorator';\nimport BaseEventButton from '../base-event-button.vue';\nimport { NoElement } from '../no-element';\n\n/**\n * Component that allows to close a modal by emitting {@link XEventsTypes.UserClickedCloseModal}.\n * It's fully customizable as it exposes the closing event but by default it renders a\n * customizable button.\n *\n * @public\n */\n@Component({\n components: { BaseEventButton, NoElement }\n})\nexport default class BaseIdModalClose extends Vue {\n @Prop({ required: true })\n protected modalId!: string;\n\n protected emitCloseModalEvent(): void {\n this.$x.emit('UserClickedCloseModal', this.modalId, { target: this.$el as HTMLElement });\n }\n}\n"],"names":["BaseEventButton"],"mappings":";;;;;;AAqBA;;;;;;;AAUA,IAAqB,gBAAgB,GAArC,MAAqB,gBAAiB,SAAQ,GAAG;IAIrC,mBAAmB;QAC3B,IAAI,CAAC,EAAE,CAAC,IAAI,CAAC,uBAAuB,EAAE,IAAI,CAAC,OAAO,EAAE,EAAE,MAAM,EAAE,IAAI,CAAC,GAAkB,EAAE,CAAC,CAAC;KAC1F;CACF,CAAA;AALC;IADC,IAAI,CAAC,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC;iDACE;AAFR,gBAAgB;IAHpC,SAAS,CAAC;QACT,UAAU,EAAE,mBAAEA,iBAAe,EAAE,SAAS,EAAE;KAC3C,CAAC;GACmB,gBAAgB,CAOpC;aAPoB,gBAAgB;;;;"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@empathyco/x-components",
|
|
3
|
-
"version": "3.0.0-alpha.
|
|
3
|
+
"version": "3.0.0-alpha.145",
|
|
4
4
|
"description": "Empathy X Components",
|
|
5
5
|
"author": "Empathy Systems Corporation S.L.",
|
|
6
6
|
"license": "Apache-2.0",
|
|
@@ -125,5 +125,5 @@
|
|
|
125
125
|
"access": "public",
|
|
126
126
|
"directory": "dist"
|
|
127
127
|
},
|
|
128
|
-
"gitHead": "
|
|
128
|
+
"gitHead": "425daae064fc399aece12544ec4c57a05494c732"
|
|
129
129
|
}
|
|
@@ -3702,7 +3702,7 @@
|
|
|
3702
3702
|
{
|
|
3703
3703
|
"kind": "Class",
|
|
3704
3704
|
"canonicalReference": "@empathyco/x-components!BaseIdModalClose:class",
|
|
3705
|
-
"docComment": "/**\n * Component
|
|
3705
|
+
"docComment": "/**\n * Component that allows to close a modal by emitting {@link XEventsTypes.UserClickedCloseModal}. It's fully customizable as it exposes the closing event but by default it renders a customizable button.\n *\n * @public\n */\n",
|
|
3706
3706
|
"excerptTokens": [
|
|
3707
3707
|
{
|
|
3708
3708
|
"kind": "Content",
|
|
@@ -3722,31 +3722,17 @@
|
|
|
3722
3722
|
"name": "BaseIdModalClose",
|
|
3723
3723
|
"members": [
|
|
3724
3724
|
{
|
|
3725
|
-
"kind": "
|
|
3726
|
-
"canonicalReference": "@empathyco/x-components!BaseIdModalClose#
|
|
3725
|
+
"kind": "Method",
|
|
3726
|
+
"canonicalReference": "@empathyco/x-components!BaseIdModalClose#emitCloseModalEvent:member(1)",
|
|
3727
3727
|
"docComment": "",
|
|
3728
3728
|
"excerptTokens": [
|
|
3729
3729
|
{
|
|
3730
3730
|
"kind": "Content",
|
|
3731
|
-
"text": "protected
|
|
3732
|
-
},
|
|
3733
|
-
{
|
|
3734
|
-
"kind": "Reference",
|
|
3735
|
-
"text": "Partial",
|
|
3736
|
-
"canonicalReference": "!Partial:type"
|
|
3737
|
-
},
|
|
3738
|
-
{
|
|
3739
|
-
"kind": "Content",
|
|
3740
|
-
"text": "<"
|
|
3741
|
-
},
|
|
3742
|
-
{
|
|
3743
|
-
"kind": "Reference",
|
|
3744
|
-
"text": "XEventsTypes",
|
|
3745
|
-
"canonicalReference": "@empathyco/x-components!XEventsTypes:interface"
|
|
3731
|
+
"text": "protected emitCloseModalEvent(): "
|
|
3746
3732
|
},
|
|
3747
3733
|
{
|
|
3748
3734
|
"kind": "Content",
|
|
3749
|
-
"text": "
|
|
3735
|
+
"text": "void"
|
|
3750
3736
|
},
|
|
3751
3737
|
{
|
|
3752
3738
|
"kind": "Content",
|
|
@@ -3754,13 +3740,15 @@
|
|
|
3754
3740
|
}
|
|
3755
3741
|
],
|
|
3756
3742
|
"isOptional": false,
|
|
3757
|
-
"
|
|
3758
|
-
"
|
|
3759
|
-
"propertyTypeTokenRange": {
|
|
3743
|
+
"isStatic": false,
|
|
3744
|
+
"returnTypeTokenRange": {
|
|
3760
3745
|
"startIndex": 1,
|
|
3761
|
-
"endIndex":
|
|
3746
|
+
"endIndex": 2
|
|
3762
3747
|
},
|
|
3763
|
-
"
|
|
3748
|
+
"releaseTag": "Public",
|
|
3749
|
+
"overloadIndex": 1,
|
|
3750
|
+
"parameters": [],
|
|
3751
|
+
"name": "emitCloseModalEvent"
|
|
3764
3752
|
},
|
|
3765
3753
|
{
|
|
3766
3754
|
"kind": "Property",
|
|
@@ -385,7 +385,7 @@ export class BaseIdModal extends Vue_2 {
|
|
|
385
385
|
// @public
|
|
386
386
|
export class BaseIdModalClose extends Vue_2 {
|
|
387
387
|
// (undocumented)
|
|
388
|
-
protected
|
|
388
|
+
protected emitCloseModalEvent(): void;
|
|
389
389
|
// (undocumented)
|
|
390
390
|
protected modalId: string;
|
|
391
391
|
}
|
|
@@ -1,13 +1,13 @@
|
|
|
1
1
|
import Vue from 'vue';
|
|
2
|
-
import { XEventsTypes } from '../../wiring/events.types';
|
|
3
2
|
/**
|
|
4
|
-
* Component
|
|
5
|
-
*
|
|
3
|
+
* Component that allows to close a modal by emitting {@link XEventsTypes.UserClickedCloseModal}.
|
|
4
|
+
* It's fully customizable as it exposes the closing event but by default it renders a
|
|
5
|
+
* customizable button.
|
|
6
6
|
*
|
|
7
7
|
* @public
|
|
8
8
|
*/
|
|
9
9
|
export default class BaseIdModalClose extends Vue {
|
|
10
10
|
protected modalId: string;
|
|
11
|
-
protected
|
|
11
|
+
protected emitCloseModalEvent(): void;
|
|
12
12
|
}
|
|
13
13
|
//# sourceMappingURL=base-id-modal-close.vue?rollup-plugin-vue=script.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"base-id-modal-close.vue?rollup-plugin-vue=script.d.ts","sourceRoot":"","sources":["../../../../src/components/modals/base-id-modal-close.vue?rollup-plugin-vue=script.ts"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"base-id-modal-close.vue?rollup-plugin-vue=script.d.ts","sourceRoot":"","sources":["../../../../src/components/modals/base-id-modal-close.vue?rollup-plugin-vue=script.ts"],"names":[],"mappings":"AAgBA,OAAO,GAAG,MAAM,KAAK,CAAC;AAKtB;;;;;;GAMG;AAIH,MAAM,CAAC,OAAO,OAAO,gBAAiB,SAAQ,GAAG;IAE/C,SAAS,CAAC,OAAO,EAAG,MAAM,CAAC;IAE3B,SAAS,CAAC,mBAAmB,IAAI,IAAI;CAGtC"}
|