@mozaic-ds/vue 0.23.0-beta.1 → 1.0.0-beta.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mozaic-ds/vue",
-  "version": "0.23.0-beta.1",
+  "version": "1.0.0-beta.1",
   "description": "Vue.js implementation of Mozaic Design System",
   "author": "Adeo - Mozaic Design System",
   "scripts": {
@@ -23,9 +23,9 @@
     "postinstall.js"
   ],
   "dependencies": {
-    "@mozaic-ds/css-dev-tools": "^1.38.0",
-    "@mozaic-ds/icons": "1.40.0",
-    "@mozaic-ds/styles": "^1.39.1",
+    "@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",

package/src/components/autocomplete/MAutocomplete.vue

@@ -1,103 +1,70 @@
 <template>
   <div
     ref="autocomplete"
-    v-click-outside="onClickOutside"
     class="mc-autocomplete"
     :class="{ 'mc-autocomplete--multi': multiple }"
     :style="tagStyle"
+    @keyup.esc="isOpen = true"
   >
     <m-tag
-      v-if="multiple && tagValue.length > 1"
+      v-if="multiple && selectedItems().length > 0"
+      id="tag"
       type="removable"
-      :label="tagValue.length.toString() + ' ' + tagLabel"
+      :label="selectedItems().length.toString() + ' ' + labelTag"
       class="mc-autocomplete__tag"
       size="s"
-      @remove-tag="clearAutocomplete()"
+      @remove-tag="removeElementsFromList()"
     />
     <m-text-input
-      v-model="inputValue"
+      v-model="itemDisplayed"
       :placeholder="placeholder"
-      :is-invalid="itemListForDropdown.length === 0"
       text-input-field-class="mc-autocomplete__trigger"
       icon-position="left"
       icon="DisplaySearch48"
       autocomplete="off"
-      @input="filterList"
+      :style="{ width: boxWidth + 'px' }"
+      @input="filerList"
       @click="isOpen = true"
     />
     <m-list-box
-      v-model="listboxValue"
       :open="isOpen"
-      :items="itemListForDropdown"
+      :items="sort ? orderedItems() : itemListForDropdown"
       :multiple="multiple"
       :empty-search-label="emptySearchLabel"
-      :data-key-expr="dataKeyExpr"
-      :data-text-expr="dataTextExpr"
-      :data-value-expr="dataValueExpr"
-      @change="onChange"
+      :style="{ width: boxWidth + 'px' }"
+      @update:itemSelected="updateList"
+      @close-list-box="isOpen = false"
     >
       <template #item="{ item }">
-        <slot name="item" :item="item" />
+        <slot name="item" :item="item"> </slot>
       </template>
     </m-list-box>
   </div>
 </template>
 
 <script>
-import MListBox from '../listbox/MListBox.vue';
-import MTag from '../tags/MTag.vue';
 import MTextInput from '../textinput/MTextInput.vue';
+import MTag from '../tags/MTag.vue';
+import MListBox from '../listbox/MListBox.vue';
 
 export default {
   name: 'MAutocomplete',
 
-  components: {
-    MListBox,
-    MTag,
-    MTextInput,
-  },
-
-  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',
-  },
+  components: { MListBox, MTag, MTextInput },
 
   props: {
-    open: {
+    multiple: {
       type: Boolean,
       default: false,
     },
-    tagLabel: {
-      type: String,
-      default: '',
-    },
     placeholder: {
       type: String,
       default: '',
     },
     items: {
       type: Array,
-      default: () => [],
       required: true,
-    },
-    multiple: {
-      type: Boolean,
-      default: false,
+      default: () => [],
     },
     filter: {
       type: Function,
@@ -107,85 +74,48 @@ export default {
       type: String,
       default: 'No item matching your criteria found',
     },
-    dataKeyExpr: {
-      type: String,
-      default: 'id',
-    },
-    dataTextExpr: {
-      type: String,
-      default: 'label',
+    sort: {
+      type: Boolean,
+      default: false,
     },
-    dataValueExpr: {
+    labelTag: {
       type: String,
-      default: 'value',
+      default: '',
     },
-    value: {
-      type: Array,
-      default: () => [],
+    open: {
+      type: Boolean,
+      default: false,
     },
   },
-
   data() {
     return {
-      itemListForDropdown: this.items,
-      selected: this.items,
+      itemListForDropdown: this.$props.items,
+      selected: this.$props.items,
       itemDisplayed: '',
-      isOpen: this.open,
+      isOpen: this.$props.open,
       tagWidth: '0px',
-      maxWidth: '17.875rem',
-      uuid: undefined,
-      tagValue: '',
-      inputValue: '',
-      listboxValue: [],
+      boxWidth: '288px',
     };
   },
-
   computed: {
     tagStyle() {
       return {
         '--tag-width': this.tagWidth,
-        '--max-width': this.maxWidth,
       };
     },
-  },
-
-  watch: {
-    listboxValue: function (newValue) {
-      const valueExpr = this.dataValueExpr;
-      const textExpr = this.dataTextExpr;
-
-      if (newValue.length === 1) {
-        const valueToDisplay = this.items.find(
-          (item) => item[valueExpr] == newValue
-        );
-        this.inputValue = valueToDisplay[textExpr];
-      } else {
-        this.inputValue = '';
-        this.tagValue = newValue;
-      }
-    },
-
-    tagValue: {
-      handler: function () {
-        this.setTagWidth();
-      },
-      immediate: true,
-    },
-
-    value: {
-      handler: function (value) {
-        this.listboxValue = value;
-      },
-      immediate: true,
+    boxStyle() {
+      return {
+        '--box-width': this.boxWidth,
+      };
     },
   },
-
   mounted() {
-    this.uuid = this._uid;
+    this.selectedItems();
+    this.tagWidthCalcul();
+    this.boxWidthCalcul();
   },
-
   methods: {
-    setTagWidth() {
+    tagWidthCalcul() {
       this.$nextTick(() => {
         this.tagWidth =
           document && document.querySelector('.mc-autocomplete__tag')
@@ -193,45 +123,74 @@ export default {
             : '0px';
       });
     },
-
-    clearAutocomplete() {
-      this.listboxValue = [];
-      this.onChange();
-      this.$emit('clear');
+    selectedItems() {
+      return this.selected.filter((item) => {
+        return item.selected;
+      });
     },
-
-    filterList(value) {
-      if (value.length && this.filter) {
-        this.filter(value);
+    orderedItems() {
+      this.itemListForDropdown.sort((a, b) => {
+        if (a.selected === b.selected) {
+          return a.id - b.id;
+        } else if (a.selected < b.selected) {
+          return 1;
+        } else {
+          return -1;
+        }
+      });
+    },
+    updateList(list) {
+      if (!this.$props.multiple && list) {
+        this.itemDisplayed = list[0].text;
+      } else {
+        this.isOpen = true;
+        this.selectedItems();
+      }
+      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
+      );
+    },
+    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[this.dataTextExpr].toUpperCase().includes(value.toUpperCase())
+          item.text.toUpperCase().includes(value.toUpperCase())
         );
       } else {
-        this.itemListForDropdown = this.items;
+        this.itemListForDropdown = this.$props.items;
       }
       this.$emit('list-filtered', this.itemListForDropdown);
     },
-
-    onClickOutside() {
-      this.isOpen = false;
-    },
-
-    onChange() {
-      this.$emit('change', this.listboxValue);
+    boxWidthCalcul() {
+      this.$nextTick(() => {
+        this.boxWidth = document.querySelector('.mc-autocomplete').clientWidth;
+        console.log(this.boxWidth);
+      });
+      return;
     },
   },
 };
 </script>
 
 <style lang="scss">
-@import 'settings-tools/all-settings';
-@import 'components/c.checkbox';
-@import 'components/c.autocomplete';
-
-.mc-autocomplete {
-  max-width: var(--max-width);
-}
+@import 'settings-tools/_all-settings';
+@import 'components/_c.autocomplete';
 
 .mc-autocomplete--multi .mc-autocomplete__trigger {
   padding-left: calc(2.9375rem + var(--tag-width));

package/src/components/checkbox/MCheckboxGroup.vue

@@ -22,7 +22,6 @@
         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)"
       >
@@ -125,13 +124,6 @@ export default {
       type: Boolean,
       default: false,
     },
-    /**
-     * Disabled
-     */
-    disabled: {
-      type: Boolean,
-      default: false,
-    },
   },
 
   data() {