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

tiny issue fix.

Browse Source
This commit is contained in:
Tsanie Lily 2023-04-04 23:26:46 +08:00
parent fa1b7df4a0
commit adb74b7441
7 changed files with 130 additions and 27 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
css/dropdown.scss
View File

@ -179,7 +179,6 @@ $listMaxHeight: 210px;
left: -1px;
&.slide-up {
top: auto;
/*border-top-width: 1px;
border-bottom-width: 0;*/
transform-origin: bottom;

19
css/grid.scss
View File

@ -18,6 +18,7 @@
& {
--hover-bg-color: lightyellow;
--link-fore-color: #1890ff;
--link-disabled-color: #d9d9d9;
--header-border-color: #adaba9;
--header-bg-color: #fafafa;
--header-fore-color: #000;
@ -280,6 +281,11 @@
>.dropdown-panel {
top: calc(var(--line-height) + 2px);
&.slide-up {
top: unset;
bottom: calc(var(--line-height) + 2px);
}
}
}
@ -291,16 +297,25 @@
align-items: center;
position: relative;
svg {
>svg {
width: 16px;
height: 16px;
fill: var(--link-fore-color);
transition: opacity .12s ease;
}
&:hover svg {
&:hover>svg {
opacity: .4;
}
&.disabled {
cursor: unset;
>svg {
fill: var(--header-border-color);
opacity: unset;
}
}
}
}
}

4
css/tooltip.scss
View File

@ -9,12 +9,12 @@
}
.tooltip-wrapper {
position: absolute;
position: fixed;
word-wrap: break-word;
height: auto;
text-align: left;
z-index: 250;
min-width: 75px;
min-width: 45px;
max-width: 480px;
min-height: 32px;
border-radius: 2px;

65
lib/ui/grid.d.ts vendored Normal file
View File

@ -0,0 +1,65 @@
interface GridColumn {
static create(): HTMLElement;
static setValue(element: HTMLElement, val: any): void;
static setStyle(element: HTMLElement, style: { [key: string]: string }): void;
}
interface GridColumn {
key?: string;
}
interface GridColumnDirection {
[-1]: Number,
0: Number,
1: Number
}
interface GridColumnColumnEventMap {
"reorder": string,
"resize": string,
"sort": string
}
interface Grid {
columns: Array<GridColumn>;
langs?: { all: string, ok: string, reset: string };
virtualCount?: Number;
rowHeight?: Number;
filterRowHeight?: Number;
height?: Number;
readonly?: boolean;
multiSelect?: boolean;
fullrowClick?: boolean;
allowHtml?: boolean;
holderDisabled?: boolean;
window?: Window
sortIndex?: Number;
sortDirection?: keyof GridColumnDirection;
willSelect?: (index: Number, colIndex: Number) => boolean;
selectedRowChanged?: (index?: Number) => void;
cellDblClicked?: (index: Number, colIndex: Number) => void;
cellClicked?: (index: Number, colIndex: Number) => boolean;
rowDblClicked?: (index: Number) => void;
columnChanged?: <K extends keyof GridColumnColumnEventMap>(type: K, index: Number, value: Number | keyof GridColumnDirection) => void;
source(): Array<any>;
source(list: Array<any>): void;
}
declare var Grid: {
ColumnTypes: {
Common: 0,
Input: 1,
Dropdown: 2,
Checkbox: 3,
Icon: 4,
isCheckbox(type: Number): boolean;
};
GridColumn: GridColumn;
new(container: HTMLElement): Grid;
}
export default Grid;

14
lib/ui/grid.html
View File

@ -34,6 +34,7 @@
}
};
// grid.readonly = true;
grid.allowHtml = true;
grid.height = 0;
grid.columns = [
@ -59,7 +60,16 @@
},
{ key: 'c3', caption: 'column 3', width: 90 },
{ key: 'c4', caption: 'Note', type: Grid.ColumnTypes.Input },
{ key: 'c5', type: Grid.ColumnTypes.Icon, text: 'times', tooltip: 'Delete' }
{
key: 'c5',
type: Grid.ColumnTypes.Icon,
enabled: 'enabled',
text: 'times',
tooltip: 'Delete',
events: {
onclick() { console.log('deleted', this) }
}
}
];
grid.columnChanged = (type, index, value) => console.log(`column (${index}), ${type}, ${value}`);
grid.cellClicked = (rId, cId) => console.log(`row (${rId}), column (${cId}) clicked.`);
@ -80,7 +90,7 @@
</script>
<style type="text/css">
#grid-sample {
height: 400px;
/* height: 400px; */
}
#grid-sample>.grid {

38
lib/ui/grid.js
View File

@ -78,8 +78,8 @@ class GridInputColumn extends GridColumn {
const SymbolDropdown = Symbol.for('ui-dropdown');
class GridDropdownColumn extends GridColumn {
static createEdit(trigger) {
const drop = new Dropdown();
static createEdit(trigger, parent) {
const drop = new Dropdown({ parent });
drop.onselected = trigger;
return drop.create();
}
@ -186,6 +186,10 @@ class GridIconColumn extends GridColumn {
} else {
element.classList.remove('disabled');
}
const tooltip = element.querySelector('.tooltip-wrapper');
if (tooltip != null) {
tooltip.style.display = enabled === false ? 'none' : '';
}
}
}
@ -463,7 +467,7 @@ class Grid {
width = col.width;
}
if (width > 0) {
this.#changeColumnWidth(i, width);
this.#changeColumnWidth(i, width, true);
}
});
}
@ -569,7 +573,7 @@ class Grid {
this.#needResize = true;
sizer.innerText = col.caption ?? '';
let width = sizer.offsetWidth + 22;
if (col.allcheck && isCheckbox) {
if (!this.readonly && col.enabled !== false && col.allcheck && isCheckbox) {
width += 32;
}
if (width < MiniColumnWidth) {
@ -609,7 +613,7 @@ class Grid {
}
const wrapper = document.createElement('div');
th.appendChild(wrapper);
if (col.enabled !== false && col.allcheck && isCheckbox) {
if (!this.readonly && col.enabled !== false && col.allcheck && isCheckbox) {
const check = createCheckbox({
onchange: e => this.#onColumnAllChecked(col, e.target.checked)
});
@ -832,15 +836,20 @@ class Grid {
let element;
if (!isCheckbox && selectChanged && typeof type.createEdit === 'function') {
element = selected ?
type.createEdit(e => this.#onRowChanged(e, startIndex + i, col, type.getValue(e))) :
type.createEdit(e => this.#onRowChanged(e, startIndex + i, col, type.getValue(e)), this.#refs.bodyContent) :
type.create(col);
cell.replaceChildren(element);
} else {
element = cell.children[0];
}
let enabled = col.enabled;
if (typeof enabled === 'string') {
enabled = item[enabled];
let enabled;
if (this.readonly) {
enabled = false;
} else {
enabled = col.enabled;
if (typeof enabled === 'string') {
enabled = item[enabled];
}
}
type.setValue(element, val, item, col);
if (typeof type.setEnabled === 'function') {
@ -853,6 +862,7 @@ class Grid {
widths[j] = width;
widths.flag = true;
}
this.#overflows[(startIndex + i) << MaxColumnBit | j] = false;
}
if (typeof col.styleFilter === 'function') {
const style = col.styleFilter(item);
@ -878,7 +888,7 @@ class Grid {
});
}
#changeColumnWidth(index, width) {
#changeColumnWidth(index, width, keepOverflows) {
const col = this.columns[index];
// const oldwidth = col.width;
const w = `${width}px`;
@ -903,6 +913,9 @@ class Grid {
// width = this.#refs.bodyContainer.offsetWidth - oldwidth + width;
// this.#refs.bodyContainer.style.width = `${width}px`;
// }
if (keepOverflows) {
return;
}
for (let i = 0; i < this.#currentSource.length; i += 1) {
const keyid = (i << MaxColumnBit) | index;
if (this.#overflows.hasOwnProperty(keyid)) {
@ -1129,9 +1142,6 @@ class Grid {
delete attr.offset;
});
this.#changeColumnOrder(index);
if (typeof this.columnChanged === 'function') {
this.columnChanged(ColumnChangedType.Reorder, index);
}
}
};
['mousemove', 'mouseup'].forEach(event => window.addEventListener(event, attr[event]));
@ -1165,7 +1175,7 @@ class Grid {
}
attr.resizing = val;
attr.sizing = true;
this.#changeColumnWidth(index, val);
this.#changeColumnWidth(index, val, true);
};
attr.mousemove = e => throttle(resizemove, RefreshInterval, this, e);
attr.mouseup = e => {

16
lib/ui/tooltip.js
View File

@ -29,14 +29,18 @@ function setTooltip(container, content) {
if (container == null) {
return;
}
let parent = container;
let left = container.offsetLeft;
let top = container.offsetTop;
// let parent = container.parentElement;
// while (parent != null) {
// left -= parent.scrollLeft;
// top -= parent.scrollTop;
// parent = parent.parentElement;
// }
while ((parent = parent.offsetParent) != null) {
left += parent.offsetLeft;
top += parent.offsetTop;
}
parent = container;
while ((parent = parent.parentElement) != null) {
left -= parent.scrollLeft;
top -= parent.scrollTop;
}
left -= wrapper.offsetWidth / 2 - container.offsetWidth / 2;
top -= wrapper.offsetHeight + 14;
wrapper.style.left = `${left}px`;