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

package/src/components/modal/MModal.vue

@@ -1,179 +0,0 @@
-<template>
-  <div>
-    <div
-      ref="modal"
-      class="mc-modal"
-      tabindex="-1"
-      role="dialog"
-      aria-labelledby="modal_title"
-      :aria-hidden="!open"
-      @keyup.esc="closeModal()"
-    >
-      <div
-        class="mc-modal__dialog"
-        :class="{ 'is-open': open }"
-        role="document"
-      >
-        <header class="mc-modal__header">
-          <component
-            :is="modalTitleTag"
-            id="modal_title"
-            class="mc-modal__title"
-          >
-            {{ modalTitle }}
-          </component>
-          <button
-            v-if="displayCloseButton"
-            ref="close"
-            class="mc-modal__close"
-            type="button"
-            @click="closeModal()"
-          >
-            <span class="mc-modal__close-text">
-              {{ closeButtonText }}
-            </span>
-          </button>
-        </header>
-        <main ref="body" class="mc-modal__body">
-          <article ref="content" class="mc-modal__content">
-            <component :is="titleTag" v-if="title" class="mc-modal__heading">
-              {{ title }}
-            </component>
-            <div class="mt-body-m">
-              <slot />
-            </div>
-          </article>
-        </main>
-        <footer v-if="$slots.footer" class="mc-modal__footer">
-          <slot name="footer" />
-        </footer>
-      </div>
-    </div>
-    <keep-alive>
-      <div
-        class="mc-modal-overlay"
-        :class="{ 'is-visible': open }"
-        tabindex="-1"
-        role="dialog"
-      />
-    </keep-alive>
-  </div>
-</template>
-
-<script>
-export default {
-  name: 'MModal',
-
-  props: {
-    open: {
-      type: Boolean,
-      default: false,
-    },
-    modalTitle: {
-      type: String,
-      required: true,
-    },
-    modalTitleTag: {
-      type: String,
-      default: 'h2',
-    },
-    title: {
-      type: String,
-      default: null,
-    },
-    titleTag: {
-      type: String,
-      default: 'h3',
-    },
-    closeButtonText: {
-      type: String,
-      default: 'Close',
-      validator: (value) => value !== '',
-    },
-    displayCloseButton: {
-      type: Boolean,
-      default: true,
-    },
-  },
-
-  watch: {
-    open: {
-      immediate: true,
-      handler: function (isOpen) {
-        this.$nextTick(() => {
-          if (isOpen) {
-            this.trapFocus();
-            this.setFocusOnModal();
-            this.setOverflow();
-            this.$emit('modal-opened');
-          } else {
-            this.$emit('modal-closed');
-          }
-        });
-      },
-    },
-  },
-
-  methods: {
-    trapFocus: function () {
-      const modal = document.querySelector('.mc-modal');
-      const focusableElements = modal.querySelectorAll(
-        'a[href], button, input, select, textarea, [tabindex]:not([tabindex="-1"])'
-      );
-
-      const firstFocusableElement = focusableElements[0]; // get first element to be focused inside modal
-      const lastFocusableElement =
-        focusableElements[focusableElements.length - 1];
-
-      document.addEventListener('keydown', function (e) {
-        const isTabPressed = e.key === 'Tab' || e.keyCode === 9;
-
-        if (!isTabPressed) {
-          return;
-        }
-
-        if (e.shiftKey) {
-          // if shift key pressed for shift + tab combination
-          if (document.activeElement === firstFocusableElement) {
-            lastFocusableElement.focus(); // add focus for the last focusable element
-            e.preventDefault();
-          }
-        } else {
-          // if tab key is pressed
-          if (document.activeElement === lastFocusableElement) {
-            // if focused has reached to last focusable element then focus first focusable element after pressing tab
-            firstFocusableElement.focus(); // add focus for the first focusable element
-            e.preventDefault();
-          }
-        }
-      });
-    },
-
-    closeModal() {
-      this.$emit('update:open', false);
-    },
-
-    setOverflow: function () {
-      const modal = this.$refs.modal;
-      const bodyHeight = this.$refs.body.clientHeight;
-      const contentHeight = this.$refs.content.clientHeight;
-
-      if (contentHeight > bodyHeight) {
-        modal.classList.add('mc-modal--overflow');
-      }
-    },
-
-    setFocusOnModal() {
-      const modal = this.$refs.modal;
-
-      modal.focus();
-    },
-  },
-};
-</script>
-
-<style lang="scss">
-@import 'settings-tools/all-settings';
-@import 'typography/_t.bodys';
-@import 'components/_c.modal';
-</style>

package/src/components/modal/index.js

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

package/src/components/notification/MNotification.vue

@@ -1,110 +0,0 @@
-<template>
-  <div
-    class="mc-notification"
-    :class="setClasses"
-    :role="alert ? 'alert' : null"
-  >
-    <div class="mc-notification__content">
-      <component :is="titleTag" v-if="title" class="mc-notification__title">
-        {{ title }}
-      </component>
-      <div class="mc-notification__message">
-        <slot />
-      </div>
-      <m-link
-        v-if="link && linkContent"
-        class="mc-notification__link"
-        :href="link"
-      >
-        {{ linkContent }}
-      </m-link>
-      <div v-else-if="$slots.footer" class="mc-notification__footer">
-        <slot name="footer" />
-      </div>
-    </div>
-    <button
-      v-if="closable"
-      type="button"
-      class="mc-notification-closable__close"
-      title="Close"
-      @click="$emit('close')"
-    />
-  </div>
-</template>
-
-<script>
-import MLink from '../link/MLink.vue';
-
-export default {
-  name: 'MNotification',
-
-  components: {
-    MLink,
-  },
-
-  props: {
-    title: {
-      type: String,
-      default: null,
-    },
-    titleTag: {
-      type: String,
-      default: 'h3',
-      validator: (value) =>
-        ['h1', 'h2', 'h3', 'h4', 'h5', 'h6'].includes(value),
-    },
-    alert: {
-      type: Boolean,
-      default: false,
-    },
-    link: {
-      type: String,
-      default: null,
-    },
-    linkContent: {
-      type: String,
-      default: null,
-    },
-    type: {
-      type: String,
-      default: null,
-      validator: (value) =>
-        ['information', 'success', 'warning', 'danger'].includes(value),
-    },
-    closable: {
-      type: Boolean,
-      default: false,
-    },
-    size: {
-      type: String,
-      default: null,
-      validator: (value) => ['s', 'm'].includes(value),
-    },
-  },
-
-  computed: {
-    setClasses() {
-      const classes = [];
-
-      if (this.type) {
-        classes.push(`mc-notification--${this.type}`);
-      }
-
-      if (this.size && this.size !== 'm') {
-        classes.push(`mc-notification--${this.size}`);
-      }
-
-      if (this.closable) {
-        classes.push('mc-notification-closable');
-      }
-
-      return classes;
-    },
-  },
-};
-</script>
-
-<style lang="scss">
-@import 'settings-tools/_all-settings';
-@import 'components/_c.notification';
-</style>

package/src/components/notification/index.js

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

package/src/components/optionbutton/MOptionButton.vue

@@ -1,67 +0,0 @@
-<template>
-  <div
-    class="mc-option-button"
-    :class="{ 'mc-option-button--full': fullWidth }"
-  >
-    <input
-      :id="id"
-      type="radio"
-      class="mc-option-button__input"
-      :name="name"
-      :checked="checked"
-      :disabled="disabled"
-      v-bind="inputAttrs"
-      @change="$emit('change', $event.target.checked)"
-    />
-    <label :for="id" class="mc-option-button__label">
-      {{ label }}
-    </label>
-  </div>
-</template>
-
-<script>
-export default {
-  name: 'MOptionButton',
-
-  model: {
-    prop: 'checked',
-    event: 'change',
-  },
-
-  props: {
-    id: {
-      type: String,
-      required: true,
-    },
-    label: {
-      type: String,
-      required: true,
-    },
-    name: {
-      type: String,
-      default: null,
-    },
-    checked: {
-      type: Boolean,
-      default: false,
-    },
-    disabled: {
-      type: Boolean,
-      default: false,
-    },
-    fullWidth: {
-      type: Boolean,
-      default: false,
-    },
-    inputAttrs: {
-      type: Object,
-      default: () => ({}),
-    },
-  },
-};
-</script>
-
-<style lang="scss">
-@import 'settings-tools/_all-settings';
-@import 'components/c.option-button';
-</style>

package/src/components/optionbutton/index.js

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

package/src/components/optioncard/MOptionCard.vue

@@ -1,132 +0,0 @@
-<template>
-  <div class="mc-option-card" :class="setClasses">
-    <input
-      :id="id"
-      :type="setType"
-      class="mc-option-card__input"
-      :class="setInputClasses"
-      :name="name"
-      :required="required"
-      :checked="checked"
-      v-bind="inputAttrs"
-      @change="$emit('change', $event.target.checked)"
-    />
-    <label :for="id" class="mc-option-card__label">
-      <span class="mc-option-card__label-text">{{ label }}</span>
-    </label>
-    <div class="mc-option-card__content">
-      <slot />
-    </div>
-  </div>
-</template>
-
-<script>
-export default {
-  name: 'MOptionCard',
-
-  model: {
-    prop: 'checked',
-    event: 'change',
-  },
-
-  props: {
-    id: {
-      type: String,
-      required: true,
-    },
-    type: {
-      type: String,
-      default: 'radio',
-      validator: (value) => ['radio', 'checkbox'].includes(value),
-    },
-    label: {
-      type: String,
-      required: true,
-    },
-    name: {
-      type: String,
-      default: null,
-    },
-    checked: {
-      type: Boolean,
-      default: false,
-    },
-    required: {
-      type: Boolean,
-      default: false,
-    },
-    index: {
-      type: Number,
-      default: 1,
-    },
-    centered: {
-      type: Boolean,
-      default: false,
-    },
-    small: {
-      type: Boolean,
-      default: false,
-    },
-    noPadding: {
-      type: Boolean,
-      default: false,
-    },
-    inputAttrs: {
-      type: Object,
-      default: () => ({}),
-    },
-  },
-
-  computed: {
-    setType() {
-      return this.type === 'checkbox' ? 'checkbox' : 'radio';
-    },
-    setClasses() {
-      return {
-        'mc-option-card--centered': this.centered,
-        'mc-option-card--no-padding': this.noPadding,
-        'mc-option-card--small': this.small,
-      };
-    },
-    setInputClasses() {
-      return {
-        'mc-checkbox__input': this.type === 'checkbox',
-        'mc-radio__input': this.type === 'radio',
-      };
-    },
-  },
-};
-</script>
-
-<style lang="scss">
-@import 'settings-tools/all-settings';
-@import 'components/c.option-card';
-
-/* stylelint-disable */
-// temporary fix
-.mc-option-card {
-  $parent: get-parent-selector(&);
-
-  border-radius: get-border-radius('m');
-  cursor: pointer;
-  position: relative;
-
-  &__input {
-    @at-root input#{&} {
-      &:checked ~ #{$parent}__content {
-        button,
-        [href],
-        input,
-        select,
-        textarea,
-        label,
-        .mc-option-card__focusable,
-        [tabindex]:not([tabindex='-1']) {
-          position: relative;
-        }
-      }
-    }
-  }
-}
-/* stylelint-enable */
-</style>

package/src/components/optioncard/index.js

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

package/src/components/optiongroup/MOptionGroup.vue

@@ -1,18 +0,0 @@
-<template>
-  <component :is="htmlTag" class="mc-option-group">
-    <slot />
-  </component>
-</template>
-
-<script>
-export default {
-  name: 'MOptionGroup',
-
-  props: {
-    htmlTag: {
-      type: String,
-      default: 'div',
-    },
-  },
-};
-</script>

package/src/components/optiongroup/index.js

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

package/src/components/overlay/MOverlayLoader.vue

@@ -1,43 +0,0 @@
-<template>
-  <div>
-    <div class="mc-overlay-loader" :class="{ 'is-visible': isVisible }">
-      <MLoader size="l" theme="light" :text="text" />
-    </div>
-  </div>
-</template>
-
-<script>
-import MLoader from '../loader/MLoader.vue';
-
-export default {
-  name: 'MOverlayLoader',
-
-  components: {
-    MLoader,
-  },
-
-  props: {
-    /**
-     * Define if the overlay is visible or not
-     * @values false, true
-     */
-    isVisible: {
-      type: Boolean,
-      default: false,
-    },
-
-    /**
-     * Loader text
-     */
-    text: {
-      type: String,
-      default: undefined,
-    },
-  },
-};
-</script>
-
-<style lang="scss">
-@import 'settings-tools/all-settings';
-@import 'components/c.overlay';
-</style>

package/src/components/overlay/index.js

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