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

package/dist/mozaic-vue.umd.js

@@ -22391,22 +22391,18 @@ MLink.install = function (Vue) {
   Vue.component(MLink.name, MLink);
 };
 
-;// CONCATENATED MODULE: ./node_modules/babel-loader/lib/index.js??clonedRuleSet-83.use[1]!./node_modules/@vue/vue-loader-v15/lib/loaders/templateLoader.js??ruleSet[1].rules[3]!./node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./src/components/listbox/MListBoxActions.vue?vue&type=template&id=dc7f0b5a&
-var MListBoxActionsvue_type_template_id_dc7f0b5a_render = function render() {
+;// CONCATENATED MODULE: ./node_modules/babel-loader/lib/index.js??clonedRuleSet-83.use[1]!./node_modules/@vue/vue-loader-v15/lib/loaders/templateLoader.js??ruleSet[1].rules[3]!./node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./src/components/listbox/MListBoxActions.vue?vue&type=template&id=6fe6b471&
+var MListBoxActionsvue_type_template_id_6fe6b471_render = function render() {
   var _vm = this,
     _c = _vm._self._c;
   return _c('div', {
     directives: [{
       name: "click-outside",
       rawName: "v-click-outside",
-      value: _vm.onClickOutside,
-      expression: "onClickOutside"
+      value: _vm.closeListbox,
+      expression: "closeListbox"
     }],
-    staticClass: "mc-listbox-options",
-    class: {
-      'mc-listbox-options--fixed': _vm.hasDataTable
-    },
-    style: _vm.setStyles
+    staticClass: "mc-listbox-options"
   }, [_c('button', {
     ref: "trigger",
     staticClass: "mc-listbox-options__trigger",
@@ -22415,29 +22411,32 @@ var MListBoxActionsvue_type_template_id_dc7f0b5a_render = function render() {
     },
     on: {
       "click": function click($event) {
-        return _vm.onSwitch($event);
+        return _vm.onClickTrigger($event);
       }
     }
-  }, [_c('m-icon', {
+  }, [_c('MIcon', {
     attrs: {
-      "name": "DisplayOptions24",
+      "name": _vm.icon,
       "color": _vm.triggerIconColor
     }
   }), _c('span', {
     staticClass: "mc-listbox-options__trigger-label"
   }, [_vm._v(_vm._s(_vm.triggerLabel))])], 1), _c('div', {
+    directives: [{
+      name: "show",
+      rawName: "v-show",
+      value: _vm.isOpen,
+      expression: "isOpen"
+    }],
     ref: "listbox",
     staticClass: "mc-listbox-options__container",
-    class: {
-      'is-open': _vm.isOpen,
-      'align-right': _vm.position == 'right',
-      'align-top': _vm.displayTop
-    },
+    class: _vm.classObjectListbox,
+    style: _vm.styleObjectListbox,
     attrs: {
       "role": "listbox",
       "aria-labelledby": "listbox"
     }
-  }, _vm._l(_vm.listItems, function (list, i) {
+  }, _vm._l(_vm.getItems, function (list, i) {
     return _c('ul', {
       key: "list".concat(i),
       staticClass: "mc-listbox-options__list"
@@ -22448,7 +22447,7 @@ var MListBoxActionsvue_type_template_id_dc7f0b5a_render = function render() {
         class: {
           'is-disabled': item.disabled
         }
-      }, [item.icon ? _c('m-icon', {
+      }, [item.icon ? _c('MIcon', {
         staticClass: "mc-listbox-options__icon",
         attrs: {
           "name": item.icon,
@@ -22476,7 +22475,7 @@ var MListBoxActionsvue_type_template_id_dc7f0b5a_render = function render() {
     }), 0);
   }), 0)]);
 };
-var MListBoxActionsvue_type_template_id_dc7f0b5a_staticRenderFns = [];
+var MListBoxActionsvue_type_template_id_6fe6b471_staticRenderFns = [];
 
 ;// CONCATENATED MODULE: ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-83.use[1]!./node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./src/components/listbox/MListBoxActions.vue?vue&type=script&lang=js&
 
@@ -22526,18 +22525,35 @@ var MListBoxActionsvue_type_template_id_dc7f0b5a_staticRenderFns = [];
     triggerIconColor: {
       type: String,
       default: 'currentColor'
+    },
+    icon: {
+      type: String,
+      default: 'DisplayOptions24'
     }
   },
   data: function data() {
     return {
       isOpen: this.open,
       displayTop: false,
-      posTop: '0px',
-      hasDataTable: false
+      listboxTop: '0px',
+      listboxLeft: '0px'
     };
   },
   computed: {
-    listItems: function listItems() {
+    classObjectListbox: function classObjectListbox() {
+      return {
+        'is-open': this.isOpen,
+        'align-right': this.position == 'right',
+        'align-top': this.displayTop
+      };
+    },
+    styleObjectListbox: function styleObjectListbox() {
+      return {
+        top: this.listboxTop,
+        left: this.listboxLeft
+      };
+    },
+    getItems: function getItems() {
       var hasNestedArray = this.items.filter(Array.isArray).length;
       if (hasNestedArray === 0) {
         var listItems = [];
@@ -22545,40 +22561,20 @@ var MListBoxActionsvue_type_template_id_dc7f0b5a_staticRenderFns = [];
         return [this.items];
       }
       return this.items;
-    },
-    setStyles: function setStyles() {
-      return {
-        '--listbox-top': this.hasDataTable ? this.posTop + 'px' : null
-      };
     }
   },
   mounted: function 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: function created() {
+    window.addEventListener('scroll', this.closeListbox, {
+      capture: true
+    });
   },
   destroyed: function destroyed() {
-    if (this.hasDataTable) {
-      this.$parent.$el.querySelector('.mc-data-table__body').removeEventListener('scroll', this.handleScroll);
-    }
+    window.removeEventListener('scroll', this.closeListbox);
   },
   methods: {
-    onClickOutside: function onClickOutside() {
-      this.isOpen = false;
-    },
-    onSwitch: function onSwitch(e) {
-      if (!this.isOpen) {
-        if (this.$refs.listbox.clientHeight + e.clientY >= window.innerHeight) {
-          this.displayTop = true;
-        }
-        if (this.hasDataTable) {
-          var buttonSizes = this.$refs.trigger.getBoundingClientRect();
-          this.posTop = buttonSizes.top + buttonSizes.height;
-        }
-      }
-      this.isOpen = !this.isOpen;
-    },
     onClickItem: function onClickItem(item, listIndex, itemIndex) {
       var valToEmit = Object.assign({
         listIndex: listIndex,
@@ -22587,17 +22583,46 @@ var MListBoxActionsvue_type_template_id_dc7f0b5a_staticRenderFns = [];
       this.$emit('update:itemSelected', valToEmit); // TODO: deprecated
       this.$emit('item-clicked', valToEmit);
     },
-    handleScroll: function handleScroll() {
+    onClickTrigger: function onClickTrigger(e) {
+      var _this = this;
+      this.$nextTick(function () {
+        if (_this.$refs.listbox.clientHeight + e.clientY >= window.innerHeight) {
+          _this.displayTop = true;
+        }
+      });
+      this.isOpen = !this.isOpen;
+      this.setListBoxPosition();
+    },
+    setListBoxPosition: function setListBoxPosition() {
+      var _this$$refs$trigger$g = this.$refs.trigger.getBoundingClientRect(),
+        top = _this$$refs$trigger$g.top,
+        left = _this$$refs$trigger$g.left,
+        height = _this$$refs$trigger$g.height;
+      var topValue = Math.floor(top) + Math.floor(height) + window.scrollY;
+      var leftValue = Math.floor(left);
+      this.listboxTop = "".concat(topValue, "px");
+      this.listboxLeft = "".concat(leftValue, "px");
+    },
+    teleport: function teleport(elToMove, elTarget) {
+      var target = elTarget !== null && elTarget !== void 0 ? elTarget : document.body;
+      if (target && elToMove) {
+        target.append(elToMove);
+      }
+    },
+    closeListbox: function closeListbox() {
+      if (!this.isOpen) {
+        return;
+      }
       this.isOpen = false;
     }
   }
 });
 ;// CONCATENATED MODULE: ./src/components/listbox/MListBoxActions.vue?vue&type=script&lang=js&
  /* harmony default export */ var listbox_MListBoxActionsvue_type_script_lang_js_ = (MListBoxActionsvue_type_script_lang_js_); 
-;// CONCATENATED MODULE: ./node_modules/mini-css-extract-plugin/dist/loader.js??clonedRuleSet-65.use[0]!./node_modules/css-loader/dist/cjs.js??clonedRuleSet-65.use[1]!./node_modules/@vue/vue-loader-v15/lib/loaders/stylePostLoader.js!./node_modules/@vue/cli-service/node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-65.use[2]!./node_modules/sass-loader/dist/cjs.js??clonedRuleSet-65.use[3]!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-84.use[0]!./node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./src/components/listbox/MListBoxActions.vue?vue&type=style&index=0&id=dc7f0b5a&prod&lang=scss&
+;// CONCATENATED MODULE: ./node_modules/mini-css-extract-plugin/dist/loader.js??clonedRuleSet-65.use[0]!./node_modules/css-loader/dist/cjs.js??clonedRuleSet-65.use[1]!./node_modules/@vue/vue-loader-v15/lib/loaders/stylePostLoader.js!./node_modules/@vue/cli-service/node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-65.use[2]!./node_modules/sass-loader/dist/cjs.js??clonedRuleSet-65.use[3]!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-84.use[0]!./node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./src/components/listbox/MListBoxActions.vue?vue&type=style&index=0&id=6fe6b471&prod&lang=scss&
 // extracted by mini-css-extract-plugin
 
-;// CONCATENATED MODULE: ./src/components/listbox/MListBoxActions.vue?vue&type=style&index=0&id=dc7f0b5a&prod&lang=scss&
+;// CONCATENATED MODULE: ./src/components/listbox/MListBoxActions.vue?vue&type=style&index=0&id=6fe6b471&prod&lang=scss&
 
 ;// CONCATENATED MODULE: ./src/components/listbox/MListBoxActions.vue
 
@@ -22610,8 +22635,8 @@ var MListBoxActionsvue_type_template_id_dc7f0b5a_staticRenderFns = [];
 
 var MListBoxActions_component = normalizeComponent(
   listbox_MListBoxActionsvue_type_script_lang_js_,
-  MListBoxActionsvue_type_template_id_dc7f0b5a_render,
-  MListBoxActionsvue_type_template_id_dc7f0b5a_staticRenderFns,
+  MListBoxActionsvue_type_template_id_6fe6b471_render,
+  MListBoxActionsvue_type_template_id_6fe6b471_staticRenderFns,
   false,
   null,
   null,