vue-devui/types/data-grid/src/data-grid-types.d.ts

DevUI components based on Vite and Vue3

import type { PropType, ExtractPropTypes, VNode, InjectionKey, Ref, SetupContext } from 'vue';
import type { Placement } from '../../overlay';
export interface RowData {
    checked?: boolean;
    disableCheck?: boolean;
    children?: RowData[];
    isLeaf?: boolean;
    [k: string]: any;
}
export type ColumnType = 'checkable' | 'index' | '';
export type ColumnAlign = 'left' | 'center' | 'right';
export type BorderType = '' | 'bordered' | 'borderless';
export type Size = 'mini' | 'xs' | 'sm' | 'md' | 'lg';
export type ShadowType = '' | 'shadowed';
export type FixedDirection = 'left' | 'right';
export type SortDirection = 'asc' | 'desc' | '';
export type CheckableRelation = 'upward' | 'downward' | 'both' | 'none';
export type SortMethod<T = RowData> = (a: T, b: T) => boolean;
export type RowClass = string | ((row: RowData, rowIndex: number) => string);
export type CellClass = string | ((row: RowData, rowIndex: number, column: ColumnConfig, columnIndex: number) => string);
export type RowKey = string | ((row: RowData) => string);
export interface TooltipConfig {
    content?: string;
    position?: Placement[];
    mouseEnterDelay?: number;
    enterable?: boolean;
    class?: string;
}
export interface FilterListItem {
    name: string;
    value: any;
    checked?: boolean;
}
export interface ColumnConfig {
    header: string;
    field: string;
    width?: number | string;
    minWidth?: number | string;
    maxWidth?: number | string;
    type?: ColumnType;
    resizable?: boolean;
    sortable?: boolean;
    showSortIcon?: boolean;
    sortMethod?: SortMethod;
    filterable?: boolean;
    showFilterIcon?: boolean;
    filterMultiple?: boolean;
    filterList?: FilterListItem[];
    filterChange?: (val: FilterListItem | FilterListItem[]) => void;
    filterMenu?: (scope: {
        toggleFilterMenu: (status?: boolean) => void;
        setFilterStatus: (status: boolean) => void;
    }) => VNode;
    fixed?: FixedDirection;
    align?: ColumnAlign;
    showOverflowTooltip?: boolean | TooltipConfig;
    showHeadOverflowTooltip?: boolean | TooltipConfig;
    headRender?: (columnConfig: ColumnConfig) => VNode;
    cellRender?: (rowData: RowData, rowIndex: number, cellData: string, cellIndex: number) => VNode;
}
export interface InnerColumnConfig extends ColumnConfig {
    $columnId: string;
    offsetLeft: number;
    $showExpandTreeIcon?: boolean;
}
export interface InnerRowData extends RowData {
    $rowId?: string;
    $parentId?: string;
    $rowIndex?: number;
    $level?: number;
    height?: number;
    offsetTop?: number;
    showNode?: boolean;
    $expand?: boolean;
    halfChecked?: boolean;
    childList?: InnerRowData[];
    descendantList?: InnerRowData[];
}
export interface ScrollYParams {
    distance: number;
    renderCountPerScreen: number;
    scrollScaleY: number[];
    originRowData: InnerRowData[];
    defaultSortRowData: InnerRowData[];
}
export interface ScrollXParams {
    distance: number;
    totalColumn: number;
    bufferSize: number;
    scrollViewWidth: number;
    scrollScaleX: number[];
    originColumnData: InnerColumnConfig[];
}
export interface IExpandLoadMoreResult {
    node: InnerRowData;
    rowItems: RowData[];
}
export declare const dataGridProps: {
    columns: {
        type: PropType<ColumnConfig[]>;
        default: () => never[];
    };
    data: {
        type: PropType<RowData[]>;
        default: () => never[];
    };
    indent: {
        type: NumberConstructor;
        default: number;
    };
    striped: {
        type: BooleanConstructor;
        default: boolean;
    };
    fixHeader: {
        type: BooleanConstructor;
        default: boolean;
    };
    rowHoveredHighlight: {
        type: BooleanConstructor;
        default: boolean;
    };
    headerBg: {
        type: BooleanConstructor;
        default: boolean;
    };
    showHeader: {
        type: BooleanConstructor;
        default: boolean;
    };
    lazy: {
        type: BooleanConstructor;
        default: boolean;
    };
    virtualScroll: {
        type: BooleanConstructor;
        default: boolean;
    };
    columnVirtualScroll: {
        type: BooleanConstructor;
    };
    reserveCheck: {
        type: BooleanConstructor;
        default: boolean;
    };
    resizable: {
        type: BooleanConstructor;
    };
    rowClass: {
        type: PropType<RowClass>;
        default: string;
    };
    rowKey: {
        type: PropType<RowKey>;
    };
    cellClass: {
        type: PropType<CellClass>;
        default: string;
    };
    size: {
        type: PropType<Size>;
        default: string;
    };
    borderType: {
        type: PropType<BorderType>;
        default: string;
    };
    shadowType: {
        type: PropType<ShadowType>;
        default: string;
    };
    checkableRelation: {
        type: PropType<CheckableRelation>;
        default: string;
    };
};
export type DataGridProps = ExtractPropTypes<typeof dataGridProps>;
export interface DataGridContext {
    showHeader: Ref<boolean>;
    fixHeader: Ref<boolean>;
    lazy: Ref<boolean>;
    virtualScroll: Ref<boolean>;
    columnVirtualScroll: Ref<boolean>;
    resizable: Ref<boolean>;
    indent: Ref<number>;
    bodyContentWidth: Ref<number>;
    bodyContentHeight: Ref<number>;
    translateX: Ref<number>;
    translateY: Ref<number>;
    bodyScrollLeft: Ref<number>;
    rowClass: Ref<RowClass>;
    cellClass: Ref<CellClass>;
    size: Ref<Size>;
    rootRef: Ref<HTMLElement | undefined>;
    scrollRef: Ref<HTMLElement | undefined>;
    headBoxRef: Ref<HTMLElement | undefined>;
    renderColumnData: Ref<InnerColumnConfig[]>;
    renderFixedLeftColumnData: Ref<InnerColumnConfig[]>;
    renderFixedRightColumnData: Ref<InnerColumnConfig[]>;
    renderRowData: Ref<InnerRowData[]>;
    rootCtx: SetupContext;
    allChecked: Ref<boolean>;
    halfAllChecked: Ref<boolean>;
    isTreeGrid: Ref<boolean>;
    execSortMethod: (direction: SortDirection, sortMethod?: SortMethod) => void;
    addGridThContextToMap: (key: ColumnConfig['field'], thCtx: GridThContext) => void;
    clearAllSortState: () => void;
    toggleRowExpansion: (node: InnerRowData, status?: boolean) => void;
    toggleRowChecked: (node: InnerRowData, status?: boolean) => void;
    toggleAllRowChecked: (status?: boolean) => void;
    afterColumnDragend: (columnId: InnerColumnConfig['$columnId'], offset: number) => void;
}
export declare const DataGridInjectionKey: InjectionKey<DataGridContext>;
export interface GridThContext {
    doSort: (direction: SortDirection) => void;
    doClearSort: () => void;
}
export declare const gridHeadProps: {
    columnData: {
        type: PropType<InnerColumnConfig[]>;
        default: () => never[];
    };
    leftColumnData: {
        type: PropType<InnerColumnConfig[]>;
        default: () => never[];
    };
    rightColumnData: {
        type: PropType<InnerColumnConfig[]>;
        default: () => never[];
    };
    translateX: {
        type: NumberConstructor;
        default: number;
    };
    bodyScrollLeft: {
        type: NumberConstructor;
        default: number;
    };
};
export type GridHeadProps = ExtractPropTypes<typeof gridHeadProps>;
export declare const gridBodyProps: {
    rowData: {
        type: PropType<InnerRowData[]>;
        default: () => never[];
    };
    columnData: {
        type: PropType<InnerColumnConfig[]>;
        default: () => never[];
    };
    leftColumnData: {
        type: PropType<InnerRowData[]>;
        default: () => never[];
    };
    rightColumnData: {
        type: PropType<InnerRowData[]>;
        default: () => never[];
    };
    translateX: {
        type: NumberConstructor;
        default: number;
    };
    translateY: {
        type: NumberConstructor;
        default: number;
    };
    bodyScrollLeft: {
        type: NumberConstructor;
        default: number;
    };
};
export type GridBodyProps = ExtractPropTypes<typeof gridBodyProps>;
export declare const gridThProps: {
    columnConfig: {
        type: PropType<InnerColumnConfig>;
        default: () => {};
    };
    mouseenterCb: {
        type: PropType<(e: Event, tooltipConfig: InnerColumnConfig['showOverflowTooltip']) => void>;
        default: () => {};
    };
    mouseleaveCb: {
        type: PropType<(e: Event, tooltipConfig: InnerColumnConfig['showOverflowTooltip']) => void>;
        default: () => {};
    };
};
export type GridThProps = ExtractPropTypes<typeof gridThProps>;
export declare const gridThFilterProps: {
    filterList: {
        type: PropType<FilterListItem[] | undefined>;
        default: () => never[];
    };
    multiple: {
        type: BooleanConstructor;
        default: boolean;
    };
    showFilterIcon: {
        type: BooleanConstructor;
        default: boolean;
    };
    filterMenu: {
        type: PropType<((scope: {
            toggleFilterMenu: (status?: boolean) => void;
            setFilterStatus: (status: boolean) => void;
        }) => VNode) | undefined>;
    };
    setFilterStatus: {
        type: PropType<(status: boolean) => void>;
        default(): void;
    };
};
export type GridThFilterProps = ExtractPropTypes<typeof gridThFilterProps>;
export declare const gridTdProps: {
    rowData: {
        type: PropType<InnerRowData>;
        default: () => {};
    };
    cellData: {
        type: PropType<InnerColumnConfig>;
        default: () => {};
    };
    rowIndex: {
        type: NumberConstructor;
        default: number;
    };
    mouseenterCb: {
        type: PropType<(e: Event, tooltipConfig: InnerColumnConfig['showOverflowTooltip']) => void>;
        default: () => {};
    };
    mouseleaveCb: {
        type: PropType<(e: Event, tooltipConfig: InnerColumnConfig['showOverflowTooltip']) => void>;
        default: () => {};
    };
};
export type GridTdProps = ExtractPropTypes<typeof gridTdProps>;