@mozaic-ds/vue 0.11.2-beta.0 → 0.13.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mozaic-ds/vue",
-  "version": "0.11.2-beta.0",
+  "version": "0.13.0",
   "scripts": {
     "serve": "vue-cli-service serve",
     "build": "vue-cli-service build ./src/index.js",
@@ -13,9 +13,9 @@
     "postinstall": "node postinstall.js"
   },
   "dependencies": {
-    "@mozaic-ds/css-dev-tools": "^1.20.0",
+    "@mozaic-ds/css-dev-tools": "^1.24.0",
     "@mozaic-ds/icons": "^1.20.0",
-    "@mozaic-ds/styles": "^1.23.0",
+    "@mozaic-ds/styles": "^1.24.1",
     "@mozaic-ds/web-fonts": "^1.22.0",
     "core-js": "^3.18.3",
     "libphonenumber-js": "^1.9.37",
@@ -26,9 +26,8 @@
   "devDependencies": {
     "@babel/core": "^7.15.8",
     "@babel/eslint-parser": "^7.15.8",
-    "@vue/cli-plugin-babel": "^4.5.13",
-    "@vue/cli-plugin-eslint": "^4.5.13",
-    "@vue/cli-service": "^4.5.13",
+    "@vue/cli-plugin-babel": "^4.5.15",
+    "@vue/cli-service": "^4.5.15",
     "@vue/compiler-sfc": "^3.2.20",
     "@vue/eslint-config-prettier": "^6.0.0",
     "babel-eslint": "^10.1.0",

package/src/components/accordion/MAccordion.vue

@@ -2,20 +2,22 @@
   <div class="mc-accordion" :class="{ 'mc-accordion--s': size === 's' }">
     <input
       :id="id"
-      v-model="checked"
+      ref="checkbox"
       type="checkbox"
       class="mc-accordion__trigger"
       :disabled="disabled"
+      :checked="open"
+      @change="$emit('update:open', $event.target.checked)"
     />
     <div
       :class="['mc-accordion__header', setHeaderClasses]"
-      :aria-expanded="checked"
-      @click="onClick"
+      :aria-expanded="open"
+      @click="$refs.checkbox.click()"
     >
       <slot name="beforeLabel" />
       <label
         :for="id"
-        :aria-expanded="checked"
+        :aria-expanded="open"
         :class="['mc-accordion__header__label', setLabelClasses]"
         @click.stop
       >
@@ -40,6 +42,11 @@ export default {
     MIcon,
   },
 
+  model: {
+    prop: 'open',
+    event: 'change',
+  },
+
   props: {
     id: {
       type: String,
@@ -72,12 +79,6 @@ export default {
     },
   },
 
-  data: function () {
-    return {
-      checked: this.open,
-    };
-  },
-
   computed: {
     setHeaderClasses() {
       return {
@@ -95,23 +96,6 @@ export default {
       };
     },
   },
-
-  watch: {
-    open: function () {
-      this.checked = !this.checked;
-    },
-    checked: function () {
-      this.$emit('update:open', this.checked);
-    },
-  },
-
-  methods: {
-    onClick() {
-      if (this.disabled === false) {
-        this.checked = !this.checked;
-      }
-    },
-  },
 };
 </script>
 

package/src/components/breadcrumb/MBreadcrumb.vue

@@ -22,6 +22,7 @@
           ]"
           :aria-current="index != items.length - 1 ? null : 'page'"
           size="s"
+          :router="item.router"
           @click="$emit('link-clicked', item)"
         >
           {{ item.text }}

package/src/components/field/MField.vue

@@ -23,6 +23,9 @@
 <script>
 export default {
   name: 'MField',
+  provide: {
+    cssFieldElementClass: 'mc-field__element',
+  },
   props: {
     id: {
       type: String,

package/src/components/fileuploader/MFileUploader.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="mc-fileuploader">
+  <div class="mc-fileuploader" :class="cssFieldElementClass">
     <input
       :id="id"
       ref="fileUpload"
@@ -45,6 +45,11 @@ export default {
   components: {
     MFileResult,
   },
+  inject: {
+    cssFieldElementClass: {
+      default: '',
+    },
+  },
   inheritAttrs: false,
   props: {
     id: {

package/src/components/index.js

@@ -19,7 +19,9 @@ export { MLayer } from './layer';
 export { MLink } from './link';
 export { MModal } from './modal';
 export { MNotification } from './notification';
+export { MOptionButton } from './optionbutton';
 export { MPagination } from './pagination';
+export { MPasswordInput } from './passwordinput';
 export { MPhoneNumber } from './phonenumber';
 export { MProgress } from './progressbar';
 export { MQuantitySelector } from './quantityselector';

package/src/components/modal/MModal.vue

@@ -7,6 +7,7 @@
       role="dialog"
       aria-labelledby="modal_title"
       :aria-hidden="!open"
+      @keyup.esc="closeModal()"
     >
       <div
         class="mc-modal__dialog"
@@ -26,7 +27,6 @@
             ref="close"
             class="mc-modal__close"
             type="button"
-            @keyup.esc="closeModal()"
             @click="closeModal()"
           >
             <span class="mc-modal__close-text">
@@ -101,6 +101,7 @@ export default {
       this.$nextTick(() => {
         if (isOpen) {
           this.trapFocus();
+          this.setFocusOnModal();
           this.setOverflow();
           this.$emit('modal-opened');
         } else {
@@ -158,6 +159,12 @@ export default {
         modal.classList.add('mc-modal--overflow');
       }
     },
+
+    setFocusOnModal() {
+      const modal = this.$refs.modal;
+
+      modal.focus();
+    },
   },
 };
 </script>

package/src/components/optionbutton/MOptionButton.vue

@@ -0,0 +1,52 @@
+<template>
+  <div class="mc-option-group">
+    <template v-for="(option, index) in options">
+      <div
+        :key="index"
+        class="mc-option-button"
+        :class="{ 'mc-option-button--full': option.full }"
+      >
+        <input
+          :id="option.id"
+          type="radio"
+          class="mc-option-button__input"
+          :name="option.name"
+          :value="option.value"
+          :disabled="option.disabled"
+          :checked="checked"
+          @change="$emit('change', $event.target.checked)"
+        />
+        <label :for="option.id" class="mc-option-button__label">
+          {{ option.label }}
+        </label>
+      </div>
+    </template>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'MOptionButton',
+
+  model: {
+    prop: 'checked',
+    event: 'change',
+  },
+
+  props: {
+    options: {
+      type: Array,
+      required: true,
+    },
+    checked: {
+      type: Boolean,
+      default: false,
+    },
+  },
+};
+</script>
+
+<style lang="scss">
+@import 'settings-tools/_all-settings';
+@import 'components/c.option-button';
+</style>

package/src/components/optionbutton/index.js

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

package/src/components/passwordinput/MPasswordInput.vue

@@ -0,0 +1,96 @@
+<template>
+  <div class="mc-password-input" :class="cssFieldElementClass">
+    <input
+      :type="setType"
+      :required="required"
+      class="mc-text-input mc-password-input__control"
+      :class="setInputClasses"
+      :aria-invalid="isInvalid"
+    />
+
+    <button
+      ref="button"
+      type="button"
+      class="mc-password-input__button"
+      role="switch"
+      :aria-pressed="setAriaPressed"
+      @click="onClick"
+    >
+      {{ setButtonLabel }}
+    </button>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'MPasswordInput',
+
+  inject: {
+    cssFieldElementClass: {
+      default: '',
+    },
+  },
+
+  props: {
+    required: {
+      type: Boolean,
+      default: false,
+    },
+    value: {
+      type: [String, Number],
+      default: null,
+    },
+    isValid: {
+      type: Boolean,
+      default: false,
+    },
+    isInvalid: {
+      type: Boolean,
+      default: false,
+    },
+    buttonLabel: {
+      type: Object,
+      default: function () {
+        return { show: 'Show', hide: 'Hide' };
+      },
+    },
+  },
+
+  data: function () {
+    return {
+      isVisible: false,
+    };
+  },
+
+  computed: {
+    setType() {
+      return this.isVisible ? 'text' : 'password';
+    },
+    setInputClasses() {
+      return {
+        'is-valid': this.isValid,
+        'is-invalid': this.isInvalid,
+      };
+    },
+    setAriaPressed() {
+      return this.isVisible ? 'true' : 'false';
+    },
+    setButtonLabel() {
+      return this.isVisible ? this.buttonLabel.hide : this.buttonLabel.show;
+    },
+  },
+
+  methods: {
+    onClick() {
+      const aria = this.$refs.button.getAttribute('aria-pressed') === 'false';
+      this.isVisible = aria;
+    },
+  },
+};
+</script>
+
+<style lang="scss">
+@import 'settings-tools/_all-settings';
+@import 'components/_c.text-input';
+@import 'components/_c.password-input';
+</style>

package/src/components/passwordinput/index.js

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

package/src/components/phonenumber/MPhoneNumber.vue

@@ -1,7 +1,10 @@
 <template>
   <div
     class="mc-phone-number"
-    :class="{ 'mc-phone-number--focused': isCountriesListOpened }"
+    :class="[
+      { 'mc-phone-number--focused': isCountriesListOpened },
+      cssFieldElementClass,
+    ]"
   >
     <div
       v-if="isCountriesListOpened"
@@ -72,9 +75,11 @@
       :placeholder="placeholder"
       :maxlength="maxlength"
       @blur="onChangePhoneNumber"
-      @focus="(event) => formatOnBlur ? cleanFormat(event) : null"
+      @focus="(event) => (formatOnBlur ? cleanFormat(event) : null)"
       @keyup="onKeyPressPhoneNumber"
-      @keydown.backspace="(event) => formatOnBlur ? null : backspaceFunction(event)"
+      @keydown.backspace="
+        (event) => (formatOnBlur ? null : backspaceFunction(event))
+      "
     />
   </div>
 </template>
@@ -85,7 +90,7 @@ import CountryFlag from 'vue-country-flag';
 import {
   parsePhoneNumber,
   formatIncompletePhoneNumber,
-  AsYouType
+  AsYouType,
 } from 'libphonenumber-js';
 import { getExampleNumber } from 'libphonenumber-js/max';
 import examples from 'libphonenumber-js/examples.mobile.json';
@@ -95,6 +100,11 @@ export default {
   components: {
     CountryFlag,
   },
+  inject: {
+    cssFieldElementClass: {
+      default: '',
+    },
+  },
   props: {
     countries: {
       type: Array,
@@ -156,7 +166,10 @@ export default {
     init() {
       if (this.hasValue) {
         try {
-          const parsedValue = parsePhoneNumber(this.value, this.countries[0].shortName);
+          const parsedValue = parsePhoneNumber(
+            this.value,
+            this.countries[0].shortName
+          );
           this.phoneNumber = parsedValue.formatNational();
           this.selectedCountry =
             this.countries.find(
@@ -224,7 +237,7 @@ export default {
     },
 
     onKeyPressPhoneNumber(event) {
-      if(this.formatOnBlur){
+      if (this.formatOnBlur) {
         const phoneNumber = event ? event.target.value : this.phoneNumber;
         try {
           this.$emit(
@@ -245,21 +258,36 @@ export default {
         }
       } else {
         let caretPosition = event.target.selectionStart;
-        if ((event.keyCode >= 48 && event.keyCode <= 57) || (event.keyCode >= 96 && event.keyCode<= 105)) { 
+        if (
+          (event.keyCode >= 48 && event.keyCode <= 57) ||
+          (event.keyCode >= 96 && event.keyCode <= 105)
+        ) {
           const asYouType = new AsYouType(this.selectedCountry.shortName);
           const phone = asYouType.input(event.target.value);
           event.target.value = phone;
           this.$nextTick(() => {
             const charBefore = event.target.value.charAt(caretPosition - 1);
             const charAfter = event.target.value.charAt(caretPosition + 1);
-            caretPosition = charBefore === ' ' || charBefore === '-' ? caretPosition + 1 : caretPosition;
-            caretPosition = charAfter === '-' || charAfter === ')' ? caretPosition + 2 : caretPosition;
+            caretPosition =
+              charBefore === ' ' || charBefore === '-'
+                ? caretPosition + 1
+                : caretPosition;
+            caretPosition =
+              charAfter === '-' || charAfter === ')'
+                ? caretPosition + 2
+                : caretPosition;
             event.target.setSelectionRange(caretPosition, caretPosition);
-            });
+          });
           try {
             this.$emit('input', asYouType.input(event.target.value));
           } catch (error) {
-            this.$emit('input', formatIncompletePhoneNumber(event.target.value, this.selectedCountry.shortName));
+            this.$emit(
+              'input',
+              formatIncompletePhoneNumber(
+                event.target.value,
+                this.selectedCountry.shortName
+              )
+            );
           }
         }
       }
@@ -285,14 +313,14 @@ export default {
         );
       }
       this.phoneNumber = parsePhoneNumber(
-            phoneNumber,
-            this.selectedCountry.shortName
-          ).formatNational();
-      if(event && event.target) {
+        phoneNumber,
+        this.selectedCountry.shortName
+      ).formatNational();
+      if (event && event.target) {
         event.target.value = parsePhoneNumber(
-            phoneNumber,
-            this.selectedCountry.shortName
-          ).formatNational();
+          phoneNumber,
+          this.selectedCountry.shortName
+        ).formatNational();
       }
     },
     onChangeCountry(country) {
@@ -316,9 +344,9 @@ export default {
       this.$emit('close-countries-list');
       this.isCountriesListOpened = false;
     },
-    cleanFormat(event){
+    cleanFormat(event) {
       this.phoneNumber = formatIncompletePhoneNumber(event.target.value);
-    }
+    },
   },
 };
 </script>

package/src/components/quantityselector/MQuantitySelector.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="mc-quantity-selector">
+  <div class="mc-quantity-selector" :class="cssFieldElementClass">
     <m-button
       class="mc-quantity-selector__button-left"
       theme="bordered"
@@ -58,7 +58,11 @@ export default {
     MButton,
     MTextInputField,
   },
-
+  inject: {
+    cssFieldElementClass: {
+      default: '',
+    },
+  },
   props: {
     id: {
       type: String,

package/src/components/ratingstars/MStarsInput.vue

@@ -1,9 +1,9 @@
 <template>
   <div :class="['mc-stars-input', setClasses]">
     <input
-      id="no-rate"
+      :id="name + '0'"
       type="radio"
-      :name="name"
+      :name="required ? name + '-unselected' : name"
       value="0"
       class="mc-stars-input__radio"
       checked
@@ -18,6 +18,7 @@
         :name="name"
         :value="rateId"
         class="mc-stars-input__radio"
+        :required="required"
       />
 
       <label
@@ -74,6 +75,10 @@ export default {
         );
       },
     },
+    required: {
+      type: Boolean,
+      default: false,
+    },
   },
 
   data() {

package/src/components/select/MSelect.vue

@@ -1,11 +1,12 @@
 <template>
   <select
     :id="id"
+    ref="select"
     class="mc-select"
-    :class="setClasses"
+    :class="[setClasses, cssFieldElementClass]"
     :value="getSelectValue"
     :disabled="disabled"
-    @change="$emit('change', $event.target.value)"
+    @change="onChange($event.target.value)"
   >
     <option v-if="placeholder" value="" disabled="disabled">
       -- {{ placeholder }} --
@@ -27,6 +28,16 @@
 <script>
 export default {
   name: 'MSelect',
+  inject: {
+    cssFieldElementClass: {
+      default: '',
+    },
+  },
+
+  model: {
+    prop: 'value',
+    event: 'change',
+  },
 
   props: {
     id: {
@@ -102,6 +113,17 @@ export default {
         this.optionValue = firstOption.value;
       }
     },
+    onChange(value) {
+      const optionText = this.$refs.select
+        .querySelector(`option[value="${value}"]`)
+        .textContent.trim();
+      const optionData = {
+        text: optionText,
+        value: value,
+      };
+
+      this.$emit('change', value, optionData);
+    },
   },
 };
 </script>

package/src/components/textarea/MTextArea.vue

@@ -1,17 +1,24 @@
 <template>
   <textarea
     class="mc-textarea"
-    :class="{ 'is-valid': isValid, 'is-invalid': isInvalid }"
+    :class="[
+      { 'is-valid': isValid, 'is-invalid': isInvalid },
+      cssFieldElementClass,
+    ]"
     :aria-invalid="isInvalid"
     :value="value"
-    @change="$emit('input', $event.target.value)"
+    @input="$emit('input', $event.target.value)"
   />
 </template>
 
 <script>
 export default {
   name: 'MTextArea',
-
+  inject: {
+    cssFieldElementClass: {
+      default: '',
+    },
+  },
   props: {
     value: {
       type: String,

package/src/components/textinput/MTextInput.vue

@@ -1,12 +1,26 @@
 <template>
-  <div key="icon-input" :class="{ 'mc-left-icon-input': icon }">
-    <m-text-input-icon v-if="icon" :icon="icon" />
+  <div
+    v-if="icon"
+    key="icon-input"
+    class="mc-left-icon-input"
+    :class="cssFieldElementClass"
+  >
+    <m-text-input-icon :icon="icon" />
     <m-text-input-field
       ref="mField"
       v-bind="[$attrs, $props]"
       v-on="$listeners"
     />
   </div>
+
+  <m-text-input-field
+    v-else
+    key="input-only"
+    ref="mField"
+    v-bind="[$attrs, $props]"
+    :class="cssFieldElementClass"
+    v-on="$listeners"
+  />
 </template>
 
 <script>
@@ -21,6 +35,12 @@ export default {
     MTextInputIcon,
   },
 
+  inject: {
+    cssFieldElementClass: {
+      default: '',
+    },
+  },
+
   inheritAttrs: false,
 
   props: {

package/src/components/textinput/MTextInputField.vue

@@ -24,6 +24,7 @@ const supportedTypes = [
   'password',
   'tel',
   'text',
+  'time',
   'search',
 ];