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 { GridColumn, GridInputColumn, GridDropdownColumn, GridCheckboxColumn, GridIconColumn, GridTextColumn } from './ui/grid/column';
import { Popup, createPopup, showAlert, showConfirm } from "./ui/popup"; import { Popup, createPopup, showAlert, showConfirm } from "./ui/popup";
import { createPicture, createAudio, createVideo, createFile } from './ui/media'; import { createPicture, createAudio, createVideo, createFile } from './ui/media';
import { validation } from './ui/extension'; import { validation, convertCssStyle } from './ui/extension';
export { export {
createElement, createElement,
@ -45,5 +45,6 @@ export {
createVideo, createVideo,
createFile, createFile,
// extension // 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) { if (label instanceof Element) {
container.appendChild(label); container.appendChild(label);
} else if (label?.length > 0) { } else if (label != null && String(label).length > 0) {
container.appendChild( container.appendChild(
createElement('span', span => span.innerText = label) 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 { >.ui-drop-header {
border: none; border: none;
height: 100%; height: 100%;
background-color: transparent;
>.ui-drop-text { >.ui-drop-text {
padding: var(--spacing-cell); padding: var(--spacing-cell);

5
lib/ui/dropdown.js
View File

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