vs-select v1.0.6

Vue Simple Select

🗃 A simple vue select. Perfect for all your select scenarios.

A light weight vue plugin built groundup.

📺 Live Demo

Code Sandbox: Link

🛠 Install

npm i vs-select

yarn add vs-select

🚀 Usage

<template>
  <vs-select :options="options1"></vs-select>
  <vs-multiselect :options="options1"></vs-multiselect>
</template>

<script>
  import { VsSelect, VsMultiselect } from 'vs-select';

  export default {
    components: {
      VsSelect,
      VsMultiselect,
    },

    data() {
      return {
        options1: ['Derek', 'Ryan', 'BB', 'Chris'],
        options2: [
          { label: 'Derek', value: 'D' },
          { label: 'Ryan', value: 'R' },
          { label: 'BB', value: 'BB' },
          { label: 'Chris', value: 'C' },
        ],
      };
    },
  };
</script>

🌎 CDN

<script src="https://unpkg.com/vs-select@1.0.6/dist/vs-select.min.js"></script>

<template>
  <vs-select :options="options1"></vs-select>
  <vs-multiselect :options="options1"></vs-multiselect>
</template>

Nuxt Code Snippet

After installation,

• Create a file /plugins/vs-select.js

  import Vue from 'vue';
  import { VsSelect, VsMultiselect } from 'vs-select';
  
  Vue.component('vs-select', VsSelect);
  Vue.component('vs-select', VsMultiselect);

• Update nuxt.config.js

  module.exports = {
    ...
    plugins: [
      { src: '~plugins/vs-select', mode: 'client' }
      ...
    ]
  }

• In the page/ component

  <template>
    <vs-select :options="options1"></vs-select>
    <vs-multiselect :options="options1"></vs-multiselect>
  </template>

🔥 Customizable

<vs-select :options="options1" is-search>
  <template v-slot:options="{ options, selected, onSelectedItem }">
    <li
      v-for="(option, index) in options"
      :key="'selected-' + index"
      class="menu-item"
      :class="[{ 'menu-item--is-checked': selected === option }]"
      @click="onSelectedItem(option, index)"
    >
      <span>{{ option }}</span>
    </li>
  </template>
</vs-select>

⚙ Props

Note You can also pass disable: true in array of objects to disable particular item.

// Example
<template>
  <vs-select :options="options"></vs-select>
</template>

<script>
  import { VsSelect } from 'vs-select';

  export default {
    data() {
      return {
        options: [
          { label: 'Iron Man', value: 'Tony' },
          { label: 'Thor', value: 'thor', disabled: true },
          { label: 'Captain America', value: 'Steve Roger' },
        ],
      };
    },
  };
</script>

🔥 Events

📎 Slots

You can define own item markup via slots:

Note Colors/ radius can be modified for the select box using css variables. Default colors used:

<style>
  .vs-select,
  .vs-multiselect {
    --vs-select-bg: #ffffff;
    --vs-select-border: #d8dcde;
    --vs-select-border-hover: #5293c7;
    --vs-select-hover: #edf7ff;
    --vs-select-error: #cc3340;
    --vs-select-icon: #68737d;
    --vs-select-border-radius: 4px;
  }
</style>