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

package/postinstall.js

@@ -1,3 +0,0 @@
-const package = require('./package.json');
-
-console.log(`${package.name} installed`);

package/src/components/accordion/MAccordion.vue

@@ -1,128 +0,0 @@
-<template>
-  <div class="mc-accordion" :class="{ 'mc-accordion--s': size === 's' }">
-    <input
-      :id="id"
-      ref="checkbox"
-      type="checkbox"
-      class="mc-accordion__trigger"
-      :disabled="disabled"
-      :checked="open"
-      @change="$emit('update:open', $event.target.checked)"
-    />
-    <div
-      :class="['mc-accordion__header', setHeaderClasses]"
-      :aria-expanded="open"
-      @click="$refs.checkbox.click()"
-    >
-      <slot name="beforeLabel" />
-      <label
-        :for="id"
-        :aria-expanded="open"
-        :class="['mc-accordion__header__label', setLabelClasses]"
-        @click.stop
-      >
-        <m-icon v-if="icon" :name="icon" class="mc-accordion__icon" />
-        {{ label }}
-      </label>
-      <slot name="afterLabel" />
-    </div>
-    <div class="mc-accordion__content">
-      <slot />
-    </div>
-  </div>
-</template>
-
-<script>
-import MIcon from '../icon/MIcon.vue';
-
-export default {
-  name: 'MAccordion',
-
-  components: {
-    MIcon,
-  },
-
-  model: {
-    prop: 'open',
-    event: 'change',
-  },
-
-  props: {
-    id: {
-      type: String,
-      required: true,
-    },
-    label: {
-      type: String,
-      required: true,
-    },
-    open: {
-      type: Boolean,
-      default: false,
-    },
-    size: {
-      type: String,
-      default: null,
-      validator: (value) => ['s', 'm'].includes(value),
-    },
-    disabled: {
-      type: Boolean,
-      default: false,
-    },
-    padding: {
-      type: Boolean,
-      default: true,
-    },
-    icon: {
-      type: String,
-      default: null,
-    },
-  },
-
-  computed: {
-    setHeaderClasses() {
-      return {
-        'mc-accordion__label': true,
-        'mc-accordion__label--icon': this.icon,
-        'mc-accordion__label--no-padding': !this.padding,
-      };
-    },
-
-    setLabelClasses() {
-      return {
-        'mc-accordion__header__label--with-before-slot':
-          this.$slots.beforeLabel,
-        'mc-accordion__header__label--with-after-slot': this.$slots.afterLabel,
-      };
-    },
-  },
-};
-</script>
-
-<style lang="scss">
-@import 'settings-tools/_all-settings';
-@import 'components/c.accordion';
-
-.mc-accordion {
-  &__header {
-    display: flex;
-    align-items: center;
-
-    &__label {
-      align-items: center;
-      display: flex;
-      cursor: pointer;
-      gap: $mu050;
-      white-space: nowrap;
-
-      &--with-before-slot {
-        padding-left: $mu100;
-      }
-
-      &--with-after-slot {
-        padding-right: $mu100;
-      }
-    }
-  }
-}
-</style>

package/src/components/accordion/index.js

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

package/src/components/autocomplete/MAutocomplete.vue

@@ -1,380 +0,0 @@
-<template>
-  <div
-    v-click-outside="onClickOutside"
-    class="mc-autocomplete"
-    :class="{ 'mc-autocomplete--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-autocomplete__tag"
-      size="s"
-      @remove-tag="clearAutocomplete()"
-    />
-    <MLoader v-if="loading" class="mc-autocomplete__loader" size="s" />
-    <MTextInput
-      :id="id"
-      v-model="inputValue"
-      :placeholder="placeholder"
-      :is-invalid="invalid"
-      :disabled="disabled"
-      text-input-field-class="mc-autocomplete__trigger"
-      icon-position="left"
-      icon="DisplaySearch48"
-      autocomplete="off"
-      type="search"
-      @input="onInput"
-      @click="openState = true"
-    />
-    <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"
-      :is-filtered="isFiltered"
-      :max-width="maxWidth"
-      @change="onChange"
-    >
-      <template #item="{ item }">
-        <slot name="item" :item="item"></slot>
-      </template>
-    </MListBox>
-  </div>
-</template>
-
-<script>
-import MTag from '../tags/MTag.vue';
-import MLoader from '../loader/MLoader.vue';
-import MTextInput from '../textinput/MTextInput.vue';
-import MListBox from '../listbox/MListBox.vue';
-
-export default {
-  name: 'MAutocomplete',
-
-  components: {
-    MTag,
-    MLoader,
-    MTextInput,
-    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
-    id: {
-      type: String,
-      default: null,
-    },
-    input: {
-      type: String,
-      default: null,
-    },
-    placeholder: {
-      type: String,
-      default: null,
-    },
-    filter: {
-      type: Function,
-      default: null,
-    },
-    filterOnType: {
-      type: Boolean,
-      default: true,
-    },
-    disabled: {
-      type: Boolean,
-      default: false,
-    },
-    invalid: {
-      type: Boolean,
-      default: false,
-    },
-    loading: {
-      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: '100%', // 17.875rem
-    },
-  },
-
-  data() {
-    return {
-      uuid: Math.random(),
-      openState: this.open,
-      tagWidth: '0px',
-      tagValue: null,
-      inputValue: null,
-      localItems: null,
-      sortedListItems: null,
-      listboxValue: null,
-      isFiltered: 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) {
-      if (!this.multiple) {
-        const selectedItems = this.getSelectedItems(val);
-        const seletedLabels = selectedItems.map(
-          (item) => item[this.dataTextExpr]
-        );
-
-        this.inputValue = seletedLabels.join(', ');
-      } else {
-        this.tagValue = val;
-      }
-    },
-
-    tagValue: function () {
-      this.setTagWidth();
-    },
-
-    openState: function (val) {
-      const eventName = val ? 'open' : 'close';
-      this.$emit(eventName);
-      this.$emit('update:open', val);
-    },
-
-    input: {
-      handler: function (val) {
-        this.inputValue = val;
-      },
-      immediate: true,
-    },
-  },
-
-  methods: {
-    setTagWidth() {
-      this.$nextTick(() => {
-        if (this.$refs.tag && this.$refs.tag.$el) {
-          this.tagWidth = this.$refs.tag.$el.clientWidth + 'px';
-        } else {
-          this.tagWidth = '0px';
-        }
-      });
-    },
-
-    clearAutocomplete() {
-      this.listboxValue = this.multiple ? [] : undefined;
-      this.onChange();
-      this.$emit('clear');
-    },
-
-    filterList(value) {
-      if (value.length && this.filter) {
-        this.filter(value);
-      } else if (value.length && this.filterOnType) {
-        this.localItems = this.items.filter((item) =>
-          item[this.dataTextExpr].toUpperCase().includes(value.toUpperCase())
-        );
-
-        this.isFiltered = !this.localItems.length;
-      } else {
-        this.localItems = this.items;
-        this.isFiltered = !this.localItems.length;
-      }
-      this.$emit('list-filtered', this.localItems);
-    },
-
-    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) => {
-        return this.multiple
-          ? value.includes(item[this.dataValueExpr])
-          : value === 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;
-        }
-      });
-
-      this.localItems = this.sortedListItems;
-    },
-
-    handleInputValue(value) {
-      this.$emit('update:input', value);
-    },
-
-    onInput(value) {
-      this.handleInputValue(value);
-      this.filterList(value);
-    },
-  },
-};
-</script>
-
-<style lang="scss">
-@import 'settings-tools/all-settings';
-@import 'components/c.autocomplete';
-
-.mc-autocomplete {
-  max-width: var(--max-width);
-
-  &__tag {
-    position: absolute;
-    top: 0;
-    transform: translateY(50%);
-  }
-
-  &__loader {
-    position: absolute;
-    right: $mu075;
-    top: $mu075;
-    z-index: 10;
-  }
-
-  &__trigger {
-    width: 100%;
-  }
-}
-
-.mc-autocomplete--multi .mc-autocomplete__trigger {
-  overflow: hidden;
-  padding-left: calc(2.9375rem + var(--tag-width));
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-</style>

package/src/components/autocomplete/index.js

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

package/src/components/badge/MBadge.vue

@@ -1,43 +0,0 @@
-<template>
-  <component :is="htmlTag" class="mc-badge" :class="setClasses">
-    <slot />
-  </component>
-</template>
-
-<script>
-export default {
-  name: 'MBadge',
-
-  props: {
-    type: {
-      type: String,
-      default: null,
-      validator: (value) =>
-        ['information', 'success', 'warning', 'danger', 'neutral'].includes(
-          value
-        ),
-    },
-    htmlTag: {
-      type: String,
-      default: 'span',
-    },
-  },
-
-  computed: {
-    setClasses() {
-      const classes = [];
-
-      if (this.type) {
-        classes.push(`mc-badge--${this.type}`);
-      }
-
-      return classes;
-    },
-  },
-};
-</script>
-
-<style lang="scss">
-@import 'settings-tools/_all-settings';
-@import 'components/_c.badge';
-</style>

package/src/components/badge/index.js

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

package/src/components/breadcrumb/index.js

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

package/src/components/button/index.js

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

package/src/components/card/MCard.vue

@@ -1,78 +0,0 @@
-<template>
-  <div class="mc-card" :class="{ 'mc-card--bordered': outlined }">
-    <figure
-      class="mc-card__visual"
-      :class="imageratio ? `mc-card__visual--${imageratio}` : ''"
-    >
-      <img :src="imgSrc" :loading="lazy ? 'lazy' : 'eager'" :alt="imgAlt" class="mc-card__img" />
-      <slot name="image" />
-    </figure>
-    <article class="mc-card__content">
-      <component :is="titleTag" class="mc-card__title">
-        {{ title }}
-      </component>
-      <component :is="subtitleTag" v-if="subtitle" class="mc-card__subtitle">
-        {{ subtitle }}
-      </component>
-      <div class="mc-card__body">
-        <slot />
-      </div>
-      <footer v-if="$slots.footer" class="mc-card__footer">
-        <slot name="footer" />
-      </footer>
-    </article>
-  </div>
-</template>
-
-<script>
-export default {
-  name: 'MCard',
-
-  props: {
-    title: {
-      type: String,
-      required: true,
-    },
-    imgSrc: {
-      type: String,
-      required: true,
-    },
-    lazy: {
-      type: Boolean,
-      default: false
-    },
-    outlined: {
-      type: Boolean,
-      default: false,
-    },
-    titleTag: {
-      type: String,
-      default: 'h1',
-      validator: (value) =>
-        ['h1', 'h2', 'h3', 'h4', 'h5', 'h6'].includes(value),
-    },
-    imgAlt: {
-      type: String,
-      default: '',
-    },
-    subtitle: {
-      type: String,
-      default: null,
-    },
-    subtitleTag: {
-      type: String,
-      default: 'h2',
-    },
-    imageratio: {
-      type: String,
-      default: null,
-      validator: (value) => ['1x1', '4x3', '16x9'].includes(value),
-    },
-  },
-};
-</script>
-
-<style lang="scss">
-@import 'settings-tools/_all-settings';
-@import 'components/_c.card';
-</style>

package/src/components/card/index.js

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