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

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