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

add docs

Browse Source
This commit is contained in:
Chen Lily 2024-01-23 09:07:15 +08:00
parent 3d9c5bd3f2
commit 10e4e52b51
9 changed files with 112 additions and 43 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
lib/app/communications/customer.js
View File

@ -812,7 +812,7 @@ export default class CustomerCommunication {
type: Grid.ColumnTypes.Checkbox, type: Grid.ColumnTypes.Checkbox,
width: 50, width: 50,
enabled: item => !item.OptOut && !item.OptOut_BC, enabled: item => !item.OptOut && !item.OptOut_BC,
onchanged: function () { onChanged: function () {
if (typeof option.onChanged === 'function') { if (typeof option.onChanged === 'function') {
option.onChanged([...This._var.gridContact.source, ...This._var.gridWo.source]); option.onChanged([...This._var.gridContact.source, ...This._var.gridWo.source]);
} }

3
lib/ui.js
View File

@ -6,7 +6,7 @@ import { createCheckbox, createRadiobox, resolveCheckbox } from "./ui/checkbox";
import { setTooltip, resolveTooltip } from "./ui/tooltip"; import { setTooltip, resolveTooltip } from "./ui/tooltip";
import { Dropdown } from "./ui/dropdown"; import { Dropdown } from "./ui/dropdown";
import { Grid } from "./ui/grid/grid"; import { Grid } from "./ui/grid/grid";
import { GridColumn, GridInputColumn, GridDropdownColumn, GridCheckboxColumn, GridIconColumn, GridTextColumn } from './ui/grid/column'; import { GridColumn, GridInputColumn, GridDropdownColumn, GridCheckboxColumn, GridIconColumn, GridTextColumn, GridDateColumn } from './ui/grid/column';
import { Popup, createPopup, showAlert, showConfirm } from "./ui/popup"; import { Popup, createPopup, showAlert, showConfirm } from "./ui/popup";
import { createPicture, createAudio, createVideo, createFile } from './ui/media'; import { createPicture, createAudio, createVideo, createFile } from './ui/media';
import { validation, convertCssStyle } from './ui/extension'; import { validation, convertCssStyle } from './ui/extension';
@ -34,6 +34,7 @@ export {
GridCheckboxColumn, GridCheckboxColumn,
GridIconColumn, GridIconColumn,
GridTextColumn, GridTextColumn,
GridDateColumn,
// popup // popup
Popup, Popup,
createPopup, createPopup,

2
lib/ui/css/grid.css
View File

File diff suppressed because one or more lines are too long

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

@ -340,6 +340,19 @@
} }
} }
.ui-grid-date-cell {
line-height: 22px;
box-sizing: border-box;
padding: var(--spacing-cell);
border: none;
font-size: var(--font-size);
width: 100%;
&:invalid {
color: rgba(0, 0, 0, .3);
}
}
.col-icon { .col-icon {
display: flex; display: flex;
cursor: pointer; cursor: pointer;
@ -391,7 +404,7 @@
opacity: 1; opacity: 1;
} }
} }
} }
>.ui-grid-loading { >.ui-grid-loading {
position: absolute; position: absolute;

26
lib/ui/grid/column.d.ts vendored
View File

@ -1,4 +1,4 @@
import { Grid, GridItem, GridSourceItem } from "./grid"; import { Grid, GridItem, GridItemWrapper, GridSourceItem } from "./grid";
import { DropdownOptions } from "../dropdown"; import { DropdownOptions } from "../dropdown";
interface GridColumnType { interface GridColumnType {
@ -14,12 +14,12 @@ export interface GridColumnDefinition {
key?: string; key?: string;
type?: keyof GridColumnType | typeof GridColumn; type?: keyof GridColumnType | typeof GridColumn;
caption?: string; caption?: string;
captionStyle?: { [key: string]: string };
width?: Number; width?: Number;
align?: "left" | "center" | "right"; align?: "left" | "center" | "right";
enabled?: boolean | string | ((item: GridItem | any) => boolean); enabled?: boolean | string | ((item: GridItem | any) => boolean);
css?: { [key: string]: string }; css?: { [key: string]: string };
styleFilter?: (item: GridItem | any) => { [key: string]: string }; styleFilter?: (item: GridItem | any) => { [key: string]: string };
textStyle?: { [key: string]: string };
visible?: boolean; visible?: boolean;
resizable?: boolean; resizable?: boolean;
sortable?: boolean; sortable?: boolean;
@ -32,22 +32,22 @@ export interface GridColumnDefinition {
sortFilter?: (a: GridItem | any, b: GridItem | any) => -1 | 0 | 1; sortFilter?: (a: GridItem | any, b: GridItem | any) => -1 | 0 | 1;
bgFilter?: (item: GridItem | any) => string; bgFilter?: (item: GridItem | any) => string;
dropOptions?: DropdownOptions; dropOptions?: DropdownOptions;
source?: Array<any> | ((item: GridItem | any) => Array<any> | Promise<Array<GridSourceItem>>); source?: Array<GridSourceItem | any> | ((item: GridItem | any) => Array<GridSourceItem | any> | Promise<Array<GridSourceItem | any>>);
iconType?: string; iconType?: string;
className?: string | ((item: GridItem | any) => string); iconClassName?: string | ((item: GridItem | any) => string);
text?: string; text?: string;
tooltip?: string; tooltip?: string | ((item: GridItem | any) => string);
onallchecked?: (this: Grid, col: GridColumnDefinition, flag: boolean) => void; onallchecked?: (this: Grid, col: GridColumnDefinition, flag: boolean) => void;
onchanged?: (this: Grid, item: GridItem | any, value: boolean | any) => void; onchanged?: (this: Grid, item: GridItem | any, value: boolean | any) => void;
} }
export class GridColumn { export class GridColumn {
create(): HTMLElement; static create(col: GridColumnDefinition): HTMLElement;
createEdit(trigger: (e: any) => void, col: GridColumnDefinition, body: HTMLElement): HTMLElement; static createEdit(trigger: (e: any) => void, col: GridColumnDefinition, container: HTMLElement, vals: GridItemWrapper): HTMLElement;
setValue(element: HTMLElement, val: any, item: GridItem | any, col: GridColumnDefinition): void; static setValue(element: HTMLElement, val: any, vals: GridItemWrapper, col: GridColumnDefinition, grid: Grid): void;
getValue(e: any): any; static getValue(e: any, col: GridColumnDefinition): any;
setStyle(element: HTMLElement, style: { [key: string]: string }): void; static setStyle(element: HTMLElement, style: { [key: string]: string }): void;
setEnabled(element: HTMLElement, enabled?: boolean): void; static setEnabled(element: HTMLElement, enabled?: boolean): void;
} }
export class GridInputColumn extends GridColumn { } export class GridInputColumn extends GridColumn { }
@ -58,4 +58,6 @@ export class GridDropdownColumn extends GridColumn { }
export class GridCheckboxColumn extends GridColumn { } export class GridCheckboxColumn extends GridColumn { }
export class GridIconColumn extends GridColumn { } export class GridIconColumn extends GridColumn { }
export class GridDateColumn extends GridColumn { }

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

@ -29,6 +29,8 @@ export class GridColumn {
tooltip.style.display = enabled === false ? 'none' : ''; tooltip.style.display = enabled === false ? 'none' : '';
} }
} }
static toString() { return '[object Column]' }
} }
export class GridInputColumn extends GridColumn { export class GridInputColumn extends GridColumn {
@ -109,8 +111,8 @@ export class GridDropdownColumn extends GridColumn {
wrapper wrapper
}); });
drop.onselected = trigger; drop.onselected = trigger;
if (typeof col.dropExpanded === 'function') { if (typeof col.onDropExpanded === 'function') {
drop.onexpanded = col.dropExpanded.bind(col, it.values, drop); drop.onexpanded = col.onDropExpanded.bind(col, it.values, drop);
} }
return drop.create(); return drop.create();
} }
@ -225,7 +227,7 @@ export class GridIconColumn extends GridColumn {
static create() { return createElement('span', 'col-icon') } static create() { return createElement('span', 'col-icon') }
static setValue(element, val, item, col, _grid) { static setValue(element, val, item, col, _grid) {
let className = col.className; let className = col.iconClassName;
if (typeof className === 'function') { if (typeof className === 'function') {
className = className.call(col, item.values); className = className.call(col, item.values);
} }
@ -257,4 +259,47 @@ export class GridIconColumn extends GridColumn {
element.classList.remove('disabled'); element.classList.remove('disabled');
} }
} }
}
export class GridDateColumn extends GridColumn {
static createEdit(trigger, col) {
const date = createElement('input', 'ui-grid-date-cell');
date.required = true;
date.type = 'date';
if (col.dateMin != null) {
date.min = col.dateMin;
}
if (col.dateMax != null) {
date.max = col.dateMax;
}
date.addEventListener('change', trigger);
return date;
}
static setValue(element, val) {
if (element.tagName === 'INPUT') {
if (isNaN(val) || /^\d{4}-\d{2}-\d{2}$/.test(val)) {
element.value = val;
} else {
val = new Date((val - 621355968e9) / 10000);
const month = String(val.getMonth() + 1).padStart(2, '0');
const date = String(val.getDate()).padStart(2, '0');
element.value = `${val.getFullYear()}-${month}-${date}`;
}
} else {
element.innerText = val;
}
}
static getValue(e) {
return e.target?.value;
}
static setEnabled(element, enabled) {
element.disabled = enabled === false;
}
static formatDate(date) {
return `${date.getMonth() + 1}/${date.getDate()}/${date.getFullYear()}`;
}
} }

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

@ -1,8 +1,13 @@
import { GridColumnDefinition } from "./column" import { GridColumnDefinition } from "./column"
export interface GridItem { export interface GridItem {
value: any; Value: any;
displayValue: string; DisplayValue: string;
}
export interface GridItemWrapper {
values: Array<GridItem | any>;
source: { [key: string]: Array<GridSourceItem> };
} }
export interface GridSourceItem { export interface GridSourceItem {

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

@ -7,7 +7,7 @@ import { createIcon } from "../icon";
import { createCheckbox } from "../checkbox"; import { createCheckbox } from "../checkbox";
import { setTooltip } from "../tooltip"; import { setTooltip } from "../tooltip";
import { convertCssStyle } from "../extension"; import { convertCssStyle } from "../extension";
import { GridColumn, GridInputColumn, GridTextColumn, GridDropdownColumn, GridCheckboxColumn, GridIconColumn } from "./column"; import { GridColumn, GridInputColumn, GridTextColumn, GridDropdownColumn, GridCheckboxColumn, GridIconColumn, GridDateColumn } from "./column";
const ColumnChangedType = { const ColumnChangedType = {
Reorder: 'reorder', Reorder: 'reorder',
@ -49,7 +49,8 @@ const ColumnTypes = {
2: GridDropdownColumn, 2: GridDropdownColumn,
3: GridCheckboxColumn, 3: GridCheckboxColumn,
4: GridIconColumn, 4: GridIconColumn,
5: GridTextColumn 5: GridTextColumn,
6: GridDateColumn
}; };
let r = lang; let r = lang;
@ -92,7 +93,7 @@ export class Grid {
readonly; readonly;
multiSelect = false; multiSelect = false;
fullrowClick = true; fullrowClick = true;
holderDisabled = false; tooltipDisabled = false;
headerVisible = true; headerVisible = true;
window = global; window = global;
sortIndex = -1; sortIndex = -1;
@ -112,6 +113,7 @@ export class Grid {
Checkbox: 3, Checkbox: 3,
Icon: 4, Icon: 4,
Text: 5, Text: 5,
Date: 6,
isCheckbox(type) { return type === 3 } isCheckbox(type) { return type === 3 }
}; };
@ -293,8 +295,8 @@ export class Grid {
this._createHeader(table); this._createHeader(table);
const body = this._createBody(table); const body = this._createBody(table);
wrapper.appendChild(table); wrapper.appendChild(table);
// holder // tooltip
if (!this.holderDisabled) { if (!this.tooltipDisabled) {
const holder = createElement('div', 'ui-grid-hover-holder'); const holder = createElement('div', 'ui-grid-hover-holder');
holder.addEventListener('mousedown', e => { holder.addEventListener('mousedown', e => {
const holder = e.currentTarget; const holder = e.currentTarget;
@ -543,8 +545,8 @@ export class Grid {
wrapper.appendChild(check); wrapper.appendChild(check);
} }
const caption = createElement('span'); const caption = createElement('span');
if (col.textStyle != null) { if (col.captionStyle != null) {
caption.style.cssText = convertCssStyle(col.textStyle); caption.style.cssText = convertCssStyle(col.captionStyle);
} }
caption.innerText = col.caption ?? ''; caption.innerText = col.caption ?? '';
wrapper.appendChild(caption); wrapper.appendChild(caption);
@ -658,7 +660,7 @@ export class Grid {
type ??= GridColumn; type ??= GridColumn;
this._var.colTypes[col.key] = type; this._var.colTypes[col.key] = type;
} }
cell.appendChild(type.create(col, e => this._onRowChanged(e, this._var.startIndex + i, col, type.getValue(e, col), cell), this._var.el)); cell.appendChild(type.create(col));
} }
} else { } else {
cell.style.display = 'none'; cell.style.display = 'none';
@ -848,11 +850,11 @@ export class Grid {
} }
} }
_changingColumnOrder(index, offset, x, offsetLeft) { _changingColumnOrder(index, offset, x, offsetLeft, scrollLeft) {
const children = this._var.refs.header.children; const children = this._var.refs.header.children;
let element = children[index]; let element = children[index];
this._var.refs.dragger.style.cssText = `left: ${element.offsetLeft - offsetLeft + offset}px; width: ${element.style.width}; display: block`; this._var.refs.dragger.style.cssText = `left: ${element.offsetLeft - offsetLeft + offset}px; width: ${element.style.width}; display: block`;
offset = x - element.offsetLeft; // getOffsetLeftFromWindow(element); offset = x + scrollLeft - element.offsetLeft; // getOffsetLeftFromWindow(element);
let idx; let idx;
if (offset < 0) { if (offset < 0) {
offset = -offset; offset = -offset;
@ -1035,7 +1037,7 @@ export class Grid {
} else { } else {
this.sortIndex = index; this.sortIndex = index;
} }
this.sortColumn(true); this.sortColumn();
if (typeof this.columnChanged === 'function') { if (typeof this.columnChanged === 'function') {
this.columnChanged(ColumnChangedType.Sort, index, this.sortDirection); this.columnChanged(ColumnChangedType.Sort, index, this.sortDirection);
} }
@ -1289,6 +1291,7 @@ export class Grid {
} }
attr.dragging = true; attr.dragging = true;
const offsetLeft = this._var.refs.header.querySelector('th:last-child').offsetLeft; const offsetLeft = this._var.refs.header.querySelector('th:last-child').offsetLeft;
const scrollLeft = this._var.el.scrollLeft;
const dragmove = e => { const dragmove = e => {
const cx2 = getClientX(e); const cx2 = getClientX(e);
const offset = cx2 - cx; const offset = cx2 - cx;
@ -1300,7 +1303,7 @@ export class Grid {
dragging = true; dragging = true;
} }
if (dragging) { if (dragging) {
this._changingColumnOrder(index, offset, cx2, offsetLeft); this._changingColumnOrder(index, offset, cx2, offsetLeft, scrollLeft);
attr.offset = offset; attr.offset = offset;
} }
}; };
@ -1401,8 +1404,8 @@ export class Grid {
const key = col.key; const key = col.key;
const isFunction = typeof col.enabled === 'function'; const isFunction = typeof col.enabled === 'function';
const isString = typeof col.enabled === 'string'; const isString = typeof col.enabled === 'string';
if (typeof col.onallchecked === 'function') { if (typeof col.onAllChecked === 'function') {
col.onallchecked.call(this, col, flag); col.onAllChecked.call(this, col, flag);
} else { } else {
for (let row of this._var.currentSource) { for (let row of this._var.currentSource) {
const item = row.values; const item = row.values;
@ -1413,8 +1416,8 @@ export class Grid {
if (enabled !== false) { if (enabled !== false) {
item[key] = flag; item[key] = flag;
row.__changed = true; row.__changed = true;
if (typeof col.onchanged === 'function') { if (typeof col.onChanged === 'function') {
col.onchanged.call(this, item, flag); col.onChanged.call(this, item, flag);
} }
} }
} }
@ -1426,8 +1429,8 @@ export class Grid {
if (this._var.colAttrs.__filtering != null) { if (this._var.colAttrs.__filtering != null) {
this._onCloseFilter(); this._onCloseFilter();
} }
if (this.onscrollbody === 'function') { if (this.bodyScrolled === 'function') {
this.onscrollbody(e); this.bodyScrolled(e);
} }
if (!this.virtual) { if (!this.virtual) {
return; return;
@ -1604,12 +1607,12 @@ export class Grid {
} }
row.__changed = true; row.__changed = true;
if (blur) { if (blur) {
if (typeof col.oneditend === 'function') { if (typeof col.onInputEnded === 'function') {
col.oneditend.call(this, item, value); col.onInputEnded.call(this, item, value);
} }
} else { } else {
if (typeof col.onchanged === 'function') { if (typeof col.onChanged === 'function') {
col.onchanged.call(this, item, value); col.onChanged.call(this, item, value);
} }
} }
} }

BIN
readme/Grid 控件接口文档.docx Normal file
View File

Binary file not shown.