known issue: tooltip position
This commit is contained in:
@@ -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];
|
||||
|
Reference in New Issue
Block a user