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,
width: 50,
enabled: item => !item.OptOut && !item.OptOut_BC,
onchanged: function () {
onChanged: function () {
if (typeof option.onChanged === 'function') {
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 { Dropdown } from "./ui/dropdown";
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 { createPicture, createAudio, createVideo, createFile } from './ui/media';
import { validation, convertCssStyle } from './ui/extension';
@ -34,6 +34,7 @@ export {
GridCheckboxColumn,
GridIconColumn,
GridTextColumn,
GridDateColumn,
// popup
Popup,
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 {
display: flex;
cursor: pointer;
@ -391,7 +404,7 @@
opacity: 1;
}
}
}
}
>.ui-grid-loading {
position: absolute;

24
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";
interface GridColumnType {
@ -14,12 +14,12 @@ export interface GridColumnDefinition {
key?: string;
type?: keyof GridColumnType | typeof GridColumn;
caption?: string;
captionStyle?: { [key: string]: string };
width?: Number;
align?: "left" | "center" | "right";
enabled?: boolean | string | ((item: GridItem | any) => boolean);
css?: { [key: string]: string };
styleFilter?: (item: GridItem | any) => { [key: string]: string };
textStyle?: { [key: string]: string };
visible?: boolean;
resizable?: boolean;
sortable?: boolean;
@ -32,22 +32,22 @@ export interface GridColumnDefinition {
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> | Promise<Array<GridSourceItem>>);
source?: Array<GridSourceItem | any> | ((item: GridItem | any) => Array<GridSourceItem | any> | Promise<Array<GridSourceItem | any>>);
iconType?: string;
className?: string | ((item: GridItem | any) => string);
iconClassName?: string | ((item: GridItem | any) => string);
text?: string;
tooltip?: string;
tooltip?: string | ((item: GridItem | any) => string);
onallchecked?: (this: Grid, col: GridColumnDefinition, flag: boolean) => void;
onchanged?: (this: Grid, item: GridItem | any, value: boolean | any) => void;
}
export class GridColumn {
create(): HTMLElement;
createEdit(trigger: (e: any) => void, col: GridColumnDefinition, body: HTMLElement): HTMLElement;
setValue(element: HTMLElement, val: any, item: GridItem | any, col: GridColumnDefinition): void;
getValue(e: any): any;
setStyle(element: HTMLElement, style: { [key: string]: string }): void;
setEnabled(element: HTMLElement, enabled?: boolean): void;
static create(col: GridColumnDefinition): HTMLElement;
static createEdit(trigger: (e: any) => void, col: GridColumnDefinition, container: HTMLElement, vals: GridItemWrapper): HTMLElement;
static setValue(element: HTMLElement, val: any, vals: GridItemWrapper, col: GridColumnDefinition, grid: Grid): void;
static getValue(e: any, col: GridColumnDefinition): any;
static setStyle(element: HTMLElement, style: { [key: string]: string }): void;
static setEnabled(element: HTMLElement, enabled?: boolean): void;
}
export class GridInputColumn extends GridColumn { }
@ -59,3 +59,5 @@ export class GridDropdownColumn extends GridColumn { }
export class GridCheckboxColumn 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' : '';
}
}
static toString() { return '[object Column]' }
}
export class GridInputColumn extends GridColumn {
@ -109,8 +111,8 @@ export class GridDropdownColumn extends GridColumn {
wrapper
});
drop.onselected = trigger;
if (typeof col.dropExpanded === 'function') {
drop.onexpanded = col.dropExpanded.bind(col, it.values, drop);
if (typeof col.onDropExpanded === 'function') {
drop.onexpanded = col.onDropExpanded.bind(col, it.values, drop);
}
return drop.create();
}
@ -225,7 +227,7 @@ export class GridIconColumn extends GridColumn {
static create() { return createElement('span', 'col-icon') }
static setValue(element, val, item, col, _grid) {
let className = col.className;
let className = col.iconClassName;
if (typeof className === 'function') {
className = className.call(col, item.values);
}
@ -258,3 +260,46 @@ export class GridIconColumn extends GridColumn {
}
}
}
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"
export interface GridItem {
value: any;
displayValue: string;
Value: any;
DisplayValue: string;
}
export interface GridItemWrapper {
values: Array<GridItem | any>;
source: { [key: string]: Array<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 { setTooltip } from "../tooltip";
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 = {
Reorder: 'reorder',
@ -49,7 +49,8 @@ const ColumnTypes = {
2: GridDropdownColumn,
3: GridCheckboxColumn,
4: GridIconColumn,
5: GridTextColumn
5: GridTextColumn,
6: GridDateColumn
};
let r = lang;
@ -92,7 +93,7 @@ export class Grid {
readonly;
multiSelect = false;
fullrowClick = true;
holderDisabled = false;
tooltipDisabled = false;
headerVisible = true;
window = global;
sortIndex = -1;
@ -112,6 +113,7 @@ export class Grid {
Checkbox: 3,
Icon: 4,
Text: 5,
Date: 6,
isCheckbox(type) { return type === 3 }
};
@ -293,8 +295,8 @@ export class Grid {
this._createHeader(table);
const body = this._createBody(table);
wrapper.appendChild(table);
// holder
if (!this.holderDisabled) {
// tooltip
if (!this.tooltipDisabled) {
const holder = createElement('div', 'ui-grid-hover-holder');
holder.addEventListener('mousedown', e => {
const holder = e.currentTarget;
@ -543,8 +545,8 @@ export class Grid {
wrapper.appendChild(check);
}
const caption = createElement('span');
if (col.textStyle != null) {
caption.style.cssText = convertCssStyle(col.textStyle);
if (col.captionStyle != null) {
caption.style.cssText = convertCssStyle(col.captionStyle);
}
caption.innerText = col.caption ?? '';
wrapper.appendChild(caption);
@ -658,7 +660,7 @@ export class Grid {
type ??= GridColumn;
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 {
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;
let element = children[index];
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;
if (offset < 0) {
offset = -offset;
@ -1035,7 +1037,7 @@ export class Grid {
} else {
this.sortIndex = index;
}
this.sortColumn(true);
this.sortColumn();
if (typeof this.columnChanged === 'function') {
this.columnChanged(ColumnChangedType.Sort, index, this.sortDirection);
}
@ -1289,6 +1291,7 @@ export class Grid {
}
attr.dragging = true;
const offsetLeft = this._var.refs.header.querySelector('th:last-child').offsetLeft;
const scrollLeft = this._var.el.scrollLeft;
const dragmove = e => {
const cx2 = getClientX(e);
const offset = cx2 - cx;
@ -1300,7 +1303,7 @@ export class Grid {
dragging = true;
}
if (dragging) {
this._changingColumnOrder(index, offset, cx2, offsetLeft);
this._changingColumnOrder(index, offset, cx2, offsetLeft, scrollLeft);
attr.offset = offset;
}
};
@ -1401,8 +1404,8 @@ export class Grid {
const key = col.key;
const isFunction = typeof col.enabled === 'function';
const isString = typeof col.enabled === 'string';
if (typeof col.onallchecked === 'function') {
col.onallchecked.call(this, col, flag);
if (typeof col.onAllChecked === 'function') {
col.onAllChecked.call(this, col, flag);
} else {
for (let row of this._var.currentSource) {
const item = row.values;
@ -1413,8 +1416,8 @@ export class Grid {
if (enabled !== false) {
item[key] = flag;
row.__changed = true;
if (typeof col.onchanged === 'function') {
col.onchanged.call(this, item, flag);
if (typeof col.onChanged === 'function') {
col.onChanged.call(this, item, flag);
}
}
}
@ -1426,8 +1429,8 @@ export class Grid {
if (this._var.colAttrs.__filtering != null) {
this._onCloseFilter();
}
if (this.onscrollbody === 'function') {
this.onscrollbody(e);
if (this.bodyScrolled === 'function') {
this.bodyScrolled(e);
}
if (!this.virtual) {
return;
@ -1604,12 +1607,12 @@ export class Grid {
}
row.__changed = true;
if (blur) {
if (typeof col.oneditend === 'function') {
col.oneditend.call(this, item, value);
if (typeof col.onInputEnded === 'function') {
col.onInputEnded.call(this, item, value);
}
} else {
if (typeof col.onchanged === 'function') {
col.onchanged.call(this, item, value);
if (typeof col.onChanged === 'function') {
col.onChanged.call(this, item, value);
}
}
}

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

Binary file not shown.