@mozaic-ds/vue 0.34.2-beta.0 → 0.35.0-beta.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mozaic-ds/vue",
-  "version": "0.34.2-beta.0",
+  "version": "0.35.0-beta.0",
   "description": "Vue.js implementation of Mozaic Design System",
   "author": "Adeo - Mozaic Design System",
   "scripts": {
@@ -25,15 +25,15 @@
   "dependencies": {
     "@mozaic-ds/css-dev-tools": "1.50.0",
     "@mozaic-ds/icons": "1.49.0",
-    "@mozaic-ds/styles": "1.50.0",
+    "@mozaic-ds/styles": "1.51.0",
     "@mozaic-ds/web-fonts": "1.22.0",
-    "core-js": "^3.26.1",
+    "core-js": "^3.27.0",
     "libphonenumber-js": "^1.10.15",
     "vue": "^2.6.14",
     "vue-country-flag": "2.3.2"
   },
   "devDependencies": {
-    "@babel/core": "^7.20.5",
+    "@babel/core": "^7.20.7",
     "@babel/eslint-parser": "^7.19.1",
     "@rushstack/eslint-patch": "^1.2.0",
     "@vue/cli-plugin-babel": "~5.0.8",
@@ -41,14 +41,14 @@
     "@vue/compiler-sfc": "^3.2.45",
     "@vue/eslint-config-prettier": "^7.0.0",
     "babel-eslint": "^10.1.0",
-    "eslint": "^8.29.0",
+    "eslint": "^8.30.0",
     "eslint-config-prettier": "^8.5.0",
     "eslint-plugin-vue": "^9.8.0",
-    "postcss": "^8.4.19",
+    "postcss": "^8.4.20",
     "postcss-loader": "^7.0.2",
     "postcss-scss": "^4.0.6",
     "prettier": "^2.8.1",
-    "sass": "^1.56.2",
+    "sass": "^1.57.1",
     "sass-loader": "^13.2.0",
     "vue-template-compiler": "^2.7.14"
   },

package/src/components/autocomplete/MAutocomplete.vue

@@ -2,7 +2,7 @@
   <div
     v-click-outside="closeListBox"
     class="mc-autocomplete"
-    :class="{ 'mc-autocomplete--multi': multiple }"
+    :class="classObject"
     :style="setStyles"
   >
     <div class="mc-autocomplete__main">
@@ -17,7 +17,6 @@
         size="s"
         @remove-tag="clearListbox()"
       />
-      <MLoader v-if="loading" class="mc-autocomplete__loader" size="s" />
       <MTextInput
         :id="id"
         v-model="inputValue"
@@ -25,6 +24,7 @@
         :is-invalid="invalid"
         :disabled="disabled"
         :size="size"
+        :root-class="{ 'is-invalid': invalid }"
         text-input-field-class="mc-autocomplete__trigger"
         icon-position="left"
         icon="DisplaySearch48"
@@ -32,6 +32,7 @@
         @input="onInput"
         @click="openState = true"
       />
+      <MLoader v-if="loading" class="mc-autocomplete__loader" size="s" />
       <button
         v-if="hasValues"
         type="button"
@@ -211,6 +212,12 @@ export default {
   },
 
   computed: {
+    classObject() {
+      return {
+        'mc-autocomplete--multi': this.multiple,
+        'mc-autocomplete--clearable': this.hasValues,
+      };
+    },
     setStyles() {
       return {
         '--autocomplete-tag-width': this.tagWidth,
@@ -248,18 +255,20 @@ export default {
       },
       immediate: true,
     },
-    listboxValue: function (val) {
-      if (!this.multiple) {
-        const selectedItems = this.getSelectedItems(val);
-        const seletedLabels = selectedItems.map(
-          (item) => item[this.dataTextExpr]
-        );
+    listboxValue: {
+      handler: function (val) {
+        if (!this.multiple) {
+          const selectedItems = this.getSelectedItems(val);
+          const seletedLabels = selectedItems.map(
+            (item) => item[this.dataTextExpr]
+          );
 
-        this.inputValue = seletedLabels.join(', ');
-        this.$emit('update:input', this.inputValue);
-      } else {
-        this.tagValue = val;
-      }
+          this.inputValue = seletedLabels.join(', ');
+        } else {
+          this.tagValue = val;
+        }
+      },
+      immediate: true,
     },
     tagValue: function () {
       this.setTagWidth();

package/src/components/listbox/MListBoxActions.vue

@@ -9,7 +9,7 @@
       ref="trigger"
       type="button"
       class="mc-listbox-options__trigger"
-      @click="onClickTrigger"
+      @click="onSwitch($event)"
     >
       <m-icon name="DisplayOptions24" :color="triggerIconColor" />
       <span class="mc-listbox-options__trigger-label">{{ triggerLabel }}</span>
@@ -17,7 +17,11 @@
     <div
       ref="listbox"
       class="mc-listbox-options__container"
-      :class="{ 'is-open': isOpen, 'align-right': position == 'right' }"
+      :class="{
+        'is-open': isOpen,
+        'align-right': position == 'right',
+        'align-top': displayTop,
+      }"
       role="listbox"
       aria-labelledby="listbox"
     >
@@ -107,6 +111,7 @@ export default {
   data() {
     return {
       isOpen: this.open,
+      displayTop: false,
       posTop: '0px',
       hasDataTable: false,
     };
@@ -154,21 +159,26 @@ export default {
     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 },
         item
       );
-      this.$emit('update:itemSelected', valToEmit);
-    },
-    onClickTrigger() {
-      this.isOpen = !this.isOpen;
-
-      if (this.isOpen && this.hasDataTable) {
-        const buttonHeight = this.$refs.trigger.getBoundingClientRect().height;
-        this.posTop =
-          this.$refs.trigger.getBoundingClientRect().top + buttonHeight;
-      }
+      this.$emit('update:itemSelected', valToEmit); // TODO: deprecated
+      this.$emit('item-clicked', valToEmit);
     },
     handleScroll() {
       this.isOpen = false;
@@ -218,8 +228,16 @@ export default {
       z-index: 11;
     }
 
+    &.align-top {
+      transform: translate(0, calc(-100% - #{$mu150}));
+    }
+
     &.align-right {
-      transform: translateX(calc(-100% + #{$mu150}));
+      transform: translate(calc(-100% + #{$mu150}), 0);
+
+      &.align-top {
+        transform: translate(calc(-100% + #{$mu150}), calc(-100% - #{$mu150}));
+      }
     }
   }
 

package/src/components/textinput/MTextInput.vue

@@ -3,7 +3,7 @@
     v-if="icon"
     key="icon-input"
     class="mc-left-icon-input"
-    :class="cssFieldElementClass"
+    :class="[cssFieldElementClass, rootClass]"
   >
     <m-text-input-icon :icon="icon" />
     <m-text-input-field
@@ -49,6 +49,10 @@ export default {
       type: String,
       default: null,
     },
+    rootClass: {
+      type: String,
+      default: null,
+    },
     textInputFieldClass: {
       type: String,
       default: null,