@aimerthyr/virtual-table 1.0.0

package/dist/index.d.ts

@@ -0,0 +1,349 @@
+import { AllowedComponentProps } from 'vue';
+import { ColumnDef } from '@tanstack/vue-table';
+import { ColumnFiltersState } from '@tanstack/vue-table';
+import { ColumnPinningState } from '@tanstack/vue-table';
+import { ColumnSizingState } from '@tanstack/vue-table';
+import { ComponentCustomProps } from 'vue';
+import { CSSProperties } from 'vue';
+import { ExpandedState } from '@tanstack/vue-table';
+import { HTMLAttributes } from 'vue';
+import { PaginationState } from '@tanstack/vue-table';
+import { PublicProps } from 'vue';
+import { RowSelectionState } from '@tanstack/vue-table';
+import { ShallowUnwrapRef } from 'vue';
+import { SortingState } from '@tanstack/vue-table';
+import { Table } from '@tanstack/vue-table';
+import { TdHTMLAttributes } from 'vue';
+import { ThHTMLAttributes } from 'vue';
+import { VNode as VNode_2 } from 'vue';
+import { VNodeProps } from 'vue';
+
+declare type __VLS_PrettifyLocal<T> = {
+    [K in keyof T]: T[K];
+} & {};
+
+/** checkbox 选择列 */
+export declare const CHECKBOX_COLUMN_KEY = "CHECKBOX_COLUMN_KEY";
+
+declare const _default: <TData extends VTableData>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_expose?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
+    props: __VLS_PrettifyLocal<Pick<Partial<{}> & Omit<{
+        readonly "onUpdate:defaultFilter"?: ((value: ColumnFiltersState) => any) | undefined;
+        readonly "onUpdate:defaultSort"?: ((value: SortingState) => any) | undefined;
+        readonly "onUpdate:defaultPagination"?: ((value: PaginationState) => any) | undefined;
+        readonly "onUpdate:defaultExpanded"?: ((value: ExpandedState) => any) | undefined;
+        readonly "onUpdate:defaultSelection"?: ((value: RowSelectionState) => any) | undefined;
+        readonly "onUpdate:defaultColumnPinning"?: ((value: ColumnPinningState) => any) | undefined;
+        readonly "onUpdate:defaultColumnSizing"?: ((value: ColumnSizingState) => any) | undefined;
+    } & VNodeProps & AllowedComponentProps & ComponentCustomProps, never>, "onUpdate:defaultFilter" | "onUpdate:defaultSort" | "onUpdate:defaultPagination" | "onUpdate:defaultExpanded" | "onUpdate:defaultSelection" | "onUpdate:defaultColumnPinning" | "onUpdate:defaultColumnSizing"> & ({
+        defaultFilter?: ColumnFiltersState;
+        defaultSort?: SortingState;
+        defaultPagination?: PaginationState;
+        defaultExpanded?: ExpandedState;
+        defaultSelection?: RowSelectionState;
+        defaultColumnPinning?: ColumnPinningState;
+        defaultColumnSizing?: ColumnSizingState;
+    } & VTableProps<TData>) & Partial<{}>> & PublicProps;
+    expose(exposed: ShallowUnwrapRef<VTableInstance>): void;
+    attrs: any;
+    slots: any;
+    emit: ((evt: "update:defaultFilter", value: ColumnFiltersState) => void) & ((evt: "update:defaultSort", value: SortingState) => void) & ((evt: "update:defaultPagination", value: PaginationState) => void) & ((evt: "update:defaultExpanded", value: ExpandedState) => void) & ((evt: "update:defaultSelection", value: RowSelectionState) => void) & ((evt: "update:defaultColumnPinning", value: ColumnPinningState) => void) & ((evt: "update:defaultColumnSizing", value: ColumnSizingState) => void);
+}>) => VNode_2 & {
+    __ctx?: Awaited<typeof __VLS_setup>;
+};
+export { _default as VTable }
+export default _default;
+
+/** 展开列 */
+export declare const EXPAND_COLUMN_KEY = "EXPAND_COLUMN_KEY";
+
+/** data 中 展开子行的数据属性 */
+export declare const EXPAND_ROW_DATA_INDEX = "_expandChildren";
+
+/** 是否是展开行 */
+export declare const EXPAND_ROW_KEY = "_isExpandRow";
+
+/** 表格默认样式 */
+export declare const TABLE_DEFAULT_STYLE: CSSProperties;
+
+export declare type VTableBorderConfig = {
+    /** 是否显示边框 */
+    enabled?: boolean;
+    /** 边框样式 */
+    borderStyle?: 'solid' | 'dashed';
+    /** 边框颜色 */
+    borderColor?: string;
+};
+
+/** 表格状态（分页，排序，筛选） */
+export declare type VTableChangeState = {
+    pagination: VTablePaginationState;
+    sortList: VTableSortingState;
+    filterList: VTableColumnFiltersState;
+};
+
+/**
+ * Checkbox 自定义组件接口定义
+ */
+export declare interface VTableCheckboxProps {
+    /** 是否选中 */
+    checked: boolean;
+    /** 是否禁用 */
+    disabled: boolean;
+    /** 是否半选状态 */
+    indeterminate: boolean;
+    /** 选中状态变化回调（需要直接拿到事件对象） */
+    onCheckedChange: (e: Event) => void;
+}
+
+/** 列配置 */
+export declare interface VTableColumn<TData = any> {
+    /** 列的 key （同时也对应于每一列数据的 key） */
+    columnKey: string;
+    /** 列标题 */
+    columnHeader?: ColumnDef<TData>['header'];
+    /** 列对齐方式 */
+    columnAlign?: 'left' | 'center' | 'right';
+    /** 列的宽度（支持数字或百分比字符串，如 200 或 '20%'） */
+    columnWidth?: number | string;
+    /** 是否开启排序 */
+    columnEnableSort?: boolean;
+    /** 是否开启筛选 */
+    columnEnableFilter?: boolean;
+    /** 单元格内容 */
+    columnCell?: ColumnDef<TData>['cell'];
+    /** 当前列宽是否可以调整 */
+    columnEnableResize?: boolean;
+    /** 列宽最大值 */
+    columnMaxWidth?: number;
+    /** 列宽最小值 (默认 50px) */
+    columnMinWidth?: number;
+    /** 可自行拓展字段 */
+    [key: string]: any;
+}
+
+export declare type VTableColumnFiltersState = ColumnFiltersState;
+
+export declare type VTableColumnPinningState = ColumnPinningState;
+
+export declare type VTableData<T = Record<string, any>> = T & {
+    /** 当前行是否展开 */
+    [EXPAND_ROW_KEY]?: boolean;
+    /** 子行数据列表（HACK: 为了实现自定义展开行的逻辑，这里只会有一项） */
+    [EXPAND_ROW_DATA_INDEX]?: Array<VTableData<T>>;
+};
+
+/** 表格默认 props */
+export declare const vTableDefaultProps: {
+    data?: ((props: VTableProps<any>) => any[]) | undefined;
+    columns?: ((props: VTableProps<any>) => VTableColumn<any>[]) | undefined;
+    rowHeight?: number | ((props: VTableProps<any>) => number) | undefined;
+    rowKey?: VTableRowKey<any> | ((props: VTableProps<any>) => string | number | ((row: any) => string | number)) | undefined;
+    loading?: boolean | ((props: VTableProps<any>) => boolean) | undefined;
+    fixedHeader?: boolean | ((props: VTableProps<any>) => boolean) | undefined;
+    enableSortingRemoval?: boolean | ((props: VTableProps<any>) => boolean) | undefined;
+    borderConfig?: ((props: VTableProps<any>) => VTableBorderConfig) | undefined;
+    rowSelectionConfig?: ((props: VTableProps<any>) => VTableRowSelectionConfig<any>) | undefined;
+    loadMoreConfig?: ((props: VTableProps<any>) => VTableLoadMoreConfig) | undefined;
+    paginationConfig?: ((props: VTableProps<any>) => VTablePaginationConfig) | undefined;
+    treeConfig?: ((props: VTableProps<any>) => VTableTreeConfig) | undefined;
+    enableExpandRow?: boolean | ((props: VTableProps<any>) => boolean) | undefined;
+    enableRowHover?: boolean | ((props: VTableProps<any>) => boolean) | undefined;
+    adaptiveColumnWidth?: number | ((props: VTableProps<any>) => number) | undefined;
+    defaultExpandAllRows?: boolean | ((props: VTableProps<any>) => boolean) | undefined;
+    columnResizeMode?: "onChange" | "onEnd" | ((props: VTableProps<any>) => "onChange" | "onEnd") | undefined;
+    customRow?: ((row: any, rowIndex: number) => HTMLAttributes) | ((props: VTableProps<any>) => (row: any, rowIndex: number) => HTMLAttributes) | undefined;
+    customHeaderCell?: ((column: VTableColumn, colIndex: number) => ThHTMLAttributes) | ((props: VTableProps<any>) => (column: VTableColumn, colIndex: number) => ThHTMLAttributes) | undefined;
+    customCell?: ((column: VTableColumn, colIndex: number) => TdHTMLAttributes) | ((props: VTableProps<any>) => (column: VTableColumn, colIndex: number) => TdHTMLAttributes) | undefined;
+    onTableChange?: ((data: VTableChangeState) => void) | ((props: VTableProps<any>) => (data: VTableChangeState) => void) | undefined;
+    onScrollToBottom?: (() => void) | ((props: VTableProps<any>) => () => void) | undefined;
+    onExpandedRowsChange?: ((expandState: VTableExpandedState) => void) | ((props: VTableProps<any>) => (expandState: VTableExpandedState) => void) | undefined;
+};
+
+export declare type VTableExpandedState = ExpandedState;
+
+/** VTable 实例类型定义 */
+export declare interface VTableInstance {
+    /** 滚动到指定行 */
+    scrollToIndex: (index: number) => void;
+}
+
+export declare type VTableLoadMoreConfig = {
+    /** 是否显示"没有更多了"提示 */
+    showNoMore?: boolean;
+    /** 自定义"没有更多了"文本 */
+    noMoreText?: string;
+};
+
+export declare type VTablePaginationConfig = {
+    /** 总数（必须要传） */
+    total: number;
+    /** 是否开启分页 */
+    enabled?: boolean;
+    /** 分页器位置 */
+    placement?: 'left' | 'center' | 'right';
+    /** 服务端分页还是前端分页 */
+    mode?: 'client' | 'server';
+    /** 分页器额外属性（如果你自己定义了分页器组件，则用于回传给你自己定义的组件） */
+    paginationExtraProps?: Record<string, any>;
+};
+
+/**
+ * Pagination 自定义组件接口定义
+ */
+export declare interface VTablePaginationProps {
+    /** 每页条数 */
+    pageSize: number;
+    /** 当前页码 */
+    pageIndex: number;
+    /** 总条数 */
+    total: number;
+    /** 页码变化回调 */
+    onPageChange: (pageIndex: number, pageSize: number) => void;
+}
+
+export declare type VTablePaginationState = PaginationState;
+
+/**
+ * Popover 自定义组件接口定义
+ */
+export declare interface VTablePopoverProps {
+    /** 是否显示 */
+    open: boolean;
+    /** 显示状态变化回调 */
+    onOpenChange: (value: boolean) => void;
+    /** 触发区域 */
+    trigger: () => VNode_2;
+    /** 下拉内容 */
+    content: () => VNode_2;
+}
+
+/** props 类型定义 */
+export declare interface VTableProps<TData = any> {
+    /** 表格数据 */
+    data: TData[];
+    /** 表格列 */
+    columns: VTableColumn[];
+    /** 表格行高 （⭐️建议设置，优化滚动性能，防止出现不可控的滚动异常行为） */
+    rowHeight?: number;
+    /** 行唯一标识字段 */
+    rowKey?: VTableRowKey<TData>;
+    /** 是否正在加载中（⭐️如果需要滚动加载的话，建议设置，用于防止滚动触底多次） */
+    loading?: boolean;
+    /** 是否固定表头（表头不随着滚动） */
+    fixedHeader?: boolean;
+    /** 是否允许取消排序 */
+    enableSortingRemoval?: boolean;
+    /** 边框样式配置 */
+    borderConfig?: VTableBorderConfig;
+    /** 选择行功能配置 */
+    rowSelectionConfig?: VTableRowSelectionConfig<TData>;
+    /** 加载更多配置 */
+    loadMoreConfig?: VTableLoadMoreConfig;
+    /** 分页器配置 */
+    paginationConfig?: VTablePaginationConfig;
+    /** 树形结构配置 */
+    treeConfig?: VTableTreeConfig;
+    /** 是否启用展开行功能 */
+    enableExpandRow?: boolean;
+    /** 是否启用 行 hover 高亮 */
+    enableRowHover?: boolean;
+    /** 自适应列宽（当列数很多时，会出现横向滚动条，那么就需要设置自适应列的最小列宽） */
+    adaptiveColumnWidth?: number;
+    /** 默认展开所有行（仅初始化生效） */
+    defaultExpandAllRows?: boolean;
+    /** 列宽调整模式 */
+    columnResizeMode?: 'onChange' | 'onEnd';
+    /** 自定义数据行属性 */
+    customRow?: (row: TData, rowIndex: number) => HTMLAttributes;
+    /** 自定义表头单元格属性 */
+    customHeaderCell?: (column: VTableColumn, colIndex: number) => ThHTMLAttributes;
+    /** 自定义表体单元格属性 */
+    customCell?: (column: VTableColumn, colIndex: number) => TdHTMLAttributes;
+    /** 表格状态变化（筛选，排序，分页） */
+    onTableChange?: (data: VTableChangeState) => void;
+    /** 滚动到表格底部 */
+    onScrollToBottom?: () => void;
+    /** 展开行变化回调 */
+    onExpandedRowsChange?: (expandState: VTableExpandedState) => void;
+}
+
+export declare type VTableRowKey<TData> = string | number | ((row: TData) => string | number);
+
+export declare type VTableRowSelectionConfig<TData> = {
+    /** 是否开启 checkbox 列 */
+    enabled?: boolean;
+    /** 判断该行是否禁用选择 */
+    getRowCheckDisabled?: (row: TData) => boolean;
+    /** 选择行变化回调 */
+    onChange?: (selectedRows: TData[]) => void;
+};
+
+export declare type VTableSelectionState = RowSelectionState;
+
+/** slots 类型定义 */
+export declare interface VTableSlots<TData = any> {
+    /** 自定义头部渲染 */
+    customHeader?: (data: {
+        columns: VTableColumn[];
+        table: Table<TData>;
+    }) => VNode_2;
+    /** 自定义单元格 */
+    bodyCell?: (data: {
+        columnKey: string;
+        column: VTableColumn;
+        row: TData;
+        rowIndex: number;
+    }) => VNode_2;
+    /** 自定义列头 */
+    headerCell?: (data: {
+        columnKey: string;
+        column: VTableColumn;
+    }) => VNode_2;
+    /** 自定义筛选图标 */
+    customFilterIcon?: (data: {
+        columnKey: string;
+        filtered: boolean;
+        column: VTableColumn;
+    }) => VNode_2;
+    /** 自定义筛选下拉 */
+    customFilterDropdown?: (data: {
+        confirm: () => void;
+        reset: () => void;
+        setFilterValue: (value: any) => void;
+        column: VTableColumn;
+        filterModelValue: any;
+    }) => VNode_2;
+    /** 自定义展开行 */
+    expandedRowRender?: (data: {
+        row: TData;
+    }) => VNode_2;
+    /** 自定义 Popover */
+    customPopover?: (props: {
+        open: boolean;
+        onOpenChange: (value: boolean) => void;
+        trigger: () => VNode_2;
+        content: () => VNode_2;
+    }) => VNode_2;
+    /** 自定义分页器 */
+    customPagination?: (props: VTablePaginationProps) => VNode_2;
+    /** 自定义 checkbox */
+    customCheckbox?: (props: VTableCheckboxProps) => VNode_2;
+    /** 自定义空状态 */
+    customEmpty?: () => VNode_2;
+    /** 自定义 loading 图标 */
+    customLoadingIcon?: () => VNode_2;
+    [key: string]: ((...args: any[]) => VNode_2) | undefined;
+}
+
+export declare type VTableSortingState = SortingState;
+
+export declare type VTableTreeConfig = {
+    /** 是否启用树形结构 */
+    enabled?: boolean;
+    /** 子节点字段名，默认为 'children' */
+    childrenKey?: string;
+    /** 缩进距离 */
+    indentSize?: number;
+};
+
+export { }