# Tiny Components - Select
Created with [Riot.js](https://riot.js.org). Select Field Element, Filter-Option to connect a [Observable](https://github.com/riot/observable). Using Styles for UI from [Plain-UI](https://plain-ui.com).

Source: [https://git.node001.net/tiny-components/select](https://git.node001.net/tiny-components/select)  

## Installation

Setup this registry in your project .npmrc file:

```
@tiny-components:registry=https://git.node001.net/api/packages/tiny-components/npm/
```

Install with npm or yarn

```
npm i --save @tiny-components/select
yarn add @tiny-components/select
```

## How to use

```
<tiny-field-select></tiny-field-select>
```

### Attribute: multiple

Select Multiple Options

### Attribute: searchable

Show Input-Field for Filtering Options, only works if Observable as Store is added and has Function Query.

### Props: options

Default Options

### Props: selected

Default Selected

### Props: query-selected

if query-selected is used, querySelected in store will used to query selected items 

### Props: store

```
import observable from '@riotjs/observable'

let store = observable({

    locations: [{
        'label' : 'A',
        'value' : 'a'
    },{
        'label' : 'B',
        'value' : 'b'
    },{
        'label' : 'C',
        'value' : 'c'
    },{
        'label' : 'D',
        'value' : 'd'
    },{
        'label' : 'E',
        'value' : 'e'
    },{
        'label' : 'F',
        'value' : 'f'
    },{
        'label' : 'G',
        'value' : 'g'
    },{
        'label' : 'H',
        'value' : 'h'
    },{
        'label' : 'I',
        'value' : 'i'
    },{
        'label' : 'J',
        'value' : 'j'
    }],

    queryOptions(value) {
        if (value !== undefined) {
            const results = []

            for (let i = 0; i < this.locations.length; i++) {
                if (this.locations[i].value.includes(value)) {
                    results.push(this.locations[i])
                }
            }

            this.trigger('update.options', results)
        } else {
            this.trigger('update.options', this.locations)
        }
    },

    querySelected(values) {

        const results = []

        for (let i = 0; i < values.length; i++) {
            for (let j = 0; j < this.locations.length; j++) {
                if (this.locations[j].value === values[i]) {
                    results.push(this.locations[j])
                }
            }
        }

        this.trigger('update.selected', results)
    }
})
```