CdsSelectmultiple.vue

<template>
  <!--
  <cds-selectmultiple
      v-model="selectedOptions"
      :options="options"
      label="Options"
      option-text="name"
      placeholder="Select an option"
      @select="(selected) => log(selected)" />
  -->

  <div class="ckpt-Multiselect">
    <multiselect
      v-model="selectedOptions"
      :options="options"
      :multiple="true"
      group-values="libs"
      group-label="language"
      :group-select="true"
      placeholder="Select an option"
      track-by="name"
      label="name"
      :limit=6
    >
      <template #clear="props">
      <div class="multiselect__removeall">
      <button
        v-if="test.length"
        @mousedown.prevent.stop="removeAll"
        type="button"
        class="ckpt-Multiselect-remove"
      >
        <cds-icon
          name="close"
          size="small" />
      </button>
      </div>
      </template>
      <template #caret="{toggle}">
      <div class="multiselect__select">
        <button
          @mousedown.prevent.stop="toggle"
          type="button"
          class="ckpt-Multiselect-toggle"
        >
          <cds-icon name="chevron-down" />
        </button>
      </div>
      </template>
      <template #tag="{option, search, remove}">
      <div class="ckpt-Multiselect-tag">
        <cds-tag
          @remove="remove(option)"
          :text="option.name"
          size="small"
          removable />
      </div>
      </template>
    </multiselect>
  </div>
</template>

<script>
import Multiselect from 'vue-multiselect'

export default {
    components: {
      Multiselect
    },
    data() {
      return {
        selectedOptions: [],
        options: [{language: 'Javascript',libs: [{ name: 'Vue.js', category: 'Front-end' },{ name: 'Adonis', category: 'Backend' }]},{language: 'Ruby',libs: [{ name: 'Rails', category: 'Backend' },{ name: 'Sinatra', category: 'Backend' }]},{language: 'Other',libs: [{ name: 'Laravel', category: 'Backend' },{ name: 'Phoenix', category: 'Backend' }]}]
      }
    },
    methods: {
      log(data) {
        /* eslint-disable */
        console.log(data);
      },
      removeAll() {
        this.selectedOptions = [];
      }
    }
}
</script>

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

  .ckpt-Multiselect {
    background-color: #fff;

    .multiselect {
      align-items: stretch;
      border: 1px solid #9aa5b8;
      box-sizing: border-box;
      color: inherit;
      display: flex;
      flex-flow: row nowrap;
    }

    .multiselect__tags {
      background: 0;
      border: 0;
      border-radius: 0;
      display: flex;
      flex: 1 1 0;
      flex-flow: column;
      justify-content: center;
      order: 1;
      padding: 3px 9px 6px 0;
    }

    .multiselect--disabled {
      background-color: #eff1f4;
      border-color: #e0e3e9;
      color: #c1c7d3;
      opacity: 1;
      user-select: none;
    }

    .multiselect__placeholder {
      color: #c1c7d3;
      margin-bottom: 0;
    }

    .multiselect__select,
    .multiselect__removeall {
      background: 0 !important;
      color: inherit !important;
      flex: 0 0 auto;
      height: auto;
      order: 3;
      padding: 0;
      position: static;
      transform: none !important;
      transition: none;
      width: 36px;

      &::before {
        content: normal;
      }
    }
    .multiselect__removeall {
      order: 2;
    }

    .multiselect__placeholder {
      padding: 0 0 0 6px;
    }
    .multiselect__tags-wrap {
      align-self: center;
      box-sizing: border-box;
      display: flex;
      flex-flow: row wrap;
      padding: 0 9px 0 3px;
      overflow: hidden;
      width: 100%;
    }

    .multiselect__strong {
      margin: 0;
      padding: 3px 6px 0;
      line-height: 1.3em;
      display: block;
    }

    .multiselect__input {
      border-radius: 0;
      color: inherit;
      font: inherit;
      margin: 6px 6px 0;
      min-height: 1.3em;
      padding: 0;

    }

    &-tag {
      margin: 3px;
    }

    &-toggle {
      align-items: center;
      background: linear-gradient(to bottom, #9aa5b8, #9aa5b8) 0 50% / 1px calc(100% - 12px) no-repeat;
      border: 0;
      color: #9aa5b8;
      cursor: pointer;
      display: flex;
      height: 100%;
      justify-content: center;
      outline: none;
      padding: 6px;
      width: 100%;

      &:hover {
        color: #000;
      }

      &:disabled {
        color: #eff1f4;
        cursor: default;
      }
    }

    &-remove {
      align-items: center;
      background: 0;
      border: 0;
      color: #9aa5b8;
      cursor: pointer;
      display: flex;
      height: 100%;
      justify-content: center;
      outline: none;
      padding: 6px;
      width: 100%;

      &:hover {
        color: #000;
      }

      &:disabled {
        color: #eff1f4;
        cursor: default;
      }
    }

    .multiselect__content-wrapper {
      background-color: #fff;
      border: 0;
      border-radius: 4px;
      box-shadow: 0px 1px 5px 0px rgba(0,0,0,0.2)
                , 0px 2px 2px 0px rgba(0,0,0,0.14)
                , 0px 3px 1px -2px rgba(0,0,0,0.12);
      color: #000;
      margin: 8px 0 0;
      padding: 0;
      top: 100%;
    }
    .multiselect--above .multiselect__content-wrapper {
      margin-bottom: 8px;
      margin-top: 0;
      top: auto;
    }
    .multiselect__content {
      padding: 4px 0;
    }

    .multiselect__option {
      background: 0;
      color: inherit;
      font-weight: 400;
      line-height: 1.3em;
      padding: 8px 16px;

      &::after {
        background: 0;
        bottom: 8px;
        color: rgba(0, 0, 0, .32);
        font-size: 12px;
        line-height: 1.3em;
        top: auto;
      }

      &:hover {
        background-color: rgba(0, 0, 0, .08);
      }

      &--group {
        font-weight: 500;
      }

      &--selected {
        background-color: rgba(0, 0, 0, .14) !important;

        &:not(.multiselect__option--highlight):after {
          content: normal;
        }
      }


    }
  }
</style>