@mozaic-ds/vue 0.20.0-beta.3 → 0.20.0-beta.4

package/package.json

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

package/src/components/autocomplete/MAutocomplete.vue

@@ -1,46 +1,44 @@
 <template>
-  <div class="template">
-    <p>Listbox Value : {{ listboxValue }}</p>
-    <div
-      ref="autocomplete"
-      v-click-outside="onClickOutside"
-      class="mc-autocomplete"
-      :class="{ 'mc-autocomplete--multi': multiple }"
-      :style="tagStyle"
+  <div
+    ref="autocomplete"
+    v-click-outside="onClickOutside"
+    class="mc-autocomplete"
+    :class="{ 'mc-autocomplete--multi': multiple }"
+    :style="tagStyle"
+  >
+    <m-tag
+      v-if="multiple && tagValue.length > 1"
+      type="removable"
+      :label="tagValue.length.toString() + ' ' + tagLabel"
+      class="mc-autocomplete__tag"
+      size="s"
+      @remove-tag="clearAutocomplete()"
+    />
+    <m-text-input
+      v-model="inputValue"
+      :placeholder="placeholder"
+      text-input-field-class="mc-autocomplete__trigger"
+      icon-position="left"
+      icon="DisplaySearch48"
+      autocomplete="off"
+      @input="filterList"
+      @click="isOpen = true"
+    />
+    <m-list-box
+      v-model="listboxValue"
+      :open="isOpen"
+      :items="itemListForDropdown"
+      :multiple="multiple"
+      :empty-search-label="emptySearchLabel"
+      :data-key-expr="dataKeyExpr"
+      :data-text-expr="dataTextExpr"
+      :data-value-expr="dataValueExpr"
+      @change="onChange"
     >
-      <m-tag
-        v-if="multiple && tagValue.length > 1"
-        type="removable"
-        :label="tagValue.length.toString() + ' ' + tagLabel"
-        class="mc-autocomplete__tag"
-        size="s"
-        @remove-tag="clearAutocomplete()"
-      />
-      <m-text-input
-        v-model="inputValue"
-        :placeholder="placeholder"
-        text-input-field-class="mc-autocomplete__trigger"
-        icon-position="left"
-        icon="DisplaySearch48"
-        autocomplete="off"
-        @input="filterList"
-        @click="isOpen = true"
-      />
-      <m-list-box
-        v-model="listboxValue"
-        :open="isOpen"
-        :items="itemListForDropdown"
-        :multiple="multiple"
-        :empty-search-label="emptySearchLabel"
-        :data-key-expr="dataKeyExpr"
-        :data-text-expr="dataTextExpr"
-        :data-value-expr="dataValueExpr"
-      >
-        <template #item="{ item }">
-          <slot name="item" :item="item" />
-        </template>
-      </m-list-box>
-    </div>
+      <template #item="{ item }">
+        <slot name="item" :item="item" />
+      </template>
+    </m-list-box>
   </div>
 </template>
 
@@ -74,6 +72,10 @@ export default {
     },
   },
 
+  model: {
+    event: 'change',
+  },
+
   props: {
     open: {
       type: Boolean,
@@ -116,10 +118,10 @@ export default {
       type: String,
       default: 'text',
     },
-    // value: {
-    //   type: Array,
-    //   default: () => [],
-    // },
+    value: {
+      type: Array,
+      default: () => [],
+    },
   },
 
   data() {
@@ -163,6 +165,13 @@ export default {
       },
       immediate: true,
     },
+
+    value: {
+      handler: function (value) {
+        this.listboxValue = value;
+      },
+      immediate: true,
+    },
   },
 
   mounted() {
@@ -181,6 +190,7 @@ export default {
 
     clearAutocomplete() {
       this.listboxValue = [];
+      this.onChange();
       this.$emit('clear');
     },
 
@@ -200,6 +210,10 @@ export default {
     onClickOutside() {
       this.isOpen = false;
     },
+
+    onChange() {
+      this.$emit('change', this.listboxValue);
+    },
   },
 };
 
@@ -210,6 +224,7 @@ export default {
 
 <style lang="scss">
 @import 'settings-tools/all-settings';
+@import 'components/c.checkbox';
 @import 'components/c.autocomplete';
 
 .mc-autocomplete--multi .mc-autocomplete__trigger {

package/src/components/listbox/MListBox.vue

@@ -15,13 +15,6 @@
           >{{ item[dataTextExpr] }}
         </label>
       </slot>
-      <!-- <m-checkbox
-          v-if="multiple"
-          :id="`checkbox-dropdown-${item.id}`"
-          v-model="selectableItems.find((elem) => elem.id === item.id).selected"
-          class="mc-listbox__input"
-          @change="updateList(item.id, item.text, !item.selected, $e)"
-        /> -->
       <input
         :id="`checkbox-dropdown-${item[dataKeyExpr]}-${uuid}`"
         ref="input"