@tiny-components/select (0.1.0)
Published 6 days ago by HerrHase
Installation
@tiny-components:registry=https://git.node001.net/api/packages/tiny-components/npm/npm install @tiny-components/select@0.1.0"@tiny-components/select": "0.1.0"About this package
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)
}
}
})
Dependencies
Dependencies
| ID | Version |
|---|---|
| @riotjs/observable | ^4.1.1 |
| riot | ^10.1.4 |
Development Dependencies
| ID | Version |
|---|---|
| @riotjs/webpack-loader | ^10.0.0 |
| @tiny-components/plain-ui | ^0.6.0 |
| @tiny-components/webpack | ^0.6.0 |