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

package/src/components/datatable/MDataTableHeader.vue

@@ -1,55 +0,0 @@
-<script>
-export default {
-  name: 'MDataTableHeader',
-
-  props: {
-    caption: {
-      type: String,
-      default: null,
-    },
-    dataFieldExpr: {
-      type: String,
-      default: null,
-    },
-    allowSorting: {
-      type: Boolean,
-      default: false,
-    },
-    sortOrder: {
-      type: String,
-      default: null,
-      validator: function (value) {
-        return [null, 'asc', 'desc'].indexOf(value) !== -1;
-      },
-    },
-    sortFieldExpr: {
-      type: String,
-      default: null,
-    },
-    cssClass: {
-      type: [Object, String],
-      default: null,
-    },
-  },
-
-  data() {
-    return {
-      options: {
-        ...this.$props,
-      },
-    };
-  },
-
-  created() {
-    this.$parent.headers.push(this.options);
-  },
-
-  destroyed() {
-    const index = this.$parent.headers.indexOf(this.options);
-    this.$parent.headers.splice(index, 1);
-  },
-
-  // Renderless component
-  render: () => null,
-};
-</script>

package/src/components/datatable/MDataTableTop.vue

@@ -1,35 +0,0 @@
-<template>
-  <div
-    v-if="$slots.edition || $slots.actions || $slots.filters"
-    class="mc-datatable__header"
-  >
-    <div class="mc-datatable__topbar">
-      <div v-if="$slots.edition" class="mc-datatable__topbar-edition">
-        <slot name="edition" />
-      </div>
-      <div v-if="$slots.actions" class="mc-datatable__topbar-actions">
-        <slot name="actions" />
-      </div>
-    </div>
-    <div v-if="$slots.filters" class="mc-datatable__filters">
-      <slot name="filters" />
-    </div>
-  </div>
-</template>
-
-<script>
-export default {
-  name: 'MDataTableTop',
-};
-</script>
-
-<style lang="scss">
-@import 'settings-tools/all-settings';
-@import 'components/c.datatable-header';
-
-.mc-datatable {
-  &__topbar-actions {
-    margin-left: auto;
-  }
-}
-</style>

package/src/components/datatable/helpers.js

@@ -1,132 +0,0 @@
-/** create a sort function to pass into the sort function of the array.
- * The objective is to be able to sort on several fields ordered according to the same order as the parameter.
- * @example
- * array.sort(orderedArraySorted([{
- *  fieldExpr: 'prop1'
- * },{
- *  fieldExpr: 'prop2.propA',
- *  sortOrder: 'desc' }]
- * ))
- * // the array is order by 'prop1', then by 'prop2.propA'.
- * */
-export function orderedArraySorted(properties) {
-  const compareFn = function (left, right, sortOrder = 'asc') {
-    const direction = sortOrder === 'asc' ? 1 : -1;
-    return (left > right ? 1 : left < right ? -1 : 0) * direction;
-  };
-
-  return function (item1, item2) {
-    return properties
-      .map((property) => {
-        return compareFn(
-          getObjectValueByPath(item1, property.fieldExpr),
-          getObjectValueByPath(item2, property.fieldExpr),
-          property.sortOrder
-        );
-      })
-      .reduceRight((left, right) => {
-        return right || left;
-      });
-  };
-}
-
-/** Test if value is a Promise function. */
-export function isPromise(value) {
-  return value.toString().includes('Promise');
-}
-
-/** Test if object a is equal to object b. */
-export function deepEqual(a, b) {
-  if (a === b) {
-    return true;
-  }
-
-  if (a instanceof Date && b instanceof Date && a.getTime() !== b.getTime()) {
-    // If the values are Date, compare them as timestamps
-    return false;
-  }
-
-  if (a !== Object(a) || b !== Object(b)) {
-    // If the values aren't objects, they were already checked for equality
-    return false;
-  }
-
-  const props = Object.keys(a);
-
-  if (props.length !== Object.keys(b).length) {
-    // Different number of props, don't bother to check
-    return false;
-  }
-
-  return props.every((p) => deepEqual(a[p], b[p]));
-}
-
-/** Get value of an object by string path.
- * @example
- * let obj = {
- *  prop1: {
- *    propA: 'test'
- *  }
- * }
- * let result = getObjectValueByPath(obj, 'prop1.propA')
- * // result is equal to 'test'.
- */
-export function getObjectValueByPath(obj, path) {
-  // credit: http://stackoverflow.com/questions/6491463/accessing-nested-javascript-objects-with-string-key#comment55278413_6491621
-  if (obj == null || !path || typeof path !== 'string') {
-    return null;
-  }
-  if (obj[path] !== undefined) {
-    return obj[path];
-  }
-  path = path.replace(/\[(\w+)\]/g, '.$1'); // convert indexes to properties
-  path = path.replace(/^\./, ''); // strip a leading dot
-  return getNestedValue(obj, path.split('.'));
-}
-
-function getNestedValue(obj, path) {
-  const last = path.length - 1;
-
-  if (last < 0) {
-    return obj;
-  }
-
-  for (let i = 0; i < last; i++) {
-    if (obj == null) {
-      return null;
-    }
-    obj = obj[path[i]];
-  }
-
-  return obj[path[last]];
-}
-/** Convert string value to unit (Default: px). */
-export function convertToUnit(str, unit = 'px') {
-  if (str == null || str === '') {
-    return undefined;
-  } else if (isNaN(+str)) {
-    return String(str);
-  } else {
-    return `${Number(str)}${unit}`;
-  }
-}
-/** Parse value as object used by bindabled class property. */
-export function parseClasses(value, obj) {
-  if (typeof value === 'function') {
-    return parseClasses(value(obj));
-  } else if (Array.isArray(value)) {
-    return value.reduce(
-      (acc, v) => ({
-        ...acc,
-        [v]: true,
-      }),
-      {}
-    );
-  } else if (typeof value === 'object') {
-    return value;
-  } else if (value != null) {
-    return { [value]: true };
-  } else {
-    return null;
-  }
-}

package/src/components/datatable/index.js

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

package/src/components/field/index.js

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

package/src/components/fileuploader/MFileResult.vue

@@ -1,149 +0,0 @@
-<template>
-  <ul class="mc-fileuploader__files">
-    <li
-      v-for="(file, index) in files"
-      :key="`file-${index}`"
-      class="mc-fileuploader__file"
-      :class="
-        checkFileStatus(file)
-          ? 'mc-fileuploader__file--is-valid'
-          : 'mc-fileuploader__file--is-invalid'
-      "
-    >
-      <span class="mc-fileuploader__file-name">{{ file.name }}</span>
-      <span class="mc-fileuploader__file-icon">&nbsp;</span>
-      <button
-        type="button"
-        class="mc-fileuploader__delete"
-        :aria-label="removeLabel"
-        :disabled="disabled"
-        @click="deleteFile(file)"
-      ></button>
-      <div
-        v-if="`${$slots}.errorMessage${index}` && !checkFileStatus(file)"
-        class="mc-fileuploader__file-message"
-      >
-        <slot :name="`errorMessage${index}`" />
-      </div>
-    </li>
-  </ul>
-</template>
-
-<script>
-export default {
-  name: 'MFileResult',
-  inheritAttrs: false,
-  props: {
-    files: {
-      type: [Array, FileList],
-      default: function () {
-        return [];
-      },
-    },
-    allowedExtensions: {
-      type: Array,
-      default: function () {
-        return [];
-      },
-    },
-    maxSize: {
-      type: Number,
-      default: null,
-    },
-    removeLabel: {
-      type: String,
-      default: '',
-    },
-    disabled: {
-      type: Boolean,
-      default: false,
-    },
-  },
-  watch: {
-    files: {
-      handler: function () {
-        const files = Object.values(this.files);
-        const invalidFiles = [];
-
-        files.forEach((file, index) => {
-          const fileName = file.name;
-          const fileSize = file.size;
-          const validExtension = this.checkFileExtension(fileName);
-          const validSize = this.checkFileSize(fileSize);
-          let errorType = '';
-
-          if (!validExtension) {
-            errorType = 'invalid-extension';
-          }
-
-          if (!validSize) {
-            errorType = 'invalid-size';
-          }
-
-          if (!validExtension || !validSize) {
-            invalidFiles.push({
-              index: index,
-              fileName: fileName,
-              fileSize: fileSize,
-              errorType: errorType,
-            });
-          }
-        });
-
-        if (invalidFiles.length > 0) {
-          this.$emit('has-invalid-files', invalidFiles);
-        }
-      },
-      immediate: true,
-    },
-  },
-  methods: {
-    deleteFile(file) {
-      this.$emit('file-removed', file);
-    },
-    checkFileExtension(fileName) {
-      const allowedExtensions = this.allowedExtensions;
-
-      if (allowedExtensions.length > 0) {
-        const extension = fileName.slice(
-          ((fileName.lastIndexOf('.') - 1) >>> 0) + 2
-        );
-
-        if (!allowedExtensions.includes(extension)) {
-          return false; // invalid
-        }
-      }
-
-      return true; // valid
-    },
-    checkFileSize(fileSize) {
-      const fileSizeMB = fileSize / 1024 / 1024; // in MB
-
-      if (this.maxSize && fileSizeMB > this.maxSize) {
-        return false; // invalid
-      }
-
-      return true; // valid
-    },
-    checkFileStatus(file) {
-      const validExtension = this.checkFileExtension(file.name);
-      const validSize = this.checkFileSize(file.size);
-
-      if (!validExtension || !validSize) {
-        return false; // invalid
-      }
-
-      return true; // valid
-    },
-  },
-};
-</script>
-
-<style lang="scss">
-@import 'settings-tools/_all-settings';
-@import 'components/_c.file-uploader';
-
-.mc-fileuploader__file {
-  box-sizing: content-box;
-}
-</style>

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/MFlag.vue

@@ -1,46 +0,0 @@
-<template>
-  <component :is="htmlTag" class="mc-flag" :class="setClasses">
-    {{ label }}
-  </component>
-</template>
-
-<script>
-import { checkThemeValue } from '../../utils/theme.validator';
-
-export default {
-  name: 'MFlag',
-
-  props: {
-    label: {
-      type: String,
-      required: true,
-    },
-    theme: {
-      type: String,
-      default: null,
-      validator: (value) => checkThemeValue(value),
-    },
-    htmlTag: {
-      type: String,
-      default: 'div',
-    },
-  },
-
-  computed: {
-    setClasses() {
-      const classes = [];
-
-      if (this.theme) {
-        classes.push(`mc-flag--${this.theme}`);
-      }
-
-      return classes;
-    },
-  },
-};
-</script>
-
-<style lang="scss">
-@import 'settings-tools/_all-settings';
-@import 'components/_c.flag';
-</style>

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