@mozaic-ds/vue 0.35.0-beta.5 → 0.35.1-beta.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mozaic-ds/vue",
-  "version": "0.35.0-beta.5",
+  "version": "0.35.1-beta.0",
   "description": "Vue.js implementation of Mozaic Design System",
   "author": "Adeo - Mozaic Design System",
   "scripts": {
@@ -25,8 +25,8 @@
   "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

@@ -85,6 +85,10 @@ export default {
     },
   },
   props: {
+    items: {
+      type: Array,
+      default: () => [],
+    },
     open: {
       type: Boolean,
       default: false,
@@ -93,10 +97,6 @@ export default {
       type: String,
       default: 'left',
     },
-    items: {
-      type: Array,
-      default: () => [],
-    },
     triggerLabel: {
       type: String,
       default: 'Display options',

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,
   },