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

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

package/src/components/tabs/MTab.vue

@@ -1,184 +0,0 @@
-<template>
-  <div :class="['mc-tabs', setClasses]">
-    <ul
-      v-if="type !== 'dropdown'"
-      ref="tablist"
-      class="mc-tabs__nav"
-      role="tablist"
-      :aria-label="description"
-    >
-      <li
-        v-for="(tab, index) in tabs"
-        :key="`tab-${index}`"
-        class="mc-tabs__item"
-        role="presentation"
-      >
-        <component
-          :is="tab.href ? (tab.disabled ? 'span' : 'a') : 'button'"
-          :id="tab.id"
-          ref="tab"
-          :href="tab.href ? (!tab.disabled ? tab.href : null) : null"
-          :type="!tab.href ? 'button' : null"
-          :disabled="!tab.href && tab.disabled ? true : null"
-          class="mc-tabs__link"
-          role="tab"
-          :aria-selected="tab.active ? 'true' : 'false'"
-          :class="setActiveClass(tab)"
-          @click="
-            manageTabs(
-              $event.target,
-              $event,
-              Object.assign({ index: index }, tab)
-            )
-          "
-        >
-          {{ tab.text }}
-        </component>
-      </li>
-    </ul>
-    <m-select v-else v-bind="selectAttributes" :options="tabs" />
-  </div>
-</template>
-
-<script>
-import MSelect from '../select/MSelect.vue';
-
-export default {
-  name: 'MTab',
-
-  components: {
-    MSelect,
-  },
-
-  props: {
-    tabs: {
-      type: Array,
-      required: true,
-      default() {
-        return [];
-      },
-    },
-    type: {
-      type: String,
-      default: 'tabs',
-      validator: (value) => ['tabs', 'dropdown'].includes(value),
-    },
-    description: {
-      type: String,
-      default: 'Tabs',
-    },
-    align: {
-      type: String,
-      default: 'auto',
-      validator: (value) => ['auto', 'full', 'centered'].includes(value),
-    },
-    shadow: {
-      type: Boolean,
-      default: true,
-    },
-    selectAttributes: {
-      type: Object,
-      default: null,
-    },
-    activeIndex: {
-      type: Number,
-      default: 0,
-    },
-  },
-
-  data() {
-    return {
-      tablist: null,
-    };
-  },
-
-  computed: {
-    setClasses() {
-      const classes = [
-        {
-          'mc-tabs--full': this.align === 'full',
-          'mc-tabs--full-centered': this.align === 'centered',
-          'mc-tabs--dropdown': this.type === 'dropdown',
-          'mc-tabs--no-shadow': !this.shadow,
-        },
-      ];
-
-      return classes;
-    },
-  },
-
-  watch: {
-    activeIndex(newValue) {
-      const tab = this.getTabFromIndex(newValue);
-      if (tab && this.tabs[newValue]) {
-        this.manageTabs(tab, null, Object.assign({index: newValue}, this.tabs[newValue]));
-      }
-    }
-  },
-
-  mounted: function () {
-    this.$nextTick(() => {
-      if (this.type === 'tabs') {
-        this.tablist = this.$refs.tablist;
-
-        if (this.activeIndex) {
-          const tab = this.getTabFromIndex(this.activeIndex);
-          if (tab) {
-            this.manageTabs(tab);
-          }
-        } else {
-          const isActive = this.tabs.some((tab) =>
-              Object.prototype.hasOwnProperty.call(tab, 'active')
-          );
-          if (!isActive) {
-            const firstTab = this.tablist.querySelector('.mc-tabs__link');
-            this.manageTabs(firstTab);
-          }
-        }
-      }
-    });
-  },
-
-  methods: {
-    setActiveClass: function (tab) {
-      const tabClasses = [];
-
-      if (tab.active) {
-        tabClasses.push('mc-tabs__link--selected');
-      }
-
-      if (tab.disabled) {
-        tabClasses.push('mc-tabs__link--disabled');
-      }
-
-      return tabClasses;
-    },
-    manageTabs: function (el, e, tab) {
-      if (tab && tab.disabled) {
-        return;
-      }
-      if (e) {
-        this.$emit('tab-clicked', e.target, tab);
-      }
-
-      this.tablist.querySelectorAll('.mc-tabs__link').forEach((el) => {
-        el.classList.remove('mc-tabs__link--selected');
-        el.setAttribute('aria-selected', 'false');
-      });
-
-      el.classList.add('mc-tabs__link--selected');
-      el.setAttribute('aria-selected', 'true');
-    },
-    getTabFromIndex: function (index) {
-      if (this.tablist && this.tablist.children[index] && this.tablist.children[index].children[0]) {
-        return this.tablist.children[index].children[0];
-      }
-    },
-  },
-};
-</script>
-
-<style lang="scss">
-@import 'settings-tools/_all-settings';
-@import 'components/_c.tabs';
-</style>

package/src/components/tabs/index.js

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