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

adjustment

Browse Source
This commit is contained in:
lchen committed 2024-01-19 15:47:42 +08:00
1 parent feec8b59a7
commit 3d9c5bd3f2
9 files changed
+63 -54
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

lib/ui.js
+3 -2
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
}
lib/ui/checkbox.js
+1 -1
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)
);
lib/ui/css/grid.css
+1 -1
View File
@@ -1 +1 @@
.ui-grid{position:relative;box-sizing:border-box;overflow:auto}.ui-grid{--cell-hover-bg-color: lightyellow;--header-border-color: #adaba9;--header-bg-color: #fafafa;--header-fore-color: #000;--cell-border-color: #f0f0f0;--cell-fore-color: #333;--dark-border-color: #666;--split-border-color: #b3b3b3;--dragger-bg-color: #fff;--dragger-cursor-color: #333;--row-bg-color: #fff;--row-active-bg-color: #fafafa;--row-selected-bg-color: #e6f2fb;--text-disabled-color: gray;--filter-shadow: 0 3px 6px -4px rgba(0, 0, 0, .12), 0 6px 16px 0 rgba(0, 0, 0, .08), 0 9px 28px 8px rgba(0, 0, 0, .05);--filter-transition: transform .12s ease, opacity .24s ease;--row-height: 36px;--header-line-height: 26px;--text-indent: 8px;--loading-size: 40px;--loading-border-radius: 20px;--arrow-size: 4px;--filter-size: 10px;--split-width: 8px;--dragger-size: 20px;--dragger-opacity: .6;--dragger-cursor-size: 4px;--dragger-cursor-pos: -4px;--dragger-cursor-opacity: .3;--header-padding: 4px 12px 4px 8px;--header-filter-padding: 4px 26px 4px 8px;--spacing-s: 4px;--spacing-cell: 6px 4px 6px 8px;--filter-line-height: 30px;--filter-item-padding: 0 4px}.ui-grid:focus,.ui-grid:focus-visible{outline:none}.ui-grid::-webkit-scrollbar{width:8px;height:8px}.ui-grid::-webkit-scrollbar-thumb{background-color:rgba(168,168,168,.9);border-radius:4px}.ui-grid,.ui-grid input[type=text],.ui-grid textarea{font-size:var(--font-size);font-family:var(--font-family)}.ui-grid>.ui-grid-sizer{position:absolute;white-space:nowrap;font-weight:bold;visibility:hidden}.ui-grid>.ui-grid-wrapper{position:relative}.ui-grid>.ui-grid-wrapper>.ui-grid-table{position:absolute;width:100%;min-width:100%;margin:0;border-collapse:collapse;border-spacing:0;table-layout:fixed}.ui-grid>.ui-grid-wrapper>.ui-grid-table>thead tr{color:var(--header-fore-color);position:sticky;top:0;z-index:2}.ui-grid>.ui-grid-wrapper>.ui-grid-table>thead tr>th{background-color:var(--header-bg-color);-webkit-user-select:none;-moz-user-select:none;user-select:none;padding:0;margin:0;word-wrap:break-word;white-space:normal;position:relative}.ui-grid>.ui-grid-wrapper>.ui-grid-table>thead tr>th.sticky{position:sticky;z-index:2}.ui-grid>.ui-grid-wrapper>.ui-grid-table>thead tr>th>div{border-bottom:1px solid var(--header-border-color);line-height:var(--header-line-height);min-height:var(--row-height);display:flex;align-items:center;padding:var(--header-padding);box-sizing:border-box}.ui-grid>.ui-grid-wrapper>.ui-grid-table>thead tr>th>div>span{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.ui-grid>.ui-grid-wrapper>.ui-grid-table>thead tr>th>.arrow{width:0;height:0;top:50%;margin-top:calc(0px - var(--arrow-size)/2);right:calc(var(--arrow-size)/2);position:absolute}.ui-grid>.ui-grid-wrapper>.ui-grid-table>thead tr>th>.arrow.asc{border-bottom:var(--arrow-size) solid var(--dark-border-color)}.ui-grid>.ui-grid-wrapper>.ui-grid-table>thead tr>th>.arrow.desc{border-top:var(--arrow-size) solid var(--dark-border-color)}.ui-grid>.ui-grid-wrapper>.ui-grid-table>thead tr>th>.arrow.asc,.ui-grid>.ui-grid-wrapper>.ui-grid-table>thead tr>th>.arrow.desc{border-left:var(--arrow-size) solid rgba(0,0,0,0);border-right:var(--arrow-size) solid rgba(0,0,0,0)}.ui-grid>.ui-grid-wrapper>.ui-grid-table>thead tr>th>.filter{width:var(--filter-size);height:var(--filter-size);top:50%;margin-top:calc(0px - var(--filter-size)/2);right:calc(var(--arrow-size)*2 + 4px);position:absolute;display:flex}.ui-grid>.ui-grid-wrapper>.ui-grid-table>thead tr>th>.filter>svg{width:100%;height:100%;fill:var(--color);opacity:.2;transition:opacity .12s ease}.ui-grid>.ui-grid-wrapper>.ui-grid-table>thead tr>th>.filter>svg:hover{opacity:.8}.ui-grid>.ui-grid-wrapper>.ui-grid-table>thead tr>th>.filter.hover>svg{opacity:.8}.ui-grid>.ui-grid-wrapper>.ui-grid-table>thead tr>th>.filter.active>svg{opacity:1}.ui-grid>.ui-grid-wrapper>.ui-grid-table>thead tr>th>.spliter{position:absolute;height:100%;top:0;right:calc(0px - var(--split-width)/2);width:var(--split-width);cursor:ew-resize;z-index:2}.ui-grid>.ui-grid-wrapper>.ui-grid-table>thead tr>th>.spliter::after{content:"";height:100%;width:1px;display:block;margin:0 auto;transition:background-color .12s ease}.ui-grid>.ui-grid-wrapper>.ui-grid-table>thead tr>th>.spliter:hover::after{background-color:var(--split-border-color)}.ui-grid>.ui-grid-wrapper>.ui-grid-table>thead tr>th>.dragger{position:absolute;left:0;top:0;min-width:var(--dragger-size);height:100%;background-color:var(--dragger-bg-color);opacity:var(--dragger-opacity);display:none}.ui-grid>.ui-grid-wrapper>.ui-grid-table>thead tr>th>.dragger-cursor{position:absolute;top:0;height:100%;border:1px solid var(--dragger-cursor-color);box-sizing:border-box;margin-left:0;opacity:var(--dragger-cursor-opacity);display:none;transition:left .12s ease}.ui-grid>.ui-grid-wrapper>.ui-grid-table>thead tr>th>.dragger-cursor::before{top:-1px;border-top:var(--dragger-cursor-size) solid}.ui-grid>.ui-grid-wrapper>.ui-grid-table>thead tr>th>.dragger-cursor::after{bottom:-1px;borLine truncated
.ui-grid{position:relative;box-sizing:border-box;overflow:auto}.ui-grid{--cell-hover-bg-color: lightyellow;--header-border-color: #adaba9;--header-bg-color: #fafafa;--header-fore-color: #000;--cell-border-color: #f0f0f0;--cell-fore-color: #333;--dark-border-color: #666;--split-border-color: #b3b3b3;--dragger-bg-color: #fff;--dragger-cursor-color: #333;--row-bg-color: #fff;--row-active-bg-color: #fafafa;--row-selected-bg-color: #e6f2fb;--text-disabled-color: gray;--filter-shadow: 0 3px 6px -4px rgba(0, 0, 0, .12), 0 6px 16px 0 rgba(0, 0, 0, .08), 0 9px 28px 8px rgba(0, 0, 0, .05);--filter-transition: transform .12s ease, opacity .24s ease;--row-height: 36px;--header-line-height: 26px;--text-indent: 8px;--loading-size: 40px;--loading-border-radius: 20px;--arrow-size: 4px;--filter-size: 10px;--split-width: 8px;--dragger-size: 20px;--dragger-opacity: .6;--dragger-cursor-size: 4px;--dragger-cursor-pos: -4px;--dragger-cursor-opacity: .3;--header-padding: 4px 12px 4px 8px;--header-filter-padding: 4px 26px 4px 8px;--spacing-s: 4px;--spacing-cell: 6px 4px 6px 8px;--filter-line-height: 30px;--filter-item-padding: 0 4px}.ui-grid:focus,.ui-grid:focus-visible{outline:none}.ui-grid::-webkit-scrollbar{width:8px;height:8px}.ui-grid::-webkit-scrollbar-thumb{background-color:rgba(168,168,168,.9);border-radius:4px}.ui-grid,.ui-grid input[type=text],.ui-grid textarea{font-size:var(--font-size);font-family:var(--font-family)}.ui-grid>.ui-grid-sizer{position:absolute;white-space:nowrap;font-weight:bold;visibility:hidden}.ui-grid>.ui-grid-wrapper{position:relative}.ui-grid>.ui-grid-wrapper>.ui-grid-table{position:absolute;width:100%;min-width:100%;margin:0;border-collapse:collapse;border-spacing:0;table-layout:fixed}.ui-grid>.ui-grid-wrapper>.ui-grid-table>thead tr{color:var(--header-fore-color);position:sticky;top:0;z-index:2}.ui-grid>.ui-grid-wrapper>.ui-grid-table>thead tr>th{background-color:var(--header-bg-color);-webkit-user-select:none;-moz-user-select:none;user-select:none;padding:0;margin:0;word-wrap:break-word;white-space:normal;position:relative}.ui-grid>.ui-grid-wrapper>.ui-grid-table>thead tr>th.sticky{position:sticky;z-index:2}.ui-grid>.ui-grid-wrapper>.ui-grid-table>thead tr>th>div{border-bottom:1px solid var(--header-border-color);line-height:var(--header-line-height);min-height:var(--row-height);display:flex;align-items:center;padding:var(--header-padding);box-sizing:border-box}.ui-grid>.ui-grid-wrapper>.ui-grid-table>thead tr>th>div>span{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.ui-grid>.ui-grid-wrapper>.ui-grid-table>thead tr>th>.arrow{width:0;height:0;top:50%;margin-top:calc(0px - var(--arrow-size)/2);right:calc(var(--arrow-size)/2);position:absolute}.ui-grid>.ui-grid-wrapper>.ui-grid-table>thead tr>th>.arrow.asc{border-bottom:var(--arrow-size) solid var(--dark-border-color)}.ui-grid>.ui-grid-wrapper>.ui-grid-table>thead tr>th>.arrow.desc{border-top:var(--arrow-size) solid var(--dark-border-color)}.ui-grid>.ui-grid-wrapper>.ui-grid-table>thead tr>th>.arrow.asc,.ui-grid>.ui-grid-wrapper>.ui-grid-table>thead tr>th>.arrow.desc{border-left:var(--arrow-size) solid rgba(0,0,0,0);border-right:var(--arrow-size) solid rgba(0,0,0,0)}.ui-grid>.ui-grid-wrapper>.ui-grid-table>thead tr>th>.filter{width:var(--filter-size);height:var(--filter-size);top:50%;margin-top:calc(0px - var(--filter-size)/2);right:calc(var(--arrow-size)*2 + 4px);position:absolute;display:flex}.ui-grid>.ui-grid-wrapper>.ui-grid-table>thead tr>th>.filter>svg{width:100%;height:100%;fill:var(--color);opacity:.2;transition:opacity .12s ease}.ui-grid>.ui-grid-wrapper>.ui-grid-table>thead tr>th>.filter>svg:hover{opacity:.8}.ui-grid>.ui-grid-wrapper>.ui-grid-table>thead tr>th>.filter.hover>svg{opacity:.8}.ui-grid>.ui-grid-wrapper>.ui-grid-table>thead tr>th>.filter.active>svg{opacity:1}.ui-grid>.ui-grid-wrapper>.ui-grid-table>thead tr>th>.spliter{position:absolute;height:100%;top:0;right:calc(0px - var(--split-width)/2);width:var(--split-width);cursor:ew-resize;z-index:2}.ui-grid>.ui-grid-wrapper>.ui-grid-table>thead tr>th>.spliter::after{content:"";height:100%;width:1px;display:block;margin:0 auto;transition:background-color .12s ease}.ui-grid>.ui-grid-wrapper>.ui-grid-table>thead tr>th>.spliter:hover::after{background-color:var(--split-border-color)}.ui-grid>.ui-grid-wrapper>.ui-grid-table>thead tr>th>.dragger{position:absolute;left:0;top:0;min-width:var(--dragger-size);height:100%;background-color:var(--dragger-bg-color);opacity:var(--dragger-opacity);display:none}.ui-grid>.ui-grid-wrapper>.ui-grid-table>thead tr>th>.dragger-cursor{position:absolute;top:0;height:100%;border:1px solid var(--dragger-cursor-color);box-sizing:border-box;margin-left:0;opacity:var(--dragger-cursor-opacity);display:none;transition:left .12s ease}.ui-grid>.ui-grid-wrapper>.ui-grid-table>thead tr>th>.dragger-cursor::before{top:-1px;border-top:var(--dragger-cursor-size) solid}.ui-grid>.ui-grid-wrapper>.ui-grid-table>thead tr>th>.dragger-cursor::after{bottom:-1px;borLine truncated
lib/ui/css/grid.scss
-1
View File
@@ -333,7 +333,6 @@
>.ui-drop-header {
border: none;
height: 100%;
background-color: transparent;
>.ui-drop-text {
padding: var(--spacing-cell);
lib/ui/dropdown.js
+5
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);
lib/ui/extension.d.ts
Vendored
+2 -1
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
lib/ui/extension.js
+4
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('; ');
}
lib/ui/grid/column.js
+5 -3
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) {
lib/ui/grid/grid.js
+42 -45
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;
}