@empathyco/x-components 5.0.0-alpha.9 → 6.0.0-alpha.2

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

@@ -1 +1 @@
-{"version":3,"file":"base-id-modal-open.vue.js","sources":["../../../../src/components/modals/base-id-modal-open.vue"],"sourcesContent":["<template>\n  <NoElement>\n    <!--\n      @slot opening-element. It's the element that will trigger the modal opening. It's a\n      button by default.\n        @binding {Function} openModal - The function to open the modal.\n    -->\n    <slot :openModal=\"emitOpenModalEvent\" name=\"opening-element\">\n      <button\n        @click=\"emitOpenModalEvent\"\n        class=\"x-events-modal-id-open-button x-button\"\n        data-test=\"open-modal-id\"\n      >\n        <!-- @slot (Required) Button content with a text, an icon or both -->\n        <slot />\n      </button>\n    </slot>\n  </NoElement>\n</template>\n\n<script lang=\"ts\">\n  import { defineComponent } from 'vue';\n  import { NoElement } from '../no-element';\n  import { use$x } from '../../composables/index';\n\n  /**\n   * Component that allows to open a modal by emitting {@link XEventsTypes.UserClickedOpenModal}\n   * with the modalId as payload. It allows full customization with the 'opening-element' slot and\n   * exposes the 'openModal' function.\n   *\n   * @public\n   */\n  export default defineComponent({\n    components: { NoElement },\n    props: {\n      /**\n       * The modalId of the modal that will be opened.\n       *\n       * @public\n       */\n      modalId: {\n        type: String,\n        required: true\n      }\n    },\n    setup(props) {\n      const $x = use$x();\n\n      /**\n       * Emits the {@link XEventsTypes.UserClickedOpenModal} event with the modalId as payload.\n       *\n       * @param event - The event triggering the function.\n       * @public\n       */\n      const emitOpenModalEvent = ({ target }: Event): void => {\n        $x.emit('UserClickedOpenModal', props.modalId, { target: target as HTMLElement });\n      };\n\n      return {\n        emitOpenModalEvent\n      };\n    }\n  });\n</script>\n\n<docs lang=\"mdx\">\n## Events\n\nA list of events that the component will emit:\n\n- [`UserClickedOpenModal`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts):\n  the event is emitted after the user clicks the button. The event payload is the id of the modal\n  that is going to be opened.\n\n## Examples\n\nComponent containing an event button that emits `UserClickedOpenModal` when it is clicked with the\nmodalId as payload. It has a default slot to customize its contents and can also be fully\ncustomized, replacing the default button with any other element.\n\n### Basic example\n\nThe component rendering content passed to the default slot inside the button and opening the modal\nwith modalId `my-modal`.\n\n```vue\n<template>\n  <BaseIdModalOpen modalId=\"my-modal\">\n    <img src=\"./open-button-icon.svg\" />\n    <span>Open</span>\n  </BaseIdModalOpen>\n</template>\n\n<script>\n  import { BaseIdModalOpen } from '@empathyco/x-components';\n\n  export default {\n    name: 'BaseIdModalOpenTest',\n    components: {\n      BaseIdModalOpen\n    }\n  };\n</script>\n```\n\n### Replacing the default button\n\nThe component renders whatever element is passed, replacing the default button and exposing the\nfunction to open the modal with modalId `my-modal`.\n\n```vue\n<template>\n  <BaseIdModalOpen modalId=\"my-modal\">\n    <template #opening-element=\"{ openModal }\">\n      <ul>\n        <li @click=\"openModal\">Open here</li>\n        <li>Not here</li>\n      </ul>\n    </template>\n  </BaseIdModalOpen>\n</template>\n\n<script>\n  import { BaseIdModalOpen } from '@empathyco/x-components';\n\n  export default {\n    name: 'BaseIdModalOpenTest',\n    components: {\n      BaseIdModalOpen\n    }\n  };\n</script>\n```\n</docs>\n"],"names":[],"mappings":";;;;AAEA,MAAc,cAAA,GAAA,OAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"base-id-modal-open.vue.js","sources":["../../../../src/components/modals/base-id-modal-open.vue"],"sourcesContent":["<template>\n  <button\n    @click=\"openModal\"\n    class=\"x-events-modal-id-open-button x-button\"\n    data-test=\"open-modal-id\"\n  >\n    <!-- @slot (Required) Button content with a text, an icon or both -->\n    <slot />\n  </button>\n</template>\n\n<script lang=\"ts\">\n  import { defineComponent } from 'vue';\n  import { use$x } from '../../composables';\n\n  /**\n   * Component that allows to open a modal by emitting {@link XEventsTypes.UserClickedOpenModal}\n   * with the modalId as payload. It allows full customization with the 'opening-element' slot and\n   * exposes the 'openModal' function.\n   *\n   * @public\n   */\n  export default defineComponent({\n    name: 'BaseIdModalOpen',\n    props: {\n      /** The modalId of the modal that will be opened. */\n      modalId: {\n        type: String,\n        required: true\n      }\n    },\n    setup(props, { slots }) {\n      const $x = use$x();\n\n      /**\n       * Emits the {@link XEventsTypes.UserClickedOpenModal} event with the modalId as payload.\n       *\n       * @param event - The event triggering the function.\n       */\n      function openModal({ target }: Event) {\n        $x.emit('UserClickedOpenModal', props.modalId, { target: target as HTMLElement });\n      }\n\n      /* Hack to render through a render-function, the `opening-element` slot or, in its absence,\n       the component itself. It is the alternative for the NoElement antipattern. */\n      const innerProps = { openModal };\n      return (\n        slots['opening-element'] ? () => slots['opening-element']?.(innerProps)[0] : innerProps\n      ) as typeof innerProps;\n    }\n  });\n</script>\n\n<docs lang=\"mdx\">\n## Events\n\nA list of events that the component will emit:\n\n- [`UserClickedOpenModal`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts):\n  the event is emitted after the user clicks the button. The event payload is the id of the modal\n  that is going to be opened.\n\n## Examples\n\nComponent containing an event button that emits `UserClickedOpenModal` when it is clicked with the\nmodalId as payload. It has a default slot to customize its contents and can also be fully\ncustomized, replacing the default button with any other element.\n\n### Basic example\n\nThe component rendering content passed to the default slot inside the button and opening the modal\nwith modalId `my-modal`.\n\n```vue\n<template>\n  <BaseIdModalOpen modalId=\"my-modal\">\n    <img src=\"./open-button-icon.svg\" />\n    <span>Open</span>\n  </BaseIdModalOpen>\n</template>\n\n<script>\n  import { BaseIdModalOpen } from '@empathyco/x-components';\n\n  export default {\n    name: 'BaseIdModalOpenTest',\n    components: {\n      BaseIdModalOpen\n    }\n  };\n</script>\n```\n\n### Replacing the default button\n\nThe component renders whatever element is passed, replacing the default button and exposing the\nfunction to open the modal with modalId `my-modal`.\n\n```vue\n<template>\n  <BaseIdModalOpen modalId=\"my-modal\">\n    <template #opening-element=\"{ openModal }\">\n      <ul>\n        <li @click=\"openModal\">Open here</li>\n        <li>Not here</li>\n      </ul>\n    </template>\n  </BaseIdModalOpen>\n</template>\n\n<script>\n  import { BaseIdModalOpen } from '@empathyco/x-components';\n\n  export default {\n    name: 'BaseIdModalOpenTest',\n    components: {\n      BaseIdModalOpen\n    }\n  };\n</script>\n```\n</docs>\n"],"names":["_openBlock","_createElementBlock","_createCommentVNode"],"mappings":";;;;AAEK,SAAA,WAAA,CAAK,IAAE,EAAA,MAAA,EAAA,MAAA,EAAA,MAAA,EAAA,KAAA,EAAA,QAAA,EAAA;AACH,EAAA,OAAAA,SAAA,EAAyC,EAAAC,kBAAA,CAAA,QAAA,EAAA;AAAA,IAC9C,gBAAU,CAAe,CAAA,KAAA,MAAA,CAAA,CAAA,CAAA,GAAA,CAAA,GAAA,IAAA,KAAA,IAAA,CAAA,SAAA,IAAA,IAAA,CAAA,SAAA,CAAA,GAAA,IAAA,CAAA,CAAA;AAAA,IAAA,KAAA,EAAA,wCAAA;AAEzB,IAAA,WAAA,EAAA,eAAA;AAAA,GACA,EAAA;AAAA,IAAAC,kBAAA,CAAA,gEAAA,CAAA;;;;;;;;"}

package/js/components/modals/base-id-modal-open.vue2.js

@@ -1,16 +1,16 @@
 import { defineComponent } from 'vue';
-import { NoElement } from '../no-element.js';
-import '../../composables/create-use-device.composable.js';
+import '../../composables/create-use-device.js';
 import { use$x } from '../../composables/use-_x.js';
-import '../../plugins/x-plugin.js';
-import '@vueuse/core';
-import '../../plugins/x-bus.js';
 import '@vue/devtools-api';
 import '../../plugins/devtools/timeline.devtools.js';
 import '@empathyco/x-utils';
 import 'rxjs/operators';
 import 'rxjs';
 import '../../plugins/devtools/colors.utils.js';
+import '../../plugins/x-bus.js';
+import '../../plugins/x-plugin.js';
+import 'vuex';
+import '@vueuse/core';
 
 /**
  * Component that allows to open a modal by emitting {@link XEventsTypes.UserClickedOpenModal}
@@ -19,35 +19,31 @@ import '../../plugins/devtools/colors.utils.js';
  *
  * @public
  */
-var script = defineComponent({
-    components: { NoElement },
+var _sfc_main = defineComponent({
+    name: 'BaseIdModalOpen',
     props: {
-        /**
-         * The modalId of the modal that will be opened.
-         *
-         * @public
-         */
+        /** The modalId of the modal that will be opened. */
         modalId: {
             type: String,
             required: true
         }
     },
-    setup(props) {
+    setup(props, { slots }) {
         const $x = use$x();
         /**
          * Emits the {@link XEventsTypes.UserClickedOpenModal} event with the modalId as payload.
          *
          * @param event - The event triggering the function.
-         * @public
          */
-        const emitOpenModalEvent = ({ target }) => {
+        function openModal({ target }) {
             $x.emit('UserClickedOpenModal', props.modalId, { target: target });
-        };
-        return {
-            emitOpenModalEvent
-        };
+        }
+        /* Hack to render through a render-function, the `opening-element` slot or, in its absence,
+         the component itself. It is the alternative for the NoElement antipattern. */
+        const innerProps = { openModal };
+        return (slots['opening-element'] ? () => slots['opening-element']?.(innerProps)[0] : innerProps);
     }
 });
 
-export { script as default };
+export { _sfc_main as default };
 //# sourceMappingURL=base-id-modal-open.vue2.js.map

package/js/components/modals/base-id-modal-open.vue2.js.map

@@ -1 +1 @@
-{"version":3,"file":"base-id-modal-open.vue2.js","sources":["../../../../src/components/modals/base-id-modal-open.vue?rollup-plugin-vue=script.ts"],"sourcesContent":["\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n  import { defineComponent } from 'vue';\n  import { NoElement } from '../no-element';\n  import { use$x } from '../../composables/index';\n\n  /**\n   * Component that allows to open a modal by emitting {@link XEventsTypes.UserClickedOpenModal}\n   * with the modalId as payload. It allows full customization with the 'opening-element' slot and\n   * exposes the 'openModal' function.\n   *\n   * @public\n   */\n  export default defineComponent({\n    components: { NoElement },\n    props: {\n      /**\n       * The modalId of the modal that will be opened.\n       *\n       * @public\n       */\n      modalId: {\n        type: String,\n        required: true\n      }\n    },\n    setup(props) {\n      const $x = use$x();\n\n      /**\n       * Emits the {@link XEventsTypes.UserClickedOpenModal} event with the modalId as payload.\n       *\n       * @param event - The event triggering the function.\n       * @public\n       */\n      const emitOpenModalEvent = ({ target }: Event): void => {\n        $x.emit('UserClickedOpenModal', props.modalId, { target: target as HTMLElement });\n      };\n\n      return {\n        emitOpenModalEvent\n      };\n    }\n  });\n"],"names":[],"mappings":";;;;;;;;;;;;;;AAyBE;;;;;;AAMG;AACH,aAAe,eAAe,CAAC;IAC7B,UAAU,EAAE,EAAE,SAAS,EAAE;AACzB,IAAA,KAAK,EAAE;AACL;;;;AAIG;AACH,QAAA,OAAO,EAAE;AACP,YAAA,IAAI,EAAE,MAAM;AACZ,YAAA,QAAQ,EAAE,IAAI;AACf,SAAA;AACF,KAAA;AACD,IAAA,KAAK,CAAC,KAAK,EAAA;AACT,QAAA,MAAM,EAAE,GAAG,KAAK,EAAE,CAAC;AAEnB;;;;;AAKG;AACH,QAAA,MAAM,kBAAkB,GAAG,CAAC,EAAE,MAAM,EAAS,KAAU;AACrD,YAAA,EAAE,CAAC,IAAI,CAAC,sBAAsB,EAAE,KAAK,CAAC,OAAO,EAAE,EAAE,MAAM,EAAE,MAAqB,EAAE,CAAC,CAAC;AACpF,SAAC,CAAC;QAEF,OAAO;YACL,kBAAkB;SACnB,CAAC;KACH;AACF,CAAA,CAAC;;;;"}
+{"version":3,"file":"base-id-modal-open.vue2.js","sources":["../../../../src/components/modals/base-id-modal-open.vue"],"sourcesContent":["<template>\n  <button\n    @click=\"openModal\"\n    class=\"x-events-modal-id-open-button x-button\"\n    data-test=\"open-modal-id\"\n  >\n    <!-- @slot (Required) Button content with a text, an icon or both -->\n    <slot />\n  </button>\n</template>\n\n<script lang=\"ts\">\n  import { defineComponent } from 'vue';\n  import { use$x } from '../../composables';\n\n  /**\n   * Component that allows to open a modal by emitting {@link XEventsTypes.UserClickedOpenModal}\n   * with the modalId as payload. It allows full customization with the 'opening-element' slot and\n   * exposes the 'openModal' function.\n   *\n   * @public\n   */\n  export default defineComponent({\n    name: 'BaseIdModalOpen',\n    props: {\n      /** The modalId of the modal that will be opened. */\n      modalId: {\n        type: String,\n        required: true\n      }\n    },\n    setup(props, { slots }) {\n      const $x = use$x();\n\n      /**\n       * Emits the {@link XEventsTypes.UserClickedOpenModal} event with the modalId as payload.\n       *\n       * @param event - The event triggering the function.\n       */\n      function openModal({ target }: Event) {\n        $x.emit('UserClickedOpenModal', props.modalId, { target: target as HTMLElement });\n      }\n\n      /* Hack to render through a render-function, the `opening-element` slot or, in its absence,\n       the component itself. It is the alternative for the NoElement antipattern. */\n      const innerProps = { openModal };\n      return (\n        slots['opening-element'] ? () => slots['opening-element']?.(innerProps)[0] : innerProps\n      ) as typeof innerProps;\n    }\n  });\n</script>\n\n<docs lang=\"mdx\">\n## Events\n\nA list of events that the component will emit:\n\n- [`UserClickedOpenModal`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts):\n  the event is emitted after the user clicks the button. The event payload is the id of the modal\n  that is going to be opened.\n\n## Examples\n\nComponent containing an event button that emits `UserClickedOpenModal` when it is clicked with the\nmodalId as payload. It has a default slot to customize its contents and can also be fully\ncustomized, replacing the default button with any other element.\n\n### Basic example\n\nThe component rendering content passed to the default slot inside the button and opening the modal\nwith modalId `my-modal`.\n\n```vue\n<template>\n  <BaseIdModalOpen modalId=\"my-modal\">\n    <img src=\"./open-button-icon.svg\" />\n    <span>Open</span>\n  </BaseIdModalOpen>\n</template>\n\n<script>\n  import { BaseIdModalOpen } from '@empathyco/x-components';\n\n  export default {\n    name: 'BaseIdModalOpenTest',\n    components: {\n      BaseIdModalOpen\n    }\n  };\n</script>\n```\n\n### Replacing the default button\n\nThe component renders whatever element is passed, replacing the default button and exposing the\nfunction to open the modal with modalId `my-modal`.\n\n```vue\n<template>\n  <BaseIdModalOpen modalId=\"my-modal\">\n    <template #opening-element=\"{ openModal }\">\n      <ul>\n        <li @click=\"openModal\">Open here</li>\n        <li>Not here</li>\n      </ul>\n    </template>\n  </BaseIdModalOpen>\n</template>\n\n<script>\n  import { BaseIdModalOpen } from '@empathyco/x-components';\n\n  export default {\n    name: 'BaseIdModalOpenTest',\n    components: {\n      BaseIdModalOpen\n    }\n  };\n</script>\n```\n</docs>\n"],"names":[],"mappings":";;;;;;;;;;;;;;AAeE;;;;;;AAME;AACF,gBAAe,eAAe,CAAC;AAC7B,IAAA,IAAI,EAAE,iBAAiB;AACvB,IAAA,KAAK,EAAE;;AAEL,QAAA,OAAO,EAAE;AACP,YAAA,IAAI,EAAE,MAAM;AACZ,YAAA,QAAQ,EAAE,IAAG;AACf,SAAA;AACD,KAAA;AACD,IAAA,KAAK,CAAC,KAAK,EAAE,EAAE,KAAI,EAAG,EAAA;AACpB,QAAA,MAAM,EAAC,GAAI,KAAK,EAAE,CAAA;AAElB;;;;AAIE;AACF,QAAA,SAAS,SAAS,CAAC,EAAE,MAAK,EAAU,EAAA;AAClC,YAAA,EAAE,CAAC,IAAI,CAAC,sBAAsB,EAAE,KAAK,CAAC,OAAO,EAAE,EAAE,MAAM,EAAE,MAAoB,EAAG,CAAC,CAAA;SACnF;AAEA;AAC6E;AAC7E,QAAA,MAAM,UAAW,GAAE,EAAE,SAAQ,EAAG,CAAA;QAChC,QACE,KAAK,CAAC,iBAAiB,CAAA,GAAI,MAAM,KAAK,CAAC,iBAAiB,CAAC,GAAG,UAAU,CAAC,CAAC,CAAC,CAAA,GAAI,UAAS,EAClE;KACxB;AACD,CAAA,CAAC;;;;"}

package/js/components/modals/base-id-modal.vue.js

@@ -1,63 +1,24 @@
-import script from './base-id-modal.vue2.js';
-import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.mjs';
+import _sfc_main from './base-id-modal.vue2.js';
+import { resolveComponent, openBlock, createBlock, withCtx, renderSlot } from 'vue';
+import _export_sfc from '../../_virtual/_plugin-vue_export-helper.js';
 
-/* script */
-const __vue_script__ = script;
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_BaseModal = resolveComponent("BaseModal");
+  return openBlock(), createBlock(_component_BaseModal, {
+    ref: _ctx.el,
+    "onClick:overlay": _ctx.emitClickOutOfModal,
+    "onFocusin:body": _ctx.emitClickOutOfModal,
+    animation: _ctx.animation,
+    open: _ctx.isOpen
+  }, {
+    default: withCtx(() => [
+      renderSlot(_ctx.$slots, "default")
+    ]),
+    _: 3
+    /* FORWARDED */
+  }, 8, ["onClick:overlay", "onFocusin:body", "animation", "open"]);
+}
+var BaseIdModal = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
 
-/* template */
-var __vue_render__ = function () {
-  var _vm = this;
-  var _h = _vm.$createElement;
-  var _c = _vm._self._c || _h;
-  return _c(
-    "BaseModal",
-    _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
-  )
-};
-var __vue_staticRenderFns__ = [];
-__vue_render__._withStripped = true;
-
-  /* style */
-  const __vue_inject_styles__ = undefined;
-  /* scoped */
-  const __vue_scope_id__ = undefined;
-  /* module identifier */
-  const __vue_module_identifier__ = undefined;
-  /* functional template */
-  const __vue_is_functional_template__ = false;
-  /* style inject */
-  
-  /* style inject SSR */
-  
-  /* style inject shadow dom */
-  
-
-  
-  const __vue_component__ = /*#__PURE__*/__vue_normalize__(
-    { render: __vue_render__, staticRenderFns: __vue_staticRenderFns__ },
-    __vue_inject_styles__,
-    __vue_script__,
-    __vue_scope_id__,
-    __vue_is_functional_template__,
-    __vue_module_identifier__,
-    false,
-    undefined,
-    undefined,
-    undefined
-  );
-
-export { __vue_component__ as default };
+export { BaseIdModal as default };
 //# sourceMappingURL=base-id-modal.vue.js.map

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

@@ -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    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 { getTargetElement, 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, getTargetElement(event))\n      ) {\n        this.$x.emit('UserClickedOutOfModal', this.modalId, { target: this.$el as HTMLElement });\n      }\n    }\n  }\n</script>\n\n<docs lang=\"mdx\">\n## Events\n\nA list of events that the component will emit:\n\n- [`UserClickedOutOfModal`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts):\n  the event is emitted after the user clicks outside the modal. The event payload is the id of the\n  modal and a metadata with the target element that emitted it.\n\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### Customized usage\n\n#### Customizing the content with classes\n\nThe `contentClass` prop can be used to add classes to the modal content.\n\n```vue\n<template>\n  <div>\n    <BaseIdModalOpen modalId=\"myModal\">Open</BaseIdModalOpen>\n    <BaseIdModal modalId=\"myModal\" contentClass=\"x-bg-neutral-75\">\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</docs>\n"],"names":[],"mappings":";;;;AAEA,MAAc,cAAA,GAAA,OAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"base-id-modal.vue.js","sources":["../../../../src/components/modals/base-id-modal.vue"],"sourcesContent":["<template>\n  <BaseModal\n    :ref=\"el\"\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 { defineComponent, ref } from 'vue';\n  import { WireMetadata } from '../../wiring/wiring.types';\n  import { getTargetElement, isElementEqualOrContained } from '../../utils/html';\n  import { useXBus } from '../../composables';\n  import { AnimationProp } from '../../types/animation-prop';\n  import { XEvent } from '../../wiring/events.types';\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  export default defineComponent({\n    name: 'BaseIdModal',\n    components: { BaseModal },\n    props: {\n      /**\n       * Animation to use for opening/closing the modal.\n       */\n      animation: {\n        type: AnimationProp\n      },\n      /**\n       * The modalId to use for the open and close event listeners.\n       */\n      modalId: {\n        type: String,\n        required: true\n      }\n    },\n    setup(props) {\n      /** The element that opened the modal. */\n      let openerElement: HTMLElement | undefined;\n\n      /** Whether the modal is open or not. */\n      const isOpen = ref(false);\n\n      const el = ref<HTMLElement>();\n\n      const closeModalEvents: XEvent[] = ['UserClickedCloseModal', 'UserClickedOutOfModal'];\n\n      const xBus = useXBus();\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      function openModal(modalId: string, metadata: WireMetadata): void {\n        if (!isOpen.value && props.modalId === modalId) {\n          openerElement = metadata.target;\n          isOpen.value = 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      function closeModal(payload: string): void {\n        if (isOpen.value && props.modalId === payload) {\n          isOpen.value = 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      function emitClickOutOfModal(event: MouseEvent | FocusEvent): void {\n        // Prevents clicking the open button when the panel is already open to close the panel.\n        if (!openerElement || !isElementEqualOrContained(openerElement, getTargetElement(event))) {\n          xBus.emit('UserClickedOutOfModal', props.modalId, { target: el.value as HTMLElement });\n        }\n      }\n\n      xBus\n        .on('UserClickedOpenModal', true)\n        .subscribe(({ eventPayload, metadata }) => openModal(eventPayload, metadata));\n\n      closeModalEvents.forEach(event => {\n        xBus.on(event, false).subscribe(eventPayload => closeModal(eventPayload as string));\n      });\n\n      return {\n        el,\n        isOpen,\n        emitClickOutOfModal\n      };\n    }\n  });\n</script>\n\n<docs lang=\"mdx\">\n## Events\n\nA list of events that the component will emit:\n\n- [`UserClickedOutOfModal`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts):\n  the event is emitted after the user clicks outside the modal. The event payload is the id of the\n  modal and a metadata with the target element that emitted it.\n\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### Customized usage\n\n#### Customizing the content with classes\n\nThe `contentClass` prop can be used to add classes to the modal content.\n\n```vue\n<template>\n  <div>\n    <BaseIdModalOpen modalId=\"myModal\">Open</BaseIdModalOpen>\n    <BaseIdModal modalId=\"myModal\" contentClass=\"x-bg-neutral-75\">\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</docs>\n"],"names":["_resolveComponent","_openBlock","emitClickOutOfModal","animation","_renderSlot"],"mappings":";;;;;+BACEA,gBAQY,CAAA,WAAA,CAAA,CAAA;AANT,EAAA,OAAAC,SAAA,IAAeC,WAAmB,CAAA,oBAAA,EAAA;AAAA,IAClC,GAAA,EAAA,IAAA,CAAA,EAAA;AAAA,IACA,iBAAWC,EAAAA,IAAAA,CAAAA,mBAAAA;AAAAA,IACX,gBAAY,EAAA,IAAA,CAAA,mBAAA;AAAA,IAAA,SAAA,EAAA,IAAA,CAAA,SAAA;AANjB,IAAA,IAAA,EAAA,IAAA,CAAA,MAAA;AAAA,GAAA,EAAA;;AAAA,MAAAC,UAAA,CAAA,IAAA,CAAA,MAAA,EAAA,SAAA,CAAA;AAAA,KAAA,CAAA;;;;;;;;;"}

package/js/components/modals/base-id-modal.vue2.js

@@ -1,9 +1,19 @@
-import { __decorate } from 'tslib';
-import Vue from 'vue';
-import { Prop, Component } from 'vue-property-decorator';
-import { XOn } from '../decorators/bus.decorators.js';
+import { defineComponent, ref } from 'vue';
 import { isElementEqualOrContained, getTargetElement } from '../../utils/html.js';
-import __vue_component__ from './base-modal.vue.js';
+import '../../composables/create-use-device.js';
+import '@vue/devtools-api';
+import '../../plugins/devtools/timeline.devtools.js';
+import '@empathyco/x-utils';
+import 'rxjs/operators';
+import 'rxjs';
+import '../../plugins/devtools/colors.utils.js';
+import '../../plugins/x-bus.js';
+import '../../plugins/x-plugin.js';
+import 'vuex';
+import { useXBus } from '../../composables/use-x-bus.js';
+import '@vueuse/core';
+import { AnimationProp } from '../../types/animation-prop.js';
+import BaseModal from './base-modal.vue.js';
 
 /**
  * Component containing a modal expecting a required prop, named `modalId`. It reacts to
@@ -13,71 +23,84 @@ import __vue_component__ from './base-modal.vue.js';
  *
  * @public
  */
-let BaseIdModal = class BaseIdModal extends Vue {
-    constructor() {
-        super(...arguments);
+var _sfc_main = defineComponent({
+    name: 'BaseIdModal',
+    components: { BaseModal },
+    props: {
+        /**
+         * Animation to use for opening/closing the modal.
+         */
+        animation: {
+            type: AnimationProp
+        },
+        /**
+         * The modalId to use for the open and close event listeners.
+         */
+        modalId: {
+            type: String,
+            required: true
+        }
+    },
+    setup(props) {
+        /** The element that opened the modal. */
+        let openerElement;
         /** Whether the modal is open or not. */
-        this.isOpen = false;
-    }
-    /**
-     * Opens the modal.
-     *
-     * @param modalId - The payload of the {@link XEventsTypes.UserClickedOpenModal} event.
-     * @param metadata - The metadata of the emitted event.
-     * @public
-     */
-    openModal(modalId, metadata) {
-        if (!this.isOpen && this.modalId === modalId) {
-            this.openerElement = metadata.target;
-            this.isOpen = true;
+        const isOpen = ref(false);
+        const el = ref();
+        const closeModalEvents = ['UserClickedCloseModal', 'UserClickedOutOfModal'];
+        const xBus = useXBus();
+        /**
+         * Opens the modal.
+         *
+         * @param modalId - The payload of the {@link XEventsTypes.UserClickedOpenModal} event.
+         * @param metadata - The metadata of the emitted event.
+         * @public
+         */
+        function openModal(modalId, metadata) {
+            if (!isOpen.value && props.modalId === modalId) {
+                openerElement = metadata.target;
+                isOpen.value = true;
+            }
         }
-    }
-    /**
-     * Closes the modal.
-     *
-     * @param payload - The payload of the closing events:
-     * {@link XEventsTypes.UserClickedCloseModal} or {@link XEventsTypes.UserClickedOutOfModal}.
-     *
-     * @public
-     */
-    closeModal(payload) {
-        if (this.isOpen && this.modalId === payload) {
-            this.isOpen = false;
+        /**
+         * Closes the modal.
+         *
+         * @param payload - The payload of the closing events:
+         * {@link XEventsTypes.UserClickedCloseModal} or {@link XEventsTypes.UserClickedOutOfModal}.
+         *
+         * @public
+         */
+        function closeModal(payload) {
+            if (isOpen.value && props.modalId === payload) {
+                isOpen.value = false;
+            }
         }
-    }
-    /**
-     * Emits a {@link XEventsTypes.UserClickedOutOfModal} event unless the passed event target
-     * is the button that opened the modal.
-     *
-     * @param event - The event that triggered the close attempt.
-     * @public
-     */
-    emitClickOutOfModal(event) {
-        // Prevents clicking the open button when the panel is already open to close the panel.
-        if (!this.openerElement ||
-            !isElementEqualOrContained(this.openerElement, getTargetElement(event))) {
-            this.$x.emit('UserClickedOutOfModal', this.modalId, { target: this.$el });
+        /**
+         * Emits a {@link XEventsTypes.UserClickedOutOfModal} event unless the passed event target
+         * is the button that opened the modal.
+         *
+         * @param event - The event that triggered the close attempt.
+         * @public
+         */
+        function emitClickOutOfModal(event) {
+            // Prevents clicking the open button when the panel is already open to close the panel.
+            if (!openerElement || !isElementEqualOrContained(openerElement, getTargetElement(event))) {
+                xBus.emit('UserClickedOutOfModal', props.modalId, { target: el.value });
+            }
         }
+        xBus
+            .on('UserClickedOpenModal', true)
+            .subscribe(({ eventPayload, metadata }) => openModal(eventPayload, metadata));
+        closeModalEvents.forEach(event => {
+            xBus.on(event, false).subscribe(eventPayload => closeModal(eventPayload));
+        });
+        return {
+            el,
+            isOpen,
+            emitClickOutOfModal
+        };
     }
-};
-__decorate([
-    Prop()
-], BaseIdModal.prototype, "animation", void 0);
-__decorate([
-    Prop({ required: true })
-], BaseIdModal.prototype, "modalId", void 0);
-__decorate([
-    XOn('UserClickedOpenModal')
-], BaseIdModal.prototype, "openModal", null);
-__decorate([
-    XOn(['UserClickedCloseModal', 'UserClickedOutOfModal'])
-], BaseIdModal.prototype, "closeModal", null);
-BaseIdModal = __decorate([
-    Component({
-        components: { BaseModal: __vue_component__ }
-    })
-], BaseIdModal);
-var script = BaseIdModal;
+});
 
-export { script as default };
+export { _sfc_main as default };
 //# sourceMappingURL=base-id-modal.vue2.js.map

package/js/components/modals/base-id-modal.vue2.js.map

@@ -1 +1 @@
-{"version":3,"file":"base-id-modal.vue2.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\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 { getTargetElement, 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, getTargetElement(event))\n      ) {\n        this.$x.emit('UserClickedOutOfModal', this.modalId, { target: this.$el as HTMLElement });\n      }\n    }\n  }\n"],"names":["BaseModal"],"mappings":";;;;;;;AAoBE;;;;;;;AAOG;AAIY,IAAM,WAAW,GAAjB,MAAM,WAAY,SAAQ,GAAG,CAAA;AAA7B,IAAA,WAAA,GAAA;;;QAUH,IAAM,CAAA,MAAA,GAAG,KAAK,CAAC;KAmD1B;AA9CC;;;;;;AAMG;IAEH,SAAS,CAAC,OAAe,EAAE,QAAsB,EAAA;QAC/C,IAAI,CAAC,IAAI,CAAC,MAAM,IAAI,IAAI,CAAC,OAAO,KAAK,OAAO,EAAE;AAC5C,YAAA,IAAI,CAAC,aAAa,GAAG,QAAQ,CAAC,MAAM,CAAC;AACrC,YAAA,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC;AACpB,SAAA;KACF;AAED;;;;;;;AAOG;AAEH,IAAA,UAAU,CAAC,OAAe,EAAA;QACxB,IAAI,IAAI,CAAC,MAAM,IAAI,IAAI,CAAC,OAAO,KAAK,OAAO,EAAE;AAC3C,YAAA,IAAI,CAAC,MAAM,GAAG,KAAK,CAAC;AACrB,SAAA;KACF;AAED;;;;;;AAMG;AACO,IAAA,mBAAmB,CAAC,KAA8B,EAAA;;QAE1D,IACE,CAAC,IAAI,CAAC,aAAa;YACnB,CAAC,yBAAyB,CAAC,IAAI,CAAC,aAAa,EAAE,gBAAgB,CAAC,KAAK,CAAC,CAAC,EACvE;AACA,YAAA,IAAI,CAAC,EAAE,CAAC,IAAI,CAAC,uBAAuB,EAAE,IAAI,CAAC,OAAO,EAAE,EAAE,MAAM,EAAE,IAAI,CAAC,GAAkB,EAAE,CAAC,CAAC;AAC1F,SAAA;KACF;CACF,CAAA;AA1DC,UAAA,CAAA;AADC,IAAA,IAAI,EAAE;AACyB,CAAA,EAAA,WAAA,CAAA,SAAA,EAAA,WAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAIhC,UAAA,CAAA;AADC,IAAA,IAAI,CAAC,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC;AACD,CAAA,EAAA,WAAA,CAAA,SAAA,EAAA,SAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAgBxB,UAAA,CAAA;IADC,GAAG,CAAC,sBAAsB,CAAC;AAM3B,CAAA,EAAA,WAAA,CAAA,SAAA,EAAA,WAAA,EAAA,IAAA,CAAA,CAAA;AAWD,UAAA,CAAA;AADC,IAAA,GAAG,CAAC,CAAC,uBAAuB,EAAE,uBAAuB,CAAC,CAAC;AAKvD,CAAA,EAAA,WAAA,CAAA,SAAA,EAAA,YAAA,EAAA,IAAA,CAAA,CAAA;AA3CkB,WAAW,GAAA,UAAA,CAAA;AAH/B,IAAA,SAAS,CAAC;QACT,UAAU,EAAE,aAAEA,iBAAS,EAAE;KAC1B,CAAC;AACmB,CAAA,EAAA,WAAW,CA6D/B,CAAA;aA7DoB,WAAW;;;;"}
+{"version":3,"file":"base-id-modal.vue2.js","sources":["../../../../src/components/modals/base-id-modal.vue"],"sourcesContent":["<template>\n  <BaseModal\n    :ref=\"el\"\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 { defineComponent, ref } from 'vue';\n  import { WireMetadata } from '../../wiring/wiring.types';\n  import { getTargetElement, isElementEqualOrContained } from '../../utils/html';\n  import { useXBus } from '../../composables';\n  import { AnimationProp } from '../../types/animation-prop';\n  import { XEvent } from '../../wiring/events.types';\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  export default defineComponent({\n    name: 'BaseIdModal',\n    components: { BaseModal },\n    props: {\n      /**\n       * Animation to use for opening/closing the modal.\n       */\n      animation: {\n        type: AnimationProp\n      },\n      /**\n       * The modalId to use for the open and close event listeners.\n       */\n      modalId: {\n        type: String,\n        required: true\n      }\n    },\n    setup(props) {\n      /** The element that opened the modal. */\n      let openerElement: HTMLElement | undefined;\n\n      /** Whether the modal is open or not. */\n      const isOpen = ref(false);\n\n      const el = ref<HTMLElement>();\n\n      const closeModalEvents: XEvent[] = ['UserClickedCloseModal', 'UserClickedOutOfModal'];\n\n      const xBus = useXBus();\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      function openModal(modalId: string, metadata: WireMetadata): void {\n        if (!isOpen.value && props.modalId === modalId) {\n          openerElement = metadata.target;\n          isOpen.value = 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      function closeModal(payload: string): void {\n        if (isOpen.value && props.modalId === payload) {\n          isOpen.value = 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      function emitClickOutOfModal(event: MouseEvent | FocusEvent): void {\n        // Prevents clicking the open button when the panel is already open to close the panel.\n        if (!openerElement || !isElementEqualOrContained(openerElement, getTargetElement(event))) {\n          xBus.emit('UserClickedOutOfModal', props.modalId, { target: el.value as HTMLElement });\n        }\n      }\n\n      xBus\n        .on('UserClickedOpenModal', true)\n        .subscribe(({ eventPayload, metadata }) => openModal(eventPayload, metadata));\n\n      closeModalEvents.forEach(event => {\n        xBus.on(event, false).subscribe(eventPayload => closeModal(eventPayload as string));\n      });\n\n      return {\n        el,\n        isOpen,\n        emitClickOutOfModal\n      };\n    }\n  });\n</script>\n\n<docs lang=\"mdx\">\n## Events\n\nA list of events that the component will emit:\n\n- [`UserClickedOutOfModal`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts):\n  the event is emitted after the user clicks outside the modal. The event payload is the id of the\n  modal and a metadata with the target element that emitted it.\n\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### Customized usage\n\n#### Customizing the content with classes\n\nThe `contentClass` prop can be used to add classes to the modal content.\n\n```vue\n<template>\n  <div>\n    <BaseIdModalOpen modalId=\"myModal\">Open</BaseIdModalOpen>\n    <BaseIdModal modalId=\"myModal\" contentClass=\"x-bg-neutral-75\">\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</docs>\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;AAqBE;;;;;;;AAOE;AACF,gBAAe,eAAe,CAAC;AAC7B,IAAA,IAAI,EAAE,aAAa;IACnB,UAAU,EAAE,EAAE,WAAW;AACzB,IAAA,KAAK,EAAE;AACL;;AAEE;AACF,QAAA,SAAS,EAAE;AACT,YAAA,IAAI,EAAE,aAAY;AACnB,SAAA;AACD;;AAEE;AACF,QAAA,OAAO,EAAE;AACP,YAAA,IAAI,EAAE,MAAM;AACZ,YAAA,QAAQ,EAAE,IAAG;AACf,SAAA;AACD,KAAA;AACD,IAAA,KAAK,CAAC,KAAK,EAAA;;AAET,QAAA,IAAI,aAAsC,CAAA;;AAG1C,QAAA,MAAM,MAAK,GAAI,GAAG,CAAC,KAAK,CAAC,CAAA;AAEzB,QAAA,MAAM,KAAK,GAAG,EAAe,CAAA;AAE7B,QAAA,MAAM,gBAAgB,GAAa,CAAC,uBAAuB,EAAE,uBAAuB,CAAC,CAAA;AAErF,QAAA,MAAM,IAAG,GAAI,OAAO,EAAE,CAAA;AAEtB;;;;;;AAME;AACF,QAAA,SAAS,SAAS,CAAC,OAAe,EAAE,QAAsB,EAAA;YACxD,IAAI,CAAC,MAAM,CAAC,SAAS,KAAK,CAAC,OAAQ,KAAI,OAAO,EAAE;AAC9C,gBAAA,aAAc,GAAE,QAAQ,CAAC,MAAM,CAAA;AAC/B,gBAAA,MAAM,CAAC,KAAM,GAAE,IAAI,CAAA;AACrB,aAAA;SACF;AAEA;;;;;;;AAOE;QACF,SAAS,UAAU,CAAC,OAAe,EAAA;YACjC,IAAI,MAAM,CAAC,SAAS,KAAK,CAAC,OAAQ,KAAI,OAAO,EAAE;AAC7C,gBAAA,MAAM,CAAC,QAAQ,KAAK,CAAA;AACtB,aAAA;SACF;AAEA;;;;;;AAME;QACF,SAAS,mBAAmB,CAAC,KAA8B,EAAA;;AAEzD,YAAA,IAAI,CAAC,aAAY,IAAK,CAAC,yBAAyB,CAAC,aAAa,EAAE,gBAAgB,CAAC,KAAK,CAAC,CAAC,EAAE;AACxF,gBAAA,IAAI,CAAC,IAAI,CAAC,uBAAuB,EAAE,KAAK,CAAC,OAAO,EAAE,EAAE,MAAM,EAAE,EAAE,CAAC,KAAmB,EAAG,CAAC,CAAA;AACxF,aAAA;SACF;QAEA,IAAG;AACA,aAAA,EAAE,CAAC,sBAAsB,EAAE,IAAI,CAAA;AAC/B,aAAA,SAAS,CAAC,CAAC,EAAE,YAAY,EAAE,QAAS,EAAC,KAAK,SAAS,CAAC,YAAY,EAAE,QAAQ,CAAC,CAAC,CAAA;AAE/E,QAAA,gBAAgB,CAAC,OAAO,CAAC,KAAI,IAAK;AAChC,YAAA,IAAI,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,CAAC,SAAS,CAAC,YAAa,IAAG,UAAU,CAAC,YAAsB,CAAC,CAAC,CAAA;AACrF,SAAC,CAAC,CAAA;QAEF,OAAO;YACL,EAAE;YACF,MAAM;YACN,mBAAkB;SACnB,CAAA;KACH;AACD,CAAA,CAAC;;;;"}

package/js/components/modals/base-modal.vue.js

@@ -1,107 +1,76 @@
-import script from './base-modal.vue2.js';
+import _sfc_main from './base-modal.vue2.js';
+import { withDirectives, openBlock, createElementBlock, createBlock, resolveDynamicComponent, withCtx, normalizeClass, createCommentVNode, renderSlot, vShow } from 'vue';
 import './base-modal.vue3.js';
-import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.mjs';
+import _export_sfc from '../../_virtual/_plugin-vue_export-helper.js';
 
-/* script */
-const __vue_script__ = script;
-/* template */
-var __vue_render__ = function () {
-  var _vm = this;
-  var _h = _vm.$createElement;
-  var _c = _vm._self._c || _h;
-  return _c(
+const _hoisted_1 = {
+  ref: "modalRef",
+  class: "x-modal",
+  "data-test": "modal"
+};
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+  return withDirectives((openBlock(), createElementBlock(
     "div",
-    {
-      directives: [
-        {
-          name: "show",
-          rawName: "v-show",
-          value: _vm.isWaitingForLeave || _vm.open,
-          expression: "isWaitingForLeave || open",
-        },
-      ],
-      ref: "modal",
-      staticClass: "x-modal",
-      attrs: { "data-test": "modal" },
-    },
+    _hoisted_1,
     [
-      _c(
-        _vm.animation,
+      (openBlock(), createBlock(
+        resolveDynamicComponent(_ctx.animation),
         {
-          tag: "component",
-          on: {
-            "before-leave": function ($event) {
-              _vm.isWaitingForLeave = true;
-            },
-            "after-leave": function ($event) {
-              _vm.isWaitingForLeave = false;
-            },
-          },
+          onBeforeLeave: _cache[0] || (_cache[0] = ($event) => _ctx.isWaitingForLeave = true),
+          onAfterLeave: _cache[1] || (_cache[1] = ($event) => _ctx.isWaitingForLeave = false)
         },
-        [
-          _vm.open
-            ? _c(
-                "div",
-                {
-                  ref: "modalContent",
-                  staticClass: "x-modal__content",
-                  class: _vm.contentClass,
-                  attrs: { "data-test": "modal-content", role: "dialog" },
-                },
-                [_vm._t("default")],
-                2
-              )
-            : _vm._e(),
-        ]
-      ),
-      _c(_vm.overlayAnimation, { tag: "component" }, [
-        _vm.open
-          ? _c("div", {
-              staticClass: "x-modal__overlay",
-              class: _vm.overlayClass,
-              attrs: { "data-test": "modal-overlay" },
-              on: {
-                click: _vm.emitOverlayClicked,
-                keydown: _vm.emitOverlayClicked,
+        {
+          default: withCtx(() => [
+            _ctx.open ? (openBlock(), createElementBlock(
+              "div",
+              {
+                key: 0,
+                ref: "modalContentRef",
+                class: normalizeClass(["x-modal__content", _ctx.contentClass]),
+                "data-test": "modal-content",
+                role: "dialog"
               },
-            })
-          : _vm._e(),
-      ]),
+              [
+                createCommentVNode(" @slot (Required) Modal container content "),
+                renderSlot(_ctx.$slots, "default", {}, void 0, true)
+              ],
+              2
+              /* CLASS */
+            )) : createCommentVNode("v-if", true)
+          ]),
+          _: 3
+          /* FORWARDED */
+        },
+        32
+        /* NEED_HYDRATION */
+      )),
+      (openBlock(), createBlock(resolveDynamicComponent(_ctx.overlayAnimation), null, {
+        default: withCtx(() => [
+          _ctx.open ? (openBlock(), createElementBlock(
+            "div",
+            {
+              key: 0,
+              onClick: _cache[2] || (_cache[2] = (...args) => _ctx.emitOverlayClicked && _ctx.emitOverlayClicked(...args)),
+              onKeydown: _cache[3] || (_cache[3] = (...args) => _ctx.emitOverlayClicked && _ctx.emitOverlayClicked(...args)),
+              class: normalizeClass(["x-modal__overlay", _ctx.overlayClass]),
+              "data-test": "modal-overlay"
+            },
+            null,
+            34
+            /* CLASS, NEED_HYDRATION */
+          )) : createCommentVNode("v-if", true)
+        ]),
+        _: 1
+        /* STABLE */
+      }))
     ],
-    1
-  )
-};
-var __vue_staticRenderFns__ = [];
-__vue_render__._withStripped = true;
-
-  /* style */
-  const __vue_inject_styles__ = undefined;
-  /* scoped */
-  const __vue_scope_id__ = "data-v-1e5b240a";
-  /* module identifier */
-  const __vue_module_identifier__ = undefined;
-  /* functional template */
-  const __vue_is_functional_template__ = false;
-  /* style inject */
-  
-  /* style inject SSR */
-  
-  /* style inject shadow dom */
-  
-
-  
-  const __vue_component__ = /*#__PURE__*/__vue_normalize__(
-    { render: __vue_render__, staticRenderFns: __vue_staticRenderFns__ },
-    __vue_inject_styles__,
-    __vue_script__,
-    __vue_scope_id__,
-    __vue_is_functional_template__,
-    __vue_module_identifier__,
-    false,
-    undefined,
-    undefined,
-    undefined
-  );
+    512
+    /* NEED_PATCH */
+  )), [
+    [vShow, _ctx.isWaitingForLeave || _ctx.open]
+  ]);
+}
+var BaseModal = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__scopeId", "data-v-61b0d59b"]]);
 
-export { __vue_component__ as default };
+export { BaseModal as default };
 //# sourceMappingURL=base-modal.vue.js.map