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

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 };

package/src/components/ratingstars/MStarsInput.vue

@@ -1,118 +0,0 @@
-<template>
-  <div :class="['mc-stars-input', setClasses]">
-    <input
-      :id="name + '0'"
-      type="radio"
-      :name="required ? name + '-unselected' : name"
-      value="0"
-      class="mc-stars-input__radio"
-      checked
-      :aria-label="unselectedText"
-    />
-
-    <template v-for="(rateId, index) in ratingValue">
-      <input
-        :id="name + rateId"
-        :key="'ratingInput-' + rateId"
-        type="radio"
-        :name="name"
-        :value="rateId"
-        class="mc-stars-input__radio"
-        :required="required"
-      />
-
-      <label
-        :key="'ratingLabel-' + rateId"
-        :for="name + rateId"
-        :title="ratingLabels[index]"
-        class="mc-stars-input__label"
-      >
-        <span class="mc-stars-input__text">
-          {{ ratingLabels[index] }}
-        </span>
-      </label>
-    </template>
-  </div>
-</template>
-
-<script>
-import {
-  responsiveModifiers,
-  responsiveModifierValidators,
-} from '../../utils/mozaicClasses';
-
-const RATINGVALUE = 5;
-
-export default {
-  name: 'MStarsInput',
-
-  inheritAttrs: false,
-
-  props: {
-    unselectedText: {
-      type: String,
-      default: 'No opinion given',
-    },
-    name: {
-      type: String,
-      default: 'rating',
-    },
-    size: {
-      type: String,
-      default: 'm',
-      validator: (value) =>
-        responsiveModifierValidators(value, ['s', 'm', 'l', 'xl']),
-    },
-    ratingLabels: {
-      type: Array,
-      default() {
-        return ['Very bad', 'Bad', 'Medium', 'Good', 'Excellent'];
-      },
-      validator: function (value) {
-        return (
-          value.length === RATINGVALUE &&
-          value.every((item) => typeof item === 'string')
-        );
-      },
-    },
-    required: {
-      type: Boolean,
-      default: false,
-    },
-  },
-
-  data() {
-    return {
-      id: null,
-      ratingValue: RATINGVALUE,
-    };
-  },
-
-  computed: {
-    setClasses() {
-      const classes = [];
-
-      if (this.size) {
-        responsiveModifiers('mc-stars-input', this.size, classes);
-      }
-
-      return classes;
-    },
-  },
-
-  created() {
-    this.id = this._uid;
-  },
-
-  methods: {
-    incIndex(index) {
-      return index++;
-    },
-  },
-};
-</script>
-
-<style lang="scss">
-@import 'settings-tools/_all-settings';
-@import 'components/_c.stars-input';
-</style>

package/src/components/ratingstars/MStarsResult.vue

@@ -1,89 +0,0 @@
-<template>
-  <div :class="['mc-stars-result', setClasses]">
-    <span class="mc-stars-result__visual" />
-    <span class="mc-stars-result__text">
-      {{ scoreLabel }}: {{ closestScore }}/{{ ratingValue }}
-    </span>
-  </div>
-</template>
-
-<script>
-import {
-  responsiveModifiers,
-  responsiveModifierValidators,
-} from '../../utils/mozaicClasses';
-
-const RATINGVALUE = 5;
-
-export default {
-  name: 'MStarsResult',
-
-  props: {
-    score: {
-      type: Number,
-      default: 0,
-      validator: (value) => value > 0 && value <= 5,
-    },
-    scoreLabel: {
-      type: String,
-      default: 'Global score',
-    },
-    size: {
-      type: String,
-      default: 'm',
-      validator: (value) =>
-        responsiveModifierValidators(value, ['s', 'm', 'l', 'xl']),
-    },
-  },
-
-  data() {
-    return {
-      id: null,
-      ratingValue: RATINGVALUE,
-    };
-  },
-  computed: {
-    authorizedValues() {
-      const authorizedValue = [];
-      for (let i = 0; i <= RATINGVALUE; i += 0.5) {
-        authorizedValue.push(i);
-      }
-      return authorizedValue;
-    },
-    closestScore() {
-      if (this.score > 0 && this.score <= this.ratingValue) {
-        return this.authorizedValues.reduce((a, b) => {
-          return Math.abs(b - this.score) < Math.abs(a - this.score) ? b : a;
-        });
-      } else {
-        return 0;
-      }
-    },
-    setClasses() {
-      const classes = [];
-
-      if (this.size) {
-        responsiveModifiers('mc-stars-result', this.size, classes);
-      }
-
-      if (this.closestScore) {
-        const classNote = `score-${
-          (this.closestScore * 100) / this.ratingValue
-        }`;
-        responsiveModifiers('mc-stars-result', classNote, classes);
-      }
-
-      return classes;
-    },
-  },
-
-  created() {
-    this.id = this._uid;
-  },
-};
-</script>
-
-<style lang="scss">
-@import 'settings-tools/_all-settings';
-@import 'components/_c.stars-result';
-</style>

package/src/components/ratingstars/index.js

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

package/src/components/select/index.js

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

package/src/components/stepper/MStepper.vue

@@ -1,70 +0,0 @@
-<template>
-  <nav class='mc-stepper' :class="{ 'mc-stepper--compact': compact, 'mc-stepper--shrinked': steps.length > 3}"
-       :aria-label='accessibilityLabels.stepperDescription'>
-    <ol class='mc-stepper__list'>
-      <li
-        v-for='(step, idx) in steps'
-        :key='`mc-stepper__item-${idx}`'
-        class='mc-stepper__item'
-        :class="{
-          'mc-stepper__item--validated': isStepValidated(idx),
-          'mc-stepper__item--current': step.isCurrent,
-        }"
-        :aria-current="step.isCurrent ? 'step' : false"
-        :aria-label='stepDescription(step,idx)'
-        :style='`--steps: ${ steps.length }; --current: ${ idx +1 };`'
-        @click="isStepValidated(idx) && $emit('step-changed', step)"
-      >
-        <div class='mc-stepper__indicator' aria-hidden='true'>
-          <m-icon v-if='isStepValidated(idx)' name='NotificationAvailable16' class='mc-stepper__icon' />
-          <span v-else-if='step.isCurrent'>{{ idx + 1 }}</span>
-        </div>
-        <div class='mc-stepper__detail'>
-          <span class='mc-stepper__title'>{{ idx + 1 }} / {{ steps.length }}</span>
-          <span class='mc-stepper__label'>{{ step.label }}</span>
-        </div>
-      </li>
-    </ol>
-  </nav>
-</template>
-
-<script>
-import MIcon from '../icon/MIcon.vue';
-
-export default {
-  name: 'MStepper',
-  components: {
-    MIcon
-  },
-  props: {
-    steps: {
-      type: Array,
-      required: true
-    },
-    compact: {
-      type: Boolean,
-      default: false
-    },
-    accessibilityLabels: {
-      type: Object,
-      required: true
-    }
-  },
-  methods: {
-    isStepValidated(index) {
-      return index < this.steps.findIndex(step => step.isCurrent);
-    },
-    stepDescription(step, index) {
-      return '#' + (index + 1) + ' ' + step.label + ', ' + this.stepStateLabel(step,index);
-    },
-    stepStateLabel(step, index) {
-      return this.isStepValidated(index) ? this.accessibilityLabels.validatedLabel : step.isCurrent ? this.accessibilityLabels.currentLabel : this.accessibilityLabels.disabledLabel;
-    }
-  }
-};
-</script>
-
-<style lang='scss' scoped>
-@import 'settings-tools/_all-settings';
-@import 'components/_c.stepper';
-</style>

package/src/components/stepper/index.js

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