diff --git a/fonts/fa-brands.svg b/fonts/fa-brands.svg
index bb2b1de..e908e3b 100644
--- a/fonts/fa-brands.svg
+++ b/fonts/fa-brands.svg
@@ -5,1459 +5,1095 @@ License - https://fontawesome.com/license (Commercial License)
-->
diff --git a/fonts/fa-light.svg b/fonts/fa-light.svg
index 932b989..0d7f766 100644
--- a/fonts/fa-light.svg
+++ b/fonts/fa-light.svg
@@ -5,3499 +5,2625 @@ License - https://fontawesome.com/license (Commercial License)
-->
diff --git a/fonts/fa-regular.svg b/fonts/fa-regular.svg
index b2945b8..392c5bf 100644
--- a/fonts/fa-regular.svg
+++ b/fonts/fa-regular.svg
@@ -5,3499 +5,2625 @@ License - https://fontawesome.com/license (Commercial License)
-->
diff --git a/fonts/fa-solid.svg b/fonts/fa-solid.svg
index e4c65a6..5713c5b 100644
--- a/fonts/fa-solid.svg
+++ b/fonts/fa-solid.svg
@@ -5,3499 +5,2625 @@ License - https://fontawesome.com/license (Commercial License)
-->
diff --git a/lib/ui/css/grid.scss b/lib/ui/css/grid.scss
index 6076877..6cf7746 100644
--- a/lib/ui/css/grid.scss
+++ b/lib/ui/css/grid.scss
@@ -23,6 +23,9 @@
--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;
@@ -31,6 +34,7 @@
--loading-border-radius: 20px;
--arrow-size: 4px;
+ --filter-size: 10px;
--split-width: 8px;
--dragger-size: 20px;
--dragger-opacity: .6;
@@ -39,6 +43,7 @@
--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;
}
@@ -93,6 +98,8 @@
>span {
overflow: hidden;
+ white-space: nowrap;
+ text-overflow: ellipsis;
}
}
@@ -119,6 +126,36 @@
}
}
+ >.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;
+
+ >svg {
+ width: 100%;
+ height: 100%;
+ fill: var(--color);
+ opacity: .2;
+ transition: opacity .12s ease;
+
+ &:hover {
+ opacity: .8;
+ }
+ }
+
+ &.hover>svg {
+ opacity: .8;
+ }
+
+ &.active>svg {
+ opacity: 1;
+ }
+ }
+
>.spliter {
position: absolute;
height: 100%;
@@ -183,6 +220,10 @@
border-right: var(--dragger-cursor-size) solid transparent;
}
}
+
+ &.header-filter>div {
+ padding: var(--header-filter-padding);
+ }
}
}
}
@@ -367,6 +408,48 @@
}
}
}
+
+ >.filter-panel {
+ position: absolute;
+ width: 200px;
+ height: 300px;
+ box-shadow: var(--filter-shadow);
+ transition: var(--filter-transition);
+ background-color: var(--bg-color);
+ transform: scaleY(0);
+ transform-origin: top;
+ opacity: 0;
+ display: flex;
+ flex-direction: column;
+
+ &.active {
+ transform: scaleY(1);
+ opacity: 1;
+ }
+
+ >.filter-search-holder {
+ position: relative;
+ margin: 8px 8px 4px;
+
+ >.filter-search-box {
+ box-sizing: border-box;
+ text-indent: 16px;
+ width: 100%;
+ font-size: var(--font-smaller-size);
+ line-height: var(--line-height);
+ }
+
+ >svg {
+ position: absolute;
+ width: 12px;
+ height: 12px;
+ top: calc(50% - 6px);
+ left: 4px;
+ fill: var(--color);
+ cursor: text;
+ }
+ }
+ }
}
@media (prefers-color-scheme: dark) {
diff --git a/lib/ui/grid/grid.html b/lib/ui/grid/grid.html
index 0050a3f..887af0f 100644
--- a/lib/ui/grid/grid.html
+++ b/lib/ui/grid/grid.html
@@ -198,6 +198,7 @@
key: 'c2a',
caption: '下拉',
type: Grid.ColumnTypes.Dropdown,
+ allowFilter: true,
source: item => {
if (item.source == null) {
return new Promise((resolve, reject) => {
diff --git a/lib/ui/grid/grid.js b/lib/ui/grid/grid.js
index dac4046..e77b2df 100644
--- a/lib/ui/grid/grid.js
+++ b/lib/ui/grid/grid.js
@@ -1,5 +1,5 @@
import '../css/grid.scss';
-import { global, isPositive, isMobile, throttle, truncate } from "../../utility";
+import { global, isPositive, isMobile, throttle, truncate, distinct } from "../../utility";
import { r } from "../../utility/lgres";
import { createElement } from "../../functions";
import { createIcon } from "../icon";
@@ -12,11 +12,11 @@ const ColumnChangedType = {
Sort: 'sort'
};
const RefreshInterval = isMobile() ? 32 : 0;
-const MaxColumnBit = 10;
-const MaxColumnMask = 0x3ff;
+const HoverInternal = 200;
const RedumCount = 4;
const MiniDragOffset = 4;
const MiniColumnWidth = 50;
+const FilterPanelWidth = 200;
function getClientX(e) {
if (e == null) {
@@ -63,7 +63,6 @@ class Grid {
#containerHeight;
#bodyClientWidth;
#rowCount = -1;
- #overflows;
#scrollTop;
#scrollLeft;
#colTypes = {};
@@ -126,9 +125,22 @@ class Grid {
}
list = list.map(i => { return { values: i } });
this.#source = list;
- // TODO: filter to currentSource;
- this.#currentSource = list;
- this.#overflows = {};
+ if (this.#colAttrs.__filtered === true) {
+ this.#currentSource = list.filter(it => {
+ for (let col of this.columns) {
+ const f = this.#get(col.key, 'filter');
+ if (Array.isArray(f)) {
+ const v = this.#getItemValue(it, col.key, col.filter);
+ if (f.indexOf(v) < 0) {
+ return false;
+ }
+ }
+ }
+ return true;
+ });
+ } else {
+ this.#currentSource = list;
+ }
this.#selectedColumnIndex = -1;
this.#selectedIndexes = [];
this.#startIndex = 0;
@@ -323,17 +335,17 @@ class Grid {
width = col.width;
}
if (width > 0) {
- this.#changeColumnWidth(i, width, true);
+ this.#changeColumnWidth(i, width);
}
});
}
}
resetChange() {
- if (this.#currentSource == null) {
+ if (this.#source == null) {
return;
}
- for (let row of this.#currentSource) {
+ for (let row of this.#source) {
delete row.__changed;
}
}
@@ -363,21 +375,8 @@ class Grid {
direction = 1;
}
comparer = (a, b) => {
- const ta = a.values[col.key];
- const tb = b.values[col.key];
- if ((ta == null || tb == null) && typeof col.filter === 'function') {
- a = col.filter(a.values);
- b = col.filter(b.values);
- } else {
- a = ta;
- b = tb;
- }
- if (a?.value != null) {
- a = a.value;
- }
- if (b?.value != null) {
- b = b.value;
- }
+ a = this.#getItemValue(a, col.key, col.filter);
+ b = this.#getItemValue(b, col.key, col.filter);
if (a == null && typeof b === 'number') {
a = 0;
} else if (typeof a === 'number' && b == null) {
@@ -394,8 +393,9 @@ class Grid {
comparer = (a, b) => col.sortFilter(a.values, b.values) * direction;
}
this.#source.sort(comparer);
- // TODO: filter to currentSource;
- this.#currentSource = this.#source;
+ if (this.#colAttrs.__filtered === true) {
+ this.#currentSource.sort(comparer);
+ }
if (reload) {
this.reload();
} else {
@@ -434,6 +434,9 @@ class Grid {
if (!this.readonly && col.enabled !== false && col.allcheck && isCheckbox) {
width += 32;
}
+ if (col.allowFilter === true) {
+ width += 14;
+ }
if (width < MiniColumnWidth) {
width = MiniColumnWidth;
}
@@ -486,8 +489,12 @@ class Grid {
th.appendChild(createElement('layer', 'arrow'));
}
// filter
- if (col.allowFilter) {
- // TODO: filter
+ if (col.allowFilter === true) {
+ const filter = createElement('layer', 'filter');
+ filter.appendChild(createIcon('fa-solid', 'filter'));
+ filter.addEventListener('mousedown', e => this.#onFilter(e, col));
+ th.classList.add('header-filter');
+ th.appendChild(filter);
}
// resize spliter
if (col.resizable !== false) {
@@ -549,19 +556,16 @@ class Grid {
const holder = createElement('div', 'ui-grid-hover-holder');
holder.addEventListener('mousedown', e => {
const holder = e.currentTarget;
- const keyid = holder.keyid;
- if (keyid == null) {
- return;
- }
- delete holder.keyid;
+ const row = Number(holder.dataset.row);
+ const col = Number(holder.dataset.col);
if (holder.classList.contains('active')) {
holder.classList.remove('active');
}
- return this.#onRowClicked(e, (keyid >>> MaxColumnBit) - this.#startIndex, keyid & MaxColumnMask);
+ return this.#onRowClicked(e, row + this.#startIndex, col);
});
holder.addEventListener('dblclick', e => this.#onRowDblClicked(e));
bodyContainer.appendChild(holder);
- body.addEventListener('mousemove', e => throttle(this.#onBodyMouseMove, RefreshInterval, this, e, holder), { passive: true });
+ body.addEventListener('mousemove', e => throttle(this.#onBodyMouseMove, HoverInternal, this, e, holder), { passive: true });
}
this.#refs.body = body;
this.#refs.bodyContainer = bodyContainer;
@@ -588,7 +592,8 @@ class Grid {
cols.forEach((col, j) => {
const cell = createElement('td');
if (col.visible !== false) {
- cell.keyid = ((exists + i) << MaxColumnBit) | j;
+ 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)) {
@@ -717,7 +722,6 @@ 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);
@@ -746,7 +750,7 @@ class Grid {
});
}
- #changeColumnWidth(index, width, keepOverflows) {
+ #changeColumnWidth(index, width) {
const col = this.columns[index];
// const oldwidth = col.width;
const w = `${width}px`;
@@ -772,15 +776,6 @@ 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)) {
- delete this.#overflows[keyid];
- }
- }
}
#changingColumnOrder(index, offset, x, offsetLeft) {
@@ -821,8 +816,8 @@ class Grid {
}
idx ??= count - 1;
}
- if (idx !== this.#colAttrs.orderIndex) {
- this.#colAttrs.orderIndex = idx;
+ if (idx !== this.#colAttrs.__orderIndex) {
+ this.#colAttrs.__orderIndex = idx;
element = children[idx];
if (element == null) {
return;
@@ -835,7 +830,7 @@ class Grid {
#changeColumnOrder(index) {
this.#refs.dragger.style.display = '';
this.#refs.draggerCursor.style.display = '';
- const orderIndex = this.#colAttrs.orderIndex;
+ const orderIndex = this.#colAttrs.__orderIndex;
if (orderIndex >= 0 && orderIndex !== index) {
let targetIndex = orderIndex - index;
if (targetIndex >= 0 && targetIndex <= 1) {
@@ -936,6 +931,16 @@ class Grid {
}
}
+ #getItemValue(item, key, filter) {
+ let value;
+ if (typeof filter === 'function') {
+ value = filter(item);
+ } else {
+ value = item.values[key];
+ }
+ return value?.value ?? value;
+ }
+
#getRowTarget(target) {
let parent;
while ((parent = target.parentElement) != null && !parent.classList.contains('ui-grid-row')) {
@@ -969,6 +974,169 @@ class Grid {
}
}
+ #onCloseFilter() {
+ const panels = this.#el.querySelectorAll('.filter-panel.active');
+ if (panels.length > 0) {
+ panels.forEach(el => el.classList.remove('active'));
+ setTimeout(() => this.#el.querySelectorAll('.filter-panel').forEach(el => el.remove()), 120);
+ const filtering = this.#colAttrs.__filtering;
+ if (filtering instanceof HTMLElement) {
+ filtering.classList.remove('hover');
+ }
+ delete this.#colAttrs.__filtering;
+ return true;
+ }
+ return false;
+ }
+
+ #onFilter(e, col) {
+ if (this.#onCloseFilter()) {
+ return;
+ }
+ const close = e => {
+ if ((e.target.tagName === 'LAYER' && e.target.classList.contains('filter')) ||
+ e.target.tagName === 'use') {
+ return;
+ }
+ if (this.#onCloseFilter()) {
+ document.removeEventListener('mousedown', close);
+ }
+ }
+ document.addEventListener('mousedown', close);
+ const panel = createElement('div', 'filter-panel');
+ panel.addEventListener('mousedown', e => e.stopPropagation());
+ const th = e.currentTarget.parentElement;
+ const width = th.offsetWidth;
+ panel.style.top = `${th.offsetHeight}px`;
+ panel.style.left = (th.offsetLeft + (width > FilterPanelWidth ? width - FilterPanelWidth : 0)) + 'px';
+
+ // search
+ let searchbox;
+ if (col.allowSearch !== false) {
+ const searchholder = createElement('div', 'filter-search-holder');
+ searchbox = createElement('input', 'filter-search-box ui-text');
+ searchbox.type = 'text';
+ const searchicon = createIcon('fa-regular', 'search');
+ searchicon.addEventListener('mousedown', e => {
+ searchbox.focus();
+ e.preventDefault();
+ });
+ searchholder.append(searchbox, searchicon);
+ panel.append(searchholder);
+ }
+ // list
+ const itemlist = createElement('div', 'filter-item-list');
+ itemlist.addEventListener('scroll', e => throttle(this.#onFilterScroll, RefreshInterval, this, col, itemlist, e.target.scrollTop), { passive: true });
+ // - all
+ const itemall = createElement('div', 'filter-item filter-all');
+ itemall.appendChild(createCheckbox({
+ label: this.langs.all,
+ onchange: e => {
+ const checked = e.target.checked;
+ itemlist.querySelectorAll('.filter-content input').forEach(box => box.checked = checked);
+ }
+ }));
+ itemlist.appendChild(itemall);
+ // - items
+ let array;
+ if (Array.isArray(col.filterSource)) {
+ array = col.filterSource;
+ } else if (typeof col.filterSource === 'function') {
+ array = col.filterSource.call(this, col);
+ } else {
+ array = distinct(this.#currentSource, col.key, col.filter)
+ .sort((a, 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')) {
+ return i;
+ }
+ return {
+ value: i,
+ displayValue: i == null ? '' : i
+ };
+ });
+ this.#fillFilterList(col, itemlist, array, itemall);
+ // TODO: check status
+ panel.appendChild(itemlist);
+ if (searchbox != null) {
+ searchbox.addEventListener('input', e => {
+ const key = e.currentTarget.value.toLowerCase();
+ const items = key.length === 0 ? array : array.filter(i => {
+ const displayValue = i?.displayValue ?? i;
+ return String(displayValue ?? '').indexOf(key) >= 0;
+ });
+ this.#fillFilterList(col, itemlist, items, itemall);
+ });
+ }
+
+ this.#el.appendChild(panel);
+ setTimeout(() => panel.classList.add('active'), 0);
+ this.#colAttrs.__filtering = e.currentTarget;
+ e.currentTarget.classList.add('hover');
+ }
+
+ #fillFilterList(col, list, array, all) {
+ list.querySelector('.filter-holder').remove();
+ list.querySelector('.filter-content').remove();
+ const rowHeight = this.filterRowHeight;
+ const height = array.length * rowHeight;
+ this.#set(col.key, 'filterHeight', height);
+ const holder = createElement('div', 'filter-holder');
+ holder.style.height = `${height}px`;
+ const content = createElement('div', 'filter-content');
+ content.style.top = `${rowHeight}px`;
+ this.#set(col.key, 'filterSource', array);
+ const filter = this.#get(col.key, 'filter');
+ for (let item of array) {
+ item.__checked = !Array.isArray(filter) || filter.indexOf(item.value ?? item);
+ }
+ if (array.length > 12) {
+ array = array.slice(0, 12);
+ }
+ this.#doFillFilterList(col, content, array, all);
+ list.append(holder, content);
+ }
+
+ #doFillFilterList(col, content, array, all) {
+
+ }
+
+ #onFilterScroll(col, list, top) {
+ const rowHeight = this.filterRowHeight;
+ top -= (top % (rowHeight * 2)) + rowHeight;
+ if (top < 0) {
+ top = 0;
+ } else {
+ let bottomTop = this.#get(col.key, 'filterHeight') - (12 * rowHeight);
+ if (bottomTop < 0) {
+ bottomTop = 0;
+ }
+ if (top > bottomTop) {
+ top = bottomTop;
+ }
+ }
+ if (this.#get(col.key, 'filterTop') !== top) {
+ this.#set(col.key, 'filterTop', top);
+ const startIndex = top / rowHeight;
+ let array = this.#get(col.key, 'filterSource');
+ if (startIndex + 12 < array.length) {
+ array = array.slice(startIndex, startIndex + 12);
+ } else {
+ array = array.slice(-12);
+ }
+ const content = list.querySelector('.filter-content');
+ content.replaceChildren();
+ this.#doFillFilterList(col, content, array, list.querySelector('.filter-all>input'));
+ content.style.top = `${top + rowHeight}px`;
+ }
+ }
+
#onDragStart(e, col) {
if (this.#notHeader(e.target.tagName)) {
return;
@@ -1050,7 +1218,7 @@ class Grid {
}
attr.resizing = val;
attr.sizing = true;
- this.#changeColumnWidth(index, val, true);
+ this.#changeColumnWidth(index, val);
};
attr.mousemove = e => throttle(resizemove, RefreshInterval, this, e);
attr.mouseup = e => {
@@ -1142,30 +1310,32 @@ class Grid {
return;
}
let [parent, target] = this.#getRowTarget(e.target);
- let keyid = target.keyid;
- if (parent == null || keyid == null) {
- delete holder.keyid;
+ if (parent == null) {
+ delete holder.dataset.row;
+ delete holder.dataset.col;
if (holder.classList.contains('active')) {
holder.classList.remove('active');
}
return;
}
- const oldkeyid = holder.keyid;
- keyid += this.#startIndex << MaxColumnBit;
- if (keyid === oldkeyid) {
- return;
- }
const element = target.children[0];
- if (element.tagName !== 'SPAN') {
+ if (element?.tagName !== 'SPAN') {
+ if (holder.classList.contains('active')) {
+ delete holder.dataset.row;
+ delete holder.dataset.col;
+ holder.classList.remove('active');
+ }
return;
}
- let overflow = this.#overflows[keyid];
- if (overflow == null) {
- overflow = element.scrollWidth > element.offsetWidth;
- this.#overflows[keyid] = overflow;
+ const row = target.dataset.row;
+ const col = target.dataset.col;
+ if (holder.dataset.row === row &&
+ holder.dataset.col === col) {
+ return;
}
- if (overflow) {
- holder.keyid = keyid;
+ if (element.scrollWidth > element.offsetWidth) {
+ holder.dataset.row = row;
+ holder.dataset.col = col;
holder.innerText = element.innerText;
const top = this.#refs.bodyContent.offsetTop + target.offsetTop;
let left = target.offsetLeft;
@@ -1180,13 +1350,10 @@ class Grid {
const height = target.offsetHeight;
holder.style.cssText = `top: ${top}px; left: ${left}px; max-width: ${this.#bodyClientWidth}px; height: ${height - 2}px`;
holder.classList.add('active');
- } else {
- if (oldkeyid != null) {
- delete holder.keyid;
- }
- if (holder.classList.contains('active')) {
- holder.classList.remove('active');
- }
+ } else if (holder.classList.contains('active')) {
+ delete holder.dataset.row;
+ delete holder.dataset.col;
+ holder.classList.remove('active');
}
}
diff --git a/lib/utility.js b/lib/utility.js
index 343c536..4a3c2b0 100644
--- a/lib/utility.js
+++ b/lib/utility.js
@@ -27,10 +27,30 @@ function throttle(method, delay = 100, context = g, ...args) {
}
}
+function debounce(method, delay = 100, context = g, ...args) {
+ if (method == null) {
+ return;
+ }
+ method.tiid && clearTimeout(method.tiid);
+ method.tiid = setTimeout(() => method.apply(context, args), delay);
+}
+
function truncate(v) {
return (v > 0 ? Math.floor : Math.ceil)(v);
}
+function distinct(array, key, filter) {
+ const dict = Object.create(null);
+ for (let item of array) {
+ const v = typeof filter === 'function' ? filter(item) : item[key];
+ const val = v?.value ?? v;
+ if (!Object.prototype.hasOwnProperty.call(dict, val)) {
+ dict[val] = v;
+ }
+ }
+ return Object.values(dict);
+}
+
function isEmail(text) {
return /^\w[-\w.+]*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/.test(text);
}
@@ -65,7 +85,9 @@ export {
isMobile,
// functions
throttle,
+ debounce,
truncate,
+ distinct,
isEmail,
isPhone
}
\ No newline at end of file