|
|
|
@ -1,66 +1,68 @@ |
|
|
|
import type { VisualEditorProps } from './visual-editor.props' |
|
|
|
import type { VisualEditorProps } from './visual-editor.props'; |
|
|
|
import { inject, provide } from 'vue' |
|
|
|
import { inject, provide } from 'vue'; |
|
|
|
import type { CSSProperties } from 'vue' |
|
|
|
import type { CSSProperties } from 'vue'; |
|
|
|
import { useDotProp } from '@/visual-editor/hooks/useDotProp' |
|
|
|
import { useDotProp } from '@/visual-editor/hooks/useDotProp'; |
|
|
|
import type { RequestEnum, ContentTypeEnum } from '@/enums/httpEnum' |
|
|
|
import type { RequestEnum, ContentTypeEnum } from '@/enums/httpEnum'; |
|
|
|
import { generateNanoid } from '@/visual-editor/utils' |
|
|
|
import { generateNanoid } from '@/visual-editor/utils'; |
|
|
|
|
|
|
|
|
|
|
|
/** |
|
|
|
/** |
|
|
|
* @description 组件属性 |
|
|
|
* @description 组件属性 |
|
|
|
*/ |
|
|
|
*/ |
|
|
|
export interface VisualEditorBlockData { |
|
|
|
export interface VisualEditorBlockData { |
|
|
|
/** 组件id 时间戳, 组件唯一标识 */ |
|
|
|
/** 组件id 时间戳, 组件唯一标识 */ |
|
|
|
_vid: string |
|
|
|
_vid: string; |
|
|
|
/** 组件所属的模块（基础组件、容器组件） */ |
|
|
|
/** 组件所属的模块（基础组件、容器组件） */ |
|
|
|
moduleName: keyof ComponentModules |
|
|
|
moduleName: keyof ComponentModules; |
|
|
|
/** 映射 VisualEditorConfig 中 componentMap 的 component对象 */ |
|
|
|
/** 映射 VisualEditorConfig 中 componentMap 的 component对象 */ |
|
|
|
componentKey: string |
|
|
|
componentKey: string; |
|
|
|
/** 组件标签名称 */ |
|
|
|
/** 组件标签名称 */ |
|
|
|
label: string |
|
|
|
label: string; |
|
|
|
/** 是否需要调整位置 */ |
|
|
|
/** 是否需要调整位置 */ |
|
|
|
adjustPosition: boolean |
|
|
|
adjustPosition: boolean; |
|
|
|
/** 当前是否为选中状态 */ |
|
|
|
/** 当前是否为选中状态 */ |
|
|
|
focus: boolean |
|
|
|
focus: boolean; |
|
|
|
/** 当前组件的样式 */ |
|
|
|
/** 当前组件的样式 */ |
|
|
|
styles: CSSProperties |
|
|
|
styles: CSSProperties & { |
|
|
|
|
|
|
|
tempPadding?: string; |
|
|
|
|
|
|
|
}; |
|
|
|
/** 是否调整过宽度或者高度 */ |
|
|
|
/** 是否调整过宽度或者高度 */ |
|
|
|
hasResize: boolean |
|
|
|
hasResize: boolean; |
|
|
|
/** 组件的设计属性 */ |
|
|
|
/** 组件的设计属性 */ |
|
|
|
props: Record<string, any> |
|
|
|
props: Record<string, any>; |
|
|
|
/** 绑定的字段 */ |
|
|
|
/** 绑定的字段 */ |
|
|
|
model: Record<string, string> |
|
|
|
model: Record<string, string>; |
|
|
|
/** 组件是否可以被拖拽 */ |
|
|
|
/** 组件是否可以被拖拽 */ |
|
|
|
draggable: boolean |
|
|
|
draggable: boolean; |
|
|
|
/** 是否显示组件样式配置项 */ |
|
|
|
/** 是否显示组件样式配置项 */ |
|
|
|
showStyleConfig?: boolean |
|
|
|
showStyleConfig?: boolean; |
|
|
|
/** 动画集 */ |
|
|
|
/** 动画集 */ |
|
|
|
animations?: Animation[] |
|
|
|
animations?: Animation[]; |
|
|
|
/** 组件动作集合 */ |
|
|
|
/** 组件动作集合 */ |
|
|
|
actions: Action[] |
|
|
|
actions: Action[]; |
|
|
|
/** 组件事件集合 */ |
|
|
|
/** 组件事件集合 */ |
|
|
|
events: { label: string; value: string }[] |
|
|
|
events: { label: string; value: string }[]; |
|
|
|
[prop: string]: any |
|
|
|
[prop: string]: any; |
|
|
|
} |
|
|
|
} |
|
|
|
/** |
|
|
|
/** |
|
|
|
* @description 组件动作事件处理 |
|
|
|
* @description 组件动作事件处理 |
|
|
|
*/ |
|
|
|
*/ |
|
|
|
export interface ActionHandle { |
|
|
|
export interface ActionHandle { |
|
|
|
key: string |
|
|
|
key: string; |
|
|
|
name: string |
|
|
|
name: string; |
|
|
|
link: string[] |
|
|
|
link: string[]; |
|
|
|
data?: { |
|
|
|
data?: { |
|
|
|
bind?: string |
|
|
|
bind?: string; |
|
|
|
recv?: string |
|
|
|
recv?: string; |
|
|
|
} |
|
|
|
}; |
|
|
|
} |
|
|
|
} |
|
|
|
/** |
|
|
|
/** |
|
|
|
* @description 组件动作 |
|
|
|
* @description 组件动作 |
|
|
|
*/ |
|
|
|
*/ |
|
|
|
export interface Action { |
|
|
|
export interface Action { |
|
|
|
key: string |
|
|
|
key: string; |
|
|
|
name: string |
|
|
|
name: string; |
|
|
|
event: string |
|
|
|
event: string; |
|
|
|
handle: ActionHandle[] |
|
|
|
handle: ActionHandle[]; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
/** |
|
|
|
/** |
|
|
|
@ -68,80 +70,80 @@ export interface Action { |
|
|
|
*/ |
|
|
|
*/ |
|
|
|
export interface PageConfig { |
|
|
|
export interface PageConfig { |
|
|
|
/** 背景图片 */ |
|
|
|
/** 背景图片 */ |
|
|
|
bgImage: string |
|
|
|
bgImage: string; |
|
|
|
/** 背景颜色 */ |
|
|
|
/** 背景颜色 */ |
|
|
|
bgColor: string |
|
|
|
bgColor: string; |
|
|
|
/** 是否缓存当前页面 */ |
|
|
|
/** 是否缓存当前页面 */ |
|
|
|
keepAlive: boolean |
|
|
|
keepAlive: boolean; |
|
|
|
} |
|
|
|
} |
|
|
|
/** |
|
|
|
/** |
|
|
|
* @description 页面对象 |
|
|
|
* @description 页面对象 |
|
|
|
*/ |
|
|
|
*/ |
|
|
|
export interface VisualEditorPage { |
|
|
|
export interface VisualEditorPage { |
|
|
|
/** 页面标题 */ |
|
|
|
/** 页面标题 */ |
|
|
|
title: string |
|
|
|
title: string; |
|
|
|
/** 页面路径 */ |
|
|
|
/** 页面路径 */ |
|
|
|
path: string |
|
|
|
path: string; |
|
|
|
/** 404是重定向到默认页面 */ |
|
|
|
/** 404是重定向到默认页面 */ |
|
|
|
isDefault?: boolean |
|
|
|
isDefault?: boolean; |
|
|
|
/** 页面配置 */ |
|
|
|
/** 页面配置 */ |
|
|
|
config: PageConfig |
|
|
|
config: PageConfig; |
|
|
|
/** 当前页面的所有组件 */ |
|
|
|
/** 当前页面的所有组件 */ |
|
|
|
blocks: VisualEditorBlockData[] |
|
|
|
blocks: VisualEditorBlockData[]; |
|
|
|
} |
|
|
|
} |
|
|
|
/** |
|
|
|
/** |
|
|
|
* @description 可以认为是 路由=>页面 |
|
|
|
* @description 可以认为是 路由=>页面 |
|
|
|
*/ |
|
|
|
*/ |
|
|
|
export interface VisualEditorPages { |
|
|
|
export interface VisualEditorPages { |
|
|
|
[path: string]: VisualEditorPage |
|
|
|
[path: string]: VisualEditorPage; |
|
|
|
} |
|
|
|
} |
|
|
|
/** |
|
|
|
/** |
|
|
|
* @description 实体类型 |
|
|
|
* @description 实体类型 |
|
|
|
*/ |
|
|
|
*/ |
|
|
|
export type EntityType = { |
|
|
|
export type EntityType = { |
|
|
|
/** 绑定的字段 输入 */ |
|
|
|
/** 绑定的字段 输入 */ |
|
|
|
key: string |
|
|
|
key: string; |
|
|
|
/** 实体名称 输入 */ |
|
|
|
/** 实体名称 输入 */ |
|
|
|
name: string |
|
|
|
name: string; |
|
|
|
/** 数据类型 选择 */ |
|
|
|
/** 数据类型 选择 */ |
|
|
|
type: string |
|
|
|
type: string; |
|
|
|
/** 默认值 输入 */ |
|
|
|
/** 默认值 输入 */ |
|
|
|
value: string |
|
|
|
value: string; |
|
|
|
} |
|
|
|
}; |
|
|
|
|
|
|
|
|
|
|
|
/** |
|
|
|
/** |
|
|
|
* @description 数据模型 |
|
|
|
* @description 数据模型 |
|
|
|
*/ |
|
|
|
*/ |
|
|
|
export interface VisualEditorModel { |
|
|
|
export interface VisualEditorModel { |
|
|
|
/** 数据源名称 */ |
|
|
|
/** 数据源名称 */ |
|
|
|
name: string |
|
|
|
name: string; |
|
|
|
/** 绑定的字段 该字段创建的时候生成 */ |
|
|
|
/** 绑定的字段 该字段创建的时候生成 */ |
|
|
|
key: string |
|
|
|
key: string; |
|
|
|
/** 实体集合 */ |
|
|
|
/** 实体集合 */ |
|
|
|
entitys: EntityType[] |
|
|
|
entitys: EntityType[]; |
|
|
|
} |
|
|
|
} |
|
|
|
/** |
|
|
|
/** |
|
|
|
* @description 接口请求对象 |
|
|
|
* @description 接口请求对象 |
|
|
|
*/ |
|
|
|
*/ |
|
|
|
export interface FetchApiItem { |
|
|
|
export interface FetchApiItem { |
|
|
|
/** 随机生成的key */ |
|
|
|
/** 随机生成的key */ |
|
|
|
key: string |
|
|
|
key: string; |
|
|
|
/** 随机生成的key */ |
|
|
|
/** 随机生成的key */ |
|
|
|
name: string |
|
|
|
name: string; |
|
|
|
options: { |
|
|
|
options: { |
|
|
|
/** 请求的url */ |
|
|
|
/** 请求的url */ |
|
|
|
url: string |
|
|
|
url: string; |
|
|
|
/** 请求的方法 */ |
|
|
|
/** 请求的方法 */ |
|
|
|
method: keyof typeof RequestEnum |
|
|
|
method: keyof typeof RequestEnum; |
|
|
|
/** 请求的内容类型 */ |
|
|
|
/** 请求的内容类型 */ |
|
|
|
contentType: keyof typeof ContentTypeEnum |
|
|
|
contentType: keyof typeof ContentTypeEnum; |
|
|
|
} |
|
|
|
}; |
|
|
|
data: { |
|
|
|
data: { |
|
|
|
/** 请求绑定对应的某个实体 */ |
|
|
|
/** 请求绑定对应的某个实体 */ |
|
|
|
bind: string |
|
|
|
bind: string; |
|
|
|
/** 响应的结果绑定到某个实体上 */ |
|
|
|
/** 响应的结果绑定到某个实体上 */ |
|
|
|
recv: string |
|
|
|
recv: string; |
|
|
|
} |
|
|
|
}; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
/** |
|
|
|
/** |
|
|
|
@ -149,81 +151,81 @@ export interface FetchApiItem { |
|
|
|
*/ |
|
|
|
*/ |
|
|
|
export interface VisualEditorActions { |
|
|
|
export interface VisualEditorActions { |
|
|
|
fetch: { |
|
|
|
fetch: { |
|
|
|
name: '接口请求' |
|
|
|
name: '接口请求'; |
|
|
|
apis: FetchApiItem[] |
|
|
|
apis: FetchApiItem[]; |
|
|
|
} |
|
|
|
}; |
|
|
|
dialog: { |
|
|
|
dialog: { |
|
|
|
name: '对话框' |
|
|
|
name: '对话框'; |
|
|
|
handlers: [] |
|
|
|
handlers: []; |
|
|
|
} |
|
|
|
}; |
|
|
|
} |
|
|
|
} |
|
|
|
/** |
|
|
|
/** |
|
|
|
* @description 总的数据集 |
|
|
|
* @description 总的数据集 |
|
|
|
*/ |
|
|
|
*/ |
|
|
|
export interface VisualEditorModelValue { |
|
|
|
export interface VisualEditorModelValue { |
|
|
|
/** 页面 */ |
|
|
|
/** 页面 */ |
|
|
|
pages: VisualEditorPages |
|
|
|
pages: VisualEditorPages; |
|
|
|
/** 实体 */ |
|
|
|
/** 实体 */ |
|
|
|
models: VisualEditorModel[] |
|
|
|
models: VisualEditorModel[]; |
|
|
|
/** 动作 */ |
|
|
|
/** 动作 */ |
|
|
|
actions: VisualEditorActions |
|
|
|
actions: VisualEditorActions; |
|
|
|
} |
|
|
|
} |
|
|
|
/** |
|
|
|
/** |
|
|
|
* @description 动画项 |
|
|
|
* @description 动画项 |
|
|
|
*/ |
|
|
|
*/ |
|
|
|
export interface Animation { |
|
|
|
export interface Animation { |
|
|
|
/** 动画名称 */ |
|
|
|
/** 动画名称 */ |
|
|
|
label: string |
|
|
|
label: string; |
|
|
|
/** 动画类名 */ |
|
|
|
/** 动画类名 */ |
|
|
|
value: string |
|
|
|
value: string; |
|
|
|
/** 动画持续时间 */ |
|
|
|
/** 动画持续时间 */ |
|
|
|
duration: number |
|
|
|
duration: number; |
|
|
|
/** 动画延迟多久执行 */ |
|
|
|
/** 动画延迟多久执行 */ |
|
|
|
delay: number |
|
|
|
delay: number; |
|
|
|
/** 动画执行次数 */ |
|
|
|
/** 动画执行次数 */ |
|
|
|
count: number |
|
|
|
count: number; |
|
|
|
/** 是否无限循环动画 */ |
|
|
|
/** 是否无限循环动画 */ |
|
|
|
infinite: boolean |
|
|
|
infinite: boolean; |
|
|
|
} |
|
|
|
} |
|
|
|
/** |
|
|
|
/** |
|
|
|
* @description 单个组件注册规则 |
|
|
|
* @description 单个组件注册规则 |
|
|
|
*/ |
|
|
|
*/ |
|
|
|
export interface VisualEditorComponent { |
|
|
|
export interface VisualEditorComponent { |
|
|
|
/** 组件name */ |
|
|
|
/** 组件name */ |
|
|
|
key: string |
|
|
|
key: string; |
|
|
|
/** 组件所属模块名称 */ |
|
|
|
/** 组件所属模块名称 */ |
|
|
|
moduleName: keyof ComponentModules |
|
|
|
moduleName: keyof ComponentModules; |
|
|
|
/** 组件唯一id */ |
|
|
|
/** 组件唯一id */ |
|
|
|
_vid?: string |
|
|
|
_vid?: string; |
|
|
|
/** 组件中文名称 */ |
|
|
|
/** 组件中文名称 */ |
|
|
|
label: string |
|
|
|
label: string; |
|
|
|
/** 组件预览函数 */ |
|
|
|
/** 组件预览函数 */ |
|
|
|
preview: () => JSX.Element |
|
|
|
preview: () => JSX.Element; |
|
|
|
/** 组件渲染函数 */ |
|
|
|
/** 组件渲染函数 */ |
|
|
|
render: (data: { |
|
|
|
render: (data: { |
|
|
|
props: any |
|
|
|
props: any; |
|
|
|
model: any |
|
|
|
model: any; |
|
|
|
styles: CSSProperties |
|
|
|
styles: CSSProperties; |
|
|
|
block: VisualEditorBlockData |
|
|
|
block: VisualEditorBlockData; |
|
|
|
custom: Record<string, any> |
|
|
|
custom: Record<string, any>; |
|
|
|
}) => () => JSX.Element |
|
|
|
}) => () => JSX.Element; |
|
|
|
/** 组件是否可以被拖拽 */ |
|
|
|
/** 组件是否可以被拖拽 */ |
|
|
|
draggable?: boolean |
|
|
|
draggable?: boolean; |
|
|
|
/** 是否显示组件的样式配置项 */ |
|
|
|
/** 是否显示组件的样式配置项 */ |
|
|
|
showStyleConfig?: boolean |
|
|
|
showStyleConfig?: boolean; |
|
|
|
/** 组件属性 */ |
|
|
|
/** 组件属性 */ |
|
|
|
props?: Record<string, VisualEditorProps> |
|
|
|
props?: Record<string, VisualEditorProps>; |
|
|
|
/** 动画集 */ |
|
|
|
/** 动画集 */ |
|
|
|
animations?: Animation[] |
|
|
|
animations?: Animation[]; |
|
|
|
/** 组件事件集合 */ |
|
|
|
/** 组件事件集合 */ |
|
|
|
events?: { label: string; value: string }[] |
|
|
|
events?: { label: string; value: string }[]; |
|
|
|
/** 组件样式 */ |
|
|
|
/** 组件样式 */ |
|
|
|
styles?: CSSProperties |
|
|
|
styles?: CSSProperties; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
export interface VisualEditorMarkLines { |
|
|
|
export interface VisualEditorMarkLines { |
|
|
|
x: { left: number; showLeft: number }[] |
|
|
|
x: { left: number; showLeft: number }[]; |
|
|
|
y: { top: number; showTop: number }[] |
|
|
|
y: { top: number; showTop: number }[]; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
export function createNewBlock(component: VisualEditorComponent): VisualEditorBlockData { |
|
|
|
export function createNewBlock(component: VisualEditorComponent): VisualEditorBlockData { |
|
|
|
@ -241,54 +243,54 @@ export function createNewBlock(component: VisualEditorComponent): VisualEditorBl |
|
|
|
paddingRight: '0', |
|
|
|
paddingRight: '0', |
|
|
|
paddingLeft: '0', |
|
|
|
paddingLeft: '0', |
|
|
|
paddingBottom: '0', |
|
|
|
paddingBottom: '0', |
|
|
|
tempPadding: '0' |
|
|
|
tempPadding: '0', |
|
|
|
}, |
|
|
|
}, |
|
|
|
hasResize: false, |
|
|
|
hasResize: false, |
|
|
|
props: Object.keys(component.props || {}).reduce((prev, curr) => { |
|
|
|
props: Object.keys(component.props || {}).reduce((prev, curr) => { |
|
|
|
const { propObj, prop } = useDotProp(prev, curr) |
|
|
|
const { propObj, prop } = useDotProp(prev, curr); |
|
|
|
if (component.props![curr]?.defaultValue) { |
|
|
|
if (component.props![curr]?.defaultValue) { |
|
|
|
propObj[prop] = prev[curr] = component.props![curr]?.defaultValue |
|
|
|
propObj[prop] = prev[curr] = component.props![curr]?.defaultValue; |
|
|
|
} |
|
|
|
} |
|
|
|
return prev |
|
|
|
return prev; |
|
|
|
}, {}), |
|
|
|
}, {}), |
|
|
|
draggable: component.draggable ?? true, // 是否可以拖拽
|
|
|
|
draggable: component.draggable ?? true, // 是否可以拖拽
|
|
|
|
showStyleConfig: component.showStyleConfig ?? true, // 是否显示组件样式配置
|
|
|
|
showStyleConfig: component.showStyleConfig ?? true, // 是否显示组件样式配置
|
|
|
|
animations: [], // 动画集
|
|
|
|
animations: [], // 动画集
|
|
|
|
actions: [], // 动作集合
|
|
|
|
actions: [], // 动作集合
|
|
|
|
events: component.events || [], // 事件集合
|
|
|
|
events: component.events || [], // 事件集合
|
|
|
|
model: {} |
|
|
|
model: {}, |
|
|
|
} |
|
|
|
}; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
export interface VisualDragEvent { |
|
|
|
export interface VisualDragEvent { |
|
|
|
dragstart: { |
|
|
|
dragstart: { |
|
|
|
on: (cb: () => void) => void |
|
|
|
on: (cb: () => void) => void; |
|
|
|
off: (cb: () => void) => void |
|
|
|
off: (cb: () => void) => void; |
|
|
|
emit: () => void |
|
|
|
emit: () => void; |
|
|
|
} |
|
|
|
}; |
|
|
|
dragend: { |
|
|
|
dragend: { |
|
|
|
on: (cb: () => void) => void |
|
|
|
on: (cb: () => void) => void; |
|
|
|
off: (cb: () => void) => void |
|
|
|
off: (cb: () => void) => void; |
|
|
|
emit: () => void |
|
|
|
emit: () => void; |
|
|
|
} |
|
|
|
}; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
export const VisualDragProvider = (() => { |
|
|
|
export const VisualDragProvider = (() => { |
|
|
|
const VISUAL_DRAG_PROVIDER = '@@VISUAL_DRAG_PROVIDER' |
|
|
|
const VISUAL_DRAG_PROVIDER = '@@VISUAL_DRAG_PROVIDER'; |
|
|
|
return { |
|
|
|
return { |
|
|
|
provide: (data: VisualDragEvent) => { |
|
|
|
provide: (data: VisualDragEvent) => { |
|
|
|
provide(VISUAL_DRAG_PROVIDER, data) |
|
|
|
provide(VISUAL_DRAG_PROVIDER, data); |
|
|
|
}, |
|
|
|
}, |
|
|
|
inject: () => { |
|
|
|
inject: () => { |
|
|
|
return inject(VISUAL_DRAG_PROVIDER) as VisualDragEvent |
|
|
|
return inject(VISUAL_DRAG_PROVIDER) as VisualDragEvent; |
|
|
|
} |
|
|
|
}, |
|
|
|
} |
|
|
|
}; |
|
|
|
})() |
|
|
|
})(); |
|
|
|
|
|
|
|
|
|
|
|
// 组件模块
|
|
|
|
// 组件模块
|
|
|
|
export interface ComponentModules { |
|
|
|
export interface ComponentModules { |
|
|
|
baseWidgets: VisualEditorComponent[] // 基础组件
|
|
|
|
baseWidgets: VisualEditorComponent[]; // 基础组件
|
|
|
|
containerComponents: VisualEditorComponent[] // 容器组件
|
|
|
|
containerComponents: VisualEditorComponent[]; // 容器组件
|
|
|
|
} |
|
|
|
} |
|
|
|
/** |
|
|
|
/** |
|
|
|
* @description 创建编辑器配置 |
|
|
|
* @description 创建编辑器配置 |
|
|
|
@ -297,40 +299,40 @@ export interface ComponentModules { |
|
|
|
export function createVisualEditorConfig() { |
|
|
|
export function createVisualEditorConfig() { |
|
|
|
const componentModules: ComponentModules = { |
|
|
|
const componentModules: ComponentModules = { |
|
|
|
baseWidgets: [], |
|
|
|
baseWidgets: [], |
|
|
|
containerComponents: [] |
|
|
|
containerComponents: [], |
|
|
|
} |
|
|
|
}; |
|
|
|
// const componentList: VisualEditorComponent[] = []
|
|
|
|
// const componentList: VisualEditorComponent[] = []
|
|
|
|
const componentMap: Record<string, VisualEditorComponent> = {} |
|
|
|
const componentMap: Record<string, VisualEditorComponent> = {}; |
|
|
|
return { |
|
|
|
return { |
|
|
|
componentModules, |
|
|
|
componentModules, |
|
|
|
componentMap, |
|
|
|
componentMap, |
|
|
|
registry: < |
|
|
|
registry: < |
|
|
|
_, |
|
|
|
_, |
|
|
|
Props extends Record<string, VisualEditorProps> = {}, |
|
|
|
Props extends Record<string, VisualEditorProps> = {}, |
|
|
|
Model extends Record<string, string> = {} |
|
|
|
Model extends Record<string, string> = {}, |
|
|
|
>( |
|
|
|
>( |
|
|
|
moduleName: keyof ComponentModules, |
|
|
|
moduleName: keyof ComponentModules, |
|
|
|
key: string, |
|
|
|
key: string, |
|
|
|
component: { |
|
|
|
component: { |
|
|
|
label: string |
|
|
|
label: string; |
|
|
|
preview: () => JSX.Element |
|
|
|
preview: () => JSX.Element; |
|
|
|
render: (data: { |
|
|
|
render: (data: { |
|
|
|
props: { [k in keyof Props]: any } |
|
|
|
props: { [k in keyof Props]: any }; |
|
|
|
model: Partial<{ [k in keyof Model]: any }> |
|
|
|
model: Partial<{ [k in keyof Model]: any }>; |
|
|
|
styles: CSSProperties |
|
|
|
styles: CSSProperties; |
|
|
|
block: VisualEditorBlockData |
|
|
|
block: VisualEditorBlockData; |
|
|
|
custom: Record<string, any> |
|
|
|
custom: Record<string, any>; |
|
|
|
}) => () => JSX.Element |
|
|
|
}) => () => JSX.Element; |
|
|
|
props?: Props |
|
|
|
props?: Props; |
|
|
|
model?: Model |
|
|
|
model?: Model; |
|
|
|
styles?: CSSProperties |
|
|
|
styles?: CSSProperties; |
|
|
|
} |
|
|
|
}, |
|
|
|
) => { |
|
|
|
) => { |
|
|
|
const comp = { ...component, key, moduleName } |
|
|
|
const comp = { ...component, key, moduleName }; |
|
|
|
componentModules[moduleName].push(comp) |
|
|
|
componentModules[moduleName].push(comp); |
|
|
|
componentMap[key] = comp |
|
|
|
componentMap[key] = comp; |
|
|
|
} |
|
|
|
}, |
|
|
|
} |
|
|
|
}; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
export type VisualEditorConfig = ReturnType<typeof createVisualEditorConfig> |
|
|
|
export type VisualEditorConfig = ReturnType<typeof createVisualEditorConfig>; |
|
|
|
|
bqy_fe
3 years ago