@dt-frames/ui 3.0.1 → 4.0.1

package/dist/es/lib/components/form/src/utils/index.d.ts

@@ -0,0 +1,16 @@
+import type { ComponentType } from '../types/item';
+import type { RuleType } from '../types/form';
+export declare const DATE_PICKER_TYPES: string[];
+export declare const DATE_MODE_TYPE: {
+    time: string;
+    date: string;
+    month: string;
+    year: string;
+};
+/**
+ * 生成占位符
+ * 根据组件名称不同 生成不同的占位符
+ */
+export declare function createPlaceholder(component: ComponentType): string;
+export declare function handleInputNumberValue(component?: ComponentType, val?: any): any;
+export declare function setComponentRuleType(rule: RuleType, component: ComponentType, valueFormat: string): void;

package/dist/es/lib/components/hover-card/index.d.ts

@@ -0,0 +1,7 @@
+import HoverCard from './src/hover-card.vue';
+import HoverCardContent from './src/hover-card-content.vue';
+import HoverCardTrigger from './src/hover-card-trigger.vue';
+import type { SFCWithInstall } from '~utils/withInstall';
+export declare const DtHoverCard: SFCWithInstall<typeof HoverCard>;
+export declare const DtHoverCardContent: SFCWithInstall<typeof HoverCardContent>;
+export declare const DtHoverCardTrigger: SFCWithInstall<typeof HoverCardTrigger>;

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

@@ -0,0 +1,4 @@
+import type { SFCWithInstall } from '~utils/withInstall';
+import Icon from './src/index.vue';
+declare const DtIcon: SFCWithInstall<typeof Icon>;
+export { DtIcon, DtIcon as default };

package/dist/es/lib/components/icon-picker/index.d.ts

@@ -0,0 +1,4 @@
+import type { SFCWithInstall } from '~utils/withInstall';
+import IconPicker from './src/index.vue';
+declare const DtIconPicker: SFCWithInstall<typeof IconPicker>;
+export { DtIconPicker, DtIconPicker as default };

package/dist/es/lib/components/icon-picker/src/icon.d.ts

@@ -0,0 +1,13 @@
+import type { Recordable } from '@dt-frames/core';
+/**
+ * 一个缓存对象，在不刷新页面时，无需重复请求远程接口
+ */
+export declare const ICONS_MAP: Recordable<string[]>;
+/**
+ * 通过Iconify接口获取图标集数据。
+ * 同一时间多个图标选择器同时请求同一个图标集时，实际上只会发起一次请求（所有请求共享同一份结果）。
+ * 请求结果会被缓存，刷新页面前同一个图标集不会再次请求
+ * @param prefix 图标集名称
+ * @returns 图标集中包含的所有图标名称
+ */
+export declare function fetchIconsData(prefix: string): Promise<string[]>;

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

@@ -0,0 +1,4 @@
+import type { SFCWithInstall } from '../../utils/withInstall';
+import Frame from './src/index.vue';
+declare const DtIframe: SFCWithInstall<typeof Frame>;
+export { DtIframe, DtIframe as default };

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

@@ -0,0 +1,7 @@
+import type { SFCWithInstall } from '~utils/withInstall';
+import Modal from './src/index.vue';
+import type { ModalProps } from './src/types/modal';
+import { useModal, useModalOut } from './src/hooks/useModal';
+declare const DtModal: SFCWithInstall<typeof Modal>;
+export { DtModal, DtModal as default, useModalOut, useModal };
+export type { ModalProps };

package/dist/es/lib/components/modal/src/hooks/useModal.d.ts

@@ -0,0 +1,24 @@
+import type { ModalProps, UseModalInnerReturnType, UseModalReturnType } from '../types/modal';
+declare function useModalOut(): UseModalReturnType;
+/**
+ * 通过内部控制弹框相关配置
+ * @param props 弹框属性
+ * @param setModalData 弹框数据
+ *
+ * @use
+ * 	外部弹框：
+ *
+ * 		const [register, methods, open] = useModalOut()
+ * 		methods.openModal({desc: '我是即将传入到弹框中的数据'})
+ *
+ * 	内部弹框：
+ * 		const [register, methods] = useModal({
+ * 			title: '我是弹框标题',
+ * 			width: '50%'
+ * 		}, (data) => {
+ * 			console.log('我是外部传入的数据', data)
+ * 		})
+ *
+ */
+declare function useModal(props: ModalProps, setModalData?: (data: any) => void): UseModalInnerReturnType;
+export { useModalOut, useModal };

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

@@ -0,0 +1,246 @@
+import type { Component, Ref, VNode } from 'vue';
+import type { ButtonTypes } from '../../../form';
+type ModalProps = {
+    /**
+     * 权限前缀
+     */
+    authPrefix?: string;
+    /**
+     * 加载状态
+     */
+    loading?: Ref<boolean> | boolean;
+    /**
+     * 弹框是否展示
+     */
+    open?: boolean;
+    /**
+     * 标题
+     */
+    title?: string | number | Ref<string> | Ref<number> | (() => string | number) | VNode | Component;
+    /**
+     * 对话框的宽度，默认值为 50%
+     */
+    width?: string | number;
+    /**
+     * 是否为全屏 Dialog
+     * @default false
+     */
+    fullscreen?: boolean;
+    /**
+     * 是否显示定位
+     */
+    showReposition?: boolean;
+    /**
+     * dialog CSS 中的 margin-top 值
+     * @default '15vh'
+     */
+    top?: string;
+    /**
+     * 是否需要遮罩层
+     * @default true
+     */
+    modal?: boolean;
+    /**
+     * 是否允许穿透遮罩层 modal 属性必须为 false
+     * @default false
+     */
+    modalPenetrable?: boolean;
+    /**
+     * 遮罩的自定义类名
+     */
+    modalClass?: string;
+    /**
+     * header 部分的自定义 class 名
+     */
+    headerClass?: string;
+    /**
+     * body 部分的自定义 class 名
+     */
+    bodyClass?: string;
+    /**
+     * footer 部分的自定义 class 名
+     */
+    footerClass?: string;
+    /**
+     * Dialog 自身是否插入至 body 元素上。 嵌套的 Dialog 必须指定该属性并赋值为 true
+     * @default false
+     */
+    appendToBody?: boolean;
+    /**
+     * Dialog 挂载到哪个 DOM 元素 将覆盖 append-to-body
+     * @default 'body'
+     * @type 'CSSSelector' | 'HTMLElement'
+     */
+    appendTo?: HTMLElement | string;
+    /**
+     * 是否在 Dialog 出现时将 body 滚动锁定
+     * @default true
+     */
+    lockScroll?: boolean;
+    /**
+     * dialog 打开的延时时间，单位毫秒
+     * @default 0
+     */
+    openDelay?: number;
+    /**
+     * dialog 关闭的延时时间，单位毫秒
+     * @default 0
+     */
+    closeDelay?: number;
+    /**
+     * 是否可以通过点击 modal 关闭 Dialog
+     * @default true
+     */
+    closeOnClickModal?: boolean;
+    /**
+     * 是否可以通过按下 ESC 关闭 Dialog
+     * @default true
+     */
+    closeOnPressEscape?: boolean;
+    /**
+     * 是否显示关闭按钮
+     * @default true
+     */
+    showClose?: boolean;
+    /**
+     * 关闭前的回调，会暂停 Dialog 的关闭. 回调函数内执行 done 参数方法的时候才是真正关闭对话框的时候.
+     */
+    beforeClose?: (done: () => void) => void;
+    /**
+     * 为 Dialog 启用可拖拽功能
+     * @default false
+     */
+    draggable?: boolean;
+    /**
+     * 拖动范围可以超出可视区
+     * @default false
+     */
+    overflow?: boolean;
+    /**
+     * 是否让 Dialog 的 header 和 footer 部分居中排列
+     * @default false
+     */
+    center?: boolean;
+    /**
+     * 是否水平垂直对齐对话框
+     * @default false
+     */
+    alignCenter?: boolean;
+    /**
+     * 当关闭 Dialog 时，销毁其中的元素
+     * @defafult false
+     */
+    destroyOnClose?: boolean;
+    /**
+     * 自定义关闭图标，默认 Close
+     */
+    closeIcon?: string | Component;
+    /**
+     * 和原生的 CSS 的 z-index 相同，改变 z 轴的顺序
+     */
+    zIndex?: number;
+    /**
+     * 对话框动画的自定义过渡配置。 可以是一个字符串（过渡名称），也可以是一个包含 Vue 过渡属性的对象。
+     * @default 'dialog-fade'
+     */
+    transition?: string;
+    /**
+     * 是否显示确认按钮
+     * @default true
+     */
+    showConfirmButton?: boolean;
+    /**
+     * 是否显示取消按钮
+     * @default true
+     */
+    showCancelButton?: boolean;
+    /**
+     * 是否显示全屏按钮
+     * @default true
+     */
+    showFullScreenButton?: boolean;
+    /**
+     * 弹框右下角操作按钮
+     */
+    footerButtons?: ButtonTypes[];
+    /**
+     * 对话框标题的内容；会替换标题部分，但不会移除关闭按钮。
+     */
+    headerSlot?: () => VNode | Component;
+    /**
+     * Dialog 按钮操作区的内容
+     */
+    footerSlot?: () => VNode | Component;
+    /**
+     * 切换全屏
+     */
+    onFullscreen?: (fullscreen: boolean) => void;
+    /**
+     * Dialog 打开的回调
+     */
+    onOpen?: () => void;
+    /**
+     * Dialog 打开动画结束时的回调
+     */
+    onOpened?: () => void;
+    /**
+     * Dialog 关闭的回调
+     */
+    onClose?: () => void;
+    /**
+     * Dialog 关闭动画结束时的回调
+     */
+    onClosed?: (param?: any) => void;
+    /**
+     * 输入焦点聚焦在 Dialog 内容时的回调
+     */
+    onOpenAutoFocus?: () => void;
+    /**
+     * 输入焦点从 Dialog 内容失焦时的回调
+     */
+    onCloseAutoFocus?: () => void;
+    /**
+     * 保存数据
+     */
+    onSave?: (data?: any) => void;
+};
+type ModalMethods = {
+    /**
+     * 获取当前 Dialog 的属性
+     */
+    getModalProps?: () => ModalProps;
+    /**
+     * 设置当前 Dialog 的属性
+     */
+    setModalProps: (props: Partial<ModalProps>) => void;
+    /**
+     * 弹框位置重置
+     */
+    resetPosition?: () => void;
+};
+type ReturnMethods = ModalMethods & {
+    /**
+     * 打开弹框
+     * @params row 向弹框中传入的参数
+     * @param afterClose 弹框关闭后的回调
+     */
+    openModal: (row?: any, afterClose?: (data?: any) => void) => void;
+    /**
+     * 关闭弹框
+     */
+    closeModal: () => void;
+};
+type ReturnInnerMethods = ModalMethods & {
+    /**
+     * 从内部关闭弹框
+     */
+    closeModal: (data?: any) => void;
+    /**
+     * 设置loading状态
+     */
+    setLoading: (loading: boolean) => void;
+};
+type RegisterFn = (modalMethods: ModalMethods, uuid?: string) => void;
+type UseModalReturnType = [RegisterFn, ReturnMethods, Ref<boolean>];
+type UseModalInnerReturnType = [RegisterFn, ReturnInnerMethods];
+export type { ModalProps, UseModalReturnType, UseModalInnerReturnType, ModalMethods, ReturnInnerMethods };

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

@@ -0,0 +1,9 @@
+import type { SFCWithInstall } from '~utils/withInstall';
+import Table from './src/index.vue';
+import type { PaginationType } from './src/types/pagination';
+import type { ColumnType, RowKey, SortState, SortBy, TableInsType, TableSetting, TableType, SortOrder, TableRowAction, CellFormat } from './src/types/table';
+import { useTable } from './src/hooks/useTable';
+import TableHeader from './src/components/TableHeader.vue';
+declare const DtTable: SFCWithInstall<typeof Table>;
+export { DtTable, DtTable as default, useTable, TableHeader };
+export type { TableType, TableInsType, RowKey, PaginationType, ColumnType, SortState, SortBy, SortOrder, TableSetting, TableRowAction, CellFormat };

package/dist/es/lib/components/table/src/hooks/useColumns.d.ts

@@ -0,0 +1,18 @@
+import type { ComputedRef, Ref } from 'vue';
+import type { ColumnType, SetColumnsParams, SortState, TableType } from '../types/table';
+import type { PaginationType } from '../types/pagination';
+declare function useColumns({ propsRef, paginationRef, tableElRef }: {
+    propsRef: ComputedRef<TableType>;
+    paginationRef: ComputedRef<PaginationType | false>;
+    tableElRef: Ref<(HTMLDivElement & {
+        $el: any;
+    }) | null>;
+}): {
+    getViewColumns: ComputedRef<ColumnType[]>;
+    getSortState: () => SortState;
+    getColumns: (opt?: SetColumnsParams) => ColumnType[];
+    setColumns: (columnList?: Partial<ColumnType>[] | string[]) => void;
+    setColumnsByDataIndex: (dataKey: string | undefined, value: Partial<ColumnType>) => void;
+    getCacheColumns: () => ColumnType[];
+};
+export { useColumns };

package/dist/es/lib/components/table/src/hooks/useDataSource.d.ts

@@ -0,0 +1,17 @@
+import type { ComputedRef } from 'vue';
+import type { PaginationType } from '../types/pagination';
+import type { Data, RowKey, SortState, TableType } from '../types/table';
+declare function useDataSource({ props, setPagination, clearSelectedRowKeys }: {
+    props: ComputedRef<TableType>;
+    setPagination: (info: Partial<PaginationType>) => void;
+    clearSelectedRowKeys: () => void;
+}): {
+    source: import("vue").Ref<Data[] | undefined, Data[] | undefined>;
+    handleTableChange: ({ pagination, sorter }: {
+        pagination: PaginationType;
+        sorter: SortState;
+    }) => Promise<any> | undefined;
+    updateRow: (rowKey: RowKey, rowData: Data) => Data | undefined;
+    findRowByKey: (rowKey: RowKey) => Data | undefined;
+};
+export { useDataSource };

package/dist/es/lib/components/table/src/hooks/useLoading.d.ts

@@ -0,0 +1,7 @@
+import type { ComputedRef } from 'vue';
+import type { TableType } from '../types/table';
+declare function useLoading(props: ComputedRef<TableType>): {
+    getLoading: ComputedRef<boolean>;
+    setLoading: (loading: boolean) => void;
+};
+export { useLoading };

package/dist/es/lib/components/table/src/hooks/usePagination.d.ts

@@ -0,0 +1,9 @@
+import type { ComputedRef } from 'vue';
+import type { TableType } from '../types/table';
+import type { PaginationType } from '../types/pagination';
+declare function usePagination(props: ComputedRef<TableType>): {
+    getPaginationInfo: ComputedRef<false | PaginationType>;
+    setPagination: (info: Partial<PaginationType>) => void;
+    getPagination: () => false | PaginationType;
+};
+export { usePagination };

package/dist/es/lib/components/table/src/hooks/useRowSelection.d.ts

@@ -0,0 +1,7 @@
+/**
+ * 处理表格中的选中事件
+ */
+declare function useRowSelection(): {
+    clearSelectedRowKeys: () => void;
+};
+export { useRowSelection };

package/dist/es/lib/components/table/src/hooks/useTable.d.ts

@@ -0,0 +1,3 @@
+import type { TableInsType, TableType } from '../types/table';
+declare function useTable(props: TableType): [(ins: TableInsType) => void, TableInsType];
+export { useTable };

package/dist/es/lib/components/table/src/hooks/useTableIns.d.ts

@@ -0,0 +1,12 @@
+import type { ComputedRef, Ref } from 'vue';
+import type { Nullable } from '@dt-frames/core';
+import type { Data, TableInsType, TableType } from '../types/table';
+type Instance = TableInsType & {
+    setShowSearch: (show: boolean) => void;
+    getProps: ComputedRef<TableType>;
+    source: Ref<Data[] | undefined>;
+    tableElRef: Ref<Nullable<HTMLElement>>;
+};
+export declare function createTableInstance(instance: Instance): void;
+export declare function getTableInstance(): Instance;
+export {};

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

@@ -0,0 +1,100 @@
+import type { Component, CSSProperties } from 'vue';
+type PaginationType = {
+    /**
+     * 分页大小
+     * @default 'default'
+     */
+    size?: 'large' | 'default' | 'small';
+    /**
+     * 是否为分页按钮添加背景色
+     * @default false
+     */
+    background?: boolean;
+    /**
+     * 每页显示条目个数
+     */
+    pageSize?: number;
+    /**
+     * 每页默认的条目个数，不设置时默认为10
+     * @default 10
+     */
+    defaultPageSize?: number;
+    /**
+     * 总条目数
+     */
+    total?: number;
+    /**
+     * 总页数， total 和 page-count 设置任意一个就可以达到显示页码的功能；如果要支持 page-sizes 的更改，则需要使用 total 属性
+     */
+    pageCount?: number;
+    /**
+     * 设置最大页码按钮数。 页码按钮的数量，当总页数超过该值时会折叠
+     * @default 7
+     */
+    pagerCount?: 5 | 7 | 9 | 11 | 13 | 15 | 17 | 19 | 21;
+    /**
+     * 当前页数
+     */
+    currentPage?: number;
+    /**
+     * 当前页数的默认初始值，不设置时默认为 1
+     * @default 1
+     */
+    defaultCurrentPage?: number;
+    /**
+     * 组件布局，子组件名用逗号分隔
+     * @type sizes, prev, pager, next, jumper, ->, total, slot 组合
+     * @default 'prev, pager, next, jumper, ->, total'
+     */
+    layout?: string;
+    /**
+     * 每页显示个数选择器的选项设置
+     * @default '[10, 20, 30, 40, 50, 100]'
+     */
+    pageSizes?: number[];
+    /**
+     * 下拉框挂载到哪个 DOM 元素
+     */
+    appendSizeTo?: string;
+    /**
+     * 每页显示个数选择器的下拉框类名
+     */
+    popperClass?: string;
+    /**
+     * 每页显示个数选择器的下拉框样式
+     */
+    popperStyle?: CSSProperties;
+    /**
+     * 替代图标显示的上一页文字
+     */
+    prevText?: string;
+    /**
+     * 上一页的图标， 比 prev-text 优先级更高
+     * @default ArrowLeft
+     */
+    prevIcon?: string | Component;
+    /**
+     * 替代图标显示的下一页文字
+     */
+    nextText?: string;
+    /**
+     * 下一页的图标， 比 next-text 优先级更低
+     * @default ArrowRight
+     */
+    nextIcon?: string | Component;
+    /**
+     * 是否禁用分页
+     */
+    disabled?: boolean;
+    /**
+     * 只有一页时是否隐藏
+     * @default false
+     */
+    hideOnSinglePage?: boolean;
+    /**
+     * 是否使用小型分页样式
+     * @default false
+     */
+    small?: boolean;
+};
+export type { PaginationType };