@mozaic-ds/vue 0.30.0-beta.0 → 0.30.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mozaic-ds/vue",
-  "version": "0.30.0-beta.0",
+  "version": "0.30.0",
   "description": "Vue.js implementation of Mozaic Design System",
   "author": "Adeo - Mozaic Design System",
   "scripts": {

package/src/components/quantityselector/MQuantitySelector.vue

@@ -29,7 +29,7 @@
       :size="small ? 's' : null"
       :disabled="disabled"
       role="spinbutton"
-      @input="handle"
+      @change="handle"
       @focus="onFocus"
       @keypress="integerOnly && formatValue($event)"
       v-on="$listeners"
@@ -130,7 +130,7 @@ export default {
       if (this.currentValue > this.valuemax) {
         this.currentValue = this.valuemax;
       }
-      if (this.currentValue < this.valuemin) {
+      if (this.currentValue <= this.valuemin) {
         this.currentValue = this.valuemin;
       }
       this.$emit('input', this.currentValue);

package/src/components/tabs/MTab.vue

@@ -2,25 +2,47 @@
   <div :class="['mc-tabs', setClasses]">
     <ul
       v-if="type !== 'dropdown'"
-      role="tablist"
+      ref="tablist"
       class="mc-tabs__nav"
+      role="tablist"
       :aria-label="description"
     >
       <li
         v-for="(tab, index) in tabs"
         :key="`tab-${index}`"
-        role="presentation"
         class="mc-tabs__item"
+        role="presentation"
       >
         <component
-          :is="setTabElement(tab)"
+          :is="`${tab.router}`"
+          v-if="tab.router"
+          v-bind="tab.attrs"
+          :to="tab.to"
+          class="mc-tabs__element"
+          :class="setActiveClass(tab)"
+          active-class="mc-tabs__element--selected"
+        >
+          <span class="mc-tabs__text">{{ tab.text }}</span>
+        </component>
+        <component
+          :is="tab.href ? (tab.disabled ? 'span' : 'a') : 'button'"
+          v-else
           :id="tab.id"
-          v-bind="setTabAttributes(tab, index)"
           ref="tab"
-          role="tab"
+          :href="tab.href ? (!tab.disabled ? tab.href : null) : null"
+          :type="!tab.href ? 'button' : null"
+          :disabled="!tab.href && tab.disabled ? true : null"
           class="mc-tabs__element"
-          :class="setTabClass(tab, index)"
-          @click="onTabClicked($event, tab, index)"
+          role="tab"
+          :aria-selected="tab.active ? 'true' : 'false'"
+          :class="setActiveClass(tab)"
+          @click="
+            manageTabs(
+              $event.target,
+              $event,
+              Object.assign({ index: index }, tab)
+            )
+          "
         >
           <span class="mc-tabs__text">{{ tab.text }}</span>
         </component>
@@ -44,6 +66,9 @@ export default {
     tabs: {
       type: Array,
       required: true,
+      default() {
+        return [];
+      },
     },
     type: {
       type: String,
@@ -59,18 +84,10 @@ export default {
       default: 'auto',
       validator: (value) => ['auto', 'full', 'centered'].includes(value),
     },
-    /**
-     * Remove the tabs shadow
-     * @deprecated Use the nodivider prop instead
-     */
     shadow: {
       type: Boolean,
       default: true,
     },
-    nodivider: {
-      type: Boolean,
-      default: false,
-    },
     selectAttributes: {
       type: Object,
       default: null,
@@ -83,98 +100,99 @@ export default {
 
   data() {
     return {
-      localActiveIndex: this.setLocalActiveIndex(),
+      tablist: 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,
-        'mc-tabs--no-divider': this.nodivider,
-      };
+      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;
     },
   },
 
-  mounted() {
-    console.log('activeIndex:', this.activeIndex);
-    console.log('localActiveIndex:', this.localActiveIndex);
+  watch: {
+    activeIndex(newValue) {
+      const tab = this.getTabFromIndex(newValue);
+      if (tab && this.tabs[newValue]) {
+        this.manageTabs(
+          tab,
+          null,
+          Object.assign({ index: newValue }, this.tabs[newValue])
+        );
+      }
+    },
   },
 
-  updated() {
-    console.log('updated');
+  mounted: function () {
+    this.$nextTick(() => {
+      if (this.type === 'tabs') {
+        this.tablist = this.$refs.tablist;
+
+        if (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')
+          );
+          if (!isActive) {
+            const firstTab = this.tablist.querySelector('.mc-tabs__element');
+            this.manageTabs(firstTab);
+          }
+        }
+      }
+    });
   },
 
   methods: {
-    setTabElement(tab) {
-      const tabElement = tab.href ? (tab.disabled ? 'span' : 'a') : 'button';
-      const routerElement = this.router ?? null;
-
-      return routerElement ?? tabElement;
-    },
-    setTabAttributes(tab, index) {
-      const href = tab.href ? (tab.disabled ? null : tab.href) : null;
-      const type = !tab.href ? 'button' : null;
-      const disabled = !tab.href && tab.disabled ? true : null;
-
-      return {
-        ...tab.attrs,
-        href,
-        type,
-        disabled,
-        'aria-selected': this.isTabActive(index).toString(),
-      };
-    },
-    setTabClass(tab, index) {
-      return [
-        tab.class,
-        {
-          'mc-tabs__element--selected': this.isTabActive(index),
-          'mc-tabs__element--disabled': tab.disabled,
-        },
-      ];
-    },
-    onTabClicked(event, tab, index) {
-      if (tab && tab.disabled) {
-        event.preventDefault();
+    setActiveClass: function (tab) {
+      const tabClasses = [];
 
-        return;
+      if (tab.active) {
+        tabClasses.push('mc-tabs__element--selected');
       }
 
-      if (index !== this.localActiveIndex) {
-        this.localActiveIndex = index;
-        this.$emit('update:activeIndex', this.localActiveIndex);
+      if (tab.disabled) {
+        tabClasses.push('mc-tabs__element--disabled');
       }
 
-      if (event) {
-        this.$emit('tab-clicked', event.currentTarget, { index, ...tab });
-      }
+      return tabClasses;
     },
-    isTabActive(index) {
-      return this.localActiveIndex === index;
-    },
-    setLocalActiveIndex() {
-      let defaultActiveIndex;
-      const activeAttrIndex = this.tabs.findIndex(
-        (tab) =>
-          Object.prototype.hasOwnProperty.call(tab, 'active') &&
-          tab.active === true
-      );
-
-      if (activeAttrIndex > -1 && !this.activeIndex) {
-        defaultActiveIndex = activeAttrIndex;
-      } else if (this.activeIndex) {
-        defaultActiveIndex = this.activeIndex;
-      } else {
-        defaultActiveIndex = 0;
+    manageTabs: function (el, e, tab) {
+      if (tab && tab.disabled) {
+        return;
+      }
+      if (e) {
+        this.$emit('tab-clicked', e.currentTarget, tab);
       }
 
-      this.$emit('update:activeIndex', defaultActiveIndex);
+      this.tablist.querySelectorAll('.mc-tabs__element').forEach((el) => {
+        el.classList.remove('mc-tabs__element--selected');
+        el.setAttribute('aria-selected', 'false');
+      });
 
-      return defaultActiveIndex;
+      el.classList.add('mc-tabs__element--selected');
+      el.setAttribute('aria-selected', 'true');
+    },
+    getTabFromIndex: function (index) {
+      if (
+        this.tablist &&
+        this.tablist.children[index] &&
+        this.tablist.children[index].children[0]
+      ) {
+        return this.tablist.children[index].children[0];
+      }
     },
   },
 };

package/src/components/tags/MTag.vue

@@ -38,6 +38,7 @@
   </span>
   <span
     v-else-if="type === 'removable'"
+    :id="id"
     class="mc-tag-removable"
     :class="setClasses"
   >
@@ -47,7 +48,8 @@
     <button
       type="button"
       class="mc-tag-removable__remove"
-      @click="$emit('remove-tag')"
+      :disabled="disabled"
+      @click="$emit('remove-tag', id)"
     />
   </span>
 </template>