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

fix: wrap style in drop column.

Browse Source 
fix: also change `DisplayValue` after changed.
feature: support uncompressed export.
change: add `editing` parameter in GridColumn.setEnabled.
This commit is contained in:
Chen Lily 2024-03-08 17:26:38 +08:00
parent 70ab06190f
commit f54eb3ac24
4 changed files with 112 additions and 41 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
lib/ui/css/grid.scss
View File

@ -127,9 +127,9 @@
}
>svg {
width: 14px;
min-width: 14px;
height: 14px;
width: 12px;
min-width: 12px;
height: 12px;
margin-left: 4px;
fill: var(--split-border-color);
}
@ -421,10 +421,10 @@
overflow: hidden;
text-overflow: ellipsis;
white-space: pre;
}
&.wrap {
@include wrap();
}
&.wrap>span {
@include wrap();
}
}

14
lib/ui/dropdown.js
View File

@ -321,11 +321,17 @@ export class Dropdown {
this._var.label.innerText = text;
}
if (expanded) {
const val = selected.replace(/"/g, '\\"');
const li = this._var.container.querySelector(`li[data-value="${val}"]`);
if (li != null) {
li.classList.add('selected');
for (let li of this._var.container.querySelectorAll('li[data-value]')) {
if (li.dataset.value === selected) {
li.classList.add('selected');
break;
}
}
// const val = selected.replace(/"/g, '\\"');
// const li = this._var.container.querySelector(`li[data-value="${val}"]`);
// if (li != null) {
// li.classList.add('selected');
// }
}
}
this._var.selected = item;

9
lib/ui/grid/column.js
View File

@ -140,6 +140,7 @@ export class GridColumn {
* 设置单元格可用性时调用的方法
* @param {HTMLElement} element - 单元格元素
* @param {boolean} enabled - 启用值，为 `false` 时代表禁用
* @param {boolean} editing - 是否处于编辑状态
* @virtual
*/
static setEnabled(element, enabled) {
@ -190,6 +191,9 @@ export class GridColumn {
}
if (hasValue) {
val.Value = value;
if (Object.prototype.hasOwnProperty.call(val, 'DisplayValue')) {
val.DisplayValue = value;
}
} else {
wrapper.values[key] = value;
}
@ -478,7 +482,10 @@ export class GridDropdownColumn extends GridColumn {
* @returns {any}
*/
static getValue(e, col) {
return e[col.dropOptions?.valueKey ?? 'value'];
return {
value: e[col.dropOptions?.valueKey ?? 'value'],
text: e[col.dropOptions?.textKey ?? 'text']
};
}
/**

118
lib/ui/grid/grid.js
View File

@ -2092,10 +2092,69 @@ export class Grid {
* }>
* }
* ```
* @param {boolean} compressed - 是否压缩
* @returns {Promise<Uint8Array>} 返回 `Uint8Array` 数据对象
* @since 1.0.2
*/
export() {
export(compressed) {
const data = {
columns: this.columns.map(c => ({
key: c.key,
type: c.type?.toString(),
caption: c.caption,
width: c.width,
align: c.align,
visible: c.visible
})),
source: this.source.map(s => {
const item = Object.create(null);
for (let c of this.columns) {
if (c.key == null) {
continue;
}
let val;
if (c.text != null) {
val = c.text;
} else if (typeof c.filter === 'function') {
val = c.filter(s, false, this._var.refs.body);
} else {
val = s[c.key];
if (val != null) {
if (Object.prototype.hasOwnProperty.call(val, 'DisplayValue')) {
val = val.DisplayValue;
} else if (Array.isArray(val)) {
val = val.join(', ');
}
}
}
val ??= '';
item[c.key] = val;
}
for (let prop of Object.keys(s)) {
if (Object.prototype.hasOwnProperty.call(item, prop)) {
continue;
}
let val;
val = s[prop];
if (val != null) {
if (Object.prototype.hasOwnProperty.call(val, 'DisplayValue')) {
val = val.DisplayValue;
}
}
item[prop] = val;
}
return item;
}),
rowHeight: this.rowHeight,
sortDirection: this.sortDirection,
sortKey: this.sortKey,
sortArray: this.sortArray
};
if (compressed === false) {
const encoder = new TextEncoder();
const uncompressed = encoder.encode(JSON.stringify(data));
return Promise.resolve(uncompressed);
}
const js = new Blob(['function h(e,t,o){if(null==e)return"";let r;const l={},h={};let s="",n="",p="",a=2,f=3,c=2;const u=[];let i=0,d=0;for(let w=0;w<e.length;w+=1)if(s=e.charAt(w),Object.prototype.hasOwnProperty.call(l,s)||(l[s]=f++,h[s]=!0),n=p+s,Object.prototype.hasOwnProperty.call(l,n))p=n;else{if(Object.prototype.hasOwnProperty.call(h,p)){if(p.charCodeAt(0)<256){for(let e=0;e<c;e++)i<<=1,d==t-1?(d=0,u.push(o(i)),i=0):d++;r=p.charCodeAt(0);for(let e=0;e<8;e++)i=i<<1|1&r,d==t-1?(d=0,u.push(o(i)),i=0):d++,r>>=1}else{r=1;for(let e=0;e<c;e++)i=i<<1|r,d==t-1?(d=0,u.push(o(i)),i=0):d++,r=0;r=p.charCodeAt(0);for(let e=0;e<16;e++)i=i<<1|1&r,d==t-1?(d=0,u.push(o(i)),i=0):d++,r>>=1}0==--a&&(a=Math.pow(2,c),c++),delete h[p]}else{r=l[p];for(let e=0;e<c;e++)i=i<<1|1&r,d==t-1?(d=0,u.push(o(i)),i=0):d++,r>>=1}0==--a&&(a=Math.pow(2,c),c++),l[n]=f++,p=String(s)}if(""!==p){if(Object.prototype.hasOwnProperty.call(h,p)){if(p.charCodeAt(0)<256){for(let e=0;e<c;e++)i<<=1,d==t-1?(d=0,u.push(o(i)),i=0):d++;r=p.charCodeAt(0);for(let e=0;e<8;e++)i=i<<1|1&r,d==t-1?(d=0,u.push(o(i)),i=0):d++,r>>=1}else{r=1;for(let e=0;e<c;e++)i=i<<1|r,d==t-1?(d=0,u.push(o(i)),i=0):d++,r=0;r=p.charCodeAt(0);for(let e=0;e<16;e++)i=i<<1|1&r,d==t-1?(d=0,u.push(o(i)),i=0):d++,r>>=1}0==--a&&(a=Math.pow(2,c),c++),delete h[p]}else{r=l[p];for(let e=0;e<c;e++)i=i<<1|1&r,d==t-1?(d=0,u.push(o(i)),i=0):d++,r>>=1}0==--a&&(a=Math.pow(2,c),c++)}r=2;for(let e=0;e<c;e++)i=i<<1|1&r,d==t-1?(d=0,u.push(o(i)),i=0):d++,r>>=1;let w=!0;do{i<<=1,d==t-1?(u.push(o(i)),w=!1):d++}while(w);return u.join("")}function s(e){return null==e?"":h(e,16,e=>String.fromCharCode(e))}function i(e){const t=s(e),o=new Uint8Array(2*t.length);for(let e=0,r=t.length;e<r;e++){const r=t.charCodeAt(e);o[2*e]=r>>>8,o[2*e+1]=r%256}return o}self.addEventListener("message",function(e){this.self.postMessage(i(e.data))},!1);']);
return new Promise((resolve, reject) => {
let working;
@ -2112,12 +2171,12 @@ export class Grid {
URL.revokeObjectURL(url);
next(data);
}
// 超过 10 秒则拒绝
// 超过 60 秒则拒绝
const timer = setTimeout(() => {
if (working) {
terminate(reject, { message: 'timeout' });
}
}, 10000);
}, 60000);
worker.addEventListener('message', e => {
if (working) {
clearTimeout(timer);
@ -2131,21 +2190,7 @@ export class Grid {
}
})
working = true;
worker.postMessage(JSON.stringify({
columns: this.columns.map(c => ({
key: c.key,
type: c.type?.toString(),
caption: c.caption,
width: c.width,
align: c.align,
visible: c.visible
})),
source: this.source,
rowHeight: this.rowHeight,
sortDirection: this.sortDirection,
sortKey: this.sortKey,
sortArray: this.sortArray
}));
worker.postMessage(JSON.stringify(data));
});
}
@ -2693,10 +2738,12 @@ export class Grid {
val = col.filter(item, selected, this._var.refs.body);
} else {
val = item[col.key];
if (val?.DisplayValue != null) {
val = val.DisplayValue;
} else if (Array.isArray(val)) {
val = val.join(', ');
if (val != null) {
if (Object.prototype.hasOwnProperty.call(val, 'DisplayValue')) {
val = val.DisplayValue;
} else if (Array.isArray(val)) {
val = val.join(', ');
}
}
}
val ??= '';
@ -2768,9 +2815,6 @@ export class Grid {
delete virtualCell.value;
delete virtualCell.enabled;
}
if (typeof type.setEditing === 'function') {
type.setEditing(element, selected);
}
}
if (val !== virtualCell.value) {
virtualCell.value = val;
@ -2792,9 +2836,12 @@ export class Grid {
}
if (enabled !== virtualCell.enabled) {
virtualCell.enabled = enabled;
type.setEnabled(element, enabled);
type.setEnabled(element, enabled, selected);
}
}
if (stateChanged && typeof type.setEditing === 'function') {
type.setEditing(element, selected);
}
let tip = col.tooltip;
if (typeof tip === 'function') {
tip = tip.call(col, item);
@ -2884,7 +2931,7 @@ export class Grid {
return;
}
let val = this.total[col.key];
if (val?.DisplayValue != null) {
if (Object.prototype.hasOwnProperty.call(val, 'DisplayValue')) {
val = val.DisplayValue;
}
val ??= '';
@ -4007,18 +4054,29 @@ export class Grid {
enabled = item[enabled];
}
if (enabled !== false) {
let v;
let t;
if (value != null) {
v = Object.prototype.hasOwnProperty.call(value, 'value') ? value.value : value;
t = Object.prototype.hasOwnProperty.call(value, 'text') ? value.text : value;
} else {
v = t = value;
}
const val = item[col.key];
if (val != null && Object.prototype.hasOwnProperty.call(val, 'Value')) {
oldValue ??= val.Value;
val.Value = value;
val.Value = v;
if (Object.prototype.hasOwnProperty.call(val, 'DisplayValue')) {
val.DisplayValue = t;
}
} else {
oldValue ??= val;
item[col.key] = value;
item[col.key] = v;
}
const virtualRow = this._var.virtualRows[index];
const virtualCell = virtualRow.cells[col.key];
if (virtualCell != null) {
virtualCell.value = value;
virtualCell.value = v;
}
let tip = col.tooltip;
if (typeof tip === 'function') {