@mozaic-ds/vue 1.0.0-rc.2 → 2.1.0

package/src/components/layer/MLayer.vue

@@ -1,208 +0,0 @@
-<template>
-  <div>
-    <div
-      ref="layer"
-      class="mc-layer"
-      :class="{ 'mc-layer--ltr': position === 'left' }"
-      role="dialog"
-      aria-labelledby="layerTitle"
-      :aria-modal="open"
-      :aria-hidden="!open"
-      tabindex="-1"
-      @keyup.esc="closeLayer()"
-    >
-      <div
-        class="mc-layer__dialog"
-        :class="{ 'is-open': open, 'mc-layer__dialog--extend': extended }"
-        role="document"
-      >
-        <div class="mc-layer__header">
-          <m-icon v-if="headerIcon" :name="headerIcon" class="mc-layer__icon" />
-          <component
-            :is="layerTitleTag"
-            id="layerTitle"
-            class="mc-layer__title"
-          >
-            {{ layerTitle }}
-          </component>
-          <button
-            ref="close"
-            class="mc-layer__close"
-            type="button"
-            @click="closeLayer()"
-          >
-            <span class="mc-layer__close-text">
-              {{ closeButtonText }}
-            </span>
-          </button>
-        </div>
-        <div ref="body" class="mc-layer__body">
-          <div ref="content" class="mc-layer__content">
-            <slot />
-          </div>
-        </div>
-        <div v-if="$slots.footer" class="mc-layer__footer">
-          <slot name="footer" />
-        </div>
-      </div>
-    </div>
-    <div
-      class="mc-layer-overlay"
-      :class="{ 'is-visible': open }"
-      tabindex="-1"
-      role="dialog"
-      @click="closeOnOverlay && closeLayer()"
-    />
-  </div>
-</template>
-
-<script>
-import MIcon from '../icon/MIcon.vue';
-
-export default {
-  name: 'MLayer',
-
-  components: {
-    MIcon,
-  },
-
-  props: {
-    open: {
-      type: Boolean,
-      default: false,
-    },
-    headerIcon: {
-      type: String,
-      default: null,
-    },
-    layerTitle: {
-      type: String,
-      required: true,
-    },
-    layerTitleTag: {
-      type: String,
-      default: 'h2',
-    },
-    closeButtonText: {
-      type: String,
-      default: 'Close',
-      validator: (value) => value !== '',
-    },
-    extended: {
-      type: Boolean,
-      default: false,
-    },
-    closeOnOverlay: {
-      type: Boolean,
-      default: false,
-    },
-    scrollbarEdge: {
-      type: Boolean,
-      default: false,
-    },
-    position: {
-      type: String,
-      default: 'right',
-      validator: (value) => ['right', 'left'].includes(value),
-    },
-  },
-
-  watch: {
-    open(isOpen) {
-      this.$nextTick(() => {
-        if (isOpen) {
-          this.trapFocus();
-          document.body.classList.add('mc-layer-open');
-          this.$emit('layer-opened');
-        } else {
-          document.body.classList.remove('mc-layer-open');
-          this.$emit('layer-closed');
-        }
-      });
-    },
-  },
-
-  mounted() {
-    this.$nextTick(() => {
-      this.setOverflow();
-    });
-  },
-
-  methods: {
-    closeLayer: function () {
-      this.$emit('update:open', false);
-    },
-
-    trapFocus: function () {
-      const layer = document.querySelector('.mc-layer');
-      const focusableElements = layer.querySelectorAll(
-        'a[href], button, input, select, textarea, [tabindex]:not([tabindex="-1"])'
-      );
-      const firstFocusableElement = focusableElements[0]; // get first element to be focused inside layer
-      const lastFocusableElement =
-        focusableElements[focusableElements.length - 1];
-
-      document.addEventListener('keydown', function (e) {
-        const isTabPressed = e.key === 'Tab' || e.keyCode === 9;
-
-        if (!isTabPressed) {
-          return;
-        }
-
-        if (e.shiftKey) {
-          // if shift key pressed for shift + tab combination
-          if (document.activeElement === firstFocusableElement) {
-            lastFocusableElement.focus(); // add focus for the last focusable element
-            e.preventDefault();
-          }
-        } else {
-          // if tab key is pressed
-          if (document.activeElement === lastFocusableElement) {
-            // if focused has reached to last focusable element then focus first focusable element after pressing tab
-            firstFocusableElement.focus(); // add focus for the first focusable element
-            e.preventDefault();
-          }
-        }
-      });
-    },
-
-    setOverflow: function () {
-      const layer = this.$refs.layer;
-      const body = this.$refs.body;
-      const content = this.$refs.content;
-      const overflowingClass = !this.scrollbarEdge
-        ? 'mc-layer__body--overflowing'
-        : 'mc-layer__body--overflowing-scroll-edge';
-
-      const ro = new ResizeObserver((entries) => {
-        for (let entry of entries) {
-          const bodyHeight =
-            layer.querySelector('.mc-layer__body').clientHeight;
-          const contentHeight = entry.target.scrollHeight;
-
-          if (contentHeight > bodyHeight) {
-            body.classList.add(overflowingClass);
-          } else {
-            body.classList.remove(overflowingClass);
-          }
-        }
-      });
-
-      ro.observe(content);
-    },
-  },
-};
-</script>
-
-<style lang="scss">
-@import 'settings-tools/_all-settings';
-@import 'components/_c.layer';
-
-// NOTE: temporary fix
-.mc-layer__body--overflowing,
-.mc-layer__body--overflowing-scroll-edge {
-  &::after {
-    pointer-events: none;
-  }
-}
-</style>

package/src/components/layer/index.js

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

package/src/components/link/index.js

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

package/src/components/listbox/MListBox.vue

@@ -1,146 +0,0 @@
-<template>
-  <ul
-    role="listbox"
-    class="mc-listbox"
-    aria-labelledby="listbox"
-    :class="{ 'is-open': open, 'mc-listbox--multi': multiple }"
-    :style="{ '--listbox-width': maxWidth }"
-  >
-    <template v-if="!isFiltered">
-      <li
-        v-for="(item, index) in localItems"
-        :key="item.id"
-        class="mc-listbox__item"
-      >
-        <MIcon
-          v-if="item.icon"
-          :name="item.icon"
-          class="mc-listbox__icon"
-          color="#666666"
-        />
-        <input
-          :id="setItemId(index)"
-          v-model="localValue"
-          class="mc-listbox__input"
-          :class="{ 'mc-checkbox__input': multiple }"
-          :type="multiple ? 'checkbox' : 'radio'"
-          :value="item[dataValueExpr]"
-          :name="!multiple ? `listboxradio-${uuid}` : null"
-          @change="onChange"
-        />
-        <label :for="setItemId(index)" class="mc-listbox__label">
-          <slot name="item" :item="item">
-            {{ item[dataTextExpr] }}
-          </slot>
-        </label>
-      </li>
-    </template>
-    <li v-else class="mc-listbox__item">
-      <span class="mc-listbox__empty">{{ emptySearchLabel }}</span>
-    </li>
-  </ul>
-</template>
-
-<script>
-import MIcon from '../icon/MIcon.vue';
-
-export default {
-  name: 'MListBox',
-
-  components: {
-    MIcon,
-  },
-
-  model: {
-    event: 'change',
-  },
-
-  props: {
-    items: {
-      type: Array,
-      required: true,
-    },
-    open: {
-      type: Boolean,
-      default: false,
-    },
-    isFiltered: {
-      type: Boolean,
-      default: false,
-    },
-    multiple: {
-      type: Boolean,
-      default: false,
-    },
-    emptySearchLabel: {
-      type: String,
-      default: 'No item matching your criteria found',
-    },
-    dataKeyExpr: {
-      type: String,
-      default: 'id',
-    },
-    dataTextExpr: {
-      type: String,
-      default: 'label',
-    },
-    dataValueExpr: {
-      type: String,
-      default: 'value',
-    },
-    value: {
-      type: [Array, String, Number],
-      default: undefined,
-    },
-    maxWidth: {
-      type: String,
-      default: '17.875rem',
-    },
-  },
-
-  data() {
-    return {
-      uuid: Math.random(),
-      localItems: undefined,
-      localValue: undefined,
-    };
-  },
-
-  computed: {
-    setItemId() {
-      return (index) => `listboxItem-${index + this.uuid}`;
-    },
-  },
-
-  watch: {
-    items: {
-      handler: function (val) {
-        this.localItems = val;
-      },
-      immediate: true,
-    },
-    value: {
-      handler: function (val) {
-        this.localValue = val;
-      },
-      immediate: true,
-    },
-  },
-
-  methods: {
-    onChange() {
-      this.$emit('change', this.localValue);
-    },
-  },
-};
-</script>
-
-<style lang="scss">
-@import 'settings-tools/all-settings';
-@import 'components/c.checkbox';
-@import 'components/c.listbox';
-
-.mc-listbox__empty {
-  margin-top: 0;
-}
-</style>

package/src/components/listbox/MListBoxActions.vue

@@ -1,251 +0,0 @@
-<template>
-  <div v-click-outside="onClickOutside" class="mc-listbox-options">
-    <button
-      type="button"
-      class="mc-listbox-options__trigger"
-      @click="isOpen = !isOpen"
-    >
-      <m-icon name="DisplayOptions24" />
-      <span class="mc-listbox-options__trigger-label">{{ triggerLabel }}</span>
-    </button>
-    <div
-      ref="listbox"
-      class="mc-listbox-options__container"
-      :class="{ 'is-open': isOpen, 'align-right': position == 'right' }"
-      role="listbox"
-      aria-labelledby="listbox"
-    >
-      <ul
-        v-for="(list, i) in listItems"
-        :key="`list${i}`"
-        class="mc-listbox-options__list"
-      >
-        <li
-          v-for="(item, j) in list"
-          :key="`item${j}`"
-          class="mc-listbox-options__tile"
-          :class="{ 'is-disabled': item.disabled }"
-        >
-          <m-icon
-            v-if="item.icon"
-            :name="item.icon"
-            class="mc-listbox-options__icon"
-            :color="item.danger ? '#C61112' : '#71706B'"
-          />
-          <component
-            :is="item.href ? 'a' : 'button'"
-            :href="item.href ? item.href : null"
-            :type="item.href ? null : 'button'"
-            :disabled="item.disabled ? true : null"
-            class="mc-listbox-options__item"
-            :class="{ 'is-danger': item.danger, 'is-disabled': item.disabled }"
-            @click.self="onClickItem(item, i, j)"
-          >
-            {{ item.text }}
-          </component>
-        </li>
-      </ul>
-    </div>
-  </div>
-</template>
-
-<script>
-import MIcon from '../icon/MIcon.vue';
-
-export default {
-  name: 'MListBoxActions',
-
-  components: {
-    MIcon,
-  },
-
-  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);
-      },
-    },
-  },
-
-  props: {
-    open: {
-      type: Boolean,
-      default: false,
-    },
-    position: {
-      type: String,
-      default: 'left',
-    },
-    items: {
-      type: Array,
-      default: () => [],
-    },
-    triggerLabel: {
-      type: String,
-      default: 'Display options',
-    },
-  },
-
-  data() {
-    return {
-      isOpen: this.open,
-    };
-  },
-
-  computed: {
-    listItems: function () {
-      const hasNestedArray = this.items.filter(Array.isArray).length;
-
-      if (hasNestedArray === 0) {
-        const listItems = [];
-        listItems.push(this.items);
-        return [this.items];
-      }
-
-      return this.items;
-    },
-  },
-
-  methods: {
-    onClickOutside() {
-      this.isOpen = false;
-    },
-    onClickItem(item, listIndex, itemIndex) {
-      const valToEmit = Object.assign(
-        { listIndex: listIndex, itemIndex: itemIndex },
-        item
-      );
-      this.$emit('update:itemSelected', valToEmit);
-    },
-  },
-};
-</script>
-
-<style lang="scss">
-@import 'settings-tools/all-settings';
-
-.mc-listbox-options {
-  display: inline-block;
-  position: relative;
-
-  &__trigger {
-    align-items: center;
-    background: none;
-    border: none;
-    cursor: pointer;
-    display: flex;
-    height: $mu150;
-    justify-content: center;
-    padding: 0;
-    width: $mu150;
-
-    &-label {
-      @include visually-hidden();
-    }
-  }
-
-  &__container {
-    position: absolute;
-    overflow-y: auto;
-    opacity: 0;
-    visibility: hidden;
-    min-width: $mu800;
-    background-color: $color-grey-000;
-    border: 1px solid $color-grey-600;
-    border-radius: 3px;
-
-    &.is-open {
-      opacity: 1;
-      visibility: visible;
-      z-index: 11;
-    }
-
-    &.align-right {
-      transform: translateX(calc(-100% + #{$mu150}));
-    }
-  }
-
-  &__list {
-    $parent: get-parent-selector(&);
-    @include unstyle-list();
-    margin: 0 auto;
-    padding: 8px 0;
-
-    &::-webkit-scrollbar {
-      background-color: $color-grey-100;
-      width: $mu025;
-
-      &-thumb {
-        background: $color-grey-600;
-      }
-    }
-
-    &:not(:last-child) {
-      border-bottom: 1px solid #bab6bc;
-    }
-  }
-
-  &__tile {
-    align-items: center;
-    color: #1e1e1c;
-    display: flex;
-    gap: $mu050;
-    min-height: $mu250;
-    padding-left: $mu075;
-    padding-right: $mu075;
-    position: relative;
-
-    &:hover {
-      background-color: #eeedea;
-    }
-
-    &.is-disabled {
-      background-color: $color-grey-200;
-
-      &,
-      .mc-listbox-options__item {
-        color: $color-grey-600;
-        cursor: not-allowed;
-        pointer-events: none;
-      }
-    }
-  }
-
-  &__item {
-    @include set-font-scale('05', 'm');
-
-    background: none;
-    border: none;
-    color: currentColor;
-    cursor: pointer;
-    padding: 0;
-    white-space: nowrap;
-
-    &::after {
-      content: '';
-      position: absolute;
-      inset: 0;
-      z-index: 2;
-    }
-
-    &,
-    &:active,
-    &:hover,
-    &:focus {
-      text-decoration: none;
-    }
-
-    &.is-danger {
-      color: #c61112;
-    }
-  }
-}
-</style>

package/src/components/listbox/index.js

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

package/src/components/loader/index.js

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

package/src/components/modal/index.js

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