@mozaic-ds/vue 0.24.0-beta.0 → 0.25.0

package/src/components/dropdown/MDropdown.vue

@@ -4,52 +4,55 @@
     v-click-outside="onClickOutside"
     class="mc-dropdown"
     :class="{ 'mc-dropdown--multi': multiple }"
-    :style="tagStyle"
+    :style="setStyles"
   >
-    <m-tag
-      v-if="multiple && tagValue.length > 0"
+    <MTag
+      v-if="multiple && listboxValue.length > 0"
+      :id="tagId ? tagId : `autoCompleteTag-${uuid}`"
+      ref="tag"
+      :label="setTagLabel"
+      :disabled="disabled"
       type="removable"
-      :label="tagValue.length.toString() + ' ' + tagLabel"
       class="mc-dropdown__tag"
       size="s"
       @remove-tag="clearAutocomplete()"
     />
-
     <button
       type="button"
       class="mc-select mc-dropdown__trigger"
-      :class="{ 'is-open': isOpen }"
-      @click="isOpen = !isOpen"
+      :class="{ 'is-open': openState }"
+      @click="openState = !openState"
     >
-      {{ inputValue }}
+      {{ buttonValue }}
     </button>
-    <m-list-box
+    <MListBox
       v-model="listboxValue"
-      :open="isOpen"
-      :items="itemListForDropdown"
+      :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 name="item" :item="item"></slot>
       </template>
-    </m-list-box>
+    </MListBox>
   </div>
 </template>
 
 <script>
-import MListBox from '../listbox/MListBox.vue';
 import MTag from '../tags/MTag.vue';
+import MListBox from '../listbox/MListBox.vue';
 
 export default {
   name: 'MDropdown',
 
   components: {
-    MListBox,
     MTag,
+    MListBox,
   },
 
   directives: {
@@ -73,31 +76,49 @@ export default {
   },
 
   props: {
-    open: {
-      type: Boolean,
-      default: false,
+    // 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,
-      default: () => [],
       required: true,
     },
-    multiple: {
+    value: {
+      type: [Array, String, Number],
+      default: undefined,
+    },
+    open: {
       type: Boolean,
       default: false,
     },
-    disabled: {
+    multiple: {
       type: Boolean,
       default: false,
     },
+    emptySearchLabel: {
+      type: String,
+      default: 'No results found',
+    },
     dataKeyExpr: {
       type: String,
       default: 'id',
@@ -110,27 +131,35 @@ export default {
       type: String,
       default: 'value',
     },
-    value: {
-      type: Array,
-      default: () => [],
+    sort: {
+      type: Boolean,
+      default: true,
+    },
+    // Global
+    maxWidth: {
+      type: String,
+      default: '17.875rem',
     },
   },
 
   data() {
     return {
-      itemListForDropdown: this.items,
-      isOpen: this.open,
+      uuid: Math.random(),
+      openState: this.open,
       tagWidth: '0px',
-      maxWidth: '17.875rem',
-      uuid: undefined,
-      tagValue: '',
-      inputValue: '',
-      listboxValue: [],
+      tagValue: null,
+      buttonValue: this.placeholder,
+      localItems: null,
+      sortedListItems: null,
+      listboxValue: null,
     };
   },
 
   computed: {
-    tagStyle() {
+    setTagLabel() {
+      return this.listboxValue.length.toString() + ' ' + this.tagLabel;
+    },
+    setStyles() {
       return {
         '--tag-width': this.tagWidth,
         '--max-width': this.maxWidth,
@@ -139,64 +168,80 @@ export default {
   },
 
   watch: {
-    listboxValue: function (newValue) {
-      const textToDisplay = [];
-      const valueExpr = this.dataValueExpr;
-      const textExpr = this.dataTextExpr;
+    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,
+    },
 
-      this.tagValue = newValue;
+    listboxValue: function (val) {
+      const value = Array.isArray(val) ? val : val.toString();
+      const selectedItems = this.getSelectedItems(value);
 
-      if (newValue.length) {
-        const selectedItems = this.items.filter((item) =>
-          newValue.includes(item[valueExpr])
-        );
+      const seletedLabels = selectedItems.map(
+        (item) => item[this.dataTextExpr]
+      );
 
-        selectedItems.forEach((item) => textToDisplay.push(item[textExpr]));
+      this.buttonValue = seletedLabels.join(', ');
 
-        this.inputValue = textToDisplay.join(', ');
-      } else {
-        this.inputValue = this.placeholder;
+      if (val.length === 0) {
+        this.buttonValue = this.placeholder;
       }
-    },
 
-    tagValue: {
-      handler: function () {
-        this.setTagWidth();
-      },
-      immediate: true,
+      if (this.multiple) {
+        this.tagValue = val;
+      }
     },
 
-    value: {
-      handler: function (value) {
-        this.listboxValue = value;
-      },
-      immediate: true,
+    tagValue: function () {
+      this.setTagWidth();
     },
-  },
 
-  mounted() {
-    this.uuid = this._uid;
+    openState: function (val) {
+      const eventName = val ? 'open' : 'close';
+      this.$emit(eventName);
+      this.$emit('update:open', val);
+    },
   },
 
   methods: {
     setTagWidth() {
       this.$nextTick(() => {
-        this.tagWidth =
-          document && document.querySelector('.mc-dropdown__tag')
-            ? document.querySelector('.mc-dropdown__tag').clientWidth + 8 + 'px'
-            : '0px';
+        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.inputValue = '';
+      this.listboxValue = this.multiple ? [] : undefined;
       this.onChange();
       this.$emit('clear');
     },
 
     onClickOutside() {
-      this.isOpen = false;
+      this.openState = false;
+
+      if (this.multiple && this.sort) {
+        this.sortItems();
+      } else {
+        this.localItems = this.items;
+      }
     },
 
     onChange() {
@@ -206,6 +251,34 @@ export default {
         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>
@@ -221,8 +294,6 @@ export default {
   &__tag {
     position: absolute;
     top: 0;
-    -webkit-transform: translateY(50%);
-    -ms-transform: translateY(50%);
     transform: translateY(50%);
   }
 

package/src/components/listbox/MListBox.vue

@@ -1,46 +1,50 @@
 <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 }"
   >
-    <li v-for="item in localItems" :key="item.id" class="mc-listbox__item">
-      <m-icon
-        v-if="item.icon"
-        :name="item.icon"
-        class="mc-listbox__icon"
-        color="#666666"
-      />
-      <label
-        :for="`listboxItem-${item[dataKeyExpr]}-${uuid}`"
-        class="mc-listbox__label"
+    <template v-if="!isFiltered">
+      <li
+        v-for="(item, index) in localItems"
+        :key="item.id"
+        class="mc-listbox__item"
       >
-        {{ item[dataTextExpr] }}
-      </label>
-      <input
-        :id="`listboxItem-${item[dataKeyExpr]}-${uuid}`"
-        ref="input"
-        v-model="localValue"
-        class="mc-checkbox__input mc-listbox__input"
-        type="checkbox"
-        :value="item[dataValueExpr]"
-        @change="onChange"
-      />
+        <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-listbox__empty">
-    {{ emptySearchLabel }}
-  </div>
 </template>
 
 <script>
 import MIcon from '../icon/MIcon.vue';
 
 export default {
-  name: 'MListbox',
+  name: 'MListBox',
 
   components: {
     MIcon,
@@ -51,13 +55,17 @@ export default {
   },
 
   props: {
+    items: {
+      type: Array,
+      required: true,
+    },
     open: {
       type: Boolean,
       default: false,
     },
-    items: {
-      type: Array,
-      default: () => [],
+    isFiltered: {
+      type: Boolean,
+      default: false,
     },
     multiple: {
       type: Boolean,
@@ -67,38 +75,38 @@ 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: 'text',
+      default: 'label',
     },
     dataValueExpr: {
       type: String,
-      default: 'text',
+      default: 'value',
     },
     value: {
-      type: [Array, String],
+      type: [Array, String, Number],
       default: undefined,
     },
   },
 
   data() {
     return {
-      localItems: null,
-      localValue: [],
-      selected: [],
-      uuid: null,
-      inputBaseId: 'listboxInput',
+      uuid: Math.random(),
+      localItems: undefined,
+      localValue: undefined,
     };
   },
 
+  computed: {
+    setItemId() {
+      return (index) => `listboxItem-${index + this.uuid}`;
+    },
+  },
+
   watch: {
     items: {
       handler: function (val) {
@@ -107,44 +115,15 @@ export default {
       immediate: true,
     },
     value: {
-      handler: function (value) {
-        this.localValue = value;
-      },
-      immediate: true,
-    },
-    localValue: {
-      handler: function (localValue) {
-        const inputs = this.$refs.input;
-        if (!this.multiple && inputs) {
-          const selectedValue = Array.from(localValue);
-
-          inputs.forEach(function (input) {
-            const listItem = input.closest('.mc-listbox__item');
-
-            if (input.value == selectedValue[0]) {
-              listItem.classList.add('is-checked');
-            } else {
-              listItem.classList.remove('is-checked');
-            }
-          });
-        }
+      handler: function (val) {
+        this.localValue = val;
       },
       immediate: true,
     },
   },
 
-  mounted() {
-    this.uuid = Math.random();
-  },
-
   methods: {
     onChange() {
-      if (!this.multiple) {
-        const currentValue = this.localValue;
-        this.localValue = [];
-        this.localValue = currentValue.slice(-1);
-      }
-
       this.$emit('change', this.localValue);
     },
   },
@@ -153,126 +132,10 @@ export default {
 
 <style lang="scss">
 @import 'settings-tools/all-settings';
+@import 'components/c.checkbox';
+@import 'components/c.listbox';
 
-.mc-listbox {
-  $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.8125rem; // =221px
-  min-width: 17.875rem; // =286px
-  opacity: 0;
-  visibility: hidden;
-  width: 100%;
-
-  &.is-open {
-    opacity: 1;
-    visibility: visible;
-    z-index: 11;
-  }
-
-  &::-webkit-scrollbar {
-    background-color: $color-grey-100;
-    width: $mu025;
-
-    &-thumb {
-      background: $color-grey-600;
-    }
-  }
-
-  &__item {
-    align-items: center;
-    display: flex;
-    gap: $mu050;
-    min-height: $mu300;
-    padding-left: $mu075;
-    padding-right: $mu075;
-    position: relative;
-    justify-content: space-between;
-
-    &:not(:last-child) {
-      border-bottom: 1px solid $color-grey-300;
-    }
-
-    &:hover {
-      background-color: $color-grey-100;
-      box-shadow: inset 9px 0 0 -7px $color-grey-900;
-    }
-  }
-
-  &__flag,
-  &__icon {
-    width: $mu200;
-    height: $mu200;
-  }
-
-  &__flag {
-    @include set-font-scale('07', 'm');
-
-    text-align: center;
-  }
-
-  &__empty {
-    @include set-font-scale('04', 'm');
-
-    color: $color-fields-error;
-    display: inline-block;
-    margin-top: $mu025;
-  }
-
-  &__label {
-    cursor: pointer;
-    margin-right: auto;
-
-    &::after {
-      content: '';
-      position: absolute;
-      inset: 0;
-      z-index: 2;
-    }
-  }
-
-  .is-focus {
-    background-color: $color-grey-100;
-    box-shadow: inset 9px 0 0 -7px $color-grey-900;
-  }
-
-  .is-disabled {
-    cursor: not-allowed;
-    box-shadow: none;
-    background-color: $color-grey-200;
-    color: $color-grey-600;
-    pointer-events: none;
-  }
-
-  &--left {
-    right: 0;
-    transform: translateX(-100%);
-  }
-
-  &:not(.mc-listbox--multi) {
-    .is-checked {
-      background-size: $mu150;
-      background-image: url(inline-icons(
-        'notification-available-24',
-        $color-grey-900
-      ));
-      background-repeat: no-repeat;
-      background-position: right $mu075 center;
-    }
-
-    #{$parent} {
-      &__input {
-        @include visually-hidden();
-      }
-    }
-  }
+.mc-listbox__empty {
+  margin-top: 0;
 }
 </style>

package/src/components/phonenumber/MPhoneNumber.vue

@@ -67,7 +67,7 @@
       </ul>
     </div>
     <input
-      id="smallField"
+      :id="id"
       type="tel"
       class="mc-phone-number__input mc-text-input mc-text-input--m mc-field__input"
       name="phone-number-input"
@@ -126,6 +126,10 @@ export default {
       type: [String, Number],
       default: '',
     },
+    id: {
+      type: String,
+      default: null,
+    },
     maxlength: {
       type: Number,
       default: 25,

package/src/components/stepper/MStepper.vue

@@ -21,7 +21,7 @@
         :style="`--steps: ${steps.length}; --current: ${idx + 1};`"
         @click="isStepValidated(idx) && $emit('step-changed', step)"
       >
-        <a v-if="step.href" :href="step.href" class="mc-stepper__link">
+        <a v-if="step.href && isStepValidated(idx)" :href="step.href" class="mc-stepper__link">
           <div class="mc-stepper__indicator" aria-hidden="true">
             <m-icon
               v-if="isStepValidated(idx)"