@mozaic-ds/vue 0.19.1 → 0.20.0-beta.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mozaic-ds/vue",
-  "version": "0.19.1",
+  "version": "0.20.0-beta.0",
   "description": "Vue.js implementation of Mozaic Design System",
   "author": "Adeo - Mozaic Design System",
   "scripts": {
@@ -27,6 +27,9 @@
     "@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

@@ -3,37 +3,41 @@
     ref="autocomplete"
     class="mc-autocomplete"
     :class="{ 'mc-autocomplete--multi': multiple }"
-    :style="tagStyle"
-    @keyup.esc="isOpen = true"
   >
     <m-tag
-      v-if="multiple && selectedItems().length > 0"
+      v-if="multiple && modelValue.length > 0"
       id="tag"
       type="removable"
-      :label="selectedItems().length.toString() + ' ' + labelTag"
+      :label="selectedItems.length.toString() + ' ' + labelTag"
       class="mc-autocomplete__tag"
       size="s"
       @remove-tag="removeElementsFromList()"
     />
     <m-text-input
-      v-model="itemDisplayed"
+      v-model="state.itemDisplayed"
       :placeholder="placeholder"
-      text-input-field-class="mc-autocomplete__trigger"
+      class="mc-autocomplete__trigger"
       icon-position="left"
       icon="DisplaySearch48"
       autocomplete="off"
       :style="{ width: boxWidth + 'px' }"
-      @input="filerList"
-      @click="isOpen = true"
+      @update:modelValue="updateDropdown"
+      @change="$emit('input-change', $event.target.value)"
+      @click="state.open = true"
     />
     <m-list-box
-      :open="isOpen"
-      :items="sort ? orderedItems() : itemListForDropdown"
+      ref="listbox"
+      v-model="state.selected"
+      :open="state.open"
+      :items="sort ? orderedItems() : state.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"
+      @update:modelValue="(selected) => updateList(selected)"
+      @close-list-box="state.open = false"
     >
       <template #item="{ item }">
         <slot name="item" :item="item"> </slot>
@@ -43,14 +47,31 @@
 </template>
 
 <script>
-import MTextInput from '../textinput/MTextInput.vue';
-import MTag from '../tags/MTag.vue';
+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';
 
 export default {
   name: 'MAutocomplete',
 
-  components: { MListBox, MTag, MTextInput },
+  components: {
+    MListBox,
+    MTag,
+    MTextInput,
+  },
 
   props: {
     multiple: {
@@ -82,54 +103,55 @@ export default {
       type: String,
       default: '',
     },
-    open: {
-      type: Boolean,
-      default: false,
+    modelValue: {
+      type: Array,
+      default: () => [],
     },
-  },
-  data() {
-    return {
-      itemListForDropdown: this.$props.items,
-      selected: this.$props.items,
-      itemDisplayed: '',
-      isOpen: this.$props.open,
-      tagWidth: '0px',
-      boxWidth: '288px',
-    };
-  },
-  computed: {
-    tagStyle() {
-      return {
-        '--tag-width': this.tagWidth,
-      };
+    dataKeyExpr: {
+      type: String,
+      default: 'id',
     },
-    boxStyle() {
-      return {
-        '--box-width': this.boxWidth,
-      };
+    dataTextExpr: {
+      type: String,
+      default: 'text',
     },
-  },
-  mounted() {
-    this.selectedItems();
-    this.tagWidthCalcul();
-    this.boxWidthCalcul();
-  },
-  methods: {
-    tagWidthCalcul() {
-      this.$nextTick(() => {
-        this.tagWidth =
-          document && document.querySelector('.mc-autocomplete__tag')
-            ? document.querySelector('.mc-autocomplete__tag').clientWidth + 'px'
-            : '0px';
-      });
+    dataSelectedExpr: {
+      type: String,
+      default: 'selected',
     },
-    selectedItems() {
-      return this.selected.filter((item) => {
-        return item.selected;
-      });
+    dataValueExpr: {
+      type: String,
+      default: 'text',
     },
-    orderedItems() {
-      this.itemListForDropdown.sort((a, b) => {
+  },
+
+  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: [],
+      itemDisplayed: '',
+      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) {
@@ -138,52 +160,67 @@ export default {
           return -1;
         }
       });
-    },
-    updateList(list) {
-      if (!this.$props.multiple && list) {
-        this.itemDisplayed = list[0].text;
+    };
+
+    const boxWidth = computed(() =>
+      autocomplete.value ? autocomplete.value.clientWidth : ''
+    );
+
+    onClickOutside(listbox, () => (state.open = false));
+
+    const updateList = (list) => {
+      if (!props.multiple && list) {
+        state.itemDisplayed = list[0].value;
       } else {
-        this.isOpen = true;
-        this.selectedItems();
+        state.open = true;
+        // manageTag();
       }
-      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);
+      state.selected = list;
+      emit('update:modelValue', list);
+    };
+
+    const removeElementsFromList = () => {
+      state.selected = [];
+      // manageTag();
+      emit('update:modelValue', state.selected);
+      emit('list-removed');
+    };
+
+    const updateDropdown = (value) => {
+      if (value.length && props.filter) {
+        props.filter(value);
       } else if (value.length) {
-        this.itemListForDropdown = this.itemListForDropdown.filter((item) =>
-          item.text.toUpperCase().includes(value.toUpperCase())
+        state.itemListForDropdown = props.items.filter((item) =>
+          item[props.dataTextExpr].toUpperCase().includes(value.toUpperCase())
         );
       } else {
-        this.itemListForDropdown = this.$props.items;
+        state.itemListForDropdown = props.items;
       }
-      this.$emit('list-filtered', this.itemListForDropdown);
-    },
-    boxWidthCalcul() {
-      this.$nextTick(() => {
-        this.boxWidth = document.querySelector('.mc-autocomplete').clientWidth;
-        console.log(this.boxWidth);
+      emit('update:modelValue', state.selected);
+      emit('list-filtered', state.itemListForDropdown);
+    };
+
+    const manageTag = () => {
+      nextTick(() => {
+        state.tagWidth =
+          document && document.querySelector('.mc-autocomplete__tag')
+            ? document.querySelector('.mc-autocomplete__tag').clientWidth + 'px'
+            : '0px';
       });
-      return;
-    },
+    };
+
+    return {
+      autocomplete,
+      listbox,
+      state,
+      selectedItems,
+      orderedItems,
+      boxWidth,
+      updateList,
+      removeElementsFromList,
+      updateDropdown,
+      manageTag,
+    };
   },
 };
 </script>

package/src/components/listbox/MListBox.vue

@@ -1,41 +1,51 @@
 <template>
   <ul
-    v-if="items.length > 0"
+    v-if="state.selectableItems.length > 0"
     ref="listbox"
     role="listbox"
-    class="mc-listbox"
+    class="mc-listbox mc-listbox--multi"
     aria-labelledby="listbox"
-    :class="{ 'is-open': open, 'mc-listbox--multi': multiple }"
+    :class="{ 'is-open': open }"
   >
     <li
-      v-for="item in selectableItems"
-      :key="item.id"
+      v-for="item in state.selectableItems"
+      :key="item[dataKeyExpr]"
       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>
+        <label
+          :for="`checkbox-dropdown-${item[dataKeyExpr]}-${uuid}`"
+          class="mc-listbox__label"
+          >{{ item[dataTextExpr] }}
+        </label>
       </slot>
       <m-checkbox
-        v-if="multiple"
-        :id="`checkbox-dropdown-${item.id}`"
-        v-model="selectableItems.find((elem) => elem.id === item.id).selected"
+        :id="`checkbox-dropdown-${item[dataKeyExpr]}-${uuid}`"
+        :class="{ hideCheckbox: !multiple }"
         class="mc-listbox__input"
-        @change="updateList(item.id, item.text, !item.selected, $e)"
+        :checked="updateModelValue(true, item)"
+        @update:modelValue="(v) => updateList(v, item[dataValueExpr])"
       />
     </li>
   </ul>
-  <div v-else class="mc-list-box__empty">
+  <div v-else class="mc-listbox__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 },
+  components: {
+    MCheckbox,
+  },
 
   props: {
     open: {
@@ -58,44 +68,80 @@ export default {
       type: Boolean,
       default: false,
     },
-  },
-  data() {
-    return {
-      selectableItems: null,
-      selected: [],
-    };
-  },
-  watch: {
-    items: {
-      handler: function (val) {
-        this.selectableItems = val;
-      },
-      immediate: true,
+    dataKeyExpr: {
+      type: String,
+      default: 'id',
+    },
+    dataTextExpr: {
+      type: String,
+      default: 'text',
+    },
+    dataValueExpr: {
+      type: String,
+      default: 'text',
+    },
+    modelValue: {
+      type: Array,
+      default: () => [],
     },
   },
-  methods: {
-    updateList(id, text, value, isCheckboxUpdate) {
-      if (!this.multiple) {
-        this.$emit('update:itemSelected', [{ id, selected: value, text }]);
 
-        this.$emit('close-list-box');
+  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,
+      selected: [],
+    });
+
+    const updateList = (checked, value) => {
+      if (!props.multiple) {
+        emit('update:modelValue', [{ value }]);
+        emit('close-list-box');
         return;
       }
 
-      if (
-        isCheckboxUpdate &&
-        this.selectableItems.find((item) => item.id === id)
-      ) {
-        this.selectableItems.find((item) => item.id === id).selected = value;
+      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);
+    };
 
-      if (value) {
-        this.selected = [...this.selected, { id, selected: value, text }];
+    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 {
-        this.selected = this.selected.filter((item) => item.id !== id);
+        return undefined;
       }
-      this.$emit('update:itemSelected', this.selectableItems);
-    },
+    };
+
+    watch(
+      () => props.items,
+      (nextItems) => {
+        state.selectableItems = nextItems;
+      }
+    );
+
+    return {
+      listbox,
+      uuid,
+      state,
+      updateList,
+      updateModelValue,
+    };
   },
 };
 </script>