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

package/package.json

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

package/src/components/listbox/MListBoxOptions.vue

@@ -8,32 +8,42 @@
       <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"
         >
-          {{ 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'"
+            class="mc-listbox-options__item"
+            :class="{ 'is-danger': item.danger }"
+            @click.self="$emit('update:itemSelected', item)"
+          >
+            {{ item.text }}
+          </component>
+        </li>
+      </ul>
+    </div>
   </div>
 </template>
 
@@ -88,6 +98,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 +143,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 +159,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 +179,8 @@ export default {
       }
     }
 
-    &.align-right {
-      transform: translateX(calc(-100% + #{$mu150}));
+    &:not(:last-child) {
+      border-bottom: 1px solid #bab6bc;
     }
   }
 
@@ -177,6 +207,7 @@ export default {
     color: currentColor;
     cursor: pointer;
     padding: 0;
+    white-space: nowrap;
 
     &::after {
       content: '';