tiny-components
/
select
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

adding label for selected counter, adding selected default

Browse Source
main
HerrHase 6 days ago
parent 680ab8b152
commit 4d9be381d1
9 changed files with 145 additions and 17 deletions
Show Stats Download Patch File Download Diff File

23
README.md
Unescape View File

@ -42,6 +42,7 @@ Default Options for Start
import observable from '@riotjs/observable'
let store = observable({
locations: [{
'label' : 'A',
'value' : 'a'
@ -74,23 +75,35 @@ let store = observable({
'value' : 'j'
}],
query(value) {
queryOptions(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)
this.trigger('update.options', results)
} else {
this.trigger('update.options', this.locations)
}
},
querySelected(values) {
const results = []
// if value is undefined, adding all locations
this.trigger('update', this.locations)
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)
}
})
```

4
example/assets-manifest.json
Unescape View File

@ -1,5 +1,5 @@
{
"/example/js/spritemap.js": "/example/js/spritemap.js?version=7ce719c9e00cdc31c694d971b9a5e812",
"/example/js/example.js": "/example/js/example.js?version=2451e89d416b448c318a4c3866f1ebf8",
"/example/css/styles.css": "/example/css/styles.css?version=aa01e6a7dccff39e3f40dcf35c9e9576"
"/example/js/example.js": "/example/js/example.js?version=d36f184da8866862da78caa577eeac1b",
"/example/css/styles.css": "/example/css/styles.css?version=ba6581d3fd3989f7bda152d185e7a2ef"
}

4
example/css/styles.css
Unescape View File

@ -2266,6 +2266,10 @@ svg.field-choice__checked {
*
*/
.justify-content-end {
justify-content: end;
}
.field-select__options-panel {
overflow-x: scroll;
max-height: 15vh;

13
example/index.html
Unescape View File

@ -47,7 +47,13 @@
<div class="field-group">
<label class="field-label">
Locations (Multiple + Filter)
<tiny-field-select-api multiple searchable name="location" placeholder-filter="Filter Items"></tiny-field-select-api>
<tiny-field-select-api multiple searchable name="location"></tiny-field-select-api>
</label>
</div>
<div class="field-group">
<label class="field-label">
Locations (Multiple + Default)
<tiny-field-select-default multiple name="location"></tiny-field-select-default>
</label>
</div>
</form>
@ -94,6 +100,11 @@
riot.mount('tiny-field-select-api', {
store: LocationStore
})
riot.mount('tiny-field-select-default', {
store: LocationDefaultStore,
selected: [ 'f', 'd' ]
})
})
</script>

2
example/js/example.js
View File

File diff suppressed because one or more lines are too long

2
package.json
Unescape View File

@ -1,6 +1,6 @@
{
"name": "@tiny-components/select",
"version": "0.1.0",
"version": "0.2.0",
"description": "Select with filter for Desktop and Mobile",
"repository": {
"type": "git",

88
src/example.js
Unescape View File

@ -37,7 +37,7 @@ window.LocationStore = observable({
'value' : 'j'
}],
query(value) {
queryOptions(value) {
if (value !== undefined) {
const results = []
@ -47,12 +47,94 @@ window.LocationStore = observable({
}
}
this.trigger('update', results)
this.trigger('update.options', results)
} else {
this.trigger('update', this.locations)
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)
}
})
window.LocationDefaultStore = 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)
}
})
riot.register('tiny-field-select', Select)
riot.register('tiny-field-select-api', Select)
riot.register('tiny-field-select-default', Select)

22
src/select.riot
Unescape View File

@ -13,6 +13,11 @@
</button>
</div>
<div class="panel">
<div class="bar justify-content-end">
<div class="bar__end">
{ state.selected.length } / { state.options.length } &#128455;
</div>
</div>
<div class="field-select__options-panel">
<ul class="field-select__options-list">
<li class="{ getItemClasses(['field-select__options-item'], option) }" each={ option in state.options } onclick={ (event) => { handleToggle(event, option) } }>
@ -81,7 +86,7 @@
// if store update, add data to options
if (this.props.store) {
this.props.store.on('update', (data) => {
this.props.store.on('update.options', (data) => {
if (this.state.selected.length > 0) {
for (let i = 0; i < this.state.selected.length; i++) {
@ -104,7 +109,16 @@
this.update()
})
this.props.store.query()
this.props.store.queryOptions()
if (this.props.selected) {
this.props.store.on('update.selected', (data) => {
this.state.selected = data
this.update()
})
this.props.store.querySelected(this.props.selected)
}
}
// getting closet form-element and add reset
@ -134,7 +148,7 @@
handleResetSearchable(event) {
event.target.previousElementSibling.value = ''
this.state.query = ''
this.props.store.query(this.state.query)
this.props.store.queryOptions(this.state.query)
},
/**
@ -143,7 +157,7 @@
*/
handleOnKeyUp(event) {
this.state.query = event.target.value.trim()
this.props.store.query(this.state.query)
this.props.store.queryOptions(this.state.query)
},
/**

4
src/styles.scss
Unescape View File

@ -1,3 +1,7 @@
.justify-content-end {
justify-content: end;
}
.field-select {
&__options-panel {

Write Preview
Loading…
Cancel
Save