@dt-frames/ui 3.0.1 → 4.0.1

package/dist/es/lib/components/table/src/types/table.d.ts

@@ -0,0 +1,632 @@
+import type { DictType, Recordable } from '@dt-frames/core';
+import type { CheckboxValueType, RowEventHandler, TagProps } from 'element-plus';
+import type { Component, CSSProperties, Ref, VNode } from 'vue';
+import type { ButtonTypes } from '../../../form';
+import type { PaginationType } from './pagination';
+import type { ExcelExtraDataType, SourceDownloadType, TableChangeParams } from '../../../../types/source.type';
+type KeyType = string | number;
+type Data = {
+    [key: KeyType]: any;
+    children?: Array<any>;
+};
+type RowCommonParams = {
+    rowData: any;
+    rowIndex: number;
+};
+type CellFormat = {
+    /**
+     * 字典转换
+     */
+    dict?: DictType;
+    /**
+     * 结构转换
+     */
+    struc?: string;
+    /**
+     * 数字转换
+     */
+    number?: string;
+    /**
+     * 时间转换
+     */
+    date?: string;
+    /**
+     * 百分比转换
+     */
+    percent?: string;
+    /**
+     * 标签转换
+     */
+    tag?: (value: Recordable) => TagProps;
+    /**
+     * 链接转换
+     */
+    link?: (val: Recordable) => void;
+    text?: any;
+};
+type ColumnType = {
+    /**
+     * 表格单元格内容对齐方式
+     * @default left
+     */
+    align?: 'left' | 'center' | 'right' | null | '';
+    /**
+     * 列的类名
+     */
+    class?: string;
+    /**
+     * 列标识
+     */
+    flag?: 'INDEX' | 'DEFAULT' | 'CHECKBOX' | 'RADIO' | 'ACTION';
+    /**
+     * 唯一标志
+     */
+    key?: KeyType;
+    /**
+     * data 的唯一标志符
+     */
+    dataKey?: KeyType;
+    /**
+     * 固定列位置
+     * @default false
+     */
+    fixed?: boolean | 'left' | 'right' | null;
+    /**
+     * CSS 属性 flex grow, 仅当不是固定表时才生效
+     * @default 0
+     */
+    flexGrow?: number;
+    /**
+     * CSS 属性 flex shrink, 仅当不是固定表时才生效
+     * @default 1
+     */
+    flexShrink?: number;
+    /**
+     * 自定义 header 头部类名
+     */
+    headerClass?: string;
+    /**
+     * 此列是否不可见
+     */
+    hidden?: boolean;
+    /**
+     * 自定义列单元格的类名，将会与 gird 单元格合并
+     */
+    style?: CSSProperties;
+    /**
+     * 设置列是否可排序
+     */
+    sortable?: boolean;
+    /**
+     * Header 头部单元格中的默认文本
+     */
+    title?: string;
+    /**
+     * 是否支持拖拽改变列宽
+     * @default true
+     */
+    resizable?: boolean;
+    /**
+     * 列的最大宽度
+     */
+    maxWidth?: number;
+    /**
+     * 列的最小宽度
+     */
+    minWidth?: number;
+    /**
+     * 列宽度
+     * @default 100
+     */
+    width?: number;
+    /**
+     * 过滤器转换
+     * 例如：字典 | 时间 | structure | 数字 | 百分比 | 链接 | 标签
+     */
+    format?: CellFormat;
+    /**
+     * 自定义单元格渲染器
+     */
+    cellRenderer?: Component | ((props: {
+        cellData: any;
+        column: ColumnType;
+        columns: ColumnType[];
+        columnIndex: number;
+        rowData: any;
+        rowIndex: number;
+    }) => VNode);
+    /**
+     * 自定义头部渲染器
+     */
+    headerCellRenderer?: Component | ((props: {
+        column: ColumnType;
+        columns: ColumnType[];
+        columnIndex: number;
+        headerIndex: number;
+    }) => VNode);
+};
+type DataGetterParams = {
+    columns: ColumnType[];
+    column: ColumnType;
+    columnIndex: number;
+} & RowCommonParams;
+type DataGetter = (params: DataGetterParams) => any;
+type SortOrder = 'asc' | 'desc';
+type SortBy = {
+    key: KeyType;
+    order: SortOrder;
+};
+type SortState = Record<KeyType, SortOrder>;
+type TableRowAction = {
+    label?: string;
+    /**
+     * 操作栏宽度
+     */
+    width?: number | string;
+    /**
+     * 图标是否展开
+     */
+    expand?: boolean;
+    /**
+     * 展开操作栏的数量
+     */
+    expandNum?: number;
+    /**
+     * 操作栏固定位置
+     */
+    fixed?: 'left' | 'right' | 'auto';
+    /**
+     * 按钮设置
+     */
+    btns?: ButtonTypes[];
+};
+type DownloadType = 'current' | 'select' | 'all';
+type TableSetting = {
+    /**
+     * 是否显示搜索
+     */
+    search?: boolean;
+    /**
+     * 表格下载
+     */
+    download?: DownloadType[];
+    /**
+     * 是否显示列控制
+     */
+    setting?: boolean;
+    /**
+     * 全屏按钮
+     */
+    fullscreen?: boolean;
+};
+type Source = {
+    /**
+     * 权限前缀
+     */
+    authPrefix?: string;
+    /**
+     * 分页改变
+     */
+    onTableChange?: (params: TableChangeParams) => Promise<any>;
+    /**
+     * 打开新增弹框
+     */
+    onAdd?: () => void;
+    /**
+     * 打开编辑弹框
+     */
+    onEdit?: (row: Recordable) => void;
+    /**
+     * 单个条目删除
+     */
+    onDelete?: (row: Recordable) => Promise<any>;
+    /**
+     * 批量删除
+     */
+    onDeletes?: (ids: RowKey[], type?: 'single' | 'multi') => void;
+    /**
+     * 保存
+     * @param opt
+     * 		headerData 额外的表头数据
+     * 		footerData 尾部数据
+     */
+    onDownload?: (excelData: SourceDownloadType, opt?: ExcelExtraDataType) => void;
+    /**
+     * 根据id查找数据
+     */
+    onQueryById?: (id: RowKey) => Promise<any>;
+    /**
+     * 是否展示form查询条件
+     */
+    setShowSearch?: (show: boolean) => void;
+    /**
+     * 注册实例
+     */
+    registerInstance?: (instance: TableInsType & {
+        rowKey?: RowKey;
+    }, type: 'table') => void;
+};
+type TableType = Source & {
+    /**
+     * 权限前缀
+     */
+    authPrefix?: string;
+    /**
+     * 默认是否展示搜索条件
+     */
+    defaultShowSearch?: boolean;
+    /**
+     * 单击一行任意位置都可以选中行
+     * @default false
+     */
+    clickToSelectRow?: boolean;
+    /**
+     * 分页数据改变是否清空选中的数据
+     * @default false
+     */
+    clearSelectOnPageChange?: boolean;
+    /**
+     * 是否支持拖拽改变列宽
+     * @default true
+     */
+    resizable?: boolean;
+    /**
+     * 最小拖拽宽度
+     * @default 40
+     */
+    minResizeWidth?: number;
+    /**
+     * 最大拖拽宽度
+     * @default 700
+     */
+    maxResizeWidth?: number;
+    /**
+     * 是否显示序号列
+     * @default false
+     */
+    showIndexColumn?: boolean;
+    /**
+     * 是否显示checkbox列
+     */
+    showCheckboxColumn?: boolean;
+    /**
+     * 是否展开按钮组 只针对列表右侧的按钮组
+     */
+    expandActions?: boolean;
+    /**
+     * 表格是否需要边框
+     * @default true
+     */
+    bordered?: boolean;
+    /**
+     * 是否为斑马纹 table
+     */
+    stripe?: boolean;
+    /**
+     * 是否显示分页数据
+     * @default true
+     */
+    showPagination?: boolean;
+    /**
+     * 分页参数
+     */
+    pagination?: Ref<PaginationType>;
+    /**
+     * 加载状态
+     */
+    loading?: {
+        [key: string]: boolean;
+    } | Ref<boolean>;
+    /**
+     * 工具栏按钮
+     */
+    toolbar?: ButtonTypes[];
+    /**
+     * 操作栏
+     */
+    operations?: TableRowAction | ButtonTypes[];
+    /**
+     * 表格设置
+     */
+    tableSetting?: TableSetting | boolean;
+    /**
+     * 为了更好的渲染效果预先多加载的行数
+     * @default 2
+     */
+    cache?: number;
+    /**
+     * 渲染动态的单元格的预估高度
+     */
+    estimatedRowHeight?: number;
+    /**
+     * header 部分的自定义 class 名
+     */
+    headerClass?: string | ((param: {
+        columns: ColumnType[];
+        headerIndex: number;
+    }) => string);
+    /**
+     * header 部分的自定义 props 名
+     */
+    headerProps?: Record<string, any> | ((param: {
+        columns: ColumnType[];
+        headerIndex: number;
+    }) => Record<string, any>);
+    /**
+     * header cell 部分的自定义 props 名
+     */
+    headerCellProps?: Record<string, any> | ((param: {
+        columns: ColumnType[];
+        column: ColumnType;
+        columnIndex: number;
+        headerIndex: number;
+        style: CSSProperties;
+    }) => Record<string, any>);
+    /**
+     * Header 的高度由height设置。 如果传入数组，它会使 header row 等于数组长度
+     * @default 50
+     */
+    headerHeight?: number | number[];
+    /**
+     * Footer 部分的高度，当传入值时，这部分将被计算入 table 的高度里
+     * @default 0
+     */
+    footerHeight?: number;
+    /**
+     * row wrapper 部分的自定义 class 名
+     */
+    rowClass?: string | ((param: {
+        columns: ColumnType[];
+        rowData: any;
+        rowIndex: number;
+    }) => string);
+    /**
+     * 每行的 key 值，如果不提供，将使用索引 index 代替
+     * @default 'id'
+     */
+    rowKey?: KeyType;
+    /**
+     * row component 部分的自定义 class 名
+     */
+    rowProps?: Record<string, any> | ((param: {
+        columns: ColumnType[];
+        rowData: any;
+        rowIndex: number;
+    }) => Record<string, any>);
+    /**
+     * 每行的高度, 用于计算表的总高度
+     * @default 50
+     */
+    rowHeight?: number;
+    /**
+     * 当每行添加了一系列事件处理器时触发
+     */
+    rowEventHandlers?: {
+        onClick?: RowEventHandler;
+        onContextmenu?: RowEventHandler;
+        onDblclick?: RowEventHandler;
+        onMouseenter?: RowEventHandler;
+        onMouseleave?: RowEventHandler;
+    };
+    /**
+     * 每个单元格 cell 的自定义 props (除了 header cell 以外)
+     */
+    cellProps?: Record<string, any> | ((param: {
+        column: ColumnType;
+        columns: ColumnType[];
+        columnIndex: number;
+        cellData: any;
+        rowData: any;
+        rowIndex: number;
+    }) => void);
+    /**
+     * 列 column 的配置数组
+     * @default []
+     */
+    columns?: ColumnType[];
+    /**
+     * 要在表中渲染的数据数组
+     * @default []
+     */
+    data?: any[] | Ref<any[]>;
+    /**
+     * 一个自定义方法从数据源获取数据
+     */
+    dataGetter?: DataGetter;
+    /**
+     * 渲染行在表格主内容上方和 header 下方区域的数据
+     */
+    fixedData?: Data;
+    /**
+     * 列的 key 来标记哪个行可以被展开
+     */
+    expandColumnKey?: string;
+    /**
+     * 存放行展开状态的 key 的数组，可以和 v-model 搭配使用
+     */
+    expandedRowKeys?: KeyType[];
+    /**
+     * 默认展开的行的 key 的数组, 这个数据不是响应式的
+     */
+    defaultExpandedRowKeys?: KeyType[];
+    /**
+     * 表格的类名称，将应用于表格的全部的三个部分 (左、右、主)
+     */
+    class?: string | Array<string> | Record<string, any>;
+    /**
+     * 单元格宽度是自适应还是固定
+     * @default false
+     */
+    fixed?: boolean;
+    /**
+     * 表格的宽度
+     */
+    width?: number;
+    /**
+     * 表格的高度
+     */
+    height?: number;
+    /**
+     * 表格的最大高度
+     */
+    maxHeight?: number;
+    /**
+     * 树形表的水平缩进
+     * @default 12
+     */
+    indentSize?: number;
+    /**
+     * 配置表格的水平滚动条大小，防止水平和垂直滚动条重叠。
+     * @default 6
+     */
+    hScrollbarSize?: number;
+    /**
+     * 配置表格的垂直滚动条大小，防止水平和垂直滚动条重叠。
+     * @default 6
+     */
+    vScrollbarSize?: number;
+    /**
+     * 如果开启，滚动条将一直显示，反之只会在鼠标经过时显示
+     * @default false
+     */
+    scrollbarAlwaysOn?: boolean;
+    /**
+     * 排序方式
+     */
+    sortBy?: SortBy;
+    /**
+     * 多个排序
+     */
+    sortState?: SortState;
+    /**
+     * 列排序时调用
+     */
+    onColumnSort?: (data: {
+        column: ColumnType;
+        key: KeyType;
+        order: SortOrder;
+    }) => void;
+    /**
+     * 行展开状态改变时触发
+     */
+    onExpandedRowsChange?: (data: KeyType[]) => void;
+    /**
+     * 到达表格末尾时触发。 回调包含剩余距离，它通常是滚动条高度。
+     */
+    onEndReached?: (remainDistance: number) => void;
+    /**
+     * 表格被用户滚动后触发
+     */
+    onScroll?: (data: {
+        xAxisScrollDir: 'forward' | 'backward';
+        scrollLeft: number;
+        yAxisScrollDir: 'forward' | 'backward';
+        scrollTop: number;
+    }) => void;
+    /**
+     * 当行被渲染后触发
+     */
+    onRowsRendered?: (data: {
+        rowCacheStart: number;
+        rowCacheEnd: number;
+        rowVisibleStart: number;
+        rowVisibleEnd: number;
+    }) => void;
+    /**
+     * 点击箭头图标展开/折叠树节点时触发
+     */
+    onRowExpand?: (data: {
+        expanded: boolean;
+        rowKey: KeyType;
+    } & RowCommonParams) => void;
+};
+/**
+ * 表单暴露的方法，供外面使用
+ */
+type RowKey = number | string;
+type SetColumnsParams = {
+    /**
+     * 是否或略列索引
+     */
+    ignoreIndex?: boolean;
+    /**
+     * 是否忽略操作列
+     */
+    ignoreAction?: boolean;
+    /**
+     * 是否忽略排序列
+     */
+    sort?: boolean;
+};
+type TableInsType = {
+    /**
+     * 动态设置表单配置
+     */
+    setProps: (props: Partial<TableType>) => void;
+    /**
+     * 设置加载状态
+     */
+    setLoading: (loading: boolean) => void;
+    /**
+     * 清空选中的行
+     */
+    clearSelectedRowKeys: () => void;
+    /**
+     * 获取选中的行
+     */
+    getSelectRows: () => Recordable[];
+    /**
+     * 获取选中的行的keys集合
+     */
+    getSelectedRowKeys: () => RowKey[];
+    /**
+     * 根据keys设置选中的行
+     */
+    setSelectedRowKeys: (keys: RowKey[]) => void;
+    /**
+     * 获取列信息
+     */
+    getColumns: (opt?: SetColumnsParams) => ColumnType[];
+    /**
+     * 设置列信息
+     * @param columns 列信息
+     * @desc 如果是string的数组 则表示根据dataKey设置列显示
+     */
+    setColumns: (columns: ColumnType[] | string[]) => void;
+    /**
+     * 动态设置列信息
+     */
+    setColumnsByDataIndex: (dataIndex: string | undefined, schema: ColumnType) => void;
+    /**
+     * 获取有效列头信息
+     */
+    getCacheColumns: () => ColumnType[];
+    /**
+     * 根据key获取行信息
+     */
+    findRowByKey: (rowKey: RowKey) => Data | undefined;
+    /**
+     * 更新行信息
+     */
+    updateRow: (rowKey: string | number, record: Recordable) => Data | undefined;
+    /**
+     * 获取分页信息
+     */
+    getPagination: () => PaginationType | false;
+    /**
+     * 设置分页数据
+     */
+    setPagination: (pagination: PaginationType) => void;
+    [key: string]: any;
+};
+type ColumnOptionsType = {
+    label: string;
+    value: string;
+    fixed?: boolean | 'left' | 'right';
+};
+type SelectionCellProps = {
+    value: boolean;
+    intermediate?: boolean;
+    onChange: (value: CheckboxValueType) => void;
+};
+export type { Data, TableType, TableInsType, RowKey, ColumnType, SortState, SortOrder, SortBy, TableSetting, DownloadType, SetColumnsParams, ColumnOptionsType, TableRowAction, SelectionCellProps, CellFormat };

package/dist/es/lib/components/tree/index.d.ts

@@ -0,0 +1,7 @@
+import type { SFCWithInstall } from '~utils/withInstall';
+import Tree from './src/index.vue';
+import { useTree } from './src/hooks/useTree';
+import type { ContextMenuItem } from './src/types';
+declare const DtTree: SFCWithInstall<typeof Tree>;
+export { DtTree, DtTree as default, useTree };
+export type { ContextMenuItem };

package/dist/es/lib/components/tree/src/enums/index.d.ts

@@ -0,0 +1,6 @@
+export declare enum ToolbarEnum {
+    SELECT_ALL = 0,
+    UN_SELECT_ALL = 1,
+    EXPAND_ALL = 2,
+    UN_EXPAND_ALL = 3
+}

package/dist/es/lib/components/tree/src/hooks/useContextMenu.d.ts

@@ -0,0 +1,11 @@
+import type { ContextMenuItem } from '../types';
+import type { Recordable } from '@dt-frames/core';
+type CreateContextOptions = {
+    event: MouseEvent;
+    icon?: string;
+    styles?: any;
+    items?: ContextMenuItem[];
+    node?: Recordable;
+};
+export declare function useContextMenu(): (((options: CreateContextOptions) => Promise<unknown>) | (() => void))[];
+export {};

package/dist/es/lib/components/tree/src/hooks/useTree.d.ts

@@ -0,0 +1,2 @@
+import type { TreeProp, TreeRef, VirtualTreeRef } from '../types';
+export declare function useTree(props: TreeProp): [register: (instance: TreeRef | VirtualTreeRef) => void, ins: TreeRef | VirtualTreeRef];