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

package/src/components/listbox/MListBoxOptions.vue

@@ -0,0 +1,200 @@
+<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>
+    <ul
+      v-if="items.length > 0"
+      ref="listbox"
+      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 }"
+        >
+          {{ item.text }}
+        </component>
+      </li>
+    </ul>
+  </div>
+</template>
+
+<script>
+import MIcon from '../icon/MIcon.vue';
+
+export default {
+  name: 'MListBoxOptions',
+
+  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,
+    };
+  },
+
+  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();
+    }
+  }
+
+  &__list {
+    $parent: get-parent-selector(&);
+    @include unstyle-list();
+    background-color: $color-grey-000;
+    border: 1px solid $color-grey-600;
+    border-radius: 3px;
+    position: absolute;
+    overflow-y: auto;
+    margin-top: 5px;
+    margin-bottom: 0;
+    // max-height: 13.5rem;
+    min-width: $mu800;
+    opacity: 0;
+    visibility: hidden;
+
+    &.is-open {
+      opacity: 1;
+      visibility: visible;
+      z-index: 11;
+    }
+
+    &::-webkit-scrollbar {
+      background-color: $color-grey-100;
+      width: $mu025;
+
+      &-thumb {
+        background: $color-grey-600;
+      }
+    }
+
+    &.align-right {
+      transform: translateX(calc(-100% + #{$mu150}));
+    }
+  }
+
+  &__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;
+    }
+  }
+
+  &__item {
+    @include set-font-scale('05', 'm');
+
+    background: none;
+    border: none;
+    color: currentColor;
+    cursor: pointer;
+    padding: 0;
+
+    &::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 MListBoxOptions from './MListBoxOptions.vue';
 
 MListBox.install = function (Vue) {
   Vue.component(MListBox.name, MListBox);
 };
 
-export { MListBox };
+MListBoxOptions.install = function (Vue) {
+  Vue.component(MListBoxOptions.name, MListBoxOptions);
+};
+
+export { MListBox, MListBoxOptions };

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