tsanie/ui-lib
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

sync

Browse Source
This commit is contained in:
Chen Lily
2024-01-25 14:56:31 +08:00
parent 07f87bfb9d
commit 9ab9edb44d
18 changed files with 594 additions and 186 deletions
Download Patch File Download Diff File Expand all files Collapse all files

70
lib/ui/dropdown.js
View File

@ -31,8 +31,8 @@ if (dropdownGlobal == null) {
continue;
}
const dropdown = this[dropId];
if (dropdown?.multiselect && typeof dropdown.oncollapsed === 'function') {
dropdown.oncollapsed();
if (dropdown?.multiSelect && typeof dropdown.onCollapsed === 'function') {
dropdown.onCollapsed();
}
}
}
@ -97,9 +97,10 @@ export class Dropdown {
// _var.selectedList;
sourceFilter;
onselectedlist;
onselected;
onexpanded;
onSelectedList;
onSelected;
onExpanded;
onCollapsed;
constructor(options = {}) {
options.searchPlaceholder ??= r('searchHolder', 'Search...');
@ -173,8 +174,8 @@ export class Dropdown {
return;
}
this._dropdown(!active);
if (!active && typeof this.onexpanded === 'function') {
setTimeout(() => this.onexpanded(), 120);
if (!active && typeof this.onExpanded === 'function') {
setTimeout(() => this.onExpanded(), 120);
}
});
@ -216,7 +217,7 @@ export class Dropdown {
return wrapper;
}
get multiselect() { return this._var.options.multiSelect }
get multiSelect() { return this._var.options.multiSelect }
get disabled() { return this._var.wrapper == null || this._var.wrapper.querySelector('.ui-drop-header.disabled') != null }
@ -257,9 +258,12 @@ export class Dropdown {
get selected() { return this._var.selected }
get selectedlist() { return this._var.selectedList || [] }
get selectedList() { return this._var.selectedList || [] }
select(selected, silence) {
if (typeof selected !== 'string') {
selected = String(selected);
}
if (this._var.lastSelected === selected) {
return false;
}
@ -267,7 +271,7 @@ export class Dropdown {
const valuekey = this._var.options.valueKey;
const textkey = this._var.options.textKey;
const htmlkey = this._var.options.htmlKey;
let item = this.source.find(it => it[valuekey] === selected);
let item = this.source.find(it => String(it[valuekey]) === selected);
if (this._var.options.input) {
if (item == null) {
item = { [valuekey]: selected };
@ -304,8 +308,8 @@ export class Dropdown {
}
}
this._var.selected = item;
if (!silence && typeof this.onselected === 'function') {
this.onselected(item);
if (!silence && typeof this.onSelected === 'function') {
this.onSelected(item);
}
}
@ -314,10 +318,14 @@ export class Dropdown {
const valuekey = this._var.options.valueKey;
const textkey = this._var.options.textKey;
const htmlkey = this._var.options.htmlKey;
const itemlist = selectedlist.map(v => {
let item = source.find(it => it[valuekey] === v);
const itemlist = selectedlist.map(a => {
const v = typeof a === 'string' ? a : String(a);
let item = source.find(it => String(it[valuekey]) === v);
if (item == null) {
item = { [valuekey]: v, [textkey]: v };
item = {
[valuekey]: v,
[textkey]: v
};
}
return item;
});
@ -328,8 +336,8 @@ export class Dropdown {
}
selectItems(this._var.label, itemlist, htmlkey, textkey);
this._var.selectedList = itemlist;
if (!silence && typeof this.onselectedlist === 'function') {
this.onselectedlist(itemlist);
if (!silence && typeof this.onSelectedList === 'function') {
this.onSelectedList(itemlist);
}
}
@ -357,7 +365,7 @@ export class Dropdown {
}
// list
const list = createElement('ul', 'ui-drop-list');
if (!this.multiselect) {
if (!this.multiSelect) {
list.addEventListener('click', e => {
let li = e.target;
while (li.tagName !== 'LI') {
@ -436,7 +444,7 @@ export class Dropdown {
_filllist(source) {
const list = this._var.container.querySelector('.ui-drop-list');
list.replaceChildren();
const multiselect = this.multiselect;
const multiselect = this.multiSelect;
const allchecked = this._var.allChecked;
if (multiselect) {
list.appendChild(
@ -455,10 +463,13 @@ export class Dropdown {
const textkey = this._var.options.textKey;
const htmlkey = this._var.options.htmlKey;
const selected = this.selected;
const selectedlist = this.selectedlist;
const selectedlist = this.selectedList;
let scrolled;
source.slice(0, 200).forEach((item, i) => {
const val = item[valuekey];
let val = item[valuekey];
if (typeof val !== 'string') {
val = String(val);
}
const li = createElement('li');
li.dataset.value = val;
li.setAttribute('title', item[textkey]);
@ -471,7 +482,7 @@ export class Dropdown {
label.innerHTML = html;
}
if (multiselect) {
const selected = selectedlist.some(s => s[valuekey] === val);
const selected = selectedlist.some(s => String(s[valuekey]) === val);
if (label == null) {
label = createElement('span');
label.innerText = item[textkey];
@ -492,7 +503,7 @@ export class Dropdown {
} else {
li.appendChild(label);
}
if (selected != null && selected[valuekey] === val) {
if (selected != null && String(selected[valuekey]) === val) {
scrolled = DropdownItemHeight * i;
li.classList.add('selected');
}
@ -522,7 +533,10 @@ export class Dropdown {
} else {
const source = this.source;
list = [...this._var.container.querySelectorAll('input.dataitem:checked')]
.map(c => source.find(it => it[valuekey] === c.dataset.value))
.map(c => {
const v = c.dataset.value;
return source.find(it => String(it[valuekey]) === v);
})
.filter(it => it != null);
}
} else {
@ -530,9 +544,9 @@ export class Dropdown {
if (this._var.allChecked) {
this._var.allChecked = false;
this._var.container.querySelector('input[isall="1"]').checked = false;
list = this.source.filter(it => it[valuekey] !== val);
list = this.source.filter(it => String(it[valuekey]) !== val);
} else {
list = this.selectedlist.filter(it => it[valuekey] !== val);
list = this.selectedList.filter(it => String(it[valuekey]) !== val);
}
}
if (this._var.allChecked) {
@ -541,8 +555,8 @@ export class Dropdown {
selectItems(this._var.label, list, htmlkey, textkey);
}
this._var.selectedList = list;
if (typeof this.onselectedlist === 'function') {
this.onselectedlist(itemlist);
if (typeof this.onSelectedList === 'function') {
this.onSelectedList(itemlist);
}
}