feat: add x-components XModal

package.json

@@ -19,13 +19,13 @@
     "test:unit": "vue-cli-service test:unit",
     "lint": "eslint src tests build --ext .ts,.tsx,.vue,.js,.jsx",
     "lint:fix": "npm run lint -- --fix",
-    "install:local": "npm install file:../x/packages/x-components/empathyco-x-components-3.0.0-alpha.124.tgz --no-save",
+    "install:local": "npm install file:../x/packages/x-components/empathyco-x-components-3.0.0-alpha.137.tgz --no-save",
     "json:csv": "json-csv ./src/i18n/messages",
     "csv:json": "csv-json ./output ./src/i18n/messages"
   },
   "dependencies": {
     "@empathyco/x-adapter": "^8.0.0-alpha.3",
-    "@empathyco/x-components": "^3.0.0-alpha.132",
+    "@empathyco/x-components": "^3.0.0-alpha.137",
     "@empathyco/x-adapter-platform": "^1.0.0-alpha.25",
     "@empathyco/x-deep-merge": "^1.3.0-alpha.19",
     "@empathyco/x-types": "^10.0.0-alpha.27",

rollup.config.js

@@ -8,7 +8,7 @@ export default createConfig({
   output: {
     chunkFileNames: chunkInfo => {
       switch (chunkInfo.name) {
-        case 'x-modal':
+        case 'custom-main-modal':
           return 'x-empty-search-[hash].js';
         case 'index':
           return 'x-search-[hash].js';

src/App.vue

@@ -5,12 +5,12 @@
     <DeviceDetector @DeviceProvided="$setLocaleDevice" :breakpoints="breakpoints" />
     <Tagging />
     <UrlHandler env="env" />
-    <XModal v-if="isOpen" :openEvents="openEvents" :closeEvents="closeEvents" />
+    <MainModal v-if="isOpen" />
   </div>
 </template>
 
 <script lang="ts">
-  import { SnippetCallbacks, SnippetConfig, XEvent, XOn, XProvide } from '@empathyco/x-components';
+  import { SnippetCallbacks, SnippetConfig, XOn, XProvide } from '@empathyco/x-components';
   import { DeviceDetector } from '@empathyco/x-components/device';
   import { Tagging } from '@empathyco/x-components/tagging';
   import { UrlHandler } from '@empathyco/x-components/url';
@@ -28,7 +28,7 @@
       SnippetConfigExtraParams,
       Tagging,
       UrlHandler,
-      XModal: () => import('./components/x-modal.vue').then(m => m.default)
+      MainModal: () => import('./components/custom-main-modal.vue').then(m => m.default)
     }
   })
   export default class Layer extends Vue {
@@ -37,10 +37,8 @@
       desktop: Number.POSITIVE_INFINITY
     };
     protected isOpen = false;
-    protected openEvents: XEvent[] = ['UserOpenXProgrammatically', 'UserClickedOpenX'];
-    protected closeEvents: XEvent[] = ['UserClickedCloseX'];
 
-    @XOn((component: Vue) => (component as Layer).openEvents)
+    @XOn(['UserOpenXProgrammatically', 'UserClickedOpenX'])
     open(): void {
       this.isOpen = true;
     }
@@ -100,6 +98,7 @@
       width: 100%;
     }
   }
+
   .x-modal__overlay {
     background: var(--x-color-background-modal-overlay-default) !important;
     opacity: 0.3 !important;

src/components/custom-main-modal.vue

@@ -0,0 +1,30 @@
+<template>
+  <MainModal :animation="animation" :class="$x.device === 'mobile' ? 'x-mobile' : 'x-desktop'">
+    <Mobile v-if="$x.device === 'mobile'" />
+    <Desktop v-else />
+  </MainModal>
+</template>
+
+<script lang="ts">
+  import Component from 'vue-class-component';
+  import Vue from 'vue';
+  import { animateClipPath, MainModal } from '@empathyco/x-components';
+  import Mobile from './mobile/mobile.vue';
+  import Desktop from './desktop/desktop.vue';
+
+  @Component({
+    components: {
+      MainModal,
+      Mobile,
+      Desktop
+    }
+  })
+  export default class CustomMainModal extends Vue {
+    /**
+     * Animation to use for opening/closing the modal.
+     *
+     * @internal
+     */
+    protected animation = animateClipPath();
+  }
+</script>

src/components/desktop/desktop.vue

@@ -32,9 +32,9 @@
         >
           <EnvSelector />
 
-          <Close closingEvent="UserClickedCloseX" class="x-button--ghost x-padding--right-00">
+          <CloseMainModal class="x-button--ghost x-padding--right-00">
             <CrossIcon class="x-icon--l" />
-          </Close>
+          </CloseMainModal>
         </div>
       </div>
     </template>
@@ -81,7 +81,7 @@
 <script lang="ts">
   import {
     animateTranslate,
-    BaseEventsModalClose,
+    CloseMainModal,
     BaseIdModal,
     BaseVariableColumnGrid,
     CartIcon,
@@ -111,7 +111,7 @@
       BaseVariableColumnGrid,
       BaseIdModal,
       CartIcon,
-      Close: BaseEventsModalClose,
+      CloseMainModal,
       CrossIcon,
       CrossTinyIcon,
       DesktopToolbar,

src/components/mobile/mobile.vue

@@ -12,13 +12,12 @@
           x-background--neutral-100
         "
       >
-        <Close
-          closingEvent="UserClickedCloseX"
+        <CloseMainModal
           class="x-button--ghost x-padding--left-00"
           :class="{ 'x-padding--right-03': $x.device === 'mobile' }"
         >
           <ArrowLeftIcon class="x-icon--l" />
-        </Close>
+        </CloseMainModal>
         <SearchBox class="x-list__item--expand" />
       </div>
     </template>
@@ -84,7 +83,7 @@
   import {
     ArrowLeftIcon,
     BaseColumnPickerList,
-    BaseEventsModalClose,
+    CloseMainModal,
     BaseIdModalOpen,
     BaseScroll,
     FiltersIcon,
@@ -112,7 +111,7 @@
       BaseIdModal,
       BaseIdModalOpen,
       BaseScroll,
-      Close: BaseEventsModalClose,
+      CloseMainModal,
       ColumnPicker: BaseColumnPickerList,
       FiltersIcon,
       LocationProvider,