Merge branch 'main' into feat/EMP-4163-migrate-query-suggestions-modu…

…le-to-composition-api

# Conflicts:
#	packages/_vue3-migration-test/src/router.ts

packages/_vue3-migration-test/CHANGELOG.md

@@ -3,6 +3,24 @@
 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/[email protected]@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/[email protected]@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/[email protected]@1.0.0-alpha.21) (2024-05-31)
 
 

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.23",
   "scripts": {
     "dev": "vite",
     "preview": "vite preview",

packages/_vue3-migration-test/src/components/index.ts

@@ -12,3 +12,5 @@ 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';
+export { default as TestBaseIdModal } from './modals/test-base-id-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: #00ff80;
+    }
+  }
+</style>

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>

packages/_vue3-migration-test/src/router.ts

@@ -27,6 +27,8 @@ import {
   TestBaseResultImages,
   TestBasePanel,
   TestBaseKeyboardNavigation,
+  TestBaseEventsModal,
+  TestBaseIdModal,
   TestQuerySuggestions
 } from './';
 
@@ -166,6 +168,16 @@ const routes = [
     name: 'TestBaseKeyboardNavigation',
     component: TestBaseKeyboardNavigation
   },
+  {
+    path: '/base-events-modal',
+    name: 'BaseEventsModal',
+    component: TestBaseEventsModal
+  },
+  {
+    path: '/test-base-id-modal',
+    name: 'TestBaseIdModal',
+    component: TestBaseIdModal
+  },
   {
     path: '/query-suggestions',
     name: 'QuerySuggestions',

packages/x-components/CHANGELOG.md

@@ -3,6 +3,24 @@
 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/[email protected]...@empathyco/[email protected]) (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/[email protected]...@empathyco/[email protected]) (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/[email protected]...@empathyco/[email protected]) (2024-05-31)
 
 

packages/x-components/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@empathyco/x-components",
-  "version": "5.0.0-alpha.29",
+  "version": "5.0.0-alpha.31",
   "description": "Empathy X Components",
   "author": "Empathy Systems Corporation S.L.",
   "license": "Apache-2.0",

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