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

adjustment

Browse Source
This commit is contained in:
Chen Lily 2024-01-19 15:47:42 +08:00
parent feec8b59a7
commit 3d9c5bd3f2
9 changed files with 63 additions and 54 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
lib/ui.js
View File

@ -9,7 +9,7 @@ import { Grid } from "./ui/grid/grid";
import { GridColumn, GridInputColumn, GridDropdownColumn, GridCheckboxColumn, GridIconColumn, GridTextColumn } from './ui/grid/column';
import { Popup, createPopup, showAlert, showConfirm } from "./ui/popup";
import { createPicture, createAudio, createVideo, createFile } from './ui/media';
import { validation } from './ui/extension';
import { validation, convertCssStyle } from './ui/extension';
export {
createElement,
@ -45,5 +45,6 @@ export {
createVideo,
createFile,
// extension
validation
validation,
convertCssStyle
}

2
lib/ui/checkbox.js
View File

@ -22,7 +22,7 @@ function fillCheckbox(container, type = 'fa-regular', label, tabindex = -1, char
);
if (label instanceof Element) {
container.appendChild(label);
} else if (label?.length > 0) {
} else if (label != null && String(label).length > 0) {
container.appendChild(
createElement('span', span => span.innerText = label)
);

2
lib/ui/css/grid.css
View File

File diff suppressed because one or more lines are too long

1
lib/ui/css/grid.scss
View File

@ -333,7 +333,6 @@
>.ui-drop-header {
border: none;
height: 100%;
background-color: transparent;
>.ui-drop-text {
padding: var(--spacing-cell);

5
lib/ui/dropdown.js
View File

@ -284,6 +284,8 @@ export class Dropdown {
const html = item[htmlkey];
if (html instanceof HTMLElement) {
this._var.label.replaceChildren(html.cloneNode(true));
} else if (typeof html === 'string') {
this._var.label.innerHTML = html;
} else {
let text = item[textkey];
if (nullOrEmpty(text)) {
@ -462,6 +464,9 @@ export class Dropdown {
const html = item[htmlkey];
if (html instanceof HTMLElement) {
label = html;
} else if (typeof html === 'string') {
label = createElement('span');
label.innerHTML = html;
}
if (multiselect) {
const selected = selectedlist.some(s => s[valuekey] === val);

3
lib/ui/extension.d.ts vendored
View File

@ -1 +1,2 @@
export function validation(element: HTMLElement, regex: RegExp) : HTMLElement
export function validation(element: HTMLElement, regex: RegExp): HTMLElement
export function convertCssStyle(style: Object): string

4
lib/ui/extension.js
View File

@ -9,4 +9,8 @@ export function validation(element, regex) {
})
}
return element;
}
export function convertCssStyle(style) {
return Object.entries(style).map(s => `${s[0]}: ${s[1]}`).join('; ');
}

8
lib/ui/grid/column.js
View File

@ -5,6 +5,7 @@ import { createIcon } from "../icon";
import { createCheckbox } from "../checkbox";
// import { setTooltip } from "../tooltip";
import { Dropdown } from "../dropdown";
import { convertCssStyle } from "../extension";
export class GridColumn {
static create() {
@ -16,9 +17,10 @@ export class GridColumn {
}
static setStyle(element, style) {
for (let css of Object.entries(style)) {
element.style.setProperty(css[0], css[1]);
}
// for (let css of Object.entries(style)) {
// element.style.setProperty(css[0], css[1]);
// }
element.style.cssText = convertCssStyle(style);
}
static setEnabled(element, enabled) {

87
lib/ui/grid/grid.js
View File

@ -6,6 +6,7 @@ import { createElement } from "../../functions";
import { createIcon } from "../icon";
import { createCheckbox } from "../checkbox";
import { setTooltip } from "../tooltip";
import { convertCssStyle } from "../extension";
import { GridColumn, GridInputColumn, GridTextColumn, GridDropdownColumn, GridCheckboxColumn, GridIconColumn } from "./column";
const ColumnChangedType = {
@ -236,7 +237,7 @@ export class Grid {
return;
}
this._var.el.scrollTop = top;
this.reload();
this.reload(true);
}
init(container = this._var.parent) {
@ -353,15 +354,17 @@ export class Grid {
this._var.bodyClientWidth = body.clientWidth;
}
reload() {
reload(keep) {
let length = this._var.currentSource.length;
if (this.extraRows > 0) {
length += this.extraRows;
}
this._var.containerHeight = length * (this.rowHeight + 1);
// this._var.refs.body.scrollTop = 0;
// this._var.refs.body.scrollLeft = 0;
this._var.refs.table.style.top = '0px';
if (!keep) {
this._var.el.scrollTop = 0;
// this._var.el.scrollLeft = 0;
this._var.refs.table.style.top = '0px';
}
this._var.refs.wrapper.style.height = `${this._var.containerHeight}px`;
this._adjustRows(this._var.refs.body);
this.refresh();
@ -515,19 +518,18 @@ export class Grid {
this._set(col.key, 'style', style);
// element
const th = createElement('th', 'column');
const thStyle = { ...style };
if (col.isfixed) {
th.classList.add('sticky');
th.style.left = `${left}px`;
thStyle.left = `${left}px`;
}
left += col.width;
th.dataset.key = col.key;
for (let css of Object.entries(style)) {
th.style.setProperty(css[0], css[1]);
}
if (col.sortable) {
th.style.cursor = 'pointer';
thStyle.cursor = 'pointer';
th.addEventListener('click', e => this._onHeaderClicked(e, col));
}
th.style.cssText = convertCssStyle(thStyle);
if (col.orderable !== false) {
col.orderable = true;
th.addEventListener('mousedown', e => this._onDragStart(e, col));
@ -542,9 +544,7 @@ export class Grid {
}
const caption = createElement('span');
if (col.textStyle != null) {
for (let css of Object.entries(col.textStyle)) {
caption.style.setProperty(css[0], css[1]);
}
caption.style.cssText = convertCssStyle(col.textStyle);
}
caption.innerText = col.caption ?? '';
wrapper.appendChild(caption);
@ -629,23 +629,20 @@ export class Grid {
cols.forEach((col, j) => {
const cell = createElement('td');
if (col.visible !== false) {
let style = this._get(col.key, 'style') ?? {};
if (col.isfixed) {
cell.classList.add('sticky');
cell.style.left = `${left}px`;
style.left = `${left}px`;
}
left += col.width;
cell.dataset.row = String(exists + i);
cell.dataset.col = String(j);
const style = this._get(col.key, 'style');
if (style != null) {
for (let css of Object.entries(style)) {
cell.style.setProperty(css[0], css[1]);
}
}
if (col.css != null) {
for (let css of Object.entries(col.css)) {
cell.style.setProperty(css[0], css[1]);
}
style = { ...style, ...col.css };
}
style = convertCssStyle(style);
if (style !== '') {
cell.style.cssText = style;
}
if (Grid.ColumnTypes.isCheckbox(col.type)) {
cell.appendChild(GridCheckboxColumn.createEdit(e => this._onRowChanged(e, exists + i, col, e.target.checked, cell)));
@ -719,8 +716,8 @@ export class Grid {
val = col.filter(item, selected, this._var.refs.body);
} else {
val = item[col.key];
if (val?.displayValue != null) {
val = val.displayValue;
if (val?.DisplayValue != null) {
val = val.DisplayValue;
}
}
val ??= '';
@ -854,9 +851,7 @@ export class Grid {
_changingColumnOrder(index, offset, x, offsetLeft) {
const children = this._var.refs.header.children;
let element = children[index];
this._var.refs.dragger.style.left = `${element.offsetLeft - offsetLeft + offset}px`;
this._var.refs.dragger.style.width = element.style.width;
this._var.refs.dragger.style.display = 'block';
this._var.refs.dragger.style.cssText = `left: ${element.offsetLeft - offsetLeft + offset}px; width: ${element.style.width}; display: block`;
offset = x - element.offsetLeft; // getOffsetLeftFromWindow(element);
let idx;
if (offset < 0) {
@ -896,8 +891,7 @@ export class Grid {
if (element == null) {
return;
}
this._var.refs.draggerCursor.style.left = `${element.offsetLeft - offsetLeft}px`;
this._var.refs.draggerCursor.style.display = 'block';
this._var.refs.draggerCursor.style.cssText = `left: ${element.offsetLeft - offsetLeft}px; display: block`;
}
}
@ -1012,7 +1006,7 @@ export class Grid {
} else {
value = item[key];
}
return value?.value ?? value;
return value?.Value ?? value;
}
_getRowTarget(target) {
@ -1107,6 +1101,9 @@ export class Grid {
onchange: e => {
const checked = e.target.checked;
itemlist.querySelectorAll('.filter-content input').forEach(box => box.checked = checked);
for (let it of this._get(col.key, 'filterSource')) {
it.__checked = checked;
}
}
}));
itemlist.appendChild(itemall);
@ -1123,26 +1120,26 @@ export class Grid {
if (!Object.hasOwnProperty.call(dict, val)) {
const v = item.values[col.key];
dict[val] = {
value: val,
displayValue: typeof col.filter === 'function' ? col.filter(item.values) : v?.displayValue ?? v
Value: val,
DisplayValue: typeof col.filter === 'function' ? col.filter(item.values) : v?.DisplayValue ?? v
};
}
}
array = Object.values(dict)
.sort((a, b) => {
a = a?.value ?? a;
b = b?.value ?? b;
a = a?.Value ?? a;
b = b?.Value ?? b;
return a > b ? 1 : a < b ? -1 : 0;
});
}
array = array.map(i => {
if (Object.prototype.hasOwnProperty.call(i, 'value') &&
Object.prototype.hasOwnProperty.call(i, 'displayValue')) {
if (Object.prototype.hasOwnProperty.call(i, 'Value') &&
Object.prototype.hasOwnProperty.call(i, 'DisplayValue')) {
return i;
}
return {
value: i,
displayValue: i == null ? '' : i
Value: i,
DisplayValue: i == null ? '' : i
};
});
this._fillFilterList(col, itemlist, array, itemall);
@ -1152,7 +1149,7 @@ export class Grid {
searchbox.addEventListener('input', e => {
const key = e.currentTarget.value.toLowerCase();
const items = key.length === 0 ? array : array.filter(i => {
const displayValue = i?.displayValue ?? i;
const displayValue = i?.DisplayValue ?? i;
return String(displayValue ?? '').includes(key);
});
this._fillFilterList(col, itemlist, items, itemall);
@ -1168,7 +1165,7 @@ export class Grid {
if (typeof col.onFilterOk === 'function') {
col.onFilterOk.call(this, col, array);
} else {
col.filterValues = array.map(a => a.value);
col.filterValues = array.map(a => a.Value);
}
this._var.colAttrs.__filtered = true;
this._refreshSource();
@ -1213,7 +1210,7 @@ export class Grid {
content.style.top = `${rowHeight}px`;
this._set(col.key, 'filterSource', array);
for (let item of array) {
item.__checked = !Array.isArray(col.filterValues) || col.filterValues.includes(item.value ?? item);
item.__checked = !Array.isArray(col.filterValues) || col.filterValues.includes(item.Value ?? item);
}
if (array.length > 12) {
array = array.slice(0, 12);
@ -1227,7 +1224,7 @@ export class Grid {
const div = createElement('div', 'filter-item');
div.appendChild(createCheckbox({
checked: item.__checked,
label: item?.displayValue ?? item,
label: item?.DisplayValue ?? item,
onchange: e => {
item.__checked = e.target.checked;
all.querySelector('input').checked = ![...content.querySelectorAll('input')].some(i => !i.checked);
@ -1591,8 +1588,8 @@ export class Grid {
}
if (enabled !== false) {
const val = item[col.key];
if (val?.value != null) {
val.value = value;
if (val?.Value != null) {
val.Value = value;
} else {
item[col.key] = value;
}