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

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,120 +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,
-    };
-  },
-
-  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;
-      });
-    },
-  },
-
-  render: function (createElement) {
-    const paths = this.paths;
-    const svgAttrs = {
-      id: `MIcon-${this.name}-${this.id}`,
-      viewBox: this.viewbox,
-      height: this.size,
-      width: this.size,
-      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,43 +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 { 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 } 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';

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,106 +0,0 @@
-<template>
-  <ul
-    v-if="items.length > 0"
-    ref="listbox"
-    role="listbox"
-    class="mc-listbox"
-    aria-labelledby="listbox"
-    :class="{ 'is-open': open, 'mc-listbox--multi': multiple }"
-  >
-    <li
-      v-for="item in selectableItems"
-      :key="item.id"
-      class="mc-listbox__item"
-      @change="$emit('update:itemSelected', item)"
-      @click.self="updateList(item.id, item.text, !item.selected, true)"
-    >
-      <slot name="item" :item="item">
-        <span class="mc-listbox__text">{{ item.text }} </span>
-      </slot>
-      <m-checkbox
-        v-if="multiple"
-        :id="`checkbox-dropdown-${item.id}`"
-        v-model="selectableItems.find((elem) => elem.id === item.id).selected"
-        class="mc-listbox__input"
-        @change="updateList(item.id, item.text, !item.selected, $e)"
-      />
-    </li>
-  </ul>
-  <div v-else class="mc-list-box__empty">
-    {{ emptySearchLabel }}
-  </div>
-</template>
-<script>
-import MCheckbox from '../checkbox/MCheckbox.vue';
-export default {
-  name: 'MListbox',
-
-  components: { MCheckbox },
-
-  props: {
-    open: {
-      type: Boolean,
-      default: false,
-    },
-    items: {
-      type: Array,
-      default: () => [],
-    },
-    multiple: {
-      type: Boolean,
-      default: false,
-    },
-    emptySearchLabel: {
-      type: String,
-      default: 'No item matching your criteria found',
-    },
-    icon: {
-      type: Boolean,
-      default: false,
-    },
-  },
-  data() {
-    return {
-      selectableItems: null,
-      selected: [],
-    };
-  },
-  watch: {
-    items: {
-      handler: function (val) {
-        this.selectableItems = val;
-      },
-      immediate: true,
-    },
-  },
-  methods: {
-    updateList(id, text, value, isCheckboxUpdate) {
-      if (!this.multiple) {
-        this.$emit('update:itemSelected', [{ id, selected: value, text }]);
-
-        this.$emit('close-list-box');
-        return;
-      }
-
-      if (
-        isCheckboxUpdate &&
-        this.selectableItems.find((item) => item.id === id)
-      ) {
-        this.selectableItems.find((item) => item.id === id).selected = value;
-      }
-
-      if (value) {
-        this.selected = [...this.selected, { id, selected: value, text }];
-      } else {
-        this.selected = this.selected.filter((item) => item.id !== id);
-      }
-      this.$emit('update:itemSelected', this.selectableItems);
-    },
-  },
-};
-</script>
-
-<style lang="scss">
-@import 'settings-tools/_all-settings';
-@import 'components/_c.listbox';
-</style>

package/src/components/listbox/index.js

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

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