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

package/src/components/ratingstars/MStarsInput.vue

@@ -1,119 +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"
-        @click="$emit('star-clicked', index + 1)"
-      />
-
-      <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,111 +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)"
-      >
-        <a v-if="step.href && isStepValidated(idx)" :href="step.href" class="mc-stepper__link">
-          <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>
-        </a>
-        <template v-else>
-          <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>
-        </template>
-      </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,204 +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.router}`"
-          v-if="tab.router"
-          v-bind="tab.attrs"
-          :to="tab.to"
-          class="mc-tabs__element"
-          :class="setActiveClass(tab)"
-          active-class="mc-tabs__element--selected"
-        >
-          <span class="mc-tabs__text">{{ tab.text }}</span>
-        </component>
-        <component
-          :is="tab.href ? (tab.disabled ? 'span' : 'a') : 'button'"
-          v-else
-          :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__element"
-          role="tab"
-          :aria-selected="tab.active ? 'true' : 'false'"
-          :class="setActiveClass(tab)"
-          @click="
-            manageTabs(
-              $event.target,
-              $event,
-              Object.assign({ index: index }, tab)
-            )
-          "
-        >
-          <span class="mc-tabs__text">{{ tab.text }}</span>
-        </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__element');
-            this.manageTabs(firstTab);
-          }
-        }
-      }
-    });
-  },
-
-  methods: {
-    setActiveClass: function (tab) {
-      const tabClasses = [];
-
-      if (tab.active) {
-        tabClasses.push('mc-tabs__element--selected');
-      }
-
-      if (tab.disabled) {
-        tabClasses.push('mc-tabs__element--disabled');
-      }
-
-      return tabClasses;
-    },
-    manageTabs: function (el, e, tab) {
-      if (tab && tab.disabled) {
-        return;
-      }
-      if (e) {
-        this.$emit('tab-clicked', e.currentTarget, tab);
-      }
-
-      this.tablist.querySelectorAll('.mc-tabs__element').forEach((el) => {
-        el.classList.remove('mc-tabs__element--selected');
-        el.setAttribute('aria-selected', 'false');
-      });
-
-      el.classList.add('mc-tabs__element--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 };