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

package/postinstall.js

@@ -1,3 +0,0 @@
-const package = require('./package.json');
-
-console.log(`${package.name} installed`);

package/src/components/accordion/MAccordion.vue

@@ -1,128 +0,0 @@
-<template>
-  <div class="mc-accordion" :class="{ 'mc-accordion--s': size === 's' }">
-    <input
-      :id="id"
-      ref="checkbox"
-      type="checkbox"
-      class="mc-accordion__trigger"
-      :disabled="disabled"
-      :checked="open"
-      @change="$emit('update:open', $event.target.checked)"
-    />
-    <div
-      :class="['mc-accordion__header', setHeaderClasses]"
-      :aria-expanded="open"
-      @click="$refs.checkbox.click()"
-    >
-      <slot name="beforeLabel" />
-      <label
-        :for="id"
-        :aria-expanded="open"
-        :class="['mc-accordion__header__label', setLabelClasses]"
-        @click.stop
-      >
-        <m-icon v-if="icon" :name="icon" class="mc-accordion__icon" />
-        {{ label }}
-      </label>
-      <slot name="afterLabel" />
-    </div>
-    <div class="mc-accordion__content">
-      <slot />
-    </div>
-  </div>
-</template>
-
-<script>
-import MIcon from '../icon/MIcon.vue';
-
-export default {
-  name: 'MAccordion',
-
-  components: {
-    MIcon,
-  },
-
-  model: {
-    prop: 'open',
-    event: 'change',
-  },
-
-  props: {
-    id: {
-      type: String,
-      required: true,
-    },
-    label: {
-      type: String,
-      required: true,
-    },
-    open: {
-      type: Boolean,
-      default: false,
-    },
-    size: {
-      type: String,
-      default: null,
-      validator: (value) => ['s', 'm'].includes(value),
-    },
-    disabled: {
-      type: Boolean,
-      default: false,
-    },
-    padding: {
-      type: Boolean,
-      default: true,
-    },
-    icon: {
-      type: String,
-      default: null,
-    },
-  },
-
-  computed: {
-    setHeaderClasses() {
-      return {
-        'mc-accordion__label': true,
-        'mc-accordion__label--icon': this.icon,
-        'mc-accordion__label--no-padding': !this.padding,
-      };
-    },
-
-    setLabelClasses() {
-      return {
-        'mc-accordion__header__label--with-before-slot':
-          this.$slots.beforeLabel,
-        'mc-accordion__header__label--with-after-slot': this.$slots.afterLabel,
-      };
-    },
-  },
-};
-</script>
-
-<style lang="scss">
-@import 'settings-tools/_all-settings';
-@import 'components/c.accordion';
-
-.mc-accordion {
-  &__header {
-    display: flex;
-    align-items: center;
-
-    &__label {
-      align-items: center;
-      display: flex;
-      cursor: pointer;
-      gap: $mu050;
-      white-space: nowrap;
-
-      &--with-before-slot {
-        padding-left: $mu100;
-      }
-
-      &--with-after-slot {
-        padding-right: $mu100;
-      }
-    }
-  }
-}
-</style>

package/src/components/accordion/index.js

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

package/src/components/autocomplete/MAutocomplete.vue

@@ -1,198 +0,0 @@
-<template>
-  <div
-    ref="autocomplete"
-    class="mc-autocomplete"
-    :class="{ 'mc-autocomplete--multi': multiple }"
-    :style="tagStyle"
-    @keyup.esc="isOpen = true"
-  >
-    <m-tag
-      v-if="multiple && selectedItems().length > 0"
-      id="tag"
-      type="removable"
-      :label="selectedItems().length.toString() + ' ' + labelTag"
-      class="mc-autocomplete__tag"
-      size="s"
-      @remove-tag="removeElementsFromList()"
-    />
-    <m-text-input
-      v-model="itemDisplayed"
-      :placeholder="placeholder"
-      text-input-field-class="mc-autocomplete__trigger"
-      icon-position="left"
-      icon="DisplaySearch48"
-      autocomplete="off"
-      :style="{ width: boxWidth + 'px' }"
-      @input="filerList"
-      @click="isOpen = true"
-    />
-    <m-list-box
-      :open="isOpen"
-      :items="sort ? orderedItems() : itemListForDropdown"
-      :multiple="multiple"
-      :empty-search-label="emptySearchLabel"
-      :style="{ width: boxWidth + 'px' }"
-      @update:itemSelected="updateList"
-      @close-list-box="isOpen = false"
-    >
-      <template #item="{ item }">
-        <slot name="item" :item="item"> </slot>
-      </template>
-    </m-list-box>
-  </div>
-</template>
-
-<script>
-import MTextInput from '../textinput/MTextInput.vue';
-import MTag from '../tags/MTag.vue';
-import MListBox from '../listbox/MListBox.vue';
-
-export default {
-  name: 'MAutocomplete',
-
-  components: { MListBox, MTag, MTextInput },
-
-  props: {
-    multiple: {
-      type: Boolean,
-      default: false,
-    },
-    placeholder: {
-      type: String,
-      default: '',
-    },
-    items: {
-      type: Array,
-      required: true,
-      default: () => [],
-    },
-    filter: {
-      type: Function,
-      default: null,
-    },
-    emptySearchLabel: {
-      type: String,
-      default: 'No item matching your criteria found',
-    },
-    sort: {
-      type: Boolean,
-      default: false,
-    },
-    labelTag: {
-      type: String,
-      default: '',
-    },
-    open: {
-      type: Boolean,
-      default: false,
-    },
-  },
-  data() {
-    return {
-      itemListForDropdown: this.$props.items,
-      selected: this.$props.items,
-      itemDisplayed: '',
-      isOpen: this.$props.open,
-      tagWidth: '0px',
-      boxWidth: '288px',
-    };
-  },
-  computed: {
-    tagStyle() {
-      return {
-        '--tag-width': this.tagWidth,
-      };
-    },
-    boxStyle() {
-      return {
-        '--box-width': this.boxWidth,
-      };
-    },
-  },
-  mounted() {
-    this.selectedItems();
-    this.tagWidthCalcul();
-    this.boxWidthCalcul();
-  },
-  methods: {
-    tagWidthCalcul() {
-      this.$nextTick(() => {
-        this.tagWidth =
-          document && document.querySelector('.mc-autocomplete__tag')
-            ? document.querySelector('.mc-autocomplete__tag').clientWidth + 'px'
-            : '0px';
-      });
-    },
-    selectedItems() {
-      return this.selected.filter((item) => {
-        return item.selected;
-      });
-    },
-    orderedItems() {
-      this.itemListForDropdown.sort((a, b) => {
-        if (a.selected === b.selected) {
-          return a.id - b.id;
-        } else if (a.selected < b.selected) {
-          return 1;
-        } else {
-          return -1;
-        }
-      });
-    },
-    updateList(list) {
-      if (!this.$props.multiple && list) {
-        this.itemDisplayed = list[0].text;
-      } else {
-        this.isOpen = true;
-        this.selectedItems();
-      }
-      this.itemListForDropdown.forEach((elem) => {
-        if (elem.id === list.id) {
-          elem.selected = false;
-        }
-      });
-      this.tagWidthCalcul();
-      this.$emit(
-        'update:modelValue',
-        this.$props.multiple ? this.selectedItems().value : list
-      );
-    },
-    removeElementsFromList() {
-      this.itemListForDropdown.forEach((elem) => {
-        elem.selected = false;
-      });
-      this.selectedItems();
-      this.tagWidthCalcul();
-      this.$emit('list-removed');
-    },
-    filerList(value) {
-      if (value.length && this.$props.filter) {
-        this.$props.filter(value);
-      } else if (value.length) {
-        this.itemListForDropdown = this.itemListForDropdown.filter((item) =>
-          item.text.toUpperCase().includes(value.toUpperCase())
-        );
-      } else {
-        this.itemListForDropdown = this.$props.items;
-      }
-      this.$emit('list-filtered', this.itemListForDropdown);
-    },
-    boxWidthCalcul() {
-      this.$nextTick(() => {
-        this.boxWidth = document.querySelector('.mc-autocomplete').clientWidth;
-        console.log(this.boxWidth);
-      });
-      return;
-    },
-  },
-};
-</script>
-
-<style lang="scss">
-@import 'settings-tools/_all-settings';
-@import 'components/_c.autocomplete';
-
-.mc-autocomplete--multi .mc-autocomplete__trigger {
-  padding-left: calc(2.9375rem + var(--tag-width));
-}
-</style>

package/src/components/autocomplete/index.js

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

package/src/components/badge/index.js

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

package/src/components/breadcrumb/MBreadcrumb.vue

@@ -1,73 +0,0 @@
-<template>
-  <nav
-    class="mc-breadcrumb"
-    :class="{
-      'mc-breadcrumb--dark': dark,
-      'mc-breadcrumb--responsive': responsive,
-    }"
-    aria-label="Breadcrumb"
-  >
-    <ul class="mc-breadcrumb__container">
-      <li
-        v-for="(item, index) in items"
-        :key="`breadcrumb-${index}`"
-        class="mc-breadcrumb__item"
-        :class="{ 'is-active': item.isActive }"
-      >
-        <m-link
-          :href="item.href"
-          :class="[
-            setLinkClasses,
-            { 'mc-breadcrumb__current': index === items.length - 1 },
-          ]"
-          :aria-current="index != items.length - 1 ? null : 'page'"
-          size="s"
-          :router="item.router"
-          @click="$emit('link-clicked', item)"
-        >
-          {{ item.text }}
-        </m-link>
-      </li>
-    </ul>
-  </nav>
-</template>
-
-<script>
-import MLink from '../link/MLink.vue';
-
-export default {
-  name: 'MBreadcrumb',
-
-  components: {
-    MLink,
-  },
-
-  props: {
-    items: {
-      type: Array,
-      required: true,
-    },
-    dark: {
-      type: Boolean,
-      default: false,
-    },
-    responsive: {
-      type: Boolean,
-      default: false,
-    },
-  },
-
-  computed: {
-    setLinkClasses() {
-      return {
-        'mc-link--light': this.dark,
-      };
-    },
-  },
-};
-</script>
-
-<style lang="scss">
-@import 'settings-tools/_all-settings';
-@import 'components/_c.breadcrumb';
-</style>

package/src/components/breadcrumb/index.js

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

package/src/components/button/index.js

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

package/src/components/card/MCard.vue

@@ -1,78 +0,0 @@
-<template>
-  <div class="mc-card" :class="{ 'mc-card--bordered': outlined }">
-    <figure
-      class="mc-card__visual"
-      :class="imageratio ? `mc-card__visual--${imageratio}` : ''"
-    >
-      <img :src="imgSrc" :loading="lazy ? 'lazy' : 'eager'" :alt="imgAlt" class="mc-card__img" />
-      <slot name="image" />
-    </figure>
-    <article class="mc-card__content">
-      <component :is="titleTag" class="mc-card__title">
-        {{ title }}
-      </component>
-      <component :is="subtitleTag" v-if="subtitle" class="mc-card__subtitle">
-        {{ subtitle }}
-      </component>
-      <div class="mc-card__body">
-        <slot />
-      </div>
-      <footer v-if="$slots.footer" class="mc-card__footer">
-        <slot name="footer" />
-      </footer>
-    </article>
-  </div>
-</template>
-
-<script>
-export default {
-  name: 'MCard',
-
-  props: {
-    title: {
-      type: String,
-      required: true,
-    },
-    imgSrc: {
-      type: String,
-      required: true,
-    },
-    lazy: {
-      type: Boolean,
-      default: false
-    },
-    outlined: {
-      type: Boolean,
-      default: false,
-    },
-    titleTag: {
-      type: String,
-      default: 'h1',
-      validator: (value) =>
-        ['h1', 'h2', 'h3', 'h4', 'h5', 'h6'].includes(value),
-    },
-    imgAlt: {
-      type: String,
-      default: '',
-    },
-    subtitle: {
-      type: String,
-      default: null,
-    },
-    subtitleTag: {
-      type: String,
-      default: 'h2',
-    },
-    imageratio: {
-      type: String,
-      default: null,
-      validator: (value) => ['1x1', '4x3', '16x9'].includes(value),
-    },
-  },
-};
-</script>
-
-<style lang="scss">
-@import 'settings-tools/_all-settings';
-@import 'components/_c.card';
-</style>

package/src/components/card/index.js

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

package/src/components/checkbox/MCheckboxGroup.vue

@@ -1,155 +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-checkbox
-        v-for="(option, index) in options"
-        v-bind="option"
-        :key="option.id ? option.id : option.value"
-        class="mc-field__item"
-        :checked="value ? value.includes(option.value) : undefined"
-        @change="(v) => onChange(v, option.value)"
-      >
-        <template #label>
-          <slot :name="`label${index + 1}`">
-            {{ option.label }}
-          </slot>
-        </template>
-      </m-checkbox>
-    </div>
-    <span
-      v-if="errorId && errorMessage"
-      :id="errorId"
-      class="mc-field__error-message"
-    >
-      {{ errorMessage }}
-    </span>
-  </fieldset>
-</template>
-
-<script>
-import MCheckbox from './MCheckbox.vue';
-
-export default {
-  name: 'MCheckboxGroup',
-
-  components: {
-    MCheckbox,
-  },
-
-  model: {
-    event: 'change',
-  },
-
-  props: {
-    /**
-     * Label of the whole group of checkboxes
-     */
-    legend: {
-      type: String,
-      required: true,
-    },
-    /**
-     * Property used to manage the values checked by v-model
-     * (Do not use directly)
-     * @ignore
-     */
-    value: {
-      type: Array,
-      default: undefined,
-    },
-    /**
-     * An array of objects to provide all the values and attributes related to a checkbox
-     */
-    options: {
-      type: Array,
-      default: undefined,
-    },
-    /**
-     * Text that indicate if one or more elements of the group are mandatory
-     */
-    requirementText: {
-      type: String,
-      default: undefined,
-    },
-    /**
-     * Text providing relevant or additional information to ensure that the user understands the purpose of the selection.
-     */
-    helpText: {
-      type: String,
-      default: undefined,
-    },
-    /**
-     * For accessibility reasons a `helpId` must be defined when using a `helpText`
-     */
-    // TODO: See if it is possible to automatically generate this id in the @next version
-    helpId: {
-      type: String,
-      default: undefined,
-    },
-    /**
-     * Text below the group of checkboxes explaining the reason for the error following the user selection.
-     */
-    errorMessage: {
-      type: String,
-      default: undefined,
-    },
-    /**
-     * For accessibility reasons a `errorId` must be defined when using a `errorMessage`
-     */
-    // TODO: See if it is possible to automatically generate this id in the @next version
-    errorId: {
-      type: String,
-      default: undefined,
-    },
-    /**
-     * Position the inputs horizontally
-     */
-    inline: {
-      type: Boolean,
-      default: false,
-    },
-  },
-
-  data() {
-    return {
-      checkboxesValues: [],
-    };
-  },
-
-  methods: {
-    onChange(isChecked, value) {
-      let values = this.checkboxesValues;
-
-      if (isChecked && !values.includes(value)) {
-        values.push(value);
-      } else {
-        values = values.filter((key) => key !== value);
-      }
-
-      this.$emit('change', values);
-      this.checkboxesValues = values;
-    },
-  },
-};
-</script>
-
-<style lang="scss">
-@import 'settings-tools/_all-settings';
-@import 'components/_c.fields';
-</style>

package/src/components/checkbox/index.js

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