@mozaic-ds/vue 0.35.1-beta.1 → 0.36.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mozaic-ds/vue",
-  "version": "0.35.1-beta.1",
+  "version": "0.36.0",
   "description": "Vue.js implementation of Mozaic Design System",
   "author": "Adeo - Mozaic Design System",
   "scripts": {
@@ -28,8 +28,8 @@
     "@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",
+    "core-js": "^3.27.2",
+    "libphonenumber-js": "^1.10.18",
     "vue": "^2.6.14",
     "vue-country-flag": "2.3.2"
   },
@@ -42,13 +42,13 @@
     "@vue/compiler-sfc": "^3.2.45",
     "@vue/eslint-config-prettier": "^7.0.0",
     "babel-eslint": "^10.1.0",
-    "eslint": "^8.31.0",
+    "eslint": "^8.32.0",
     "eslint-config-prettier": "^8.6.0",
-    "eslint-plugin-vue": "^9.8.0",
-    "postcss": "^8.4.20",
+    "eslint-plugin-vue": "^9.9.0",
+    "postcss": "^8.4.21",
     "postcss-loader": "^7.0.2",
     "postcss-scss": "^4.0.6",
-    "prettier": "^2.8.1",
+    "prettier": "^2.8.3",
     "sass": "^1.57.1",
     "sass-loader": "^13.2.0",
     "vue-template-compiler": "^2.7.14"

package/src/components/dropdown/MDropdown.vue

@@ -1,31 +1,42 @@
 <template>
   <div
     ref="dropdown"
-    v-click-outside="onClickOutside"
+    v-click-outside="closeListBox"
     class="mc-dropdown"
-    :class="{ 'mc-dropdown--multi': multiple }"
+    :class="classObject"
     :style="setStyles"
   >
-    <MTag
-      v-if="multiple && listboxValue.length > 0"
-      :id="tagId ? tagId : `autoCompleteTag-${uuid}`"
-      ref="tag"
-      :label="setTagLabel"
-      :disabled="disabled"
-      type="removable"
-      class="mc-dropdown__tag"
-      size="s"
-      @remove-tag="clearAutocomplete()"
-    />
-    <button
-      type="button"
-      class="mc-select mc-dropdown__trigger"
-      :class="{ 'is-open': openState, 'mc-select--s': size === 's' }"
-      :disabled="disabled"
-      @click="openState = !openState"
-    >
-      {{ buttonValue }}
-    </button>
+    <div class="mc-dropdown__main">
+      <MTag
+        v-if="multiple && listboxValue.length > 0"
+        :id="tagId ? tagId : `dropdownTag-${uuid}`"
+        ref="tag"
+        :label="setTagLabel"
+        :disabled="disabled"
+        type="removable"
+        class="mc-dropdown__tag"
+        size="s"
+        @remove-tag="clearListbox()"
+      />
+      <button
+        type="button"
+        class="mc-select mc-dropdown__trigger"
+        :class="classObjectTrigger"
+        :disabled="disabled"
+        @click="openState = !openState"
+      >
+        {{ buttonValue }}
+      </button>
+      <button
+        v-if="isClearable"
+        class="mc-dropdown__clear"
+        type="button"
+        @click="clearListbox"
+      >
+        <MIcon name="ControlTagCross24" class="mc-dropdown__clear-icon" />
+        <span class="mc-dropdown__clear-text">{{ labelClearButton }}</span>
+      </button>
+    </div>
     <MListBox
       v-model="listboxValue"
       :open="openState"
@@ -36,16 +47,17 @@
       :data-text-expr="dataTextExpr"
       :data-value-expr="dataValueExpr"
       :max-width="maxWidth"
-      @change="onChange"
+      @change="onChangeListbox"
     >
       <template #item="{ item }">
-        <slot name="item" :item="item"></slot>
+        <slot name="item" :item="item" />
       </template>
     </MListBox>
   </div>
 </template>
 
 <script>
+import MIcon from '../icon/MIcon.vue';
 import MTag from '../tags/MTag.vue';
 import MListBox from '../listbox/MListBox.vue';
 
@@ -53,6 +65,7 @@ export default {
   name: 'MDropdown',
 
   components: {
+    MIcon,
     MTag,
     MListBox,
   },
@@ -92,10 +105,6 @@ export default {
       type: String,
       default: '-- Placeholder --',
     },
-    filter: {
-      type: Function,
-      default: null,
-    },
     size: {
       type: String,
       default: 'm',
@@ -142,6 +151,15 @@ export default {
       type: Boolean,
       default: true,
     },
+    // Clear Button
+    clearable: {
+      type: Boolean,
+      default: true,
+    },
+    labelClearButton: {
+      type: String,
+      default: 'Clear',
+    },
     // Global
     maxWidth: {
       type: String,
@@ -163,8 +181,11 @@ export default {
   },
 
   computed: {
-    setTagLabel() {
-      return this.listboxValue.length.toString() + ' ' + this.tagLabel;
+    classObject() {
+      return {
+        'mc-dropdown--multi': this.multiple,
+        'mc-dropdown--clearable': this.isClearable,
+      };
     },
     setStyles() {
       return {
@@ -172,9 +193,32 @@ export default {
         '--dropdown-tag-width': this.tagWidth,
       };
     },
+    setTagLabel() {
+      return this.listboxValue.length.toString() + ' ' + this.tagLabel;
+    },
+    getListboxValue() {
+      return this.multiple
+        ? this.listboxValue.length
+        : this.listboxValue !== undefined;
+    },
+    isClearable() {
+      return this.clearable && this.getListboxValue && !this.disabled;
+    },
+    classObjectTrigger() {
+      return {
+        'is-open': this.openState,
+        'mc-select--s': this.size === 's',
+      };
+    },
   },
 
   watch: {
+    items: {
+      handler: function (val) {
+        this.localItems = val;
+      },
+      immediate: true,
+    },
     value: {
       handler: function (val) {
         if (!val && this.multiple) {
@@ -185,15 +229,6 @@ export default {
       },
       immediate: true,
     },
-
-    items: {
-      handler: function (val) {
-        this.localItems = val;
-        // this.clearAutocomplete();
-      },
-      immediate: true,
-    },
-
     listboxValue: function (val) {
       const selectedItems = this.getSelectedItems(val);
       const seletedLabels = selectedItems.map(
@@ -201,17 +236,16 @@ export default {
       );
 
       this.buttonValue =
-        val.length === 0 ? this.placeholder : seletedLabels.join(', ');
+        ((!val || val.length === 0) && this.placeholder) ||
+        seletedLabels.join(', ');
 
       if (this.multiple) {
         this.tagValue = val;
       }
     },
-
     tagValue: function () {
       this.setTagWidth();
     },
-
     openState: function (val) {
       const eventName = val ? 'open' : 'close';
       this.$emit(eventName);
@@ -229,14 +263,12 @@ export default {
         }
       });
     },
-
-    clearAutocomplete() {
+    clearListbox() {
       this.listboxValue = this.multiple ? [] : undefined;
-      this.onChange();
+      this.onChangeListbox();
       this.$emit('clear');
     },
-
-    onClickOutside() {
+    closeListBox() {
       this.openState = false;
 
       if (this.multiple && this.sort) {
@@ -245,15 +277,13 @@ export default {
         this.localItems = this.items;
       }
     },
-
-    onChange() {
+    onChangeListbox() {
       this.$emit('change', this.listboxValue);
 
       if (!this.multiple) {
-        this.onClickOutside();
+        this.closeListBox();
       }
     },
-
     getSelectedItems(val) {
       const value = val ? val : this.listboxValue;
 
@@ -265,7 +295,6 @@ export default {
 
       return selectedItems;
     },
-
     sortItems() {
       this.sortedListItems = this.items;
       const selectedItems = this.getSelectedItems();
@@ -282,6 +311,8 @@ export default {
           return -1;
         }
       });
+
+      this.localItems = this.sortedListItems;
     },
   },
 };