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

package/src/components/tabs/MTab.vue

@@ -13,18 +13,8 @@
         class="mc-tabs__item"
         role="presentation"
       >
-        <component
-          :is="`${tab.router}`"
-          v-if="tab.router"
-          v-bind="tab.attrs"
-          :to="tab.to"
-          active-class="mc-tabs__link--selected"
-        >
-          {{ tab.text }}
-        </component>
         <component
           :is="tab.href ? (tab.disabled ? 'span' : 'a') : 'button'"
-          v-else
           :id="tab.id"
           ref="tab"
           :href="tab.href ? (!tab.disabled ? tab.href : null) : null"
@@ -33,9 +23,14 @@
           class="mc-tabs__link"
           role="tab"
           :aria-selected="tab.active ? 'true' : 'false'"
-          :class="setLinkClass(tab)"
-          v-bind="tab.attrs"
-          @click="onTabClicked($event, tab, index)"
+          :class="setActiveClass(tab)"
+          @click="
+            manageTabs(
+              $event.target,
+              $event,
+              Object.assign({ index: index }, tab)
+            )
+          "
         >
           {{ tab.text }}
         </component>
@@ -87,41 +82,38 @@ export default {
     },
     activeIndex: {
       type: Number,
-      default: null,
+      default: 0,
     },
   },
 
   data() {
     return {
       tablist: null,
-      localActiveIndex: null,
     };
   },
 
   computed: {
     setClasses() {
-      return {
-        'mc-tabs--full': this.align === 'full',
-        'mc-tabs--full-centered': this.align === 'centered',
-        'mc-tabs--dropdown': this.type === 'dropdown',
-        'mc-tabs--no-shadow': !this.shadow,
-      };
+      const classes = [
+        {
+          'mc-tabs--full': this.align === 'full',
+          'mc-tabs--full-centered': this.align === 'centered',
+          'mc-tabs--dropdown': this.type === 'dropdown',
+          'mc-tabs--no-shadow': !this.shadow,
+        },
+      ];
+
+      return classes;
     },
   },
 
   watch: {
     activeIndex(newValue) {
-      this.localActiveIndex = newValue;
-    },
-    localActiveIndex: {
-      handler: function (newValue) {
-        const selectedTab = this.getTabFromIndex(newValue);
-        if (selectedTab) {
-          this.setTabState(selectedTab);
-        }
-      },
-      immediate: true,
-    },
+      const tab = this.getTabFromIndex(newValue);
+      if (tab && this.tabs[newValue]) {
+        this.manageTabs(tab, null, Object.assign({index: newValue}, this.tabs[newValue]));
+      }
+    }
   },
 
   mounted: function () {
@@ -130,16 +122,17 @@ export default {
         this.tablist = this.$refs.tablist;
 
         if (this.activeIndex) {
-          this.localActiveIndex = this.activeIndex;
+          const tab = this.getTabFromIndex(this.activeIndex);
+          if (tab) {
+            this.manageTabs(tab);
+          }
         } else {
-          const isActive = this.tabs.some(
-            (tab) =>
-              Object.prototype.hasOwnProperty.call(tab, 'active') &&
-              tab.active === true
+          const isActive = this.tabs.some((tab) =>
+              Object.prototype.hasOwnProperty.call(tab, 'active')
           );
-
           if (!isActive) {
-            this.localActiveIndex = 0;
+            const firstTab = this.tablist.querySelector('.mc-tabs__link');
+            this.manageTabs(firstTab);
           }
         }
       }
@@ -147,50 +140,40 @@ export default {
   },
 
   methods: {
-    setLinkClass: function (tab) {
-      return {
-        'mc-tabs__link--selected': tab.active,
-        'mc-tabs__link--disabled': tab.disabled,
-      };
-    },
-    setTabState(tab) {
-      this.tablist.querySelectorAll('.mc-tabs__link').forEach((el) => {
-        el.classList.remove('mc-tabs__link--selected');
-        el.setAttribute('aria-selected', 'false');
-      });
+    setActiveClass: function (tab) {
+      const tabClasses = [];
 
-      tab.classList.add('mc-tabs__link--selected');
-      tab.setAttribute('aria-selected', 'true');
+      if (tab.active) {
+        tabClasses.push('mc-tabs__link--selected');
+      }
+
+      if (tab.disabled) {
+        tabClasses.push('mc-tabs__link--disabled');
+      }
+
+      return tabClasses;
     },
-    setTabState(tab) {
+    manageTabs: function (el, e, tab) {
+      if (tab && tab.disabled) {
+        return;
+      }
+      if (e) {
+        this.$emit('tab-clicked', e.target, tab);
+      }
+
       this.tablist.querySelectorAll('.mc-tabs__link').forEach((el) => {
         el.classList.remove('mc-tabs__link--selected');
         el.setAttribute('aria-selected', 'false');
       });
 
-      tab.classList.add('mc-tabs__link--selected');
-      tab.setAttribute('aria-selected', 'true');
+      el.classList.add('mc-tabs__link--selected');
+      el.setAttribute('aria-selected', 'true');
     },
     getTabFromIndex: function (index) {
-      if (
-        this.tablist &&
-        this.tablist.children[index] &&
-        this.tablist.children[index].children[0]
-      ) {
+      if (this.tablist && this.tablist.children[index] && this.tablist.children[index].children[0]) {
         return this.tablist.children[index].children[0];
       }
     },
-    onTabClicked(e, tab, index) {
-      if (tab && tab.disabled) {
-        return;
-      }
-
-      if (typeof this.activeIndex !== 'number') {
-        this.localActiveIndex = index;
-      }
-
-      this.$emit('tab-clicked', e.target, Object.assign({ index: index }, tab));
-    },
   },
 };
 </script>

package/src/components/textinput/MTextInputField.vue

@@ -6,6 +6,7 @@
     :class="setClasses"
     :aria-invalid="isInvalid"
     :value="value"
+    @input="$emit('input', $event.target.value)"
     v-on="inputListeners"
   />
 </template>

package/src/index.js

@@ -37,7 +37,7 @@ export { MHero } from './components/hero';
 export { MIcon } from './components/icon';
 export { MLayer } from './components/layer';
 export { MLink } from './components/link';
-export { MListBox, MListBoxActions } from './components/listbox';
+export { MListBox } from './components/listbox';
 export { MLoader } from './components/loader';
 export { MModal } from './components/modal';
 export { MNotification } from './components/notification';

package/types/index.d.ts

@@ -24,7 +24,6 @@ declare module '@mozaic-ds/vue' {
   const MLayer: VueConstructor;
   const MLink: VueConstructor;
   const MListBox: VueConstructor;
-  const MListBoxActions: VueConstructor;
   const MLoader: VueConstructor;
   const MModal: VueConstructor;
   const MNotification: VueConstructor;
@@ -72,7 +71,6 @@ declare module '@mozaic-ds/vue' {
     MLayer,
     MLink,
     MListBox,
-    MListBoxActions,
     MLoader,
     MModal,
     MNotification,

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>