@jiaozhiye/qm-design-vue
Version:
A Component Library for Vue3.0
306 lines (305 loc) • 11.1 kB
TypeScript
import type { CSSProperties, StyleValue } from 'vue';
import type { Dayjs } from 'dayjs';
import type { IFetch, IColumn, IRowKey, IPaginationConfig } from '../../table/src/table/types';
import type { IFile } from '../../upload-file/src/props';
import type { ComponentSize, JSXElement, ValueOf, AjaxResponse, IDict, IAuth, Arrayable } from '../../_utils/types';
export declare const DEFAULT_COL = 4;
export declare const DEFAULT_ROWS = 1;
export declare const DEFAULT_LABEL_WIDTH = 80;
export declare const DEFAULT_COL_WIDTH = 300;
export declare const DEFAULT_TRUE_VALUE = "1";
export declare const DEFAULT_FALSE_VALUE = "0";
export declare const DEFAULT_LIST_HEIGHT = 400;
export type IRecord = Record<string, any>;
export type IFormLayout = 'horizontal' | 'vertical';
export type ILabelAlign = 'left' | 'right';
export type IFormType = 'default' | 'search' | 'onlyShow';
export type IValidateTrigger = 'onChange' | 'onBlur';
export type ICheckStrategy = 'SHOW_ALL' | 'SHOW_PARENT' | 'SHOW_CHILD';
export type IFormItemType = 'DIVIDER' | 'INPUT' | 'TEXT_AREA' | 'RANGE_INPUT' | 'INPUT_NUMBER' | 'RANGE_INPUT_NUMBER' | 'CHECKBOX' | 'MULTIPLE_CHECKBOX' | 'RADIO' | 'SWITCH' | 'RATE' | 'DATE' | 'RANGE_DATE' | 'RANGE_DATE_SPLIT' | 'TIME' | 'TIME_SELECT' | 'RANGE_TIME' | 'SELECT' | 'MULTIPLE_SELECT' | 'IMMEDIATE' | 'SEARCH_HELPER' | 'MULTIPLE_SEARCH_HELPER' | 'TREE_TABLE_HELPER' | 'MULTIPLE_TREE_TABLE_HELPER' | 'RANGE_SEARCH_HELPER' | 'TREE_SELECT' | 'MULTIPLE_TREE_SELECT' | 'CASCADER' | 'MULTIPLE_CASCADER' | 'CITY_SELECT' | 'REGION_SELECT' | 'UPLOAD_FILE' | 'UPLOAD_IMG' | 'TINYMCE';
export declare const ARRAY_TYPE: IFormItemType[];
export type IFieldsDefine = {
valueKey: string;
displayKey?: string;
extraKey?: string;
};
export type IFieldAuthItem = {
visible: number;
disabled?: number;
secretName?: string;
};
export type IDateType = 'date' | 'datetime' | 'exactdate' | 'week' | 'month' | 'quarter' | 'year';
export declare enum EDateType {
'date' = "date",
'datetime' = "datetime",
'exactdate' = "date",
'week' = "week",
'month' = "month",
'quarter' = "quarter",
'year' = "year"
}
export declare enum EDateFormat {
'date' = "YYYY-MM-DD HH:mm:ss",
'datetime' = "YYYY-MM-DD HH:mm:ss",
'exactdate' = "YYYY-MM-DD",
'week' = "YYYY-wo",
'month' = "YYYY-MM",
'quarter' = "YYYY-[Q]Q",
'year' = "YYYY"
}
export type ITimeType = 'hour' | 'hour-minute' | 'hour-minute-second';
export declare enum ETimeFormat {
'hour' = "HH",
'hour-minute' = "HH:mm",
'hour-minute-second' = "HH:mm:ss"
}
export type IFormData<U = string | number, T = U | U[] | undefined> = Record<string, T | Record<string, U>>;
export type IFetchHeader = Record<string, string>;
export type IFetchParams = Record<string, any>;
export type IFieldData = {
name: string[];
errors?: string[];
touched?: boolean;
validating?: boolean;
value?: ValueOf<IFormData>;
};
export type IExtraData = Record<string, string | number>;
export type IViewData = Record<string, string>;
export type IExpandData = Record<string, boolean>;
export type IFetchFn = (params?: Record<string, unknown>) => Promise<AjaxResponse>;
export type IFetchFnMaker = (url: string, type?: 'post' | 'get') => IFetchFn;
export type ITextValueKey = {
valueKey?: string;
textKey?: string;
};
export type IRequest = {
fetchApi?: IFetchFn;
params?: IFetchParams;
formatter?: (params: IFetchParams) => IFetchParams;
dataKey?: string;
callback?: (itemList: IRecord[]) => void;
};
export type IAuthConfig = {
fetch?: {
api: IFetchFn;
params?: IFetchParams;
dataKey?: string;
};
fieldList?: IAuth[];
};
export type IErrorField = {
name: string[];
errors: string[];
warnings: never[];
};
export type IFormItem = {
type: IFormItemType;
fieldName: string;
label?: string | JSXElement | IFormItem;
tooltip?: string;
labelWidth?: number | string;
hidden?: boolean;
noAuth?: boolean;
noReset?: boolean;
invisible?: boolean;
rules?: Record<string, any>[];
validateTrigger?: IValidateTrigger | IValidateTrigger[];
selfCol?: number;
offsetLeft?: number;
offsetRight?: number;
style?: CSSProperties;
className?: string;
placeholder?: string | string[];
bordered?: boolean;
disabled?: boolean;
allowClear?: boolean;
readOnly?: boolean;
options?: {
itemList?: IDict[];
prefix?: JSXElement;
suffix?: JSXElement;
maxLength?: number;
password?: boolean;
autoFocus?: boolean;
toUpper?: boolean;
toTrim?: boolean;
pattern?: RegExp;
secretType?: string;
autoComplete?: string;
step?: number;
min?: number;
max?: number;
textAlign?: ILabelAlign | 'center';
controls?: boolean;
precision?: number;
stringMode?: boolean;
formatter?: (value: number | string) => string;
parser?: (value: string) => string | number;
falseValue?: string | number;
trueValue?: string | number;
labelToCheckbox?: boolean;
showCount?: boolean;
autoSize?: {
minRows?: number;
maxRows?: number;
};
dateType?: IDateType;
minDateTime?: string;
maxDateTime?: string;
disableds?: [boolean, boolean];
allowEmpty?: [boolean, boolean];
shortCuts?: boolean;
format?: string;
disabledDate?: (current: Dayjs) => boolean;
timeType?: ITimeType;
hourStep?: number;
minuteStep?: number;
secondStep?: number;
startTime?: string;
endTime?: string;
timeStep?: string;
allowHalf?: boolean;
tooltips?: string[];
count?: number;
labelToSwitch?: boolean;
filterable?: boolean;
listHeight?: number;
collapseTags?: boolean;
maxTagTextLength?: number;
openPyt?: boolean;
checkStrategy?: ICheckStrategy;
checkStrictly?: boolean;
defaultExpandAll?: boolean;
defaultExpandedKeys?: IDict[`value`][];
changeOnSelect?: boolean;
selectLevel?: number;
multiple?: boolean;
maxCount?: number;
fileTypes?: string[];
fileSize?: number;
draggable?: boolean;
batchDownload?: ((fileList: IFile[]) => Promise<void>) | boolean;
showTip?: boolean;
openCropper?: boolean;
onPreview?: (file: IFile, cb: (file?: IFile) => void) => void;
onSortChange?: (fileList: IFile[]) => void;
onRemove?: (file: IFile) => void;
fixedSize?: [number, number] | undefined;
quality?: number;
tinymce?: Record<string, any>;
thresholdSize?: number;
onResizeEditor?: (option: {
width: number;
height: number;
}, ev: any) => void;
};
searchHelper?: {
name?: string;
getServerConfig?: IFetchFn;
createFetchApi?: (url: string, type?: string) => IFetchFn;
fieldsDefine?: IFieldsDefine;
filters?: IFormItem[];
table?: {
fetch?: IFetch;
columns?: IColumn[];
rowKey?: ((row: IRecord, index: number) => IRowKey) | IRowKey;
webPagination?: boolean;
paginationConfig?: Pick<IPaginationConfig, 'pageSize' | 'pageSizeOptions'>;
};
tree?: {
fetch?: IFetch & ITextValueKey;
tableParamsMap?: (() => Record<string, string>) | Record<string, string>;
};
request?: IRequest;
echoRequest?: IRequest & {
triggeredChange?: boolean;
fieldAliasMap?: (() => Record<string, string>) | Record<string, string>;
extraAliasMap?: (() => Record<string, string>) | Record<string, string>;
};
hideHeader?: boolean;
columns?: IColumn[];
width?: number | string;
initialValue?: IFormData;
onlySelect?: boolean;
autoQueryAssign?: boolean;
closeRemoteMatch?: boolean;
fieldAliasMap?: (() => Record<string, string>) | Record<string, string>;
extraAliasMap?: (() => Record<string, string>) | Record<string, string>;
filterAliasMap?: (() => string[] | Record<string, (input: string) => string>) | string[] | Record<string, (input: string) => string>;
beforeOpen?: (formData: IFormData) => void | Promise<void> | boolean;
closed?: (rowData: Record<string, any>) => void;
};
request?: IRequest & ITextValueKey;
asyncLoad?: IRequest & ITextValueKey;
upload?: {
action?: string;
headers?: IFetchHeader;
withCredentials?: boolean;
downloadWithHeaders?: boolean;
popperClass?: string;
params?: IFetchParams;
dataKey?: string;
beforeUpload?: (file: any) => Promise<Blob> | boolean;
button?: {
text?: string;
icon?: JSXElement;
};
fieldAliasMap?: (() => Record<string, string>) | Record<string, string>;
};
extra?: {
style?: CSSProperties;
labelWidth?: number | string;
isTooltip?: boolean;
render?: (options: IFormItem, instance: any) => JSXElement;
};
buttonAfter?: JSXElement | ((options: IFormItem) => JSXElement);
collapse?: {
defaultExpand?: boolean;
showLimit?: number;
remarkItems?: Array<{
fieldName: string;
showLabel?: boolean;
}>;
onCollapse?: (collapse: boolean) => void;
};
render?: (options: IFormItem, instance: any) => JSXElement;
onChange?: (value: ValueOf<IFormData> | boolean, ...rest: any[]) => void;
onFocus?: (value: ValueOf<IFormData>, ev: MouseEvent) => void;
onBlur?: (value: ValueOf<IFormData>, ev: MouseEvent) => void;
onClear?: () => void;
onEnter?: (value: ValueOf<IFormData>, ev: MouseEvent) => void;
};
export type IFormProps = {
items: IFormItem[];
initialValues?: IFormData;
initialExtras?: IExtraData;
layout?: IFormLayout;
size?: ComponentSize;
class?: string | Arrayable<Record<string, boolean>>;
style?: StyleValue;
cols?: number;
compactMode?: boolean;
labelWidth?: number | string;
labelAlign?: ILabelAlign;
labelWrap?: boolean;
formType?: IFormType;
disabled?: boolean;
uniqueKey?: string;
defaultRows?: number;
defaultExpand?: boolean;
searchButtonCols?: number;
scrollToFirstError?: boolean;
authConfig?: IAuthConfig;
isAutoFocus?: boolean;
isCollapse?: boolean;
isFieldsDefine?: boolean;
isSearchBtn?: boolean;
isSubmitBtn?: boolean;
fieldsChange?: (items: IFormItem[]) => void;
onValuesChange?: (changedValues: IFormData, initialValues: IFormData) => void;
onFieldsChange?: (changedFields: IFieldData[], allFields: IFieldData[]) => void;
onFinish?: (values: IFormData) => void;
onFinishFailed?: (errorFields: any) => void;
onReset?: () => void;
onCollapse?: (collapse: boolean) => void;
};