@mozaic-ds/vue 1.0.0-rc.0 → 1.0.0-rc.1

package/src/components/dropdown/MDropdown.vue

@@ -0,0 +1,316 @@
+<template>
+  <div
+    ref="dropdown"
+    v-click-outside="onClickOutside"
+    class="mc-dropdown"
+    :class="{ 'mc-dropdown--multi': multiple }"
+    :style="setStyles"
+  >
+    <MTag
+      v-if="multiple && listboxValue.length > 0"
+      :id="tagId ? tagId : `autoCompleteTag-${uuid}`"
+      ref="tag"
+      :label="setTagLabel"
+      :disabled="disabled"
+      type="removable"
+      class="mc-dropdown__tag"
+      size="s"
+      @remove-tag="clearAutocomplete()"
+    />
+    <button
+      type="button"
+      class="mc-select mc-dropdown__trigger"
+      :class="{ 'is-open': openState }"
+      @click="openState = !openState"
+    >
+      {{ buttonValue }}
+    </button>
+    <MListBox
+      v-model="listboxValue"
+      :open="openState"
+      :items="localItems"
+      :multiple="multiple"
+      :empty-search-label="emptySearchLabel"
+      :data-key-expr="dataKeyExpr"
+      :data-text-expr="dataTextExpr"
+      :data-value-expr="dataValueExpr"
+      @change="onChange"
+    >
+      <template #item="{ item }">
+        <slot name="item" :item="item"></slot>
+      </template>
+    </MListBox>
+  </div>
+</template>
+
+<script>
+import MTag from '../tags/MTag.vue';
+import MListBox from '../listbox/MListBox.vue';
+
+export default {
+  name: 'MDropdown',
+
+  components: {
+    MTag,
+    MListBox,
+  },
+
+  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);
+      },
+    },
+  },
+
+  model: {
+    event: 'change',
+  },
+
+  props: {
+    // Tag Element
+    tagId: {
+      type: String,
+      default: null,
+    },
+    tagLabel: {
+      type: String,
+      default: '',
+    },
+    // Input Element
+    placeholder: {
+      type: String,
+      default: '-- Placeholder --',
+    },
+    filter: {
+      type: Function,
+      default: null,
+    },
+    disabled: {
+      type: Boolean,
+      default: false,
+    },
+    // Listbox Element
+    items: {
+      type: Array,
+      required: true,
+    },
+    value: {
+      type: [Array, String, Number],
+      default: undefined,
+    },
+    open: {
+      type: Boolean,
+      default: false,
+    },
+    multiple: {
+      type: Boolean,
+      default: false,
+    },
+    emptySearchLabel: {
+      type: String,
+      default: 'No results found',
+    },
+    dataKeyExpr: {
+      type: String,
+      default: 'id',
+    },
+    dataTextExpr: {
+      type: String,
+      default: 'label',
+    },
+    dataValueExpr: {
+      type: String,
+      default: 'value',
+    },
+    sort: {
+      type: Boolean,
+      default: true,
+    },
+    // Global
+    maxWidth: {
+      type: String,
+      default: '17.875rem',
+    },
+  },
+
+  data() {
+    return {
+      uuid: Math.random(),
+      openState: this.open,
+      tagWidth: '0px',
+      tagValue: null,
+      buttonValue: this.placeholder,
+      localItems: null,
+      sortedListItems: null,
+      listboxValue: null,
+    };
+  },
+
+  computed: {
+    setTagLabel() {
+      return this.listboxValue.length.toString() + ' ' + this.tagLabel;
+    },
+    setStyles() {
+      return {
+        '--tag-width': this.tagWidth,
+        '--max-width': this.maxWidth,
+      };
+    },
+  },
+
+  watch: {
+    value: {
+      handler: function (val) {
+        if (!val && this.multiple) {
+          this.listboxValue = [];
+        } else {
+          this.listboxValue = val;
+        }
+      },
+      immediate: true,
+    },
+
+    items: {
+      handler: function (val) {
+        this.localItems = val;
+        // this.clearAutocomplete();
+      },
+      immediate: true,
+    },
+
+    listboxValue: function (val) {
+      const value = Array.isArray(val) ? val : val.toString();
+      const selectedItems = this.getSelectedItems(value);
+
+      const seletedLabels = selectedItems.map(
+        (item) => item[this.dataTextExpr]
+      );
+
+      this.buttonValue = seletedLabels.join(', ');
+
+      if (val.length === 0) {
+        this.buttonValue = this.placeholder;
+      }
+
+      if (this.multiple) {
+        this.tagValue = val;
+      }
+    },
+
+    tagValue: function () {
+      this.setTagWidth();
+    },
+
+    openState: function (val) {
+      const eventName = val ? 'open' : 'close';
+      this.$emit(eventName);
+      this.$emit('update:open', val);
+    },
+  },
+
+  methods: {
+    setTagWidth() {
+      this.$nextTick(() => {
+        if (this.$refs.tag && this.$refs.tag.$el) {
+          this.tagWidth = this.$refs.tag.$el.clientWidth + 8 + 'px';
+        } else {
+          this.tagWidth = '0px';
+        }
+      });
+    },
+
+    clearAutocomplete() {
+      this.listboxValue = this.multiple ? [] : undefined;
+      this.onChange();
+      this.$emit('clear');
+    },
+
+    onClickOutside() {
+      this.openState = false;
+
+      if (this.multiple && this.sort) {
+        this.sortItems();
+      } else {
+        this.localItems = this.items;
+      }
+    },
+
+    onChange() {
+      this.$emit('change', this.listboxValue);
+
+      if (!this.multiple) {
+        this.onClickOutside();
+      }
+    },
+
+    getSelectedItems(val) {
+      const value = val ? val : this.listboxValue;
+
+      const selectedItems = this.items.filter((item) =>
+        value.includes(item[this.dataValueExpr])
+      );
+
+      return selectedItems;
+    },
+
+    sortItems() {
+      this.sortedListItems = this.items;
+      const selectedItems = this.getSelectedItems();
+
+      this.sortedListItems.sort((a, b) => {
+        const hasItemA = selectedItems.includes(a);
+        const hasItemB = selectedItems.includes(b);
+
+        if (hasItemA === hasItemB) {
+          return a[this.dataValueExpr] - b[this.dataValueExpr];
+        } else if (hasItemA < hasItemB) {
+          return 1;
+        } else {
+          return -1;
+        }
+      });
+    },
+  },
+};
+</script>
+
+<style lang="scss">
+@import 'settings-tools/all-settings';
+@import 'components/c.checkbox';
+@import 'components/_c.dropdown';
+
+.mc-dropdown {
+  max-width: var(--max-width);
+
+  &__tag {
+    position: absolute;
+    top: 0;
+    transform: translateY(50%);
+  }
+
+  &__trigger {
+    display: block;
+    text-align: left;
+
+    &.is-open {
+      background-image: url(inline-icons('arrow-top-16', black));
+    }
+  }
+}
+
+.mc-dropdown--multi .mc-dropdown__trigger {
+  overflow: hidden;
+  padding-left: calc(0.75rem + var(--tag-width));
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+</style>

package/src/components/dropdown/index.js

@@ -0,0 +1,7 @@
+import MDropdown from './MDropdown.vue';
+
+MDropdown.install = function (Vue) {
+  Vue.component(MDropdown.name, MDropdown);
+};
+
+export { MDropdown };

package/src/components/flag/MFlag.vue

@@ -1,6 +1,6 @@
 <template>
   <component :is="htmlTag" class="mc-flag" :class="setClasses">
-    {{ label }}
+    <span class="mc-flag__label">{{ label }}</span>
   </component>
 </template>
 

package/src/components/icon/MIcon.vue

@@ -25,6 +25,7 @@ export default {
       viewbox: null,
       size: null,
       paths: null,
+      type: null,
     };
   },
 
@@ -79,8 +80,17 @@ export default {
         this.viewbox = selectedIcon.viewBox;
         this.size = selectedIcon.size;
         this.paths = selectedIcon.paths;
+        this.type = selectedIcon.type;
       });
     },
+    setSizeFromViewbox(viewbox) {
+      const viewboxSizes = viewbox.split(' ').filter((size) => size > 0);
+
+      return {
+        width: `${viewboxSizes[0]}px`,
+        height: `${viewboxSizes[1]}px`,
+      };
+    },
   },
 
   render: function (createElement) {
@@ -88,8 +98,14 @@ export default {
     const svgAttrs = {
       id: `MIcon-${this.name}-${this.id}`,
       viewBox: this.viewbox,
-      height: this.size,
-      width: this.size,
+      height:
+        this.type !== 'logotypes'
+          ? this.size
+          : this.setSizeFromViewbox(this.viewbox).height,
+      width:
+        this.type !== 'logotypes'
+          ? this.size
+          : this.setSizeFromViewbox(this.viewbox).width,
       fill: this.color,
       'aria-hidden': 'true',
     };

package/src/components/index.js

@@ -12,13 +12,14 @@ export { MCard } from './card';
 export { MCheckbox, MCheckboxGroup } from './checkbox';
 export { MDataTable, MDataTableHeader } from './datatable';
 export { MField } from './field';
+export { MDropdown } from './dropdown';
 export { MFileUploader } from './fileuploader';
 export { MFlag } from './flag';
 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/link/MLink.vue

@@ -1,6 +1,7 @@
 <template>
   <component
-    :is="router ? router : href && !disabled ? 'a' : 'span'"
+    :is="linkComponentName"
+    v-bind="linkComponentProps"
     :href="router ? null : href && !disabled ? href : null"
     class="mc-link"
     :class="setClasses"
@@ -37,7 +38,7 @@ export default {
 
   props: {
     router: {
-      type: [String, Object],
+      type: Object,
       default: null,
     },
     href: {
@@ -105,10 +106,20 @@ export default {
 
       return classes;
     },
+    linkComponentName() {
+      const isLinkValid = this.href && !this.disabled;
+      const routerComponent = this.router?.name ?? null;
+      const defaultComponent = isLinkValid ? 'a' : 'span';
+
+      return routerComponent ?? defaultComponent;
+    },
+    linkComponentProps() {
+      return this.router?.props ?? {};
+    },
   },
   methods: {
     onClick(event) {
-      if(!this.disabled){
+      if (!this.disabled) {
         this.$emit('click', event);
       }
     },

package/src/components/listbox/MListBox.vue

@@ -1,50 +1,72 @@
 <template>
   <ul
-    v-if="items.length > 0"
-    ref="listbox"
     role="listbox"
     class="mc-listbox"
     aria-labelledby="listbox"
     :class="{ 'is-open': open, 'mc-listbox--multi': multiple }"
+    :style="{ '--listbox-width': maxWidth }"
   >
-    <li
-      v-for="item in selectableItems"
-      :key="item.id"
-      class="mc-listbox__item"
-      @change="$emit('update:itemSelected', item)"
-      @click.self="updateList(item.id, item.text, !item.selected, true)"
-    >
-      <slot name="item" :item="item">
-        <span class="mc-listbox__text">{{ item.text }} </span>
-      </slot>
-      <m-checkbox
-        v-if="multiple"
-        :id="`checkbox-dropdown-${item.id}`"
-        v-model="selectableItems.find((elem) => elem.id === item.id).selected"
-        class="mc-listbox__input"
-        @change="updateList(item.id, item.text, !item.selected, $e)"
-      />
+    <template v-if="!isFiltered">
+      <li
+        v-for="(item, index) in localItems"
+        :key="item.id"
+        class="mc-listbox__item"
+      >
+        <MIcon
+          v-if="item.icon"
+          :name="item.icon"
+          class="mc-listbox__icon"
+          color="#666666"
+        />
+        <input
+          :id="setItemId(index)"
+          v-model="localValue"
+          class="mc-listbox__input"
+          :class="{ 'mc-checkbox__input': multiple }"
+          :type="multiple ? 'checkbox' : 'radio'"
+          :value="item[dataValueExpr]"
+          :name="!multiple ? `listboxradio-${uuid}` : null"
+          @change="onChange"
+        />
+        <label :for="setItemId(index)" class="mc-listbox__label">
+          <slot name="item" :item="item">
+            {{ item[dataTextExpr] }}
+          </slot>
+        </label>
+      </li>
+    </template>
+    <li v-else class="mc-listbox__item">
+      <span class="mc-listbox__empty">{{ emptySearchLabel }}</span>
     </li>
   </ul>
-  <div v-else class="mc-list-box__empty">
-    {{ emptySearchLabel }}
-  </div>
 </template>
+
 <script>
-import MCheckbox from '../checkbox/MCheckbox.vue';
+import MIcon from '../icon/MIcon.vue';
+
 export default {
-  name: 'MListbox',
+  name: 'MListBox',
 
-  components: { MCheckbox },
+  components: {
+    MIcon,
+  },
+
+  model: {
+    event: 'change',
+  },
 
   props: {
+    items: {
+      type: Array,
+      required: true,
+    },
     open: {
       type: Boolean,
       default: false,
     },
-    items: {
-      type: Array,
-      default: () => [],
+    isFiltered: {
+      type: Boolean,
+      default: false,
     },
     multiple: {
       type: Boolean,
@@ -54,53 +76,71 @@ export default {
       type: String,
       default: 'No item matching your criteria found',
     },
-    icon: {
-      type: Boolean,
-      default: false,
+    dataKeyExpr: {
+      type: String,
+      default: 'id',
+    },
+    dataTextExpr: {
+      type: String,
+      default: 'label',
+    },
+    dataValueExpr: {
+      type: String,
+      default: 'value',
+    },
+    value: {
+      type: [Array, String, Number],
+      default: undefined,
+    },
+    maxWidth: {
+      type: String,
+      default: '17.875rem',
     },
   },
+
   data() {
     return {
-      selectableItems: null,
-      selected: [],
+      uuid: Math.random(),
+      localItems: undefined,
+      localValue: undefined,
     };
   },
+
+  computed: {
+    setItemId() {
+      return (index) => `listboxItem-${index + this.uuid}`;
+    },
+  },
+
   watch: {
     items: {
       handler: function (val) {
-        this.selectableItems = val;
+        this.localItems = val;
+      },
+      immediate: true,
+    },
+    value: {
+      handler: function (val) {
+        this.localValue = val;
       },
       immediate: true,
     },
   },
-  methods: {
-    updateList(id, text, value, isCheckboxUpdate) {
-      if (!this.multiple) {
-        this.$emit('update:itemSelected', [{ id, selected: value, text }]);
 
-        this.$emit('close-list-box');
-        return;
-      }
-
-      if (
-        isCheckboxUpdate &&
-        this.selectableItems.find((item) => item.id === id)
-      ) {
-        this.selectableItems.find((item) => item.id === id).selected = value;
-      }
-
-      if (value) {
-        this.selected = [...this.selected, { id, selected: value, text }];
-      } else {
-        this.selected = this.selected.filter((item) => item.id !== id);
-      }
-      this.$emit('update:itemSelected', this.selectableItems);
+  methods: {
+    onChange() {
+      this.$emit('change', this.localValue);
     },
   },
 };
 </script>
 
 <style lang="scss">
-@import 'settings-tools/_all-settings';
-@import 'components/_c.listbox';
+@import 'settings-tools/all-settings';
+@import 'components/c.checkbox';
+@import 'components/c.listbox';
+
+.mc-listbox__empty {
+  margin-top: 0;
+}
 </style>