@empathyco/x-components 3.0.0-alpha.149 → 3.0.0-alpha.151
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 +26 -0
- package/design-system/default-theme.css +10 -10
- package/docs/API-reference/api/x-components.baseidmodalclose.emitclosemodalevent.md +10 -1
- package/docs/API-reference/api/x-components.baseidmodalclose.md +3 -3
- package/docs/API-reference/api/x-components.baseidmodalclose.modalid.md +2 -0
- package/docs/API-reference/api/x-components.baseidmodalopen.emitopenmodalevent.md +24 -0
- package/docs/API-reference/api/x-components.baseidmodalopen.md +8 -3
- package/docs/API-reference/api/x-components.baseidmodalopen.modalid.md +2 -0
- package/docs/API-reference/api/x-components.md +2 -2
- package/docs/API-reference/components/common/modals/x-components.base-id-modal-close.md +13 -13
- package/docs/API-reference/components/common/modals/x-components.base-id-modal-open.md +47 -15
- package/docs/API-reference/components/search-box/x-components.search-input.md +10 -0
- package/docs/build-search-ui/web-how-to-use-x-components-guide.md +37 -0
- package/js/components/modals/base-id-modal-close.vue.js +1 -1
- 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 +11 -6
- package/js/components/modals/base-id-modal-close.vue_rollup-plugin-vue_script.vue.js.map +1 -1
- package/js/components/modals/base-id-modal-open.vue.js +21 -9
- package/js/components/modals/base-id-modal-open.vue.js.map +1 -1
- package/js/components/modals/base-id-modal-open.vue_rollup-plugin-vue_script.vue.js +13 -6
- package/js/components/modals/base-id-modal-open.vue_rollup-plugin-vue_script.vue.js.map +1 -1
- package/js/x-modules/search-box/components/search-input.vue.js +2 -2
- package/js/x-modules/search-box/components/search-input.vue.js.map +1 -1
- package/package.json +2 -2
- package/report/x-components.api.json +50 -28
- package/report/x-components.api.md +2 -6
- package/types/components/modals/base-id-modal-close.vue.d.ts +14 -3
- package/types/components/modals/base-id-modal-close.vue.d.ts.map +1 -1
- package/types/components/modals/base-id-modal-open.vue.d.ts +15 -4
- package/types/components/modals/base-id-modal-open.vue.d.ts.map +1 -1
- package/docs/API-reference/api/x-components.baseidmodalopen.events.md +0 -11
package/CHANGELOG.md
CHANGED
|
@@ -3,6 +3,32 @@
|
|
|
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.151](https://github.com/empathyco/x/compare/@empathyco/x-components@3.0.0-alpha.150...@empathyco/x-components@3.0.0-alpha.151) (2022-08-09)
|
|
7
|
+
|
|
8
|
+
### Documentation
|
|
9
|
+
|
|
10
|
+
- clarify how to subscribe to any `XEvent` (#645)
|
|
11
|
+
([d57941a](https://github.com/empathyco/x/commit/d57941a52d23f56cb7c04ed49b816a252473243f)),
|
|
12
|
+
closes [EX-6816](https://searchbroker.atlassian.net/browse/EX-6816)
|
|
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.150](https://github.com/empathyco/x/compare/@empathyco/x-components@3.0.0-alpha.149...@empathyco/x-components@3.0.0-alpha.150) (2022-08-08)
|
|
20
|
+
|
|
21
|
+
### Features
|
|
22
|
+
|
|
23
|
+
- **components:** make `BaseIdModalOpen` rendering configurable (#637)
|
|
24
|
+
([77cb564](https://github.com/empathyco/x/commit/77cb5646b1e43c8b7aa428db4102dc6aca8affdf)),
|
|
25
|
+
closes [EX-6751](https://searchbroker.atlassian.net/browse/EX-6751)
|
|
26
|
+
|
|
27
|
+
# Change Log
|
|
28
|
+
|
|
29
|
+
All notable changes to this project will be documented in this file. See
|
|
30
|
+
[Conventional Commits](https://conventionalcommits.org) for commit guidelines.
|
|
31
|
+
|
|
6
32
|
## [3.0.0-alpha.149](https://github.com/empathyco/x/compare/@empathyco/x-components@3.0.0-alpha.148...@empathyco/x-components@3.0.0-alpha.149) (2022-08-08)
|
|
7
33
|
|
|
8
34
|
### Bug Fixes
|
|
@@ -47,16 +47,6 @@
|
|
|
47
47
|
.x-badge-container {
|
|
48
48
|
position: relative;
|
|
49
49
|
}
|
|
50
|
-
:root {
|
|
51
|
-
--x-color-background-badge-default: var(--x-color-base-neutral-10);
|
|
52
|
-
--x-color-text-badge-default: var(--x-color-base-neutral-100);
|
|
53
|
-
--x-color-border-badge-default: var(--x-color-base-neutral-10);
|
|
54
|
-
--x-size-border-radius-badge-default: var(--x-size-border-radius-base-pill);
|
|
55
|
-
--x-size-border-width-badge-default: 0;
|
|
56
|
-
--x-size-width-badge-default: 1.5em;
|
|
57
|
-
--x-number-font-weight-badge-default: var(--x-number-font-weight-base-regular);
|
|
58
|
-
--x-size-font-badge-default: var(--x-size-font-base-xs);
|
|
59
|
-
}
|
|
60
50
|
:root {
|
|
61
51
|
--x-color-background-button-default: var(--x-color-base-lead);
|
|
62
52
|
--x-color-border-button-default: var(--x-color-background-button-default);
|
|
@@ -142,6 +132,16 @@
|
|
|
142
132
|
margin-right: var(--x-size-gap-button-default);
|
|
143
133
|
}
|
|
144
134
|
}
|
|
135
|
+
:root {
|
|
136
|
+
--x-color-background-badge-default: var(--x-color-base-neutral-10);
|
|
137
|
+
--x-color-text-badge-default: var(--x-color-base-neutral-100);
|
|
138
|
+
--x-color-border-badge-default: var(--x-color-base-neutral-10);
|
|
139
|
+
--x-size-border-radius-badge-default: var(--x-size-border-radius-base-pill);
|
|
140
|
+
--x-size-border-width-badge-default: 0;
|
|
141
|
+
--x-size-width-badge-default: 1.5em;
|
|
142
|
+
--x-number-font-weight-badge-default: var(--x-number-font-weight-base-regular);
|
|
143
|
+
--x-size-font-badge-default: var(--x-size-font-base-xs);
|
|
144
|
+
}
|
|
145
145
|
:root {
|
|
146
146
|
--x-color-background-button-default: var(--x-color-base-lead);
|
|
147
147
|
--x-color-border-button-default: var(--x-color-background-button-default);
|
|
@@ -4,11 +4,20 @@
|
|
|
4
4
|
|
|
5
5
|
## BaseIdModalClose.emitCloseModalEvent() method
|
|
6
6
|
|
|
7
|
+
Emits the [XEventsTypes.UserClickedCloseModal](./x-components.xeventstypes.userclickedclosemodal.md) event with the modalId as payload.
|
|
8
|
+
|
|
7
9
|
<b>Signature:</b>
|
|
8
10
|
|
|
9
11
|
```typescript
|
|
10
|
-
protected emitCloseModalEvent(): void;
|
|
12
|
+
protected emitCloseModalEvent({ target }: Event): void;
|
|
11
13
|
```
|
|
14
|
+
|
|
15
|
+
## Parameters
|
|
16
|
+
|
|
17
|
+
| Parameter | Type | Description |
|
|
18
|
+
| --- | --- | --- |
|
|
19
|
+
| { target } | Event | |
|
|
20
|
+
|
|
12
21
|
<b>Returns:</b>
|
|
13
22
|
|
|
14
23
|
void
|
|
@@ -4,7 +4,7 @@
|
|
|
4
4
|
|
|
5
5
|
## BaseIdModalClose class
|
|
6
6
|
|
|
7
|
-
Component that allows to close a modal by emitting [XEventsTypes.UserClickedCloseModal](./x-components.xeventstypes.userclickedclosemodal.md)<!-- -->. It
|
|
7
|
+
Component that allows to close a modal by emitting [XEventsTypes.UserClickedCloseModal](./x-components.xeventstypes.userclickedclosemodal.md)<!-- -->. It allows full customization with the 'closing-element' slot and exposes the 'closeModal' function.
|
|
8
8
|
|
|
9
9
|
<b>Signature:</b>
|
|
10
10
|
|
|
@@ -17,11 +17,11 @@ export default class BaseIdModalClose extends Vue
|
|
|
17
17
|
|
|
18
18
|
| Property | Modifiers | Type | Description |
|
|
19
19
|
| --- | --- | --- | --- |
|
|
20
|
-
| [modalId](./x-components.baseidmodalclose.modalid.md) | | string |
|
|
20
|
+
| [modalId](./x-components.baseidmodalclose.modalid.md) | | string | The modalId of the modal that will be closed. |
|
|
21
21
|
|
|
22
22
|
## Methods
|
|
23
23
|
|
|
24
24
|
| Method | Modifiers | Description |
|
|
25
25
|
| --- | --- | --- |
|
|
26
|
-
| [emitCloseModalEvent()](./x-components.baseidmodalclose.emitclosemodalevent.md) | |
|
|
26
|
+
| [emitCloseModalEvent({ target })](./x-components.baseidmodalclose.emitclosemodalevent.md) | | Emits the [XEventsTypes.UserClickedCloseModal](./x-components.xeventstypes.userclickedclosemodal.md) event with the modalId as payload. |
|
|
27
27
|
|
|
@@ -0,0 +1,24 @@
|
|
|
1
|
+
<!-- Do not edit this file. It is automatically generated by API Documenter. -->
|
|
2
|
+
|
|
3
|
+
[Home](./index.md) > [@empathyco/x-components](./x-components.md) > [BaseIdModalOpen](./x-components.baseidmodalopen.md) > [emitOpenModalEvent](./x-components.baseidmodalopen.emitopenmodalevent.md)
|
|
4
|
+
|
|
5
|
+
## BaseIdModalOpen.emitOpenModalEvent() method
|
|
6
|
+
|
|
7
|
+
Emits the [XEventsTypes.UserClickedOpenModal](./x-components.xeventstypes.userclickedopenmodal.md) event with the modalId as payload.
|
|
8
|
+
|
|
9
|
+
<b>Signature:</b>
|
|
10
|
+
|
|
11
|
+
```typescript
|
|
12
|
+
protected emitOpenModalEvent({ target }: Event): void;
|
|
13
|
+
```
|
|
14
|
+
|
|
15
|
+
## Parameters
|
|
16
|
+
|
|
17
|
+
| Parameter | Type | Description |
|
|
18
|
+
| --- | --- | --- |
|
|
19
|
+
| { target } | Event | |
|
|
20
|
+
|
|
21
|
+
<b>Returns:</b>
|
|
22
|
+
|
|
23
|
+
void
|
|
24
|
+
|
|
@@ -4,7 +4,7 @@
|
|
|
4
4
|
|
|
5
5
|
## BaseIdModalOpen class
|
|
6
6
|
|
|
7
|
-
Component
|
|
7
|
+
Component that allows to open a modal by emitting [XEventsTypes.UserClickedOpenModal](./x-components.xeventstypes.userclickedopenmodal.md) with the modalId as payload. It allows full customization with the 'opening-element' slot and exposes the 'openModal' function.
|
|
8
8
|
|
|
9
9
|
<b>Signature:</b>
|
|
10
10
|
|
|
@@ -17,6 +17,11 @@ export default class BaseIdModalOpen extends Vue
|
|
|
17
17
|
|
|
18
18
|
| Property | Modifiers | Type | Description |
|
|
19
19
|
| --- | --- | --- | --- |
|
|
20
|
-
| [
|
|
21
|
-
|
|
20
|
+
| [modalId](./x-components.baseidmodalopen.modalid.md) | | string | The modalId of the modal that will be opened. |
|
|
21
|
+
|
|
22
|
+
## Methods
|
|
23
|
+
|
|
24
|
+
| Method | Modifiers | Description |
|
|
25
|
+
| --- | --- | --- |
|
|
26
|
+
| [emitOpenModalEvent({ target })](./x-components.baseidmodalopen.emitopenmodalevent.md) | | Emits the [XEventsTypes.UserClickedOpenModal](./x-components.xeventstypes.userclickedopenmodal.md) event with the modalId as payload. |
|
|
22
27
|
|
|
@@ -28,8 +28,8 @@ 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 that allows to close a modal by emitting [XEventsTypes.UserClickedCloseModal](./x-components.xeventstypes.userclickedclosemodal.md)<!-- -->. It
|
|
32
|
-
| [BaseIdModalOpen](./x-components.baseidmodalopen.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 allows full customization with the 'closing-element' slot and exposes the 'closeModal' function. |
|
|
32
|
+
| [BaseIdModalOpen](./x-components.baseidmodalopen.md) | Component that allows to open a modal by emitting [XEventsTypes.UserClickedOpenModal](./x-components.xeventstypes.userclickedopenmodal.md) with the modalId as payload. It allows full customization with the 'opening-element' slot and exposes the 'openModal' function. |
|
|
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. |
|
|
35
35
|
| [BaseKeyboardNavigation](./x-components.basekeyboardnavigation.md) | Base component to handle keyboard navigation for elements inside it. It has a required slot to include the navigable elements. |
|
|
@@ -7,21 +7,28 @@ title: BaseIdModalClose
|
|
|
7
7
|
# BaseIdModalClose
|
|
8
8
|
|
|
9
9
|
Component that allows to close a modal by emitting {@link XEventsTypes.UserClickedCloseModal}.
|
|
10
|
-
It
|
|
11
|
-
|
|
10
|
+
It allows full customization with the 'closing-element' slot and exposes the 'closeModal'
|
|
11
|
+
function.
|
|
12
12
|
|
|
13
13
|
## Props
|
|
14
14
|
|
|
15
|
-
| Name | Description
|
|
16
|
-
| -------------------- |
|
|
17
|
-
| <code>modalId</code> |
|
|
15
|
+
| Name | Description | Type | Default |
|
|
16
|
+
| -------------------- | --------------------------------------------- | ------------------- | ------------- |
|
|
17
|
+
| <code>modalId</code> | The modalId of the modal that will be closed. | <code>string</code> | <code></code> |
|
|
18
18
|
|
|
19
19
|
## Slots
|
|
20
20
|
|
|
21
21
|
| Name | Description | Bindings<br />(name - type - description) |
|
|
22
22
|
| ---------------------------- | ----------------------------------------------------------------------------- | ----------------------------------------------------------------------- |
|
|
23
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> |
|
|
24
|
+
| <code>default</code> | (Required) Button content with a text, an icon or both | None |
|
|
25
|
+
|
|
26
|
+
## Events
|
|
27
|
+
|
|
28
|
+
A list of events that the component will emit:
|
|
29
|
+
|
|
30
|
+
- `UserClickedCloseModal`: the event is emitted after the user clicks the button. The event payload
|
|
31
|
+
is the id of the modal that is going to be closed.
|
|
25
32
|
|
|
26
33
|
## Examples
|
|
27
34
|
|
|
@@ -81,10 +88,3 @@ export default {
|
|
|
81
88
|
};
|
|
82
89
|
</script>
|
|
83
90
|
```
|
|
84
|
-
|
|
85
|
-
## Events
|
|
86
|
-
|
|
87
|
-
A list of events that the component will emit:
|
|
88
|
-
|
|
89
|
-
- `UserClickedCloseModal`: the event is emitted after the user clicks the button. The event payload
|
|
90
|
-
is the id of the modal that is going to be closed.
|
|
@@ -6,30 +6,40 @@ title: BaseIdModalOpen
|
|
|
6
6
|
|
|
7
7
|
# BaseIdModalOpen
|
|
8
8
|
|
|
9
|
-
Component
|
|
10
|
-
|
|
9
|
+
Component that allows to open a modal by emitting {@link XEventsTypes.UserClickedOpenModal}
|
|
10
|
+
with the modalId as payload. It allows full customization with the 'opening-element' slot and
|
|
11
|
+
exposes the 'openModal' function.
|
|
11
12
|
|
|
12
13
|
## Props
|
|
13
14
|
|
|
14
|
-
| Name | Description
|
|
15
|
-
| -------------------- |
|
|
16
|
-
| <code>modalId</code> |
|
|
15
|
+
| Name | Description | Type | Default |
|
|
16
|
+
| -------------------- | --------------------------------------------- | ------------------- | ------------- |
|
|
17
|
+
| <code>modalId</code> | The modalId of the modal that will be opened. | <code>string</code> | <code></code> |
|
|
17
18
|
|
|
18
19
|
## Slots
|
|
19
20
|
|
|
20
|
-
| Name
|
|
21
|
-
|
|
|
22
|
-
| <code>
|
|
21
|
+
| Name | Description | Bindings<br />(name - type - description) |
|
|
22
|
+
| ---------------------------- | ----------------------------------------------------------------------------- | --------------------------------------------------------------------- |
|
|
23
|
+
| <code>opening-element</code> | opening-element. It's the element that will trigger the modal opening. It's a | **openModal** <code>Function</code> - The function to open the modal. |
|
|
24
|
+
| <code>default</code> | (Required) Button content with a text, an icon or both | None |
|
|
25
|
+
|
|
26
|
+
## Events
|
|
27
|
+
|
|
28
|
+
A list of events that the component will emit:
|
|
29
|
+
|
|
30
|
+
- `UserClickedOpenModal`: the event is emitted after the user clicks the button. The event payload
|
|
31
|
+
is the id of the modal that is going to be opened.
|
|
23
32
|
|
|
24
33
|
## Examples
|
|
25
34
|
|
|
26
35
|
Component containing an event button that emits `UserClickedOpenModal` when it is clicked with the
|
|
27
|
-
modalId as payload. It has a default slot to customize its contents
|
|
36
|
+
modalId as payload. It has a default slot to customize its contents and can also be fully
|
|
37
|
+
customized, replacing the default button with any other element.
|
|
28
38
|
|
|
29
39
|
### Basic example
|
|
30
40
|
|
|
31
|
-
The component rendering content passed to the default slot and opening the modal
|
|
32
|
-
`my-modal`.
|
|
41
|
+
The component rendering content passed to the default slot inside the button and opening the modal
|
|
42
|
+
with modalId `my-modal`.
|
|
33
43
|
|
|
34
44
|
```vue
|
|
35
45
|
<template>
|
|
@@ -51,9 +61,31 @@ export default {
|
|
|
51
61
|
</script>
|
|
52
62
|
```
|
|
53
63
|
|
|
54
|
-
|
|
64
|
+
### Replacing the default button
|
|
55
65
|
|
|
56
|
-
|
|
66
|
+
The component renders whatever element is passed, replacing the default button and exposing the
|
|
67
|
+
function to open the modal with modalId `my-modal`.
|
|
57
68
|
|
|
58
|
-
|
|
59
|
-
|
|
69
|
+
```vue
|
|
70
|
+
<template>
|
|
71
|
+
<BaseIdModalOpen modalId="my-modal">
|
|
72
|
+
<template #opening-element="{ openModal }">
|
|
73
|
+
<ul>
|
|
74
|
+
<li @click="openModal">Open here</li>
|
|
75
|
+
<li>Not here</li>
|
|
76
|
+
</ul>
|
|
77
|
+
</template>
|
|
78
|
+
</BaseIdModalOpen>
|
|
79
|
+
</template>
|
|
80
|
+
|
|
81
|
+
<script>
|
|
82
|
+
import { BaseIdModalOpen } from "@empathyco/x-components";
|
|
83
|
+
|
|
84
|
+
export default {
|
|
85
|
+
name: "BaseIdModalOpenTest",
|
|
86
|
+
components: {
|
|
87
|
+
BaseIdModalOpen
|
|
88
|
+
}
|
|
89
|
+
};
|
|
90
|
+
</script>
|
|
91
|
+
```
|
|
@@ -98,6 +98,16 @@ For example, if you select the search input box, the message “focus” appears
|
|
|
98
98
|
enter a search term, the message “typing” appears. If you press Enter after typing a search term,
|
|
99
99
|
the message “enter” appears.
|
|
100
100
|
|
|
101
|
+
<!-- prettier-ignore-start -->
|
|
102
|
+
:::warning X Events are only emitted from the root X Component.
|
|
103
|
+
At the moment, X Events are only emitted from the root X Component. This means that if you wrap
|
|
104
|
+
the `SearchInput` with another component of another module like the `MainScroll`, you should add
|
|
105
|
+
the listeners to the `MainScroll` instead of the `SearchInput`. If you need to subscribe to these
|
|
106
|
+
events, it is recommended to use the [`GlobalXBus`](../common/x-components.global-x-bus.md)
|
|
107
|
+
component instead.
|
|
108
|
+
:::
|
|
109
|
+
<!-- prettier-ignore-end -->
|
|
110
|
+
|
|
101
111
|
_Type any term in the input field to try it out!_
|
|
102
112
|
|
|
103
113
|
```vue live
|
|
@@ -162,3 +162,40 @@ Next, you want to configure the behavior of the `SearchInput` component. Here yo
|
|
|
162
162
|
:autocompleteSuggestionsEvent="'NextQueriesChanged'"
|
|
163
163
|
/>
|
|
164
164
|
```
|
|
165
|
+
|
|
166
|
+
**3. Listening to X Events**
|
|
167
|
+
|
|
168
|
+
For advanced use cases you might need to subscribe to certain `XEvent`. The recommended way to do so
|
|
169
|
+
is by using the `GlobalXBus` component.
|
|
170
|
+
|
|
171
|
+
In this example you are subscribing to the `UserAcceptedAQuery` event. This event is emitted both by
|
|
172
|
+
the `SearchInput` component and by the `QuerySuggestions` one.
|
|
173
|
+
|
|
174
|
+
```vue live
|
|
175
|
+
<template>
|
|
176
|
+
<div>
|
|
177
|
+
<GlobalXBus @UserAcceptedAQuery="logUserAcceptedAQuery" />
|
|
178
|
+
<SearchInput />
|
|
179
|
+
<QuerySuggestions />
|
|
180
|
+
</div>
|
|
181
|
+
</template>
|
|
182
|
+
<script>
|
|
183
|
+
import { GlobalXBus } from '@empathyco/x-components';
|
|
184
|
+
import { SearchInput } from '@empathyco/x-components/search-box';
|
|
185
|
+
import { QuerySuggestions } from '@empathyco/x-components/query-suggestions';
|
|
186
|
+
|
|
187
|
+
export default {
|
|
188
|
+
name: 'Demo',
|
|
189
|
+
components: {
|
|
190
|
+
GlobalXBus,
|
|
191
|
+
SearchInput,
|
|
192
|
+
QuerySuggestions
|
|
193
|
+
},
|
|
194
|
+
methods: {
|
|
195
|
+
logUserAcceptedAQuery(query, metadata) {
|
|
196
|
+
console.log('UserAcceptedAQuery', query, metadata);
|
|
197
|
+
}
|
|
198
|
+
}
|
|
199
|
+
};
|
|
200
|
+
</script>
|
|
201
|
+
```
|
|
@@ -11,7 +11,6 @@ var __vue_render__ = function () {
|
|
|
11
11
|
var _c = _vm._self._c || _h;
|
|
12
12
|
return _c(
|
|
13
13
|
"NoElement",
|
|
14
|
-
_vm._g({ attrs: { "data-test": "close-modal-id" } }, _vm.$listeners),
|
|
15
14
|
[
|
|
16
15
|
_vm._t(
|
|
17
16
|
"closing-element",
|
|
@@ -21,6 +20,7 @@ var __vue_render__ = function () {
|
|
|
21
20
|
"button",
|
|
22
21
|
{
|
|
23
22
|
staticClass: "x-button x-events-modal-id-close-button",
|
|
23
|
+
attrs: { "data-test": "close-modal-id" },
|
|
24
24
|
on: { click: _vm.emitCloseModalEvent },
|
|
25
25
|
},
|
|
26
26
|
[_vm._t("default")],
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"base-id-modal-close.vue.js","sources":["../../../../src/components/modals/base-id-modal-close.vue"],"sourcesContent":["<template>\n <NoElement
|
|
1
|
+
{"version":3,"file":"base-id-modal-close.vue.js","sources":["../../../../src/components/modals/base-id-modal-close.vue"],"sourcesContent":["<template>\n <NoElement>\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\n @click=\"emitCloseModalEvent\"\n class=\"x-button x-events-modal-id-close-button\"\n data-test=\"close-modal-id\"\n >\n <!-- @slot (Required) Button content with a text, an icon or both -->\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 { NoElement } from '../no-element';\n\n /**\n * Component that allows to close a modal by emitting {@link XEventsTypes.UserClickedCloseModal}.\n * It allows full customization with the 'closing-element' slot and exposes the 'closeModal'\n * function.\n *\n * @public\n */\n @Component({\n components: { NoElement }\n })\n export default class BaseIdModalClose extends Vue {\n /**\n * The modalId of the modal that will be closed.\n *\n * @public\n */\n @Prop({ required: true })\n protected modalId!: string;\n\n /**\n * Emits the {@link XEventsTypes.UserClickedCloseModal} event with the modalId as payload.\n *\n * @param event - The event triggering the function.\n * @public\n */\n protected emitCloseModalEvent({ target }: Event): void {\n this.$x.emit('UserClickedCloseModal', this.modalId, { target: target as HTMLElement });\n }\n }\n</script>\n\n<docs lang=\"mdx\">\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\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</docs>\n"],"names":[],"mappings":";;;;AAEA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
|
|
@@ -1,19 +1,24 @@
|
|
|
1
1
|
import { __decorate } from 'tslib';
|
|
2
2
|
import Vue from 'vue';
|
|
3
3
|
import { Prop, Component } from 'vue-property-decorator';
|
|
4
|
-
import __vue_component__ from '../base-event-button.vue.js';
|
|
5
4
|
import { NoElement } from '../no-element.js';
|
|
6
5
|
|
|
7
6
|
/**
|
|
8
7
|
* Component that allows to close a modal by emitting {@link XEventsTypes.UserClickedCloseModal}.
|
|
9
|
-
* It
|
|
10
|
-
*
|
|
8
|
+
* It allows full customization with the 'closing-element' slot and exposes the 'closeModal'
|
|
9
|
+
* function.
|
|
11
10
|
*
|
|
12
11
|
* @public
|
|
13
12
|
*/
|
|
14
13
|
let BaseIdModalClose = class BaseIdModalClose extends Vue {
|
|
15
|
-
|
|
16
|
-
|
|
14
|
+
/**
|
|
15
|
+
* Emits the {@link XEventsTypes.UserClickedCloseModal} event with the modalId as payload.
|
|
16
|
+
*
|
|
17
|
+
* @param event - The event triggering the function.
|
|
18
|
+
* @public
|
|
19
|
+
*/
|
|
20
|
+
emitCloseModalEvent({ target }) {
|
|
21
|
+
this.$x.emit('UserClickedCloseModal', this.modalId, { target: target });
|
|
17
22
|
}
|
|
18
23
|
};
|
|
19
24
|
__decorate([
|
|
@@ -21,7 +26,7 @@ __decorate([
|
|
|
21
26
|
], BaseIdModalClose.prototype, "modalId", void 0);
|
|
22
27
|
BaseIdModalClose = __decorate([
|
|
23
28
|
Component({
|
|
24
|
-
components: {
|
|
29
|
+
components: { NoElement }
|
|
25
30
|
})
|
|
26
31
|
], BaseIdModalClose);
|
|
27
32
|
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\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\n\n\n\n\n\nimport Vue from 'vue';\nimport { Component, Prop } from 'vue-property-decorator';\nimport { NoElement } from '../no-element';\n\n/**\n * Component that allows to close a modal by emitting {@link XEventsTypes.UserClickedCloseModal}.\n * It allows full customization with the 'closing-element' slot and exposes the 'closeModal'\n * function.\n *\n * @public\n */\n@Component({\n components: { NoElement }\n})\nexport default class BaseIdModalClose extends Vue {\n /**\n * The modalId of the modal that will be closed.\n *\n * @public\n */\n @Prop({ required: true })\n protected modalId!: string;\n\n /**\n * Emits the {@link XEventsTypes.UserClickedCloseModal} event with the modalId as payload.\n *\n * @param event - The event triggering the function.\n * @public\n */\n protected emitCloseModalEvent({ target }: Event): void {\n this.$x.emit('UserClickedCloseModal', this.modalId, { target: target as HTMLElement });\n }\n}\n"],"names":[],"mappings":";;;;;AAyBA;;;;;;;AAUA,IAAqB,gBAAgB,GAArC,MAAqB,gBAAiB,SAAQ,GAAG;;;;;;;IAerC,mBAAmB,CAAC,EAAE,MAAM,EAAS;QAC7C,IAAI,CAAC,EAAE,CAAC,IAAI,CAAC,uBAAuB,EAAE,IAAI,CAAC,OAAO,EAAE,EAAE,MAAM,EAAE,MAAqB,EAAE,CAAC,CAAC;KACxF;CACF,CAAA;AAXC;IADC,IAAI,CAAC,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC;iDACE;AAPR,gBAAgB;IAHpC,SAAS,CAAC;QACT,UAAU,EAAE,EAAE,SAAS,EAAE;KAC1B,CAAC;GACmB,gBAAgB,CAkBpC;aAlBoB,gBAAgB;;;;"}
|
|
@@ -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
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
13
|
+
"NoElement",
|
|
14
|
+
[
|
|
15
|
+
_vm._t(
|
|
16
|
+
"opening-element",
|
|
17
|
+
function () {
|
|
18
|
+
return [
|
|
19
|
+
_c(
|
|
20
|
+
"button",
|
|
21
|
+
{
|
|
22
|
+
staticClass: "x-button x-events-modal-id-open-button",
|
|
23
|
+
attrs: { "data-test": "open-modal-id" },
|
|
24
|
+
on: { click: _vm.emitOpenModalEvent },
|
|
25
|
+
},
|
|
26
|
+
[_vm._t("default")],
|
|
27
|
+
2
|
|
28
|
+
),
|
|
29
|
+
]
|
|
30
|
+
},
|
|
31
|
+
{ openModal: _vm.emitOpenModalEvent }
|
|
32
|
+
),
|
|
33
|
+
],
|
|
22
34
|
2
|
|
23
35
|
)
|
|
24
36
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"base-id-modal-open.vue.js","sources":["../../../../src/components/modals/base-id-modal-open.vue"],"sourcesContent":["<template>\n <
|
|
1
|
+
{"version":3,"file":"base-id-modal-open.vue.js","sources":["../../../../src/components/modals/base-id-modal-open.vue"],"sourcesContent":["<template>\n <NoElement>\n <!--\n @slot opening-element. It's the element that will trigger the modal opening. It's a\n button by default.\n @binding {Function} openModal - The function to open the modal.\n -->\n <slot :openModal=\"emitOpenModalEvent\" name=\"opening-element\">\n <button\n @click=\"emitOpenModalEvent\"\n class=\"x-button x-events-modal-id-open-button\"\n data-test=\"open-modal-id\"\n >\n <!-- @slot (Required) Button content with a text, an icon or both -->\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 { NoElement } from '../no-element';\n\n /**\n * Component that allows to open a modal by emitting {@link XEventsTypes.UserClickedOpenModal}\n * with the modalId as payload. It allows full customization with the 'opening-element' slot and\n * exposes the 'openModal' function.\n *\n * @public\n */\n @Component({\n components: { NoElement }\n })\n export default class BaseIdModalOpen extends Vue {\n /**\n * The modalId of the modal that will be opened.\n *\n * @public\n */\n @Prop({ required: true })\n protected modalId!: string;\n\n /**\n * Emits the {@link XEventsTypes.UserClickedOpenModal} event with the modalId as payload.\n *\n * @param event - The event triggering the function.\n * @public\n */\n protected emitOpenModalEvent({ target }: Event): void {\n this.$x.emit('UserClickedOpenModal', this.modalId, { target: target as HTMLElement });\n }\n }\n</script>\n\n<docs lang=\"mdx\">\n## Events\n\nA list of events that the component will emit:\n\n- `UserClickedOpenModal`: 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 opened.\n\n## Examples\n\nComponent containing an event button that emits `UserClickedOpenModal` when it is 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 rendering content passed to the default slot inside the button and opening the modal\nwith modalId `my-modal`.\n\n```vue\n<template>\n <BaseIdModalOpen modalId=\"my-modal\">\n <img src=\"./open-button-icon.svg\" />\n <span>Open</span>\n </BaseIdModalOpen>\n</template>\n\n<script>\n import { BaseIdModalOpen } from '@empathyco/x-components';\n\n export default {\n name: 'BaseIdModalOpenTest',\n components: {\n BaseIdModalOpen\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 open the modal with modalId `my-modal`.\n\n```vue\n<template>\n <BaseIdModalOpen modalId=\"my-modal\">\n <template #opening-element=\"{ openModal }\">\n <ul>\n <li @click=\"openModal\">Open here</li>\n <li>Not here</li>\n </ul>\n </template>\n </BaseIdModalOpen>\n</template>\n\n<script>\n import { BaseIdModalOpen } from '@empathyco/x-components';\n\n export default {\n name: 'BaseIdModalOpenTest',\n components: {\n BaseIdModalOpen\n }\n };\n</script>\n```\n</docs>\n"],"names":[],"mappings":";;;;AAEA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
|
|
@@ -1,17 +1,24 @@
|
|
|
1
1
|
import { __decorate } from 'tslib';
|
|
2
2
|
import Vue from 'vue';
|
|
3
3
|
import { Prop, Component } from 'vue-property-decorator';
|
|
4
|
-
import
|
|
4
|
+
import { NoElement } from '../no-element.js';
|
|
5
5
|
|
|
6
6
|
/**
|
|
7
|
-
* Component
|
|
8
|
-
*
|
|
7
|
+
* Component that allows to open a modal by emitting {@link XEventsTypes.UserClickedOpenModal}
|
|
8
|
+
* with the modalId as payload. It allows full customization with the 'opening-element' slot and
|
|
9
|
+
* exposes the 'openModal' function.
|
|
9
10
|
*
|
|
10
11
|
* @public
|
|
11
12
|
*/
|
|
12
13
|
let BaseIdModalOpen = class BaseIdModalOpen extends Vue {
|
|
13
|
-
|
|
14
|
-
|
|
14
|
+
/**
|
|
15
|
+
* Emits the {@link XEventsTypes.UserClickedOpenModal} event with the modalId as payload.
|
|
16
|
+
*
|
|
17
|
+
* @param event - The event triggering the function.
|
|
18
|
+
* @public
|
|
19
|
+
*/
|
|
20
|
+
emitOpenModalEvent({ target }) {
|
|
21
|
+
this.$x.emit('UserClickedOpenModal', this.modalId, { target: target });
|
|
15
22
|
}
|
|
16
23
|
};
|
|
17
24
|
__decorate([
|
|
@@ -19,7 +26,7 @@ __decorate([
|
|
|
19
26
|
], BaseIdModalOpen.prototype, "modalId", void 0);
|
|
20
27
|
BaseIdModalOpen = __decorate([
|
|
21
28
|
Component({
|
|
22
|
-
components: {
|
|
29
|
+
components: { NoElement }
|
|
23
30
|
})
|
|
24
31
|
], BaseIdModalOpen);
|
|
25
32
|
var script = BaseIdModalOpen;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"base-id-modal-open.vue_rollup-plugin-vue_script.vue.js","sources":["../../../../src/components/modals/base-id-modal-open.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-open.vue_rollup-plugin-vue_script.vue.js","sources":["../../../../src/components/modals/base-id-modal-open.vue?rollup-plugin-vue=script.ts"],"sourcesContent":["\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\nimport Vue from 'vue';\nimport { Component, Prop } from 'vue-property-decorator';\nimport { NoElement } from '../no-element';\n\n/**\n * Component that allows to open a modal by emitting {@link XEventsTypes.UserClickedOpenModal}\n * with the modalId as payload. It allows full customization with the 'opening-element' slot and\n * exposes the 'openModal' function.\n *\n * @public\n */\n@Component({\n components: { NoElement }\n})\nexport default class BaseIdModalOpen extends Vue {\n /**\n * The modalId of the modal that will be opened.\n *\n * @public\n */\n @Prop({ required: true })\n protected modalId!: string;\n\n /**\n * Emits the {@link XEventsTypes.UserClickedOpenModal} event with the modalId as payload.\n *\n * @param event - The event triggering the function.\n * @public\n */\n protected emitOpenModalEvent({ target }: Event): void {\n this.$x.emit('UserClickedOpenModal', this.modalId, { target: target as HTMLElement });\n }\n}\n"],"names":[],"mappings":";;;;;AAyBA;;;;;;;AAUA,IAAqB,eAAe,GAApC,MAAqB,eAAgB,SAAQ,GAAG;;;;;;;IAepC,kBAAkB,CAAC,EAAE,MAAM,EAAS;QAC5C,IAAI,CAAC,EAAE,CAAC,IAAI,CAAC,sBAAsB,EAAE,IAAI,CAAC,OAAO,EAAE,EAAE,MAAM,EAAE,MAAqB,EAAE,CAAC,CAAC;KACvF;CACF,CAAA;AAXC;IADC,IAAI,CAAC,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC;gDACE;AAPR,eAAe;IAHnC,SAAS,CAAC;QACT,UAAU,EAAE,EAAE,SAAS,EAAE;KAC1B,CAAC;GACmB,eAAe,CAkBnC;aAlBoB,eAAe;;;;"}
|
|
@@ -71,11 +71,11 @@ __vue_render__._withStripped = true;
|
|
|
71
71
|
/* style */
|
|
72
72
|
const __vue_inject_styles__ = function (inject) {
|
|
73
73
|
if (!inject) return
|
|
74
|
-
inject("data-v-
|
|
74
|
+
inject("data-v-5d3fc332_0", { source: ".x-search-input[data-v-5d3fc332]::-webkit-search-decoration,\n.x-search-input[data-v-5d3fc332]::-webkit-search-cancel-button,\n.x-search-input[data-v-5d3fc332]::-webkit-search-results-button,\n.x-search-input[data-v-5d3fc332]::-webkit-search-results-decoration {\n -webkit-appearance: none;\n}", map: undefined, media: undefined });
|
|
75
75
|
|
|
76
76
|
};
|
|
77
77
|
/* scoped */
|
|
78
|
-
const __vue_scope_id__ = "data-v-
|
|
78
|
+
const __vue_scope_id__ = "data-v-5d3fc332";
|
|
79
79
|
/* module identifier */
|
|
80
80
|
const __vue_module_identifier__ = undefined;
|
|
81
81
|
/* functional template */
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"search-input.vue.js","sources":["../../../../../src/x-modules/search-box/components/search-input.vue"],"sourcesContent":["<template>\n <input\n ref=\"input\"\n @blur=\"emitUserBlurredSearchBox\"\n @click=\"emitUserClickedSearchBox\"\n @focus=\"emitUserFocusedSearchBox\"\n @input=\"emitUserIsTypingAQueryEvents\"\n @keydown.enter=\"emitUserPressedEnterKey\"\n @keydown.up.down.prevent=\"emitUserPressedArrowKey\"\n v-on=\"$listeners\"\n :maxlength=\"maxLength\"\n :value=\"query\"\n autocomplete=\"off\"\n class=\"x-input x-search-input\"\n enterkeyhint=\"search\"\n inputmode=\"search\"\n type=\"search\"\n data-test=\"search-input\"\n :aria-label=\"searchInputMessage\"\n />\n</template>\n\n<script lang=\"ts\">\n import { Suggestion } from '@empathyco/x-types';\n import Vue from 'vue';\n import { Component, Prop } from 'vue-property-decorator';\n import { XOn } from '../../../components/decorators/bus.decorators';\n import { State } from '../../../components/decorators/store.decorators';\n import { xComponentMixin } from '../../../components/x-component.mixin';\n import { ArrowKey, PropsWithType } from '../../../utils';\n import { debounce } from '../../../utils/debounce';\n import { DebouncedFunction } from '../../../utils/types';\n import { XEventsTypes } from '../../../wiring/events.types';\n import { WireMetadata } from '../../../wiring/wiring.types';\n import { searchBoxXModule } from '../x-module';\n\n /**\n * This component renders an input field that allows the user to type a query. It also reacts to\n * query changes through event listening.\n *\n * @public\n */\n @Component({\n mixins: [xComponentMixin(searchBoxXModule)]\n })\n export default class SearchInput extends Vue {\n public $refs!: { input: HTMLInputElement };\n\n protected searchInputMessage = 'type your query here';\n\n /**\n * Maximum characters allowed in the input search.\n */\n @Prop({ default: 64 })\n protected maxLength!: number;\n\n /**\n * Allows input autofocus when the search field is rendered.\n */\n @Prop({ default: true })\n protected autofocus!: boolean;\n\n /**\n * Enables the auto-accept query after debounce.\n */\n @Prop({ default: true })\n protected instant!: boolean;\n\n /**\n * Debounce time for the instant.\n */\n @Prop({ default: 500 })\n protected instantDebounceInMs!: number;\n\n /**\n * Keyboard keys to accept the autocomplete suggestion.\n */\n @Prop({ default: () => ['ArrowRight'] })\n protected autocompleteKeyboardKeys!: string[]; // https://keycode.info/\n\n /**\n * Event that retrieves the autocomplete suggestion.\n */\n @Prop({ default: 'QuerySuggestionsChanged' })\n protected autocompleteSuggestionsEvent!: PropsWithType<XEventsTypes, Suggestion[]>;\n\n @State('searchBox', 'query')\n public query!: string;\n\n /**\n * When event {@link XEventsTypes.UserReachedEmpathizeTop} or\n * {@link SearchBoxXEvents.UserPressedClearSearchBoxButton}\n * are emitted the search in put is focused.\n *\n * @internal\n */\n @XOn(['UserReachedEmpathizeTop', 'UserPressedClearSearchBoxButton'])\n focusInput(): void {\n this.$refs.input?.focus();\n }\n\n protected debouncedUserAcceptedAQuery!: DebouncedFunction<[string]>;\n\n /**\n * When event {@link XEventsTypes.UserAcceptedAQuery} or\n * {@link SearchBoxXEvents.UserClearedQuery} are emitted the pending debounced emit\n * {@link XEvent} `UserAcceptedAQuery` is canceled.\n *\n * @internal\n */\n @XOn(['UserAcceptedAQuery', 'UserClearedQuery'])\n cancelDebouncedUserAcceptedAQuery(): void {\n this.debouncedUserAcceptedAQuery?.cancel();\n }\n\n mounted(): void {\n if (this.autofocus) {\n this.focusInput();\n }\n }\n\n /**\n * Emits {@link XEventsTypes.UserAcceptedAQuery} event with a debounce configured in\n * `instantDebounceInMs` prop.\n *\n * @internal\n * @param query - The query that will be emitted.\n */\n emitDebouncedUserAcceptedAQuery(query: string): void {\n if (this.instant) {\n if (!this.debouncedUserAcceptedAQuery) {\n this.debouncedUserAcceptedAQuery = debounce(\n this.emitUserAcceptedAQuery.bind(this),\n this.instantDebounceInMs\n );\n }\n this.debouncedUserAcceptedAQuery(query);\n }\n }\n\n /**\n * Generates the {@link WireMetadata | event metadata} object omitting the moduleName.\n *\n * @returns The {@link WireMetadata} object omitting the moduleName.\n * @internal\n */\n protected createEventMetadata(): Omit<WireMetadata, 'moduleName'> {\n return {\n target: this.$refs.input,\n feature: 'search_box'\n };\n }\n\n /**\n * Emits event {@link SearchBoxXEvents.UserBlurredSearchBox} when search box loses focus.\n *\n * @internal\n */\n protected emitUserBlurredSearchBox(): void {\n this.$x.emit('UserBlurredSearchBox', undefined, { target: this.$refs.input });\n }\n\n /**\n * Emits event {@link SearchBoxXEvents.UserClickedSearchBox} when user clicks the search input.\n *\n * @internal\n */\n protected emitUserClickedSearchBox(): void {\n this.$x.emit('UserClickedSearchBox', undefined, { target: this.$refs.input });\n }\n\n /**\n * Emits event {@link SearchBoxXEvents.UserFocusedSearchBox} when search box gains focus.\n *\n * @internal\n */\n protected emitUserFocusedSearchBox(): void {\n this.$x.emit('UserFocusedSearchBox', undefined, { target: this.$refs.input });\n }\n\n /**\n * Emits event {@link SearchBoxXEvents.UserIsTypingAQuery} when the user typed/pasted something\n * into the search-box. Also emits event {@link SearchBoxXEvents.UserClearedQuery} when the user\n * removes all characters in the search-box.\n *\n * @internal\n */\n protected emitUserIsTypingAQueryEvents(): void {\n const query = this.$refs.input.value;\n this.$x.emit('UserIsTypingAQuery', query, { target: this.$refs.input });\n if (query.trim()) {\n this.emitDebouncedUserAcceptedAQuery(query);\n } else {\n this.cancelDebouncedUserAcceptedAQuery();\n }\n }\n\n /**\n * Emits event {@link XEventsTypes.UserPressedArrowKey} when the user pressed an arrow key.\n *\n * @param event - The keyboard event with the arrow key pressed.\n * @internal\n */\n protected emitUserPressedArrowKey(event: KeyboardEvent): void {\n this.$x.emit('UserPressedArrowKey', event.key as ArrowKey, this.createEventMetadata());\n }\n\n /**\n * Emits multiple events when the user pressed the enter key.\n *\n * @remarks\n * Emitted events are:\n * {@link SearchBoxXEvents.UserPressedEnterKey}\n * {@link XEventsTypes.UserAcceptedAQuery}\n *\n * @internal\n */\n protected emitUserPressedEnterKey(): void {\n const query = this.$refs.input.value.trim();\n if (query.length > 0) {\n this.$x.emit('UserPressedEnterKey', query, this.createEventMetadata());\n this.emitUserAcceptedAQuery(query);\n }\n this.$refs.input?.blur();\n }\n\n /**\n * Emits {@link XEventsTypes.UserAcceptedAQuery} event.\n *\n * @remarks It is necessary in a separated method to use it as the parameter of debounce in\n * emitDebouncedUserAcceptedAQuery method.\n * @internal\n * @param query - The query that will be emitted.\n */\n protected emitUserAcceptedAQuery(query: string): void {\n this.$x.emit('UserAcceptedAQuery', query, this.createEventMetadata());\n }\n }\n</script>\n\n<style lang=\"scss\" scoped>\n .x-search-input::-webkit-search-decoration,\n .x-search-input::-webkit-search-cancel-button,\n .x-search-input::-webkit-search-results-button,\n .x-search-input::-webkit-search-results-decoration {\n -webkit-appearance: none;\n }\n</style>\n\n<docs lang=\"mdx\">\n## Events\n\nThis component emits the following events:\n\n- [`UserClickedSearchBox`](./../../api/x-components.searchboxxevents.md)\n- [`UserBlurredSearchBox`](./../../api/x-components.searchboxxevents.md)\n- [`UserFocusedSearchBox`](./../../api/x-components.searchboxxevents.md)\n- [`UserIsTypingAQuery`](./../../api/x-components.searchboxxevents.md)\n- [`UserPressedEnterKey`](./../../api/x-components.searchboxxevents.md)\n- [`UserPressedArrowKey`](./../../api/x-components.xeventstypes.md)\n- [`UserAcceptedAQuery`](./../../api/x-components.xeventstypes.md)\n\n## See it in action\n\n<!-- prettier-ignore-start -->\n:::warning Backend service required\nTo use this component, the Search service must be implemented.\n:::\n<!-- prettier-ignore-end -->\n\nHere you have a basic example of how the search input is rendered.\n\n_Type any term in the input field to try it out!_\n\n```vue live\n<template>\n <SearchInput />\n</template>\n\n<script>\n import { SearchInput } from '@empathyco/x-components/search-box';\n\n export default {\n name: 'SearchInputDemo',\n components: {\n SearchInput\n }\n };\n</script>\n```\n\n### Play with props\n\nIn this example, the search input has been limited to accept a maximum of 5 characters, including\nspaces, it won't take the focus when it is rendered, and it will emit the `UserAcceptedAQuery` event\nafter 1000 milliseconds without typing.\n\n_Type a term with more than 5 characters to try it out!_\n\n```vue live\n<template>\n <SearchInput :maxLength=\"5\" :autofocus=\"false\" :instant=\"true\" :instantDebounceInMs=\"1000\" />\n</template>\n\n<script>\n import { SearchInput } from '@empathyco/x-components/search-box';\n\n export default {\n name: 'SearchInputDemo',\n components: {\n SearchInput\n }\n };\n</script>\n```\n\n### Play with events\n\nIn this example, a message has been added below the search input to illustrate the action performed.\nFor example, if you select the search input box, the message “focus” appears. When you start to\nenter a search term, the message “typing” appears. If you press Enter after typing a search term,\nthe message “enter” appears.\n\n_Type any term in the input field to try it out!_\n\n```vue live\n<template>\n <div>\n <SearchInput\n @UserPressedEnterKey=\"value = 'enter'\"\n @UserFocusedSearchBox=\"hasFocus = true\"\n @UserBlurredSearchBox=\"hasFocus = false\"\n @UserIsTypingAQuery=\"value = 'typing'\"\n />\n <strong>{{ value }}</strong>\n <span>{{ hasFocus ? 'focused' : 'unfocused' }}</span>\n </div>\n</template>\n\n<script>\n import { SearchInput } from '@empathyco/x-components/search-box';\n\n export default {\n name: 'SearchInputDemo',\n components: {\n SearchInput\n },\n data() {\n return {\n value: '',\n hasFocus: false\n };\n }\n };\n</script>\n```\n\n## Extending the component\n\nComponents can be combined and communicate with each other. Commonly, the `SearchInput` component\ncommunicates with the [`SearchButton`](x-components.search-button.md) and the\n[`ClearSearchInput`](x-components.clear-search-input.md) to offer a full query entry experience.\nFurthermore, you can use it together with the [`QuerySuggestions`](query-suggestions.md) component\nto autocomplete the typed search term.\n\n_Type “trousers” or another fashion term in the input field and then click the clear icon to try it\nout!_\n\n```vue live\n<template>\n <div>\n <div style=\"display: flex; flex-flow: row nowrap;\">\n <SearchInput />\n <ClearSearchInput>\n <img src=\"/assets/icons/cross.svg\" />\n </ClearSearchInput>\n <SearchButton>Search</SearchButton>\n </div>\n <QuerySuggestions />\n </div>\n</template>\n\n<script>\n import { SearchInput, ClearSearchInput, SearchButton } from '@empathyco/x-components/search-box';\n import { QuerySuggestions } from '@empathyco/x-components/query-suggestions';\n\n export default {\n name: 'SearchInputDemo',\n components: {\n SearchInput,\n ClearSearchInput,\n SearchButton,\n QuerySuggestions\n }\n };\n</script>\n```\n</docs>\n"],"names":[],"mappings":";;;;;AAEA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
|
|
1
|
+
{"version":3,"file":"search-input.vue.js","sources":["../../../../../src/x-modules/search-box/components/search-input.vue"],"sourcesContent":["<template>\n <input\n ref=\"input\"\n @blur=\"emitUserBlurredSearchBox\"\n @click=\"emitUserClickedSearchBox\"\n @focus=\"emitUserFocusedSearchBox\"\n @input=\"emitUserIsTypingAQueryEvents\"\n @keydown.enter=\"emitUserPressedEnterKey\"\n @keydown.up.down.prevent=\"emitUserPressedArrowKey\"\n v-on=\"$listeners\"\n :maxlength=\"maxLength\"\n :value=\"query\"\n autocomplete=\"off\"\n class=\"x-input x-search-input\"\n enterkeyhint=\"search\"\n inputmode=\"search\"\n type=\"search\"\n data-test=\"search-input\"\n :aria-label=\"searchInputMessage\"\n />\n</template>\n\n<script lang=\"ts\">\n import { Suggestion } from '@empathyco/x-types';\n import Vue from 'vue';\n import { Component, Prop } from 'vue-property-decorator';\n import { XOn } from '../../../components/decorators/bus.decorators';\n import { State } from '../../../components/decorators/store.decorators';\n import { xComponentMixin } from '../../../components/x-component.mixin';\n import { ArrowKey, PropsWithType } from '../../../utils';\n import { debounce } from '../../../utils/debounce';\n import { DebouncedFunction } from '../../../utils/types';\n import { XEventsTypes } from '../../../wiring/events.types';\n import { WireMetadata } from '../../../wiring/wiring.types';\n import { searchBoxXModule } from '../x-module';\n\n /**\n * This component renders an input field that allows the user to type a query. It also reacts to\n * query changes through event listening.\n *\n * @public\n */\n @Component({\n mixins: [xComponentMixin(searchBoxXModule)]\n })\n export default class SearchInput extends Vue {\n public $refs!: { input: HTMLInputElement };\n\n protected searchInputMessage = 'type your query here';\n\n /**\n * Maximum characters allowed in the input search.\n */\n @Prop({ default: 64 })\n protected maxLength!: number;\n\n /**\n * Allows input autofocus when the search field is rendered.\n */\n @Prop({ default: true })\n protected autofocus!: boolean;\n\n /**\n * Enables the auto-accept query after debounce.\n */\n @Prop({ default: true })\n protected instant!: boolean;\n\n /**\n * Debounce time for the instant.\n */\n @Prop({ default: 500 })\n protected instantDebounceInMs!: number;\n\n /**\n * Keyboard keys to accept the autocomplete suggestion.\n */\n @Prop({ default: () => ['ArrowRight'] })\n protected autocompleteKeyboardKeys!: string[]; // https://keycode.info/\n\n /**\n * Event that retrieves the autocomplete suggestion.\n */\n @Prop({ default: 'QuerySuggestionsChanged' })\n protected autocompleteSuggestionsEvent!: PropsWithType<XEventsTypes, Suggestion[]>;\n\n @State('searchBox', 'query')\n public query!: string;\n\n /**\n * When event {@link XEventsTypes.UserReachedEmpathizeTop} or\n * {@link SearchBoxXEvents.UserPressedClearSearchBoxButton}\n * are emitted the search in put is focused.\n *\n * @internal\n */\n @XOn(['UserReachedEmpathizeTop', 'UserPressedClearSearchBoxButton'])\n focusInput(): void {\n this.$refs.input?.focus();\n }\n\n protected debouncedUserAcceptedAQuery!: DebouncedFunction<[string]>;\n\n /**\n * When event {@link XEventsTypes.UserAcceptedAQuery} or\n * {@link SearchBoxXEvents.UserClearedQuery} are emitted the pending debounced emit\n * {@link XEvent} `UserAcceptedAQuery` is canceled.\n *\n * @internal\n */\n @XOn(['UserAcceptedAQuery', 'UserClearedQuery'])\n cancelDebouncedUserAcceptedAQuery(): void {\n this.debouncedUserAcceptedAQuery?.cancel();\n }\n\n mounted(): void {\n if (this.autofocus) {\n this.focusInput();\n }\n }\n\n /**\n * Emits {@link XEventsTypes.UserAcceptedAQuery} event with a debounce configured in\n * `instantDebounceInMs` prop.\n *\n * @internal\n * @param query - The query that will be emitted.\n */\n emitDebouncedUserAcceptedAQuery(query: string): void {\n if (this.instant) {\n if (!this.debouncedUserAcceptedAQuery) {\n this.debouncedUserAcceptedAQuery = debounce(\n this.emitUserAcceptedAQuery.bind(this),\n this.instantDebounceInMs\n );\n }\n this.debouncedUserAcceptedAQuery(query);\n }\n }\n\n /**\n * Generates the {@link WireMetadata | event metadata} object omitting the moduleName.\n *\n * @returns The {@link WireMetadata} object omitting the moduleName.\n * @internal\n */\n protected createEventMetadata(): Omit<WireMetadata, 'moduleName'> {\n return {\n target: this.$refs.input,\n feature: 'search_box'\n };\n }\n\n /**\n * Emits event {@link SearchBoxXEvents.UserBlurredSearchBox} when search box loses focus.\n *\n * @internal\n */\n protected emitUserBlurredSearchBox(): void {\n this.$x.emit('UserBlurredSearchBox', undefined, { target: this.$refs.input });\n }\n\n /**\n * Emits event {@link SearchBoxXEvents.UserClickedSearchBox} when user clicks the search input.\n *\n * @internal\n */\n protected emitUserClickedSearchBox(): void {\n this.$x.emit('UserClickedSearchBox', undefined, { target: this.$refs.input });\n }\n\n /**\n * Emits event {@link SearchBoxXEvents.UserFocusedSearchBox} when search box gains focus.\n *\n * @internal\n */\n protected emitUserFocusedSearchBox(): void {\n this.$x.emit('UserFocusedSearchBox', undefined, { target: this.$refs.input });\n }\n\n /**\n * Emits event {@link SearchBoxXEvents.UserIsTypingAQuery} when the user typed/pasted something\n * into the search-box. Also emits event {@link SearchBoxXEvents.UserClearedQuery} when the user\n * removes all characters in the search-box.\n *\n * @internal\n */\n protected emitUserIsTypingAQueryEvents(): void {\n const query = this.$refs.input.value;\n this.$x.emit('UserIsTypingAQuery', query, { target: this.$refs.input });\n if (query.trim()) {\n this.emitDebouncedUserAcceptedAQuery(query);\n } else {\n this.cancelDebouncedUserAcceptedAQuery();\n }\n }\n\n /**\n * Emits event {@link XEventsTypes.UserPressedArrowKey} when the user pressed an arrow key.\n *\n * @param event - The keyboard event with the arrow key pressed.\n * @internal\n */\n protected emitUserPressedArrowKey(event: KeyboardEvent): void {\n this.$x.emit('UserPressedArrowKey', event.key as ArrowKey, this.createEventMetadata());\n }\n\n /**\n * Emits multiple events when the user pressed the enter key.\n *\n * @remarks\n * Emitted events are:\n * {@link SearchBoxXEvents.UserPressedEnterKey}\n * {@link XEventsTypes.UserAcceptedAQuery}\n *\n * @internal\n */\n protected emitUserPressedEnterKey(): void {\n const query = this.$refs.input.value.trim();\n if (query.length > 0) {\n this.$x.emit('UserPressedEnterKey', query, this.createEventMetadata());\n this.emitUserAcceptedAQuery(query);\n }\n this.$refs.input?.blur();\n }\n\n /**\n * Emits {@link XEventsTypes.UserAcceptedAQuery} event.\n *\n * @remarks It is necessary in a separated method to use it as the parameter of debounce in\n * emitDebouncedUserAcceptedAQuery method.\n * @internal\n * @param query - The query that will be emitted.\n */\n protected emitUserAcceptedAQuery(query: string): void {\n this.$x.emit('UserAcceptedAQuery', query, this.createEventMetadata());\n }\n }\n</script>\n\n<style lang=\"scss\" scoped>\n .x-search-input::-webkit-search-decoration,\n .x-search-input::-webkit-search-cancel-button,\n .x-search-input::-webkit-search-results-button,\n .x-search-input::-webkit-search-results-decoration {\n -webkit-appearance: none;\n }\n</style>\n\n<docs lang=\"mdx\">\n## Events\n\nThis component emits the following events:\n\n- [`UserClickedSearchBox`](./../../api/x-components.searchboxxevents.md)\n- [`UserBlurredSearchBox`](./../../api/x-components.searchboxxevents.md)\n- [`UserFocusedSearchBox`](./../../api/x-components.searchboxxevents.md)\n- [`UserIsTypingAQuery`](./../../api/x-components.searchboxxevents.md)\n- [`UserPressedEnterKey`](./../../api/x-components.searchboxxevents.md)\n- [`UserPressedArrowKey`](./../../api/x-components.xeventstypes.md)\n- [`UserAcceptedAQuery`](./../../api/x-components.xeventstypes.md)\n\n## See it in action\n\n<!-- prettier-ignore-start -->\n:::warning Backend service required\nTo use this component, the Search service must be implemented.\n:::\n<!-- prettier-ignore-end -->\n\nHere you have a basic example of how the search input is rendered.\n\n_Type any term in the input field to try it out!_\n\n```vue live\n<template>\n <SearchInput />\n</template>\n\n<script>\n import { SearchInput } from '@empathyco/x-components/search-box';\n\n export default {\n name: 'SearchInputDemo',\n components: {\n SearchInput\n }\n };\n</script>\n```\n\n### Play with props\n\nIn this example, the search input has been limited to accept a maximum of 5 characters, including\nspaces, it won't take the focus when it is rendered, and it will emit the `UserAcceptedAQuery` event\nafter 1000 milliseconds without typing.\n\n_Type a term with more than 5 characters to try it out!_\n\n```vue live\n<template>\n <SearchInput :maxLength=\"5\" :autofocus=\"false\" :instant=\"true\" :instantDebounceInMs=\"1000\" />\n</template>\n\n<script>\n import { SearchInput } from '@empathyco/x-components/search-box';\n\n export default {\n name: 'SearchInputDemo',\n components: {\n SearchInput\n }\n };\n</script>\n```\n\n### Play with events\n\nIn this example, a message has been added below the search input to illustrate the action performed.\nFor example, if you select the search input box, the message “focus” appears. When you start to\nenter a search term, the message “typing” appears. If you press Enter after typing a search term,\nthe message “enter” appears.\n\n<!-- prettier-ignore-start -->\n:::warning X Events are only emitted from the root X Component.\nAt the moment, X Events are only emitted from the root X Component. This means that if you wrap\nthe `SearchInput` with another component of another module like the `MainScroll`, you should add\nthe listeners to the `MainScroll` instead of the `SearchInput`. If you need to subscribe to these\nevents, it is recommended to use the [`GlobalXBus`](../common/x-components.global-x-bus.md)\ncomponent instead.\n:::\n<!-- prettier-ignore-end -->\n\n_Type any term in the input field to try it out!_\n\n```vue live\n<template>\n <div>\n <SearchInput\n @UserPressedEnterKey=\"value = 'enter'\"\n @UserFocusedSearchBox=\"hasFocus = true\"\n @UserBlurredSearchBox=\"hasFocus = false\"\n @UserIsTypingAQuery=\"value = 'typing'\"\n />\n <strong>{{ value }}</strong>\n <span>{{ hasFocus ? 'focused' : 'unfocused' }}</span>\n </div>\n</template>\n\n<script>\n import { SearchInput } from '@empathyco/x-components/search-box';\n\n export default {\n name: 'SearchInputDemo',\n components: {\n SearchInput\n },\n data() {\n return {\n value: '',\n hasFocus: false\n };\n }\n };\n</script>\n```\n\n## Extending the component\n\nComponents can be combined and communicate with each other. Commonly, the `SearchInput` component\ncommunicates with the [`SearchButton`](x-components.search-button.md) and the\n[`ClearSearchInput`](x-components.clear-search-input.md) to offer a full query entry experience.\nFurthermore, you can use it together with the [`QuerySuggestions`](query-suggestions.md) component\nto autocomplete the typed search term.\n\n_Type “trousers” or another fashion term in the input field and then click the clear icon to try it\nout!_\n\n```vue live\n<template>\n <div>\n <div style=\"display: flex; flex-flow: row nowrap;\">\n <SearchInput />\n <ClearSearchInput>\n <img src=\"/assets/icons/cross.svg\" />\n </ClearSearchInput>\n <SearchButton>Search</SearchButton>\n </div>\n <QuerySuggestions />\n </div>\n</template>\n\n<script>\n import { SearchInput, ClearSearchInput, SearchButton } from '@empathyco/x-components/search-box';\n import { QuerySuggestions } from '@empathyco/x-components/query-suggestions';\n\n export default {\n name: 'SearchInputDemo',\n components: {\n SearchInput,\n ClearSearchInput,\n SearchButton,\n QuerySuggestions\n }\n };\n</script>\n```\n</docs>\n"],"names":[],"mappings":";;;;;AAEA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
|
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.151",
|
|
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": "083e19ea7652b512e0cc82553ab98021751cef75"
|
|
129
129
|
}
|
|
@@ -3702,7 +3702,7 @@
|
|
|
3702
3702
|
{
|
|
3703
3703
|
"kind": "Class",
|
|
3704
3704
|
"canonicalReference": "@empathyco/x-components!BaseIdModalClose:class",
|
|
3705
|
-
"docComment": "/**\n * Component that allows to close a modal by emitting {@link XEventsTypes.UserClickedCloseModal}. It
|
|
3705
|
+
"docComment": "/**\n * Component that allows to close a modal by emitting {@link XEventsTypes.UserClickedCloseModal}. It allows full customization with the 'closing-element' slot and exposes the 'closeModal' function.\n *\n * @public\n */\n",
|
|
3706
3706
|
"excerptTokens": [
|
|
3707
3707
|
{
|
|
3708
3708
|
"kind": "Content",
|
|
@@ -3724,11 +3724,20 @@
|
|
|
3724
3724
|
{
|
|
3725
3725
|
"kind": "Method",
|
|
3726
3726
|
"canonicalReference": "@empathyco/x-components!BaseIdModalClose#emitCloseModalEvent:member(1)",
|
|
3727
|
-
"docComment": "",
|
|
3727
|
+
"docComment": "/**\n * Emits the {@link XEventsTypes.UserClickedCloseModal} event with the modalId as payload.\n *\n * @param event - The event triggering the function.\n *\n * @public\n */\n",
|
|
3728
3728
|
"excerptTokens": [
|
|
3729
3729
|
{
|
|
3730
3730
|
"kind": "Content",
|
|
3731
|
-
"text": "protected emitCloseModalEvent(
|
|
3731
|
+
"text": "protected emitCloseModalEvent({ target }: "
|
|
3732
|
+
},
|
|
3733
|
+
{
|
|
3734
|
+
"kind": "Reference",
|
|
3735
|
+
"text": "Event",
|
|
3736
|
+
"canonicalReference": "!Event:interface"
|
|
3737
|
+
},
|
|
3738
|
+
{
|
|
3739
|
+
"kind": "Content",
|
|
3740
|
+
"text": "): "
|
|
3732
3741
|
},
|
|
3733
3742
|
{
|
|
3734
3743
|
"kind": "Content",
|
|
@@ -3742,18 +3751,26 @@
|
|
|
3742
3751
|
"isOptional": false,
|
|
3743
3752
|
"isStatic": false,
|
|
3744
3753
|
"returnTypeTokenRange": {
|
|
3745
|
-
"startIndex":
|
|
3746
|
-
"endIndex":
|
|
3754
|
+
"startIndex": 3,
|
|
3755
|
+
"endIndex": 4
|
|
3747
3756
|
},
|
|
3748
3757
|
"releaseTag": "Public",
|
|
3749
3758
|
"overloadIndex": 1,
|
|
3750
|
-
"parameters": [
|
|
3759
|
+
"parameters": [
|
|
3760
|
+
{
|
|
3761
|
+
"parameterName": "{ target }",
|
|
3762
|
+
"parameterTypeTokenRange": {
|
|
3763
|
+
"startIndex": 1,
|
|
3764
|
+
"endIndex": 2
|
|
3765
|
+
}
|
|
3766
|
+
}
|
|
3767
|
+
],
|
|
3751
3768
|
"name": "emitCloseModalEvent"
|
|
3752
3769
|
},
|
|
3753
3770
|
{
|
|
3754
3771
|
"kind": "Property",
|
|
3755
3772
|
"canonicalReference": "@empathyco/x-components!BaseIdModalClose#modalId:member",
|
|
3756
|
-
"docComment": "",
|
|
3773
|
+
"docComment": "/**\n * The modalId of the modal that will be closed.\n *\n * @public\n */\n",
|
|
3757
3774
|
"excerptTokens": [
|
|
3758
3775
|
{
|
|
3759
3776
|
"kind": "Content",
|
|
@@ -3787,7 +3804,7 @@
|
|
|
3787
3804
|
{
|
|
3788
3805
|
"kind": "Class",
|
|
3789
3806
|
"canonicalReference": "@empathyco/x-components!BaseIdModalOpen:class",
|
|
3790
|
-
"docComment": "/**\n * Component
|
|
3807
|
+
"docComment": "/**\n * Component that allows to open a modal by emitting {@link XEventsTypes.UserClickedOpenModal} with the modalId as payload. It allows full customization with the 'opening-element' slot and exposes the 'openModal' function.\n *\n * @public\n */\n",
|
|
3791
3808
|
"excerptTokens": [
|
|
3792
3809
|
{
|
|
3793
3810
|
"kind": "Content",
|
|
@@ -3807,31 +3824,26 @@
|
|
|
3807
3824
|
"name": "BaseIdModalOpen",
|
|
3808
3825
|
"members": [
|
|
3809
3826
|
{
|
|
3810
|
-
"kind": "
|
|
3811
|
-
"canonicalReference": "@empathyco/x-components!BaseIdModalOpen#
|
|
3812
|
-
"docComment": "",
|
|
3827
|
+
"kind": "Method",
|
|
3828
|
+
"canonicalReference": "@empathyco/x-components!BaseIdModalOpen#emitOpenModalEvent:member(1)",
|
|
3829
|
+
"docComment": "/**\n * Emits the {@link XEventsTypes.UserClickedOpenModal} event with the modalId as payload.\n *\n * @param event - The event triggering the function.\n *\n * @public\n */\n",
|
|
3813
3830
|
"excerptTokens": [
|
|
3814
3831
|
{
|
|
3815
3832
|
"kind": "Content",
|
|
3816
|
-
"text": "protected
|
|
3833
|
+
"text": "protected emitOpenModalEvent({ target }: "
|
|
3817
3834
|
},
|
|
3818
3835
|
{
|
|
3819
3836
|
"kind": "Reference",
|
|
3820
|
-
"text": "
|
|
3821
|
-
"canonicalReference": "!
|
|
3837
|
+
"text": "Event",
|
|
3838
|
+
"canonicalReference": "!Event:interface"
|
|
3822
3839
|
},
|
|
3823
3840
|
{
|
|
3824
3841
|
"kind": "Content",
|
|
3825
|
-
"text": "
|
|
3826
|
-
},
|
|
3827
|
-
{
|
|
3828
|
-
"kind": "Reference",
|
|
3829
|
-
"text": "XEventsTypes",
|
|
3830
|
-
"canonicalReference": "@empathyco/x-components!XEventsTypes:interface"
|
|
3842
|
+
"text": "): "
|
|
3831
3843
|
},
|
|
3832
3844
|
{
|
|
3833
3845
|
"kind": "Content",
|
|
3834
|
-
"text": "
|
|
3846
|
+
"text": "void"
|
|
3835
3847
|
},
|
|
3836
3848
|
{
|
|
3837
3849
|
"kind": "Content",
|
|
@@ -3839,18 +3851,28 @@
|
|
|
3839
3851
|
}
|
|
3840
3852
|
],
|
|
3841
3853
|
"isOptional": false,
|
|
3842
|
-
"
|
|
3843
|
-
"
|
|
3844
|
-
|
|
3845
|
-
"
|
|
3846
|
-
"endIndex": 5
|
|
3854
|
+
"isStatic": false,
|
|
3855
|
+
"returnTypeTokenRange": {
|
|
3856
|
+
"startIndex": 3,
|
|
3857
|
+
"endIndex": 4
|
|
3847
3858
|
},
|
|
3848
|
-
"
|
|
3859
|
+
"releaseTag": "Public",
|
|
3860
|
+
"overloadIndex": 1,
|
|
3861
|
+
"parameters": [
|
|
3862
|
+
{
|
|
3863
|
+
"parameterName": "{ target }",
|
|
3864
|
+
"parameterTypeTokenRange": {
|
|
3865
|
+
"startIndex": 1,
|
|
3866
|
+
"endIndex": 2
|
|
3867
|
+
}
|
|
3868
|
+
}
|
|
3869
|
+
],
|
|
3870
|
+
"name": "emitOpenModalEvent"
|
|
3849
3871
|
},
|
|
3850
3872
|
{
|
|
3851
3873
|
"kind": "Property",
|
|
3852
3874
|
"canonicalReference": "@empathyco/x-components!BaseIdModalOpen#modalId:member",
|
|
3853
|
-
"docComment": "",
|
|
3875
|
+
"docComment": "/**\n * The modalId of the modal that will be opened.\n *\n * @public\n */\n",
|
|
3854
3876
|
"excerptTokens": [
|
|
3855
3877
|
{
|
|
3856
3878
|
"kind": "Content",
|
|
@@ -384,17 +384,13 @@ export class BaseIdModal extends Vue_2 {
|
|
|
384
384
|
|
|
385
385
|
// @public
|
|
386
386
|
export class BaseIdModalClose extends Vue_2 {
|
|
387
|
-
|
|
388
|
-
protected emitCloseModalEvent(): void;
|
|
389
|
-
// (undocumented)
|
|
387
|
+
protected emitCloseModalEvent({ target }: Event): void;
|
|
390
388
|
protected modalId: string;
|
|
391
389
|
}
|
|
392
390
|
|
|
393
391
|
// @public
|
|
394
392
|
export class BaseIdModalOpen extends Vue_2 {
|
|
395
|
-
|
|
396
|
-
protected get events(): Partial<XEventsTypes>;
|
|
397
|
-
// (undocumented)
|
|
393
|
+
protected emitOpenModalEvent({ target }: Event): void;
|
|
398
394
|
protected modalId: string;
|
|
399
395
|
}
|
|
400
396
|
|
|
@@ -1,13 +1,24 @@
|
|
|
1
1
|
import Vue from 'vue';
|
|
2
2
|
/**
|
|
3
3
|
* Component that allows to close a modal by emitting {@link XEventsTypes.UserClickedCloseModal}.
|
|
4
|
-
* It
|
|
5
|
-
*
|
|
4
|
+
* It allows full customization with the 'closing-element' slot and exposes the 'closeModal'
|
|
5
|
+
* function.
|
|
6
6
|
*
|
|
7
7
|
* @public
|
|
8
8
|
*/
|
|
9
9
|
export default class BaseIdModalClose extends Vue {
|
|
10
|
+
/**
|
|
11
|
+
* The modalId of the modal that will be closed.
|
|
12
|
+
*
|
|
13
|
+
* @public
|
|
14
|
+
*/
|
|
10
15
|
protected modalId: string;
|
|
11
|
-
|
|
16
|
+
/**
|
|
17
|
+
* Emits the {@link XEventsTypes.UserClickedCloseModal} event with the modalId as payload.
|
|
18
|
+
*
|
|
19
|
+
* @param event - The event triggering the function.
|
|
20
|
+
* @public
|
|
21
|
+
*/
|
|
22
|
+
protected emitCloseModalEvent({ target }: Event): void;
|
|
12
23
|
}
|
|
13
24
|
//# 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":"AAqBA,OAAO,GAAG,MAAM,KAAK,CAAC;AAItB;;;;;;GAMG;AAIH,MAAM,CAAC,OAAO,OAAO,gBAAiB,SAAQ,GAAG;IAC/C;;;;OAIG;IAEH,SAAS,CAAC,OAAO,EAAG,MAAM,CAAC;IAE3B;;;;;OAKG;IACH,SAAS,CAAC,mBAAmB,CAAC,EAAE,MAAM,EAAE,EAAE,KAAK,GAAG,IAAI;CAGvD"}
|
|
@@ -1,13 +1,24 @@
|
|
|
1
1
|
import Vue from 'vue';
|
|
2
|
-
import { XEventsTypes } from '../../wiring/events.types';
|
|
3
2
|
/**
|
|
4
|
-
* Component
|
|
5
|
-
*
|
|
3
|
+
* Component that allows to open a modal by emitting {@link XEventsTypes.UserClickedOpenModal}
|
|
4
|
+
* with the modalId as payload. It allows full customization with the 'opening-element' slot and
|
|
5
|
+
* exposes the 'openModal' function.
|
|
6
6
|
*
|
|
7
7
|
* @public
|
|
8
8
|
*/
|
|
9
9
|
export default class BaseIdModalOpen extends Vue {
|
|
10
|
+
/**
|
|
11
|
+
* The modalId of the modal that will be opened.
|
|
12
|
+
*
|
|
13
|
+
* @public
|
|
14
|
+
*/
|
|
10
15
|
protected modalId: string;
|
|
11
|
-
|
|
16
|
+
/**
|
|
17
|
+
* Emits the {@link XEventsTypes.UserClickedOpenModal} event with the modalId as payload.
|
|
18
|
+
*
|
|
19
|
+
* @param event - The event triggering the function.
|
|
20
|
+
* @public
|
|
21
|
+
*/
|
|
22
|
+
protected emitOpenModalEvent({ target }: Event): void;
|
|
12
23
|
}
|
|
13
24
|
//# sourceMappingURL=base-id-modal-open.vue?rollup-plugin-vue=script.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"base-id-modal-open.vue?rollup-plugin-vue=script.d.ts","sourceRoot":"","sources":["../../../../src/components/modals/base-id-modal-open.vue?rollup-plugin-vue=script.ts"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"base-id-modal-open.vue?rollup-plugin-vue=script.d.ts","sourceRoot":"","sources":["../../../../src/components/modals/base-id-modal-open.vue?rollup-plugin-vue=script.ts"],"names":[],"mappings":"AAqBA,OAAO,GAAG,MAAM,KAAK,CAAC;AAItB;;;;;;GAMG;AAIH,MAAM,CAAC,OAAO,OAAO,eAAgB,SAAQ,GAAG;IAC9C;;;;OAIG;IAEH,SAAS,CAAC,OAAO,EAAG,MAAM,CAAC;IAE3B;;;;;OAKG;IACH,SAAS,CAAC,kBAAkB,CAAC,EAAE,MAAM,EAAE,EAAE,KAAK,GAAG,IAAI;CAGtD"}
|
|
@@ -1,11 +0,0 @@
|
|
|
1
|
-
<!-- Do not edit this file. It is automatically generated by API Documenter. -->
|
|
2
|
-
|
|
3
|
-
[Home](./index.md) > [@empathyco/x-components](./x-components.md) > [BaseIdModalOpen](./x-components.baseidmodalopen.md) > [events](./x-components.baseidmodalopen.events.md)
|
|
4
|
-
|
|
5
|
-
## BaseIdModalOpen.events property
|
|
6
|
-
|
|
7
|
-
<b>Signature:</b>
|
|
8
|
-
|
|
9
|
-
```typescript
|
|
10
|
-
protected get events(): Partial<XEventsTypes>;
|
|
11
|
-
```
|