@mozaic-ds/vue 0.35.0-beta.2 → 0.35.0-beta.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mozaic-ds/vue",
-  "version": "0.35.0-beta.2",
+  "version": "0.35.0-beta.3",
   "description": "Vue.js implementation of Mozaic Design System",
   "author": "Adeo - Mozaic Design System",
   "scripts": {

package/src/components/listbox/MListBoxActions.vue

@@ -1,32 +1,25 @@
 <template>
-  <div
-    v-click-outside="onClickOutside"
-    class="mc-listbox-options"
-    :class="{ 'mc-listbox-options--fixed': hasDataTable }"
-    :style="setStyles"
-  >
+  <div v-click-outside="closeListbox" class="mc-listbox-options">
     <button
       ref="trigger"
       type="button"
       class="mc-listbox-options__trigger"
-      @click="onSwitch($event)"
+      @click="onClickTrigger($event)"
     >
-      <m-icon name="DisplayOptions24" :color="triggerIconColor" />
+      <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="{
-        'is-open': isOpen,
-        'align-right': position == 'right',
-        'align-top': displayTop,
-      }"
+      :class="classObjectListbox"
+      :style="styleObjectListbox"
       role="listbox"
       aria-labelledby="listbox"
     >
       <ul
-        v-for="(list, i) in listItems"
+        v-for="(list, i) in getItems"
         :key="`list${i}`"
         class="mc-listbox-options__list"
       >
@@ -36,7 +29,7 @@
           class="mc-listbox-options__tile"
           :class="{ 'is-disabled': item.disabled }"
         >
-          <m-icon
+          <MIcon
             v-if="item.icon"
             :name="item.icon"
             class="mc-listbox-options__icon"
@@ -64,11 +57,9 @@ import MIcon from '../icon/MIcon.vue';
 
 export default {
   name: 'MListBoxActions',
-
   components: {
     MIcon,
   },
-
   directives: {
     'click-outside': {
       bind(el, binding, vnode) {
@@ -84,7 +75,6 @@ export default {
       },
     },
   },
-
   props: {
     open: {
       type: Boolean,
@@ -106,72 +96,59 @@ export default {
       type: String,
       default: 'currentColor',
     },
+    icon: {
+      type: String,
+      default: 'DisplayOptions24',
+    },
   },
-
   data() {
     return {
       isOpen: this.open,
       displayTop: false,
-      posTop: '0px',
-      hasDataTable: false,
+      listboxTop: '0px',
+      listboxLeft: '0px',
     };
   },
 
   computed: {
-    listItems: function () {
+    classObjectListbox() {
+      return {
+        'is-open': this.isOpen,
+        'align-right': this.position == 'right',
+        'align-top': this.displayTop,
+      };
+    },
+    styleObjectListbox() {
+      return {
+        top: this.listboxTop,
+        left: this.listboxLeft,
+      };
+    },
+    getItems() {
       const hasNestedArray = this.items.filter(Array.isArray).length;
 
       if (hasNestedArray === 0) {
         const listItems = [];
         listItems.push(this.items);
+
         return [this.items];
       }
 
       return this.items;
     },
-    setStyles() {
-      return {
-        '--listbox-top': this.hasDataTable ? this.posTop + 'px' : null,
-      };
-    },
   },
-
   mounted() {
-    this.hasDataTable =
-      this.$parent.$options._componentTag === 'm-data-table' ? true : false;
-
-    if (this.hasDataTable) {
-      this.$parent.$el
-        .querySelector('.mc-data-table__body')
-        .addEventListener('scroll', this.handleScroll);
-    }
+    this.teleport(this.$refs.listbox);
+  },
+  created() {
+    window.addEventListener('scroll', this.closeListbox, {
+      capture: true,
+    });
   },
-
   destroyed() {
-    if (this.hasDataTable) {
-      this.$parent.$el
-        .querySelector('.mc-data-table__body')
-        .removeEventListener('scroll', this.handleScroll);
-    }
+    window.removeEventListener('scroll', this.closeListbox);
   },
-
   methods: {
-    onClickOutside() {
-      this.isOpen = false;
-    },
-    onSwitch(e) {
-      if (!this.isOpen) {
-        if (this.$refs.listbox.clientHeight + e.clientY >= window.innerHeight) {
-          this.displayTop = true;
-        }
-
-        if (this.hasDataTable) {
-          const buttonSizes = this.$refs.trigger.getBoundingClientRect();
-          this.posTop = buttonSizes.top + buttonSizes.height;
-        }
-      }
-      this.isOpen = !this.isOpen;
-    },
     onClickItem(item, listIndex, itemIndex) {
       const valToEmit = Object.assign(
         { listIndex: listIndex, itemIndex: itemIndex },
@@ -180,7 +157,35 @@ export default {
       this.$emit('update:itemSelected', valToEmit); // TODO: deprecated
       this.$emit('item-clicked', valToEmit);
     },
-    handleScroll() {
+    onClickTrigger(e) {
+      this.$nextTick(() => {
+        if (this.$refs.listbox.clientHeight + e.clientY >= window.innerHeight) {
+          this.displayTop = true;
+        }
+      });
+
+      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 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);
+      }
+    },
+    closeListbox() {
+      if (!this.isOpen) {
+        return;
+      }
       this.isOpen = false;
     },
   },
@@ -191,8 +196,6 @@ export default {
 @import 'settings-tools/all-settings';
 
 .mc-listbox-options {
-  $parent: &;
-
   display: inline-block;
   position: relative;
 
@@ -213,14 +216,16 @@ export default {
   }
 
   &__container {
-    position: absolute;
-    overflow-y: auto;
-    opacity: 0;
-    visibility: hidden;
-    min-width: $mu800;
     background-color: $color-grey-000;
     border: 1px solid $color-grey-600;
     border-radius: 3px;
+    left: 0;
+    min-width: $mu800;
+    overflow-y: auto;
+    opacity: 0;
+    position: absolute;
+    visibility: hidden;
+    top: 100%;
 
     &.is-open {
       opacity: 1;
@@ -242,7 +247,6 @@ export default {
   }
 
   &__list {
-    $parent: get-parent-selector(&);
     @include unstyle-list();
     margin: 0 auto;
     padding: 8px 0;
@@ -315,14 +319,5 @@ export default {
       color: #c61112;
     }
   }
-
-  &--fixed {
-    position: static;
-
-    .mc-listbox-options__container {
-      position: fixed;
-      top: var(--listbox-top);
-    }
-  }
 }
 </style>