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

optimized

Browse Source
This commit is contained in:
Tsanie Lily 2023-04-06 00:08:03 +08:00
parent adb74b7441
commit c27d44872b
11 changed files with 314 additions and 91 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
css/grid.scss
View File

@ -105,7 +105,11 @@
align-items: center; align-items: center;
padding: var(--header-padding); padding: var(--header-padding);
box-sizing: border-box; box-sizing: border-box;
overflow-x: hidden; // overflow-x: hidden;
>span {
overflow: hidden;
}
} }
>.arrow { >.arrow {

23
lib/ui/checkbox.html
View File

@ -22,43 +22,43 @@
onchange?: (this: HTMLInputElement, ev: Event) => any; onchange?: (this: HTMLInputElement, ev: Event) => any;
}</pre> }</pre>
</p> </p>
<h3>type?: string</h3> <h4>type?: string</h4>
<p> <p>
复选框图标的样式，可选值目前有 <code>fa-regular</code>、<code>fa-light</code>、<code>fa-solid</code> 复选框图标的样式，可选值目前有 <code>fa-regular</code>、<code>fa-light</code>、<code>fa-solid</code>
</p> </p>
<h3>label?: string | HTMLElement</h3> <h4>label?: string | HTMLElement</h4>
<p> <p>
复选框的标签文本，或者想要呈现的元素 复选框的标签文本，或者想要呈现的元素
</p> </p>
<h3>checked?: boolean</h3> <h4>checked?: boolean</h4>
<p> <p>
初始是否选中 初始是否选中
</p> </p>
<h3>isImage?: boolean</h3> <h4>isImage?: boolean</h4>
<p> <p>
是否为图片复选框 是否为图片复选框
</p> </p>
<h3>imageHeight?: Number</h3> <h4>imageHeight?: Number</h4>
<p> <p>
为图片复选框时的图片限制高度 为图片复选框时的图片限制高度
</p> </p>
<h3>checkedNode?: HTMLElement</h3> <h4>checkedNode?: HTMLElement</h4>
<p> <p>
为图片复选框时的选中时显示的元素 为图片复选框时的选中时显示的元素
</p> </p>
<h3>uncheckedNode?: HTMLElement</h3> <h4>uncheckedNode?: HTMLElement</h4>
<p> <p>
为图片复选框时的未选中时显示的元素 为图片复选框时的未选中时显示的元素
</p> </p>
<h3>customerAttributes?: { [key: string]: string }</h3> <h4>customerAttributes?: { [key: string]: string }</h4>
<p> <p>
自定义属性，例如 自定义属性，例如
<pre>{ <pre>{
'data-id': 'xxxxxx', 'data-id': 'xxxxxx',
'disabled': '' 'disabled': ''
}</pre> }</pre>
</p> </p>
<h3>onchange?: (this: HTMLInputElement, ev: Event) => any</h3> <h4>onchange?: (this: HTMLInputElement, ev: Event) => any</h4>
<p> <p>
复选框改变时触发的事件 复选框改变时触发的事件
</p> </p>
@ -66,7 +66,8 @@
<code>function resolveCheckbox(container?: HTMLElement, legacy?: boolean): HTMLElement</code> <code>function resolveCheckbox(container?: HTMLElement, legacy?: boolean): HTMLElement</code>
<h3>container?: HTMLElement</h3> <h3>container?: HTMLElement</h3>
<p> <p>
将把此 HTML 元素，为 null 则把 document.body 下的所有 <code>label[data-checkbox]</code> 元素解析为复选框，<code>[data-id]</code> 为复选框元素的 id，包含 将把此 HTML 元素，为 null 则把 document.body 下的所有 <code>label[data-checkbox]</code> 元素解析为复选框，<code>[data-id]</code> 为复选框元素的
id，包含
<code>[data-checked]</code> 时复选框默认选中。 <code>[data-checked]</code> 时复选框默认选中。
</p> </p>
<p>当该元素无子元素时，<code>[data-type]</code> 同上述参数中的 <code>type?: string</code>，<code>[data-label]</code> 同上述参数中的 <p>当该元素无子元素时，<code>[data-type]</code> 同上述参数中的 <code>type?: string</code>，<code>[data-label]</code> 同上述参数中的

4
lib/ui/dropdown.d.ts vendored
View File

@ -4,7 +4,7 @@ interface DropdownItem {
html?: HTMLElement html?: HTMLElement
} }
interface DropdownOptions { export interface DropdownOptions {
textkey?: string; textkey?: string;
valuekey?: string; valuekey?: string;
htmlkey?: string; htmlkey?: string;
@ -32,7 +32,7 @@ interface Dropdown {
get disabled(): boolean; get disabled(): boolean;
set disabled(flag: boolean); set disabled(flag: boolean);
get source(): Array<DropdownItem | any>; get source(): Array<DropdownItem | any>;
set source(list: Array<DropdownItem | any>): void; set source(list: Array<DropdownItem | any>);
readonly multiselect: boolean; readonly multiselect: boolean;
readonly selected: DropdownItem | any; readonly selected: DropdownItem | any;
readonly selectedlist: Array<DropdownItem | any>; readonly selectedlist: Array<DropdownItem | any>;

32
lib/ui/dropdown.html
View File

@ -28,67 +28,67 @@
parent?: HTMLElement; parent?: HTMLElement;
}</pre> }</pre>
</p> </p>
<h3>textkey?: string</h3> <h4>textkey?: string</h4>
<p> <p>
数据源中用以显示的属性，默认为 <code>text</code> 数据源中用以显示的属性，默认为 <code>text</code>
</p> </p>
<h3>valuekey?: string</h3> <h4>valuekey?: string</h4>
<p> <p>
数据源中作为值的属性，默认为 <code>value</code> 数据源中作为值的属性，默认为 <code>value</code>
</p> </p>
<h3>htmlkey?: string</h3> <h4>htmlkey?: string</h4>
<p> <p>
数据源中用来以 html 方式呈现的属性，默认为 <code>html</code> 数据源中用来以 html 方式呈现的属性，默认为 <code>html</code>
</p> </p>
<h3>maxlength?: Number</h3> <h4>maxlength?: Number</h4>
<p> <p>
作为输入类型时的最大允许字符数，默认为 500 作为输入类型时的最大允许字符数，默认为 500
</p> </p>
<h3>multiselect?: boolean</h3> <h4>multiselect?: boolean</h4>
<p> <p>
是否允许多选，仅在选择类型下有效 是否允许多选，仅在选择类型下有效
</p> </p>
<h3>selected?: string</h3> <h4>selected?: string</h4>
<p> <p>
默认选中的项目的值 默认选中的项目的值
</p> </p>
<h3>selectedlist?: Array&lt;DropdownItem | any&gt;</h3> <h4>selectedlist?: Array&lt;DropdownItem | any&gt;</h4>
<p> <p>
多选时默认选中的项目的值的列表 多选时默认选中的项目的值的列表
</p> </p>
<h3>disabled?: boolean</h3> <h4>disabled?: boolean</h4>
<p> <p>
初始化时下拉框是否禁用 初始化时下拉框是否禁用
</p> </p>
<h3>input?: boolean</h3> <h4>input?: boolean</h4>
<p> <p>
是否为输入类型 是否为输入类型
</p> </p>
<h3>search?: boolean</h3> <h4>search?: boolean</h4>
<p> <p>
是否允许搜索 是否允许搜索
</p> </p>
<h3>searchkeys?: Array&lt;string&gt;</h3> <h4>searchkeys?: Array&lt;string&gt;</h4>
<p> <p>
搜索时搜索的数据源属性的列表，默认为 <code>[valuekey]</code> 搜索时搜索的数据源属性的列表，默认为 <code>[valuekey]</code>
</p> </p>
<h3>searchplaceholder?: string</h3> <h4>searchplaceholder?: string</h4>
<p> <p>
搜索输入框的占位字符串 搜索输入框的占位字符串
</p> </p>
<h3>tabindex?: Number</h3> <h4>tabindex?: Number</h4>
<p> <p>
下拉框的焦点顺序 下拉框的焦点顺序
</p> </p>
<h3>placeholder?: string</h3> <h4>placeholder?: string</h4>
<p> <p>
作为输入类型时，输入框的占位字符串 作为输入类型时，输入框的占位字符串
</p> </p>
<h3>slidefixed?: boolean</h3> <h4>slidefixed?: boolean</h4>
<p> <p>
下拉方向是否固定为下 下拉方向是否固定为下
</p> </p>
<h3>parent?: HTMLElement</h3> <h4>parent?: HTMLElement</h4>
<p> <p>
下拉列表呈现的父容器，默认为 <code>document.body</code> 下拉列表呈现的父容器，默认为 <code>document.body</code>
</p> </p>

7
lib/ui/dropdown.js
View File

@ -231,8 +231,7 @@ class Dropdown {
let item = this.source.find(it => it[valuekey] === selected); let item = this.source.find(it => it[valuekey] === selected);
if (this.#options.input) { if (this.#options.input) {
if (item == null) { if (item == null) {
item = {}; item = { [valuekey]: selected };
item[valuekey] = selected;
} }
this.#label.value = selected; this.#label.value = selected;
} else { } else {
@ -266,9 +265,7 @@ class Dropdown {
const itemlist = selectedlist.map(v => { const itemlist = selectedlist.map(v => {
let item = source.find(it => it[valuekey] === v); let item = source.find(it => it[valuekey] === v);
if (item == null) { if (item == null) {
item = {}; item = { [valuekey]: v, [textkey]: v };
item[valuekey] = v;
item[textkey] = v;
} }
return item; return item;
}); });

81
lib/ui/grid.d.ts vendored
View File

@ -1,16 +1,59 @@
interface GridColumn { import { DropdownOptions } from "./dropdown";
static create(): HTMLElement;
static setValue(element: HTMLElement, val: any): void; interface GridItem {
static setStyle(element: HTMLElement, style: { [key: string]: string }): void; value: any;
displayValue: string;
} }
interface GridColumn { declare var GridColumn: {
create(): HTMLElement;
createEdit(trigger: (e: any) => void, col: GridColumnDefinition, body: HTMLElement): HTMLElement;
setValue(element: HTMLElement, val: any): void;
getValue(e: any): any;
setStyle(element: HTMLElement, style: { [key: string]: string }): void;
setEnabled(element: HTMLElement, enabled?: boolean): void;
}
interface GridColumnType {
0: "Common";
1: "Input";
2: "Dropdown";
3: "Checkbox";
4: "Icon";
}
interface GridColumnDefinition {
key?: string; key?: string;
type?: keyof GridColumnType | typeof GridColumn;
caption?: string;
width?: Number;
align?: "left" | "center" | "right";
enabled?: boolean | string;
css?: { [key: string]: string };
styleFilter?: (item: GridItem | any) => { [key: string]: string };
textStyle?: { [key: string]: string };
visible?: boolean;
resizable?: boolean;
sortable?: boolean;
orderable?: boolean;
allcheck?: boolean;
events?: { [event: string]: any };
attrs?: { [key: string]: string } | ((item: GridItem | any) => { [key: string]: string });
// TODO: allowFilter?: boolean;
filter?: (item: GridItem | any) => any;
sortFilter?: (a: GridItem | any, b: GridItem | any) => -1 | 0 | 1;
bgFilter?: (item: GridItem | any) => string;
dropOptions?: DropdownOptions;
source?: Array<any> | ((item: GridItem | any) => Array<any>);
iconType?: string;
text?: string;
tooltip?: string;
onallchecked?: (this: Grid, col: GridColumnDefinition, flag: boolean) => void;
onchanged?: (this: Grid, item: GridItem | any, value: boolean | any) => void;
} }
interface GridColumnDirection { interface GridColumnDirection {
[-1]: Number, [-1]: Number,
0: Number,
1: Number 1: Number
} }
@ -21,7 +64,7 @@ interface GridColumnColumnEventMap {
} }
interface Grid { interface Grid {
columns: Array<GridColumn>; columns: Array<GridColumnDefinition>;
langs?: { all: string, ok: string, reset: string }; langs?: { all: string, ok: string, reset: string };
virtualCount?: Number; virtualCount?: Number;
rowHeight?: Number; rowHeight?: Number;
@ -43,10 +86,26 @@ interface Grid {
rowDblClicked?: (index: Number) => void; rowDblClicked?: (index: Number) => void;
columnChanged?: <K extends keyof GridColumnColumnEventMap>(type: K, index: Number, value: Number | keyof GridColumnDirection) => void; columnChanged?: <K extends keyof GridColumnColumnEventMap>(type: K, index: Number, value: Number | keyof GridColumnDirection) => void;
source(): Array<any>; get source(): Array<GridItem | any>;
source(list: Array<any>): void; set source(list: Array<GridItem | any>);
get selectedIndexes(): Array<Number>;
set selectedIndexes(indexes: Array<Number>);
get loading(): boolean;
set loading(flag: boolean);
get scrollTop(): Number;
set scrollTop(top: Number);
readonly virtual: boolean;
readonly sortKey: string | undefined;
readonly selectedIndex: Number | -1;
init(container?: HTMLElement): void;
scrollToIndex(index: Number): void;
resize(force?: boolean): void;
reload(): void;
refresh(): void;
resetChange(): void;
sortColumn(reload?: boolean): void;
} }
declare var Grid: { declare var Grid: {
@ -58,7 +117,7 @@ declare var Grid: {
Icon: 4, Icon: 4,
isCheckbox(type: Number): boolean; isCheckbox(type: Number): boolean;
}; };
GridColumn: GridColumn; GridColumn: typeof GridColumn;
new(container: HTMLElement): Grid; new(container: HTMLElement): Grid;
} }

133
lib/ui/grid.html
View File

@ -4,6 +4,137 @@
<p> <p>
创建一个统一样式的滚动列表元素。 创建一个统一样式的滚动列表元素。
</p> </p>
<h2>constructor</h2>
<code>new(container: HTMLElement): Grid</code>
<h3>container: HTMLElement</h3>
<p>
父容器元素，Grid 将创建在此元素之内
</p>
<h2>init</h2>
<code>init(container?: HTMLElement): void</code>
<h3>container?: HTMLElement</h3>
<p>
父容器元素，默认使用构造函数中传递的值
</p>
<h2>scrollToIndex</h2>
<code>scrollToIndex(index: Number): void</code>
<h3>index: Number</h3>
<p>
将滚动至此行
</p>
<h2>resize</h2>
<code>resize(force?: boolean): void</code>
<h3>force?: boolean</h3>
<p>
重新计算大小，参数表示是否强制重载
</p>
<h2>reload</h2>
<code>reload(): void</code>
<p>
重载表格元素
</p>
<h2>refresh</h2>
<code>refresh(): void</code>
<p>
刷新表格单元格值
</p>
<h2>resetChange</h2>
<code>resetChange(): void</code>
<p>
还原表格修改状态，置为未修改
</p>
<h2>sortColumn</h2>
<code>sortColumn(reload?: boolean): void</code>
<h3>reload?: boolean</h3>
<p>
根据当前设定的排序列排序，参数表示是否重载表格
</p>
<hr />
<h2>sortIndex</h2>
<code>sortIndex?: Number</code>
<p>
排序的列序号
</p>
<h2>sortDirection</h2>
<code>sortDirection?: keyof GridColumnDirection</code>
<p>
排序的方向，可选值为 <code>-1: desc</code>、<code>1: asc</code>
</p>
<h2>columns</h2>
<code>columns: Array&lt;GridColumnDefinition&gt;</code>
<p>
表格列的定义，结构为
<pre>interface GridColumnDefinition {
key?: string;
type?: keyof GridColumnType | typeof GridColumn;
caption?: string;
width?: Number;
align?: "left" | "center" | "right";
enabled?: boolean | string;
css?: { [key: string]: string };
styleFilter?: (item: GridItem | any) => { [key: string]: string };
textStyle?: { [key: string]: string };
visible?: boolean;
resizable?: boolean;
sortable?: boolean;
orderable?: boolean;
allcheck?: boolean;
events?: { [event: string]: any };
attrs?: { [key: string]: string } | ((item: GridItem | any) => { [key: string]: string });
filter?: (item: GridItem | any) => any;
sortFilter?: (a: GridItem | any, b: GridItem | any) => -1 | 0 | 1;
bgFilter?: (item: GridItem | any) => string;
dropOptions?: DropdownOptions;
source?: Array&lt;any&gt; | ((item: GridItem | any) => Array&lt;any&gt;);
iconType?: string;
text?: string;
tooltip?: string;
onallchecked?: (this: Grid, col: GridColumnDefinition, flag: boolean) => void;
onchanged?: (this: Grid, item: GridItem | any, value: boolean | any) => void;
}</pre>
</p>
<h3>key</h3>
<code>key?: string</code>
<p>关键字</p>
<h3>type</h3>
<code>type?: keyof GridColumnType | typeof GridColumn</code>
<p>列类型，可以为 <code>Grid.ColumnTypes</code> 枚举值表示内置的通用、输入、下拉、复选框、图标等类型
<pre>declare var ColumnTypes: {
Common: 0,
Input: 1,
Dropdown: 2,
Checkbox: 3,
Icon: 4,
isCheckbox(type: Number): boolean;
}</pre>也可以为符合 <code>GridColumn</code> 接口的类或对象表示自定义类型，接口定义如下
<pre>interface GridColumn {
static create(): HTMLElement;
static createEdit(trigger: (e: any) => void, col: GridColumnDefinition, body: HTMLElement): HTMLElement;
static setValue(element: HTMLElement, val: any): void;
static getValue(e: any): any;
static setStyle(element: HTMLElement, style: { [key: string]: string }): void;
static setEnabled(element: HTMLElement, enabled?: boolean): void;
}</pre>
</p>
<h4>create</h4>
<code>static create(): HTMLElement</code>
<p>创建只读状态的单元格元素</p>
<h4>createEdit</h4>
<code>static createEdit(trigger: (e: any) => void, col: GridColumnDefinition, body: HTMLElement): HTMLElement</code>
<p>创建编辑状态的单元格元素</p>
<samp>trigger: (e: any) => void</samp>
<p>用以触发 Grid 的列修改事件 <code>columnChanged</code> 的函数代理</p>
<samp>col: GridColumnDefinition</samp>
<p>当前列的定义对象</p>
<samp>body: HTMLElement</samp>
<p>Grid 正文表格元素</p>
<h4>setValue</h4>
<code>static setValue(element: HTMLElement, val: any): void</code>
<p>设置单元格值时触发的函数</p>
<samp>element: HTMLElement</samp>
<p>单元格元素</p>
<samp>val: any</samp>
<p>单元格的值</p>
<hr /> <hr />
<h2>示例</h2> <h2>示例</h2>
<pre></pre> <pre></pre>
@ -38,7 +169,7 @@
grid.allowHtml = true; grid.allowHtml = true;
grid.height = 0; grid.height = 0;
grid.columns = [ grid.columns = [
{ key: 'c1', caption: 'column 122222222311111111111111111' }, { key: 'c1', caption: 'column 122222222311111111111111111', shrink: true },
{ key: 'c2', caption: '选择', allcheck: true, type: Grid.ColumnTypes.Checkbox, enabled: 'enabled' }, { key: 'c2', caption: '选择', allcheck: true, type: Grid.ColumnTypes.Checkbox, enabled: 'enabled' },
{ {
key: 'c2a', key: 'c2a',

75
lib/ui/grid.js
View File

@ -78,8 +78,8 @@ class GridInputColumn extends GridColumn {
const SymbolDropdown = Symbol.for('ui-dropdown'); const SymbolDropdown = Symbol.for('ui-dropdown');
class GridDropdownColumn extends GridColumn { class GridDropdownColumn extends GridColumn {
static createEdit(trigger, parent) { static createEdit(trigger, col, parent) {
const drop = new Dropdown({ parent }); const drop = new Dropdown({ ...col.dropOptions, parent });
drop.onselected = trigger; drop.onselected = trigger;
return drop.create(); return drop.create();
} }
@ -459,7 +459,7 @@ class Grid {
if (this.#needResize && widths.flag) { if (this.#needResize && widths.flag) {
this.#needResize = false; this.#needResize = false;
this.columns.forEach((col, i) => { this.columns.forEach((col, i) => {
if (!col.autoResize) { if (!this.#get(col.key, 'autoResize')) {
return; return;
} }
let width = widths[i]; let width = widths[i];
@ -535,7 +535,7 @@ class Grid {
return a === b ? 0 : (a > b ? 1 : -1) * direction; return a === b ? 0 : (a > b ? 1 : -1) * direction;
}; };
} else { } else {
comparer = (a, b) => col.sortFilter(a, b) * direction; comparer = (a, b) => col.sortFilter(a.values, b.values) * direction;
} }
this.#source.sort(comparer); this.#source.sort(comparer);
// TODO: filter to currentSource; // TODO: filter to currentSource;
@ -566,10 +566,10 @@ class Grid {
} }
// style // style
const isCheckbox = Grid.ColumnTypes.isCheckbox(col.type); const isCheckbox = Grid.ColumnTypes.isCheckbox(col.type);
if (col.width > 0 || col.shrink) { if (col.width > 0) {
col.autoResize = false; // col.autoResize = false;
} else { } else {
col.autoResize = true; this.#set(col.key, 'autoResize', true);
this.#needResize = true; this.#needResize = true;
sizer.innerText = col.caption ?? ''; sizer.innerText = col.caption ?? '';
let width = sizer.offsetWidth + 22; let width = sizer.offsetWidth + 22;
@ -585,22 +585,19 @@ class Grid {
if (col.sortable !== false) { if (col.sortable !== false) {
col.sortable = true; col.sortable = true;
} }
if (col.shrink) { const w = `${col.width}px`;
col.style = { 'text-align': col.align }; const style = {
} else { 'width': w,
const w = `${col.width}px`; 'max-width': w,
col.style = { 'min-width': w,
'width': w, 'text-align': col.align
'max-width': w, };
'min-width': w, this.#set(col.key, 'style', style);
'text-align': col.align
};
}
// element // element
const th = document.createElement('th'); const th = document.createElement('th');
th.className = 'column'; th.className = 'column';
th.dataset.key = col.key; th.dataset.key = col.key;
for (let css of Object.entries(col.style)) { for (let css of Object.entries(style)) {
th.style.setProperty(css[0], css[1]); th.style.setProperty(css[0], css[1]);
} }
if (col.sortable) { if (col.sortable) {
@ -741,8 +738,9 @@ class Grid {
const cell = document.createElement('td'); const cell = document.createElement('td');
if (col.visible !== false) { if (col.visible !== false) {
cell.keyid = ((exists + i) << MaxColumnBit) | j; cell.keyid = ((exists + i) << MaxColumnBit) | j;
if (col.style != null) { const style = this.#get(col.key, 'style');
for (let css of Object.entries(col.style)) { if (style != null) {
for (let css of Object.entries(style)) {
cell.style.setProperty(css[0], css[1]); cell.style.setProperty(css[0], css[1]);
} }
} }
@ -836,7 +834,7 @@ class Grid {
let element; let element;
if (!isCheckbox && selectChanged && typeof type.createEdit === 'function') { if (!isCheckbox && selectChanged && typeof type.createEdit === 'function') {
element = selected ? element = selected ?
type.createEdit(e => this.#onRowChanged(e, startIndex + i, col, type.getValue(e)), this.#refs.bodyContent) : type.createEdit(e => this.#onRowChanged(e, startIndex + i, col, type.getValue(e)), col, this.#refs.bodyContent) :
type.create(col); type.create(col);
cell.replaceChildren(element); cell.replaceChildren(element);
} else { } else {
@ -856,7 +854,7 @@ class Grid {
type.setEnabled(element, enabled); type.setEnabled(element, enabled);
} }
// auto resize // auto resize
if (this.#needResize && col.autoResize) { if (this.#needResize && this.#get(col.key, 'autoResize')) {
const width = element.scrollWidth + 12; const width = element.scrollWidth + 12;
if (width > 0 && widths != null && (isNaN(widths[j]) || widths[j] < width)) { if (width > 0 && widths != null && (isNaN(widths[j]) || widths[j] < width)) {
widths[j] = width; widths[j] = width;
@ -893,9 +891,10 @@ class Grid {
// const oldwidth = col.width; // const oldwidth = col.width;
const w = `${width}px`; const w = `${width}px`;
col.width = width; col.width = width;
col.style.width = w; const style = this.#get(col.key, 'style');
col.style['max-width'] = w; style.width = w;
col.style['min-width'] = w; style['max-width'] = w;
style['min-width'] = w;
let element = this.#refs.header.children[index]; let element = this.#refs.header.children[index];
element.style.width = w; element.style.width = w;
element.style.maxWidth = w; element.style.maxWidth = w;
@ -1060,6 +1059,23 @@ class Grid {
return top; return top;
} }
#get(key, name) {
const attr = this.#colAttrs[key];
if (attr == null) {
return null;
}
return attr[name];
}
#set(key, name, value) {
const attr = this.#colAttrs[key];
if (attr == null) {
this.#colAttrs[key] = { [name]: value };
} else {
attr[name] = value;
}
}
#getRowTarget(target) { #getRowTarget(target) {
let parent; let parent;
while ((parent = target.parentElement) != null && !parent.classList.contains('grid-row')) { while ((parent = target.parentElement) != null && !parent.classList.contains('grid-row')) {
@ -1073,8 +1089,7 @@ class Grid {
} }
#onHeaderClicked(e, col, force) { #onHeaderClicked(e, col, force) {
const attr = this.#colAttrs[col.key]; if (!force && (this.#get(col.key, 'resizing') || this.#get(col.key, 'dragging'))) {
if (!force && attr != null && (attr.resizing || attr.dragging)) {
return; return;
} }
if (!this.#notHeader(e.target.tagName)) { if (!this.#notHeader(e.target.tagName)) {
@ -1185,7 +1200,7 @@ class Grid {
setTimeout(() => delete attr.resizing); setTimeout(() => delete attr.resizing);
if (attr.sizing) { if (attr.sizing) {
delete attr.sizing; delete attr.sizing;
col.autoResize = false; delete attr.autoResize;
this.#changeColumnWidth(index, width); this.#changeColumnWidth(index, width);
if (typeof this.columnChanged === 'function') { if (typeof this.columnChanged === 'function') {
this.columnChanged(ColumnChangedType.Resize, index, width); this.columnChanged(ColumnChangedType.Resize, index, width);
@ -1379,6 +1394,7 @@ class Grid {
} }
} }
} }
#onRowDblClicked(e) { #onRowDblClicked(e) {
if (e.target.tagName === 'INPUT') { if (e.target.tagName === 'INPUT') {
return; return;
@ -1394,6 +1410,7 @@ class Grid {
} }
} }
} }
#onRowChanged(_e, index, col, value) { #onRowChanged(_e, index, col, value) {
if (this.#currentSource == null) { if (this.#currentSource == null) {
return; return;

4
lib/utility/lgres.html
View File

@ -42,11 +42,11 @@
callback?: (result: any) => void callback?: (result: any) => void
}</pre> }</pre>
</p> </p>
<h3>template?: string</h3> <h4>template?: string</h4>
<p> <p>
语言资源文件的后缀，资源文件 url 为 <code>`language/${lgid}${template}`</code> 语言资源文件的后缀，资源文件 url 为 <code>`language/${lgid}${template}`</code>
</p> </p>
<h3>callback?: (result: any) => void</h3> <h4>callback?: (result: any) => void</h4>
<p> <p>
资源初始化后的回调函数，可能在 DOM 加载完成之前触发。 资源初始化后的回调函数，可能在 DOM 加载完成之前触发。
</p> </p>

12
lib/utility/request.html
View File

@ -22,19 +22,19 @@
progress?: (this: XMLHttpRequestUpload, ev: ProgressEvent&lt;XMLHttpRequestEventTarget&gt;) => any progress?: (this: XMLHttpRequestUpload, ev: ProgressEvent&lt;XMLHttpRequestEventTarget&gt;) => any
}</pre> }</pre>
</p> </p>
<h3>method?: string</h3> <h4>method?: string</h4>
<p> <p>
请求类型，默认为 GET 或 POST 请求类型，默认为 GET 或 POST
</p> </p>
<h3>accept?: string</h3> <h4>accept?: string</h4>
<p> <p>
Accept 请求头的值 Accept 请求头的值
</p> </p>
<h3>contentType?: string</h3> <h4>contentType?: string</h4>
<p> <p>
Content-Type 请求头的值 Content-Type 请求头的值
</p> </p>
<h3>customerHeaders?: { [key: string]: string }</h3> <h4>customerHeaders?: { [key: string]: string }</h4>
<p> <p>
自定义请求头，例如 自定义请求头，例如
<pre>{ <pre>{
@ -42,11 +42,11 @@
'X-Auth-Token': 'xxxxxx' 'X-Auth-Token': 'xxxxxx'
}</pre> }</pre>
</p> </p>
<h3>signal?: AbortSignal | null</h3> <h4>signal?: AbortSignal | null</h4>
<p> <p>
终止器的信号，用来控制终止请求任务 终止器的信号，用来控制终止请求任务
</p> </p>
<h3>progress?: (this: XMLHttpRequestUpload, ev: ProgressEvent&lt;XMLHttpRequestEventTarget&gt;) => any</h3> <h4>progress?: (this: XMLHttpRequestUpload, ev: ProgressEvent&lt;XMLHttpRequestEventTarget&gt;) => any</h4>
<p> <p>
调用 upload 方法时在上传过程中触发的事件，返回进度参数 调用 upload 方法时在上传过程中触发的事件，返回进度参数
</p> </p>

28
style.css
View File

@ -24,7 +24,10 @@ input {
font-family: var(--serif-font-family); font-family: var(--serif-font-family);
} }
code, kbd, pre, samp { code,
kbd,
pre,
samp {
font-family: var(--mono-font-family); font-family: var(--mono-font-family);
background-color: var(--hover-color); background-color: var(--hover-color);
padding: 0 10px; padding: 0 10px;
@ -34,32 +37,43 @@ code {
display: inline-block; display: inline-block;
} }
pre { pre,
samp {
font-size: .875em; font-size: .875em;
} }
h2 + code { h2+code {
margin-left: 70px; margin-left: 70px;
position: relative; position: relative;
} }
h2 + code::before { h2+code::before {
content: '签名：'; content: '签名：';
position: absolute; position: absolute;
margin-left: -70px; margin-left: -70px;
} }
h3 { h3,
h4 {
font-family: var(--mono-font-family); font-family: var(--mono-font-family);
font-size: 1em; font-size: 1em;
margin-left: 10px; margin-left: 10px;
/* font-weight: bold; */ /* font-weight: bold; */
} }
h3 ~ p { h3~p {
margin-left: 10px; margin-left: 10px;
} }
h4 {
font-size: .9em;
margin-block-end: .4em;
}
h4+code {
font-size: .9rem;
}
a { a {
font-weight: 500; font-weight: 500;
color: #646cff; color: #646cff;
@ -120,7 +134,7 @@ h1 {
user-select: none; user-select: none;
} }
#directory>ul>li.title { #directory>ul>li.title {
margin: 20px 0 6px; margin: 20px 0 6px;
font-weight: bold; font-weight: bold;
font-size: 1.25em; font-size: 1.25em;