@dt-frames/ui 3.0.1 → 4.0.1

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

@@ -0,0 +1,5 @@
+import type { SFCWithInstall } from '~utils/withInstall';
+import Drawer from './src/index.vue';
+import { useDrawerOut, useDrawer } from './src/hooks/useDrawer';
+declare const DtDrawer: SFCWithInstall<typeof Drawer>;
+export { DtDrawer, DtDrawer as default, useDrawerOut, useDrawer };

package/dist/es/lib/components/drawer/src/hooks/useDrawer.d.ts

@@ -0,0 +1,3 @@
+import type { DrawerProps, UseDrawerInnerReturnType, UseDrawerReturnType } from '../types/index';
+export declare function useDrawerOut(): UseDrawerReturnType;
+export declare function useDrawer(props: DrawerProps, setDrawerData?: (params: any) => void): UseDrawerInnerReturnType;

package/dist/es/lib/components/drawer/src/types/index.d.ts

@@ -0,0 +1,208 @@
+import type { Component, Ref, VNode } from 'vue';
+import type { ButtonTypes } from '../../../form';
+export type DrawerProps = {
+    /**
+     * 是否显示确认按钮
+     * @default true
+     */
+    showConfirmButton?: boolean;
+    /**
+     * 是否显示取消按钮
+     * @default true
+     */
+    showCancelButton?: boolean;
+    /**
+     * 弹框右下角操作按钮
+     */
+    footerButtons?: ButtonTypes[];
+    /**
+     * 权限前缀
+     */
+    authPrefix?: string;
+    /**
+     * 加载状态
+     */
+    loading?: Ref<boolean> | boolean;
+    /**
+     * 标题
+     */
+    title?: string | number | Ref<string> | Ref<number> | (() => string | number) | VNode | Component;
+    /**
+     * Drawer 自身是否插入至 body 元素上。嵌套的 Drawer 必须指定该属性并赋值为 true
+     * @default false
+     */
+    appendToBody?: boolean;
+    /**
+     * 挂载到哪个 DOM 元素 将覆盖 append-to-body
+     * @default 'body'
+     */
+    appendTo?: string | HTMLElement;
+    /**
+     * 是否在 Drawer 出现时将 body 滚动锁定
+     * @default true
+     */
+    lockScroll?: boolean;
+    /**
+     * 关闭前的回调，会暂停 Drawer 的关闭
+     * @desc (done: (cancel?: boolean) => void) => void(done 是个 function type 接受一个 boolean 参数, 执行 done 使用 true 参数或不提供参数将会终止关闭)
+     */
+    beforeClose?: (done: (cancel?: boolean) => void) => void;
+    /**
+     * 是否可以通过点击 modal 关闭 Drawer
+     * @default true
+     */
+    closeOnClickModal?: boolean;
+    /**
+     * 是否可以通过按下 ESC 关闭 Drawer
+     * @default true
+     */
+    closeOnPressEscape?: boolean;
+    /**
+     * Drawer 打开的延时时间，单位毫秒
+     * @default 0
+     */
+    openDelay?: number;
+    /**
+     * Drawer 关闭的延时时间，单位毫秒
+     * @default 0
+     */
+    closeDelay?: number;
+    /**
+     * 控制是否在关闭 Drawer 之后将子元素全部销毁
+     * @default false
+     */
+    destroyOnClose?: boolean;
+    /**
+     * 是否需要遮罩层
+     * @default true
+     */
+    modal?: boolean;
+    /**
+     * 是否允许穿透遮罩层。 modal 属性必须为 false。
+     * @default false
+     */
+    modalPenetrable?: boolean;
+    /**
+     * Drawer 打开的方向
+     * @enum 'rtl'
+     */
+    direction?: 'rtl' | 'ltr' | 'ttb' | 'btt';
+    /**
+     * 为抽屉启用可调整大小的功能
+     * @default false
+     */
+    resizable?: boolean;
+    /**
+     * 是否显示关闭按钮
+     * @default true
+     */
+    showClose?: boolean;
+    /**
+     * Drawer 窗体的大小, 当使用 number 类型时, 以像素为单位, 当使用 string 类型时, 请传入 'x%', 否则便会以 number 类型解释
+     * @default '30%''
+     */
+    size?: string | number;
+    /**
+     * 控制是否显示 header 栏, 默认为 true, 当此项为 false 时, title attribute 和 title slot 均不生效
+     * @default true
+     */
+    withHeader?: boolean;
+    /**
+     * 遮罩层的自定义类名
+     */
+    modalClass?: string;
+    /**
+     * header 部分的自定义 class 名
+     */
+    headerClass?: string;
+    /**
+     * body 部分的自定义 class 名
+     */
+    bodyClass?: string;
+    /**
+     * footer 部分的自定义 class 名
+     */
+    footerClass?: string;
+    /**
+     * 设置 z-index
+     */
+    zIndex?: number;
+    /**
+     * header 的 aria-level 属性
+     * @default '2'
+     */
+    headerAriaLevel?: string;
+    /**
+     * Drawer 的自定义类名
+     */
+    customClass?: string;
+    /**
+     * 是否为内部弹框 在content内部
+     * @default false
+     */
+    innerDrawer?: boolean;
+    /**
+     * Drawer 打开的回调
+     */
+    onOpen?: () => void;
+    /**
+     * Drawer 打开动画结束时的回调
+     */
+    onOpened?: () => void;
+    /**
+     * Drawer 关闭的回调
+     */
+    onClose?: () => void;
+    /**
+     * Drawer 关闭动画结束时的回调
+     */
+    onClosed?: () => void;
+    /**
+     * 输入焦点聚焦在 Drawer 内容时的回调
+     */
+    onOpenAutoFocus?: () => void;
+    /**
+     * 输入焦点从 Drawer 内容失焦时的回调
+     */
+    onCloseAutoFocus?: () => void;
+    /**
+     * 开始调整大小时触发（当启用 resizable 时）
+     */
+    onResizeStart?: (evt: MouseEvent, size: number) => void;
+    /**
+     * 调整大小时触发（启用 resizable 时）
+     */
+    onResize?: (evt: MouseEvent, size: number) => void;
+    /**
+     * 当调整大小结束时触发（当启用 resizable 时）
+     */
+    onResizeEnd?: (evt: MouseEvent, size: number) => void;
+    /**
+     * 保存数据
+     */
+    onSave?: (data?: any) => void;
+    /**
+     * Drawer 标题的内容；会替换标题部分，但不会移除关闭按钮。
+     */
+    headerSlot?: () => VNode | Component;
+    /**
+     * Drawer 页脚部分
+     */
+    footerSlot?: () => VNode | Component;
+    [key: string]: any;
+};
+export type DrawerMethods = {
+    getDrawerProps?: () => DrawerProps;
+    setDrawerProps: (props: Partial<DrawerProps>) => void;
+};
+export interface ReturnMethods extends DrawerMethods {
+    openDrawer: <T = any, U = any>(params?: T, afterClose?: (res: U) => void) => void;
+    closeDrawer: () => void;
+}
+export type RegisterFn = (drawerInstance: DrawerMethods, uuid?: string) => void;
+export interface ReturnInnerMethods extends DrawerMethods {
+    closeDrawer: () => void;
+    setLoading: (loading: boolean) => void;
+}
+export type UseDrawerReturnType = [RegisterFn, ReturnMethods, Ref<boolean>];
+export type UseDrawerInnerReturnType = [RegisterFn, ReturnInnerMethods];

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

@@ -0,0 +1,9 @@
+import type { SFCWithInstall } from '~utils/withInstall';
+import Form from './src/index.vue';
+import FormButtons from './src/conponents/FormButtons.vue';
+import { useForm } from './src/hooks/useForm';
+import type { FormInsType, FormMode, FormProps, ButtonTypes, FormRef } from './src/types/form';
+import type { ComponentType, FormSchema } from './src/types/item';
+declare const DtForm: SFCWithInstall<typeof Form>;
+export { DtForm, DtForm as default, useForm, FormButtons };
+export type { FormProps, FormMode, FormInsType, ComponentType, FormSchema, ButtonTypes, FormRef };

package/dist/es/lib/components/form/src/conponents/componentMap.d.ts

@@ -0,0 +1,4 @@
+import type { Component } from 'vue';
+import type { ComponentType } from '../types/item';
+declare const componentMap: Map<ComponentType, Component>;
+export { componentMap };

package/dist/es/lib/components/form/src/hooks/useForm.d.ts

@@ -0,0 +1,8 @@
+import type { FormInsType, FormProps } from '../types/form';
+/**
+ * 表单注册及实例构建
+ */
+type RegisterFn = (formInstance: FormInsType) => void;
+type UseFormReturnType = [RegisterFn, FormInsType];
+export declare function useForm(props: FormProps): UseFormReturnType;
+export {};

package/dist/es/lib/components/form/src/hooks/useFormActions.d.ts

@@ -0,0 +1,32 @@
+import type { Recordable } from '@dt-frames/core';
+import type { ComputedRef, Ref } from 'vue';
+import type { ButtonTypes, FormProps } from '../types/form';
+import type { FormSchema } from '../types/item';
+type FormActionType = {
+    updateSchema: (data: Partial<FormSchema> | Partial<FormSchema>[]) => void;
+    getProps: ComputedRef<FormProps>;
+    defaultValue: Ref<Recordable>;
+    getModel: () => Recordable;
+    setModel: (values: Recordable) => void;
+};
+export declare function useFormActions({ getProps, defaultValue, updateSchema, getModel, setModel }: FormActionType): {
+    handleMethod: (params: boolean | ButtonTypes) => void;
+    actionStyle: ComputedRef<any>;
+    actionsProps: ComputedRef<{
+        mode: "" | "modal" | null | undefined;
+        showAdvancedButton: boolean;
+        isAdvanced: boolean;
+        buttonList: ButtonTypes[];
+        colspan: {
+            span: number;
+        };
+    } | {
+        showAdvancedButton: boolean;
+        buttonList: ButtonTypes[];
+        colspan: Partial<import("element-plus").ColProps> | undefined;
+        style: {
+            marginLeft: string;
+        };
+    }>;
+};
+export {};

package/dist/es/lib/components/form/src/hooks/useFormEvent.d.ts

@@ -0,0 +1,29 @@
+import type { Recordable } from '@dt-frames/core';
+import type { FormSchema } from '../types/item';
+import type { ComputedRef, Ref } from 'vue';
+import type { FormProps } from '../types/form';
+import type { FormInstance, FormValidateCallback } from 'element-plus';
+type FormEventType = {
+    schemas: ComputedRef<FormSchema[]>;
+    formModel: Recordable;
+    defaultValue: Ref<Recordable>;
+    formElRef: Ref<FormInstance | undefined>;
+    schemaRef: Ref<FormSchema[] | null>;
+    getProps: ComputedRef<FormProps>;
+    handleFormValues: (model: Recordable) => Recordable;
+};
+export declare function useFormEvent({ formModel, formElRef, schemas, schemaRef, getProps, defaultValue, handleFormValues }: FormEventType): {
+    getModel: () => Recordable;
+    updateSchema: (data: Partial<FormSchema> | Partial<FormSchema>[]) => void;
+    setModel: (values: Recordable, reset?: boolean) => Promise<void>;
+    resetSchema: (data: Partial<FormSchema> | Partial<FormSchema>[]) => void;
+    clearValidate: (name?: string | string[]) => Promise<void>;
+    resetFields: (fields?: string | string[]) => Promise<void>;
+    resetForms: () => void;
+    removeFormByName: (names: string | string[]) => void;
+    appendFormItems: (_schema: FormSchema[], prefixName?: string, first?: boolean) => void;
+    scrollToField: (name: string) => Promise<void | undefined>;
+    validate: (callback?: FormValidateCallback) => Promise<void>;
+    validateField: (nameList: string[]) => Promise<boolean>;
+};
+export {};

package/dist/es/lib/components/form/src/hooks/useFormValues.d.ts

@@ -0,0 +1,13 @@
+import type { Recordable } from '@dt-frames/core';
+import type { ComputedRef, Ref } from 'vue';
+import type { FormSchema } from '../types/item';
+type FormProps = {
+    defaultValue: Ref<Recordable>;
+    schemas: ComputedRef<FormSchema[]>;
+    formModel: Recordable;
+};
+export declare function useFormValues({ defaultValue, schemas, formModel }: FormProps): {
+    handleFormValues: (model: Recordable) => Recordable;
+    initDef: () => void;
+};
+export {};

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

@@ -0,0 +1,355 @@
+import type { Recordable } from '@dt-frames/core';
+import type { Component, Reactive, Ref } from 'vue';
+import type { FormSchema, StrOrDynamicStr } from './item';
+import type { ColProps, FormValidateCallback, RowProps } from 'element-plus';
+/**
+ * @desc
+ * 	 filter: 查询条件中的表单(表单布局不一样, 会多 查询/重置/更多 三个按钮)
+ *   model: 弹框中的表单
+ */
+type FormMode = 'filter' | 'modal' | null | '' | undefined;
+/**
+ * @desc 按钮属性
+ */
+type ButtonTypes = {
+    /**
+     * 按钮名称
+     */
+    label: string | ((row: Recordable) => string);
+    /**
+     * 按钮颜色
+     */
+    color?: string;
+    /**
+     * 按钮类型
+     * @default 'primary'
+     */
+    type?: 'primary' | 'success' | 'warning' | 'danger' | 'info' | 'text';
+    /**
+     * 按钮class
+     */
+    class?: string;
+    /**
+     * 是否禁用
+     */
+    disabled?: boolean;
+    /**
+     * 是否显示
+     */
+    show?: StrOrDynamicStr;
+    /**
+     * 按钮前面图标
+     * @desc svg图标的名称
+     */
+    preIcon?: string | Component;
+    /**
+     * 按钮后面图标
+     * @desc svg图标的名称
+     */
+    postIcon?: string | Component;
+    /**
+     * 图标大小
+     */
+    iconSize?: number;
+    /**
+     * 按钮权限
+     */
+    auth?: string;
+    /**
+     * 是否处于加载中
+     */
+    loading?: Ref<boolean>;
+    /**
+     * 是否为朴素按钮
+     */
+    plain?: boolean;
+    /**
+     * 是否为幽灵按钮
+     */
+    ghost?: boolean;
+    /**
+     * 是否为圆角按钮
+     */
+    round?: boolean;
+    /**
+     * 是否为圆形按钮
+     */
+    circle?: boolean;
+    /**
+     * 按钮点击事件
+     */
+    onClick?: (...args: any) => any;
+};
+type Source = {
+    /**
+     * 注册实例
+     */
+    registerInstance?: (instance: FormInsType, type: 'form') => void;
+};
+type FormProps = Source & {
+    /**
+     * 表单模式
+     */
+    mode?: FormMode;
+    /**
+     * 表单数据对象
+     */
+    model?: Recordable;
+    /**
+     * 是否紧凑布局
+     */
+    compact?: boolean;
+    /**
+     * 行内表单模式
+     * @default false
+     */
+    inline?: boolean;
+    /**
+     * 表单域标签的位置， 当设置为 left 或 right 时，则也需要设置 label-width 属性
+     * @default 'right'
+     */
+    labelPosition?: 'left' | 'right' | 'top';
+    /**
+     * 标签的长度，例如 '50px'。 作为 Form 直接子元素的 form-item 会继承该值。 可以使用 auto
+     * @default 100
+     */
+    labelWidth?: string | number;
+    /**
+     * 表单域标签的后缀
+     */
+    labelSuffix?: string;
+    /**
+     * 行相关样式
+     */
+    rowProps?: RowProps;
+    /**
+     * 列相关样式
+     */
+    colProps?: Partial<ColProps>;
+    /**
+     * 默认占多少, 总共24, 由于页面经常需要配置列占比，这里设置一个快捷参数
+     */
+    span?: number;
+    /**
+     * 是否显示必填字段的标签旁边的红色星号
+     * @default false
+     */
+    hideRequiredAsterisk?: boolean;
+    /**
+     * 星号的位置
+     */
+    requireAsteriskPosition?: 'left' | 'right';
+    /**
+     * 是否在 rules 属性改变后立即触发一次验证
+     * @default true
+     */
+    validateOnRuleChange?: boolean;
+    /**
+     * 用于控制该表单内组件的尺寸
+     */
+    size?: 'large' | 'default' | 'small';
+    /**
+     * 是否禁用该表单内的所有组件。 如果设置为 true, 它将覆盖内部分已禁用 `` prop
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * 是否显示清除按钮
+     * @default false
+     */
+    clearable?: boolean;
+    /**
+     * 表单数据配置项
+     */
+    schemas?: FormSchema[];
+    /**
+     * 仅查询模式支持
+     * @default true
+     */
+    autoFetchOnEnter?: boolean;
+    /**
+     * 自动查询 只支持在 'search' 模式, 应用在curd中
+     */
+    autoFetch?: boolean;
+    /**
+     * 最小显示的条目数
+     */
+    minShowColumn?: number;
+    /**
+     * 是否显示折叠按钮 在filter模式
+     * @default true
+     */
+    showAdvancedButton?: boolean;
+    /**
+     * label后面是否需要':'
+     * @default true
+     */
+    colon?: boolean;
+    /**
+     * 是否展示form 与table 联动中使用
+     * @default true
+     */
+    showSearch?: boolean;
+    /**
+     * 查询执行的函数
+     */
+    onSearch?: (params: Recordable) => void;
+    /**
+     * 重置执行的函数
+     */
+    onReset?: (params: Recordable) => void;
+    /**
+     * 修改按钮 仅弹框模式支持
+     */
+    buttons?: ButtonTypes[] | null | boolean;
+    /**
+     * 按钮加载状态
+     */
+    loading?: {
+        [key: string]: boolean;
+    } | Ref<boolean>;
+    /**
+     * 表单发生改变
+     */
+    modelChange?: (params: Recordable, key?: string, value?: any) => void;
+};
+/**
+ * 表单暴露的方法，供外面使用
+ */
+type FormInsType = {
+    /**
+     * 设置表单属性
+     */
+    setProps: (props: FormProps) => void;
+    /**
+     * 更新表单项配置
+     */
+    updateSchema: (schemas: Partial<FormSchema> | Partial<FormSchema>[]) => void;
+    /**
+     * 重置某个表单项
+     */
+    resetSchema: (schemas: Partial<FormSchema> | Partial<FormSchema>[]) => void;
+    /**
+     * 根据名称 删除某个表单项
+     */
+    removeFormByName: (name: string | string[]) => void;
+    /**
+     * 追加某个表单项
+     */
+    appendFormItems: (schema: FormSchema[], prefixField?: string, first?: boolean | undefined) => void;
+    /**
+     * 清理某个字段的表单验证信息
+     */
+    clearValidate: (name?: string | string[]) => Promise<void>;
+    /**
+     * 对整个表单的内容进行验证。 接收一个回调函数，或返回 Promise
+     */
+    validate: (callback?: FormValidateCallback) => Promise<void>;
+    /**
+     *
+     * @param nameList
+     * @returns
+     */
+    scrollToField: (name: string) => Promise<void>;
+    /**
+     * 验证具体的某个字段
+     */
+    validateField: (nameList: string[]) => Promise<boolean>;
+    /**
+     * 设置表单的参数配置
+     * @param values 需要设置的属性
+     * @param reset 是否重置表单
+     *
+     * @expample
+     *	```ts
+     *	// 原始值
+     * formModel = { a: 1 }
+     *
+     * // 与原有的表单数据进行合并 Object.assign
+     * setModel({b: 2, a: 3}) 		// formModel的值为 {a: 3, b: 2}
+     * // 先重置 再进行值的设置
+     * setModel({b: 1}, true) 		// formModel的值为 {b: 1}
+     * `
+     */
+    setModel: (values: Recordable, reset?: boolean) => Promise<void>;
+    /**
+     * 获取所有的表单值
+     */
+    getModel: () => Recordable;
+    /**
+     * 重置该表单项，将其值重置为初始值，并移除校验结果
+     * @param fields 需要重置的字段
+     */
+    resetFields: (fields: string | string[]) => void;
+    /**
+     * 重置表单数据
+     */
+    resetForms: () => void;
+};
+/**
+ * 校验规则
+ */
+type RuleType = {
+    /**
+     * 枚举类型
+     * @example {
+            type: 'enum',
+            enum: [true],
+            message: '',
+        }
+     */
+    enum?: string;
+    /**
+     * 字段长度
+     */
+    len?: number;
+    /**
+     * 最大长度
+     */
+    max?: number;
+    /**
+     * 校验文案
+     */
+    message?: string;
+    /**
+     * 最小长度
+     */
+    min?: number;
+    /**
+     * 正则表达式校验
+     */
+    pattern?: RegExp;
+    /**
+     * 是否必选
+     */
+    required?: boolean;
+    /**
+     * 校验前转换字段值
+     */
+    transform?: (value: string) => string;
+    /**
+     * 校验触发的时机
+     */
+    trigger?: 'blur' | 'change';
+    /**
+     * 内置校验类型
+     */
+    type?: string;
+    /**
+     * 自定义校验（注意，callback 必须被调用）
+     */
+    validator?: (rule: any, value: any, callback: any) => void;
+    /**
+     * 必选时，空格是否会被视为错误
+     * @default false
+     */
+    whitespace?: boolean;
+    [key: string]: any;
+};
+/**
+ * 表单实例
+ */
+type FormRef = FormInsType & {
+    formModel: Reactive<Recordable>;
+};
+export type { FormProps, FormMode, FormInsType, ButtonTypes, RuleType, FormRef };