@misandra/vue2-select

vue2-select

Install

npm i @misandra/vue2-select --save

Then, import and register the component:

import Vue from "vue";
import vue2select from "@misandra/vue2-select";

Vue.component("v2-select", vue2select);

Options

Option	Type	Description	Default value	Example
options	Array	List of items	[]	:options=[{"id": 1,"name": "John"},{"id": 2,"name": "Parker"}]
id-key	String	Name of key for id (returned by v-model)	"id"	id-key="uniqId"
name-key	String	Name of key for visible value	"name"	name-key="text"
placeholder	String	Placeholder text	"Select..."	placeholder="Select name"
drop-height	[Number, String]	Dropdown height	300	drop-height="500"
bottom-indent	[Number, String]	Bottom indent of dropdown	20	bottom-indent="20"
open-top	Boolean	Open dropdown to top	false	:open-top="true"
empty-text	Sting	Empty options text	"No elements"	empty-text="Oops!"
search	Boolean	Show/hide search	false	:search="true"
pagination	Boolean	Show/hide pagination	false	:pagination="true"
item-per-page	[Number, String]	Quantity of items per page	10	item-per-page="30"
multiple	Boolean	Multiple selection	false	:multiple="true"

Example

<template>
    <v2-select
       :options=books
       id-key="uniqId"
       name-key="title"
       placeholder="Select book..."
       drop-height="200"
       bottom-indent="10"
       open-top
       search
       multiple
       pagination
       empty-text="No any book"
       item-per-page="20"
     />
</template>

<script>
   import vue2select from 'vue2-select';

   export default {
      components: {
         'v2-select': vue2select
      },
      data() {
         return {
          books: [
          {
                "title": "One Thousand and One Nights",
                "uniqId": "t7cHOcpV2OotjvHV1Sfe_mltgcwBkRhT"
             },
             {
                "title": "Jane Austen - Pride and Prejudice",
                "uniqId": "O2X6pXTCrGjAnlttxfHcVKtQ8B0ZJmuV"
             },
             {
                "title": "Honoré de Balzac - Le Père Goriot",
                "uniqId": "jyIm3u4H54sEIjWNNdb9f3CLoQAJwt15"
             },
             {
                "title": "Samuel Beckett - Molloy, Malone Dies, The Unnamable, the trilogy",
                "uniqId": "kWbzMd8Q_Q3elXIHKatxuImNScPLDY0j"
             },
             {
                "title": "Giovanni Boccaccio - The Decameron",
                "uniqId": "csDI78SMXE1X2DlLbBx51eh0rdcAckPz"
             },
             {
                "title": "Jorge Luis Borges - Ficciones",
                "uniqId": "fplduVhSy1B8kjtPMdIkfIaSuRl5wTLY"
             },
             {
                "title": "Emily Brontë - Wuthering Heights",
                "uniqId": "KMV0a0SeZbvqjkSkk43Cn7ozIZ9DwYHG"
             },
             {
                "title": "Albert Camus - The Stranger",
                "uniqId": "VMLokHO1T6mI1bwSq5FuckKM6_jYi562"
             }
          ]
         }
      }
   }
</script>

Templating

You can create custom templates for some selectors.

Option

This is the scoped slot to create custom option template.

<template>
    <v2-select :options="options">
      <template
         slot="option"
         slot-scope="prop">
         <input
            type="checkbox"
            :checked="prop.selected" />
         {{ prop.item.title}}
      </template>
    </v2-select>
</template>

properties

• item

[Object] - option item (from property "options")

• selected

[Boolean] - selection flag

---

Arrow ico

This is the scoped slot to create custom arrow ico template.

<template>
    <v2-select :options="options">
      <template
         slot="arrow"
         slot-scope="prop">
         <i
            class="arrow"
            :class="{'-up': prop.is_show}" />
      </template>
    </v2-select>
</template>

properties

• is_show

[Object] - dropdown show/hide flag

---

Remove ico

This is the scoped slot to create custom remove ico template.

<template>
    <v2-select :options="options">
      <template
         slot="remove">
         x
      </template>
    </v2-select>
</template>

---

Pagination

This is the scoped slot to create custom pagination template.

<template>
    <v2-select :options="options">
     <template
         slot="pagination"
         slot-scope="prop">
         <a href="/" @click.prevent="prop.first">first</a>
         <a href="/" @click.prevent="prop.prev">prev</a>
         <input @input="prop.change" :value="prop.page" /> / of {{prop.count}}
         <a href="/" @click.prevent="prop.next">next</a>
         <a href="/" @click.prevent="prop.last">last</a>
     </template>
    </v2-select>
</template>

properties

• page

[Number] - active page count

• count

[Number] - pages quantity

events

• change() - change active page

• first() - go to first page

• last() - go to last page

• prev() - go to previous page

• next() - go to next page