@mozaic-ds/vue 0.35.0-beta.4 → 0.35.0-beta.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mozaic-ds/vue",
-  "version": "0.35.0-beta.4",
+  "version": "0.35.0-beta.5",
   "description": "Vue.js implementation of Mozaic Design System",
   "author": "Adeo - Mozaic Design System",
   "scripts": {
@@ -23,6 +23,7 @@
     "postinstall.js"
   ],
   "dependencies": {
+    "@linusborg/vue-simple-portal": "^0.1.5",
     "@mozaic-ds/css-dev-tools": "1.50.0",
     "@mozaic-ds/icons": "1.49.0",
     "@mozaic-ds/styles": "1.51.0",

package/src/components/listbox/MListBoxActions.vue

@@ -4,61 +4,70 @@
       ref="trigger"
       type="button"
       class="mc-listbox-options__trigger"
-      @click="onClickTrigger($event)"
+      @click="onClickTrigger"
     >
       <MIcon :name="icon" :color="triggerIconColor" />
       <span class="mc-listbox-options__trigger-label">{{ triggerLabel }}</span>
     </button>
-    <div
-      v-show="isOpen"
-      ref="listbox"
-      class="mc-listbox-options__container"
-      :class="classObjectListbox"
-      :style="styleObjectListbox"
-      role="listbox"
-      aria-labelledby="listbox"
-    >
-      <ul
-        v-for="(list, i) in getItems"
-        :key="`list${i}`"
-        class="mc-listbox-options__list"
-      >
-        <li
-          v-for="(item, j) in list"
-          :key="`item${j}`"
-          class="mc-listbox-options__tile"
-          :class="{ 'is-disabled': item.disabled }"
+    <Portal>
+      <transition @after-enter="onAfterEnter">
+        <div
+          v-if="isOpen"
+          ref="listbox"
+          class="mc-listbox-options__container"
+          :class="classObjectListbox"
+          :style="styleObjectListbox"
+          role="listbox"
+          aria-labelledby="listbox"
         >
-          <MIcon
-            v-if="item.icon"
-            :name="item.icon"
-            class="mc-listbox-options__icon"
-            :color="item.danger ? '#C61112' : '#71706B'"
-          />
-          <component
-            :is="item.href ? 'a' : 'button'"
-            :href="item.href ? item.href : null"
-            :type="item.href ? null : 'button'"
-            :disabled="item.disabled ? true : null"
-            class="mc-listbox-options__item"
-            :class="{ 'is-danger': item.danger, 'is-disabled': item.disabled }"
-            @click.self="onClickItem(item, i, j)"
+          <ul
+            v-for="(list, i) in getItems"
+            :key="`list${i}`"
+            class="mc-listbox-options__list"
           >
-            {{ item.text }}
-          </component>
-        </li>
-      </ul>
-    </div>
+            <li
+              v-for="(item, j) in list"
+              :key="`item${j}`"
+              class="mc-listbox-options__tile"
+              :class="{ 'is-disabled': item.disabled }"
+            >
+              <MIcon
+                v-if="item.icon"
+                :name="item.icon"
+                class="mc-listbox-options__icon"
+                :color="item.danger ? '#C61112' : '#71706B'"
+              />
+              <component
+                :is="item.href ? 'a' : 'button'"
+                :href="item.href ? item.href : null"
+                :type="item.href ? null : 'button'"
+                :disabled="item.disabled ? true : null"
+                class="mc-listbox-options__item"
+                :class="{
+                  'is-danger': item.danger,
+                  'is-disabled': item.disabled,
+                }"
+                @click.self="onClickItem(item, i, j)"
+              >
+                {{ item.text }}
+              </component>
+            </li>
+          </ul>
+        </div>
+      </transition>
+    </Portal>
   </div>
 </template>
 
 <script>
+import { Portal } from '@linusborg/vue-simple-portal';
 import MIcon from '../icon/MIcon.vue';
 
 export default {
   name: 'MListBoxActions',
   components: {
     MIcon,
+    Portal,
   },
   directives: {
     'click-outside': {
@@ -104,16 +113,16 @@ export default {
   data() {
     return {
       isOpen: this.open,
+      isVisible: false,
       displayTop: false,
       listboxTop: '0px',
       listboxLeft: '0px',
     };
   },
-
   computed: {
     classObjectListbox() {
       return {
-        'is-open': this.isOpen,
+        'is-open': this.isVisible,
         'align-right': this.position == 'right',
         'align-top': this.displayTop,
       };
@@ -137,9 +146,6 @@ export default {
       return this.items;
     },
   },
-  mounted() {
-    this.teleport(this.$refs.listbox);
-  },
   created() {
     window.addEventListener('scroll', this.closeListbox, {
       capture: true,
@@ -157,29 +163,21 @@ export default {
       this.$emit('update:itemSelected', valToEmit); // TODO: deprecated
       this.$emit('item-clicked', valToEmit);
     },
-    onClickTrigger(e) {
-      this.$nextTick(() => {
-        if (this.$refs.listbox.clientHeight + e.clientY >= window.innerHeight) {
-          this.displayTop = true;
-        }
-      });
-
+    onClickTrigger() {
       this.isOpen = !this.isOpen;
-
-      this.setListBoxPosition();
     },
     setListBoxPosition() {
-      const { top, left, height } = this.$refs.trigger.getBoundingClientRect();
-      const topValue = Math.floor(top) + Math.floor(height) + window.scrollY;
+      const trigger = this.$refs.trigger;
+      const listboxHeight = this.$refs.listbox.clientHeight;
+
+      const { top, left, bottom } = trigger.getBoundingClientRect();
+      const topValue = Math.floor(bottom) + window.scrollY;
       const leftValue = Math.floor(left);
       this.listboxTop = `${topValue}px`;
       this.listboxLeft = `${leftValue}px`;
-    },
-    teleport(elToMove, elTarget) {
-      const target = elTarget ?? document.body;
 
-      if (target && elToMove) {
-        target.append(elToMove);
+      if (top > listboxHeight && listboxHeight + bottom >= window.innerHeight) {
+        this.displayTop = true;
       }
     },
     closeListbox() {
@@ -187,6 +185,11 @@ export default {
         return;
       }
       this.isOpen = false;
+      this.isVisible = false;
+    },
+    onAfterEnter() {
+      this.setListBoxPosition();
+      this.isVisible = true;
     },
   },
 };