vue-multiselection-box v0.1.0

VueMultiSelectionBox

Yet another multi selection box for Vue

Unsorted mode

Sorted mode

Demo

Enjoy

Installation

NPM

npm i --save vue-multiselection-box

Usage

Script

import MultiSelectionBox from "vue-multiselection-box";

export default {
  name: "App",
  components: {
    MultiSelectionBox
  },
  data: () => ({
    baseList: [
      { id: 1, name: "Person 1" },
      { id: 3, name: "Person 3" },
      { id: 4, name: "Person 4" },
      { id: 5, name: "Person 5" }
    ],
    selectedList: [
      { id: 2, name: "Person 2" },
      { id: 6, name: "Person 6" },
      { id: 7, name: "Person 7" }
    ],
    mappingOptions: {
      value: "name",
      key: "id"
    },
    leftSection: {
      text: "Available",
      styles: {
        backgroundColor: "#0acf97"
      },
      sortOption: null
    },
    rightSection: {
      text: "Assigned",
      styles: {
        backgroundColor: "#727df5"
      },
      sortOption: null
    },
    isSortable: false
  })
};

Template

<MultiSelectionBox
      :base-list="baseList"
      :selected-list="selectedList"
      :isSortable="true"
      :mappingOptions="mappingOptions"
      :leftSection="leftSection"
      :rightSection="rightSection"
      @updateBase="baseList = $event"
      @updateSelected="selectedList = $event"
/>

Props API

(*) baseList : Is a base list for your selection box. (Left side.)

(**) selectedList : Is a selected list for your selection box. (Right side.)

(***) mappingOptions : is an object that holds information about your list items.

(****) leftSection : is an object that holds information about the heading color, heading text and initial sort option for your left box.

(*) rightSection : is an object that holds information about the heading color, heading text and initial sort option for your right box.

Upcoming features (Todo)

• Add more information for usage.
• Make it more customizable.

Tests

Work in progress

License

This project is licensed under MIT License