@mozaic-ds/vue 0.20.0-beta.6 → 0.21.1

package/package.json

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

package/src/components/index.js

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

package/src/components/listbox/{MListBoxOptions.vue → MListBoxActions.vue}

@@ -16,14 +16,15 @@
       aria-labelledby="listbox"
     >
       <ul
-        v-for="(list, index) in listItems"
-        :key="`${list}-${index}`"
+        v-for="(list, i) in listItems"
+        :key="`list${i}`"
         class="mc-listbox-options__list"
       >
         <li
-          v-for="item in list"
-          :key="item.id"
+          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"
@@ -35,9 +36,10 @@
             :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 }"
-            @click.self="$emit('update:itemSelected', item)"
+            :class="{ 'is-danger': item.danger, 'is-disabled': item.disabled }"
+            @click.self="onClickItem(item, i, j)"
           >
             {{ item.text }}
           </component>
@@ -51,7 +53,7 @@
 import MIcon from '../icon/MIcon.vue';
 
 export default {
-  name: 'MListBoxOptions',
+  name: 'MListBoxActions',
 
   components: {
     MIcon,
@@ -116,6 +118,13 @@ export default {
     onClickOutside() {
       this.isOpen = false;
     },
+    onClickItem(item, listIndex, itemIndex) {
+      const valToEmit = Object.assign(
+        { listIndex: listIndex, itemIndex: itemIndex },
+        item
+      );
+      this.$emit('update:itemSelected', valToEmit);
+    },
   },
 };
 </script>
@@ -197,6 +206,17 @@ export default {
     &: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 {

package/src/components/listbox/index.js

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

package/src/components/phonenumber/MPhoneNumber.vue

@@ -80,6 +80,7 @@
       @keydown.backspace="
         (event) => (formatOnBlur ? null : backspaceFunction(event))
       "
+      v-on="$listeners"
     />
   </div>
 </template>

package/src/components/quantityselector/MQuantitySelector.vue

@@ -10,6 +10,7 @@
       :disabled="currentValue === valuemin"
       :size="small ? 's' : null"
       tabindex="-1"
+      type="button"
       @click="decrement()"
     />
 
@@ -28,6 +29,7 @@
       role="spinbutton"
       @input="handle"
       @keypress="integerOnly && formatValue($event)"
+      v-on="$listeners"
     />
 
     <m-button
@@ -40,6 +42,7 @@
       :disabled="currentValue === valuemax"
       :size="small ? 's' : null"
       tabindex="-1"
+      type="button"
       @click="increment()"
     />
   </div>

package/src/components/stepper/MStepper.vue

@@ -1,28 +1,58 @@
 <template>
-  <nav class='mc-stepper' :class="{ 'mc-stepper--compact': compact, 'mc-stepper--shrinked': steps.length > 3}"
-       :aria-label='accessibilityLabels.stepperDescription'>
-    <ol class='mc-stepper__list'>
+  <nav
+    class="mc-stepper"
+    :class="{
+      'mc-stepper--compact': compact,
+      'mc-stepper--shrinked': steps.length > 3,
+    }"
+    :aria-label="accessibilityLabels.stepperDescription"
+  >
+    <ol class="mc-stepper__list">
       <li
-        v-for='(step, idx) in steps'
-        :key='`mc-stepper__item-${idx}`'
-        class='mc-stepper__item'
+        v-for="(step, idx) in steps"
+        :key="`mc-stepper__item-${idx}`"
+        class="mc-stepper__item"
         :class="{
           'mc-stepper__item--validated': isStepValidated(idx),
           'mc-stepper__item--current': step.isCurrent,
         }"
         :aria-current="step.isCurrent ? 'step' : false"
-        :aria-label='stepDescription(step,idx)'
-        :style='`--steps: ${ steps.length }; --current: ${ idx +1 };`'
+        :aria-label="stepDescription(step, idx)"
+        :style="`--steps: ${steps.length}; --current: ${idx + 1};`"
         @click="isStepValidated(idx) && $emit('step-changed', step)"
       >
-        <div class='mc-stepper__indicator' aria-hidden='true'>
-          <m-icon v-if='isStepValidated(idx)' name='NotificationAvailable16' class='mc-stepper__icon' />
-          <span v-else-if='step.isCurrent'>{{ idx + 1 }}</span>
-        </div>
-        <div class='mc-stepper__detail'>
-          <span class='mc-stepper__title'>{{ idx + 1 }} / {{ steps.length }}</span>
-          <span class='mc-stepper__label'>{{ step.label }}</span>
-        </div>
+        <a v-if="step.href" :href="step.href" class="mc-stepper__link">
+          <div class="mc-stepper__indicator" aria-hidden="true">
+            <m-icon
+              v-if="isStepValidated(idx)"
+              name="NotificationAvailable16"
+              class="mc-stepper__icon"
+            />
+            <span v-else-if="step.isCurrent">{{ idx + 1 }}</span>
+          </div>
+          <div class="mc-stepper__detail">
+            <span class="mc-stepper__title"
+              >{{ idx + 1 }} / {{ steps.length }}</span
+            >
+            <span class="mc-stepper__label">{{ step.label }}</span>
+          </div>
+        </a>
+        <template v-else>
+          <div class="mc-stepper__indicator" aria-hidden="true">
+            <m-icon
+              v-if="isStepValidated(idx)"
+              name="NotificationAvailable16"
+              class="mc-stepper__icon"
+            />
+            <span v-else-if="step.isCurrent">{{ idx + 1 }}</span>
+          </div>
+          <div class="mc-stepper__detail">
+            <span class="mc-stepper__title"
+              >{{ idx + 1 }} / {{ steps.length }}</span
+            >
+            <span class="mc-stepper__label">{{ step.label }}</span>
+          </div>
+        </template>
       </li>
     </ol>
   </nav>
@@ -34,37 +64,48 @@ import MIcon from '../icon/MIcon.vue';
 export default {
   name: 'MStepper',
   components: {
-    MIcon
+    MIcon,
   },
   props: {
     steps: {
       type: Array,
-      required: true
+      required: true,
     },
     compact: {
       type: Boolean,
-      default: false
+      default: false,
     },
     accessibilityLabels: {
       type: Object,
-      required: true
-    }
+      required: true,
+    },
   },
   methods: {
     isStepValidated(index) {
-      return index < this.steps.findIndex(step => step.isCurrent);
+      return index < this.steps.findIndex((step) => step.isCurrent);
     },
     stepDescription(step, index) {
-      return '#' + (index + 1) + ' ' + step.label + ', ' + this.stepStateLabel(step,index);
+      return (
+        '#' +
+        (index + 1) +
+        ' ' +
+        step.label +
+        ', ' +
+        this.stepStateLabel(step, index)
+      );
     },
     stepStateLabel(step, index) {
-      return this.isStepValidated(index) ? this.accessibilityLabels.validatedLabel : step.isCurrent ? this.accessibilityLabels.currentLabel : this.accessibilityLabels.disabledLabel;
-    }
-  }
+      return this.isStepValidated(index)
+        ? this.accessibilityLabels.validatedLabel
+        : step.isCurrent
+        ? this.accessibilityLabels.currentLabel
+        : this.accessibilityLabels.disabledLabel;
+    },
+  },
 };
 </script>
 
-<style lang='scss' scoped>
+<style lang="scss" scoped>
 @import 'settings-tools/_all-settings';
 @import 'components/_c.stepper';
 </style>

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, MListBoxOptions } from './components/listbox';
+export { MListBox, MListBoxActions } 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,7 @@ declare module '@mozaic-ds/vue' {
   const MLayer: VueConstructor;
   const MLink: VueConstructor;
   const MListBox: VueConstructor;
-  const MListBoxOptions: VueConstructor;
+  const MListBoxActions: VueConstructor;
   const MLoader: VueConstructor;
   const MModal: VueConstructor;
   const MNotification: VueConstructor;
@@ -72,7 +72,7 @@ declare module '@mozaic-ds/vue' {
     MLayer,
     MLink,
     MListBox,
-    MListBoxOptions,
+    MListBoxActions,
     MLoader,
     MModal,
     MNotification,