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

adding cancel for modal, adding event for paste

Browse Source
main
HerrHase 1 week ago
parent 3e4025f262
commit 88781fddd0
6 changed files with 40 additions and 22 deletions
Show Stats Download Patch File Download Diff File

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=b2462247bc6cf4d981a713b1080987b1",
"/example/css/styles.css": "/example/css/styles.css?version=71ef67f822ecc43220ddcaa6695b51ac"
"/example/js/example.js": "/example/js/example.js?version=a4fbc68b770511e5798ce3b01924c004",
"/example/css/styles.css": "/example/css/styles.css?version=ec34f0e517fe635c7529d3f549b1149f"
}

4
example/css/styles.css
Unescape View File

@ -2379,14 +2379,14 @@ svg.field-choice__checked {
align-items: center;
}
.field-select__selections-list {
margin: 0 0 -3px;
margin: 0 0 -0.23em;
padding: 0;
list-style: none;
}
.field-select__selections-item {
margin-right: 0.25rem;
user-select: none;
margin-bottom: 3px;
margin-bottom: 0.23em;
}
.field-select__selections-item:hover {
cursor: default;

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": "1.0.0",
"version": "1.1.0",
"description": "Select with filter for Desktop and Mobile",
"repository": {
"type": "git",

46
src/select.riot
Unescape View File

@ -7,7 +7,7 @@
<div class="field-text field-select__selections" onclick={ (event) => { handleToggleSelection(event) } }>
<ul class="field-select__selections-list">
<li class="badge badge--success field-select__selections-item" each={ item in state.selected } onclick={ (event) => { handleToggle(event, item) } }>
<li class="badge badge--success field-select__selections-item" each={ item in state.selected } onclick={ (event) => { handleToggle(event, item, 'selected') } }>
{ item[ state.keys.label ] }
<button type="button" class="field-select__selections-remove">
&#11198;
@ -24,18 +24,18 @@
<div class="panel">
<div class="bar justify-content-end">
<div class="bar__start">
{ state.selected.length } / { state.options.length } &#128455;
{ state.preSelected.length } / { state.options.length } &#128455;
</div>
</div>
<div class="{ getFilterClasses(['field-select__options-filter']) }" if={ props.searchable !== undefined }>
<input type="text" class="field-text m-top-0" placeholder={ props.placeholderFilter } onkeyup={ (event) => { handleOnKeyUp(event) }} disabled={ props.disabled !== undefined } />
<input type="text" class="field-text m-top-0" placeholder={ props.placeholderFilter } paste={ (event) => { handleOnKeyUp(event) }} onkeyup={ (event) => { handleOnKeyUp(event) }} disabled={ props.disabled !== undefined } />
<button type="button" class="field-select__options-filter-reset" onclick={ (event) => { handleResetSearchable(event) } }>
&#11198;
</button>
</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) } }>
<li class="{ getItemClasses(['field-select__options-item'], option) }" each={ option in state.options } onclick={ (event) => { handleToggle(event, option, 'preSelected') } }>
<span class="field-select__options-item-check">
&#9745;
</span>
@ -50,6 +50,9 @@
</ul>
</div>
<div class="display-flex">
<button type="button" class="button button--danger button--full m-bottom-0 w-100" onclick={ (event) => { handleOptionsCancel(event) } }>
&#128473;
</button>
<button type="button" class="button button--success button--full m-bottom-0 w-100" onclick={ (event) => { handleOptionsConfirm(event) } }>
&#10003;
</button>
@ -76,6 +79,7 @@
value: 'value'
},
selected: [],
preSelected: [],
hasUpdated: false,
options: [],
query: '',
@ -158,7 +162,20 @@
})
},
/**
* adding preSelected to selected, close modal
*
*/
handleOptionsConfirm(event) {
this.state.selected = JSON.parse(JSON.stringify(this.state.preSelected))
this.handleToggleSelection(event)
},
/**
* close modal
*
*/
handleOptionsCancel(event) {
this.handleToggleSelection(event)
},
@ -177,6 +194,7 @@
this.state.isSelectionOpen = false
} else {
this.state.isSelectionOpen = true
this.state.preSelected = JSON.parse(JSON.stringify(this.state.selected))
}
this.update()
@ -205,7 +223,7 @@
* toggle selected, if not found add to selected
*
*/
handleToggle(event, option) {
handleToggle(event, option, key) {
event.stopPropagation()
@ -214,16 +232,16 @@
return false
}
const index = this.searchSelected(option)
const index = this.search(option, this.state[key])
if (index !== false) {
this.state.selected.splice(index, 1)
this.state[key].splice(index, 1)
} else {
if ((this.props.multiple === undefined && this.state.selected.length > 0)) {
this.state.selected = []
if ((this.props.multiple === undefined && this.state[key].length > 0)) {
this.state[key] = []
}
this.state.selected.push(option)
this.state[key].push(option)
}
this.update()
@ -246,7 +264,7 @@
*
*/
getItemClasses(classes, option) {
const index = this.searchSelected(option)
const index = this.search(option, this.state.preSelected)
if (index !== false) {
classes.push('field-select__options-item--selected')
@ -280,11 +298,11 @@
*
* @param options object
*/
searchSelected(option) {
search(option, items) {
let index = false
for (let i = 0; i < this.state.selected.length; i++) {
if (this.state.selected[i] && this.state.selected[i][ this.state.keys.value ] == option[ this.state.keys.value ]) {
for (let i = 0; i < items.length; i++) {
if (items[i] && items[i][ this.state.keys.value ] == option[ this.state.keys.value ]) {
index = i
break;
}

4
src/styles.scss
Unescape View File

@ -133,7 +133,7 @@
align-items: center;
&-list {
margin: 0 0 -3px;
margin: 0 0 -0.23em;
padding: 0;
list-style: none;
}
@ -141,7 +141,7 @@
&-item {
margin-right: 0.25rem;
user-select: none;
margin-bottom: 3px;
margin-bottom: 0.23em;
&:hover {
cursor: default;

Write Preview
Loading…
Cancel
Save