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/spritemap.js": "/example/js/spritemap.js?version=7ce719c9e00cdc31c694d971b9a5e812",
"/example/js/example.js": "/example/js/example.js?version=db8edef7a81e408a5804bffdd078a39f", "/example/js/example.js": "/example/js/example.js?version=b2462247bc6cf4d981a713b1080987b1",
"/example/css/styles.css": "/example/css/styles.css?version=ab2e4c2ab96731939c29a93de815c70e" "/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 { .h-1 {
height: 1px; height: 1px;
} }
.w-100 {
width: 100%;
}
.h-100 { .h-100 {
height: 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 * for hidden-xs etc, show https://reflexgrid.com/#visibility-helpers
* *
@ -2270,9 +2276,28 @@ svg.field-choice__checked {
justify-content: end; justify-content: end;
} }
.field-select .placeholder {
display: inline-block;
color: grey;
padding: 0 0.75em;
user-select: none;
}
.field-select__options-panel { .field-select__options-panel {
overflow-x: scroll; 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 { .field-select__options-item {
position: relative; position: relative;
@ -2303,6 +2328,10 @@ svg.field-choice__checked {
.field-select__options-filter { .field-select__options-filter {
position: relative; position: relative;
} }
.field-select__options-filter .field-text {
border-left: 0;
border-right: 0;
}
.field-select__options-filter--active .field-select__options-filter-reset { .field-select__options-filter--active .field-select__options-filter-reset {
display: block; display: block;
} }
@ -2318,7 +2347,7 @@ svg.field-choice__checked {
margin: 0.1rem 0.3rem; margin: 0.1rem 0.3rem;
} }
.field-select__options-filter-reset:hover { .field-select__options-filter-reset:hover {
cursor: pointer; pointer: cursor;
} }
.field-select__options-list { .field-select__options-list {
margin: 0; margin: 0;
@ -2343,9 +2372,53 @@ svg.field-choice__checked {
.field-select__options-list li:last-child { .field-select__options-list li:last-child {
border-bottom: 0; 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; 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 */ /*# sourceMappingURL=styles.css.map */

8
example/index.html
Unescape View File

@ -47,7 +47,7 @@
<div class="field-group"> <div class="field-group">
<label class="field-label"> <label class="field-label">
Locations (Multiple + Filter) 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> </label>
</div> </div>
<div class="field-group"> <div class="field-group">
@ -62,6 +62,12 @@
<tiny-field-select-default multiple name="location"></tiny-field-select-default> <tiny-field-select-default multiple name="location"></tiny-field-select-default>
</label> </label>
</div> </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> </form>
</div> </div>
</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", "name": "@tiny-components/select",
"version": "0.4.1", "version": "1.0.0",
"description": "Select with filter for Desktop and Mobile", "description": "Select with filter for Desktop and Mobile",
"repository": { "repository": {
"type": "git", "type": "git",

123
src/select.riot
Unescape View File

@ -4,39 +4,59 @@
<select name="{ props.name }" multiple style="display: none;"> <select name="{ props.name }" multiple style="display: none;">
<option value="{ selected[ state.keys.value ] }" selected each={ selected in state.selected }></option> <option value="{ selected[ state.keys.value ] }" selected each={ selected in state.selected }></option>
</select> </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="{ getModalClasses(['modal']) }">
<div class="{ getFilterClasses(['field-select__options-filter']) }" if={ props.searchable !== undefined }> <div class="field-select__options">
<input type="text" class="field-text m-top-0" placeholder={ props.placeholderFilter } onkeyup={ (event) => { handleOnKeyUp(event) }} disabled={ props.disabled !== undefined } /> <div class="panel">
<button type="button" class="field-select__options-filter-reset" onclick={ (event) => { handleResetSearchable(event) } }> <div class="bar justify-content-end">
&#11198; <div class="bar__start">
</button> { state.selected.length } / { state.options.length } &#128455;
</div> </div>
<div class="panel"> </div>
<div class="bar justify-content-end"> <div class="{ getFilterClasses(['field-select__options-filter']) }" if={ props.searchable !== undefined }>
<div class="bar__end"> <input type="text" class="field-text m-top-0" placeholder={ props.placeholderFilter } onkeyup={ (event) => { handleOnKeyUp(event) }} disabled={ props.disabled !== undefined } />
{ state.selected.length } / { state.options.length } &#128455; <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>
<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>
</div> </div>
</div> </div>
<script> <script>
@ -58,7 +78,8 @@
selected: [], selected: [],
hasUpdated: false, hasUpdated: false,
options: [], options: [],
query: '' query: '',
isSelectionOpen: false
} }
if (this.props.label) { 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.disabled !== undefined) {
if (this.props.selected && this.props.selected.length > 0 && !this.state.hasUpdated) { event.preventDefault()
this.state.selected = this.props.selected return false
this.state.hasUpdated = true
} }
if (this.state.isSelectionOpen === true) {
this.state.isSelectionOpen = false
} else {
this.state.isSelectionOpen = true
}
this.update()
}, },
/** /**
@ -162,6 +207,8 @@
*/ */
handleToggle(event, option) { handleToggle(event, option) {
event.stopPropagation()
if (this.props.disabled !== undefined) { if (this.props.disabled !== undefined) {
event.preventDefault() event.preventDefault()
return false return false
@ -220,6 +267,14 @@
return classes.join(' ') 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 * search all selected for value return index or false
* *

88
src/styles.scss
Unescape View File

@ -4,13 +4,35 @@
.field-select { .field-select {
.placeholder {
display: inline-block;
color: grey;
padding: 0 0.75em;
user-select: none;
}
&__options-panel { &__options-panel {
overflow-x: scroll; overflow-x: scroll;
max-height: 15vh; max-height: 20vh;
} }
&__options { &__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 { &-item {
position: relative; position: relative;
} }
@ -47,6 +69,11 @@
&-filter { &-filter {
position: relative; position: relative;
.field-text {
border-left: 0;
border-right: 0;
}
&--active { &--active {
.field-select__options-filter-reset { .field-select__options-filter-reset {
display: block; display: block;
@ -66,7 +93,7 @@
margin: 0.1rem 0.3rem; margin: 0.1rem 0.3rem;
&:hover { &: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 { .field-select {
&--disabled { &--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