@mozaic-ds/vue 0.20.0-beta.2 → 0.20.0

package/package.json

@@ -1,14 +1,14 @@
 {
   "name": "@mozaic-ds/vue",
-  "version": "0.20.0-beta.2",
+  "version": "0.20.0",
   "description": "Vue.js implementation of Mozaic Design System",
   "author": "Adeo - Mozaic Design System",
   "scripts": {
     "serve": "vue-cli-service serve",
     "build": "vue-cli-service build ./src/index.js",
     "lint": "vue-cli-service lint",
-    "build:bundle": "vue-cli-service build --target lib --inline-vue --name mozaic-vue ./src/index.js",
-    "build:bundleAdeo": "vue-cli-service build --mode adeo --target lib --formats umd --inline-vue --filename mozaic-vue.adeo ./src/index.js --no-clean",
+    "build:bundle": "vue-cli-service build --target lib --name mozaic-vue ./src/index.js",
+    "build:bundleAdeo": "vue-cli-service build --target lib --formats umd --mode adeo --filename mozaic-vue.adeo ./src/index.js --no-clean",
     "postinstall": "node postinstall.js",
     "prepublishOnly": "npm run-script build:bundle && npm run-script build:bundleAdeo",
     "publish:beta": "npm publish --access public --tag alpha",
@@ -27,8 +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/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,41 +3,37 @@
     ref="autocomplete"
     class="mc-autocomplete"
     :class="{ 'mc-autocomplete--multi': multiple }"
+    :style="tagStyle"
+    @keyup.esc="isOpen = true"
   >
     <m-tag
-      v-if="multiple && modelValue.length > 0"
+      v-if="multiple && selectedItems().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="state.itemDisplayed"
+      v-model="itemDisplayed"
       :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="filerList"
+      @click="isOpen = true"
     />
     <m-list-box
-      ref="listbox"
-      v-model="state.selected"
-      :open="state.open"
-      :items="sort ? orderedItems() : state.itemListForDropdown"
+      :open="isOpen"
+      :items="sort ? orderedItems() : 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"
+      @update:itemSelected="updateList"
+      @close-list-box="isOpen = false"
     >
       <template #item="{ item }">
         <slot name="item" :item="item"> </slot>
@@ -47,26 +43,14 @@
 </template>
 
 <script>
-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';
+import MTag from '../tags/MTag.vue';
+import MListBox from '../listbox/MListBox.vue';
 
 export default {
   name: 'MAutocomplete',
 
-  components: {
-    MListBox,
-    MTag,
-    MTextInput,
-  },
+  components: { MListBox, MTag, MTextInput },
 
   props: {
     multiple: {
@@ -98,55 +82,54 @@ export default {
       type: String,
       default: '',
     },
-    modelValue: {
-      type: Array,
-      default: () => [],
+    open: {
+      type: Boolean,
+      default: false,
     },
-    dataKeyExpr: {
-      type: String,
-      default: 'id',
+  },
+  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,
+      };
     },
-    dataTextExpr: {
-      type: String,
-      default: 'text',
+    boxStyle() {
+      return {
+        '--box-width': this.boxWidth,
+      };
     },
-    dataSelectedExpr: {
-      type: String,
-      default: 'selected',
+  },
+  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';
+      });
     },
-    dataValueExpr: {
-      type: String,
-      default: 'text',
+    selectedItems() {
+      return this.selected.filter((item) => {
+        return item.selected;
+      });
     },
-  },
-
-  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) => {
+    orderedItems() {
+      this.itemListForDropdown.sort((a, b) => {
         if (a.selected === b.selected) {
           return a.id - b.id;
         } else if (a.selected < b.selected) {
@@ -155,67 +138,52 @@ export default {
           return -1;
         }
       });
-    };
-
-    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;
+    },
+    updateList(list) {
+      if (!this.$props.multiple && list) {
+        this.itemDisplayed = list[0].text;
       } else {
-        state.open = true;
-        manageTag();
+        this.isOpen = true;
+        this.selectedItems();
       }
-      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);
+      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) {
-        state.itemListForDropdown = props.items.filter((item) =>
-          item[props.dataTextExpr].toUpperCase().includes(value.toUpperCase())
+        this.itemListForDropdown = this.itemListForDropdown.filter((item) =>
+          item.text.toUpperCase().includes(value.toUpperCase())
         );
       } else {
-        state.itemListForDropdown = props.items;
+        this.itemListForDropdown = this.$props.items;
       }
-      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';
+      this.$emit('list-filtered', this.itemListForDropdown);
+    },
+    boxWidthCalcul() {
+      this.$nextTick(() => {
+        this.boxWidth = document.querySelector('.mc-autocomplete').clientWidth;
+        console.log(this.boxWidth);
       });
-    };
-
-    return {
-      autocomplete,
-      listbox,
-      state,
-      selectedItems,
-      orderedItems,
-      boxWidth,
-      updateList,
-      removeElementsFromList,
-      updateDropdown,
-      manageTag,
-    };
+      return;
+    },
   },
 };
 </script>

package/src/components/listbox/MListBox.vue

@@ -1,48 +1,41 @@
 <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]"
+      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
-        :id="`checkbox-dropdown-${item[dataKeyExpr]}-${uuid}`"
-        :class="{ hideCheckbox: !multiple }"
+        v-if="multiple"
+        :id="`checkbox-dropdown-${item.id}`"
+        v-model="selectableItems.find((elem) => elem.id === item.id).selected"
         class="mc-listbox__input"
-        :checked="updateModelValue(true, item)"
-        @update:modelValue="(v) => updateList(v, item[dataValueExpr])"
+        @change="updateList(item.id, item.text, !item.selected, $e)"
       />
     </li>
   </ul>
-  <div v-else class="mc-listbox__empty">
+  <div v-else class="mc-list-box__empty">
     {{ emptySearchLabel }}
   </div>
 </template>
-
 <script>
-import { reactive, watch, ref } from '@vue/composition-api';
 import MCheckbox from '../checkbox/MCheckbox.vue';
-
 export default {
   name: 'MListbox',
 
-  components: {
-    MCheckbox,
-  },
+  components: { MCheckbox },
 
   props: {
     open: {
@@ -65,80 +58,44 @@ export default {
       type: Boolean,
       default: false,
     },
-    dataKeyExpr: {
-      type: String,
-      default: 'id',
-    },
-    dataTextExpr: {
-      type: String,
-      default: 'text',
-    },
-    dataValueExpr: {
-      type: String,
-      default: 'text',
-    },
-    modelValue: {
-      type: Array,
-      default: () => [],
-    },
   },
-
-  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,
       selected: [],
-    });
+    };
+  },
+  watch: {
+    items: {
+      handler: function (val) {
+        this.selectableItems = val;
+      },
+      immediate: true,
+    },
+  },
+  methods: {
+    updateList(id, text, value, isCheckboxUpdate) {
+      if (!this.multiple) {
+        this.$emit('update:itemSelected', [{ id, selected: value, text }]);
 
-    const updateList = (checked, value) => {
-      if (!props.multiple) {
-        emit('update:modelValue', [{ value }]);
-        emit('close-list-box');
+        this.$emit('close-list-box');
         return;
       }
 
-      if (checked) {
-        state.selected = [...state.selected, { [props.dataValueExpr]: value }];
-      } else {
-        state.selected = state.selected.filter(
-          (item) => item[props.dataValueExpr] !== value
-        );
+      if (
+        isCheckboxUpdate &&
+        this.selectableItems.find((item) => item.id === id)
+      ) {
+        this.selectableItems.find((item) => item.id === id).selected = value;
       }
-      emit('update:modelValue', state.selected);
-    };
 
-    const updateModelValue = (checked, value) => {
-      state.selected = props.modelValue;
-      if (state.selected) {
-        return (
-          state.selected.filter(
-            (item) => item[props.dataValueExpr] === value[props.dataValueExpr]
-          ).length > 0
-        );
+      if (value) {
+        this.selected = [...this.selected, { id, selected: value, text }];
       } else {
-        return undefined;
+        this.selected = this.selected.filter((item) => item.id !== id);
       }
-    };
-
-    watch(
-      () => props.items,
-      (nextItems) => {
-        state.selectableItems = nextItems;
-      }
-    );
-
-    return {
-      listbox,
-      uuid,
-      state,
-      updateList,
-      updateModelValue,
-    };
+      this.$emit('update:itemSelected', this.selectableItems);
+    },
   },
 };
 </script>

package/src/components/quantityselector/MQuantitySelector.vue

@@ -10,6 +10,7 @@
       :disabled="currentValue === valuemin"
       :size="small ? 's' : null"
       tabindex="-1"
+      type="button"
       @click="decrement()"
     />
 
@@ -40,6 +41,7 @@
       :disabled="currentValue === valuemax"
       :size="small ? 's' : null"
       tabindex="-1"
+      type="button"
       @click="increment()"
     />
   </div>

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