CMultiSelect.vue

<template>
  <div class="c-select" :class="generatedClass">
    <label
      v-if="formLabel"
      class="label">
      <span>
        {{ formLabel }}<span v-if="required" class="required">*</span>
      </span>
    </label>

    <transition name="c-select-feedback">
      <span
        v-if="feedbackShow && feedbackMessage"
        class="feedback">
        {{ feedbackMessage }}
      </span>
    </transition>

    <div class="inner">
      <c-icon v-if="icon" :icon="icon" class="icon" width="20px" height="20px" />
      <multiselect
        v-on="$listeners"
        v-bind="$attrs"
        open-direction="bottom"
        :placeholder="placeholder"
        :select-label="selectLabel"
        :selected-label="selectedLabel"
        :deselect-label="deselectLabel">
        <template slot="noResult">{{ noResultMessage }}</template>
      </multiselect>
    </div>
  </div>
</template>

<script>
import Multiselect from 'vue-multiselect'
import Scroll from '@/modules/directives/Scroll'

export default {
  components: { Multiselect },
  directives: { Scroll },
  props: {
    feedbackType: {
      type: String,
      default: 'error'
    },
    feedbackMessage: {
      type: String,
      default: ''
    },
    feedbackShow: {
      type: Boolean,
      default: false
    },
    noResultMessage: {
      type: String,
      default: 'Não foram encontradas opções. Considere alterar o filtro.'
    },
    placeholder: {
      type: String,
      default: 'Selecione'
    },
    selectLabel: {
      type: String,
      default: 'Pressione enter para selecionar'
    },
    selectedLabel: {
      type: String,
      default: 'Selecionado'
    },
    deselectLabel: {
      type: String,
      default: 'Selecionado'
    },
    formLabel: {
      type: String,
      default: ''
    },
    icon: {
      type: String,
      default: ''
    },
    required: {
      type: Boolean,
      default: false
    }
  },
  computed: {
    generatedClass () {
      return {
        '-success': this.feedbackType === 'success',
        '-error': this.feedbackType === 'error',
        '-show-feedback': this.feedbackShow,
        '-has-icon': this.icon,
      }
    }
  }
}
</script>

<style lang="scss">
@import '~@/styles/reference';
@import '~vue-multiselect/dist/vue-multiselect.min';

$c-select-font-size:          13px !default;
$c-select-feedback-font-size: 13px !default;
$c-select-label-font-size:    10px !default;
$c-select-font-family: $c-font-family-base !default;

$c-select-highlight-background: $primary-color-placeholder !default;
$c-select-active-background: $c-color-primary !default;

$c-select-background-color:          #FFFFF !default;
$c-select-border-color:              #E9EAEE !default;
$c-select-active-border-color:       #8fb2f4 !default;
$c-select-disabled-background-color: #eaedef !default;
$c-select-disabled-color:            #bdc0d1 !default;
$c-select-color:                     $title-color !default;
$c-select-active-font-color:         $title-color !default;
$c-select-highlight-font-color:      $title-color !default;
$c-select-label-color:               #8c92b2 !default;
$c-select-success-border-color:      #59efb2 !default;
$c-select-success-color:             #59eeb2 !default;
$c-select-error-border-color:        #ff7987 !default;
$c-select-error-color:               #ff7986 !default;

.c-select {
  & {
    position: relative;
  }

  & > .label {
    color: $title-color;
    text-transform: uppercase;
    font-size: 12px;
    line-height: 16px;
    margin-bottom: 9px;

    & > span {
      display: flex;
    }
  }

  & > .label .required {
    color: $title-color;
    display: inline-block;
    margin-left: 3.5px;
  }

  & > .feedback {
    font-size: $c-select-feedback-font-size;
    position: absolute;
    bottom: 3px;
    left: 0;
    right: 0;
    line-height: 1;
    z-index: 1;
  }

  &.-show-feedback {
    padding-bottom: outer-base();
  }

  & .multiselect__tag {
    //background-color: rgba(18,30,72,0.1) !important;
    background-color: #E0E1E6 !important;
    color: $title-color !important;
    font-weight: 600 !important;
    font-size: 13px !important;
  }

  &.-show-feedback.-success {
    & .multiselect .multiselect__tags {
      border-color: $c-select-success-border-color;
    }
    & > .feedback {
      color: $c-select-success-color;
    }
  }

  &.-show-feedback.-error {
    & .multiselect .multiselect__tags {
      border-color: $c-select-error-border-color;
    }
    & > .feedback {
      color: $c-select-error-color;
    }
  }

  &.-has-icon > .inner {
    position: relative;

    & > .icon {
      position: absolute;
      top: 50%;
      left: 15px;
      transform: translateY(-50%);
      z-index: 2;
    }

    .multiselect__single {
      text-indent: 30px;
      padding-top: 2px;
    }
  }

  .multiselect {
    z-index: 1;

    &,
    &__input,
    &__single {
      font-size: $c-select-font-size;
      font-family: $c-select-font-family;
      color: $c-select-color;
    }

    &__input,
    &__single {
      &::placeholder { color: gray; }
    }

    &__select {
      height: 2.5625rem;

      &::before {
        border-top-color: gray;
        color: gray;
      }
    }

    &__tags {
      border-color: $c-select-border-color;
    }

    &__tags,
    &__input {
      background-color: $c-select-background-color;
    }

    &__content-wrapper {
      @include elevation(2);
      margin-top: .3125rem;
      border-radius: 8px;
      max-height: 240px !important;
    }

    &__option {
      &--highlight,
      &--highlight::after {
        background-color: $c-select-highlight-background;
        color: $c-select-highlight-font-color;
      }

      &--selected,
      &--selected::after {
        background-color: $c-select-active-background;
        color: $c-select-active-font-color;
      }

      &--highlight.multiselect__option--selected,
      &--highlight.multiselect__option--selected::after {
        background-color: $c-select-active-background;
        color: $c-select-active-font-color;
      }
    }

    & .multiselect__tags {
      transition: border 0.3s ease-in-out;
      will-change: border;;
    }

    &--active {
      z-index: 100;
      &::after { opacity: 1; }

      & .multiselect__tags {
        border-radius: 3px;
        transition: box-shadow 0.3s ease;
        box-shadow: 0 0 0 3px $c-select-active-border-color;
        border-color: transparent;
      }
    }

    &--disabled {
      opacity: 1 !important;
    }

    &--disabled .multiselect__tags,
    &--disabled .multiselect__input {
      color: $c-select-disabled-color;
      background-color: $c-select-disabled-background-color;
      border-color: $c-select-disabled-background-color;
      border-radius: 3px;
      pointer-events: all;
      &:hover { cursor: not-allowed; }
      &::placeholder { color: $c-select-disabled-color; }
    }

    &__tag {
      background-color: $c-color-primary;

      &-icon:hover { background-color: $c-color-primary; }

      &-icon::after { color: $c-select-active-font-color ; }
    }
  }

  &.-show-feedback.-success .multiselect--active {
    & .multiselect__tags {
      box-shadow: 0 0 0 3px $c-select-success-border-color;
    }
  }

  &.-show-feedback.-error .multiselect--active {
    & .multiselect__tags {
      box-shadow: 0 0 0 3px $c-select-error-border-color;
    }
  }
}

.c-select-feedback-enter-active,
.c-select-feedback-leave-active {
  transition: all 0.3s ease-out;
}
.c-select-feedback-enter,
.c-select-feedback-leave-to {
  opacity: 0;
  transform: translateY(-10px);
}
</style>