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

75
lib/ui/grid.js
View File

@@ -1,6 +1,7 @@
import { global, isPositive, isMobile, throttle, truncate } from "../utility";
import { nullOrEmpty } from "../utility/strings";
import { r } from "../utility/lgres";
import { createElement, createElementInit } from "../functions";
import { createIcon } from "./icon";
import { createCheckbox } from "./checkbox";
import { setTooltip } from "./tooltip";
@@ -41,7 +42,7 @@ function indexOfParent(target) {
}
class GridColumn {
static create() { return document.createElement('span') }
static create() { return createElement('span') }
static setValue(element, val) { element.innerText = val }
@@ -54,7 +55,7 @@ class GridColumn {
class GridInputColumn extends GridColumn {
static createEdit(trigger) {
const input = document.createElement('input');
const input = createElement('input');
input.setAttribute('type', 'text');
if (typeof trigger === 'function') {
input.addEventListener('change', trigger);
@@ -157,12 +158,7 @@ class GridCheckboxColumn extends GridColumn {
}
class GridIconColumn extends GridColumn {
static create() {
const element = document.createElement('span');
element.className = 'icon';
// element.appendChild(document.createElement('layer'));
return element;
}
static create() { return createElement('span', 'icon') }
static setValue(element, val, item, col) {
let type = col.iconType;
@@ -351,8 +347,7 @@ class Grid {
throw new Error('no specified parent.');
}
this.#parent = container;
const grid = document.createElement('div');
grid.className = 'grid';
const grid = createElement('div', 'grid');
grid.setAttribute('tabindex', 0);
grid.addEventListener('keydown', e => {
let index = this.selectedIndex;
@@ -382,8 +377,7 @@ class Grid {
}
});
container.replaceChildren(grid);
const sizer = document.createElement('span');
sizer.className = 'grid-sizer';
const sizer = createElement('span', 'grid-sizer');
grid.appendChild(sizer);
this.#refs.sizer = sizer;
@@ -394,11 +388,9 @@ class Grid {
grid.appendChild(body);
// loading
const loading = document.createElement('div');
loading.className = 'grid-loading';
const loadingHolder = document.createElement('div');
loadingHolder.appendChild(createIcon('fa-regular', 'spinner-third'));
loading.appendChild(loadingHolder);
const loading = createElement('div', 'grid-loading',
createElement('div', null, createIcon('fa-regular', 'spinner-third'))
);
this.#refs.loading = loading;
grid.appendChild(loading);
this.#el = grid;
@@ -548,14 +540,13 @@ class Grid {
}
#createHeader() {
const thead = document.createElement('table');
thead.className = 'grid-header';
const header = document.createElement('tr');
const thead = createElement('table', 'grid-header');
const header = createElement('tr');
thead.appendChild(header);
const sizer = this.#refs.sizer;
for (let col of this.columns) {
if (col.visible === false) {
const hidden = document.createElement('th');
const hidden = createElement('th');
hidden.style.display = 'none';
if (col.sortable !== false) {
hidden.dataset.key = col.key;
@@ -594,8 +585,7 @@ class Grid {
};
this.#set(col.key, 'style', style);
// element
const th = document.createElement('th');
th.className = 'column';
const th = createElement('th', 'column');
th.dataset.key = col.key;
for (let css of Object.entries(style)) {
th.style.setProperty(css[0], css[1]);
@@ -608,7 +598,7 @@ class Grid {
col.orderable = true;
th.addEventListener('mousedown', e => this.#onDragStart(e, col));
}
const wrapper = document.createElement('div');
const wrapper = createElement('div');
th.appendChild(wrapper);
if (!this.readonly && col.enabled !== false && col.allcheck && isCheckbox) {
const check = createCheckbox({
@@ -616,7 +606,7 @@ class Grid {
});
wrapper.appendChild(check);
}
const caption = document.createElement('span');
const caption = createElement('span');
if (col.textStyle != null) {
for (let css of Object.entries(col.textStyle)) {
caption.style.setProperty(css[0], css[1]);
@@ -626,9 +616,7 @@ class Grid {
wrapper.appendChild(caption);
// order arrow
if (col.sortable) {
const arrow = document.createElement('layer');
arrow.className = 'arrow';
th.appendChild(arrow);
th.appendChild(createElement('layer', 'arrow'));
}
// filter
if (col.allowFilter) {
@@ -636,8 +624,7 @@ class Grid {
}
// resize spliter
if (col.resizable !== false) {
const spliter = document.createElement('layer');
spliter.className = 'spliter';
const spliter = createElement('layer', 'spliter');
spliter.addEventListener('mousedown', e => this.#onResizeStart(e, col));
spliter.addEventListener('dblclick', e => this.#onAutoResize(e, col));
th.appendChild(spliter);
@@ -646,13 +633,9 @@ class Grid {
// !nullOrEmpty(col.tooltip) && setTooltip(th, col.tooltip);
header.appendChild(th);
}
const placeholder = document.createElement('th');
const dragger = document.createElement('div');
dragger.className = 'dragger';
const draggerCursor = document.createElement('layer');
draggerCursor.className = 'dragger-cursor';
placeholder.append(dragger, draggerCursor);
header.appendChild(placeholder);
const dragger = createElement('div', 'dragger');
const draggerCursor = createElement('layer', 'dragger-cursor');
header.appendChild(createElement('th', null, dragger, draggerCursor));
sizer.replaceChildren();
this.#refs.header = header;
@@ -662,8 +645,7 @@ class Grid {
}
#createBody() {
const body = document.createElement('div');
body.className = 'grid-body';
const body = createElement('div', 'grid-body');
body.addEventListener('scroll', e => throttle(this.#onScroll, RefreshInterval, this, e), { passive: true });
const cols = this.columns;
let width = 1;
@@ -673,7 +655,7 @@ class Grid {
}
}
// body container
const bodyContainer = document.createElement('div');
const bodyContainer = createElement('div');
bodyContainer.style.position = 'relative';
bodyContainer.style.minWidth = '100%';
bodyContainer.style.minHeight = '1px';
@@ -682,8 +664,7 @@ class Grid {
}
body.appendChild(bodyContainer);
// body content
const bodyContent = document.createElement('table');
bodyContent.className = 'grid-body-content';
const bodyContent = createElement('table', 'grid-body-content');
bodyContent.addEventListener('mousedown', e => {
let [parent, target] = this.#getRowTarget(e.target);
const rowIndex = indexOfParent(parent);
@@ -698,8 +679,7 @@ class Grid {
// this.#adjustRows();
// events
if (!this.holderDisabled) {
const holder = document.createElement('div');
holder.className = 'grid-hover-holder';
const holder = createElement('div', 'grid-hover-holder');
holder.addEventListener('mousedown', e => {
const keyid = e.currentTarget.keyid;
if (keyid == null) {
@@ -730,12 +710,11 @@ class Grid {
count -= exists;
if (count > 0) {
for (let i = 0; i < count; i += 1) {
const row = document.createElement('tr');
row.className = 'grid-row';
const row = createElement('tr', 'grid-row');
// row.addEventListener('mousedown', e => this.#onRowClicked(e, exists + i));
// row.addEventListener('dblclick', e => this.#onRowDblClicked(e));
cols.forEach((col, j) => {
const cell = document.createElement('td');
const cell = createElement('td');
if (col.visible !== false) {
cell.keyid = ((exists + i) << MaxColumnBit) | j;
const style = this.#get(col.key, 'style');
@@ -771,7 +750,7 @@ class Grid {
}
row.appendChild(cell);
});
row.appendChild(document.createElement('td'));
row.appendChild(createElement('td'));
content.appendChild(row);
}
} else if (count < 0) {