i-select v1.2.2

i-select is a simplistic select with support to multiselect for VueJS.

Installation

Install via npm

npm install i-select --save

Import or require in your code:

import Vue from 'vue';
import iSelect from 'i-select';

// OR

var Vue = require('vue');
var iSelect = require('i-select');

Module

import iSelect from 'i-select';

// ...

export default {
  // ...
  components: {
    'my-awesome-select': iSelect,
  },
  // ...
};

Browser

<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script src="dist/i-select.min.js"></script>
<script>
Vue.use(iSelect);

new Vue({
  el: '#app'
});
</script>

Usage

It's very useful to use i-select you only need to register then :smile: seems like with

<i-select v-model="select" :options="['A', 'B', 'C']">

</i-select>

It's easier to use, you only need to pass an array [] with Number or String type. When you pass an Object you need some attention to default key label. Some like this:

<i-select v-model="select" :options="options">

</i-select>

import iSelect from 'i-select';

export default {
  components: {
    iSelect,
  },
  data: () => ({
    select: '',
    options: [
      { label: 'Option 1', hide: `you'll don't see this text` },
      { label: 'Option 2', hide: `you'll don't see this text` },
      { label: 'Option 3', hide: `you'll don't see this text` },
      { label: 'Option 4', hide: `you'll don't see this text` },
    ],
  }),
};

But you can personalize this with some properties like

Options

@type {Array} @default []

Options to show on select. You probably need to use a v-model to receive this data information.

<i-select v-model="myModel" :options="['A', 'B', 'C']">
</i-select>

Label

@type {String} @default 'label'

Imagine now, you have myOptions that is an Array but you haven't a key property like label. Are you thinking to use an array.map()? No way! You should to use label property passing the key name that you want use instead.

<i-select v-model="myModel" :options="myOptions" label="name">
</i-select>

Filter

@type {Boolean} @default false

When true a input search will be avaliable to filter results in options attribute.

<i-select filter v-model="myModel" :options="options">
</i-select>

Multiple

@type {Boolean} @default false

Attribute multiple return an array of results instead a single result selected.

<i-select multiple v-model="myModel" :options="options">
</i-select>

Initial value

@type {String} @default ''

Will be impressed instead i-select

<i-select initial="Hi I'm Goku">
</i-select>

Placeholder

@type {String} @default ''

Add a placeholder on filter when avaliable

<i-select placeholder="Search here">
</i-select>

No Matching

@type {String} @default 'Sorry, no matching options.'

Alternative message to show when has no matching on filter

<i-select no-matching="Sorry :/">
</i-select>

Return

@type {String}

Return to v-model only a single value instead an object. Enter with key name and get this value

<i-select return="id">
</i-select>

Limit

@type {String} @default '5'

Limit how much results will be avaliable in Select.

<i-select limit="8">
</i-select>

Disabled

@type {Boolean} @default false

Disable the entire component

<i-select disabled>
</i-select>

Hide Results

@type {Boolean} @default false

Hide results from Select when filter is called

<i-select hide-results>
</i-select>

Hide Label

@type {Boolean} @default false

Hide Label from <input>

<i-select hide-label>
</i-select>

Max Height

@type {String} @default '200px'

Sets the max-height property on the select list.

<i-select max-height="500px">
</i-select>

Personalization

You can personalize your <i-select> with class i-select or through some properties.

Uppercase

@type {Boolean} @default false

Convert All Exibed Text to UPPERCASE

<i-select uppercase>
</i-select>

isBackground

@type {String}

Paint Background Color

<i-select is-background="#ff0"></i-select>

isOutline

@type {String}

Paint Border Color

<i-select is-outline="#f0f"></i-select>

isColor

@type {String}

Paint Text Color

<i-select is-color="#00f"></i-select>

isTooltip

@type {String}

Give us a Tooltip

<i-select is-tooltip="This is a Tooltip"></i-select>

This example will open a Tooltip with a message to top. See above all tooltips positions (is-position) avaliable:

• top
• left
• right
• bottom

<i-select is-tooltip="This is a Tooltip" is-position="right"></i-select>

Demo

JSFiddle