@mozaic-ds/vue 0.7.1 → 0.8.2-beta.0

package/package.json

@@ -1,18 +1,21 @@
 {
   "name": "@mozaic-ds/vue",
-  "version": "0.7.1",
+  "version": "0.8.2-beta.0",
   "scripts": {
     "serve": "vue-cli-service serve",
     "build": "vue-cli-service build ./src/index.js",
     "build:bundle": "vue-cli-service build --target lib --name mozaic-vue ./src/index.js",
+    "build:bundleAdeo": "vue-cli-service build --target lib --formats umd --mode adeo --filename mozaic-vue.adeo ./src/index.js --no-clean",
     "lint": "vue-cli-service lint",
-    "prepublishOnly": "npm run-script build:bundle",
-    "publish:beta": "npm publish --access public --tag alpha"
+    "prepublishOnly": "npm run-script build:bundle && npm run-script build:bundleAdeo",
+    "publish:beta": "npm publish --access public --tag alpha",
+    "tokens:build": "mozaic-tokens-build",
+    "postinstall": "node postinstall.js"
   },
   "dependencies": {
-    "@mozaic-ds/css-dev-tools": "^1.18.0",
-    "@mozaic-ds/icons": "^1.14.0",
-    "@mozaic-ds/styles": "^1.19.0",
+    "@mozaic-ds/css-dev-tools": "^1.20.0",
+    "@mozaic-ds/icons": "^1.20.0",
+    "@mozaic-ds/styles": "^1.20.1",
     "@mozaic-ds/web-fonts": "^1.18.0",
     "core-js": "^3.18.3",
     "libphonenumber-js": "^1.9.37",
@@ -57,7 +60,8 @@
     "dist/*",
     "src/*",
     "types/*",
-    "*.d.ts"
+    "*.d.ts",
+    "postinstall.js"
   ],
   "types": "./types/index.d.ts",
   "repository": {

package/postinstall.js

@@ -0,0 +1,6 @@
+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/accordion/MAccordion.vue

@@ -8,26 +8,22 @@
       :disabled="disabled"
     />
     <div
-      v-if="$slots.beforeLabel"
-      :class="['mc-accordion__header', setLabelClasses]"
+      :class="['mc-accordion__header', setHeaderClasses]"
       :aria-expanded="checked"
-      @click.self="checked = !checked"
+      @click="onClick"
     >
       <slot name="beforeLabel" />
       <label
         :for="id"
         :aria-expanded="checked"
-        class="mc-accordion__label--with-slot"
+        :class="['mc-accordion__header__label', setLabelClasses]"
+        @click.stop
       >
         <m-icon v-if="icon" :name="icon" class="mc-accordion__icon" />
         {{ label }}
       </label>
+      <slot name="afterLabel" />
     </div>
-    <label v-else :for="id" :aria-expanded="checked" :class="setLabelClasses">
-      <m-icon v-if="icon" :name="icon" class="mc-accordion__icon" />
-      {{ label }}
-    </label>
-
     <div class="mc-accordion__content">
       <slot />
     </div>
@@ -44,8 +40,6 @@ export default {
     MIcon,
   },
 
-  inheritAttrs: false,
-
   props: {
     id: {
       type: String,
@@ -85,19 +79,38 @@ export default {
   },
 
   computed: {
-    setLabelClasses() {
+    setHeaderClasses() {
       return {
         'mc-accordion__label': true,
         'mc-accordion__label--icon': this.icon,
         'mc-accordion__label--no-padding': !this.padding,
       };
     },
+
+    setLabelClasses() {
+      return {
+        'mc-accordion__header__label--with-before-slot':
+          this.$slots.beforeLabel,
+        'mc-accordion__header__label--with-after-slot': this.$slots.afterLabel,
+      };
+    },
   },
 
   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>
@@ -110,10 +123,21 @@ export default {
   &__header {
     display: flex;
     align-items: center;
-  }
 
-  &__label--with-slot {
-    padding-left: $mu100;
+    &__label {
+      display: flex;
+      align-items: center;
+      white-space: nowrap;
+      cursor: pointer;
+
+      &--with-before-slot {
+        padding-left: $mu100;
+      }
+
+      &--with-after-slot {
+        padding-right: $mu100;
+      }
+    }
   }
 }
 </style>

package/src/components/checkbox/MCheckbox.vue

@@ -1,5 +1,5 @@
 <template>
-  <div v-if="label" class="mc-checkbox">
+  <div v-if="hasLabel" class="mc-checkbox">
     <input
       :id="id"
       ref="input"
@@ -12,7 +12,9 @@
       @change="$emit('change', $event.target.checked)"
     />
     <label :for="id" class="mc-checkbox__label">
-      {{ label }}
+      <slot name="label">
+        {{ label }}
+      </slot>
     </label>
   </div>
 
@@ -71,6 +73,10 @@ export default {
   },
 
   computed: {
+    hasLabel() {
+      return this.label != null || this.$slots.label != null;
+    },
+
     setInputClasses() {
       return {
         'is-invalid': this.isInvalid,

package/src/components/datatable/MDataTable.vue

@@ -72,6 +72,13 @@
           @change="onPageSizeChanged"
         />
       </div>
+      <div
+        v-if="pagingOptions.displayTotal"
+        class="mc-data-table__footer__display-total-item"
+      >
+        <span class="strong">{{ getTotalStringCurrentCount }}</span> /
+        <span class="strong">{{ total }}</span>
+      </div>
       <div class="mc-data-table__footer__pagination">
         <m-pagination
           :disabled="loading"
@@ -327,6 +334,18 @@ export default {
         ? this.pagingOptions.index
         : this.getPagingSize;
     },
+
+    getTotalStringCurrentCount() {
+      const { skip, take } = buildOptions(
+        this.pagingOptions.enabled,
+        this.getPageValue,
+        this.getPagingIndex,
+        this.getPagingSize,
+        this.getSortHeader
+      );
+      const on = skip + take;
+      return `${skip + 1} - ${on >= this.total ? this.total : on}`;
+    },
   },
 
   watch: {
@@ -672,6 +691,16 @@ $local-config: (
       }
     }
 
+    &__display-total-item {
+      width: auto;
+      min-width: 150px;
+      padding: 0.5rem 2.25rem;
+      font-size: 0.875rem;
+      .strong {
+        font-weight: bold;
+      }
+    }
+
     &__pagination {
       text-align: right;
       width: 100%;

package/src/components/index.js

@@ -23,7 +23,7 @@ export { MPagination } from './pagination';
 export { MPhoneNumber } from './phonenumber';
 export { MProgress } from './progressbar';
 export { MQuantitySelector } from './quantityselector';
-export { MRadio } from './radio';
+export { MRadio, MRadioGroup } from './radio';
 export { MStarsInput, MStarsResult } from './ratingstars';
 export { MSelect } from './select';
 export { MStepper } from './stepper';

package/src/components/modal/MModal.vue

@@ -5,7 +5,7 @@
       class="mc-modal"
       tabindex="-1"
       role="dialog"
-      aria-labelledby="modalTitle"
+      aria-labelledby="modal_title"
       :aria-hidden="!open"
     >
       <div
@@ -16,7 +16,7 @@
         <header class="mc-modal__header">
           <component
             :is="modalTitleTag"
-            id="modalTitle"
+            id="modal_title"
             class="mc-modal__title"
           >
             {{ modalTitle }}

package/src/components/radio/MRadioGroup.vue

@@ -0,0 +1,108 @@
+<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-radio
+        v-for="option in options"
+        :id="option.id ? option.id : option.value"
+        :key="option.id ? option.id : option.value"
+        :is-invalid="isInvalid"
+        :label="option.label"
+        class="mc-field__item"
+        :checked="value === option.value"
+        @change="(v) => (v ? $emit('input', option.value) : null)"
+      />
+    </div>
+    <span v-if="isInvalid" :id="errorId" class="mc-field__error-message">
+      {{ errorMessage }}
+    </span>
+  </fieldset>
+</template>
+
+<script>
+import MRadio from './MRadio.vue';
+
+export default {
+  name: 'MRadioGroup',
+
+  components: {
+    MRadio,
+  },
+
+  props: {
+    legend: {
+      type: String,
+      required: true,
+    },
+    requirementText: {
+      type: String,
+      default: null,
+    },
+    helpId: {
+      type: String,
+      default: null,
+    },
+    helpText: {
+      type: String,
+      default: null,
+    },
+    errorId: {
+      type: String,
+      default: null,
+    },
+    errorMessage: {
+      type: String,
+      default: null,
+    },
+    isInvalid: {
+      type: Boolean,
+      default: false,
+    },
+    inline: {
+      type: Boolean,
+      default: false,
+    },
+    value: {
+      type: String,
+      default: null,
+    },
+    options: {
+      type: Array,
+      default() {
+        return [];
+      },
+      validator(options) {
+        return options.every(
+          (o) =>
+            'id' in o &&
+            typeof o.id == 'string' &&
+            'label' in o &&
+            typeof o.label == 'string' &&
+            'value' in o &&
+            typeof o.value == 'string'
+        );
+      },
+    },
+  },
+};
+</script>
+
+<style lang="scss">
+@import 'settings-tools/_all-settings';
+@import 'components/_c.fields';
+</style>

package/src/components/radio/index.js

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

package/src/index.js

@@ -42,7 +42,7 @@ export { MPagination } from './components/pagination';
 export { MPhoneNumber } from './components/phonenumber';
 export { MProgress } from './components/progressbar';
 export { MQuantitySelector } from './components/quantityselector';
-export { MRadio } from './components/radio';
+export { MRadio, MRadioGroup } from './components/radio';
 export { MStarsInput, MStarsResult } from './components/ratingstars';
 export { MSelect } from './components/select';
 export { MStepper } from './components/stepper';