@mozaic-ds/vue 0.20.0-beta.3 → 0.20.0-beta.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mozaic-ds/vue",
-  "version": "0.20.0-beta.3",
+  "version": "0.20.0-beta.6",
   "description": "Vue.js implementation of Mozaic Design System",
   "author": "Adeo - Mozaic Design System",
   "scripts": {

package/src/components/autocomplete/MAutocomplete.vue

@@ -1,100 +1,70 @@
 <template>
-  <div class="template">
-    <p>Listbox Value : {{ listboxValue }}</p>
-    <div
-      ref="autocomplete"
-      v-click-outside="onClickOutside"
-      class="mc-autocomplete"
-      :class="{ 'mc-autocomplete--multi': multiple }"
-      :style="tagStyle"
+  <div
+    ref="autocomplete"
+    class="mc-autocomplete"
+    :class="{ 'mc-autocomplete--multi': multiple }"
+    :style="tagStyle"
+    @keyup.esc="isOpen = true"
+  >
+    <m-tag
+      v-if="multiple && selectedItems().length > 0"
+      id="tag"
+      type="removable"
+      :label="selectedItems().length.toString() + ' ' + labelTag"
+      class="mc-autocomplete__tag"
+      size="s"
+      @remove-tag="removeElementsFromList()"
+    />
+    <m-text-input
+      v-model="itemDisplayed"
+      :placeholder="placeholder"
+      text-input-field-class="mc-autocomplete__trigger"
+      icon-position="left"
+      icon="DisplaySearch48"
+      autocomplete="off"
+      :style="{ width: boxWidth + 'px' }"
+      @input="filerList"
+      @click="isOpen = true"
+    />
+    <m-list-box
+      :open="isOpen"
+      :items="sort ? orderedItems() : itemListForDropdown"
+      :multiple="multiple"
+      :empty-search-label="emptySearchLabel"
+      :style="{ width: boxWidth + 'px' }"
+      @update:itemSelected="updateList"
+      @close-list-box="isOpen = false"
     >
-      <m-tag
-        v-if="multiple && tagValue.length > 1"
-        type="removable"
-        :label="tagValue.length.toString() + ' ' + tagLabel"
-        class="mc-autocomplete__tag"
-        size="s"
-        @remove-tag="clearAutocomplete()"
-      />
-      <m-text-input
-        v-model="inputValue"
-        :placeholder="placeholder"
-        text-input-field-class="mc-autocomplete__trigger"
-        icon-position="left"
-        icon="DisplaySearch48"
-        autocomplete="off"
-        @input="filterList"
-        @click="isOpen = true"
-      />
-      <m-list-box
-        v-model="listboxValue"
-        :open="isOpen"
-        :items="itemListForDropdown"
-        :multiple="multiple"
-        :empty-search-label="emptySearchLabel"
-        :data-key-expr="dataKeyExpr"
-        :data-text-expr="dataTextExpr"
-        :data-value-expr="dataValueExpr"
-      >
-        <template #item="{ item }">
-          <slot name="item" :item="item" />
-        </template>
-      </m-list-box>
-    </div>
+      <template #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);
-      },
-    },
-  },
+  components: { MListBox, MTag, MTextInput },
 
   props: {
-    open: {
+    multiple: {
       type: Boolean,
       default: false,
     },
-    tagLabel: {
-      type: String,
-      default: 'voitures',
-    },
     placeholder: {
       type: String,
       default: '',
     },
     items: {
       type: Array,
-      default: () => [],
       required: true,
-    },
-    multiple: {
-      type: Boolean,
-      default: false,
+      default: () => [],
     },
     filter: {
       type: Function,
@@ -104,73 +74,48 @@ export default {
       type: String,
       default: 'No item matching your criteria found',
     },
-    dataKeyExpr: {
-      type: String,
-      default: 'id',
+    sort: {
+      type: Boolean,
+      default: false,
     },
-    dataTextExpr: {
+    labelTag: {
       type: String,
-      default: 'text',
+      default: '',
     },
-    dataValueExpr: {
-      type: String,
-      default: 'text',
+    open: {
+      type: Boolean,
+      default: false,
     },
-    // value: {
-    //   type: Array,
-    //   default: () => [],
-    // },
   },
-
   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',
-      uuid: undefined,
-      tagValue: '',
-      inputValue: '',
-      listboxValue: [],
+      boxWidth: '288px',
     };
   },
-
   computed: {
     tagStyle() {
       return {
         '--tag-width': this.tagWidth,
       };
     },
-  },
-
-  watch: {
-    listboxValue: function (newValue) {
-      if (newValue.length === 1) {
-        const valueToDisplay = this.items.find(
-          (item) => item.value == newValue
-        );
-        this.inputValue = valueToDisplay.text;
-      } else {
-        this.inputValue = '';
-        this.tagValue = newValue;
-      }
-    },
-
-    tagValue: {
-      handler: function () {
-        this.setTagWidth();
-      },
-      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')
@@ -178,39 +123,74 @@ export default {
             : '0px';
       });
     },
-
-    clearAutocomplete() {
-      this.listboxValue = [];
-      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.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;
+    boxWidthCalcul() {
+      this.$nextTick(() => {
+        this.boxWidth = document.querySelector('.mc-autocomplete').clientWidth;
+        console.log(this.boxWidth);
+      });
+      return;
     },
   },
 };
-
-// TODO:
-// - boxWidth ?
-// - dataSelectedExpr ?
 </script>
 
 <style lang="scss">
-@import 'settings-tools/all-settings';
-@import 'components/c.autocomplete';
+@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/index.js

@@ -18,7 +18,7 @@ export { MHero } from './hero';
 export { MIcon } from './icon';
 export { MLayer } from './layer';
 export { MLink } from './link';
-export { MListBox } from './listbox';
+export { MListBox, MListBoxOptions } from './listbox';
 export { MLoader } from './loader';
 export { MModal } from './modal';
 export { MNotification } from './notification';

package/src/components/listbox/MListBox.vue

@@ -7,30 +7,22 @@
     aria-labelledby="listbox"
     :class="{ 'is-open': open, 'mc-listbox--multi': multiple }"
   >
-    <li v-for="item in selectableItems" :key="item.id" class="mc-listbox__item">
+    <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">
-        <label
-          :for="`checkbox-dropdown-${item[dataKeyExpr]}-${uuid}`"
-          class="mc-listbox__label"
-          >{{ item[dataTextExpr] }}
-        </label>
+        <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)"
-        /> -->
-      <input
-        :id="`checkbox-dropdown-${item[dataKeyExpr]}-${uuid}`"
-        ref="input"
-        v-model="localValue"
-        class="mc-checkbox__input mc-listbox__input"
-        :class="{ hideCheckbox: !multiple }"
-        type="checkbox"
-        :value="item.value"
-        @change="onChange"
+      <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>
   </ul>
@@ -38,14 +30,12 @@
     {{ emptySearchLabel }}
   </div>
 </template>
-
 <script>
+import MCheckbox from '../checkbox/MCheckbox.vue';
 export default {
   name: 'MListbox',
 
-  model: {
-    event: 'change',
-  },
+  components: { MCheckbox },
 
   props: {
     open: {
@@ -68,34 +58,13 @@ 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,
-      localValue: [],
       selected: [],
-      uuid: null,
-      inputBaseId: 'listboxInput',
     };
   },
-
   watch: {
     items: {
       handler: function (val) {
@@ -103,180 +72,35 @@ export default {
       },
       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,
-    },
   },
-
-  mounted() {
-    this.uuid = Math.random();
-  },
-
   methods: {
-    onChange() {
+    updateList(id, text, value, isCheckboxUpdate) {
       if (!this.multiple) {
-        const currentValue = this.localValue;
-        this.localValue = [];
-        this.localValue = currentValue.slice(-1);
+        this.$emit('update:itemSelected', [{ id, selected: value, text }]);
+
+        this.$emit('close-list-box');
+        return;
+      }
+
+      if (
+        isCheckboxUpdate &&
+        this.selectableItems.find((item) => item.id === id)
+      ) {
+        this.selectableItems.find((item) => item.id === id).selected = value;
       }
 
-      this.$emit('change', this.localValue);
+      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);
     },
   },
 };
 </script>
 
 <style lang="scss">
-@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;
-}
+@import 'settings-tools/_all-settings';
+@import 'components/_c.listbox';
 </style>