@mozaic-ds/vue 0.20.0-beta.1 → 0.20.0-beta.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mozaic-ds/vue",
-  "version": "0.20.0-beta.1",
+  "version": "0.20.0-beta.4",
   "description": "Vue.js implementation of Mozaic Design System",
   "author": "Adeo - Mozaic Design System",
   "scripts": {
@@ -27,9 +27,6 @@
     "@mozaic-ds/icons": "1.34.0",
     "@mozaic-ds/styles": "1.33.0",
     "@mozaic-ds/web-fonts": "1.22.0",
-    "@vue/composition-api": "^1.6.2",
-    "@vueuse/components": "^8.6.0",
-    "@vueuse/core": "^8.6.0",
     "core-js": "^3.18.3",
     "libphonenumber-js": "1.9.50",
     "postcss-scss": "^4.0.1",

package/src/components/autocomplete/MAutocomplete.vue

@@ -1,65 +1,48 @@
 <template>
   <div
     ref="autocomplete"
+    v-click-outside="onClickOutside"
     class="mc-autocomplete"
     :class="{ 'mc-autocomplete--multi': multiple }"
+    :style="tagStyle"
   >
     <m-tag
-      v-if="multiple && modelValue.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="state.itemDisplayed"
+      v-model="inputValue"
       :placeholder="placeholder"
-      class="mc-autocomplete__trigger"
+      text-input-field-class="mc-autocomplete__trigger"
       icon-position="left"
       icon="DisplaySearch48"
       autocomplete="off"
-      :style="{ width: boxWidth + 'px' }"
-      @update:modelValue="updateDropdown"
-      @change="$emit('input-change', $event.target.value)"
-      @click="state.open = true"
+      @input="filterList"
+      @click="isOpen = true"
     />
     <m-list-box
-      ref="listbox"
-      v-model="state.selected"
-      :open="state.open"
-      :items="sort ? orderedItems() : state.itemListForDropdown"
+      v-model="listboxValue"
+      :open="isOpen"
+      :items="itemListForDropdown"
       :multiple="multiple"
       :empty-search-label="emptySearchLabel"
-      :style="{ width: boxWidth + 'px' }"
       :data-key-expr="dataKeyExpr"
       :data-text-expr="dataTextExpr"
       :data-value-expr="dataValueExpr"
-      @update:modelValue="(selected) => updateList(selected)"
-      @close-list-box="state.open = false"
+      @change="onChange"
     >
       <template #item="{ item }">
-        <slot name="item" :item="item"> </slot>
+        <slot name="item" :item="item" />
       </template>
     </m-list-box>
   </div>
 </template>
 
 <script>
-// import Vue from 'vue';
-// import VueCompositionAPI from '@vue/composition-api';
-// Vue.use(VueCompositionAPI);
-
-import {
-  ref,
-  reactive,
-  onMounted,
-  computed,
-  nextTick,
-} from '@vue/composition-api';
-
-import { onClickOutside } from '@vueuse/core';
 import MListBox from '../listbox/MListBox.vue';
 import MTag from '../tags/MTag.vue';
 import MTextInput from '../textinput/MTextInput.vue';
@@ -73,19 +56,47 @@ export default {
     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: 'voitures',
+    },
     placeholder: {
       type: String,
       default: '',
     },
     items: {
       type: Array,
-      required: true,
       default: () => [],
+      required: true,
+    },
+    multiple: {
+      type: Boolean,
+      default: false,
     },
     filter: {
       type: Function,
@@ -95,18 +106,6 @@ export default {
       type: String,
       default: 'No item matching your criteria found',
     },
-    sort: {
-      type: Boolean,
-      default: false,
-    },
-    labelTag: {
-      type: String,
-      default: '',
-    },
-    modelValue: {
-      type: Array,
-      default: () => [],
-    },
     dataKeyExpr: {
       type: String,
       default: 'id',
@@ -115,119 +114,118 @@ export default {
       type: String,
       default: 'text',
     },
-    dataSelectedExpr: {
-      type: String,
-      default: 'selected',
-    },
     dataValueExpr: {
       type: String,
       default: 'text',
     },
+    value: {
+      type: Array,
+      default: () => [],
+    },
   },
 
-  emits: ['update:modelValue', 'list-removed', 'list-filtered', 'input-change'],
-
-  setup(props, { emit }) {
-    const autocomplete = ref(null);
-    const listbox = ref(null);
-
-    const state = reactive({
-      open: false,
-      itemListForDropdown: props.items,
-      selected: [],
+  data() {
+    return {
+      itemListForDropdown: this.items,
+      selected: this.items,
       itemDisplayed: '',
+      isOpen: this.open,
       tagWidth: '0px',
-    });
-
-    onMounted(() => {
-      manageTag();
-    });
-
-    const selectedItems = computed(() =>
-      state.selected.filter((item) => {
-        return item[props.dataValueExpr];
-      })
-    );
-
-    const orderedItems = () => {
-      // Order by selected then by id
-      return Array.from(state.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;
-        }
-      });
+      uuid: undefined,
+      tagValue: '',
+      inputValue: '',
+      listboxValue: [],
     };
+  },
 
-    const boxWidth = computed(() =>
-      autocomplete.value ? autocomplete.value.clientWidth : ''
-    );
-
-    onClickOutside(listbox, () => (state.open = false));
+  computed: {
+    tagStyle() {
+      return {
+        '--tag-width': this.tagWidth,
+      };
+    },
+  },
 
-    const updateList = (list) => {
-      if (!props.multiple && list) {
-        state.itemDisplayed = list[0].value;
+  watch: {
+    listboxValue: function (newValue) {
+      if (newValue.length === 1) {
+        const valueToDisplay = this.items.find(
+          (item) => item.value == newValue
+        );
+        this.inputValue = valueToDisplay.text;
       } else {
-        state.open = true;
-        // manageTag();
+        this.inputValue = '';
+        this.tagValue = newValue;
       }
-      state.selected = list;
-      emit('update:modelValue', list);
-    };
+    },
 
-    const removeElementsFromList = () => {
-      state.selected = [];
-      // manageTag();
-      emit('update:modelValue', state.selected);
-      emit('list-removed');
-    };
+    tagValue: {
+      handler: function () {
+        this.setTagWidth();
+      },
+      immediate: true,
+    },
 
-    const updateDropdown = (value) => {
-      if (value.length && props.filter) {
-        props.filter(value);
-      } else if (value.length) {
-        state.itemListForDropdown = props.items.filter((item) =>
-          item[props.dataTextExpr].toUpperCase().includes(value.toUpperCase())
-        );
-      } else {
-        state.itemListForDropdown = props.items;
-      }
-      emit('update:modelValue', state.selected);
-      emit('list-filtered', state.itemListForDropdown);
-    };
+    value: {
+      handler: function (value) {
+        this.listboxValue = value;
+      },
+      immediate: true,
+    },
+  },
+
+  mounted() {
+    this.uuid = this._uid;
+  },
 
-    const manageTag = () => {
-      nextTick(() => {
-        state.tagWidth =
+  methods: {
+    setTagWidth() {
+      this.$nextTick(() => {
+        this.tagWidth =
           document && document.querySelector('.mc-autocomplete__tag')
             ? document.querySelector('.mc-autocomplete__tag').clientWidth + 'px'
             : '0px';
       });
-    };
+    },
 
-    return {
-      autocomplete,
-      listbox,
-      state,
-      selectedItems,
-      orderedItems,
-      boxWidth,
-      updateList,
-      removeElementsFromList,
-      updateDropdown,
-      manageTag,
-    };
+    clearAutocomplete() {
+      this.listboxValue = [];
+      this.onChange();
+      this.$emit('clear');
+    },
+
+    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())
+        );
+      } else {
+        this.itemListForDropdown = this.items;
+      }
+      this.$emit('list-filtered', this.itemListForDropdown);
+    },
+
+    onClickOutside() {
+      this.isOpen = false;
+    },
+
+    onChange() {
+      this.$emit('change', this.listboxValue);
+    },
   },
 };
+
+// TODO:
+// - boxWidth ?
+// - dataSelectedExpr ?
 </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--multi .mc-autocomplete__trigger {
   padding-left: calc(2.9375rem + var(--tag-width));

package/src/components/listbox/MListBox.vue

@@ -1,17 +1,13 @@
 <template>
   <ul
-    v-if="state.selectableItems.length > 0"
+    v-if="items.length > 0"
     ref="listbox"
     role="listbox"
-    class="mc-listbox mc-listbox--multi"
+    class="mc-listbox"
     aria-labelledby="listbox"
-    :class="{ 'is-open': open }"
+    :class="{ 'is-open': open, 'mc-listbox--multi': multiple }"
   >
-    <li
-      v-for="item in state.selectableItems"
-      :key="item[dataKeyExpr]"
-      class="mc-listbox__item"
-    >
+    <li v-for="item in selectableItems" :key="item.id" class="mc-listbox__item">
       <slot name="item" :item="item">
         <label
           :for="`checkbox-dropdown-${item[dataKeyExpr]}-${uuid}`"
@@ -19,32 +15,29 @@
           >{{ item[dataTextExpr] }}
         </label>
       </slot>
-      <m-checkbox
+      <input
         :id="`checkbox-dropdown-${item[dataKeyExpr]}-${uuid}`"
+        ref="input"
+        v-model="localValue"
+        class="mc-checkbox__input mc-listbox__input"
         :class="{ hideCheckbox: !multiple }"
-        class="mc-listbox__input"
-        :checked="updateModelValue(true, item)"
-        @update:modelValue="(v) => updateList(v, item[dataValueExpr])"
+        type="checkbox"
+        :value="item.value"
+        @change="onChange"
       />
     </li>
   </ul>
-  <div v-else class="mc-listbox__empty">
+  <div v-else class="mc-list-box__empty">
     {{ emptySearchLabel }}
   </div>
 </template>
 
 <script>
-// import Vue from 'vue';
-// import VueCompositionAPI from '@vue/composition-api';
-// Vue.use(VueCompositionAPI);
-import { reactive, watch, ref } from '@vue/composition-api';
-import MCheckbox from '../checkbox/MCheckbox.vue';
-
 export default {
   name: 'MListbox',
 
-  components: {
-    MCheckbox,
+  model: {
+    event: 'change',
   },
 
   props: {
@@ -80,73 +73,203 @@ export default {
       type: String,
       default: 'text',
     },
-    modelValue: {
-      type: Array,
-      default: () => [],
+    value: {
+      type: [Array, String],
+      default: undefined,
     },
   },
 
-  emits: ['update:itemSelected', 'close-list-box', 'update:modelValue'],
-
-  setup(props, { emit }) {
-    const listbox = ref(null);
-
-    let uuid = Math.random();
-
-    const state = reactive({
-      selectableItems: props.items,
+  data() {
+    return {
+      selectableItems: null,
+      localValue: [],
       selected: [],
-    });
+      uuid: null,
+      inputBaseId: 'listboxInput',
+    };
+  },
 
-    const updateList = (checked, value) => {
-      if (!props.multiple) {
-        emit('update:modelValue', [{ value }]);
-        emit('close-list-box');
-        return;
-      }
+  watch: {
+    items: {
+      handler: function (val) {
+        this.selectableItems = 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);
 
-      if (checked) {
-        state.selected = [...state.selected, { [props.dataValueExpr]: value }];
-      } else {
-        state.selected = state.selected.filter(
-          (item) => item[props.dataValueExpr] !== value
-        );
-      }
-      emit('update:modelValue', state.selected);
-    };
+          inputs.forEach(function (input) {
+            const listItem = input.closest('.mc-listbox__item');
 
-    const updateModelValue = (checked, value) => {
-      state.selected = props.modelValue;
-      if (state.selected) {
-        return (
-          state.selected.filter(
-            (item) => item[props.dataValueExpr] === value[props.dataValueExpr]
-          ).length > 0
-        );
-      } else {
-        return undefined;
-      }
-    };
+            if (input.value == selectedValue[0]) {
+              listItem.classList.add('is-checked');
+            } else {
+              listItem.classList.remove('is-checked');
+            }
+          });
+        }
+      },
+      immediate: true,
+    },
+  },
+
+  mounted() {
+    this.uuid = Math.random();
+  },
 
-    watch(
-      () => props.items,
-      (nextItems) => {
-        state.selectableItems = nextItems;
+  methods: {
+    onChange() {
+      if (!this.multiple) {
+        const currentValue = this.localValue;
+        this.localValue = [];
+        this.localValue = currentValue.slice(-1);
       }
-    );
 
-    return {
-      listbox,
-      uuid,
-      state,
-      updateList,
-      updateModelValue,
-    };
+      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.5rem;
+  // min-width: 18rem;
+  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 {
+    align-items: center;
+    border: 1px solid $color-grey-600;
+    border-radius: get-border-radius('m');
+    padding: $mu100 $mu050;
+  }
+
+  &__label {
+    cursor: pointer;
+
+    &::after {
+      content: '';
+      position: absolute;
+      inset: 0;
+      z-index: 2;
+    }
+  }
+
+  &__input {
+    position: absolute;
+    right: $mu075;
+  }
+
+  .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();
+      }
+    }
+  }
+}
+
+.hideCheckbox {
+  opacity: 0;
+}
 </style>

package/src/components/ratingstars/MStarsInput.vue

@@ -19,6 +19,7 @@
         :value="rateId"
         class="mc-stars-input__radio"
         :required="required"
+        @click="$emit('star-clicked', index + 1)"
       />
 
       <label