2.3 KiB

Raw Blame History

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

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

2.3 KiB Raw Blame History