@dt-frames/ui 2.0.23 → 3.0.1

package/es/components/form/src/index.d.ts

@@ -0,0 +1,358 @@
+import { FormActionType } from './types/actions.type';
+import { FormSchema } from './types/form.type';
+declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
+    mode: {
+        type: globalThis.PropType<"search" | "dialog">;
+        default: string;
+    };
+    autoFetch: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    model: {
+        type: globalThis.PropType<globalThis.Recordable>;
+        default: () => {};
+    };
+    layout: {
+        type: globalThis.PropType<"vertical" | "horizontal" | "inline">;
+        default: string;
+    };
+    labelWidth: {
+        type: globalThis.PropType<string | number>;
+        default: number;
+    };
+    enLabelWidth: {
+        type: globalThis.PropType<string | number>;
+        default: number;
+    };
+    labelAlign: {
+        type: globalThis.PropType<"left" | "right">;
+        default: string;
+    };
+    labelCol: {
+        type: globalThis.PropType<Partial<import("./types/form.type").ColEx>>;
+        default: () => {};
+    };
+    wrapperCol: {
+        type: globalThis.PropType<Partial<import("./types/form.type").ColEx>>;
+        default: () => {};
+    };
+    rowProps: {
+        type: globalThis.PropType<Partial<import("vue").ExtractPropTypes<{
+            align: {
+                type: globalThis.PropType<"top" | "stretch" | "bottom" | "middle" | {
+                    xxl?: "top" | "stretch" | "bottom" | "middle";
+                    xl?: "top" | "stretch" | "bottom" | "middle";
+                    lg?: "top" | "stretch" | "bottom" | "middle";
+                    md?: "top" | "stretch" | "bottom" | "middle";
+                    sm?: "top" | "stretch" | "bottom" | "middle";
+                    xs?: "top" | "stretch" | "bottom" | "middle";
+                }>;
+                default: "top" | "stretch" | "bottom" | "middle" | {
+                    xxl?: "top" | "stretch" | "bottom" | "middle";
+                    xl?: "top" | "stretch" | "bottom" | "middle";
+                    lg?: "top" | "stretch" | "bottom" | "middle";
+                    md?: "top" | "stretch" | "bottom" | "middle";
+                    sm?: "top" | "stretch" | "bottom" | "middle";
+                    xs?: "top" | "stretch" | "bottom" | "middle";
+                };
+            };
+            justify: {
+                type: globalThis.PropType<"start" | "end" | "space-around" | "space-between" | "space-evenly" | "center" | {
+                    xxl?: "start" | "end" | "space-around" | "space-between" | "space-evenly" | "center";
+                    xl?: "start" | "end" | "space-around" | "space-between" | "space-evenly" | "center";
+                    lg?: "start" | "end" | "space-around" | "space-between" | "space-evenly" | "center";
+                    md?: "start" | "end" | "space-around" | "space-between" | "space-evenly" | "center";
+                    sm?: "start" | "end" | "space-around" | "space-between" | "space-evenly" | "center";
+                    xs?: "start" | "end" | "space-around" | "space-between" | "space-evenly" | "center";
+                }>;
+                default: "start" | "end" | "space-around" | "space-between" | "space-evenly" | "center" | {
+                    xxl?: "start" | "end" | "space-around" | "space-between" | "space-evenly" | "center";
+                    xl?: "start" | "end" | "space-around" | "space-between" | "space-evenly" | "center";
+                    lg?: "start" | "end" | "space-around" | "space-between" | "space-evenly" | "center";
+                    md?: "start" | "end" | "space-around" | "space-between" | "space-evenly" | "center";
+                    sm?: "start" | "end" | "space-around" | "space-between" | "space-evenly" | "center";
+                    xs?: "start" | "end" | "space-around" | "space-between" | "space-evenly" | "center";
+                };
+            };
+            prefixCls: StringConstructor;
+            gutter: {
+                type: globalThis.PropType<import("ant-design-vue/lib/grid/Row").Gutter | [import("ant-design-vue/lib/grid/Row").Gutter, import("ant-design-vue/lib/grid/Row").Gutter]>;
+                default: import("ant-design-vue/lib/grid/Row").Gutter | [import("ant-design-vue/lib/grid/Row").Gutter, import("ant-design-vue/lib/grid/Row").Gutter];
+            };
+            wrap: {
+                type: BooleanConstructor;
+                default: any;
+            };
+        }>>>;
+        default: () => {};
+    };
+    colProps: {
+        type: globalThis.PropType<Partial<import("./types/form.type").ColEx>>;
+    };
+    span: {
+        type: NumberConstructor;
+    };
+    size: {
+        type: globalThis.PropType<"small" | "large" | "middle">;
+    };
+    disabled: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    compact: {
+        type: BooleanConstructor;
+        default: any;
+    };
+    schemas: {
+        type: globalThis.PropType<FormSchema[]>;
+        default: () => any[];
+    };
+    autoFetchOnEnter: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    minShowColumn: {
+        type: NumberConstructor;
+        default: number;
+    };
+    showAdvancedButton: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    allowClear: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    scrollToFirstError: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    colon: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    loading: {
+        type: globalThis.PropType<{
+            [key: string]: globalThis.Ref<boolean>;
+        }>;
+        default: () => {};
+    };
+    onSearch: {
+        type: globalThis.PropType<(params: globalThis.Recordable) => void>;
+        default: (params: globalThis.Recordable) => void;
+    };
+    onReset: {
+        type: globalThis.PropType<(params: globalThis.Recordable) => void>;
+        default: (params: globalThis.Recordable) => void;
+    };
+    buttons: {
+        type: globalThis.PropType<boolean | import("./types/form.type").ButtonProps[]>;
+        default: boolean;
+    };
+    modelChange: {
+        type: globalThis.PropType<(params: globalThis.Recordable, key?: string, value?: any) => void>;
+        default: (params: globalThis.Recordable, key: string, value: any) => void;
+    };
+    resetFunc: {
+        type: globalThis.PropType<() => void>;
+    };
+    registerInstance: {
+        type: globalThis.PropType<(instance: FormActionType) => void>;
+    };
+}, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "register"[], "register", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    mode: {
+        type: globalThis.PropType<"search" | "dialog">;
+        default: string;
+    };
+    autoFetch: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    model: {
+        type: globalThis.PropType<globalThis.Recordable>;
+        default: () => {};
+    };
+    layout: {
+        type: globalThis.PropType<"vertical" | "horizontal" | "inline">;
+        default: string;
+    };
+    labelWidth: {
+        type: globalThis.PropType<string | number>;
+        default: number;
+    };
+    enLabelWidth: {
+        type: globalThis.PropType<string | number>;
+        default: number;
+    };
+    labelAlign: {
+        type: globalThis.PropType<"left" | "right">;
+        default: string;
+    };
+    labelCol: {
+        type: globalThis.PropType<Partial<import("./types/form.type").ColEx>>;
+        default: () => {};
+    };
+    wrapperCol: {
+        type: globalThis.PropType<Partial<import("./types/form.type").ColEx>>;
+        default: () => {};
+    };
+    rowProps: {
+        type: globalThis.PropType<Partial<import("vue").ExtractPropTypes<{
+            align: {
+                type: globalThis.PropType<"top" | "stretch" | "bottom" | "middle" | {
+                    xxl?: "top" | "stretch" | "bottom" | "middle";
+                    xl?: "top" | "stretch" | "bottom" | "middle";
+                    lg?: "top" | "stretch" | "bottom" | "middle";
+                    md?: "top" | "stretch" | "bottom" | "middle";
+                    sm?: "top" | "stretch" | "bottom" | "middle";
+                    xs?: "top" | "stretch" | "bottom" | "middle";
+                }>;
+                default: "top" | "stretch" | "bottom" | "middle" | {
+                    xxl?: "top" | "stretch" | "bottom" | "middle";
+                    xl?: "top" | "stretch" | "bottom" | "middle";
+                    lg?: "top" | "stretch" | "bottom" | "middle";
+                    md?: "top" | "stretch" | "bottom" | "middle";
+                    sm?: "top" | "stretch" | "bottom" | "middle";
+                    xs?: "top" | "stretch" | "bottom" | "middle";
+                };
+            };
+            justify: {
+                type: globalThis.PropType<"start" | "end" | "space-around" | "space-between" | "space-evenly" | "center" | {
+                    xxl?: "start" | "end" | "space-around" | "space-between" | "space-evenly" | "center";
+                    xl?: "start" | "end" | "space-around" | "space-between" | "space-evenly" | "center";
+                    lg?: "start" | "end" | "space-around" | "space-between" | "space-evenly" | "center";
+                    md?: "start" | "end" | "space-around" | "space-between" | "space-evenly" | "center";
+                    sm?: "start" | "end" | "space-around" | "space-between" | "space-evenly" | "center";
+                    xs?: "start" | "end" | "space-around" | "space-between" | "space-evenly" | "center";
+                }>;
+                default: "start" | "end" | "space-around" | "space-between" | "space-evenly" | "center" | {
+                    xxl?: "start" | "end" | "space-around" | "space-between" | "space-evenly" | "center";
+                    xl?: "start" | "end" | "space-around" | "space-between" | "space-evenly" | "center";
+                    lg?: "start" | "end" | "space-around" | "space-between" | "space-evenly" | "center";
+                    md?: "start" | "end" | "space-around" | "space-between" | "space-evenly" | "center";
+                    sm?: "start" | "end" | "space-around" | "space-between" | "space-evenly" | "center";
+                    xs?: "start" | "end" | "space-around" | "space-between" | "space-evenly" | "center";
+                };
+            };
+            prefixCls: StringConstructor;
+            gutter: {
+                type: globalThis.PropType<import("ant-design-vue/lib/grid/Row").Gutter | [import("ant-design-vue/lib/grid/Row").Gutter, import("ant-design-vue/lib/grid/Row").Gutter]>;
+                default: import("ant-design-vue/lib/grid/Row").Gutter | [import("ant-design-vue/lib/grid/Row").Gutter, import("ant-design-vue/lib/grid/Row").Gutter];
+            };
+            wrap: {
+                type: BooleanConstructor;
+                default: any;
+            };
+        }>>>;
+        default: () => {};
+    };
+    colProps: {
+        type: globalThis.PropType<Partial<import("./types/form.type").ColEx>>;
+    };
+    span: {
+        type: NumberConstructor;
+    };
+    size: {
+        type: globalThis.PropType<"small" | "large" | "middle">;
+    };
+    disabled: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    compact: {
+        type: BooleanConstructor;
+        default: any;
+    };
+    schemas: {
+        type: globalThis.PropType<FormSchema[]>;
+        default: () => any[];
+    };
+    autoFetchOnEnter: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    minShowColumn: {
+        type: NumberConstructor;
+        default: number;
+    };
+    showAdvancedButton: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    allowClear: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    scrollToFirstError: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    colon: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    loading: {
+        type: globalThis.PropType<{
+            [key: string]: globalThis.Ref<boolean>;
+        }>;
+        default: () => {};
+    };
+    onSearch: {
+        type: globalThis.PropType<(params: globalThis.Recordable) => void>;
+        default: (params: globalThis.Recordable) => void;
+    };
+    onReset: {
+        type: globalThis.PropType<(params: globalThis.Recordable) => void>;
+        default: (params: globalThis.Recordable) => void;
+    };
+    buttons: {
+        type: globalThis.PropType<boolean | import("./types/form.type").ButtonProps[]>;
+        default: boolean;
+    };
+    modelChange: {
+        type: globalThis.PropType<(params: globalThis.Recordable, key?: string, value?: any) => void>;
+        default: (params: globalThis.Recordable, key: string, value: any) => void;
+    };
+    resetFunc: {
+        type: globalThis.PropType<() => void>;
+    };
+    registerInstance: {
+        type: globalThis.PropType<(instance: FormActionType) => void>;
+    };
+}>> & {
+    onRegister?: (...args: any[]) => any;
+}, {
+    onReset: (params: globalThis.Recordable) => void;
+    model: {};
+    loading: {
+        [key: string]: globalThis.Ref<boolean>;
+    };
+    buttons: boolean | import("./types/form.type").ButtonProps[];
+    mode: "search" | "dialog";
+    layout: "vertical" | "horizontal" | "inline";
+    compact: boolean;
+    disabled: boolean;
+    allowClear: boolean;
+    onSearch: (params: globalThis.Recordable) => void;
+    labelWidth: string | number;
+    enLabelWidth: string | number;
+    labelAlign: "left" | "right";
+    labelCol: {};
+    wrapperCol: {};
+    rowProps: {};
+    schemas: FormSchema[];
+    autoFetch: boolean;
+    minShowColumn: number;
+    showAdvancedButton: boolean;
+    scrollToFirstError: boolean;
+    colon: boolean;
+    modelChange: (params: globalThis.Recordable, key?: string, value?: any) => void;
+    autoFetchOnEnter: boolean;
+}, {}>, Partial<Record<string, (_: any) => any>>>;
+export default _default;
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/es/components/form/src/index.scss

@@ -0,0 +1,162 @@
+@import '../../upload/src/index.scss';
+
+$textSmall: 12px;
+$textMiddle: 13px;
+$textLarge: 14px;
+
+.dt-form-btns {
+	.ant-btn-sm {
+		font-size: $textMiddle;
+        height: 30px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+	}
+}
+
+.basic-form {
+	@apply w-full;
+	
+	&__search{
+		& > div{
+			border-bottom: 1px dashed #e7e7e7;
+		}
+
+		&.basic-form__compact .ant-form-item {
+			margin-bottom: 14px;
+		}
+	}
+
+	.ant-btn {
+		@apply flex items-center justify-center;
+	}
+
+	.ant-btn,
+	.ant-input {
+		font-size: 13px;
+	}
+
+	.ant-btn.ant-btn-sm,
+	.ant-input-sm,
+	.ant-input-number-sm input,
+	.ant-picker-small {
+		font-size: $textSmall;
+	}
+
+	.ant-btn.ant-btn-lg {
+		font-size: 14px;
+		height: 34px;
+	}
+	.ant-input-lg{
+		font-size: 14px;
+	}
+
+	.ant-form-item .prefix, .suffix ,
+	.ant-input-affix-wrapper{
+		@apply flex items-center;
+	}
+
+	.ant-picker {
+		@apply w-full h-full;
+	}
+
+	.ant-form-item.small {
+		&,
+		label {
+			font-size: $textSmall;
+			line-height: 30px;
+		}
+
+		.ant-input-prefix, 
+		.ant-input-suffix,
+		.ant-input-sm,
+		.ant-picker-input input,
+		.prefix,
+		.suffix,
+		.ant-select-selector{
+			font-size: $textSmall;
+		}
+
+		.ant-form-item-explain-error {
+			font-size: $textSmall;
+			line-height: 16px;
+		}
+	}
+
+	.ant-form-item.middle {
+		&,
+		label {
+			font-size: $textMiddle;
+			line-height: 30px;
+		}
+
+		
+		.ant-input-prefix, 
+		.ant-input-suffix,
+		.ant-input,
+		.ant-picker-input input,
+		.prefix,
+		.suffix,
+		.ant-input-number input,
+		.ant-select-selector{
+			font-size: $textMiddle;
+		}
+
+		.ant-form-item-explain-error {
+			font-size: $textMiddle;
+			line-height: 20px;
+		}
+	}
+
+	.ant-form-item.large {
+		&,
+		label {
+			font-size: $textLarge;
+			line-height: 30px;
+		}
+
+		.ant-input-prefix, 
+		.ant-input-suffix,
+		.ant-input,
+		.ant-picker-input input,
+		.ant-input-number input,
+		.prefix,
+		.suffix,
+		.ant-select-selector{
+			font-size: $textLarge;
+		}
+
+		.ant-form-item-explain-error {
+			font-size: $textMiddle;
+			line-height: 20px;
+		}
+	}
+
+	.ant-select-multiple {
+		.ant-select-selector {
+			padding: 1px 4px;
+		}
+
+		.ant-select-selection-item {
+			height: 28px;
+			line-height: 26px;
+		}
+	}
+}
+
+.dt-form-btns {
+	.ant-form-item-control-input-content{
+		display: flex;
+		align-items: center;
+		gap: 12px;
+	}
+
+	.ant-btn:disabled .dt-icon {
+		color: rgba(51, 51, 51, 0.25) !important;
+	}
+}
+
+.ant-input-number,
+.ant-picker{
+	width: 100%;
+}

package/es/components/form/src/props.d.ts

@@ -1,7 +1,7 @@
 import { Recordable } from '@dt-frames/core';
 import { PropType, Ref } from 'vue';
 import { ButtonProps, ColEx, FormSchema } from './types/form.type';
-import { FormActionType } from './types/actions.type';
+import type { FormActionType } from './types/actions.type';
 export declare const BasicProps: {
     mode: {
         type: PropType<"search" | "dialog">;
@@ -12,11 +12,11 @@ export declare const BasicProps: {
         default: boolean;
     };
     model: {
-        type: PropType<Recordable<any>>;
+        type: PropType<Recordable>;
         default: () => {};
     };
     layout: {
-        type: PropType<"inline" | "horizontal" | "vertical">;
+        type: PropType<"vertical" | "horizontal" | "inline">;
         default: string;
     };
     labelWidth: {
@@ -41,8 +41,42 @@ export declare const BasicProps: {
     };
     rowProps: {
         type: PropType<Partial<import("vue").ExtractPropTypes<{
-            align: PropType<"stretch" | "bottom" | "top" | "middle">;
-            justify: PropType<"space-around" | "space-between" | "center" | "end" | "start">;
+            align: {
+                type: PropType<"top" | "stretch" | "bottom" | "middle" | {
+                    xxl?: "top" | "stretch" | "bottom" | "middle";
+                    xl?: "top" | "stretch" | "bottom" | "middle";
+                    lg?: "top" | "stretch" | "bottom" | "middle";
+                    md?: "top" | "stretch" | "bottom" | "middle";
+                    sm?: "top" | "stretch" | "bottom" | "middle";
+                    xs?: "top" | "stretch" | "bottom" | "middle";
+                }>;
+                default: "top" | "stretch" | "bottom" | "middle" | {
+                    xxl?: "top" | "stretch" | "bottom" | "middle";
+                    xl?: "top" | "stretch" | "bottom" | "middle";
+                    lg?: "top" | "stretch" | "bottom" | "middle";
+                    md?: "top" | "stretch" | "bottom" | "middle";
+                    sm?: "top" | "stretch" | "bottom" | "middle";
+                    xs?: "top" | "stretch" | "bottom" | "middle";
+                };
+            };
+            justify: {
+                type: PropType<"start" | "end" | "space-around" | "space-between" | "space-evenly" | "center" | {
+                    xxl?: "start" | "end" | "space-around" | "space-between" | "space-evenly" | "center";
+                    xl?: "start" | "end" | "space-around" | "space-between" | "space-evenly" | "center";
+                    lg?: "start" | "end" | "space-around" | "space-between" | "space-evenly" | "center";
+                    md?: "start" | "end" | "space-around" | "space-between" | "space-evenly" | "center";
+                    sm?: "start" | "end" | "space-around" | "space-between" | "space-evenly" | "center";
+                    xs?: "start" | "end" | "space-around" | "space-between" | "space-evenly" | "center";
+                }>;
+                default: "start" | "end" | "space-around" | "space-between" | "space-evenly" | "center" | {
+                    xxl?: "start" | "end" | "space-around" | "space-between" | "space-evenly" | "center";
+                    xl?: "start" | "end" | "space-around" | "space-between" | "space-evenly" | "center";
+                    lg?: "start" | "end" | "space-around" | "space-between" | "space-evenly" | "center";
+                    md?: "start" | "end" | "space-around" | "space-between" | "space-evenly" | "center";
+                    sm?: "start" | "end" | "space-around" | "space-between" | "space-evenly" | "center";
+                    xs?: "start" | "end" | "space-around" | "space-between" | "space-evenly" | "center";
+                };
+            };
             prefixCls: StringConstructor;
             gutter: {
                 type: PropType<import("ant-design-vue/lib/grid/Row").Gutter | [import("ant-design-vue/lib/grid/Row").Gutter, import("ant-design-vue/lib/grid/Row").Gutter]>;
@@ -62,7 +96,7 @@ export declare const BasicProps: {
         type: NumberConstructor;
     };
     size: {
-        type: PropType<"large" | "small" | "middle">;
+        type: PropType<"small" | "large" | "middle">;
     };
     disabled: {
         type: BooleanConstructor;
@@ -76,7 +110,7 @@ export declare const BasicProps: {
         type: PropType<FormSchema[]>;
         default: () => any[];
     };
-    autoSearchOnEnter: {
+    autoFetchOnEnter: {
         type: BooleanConstructor;
         default: boolean;
     };
@@ -118,6 +152,10 @@ export declare const BasicProps: {
         type: PropType<boolean | ButtonProps[]>;
         default: boolean;
     };
+    modelChange: {
+        type: PropType<(params: Recordable, key?: string, value?: any) => void>;
+        default: (params: Recordable, key: string, value: any) => void;
+    };
     resetFunc: {
         type: PropType<() => void>;
     };

package/es/components/form/src/types/actions.type.d.ts

@@ -1,6 +1,6 @@
 import { Recordable } from '@dt-frames/core';
 import { FormProps, FormSchema } from './form.type';
-export declare type FormActionType = {
+export type FormActionType = {
     setProps: (props: FormProps) => void;
     updateSchema: (data: Partial<FormSchema> | Partial<FormSchema>[]) => void;
     resetSchema: (data: Partial<FormSchema> | Partial<FormSchema>[]) => void;