@farris/ui-vue/types/data-grid/src/data-grid.props.d.ts

Farris Vue, a Farris Design based Vue3 component library.

/**
 * Copyright (c) 2020 - present, Inspur Genersoft Co., Ltd.
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *       http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */
import { ExtractPropTypes, PropType, VNode } from 'vue';
import { EditorConfig } from '../../dynamic-form';
import { HeaderCell, VisualData, VisualDataCell } from '../../data-view';
import { DataGridColumnCommand, SortType } from './designer/data-grid-column.props';
export declare enum ScrollbarMode {
    AUTO = "auto",
    ALWAYS = "always"
}
/**
 * 默认 fieldsResolver，与业务自定义解析器区分（Card 下列为空仅表单布局等）。
 *
 * @internal
 */
export declare function defaultDataGridFieldsResolver(_fields: any, _data: any): null;
/**
 * DataGrid 列配置项。
 */
export interface DataGridColumn {
    /** 数据类型。 */
    dataType: string;
    /** 是否允许拖拽。 */
    draggable?: boolean;
    /** 列编辑器配置。 */
    editor?: EditorConfig;
    /** 列唯一标识。 */
    id?: string;
    /** 父级标识。 */
    parentId?: any;
    /** 字段名。 */
    field: string;
    /** 列标题。 */
    title: string;
    /** 列宽度。 */
    width?: number | string;
    /** 记录原始定义宽度。 */
    actualWidth?: number;
    /** 标题对齐方式。 */
    halign?: 'left' | 'center' | 'right';
    /** 文本对齐方式。 */
    align?: 'left' | 'center' | 'right';
    /** 垂直对齐方式。 */
    valign?: 'top' | 'middle' | 'bottom';
    /** 左侧偏移量。 */
    left?: number;
    /** 是否固定列。 */
    fixed?: 'left' | 'right';
    /** 是否显示。 */
    visible?: boolean | any;
    /** 是否只读。 */
    readonly?: boolean | any;
    /** 鼠标移动至单元格后是否显示悬浮提示。 */
    showTips?: boolean;
    /**
     * 单元格提示模式。
     *
     * @remarks
     * - `allways`：鼠标滑过即显示。
     * - `auto`：单元格宽度不够时才会显示。
     */
    tipMode?: 'allways' | 'auto';
    /** 是否允许排序。 */
    sortable?: boolean;
    /** 排序类型。 */
    sort?: SortType;
    /** 排序顺序。 */
    sortOrder?: number;
    /** 自定义排序函数。 */
    sorter?: (preValue: any, postValue: any, sortType: SortType) => number;
    /** 是否允许调整列宽。 */
    resizable?: boolean;
    /** 行合并数量。 */
    rowspan?: number;
    /** 列合并数量。 */
    colspan?: number;
    /** 列合并原始值。 */
    origianlColSpan?: number;
    /** 列索引。 */
    index?: number;
    /** 是否允许分组。 */
    allowGrouping?: boolean;
    /** 操作列命令集合。 */
    commands?: DataGridColumnCommand[];
    /** 是否允许筛选。 */
    filterable?: boolean;
    /** 筛选字段。 */
    filter?: string;
    /** 是否显示列设置。 */
    showSetting?: boolean;
    /** 是否显示省略号。 */
    showEllipsis?: boolean;
    /** 列模板渲染函数。 */
    columnTemplate?: (cell: VisualDataCell, visualDataRow: VisualData) => VNode;
    /** 单元格格式化函数。 */
    formatter?: ((cell: VisualDataCell, visualDataRow: VisualData) => VNode | string) | object;
    /** 表头格式化函数。 */
    headerFormatter?: (context: {
        headerCell: HeaderCell;
        headerCells: HeaderCell[];
        columnIndex: number;
    }) => VNode | string;
    /** 单元格样式函数。 */
    cellStyle?: (value: any, rowData: any, rowIndex: number) => object;
}
/**
 * 表头分组项。
 */
export interface ColumnGroupItem {
    /** 字段名。 */
    field: string;
    /** 分组标题。 */
    title?: string;
    /** 子分组集合。 */
    group?: (ColumnGroupItem | string)[];
}
/**
 * 交互模式。
 */
export type InteractiveMode = 'server' | 'client';
export declare const paginationOptions: {
    /** 是否启用分页。 */
    enable: {
        type: BooleanConstructor;
        default: boolean;
    };
    /** 当前页码。 */
    index: {
        type: NumberConstructor;
        default: number;
    };
    /** 分页交互模式，可选 `client` 或 `server`。 */
    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 type DataGridSortOrder = 'asc' | 'desc';
/**
 * DataGrid 排序字段。
 */
export interface DataGridSortField {
    /** 排序字段名。 */
    name: string;
    /** 排序方式。 */
    order: DataGridSortOrder;
}
export declare const sortOptions: {
    /** 是否启用排序。 */
    enable: {
        type: BooleanConstructor;
        default: boolean;
    };
    /** 排序字段集合。 */
    fields: {
        type: {
            (arrayLength: number): DataGridSortField[];
            (...items: DataGridSortField[]): DataGridSortField[];
            new (arrayLength: number): DataGridSortField[];
            new (...items: DataGridSortField[]): DataGridSortField[];
            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: never[];
    };
    /** 排序交互模式，可选 `client` 或 `server`。 */
    mode: {
        type: PropType<InteractiveMode>;
        default: string;
    };
    /** 是否支持多列排序。 */
    multiSort: {
        type: BooleanConstructor;
        default: boolean;
    };
};
/**
 * 排序配置类型。
 */
export type SortOptions = ExtractPropTypes<typeof sortOptions>;
/**
 * 分组合计行位置。
 */
export type GroupSummaryPosition = 'merge-to-group' | 'separate';
export declare const groupOptions: {
    /** 自定义分组行内容。 */
    customGroupRow: {
        type: FunctionConstructor;
        default: () => void;
    };
    /** 自定义分组行样式。 */
    customGroupRowStyle: {
        type: FunctionConstructor;
        default: () => void;
    };
    /** 自定义分组合计行样式。 */
    customSummaryStyle: {
        type: FunctionConstructor;
        default: () => void;
    };
    /** 是否启用数据分组。 */
    enable: {
        type: BooleanConstructor;
        default: boolean;
    };
    /** 分组行合并列数。 */
    groupColSpan: {
        type: NumberConstructor;
        default: number;
    };
    /** 行数据分组字段，多字段分组以英文逗号分隔。 */
    groupFields: {
        type: {
            (arrayLength: number): string[];
            (...items: string[]): string[];
            new (arrayLength: number): string[];
            new (...items: string[]): string[];
            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: never[];
    };
    /** 是否在 DataGrid 中显示被分组的列。 */
    showGroupedColumn: {
        type: BooleanConstructor;
        default: boolean;
    };
    /** 是否显示分组面板。 */
    showGroupPanel: {
        type: BooleanConstructor;
        default: boolean;
    };
    /** 是否启用合计行。 */
    showSummary: {
        type: BooleanConstructor;
        default: boolean;
    };
    /** 合计行显示位置。 */
    summaryPosition: {
        type: PropType<GroupSummaryPosition>;
        default: string;
    };
    /** 自定义分组合计内容渲染函数。 */
    customRender: {
        type: PropType<(cell: VisualDataCell, visualDataRow: VisualData) => VNode>;
        default: () => void;
    };
};
/**
 * 分组配置类型。
 */
export type GroupOptions = ExtractPropTypes<typeof groupOptions>;
/**
 * 筛选风格。
 */
export type DataGridFilterStyle = 'filter-column' | 'filter-row';
export declare const filterOptions: {
    /** 是否启用筛选总开关。 */
    enable: {
        type: BooleanConstructor;
        default: boolean;
    };
    /** 筛选风格，可选 `filter-column` 或 `filter-row`。 */
    filterStyle: {
        type: PropType<DataGridFilterStyle>;
        default: string;
    };
    /** 筛选交互模式，可选 `client` 或 `server`。 */
    mode: {
        type: PropType<InteractiveMode>;
        default: string;
    };
    /** 是否显示过滤条件工具条。 */
    showSummary: {
        type: BooleanConstructor;
        default: boolean;
    };
};
/**
 * 筛选配置类型。
 */
export type FilterOptions = ExtractPropTypes<typeof filterOptions>;
export declare const headerOptions: {
    /** 是否允许折行显示列标题。 */
    wrapHeadings: {
        type: BooleanConstructor;
        default: boolean;
    };
};
/**
 * 列标题配置类型。
 */
export type HeaderOptions = ExtractPropTypes<typeof headerOptions>;
export declare const rowNumberOptions: {
    /** 是否显示行号。 */
    enable: {
        type: BooleanConstructor;
        default: boolean;
    };
    /** 行号列表头标题。 */
    heading: {
        type: StringConstructor;
        default: string;
    };
    /** 行号宽度，单位 px。 */
    width: {
        type: NumberConstructor;
        default: number;
    };
    /** 是否展示省略号。 */
    showEllipsis: {
        type: BooleanConstructor;
        default: boolean;
    };
};
/**
 * 行号配置类型。
 */
export type RowNumberOptions = ExtractPropTypes<typeof rowNumberOptions>;
export declare const rowOptions: {
    /** 自定义行样式函数。 */
    customRowStyle: {
        type: FunctionConstructor;
        default: () => void;
    };
    /** 自定义单元格样式函数。 */
    customCellStyle: {
        type: FunctionConstructor;
        default: () => void;
    };
    /** 自定义行状态函数。 */
    customRowStatus: {
        type: FunctionConstructor;
        default: () => void;
    };
    /** 禁止行选中的判断函数。 */
    disable: {
        type: FunctionConstructor;
        default: () => void;
    };
    /** 行高度，单位 px。 */
    height: {
        type: NumberConstructor;
        default: number;
    };
    /** 是否启用鼠标滑过行效果。 */
    showHovering: {
        type: BooleanConstructor;
        default: boolean;
    };
    /** 是否允许数据折行。 */
    wrapContent: {
        type: BooleanConstructor;
        default: boolean;
    };
};
/**
 * 行配置类型。
 */
export type RowOptions = ExtractPropTypes<typeof rowOptions>;
/**
 * 合计行显示位置。
 */
export type DataGridSummaryPosition = 'bottom' | 'top' | 'both';
export declare const summaryOptions: {
    /** 是否启用合计行。 */
    enable: {
        type: BooleanConstructor;
        default: boolean;
    };
    /** 合计行自定义样式函数。 */
    customSummaryStyle: {
        type: FunctionConstructor;
        default: () => void;
    };
    /** 分组合计字段集合。 */
    groupFields: {
        type: {
            (arrayLength: number): string[];
            (...items: string[]): string[];
            new (arrayLength: number): string[];
            new (...items: string[]): string[];
            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: never[];
    };
    /** 合计交互模式，可选 `client` 或 `server`。 */
    mode: {
        type: PropType<InteractiveMode>;
        default: string;
    };
    /** 合计行显示位置，可选 `bottom`、`top`、`both`。 */
    position: {
        type: PropType<DataGridSummaryPosition>;
        default: string;
    };
    /** 自定义合计行内容渲染函数。 */
    customRender: {
        type: FunctionConstructor;
        default: () => void;
    };
};
/**
 * 合计配置类型。
 */
export type SummaryOptions = ExtractPropTypes<typeof summaryOptions>;
/**
 * 列宽自适应模式。
 */
export type DataGridColumnFitMode = 'none' | 'average' | 'expand' | 'percentage';
export declare const columnOptions: {
    /** 是否自动列宽，设为 true 后所有列将填满表格，不出现横向滚动条。 */
    fitColumns: {
        type: BooleanConstructor;
        default: boolean;
    };
    /** 自动适配列宽度模式。 */
    fitMode: {
        type: PropType<DataGridColumnFitMode>;
        default: string;
    };
    /** 表头分组集合。 */
    groups: {
        type: {
            (arrayLength: number): ColumnGroupItem[];
            (...items: ColumnGroupItem[]): ColumnGroupItem[];
            new (arrayLength: number): ColumnGroupItem[];
            new (...items: ColumnGroupItem[]): ColumnGroupItem[];
            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;
        };
        defaut: never[];
    };
    /** 是否允许拖动表头改变列显示顺序。 */
    reorderColumn: {
        type: BooleanConstructor;
        default: boolean;
    };
    /** 是否允许拖动改变列宽度。 */
    resizeColumn: {
        type: BooleanConstructor;
        default: boolean;
    };
    /** 双击表头列是否自适应内容宽度。 */
    resizeColumnOnDoubleClick: {
        type: BooleanConstructor;
        default: boolean;
    };
};
/**
 * 列布局配置类型。
 */
export type ColumnOptions = ExtractPropTypes<typeof columnOptions>;
/**
 * 与 use-virtual-scroll / 卡片布局规格一致：fitColumns 为 true 或对象且 enable === true。
 */
export declare function isFitColumnsEnabled(columnOption: ColumnOptions | undefined): boolean;
/**
 * 多选聚焦模式。
 */
export type FocuseSelectionMode = 'current' | 'all';
export declare const selectionOptions: {
    /** 启用多选且显示 checkbox，选中行后勾选前面的 checkbox。 */
    checkOnSelect: {
        type: BooleanConstructor;
        default: boolean;
    };
    /** 数据源为空时是否清空已选记录。 */
    clearSelectionOnEmpty: {
        type: BooleanConstructor;
        default: boolean;
    };
    /** 自定义已选记录列表中的显示内容。 */
    customSelectionItem: {
        type: FunctionConstructor;
        default: () => void;
    };
    /** 是否允许选中行。 */
    enabelSelectRow: {
        type: BooleanConstructor;
        default: boolean;
    };
    /** 重复点击行时是否保留选中状态。 */
    keepSelectingOnClick: {
        type: BooleanConstructor;
        default: boolean;
    };
    /** 是否允许跨页多选。 */
    keepSelectingOnPaging: {
        type: BooleanConstructor;
        default: boolean;
    };
    /** 是否启用多选。 */
    multiSelect: {
        type: BooleanConstructor;
        default: boolean;
    };
    /** 多选时点击行仅选中当前行的模式。 */
    focusSelection: {
        type: PropType<FocuseSelectionMode>;
        default: string;
    };
    /** 启用多选且显示 checkbox，勾选后是否选中行。 */
    selectOnCheck: {
        type: BooleanConstructor;
        default: boolean;
    };
    /** 每行前面是否显示 checkbox。 */
    showCheckbox: {
        type: BooleanConstructor;
        default: boolean;
    };
    /** 是否显示全选 checkbox。 */
    showSelectAll: {
        type: BooleanConstructor;
        default: boolean;
    };
    /** 是否显示已选数据。 */
    showSelection: {
        type: BooleanConstructor;
        default: boolean;
    };
};
/**
 * 选择配置类型。
 */
export type SelectionOptions = ExtractPropTypes<typeof selectionOptions>;
/**
 * DataGrid 编辑模式。
 */
export type DataGridEditMode = 'cell' | 'row';
export declare const editOptions: {
    /** 编辑时是否选中文本。 */
    selectOnEditing: {
        type: BooleanConstructor;
        default: boolean;
    };
    /** 编辑模式，`row` 为整行编辑，`cell` 为单元格编辑。 */
    editMode: {
        type: PropType<DataGridEditMode>;
        default: string;
    };
};
/**
 * 编辑配置类型。
 */
export type EditOption = ExtractPropTypes<typeof editOptions>;
export declare const loadingOptions: {
    /** 是否显示 loading。 */
    show: {
        type: BooleanConstructor;
        default: boolean;
    };
    /** loading 提示文本。 */
    message: {
        type: StringConstructor;
        default: string;
    };
};
/**
 * 加载配置类型。
 */
export type LoadingOption = Partial<ExtractPropTypes<typeof editOptions>>;
/**
 * DataGrid 组件的 props 配置对象。
 *
 * @remarks
 * 提供数据展示、分页、编辑、排序、筛选、分组、选中行、合计行等表格能力。
 */
export declare const dataGridProps: Record<string, any>;
/**
 * DataGrid 组件 props 的推导类型。
 */
export type DataGridProps = ExtractPropTypes<typeof dataGridProps>;
/**
 * DataGrid 事件处理器解析器。
 */
export declare const eventHandlerResolver: import("../../dynamic-resolver").EventHandlerResolver;