@empathyco/x-components 3.0.0-alpha.220 → 3.0.0-alpha.221

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (29) hide show
  1. package/CHANGELOG.md +12 -0
  2. package/design-system/full-theme.css +171 -171
  3. package/docs/API-reference/api/x-components.basemodal._refs.md +1 -0
  4. package/docs/API-reference/api/x-components.basemodal.md +3 -1
  5. package/docs/API-reference/api/x-components.basemodal.referenceelement.md +13 -0
  6. package/docs/API-reference/api/x-components.basemodal.referenceselector.md +13 -0
  7. package/docs/API-reference/components/common/modals/x-components.base-modal.md +12 -8
  8. package/js/components/modals/base-events-modal.vue.js +11 -6
  9. package/js/components/modals/base-events-modal.vue.js.map +1 -1
  10. package/js/components/modals/base-events-modal.vue_rollup-plugin-vue_script.vue.js.map +1 -1
  11. package/js/components/modals/base-id-modal.vue.js +11 -6
  12. package/js/components/modals/base-id-modal.vue.js.map +1 -1
  13. package/js/components/modals/base-id-modal.vue_rollup-plugin-vue_script.vue.js.map +1 -1
  14. package/js/components/modals/base-modal.vue.js +3 -2
  15. package/js/components/modals/base-modal.vue.js.map +1 -1
  16. package/js/components/modals/base-modal.vue_rollup-plugin-vue_script.vue.js +44 -5
  17. package/js/components/modals/base-modal.vue_rollup-plugin-vue_script.vue.js.map +1 -1
  18. package/js/components/modals/base-modal.vue_rollup-plugin-vue_styles.0.vue.js +1 -1
  19. package/js/components/modals/main-modal.vue.js +14 -9
  20. package/js/components/modals/main-modal.vue.js.map +1 -1
  21. package/js/components/modals/main-modal.vue_rollup-plugin-vue_script.vue.js.map +1 -1
  22. package/package.json +2 -2
  23. package/report/x-components.api.json +65 -1
  24. package/report/x-components.api.md +5 -0
  25. package/types/components/modals/base-events-modal.vue.d.ts.map +1 -1
  26. package/types/components/modals/base-id-modal.vue.d.ts.map +1 -1
  27. package/types/components/modals/base-modal.vue.d.ts +33 -3
  28. package/types/components/modals/base-modal.vue.d.ts.map +1 -1
  29. package/types/components/modals/main-modal.vue.d.ts.map +1 -1
package/CHANGELOG.md CHANGED
@@ -3,6 +3,18 @@
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.221](https://github.com/empathyco/x/compare/@empathyco/x-components@3.0.0-alpha.220...@empathyco/x-components@3.0.0-alpha.221) (2022-11-10)
7
+
8
+ ### Features
9
+
10
+ - place modal under selected element (#829)
11
+ ([1f46d42](https://github.com/empathyco/x/commit/1f46d428dccdf4807110afc48b5fd600b41bfeae))
12
+
13
+ # Change Log
14
+
15
+ All notable changes to this project will be documented in this file. See
16
+ [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
17
+
6
18
  ## [3.0.0-alpha.220](https://github.com/empathyco/x/compare/@empathyco/x-components@3.0.0-alpha.219...@empathyco/x-components@3.0.0-alpha.220) (2022-11-09)
7
19
 
8
20
  ### Features
package/design-system/full-theme.css CHANGED
@@ -142,6 +142,174 @@
142
142
  --x-size-border-width-bottom-dropdown-list-card: var(--x-size-border-width-dropdown-list-card);
143
143
  --x-size-border-width-left-dropdown-list-card: var(--x-size-border-width-dropdown-list-card);
144
144
  }
145
+ .x-dropdown {
146
+ box-sizing: border-box;
147
+ position: relative;
148
+ font-size: var(--x-size-font-dropdown-default);
149
+ font-family: var(--x-font-family-dropdown-default);
150
+ font-weight: var(--x-number-font-weight-dropdown-default);
151
+ line-height: var(--x-size-line-height-dropdown-default);
152
+ }
153
+ [dir="ltr"] .x-dropdown__toggle {
154
+ border-right-width: var(--x-size-border-width-right-dropdown-toggle-default);
155
+ }
156
+ [dir="rtl"] .x-dropdown__toggle {
157
+ border-left-width: var(--x-size-border-width-right-dropdown-toggle-default);
158
+ }
159
+ [dir="ltr"] .x-dropdown__toggle {
160
+ border-left-width: var(--x-size-border-width-left-dropdown-toggle-default);
161
+ }
162
+ [dir="rtl"] .x-dropdown__toggle {
163
+ border-right-width: var(--x-size-border-width-left-dropdown-toggle-default);
164
+ }
165
+ [dir="ltr"] .x-dropdown__toggle {
166
+ padding-right: var(--x-size-padding-right-dropdown-toggle-default);
167
+ }
168
+ [dir="rtl"] .x-dropdown__toggle {
169
+ padding-left: var(--x-size-padding-right-dropdown-toggle-default);
170
+ }
171
+ [dir="ltr"] .x-dropdown__toggle {
172
+ padding-left: var(--x-size-padding-left-dropdown-toggle-default);
173
+ }
174
+ [dir="rtl"] .x-dropdown__toggle {
175
+ padding-right: var(--x-size-padding-left-dropdown-toggle-default);
176
+ }
177
+ .x-dropdown__toggle {
178
+ border-style: solid;
179
+ border-top-width: var(--x-size-border-width-top-dropdown-toggle-default);
180
+ border-bottom-width: var(--x-size-border-width-bottom-dropdown-toggle-default);
181
+ border-radius: var(--x-size-border-radius-top-left-dropdown-default) var(--x-size-border-radius-top-right-dropdown-default) var(--x-size-border-radius-bottom-right-dropdown-default) var(--x-size-border-radius-bottom-left-dropdown-default);
182
+ background: var(--x-color-background-dropdown-toggle-default);
183
+ color: var(--x-color-text-dropdown-toggle-default);
184
+ border-color: var(--x-color-border-dropdown-toggle-default);
185
+ padding-top: var(--x-size-padding-top-dropdown-toggle-default);
186
+ padding-bottom: var(--x-size-padding-bottom-dropdown-toggle-default);
187
+ gap: var(--x-size-gap-dropdown-item-default);
188
+ width: var(--x-size-width-dropdown-toggle-default);
189
+ display: flex;
190
+ flex-flow: row nowrap;
191
+ margin: 0;
192
+ cursor: pointer;
193
+ overflow: var(--x-string-overflow-dropdown-toggle-default);
194
+ box-shadow: var(--x-string-box-shadow-dropdown-default);
195
+ }
196
+ @media not all and (-webkit-min-device-pixel-ratio: 0), not all and (min-resolution: 0.001dpcm) {
197
+ .x-dropdown__toggle {
198
+ gap: 0;
199
+ }
200
+ .x-dropdown__toggle > *:not(:last-child) {
201
+ margin-right: var(--x-size-gap-dropdown-item-default);
202
+ }
203
+ }
204
+ [dir="ltr"] .x-dropdown__toggle * + .x-icon:last-child {
205
+ margin-left: auto;
206
+ }
207
+ [dir="rtl"] .x-dropdown__toggle * + .x-icon:last-child {
208
+ margin-right: auto;
209
+ }
210
+ .x-dropdown__toggle-selected-value {
211
+ color: var(--x-color-text-dropdown-toggle-default-selected);
212
+ }
213
+ [dir="ltr"] .x-dropdown__items-list {
214
+ border-right-width: var(--x-size-border-width-right-dropdown-list-default);
215
+ }
216
+ [dir="rtl"] .x-dropdown__items-list {
217
+ border-left-width: var(--x-size-border-width-right-dropdown-list-default);
218
+ }
219
+ [dir="ltr"] .x-dropdown__items-list {
220
+ border-left-width: var(--x-size-border-width-left-dropdown-list-default);
221
+ }
222
+ [dir="rtl"] .x-dropdown__items-list {
223
+ border-right-width: var(--x-size-border-width-left-dropdown-list-default);
224
+ }
225
+ .x-dropdown__items-list {
226
+ background: var(--x-color-background-dropdown-default);
227
+ box-sizing: border-box;
228
+ min-width: var(--x-size-min-width-dropdown-list-default);
229
+ position: absolute;
230
+ top: calc(100% + var(--x-size-gap-dropdown-default));
231
+ overflow: var(--x-string-overflow-dropdown-list-default);
232
+ border-color: var(--x-color-border-dropdown-list-default);
233
+ border-top-width: var(--x-size-border-width-top-dropdown-list-default);
234
+ border-bottom-width: var(--x-size-border-width-bottom-dropdown-list-default);
235
+ border-radius: var(--x-size-border-radius-top-left-dropdown-default) var(--x-size-border-radius-top-right-dropdown-default) var(--x-size-border-radius-bottom-right-dropdown-default) var(--x-size-border-radius-bottom-left-dropdown-default);
236
+ border-style: solid;
237
+ margin: 0;
238
+ padding: 0;
239
+ box-shadow: var(--x-string-box-shadow-dropdown-default);
240
+ z-index: 1;
241
+ }
242
+ .x-dropdown__items-list:before, .x-dropdown__items-list:after {
243
+ content: "";
244
+ display: block;
245
+ height: var(--x-size-padding-vertical-dropdown-list-default);
246
+ }
247
+ [dir="ltr"] .x-dropdown__item {
248
+ padding-left: var(--x-size-padding-left-dropdown-item-default);
249
+ }
250
+ [dir="rtl"] .x-dropdown__item {
251
+ padding-right: var(--x-size-padding-left-dropdown-item-default);
252
+ }
253
+ [dir="ltr"] .x-dropdown__item {
254
+ padding-right: var(--x-size-padding-right-dropdown-item-default);
255
+ }
256
+ [dir="rtl"] .x-dropdown__item {
257
+ padding-left: var(--x-size-padding-right-dropdown-item-default);
258
+ }
259
+ .x-dropdown__item {
260
+ background: var(--x-color-background-dropdown-default);
261
+ padding-top: var(--x-size-padding-top-dropdown-item-default);
262
+ padding-bottom: var(--x-size-padding-bottom-dropdown-item-default);
263
+ gap: var(--x-size-gap-dropdown-item-default);
264
+ border: none;
265
+ display: flex;
266
+ flex-flow: row nowrap;
267
+ justify-content: flex-start;
268
+ text-align: left;
269
+ width: 100%;
270
+ margin: 0;
271
+ white-space: nowrap;
272
+ cursor: pointer;
273
+ }
274
+ @media not all and (-webkit-min-device-pixel-ratio: 0), not all and (min-resolution: 0.001dpcm) {
275
+ .x-dropdown__item {
276
+ gap: 0;
277
+ }
278
+ .x-dropdown__item > *:not(:last-child) {
279
+ margin-right: var(--x-size-gap-dropdown-item-default);
280
+ }
281
+ }
282
+ .x-dropdown__item:hover, .x-dropdown__item--is-highlighted {
283
+ color: var(--x-color-text-dropdown-item-default-hover);
284
+ background-color: var(--x-color-background-dropdown-item-default-hover);
285
+ font-weight: var(--x-number-font-weight-dropdown-item-default-hover);
286
+ -webkit-text-decoration: var(--x-font-decoration-dropdown-item-default-hover);
287
+ text-decoration: var(--x-font-decoration-dropdown-item-default-hover);
288
+ }
289
+ .x-dropdown__item--is-selected {
290
+ color: var(--x-color-text-dropdown-item-default-selected);
291
+ background-color: var(--x-color-background-dropdown-item-default-selected);
292
+ font-weight: var(--x-number-font-weight-dropdown-item-default-selected);
293
+ -webkit-text-decoration: var(--x-font-decoration-dropdown-item-default-selected);
294
+ text-decoration: var(--x-font-decoration-dropdown-item-default-selected);
295
+ }
296
+ [dir="ltr"] .x-dropdown__item * + .x-icon:last-child {
297
+ margin-left: auto;
298
+ }
299
+ [dir="rtl"] .x-dropdown__item * + .x-icon:last-child {
300
+ margin-right: auto;
301
+ }
302
+ .x-dropdown--is-open {
303
+ --x-color-background-dropdown-toggle-default: var(
304
+ --x-color-background-dropdown-toggle-open-default
305
+ );
306
+ }
307
+ [dir="ltr"] .x-dropdown--right .x-dropdown__items-list {
308
+ right: 0;
309
+ }
310
+ [dir="rtl"] .x-dropdown--right .x-dropdown__items-list {
311
+ left: 0;
312
+ }
145
313
  :root {
146
314
  --x-size-border-radius-dropdown-default: var(--x-size-border-radius-base-none);
147
315
  --x-size-border-radius-top-left-dropdown-default: var(--x-size-border-radius-dropdown-default);
@@ -2698,10 +2866,6 @@
2698
2866
  .x-picture--zoom .x-picture__image:hover {
2699
2867
  transform: scale(var(--x-number-zoom-scale-picture));
2700
2868
  }
2701
- :root {
2702
- --x-number-zoom-scale-picture: 1.1;
2703
- --x-number-zoom-duration-picture: 0.3s;
2704
- }
2705
2869
  .x-progress-bar {
2706
2870
  display: inline-block;
2707
2871
  overflow: hidden;
@@ -7125,171 +7289,7 @@
7125
7289
  text-transform: none;
7126
7290
  }
7127
7291
 
7128
- .x-dropdown {
7129
- box-sizing: border-box;
7130
- position: relative;
7131
- font-size: var(--x-size-font-dropdown-default);
7132
- font-family: var(--x-font-family-dropdown-default);
7133
- font-weight: var(--x-number-font-weight-dropdown-default);
7134
- line-height: var(--x-size-line-height-dropdown-default);
7135
- }
7136
- [dir="ltr"] .x-dropdown__toggle {
7137
- border-right-width: var(--x-size-border-width-right-dropdown-toggle-default);
7138
- }
7139
- [dir="rtl"] .x-dropdown__toggle {
7140
- border-left-width: var(--x-size-border-width-right-dropdown-toggle-default);
7141
- }
7142
- [dir="ltr"] .x-dropdown__toggle {
7143
- border-left-width: var(--x-size-border-width-left-dropdown-toggle-default);
7144
- }
7145
- [dir="rtl"] .x-dropdown__toggle {
7146
- border-right-width: var(--x-size-border-width-left-dropdown-toggle-default);
7147
- }
7148
- [dir="ltr"] .x-dropdown__toggle {
7149
- padding-right: var(--x-size-padding-right-dropdown-toggle-default);
7150
- }
7151
- [dir="rtl"] .x-dropdown__toggle {
7152
- padding-left: var(--x-size-padding-right-dropdown-toggle-default);
7153
- }
7154
- [dir="ltr"] .x-dropdown__toggle {
7155
- padding-left: var(--x-size-padding-left-dropdown-toggle-default);
7156
- }
7157
- [dir="rtl"] .x-dropdown__toggle {
7158
- padding-right: var(--x-size-padding-left-dropdown-toggle-default);
7159
- }
7160
- .x-dropdown__toggle {
7161
- border-style: solid;
7162
- border-top-width: var(--x-size-border-width-top-dropdown-toggle-default);
7163
- border-bottom-width: var(--x-size-border-width-bottom-dropdown-toggle-default);
7164
- border-radius: var(--x-size-border-radius-top-left-dropdown-default) var(--x-size-border-radius-top-right-dropdown-default) var(--x-size-border-radius-bottom-right-dropdown-default) var(--x-size-border-radius-bottom-left-dropdown-default);
7165
- background: var(--x-color-background-dropdown-toggle-default);
7166
- color: var(--x-color-text-dropdown-toggle-default);
7167
- border-color: var(--x-color-border-dropdown-toggle-default);
7168
- padding-top: var(--x-size-padding-top-dropdown-toggle-default);
7169
- padding-bottom: var(--x-size-padding-bottom-dropdown-toggle-default);
7170
- gap: var(--x-size-gap-dropdown-item-default);
7171
- width: var(--x-size-width-dropdown-toggle-default);
7172
- display: flex;
7173
- flex-flow: row nowrap;
7174
- margin: 0;
7175
- cursor: pointer;
7176
- overflow: var(--x-string-overflow-dropdown-toggle-default);
7177
- box-shadow: var(--x-string-box-shadow-dropdown-default);
7178
- }
7179
- @media not all and (-webkit-min-device-pixel-ratio: 0), not all and (min-resolution: 0.001dpcm) {
7180
- .x-dropdown__toggle {
7181
- gap: 0;
7182
- }
7183
- .x-dropdown__toggle > *:not(:last-child) {
7184
- margin-right: var(--x-size-gap-dropdown-item-default);
7185
- }
7186
- }
7187
- [dir="ltr"] .x-dropdown__toggle * + .x-icon:last-child {
7188
- margin-left: auto;
7189
- }
7190
- [dir="rtl"] .x-dropdown__toggle * + .x-icon:last-child {
7191
- margin-right: auto;
7192
- }
7193
- .x-dropdown__toggle-selected-value {
7194
- color: var(--x-color-text-dropdown-toggle-default-selected);
7195
- }
7196
- [dir="ltr"] .x-dropdown__items-list {
7197
- border-right-width: var(--x-size-border-width-right-dropdown-list-default);
7198
- }
7199
- [dir="rtl"] .x-dropdown__items-list {
7200
- border-left-width: var(--x-size-border-width-right-dropdown-list-default);
7201
- }
7202
- [dir="ltr"] .x-dropdown__items-list {
7203
- border-left-width: var(--x-size-border-width-left-dropdown-list-default);
7204
- }
7205
- [dir="rtl"] .x-dropdown__items-list {
7206
- border-right-width: var(--x-size-border-width-left-dropdown-list-default);
7207
- }
7208
- .x-dropdown__items-list {
7209
- background: var(--x-color-background-dropdown-default);
7210
- box-sizing: border-box;
7211
- min-width: var(--x-size-min-width-dropdown-list-default);
7212
- position: absolute;
7213
- top: calc(100% + var(--x-size-gap-dropdown-default));
7214
- overflow: var(--x-string-overflow-dropdown-list-default);
7215
- border-color: var(--x-color-border-dropdown-list-default);
7216
- border-top-width: var(--x-size-border-width-top-dropdown-list-default);
7217
- border-bottom-width: var(--x-size-border-width-bottom-dropdown-list-default);
7218
- border-radius: var(--x-size-border-radius-top-left-dropdown-default) var(--x-size-border-radius-top-right-dropdown-default) var(--x-size-border-radius-bottom-right-dropdown-default) var(--x-size-border-radius-bottom-left-dropdown-default);
7219
- border-style: solid;
7220
- margin: 0;
7221
- padding: 0;
7222
- box-shadow: var(--x-string-box-shadow-dropdown-default);
7223
- z-index: 1;
7224
- }
7225
- .x-dropdown__items-list:before, .x-dropdown__items-list:after {
7226
- content: "";
7227
- display: block;
7228
- height: var(--x-size-padding-vertical-dropdown-list-default);
7229
- }
7230
- [dir="ltr"] .x-dropdown__item {
7231
- padding-left: var(--x-size-padding-left-dropdown-item-default);
7232
- }
7233
- [dir="rtl"] .x-dropdown__item {
7234
- padding-right: var(--x-size-padding-left-dropdown-item-default);
7235
- }
7236
- [dir="ltr"] .x-dropdown__item {
7237
- padding-right: var(--x-size-padding-right-dropdown-item-default);
7238
- }
7239
- [dir="rtl"] .x-dropdown__item {
7240
- padding-left: var(--x-size-padding-right-dropdown-item-default);
7241
- }
7242
- .x-dropdown__item {
7243
- background: var(--x-color-background-dropdown-default);
7244
- padding-top: var(--x-size-padding-top-dropdown-item-default);
7245
- padding-bottom: var(--x-size-padding-bottom-dropdown-item-default);
7246
- gap: var(--x-size-gap-dropdown-item-default);
7247
- border: none;
7248
- display: flex;
7249
- flex-flow: row nowrap;
7250
- justify-content: flex-start;
7251
- text-align: left;
7252
- width: 100%;
7253
- margin: 0;
7254
- white-space: nowrap;
7255
- cursor: pointer;
7256
- }
7257
- @media not all and (-webkit-min-device-pixel-ratio: 0), not all and (min-resolution: 0.001dpcm) {
7258
- .x-dropdown__item {
7259
- gap: 0;
7260
- }
7261
- .x-dropdown__item > *:not(:last-child) {
7262
- margin-right: var(--x-size-gap-dropdown-item-default);
7263
- }
7264
- }
7265
- .x-dropdown__item:hover, .x-dropdown__item--is-highlighted {
7266
- color: var(--x-color-text-dropdown-item-default-hover);
7267
- background-color: var(--x-color-background-dropdown-item-default-hover);
7268
- font-weight: var(--x-number-font-weight-dropdown-item-default-hover);
7269
- -webkit-text-decoration: var(--x-font-decoration-dropdown-item-default-hover);
7270
- text-decoration: var(--x-font-decoration-dropdown-item-default-hover);
7271
- }
7272
- .x-dropdown__item--is-selected {
7273
- color: var(--x-color-text-dropdown-item-default-selected);
7274
- background-color: var(--x-color-background-dropdown-item-default-selected);
7275
- font-weight: var(--x-number-font-weight-dropdown-item-default-selected);
7276
- -webkit-text-decoration: var(--x-font-decoration-dropdown-item-default-selected);
7277
- text-decoration: var(--x-font-decoration-dropdown-item-default-selected);
7278
- }
7279
- [dir="ltr"] .x-dropdown__item * + .x-icon:last-child {
7280
- margin-left: auto;
7281
- }
7282
- [dir="rtl"] .x-dropdown__item * + .x-icon:last-child {
7283
- margin-right: auto;
7284
- }
7285
- .x-dropdown--is-open {
7286
- --x-color-background-dropdown-toggle-default: var(
7287
- --x-color-background-dropdown-toggle-open-default
7288
- );
7289
- }
7290
- [dir="ltr"] .x-dropdown--right .x-dropdown__items-list {
7291
- right: 0;
7292
- }
7293
- [dir="rtl"] .x-dropdown--right .x-dropdown__items-list {
7294
- left: 0;
7292
+ :root {
7293
+ --x-number-zoom-scale-picture: 1.1;
7294
+ --x-number-zoom-duration-picture: 0.3s;
7295
7295
  }
package/docs/API-reference/api/x-components.basemodal._refs.md CHANGED
@@ -9,5 +9,6 @@
9
9
  ```typescript
10
10
  $refs: {
11
11
  modal: HTMLDivElement;
12
+ modalContent: HTMLDivElement;
12
13
  };
13
14
  ```
package/docs/API-reference/api/x-components.basemodal.md CHANGED
@@ -17,7 +17,7 @@ export default class BaseModal extends Vue
17
17
 
18
18
  | Property | Modifiers | Type | Description |
19
19
  | --- | --- | --- | --- |
20
- | [$refs](./x-components.basemodal._refs.md) | | { modal: HTMLDivElement; } | |
20
+ | [$refs](./x-components.basemodal._refs.md) | | { modal: HTMLDivElement; modalContent: HTMLDivElement; } | |
21
21
  | [animation](./x-components.basemodal.animation.md) | | Vue \| string | Animation to use for opening/closing the modal. This animation only affects the content. |
22
22
  | [focusOnOpen](./x-components.basemodal.focusonopen.md) | | boolean | Determines if the focused element changes to one inside the modal when it opens. Either the first element with a positive tabindex or just the first focusable element. |
23
23
  | [isWaitingForLeave](./x-components.basemodal.iswaitingforleave.md) | | boolean | Boolean to delay the leave animation until it has completed. |
@@ -25,6 +25,8 @@ export default class BaseModal extends Vue
25
25
  | [overlayAnimation](./x-components.basemodal.overlayanimation.md) | | Vue \| string | Animation to use for the overlay (backdrop) part of the modal. By default, it uses a fade transition. |
26
26
  | [previousBodyOverflow](./x-components.basemodal.previousbodyoverflow.md) | | string | The previous value of the body overflow style. |
27
27
  | [previousHTMLOverflow](./x-components.basemodal.previoushtmloverflow.md) | | string | The previous value of the HTML element overflow style. |
28
+ | [referenceElement](./x-components.basemodal.referenceelement.md) | | HTMLElement | The reference element to use to find the modal's position. |
29
+ | [referenceSelector?](./x-components.basemodal.referenceselector.md) | | string | <i>(Optional)</i> The reference selector of a DOM element to use as reference to position the modal. This selector can be an ID or a class, if it is a class, it will use the first element that matches. |
28
30
 
29
31
  ## Methods
30
32
 
package/docs/API-reference/api/x-components.basemodal.referenceelement.md ADDED
@@ -0,0 +1,13 @@
1
+ <!-- Do not edit this file. It is automatically generated by API Documenter. -->
2
+
3
+ [Home](./index.md) &gt; [@empathyco/x-components](./x-components.md) &gt; [BaseModal](./x-components.basemodal.md) &gt; [referenceElement](./x-components.basemodal.referenceelement.md)
4
+
5
+ ## BaseModal.referenceElement property
6
+
7
+ The reference element to use to find the modal's position.
8
+
9
+ <b>Signature:</b>
10
+
11
+ ```typescript
12
+ protected referenceElement: HTMLElement;
13
+ ```
package/docs/API-reference/api/x-components.basemodal.referenceselector.md ADDED
@@ -0,0 +1,13 @@
1
+ <!-- Do not edit this file. It is automatically generated by API Documenter. -->
2
+
3
+ [Home](./index.md) &gt; [@empathyco/x-components](./x-components.md) &gt; [BaseModal](./x-components.basemodal.md) &gt; [referenceSelector](./x-components.basemodal.referenceselector.md)
4
+
5
+ ## BaseModal.referenceSelector property
6
+
7
+ The reference selector of a DOM element to use as reference to position the modal. This selector can be an ID or a class, if it is a class, it will use the first element that matches.
8
+
9
+ <b>Signature:</b>
10
+
11
+ ```typescript
12
+ referenceSelector?: string;
13
+ ```
package/docs/API-reference/components/common/modals/x-components.base-modal.md CHANGED
@@ -11,12 +11,13 @@ complex modals.
11
11
 
12
12
  ## Props
13
13
 
14
- | Name | Description | Type | Default |
15
- | ----------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------- | ---------------------------- |
16
- | <code>animation</code> | Animation to use for opening/closing the modal. This animation only affects the content. | <code>union</code> | <code>() => NoElement</code> |
17
- | <code>overlayAnimation</code> | Animation to use for the overlay (backdrop) part of the modal. By default, it uses<br />a fade transition. | <code>union</code> | <code>() => Fade</code> |
18
- | <code>open</code> | Determines if the modal is open or not. | <code>boolean</code> | <code></code> |
19
- | <code>focusOnOpen</code> | Determines if the focused element changes to one inside the modal when it opens. Either the<br />first element with a positive tabindex or just the first focusable element. | <code>boolean</code> | <code>true</code> |
14
+ | Name | Description | Type | Default |
15
+ | ------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------- | ---------------------------- |
16
+ | <code>animation</code> | Animation to use for opening/closing the modal. This animation only affects the content. | <code>union</code> | <code>() => NoElement</code> |
17
+ | <code>overlayAnimation</code> | Animation to use for the overlay (backdrop) part of the modal. By default, it uses<br />a fade transition. | <code>union</code> | <code>() => Fade</code> |
18
+ | <code>open</code> | Determines if the modal is open or not. | <code>boolean</code> | <code></code> |
19
+ | <code>focusOnOpen</code> | Determines if the focused element changes to one inside the modal when it opens. Either the<br />first element with a positive tabindex or just the first focusable element. | <code>boolean</code> | <code>true</code> |
20
+ | <code>referenceSelector</code> | The reference selector of a DOM element to use as reference to position the modal.<br />This selector can be an ID or a class, if it is a class, it will use the first<br />element that matches. | <code>string</code> | <code></code> |
20
21
 
21
22
  ## Events
22
23
 
@@ -34,7 +35,9 @@ complex modals.
34
35
  ## Examples
35
36
 
36
37
  The `BaseModal` is a simple component that serves to create complex modals. Its open state has to be
37
- passed via prop. It also accepts an animation to use for opening & closing.
38
+ passed via prop. There is a prop, `referenceSelector`, used to place the modal under some element
39
+ instead of set the top of the element directly. It also accepts an animation to use for opening &
40
+ closing.
38
41
 
39
42
  It emits a `click:overlay` event when any part out of the content is clicked, but only if the modal
40
43
  is open.
@@ -44,9 +47,10 @@ is open.
44
47
  <div>
45
48
  <button @click="open = true">Open modal</button>
46
49
  <BaseModal
47
- animation="fadeAndSlide"
50
+ :animation="fadeAndSlide"
48
51
  :open="open"
49
52
  @click:overlay="open = false"
53
+ referenceSelector=".header"
50
54
  >
51
55
  <h1>Hello</h1>
52
56
  <p>The modal is working</p>
package/js/components/modals/base-events-modal.vue.js CHANGED
@@ -11,13 +11,18 @@ var __vue_render__ = function () {
11
11
  var _c = _vm._self._c || _h;
12
12
  return _c(
13
13
  "BaseModal",
14
- {
15
- attrs: { animation: _vm.animation, open: _vm.isOpen },
16
- on: {
17
- "click:overlay": _vm.emitBodyClickEvent,
18
- "focusin:body": _vm.emitBodyClickEvent,
14
+ _vm._b(
15
+ {
16
+ attrs: { animation: _vm.animation, open: _vm.isOpen },
17
+ on: {
18
+ "click:overlay": _vm.emitBodyClickEvent,
19
+ "focusin:body": _vm.emitBodyClickEvent,
20
+ },
19
21
  },
20
- },
22
+ "BaseModal",
23
+ _vm.$attrs,
24
+ false
25
+ ),
21
26
  [_vm._t("default")],
22
27
  2
23
28
  )
package/js/components/modals/base-events-modal.vue.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"base-events-modal.vue.js","sources":["../../../../src/components/modals/base-events-modal.vue"],"sourcesContent":["<template>\n <BaseModal\n @click:overlay=\"emitBodyClickEvent\"\n @focusin:body=\"emitBodyClickEvent\"\n :animation=\"animation\"\n :open=\"isOpen\"\n >\n <slot />\n </BaseModal>\n</template>\n\n<script lang=\"ts\">\n import Vue from 'vue';\n import { Component, Prop } from 'vue-property-decorator';\n import { XEvent } from '../../wiring/events.types';\n import { XOn } from '../decorators/bus.decorators';\n import { WireMetadata } from '../../wiring/wiring.types';\n import { isElementEqualOrContained } from '../../utils/html';\n import BaseModal from './base-modal.vue';\n\n /**\n * Component containing a modal that emits a {@link XEventsTypes.UserClickedCloseEventsModal} when\n * clicking outside the content rendered in the default slot and can receive, through the\n * eventsToCloseModal prop, a list of {@link XEvent | xEvents} to listen to in order to close\n * also the modal, eventsToOpenModal prop, another list of {@link XEvent | xEvents} to customize\n * the events to listen to open the modal and a prop, displayOverlay, to display an\n * overlay over the rest of the html. The default slot offers the possibility to customize the\n * modal content.\n *\n * @public\n */\n @Component({\n components: { BaseModal }\n })\n export default class BaseEventsModal extends Vue {\n /**\n * Animation to use for opening/closing the modal.\n */\n @Prop()\n public animation?: Vue | string;\n /**\n * Array of {@link XEvent | xEvents} to listen to open the modal.\n */\n @Prop({ default: (): XEvent[] => ['UserClickedOpenEventsModal'] })\n public eventsToOpenModal!: XEvent[];\n\n /**\n * Array of {@link XEvent | xEvents} to listen to close the modal.\n */\n @Prop({\n default: (): XEvent[] => ['UserClickedCloseEventsModal', 'UserClickedOutOfEventsModal']\n })\n public eventsToCloseModal!: XEvent[];\n\n /**\n * Event to emit when any part of the website out of the modal has been clicked.\n */\n @Prop({ default: 'UserClickedOutOfEventsModal' })\n public bodyClickEvent!: XEvent;\n\n /**\n * Whether the modal is open or not.\n */\n protected isOpen = false;\n\n /** The element that opened the modal. */\n protected openerElement?: HTMLElement;\n\n /**\n * Opens the modal.\n *\n * @param _payload - The payload of the event that opened the modal.\n * @param metadata - The metadata of the event that opened the modal.\n *\n * @internal\n */\n @XOn(component => (component as BaseEventsModal).eventsToOpenModal)\n openModal(_payload: unknown, metadata: WireMetadata): void {\n if (!this.isOpen) {\n this.openerElement = metadata.target;\n this.isOpen = true;\n }\n }\n\n /**\n * Closes the modal.\n *\n * @internal\n */\n @XOn(component => (component as BaseEventsModal).eventsToCloseModal)\n closeModal(): void {\n if (this.isOpen) {\n this.isOpen = false;\n }\n }\n\n /**\n * Emits the event defined in the {@link BaseEventsModal.bodyClickEvent} event unless the passed\n * event target is the button that opened the modal.\n *\n * @param event - The event that triggered the close attempt.\n * @public\n */\n protected emitBodyClickEvent(event: MouseEvent | FocusEvent): void {\n // Prevents clicking the open button when the panel is already open to close the panel.\n if (\n !this.openerElement ||\n !isElementEqualOrContained(this.openerElement, event.target as HTMLElement)\n ) {\n this.$x.emit(this.bodyClickEvent, undefined, { target: this.$el as HTMLElement });\n }\n }\n }\n</script>\n\n<docs lang=\"mdx\">\n## Examples\n\nThe `BaseEventsModal` component handles the modal open/close state via the events passed via props.\nIts configured by default to work as a modal for a whole search application, but if the events are\nchanged, it can work as a modal that is opened/closed when the events it is listening are emitted.\n\n### Basic usage\n\nThe component interacts with the open and close components, which are preconfigured by default to\nemit the same events that the `BaseEventsModal` component is listening to:\n\n```vue\n<template>\n <div>\n <BaseEventsModalOpen>Open</BaseEventsModalOpen>\n <BaseEventsModal>\n <BaseEventsModalClose>Close</BaseEventsModalClose>\n <img src=\"success.png\" />\n </BaseEventsModal>\n </div>\n</template>\n\n<script>\n import { BaseEventsModalOpen, BaseEventsModal } from '@empathyco/x-components';\n\n export default {\n name: 'ModalTest',\n components: {\n BaseEventsModalOpen,\n BaseEventsModal\n }\n };\n</script>\n```\n\n### Customizing the events\n\nIf needed, the events to open/close the modal can be changed. The modal can listen one or more\nevents. To do so, the `eventsToCloseModal` and `eventsToOpenModal` props can be used. Below you can\nsee a full example on how this would work with custom events.\n\n```vue\n<template>\n <div>\n <BaseEventsModalOpen openingEvent=\"UserClickedOpenMyCustomModal\">Open</BaseEventsModalOpen>\n <BaseEventsModal\n :eventsToCloseModal=\"eventsToCloseModal\"\n :eventsToOpenModal=\"eventsToOpenModal\"\n >\n <BaseEventsModalClose closingEvent=\"UserClickedCloseMyCustomModalFromHeader\">\n Close from header\n </BaseEventsModalClose>\n <img src=\"success.png\" />\n <BaseEventsModalClose closingEvent=\"UserClickedCloseMyCustomModalFromFooter\">\n Close from footer\n </BaseEventsModalClose>\n </BaseEventsModal>\n </div>\n</template>\n\n<script>\n import {\n BaseEventsModalOpen,\n BaseEventsModal,\n BaseEventsModalClose\n } from '@empathyco/x-components';\n\n export default {\n name: 'ModalTest',\n components: {\n BaseEventsModalOpen,\n BaseEventsModal,\n BaseEventsModalClose\n }\n };\n</script>\n```\n\n## Events\n\nA list of events that the component will emit:\n\n- `UserClickedCloseEventsModal`: the event is emitted after clicking outside the content rendered in\n the default slot.\n- `UserClickedOutOfEventsModal`: the event is emitted after clicking outside the modal.\n- Custom events to open or close the modal.\n</docs>\n"],"names":[],"mappings":";;;;AAEA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
1
+ {"version":3,"file":"base-events-modal.vue.js","sources":["../../../../src/components/modals/base-events-modal.vue"],"sourcesContent":["<template>\n <BaseModal\n @click:overlay=\"emitBodyClickEvent\"\n @focusin:body=\"emitBodyClickEvent\"\n :animation=\"animation\"\n :open=\"isOpen\"\n v-bind=\"$attrs\"\n >\n <slot />\n </BaseModal>\n</template>\n\n<script lang=\"ts\">\n import Vue from 'vue';\n import { Component, Prop } from 'vue-property-decorator';\n import { XEvent } from '../../wiring/events.types';\n import { XOn } from '../decorators/bus.decorators';\n import { WireMetadata } from '../../wiring/wiring.types';\n import { isElementEqualOrContained } from '../../utils/html';\n import BaseModal from './base-modal.vue';\n\n /**\n * Component containing a modal that emits a {@link XEventsTypes.UserClickedCloseEventsModal} when\n * clicking outside the content rendered in the default slot and can receive, through the\n * eventsToCloseModal prop, a list of {@link XEvent | xEvents} to listen to in order to close\n * also the modal, eventsToOpenModal prop, another list of {@link XEvent | xEvents} to customize\n * the events to listen to open the modal and a prop, displayOverlay, to display an\n * overlay over the rest of the html. The default slot offers the possibility to customize the\n * modal content.\n *\n * @public\n */\n @Component({\n components: { BaseModal }\n })\n export default class BaseEventsModal extends Vue {\n /**\n * Animation to use for opening/closing the modal.\n */\n @Prop()\n public animation?: Vue | string;\n /**\n * Array of {@link XEvent | xEvents} to listen to open the modal.\n */\n @Prop({ default: (): XEvent[] => ['UserClickedOpenEventsModal'] })\n public eventsToOpenModal!: XEvent[];\n\n /**\n * Array of {@link XEvent | xEvents} to listen to close the modal.\n */\n @Prop({\n default: (): XEvent[] => ['UserClickedCloseEventsModal', 'UserClickedOutOfEventsModal']\n })\n public eventsToCloseModal!: XEvent[];\n\n /**\n * Event to emit when any part of the website out of the modal has been clicked.\n */\n @Prop({ default: 'UserClickedOutOfEventsModal' })\n public bodyClickEvent!: XEvent;\n\n /**\n * Whether the modal is open or not.\n */\n protected isOpen = false;\n\n /** The element that opened the modal. */\n protected openerElement?: HTMLElement;\n\n /**\n * Opens the modal.\n *\n * @param _payload - The payload of the event that opened the modal.\n * @param metadata - The metadata of the event that opened the modal.\n *\n * @internal\n */\n @XOn(component => (component as BaseEventsModal).eventsToOpenModal)\n openModal(_payload: unknown, metadata: WireMetadata): void {\n if (!this.isOpen) {\n this.openerElement = metadata.target;\n this.isOpen = true;\n }\n }\n\n /**\n * Closes the modal.\n *\n * @internal\n */\n @XOn(component => (component as BaseEventsModal).eventsToCloseModal)\n closeModal(): void {\n if (this.isOpen) {\n this.isOpen = false;\n }\n }\n\n /**\n * Emits the event defined in the {@link BaseEventsModal.bodyClickEvent} event unless the passed\n * event target is the button that opened the modal.\n *\n * @param event - The event that triggered the close attempt.\n * @public\n */\n protected emitBodyClickEvent(event: MouseEvent | FocusEvent): void {\n // Prevents clicking the open button when the panel is already open to close the panel.\n if (\n !this.openerElement ||\n !isElementEqualOrContained(this.openerElement, event.target as HTMLElement)\n ) {\n this.$x.emit(this.bodyClickEvent, undefined, { target: this.$el as HTMLElement });\n }\n }\n }\n</script>\n\n<docs lang=\"mdx\">\n## Examples\n\nThe `BaseEventsModal` component handles the modal open/close state via the events passed via props.\nIts configured by default to work as a modal for a whole search application, but if the events are\nchanged, it can work as a modal that is opened/closed when the events it is listening are emitted.\n\n### Basic usage\n\nThe component interacts with the open and close components, which are preconfigured by default to\nemit the same events that the `BaseEventsModal` component is listening to:\n\n```vue\n<template>\n <div>\n <BaseEventsModalOpen>Open</BaseEventsModalOpen>\n <BaseEventsModal>\n <BaseEventsModalClose>Close</BaseEventsModalClose>\n <img src=\"success.png\" />\n </BaseEventsModal>\n </div>\n</template>\n\n<script>\n import { BaseEventsModalOpen, BaseEventsModal } from '@empathyco/x-components';\n\n export default {\n name: 'ModalTest',\n components: {\n BaseEventsModalOpen,\n BaseEventsModal\n }\n };\n</script>\n```\n\n### Customizing the events\n\nIf needed, the events to open/close the modal can be changed. The modal can listen one or more\nevents. To do so, the `eventsToCloseModal` and `eventsToOpenModal` props can be used. Below you can\nsee a full example on how this would work with custom events.\n\n```vue\n<template>\n <div>\n <BaseEventsModalOpen openingEvent=\"UserClickedOpenMyCustomModal\">Open</BaseEventsModalOpen>\n <BaseEventsModal\n :eventsToCloseModal=\"eventsToCloseModal\"\n :eventsToOpenModal=\"eventsToOpenModal\"\n >\n <BaseEventsModalClose closingEvent=\"UserClickedCloseMyCustomModalFromHeader\">\n Close from header\n </BaseEventsModalClose>\n <img src=\"success.png\" />\n <BaseEventsModalClose closingEvent=\"UserClickedCloseMyCustomModalFromFooter\">\n Close from footer\n </BaseEventsModalClose>\n </BaseEventsModal>\n </div>\n</template>\n\n<script>\n import {\n BaseEventsModalOpen,\n BaseEventsModal,\n BaseEventsModalClose\n } from '@empathyco/x-components';\n\n export default {\n name: 'ModalTest',\n components: {\n BaseEventsModalOpen,\n BaseEventsModal,\n BaseEventsModalClose\n }\n };\n</script>\n```\n\n## Events\n\nA list of events that the component will emit:\n\n- `UserClickedCloseEventsModal`: the event is emitted after clicking outside the content rendered in\n the default slot.\n- `UserClickedOutOfEventsModal`: the event is emitted after clicking outside the modal.\n- Custom events to open or close the modal.\n</docs>\n"],"names":[],"mappings":";;;;AAEA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
package/js/components/modals/base-events-modal.vue_rollup-plugin-vue_script.vue.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"base-events-modal.vue_rollup-plugin-vue_script.vue.js","sources":["../../../../src/components/modals/base-events-modal.vue?rollup-plugin-vue=script.ts"],"sourcesContent":["\n\n\n\n\n\n\n\n\n\n\n\nimport Vue from 'vue';\nimport { Component, Prop } from 'vue-property-decorator';\nimport { XEvent } from '../../wiring/events.types';\nimport { XOn } from '../decorators/bus.decorators';\nimport { WireMetadata } from '../../wiring/wiring.types';\nimport { isElementEqualOrContained } from '../../utils/html';\nimport BaseModal from './base-modal.vue';\n\n/**\n * Component containing a modal that emits a {@link XEventsTypes.UserClickedCloseEventsModal} when\n * clicking outside the content rendered in the default slot and can receive, through the\n * eventsToCloseModal prop, a list of {@link XEvent | xEvents} to listen to in order to close\n * also the modal, eventsToOpenModal prop, another list of {@link XEvent | xEvents} to customize\n * the events to listen to open the modal and a prop, displayOverlay, to display an\n * overlay over the rest of the html. The default slot offers the possibility to customize the\n * modal content.\n *\n * @public\n */\n@Component({\n components: { BaseModal }\n})\nexport default class BaseEventsModal extends Vue {\n /**\n * Animation to use for opening/closing the modal.\n */\n @Prop()\n public animation?: Vue | string;\n /**\n * Array of {@link XEvent | xEvents} to listen to open the modal.\n */\n @Prop({ default: (): XEvent[] => ['UserClickedOpenEventsModal'] })\n public eventsToOpenModal!: XEvent[];\n\n /**\n * Array of {@link XEvent | xEvents} to listen to close the modal.\n */\n @Prop({\n default: (): XEvent[] => ['UserClickedCloseEventsModal', 'UserClickedOutOfEventsModal']\n })\n public eventsToCloseModal!: XEvent[];\n\n /**\n * Event to emit when any part of the website out of the modal has been clicked.\n */\n @Prop({ default: 'UserClickedOutOfEventsModal' })\n public bodyClickEvent!: XEvent;\n\n /**\n * Whether the modal is open or not.\n */\n protected isOpen = false;\n\n /** The element that opened the modal. */\n protected openerElement?: HTMLElement;\n\n /**\n * Opens the modal.\n *\n * @param _payload - The payload of the event that opened the modal.\n * @param metadata - The metadata of the event that opened the modal.\n *\n * @internal\n */\n @XOn(component => (component as BaseEventsModal).eventsToOpenModal)\n openModal(_payload: unknown, metadata: WireMetadata): void {\n if (!this.isOpen) {\n this.openerElement = metadata.target;\n this.isOpen = true;\n }\n }\n\n /**\n * Closes the modal.\n *\n * @internal\n */\n @XOn(component => (component as BaseEventsModal).eventsToCloseModal)\n closeModal(): void {\n if (this.isOpen) {\n this.isOpen = false;\n }\n }\n\n /**\n * Emits the event defined in the {@link BaseEventsModal.bodyClickEvent} event unless the passed\n * event target is the button that opened the modal.\n *\n * @param event - The event that triggered the close attempt.\n * @public\n */\n protected emitBodyClickEvent(event: MouseEvent | FocusEvent): void {\n // Prevents clicking the open button when the panel is already open to close the panel.\n if (\n !this.openerElement ||\n !isElementEqualOrContained(this.openerElement, event.target as HTMLElement)\n ) {\n this.$x.emit(this.bodyClickEvent, undefined, { target: this.$el as HTMLElement });\n }\n }\n}\n"],"names":["BaseModal"],"mappings":";;;;;;;AAoBA;;;;;;;;;;;AAcA,IAAqB,eAAe,GAApC,MAAqB,eAAgB,SAAQ,GAAG;IAAhD;;;;;QA6BY,WAAM,GAAG,KAAK,CAAC;KAiD1B;;;;;;;;;IAnCC,SAAS,CAAC,QAAiB,EAAE,QAAsB;QACjD,IAAI,CAAC,IAAI,CAAC,MAAM,EAAE;YAChB,IAAI,CAAC,aAAa,GAAG,QAAQ,CAAC,MAAM,CAAC;YACrC,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC;SACpB;KACF;;;;;;IAQD,UAAU;QACR,IAAI,IAAI,CAAC,MAAM,EAAE;YACf,IAAI,CAAC,MAAM,GAAG,KAAK,CAAC;SACrB;KACF;;;;;;;;IASS,kBAAkB,CAAC,KAA8B;;QAEzD,IACE,CAAC,IAAI,CAAC,aAAa;YACnB,CAAC,yBAAyB,CAAC,IAAI,CAAC,aAAa,EAAE,KAAK,CAAC,MAAqB,CAAC,EAC3E;YACA,IAAI,CAAC,EAAE,CAAC,IAAI,CAAC,IAAI,CAAC,cAAc,EAAE,SAAS,EAAE,EAAE,MAAM,EAAE,IAAI,CAAC,GAAkB,EAAE,CAAC,CAAC;SACnF;KACF;CACF,CAAA;AAzEC;IADC,IAAI,EAAE;kDACyB;AAKhC;IADC,IAAI,CAAC,EAAE,OAAO,EAAE,MAAgB,CAAC,4BAA4B,CAAC,EAAE,CAAC;0DAC9B;AAQpC;IAHC,IAAI,CAAC;QACJ,OAAO,EAAE,MAAgB,CAAC,6BAA6B,EAAE,6BAA6B,CAAC;KACxF,CAAC;2DACmC;AAMrC;IADC,IAAI,CAAC,EAAE,OAAO,EAAE,6BAA6B,EAAE,CAAC;uDAClB;AAmB/B;IADC,GAAG,CAAC,SAAS,IAAK,SAA6B,CAAC,iBAAiB,CAAC;gDAMlE;AAQD;IADC,GAAG,CAAC,SAAS,IAAK,SAA6B,CAAC,kBAAkB,CAAC;iDAKnE;AA5DkB,eAAe;IAHnC,SAAS,CAAC;QACT,UAAU,EAAE,aAAEA,iBAAS,EAAE;KAC1B,CAAC;GACmB,eAAe,CA8EnC;aA9EoB,eAAe;;;;"}
1
+ {"version":3,"file":"base-events-modal.vue_rollup-plugin-vue_script.vue.js","sources":["../../../../src/components/modals/base-events-modal.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 { XEvent } from '../../wiring/events.types';\nimport { XOn } from '../decorators/bus.decorators';\nimport { WireMetadata } from '../../wiring/wiring.types';\nimport { isElementEqualOrContained } from '../../utils/html';\nimport BaseModal from './base-modal.vue';\n\n/**\n * Component containing a modal that emits a {@link XEventsTypes.UserClickedCloseEventsModal} when\n * clicking outside the content rendered in the default slot and can receive, through the\n * eventsToCloseModal prop, a list of {@link XEvent | xEvents} to listen to in order to close\n * also the modal, eventsToOpenModal prop, another list of {@link XEvent | xEvents} to customize\n * the events to listen to open the modal and a prop, displayOverlay, to display an\n * overlay over the rest of the html. The default slot offers the possibility to customize the\n * modal content.\n *\n * @public\n */\n@Component({\n components: { BaseModal }\n})\nexport default class BaseEventsModal extends Vue {\n /**\n * Animation to use for opening/closing the modal.\n */\n @Prop()\n public animation?: Vue | string;\n /**\n * Array of {@link XEvent | xEvents} to listen to open the modal.\n */\n @Prop({ default: (): XEvent[] => ['UserClickedOpenEventsModal'] })\n public eventsToOpenModal!: XEvent[];\n\n /**\n * Array of {@link XEvent | xEvents} to listen to close the modal.\n */\n @Prop({\n default: (): XEvent[] => ['UserClickedCloseEventsModal', 'UserClickedOutOfEventsModal']\n })\n public eventsToCloseModal!: XEvent[];\n\n /**\n * Event to emit when any part of the website out of the modal has been clicked.\n */\n @Prop({ default: 'UserClickedOutOfEventsModal' })\n public bodyClickEvent!: XEvent;\n\n /**\n * Whether the modal is open or not.\n */\n protected isOpen = false;\n\n /** The element that opened the modal. */\n protected openerElement?: HTMLElement;\n\n /**\n * Opens the modal.\n *\n * @param _payload - The payload of the event that opened the modal.\n * @param metadata - The metadata of the event that opened the modal.\n *\n * @internal\n */\n @XOn(component => (component as BaseEventsModal).eventsToOpenModal)\n openModal(_payload: unknown, metadata: WireMetadata): void {\n if (!this.isOpen) {\n this.openerElement = metadata.target;\n this.isOpen = true;\n }\n }\n\n /**\n * Closes the modal.\n *\n * @internal\n */\n @XOn(component => (component as BaseEventsModal).eventsToCloseModal)\n closeModal(): void {\n if (this.isOpen) {\n this.isOpen = false;\n }\n }\n\n /**\n * Emits the event defined in the {@link BaseEventsModal.bodyClickEvent} event unless the passed\n * event target is the button that opened the modal.\n *\n * @param event - The event that triggered the close attempt.\n * @public\n */\n protected emitBodyClickEvent(event: MouseEvent | FocusEvent): void {\n // Prevents clicking the open button when the panel is already open to close the panel.\n if (\n !this.openerElement ||\n !isElementEqualOrContained(this.openerElement, event.target as HTMLElement)\n ) {\n this.$x.emit(this.bodyClickEvent, undefined, { target: this.$el as HTMLElement });\n }\n }\n}\n"],"names":["BaseModal"],"mappings":";;;;;;;AAqBA;;;;;;;;;;;AAcA,IAAqB,eAAe,GAApC,MAAqB,eAAgB,SAAQ,GAAG;IAAhD;;;;;QA6BY,WAAM,GAAG,KAAK,CAAC;KAiD1B;;;;;;;;;IAnCC,SAAS,CAAC,QAAiB,EAAE,QAAsB;QACjD,IAAI,CAAC,IAAI,CAAC,MAAM,EAAE;YAChB,IAAI,CAAC,aAAa,GAAG,QAAQ,CAAC,MAAM,CAAC;YACrC,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC;SACpB;KACF;;;;;;IAQD,UAAU;QACR,IAAI,IAAI,CAAC,MAAM,EAAE;YACf,IAAI,CAAC,MAAM,GAAG,KAAK,CAAC;SACrB;KACF;;;;;;;;IASS,kBAAkB,CAAC,KAA8B;;QAEzD,IACE,CAAC,IAAI,CAAC,aAAa;YACnB,CAAC,yBAAyB,CAAC,IAAI,CAAC,aAAa,EAAE,KAAK,CAAC,MAAqB,CAAC,EAC3E;YACA,IAAI,CAAC,EAAE,CAAC,IAAI,CAAC,IAAI,CAAC,cAAc,EAAE,SAAS,EAAE,EAAE,MAAM,EAAE,IAAI,CAAC,GAAkB,EAAE,CAAC,CAAC;SACnF;KACF;CACF,CAAA;AAzEC;IADC,IAAI,EAAE;kDACyB;AAKhC;IADC,IAAI,CAAC,EAAE,OAAO,EAAE,MAAgB,CAAC,4BAA4B,CAAC,EAAE,CAAC;0DAC9B;AAQpC;IAHC,IAAI,CAAC;QACJ,OAAO,EAAE,MAAgB,CAAC,6BAA6B,EAAE,6BAA6B,CAAC;KACxF,CAAC;2DACmC;AAMrC;IADC,IAAI,CAAC,EAAE,OAAO,EAAE,6BAA6B,EAAE,CAAC;uDAClB;AAmB/B;IADC,GAAG,CAAC,SAAS,IAAK,SAA6B,CAAC,iBAAiB,CAAC;gDAMlE;AAQD;IADC,GAAG,CAAC,SAAS,IAAK,SAA6B,CAAC,kBAAkB,CAAC;iDAKnE;AA5DkB,eAAe;IAHnC,SAAS,CAAC;QACT,UAAU,EAAE,aAAEA,iBAAS,EAAE;KAC1B,CAAC;GACmB,eAAe,CA8EnC;aA9EoB,eAAe;;;;"}
package/js/components/modals/base-id-modal.vue.js CHANGED
@@ -11,13 +11,18 @@ var __vue_render__ = function () {
11
11
  var _c = _vm._self._c || _h;
12
12
  return _c(
13
13
  "BaseModal",
14
- {
15
- attrs: { animation: _vm.animation, open: _vm.isOpen },
16
- on: {
17
- "click:overlay": _vm.emitClickOutOfModal,
18
- "focusin:body": _vm.emitClickOutOfModal,
14
+ _vm._b(
15
+ {
16
+ attrs: { animation: _vm.animation, open: _vm.isOpen },
17
+ on: {
18
+ "click:overlay": _vm.emitClickOutOfModal,
19
+ "focusin:body": _vm.emitClickOutOfModal,
20
+ },
19
21
  },
20
- },
22
+ "BaseModal",
23
+ _vm.$attrs,
24
+ false
25
+ ),
21
26
  [_vm._t("default")],
22
27
  2
23
28
  )
package/js/components/modals/base-id-modal.vue.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"base-id-modal.vue.js","sources":["../../../../src/components/modals/base-id-modal.vue"],"sourcesContent":["<template>\n <BaseModal\n @click:overlay=\"emitClickOutOfModal\"\n @focusin:body=\"emitClickOutOfModal\"\n :animation=\"animation\"\n :open=\"isOpen\"\n >\n <slot />\n </BaseModal>\n</template>\n\n<script lang=\"ts\">\n import Vue from 'vue';\n import { Component, Prop } from 'vue-property-decorator';\n import { XOn } from '../decorators/bus.decorators';\n import { WireMetadata } from '../../wiring/wiring.types';\n import { isElementEqualOrContained } from '../../utils/html';\n import BaseModal from './base-modal.vue';\n\n /**\n * Component containing a modal expecting a required prop, named `modalId`. It reacts to\n * `UserClickedOpenModal`, `UserClickedCloseModal` and `UserClickedOutOfModal` events, when their\n * payload matches the component's 'modalId' prop, to handle its open/close state. The default\n * slot offers the possibility to customise the modal content.\n *\n * @public\n */\n @Component({\n components: { BaseModal }\n })\n export default class BaseIdModal extends Vue {\n /** Animation to use for opening/closing the modal. */\n @Prop()\n public animation?: Vue | string;\n\n /** The modalId to use for the open and close event listeners. */\n @Prop({ required: true })\n public modalId!: string;\n\n /** Whether the modal is open or not. */\n protected isOpen = false;\n\n /** The element that opened the modal. */\n protected openerElement?: HTMLElement;\n\n /**\n * Opens the modal.\n *\n * @param modalId - The payload of the {@link XEventsTypes.UserClickedOpenModal} event.\n * @param metadata - The metadata of the emitted event.\n * @public\n */\n @XOn('UserClickedOpenModal')\n openModal(modalId: string, metadata: WireMetadata): void {\n if (!this.isOpen && this.modalId === modalId) {\n this.openerElement = metadata.target;\n this.isOpen = true;\n }\n }\n\n /**\n * Closes the modal.\n *\n * @param payload - The payload of the closing events:\n * {@link XEventsTypes.UserClickedCloseModal} or {@link XEventsTypes.UserClickedOutOfModal}.\n *\n * @public\n */\n @XOn(['UserClickedCloseModal', 'UserClickedOutOfModal'])\n closeModal(payload: string): void {\n if (this.isOpen && this.modalId === payload) {\n this.isOpen = false;\n }\n }\n\n /**\n * Emits a {@link XEventsTypes.UserClickedOutOfModal} event unless the passed event target\n * is the button that opened the modal.\n *\n * @param event - The event that triggered the close attempt.\n * @public\n */\n protected emitClickOutOfModal(event: MouseEvent | FocusEvent): void {\n // Prevents clicking the open button when the panel is already open to close the panel.\n if (\n !this.openerElement ||\n !isElementEqualOrContained(this.openerElement, event.target as HTMLElement)\n ) {\n this.$x.emit('UserClickedOutOfModal', this.modalId, { target: this.$el as HTMLElement });\n }\n }\n }\n</script>\n\n<docs lang=\"mdx\">\n## Examples\n\nThe `BaseIdModal` component reacts to the `UserClickedOpenModal`, `UserClickedCloseModal` and\n`UserClickedOutOfModal` to handle its open/close state. The component filters out the events which\npayload doesn't match its `modalId` prop and reacts only to those who match this criteria.\n\n### Basic usage\n\nThe component interacts with both `BaseIdModalOpen` and `BaseIdModalClose` components, which have to\nshare the same value in their `modalId` prop to work:\n\n```vue\n<template>\n <div>\n <BaseIdModalOpen modalId=\"myModal\">Open</BaseIdModalOpen>\n <BaseIdModal modalId=\"myModal\">\n <img src=\"success.png\" />\n <BaseIdModalClose modalId=\"myModal\">Close</BaseIdModalClose>\n </BaseIdModal>\n </div>\n</template>\n\n<script>\n import { BaseIdModalOpen, BaseIdModal, BaseIdModalClose } from '@empathyco/x-components';\n\n export default {\n name: 'TestModal',\n components: {\n BaseIdModalOpen,\n BaseIdModal,\n BaseIdModalClose\n }\n };\n</script>\n```\n\n## Events\n\nA list of events that the component will emit:\n\n- `UserClickedOutOfModal`: the event is emitted after the user clicks outside the modal. The event\n payload is the id of the modal and a metadata with the target element that emitted it.\n</docs>\n"],"names":[],"mappings":";;;;AAEA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
1
+ {"version":3,"file":"base-id-modal.vue.js","sources":["../../../../src/components/modals/base-id-modal.vue"],"sourcesContent":["<template>\n <BaseModal\n @click:overlay=\"emitClickOutOfModal\"\n @focusin:body=\"emitClickOutOfModal\"\n :animation=\"animation\"\n :open=\"isOpen\"\n v-bind=\"$attrs\"\n >\n <slot />\n </BaseModal>\n</template>\n\n<script lang=\"ts\">\n import Vue from 'vue';\n import { Component, Prop } from 'vue-property-decorator';\n import { XOn } from '../decorators/bus.decorators';\n import { WireMetadata } from '../../wiring/wiring.types';\n import { isElementEqualOrContained } from '../../utils/html';\n import BaseModal from './base-modal.vue';\n\n /**\n * Component containing a modal expecting a required prop, named `modalId`. It reacts to\n * `UserClickedOpenModal`, `UserClickedCloseModal` and `UserClickedOutOfModal` events, when their\n * payload matches the component's 'modalId' prop, to handle its open/close state. The default\n * slot offers the possibility to customise the modal content.\n *\n * @public\n */\n @Component({\n components: { BaseModal }\n })\n export default class BaseIdModal extends Vue {\n /** Animation to use for opening/closing the modal. */\n @Prop()\n public animation?: Vue | string;\n\n /** The modalId to use for the open and close event listeners. */\n @Prop({ required: true })\n public modalId!: string;\n\n /** Whether the modal is open or not. */\n protected isOpen = false;\n\n /** The element that opened the modal. */\n protected openerElement?: HTMLElement;\n\n /**\n * Opens the modal.\n *\n * @param modalId - The payload of the {@link XEventsTypes.UserClickedOpenModal} event.\n * @param metadata - The metadata of the emitted event.\n * @public\n */\n @XOn('UserClickedOpenModal')\n openModal(modalId: string, metadata: WireMetadata): void {\n if (!this.isOpen && this.modalId === modalId) {\n this.openerElement = metadata.target;\n this.isOpen = true;\n }\n }\n\n /**\n * Closes the modal.\n *\n * @param payload - The payload of the closing events:\n * {@link XEventsTypes.UserClickedCloseModal} or {@link XEventsTypes.UserClickedOutOfModal}.\n *\n * @public\n */\n @XOn(['UserClickedCloseModal', 'UserClickedOutOfModal'])\n closeModal(payload: string): void {\n if (this.isOpen && this.modalId === payload) {\n this.isOpen = false;\n }\n }\n\n /**\n * Emits a {@link XEventsTypes.UserClickedOutOfModal} event unless the passed event target\n * is the button that opened the modal.\n *\n * @param event - The event that triggered the close attempt.\n * @public\n */\n protected emitClickOutOfModal(event: MouseEvent | FocusEvent): void {\n // Prevents clicking the open button when the panel is already open to close the panel.\n if (\n !this.openerElement ||\n !isElementEqualOrContained(this.openerElement, event.target as HTMLElement)\n ) {\n this.$x.emit('UserClickedOutOfModal', this.modalId, { target: this.$el as HTMLElement });\n }\n }\n }\n</script>\n\n<docs lang=\"mdx\">\n## Examples\n\nThe `BaseIdModal` component reacts to the `UserClickedOpenModal`, `UserClickedCloseModal` and\n`UserClickedOutOfModal` to handle its open/close state. The component filters out the events which\npayload doesn't match its `modalId` prop and reacts only to those who match this criteria.\n\n### Basic usage\n\nThe component interacts with both `BaseIdModalOpen` and `BaseIdModalClose` components, which have to\nshare the same value in their `modalId` prop to work:\n\n```vue\n<template>\n <div>\n <BaseIdModalOpen modalId=\"myModal\">Open</BaseIdModalOpen>\n <BaseIdModal modalId=\"myModal\">\n <img src=\"success.png\" />\n <BaseIdModalClose modalId=\"myModal\">Close</BaseIdModalClose>\n </BaseIdModal>\n </div>\n</template>\n\n<script>\n import { BaseIdModalOpen, BaseIdModal, BaseIdModalClose } from '@empathyco/x-components';\n\n export default {\n name: 'TestModal',\n components: {\n BaseIdModalOpen,\n BaseIdModal,\n BaseIdModalClose\n }\n };\n</script>\n```\n\n## Events\n\nA list of events that the component will emit:\n\n- `UserClickedOutOfModal`: the event is emitted after the user clicks outside the modal. The event\n payload is the id of the modal and a metadata with the target element that emitted it.\n</docs>\n"],"names":[],"mappings":";;;;AAEA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
package/js/components/modals/base-id-modal.vue_rollup-plugin-vue_script.vue.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"base-id-modal.vue_rollup-plugin-vue_script.vue.js","sources":["../../../../src/components/modals/base-id-modal.vue?rollup-plugin-vue=script.ts"],"sourcesContent":["\n\n\n\n\n\n\n\n\n\n\n\nimport Vue from 'vue';\nimport { Component, Prop } from 'vue-property-decorator';\nimport { XOn } from '../decorators/bus.decorators';\nimport { WireMetadata } from '../../wiring/wiring.types';\nimport { isElementEqualOrContained } from '../../utils/html';\nimport BaseModal from './base-modal.vue';\n\n/**\n * Component containing a modal expecting a required prop, named `modalId`. It reacts to\n * `UserClickedOpenModal`, `UserClickedCloseModal` and `UserClickedOutOfModal` events, when their\n * payload matches the component's 'modalId' prop, to handle its open/close state. The default\n * slot offers the possibility to customise the modal content.\n *\n * @public\n */\n@Component({\n components: { BaseModal }\n})\nexport default class BaseIdModal extends Vue {\n /** Animation to use for opening/closing the modal. */\n @Prop()\n public animation?: Vue | string;\n\n /** The modalId to use for the open and close event listeners. */\n @Prop({ required: true })\n public modalId!: string;\n\n /** Whether the modal is open or not. */\n protected isOpen = false;\n\n /** The element that opened the modal. */\n protected openerElement?: HTMLElement;\n\n /**\n * Opens the modal.\n *\n * @param modalId - The payload of the {@link XEventsTypes.UserClickedOpenModal} event.\n * @param metadata - The metadata of the emitted event.\n * @public\n */\n @XOn('UserClickedOpenModal')\n openModal(modalId: string, metadata: WireMetadata): void {\n if (!this.isOpen && this.modalId === modalId) {\n this.openerElement = metadata.target;\n this.isOpen = true;\n }\n }\n\n /**\n * Closes the modal.\n *\n * @param payload - The payload of the closing events:\n * {@link XEventsTypes.UserClickedCloseModal} or {@link XEventsTypes.UserClickedOutOfModal}.\n *\n * @public\n */\n @XOn(['UserClickedCloseModal', 'UserClickedOutOfModal'])\n closeModal(payload: string): void {\n if (this.isOpen && this.modalId === payload) {\n this.isOpen = false;\n }\n }\n\n /**\n * Emits a {@link XEventsTypes.UserClickedOutOfModal} event unless the passed event target\n * is the button that opened the modal.\n *\n * @param event - The event that triggered the close attempt.\n * @public\n */\n protected emitClickOutOfModal(event: MouseEvent | FocusEvent): void {\n // Prevents clicking the open button when the panel is already open to close the panel.\n if (\n !this.openerElement ||\n !isElementEqualOrContained(this.openerElement, event.target as HTMLElement)\n ) {\n this.$x.emit('UserClickedOutOfModal', this.modalId, { target: this.$el as HTMLElement });\n }\n }\n}\n"],"names":["BaseModal"],"mappings":";;;;;;;AAmBA;;;;;;;;AAWA,IAAqB,WAAW,GAAhC,MAAqB,WAAY,SAAQ,GAAG;IAA5C;;;QAUY,WAAM,GAAG,KAAK,CAAC;KAmD1B;;;;;;;;IAtCC,SAAS,CAAC,OAAe,EAAE,QAAsB;QAC/C,IAAI,CAAC,IAAI,CAAC,MAAM,IAAI,IAAI,CAAC,OAAO,KAAK,OAAO,EAAE;YAC5C,IAAI,CAAC,aAAa,GAAG,QAAQ,CAAC,MAAM,CAAC;YACrC,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC;SACpB;KACF;;;;;;;;;IAWD,UAAU,CAAC,OAAe;QACxB,IAAI,IAAI,CAAC,MAAM,IAAI,IAAI,CAAC,OAAO,KAAK,OAAO,EAAE;YAC3C,IAAI,CAAC,MAAM,GAAG,KAAK,CAAC;SACrB;KACF;;;;;;;;IASS,mBAAmB,CAAC,KAA8B;;QAE1D,IACE,CAAC,IAAI,CAAC,aAAa;YACnB,CAAC,yBAAyB,CAAC,IAAI,CAAC,aAAa,EAAE,KAAK,CAAC,MAAqB,CAAC,EAC3E;YACA,IAAI,CAAC,EAAE,CAAC,IAAI,CAAC,uBAAuB,EAAE,IAAI,CAAC,OAAO,EAAE,EAAE,MAAM,EAAE,IAAI,CAAC,GAAkB,EAAE,CAAC,CAAC;SAC1F;KACF;CACF,CAAA;AA1DC;IADC,IAAI,EAAE;8CACyB;AAIhC;IADC,IAAI,CAAC,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC;4CACD;AAgBxB;IADC,GAAG,CAAC,sBAAsB,CAAC;4CAM3B;AAWD;IADC,GAAG,CAAC,CAAC,uBAAuB,EAAE,uBAAuB,CAAC,CAAC;6CAKvD;AA3CkB,WAAW;IAH/B,SAAS,CAAC;QACT,UAAU,EAAE,aAAEA,iBAAS,EAAE;KAC1B,CAAC;GACmB,WAAW,CA6D/B;aA7DoB,WAAW;;;;"}
1
+ {"version":3,"file":"base-id-modal.vue_rollup-plugin-vue_script.vue.js","sources":["../../../../src/components/modals/base-id-modal.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 { XOn } from '../decorators/bus.decorators';\nimport { WireMetadata } from '../../wiring/wiring.types';\nimport { isElementEqualOrContained } from '../../utils/html';\nimport BaseModal from './base-modal.vue';\n\n/**\n * Component containing a modal expecting a required prop, named `modalId`. It reacts to\n * `UserClickedOpenModal`, `UserClickedCloseModal` and `UserClickedOutOfModal` events, when their\n * payload matches the component's 'modalId' prop, to handle its open/close state. The default\n * slot offers the possibility to customise the modal content.\n *\n * @public\n */\n@Component({\n components: { BaseModal }\n})\nexport default class BaseIdModal extends Vue {\n /** Animation to use for opening/closing the modal. */\n @Prop()\n public animation?: Vue | string;\n\n /** The modalId to use for the open and close event listeners. */\n @Prop({ required: true })\n public modalId!: string;\n\n /** Whether the modal is open or not. */\n protected isOpen = false;\n\n /** The element that opened the modal. */\n protected openerElement?: HTMLElement;\n\n /**\n * Opens the modal.\n *\n * @param modalId - The payload of the {@link XEventsTypes.UserClickedOpenModal} event.\n * @param metadata - The metadata of the emitted event.\n * @public\n */\n @XOn('UserClickedOpenModal')\n openModal(modalId: string, metadata: WireMetadata): void {\n if (!this.isOpen && this.modalId === modalId) {\n this.openerElement = metadata.target;\n this.isOpen = true;\n }\n }\n\n /**\n * Closes the modal.\n *\n * @param payload - The payload of the closing events:\n * {@link XEventsTypes.UserClickedCloseModal} or {@link XEventsTypes.UserClickedOutOfModal}.\n *\n * @public\n */\n @XOn(['UserClickedCloseModal', 'UserClickedOutOfModal'])\n closeModal(payload: string): void {\n if (this.isOpen && this.modalId === payload) {\n this.isOpen = false;\n }\n }\n\n /**\n * Emits a {@link XEventsTypes.UserClickedOutOfModal} event unless the passed event target\n * is the button that opened the modal.\n *\n * @param event - The event that triggered the close attempt.\n * @public\n */\n protected emitClickOutOfModal(event: MouseEvent | FocusEvent): void {\n // Prevents clicking the open button when the panel is already open to close the panel.\n if (\n !this.openerElement ||\n !isElementEqualOrContained(this.openerElement, event.target as HTMLElement)\n ) {\n this.$x.emit('UserClickedOutOfModal', this.modalId, { target: this.$el as HTMLElement });\n }\n }\n}\n"],"names":["BaseModal"],"mappings":";;;;;;;AAoBA;;;;;;;;AAWA,IAAqB,WAAW,GAAhC,MAAqB,WAAY,SAAQ,GAAG;IAA5C;;;QAUY,WAAM,GAAG,KAAK,CAAC;KAmD1B;;;;;;;;IAtCC,SAAS,CAAC,OAAe,EAAE,QAAsB;QAC/C,IAAI,CAAC,IAAI,CAAC,MAAM,IAAI,IAAI,CAAC,OAAO,KAAK,OAAO,EAAE;YAC5C,IAAI,CAAC,aAAa,GAAG,QAAQ,CAAC,MAAM,CAAC;YACrC,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC;SACpB;KACF;;;;;;;;;IAWD,UAAU,CAAC,OAAe;QACxB,IAAI,IAAI,CAAC,MAAM,IAAI,IAAI,CAAC,OAAO,KAAK,OAAO,EAAE;YAC3C,IAAI,CAAC,MAAM,GAAG,KAAK,CAAC;SACrB;KACF;;;;;;;;IASS,mBAAmB,CAAC,KAA8B;;QAE1D,IACE,CAAC,IAAI,CAAC,aAAa;YACnB,CAAC,yBAAyB,CAAC,IAAI,CAAC,aAAa,EAAE,KAAK,CAAC,MAAqB,CAAC,EAC3E;YACA,IAAI,CAAC,EAAE,CAAC,IAAI,CAAC,uBAAuB,EAAE,IAAI,CAAC,OAAO,EAAE,EAAE,MAAM,EAAE,IAAI,CAAC,GAAkB,EAAE,CAAC,CAAC;SAC1F;KACF;CACF,CAAA;AA1DC;IADC,IAAI,EAAE;8CACyB;AAIhC;IADC,IAAI,CAAC,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC;4CACD;AAgBxB;IADC,GAAG,CAAC,sBAAsB,CAAC;4CAM3B;AAWD;IADC,GAAG,CAAC,CAAC,uBAAuB,EAAE,uBAAuB,CAAC,CAAC;6CAKvD;AA3CkB,WAAW;IAH/B,SAAS,CAAC;QACT,UAAU,EAAE,aAAEA,iBAAS,EAAE;KAC1B,CAAC;GACmB,WAAW,CA6D/B;aA7DoB,WAAW;;;;"}
package/js/components/modals/base-modal.vue.js CHANGED
@@ -20,6 +20,7 @@ var __vue_render__ = function () {
20
20
  expression: "isWaitingForLeave || open",
21
21
  },
22
22
  ],
23
+ ref: "modal",
23
24
  staticClass: "x-modal",
24
25
  attrs: { "data-test": "modal" },
25
26
  },
@@ -42,7 +43,7 @@ var __vue_render__ = function () {
42
43
  ? _c(
43
44
  "div",
44
45
  {
45
- ref: "modal",
46
+ ref: "modalContent",
46
47
  staticClass: "x-modal__content x-list",
47
48
  attrs: { "data-test": "modal-content", role: "dialog" },
48
49
  },
@@ -75,7 +76,7 @@ __vue_render__._withStripped = true;
75
76
  /* style */
76
77
  const __vue_inject_styles__ = undefined;
77
78
  /* scoped */
78
- const __vue_scope_id__ = "data-v-2b254d0a";
79
+ const __vue_scope_id__ = "data-v-32e69a66";
79
80
  /* module identifier */
80
81
  const __vue_module_identifier__ = undefined;
81
82
  /* functional template */
package/js/components/modals/base-modal.vue.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"base-modal.vue.js","sources":["../../../../src/components/modals/base-modal.vue"],"sourcesContent":["<template>\n <div v-show=\"isWaitingForLeave || open\" class=\"x-modal\" data-test=\"modal\">\n <component\n :is=\"animation\"\n @before-leave=\"isWaitingForLeave = true\"\n @after-leave=\"isWaitingForLeave = false\"\n >\n <div\n v-if=\"open\"\n ref=\"modal\"\n class=\"x-modal__content x-list\"\n data-test=\"modal-content\"\n role=\"dialog\"\n >\n <!-- @slot (Required) Modal container content -->\n <slot />\n </div>\n </component>\n <component :is=\"overlayAnimation\">\n <div\n v-if=\"open\"\n @click=\"emitOverlayClicked\"\n @keydown=\"emitOverlayClicked\"\n class=\"x-modal__overlay\"\n data-test=\"modal-overlay\"\n />\n </component>\n </div>\n</template>\n\n<script lang=\"ts\">\n import Vue from 'vue';\n import { Component, Prop } from 'vue-property-decorator';\n import Fade from '../animations/fade.vue';\n import { NoElement } from '../no-element';\n import { FOCUSABLE_SELECTORS } from '../../utils/focus';\n\n /**\n * Base component with no XPlugin dependencies that serves as a utility for constructing more\n * complex modals.\n *\n * @public\n */\n @Component\n export default class BaseModal extends Vue {\n /**\n * Animation to use for opening/closing the modal. This animation only affects the content.\n */\n @Prop({ default: () => NoElement })\n public animation!: Vue | string;\n\n /**\n * Animation to use for the overlay (backdrop) part of the modal. By default, it uses\n * a fade transition.\n */\n @Prop({ default: () => Fade })\n public overlayAnimation!: Vue | string;\n\n /**\n * Determines if the modal is open or not.\n */\n @Prop({ required: true })\n public open!: boolean;\n\n /**\n * Determines if the focused element changes to one inside the modal when it opens. Either the\n * first element with a positive tabindex or just the first focusable element.\n */\n @Prop({ default: true })\n public focusOnOpen!: boolean;\n\n /** The previous value of the body overflow style. */\n protected previousBodyOverflow = '';\n /** The previous value of the HTML element overflow style. */\n protected previousHTMLOverflow = '';\n /** Boolean to delay the leave animation until it has completed. */\n protected isWaitingForLeave = false;\n\n public $refs!: {\n modal: HTMLDivElement;\n };\n\n protected mounted(): void {\n /* Watcher added after mount to prevent SSR from breaking */\n // eslint-disable-next-line @typescript-eslint/unbound-method\n this.$watch('open', this.syncBody);\n if (this.open) {\n this.syncBody(true);\n }\n }\n\n /**\n * Syncs the body to the open state of the modal, adding or removing styles and listeners.\n *\n * @param isOpen - True when the modal is opened.\n * @internal\n */\n protected syncBody(isOpen: boolean): void {\n if (isOpen) {\n this.disableScroll();\n this.addBodyListeners();\n /* eslint-disable @typescript-eslint/unbound-method */\n this.$on('hook:beforeDestroy', this.removeBodyListeners);\n this.$on('hook:beforeDestroy', this.enableScroll);\n /* eslint-enable @typescript-eslint/unbound-method */\n if (this.focusOnOpen) {\n this.setFocus();\n }\n } else {\n this.enableScroll();\n this.removeBodyListeners();\n /* eslint-disable @typescript-eslint/unbound-method */\n this.$off('hook:beforeDestroy', this.removeBodyListeners);\n this.$off('hook:beforeDestroy', this.enableScroll);\n /* eslint-enable @typescript-eslint/unbound-method */\n }\n }\n\n /**\n * Disables the scroll of both the body and the window.\n *\n * @internal\n */\n protected disableScroll(): void {\n this.previousBodyOverflow = document.body.style.overflow;\n this.previousHTMLOverflow = document.documentElement.style.overflow;\n document.body.style.overflow = document.documentElement.style.overflow = 'hidden';\n }\n\n /**\n * Restores the scroll of both the body and the window.\n *\n * @internal\n */\n protected enableScroll(): void {\n document.body.style.overflow = this.previousBodyOverflow;\n document.documentElement.style.overflow = this.previousHTMLOverflow;\n }\n\n /**\n * Adds listeners to the body element ot detect if the modal should be closed.\n *\n * @internal\n */\n protected addBodyListeners(): void {\n /* eslint-disable @typescript-eslint/unbound-method */\n document.body.addEventListener('focusin', this.emitFocusInBody);\n /* eslint-enable @typescript-eslint/unbound-method */\n }\n\n /**\n * Removes the body listeners.\n *\n * @internal\n */\n protected removeBodyListeners(): void {\n /* eslint-disable @typescript-eslint/unbound-method */\n document.body.removeEventListener('focusin', this.emitFocusInBody);\n /* eslint-enable @typescript-eslint/unbound-method */\n }\n\n /**\n * Emits the `click:overlay` event if the click has been triggered in the overlay layer.\n *\n * @param event - The click event.\n * @internal\n */\n protected emitOverlayClicked(event: MouseEvent): void {\n this.$emit('click:overlay', event);\n }\n\n /**\n * Emits the `focusin:body` event if a focus event has been triggered outside the modal.\n *\n * @param event - The focusin event.\n * @internal\n */\n protected emitFocusInBody(event: FocusEvent): void {\n if (!this.$refs.modal.contains(event.target as HTMLElement)) {\n this.$emit('focusin:body', event);\n }\n }\n\n /**\n * Sets the focused element to the first element either the first element with a positive\n * tabindex or, if there isn't any, the first focusable element inside the modal.\n *\n * @internal\n */\n protected setFocus(): void {\n const focusCandidates: HTMLElement[] = Array.from(\n this.$refs.modal.querySelectorAll(FOCUSABLE_SELECTORS)\n );\n\n const elementToFocus =\n focusCandidates.find(element => element.tabIndex) ?? focusCandidates[0];\n\n elementToFocus?.focus();\n }\n }\n</script>\n\n<style lang=\"scss\" scoped>\n .x-modal {\n position: fixed;\n top: 0;\n left: 0;\n display: flex;\n align-items: flex-start;\n justify-content: flex-start;\n width: 100%;\n height: 100%;\n z-index: 1;\n\n &__content {\n z-index: 1;\n }\n\n &__overlay {\n width: 100%;\n height: 100%;\n position: absolute;\n background-color: var(--x-modal-overlay-color, rgb(0, 0, 0));\n opacity: var(--x-modal-overlay-opacity, 0.7);\n }\n }\n</style>\n\n<docs lang=\"mdx\">\n## Examples\n\nThe `BaseModal` is a simple component that serves to create complex modals. Its open state has to be\npassed via prop. It also accepts an animation to use for opening & closing.\n\nIt emits a `click:overlay` event when any part out of the content is clicked, but only if the modal\nis open.\n\n```vue\n<template>\n <div>\n <button @click=\"open = true\">Open modal</button>\n <BaseModal animation=\"fadeAndSlide\" :open=\"open\" @click:overlay=\"open = false\">\n <h1>Hello</h1>\n <p>The modal is working</p>\n <button @click=\"open = false\">Close modal</button>\n </BaseModal>\n </div>\n</template>\n\n<script>\n import { BaseModal, FadeAndSlide } from '@empathyco/x-components';\n import Vue from 'vue';\n\n Vue.component('fadeAndSlide', FadeAndSlide);\n\n export default {\n components: {\n BaseModal\n },\n data() {\n return {\n open: false\n };\n }\n };\n</script>\n```\n\n## Vue Events\n\nA list of events that the component will emit:\n\n- `click:overlay`: the event is emitted after the user clicks any part out of the content but only\n if the modal is open. The event payload is the mouse event that triggers it.\n- `focusin:body`: the event is emitted after the user focus in any part out of the content but only\n if the modal is open. The event payload is the focus event that triggers it.\n</docs>\n"],"names":[],"mappings":";;;;;AAEA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
1
+ {"version":3,"file":"base-modal.vue.js","sources":["../../../../src/components/modals/base-modal.vue"],"sourcesContent":["<template>\n <div v-show=\"isWaitingForLeave || open\" ref=\"modal\" class=\"x-modal\" data-test=\"modal\">\n <component\n :is=\"animation\"\n @before-leave=\"isWaitingForLeave = true\"\n @after-leave=\"isWaitingForLeave = false\"\n >\n <div\n v-if=\"open\"\n ref=\"modalContent\"\n class=\"x-modal__content x-list\"\n data-test=\"modal-content\"\n role=\"dialog\"\n >\n <!-- @slot (Required) Modal container content -->\n <slot />\n </div>\n </component>\n <component :is=\"overlayAnimation\">\n <div\n v-if=\"open\"\n @click=\"emitOverlayClicked\"\n @keydown=\"emitOverlayClicked\"\n class=\"x-modal__overlay\"\n data-test=\"modal-overlay\"\n />\n </component>\n </div>\n</template>\n\n<script lang=\"ts\">\n import Vue from 'vue';\n import { Component, Prop } from 'vue-property-decorator';\n import Fade from '../animations/fade.vue';\n import { NoElement } from '../no-element';\n import { FOCUSABLE_SELECTORS } from '../../utils/focus';\n import { Debounce } from '../decorators/debounce.decorators';\n\n /**\n * Base component with no XPlugin dependencies that serves as a utility for constructing more\n * complex modals.\n *\n * @public\n */\n @Component\n export default class BaseModal extends Vue {\n /**\n * Animation to use for opening/closing the modal. This animation only affects the content.\n */\n @Prop({ default: () => NoElement })\n public animation!: Vue | string;\n\n /**\n * Animation to use for the overlay (backdrop) part of the modal. By default, it uses\n * a fade transition.\n */\n @Prop({ default: () => Fade })\n public overlayAnimation!: Vue | string;\n\n /**\n * Determines if the modal is open or not.\n */\n @Prop({ required: true })\n public open!: boolean;\n\n /**\n * Determines if the focused element changes to one inside the modal when it opens. Either the\n * first element with a positive tabindex or just the first focusable element.\n */\n @Prop({ default: true })\n public focusOnOpen!: boolean;\n\n /**\n * The reference selector of a DOM element to use as reference to position the modal.\n * This selector can be an ID or a class, if it is a class, it will use the first\n * element that matches.\n */\n @Prop()\n public referenceSelector?: string;\n\n /**\n * The previous value of the body overflow style.\n */\n protected previousBodyOverflow = '';\n /**\n * The previous value of the HTML element overflow style.\n */\n protected previousHTMLOverflow = '';\n /**\n * Boolean to delay the leave animation until it has completed.\n */\n protected isWaitingForLeave = false;\n /**\n * The reference element to use to find the modal's position.\n */\n protected referenceElement!: HTMLElement;\n\n public $refs!: {\n /**\n * Reference to the modal element in the DOM.\n */\n modal: HTMLDivElement;\n /**\n * Reference to the modal content element in the DOM.\n */\n modalContent: HTMLDivElement;\n };\n\n protected mounted(): void {\n /* Watcher added after mount to prevent SSR from breaking */\n // eslint-disable-next-line @typescript-eslint/unbound-method\n this.$watch('open', this.syncBody);\n if (this.open) {\n this.syncBody(true);\n }\n\n // eslint-disable-next-line @typescript-eslint/unbound-method\n const resizeObserver = new ResizeObserver(this.updatePosition);\n\n this.$watch(\n 'clientHeaderSelector',\n () => {\n if (this.referenceSelector) {\n const element = document.querySelector(this.referenceSelector) as HTMLElement;\n if (element) {\n this.referenceElement = element;\n resizeObserver.observe(element);\n }\n }\n },\n { immediate: true }\n );\n\n this.$on('hook:beforeDestroy', () => {\n resizeObserver.disconnect();\n });\n }\n\n /**\n * Updates the position of the modal setting the top of the element depending\n * on the selector. The modal will be placed under this selector.\n *\n * @internal\n */\n @Debounce(100, { leading: true })\n updatePosition(): void {\n const { height, y } = this.referenceElement?.getBoundingClientRect() ?? { height: 0, y: 0 };\n this.$refs.modal.style.top = `${height + y}px`;\n this.$refs.modal.style.bottom = '0';\n this.$refs.modal.style.height = 'auto';\n }\n\n /**\n * Syncs the body to the open state of the modal, adding or removing styles and listeners.\n *\n * @param isOpen - True when the modal is opened.\n * @internal\n */\n protected syncBody(isOpen: boolean): void {\n if (isOpen) {\n this.disableScroll();\n this.addBodyListeners();\n /* eslint-disable @typescript-eslint/unbound-method */\n this.$on('hook:beforeDestroy', this.removeBodyListeners);\n this.$on('hook:beforeDestroy', this.enableScroll);\n /* eslint-enable @typescript-eslint/unbound-method */\n if (this.focusOnOpen) {\n this.setFocus();\n }\n } else {\n this.enableScroll();\n this.removeBodyListeners();\n /* eslint-disable @typescript-eslint/unbound-method */\n this.$off('hook:beforeDestroy', this.removeBodyListeners);\n this.$off('hook:beforeDestroy', this.enableScroll);\n /* eslint-enable @typescript-eslint/unbound-method */\n }\n }\n\n /**\n * Disables the scroll of both the body and the window.\n *\n * @internal\n */\n protected disableScroll(): void {\n this.previousBodyOverflow = document.body.style.overflow;\n this.previousHTMLOverflow = document.documentElement.style.overflow;\n document.body.style.overflow = document.documentElement.style.overflow = 'hidden';\n }\n\n /**\n * Restores the scroll of both the body and the window.\n *\n * @internal\n */\n protected enableScroll(): void {\n document.body.style.overflow = this.previousBodyOverflow;\n document.documentElement.style.overflow = this.previousHTMLOverflow;\n }\n\n /**\n * Adds listeners to the body element ot detect if the modal should be closed.\n *\n * @internal\n */\n protected addBodyListeners(): void {\n /* eslint-disable @typescript-eslint/unbound-method */\n document.body.addEventListener('focusin', this.emitFocusInBody);\n /* eslint-enable @typescript-eslint/unbound-method */\n }\n\n /**\n * Removes the body listeners.\n *\n * @internal\n */\n protected removeBodyListeners(): void {\n /* eslint-disable @typescript-eslint/unbound-method */\n document.body.removeEventListener('focusin', this.emitFocusInBody);\n /* eslint-enable @typescript-eslint/unbound-method */\n }\n\n /**\n * Emits the `click:overlay` event if the click has been triggered in the overlay layer.\n *\n * @param event - The click event.\n * @internal\n */\n protected emitOverlayClicked(event: MouseEvent): void {\n this.$emit('click:overlay', event);\n }\n\n /**\n * Emits the `focusin:body` event if a focus event has been triggered outside the modal.\n *\n * @param event - The focusin event.\n * @internal\n */\n protected emitFocusInBody(event: FocusEvent): void {\n if (!this.$refs.modalContent.contains(event.target as HTMLElement)) {\n this.$emit('focusin:body', event);\n }\n }\n\n /**\n * Sets the focused element to the first element either the first element with a positive\n * tabindex or, if there isn't any, the first focusable element inside the modal.\n *\n * @internal\n */\n protected setFocus(): void {\n const focusCandidates: HTMLElement[] = Array.from(\n this.$refs.modalContent.querySelectorAll(FOCUSABLE_SELECTORS)\n );\n\n const elementToFocus =\n focusCandidates.find(element => element.tabIndex) ?? focusCandidates[0];\n\n elementToFocus?.focus();\n }\n }\n</script>\n\n<style lang=\"scss\" scoped>\n .x-modal {\n position: fixed;\n top: 0;\n left: 0;\n display: flex;\n align-items: flex-start;\n justify-content: flex-start;\n width: 100%;\n height: 100%;\n z-index: 1;\n\n &__content {\n z-index: 1;\n }\n\n &__overlay {\n width: 100%;\n height: 100%;\n position: absolute;\n background-color: var(--x-modal-overlay-color, rgb(0, 0, 0));\n opacity: var(--x-modal-overlay-opacity, 0.7);\n }\n }\n</style>\n\n<docs lang=\"mdx\">\n## Examples\n\nThe `BaseModal` is a simple component that serves to create complex modals. Its open state has to be\npassed via prop. There is a prop, `referenceSelector`, used to place the modal under some element\ninstead of set the top of the element directly. It also accepts an animation to use for opening &\nclosing.\n\nIt emits a `click:overlay` event when any part out of the content is clicked, but only if the modal\nis open.\n\n```vue\n<template>\n <div>\n <button @click=\"open = true\">Open modal</button>\n <BaseModal\n :animation=\"fadeAndSlide\"\n :open=\"open\"\n @click:overlay=\"open = false\"\n referenceSelector=\".header\"\n >\n <h1>Hello</h1>\n <p>The modal is working</p>\n <button @click=\"open = false\">Close modal</button>\n </BaseModal>\n </div>\n</template>\n\n<script>\n import { BaseModal, FadeAndSlide } from '@empathyco/x-components';\n import Vue from 'vue';\n\n Vue.component('fadeAndSlide', FadeAndSlide);\n\n export default {\n components: {\n BaseModal\n },\n data() {\n return {\n open: false\n };\n }\n };\n</script>\n```\n\n## Vue Events\n\nA list of events that the component will emit:\n\n- `click:overlay`: the event is emitted after the user clicks any part out of the content but only\n if the modal is open. The event payload is the mouse event that triggers it.\n- `focusin:body`: the event is emitted after the user focus in any part out of the content but only\n if the modal is open. The event payload is the focus event that triggers it.\n</docs>\n"],"names":[],"mappings":";;;;;AAEA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
package/js/components/modals/base-modal.vue_rollup-plugin-vue_script.vue.js CHANGED
@@ -4,6 +4,7 @@ import { Prop, Component } from 'vue-property-decorator';
4
4
  import __vue_component__ from '../animations/fade.vue.js';
5
5
  import { NoElement } from '../no-element.js';
6
6
  import { FOCUSABLE_SELECTORS } from '../../utils/focus.js';
7
+ import { Debounce } from '../decorators/debounce.decorators.js';
7
8
 
8
9
  /**
9
10
  * Base component with no XPlugin dependencies that serves as a utility for constructing more
@@ -14,11 +15,17 @@ import { FOCUSABLE_SELECTORS } from '../../utils/focus.js';
14
15
  let BaseModal = class BaseModal extends Vue {
15
16
  constructor() {
16
17
  super(...arguments);
17
- /** The previous value of the body overflow style. */
18
+ /**
19
+ * The previous value of the body overflow style.
20
+ */
18
21
  this.previousBodyOverflow = '';
19
- /** The previous value of the HTML element overflow style. */
22
+ /**
23
+ * The previous value of the HTML element overflow style.
24
+ */
20
25
  this.previousHTMLOverflow = '';
21
- /** Boolean to delay the leave animation until it has completed. */
26
+ /**
27
+ * Boolean to delay the leave animation until it has completed.
28
+ */
22
29
  this.isWaitingForLeave = false;
23
30
  }
24
31
  mounted() {
@@ -28,6 +35,32 @@ let BaseModal = class BaseModal extends Vue {
28
35
  if (this.open) {
29
36
  this.syncBody(true);
30
37
  }
38
+ // eslint-disable-next-line @typescript-eslint/unbound-method
39
+ const resizeObserver = new ResizeObserver(this.updatePosition);
40
+ this.$watch('clientHeaderSelector', () => {
41
+ if (this.referenceSelector) {
42
+ const element = document.querySelector(this.referenceSelector);
43
+ if (element) {
44
+ this.referenceElement = element;
45
+ resizeObserver.observe(element);
46
+ }
47
+ }
48
+ }, { immediate: true });
49
+ this.$on('hook:beforeDestroy', () => {
50
+ resizeObserver.disconnect();
51
+ });
52
+ }
53
+ /**
54
+ * Updates the position of the modal setting the top of the element depending
55
+ * on the selector. The modal will be placed under this selector.
56
+ *
57
+ * @internal
58
+ */
59
+ updatePosition() {
60
+ const { height, y } = this.referenceElement?.getBoundingClientRect() ?? { height: 0, y: 0 };
61
+ this.$refs.modal.style.top = `${height + y}px`;
62
+ this.$refs.modal.style.bottom = '0';
63
+ this.$refs.modal.style.height = 'auto';
31
64
  }
32
65
  /**
33
66
  * Syncs the body to the open state of the modal, adding or removing styles and listeners.
@@ -111,7 +144,7 @@ let BaseModal = class BaseModal extends Vue {
111
144
  * @internal
112
145
  */
113
146
  emitFocusInBody(event) {
114
- if (!this.$refs.modal.contains(event.target)) {
147
+ if (!this.$refs.modalContent.contains(event.target)) {
115
148
  this.$emit('focusin:body', event);
116
149
  }
117
150
  }
@@ -122,7 +155,7 @@ let BaseModal = class BaseModal extends Vue {
122
155
  * @internal
123
156
  */
124
157
  setFocus() {
125
- const focusCandidates = Array.from(this.$refs.modal.querySelectorAll(FOCUSABLE_SELECTORS));
158
+ const focusCandidates = Array.from(this.$refs.modalContent.querySelectorAll(FOCUSABLE_SELECTORS));
126
159
  const elementToFocus = focusCandidates.find(element => element.tabIndex) ?? focusCandidates[0];
127
160
  elementToFocus?.focus();
128
161
  }
@@ -139,6 +172,12 @@ __decorate([
139
172
  __decorate([
140
173
  Prop({ default: true })
141
174
  ], BaseModal.prototype, "focusOnOpen", void 0);
175
+ __decorate([
176
+ Prop()
177
+ ], BaseModal.prototype, "referenceSelector", void 0);
178
+ __decorate([
179
+ Debounce(100, { leading: true })
180
+ ], BaseModal.prototype, "updatePosition", null);
142
181
  BaseModal = __decorate([
143
182
  Component
144
183
  ], BaseModal);
package/js/components/modals/base-modal.vue_rollup-plugin-vue_script.vue.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"base-modal.vue_rollup-plugin-vue_script.vue.js","sources":["../../../../src/components/modals/base-modal.vue?rollup-plugin-vue=script.ts"],"sourcesContent":["\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\nimport Vue from 'vue';\nimport { Component, Prop } from 'vue-property-decorator';\nimport Fade from '../animations/fade.vue';\nimport { NoElement } from '../no-element';\nimport { FOCUSABLE_SELECTORS } from '../../utils/focus';\n\n/**\n * Base component with no XPlugin dependencies that serves as a utility for constructing more\n * complex modals.\n *\n * @public\n */\n@Component\nexport default class BaseModal extends Vue {\n /**\n * Animation to use for opening/closing the modal. This animation only affects the content.\n */\n @Prop({ default: () => NoElement })\n public animation!: Vue | string;\n\n /**\n * Animation to use for the overlay (backdrop) part of the modal. By default, it uses\n * a fade transition.\n */\n @Prop({ default: () => Fade })\n public overlayAnimation!: Vue | string;\n\n /**\n * Determines if the modal is open or not.\n */\n @Prop({ required: true })\n public open!: boolean;\n\n /**\n * Determines if the focused element changes to one inside the modal when it opens. Either the\n * first element with a positive tabindex or just the first focusable element.\n */\n @Prop({ default: true })\n public focusOnOpen!: boolean;\n\n /** The previous value of the body overflow style. */\n protected previousBodyOverflow = '';\n /** The previous value of the HTML element overflow style. */\n protected previousHTMLOverflow = '';\n /** Boolean to delay the leave animation until it has completed. */\n protected isWaitingForLeave = false;\n\n public $refs!: {\n modal: HTMLDivElement;\n };\n\n protected mounted(): void {\n /* Watcher added after mount to prevent SSR from breaking */\n // eslint-disable-next-line @typescript-eslint/unbound-method\n this.$watch('open', this.syncBody);\n if (this.open) {\n this.syncBody(true);\n }\n }\n\n /**\n * Syncs the body to the open state of the modal, adding or removing styles and listeners.\n *\n * @param isOpen - True when the modal is opened.\n * @internal\n */\n protected syncBody(isOpen: boolean): void {\n if (isOpen) {\n this.disableScroll();\n this.addBodyListeners();\n /* eslint-disable @typescript-eslint/unbound-method */\n this.$on('hook:beforeDestroy', this.removeBodyListeners);\n this.$on('hook:beforeDestroy', this.enableScroll);\n /* eslint-enable @typescript-eslint/unbound-method */\n if (this.focusOnOpen) {\n this.setFocus();\n }\n } else {\n this.enableScroll();\n this.removeBodyListeners();\n /* eslint-disable @typescript-eslint/unbound-method */\n this.$off('hook:beforeDestroy', this.removeBodyListeners);\n this.$off('hook:beforeDestroy', this.enableScroll);\n /* eslint-enable @typescript-eslint/unbound-method */\n }\n }\n\n /**\n * Disables the scroll of both the body and the window.\n *\n * @internal\n */\n protected disableScroll(): void {\n this.previousBodyOverflow = document.body.style.overflow;\n this.previousHTMLOverflow = document.documentElement.style.overflow;\n document.body.style.overflow = document.documentElement.style.overflow = 'hidden';\n }\n\n /**\n * Restores the scroll of both the body and the window.\n *\n * @internal\n */\n protected enableScroll(): void {\n document.body.style.overflow = this.previousBodyOverflow;\n document.documentElement.style.overflow = this.previousHTMLOverflow;\n }\n\n /**\n * Adds listeners to the body element ot detect if the modal should be closed.\n *\n * @internal\n */\n protected addBodyListeners(): void {\n /* eslint-disable @typescript-eslint/unbound-method */\n document.body.addEventListener('focusin', this.emitFocusInBody);\n /* eslint-enable @typescript-eslint/unbound-method */\n }\n\n /**\n * Removes the body listeners.\n *\n * @internal\n */\n protected removeBodyListeners(): void {\n /* eslint-disable @typescript-eslint/unbound-method */\n document.body.removeEventListener('focusin', this.emitFocusInBody);\n /* eslint-enable @typescript-eslint/unbound-method */\n }\n\n /**\n * Emits the `click:overlay` event if the click has been triggered in the overlay layer.\n *\n * @param event - The click event.\n * @internal\n */\n protected emitOverlayClicked(event: MouseEvent): void {\n this.$emit('click:overlay', event);\n }\n\n /**\n * Emits the `focusin:body` event if a focus event has been triggered outside the modal.\n *\n * @param event - The focusin event.\n * @internal\n */\n protected emitFocusInBody(event: FocusEvent): void {\n if (!this.$refs.modal.contains(event.target as HTMLElement)) {\n this.$emit('focusin:body', event);\n }\n }\n\n /**\n * Sets the focused element to the first element either the first element with a positive\n * tabindex or, if there isn't any, the first focusable element inside the modal.\n *\n * @internal\n */\n protected setFocus(): void {\n const focusCandidates: HTMLElement[] = Array.from(\n this.$refs.modal.querySelectorAll(FOCUSABLE_SELECTORS)\n );\n\n const elementToFocus =\n focusCandidates.find(element => element.tabIndex) ?? focusCandidates[0];\n\n elementToFocus?.focus();\n }\n}\n"],"names":["Fade"],"mappings":"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"}
1
+ {"version":3,"file":"base-modal.vue_rollup-plugin-vue_script.vue.js","sources":["../../../../src/components/modals/base-modal.vue?rollup-plugin-vue=script.ts"],"sourcesContent":["\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\nimport Vue from 'vue';\nimport { Component, Prop } from 'vue-property-decorator';\nimport Fade from '../animations/fade.vue';\nimport { NoElement } from '../no-element';\nimport { FOCUSABLE_SELECTORS } from '../../utils/focus';\nimport { Debounce } from '../decorators/debounce.decorators';\n\n/**\n * Base component with no XPlugin dependencies that serves as a utility for constructing more\n * complex modals.\n *\n * @public\n */\n@Component\nexport default class BaseModal extends Vue {\n /**\n * Animation to use for opening/closing the modal. This animation only affects the content.\n */\n @Prop({ default: () => NoElement })\n public animation!: Vue | string;\n\n /**\n * Animation to use for the overlay (backdrop) part of the modal. By default, it uses\n * a fade transition.\n */\n @Prop({ default: () => Fade })\n public overlayAnimation!: Vue | string;\n\n /**\n * Determines if the modal is open or not.\n */\n @Prop({ required: true })\n public open!: boolean;\n\n /**\n * Determines if the focused element changes to one inside the modal when it opens. Either the\n * first element with a positive tabindex or just the first focusable element.\n */\n @Prop({ default: true })\n public focusOnOpen!: boolean;\n\n /**\n * The reference selector of a DOM element to use as reference to position the modal.\n * This selector can be an ID or a class, if it is a class, it will use the first\n * element that matches.\n */\n @Prop()\n public referenceSelector?: string;\n\n /**\n * The previous value of the body overflow style.\n */\n protected previousBodyOverflow = '';\n /**\n * The previous value of the HTML element overflow style.\n */\n protected previousHTMLOverflow = '';\n /**\n * Boolean to delay the leave animation until it has completed.\n */\n protected isWaitingForLeave = false;\n /**\n * The reference element to use to find the modal's position.\n */\n protected referenceElement!: HTMLElement;\n\n public $refs!: {\n /**\n * Reference to the modal element in the DOM.\n */\n modal: HTMLDivElement;\n /**\n * Reference to the modal content element in the DOM.\n */\n modalContent: HTMLDivElement;\n };\n\n protected mounted(): void {\n /* Watcher added after mount to prevent SSR from breaking */\n // eslint-disable-next-line @typescript-eslint/unbound-method\n this.$watch('open', this.syncBody);\n if (this.open) {\n this.syncBody(true);\n }\n\n // eslint-disable-next-line @typescript-eslint/unbound-method\n const resizeObserver = new ResizeObserver(this.updatePosition);\n\n this.$watch(\n 'clientHeaderSelector',\n () => {\n if (this.referenceSelector) {\n const element = document.querySelector(this.referenceSelector) as HTMLElement;\n if (element) {\n this.referenceElement = element;\n resizeObserver.observe(element);\n }\n }\n },\n { immediate: true }\n );\n\n this.$on('hook:beforeDestroy', () => {\n resizeObserver.disconnect();\n });\n }\n\n /**\n * Updates the position of the modal setting the top of the element depending\n * on the selector. The modal will be placed under this selector.\n *\n * @internal\n */\n @Debounce(100, { leading: true })\n updatePosition(): void {\n const { height, y } = this.referenceElement?.getBoundingClientRect() ?? { height: 0, y: 0 };\n this.$refs.modal.style.top = `${height + y}px`;\n this.$refs.modal.style.bottom = '0';\n this.$refs.modal.style.height = 'auto';\n }\n\n /**\n * Syncs the body to the open state of the modal, adding or removing styles and listeners.\n *\n * @param isOpen - True when the modal is opened.\n * @internal\n */\n protected syncBody(isOpen: boolean): void {\n if (isOpen) {\n this.disableScroll();\n this.addBodyListeners();\n /* eslint-disable @typescript-eslint/unbound-method */\n this.$on('hook:beforeDestroy', this.removeBodyListeners);\n this.$on('hook:beforeDestroy', this.enableScroll);\n /* eslint-enable @typescript-eslint/unbound-method */\n if (this.focusOnOpen) {\n this.setFocus();\n }\n } else {\n this.enableScroll();\n this.removeBodyListeners();\n /* eslint-disable @typescript-eslint/unbound-method */\n this.$off('hook:beforeDestroy', this.removeBodyListeners);\n this.$off('hook:beforeDestroy', this.enableScroll);\n /* eslint-enable @typescript-eslint/unbound-method */\n }\n }\n\n /**\n * Disables the scroll of both the body and the window.\n *\n * @internal\n */\n protected disableScroll(): void {\n this.previousBodyOverflow = document.body.style.overflow;\n this.previousHTMLOverflow = document.documentElement.style.overflow;\n document.body.style.overflow = document.documentElement.style.overflow = 'hidden';\n }\n\n /**\n * Restores the scroll of both the body and the window.\n *\n * @internal\n */\n protected enableScroll(): void {\n document.body.style.overflow = this.previousBodyOverflow;\n document.documentElement.style.overflow = this.previousHTMLOverflow;\n }\n\n /**\n * Adds listeners to the body element ot detect if the modal should be closed.\n *\n * @internal\n */\n protected addBodyListeners(): void {\n /* eslint-disable @typescript-eslint/unbound-method */\n document.body.addEventListener('focusin', this.emitFocusInBody);\n /* eslint-enable @typescript-eslint/unbound-method */\n }\n\n /**\n * Removes the body listeners.\n *\n * @internal\n */\n protected removeBodyListeners(): void {\n /* eslint-disable @typescript-eslint/unbound-method */\n document.body.removeEventListener('focusin', this.emitFocusInBody);\n /* eslint-enable @typescript-eslint/unbound-method */\n }\n\n /**\n * Emits the `click:overlay` event if the click has been triggered in the overlay layer.\n *\n * @param event - The click event.\n * @internal\n */\n protected emitOverlayClicked(event: MouseEvent): void {\n this.$emit('click:overlay', event);\n }\n\n /**\n * Emits the `focusin:body` event if a focus event has been triggered outside the modal.\n *\n * @param event - The focusin event.\n * @internal\n */\n protected emitFocusInBody(event: FocusEvent): void {\n if (!this.$refs.modalContent.contains(event.target as HTMLElement)) {\n this.$emit('focusin:body', event);\n }\n }\n\n /**\n * Sets the focused element to the first element either the first element with a positive\n * tabindex or, if there isn't any, the first focusable element inside the modal.\n *\n * @internal\n */\n protected setFocus(): void {\n const focusCandidates: HTMLElement[] = Array.from(\n this.$refs.modalContent.querySelectorAll(FOCUSABLE_SELECTORS)\n );\n\n const elementToFocus =\n focusCandidates.find(element => element.tabIndex) ?? focusCandidates[0];\n\n elementToFocus?.focus();\n }\n}\n"],"names":["Fade"],"mappings":"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"}
package/js/components/modals/base-modal.vue_rollup-plugin-vue_styles.0.vue.js CHANGED
@@ -1,6 +1,6 @@
1
1
  import { createInjector, createInjectorSSR } from 'vue-runtime-helpers';
2
2
 
3
- var css = ".x-modal[data-v-2b254d0a] {\n position: fixed;\n top: 0;\n left: 0;\n display: flex;\n align-items: flex-start;\n justify-content: flex-start;\n width: 100%;\n height: 100%;\n z-index: 1;\n}\n.x-modal__content[data-v-2b254d0a] {\n z-index: 1;\n}\n.x-modal__overlay[data-v-2b254d0a] {\n width: 100%;\n height: 100%;\n position: absolute;\n background-color: var(--x-modal-overlay-color, rgb(0, 0, 0));\n opacity: var(--x-modal-overlay-opacity, 0.7);\n}";
3
+ var css = ".x-modal[data-v-32e69a66] {\n position: fixed;\n top: 0;\n left: 0;\n display: flex;\n align-items: flex-start;\n justify-content: flex-start;\n width: 100%;\n height: 100%;\n z-index: 1;\n}\n.x-modal__content[data-v-32e69a66] {\n z-index: 1;\n}\n.x-modal__overlay[data-v-32e69a66] {\n width: 100%;\n height: 100%;\n position: absolute;\n background-color: var(--x-modal-overlay-color, rgb(0, 0, 0));\n opacity: var(--x-modal-overlay-opacity, 0.7);\n}";
4
4
  const isBrowser = /*#__PURE__*/ (function () {
5
5
  return (
6
6
  Object.prototype.toString.call(typeof process !== 'undefined' ? process : 0) !==
package/js/components/modals/main-modal.vue.js CHANGED
@@ -11,16 +11,21 @@ var __vue_render__ = function () {
11
11
  var _c = _vm._self._c || _h;
12
12
  return _c(
13
13
  "BaseEventsModal",
14
- {
15
- staticClass: "x-main-modal",
16
- attrs: {
17
- "data-test": "main-modal",
18
- eventsToOpenModal: _vm.openEvents,
19
- eventsToCloseModal: _vm.closeEvents,
20
- bodyClickEvent: _vm.outOfModalClickEvent,
21
- animation: _vm.animation,
14
+ _vm._b(
15
+ {
16
+ staticClass: "x-main-modal",
17
+ attrs: {
18
+ "data-test": "main-modal",
19
+ eventsToOpenModal: _vm.openEvents,
20
+ eventsToCloseModal: _vm.closeEvents,
21
+ bodyClickEvent: _vm.outOfModalClickEvent,
22
+ animation: _vm.animation,
23
+ },
22
24
  },
23
- },
25
+ "BaseEventsModal",
26
+ _vm.$attrs,
27
+ false
28
+ ),
24
29
  [_vm._t("default")],
25
30
  2
26
31
  )
package/js/components/modals/main-modal.vue.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"main-modal.vue.js","sources":["../../../../src/components/modals/main-modal.vue"],"sourcesContent":["<template>\n <BaseEventsModal\n class=\"x-main-modal\"\n data-test=\"main-modal\"\n :eventsToOpenModal=\"openEvents\"\n :eventsToCloseModal=\"closeEvents\"\n :bodyClickEvent=\"outOfModalClickEvent\"\n :animation=\"animation\"\n >\n <slot />\n </BaseEventsModal>\n</template>\n\n<script lang=\"ts\">\n import Component from 'vue-class-component';\n import Vue from 'vue';\n import { Prop } from 'vue-property-decorator';\n import { XEvent } from '../../wiring/events.types';\n import BaseEventsModal from './base-events-modal.vue';\n\n /**\n * A specialised version of a modal component, made to contain a full search application.\n *\n * @public\n */\n @Component({\n components: {\n BaseEventsModal\n }\n })\n export default class MainModal extends Vue {\n /**\n * Animation to use for opening/closing the modal.\n *\n * @public\n */\n @Prop()\n public animation?: Vue | string;\n /**\n * Events to listen for opening the main modal.\n *\n * @internal\n */\n protected openEvents: XEvent[] = ['UserClickedOpenX', 'UserOpenXProgrammatically'];\n /**\n * Events to listen for closing the main modal.\n *\n * @internal\n */\n protected closeEvents: XEvent[] = ['UserClickedCloseX', 'UserClickedOutOfMainModal'];\n\n /**\n * Event to be emitted by the modal when clicked out of its content.\n *\n * @internal\n */\n protected outOfModalClickEvent: XEvent = 'UserClickedOutOfMainModal';\n }\n</script>\n\n<docs lang=\"mdx\">\n## Events\n\nThis component emits the following events:\n\n- [`UserClickedOutOfMainModal`](./../../api/x-components.xeventstypes.md)\n\n## See it in action\n\nHere you have a basic example of how the main modal works.\n\n```vue live\n<template>\n <div>\n <OpenMainModal>Open X</OpenMainModal>\n <MainModal>\n <CloseMainModal>Close X</CloseMainModal>\n </MainModal>\n </div>\n</template>\n\n<script>\n import { MainModal, CloseMainModal, OpenMainModal } from '@empathyco/x-components';\n\n export default {\n name: 'MainModalDemo',\n components: {\n MainModal,\n CloseMainModal,\n OpenMainModal\n }\n };\n</script>\n```\n</docs>\n"],"names":[],"mappings":";;;;AAEA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
1
+ {"version":3,"file":"main-modal.vue.js","sources":["../../../../src/components/modals/main-modal.vue"],"sourcesContent":["<template>\n <BaseEventsModal\n class=\"x-main-modal\"\n data-test=\"main-modal\"\n :eventsToOpenModal=\"openEvents\"\n :eventsToCloseModal=\"closeEvents\"\n :bodyClickEvent=\"outOfModalClickEvent\"\n :animation=\"animation\"\n v-bind=\"$attrs\"\n >\n <slot />\n </BaseEventsModal>\n</template>\n\n<script lang=\"ts\">\n import Component from 'vue-class-component';\n import Vue from 'vue';\n import { Prop } from 'vue-property-decorator';\n import { XEvent } from '../../wiring/events.types';\n import BaseEventsModal from './base-events-modal.vue';\n\n /**\n * A specialised version of a modal component, made to contain a full search application.\n *\n * @public\n */\n @Component({\n components: {\n BaseEventsModal\n }\n })\n export default class MainModal extends Vue {\n /**\n * Animation to use for opening/closing the modal.\n *\n * @public\n */\n @Prop()\n public animation?: Vue | string;\n /**\n * Events to listen for opening the main modal.\n *\n * @internal\n */\n protected openEvents: XEvent[] = ['UserClickedOpenX', 'UserOpenXProgrammatically'];\n /**\n * Events to listen for closing the main modal.\n *\n * @internal\n */\n protected closeEvents: XEvent[] = ['UserClickedCloseX', 'UserClickedOutOfMainModal'];\n\n /**\n * Event to be emitted by the modal when clicked out of its content.\n *\n * @internal\n */\n protected outOfModalClickEvent: XEvent = 'UserClickedOutOfMainModal';\n }\n</script>\n\n<docs lang=\"mdx\">\n## Events\n\nThis component emits the following events:\n\n- [`UserClickedOutOfMainModal`](./../../api/x-components.xeventstypes.md)\n\n## See it in action\n\nHere you have a basic example of how the main modal works.\n\n```vue live\n<template>\n <div>\n <OpenMainModal>Open X</OpenMainModal>\n <MainModal>\n <CloseMainModal>Close X</CloseMainModal>\n </MainModal>\n </div>\n</template>\n\n<script>\n import { MainModal, CloseMainModal, OpenMainModal } from '@empathyco/x-components';\n\n export default {\n name: 'MainModalDemo',\n components: {\n MainModal,\n CloseMainModal,\n OpenMainModal\n }\n };\n</script>\n```\n</docs>\n"],"names":[],"mappings":";;;;AAEA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
package/js/components/modals/main-modal.vue_rollup-plugin-vue_script.vue.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"main-modal.vue_rollup-plugin-vue_script.vue.js","sources":["../../../../src/components/modals/main-modal.vue?rollup-plugin-vue=script.ts"],"sourcesContent":["\n\n\n\n\n\n\n\n\n\n\n\n\n\nimport Component from 'vue-class-component';\nimport Vue from 'vue';\nimport { Prop } from 'vue-property-decorator';\nimport { XEvent } from '../../wiring/events.types';\nimport BaseEventsModal from './base-events-modal.vue';\n\n/**\n * A specialised version of a modal component, made to contain a full search application.\n *\n * @public\n */\n@Component({\n components: {\n BaseEventsModal\n }\n})\nexport default class MainModal extends Vue {\n /**\n * Animation to use for opening/closing the modal.\n *\n * @public\n */\n @Prop()\n public animation?: Vue | string;\n /**\n * Events to listen for opening the main modal.\n *\n * @internal\n */\n protected openEvents: XEvent[] = ['UserClickedOpenX', 'UserOpenXProgrammatically'];\n /**\n * Events to listen for closing the main modal.\n *\n * @internal\n */\n protected closeEvents: XEvent[] = ['UserClickedCloseX', 'UserClickedOutOfMainModal'];\n\n /**\n * Event to be emitted by the modal when clicked out of its content.\n *\n * @internal\n */\n protected outOfModalClickEvent: XEvent = 'UserClickedOutOfMainModal';\n}\n"],"names":["BaseEventsModal"],"mappings":";;;;;;AAoBA;;;;;AAUA,IAAqB,SAAS,GAA9B,MAAqB,SAAU,SAAQ,GAAG;IAA1C;;;;;;;QAaY,eAAU,GAAa,CAAC,kBAAkB,EAAE,2BAA2B,CAAC,CAAC;;;;;;QAMzE,gBAAW,GAAa,CAAC,mBAAmB,EAAE,2BAA2B,CAAC,CAAC;;;;;;QAO3E,yBAAoB,GAAW,2BAA2B,CAAC;KACtE;CAAA,CAAA;AApBC;IADC,IAAI,EAAE;4CACyB;AAPb,SAAS;IAL7B,SAAS,CAAC;QACT,UAAU,EAAE;6BACVA,iBAAe;SAChB;KACF,CAAC;GACmB,SAAS,CA2B7B;aA3BoB,SAAS;;;;"}
1
+ {"version":3,"file":"main-modal.vue_rollup-plugin-vue_script.vue.js","sources":["../../../../src/components/modals/main-modal.vue?rollup-plugin-vue=script.ts"],"sourcesContent":["\n\n\n\n\n\n\n\n\n\n\n\n\n\n\nimport Component from 'vue-class-component';\nimport Vue from 'vue';\nimport { Prop } from 'vue-property-decorator';\nimport { XEvent } from '../../wiring/events.types';\nimport BaseEventsModal from './base-events-modal.vue';\n\n/**\n * A specialised version of a modal component, made to contain a full search application.\n *\n * @public\n */\n@Component({\n components: {\n BaseEventsModal\n }\n})\nexport default class MainModal extends Vue {\n /**\n * Animation to use for opening/closing the modal.\n *\n * @public\n */\n @Prop()\n public animation?: Vue | string;\n /**\n * Events to listen for opening the main modal.\n *\n * @internal\n */\n protected openEvents: XEvent[] = ['UserClickedOpenX', 'UserOpenXProgrammatically'];\n /**\n * Events to listen for closing the main modal.\n *\n * @internal\n */\n protected closeEvents: XEvent[] = ['UserClickedCloseX', 'UserClickedOutOfMainModal'];\n\n /**\n * Event to be emitted by the modal when clicked out of its content.\n *\n * @internal\n */\n protected outOfModalClickEvent: XEvent = 'UserClickedOutOfMainModal';\n}\n"],"names":["BaseEventsModal"],"mappings":";;;;;;AAqBA;;;;;AAUA,IAAqB,SAAS,GAA9B,MAAqB,SAAU,SAAQ,GAAG;IAA1C;;;;;;;QAaY,eAAU,GAAa,CAAC,kBAAkB,EAAE,2BAA2B,CAAC,CAAC;;;;;;QAMzE,gBAAW,GAAa,CAAC,mBAAmB,EAAE,2BAA2B,CAAC,CAAC;;;;;;QAO3E,yBAAoB,GAAW,2BAA2B,CAAC;KACtE;CAAA,CAAA;AApBC;IADC,IAAI,EAAE;4CACyB;AAPb,SAAS;IAL7B,SAAS,CAAC;QACT,UAAU,EAAE;6BACVA,iBAAe;SAChB;KACF,CAAC;GACmB,SAAS,CA2B7B;aA3BoB,SAAS;;;;"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@empathyco/x-components",
3
- "version": "3.0.0-alpha.220",
3
+ "version": "3.0.0-alpha.221",
4
4
  "description": "Empathy X Components",
5
5
  "author": "Empathy Systems Corporation S.L.",
6
6
  "license": "Apache-2.0",
@@ -135,5 +135,5 @@
135
135
  "access": "public",
136
136
  "directory": "dist"
137
137
  },
138
- "gitHead": "1b775c268f21c7d0fe45236b3b48bba01b35b7f5"
138
+ "gitHead": "319245fcf4df5b0a1227bfe336527928f3159a46"
139
139
  }
package/report/x-components.api.json CHANGED
@@ -4593,6 +4593,15 @@
4593
4593
  "text": "HTMLDivElement",
4594
4594
  "canonicalReference": "!HTMLDivElement:interface"
4595
4595
  },
4596
+ {
4597
+ "kind": "Content",
4598
+ "text": ";\n modalContent: "
4599
+ },
4600
+ {
4601
+ "kind": "Reference",
4602
+ "text": "HTMLDivElement",
4603
+ "canonicalReference": "!HTMLDivElement:interface"
4604
+ },
4596
4605
  {
4597
4606
  "kind": "Content",
4598
4607
  "text": ";\n }"
@@ -4607,7 +4616,7 @@
4607
4616
  "name": "$refs",
4608
4617
  "propertyTypeTokenRange": {
4609
4618
  "startIndex": 1,
4610
- "endIndex": 4
4619
+ "endIndex": 6
4611
4620
  },
4612
4621
  "isStatic": false
4613
4622
  },
@@ -4838,6 +4847,61 @@
4838
4847
  "endIndex": 2
4839
4848
  },
4840
4849
  "isStatic": false
4850
+ },
4851
+ {
4852
+ "kind": "Property",
4853
+ "canonicalReference": "@empathyco/x-components!BaseModal#referenceElement:member",
4854
+ "docComment": "/**\n * The reference element to use to find the modal's position.\n */\n",
4855
+ "excerptTokens": [
4856
+ {
4857
+ "kind": "Content",
4858
+ "text": "protected referenceElement: "
4859
+ },
4860
+ {
4861
+ "kind": "Reference",
4862
+ "text": "HTMLElement",
4863
+ "canonicalReference": "!HTMLElement:interface"
4864
+ },
4865
+ {
4866
+ "kind": "Content",
4867
+ "text": ";"
4868
+ }
4869
+ ],
4870
+ "isOptional": false,
4871
+ "releaseTag": "Public",
4872
+ "name": "referenceElement",
4873
+ "propertyTypeTokenRange": {
4874
+ "startIndex": 1,
4875
+ "endIndex": 2
4876
+ },
4877
+ "isStatic": false
4878
+ },
4879
+ {
4880
+ "kind": "Property",
4881
+ "canonicalReference": "@empathyco/x-components!BaseModal#referenceSelector:member",
4882
+ "docComment": "/**\n * The reference selector of a DOM element to use as reference to position the modal. This selector can be an ID or a class, if it is a class, it will use the first element that matches.\n */\n",
4883
+ "excerptTokens": [
4884
+ {
4885
+ "kind": "Content",
4886
+ "text": "referenceSelector?: "
4887
+ },
4888
+ {
4889
+ "kind": "Content",
4890
+ "text": "string"
4891
+ },
4892
+ {
4893
+ "kind": "Content",
4894
+ "text": ";"
4895
+ }
4896
+ ],
4897
+ "isOptional": true,
4898
+ "releaseTag": "Public",
4899
+ "name": "referenceSelector",
4900
+ "propertyTypeTokenRange": {
4901
+ "startIndex": 1,
4902
+ "endIndex": 2
4903
+ },
4904
+ "isStatic": false
4841
4905
  }
4842
4906
  ],
4843
4907
  "extendsTokenRange": {
package/report/x-components.api.md CHANGED
@@ -445,6 +445,7 @@ export class BaseModal extends Vue_2 {
445
445
  // (undocumented)
446
446
  $refs: {
447
447
  modal: HTMLDivElement;
448
+ modalContent: HTMLDivElement;
448
449
  };
449
450
  // @internal
450
451
  protected addBodyListeners(): void;
@@ -465,12 +466,16 @@ export class BaseModal extends Vue_2 {
465
466
  overlayAnimation: Vue_2 | string;
466
467
  protected previousBodyOverflow: string;
467
468
  protected previousHTMLOverflow: string;
469
+ protected referenceElement: HTMLElement;
470
+ referenceSelector?: string;
468
471
  // @internal
469
472
  protected removeBodyListeners(): void;
470
473
  // @internal
471
474
  protected setFocus(): void;
472
475
  // @internal
473
476
  protected syncBody(isOpen: boolean): void;
477
+ // @internal
478
+ updatePosition(): void;
474
479
  }
475
480
 
476
481
  // @public (undocumented)
package/types/components/modals/base-events-modal.vue.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"base-events-modal.vue?rollup-plugin-vue=script.d.ts","sourceRoot":"","sources":["../../../../src/components/modals/base-events-modal.vue?rollup-plugin-vue=script.ts"],"names":[],"mappings":"AAYA,OAAO,GAAG,MAAM,KAAK,CAAC;AAEtB,OAAO,EAAE,MAAM,EAAE,MAAM,2BAA2B,CAAC;AAEnD,OAAO,EAAE,YAAY,EAAE,MAAM,2BAA2B,CAAC;AAIzD;;;;;;;;;;GAUG;AAIH,MAAM,CAAC,OAAO,OAAO,eAAgB,SAAQ,GAAG;IAC9C;;OAEG;IAEI,SAAS,CAAC,EAAE,GAAG,GAAG,MAAM,CAAC;IAChC;;OAEG;IAEI,iBAAiB,EAAG,MAAM,EAAE,CAAC;IAEpC;;OAEG;IAII,kBAAkB,EAAG,MAAM,EAAE,CAAC;IAErC;;OAEG;IAEI,cAAc,EAAG,MAAM,CAAC;IAE/B;;OAEG;IACH,SAAS,CAAC,MAAM,UAAS;IAEzB,yCAAyC;IACzC,SAAS,CAAC,aAAa,CAAC,EAAE,WAAW,CAAC;IAEtC;;;;;;;OAOG;IAEH,SAAS,CAAC,QAAQ,EAAE,OAAO,EAAE,QAAQ,EAAE,YAAY,GAAG,IAAI;IAO1D;;;;OAIG;IAEH,UAAU,IAAI,IAAI;IAMlB;;;;;;OAMG;IACH,SAAS,CAAC,kBAAkB,CAAC,KAAK,EAAE,UAAU,GAAG,UAAU,GAAG,IAAI;CASnE"}
1
+ {"version":3,"file":"base-events-modal.vue?rollup-plugin-vue=script.d.ts","sourceRoot":"","sources":["../../../../src/components/modals/base-events-modal.vue?rollup-plugin-vue=script.ts"],"names":[],"mappings":"AAaA,OAAO,GAAG,MAAM,KAAK,CAAC;AAEtB,OAAO,EAAE,MAAM,EAAE,MAAM,2BAA2B,CAAC;AAEnD,OAAO,EAAE,YAAY,EAAE,MAAM,2BAA2B,CAAC;AAIzD;;;;;;;;;;GAUG;AAIH,MAAM,CAAC,OAAO,OAAO,eAAgB,SAAQ,GAAG;IAC9C;;OAEG;IAEI,SAAS,CAAC,EAAE,GAAG,GAAG,MAAM,CAAC;IAChC;;OAEG;IAEI,iBAAiB,EAAG,MAAM,EAAE,CAAC;IAEpC;;OAEG;IAII,kBAAkB,EAAG,MAAM,EAAE,CAAC;IAErC;;OAEG;IAEI,cAAc,EAAG,MAAM,CAAC;IAE/B;;OAEG;IACH,SAAS,CAAC,MAAM,UAAS;IAEzB,yCAAyC;IACzC,SAAS,CAAC,aAAa,CAAC,EAAE,WAAW,CAAC;IAEtC;;;;;;;OAOG;IAEH,SAAS,CAAC,QAAQ,EAAE,OAAO,EAAE,QAAQ,EAAE,YAAY,GAAG,IAAI;IAO1D;;;;OAIG;IAEH,UAAU,IAAI,IAAI;IAMlB;;;;;;OAMG;IACH,SAAS,CAAC,kBAAkB,CAAC,KAAK,EAAE,UAAU,GAAG,UAAU,GAAG,IAAI;CASnE"}
package/types/components/modals/base-id-modal.vue.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"base-id-modal.vue?rollup-plugin-vue=script.d.ts","sourceRoot":"","sources":["../../../../src/components/modals/base-id-modal.vue?rollup-plugin-vue=script.ts"],"names":[],"mappings":"AAYA,OAAO,GAAG,MAAM,KAAK,CAAC;AAGtB,OAAO,EAAE,YAAY,EAAE,MAAM,2BAA2B,CAAC;AAIzD;;;;;;;GAOG;AAIH,MAAM,CAAC,OAAO,OAAO,WAAY,SAAQ,GAAG;IAC1C,sDAAsD;IAE/C,SAAS,CAAC,EAAE,GAAG,GAAG,MAAM,CAAC;IAEhC,iEAAiE;IAE1D,OAAO,EAAG,MAAM,CAAC;IAExB,wCAAwC;IACxC,SAAS,CAAC,MAAM,UAAS;IAEzB,yCAAyC;IACzC,SAAS,CAAC,aAAa,CAAC,EAAE,WAAW,CAAC;IAEtC;;;;;;OAMG;IAEH,SAAS,CAAC,OAAO,EAAE,MAAM,EAAE,QAAQ,EAAE,YAAY,GAAG,IAAI;IAOxD;;;;;;;OAOG;IAEH,UAAU,CAAC,OAAO,EAAE,MAAM,GAAG,IAAI;IAMjC;;;;;;OAMG;IACH,SAAS,CAAC,mBAAmB,CAAC,KAAK,EAAE,UAAU,GAAG,UAAU,GAAG,IAAI;CASpE"}
1
+ {"version":3,"file":"base-id-modal.vue?rollup-plugin-vue=script.d.ts","sourceRoot":"","sources":["../../../../src/components/modals/base-id-modal.vue?rollup-plugin-vue=script.ts"],"names":[],"mappings":"AAaA,OAAO,GAAG,MAAM,KAAK,CAAC;AAGtB,OAAO,EAAE,YAAY,EAAE,MAAM,2BAA2B,CAAC;AAIzD;;;;;;;GAOG;AAIH,MAAM,CAAC,OAAO,OAAO,WAAY,SAAQ,GAAG;IAC1C,sDAAsD;IAE/C,SAAS,CAAC,EAAE,GAAG,GAAG,MAAM,CAAC;IAEhC,iEAAiE;IAE1D,OAAO,EAAG,MAAM,CAAC;IAExB,wCAAwC;IACxC,SAAS,CAAC,MAAM,UAAS;IAEzB,yCAAyC;IACzC,SAAS,CAAC,aAAa,CAAC,EAAE,WAAW,CAAC;IAEtC;;;;;;OAMG;IAEH,SAAS,CAAC,OAAO,EAAE,MAAM,EAAE,QAAQ,EAAE,YAAY,GAAG,IAAI;IAOxD;;;;;;;OAOG;IAEH,UAAU,CAAC,OAAO,EAAE,MAAM,GAAG,IAAI;IAMjC;;;;;;OAMG;IACH,SAAS,CAAC,mBAAmB,CAAC,KAAK,EAAE,UAAU,GAAG,UAAU,GAAG,IAAI;CASpE"}
package/types/components/modals/base-modal.vue.d.ts CHANGED
@@ -24,16 +24,46 @@ export default class BaseModal extends Vue {
24
24
  * first element with a positive tabindex or just the first focusable element.
25
25
  */
26
26
  focusOnOpen: boolean;
27
- /** The previous value of the body overflow style. */
27
+ /**
28
+ * The reference selector of a DOM element to use as reference to position the modal.
29
+ * This selector can be an ID or a class, if it is a class, it will use the first
30
+ * element that matches.
31
+ */
32
+ referenceSelector?: string;
33
+ /**
34
+ * The previous value of the body overflow style.
35
+ */
28
36
  protected previousBodyOverflow: string;
29
- /** The previous value of the HTML element overflow style. */
37
+ /**
38
+ * The previous value of the HTML element overflow style.
39
+ */
30
40
  protected previousHTMLOverflow: string;
31
- /** Boolean to delay the leave animation until it has completed. */
41
+ /**
42
+ * Boolean to delay the leave animation until it has completed.
43
+ */
32
44
  protected isWaitingForLeave: boolean;
45
+ /**
46
+ * The reference element to use to find the modal's position.
47
+ */
48
+ protected referenceElement: HTMLElement;
33
49
  $refs: {
50
+ /**
51
+ * Reference to the modal element in the DOM.
52
+ */
34
53
  modal: HTMLDivElement;
54
+ /**
55
+ * Reference to the modal content element in the DOM.
56
+ */
57
+ modalContent: HTMLDivElement;
35
58
  };
36
59
  protected mounted(): void;
60
+ /**
61
+ * Updates the position of the modal setting the top of the element depending
62
+ * on the selector. The modal will be placed under this selector.
63
+ *
64
+ * @internal
65
+ */
66
+ updatePosition(): void;
37
67
  /**
38
68
  * Syncs the body to the open state of the modal, adding or removing styles and listeners.
39
69
  *
package/types/components/modals/base-modal.vue.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"base-modal.vue?rollup-plugin-vue=script.d.ts","sourceRoot":"","sources":["../../../../src/components/modals/base-modal.vue?rollup-plugin-vue=script.ts"],"names":[],"mappings":"AA+BA,OAAO,GAAG,MAAM,KAAK,CAAC;AAMtB;;;;;GAKG;AAEH,MAAM,CAAC,OAAO,OAAO,SAAU,SAAQ,GAAG;IACxC;;OAEG;IAEI,SAAS,EAAG,GAAG,GAAG,MAAM,CAAC;IAEhC;;;OAGG;IAEI,gBAAgB,EAAG,GAAG,GAAG,MAAM,CAAC;IAEvC;;OAEG;IAEI,IAAI,EAAG,OAAO,CAAC;IAEtB;;;OAGG;IAEI,WAAW,EAAG,OAAO,CAAC;IAE7B,qDAAqD;IACrD,SAAS,CAAC,oBAAoB,SAAM;IACpC,6DAA6D;IAC7D,SAAS,CAAC,oBAAoB,SAAM;IACpC,mEAAmE;IACnE,SAAS,CAAC,iBAAiB,UAAS;IAE7B,KAAK,EAAG;QACb,KAAK,EAAE,cAAc,CAAC;KACvB,CAAC;IAEF,SAAS,CAAC,OAAO,IAAI,IAAI;IASzB;;;;;OAKG;IACH,SAAS,CAAC,QAAQ,CAAC,MAAM,EAAE,OAAO,GAAG,IAAI;IAqBzC;;;;OAIG;IACH,SAAS,CAAC,aAAa,IAAI,IAAI;IAM/B;;;;OAIG;IACH,SAAS,CAAC,YAAY,IAAI,IAAI;IAK9B;;;;OAIG;IACH,SAAS,CAAC,gBAAgB,IAAI,IAAI;IAMlC;;;;OAIG;IACH,SAAS,CAAC,mBAAmB,IAAI,IAAI;IAMrC;;;;;OAKG;IACH,SAAS,CAAC,kBAAkB,CAAC,KAAK,EAAE,UAAU,GAAG,IAAI;IAIrD;;;;;OAKG;IACH,SAAS,CAAC,eAAe,CAAC,KAAK,EAAE,UAAU,GAAG,IAAI;IAMlD;;;;;OAKG;IACH,SAAS,CAAC,QAAQ,IAAI,IAAI;CAU3B"}
1
+ {"version":3,"file":"base-modal.vue?rollup-plugin-vue=script.d.ts","sourceRoot":"","sources":["../../../../src/components/modals/base-modal.vue?rollup-plugin-vue=script.ts"],"names":[],"mappings":"AA+BA,OAAO,GAAG,MAAM,KAAK,CAAC;AAOtB;;;;;GAKG;AAEH,MAAM,CAAC,OAAO,OAAO,SAAU,SAAQ,GAAG;IACxC;;OAEG;IAEI,SAAS,EAAG,GAAG,GAAG,MAAM,CAAC;IAEhC;;;OAGG;IAEI,gBAAgB,EAAG,GAAG,GAAG,MAAM,CAAC;IAEvC;;OAEG;IAEI,IAAI,EAAG,OAAO,CAAC;IAEtB;;;OAGG;IAEI,WAAW,EAAG,OAAO,CAAC;IAE7B;;;;OAIG;IAEI,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAElC;;OAEG;IACH,SAAS,CAAC,oBAAoB,SAAM;IACpC;;OAEG;IACH,SAAS,CAAC,oBAAoB,SAAM;IACpC;;OAEG;IACH,SAAS,CAAC,iBAAiB,UAAS;IACpC;;OAEG;IACH,SAAS,CAAC,gBAAgB,EAAG,WAAW,CAAC;IAElC,KAAK,EAAG;QACb;;WAEG;QACH,KAAK,EAAE,cAAc,CAAC;QACtB;;WAEG;QACH,YAAY,EAAE,cAAc,CAAC;KAC9B,CAAC;IAEF,SAAS,CAAC,OAAO,IAAI,IAAI;IA8BzB;;;;;OAKG;IAEH,cAAc,IAAI,IAAI;IAOtB;;;;;OAKG;IACH,SAAS,CAAC,QAAQ,CAAC,MAAM,EAAE,OAAO,GAAG,IAAI;IAqBzC;;;;OAIG;IACH,SAAS,CAAC,aAAa,IAAI,IAAI;IAM/B;;;;OAIG;IACH,SAAS,CAAC,YAAY,IAAI,IAAI;IAK9B;;;;OAIG;IACH,SAAS,CAAC,gBAAgB,IAAI,IAAI;IAMlC;;;;OAIG;IACH,SAAS,CAAC,mBAAmB,IAAI,IAAI;IAMrC;;;;;OAKG;IACH,SAAS,CAAC,kBAAkB,CAAC,KAAK,EAAE,UAAU,GAAG,IAAI;IAIrD;;;;;OAKG;IACH,SAAS,CAAC,eAAe,CAAC,KAAK,EAAE,UAAU,GAAG,IAAI;IAMlD;;;;;OAKG;IACH,SAAS,CAAC,QAAQ,IAAI,IAAI;CAU3B"}
package/types/components/modals/main-modal.vue.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"main-modal.vue?rollup-plugin-vue=script.d.ts","sourceRoot":"","sources":["../../../../src/components/modals/main-modal.vue?rollup-plugin-vue=script.ts"],"names":[],"mappings":"AAeA,OAAO,GAAG,MAAM,KAAK,CAAC;AAEtB,OAAO,EAAE,MAAM,EAAE,MAAM,2BAA2B,CAAC;AAGnD;;;;GAIG;AAMH,MAAM,CAAC,OAAO,OAAO,SAAU,SAAQ,GAAG;IACxC;;;;OAIG;IAEI,SAAS,CAAC,EAAE,GAAG,GAAG,MAAM,CAAC;IAChC;;;;OAIG;IACH,SAAS,CAAC,UAAU,EAAE,MAAM,EAAE,CAAqD;IACnF;;;;OAIG;IACH,SAAS,CAAC,WAAW,EAAE,MAAM,EAAE,CAAsD;IAErF;;;;OAIG;IACH,SAAS,CAAC,oBAAoB,EAAE,MAAM,CAA+B;CACtE"}
1
+ {"version":3,"file":"main-modal.vue?rollup-plugin-vue=script.d.ts","sourceRoot":"","sources":["../../../../src/components/modals/main-modal.vue?rollup-plugin-vue=script.ts"],"names":[],"mappings":"AAgBA,OAAO,GAAG,MAAM,KAAK,CAAC;AAEtB,OAAO,EAAE,MAAM,EAAE,MAAM,2BAA2B,CAAC;AAGnD;;;;GAIG;AAMH,MAAM,CAAC,OAAO,OAAO,SAAU,SAAQ,GAAG;IACxC;;;;OAIG;IAEI,SAAS,CAAC,EAAE,GAAG,GAAG,MAAM,CAAC;IAChC;;;;OAIG;IACH,SAAS,CAAC,UAAU,EAAE,MAAM,EAAE,CAAqD;IACnF;;;;OAIG;IACH,SAAS,CAAC,WAAW,EAAE,MAAM,EAAE,CAAsD;IAErF;;;;OAIG;IACH,SAAS,CAAC,oBAAoB,EAAE,MAAM,CAA+B;CACtE"}