feat: add BaseEventsModal to the playground

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';

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>

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
   }
 ];