Merge branch 'main' into feat/EMP-4154-migrate-panels-components-to-c…

…omposition-api # Conflicts: # packages/_vue3-migration-test/src/router.ts
empathyco · May 29, 2024 · 00b75e6 · 00b75e6
2 parents 6104346 + 1bffd7c
commit 00b75e6
Show file tree

Hide file tree

Showing 25 changed files with 651 additions and 567 deletions.
diff --git a/packages/_vue3-migration-test/CHANGELOG.md b/packages/_vue3-migration-test/CHANGELOG.md
@@ -3,6 +3,25 @@
 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.16](https://github.com/empathyco/x/compare/[email protected]@1.0.0-alpha.16) (2024-05-28)
+
+
+### Features
+
+* **base-modal:** migrate base-modal component and side effects (#1479) ([610ec16](https://github.com/empathyco/x/commit/610ec16e20b10a344936b2914c61085e22a09dfd))
+* **sliding-panel:** migrate sliding-panel component to composition API (#1485) ([bf9e1a3](https://github.com/empathyco/x/commit/bf9e1a38364a23402562a19ce8095452da5f02d7))
+
+
+
+## [1.0.0-alpha.15](https://github.com/empathyco/x/compare/[email protected]@1.0.0-alpha.15) (2024-05-28)
+
+
+### Code Refactoring
+
+* migrate `BaseVariableColumnGrid` to Composition API (#1482) ([b7e292a](https://github.com/empathyco/x/commit/b7e292ae55560f557dd7db3cfbceed993c7b318e))
+
+
+
 ## [1.0.0-alpha.14](https://github.com/empathyco/x/compare/[email protected]@1.0.0-alpha.14) (2024-05-28)
 
 

diff --git a/packages/_vue3-migration-test/index.html b/packages/_vue3-migration-test/index.html
@@ -6,7 +6,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>vue3-migration-test</title>
   </head>
-  <body>
+  <body style="margin: 0;padding: 10px;">
     <div id="app"></div>
     <script type="module" src="/src/main.ts"></script>
   </body>

diff --git 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.14",
+  "version": "1.0.0-alpha.16",
   "scripts": {
     "dev": "vite",
     "preview": "vite preview",

diff --git a/packages/_vue3-migration-test/src/App.vue b/packages/_vue3-migration-test/src/App.vue
@@ -1,6 +1,6 @@
 <template>
   <div id="app">
-    <h1>vue3-migration-test</h1>
+    <h1 class="header">vue3-migration-test</h1>
     <nav>
       <RouterLink v-for="route in $router.options.routes" :key="route.path" :to="route.path">
         {{ route.name }}

diff --git a/packages/_vue3-migration-test/src/components/index.ts b/packages/_vue3-migration-test/src/components/index.ts
@@ -1,7 +1,10 @@
 export * from './animations';
 export { default as TestBaseColumnPickerDropdown } from './column-picker/test-base-column-picker-dropdown.vue';
 export { default as TestBaseColumnPickerList } from './column-picker/test-base-column-picker-list.vue';
+export { default as TestBaseModal } from './modals/test-base-modal.vue';
 export { default as TestBaseDropdown } from './test-base-dropdown.vue';
 export { default as TestBaseEventButton } from './test-base-event-button.vue';
+export { default as TestBaseVariableColumnGrid } from './test-base-variable-column-grid.vue';
+export { default as TestSlidingPanel } from './test-sliding-panel.vue';
 export { default as TestUseLayouts } from './test-use-layouts.vue';
 export { default as TestBasePanel } from './panels/test-base-panel.vue';
diff --git a/packages/_vue3-migration-test/src/components/modals/test-base-modal.vue b/packages/_vue3-migration-test/src/components/modals/test-base-modal.vue
@@ -0,0 +1,44 @@
+<template>
+  <div class="base-modal">
+    <button @click="open = true">Open modal</button>
+    <BaseModal
+      @click:overlay="open = false"
+      @focusin:body="open = false"
+      :open="open"
+      :focusOnOpen="true"
+      referenceSelector=".header"
+      :animation="Fade"
+      :overlayAnimation="Fade"
+      contentClass="content"
+      overlayClass="overlay"
+    >
+      <h1>Hello</h1>
+      <p>The modal is working</p>
+      <button @click="open = false">Close modal</button>
+    </BaseModal>
+  </div>
+</template>
+
+<script setup lang="ts">
+  import { ref } from 'vue';
+  import BaseModal from '../../../../x-components/src/components/modals/base-modal.vue';
+  import Fade from '../../../../x-components/src/components/animations/fade.vue';
+
+  const open = ref(false);
+</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/components/test-base-variable-column-grid.vue b/packages/_vue3-migration-test/src/components/test-base-variable-column-grid.vue
@@ -0,0 +1,30 @@
+<template>
+  <button @click="setColumns" class="column-picker-selector">
+    <span class="column-picker-selector__text">{{ columnsToRender }} columns</span>
+  </button>
+  <button @click="resetColumns" class="column-picker-reset">
+    <span>reset columns</span>
+  </button>
+  <ResultsList>
+    <BaseVariableColumnGrid :columns="columnsToRender">
+      <template #result="{ item: result }">
+        {{ result.id }}
+      </template>
+    </BaseVariableColumnGrid>
+  </ResultsList>
+</template>
+
+<script setup lang="ts">
+  import { ref } from 'vue';
+  import ResultsList from '../../../x-components/src/x-modules/search/components/results-list.vue';
+  import BaseVariableColumnGrid from '../../../x-components/src/components/base-variable-column-grid.vue';
+  const columnsToRender = ref(2);
+  const setColumns = () => (columnsToRender.value = columnsToRender.value + 1);
+  const resetColumns = () => (columnsToRender.value = 2);
+</script>
+
+<style>
+  .column-picker-reset {
+    margin-left: 4px;
+  }
+</style>
diff --git a/packages/_vue3-migration-test/src/components/test-sliding-panel.vue b/packages/_vue3-migration-test/src/components/test-sliding-panel.vue
@@ -0,0 +1,16 @@
+<template>
+  <SlidingPanel style="width: 300px">
+    <span v-for="item in items" :key="item">Item {{ item }}</span>
+  </SlidingPanel>
+  <button @click="updateItems">Update items</button>
+</template>
+
+<script setup lang="ts">
+  import { ref } from 'vue';
+  import SlidingPanel from '../../../x-components/src/components/sliding-panel.vue';
+
+  const items = ref<number[]>([]);
+
+  const updateItems = () => (items.value = [...Array(Math.floor(Math.random() * 100)).keys()]);
+  updateItems();
+</script>
diff --git a/packages/_vue3-migration-test/src/router.ts b/packages/_vue3-migration-test/src/router.ts
@@ -16,9 +16,12 @@ import {
   TestSortList,
   TestSortPickerList,
   TestBaseScroll,
+  TestBaseModal,
   TestSearchBox,
+  TestBaseVariableColumnGrid,
   TestEmpathize,
   TestUseLayouts,
+  TestSlidingPanel,
   TestBasePanel
 } from './';
 
@@ -48,6 +51,11 @@ const routes = [
     name: 'Fade',
     component: TestFade
   },
+  {
+    path: '/base-modal',
+    name: 'BaseModal',
+    component: TestBaseModal
+  },
   {
     path: '/base-dropdown',
     name: 'BaseDropdown',
@@ -68,6 +76,11 @@ const routes = [
     name: 'BaseColumnPickerList',
     component: TestBaseColumnPickerList
   },
+  {
+    path: '/sliding-panel',
+    name: 'SlidingPanel',
+    component: TestSlidingPanel
+  },
   {
     path: '/facets',
     name: 'Facets',
@@ -113,6 +126,11 @@ const routes = [
     name: 'ElementsList',
     component: TestElementsList
   },
+  {
+    path: '/base-variable-column-grid',
+    name: 'BaseVariableColumnGrid',
+    component: TestBaseVariableColumnGrid
+  },
   {
     path: '/test-use-layouts',
     name: 'TestUseLayouts',

diff --git a/packages/x-components/CHANGELOG.md b/packages/x-components/CHANGELOG.md
@@ -3,6 +3,34 @@
 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.23](https://github.com/empathyco/x/compare/@empathyco/[email protected]...@empathyco/[email protected]) (2024-05-28)
+
+
+### Features
+
+* **base-modal:** migrate base-modal component and side effects (#1479) ([610ec16](https://github.com/empathyco/x/commit/610ec16e20b10a344936b2914c61085e22a09dfd))
+* **sliding-panel:** migrate sliding-panel component to composition API (#1485) ([bf9e1a3](https://github.com/empathyco/x/commit/bf9e1a38364a23402562a19ce8095452da5f02d7))
+
+
+
+## [5.0.0-alpha.22](https://github.com/empathyco/x/compare/@empathyco/[email protected]...@empathyco/[email protected]) (2024-05-28)
+
+
+### Code Refactoring
+
+* migrate `BaseVariableColumnGrid` to Composition API (#1482) ([b7e292a](https://github.com/empathyco/x/commit/b7e292ae55560f557dd7db3cfbceed993c7b318e))
+
+
+
+## [5.0.0-alpha.21](https://github.com/empathyco/x/compare/@empathyco/[email protected]...@empathyco/[email protected]) (2024-05-28)
+
+
+### Features
+
+* replace extra divs with `NoElement` (#1484) ([cc7042e](https://github.com/empathyco/x/commit/cc7042e5f144f2abc9eb39e3834c8a153795f558))
+
+
+
 ## [5.0.0-alpha.20](https://github.com/empathyco/x/compare/@empathyco/[email protected]...@empathyco/[email protected]) (2024-05-28)
 
 

diff --git 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.20",
+  "version": "5.0.0-alpha.23",
   "description": "Empathy X Components",
   "author": "Empathy Systems Corporation S.L.",
   "license": "Apache-2.0",

diff --git a/packages/x-components/src/components/__tests__/base-variable-column-grid.spec.ts b/packages/x-components/src/components/__tests__/base-variable-column-grid.spec.ts
@@ -1,9 +1,10 @@
 import { mount, Wrapper } from '@vue/test-utils';
-import Vue from 'vue';
+import Vue, { nextTick } from 'vue';
 import { getSearchResponseStub } from '../../__stubs__/search-response-stubs.factory';
 import { getDataTestSelector, installNewXPlugin } from '../../__tests__/utils';
 import { ListItem } from '../../utils/types';
 import BaseVariableColumnGrid from '../base-variable-column-grid.vue';
+import { XPlugin } from '../../plugins/x-plugin';
 
 const searchResponse = getSearchResponseStub();
 const itemsStub = [
@@ -45,12 +46,12 @@ function renderComponent({ items = itemsStub }: RenderOptions = {}): RenderAPI {
 describe('testing BaseVariableColumnGrid component', () => {
   it('renders the columns number emitted by the ColumnsNumberProvided event', async () => {
     const newColumns = 4;
-    const { wrapper, hasColumns } = renderComponent();
+    const { hasColumns } = renderComponent();
 
     expect(hasColumns(newColumns)).toBe(false);
 
-    wrapper.vm.$x.emit('ColumnsNumberProvided', newColumns);
-    await wrapper.vm.$nextTick();
+    XPlugin.bus.emit('ColumnsNumberProvided', newColumns);
+    await nextTick();
     expect(hasColumns(newColumns)).toBe(true);
   });
 
@@ -62,10 +63,10 @@ describe('testing BaseVariableColumnGrid component', () => {
   });
 
   it('re-renders custom content for the available scoped slots', async () => {
-    const { wrapper, hasColumns, mountComponent } = renderComponent();
-    wrapper.vm.$x.emit('ColumnsNumberProvided', 6);
+    const { hasColumns, mountComponent } = renderComponent();
+    XPlugin.bus.emit('ColumnsNumberProvided', 6);
 
-    await wrapper.vm.$nextTick();
+    await nextTick();
     expect(hasColumns(6)).toBe(true);
 
     const wrapper2 = mountComponent();

diff --git a/packages/x-components/src/components/animations/fade.vue b/packages/x-components/src/components/animations/fade.vue
@@ -37,7 +37,7 @@
 
     &--leave-to,
     &--enter {
-      opacity: 0;
+      opacity: 0 !important;
     }
   }
 </style>