@mozaic-ds/vue 0.20.0-beta.5 → 0.21.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mozaic-ds/vue",
-  "version": "0.20.0-beta.5",
+  "version": "0.21.0",
   "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}

@@ -8,32 +8,44 @@
       <m-icon name="DisplayOptions24" />
       <span class="mc-listbox-options__trigger-label">{{ triggerLabel }}</span>
     </button>
-    <ul
-      v-if="items.length > 0"
+    <div
       ref="listbox"
+      class="mc-listbox-options__container"
+      :class="{ 'is-open': isOpen, 'align-right': position == 'right' }"
       role="listbox"
-      class="mc-listbox-options__list"
       aria-labelledby="listbox"
-      :class="{ 'is-open': isOpen, 'align-right': position == 'right' }"
     >
-      <li v-for="item in items" :key="item.id" class="mc-listbox-options__tile">
-        <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'"
-          class="mc-listbox-options__item"
-          :class="{ 'is-danger': item.danger }"
+      <ul
+        v-for="(list, index) in listItems"
+        :key="`${list}-${index}`"
+        class="mc-listbox-options__list"
+      >
+        <li
+          v-for="item in list"
+          :key="item.id"
+          class="mc-listbox-options__tile"
+          :class="{ 'is-disabled': item.disabled }"
         >
-          {{ item.text }}
-        </component>
-      </li>
-    </ul>
+          <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.href ? null : true"
+            class="mc-listbox-options__item"
+            :class="{ 'is-danger': item.danger, 'is-disabled': item.disabled }"
+            @click.self="$emit('update:itemSelected', item)"
+          >
+            {{ item.text }}
+          </component>
+        </li>
+      </ul>
+    </div>
   </div>
 </template>
 
@@ -41,7 +53,7 @@
 import MIcon from '../icon/MIcon.vue';
 
 export default {
-  name: 'MListBoxOptions',
+  name: 'MListBoxActions',
 
   components: {
     MIcon,
@@ -88,6 +100,20 @@ export default {
     };
   },
 
+  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;
@@ -119,20 +145,15 @@ export default {
     }
   }
 
-  &__list {
-    $parent: get-parent-selector(&);
-    @include unstyle-list();
-    background-color: $color-grey-000;
-    border: 1px solid $color-grey-600;
-    border-radius: 3px;
+  &__container {
     position: absolute;
     overflow-y: auto;
-    margin-top: 5px;
-    margin-bottom: 0;
-    // max-height: 13.5rem;
-    min-width: $mu800;
     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;
@@ -140,6 +161,17 @@ export default {
       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;
@@ -149,8 +181,8 @@ export default {
       }
     }
 
-    &.align-right {
-      transform: translateX(calc(-100% + #{$mu150}));
+    &:not(:last-child) {
+      border-bottom: 1px solid #bab6bc;
     }
   }
 
@@ -167,6 +199,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 {
@@ -177,6 +220,7 @@ export default {
     color: currentColor;
     cursor: pointer;
     padding: 0;
+    white-space: nowrap;
 
     &::after {
       content: '';

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,