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

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

package/src/components/pagination/index.js

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

package/src/components/passwordinput/index.js

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