vue-multiple-select-helper v0.0.2

Universal multiple select helper component for Vue

Installation

npm:

npm install vue-multiple-select-helper --save

Usage

import VueMultipleSelectionHelper from 'vue-multiple-select-helper'
Vue.use(VueMultipleSelectionHelper)

<template>
  <div class="c-cmyk-select-demo">

    <h2>CMYK Multiple</h2>

    <multiple-select-helper
      :data="colors"
      :initialSelection="preselectedMultipleColors"
      v-model="clickedMultipleColor"
      @selection-change="handleMultipleSelectionChange">
      <ul v-for="color in colors">
        <li :class="{selected: isMultipleSelected(color)}">
          <h5>{{ color.name }}</h5>
          <button @click.prevent="clickedMultipleColor = color">
            {{ isMultipleSelected(color) ? "Deselect" : "Select" }}
          </button>
        </li>
      </ul>
    </multiple-select-helper>

    <h3>Recent Multiple Clicked</h3>
    <pre>{{ recentMultipleColor }}</pre>
    <h3>Current Multiple Selection</h3>
    <pre>{{ currentMultipleSelection }}</pre>

    <hr/>

    <h2>CMYK Single</h2>

    <multiple-select-helper
      :data="colors"
      :initialSelection="preselectedSingleColor"
      :multiple="false"
      v-model="clickedSingleColor"
      @selection-change="handleSingleSelectionChange">
      <ul v-for="color in colors">
        <li :class="{selected: isSingleSelected(color)}">
          <h5>{{ color.name }}</h5>
          <button @click.prevent="clickedSingleColor = color">
            {{ isSingleSelected(color) ? "Deselect" : "Select" }}
          </button>
        </li>
      </ul>
    </multiple-select-helper>

    <h3>Recent Single Clicked</h3>
    <pre>{{ recentSingleColor }}</pre>
    <h3>Current Single Selection</h3>
    <pre>{{ currentSingleSelection }}</pre>

  </div>
</template>

<script>
  export default {
    name: 'c-cmyk-select-demo',
    data () {
      return {
        colors: [
          {
            id: '1',
            name: 'Cyan'
          },
          {
            id: '2',
            name: 'Magenta'
          },
          {
            id: '3',
            name: 'Yellow'
          },
          {
            id: '4',
            name: 'Black'
          }
        ],

        // Multiple selection
        preselectedMultipleColors: [
          {
            id: '2',
            name: 'Magenta'
          }
        ],
        currentMultipleSelection: [],
        clickedMultipleColor: {},
        recentMultipleColor: null,

        // Single selection
        preselectedSingleColor: {
          id: '4',
          name: 'Black'
        },
        clickedSingleColor: {},
        currentSingleSelection: {},
        recentSingleColor: null
      }
    },

    methods: {
      // Multiple selection
      handleMultipleSelectionChange (selection, recent) {
        this.currentMultipleSelection = selection
        this.recentMultipleColor = recent
      },
      isMultipleSelected (val) {
        return this.currentMultipleSelection.findIndex((item) => item.id === val.id) !== -1
      },

      // Single selection
      handleSingleSelectionChange (selection, recent) {
        this.currentSingleSelection = selection
        this.recentSingleColor = recent
      },
      isSingleSelected (val) {
        return this.currentSingleSelection.id === val.id
      }
    }
  }
</script>

<style scoped>
  li.selected h5,
  li.selected button {
    font-weight: bold;
  }
</style>

Attributes

Slot

Events