You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
97 lines
2.1 KiB
97 lines
2.1 KiB
# 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 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)
|
|
}
|
|
}
|
|
})
|
|
```
|