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

package/src/components/tabs/MTab.vue

@@ -1,184 +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.href ? (tab.disabled ? 'span' : 'a') : 'button'"
-          :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__link"
-          role="tab"
-          :aria-selected="tab.active ? 'true' : 'false'"
-          :class="setActiveClass(tab)"
-          @click="
-            manageTabs(
-              $event.target,
-              $event,
-              Object.assign({ index: index }, tab)
-            )
-          "
-        >
-          {{ tab.text }}
-        </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__link');
-            this.manageTabs(firstTab);
-          }
-        }
-      }
-    });
-  },
-
-  methods: {
-    setActiveClass: function (tab) {
-      const tabClasses = [];
-
-      if (tab.active) {
-        tabClasses.push('mc-tabs__link--selected');
-      }
-
-      if (tab.disabled) {
-        tabClasses.push('mc-tabs__link--disabled');
-      }
-
-      return tabClasses;
-    },
-    manageTabs: function (el, e, tab) {
-      if (tab && tab.disabled) {
-        return;
-      }
-      if (e) {
-        this.$emit('tab-clicked', e.target, tab);
-      }
-
-      this.tablist.querySelectorAll('.mc-tabs__link').forEach((el) => {
-        el.classList.remove('mc-tabs__link--selected');
-        el.setAttribute('aria-selected', 'false');
-      });
-
-      el.classList.add('mc-tabs__link--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 };

package/src/components/tags/MTag.vue

@@ -1,173 +0,0 @@
-<template>
-  <span v-if="type === 'text'" class="mc-tag-text" :class="setClasses">
-    <span class="mc-tag-text__label">
-      {{ label }}
-    </span>
-  </span>
-  <a
-    v-else-if="type === 'link'"
-    class="mc-tag-link"
-    :href="href"
-    :class="setClasses"
-  >
-    <span class="mc-tag-link__label">
-      {{ label }}
-    </span>
-  </a>
-  <span
-    v-else-if="type === 'selectable'"
-    class="mc-tag-selectable"
-    :class="setClasses"
-  >
-    <input
-      :id="id"
-      class="mc-tag-selectable__input"
-      type="checkbox"
-      :name="name"
-      :value="value"
-      :checked="checked"
-      :required="required"
-      :disabled="disabled"
-      @change="$emit('change', $event.target.checked)"
-    />
-    <label class="mc-tag-selectable__pill" :for="id">
-      <span class="mc-tag-selectable__label">
-        {{ label }}
-      </span>
-    </label>
-  </span>
-  <span
-    v-else-if="type === 'removable'"
-    class="mc-tag-removable"
-    :class="setClasses"
-  >
-    <span class="mc-tag-removable__label">
-      {{ label }}
-    </span>
-    <button
-      type="button"
-      class="mc-tag-removable__remove"
-      @click="$emit('remove-tag')"
-    />
-  </span>
-</template>
-
-<script>
-import {
-  responsiveModifierValidators,
-  responsiveModifiers,
-} from '../../utils/mozaicClasses';
-
-export default {
-  name: 'MTag',
-
-  model: {
-    prop: 'checked',
-    event: 'change',
-  },
-
-  props: {
-    label: {
-      type: String,
-      required: true,
-    },
-    type: {
-      type: String,
-      default: 'text',
-      validator: (value) =>
-        ['text', 'link', 'selectable', 'removable'].includes(value),
-    },
-    theme: {
-      type: String,
-      default: null,
-    },
-    href: {
-      type: String,
-      default: null,
-    },
-    name: {
-      type: String,
-      default: null,
-    },
-    value: {
-      type: String,
-      default: null,
-    },
-    checked: {
-      type: Boolean,
-      default: false,
-    },
-    disabled: {
-      type: Boolean,
-      default: false,
-    },
-    required: {
-      type: Boolean,
-      default: false,
-    },
-    size: {
-      type: String,
-      default: 'm',
-      validator: (value) => responsiveModifierValidators(value, ['s', 'm']),
-    },
-    // Experimental solution waiting on this issue https://github.com/adeo/mozaic-vue/issues/52
-    responsiveSizeModifiers: {
-      type: Array,
-      default: null,
-      validator: (array) =>
-        array.every((e) =>
-          responsiveModifierValidators(e, [
-            's@from-m',
-            's@from-l',
-            's@from-xl',
-            's@from-xxl',
-            'm@from-m',
-            'm@from-l',
-            'm@from-xl',
-            'm@from-xxl',
-          ])
-        ),
-    },
-  },
-
-  data() {
-    return {
-      id: null,
-    };
-  },
-
-  computed: {
-    setClasses() {
-      const classes = [];
-
-      if (this.size) {
-        classes.push(`mc-tag-${this.type}--${this.size}`);
-      }
-
-      if (this.theme) {
-        classes.push(`mc-tag-${this.type}--${this.theme}`);
-      }
-
-      if (
-        this.responsiveSizeModifiers &&
-        this.responsiveSizeModifiers.length > 0
-      ) {
-        for (const modifier of this.responsiveSizeModifiers) {
-          responsiveModifiers('mc-tag', modifier, classes);
-        }
-      }
-
-      return classes;
-    },
-  },
-
-  created() {
-    this.id = this._uid;
-  },
-};
-</script>
-
-<style lang="scss">
-@import 'settings-tools/_all-settings';
-@import 'components/_c.tag';
-</style>

package/src/components/tags/index.js

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

package/src/components/textarea/index.js

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

package/src/components/textinput/MTextInputField.vue

@@ -1,105 +0,0 @@
-<template>
-  <input
-    :type="type"
-    :required="required"
-    class="mc-text-input"
-    :class="setClasses"
-    :aria-invalid="isInvalid"
-    :value="value"
-    @input="$emit('input', $event.target.value)"
-    v-on="inputListeners"
-  />
-</template>
-
-<script>
-import {
-  responsiveModifiers,
-  responsiveModifierValidators,
-} from '../../utils/mozaicClasses';
-
-const supportedTypes = [
-  'date',
-  'email',
-  'number',
-  'password',
-  'tel',
-  'text',
-  'time',
-  'search',
-];
-
-export default {
-  name: 'MTextInputField',
-
-  props: {
-    type: {
-      type: String,
-      default: 'text',
-      validator: (type) => supportedTypes.includes(type),
-    },
-    required: {
-      type: Boolean,
-      default: false,
-    },
-    value: {
-      type: [String, Number],
-      default: null,
-    },
-    isValid: {
-      type: Boolean,
-      default: false,
-    },
-    isInvalid: {
-      type: Boolean,
-      default: false,
-    },
-    icon: {
-      type: String,
-      default: null,
-    },
-    size: {
-      type: String,
-      default: 'm',
-      validator: (value) => responsiveModifierValidators(value, ['s', 'm']),
-    },
-  },
-
-  computed: {
-    setClasses() {
-      const classes = [];
-
-      if (this.isValid) {
-        classes.push('is-valid');
-      }
-
-      if (this.isInvalid) {
-        classes.push('is-invalid');
-      }
-
-      if (this.icon) {
-        classes.push('mc-left-icon-input__input');
-      }
-
-      if (this.size) {
-        responsiveModifiers('mc-text-input', this.size, classes);
-      }
-
-      return classes;
-    },
-    inputListeners: function () {
-      // see => https://vuejs.org/v2/guide/components-custom-events.html#Binding-Native-Events-to-Components
-      var vm = this;
-      return Object.assign({}, this.$listeners, {
-        input: function (event) {
-          vm.$emit('input', event.target.value);
-        },
-      });
-    },
-  },
-};
-</script>
-
-<style lang="scss">
-@import 'settings-tools/_all-settings';
-@import 'components/_c.text-input';
-</style>

package/src/components/textinput/MTextInputIcon.vue

@@ -1,42 +0,0 @@
-<template>
-  <m-icon
-    :id="`mc-text-input__icon-${id}`"
-    key="text-input-icon"
-    class="mc-left-icon-input__icon"
-    :name="icon"
-  />
-</template>
-
-<script>
-import MIcon from '../icon/MIcon.vue';
-
-export default {
-  name: 'MTextInputIcon',
-
-  components: {
-    MIcon,
-  },
-
-  props: {
-    icon: {
-      type: String,
-      default: null,
-    },
-  },
-
-  data() {
-    return {
-      id: null,
-    };
-  },
-
-  created() {
-    this.id = this._uid;
-  },
-};
-</script>
-
-<style lang="scss">
-@import 'settings-tools/_all-settings';
-@import 'components/_c.left-icon-input';
-</style>

package/src/components/textinput/index.js

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

package/src/components/toggle/index.js

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

package/src/components/tooltip/MTooltip.vue

@@ -1,42 +0,0 @@
-<template>
-  <div
-    class="mc-tooltip"
-    :class="position ? `mc-tooltip--${position}` : ''"
-    :aria-describedby="id"
-  >
-    <slot />
-
-    <span :id="id" class="mc-tooltip__content" role="tooltip">
-      {{ text }}
-    </span>
-  </div>
-</template>
-
-<script>
-export default {
-  name: 'MTooltip',
-
-  inheritAttrs: false,
-
-  props: {
-    id: {
-      type: String,
-      required: true,
-    },
-    text: {
-      type: String,
-      required: true,
-    },
-    position: {
-      type: String,
-      default: 'top',
-      validator: (value) => ['top', 'right', 'bottom', 'left'].includes(value),
-    },
-  },
-};
-</script>
-
-<style lang="scss">
-@import 'settings-tools/_all-settings';
-@import 'components/_c.tooltip';
-</style>

package/src/components/tooltip/index.js

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

package/src/index.js

@@ -1,62 +0,0 @@
-// Export the components as a plugin
-import * as Components from './components';
-
-const MozaicVue = {
-  // eslint-disable-next-line no-unused-vars
-  install(Vue, options = {}) {
-    // components
-    Object.keys(Components).forEach((name) => {
-      Vue.component(name, Components[name]);
-    });
-  },
-};
-
-if (typeof window !== 'undefined' && window.Vue) {
-  window.Vue.use(MozaicVue);
-}
-
-export default MozaicVue;
-
-// import/export individual components
-// Foundations
-export { MContainer } from './components/container/';
-export { MHeading } from './components/heading';
-// Components
-export { MAccordion } from './components/accordion/';
-export { MAutocomplete } from './components/autocomplete';
-export { MBadge } from './components/badge/';
-export { MBreadcrumb } from './components/breadcrumb/';
-export { MButton } from './components/button/';
-export { MCard } from './components/card/';
-export { MCheckbox, MCheckboxGroup } from './components/checkbox/';
-export { MDataTable, MDataTableHeader } from './components/datatable';
-export { MField } from './components/field';
-export { MFileUploader } from './components/fileuploader';
-export { MFlag } from './components/flag';
-export { MHero } from './components/hero';
-export { MIcon } from './components/icon';
-export { MLayer } from './components/layer';
-export { MLink } from './components/link';
-export { MListBox } from './components/listbox';
-export { MLoader } from './components/loader';
-export { MModal } from './components/modal';
-export { MNotification } from './components/notification';
-export { MOptionButton } from './components/optionbutton';
-export { MOptionCard } from './components/optioncard';
-export { MOptionGroup } from './components/optiongroup';
-export { MOverlay, MOverlayLoader } from './components/overlay';
-export { MPagination } from './components/pagination';
-export { MPasswordInput } from './components/passwordinput';
-export { MPhoneNumber } from './components/phonenumber';
-export { MProgress } from './components/progressbar';
-export { MQuantitySelector } from './components/quantityselector';
-export { MRadio, MRadioGroup } from './components/radio';
-export { MStarsInput, MStarsResult } from './components/ratingstars';
-export { MSelect } from './components/select';
-export { MStepper } from './components/stepper';
-export { MTab } from './components/tabs';
-export { MTag } from './components/tags';
-export { MTextArea } from './components/textarea';
-export { MTextInput } from './components/textinput';
-export { MToggle } from './components/toggle';
-export { MTooltip } from './components/tooltip';

package/src/shims-tsx.d.ts

@@ -1,13 +0,0 @@
-import Vue, { VNode } from 'vue'
-
-declare global {
-  namespace JSX {
-    // tslint:disable no-empty-interface
-    interface Element extends VNode {}
-    // tslint:disable no-empty-interface
-    interface ElementClass extends Vue {}
-    interface IntrinsicElements {
-      [elem: string]: any
-    }
-  }
-}

package/src/shims.vue.d.ts

@@ -1,4 +0,0 @@
-declare module '*.vue' {
-  import Vue from 'vue';
-  export default Vue;
-}