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

adding overlay, seperate selection

Browse Source
main
HerrHase 3 weeks ago
parent a2bcc2ca89
commit 3e4025f262
7 changed files with 260 additions and 46 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=db8edef7a81e408a5804bffdd078a39f",
"/example/css/styles.css": "/example/css/styles.css?version=ab2e4c2ab96731939c29a93de815c70e"
"/example/js/example.js": "/example/js/example.js?version=b2462247bc6cf4d981a713b1080987b1",
"/example/css/styles.css": "/example/css/styles.css?version=71ef67f822ecc43220ddcaa6695b51ac"
}

79
example/css/styles.css
Unescape View File

@ -2000,6 +2000,9 @@ svg.field-choice__checked {
.h-1 {
height: 1px;
}
.w-100 {
width: 100%;
}
.h-100 {
height: 100%;
}
@ -2244,6 +2247,9 @@ svg.field-choice__checked {
*
*
*/
.display-flex {
display: flex;
}
/**
* for hidden-xs etc, show https://reflexgrid.com/#visibility-helpers
*
@ -2270,9 +2276,28 @@ svg.field-choice__checked {
justify-content: end;
}
.field-select .placeholder {
display: inline-block;
color: grey;
padding: 0 0.75em;
user-select: none;
}
.field-select__options-panel {
overflow-x: scroll;
max-height: 15vh;
max-height: 20vh;
}
.field-select__options {
position: relative;
z-index: 100;
min-width: 600px;
}
.field-select__options .button {
justify-content: center;
border-top-left-radius: 0;
border-top-right-radius: 0;
}
.field-select__options .button:hover {
color: var(--text);
}
.field-select__options-item {
position: relative;
@ -2303,6 +2328,10 @@ svg.field-choice__checked {
.field-select__options-filter {
position: relative;
}
.field-select__options-filter .field-text {
border-left: 0;
border-right: 0;
}
.field-select__options-filter--active .field-select__options-filter-reset {
display: block;
}
@ -2318,7 +2347,7 @@ svg.field-choice__checked {
margin: 0.1rem 0.3rem;
}
.field-select__options-filter-reset:hover {
cursor: pointer;
pointer: cursor;
}
.field-select__options-list {
margin: 0;
@ -2343,9 +2372,53 @@ svg.field-choice__checked {
.field-select__options-list li:last-child {
border-bottom: 0;
}
.field-select__selections {
padding: 0.23em 0.23em;
min-height: 46px;
display: flex;
align-items: center;
}
.field-select__selections-list {
margin: 0 0 -3px;
padding: 0;
list-style: none;
}
.field-select__selections-item {
margin-right: 0.25rem;
user-select: none;
margin-bottom: 3px;
}
.field-select__selections-item:hover {
cursor: default;
}
.field-select__selections-remove {
position: relative;
top: 2px;
padding: 0;
margin: 0 0 0 0.25em;
color: var(--danger);
background: none;
border: 0;
font-size: 1.25rem;
line-height: 0;
}
.field-select__selections-remove:hover {
cursor: pointer;
}
.field-select__selections .badge {
border-color: var(--border);
background-color: var(--background-contrast);
color: var(--text);
}
.field-select--disabled .panel, .field-select--disabled .sidebar__inner {
.field-select--disabled {
opacity: 0.5;
}
.field-select--disabled .badge:hover, .field-select--disabled .field-select__selections-remove:hover {
cursor: not-allowed;
}
.field-select--disabled:hover {
cursor: not-allowed;
}
/*# sourceMappingURL=styles.css.map */

8
example/index.html
Unescape View File

@ -47,7 +47,7 @@
<div class="field-group">
<label class="field-label">
Locations (Multiple + Filter)
<tiny-field-select-api multiple searchable name="location"></tiny-field-select-api>
<tiny-field-select-api multiple searchable name="location" placeholder-label="Please Choose" placeholder-filter="Type for Search"></tiny-field-select-api>
</label>
</div>
<div class="field-group">
@ -62,6 +62,12 @@
<tiny-field-select-default multiple name="location"></tiny-field-select-default>
</label>
</div>
<div class="field-group">
<label class="field-label">
Locations (Multiple + Default)
<tiny-field-select-default disabled multiple name="location"></tiny-field-select-default>
</label>
</div>
</form>
</div>
</div>

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

123
src/select.riot
Unescape View File

@ -4,39 +4,59 @@
<select name="{ props.name }" multiple style="display: none;">
<option value="{ selected[ state.keys.value ] }" selected each={ selected in state.selected }></option>
</select>
<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) } }>
{ item[ state.keys.label ] }
<button type="button" class="field-select__selections-remove">
&#11198;
</button>
</li>
</ul>
<span class="placeholder" if={ props.placeholderLabel && state.selected.length === 0 }>
{ props.placeholderLabel }
</span>
</div>
<div class="field-select__options">
<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 } />
<button type="button" class="field-select__options-filter-reset" onclick={ (event) => { handleResetSearchable(event) } }>
&#11198;
</button>
</div>
<div class="panel">
<div class="bar justify-content-end">
<div class="bar__end">
{ state.selected.length } / { state.options.length } &#128455;
<div class="{ getModalClasses(['modal']) }">
<div class="field-select__options">
<div class="panel">
<div class="bar justify-content-end">
<div class="bar__start">
{ state.selected.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 } />
<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) } }>
<span class="field-select__options-item-check">
&#9745;
</span>
<span class="field-select__options-item-uncheck">
&#9744;
</span>
{ option[ state.keys.label ] }
</li>
<li class="field-select__item field-select__item--empty center color-danger" if={ state.options.length === 0 }>
&#8709;
</li>
</ul>
</div>
<div class="display-flex">
<button type="button" class="button button--success button--full m-bottom-0 w-100" onclick={ (event) => { handleOptionsConfirm(event) } }>
&#10003;
</button>
</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) } }>
<span class="field-select__options-item-check">
&#9745;
</span>
<span class="field-select__options-item-uncheck">
&#9744;
</span>
{ option[ state.keys.label ] }
</li>
<li class="field-select__item field-select__item--empty center color-danger" if={ state.options.length === 0 }>
&#8709;
</li>
</ul>
</div>
</div>
</div>
</div>
<script>
@ -58,7 +78,8 @@
selected: [],
hasUpdated: false,
options: [],
query: ''
query: '',
isSelectionOpen: false
}
if (this.props.label) {
@ -74,6 +95,20 @@
}
},
/**
*
*
*/
onBeforeUpdate() {
// props has changed after reset
if (this.props.selected && this.props.selected.length > 0 && !this.state.hasUpdated) {
this.state.selected = this.props.selected
this.state.hasUpdated = true
}
},
/**
*
*
@ -123,18 +158,28 @@
})
},
handleOptionsConfirm(event) {
this.handleToggleSelection(event)
},
/**
*
*
*/
onBeforeUpdate() {
handleToggleSelection(event) {
// props has changed after reset
if (this.props.selected && this.props.selected.length > 0 && !this.state.hasUpdated) {
this.state.selected = this.props.selected
this.state.hasUpdated = true
if (this.props.disabled !== undefined) {
event.preventDefault()
return false
}
if (this.state.isSelectionOpen === true) {
this.state.isSelectionOpen = false
} else {
this.state.isSelectionOpen = true
}
this.update()
},
/**
@ -162,6 +207,8 @@
*/
handleToggle(event, option) {
event.stopPropagation()
if (this.props.disabled !== undefined) {
event.preventDefault()
return false
@ -220,6 +267,14 @@
return classes.join(' ')
},
getModalClasses(classes) {
if (this.state.isSelectionOpen === true) {
classes.push('modal--open')
}
return classes.join(' ')
},
/**
* search all selected for value return index or false
*

88
src/styles.scss
Unescape View File

@ -4,13 +4,35 @@
.field-select {
.placeholder {
display: inline-block;
color: grey;
padding: 0 0.75em;
user-select: none;
}
&__options-panel {
overflow-x: scroll;
max-height: 15vh;
max-height: 20vh;
}
&__options {
position: relative;
z-index: 100;
min-width: 600px;
// workaround to remove border radius in corners up
.button {
justify-content: center;
border-top-left-radius: 0;
border-top-right-radius: 0;
&:hover {
color: var(--text);
}
}
&-item {
position: relative;
}
@ -47,6 +69,11 @@
&-filter {
position: relative;
.field-text {
border-left: 0;
border-right: 0;
}
&--active {
.field-select__options-filter-reset {
display: block;
@ -66,7 +93,7 @@
margin: 0.1rem 0.3rem;
&:hover {
cursor: pointer;
pointer: cursor;
}
}
}
@ -98,12 +125,65 @@
}
}
}
&__selections {
padding: 0.23em 0.23em;
min-height: 46px;
display: flex;
align-items: center;
&-list {
margin: 0 0 -3px;
padding: 0;
list-style: none;
}
&-item {
margin-right: 0.25rem;
user-select: none;
margin-bottom: 3px;
&:hover {
cursor: default;
}
}
&-remove {
position: relative;
top: 2px;
padding: 0;
margin: 0 0 0 0.25em;
color: var(--danger);
background: none;
border: 0;
font-size: 1.25rem;
line-height: 0;
&:hover {
cursor: pointer;
}
}
.badge {
border-color: var(--border);
background-color: var(--background-contrast);
color: var(--text);
}
}
}
.field-select {
&--disabled {
.panel {
opacity: 0.5;
opacity: 0.5;
.badge, .field-select__selections-remove {
&:hover {
cursor: not-allowed;
}
}
&:hover {
cursor: not-allowed;
}
}
}

Write Preview
Loading…
Cancel
Save