mirror of
https://github.com/Tencent/tmagic-editor.git
synced 2026-05-20 07:23:38 +00:00
docs: 升级 VitePress 至 v2 alpha，类型引用改为源码片段同步
- 升级 vitepress 到 ^2.0.0-alpha.17
- vite.optimizeDeps.rolldownOptions.transform.define 迁移至 vite.define 以适配 v2 API
- 同步升级 vitest/rolldown/vue/vite 等周边依赖
- 文档中类型链接统一改为 <<< 片段引用源码 region，避免 commit hash 链接失效
- packages/{core,editor,form-schema,schema,stage} 相关类型加 // #region 锚点
- 移除已废弃的 docs/guide/advanced/tmagic-ui.md 及侧栏入口
Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
roymondchen
parent
d16ab9a805
commit
873a51fc87
@ -102,10 +102,7 @@ export default defineConfig({
|
||||
text: '数据源',
|
||||
link: '/guide/advanced/data-source.md'
|
||||
},
|
||||
{
|
||||
text: '@tmagic/ui',
|
||||
link: '/guide/advanced/tmagic-ui.md',
|
||||
},
|
||||
|
||||
{
|
||||
text: '@tmagic/form',
|
||||
link: '/guide/advanced/tmagic-form.md',
|
||||
@ -551,14 +548,8 @@ export default defineConfig({
|
||||
},
|
||||
|
||||
vite: {
|
||||
optimizeDeps: {
|
||||
rolldownOptions: {
|
||||
transform: {
|
||||
define: {
|
||||
global: 'globalThis',
|
||||
},
|
||||
},
|
||||
},
|
||||
define: {
|
||||
global: 'globalThis',
|
||||
},
|
||||
resolve: {
|
||||
alias:[
|
||||
|
||||
@ -3,7 +3,15 @@
|
||||
## setCodeDsl
|
||||
|
||||
- **参数：**
|
||||
- {[CodeBlockDSL](https://github.com/Tencent/tmagic-editor/blob/239b5d3efeae916a8cf3e3566d88063ecccc0553/packages/schema/src/index.ts#L75)} codeDsl 代码块DSL
|
||||
- {`CodeBlockDSL`} codeDsl 代码块DSL
|
||||
|
||||
::: details 查看 CodeBlockDSL 及关联类型定义
|
||||
<<< @/../packages/schema/src/index.ts#CodeBlockDSL{ts}
|
||||
|
||||
<<< @/../packages/schema/src/index.ts#CodeBlockContent{ts}
|
||||
|
||||
<<< @/../packages/schema/src/index.ts#CodeParam{ts}
|
||||
:::
|
||||
|
||||
- **返回：**
|
||||
- `{Promise<void>}`
|
||||
@ -15,7 +23,7 @@
|
||||
## getCodeDsl
|
||||
|
||||
- **返回：**
|
||||
- {[CodeBlockDSL](https://github.com/Tencent/tmagic-editor/blob/239b5d3efeae916a8cf3e3566d88063ecccc0553/packages/schema/src/index.ts#L75) | null}
|
||||
- {`CodeBlockDSL` | null}
|
||||
|
||||
- **详情：**
|
||||
|
||||
@ -27,7 +35,7 @@
|
||||
- `{string | number}` id 代码块id
|
||||
|
||||
- **返回：**
|
||||
- {[CodeBlockContent](https://github.com/Tencent/tmagic-editor/blob/239b5d3efeae916a8cf3e3566d88063ecccc0553/packages/schema/src/index.ts#L79) | null}
|
||||
- {`CodeBlockContent` | null}
|
||||
|
||||
- **详情：**
|
||||
|
||||
@ -39,7 +47,7 @@
|
||||
|
||||
- **参数：**
|
||||
- `{string | number}` id 代码块id
|
||||
- {Partial<[CodeBlockContent](https://github.com/Tencent/tmagic-editor/blob/239b5d3efeae916a8cf3e3566d88063ecccc0553/packages/schema/src/index.ts#L79)>} codeConfig 代码块内容配置信息
|
||||
- {Partial<`CodeBlockContent`>} codeConfig 代码块内容配置信息
|
||||
|
||||
- **返回：**
|
||||
- `{Promise<void>}`
|
||||
@ -52,7 +60,7 @@
|
||||
|
||||
- **参数：**
|
||||
- `{string | number}` id 代码块id
|
||||
- {Partial<[CodeBlockContent](https://github.com/Tencent/tmagic-editor/blob/239b5d3efeae916a8cf3e3566d88063ecccc0553/packages/schema/src/index.ts#L79)>} codeConfig 代码块内容配置信息
|
||||
- {Partial<`CodeBlockContent`>} codeConfig 代码块内容配置信息
|
||||
- `{boolean}` force 是否强制写入，默认 `true`；为 `false` 时若同 id 已存在则跳过
|
||||
|
||||
- **返回：**
|
||||
@ -68,7 +76,7 @@
|
||||
- `{string[]}` ids 代码块id数组
|
||||
|
||||
- **返回：**
|
||||
- {[CodeBlockDSL](https://github.com/Tencent/tmagic-editor/blob/239b5d3efeae916a8cf3e3566d88063ecccc0553/packages/schema/src/index.ts#L75)} 命中的代码块dsl
|
||||
- {`CodeBlockDSL`} 命中的代码块dsl
|
||||
|
||||
- **详情：**
|
||||
|
||||
@ -227,9 +235,25 @@
|
||||
## copyWithRelated
|
||||
|
||||
- **参数：**
|
||||
- {[MNode](https://github.com/Tencent/tmagic-editor/blob/cce8b63fc3618b5b811aa33c703de21c22be8a6a/packages/schema/src/index.ts#L210) | [MNode](https://github.com/Tencent/tmagic-editor/blob/cce8b63fc3618b5b811aa33c703de21c22be8a6a/packages/schema/src/index.ts#L210)[]} config 组件节点配置
|
||||
- {`MNode` | `MNode`[]} config 组件节点配置
|
||||
- `{TargetOptions}` collectorOptions 可选的依赖收集器配置
|
||||
|
||||
::: details 查看 MNode 及关联类型定义
|
||||
<<< @/../packages/schema/src/index.ts#MNode{ts}
|
||||
|
||||
<<< @/../packages/schema/src/index.ts#MComponent{ts}
|
||||
|
||||
<<< @/../packages/schema/src/index.ts#MContainer{ts}
|
||||
|
||||
<<< @/../packages/schema/src/index.ts#MIteratorContainer{ts}
|
||||
|
||||
<<< @/../packages/schema/src/index.ts#MPage{ts}
|
||||
|
||||
<<< @/../packages/schema/src/index.ts#MApp{ts}
|
||||
|
||||
<<< @/../packages/schema/src/index.ts#MPageFragment{ts}
|
||||
:::
|
||||
|
||||
- **返回：**
|
||||
- `{void}`
|
||||
|
||||
@ -281,3 +305,4 @@
|
||||
- **详情：**
|
||||
|
||||
删掉当前设置的所有扩展
|
||||
|
||||
|
||||
@ -4,7 +4,13 @@
|
||||
|
||||
- **参数：**
|
||||
|
||||
- {[ComponentGroup](https://github.com/Tencent/tmagic-editor/blob/5880dfbe15fcead63e9dc7c91900f8c4e7a574d8/packages/editor/src/type.ts#L355)[]} componentGroupList 组件列表配置
|
||||
- {`ComponentGroup`[]} componentGroupList 组件列表配置
|
||||
|
||||
::: details 查看 ComponentGroup 及关联类型定义
|
||||
<<< @/../packages/editor/src/type.ts#ComponentGroup{ts}
|
||||
|
||||
<<< @/../packages/editor/src/type.ts#ComponentItem{ts}
|
||||
:::
|
||||
|
||||
- **返回：**
|
||||
|
||||
@ -48,7 +54,7 @@ componentListService.setList([
|
||||
|
||||
- **返回：**
|
||||
|
||||
- {[ComponentGroup](https://github.com/Tencent/tmagic-editor/blob/5880dfbe15fcead63e9dc7c91900f8c4e7a574d8/packages/editor/src/type.ts#L355)[]} 组件列表配置
|
||||
- {`ComponentGroup`[]} 组件列表配置
|
||||
|
||||
- **详情：**
|
||||
|
||||
@ -102,3 +108,4 @@ import { componentListService } from '@tmagic/editor';
|
||||
|
||||
componentListService.destroy();
|
||||
```
|
||||
|
||||
|
||||
@ -59,7 +59,19 @@ dataSourceService.set("editable", false);
|
||||
- `{string}` type 数据源类型，默认为 'base'
|
||||
|
||||
- **返回：**
|
||||
- {[FormConfig](https://github.com/Tencent/tmagic-editor/blob/cce8b63fc3618b5b811aa33c703de21c22be8a6a/packages/form-schema/src/base.ts#L864)} 表单配置
|
||||
- {`FormConfig`} 表单配置
|
||||
|
||||
::: details 查看 FormConfig 及关联类型定义
|
||||
<<< @/../packages/form-schema/src/base.ts#FormConfig{ts}
|
||||
|
||||
<<< @/../packages/form-schema/src/base.ts#FormItemConfig{ts}
|
||||
|
||||
<<< @/../packages/form-schema/src/base.ts#ChildConfig{ts}
|
||||
|
||||
<<< @/../packages/form-schema/src/base.ts#DynamicTypeConfig{ts}
|
||||
|
||||
<<< @/../packages/form-schema/src/base.ts#FormItem{ts}
|
||||
:::
|
||||
|
||||
- **详情：**
|
||||
|
||||
@ -80,7 +92,7 @@ console.log(config);
|
||||
|
||||
- **参数：**
|
||||
- `{string}` type 数据源类型
|
||||
- {[FormConfig](https://github.com/Tencent/tmagic-editor/blob/cce8b63fc3618b5b811aa33c703de21c22be8a6a/packages/form-schema/src/base.ts#L864)} config 表单配置
|
||||
- {`FormConfig`} config 表单配置
|
||||
|
||||
- **返回：**
|
||||
- `{void}`
|
||||
@ -120,7 +132,23 @@ dataSourceService.setFormConfig("http", [
|
||||
- `{string}` type 数据源类型，默认为 'base'
|
||||
|
||||
- **返回：**
|
||||
- {Partial<[DataSourceSchema](https://github.com/Tencent/tmagic-editor/blob/5880dfbe15fcead63e9dc7c91900f8c4e7a574d8/packages/schema/src/index.ts#L221)>} 数据源默认值
|
||||
- {Partial<`DataSourceSchema`>} 数据源默认值
|
||||
|
||||
::: details 查看 DataSourceSchema 及关联类型定义
|
||||
<<< @/../packages/schema/src/index.ts#DataSourceSchema{ts}
|
||||
|
||||
<<< @/../packages/schema/src/index.ts#DataSchema{ts}
|
||||
|
||||
<<< @/../packages/schema/src/index.ts#MockSchema{ts}
|
||||
|
||||
<<< @/../packages/schema/src/index.ts#CodeBlockContent{ts}
|
||||
|
||||
<<< @/../packages/schema/src/index.ts#CodeParam{ts}
|
||||
|
||||
<<< @/../packages/schema/src/index.ts#EventConfig{ts}
|
||||
|
||||
<<< @/../packages/schema/src/index.ts#JsEngine{ts}
|
||||
:::
|
||||
|
||||
- **详情：**
|
||||
|
||||
@ -141,7 +169,7 @@ console.log(defaultValue);
|
||||
|
||||
- **参数：**
|
||||
- `{string}` type 数据源类型
|
||||
- {Partial<[DataSourceSchema](https://github.com/Tencent/tmagic-editor/blob/5880dfbe15fcead63e9dc7c91900f8c4e7a574d8/packages/schema/src/index.ts#L221)>} value 数据源默认值
|
||||
- {Partial<`DataSourceSchema`>} value 数据源默认值
|
||||
|
||||
- **返回：**
|
||||
- `{void}`
|
||||
@ -170,7 +198,11 @@ dataSourceService.setFormValue("http", {
|
||||
- `{string}` type 数据源类型，默认为 'base'
|
||||
|
||||
- **返回：**
|
||||
- {[EventOption](https://github.com/Tencent/tmagic-editor/blob/239b5d3efeae916a8cf3e3566d88063ecccc0553/packages/core/src/events.ts#L26-L29)[]} 事件列表
|
||||
- {`EventOption`[]} 事件列表
|
||||
|
||||
::: details 查看 EventOption 类型定义
|
||||
<<< @/../packages/core/src/utils.ts#EventOption{ts}
|
||||
:::
|
||||
|
||||
- **详情：**
|
||||
|
||||
@ -191,7 +223,7 @@ console.log(events);
|
||||
|
||||
- **参数：**
|
||||
- `{string}` type 数据源类型
|
||||
- {[EventOption](https://github.com/Tencent/tmagic-editor/blob/239b5d3efeae916a8cf3e3566d88063ecccc0553/packages/core/src/events.ts#L26-L29)[]} value 事件列表
|
||||
- {`EventOption`[]} value 事件列表
|
||||
|
||||
- **返回：**
|
||||
- `{void}`
|
||||
@ -219,7 +251,7 @@ dataSourceService.setFormEvent("http", [
|
||||
- `{string}` type 数据源类型，默认为 'base'
|
||||
|
||||
- **返回：**
|
||||
- {[EventOption](https://github.com/Tencent/tmagic-editor/blob/239b5d3efeae916a8cf3e3566d88063ecccc0553/packages/core/src/events.ts#L26-L29)[]} 方法列表
|
||||
- {`EventOption`[]} 方法列表
|
||||
|
||||
- **详情：**
|
||||
|
||||
@ -240,7 +272,7 @@ console.log(methods);
|
||||
|
||||
- **参数：**
|
||||
- `{string}` type 数据源类型
|
||||
- {[EventOption](https://github.com/Tencent/tmagic-editor/blob/239b5d3efeae916a8cf3e3566d88063ecccc0553/packages/core/src/events.ts#L26-L29)[]} value 方法列表
|
||||
- {`EventOption`[]} value 方法列表
|
||||
|
||||
- **返回：**
|
||||
- `{void}`
|
||||
@ -265,10 +297,10 @@ dataSourceService.setFormMethod("http", [
|
||||
- **[扩展支持](../../guide/editor-expand#行为扩展)：** 是
|
||||
|
||||
- **参数：**
|
||||
- {[DataSourceSchema](https://github.com/Tencent/tmagic-editor/blob/5880dfbe15fcead63e9dc7c91900f8c4e7a574d8/packages/schema/src/index.ts#L221)} config 数据源配置
|
||||
- {`DataSourceSchema`} config 数据源配置
|
||||
|
||||
- **返回：**
|
||||
- {[DataSourceSchema](https://github.com/Tencent/tmagic-editor/blob/5880dfbe15fcead63e9dc7c91900f8c4e7a574d8/packages/schema/src/index.ts#L221)} 添加后的数据源配置
|
||||
- {`DataSourceSchema`} 添加后的数据源配置
|
||||
|
||||
- **详情：**
|
||||
|
||||
@ -294,12 +326,16 @@ console.log(newDs.id); // 自动生成的id
|
||||
- **[扩展支持](../../guide/editor-expand#行为扩展)：** 是
|
||||
|
||||
- **参数：**
|
||||
- {[DataSourceSchema](https://github.com/Tencent/tmagic-editor/blob/5880dfbe15fcead63e9dc7c91900f8c4e7a574d8/packages/schema/src/index.ts#L221)} config 数据源配置
|
||||
- {`DataSourceSchema`} config 数据源配置
|
||||
- `{Object}` options 可选配置
|
||||
- {[ChangeRecord](https://github.com/Tencent/tmagic-editor/blob/239b5d3efeae916a8cf3e3566d88063ecccc0553/packages/form/src/schema.ts#L27-L39)[]} changeRecords 变更记录
|
||||
- {`ChangeRecord`[]} changeRecords 变更记录
|
||||
|
||||
::: details 查看 ChangeRecord 类型定义
|
||||
<<< @/../packages/form-schema/src/base.ts#ChangeRecord{ts}
|
||||
:::
|
||||
|
||||
- **返回：**
|
||||
- {[DataSourceSchema](https://github.com/Tencent/tmagic-editor/blob/5880dfbe15fcead63e9dc7c91900f8c4e7a574d8/packages/schema/src/index.ts#L221)} 更新后的数据源配置
|
||||
- {`DataSourceSchema`} 更新后的数据源配置
|
||||
|
||||
- **详情：**
|
||||
|
||||
@ -370,7 +406,7 @@ console.log(id); // 'ds_xxx-xxx-xxx'
|
||||
- `{string}` id 数据源id
|
||||
|
||||
- **返回：**
|
||||
- {[DataSourceSchema](https://github.com/Tencent/tmagic-editor/blob/5880dfbe15fcead63e9dc7c91900f8c4e7a574d8/packages/schema/src/index.ts#L221) | undefined} 数据源配置
|
||||
- {`DataSourceSchema` | undefined} 数据源配置
|
||||
|
||||
- **详情：**
|
||||
|
||||
@ -388,9 +424,25 @@ console.log(ds);
|
||||
## copyWithRelated
|
||||
|
||||
- **参数：**
|
||||
- {[MNode](https://github.com/Tencent/tmagic-editor/blob/cce8b63fc3618b5b811aa33c703de21c22be8a6a/packages/schema/src/index.ts#L210) | [MNode](https://github.com/Tencent/tmagic-editor/blob/cce8b63fc3618b5b811aa33c703de21c22be8a6a/packages/schema/src/index.ts#L210)[]} config 组件节点配置
|
||||
- {`MNode` | `MNode`[]} config 组件节点配置
|
||||
- `{TargetOptions}` collectorOptions 可选的收集器配置
|
||||
|
||||
::: details 查看 MNode 及关联类型定义
|
||||
<<< @/../packages/schema/src/index.ts#MNode{ts}
|
||||
|
||||
<<< @/../packages/schema/src/index.ts#MComponent{ts}
|
||||
|
||||
<<< @/../packages/schema/src/index.ts#MContainer{ts}
|
||||
|
||||
<<< @/../packages/schema/src/index.ts#MIteratorContainer{ts}
|
||||
|
||||
<<< @/../packages/schema/src/index.ts#MPage{ts}
|
||||
|
||||
<<< @/../packages/schema/src/index.ts#MApp{ts}
|
||||
|
||||
<<< @/../packages/schema/src/index.ts#MPageFragment{ts}
|
||||
:::
|
||||
|
||||
- **返回：**
|
||||
- `{void}`
|
||||
|
||||
@ -505,3 +557,4 @@ import { dataSourceService } from "@tmagic/editor";
|
||||
|
||||
dataSourceService.removeAllPlugins();
|
||||
```
|
||||
|
||||
|
||||
@ -4,37 +4,71 @@
|
||||
|
||||
- **详情：** dsl跟节点发生变化，[editorService.set('root', {})](./editorServiceMethods.md#set)后触发
|
||||
|
||||
- **事件回调函数：** (value: [MApp](https://github.com/Tencent/tmagic-editor/blob/239b5d3efeae916a8cf3e3566d88063ecccc0553/packages/schema/src/index.ts?plain=1#L66-L73), preValue?: [MApp](https://github.com/Tencent/tmagic-editor/blob/239b5d3efeae916a8cf3e3566d88063ecccc0553/packages/schema/src/index.ts?plain=1#L66-L73)) => void
|
||||
- **事件回调函数：** `(value: MApp, preValue?: MApp) => void`
|
||||
|
||||
::: details 查看 MApp 及关联类型定义
|
||||
<<< @/../packages/schema/src/index.ts#MApp{ts}
|
||||
|
||||
<<< @/../packages/schema/src/index.ts#MComponent{ts}
|
||||
|
||||
<<< @/../packages/schema/src/index.ts#NodeType{ts}
|
||||
|
||||
<<< @/../packages/schema/src/index.ts#MPage{ts}
|
||||
|
||||
<<< @/../packages/schema/src/index.ts#MPageFragment{ts}
|
||||
|
||||
<<< @/../packages/schema/src/index.ts#CodeBlockDSL{ts}
|
||||
|
||||
<<< @/../packages/schema/src/index.ts#DataSourceSchema{ts}
|
||||
|
||||
<<< @/../packages/schema/src/index.ts#DataSourceDeps{ts}
|
||||
:::
|
||||
|
||||
## select
|
||||
|
||||
- **详情：** 选中组件，[editorService.select()](./editorServiceMethods.md#select)后触发
|
||||
|
||||
- **事件回调函数：** (node: [MNode](https://github.com/Tencent/tmagic-editor/blob/cce8b63fc3618b5b811aa33c703de21c22be8a6a/packages/schema/src/index.ts#L210)) => void
|
||||
- **事件回调函数：** `(node: MNode) => void`
|
||||
|
||||
::: details 查看 MNode 及关联类型定义
|
||||
<<< @/../packages/schema/src/index.ts#MNode{ts}
|
||||
|
||||
<<< @/../packages/schema/src/index.ts#MComponent{ts}
|
||||
|
||||
<<< @/../packages/schema/src/index.ts#MContainer{ts}
|
||||
|
||||
<<< @/../packages/schema/src/index.ts#MPage{ts}
|
||||
|
||||
<<< @/../packages/schema/src/index.ts#MPageFragment{ts}
|
||||
:::
|
||||
|
||||
## add
|
||||
|
||||
- **详情：** 添加节点后触发，[editorService.add()](./editorServiceMethods.md#add)后触发
|
||||
|
||||
- **事件回调函数：** (node: [MNode](https://github.com/Tencent/tmagic-editor/blob/cce8b63fc3618b5b811aa33c703de21c22be8a6a/packages/schema/src/index.ts#L210)[]) => void
|
||||
- **事件回调函数：** `(node: MNode[]) => void`
|
||||
|
||||
## remove
|
||||
|
||||
- **详情：** 删除节点后触发，[editorService.remove()](./editorServiceMethods.md#remove)后触发
|
||||
|
||||
- **事件回调函数：** (node: [MNode](https://github.com/Tencent/tmagic-editor/blob/cce8b63fc3618b5b811aa33c703de21c22be8a6a/packages/schema/src/index.ts#L210)[]) => void
|
||||
- **事件回调函数：** `(node: MNode[]) => void`
|
||||
|
||||
## update
|
||||
|
||||
- **详情：** 更新组件后触发，[editorService.update()](./editorServiceMethods.md#update)后触发
|
||||
|
||||
- **事件回调函数：** (data: Array<{ newNode: [MNode](https://github.com/Tencent/tmagic-editor/blob/cce8b63fc3618b5b811aa33c703de21c22be8a6a/packages/schema/src/index.ts#L210); oldNode: [MNode](https://github.com/Tencent/tmagic-editor/blob/cce8b63fc3618b5b811aa33c703de21c22be8a6a/packages/schema/src/index.ts#L210); changeRecords?: [ChangeRecord](https://github.com/Tencent/tmagic-editor/blob/239b5d3efeae916a8cf3e3566d88063ecccc0553/packages/form/src/schema.ts#L27-L39)[] }>) => void
|
||||
- **事件回调函数：** `(data: Array<{ newNode: MNode; oldNode: MNode; changeRecords?: ChangeRecord[] }>) => void`
|
||||
|
||||
::: details 查看 ChangeRecord 类型定义
|
||||
<<< @/../packages/form-schema/src/base.ts#ChangeRecord{ts}
|
||||
:::
|
||||
|
||||
## move-layer
|
||||
|
||||
- **详情：** 移动节点层级后触发，[editorService.moveLayer()](./editorServiceMethods.md#movelayer)后触发
|
||||
|
||||
- **事件回调函数：** (offset: number | [LayerOffset](https://github.com/Tencent/tmagic-editor/blob/239b5d3efeae916a8cf3e3566d88063ecccc0553/packages/editor/src/type.ts)) => void
|
||||
- **事件回调函数：** `(offset: number | LayerOffset) => void`
|
||||
|
||||
其中 `LayerOffset` 枚举值为 `'top'` / `'bottom'`
|
||||
|
||||
@ -42,10 +76,14 @@
|
||||
|
||||
- **详情：** 拖拽节点到指定容器后触发，[editorService.dragTo()](./editorServiceMethods.md#dragto)后触发
|
||||
|
||||
- **事件回调函数：** (data: { targetIndex: number; configs: [MNode](https://github.com/Tencent/tmagic-editor/blob/cce8b63fc3618b5b811aa33c703de21c22be8a6a/packages/schema/src/index.ts#L210) | [MNode](https://github.com/Tencent/tmagic-editor/blob/cce8b63fc3618b5b811aa33c703de21c22be8a6a/packages/schema/src/index.ts#L210)[]; targetParent: [MContainer](https://github.com/Tencent/tmagic-editor/blob/c143a5f7670ae61d80c1a2cfcc780cfb5259849d/packages/schema/src/index.ts#L54-L59) }) => void
|
||||
- **事件回调函数：** `(data: { targetIndex: number; configs: MNode | MNode[]; targetParent: MContainer }) => void`
|
||||
|
||||
::: details 查看 MContainer 类型定义
|
||||
<<< @/../packages/schema/src/index.ts#MContainer{ts}
|
||||
:::
|
||||
|
||||
## history-change
|
||||
|
||||
- **详情：** 历史记录改变，[editorService.redo()，editorService.undo()](./editorServiceMethods.md#undo)后触发
|
||||
|
||||
- **事件回调函数：** (data: [MPage](https://github.com/Tencent/tmagic-editor/blob/c143a5f7670ae61d80c1a2cfcc780cfb5259849d/packages/schema/src/index.ts#L61) | [MPageFragment](https://github.com/Tencent/tmagic-editor/blob/cce8b63fc3618b5b811aa33c703de21c22be8a6a/packages/schema/src/index.ts#L210)) => void
|
||||
- **事件回调函数：** `(data: MPage | MPageFragment) => void`
|
||||
|
||||
@ -78,7 +78,19 @@ editorService.set("node", {
|
||||
:::
|
||||
|
||||
- **返回：**
|
||||
- {[EditorNodeInfo](https://github.com/Tencent/tmagic-editor/blob/c143a5f7670ae61d80c1a2cfcc780cfb5259849d/packages/editor/src/type.ts#L139-L143)}
|
||||
- {`EditorNodeInfo`}
|
||||
|
||||
::: details 查看 EditorNodeInfo 及关联类型定义
|
||||
<<< @/../packages/editor/src/type.ts#EditorNodeInfo{ts}
|
||||
|
||||
<<< @/../packages/schema/src/index.ts#MNode{ts}
|
||||
|
||||
<<< @/../packages/schema/src/index.ts#MContainer{ts}
|
||||
|
||||
<<< @/../packages/schema/src/index.ts#MPage{ts}
|
||||
|
||||
<<< @/../packages/schema/src/index.ts#MPageFragment{ts}
|
||||
:::
|
||||
|
||||
- **详情：**
|
||||
|
||||
@ -103,7 +115,23 @@ console.log(info.page);
|
||||
- `{boolean}` raw 是否使用toRaw，默认为true
|
||||
|
||||
- **返回：**
|
||||
- {[MNode](https://github.com/Tencent/tmagic-editor/blob/cce8b63fc3618b5b811aa33c703de21c22be8a6a/packages/schema/src/index.ts#L210)} 组件节点配置
|
||||
- {`MNode`} 组件节点配置
|
||||
|
||||
::: details 查看 MNode 及关联类型定义
|
||||
<<< @/../packages/schema/src/index.ts#MNode{ts}
|
||||
|
||||
<<< @/../packages/schema/src/index.ts#MComponent{ts}
|
||||
|
||||
<<< @/../packages/schema/src/index.ts#MContainer{ts}
|
||||
|
||||
<<< @/../packages/schema/src/index.ts#MIteratorContainer{ts}
|
||||
|
||||
<<< @/../packages/schema/src/index.ts#MPage{ts}
|
||||
|
||||
<<< @/../packages/schema/src/index.ts#MApp{ts}
|
||||
|
||||
<<< @/../packages/schema/src/index.ts#MPageFragment{ts}
|
||||
:::
|
||||
|
||||
- **详情：**
|
||||
|
||||
@ -126,7 +154,7 @@ console.log(node);
|
||||
- `{boolean}` raw 是否使用toRaw，默认为true
|
||||
|
||||
- **返回：**
|
||||
- {[MNode](https://github.com/Tencent/tmagic-editor/blob/cce8b63fc3618b5b811aa33c703de21c22be8a6a/packages/schema/src/index.ts#L210)} 指点组件的父节点配置
|
||||
- {`MNode`} 指点组件的父节点配置
|
||||
|
||||
- **详情：**
|
||||
|
||||
@ -147,11 +175,15 @@ console.log(parent);
|
||||
- **[扩展支持](../../guide/editor-expand#行为扩展)：** 是
|
||||
|
||||
- **参数：**
|
||||
- {[MNode](https://github.com/Tencent/tmagic-editor/blob/cce8b63fc3618b5b811aa33c703de21c22be8a6a/packages/schema/src/index.ts#L210)} parent
|
||||
- {[MNode](https://github.com/Tencent/tmagic-editor/blob/cce8b63fc3618b5b811aa33c703de21c22be8a6a/packages/schema/src/index.ts#L210)} node 可选
|
||||
- {`MNode`} parent
|
||||
- {`MNode`} node 可选
|
||||
|
||||
- **返回：**
|
||||
- {Promise<[Layout](https://github.com/Tencent/tmagic-editor/blob/c143a5f7670ae61d80c1a2cfcc780cfb5259849d/packages/editor/src/type.ts#L297-L302)>} 当前布局模式
|
||||
- {Promise<`Layout`>} 当前布局模式
|
||||
|
||||
::: details 查看 Layout 类型定义
|
||||
<<< @/../packages/editor/src/type.ts#Layout{ts}
|
||||
:::
|
||||
|
||||
- **详情：**
|
||||
|
||||
@ -179,10 +211,10 @@ editorService.getLayout(parent).then((layout) => {
|
||||
- **[扩展支持](../../guide/editor-expand#行为扩展)：** 是
|
||||
|
||||
- **参数：**
|
||||
- {number | string | [MNode](https://github.com/Tencent/tmagic-editor/blob/cce8b63fc3618b5b811aa33c703de21c22be8a6a/packages/schema/src/index.ts#L210)} config 需要选中的节点或节点ID
|
||||
- {number | string | `MNode`} config 需要选中的节点或节点ID
|
||||
|
||||
- **返回：**
|
||||
- {Promise<[MNode](https://github.com/Tencent/tmagic-editor/blob/cce8b63fc3618b5b811aa33c703de21c22be8a6a/packages/schema/src/index.ts#L210)>} 当前选中的节点配置
|
||||
- {Promise<`MNode`>} 当前选中的节点配置
|
||||
|
||||
- **详情：**
|
||||
|
||||
@ -229,7 +261,7 @@ editorService.get("stage")?.multiSelect(["text_123", "button_123"]);
|
||||
## selectNextNode
|
||||
|
||||
- **返回：**
|
||||
- {Promise<[MNode](https://github.com/Tencent/tmagic-editor/blob/cce8b63fc3618b5b811aa33c703de21c22be8a6a/packages/schema/src/index.ts#L210) | null>} 选中后的节点配置
|
||||
- {Promise<`MNode` | null>} 选中后的节点配置
|
||||
|
||||
- **详情：**
|
||||
|
||||
@ -238,7 +270,7 @@ editorService.get("stage")?.multiSelect(["text_123", "button_123"]);
|
||||
## selectNextPage
|
||||
|
||||
- **返回：**
|
||||
- {Promise<[MNode](https://github.com/Tencent/tmagic-editor/blob/cce8b63fc3618b5b811aa33c703de21c22be8a6a/packages/schema/src/index.ts#L210)>} 选中后的页面配置
|
||||
- {Promise<`MNode`>} 选中后的页面配置
|
||||
|
||||
- **详情：**
|
||||
|
||||
@ -258,7 +290,7 @@ editorService.get("stage")?.multiSelect(["text_123", "button_123"]);
|
||||
- **[扩展支持](../../guide/editor-expand#行为扩展)：** 是
|
||||
|
||||
- **参数：**
|
||||
- {number | string | [MNode](https://github.com/Tencent/tmagic-editor/blob/cce8b63fc3618b5b811aa33c703de21c22be8a6a/packages/schema/src/index.ts#L210)} config 需要高亮的节点或节点ID
|
||||
- {number | string | `MNode`} config 需要高亮的节点或节点ID
|
||||
|
||||
- **返回：**
|
||||
- `{Promise<void>}`
|
||||
@ -280,12 +312,12 @@ editorService.highlight("text_123");
|
||||
- **[扩展支持](../../guide/editor-expand#行为扩展)：** 是
|
||||
|
||||
- **参数：**
|
||||
- {[MNode](https://github.com/Tencent/tmagic-editor/blob/cce8b63fc3618b5b811aa33c703de21c22be8a6a/packages/schema/src/index.ts#L210)} node 新组件节点
|
||||
- {`MNode`} node 新组件节点
|
||||
|
||||
- {[MContainer](https://github.com/Tencent/tmagic-editor/blob/cce8b63fc3618b5b811aa33c703de21c22be8a6a/packages/schema/src/index.ts#L139)} parent 指定的容器节点
|
||||
- {`MContainer`} parent 指定的容器节点
|
||||
|
||||
- **返回：**
|
||||
- {Promise<[MNode](https://github.com/Tencent/tmagic-editor/blob/cce8b63fc3618b5b811aa33c703de21c22be8a6a/packages/schema/src/index.ts#L210)>} 新增的组件
|
||||
- {Promise<`MNode`>} 新增的组件
|
||||
|
||||
- **详情：**
|
||||
|
||||
@ -296,12 +328,12 @@ editorService.highlight("text_123");
|
||||
- **[扩展支持](../../guide/editor-expand#行为扩展)：** 是
|
||||
|
||||
- **参数：**
|
||||
- {[MNode](https://github.com/Tencent/tmagic-editor/blob/cce8b63fc3618b5b811aa33c703de21c22be8a6a/packages/schema/src/index.ts#L210) | [MNode](https://github.com/Tencent/tmagic-editor/blob/cce8b63fc3618b5b811aa33c703de21c22be8a6a/packages/schema/src/index.ts#L210)[]} node 新组件节点配置或多个节点集合
|
||||
- {`MNode` | `MNode`[]} node 新组件节点配置或多个节点集合
|
||||
|
||||
- {[MContainer](https://github.com/Tencent/tmagic-editor/blob/cce8b63fc3618b5b811aa33c703de21c22be8a6a/packages/schema/src/index.ts#L139)} parent 指定的容器组件节点配置，如果不设置，默认为当前选中的组件的父节点
|
||||
- {`MContainer`} parent 指定的容器组件节点配置，如果不设置，默认为当前选中的组件的父节点
|
||||
|
||||
- **返回：**
|
||||
- {Promise<[MNode](https://github.com/Tencent/tmagic-editor/blob/cce8b63fc3618b5b811aa33c703de21c22be8a6a/packages/schema/src/index.ts#L210) | [MNode](https://github.com/Tencent/tmagic-editor/blob/cce8b63fc3618b5b811aa33c703de21c22be8a6a/packages/schema/src/index.ts#L210)[]>} 新增的组件或组件集合
|
||||
- {Promise<`MNode` | `MNode`[]>} 新增的组件或组件集合
|
||||
|
||||
- **详情：**
|
||||
|
||||
@ -319,7 +351,7 @@ editorService.highlight("text_123");
|
||||
|
||||
- **[扩展支持](../../guide/editor-expand#行为扩展)：** 是
|
||||
- **参数：**
|
||||
- {[MNode](https://github.com/Tencent/tmagic-editor/blob/cce8b63fc3618b5b811aa33c703de21c22be8a6a/packages/schema/src/index.ts#L210)} node 要删除的节点
|
||||
- {`MNode`} node 要删除的节点
|
||||
|
||||
- **返回：**
|
||||
- `{Promise<void>}`
|
||||
@ -333,7 +365,7 @@ editorService.highlight("text_123");
|
||||
- **[扩展支持](../../guide/editor-expand#行为扩展)：** 是
|
||||
|
||||
- **参数：**
|
||||
- {[MNode](https://github.com/Tencent/tmagic-editor/blob/cce8b63fc3618b5b811aa33c703de21c22be8a6a/packages/schema/src/index.ts#L210) | [MNode](https://github.com/Tencent/tmagic-editor/blob/cce8b63fc3618b5b811aa33c703de21c22be8a6a/packages/schema/src/index.ts#L210)[])} node 要删除的节点或节点集合
|
||||
- {`MNode` | `MNode`[])} node 要删除的节点或节点集合
|
||||
|
||||
- **返回：**
|
||||
- `{Promise<void>}`
|
||||
@ -355,14 +387,18 @@ editorService.highlight("text_123");
|
||||
- **[扩展支持](../../guide/editor-expand#行为扩展)：** 是
|
||||
|
||||
- **参数：**
|
||||
- {[MNode](https://github.com/Tencent/tmagic-editor/blob/cce8b63fc3618b5b811aa33c703de21c22be8a6a/packages/schema/src/index.ts#L210)} config 新的节点
|
||||
- {`MNode`} config 新的节点
|
||||
- `{Object}` data 可选配置
|
||||
- {[ChangeRecord](https://github.com/Tencent/tmagic-editor/blob/cce8b63fc3618b5b811aa33c703de21c22be8a6a/packages/form/src/schema.ts#L8)[]} changeRecords 变更记录
|
||||
- {`ChangeRecord`[]} changeRecords 变更记录
|
||||
- `{boolean}` selectedAfterUpdate 更新后是否将新节点同步到当前选中节点列表
|
||||
|
||||
- **返回：**
|
||||
- `{Promise<{ newNode: MNode; oldNode: MNode; changeRecords?: ChangeRecord[] }>}` 更新前后的节点信息
|
||||
|
||||
::: details 查看 ChangeRecord 类型定义
|
||||
<<< @/../packages/form-schema/src/base.ts#ChangeRecord{ts}
|
||||
:::
|
||||
|
||||
- **详情：**
|
||||
|
||||
更新节点
|
||||
@ -376,13 +412,13 @@ editorService.highlight("text_123");
|
||||
- **[扩展支持](../../guide/editor-expand#行为扩展)：** 是
|
||||
|
||||
- **参数：**
|
||||
- {[MNode](https://github.com/Tencent/tmagic-editor/blob/cce8b63fc3618b5b811aa33c703de21c22be8a6a/packages/schema/src/index.ts#L210) | [MNode](https://github.com/Tencent/tmagic-editor/blob/cce8b63fc3618b5b811aa33c703de21c22be8a6a/packages/schema/src/index.ts#L210)[]} config 新的节点或节点集合
|
||||
- {`MNode` | `MNode`[]} config 新的节点或节点集合
|
||||
- `{Object}` data 可选配置
|
||||
- {[ChangeRecord](https://github.com/Tencent/tmagic-editor/blob/239b5d3efeae916a8cf3e3566d88063ecccc0553/packages/form/src/schema.ts#L27-L39)[]} changeRecords 变更记录
|
||||
- {`ChangeRecord`[]} changeRecords 变更记录
|
||||
- `{boolean}` selectedAfterUpdate 更新后是否同步到当前选中节点列表
|
||||
|
||||
- **返回：**
|
||||
- {Promise<[MNode](https://github.com/Tencent/tmagic-editor/blob/cce8b63fc3618b5b811aa33c703de21c22be8a6a/packages/schema/src/index.ts#L210) | [MNode](https://github.com/Tencent/tmagic-editor/blob/cce8b63fc3618b5b811aa33c703de21c22be8a6a/packages/schema/src/index.ts#L210)[]>} 新的节点或节点集合
|
||||
- {Promise<`MNode` | `MNode`[]>} 新的节点或节点集合
|
||||
|
||||
- **详情：**
|
||||
|
||||
@ -418,7 +454,7 @@ editorService.highlight("text_123");
|
||||
- **[扩展支持](../../guide/editor-expand#行为扩展)：** 是
|
||||
|
||||
- **参数：**
|
||||
- {[MNode](https://github.com/Tencent/tmagic-editor/blob/cce8b63fc3618b5b811aa33c703de21c22be8a6a/packages/schema/src/index.ts#L210) | [MNode](https://github.com/Tencent/tmagic-editor/blob/cce8b63fc3618b5b811aa33c703de21c22be8a6a/packages/schema/src/index.ts#L210)[]} config 需要复制的节点或节点集合
|
||||
- {`MNode` | `MNode`[]} config 需要复制的节点或节点集合
|
||||
|
||||
- **返回：**
|
||||
- `{void}`
|
||||
@ -432,7 +468,7 @@ editorService.highlight("text_123");
|
||||
## copyWithRelated
|
||||
|
||||
- **参数：**
|
||||
- {[MNode](https://github.com/Tencent/tmagic-editor/blob/cce8b63fc3618b5b811aa33c703de21c22be8a6a/packages/schema/src/index.ts#L210) | [MNode](https://github.com/Tencent/tmagic-editor/blob/cce8b63fc3618b5b811aa33c703de21c22be8a6a/packages/schema/src/index.ts#L210)[]} config 需要复制的节点或节点集合
|
||||
- {`MNode` | `MNode`[]} config 需要复制的节点或节点集合
|
||||
- `{TargetOptions}` collectorOptions 可选的依赖收集器配置
|
||||
|
||||
- **返回：**
|
||||
@ -460,10 +496,14 @@ editorService.highlight("text_123");
|
||||
- **[扩展支持](../../guide/editor-expand#行为扩展)：** 是
|
||||
|
||||
- **参数：**
|
||||
- {[PastePosition](https://github.com/Tencent/tmagic-editor/blob/239b5d3efeae916a8cf3e3566d88063ecccc0553/packages/editor/src/type.ts#L152-L163)} position 粘贴的坐标
|
||||
- {`PastePosition`} position 粘贴的坐标
|
||||
|
||||
::: details 查看 PastePosition 类型定义
|
||||
<<< @/../packages/editor/src/type.ts#PastePosition{ts}
|
||||
:::
|
||||
|
||||
- **返回：**
|
||||
- {Promise<[MNode](https://github.com/Tencent/tmagic-editor/blob/cce8b63fc3618b5b811aa33c703de21c22be8a6a/packages/schema/src/index.ts#L210) | [MNode](https://github.com/Tencent/tmagic-editor/blob/cce8b63fc3618b5b811aa33c703de21c22be8a6a/packages/schema/src/index.ts#L210)[]>} 添加后的组件节点配置
|
||||
- {Promise<`MNode` | `MNode`[]>} 添加后的组件节点配置
|
||||
|
||||
- **详情：**
|
||||
|
||||
@ -476,10 +516,10 @@ editorService.highlight("text_123");
|
||||
- **[扩展支持](../../guide/editor-expand#行为扩展)：** 是
|
||||
|
||||
- **参数：**
|
||||
- {[MNode](https://github.com/Tencent/tmagic-editor/blob/cce8b63fc3618b5b811aa33c703de21c22be8a6a/packages/schema/src/index.ts#L210)} config 需要居中的组件
|
||||
- {`MNode`} config 需要居中的组件
|
||||
|
||||
- **返回：**
|
||||
- {Promise<[MNode](https://github.com/Tencent/tmagic-editor/blob/cce8b63fc3618b5b811aa33c703de21c22be8a6a/packages/schema/src/index.ts#L210)>}
|
||||
- {Promise<`MNode`>}
|
||||
|
||||
- **详情：**
|
||||
|
||||
@ -494,10 +534,10 @@ editorService.highlight("text_123");
|
||||
- **[扩展支持](../../guide/editor-expand#行为扩展)：** 是
|
||||
|
||||
- **参数：**
|
||||
- {[MNode](https://github.com/Tencent/tmagic-editor/blob/cce8b63fc3618b5b811aa33c703de21c22be8a6a/packages/schema/src/index.ts#L210) | [MNode](https://github.com/Tencent/tmagic-editor/blob/cce8b63fc3618b5b811aa33c703de21c22be8a6a/packages/schema/src/index.ts#L210)[]} config 需要居中的组件或者组件集合
|
||||
- {`MNode` | `MNode`[]} config 需要居中的组件或者组件集合
|
||||
|
||||
- **返回：**
|
||||
- {Promise<[MNode](https://github.com/Tencent/tmagic-editor/blob/cce8b63fc3618b5b811aa33c703de21c22be8a6a/packages/schema/src/index.ts#L210) | [MNode](https://github.com/Tencent/tmagic-editor/blob/cce8b63fc3618b5b811aa33c703de21c22be8a6a/packages/schema/src/index.ts#L210)[]>}
|
||||
- {Promise<`MNode` | `MNode`[]>}
|
||||
|
||||
- **详情：**
|
||||
|
||||
@ -530,11 +570,11 @@ alignCenter可以支持一次水平居中多个组件，alignCenter是通过调
|
||||
- **[扩展支持](../../guide/editor-expand#行为扩展)：** 是
|
||||
|
||||
- **参数：**
|
||||
- {[MNode](https://github.com/Tencent/tmagic-editor/blob/cce8b63fc3618b5b811aa33c703de21c22be8a6a/packages/schema/src/index.ts#L210)} config 需要移动的节点
|
||||
- {`MNode`} config 需要移动的节点
|
||||
- `{string | number}` targetId 容器ID
|
||||
|
||||
- **返回：**
|
||||
- Promise<[MNode](https://github.com/Tencent/tmagic-editor/blob/cce8b63fc3618b5b811aa33c703de21c22be8a6a/packages/schema/src/index.ts#L210) | undefined>
|
||||
- Promise<`MNode` | undefined>
|
||||
|
||||
- **详情：**
|
||||
|
||||
@ -543,8 +583,8 @@ alignCenter可以支持一次水平居中多个组件，alignCenter是通过调
|
||||
## dragTo
|
||||
|
||||
- **参数：**
|
||||
- {[MNode](https://github.com/Tencent/tmagic-editor/blob/cce8b63fc3618b5b811aa33c703de21c22be8a6a/packages/schema/src/index.ts#L210) | [MNode](https://github.com/Tencent/tmagic-editor/blob/cce8b63fc3618b5b811aa33c703de21c22be8a6a/packages/schema/src/index.ts#L210)[]} config 需要拖拽的节点或节点集合
|
||||
- {[MContainer](https://github.com/Tencent/tmagic-editor/blob/cce8b63fc3618b5b811aa33c703de21c22be8a6a/packages/schema/src/index.ts#L139)} targetParent 目标父容器
|
||||
- {`MNode` | `MNode`[]} config 需要拖拽的节点或节点集合
|
||||
- {`MContainer`} targetParent 目标父容器
|
||||
- `{number}` targetIndex 目标位置索引
|
||||
|
||||
- **返回：**
|
||||
@ -559,7 +599,15 @@ alignCenter可以支持一次水平居中多个组件，alignCenter是通过调
|
||||
- **[扩展支持](../../guide/editor-expand#行为扩展)：** 是
|
||||
|
||||
- **返回：**
|
||||
- {Promise<[StepValue](https://github.com/Tencent/tmagic-editor/blob/239b5d3efeae916a8cf3e3566d88063ecccc0553/packages/editor/src/type.ts#L400-L404) | null>}
|
||||
- {Promise<`StepValue` | null>}
|
||||
|
||||
::: details 查看 StepValue 及关联类型定义
|
||||
<<< @/../packages/editor/src/type.ts#StepValue{ts}
|
||||
|
||||
<<< @/../packages/editor/src/type.ts#HistoryOpType{ts}
|
||||
|
||||
<<< @/../packages/schema/src/index.ts#Id{ts}
|
||||
:::
|
||||
|
||||
- **详情：**
|
||||
|
||||
@ -570,7 +618,7 @@ alignCenter可以支持一次水平居中多个组件，alignCenter是通过调
|
||||
- **[扩展支持](../../guide/editor-expand#行为扩展)：** 是
|
||||
|
||||
- **返回：**
|
||||
- {Promise<[StepValue](https://github.com/Tencent/tmagic-editor/blob/239b5d3efeae916a8cf3e3566d88063ecccc0553/packages/editor/src/type.ts#L400-L404) | null>}
|
||||
- {Promise<`StepValue` | null>}
|
||||
|
||||
- **详情：**
|
||||
|
||||
@ -673,3 +721,4 @@ editorService.usePlugin({
|
||||
- **详情：**
|
||||
|
||||
删掉当前设置的所有扩展
|
||||
|
||||
|
||||
@ -4,7 +4,9 @@
|
||||
|
||||
- **详情：** 编辑器右侧组件属性配置加载完毕后触发
|
||||
|
||||
- **事件回调函数：** (instance: InstanceType<typeof [FormPanel](https://github.com/Tencent/tmagic-editor/blob/master/packages/editor/src/layouts/props-panel/FormPanel.vue)>) => void
|
||||
- **事件回调函数：** `(instance: InstanceType<typeof FormPanel>) => void`
|
||||
|
||||
> [`FormPanel.vue`](https://github.com/Tencent/tmagic-editor/blob/master/packages/editor/src/layouts/props-panel/FormPanel.vue) 是属性面板组件实例
|
||||
|
||||
## props-panel-unmounted
|
||||
|
||||
@ -16,7 +18,25 @@
|
||||
|
||||
- **详情：** 当 [modelValue](./props.md#modelvalue-v-model)(DSL) 变化时触发，配合 `v-model` 使用
|
||||
|
||||
- **事件回调函数：** (value: [MApp](https://github.com/Tencent/tmagic-editor/blob/239b5d3efeae916a8cf3e3566d88063ecccc0553/packages/schema/src/index.ts?plain=1#L66-L73) | null) => void
|
||||
- **事件回调函数：** `(value: MApp | null) => void`
|
||||
|
||||
::: details 查看 MApp 及关联类型定义
|
||||
<<< @/../packages/schema/src/index.ts#MApp{ts}
|
||||
|
||||
<<< @/../packages/schema/src/index.ts#MComponent{ts}
|
||||
|
||||
<<< @/../packages/schema/src/index.ts#NodeType{ts}
|
||||
|
||||
<<< @/../packages/schema/src/index.ts#MPage{ts}
|
||||
|
||||
<<< @/../packages/schema/src/index.ts#MPageFragment{ts}
|
||||
|
||||
<<< @/../packages/schema/src/index.ts#CodeBlockDSL{ts}
|
||||
|
||||
<<< @/../packages/schema/src/index.ts#DataSourceSchema{ts}
|
||||
|
||||
<<< @/../packages/schema/src/index.ts#DataSourceDeps{ts}
|
||||
:::
|
||||
|
||||
## props-form-error
|
||||
|
||||
@ -38,7 +58,13 @@
|
||||
|
||||
默认行为（切换可展开节点的展开/收起状态）会先于该事件执行；可通过 [`beforeLayerNodeDblclick`](./props.md#beforelayernodedblclick) 钩子拦截，返回 `false` 时该事件不会被触发
|
||||
|
||||
- **事件回调函数：** (event: MouseEvent, data: [TreeNodeData](https://github.com/Tencent/tmagic-editor/blob/master/packages/editor/src/type.ts)) => void
|
||||
- **事件回调函数：** `(event: MouseEvent, data: TreeNodeData) => void`
|
||||
|
||||
::: details 查看 TreeNodeData 及关联类型定义
|
||||
<<< @/../packages/editor/src/type.ts#TreeNodeData{ts}
|
||||
|
||||
<<< @/../packages/schema/src/index.ts#Id{ts}
|
||||
:::
|
||||
|
||||
- **示例：**
|
||||
|
||||
|
||||
@ -4,7 +4,11 @@
|
||||
|
||||
- **参数：**
|
||||
|
||||
- {Record<string, [EventOption](https://github.com/Tencent/tmagic-editor/blob/239b5d3efeae916a8cf3e3566d88063ecccc0553/packages/core/src/events.ts#L26-L29)[]>} events 事件配置对象
|
||||
- {Record<string, `EventOption`[]>} events 事件配置对象
|
||||
|
||||
::: details 查看 EventOption 类型定义
|
||||
<<< @/../packages/core/src/utils.ts#EventOption{ts}
|
||||
:::
|
||||
|
||||
- **返回：**
|
||||
|
||||
@ -35,7 +39,7 @@ eventsService.setEvents({
|
||||
- **参数：**
|
||||
|
||||
- `{string}` type 组件类型
|
||||
- {[EventOption](https://github.com/Tencent/tmagic-editor/blob/239b5d3efeae916a8cf3e3566d88063ecccc0553/packages/core/src/events.ts#L26-L29)[]} events 事件列表
|
||||
- {`EventOption`[]} events 事件列表
|
||||
|
||||
- **返回：**
|
||||
|
||||
@ -64,7 +68,7 @@ eventsService.setEvent('button', [
|
||||
|
||||
- **返回：**
|
||||
|
||||
- {[EventOption](https://github.com/Tencent/tmagic-editor/blob/239b5d3efeae916a8cf3e3566d88063ecccc0553/packages/core/src/events.ts#L26-L29)[]} 事件列表
|
||||
- {`EventOption`[]} 事件列表
|
||||
|
||||
- **详情：**
|
||||
|
||||
@ -83,7 +87,7 @@ console.log(events); // [{ label: '点击', value: 'click' }, ...]
|
||||
|
||||
- **参数：**
|
||||
|
||||
- {Record<string, [EventOption](https://github.com/Tencent/tmagic-editor/blob/239b5d3efeae916a8cf3e3566d88063ecccc0553/packages/core/src/events.ts#L26-L29)[]>} methods 方法配置对象
|
||||
- {Record<string, `EventOption`[]>} methods 方法配置对象
|
||||
|
||||
- **返回：**
|
||||
|
||||
@ -115,7 +119,7 @@ eventsService.setMethods({
|
||||
- **参数：**
|
||||
|
||||
- `{string}` type 组件类型
|
||||
- {[EventOption](https://github.com/Tencent/tmagic-editor/blob/239b5d3efeae916a8cf3e3566d88063ecccc0553/packages/core/src/events.ts#L26-L29)[]} methods 方法列表
|
||||
- {`EventOption`[]} methods 方法列表
|
||||
|
||||
- **返回：**
|
||||
|
||||
@ -146,7 +150,7 @@ eventsService.setMethod('video', [
|
||||
|
||||
- **返回：**
|
||||
|
||||
- {[EventOption](https://github.com/Tencent/tmagic-editor/blob/239b5d3efeae916a8cf3e3566d88063ecccc0553/packages/core/src/events.ts#L26-L29)[]} 方法列表
|
||||
- {`EventOption`[]} 方法列表
|
||||
|
||||
- **详情：**
|
||||
|
||||
@ -200,3 +204,4 @@ import { eventsService } from '@tmagic/editor';
|
||||
|
||||
eventsService.destroy();
|
||||
```
|
||||
|
||||
|
||||
@ -4,13 +4,27 @@
|
||||
|
||||
- **详情：** 页面切换
|
||||
|
||||
- **事件回调函数：** (undoRedo: [UndoRedo](https://github.com/Tencent/tmagic-editor/blob/239b5d3efeae916a8cf3e3566d88063ecccc0553/packages/editor/src/utils/undo-redo.ts)) => void
|
||||
- **事件回调函数：** `(undoRedo: UndoRedo) => void`
|
||||
|
||||
::: details 查看 UndoRedo 类定义
|
||||
<<< @/../packages/editor/src/utils/undo-redo.ts#UndoRedo{ts}
|
||||
:::
|
||||
|
||||
## change
|
||||
|
||||
- **详情：** 历史记录发生变化
|
||||
|
||||
- **事件回调函数：** (state: [StepValue](https://github.com/Tencent/tmagic-editor/blob/239b5d3efeae916a8cf3e3566d88063ecccc0553/packages/editor/src/type.ts#L400-L404) | null) => void
|
||||
- **事件回调函数：** `(state: StepValue | null) => void`
|
||||
|
||||
::: details 查看 StepValue 及关联类型定义
|
||||
<<< @/../packages/editor/src/type.ts#StepValue{ts}
|
||||
|
||||
<<< @/../packages/editor/src/type.ts#HistoryOpType{ts}
|
||||
|
||||
<<< @/../packages/schema/src/index.ts#Id{ts}
|
||||
|
||||
<<< @/../packages/schema/src/index.ts#MNode{ts}
|
||||
:::
|
||||
|
||||
:::tip
|
||||
当游标处于历史栈边界（已经无法继续撤销或重做）时，`UndoRedo.undo()` / `redo()` 返回 `null`，对应 `change` 回调收到的 `state` 为 `null`
|
||||
|
||||
@ -21,7 +21,13 @@
|
||||
## changePage
|
||||
|
||||
- **参数：**
|
||||
- {[MPage](https://github.com/Tencent/tmagic-editor/blob/cce8b63fc3618b5b811aa33c703de21c22be8a6a/packages/schema/src/index.ts#L157) | [MPageFragment](https://github.com/Tencent/tmagic-editor/blob/cce8b63fc3618b5b811aa33c703de21c22be8a6a/packages/schema/src/index.ts#L162)} page
|
||||
- `{MPage | MPageFragment} page`
|
||||
|
||||
::: details 查看 MPage / MPageFragment 类型定义
|
||||
<<< @/../packages/schema/src/index.ts#MPage{ts}
|
||||
|
||||
<<< @/../packages/schema/src/index.ts#MPageFragment{ts}
|
||||
:::
|
||||
|
||||
- **详情：**
|
||||
|
||||
@ -30,10 +36,20 @@
|
||||
## push
|
||||
|
||||
- **参数：**
|
||||
- {[StepValue](https://github.com/Tencent/tmagic-editor/blob/239b5d3efeae916a8cf3e3566d88063ecccc0553/packages/editor/src/type.ts#L400-L404)} state
|
||||
- `{StepValue} state`
|
||||
|
||||
::: details 查看 StepValue 及关联类型定义
|
||||
<<< @/../packages/editor/src/type.ts#StepValue{ts}
|
||||
|
||||
<<< @/../packages/editor/src/type.ts#HistoryOpType{ts}
|
||||
|
||||
<<< @/../packages/schema/src/index.ts#Id{ts}
|
||||
|
||||
<<< @/../packages/schema/src/index.ts#MNode{ts}
|
||||
:::
|
||||
|
||||
- **返回：**
|
||||
- {[StepValue](https://github.com/Tencent/tmagic-editor/blob/239b5d3efeae916a8cf3e3566d88063ecccc0553/packages/editor/src/type.ts#L400-L404) | null}
|
||||
- `{StepValue | null}`
|
||||
|
||||
- **详情：**
|
||||
|
||||
@ -42,7 +58,7 @@
|
||||
## undo
|
||||
|
||||
- **返回：**
|
||||
- {[StepValue](https://github.com/Tencent/tmagic-editor/blob/cce8b63fc3618b5b811aa33c703de21c22be8a6a/packages/editor/src/type.ts#L554-L573) | null}
|
||||
- `{StepValue | null}`
|
||||
|
||||
- **详情：**
|
||||
|
||||
@ -51,7 +67,7 @@
|
||||
## redo
|
||||
|
||||
- **返回：**
|
||||
- {[StepValue](https://github.com/Tencent/tmagic-editor/blob/cce8b63fc3618b5b811aa33c703de21c22be8a6a/packages/editor/src/type.ts#L554-L573) | null}
|
||||
- `{StepValue | null}`
|
||||
|
||||
- **详情：**
|
||||
|
||||
@ -62,3 +78,4 @@
|
||||
- **详情：**
|
||||
|
||||
销毁
|
||||
|
||||
|
||||
@ -9,7 +9,25 @@
|
||||
- **默认值：** `{}`
|
||||
|
||||
|
||||
- **类型：** [MApp](https://github.com/Tencent/tmagic-editor/blob/239b5d3efeae916a8cf3e3566d88063ecccc0553/packages/schema/src/index.ts?plain=1#L66-L73)[]
|
||||
- **类型：** `MApp[]`
|
||||
|
||||
::: details 查看 MApp 及关联类型定义
|
||||
<<< @/../packages/schema/src/index.ts#MApp{ts}
|
||||
|
||||
<<< @/../packages/schema/src/index.ts#MComponent{ts}
|
||||
|
||||
<<< @/../packages/schema/src/index.ts#NodeType{ts}
|
||||
|
||||
<<< @/../packages/schema/src/index.ts#MPage{ts}
|
||||
|
||||
<<< @/../packages/schema/src/index.ts#MPageFragment{ts}
|
||||
|
||||
<<< @/../packages/schema/src/index.ts#CodeBlockDSL{ts}
|
||||
|
||||
<<< @/../packages/schema/src/index.ts#DataSourceSchema{ts}
|
||||
|
||||
<<< @/../packages/schema/src/index.ts#DataSourceDeps{ts}
|
||||
:::
|
||||
|
||||
- **示例：**
|
||||
|
||||
@ -49,7 +67,13 @@ const dsl = ref({
|
||||
|
||||
- **默认值：** `[]`
|
||||
|
||||
- **类型：** [ComponentGroup](https://github.com/Tencent/tmagic-editor/blob/5880dfbe15fcead63e9dc7c91900f8c4e7a574d8/packages/editor/src/type.ts#L355)
|
||||
- **类型：** `ComponentGroup[]`
|
||||
|
||||
::: details 查看 ComponentGroup 及关联类型定义
|
||||
<<< @/../packages/editor/src/type.ts#ComponentGroup{ts}
|
||||
|
||||
<<< @/../packages/editor/src/type.ts#ComponentItem{ts}
|
||||
:::
|
||||
|
||||
::: tip
|
||||
icon使用的是[element-plus icon](https://element-plus.org/zh-CN/component/icon.html)
|
||||
@ -128,7 +152,11 @@ const componentGroupList = ref([
|
||||
|
||||
- **默认值：** `[]`
|
||||
|
||||
- **类型：** [DatasourceTypeOption](https://github.com/Tencent/tmagic-editor/blob/5880dfbe15fcead63e9dc7c91900f8c4e7a574d8/packages/editor/src/type.ts#L589)
|
||||
- **类型：** `DatasourceTypeOption[]`
|
||||
|
||||
::: details 查看 DatasourceTypeOption 类型定义
|
||||
<<< @/../packages/editor/src/type.ts#DatasourceTypeOption{ts}
|
||||
:::
|
||||
|
||||
- **示例：**
|
||||
|
||||
@ -169,7 +197,21 @@ const datasourceTypeList = ref([
|
||||
}
|
||||
```
|
||||
|
||||
- **类型：** [SideBarData](https://github.com/Tencent/tmagic-editor/blob/239b5d3efeae916a8cf3e3566d88063ecccc0553/packages/editor/src/type.ts#L258-L265)
|
||||
- **类型：** `SideBarData`
|
||||
|
||||
::: details 查看 SideBarData 及关联类型定义
|
||||
<<< @/../packages/editor/src/type.ts#SideBarData{ts}
|
||||
|
||||
<<< @/../packages/editor/src/type.ts#SideItem{ts}
|
||||
|
||||
<<< @/../packages/editor/src/type.ts#SideItemKey{ts}
|
||||
|
||||
<<< @/../packages/editor/src/type.ts#SideComponent{ts}
|
||||
|
||||
<<< @/../packages/editor/src/type.ts#MenuComponent{ts}
|
||||
|
||||
<<< @/../packages/editor/src/type.ts#Services{ts}
|
||||
:::
|
||||
|
||||
- **示例：**
|
||||
|
||||
@ -248,7 +290,21 @@ icon使用的是[element-plus icon](https://element-plus.org/zh-CN/component/ico
|
||||
{ left: [], center: [], right: [] }
|
||||
```
|
||||
|
||||
- **类型：** [MenuBarData](https://github.com/Tencent/tmagic-editor/blob/239b5d3efeae916a8cf3e3566d88063ecccc0553/packages/editor/src/type.ts#L235-L242)
|
||||
- **类型：** `MenuBarData`
|
||||
|
||||
::: details 查看 MenuBarData 及关联类型定义
|
||||
<<< @/../packages/editor/src/type.ts#MenuBarData{ts}
|
||||
|
||||
<<< @/../packages/editor/src/type.ts#ColumnLayout{ts}
|
||||
|
||||
<<< @/../packages/editor/src/type.ts#MenuItem{ts}
|
||||
|
||||
<<< @/../packages/editor/src/type.ts#MenuButton{ts}
|
||||
|
||||
<<< @/../packages/editor/src/type.ts#MenuComponent{ts}
|
||||
|
||||
<<< @/../packages/editor/src/type.ts#Services{ts}
|
||||
:::
|
||||
|
||||
- **示例：**
|
||||
|
||||
@ -296,7 +352,15 @@ const menu = ref({
|
||||
|
||||
- **默认值：** `[]`
|
||||
|
||||
- **类型：** ([MenuButton](https://github.com/Tencent/tmagic-editor/blob/239b5d3efeae916a8cf3e3566d88063ecccc0553/packages/editor/src/type.ts#L168-L195) | [MenuComponent](https://github.com/Tencent/tmagic-editor/blob/239b5d3efeae916a8cf3e3566d88063ecccc0553/packages/editor/src/type.ts#L197-L210))[]
|
||||
- **类型：** `(MenuButton | MenuComponent)[]`
|
||||
|
||||
::: details 查看 MenuButton / MenuComponent 及关联类型定义
|
||||
<<< @/../packages/editor/src/type.ts#MenuButton{ts}
|
||||
|
||||
<<< @/../packages/editor/src/type.ts#MenuComponent{ts}
|
||||
|
||||
<<< @/../packages/editor/src/type.ts#Services{ts}
|
||||
:::
|
||||
|
||||
- **示例：**
|
||||
|
||||
@ -330,7 +394,9 @@ const layerContentMenu = ref([
|
||||
|
||||
- **默认值：** `[]`
|
||||
|
||||
- **类型：** ([MenuButton](https://github.com/Tencent/tmagic-editor/blob/239b5d3efeae916a8cf3e3566d88063ecccc0553/packages/editor/src/type.ts#L168-L195) | [MenuComponent](https://github.com/Tencent/tmagic-editor/blob/239b5d3efeae916a8cf3e3566d88063ecccc0553/packages/editor/src/type.ts#L197-L210))[]
|
||||
- **类型：** `(MenuButton | MenuComponent)[]`
|
||||
|
||||
> 已在上面 [layerContentMenu](#layercontentmenu) 段落展开过相同类型，参考即可。
|
||||
|
||||
- **示例：**
|
||||
|
||||
@ -471,7 +537,19 @@ const renderFunction = async (stage) => {
|
||||
|
||||
- **默认值：** `{}`
|
||||
-
|
||||
- **类型：** Record<string, [FormConfig](https://github.com/Tencent/tmagic-editor/blob/239b5d3efeae916a8cf3e3566d88063ecccc0553/packages/form/src/schema.ts#L706)>
|
||||
- **类型：** `Record<string, FormConfig>`
|
||||
|
||||
::: details 查看 FormConfig 及关联类型定义
|
||||
<<< @/../packages/form-schema/src/base.ts#FormConfig{ts}
|
||||
|
||||
<<< @/../packages/form-schema/src/base.ts#FormItemConfig{ts}
|
||||
|
||||
<<< @/../packages/form-schema/src/base.ts#ChildConfig{ts}
|
||||
|
||||
<<< @/../packages/form-schema/src/base.ts#DynamicTypeConfig{ts}
|
||||
|
||||
<<< @/../packages/form-schema/src/base.ts#FormItem{ts}
|
||||
:::
|
||||
|
||||
- **示例：**
|
||||
|
||||
@ -552,7 +630,11 @@ const propsValues = {
|
||||
|
||||
- **默认值：** `{}`
|
||||
|
||||
- **类型：** Record<string, { events: [EventOption](https://github.com/Tencent/tmagic-editor/blob/239b5d3efeae916a8cf3e3566d88063ecccc0553/packages/core/src/events.ts#L26-L29)[]; methods: [EventOption](https://github.com/Tencent/tmagic-editor/blob/239b5d3efeae916a8cf3e3566d88063ecccc0553/packages/core/src/events.ts#L26-L29)[] }>
|
||||
- **类型：** `Record<string, { events: EventOption[]; methods: EventOption[] }>`
|
||||
|
||||
::: details 查看 EventOption 类型定义
|
||||
<<< @/../packages/core/src/utils.ts#EventOption{ts}
|
||||
:::
|
||||
|
||||
- **示例：**
|
||||
|
||||
@ -593,7 +675,23 @@ const eventMethodList = {
|
||||
|
||||
- **默认值：** `{}`
|
||||
|
||||
- **类型：** Record<string, Partial<[DataSourceSchema](https://github.com/Tencent/tmagic-editor/blob/5880dfbe15fcead63e9dc7c91900f8c4e7a574d8/packages/schema/src/index.ts#L221)>>
|
||||
- **类型：** `Record<string, Partial<DataSourceSchema>>`
|
||||
|
||||
::: details 查看 DataSourceSchema 及关联类型定义
|
||||
<<< @/../packages/schema/src/index.ts#DataSourceSchema{ts}
|
||||
|
||||
<<< @/../packages/schema/src/index.ts#DataSchema{ts}
|
||||
|
||||
<<< @/../packages/schema/src/index.ts#MockSchema{ts}
|
||||
|
||||
<<< @/../packages/schema/src/index.ts#CodeBlockContent{ts}
|
||||
|
||||
<<< @/../packages/schema/src/index.ts#CodeParam{ts}
|
||||
|
||||
<<< @/../packages/schema/src/index.ts#EventConfig{ts}
|
||||
|
||||
<<< @/../packages/schema/src/index.ts#JsEngine{ts}
|
||||
:::
|
||||
|
||||
- **示例：**
|
||||
|
||||
@ -634,7 +732,9 @@ const datasourceValues = {
|
||||
|
||||
- **默认值：** `{}`
|
||||
|
||||
- **类型：** Record<string, [FormConfig](https://github.com/Tencent/tmagic-editor/blob/239b5d3efeae916a8cf3e3566d88063ecccc0553/packages/form/src/schema.ts#L706)>
|
||||
- **类型：** `Record<string, FormConfig>`
|
||||
|
||||
> 已在上面 [propsConfigs](#propsconfigs) 段落展开过 `FormConfig` 类型定义，参考即可。
|
||||
|
||||
- **示例：**
|
||||
|
||||
@ -675,7 +775,11 @@ const datasourceConfigs = {
|
||||
|
||||
- **默认值：** `{}`
|
||||
|
||||
- **类型：** ((config: [CustomizeMoveableOptionsCallbackConfig](https://github.com/Tencent/tmagic-editor/blob/239b5d3efeae916a8cf3e3566d88063ecccc0553/packages/stage/src/types.ts#L97-L109)) => MoveableOptions) | [MoveableOptions](https://daybrush.com/moveable/release/latest/doc/)
|
||||
- **类型：** `((config: CustomizeMoveableOptionsCallbackConfig) => MoveableOptions) | `[`MoveableOptions`](https://daybrush.com/moveable/release/latest/doc/)
|
||||
|
||||
::: details 查看 CustomizeMoveableOptionsCallbackConfig 类型定义
|
||||
<<< @/../packages/stage/src/types.ts#CustomizeMoveableOptionsCallbackConfig{ts}
|
||||
:::
|
||||
|
||||
- **示例：**
|
||||
|
||||
@ -1412,7 +1516,11 @@ const extendFormState = async (state) => {
|
||||
|
||||
- **默认值：** `undefined`
|
||||
|
||||
- **类型：** [PageBarSortOptions](https://github.com/Tencent/tmagic-editor/blob/master/packages/editor/src/type.ts)
|
||||
- **类型：** `PageBarSortOptions`
|
||||
|
||||
::: details 查看 PageBarSortOptions 类型定义
|
||||
<<< @/../packages/editor/src/type.ts#PageBarSortOptions{ts}
|
||||
:::
|
||||
|
||||
- **示例：**
|
||||
|
||||
|
||||
@ -47,11 +47,23 @@
|
||||
- **[扩展支持](../../guide/editor-expand#行为扩展)：** 是
|
||||
|
||||
- **参数：**
|
||||
- {[FormConfig](https://github.com/Tencent/tmagic-editor/blob/cce8b63fc3618b5b811aa33c703de21c22be8a6a/packages/form-schema/src/base.ts#L864)} config
|
||||
- {`FormConfig`} config
|
||||
- `{string}` labelWidth 表单项 label 宽度，默认 `'80px'`
|
||||
|
||||
::: details 查看 FormConfig 及关联类型定义
|
||||
<<< @/../packages/form-schema/src/base.ts#FormConfig{ts}
|
||||
|
||||
<<< @/../packages/form-schema/src/base.ts#FormItemConfig{ts}
|
||||
|
||||
<<< @/../packages/form-schema/src/base.ts#ChildConfig{ts}
|
||||
|
||||
<<< @/../packages/form-schema/src/base.ts#DynamicTypeConfig{ts}
|
||||
|
||||
<<< @/../packages/form-schema/src/base.ts#FormItem{ts}
|
||||
:::
|
||||
|
||||
- **返回：**
|
||||
- {Promise<[FormConfig](https://github.com/Tencent/tmagic-editor/blob/cce8b63fc3618b5b811aa33c703de21c22be8a6a/packages/form-schema/src/base.ts#L864)>}
|
||||
- {Promise<`FormConfig`>}
|
||||
|
||||
- **详情：**
|
||||
|
||||
@ -60,7 +72,11 @@
|
||||
## setPropsConfigs
|
||||
|
||||
- **参数：**
|
||||
- {Record<string, [FormConfig](https://github.com/Tencent/tmagic-editor/blob/cce8b63fc3618b5b811aa33c703de21c22be8a6a/packages/form-schema/src/base.ts#L864) | [PropsFormConfigFunction](https://github.com/Tencent/tmagic-editor/blob/cce8b63fc3618b5b811aa33c703de21c22be8a6a/packages/editor/src/type.ts#L721)>} configs
|
||||
- {Record<string, `FormConfig` | `PropsFormConfigFunction`>} configs
|
||||
|
||||
::: details 查看 PropsFormConfigFunction 类型定义
|
||||
<<< @/../packages/editor/src/type.ts#PropsFormConfigFunction{ts}
|
||||
:::
|
||||
|
||||
- **返回：**
|
||||
- `{void}`
|
||||
@ -75,7 +91,7 @@
|
||||
|
||||
- **参数：**
|
||||
- `{string}` type 组件类型
|
||||
- {[FormConfig](https://github.com/Tencent/tmagic-editor/blob/cce8b63fc3618b5b811aa33c703de21c22be8a6a/packages/form-schema/src/base.ts#L864)} config 属性表单配置DSL
|
||||
- {`FormConfig`} config 属性表单配置DSL
|
||||
|
||||
- **返回：**
|
||||
- `{Promise<void>}`
|
||||
@ -91,10 +107,26 @@
|
||||
- **参数：**
|
||||
- `{string}` type 组件类型
|
||||
- `{Object}` data 可选参数
|
||||
- {[MNode](https://github.com/Tencent/tmagic-editor/blob/cce8b63fc3618b5b811aa33c703de21c22be8a6a/packages/schema/src/index.ts#L210) | null} node 当前节点
|
||||
- {`MNode` | null} node 当前节点
|
||||
|
||||
::: details 查看 MNode 及关联类型定义
|
||||
<<< @/../packages/schema/src/index.ts#MNode{ts}
|
||||
|
||||
<<< @/../packages/schema/src/index.ts#MComponent{ts}
|
||||
|
||||
<<< @/../packages/schema/src/index.ts#MContainer{ts}
|
||||
|
||||
<<< @/../packages/schema/src/index.ts#MIteratorContainer{ts}
|
||||
|
||||
<<< @/../packages/schema/src/index.ts#MPage{ts}
|
||||
|
||||
<<< @/../packages/schema/src/index.ts#MApp{ts}
|
||||
|
||||
<<< @/../packages/schema/src/index.ts#MPageFragment{ts}
|
||||
:::
|
||||
|
||||
- **返回：**
|
||||
- {Promise<[FormConfig](https://github.com/Tencent/tmagic-editor/blob/cce8b63fc3618b5b811aa33c703de21c22be8a6a/packages/form-schema/src/base.ts#L864)>}
|
||||
- {Promise<`FormConfig`>}
|
||||
|
||||
- **详情：**
|
||||
|
||||
@ -103,7 +135,7 @@
|
||||
## setPropsValues
|
||||
|
||||
- **参数：**
|
||||
- {Record<string, [MNode](https://github.com/Tencent/tmagic-editor/blob/cce8b63fc3618b5b811aa33c703de21c22be8a6a/packages/schema/src/index.ts#L210)>} values
|
||||
- {Record<string, `MNode`>} values
|
||||
|
||||
- **返回：**
|
||||
- `{void}`
|
||||
@ -116,7 +148,7 @@
|
||||
|
||||
- **参数：**
|
||||
- `{string}` type 组件类型
|
||||
- {[MNode](https://github.com/Tencent/tmagic-editor/blob/cce8b63fc3618b5b811aa33c703de21c22be8a6a/packages/schema/src/index.ts#L210)} value 组件初始值
|
||||
- {`MNode`} value 组件初始值
|
||||
|
||||
- **返回：**
|
||||
- `{Promise<void>}`
|
||||
@ -134,7 +166,7 @@
|
||||
- `{Object}` defaultValue 组件默认值，可选
|
||||
|
||||
- **返回：**
|
||||
- {Promise<[MNode](https://github.com/Tencent/tmagic-editor/blob/cce8b63fc3618b5b811aa33c703de21c22be8a6a/packages/schema/src/index.ts#L210)>} 合并默认配置后的节点对象
|
||||
- {Promise<`MNode`>} 合并默认配置后的节点对象
|
||||
|
||||
- **详情：**
|
||||
|
||||
@ -159,11 +191,11 @@
|
||||
- **[扩展支持](../../guide/editor-expand#行为扩展)：** 是
|
||||
|
||||
- **参数：**
|
||||
- {[MNode](https://github.com/Tencent/tmagic-editor/blob/cce8b63fc3618b5b811aa33c703de21c22be8a6a/packages/schema/src/index.ts#L210)} config
|
||||
- {`MNode`} config
|
||||
- `{boolean}` force 是否强制设置新ID，默认 `true`
|
||||
|
||||
- **返回：**
|
||||
- {[MNode](https://github.com/Tencent/tmagic-editor/blob/cce8b63fc3618b5b811aa33c703de21c22be8a6a/packages/schema/src/index.ts#L210)} 处理后的节点
|
||||
- {`MNode`} 处理后的节点
|
||||
|
||||
- **详情：**
|
||||
|
||||
@ -186,8 +218,8 @@
|
||||
## replaceRelateId
|
||||
|
||||
- **参数：**
|
||||
- {[MNode](https://github.com/Tencent/tmagic-editor/blob/cce8b63fc3618b5b811aa33c703de21c22be8a6a/packages/schema/src/index.ts#L210)[]} originConfigs 原始组件配置
|
||||
- {[MNode](https://github.com/Tencent/tmagic-editor/blob/cce8b63fc3618b5b811aa33c703de21c22be8a6a/packages/schema/src/index.ts#L210)[]} targetConfigs 待替换的组件配置
|
||||
- {`MNode`[]} originConfigs 原始组件配置
|
||||
- {`MNode`[]} targetConfigs 待替换的组件配置
|
||||
- `{TargetOptions}` collectorOptions 依赖收集器配置
|
||||
|
||||
- **返回：**
|
||||
@ -239,3 +271,4 @@
|
||||
- **详情：**
|
||||
|
||||
删掉当前设置的所有扩展
|
||||
|
||||
|
||||
@ -22,7 +22,7 @@
|
||||
|
||||
- **详情：** 编辑器顶部菜单栏
|
||||
|
||||
- **默认：** [NavMenu.vue](https://github.com/Tencent/tmagic-editor/blob/239b5d3efeae916a8cf3e3566d88063ecccc0553/packages/editor/src/layouts/NavMenu.vue)
|
||||
- **默认：** [NavMenu.vue](https://github.com/Tencent/tmagic-editor/blob/master/packages/editor/src/layouts/NavMenu.vue)
|
||||
|
||||
- **插槽 Props：**
|
||||
- `editorService`: editorService 实例
|
||||
@ -64,7 +64,7 @@
|
||||
|
||||
- **详情：** 左边栏
|
||||
|
||||
- **默认：** [Sidebar.vue](https://github.com/Tencent/tmagic-editor/blob/239b5d3efeae916a8cf3e3566d88063ecccc0553/packages/editor/src/layouts/sidebar/Sidebar.vue)
|
||||
- **默认：** [Sidebar.vue](https://github.com/Tencent/tmagic-editor/blob/master/packages/editor/src/layouts/sidebar/Sidebar.vue)
|
||||
|
||||
- **插槽 Props：**
|
||||
- `editorService`: editorService 实例
|
||||
@ -259,7 +259,7 @@
|
||||
|
||||
- **详情：** 编辑器中间区域
|
||||
|
||||
- **默认：** [Workspace.vue](https://github.com/Tencent/tmagic-editor/blob/239b5d3efeae916a8cf3e3566d88063ecccc0553/packages/editor/src/layouts/workspace/Workspace.vue)
|
||||
- **默认：** [Workspace.vue](https://github.com/Tencent/tmagic-editor/blob/master/packages/editor/src/layouts/workspace/Workspace.vue)
|
||||
|
||||
- **插槽 Props：**
|
||||
- `editorService`: editorService 实例
|
||||
@ -268,7 +268,7 @@
|
||||
|
||||
- **详情：** 画布
|
||||
|
||||
- **默认：** [Stage.vue](https://github.com/Tencent/tmagic-editor/blob/239b5d3efeae916a8cf3e3566d88063ecccc0553/packages/editor/src/layouts/workspace/Stage.vue)
|
||||
- **默认：** [Stage.vue](https://github.com/Tencent/tmagic-editor/blob/master/packages/editor/src/layouts/workspace/Stage.vue)
|
||||
|
||||
## stage-top
|
||||
|
||||
@ -380,7 +380,7 @@
|
||||
|
||||
- **详情：** 当前没有页面时，编辑器中间区域
|
||||
|
||||
- **默认：** [AddPageBox.vue](https://github.com/Tencent/tmagic-editor/blob/239b5d3efeae916a8cf3e3566d88063ecccc0553/packages/editor/src/layouts/AddPageBox.vue)
|
||||
- **默认：** [AddPageBox.vue](https://github.com/Tencent/tmagic-editor/blob/master/packages/editor/src/layouts/AddPageBox.vue)
|
||||
|
||||
- **插槽 Props：**
|
||||
- `editorService`: editorService 实例
|
||||
|
||||
@ -6,7 +6,19 @@
|
||||
|
||||
- **默认值：** `[]`
|
||||
|
||||
- **类型：** [FormConfig](https://github.com/Tencent/tmagic-editor/blob/cce8b63fc3618b5b811aa33c703de21c22be8a6a/packages/form-schema/src/base.ts#L864)
|
||||
- **类型：** `FormConfig`
|
||||
|
||||
::: details 查看 FormConfig 及关联类型定义
|
||||
<<< @/../packages/form-schema/src/base.ts#FormConfig{ts}
|
||||
|
||||
<<< @/../packages/form-schema/src/base.ts#FormItemConfig{ts}
|
||||
|
||||
<<< @/../packages/form-schema/src/base.ts#ChildConfig{ts}
|
||||
|
||||
<<< @/../packages/form-schema/src/base.ts#DynamicTypeConfig{ts}
|
||||
|
||||
<<< @/../packages/form-schema/src/base.ts#FormItem{ts}
|
||||
:::
|
||||
|
||||
- **示例：**
|
||||
|
||||
|
||||
@ -6,7 +6,19 @@
|
||||
|
||||
- **默认值：** `[]`
|
||||
|
||||
- **类型：** [FormConfig](https://github.com/Tencent/tmagic-editor/blob/cce8b63fc3618b5b811aa33c703de21c22be8a6a/packages/form-schema/src/base.ts#L864)
|
||||
- **类型：** `FormConfig`
|
||||
|
||||
::: details 查看 FormConfig 及关联类型定义
|
||||
<<< @/../packages/form-schema/src/base.ts#FormConfig{ts}
|
||||
|
||||
<<< @/../packages/form-schema/src/base.ts#FormItemConfig{ts}
|
||||
|
||||
<<< @/../packages/form-schema/src/base.ts#ChildConfig{ts}
|
||||
|
||||
<<< @/../packages/form-schema/src/base.ts#DynamicTypeConfig{ts}
|
||||
|
||||
<<< @/../packages/form-schema/src/base.ts#FormItem{ts}
|
||||
:::
|
||||
|
||||
- **示例：**
|
||||
|
||||
|
||||
@ -33,7 +33,29 @@
|
||||
| ----------- | ------------------ | -------------------------------------------------------------------------------------------------------------------------------------------------------- | ------ | ------ |
|
||||
| name | 绑定值 | string | — | — |
|
||||
| text | 表单标签 | string | — | — |
|
||||
| disabled | 是否禁用 | boolean / [FilterFunction](https://github.com/Tencent/tmagic-editor/blob/cce8b63fc3618b5b811aa33c703de21c22be8a6a/packages/form-schema/src/base.ts#L195) | — | false |
|
||||
| disabled | 是否禁用 | boolean / `FilterFunction` | — | false |
|
||||
| formTitle | 弹窗标题 | string | — | — |
|
||||
| codeOptions | 代码编辑器配置项 | object | — | — |
|
||||
| onChange | 值变化时触发的函数 | [OnChangeHandler](https://github.com/Tencent/tmagic-editor/blob/cce8b63fc3618b5b811aa33c703de21c22be8a6a/packages/form-schema/src/base.ts#L30) | — | - |
|
||||
| onChange | 值变化时触发的函数 | `OnChangeHandler` | — | - |
|
||||
|
||||
::: details 查看 FilterFunction / OnChangeHandler 及关联类型定义
|
||||
<<< @/../packages/form-schema/src/base.ts#FilterFunction{ts}
|
||||
|
||||
<<< @/../packages/form-schema/src/base.ts#OnChangeHandler{ts}
|
||||
|
||||
<<< @/../packages/form-schema/src/base.ts#OnChangeHandlerData{ts}
|
||||
|
||||
<<< @/../packages/form-schema/src/base.ts#ChangeRecord{ts}
|
||||
|
||||
<<< @/../packages/form-schema/src/base.ts#FormValue{ts}
|
||||
:::
|
||||
|
||||
|
||||
## 配置类型
|
||||
|
||||
::: details 查看 CodeLinkConfig 配置类型定义
|
||||
<<< @/../packages/form-schema/src/editor.ts#CodeLinkConfig{ts}
|
||||
|
||||
<<< @/../packages/form-schema/src/base.ts#FormItem{ts}
|
||||
|
||||
:::
|
||||
|
||||
@ -33,6 +33,28 @@
|
||||
| ----------- | ------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------- | ------ | ------ |
|
||||
| name | 绑定值 | string | — | — |
|
||||
| text | 表单标签 | string | — | — |
|
||||
| disabled | 是否禁用 | boolean / [FilterFunction](https://github.com/Tencent/tmagic-editor/blob/cce8b63fc3618b5b811aa33c703de21c22be8a6a/packages/form-schema/src/base.ts#L195) | — | false |
|
||||
| notEditable | 是否不可编辑代码块（disable控制是否可选择） | boolean / [FilterFunction](https://github.com/Tencent/tmagic-editor/blob/cce8b63fc3618b5b811aa33c703de21c22be8a6a/packages/form-schema/src/base.ts#L195) | — | false |
|
||||
| onChange | 值变化时触发的函数 | [OnChangeHandler](https://github.com/Tencent/tmagic-editor/blob/cce8b63fc3618b5b811aa33c703de21c22be8a6a/packages/form-schema/src/base.ts#L30) | — | - |
|
||||
| disabled | 是否禁用 | boolean / `FilterFunction` | — | false |
|
||||
| notEditable | 是否不可编辑代码块（disable控制是否可选择） | boolean / `FilterFunction` | — | false |
|
||||
| onChange | 值变化时触发的函数 | `OnChangeHandler` | — | - |
|
||||
|
||||
::: details 查看 FilterFunction / OnChangeHandler 及关联类型定义
|
||||
<<< @/../packages/form-schema/src/base.ts#FilterFunction{ts}
|
||||
|
||||
<<< @/../packages/form-schema/src/base.ts#OnChangeHandler{ts}
|
||||
|
||||
<<< @/../packages/form-schema/src/base.ts#OnChangeHandlerData{ts}
|
||||
|
||||
<<< @/../packages/form-schema/src/base.ts#ChangeRecord{ts}
|
||||
|
||||
<<< @/../packages/form-schema/src/base.ts#FormValue{ts}
|
||||
:::
|
||||
|
||||
|
||||
## 配置类型
|
||||
|
||||
::: details 查看 CodeSelectColConfig 配置类型定义
|
||||
<<< @/../packages/form-schema/src/editor.ts#CodeSelectColConfig{ts}
|
||||
|
||||
<<< @/../packages/form-schema/src/base.ts#FormItem{ts}
|
||||
|
||||
:::
|
||||
|
||||
@ -30,6 +30,28 @@ CodeSelect 组件支持：
|
||||
| --------- | ------------------ | -------------------------------------------------------------------------------------------------------------------------------------------------------- | ------ | ------ |
|
||||
| name | 绑定值 | string | — | — |
|
||||
| text | 表单标签 | string | — | — |
|
||||
| disabled | 是否禁用 | boolean / [FilterFunction](https://github.com/Tencent/tmagic-editor/blob/cce8b63fc3618b5b811aa33c703de21c22be8a6a/packages/form-schema/src/base.ts#L195) | — | false |
|
||||
| disabled | 是否禁用 | boolean / `FilterFunction` | — | false |
|
||||
| className | 自定义类名 | string | — | — |
|
||||
| onChange | 值变化时触发的函数 | [OnChangeHandler](https://github.com/Tencent/tmagic-editor/blob/cce8b63fc3618b5b811aa33c703de21c22be8a6a/packages/form-schema/src/base.ts#L30) | — | - |
|
||||
| onChange | 值变化时触发的函数 | `OnChangeHandler` | — | - |
|
||||
|
||||
::: details 查看 FilterFunction / OnChangeHandler 及关联类型定义
|
||||
<<< @/../packages/form-schema/src/base.ts#FilterFunction{ts}
|
||||
|
||||
<<< @/../packages/form-schema/src/base.ts#OnChangeHandler{ts}
|
||||
|
||||
<<< @/../packages/form-schema/src/base.ts#OnChangeHandlerData{ts}
|
||||
|
||||
<<< @/../packages/form-schema/src/base.ts#ChangeRecord{ts}
|
||||
|
||||
<<< @/../packages/form-schema/src/base.ts#FormValue{ts}
|
||||
:::
|
||||
|
||||
|
||||
## 配置类型
|
||||
|
||||
::: details 查看 CodeSelectConfig 配置类型定义
|
||||
<<< @/../packages/form-schema/src/editor.ts#CodeSelectConfig{ts}
|
||||
|
||||
<<< @/../packages/form-schema/src/base.ts#FormItem{ts}
|
||||
|
||||
:::
|
||||
|
||||
@ -47,14 +47,36 @@
|
||||
| ------------- | -------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------- | ------ |
|
||||
| name | 绑定值 | string | — | — |
|
||||
| text | 表单标签 | string | — | — |
|
||||
| disabled | 是否禁用 | boolean / [FilterFunction](https://github.com/Tencent/tmagic-editor/blob/cce8b63fc3618b5b811aa33c703de21c22be8a6a/packages/form-schema/src/base.ts#L195) | — | false |
|
||||
| disabled | 是否禁用 | boolean / `FilterFunction` | — | false |
|
||||
| language | 代码语言 | string | javascript/typescript/json等 | — |
|
||||
| height | 编辑器高度 | string | — | — |
|
||||
| parse | 是否解析代码 | boolean | — | false |
|
||||
| options | 编辑器配置项 | object | — | — |
|
||||
| autosize | 自动调整大小配置 | object | — | — |
|
||||
| mFormItemType | 传入代码编辑器的自定义类型 | string | — | — |
|
||||
| onChange | 值变化时触发的函数 | [OnChangeHandler](https://github.com/Tencent/tmagic-editor/blob/cce8b63fc3618b5b811aa33c703de21c22be8a6a/packages/form-schema/src/base.ts#L30) | — | - |
|
||||
| onChange | 值变化时触发的函数 | `OnChangeHandler` | — | - |
|
||||
|
||||
::: details 查看 FilterFunction / OnChangeHandler 及关联类型定义
|
||||
<<< @/../packages/form-schema/src/base.ts#FilterFunction{ts}
|
||||
|
||||
<<< @/../packages/form-schema/src/base.ts#OnChangeHandler{ts}
|
||||
|
||||
<<< @/../packages/form-schema/src/base.ts#OnChangeHandlerData{ts}
|
||||
|
||||
<<< @/../packages/form-schema/src/base.ts#ChangeRecord{ts}
|
||||
|
||||
<<< @/../packages/form-schema/src/base.ts#FormValue{ts}
|
||||
:::
|
||||
|
||||
|
||||
## 配置类型
|
||||
|
||||
::: details 查看 CodeConfig 配置类型定义
|
||||
<<< @/../packages/form-schema/src/editor.ts#CodeConfig{ts}
|
||||
|
||||
<<< @/../packages/form-schema/src/base.ts#FormItem{ts}
|
||||
|
||||
:::
|
||||
|
||||
## autosize Attributes
|
||||
|
||||
|
||||
@ -33,6 +33,28 @@
|
||||
| ------------ | ------------------ | -------------------------------------------------------------------------------------------------------------------------------------------------------- | ------ | ------ |
|
||||
| name | 绑定值 | string | — | — |
|
||||
| text | 表单标签 | string | — | — |
|
||||
| disabled | 是否禁用 | boolean / [FilterFunction](https://github.com/Tencent/tmagic-editor/blob/cce8b63fc3618b5b811aa33c703de21c22be8a6a/packages/form-schema/src/base.ts#L195) | — | false |
|
||||
| disabled | 是否禁用 | boolean / `FilterFunction` | — | false |
|
||||
| parentFields | 父级字段 | string[] | — | — |
|
||||
| onChange | 值变化时触发的函数 | [OnChangeHandler](https://github.com/Tencent/tmagic-editor/blob/cce8b63fc3618b5b811aa33c703de21c22be8a6a/packages/form-schema/src/base.ts#L30) | — | - |
|
||||
| onChange | 值变化时触发的函数 | `OnChangeHandler` | — | - |
|
||||
|
||||
::: details 查看 FilterFunction / OnChangeHandler 及关联类型定义
|
||||
<<< @/../packages/form-schema/src/base.ts#FilterFunction{ts}
|
||||
|
||||
<<< @/../packages/form-schema/src/base.ts#OnChangeHandler{ts}
|
||||
|
||||
<<< @/../packages/form-schema/src/base.ts#OnChangeHandlerData{ts}
|
||||
|
||||
<<< @/../packages/form-schema/src/base.ts#ChangeRecord{ts}
|
||||
|
||||
<<< @/../packages/form-schema/src/base.ts#FormValue{ts}
|
||||
:::
|
||||
|
||||
|
||||
## 配置类型
|
||||
|
||||
::: details 查看 CondOpSelectConfig 配置类型定义
|
||||
<<< @/../packages/form-schema/src/editor.ts#CondOpSelectConfig{ts}
|
||||
|
||||
<<< @/../packages/form-schema/src/base.ts#FormItem{ts}
|
||||
|
||||
:::
|
||||
|
||||
@ -55,13 +55,35 @@
|
||||
| ------------------- | ------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------- | --------- | ------ |
|
||||
| name | 绑定值 | string | — | — |
|
||||
| text | 表单标签 | string | — | — |
|
||||
| disabled | 是否禁用 | boolean / [FilterFunction](https://github.com/Tencent/tmagic-editor/blob/cce8b63fc3618b5b811aa33c703de21c22be8a6a/packages/form-schema/src/base.ts#L195) | — | false |
|
||||
| disabled | 是否禁用 | boolean / `FilterFunction` | — | false |
|
||||
| value | 返回值类型 | string | key/value | — |
|
||||
| checkStrictly | 是否严格遵守父子节点不互相关联 | boolean / Function | — | — |
|
||||
| dataSourceFieldType | 允许选择的字段类型 | DataSourceFieldType[] | — | — |
|
||||
| fieldConfig | 自定义字段配置 | ChildConfig | — | — |
|
||||
| notEditable | 是否不可编辑数据源（disable控制是否可选择） | boolean / [FilterFunction](https://github.com/Tencent/tmagic-editor/blob/cce8b63fc3618b5b811aa33c703de21c22be8a6a/packages/form-schema/src/base.ts#L195) | — | false |
|
||||
| onChange | 值变化时触发的函数 | [OnChangeHandler](https://github.com/Tencent/tmagic-editor/blob/cce8b63fc3618b5b811aa33c703de21c22be8a6a/packages/form-schema/src/base.ts#L30) | — | - |
|
||||
| notEditable | 是否不可编辑数据源（disable控制是否可选择） | boolean / `FilterFunction` | — | false |
|
||||
| onChange | 值变化时触发的函数 | `OnChangeHandler` | — | - |
|
||||
|
||||
::: details 查看 FilterFunction / OnChangeHandler 及关联类型定义
|
||||
<<< @/../packages/form-schema/src/base.ts#FilterFunction{ts}
|
||||
|
||||
<<< @/../packages/form-schema/src/base.ts#OnChangeHandler{ts}
|
||||
|
||||
<<< @/../packages/form-schema/src/base.ts#OnChangeHandlerData{ts}
|
||||
|
||||
<<< @/../packages/form-schema/src/base.ts#ChangeRecord{ts}
|
||||
|
||||
<<< @/../packages/form-schema/src/base.ts#FormValue{ts}
|
||||
:::
|
||||
|
||||
|
||||
## 配置类型
|
||||
|
||||
::: details 查看 DataSourceFieldSelectConfig 配置类型定义
|
||||
<<< @/../packages/form-schema/src/editor.ts#DataSourceFieldSelectConfig{ts}
|
||||
|
||||
<<< @/../packages/form-schema/src/base.ts#FormItem{ts}
|
||||
|
||||
:::
|
||||
|
||||
## value说明
|
||||
|
||||
|
||||
@ -22,5 +22,27 @@
|
||||
| -------- | ------------------ | -------------------------------------------------------------------------------------------------------------------------------------------------------- | ------ | ------ |
|
||||
| name | 绑定值 | string | — | — |
|
||||
| text | 表单标签 | string | — | — |
|
||||
| disabled | 是否禁用 | boolean / [FilterFunction](https://github.com/Tencent/tmagic-editor/blob/cce8b63fc3618b5b811aa33c703de21c22be8a6a/packages/form-schema/src/base.ts#L195) | — | false |
|
||||
| onChange | 值变化时触发的函数 | [OnChangeHandler](https://github.com/Tencent/tmagic-editor/blob/cce8b63fc3618b5b811aa33c703de21c22be8a6a/packages/form-schema/src/base.ts#L30) | — | - |
|
||||
| disabled | 是否禁用 | boolean / `FilterFunction` | — | false |
|
||||
| onChange | 值变化时触发的函数 | `OnChangeHandler` | — | - |
|
||||
|
||||
::: details 查看 FilterFunction / OnChangeHandler 及关联类型定义
|
||||
<<< @/../packages/form-schema/src/base.ts#FilterFunction{ts}
|
||||
|
||||
<<< @/../packages/form-schema/src/base.ts#OnChangeHandler{ts}
|
||||
|
||||
<<< @/../packages/form-schema/src/base.ts#OnChangeHandlerData{ts}
|
||||
|
||||
<<< @/../packages/form-schema/src/base.ts#ChangeRecord{ts}
|
||||
|
||||
<<< @/../packages/form-schema/src/base.ts#FormValue{ts}
|
||||
:::
|
||||
|
||||
|
||||
## 配置类型
|
||||
|
||||
::: details 查看 DataSourceFieldsConfig 配置类型定义
|
||||
<<< @/../packages/form-schema/src/editor.ts#DataSourceFieldsConfig{ts}
|
||||
|
||||
<<< @/../packages/form-schema/src/base.ts#FormItem{ts}
|
||||
|
||||
:::
|
||||
|
||||
@ -22,5 +22,27 @@
|
||||
| -------- | ------------------ | -------------------------------------------------------------------------------------------------------------------------------------------------------- | ------ | ------ |
|
||||
| name | 绑定值 | string | — | — |
|
||||
| text | 表单标签 | string | — | — |
|
||||
| disabled | 是否禁用 | boolean / [FilterFunction](https://github.com/Tencent/tmagic-editor/blob/cce8b63fc3618b5b811aa33c703de21c22be8a6a/packages/form-schema/src/base.ts#L195) | — | false |
|
||||
| onChange | 值变化时触发的函数 | [OnChangeHandler](https://github.com/Tencent/tmagic-editor/blob/cce8b63fc3618b5b811aa33c703de21c22be8a6a/packages/form-schema/src/base.ts#L30) | — | - |
|
||||
| disabled | 是否禁用 | boolean / `FilterFunction` | — | false |
|
||||
| onChange | 值变化时触发的函数 | `OnChangeHandler` | — | - |
|
||||
|
||||
::: details 查看 FilterFunction / OnChangeHandler 及关联类型定义
|
||||
<<< @/../packages/form-schema/src/base.ts#FilterFunction{ts}
|
||||
|
||||
<<< @/../packages/form-schema/src/base.ts#OnChangeHandler{ts}
|
||||
|
||||
<<< @/../packages/form-schema/src/base.ts#OnChangeHandlerData{ts}
|
||||
|
||||
<<< @/../packages/form-schema/src/base.ts#ChangeRecord{ts}
|
||||
|
||||
<<< @/../packages/form-schema/src/base.ts#FormValue{ts}
|
||||
:::
|
||||
|
||||
|
||||
## 配置类型
|
||||
|
||||
::: details 查看 DataSourceInputConfig 配置类型定义
|
||||
<<< @/../packages/form-schema/src/editor.ts#DataSourceInputConfig{ts}
|
||||
|
||||
<<< @/../packages/form-schema/src/base.ts#FormItem{ts}
|
||||
|
||||
:::
|
||||
|
||||
@ -33,6 +33,28 @@
|
||||
| ----------- | ------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------- | ------ | ------ |
|
||||
| name | 绑定值 | string | — | — |
|
||||
| text | 表单标签 | string | — | — |
|
||||
| disabled | 是否禁用 | boolean / [FilterFunction](https://github.com/Tencent/tmagic-editor/blob/cce8b63fc3618b5b811aa33c703de21c22be8a6a/packages/form-schema/src/base.ts#L195) | — | false |
|
||||
| notEditable | 是否不可编辑数据源（disable控制是否可选择） | boolean / [FilterFunction](https://github.com/Tencent/tmagic-editor/blob/cce8b63fc3618b5b811aa33c703de21c22be8a6a/packages/form-schema/src/base.ts#L195) | — | false |
|
||||
| onChange | 值变化时触发的函数 | [OnChangeHandler](https://github.com/Tencent/tmagic-editor/blob/cce8b63fc3618b5b811aa33c703de21c22be8a6a/packages/form-schema/src/base.ts#L30) | — | - |
|
||||
| disabled | 是否禁用 | boolean / `FilterFunction` | — | false |
|
||||
| notEditable | 是否不可编辑数据源（disable控制是否可选择） | boolean / `FilterFunction` | — | false |
|
||||
| onChange | 值变化时触发的函数 | `OnChangeHandler` | — | - |
|
||||
|
||||
::: details 查看 FilterFunction / OnChangeHandler 及关联类型定义
|
||||
<<< @/../packages/form-schema/src/base.ts#FilterFunction{ts}
|
||||
|
||||
<<< @/../packages/form-schema/src/base.ts#OnChangeHandler{ts}
|
||||
|
||||
<<< @/../packages/form-schema/src/base.ts#OnChangeHandlerData{ts}
|
||||
|
||||
<<< @/../packages/form-schema/src/base.ts#ChangeRecord{ts}
|
||||
|
||||
<<< @/../packages/form-schema/src/base.ts#FormValue{ts}
|
||||
:::
|
||||
|
||||
|
||||
## 配置类型
|
||||
|
||||
::: details 查看 DataSourceMethodSelectConfig 配置类型定义
|
||||
<<< @/../packages/form-schema/src/editor.ts#DataSourceMethodSelectConfig{ts}
|
||||
|
||||
<<< @/../packages/form-schema/src/base.ts#FormItem{ts}
|
||||
|
||||
:::
|
||||
|
||||
@ -22,5 +22,27 @@
|
||||
| -------- | ------------------ | -------------------------------------------------------------------------------------------------------------------------------------------------------- | ------ | ------ |
|
||||
| name | 绑定值 | string | — | — |
|
||||
| text | 表单标签 | string | — | — |
|
||||
| disabled | 是否禁用 | boolean / [FilterFunction](https://github.com/Tencent/tmagic-editor/blob/cce8b63fc3618b5b811aa33c703de21c22be8a6a/packages/form-schema/src/base.ts#L195) | — | false |
|
||||
| onChange | 值变化时触发的函数 | [OnChangeHandler](https://github.com/Tencent/tmagic-editor/blob/cce8b63fc3618b5b811aa33c703de21c22be8a6a/packages/form-schema/src/base.ts#L30) | — | - |
|
||||
| disabled | 是否禁用 | boolean / `FilterFunction` | — | false |
|
||||
| onChange | 值变化时触发的函数 | `OnChangeHandler` | — | - |
|
||||
|
||||
::: details 查看 FilterFunction / OnChangeHandler 及关联类型定义
|
||||
<<< @/../packages/form-schema/src/base.ts#FilterFunction{ts}
|
||||
|
||||
<<< @/../packages/form-schema/src/base.ts#OnChangeHandler{ts}
|
||||
|
||||
<<< @/../packages/form-schema/src/base.ts#OnChangeHandlerData{ts}
|
||||
|
||||
<<< @/../packages/form-schema/src/base.ts#ChangeRecord{ts}
|
||||
|
||||
<<< @/../packages/form-schema/src/base.ts#FormValue{ts}
|
||||
:::
|
||||
|
||||
|
||||
## 配置类型
|
||||
|
||||
::: details 查看 DataSourceMethodsConfig 配置类型定义
|
||||
<<< @/../packages/form-schema/src/editor.ts#DataSourceMethodsConfig{ts}
|
||||
|
||||
<<< @/../packages/form-schema/src/base.ts#FormItem{ts}
|
||||
|
||||
:::
|
||||
|
||||
@ -22,5 +22,27 @@
|
||||
| -------- | ------------------ | -------------------------------------------------------------------------------------------------------------------------------------------------------- | ------ | ------ |
|
||||
| name | 绑定值 | string | — | — |
|
||||
| text | 表单标签 | string | — | — |
|
||||
| disabled | 是否禁用 | boolean / [FilterFunction](https://github.com/Tencent/tmagic-editor/blob/cce8b63fc3618b5b811aa33c703de21c22be8a6a/packages/form-schema/src/base.ts#L195) | — | false |
|
||||
| onChange | 值变化时触发的函数 | [OnChangeHandler](https://github.com/Tencent/tmagic-editor/blob/cce8b63fc3618b5b811aa33c703de21c22be8a6a/packages/form-schema/src/base.ts#L30) | — | - |
|
||||
| disabled | 是否禁用 | boolean / `FilterFunction` | — | false |
|
||||
| onChange | 值变化时触发的函数 | `OnChangeHandler` | — | - |
|
||||
|
||||
::: details 查看 FilterFunction / OnChangeHandler 及关联类型定义
|
||||
<<< @/../packages/form-schema/src/base.ts#FilterFunction{ts}
|
||||
|
||||
<<< @/../packages/form-schema/src/base.ts#OnChangeHandler{ts}
|
||||
|
||||
<<< @/../packages/form-schema/src/base.ts#OnChangeHandlerData{ts}
|
||||
|
||||
<<< @/../packages/form-schema/src/base.ts#ChangeRecord{ts}
|
||||
|
||||
<<< @/../packages/form-schema/src/base.ts#FormValue{ts}
|
||||
:::
|
||||
|
||||
|
||||
## 配置类型
|
||||
|
||||
::: details 查看 DataSourceMocksConfig 配置类型定义
|
||||
<<< @/../packages/form-schema/src/editor.ts#DataSourceMocksConfig{ts}
|
||||
|
||||
<<< @/../packages/form-schema/src/base.ts#FormItem{ts}
|
||||
|
||||
:::
|
||||
|
||||
@ -45,11 +45,35 @@
|
||||
| name | 绑定值 | string | — | — |
|
||||
| text | 表单标签 | string | — | — |
|
||||
| placeholder | 输入框占位文本 | string | — | — |
|
||||
| disabled | 是否禁用 | boolean / [FilterFunction](https://github.com/Tencent/tmagic-editor/blob/cce8b63fc3618b5b811aa33c703de21c22be8a6a/packages/form-schema/src/base.ts#L195) | — | false |
|
||||
| disabled | 是否禁用 | boolean / `FilterFunction` | — | false |
|
||||
| dataSourceType | 数据源类型过滤 | string | base/http等 | — |
|
||||
| value | 返回值类型 | string | id/value | — |
|
||||
| notEditable | 是否不可编辑数据源（disable控制是否可选择） | boolean / [FilterFunction](https://github.com/Tencent/tmagic-editor/blob/cce8b63fc3618b5b811aa33c703de21c22be8a6a/packages/form-schema/src/base.ts#L195) | — | false |
|
||||
| onChange | 值变化时触发的函数 | [OnChangeHandler](https://github.com/Tencent/tmagic-editor/blob/cce8b63fc3618b5b811aa33c703de21c22be8a6a/packages/form-schema/src/base.ts#L30) | — | - |
|
||||
| notEditable | 是否不可编辑数据源（disable控制是否可选择） | boolean / `FilterFunction` | — | false |
|
||||
| onChange | 值变化时触发的函数 | `OnChangeHandler` | — | - |
|
||||
|
||||
::: details 查看 FilterFunction / OnChangeHandler 及关联类型定义
|
||||
<<< @/../packages/form-schema/src/base.ts#FilterFunction{ts}
|
||||
|
||||
<<< @/../packages/form-schema/src/base.ts#OnChangeHandler{ts}
|
||||
|
||||
<<< @/../packages/form-schema/src/base.ts#OnChangeHandlerData{ts}
|
||||
|
||||
<<< @/../packages/form-schema/src/base.ts#ChangeRecord{ts}
|
||||
|
||||
<<< @/../packages/form-schema/src/base.ts#FormValue{ts}
|
||||
:::
|
||||
|
||||
|
||||
## 配置类型
|
||||
|
||||
::: details 查看 DataSourceSelect 配置类型定义
|
||||
<<< @/../packages/form-schema/src/editor.ts#DataSourceSelect{ts}
|
||||
|
||||
<<< @/../packages/form-schema/src/base.ts#FormItem{ts}
|
||||
|
||||
<<< @/../packages/form-schema/src/base.ts#Input{ts}
|
||||
|
||||
:::
|
||||
|
||||
## value说明
|
||||
|
||||
|
||||
@ -33,7 +33,29 @@
|
||||
| ------------ | ------------------ | --------------------------------------------------------------------------------------------------------------------------------------------------------- | ------ | ------ |
|
||||
| name | 绑定值 | string | — | — |
|
||||
| text | 表单标签 | string | — | — |
|
||||
| disabled | 是否禁用 | boolean / [FilterFunction](https://github.com/Tencent/tmagic-editor/blob/cce8b63fc3618b5b811aa33c703de21c22be8a6a/packages/form-schema/src/base.ts#L195) | — | false |
|
||||
| disabled | 是否禁用 | boolean / `FilterFunction` | — | false |
|
||||
| titlePrefix | 标题前缀 | string | — | — |
|
||||
| parentFields | 父级字段 | string[] / [FilterFunction](https://github.com/Tencent/tmagic-editor/blob/cce8b63fc3618b5b811aa33c703de21c22be8a6a/packages/form-schema/src/base.ts#L195) | — | — |
|
||||
| onChange | 值变化时触发的函数 | [OnChangeHandler](https://github.com/Tencent/tmagic-editor/blob/cce8b63fc3618b5b811aa33c703de21c22be8a6a/packages/form-schema/src/base.ts#L30) | — | - |
|
||||
| parentFields | 父级字段 | string[] / `FilterFunction` | — | — |
|
||||
| onChange | 值变化时触发的函数 | `OnChangeHandler` | — | - |
|
||||
|
||||
::: details 查看 FilterFunction / OnChangeHandler 及关联类型定义
|
||||
<<< @/../packages/form-schema/src/base.ts#FilterFunction{ts}
|
||||
|
||||
<<< @/../packages/form-schema/src/base.ts#OnChangeHandler{ts}
|
||||
|
||||
<<< @/../packages/form-schema/src/base.ts#OnChangeHandlerData{ts}
|
||||
|
||||
<<< @/../packages/form-schema/src/base.ts#ChangeRecord{ts}
|
||||
|
||||
<<< @/../packages/form-schema/src/base.ts#FormValue{ts}
|
||||
:::
|
||||
|
||||
|
||||
## 配置类型
|
||||
|
||||
::: details 查看 DisplayCondsConfig 配置类型定义
|
||||
<<< @/../packages/form-schema/src/editor.ts#DisplayCondsConfig{ts}
|
||||
|
||||
<<< @/../packages/form-schema/src/base.ts#FormItem{ts}
|
||||
|
||||
:::
|
||||
|
||||
@ -34,7 +34,7 @@
|
||||
| ---------------------- | ------------------ | -------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------- | ------ |
|
||||
| name | 绑定值 | string | — | — |
|
||||
| text | 表单标签 | string | — | — |
|
||||
| disabled | 是否禁用 | boolean / [FilterFunction](https://github.com/Tencent/tmagic-editor/blob/cce8b63fc3618b5b811aa33c703de21c22be8a6a/packages/form-schema/src/base.ts#L195) | — | false |
|
||||
| disabled | 是否禁用 | boolean / `FilterFunction` | — | false |
|
||||
| src | 事件来源 | string | datasource/component | — |
|
||||
| labelWidth | 标签宽度 | string | — | — |
|
||||
| eventNameConfig | 事件名称表单配置 | FormItem | — | — |
|
||||
@ -43,7 +43,29 @@
|
||||
| compActionConfig | 联动组件动作配置 | FormItem | — | — |
|
||||
| codeActionConfig | 联动代码配置 | FormItem | — | — |
|
||||
| dataSourceActionConfig | 联动数据源配置 | FormItem | — | — |
|
||||
| onChange | 值变化时触发的函数 | [OnChangeHandler](https://github.com/Tencent/tmagic-editor/blob/cce8b63fc3618b5b811aa33c703de21c22be8a6a/packages/form-schema/src/base.ts#L30) | — | - |
|
||||
| onChange | 值变化时触发的函数 | `OnChangeHandler` | — | - |
|
||||
|
||||
::: details 查看 FilterFunction / OnChangeHandler 及关联类型定义
|
||||
<<< @/../packages/form-schema/src/base.ts#FilterFunction{ts}
|
||||
|
||||
<<< @/../packages/form-schema/src/base.ts#OnChangeHandler{ts}
|
||||
|
||||
<<< @/../packages/form-schema/src/base.ts#OnChangeHandlerData{ts}
|
||||
|
||||
<<< @/../packages/form-schema/src/base.ts#ChangeRecord{ts}
|
||||
|
||||
<<< @/../packages/form-schema/src/base.ts#FormValue{ts}
|
||||
:::
|
||||
|
||||
|
||||
## 配置类型
|
||||
|
||||
::: details 查看 EventSelectConfig 配置类型定义
|
||||
<<< @/../packages/form-schema/src/editor.ts#EventSelectConfig{ts}
|
||||
|
||||
<<< @/../packages/form-schema/src/base.ts#FormItem{ts}
|
||||
|
||||
:::
|
||||
|
||||
## src说明
|
||||
|
||||
|
||||
@ -35,6 +35,28 @@
|
||||
| -------- | ---------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------- | ------ | ------ |
|
||||
| name | 绑定值 | string | — | — |
|
||||
| text | 表单标签 | string | — | — |
|
||||
| disabled | 是否禁用 | boolean / [FilterFunction](https://github.com/Tencent/tmagic-editor/blob/cce8b63fc3618b5b811aa33c703de21c22be8a6a/packages/form-schema/src/base.ts#L195) | — | false |
|
||||
| disabled | 是否禁用 | boolean / `FilterFunction` | — | false |
|
||||
| advanced | 是否支持高级模式（代码编辑） | boolean | — | false |
|
||||
| onChange | 值变化时触发的函数 | [OnChangeHandler](https://github.com/Tencent/tmagic-editor/blob/cce8b63fc3618b5b811aa33c703de21c22be8a6a/packages/form-schema/src/base.ts#L30) | — | - |
|
||||
| onChange | 值变化时触发的函数 | `OnChangeHandler` | — | - |
|
||||
|
||||
::: details 查看 FilterFunction / OnChangeHandler 及关联类型定义
|
||||
<<< @/../packages/form-schema/src/base.ts#FilterFunction{ts}
|
||||
|
||||
<<< @/../packages/form-schema/src/base.ts#OnChangeHandler{ts}
|
||||
|
||||
<<< @/../packages/form-schema/src/base.ts#OnChangeHandlerData{ts}
|
||||
|
||||
<<< @/../packages/form-schema/src/base.ts#ChangeRecord{ts}
|
||||
|
||||
<<< @/../packages/form-schema/src/base.ts#FormValue{ts}
|
||||
:::
|
||||
|
||||
|
||||
## 配置类型
|
||||
|
||||
::: details 查看 KeyValueConfig 配置类型定义
|
||||
<<< @/../packages/form-schema/src/editor.ts#KeyValueConfig{ts}
|
||||
|
||||
<<< @/../packages/form-schema/src/base.ts#FormItem{ts}
|
||||
|
||||
:::
|
||||
|
||||
@ -22,8 +22,30 @@
|
||||
| -------- | ------------------ | -------------------------------------------------------------------------------------------------------------------------------------------------------- | ------ | ------ |
|
||||
| name | 绑定值 | string | — | — |
|
||||
| text | 表单标签 | string | — | — |
|
||||
| disabled | 是否禁用 | boolean / [FilterFunction](https://github.com/Tencent/tmagic-editor/blob/cce8b63fc3618b5b811aa33c703de21c22be8a6a/packages/form-schema/src/base.ts#L195) | — | false |
|
||||
| onChange | 值变化时触发的函数 | [OnChangeHandler](https://github.com/Tencent/tmagic-editor/blob/cce8b63fc3618b5b811aa33c703de21c22be8a6a/packages/form-schema/src/base.ts#L30) | — | - |
|
||||
| disabled | 是否禁用 | boolean / `FilterFunction` | — | false |
|
||||
| onChange | 值变化时触发的函数 | `OnChangeHandler` | — | - |
|
||||
|
||||
::: details 查看 FilterFunction / OnChangeHandler 及关联类型定义
|
||||
<<< @/../packages/form-schema/src/base.ts#FilterFunction{ts}
|
||||
|
||||
<<< @/../packages/form-schema/src/base.ts#OnChangeHandler{ts}
|
||||
|
||||
<<< @/../packages/form-schema/src/base.ts#OnChangeHandlerData{ts}
|
||||
|
||||
<<< @/../packages/form-schema/src/base.ts#ChangeRecord{ts}
|
||||
|
||||
<<< @/../packages/form-schema/src/base.ts#FormValue{ts}
|
||||
:::
|
||||
|
||||
|
||||
## 配置类型
|
||||
|
||||
::: details 查看 PageFragmentSelectConfig 配置类型定义
|
||||
<<< @/../packages/form-schema/src/editor.ts#PageFragmentSelectConfig{ts}
|
||||
|
||||
<<< @/../packages/form-schema/src/base.ts#FormItem{ts}
|
||||
|
||||
:::
|
||||
|
||||
## 使用说明
|
||||
|
||||
|
||||
@ -22,8 +22,30 @@
|
||||
| -------- | ------------------ | -------------------------------------------------------------------------------------------------------------------------------------------------------- | ------ | ------ |
|
||||
| name | 绑定值 | string | — | — |
|
||||
| text | 表单标签 | string | — | — |
|
||||
| disabled | 是否禁用 | boolean / [FilterFunction](https://github.com/Tencent/tmagic-editor/blob/cce8b63fc3618b5b811aa33c703de21c22be8a6a/packages/form-schema/src/base.ts#L195) | — | false |
|
||||
| onChange | 值变化时触发的函数 | [OnChangeHandler](https://github.com/Tencent/tmagic-editor/blob/cce8b63fc3618b5b811aa33c703de21c22be8a6a/packages/form-schema/src/base.ts#L30) | — | - |
|
||||
| disabled | 是否禁用 | boolean / `FilterFunction` | — | false |
|
||||
| onChange | 值变化时触发的函数 | `OnChangeHandler` | — | - |
|
||||
|
||||
::: details 查看 FilterFunction / OnChangeHandler 及关联类型定义
|
||||
<<< @/../packages/form-schema/src/base.ts#FilterFunction{ts}
|
||||
|
||||
<<< @/../packages/form-schema/src/base.ts#OnChangeHandler{ts}
|
||||
|
||||
<<< @/../packages/form-schema/src/base.ts#OnChangeHandlerData{ts}
|
||||
|
||||
<<< @/../packages/form-schema/src/base.ts#ChangeRecord{ts}
|
||||
|
||||
<<< @/../packages/form-schema/src/base.ts#FormValue{ts}
|
||||
:::
|
||||
|
||||
|
||||
## 配置类型
|
||||
|
||||
::: details 查看 UISelectConfig 配置类型定义
|
||||
<<< @/../packages/form-schema/src/editor.ts#UISelectConfig{ts}
|
||||
|
||||
<<< @/../packages/form-schema/src/base.ts#FormItem{ts}
|
||||
|
||||
:::
|
||||
|
||||
## 使用说明
|
||||
|
||||
|
||||
@ -423,16 +423,40 @@ options 支持传入函数，可根据表单其他字段动态生成选项列表
|
||||
| name | 绑定值 | string | — | — |
|
||||
| text | 表单标签 | string | — | — |
|
||||
| placeholder | 输入框占位文本 | string | — | — |
|
||||
| disabled | 是否禁用 | boolean / [FilterFunction](https://github.com/Tencent/tmagic-editor/blob/master/packages/form-schema/src/base.ts) | — | false |
|
||||
| disabled | 是否禁用 | boolean / `FilterFunction` | — | false |
|
||||
| multiple | 是否多选 | boolean | — | false |
|
||||
| emitPath | 在选中节点改变时，是否返回由该节点所在的各级菜单的值所组成的数组，若设置 false，则只返回该节点的值 | boolean | — | true |
|
||||
| checkStrictly | 是否严格的遵守父子节点不互相关联 | boolean / [FilterFunction](https://github.com/Tencent/tmagic-editor/blob/master/packages/form-schema/src/base.ts) | — | false |
|
||||
| valueSeparator | 合并成字符串时的分隔符 | string / [FilterFunction](https://github.com/Tencent/tmagic-editor/blob/master/packages/form-schema/src/base.ts) | — | — |
|
||||
| checkStrictly | 是否严格的遵守父子节点不互相关联 | boolean / `FilterFunction` | — | false |
|
||||
| valueSeparator | 合并成字符串时的分隔符 | string / `FilterFunction` | — | — |
|
||||
| popperClass | 弹出内容的自定义类名 | string | — | — |
|
||||
| remote | 是否为远程搜索 | boolean | — | false |
|
||||
| options | 选项数据源 | Array / Function | — | — |
|
||||
| option | 远程选项配置 | Object | — | — |
|
||||
| onChange | 值变化时触发的函数 | [OnChangeHandler](https://github.com/Tencent/tmagic-editor/blob/master/packages/form-schema/src/base.ts) | — | — |
|
||||
| onChange | 值变化时触发的函数 | `OnChangeHandler` | — | — |
|
||||
|
||||
::: details 查看 FilterFunction / OnChangeHandler 及关联类型定义
|
||||
<<< @/../packages/form-schema/src/base.ts#FilterFunction{ts}
|
||||
|
||||
<<< @/../packages/form-schema/src/base.ts#OnChangeHandler{ts}
|
||||
|
||||
<<< @/../packages/form-schema/src/base.ts#OnChangeHandlerData{ts}
|
||||
|
||||
<<< @/../packages/form-schema/src/base.ts#ChangeRecord{ts}
|
||||
|
||||
<<< @/../packages/form-schema/src/base.ts#FormValue{ts}
|
||||
:::
|
||||
|
||||
|
||||
## 配置类型
|
||||
|
||||
::: details 查看 CascaderConfig 配置类型定义
|
||||
<<< @/../packages/form-schema/src/base.ts#CascaderConfig{ts}
|
||||
|
||||
<<< @/../packages/form-schema/src/base.ts#FormItem{ts}
|
||||
|
||||
<<< @/../packages/form-schema/src/base.ts#Input{ts}
|
||||
|
||||
:::
|
||||
|
||||
## options item
|
||||
|
||||
|
||||
@ -154,12 +154,36 @@ options 支持函数形式，可根据表单状态动态生成选项。
|
||||
|------|------|------|--------|--------|
|
||||
| name | 绑定值 | string | — | — |
|
||||
| text | 表单标签 | string | — | — |
|
||||
| disabled | 是否禁用 | boolean / [FilterFunction](https://github.com/Tencent/tmagic-editor/blob/master/packages/form-schema/src/base.ts) | — | false |
|
||||
| disabled | 是否禁用 | boolean / `FilterFunction` | — | false |
|
||||
| activeValue | 选中时的值 | string / number | — | true（filter 为 'number' 时默认 1） |
|
||||
| inactiveValue | 未选中时的值 | string / number | — | false（filter 为 'number' 时默认 0） |
|
||||
| useLabel | 是否使用外部 label 显示 | boolean | — | false |
|
||||
| filter | 值过滤器 | 'number' / Function | — | — |
|
||||
| onChange | 值变化时触发的函数 | [OnChangeHandler](https://github.com/Tencent/tmagic-editor/blob/master/packages/form-schema/src/base.ts) | — | — |
|
||||
| onChange | 值变化时触发的函数 | `OnChangeHandler` | — | — |
|
||||
|
||||
::: details 查看 FilterFunction / OnChangeHandler 及关联类型定义
|
||||
<<< @/../packages/form-schema/src/base.ts#FilterFunction{ts}
|
||||
|
||||
<<< @/../packages/form-schema/src/base.ts#OnChangeHandler{ts}
|
||||
|
||||
<<< @/../packages/form-schema/src/base.ts#OnChangeHandlerData{ts}
|
||||
|
||||
<<< @/../packages/form-schema/src/base.ts#ChangeRecord{ts}
|
||||
|
||||
<<< @/../packages/form-schema/src/base.ts#FormValue{ts}
|
||||
:::
|
||||
|
||||
|
||||
## 配置类型
|
||||
|
||||
::: details 查看 CheckboxConfig / CheckboxGroupConfig 配置类型定义
|
||||
<<< @/../packages/form-schema/src/base.ts#CheckboxConfig{ts}
|
||||
|
||||
<<< @/../packages/form-schema/src/base.ts#CheckboxGroupConfig{ts}
|
||||
|
||||
<<< @/../packages/form-schema/src/base.ts#FormItem{ts}
|
||||
|
||||
:::
|
||||
|
||||
## CheckboxGroup Attributes
|
||||
|
||||
@ -167,9 +191,9 @@ options 支持函数形式，可根据表单状态动态生成选项。
|
||||
|------|------|------|--------|--------|
|
||||
| name | 绑定值 | string | — | — |
|
||||
| text | 表单标签 | string | — | — |
|
||||
| disabled | 是否禁用 | boolean / [FilterFunction](https://github.com/Tencent/tmagic-editor/blob/master/packages/form-schema/src/base.ts) | — | false |
|
||||
| options | 选项列表 | Array / [FilterFunction](https://github.com/Tencent/tmagic-editor/blob/master/packages/form-schema/src/base.ts) | — | — |
|
||||
| onChange | 值变化时触发的函数 | [OnChangeHandler](https://github.com/Tencent/tmagic-editor/blob/master/packages/form-schema/src/base.ts) | — | — |
|
||||
| disabled | 是否禁用 | boolean / `FilterFunction` | — | false |
|
||||
| options | 选项列表 | Array / `FilterFunction` | — | — |
|
||||
| onChange | 值变化时触发的函数 | `OnChangeHandler` | — | — |
|
||||
|
||||
## options item
|
||||
|
||||
|
||||
@ -69,9 +69,31 @@
|
||||
|------|------|------|--------|--------|
|
||||
| name | 绑定值 | string | — | — |
|
||||
| text | 表单标签 | string | — | — |
|
||||
| disabled | 是否禁用 | boolean / [FilterFunction](https://github.com/Tencent/tmagic-editor/blob/master/packages/form-schema/src/base.ts) | — | false |
|
||||
| disabled | 是否禁用 | boolean / `FilterFunction` | — | false |
|
||||
| defaultValue | 默认颜色值 | string | — | — |
|
||||
| onChange | 值变化时触发的函数 | [OnChangeHandler](https://github.com/Tencent/tmagic-editor/blob/master/packages/form-schema/src/base.ts) | — | — |
|
||||
| onChange | 值变化时触发的函数 | `OnChangeHandler` | — | — |
|
||||
|
||||
::: details 查看 FilterFunction / OnChangeHandler 及关联类型定义
|
||||
<<< @/../packages/form-schema/src/base.ts#FilterFunction{ts}
|
||||
|
||||
<<< @/../packages/form-schema/src/base.ts#OnChangeHandler{ts}
|
||||
|
||||
<<< @/../packages/form-schema/src/base.ts#OnChangeHandlerData{ts}
|
||||
|
||||
<<< @/../packages/form-schema/src/base.ts#ChangeRecord{ts}
|
||||
|
||||
<<< @/../packages/form-schema/src/base.ts#FormValue{ts}
|
||||
:::
|
||||
|
||||
|
||||
## 配置类型
|
||||
|
||||
::: details 查看 ColorPickConfig 配置类型定义
|
||||
<<< @/../packages/form-schema/src/base.ts#ColorPickConfig{ts}
|
||||
|
||||
<<< @/../packages/form-schema/src/base.ts#FormItem{ts}
|
||||
|
||||
:::
|
||||
|
||||
## 颜色格式说明
|
||||
|
||||
|
||||
@ -99,10 +99,34 @@
|
||||
| name | 绑定值的字段名 | string | — | — |
|
||||
| text | 表单标签 | string | — | — |
|
||||
| placeholder | 输入框占位文本 | string | — | — |
|
||||
| disabled | 是否禁用 | boolean / [FilterFunction](https://github.com/Tencent/tmagic-editor/blob/cce8b63fc3618b5b811aa33c703de21c22be8a6a/packages/form-schema/src/base.ts#L195) | — | false |
|
||||
| disabled | 是否禁用 | boolean / `FilterFunction` | — | false |
|
||||
| format | 显示在输入框中的格式 | string | 见[日期格式](#日期格式) | YYYY/MM/DD |
|
||||
| valueFormat | 绑定值的格式。不指定则绑定值为 Date 对象 | string | 见[日期格式](#日期格式) | YYYY/MM/DD |
|
||||
| onChange | 值变化时触发的函数 | [OnChangeHandler](https://github.com/Tencent/tmagic-editor/blob/cce8b63fc3618b5b811aa33c703de21c22be8a6a/packages/form-schema/src/base.ts#L30) | — | — |
|
||||
| onChange | 值变化时触发的函数 | `OnChangeHandler` | — | — |
|
||||
|
||||
::: details 查看 FilterFunction / OnChangeHandler 及关联类型定义
|
||||
<<< @/../packages/form-schema/src/base.ts#FilterFunction{ts}
|
||||
|
||||
<<< @/../packages/form-schema/src/base.ts#OnChangeHandler{ts}
|
||||
|
||||
<<< @/../packages/form-schema/src/base.ts#OnChangeHandlerData{ts}
|
||||
|
||||
<<< @/../packages/form-schema/src/base.ts#ChangeRecord{ts}
|
||||
|
||||
<<< @/../packages/form-schema/src/base.ts#FormValue{ts}
|
||||
:::
|
||||
|
||||
|
||||
## 配置类型
|
||||
|
||||
::: details 查看 DateConfig 配置类型定义
|
||||
<<< @/../packages/form-schema/src/base.ts#DateConfig{ts}
|
||||
|
||||
<<< @/../packages/form-schema/src/base.ts#FormItem{ts}
|
||||
|
||||
<<< @/../packages/form-schema/src/base.ts#Input{ts}
|
||||
|
||||
:::
|
||||
|
||||
## TypeScript 定义
|
||||
|
||||
|
||||
@ -41,9 +41,31 @@ type为'daterange'
|
||||
| name | 绑定值（数组形式） | string | — | — |
|
||||
| names | 绑定值（拆分为两个字段） | string[] | — | — |
|
||||
| text | 表单标签 | string | — | — |
|
||||
| disabled | 是否禁用 | boolean / [FilterFunction](https://github.com/Tencent/tmagic-editor/blob/cce8b63fc3618b5b811aa33c703de21c22be8a6a/packages/form-schema/src/base.ts#L195) | — | false |
|
||||
| disabled | 是否禁用 | boolean / `FilterFunction` | — | false |
|
||||
| dateFormat | 日期格式 | string | — | YYYY/MM/DD |
|
||||
| timeFormat | 时间格式 | string | — | HH:mm:ss |
|
||||
| valueFormat | 绑定值的格式 | string | — | YYYY/MM/DD HH:mm:ss |
|
||||
| defaultTime | 默认时间 | Date[] | — | — |
|
||||
| onChange | 值变化时触发的函数 | [OnChangeHandler](https://github.com/Tencent/tmagic-editor/blob/cce8b63fc3618b5b811aa33c703de21c22be8a6a/packages/form-schema/src/base.ts#L30) | — | - |
|
||||
| onChange | 值变化时触发的函数 | `OnChangeHandler` | — | - |
|
||||
|
||||
::: details 查看 FilterFunction / OnChangeHandler 及关联类型定义
|
||||
<<< @/../packages/form-schema/src/base.ts#FilterFunction{ts}
|
||||
|
||||
<<< @/../packages/form-schema/src/base.ts#OnChangeHandler{ts}
|
||||
|
||||
<<< @/../packages/form-schema/src/base.ts#OnChangeHandlerData{ts}
|
||||
|
||||
<<< @/../packages/form-schema/src/base.ts#ChangeRecord{ts}
|
||||
|
||||
<<< @/../packages/form-schema/src/base.ts#FormValue{ts}
|
||||
:::
|
||||
|
||||
|
||||
## 配置类型
|
||||
|
||||
::: details 查看 DaterangeConfig 配置类型定义
|
||||
<<< @/../packages/form-schema/src/base.ts#DaterangeConfig{ts}
|
||||
|
||||
<<< @/../packages/form-schema/src/base.ts#FormItem{ts}
|
||||
|
||||
:::
|
||||
|
||||
@ -101,8 +101,32 @@
|
||||
| name | 绑定值的字段名 | string | — | — |
|
||||
| text | 表单标签 | string | — | — |
|
||||
| placeholder | 输入框占位文本 | string | — | — |
|
||||
| disabled | 是否禁用 | boolean / [FilterFunction](https://github.com/Tencent/tmagic-editor/blob/cce8b63fc3618b5b811aa33c703de21c22be8a6a/packages/form-schema/src/base.ts#L195) | — | false |
|
||||
| disabled | 是否禁用 | boolean / `FilterFunction` | — | false |
|
||||
| format | 显示在输入框中的格式 | string | 见[日期格式](#日期格式) | YYYY/MM/DD HH:mm:ss |
|
||||
| valueFormat | 绑定值的格式 | string | 见[日期格式](#日期格式) | YYYY/MM/DD HH:mm:ss |
|
||||
| defaultTime | 选择日期后的默认时间值 | Date | — | — |
|
||||
| onChange | 值变化时触发的函数 | [OnChangeHandler](https://github.com/Tencent/tmagic-editor/blob/cce8b63fc3618b5b811aa33c703de21c22be8a6a/packages/form-schema/src/base.ts#L30) | — | — |
|
||||
| onChange | 值变化时触发的函数 | `OnChangeHandler` | — | — |
|
||||
|
||||
::: details 查看 FilterFunction / OnChangeHandler 及关联类型定义
|
||||
<<< @/../packages/form-schema/src/base.ts#FilterFunction{ts}
|
||||
|
||||
<<< @/../packages/form-schema/src/base.ts#OnChangeHandler{ts}
|
||||
|
||||
<<< @/../packages/form-schema/src/base.ts#OnChangeHandlerData{ts}
|
||||
|
||||
<<< @/../packages/form-schema/src/base.ts#ChangeRecord{ts}
|
||||
|
||||
<<< @/../packages/form-schema/src/base.ts#FormValue{ts}
|
||||
:::
|
||||
|
||||
|
||||
## 配置类型
|
||||
|
||||
::: details 查看 DateTimeConfig 配置类型定义
|
||||
<<< @/../packages/form-schema/src/base.ts#DateTimeConfig{ts}
|
||||
|
||||
<<< @/../packages/form-schema/src/base.ts#FormItem{ts}
|
||||
|
||||
<<< @/../packages/form-schema/src/base.ts#Input{ts}
|
||||
|
||||
:::
|
||||
|
||||
@ -2,16 +2,6 @@
|
||||
|
||||
用于显示，不可编辑
|
||||
|
||||
## TS 定义
|
||||
|
||||
```typescript
|
||||
interface Display extends FormItem {
|
||||
type: "display";
|
||||
}
|
||||
```
|
||||
|
||||
点击查看[FormItem](https://github.com/Tencent/tmagic-editor/blob/cce8b63fc3618b5b811aa33c703de21c22be8a6a/packages/form-schema/src/base.ts#L90)的定义
|
||||
|
||||
## 基础用法
|
||||
|
||||
<demo-block type="form" :config="[{
|
||||
@ -33,3 +23,12 @@ interface Display extends FormItem {
|
||||
| ---- | -------- | ------ | ------ | ------ |
|
||||
| name | 绑定值 | string | — | — |
|
||||
| text | 表单标签 | string | — | — |
|
||||
|
||||
## 配置类型
|
||||
|
||||
::: details 查看 DisplayConfig 配置类型定义
|
||||
<<< @/../packages/form-schema/src/base.ts#DisplayConfig{ts}
|
||||
|
||||
<<< @/../packages/form-schema/src/base.ts#FormItem{ts}
|
||||
|
||||
:::
|
||||
|
||||
@ -50,3 +50,12 @@
|
||||
| name | 字段名 | string | — |
|
||||
| label | 标签名 | string | — |
|
||||
| defaultValue | 默认值 | any | — |
|
||||
|
||||
## 配置类型
|
||||
|
||||
::: details 查看 DynamicFieldConfig 配置类型定义
|
||||
<<< @/../packages/form-schema/src/base.ts#DynamicFieldConfig{ts}
|
||||
|
||||
<<< @/../packages/form-schema/src/base.ts#FormItem{ts}
|
||||
|
||||
:::
|
||||
|
||||
@ -2,16 +2,6 @@
|
||||
|
||||
改值体现于最终提交的表单中，用于例如编辑记录的id这种场景中
|
||||
|
||||
## TS 定义
|
||||
|
||||
```typescript
|
||||
interface Hidden extends FormItem {
|
||||
type: "hidden";
|
||||
}
|
||||
```
|
||||
|
||||
点击查看[FormItem](https://github.com/Tencent/tmagic-editor/blob/cce8b63fc3618b5b811aa33c703de21c22be8a6a/packages/form-schema/src/base.ts#L90)的定义
|
||||
|
||||
## 基础用法
|
||||
|
||||
<demo-block type="form" :config="[{
|
||||
@ -30,3 +20,12 @@ interface Hidden extends FormItem {
|
||||
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|
||||
| ---- | ------ | ------ | ------ | ------ |
|
||||
| name | 绑定值 | string | — | — |
|
||||
|
||||
## 配置类型
|
||||
|
||||
::: details 查看 HiddenConfig 配置类型定义
|
||||
<<< @/../packages/form-schema/src/base.ts#HiddenConfig{ts}
|
||||
|
||||
<<< @/../packages/form-schema/src/base.ts#FormItem{ts}
|
||||
|
||||
:::
|
||||
|
||||
@ -2,28 +2,6 @@
|
||||
|
||||
用于显示，不可编辑
|
||||
|
||||
## TS 定义
|
||||
|
||||
```typescript
|
||||
interface Link extends FormItem {
|
||||
type: "link";
|
||||
href?: string | typeof LinkHrefFunction;
|
||||
css?: {
|
||||
[key: string]: string | number;
|
||||
};
|
||||
disabledCss?: {
|
||||
[key: string]: string | number;
|
||||
};
|
||||
formTitle?: string;
|
||||
formWidth?: number | string;
|
||||
displayText?: string | typeof LinkDisplayTextFunction;
|
||||
form: FormConfig | typeof LinkFormFunction;
|
||||
fullscreen?: boolean;
|
||||
}
|
||||
```
|
||||
|
||||
点击查看[FormItem](https://github.com/Tencent/tmagic-editor/blob/cce8b63fc3618b5b811aa33c703de21c22be8a6a/packages/form-schema/src/base.ts#L90)的定义
|
||||
|
||||
## 基础用法
|
||||
|
||||
<demo-block type="form" :config="[{
|
||||
@ -63,3 +41,12 @@ interface Link extends FormItem {
|
||||
| ---- | -------- | ------ | ------ | ------ |
|
||||
| name | 绑定值 | string | — | — |
|
||||
| text | 表单标签 | string | — | — |
|
||||
|
||||
## 配置类型
|
||||
|
||||
::: details 查看 LinkConfig 配置类型定义
|
||||
<<< @/../packages/form-schema/src/base.ts#LinkConfig{ts}
|
||||
|
||||
<<< @/../packages/form-schema/src/base.ts#FormItem{ts}
|
||||
|
||||
:::
|
||||
|
||||
@ -23,6 +23,28 @@ type为'number-range'
|
||||
| --------- | ----------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------- | ------ | ------ |
|
||||
| name | 绑定值（数组形式 [min, max]） | string | — | — |
|
||||
| text | 表单标签 | string | — | — |
|
||||
| disabled | 是否禁用 | boolean / [FilterFunction](https://github.com/Tencent/tmagic-editor/blob/cce8b63fc3618b5b811aa33c703de21c22be8a6a/packages/form-schema/src/base.ts#L195) | — | false |
|
||||
| disabled | 是否禁用 | boolean / `FilterFunction` | — | false |
|
||||
| clearable | 是否可清空 | boolean | — | true |
|
||||
| onChange | 值变化时触发的函数 | [OnChangeHandler](https://github.com/Tencent/tmagic-editor/blob/cce8b63fc3618b5b811aa33c703de21c22be8a6a/packages/form-schema/src/base.ts#L30) | — | - |
|
||||
| onChange | 值变化时触发的函数 | `OnChangeHandler` | — | - |
|
||||
|
||||
::: details 查看 FilterFunction / OnChangeHandler 及关联类型定义
|
||||
<<< @/../packages/form-schema/src/base.ts#FilterFunction{ts}
|
||||
|
||||
<<< @/../packages/form-schema/src/base.ts#OnChangeHandler{ts}
|
||||
|
||||
<<< @/../packages/form-schema/src/base.ts#OnChangeHandlerData{ts}
|
||||
|
||||
<<< @/../packages/form-schema/src/base.ts#ChangeRecord{ts}
|
||||
|
||||
<<< @/../packages/form-schema/src/base.ts#FormValue{ts}
|
||||
:::
|
||||
|
||||
|
||||
## 配置类型
|
||||
|
||||
::: details 查看 NumberRangeConfig 配置类型定义
|
||||
<<< @/../packages/form-schema/src/base.ts#NumberRangeConfig{ts}
|
||||
|
||||
<<< @/../packages/form-schema/src/base.ts#FormItem{ts}
|
||||
|
||||
:::
|
||||
|
||||
@ -58,9 +58,31 @@ disabled 属性接受一个 Boolean，设置为 true 即可禁用整个组件，
|
||||
| name | 绑定值 | string | — | — |
|
||||
| text | 表单标签 | string | — | — |
|
||||
| placeholder | 输入框占位文本 | string | — | — |
|
||||
| disabled | 是否禁用 | boolean / [FilterFunction](https://github.com/Tencent/tmagic-editor/blob/cce8b63fc3618b5b811aa33c703de21c22be8a6a/packages/form-schema/src/base.ts#L195) | — | false |
|
||||
| disabled | 是否禁用 | boolean / `FilterFunction` | — | false |
|
||||
| min | 设置计数器允许的最小值 | number | — | -Infinity |
|
||||
| max | 设置计数器允许的最大值 | number | — | Infinity |
|
||||
| step | 计数器步长 | number | — | 1 |
|
||||
| tooltip | 输入框提示信息 | string | — | — |
|
||||
| onChange | 值变化时触发的函数 | [OnChangeHandler](https://github.com/Tencent/tmagic-editor/blob/cce8b63fc3618b5b811aa33c703de21c22be8a6a/packages/form-schema/src/base.ts#L30) | — | - |
|
||||
| onChange | 值变化时触发的函数 | `OnChangeHandler` | — | - |
|
||||
|
||||
::: details 查看 FilterFunction / OnChangeHandler 及关联类型定义
|
||||
<<< @/../packages/form-schema/src/base.ts#FilterFunction{ts}
|
||||
|
||||
<<< @/../packages/form-schema/src/base.ts#OnChangeHandler{ts}
|
||||
|
||||
<<< @/../packages/form-schema/src/base.ts#OnChangeHandlerData{ts}
|
||||
|
||||
<<< @/../packages/form-schema/src/base.ts#ChangeRecord{ts}
|
||||
|
||||
<<< @/../packages/form-schema/src/base.ts#FormValue{ts}
|
||||
:::
|
||||
|
||||
|
||||
## 配置类型
|
||||
|
||||
::: details 查看 NumberConfig 配置类型定义
|
||||
<<< @/../packages/form-schema/src/base.ts#NumberConfig{ts}
|
||||
|
||||
<<< @/../packages/form-schema/src/base.ts#FormItem{ts}
|
||||
|
||||
:::
|
||||
|
||||
@ -2,23 +2,6 @@
|
||||
|
||||
在一组备选项中进行单选
|
||||
|
||||
## TS 定义
|
||||
|
||||
```typescript
|
||||
interface RadioGroup extends FormItem {
|
||||
type: "radio-group";
|
||||
childType?: "default" | "button";
|
||||
options: {
|
||||
value: any;
|
||||
text?: string;
|
||||
icon?: any;
|
||||
tooltip?: string;
|
||||
}[];
|
||||
}
|
||||
```
|
||||
|
||||
点击查看[FormItem](https://github.com/Tencent/tmagic-editor/blob/cce8b63fc3618b5b811aa33c703de21c22be8a6a/packages/form-schema/src/base.ts#L90)的定义
|
||||
|
||||
## 基础用法
|
||||
|
||||
由于选项默认可见，不宜过多，若选项过多，建议使用 Select 选择器。
|
||||
@ -68,10 +51,34 @@ interface RadioGroup extends FormItem {
|
||||
| --------- | ------------------ | -------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------- | ------- |
|
||||
| name | 绑定值 | string | — | — |
|
||||
| text | 表单标签 | string | — | — |
|
||||
| disabled | 是否禁用 | boolean / [FilterFunction](https://github.com/Tencent/tmagic-editor/blob/cce8b63fc3618b5b811aa33c703de21c22be8a6a/packages/form-schema/src/base.ts#L195) | — | false |
|
||||
| disabled | 是否禁用 | boolean / `FilterFunction` | — | false |
|
||||
| childType | 子项展示形式 | string | default / button | default |
|
||||
| options | 选项 | Array | — | - |
|
||||
| onChange | 值变化时触发的函数 | [OnChangeHandler ](https://github.com/Tencent/tmagic-editor/blob/cce8b63fc3618b5b811aa33c703de21c22be8a6a/packages/form-schema/src/base.ts#L30) | — | - |
|
||||
| onChange | 值变化时触发的函数 | `OnChangeHandler` | — | - |
|
||||
|
||||
::: details 查看 FormItem / FilterFunction / OnChangeHandler 及关联类型定义
|
||||
<<< @/../packages/form-schema/src/base.ts#FormItem{ts}
|
||||
|
||||
<<< @/../packages/form-schema/src/base.ts#FilterFunction{ts}
|
||||
|
||||
<<< @/../packages/form-schema/src/base.ts#OnChangeHandler{ts}
|
||||
|
||||
<<< @/../packages/form-schema/src/base.ts#OnChangeHandlerData{ts}
|
||||
|
||||
<<< @/../packages/form-schema/src/base.ts#ChangeRecord{ts}
|
||||
|
||||
<<< @/../packages/form-schema/src/base.ts#FormValue{ts}
|
||||
:::
|
||||
|
||||
|
||||
## 配置类型
|
||||
|
||||
::: details 查看 RadioGroupConfig 配置类型定义
|
||||
<<< @/../packages/form-schema/src/base.ts#RadioGroupConfig{ts}
|
||||
|
||||
<<< @/../packages/form-schema/src/base.ts#FormItem{ts}
|
||||
|
||||
:::
|
||||
|
||||
## options item
|
||||
|
||||
|
||||
@ -188,16 +188,40 @@ app.use(MagicForm, {
|
||||
| name | 绑定值 | string | — | — |
|
||||
| placeholder | 输入框占位文本 | string | — | — |
|
||||
| text | 表单标签 | string | — | — |
|
||||
| disabled | 是否禁用 | boolean / [FilterFunction](https://github.com/Tencent/tmagic-editor/blob/cce8b63fc3618b5b811aa33c703de21c22be8a6a/packages/form-schema/src/base.ts#L195) | — | false |
|
||||
| disabled | 是否禁用 | boolean / `FilterFunction` | — | false |
|
||||
| multiple | 是否多选 | boolean | — | false |
|
||||
| valueKey | 作为 value 唯一标识的键名，绑定值为对象类型时必填 | string | — | value |
|
||||
| allowCreate | 是否允许用户创建新条目 | boolean | — | false |
|
||||
| remote | 是否为远程搜索 | boolean | — | false |
|
||||
| group | 是否选择分组 | boolean | — | false |
|
||||
| onChange | 值变化时触发的函数 | [OnChangeHandler ](https://github.com/Tencent/tmagic-editor/blob/cce8b63fc3618b5b811aa33c703de21c22be8a6a/packages/form-schema/src/base.ts#L90) | — | - |
|
||||
| onChange | 值变化时触发的函数 | `OnChangeHandler` | — | - |
|
||||
| options | 选项 | Array | — | - |
|
||||
| option | 选项 | Object | — | - |
|
||||
|
||||
::: details 查看 FilterFunction / OnChangeHandler 及关联类型定义
|
||||
<<< @/../packages/form-schema/src/base.ts#FilterFunction{ts}
|
||||
|
||||
<<< @/../packages/form-schema/src/base.ts#OnChangeHandler{ts}
|
||||
|
||||
<<< @/../packages/form-schema/src/base.ts#OnChangeHandlerData{ts}
|
||||
|
||||
<<< @/../packages/form-schema/src/base.ts#ChangeRecord{ts}
|
||||
|
||||
<<< @/../packages/form-schema/src/base.ts#FormValue{ts}
|
||||
:::
|
||||
|
||||
|
||||
## 配置类型
|
||||
|
||||
::: details 查看 SelectConfig 配置类型定义
|
||||
<<< @/../packages/form-schema/src/base.ts#SelectConfig{ts}
|
||||
|
||||
<<< @/../packages/form-schema/src/base.ts#FormItem{ts}
|
||||
|
||||
<<< @/../packages/form-schema/src/base.ts#Input{ts}
|
||||
|
||||
:::
|
||||
|
||||
## options item
|
||||
|
||||
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|
||||
|
||||
@ -46,6 +46,20 @@
|
||||
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|
||||
| -------------- | ----------------- | ------------------------------------------------------------------------------------------------------------------------------------------------- | ------ | ------ |
|
||||
| name | 绑定值 | string | — | — |
|
||||
| disabled | 是否禁用 | boolean / [Function](https://github.com/Tencent/tmagic-editor/blob/cce8b63fc3618b5b811aa33c703de21c22be8a6a/packages/form-schema/src/base.ts#L90) | — | false |
|
||||
| disabled | 是否禁用 | boolean / `FilterFunction` | — | false |
|
||||
| active-value | switch 打开时的值 | boolean / string / number | — | true |
|
||||
| inactive-value | switch 关闭时的值 | boolean / string / number | — | false |
|
||||
|
||||
::: details 查看 FilterFunction 及关联类型定义
|
||||
<<< @/../packages/form-schema/src/base.ts#FilterFunction{ts}
|
||||
:::
|
||||
|
||||
|
||||
## 配置类型
|
||||
|
||||
::: details 查看 SwitchConfig 配置类型定义
|
||||
<<< @/../packages/form-schema/src/base.ts#SwitchConfig{ts}
|
||||
|
||||
<<< @/../packages/form-schema/src/base.ts#FormItem{ts}
|
||||
|
||||
:::
|
||||
|
||||
@ -119,14 +119,40 @@ Input输入框的type为'text', 是type的默认值，所以可以不配置
|
||||
| name | 绑定值 | string | — | — |
|
||||
| text | 表单标签 | string | — | — |
|
||||
| placeholder | 输入框占位文本 | string | — | — |
|
||||
| disabled | 是否禁用 | boolean / [FilterFunction](https://github.com/Tencent/tmagic-editor/blob/cce8b63fc3618b5b811aa33c703de21c22be8a6a/packages/form-schema/src/base.ts#L195) | — | false |
|
||||
| disabled | 是否禁用 | boolean / `FilterFunction` | — | false |
|
||||
| clearable | 是否可清空 | boolean | — | true |
|
||||
| tooltip | 输入时显示内容 | string / [ToolTipConfigType](https://github.com/Tencent/tmagic-editor/blob/cce8b63fc3618b5b811aa33c703de21c22be8a6a/packages/form-schema/src/base.ts#L90) | — | — |
|
||||
| tooltip | 输入时显示内容 | string / `ToolTipConfigType` | — | — |
|
||||
| trim | 是否去掉首尾空格 | boolean | — | false |
|
||||
| filter | 过滤值 | string / Function | number | - |
|
||||
| prepend | 前置内容 | string | — | - |
|
||||
| append | 后置内容 | string / Object | — | - |
|
||||
| onChange | 值变化时触发的函数 | [OnChangeHandler](https://github.com/Tencent/tmagic-editor/blob/cce8b63fc3618b5b811aa33c703de21c22be8a6a/packages/form-schema/src/base.ts#L30) | — | - |
|
||||
| onChange | 值变化时触发的函数 | `OnChangeHandler` | — | - |
|
||||
|
||||
::: details 查看 FilterFunction / OnChangeHandler / ToolTipConfigType 及关联类型定义
|
||||
<<< @/../packages/form-schema/src/base.ts#FilterFunction{ts}
|
||||
|
||||
<<< @/../packages/form-schema/src/base.ts#OnChangeHandler{ts}
|
||||
|
||||
<<< @/../packages/form-schema/src/base.ts#OnChangeHandlerData{ts}
|
||||
|
||||
<<< @/../packages/form-schema/src/base.ts#ChangeRecord{ts}
|
||||
|
||||
<<< @/../packages/form-schema/src/base.ts#FormValue{ts}
|
||||
|
||||
<<< @/../packages/form-schema/src/base.ts#ToolTipConfigType{ts}
|
||||
:::
|
||||
|
||||
|
||||
## 配置类型
|
||||
|
||||
::: details 查看 TextConfig 配置类型定义
|
||||
<<< @/../packages/form-schema/src/base.ts#TextConfig{ts}
|
||||
|
||||
<<< @/../packages/form-schema/src/base.ts#FormItem{ts}
|
||||
|
||||
<<< @/../packages/form-schema/src/base.ts#Input{ts}
|
||||
|
||||
:::
|
||||
|
||||
## append Attributes
|
||||
|
||||
|
||||
@ -38,8 +38,30 @@
|
||||
| name | 绑定值 | string | — | — |
|
||||
| placeholder | 输入框占位文本 | string | — | — |
|
||||
| text | 表单标签 | string | — | — |
|
||||
| disabled | 是否禁用 | boolean / [FilterFunction](https://github.com/Tencent/tmagic-editor/blob/cce8b63fc3618b5b811aa33c703de21c22be8a6a/packages/form-schema/src/base.ts#L195) | — | false |
|
||||
| disabled | 是否禁用 | boolean / `FilterFunction` | — | false |
|
||||
| placeholder | 输入框占位文本 | string | — | — |
|
||||
| trim | 是否去掉首尾空格 | boolean | — | false |
|
||||
| filter | 过滤值 | string / Function | number | - |
|
||||
| onChange | 值变化时触发的函数 | [OnChangeHandler ](https://github.com/Tencent/tmagic-editor/blob/cce8b63fc3618b5b811aa33c703de21c22be8a6a/packages/form-schema/src/base.ts#L90) | — | - |
|
||||
| onChange | 值变化时触发的函数 | `OnChangeHandler` | — | - |
|
||||
|
||||
::: details 查看 FilterFunction / OnChangeHandler 及关联类型定义
|
||||
<<< @/../packages/form-schema/src/base.ts#FilterFunction{ts}
|
||||
|
||||
<<< @/../packages/form-schema/src/base.ts#OnChangeHandler{ts}
|
||||
|
||||
<<< @/../packages/form-schema/src/base.ts#OnChangeHandlerData{ts}
|
||||
|
||||
<<< @/../packages/form-schema/src/base.ts#ChangeRecord{ts}
|
||||
|
||||
<<< @/../packages/form-schema/src/base.ts#FormValue{ts}
|
||||
:::
|
||||
|
||||
|
||||
## 配置类型
|
||||
|
||||
::: details 查看 TextareaConfig 配置类型定义
|
||||
<<< @/../packages/form-schema/src/base.ts#TextareaConfig{ts}
|
||||
|
||||
<<< @/../packages/form-schema/src/base.ts#FormItem{ts}
|
||||
|
||||
:::
|
||||
|
||||
@ -38,4 +38,20 @@
|
||||
| name | 绑定值 | string | — | — |
|
||||
| placeholder | 输入框占位文本 | string | — | — |
|
||||
| text | 表单标签 | string | — | — |
|
||||
| disabled | 是否禁用 | boolean / [Function](https://github.com/Tencent/tmagic-editor/blob/cce8b63fc3618b5b811aa33c703de21c22be8a6a/packages/form-schema/src/base.ts#L90) | — | false |
|
||||
| disabled | 是否禁用 | boolean / `FilterFunction` | — | false |
|
||||
|
||||
::: details 查看 FilterFunction 及关联类型定义
|
||||
<<< @/../packages/form-schema/src/base.ts#FilterFunction{ts}
|
||||
:::
|
||||
|
||||
|
||||
## 配置类型
|
||||
|
||||
::: details 查看 TimeConfig 配置类型定义
|
||||
<<< @/../packages/form-schema/src/base.ts#TimeConfig{ts}
|
||||
|
||||
<<< @/../packages/form-schema/src/base.ts#FormItem{ts}
|
||||
|
||||
<<< @/../packages/form-schema/src/base.ts#Input{ts}
|
||||
|
||||
:::
|
||||
|
||||
@ -41,8 +41,30 @@ type为'timerange'
|
||||
| name | 绑定值（数组形式） | string | — | — |
|
||||
| names | 绑定值（拆分为两个字段） | string[] | — | — |
|
||||
| text | 表单标签 | string | — | — |
|
||||
| disabled | 是否禁用 | boolean / [FilterFunction](https://github.com/Tencent/tmagic-editor/blob/cce8b63fc3618b5b811aa33c703de21c22be8a6a/packages/form-schema/src/base.ts#L195) | — | false |
|
||||
| disabled | 是否禁用 | boolean / `FilterFunction` | — | false |
|
||||
| format | 显示格式 | string | — | HH:mm:ss |
|
||||
| valueFormat | 绑定值的格式 | string | — | HH:mm:ss |
|
||||
| defaultTime | 默认时间 | Date[] | — | — |
|
||||
| onChange | 值变化时触发的函数 | [OnChangeHandler](https://github.com/Tencent/tmagic-editor/blob/cce8b63fc3618b5b811aa33c703de21c22be8a6a/packages/form-schema/src/base.ts#L30) | — | - |
|
||||
| onChange | 值变化时触发的函数 | `OnChangeHandler` | — | - |
|
||||
|
||||
::: details 查看 FilterFunction / OnChangeHandler 及关联类型定义
|
||||
<<< @/../packages/form-schema/src/base.ts#FilterFunction{ts}
|
||||
|
||||
<<< @/../packages/form-schema/src/base.ts#OnChangeHandler{ts}
|
||||
|
||||
<<< @/../packages/form-schema/src/base.ts#OnChangeHandlerData{ts}
|
||||
|
||||
<<< @/../packages/form-schema/src/base.ts#ChangeRecord{ts}
|
||||
|
||||
<<< @/../packages/form-schema/src/base.ts#FormValue{ts}
|
||||
:::
|
||||
|
||||
|
||||
## 配置类型
|
||||
|
||||
::: details 查看 TimerangeConfig 配置类型定义
|
||||
<<< @/../packages/form-schema/src/base.ts#TimerangeConfig{ts}
|
||||
|
||||
<<< @/../packages/form-schema/src/base.ts#FormItem{ts}
|
||||
|
||||
:::
|
||||
|
||||
@ -1,5 +1,36 @@
|
||||
# 布局
|
||||
|
||||
## 配置类型
|
||||
|
||||
::: details 查看 ContainerCommonConfig / RowConfig / TabConfig / TabPaneConfig / FieldsetConfig / PanelConfig / StepConfig / FlexLayoutConfig / GroupListConfig / TableConfig / TableColumnConfig / TableGroupListCommonConfig 配置类型定义
|
||||
<<< @/../packages/form-schema/src/base.ts#ContainerCommonConfig{ts}
|
||||
|
||||
<<< @/../packages/form-schema/src/base.ts#RowConfig{ts}
|
||||
|
||||
<<< @/../packages/form-schema/src/base.ts#TabConfig{ts}
|
||||
|
||||
<<< @/../packages/form-schema/src/base.ts#TabPaneConfig{ts}
|
||||
|
||||
<<< @/../packages/form-schema/src/base.ts#FieldsetConfig{ts}
|
||||
|
||||
<<< @/../packages/form-schema/src/base.ts#PanelConfig{ts}
|
||||
|
||||
<<< @/../packages/form-schema/src/base.ts#StepConfig{ts}
|
||||
|
||||
<<< @/../packages/form-schema/src/base.ts#FlexLayoutConfig{ts}
|
||||
|
||||
<<< @/../packages/form-schema/src/base.ts#GroupListConfig{ts}
|
||||
|
||||
<<< @/../packages/form-schema/src/base.ts#TableConfig{ts}
|
||||
|
||||
<<< @/../packages/form-schema/src/base.ts#TableColumnConfig{ts}
|
||||
|
||||
<<< @/../packages/form-schema/src/base.ts#TableGroupListCommonConfig{ts}
|
||||
|
||||
<<< @/../packages/form-schema/src/base.ts#FormItem{ts}
|
||||
|
||||
:::
|
||||
|
||||
## 基础用法
|
||||
|
||||
<demo-block type="form" :config="[{
|
||||
|
||||
@ -30,7 +30,7 @@ tmagic-editor的联动，指这两种情况：
|
||||
当然我们也可以通过上述的参数传入，以及其他函数 API 实现更多灵活的表单联动，具体参考[表单 API](../../form-config/relate)。
|
||||
|
||||
## 组件联动
|
||||
tmagic-editor在 @tmagic/core 中，实现了组件的事件绑定/分发机制。在组件渲染时，每个组件在 @tmagic/ui 中经过基础组件渲染时，会被基础组件注入公共方法的实现。如下对按钮配置了**点击使文本隐藏**的联动事件，那么在对应按钮被点击时，将会触发对应绑定文本的隐藏。
|
||||
tmagic-editor在 `@tmagic/core` 中，实现了组件的事件绑定/分发机制。在组件渲染时，每个组件在经过 `@tmagic/vue-container`（vue 端）或 `@tmagic/react-container`（react 端）等基础渲染组件渲染时，会被基础组件注入公共方法的实现。如下对按钮配置了**点击使文本隐藏**的联动事件，那么在对应按钮被点击时，将会触发对应绑定文本的隐藏。
|
||||
|
||||
<img src="https://image.video.qpic.cn/oa_88b7d-10_2117738923_1637238863127559">
|
||||
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
# 页面渲染
|
||||
tmagic-editor的页面渲染，是通过在载入编辑器中保存的 DSL 配置，通过 ui 渲染器渲染页面。在容器布局原理里我们提到过，容器和组件在配置中呈树状结构，所以渲染页面的时候，渲染器会递归配置内容，从而渲染出页面所有组件。
|
||||
tmagic-editor的页面渲染，是通过在载入编辑器中保存的 DSL 配置，通过基础渲染组件（vue 下为 `@tmagic/vue-container`，react 下为 `@tmagic/react-container`）渲染页面。在容器布局原理里我们提到过，容器和组件在配置中呈树状结构，所以渲染页面的时候，渲染器会递归配置内容，从而渲染出页面所有组件。
|
||||
|
||||
<img src="https://vfiles.gtimg.cn/vupload/20211009/f4d3031633778551251.png">
|
||||
|
||||
@ -25,7 +25,7 @@ export default {
|
||||
```
|
||||
|
||||
## 组件渲染
|
||||
所有tmagic-editor组件，都通过一个tmagic-editor基础组件来渲染。这个基础组件会识别当前渲染组件的类型。如果当前渲染组件是普通组件（包括ui中提供的基础组件和业务开发的业务组件），则直接渲染；如果当前渲染组件是容器，则回到[容器渲染](#容器渲染)逻辑中。
|
||||
所有tmagic-editor组件，都通过一个tmagic-editor基础组件来渲染。这个基础组件会识别当前渲染组件的类型。如果当前渲染组件是普通组件（包括 `vue-components` / `react-components` 中提供的基础组件和业务开发的业务组件），则直接渲染；如果当前渲染组件是容器，则回到[容器渲染](#容器渲染)逻辑中。
|
||||
|
||||
基础组件的具体形式为：
|
||||
```vue
|
||||
@ -59,6 +59,6 @@ export default defineComponent({
|
||||
```
|
||||
|
||||
## 渲染器示例
|
||||
在tmagic-editor的示例项目中，我们提供了三个版本的 @tmagic/ui。可以参考对应前端框架的渲染器实现。
|
||||
- [vue 渲染器](https://github.com/Tencent/tmagic-editor/blob/master/vue-components/container/src/Container.vue)
|
||||
- [react 渲染器](https://github.com/Tencent/tmagic-editor/blob/master/react-components/container/src/Container.tsx)
|
||||
在tmagic-editor的示例项目中，我们针对 vue 和 react 分别提供了基础渲染组件的实现，可以参考对应前端框架的渲染器实现。
|
||||
- [vue 渲染器（`@tmagic/vue-container`）](https://github.com/Tencent/tmagic-editor/blob/master/vue-components/container/src/Container.vue)
|
||||
- [react 渲染器（`@tmagic/react-container`）](https://github.com/Tencent/tmagic-editor/blob/master/react-components/container/src/Container.tsx)
|
||||
@ -1,23 +0,0 @@
|
||||
# @tmagic/ui
|
||||
在前面[页面渲染](../advanced/page)中提到的 UI 渲染器，就是包含在 @tmagic/ui 中的渲染器组件。
|
||||
|
||||
tmagic-editor的设计是希望发布的页面支持多个前端框架，即各个业务方可以根据自己熟悉的语言来开发组件、发布页面。也可以通过 [实现一个 runtime](../runtime.html) 的方式，来实现一个自己的 @tmagic/ui。
|
||||
|
||||
所以tmagic-editor的设计中，针对每个前端框架，都需要有一个对应的 @tmagic/ui 来承担渲染器职责。同时，也需要一个使用和 @tmagic/ui 相同前端框架的 runtime 用来加载 vue-components 和业务组件，具体 runtime 概念，可以参考[页面发布](../publish)。
|
||||
|
||||
我们以项目代码中提供的 vue 版本的 vue-components 作为示例介绍其中包含的内容（参考 `vue-components/` 目录下的源码）。
|
||||
|
||||
## 渲染器
|
||||
在 vue 中，实现渲染器的具体形式参考[页面渲染](../advanced/page)中描述的[容器渲染](../advanced/page.html#容器渲染)和[组件渲染](../advanced/page.html#组件渲染)。
|
||||
|
||||
## 基础组件
|
||||
在 vue-components 中，我们提供了几个基础组件，可以在项目源码中找到对应内容。
|
||||
|
||||
- page tmagic-editor的页面基础
|
||||
- container tmagic-editor的容器渲染器
|
||||
- Component.vue tmagic-editor的组件渲染器
|
||||
- button/text 基础组件示例
|
||||
|
||||
其中 page/container/Component 是 UI 的基础，是每个框架的 UI 都应该实现的。
|
||||
|
||||
button/text 其实就是一个组件开发的示例，具体组件开发相关规范可以参考[组件开发](../component)。
|
||||
@ -18,7 +18,7 @@ runtime 的概念，是理解tmagic-editor项目页运行的重要概念，runti
|
||||
各个 runtime 的作用除了作为不同场景下的渲染环境，同时也是不同环境的打包构建载体。tmagic-editor示例代码中的打包就是基于 runtime 进行的。
|
||||
|
||||
### 业务相关
|
||||
由于 runtime 是页面渲染的承载环境，其中会加载 @tmagic/ui 以及各个业务组件，业务发布项目页也是基于 runtime，所以在 runtime 中实现业务方的自定义逻辑是最合适的。runtime 可以提供一些全局 API，供业务组件调用。我们可以把下面的模拟器中的 runtime 视为一个业务方runtime。
|
||||
由于 runtime 是页面渲染的承载环境，其中会加载 `@tmagic/vue-container`（或 `@tmagic/react-container`）等基础渲染组件以及各个业务组件，业务发布项目页也是基于 runtime，所以在 runtime 中实现业务方的自定义逻辑是最合适的。runtime 可以提供一些全局 API，供业务组件调用。我们可以把下面的模拟器中的 runtime 视为一个业务方runtime。
|
||||
|
||||
tmagic-editor提供了三个版本的 runtime 示例，可以参考：
|
||||
- [vue runtime](https://github.com/Tencent/tmagic-editor/blob/master/runtime/vue)
|
||||
|
||||
@ -1,12 +1,26 @@
|
||||
# 3.[DSL](../conception.md#dsl) 解析渲染
|
||||
|
||||
tmagic 提供了 vue/react 两个版本的解析渲染组件，可以直接使用
|
||||
tmagic 提供了 vue/react 两个版本的解析渲染组件，可以直接使用。基础渲染组件以 container 为核心，配合 page、button、img、text 等多个独立的 npm 包，分别发布在 `vue-components/` 与 `react-components/` 下：
|
||||
|
||||
[@tmagic/ui](https://www.npmjs.com/package/@tmagic/ui)
|
||||
vue 版本：
|
||||
|
||||
[@tmagic/ui-react](https://www.npmjs.com/package/@tmagic/ui-react)
|
||||
- [@tmagic/vue-container](https://www.npmjs.com/package/@tmagic/vue-container)
|
||||
- [@tmagic/vue-page](https://www.npmjs.com/package/@tmagic/vue-page)
|
||||
- [@tmagic/vue-button](https://www.npmjs.com/package/@tmagic/vue-button)
|
||||
- [@tmagic/vue-img](https://www.npmjs.com/package/@tmagic/vue-img)
|
||||
- [@tmagic/vue-text](https://www.npmjs.com/package/@tmagic/vue-text)
|
||||
- 其他：`@tmagic/vue-overlay`、`@tmagic/vue-qrcode`、`@tmagic/vue-page-fragment`、`@tmagic/vue-page-fragment-container`、`@tmagic/vue-iterator-container`
|
||||
|
||||
接下来是以vue为基础，来讲述如何实现一个[@tmagic/ui](https://www.npmjs.com/package/@tmagic/ui)
|
||||
react 版本：
|
||||
|
||||
- [@tmagic/react-container](https://www.npmjs.com/package/@tmagic/react-container)
|
||||
- [@tmagic/react-page](https://www.npmjs.com/package/@tmagic/react-page)
|
||||
- [@tmagic/react-button](https://www.npmjs.com/package/@tmagic/react-button)
|
||||
- [@tmagic/react-img](https://www.npmjs.com/package/@tmagic/react-img)
|
||||
- [@tmagic/react-text](https://www.npmjs.com/package/@tmagic/react-text)
|
||||
- 其他：`@tmagic/react-overlay`、`@tmagic/react-qrcode`、`@tmagic/react-page-fragment`、`@tmagic/react-page-fragment-container`、`@tmagic/react-iterator-container`
|
||||
|
||||
接下来是以 vue 为基础，来讲述如何实现一个类似 [@tmagic/vue-container](https://www.npmjs.com/package/@tmagic/vue-container) 的渲染器
|
||||
|
||||
## 准备工作
|
||||
|
||||
|
||||
10
package.json
10
package.json
@ -66,18 +66,18 @@
|
||||
"prettier": "^3.8.3",
|
||||
"recast": "^0.23.11",
|
||||
"rimraf": "^3.0.2",
|
||||
"rolldown": "^1.0.0",
|
||||
"rolldown-plugin-dts": "^0.25.0",
|
||||
"rolldown": "^1.0.1",
|
||||
"rolldown-plugin-dts": "^0.25.1",
|
||||
"sass-embedded": "^1.99.0",
|
||||
"semver": "^7.7.3",
|
||||
"serialize-javascript": "^7.0.0",
|
||||
"shx": "^0.3.4",
|
||||
"typescript": "catalog:",
|
||||
"vite": "catalog:",
|
||||
"vitepress": "^1.6.4",
|
||||
"vitest": "^4.1.5",
|
||||
"vitepress": "^2.0.0-alpha.17",
|
||||
"vitest": "^4.1.6",
|
||||
"vue": "catalog:",
|
||||
"vue-tsc": "^3.2.8"
|
||||
"vue-tsc": "^3.2.9"
|
||||
},
|
||||
"config": {
|
||||
"commitizen": {
|
||||
|
||||
@ -134,7 +134,9 @@ export const transformStyle = (style: Record<string, any> | string, jsEngine: Js
|
||||
export const COMMON_EVENT_PREFIX = 'magic:common:events:';
|
||||
export const COMMON_METHOD_PREFIX = 'magic:common:actions:';
|
||||
|
||||
// #region EventOption
|
||||
export interface EventOption {
|
||||
label: string;
|
||||
value: string;
|
||||
}
|
||||
// #endregion EventOption
|
||||
|
||||
@ -143,6 +143,7 @@ export interface EditorInstallOptions {
|
||||
[key: string]: any;
|
||||
}
|
||||
|
||||
// #region Services
|
||||
export interface Services {
|
||||
editorService: EditorService;
|
||||
historyService: HistoryService;
|
||||
@ -157,6 +158,7 @@ export interface Services {
|
||||
keybindingService: KeybindingService;
|
||||
stageOverlayService: StageOverlayService;
|
||||
}
|
||||
// #endregion Services
|
||||
|
||||
export interface StageOptions {
|
||||
runtimeUrl?: string;
|
||||
@ -236,11 +238,13 @@ export interface ComponentGroupState {
|
||||
list: ComponentGroup[];
|
||||
}
|
||||
|
||||
// #region ColumnLayout
|
||||
export enum ColumnLayout {
|
||||
LEFT = 'left',
|
||||
CENTER = 'center',
|
||||
RIGHT = 'right',
|
||||
}
|
||||
// #endregion ColumnLayout
|
||||
|
||||
export interface SetColumnWidth {
|
||||
[ColumnLayout.LEFT]?: number;
|
||||
@ -309,11 +313,13 @@ export interface UiState {
|
||||
};
|
||||
}
|
||||
|
||||
// #region EditorNodeInfo
|
||||
export interface EditorNodeInfo {
|
||||
node: MNode | null;
|
||||
parent: MContainer | null;
|
||||
page: MPage | MPageFragment | null;
|
||||
}
|
||||
// #endregion EditorNodeInfo
|
||||
|
||||
export interface AddMNode {
|
||||
type: string;
|
||||
@ -322,6 +328,7 @@ export interface AddMNode {
|
||||
[key: string]: any;
|
||||
}
|
||||
|
||||
// #region PastePosition
|
||||
export interface PastePosition {
|
||||
left?: number;
|
||||
top?: number;
|
||||
@ -334,7 +341,9 @@ export interface PastePosition {
|
||||
*/
|
||||
offsetY?: number;
|
||||
}
|
||||
// #endregion PastePosition
|
||||
|
||||
// #region MenuButton
|
||||
/**
|
||||
* 菜单按钮
|
||||
*/
|
||||
@ -367,7 +376,9 @@ export interface MenuButton {
|
||||
/** 唯一标识，用于高亮 */
|
||||
id?: string | number;
|
||||
}
|
||||
// #endregion MenuButton
|
||||
|
||||
// #region MenuComponent
|
||||
export interface MenuComponent {
|
||||
type: 'component';
|
||||
/** Vue3组件 */
|
||||
@ -382,6 +393,7 @@ export interface MenuComponent {
|
||||
display?: boolean | ((data: Services) => Promise<boolean> | boolean);
|
||||
[key: string]: any;
|
||||
}
|
||||
// #endregion MenuComponent
|
||||
|
||||
/**
|
||||
* '/': 分隔符
|
||||
@ -396,6 +408,7 @@ export interface MenuComponent {
|
||||
* 'scale-to-original': 缩放到实际大小
|
||||
* 'scale-to-fit': 缩放以适应
|
||||
*/
|
||||
// #region MenuItem
|
||||
export type MenuItem =
|
||||
| '/'
|
||||
| 'delete'
|
||||
@ -411,7 +424,9 @@ export type MenuItem =
|
||||
| MenuButton
|
||||
| MenuComponent
|
||||
| string;
|
||||
// #endregion MenuItem
|
||||
|
||||
// #region MenuBarData
|
||||
/** 工具栏 */
|
||||
export interface MenuBarData {
|
||||
/** 顶部工具栏左边项 */
|
||||
@ -421,7 +436,9 @@ export interface MenuBarData {
|
||||
/** 顶部工具栏右边项 */
|
||||
[ColumnLayout.RIGHT]?: MenuItem[];
|
||||
}
|
||||
// #endregion MenuBarData
|
||||
|
||||
// #region SideComponent
|
||||
export interface SideComponent extends MenuComponent {
|
||||
/** 显示文案 */
|
||||
text: string;
|
||||
@ -444,21 +461,27 @@ export interface SideComponent extends MenuComponent {
|
||||
props?: Record<string, any>;
|
||||
};
|
||||
}
|
||||
// #endregion SideComponent
|
||||
|
||||
// #region SideItemKey
|
||||
export enum SideItemKey {
|
||||
COMPONENT_LIST = 'component-list',
|
||||
LAYER = 'layer',
|
||||
CODE_BLOCK = 'code-block',
|
||||
DATA_SOURCE = 'data-source',
|
||||
}
|
||||
// #endregion SideItemKey
|
||||
|
||||
// #region SideItem
|
||||
/**
|
||||
* component-list: 组件列表
|
||||
* layer: 已选组件树
|
||||
* code-block: 代码块
|
||||
*/
|
||||
export type SideItem = `${SideItemKey}` | SideComponent;
|
||||
// #endregion SideItem
|
||||
|
||||
// #region SideBarData
|
||||
/** 工具栏 */
|
||||
export interface SideBarData {
|
||||
/** 容器类型 */
|
||||
@ -468,7 +491,9 @@ export interface SideBarData {
|
||||
/** panel列表 */
|
||||
items: SideItem[];
|
||||
}
|
||||
// #endregion SideBarData
|
||||
|
||||
// #region ComponentItem
|
||||
export interface ComponentItem {
|
||||
/** 显示文案 */
|
||||
text: string;
|
||||
@ -483,19 +508,23 @@ export interface ComponentItem {
|
||||
[key: string]: any;
|
||||
};
|
||||
}
|
||||
// #endregion ComponentItem
|
||||
|
||||
// #region ComponentGroup
|
||||
export interface ComponentGroup {
|
||||
/** 显示文案 */
|
||||
title: string;
|
||||
/** 组内列表 */
|
||||
items: ComponentItem[];
|
||||
}
|
||||
// #endregion ComponentGroup
|
||||
|
||||
export enum LayerOffset {
|
||||
TOP = 'top',
|
||||
BOTTOM = 'bottom',
|
||||
}
|
||||
|
||||
// #region Layout
|
||||
/** 容器布局 */
|
||||
export enum Layout {
|
||||
FLEX = 'flex',
|
||||
@ -503,6 +532,7 @@ export enum Layout {
|
||||
RELATIVE = 'relative',
|
||||
ABSOLUTE = 'absolute',
|
||||
}
|
||||
// #endregion Layout
|
||||
|
||||
export enum Keys {
|
||||
ESCAPE = 'Space',
|
||||
@ -575,8 +605,11 @@ export interface CodeParamStatement {
|
||||
[key: string]: any;
|
||||
}
|
||||
|
||||
// #region HistoryOpType
|
||||
export type HistoryOpType = 'add' | 'remove' | 'update';
|
||||
// #endregion HistoryOpType
|
||||
|
||||
// #region StepValue
|
||||
export interface StepValue {
|
||||
/** 页面信息 */
|
||||
data: { name: string; id: Id };
|
||||
@ -597,6 +630,7 @@ export interface StepValue {
|
||||
/** opType 'update': 变更前后的节点快照 */
|
||||
updatedItems?: { oldNode: MNode; newNode: MNode }[];
|
||||
}
|
||||
// #endregion StepValue
|
||||
|
||||
export interface HistoryState {
|
||||
pageId?: Id;
|
||||
@ -660,6 +694,7 @@ export interface KeyBindingCacheItem {
|
||||
bound: boolean;
|
||||
}
|
||||
|
||||
// #region DatasourceTypeOption
|
||||
/** 可新增的数据源类型选项 */
|
||||
export interface DatasourceTypeOption {
|
||||
/** 数据源类型 */
|
||||
@ -667,6 +702,7 @@ export interface DatasourceTypeOption {
|
||||
/** 数据源名称 */
|
||||
text: string;
|
||||
}
|
||||
// #endregion DatasourceTypeOption
|
||||
|
||||
/** 组件树节点状态 */
|
||||
export interface LayerNodeStatus {
|
||||
@ -688,12 +724,14 @@ export enum DragType {
|
||||
LAYER_TREE = 'layer-tree',
|
||||
}
|
||||
|
||||
// #region TreeNodeData
|
||||
export interface TreeNodeData {
|
||||
id: Id;
|
||||
name?: string;
|
||||
items?: TreeNodeData[];
|
||||
[key: string]: any;
|
||||
}
|
||||
// #endregion TreeNodeData
|
||||
|
||||
/** 判断组件树节点是否可展开（即是否要展示为拥有子节点的形态）的函数 */
|
||||
export type IsExpandableFunction = (_data: TreeNodeData, _nodeStatusMap: Map<Id, LayerNodeStatus>) => boolean;
|
||||
@ -775,9 +813,12 @@ export interface EventBus extends EventEmitter {
|
||||
emit<Name extends keyof EventBusEvent, Param extends EventBusEvent[Name]>(eventName: Name, ...args: Param): boolean;
|
||||
}
|
||||
|
||||
// #region PropsFormConfigFunction
|
||||
export type PropsFormConfigFunction = (data: { editorService: EditorService }) => FormConfig;
|
||||
// #endregion PropsFormConfigFunction
|
||||
export type PropsFormValueFunction = (data: { editorService: EditorService }) => Partial<MNode>;
|
||||
|
||||
// #region PageBarSortOptions
|
||||
export type PartSortableOptions = Omit<Options, 'onStart' | 'onUpdate'>;
|
||||
export interface PageBarSortOptions extends PartSortableOptions {
|
||||
/** 在onUpdate之后调用 */
|
||||
@ -785,6 +826,7 @@ export interface PageBarSortOptions extends PartSortableOptions {
|
||||
/** 在onStart之前调用 */
|
||||
beforeStart?: (event: SortableEvent, sortable: Sortable) => void | Promise<void>;
|
||||
}
|
||||
// #endregion PageBarSortOptions
|
||||
|
||||
export type CustomContentMenuFunction = (
|
||||
menus: (MenuButton | MenuComponent)[],
|
||||
|
||||
@ -18,6 +18,7 @@
|
||||
|
||||
import { cloneDeep } from 'lodash-es';
|
||||
|
||||
// #region UndoRedo
|
||||
export class UndoRedo<T = any> {
|
||||
private elementList: T[];
|
||||
private listCursor: number;
|
||||
@ -75,3 +76,4 @@ export class UndoRedo<T = any> {
|
||||
return cloneDeep(this.elementList[this.listCursor - 1]);
|
||||
}
|
||||
}
|
||||
// #endregion UndoRedo
|
||||
|
||||
@ -8,11 +8,14 @@ type ElMessageBoxShortcutMethod = ((
|
||||
) => Promise<any>) &
|
||||
((message: string, options?: any, appContext?: any | null) => Promise<any>);
|
||||
|
||||
// #region ChangeRecord
|
||||
export interface ChangeRecord {
|
||||
propPath?: string;
|
||||
value: any;
|
||||
}
|
||||
// #endregion ChangeRecord
|
||||
|
||||
// #region OnChangeHandlerData
|
||||
export interface OnChangeHandlerData {
|
||||
model: FormValue;
|
||||
values?: Readonly<FormValue> | null;
|
||||
@ -24,10 +27,15 @@ export interface OnChangeHandlerData {
|
||||
setModel: (prop: string, value: any) => void;
|
||||
setFormValue: (prop: string, value: any) => void;
|
||||
}
|
||||
// #endregion OnChangeHandlerData
|
||||
|
||||
// #region FormValue
|
||||
export type FormValue = Record<string | number, any>;
|
||||
// #endregion FormValue
|
||||
|
||||
// #region OnChangeHandler
|
||||
export type OnChangeHandler = (mForm: FormState | undefined, value: any, data: OnChangeHandlerData) => any;
|
||||
// #endregion OnChangeHandler
|
||||
|
||||
type DefaultValueFunction = (mForm: FormState | undefined) => any;
|
||||
|
||||
@ -85,8 +93,11 @@ export interface SortProp {
|
||||
order: 'ascending' | 'descending';
|
||||
}
|
||||
|
||||
// #region ToolTipConfigType
|
||||
export type ToolTipConfigType = string | { text?: string; placement?: string };
|
||||
// #endregion ToolTipConfigType
|
||||
|
||||
// #region FormItem
|
||||
export interface FormItem {
|
||||
/** vnode的key值，默认是遍历数组时的index */
|
||||
__key?: string | number;
|
||||
@ -129,12 +140,16 @@ export interface FormItem {
|
||||
fieldStyle?: Record<string, any>;
|
||||
labelPosition?: 'top' | 'left' | 'right';
|
||||
}
|
||||
// #endregion FormItem
|
||||
|
||||
// #region DynamicTypeConfig
|
||||
export interface DynamicTypeConfig extends FormItem {
|
||||
type: TypeFunction;
|
||||
[key: string]: any;
|
||||
}
|
||||
// #endregion DynamicTypeConfig
|
||||
|
||||
// #region ContainerCommonConfig
|
||||
export interface ContainerCommonConfig<T = never> extends FormItem {
|
||||
items: FormConfig<T>;
|
||||
onInitValue?: (
|
||||
@ -146,6 +161,7 @@ export interface ContainerCommonConfig<T = never> extends FormItem {
|
||||
) => FormValue;
|
||||
extensible?: boolean;
|
||||
}
|
||||
// #endregion ContainerCommonConfig
|
||||
|
||||
export interface Rule {
|
||||
message?: string;
|
||||
@ -180,10 +196,12 @@ export interface Rule {
|
||||
) => void;
|
||||
}
|
||||
|
||||
// #region Input
|
||||
export interface Input {
|
||||
/** 输入框没有内容时显示的文案 */
|
||||
placeholder?: string;
|
||||
}
|
||||
// #endregion Input
|
||||
|
||||
export type TypeFunction<T extends string = string> = (
|
||||
mForm: FormState | undefined,
|
||||
@ -192,6 +210,7 @@ export type TypeFunction<T extends string = string> = (
|
||||
},
|
||||
) => T;
|
||||
|
||||
// #region FilterFunction
|
||||
export type FilterFunction<T = boolean> = (
|
||||
mForm: FormState | undefined,
|
||||
data: {
|
||||
@ -205,6 +224,7 @@ export type FilterFunction<T = boolean> = (
|
||||
getFormValue: (prop: string) => any;
|
||||
},
|
||||
) => T;
|
||||
// #endregion FilterFunction
|
||||
|
||||
/**
|
||||
* 下拉选择器选项配置
|
||||
@ -324,6 +344,7 @@ export interface CascaderOption {
|
||||
/**
|
||||
* 日期范围
|
||||
*/
|
||||
// #region DaterangeConfig
|
||||
export interface DaterangeConfig extends FormItem {
|
||||
type: 'daterange';
|
||||
defaultTime?: Date[];
|
||||
@ -332,6 +353,7 @@ export interface DaterangeConfig extends FormItem {
|
||||
dateFormat?: string;
|
||||
timeFormat?: string;
|
||||
}
|
||||
// #endregion DaterangeConfig
|
||||
|
||||
/**
|
||||
* html编辑器
|
||||
@ -345,13 +367,16 @@ export interface HtmlField extends FormItem {
|
||||
}
|
||||
|
||||
/** 展示文本，不可编辑 */
|
||||
// #region DisplayConfig
|
||||
export interface DisplayConfig extends FormItem {
|
||||
type: 'display';
|
||||
initValue?: string | number | boolean;
|
||||
displayText?: FilterFunction<string> | string;
|
||||
}
|
||||
// #endregion DisplayConfig
|
||||
|
||||
/** 文本输入框 */
|
||||
// #region TextConfig
|
||||
export interface TextConfig extends FormItem, Input {
|
||||
type?: 'text';
|
||||
tooltip?: string;
|
||||
@ -377,19 +402,23 @@ export interface TextConfig extends FormItem, Input {
|
||||
) => void | Promise<void>;
|
||||
};
|
||||
}
|
||||
// #endregion TextConfig
|
||||
|
||||
/**
|
||||
* 文本域
|
||||
*/
|
||||
// #region TextareaConfig
|
||||
export interface TextareaConfig extends FormItem {
|
||||
type: 'textarea';
|
||||
placeholder?: string;
|
||||
rows?: number;
|
||||
}
|
||||
// #endregion TextareaConfig
|
||||
|
||||
/**
|
||||
* 计数器
|
||||
*/
|
||||
// #region NumberConfig
|
||||
export interface NumberConfig extends FormItem {
|
||||
type?: 'number';
|
||||
tooltip?: string;
|
||||
@ -398,53 +427,65 @@ export interface NumberConfig extends FormItem {
|
||||
step?: number;
|
||||
placeholder?: string;
|
||||
}
|
||||
// #endregion NumberConfig
|
||||
|
||||
/**
|
||||
* 数值范围
|
||||
*/
|
||||
// #region NumberRangeConfig
|
||||
export interface NumberRangeConfig extends FormItem {
|
||||
type?: 'number-range';
|
||||
clearable?: boolean;
|
||||
}
|
||||
// #endregion NumberRangeConfig
|
||||
|
||||
/**
|
||||
* 隐藏域
|
||||
*/
|
||||
// #region HiddenConfig
|
||||
export interface HiddenConfig extends FormItem {
|
||||
type: 'hidden';
|
||||
}
|
||||
// #endregion HiddenConfig
|
||||
|
||||
/**
|
||||
* 日期选择器
|
||||
*/
|
||||
// #region DateConfig
|
||||
export interface DateConfig extends FormItem, Input {
|
||||
type: 'date';
|
||||
format?: 'YYYY-MM-dd HH:mm:ss' | string;
|
||||
valueFormat?: 'YYYY-MM-dd HH:mm:ss' | string;
|
||||
}
|
||||
// #endregion DateConfig
|
||||
|
||||
/**
|
||||
* 日期时间选择器
|
||||
*/
|
||||
// #region DateTimeConfig
|
||||
export interface DateTimeConfig extends FormItem, Input {
|
||||
type: 'datetime';
|
||||
defaultTime?: Date[];
|
||||
format?: 'YYYY-MM-dd HH:mm:ss' | string;
|
||||
valueFormat?: 'YYYY-MM-dd HH:mm:ss' | string;
|
||||
}
|
||||
// #endregion DateTimeConfig
|
||||
|
||||
/**
|
||||
* 时间选择器
|
||||
*/
|
||||
// #region TimeConfig
|
||||
export interface TimeConfig extends FormItem, Input {
|
||||
type: 'time';
|
||||
format?: 'HH:mm:ss' | string;
|
||||
valueFormat?: 'HH:mm:ss' | string;
|
||||
}
|
||||
// #endregion TimeConfig
|
||||
|
||||
/**
|
||||
* 时间范围选择器
|
||||
*/
|
||||
// #region TimerangeConfig
|
||||
export interface TimerangeConfig extends FormItem {
|
||||
type: 'timerange';
|
||||
names?: string[];
|
||||
@ -452,29 +493,35 @@ export interface TimerangeConfig extends FormItem {
|
||||
format?: 'HH:mm:ss' | string;
|
||||
valueFormat?: 'HH:mm:ss' | string;
|
||||
}
|
||||
// #endregion TimerangeConfig
|
||||
|
||||
/**
|
||||
* 单个多选框
|
||||
*/
|
||||
// #region CheckboxConfig
|
||||
export interface CheckboxConfig extends FormItem {
|
||||
type: 'checkbox';
|
||||
activeValue?: number | string;
|
||||
inactiveValue?: number | string;
|
||||
useLabel?: boolean;
|
||||
}
|
||||
// #endregion CheckboxConfig
|
||||
|
||||
/**
|
||||
* 开关
|
||||
*/
|
||||
// #region SwitchConfig
|
||||
export interface SwitchConfig extends FormItem {
|
||||
type: 'switch';
|
||||
activeValue?: boolean | number | string;
|
||||
inactiveValue?: boolean | number | string;
|
||||
}
|
||||
// #endregion SwitchConfig
|
||||
|
||||
/**
|
||||
* 单选框
|
||||
*/
|
||||
// #region RadioGroupConfig
|
||||
export interface RadioGroupConfig extends FormItem {
|
||||
type: 'radio-group' | 'radioGroup';
|
||||
childType?: 'default' | 'button';
|
||||
@ -485,13 +532,16 @@ export interface RadioGroupConfig extends FormItem {
|
||||
tooltip?: string;
|
||||
}[];
|
||||
}
|
||||
// #endregion RadioGroupConfig
|
||||
|
||||
/**
|
||||
* 颜色选择器
|
||||
*/
|
||||
// #region ColorPickConfig
|
||||
export interface ColorPickConfig extends FormItem {
|
||||
type: 'colorPicker';
|
||||
}
|
||||
// #endregion ColorPickConfig
|
||||
|
||||
export interface CheckboxGroupOption {
|
||||
value: any;
|
||||
@ -502,14 +552,17 @@ export interface CheckboxGroupOption {
|
||||
/**
|
||||
* 多选框组
|
||||
*/
|
||||
// #region CheckboxGroupConfig
|
||||
export interface CheckboxGroupConfig extends FormItem {
|
||||
type: 'checkbox-group' | 'checkboxGroup';
|
||||
options: CheckboxGroupOption[] | FilterFunction<CheckboxGroupOption[]>;
|
||||
}
|
||||
// #endregion CheckboxGroupConfig
|
||||
|
||||
/**
|
||||
* 下拉选择器
|
||||
*/
|
||||
// #region SelectConfig
|
||||
export interface SelectConfig extends FormItem, Input {
|
||||
type: 'select';
|
||||
clearable?: boolean;
|
||||
@ -546,10 +599,12 @@ export interface SelectConfig extends FormItem, Input {
|
||||
text?: string | SelectOptionTextFunction;
|
||||
};
|
||||
}
|
||||
// #endregion SelectConfig
|
||||
|
||||
/**
|
||||
* 链接
|
||||
*/
|
||||
// #region LinkConfig
|
||||
export interface LinkConfig<T = never> extends FormItem {
|
||||
type: 'link';
|
||||
href?: string | ((model: Record<string, any>) => string);
|
||||
@ -581,10 +636,12 @@ export interface LinkConfig<T = never> extends FormItem {
|
||||
) => FormConfig<T>);
|
||||
fullscreen?: boolean;
|
||||
}
|
||||
// #endregion LinkConfig
|
||||
|
||||
/**
|
||||
* 级联选择器
|
||||
*/
|
||||
// #region CascaderConfig
|
||||
export interface CascaderConfig extends FormItem, Input {
|
||||
type: 'cascader';
|
||||
remote?: boolean;
|
||||
@ -617,7 +674,9 @@ export interface CascaderConfig extends FormItem, Input {
|
||||
item: (optionsData: Record<string, any>) => CascaderOption[];
|
||||
};
|
||||
}
|
||||
// #endregion CascaderConfig
|
||||
|
||||
// #region DynamicFieldConfig
|
||||
export interface DynamicFieldConfig extends FormItem {
|
||||
type: 'dynamic-field' | 'dynamicField';
|
||||
returnFields: (
|
||||
@ -631,19 +690,23 @@ export interface DynamicFieldConfig extends FormItem {
|
||||
}[];
|
||||
dynamicKey: string;
|
||||
}
|
||||
// #endregion DynamicFieldConfig
|
||||
|
||||
/**
|
||||
* 分组容器
|
||||
*/
|
||||
// #region RowConfig
|
||||
export interface RowConfig<T = never> extends FormItem {
|
||||
type: 'row';
|
||||
span: number;
|
||||
items: ({ span?: number } & (ChildConfig<T> | EditorChildConfig | T))[];
|
||||
}
|
||||
// #endregion RowConfig
|
||||
|
||||
/**
|
||||
* 标签页容器
|
||||
*/
|
||||
// #region TabPaneConfig
|
||||
export interface TabPaneConfig<T = never> {
|
||||
status?: string;
|
||||
/** 标签页名称，用于关联 model 中的数据 */
|
||||
@ -655,7 +718,9 @@ export interface TabPaneConfig<T = never> {
|
||||
display?: boolean | 'expand' | FilterFunction<boolean | 'expand'>;
|
||||
onTabClick?: (mForm: FormState | undefined, tab: any, data: any) => void;
|
||||
}
|
||||
// #endregion TabPaneConfig
|
||||
|
||||
// #region TabConfig
|
||||
export interface TabConfig<T = never> extends FormItem, ContainerCommonConfig<T> {
|
||||
type: 'tab' | 'dynamic-tab';
|
||||
tabType?: string;
|
||||
@ -673,10 +738,12 @@ export interface TabConfig<T = never> extends FormItem, ContainerCommonConfig<T>
|
||||
onTabClick?: (mForm: FormState | undefined, tab: any, data: any) => void;
|
||||
activeChange?: (mForm: FormState | undefined, tabName: string, data: any) => void;
|
||||
}
|
||||
// #endregion TabConfig
|
||||
|
||||
/**
|
||||
* 分组
|
||||
*/
|
||||
// #region FieldsetConfig
|
||||
export interface FieldsetConfig<T = never> extends FormItem, ContainerCommonConfig<T> {
|
||||
type: 'fieldset';
|
||||
checkbox?:
|
||||
@ -690,17 +757,21 @@ export interface FieldsetConfig<T = never> extends FormItem, ContainerCommonConf
|
||||
legend?: string;
|
||||
schematic?: string;
|
||||
}
|
||||
// #endregion FieldsetConfig
|
||||
|
||||
/**
|
||||
* 面板容器
|
||||
*/
|
||||
// #region PanelConfig
|
||||
export interface PanelConfig<T = never> extends FormItem, ContainerCommonConfig<T> {
|
||||
type: 'panel';
|
||||
expand?: boolean;
|
||||
title?: string;
|
||||
schematic?: string;
|
||||
}
|
||||
// #endregion PanelConfig
|
||||
|
||||
// #region TableGroupListCommonConfig
|
||||
export interface TableGroupListCommonConfig extends FormItem {
|
||||
type: 'table' | 'groupList' | 'group-list';
|
||||
enableToggleMode?: boolean;
|
||||
@ -714,7 +785,9 @@ export interface TableGroupListCommonConfig extends FormItem {
|
||||
/** table 新增行时前置回调 */
|
||||
beforeAddRow?: (mForm: FormState | undefined, data: any) => boolean | Promise<boolean>;
|
||||
}
|
||||
// #endregion TableGroupListCommonConfig
|
||||
|
||||
// #region TableColumnConfig
|
||||
export interface TableColumnConfig<T = never> extends FormItem {
|
||||
name?: string;
|
||||
label?: string;
|
||||
@ -730,10 +803,12 @@ export interface TableColumnConfig<T = never> extends FormItem {
|
||||
text?: string;
|
||||
};
|
||||
}
|
||||
// #endregion TableColumnConfig
|
||||
|
||||
/**
|
||||
* 表格容器
|
||||
*/
|
||||
// #region TableConfig
|
||||
export interface TableConfig<T = never> extends TableGroupListCommonConfig {
|
||||
items: TableColumnConfig<T>[];
|
||||
tableItems?: TableColumnConfig<T>[];
|
||||
@ -773,7 +848,9 @@ export interface TableConfig<T = never> extends TableGroupListCommonConfig {
|
||||
sort?: boolean;
|
||||
sortKey?: string;
|
||||
}
|
||||
// #endregion TableConfig
|
||||
|
||||
// #region GroupListConfig
|
||||
export interface GroupListConfig<T = never> extends TableGroupListCommonConfig {
|
||||
span?: number;
|
||||
items: FormConfig<T>;
|
||||
@ -800,18 +877,22 @@ export interface GroupListConfig<T = never> extends TableGroupListCommonConfig {
|
||||
) => boolean | boolean;
|
||||
moveSpecifyLocation?: boolean;
|
||||
}
|
||||
// #endregion GroupListConfig
|
||||
|
||||
interface StepItemConfig<T = never> extends FormItem, ContainerCommonConfig<T> {
|
||||
title: string;
|
||||
}
|
||||
|
||||
// #region StepConfig
|
||||
export interface StepConfig<T = never> extends FormItem {
|
||||
type: 'step';
|
||||
/** 每个 step 的间距，不填写将自适应间距。支持百分比。 */
|
||||
space?: string | number;
|
||||
items: StepItemConfig<T>[];
|
||||
}
|
||||
// #endregion StepConfig
|
||||
|
||||
// #region ComponentConfig
|
||||
export interface ComponentConfig extends FormItem {
|
||||
type: 'component';
|
||||
id: string;
|
||||
@ -819,13 +900,17 @@ export interface ComponentConfig extends FormItem {
|
||||
display?: any;
|
||||
component?: any;
|
||||
}
|
||||
// #endregion ComponentConfig
|
||||
|
||||
// #region FlexLayoutConfig
|
||||
export interface FlexLayoutConfig<T = never> extends FormItem, ContainerCommonConfig<T> {
|
||||
type: 'flex-layout';
|
||||
/** flex 子项间距，默认 '16px' */
|
||||
gap?: string;
|
||||
}
|
||||
// #endregion FlexLayoutConfig
|
||||
|
||||
// #region ChildConfig
|
||||
export type ChildConfig<T = never> =
|
||||
| ContainerCommonConfig<T>
|
||||
| TabConfig<T>
|
||||
@ -858,7 +943,12 @@ export type ChildConfig<T = never> =
|
||||
| DynamicFieldConfig
|
||||
| ComponentConfig
|
||||
| FlexLayoutConfig<T>;
|
||||
// #endregion ChildConfig
|
||||
|
||||
// #region FormItemConfig
|
||||
export type FormItemConfig<T = never> = ChildConfig<T> | DynamicTypeConfig | EditorChildConfig<T> | T;
|
||||
// #endregion FormItemConfig
|
||||
|
||||
// #region FormConfig
|
||||
export type FormConfig<T = never> = FormItemConfig<T>[];
|
||||
// #endregion FormConfig
|
||||
|
||||
@ -2,6 +2,7 @@ import type { DataSourceFieldType, DataSourceSchema } from '@tmagic/schema';
|
||||
|
||||
import type { FilterFunction, FormItem, FormItemConfig, FormState, Input } from './base';
|
||||
|
||||
// #region DataSourceFieldSelectConfig
|
||||
export interface DataSourceFieldSelectConfig<T = never> extends FormItem {
|
||||
type: 'data-source-field-select';
|
||||
/**
|
||||
@ -32,7 +33,9 @@ export interface DataSourceFieldSelectConfig<T = never> extends FormItem {
|
||||
|
||||
dataSourceId?: string;
|
||||
}
|
||||
// #endregion DataSourceFieldSelectConfig
|
||||
|
||||
// #region CodeConfig
|
||||
export interface CodeConfig extends FormItem {
|
||||
type: 'vs-code';
|
||||
language?: string;
|
||||
@ -47,51 +50,71 @@ export interface CodeConfig extends FormItem {
|
||||
};
|
||||
mFormItemType?: string;
|
||||
}
|
||||
// #endregion CodeConfig
|
||||
|
||||
// #region CodeLinkConfig
|
||||
export interface CodeLinkConfig extends FormItem {
|
||||
type: 'code-link';
|
||||
formTitle?: string;
|
||||
codeOptions?: Object;
|
||||
}
|
||||
// #endregion CodeLinkConfig
|
||||
|
||||
// #region CodeSelectConfig
|
||||
export interface CodeSelectConfig extends FormItem {
|
||||
type: 'code-select';
|
||||
className?: string;
|
||||
}
|
||||
// #endregion CodeSelectConfig
|
||||
|
||||
// #region CodeSelectColConfig
|
||||
export interface CodeSelectColConfig extends FormItem {
|
||||
type: 'code-select-col';
|
||||
/** 是否可以编辑代码块，disable表示的是是否可以选择代码块 */
|
||||
notEditable?: boolean | FilterFunction;
|
||||
}
|
||||
// #endregion CodeSelectColConfig
|
||||
|
||||
// #region CondOpSelectConfig
|
||||
export interface CondOpSelectConfig extends FormItem {
|
||||
type: 'cond-op-select';
|
||||
parentFields?: string[];
|
||||
}
|
||||
// #endregion CondOpSelectConfig
|
||||
|
||||
// #region DataSourceFieldsConfig
|
||||
export interface DataSourceFieldsConfig extends FormItem {
|
||||
type: 'data-source-fields';
|
||||
}
|
||||
// #endregion DataSourceFieldsConfig
|
||||
|
||||
// #region DataSourceInputConfig
|
||||
export interface DataSourceInputConfig extends FormItem {
|
||||
type: 'data-source-input';
|
||||
}
|
||||
// #endregion DataSourceInputConfig
|
||||
|
||||
// #region DataSourceMethodsConfig
|
||||
export interface DataSourceMethodsConfig extends FormItem {
|
||||
type: 'data-source-methods';
|
||||
}
|
||||
// #endregion DataSourceMethodsConfig
|
||||
|
||||
// #region DataSourceMethodSelectConfig
|
||||
export interface DataSourceMethodSelectConfig extends FormItem {
|
||||
type: 'data-source-method-select';
|
||||
/** 是否可以编辑数据源，disable表示的是是否可以选择数据源 */
|
||||
notEditable?: boolean | FilterFunction;
|
||||
}
|
||||
// #endregion DataSourceMethodSelectConfig
|
||||
|
||||
// #region DataSourceMocksConfig
|
||||
export interface DataSourceMocksConfig extends FormItem {
|
||||
type: 'data-source-mocks';
|
||||
}
|
||||
// #endregion DataSourceMocksConfig
|
||||
|
||||
// #region DataSourceSelect
|
||||
export interface DataSourceSelect extends FormItem, Input {
|
||||
type: 'data-source-select';
|
||||
/** 数据源类型: base、http... */
|
||||
@ -104,13 +127,17 @@ export interface DataSourceSelect extends FormItem, Input {
|
||||
/** 是否可以编辑数据源，disable表示的是是否可以选择数据源 */
|
||||
notEditable?: boolean | FilterFunction;
|
||||
}
|
||||
// #endregion DataSourceSelect
|
||||
|
||||
// #region DisplayCondsConfig
|
||||
export interface DisplayCondsConfig extends FormItem {
|
||||
type: 'display-conds';
|
||||
titlePrefix?: string;
|
||||
parentFields?: string[] | FilterFunction<string[]>;
|
||||
}
|
||||
// #endregion DisplayCondsConfig
|
||||
|
||||
// #region EventSelectConfig
|
||||
export interface EventSelectConfig extends FormItem {
|
||||
name: string;
|
||||
type: 'event-select';
|
||||
@ -129,23 +156,32 @@ export interface EventSelectConfig extends FormItem {
|
||||
/** 联动数据源配置 */
|
||||
dataSourceActionConfig?: FormItem;
|
||||
}
|
||||
// #endregion EventSelectConfig
|
||||
|
||||
// #region KeyValueConfig
|
||||
export interface KeyValueConfig extends FormItem {
|
||||
type: 'key-value';
|
||||
advanced?: boolean;
|
||||
}
|
||||
// #endregion KeyValueConfig
|
||||
|
||||
// #region PageFragmentSelectConfig
|
||||
export interface PageFragmentSelectConfig extends FormItem {
|
||||
type: 'page-fragment-select';
|
||||
}
|
||||
// #endregion PageFragmentSelectConfig
|
||||
|
||||
// #region UISelectConfig
|
||||
export interface UISelectConfig extends FormItem {
|
||||
type: 'ui-select';
|
||||
}
|
||||
// #endregion UISelectConfig
|
||||
|
||||
// #region StyleSetterConfig
|
||||
export interface StyleSetterConfig extends FormItem {
|
||||
type: 'style-setter';
|
||||
}
|
||||
// #endregion StyleSetterConfig
|
||||
|
||||
export type EditorChildConfig<T = never> =
|
||||
| DataSourceFieldSelectConfig<T>
|
||||
|
||||
@ -33,8 +33,11 @@ export interface HttpOptions {
|
||||
|
||||
export type RequestFunction = <T = any>(options: HttpOptions) => Promise<T>;
|
||||
|
||||
// #region JsEngine
|
||||
export type JsEngine = 'browser' | 'hippy' | 'nodejs';
|
||||
// #endregion JsEngine
|
||||
|
||||
// #region NodeType
|
||||
export enum NodeType {
|
||||
/** 容器 */
|
||||
CONTAINER = 'container',
|
||||
@ -45,6 +48,7 @@ export enum NodeType {
|
||||
/** 页面片 */
|
||||
PAGE_FRAGMENT = 'page-fragment',
|
||||
}
|
||||
// #endregion NodeType
|
||||
|
||||
export const NODE_CONDS_KEY = 'displayConds';
|
||||
export const NODE_CONDS_RESULT_KEY = 'displayCondsResultReverse';
|
||||
@ -52,8 +56,11 @@ export const NODE_CONDS_RESULT_KEY = 'displayCondsResultReverse';
|
||||
export const NODE_DISABLE_DATA_SOURCE_KEY = '_tmagic_node_disabled_data_source';
|
||||
export const NODE_DISABLE_CODE_BLOCK_KEY = '_tmagic_node_disabled_code_block';
|
||||
|
||||
// #region Id
|
||||
export type Id = string | number;
|
||||
// #endregion Id
|
||||
|
||||
// #region ActionType
|
||||
// 事件联动的动作类型
|
||||
export enum ActionType {
|
||||
/** 联动组件 */
|
||||
@ -63,10 +70,13 @@ export enum ActionType {
|
||||
/** 数据源 */
|
||||
DATA_SOURCE = 'data-source',
|
||||
}
|
||||
// #endregion ActionType
|
||||
|
||||
// #region DataSourceDeps
|
||||
export interface DataSourceDeps {
|
||||
[dataSourceId: string | number]: DepData;
|
||||
}
|
||||
// #endregion DataSourceDeps
|
||||
|
||||
/** 事件类型(已废弃，后续不建议继续使用) */
|
||||
export interface DeprecatedEventConfig {
|
||||
@ -78,13 +88,16 @@ export interface DeprecatedEventConfig {
|
||||
method: string;
|
||||
}
|
||||
|
||||
// #region EventConfig
|
||||
export interface EventConfig {
|
||||
/** 待触发的事件名称 */
|
||||
name: string;
|
||||
/** 动作响应配置 */
|
||||
actions: EventActionItem[];
|
||||
}
|
||||
// #endregion EventConfig
|
||||
|
||||
// #region CodeItemConfig
|
||||
export interface CodeItemConfig {
|
||||
/** 动作类型 */
|
||||
actionType: ActionType;
|
||||
@ -93,7 +106,9 @@ export interface CodeItemConfig {
|
||||
/** 代码参数 */
|
||||
params?: Record<string, any>;
|
||||
}
|
||||
// #endregion CodeItemConfig
|
||||
|
||||
// #region CompItemConfig
|
||||
export interface CompItemConfig {
|
||||
/** 动作类型 */
|
||||
actionType: ActionType;
|
||||
@ -102,7 +117,9 @@ export interface CompItemConfig {
|
||||
/** 触发事件后执行被选中组件的方法 */
|
||||
method: string;
|
||||
}
|
||||
// #endregion CompItemConfig
|
||||
|
||||
// #region DataSourceItemConfig
|
||||
export interface DataSourceItemConfig {
|
||||
/** 动作类型 */
|
||||
actionType: ActionType;
|
||||
@ -111,9 +128,13 @@ export interface DataSourceItemConfig {
|
||||
/** 代码参数 */
|
||||
params?: object;
|
||||
}
|
||||
// #endregion DataSourceItemConfig
|
||||
|
||||
// #region EventActionItem
|
||||
export type EventActionItem = CompItemConfig | CodeItemConfig | DataSourceItemConfig;
|
||||
// #endregion EventActionItem
|
||||
|
||||
// #region MComponent
|
||||
export interface MComponent {
|
||||
/** 组件ID，默认为${type}_${number}}形式, 如：page_123 */
|
||||
id: Id;
|
||||
@ -135,14 +156,18 @@ export interface MComponent {
|
||||
[NODE_CONDS_RESULT_KEY]?: boolean;
|
||||
[key: string]: any;
|
||||
}
|
||||
// #endregion MComponent
|
||||
|
||||
// #region MContainer
|
||||
export interface MContainer extends MComponent {
|
||||
/** 容器类型，默认为'container' */
|
||||
type?: NodeType.CONTAINER | string;
|
||||
/** 容器子元素 */
|
||||
items: (MComponent | MContainer)[];
|
||||
}
|
||||
// #endregion MContainer
|
||||
|
||||
// #region MIteratorContainer
|
||||
export interface MIteratorContainer extends MContainer {
|
||||
type: 'iterator-container';
|
||||
iteratorData: any[];
|
||||
@ -153,17 +178,23 @@ export interface MIteratorContainer extends MContainer {
|
||||
style: Record<string, string | number>;
|
||||
};
|
||||
}
|
||||
// #endregion MIteratorContainer
|
||||
|
||||
// #region MPage
|
||||
export interface MPage extends MContainer {
|
||||
/** 页面类型 */
|
||||
type: NodeType.PAGE;
|
||||
}
|
||||
// #endregion MPage
|
||||
|
||||
// #region MPageFragment
|
||||
export interface MPageFragment extends MContainer {
|
||||
/** 页面类型 */
|
||||
type: NodeType.PAGE_FRAGMENT;
|
||||
}
|
||||
// #endregion MPageFragment
|
||||
|
||||
// #region MApp
|
||||
export interface MApp extends MComponent {
|
||||
/** App页面类型，app作为整个结构的根节点；有且只有一个 */
|
||||
type: NodeType.ROOT;
|
||||
@ -177,11 +208,15 @@ export interface MApp extends MComponent {
|
||||
dataSourceDeps?: DataSourceDeps;
|
||||
dataSourceCondDeps?: DataSourceDeps;
|
||||
}
|
||||
// #endregion MApp
|
||||
|
||||
// #region CodeBlockDSL
|
||||
export interface CodeBlockDSL {
|
||||
[id: Id]: CodeBlockContent;
|
||||
}
|
||||
// #endregion CodeBlockDSL
|
||||
|
||||
// #region CodeBlockContent
|
||||
export interface CodeBlockContent {
|
||||
/** 代码块名称 */
|
||||
name: string;
|
||||
@ -194,20 +229,25 @@ export interface CodeBlockContent {
|
||||
/** 扩展字段 */
|
||||
[propName: string]: any;
|
||||
}
|
||||
// #endregion CodeBlockContent
|
||||
|
||||
// #region CodeParam
|
||||
export interface CodeParam {
|
||||
/** 参数名 */
|
||||
name: string;
|
||||
/** 扩展字段 */
|
||||
[propName: string]: any;
|
||||
}
|
||||
// #endregion CodeParam
|
||||
|
||||
export interface PastePosition {
|
||||
left?: number;
|
||||
top?: number;
|
||||
}
|
||||
|
||||
// #region MNode
|
||||
export type MNode = MComponent | MContainer | MIteratorContainer | MPage | MApp | MPageFragment;
|
||||
// #endregion MNode
|
||||
|
||||
export interface MNodeInstance extends Omit<MNode, 'id'> {
|
||||
id?: Id;
|
||||
@ -228,6 +268,7 @@ export enum HookCodeType {
|
||||
|
||||
export type DataSourceFieldType = 'null' | 'boolean' | 'object' | 'array' | 'number' | 'string' | 'any';
|
||||
|
||||
// #region DataSchema
|
||||
export interface DataSchema {
|
||||
type?: DataSourceFieldType;
|
||||
/** 键名 */
|
||||
@ -243,7 +284,9 @@ export interface DataSchema {
|
||||
/** type === 'object' || type === 'array' */
|
||||
fields?: DataSchema[];
|
||||
}
|
||||
// #endregion DataSchema
|
||||
|
||||
// #region MockSchema
|
||||
export interface MockSchema {
|
||||
/** 名称 */
|
||||
title: string;
|
||||
@ -256,7 +299,9 @@ export interface MockSchema {
|
||||
/** mock数据 */
|
||||
data: Record<string | number, any>;
|
||||
}
|
||||
// #endregion MockSchema
|
||||
|
||||
// #region DataSourceSchema
|
||||
export interface DataSourceSchema {
|
||||
/** 数据源类型，根据类型来实例化；例如http则使用new HttpDataSource */
|
||||
type: string;
|
||||
@ -279,7 +324,9 @@ export interface DataSourceSchema {
|
||||
/** 扩展字段 */
|
||||
[key: string]: any;
|
||||
}
|
||||
// #endregion DataSourceSchema
|
||||
|
||||
// #region DepData
|
||||
export interface DepData {
|
||||
[nodeId: Id]: {
|
||||
/** 组件名称 */
|
||||
@ -288,6 +335,7 @@ export interface DepData {
|
||||
data?: Record<string, any>;
|
||||
};
|
||||
}
|
||||
// #endregion DepData
|
||||
|
||||
export type HookData = {
|
||||
/** 代码块id */
|
||||
@ -296,22 +344,28 @@ export type HookData = {
|
||||
params?: object;
|
||||
};
|
||||
|
||||
// #region DisplayCondItem
|
||||
export interface DisplayCondItem {
|
||||
field: string[];
|
||||
op: string;
|
||||
value?: any;
|
||||
range?: [number, number];
|
||||
}
|
||||
// #endregion DisplayCondItem
|
||||
|
||||
// #region DisplayCond
|
||||
export interface DisplayCond {
|
||||
cond: DisplayCondItem[];
|
||||
}
|
||||
// #endregion DisplayCond
|
||||
|
||||
export interface UiComponentProps<T extends MNode = MNode> {
|
||||
config: T;
|
||||
model?: any;
|
||||
}
|
||||
|
||||
// #region StyleSchema
|
||||
export interface StyleSchema {
|
||||
[key: string]: any;
|
||||
}
|
||||
// #endregion StyleSchema
|
||||
|
||||
@ -122,6 +122,7 @@ export interface MoveableOptionsManagerConfig {
|
||||
getRootContainer: GetRootContainer;
|
||||
}
|
||||
|
||||
// #region CustomizeMoveableOptionsCallbackConfig
|
||||
export interface CustomizeMoveableOptionsCallbackConfig {
|
||||
targetEl: HTMLElement | null;
|
||||
targetElId?: string;
|
||||
@ -130,6 +131,7 @@ export interface CustomizeMoveableOptionsCallbackConfig {
|
||||
isMulti: boolean;
|
||||
document?: Document;
|
||||
}
|
||||
// #endregion CustomizeMoveableOptionsCallbackConfig
|
||||
|
||||
export interface StageRenderConfig {
|
||||
runtimeUrl?: string;
|
||||
|
||||
1625
pnpm-lock.yaml
generated
1625
pnpm-lock.yaml
generated
File diff suppressed because it is too large
Load Diff
@ -7,7 +7,7 @@ packages:
|
||||
- "eslint-config"
|
||||
|
||||
catalog:
|
||||
vue: ^3.5.33
|
||||
"@vue/compiler-sfc": ^3.5.33
|
||||
vite: ^8.0.12
|
||||
vue: ^3.5.34
|
||||
"@vue/compiler-sfc": ^3.5.34
|
||||
vite: ^8.0.13
|
||||
typescript: "^6.0.3"
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user