known issue: tooltip position

This commit is contained in:
2023-04-04 17:31:42 +08:00
parent 3bc258149c
commit fa1b7df4a0
5 changed files with 83 additions and 21 deletions

View File

@@ -1,9 +1,10 @@
import { global, isPositive, isMobile, throttle, truncate } from "../utility";
import { nullOrEmpty } from "../utility/strings";
import { r } from "../utility/lgres";
import { createIcon } from "../ui/icon";
import { createCheckbox } from "../ui/checkbox";
import Dropdown from "../ui/dropdown";
import { createIcon } from "./icon";
import { createCheckbox } from "./checkbox";
import { setTooltip } from "./tooltip";
import Dropdown from "./dropdown";
const ColumnChangedType = {
Reorder: 'reorder',
@@ -44,8 +45,6 @@ class GridColumn {
static setValue(element, val) { element.innerText = val }
static getValue(element) { return element.innerText }
static setStyle(element, style) {
for (let css of Object.entries(style)) {
element.style.setProperty(css[0], css[1]);
@@ -157,11 +156,45 @@ class GridCheckboxColumn extends GridColumn {
static setEnabled(element, enabled) { element.querySelector('input').disabled = enabled === false }
}
class GridIconColumn extends GridColumn {
static create() {
const element = document.createElement('span');
element.className = 'icon';
// element.appendChild(document.createElement('layer'));
return element;
}
static setValue(element, val, item, col) {
let type = col.iconType;
if (typeof type === 'function') {
type = type(item);
}
type ??= 'fa-regular';
if (element.dataset.type !== type || element.dataset.icon !== val) {
const icon = createIcon(type, val);
// const layer = element.children[0];
element.replaceChildren(icon);
!nullOrEmpty(col.tooltip) && setTooltip(icon, col.tooltip);
element.dataset.type = type;
element.dataset.icon = val;
}
}
static setEnabled(element, enabled) {
if (enabled === false) {
element.classList.add('disabled');
} else {
element.classList.remove('disabled');
}
}
}
const ColumnTypes = {
0: GridColumn,
1: GridInputColumn,
2: GridDropdownColumn,
3: GridCheckboxColumn
3: GridCheckboxColumn,
4: GridIconColumn
};
class Grid {
@@ -215,6 +248,7 @@ class Grid {
Input: 1,
Dropdown: 2,
Checkbox: 3,
Icon: 4,
isCheckbox(type) { return type === 3 }
};
@@ -533,7 +567,7 @@ class Grid {
} else {
col.autoResize = true;
this.#needResize = true;
sizer.innerText = col.caption;
sizer.innerText = col.caption ?? '';
let width = sizer.offsetWidth + 22;
if (col.allcheck && isCheckbox) {
width += 32;
@@ -587,7 +621,7 @@ class Grid {
caption.style.setProperty(css[0], css[1]);
}
}
caption.innerText = col.caption;
caption.innerText = col.caption ?? '';
wrapper.appendChild(caption);
// order arrow
if (col.sortable) {
@@ -608,7 +642,7 @@ class Grid {
th.appendChild(spliter);
}
// tooltip
!nullOrEmpty(col.tooltip) && th.setAttribute('title', col.tooltip);
// !nullOrEmpty(col.tooltip) && setTooltip(th, col.tooltip);
header.appendChild(th);
}
const placeholder = document.createElement('th');
@@ -729,7 +763,7 @@ class Grid {
type ??= GridColumn;
this.#colTypes[col.key] = type;
}
cell.appendChild(type.create());
cell.appendChild(type.create(col));
}
}
@@ -796,10 +830,10 @@ class Grid {
const isCheckbox = Grid.ColumnTypes.isCheckbox(col.type);
const type = isCheckbox ? GridCheckboxColumn : this.#colTypes[col.key] ?? GridColumn;
let element;
if (!isCheckbox && selectChanged) {
element = selected && typeof type.createEdit === 'function' ?
if (!isCheckbox && selectChanged && typeof type.createEdit === 'function') {
element = selected ?
type.createEdit(e => this.#onRowChanged(e, startIndex + i, col, type.getValue(e))) :
type.create();
type.create(col);
cell.replaceChildren(element);
} else {
element = cell.children[0];