@mozaic-ds/vue 0.23.0 → 0.24.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mozaic-ds/vue",
-  "version": "0.23.0",
+  "version": "0.24.0",
   "description": "Vue.js implementation of Mozaic Design System",
   "author": "Adeo - Mozaic Design System",
   "scripts": {
@@ -25,31 +25,31 @@
   "dependencies": {
     "@mozaic-ds/css-dev-tools": "1.38.0",
     "@mozaic-ds/icons": "1.41.0",
-    "@mozaic-ds/styles": "1.41.0",
+    "@mozaic-ds/styles": "1.42.0",
     "@mozaic-ds/web-fonts": "1.22.0",
-    "core-js": "^3.18.3",
-    "libphonenumber-js": "1.9.50",
-    "postcss-scss": "^4.0.1",
+    "core-js": "^3.25.0",
+    "libphonenumber-js": "^1.10.13",
+    "postcss-scss": "^4.0.4",
     "vue": "^2.6.14",
     "vue-country-flag": "2.3.2"
   },
   "devDependencies": {
-    "@babel/core": "^7.15.8",
-    "@babel/eslint-parser": "^7.15.8",
+    "@babel/core": "^7.18.13",
+    "@babel/eslint-parser": "^7.18.9",
     "@vue/cli-plugin-babel": "~5.0.4",
     "@vue/cli-service": "~5.0.4",
     "@vue/compiler-sfc": "^3.2.20",
     "@vue/eslint-config-prettier": "^6.0.0",
     "babel-eslint": "^10.1.0",
-    "eslint": "^7.30.0",
-    "eslint-config-prettier": "^8.3.0",
-    "eslint-plugin-vue": "^7.19.1",
-    "postcss": "^8.3.9",
+    "eslint": "^8.23.0",
+    "eslint-config-prettier": "^8.5.0",
+    "eslint-plugin-vue": "^9.4.0",
+    "postcss": "^8.4.16",
     "postcss-loader": "^4.3.0",
-    "prettier": "^2.4.1",
-    "sass": "^1.42.1",
+    "prettier": "^2.7.1",
+    "sass": "^1.54.7",
     "sass-loader": "^10.2.0",
-    "vue-template-compiler": "^2.6.14"
+    "vue-template-compiler": "^2.7.10"
   },
   "bugs": {
     "url": "https://github.com/adeo/mozaic-vue/issues"

package/src/components/autocomplete/MAutocomplete.vue

@@ -1,60 +1,69 @@
 <template>
   <div
-    ref="autocomplete"
     v-click-outside="onClickOutside"
     class="mc-autocomplete"
     :class="{ 'mc-autocomplete--multi': multiple }"
-    :style="tagStyle"
+    :style="setStyles"
   >
-    <m-tag
-      v-if="multiple && tagValue.length > 0"
+    <MTag
+      v-if="multiple && listboxValue.length > 0"
+      :id="tagId ? tagId : `autocompleteTag-${uuid}`"
+      ref="tag"
+      :label="setTagLabel"
+      :disabled="disabled"
       type="removable"
-      :label="tagValue.length.toString() + ' ' + tagLabel"
       class="mc-autocomplete__tag"
       size="s"
       @remove-tag="clearAutocomplete()"
     />
-    <m-text-input
+    <MLoader v-if="loading" class="mc-autocomplete__loader" size="s" />
+    <MTextInput
+      :id="id"
       v-model="inputValue"
       :placeholder="placeholder"
-      :is-invalid="itemListForDropdown.length === 0"
+      :is-invalid="invalid"
+      :disabled="disabled"
       text-input-field-class="mc-autocomplete__trigger"
       icon-position="left"
       icon="DisplaySearch48"
       autocomplete="off"
-      @input="filterList"
-      @click="isOpen = true"
+      type="search"
+      @input="onInput"
+      @click="openState = true"
     />
-    <m-list-box
+    <MListBox
       v-model="listboxValue"
-      :open="isOpen"
-      :items="itemListForDropdown"
+      :open="openState"
+      :items="localItems"
       :multiple="multiple"
       :empty-search-label="emptySearchLabel"
       :data-key-expr="dataKeyExpr"
       :data-text-expr="dataTextExpr"
       :data-value-expr="dataValueExpr"
+      :is-filtered="isFiltered"
       @change="onChange"
     >
       <template #item="{ item }">
-        <slot name="item" :item="item" />
+        <slot name="item" :item="item"></slot>
       </template>
-    </m-list-box>
+    </MListBox>
   </div>
 </template>
 
 <script>
-import MListBox from '../listbox/MListBox.vue';
 import MTag from '../tags/MTag.vue';
+import MLoader from '../loader/MLoader.vue';
 import MTextInput from '../textinput/MTextInput.vue';
+import MListBox from '../listbox/MListBox.vue';
 
 export default {
   name: 'MAutocomplete',
 
   components: {
-    MListBox,
     MTag,
+    MLoader,
     MTextInput,
+    MListBox,
   },
 
   directives: {
@@ -78,34 +87,68 @@ export default {
   },
 
   props: {
-    open: {
-      type: Boolean,
-      default: false,
+    // Tag Element
+    tagId: {
+      type: String,
+      default: null,
     },
     tagLabel: {
       type: String,
       default: '',
     },
+    // Input Element
+    id: {
+      type: String,
+      default: null,
+    },
+    input: {
+      type: String,
+      default: null,
+    },
     placeholder: {
       type: String,
-      default: '',
+      default: null,
     },
+    filter: {
+      type: Function,
+      default: null,
+    },
+    filterOnType: {
+      type: Boolean,
+      default: true,
+    },
+    disabled: {
+      type: Boolean,
+      default: false,
+    },
+    invalid: {
+      type: Boolean,
+      default: false,
+    },
+    loading: {
+      type: Boolean,
+      default: false,
+    },
+    // Listbox Element
     items: {
       type: Array,
-      default: () => [],
       required: true,
     },
-    multiple: {
+    value: {
+      type: [Array, String, Number],
+      default: undefined,
+    },
+    open: {
       type: Boolean,
       default: false,
     },
-    filter: {
-      type: Function,
-      default: null,
+    multiple: {
+      type: Boolean,
+      default: false,
     },
     emptySearchLabel: {
       type: String,
-      default: 'No item matching your criteria found',
+      default: 'No results found',
     },
     dataKeyExpr: {
       type: String,
@@ -119,27 +162,36 @@ export default {
       type: String,
       default: 'value',
     },
-    value: {
-      type: Array,
-      default: () => [],
+    sort: {
+      type: Boolean,
+      default: true,
+    },
+    // Global
+    maxWidth: {
+      type: String,
+      default: '17.875rem',
     },
   },
 
   data() {
     return {
-      itemListForDropdown: this.items,
-      isOpen: this.open,
+      uuid: Math.random(),
+      openState: this.open,
       tagWidth: '0px',
-      maxWidth: '17.875rem',
-      uuid: undefined,
-      tagValue: '',
-      inputValue: '',
-      listboxValue: [],
+      tagValue: null,
+      inputValue: null,
+      localItems: null,
+      sortedListItems: null,
+      listboxValue: null,
+      isFiltered: null,
     };
   },
 
   computed: {
-    tagStyle() {
+    setTagLabel() {
+      return this.listboxValue.length.toString() + ' ' + this.tagLabel;
+    },
+    setStyles() {
       return {
         '--tag-width': this.tagWidth,
         '--max-width': this.maxWidth,
@@ -148,56 +200,71 @@ export default {
   },
 
   watch: {
-    listboxValue: function (newValue) {
-      const textToDisplay = [];
-      const valueExpr = this.dataValueExpr;
-      const textExpr = this.dataTextExpr;
+    value: {
+      handler: function (val) {
+        if (!val && this.multiple) {
+          this.listboxValue = [];
+        } else {
+          this.listboxValue = val;
+        }
+      },
+      immediate: true,
+    },
+
+    items: {
+      handler: function (val) {
+        this.localItems = val;
+        // this.clearAutocomplete();
+      },
+      immediate: true,
+    },
 
-      this.tagValue = newValue;
+    listboxValue: function (val) {
+      const value = Array.isArray(val) ? val : val.toString();
+      const selectedItems = this.getSelectedItems(value);
 
-      if (newValue.length) {
-        const selectedItems = this.items.filter((item) =>
-          newValue.includes(item[valueExpr])
-        );
+      const seletedLabels = selectedItems.map(
+        (item) => item[this.dataTextExpr]
+      );
 
-        selectedItems.forEach((item) => textToDisplay.push(item[textExpr]));
+      this.inputValue = seletedLabels.join(', ');
 
-        this.inputValue = textToDisplay.join(', ');
+      if (this.multiple) {
+        this.tagValue = val;
       }
     },
 
-    tagValue: {
-      handler: function () {
-        this.setTagWidth();
-      },
-      immediate: true,
+    tagValue: function () {
+      this.setTagWidth();
     },
 
-    value: {
-      handler: function (value) {
-        this.listboxValue = value;
+    openState: function (val) {
+      const eventName = val ? 'open' : 'close';
+      this.$emit(eventName);
+      this.$emit('update:open', val);
+    },
+
+    input: {
+      handler: function (val) {
+        this.inputValue = val;
       },
       immediate: true,
     },
   },
 
-  mounted() {
-    this.uuid = this._uid;
-  },
-
   methods: {
     setTagWidth() {
       this.$nextTick(() => {
-        this.tagWidth =
-          document && document.querySelector('.mc-autocomplete__tag')
-            ? document.querySelector('.mc-autocomplete__tag').clientWidth + 'px'
-            : '0px';
+        if (this.$refs.tag && this.$refs.tag.$el) {
+          this.tagWidth = this.$refs.tag.$el.clientWidth + 'px';
+        } else {
+          this.tagWidth = '0px';
+        }
       });
     },
 
     clearAutocomplete() {
-      this.listboxValue = [];
-      this.inputValue = '';
+      this.listboxValue = this.multiple ? [] : undefined;
       this.onChange();
       this.$emit('clear');
     },
@@ -205,18 +272,27 @@ export default {
     filterList(value) {
       if (value.length && this.filter) {
         this.filter(value);
-      } else if (value.length) {
-        this.itemListForDropdown = this.itemListForDropdown.filter((item) =>
+      } else if (value.length && this.filterOnType) {
+        this.localItems = this.items.filter((item) =>
           item[this.dataTextExpr].toUpperCase().includes(value.toUpperCase())
         );
+
+        this.isFiltered = !this.localItems.length;
       } else {
-        this.itemListForDropdown = this.items;
+        this.localItems = this.items;
+        this.isFiltered = !this.localItems.length;
       }
-      this.$emit('list-filtered', this.itemListForDropdown);
+      this.$emit('list-filtered', this.localItems);
     },
 
     onClickOutside() {
-      this.isOpen = false;
+      this.openState = false;
+
+      if (this.multiple && this.sort) {
+        this.sortItems();
+      } else {
+        this.localItems = this.items;
+      }
     },
 
     onChange() {
@@ -226,13 +302,51 @@ export default {
         this.onClickOutside();
       }
     },
+
+    getSelectedItems(val) {
+      const value = val ? val : this.listboxValue;
+
+      const selectedItems = this.items.filter((item) =>
+        value.includes(item[this.dataValueExpr])
+      );
+
+      return selectedItems;
+    },
+
+    sortItems() {
+      this.sortedListItems = this.items;
+      const selectedItems = this.getSelectedItems();
+
+      this.sortedListItems.sort((a, b) => {
+        const hasItemA = selectedItems.includes(a);
+        const hasItemB = selectedItems.includes(b);
+
+        if (hasItemA === hasItemB) {
+          return a[this.dataValueExpr] - b[this.dataValueExpr];
+        } else if (hasItemA < hasItemB) {
+          return 1;
+        } else {
+          return -1;
+        }
+      });
+
+      this.localItems = this.sortedListItems;
+    },
+
+    handleInputValue(value) {
+      this.$emit('update:input', value);
+    },
+
+    onInput(value) {
+      this.handleInputValue(value);
+      this.filterList(value);
+    },
   },
 };
 </script>
 
 <style lang="scss">
 @import 'settings-tools/all-settings';
-@import 'components/c.checkbox';
 @import 'components/c.autocomplete';
 
 .mc-autocomplete {
@@ -241,10 +355,15 @@ export default {
   &__tag {
     position: absolute;
     top: 0;
-    -webkit-transform: translateY(50%);
-    -ms-transform: translateY(50%);
     transform: translateY(50%);
   }
+
+  &__loader {
+    position: absolute;
+    right: $mu075;
+    top: $mu075;
+    z-index: 10;
+  }
 }
 
 .mc-autocomplete--multi .mc-autocomplete__trigger {