@farris/ui-vue
Version:
Farris Vue, a Farris Design based Vue3 component library.
59 lines (58 loc) • 2.52 kB
TypeScript
import { ComponentSchema } from '../../designer-canvas';
export type ComboValue = {
label: string;
id: string;
}[];
/**
* 响应式布局参数实体。
* 默认按照小屏sm、中等md、大屏lg、超大屏el 划分屏幕大小
* ux约定：小屏上显示1列（每个控件占12栅格），中屏显示2列（每个控件占6栅格），大屏显示4列（每个控件占3栅格），超大屏显示6列（每个控件占2栅格），
*/
export declare class ResponseFormLayoutContext {
/** 控件标题 */
label: string;
/** 控件id */
id: string;
/** 每个控件占用的栅格数 */
columnInSM: number;
columnInMD: number;
columnInLG: number;
columnInEL: number;
/** 每个控件占用的列数 */
displayWidthInSM: number;
displayWidthInMD: number;
displayWidthInLG: number;
displayWidthInEL: number;
/** 编辑器内部默认显示的屏幕大小-----可以去掉 */
displayColumnCountAtBreakPoint: string;
/** 控件所在行，传0即可-----编辑器内部使用 */
tagRow: number;
/** 控件是否显示上方空白：传0即可-----编辑器内部使用 */
showTopBorder: number;
/** 区域，从1开始。卡片内的控件从上往下，从左往右划分区域，遇到分组fieldSet时group+1，分组结束后group+1 */
group: number;
/** 控件是否符合标准的class配置(设计器用的) */
isSupportedClass: boolean;
/** 控件所在分组id(设计器用的) */
fieldSetId: string;
}
export interface ResponseFormLayoutParam {
defaultState: {
/** 当前控件所在的区域 */
defaultGroupNumber: number;
/** 控件是否符合标准的class配置。只要当前卡片中有一个控件样式不符合标准，那么所有控件的model属性都是customize */
model: 'standard' | 'customize';
};
importData: ResponseFormLayoutContext[];
}
export interface CheckLayoutEditor {
result: boolean;
message: string;
formNode?: any;
}
export interface UseResponseLayoutEditorSetting {
checkCanFindFormNode: (componentId: string) => CheckLayoutEditor;
checkCanOpenLayoutEditor: (schema: ComponentSchema, componentId: string) => ResponseFormLayoutParam | CheckLayoutEditor;
changeFormControlsByResponseLayoutConfig: (propertyValue: any, componentId: string) => string;
getResonseFormLayoutConfig: (propertyData: any, configs: ResponseFormLayoutContext[], group: number, isFieldSet?: boolean) => void;
}