@mozaic-ds/vue 0.21.1 → 0.22.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mozaic-ds/vue",
-  "version": "0.21.1",
+  "version": "0.22.0",
   "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.29.1",
-    "@mozaic-ds/icons": "1.34.0",
-    "@mozaic-ds/styles": "1.33.0",
+    "@mozaic-ds/css-dev-tools": "^1.38.0",
+    "@mozaic-ds/icons": "1.40.0",
+    "@mozaic-ds/styles": "^1.39.1",
     "@mozaic-ds/web-fonts": "1.22.0",
     "core-js": "^3.18.3",
     "libphonenumber-js": "1.9.50",

package/src/components/autocomplete/MAutocomplete.vue

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

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() {

package/src/components/listbox/MListBox.vue

@@ -7,35 +7,48 @@
     aria-labelledby="listbox"
     :class="{ 'is-open': open, 'mc-listbox--multi': multiple }"
   >
-    <li
-      v-for="item in selectableItems"
-      :key="item.id"
-      class="mc-listbox__item"
-      @change="$emit('update:itemSelected', item)"
-      @click.self="updateList(item.id, item.text, !item.selected, true)"
-    >
-      <slot name="item" :item="item">
-        <span class="mc-listbox__text">{{ item.text }} </span>
-      </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)"
+    <li v-for="item in localItems" :key="item.id" class="mc-listbox__item">
+      <m-icon
+        v-if="item.icon"
+        :name="item.icon"
+        class="mc-listbox__icon"
+        color="#666666"
+      />
+      <label
+        :for="`listboxItem-${item[dataKeyExpr]}-${uuid}`"
+        class="mc-listbox__label"
+      >
+        {{ item[dataTextExpr] }}
+      </label>
+      <input
+        :id="`listboxItem-${item[dataKeyExpr]}-${uuid}`"
+        ref="input"
+        v-model="localValue"
+        class="mc-checkbox__input mc-listbox__input"
+        type="checkbox"
+        :value="item[dataValueExpr]"
+        @change="onChange"
       />
     </li>
   </ul>
-  <div v-else class="mc-list-box__empty">
+  <div v-else class="mc-listbox__empty">
     {{ emptySearchLabel }}
   </div>
 </template>
+
 <script>
-import MCheckbox from '../checkbox/MCheckbox.vue';
+import MIcon from '../icon/MIcon.vue';
+
 export default {
   name: 'MListbox',
 
-  components: { MCheckbox },
+  components: {
+    MIcon,
+  },
+
+  model: {
+    event: 'change',
+  },
 
   props: {
     open: {
@@ -58,49 +71,208 @@ export default {
       type: Boolean,
       default: false,
     },
+    dataKeyExpr: {
+      type: String,
+      default: 'id',
+    },
+    dataTextExpr: {
+      type: String,
+      default: 'text',
+    },
+    dataValueExpr: {
+      type: String,
+      default: 'text',
+    },
+    value: {
+      type: [Array, String],
+      default: undefined,
+    },
   },
+
   data() {
     return {
-      selectableItems: null,
+      localItems: null,
+      localValue: [],
       selected: [],
+      uuid: null,
+      inputBaseId: 'listboxInput',
     };
   },
+
   watch: {
     items: {
       handler: function (val) {
-        this.selectableItems = val;
+        this.localItems = val;
+      },
+      immediate: true,
+    },
+    value: {
+      handler: function (value) {
+        this.localValue = value;
+      },
+      immediate: true,
+    },
+    localValue: {
+      handler: function (localValue) {
+        const inputs = this.$refs.input;
+        if (!this.multiple && inputs) {
+          const selectedValue = Array.from(localValue);
+
+          inputs.forEach(function (input) {
+            const listItem = input.closest('.mc-listbox__item');
+
+            if (input.value == selectedValue[0]) {
+              listItem.classList.add('is-checked');
+            } else {
+              listItem.classList.remove('is-checked');
+            }
+          });
+        }
       },
       immediate: true,
     },
   },
-  methods: {
-    updateList(id, text, value, isCheckboxUpdate) {
-      if (!this.multiple) {
-        this.$emit('update:itemSelected', [{ id, selected: value, text }]);
 
-        this.$emit('close-list-box');
-        return;
-      }
+  mounted() {
+    this.uuid = Math.random();
+  },
 
-      if (
-        isCheckboxUpdate &&
-        this.selectableItems.find((item) => item.id === id)
-      ) {
-        this.selectableItems.find((item) => item.id === id).selected = value;
+  methods: {
+    onChange() {
+      if (!this.multiple) {
+        const currentValue = this.localValue;
+        this.localValue = [];
+        this.localValue = currentValue.slice(-1);
       }
 
-      if (value) {
-        this.selected = [...this.selected, { id, selected: value, text }];
-      } else {
-        this.selected = this.selected.filter((item) => item.id !== id);
-      }
-      this.$emit('update:itemSelected', this.selectableItems);
+      this.$emit('change', this.localValue);
     },
   },
 };
 </script>
 
 <style lang="scss">
-@import 'settings-tools/_all-settings';
-@import 'components/_c.listbox';
+@import 'settings-tools/all-settings';
+
+.mc-listbox {
+  $parent: get-parent-selector(&);
+
+  @include unstyle-list();
+
+  background-color: $color-grey-000;
+  border: 1px solid $color-grey-600;
+  border-radius: 3px;
+  position: absolute;
+  overflow-y: auto;
+  margin-top: 5px;
+  margin-bottom: 0;
+  max-height: 13.8125rem; // =221px
+  min-width: 17.875rem; // =286px
+  opacity: 0;
+  visibility: hidden;
+  width: 100%;
+
+  &.is-open {
+    opacity: 1;
+    visibility: visible;
+    z-index: 11;
+  }
+
+  &::-webkit-scrollbar {
+    background-color: $color-grey-100;
+    width: $mu025;
+
+    &-thumb {
+      background: $color-grey-600;
+    }
+  }
+
+  &__item {
+    align-items: center;
+    display: flex;
+    gap: $mu050;
+    min-height: $mu300;
+    padding-left: $mu075;
+    padding-right: $mu075;
+    position: relative;
+    justify-content: space-between;
+
+    &:not(:last-child) {
+      border-bottom: 1px solid $color-grey-300;
+    }
+
+    &:hover {
+      background-color: $color-grey-100;
+      box-shadow: inset 9px 0 0 -7px $color-grey-900;
+    }
+  }
+
+  &__flag,
+  &__icon {
+    width: $mu200;
+    height: $mu200;
+  }
+
+  &__flag {
+    @include set-font-scale('07', 'm');
+
+    text-align: center;
+  }
+
+  &__empty {
+    @include set-font-scale('04', 'm');
+
+    color: $color-fields-error;
+    display: inline-block;
+    margin-top: $mu025;
+  }
+
+  &__label {
+    cursor: pointer;
+    margin-right: auto;
+
+    &::after {
+      content: '';
+      position: absolute;
+      inset: 0;
+      z-index: 2;
+    }
+  }
+
+  .is-focus {
+    background-color: $color-grey-100;
+    box-shadow: inset 9px 0 0 -7px $color-grey-900;
+  }
+
+  .is-disabled {
+    cursor: not-allowed;
+    box-shadow: none;
+    background-color: $color-grey-200;
+    color: $color-grey-600;
+    pointer-events: none;
+  }
+
+  &--left {
+    right: 0;
+    transform: translateX(-100%);
+  }
+
+  &:not(.mc-listbox--multi) {
+    .is-checked {
+      background-size: $mu150;
+      background-image: url(inline-icons(
+        'notification-available-24',
+        $color-grey-900
+      ));
+      background-repeat: no-repeat;
+      background-position: right $mu075 center;
+    }
+
+    #{$parent} {
+      &__input {
+        @include visually-hidden();
+      }
+    }
+  }
+}
 </style>

package/src/components/quantityselector/MQuantitySelector.vue

@@ -7,7 +7,7 @@
       icon-position="left"
       :aria-label="decrementAriaLabel"
       :aria-controls="id"
-      :disabled="currentValue === valuemin"
+      :disabled="disabled ? disabled : currentValue === valuemin"
       :size="small ? 's' : null"
       tabindex="-1"
       type="button"
@@ -26,6 +26,7 @@
       :aria-valuemax="valuemax"
       :placeholder="placeholder"
       :size="small ? 's' : null"
+      :disabled="disabled"
       role="spinbutton"
       @input="handle"
       @keypress="integerOnly && formatValue($event)"
@@ -39,7 +40,7 @@
       icon-position="right"
       :aria-label="incrementAriaLabel"
       :aria-controls="id"
-      :disabled="currentValue === valuemax"
+      :disabled="disabled ? disabled : currentValue === valuemax"
       :size="small ? 's' : null"
       tabindex="-1"
       type="button"
@@ -105,6 +106,10 @@ export default {
       type: Boolean,
       default: false,
     },
+    disabled: {
+      type: Boolean,
+      default: false,
+    },
   },
 
   data() {