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)
    }
}

})