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

adjustment

Browse Source
This commit is contained in:
Tsanie Lily
2023-04-21 17:17:56 +08:00
parent c4316e7e52
commit 222ca43afb
23 changed files with 341 additions and 293 deletions
Download Patch File Download Diff File Expand all files Collapse all files

30
lib/ui/dropdown.js
View File

@ -21,7 +21,7 @@ if (dropdownGlobal == null) {
configurable: false,
enumerable: false,
value: function () {
const panel = document.querySelector('.drop-wrapper .drop-box.active');
const panel = document.querySelector('.ui-drop-wrapper .ui-drop-box.active');
if (panel == null) {
return;
}
@ -41,7 +41,7 @@ if (dropdownGlobal == null) {
document.addEventListener('mousedown', e => {
let parent = e.target;
while (parent != null) {
if (parent.classList.contains('drop-box')) {
if (parent.classList.contains('ui-drop-box')) {
e.stopPropagation();
return;
}
@ -112,14 +112,14 @@ class Dropdown {
const options = this.#options;
// wrapper
const wrapper = createElement('div', 'drop-wrapper');
const wrapper = createElement('div', 'ui-drop-wrapper');
const dropId = String(Math.random()).substring(2);
wrapper.dataset.dropId = dropId;
dropdownGlobal[dropId] = this;
this.#wrapper = wrapper;
// header
const header = createElement('div', 'drop-header');
const header = createElement('div', 'ui-drop-header');
header.addEventListener('keypress', e => {
if (e.key === ' ' || e.key === 'Enter') {
header.dispatchEvent(new MouseEvent('click'));
@ -179,7 +179,7 @@ class Dropdown {
// label or input
let label;
if (options.input) {
label = createElement('input', 'drop-text');
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);
@ -194,7 +194,7 @@ class Dropdown {
label.addEventListener('mousedown', e => this.#expanded && e.stopPropagation());
} else {
isPositive(options.tabindex) && header.setAttribute('tabindex', options.tabindex);
label = createElement('label', 'drop-text');
label = createElement('label', 'ui-drop-text');
}
this.#label = label;
if (options.multiselect) {
@ -207,7 +207,7 @@ class Dropdown {
} else if (options.selected != null) {
this.select(options.selected, true);
}
header.append(label, createElement('label', 'drop-caret'));
header.append(label, createElement('label', 'ui-drop-caret'));
wrapper.appendChild(header);
this.disabled = options.disabled || false;
@ -216,16 +216,16 @@ class Dropdown {
get multiselect() { return this.#options.multiselect }
get disabled() { return this.#wrapper == null || this.#wrapper.querySelector('.drop-header.disabled') != null }
get disabled() { return this.#wrapper == null || this.#wrapper.querySelector('.ui-drop-header.disabled') != null }
set disabled(flag) {
if (this.#wrapper == null) {
return;
}
if (flag) {
this.#wrapper.querySelector('.drop-header').classList.add('disabled');
this.#wrapper.querySelector('.ui-drop-header').classList.add('disabled');
} else {
this.#wrapper.querySelector('.drop-header').classList.remove('disabled');
this.#wrapper.querySelector('.ui-drop-header').classList.remove('disabled');
}
}
@ -335,10 +335,10 @@ class Dropdown {
const options = this.#options;
let panel = this.#container;
if (panel == null) {
panel = createElement('div', 'drop-box');
panel = createElement('div', 'ui-drop-box');
// search box
if (!options.input && options.search) {
const search = createElement('div', 'drop-search');
const search = createElement('div', 'ui-drop-search');
const input = createElement('input');
input.setAttribute('type', 'text');
isPositive(options.tabindex) && input.setAttribute('tabindex', options.tabindex);
@ -352,7 +352,7 @@ class Dropdown {
panel.appendChild(search);
}
// list
const list = createElement('ul', 'drop-list');
const list = createElement('ul', 'ui-drop-list');
if (!this.multiselect) {
list.addEventListener('click', e => {
let li = e.target;
@ -375,7 +375,7 @@ class Dropdown {
if (flag) {
let source = this.source;
if (!options.input && options.search) {
const search = panel.querySelector('.drop-search > input');
const search = panel.querySelector('.ui-drop-search > input');
if (!nullOrEmpty(search?.value)) {
source = filterSource(options.searchkeys, options.textkey, search.value, source);
}
@ -402,7 +402,7 @@ class Dropdown {
}
#filllist(source) {
const list = this.#container.querySelector('.drop-list');
const list = this.#container.querySelector('.ui-drop-list');
list.replaceChildren();
const multiselect = this.multiselect;
const allchecked = this.#allChecked;