UNPKG

@farris/ui-vue

Version:

Farris Vue, a Farris Design based Vue3 component library.

1,173 lines (1,172 loc) 43.1 kB
import { ComputedRef, ExtractPropTypes, PropType, Ref, VNode } from "vue"; import { NumberType } from '../../common'; import { Condition } from '../../condition'; import { EditorConfig, EditorType } from '../../dynamic-form'; import { ButtonType } from '../../button'; export interface CollpasableItem { collapse: boolean; } export type FilterRelation = 0 | 1; export type FilterFunction = (dataItem: any) => boolean; export type SortType = 'asc' | 'desc' | 'none'; export interface DataColumnCommand { type: ButtonType; text: string; command?: string; icon?: string; hidden?: boolean; value?: any; size: string; onClick: (e: MouseEvent, dataIndex: number, visualDataRow: VisualData) => void; } export interface DataColumn { /** 字段 */ field: string; /** 字段类型 */ dataType: string; /** 标题 */ title: string; /** 记录原始定义宽度 */ actualWidth?: number; /** 文本对齐方式 */ align?: 'left' | 'center' | 'right'; /** 允许分组,默认为 true */ allowGrouping?: boolean; /** 列合并 */ colspan?: number; /** 操作列命令 */ commands?: DataColumnCommand[]; /** 列编辑器 */ editor?: EditorConfig; /** 允许筛选列数据 */ filterable?: boolean; /** 筛选条件 */ filter?: any; /** 是否固定 */ fixed?: 'left' | 'right'; /** 标题对齐方式 */ halign?: 'left' | 'center' | 'right'; /** 唯一标识 */ id?: string; /** 列索引 */ index?: number; /** 横向坐标 */ left?: number; /** 列合并原始值 */ origianlColSpan?: number; /** 上级分组标识 */ parentId?: any; /** 只读 */ readonly?: boolean | any; /** 允许调整列宽 */ resizable?: boolean; /** 行合并 */ rowspan?: number; /** 超出是否展示省略号 */ showEllipsis?: boolean; /** 显示列配置按钮 */ showSetting?: boolean; /** 鼠标移动至单元格后,显示悬浮消息 */ showTips?: boolean; /** 排序方式 */ sort?: SortType; /** 允许排序列数据 */ sortable?: boolean; /** 排序函数 */ sorter?: (preValue: any, postValue: any, sortType: SortType) => number; /** 排序列顺序 */ sortOrder?: number; /** 单元格提示模式: * allways: 鼠标滑过即显示 * auto: 单元格宽度不够时才会显示 */ tipMode?: 'allways' | 'auto'; /** 垂直对齐方式 */ valign?: 'top' | 'middle' | 'bottom'; /** 是否显示 */ visible?: boolean | any; /** 列宽 */ width?: number | string; /** */ formatter?: any; format?: (cell: VisualDataCell, visualDataRow: VisualData) => VNode | string; binding?: any; draggable?: boolean; headerFormatter?: (context: { headerCell: HeaderCell; headerCells: HeaderCell[]; columnIndex: number; }) => VNode | string; columnTemplate?: (cell: VisualDataCell, visualDataRow: VisualData) => VNode; } export interface DataFilter { relation: FilterRelation; filterFunctions: FilterFunction[]; children: DataFilter[]; } export interface DataViewFilter { field: string; fieldName: string; fieldType: string; filterValue: string; filter: (dataItem: any) => boolean; } export interface DataViewSorter { field: string; compare: (preItem: any, postItem: any) => number; } export declare enum CellMode { readonly = 0, editable = 1, editing = 2 } export declare enum VisualDataStatus { initial = 0, editing = 1 } export declare enum VisualDataType { data = 0, group = 1, summary = 2 } export interface VisualDataCell { /** 实际高度 */ actualHeight?: number; /** 水平方向 */ align: string | undefined; /** 单元格高度 */ cellHeight?: number; /** 列合并数 */ colSpan: number; /** 所属列 */ column?: DataColumn; /** 单元格数据 */ data: any; /** 编辑中数据 */ editingData: any; /** 获取编辑器函数 */ getEditor: (cell: VisualDataCell) => any; /** 单元格字段 */ field: string; /** 非编辑状态下,单元格格式化函数 */ formatter?: (cell: VisualDataCell, visualDataRow: any) => any; /** 单元格索引 */ index: number; /** 单元格编辑模式 */ mode: CellMode; /** 引用 */ ref?: any; /** 行合并数 */ rowSpan: number; /** 设置引用函数 */ setRef: (vnode: any) => void; /** 是否展示省略号, 默认展示 */ showEllipsis?: boolean; showTips?: boolean; /** 所属合并单元格 */ spannedBy?: VisualDataCell; /** 所合并的单元格 */ spanned?: VisualDataCell[]; /** 父级节点 */ parent: any; /** 垂直方向 */ valign: string | undefined; /** 更新函数 */ update: (value: any) => void; /** 接收变更数据 */ accept: () => void; /** 撤销变更数据 */ cancel: () => void; /** 单元格更新数据源 */ updateData: (newDataItem: any) => void; } export interface VisualData extends CollpasableItem { /** 是否折叠 */ collapse: boolean; /** 数据信息 */ data: Record<string, VisualDataCell>; /** 详细信息 */ details?: VisualDataCell[]; /** 禁用 */ disabled: boolean; /** 分组字段 */ groupField?: string; /** 分组字段数据 */ groupValue?: any; /** 层级 */ layer: number; /** 显示顺序索引 */ index: number; /** 数据索引 */ dataIndex: number; /** 节点在数据容器内的Y坐标 */ top: number; /** 节点类型 */ type: VisualDataType; /** 引用 */ ref?: any; /** 行高 */ height?: number; /** 额外行的高度(如表单行的高度) */ additionalHeight?: number; /** 父节点索引 */ parentIndex?: number; /** 前一个节点 */ pre?: any; /** 刷新键 */ refreshKey?: string; /** 设置引用函数 */ setRef: (vnode: any) => void; /** 设置动态表单引用函数 */ setDynamicRowRef: (vnode: any) => void; /** 设置分组行引用函数 */ setGroupRowRef: (vnode: any) => void; /** 设置分组汇总行引用函数 */ setGroupSummaryRowRef: (vnode: any) => void; /** 节点所处状态 */ status: VisualDataStatus; /** 是否展示该节点 */ visible: boolean; /** 是否被选中 */ checked: boolean; /** 中间选中状态 */ indeterminate: boolean; /** 原始数据 */ raw: any; paddingBottom?: string; moving?: boolean; /** 更新某一行的单列 */ updateCell: (newDataItem: any, field: string) => any; /** 更新某一行的多列 */ updateCells: (newDataItem: any, fields: string[]) => any; } export declare const rowNumberOptions: { /** 显示行号 */ enable: { type: BooleanConstructor; default: boolean; }; /** 行号列表头标题 */ heading: { type: StringConstructor; default: string; }; /** 行号宽度,默认为 36px */ width: { type: NumberConstructor; default: number; }; }; export interface RowNumberOptions { /** 显示行号 */ enable: boolean; /** 行号列表头标题 */ heading: string; /** 行号宽度,默认为 36px */ width: number; /** 省略号 */ showEllipsis: boolean; } export interface RowOptions { /** 自定义行样式 */ customRowStyle: (dataItem: Record<string, any>) => { class?: Record<string, boolean>; style?: Record<string, any>; }; /** 自定义单元格样式 */ customCellStyle: (cell: VisualDataCell, visualDataRow: VisualData) => { class?: Record<string, boolean>; style?: Record<string, any>; }; /** 自定义行状态 */ customRowStatus: (visualDataRow: VisualData) => VisualData; /** 自定义行内容 */ customRowContent: (visualDataRow: VisualData) => any[]; /** 禁止行选中表达式 */ disable: (dataItem: Record<string, any>) => boolean; /** 禁用属性名 */ disabledField: string; /** 默认行高度为 29px */ height: number; /** 鼠标滑过行效果 */ showHovering: boolean; /** 禁止数据折行 */ wrapContent: boolean; } export type FocuseSelectionMode = 'current' | 'all'; export type HierarchySelectionRange = 'All' | 'OnlyChildren' | 'OnlyParent'; /** * 联动模式 * 缺省状态下, 无联动设置, autoCheckChildren的值为false, autoCheckParent的值为false. * selectionRange - 选择结果范围的值为'All'. * 1.自动勾选子节点: 将autoCheckChildren属性设置为true后启用此特性, 此时勾选树节点后, 自动勾选该节点下的所有子节点. * 组件根据选择结果范围selectionRange的值, 更新已选记录结果, 控制树节点选择状态. * 1a.选择结果范围 - selectionRange的值为'All'时 * 当前节点, 及其所有子节点, 既显示勾选状态, 也被添加入已选数据列表; * 勾选当前节点所有兄弟节点后, 保留当前已选结果, 根据autoCheckParent属性的值决定是否联动选择其父节点; * 勾选状态的所有节点均可以被反选, 反选子节点后不影响父节点勾选状态. * 1b.选择结果范围 - selectionRange的值为'OnlyChildren'时 * 当前节点, 及其所有子节点, 显示勾选状态; * 如果当前节点包含子节点, 仅将不包括当前节点在内的所有子节点, 添加入已选数据列表; * 如果当前节点无子节点, 将当前节点添加入已选数据列表; * 勾选当前节点所有兄弟节点后, 保留所有子节点和无子节点的已选数据; * 根据autoCheckParent属性的值决定是否联动其父节点勾选状态, 但是不添加入已选数据列表; * 勾选状态的所有节点均可以被反选, 反选子节点后将其父节点置于中间状态. * 1c.选择结果范围 - selectionRange的值为'OnlyParent'时 * 当前节点, 及其所有子节点, 显示勾选状态; * 如果当前节点包含子节点, 仅将当前节点, 不包括其子节点, 添加入已选数据列表; * 如果当前节点无子节点, 将当前节点添加入已选数据列表; * 勾选当前节点所有兄弟节点后, 根据autoCheckParent属性的值更新选择结果; * 勾选状态的所有节点的子节点不可以被反选. * 2.自动勾选父节点: 将autoCheckParent属性设置为true后启用此特性, 此时勾选树节点后, 自动将其父节点置于中间状态, 勾选所有兄弟节点后, 自动将其父节点置于勾选状态. * 组件根据选择结果范围selectionRange的值, 更新已选记录结果, 控制树节点选择状态. * 2a.选择结果范围 - selectionRange的值为'All'时 * 将联动勾选的父节点添加入已选数据列表; * 勾选状态的所有节点均可以被反选, 反选子节点后不影响父节点勾选状态. * 2b.选择结果范围 - selectionRange的值为'OnlyChildren'时 * 联动其父节点勾选状态, 但是不添加入已选数据列表; * 勾选状态的所有节点的子节点都可以被反选, 当反选父节点时, 清除其下所有子节点选择记录. * 2c.选择结果范围 - selectionRange的值为'OnlyParent'时 * 将联动勾选的父节点添加入已选数据列表, 在已选记录中清除当前节点及其兄弟节点; * 勾选状态的所有节点的子节点不可以被反选. */ export interface CascadeOptions { /** autoCheckParent配合使用 * autoCheckParent: true autoCheckChildren:true 向上级联 * autoCheckParent: false autoCheckChildren:false selectionRange:All 仅选中当前数据 */ autoCancelParent: boolean; /** 自动勾选子节点 */ autoCheckChildren: boolean; /** 自动勾选父节点 */ autoCheckParent: boolean; /** 选择结果范围 */ selectionRange: HierarchySelectionRange; } export interface HierarchyOptions { cascadeOption: CascadeOptions; /** 收折状态字段 */ collapseField: string; /** 初始收折级数 */ collapseTo?: number; /** 拥有子节点标识 */ hasChildrenField: string; /** 数据节点图标字段 */ iconField: string; /** 级数字段 */ /** 父节点标识字段 */ parentIdField: string; } /** * 多选模式 * 启用多选数据特性后,可以与是否显示复选框配合,定制多种多选交互模式。 * 1.仅使用复选框: 同时启用多选特性和显示复选框特性后,多选模式缺省为'DependOnCheck',默认使用此模式。 * 此时用户勾选复选框添加已选数据; * 焦点行高亮显示,其他已选数据不显示高亮背景; * 点击行时,仅切换焦点行,不改变已选状态。 * 2.同时使用复选框和点击行: 同时启用多选特性和显示复选框特性,并将多选模式设置为'OnCheckAndClick'后,使用此模式。 * 此时用户勾选复选框添加已选数据; * 高亮显示包括焦点行在内的所有已选数据; * 点击行时,被点击行获得焦点,同时添加入已选数据。 * 3.仅点击行: 仅启用多选特性时,多选模式缺省为'DependOnCheck',因为未显示复选框,默认使用此模式。 * 此时用户按Shift+点击添加已选数据; * 高亮显示包括焦点行在内的所有已选数据; * 不按Shift键,仅点击行时,被点击行获得焦点并添加入已选数据,同时清空其他已选数据。 */ export type MultiSelectMode = 'DependOnCheck' | 'OnCheckAndClick'; export interface SelectionOptions { /** 允许选中行 */ enableSelectRow: boolean; /** 启用多选 */ multiSelect: boolean; /** 多选模式 */ multiSelectMode: MultiSelectMode; /** 每行前边显示 checkbox */ showCheckbox: boolean; /** 显示全选checkbox */ showSelectAll: boolean; /** 显示已选数据 */ showSelection: boolean; keepSelectingOnClick: boolean; keepSelectingOnPaging: boolean; } export interface CommandOptions { count?: number; /** 启用操作列 */ enable: boolean; /** 操作列命令 */ commands: ColumnCommand[]; /** 标题水平位置 */ halign: 'left' | 'center' | 'right'; /** 自定义操作列模板,如果设置了列模板,commands属性失效 */ formatter: (cell: VisualDataCell, visualDataRow: VisualData) => VNode | string; /** 编辑回调事件 */ onClickEditCommand: (cell: VisualDataCell, visualDataRow: VisualData, command: DataColumnCommand, payload: MouseEvent) => void; /** 删除回调事件 */ onClickDeleteCommand: (cell: VisualDataCell, visualDataRow: VisualData, command: DataColumnCommand, payload: MouseEvent) => void; onHandleAction: (cell: VisualDataCell, visualDataRow: VisualData, command: DataColumnCommand, payload: MouseEvent) => void; } export interface ColumnCommand { type: string; text: string; command?: string; icon?: string; hidden?: boolean; onClick: (e: MouseEvent, dataIndex: number, visualDataRow: VisualData) => void; } export type InteractiveMode = 'server' | 'client'; export declare const paginationOptions: { /** 启用分页 */ enable: { type: BooleanConstructor; default: boolean; }; /** 当前页码 */ index: { type: NumberConstructor; default: number; }; /** 分页交互模式 */ mode: { type: PropType<InteractiveMode>; default: string; }; /** 显示页码输入框 */ showGoto: { type: BooleanConstructor; default: boolean; }; /** 显示页码 */ showIndex: { type: BooleanConstructor; default: boolean; }; /** 显示每页记录数 */ showLimits: { type: BooleanConstructor; default: boolean; }; /** 显示分页汇总信息 */ showPageInfo: { type: BooleanConstructor; default: boolean; }; /** 默认每页记录数 */ size: { type: NumberConstructor; default: number; }; /** 可选择的没有记录数据 */ sizeLimits: { type: { (arrayLength: number): number[]; (...items: number[]): number[]; new (arrayLength: number): number[]; new (...items: number[]): number[]; isArray(arg: any): arg is any[]; readonly prototype: any[]; from<T>(arrayLike: ArrayLike<T>): T[]; from<T_1, U>(arrayLike: ArrayLike<T_1>, mapfn: (v: T_1, k: number) => U, thisArg?: any): U[]; from<T_2>(iterable: Iterable<T_2> | ArrayLike<T_2>): T_2[]; from<T_3, U_1>(iterable: Iterable<T_3> | ArrayLike<T_3>, mapfn: (v: T_3, k: number) => U_1, thisArg?: any): U_1[]; of<T_4>(...items: T_4[]): T_4[]; readonly [Symbol.species]: ArrayConstructor; }; default: number[]; }; /** 总记录数 */ total: { type: NumberConstructor; default: number; }; /** 禁用分页 */ disabled: { type: BooleanConstructor; default: boolean; }; }; export type PaginatonOptions = ExtractPropTypes<typeof paginationOptions>; export interface DataViewOptions { /** 允许在最后一个单元回车新增一行 */ appendOnEnterAtLastCell: boolean; /** 自动勾选子节点 */ autoCheckChildren: boolean; /** 编辑单元格前事件 */ beforeEditCell: boolean | ((context: { row: VisualData; cell: VisualDataCell; rawData: any; column: DataColumn; }) => Promise<boolean> | boolean); /** 结束编辑前校验 */ beforeEndEditCell: ((editContext: { cell: VisualDataCell; row: VisualData | null; newValue: any; oldValue: any; }) => Promise<boolean> | boolean); /** 单元格高度 */ cellHeight: number; /** 列集合 */ columns: DataColumn[]; /** 列配置 */ columnOption: any; /** 操作列 */ commandOption: CommandOptions; /** 被绑定数据 */ data: any[]; /** 用于显示信息的字段 */ displayField: string; /** 禁用组件 */ disabled: boolean; /** 允许编辑 */ editable: boolean; /** 编辑配置 */ editOption: any; filter: { mode?: string; }; fit: boolean; focusOnEditingCell: boolean; group: any; /** 高度 */ height: number; /** 层级关系配置对象 */ hierarchy: HierarchyOptions; iconField: string; /** 被绑定数据的标识字段 */ idField: string; /** 连接线颜色 */ lineColor: string; mergeCascadeValues: boolean; mergeCell: boolean; minHeight: number; minWidth: number; /** 新建数据 */ newDataItem: () => any; /** 分页配置 */ pagination: PaginatonOptions; /** 行号配置 */ rowNumber: RowNumberOptions; /** 行配置 */ rowOption: RowOptions; /** 选择配置 */ selection: SelectionOptions; /** 已选数据标识 */ selectionValues: string[]; selectOnEditingCell: boolean; /** 显示列标题 */ showHeader: boolean; /** 显示横向行分割线 */ showHorizontalLines: boolean; /** 是否显示连接线 */ showLines: boolean; /** 显示设置按钮 */ showSetting: boolean; /** 显示树节点图标 */ showTreeNodeIcons: boolean; /** 显示纵向列分割线 */ showVerticallLines: boolean; summary: any; sort: { mode?: string; multiSort?: boolean; }; treeNodeIconsData: any; width: number; /** 虚拟化渲染数据 */ virtualized: boolean; keepSelectingOnClick: boolean; loadData: (treeNode: VisualData) => Promise<any>; /** 自动高度 */ autoHeight: boolean; showBorder: boolean; loading: boolean | { show?: boolean; message?: string; }; emptyTemplate: null | undefined | (() => VNode | string); beforeUpdate: (context: any) => Promise<any> | any; checkboxPosition: string; mergeFields: string[]; displayType: 'Card' | 'List'; enableColumnSettingSolution: boolean; } export interface UseDataView { addFilter: (filterKey: string, filter: DataViewFilter) => any[]; addNewDataItem: (newDataItem: any) => any; addSorter: (sortKey: string, sorter: DataViewSorter) => any[]; updatePageSize: (newPageSize: number) => void; changePageSizeTo: (newPageSize: number) => void; collapse: (collapseField: string, collapseValue: any, groupParents: VisualData[]) => any[]; collapseTo: (layer: number) => void; dataView: Ref<any[]>; editDataItem: (editIndex: string | number, newName: string) => void; expand: (expandField: string, expandValue: any, groupParents: any[]) => any[]; expandTo: (layer: number) => void; filters: Ref<DataViewFilter[]>; fold: (visualData: VisualData) => void; getRange: (filters: DataViewFilter[], start: number, end: number) => any[]; getSelectionItems: (selectionValues: string[]) => any[]; hasRealChildren: (rawDataItem: any) => boolean; insertNewChildDataItem: (targetIndex?: number) => void; insertNewChildDataItems: (dataItems: any[], targetIndex?: number) => void; insertNewDataItem: (targetIndex?: number) => any; isVisibleInTree: (rawDataItem: any) => boolean; load: (newData: Record<string, any>[]) => void; navigatePageTo: (pageIndex: number) => void; pageIndex: Ref<number>; rawView: Ref<any[]>; refresh: () => void; removeAllFilter: () => any[]; removeDataItem: (dataIndex: number) => void; removeDataItemById: (dataItemId: string) => void; removeFilter: (filterKey: string) => any[]; removeHierarchyDataItem: (deleteIndex: number) => any; removeSorter: (sortKey: string) => any[]; reOrderVisibleIndex: () => void; setSorters: (sorters: DataViewSorter[]) => void; sorters: Ref<DataViewSorter[]>; summaries: Map<string, NumberType>; toggleChildrenVisibiltyByCollapseStatus: (rawDataItem: any) => void; totalItems: Ref<number>; unFold: (visualData: VisualData) => void; updateDataView: () => void; visibleDataItems: ComputedRef<any[]>; shouldGroupingData: ComputedRef<boolean>; pagination: Ref<PaginatonOptions>; updateSummary: () => void; updateVisibleDataSummary: (visibleData: VisualData[]) => void; } export type DataViewType = UseDataView['dataView']; export interface UseGroupData { collpaseGroupIconClass: (groupRow: CollpasableItem) => Record<string, boolean>; generateGroupData: (groupFields: string[], rawData: any[], columnMaps: Map<string, any>) => any[]; groupFields: Ref<string[]>; shouldGroupingData: ComputedRef<boolean>; showGroupPanel: ComputedRef<boolean>; groupRowSize: Ref<number>; } export interface UseFilter { apply: (dataItem: any) => boolean; clearCondition: () => void; conditions: Ref<Condition[]>; removeCondition: (id: string) => void; addColumnFilter: (headerCell: HeaderCell) => void; getFilterEditorType: (column: DataColumn) => EditorType; removeColumnFilter: (headerCell: HeaderCell) => void; filterFromServer: (conditions: { filterConditions: any[]; sortConditions: any[]; }) => void; createFilterConditions: () => any; } export interface UseVisualDataBound { updateRowPosition: (visualData: VisualData, dataItem: any) => void; updateVisualInfomation: (vnode: any, targetCell: VisualDataCell, dataItem: any) => void; } export interface UseVisualDataCell { createCellByColumn: (column: DataColumn, index: number, dataItem: any, parent: VisualData, preVisualData: VisualData) => VisualDataCell; createCellByField: (targetField: string, mode: CellMode, index: number, dataItem: any, parent: VisualData, colSpan?: number) => VisualDataCell; updateCellByColumn: (cell: VisualDataCell, column: DataColumn, preVisualData: VisualData, dataItem: any) => void; } export interface UseEdit { clear: () => void; getEditor: (cell: VisualDataCell, column: DataColumn, visualDataRow: VisualData) => any; onClickCell: (payload: MouseEvent, cell: VisualDataCell, row: VisualData, column: DataColumn) => any; onClickOutOfCell: (payload: MouseEvent | KeyboardEvent) => void; onClickCellByKeyboard: (payload: MouseEvent, cell: VisualDataCell, row: VisualData, column: DataColumn) => any; onMousedownCell: (payload: MouseEvent) => any; onMouseupCell: (payload: MouseEvent) => any; onEditingRow: (visualDataRow: VisualData) => any; acceptEditingRow: (visualDataRow: VisualData) => any; cancelEditingRow: (visualDataRow: VisualData) => any; getEditingSnapshot: (dataIdentify: string) => VisualData | null; endEditCell: () => any; endEditByCell: (cell: VisualDataCell) => void; showRowEditPanel: Ref<boolean>; } export interface UseCellEditor { getEditor: (cell: VisualDataCell, column: DataColumn, visualDataRow: VisualData) => any; } export type VisualDataRender = (dataItem: any, preDataItem: any, preRow: VisualData, rowIndex: number, top: number, columns: DataColumn[], visibleDatas?: VisualData[]) => VisualData; export interface UseVisualDataRow { createEmptyRow: (type: VisualDataType, index: number, dataItem: any, pre: any, preRow: VisualData, top: number) => VisualData; createNewRowFromDataItem: (columns: DataColumn[], dataItem: any, preDataItem: any, preRow: VisualData, rowIndex: number, top: number) => VisualData; renderDataRow: VisualDataRender; } export interface UseGroupRow { renderGroupRow: VisualDataRender; } export interface UseSummaryRow { renderSummaryRow: VisualDataRender; } export interface UseVisualData { getVisualData: (start: number, end: number, pre?: VisualData, forceToRefresh?: boolean) => VisualData[]; maxVisibleRowIndex: Ref<number>; minVisibleRowIndex: Ref<number>; toggleGroupRow: (status: 'collapse' | 'expand', groupRow: VisualData, visibleDatas: VisualData[]) => VisualData[]; } export interface UseVirtualScroll { dataGridWidth: Ref<number>; fitHorizontalScroll: () => void; gridDataStyle: ComputedRef<Record<string, any>>; gridHeaderColumnsStyle: ComputedRef<Record<string, any>>; gridMergedDataStyle: ComputedRef<Record<string, any>>; gridSideStyle: ComputedRef<Record<string, any>>; horizontalScrollThumbStyle: ComputedRef<Record<string, any>>; leftFixedGridDataStyle: ComputedRef<Record<string, any>>; leftFixedGridHeaderColumnsStyle: ComputedRef<Record<string, any>>; leftFixedGridMergedDataStyle: ComputedRef<Record<string, any>>; offsetX: Ref<number>; offsetY: Ref<number>; onMouseDownScrollThumb: ($event: MouseEvent, gridContentRef: Ref<any>, thumbType: 'vertical' | 'horizontal') => void; onTouchstartScrollThumb: ($event: TouchEvent, gridContentRef: Ref<any>) => void; onWheel: (payload: WheelEvent) => void; reCalculateVisualDataRows: (forceToRefresh?: boolean) => void; resetScroll: () => void; rightFixedGridDataStyle: ComputedRef<Record<string, any>>; rightFixedGridHeaderColumnsStyle: ComputedRef<Record<string, any>>; rightFixedGridMergedDataStyle: ComputedRef<Record<string, any>>; shouldShowHorizontalScrollbar: ComputedRef<boolean>; shouldShowVirticalScrollbar: ComputedRef<boolean>; updateVirticalScroll: () => void; updateVisibleRowsOnLatestVisibleScope: () => void; verticalScrollThumbStyle: ComputedRef<Record<string, any>>; viewPortHeight: Ref<number>; viewPortWidth: Ref<number>; scrollToBottom: () => void; scrollToRowByIndex: (index: number) => void; scrollTo: (top: number) => void; } export interface ColumnContext { defaultColumnWidth: number; headerDepth: number; leftColumns: DataColumn[]; leftColumnsMap: Map<string, DataColumn>; leftColumnsWidth: number; leftHeaderColumns: HeaderCell[]; primaryColumns: DataColumn[]; primaryColumnsMap: Map<string, DataColumn>; primaryColumnsWidth: number; primaryHeaderColumns: HeaderCell[]; rightColumns: DataColumn[]; rightColumnsMap: Map<string, DataColumn>; rightHeaderColumns: HeaderCell[]; rightColumnsWidth: number; summaryColumns: DataColumn[]; } export interface UseFitColumn { calculateColumnHeaders: (context: Ref<ColumnContext>) => void; calculateColumnsSize: () => void; calculateColumnsWidth: (context: Ref<ColumnContext>) => void; } export interface UseGroupColumn { getGridHeaderCells: (columns: DataColumn[]) => Map<string, HeaderCell>; } export declare enum HeaderCellStatus { none = 0, filterable = 1, sortable = 2, filtered = 4, sorted = 8, ascending = 16, descending = 32 } export interface HeaderCell { actualWidth: number; children: HeaderCell[]; depth: number; layer: number; left: number; field: string; parent: HeaderCell | null; resizable: boolean; title: string; status: HeaderCellStatus; popoverRef: Ref<any>; showPopover: boolean; column: DataColumn | null; filter?: any; filterHistory?: any[]; sortType: SortType; showSetting?: boolean; draggable?: boolean; } export interface ColumnGroupItem { field: string; title?: string; group?: (ColumnGroupItem | string)[]; } export interface UseSort { getSorterByColumn: (column: DataColumn) => any; updateSorter: (headerCell: HeaderCell, dataView: UseDataView) => void; } export interface UseColumn { applyColumnSorter: (dataView: UseDataView, sorterComposition: UseSort) => void; applySortableColumns: (sortableColumns: DataColumn[], dataView: UseDataView, sorterComposition: UseSort) => void; collectionFilterableColumns: () => DataColumn[]; collectionSortableColumns: () => DataColumn[]; columnContext: Ref<ColumnContext>; hasLeftFixedColumn: ComputedRef<boolean>; hasRightFixedColumn: ComputedRef<boolean>; updateColumnRenderContext: (columns: DataColumn[]) => void; updateColumnSettingIcon: () => void; sortFromServer: (sorterComposition: UseSort) => void; createSortConditions: (sorterComposition: UseSort) => any; } export interface UseDragColumn { dragstart: (e: DragEvent, item: any, index: number) => void; dragenter: (e: DragEvent, index: number) => void; dragover: (e: DragEvent, index: number) => void; dragend: (e: DragEvent, item: any) => void; dropOnGroupPanel: (e: DragEvent) => void; isDragging: Ref<boolean>; groupColumnItems: ComputedRef<{ name: string; value: string; }[]>; } export interface UseFilterHistory { getFilterHistory: (headerCell: HeaderCell) => any[]; setFilterHistory: (headerCell: HeaderCell, filterHistory: any[]) => void; removeFilterHistory: (headerCell: HeaderCell, filterString: string) => void; updateFilterHistory: (headerCell: HeaderCell, filterString: string) => void; } export interface UseColumnFilter { getFilterEditor: (headerCell: HeaderCell) => any; } export interface UseResize { onClickColumnResizeBar: ($event: MouseEvent, columnField: string) => any; resizeHandleStyle: Ref<Record<string, any>>; resizeOverlayStyle: Ref<Record<string, any>>; } export interface UseSidebar { showRowNumer: Ref<boolean>; showSidebarCheckBox: Ref<boolean>; sidebarTitle: ComputedRef<string>; sidebarWidth: ComputedRef<number>; sidebarCellPosition: (dataItem: VisualData) => Record<string, any>; sidebarCornerCellStyle: ComputedRef<Record<string, any>>; cellKey: (dataItem: VisualData) => string; rowKey: (dataItem: VisualData) => string; } export interface UseRow { activeRowById(id: string): void; gridCellClass(cell: VisualDataCell, visibleData: VisualData): Record<string, any>; gridHierarchyCellClass(cell: VisualDataCell, visibleData: VisualData): Record<string, any>; gridRowClass(dataItem: VisualData, rowIndex: number): Record<string, any>; sidebarRowClass(dataItem: VisualData, rowIndex: number): Record<string, any>; onClickRow: ($event: MouseEvent, dataItem: VisualData) => any; onClickRowExcludeDblclick: ($event: MouseEvent, dataItem: VisualData) => any; onMouseoverRow: ($event: MouseEvent, dataItem: VisualData) => any; onMouseoutRow: ($event: MouseEvent, dataItem: VisualData) => any; clickRowItem: (dataItem: VisualData) => void; selectRow: (dataItem: VisualData, event?: MouseEvent) => void; changeRow: (dataItem: VisualData) => void; } export interface UseSelection { currentSelectedDataId: Ref<string>; getSelectionRow: () => VisualData; clearSelection(): void; findIndexInSelectedItems(item: any): number; getSelectedItems: () => any[]; selectedValues: Ref<string[]>; toggleSelectItem(visualData: VisualData, keepSelectedStatusOnClick?: boolean): void; toggleSelectItemWithoutRow(visualData: VisualData): void; selectDataItem(dataItemToBeSelected: any): void; indeterminateDataItem(dataItemToBeIndeterminated: any): void; selectItem(visualData: VisualData): void; selectItemById(dataItemId: string): void; selectItemByIds(dataItemIds: string[]): void; unSelectDataItem(dataItemToBeUnSelected: Record<string, any>): void; unSelectItemByIds(dataItemIds: string[]): void; showCheckBox: Ref<boolean>; showSelectAll: ComputedRef<boolean>; enableSelectRow: Ref<boolean>; enableMultiSelect: Ref<boolean>; multiSelectMode: Ref<MultiSelectMode>; select: (visualDataToBeSelected: VisualData) => void; selectAll: () => void; unSelect: (visualDataToBeSelected: VisualData) => void; unSelectAll: () => void; indeterminate: (visualDataToBeSelected: VisualData) => void; isSelectingHirarchyItem: ComputedRef<boolean>; multiSelectOnClickRow: ComputedRef<boolean>; multiSelectOnClickRowWithShift: ComputedRef<boolean>; multiSelectOnlyOnCheck: ComputedRef<boolean>; updateSelectAllStatus: () => void; selectAllStatus: Ref<boolean>; indeterminateStatus: Ref<boolean>; isSingleSelect: ComputedRef<boolean>; showSelection: ComputedRef<boolean>; keepSelectingOnPaging: ComputedRef<boolean>; emitSelectionChanged: () => void; emptyCurrentRowId: () => void; updateSelectedValues: (ids: string[]) => void; removeSelectedValues: (ids: string[]) => void; resetSelection: () => void; /** 分组行对应的可选数据行(details rawView 回退) */ getGroupRowMemberDataItems: (groupVisualData: VisualData) => any[]; } export interface UseSelectHierarchyItem { getNextSelectableHierarchyItemId(visualDataIndex: number): string | null; toggleSelectHierarchyItem(visualData: VisualData): void; selectTreeNode(visualData: VisualData): void; unSelectTreeNode(visualData: VisualData): void; selectItemById(id: string): void; selectItemByIds(ids: string[]): void; unSelectItemByIds(ids: string[]): void; } export interface UseCellPosition { calculateCellPositionInRow: (columns: DataColumn[]) => Record<string, { left: number; width?: number; }>; cellKey: (dataItem: VisualData, columnIndex: number) => string; cellPosition: (dataItem: VisualData, cell: VisualDataCell, cellPositionMap: Record<string, { left: number; width?: number; }>) => Record<string, any>; rowKey: (dataItem: VisualData) => string; rowPosition: (dataItem: VisualData) => Record<string, any>; rowSpanCellPosition: (visualDataItem: VisualData, cell: VisualDataCell, cellPositionMap: Record<string, { left: number; width?: number; }>) => Record<string, any>; groupCellPosition: (groupCell: VisualDataCell, cellPositionMap: Record<string, { left: number; width?: number; }>, layer: number) => Record<string, any>; summaryCellPosition: (groupCell: VisualDataCell, cellPositionMap: Record<string, { left: number; width?: number; }>, layer: number) => Record<string, any>; } export interface UseCellContent { cellContentClass: (cell: VisualDataCell) => Record<string, boolean>; cellContentPosition: (cell: VisualDataCell) => Record<string, any>; cellContentClassWithEllipsis: (cell: VisualDataCell) => Record<string, any>; hierarchyCellTextAreaClass: (cell: VisualDataCell) => Record<string, boolean>; } export interface DictTreeItem { id: number; name: string; parents: Map<number, boolean>; childs: number[]; childsLength: number; neighborParentId: number; neighborChilds: number[]; childWithLines: number[]; } export interface UseDictTree { generateDictTree: (visibleDatasValue: VisualData[]) => DictTreeItem[]; } export interface UseHierarchyData { checkVisibleInHierarchy: Ref<number>; collapseTo: (rawData: any[], layer: number) => void; expandTo: (rawData: any[], layer: number) => void; generateHierarchyData: (rawData: any[]) => any[]; hasRealChildren: (rawDataItem: any) => boolean; insertSibling: (targetIndex: number, newDataItem: any, originalData: Ref<any[]>) => void; insertChild: (targetIndex: number, newDataItem: any, originalData: Ref<any[]>) => void; insertChildren: (targetIndex: number, newDataItems: any[], originalData: Ref<any[]>) => void; isVisibleInTree: (rawDataItem: any) => boolean; shouldStratifyData: Ref<boolean>; toggleChildrenVisibiltyByCollapseStatus: (rawDataItem: any) => void; trimmedOriginalData: (itemToTrim: any, originalData: any) => any[]; } export interface UseHierarchy { collapseField: ComputedRef<string>; hasChildrenField: ComputedRef<string>; parentIdField: ComputedRef<string>; shouldShowCheckBox: ComputedRef<boolean>; shouldShowIcon: ComputedRef<boolean>; } export interface UseToggleHierarchyItem { toggleTreeNode(visualTreeNode: VisualData): void; } export interface HierarchyGraphNode { /** 树节点标识 */ id: string; /** 树节点索引 */ index: number; /** 当前父节点标识 */ parentId: string; /** 当前父节点索引 */ parentIndex: number; /** 祖先节点集合 */ parents: Map<string, HierarchyGraphNode>; /** 子节点集合 */ children: Map<string, HierarchyGraphNode>; /** 后代节点集合 */ descendant: Map<string, HierarchyGraphNode>; /** 当前节点收折状态 */ collapsed: boolean; /** 当前节点是否被上级节点展开, 处于可见状态 */ visibleInHierarchy: boolean; } export interface UseDataViewContainerStyle { containerStyleObject: ComputedRef<Record<string, any>>; } export interface UseCommandColumn { applyCommands: (columns: Ref<DataColumn[]>) => void; } export interface UseCascade { autoCheckChildren: Ref<boolean>; autoCheckParent: Ref<boolean>; interactAfterCheckHierarchyItem: (selectionRecords: any[], dataItem: any) => any[]; } export interface UseIdentify { idField: Ref<string>; reviseIdentifyField: (rawData: any[]) => void; } export interface UseNavigation { navigateOnKeyUp: (payload: KeyboardEvent, currentCell: VisualDataCell) => void; navigateOnKeyDown: (payload: KeyboardEvent) => void; } export interface UsePagination { disabled: Ref<boolean>; pageSize: Ref<number>; pageList: Ref<number[]>; shouldRenderPagination: Ref<boolean>; showGotoPage: Ref<boolean>; showPageIndex: Ref<boolean>; showPageList: Ref<boolean>; showPageInfo: Ref<boolean>; mode: Ref<string>; updatePagination: (pageInfo: Partial<PaginatonOptions>) => void; } export declare const enum ColumnFormatterDataType { NONE = "none", NUMBER = "number", DATE = "date", TEXT = "boolean", IMAGE = "boolean2", ENUM = "enum", CUSTOM = "custom" } export interface UseData { rawData: Ref<Record<string, any>[]>; updateData: (data: Record<string, any>[]) => void; } export interface HierarchyItem { data: Record<string, any>; [propName: string]: any; children?: HierarchyItem[]; expanded?: boolean; selectable?: boolean; } export interface NumberFormatOptions { /** 货币符号 */ prefix?: string; /** 后缀符号 */ suffix?: string; /** 输出格式: %s = 货币符号, %v = */ format?: string; /** 小数点分隔符 */ decimal?: string; /** 千分位分隔符 */ thousand?: string; /** 保留小数位数 */ precision?: number; /** 去掉小数末尾的0 */ stripZeros?: boolean; } export interface DateTimeFormatOptions { format?: string; dateRangeDatesDelimiter?: string; dateRange: any; } export interface BooleanFormatOptions { trueText?: string; falseText?: string; } export interface EnumFormatOptions { valueField: string; textField: string; data?: any[]; } export interface ImageFormatOptions { width?: string; height?: string; } export type LookupFormatOptions = NumberFormatOptions | DateTimeFormatOptions | BooleanFormatOptions | EnumFormatOptions | ImageFormatOptions; export declare enum ColumnTemplateType { DATE = "date", DATE_TIME = "datetime", NUMBER = "number", ENUM = "enum", IMAGE = "image", BOOLEAN = "boolean", BOOLEAN2 = "boolean2", TIMEAGO = "timeago", NONE = "none", CUSTOM = "custom", MULTI_LINGUAL = "multilingual" } export interface InnerFormatter { data?: any; customFormat?: any; precision?: number; prefix?: string; suffix?: string; decimal?: string; thousand?: string; trueText?: string; falseText?: string; dateFormat?: string; width?: number; height?: number; valueField?: string; textField?: string; type?: ColumnTemplateType; options?: LookupFormatOptions; } export interface UpdatedRowOptions { collapseField?: string; visibleField?: string; checkedField?: string; disabledField?: string; } export type MappedTypeWithNewProperty<T> = { [key in keyof T]?: T[key]; }; export interface UpdateDataOption { keepScrollTop?: boolean; keepScrollPosition?: boolean; } export interface ColumnSettingSolution { advancedQueryConditionsString: string; belongId: string; code: string; code_chs: string; code_cht: string; code_en: string; extendId: string; extendInfo: any; id: string; isDefault?: boolean; isSystem?: boolean; mode: any; name: string; queryConditionString: string; type?: 'public' | 'private' | 'org' | ''; userCode: string; userId: string; userName: string; } export interface ColumnSettingCondition { columnFormat: DataColumn[]; expandGroupRows: boolean; groupField: string[]; sortInfo: { sortName: string[]; sortOrder: string[]; }; viewColumns: string[]; } export declare enum GridFieldEditorUsage { Column = "column", Group = "group" }