@mozaic-ds/vue 1.0.0-beta.3 → 1.0.0-beta.5

package/src/components/pagination/MPagination.vue

@@ -1,162 +0,0 @@
-<template>
-  <div class="mc-pagination" :class="{ 'mc-pagination--light': light }">
-    <component
-      :is="hrefPrev ? 'a' : 'button'"
-      v-if="value > 1"
-      :type="hrefPrev ? null : 'button'"
-      :href="hrefPrev"
-      class="mc-pagination__button"
-      aria-label="Previous Page"
-      :disabled="disabled"
-      @click="previousPage(currentPage - 1)"
-    >
-      <m-icon name="ArrowArrowLeft24" class="mc-pagination__button-icon" />
-    </component>
-
-    <div v-if="!light" class="mc-pagination__field">
-      <m-select
-        :id="`selectpagination${selectId}`"
-        v-model="currentPage"
-        :options="formattedOptions"
-        :disabled="disabled"
-        class="mc-pagination__select"
-        @change="changePage(Number($event))"
-      >
-        <template #text="{ option }">
-          <slot name="text" :option="{ ...option, length }">
-            {{ option.text }}
-          </slot>
-        </template>
-      </m-select>
-    </div>
-
-    <component
-      :is="hrefNext ? 'a' : 'button'"
-      v-if="value < length"
-      :type="hrefNext ? null : 'button'"
-      :href="hrefNext"
-      class="mc-pagination__button"
-      aria-label="Next Page"
-      :disabled="disabled"
-      @click="nextPage(currentPage + 1)"
-    >
-      <m-icon name="ArrowArrowRight24" class="mc-pagination__button-icon" />
-    </component>
-  </div>
-</template>
-
-<script>
-import MIcon from '../icon/MIcon.vue';
-import MSelect from '../select/MSelect.vue';
-
-export default {
-  name: 'MPagination',
-
-  components: {
-    MIcon,
-    MSelect,
-  },
-
-  props: {
-    length: {
-      type: Number,
-      default: 0,
-    },
-    value: {
-      type: Number,
-      default: 0,
-    },
-    pageLabel: {
-      type: String,
-      default: 'sur',
-    },
-    light: {
-      type: Boolean,
-      default: false,
-    },
-    hrefPrev: {
-      type: String,
-      default: null,
-    },
-    hrefNext: {
-      type: String,
-      default: null,
-    },
-    disabled: {
-      type: Boolean,
-      default: false,
-    },
-  },
-
-  data: function () {
-    return {
-      selectId: null,
-      currentPage: Number(this.value),
-    };
-  },
-
-  computed: {
-    formattedOptions() {
-      const pageOptions = [];
-
-      for (let i = 1; i <= this.length; i++) {
-        pageOptions.push({
-          text: `${i} ${this.pageLabel} ${this.length}`,
-          value: i,
-          index: i,
-        });
-      }
-
-      if (this.currentPage > this.length) {
-        this.changePage(this.length);
-      }
-
-      return pageOptions;
-    },
-  },
-
-  watch: {
-    value: {
-      handler(newPage) {
-        this.currentPage = newPage;
-      },
-    },
-  },
-
-  created() {
-    this.selectId = this._uid;
-  },
-
-  methods: {
-    hasPreviousPageListener() {
-      return this.$listeners && this.$listeners['on-previous-page'];
-    },
-    hasNextPageListener() {
-      return this.$listeners && this.$listeners['on-next-page'];
-    },
-    changePage(newPage) {
-      this.$emit('on-update-page', newPage);
-      this.$emit('update:value',newPage);
-    },
-    previousPage(newPage) {
-      if (this.hasPreviousPageListener()) {
-        this.$emit('on-previous-page', newPage);
-      } else {
-        this.changePage(newPage);
-      }
-    },
-    nextPage(newPage) {
-      if (this.hasNextPageListener()) {
-        this.$emit('on-next-page', newPage);
-      } else {
-        this.changePage(newPage);
-      }
-    },
-  },
-};
-</script>
-
-<style lang="scss" scoped>
-@import 'settings-tools/_all-settings';
-@import 'components/_c.pagination';
-</style>

package/src/components/pagination/index.js

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

package/src/components/passwordinput/index.js

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

package/src/components/phonenumber/MPhoneNumber.vue

@@ -1,390 +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="smallField"
-      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"
-      @blur="onChangePhoneNumber"
-      @focus="(event) => (formatOnBlur ? cleanFormat(event) : null)"
-      @keyup="onKeyPressPhoneNumber"
-      @keydown.backspace="
-        (event) => (formatOnBlur ? null : backspaceFunction(event))
-      "
-    />
-  </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: '',
-    },
-    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.phoneNumber !== '';
-    },
-    placeholder() {
-      return getExampleNumber(
-        this.selectedCountry.shortName,
-        examples
-      ).formatNational();
-    },
-  },
-  watch: {
-    value() {
-      this.init();
-    },
-  },
-  created() {
-    this.init();
-  },
-  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.selectedCountry = this.countries[0];
-        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 };