issue fix
This commit is contained in:
@ -8,7 +8,6 @@ import { createCheckbox } from "./checkbox";
|
||||
import { createIcon } from "./icon"
|
||||
|
||||
const SymbolDropdown = Symbol.for('ui-dropdown');
|
||||
const DropdownTitleHeight = 26;
|
||||
const DropdownItemHeight = 30;
|
||||
|
||||
let dropdownGlobal = global[SymbolDropdown];
|
||||
@ -21,7 +20,7 @@ if (dropdownGlobal == null) {
|
||||
configurable: false,
|
||||
enumerable: false,
|
||||
value: function () {
|
||||
const panel = document.querySelector('.ui-drop-wrapper .ui-drop-box.active');
|
||||
const panel = document.querySelector('.ui-drop-box.active');
|
||||
if (panel == null) {
|
||||
return;
|
||||
}
|
||||
@ -101,11 +100,11 @@ export class Dropdown {
|
||||
onexpanded;
|
||||
|
||||
constructor(options = {}) {
|
||||
options.searchplaceholder ??= r('searchHolder', 'Search...');
|
||||
options.textkey ??= 'text';
|
||||
options.valuekey ??= 'value';
|
||||
options.htmlkey ??= 'html';
|
||||
options.maxlength ??= 500;
|
||||
options.searchPlaceholder ??= r('searchHolder', 'Search...');
|
||||
options.textKey ??= 'text';
|
||||
options.valueKey ??= 'value';
|
||||
options.htmlKey ??= 'html';
|
||||
options.maxLength ??= 500;
|
||||
this._var.options = options;
|
||||
}
|
||||
|
||||
@ -132,7 +131,7 @@ export class Dropdown {
|
||||
if (up || down) {
|
||||
const source = this.source;
|
||||
const count = source.length;
|
||||
const valuekey = this._var.options.valuekey;
|
||||
const valuekey = this._var.options.valueKey;
|
||||
let index = source?.indexOf(this._var.selected);
|
||||
if (isNaN(index) || index < -1) {
|
||||
index = -1;
|
||||
@ -183,11 +182,11 @@ export class Dropdown {
|
||||
label = createElement('input', 'ui-drop-text');
|
||||
label.setAttribute('type', 'text');
|
||||
options.placeholder && label.setAttribute('placeholder', options.placeholder);
|
||||
isPositive(options.maxlength) && label.setAttribute('maxlength', options.maxlength);
|
||||
isPositive(options.maxLength) && label.setAttribute('maxlength', options.maxLength);
|
||||
isPositive(options.tabIndex) && label.setAttribute('tabindex', options.tabIndex);
|
||||
label.addEventListener('input', e => {
|
||||
const key = e.target.value.toLowerCase();
|
||||
const source = filterSource(options.searchkeys, options.textkey, key, this.source);
|
||||
const source = filterSource(options.searchKeys, options.textKey, key, this.source);
|
||||
this._filllist(source);
|
||||
this._var.container.classList.add('active');
|
||||
});
|
||||
@ -198,9 +197,9 @@ export class Dropdown {
|
||||
label = createElement('label', 'ui-drop-text');
|
||||
}
|
||||
this._var.label = label;
|
||||
if (options.multiselect) {
|
||||
if (Array.isArray(options.selectedlist)) {
|
||||
this.selectlist(options.selectedlist, true);
|
||||
if (options.multiSelect) {
|
||||
if (Array.isArray(options.selectedList)) {
|
||||
this.selectlist(options.selectedList, true);
|
||||
} else {
|
||||
this._var.allChecked = true;
|
||||
label.innerText = r('allItem', '( All )');
|
||||
@ -215,7 +214,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 }
|
||||
|
||||
@ -263,9 +262,9 @@ export class Dropdown {
|
||||
return false;
|
||||
}
|
||||
this._var.lastSelected = selected;
|
||||
const valuekey = this._var.options.valuekey;
|
||||
const textkey = this._var.options.textkey;
|
||||
const htmlkey = this._var.options.htmlkey;
|
||||
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);
|
||||
if (this._var.options.input) {
|
||||
if (item == null) {
|
||||
@ -308,9 +307,9 @@ export class Dropdown {
|
||||
|
||||
selectlist(selectedlist, silence) {
|
||||
const source = this.source;
|
||||
const valuekey = this._var.options.valuekey;
|
||||
const textkey = this._var.options.textkey;
|
||||
const htmlkey = this._var.options.htmlkey;
|
||||
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);
|
||||
if (item == null) {
|
||||
@ -343,10 +342,10 @@ export class Dropdown {
|
||||
const input = createElement('input');
|
||||
input.setAttribute('type', 'text');
|
||||
isPositive(options.tabIndex) && input.setAttribute('tabindex', options.tabIndex);
|
||||
!nullOrEmpty(options.searchplaceholder) && input.setAttribute('placeholder', options.searchplaceholder);
|
||||
!nullOrEmpty(options.searchPlaceholder) && input.setAttribute('placeholder', options.searchPlaceholder);
|
||||
input.addEventListener('input', e => {
|
||||
const key = e.target.value.toLowerCase();
|
||||
const source = filterSource(options.searchkeys, options.textkey, key, this.source);
|
||||
const source = filterSource(options.searchKeys, options.textKey, key, this.source);
|
||||
this._filllist(source);
|
||||
})
|
||||
search.append(input, createIcon('fa-light', 'search'));
|
||||
@ -371,8 +370,8 @@ export class Dropdown {
|
||||
}
|
||||
panel.appendChild(list);
|
||||
this._var.container = panel;
|
||||
if (options.holder instanceof HTMLElement) {
|
||||
options.holder.appendChild(panel);
|
||||
if (options.wrapper instanceof HTMLElement) {
|
||||
options.wrapper.appendChild(panel);
|
||||
} else {
|
||||
this._var.wrapper.appendChild(panel);
|
||||
}
|
||||
@ -382,19 +381,43 @@ export class Dropdown {
|
||||
if (!options.input && options.search) {
|
||||
const search = panel.querySelector('.ui-drop-search > input');
|
||||
if (!nullOrEmpty(search?.value)) {
|
||||
source = filterSource(options.searchkeys, options.textkey, search.value, source);
|
||||
source = filterSource(options.searchKeys, options.textKey, search.value, source);
|
||||
}
|
||||
}
|
||||
this._filllist(source);
|
||||
// slide direction
|
||||
if (!options.slidefixed) {
|
||||
let parent = options.parent ?? document.body;
|
||||
if (!options.slideFixed) {
|
||||
const parent = options.wrapper ?? document.body;
|
||||
let p = this._var.wrapper;
|
||||
let top = p.offsetTop;
|
||||
while ((p = p.parentElement) != null && p !== parent) {
|
||||
top -= p.scrollTop;
|
||||
panel.style.minWidth = `${p.offsetWidth}px`;
|
||||
const headerHeight = p.offsetHeight;
|
||||
let top = p.offsetTop + headerHeight;
|
||||
let left = p.offsetLeft;
|
||||
if (p !== parent) {
|
||||
while ((p = p.parentElement) != null && p !== parent) {
|
||||
top -= p.scrollTop;
|
||||
left -= p.scrollLeft;
|
||||
}
|
||||
}
|
||||
if (top - parent.offsetTop + DropdownTitleHeight + panel.offsetHeight >= parent.offsetHeight) {
|
||||
p = this._var.wrapper;
|
||||
if (p !== parent) {
|
||||
while ((p = p.offsetParent) != null && p !== parent) {
|
||||
top += p.offsetTop;
|
||||
left += p.offsetLeft;
|
||||
}
|
||||
}
|
||||
const slideUp = top - parent.scrollTop + panel.offsetHeight >= parent.offsetHeight;
|
||||
if (options.wrapper instanceof HTMLElement) {
|
||||
if (slideUp) {
|
||||
panel.style.top = '';
|
||||
panel.style.bottom = `${parent.offsetHeight - top + headerHeight - 4}px`;
|
||||
} else {
|
||||
panel.style.top = `${top}px`;
|
||||
panel.style.bottom = '';
|
||||
}
|
||||
panel.style.left = `${left}px`;
|
||||
}
|
||||
if (slideUp) {
|
||||
panel.classList.add('slide-up');
|
||||
} else {
|
||||
panel.classList.remove('slide-up');
|
||||
@ -424,9 +447,9 @@ export class Dropdown {
|
||||
);
|
||||
}
|
||||
// TODO: virtual mode
|
||||
const valuekey = this._var.options.valuekey;
|
||||
const textkey = this._var.options.textkey;
|
||||
const htmlkey = this._var.options.htmlkey;
|
||||
const valuekey = this._var.options.valueKey;
|
||||
const textkey = this._var.options.textKey;
|
||||
const htmlkey = this._var.options.htmlKey;
|
||||
const selected = this.selected;
|
||||
const selectedlist = this.selectedlist;
|
||||
let scrolled;
|
||||
@ -476,9 +499,9 @@ export class Dropdown {
|
||||
|
||||
_triggerselect(checkbox) {
|
||||
let list;
|
||||
const valuekey = this._var.options.valuekey;
|
||||
const textkey = this._var.options.textkey;
|
||||
const htmlkey = this._var.options.htmlkey;
|
||||
const valuekey = this._var.options.valueKey;
|
||||
const textkey = this._var.options.textKey;
|
||||
const htmlkey = this._var.options.htmlKey;
|
||||
if (checkbox.getAttribute('isall') === '1') {
|
||||
const allchecked = this._var.allChecked = checkbox.checked;
|
||||
const boxes = this._var.container.querySelectorAll('input.dataitem');
|
||||
|
||||
Reference in New Issue
Block a user