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

package/package.json

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

package/src/components/autocomplete/MAutocomplete.vue

@@ -202,9 +202,11 @@ export default {
       openState: this.open,
       tagWidth: '0px',
       tagValue: null,
+      inputValue: null,
       localItems: null,
       sortedListItems: null,
       isFiltered: null,
+      listboxValue: null,
     };
   },
 
@@ -221,22 +223,6 @@ export default {
     hasValues() {
       return this.inputValue?.length > 0;
     },
-    inputValue: {
-      get: function () {
-        return this.input;
-      },
-      set: function (newValue) {
-        return this.$emit('update:input', newValue);
-      },
-    },
-    listboxValue: {
-      get: function () {
-        return !this.value && this.multiple ? [] : this.value;
-      },
-      set: function (newValue) {
-        return this.$emit('change', newValue);
-      },
-    },
   },
 
   watch: {
@@ -246,6 +232,22 @@ export default {
       },
       immediate: true,
     },
+    input: {
+      handler: function (val) {
+        this.inputValue = val;
+      },
+      immediate: true,
+    },
+    value: {
+      handler: function (val) {
+        if (!val && this.multiple) {
+          this.listboxValue = [];
+        } else {
+          this.listboxValue = val;
+        }
+      },
+      immediate: true,
+    },
     listboxValue: function (val) {
       if (!this.multiple) {
         const selectedItems = this.getSelectedItems(val);
@@ -254,6 +256,7 @@ export default {
         );
 
         this.inputValue = seletedLabels.join(', ');
+        this.$emit('update:input', this.inputValue);
       } else {
         this.tagValue = val;
       }
@@ -319,7 +322,9 @@ export default {
         this.localItems = this.items;
       }
     },
-    onChangeListbox() {
+    onChangeListbox(value) {
+      this.$emit('change', value);
+
       if (!this.multiple) {
         this.closeListBox();
       }
@@ -358,6 +363,7 @@ export default {
       if (value.length === 0) {
         this.$emit('clear-input');
       }
+      this.$emit('update:input', value);
       this.filterList(value);
     },
   },