npm - @empathyco/x-components - Versions diffs - 3.0.0-alpha.220 → 3.0.0-alpha.222 - Mend

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

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 (37) hide show

package/CHANGELOG.md CHANGED Viewed

@@ -3,6 +3,30 @@
 All notable changes to this project will be documented in this file. See
 [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
+## [3.0.0-alpha.222](https://github.com/empathyco/x/compare/@empathyco/x-components@3.0.0-alpha.221...@empathyco/x-components@3.0.0-alpha.222) (2022-11-10)
+### Features
+- **x-plugin:** Add function as possible value of `domElement` in InstallXOptions.(#836)
+  ([99a96ef](https://github.com/empathyco/x/commit/99a96ef2303f27b656835253203bc73758a337ae))
+# Change Log
+All notable changes to this project will be documented in this file. See
+[Conventional Commits](https://conventionalcommits.org) for commit guidelines.
+## [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)
+### Features
+- place modal under selected element (#829)
+  ([1f46d42](https://github.com/empathyco/x/commit/1f46d428dccdf4807110afc48b5fd600b41bfeae))
+# Change Log
+All notable changes to this project will be documented in this file. See
+[Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 ## [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)
 ### Features

package/design-system/full-theme.css CHANGED Viewed

@@ -142,6 +142,174 @@
   --x-size-border-width-bottom-dropdown-list-card: var(--x-size-border-width-dropdown-list-card);
   --x-size-border-width-left-dropdown-list-card: var(--x-size-border-width-dropdown-list-card);
 }
+.x-dropdown {
+  box-sizing: border-box;
+  position: relative;
+  font-size: var(--x-size-font-dropdown-default);
+  font-family: var(--x-font-family-dropdown-default);
+  font-weight: var(--x-number-font-weight-dropdown-default);
+  line-height: var(--x-size-line-height-dropdown-default);
+}
+[dir="ltr"] .x-dropdown__toggle {
+  border-right-width: var(--x-size-border-width-right-dropdown-toggle-default);
+}
+[dir="rtl"] .x-dropdown__toggle {
+  border-left-width: var(--x-size-border-width-right-dropdown-toggle-default);
+}
+[dir="ltr"] .x-dropdown__toggle {
+  border-left-width: var(--x-size-border-width-left-dropdown-toggle-default);
+}
+[dir="rtl"] .x-dropdown__toggle {
+  border-right-width: var(--x-size-border-width-left-dropdown-toggle-default);
+}
+[dir="ltr"] .x-dropdown__toggle {
+  padding-right: var(--x-size-padding-right-dropdown-toggle-default);
+}
+[dir="rtl"] .x-dropdown__toggle {
+  padding-left: var(--x-size-padding-right-dropdown-toggle-default);
+}
+[dir="ltr"] .x-dropdown__toggle {
+  padding-left: var(--x-size-padding-left-dropdown-toggle-default);
+}
+[dir="rtl"] .x-dropdown__toggle {
+  padding-right: var(--x-size-padding-left-dropdown-toggle-default);
+}
+.x-dropdown__toggle {
+  border-style: solid;
+  border-top-width: var(--x-size-border-width-top-dropdown-toggle-default);
+  border-bottom-width: var(--x-size-border-width-bottom-dropdown-toggle-default);
+  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);
+  background: var(--x-color-background-dropdown-toggle-default);
+  color: var(--x-color-text-dropdown-toggle-default);
+  border-color: var(--x-color-border-dropdown-toggle-default);
+  padding-top: var(--x-size-padding-top-dropdown-toggle-default);
+  padding-bottom: var(--x-size-padding-bottom-dropdown-toggle-default);
+  gap: var(--x-size-gap-dropdown-item-default);
+  width: var(--x-size-width-dropdown-toggle-default);
+  display: flex;
+  flex-flow: row nowrap;
+  margin: 0;
+  cursor: pointer;
+  overflow: var(--x-string-overflow-dropdown-toggle-default);
+  box-shadow: var(--x-string-box-shadow-dropdown-default);
+}
+@media not all and (-webkit-min-device-pixel-ratio: 0), not all and (min-resolution: 0.001dpcm) {
+  .x-dropdown__toggle {
+    gap: 0;
+  }
+  .x-dropdown__toggle > *:not(:last-child) {
+    margin-right: var(--x-size-gap-dropdown-item-default);
+  }
+}
+[dir="ltr"] .x-dropdown__toggle * + .x-icon:last-child {
+  margin-left: auto;
+}
+[dir="rtl"] .x-dropdown__toggle * + .x-icon:last-child {
+  margin-right: auto;
+}
+.x-dropdown__toggle-selected-value {
+  color: var(--x-color-text-dropdown-toggle-default-selected);
+}
+[dir="ltr"] .x-dropdown__items-list {
+  border-right-width: var(--x-size-border-width-right-dropdown-list-default);
+}
+[dir="rtl"] .x-dropdown__items-list {
+  border-left-width: var(--x-size-border-width-right-dropdown-list-default);
+}
+[dir="ltr"] .x-dropdown__items-list {
+  border-left-width: var(--x-size-border-width-left-dropdown-list-default);
+}
+[dir="rtl"] .x-dropdown__items-list {
+  border-right-width: var(--x-size-border-width-left-dropdown-list-default);
+}
+.x-dropdown__items-list {
+  background: var(--x-color-background-dropdown-default);
+  box-sizing: border-box;
+  min-width: var(--x-size-min-width-dropdown-list-default);
+  position: absolute;
+  top: calc(100% + var(--x-size-gap-dropdown-default));
+  overflow: var(--x-string-overflow-dropdown-list-default);
+  border-color: var(--x-color-border-dropdown-list-default);
+  border-top-width: var(--x-size-border-width-top-dropdown-list-default);
+  border-bottom-width: var(--x-size-border-width-bottom-dropdown-list-default);
+  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);
+  border-style: solid;
+  margin: 0;
+  padding: 0;
+  box-shadow: var(--x-string-box-shadow-dropdown-default);
+  z-index: 1;
+}
+.x-dropdown__items-list:before, .x-dropdown__items-list:after {
+  content: "";
+  display: block;
+  height: var(--x-size-padding-vertical-dropdown-list-default);
+}
+[dir="ltr"] .x-dropdown__item {
+  padding-left: var(--x-size-padding-left-dropdown-item-default);
+}
+[dir="rtl"] .x-dropdown__item {
+  padding-right: var(--x-size-padding-left-dropdown-item-default);
+}
+[dir="ltr"] .x-dropdown__item {
+  padding-right: var(--x-size-padding-right-dropdown-item-default);
+}
+[dir="rtl"] .x-dropdown__item {
+  padding-left: var(--x-size-padding-right-dropdown-item-default);
+}
+.x-dropdown__item {
+  background: var(--x-color-background-dropdown-default);
+  padding-top: var(--x-size-padding-top-dropdown-item-default);
+  padding-bottom: var(--x-size-padding-bottom-dropdown-item-default);
+  gap: var(--x-size-gap-dropdown-item-default);
+  border: none;
+  display: flex;
+  flex-flow: row nowrap;
+  justify-content: flex-start;
+  text-align: left;
+  width: 100%;
+  margin: 0;
+  white-space: nowrap;
+  cursor: pointer;
+}
+@media not all and (-webkit-min-device-pixel-ratio: 0), not all and (min-resolution: 0.001dpcm) {
+  .x-dropdown__item {
+    gap: 0;
+  }
+  .x-dropdown__item > *:not(:last-child) {
+    margin-right: var(--x-size-gap-dropdown-item-default);
+  }
+}
+.x-dropdown__item:hover, .x-dropdown__item--is-highlighted {
+  color: var(--x-color-text-dropdown-item-default-hover);
+  background-color: var(--x-color-background-dropdown-item-default-hover);
+  font-weight: var(--x-number-font-weight-dropdown-item-default-hover);
+  -webkit-text-decoration: var(--x-font-decoration-dropdown-item-default-hover);
+          text-decoration: var(--x-font-decoration-dropdown-item-default-hover);
+}
+.x-dropdown__item--is-selected {
+  color: var(--x-color-text-dropdown-item-default-selected);
+  background-color: var(--x-color-background-dropdown-item-default-selected);
+  font-weight: var(--x-number-font-weight-dropdown-item-default-selected);
+  -webkit-text-decoration: var(--x-font-decoration-dropdown-item-default-selected);
+          text-decoration: var(--x-font-decoration-dropdown-item-default-selected);
+}
+[dir="ltr"] .x-dropdown__item * + .x-icon:last-child {
+  margin-left: auto;
+}
+[dir="rtl"] .x-dropdown__item * + .x-icon:last-child {
+  margin-right: auto;
+}
+.x-dropdown--is-open {
+  --x-color-background-dropdown-toggle-default: var(
+    --x-color-background-dropdown-toggle-open-default
+  );
+}
+[dir="ltr"] .x-dropdown--right .x-dropdown__items-list {
+  right: 0;
+}
+[dir="rtl"] .x-dropdown--right .x-dropdown__items-list {
+  left: 0;
+}
 :root {
   --x-size-border-radius-dropdown-default: var(--x-size-border-radius-base-none);
   --x-size-border-radius-top-left-dropdown-default: var(--x-size-border-radius-dropdown-default);
@@ -7124,172 +7292,3 @@
 .x-normal-case {
   text-transform: none;
 }
-.x-dropdown {
-  box-sizing: border-box;
-  position: relative;
-  font-size: var(--x-size-font-dropdown-default);
-  font-family: var(--x-font-family-dropdown-default);
-  font-weight: var(--x-number-font-weight-dropdown-default);
-  line-height: var(--x-size-line-height-dropdown-default);
-}
-[dir="ltr"] .x-dropdown__toggle {
-  border-right-width: var(--x-size-border-width-right-dropdown-toggle-default);
-}
-[dir="rtl"] .x-dropdown__toggle {
-  border-left-width: var(--x-size-border-width-right-dropdown-toggle-default);
-}
-[dir="ltr"] .x-dropdown__toggle {
-  border-left-width: var(--x-size-border-width-left-dropdown-toggle-default);
-}
-[dir="rtl"] .x-dropdown__toggle {
-  border-right-width: var(--x-size-border-width-left-dropdown-toggle-default);
-}
-[dir="ltr"] .x-dropdown__toggle {
-  padding-right: var(--x-size-padding-right-dropdown-toggle-default);
-}
-[dir="rtl"] .x-dropdown__toggle {
-  padding-left: var(--x-size-padding-right-dropdown-toggle-default);
-}
-[dir="ltr"] .x-dropdown__toggle {
-  padding-left: var(--x-size-padding-left-dropdown-toggle-default);
-}
-[dir="rtl"] .x-dropdown__toggle {
-  padding-right: var(--x-size-padding-left-dropdown-toggle-default);
-}
-.x-dropdown__toggle {
-  border-style: solid;
-  border-top-width: var(--x-size-border-width-top-dropdown-toggle-default);
-  border-bottom-width: var(--x-size-border-width-bottom-dropdown-toggle-default);
-  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);
-  background: var(--x-color-background-dropdown-toggle-default);
-  color: var(--x-color-text-dropdown-toggle-default);
-  border-color: var(--x-color-border-dropdown-toggle-default);
-  padding-top: var(--x-size-padding-top-dropdown-toggle-default);
-  padding-bottom: var(--x-size-padding-bottom-dropdown-toggle-default);
-  gap: var(--x-size-gap-dropdown-item-default);
-  width: var(--x-size-width-dropdown-toggle-default);
-  display: flex;
-  flex-flow: row nowrap;
-  margin: 0;
-  cursor: pointer;
-  overflow: var(--x-string-overflow-dropdown-toggle-default);
-  box-shadow: var(--x-string-box-shadow-dropdown-default);
-}
-@media not all and (-webkit-min-device-pixel-ratio: 0), not all and (min-resolution: 0.001dpcm) {
-  .x-dropdown__toggle {
-    gap: 0;
-  }
-  .x-dropdown__toggle > *:not(:last-child) {
-    margin-right: var(--x-size-gap-dropdown-item-default);
-  }
-}
-[dir="ltr"] .x-dropdown__toggle * + .x-icon:last-child {
-  margin-left: auto;
-}
-[dir="rtl"] .x-dropdown__toggle * + .x-icon:last-child {
-  margin-right: auto;
-}
-.x-dropdown__toggle-selected-value {
-  color: var(--x-color-text-dropdown-toggle-default-selected);
-}
-[dir="ltr"] .x-dropdown__items-list {
-  border-right-width: var(--x-size-border-width-right-dropdown-list-default);
-}
-[dir="rtl"] .x-dropdown__items-list {
-  border-left-width: var(--x-size-border-width-right-dropdown-list-default);
-}
-[dir="ltr"] .x-dropdown__items-list {
-  border-left-width: var(--x-size-border-width-left-dropdown-list-default);
-}
-[dir="rtl"] .x-dropdown__items-list {
-  border-right-width: var(--x-size-border-width-left-dropdown-list-default);
-}
-.x-dropdown__items-list {
-  background: var(--x-color-background-dropdown-default);
-  box-sizing: border-box;
-  min-width: var(--x-size-min-width-dropdown-list-default);
-  position: absolute;
-  top: calc(100% + var(--x-size-gap-dropdown-default));
-  overflow: var(--x-string-overflow-dropdown-list-default);
-  border-color: var(--x-color-border-dropdown-list-default);
-  border-top-width: var(--x-size-border-width-top-dropdown-list-default);
-  border-bottom-width: var(--x-size-border-width-bottom-dropdown-list-default);
-  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);
-  border-style: solid;
-  margin: 0;
-  padding: 0;
-  box-shadow: var(--x-string-box-shadow-dropdown-default);
-  z-index: 1;
-}
-.x-dropdown__items-list:before, .x-dropdown__items-list:after {
-  content: "";
-  display: block;
-  height: var(--x-size-padding-vertical-dropdown-list-default);
-}
-[dir="ltr"] .x-dropdown__item {
-  padding-left: var(--x-size-padding-left-dropdown-item-default);
-}
-[dir="rtl"] .x-dropdown__item {
-  padding-right: var(--x-size-padding-left-dropdown-item-default);
-}
-[dir="ltr"] .x-dropdown__item {
-  padding-right: var(--x-size-padding-right-dropdown-item-default);
-}
-[dir="rtl"] .x-dropdown__item {
-  padding-left: var(--x-size-padding-right-dropdown-item-default);
-}
-.x-dropdown__item {
-  background: var(--x-color-background-dropdown-default);
-  padding-top: var(--x-size-padding-top-dropdown-item-default);
-  padding-bottom: var(--x-size-padding-bottom-dropdown-item-default);
-  gap: var(--x-size-gap-dropdown-item-default);
-  border: none;
-  display: flex;
-  flex-flow: row nowrap;
-  justify-content: flex-start;
-  text-align: left;
-  width: 100%;
-  margin: 0;
-  white-space: nowrap;
-  cursor: pointer;
-}
-@media not all and (-webkit-min-device-pixel-ratio: 0), not all and (min-resolution: 0.001dpcm) {
-  .x-dropdown__item {
-    gap: 0;
-  }
-  .x-dropdown__item > *:not(:last-child) {
-    margin-right: var(--x-size-gap-dropdown-item-default);
-  }
-}
-.x-dropdown__item:hover, .x-dropdown__item--is-highlighted {
-  color: var(--x-color-text-dropdown-item-default-hover);
-  background-color: var(--x-color-background-dropdown-item-default-hover);
-  font-weight: var(--x-number-font-weight-dropdown-item-default-hover);
-  -webkit-text-decoration: var(--x-font-decoration-dropdown-item-default-hover);
-          text-decoration: var(--x-font-decoration-dropdown-item-default-hover);
-}
-.x-dropdown__item--is-selected {
-  color: var(--x-color-text-dropdown-item-default-selected);
-  background-color: var(--x-color-background-dropdown-item-default-selected);
-  font-weight: var(--x-number-font-weight-dropdown-item-default-selected);
-  -webkit-text-decoration: var(--x-font-decoration-dropdown-item-default-selected);
-          text-decoration: var(--x-font-decoration-dropdown-item-default-selected);
-}
-[dir="ltr"] .x-dropdown__item * + .x-icon:last-child {
-  margin-left: auto;
-}
-[dir="rtl"] .x-dropdown__item * + .x-icon:last-child {
-  margin-right: auto;
-}
-.x-dropdown--is-open {
-  --x-color-background-dropdown-toggle-default: var(
-    --x-color-background-dropdown-toggle-open-default
-  );
-}
-[dir="ltr"] .x-dropdown--right .x-dropdown__items-list {
-  right: 0;
-}
-[dir="rtl"] .x-dropdown--right .x-dropdown__items-list {
-  left: 0;
-}

package/docs/API-reference/api/x-components.basemodal._refs.md CHANGED Viewed

@@ -9,5 +9,6 @@
 ```typescript
 $refs: {
         modal: HTMLDivElement;
+        modalContent: HTMLDivElement;
     };
 ```

package/docs/API-reference/api/x-components.basemodal.md CHANGED Viewed

@@ -17,7 +17,7 @@ export default class BaseModal extends Vue
 |  Property | Modifiers | Type | Description |
 |  --- | --- | --- | --- |
-|  [$refs](./x-components.basemodal._refs.md) |  | { modal: HTMLDivElement; } |  |
+|  [$refs](./x-components.basemodal._refs.md) |  | { modal: HTMLDivElement; modalContent: HTMLDivElement; } |  |
 |  [animation](./x-components.basemodal.animation.md) |  | Vue \| string | Animation to use for opening/closing the modal. This animation only affects the content. |
 |  [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. |
 |  [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
 |  [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. |
 |  [previousBodyOverflow](./x-components.basemodal.previousbodyoverflow.md) |  | string | The previous value of the body overflow style. |
 |  [previousHTMLOverflow](./x-components.basemodal.previoushtmloverflow.md) |  | string | The previous value of the HTML element overflow style. |
+|  [referenceElement](./x-components.basemodal.referenceelement.md) |  | HTMLElement | The reference element to use to find the modal's position. |
+|  [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. |
 ## Methods

package/docs/API-reference/api/x-components.basemodal.referenceelement.md ADDED Viewed

@@ -0,0 +1,13 @@
+<!-- Do not edit this file. It is automatically generated by API Documenter. -->
+[Home](./index.md) &gt; [@empathyco/x-components](./x-components.md) &gt; [BaseModal](./x-components.basemodal.md) &gt; [referenceElement](./x-components.basemodal.referenceelement.md)
+## BaseModal.referenceElement property
+The reference element to use to find the modal's position.
+<b>Signature:</b>
+```typescript
+protected referenceElement: HTMLElement;
+```

package/docs/API-reference/api/x-components.basemodal.referenceselector.md ADDED Viewed

@@ -0,0 +1,13 @@
+<!-- Do not edit this file. It is automatically generated by API Documenter. -->
+[Home](./index.md) &gt; [@empathyco/x-components](./x-components.md) &gt; [BaseModal](./x-components.basemodal.md) &gt; [referenceSelector](./x-components.basemodal.referenceselector.md)
+## BaseModal.referenceSelector property
+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.
+<b>Signature:</b>
+```typescript
+referenceSelector?: string;
+```

package/docs/API-reference/api/x-components.installxoptions.domelement.md CHANGED Viewed

@@ -4,10 +4,10 @@
 ## InstallXOptions.domElement property
-An Element \| string to indicate the HTML element that will contain the Vue application. If string selector is passed and the element doesn't exits, the [XInstaller](./x-components.xinstaller.md) will create it.
+An Element \| string \| function to indicate the HTML element that will contain the Vue application. If it isn't passed, the [XInstaller](./x-components.xinstaller.md) will create the target element.
 <b>Signature:</b>
 ```typescript
-domElement?: Element | string;
+domElement?: Element | string | ((snippetConfig: NormalisedSnippetConfig) => Element | string);
 ```

package/docs/API-reference/api/x-components.installxoptions.md CHANGED Viewed

@@ -20,7 +20,7 @@ export interface InstallXOptions<API extends XAPI = XAPI> extends XPluginOptions
 |  [api?](./x-components.installxoptions.api.md) | API \| false | <i>(Optional)</i> The API to expose globally. If is not passed the default [BaseXAPI](./x-components.basexapi.md) will be used. If a <code>false</code> value is passed then the API is not created. |
 |  [app?](./x-components.installxoptions.app.md) | VueConstructor \| ComponentOptions&lt;Vue&gt; | <i>(Optional)</i> The Vue component used as root of the application. If it is not passed, no Vue Application is initialized, only plugin installed. |
 |  [bus?](./x-components.installxoptions.bus.md) | [XBus](./x-components.xbus.md) | <i>(Optional)</i> The [XBus](./x-components.xbus.md) used in the [XPlugin](./x-components.xplugin.md)<!-- -->. If not passed an instance of [BaseXBus](./x-components.basexbus.md) will be used. |
-|  [domElement?](./x-components.installxoptions.domelement.md) | Element \| string | <i>(Optional)</i> An Element \| string to indicate the HTML element that will contain the Vue application. If string selector is passed and the element doesn't exits, the [XInstaller](./x-components.xinstaller.md) will create it. |
+|  [domElement?](./x-components.installxoptions.domelement.md) | Element \| string \| ((snippetConfig: [NormalisedSnippetConfig](./x-components.normalisedsnippetconfig.md)<!-- -->) =&gt; Element \| string) | <i>(Optional)</i> An Element \| string \| function to indicate the HTML element that will contain the Vue application. If it isn't passed, the [XInstaller](./x-components.xinstaller.md) will create the target element. |
 |  [onCreateApp?](./x-components.installxoptions.oncreateapp.md) | (app: Vue) =&gt; void | <i>(Optional)</i> Callback to invoke after instantiating the app. |
 |  [plugin?](./x-components.installxoptions.plugin.md) | PluginObject&lt;[XPluginOptions](./x-components.xpluginoptions.md)<!-- -->&gt; | <i>(Optional)</i> The XPlugin which will be installed. If not passed, an instance of [XPlugin](./x-components.xplugin.md) will be installed. |
 |  [vue?](./x-components.installxoptions.vue.md) | VueConstructor | <i>(Optional)</i> The Vue instance used to install the plugin and to create the Application. If not passed the default Vue instance is used. This can be useful to use the <code>localVue</code> in the unit tests. |

package/docs/API-reference/components/common/modals/x-components.base-modal.md CHANGED Viewed

@@ -11,12 +11,13 @@ complex modals.
 ## Props
-| Name                          | Description                                                                                                                                                                  | Type                 | Default                      |
-| ----------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------- | ---------------------------- |
-| <code>animation</code>        | Animation to use for opening/closing the modal. This animation only affects the content.                                                                                     | <code>union</code>   | <code>() => NoElement</code> |
-| <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>      |
-| <code>open</code>             | Determines if the modal is open or not.                                                                                                                                      | <code>boolean</code> | <code></code>                |
-| <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>            |
+| Name                           | Description                                                                                                                                                                                       | Type                 | Default                      |
+| ------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------- | ---------------------------- |
+| <code>animation</code>         | Animation to use for opening/closing the modal. This animation only affects the content.                                                                                                          | <code>union</code>   | <code>() => NoElement</code> |
+| <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>      |
+| <code>open</code>              | Determines if the modal is open or not.                                                                                                                                                           | <code>boolean</code> | <code></code>                |
+| <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>            |
+| <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>                |
 ## Events
@@ -34,7 +35,9 @@ complex modals.
 ## Examples
 The `BaseModal` is a simple component that serves to create complex modals. Its open state has to be
-passed via prop. It also accepts an animation to use for opening & closing.
+passed via prop. There is a prop, `referenceSelector`, used to place the modal under some element
+instead of set the top of the element directly. It also accepts an animation to use for opening &
+closing.
 It emits a `click:overlay` event when any part out of the content is clicked, but only if the modal
 is open.
@@ -44,9 +47,10 @@ is open.
   <div>
     <button @click="open = true">Open modal</button>
     <BaseModal
-      animation="fadeAndSlide"
+      :animation="fadeAndSlide"
       :open="open"
       @click:overlay="open = false"
+      referenceSelector=".header"
     >
       <h1>Hello</h1>
       <p>The modal is working</p>

package/js/components/modals/base-events-modal.vue.js CHANGED Viewed

@@ -11,13 +11,18 @@ var __vue_render__ = function () {
   var _c = _vm._self._c || _h;
   return _c(
     "BaseModal",
-    {
-      attrs: { animation: _vm.animation, open: _vm.isOpen },
-      on: {
-        "click:overlay": _vm.emitBodyClickEvent,
-        "focusin:body": _vm.emitBodyClickEvent,
+    _vm._b(
+      {
+        attrs: { animation: _vm.animation, open: _vm.isOpen },
+        on: {
+          "click:overlay": _vm.emitBodyClickEvent,
+          "focusin:body": _vm.emitBodyClickEvent,
+        },
       },
-    },
+      "BaseModal",
+      _vm.$attrs,
+      false
+    ),
     [_vm._t("default")],
     2
   )

package/js/components/modals/base-events-modal.vue.js.map CHANGED Viewed

	@@ -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 Viewed

	@@ -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 Viewed

@@ -11,13 +11,18 @@ var __vue_render__ = function () {
   var _c = _vm._self._c || _h;
   return _c(
     "BaseModal",
-    {
-      attrs: { animation: _vm.animation, open: _vm.isOpen },
-      on: {
-        "click:overlay": _vm.emitClickOutOfModal,
-        "focusin:body": _vm.emitClickOutOfModal,
+    _vm._b(
+      {
+        attrs: { animation: _vm.animation, open: _vm.isOpen },
+        on: {
+          "click:overlay": _vm.emitClickOutOfModal,
+          "focusin:body": _vm.emitClickOutOfModal,
+        },
       },
-    },
+      "BaseModal",
+      _vm.$attrs,
+      false
+    ),
     [_vm._t("default")],
     2
   )

package/js/components/modals/base-id-modal.vue.js.map CHANGED Viewed

	@@ -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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}