@mozaic-ds/vue 1.0.0-rc.0 → 1.0.0-rc.1

package/package.json

@@ -1,14 +1,14 @@
 {
   "name": "@mozaic-ds/vue",
-  "version": "1.0.0-rc.0",
+  "version": "1.0.0-rc.1",
   "description": "Vue.js implementation of Mozaic Design System",
   "author": "Adeo - Mozaic Design System",
   "scripts": {
     "serve": "vue-cli-service serve",
     "build": "vue-cli-service build ./src/index.js",
     "lint": "vue-cli-service lint",
-    "build:bundle": "vue-cli-service build --target lib --name mozaic-vue ./src/index.js",
-    "build:bundleAdeo": "vue-cli-service build --target lib --formats umd --mode adeo --filename mozaic-vue.adeo ./src/index.js --no-clean",
+    "build:bundle": "MOZAIC_PRESET=lm vue-cli-service build --target lib --name mozaic-vue ./src/index.js",
+    "build:bundleAdeo": "MOZAIC_PRESET=adeo vue-cli-service build --target lib --formats umd --mode adeo --filename mozaic-vue.adeo ./src/index.js --no-clean",
     "postinstall": "node postinstall.js",
     "prepublishOnly": "npm run-script build:bundle && npm run-script build:bundleAdeo",
     "publish:beta": "npm publish --access public --tag alpha",
@@ -23,33 +23,34 @@
     "postinstall.js"
   ],
   "dependencies": {
-    "@mozaic-ds/css-dev-tools": "2.0.0-rc.1",
-    "@mozaic-ds/icons": "1.34.0",
-    "@mozaic-ds/styles": "2.0.0-rc.4",
-    "@mozaic-ds/web-fonts": "1.22.0",
-    "core-js": "^3.18.3",
-    "libphonenumber-js": "1.9.50",
-    "postcss-scss": "^4.0.1",
+    "@mozaic-ds/css-dev-tools": "^1.44.0",
+    "@mozaic-ds/icons": "^1.44.0",
+    "@mozaic-ds/styles": "^1.44.0",
+    "@mozaic-ds/web-fonts": "^1.22.0",
+    "core-js": "^3.25.5",
+    "libphonenumber-js": "^1.10.14",
     "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.19.3",
+    "@babel/eslint-parser": "^7.19.1",
+    "@rushstack/eslint-patch": "^1.2.0",
     "@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",
+    "@vue/compiler-sfc": "^3.2.41",
+    "@vue/eslint-config-prettier": "^7.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",
-    "postcss-loader": "^4.3.0",
-    "prettier": "^2.4.1",
-    "sass": "^1.42.1",
-    "sass-loader": "^10.2.0",
-    "vue-template-compiler": "^2.6.14"
+    "eslint": "^8.25.0",
+    "eslint-config-prettier": "^8.5.0",
+    "eslint-plugin-vue": "^9.6.0",
+    "postcss": "^8.4.18",
+    "postcss-loader": "^7.0.1",
+    "postcss-scss": "^4.0.5",
+    "prettier": "^2.7.1",
+    "sass": "^1.55.0",
+    "sass-loader": "^13.1.0",
+    "vue-template-compiler": "^2.7.13"
   },
   "bugs": {
     "url": "https://github.com/adeo/mozaic-vue/issues"

package/src/components/autocomplete/MAutocomplete.vue

@@ -1,198 +1,381 @@
 <template>
   <div
-    ref="autocomplete"
+    v-click-outside="onClickOutside"
     class="mc-autocomplete"
     :class="{ 'mc-autocomplete--multi': multiple }"
-    :style="tagStyle"
-    @keyup.esc="isOpen = true"
+    :style="setStyles"
   >
-    <m-tag
-      v-if="multiple && selectedItems().length > 0"
-      id="tag"
+    <MTag
+      v-if="multiple && listboxValue.length > 0"
+      :id="tagId ? tagId : `autocompleteTag-${uuid}`"
+      ref="tag"
+      :label="setTagLabel"
+      :disabled="disabled"
       type="removable"
-      :label="selectedItems().length.toString() + ' ' + labelTag"
       class="mc-autocomplete__tag"
       size="s"
-      @remove-tag="removeElementsFromList()"
+      @remove-tag="clearAutocomplete()"
     />
-    <m-text-input
-      v-model="itemDisplayed"
+    <MLoader v-if="loading" class="mc-autocomplete__loader" size="s" />
+    <MTextInput
+      :id="id"
+      v-model="inputValue"
       :placeholder="placeholder"
+      :is-invalid="invalid"
+      :disabled="disabled"
       text-input-field-class="mc-autocomplete__trigger"
       icon-position="left"
       icon="DisplaySearch48"
       autocomplete="off"
-      :style="{ width: boxWidth + 'px' }"
-      @input="filerList"
-      @click="isOpen = true"
+      type="search"
+      @input="onInput"
+      @click="openState = true"
     />
-    <m-list-box
-      :open="isOpen"
-      :items="sort ? orderedItems() : itemListForDropdown"
+    <MListBox
+      v-model="listboxValue"
+      :open="openState"
+      :items="localItems"
       :multiple="multiple"
       :empty-search-label="emptySearchLabel"
-      :style="{ width: boxWidth + 'px' }"
-      @update:itemSelected="updateList"
-      @close-list-box="isOpen = false"
+      :data-key-expr="dataKeyExpr"
+      :data-text-expr="dataTextExpr"
+      :data-value-expr="dataValueExpr"
+      :is-filtered="isFiltered"
+      :max-width="maxWidth"
+      @change="onChange"
     >
       <template #item="{ item }">
-        <slot name="item" :item="item"> </slot>
+        <slot name="item" :item="item"></slot>
       </template>
-    </m-list-box>
+    </MListBox>
   </div>
 </template>
 
 <script>
-import MTextInput from '../textinput/MTextInput.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, MTextInput },
+  components: {
+    MTag,
+    MLoader,
+    MTextInput,
+    MListBox,
+  },
+
+  directives: {
+    'click-outside': {
+      bind(el, binding, vnode) {
+        el.clickOutsideEvent = (event) => {
+          if (!(el === event.target || el.contains(event.target))) {
+            vnode.context[binding.expression](event);
+          }
+        };
+        document.body.addEventListener('click', el.clickOutsideEvent);
+      },
+      unbind(el) {
+        document.body.removeEventListener('click', el.clickOutsideEvent);
+      },
+    },
+  },
+
+  model: {
+    event: 'change',
+  },
 
   props: {
-    multiple: {
-      type: Boolean,
-      default: false,
+    // Tag Element
+    tagId: {
+      type: String,
+      default: null,
     },
-    placeholder: {
+    tagLabel: {
       type: String,
       default: '',
     },
-    items: {
-      type: Array,
-      required: true,
-      default: () => [],
+    // Input Element
+    id: {
+      type: String,
+      default: null,
+    },
+    input: {
+      type: String,
+      default: null,
+    },
+    placeholder: {
+      type: String,
+      default: null,
     },
     filter: {
       type: Function,
       default: null,
     },
-    emptySearchLabel: {
-      type: String,
-      default: 'No item matching your criteria found',
+    filterOnType: {
+      type: Boolean,
+      default: true,
     },
-    sort: {
+    disabled: {
       type: Boolean,
       default: false,
     },
-    labelTag: {
-      type: String,
-      default: '',
+    invalid: {
+      type: Boolean,
+      default: false,
+    },
+    loading: {
+      type: Boolean,
+      default: false,
+    },
+    // Listbox Element
+    items: {
+      type: Array,
+      required: true,
+    },
+    value: {
+      type: [Array, String, Number],
+      default: undefined,
     },
     open: {
       type: Boolean,
       default: false,
     },
+    multiple: {
+      type: Boolean,
+      default: false,
+    },
+    emptySearchLabel: {
+      type: String,
+      default: 'No results found',
+    },
+    dataKeyExpr: {
+      type: String,
+      default: 'id',
+    },
+    dataTextExpr: {
+      type: String,
+      default: 'label',
+    },
+    dataValueExpr: {
+      type: String,
+      default: 'value',
+    },
+    sort: {
+      type: Boolean,
+      default: true,
+    },
+    // Global
+    maxWidth: {
+      type: String,
+      default: '100%', // 17.875rem
+    },
   },
+
   data() {
     return {
-      itemListForDropdown: this.$props.items,
-      selected: this.$props.items,
-      itemDisplayed: '',
-      isOpen: this.$props.open,
+      uuid: Math.random(),
+      openState: this.open,
       tagWidth: '0px',
-      boxWidth: '288px',
+      tagValue: null,
+      inputValue: null,
+      localItems: null,
+      sortedListItems: null,
+      listboxValue: null,
+      isFiltered: null,
     };
   },
+
   computed: {
-    tagStyle() {
-      return {
-        '--tag-width': this.tagWidth,
-      };
+    setTagLabel() {
+      return this.listboxValue.length.toString() + ' ' + this.tagLabel;
     },
-    boxStyle() {
+    setStyles() {
       return {
-        '--box-width': this.boxWidth,
+        '--tag-width': this.tagWidth,
+        '--max-width': this.maxWidth,
       };
     },
   },
-  mounted() {
-    this.selectedItems();
-    this.tagWidthCalcul();
-    this.boxWidthCalcul();
+
+  watch: {
+    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,
+    },
+
+    listboxValue: function (val) {
+      const selectedItems = this.getSelectedItems(val);
+
+      const seletedLabels = selectedItems.map(
+        (item) => item[this.dataTextExpr]
+      );
+
+      this.inputValue = seletedLabels.join(', ');
+
+      if (this.multiple) {
+        this.tagValue = val;
+      }
+    },
+
+    tagValue: function () {
+      this.setTagWidth();
+    },
+
+    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,
+    },
   },
+
   methods: {
-    tagWidthCalcul() {
+    setTagWidth() {
       this.$nextTick(() => {
-        this.tagWidth =
-          document && document.querySelector('.mc-autocomplete__tag')
-            ? document.querySelector('.mc-autocomplete__tag').clientWidth + 'px'
-            : '0px';
-      });
-    },
-    selectedItems() {
-      return this.selected.filter((item) => {
-        return item.selected;
-      });
-    },
-    orderedItems() {
-      this.itemListForDropdown.sort((a, b) => {
-        if (a.selected === b.selected) {
-          return a.id - b.id;
-        } else if (a.selected < b.selected) {
-          return 1;
+        if (this.$refs.tag && this.$refs.tag.$el) {
+          this.tagWidth = this.$refs.tag.$el.clientWidth + 'px';
         } else {
-          return -1;
+          this.tagWidth = '0px';
         }
       });
     },
-    updateList(list) {
-      if (!this.$props.multiple && list) {
-        this.itemDisplayed = list[0].text;
+
+    clearAutocomplete() {
+      this.listboxValue = this.multiple ? [] : undefined;
+      this.onChange();
+      this.$emit('clear');
+    },
+
+    filterList(value) {
+      if (value.length && this.filter) {
+        this.filter(value);
+      } 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.isOpen = true;
-        this.selectedItems();
+        this.localItems = this.items;
+        this.isFiltered = !this.localItems.length;
       }
-      this.itemListForDropdown.forEach((elem) => {
-        if (elem.id === list.id) {
-          elem.selected = false;
-        }
-      });
-      this.tagWidthCalcul();
-      this.$emit(
-        'update:modelValue',
-        this.$props.multiple ? this.selectedItems().value : list
-      );
+      this.$emit('list-filtered', this.localItems);
     },
-    removeElementsFromList() {
-      this.itemListForDropdown.forEach((elem) => {
-        elem.selected = false;
-      });
-      this.selectedItems();
-      this.tagWidthCalcul();
-      this.$emit('list-removed');
-    },
-    filerList(value) {
-      if (value.length && this.$props.filter) {
-        this.$props.filter(value);
-      } else if (value.length) {
-        this.itemListForDropdown = this.itemListForDropdown.filter((item) =>
-          item.text.toUpperCase().includes(value.toUpperCase())
-        );
+
+    onClickOutside() {
+      this.openState = false;
+
+      if (this.multiple && this.sort) {
+        this.sortItems();
       } else {
-        this.itemListForDropdown = this.$props.items;
+        this.localItems = this.items;
       }
-      this.$emit('list-filtered', this.itemListForDropdown);
     },
-    boxWidthCalcul() {
-      this.$nextTick(() => {
-        this.boxWidth = document.querySelector('.mc-autocomplete').clientWidth;
-        console.log(this.boxWidth);
+
+    onChange() {
+      this.$emit('change', this.listboxValue);
+
+      if (!this.multiple) {
+        this.onClickOutside();
+      }
+    },
+
+    getSelectedItems(val) {
+      const value = val ? val : this.listboxValue;
+
+      const selectedItems = this.items.filter((item) => {
+        return this.multiple
+          ? value.includes(item[this.dataValueExpr])
+          : value === item[this.dataValueExpr];
       });
-      return;
+
+      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.autocomplete';
+@import 'settings-tools/all-settings';
+@import 'components/c.autocomplete';
+
+.mc-autocomplete {
+  max-width: var(--max-width);
+
+  &__tag {
+    position: absolute;
+    top: 0;
+    transform: translateY(50%);
+  }
+
+  &__loader {
+    position: absolute;
+    right: $mu075;
+    top: $mu075;
+    z-index: 10;
+  }
+
+  &__trigger {
+    width: 100%;
+  }
+}
 
 .mc-autocomplete--multi .mc-autocomplete__trigger {
+  overflow: hidden;
   padding-left: calc(2.9375rem + var(--tag-width));
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }
 </style>

package/src/components/checkbox/MCheckboxGroup.vue

@@ -22,6 +22,7 @@
         v-bind="option"
         :key="option.id ? option.id : option.value"
         class="mc-field__item"
+        :disabled="disabled"
         :checked="value ? value.includes(option.value) : undefined"
         @change="(v) => onChange(v, option.value)"
       >
@@ -124,6 +125,13 @@ export default {
       type: Boolean,
       default: false,
     },
+    /**
+     * Disabled
+     */
+    disabled: {
+      type: Boolean,
+      default: false,
+    },
   },
 
   data() {