@mozaic-ds/vue 0.14.3-beta.0 → 0.16.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mozaic-ds/vue",
-  "version": "0.14.3-beta.0",
+  "version": "0.16.0",
   "scripts": {
     "serve": "vue-cli-service serve",
     "build": "vue-cli-service build ./src/index.js",
@@ -13,15 +13,15 @@
     "postinstall": "node postinstall.js"
   },
   "dependencies": {
-    "@mozaic-ds/css-dev-tools": "^1.26.0",
-    "@mozaic-ds/icons": "^1.26.0",
-    "@mozaic-ds/styles": "^1.26.1",
+    "@mozaic-ds/css-dev-tools": "^1.27.1",
+    "@mozaic-ds/icons": "^1.28.0",
+    "@mozaic-ds/styles": "^1.28.0",
     "@mozaic-ds/web-fonts": "^1.22.0",
     "core-js": "^3.18.3",
-    "libphonenumber-js": "^1.9.37",
+    "libphonenumber-js": "1.9.50",
     "postcss-scss": "^4.0.1",
     "vue": "^2.6.14",
-    "vue-country-flag": "^2.2.0"
+    "vue-country-flag": "2.3.2"
   },
   "devDependencies": {
     "@babel/core": "^7.15.8",

package/postinstall.js

@@ -1,6 +1,3 @@
 const package = require('./package.json');
 
 console.log(`${package.name} installed`);
-console.log(
-  "MTextInput change coming on the 01/12/2021. All input events will be available and will receive the event object. The blur event won't receive the value anymore."
-);

package/src/components/card/MCard.vue

@@ -4,7 +4,7 @@
       class="mc-card__visual"
       :class="imageratio ? `mc-card__visual--${imageratio}` : ''"
     >
-      <img :src="imgSrc" :alt="imgAlt" class="mc-card__img" />
+      <img :src="imgSrc" :loading="lazy ? 'lazy' : 'eager'" :alt="imgAlt" class="mc-card__img" />
     </figure>
     <article class="mc-card__content">
       <component :is="titleTag" class="mc-card__title">
@@ -36,6 +36,10 @@ export default {
       type: String,
       required: true,
     },
+    lazy: {
+      type: Boolean,
+      default: false
+    },
     outlined: {
       type: Boolean,
       default: false,

package/src/components/checkbox/MCheckbox.vue

@@ -1,14 +1,16 @@
 <template>
   <div v-if="hasLabel" class="mc-checkbox">
     <input
+      v-bind="$attrs"
       :id="id"
       ref="input"
       :name="name"
       type="checkbox"
       class="mc-checkbox__input"
-      :disabled="disabled"
       :class="setInputClasses"
       :checked="checked"
+      :required="required"
+      :disabled="disabled"
       @change="$emit('change', $event.target.checked)"
     />
     <label :for="id" class="mc-checkbox__label">
@@ -20,14 +22,16 @@
 
   <input
     v-else
+    v-bind="$attrs"
     :id="id"
     ref="input"
     :name="name"
     type="checkbox"
     class="mc-checkbox__input"
-    :disabled="disabled"
     :class="setInputClasses"
     :checked="checked"
+    :required="required"
+    :disabled="disabled"
     @change="$emit('change', $event.target.checked)"
   />
 </template>
@@ -36,6 +40,8 @@
 export default {
   name: 'MCheckbox',
 
+  inheritAttrs: false,
+
   model: {
     prop: 'checked',
     event: 'change',
@@ -62,6 +68,10 @@ export default {
       type: Boolean,
       default: false,
     },
+    required: {
+      type: Boolean,
+      default: false,
+    },
     indeterminate: {
       type: Boolean,
       default: false,

package/src/components/checkbox/MCheckboxGroup.vue

@@ -0,0 +1,149 @@
+<template>
+  <fieldset class="mc-field mc-field--group">
+    <legend class="mc-field__legend">
+      {{ legend }}
+      <span
+        v-if="requirementText"
+        class="mc-field__requirement"
+        aria-hidden="true"
+      >
+        {{ requirementText }}
+      </span>
+    </legend>
+    <span v-if="helpId && helpText" :id="helpId" class="mc-field__help">
+      {{ helpText }}
+    </span>
+    <div
+      class="mc-field__container"
+      :class="{ 'mc-field__container--inline': inline }"
+    >
+      <m-checkbox
+        v-for="option in options"
+        v-bind="option"
+        :key="option.id ? option.id : option.value"
+        class="mc-field__item"
+        :checked="value ? value.includes(option.value) : undefined"
+        @change="(v) => onChange(v, option.value)"
+      />
+    </div>
+    <span
+      v-if="errorId && errorMessage"
+      :id="errorId"
+      class="mc-field__error-message"
+    >
+      {{ errorMessage }}
+    </span>
+  </fieldset>
+</template>
+
+<script>
+import MCheckbox from './MCheckbox.vue';
+
+export default {
+  name: 'MCheckboxGroup',
+
+  components: {
+    MCheckbox,
+  },
+
+  model: {
+    event: 'change',
+  },
+
+  props: {
+    /**
+     * Label of the whole group of checkboxes
+     */
+    legend: {
+      type: String,
+      required: true,
+    },
+    /**
+     * Property used to manage the values checked by v-model
+     * (Do not use directly)
+     * @ignore
+     */
+    value: {
+      type: Array,
+      default: undefined,
+    },
+    /**
+     * An array of objects to provide all the values and attributes related to a checkbox
+     */
+    options: {
+      type: Array,
+      default: undefined,
+    },
+    /**
+     * Text that indicate if one or more elements of the group are mandatory
+     */
+    requirementText: {
+      type: String,
+      default: undefined,
+    },
+    /**
+     * Text providing relevant or additional information to ensure that the user understands the purpose of the selection.
+     */
+    helpText: {
+      type: String,
+      default: undefined,
+    },
+    /**
+     * For accessibility reasons a `helpId` must be defined when using a `helpText`
+     */
+    // TODO: See if it is possible to automatically generate this id in the @next version
+    helpId: {
+      type: String,
+      default: undefined,
+    },
+    /**
+     * Text below the group of checkboxes explaining the reason for the error following the user selection.
+     */
+    errorMessage: {
+      type: String,
+      default: undefined,
+    },
+    /**
+     * For accessibility reasons a `errorId` must be defined when using a `errorMessage`
+     */
+    // TODO: See if it is possible to automatically generate this id in the @next version
+    errorId: {
+      type: String,
+      default: undefined,
+    },
+    /**
+     * Position the inputs horizontally
+     */
+    inline: {
+      type: Boolean,
+      default: false,
+    },
+  },
+
+  data() {
+    return {
+      checkboxesValues: [],
+    };
+  },
+
+  methods: {
+    onChange(isChecked, value) {
+      let values = this.checkboxesValues;
+
+      if (isChecked && !values.includes(value)) {
+        values.push(value);
+      } else {
+        values = values.filter((key) => key !== value);
+      }
+
+      this.$emit('change', values);
+      this.checkboxesValues = values;
+    },
+  },
+};
+</script>
+
+<style lang="scss">
+@import 'settings-tools/_all-settings';
+@import 'components/_c.fields';
+</style>

package/src/components/checkbox/index.js

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

package/src/components/datatable/MDataTable.vue

@@ -348,6 +348,8 @@ export default {
 
       if (this.total) {
         size = Math.ceil(this.total / this.pagerOptions.value);
+      } else {
+        size = parseInt(this.pagingOptions.index);
       }
 
       return size;
@@ -474,8 +476,6 @@ export default {
       }
 
       try {
-        this.total = Array.isArray(this.source) ? this.source.length : this.total;
-        
         const options = buildOptions(
           this.pagingOptions.enabled,
           this.getPageValue,

package/src/components/index.js

@@ -8,7 +8,7 @@ export { MBadge } from './badge';
 export { MBreadcrumb } from './breadcrumb';
 export { MButton } from './button';
 export { MCard } from './card';
-export { MCheckbox } from './checkbox';
+export { MCheckbox, MCheckboxGroup } from './checkbox';
 export { MDataTable, MDataTableHeader } from './datatable';
 export { MField } from './field';
 export { MFileUploader } from './fileuploader';
@@ -17,11 +17,13 @@ export { MHero } from './hero';
 export { MIcon } from './icon';
 export { MLayer } from './layer';
 export { MLink } from './link';
+export { MLoader } from './loader';
 export { MModal } from './modal';
 export { MNotification } from './notification';
 export { MOptionButton } from './optionbutton';
 export { MOptionCard } from './optioncard';
 export { MOptionGroup } from './optiongroup';
+export { MOverlay, MOverlayLoader } from './overlay';
 export { MPagination } from './pagination';
 export { MPasswordInput } from './passwordinput';
 export { MPhoneNumber } from './phonenumber';

package/src/components/loader/MLoader.vue

@@ -0,0 +1,84 @@
+<template>
+  <div class="mc-loader" :class="setClasses">
+    <span class="mc-loader__spinner">
+      <svg
+        class="mc-loader__icon"
+        xmlns="http://www.w3.org/2000/svg"
+        :viewBox="viewBox"
+      >
+        <circle class="mc-loader__path" cx="50%" cy="50%" :r="pathR" />
+      </svg>
+    </span>
+
+    <span v-if="text" class="mc-loader__text">{{ text }}</span>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'MLoader',
+
+  props: {
+    /**
+     * Loader size
+     * @values s, m , l
+     */
+    size: {
+      type: String,
+      default: 'm',
+      validator: (value) => ['s', 'm', 'l'].includes(value),
+    },
+
+    /**
+     * Loader theme
+     * @values dark, light, primary
+     */
+    theme: {
+      type: String,
+      default: 'primary',
+      validator: (value) => ['dark', 'light', 'primary'].includes(value),
+    },
+
+    /**
+     * Loader text - when using the loader inside an overlay
+     */
+    text: {
+      type: String,
+      default: undefined,
+    },
+  },
+
+  computed: {
+    setClasses() {
+      const classes = [];
+
+      if (this.size && this.size !== 'm') {
+        classes.push(`mc-loader--${this.size}`);
+      }
+
+      if (this.theme && this.theme !== 'primary') {
+        classes.push(`mc-loader--${this.theme}`);
+      }
+
+      return classes;
+    },
+
+    viewBox() {
+      return this.size === 'm'
+        ? '0 0 32 32'
+        : this.size === 's'
+        ? '0 0 24 24'
+        : '0 0 64 64';
+    },
+
+    pathR() {
+      return this.size === 'm' ? 9 : this.size === 's' ? 6 : 19;
+    },
+  },
+};
+</script>
+
+<style lang="scss">
+@import 'settings-tools/all-settings';
+@import 'components/c.loader';
+</style>

package/src/components/loader/index.js

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

package/src/components/modal/MModal.vue

@@ -97,17 +97,20 @@ export default {
   },
 
   watch: {
-    open(isOpen) {
-      this.$nextTick(() => {
-        if (isOpen) {
-          this.trapFocus();
-          this.setFocusOnModal();
-          this.setOverflow();
-          this.$emit('modal-opened');
-        } else {
-          this.$emit('modal-closed');
-        }
-      });
+    open: {
+      immediate: true,
+      handler: function (isOpen) {
+        this.$nextTick(() => {
+          if (isOpen) {
+            this.trapFocus();
+            this.setFocusOnModal();
+            this.setOverflow();
+            this.$emit('modal-opened');
+          } else {
+            this.$emit('modal-closed');
+          }
+        });
+      },
     },
   },
 

package/src/components/optioncard/MOptionCard.vue

@@ -102,6 +102,7 @@ export default {
 @import 'settings-tools/all-settings';
 @import 'components/c.option-card';
 
+/* stylelint-disable */
 // temporary fix
 .mc-option-card {
   $parent: get-parent-selector(&);
@@ -125,4 +126,5 @@ export default {
     }
   }
 }
+/* stylelint-enable */
 </style>

package/src/components/overlay/MOverlay.vue

@@ -0,0 +1,28 @@
+<template>
+  <div class="mc-overlay" :class="{ 'is-visible': isVisible }">
+    <!-- @slot Use this slot to insert a centered content inside the overlay -->
+    <slot />
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'MOverlay',
+
+  props: {
+    /**
+     * Define if the overlay is visible or not
+     * @values false, true
+     */
+    isVisible: {
+      type: Boolean,
+      default: false,
+    },
+  },
+};
+</script>
+
+<style lang="scss">
+@import 'settings-tools/all-settings';
+@import 'components/c.overlay';
+</style>

package/src/components/overlay/MOverlayLoader.vue

@@ -0,0 +1,43 @@
+<template>
+  <div>
+    <div class="mc-overlay-loader" :class="{ 'is-visible': isVisible }">
+      <MLoader size="l" theme="light" :text="text" />
+    </div>
+  </div>
+</template>
+
+<script>
+import MLoader from '../loader/MLoader.vue';
+
+export default {
+  name: 'MOverlayLoader',
+
+  components: {
+    MLoader,
+  },
+
+  props: {
+    /**
+     * Define if the overlay is visible or not
+     * @values false, true
+     */
+    isVisible: {
+      type: Boolean,
+      default: false,
+    },
+
+    /**
+     * Loader text
+     */
+    text: {
+      type: String,
+      default: undefined,
+    },
+  },
+};
+</script>
+
+<style lang="scss">
+@import 'settings-tools/all-settings';
+@import 'components/c.overlay';
+</style>

package/src/components/overlay/index.js

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

package/src/components/phonenumber/MPhoneNumber.vue

@@ -358,10 +358,14 @@ export default {
 
 .mc-phone-number {
   span.flag {
+    /* stylelint-disable */
     background-repeat: no-repeat;
-    padding-right: 1rem;
-    transform: scale(0.5, 1) !important;
-    height: 1rem;
+    transform: scale(0.46153846153);
+    // For information:
+    // The value 0.46153846153 is obtained by the calculation 24/52
+    // 24 being the width in pixel desired by the design of the component
+    // 52 being the width in pixel defined by the country-flag component
+    /* stylelint-enable */
   }
 
   &__indicator,

package/src/components/quantityselector/MQuantitySelector.vue

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

package/src/components/radio/MRadioGroup.vue

@@ -23,6 +23,7 @@
         :key="option.id ? option.id : option.value"
         :is-invalid="isInvalid"
         :label="option.label"
+        :name="option.name"
         root-class="mc-field__item"
         :checked="value === option.value"
         @change="(v) => (v ? $emit('input', option.value) : null)"
@@ -77,10 +78,12 @@ export default {
       type: Boolean,
       default: false,
     },
+
     value: {
       type: String,
       default: null,
     },
+
     options: {
       type: Array,
       default() {

package/src/components/select/MSelect.vue

@@ -22,6 +22,7 @@
         {{ option.text }}
       </slot>
     </option>
+    <slot name="options" />
   </select>
 </template>
 

package/src/components/tabs/MTab.vue

@@ -16,6 +16,7 @@
         <component
           :is="tab.href ? (tab.disabled ? 'span' : 'a') : 'button'"
           :id="tab.id"
+          ref="tab"
           :href="tab.href ? (!tab.disabled ? tab.href : null) : null"
           :type="!tab.href ? 'button' : null"
           :disabled="!tab.href && tab.disabled ? true : null"

package/src/components/textarea/MTextArea.vue

@@ -7,7 +7,7 @@
     ]"
     :aria-invalid="isInvalid"
     :value="value"
-    @input="$emit('input', $event.target.value)"
+    v-on="inputListeners"
   />
 </template>
 
@@ -33,6 +33,17 @@ export default {
       default: false,
     },
   },
+  computed: {
+    inputListeners: function () {
+      // see => https://vuejs.org/v2/guide/components-custom-events.html#Binding-Native-Events-to-Components
+      var vm = this;
+      return Object.assign({}, this.$listeners, {
+        input: function (event) {
+          vm.$emit('input', event.target.value);
+        },
+      });
+    },
+  },
 };
 </script>
 

package/src/index.js

@@ -27,7 +27,7 @@ export { MBadge } from './components/badge/';
 export { MBreadcrumb } from './components/breadcrumb/';
 export { MButton } from './components/button/';
 export { MCard } from './components/card/';
-export { MCheckbox } from './components/checkbox/';
+export { MCheckbox, MCheckboxGroup } from './components/checkbox/';
 export { MDataTable, MDataTableHeader } from './components/datatable';
 export { MField } from './components/field';
 export { MFileUploader } from './components/fileuploader';
@@ -36,11 +36,13 @@ export { MHero } from './components/hero';
 export { MIcon } from './components/icon';
 export { MLayer } from './components/layer';
 export { MLink } from './components/link';
+export { MLoader } from './components/loader';
 export { MModal } from './components/modal';
 export { MNotification } from './components/notification';
 export { MOptionButton } from './components/optionbutton';
 export { MOptionCard } from './components/optioncard';
 export { MOptionGroup } from './components/optiongroup';
+export { MOverlay, MOverlayLoader } from './components/overlay';
 export { MPagination } from './components/pagination';
 export { MPasswordInput } from './components/passwordinput';
 export { MPhoneNumber } from './components/phonenumber';