From 7ef04b65bcef2eb9b9dc5bc107bc02823831d444 Mon Sep 17 00:00:00 2001
From: Laura Martinez Garcia <lauram@empathy.co>
Date: Mon, 3 Jun 2024 13:17:06 +0200
Subject: [PATCH 1/7] feat: migrate BaseEventsModal to composition API

---
 .../components/modals/base-events-modal.vue   | 189 ++++++++++--------
 1 file changed, 105 insertions(+), 84 deletions(-)

diff --git a/packages/x-components/src/components/modals/base-events-modal.vue b/packages/x-components/src/components/modals/base-events-modal.vue
index aa17adb9b0..e71182ab80 100644
--- a/packages/x-components/src/components/modals/base-events-modal.vue
+++ b/packages/x-components/src/components/modals/base-events-modal.vue
@@ -1,5 +1,6 @@
 <template>
   <BaseModal
+    ref="baseModalEl"
     @click:overlay="emitBodyClickEvent"
     @focusin:body="emitBodyClickEvent"
     :animation="animation"
@@ -11,12 +12,11 @@
 </template>
 
 <script lang="ts">
-  import Vue from 'vue';
-  import { Component, Prop } from 'vue-property-decorator';
+  import { defineComponent, PropType, ref } from 'vue';
   import { XEvent } from '../../wiring/events.types';
-  import { XOn } from '../decorators/bus.decorators';
-  import { WireMetadata } from '../../wiring/wiring.types';
   import { getTargetElement, isElementEqualOrContained } from '../../utils/html';
+  import { AnimationProp } from '../../types/animation-prop';
+  import { use$x } from '../../composables/use-$x';
   import BaseModal from './base-modal.vue';
 
   /**
@@ -30,88 +30,109 @@
    *
    * @public
    */
-  @Component({
-    components: { BaseModal }
-  })
-  export default class BaseEventsModal extends Vue {
-    /**
-     * Animation to use for opening/closing the modal.
-     */
-    @Prop()
-    public animation?: Vue | string;
-    /**
-     * Array of {@link XEvent} to listen to open the modal.
-     */
-    @Prop({ default: (): XEvent[] => ['UserClickedOpenEventsModal'] })
-    public eventsToOpenModal!: XEvent[];
-
-    /**
-     * Array of {@link XEvent} to listen to close the modal.
-     */
-    @Prop({
-      default: (): XEvent[] => ['UserClickedCloseEventsModal', 'UserClickedOutOfEventsModal']
-    })
-    public eventsToCloseModal!: XEvent[];
-
-    /**
-     * Event to emit when any part of the website out of the modal has been clicked.
-     */
-    @Prop({ default: 'UserClickedOutOfEventsModal' })
-    public bodyClickEvent!: XEvent;
-
-    /**
-     * Whether the modal is open or not.
-     */
-    protected isOpen = false;
-
-    /** The element that opened the modal. */
-    protected openerElement?: HTMLElement;
-
-    /**
-     * Opens the modal.
-     *
-     * @param _payload - The payload of the event that opened the modal.
-     * @param metadata - The metadata of the event that opened the modal.
-     *
-     * @internal
-     */
-    @XOn(component => (component as BaseEventsModal).eventsToOpenModal)
-    openModal(_payload: unknown, metadata: WireMetadata): void {
-      if (!this.isOpen) {
-        this.openerElement = metadata.target;
-        this.isOpen = true;
-      }
-    }
-
-    /**
-     * Closes the modal.
-     *
-     * @internal
-     */
-    @XOn(component => (component as BaseEventsModal).eventsToCloseModal)
-    closeModal(): void {
-      if (this.isOpen) {
-        this.isOpen = false;
-      }
-    }
-
-    /**
-     * Emits the event defined in the {@link BaseEventsModal.bodyClickEvent} event unless the passed
-     * event target is the button that opened the modal.
-     *
-     * @param event - The event that triggered the close attempt.
-     * @public
-     */
-    protected emitBodyClickEvent(event: MouseEvent | FocusEvent): void {
-      // 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(this.bodyClickEvent, undefined, { target: this.$el as HTMLElement });
+  export default defineComponent({
+    name: 'BaseEventsModal',
+    components: {
+      BaseModal
+    },
+    props: {
+      /**
+       * Animation to use for opening/closing the modal.
+       */
+      animation: AnimationProp,
+
+      /**
+       * Array of {@link XEvent} to listen to open the modal.
+       */
+      eventsToOpenModal: {
+        type: Array as PropType<XEvent[]>,
+        default: (): XEvent[] => ['UserClickedOpenEventsModal']
+      },
+
+      /**
+       * Array of {@link XEvent} to listen to close the modal.
+       */
+      eventsToCloseModal: {
+        type: Array as PropType<XEvent[]>,
+        default: (): XEvent[] => ['UserClickedCloseEventsModal', 'UserClickedOutOfEventsModal']
+      },
+
+      /**
+       * Event to emit when any part of the website out of the modal has been clicked.
+       */
+      bodyClickEvent: {
+        type: String as PropType<XEvent>,
+        default: 'UserClickedOutOfEventsModal'
       }
+    },
+    setup(props) {
+      const $x = use$x();
+
+      /**
+       * Whether the modal is open or not.
+       */
+      const isOpen = ref(false);
+
+      /** The element that opened the modal. */
+      const openerElement = ref<HTMLElement>();
+
+      const baseModalEl = ref<HTMLElement>();
+
+      /**
+       * Opens the modal.
+       *
+       * @param _payload - The payload of the event that opened the modal.
+       * @param metadata - The metadata of the event that opened the modal.
+       *
+       * @internal
+       */
+      props.eventsToOpenModal?.forEach(event =>
+        $x.on(event, true).subscribe(({ metadata }) => {
+          if (!isOpen.value) {
+            openerElement.value = metadata.target;
+            isOpen.value = true;
+          }
+        })
+      );
+
+      /**
+       * Closes the modal.
+       *
+       * @internal
+       */
+      props.eventsToCloseModal?.forEach(event =>
+        $x.on(event, false).subscribe(() => {
+          if (isOpen.value) {
+            isOpen.value = false;
+          }
+        })
+      );
+
+      /**
+       * Emits the event defined in the {@link BaseEventsModal.bodyClickEvent} event unless the passed
+       * event target is the button that opened the modal.
+       *
+       * @param event - The event that triggered the close attempt.
+       * @public
+       */
+      const emitBodyClickEvent = (event: MouseEvent | FocusEvent) => {
+        // Prevents clicking the open button when the panel is already open to close the panel.
+        if (
+          !openerElement.value ||
+          !isElementEqualOrContained(openerElement.value, getTargetElement(event))
+        ) {
+          $x.emit(props.bodyClickEvent, undefined, { target: baseModalEl.value as HTMLElement });
+        }
+      };
+
+      return {
+        isOpen,
+        emitBodyClickEvent,
+        openerElement,
+        baseModalEl
+      };
     }
-  }
+  });
 </script>
 
 <docs lang="mdx">

From 3e437c56d4e3f314b373b486e8926c4f4b028fc6 Mon Sep 17 00:00:00 2001
From: Laura Martinez Garcia <lauram@empathy.co>
Date: Mon, 3 Jun 2024 13:52:36 +0200
Subject: [PATCH 2/7] feat: add BaseEventsModal to the playground

---
 .../src/components/index.ts                   |  1 +
 .../modals/test-base-events-modal.vue         | 43 +++++++++++++++++++
 packages/_vue3-migration-test/src/router.ts   |  8 +++-
 3 files changed, 51 insertions(+), 1 deletion(-)
 create mode 100644 packages/_vue3-migration-test/src/components/modals/test-base-events-modal.vue

diff --git a/packages/_vue3-migration-test/src/components/index.ts b/packages/_vue3-migration-test/src/components/index.ts
index 0210867c1e..754c329651 100644
--- a/packages/_vue3-migration-test/src/components/index.ts
+++ b/packages/_vue3-migration-test/src/components/index.ts
@@ -12,3 +12,4 @@ export { default as TestHighlight } from './test-highlight.vue';
 export { default as TestBaseResultImages } from './result/test-base-result-images.vue';
 export { default as TestBasePanel } from './panels/test-base-panel.vue';
 export { default as TestBaseKeyboardNavigation } from './test-base-keyboard-navigation.vue';
+export { default as TestBaseEventsModal } from './modals/test-base-events-modal.vue';
diff --git a/packages/_vue3-migration-test/src/components/modals/test-base-events-modal.vue b/packages/_vue3-migration-test/src/components/modals/test-base-events-modal.vue
new file mode 100644
index 0000000000..4013ffa099
--- /dev/null
+++ b/packages/_vue3-migration-test/src/components/modals/test-base-events-modal.vue
@@ -0,0 +1,43 @@
+<template>
+  <div class="base-modal">
+    <button @click="openModal">Open modal</button>
+    <BaseEventsModal
+      :animation="Fade"
+      :focusOnOpen="true"
+      v-bind="$attrs"
+      contentClass="content"
+      overlayClass="overlay"
+    >
+      <h1>Hello</h1>
+      <p>The modal is working with events!!</p>
+      <button @click="closeModal">Close modal</button>
+    </BaseEventsModal>
+  </div>
+</template>
+
+<script setup lang="ts">
+  import BaseEventsModal from '../../../../x-components/src/components/modals/base-events-modal.vue';
+  import Fade from '../../../../x-components/src/components/animations/fade.vue';
+  import { use$x } from '../../../../x-components/src/composables/use-$x';
+  const _$x = use$x();
+
+  const openModal = () => _$x.emit('UserClickedOpenEventsModal');
+
+  const closeModal = () => _$x.emit('UserClickedCloseEventsModal');
+</script>
+
+<style>
+  .base-modal {
+    .content {
+      background: white;
+      margin: auto;
+      width: 50%;
+      border: 3px solid green;
+      padding: 10px;
+    }
+
+    .overlay {
+      background-color: red;
+    }
+  }
+</style>
diff --git a/packages/_vue3-migration-test/src/router.ts b/packages/_vue3-migration-test/src/router.ts
index 409c149dd9..20180cce2e 100644
--- a/packages/_vue3-migration-test/src/router.ts
+++ b/packages/_vue3-migration-test/src/router.ts
@@ -26,7 +26,8 @@ import {
   TestHighlight,
   TestBaseResultImages,
   TestBasePanel,
-  TestBaseKeyboardNavigation
+  TestBaseKeyboardNavigation,
+  TestBaseEventsModal
 } from './';
 
 const routes = [
@@ -164,6 +165,11 @@ const routes = [
     path: '/base-keyboard-navigation',
     name: 'TestBaseKeyboardNavigation',
     component: TestBaseKeyboardNavigation
+  },
+  {
+    path: '/base-events-modal',
+    name: 'TestBaseEventsModal',
+    component: TestBaseEventsModal
   }
 ];
 

From 7a8af488359b2cf87a50b90da8a18e67b8e726e1 Mon Sep 17 00:00:00 2001
From: Laura Martinez Garcia <lauram@empathy.co>
Date: Mon, 3 Jun 2024 13:54:38 +0200
Subject: [PATCH 3/7] chore: refactor test component

---
 .../src/components/modals/test-base-events-modal.vue            | 2 +-
 packages/_vue3-migration-test/src/router.ts                     | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/_vue3-migration-test/src/components/modals/test-base-events-modal.vue b/packages/_vue3-migration-test/src/components/modals/test-base-events-modal.vue
index 4013ffa099..935e5363a2 100644
--- a/packages/_vue3-migration-test/src/components/modals/test-base-events-modal.vue
+++ b/packages/_vue3-migration-test/src/components/modals/test-base-events-modal.vue
@@ -37,7 +37,7 @@
     }
 
     .overlay {
-      background-color: red;
+      background-color: #00ff80;
     }
   }
 </style>
diff --git a/packages/_vue3-migration-test/src/router.ts b/packages/_vue3-migration-test/src/router.ts
index 20180cce2e..b9a5873b09 100644
--- a/packages/_vue3-migration-test/src/router.ts
+++ b/packages/_vue3-migration-test/src/router.ts
@@ -168,7 +168,7 @@ const routes = [
   },
   {
     path: '/base-events-modal',
-    name: 'TestBaseEventsModal',
+    name: 'BaseEventsModal',
     component: TestBaseEventsModal
   }
 ];

From 6274c676946536c9c1c4e54205ebda18c79b8f55 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?V=C3=ADctor=20CG?= <victorcg88@users.noreply.github.com>
Date: Tue, 4 Jun 2024 12:06:32 +0200
Subject: [PATCH 4/7] feat(base-id-modal): migrate to composition API (#1500)

---
 .../src/components/index.ts                   |   1 +
 .../components/modals/test-base-id-modal.vue  |  33 ++++
 packages/_vue3-migration-test/src/router.ts   |   8 +-
 .../fixed-header-and-asides-layout.vue        |   2 +-
 .../src/components/modals/base-id-modal.vue   | 151 ++++++++++--------
 5 files changed, 130 insertions(+), 65 deletions(-)
 create mode 100644 packages/_vue3-migration-test/src/components/modals/test-base-id-modal.vue

diff --git a/packages/_vue3-migration-test/src/components/index.ts b/packages/_vue3-migration-test/src/components/index.ts
index 0210867c1e..17064b65e5 100644
--- a/packages/_vue3-migration-test/src/components/index.ts
+++ b/packages/_vue3-migration-test/src/components/index.ts
@@ -12,3 +12,4 @@ export { default as TestHighlight } from './test-highlight.vue';
 export { default as TestBaseResultImages } from './result/test-base-result-images.vue';
 export { default as TestBasePanel } from './panels/test-base-panel.vue';
 export { default as TestBaseKeyboardNavigation } from './test-base-keyboard-navigation.vue';
+export { default as TestBaseIdModal } from './modals/test-base-id-modal.vue';
diff --git a/packages/_vue3-migration-test/src/components/modals/test-base-id-modal.vue b/packages/_vue3-migration-test/src/components/modals/test-base-id-modal.vue
new file mode 100644
index 0000000000..8819f09120
--- /dev/null
+++ b/packages/_vue3-migration-test/src/components/modals/test-base-id-modal.vue
@@ -0,0 +1,33 @@
+<template>
+  <div class="base-id-modal">
+    <BaseIdModalOpen modalId="myModal">Open</BaseIdModalOpen>
+    <BaseIdModal :animation="Fade" modalId="myModal" contentClass="content" overlayClass="overlay">
+      <h1>Hello</h1>
+      <p>The base id modal is working</p>
+      <BaseIdModalClose modalId="myModal">Close</BaseIdModalClose>
+    </BaseIdModal>
+  </div>
+</template>
+
+<script setup lang="ts">
+  import BaseIdModal from '../../../../x-components/src/components/modals/base-id-modal.vue';
+  import BaseIdModalOpen from '../../../../x-components/src/components/modals/base-id-modal-open.vue';
+  import BaseIdModalClose from '../../../../x-components/src/components/modals/base-id-modal-close.vue';
+  import Fade from '../../../../x-components/src/components/animations/fade.vue';
+</script>
+
+<style>
+  .base-id-modal {
+    .content {
+      background: white;
+      margin: auto;
+      width: 50%;
+      border: 3px solid green;
+      padding: 10px;
+    }
+
+    .overlay {
+      background-color: red;
+    }
+  }
+</style>
diff --git a/packages/_vue3-migration-test/src/router.ts b/packages/_vue3-migration-test/src/router.ts
index 409c149dd9..bca8bce3ab 100644
--- a/packages/_vue3-migration-test/src/router.ts
+++ b/packages/_vue3-migration-test/src/router.ts
@@ -26,7 +26,8 @@ import {
   TestHighlight,
   TestBaseResultImages,
   TestBasePanel,
-  TestBaseKeyboardNavigation
+  TestBaseKeyboardNavigation,
+  TestBaseIdModal
 } from './';
 
 const routes = [
@@ -164,6 +165,11 @@ const routes = [
     path: '/base-keyboard-navigation',
     name: 'TestBaseKeyboardNavigation',
     component: TestBaseKeyboardNavigation
+  },
+  {
+    path: '/test-base-id-modal',
+    name: 'TestBaseIdModal',
+    component: TestBaseIdModal
   }
 ];
 
diff --git a/packages/x-components/src/components/layouts/fixed-header-and-asides-layout.vue b/packages/x-components/src/components/layouts/fixed-header-and-asides-layout.vue
index 4aed8568ef..a6c20def62 100644
--- a/packages/x-components/src/components/layouts/fixed-header-and-asides-layout.vue
+++ b/packages/x-components/src/components/layouts/fixed-header-and-asides-layout.vue
@@ -88,8 +88,8 @@
 <script lang="ts">
   import { computed, defineComponent, ref } from 'vue';
   import { animateTranslate } from '../animations/animate-translate/animate-translate.factory';
-  import BaseIdModal from '../modals/base-id-modal.vue';
   import Scroll from '../../x-modules/scroll/components/scroll.vue';
+  import BaseIdModal from '../modals/base-id-modal.vue';
   import MainScroll from '../../x-modules/scroll/components/main-scroll.vue';
   import { useLayouts } from './use-layouts';
 
diff --git a/packages/x-components/src/components/modals/base-id-modal.vue b/packages/x-components/src/components/modals/base-id-modal.vue
index 7224bdb5b6..4525b49d41 100644
--- a/packages/x-components/src/components/modals/base-id-modal.vue
+++ b/packages/x-components/src/components/modals/base-id-modal.vue
@@ -1,21 +1,23 @@
 <template>
   <BaseModal
+    v-bind="$attrs"
+    :ref="el"
     @click:overlay="emitClickOutOfModal"
     @focusin:body="emitClickOutOfModal"
     :animation="animation"
     :open="isOpen"
-    v-bind="$attrs"
   >
     <slot />
   </BaseModal>
 </template>
 
 <script lang="ts">
-  import Vue from 'vue';
-  import { Component, Prop } from 'vue-property-decorator';
-  import { XOn } from '../decorators/bus.decorators';
+  import { defineComponent, ref } from 'vue';
   import { WireMetadata } from '../../wiring/wiring.types';
   import { getTargetElement, isElementEqualOrContained } from '../../utils/html';
+  import { useXBus } from '../../composables';
+  import { AnimationProp } from '../../types/animation-prop';
+  import { XEvent } from '../../wiring/events.types';
   import BaseModal from './base-modal.vue';
 
   /**
@@ -26,71 +28,94 @@
    *
    * @public
    */
-  @Component({
-    components: { BaseModal }
-  })
-  export default class BaseIdModal extends Vue {
-    /** Animation to use for opening/closing the modal. */
-    @Prop()
-    public animation?: Vue | string;
-
-    /** The modalId to use for the open and close event listeners. */
-    @Prop({ required: true })
-    public modalId!: string;
-
-    /** Whether the modal is open or not. */
-    protected isOpen = false;
-
-    /** The element that opened the modal. */
-    protected openerElement?: HTMLElement;
-
-    /**
-     * Opens the modal.
-     *
-     * @param modalId - The payload of the {@link XEventsTypes.UserClickedOpenModal} event.
-     * @param metadata - The metadata of the emitted event.
-     * @public
-     */
-    @XOn('UserClickedOpenModal')
-    openModal(modalId: string, metadata: WireMetadata): void {
-      if (!this.isOpen && this.modalId === modalId) {
-        this.openerElement = metadata.target;
-        this.isOpen = true;
+  export default 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: HTMLElement | undefined;
+
+      /** Whether the modal is open or not. */
+      const isOpen = ref(false);
+
+      const el = ref<HTMLElement>();
+
+      const closeModalEvents: XEvent[] = ['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: string, metadata: WireMetadata): void {
+        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
-     */
-    @XOn(['UserClickedCloseModal', 'UserClickedOutOfModal'])
-    closeModal(payload: string): void {
-      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: string): void {
+        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
-     */
-    protected emitClickOutOfModal(event: MouseEvent | FocusEvent): void {
-      // 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 as HTMLElement });
+      /**
+       * 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: MouseEvent | FocusEvent): void {
+        // 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 as HTMLElement });
+        }
       }
+
+      xBus
+        .on('UserClickedOpenModal', true)
+        .subscribe(({ eventPayload, metadata }) => openModal(eventPayload, metadata));
+
+      closeModalEvents.forEach(event => {
+        xBus.on(event, false).subscribe(eventPayload => closeModal(eventPayload as string));
+      });
+
+      return {
+        el,
+        isOpen,
+        emitClickOutOfModal
+      };
     }
-  }
+  });
 </script>
 
 <docs lang="mdx">

From ddb0175a7f8c005aec047e22efc9e4937e68e1d2 Mon Sep 17 00:00:00 2001
From: Laura Martinez Garcia <lauram@empathy.co>
Date: Tue, 4 Jun 2024 12:13:36 +0200
Subject: [PATCH 5/7] chore: fix pr comments

---
 .../src/components/modals/base-events-modal.vue             | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/x-components/src/components/modals/base-events-modal.vue b/packages/x-components/src/components/modals/base-events-modal.vue
index e71182ab80..9eae82ebc5 100644
--- a/packages/x-components/src/components/modals/base-events-modal.vue
+++ b/packages/x-components/src/components/modals/base-events-modal.vue
@@ -1,11 +1,11 @@
 <template>
   <BaseModal
+    v-bind="$attrs"
     ref="baseModalEl"
     @click:overlay="emitBodyClickEvent"
     @focusin:body="emitBodyClickEvent"
     :animation="animation"
     :open="isOpen"
-    v-bind="$attrs"
   >
     <slot />
   </BaseModal>
@@ -127,9 +127,9 @@
 
       return {
         isOpen,
-        emitBodyClickEvent,
         openerElement,
-        baseModalEl
+        baseModalEl,
+        emitBodyClickEvent
       };
     }
   });

From 89bdd5a7b11743bf2654c8eaf6ce1a62e92fdaab Mon Sep 17 00:00:00 2001
From: empathy/x <x@empathy.co>
Date: Tue, 4 Jun 2024 10:21:40 +0000
Subject: [PATCH 6/7] chore(release): publish

 - vue3-migration-test@1.0.0-alpha.22
 - @empathyco/x-components@5.0.0-alpha.30
---
 packages/_vue3-migration-test/CHANGELOG.md | 9 +++++++++
 packages/_vue3-migration-test/package.json | 2 +-
 packages/x-components/CHANGELOG.md         | 9 +++++++++
 packages/x-components/package.json         | 2 +-
 4 files changed, 20 insertions(+), 2 deletions(-)

diff --git a/packages/_vue3-migration-test/CHANGELOG.md b/packages/_vue3-migration-test/CHANGELOG.md
index 8ed2aadd1a..5a6ac42469 100644
--- a/packages/_vue3-migration-test/CHANGELOG.md
+++ b/packages/_vue3-migration-test/CHANGELOG.md
@@ -3,6 +3,15 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [1.0.0-alpha.22](https://github.com/empathyco/x/compare/vue3-migration-test@1.0.0-alpha.21...vue3-migration-test@1.0.0-alpha.22) (2024-06-04)
+
+
+### Features
+
+* **base-id-modal:** migrate to composition API (#1500) ([6274c67](https://github.com/empathyco/x/commit/6274c676946536c9c1c4e54205ebda18c79b8f55))
+
+
+
 ## [1.0.0-alpha.21](https://github.com/empathyco/x/compare/vue3-migration-test@1.0.0-alpha.20...vue3-migration-test@1.0.0-alpha.21) (2024-05-31)
 
 
diff --git a/packages/_vue3-migration-test/package.json b/packages/_vue3-migration-test/package.json
index 2a272ddf24..f79d2d9f43 100644
--- a/packages/_vue3-migration-test/package.json
+++ b/packages/_vue3-migration-test/package.json
@@ -1,7 +1,7 @@
 {
   "name": "vue3-migration-test",
   "private": "true",
-  "version": "1.0.0-alpha.21",
+  "version": "1.0.0-alpha.22",
   "scripts": {
     "dev": "vite",
     "preview": "vite preview",
diff --git a/packages/x-components/CHANGELOG.md b/packages/x-components/CHANGELOG.md
index c9027b2e2e..9dc9b1c0f6 100644
--- a/packages/x-components/CHANGELOG.md
+++ b/packages/x-components/CHANGELOG.md
@@ -3,6 +3,15 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [5.0.0-alpha.30](https://github.com/empathyco/x/compare/@empathyco/x-components@5.0.0-alpha.29...@empathyco/x-components@5.0.0-alpha.30) (2024-06-04)
+
+
+### Features
+
+* **base-id-modal:** migrate to composition API (#1500) ([6274c67](https://github.com/empathyco/x/commit/6274c676946536c9c1c4e54205ebda18c79b8f55))
+
+
+
 ## [5.0.0-alpha.29](https://github.com/empathyco/x/compare/@empathyco/x-components@5.0.0-alpha.28...@empathyco/x-components@5.0.0-alpha.29) (2024-05-31)
 
 
diff --git a/packages/x-components/package.json b/packages/x-components/package.json
index db9a4826da..958794ebed 100644
--- a/packages/x-components/package.json
+++ b/packages/x-components/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@empathyco/x-components",
-  "version": "5.0.0-alpha.29",
+  "version": "5.0.0-alpha.30",
   "description": "Empathy X Components",
   "author": "Empathy Systems Corporation S.L.",
   "license": "Apache-2.0",

From df925a2078b64d2d638695bae97a4ebad6179d55 Mon Sep 17 00:00:00 2001
From: empathy/x <x@empathy.co>
Date: Tue, 4 Jun 2024 11:08:44 +0000
Subject: [PATCH 7/7] chore(release): publish

 - vue3-migration-test@1.0.0-alpha.23
 - @empathyco/x-components@5.0.0-alpha.31
---
 packages/_vue3-migration-test/CHANGELOG.md | 9 +++++++++
 packages/_vue3-migration-test/package.json | 2 +-
 packages/x-components/CHANGELOG.md         | 9 +++++++++
 packages/x-components/package.json         | 2 +-
 4 files changed, 20 insertions(+), 2 deletions(-)

diff --git a/packages/_vue3-migration-test/CHANGELOG.md b/packages/_vue3-migration-test/CHANGELOG.md
index 5a6ac42469..539c8424c0 100644
--- a/packages/_vue3-migration-test/CHANGELOG.md
+++ b/packages/_vue3-migration-test/CHANGELOG.md
@@ -3,6 +3,15 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [1.0.0-alpha.23](https://github.com/empathyco/x/compare/vue3-migration-test@1.0.0-alpha.22...vue3-migration-test@1.0.0-alpha.23) (2024-06-04)
+
+
+### Features
+
+* add BaseEventsModal to the playground ([3e437c5](https://github.com/empathyco/x/commit/3e437c56d4e3f314b373b486e8926c4f4b028fc6))
+
+
+
 ## [1.0.0-alpha.22](https://github.com/empathyco/x/compare/vue3-migration-test@1.0.0-alpha.21...vue3-migration-test@1.0.0-alpha.22) (2024-06-04)
 
 
diff --git a/packages/_vue3-migration-test/package.json b/packages/_vue3-migration-test/package.json
index f79d2d9f43..93bd22ba7c 100644
--- a/packages/_vue3-migration-test/package.json
+++ b/packages/_vue3-migration-test/package.json
@@ -1,7 +1,7 @@
 {
   "name": "vue3-migration-test",
   "private": "true",
-  "version": "1.0.0-alpha.22",
+  "version": "1.0.0-alpha.23",
   "scripts": {
     "dev": "vite",
     "preview": "vite preview",
diff --git a/packages/x-components/CHANGELOG.md b/packages/x-components/CHANGELOG.md
index 9dc9b1c0f6..c8e419e3e0 100644
--- a/packages/x-components/CHANGELOG.md
+++ b/packages/x-components/CHANGELOG.md
@@ -3,6 +3,15 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [5.0.0-alpha.31](https://github.com/empathyco/x/compare/@empathyco/x-components@5.0.0-alpha.30...@empathyco/x-components@5.0.0-alpha.31) (2024-06-04)
+
+
+### Features
+
+* migrate BaseEventsModal to composition API ([7ef04b6](https://github.com/empathyco/x/commit/7ef04b65bcef2eb9b9dc5bc107bc02823831d444))
+
+
+
 ## [5.0.0-alpha.30](https://github.com/empathyco/x/compare/@empathyco/x-components@5.0.0-alpha.29...@empathyco/x-components@5.0.0-alpha.30) (2024-06-04)
 
 
diff --git a/packages/x-components/package.json b/packages/x-components/package.json
index 958794ebed..7b91ed06bc 100644
--- a/packages/x-components/package.json
+++ b/packages/x-components/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@empathyco/x-components",
-  "version": "5.0.0-alpha.30",
+  "version": "5.0.0-alpha.31",
   "description": "Empathy X Components",
   "author": "Empathy Systems Corporation S.L.",
   "license": "Apache-2.0",