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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mozaic-ds/vue",
-  "version": "0.35.0-beta.4",
+  "version": "0.35.0",
   "description": "Vue.js implementation of Mozaic Design System",
   "author": "Adeo - Mozaic Design System",
   "scripts": {
@@ -23,9 +23,10 @@
     "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",
+    "@mozaic-ds/icons": "1.52.0",
+    "@mozaic-ds/styles": "1.52.0",
     "@mozaic-ds/web-fonts": "1.22.0",
     "core-js": "^3.27.1",
     "libphonenumber-js": "^1.10.15",

package/src/components/autocomplete/MAutocomplete.vue

@@ -34,7 +34,7 @@
       />
       <MLoader v-if="loading" class="mc-autocomplete__loader" size="s" />
       <button
-        v-if="hasValues"
+        v-if="isClearable"
         type="button"
         class="mc-autocomplete__clear"
         @click="onClear"
@@ -193,6 +193,11 @@ export default {
       type: Boolean,
       default: true,
     },
+    // Clear Button
+    clearable: {
+      type: Boolean,
+      default: true,
+    },
     // Global
     maxWidth: {
       type: String,
@@ -218,7 +223,7 @@ export default {
     classObject() {
       return {
         'mc-autocomplete--multi': this.multiple,
-        'mc-autocomplete--clearable': this.hasValues,
+        'mc-autocomplete--clearable': this.isClearable,
       };
     },
     setStyles() {
@@ -230,8 +235,8 @@ export default {
     setTagLabel() {
       return this.listboxValue.length.toString() + ' ' + this.tagLabel;
     },
-    hasValues() {
-      return this.inputValue?.length > 0;
+    isClearable() {
+      return this.clearable && this.inputValue?.length > 0 && !this.disabled;
     },
     isInvalid() {
       return this.invalid || this.isFiltered;
@@ -250,7 +255,6 @@ export default {
     },
     localItems: {
       handler: function (val) {
-        // this.localItems = val;
         this.isFiltered = !val.length;
         this.$emit('list-filtered', val);
       },
@@ -327,22 +331,13 @@ export default {
       if (value.length && this.filter) {
         this.filter(value);
       } else {
-        if (!this.filterOnType) {
-          return;
-        }
-
         if (value.length) {
           this.localItems = this.items.filter((item) =>
             item[this.dataTextExpr].toUpperCase().includes(value.toUpperCase())
           );
-
-          // this.isFiltered = !this.localItems.length;
         } else {
           this.localItems = this.items;
-          // this.isFiltered = !this.localItems.length;
         }
-
-        // this.$emit('list-filtered', this.localItems);
       }
     },
     closeListBox() {
@@ -396,7 +391,10 @@ export default {
         this.$emit('clear-input');
       }
       this.$emit('update:input', value);
-      this.filterList(value);
+
+      if (this.filterOnType) {
+        this.filterList(value);
+      }
     },
   },
 };

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': {
@@ -76,6 +85,10 @@ export default {
     },
   },
   props: {
+    items: {
+      type: Array,
+      default: () => [],
+    },
     open: {
       type: Boolean,
       default: false,
@@ -84,10 +97,6 @@ export default {
       type: String,
       default: 'left',
     },
-    items: {
-      type: Array,
-      default: () => [],
-    },
     triggerLabel: {
       type: String,
       default: 'Display options',
@@ -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;
     },
   },
 };

package/src/components/tabs/MTab.vue

@@ -22,7 +22,10 @@
           :class="setActiveClass(tab)"
           active-class="mc-tabs__element--selected"
         >
-          <span class="mc-tabs__text">{{ tab.text }}</span>
+          <span class="mc-tabs__text">
+            <MIcon v-if="tab.icon" :name="tab.icon" class="mc-tabs__icon" />
+            {{ tab.text }}
+          </span>
         </component>
         <component
           :is="tab.href ? (tab.disabled ? 'span' : 'a') : 'button'"
@@ -44,7 +47,10 @@
             )
           "
         >
-          <span class="mc-tabs__text">{{ tab.text }}</span>
+          <span class="mc-tabs__text">
+            <MIcon v-if="tab.icon" :name="tab.icon" class="mc-tabs__icon" />
+            {{ tab.text }}
+          </span>
         </component>
       </li>
     </ul>
@@ -53,12 +59,14 @@
 </template>
 
 <script>
+import MIcon from '../icon/MIcon.vue';
 import MSelect from '../select/MSelect.vue';
 
 export default {
   name: 'MTab',
 
   components: {
+    MIcon,
     MSelect,
   },