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

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/dropdown/MDropdown.vue

@@ -1,317 +0,0 @@
-<template>
-  <div
-    ref="dropdown"
-    v-click-outside="onClickOutside"
-    class="mc-dropdown"
-    :class="{ 'mc-dropdown--multi': multiple }"
-    :style="setStyles"
-  >
-    <MTag
-      v-if="multiple && listboxValue.length > 0"
-      :id="tagId ? tagId : `autoCompleteTag-${uuid}`"
-      ref="tag"
-      :label="setTagLabel"
-      :disabled="disabled"
-      type="removable"
-      class="mc-dropdown__tag"
-      size="s"
-      @remove-tag="clearAutocomplete()"
-    />
-    <button
-      type="button"
-      class="mc-select mc-dropdown__trigger"
-      :class="{ 'is-open': openState }"
-      :disabled="disabled"
-      @click="openState = !openState"
-    >
-      {{ buttonValue }}
-    </button>
-    <MListBox
-      v-model="listboxValue"
-      :open="openState"
-      :items="localItems"
-      :multiple="multiple"
-      :empty-search-label="emptySearchLabel"
-      :data-key-expr="dataKeyExpr"
-      :data-text-expr="dataTextExpr"
-      :data-value-expr="dataValueExpr"
-      @change="onChange"
-    >
-      <template #item="{ item }">
-        <slot name="item" :item="item"></slot>
-      </template>
-    </MListBox>
-  </div>
-</template>
-
-<script>
-import MTag from '../tags/MTag.vue';
-import MListBox from '../listbox/MListBox.vue';
-
-export default {
-  name: 'MDropdown',
-
-  components: {
-    MTag,
-    MListBox,
-  },
-
-  directives: {
-    'click-outside': {
-      bind(el, binding, vnode) {
-        el.clickOutsideEvent = (event) => {
-          if (!(el === event.target || el.contains(event.target))) {
-            vnode.context[binding.expression](event);
-          }
-        };
-        document.body.addEventListener('click', el.clickOutsideEvent);
-      },
-      unbind(el) {
-        document.body.removeEventListener('click', el.clickOutsideEvent);
-      },
-    },
-  },
-
-  model: {
-    event: 'change',
-  },
-
-  props: {
-    // Tag Element
-    tagId: {
-      type: String,
-      default: null,
-    },
-    tagLabel: {
-      type: String,
-      default: '',
-    },
-    // Input Element
-    placeholder: {
-      type: String,
-      default: '-- Placeholder --',
-    },
-    filter: {
-      type: Function,
-      default: null,
-    },
-    disabled: {
-      type: Boolean,
-      default: false,
-    },
-    // Listbox Element
-    items: {
-      type: Array,
-      required: true,
-    },
-    value: {
-      type: [Array, String, Number],
-      default: undefined,
-    },
-    open: {
-      type: Boolean,
-      default: false,
-    },
-    multiple: {
-      type: Boolean,
-      default: false,
-    },
-    emptySearchLabel: {
-      type: String,
-      default: 'No results found',
-    },
-    dataKeyExpr: {
-      type: String,
-      default: 'id',
-    },
-    dataTextExpr: {
-      type: String,
-      default: 'label',
-    },
-    dataValueExpr: {
-      type: String,
-      default: 'value',
-    },
-    sort: {
-      type: Boolean,
-      default: true,
-    },
-    // Global
-    maxWidth: {
-      type: String,
-      default: '17.875rem',
-    },
-  },
-
-  data() {
-    return {
-      uuid: Math.random(),
-      openState: this.open,
-      tagWidth: '0px',
-      tagValue: null,
-      buttonValue: this.placeholder,
-      localItems: null,
-      sortedListItems: null,
-      listboxValue: null,
-    };
-  },
-
-  computed: {
-    setTagLabel() {
-      return this.listboxValue.length.toString() + ' ' + this.tagLabel;
-    },
-    setStyles() {
-      return {
-        '--tag-width': this.tagWidth,
-        '--max-width': this.maxWidth,
-      };
-    },
-  },
-
-  watch: {
-    value: {
-      handler: function (val) {
-        if (!val && this.multiple) {
-          this.listboxValue = [];
-        } else {
-          this.listboxValue = val;
-        }
-      },
-      immediate: true,
-    },
-
-    items: {
-      handler: function (val) {
-        this.localItems = val;
-        // this.clearAutocomplete();
-      },
-      immediate: true,
-    },
-
-    listboxValue: function (val) {
-      const value = Array.isArray(val) ? val : val.toString();
-      const selectedItems = this.getSelectedItems(value);
-
-      const seletedLabels = selectedItems.map(
-        (item) => item[this.dataTextExpr]
-      );
-
-      this.buttonValue = seletedLabels.join(', ');
-
-      if (val.length === 0) {
-        this.buttonValue = this.placeholder;
-      }
-
-      if (this.multiple) {
-        this.tagValue = val;
-      }
-    },
-
-    tagValue: function () {
-      this.setTagWidth();
-    },
-
-    openState: function (val) {
-      const eventName = val ? 'open' : 'close';
-      this.$emit(eventName);
-      this.$emit('update:open', val);
-    },
-  },
-
-  methods: {
-    setTagWidth() {
-      this.$nextTick(() => {
-        if (this.$refs.tag && this.$refs.tag.$el) {
-          this.tagWidth = this.$refs.tag.$el.clientWidth + 8 + 'px';
-        } else {
-          this.tagWidth = '0px';
-        }
-      });
-    },
-
-    clearAutocomplete() {
-      this.listboxValue = this.multiple ? [] : undefined;
-      this.onChange();
-      this.$emit('clear');
-    },
-
-    onClickOutside() {
-      this.openState = false;
-
-      if (this.multiple && this.sort) {
-        this.sortItems();
-      } else {
-        this.localItems = this.items;
-      }
-    },
-
-    onChange() {
-      this.$emit('change', this.listboxValue);
-
-      if (!this.multiple) {
-        this.onClickOutside();
-      }
-    },
-
-    getSelectedItems(val) {
-      const value = val ? val : this.listboxValue;
-
-      const selectedItems = this.items.filter((item) =>
-        value.includes(item[this.dataValueExpr])
-      );
-
-      return selectedItems;
-    },
-
-    sortItems() {
-      this.sortedListItems = this.items;
-      const selectedItems = this.getSelectedItems();
-
-      this.sortedListItems.sort((a, b) => {
-        const hasItemA = selectedItems.includes(a);
-        const hasItemB = selectedItems.includes(b);
-
-        if (hasItemA === hasItemB) {
-          return a[this.dataValueExpr] - b[this.dataValueExpr];
-        } else if (hasItemA < hasItemB) {
-          return 1;
-        } else {
-          return -1;
-        }
-      });
-    },
-  },
-};
-</script>
-
-<style lang="scss">
-@import 'settings-tools/all-settings';
-@import 'components/c.checkbox';
-@import 'components/_c.dropdown';
-
-.mc-dropdown {
-  max-width: var(--max-width);
-
-  &__tag {
-    position: absolute;
-    top: 0;
-    transform: translateY(50%);
-  }
-
-  &__trigger {
-    display: block;
-    text-align: left;
-
-    &.is-open {
-      background-image: url(inline-icons('arrow-top-16', black));
-    }
-  }
-}
-
-.mc-dropdown--multi .mc-dropdown__trigger {
-  overflow: hidden;
-  padding-left: calc(0.75rem + var(--tag-width));
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-</style>

package/src/components/dropdown/index.js

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

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>