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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mozaic-ds/vue",
-  "version": "0.23.0",
+  "version": "0.24.0-beta.0",
   "description": "Vue.js implementation of Mozaic Design System",
   "author": "Adeo - Mozaic Design System",
   "scripts": {
@@ -27,29 +27,29 @@
     "@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,6 +1,5 @@
 <template>
   <div
-    ref="autocomplete"
     v-click-outside="onClickOutside"
     class="mc-autocomplete"
     :class="{ 'mc-autocomplete--multi': multiple }"
@@ -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',

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/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/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/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';

package/types/index.d.ts

@@ -16,6 +16,7 @@ declare module '@mozaic-ds/vue' {
   const MCard: VueConstructor;
   const MCheckbox: VueConstructor;
   const MCheckboxGroup: VueConstructor;
+  const MDropdown: VueConstructor;
   const MField: VueConstructor;
   const MFileUploader: VueConstructor;
   const MFlag: VueConstructor;
@@ -64,6 +65,7 @@ declare module '@mozaic-ds/vue' {
     MCard,
     MCheckbox,
     MCheckboxGroup,
+    MDropdown,
     MField,
     MFileUploader,
     MFlag,