@misandra/vue2-select v1.0.1

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

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