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

package/src/components/fileuploader/MFileUploader.vue

@@ -1,142 +0,0 @@
-<template>
-  <div class="mc-fileuploader" :class="cssFieldElementClass">
-    <input
-      :id="id"
-      ref="fileUpload"
-      type="file"
-      class="mc-fileuploader__input"
-      :accept="accept"
-      :multiple="multiple"
-      :disabled="disabled"
-      @change="onChange"
-    />
-    <label :for="id" class="mc-fileuploader__label">
-      <span class="mc-fileuploader__label--center">
-        {{ label }}
-      </span>
-    </label>
-    <m-file-result
-      v-if="displayFilesList && files.length > 0"
-      :files="files"
-      :allowed-extensions="allowedExtensions"
-      :max-size="maxSize"
-      :remove-label="removeLabel"
-      @file-removed="deleteFile"
-      @has-invalid-files="hasInvalidFiles"
-    >
-      <template v-for="(index, name) in $slots" #[name]>
-        <slot :name="name" />
-      </template>
-    </m-file-result>
-    <m-file-result
-      v-if="uploadedFiles.length > 0"
-      :files="uploadedFiles"
-      :allowed-extensions="allowedExtensions"
-      :remove-label="removeLabel"
-      :disabled="disabled"
-      @file-removed="deleteRemoteFile"
-    />
-  </div>
-</template>
-
-<script>
-import MFileResult from './MFileResult.vue';
-export default {
-  name: 'MFileUploader',
-  components: {
-    MFileResult,
-  },
-  inject: {
-    cssFieldElementClass: {
-      default: '',
-    },
-  },
-  inheritAttrs: false,
-  props: {
-    id: {
-      type: String,
-      default: 'mc-fileuploader',
-    },
-    label: {
-      type: String,
-      required: true,
-    },
-    accept: {
-      type: String,
-      default: null,
-    },
-    multiple: {
-      type: Boolean,
-      default: false,
-    },
-    allowedExtensions: {
-      type: Array,
-      default: function () {
-        return [];
-      },
-    },
-    maxSize: {
-      type: Number,
-      default: null,
-    },
-    displayFilesList: {
-      type: Boolean,
-      default: true,
-    },
-    uploadedFiles: {
-      type: [Array, Object],
-      default: function () {
-        return [];
-      },
-    },
-    disabled: {
-      type: Boolean,
-      default: false,
-    },
-    removeLabel: {
-      type: String,
-      default: 'Remove',
-    },
-  },
-  data() {
-    return {
-      files: [],
-    };
-  },
-  methods: {
-    onChange(e) {
-      this.files = [...e.target.files];
-      this.$emit('file-added', this.files);
-      e.target.value = '';
-    },
-    removeFromArray(fileList, value) {
-      const array = Array.from(fileList);
-      const idx = array.indexOf(value);
-      if (idx !== -1) {
-        array.splice(idx, 1);
-      }
-      return array;
-    },
-    deleteFile(file) {
-      this.files = this.removeFromArray(this.files, file);
-      this.$emit('file-removed', file);
-    },
-    deleteRemoteFile(file) {
-      this.$emit('remote-file-removed', file);
-    },
-    hasInvalidFiles(payload) {
-      this.$emit('has-invalid-files', payload);
-    },
-    reset() {
-      this.$emit('file-removed', [...this.files]);
-      this.files = [];
-      this.$refs.fileUpload.value = '';
-    },
-  },
-};
-</script>
-
-<style lang="scss">
-@import 'settings-tools/_all-settings';
-@import 'components/_c.file-uploader';
-</style>

package/src/components/fileuploader/index.js

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

package/src/components/flag/index.js

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

package/src/components/heading/MHeading.vue

@@ -1,75 +0,0 @@
-<template>
-  <component :is="hn" class="mt-heading" :class="classes">
-    <slot />
-  </component>
-</template>
-
-<script>
-export default {
-  name: 'MHeading',
-
-  props: {
-    level: {
-      type: String,
-      default: '1',
-      validator: (value) => ['1', '2', '3', '4'].includes(value),
-    },
-    size: {
-      type: String,
-      default: 'm',
-      validator: (value) => ['s', 'm', 'l'].includes(value),
-    },
-    weight: {
-      type: String,
-      default: null,
-      validator: (value) => ['light', 'semi-bold'].includes(value),
-    },
-    underline: {
-      type: Boolean,
-      default: false,
-    },
-    underlineColor: {
-      type: String,
-      default: null,
-      validator: (value) =>
-        ['primary-01-200', 'primary-02-600', 'primary-02-200'].includes(value),
-    },
-    lightest: {
-      type: Boolean,
-      default: false,
-    },
-    align: {
-      type: String,
-      default: 'left',
-      validator: (value) => ['left', 'center', 'right'].includes(value),
-    },
-    lineHeightXS: {
-      type: Boolean,
-      default: false,
-    },
-  },
-
-  computed: {
-    hn() {
-      return `h${this.level}`;
-    },
-    classes() {
-      return {
-        ['mt-heading--' + this.size]: this.size,
-        ['mt-heading--' + this.weight]:
-          this.weight === 'light' || this.weight === 'semi-bold',
-        'mt-heading--lightest': this.lightest,
-        'mt-heading--underline': this.underline,
-        ['mt-heading--line-' + this.underlineColor]: this.underlineColor,
-        ['mt-heading--' + this.align]: this.align,
-        'mt-heading--line-height-xs': this.lineHeightXS,
-      };
-    },
-  },
-};
-</script>
-
-<style lang="scss">
-@import 'settings-tools/_all-settings';
-@import 'typography/_t.headings';
-</style>

package/src/components/heading/index.js

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

package/src/components/hero/MHero.vue

@@ -1,93 +0,0 @@
-<template>
-  <div
-    class="mc-hero"
-    :class="{
-      'mc-hero--center': center,
-      'mc-hero--with-content': $slots.default,
-      'mc-hero--with-boxed': $slots.boxed,
-    }"
-  >
-    <div :class="{ 'ml-container': true, 'ml-container--fluid': !fixed }">
-      <div class="ml-flexy ml-flexy--gutter">
-        <div class="mc-hero__main ml-flexy__col">
-          <picture class="mc-hero__cover">
-            <source
-              v-for="(src, index) in srcSet"
-              :key="index"
-              :srcset="src.url"
-              :media="`(max-width: ${src.width}px)`"
-            />
-            <img class="mc-hero__visual" :src="imgSrc" :alt="imgAlt" />
-          </picture>
-          <div class="mc-hero__header">
-            <component
-              :is="titleTag"
-              class="
-                mc-hero__title
-                mt-heading
-                mt-heading--lightest
-                mt-heading--s
-                mt-heading--underline
-              "
-              :class="{ 'mt-heading--center': center }"
-            >
-              {{ title }}
-            </component>
-          </div>
-          <div v-if="$slots.default" class="mc-hero__content mt-body-m">
-            <slot />
-          </div>
-        </div>
-        <div v-if="$slots.boxed" class="mc-hero__boxed ml-flexy__col">
-          <slot name="boxed" />
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script>
-export default {
-  name: 'MHero',
-  props: {
-    title: {
-      type: String,
-      required: true,
-    },
-    imgSrc: {
-      type: String,
-      required: true,
-    },
-    titleTag: {
-      type: String,
-      default: 'h1',
-      validator: (value) =>
-        ['h1', 'h2', 'h3', 'h4', 'h5', 'h6'].includes(value),
-    },
-    imgAlt: {
-      type: String,
-      default: '',
-    },
-    fixed: {
-      type: Boolean,
-      default: false,
-    },
-    center: {
-      type: Boolean,
-      default: false,
-    },
-    srcSet: {
-      type: Array,
-      default: null,
-    },
-  },
-};
-</script>
-
-<style lang="scss">
-@import 'settings-tools/_all-settings';
-@import 'typography/_t.all-base-typography';
-@import 'layouts/_l.container';
-@import 'layouts/_l.flexy';
-@import 'components/_c.hero';
-</style>

package/src/components/hero/index.js

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

package/src/components/icon/MIcon.vue

@@ -1,136 +0,0 @@
-<script>
-export default {
-  name: 'MIcon',
-
-  props: {
-    /**
-     * Icon name
-     */
-    name: {
-      type: String,
-      required: true,
-    },
-    /**
-     * Icon color
-     */
-    color: {
-      type: String,
-      default: 'currentColor',
-    },
-  },
-
-  data() {
-    return {
-      id: null,
-      viewbox: null,
-      size: null,
-      paths: null,
-      type: null,
-    };
-  },
-
-  computed: {
-    loadIcons() {
-      if (!this.name) {
-        return null;
-      }
-
-      return () =>
-        import(
-          /* webpackMode: 'eager' */
-          '@mozaic-ds/icons/js/icons.js'
-        );
-    },
-
-    getIconName() {
-      if (!this.name) {
-        return null;
-      }
-
-      return this.name;
-    },
-  },
-
-  watch: {
-    name() {
-      this.setIconElement();
-    },
-  },
-
-  created() {
-    this.id = this._uid;
-  },
-
-  mounted() {
-    this.setIconElement();
-  },
-
-  methods: {
-    setIconElement() {
-      this.loadIcons().then((icons) => {
-        const iconName = this.getIconName;
-        const selectedIcon = icons[iconName];
-
-        if (!selectedIcon) {
-          throw new Error(
-            'The icon you are trying to display does not exist. Maybe the name is incorrect. => (See all available icons: http://mozaic.adeo.cloud/Foundations/Icons/catalog/)'
-          );
-        }
-
-        this.viewbox = selectedIcon.viewBox;
-        this.size = selectedIcon.size;
-        this.paths = selectedIcon.paths;
-        this.type = selectedIcon.type;
-      });
-    },
-    setSizeFromViewbox(viewbox) {
-      const viewboxSizes = viewbox.split(' ').filter((size) => size > 0);
-
-      return {
-        width: `${viewboxSizes[0]}px`,
-        height: `${viewboxSizes[1]}px`,
-      };
-    },
-  },
-
-  render: function (createElement) {
-    const paths = this.paths;
-    const svgAttrs = {
-      id: `MIcon-${this.name}-${this.id}`,
-      viewBox: this.viewbox,
-      height:
-        this.type !== 'logotypes'
-          ? this.size
-          : this.setSizeFromViewbox(this.viewbox).height,
-      width:
-        this.type !== 'logotypes'
-          ? this.size
-          : this.setSizeFromViewbox(this.viewbox).width,
-      fill: this.color,
-      'aria-hidden': 'true',
-    };
-
-    function generatePaths(paths) {
-      return paths.map(function (path) {
-        const children = path.children;
-
-        if (children) {
-          return createElement(
-            path.tagName,
-            { attrs: path.attrs },
-            generatePaths(children)
-          );
-        }
-
-        return createElement(path.tagName, { attrs: path.attrs });
-      });
-    }
-
-    if (paths) {
-      return createElement('svg', { attrs: svgAttrs }, generatePaths(paths));
-    }
-
-    return createElement('svg', { attrs: svgAttrs });
-  },
-};
-</script>

package/src/components/icon/index.js

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

package/src/components/index.js

@@ -1,44 +0,0 @@
-// import/export individual components
-// Foundations
-export { MContainer } from './container';
-export { MHeading } from './heading';
-// Components
-export { MAccordion } from './accordion';
-export { MAutocomplete } from './autocomplete';
-export { MBadge } from './badge';
-export { MBreadcrumb } from './breadcrumb';
-export { MButton } from './button';
-export { MCard } from './card';
-export { MCheckbox, MCheckboxGroup } from './checkbox';
-export { MDataTable, MDataTableHeader } from './datatable';
-export { MField } from './field';
-export { MDropdown } from './dropdown';
-export { MFileUploader } from './fileuploader';
-export { MFlag } from './flag';
-export { MHero } from './hero';
-export { MIcon } from './icon';
-export { MLayer } from './layer';
-export { MLink } from './link';
-export { MListBox, MListBoxActions } from './listbox';
-export { MLoader } from './loader';
-export { MModal } from './modal';
-export { MNotification } from './notification';
-export { MOptionButton } from './optionbutton';
-export { MOptionCard } from './optioncard';
-export { MOptionGroup } from './optiongroup';
-export { MOverlay, MOverlayLoader } from './overlay';
-export { MPagination } from './pagination';
-export { MPasswordInput } from './passwordinput';
-export { MPhoneNumber } from './phonenumber';
-export { MProgress } from './progressbar';
-export { MQuantitySelector } from './quantityselector';
-export { MRadio, MRadioGroup } from './radio';
-export { MStarsInput, MStarsResult } from './ratingstars';
-export { MSelect } from './select';
-export { MStepper } from './stepper';
-export { MTab } from './tabs';
-export { MTag } from './tags';
-export { MTextArea } from './textarea';
-export { MTextInput } from './textinput';
-export { MToggle } from './toggle';
-export { MTooltip } from './tooltip';