Tiny Components - Select

Created with Riot.js. Select Field Element, Filter-Option to connect a Observable. Using Styles for UI from Plain-UI.

Source: 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 for Start

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'
    }],

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

            // run through locations and check string contains value
            for (let i = 0; i < this.locations.length; i++) {
                if (this.locations[i].value.includes(value)) {
                    results.push(this.locations[i])
                }
            }

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

            // if value is undefined, adding all locations
            this.trigger('update', this.locations)
        }
    }
})