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

business logic, customer communication.

Browse Source
This commit is contained in:
Tsanie Lily
2023-04-06 17:35:09 +08:00
parent 7c5a9214a1
commit 6157f994a9
23 changed files with 717 additions and 156 deletions
Download Patch File Download Diff File Expand all files Collapse all files

60
lib/ui/dropdown.js
View File

@ -2,6 +2,7 @@
import { r } from "../utility/lgres";
import { contains, nullOrEmpty } from "../utility/strings";
import { global, isPositive } from "../utility";
import { createElement } from "../functions";
import { createCheckbox } from "./checkbox";
import { createIcon } from "./icon"
@ -19,7 +20,7 @@ if (dropdownGlobal == null) {
configurable: false,
enumerable: false,
value: function () {
const panel = document.querySelector('.dropdown-wrapper .dropdown-panel.active');
const panel = document.querySelector('.dropdown-wrapper .dropdown-box.active');
if (panel == null) {
return;
}
@ -39,7 +40,7 @@ if (dropdownGlobal == null) {
document.addEventListener('mousedown', e => {
let parent = e.target;
while (parent != null) {
if (parent.classList.contains('dropdown-panel')) {
if (parent.classList.contains('dropdown-box')) {
e.stopPropagation();
return;
}
@ -110,16 +111,14 @@ class Dropdown {
const options = this.#options;
// wrapper
const wrapper = document.createElement('div');
const wrapper = createElement('div', 'dropdown-wrapper');
const dropId = String(Math.random()).substring(2);
wrapper.dataset.dropId = dropId;
wrapper.className = 'dropdown-wrapper';
dropdownGlobal[dropId] = this;
this.#wrapper = wrapper;
// header
const header = document.createElement('div');
header.className = 'dropdown-header';
const header = createElement('div', 'dropdown-header');
header.addEventListener('click', () => {
if (this.disabled) {
return;
@ -137,8 +136,7 @@ class Dropdown {
// label or input
let label;
if (options.input) {
label = document.createElement('input');
label.className = 'dropdown-text';
label = createElement('input', 'dropdown-text');
label.setAttribute('type', 'text');
options.placeholder && label.setAttribute('placeholder', options.placeholder);
isPositive(options.maxlength) && label.setAttribute('maxlength', options.maxlength);
@ -153,8 +151,7 @@ class Dropdown {
label.addEventListener('mousedown', e => this.#expanded && e.stopPropagation());
} else {
isPositive(options.tabindex) && header.setAttribute('tabindex', options.tabindex);
label = document.createElement('label');
label.className = 'dropdown-text';
label = createElement('label', 'dropdown-text');
}
this.#label = label;
if (options.multiselect) {
@ -167,10 +164,7 @@ class Dropdown {
} else if (options.selected != null) {
this.select(options.selected, true);
}
header.appendChild(label);
const caret = document.createElement('label');
caret.className = 'dropdown-caret';
header.appendChild(caret);
header.append(label, createElement('label', 'dropdown-caret'));
wrapper.appendChild(header);
this.disabled = options.disabled || false;
@ -285,16 +279,13 @@ class Dropdown {
#dropdown(flag = true) {
const options = this.#options;
const textkey = options.textkey;
let panel = this.#container;
if (panel == null) {
panel = document.createElement('div');
panel.className = 'dropdown-panel';
panel = createElement('div', 'dropdown-box');
// search box
if (!options.input && options.search) {
const search = document.createElement('div');
search.className = 'dropdown-search';
const input = document.createElement('input');
const search = createElement('div', 'dropdown-search');
const input = createElement('input');
input.setAttribute('type', 'text');
isPositive(options.tabindex) && input.setAttribute('tabindex', options.tabindex);
!nullOrEmpty(options.searchplaceholder) && input.setAttribute('placeholder', options.searchplaceholder);
@ -303,13 +294,11 @@ class Dropdown {
const source = filterSource(options.searchkeys, options.textkey, key, this.source);
this.#filllist(source);
})
search.appendChild(input);
search.appendChild(createIcon('fa-light', 'search'));
search.append(input, createIcon('fa-light', 'search'));
panel.appendChild(search);
}
// list
const list = document.createElement('ul');
list.className = 'dropdown-list';
const list = createElement('ul', 'dropdown-list');
if (!this.multiselect) {
list.addEventListener('click', e => {
let li = e.target;
@ -364,15 +353,16 @@ class Dropdown {
const multiselect = this.multiselect;
const allchecked = this.#allChecked;
if (multiselect) {
const liall = document.createElement('li');
const boxall = createCheckbox({
label: r('allItem', '( All )'),
checked: allchecked,
customerAttributes: { 'isall': '1' },
onchange: e => this.#triggerselect(e.target)
});
liall.appendChild(boxall);
list.appendChild(liall);
list.appendChild(
createElement('li', null,
createCheckbox({
label: r('allItem', '( All )'),
checked: allchecked,
customerAttributes: { 'isall': '1' },
onchange: e => this.#triggerselect(e.target)
})
)
);
}
// TODO: virtual mode
const valuekey = this.#options.valuekey;
@ -383,7 +373,7 @@ class Dropdown {
let scrolled;
source.slice(0, 200).forEach((item, i) => {
const val = item[valuekey];
const li = document.createElement('li');
const li = createElement('li');
li.dataset.value = val;
li.setAttribute('title', item[textkey]);
let label;
@ -394,7 +384,7 @@ class Dropdown {
if (multiselect) {
const selected = selectedlist.some(s => s[valuekey] === val);
if (label == null) {
label = document.createElement('span');
label = createElement('span');
label.innerText = item[textkey];
}
const box = createCheckbox({