@mozaic-ds/vue 1.0.0-rc.3 → 2.1.0

package/src/components/phonenumber/MPhoneNumber.vue

@@ -1,398 +0,0 @@
-<template>
-  <div
-    class="mc-phone-number"
-    :class="[
-      { 'mc-phone-number--focused': isCountriesListOpened },
-      cssFieldElementClass,
-    ]"
-  >
-    <div
-      v-if="isCountriesListOpened"
-      class="mc-phone-number__overlay"
-      @click="toggleCountriesList"
-    />
-    <div class="mc-phone-number__dropdown" @keydown="initKeyboardNav">
-      <button
-        id="dropdown_country"
-        type="button"
-        aria-haspopup="listbox"
-        aria-labelledby="dropdown_country"
-        class="mc-phone-number__button"
-        :aria-expanded="isCountriesListOpened"
-        @click="toggleCountriesList"
-      >
-        <country-flag
-          v-if="!withoutFlags"
-          class="flag"
-          :country="selectedCountry.shortName"
-          size="small"
-        />
-        <span class="mc-phone-number__indicator">{{
-          selectedCountry.isd
-        }}</span>
-      </button>
-      <ul
-        v-show="isCountriesListOpened"
-        id="phone_number_list"
-        ref="countriesList"
-        tabindex="-1"
-        role="listbox"
-        aria-labelledby="phone_number_list"
-        class="mc-phone-number__list"
-        :aria-activedescendant="selectedCountry.isd"
-      >
-        <li
-          v-for="country in countries"
-          :key="country.isd"
-          role="option"
-          class="mc-phone-number__item"
-          :class="{
-            'mc-phone-number__item--focused':
-              country.isd === selectedCountry.isd,
-          }"
-          :aria-selected="country.isd === selectedCountry.isd"
-          @click="onChangeCountry(country)"
-          @keyup.enter="onChangeCountry(country)"
-        >
-          <country-flag
-            v-if="!withoutFlags"
-            class="flag"
-            :country="country.shortName"
-            size="small"
-          />
-          <span class="mc-phone-number__country">{{ country.name }}</span>
-          &nbsp;
-          <span>{{ country.isd }}</span>
-        </li>
-      </ul>
-    </div>
-    <input
-      :id="id"
-      type="tel"
-      class="mc-phone-number__input mc-text-input mc-text-input--m mc-field__input"
-      name="phone-number-input"
-      :value="phoneNumber"
-      :placeholder="placeholder"
-      :maxlength="maxlength"
-      spellcheck="false"
-      @blur="onChangePhoneNumber"
-      @focus="(event) => (formatOnBlur ? cleanFormat(event) : null)"
-      @keyup="onKeyPressPhoneNumber"
-      @keydown.backspace="
-        (event) => (formatOnBlur ? null : backspaceFunction(event))
-      "
-      v-on="$listeners"
-    />
-  </div>
-</template>
-
-<script>
-import CountryFlag from 'vue-country-flag';
-
-import {
-  parsePhoneNumber,
-  formatIncompletePhoneNumber,
-  AsYouType,
-} from 'libphonenumber-js';
-import { getExampleNumber } from 'libphonenumber-js/max';
-import examples from 'libphonenumber-js/examples.mobile.json';
-
-export default {
-  name: 'MPhoneNumber',
-  components: {
-    CountryFlag,
-  },
-  inject: {
-    cssFieldElementClass: {
-      default: '',
-    },
-  },
-  props: {
-    countries: {
-      type: Array,
-      default: () => [
-        {
-          isd: '+33',
-          name: 'France',
-          shortName: 'FR',
-        },
-        {
-          isd: '+39',
-          name: 'Italia',
-          shortName: 'IT',
-        },
-      ],
-    },
-    value: {
-      type: [String, Number],
-      default: '',
-    },
-    id: {
-      type: String,
-      default: null,
-    },
-    maxlength: {
-      type: Number,
-      default: 25,
-    },
-    withoutFlags: {
-      type: Boolean,
-      default: false,
-    },
-    formatOnBlur: {
-      type: Boolean,
-      default: false,
-    },
-  },
-  data: () => ({
-    isCountriesListOpened: false,
-    selectedCountry: undefined,
-    phoneNumber: undefined,
-  }),
-  computed: {
-    hasValue() {
-      return this.value !== '';
-    },
-    placeholder() {
-      return getExampleNumber(
-        this.selectedCountry.shortName,
-        examples
-      ).formatNational();
-    },
-  },
-  watch: {
-    value() {
-      this.init();
-    },
-  },
-  created() {
-    this.init();
-    if (!this.hasValue) {
-      this.selectedCountry = this.countries[0];
-    }
-  },
-  methods: {
-    init() {
-      if (this.hasValue) {
-        try {
-          const parsedValue = parsePhoneNumber(
-            this.value,
-            this.countries[0].shortName
-          );
-          this.phoneNumber = parsedValue.formatNational();
-          this.selectedCountry =
-            this.countries.find(
-              (country) => country.shortName === parsedValue.country
-            ) || this.selectedCountry;
-        } catch (error) {
-          this.phoneNumber = this.value;
-        } finally {
-          this.selectedCountry =
-            this.selectedCountry === undefined
-              ? this.countries[0]
-              : this.selectedCountry;
-        }
-      } else {
-        this.phoneNumber = '';
-      }
-    },
-    initKeyboardNav(event) {
-      switch (event.keyCode) {
-        case 40: // ARROW DOWN
-        case 38: {
-          // ARROW UP
-          if (event.view && event.view.event) {
-            event.view.event.preventDefault();
-          }
-
-          if (!this.isCountriesListOpened) {
-            this.openCountriesList();
-          }
-
-          const tmpIndex = this.countries.findIndex(
-            (country) => country.isd === this.selectedCountry.isd
-          );
-          let index = event.keyCode === 40 ? tmpIndex + 1 : tmpIndex - 1;
-
-          if (index === -1 || index >= this.countries.length) {
-            index = index === -1 ? this.countries.length - 1 : 0;
-          }
-
-          this.selectedCountry = this.countries[index];
-          break;
-        }
-        case 13: // ENTER
-          this.isCountriesListOpened
-            ? this.onChangeCountry(this.selectedCountry)
-            : this.openCountriesList();
-          break;
-        case 27: // ESC
-          this.closeCountriesList();
-          break;
-      }
-    },
-
-    backspaceFunction(event) {
-      const caretPosition = event.target.selectionStart;
-      const char = event.target.value.charAt(event.target.selectionStart - 1);
-      if (char === ' ' || char === ')' || char === '-') {
-        event.target.value =
-          event.target.value.slice(0, event.target.selectionStart - 1) +
-          event.target.value.slice(event.target.selectionStart);
-        event.target.selectionStart = caretPosition - 1;
-        event.target.selectionEnd = caretPosition - 1;
-      }
-    },
-
-    onKeyPressPhoneNumber(event) {
-      if (this.formatOnBlur) {
-        const phoneNumber = event ? event.target.value : this.phoneNumber;
-        try {
-          this.$emit(
-            'input',
-            parsePhoneNumber(
-              phoneNumber,
-              this.selectedCountry.shortName
-            ).formatInternational()
-          );
-        } catch (error) {
-          this.$emit(
-            'input',
-            formatIncompletePhoneNumber(
-              phoneNumber,
-              this.selectedCountry.shortName
-            )
-          );
-        }
-      } else {
-        let caretPosition = event.target.selectionStart;
-        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;
-            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
-              )
-            );
-          }
-        }
-      }
-    },
-
-    onChangePhoneNumber(event) {
-      const phoneNumber = event ? event.target.value : this.phoneNumber;
-      try {
-        this.$emit(
-          'blur',
-          parsePhoneNumber(
-            phoneNumber,
-            this.selectedCountry.shortName
-          ).formatInternational()
-        );
-      } catch (error) {
-        this.$emit(
-          'blur',
-          formatIncompletePhoneNumber(
-            phoneNumber,
-            this.selectedCountry.shortName
-          )
-        );
-      }
-      this.phoneNumber = parsePhoneNumber(
-        phoneNumber,
-        this.selectedCountry.shortName
-      ).formatNational();
-      if (event && event.target) {
-        event.target.value = parsePhoneNumber(
-          phoneNumber,
-          this.selectedCountry.shortName
-        ).formatNational();
-      }
-    },
-    onChangeCountry(country) {
-      this.selectedCountry = country;
-      this.closeCountriesList();
-      this.$emit('change-country', country);
-      if (this.hasValue) {
-        this.onChangePhoneNumber();
-      }
-    },
-    toggleCountriesList() {
-      this.$refs.countriesList.offsetParent
-        ? this.closeCountriesList()
-        : this.openCountriesList();
-    },
-    openCountriesList() {
-      this.$emit('open-countries-list');
-      this.isCountriesListOpened = true;
-    },
-    closeCountriesList() {
-      this.$emit('close-countries-list');
-      this.isCountriesListOpened = false;
-    },
-    cleanFormat(event) {
-      this.phoneNumber = formatIncompletePhoneNumber(event.target.value);
-    },
-  },
-};
-</script>
-
-<style lang="scss">
-@import 'settings-tools/_all-settings';
-@import 'components/_c.text-input';
-@import 'components/_c.phone-number';
-
-.mc-phone-number {
-  span.flag {
-    /* stylelint-disable */
-    background-repeat: no-repeat;
-    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,
-  &__country {
-    padding-left: 1rem;
-  }
-
-  &__overlay {
-    position: fixed;
-    top: 0;
-    bottom: 0;
-    left: 0;
-    right: 0;
-    background: transparent;
-    z-index: 10;
-  }
-
-  &__dropdown {
-    z-index: 20;
-  }
-}
-</style>

package/src/components/phonenumber/index.js

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

package/src/components/progressbar/MProgress.vue

@@ -1,102 +0,0 @@
-<template>
-  <div class="mc-progressbar" :class="setClasses">
-    <div
-      ref="indicator"
-      class="mc-progressbar__indicator"
-      role="progressbar"
-      :style="`width: ${setProgressValue()}%;`"
-      :aria-valuenow="value"
-      :aria-valuemin="valueMin"
-      :aria-valuemax="valueMax"
-    >
-      &nbsp;
-    </div>
-    <div v-if="percent" class="mc-progressbar__percentage">
-      {{ setProgressValue() }}%
-    </div>
-  </div>
-</template>
-
-<script>
-export default {
-  name: 'MProgress',
-
-  props: {
-    value: {
-      type: Number,
-      default: 0,
-    },
-    size: {
-      type: String,
-      default: 'm',
-      validator: (value) => ['xs', 's', 'm'].includes(value),
-    },
-    valueMin: {
-      type: Number,
-      default: 0,
-    },
-    valueMax: {
-      type: Number,
-      default: 100,
-    },
-    branded: {
-      type: Boolean,
-      default: false,
-    },
-    percent: {
-      type: Boolean,
-      default: false,
-    },
-  },
-
-  data() {
-    return {
-      currentValue: this.value,
-    };
-  },
-
-  computed: {
-    setClasses() {
-      const classes = [
-        {
-          'mc-progressbar--branded': this.branded,
-          'mc-progressbar--percent': this.percent,
-          'mc-progressbar--half':
-            this.percent && this.currentValue >= this.valueMax / 2,
-        },
-      ];
-
-      if (this.size) {
-        classes.push(`mc-progressbar--${this.size}`);
-      }
-
-      return classes;
-    },
-  },
-
-  methods: {
-    setProgressValue() {
-      const initValue = this.value;
-
-      if (initValue > this.valueMax) {
-        /* eslint-disable no-console */
-        console.error(
-          // eslint-disable-next-line quotes
-          "You can't provide a value that is greater than the valueMax property"
-        );
-        /* eslint-enable no-console */
-        return this.currentValue;
-      }
-
-      this.currentValue = Math.round(initValue);
-
-      return this.currentValue;
-    },
-  },
-};
-</script>
-
-<style lang="scss">
-@import 'settings-tools/_all-settings';
-@import 'components/_c.progressbar';
-</style>

package/src/components/progressbar/index.js

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

package/src/components/quantityselector/index.js

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

package/src/components/radio/MRadioGroup.vue

@@ -1,111 +0,0 @@
-<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"
-        :name="option.name"
-        root-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,12 +0,0 @@
-import MRadio from './MRadio.vue';
-import MRadioGroup from './MRadioGroup.vue';
-
-MRadio.install = function (Vue) {
-  Vue.component(MRadio.name, MRadio);
-};
-
-MRadioGroup.install = function (Vue) {
-  Vue.component(MRadioGroup.name, MRadioGroup);
-};
-
-export { MRadio, MRadioGroup };