tp-elements/tp-dropdown
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Fixes and improvements

Browse Source
This commit is contained in:
trading_peter 2022-11-15 20:24:57 +01:00
parent 6e9ff8c5c5
commit 44d5fa8c1d
2 changed files with 45 additions and 29 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
package.json
View File

@ -1,6 +1,6 @@
{
"name": "@tp/tp-dropdown",
"version": "1.1.0",
"version": "1.2.0",
"description": "",
"main": "tp-dropdown.js",
"scripts": {

72
tp-dropdown.js
View File

@ -121,7 +121,7 @@ class TpDropdown extends BaseElement {
pointer-events: none;
transition: opacity 0ms;
opacity: 0;
position: fixed;
position: absolute;
z-index: 1;
height: auto;
}
@ -249,14 +249,18 @@ class TpDropdown extends BaseElement {
</div>
</div>
<div id="list" ?open="${isOpen}">
<tp-input part="filter" exportparts="wrap:filterWrap" id="filter" .value=${this._filterTerm || ''} @input=${e => this._filterTerm = e.target.value} .inert=${!isOpen} ?hidden=${!(filterable || extensible)}>
<input type="text" placeholder=${filterPlaceholder}>
<tp-icon id="filterIcon" .icon=${extensible ? TpDropdown.addIcon : TpDropdown.filterIcon} slot="suffix"></tp-icon>
</tp-input>
${filterable ? html`
<tp-input part="filter" exportparts="wrap:filterWrap" id="filter" .value=${this._filterTerm || ''} @input=${e => this._filterTerm = e.target.value} .inert=${!isOpen} ?hidden=${!(filterable || extensible)}>
<input type="text" placeholder=${filterPlaceholder}>
<tp-icon id="filterIcon" .icon=${extensible ? TpDropdown.addIcon : TpDropdown.filterIcon} slot="suffix"></tp-icon>
</tp-input>
` : null}
<div id="itemList" part="list">
${items.map(item => this._filter(item) ? html`
<div part="item" role="option" .value=${item.value} tabindex=${isOpen ? '0' : '-1'}>${item.label}</div>
` : null)}
${isOpen ? html`
${items.map(item => this._filter(item) ? html`
<div part="item" role="option" .value=${item.value} tabindex=${isOpen ? '0' : '-1'}>${item.label}</div>
` : null)}
` : null}
</div>
</div>
</div>
@ -328,8 +332,11 @@ class TpDropdown extends BaseElement {
}
document.removeEventListener('click', this._onDocClickHandler, true);
this.unlisten(this, 'keydown', '_onKeyDown');
this.unlisten(this.$.filter, 'keydown', '_onKeyDownFilter');
this.unlisten(this.$.filterIcon, 'click', '_filterIconClicked');
if (this.filterable) {
this.unlisten(this.$.filter, 'keydown', '_onKeyDownFilter');
this.unlisten(this.$.filterIcon, 'click', '_filterIconClicked');
}
}
firstUpdated() {
@ -358,6 +365,7 @@ class TpDropdown extends BaseElement {
if (changes.has('value')) {
this._valueChanged();
this._updateLabel();
this.dispatchEvent(new CustomEvent('value-changed', { detail: this.value, bubbles: true, composed: true }));
}
}
@ -369,24 +377,26 @@ class TpDropdown extends BaseElement {
_focusChanged(newState, oldState) {
if (newState) {
this.listen(this, 'keydown', '_onKeyDown');
this.listen(this.$.filter, 'keydown', '_onKeyDownFilter');
this.listen(this.$.filterIcon, 'click', '_filterIconClicked');
if (this.filterable) {
this.listen(this.$.filter, 'keydown', '_onKeyDownFilter');
this.listen(this.$.filterIcon, 'click', '_filterIconClicked');
this.$.filter.focus();
}
} else if (oldState) {
this.unlisten(this, 'keydown', '_onKeyDown');
this.unlisten(this.$.filter, 'keydown', '_onKeyDownFilter');
this.unlisten(this.$.filterIcon, 'click', '_filterIconClicked');
if (!newState) {
if (oldState && this.$.filter.value !== '') {
if (this.extensible && this.autoExtend) {
this._addItem();
} else if (!this._selectByLabel(this.$.filter.value)) {
if (!this.value) {
this.$.filter.value = '';
if (this.filterable) {
this.unlisten(this.$.filter, 'keydown', '_onKeyDownFilter');
this.unlisten(this.$.filterIcon, 'click', '_filterIconClicked');
if (!newState) {
if (oldState && this.$.filter.value !== '') {
if (this.extensible && this.autoExtend) {
this._addItem();
} else if (!this._selectByLabel(this.$.filter.value)) {
if (!this.value) {
this.$.filter.value = '';
}
}
}
}
@ -408,15 +418,19 @@ class TpDropdown extends BaseElement {
return Array.isArray(this.items) && this.items.find(item => item.value.toString() === value.toString()) !== undefined;
}
_valueChanged() {
if (this._setDefault()) {
return;
}
_updateLabel() {
// Show selection in selector.
const idx = this.items.findIndex(item => item.value === this.value);
if (idx > -1) {
this.label = this.items[idx].label;
} else {
this.label = null;
}
}
_valueChanged() {
if (this._setDefault()) {
return;
}
this.invalid = false;
@ -471,7 +485,9 @@ class TpDropdown extends BaseElement {
window.addEventListener('resize', this._boundSetListPosition);
document.addEventListener('scroll', this._boundSetListPosition, { passive: true });
document.addEventListener('click', this._onDocClickHandler, true);
this.listen(this.$.filter, 'click', '_filterClicked');
if (this.filterable) {
this.listen(this.$.filter, 'click', '_filterClicked');
}
this._setListPosition();