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

sync from work

Browse Source
This commit is contained in:
Tsanie Lily
2023-04-14 17:40:15 +08:00
parent d702197a3f
commit af78bf0381
13 changed files with 566 additions and 319 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
lib/ui/checkbox.js
View File

@ -63,6 +63,9 @@ function createCheckbox(opts = {}) {
if (opts.className) {
container.classList.add(opts.className);
}
if (opts.enabled === false) {
container.classList.add('disabled');
}
if (opts.checkedNode != null && opts.uncheckedNode != null) {
container.classList.add('checkbox-image');
let height = opts.imageHeight;
@ -120,7 +123,11 @@ function resolveCheckbox(container = document.body, legacy) {
} else {
text = label.innerText;
}
label.className = 'checkbox-wrapper';
if (chk.disabled) {
label.className = 'checkbox-wrapper disabled';
} else {
label.className = 'checkbox-wrapper';
}
label.replaceChildren();
fillCheckbox(label, 'fa-regular', text);
label.insertBefore(chk, label.firstChild);

229
lib/ui/grid/column.js Normal file
View File

@ -0,0 +1,229 @@
import { global } from "../../utility";
import { nullOrEmpty } from "../../utility/strings";
import { createElement } from "../../functions";
import { createIcon } from "../icon";
import { createCheckbox } from "../checkbox";
import { setTooltip } from "../tooltip";
import Dropdown from "../dropdown";
class GridColumn {
static create() { return createElement('span') }
static setValue(element, val) { element.innerText = val }
static setStyle(element, style) {
for (let css of Object.entries(style)) {
element.style.setProperty(css[0], css[1]);
}
}
}
class GridInputColumn extends GridColumn {
static get editing() { return true };
static createEdit(trigger, col, _parent, vals) {
const input = createElement('input');
input.setAttribute('type', 'text');
if (typeof trigger === 'function') {
input.addEventListener('change', trigger);
}
input.addEventListener('input', () => {
if (vals.__editing == null) {
vals.__editing = {
[col.key]: true
}
} else {
vals.__editing[col.key] = true;
}
});
return input;
}
static setValue(element, val) {
if (element.tagName !== 'INPUT') {
super.setValue(element, val);
} else {
element.value = val;
}
}
static getValue(e) { return e.target.value }
static setEnabled(element, enabled) { element.disabled = enabled === false }
}
class GridTextColumn extends GridInputColumn {
static createEdit(trigger, col, _parent, vals) {
const input = createElement('textarea');
if (typeof trigger === 'function') {
input.addEventListener('change', trigger);
}
input.addEventListener('input', () => {
if (vals.__editing == null) {
vals.__editing = {
[col.key]: true
}
} else {
vals.__editing[col.key] = true;
}
});
return input;
}
static setValue(element, val, _item, _col, grid) {
if (element.tagName !== 'TEXTAREA') {
super.setValue(element, val);
} else {
element.value = val;
if (val != null) {
const lines = String(val).split('\n').length;
element.style.height = `${lines * grid.lineHeight + 12}px`;
}
}
}
}
const SymbolDropdown = Symbol.for('ui-dropdown');
class GridDropdownColumn extends GridColumn {
static createEdit(trigger, col, parent) {
const drop = new Dropdown({ ...col.dropOptions, parent });
drop.onselected = trigger;
return drop.create();
}
static #getDrop(element) {
const dropGlobal = global[SymbolDropdown];
if (dropGlobal == null) {
return null;
}
const dropId = element.dataset.dropId;
const drop = dropGlobal[dropId];
if (drop == null) {
return null;
}
return drop;
}
static #getSource(item, col) {
let source = col.source;
if (typeof source === 'function') {
source = source(item);
}
return source;
}
static #setValue(source, element, val) {
const data = source?.find(v => v.value === val);
if (data != null) {
val = data.text;
}
super.setValue(element, val);
}
static setValue(element, val, item, col) {
if (element.tagName !== 'DIV') {
let source = this.#getSource(item, col);
if (source instanceof Promise) {
source.then(s => this.#setValue(s, element, val));
} else {
this.#setValue(source, element, val);
}
return;
}
const drop = this.#getDrop(element);
if (drop == null) {
return;
}
if (drop.source == null || drop.source.length === 0) {
let source = this.#getSource(item, col);
if (source instanceof Promise) {
source.then(s => {
drop.source = s;
drop.select(val, true);
})
return;
} else if (source != null) {
drop.source = source;
}
}
drop.select(val, true);
}
static getValue(e) {
return e.value;
}
static setEnabled(element, enabled) {
const drop = this.#getDrop(element);
if (drop == null) {
return;
}
drop.disabled = enabled === false;
}
}
class GridCheckboxColumn extends GridColumn {
static createEdit(trigger) {
const check = createCheckbox({
onchange: typeof trigger === 'function' ? trigger : null
});
return check;
}
static setValue(element, val) { element.querySelector('input').checked = val }
static getValue(e) { return e.target.checked }
static setEnabled(element, enabled) { element.querySelector('input').disabled = enabled === false }
}
class GridIconColumn extends GridColumn {
static create() { return createElement('span', 'col-icon') }
static setValue(element, val, item, col, grid) {
let className = col.className;
if (typeof className === 'function') {
className = className.call(col, item);
}
if (className == null) {
element.className = 'col-icon';
} else {
element.className = `col-icon ${className}`;
}
let type = col.iconType;
if (typeof type === 'function') {
type = type.call(col, item);
}
type ??= 'fa-regular';
if (element.dataset.type !== type || element.dataset.icon !== val) {
const icon = createIcon(type, val);
// const layer = element.children[0];
element.replaceChildren(icon);
!nullOrEmpty(col.tooltip) && setTooltip(element, col.tooltip, false, grid.element);
element.dataset.type = type;
element.dataset.icon = val;
}
}
static setEnabled(element, enabled) {
if (enabled === false) {
element.classList.add('disabled');
} else {
element.classList.remove('disabled');
}
const tooltip = element.querySelector('.tooltip-wrapper');
if (tooltip != null) {
tooltip.style.display = enabled === false ? 'none' : '';
}
}
}
export {
GridColumn,
GridInputColumn,
GridTextColumn,
GridDropdownColumn,
GridCheckboxColumn,
GridIconColumn
}

2
lib/ui/grid.d.ts → lib/ui/grid/grid.d.ts vendored
View File

@ -1,4 +1,4 @@
import { DropdownOptions } from "./dropdown";
import { DropdownOptions } from "../dropdown";
interface GridItem {
value: any;

0
lib/ui/grid.html → lib/ui/grid/grid.html
View File

215
lib/ui/grid.js → lib/ui/grid/grid.js
View File

@ -1,11 +1,9 @@
import { global, isPositive, isMobile, throttle, truncate } from "../utility";
import { nullOrEmpty } from "../utility/strings";
import { r } from "../utility/lgres";
import { createElement } from "../functions";
import { createIcon } from "./icon";
import { createCheckbox } from "./checkbox";
import { setTooltip } from "./tooltip";
import Dropdown from "./dropdown";
import { global, isPositive, isMobile, throttle, truncate } from "../../utility";
import { r } from "../../utility/lgres";
import { createElement } from "../../functions";
import { createIcon } from "../icon";
import { createCheckbox } from "../checkbox";
import { GridColumn, GridInputColumn, GridTextColumn, GridDropdownColumn, GridCheckboxColumn, GridIconColumn } from "./column";
const ColumnChangedType = {
Reorder: 'reorder',
@ -41,203 +39,6 @@ function indexOfParent(target) {
return Array.prototype.indexOf.call(target.parentElement.children, target);
}
class GridColumn {
static create() { return createElement('span') }
static setValue(element, val) { element.innerText = val }
static setStyle(element, style) {
for (let css of Object.entries(style)) {
element.style.setProperty(css[0], css[1]);
}
}
}
class GridInputColumn extends GridColumn {
static get editing() { return true };
static createEdit(trigger, _col, _parent, vals) {
const input = createElement('input');
input.setAttribute('type', 'text');
if (typeof trigger === 'function') {
input.addEventListener('change', trigger);
}
input.addEventListener('input', () => vals.__editing = true);
return input;
}
static setValue(element, val) {
if (element.tagName !== 'INPUT') {
super.setValue(element, val);
} else {
element.value = val;
}
}
static getValue(e) { return e.target.value }
static setEnabled(element, enabled) { element.disabled = enabled === false }
}
class GridTextColumn extends GridInputColumn {
static createEdit(trigger, _col, _parent, vals) {
const input = createElement('textarea');
if (typeof trigger === 'function') {
input.addEventListener('change', trigger);
}
input.addEventListener('input', () => vals.__editing = true);
return input;
}
static setValue(element, val, _item, _col, grid) {
if (element.tagName !== 'TEXTAREA') {
super.setValue(element, val);
} else {
element.value = val;
if (val != null) {
const lines = String(val).split('\n').length;
element.style.height = `${lines * grid.lineHeight + 12}px`;
}
}
}
}
const SymbolDropdown = Symbol.for('ui-dropdown');
class GridDropdownColumn extends GridColumn {
static createEdit(trigger, col, parent) {
const drop = new Dropdown({ ...col.dropOptions, parent });
drop.onselected = trigger;
return drop.create();
}
static #getDrop(element) {
const dropGlobal = global[SymbolDropdown];
if (dropGlobal == null) {
return null;
}
const dropId = element.dataset.dropId;
const drop = dropGlobal[dropId];
if (drop == null) {
return null;
}
return drop;
}
static #getSource(item, col) {
let source = col.source;
if (typeof source === 'function') {
source = source(item);
}
return source;
}
static #setValue(source, element, val) {
const data = source?.find(v => v.value === val);
if (data != null) {
val = data.text;
}
super.setValue(element, val);
}
static setValue(element, val, item, col) {
if (element.tagName !== 'DIV') {
let source = this.#getSource(item, col);
if (source instanceof Promise) {
source.then(s => this.#setValue(s, element, val));
} else {
this.#setValue(source, element, val);
}
return;
}
const drop = this.#getDrop(element);
if (drop == null) {
return;
}
if (drop.source == null || drop.source.length === 0) {
let source = this.#getSource(item, col);
if (source instanceof Promise) {
source.then(s => {
drop.source = s;
drop.select(val, true);
})
return;
} else if (source != null) {
drop.source = source;
}
}
drop.select(val, true);
}
static getValue(e) {
return e.value;
}
static setEnabled(element, enabled) {
const drop = this.#getDrop(element);
if (drop == null) {
return;
}
drop.disabled = enabled === false;
}
}
class GridCheckboxColumn extends GridColumn {
static createEdit(trigger) {
const check = createCheckbox({
onchange: typeof trigger === 'function' ? trigger : null
});
return check;
}
static setValue(element, val) { element.querySelector('input').checked = val }
static getValue(e) { return e.target.checked }
static setEnabled(element, enabled) { element.querySelector('input').disabled = enabled === false }
}
class GridIconColumn extends GridColumn {
static create() { return createElement('span', 'col-icon') }
static setValue(element, val, item, col, grid) {
let className = col.className;
if (typeof className === 'function') {
className = className.call(col, item);
}
if (className == null) {
element.className = 'col-icon';
} else {
element.className = `col-icon ${className}`;
}
let type = col.iconType;
if (typeof type === 'function') {
type = type.call(col, item);
}
type ??= 'fa-regular';
if (element.dataset.type !== type || element.dataset.icon !== val) {
const icon = createIcon(type, val);
// const layer = element.children[0];
element.replaceChildren(icon);
!nullOrEmpty(col.tooltip) && setTooltip(element, col.tooltip, false, grid.element);
element.dataset.type = type;
element.dataset.icon = val;
}
}
static setEnabled(element, enabled) {
if (enabled === false) {
element.classList.add('disabled');
} else {
element.classList.remove('disabled');
}
const tooltip = element.querySelector('.tooltip-wrapper');
if (tooltip != null) {
tooltip.style.display = enabled === false ? 'none' : '';
}
}
}
const ColumnTypes = {
0: GridColumn,
1: GridInputColumn,
@ -882,7 +683,7 @@ class Grid {
const type = isCheckbox ? GridCheckboxColumn : this.#colTypes[col.key] ?? GridColumn;
let element;
if (!isCheckbox && selectChanged && typeof type.createEdit === 'function') {
if (vals.__editing && type.editing) {
if (vals.__editing?.[col.key] && type.editing) {
val = type.getValue({ target: cell.children[0] });
this.#onRowChanged(null, startIndex + i, col, val, true);
}
@ -938,7 +739,7 @@ class Grid {
}
}
});
if (vals.__editing) {
if (vals.__editing != null) {
delete vals.__editing;
}
});

47
lib/ui/popup.js
View File

@ -1,6 +1,6 @@
import "../../css/popup.scss";
import { createElement } from "../functions";
import { r } from "../utility";
import { r, nullOrEmpty } from "../utility";
import { createIcon } from "./icon";
class Popup {
@ -63,7 +63,11 @@ class Popup {
if (typeof b.trigger === 'function') {
const result = b.trigger(this);
if (typeof result?.then === 'function') {
result.then(r => r !== false && close()).catch(() => { });
result.then(r => {
if (r !== false) {
close();
}
}).catch(() => { });
} else if (result !== false) {
close();
}
@ -147,19 +151,40 @@ export function showAlert(title, message, iconType = 'info', parent = document.b
}
export function showConfirm(title, content, buttons, iconType = 'question', parent = document.body) {
return new Promise(resolve => {
return new Promise((resolve, reject) => {
const wrapper = createElement('div', 'message-wrapper');
if (!nullOrEmpty(iconType)) {
wrapper.appendChild(createIcon('fa-solid', iconTypes[iconType] ?? 'question-circle'));
}
wrapper.appendChild(content instanceof HTMLElement ?
content :
createElement('span', span => span.innerText = content));
const popup = new Popup({
title,
content: createElement('div', 'message-wrapper',
createIcon('fa-solid', iconTypes[iconType] ?? 'question-circle'),
createElement('span', null, content)
),
content: wrapper,
buttons: buttons?.map(b => {
return {
text: b.text, trigger: p => resolve({
key: b.key,
popup: p
})
text: b.text,
trigger: p => {
let result;
if (typeof b.trigger === 'function') {
result = b.trigger(p, b);
if (typeof result?.then === 'function') {
return result.then(r => {
r !== false && resolve(r);
return r;
});
}
result !== false && resolve(result);
} else {
result = {
key: b.key,
popup: p
};
resolve(result);
}
return result;
}
};
}) ??
[