@mozaic-ds/vue 0.12.1 → 0.14.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mozaic-ds/vue",
-  "version": "0.12.1",
+  "version": "0.14.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/icons": "^1.20.0",
-    "@mozaic-ds/styles": "^1.23.0",
+    "@mozaic-ds/css-dev-tools": "^1.24.0",
+    "@mozaic-ds/icons": "^1.25.0",
+    "@mozaic-ds/styles": "^1.25.0",
     "@mozaic-ds/web-fonts": "^1.22.0",
     "core-js": "^3.18.3",
     "libphonenumber-js": "^1.9.37",
@@ -26,8 +26,8 @@
   "devDependencies": {
     "@babel/core": "^7.15.8",
     "@babel/eslint-parser": "^7.15.8",
-    "@vue/cli-plugin-babel": "^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>
 
@@ -125,10 +109,11 @@ export default {
     align-items: center;
 
     &__label {
-      display: flex;
       align-items: center;
-      white-space: nowrap;
+      display: flex;
       cursor: pointer;
+      gap: $mu050;
+      white-space: nowrap;
 
       &--with-before-slot {
         padding-left: $mu100;

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,11 @@ export { MLayer } from './layer';
 export { MLink } from './link';
 export { MModal } from './modal';
 export { MNotification } from './notification';
+export { MOptionButton } from './optionbutton';
+export { MOptionCard } from './optioncard';
+export { MOptionGroup } from './optiongroup';
 export { MPagination } from './pagination';
+export { MPasswordInput } from './passwordinput';
 export { MPhoneNumber } from './phonenumber';
 export { MProgress } from './progressbar';
 export { MQuantitySelector } from './quantityselector';

package/src/components/optionbutton/MOptionButton.vue

@@ -0,0 +1,67 @@
+<template>
+  <div
+    class="mc-option-button"
+    :class="{ 'mc-option-button--full': fullWidth }"
+  >
+    <input
+      :id="id"
+      type="radio"
+      class="mc-option-button__input"
+      :name="name"
+      :checked="checked"
+      :disabled="disabled"
+      v-bind="inputAttrs"
+      @change="$emit('change', $event.target.checked)"
+    />
+    <label :for="id" class="mc-option-button__label">
+      {{ label }}
+    </label>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'MOptionButton',
+
+  model: {
+    prop: 'checked',
+    event: 'change',
+  },
+
+  props: {
+    id: {
+      type: String,
+      required: true,
+    },
+    label: {
+      type: String,
+      required: true,
+    },
+    name: {
+      type: String,
+      default: null,
+    },
+    checked: {
+      type: Boolean,
+      default: false,
+    },
+    disabled: {
+      type: Boolean,
+      default: false,
+    },
+    fullWidth: {
+      type: Boolean,
+      default: false,
+    },
+    inputAttrs: {
+      type: Object,
+      default: () => ({}),
+    },
+  },
+};
+</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/optioncard/MOptionCard.vue

@@ -0,0 +1,104 @@
+<template>
+  <div class="mc-option-card" :class="setClasses">
+    <input
+      :id="id"
+      :type="setType"
+      class="mc-option-card__input"
+      :class="setInputClasses"
+      :name="name"
+      :required="required"
+      :checked="checked"
+      v-bind="inputAttrs"
+      @change="$emit('change', $event.target.checked)"
+    />
+    <label :for="id" class="mc-option-card__label">
+      <span class="mc-option-card__label-text">{{ label }}</span>
+    </label>
+    <div class="mc-option-card__content">
+      <slot />
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'MOptionCard',
+
+  model: {
+    prop: 'checked',
+    event: 'change',
+  },
+
+  props: {
+    id: {
+      type: String,
+      required: true,
+    },
+    type: {
+      type: String,
+      default: 'radio',
+      validator: (value) => ['radio', 'checkbox'].includes(value),
+    },
+    label: {
+      type: String,
+      required: true,
+    },
+    name: {
+      type: String,
+      default: null,
+    },
+    checked: {
+      type: Boolean,
+      default: false,
+    },
+    required: {
+      type: Boolean,
+      default: false,
+    },
+    index: {
+      type: Number,
+      default: 1,
+    },
+    centered: {
+      type: Boolean,
+      default: false,
+    },
+    small: {
+      type: Boolean,
+      default: false,
+    },
+    noPadding: {
+      type: Boolean,
+      default: false,
+    },
+    inputAttrs: {
+      type: Object,
+      default: () => ({}),
+    },
+  },
+
+  computed: {
+    setType() {
+      return this.type === 'checkbox' ? 'checkbox' : 'radio';
+    },
+    setClasses() {
+      return {
+        'mc-option-card--centered': this.centered,
+        'mc-option-card--no-padding': this.noPadding,
+        'mc-option-card--small': this.small,
+      };
+    },
+    setInputClasses() {
+      return {
+        'mc-checkbox__input': this.type === 'checkbox',
+        'mc-radio__input': this.type === 'radio',
+      };
+    },
+  },
+};
+</script>
+
+<style lang="scss">
+@import 'settings-tools/all-settings';
+@import 'components/c.option-card';
+</style>

package/src/components/optioncard/index.js

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

package/src/components/optiongroup/MOptionGroup.vue

@@ -0,0 +1,18 @@
+<template>
+  <component :is="htmlTag" class="mc-option-group">
+    {{ label }}
+  </component>
+</template>
+
+<script>
+export default {
+  name: 'MOptionGroup',
+
+  props: {
+    htmlTag: {
+      type: String,
+      default: 'div',
+    },
+  },
+};
+</script>

package/src/components/optiongroup/index.js

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

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,