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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mozaic-ds/vue",
-  "version": "0.20.0-beta.0",
+  "version": "0.20.0-beta.3",
   "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,50 @@
 <template>
-  <div
-    ref="autocomplete"
-    class="mc-autocomplete"
-    :class="{ 'mc-autocomplete--multi': multiple }"
-  >
-    <m-tag
-      v-if="multiple && modelValue.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="state.itemDisplayed"
-      :placeholder="placeholder"
-      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"
-    />
-    <m-list-box
-      ref="listbox"
-      v-model="state.selected"
-      :open="state.open"
-      :items="sort ? orderedItems() : state.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"
+  <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"
     >
-      <template #item="{ item }">
-        <slot name="item" :item="item"> </slot>
-      </template>
-    </m-list-box>
+      <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>
   </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 +58,43 @@ 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);
+      },
+    },
+  },
+
   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 +104,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 +112,105 @@ 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);
-    };
+  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.$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;
+    },
   },
 };
+
+// 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));