@mozaic-ds/vue 0.23.0-beta.0 → 0.24.0-beta.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mozaic-ds/vue",
-  "version": "0.23.0-beta.0",
+  "version": "0.24.0-beta.0",
   "description": "Vue.js implementation of Mozaic Design System",
   "author": "Adeo - Mozaic Design System",
   "scripts": {
@@ -23,33 +23,33 @@
     "postinstall.js"
   ],
   "dependencies": {
-    "@mozaic-ds/css-dev-tools": "^1.38.0",
-    "@mozaic-ds/icons": "1.40.0",
-    "@mozaic-ds/styles": "^1.39.1",
+    "@mozaic-ds/css-dev-tools": "1.38.0",
+    "@mozaic-ds/icons": "1.41.0",
+    "@mozaic-ds/styles": "1.41.0",
     "@mozaic-ds/web-fonts": "1.22.0",
-    "core-js": "^3.18.3",
-    "libphonenumber-js": "1.9.50",
-    "postcss-scss": "^4.0.1",
+    "core-js": "^3.25.0",
+    "libphonenumber-js": "^1.10.13",
+    "postcss-scss": "^4.0.4",
     "vue": "^2.6.14",
     "vue-country-flag": "2.3.2"
   },
   "devDependencies": {
-    "@babel/core": "^7.15.8",
-    "@babel/eslint-parser": "^7.15.8",
+    "@babel/core": "^7.18.13",
+    "@babel/eslint-parser": "^7.18.9",
     "@vue/cli-plugin-babel": "~5.0.4",
     "@vue/cli-service": "~5.0.4",
     "@vue/compiler-sfc": "^3.2.20",
     "@vue/eslint-config-prettier": "^6.0.0",
     "babel-eslint": "^10.1.0",
-    "eslint": "^7.30.0",
-    "eslint-config-prettier": "^8.3.0",
-    "eslint-plugin-vue": "^7.19.1",
-    "postcss": "^8.3.9",
+    "eslint": "^8.23.0",
+    "eslint-config-prettier": "^8.5.0",
+    "eslint-plugin-vue": "^9.4.0",
+    "postcss": "^8.4.16",
     "postcss-loader": "^4.3.0",
-    "prettier": "^2.4.1",
-    "sass": "^1.42.1",
+    "prettier": "^2.7.1",
+    "sass": "^1.54.7",
     "sass-loader": "^10.2.0",
-    "vue-template-compiler": "^2.6.14"
+    "vue-template-compiler": "^2.7.10"
   },
   "bugs": {
     "url": "https://github.com/adeo/mozaic-vue/issues"

package/src/components/autocomplete/MAutocomplete.vue

@@ -1,13 +1,12 @@
 <template>
   <div
-    ref="autocomplete"
     v-click-outside="onClickOutside"
     class="mc-autocomplete"
     :class="{ 'mc-autocomplete--multi': multiple }"
     :style="tagStyle"
   >
     <m-tag
-      v-if="multiple && tagValue.length > 1"
+      v-if="multiple && tagValue.length > 0"
       type="removable"
       :label="tagValue.length.toString() + ' ' + tagLabel"
       class="mc-autocomplete__tag"
@@ -44,9 +43,9 @@
 </template>
 
 <script>
-import MListBox from '../listbox/MListBox.vue';
 import MTag from '../tags/MTag.vue';
 import MTextInput from '../textinput/MTextInput.vue';
+import MListBox from '../listbox/MListBox.vue';
 
 export default {
   name: 'MAutocomplete',
@@ -128,8 +127,6 @@ export default {
   data() {
     return {
       itemListForDropdown: this.items,
-      selected: this.items,
-      itemDisplayed: '',
       isOpen: this.open,
       tagWidth: '0px',
       maxWidth: '17.875rem',
@@ -151,17 +148,20 @@ export default {
 
   watch: {
     listboxValue: function (newValue) {
+      const textToDisplay = [];
       const valueExpr = this.dataValueExpr;
       const textExpr = this.dataTextExpr;
 
-      if (newValue.length === 1) {
-        const valueToDisplay = this.items.find(
-          (item) => item[valueExpr] == newValue
+      this.tagValue = newValue;
+
+      if (newValue.length) {
+        const selectedItems = this.items.filter((item) =>
+          newValue.includes(item[valueExpr])
         );
-        this.inputValue = valueToDisplay[textExpr];
-      } else {
-        this.inputValue = '';
-        this.tagValue = newValue;
+
+        selectedItems.forEach((item) => textToDisplay.push(item[textExpr]));
+
+        this.inputValue = textToDisplay.join(', ');
       }
     },
 
@@ -196,6 +196,7 @@ export default {
 
     clearAutocomplete() {
       this.listboxValue = [];
+      this.inputValue = '';
       this.onChange();
       this.$emit('clear');
     },
@@ -219,6 +220,10 @@ export default {
 
     onChange() {
       this.$emit('change', this.listboxValue);
+
+      if (!this.multiple) {
+        this.onClickOutside();
+      }
     },
   },
 };
@@ -231,9 +236,20 @@ export default {
 
 .mc-autocomplete {
   max-width: var(--max-width);
+
+  &__tag {
+    position: absolute;
+    top: 0;
+    -webkit-transform: translateY(50%);
+    -ms-transform: translateY(50%);
+    transform: translateY(50%);
+  }
 }
 
 .mc-autocomplete--multi .mc-autocomplete__trigger {
+  overflow: hidden;
   padding-left: calc(2.9375rem + var(--tag-width));
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }
 </style>

package/src/components/dropdown/MDropdown.vue

@@ -0,0 +1,245 @@
+<template>
+  <div
+    ref="dropdown"
+    v-click-outside="onClickOutside"
+    class="mc-dropdown"
+    :class="{ 'mc-dropdown--multi': multiple }"
+    :style="tagStyle"
+  >
+    <m-tag
+      v-if="multiple && tagValue.length > 0"
+      type="removable"
+      :label="tagValue.length.toString() + ' ' + tagLabel"
+      class="mc-dropdown__tag"
+      size="s"
+      @remove-tag="clearAutocomplete()"
+    />
+
+    <button
+      type="button"
+      class="mc-select mc-dropdown__trigger"
+      :class="{ 'is-open': isOpen }"
+      @click="isOpen = !isOpen"
+    >
+      {{ inputValue }}
+    </button>
+    <m-list-box
+      v-model="listboxValue"
+      :open="isOpen"
+      :items="itemListForDropdown"
+      :multiple="multiple"
+      :data-key-expr="dataKeyExpr"
+      :data-text-expr="dataTextExpr"
+      :data-value-expr="dataValueExpr"
+      @change="onChange"
+    >
+      <template #item="{ item }">
+        <slot name="item" :item="item" />
+      </template>
+    </m-list-box>
+  </div>
+</template>
+
+<script>
+import MListBox from '../listbox/MListBox.vue';
+import MTag from '../tags/MTag.vue';
+
+export default {
+  name: 'MDropdown',
+
+  components: {
+    MListBox,
+    MTag,
+  },
+
+  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: {
+    open: {
+      type: Boolean,
+      default: false,
+    },
+    tagLabel: {
+      type: String,
+      default: '',
+    },
+    placeholder: {
+      type: String,
+      default: '-- Placeholder --',
+    },
+    items: {
+      type: Array,
+      default: () => [],
+      required: true,
+    },
+    multiple: {
+      type: Boolean,
+      default: false,
+    },
+    disabled: {
+      type: Boolean,
+      default: false,
+    },
+    dataKeyExpr: {
+      type: String,
+      default: 'id',
+    },
+    dataTextExpr: {
+      type: String,
+      default: 'label',
+    },
+    dataValueExpr: {
+      type: String,
+      default: 'value',
+    },
+    value: {
+      type: Array,
+      default: () => [],
+    },
+  },
+
+  data() {
+    return {
+      itemListForDropdown: this.items,
+      isOpen: this.open,
+      tagWidth: '0px',
+      maxWidth: '17.875rem',
+      uuid: undefined,
+      tagValue: '',
+      inputValue: '',
+      listboxValue: [],
+    };
+  },
+
+  computed: {
+    tagStyle() {
+      return {
+        '--tag-width': this.tagWidth,
+        '--max-width': this.maxWidth,
+      };
+    },
+  },
+
+  watch: {
+    listboxValue: function (newValue) {
+      const textToDisplay = [];
+      const valueExpr = this.dataValueExpr;
+      const textExpr = this.dataTextExpr;
+
+      this.tagValue = newValue;
+
+      if (newValue.length) {
+        const selectedItems = this.items.filter((item) =>
+          newValue.includes(item[valueExpr])
+        );
+
+        selectedItems.forEach((item) => textToDisplay.push(item[textExpr]));
+
+        this.inputValue = textToDisplay.join(', ');
+      } else {
+        this.inputValue = this.placeholder;
+      }
+    },
+
+    tagValue: {
+      handler: function () {
+        this.setTagWidth();
+      },
+      immediate: true,
+    },
+
+    value: {
+      handler: function (value) {
+        this.listboxValue = value;
+      },
+      immediate: true,
+    },
+  },
+
+  mounted() {
+    this.uuid = this._uid;
+  },
+
+  methods: {
+    setTagWidth() {
+      this.$nextTick(() => {
+        this.tagWidth =
+          document && document.querySelector('.mc-dropdown__tag')
+            ? document.querySelector('.mc-dropdown__tag').clientWidth + 8 + 'px'
+            : '0px';
+      });
+    },
+
+    clearAutocomplete() {
+      this.listboxValue = [];
+      this.inputValue = '';
+      this.onChange();
+      this.$emit('clear');
+    },
+
+    onClickOutside() {
+      this.isOpen = false;
+    },
+
+    onChange() {
+      this.$emit('change', this.listboxValue);
+
+      if (!this.multiple) {
+        this.onClickOutside();
+      }
+    },
+  },
+};
+</script>
+
+<style lang="scss">
+@import 'settings-tools/all-settings';
+@import 'components/c.checkbox';
+@import 'components/_c.dropdown';
+
+.mc-dropdown {
+  max-width: var(--max-width);
+
+  &__tag {
+    position: absolute;
+    top: 0;
+    -webkit-transform: translateY(50%);
+    -ms-transform: translateY(50%);
+    transform: translateY(50%);
+  }
+
+  &__trigger {
+    display: block;
+    text-align: left;
+
+    &.is-open {
+      background-image: url(inline-icons('arrow-top-16', black));
+    }
+  }
+}
+
+.mc-dropdown--multi .mc-dropdown__trigger {
+  overflow: hidden;
+  padding-left: calc(0.75rem + var(--tag-width));
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+</style>

package/src/components/dropdown/index.js

@@ -0,0 +1,7 @@
+import MDropdown from './MDropdown.vue';
+
+MDropdown.install = function (Vue) {
+  Vue.component(MDropdown.name, MDropdown);
+};
+
+export { MDropdown };

package/src/components/icon/MIcon.vue

@@ -25,6 +25,7 @@ export default {
       viewbox: null,
       size: null,
       paths: null,
+      type: null,
     };
   },
 
@@ -79,8 +80,17 @@ export default {
         this.viewbox = selectedIcon.viewBox;
         this.size = selectedIcon.size;
         this.paths = selectedIcon.paths;
+        this.type = selectedIcon.type;
       });
     },
+    setSizeFromViewbox(viewbox) {
+      const viewboxSizes = viewbox.split(' ').filter((size) => size > 0);
+
+      return {
+        width: `${viewboxSizes[0]}px`,
+        height: `${viewboxSizes[1]}px`,
+      };
+    },
   },
 
   render: function (createElement) {
@@ -88,8 +98,14 @@ export default {
     const svgAttrs = {
       id: `MIcon-${this.name}-${this.id}`,
       viewBox: this.viewbox,
-      height: this.size,
-      width: this.size,
+      height:
+        this.type !== 'logotypes'
+          ? this.size
+          : this.setSizeFromViewbox(this.viewbox).height,
+      width:
+        this.type !== 'logotypes'
+          ? this.size
+          : this.setSizeFromViewbox(this.viewbox).width,
       fill: this.color,
       'aria-hidden': 'true',
     };

package/src/components/index.js

@@ -12,6 +12,7 @@ export { MCard } from './card';
 export { MCheckbox, MCheckboxGroup } from './checkbox';
 export { MDataTable, MDataTableHeader } from './datatable';
 export { MField } from './field';
+export { MDropdown } from './dropdown';
 export { MFileUploader } from './fileuploader';
 export { MFlag } from './flag';
 export { MHero } from './hero';

package/src/components/phonenumber/MPhoneNumber.vue

@@ -146,7 +146,7 @@ export default {
   }),
   computed: {
     hasValue() {
-      return this.phoneNumber !== '';
+      return this.value !== '';
     },
     placeholder() {
       return getExampleNumber(
@@ -162,6 +162,9 @@ export default {
   },
   created() {
     this.init();
+    if (!this.hasValue) {
+      this.selectedCountry = this.countries[0];
+    }
   },
   methods: {
     init() {
@@ -185,7 +188,6 @@ export default {
               : this.selectedCountry;
         }
       } else {
-        this.selectedCountry = this.countries[0];
         this.phoneNumber = '';
       }
     },

package/src/components/quantityselector/MQuantitySelector.vue

@@ -16,6 +16,7 @@
 
     <MTextInputField
       :id="id"
+      ref="input"
       :value="currentValue"
       type="number"
       class="mc-quantity-selector__input"
@@ -29,6 +30,7 @@
       :disabled="disabled"
       role="spinbutton"
       @input="handle"
+      @focus="onFocus"
       @keypress="integerOnly && formatValue($event)"
       v-on="$listeners"
     />
@@ -151,6 +153,9 @@ export default {
         e.preventDefault();
       }
     },
+    onFocus(e) {
+      e.target.select();
+    },
   },
 };
 </script>

package/src/components/tabs/MTab.vue

@@ -18,6 +18,8 @@
           v-if="tab.router"
           v-bind="tab.attrs"
           :to="tab.to"
+          class="mc-tabs__link"
+          :class="setLinkClass(tab)"
           active-class="mc-tabs__link--selected"
         >
           {{ tab.text }}
@@ -87,7 +89,7 @@ export default {
     },
     activeIndex: {
       type: Number,
-      default: 0,
+      default: null,
     },
   },
 
@@ -162,15 +164,6 @@ export default {
       tab.classList.add('mc-tabs__link--selected');
       tab.setAttribute('aria-selected', 'true');
     },
-    setTabState(tab) {
-      this.tablist.querySelectorAll('.mc-tabs__link').forEach((el) => {
-        el.classList.remove('mc-tabs__link--selected');
-        el.setAttribute('aria-selected', 'false');
-      });
-
-      tab.classList.add('mc-tabs__link--selected');
-      tab.setAttribute('aria-selected', 'true');
-    },
     getTabFromIndex: function (index) {
       if (
         this.tablist &&
@@ -185,7 +178,7 @@ export default {
         return;
       }
 
-      if (!this.activeIndex) {
+      if (typeof this.activeIndex !== 'number') {
         this.localActiveIndex = index;
       }
 

package/src/index.js

@@ -31,6 +31,7 @@ export { MCard } from './components/card/';
 export { MCheckbox, MCheckboxGroup } from './components/checkbox/';
 export { MDataTable, MDataTableHeader } from './components/datatable';
 export { MField } from './components/field';
+export { MDropdown } from './components/dropdown';
 export { MFileUploader } from './components/fileuploader';
 export { MFlag } from './components/flag';
 export { MHero } from './components/hero';