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", "name": "@tp/tp-dropdown",
"version": "1.1.0", "version": "1.2.0",
"description": "", "description": "",
"main": "tp-dropdown.js", "main": "tp-dropdown.js",
"scripts": { "scripts": {

72
tp-dropdown.js
View File

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