@mozaic-ds/vue 0.20.0 → 0.21.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mozaic-ds/vue",
-  "version": "0.20.0",
+  "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 } from './listbox';
+export { MListBox, MListBoxActions } from './listbox';
 export { MLoader } from './loader';
 export { MModal } from './modal';
 export { MNotification } from './notification';

package/src/components/listbox/MListBoxActions.vue

@@ -0,0 +1,244 @@
+<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, 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 }"
+        >
+          <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>
+
+<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;
+    },
+  },
+};
+</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>

package/src/components/listbox/index.js

@@ -1,7 +1,12 @@
 import MListBox from './MListBox.vue';
+import MListBoxActions from './MListBoxActions.vue';
 
 MListBox.install = function (Vue) {
   Vue.component(MListBox.name, MListBox);
 };
 
-export { MListBox };
+MListBoxActions.install = function (Vue) {
+  Vue.component(MListBoxActions.name, MListBoxActions);
+};
+
+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

@@ -29,6 +29,7 @@
       role="spinbutton"
       @input="handle"
       @keypress="integerOnly && formatValue($event)"
+      v-on="$listeners"
     />
 
     <m-button

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 } 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,6 +24,7 @@ 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;
@@ -71,6 +72,7 @@ declare module '@mozaic-ds/vue' {
     MLayer,
     MLink,
     MListBox,
+    MListBoxActions,
     MLoader,
     MModal,
     MNotification,