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

Fixes and allow for simple item arrays.

Browse Source
This commit is contained in:
Peter Kaske 2022-04-04 13:31:06 +02:00
parent d06a266903
commit 6e9ff8c5c5
2 changed files with 25 additions and 11 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.0.2", "version": "1.1.0",
"description": "", "description": "",
"main": "tp-dropdown.js", "main": "tp-dropdown.js",
"scripts": { "scripts": {

34
tp-dropdown.js
View File

@ -249,8 +249,8 @@ 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" placeholder=${filterPlaceholder} id="filter" .value=${this._filterTerm || ''} @input=${e => this._filterTerm = e.target.value} .inert=${!isOpen} ?hidden=${!(filterable || extensible)}> <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"> <input type="text" placeholder=${filterPlaceholder}>
<tp-icon id="filterIcon" .icon=${extensible ? TpDropdown.addIcon : TpDropdown.filterIcon} slot="suffix"></tp-icon> <tp-icon id="filterIcon" .icon=${extensible ? TpDropdown.addIcon : TpDropdown.filterIcon} slot="suffix"></tp-icon>
</tp-input> </tp-input>
<div id="itemList" part="list"> <div id="itemList" part="list">
@ -337,6 +337,14 @@ class TpDropdown extends BaseElement {
this.listen(this, 'click', '_onClick'); this.listen(this, 'click', '_onClick');
} }
shouldUpdate(changes) {
if (changes.has('items')) {
this._itemsChanged();
}
return true;
}
updated(changes) { updated(changes) {
super.updated(changes); super.updated(changes);
@ -348,10 +356,6 @@ class TpDropdown extends BaseElement {
this._focusChanged(this.focused, changes.get('focused')); this._focusChanged(this.focused, changes.get('focused'));
} }
if (changes.has('items')) {
this._itemsChanged();
}
if (changes.has('value')) { if (changes.has('value')) {
this._valueChanged(); this._valueChanged();
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 }));
@ -413,8 +417,6 @@ class TpDropdown extends BaseElement {
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;
} }
this.invalid = false; this.invalid = false;
@ -577,17 +579,29 @@ class TpDropdown extends BaseElement {
this.invalid = false; this.invalid = false;
this._memorizedValue = undefined; this._memorizedValue = undefined;
this._filterTerm = ''; this._filterTerm = '';
this.value = undefined; if (this.default !== undefined) {
this.value = this.default;
} else {
this.value = undefined;
}
} }
_itemsChanged() { _itemsChanged() {
// In case `items` was set to null or undefined. // In case `items` was set to null or undefined.
if (!this.items) { if (!Array.isArray(this.items)) {
this.items = []; this.items = [];
this.value = null; this.value = null;
return; return;
} }
this.items = this.items.map(item => {
if (typeof item === 'string') {
return { value: item, label: item };
} else {
return item;
}
});
const memValueDefined = this._memorizedValue !== null && this._memorizedValue !== undefined; const memValueDefined = this._memorizedValue !== null && this._memorizedValue !== undefined;
const foundValue = this.items.findIndex(item => item.value === this.value) > -1; const foundValue = this.items.findIndex(item => item.value === this.value) > -1;
const foundMemVal = memValueDefined ? this.items.findIndex(item => item.value === this._memorizedValue) > -1 : false; const foundMemVal = memValueDefined ? this.items.findIndex(item => item.value === this._memorizedValue) > -1 : false;