@mozaic-ds/vue 0.14.2 → 0.15.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mozaic-ds/vue",
-  "version": "0.14.2",
+  "version": "0.15.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.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",

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;

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

package/types/index.d.ts

@@ -14,6 +14,7 @@ declare module '@mozaic-ds/vue' {
   const MButton: VueConstructor;
   const MCard: VueConstructor;
   const MCheckbox: VueConstructor;
+  const MCheckboxGroup: VueConstructor;
   const MField: VueConstructor;
   const MFileUploader: VueConstructor;
   const MFlag: VueConstructor;
@@ -21,11 +22,14 @@ declare module '@mozaic-ds/vue' {
   const MIcon: VueConstructor;
   const MLayer: VueConstructor;
   const MLink: VueConstructor;
+  const MLoader: VueConstructor;
   const MModal: VueConstructor;
   const MNotification: VueConstructor;
   const MOptionButton: VueConstructor;
   const MOptionCard: VueConstructor;
   const MOptionGroup: VueConstructor;
+  const MOverlay: VueConstructor;
+  const MOverlayLoader: VueConstructor;
   const MPagination: VueConstructor;
   const MPasswordInput: VueConstructor;
   const MPhoneNumber: VueConstructor;
@@ -55,6 +59,7 @@ declare module '@mozaic-ds/vue' {
     MButton,
     MCard,
     MCheckbox,
+    MCheckboxGroup,
     MField,
     MFileUploader,
     MFlag,
@@ -62,11 +67,14 @@ declare module '@mozaic-ds/vue' {
     MIcon,
     MLayer,
     MLink,
+    MLoader,
     MModal,
     MNotification,
     MOptionButton,
     MOptionCard,
     MOptionGroup,
+    MOverlay,
+    MOverlayLoader,
     MPagination,
     MPasswordInput,
     MPhoneNumber,