@mozaic-ds/vue 0.23.0-beta.0 → 1.0.0-beta.0

package/src/components/listbox/MListBox.vue

@@ -7,48 +7,35 @@
     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"
-      >
-        {{ 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"
+    <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)"
       />
     </li>
   </ul>
-  <div v-else class="mc-listbox__empty">
+  <div v-else class="mc-list-box__empty">
     {{ emptySearchLabel }}
   </div>
 </template>
-
 <script>
-import MIcon from '../icon/MIcon.vue';
-
+import MCheckbox from '../checkbox/MCheckbox.vue';
 export default {
   name: 'MListbox',
 
-  components: {
-    MIcon,
-  },
-
-  model: {
-    event: 'change',
-  },
+  components: { MCheckbox },
 
   props: {
     open: {
@@ -71,208 +58,49 @@ export default {
       type: Boolean,
       default: false,
     },
-    dataKeyExpr: {
-      type: String,
-      default: 'id',
-    },
-    dataTextExpr: {
-      type: String,
-      default: 'text',
-    },
-    dataValueExpr: {
-      type: String,
-      default: 'text',
-    },
-    value: {
-      type: [Array, String],
-      default: undefined,
-    },
   },
-
   data() {
     return {
-      localItems: null,
-      localValue: [],
+      selectableItems: null,
       selected: [],
-      uuid: null,
-      inputBaseId: 'listboxInput',
     };
   },
-
   watch: {
     items: {
       handler: function (val) {
-        this.localItems = val;
-      },
-      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');
-            }
-          });
-        }
+        this.selectableItems = val;
       },
       immediate: true,
     },
   },
-
-  mounted() {
-    this.uuid = Math.random();
-  },
-
   methods: {
-    onChange() {
+    updateList(id, text, value, isCheckboxUpdate) {
       if (!this.multiple) {
-        const currentValue = this.localValue;
-        this.localValue = [];
-        this.localValue = currentValue.slice(-1);
+        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;
       }
 
-      this.$emit('change', this.localValue);
+      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);
     },
   },
 };
 </script>
 
 <style lang="scss">
-@import 'settings-tools/all-settings';
-
-.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();
-      }
-    }
-  }
-}
+@import 'settings-tools/_all-settings';
+@import 'components/_c.listbox';
 </style>

package/src/components/listbox/index.js

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

package/src/components/phonenumber/MPhoneNumber.vue

@@ -80,7 +80,6 @@
       @keydown.backspace="
         (event) => (formatOnBlur ? null : backspaceFunction(event))
       "
-      v-on="$listeners"
     />
   </div>
 </template>

package/src/components/quantityselector/MQuantitySelector.vue

@@ -7,10 +7,9 @@
       icon-position="left"
       :aria-label="decrementAriaLabel"
       :aria-controls="id"
-      :disabled="disabled ? disabled : currentValue === valuemin"
+      :disabled="currentValue === valuemin"
       :size="small ? 's' : null"
       tabindex="-1"
-      type="button"
       @click="decrement()"
     />
 
@@ -26,11 +25,9 @@
       :aria-valuemax="valuemax"
       :placeholder="placeholder"
       :size="small ? 's' : null"
-      :disabled="disabled"
       role="spinbutton"
       @input="handle"
       @keypress="integerOnly && formatValue($event)"
-      v-on="$listeners"
     />
 
     <m-button
@@ -40,10 +37,9 @@
       icon-position="right"
       :aria-label="incrementAriaLabel"
       :aria-controls="id"
-      :disabled="disabled ? disabled : currentValue === valuemax"
+      :disabled="currentValue === valuemax"
       :size="small ? 's' : null"
       tabindex="-1"
-      type="button"
       @click="increment()"
     />
   </div>
@@ -106,10 +102,6 @@ export default {
       type: Boolean,
       default: false,
     },
-    disabled: {
-      type: Boolean,
-      default: false,
-    },
   },
 
   data() {

package/src/components/ratingstars/MStarsInput.vue

@@ -19,7 +19,6 @@
         :value="rateId"
         class="mc-stars-input__radio"
         :required="required"
-        @click="$emit('star-clicked', index + 1)"
       />
 
       <label

package/src/components/stepper/MStepper.vue

@@ -1,58 +1,28 @@
 <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)"
       >
-        <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>
+        <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>
       </li>
     </ol>
   </nav>
@@ -64,48 +34,37 @@ 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/components/tabs/MTab.vue

@@ -13,18 +13,8 @@
         class="mc-tabs__item"
         role="presentation"
       >
-        <component
-          :is="`${tab.router}`"
-          v-if="tab.router"
-          v-bind="tab.attrs"
-          :to="tab.to"
-          active-class="mc-tabs__link--selected"
-        >
-          {{ tab.text }}
-        </component>
         <component
           :is="tab.href ? (tab.disabled ? 'span' : 'a') : 'button'"
-          v-else
           :id="tab.id"
           ref="tab"
           :href="tab.href ? (!tab.disabled ? tab.href : null) : null"
@@ -33,9 +23,14 @@
           class="mc-tabs__link"
           role="tab"
           :aria-selected="tab.active ? 'true' : 'false'"
-          :class="setLinkClass(tab)"
-          v-bind="tab.attrs"
-          @click="onTabClicked($event, tab, index)"
+          :class="setActiveClass(tab)"
+          @click="
+            manageTabs(
+              $event.target,
+              $event,
+              Object.assign({ index: index }, tab)
+            )
+          "
         >
           {{ tab.text }}
         </component>
@@ -94,34 +89,31 @@ export default {
   data() {
     return {
       tablist: null,
-      localActiveIndex: null,
     };
   },
 
   computed: {
     setClasses() {
-      return {
-        'mc-tabs--full': this.align === 'full',
-        'mc-tabs--full-centered': this.align === 'centered',
-        'mc-tabs--dropdown': this.type === 'dropdown',
-        'mc-tabs--no-shadow': !this.shadow,
-      };
+      const classes = [
+        {
+          'mc-tabs--full': this.align === 'full',
+          'mc-tabs--full-centered': this.align === 'centered',
+          'mc-tabs--dropdown': this.type === 'dropdown',
+          'mc-tabs--no-shadow': !this.shadow,
+        },
+      ];
+
+      return classes;
     },
   },
 
   watch: {
     activeIndex(newValue) {
-      this.localActiveIndex = newValue;
-    },
-    localActiveIndex: {
-      handler: function (newValue) {
-        const selectedTab = this.getTabFromIndex(newValue);
-        if (selectedTab) {
-          this.setTabState(selectedTab);
-        }
-      },
-      immediate: true,
-    },
+      const tab = this.getTabFromIndex(newValue);
+      if (tab && this.tabs[newValue]) {
+        this.manageTabs(tab, null, Object.assign({index: newValue}, this.tabs[newValue]));
+      }
+    }
   },
 
   mounted: function () {
@@ -130,16 +122,17 @@ export default {
         this.tablist = this.$refs.tablist;
 
         if (this.activeIndex) {
-          this.localActiveIndex = this.activeIndex;
+          const tab = this.getTabFromIndex(this.activeIndex);
+          if (tab) {
+            this.manageTabs(tab);
+          }
         } else {
-          const isActive = this.tabs.some(
-            (tab) =>
-              Object.prototype.hasOwnProperty.call(tab, 'active') &&
-              tab.active === true
+          const isActive = this.tabs.some((tab) =>
+              Object.prototype.hasOwnProperty.call(tab, 'active')
           );
-
           if (!isActive) {
-            this.localActiveIndex = 0;
+            const firstTab = this.tablist.querySelector('.mc-tabs__link');
+            this.manageTabs(firstTab);
           }
         }
       }
@@ -147,50 +140,40 @@ export default {
   },
 
   methods: {
-    setLinkClass: function (tab) {
-      return {
-        'mc-tabs__link--selected': tab.active,
-        'mc-tabs__link--disabled': tab.disabled,
-      };
-    },
-    setTabState(tab) {
-      this.tablist.querySelectorAll('.mc-tabs__link').forEach((el) => {
-        el.classList.remove('mc-tabs__link--selected');
-        el.setAttribute('aria-selected', 'false');
-      });
+    setActiveClass: function (tab) {
+      const tabClasses = [];
 
-      tab.classList.add('mc-tabs__link--selected');
-      tab.setAttribute('aria-selected', 'true');
+      if (tab.active) {
+        tabClasses.push('mc-tabs__link--selected');
+      }
+
+      if (tab.disabled) {
+        tabClasses.push('mc-tabs__link--disabled');
+      }
+
+      return tabClasses;
     },
-    setTabState(tab) {
+    manageTabs: function (el, e, tab) {
+      if (tab && tab.disabled) {
+        return;
+      }
+      if (e) {
+        this.$emit('tab-clicked', e.target, tab);
+      }
+
       this.tablist.querySelectorAll('.mc-tabs__link').forEach((el) => {
         el.classList.remove('mc-tabs__link--selected');
         el.setAttribute('aria-selected', 'false');
       });
 
-      tab.classList.add('mc-tabs__link--selected');
-      tab.setAttribute('aria-selected', 'true');
+      el.classList.add('mc-tabs__link--selected');
+      el.setAttribute('aria-selected', 'true');
     },
     getTabFromIndex: function (index) {
-      if (
-        this.tablist &&
-        this.tablist.children[index] &&
-        this.tablist.children[index].children[0]
-      ) {
+      if (this.tablist && this.tablist.children[index] && this.tablist.children[index].children[0]) {
         return this.tablist.children[index].children[0];
       }
     },
-    onTabClicked(e, tab, index) {
-      if (tab && tab.disabled) {
-        return;
-      }
-
-      if (!this.activeIndex) {
-        this.localActiveIndex = index;
-      }
-
-      this.$emit('tab-clicked', e.target, Object.assign({ index: index }, tab));
-    },
   },
 };
 </script>