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

package/src/components/checkbox/MCheckboxGroup.vue

@@ -1,163 +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"
-        :disabled="disabled"
-        :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,
-    },
-    /**
-     * Disabled
-     */
-    disabled: {
-      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 };

package/src/components/container/MContainer.vue

@@ -1,33 +0,0 @@
-<template>
-  <component
-    :is="htmlTag"
-    class="ml-container"
-    :class="{ 'ml-container--fluid': fluid }"
-  >
-    <slot />
-  </component>
-</template>
-
-<script>
-export default {
-  name: 'MContainer',
-
-  props: {
-    fluid: {
-      type: Boolean,
-      default: false,
-    },
-    htmlTag: {
-      type: String,
-      default: 'div',
-    },
-  },
-};
-</script>
-
-<style lang="scss">
-@import 'settings-tools/all-settings';
-@import 'layouts/l.container';
-@import 'utilities/u.margin';
-@import 'utilities/u.padding';
-</style>

package/src/components/container/index.js

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