Compare commits

..

No commits in common. "master" and "v1.7.10" have entirely different histories.

163 changed files with 2735 additions and 5292 deletions

View File

@ -1,40 +1,3 @@
## [1.7.13](https://github.com/Tencent/tmagic-editor/compare/v1.7.12...v1.7.13) (2026-04-29)
### Bug Fixes
* **core:** getTransform 支持 string 类型并适配 hippy ([96801e2](https://github.com/Tencent/tmagic-editor/commit/96801e2ccba1fb400007e988aebbda7195e8ff15))
### Features
* **editor:** update 支持 selectedAfterUpdate 参数控制是否更新 nodes ([26efa75](https://github.com/Tencent/tmagic-editor/commit/26efa75ff2cf03d4e27e3e77592d0304d343e44a))
## [1.7.12](https://github.com/Tencent/tmagic-editor/compare/v1.7.11...v1.7.12) (2026-04-24)
## [1.7.11](https://github.com/Tencent/tmagic-editor/compare/v1.7.10...v1.7.11) (2026-04-23)
### Bug Fixes
* **form:** group-list lastValues 为空时兼容取值报错 ([7249b51](https://github.com/Tencent/tmagic-editor/commit/7249b5106eee06a4e22cc325e83fac4e09e146ba))
* **form:** table 全屏每次进入重新获取 z-index ([9ba12e9](https://github.com/Tencent/tmagic-editor/commit/9ba12e97afccbca6bafcacc1b5e79f4d7fed3341)), closes [#672](https://github.com/Tencent/tmagic-editor/issues/672)
* **vue-runtime-help:** 删除所有页面后,新增页面出错 ([6a4a4ed](https://github.com/Tencent/tmagic-editor/commit/6a4a4ed122ce19ece81d816cb9b7dfb473dc351a)), closes [#668](https://github.com/Tencent/tmagic-editor/issues/668)
### Features
* **editor:** 样式面板布局分组新增透明度配置 ([e106c08](https://github.com/Tencent/tmagic-editor/commit/e106c081c8fd6e0e8db9160605190e21ffccc1f7)), closes [#675](https://github.com/Tencent/tmagic-editor/issues/675)
* **editor:** 没有参考线时不显示参考线切换按钮 ([b46b571](https://github.com/Tencent/tmagic-editor/commit/b46b5712142c85fc18533f68d52ae0958c2835e0))
* **form:** group-list 支持 max 限制和 beforeAddRow 前置校验 ([ac755ac](https://github.com/Tencent/tmagic-editor/commit/ac755ac3d0328a2ca8e77d6f8b117b8b349e1bd0))
* **table:** 支持列排序配置 ([4cd54d1](https://github.com/Tencent/tmagic-editor/commit/4cd54d13979da5189ecbd19ec732a4653a4f7d0a))
## [1.7.10](https://github.com/Tencent/tmagic-editor/compare/v1.7.9...v1.7.10) (2026-04-13) ## [1.7.10](https://github.com/Tencent/tmagic-editor/compare/v1.7.9...v1.7.10) (2026-04-13)

View File

@ -16,9 +16,9 @@ https://tencent.github.io/tmagic-editor/playground/index.html
## 环境准备 ## 环境准备
node.js ^20.19.0 || >=22.12.0 node.js >= 18
pnpm >= 10 pnpm >= 9
先安装 pnpm 先安装 pnpm

View File

@ -1,269 +1,355 @@
# codeBlockService方法 # codeBlockService方法
## setCodeDsl ## setCodeDsl
- **参数:** - **参数:**
- {[CodeBlockDSL](https://github.com/Tencent/tmagic-editor/blob/239b5d3efeae916a8cf3e3566d88063ecccc0553/packages/schema/src/index.ts#L75)} codeDsl 代码块DSL
-
- **返回:** - **返回:**
- `{Promise<void>}` - `{Promise<void>}`
- **详情:** - **详情:**
设置活动的代码块dsl数据源并触发 `code-dsl-change` 事件
## getCodeDsl ## getCodeDsl
- **参数:**
-
- **返回:** - **返回:**
- {[CodeBlockDSL](https://github.com/Tencent/tmagic-editor/blob/239b5d3efeae916a8cf3e3566d88063ecccc0553/packages/schema/src/index.ts#L75) | null}
- `{Promise<void>}`
- **详情:** - **详情:**
获取活动的代码块dsl数据源默认从dsl中的codeBlocks字段读取
## getCodeContentById ## getCodeContentById
- **[扩展支持](../../guide/editor-expand#行为扩展)** 是
- **参数:** - **参数:**
- `{string | number}` id 代码块id
-
- **返回:** - **返回:**
- {[CodeBlockContent](https://github.com/Tencent/tmagic-editor/blob/239b5d3efeae916a8cf3e3566d88063ecccc0553/packages/schema/src/index.ts#L79) | null}
- `{Promise<void>}`
- **详情:** - **详情:**
根据代码块id获取代码块内容
## setCodeDslById ## setCodeDslById
- **[扩展支持](../../guide/editor-expand#行为扩展)** 是 - **[扩展支持](../../guide/editor-expand#行为扩展)** 是
- **参数:** - **参数:**
- `{string | number}` id 代码块id
- {Partial<[CodeBlockContent](https://github.com/Tencent/tmagic-editor/blob/239b5d3efeae916a8cf3e3566d88063ecccc0553/packages/schema/src/index.ts#L79)>} codeConfig 代码块内容配置信息 -
- **返回:** - **返回:**
- `{Promise<void>}` - `{Promise<void>}`
- **详情:** - **详情:**
设置代码块ID和代码内容到源dsl强制写入底层调用 [setCodeDslByIdSync](#setcodedslbyidsync)
## setCodeDslByIdSync
- **参数:**
- `{string | number}` id 代码块id
- {Partial<[CodeBlockContent](https://github.com/Tencent/tmagic-editor/blob/239b5d3efeae916a8cf3e3566d88063ecccc0553/packages/schema/src/index.ts#L79)>} codeConfig 代码块内容配置信息
- `{boolean}` force 是否强制写入,默认 `true`;为 `false` 时若同 id 已存在则跳过
- **返回:**
- `{void}`
- **详情:**
同步版本的 [setCodeDslById](#setcodedslbyid),并会触发 `addOrUpdate` 事件
## getCodeDslByIds ## getCodeDslByIds
- **参数:**
- `{string[]}` ids 代码块id数组
- **返回:**
- {[CodeBlockDSL](https://github.com/Tencent/tmagic-editor/blob/239b5d3efeae916a8cf3e3566d88063ecccc0553/packages/schema/src/index.ts#L75)} 命中的代码块dsl
- **详情:**
根据代码块id数组获取代码dsl
## getEditStatus
- **返回:**
- `{boolean}` 是否可编辑
- **详情:**
获取当前编辑状态
## setEditStatus
- **[扩展支持](../../guide/editor-expand#行为扩展)** 是 - **[扩展支持](../../guide/editor-expand#行为扩展)** 是
- **参数:** - **参数:**
- `{boolean}` status 是否可编辑
-
- **返回:** - **返回:**
- `{Promise<void>}` - `{Promise<void>}`
- **详情:** - **详情:**
设置代码块编辑状态 ## setCodeEditorShowStatus
- **[扩展支持](../../guide/editor-expand#行为扩展)** 是
- **参数:**
-
- **返回:**
- `{Promise<void>}`
- **详情:**
## getCodeEditorShowStatus
- **参数:**
-
- **返回:**
- `{Promise<void>}`
- **详情:**
## setCodeEditorContent
- **参数:**
-
- **返回:**
- `{Promise<void>}`
- **详情:**
## getCurrentDsl
- **[扩展支持](../../guide/editor-expand#行为扩展)** 是
- **参数:**
-
- **返回:**
- `{Promise<void>}`
- **详情:**
## getEditStatus
- **[扩展支持](../../guide/editor-expand#行为扩展)** 是
## setEditStatus
- **参数:**
-
- **返回:**
- `{Promise<void>}`
- **详情:**
## setId
- **参数:**
-
- **返回:**
- `{Promise<void>}`
- **详情:**
## getId
- **参数:**
-
- **返回:**
- `{Promise<void>}`
- **详情:**
## getMode
- **[扩展支持](../../guide/editor-expand#行为扩展)** 是
- **参数:**
-
- **返回:**
- `{Promise<void>}`
- **详情:**
## setMode
- **[扩展支持](../../guide/editor-expand#行为扩展)** 是
- **参数:**
-
- **返回:**
- `{Promise<void>}`
- **详情:**
## setCombineIds ## setCombineIds
- **[扩展支持](../../guide/editor-expand#行为扩展)** 是 - **[扩展支持](../../guide/editor-expand#行为扩展)** 是
- **参数:** - **参数:**
- `{string[]}` ids 代码块id数组
-
- **返回:** - **返回:**
- `{Promise<void>}` - `{Promise<void>}`
- **详情:** - **详情:**
设置当前选中组件已关联绑定的代码块id数组
## getCombineIds ## getCombineIds
- **参数:**
-
- **返回:** - **返回:**
- `{string[]}` 代码块id数组
- `{Promise<void>}`
- **详情:** - **详情:**
获取当前选中组件已关联绑定的代码块id数组 ## refreshAllRelations
- **参数:**
-
- **返回:**
- `{Promise<void>}`
- **详情:**
## getCombineInfo
- **参数:**
-
- **返回:**
- `{Promise<void>}`
- **详情:**
## getUndeletableList ## getUndeletableList
- **参数:**
-
- **返回:** - **返回:**
- `{(string | number)[]}` 代码块id数组
- `{Promise<void>}`
- **详情:** - **详情:**
获取不可删除列表
## setUndeleteableList ## setUndeleteableList
- **[扩展支持](../../guide/editor-expand#行为扩展)** 是 - **[扩展支持](../../guide/editor-expand#行为扩展)** 是
- **参数:** - **参数:**
- `{(string | number)[]}` codeIds 代码块id数组
-
- **返回:** - **返回:**
- `{Promise<void>}` - `{Promise<void>}`
- **详情:** - **详情:**
设置不可删除列表:为业务逻辑预留的不可删除的代码块列表,由业务逻辑维护(如代码块上线后不可删除)
## setCodeDraft ## setCodeDraft
- **参数:** - **参数:**
- `{string | number}` codeId 代码块id
- `{string}` content 代码草稿内容 -
- **返回:** - **返回:**
- `{void}`
- `{Promise<void>}`
- **详情:** - **详情:**
将代码草稿写入 localStorage
## getCodeDraft ## getCodeDraft
- **参数:** - **参数:**
- `{string | number}` codeId 代码块id
-
- **返回:** - **返回:**
- `{string | null}` 代码草稿内容
- `{Promise<void>}`
- **详情:** - **详情:**
从 localStorage 读取代码草稿
## removeCodeDraft ## removeCodeDraft
- **参数:** - **参数:**
- `{string | number}` codeId 代码块id
-
- **返回:** - **返回:**
- `{void}`
- `{Promise<void>}`
- **详情:** - **详情:**
删除 localStorage 中的代码草稿
## deleteCodeDslByIds ## deleteCodeDslByIds
- **[扩展支持](../../guide/editor-expand#行为扩展)** 是 - **[扩展支持](../../guide/editor-expand#行为扩展)** 是
- **参数:** - **参数:**
- `{(string | number)[]}` codeIds 需要删除的代码块id数组
-
- **返回:** - **返回:**
- `{Promise<void>}` - `{Promise<void>}`
- **详情:** - **详情:**
在dsl数据源中删除指定id的代码块每删除一个会触发一次 `remove` 事件
## setParamsColConfig
- **参数:**
- `{TableColumnConfig}` config 参数列配置
- **返回:**
- `{void}`
- **详情:**
设置代码块入参表格列配置
## getParamsColConfig
- **返回:**
- `{TableColumnConfig | undefined}` 参数列配置
- **详情:**
获取代码块入参表格列配置
## getUniqueId ## getUniqueId
- **参数:**
-
- **返回:** - **返回:**
- `{Promise<string>}` 代码块唯一id
- `{Promise<void>}`
- **详情:** - **详情:**
生成代码块唯一id格式为 `code_xxxx`与已有id冲突时会递归重试 ## deleteCompsInRelation
## 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 组件节点配置
- `{TargetOptions}` collectorOptions 可选的依赖收集器配置 -
- **返回:** - **返回:**
- `{void}`
- `{Promise<void>}`
- **详情:** - **详情:**
复制组件时会带上组件关联的代码块将关联的代码块dsl存储到 localStorage
## paste
- **返回:**
- `{void}`
- **详情:**
粘贴代码块。从 localStorage 读取已复制的代码块dsl并写入当前dsl已存在同id的代码块不会被覆盖
## resetState
- **返回:**
- `{void}`
- **详情:**
重置 codeBlockService 状态
## destroy ## destroy
- **参数:**
-
- **返回:** - **返回:**
- `{void}`
- `{Promise<void>}`
- **详情:** - **详情:**
销毁 codeBlockService重置状态并移除所有事件监听和插件
## use ## use
使用中间件的方式扩展方法,上述方法中标记有`扩展支持: 是`的方法都支持使用use扩展 使用中间件的方式扩展方法,上述方法中标记有`扩展支持: 是`的方法都支持使用use扩展
@ -281,3 +367,4 @@
- **详情:** - **详情:**
删掉当前设置的所有扩展 删掉当前设置的所有扩展

View File

@ -3,9 +3,11 @@
## get ## get
- **参数:** - **参数:**
- `{StateKey}` name 状态键名 - `{StateKey}` name 状态键名
- **返回:** - **返回:**
- `{any}` 对应的状态值 - `{any}` 对应的状态值
- **详情:** - **详情:**
@ -24,19 +26,21 @@
- **示例:** - **示例:**
```js ```js
import { dataSourceService } from "@tmagic/editor"; import { dataSourceService } from '@tmagic/editor';
const dataSources = dataSourceService.get("dataSources"); const dataSources = dataSourceService.get('dataSources');
console.log(dataSources); console.log(dataSources);
``` ```
## set ## set
- **参数:** - **参数:**
- `{StateKey}` name 状态键名 - `{StateKey}` name 状态键名
- `{any}` value 状态值 - `{any}` value 状态值
- **返回:** - **返回:**
- `{void}` - `{void}`
- **详情:** - **详情:**
@ -46,9 +50,9 @@ console.log(dataSources);
- **示例:** - **示例:**
```js ```js
import { dataSourceService } from "@tmagic/editor"; import { dataSourceService } from '@tmagic/editor';
dataSourceService.set("editable", false); dataSourceService.set('editable', false);
``` ```
## getFormConfig ## getFormConfig
@ -56,10 +60,12 @@ dataSourceService.set("editable", false);
- **[扩展支持](../../guide/editor-expand#行为扩展)** 是 - **[扩展支持](../../guide/editor-expand#行为扩展)** 是
- **参数:** - **参数:**
- `{string}` type 数据源类型,默认为 'base' - `{string}` type 数据源类型,默认为 'base'
- **返回:** - **返回:**
- {[FormConfig](https://github.com/Tencent/tmagic-editor/blob/cce8b63fc3618b5b811aa33c703de21c22be8a6a/packages/form-schema/src/base.ts#L864)} 表单配置
- {[FormConfig](https://github.com/Tencent/tmagic-editor/blob/c143a5f7670ae61d80c1a2cfcc780cfb5259849d/packages/form/src/schema.ts#L706)} 表单配置
- **详情:** - **详情:**
@ -68,9 +74,9 @@ dataSourceService.set("editable", false);
- **示例:** - **示例:**
```js ```js
import { dataSourceService } from "@tmagic/editor"; import { dataSourceService } from '@tmagic/editor';
const config = dataSourceService.getFormConfig("http"); const config = dataSourceService.getFormConfig('http');
console.log(config); console.log(config);
``` ```
@ -79,10 +85,12 @@ console.log(config);
- **[扩展支持](../../guide/editor-expand#行为扩展)** 是 - **[扩展支持](../../guide/editor-expand#行为扩展)** 是
- **参数:** - **参数:**
- `{string}` type 数据源类型 - `{string}` type 数据源类型
- {[FormConfig](https://github.com/Tencent/tmagic-editor/blob/cce8b63fc3618b5b811aa33c703de21c22be8a6a/packages/form-schema/src/base.ts#L864)} config 表单配置 - {[FormConfig](https://github.com/Tencent/tmagic-editor/blob/c143a5f7670ae61d80c1a2cfcc780cfb5259849d/packages/form/src/schema.ts#L706)} config 表单配置
- **返回:** - **返回:**
- `{void}` - `{void}`
- **详情:** - **详情:**
@ -92,21 +100,21 @@ console.log(config);
- **示例:** - **示例:**
```js ```js
import { dataSourceService } from "@tmagic/editor"; import { dataSourceService } from '@tmagic/editor';
dataSourceService.setFormConfig("http", [ dataSourceService.setFormConfig('http', [
{ {
name: "url", name: 'url',
text: "请求地址", text: '请求地址',
type: "text", type: 'text',
}, },
{ {
name: "method", name: 'method',
text: "请求方法", text: '请求方法',
type: "select", type: 'select',
options: [ options: [
{ text: "GET", value: "GET" }, { text: 'GET', value: 'GET' },
{ text: "POST", value: "POST" }, { text: 'POST', value: 'POST' },
], ],
}, },
]); ]);
@ -117,9 +125,11 @@ dataSourceService.setFormConfig("http", [
- **[扩展支持](../../guide/editor-expand#行为扩展)** 是 - **[扩展支持](../../guide/editor-expand#行为扩展)** 是
- **参数:** - **参数:**
- `{string}` type 数据源类型,默认为 'base' - `{string}` type 数据源类型,默认为 'base'
- **返回:** - **返回:**
- {Partial<[DataSourceSchema](https://github.com/Tencent/tmagic-editor/blob/5880dfbe15fcead63e9dc7c91900f8c4e7a574d8/packages/schema/src/index.ts#L221)>} 数据源默认值 - {Partial<[DataSourceSchema](https://github.com/Tencent/tmagic-editor/blob/5880dfbe15fcead63e9dc7c91900f8c4e7a574d8/packages/schema/src/index.ts#L221)>} 数据源默认值
- **详情:** - **详情:**
@ -129,9 +139,9 @@ dataSourceService.setFormConfig("http", [
- **示例:** - **示例:**
```js ```js
import { dataSourceService } from "@tmagic/editor"; import { dataSourceService } from '@tmagic/editor';
const defaultValue = dataSourceService.getFormValue("http"); const defaultValue = dataSourceService.getFormValue('http');
console.log(defaultValue); console.log(defaultValue);
``` ```
@ -140,10 +150,12 @@ console.log(defaultValue);
- **[扩展支持](../../guide/editor-expand#行为扩展)** 是 - **[扩展支持](../../guide/editor-expand#行为扩展)** 是
- **参数:** - **参数:**
- `{string}` type 数据源类型 - `{string}` type 数据源类型
- {Partial<[DataSourceSchema](https://github.com/Tencent/tmagic-editor/blob/5880dfbe15fcead63e9dc7c91900f8c4e7a574d8/packages/schema/src/index.ts#L221)>} value 数据源默认值 - {Partial<[DataSourceSchema](https://github.com/Tencent/tmagic-editor/blob/5880dfbe15fcead63e9dc7c91900f8c4e7a574d8/packages/schema/src/index.ts#L221)>} value 数据源默认值
- **返回:** - **返回:**
- `{void}` - `{void}`
- **详情:** - **详情:**
@ -153,12 +165,12 @@ console.log(defaultValue);
- **示例:** - **示例:**
```js ```js
import { dataSourceService } from "@tmagic/editor"; import { dataSourceService } from '@tmagic/editor';
dataSourceService.setFormValue("http", { dataSourceService.setFormValue('http', {
type: "http", type: 'http',
method: "GET", method: 'GET',
url: "", url: '',
}); });
``` ```
@ -167,9 +179,11 @@ dataSourceService.setFormValue("http", {
- **[扩展支持](../../guide/editor-expand#行为扩展)** 是 - **[扩展支持](../../guide/editor-expand#行为扩展)** 是
- **参数:** - **参数:**
- `{string}` type 数据源类型,默认为 'base' - `{string}` type 数据源类型,默认为 'base'
- **返回:** - **返回:**
- {[EventOption](https://github.com/Tencent/tmagic-editor/blob/239b5d3efeae916a8cf3e3566d88063ecccc0553/packages/core/src/events.ts#L26-L29)[]} 事件列表 - {[EventOption](https://github.com/Tencent/tmagic-editor/blob/239b5d3efeae916a8cf3e3566d88063ecccc0553/packages/core/src/events.ts#L26-L29)[]} 事件列表
- **详情:** - **详情:**
@ -179,9 +193,9 @@ dataSourceService.setFormValue("http", {
- **示例:** - **示例:**
```js ```js
import { dataSourceService } from "@tmagic/editor"; import { dataSourceService } from '@tmagic/editor';
const events = dataSourceService.getFormEvent("http"); const events = dataSourceService.getFormEvent('http');
console.log(events); console.log(events);
``` ```
@ -190,10 +204,12 @@ console.log(events);
- **[扩展支持](../../guide/editor-expand#行为扩展)** 是 - **[扩展支持](../../guide/editor-expand#行为扩展)** 是
- **参数:** - **参数:**
- `{string}` type 数据源类型 - `{string}` type 数据源类型
- {[EventOption](https://github.com/Tencent/tmagic-editor/blob/239b5d3efeae916a8cf3e3566d88063ecccc0553/packages/core/src/events.ts#L26-L29)[]} value 事件列表 - {[EventOption](https://github.com/Tencent/tmagic-editor/blob/239b5d3efeae916a8cf3e3566d88063ecccc0553/packages/core/src/events.ts#L26-L29)[]} value 事件列表
- **返回:** - **返回:**
- `{void}` - `{void}`
- **详情:** - **详情:**
@ -203,11 +219,11 @@ console.log(events);
- **示例:** - **示例:**
```js ```js
import { dataSourceService } from "@tmagic/editor"; import { dataSourceService } from '@tmagic/editor';
dataSourceService.setFormEvent("http", [ dataSourceService.setFormEvent('http', [
{ label: "请求成功", value: "success" }, { label: '请求成功', value: 'success' },
{ label: "请求失败", value: "error" }, { label: '请求失败', value: 'error' },
]); ]);
``` ```
@ -216,9 +232,11 @@ dataSourceService.setFormEvent("http", [
- **[扩展支持](../../guide/editor-expand#行为扩展)** 是 - **[扩展支持](../../guide/editor-expand#行为扩展)** 是
- **参数:** - **参数:**
- `{string}` type 数据源类型,默认为 'base' - `{string}` type 数据源类型,默认为 'base'
- **返回:** - **返回:**
- {[EventOption](https://github.com/Tencent/tmagic-editor/blob/239b5d3efeae916a8cf3e3566d88063ecccc0553/packages/core/src/events.ts#L26-L29)[]} 方法列表 - {[EventOption](https://github.com/Tencent/tmagic-editor/blob/239b5d3efeae916a8cf3e3566d88063ecccc0553/packages/core/src/events.ts#L26-L29)[]} 方法列表
- **详情:** - **详情:**
@ -228,9 +246,9 @@ dataSourceService.setFormEvent("http", [
- **示例:** - **示例:**
```js ```js
import { dataSourceService } from "@tmagic/editor"; import { dataSourceService } from '@tmagic/editor';
const methods = dataSourceService.getFormMethod("http"); const methods = dataSourceService.getFormMethod('http');
console.log(methods); console.log(methods);
``` ```
@ -239,10 +257,12 @@ console.log(methods);
- **[扩展支持](../../guide/editor-expand#行为扩展)** 是 - **[扩展支持](../../guide/editor-expand#行为扩展)** 是
- **参数:** - **参数:**
- `{string}` type 数据源类型 - `{string}` type 数据源类型
- {[EventOption](https://github.com/Tencent/tmagic-editor/blob/239b5d3efeae916a8cf3e3566d88063ecccc0553/packages/core/src/events.ts#L26-L29)[]} value 方法列表 - {[EventOption](https://github.com/Tencent/tmagic-editor/blob/239b5d3efeae916a8cf3e3566d88063ecccc0553/packages/core/src/events.ts#L26-L29)[]} value 方法列表
- **返回:** - **返回:**
- `{void}` - `{void}`
- **详情:** - **详情:**
@ -252,11 +272,11 @@ console.log(methods);
- **示例:** - **示例:**
```js ```js
import { dataSourceService } from "@tmagic/editor"; import { dataSourceService } from '@tmagic/editor';
dataSourceService.setFormMethod("http", [ dataSourceService.setFormMethod('http', [
{ label: "发起请求", value: "request" }, { label: '发起请求', value: 'request' },
{ label: "重试", value: "retry" }, { label: '重试', value: 'retry' },
]); ]);
``` ```
@ -265,9 +285,11 @@ dataSourceService.setFormMethod("http", [
- **[扩展支持](../../guide/editor-expand#行为扩展)** 是 - **[扩展支持](../../guide/editor-expand#行为扩展)** 是
- **参数:** - **参数:**
- {[DataSourceSchema](https://github.com/Tencent/tmagic-editor/blob/5880dfbe15fcead63e9dc7c91900f8c4e7a574d8/packages/schema/src/index.ts#L221)} config 数据源配置 - {[DataSourceSchema](https://github.com/Tencent/tmagic-editor/blob/5880dfbe15fcead63e9dc7c91900f8c4e7a574d8/packages/schema/src/index.ts#L221)} config 数据源配置
- **返回:** - **返回:**
- {[DataSourceSchema](https://github.com/Tencent/tmagic-editor/blob/5880dfbe15fcead63e9dc7c91900f8c4e7a574d8/packages/schema/src/index.ts#L221)} 添加后的数据源配置 - {[DataSourceSchema](https://github.com/Tencent/tmagic-editor/blob/5880dfbe15fcead63e9dc7c91900f8c4e7a574d8/packages/schema/src/index.ts#L221)} 添加后的数据源配置
- **详情:** - **详情:**
@ -277,13 +299,13 @@ dataSourceService.setFormMethod("http", [
- **示例:** - **示例:**
```js ```js
import { dataSourceService } from "@tmagic/editor"; import { dataSourceService } from '@tmagic/editor';
const newDs = dataSourceService.add({ const newDs = dataSourceService.add({
type: "http", type: 'http',
title: "用户信息", title: '用户信息',
url: "/api/user", url: '/api/user',
method: "GET", method: 'GET',
}); });
console.log(newDs.id); // 自动生成的id console.log(newDs.id); // 自动生成的id
@ -294,11 +316,13 @@ console.log(newDs.id); // 自动生成的id
- **[扩展支持](../../guide/editor-expand#行为扩展)** 是 - **[扩展支持](../../guide/editor-expand#行为扩展)** 是
- **参数:** - **参数:**
- {[DataSourceSchema](https://github.com/Tencent/tmagic-editor/blob/5880dfbe15fcead63e9dc7c91900f8c4e7a574d8/packages/schema/src/index.ts#L221)} config 数据源配置 - {[DataSourceSchema](https://github.com/Tencent/tmagic-editor/blob/5880dfbe15fcead63e9dc7c91900f8c4e7a574d8/packages/schema/src/index.ts#L221)} config 数据源配置
- `{Object}` options 可选配置 - `{Object}` options 可选配置
- {[ChangeRecord](https://github.com/Tencent/tmagic-editor/blob/239b5d3efeae916a8cf3e3566d88063ecccc0553/packages/form/src/schema.ts#L27-L39)[]} changeRecords 变更记录 - {[ChangeRecord](https://github.com/Tencent/tmagic-editor/blob/239b5d3efeae916a8cf3e3566d88063ecccc0553/packages/form/src/schema.ts#L27-L39)[]} changeRecords 变更记录
- **返回:** - **返回:**
- {[DataSourceSchema](https://github.com/Tencent/tmagic-editor/blob/5880dfbe15fcead63e9dc7c91900f8c4e7a574d8/packages/schema/src/index.ts#L221)} 更新后的数据源配置 - {[DataSourceSchema](https://github.com/Tencent/tmagic-editor/blob/5880dfbe15fcead63e9dc7c91900f8c4e7a574d8/packages/schema/src/index.ts#L221)} 更新后的数据源配置
- **详情:** - **详情:**
@ -308,13 +332,13 @@ console.log(newDs.id); // 自动生成的id
- **示例:** - **示例:**
```js ```js
import { dataSourceService } from "@tmagic/editor"; import { dataSourceService } from '@tmagic/editor';
const updatedDs = dataSourceService.update({ const updatedDs = dataSourceService.update({
id: "ds_123", id: 'ds_123',
type: "http", type: 'http',
title: "用户详情", title: '用户详情',
url: "/api/user/detail", url: '/api/user/detail',
}); });
console.log(updatedDs); console.log(updatedDs);
@ -325,9 +349,11 @@ console.log(updatedDs);
- **[扩展支持](../../guide/editor-expand#行为扩展)** 是 - **[扩展支持](../../guide/editor-expand#行为扩展)** 是
- **参数:** - **参数:**
- `{string}` id 数据源id - `{string}` id 数据源id
- **返回:** - **返回:**
- `{void}` - `{void}`
- **详情:** - **详情:**
@ -337,9 +363,9 @@ console.log(updatedDs);
- **示例:** - **示例:**
```js ```js
import { dataSourceService } from "@tmagic/editor"; import { dataSourceService } from '@tmagic/editor';
dataSourceService.remove("ds_123"); dataSourceService.remove('ds_123');
``` ```
## createId ## createId
@ -349,6 +375,7 @@ dataSourceService.remove("ds_123");
- **参数:** - **参数:**
- **返回:** - **返回:**
- `{string}` 生成的唯一id - `{string}` 生成的唯一id
- **详情:** - **详情:**
@ -358,7 +385,7 @@ dataSourceService.remove("ds_123");
- **示例:** - **示例:**
```js ```js
import { dataSourceService } from "@tmagic/editor"; import { dataSourceService } from '@tmagic/editor';
const id = dataSourceService.createId(); const id = dataSourceService.createId();
console.log(id); // 'ds_xxx-xxx-xxx' console.log(id); // 'ds_xxx-xxx-xxx'
@ -367,9 +394,11 @@ console.log(id); // 'ds_xxx-xxx-xxx'
## getDataSourceById ## getDataSourceById
- **参数:** - **参数:**
- `{string}` id 数据源id - `{string}` id 数据源id
- **返回:** - **返回:**
- {[DataSourceSchema](https://github.com/Tencent/tmagic-editor/blob/5880dfbe15fcead63e9dc7c91900f8c4e7a574d8/packages/schema/src/index.ts#L221) | undefined} 数据源配置 - {[DataSourceSchema](https://github.com/Tencent/tmagic-editor/blob/5880dfbe15fcead63e9dc7c91900f8c4e7a574d8/packages/schema/src/index.ts#L221) | undefined} 数据源配置
- **详情:** - **详情:**
@ -379,19 +408,21 @@ console.log(id); // 'ds_xxx-xxx-xxx'
- **示例:** - **示例:**
```js ```js
import { dataSourceService } from "@tmagic/editor"; import { dataSourceService } from '@tmagic/editor';
const ds = dataSourceService.getDataSourceById("ds_123"); const ds = dataSourceService.getDataSourceById('ds_123');
console.log(ds); console.log(ds);
``` ```
## copyWithRelated ## 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](https://github.com/Tencent/tmagic-editor/blob/c143a5f7670ae61d80c1a2cfcc780cfb5259849d/packages/schema/src/index.ts#L99) | [MNode](https://github.com/Tencent/tmagic-editor/blob/c143a5f7670ae61d80c1a2cfcc780cfb5259849d/packages/schema/src/index.ts#L99)[]} config 组件节点配置
- `{TargetOptions}` collectorOptions 可选的收集器配置 - `{TargetOptions}` collectorOptions 可选的收集器配置
- **返回:** - **返回:**
- `{void}` - `{void}`
- **详情:** - **详情:**
@ -401,9 +432,9 @@ console.log(ds);
- **示例:** - **示例:**
```js ```js
import { dataSourceService, editorService } from "@tmagic/editor"; import { dataSourceService, editorService } from '@tmagic/editor';
const node = editorService.get("node"); const node = editorService.get('node');
dataSourceService.copyWithRelated(node); dataSourceService.copyWithRelated(node);
``` ```
@ -412,6 +443,7 @@ dataSourceService.copyWithRelated(node);
- **参数:** - **参数:**
- **返回:** - **返回:**
- `{void}` - `{void}`
- **详情:** - **详情:**
@ -423,7 +455,7 @@ dataSourceService.copyWithRelated(node);
- **示例:** - **示例:**
```js ```js
import { dataSourceService } from "@tmagic/editor"; import { dataSourceService } from '@tmagic/editor';
dataSourceService.paste(); dataSourceService.paste();
``` ```
@ -433,6 +465,7 @@ dataSourceService.paste();
- **参数:** - **参数:**
- **返回:** - **返回:**
- `{void}` - `{void}`
- **详情:** - **详情:**
@ -442,7 +475,7 @@ dataSourceService.paste();
- **示例:** - **示例:**
```js ```js
import { dataSourceService } from "@tmagic/editor"; import { dataSourceService } from '@tmagic/editor';
dataSourceService.resetState(); dataSourceService.resetState();
``` ```
@ -452,6 +485,7 @@ dataSourceService.resetState();
- **参数:** - **参数:**
- **返回:** - **返回:**
- `{void}` - `{void}`
- **详情:** - **详情:**
@ -461,7 +495,7 @@ dataSourceService.resetState();
- **示例:** - **示例:**
```js ```js
import { dataSourceService } from "@tmagic/editor"; import { dataSourceService } from '@tmagic/editor';
dataSourceService.destroy(); dataSourceService.destroy();
``` ```
@ -470,23 +504,23 @@ dataSourceService.destroy();
- **详情:** - **详情:**
usePlugin支持更加灵活更加细致的扩展 上述方法中标记有`扩展支持: 是`的方法都支持使用usePlugin扩展 相对于[use](#use), usePlugin支持更加灵活更加细致的扩展 上述方法中标记有`扩展支持: 是`的方法都支持使用usePlugin扩展
每个支持扩展的方法都支持定制before、after两个hook来干预原有方法的行为before可以用于修改传入参数after可以用于修改返回的值 每个支持扩展的方法都支持定制before、after两个hook来干预原有方法的行为before可以用于修改传入参数after可以用于修改返回的值
- **示例:** - **示例:**
```js ```js
import { dataSourceService } from "@tmagic/editor"; import { dataSourceService } from '@tmagic/editor';
dataSourceService.usePlugin({ dataSourceService.usePlugin({
beforeAdd(config) { beforeAdd(config) {
console.log("添加前:", config); console.log('添加前:', config);
return [config]; return [config];
}, },
afterAdd(result, config) { afterAdd(result, config) {
console.log("添加后:", result); console.log('添加后:', result);
return result; return result;
}, },
}); });
@ -501,7 +535,7 @@ dataSourceService.usePlugin({
- **示例:** - **示例:**
```js ```js
import { dataSourceService } from "@tmagic/editor"; import { dataSourceService } from '@tmagic/editor';
dataSourceService.removeAllPlugins(); dataSourceService.removeAllPlugins();
``` ```

View File

@ -1,51 +1,40 @@
# editorService事件 # editorService事件
## root-change ## root-change
- **详情:** dsl跟节点发生变化[editorService.set('root', {})](./editorServiceMethods.md#set)后触发 - **详情:** 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](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
## select ## select
- **详情:** 选中组件,[editorService.select()](./editorServiceMethods.md#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](https://github.com/Tencent/tmagic-editor/blob/c143a5f7670ae61d80c1a2cfcc780cfb5259849d/packages/schema/src/index.ts#L99)) => void
## add ## add
- **详情:** 添加节点后触发,[editorService.add()](./editorServiceMethods.md#add)后触发 - **详情:** 选中组件,[editorService.add()](./editorServiceMethods.md#add)后触发
- **回调函数:** (node: [MNode](https://github.com/Tencent/tmagic-editor/blob/c143a5f7670ae61d80c1a2cfcc780cfb5259849d/packages/schema/src/index.ts#L99)[]) => void
- **事件回调函数:** (node: [MNode](https://github.com/Tencent/tmagic-editor/blob/cce8b63fc3618b5b811aa33c703de21c22be8a6a/packages/schema/src/index.ts#L210)[]) => void
## remove ## remove
- **详情:** 删除节点后触发,[editorService.remove()](./editorServiceMethods.md#remove)后触发 - **详情:** 选中组件,[editorService.remove()](./editorServiceMethods.md#remove)后触发
- **回调函数:** (node: [MNode](https://github.com/Tencent/tmagic-editor/blob/c143a5f7670ae61d80c1a2cfcc780cfb5259849d/packages/schema/src/index.ts#L99)[]) => void
- **事件回调函数:** (node: [MNode](https://github.com/Tencent/tmagic-editor/blob/cce8b63fc3618b5b811aa33c703de21c22be8a6a/packages/schema/src/index.ts#L210)[]) => void
## update ## update
- **详情:** 更新组件后触发[editorService.update()](./editorServiceMethods.md#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 - **回调函数:** (node: [MNode](https://github.com/Tencent/tmagic-editor/blob/c143a5f7670ae61d80c1a2cfcc780cfb5259849d/packages/schema/src/index.ts#L99)[]) => void
## move-layer
- **详情:** 移动节点层级后触发,[editorService.moveLayer()](./editorServiceMethods.md#movelayer)后触发
- **事件回调函数:** (offset: number | [LayerOffset](https://github.com/Tencent/tmagic-editor/blob/239b5d3efeae916a8cf3e3566d88063ecccc0553/packages/editor/src/type.ts)) => void
其中 `LayerOffset` 枚举值为 `'top'` / `'bottom'`
## drag-to
- **详情:** 拖拽节点到指定容器后触发,[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
## history-change ## history-change
- **详情:** 历史记录改变,[editorService.redo()editorService.undo()](./editorServiceMethods.html#undo)后触发
- **详情:** 历史记录改变,[editorService.redo()editorService.undo()](./editorServiceMethods.md#undo)后触发 - **回调函数:** (node: [MNode](https://github.com/Tencent/tmagic-editor/blob/c143a5f7670ae61d80c1a2cfcc780cfb5259849d/packages/schema/src/index.ts#L99)) => void
- **事件回调函数:** (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

View File

@ -3,9 +3,11 @@
## get ## get
- **参数:** - **参数:**
- `{'root' | 'page' | 'parent' | 'node' | 'highlightNode' | 'nodes' | 'modifiedNodeIds' | 'pageLength' | 'pageFragmentLength' | 'stage' | 'stageLoading' | 'disabledMultiSelect'} name`
- `{'root' | 'page' | 'parent' | 'node' | 'highlightNode' | 'nodes' | 'modifiedNodeIds' | 'pageLength' | 'stage'} name`
- **返回:** - **返回:**
- `{any} value` - `{any} value`
- **详情:** - **详情:**
@ -28,25 +30,18 @@
'pageLength': 所以页面个数 'pageLength': 所以页面个数
'pageFragmentLength': 页面片个数
'stage': [StageCore](../stage/coreMethods.md)实例 'stage': [StageCore](../stage/coreMethods.md)实例
'stageLoading': 画布是否加载中
'disabledMultiSelect': 是否禁用多选
- **示例:** - **示例:**
```js ```js
import { editorService } from "@tmagic/editor"; import { editorService } from '@tmagic/editor';
const node = editorService.get("node"); const node = editorService.get('node');
``` ```
## set ## set
- `{'root' | 'page' | 'parent' | 'node' | 'highlightNode' | 'nodes' | 'modifiedNodeIds' | 'pageLength' | 'stage'} name`
- `{'root' | 'page' | 'parent' | 'node' | 'highlightNode' | 'nodes' | 'modifiedNodeIds' | 'pageLength' | 'pageFragmentLength' | 'stage' | 'stageLoading' | 'disabledMultiSelect'} name`
- `{any} value` - `{any} value`
- **详情:** - **详情:**
@ -55,20 +50,23 @@ const node = editorService.get("node");
- **示例:** - **示例:**
```js ```js
import { editorService } from "@tmagic/editor"; import { editorService } from '@tmagic/editor';
const node = editorService.get("node"); const node = editorService.get('node');
editorService.set("node", { editorService.set('node', {
...node, ...node,
name: "new name", name: 'new name'
}); });
``` ```
## getNodeInfo ## getNodeInfo
- **参数:** - **参数:**
- `{number | string}` id 组件id - `{number | string}` id 组件id
- `{boolean}` raw 是否使用toRaw默认为true - `{boolean}` raw 是否使用toRaw默认为true
:::tip :::tip
@ -76,6 +74,7 @@ editorService.set("node", {
::: :::
- **返回:** - **返回:**
- {[EditorNodeInfo](https://github.com/Tencent/tmagic-editor/blob/c143a5f7670ae61d80c1a2cfcc780cfb5259849d/packages/editor/src/type.ts#L139-L143)} - {[EditorNodeInfo](https://github.com/Tencent/tmagic-editor/blob/c143a5f7670ae61d80c1a2cfcc780cfb5259849d/packages/editor/src/type.ts#L139-L143)}
- **详情:** - **详情:**
@ -85,9 +84,9 @@ editorService.set("node", {
- **示例:** - **示例:**
```js ```js
import { editorService } from "@tmagic/editor"; import { editorService } from '@tmagic/editor';
const info = editorService.getNodeInfo("text_123"); const info = editorService.getNodeInfo('text_123');
console.log(info.node); console.log(info.node);
console.log(info.parent); console.log(info.parent);
@ -97,11 +96,14 @@ console.log(info.page);
## getNodeById ## getNodeById
- **参数:** - **参数:**
- `{number | string}` id - `{number | string}` id
- `{boolean}` raw 是否使用toRaw默认为true - `{boolean}` raw 是否使用toRaw默认为true
- **返回:** - **返回:**
- {[MNode](https://github.com/Tencent/tmagic-editor/blob/cce8b63fc3618b5b811aa33c703de21c22be8a6a/packages/schema/src/index.ts#L210)} 组件节点配置
- {[MNode](https://github.com/Tencent/tmagic-editor/blob/c143a5f7670ae61d80c1a2cfcc780cfb5259849d/packages/schema/src/index.ts#L99)} 组件节点配置
- **详情:** - **详情:**
@ -110,9 +112,9 @@ console.log(info.page);
- **示例:** - **示例:**
```js ```js
import { editorService } from "@tmagic/editor"; import { editorService } from '@tmagic/editor';
const node = editorService.getNodeById("text_123"); const node = editorService.getNodeById('text_123');
console.log(node); console.log(node);
``` ```
@ -120,11 +122,14 @@ console.log(node);
## getParentById ## getParentById
- **参数:** - **参数:**
- `{number | string}` id - `{number | string}` id
- `{boolean}` raw 是否使用toRaw默认为true - `{boolean}` raw 是否使用toRaw默认为true
- **返回:** - **返回:**
- {[MNode](https://github.com/Tencent/tmagic-editor/blob/cce8b63fc3618b5b811aa33c703de21c22be8a6a/packages/schema/src/index.ts#L210)} 指点组件的父节点配置
- {[MNode](https://github.com/Tencent/tmagic-editor/blob/c143a5f7670ae61d80c1a2cfcc780cfb5259849d/packages/schema/src/index.ts#L99)} 指点组件的父节点配置
- **详情:** - **详情:**
@ -133,9 +138,9 @@ console.log(node);
- **示例:** - **示例:**
```js ```js
import { editorService } from "@tmagic/editor"; import { editorService } from '@tmagic/editor';
const parent = editorService.getParentById("text_123"); const parent = editorService.getParentById('text_123');
console.log(parent); console.log(parent);
``` ```
@ -145,10 +150,13 @@ console.log(parent);
- **[扩展支持](../../guide/editor-expand#行为扩展)** 是 - **[扩展支持](../../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](https://github.com/Tencent/tmagic-editor/blob/c143a5f7670ae61d80c1a2cfcc780cfb5259849d/packages/schema/src/index.ts#L99)} parent
- {[MNode](https://github.com/Tencent/tmagic-editor/blob/c143a5f7670ae61d80c1a2cfcc780cfb5259849d/packages/schema/src/index.ts#L99)} node 可选
- **返回:** - **返回:**
- {Promise<[Layout](https://github.com/Tencent/tmagic-editor/blob/c143a5f7670ae61d80c1a2cfcc780cfb5259849d/packages/editor/src/type.ts#L297-L302)>} 当前布局模式 - {Promise<[Layout](https://github.com/Tencent/tmagic-editor/blob/c143a5f7670ae61d80c1a2cfcc780cfb5259849d/packages/editor/src/type.ts#L297-L302)>} 当前布局模式
- **详情:** - **详情:**
@ -164,9 +172,9 @@ console.log(parent);
- **示例:** - **示例:**
```js ```js
import { editorService } from "@tmagic/editor"; import { editorService } from '@tmagic/editor';
const parent = editorService.getParentById("text_123"); const parent = editorService.getParentById('text_123');
editorService.getLayout(parent).then((layout) => { editorService.getLayout(parent).then((layout) => {
console.log(parent); console.log(parent);
}); });
@ -177,10 +185,12 @@ editorService.getLayout(parent).then((layout) => {
- **[扩展支持](../../guide/editor-expand#行为扩展)** 是 - **[扩展支持](../../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](https://github.com/Tencent/tmagic-editor/blob/c143a5f7670ae61d80c1a2cfcc780cfb5259849d/packages/schema/src/index.ts#L99)} config 需要选中的节点或节点ID
- **返回:** - **返回:**
- {Promise<[MNode](https://github.com/Tencent/tmagic-editor/blob/cce8b63fc3618b5b811aa33c703de21c22be8a6a/packages/schema/src/index.ts#L210)>} 当前选中的节点配置
- {Promise<[MNode](https://github.com/Tencent/tmagic-editor/blob/c143a5f7670ae61d80c1a2cfcc780cfb5259849d/packages/schema/src/index.ts#L99)>} 当前选中的节点配置
- **详情:** - **详情:**
@ -193,18 +203,20 @@ editorService.getLayout(parent).then((layout) => {
- **示例:** - **示例:**
```js ```js
import { editorService } from "@tmagic/editor"; import { editorService } from '@tmagic/editor';
editorService.select("text_123"); editorService.select('text_123');
editorService.get("stage")?.select("text_123"); editorService.get('stage')?.select('text_123');
``` ```
## multiSelect ## multiSelect
- **参数:** - **参数:**
- {(number | string)[]} ids 需要选中的节点ID集合 - {(number | string)[]} ids 需要选中的节点ID集合
- **返回:** - **返回:**
- `{Promise<void>}` - `{Promise<void>}`
- **详情:** - **详情:**
@ -218,47 +230,22 @@ editorService.get("stage")?.select("text_123");
- **示例:** - **示例:**
```js ```js
import { editorService } from "@tmagic/editor"; import { editorService } from '@tmagic/editor';
editorService.multiSelect(["text_123", "button_123"]); editorService.multiSelect(['text_123', 'button_123']);
editorService.get("stage")?.multiSelect(["text_123", "button_123"]); 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>} 选中后的节点配置
- **详情:**
选中当前节点同层级(同一父节点)的下一个节点,已经是最后一个时回到第一个
## selectNextPage
- **返回:**
- {Promise<[MNode](https://github.com/Tencent/tmagic-editor/blob/cce8b63fc3618b5b811aa33c703de21c22be8a6a/packages/schema/src/index.ts#L210)>} 选中后的页面配置
- **详情:**
选中下一页,已经是最后一页时回到第一页
## selectRoot
- **返回:**
- `{void}`
- **详情:**
选中根节点root同时清空当前选中的页面、父节点、画布及高亮节点
## highlight ## highlight
- **[扩展支持](../../guide/editor-expand#行为扩展)** 是 - **[扩展支持](../../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](https://github.com/Tencent/tmagic-editor/blob/c143a5f7670ae61d80c1a2cfcc780cfb5259849d/packages/schema/src/index.ts#L99)} config 需要高亮的节点或节点ID
- **返回:** - **返回:**
- `{Promise<void>}` - `{Promise<void>}`
- **详情:** - **详情:**
@ -268,9 +255,9 @@ editorService.get("stage")?.multiSelect(["text_123", "button_123"]);
- **示例:** - **示例:**
```js ```js
import { editorService } from "@tmagic/editor"; import { editorService } from '@tmagic/editor';
editorService.highlight("text_123"); editorService.highlight('text_123');
``` ```
## doAdd ## doAdd
@ -278,12 +265,14 @@ editorService.highlight("text_123");
- **[扩展支持](../../guide/editor-expand#行为扩展)** 是 - **[扩展支持](../../guide/editor-expand#行为扩展)** 是
- **参数:** - **参数:**
- {[MNode](https://github.com/Tencent/tmagic-editor/blob/cce8b63fc3618b5b811aa33c703de21c22be8a6a/packages/schema/src/index.ts#L210)} node 新组件节点
- {[MContainer](https://github.com/Tencent/tmagic-editor/blob/cce8b63fc3618b5b811aa33c703de21c22be8a6a/packages/schema/src/index.ts#L139)} parent 指定的容器节点 - {[MNode](https://github.com/Tencent/tmagic-editor/blob/c143a5f7670ae61d80c1a2cfcc780cfb5259849d/packages/schema/src/index.ts#L99)} node 新组件节点
- {[MContainer](https://github.com/Tencent/tmagic-editor/blob/c143a5f7670ae61d80c1a2cfcc780cfb5259849d/packages/schema/src/index.ts#L54-L59)} parent 指定的容器节点
- **返回:** - **返回:**
- {Promise<[MNode](https://github.com/Tencent/tmagic-editor/blob/cce8b63fc3618b5b811aa33c703de21c22be8a6a/packages/schema/src/index.ts#L210)>} 新增的组件
- {Promise<[MNode](https://github.com/Tencent/tmagic-editor/blob/c143a5f7670ae61d80c1a2cfcc780cfb5259849d/packages/schema/src/index.ts#L99)>} 新增的组件
- **详情:** - **详情:**
@ -294,12 +283,14 @@ editorService.highlight("text_123");
- **[扩展支持](../../guide/editor-expand#行为扩展)** 是 - **[扩展支持](../../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 新组件节点配置或多个节点集合
- {[MContainer](https://github.com/Tencent/tmagic-editor/blob/cce8b63fc3618b5b811aa33c703de21c22be8a6a/packages/schema/src/index.ts#L139)} parent 指定的容器组件节点配置,如果不设置,默认为当前选中的组件的父节点 - {[MNode](https://github.com/Tencent/tmagic-editor/blob/c143a5f7670ae61d80c1a2cfcc780cfb5259849d/packages/schema/src/index.ts#L99) | [MNode](https://github.com/Tencent/tmagic-editor/blob/c143a5f7670ae61d80c1a2cfcc780cfb5259849d/packages/schema/src/index.ts#L99)[]} node 新组件节点配置或多个节点集合
- {[MContainer](https://github.com/Tencent/tmagic-editor/blob/c143a5f7670ae61d80c1a2cfcc780cfb5259849d/packages/schema/src/index.ts#L54-L59)} 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](https://github.com/Tencent/tmagic-editor/blob/c143a5f7670ae61d80c1a2cfcc780cfb5259849d/packages/schema/src/index.ts#L99) | [MNode](https://github.com/Tencent/tmagic-editor/blob/c143a5f7670ae61d80c1a2cfcc780cfb5259849d/packages/schema/src/index.ts#L99)[]>} 新增的组件或组件集合
- **详情:** - **详情:**
@ -316,24 +307,30 @@ editorService.highlight("text_123");
## doRemove ## doRemove
- **[扩展支持](../../guide/editor-expand#行为扩展)** 是 - **[扩展支持](../../guide/editor-expand#行为扩展)** 是
- **参数:** - **参数:**
- {[MNode](https://github.com/Tencent/tmagic-editor/blob/cce8b63fc3618b5b811aa33c703de21c22be8a6a/packages/schema/src/index.ts#L210)} node 要删除的节点
- {[MNode](https://github.com/Tencent/tmagic-editor/blob/c143a5f7670ae61d80c1a2cfcc780cfb5259849d/packages/schema/src/index.ts#L99)} node 要删除的节点
- **返回:** - **返回:**
- `{Promise<void>}` - `{Promise<void>}`
- **详情:** - **详情:**
删除指定的组件或者页面 删除指定的组件或者页面
## remove ## remove
- **[扩展支持](../../guide/editor-expand#行为扩展)** 是 - **[扩展支持](../../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](https://github.com/Tencent/tmagic-editor/blob/c143a5f7670ae61d80c1a2cfcc780cfb5259849d/packages/schema/src/index.ts#L99) | [MNode](https://github.com/Tencent/tmagic-editor/blob/c143a5f7670ae61d80c1a2cfcc780cfb5259849d/packages/schema/src/index.ts#L99)[])} node 要删除的节点或节点集合
- **返回:** - **返回:**
- `{Promise<void>}` - `{Promise<void>}`
- **详情:** - **详情:**
@ -353,13 +350,12 @@ editorService.highlight("text_123");
- **[扩展支持](../../guide/editor-expand#行为扩展)** 是 - **[扩展支持](../../guide/editor-expand#行为扩展)** 是
- **参数:** - **参数:**
- {[MNode](https://github.com/Tencent/tmagic-editor/blob/cce8b63fc3618b5b811aa33c703de21c22be8a6a/packages/schema/src/index.ts#L210)} config 新的节点
- `{Object}` data 可选配置 - {[MNode](https://github.com/Tencent/tmagic-editor/blob/c143a5f7670ae61d80c1a2cfcc780cfb5259849d/packages/schema/src/index.ts#L99) | [MNode](https://github.com/Tencent/tmagic-editor/blob/c143a5f7670ae61d80c1a2cfcc780cfb5259849d/packages/schema/src/index.ts#L99))} node 新的节点
- {[ChangeRecord](https://github.com/Tencent/tmagic-editor/blob/cce8b63fc3618b5b811aa33c703de21c22be8a6a/packages/form/src/schema.ts#L8)[]} changeRecords 变更记录
- `{boolean}` selectedAfterUpdate 更新后是否将新节点同步到当前选中节点列表
- **返回:** - **返回:**
- `{Promise<{ newNode: MNode; oldNode: MNode; changeRecords?: ChangeRecord[] }>}` 更新前后的节点信息
- {Promise<[MNode](https://github.com/Tencent/tmagic-editor/blob/c143a5f7670ae61d80c1a2cfcc780cfb5259849d/packages/schema/src/index.ts#L99) | [MNode](https://github.com/Tencent/tmagic-editor/blob/c143a5f7670ae61d80c1a2cfcc780cfb5259849d/packages/schema/src/index.ts#L99)>} 新的节点
- **详情:** - **详情:**
@ -374,13 +370,13 @@ editorService.highlight("text_123");
- **[扩展支持](../../guide/editor-expand#行为扩展)** 是 - **[扩展支持](../../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 新的节点或节点集合
- `{Object}` data 可选配置 - {Promise<[MNode](https://github.com/Tencent/tmagic-editor/blob/c143a5f7670ae61d80c1a2cfcc780cfb5259849d/packages/schema/src/index.ts#L99) | [MNode](https://github.com/Tencent/tmagic-editor/blob/c143a5f7670ae61d80c1a2cfcc780cfb5259849d/packages/schema/src/index.ts#L99)[]>} node 新的节点或节点集合
- {[ChangeRecord](https://github.com/Tencent/tmagic-editor/blob/239b5d3efeae916a8cf3e3566d88063ecccc0553/packages/form/src/schema.ts#L27-L39)[]} 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](https://github.com/Tencent/tmagic-editor/blob/c143a5f7670ae61d80c1a2cfcc780cfb5259849d/packages/schema/src/index.ts#L99) | [MNode](https://github.com/Tencent/tmagic-editor/blob/c143a5f7670ae61d80c1a2cfcc780cfb5259849d/packages/schema/src/index.ts#L99)[]>} 新的节点或节点集合
- **详情:** - **详情:**
@ -399,10 +395,12 @@ editorService.highlight("text_123");
- **[扩展支持](../../guide/editor-expand#行为扩展)** 是 - **[扩展支持](../../guide/editor-expand#行为扩展)** 是
- **参数:** - **参数:**
- `{ string | number }` id1 - `{ string | number }` id1
- `{ string | number }` id2 - `{ string | number }` id2
- **返回:** - **返回:**
- `{Promise<void>}` - `{Promise<void>}`
- **详情:** - **详情:**
@ -416,37 +414,29 @@ editorService.highlight("text_123");
- **[扩展支持](../../guide/editor-expand#行为扩展)** 是 - **[扩展支持](../../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 需要复制的节点或节点集合
- {Promise<[MNode](https://github.com/Tencent/tmagic-editor/blob/c143a5f7670ae61d80c1a2cfcc780cfb5259849d/packages/schema/src/index.ts#L99) | [MNode](https://github.com/Tencent/tmagic-editor/blob/c143a5f7670ae61d80c1a2cfcc780cfb5259849d/packages/schema/src/index.ts#L99)[]>} node 需要复制的节点或节点集合
- **返回:** - **返回:**
- `{void}`
- `{Promise<void>}`
- **详情:** - **详情:**
复制组件节点或节点集合 复制组件节点或节点集合
通过[storageService.setItem](./storageServiceMethods.md#setitem),将组件节点配置存储到localStorage中 通过[storageService.setItem](./storageServiceMethods.md#setitem),将组将节点配置转化成string然后存储到localStorage中
## 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 需要复制的节点或节点集合
- `{TargetOptions}` collectorOptions 可选的依赖收集器配置
- **返回:**
- `{void}`
- **详情:**
复制节点时会同时收集组件关联的依赖(如 dataSource、codeBlock 等),并一起存储到 localStorage 中,便于粘贴时一起带入
## doPaste ## doPaste
- **[扩展支持](../../guide/editor-expand#行为扩展)** 是 - **[扩展支持](../../guide/editor-expand#行为扩展)** 是
- ## **参数:** - **参数:**
-
- **返回:** - **返回:**
- `{Promise<void>}` - `{Promise<void>}`
- **详情:** - **详情:**
@ -458,26 +448,31 @@ editorService.highlight("text_123");
- **[扩展支持](../../guide/editor-expand#行为扩展)** 是 - **[扩展支持](../../guide/editor-expand#行为扩展)** 是
- **参数:** - **参数:**
- {[PastePosition](https://github.com/Tencent/tmagic-editor/blob/239b5d3efeae916a8cf3e3566d88063ecccc0553/packages/editor/src/type.ts#L152-L163)} position 粘贴的坐标 - {[PastePosition](https://github.com/Tencent/tmagic-editor/blob/239b5d3efeae916a8cf3e3566d88063ecccc0553/packages/editor/src/type.ts#L152-L163)} position 粘贴的坐标
- **返回:** - **返回:**
- {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](https://github.com/Tencent/tmagic-editor/blob/c143a5f7670ae61d80c1a2cfcc780cfb5259849d/packages/schema/src/index.ts#L99) | [MNode](https://github.com/Tencent/tmagic-editor/blob/c143a5f7670ae61d80c1a2cfcc780cfb5259849d/packages/schema/src/index.ts#L99)[]>} 添加后的组件节点配置
- **详情:** - **详情:**
粘贴组件节点或节点集合 粘贴组件节点或节点集合
通过[storageService.getItem](./storageServiceMethods.md#getItem),从localStorage中获取节点然后添加到当前容器中 通过[storageService.getItem](./storageServiceMethods.md#setitem),从localStorage中获取节点然后添加到当前容器中
## doAlignCenter ## doAlignCenter
- **[扩展支持](../../guide/editor-expand#行为扩展)** 是 - **[扩展支持](../../guide/editor-expand#行为扩展)** 是
- **参数:** - **参数:**
- {[MNode](https://github.com/Tencent/tmagic-editor/blob/cce8b63fc3618b5b811aa33c703de21c22be8a6a/packages/schema/src/index.ts#L210)} config 需要居中的组件
- {[MNode](https://github.com/Tencent/tmagic-editor/blob/c143a5f7670ae61d80c1a2cfcc780cfb5259849d/packages/schema/src/index.ts#L99)} config 需要居中的组件
- **返回:** - **返回:**
- {Promise<[MNode](https://github.com/Tencent/tmagic-editor/blob/cce8b63fc3618b5b811aa33c703de21c22be8a6a/packages/schema/src/index.ts#L210)>}
- {Promise<[MNode](https://github.com/Tencent/tmagic-editor/blob/c143a5f7670ae61d80c1a2cfcc780cfb5259849d/packages/schema/src/index.ts#L99)>}
- **详情:** - **详情:**
@ -492,10 +487,13 @@ editorService.highlight("text_123");
- **[扩展支持](../../guide/editor-expand#行为扩展)** 是 - **[扩展支持](../../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 需要居中的组件或者组件集合
- {Promise<[MNode](https://github.com/Tencent/tmagic-editor/blob/c143a5f7670ae61d80c1a2cfcc780cfb5259849d/packages/schema/src/index.ts#L99) | [MNode](https://github.com/Tencent/tmagic-editor/blob/c143a5f7670ae61d80c1a2cfcc780cfb5259849d/packages/schema/src/index.ts#L99)[]>} 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](https://github.com/Tencent/tmagic-editor/blob/c143a5f7670ae61d80c1a2cfcc780cfb5259849d/packages/schema/src/index.ts#L99) | [MNode](https://github.com/Tencent/tmagic-editor/blob/c143a5f7670ae61d80c1a2cfcc780cfb5259849d/packages/schema/src/index.ts#L99)[]>}
- **详情:** - **详情:**
@ -506,15 +504,16 @@ editorService.highlight("text_123");
alignCenter可以支持一次水平居中多个组件alignCenter是通过调用[doAlignCenter](#doaligncentere)来获取到已设置好水平居中的位置信息的节点然后调用update更新。 alignCenter可以支持一次水平居中多个组件alignCenter是通过调用[doAlignCenter](#doaligncentere)来获取到已设置好水平居中的位置信息的节点然后调用update更新。
::: :::
## moveLayer ## moveLayer
- **[扩展支持](../../guide/editor-expand#行为扩展)** 是 - **[扩展支持](../../guide/editor-expand#行为扩展)** 是
- **参数:** - **参数:**
- `{number | 'top' | 'bottom'}` offset - `{number | 'top' | 'bottom'}` offset
- **返回:** - **返回:**
- `{Promise<void>}` - `{Promise<void>}`
- **详情:** - **详情:**
@ -523,40 +522,30 @@ alignCenter可以支持一次水平居中多个组件alignCenter是通过调
用于实现上移一层、下移一层、置顶、置底 用于实现上移一层、下移一层、置顶、置底
## moveToContainer ## moveToContainer
- **[扩展支持](../../guide/editor-expand#行为扩展)** 是 - **[扩展支持](../../guide/editor-expand#行为扩展)** 是
- **参数:** - **参数:**
- {[MNode](https://github.com/Tencent/tmagic-editor/blob/cce8b63fc3618b5b811aa33c703de21c22be8a6a/packages/schema/src/index.ts#L210)} config 需要移动的节点
- {[MNode](https://github.com/Tencent/tmagic-editor/blob/c143a5f7670ae61d80c1a2cfcc780cfb5259849d/packages/schema/src/index.ts#L99)} config 需要移动的节点
- `{string | number}` targetId 容器ID - `{string | number}` targetId 容器ID
- **返回:** - **返回:**
- Promise<[MNode](https://github.com/Tencent/tmagic-editor/blob/cce8b63fc3618b5b811aa33c703de21c22be8a6a/packages/schema/src/index.ts#L210) | undefined>
- Promise<[MNode](https://github.com/Tencent/tmagic-editor/blob/c143a5f7670ae61d80c1a2cfcc780cfb5259849d/packages/schema/src/index.ts#L99) | undefined>
- **详情:** - **详情:**
移动到指定容器中 移动到指定容器中
## 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 目标父容器
- `{number}` targetIndex 目标位置索引
- **返回:**
- `{Promise<void>}`
- **详情:**
将节点(支持多选)拖拽到目标容器的指定位置,会自动处理跨容器布局切换并记录历史
## undo ## undo
- **[扩展支持](../../guide/editor-expand#行为扩展)** 是 - **[扩展支持](../../guide/editor-expand#行为扩展)** 是
- **返回:** - **返回:**
- {Promise<[StepValue](https://github.com/Tencent/tmagic-editor/blob/239b5d3efeae916a8cf3e3566d88063ecccc0553/packages/editor/src/type.ts#L400-L404) | null>} - {Promise<[StepValue](https://github.com/Tencent/tmagic-editor/blob/239b5d3efeae916a8cf3e3566d88063ecccc0553/packages/editor/src/type.ts#L400-L404) | null>}
- **详情:** - **详情:**
@ -568,6 +557,7 @@ alignCenter可以支持一次水平居中多个组件alignCenter是通过调
- **[扩展支持](../../guide/editor-expand#行为扩展)** 是 - **[扩展支持](../../guide/editor-expand#行为扩展)** 是
- **返回:** - **返回:**
- {Promise<[StepValue](https://github.com/Tencent/tmagic-editor/blob/239b5d3efeae916a8cf3e3566d88063ecccc0553/packages/editor/src/type.ts#L400-L404) | null>} - {Promise<[StepValue](https://github.com/Tencent/tmagic-editor/blob/239b5d3efeae916a8cf3e3566d88063ecccc0553/packages/editor/src/type.ts#L400-L404) | null>}
- **详情:** - **详情:**
@ -579,10 +569,12 @@ alignCenter可以支持一次水平居中多个组件alignCenter是通过调
- **[扩展支持](../../guide/editor-expand#行为扩展)** 是 - **[扩展支持](../../guide/editor-expand#行为扩展)** 是
- **参数:** - **参数:**
- `{number}` left - `{number}` left
- `{number}` top - `{number}` top
- **返回:** - **返回:**
- `{Promise<void>}` - `{Promise<void>}`
- **详情:** - **详情:**
@ -616,16 +608,16 @@ alignCenter可以支持一次水平居中多个组件alignCenter是通过调
- **示例:** - **示例:**
```js ```js
import { editorService, getAddParent } from "@tmagic/editor"; import { editorService, getAddParent } from '@tmagic/editor';
import { ElMessageBox } from "element-plus"; import { ElMessageBox } from 'element-plus';
editorService.use({ editorService.use({
// 添加是否删除节点确认提示 // 添加是否删除节点确认提示
async remove(node, next) { async remove(node, next) {
await ElMessageBox.confirm("是否删除", "提示", { await ElMessageBox.confirm('是否删除', '提示', {
confirmButtonText: "确定", confirmButtonText: '确定',
cancelButtonText: "取消", cancelButtonText: '取消',
type: "warning", type: 'warning',
}); });
next(); next();
@ -634,7 +626,7 @@ editorService.use({
add(node, next) { add(node, next) {
// text组件只能添加到container中 // text组件只能添加到container中
const parentNode = getAddParent(node); const parentNode = getAddParent(node);
if (node.type === "text" && parentNode?.type !== "container") { if (node.type === 'text' && parentNode?.type !== 'container') {
return; return;
} }
@ -654,7 +646,7 @@ editorService.use({
- **示例:** - **示例:**
```js ```js
import { editorService } from "@tmagic/editor"; import { editorService } from '@tmagic/editor';
editorService.usePlugin({ editorService.usePlugin({
// 添加组件的时候设置一个添加时间 // 添加组件的时候设置一个添加时间

View File

@ -4,30 +4,4 @@
- **详情:** 编辑器右侧组件属性配置加载完毕后触发 - **详情:** 编辑器右侧组件属性配置加载完毕后触发
- **事件回调函数:** (instance: InstanceType<typeof [FormPanel](https://github.com/Tencent/tmagic-editor/blob/master/packages/editor/src/layouts/props-panel/FormPanel.vue)>) => void - **回调函数:** (formState: [FomState](https://github.com/Tencent/tmagic-editor/blob/239b5d3efeae916a8cf3e3566d88063ecccc0553/packages/form/src/schema.ts#L27-L39)) => void
## props-panel-unmounted
- **详情:** 编辑器右侧组件属性配置卸载时触发
- **事件回调函数:** () => void
## update:modelValue
- **详情:** 当 [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
## props-form-error
- **详情:** 属性表单校验失败时触发
- **事件回调函数:** (e: any) => void
## props-submit-error
- **详情:** 属性表单提交失败时触发
- **事件回调函数:** (e: any) => void
注意:`Editor.vue` 中该 emit 的类型签名为 `[e: any]`,运行时通常为 `Error` 实例(来自 `submitForm` 抛错),但也可能是 element-plus 校验返回的 `invalidFields` 结构,业务侧消费时建议先做类型判断

View File

@ -1,5 +1,48 @@
# eventsService方法 # eventsService方法
## init
- **参数:**
- {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)[] }>} eventMethodList 事件方法列表配置
- **返回:**
- `{void}`
- **详情:**
初始化事件服务,设置所有组件的事件和方法列表
:::tip
该方法通常由编辑器内部调用,开发者可以通过 [m-editor 的 eventMethodList prop](./props.md#eventmethodlist) 来配置
:::
- **示例:**
```js
import { eventsService } from '@tmagic/editor';
eventsService.init({
page: {
events: [
{ label: '页面加载', value: 'load' },
{ label: '页面卸载', value: 'unload' },
],
methods: [
{ label: '刷新', value: 'refresh' },
{ label: '返回', value: 'back' },
],
},
button: {
events: [
{ label: '点击', value: 'click' },
],
methods: [],
},
});
```
## setEvents ## setEvents
- **参数:** - **参数:**
@ -142,7 +185,6 @@ eventsService.setMethod('video', [
- **参数:** - **参数:**
- `{string}` type 组件类型 - `{string}` type 组件类型
- `{string | number}` _targetId 目标节点id保留参数便于扩展时按节点定制
- **返回:** - **返回:**
@ -157,7 +199,7 @@ eventsService.setMethod('video', [
```js ```js
import { eventsService } from '@tmagic/editor'; import { eventsService } from '@tmagic/editor';
const methods = eventsService.getMethod('video', 'video_123'); const methods = eventsService.getMethod('video');
console.log(methods); // [{ label: '播放', value: 'play' }, ...] console.log(methods); // [{ label: '播放', value: 'play' }, ...]
``` ```

View File

@ -4,14 +4,11 @@
- **详情:** 页面切换 - **详情:** 页面切换
- **事件回调函数:** (undoRedo: [UndoRedo](https://github.com/Tencent/tmagic-editor/blob/239b5d3efeae916a8cf3e3566d88063ecccc0553/packages/editor/src/utils/undo-redo.ts)) => void - **回调函数:** (undoRedo: [undoRedo](https://github.com/Tencent/tmagic-editor/blob/239b5d3efeae916a8cf3e3566d88063ecccc0553/packages/editor/src/utils/undo-redo.ts)) => void
## change ## change
- **详情:** 历史记录发生变化 - **详情:** 历史记录发生变化
- **事件回调函数:** (state: [StepValue](https://github.com/Tencent/tmagic-editor/blob/239b5d3efeae916a8cf3e3566d88063ecccc0553/packages/editor/src/type.ts#L400-L404) | null) => void - **回调函数:** (state: [StepValue](https://github.com/Tencent/tmagic-editor/blob/239b5d3efeae916a8cf3e3566d88063ecccc0553/packages/editor/src/type.ts#L400-L404)) => void
:::tip
当游标处于历史栈边界(已经无法继续撤销或重做)时,`UndoRedo.undo()` / `redo()` 返回 `null`,对应 `change` 回调收到的 `state``null`
:::

View File

@ -6,33 +6,29 @@
重置记录 重置记录
## resetPage
- **详情:**
重置当前页面的历史记录状态清空当前页面id重置 canRedo/canUndo
## resetState
- **详情:**
重置历史记录全部内部状态(清空 pageId、pageSteps、canRedo、canUndo
## changePage ## 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](https://github.com/Tencent/tmagic-editor/blob/c143a5f7670ae61d80c1a2cfcc780cfb5259849d/packages/schema/src/index.ts#L61)} page
- **详情:** - **详情:**
按页面切换历史堆栈 按页面切换历史堆栈
## empty
- **详情:**
重置记录,同[reset](#reset)
## push ## push
- **参数:** - **参数:**
- {[StepValue](https://github.com/Tencent/tmagic-editor/blob/239b5d3efeae916a8cf3e3566d88063ecccc0553/packages/editor/src/type.ts#L400-L404)} state - {[StepValue](https://github.com/Tencent/tmagic-editor/blob/239b5d3efeae916a8cf3e3566d88063ecccc0553/packages/editor/src/type.ts#L400-L404)} state
- **返回:** - **返回:**
- {[StepValue](https://github.com/Tencent/tmagic-editor/blob/239b5d3efeae916a8cf3e3566d88063ecccc0553/packages/editor/src/type.ts#L400-L404) | null} - {[StepValue](https://github.com/Tencent/tmagic-editor/blob/239b5d3efeae916a8cf3e3566d88063ecccc0553/packages/editor/src/type.ts#L400-L404) | null}
- **详情:** - **详情:**
@ -42,7 +38,8 @@
## undo ## undo
- **返回:** - **返回:**
- {[StepValue](https://github.com/Tencent/tmagic-editor/blob/cce8b63fc3618b5b811aa33c703de21c22be8a6a/packages/editor/src/type.ts#L554-L573) | null}
- {Promise<[StepValue](https://github.com/Tencent/tmagic-editor/blob/239b5d3efeae916a8cf3e3566d88063ecccc0553/packages/editor/src/type.ts#L400-L404) | null>}
- **详情:** - **详情:**
@ -51,7 +48,8 @@
## redo ## redo
- **返回:** - **返回:**
- {[StepValue](https://github.com/Tencent/tmagic-editor/blob/cce8b63fc3618b5b811aa33c703de21c22be8a6a/packages/editor/src/type.ts#L554-L573) | null}
- {Promise<[StepValue](https://github.com/Tencent/tmagic-editor/blob/239b5d3efeae916a8cf3e3566d88063ecccc0553/packages/editor/src/type.ts#L400-L404) | null>}
- **详情:** - **详情:**

View File

@ -547,7 +547,7 @@ const propsValues = {
组件属性配置中事件tab中的事件名与动作的下拉选项列表 组件属性配置中事件tab中的事件名与动作的下拉选项列表
:::tip :::tip
该属性最终会设置到[eventsService](./eventsServiceMethods.md)中,所以也可直接调用[eventsService.setEvents()](./eventsServiceMethods.md#setEvents)与[eventsService.setMethods()](./eventsServiceMethods.md#setMethods)方法来配置 该属性最终会设置到[eventsService](./eventsServiceMethods.md)中,所以也可直接调用[eventsService.setEvents()](./eventsServiceMethods.md#setEvents)与[eventsService.setMethods()](./eventsServiceMethods#setMethods)方法来配置
::: :::
- **默认值:** `{}` - **默认值:** `{}`
@ -1171,46 +1171,6 @@ const customContentMenu = (menus, { node }) => {
</script> </script>
``` ```
## layerNodeIsExpandable
- **详情:**
用于自定义判断"已选组件"面板中组件树节点是否可展开(即是否要展示为拥有子节点的形态)
该函数返回 `true` 时,节点会显示展开图标,并在展开后渲染子节点容器;返回 `false` 时,展开图标显示为透明占位,且不渲染子节点容器
默认行为:当节点的 `items` 中至少存在一个 `visible` 状态为 `true` 的子节点时认为可展开(被搜索过滤隐藏的子节点不会让父节点显示为可展开)
- **默认值:** `defaultIsExpandable`
- **类型:** `(data: TreeNodeData, nodeStatusMap: Map<Id, LayerNodeStatus>) => boolean`
- **示例:**
```html
<template>
<m-editor :layer-node-is-expandable="layerNodeIsExpandable"></m-editor>
</template>
<script setup>
import { defaultIsExpandable } from '@tmagic/editor';
// 即使没有可见子节点,特定类型的容器节点也保持展开图标可见
const layerNodeIsExpandable = (data, nodeStatusMap) => {
if (data.type === 'my-special-container') {
return true;
}
return defaultIsExpandable(data, nodeStatusMap);
};
</script>
```
::: tip
该函数仅作用于"已选组件"面板的组件树节点,不影响代码块、数据源等其它面板内的树。
第三方业务可从 `@tmagic/editor` 直接导入 `defaultIsExpandable` 复用默认逻辑作为兜底。
:::
## extendFormState ## extendFormState
- **详情:** - **详情:**

View File

@ -4,4 +4,4 @@
- **详情:** [propsService.setPropsConfigs()](./propsServiceMethods.md#setPropsConfigs)后触发 - **详情:** [propsService.setPropsConfigs()](./propsServiceMethods.md#setPropsConfigs)后触发
- **事件回调函数:** () => void - **回调函数:** () => void

View File

@ -1,57 +1,16 @@
# propsService方法 # propsService方法
## setDisabledDataSource
- **参数:**
- `{boolean}` disabled 是否禁用数据源
- **返回:**
- `{void}`
- **详情:**
设置是否禁用数据源(内部状态),影响 [fillConfig](#fillconfig) 注入的公共配置
## setDisabledCodeBlock
- **参数:**
- `{boolean}` disabled 是否禁用代码块
- **返回:**
- `{void}`
- **详情:**
设置是否禁用代码块(内部状态),影响 [fillConfig](#fillconfig) 注入的公共配置
## getDisabledDataSource
- **返回:**
- `{boolean}` 是否禁用数据源
- **详情:**
获取是否禁用数据源的内部状态
## getDisabledCodeBlock
- **返回:**
- `{boolean}` 是否禁用代码块
- **详情:**
获取是否禁用代码块的内部状态
## fillConfig ## fillConfig
- **[扩展支持](../../guide/editor-expand#行为扩展)** 是 - **[扩展支持](../../guide/editor-expand#行为扩展)** 是
- **参数:** - **参数:**
- {[FormConfig](https://github.com/Tencent/tmagic-editor/blob/cce8b63fc3618b5b811aa33c703de21c22be8a6a/packages/form-schema/src/base.ts#L864)} config
- `{string}` labelWidth 表单项 label 宽度,默认 `'80px'` - {[FormConfig](https://github.com/Tencent/tmagic-editor/blob/c143a5f7670ae61d80c1a2cfcc780cfb5259849d/packages/form/src/schema.ts#L706)} config
- **返回:** - **返回:**
- {Promise<[FormConfig](https://github.com/Tencent/tmagic-editor/blob/cce8b63fc3618b5b811aa33c703de21c22be8a6a/packages/form-schema/src/base.ts#L864)>}
- {Promise<[FormConfig](https://github.com/Tencent/tmagic-editor/blob/c143a5f7670ae61d80c1a2cfcc780cfb5259849d/packages/form/src/schema.ts#L706)>}
- **详情:** - **详情:**
@ -60,9 +19,11 @@
## setPropsConfigs ## 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](https://github.com/Tencent/tmagic-editor/blob/c143a5f7670ae61d80c1a2cfcc780cfb5259849d/packages/form/src/schema.ts#L706)>} configs
- **返回:** - **返回:**
- `{void}` - `{void}`
- **详情:** - **详情:**
@ -74,10 +35,12 @@
- **[扩展支持](../../guide/editor-expand#行为扩展)** 是 - **[扩展支持](../../guide/editor-expand#行为扩展)** 是
- **参数:** - **参数:**
- `{string}` type 组件类型 - `{string}` type 组件类型
- {[FormConfig](https://github.com/Tencent/tmagic-editor/blob/cce8b63fc3618b5b811aa33c703de21c22be8a6a/packages/form-schema/src/base.ts#L864)} config 属性表单配置DSL - {[FormConfig](https://github.com/Tencent/tmagic-editor/blob/c143a5f7670ae61d80c1a2cfcc780cfb5259849d/packages/form/src/schema.ts#L706)} config 属性表单配置DSL
- **返回:** - **返回:**
- `{Promise<void>}` - `{Promise<void>}`
- **详情:** - **详情:**
@ -89,12 +52,12 @@
- **[扩展支持](../../guide/editor-expand#行为扩展)** 是 - **[扩展支持](../../guide/editor-expand#行为扩展)** 是
- **参数:** - **参数:**
- `{string}` type 组件类型 - `{string}` type 组件类型
- `{Object}` data 可选参数
- {[MNode](https://github.com/Tencent/tmagic-editor/blob/cce8b63fc3618b5b811aa33c703de21c22be8a6a/packages/schema/src/index.ts#L210) | null} node 当前节点
- **返回:** - **返回:**
- {Promise<[FormConfig](https://github.com/Tencent/tmagic-editor/blob/cce8b63fc3618b5b811aa33c703de21c22be8a6a/packages/form-schema/src/base.ts#L864)>}
- {Promise<[FormConfig](https://github.com/Tencent/tmagic-editor/blob/c143a5f7670ae61d80c1a2cfcc780cfb5259849d/packages/form/src/schema.ts#L706)>}
- **详情:** - **详情:**
@ -103,9 +66,11 @@
## setPropsValues ## setPropsValues
- **参数:** - **参数:**
- {Record<string, [MNode](https://github.com/Tencent/tmagic-editor/blob/cce8b63fc3618b5b811aa33c703de21c22be8a6a/packages/schema/src/index.ts#L210)>} values
- {Record<string, [MNode](https://github.com/Tencent/tmagic-editor/blob/c143a5f7670ae61d80c1a2cfcc780cfb5259849d/packages/schema/src/index.ts#L99)>} values
- **返回:** - **返回:**
- `{void}` - `{void}`
- **详情:** - **详情:**
@ -115,55 +80,64 @@
## setPropsValue ## setPropsValue
- **参数:** - **参数:**
- `{string}` type 组件类型 - `{string}` type 组件类型
- {[MNode](https://github.com/Tencent/tmagic-editor/blob/cce8b63fc3618b5b811aa33c703de21c22be8a6a/packages/schema/src/index.ts#L210)} value 组件初始值 - {[MNode](https://github.com/Tencent/tmagic-editor/blob/c143a5f7670ae61d80c1a2cfcc780cfb5259849d/packages/schema/src/index.ts#L99)} value 组件初始值
- **返回:** - **返回:**
- `{Promise<void>}` - `{Promise<void>}`
- **详情:** - **详情:**
设置组件与属性表单默认值的对应关系 设置组件与属性表单默认值的对应关系
## getPropsValue ## getPropsValue
- **[扩展支持](../../guide/editor-expand#行为扩展)** 是 - **[扩展支持](../../guide/editor-expand#行为扩展)** 是
- **参数:** - **参数:**
- `{string}` type 组件类型 - `{string}` type 组件类型
- `{Object}` defaultValue 组件默认值,可选 - {[MNode](https://github.com/Tencent/tmagic-editor/blob/c143a5f7670ae61d80c1a2cfcc780cfb5259849d/packages/schema/src/index.ts#L99)} value 组件默认值,可选
- **返回:** - **返回:**
- {Promise<[MNode](https://github.com/Tencent/tmagic-editor/blob/cce8b63fc3618b5b811aa33c703de21c22be8a6a/packages/schema/src/index.ts#L210)>} 合并默认配置后的节点对象
- `{Promise<void>}`
- **详情:** - **详情:**
获取指定类型的组件初始值,会合并 [getDefaultPropsValue](#getdefaultpropsvalue) 与已注册的 propsValue并自动生成 id 获取指定类型的组件初始值
## createId ## createId
- **[扩展支持](../../guide/editor-expand#行为扩展)** 是 - **[扩展支持](../../guide/editor-expand#行为扩展)** 是
- **参数:** - **参数:**
- `{string | number}` type 组件类型
- {string} type 组件列席
- **返回:** - **返回:**
- `{string}` 生成的组件id格式为 `type_guid`
- `{Promise<string>}`
- **详情:** - **详情:**
生成组件id 生成组件id
## setNewItemId ## setNewItemId
- **[扩展支持](../../guide/editor-expand#行为扩展)** 是 - **[扩展支持](../../guide/editor-expand#行为扩展)** 是
- **参数:** - **参数:**
- {[MNode](https://github.com/Tencent/tmagic-editor/blob/cce8b63fc3618b5b811aa33c703de21c22be8a6a/packages/schema/src/index.ts#L210)} config
- `{boolean}` force 是否强制设置新ID默认 `true` - {[MNode](https://github.com/Tencent/tmagic-editor/blob/c143a5f7670ae61d80c1a2cfcc780cfb5259849d/packages/schema/src/index.ts#L99)} config
- **返回:** - **返回:**
- {[MNode](https://github.com/Tencent/tmagic-editor/blob/cce8b63fc3618b5b811aa33c703de21c22be8a6a/packages/schema/src/index.ts#L210)} 处理后的节点
- {Promise<[MNode](https://github.com/Tencent/tmagic-editor/blob/c143a5f7670ae61d80c1a2cfcc780cfb5259849d/packages/schema/src/index.ts#L99)>}
- **详情:** - **详情:**
@ -174,47 +148,22 @@
- **[扩展支持](../../guide/editor-expand#行为扩展)** 是 - **[扩展支持](../../guide/editor-expand#行为扩展)** 是
- **参数:** - **参数:**
- `{string}` type 组件类型 - `{string}` type 组件类型
- **返回:** - **返回:**
- `{Object}` 默认属性配置对象(包含 `type``style``name` 等基础字段,`page`/`container` 类型会额外包含 `layout``items`
- `{Promise<void>}`
- **详情:** - **详情:**
获取默认属性配置 获取默认属性配置
## 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 待替换的组件配置
- `{TargetOptions}` collectorOptions 依赖收集器配置
- **返回:**
- `{void}`
- **详情:**
根据 [setNewItemId](#setnewitemid) 收集到的新旧 id 映射,替换目标配置中关联引用的 id用于复制粘贴时保持组件间的关联依赖
## clearRelateId
- **返回:**
- `{void}`
- **详情:**
清除 [setNewItemId](#setnewitemid) 维护的新旧 id 映射关系
## resetState ## resetState
- **详情:** - **详情:**
清空所有组件的属性配置 (`propsConfigMap`) 与初始值 (`propsValueMap`)。 情况所有组件的属性配置与初始值
::: tip
本方法**不会**重置 `disabledDataSource` / `disabledCodeBlock` 标记,也**不会**清空 `relateIdMap`;如需清理后两者,请分别调用 [setDisabledDataSource](#setdisableddatasource) / [setDisabledCodeBlock](#setdisabledcodeblock) 与 [clearRelateId](#clearrelateid)。
:::
## destroy ## destroy

View File

@ -270,28 +270,6 @@
- **默认:** [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/239b5d3efeae916a8cf3e3566d88063ecccc0553/packages/editor/src/layouts/workspace/Stage.vue)
## stage-top
- **详情:** 画布上方位置,与画布共享同一个滚动容器,渲染在画布之前,可用于在画布顶部插入自定义元素,例如顶部工具条、提示信息等
- **默认:**
:::warning
如设置了[stage](#stage)插槽,此插槽将失效
:::
- **示例:**
```html
<template>
<m-editor>
<template #stage-top>
<div class="custom-stage-top">画布顶部自定义内容</div>
</template>
</m-editor>
</template>
```
## workspace-content ## workspace-content
- **详情:** 编辑器中间区域内,画布上方位置 - **详情:** 编辑器中间区域内,画布上方位置
@ -356,7 +334,7 @@
- **详情:** 编辑器右侧属性配置 - **详情:** 编辑器右侧属性配置
- **默认:** [PropsPanel.vue](https://github.com/Tencent/tmagic-editor/blob/master/packages/editor/src/layouts/props-panel/PropsPanel.vue) - **默认:** [PropsPanel.vue](https://github.com/Tencent/tmagic-editor/blob/239b5d3efeae916a8cf3e3566d88063ecccc0553/packages/editor/src/layouts/PropsPanel.vue)
## props-panel-header ## props-panel-header

View File

@ -24,7 +24,6 @@
- `stageRect`: 画布尺寸 - `stageRect`: 画布尺寸
- `columnWidth`: 列宽度配置 - `columnWidth`: 列宽度配置
- `showGuides`: 是否显示参考线 - `showGuides`: 是否显示参考线
- `hasGuides`: 画布上是否存在参考线
- `showRule`: 是否显示标尺 - `showRule`: 是否显示标尺
- `propsPanelSize`: 属性面板尺寸 - `propsPanelSize`: 属性面板尺寸
- `showAddPageButton`: 是否显示添加页面按钮 - `showAddPageButton`: 是否显示添加页面按钮

View File

@ -4,40 +4,24 @@
- **详情:** 弹出关闭 - **详情:** 弹出关闭
- **事件回调函数:** `() => void` - **回调函数:** () => void
## submit ## submit
- **详情:** 调用 [save()](./form-dialog-methods.md#save) 校验通过后触发 - **详情:** 调用[save()](./form-dialog-methods.md#save)
- **事件回调函数:** `(values: any, eventData: { changeRecords: ChangeRecord[] }) => void` - **回调函数:** (values: any) => void
## error ## error
- **详情:** 表单校验**不**通过时触发 - **详情:** 表单校验不同
- **事件回调函数:** `(invalidFields: Record<string, { message: string; field: string }[]>) => void` - **回调函数:** (error: any) => void
注意:与 `Form``error` 事件一致,回调收到的是 element-plus `validate` 返回的 `invalidFields` 结构,**不是** `Error` 实例。
## change ## change
- **详情:** 表单中任何值发生变化 - **详情:** 表单中任何值发生变化
- **事件回调函数:** `(values: any, eventData: ContainerChangeEventData) => void` - **回调函数:** (values: any) => void
注意:第一个参数是**整张表单**的 `values`,并非单个字段的值。
其中 `ContainerChangeEventData` 定义如下:
```ts
interface ChangeRecord {
propPath?: string;
value: any;
}
interface ContainerChangeEventData {
modifyKey?: string;
changeRecords?: ChangeRecord[];
}
```

View File

@ -6,40 +6,8 @@
## save ## save
- **签名:** `save(): Promise<void>`
- **返回:** - **返回:**
- `{Promise<void>}` - `{Promise<any>}`
- **详情:** 调用内部 Form 的 `submitForm` 进行校验,校验通过后触发 `submit` 事件(参数为表单值与 `{ changeRecords }`);若校验失败则触发 `error` 事件 - **详情:** 获取表单的值
## show
- **签名:** `show(): void`
- **详情:** 打开弹窗,等价于将内部 `dialogVisible` 置为 `true`
## hide
- **签名:** `hide(): void`
- **详情:** 关闭弹窗,等价于将内部 `dialogVisible` 置为 `false`
## form
- **类型:** `Ref<InstanceType<typeof Form> | undefined>`
- **详情:** 内部 Form 组件的实例引用,可通过它访问 Form 上 `defineExpose` 暴露的方法与属性
## saveFetch
- **类型:** `Ref<boolean>`
- **详情:** 保存按钮的 loading 状态
## dialogVisible
- **类型:** `Ref<boolean>`
- **详情:** 弹窗的显示状态

View File

@ -6,7 +6,7 @@
- **默认值:** `[]` - **默认值:** `[]`
- **类型:** [FormConfig](https://github.com/Tencent/tmagic-editor/blob/cce8b63fc3618b5b811aa33c703de21c22be8a6a/packages/form-schema/src/base.ts#L864) - **类型:** [FormConfig](https://github.com/Tencent/tmagic-editor/blob/c143a5f7670ae61d80c1a2cfcc780cfb5259849d/packages/form/src/schema.ts#L706)
- **示例:** - **示例:**
@ -16,17 +16,17 @@
</template> </template>
<script setup> <script setup>
import { ref } from "Vue"; import { ref } from 'Vue';
const config = ref([ const config = ref([
{ {
name: "text", name: 'text',
text: "文本", text: '文本',
}, },
{ {
name: "multiple", name: 'multiple',
text: "多行文本", text: '多行文本',
type: "switch", type: 'switch',
}, },
]); ]);
</script> </script>
@ -57,12 +57,6 @@
</script> </script>
``` ```
## parentValues
- **详情:** 父级表单值,会透传给内部 Form 组件
- **类型:** `Object`
## width ## width
- **详情:** 弹窗宽度 - **详情:** 弹窗宽度
@ -73,45 +67,28 @@
- **详情:** - **详情:**
表单域标签的宽度,例如 '50px'。 作为 Form 直接子元素的 form-item 会继承该值。 支持 auto 表单域标签的宽度,例如 '50px'。 作为 Form 直接子元素的 form-item 会继承该值。 支持 auto
- **默认值:** `'200px'` - **默认值:** `'200px'`
- **类型:** `string` - **类型:** `string | number`
## fullscreen ## fullscreen
- **详情:** 是否全屏。 - **详情:** 弹出是否全屏
- **默认值:** false - **默认值:** false
- **类型:** `boolean` - **类型:** boolean
## disabled ## disabled
- **详情:** 是否禁用该表单内的所有组件。 若设置为 true则表单内组件上的 disabled 属性不再生效 - **详情:** 是否禁用该表单内的所有组件。 若设置为 true则表单内组件上的 disabled 属性不再生效
- **默认值:** false - **默认值:** false
- **类型:** `boolean` - **类型:** `boolean`
## inline
- **详情:** 行内表单模式
- **类型:** `boolean`
## labelPosition
- **详情:** 表单域标签的位置, 当设置为 left 或 right 时,则也需要设置 label-width 属性
- **类型:** `string`
## zIndex
- **详情:** 弹窗的 z-index
- **类型:** `number`
## title ## title
- **详情:** 弹出标题 - **详情:** 弹出标题
@ -131,49 +108,3 @@
- **默认值:** `'确定'` - **默认值:** `'确定'`
- **类型:** `string` - **类型:** `string`
## preventSubmitDefault
- **详情:** 是否阻止内部 Form 原生 submit 事件的默认行为
- **类型:** `boolean`
## closeOnClickModal
- **详情:** 是否可以通过点击 modal 关闭 Dialog
- **默认值:** `false`
- **类型:** `boolean`
## closeOnPressEscape
- **详情:** 是否可以通过按下 ESC 关闭 Dialog
- **默认值:** `false`
- **类型:** `boolean`
## destroyOnClose
- **详情:** 关闭时销毁 Dialog 中的元素
- **默认值:** `false`
- **类型:** `boolean`
## showClose
- **详情:** 是否显示关闭按钮
- **默认值:** `true`
- **类型:** `boolean`
## showCancel
- **详情:** 是否显示底部取消按钮
- **默认值:** `true`
- **类型:** `boolean`

View File

@ -4,46 +4,4 @@
- **详情:** 表单中任何值发生变化 - **详情:** 表单中任何值发生变化
- **事件回调函数:** `(values: any, eventData: ContainerChangeEventData) => void` - **回调函数:** (values: any) => void
其中 `ContainerChangeEventData` 定义如下:
```ts
interface ChangeRecord {
propPath?: string;
value: any;
}
interface ContainerChangeEventData {
modifyKey?: string;
changeRecords?: ChangeRecord[];
}
```
## error
- **详情:** 表单校验失败时触发。回调收到的是 element-plus `validate` 返回的 `invalidFields` 结构(按字段名分组的校验失败项),而**不是** `Error` 实例
- **事件回调函数:** `(invalidFields: Record<string, { message: string; field: string }[]>) => void`
## field-input
- **详情:** 表单项 input 事件触发时由内部表单项向上派发,用于监听单个字段的输入
- **事件回调函数:** `(prop: string, value: any) => void`
## field-change
- **详情:** 表单项 change 事件触发时由内部表单项向上派发,用于监听单个字段的变更
- **事件回调函数:** 存在两种派发形式,监听时需注意区分:
- 大多数表单项(如 `Tabs``useImport` 等)派发的是 `(prop: string, value: any) => void`
- 表格类容器(`useSortable``useTableColumns` 等)会**只派发整行/整批数据**`(newData: any) => void`
如果只关心字段维度,可在回调里通过 `arguments.length === 1` 区分,或在表格类场景额外监听上层的 `change` 事件。
## update:stepActive
- **详情:** 当内部 step 容器切换步骤时触发。`Step.vue` 在点击步骤时派发的是 `index + 1``number`),文档类型保留 `string | number` 兼容父级初始传入
- **事件回调函数:** `(active: string | number) => void`

View File

@ -6,64 +6,8 @@
## submitForm ## submitForm
- **签名:** `async (native?: boolean) => Promise<any>`
- **参数:**
- `native?: boolean` - 是否返回原始表单值。当 `native``true` 时返回内部 `values.value`(响应式原值);否则返回 `cloneDeep(toRaw(values.value))`(深拷贝后的纯对象)
- **返回:** - **返回:**
- `{Promise<any>}` - 校验通过后返回当前表单值;校验失败时会触发 `error` 事件并 throw 一个包含错误信息的 `Error` - `{Promise<any>}`
- **详情:** 提交表单,先执行校验,校验通过后清空 `changeRecords` 并返回当前表单值 - **详情:** 提交表单,获取表单的值
## changeHandler
- **签名:** `(prop: string, value: any, eventData?: ContainerChangeEventData) => void`
- **详情:** 表单项值变更处理函数,会根据传入的 `propPath` 更新内部表单值,并向上 emit `change` 事件
## getTextByName
- **签名:** `(name: string) => string | undefined`
- **参数:**
- `name: string` - 字段名,支持点分隔的路径格式,如 `'a.b.c'`
- **返回:**
- `{string | undefined}` - 找到的 `text` 值,如果未找到则返回 `undefined`
- **详情:** 通过 `name` 从表单 `config` 中查找对应表单项的 `text`
## values
- **类型:** `Ref<FormValue>`
- **详情:** 当前表单值的响应式引用
## lastValuesProcessed
- **类型:** `Ref<FormValue>`
- **详情:** 对比模式下,处理后的待对比表单值
## formState
- **类型:** `FormState`
- **详情:** 内部使用的 formState 对象(`reactive`),通过 `provide('mForm')` 注入给子组件
## initialized
- **类型:** `Ref<boolean>`
- **详情:** 表单是否已经完成初始化
## changeRecords
- **类型:** `ShallowRef<ChangeRecord[]>`
- **详情:** 表单变更记录列表,提交成功或重置后会被清空

View File

@ -6,7 +6,7 @@
- **默认值:** `[]` - **默认值:** `[]`
- **类型:** [FormConfig](https://github.com/Tencent/tmagic-editor/blob/cce8b63fc3618b5b811aa33c703de21c22be8a6a/packages/form-schema/src/base.ts#L864) - **类型:** [FormConfig](https://github.com/Tencent/tmagic-editor/blob/c143a5f7670ae61d80c1a2cfcc780cfb5259849d/packages/form/src/schema.ts#L706)
- **示例:** - **示例:**
@ -16,17 +16,17 @@
</template> </template>
<script setup> <script setup>
import { ref } from "Vue"; import { ref } from 'Vue';
const config = ref([ const config = ref([
{ {
name: "text", name: 'text',
text: "文本", text: '文本',
}, },
{ {
name: "multiple", name: 'multiple',
text: "多行文本", text: '多行文本',
type: "switch", type: 'switch',
}, },
]); ]);
</script> </script>
@ -57,30 +57,6 @@
</script> </script>
``` ```
## lastValues
- **详情:** 需对比的值(开启对比模式时传入)
- **默认值:** `{}`
- **类型:** `Object`
## isCompare
- **详情:** 是否开启对比模式
- **默认值:** `false`
- **类型:** `boolean`
## parentValues
- **详情:** 父级表单值
- **默认值:** `{}`
- **类型:** `Object`
## labelWidth ## labelWidth
- **详情:** - **详情:**
@ -89,7 +65,7 @@
- **默认值:** `'200px'` - **默认值:** `'200px'`
- **类型:** `string` - **类型:** `string | number`
## disabled ## disabled
@ -101,19 +77,27 @@
## height ## height
- **详情:** 表单容器的高度,会作为内联样式 `height` 应用到表单根元素上 - **详情:**
- **默认值:** `'auto'`
- **类型:** `string`
- **默认值:**
- **类型:**
## stepActive ## stepActive
- **详情:** 当表单包含 step 容器时,控制当前激活的步骤 - **详情:**
- **默认值:** `1`
- **类型:** `string | number`
- **默认值:**
- **类型:**
## size ## size
@ -121,6 +105,7 @@
- **类型:** `'small' | 'default' | 'large'` - **类型:** `'small' | 'default' | 'large'`
## inline ## inline
- **详情:** 行内表单模式 - **详情:** 行内表单模式
@ -132,9 +117,10 @@
## labelPosition ## labelPosition
- **详情:** 表单域标签的位置, 当设置为 left 或 right 时,则也需要设置 label-width 属性 - **详情:** 表单域标签的位置, 当设置为 left 或 right 时,则也需要设置 label-width 属性
- **默认值:** `'right'`
- **类型:** `string` - **默认值:** right'
- **类型:** `'left' | 'right' | 'top`
## keyProp ## keyProp
@ -149,15 +135,3 @@
- **详情:** tooltip弹出层的class - **详情:** tooltip弹出层的class
- **类型:** `string` - **类型:** `string`
## preventSubmitDefault
- **详情:** 是否阻止表单原生 submit 事件的默认行为
- **类型:** `boolean`
## extendState
- **详情:** 扩展 formState 的钩子函数,返回的对象会被合并到 formState 上
- **类型:** `(state: FormState) => Record<string, any> | Promise<Record<string, any>>`

View File

@ -1,96 +1,21 @@
# stage事件 # stage事件
## mounted
- **参数**:(无)
- **详情**stage 挂载完成后触发
## runtime-ready ## runtime-ready
- **参数** ## mounted
- `runtime: Runtime`runtime 实例
- **详情**runtime 准备就绪时触发
## page-el-update
- **参数**
- `el: HTMLElement`:当前页面的根节点元素
- **详情**当前页面的根节点变化时触发stage 会同步根节点和画布的大小
## change-guides
- **参数**
- `data: GuidesEventData`:参考线数据,包含 `type`(参考线方向)和 `guides`(参考线位置数组)
- **详情**:参考线变化时触发
## select
- **参数**
- `el: HTMLElement`:被选中的元素
- `event: MouseEvent`:触发选中的鼠标事件
- **详情**:单选选中元素时触发
## multi-select
- **参数**
- `els: HTMLElement[]`:被选中的元素列表
- `event: MouseEvent`:触发选中的鼠标事件
- **详情**:多选选中元素时触发
## dblclick
- **参数**
- `event: MouseEvent`:鼠标双击事件
- **详情**:画布元素被双击时触发
## update
- **参数**
- `data: UpdateEventData`:更新事件数据,包含被更新的元素及其样式信息(`width``height``left``top``transform` 等)和 `parentEl`
- **详情**:拖拽/缩放等操作更新组件时触发
## sort
- **参数**
- `data: SortEventData`:排序数据,包含 `src`(源节点 id`dist`(目标节点 id以及 `root`
- **详情**:组件排序变化时触发
## select-parent
- **参数**:(无)
- **详情**:触发选中父级节点时抛出
## rerender
- **参数**:(无)
- **详情**:需要重新渲染画布时触发
## remove
- **参数**
- `data: RemoveEventData`:被移除元素的数据
- **详情**:从画布删除组件时触发
## highlight ## highlight
- **参数** ## update
- `el: HTMLElement`:被高亮的元素
- **详情**:高亮元素时触发
## mousemove ## select
- **参数** ## multi-select
- `event: MouseEvent`:鼠标移动事件
- **详情**:鼠标在画布上移动**且命中带 magic id 的节点元素**时触发;若 `getElementFromPoint` 拿不到带 id 的节点(例如悬空在画布空白处),则不会派发该事件
## mouseleave ## select-parent
- **参数** ## sort
- `event: MouseEvent`:鼠标离开事件
- **详情**:鼠标离开画布时触发
## drag-start ## update
- **参数** ## change-guides
- `event: OnDragStart`moveable 的拖拽开始事件
- **详情**:开始拖拽元素时触发

View File

@ -2,78 +2,47 @@
## select ## select
- **类型**`(id: Id, event?: MouseEvent) => Promise<void>` - **详情:** 单选选中元素
- **参数**
- `id`:选中节点的 id
- `event`:触发选中的鼠标事件(可选)
- **详情**:单选选中元素
## multiSelect ## multiSelect
- **类型**`(ids: Id[]) => Promise<void>` - **详情:** 多选选中多个元素
- **参数**
- `ids`:选中元素的 id 列表
- **详情**:多选选中多个元素
## highlight ## highlight
- **类型**`(id: Id) => void` - **详情:** 高亮选中元素
- **参数**
- `id`:要高亮的节点 id
- **详情**:按 id 高亮节点
## clearHighlight
- **类型**`() => void`
- **详情**:清除高亮
## update ## update
- **类型**`(data: UpdateData) => Promise<void>` - **详情:** 更新组件
- **参数**
- `data`:更新组件所需的数据,包含 `config``parent``parentId``root` 等字段
- **详情**:更新组件
## add ## add
- **类型**`(data: UpdateData) => Promise<void>` - **详情:** 往画布增加一个组件
- **参数**
- `data`:组件信息数据,包含要新增组件的 `config``parent``parentId``root` 等字段
- **详情**:往画布增加一个组件
## remove ## remove
- **类型**`(data: RemoveData) => Promise<void>` - **详情:** 从画布删除一个组件
- **参数**
- `data`:组件信息数据,包含要删除组件的 `id``parentId``root` 等字段
- **详情**:从画布删除一个组件
## setZoom ## setZoom
- **类型**`(zoom?: number) => void` - **详情:**
- **参数**
- `zoom`:缩放比例,缺省时使用 `DEFAULT_ZOOM`
- **详情**:设置画布缩放比例
## mount ## mount
- **类型**`(el: HTMLDivElement) => Promise<void>` - **详情:** 挂载Dom节点
- **参数**
- `el`:将 stage 挂载到该 Dom 节点上
- **详情**:挂载 Dom 节点
## clearGuides ## clearGuides
- **类型**`() => void` - **详情:** 清空所有参考线
- **详情**:清空所有参考线
## clearGuides
- **详情:** 清空所有参考线
## delayedMarkContainer ## delayedMarkContainer
- **类型**`(event: MouseEvent, excludeElList?: Element[]) => NodeJS.Timeout | undefined` - **详情:**
- **参数**
- `event`:鼠标事件
- `excludeElList`:计算鼠标所在容器时要排除的元素列表
- **详情**
鼠标拖拽着元素在容器上方悬停延迟一段时间后对容器进行标记如果悬停时间够长将标记成功悬停时间短调用方通过返回的timeoutId取消标记 鼠标拖拽着元素在容器上方悬停延迟一段时间后对容器进行标记如果悬停时间够长将标记成功悬停时间短调用方通过返回的timeoutId取消标记
@ -83,54 +52,7 @@
2、释放鼠标后通过标记的标志找到要加入的容器 2、释放鼠标后通过标记的标志找到要加入的容器
## getAddContainerHighlightClassNameTimeout
- **类型**`(event: MouseEvent, excludeElList?: Element[]) => NodeJS.Timeout | undefined`
- **参数**
- `event`:鼠标事件
- `excludeElList`:计算鼠标所在容器时要排除的元素列表
- **详情**@deprecated 废弃接口,建议用 [delayedMarkContainer](#delayedmarkcontainer) 代替
## getMoveableOption
- **类型**`<K extends keyof MoveableOptions>(key: K) => MoveableOptions[K] | undefined`
- **参数**:
- `key`:要获取的 moveable 配置项名称
- **详情**:获取 moveable 配置项的当前值
## getDragStatus
- **类型**`() => StageDragStatus | undefined`
- **详情**:获取当前画布的拖拽状态
## disableMultiSelect
- **类型**`() => void`
- **详情**:禁用多选能力
## enableMultiSelect
- **类型**`() => void`
- **详情**:启用多选能力
## reloadIframe
- **类型**`(url: string) => void`
- **参数**
- `url`:重新加载的 runtime 地址
- **详情**:重新加载 runtime iframe
## getElementImage
- **类型**`(id: Id, type?: 'download' | 'raw' | 'svg' | 'canvas' | 'png' | 'jpeg' | 'webp' | 'blob', options?: SnapdomOptions) => Promise<any>`
- **参数**
- `id`:要截图的节点 id
- `type`:导出类型,默认为 `'png'`
- `options`[snapdom](https://github.com/zumerlab/snapdom) 选项
- **详情**:将指定 id 的 dom 元素生成为图片
## destroy ## destroy
- **类型**`() => void` - **详情:** 销毁实例
- **详情**:销毁实例

View File

@ -20,30 +20,15 @@
## after-action ## after-action
- **参数:** - **参数:**
- `payload: { index: number }` - 触发动作所在行的索引 - `action: string` - 操作类型
- `data: any` - 操作相关数据
- **说明:** 表格行的编辑型动作(如 actions 中 `type: 'edit'` 的保存)执行结束后触发。 - **说明:** 表格操作完成后触发
注意:`ActionsColumn` 在 handler 返回值为「假值」(如 `undefined`/`null`/未返回)时同样会派发该事件;**仅当**返回值为对象且 `res.ret !== 0` 时才视为失败、不派发。如果业务需要严格在「业务接口成功」后再处理,应在 handler 内显式 `return { ret: 0 }` 并在监听处自行判断 `res.ret`
- **示例:** - **示例:**
```js ```js
const handleAfterAction = ({ index }) => { const handleAfterAction = (action, data) => {
console.log('操作完成,行索引:', index); console.log('操作完成:', action, data);
};
```
## after-action-cancel
- **参数:**
- `payload: { index: number }` - 触发动作所在行的索引
- **说明:** 表格行的编辑型动作被取消后触发
- **示例:**
```js
const handleAfterActionCancel = ({ index }) => {
console.log('操作取消,行索引:', index);
}; };
``` ```

View File

@ -4,21 +4,22 @@
- **详情:** 表格数据,数组格式 - **详情:** 表格数据,数组格式
- **必填:** 是 - **默认值:** `[]`
- **类型:** `Array<any>` - **类型:** `Array<any>`
- **示例:** - **示例:**
```js ```js
[ [
{ id: 1, name: "张三", age: 20 }, { id: 1, name: '张三', age: 20 },
{ id: 2, name: "李四", age: 25 }, { id: 2, name: '李四', age: 25 }
]; ]
``` ```
## columns ## columns
- **详情:** 表格列配置 - **详情:** 表格列配置
- **默认值:** `[]` - **默认值:** `[]`
- **类型:** `Array<ColumnConfig>` - **类型:** `Array<ColumnConfig>`
@ -26,20 +27,22 @@
- **示例:** - **示例:**
```js ```js
[ [
{ prop: "name", label: "姓名", width: 120 }, { prop: 'name', label: '姓名', width: 120 },
{ prop: "age", label: "年龄", width: 80 }, { prop: 'age', label: '年龄', width: 80 }
]; ]
``` ```
## spanMethod ## spanMethod
- **详情:** 合并行或列的计算方法 - **详情:** 合并行或列的计算方法
- **默认值:** `undefined` - **默认值:** `undefined`
- **类型:** `Function` - **类型:** `Function`
- **参数:** - **参数:**
- `{ row, column, rowIndex, columnIndex }` - `{ row, column, rowIndex, columnIndex }`
- **返回值:** `[rowspan, colspan]``{ rowspan, colspan }` - **返回值:** `[rowspan, colspan]``{ rowspan, colspan }`
- **示例:** - **示例:**
@ -52,12 +55,13 @@
return [0, 0]; return [0, 0];
} }
} }
}; }
``` ```
## loading ## loading
- **详情:** 是否显示加载状态 - **详情:** 是否显示加载状态
- **默认值:** `false` - **默认值:** `false`
- **类型:** `boolean` - **类型:** `boolean`
@ -65,6 +69,7 @@
## showHeader ## showHeader
- **详情:** 是否显示表头 - **详情:** 是否显示表头
- **默认值:** `true` - **默认值:** `true`
- **类型:** `boolean` - **类型:** `boolean`
@ -72,19 +77,21 @@
## bodyHeight ## bodyHeight
- **详情:** Table 的最大高度。合法的值为数字或者单位为 px 的高度 - **详情:** Table 的最大高度。合法的值为数字或者单位为 px 的高度
- **默认值:** `undefined` - **默认值:** `undefined`
- **类型:** `string | number` - **类型:** `string | number`
- **示例:** - **示例:**
```js ```js
bodyHeight: 400; bodyHeight: 400
bodyHeight: "400px"; bodyHeight: '400px'
``` ```
## emptyText ## emptyText
- **详情:** 空数据时显示的文本内容 - **详情:** 空数据时显示的文本内容
- **默认值:** `'暂无数据'` - **默认值:** `'暂无数据'`
- **类型:** `string` - **类型:** `string`
@ -92,6 +99,7 @@
## defaultExpandAll ## defaultExpandAll
- **详情:** 是否默认展开所有行,当 Table 包含展开行存在或者为树形表格时有效 - **详情:** 是否默认展开所有行,当 Table 包含展开行存在或者为树形表格时有效
- **默认值:** `false` - **默认值:** `false`
- **类型:** `boolean` - **类型:** `boolean`
@ -99,6 +107,7 @@
## rowkeyName ## rowkeyName
- **详情:** 行数据的 Key用来优化 Table 的渲染 - **详情:** 行数据的 Key用来优化 Table 的渲染
- **默认值:** `'id'` - **默认值:** `'id'`
- **类型:** `string` - **类型:** `string`
@ -108,6 +117,7 @@
## border ## border
- **详情:** 是否显示边框 - **详情:** 是否显示边框
- **默认值:** `false` - **默认值:** `false`
- **类型:** `boolean` - **类型:** `boolean`

View File

@ -28,12 +28,11 @@
``` ```
## Attributes ## Attributes
| 参数 | 说明 | 类型 | 可选值 | 默认值 | | 参数 | 说明 | 类型 | 可选值 | 默认值 |
| ----------- | ------------------ | -------------------------------------------------------------------------------------------------------------------------------------------------------- | ------ | ------ | |---------- |-------- |---------- |------------- |-------- |
| name | 绑定值 | string | — | — | | name | 绑定值 | string | — | — |
| text | 表单标签 | 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](https://github.com/Tencent/tmagic-editor/blob/master/packages/form/src/schema.ts) | — | false |
| formTitle | 弹窗标题 | string | — | — | | formTitle | 弹窗标题 | string | — | — |
| codeOptions | 代码编辑器配置项 | object | — | — | | codeOptions | 代码编辑器配置项 | object | — | — |
| onChange | 值变化时触发的函数 | [OnChangeHandler](https://github.com/Tencent/tmagic-editor/blob/cce8b63fc3618b5b811aa33c703de21c22be8a6a/packages/form-schema/src/base.ts#L30) | — | - | | onChange | 值变化时触发的函数 | [OnChangeHandler](https://github.com/Tencent/tmagic-editor/blob/master/packages/form/src/schema.ts) | — | - |

View File

@ -28,11 +28,10 @@
``` ```
## Attributes ## Attributes
| 参数 | 说明 | 类型 | 可选值 | 默认值 | | 参数 | 说明 | 类型 | 可选值 | 默认值 |
| ----------- | ------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------- | ------ | ------ | |---------- |-------- |---------- |------------- |-------- |
| name | 绑定值 | string | — | — | | name | 绑定值 | string | — | — |
| text | 表单标签 | 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](https://github.com/Tencent/tmagic-editor/blob/master/packages/form/src/schema.ts) | — | false |
| notEditable | 是否不可编辑代码块disable控制是否可选择 | 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/master/packages/form/src/schema.ts) | — | false |
| onChange | 值变化时触发的函数 | [OnChangeHandler](https://github.com/Tencent/tmagic-editor/blob/cce8b63fc3618b5b811aa33c703de21c22be8a6a/packages/form-schema/src/base.ts#L30) | — | - | | onChange | 值变化时触发的函数 | [OnChangeHandler](https://github.com/Tencent/tmagic-editor/blob/master/packages/form/src/schema.ts) | — | - |

View File

@ -19,17 +19,15 @@
## 功能说明 ## 功能说明
CodeSelect 组件支持: CodeSelect 组件支持:
- 选择代码块 - 选择代码块
- 选择数据源方法 - 选择数据源方法
- 配置代码块参数 - 配置代码块参数
## Attributes ## Attributes
| 参数 | 说明 | 类型 | 可选值 | 默认值 | | 参数 | 说明 | 类型 | 可选值 | 默认值 |
| --------- | ------------------ | -------------------------------------------------------------------------------------------------------------------------------------------------------- | ------ | ------ | |---------- |-------- |---------- |------------- |-------- |
| name | 绑定值 | string | — | — | | name | 绑定值 | string | — | — |
| text | 表单标签 | 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](https://github.com/Tencent/tmagic-editor/blob/master/packages/form/src/schema.ts) | — | false |
| className | 自定义类名 | string | — | — | | className | 自定义类名 | string | — | — |
| onChange | 值变化时触发的函数 | [OnChangeHandler](https://github.com/Tencent/tmagic-editor/blob/cce8b63fc3618b5b811aa33c703de21c22be8a6a/packages/form-schema/src/base.ts#L30) | — | - | | onChange | 值变化时触发的函数 | [OnChangeHandler](https://github.com/Tencent/tmagic-editor/blob/master/packages/form/src/schema.ts) | — | - |

View File

@ -10,7 +10,7 @@
```js ```js
{ {
type: 'vs-code', type: 'code',
name: 'code', name: 'code',
text: '代码' text: '代码'
} }
@ -20,7 +20,7 @@
```js ```js
{ {
type: 'vs-code', type: 'code',
name: 'code', name: 'code',
text: '代码', text: '代码',
language: 'javascript' language: 'javascript'
@ -31,7 +31,7 @@
```js ```js
{ {
type: 'vs-code', type: 'code',
name: 'code', name: 'code',
text: '代码', text: '代码',
autosize: { autosize: {
@ -42,23 +42,20 @@
``` ```
## Attributes ## Attributes
| 参数 | 说明 | 类型 | 可选值 | 默认值 | | 参数 | 说明 | 类型 | 可选值 | 默认值 |
| ------------- | -------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------- | ------ | |---------- |-------- |---------- |------------- |-------- |
| name | 绑定值 | string | — | — | | name | 绑定值 | string | — | — |
| text | 表单标签 | 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](https://github.com/Tencent/tmagic-editor/blob/master/packages/form/src/schema.ts) | — | false |
| language | 代码语言 | string | javascript/typescript/json等 | — | | language | 代码语言 | string | javascript/typescript/json等 | — |
| height | 编辑器高度 | string | — | — | | height | 编辑器高度 | string | — | — |
| parse | 是否解析代码 | boolean | — | false | | parse | 是否解析代码 | boolean | — | false |
| options | 编辑器配置项 | object | — | — | | options | 编辑器配置项 | object | — | — |
| autosize | 自动调整大小配置 | object | — | — | | autosize | 自动调整大小配置 | object | — | — |
| mFormItemType | 传入代码编辑器的自定义类型 | string | — | — | | onChange | 值变化时触发的函数 | [OnChangeHandler](https://github.com/Tencent/tmagic-editor/blob/master/packages/form/src/schema.ts) | — | - |
| onChange | 值变化时触发的函数 | [OnChangeHandler](https://github.com/Tencent/tmagic-editor/blob/cce8b63fc3618b5b811aa33c703de21c22be8a6a/packages/form-schema/src/base.ts#L30) | — | - |
## autosize Attributes ## autosize Attributes
| 参数 | 说明 | 类型 | 可选值 | 默认值 | | 参数 | 说明 | 类型 | 可选值 | 默认值 |
| ------- | -------- | ------ | ------ | ------ | |---------- |-------- |---------- |------------- |-------- |
| minRows | 最小行数 | number | — | — | | minRows | 最小行数 | number | — | — |
| maxRows | 最大行数 | number | — | — | | maxRows | 最大行数 | number | — | — |

View File

@ -10,7 +10,7 @@
```js ```js
{ {
type: 'cond-op-select', type: 'cond-op',
name: 'op', name: 'op',
text: '操作符' text: '操作符'
} }
@ -20,7 +20,7 @@
```js ```js
{ {
type: 'cond-op-select', type: 'cond-op',
name: 'op', name: 'op',
text: '操作符', text: '操作符',
parentFields: ['field1', 'field2'] parentFields: ['field1', 'field2']
@ -28,11 +28,10 @@
``` ```
## Attributes ## Attributes
| 参数 | 说明 | 类型 | 可选值 | 默认值 | | 参数 | 说明 | 类型 | 可选值 | 默认值 |
| ------------ | ------------------ | -------------------------------------------------------------------------------------------------------------------------------------------------------- | ------ | ------ | |---------- |-------- |---------- |------------- |-------- |
| name | 绑定值 | string | — | — | | name | 绑定值 | string | — | — |
| text | 表单标签 | 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](https://github.com/Tencent/tmagic-editor/blob/master/packages/form/src/schema.ts) | — | false |
| parentFields | 父级字段 | string[] | — | — | | parentFields | 父级字段 | string[] | — | — |
| onChange | 值变化时触发的函数 | [OnChangeHandler](https://github.com/Tencent/tmagic-editor/blob/cce8b63fc3618b5b811aa33c703de21c22be8a6a/packages/form-schema/src/base.ts#L30) | — | - | | onChange | 值变化时触发的函数 | [OnChangeHandler](https://github.com/Tencent/tmagic-editor/blob/master/packages/form/src/schema.ts) | — | - |

View File

@ -50,20 +50,18 @@
``` ```
## Attributes ## Attributes
| 参数 | 说明 | 类型 | 可选值 | 默认值 | | 参数 | 说明 | 类型 | 可选值 | 默认值 |
| ------------------- | ------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------- | --------- | ------ | |---------- |-------- |---------- |------------- |-------- |
| name | 绑定值 | string | — | — | | name | 绑定值 | string | — | — |
| text | 表单标签 | 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](https://github.com/Tencent/tmagic-editor/blob/master/packages/form/src/schema.ts) | — | false |
| value | 返回值类型 | string | key/value | — | | value | 返回值类型 | string | key/value | — |
| checkStrictly | 是否严格遵守父子节点不互相关联 | boolean / Function | — | — | | checkStrictly | 是否严格遵守父子节点不互相关联 | boolean / Function | — | — |
| dataSourceFieldType | 允许选择的字段类型 | DataSourceFieldType[] | — | — | | dataSourceFieldType | 允许选择的字段类型 | DataSourceFieldType[] | — | — |
| fieldConfig | 自定义字段配置 | ChildConfig | — | — | | fieldConfig | 自定义字段配置 | ChildConfig | — | — |
| notEditable | 是否不可编辑数据源disable控制是否可选择 | 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/master/packages/form/src/schema.ts) | — | false |
| onChange | 值变化时触发的函数 | [OnChangeHandler](https://github.com/Tencent/tmagic-editor/blob/cce8b63fc3618b5b811aa33c703de21c22be8a6a/packages/form-schema/src/base.ts#L30) | — | - | | onChange | 值变化时触发的函数 | [OnChangeHandler](https://github.com/Tencent/tmagic-editor/blob/master/packages/form/src/schema.ts) | — | - |
## value说明 ## value说明
- `key`: 不编译返回数据源id和字段name - `key`: 不编译返回数据源id和字段name
- `value`: 编译后返回数据源data[field] - `value`: 编译后返回数据源data[field]

View File

@ -17,10 +17,9 @@
``` ```
## Attributes ## Attributes
| 参数 | 说明 | 类型 | 可选值 | 默认值 | | 参数 | 说明 | 类型 | 可选值 | 默认值 |
| -------- | ------------------ | -------------------------------------------------------------------------------------------------------------------------------------------------------- | ------ | ------ | |---------- |-------- |---------- |------------- |-------- |
| name | 绑定值 | string | — | — | | name | 绑定值 | string | — | — |
| text | 表单标签 | 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](https://github.com/Tencent/tmagic-editor/blob/master/packages/form/src/schema.ts) | — | false |
| onChange | 值变化时触发的函数 | [OnChangeHandler](https://github.com/Tencent/tmagic-editor/blob/cce8b63fc3618b5b811aa33c703de21c22be8a6a/packages/form-schema/src/base.ts#L30) | — | - | | onChange | 值变化时触发的函数 | [OnChangeHandler](https://github.com/Tencent/tmagic-editor/blob/master/packages/form/src/schema.ts) | — | - |

View File

@ -17,10 +17,9 @@
``` ```
## Attributes ## Attributes
| 参数 | 说明 | 类型 | 可选值 | 默认值 | | 参数 | 说明 | 类型 | 可选值 | 默认值 |
| -------- | ------------------ | -------------------------------------------------------------------------------------------------------------------------------------------------------- | ------ | ------ | |---------- |-------- |---------- |------------- |-------- |
| name | 绑定值 | string | — | — | | name | 绑定值 | string | — | — |
| text | 表单标签 | 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](https://github.com/Tencent/tmagic-editor/blob/master/packages/form/src/schema.ts) | — | false |
| onChange | 值变化时触发的函数 | [OnChangeHandler](https://github.com/Tencent/tmagic-editor/blob/cce8b63fc3618b5b811aa33c703de21c22be8a6a/packages/form-schema/src/base.ts#L30) | — | - | | onChange | 值变化时触发的函数 | [OnChangeHandler](https://github.com/Tencent/tmagic-editor/blob/master/packages/form/src/schema.ts) | — | - |

View File

@ -28,11 +28,10 @@
``` ```
## Attributes ## Attributes
| 参数 | 说明 | 类型 | 可选值 | 默认值 | | 参数 | 说明 | 类型 | 可选值 | 默认值 |
| ----------- | ------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------- | ------ | ------ | |---------- |-------- |---------- |------------- |-------- |
| name | 绑定值 | string | — | — | | name | 绑定值 | string | — | — |
| text | 表单标签 | 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](https://github.com/Tencent/tmagic-editor/blob/master/packages/form/src/schema.ts) | — | false |
| notEditable | 是否不可编辑数据源disable控制是否可选择 | 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/master/packages/form/src/schema.ts) | — | false |
| onChange | 值变化时触发的函数 | [OnChangeHandler](https://github.com/Tencent/tmagic-editor/blob/cce8b63fc3618b5b811aa33c703de21c22be8a6a/packages/form-schema/src/base.ts#L30) | — | - | | onChange | 值变化时触发的函数 | [OnChangeHandler](https://github.com/Tencent/tmagic-editor/blob/master/packages/form/src/schema.ts) | — | - |

View File

@ -17,10 +17,9 @@
``` ```
## Attributes ## Attributes
| 参数 | 说明 | 类型 | 可选值 | 默认值 | | 参数 | 说明 | 类型 | 可选值 | 默认值 |
| -------- | ------------------ | -------------------------------------------------------------------------------------------------------------------------------------------------------- | ------ | ------ | |---------- |-------- |---------- |------------- |-------- |
| name | 绑定值 | string | — | — | | name | 绑定值 | string | — | — |
| text | 表单标签 | 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](https://github.com/Tencent/tmagic-editor/blob/master/packages/form/src/schema.ts) | — | false |
| onChange | 值变化时触发的函数 | [OnChangeHandler](https://github.com/Tencent/tmagic-editor/blob/cce8b63fc3618b5b811aa33c703de21c22be8a6a/packages/form-schema/src/base.ts#L30) | — | - | | onChange | 值变化时触发的函数 | [OnChangeHandler](https://github.com/Tencent/tmagic-editor/blob/master/packages/form/src/schema.ts) | — | - |

View File

@ -17,10 +17,9 @@
``` ```
## Attributes ## Attributes
| 参数 | 说明 | 类型 | 可选值 | 默认值 | | 参数 | 说明 | 类型 | 可选值 | 默认值 |
| -------- | ------------------ | -------------------------------------------------------------------------------------------------------------------------------------------------------- | ------ | ------ | |---------- |-------- |---------- |------------- |-------- |
| name | 绑定值 | string | — | — | | name | 绑定值 | string | — | — |
| text | 表单标签 | 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](https://github.com/Tencent/tmagic-editor/blob/master/packages/form/src/schema.ts) | — | false |
| onChange | 值变化时触发的函数 | [OnChangeHandler](https://github.com/Tencent/tmagic-editor/blob/cce8b63fc3618b5b811aa33c703de21c22be8a6a/packages/form-schema/src/base.ts#L30) | — | - | | onChange | 值变化时触发的函数 | [OnChangeHandler](https://github.com/Tencent/tmagic-editor/blob/master/packages/form/src/schema.ts) | — | - |

View File

@ -39,19 +39,17 @@
``` ```
## Attributes ## Attributes
| 参数 | 说明 | 类型 | 可选值 | 默认值 | | 参数 | 说明 | 类型 | 可选值 | 默认值 |
| -------------- | ------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------- | ------ | |---------- |-------- |---------- |------------- |-------- |
| name | 绑定值 | string | — | — | | name | 绑定值 | string | — | — |
| text | 表单标签 | string | — | — | | text | 表单标签 | string | — | — |
| placeholder | 输入框占位文本 | 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](https://github.com/Tencent/tmagic-editor/blob/master/packages/form/src/schema.ts) | — | false |
| dataSourceType | 数据源类型过滤 | string | base/http等 | — | | dataSourceType | 数据源类型过滤 | string | base/http等 | — |
| value | 返回值类型 | string | id/value | — | | value | 返回值类型 | string | id/value | — |
| notEditable | 是否不可编辑数据源disable控制是否可选择 | 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/master/packages/form/src/schema.ts) | — | false |
| onChange | 值变化时触发的函数 | [OnChangeHandler](https://github.com/Tencent/tmagic-editor/blob/cce8b63fc3618b5b811aa33c703de21c22be8a6a/packages/form-schema/src/base.ts#L30) | — | - | | onChange | 值变化时触发的函数 | [OnChangeHandler](https://github.com/Tencent/tmagic-editor/blob/master/packages/form/src/schema.ts) | — | - |
## value说明 ## value说明
- `id`: 不编译返回数据源id - `id`: 不编译返回数据源id
- `value`: 编译后返回数据源data - `value`: 编译后返回数据源data

View File

@ -28,12 +28,11 @@
``` ```
## Attributes ## Attributes
| 参数 | 说明 | 类型 | 可选值 | 默认值 | | 参数 | 说明 | 类型 | 可选值 | 默认值 |
| ------------ | ------------------ | --------------------------------------------------------------------------------------------------------------------------------------------------------- | ------ | ------ | |---------- |-------- |---------- |------------- |-------- |
| name | 绑定值 | string | — | — | | name | 绑定值 | string | — | — |
| text | 表单标签 | 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](https://github.com/Tencent/tmagic-editor/blob/master/packages/form/src/schema.ts) | — | false |
| titlePrefix | 标题前缀 | string | — | — | | titlePrefix | 标题前缀 | string | — | — |
| parentFields | 父级字段 | string[] / [FilterFunction](https://github.com/Tencent/tmagic-editor/blob/cce8b63fc3618b5b811aa33c703de21c22be8a6a/packages/form-schema/src/base.ts#L195) | — | — | | parentFields | 父级字段 | string[] / [FilterFunction](https://github.com/Tencent/tmagic-editor/blob/master/packages/form/src/schema.ts) | — | — |
| onChange | 值变化时触发的函数 | [OnChangeHandler](https://github.com/Tencent/tmagic-editor/blob/cce8b63fc3618b5b811aa33c703de21c22be8a6a/packages/form-schema/src/base.ts#L30) | — | - | | onChange | 值变化时触发的函数 | [OnChangeHandler](https://github.com/Tencent/tmagic-editor/blob/master/packages/form/src/schema.ts) | — | - |

View File

@ -29,12 +29,11 @@
``` ```
## Attributes ## Attributes
| 参数 | 说明 | 类型 | 可选值 | 默认值 | | 参数 | 说明 | 类型 | 可选值 | 默认值 |
| ---------------------- | ------------------ | -------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------- | ------ | |---------- |-------- |---------- |------------- |-------- |
| name | 绑定值 | string | — | — | | name | 绑定值 | string | — | — |
| text | 表单标签 | 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](https://github.com/Tencent/tmagic-editor/blob/master/packages/form/src/schema.ts) | — | false |
| src | 事件来源 | string | datasource/component | — | | src | 事件来源 | string | datasource/component | — |
| labelWidth | 标签宽度 | string | — | — | | labelWidth | 标签宽度 | string | — | — |
| eventNameConfig | 事件名称表单配置 | FormItem | — | — | | eventNameConfig | 事件名称表单配置 | FormItem | — | — |
@ -43,9 +42,8 @@
| compActionConfig | 联动组件动作配置 | FormItem | — | — | | compActionConfig | 联动组件动作配置 | FormItem | — | — |
| codeActionConfig | 联动代码配置 | FormItem | — | — | | codeActionConfig | 联动代码配置 | FormItem | — | — |
| dataSourceActionConfig | 联动数据源配置 | FormItem | — | — | | dataSourceActionConfig | 联动数据源配置 | FormItem | — | — |
| onChange | 值变化时触发的函数 | [OnChangeHandler](https://github.com/Tencent/tmagic-editor/blob/cce8b63fc3618b5b811aa33c703de21c22be8a6a/packages/form-schema/src/base.ts#L30) | — | - | | onChange | 值变化时触发的函数 | [OnChangeHandler](https://github.com/Tencent/tmagic-editor/blob/master/packages/form/src/schema.ts) | — | - |
## src说明 ## src说明
- `component`: 组件事件 - `component`: 组件事件
- `datasource`: 数据源事件 - `datasource`: 数据源事件

View File

@ -30,11 +30,10 @@
``` ```
## Attributes ## Attributes
| 参数 | 说明 | 类型 | 可选值 | 默认值 | | 参数 | 说明 | 类型 | 可选值 | 默认值 |
| -------- | ---------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------- | ------ | ------ | |---------- |-------- |---------- |------------- |-------- |
| name | 绑定值 | string | — | — | | name | 绑定值 | string | — | — |
| text | 表单标签 | 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](https://github.com/Tencent/tmagic-editor/blob/master/packages/form/src/schema.ts) | — | false |
| advanced | 是否支持高级模式(代码编辑) | boolean | — | false | | advanced | 是否支持高级模式(代码编辑) | boolean | — | false |
| onChange | 值变化时触发的函数 | [OnChangeHandler](https://github.com/Tencent/tmagic-editor/blob/cce8b63fc3618b5b811aa33c703de21c22be8a6a/packages/form-schema/src/base.ts#L30) | — | - | | onChange | 值变化时触发的函数 | [OnChangeHandler](https://github.com/Tencent/tmagic-editor/blob/master/packages/form/src/schema.ts) | — | - |

View File

@ -17,13 +17,12 @@
``` ```
## Attributes ## Attributes
| 参数 | 说明 | 类型 | 可选值 | 默认值 | | 参数 | 说明 | 类型 | 可选值 | 默认值 |
| -------- | ------------------ | -------------------------------------------------------------------------------------------------------------------------------------------------------- | ------ | ------ | |---------- |-------- |---------- |------------- |-------- |
| name | 绑定值 | string | — | — | | name | 绑定值 | string | — | — |
| text | 表单标签 | 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](https://github.com/Tencent/tmagic-editor/blob/master/packages/form/src/schema.ts) | — | false |
| onChange | 值变化时触发的函数 | [OnChangeHandler](https://github.com/Tencent/tmagic-editor/blob/cce8b63fc3618b5b811aa33c703de21c22be8a6a/packages/form-schema/src/base.ts#L30) | — | - | | onChange | 值变化时触发的函数 | [OnChangeHandler](https://github.com/Tencent/tmagic-editor/blob/master/packages/form/src/schema.ts) | — | - |
## 使用说明 ## 使用说明

View File

@ -17,13 +17,12 @@
``` ```
## Attributes ## Attributes
| 参数 | 说明 | 类型 | 可选值 | 默认值 | | 参数 | 说明 | 类型 | 可选值 | 默认值 |
| -------- | ------------------ | -------------------------------------------------------------------------------------------------------------------------------------------------------- | ------ | ------ | |---------- |-------- |---------- |------------- |-------- |
| name | 绑定值 | string | — | — | | name | 绑定值 | string | — | — |
| text | 表单标签 | 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](https://github.com/Tencent/tmagic-editor/blob/master/packages/form/src/schema.ts) | — | false |
| onChange | 值变化时触发的函数 | [OnChangeHandler](https://github.com/Tencent/tmagic-editor/blob/cce8b63fc3618b5b811aa33c703de21c22be8a6a/packages/form-schema/src/base.ts#L30) | — | - | | onChange | 值变化时触发的函数 | [OnChangeHandler](https://github.com/Tencent/tmagic-editor/blob/master/packages/form/src/schema.ts) | — | - |
## 使用说明 ## 使用说明

View File

@ -10,7 +10,6 @@
text: '日期选择器' text: '日期选择器'
}]"> }]">
<template #source> <template #source>
<p> <p>
以日期为基本单位,基础的日期选择控件 以日期为基本单位,基础的日期选择控件
</p> </p>
@ -26,7 +25,6 @@
disabled: () => true disabled: () => true
}]"> }]">
<template #source> <template #source>
<p> <p>
通过 <code>disabled</code> 属性禁用日期选择器 通过 <code>disabled</code> 属性禁用日期选择器
</p> </p>
@ -42,7 +40,6 @@
placeholder: '请选择日期' placeholder: '请选择日期'
}]"> }]">
<template #source> <template #source>
<p> <p>
通过 <code>placeholder</code> 属性设置输入框占位文本 通过 <code>placeholder</code> 属性设置输入框占位文本
</p> </p>
@ -60,7 +57,7 @@
::: :::
| 格式 | 含义 | 备注 | 举例 | | 格式 | 含义 | 备注 | 举例 |
| ------ | ---------------- | ---------------------------------------------- | ------------- | |------|------|------|------|
| `YYYY` | 年 | | 2017 | | `YYYY` | 年 | | 2017 |
| `M` | 月 | 不补0 | 1 | | `M` | 月 | 不补0 | 1 |
| `MM` | 月 | | 01 | | `MM` | 月 | | 01 |
@ -85,7 +82,6 @@
valueFormat: 'x' valueFormat: 'x'
}]"> }]">
<template #source> <template #source>
<p> <p>
设置 <code>valueFormat</code><code>timestamp</code>,绑定值将返回时间戳格式 设置 <code>valueFormat</code><code>timestamp</code>,绑定值将返回时间戳格式
</p> </p>
@ -95,21 +91,22 @@
## Attributes ## Attributes
| 参数 | 说明 | 类型 | 可选值 | 默认值 | | 参数 | 说明 | 类型 | 可选值 | 默认值 |
| ----------- | ---------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------- | ---------- | |---------- |-------------- |---------- |-------------------------------- |-------- |
| name | 绑定值的字段名 | string | — | — | | name | 绑定值的字段名 | string | — | — |
| text | 表单标签 | string | — | — | | text | 表单标签 | string | — | — |
| placeholder | 输入框占位文本 | 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](https://github.com/Tencent/tmagic-editor/blob/master/packages/form/src/schema.ts) | — | false |
| format | 显示在输入框中的格式 | string | 见[日期格式](#日期格式) | YYYY/MM/DD | | format | 显示在输入框中的格式 | string | 见[日期格式](#日期格式) | YYYY/MM/DD |
| valueFormat | 绑定值的格式。不指定则绑定值为 Date 对象 | 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](https://github.com/Tencent/tmagic-editor/blob/master/packages/form/src/schema.ts) | — | — |
## TypeScript 定义 ## TypeScript 定义
```typescript ```typescript
interface DateConfig extends FormItem, Input { interface DateConfig extends FormItem, Input {
type: "date"; type: 'date';
format?: "YYYY-MM-dd HH:mm:ss" | string; format?: 'YYYY-MM-dd HH:mm:ss' | string;
valueFormat?: "YYYY-MM-dd HH:mm:ss" | string; valueFormat?: 'YYYY-MM-dd HH:mm:ss' | string;
} }
``` ```

View File

@ -10,7 +10,6 @@
text: '日期范围' text: '日期范围'
}]"> }]">
<template #source> <template #source>
<p> <p>
type为'daterange' type为'daterange'
</p> </p>
@ -27,7 +26,6 @@ type为'daterange'
text: '日期范围' text: '日期范围'
}]"> }]">
<template #source> <template #source>
<p> <p>
配置 names 属性,将开始时间和结束时间分别绑定到 startTime 和 endTime 字段。 配置 names 属性,将开始时间和结束时间分别绑定到 startTime 和 endTime 字段。
</p> </p>
@ -35,15 +33,14 @@ type为'daterange'
</demo-block> </demo-block>
## Attributes ## Attributes
| 参数 | 说明 | 类型 | 可选值 | 默认值 | | 参数 | 说明 | 类型 | 可选值 | 默认值 |
| ----------- | ------------------------ | -------------------------------------------------------------------------------------------------------------------------------------------------------- | ------ | ------------------- | |---------- |-------------- |---------- |-------------------------------- |-------- |
| name | 绑定值(数组形式) | string | — | — | | name | 绑定值(数组形式) | string | — | — |
| names | 绑定值(拆分为两个字段) | string[] | — | — | | names | 绑定值(拆分为两个字段) | string[] | — | — |
| text | 表单标签 | 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](https://github.com/Tencent/tmagic-editor/blob/master/packages/form/src/schema.ts) | — | false |
| dateFormat | 日期格式 | string | — | YYYY/MM/DD | | dateFormat | 日期格式 | string | — | YYYY/MM/DD |
| timeFormat | 时间格式 | string | — | HH:mm:ss | | timeFormat | 时间格式 | string | — | HH:mm:ss |
| valueFormat | 绑定值的格式 | string | — | YYYY/MM/DD HH:mm:ss | | valueFormat | 绑定值的格式 | string | — | YYYY/MM/DD HH:mm:ss |
| defaultTime | 默认时间 | Date[] | — | — | | defaultTime | 默认时间 | Date[] | — | — |
| onChange | 值变化时触发的函数 | [OnChangeHandler](https://github.com/Tencent/tmagic-editor/blob/cce8b63fc3618b5b811aa33c703de21c22be8a6a/packages/form-schema/src/base.ts#L30) | — | - | | onChange | 值变化时触发的函数 | [OnChangeHandler](https://github.com/Tencent/tmagic-editor/blob/master/packages/form/src/schema.ts) | — | - |

View File

@ -10,7 +10,6 @@
text: '日期时间选择器' text: '日期时间选择器'
}]"> }]">
<template #source> <template #source>
<p> <p>
通过设置 <code>type: 'datetime'</code> 使用日期时间选择器,可以同时选择日期和时间。 通过设置 <code>type: 'datetime'</code> 使用日期时间选择器,可以同时选择日期和时间。
</p> </p>
@ -26,7 +25,6 @@
placeholder: '请选择日期时间' placeholder: '请选择日期时间'
}]"> }]">
<template #source> <template #source>
<p> <p>
通过 <code>placeholder</code> 属性设置输入框的占位文本。 通过 <code>placeholder</code> 属性设置输入框的占位文本。
</p> </p>
@ -42,7 +40,6 @@
disabled: () => true disabled: () => true
}]"> }]">
<template #source> <template #source>
<p> <p>
通过 <code>disabled</code> 属性禁用日期时间选择器,支持布尔值或函数。 通过 <code>disabled</code> 属性禁用日期时间选择器,支持布尔值或函数。
</p> </p>
@ -60,7 +57,7 @@
::: :::
| 格式 | 含义 | 备注 | 举例 | | 格式 | 含义 | 备注 | 举例 |
| ------ | ---------------- | ------------------------------------- | ------------- | |------|------|------|------|
| `YYYY` | 年 | | 2017 | | `YYYY` | 年 | | 2017 |
| `M` | 月 | 不补0 | 1 | | `M` | 月 | 不补0 | 1 |
| `MM` | 月 | | 01 | | `MM` | 月 | | 01 |
@ -87,7 +84,6 @@
valueFormat: 'x' valueFormat: 'x'
}]"> }]">
<template #source> <template #source>
<p> <p>
自定义格式化:显示格式为 <code>YYYY-MM-DD HH:mm</code>,绑定值格式为时间戳。 自定义格式化:显示格式为 <code>YYYY-MM-DD HH:mm</code>,绑定值格式为时间戳。
</p> </p>
@ -97,12 +93,12 @@
## Attributes ## Attributes
| 参数 | 说明 | 类型 | 可选值 | 默认值 | | 参数 | 说明 | 类型 | 可选值 | 默认值 |
| ----------- | ---------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------- | ------------------- | |---------- |-------------- |---------- |-------------------------------- |-------- |
| name | 绑定值的字段名 | string | — | — | | name | 绑定值的字段名 | string | — | — |
| text | 表单标签 | string | — | — | | text | 表单标签 | string | — | — |
| placeholder | 输入框占位文本 | 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](https://github.com/Tencent/tmagic-editor/blob/master/packages/form/src/schema.ts) | — | false |
| format | 显示在输入框中的格式 | string | 见[日期格式](#日期格式) | YYYY/MM/DD HH:mm:ss | | format | 显示在输入框中的格式 | string | 见[日期格式](#日期格式) | YYYY/MM/DD HH:mm:ss |
| valueFormat | 绑定值的格式 | string | 见[日期格式](#日期格式) | YYYY/MM/DD HH:mm:ss | | valueFormat | 绑定值的格式 | string | 见[日期格式](#日期格式) | YYYY/MM/DD HH:mm:ss |
| defaultTime | 选择日期后的默认时间值 | Date | — | — | | defaultTime | 选择日期后的默认时间值 | Date | — | — |
| onChange | 值变化时触发的函数 | [OnChangeHandler](https://github.com/Tencent/tmagic-editor/blob/cce8b63fc3618b5b811aa33c703de21c22be8a6a/packages/form-schema/src/base.ts#L30) | — | — | | onChange | 值变化时触发的函数 | [OnChangeHandler](https://github.com/Tencent/tmagic-editor/blob/master/packages/form/src/schema.ts) | — | — |

View File

@ -1,3 +1,4 @@
# Display 只读文本 # Display 只读文本
用于显示,不可编辑 用于显示,不可编辑
@ -6,11 +7,11 @@
```typescript ```typescript
interface Display extends FormItem { interface Display extends FormItem {
type: "display"; type: 'display';
} }
``` ```
点击查看[FormItem](https://github.com/Tencent/tmagic-editor/blob/cce8b63fc3618b5b811aa33c703de21c22be8a6a/packages/form-schema/src/base.ts#L90)的定义 点击查看[FormItem](https://github.com/Tencent/tmagic-editor/blob/master/packages/form/src/schema.ts)的定义
## 基础用法 ## 基础用法
@ -27,9 +28,9 @@ interface Display extends FormItem {
</template> </template>
</demo-block> </demo-block>
## Input Attributes
## Input Attributes
| 参数 | 说明 | 类型 | 可选值 | 默认值 | | 参数 | 说明 | 类型 | 可选值 | 默认值 |
| ---- | -------- | ------ | ------ | ------ | |---------- |-------- |---------- |------------- |-------- |
| name | 绑定值 | string | — | — | | name | 绑定值 | string | — | — |
| text | 表单标签 | string | — | — | | text | 表单标签 | string | — | — |

View File

@ -9,8 +9,8 @@
name: 'type', name: 'type',
text: '类型', text: '类型',
options: [ options: [
{ text: '类型A', value: 'a' }, { label: '类型A', value: 'a' },
{ text: '类型B', value: 'b' } { label: '类型B', value: 'b' }
] ]
}, { }, {
type: 'dynamic-field', type: 'dynamic-field',

View File

@ -6,11 +6,11 @@
```typescript ```typescript
interface Hidden extends FormItem { interface Hidden extends FormItem {
type: "hidden"; type: 'hidden';
} }
``` ```
点击查看[FormItem](https://github.com/Tencent/tmagic-editor/blob/cce8b63fc3618b5b811aa33c703de21c22be8a6a/packages/form-schema/src/base.ts#L90)的定义 点击查看[FormItem](https://github.com/Tencent/tmagic-editor/blob/master/packages/form/src/schema.ts)的定义
## 基础用法 ## 基础用法
@ -25,8 +25,8 @@ interface Hidden extends FormItem {
</template> </template>
</demo-block> </demo-block>
## Input Attributes
## Input Attributes
| 参数 | 说明 | 类型 | 可选值 | 默认值 | | 参数 | 说明 | 类型 | 可选值 | 默认值 |
| ---- | ------ | ------ | ------ | ------ | |---------- |-------- |---------- |------------- |-------- |
| name | 绑定值 | string | — | — | | name | 绑定值 | string | — | — |

View File

@ -6,7 +6,7 @@
```typescript ```typescript
interface Link extends FormItem { interface Link extends FormItem {
type: "link"; type: 'link';
href?: string | typeof LinkHrefFunction; href?: string | typeof LinkHrefFunction;
css?: { css?: {
[key: string]: string | number; [key: string]: string | number;
@ -18,11 +18,10 @@ interface Link extends FormItem {
formWidth?: number | string; formWidth?: number | string;
displayText?: string | typeof LinkDisplayTextFunction; displayText?: string | typeof LinkDisplayTextFunction;
form: FormConfig | typeof LinkFormFunction; form: FormConfig | typeof LinkFormFunction;
fullscreen?: boolean;
} }
``` ```
点击查看[FormItem](https://github.com/Tencent/tmagic-editor/blob/cce8b63fc3618b5b811aa33c703de21c22be8a6a/packages/form-schema/src/base.ts#L90)的定义 点击查看[FormItem](https://github.com/Tencent/tmagic-editor/blob/master/packages/form/src/schema.ts)的定义
## 基础用法 ## 基础用法
@ -34,7 +33,7 @@ interface Link extends FormItem {
}]"> }]">
<template #source> <template #source>
<p> <p>
通过配置 href点击链接可跳转到指定地址。 在开启多选模式后默认情况下会展示所有已选中的选项的Tag
</p> </p>
</template> </template>
</demo-block> </demo-block>
@ -52,14 +51,14 @@ interface Link extends FormItem {
}]"> }]">
<template #source> <template #source>
<p> <p>
通过配置 form点击链接打开一个弹窗表单进行编辑。 在开启多选模式后默认情况下会展示所有已选中的选项的Tag
</p> </p>
</template> </template>
</demo-block> </demo-block>
## Input Attributes
## Input Attributes
| 参数 | 说明 | 类型 | 可选值 | 默认值 | | 参数 | 说明 | 类型 | 可选值 | 默认值 |
| ---- | -------- | ------ | ------ | ------ | |---------- |-------- |---------- |------------- |-------- |
| name | 绑定值 | string | — | — | | name | 绑定值 | string | — | — |
| text | 表单标签 | string | — | — | | text | 表单标签 | string | — | — |

View File

@ -10,7 +10,6 @@
text: '数字范围' text: '数字范围'
}]"> }]">
<template #source> <template #source>
<p> <p>
type为'number-range' type为'number-range'
</p> </p>
@ -18,11 +17,10 @@ type为'number-range'
</demo-block> </demo-block>
## Attributes ## Attributes
| 参数 | 说明 | 类型 | 可选值 | 默认值 | | 参数 | 说明 | 类型 | 可选值 | 默认值 |
| --------- | ----------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------- | ------ | ------ | |---------- |-------------- |---------- |-------------------------------- |-------- |
| name | 绑定值(数组形式 [min, max] | string | — | — | | name | 绑定值(数组形式 [min, max] | string | — | — |
| text | 表单标签 | 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](https://github.com/Tencent/tmagic-editor/blob/master/packages/form/src/schema.ts) | — | false |
| clearable | 是否可清空 | boolean | — | true | | clearable | 是否可清空 | boolean | — | true |
| onChange | 值变化时触发的函数 | [OnChangeHandler](https://github.com/Tencent/tmagic-editor/blob/cce8b63fc3618b5b811aa33c703de21c22be8a6a/packages/form-schema/src/base.ts#L30) | — | - | | onChange | 值变化时触发的函数 | [OnChangeHandler](https://github.com/Tencent/tmagic-editor/blob/master/packages/form/src/schema.ts) | — | - |

View File

@ -10,7 +10,6 @@
text: '计数器' text: '计数器'
}]"> }]">
<template #source> <template #source>
<p> <p>
type为'number' type为'number'
</p> </p>
@ -26,7 +25,6 @@ type为'number'
disabled: () => true disabled: () => true
}]"> }]">
<template #source> <template #source>
<p> <p>
disabled 属性接受一个 Boolean设置为 true 即可禁用整个组件,也可以接受一个返回 Boolean 的函数,如果你只需要控制数值在某一范围内,可以设置 min 属性和 max 属性,不设置 min 和 max 时,最小值为 0。 disabled 属性接受一个 Boolean设置为 true 即可禁用整个组件,也可以接受一个返回 Boolean 的函数,如果你只需要控制数值在某一范围内,可以设置 min 属性和 max 属性,不设置 min 和 max 时,最小值为 0。
</p> </p>
@ -44,23 +42,22 @@ disabled 属性接受一个 Boolean设置为 true 即可禁用整个组件,
step: 10 step: 10
}]"> }]">
<template #source> <template #source>
<p> <p>
设置 step 属性可以控制步长,接受一个 Number 。 设置 step 属性可以控制步长,接受一个 Number 。
</p> </p>
</template> </template>
</demo-block> </demo-block>
## Attributes
## Attributes
| 参数 | 说明 | 类型 | 可选值 | 默认值 | | 参数 | 说明 | 类型 | 可选值 | 默认值 |
| ----------- | ---------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------- | ------ | --------- | |----------|-------------- |----------|-------------------------------- |-------- |
| name | 绑定值 | string | — | — | | name | 绑定值 | string | — | — |
| text | 表单标签 | string | — | — | | text | 表单标签 | string | — | — |
| placeholder | 输入框占位文本 | 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](https://github.com/Tencent/tmagic-editor/blob/master/packages/form/src/schema.ts) | — | false |
| min | 设置计数器允许的最小值 | number | — | -Infinity | | min | 设置计数器允许的最小值 | number | — | -Infinity |
| max | 设置计数器允许的最大值 | number | — | Infinity | | max | 设置计数器允许的最大值 | number | — | Infinity |
| step | 计数器步长 | number | — | 1 | | step | 计数器步长 | number | — | 1 |
| tooltip | 输入框提示信息 | string | — | — | | tooltip | 输入框提示信息 | string | — | — |
| onChange | 值变化时触发的函数 | [OnChangeHandler](https://github.com/Tencent/tmagic-editor/blob/cce8b63fc3618b5b811aa33c703de21c22be8a6a/packages/form-schema/src/base.ts#L30) | — | - | | onChange | 值变化时触发的函数 | [OnChangeHandler](https://github.com/Tencent/tmagic-editor/blob/master/packages/form/src/schema.ts) | — | - |

View File

@ -6,18 +6,15 @@
```typescript ```typescript
interface RadioGroup extends FormItem { interface RadioGroup extends FormItem {
type: "radio-group"; type: 'radio-group';
childType?: "default" | "button";
options: { options: {
value: any; value: any;
text?: string; text: string;
icon?: any;
tooltip?: string;
}[]; }[];
} }
``` ```
点击查看[FormItem](https://github.com/Tencent/tmagic-editor/blob/cce8b63fc3618b5b811aa33c703de21c22be8a6a/packages/form-schema/src/base.ts#L90)的定义 点击查看[FormItem](https://github.com/Tencent/tmagic-editor/blob/master/packages/form/src/schema.ts)的定义
## 基础用法 ## 基础用法
@ -33,7 +30,6 @@ interface RadioGroup extends FormItem {
] ]
}]"> }]">
<template #source> <template #source>
<p> <p>
要使用 Radio 组件只需要配置type: 'radio-group'。 要使用 Radio 组件只需要配置type: 'radio-group'。
</p> </p>
@ -55,7 +51,6 @@ interface RadioGroup extends FormItem {
disabled: () => true disabled: () => true
}]"> }]">
<template #source> <template #source>
<p> <p>
只要在配置中设置 disabled 属性即可,它接受一个 Boolean true 为禁用,也可以接受一个返回 Boolean 的函数。 只要在配置中设置 disabled 属性即可,它接受一个 Boolean true 为禁用,也可以接受一个返回 Boolean 的函数。
</p> </p>
@ -63,21 +58,10 @@ interface RadioGroup extends FormItem {
</demo-block> </demo-block>
## RadioGroup Attributes ## RadioGroup Attributes
| 参数 | 说明 | 类型 | 可选值 | 默认值 | | 参数 | 说明 | 类型 | 可选值 | 默认值 |
| --------- | ------------------ | -------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------- | ------- | |---------- |-------- |---------- |------------- |-------- |
| name | 绑定值 | string | — | — | | name | 绑定值 | string | — | — |
| text | 表单标签 | 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](https://github.com/Tencent/tmagic-editor/blob/master/packages/form/src/schema.ts) | — | false |
| childType | 子项展示形式 | string | default / button | default |
| options | 选项 | Array | — | - | | options | 选项 | Array | — | - |
| onChange | 值变化时触发的函数 | [OnChangeHandler ](https://github.com/Tencent/tmagic-editor/blob/cce8b63fc3618b5b811aa33c703de21c22be8a6a/packages/form-schema/src/base.ts#L30) | — | - | | onChange | 值变化时触发的函数 | [OnChangeHandler ](https://github.com/Tencent/tmagic-editor/blob/master/packages/form/src/schema.ts) | — | - |
## options item
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
| ------- | ------------------------ | ------------------------- | ------ | ------ |
| value | 选项的值 | string / number / boolean | — | — |
| text | 选项的标签 | string | — | — |
| icon | 选项的图标组件 | any | — | — |
| tooltip | 鼠标悬停时显示的提示内容 | string | — | — |

View File

@ -17,7 +17,6 @@
] ]
}]"> }]">
<template #source> <template #source>
<p> <p>
type为'select' type为'select'
</p> </p>
@ -37,9 +36,8 @@ type为'select'
] ]
}]"> }]">
<template #source> <template #source>
<p> <p>
在 options 选项配置中,设定 disabled 值为 true即可禁用该选项 在 opitons 选项配置中,设定 disabled 值为 true即可禁用该选项
</p> </p>
</template> </template>
</demo-block> </demo-block>
@ -60,7 +58,6 @@ type为'select'
] ]
}]"> }]">
<template #source> <template #source>
<p> <p>
为 el-select 设置 disabled 属性,则整个选择器不可用 为 el-select 设置 disabled 属性,则整个选择器不可用
</p> </p>
@ -114,7 +111,6 @@ type为'select'
] ]
}]"> }]">
<template #source> <template #source>
<p> <p>
配置group为true 配置group为true
</p> </p>
@ -160,7 +156,6 @@ type为'select'
} }
}]"> }]">
<template #source> <template #source>
<p> <p>
配置remote为true然后配置option而不是options 配置remote为true然后配置option而不是options
</p> </p>
@ -168,7 +163,6 @@ type为'select'
</demo-block> </demo-block>
同时在 `src/main.ts` 中需要自定义实现请求 同时在 `src/main.ts` 中需要自定义实现请求
```typescript ```typescript
app.use(MagicForm, { app.use(MagicForm, {
request: async (options: any) => { request: async (options: any) => {
@ -182,26 +176,24 @@ app.use(MagicForm, {
::: :::
## Select Attributes ## Select Attributes
| 参数 | 说明 | 类型 | 可选值 | 默认值 | | 参数 | 说明 | 类型 | 可选值 | 默认值 |
| ----------- | ------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------- | ------ | ------ | |---------- |-------------- |---------- |-------------------------------- |-------- |
| name | 绑定值 | string | — | — | | name | 绑定值 | string | — | — |
| placeholder | 输入框占位文本 | string | — | — | | placeholder | 输入框占位文本 | string | — | — |
| text | 表单标签 | 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](https://github.com/Tencent/tmagic-editor/blob/master/packages/form/src/schema.ts) | — | false |
| multiple | 是否多选 | boolean | — | false | | multiple | 是否多选 | boolean | — | false |
| valueKey | 作为 value 唯一标识的键名,绑定值为对象类型时必填 | string | — | value | | valueKey | 作为 value 唯一标识的键名,绑定值为对象类型时必填 | string | — | value |
| allowCreate | 是否允许用户创建新条目 | boolean | — | false | | allowCreate | 是否允许用户创建新条目 | boolean | — | false |
| remote | 是否为远程搜索 | boolean | — | false | | remote | 是否为远程搜索 | boolean | — | false |
| group | 是否选择分组 | boolean | — | false | | group | 是否选择分组 | boolean | — | false |
| onChange | 值变化时触发的函数 | [OnChangeHandler ](https://github.com/Tencent/tmagic-editor/blob/cce8b63fc3618b5b811aa33c703de21c22be8a6a/packages/form-schema/src/base.ts#L90) | — | - | | onChange | 值变化时触发的函数 | [OnChangeHandler ](https://github.com/Tencent/tmagic-editor/blob/master/packages/form/src/schema.ts) | — | - |
| options | 选项 | Array | — | - | | options | 选项 | Array | — | - |
| option | 选项 | Object | — | - | | option | 选项 | Object | — | - |
## options item ## options item
| 参数 | 说明 | 类型 | 可选值 | 默认值 | | 参数 | 说明 | 类型 | 可选值 | 默认值 |
| -------- | -------- | ---------- | -------------------- | ------ | --- | |---------- |-------------- |---------- |-------------------------------- |-------- |
| text | | 选项的标签 | string/number/object | — | — | | text | | 选项的标签 | string/number/object | — | — |
| value | 选项的值 | string | — | — | | value | 选项的值 | string | — | — |
| disabled | 是否禁用 | boolean | — | false | | disabled | 是否禁用 | boolean | — | false |
@ -209,9 +201,8 @@ app.use(MagicForm, {
| options | Array | — | — | — | | options | Array | — | — | — |
## option ## option
| 参数 | 说明 | 类型 | 可选值 | 默认值 | | 参数 | 说明 | 类型 | 可选值 | 默认值 |
| ----- | ----------------- | ---- | ------ | ------ | |---------- |-------------- |---------- |-------------------------------- |-------- |
| url | string | — | — | — | | url | string | — | — | — |
| root | string | — | — | — | | root | string | — | — | — |
| text | string / Function | — | — | — | | text | string / Function | — | — | — |

View File

@ -41,11 +41,12 @@
</template> </template>
</demo-block> </demo-block>
## Attributes ## Attributes
| 参数 | 说明 | 类型 | 可选值 | 默认值 | | 参数 | 说明 | 类型 | 可选值 | 默认值 |
| -------------- | ----------------- | ------------------------------------------------------------------------------------------------------------------------------------------------- | ------ | ------ | |---------- |-------- |---------- |------------- |-------- |
| name | 绑定值 | string | — | — | | name | 绑定值 | string | — | — |
| disabled | 是否禁用 | boolean / [Function](https://github.com/Tencent/tmagic-editor/blob/cce8b63fc3618b5b811aa33c703de21c22be8a6a/packages/form-schema/src/base.ts#L90) | — | false | | disabled | 是否禁用 | boolean / [Function](https://github.com/Tencent/tmagic-editor/blob/master/packages/form/src/schema.ts) | — | false |
| active-value | switch 打开时的值 | boolean / string / number | — | true | | active-value | switch 打开时的值 | boolean / string / number | — | true |
| inactive-value | switch 关闭时的值 | boolean / string / number | — | false | | inactive-value | switch 关闭时的值 | boolean / string / number | — | false |

View File

@ -9,13 +9,13 @@
text: '输入框' text: '输入框'
}]"> }]">
<template #source> <template #source>
<p> <p>
Input输入框的type为'text', 是type的默认值所以可以不配置 Input输入框的type为'text', 是type的默认值所以可以不配置
</p> </p>
</template> </template>
</demo-block> </demo-block>
## 禁用状态 ## 禁用状态
<demo-block type="form" :config="[{ <demo-block type="form" :config="[{
@ -24,7 +24,6 @@ Input输入框的type为'text', 是type的默认值所以可以不配置
disabled: () => true disabled: () => true
}]"> }]">
<template #source> <template #source>
<p> <p>
通过 disabled 属性指定是否禁用 input 组件 通过 disabled 属性指定是否禁用 input 组件
</p> </p>
@ -41,7 +40,6 @@ Input输入框的type为'text', 是type的默认值所以可以不配置
append: '公斤' append: '公斤'
}]"> }]">
<template #source> <template #source>
<p> <p>
可以通过配置append来增加一个后置内容。 可以通过配置append来增加一个后置内容。
</p> </p>
@ -54,13 +52,12 @@ Input输入框的type为'text', 是type的默认值所以可以不配置
append: { append: {
type: 'button', type: 'button',
text: '操作', text: '操作',
handler: (mForm, { model, values, formValue, setModel, setFormValue }) => { handler: (vm) => {
// 处理逻辑 vm.$message(vm.mForm.values.text);
} }
} }
}]"> }]">
<template #source> <template #source>
<p> <p>
可以通过配置append来增加一个后置按钮。 可以通过配置append来增加一个后置按钮。
</p> </p>
@ -75,7 +72,6 @@ Input输入框的type为'text', 是type的默认值所以可以不配置
filter: 'number' filter: 'number'
}]"> }]">
<template #source> <template #source>
<p> <p>
设置filter为'number',可以将值转换成数值,也可以配置一个函数来自由转换。 设置filter为'number',可以将值转换成数值,也可以配置一个函数来自由转换。
</p> </p>
@ -90,7 +86,6 @@ Input输入框的type为'text', 是type的默认值所以可以不配置
trim: true trim: true
}]"> }]">
<template #source> <template #source>
<p> <p>
设置trim为true',可以去掉首尾空格。 设置trim为true',可以去掉首尾空格。
</p> </p>
@ -105,33 +100,30 @@ Input输入框的type为'text', 是type的默认值所以可以不配置
tooltip: true tooltip: true
}]"> }]">
<template #source> <template #source>
<p> <p>
通过配置 tooltip在输入时显示提示内容。 在开启多选模式后默认情况下会展示所有已选中的选项的Tag
</p> </p>
</template> </template>
</demo-block> </demo-block>
## Input Attributes ## Input Attributes
| 参数 | 说明 | 类型 | 可选值 | 默认值 | | 参数 | 说明 | 类型 | 可选值 | 默认值 |
| ----------- | ------------------ | --------------------------------------------------------------------------------------------------------------------------------------------------------- | ------ | ------ | |---------- |-------- |---------- |------------- |-------- |
| name | 绑定值 | string | — | — | | name | 绑定值 | string | — | — |
| text | 表单标签 | string | — | — | | text | 表单标签 | string | — | — |
| placeholder | 输入框占位文本 | 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](https://github.com/Tencent/tmagic-editor/blob/master/packages/form/src/schema.ts) | — | false |
| clearable | 是否可清空 | boolean | — | true | | clearable | 是否可清空 | boolean | — | true |
| tooltip | 输入时显示内容 | string / [ToolTipConfigType](https://github.com/Tencent/tmagic-editor/blob/cce8b63fc3618b5b811aa33c703de21c22be8a6a/packages/form-schema/src/base.ts#L90) | — | — | | tooltip | 输入时显示内容 | string | — | — |
| trim | 是否去掉首尾空格 | boolean | — | false | | trim | 是否去掉首尾空格 | boolean | — | false |
| filter | 过滤值 | string / Function | number | - | | filter | 过滤值 | string / Function | number | - |
| prepend | 前置内容 | string | — | - | | prepend | 前置内容 | string | — | - |
| append | 后置内容 | string / Object | — | - | | append | 后置内容 | string / Object | — | - |
| onChange | 值变化时触发的函数 | [OnChangeHandler](https://github.com/Tencent/tmagic-editor/blob/cce8b63fc3618b5b811aa33c703de21c22be8a6a/packages/form-schema/src/base.ts#L30) | — | - | | onChange | 值变化时触发的函数 | [OnChangeHandler](https://github.com/Tencent/tmagic-editor/blob/master/packages/form/src/schema.ts) | — | - |
## append Attributes ## append Attributes
| 参数 | 说明 | 类型 | 可选值 | 默认值 | | 参数 | 说明 | 类型 | 可选值 | 默认值 |
| ------- | -------- | -------- | ------ | ------ | |---------- |-------- |---------- |------------- |-------- |
| type | 内容类型 | string | button | — | | type | 内容类型 | string | button | — |
| text | 文本内容 | string | — | — | | text | 文本内容 | string | — | — |
| handler | 点击操作 | Function | — | - | | handler | 点击操作 | Function | — | - |

View File

@ -8,7 +8,6 @@
text: '文本域' text: '文本域'
}]"> }]">
<template #source> <template #source>
<p> <p>
在开启多选模式后默认情况下会展示所有已选中的选项的Tag 在开启多选模式后默认情况下会展示所有已选中的选项的Tag
</p> </p>
@ -24,7 +23,6 @@
disabled: () => true disabled: () => true
}]"> }]">
<template #source> <template #source>
<p> <p>
通过 disabled 属性指定是否禁用 input 组件 通过 disabled 属性指定是否禁用 input 组件
</p> </p>
@ -32,14 +30,13 @@
</demo-block> </demo-block>
## Input Attributes ## Input Attributes
| 参数 | 说明 | 类型 | 可选值 | 默认值 | | 参数 | 说明 | 类型 | 可选值 | 默认值 |
| ----------- | ------------------ | -------------------------------------------------------------------------------------------------------------------------------------------------------- | ------ | ------ | |---------- |-------- |---------- |------------- |-------- |
| name | 绑定值 | string | — | — | | name | 绑定值 | string | — | — |
| placeholder | 输入框占位文本 | string | — | — | | placeholder | 输入框占位文本 | string | — | — |
| text | 表单标签 | 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](https://github.com/Tencent/tmagic-editor/blob/master/packages/form/src/schema.ts) | — | false |
| placeholder | 输入框占位文本 | string | — | — | | placeholder | 输入框占位文本 | string | — | — |
| trim | 是否去掉首尾空格 | boolean | — | false | | trim | 是否去掉首尾空格 | boolean | — | false |
| filter | 过滤值 | string / Function | number | - | | filter | 过滤值 | string / Function | number | - |
| onChange | 值变化时触发的函数 | [OnChangeHandler ](https://github.com/Tencent/tmagic-editor/blob/cce8b63fc3618b5b811aa33c703de21c22be8a6a/packages/form-schema/src/base.ts#L90) | — | - | | onChange | 值变化时触发的函数 | [OnChangeHandler ](https://github.com/Tencent/tmagic-editor/blob/master/packages/form/src/schema.ts) | — | - |

View File

@ -31,11 +31,11 @@
</template> </template>
</demo-block> </demo-block>
## Attributes
## Attributes
| 参数 | 说明 | 类型 | 可选值 | 默认值 | | 参数 | 说明 | 类型 | 可选值 | 默认值 |
| ----------- | -------------- | ------------------------------------------------------------------------------------------------------------------------------------------------- | ------ | ------ | |---------- |-------------- |---------- |-------------------------------- |-------- |
| name | 绑定值 | string | — | — | | name | 绑定值 | string | — | — |
| placeholder | 输入框占位文本 | string | — | — | | placeholder | 输入框占位文本 | string | — | — |
| text | 表单标签 | string | — | — | | text | 表单标签 | string | — | — |
| disabled | 是否禁用 | boolean / [Function](https://github.com/Tencent/tmagic-editor/blob/cce8b63fc3618b5b811aa33c703de21c22be8a6a/packages/form-schema/src/base.ts#L90) | — | false | | disabled | 是否禁用 | boolean / [Function](https://github.com/Tencent/tmagic-editor/blob/master/packages/form/src/schema.ts) | — | false |

View File

@ -10,7 +10,6 @@
text: '时间范围' text: '时间范围'
}]"> }]">
<template #source> <template #source>
<p> <p>
type为'timerange' type为'timerange'
</p> </p>
@ -27,7 +26,6 @@ type为'timerange'
text: '时间范围' text: '时间范围'
}]"> }]">
<template #source> <template #source>
<p> <p>
配置 names 属性,将开始时间和结束时间分别绑定到 startTime 和 endTime 字段。 配置 names 属性,将开始时间和结束时间分别绑定到 startTime 和 endTime 字段。
</p> </p>
@ -35,14 +33,13 @@ type为'timerange'
</demo-block> </demo-block>
## Attributes ## Attributes
| 参数 | 说明 | 类型 | 可选值 | 默认值 | | 参数 | 说明 | 类型 | 可选值 | 默认值 |
| ----------- | ------------------------ | -------------------------------------------------------------------------------------------------------------------------------------------------------- | ------ | -------- | |---------- |-------------- |---------- |-------------------------------- |-------- |
| name | 绑定值(数组形式) | string | — | — | | name | 绑定值(数组形式) | string | — | — |
| names | 绑定值(拆分为两个字段) | string[] | — | — | | names | 绑定值(拆分为两个字段) | string[] | — | — |
| text | 表单标签 | 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](https://github.com/Tencent/tmagic-editor/blob/master/packages/form/src/schema.ts) | — | false |
| format | 显示格式 | string | — | HH:mm:ss | | format | 显示格式 | string | — | HH:mm:ss |
| valueFormat | 绑定值的格式 | string | — | HH:mm:ss | | valueFormat | 绑定值的格式 | string | — | HH:mm:ss |
| defaultTime | 默认时间 | Date[] | — | — | | defaultTime | 默认时间 | Date[] | — | — |
| onChange | 值变化时触发的函数 | [OnChangeHandler](https://github.com/Tencent/tmagic-editor/blob/cce8b63fc3618b5b811aa33c703de21c22be8a6a/packages/form-schema/src/base.ts#L30) | — | - | | onChange | 值变化时触发的函数 | [OnChangeHandler](https://github.com/Tencent/tmagic-editor/blob/master/packages/form/src/schema.ts) | — | - |

View File

@ -9,7 +9,7 @@
}, { }, {
name: 'text2', name: 'text2',
text: '配置2', text: '配置2',
display: (mForm, { model }) => model.switch display: (state, { model }) => model.switch
}]"></demo-block> }]"></demo-block>
## 输入关联 ## 输入关联
@ -17,14 +17,14 @@
<demo-block type="form" :config="[{ <demo-block type="form" :config="[{
name: 'firstName', name: 'firstName',
text: '名', text: '名',
onChange: (mForm, v, { model }) => { onChange: (state, v, { model }) => {
model.fullName = `${model.lastName}${model.firstName}` model.fullName = `${model.lastName}${model.firstName}`
}, },
defaultValue: '三' defaultValue: '三'
}, { }, {
name: 'lastName', name: 'lastName',
text: '姓', text: '姓',
onChange: (mForm, v, { model }) => { onChange: (state, v, { model }) => {
model.fullName = `${model.lastName}${model.firstName}` model.fullName = `${model.lastName}${model.firstName}`
}, },
defaultValue: '张' defaultValue: '张'

View File

@ -10,7 +10,7 @@
下面将主要介绍代码块的实现原理包含dsl结构定义以及代码块挂载执行时机等 下面将主要介绍代码块的实现原理包含dsl结构定义以及代码块挂载执行时机等
## 协议描述 ## 协议描述
我们将在线编写的代码内容保存在[DSL](../advanced/js-schema.md)中与app同一层级这样的好处是代码块可以在同一活动不同页面中实现灵活编排。 我们将在线编写的代码内容保存在[DSL](../advanced/js-schema.md)中与app同一层级这样的好处是代码块可以在同一活动不同页面中实现灵活编排。
类型定义参见[CodeBlockDSL](https://github.com/Tencent/tmagic-editor/blob/master/packages/schema/src/index.ts)。 类型定义参见[CodeBlockDsl](https://github.com/Tencent/tmagic-editor/blob/c143a5f7670ae61d80c1a2cfcc780cfb5259849d/packages/schema/src/index.ts#L75)。
```javascript ```javascript
[{ [{
@ -36,14 +36,14 @@
}] }]
``` ```
在页面中创建代码块也就是会将新的代码内容添加到DSL中的codeBlocks对象并保存下来这里涉及的逻辑可以参见CodeBlock类中的[setCodeDslById](https://github.com/Tencent/tmagic-editor/blob/c143a5f7670ae61d80c1a2cfcc780cfb5259849d/packages/editor/src/services/codeBlock.ts#L107)方法。 在页面中创建代码块也就是会将新的代码内容添加到DSL中的codeBlocks数组并保存下来这里涉及的逻辑可以参见CodeBlock类中的[setCodeDslById](https://github.com/Tencent/tmagic-editor/blob/c143a5f7670ae61d80c1a2cfcc780cfb5259849d/packages/editor/src/services/codeBlock.ts#L107)方法。
并且可以在编辑器左侧的“代码块”tab下看到当前活动的代码块列表 并且可以在编辑器左侧的“代码块”tab下看到当前活动的代码块列表
<img src="/code-block.png" alt="代码块列表"> <img src="/code-block.png" alt="代码块列表">
## 组件绑定 ## 组件绑定
代码块的初衷是为了实现对组件逻辑的在线干预代码执行的时机平台提供了组件created, mounted两个钩子因此我们需要将创建的代码与组件进行关联。 代码块的初衷是为了实现对组件逻辑的在线干预代码执行的时机平台提供了组件created, mounted两个钩子因此我们需要将创建的代码与组件进行关联。
<img src="https://vip.image.video.qpic.cn/vupload/20230228/4a34a11677585505930.png" alt="组件绑定代码块"> <img src="https://vip.image.video.qpic.cn/vupload/20230228/4a34a11677585505930.png" alt="组件绑定代码块">
选中组件之后,在组件配置-高级tab下需要支持下拉选择代码块以及代码参数的输入。由于每一个组件绑定代码块的需求都是相同的因此这一部分我们可以抽出为公共的表单配置相关的逻辑处理在[prop文件](https://github.com/Tencent/tmagic-editor/blob/master/packages/editor/src/utils/props.ts)中我们在高级tab下统一添加了名为created和mounted两个配置项表单组件使用了自定义的'code-select'。前面已经提过表单组件会按照type字段来进行渲染即 :is="${type}"[CodeSelect](https://github.com/Tencent/tmagic-editor/blob/c143a5f7670ae61d80c1a2cfcc780cfb5259849d/packages/editor/src/fields/CodeSelect.vue)组件是在editor中自定义的 选中组件之后,在组件配置-高级tab下需要支持下拉选择代码块以及代码参数的输入。由于每一个组件绑定代码块的需求都是相同的因此这一部分我们可以抽出为公共的表单配置相关的逻辑处理在[prop文件](https://github.com/Tencent/tmagic-editor/blob/c143a5f7670ae61d80c1a2cfcc780cfb5259849d/packages/editor/src/utils/props.ts#L223)中我们在高级tab下统一添加了名为created和mounted两个配置项表单组件使用了自定义的'code-select'。前面已经提过表单组件会按照type字段来进行渲染即 :is="${type}"[CodeSelect](https://github.com/Tencent/tmagic-editor/blob/c143a5f7670ae61d80c1a2cfcc780cfb5259849d/packages/editor/src/fields/CodeSelect.vue)组件是在editor中自定义的
完成绑定的动作实质就是在组件配置中增加与代码块的映射关系 完成绑定的动作实质就是在组件配置中增加与代码块的映射关系
```javascript ```javascript
@ -70,9 +70,9 @@
## 代码内容注入与执行 ## 代码内容注入与执行
在实现代码块创建和绑定操作之后DSL已经包含了代码块执行所需的所有信息接下来我们在页面加载时对代码块进行解析并在适当的时机运行。 在实现代码块创建和绑定操作之后DSL已经包含了代码块执行所需的所有信息接下来我们在页面加载时对代码块进行解析并在适当的时机运行。
由于代码块的执行时机为组件createdmounted因此触发执行的动作需要在runtime中完成对于VUE3来说我们在组件对应的生命周期去触发就可以了react则需要在类似的时间点去触发详细请参见 runtime 相关源码(参考 [runtime 目录](https://github.com/Tencent/tmagic-editor/tree/master/runtime)下的 `vue-runtime-help``react-runtime-help` 由于代码块的执行时机为组件createdmounted因此触发执行的动作需要在runtime中完成对于VUE3来说我们在组件对应的生命周期去触发就可以了react则需要在类似的时间点去触发详细请参见[ui](https://github.com/Tencent/tmagic-editor/blob/master/packages/ui/src/useApp.ts#L29)
接收事件的动作是在[Core](https://github.com/Tencent/tmagic-editor/blob/c143a5f7670ae61d80c1a2cfcc780cfb5259849d/packages/core/src/Node.ts)中完成的请记得前面提到过Core主要负责对组件进行跨框架管理与一些通用复杂逻辑的实现触发时机各个框架不同但接收事件并执行代码块的逻辑与框架无关。[Core/Node 中的 `listenLifeSafe`](https://github.com/Tencent/tmagic-editor/blob/c143a5f7670ae61d80c1a2cfcc780cfb5259849d/packages/core/src/Node.ts#L159)会对生命周期事件进行监听并根据组件绑定的代码块ID拿到具体的代码内容然后执行。在执行调用时我们以 `{ app, params }` 的形式传入了两个参数,其中 `app` 包含了全局的变量,`params` 为组件绑定时针对代码块传入的参数。 接收事件的动作是在[Core](https://github.com/Tencent/tmagic-editor/blob/c143a5f7670ae61d80c1a2cfcc780cfb5259849d/packages/core/src/Node.ts)中完成的请记得前面提到过Core主要负责对组件进行跨框架管理与一些通用复杂逻辑的实现触发时机各个框架不同但接收事件并执行代码块的逻辑与框架无关。[Core/Node](https://github.com/Tencent/tmagic-editor/blob/master/packages/core/src/Node.ts#L56)会对生命周期事件进行监听并根据组件绑定的代码块ID拿到具体的代码内容然后执行。在执行调用时我们以{ app, params }的形式传入了两个参数其中app包含了全局的变量params为组件绑定时针对代码块传入的参数。
至此,我们就完成了代码块创建-绑定-注入-运行。与代码块功能相关的UI界面中我们也提供了丰富的插槽供开发者扩展相关源码请见[sidebar/codeBlock](https://github.com/Tencent/tmagic-editor/tree/master/packages/editor/src/layouts/sidebar/code-block)。 至此,我们就完成了代码块创建-绑定-注入-运行。与代码块功能相关的UI界面中我们也提供了丰富的插槽供开发者扩展相关源码请见[sidebar/codeBlock](https://github.com/Tencent/tmagic-editor/tree/master/packages/editor/src/layouts/sidebar/code-block)。

View File

@ -25,7 +25,7 @@ tmagic-editor的联动指这两种情况
}]`"> }]`">
</demo-block> </demo-block>
在经过表单渲染器时,所有注入的函数 API 都会传入当前渲染的**表单组件实例(vm)****当前项目(value)****当前表单model****表单值formValue**model 即 vue 的[表单输入绑定](https://v3.cn.vuejs.org/guide/forms.html#%E5%9F%BA%E7%A1%80%E7%94%A8%E6%B3%95),可以通过修改他来实现值联动。 在经过表单渲染器时,所有指出函数 API 都会传入当前渲染的**表单组件实例(vm)****当前项目(value)****当前表单model****表单值formValue**model 即 vue 的[表单输入绑定](https://v3.cn.vuejs.org/guide/forms.html#%E5%9F%BA%E7%A1%80%E7%94%A8%E6%B3%95),可以通过修改他来实现值联动。
当然我们也可以通过上述的参数传入,以及其他函数 API 实现更多灵活的表单联动,具体参考[表单 API](../../form-config/relate)。 当然我们也可以通过上述的参数传入,以及其他函数 API 实现更多灵活的表单联动,具体参考[表单 API](../../form-config/relate)。
@ -95,31 +95,28 @@ const onClick = () => {
}; };
// 此处实现事件动作 // 此处实现事件动作
// 注意:示例中的 ElMessage 仅作演示,业务可替换为自己的弹窗工具 const toast = () => {
import { ElMessage } from 'element-plus'; toast('测试 vue3')
const showToast = () => {
ElMessage('测试 vue3');
}; };
// 实际触发时是调用node上的方法所以需要将方法暴露到node上 // 实际触发时是调用node上的方法所以需要将改方法暴露到node上
registerNodeHooks(node, { registerNodeHooks(node, {
toast: showToast, toast,
}); });
defineExpose({ defineExpose({
toast: showToast, toast,
}); });
</script> </script>
``` ```
#### react 版本实现 #### react 版本实现
在 react 的实现中由于tmagic-editor提供的 @tmagic/react-runtime-help 版本是用 hook 实现的。所以组件开发我们也相应的需要使用 hook 方式。 在 react 的实现中由于tmagic-editor提供的 @tmagic/ui-react 版本是用 hook 实现的。所以组件开发我们也相应的需要使用 hook 方式。
```jsx ```jsx
import React from 'react'; import React from 'react';
import { useApp } from '@tmagic/react-runtime-help'; import { useApp } from '@tmagic/ui-react';
function Test({ config }) { function Test({ config }) {
// react 和 vue 实现不同,我们通过 useApp 这个 hook 来提供 app 等核心内容 // react 和 vue 实现不同,我们通过 useApp 这个 hook 来提供 app 等核心内容

View File

@ -59,7 +59,7 @@ formConfig.js
```js ```js
[ [
{ {
type: 'data-source-field-select' type: 'data-source-filed-select'
} }
] ]
``` ```

View File

@ -21,7 +21,7 @@ $ npm install @tmagic/element-plus-adapter @tmagic/design element-plus -S
### 引入 @tmagic/form ### 引入 @tmagic/form
MagicForm 使用了 element-plus 组件 MagicForm 使用了 element-ui
在 main.js 中写入以下内容: 在 main.js 中写入以下内容:
@ -46,9 +46,9 @@ app.mount("#app");
``` ```
以上代码便完成了 @tmagic/form 的引入。需要注意的是Element Plus 的样式文件需要单独引入。 以上代码便完成了 @tmagic/form 的引入。需要注意的是ElementUI 的样式文件需要单独引入。
在 App.vue 中写入以下内容: 在 App.Vue 中写入以下内容:
```html ```html
<m-form :config="config" :init-values="initValue"></m-form> <m-form :config="config" :init-values="initValue"></m-form>

View File

@ -3,15 +3,15 @@
tmagic-editor的设计是希望发布的页面支持多个前端框架即各个业务方可以根据自己熟悉的语言来开发组件、发布页面。也可以通过 [实现一个 runtime](../runtime.html) 的方式,来实现一个自己的 @tmagic/ui tmagic-editor的设计是希望发布的页面支持多个前端框架即各个业务方可以根据自己熟悉的语言来开发组件、发布页面。也可以通过 [实现一个 runtime](../runtime.html) 的方式,来实现一个自己的 @tmagic/ui
所以tmagic-editor的设计中针对每个前端框架都需要有一个对应的 @tmagic/ui 来承担渲染器职责。同时,也需要一个使用和 @tmagic/ui 相同前端框架的 runtime 用来加载 vue-components 和业务组件,具体 runtime 概念,可以参考[页面发布](../publish)。 所以tmagic-editor的设计中针对每个前端框架都需要有一个对应的 @tmagic/ui 来承担渲染器职责。同时,也需要一个使用和 @tmagic/ui 相同前端框架的 runtime @tmagic/ui 和业务组件的,具体 runtime 概念,可以参考[页面发布](../publish)。
我们以项目代码中提供的 vue 版本的 vue-components 作为示例介绍其中包含的内容(参考 `vue-components/` 目录下的源码) 我们以项目代码中提供的 vue 版本的 [vue-components](https://tencent.github.io/tmagic-editor/vue-components) 作为示例介绍其中包含的内容
## 渲染器 ## 渲染器
在 vue 中,实现渲染器的具体形式参考[页面渲染](../advanced/page)中描述的[容器渲染](../advanced/page.html#容器渲染)和[组件渲染](../advanced/page.html#组件渲染)。 在 vue 中,实现渲染器的具体形式参考[页面渲染](../advanced/page)中描述的[容器渲染](../advanced/page.html#容器渲染)和[组件渲染](../advanced/page.html#容器渲染)。
## 基础组件 ## 基础组件
在 vue-components 中,我们提供了几个基础组件,可以在项目源码中找到对应内容。 [vue-components](https://tencent.github.io/tmagic-editor/vue-components) 中,我们提供了几个基础组件,可以在项目源码中找到对应内容。
- page tmagic-editor的页面基础 - page tmagic-editor的页面基础
- container tmagic-editor的容器渲染器 - container tmagic-editor的容器渲染器

View File

@ -152,7 +152,7 @@ react 版本组件代码示例
import React, { useContext } from 'react'; import React, { useContext } from 'react';
import Core from '@tmagic/core'; import Core from '@tmagic/core';
import { AppContent } from '@tmagic/react-runtime-help'; import { AppContent } from '@tmagic/ui-react';
function Test({ config }: { config: any }) { function Test({ config }: { config: any }) {
const app = useContext<Core | undefined>(AppContent); const app = useContext<Core | undefined>(AppContent);

View File

@ -8,7 +8,7 @@
### 一、顶部菜单栏定制 ### 一、顶部菜单栏定制
通常使用 `m-editor` 组件的 [menu](/api/editor/props.html#menu) `prop` 来对进行设置; 通常使用 `m-editor` 组件的 [menu](/api/editor/props.html#menu) `prop` 来对进行设置;
顶部菜单栏分为`左` `中` `右`三个部分组成,所以 [menu](/api/editor/props.html#menu) `prop`的数据格式如下: 顶部菜单栏分为`左` `中` `右`三个部分组成,所以 [menu](/api/editor/props.html#menu) `prop`的数据格式如下:
@ -16,7 +16,7 @@
{ left: [], center: [], right: [] } { left: [], center: [], right: [] }
``` ```
数组的内容可以有三种形式:`内部定义好的字符串``其他字符串``MenuButton 或者 MenuComponent 对象` 数组的内容可以有三种形式:`内部定义好的字符串``其他字符串``MenuButton 或者 MenuComponent 对象`
#### 1. 内部定义好的字符串: #### 1. 内部定义好的字符串:
```ts ```ts
@ -38,7 +38,7 @@ MenuButton 的[定义](https://github.com/Tencent/tmagic-editor/blob/239b5d3efea
```js ```js
{ {
type: 'button', type: 'buuton',
text: '返回', text: '返回',
handler: () => window.history.back(), handler: () => window.history.back(),
} }
@ -122,7 +122,7 @@ editorService.on('select', (node) => {
默认的属性读取流程如下: 默认的属性读取流程如下:
组件中定义`formConfig` -> 通过`tmagic-cli`构建成 `runtime``/config/index.umd.cjs` -> `m-editor`中加载然后配置到[propsConfig](/api/editor/props.html#propsconfigs) prop中 -> `m-editor`保存到`propsService`中 -> 选中组件时`editorService`会去`propsService`调用`getPropsConfig`中读取 组件中定义`formConfig` -> 通过`tamgic-cli`构建成 `runtime``/config/index.umd.cjs` -> `m-editor`中加载然后配置到[propsConfig](/api/editor/props.html#propsconfigs) prop中 -> `m-editor`保存到`propsService`中 -> 选中组件时`editorService`会去`propsService`调用`getPropsConfig`中读取
`propsService.getPropsConfig`会调取`propsService.fillConfig`添加样式、事件、高级3个tab分页 `propsService.getPropsConfig`会调取`propsService.fillConfig`添加样式、事件、高级3个tab分页

View File

@ -13,7 +13,7 @@ $ pnpm create tmagic
``` ```
::: :::
按照提示操作可以创建`6`项目: 按照提示操作可以创建`6`项目:
* runtime:运行时DSL渲染 * runtime:运行时DSL渲染
* admin-client:管理端(编辑器) * admin-client:管理端(编辑器)
@ -75,6 +75,7 @@ const app = createApp(App);
app.use(ElementPlus, { app.use(ElementPlus, {
locale: zhCn, locale: zhCn,
}); });
app.use(router);
app.use(editorPlugin, MagicElementPlusAdapter); app.use(editorPlugin, MagicElementPlusAdapter);
app.mount('#app'); app.mount('#app');
``` ```
@ -165,7 +166,7 @@ app.mount('#app');
关于 [@tmagic/editor](https://github.com/Tencent/tmagic-editor/tree/master/packages/editor) 组件,更多的属性配置详情请参考[编辑器 API](../api/editor/props.md)。 关于 [@tmagic/editor](https://github.com/Tencent/tmagic-editor/tree/master/packages/editor) 组件,更多的属性配置详情请参考[编辑器 API](../api/editor/props.md)。
其中,**有四个需要注意的属性配置项**`runtimeUrl` `propsValues` `propsConfigs` `componentGroupList`。这是能让我们的编辑器正常运行的关键。 其中,**有四个需要注意的属性配置项**`runtimeUrl` `values` `configs` `componentGroupList`。这是能让我们的编辑器正常运行的关键。
:::tip :::tip
如果出现```Preprocessor dependency "sass" not found. Did you install it?```那么需要install sass 如果出现```Preprocessor dependency "sass" not found. Did you install it?```那么需要install sass

View File

@ -22,7 +22,7 @@ tmagic-editor可视化开源项目是从魔方平台演化而来的开源项目
- **模拟器**,居中位置渲染了当前页面配置的组件内容,模拟真实页面的展示内容。 - **模拟器**,居中位置渲染了当前页面配置的组件内容,模拟真实页面的展示内容。
- **组件库**左侧展示当前业务下的相关组件内容包含tmagic-editor提供的基础组件和业务自定义组件。 - **组件库**左侧展示当前业务下的相关组件内容包含tmagic-editor提供的基础组件和业务自定义组件。
- **组件树**,左侧展示当前页面添加的组件内容,以树状结构展示。 - **组件树**,左侧展示当前页面添加的组件内容,以树状结构展示。
- **[代码块](./advanced/code-block.md)**,左侧展示添加的函数,可供组件事件中联动所用,或者组件生命周期中调用。 - **[代码块](./advanced/code-block.md)**,左侧展示添加的函数,可供组件事件中联动所用,或者组件声明周期中调用。
- **[数据源](./advanced/data-source.md)**,左侧展示添加的数据源,用于组件中的各项配置。 - **[数据源](./advanced/data-source.md)**,左侧展示添加的数据源,用于组件中的各项配置。
- **表单配置**,右侧表单项目,展示由组件内提供的配置描述,提供修改组件行为的配置项。 - **表单配置**,右侧表单项目,展示由组件内提供的配置描述,提供修改组件行为的配置项。
- **DSL 源码**,右上角的 📄 图标可以展示当前页面,各个组件配置,页面基础配置组合而成的配置源码。 - **DSL 源码**,右上角的 📄 图标可以展示当前页面,各个组件配置,页面基础配置组合而成的配置源码。

View File

@ -9,7 +9,7 @@ ui中包含的组件被移除这些组件由单独的npm包提供。1.5.0以
```js ```js
{ {
packages: [ packages: [
{ button: '@tmagic/vue-button' }, { button: '@tmagic/vue-button',
{ container: '@tmagic/vue-container' }, { container: '@tmagic/vue-container' },
{ img: '@tmagic/vue-img' }, { img: '@tmagic/vue-img' },
{ 'iterator-container': '@tmagic/vue-iterator-container' }, { 'iterator-container': '@tmagic/vue-iterator-container' },

View File

@ -65,7 +65,7 @@ import { defineConfig } from '@tmagic/cli';
export default defineConfig({ export default defineConfig({
/** 组件目录或者npm包名 */ /** 组件目录或者npm包名 */
packages: [path.join(__dirname, '../../vue-components')], packages: [path.join(__dirname, '../../packages/ui')],
/** 组件文件后缀名例如vue文件为.vuetsx文件为.tsx普通js文件则为.js */ /** 组件文件后缀名例如vue文件为.vuetsx文件为.tsx普通js文件则为.js */
componentFileAffix: '.vue', componentFileAffix: '.vue',
/** npm 配置用于当packages配置有npm包名时可以自动安装npm包 */ /** npm 配置用于当packages配置有npm包名时可以自动安装npm包 */
@ -113,7 +113,7 @@ tmagic-editor的页面发布目前使用的是静态资源发布。而所有
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Magic App</title> <title>Magic App</title>
<script src="https://unpkg.com/vue@3/dist/vue.runtime.global.js"></script> <script src="https://unpkg.com/vue@next/dist/vue.runtime.global.js"></script>
<script type="module" crossorigin src="assets/page.js"></script> <script type="module" crossorigin src="assets/page.js"></script>
<link rel="modulepreload" href="assets/App.10f9c9e1.js"> <link rel="modulepreload" href="assets/App.10f9c9e1.js">
<link rel="modulepreload" href="assets/vendor.1dc07625.js"> <link rel="modulepreload" href="assets/vendor.1dc07625.js">
@ -139,7 +139,7 @@ tmagic-editor的页面发布目前使用的是静态资源发布。而所有
<title>Publish Page</title> <title>Publish Page</title>
<!-- 这里插入了项目相关的 DSL.js --> <!-- 这里插入了项目相关的 DSL.js -->
<script type="module" src="./DSL.js"></script> <script type="module" src="./DSL.js"></script>
<script src="https://unpkg.com/vue@3/dist/vue.runtime.global.js"></script> <script src="https://unpkg.com/vue@next/dist/vue.runtime.global.js"></script>
<script type="module" crossorigin src="assets/page.js"></script> <script type="module" crossorigin src="assets/page.js"></script>
<link rel="modulepreload" href="assets/App.10f9c9e1.js"> <link rel="modulepreload" href="assets/App.10f9c9e1.js">
<link rel="modulepreload" href="assets/vendor.1dc07625.js"> <link rel="modulepreload" href="assets/vendor.1dc07625.js">

View File

@ -25,5 +25,5 @@ page用于生产环境
playground用于编辑器中 playground用于编辑器中
:::tip :::tip
想要了解DSL的解析以及runtime与编辑器的通信可以前往[教程](/guide/tutorial/) 想要了解DSL的解析以及runtime与编辑器的通信可以前往[教程](/guide/tutorial/index.md)
::: :::

View File

@ -162,14 +162,12 @@ const value = ref({
加上初始值后点击新增页面就可以渲染出一个画布了但是点击添加HelloWorld组件依然没有反应 加上初始值后点击新增页面就可以渲染出一个画布了但是点击添加HelloWorld组件依然没有反应
这是因为这时的编辑器并能理解HelloWorld是什么需要在[render](../../api/editor/props.html#render)函数中处理 这是因为这时的编辑器并能理解HelloWorld是什么需要在[render](../../api/editor/props.html#render)函数中处理
## 渲染 ## 渲染
api详情[render](../../api/editor/props.md#render) api详情[render](../../api/editor/props.md#render)
> 以下片段省略了 `page` 的获取与完整定义仅展示渲染思路完整示例见下文「最终完整的render函数实现」。
```ts ```ts
const render = () => { const render = () => {
const root = window.document.createElement('div'); const root = window.document.createElement('div');
@ -281,10 +279,10 @@ const render = async ({ renderer }: StageCore) => {
}; };
``` ```
以上就是一个简单的搭建编辑器的示例,按照上面的步骤完成后会发现可以添加组件也可选中组件但是无法拖动配置属性中的样式也无法生效这是因为上述的render函数并不完整没有处理dsl中style下一节将详细介绍runtime的搭建将不再使用render函数的方式而是使用[runtimeUrl](../../api/editor/props.md#runtimeurl)。 以上就是一个简单的搭建编辑器的示例,安装上面的步骤完成后会发现可以添加组件也可选中组件但是无法拖动配置属性中的样式也无法生效这是因为上述的render函数并不完整没有处理dsl中style下一节将详细介绍runtime的搭建将不再使用render函数的方式而是使用[runtimeUrl](../../api/editor/props.md#runtimeurl)。
::: tip ::: tip
并不是render函数不好但是从设计上render函数还是让渲染逻辑落到了编辑器中@tmagic/editor的设计是希望做到渲染跟编辑器解耦 并不是render函数不好但是从设计上render函数还是让渲染逻辑落到了编辑器中@tmagic/editor的设计是希望做到渲染跟编辑器解耦
::: :::
[源码](https://github.com/vft-magic/tmagic-tutorial) [源码](https://github.com/vft-magic/tmagic-tutorial)

View File

@ -1,6 +1,6 @@
# 3.[DSL](../conception.md#dsl) 解析渲染 # 3.[DSL](../conception.md#dsl) 解析渲染
tmagic 提供了 vue/react 两个版本的解析渲染组件,可以直接使用 tmagic 提供了 vue/react 两个版本的解析渲染组件,可以直接使用
[@tmagic/ui](https://www.npmjs.com/package/@tmagic/ui) [@tmagic/ui](https://www.npmjs.com/package/@tmagic/ui)
@ -12,7 +12,7 @@ tmagic 提供了 vue/react 两个版本的解析渲染组件,可以直接使
### 创建项目 ### 创建项目
将[上一教程](./runtime.md)中的[editor-runtime](https://github.com/jia000/tmagic-tutorial/tree/master/course2/editor-runtime)和[hello-editor](https://github.com/jia000/tmagic-tutorial/tree/master/course2/hello-editor)复制过来 将[上一教程](./runtime.md)中的[editor-runtime](https://github.com/jia000/tmagic-tutorial/tree/master/course2/editor-runtime)和[hello-editor](https://github.com/jia000/tmagic-tutorial/tree/master/course2/hellow-editor)复制过来
## 基础概念 ## 基础概念
@ -69,7 +69,7 @@ app.component('hello-world', HelloWorld);
```vue ```vue
<template> <template>
<component v-if="config" :is="type" :data-tmagic-id="`${id}`" :style="style" :config="config"></component> <component v-if="config" :is="type" :tmagic-data-id="`${id}`" :style="style" :config="config"></component>
</template> </template>
<script lang=ts setup> <script lang=ts setup>
@ -91,7 +91,7 @@ const id = computed(() => props.config.id);
</script> </script>
``` ```
接下来就需要解析节点的样式,在@tmagic/editor中默认会将样式配置保存到节点的style属性中,如果自行定义到了其他属性,则以实际为准 接下来就需要解析节点的样式在tmagic/editor中默认会将样式配置保存到节点的style属性中,如果自行定义到了其他属性,则已实际为准
解析style需要注意几个地方 解析style需要注意几个地方
@ -99,13 +99,13 @@ const id = computed(() => props.config.id);
css中的数值有些是需要单位的例如px有些是不需要的例如opacity css中的数值有些是需要单位的例如px有些是不需要的例如opacity
@tmagic/editor中,默认都是不带单位的,所以需要将需要单位的地方补齐单位 在tmagic/editor中默认都是不带单位的所以需要将需要单位的地方补齐单位
这里做补齐px处理如果需要做屏幕大小适应 可以使用rem或者vw这个可以根据自身需求处理。 这里做补齐px处理如果需要做屏幕大小适应 可以使用rem或者vw这个可以根据自身需求处理。
2. url 2. url
css中的[url](https://developer.mozilla.org/zh-CN/docs/Web/CSS/url)需要使用 url()所以当值为url时需要转为url(xxx) css中的[url](https://developer.mozilla.org/zh-CN/docs/Web/CSS/url)需要是用url()所以当值为url时需要转为url(xxx)
3. transform 3. transform

View File

@ -178,8 +178,6 @@ declare global {
} }
``` ```
> 以下片段中 `page` 来自前文中 App.vue 内的 `const page = ref<any>();`,此处省略其重复声明。
```ts ```ts
import type { Id, MApp, MNode } from '@tmagic/core'; import type { Id, MApp, MNode } from '@tmagic/core';
import type { RemoveData, UpdateData } from '@tmagic/stage'; import type { RemoveData, UpdateData } from '@tmagic/stage';
@ -230,7 +228,7 @@ watch(page, async () => {
}); });
``` ```
以上就是一个简单runtime实现以及与编辑的交互这是一个不完善的实现(会发现组件画布中无法自由拖动是因为没有完整的解析style),但是其中已经几乎覆盖所有需要关心的内容 以上就是一个简单runtime实现以及与编辑的交互这是一个不完善的实现(会发现组件画布中无法自由拖动是因为没有完整的解析style),但是其中已经几乎覆盖所有需要关心的内容
当前教程中实现了一个简单的pagetmagic提供了一个比较完善的实现将在下一节介绍 当前教程中实现了一个简单的pagetmagic提供了一个比较完善的实现将在下一节介绍

View File

@ -36,32 +36,15 @@ new App(options: AppOptionsConfig)
| 属性 | 类型 | 说明 | | 属性 | 类型 | 说明 |
|------|------|------| |------|------|------|
| `env` | `Env` | 环境信息实例 | | `env` | `Env` | 环境信息实例 |
| `dsl` | `MApp \| undefined` | DSL 配置 | | `dsl` | `MApp` | DSL 配置 |
| `codeDsl` | `CodeBlockDSL \| undefined` | 代码块配置 | | `codeDsl` | `CodeBlockDSL` | 代码块配置 |
| `dataSourceManager` | `DataSourceManager \| undefined` | 数据源管理器 | | `dataSourceManager` | `DataSourceManager \| undefined` | 数据源管理器 |
| `page` | `Page \| undefined` | 当前页面 | | `page` | `Page \| undefined` | 当前页面 |
| `pageFragments` | `Map<Id, Page>` | 页面片段集合 | | `pageFragments` | `Map<Id, Page>` | 页面片段集合 |
| `platform` | `string` | 平台类型 | | `platform` | `string` | 平台类型 |
| `jsEngine` | `JsEngine` | JS 引擎类型 | | `jsEngine` | `JsEngine` | JS 引擎类型 |
| `components` | `Map<string, any>` | 已注册的组件 | | `components` | `Map<string, any>` | 已注册的组件 |
| `eventHelper` | `EventHelper \| undefined` | 事件助手实例(仅当 `platform !== 'editor'` 时创建) | | `eventHelper` | `EventHelper` | 事件助手实例 |
| `useMock` | `boolean` | 是否使用 Mock 数据,默认 `false` |
| `request` | `RequestFunction \| undefined` | 请求函数 |
| `transformStyle` | `(style: Record<string, any>) => Record<string, any>` | 样式转换函数 |
| `pageFragmentContainerType` | `Set<string>` | 页面片段容器类型集合,默认包含 `page-fragment-container` |
| `iteratorContainerType` | `Set<string>` | 迭代器容器类型集合,默认包含 `iterator-container` |
| `errorHandler` | `ErrorHandler \| undefined` | 错误处理器 |
| `nodeStoreInitialData` | `(() => any) \| undefined` | 节点存储初始数据工厂函数 |
## 静态属性
### nodeClassMap
- **类型:** `Map<string, typeof Node>`
- **详情:**
自定义节点类型的映射表,由 `App.registerNode` 写入;`Page` 在初始化节点时会按 `config.type` 从此 Map 中查找对应的节点类,未命中则回退到默认 `Node`
## 静态方法 ## 静态方法
@ -76,7 +59,7 @@ new App(options: AppOptionsConfig)
- **详情:** - **详情:**
注册自定义节点类型,用于扩展节点功能。内部会将 `NodeClass` 写入 `App.nodeClassMap` 注册自定义节点类型,用于扩展节点功能。
- **示例:** - **示例:**
@ -95,25 +78,22 @@ App.registerNode('custom', CustomNode);
### setEnv ### setEnv
- **参数:** - **参数:**
- `{string | Env} ua` User Agent 字符串`Env` 实例(可选) - `{string} ua` User Agent 字符串
- **返回:** - **返回:**
- `{void}` - `{void}`
- **详情:** - **详情:**
设置环境信息。当传入字符串(或不传)时,会基于 UA 创建一个新的 `Env` 实例并赋值给 `env` 属性;当传入 `Env` 实例时,直接将其设置为当前 `env` 设置环境信息,会根据 UA 字符串更新 `env` 属性
- **示例:** - **示例:**
```typescript ```typescript
import App, { Env } from '@tmagic/core'; import App from '@tmagic/core';
const app = new App({}); const app = new App({});
app.setEnv(navigator.userAgent); app.setEnv(navigator.userAgent);
// 也可以直接传入已创建的 Env 实例
app.setEnv(new Env(navigator.userAgent));
``` ```
### setDesignWidth ### setDesignWidth
@ -201,7 +181,7 @@ app.setPage('page_2');
- **详情:** - **详情:**
获取页面:不传 `id` 时返回当前 `this.page`;传入 `id` 时,仅当其与当前 `this.page.data.id` 一致时返回该页面,否则返回 `undefined`。该方法不会按 DSL 遍历所有页面查找 获取指定 ID 的页面,不传 ID 则返回当前页面
- **示例:** - **示例:**
@ -280,19 +260,6 @@ app.registerComponent('my-button', MyButton);
解析组件,返回已注册的组件。 解析组件,返回已注册的组件。
### emit
- **参数:**
- `{string | symbol} name` 事件名
- `{...any[]} args` 事件参数;约定第一个参数为触发事件的 `Node` 实例
- **返回:**
- `{boolean}`
- **详情:**
重写自 `EventEmitter.emit`。当第一个参数是 `Node` 实例,并且该节点的 `eventKeys` 中存在 `${name}_${node.data.id}` 时,会将事件经由 `EventHelper` 用对应的 `Symbol` 转发(即触发联动事件配置);否则按 `EventEmitter` 默认逻辑触发。
### runCode ### runCode
- **参数:** - **参数:**
@ -303,16 +270,16 @@ app.registerComponent('my-button', MyButton);
- `{Node} node` 节点(可选) - `{Node} node` 节点(可选)
- **返回:** - **返回:**
- `{Promise<void>}` 该方法不会显式返回代码块的返回值。如需获取代码块结果,需在代码块内自行通过 `params`/`flowState` 等回写。 - `{any}`
- **详情:** - **详情:**
执行代码块。`codeId` 为空、`codeDsl` 为空,或代码块的 `content` 不是函数时直接返回;否则 `await` 执行代码块函数。如果执行过程中抛出异常,存在 `errorHandler` 时会交由其处理,否则继续抛出。 执行代码块。
- **示例:** - **示例:**
```typescript ```typescript
await app.runCode('code_1', { key: 'value' }); const result = await app.runCode('code_1', { key: 'value' });
``` ```
### runDataSourceMethod ### runDataSourceMethod
@ -326,11 +293,11 @@ await app.runCode('code_1', { key: 'value' });
- `{Node} node` 节点(可选) - `{Node} node` 节点(可选)
- **返回:** - **返回:**
- `{Promise<any | undefined>}` 取决于数据源方法的返回值。当 `dsId``methodName` 缺失,或数据源不存在、未匹配到方法时,返回 `undefined` - `{any}`
- **详情:** - **详情:**
执行数据源方法。如果执行过程中抛出异常,存在 `errorHandler` 时会交由其处理,否则继续抛出。 执行数据源方法。
- **示例:** - **示例:**
@ -352,24 +319,3 @@ const result = await app.runDataSourceMethod('ds_1', 'fetchData', { id: 123 });
```typescript ```typescript
app.destroy(); app.destroy();
``` ```
## 事件
`App` 继承自 `EventEmitter`,会通过 `super.emit` 触发以下事件:
| 事件名 | 触发时机 | 回调参数 |
|--------|----------|----------|
| `dsl-change` | 调用 `setConfig` 时触发 | `({ dsl: MApp, curPage: Id })` |
| `page-change` | 调用 `setPage` 切换页面时触发;切换到不存在的页面时也会触发,此时回调无参数。**注意**:当 `pageConfig === this.page.data`(重复 setPage 到当前页)时会直接 `return`**不**触发该事件 | `(page?: Page)` |
### 监听示例
```typescript
app.on('dsl-change', ({ dsl, curPage }) => {
console.log('DSL 已更新', dsl, curPage);
});
app.on('page-change', (page) => {
console.log('当前页面切换为', page?.data?.id);
});
```

View File

@ -58,26 +58,17 @@ devtoolApi.setDataSourceData('ds_1', { name: 'test' });
devtoolApi.setDataSourceData('ds_1', 'newValue', 'user.name'); devtoolApi.setDataSourceData('ds_1', 'newValue', 'user.name');
``` ```
### delDataSourceData
- **返回:**
- `{void}`
- **详情:**
当前为空实现(预留接口),由具体的开发工具/平台覆盖以实现"删除数据源数据"的能力。
### requestDataSource ### requestDataSource
- **参数:** - **参数:**
- `{Id} dsId` 数据源 ID - `{Id} dsId` 数据源 ID
- **返回:** - **返回:**
- `{Promise<void> | void}` - `{Promise<void>}`
- **详情:** - **详情:**
触发 HTTP 数据源的请求。优先调用 `dataSource.refresh`,否则调用 `dataSource.request`,再否则将 `isInit` 置为 `false` 并通过 `dataSourceManager.init(ds)` 重新初始化。 触发 HTTP 数据源的请求。
- **示例:** - **示例:**
@ -89,73 +80,59 @@ await devtoolApi.requestDataSource('http_ds_1');
- **参数:** - **参数:**
- `{Id} nodeId` 节点 ID - `{Id} nodeId` 节点 ID
- `{DisplayCondItem} condItem` 单个条件项 - `{CondItem} condItem` 条件项
- **返回:** - **返回:**
- `{any}` - `{any}`
- **详情:** - **详情:**
获取显示条件的实际计算值。内部会以 `{ [NODE_CONDS_KEY]: [{ cond: [condItem] }] }` 的形式调用 `dataSourceManager.compliedConds` 获取显示条件的实际计算值。
### callHook ### callHook
- **参数:** - **参数:**
- `{Id} nodeId` 节点 ID - `{Id} nodeId` 节点 ID
- `{string} hookName` 钩子名称 - `{string} hookName` 钩子名称
- `{ { params: Record<string, any> }[] } hookData` 钩子数据列表,依次传给 `node.runHookCode` - `{any} hookData` 钩子数据
- **返回:** - **返回:**
- `{Promise<void>}` - `{Promise<any>}`
- **详情:** - **详情:**
调用节点的钩子函数。会按 `hookData` 顺序执行,每项以 `item.params` 作为 `runHookCode` 的入参。 调用节点的钩子函数。
- **示例:** - **示例:**
```typescript ```typescript
await devtoolApi.callHook('button_1', 'mounted', [ await devtoolApi.callHook('button_1', 'mounted', { data: 'test' });
{ params: { data: 'test' } },
]);
``` ```
### trigger ### trigger
- **参数:** - **参数:**
- `{Id} nodeId` 节点 ID - `{Id} nodeId` 节点 ID
- `{EventConfig} eventConfig` 事件配置(单个,非数组) - `{EventConfig[]} events` 事件配置数组
- **返回:** - **返回:**
- `{void}` - `{Promise<void>}`
- **详情:** - **详情:**
按节点触发事件。内部通过 `app.emit(eventConfig.name, node)` 触发对应事件。 触发节点的事件。
- **示例:** - **示例:**
```typescript ```typescript
devtoolApi.trigger('button_1', { await devtoolApi.trigger('button_1', [
{
name: 'click', name: 'click',
actions: [{ actionType: 'code', codeId: 'code_1' }] actions: [{ actionType: 'code', codeId: 'code_1' }]
}); }
]);
``` ```
### updateDsl
- **参数:**
- `{Id} nodeId` 节点 ID
- `{any} data` 数据
- `{string} path` 路径
- **返回:**
- `{void}`
- **详情:**
当前为空实现(预留接口),由具体的开发工具/平台覆盖以实现"按节点更新 DSL"的能力。
### isValueIncludeDataSource ### isValueIncludeDataSource
- **参数:** - **参数:**
@ -198,18 +175,14 @@ const compiled = devtoolApi.compileDataSourceValue('用户名:${ds_1.user.name
- **参数:** - **参数:**
- `{Id} codeId` 代码块 ID - `{Id} codeId` 代码块 ID
- `{any} value` 新值 - `{any} value` 新值
- `{string} path` 路径(必填 - `{string} path` 路径(可选
- **返回:** - **返回:**
- `{void}` - `{void}`
- **详情:** - **详情:**
`path` 更新指定代码块的内容。当 `path === 'content'``value` 为字符串时,**当前实现**会通过 `eval` 拼接执行后将函数写回。 更新代码块的内容。
::: warning 已知限制
当前 `eval` 模板存在多余的右括号(详见 `packages/core/src/DevtoolApi.ts``updateCode`**对大部分常规函数字面量会因语法错误抛出**。直接传入纯函数体或可被裸赋值的合法表达式时也需自行验证;如需稳定使用建议在调用方先编译为函数再写回 `app.codeDsl[codeId].content`,或等待该实现修复。
:::
- **示例:** - **示例:**

View File

@ -5,19 +5,18 @@
## 构造函数 ## 构造函数
```typescript ```typescript
new Env(ua?: string, options?: Record<string, boolean | string>) new Env(ua?: string)
``` ```
### 参数 ### 参数
| 参数 | 类型 | 说明 | | 参数 | 类型 | 说明 |
|------|------|------| |------|------|------|
| `ua` | `string` | User Agent 字符串(可选,默认使用 `globalThis.navigator?.userAgent` | | `ua` | `string` | User Agent 字符串(可选,默认使用 `navigator.userAgent` |
| `options` | `Record<string, boolean \| string>` | 额外的环境字段(可选)。构造时会通过 `Object.entries` 写入到实例上,可用于扩展自定义环境标记。**注意**:构造函数在 `ua` 为空(包括 `''``undefined` 等 falsy 值)时会**提前返回**,此时 `options` 同样**不会**被应用 |
## 属性 ## 属性
所有属性均为可赋值的公共字段(非只读),默认布尔值`false` 所有属性均为只读布尔值:
| 属性 | 类型 | 说明 | | 属性 | 类型 | 说明 |
|------|------|------| |------|------|------|
@ -33,8 +32,6 @@ new Env(ua?: string, options?: Record<string, boolean | string>)
| `isWeb` | `boolean` | 是否为 Web 环境 | | `isWeb` | `boolean` | 是否为 Web 环境 |
| `isOpenHarmony` | `boolean` | 是否为鸿蒙系统 | | `isOpenHarmony` | `boolean` | 是否为鸿蒙系统 |
`Env` 上还允许通过索引签名 `[x: string]: any` 写入自定义字段。
## 使用示例 ## 使用示例
```typescript ```typescript
@ -54,10 +51,6 @@ if (env.isWechat) {
// 使用自定义 UA // 使用自定义 UA
const customEnv = new Env('Mozilla/5.0 (iPhone; CPU iPhone OS 14_0 like Mac OS X)'); const customEnv = new Env('Mozilla/5.0 (iPhone; CPU iPhone OS 14_0 like Mac OS X)');
console.log(customEnv.isIphone); // true console.log(customEnv.isIphone); // true
// 通过 options 注入自定义环境标记
const customEnv2 = new Env(navigator.userAgent, { isMiniProgram: true });
console.log(customEnv2.isMiniProgram); // true
``` ```
## 在 App 中使用 ## 在 App 中使用

View File

@ -13,15 +13,12 @@ new EventHelper(options: EventHelperOptions)
| 参数 | 类型 | 说明 | | 参数 | 类型 | 说明 |
|------|------|------| |------|------|------|
| `app` | `App` | 应用实例 | | `app` | `App` | 应用实例 |
| `beforeEventHandler` | `BeforeEventHandler` | 事件处理前钩子(可选),形如 `({ eventConfig, source, args }) => void` |
| `afterEventHandler` | `AfterEventHandler` | 事件处理后钩子(可选),形如 `({ eventConfig, source, args }) => void` |
## 属性 ## 属性
| 属性 | 类型 | 说明 | | 属性 | 类型 | 说明 |
|------|------|------| |------|------|------|
| `app` | `App` | 应用实例 | | `app` | `App` | 应用实例 |
| `eventQueue` | `EventCache[]` | 暂存的待处理事件队列(参见 `getEventQueue` |
## 实例方法 ## 实例方法
@ -79,28 +76,28 @@ eventHelper.bindNodeEvents(node);
### removeDataSourceEvents ### removeDataSourceEvents
- **参数:** - **参数:**
- `{DataSource[]} dataSourceList` 数据源实例列表(必填 - `{DataSourceSchema[]} dataSourceList` 数据源列表(可选
- **返回:** - **返回:**
- `{void}` - `{void}`
- **详情:** - **详情:**
移除给定数据源事件绑定。内部根据已注册的事件名前缀,调用 `dataSource.offDataChange``dataSource.off` 注销监听,并清空 `dataSourceEventList` 移除数据源事件绑定。
### getEventQueue ### getEventQueue
- **返回:** - **返回:**
- `{EventCache[]}` 事件缓存项数组,每项形如 `{ toId: Id, method: string, fromCpt: any, args: any[], handled?: boolean }` - `{EventConfig[]}`
- **详情:** - **详情:**
获取当前事件队列。当目标节点尚未挂载时,联动事件会被缓存到此队列;目标节点 `mounted` 后,会消费匹配项并调用其 `instance` 上的对应方法。 获取当前事件队列。
### addEventToQueue ### addEventToQueue
- **参数:** - **参数:**
- `{EventCache} event` 事件缓存项,形如 `{ toId: Id, method: string, fromCpt: any, args: any[] }` - `{EventConfig} event` 事件配置
- **返回:** - **返回:**
- `{void}` - `{void}`

View File

@ -60,16 +60,16 @@ iteratorContainer.setData({
- `{Map<Id, Node>} map` 节点映射表 - `{Map<Id, Node>} map` 节点映射表
- **返回:** - **返回:**
- `{void}` - `{Node}`
- **详情:** - **详情:**
在指定的节点映射表中初始化节点。当节点类型属于 `app.iteratorContainerType` 时,会创建嵌套的 `IteratorContainer` 并直接返回(不再继续向下递归 `config.items`);否则创建普通 `Node` 后会递归初始化 `config.items` 在指定的节点映射表中初始化节点。
### setNodes ### setNodes
- **参数:** - **参数:**
- `{MNode[]} nodes` 节点配置数组 - `{Map<Id, Node>} nodes` 节点映射表
- `{number} index` 迭代索引 - `{number} index` 迭代索引
- **返回:** - **返回:**
@ -77,31 +77,26 @@ iteratorContainer.setData({
- **详情:** - **详情:**
`index``this.nodes[index]` 上构建/更新该迭代项对应的节点映射表,内部会对每个节点配置调用 `initNode` 设置指定索引的节点映射表
- **示例:** - **示例:**
```typescript ```typescript
iteratorContainer.setNodes( iteratorContainer.setNodes(nodesMap, 0);
[
{ id: 'text_1', type: 'text', text: 'hello' },
],
0,
);
``` ```
### getNode ### getNode
- **参数:** - **参数:**
- `{Id} id` 节点 ID - `{Id} id` 节点 ID
- `{number} index` 迭代索引 - `{number} index` 迭代索引(可选,默认为 0
- **返回:** - **返回:**
- `{Node | undefined}` - `{Node | undefined}`
- **详情:** - **详情:**
获取指定迭代索引中的节点。`index` 为必填参数。 获取指定迭代索引中的节点。
- **示例:** - **示例:**

View File

@ -14,7 +14,7 @@ new Node(options: NodeOptions)
|------|------|------| |------|------|------|
| `config` | `MNode` | 节点配置 | | `config` | `MNode` | 节点配置 |
| `parent` | `Node` | 父节点(可选) | | `parent` | `Node` | 父节点(可选) |
| `page` | `Page` | 所属页面(可选) | | `page` | `Page` | 所属页面 |
| `app` | `App` | 应用实例 | | `app` | `App` | 应用实例 |
## 属性 ## 属性
@ -25,7 +25,7 @@ new Node(options: NodeOptions)
| `style` | `object` | 节点样式 | | `style` | `object` | 节点样式 |
| `events` | `EventConfig[]` | 事件配置 | | `events` | `EventConfig[]` | 事件配置 |
| `instance` | `any` | 组件实例 | | `instance` | `any` | 组件实例 |
| `page` | `Page \| undefined` | 所属页面 | | `page` | `Page` | 所属页面 |
| `parent` | `Node \| undefined` | 父节点 | | `parent` | `Node \| undefined` | 父节点 |
| `app` | `App` | 应用实例 | | `app` | `App` | 应用实例 |
| `store` | `Store` | 节点存储 | | `store` | `Store` | 节点存储 |
@ -59,14 +59,14 @@ node.setData({
### addEventToQueue ### addEventToQueue
- **参数:** - **参数:**
- `{EventCache} event` 待处理事件项;类型为 `{ method: string, fromCpt: any, args: any[] }` - `{EventConfig} event` 事件配置
- **返回:** - **返回:**
- `{void}` - `{void}`
- **详情:** - **详情:**
将事件添加到节点内部的事件队列,等待组件实例 `mounted` 后再依次调用对应的方法(`instance[event.method](event.fromCpt, ...event.args)` 将事件添加到事件队列,等待绑定到组件实例。
### setInstance ### setInstance
@ -87,37 +87,18 @@ node.setData({
node.setInstance(componentInstance); node.setInstance(componentInstance);
``` ```
### registerMethod
::: warning @deprecated
该方法已废弃,请使用 `setInstance` 替代。
:::
- **参数:**
- `{Methods} methods` 方法集合,形如 `{ [name: string]: (...args: any[]) => any }`
- **返回:**
- `{void}`
- **详情:**
将给定方法挂载到 `instance` 上。如果当前 `instance` 不存在,会先创建一个空对象再合并方法。
### runHookCode ### runHookCode
- **参数:** - **参数:**
- `{string} hook` 钩子名称(如 `'created'``'mounted'``'destroy'` 等,由节点 schema 决定) - `{'created' | 'mounted'} hook` 钩子名称
- `{object} params` 参数(可选) - `{object} params` 参数
- **返回:** - **返回:**
- `{Promise<void>}` - `{Promise<any>}`
- **详情:** - **详情:**
执行节点的钩子代码。内部会根据节点 schema 中 `hook` 字段的实际形态进行处理: 执行节点的钩子代码。
- 兼容旧格式:当 `data[hook]` 直接是函数时,作为函数调用;
- 新格式:当 `data[hook]``{ hookType, hookData[] }``hookType === HookType.CODE` 时,按顺序遍历 `hookData`,根据 `codeType` 调用 `app.runCode``app.runDataSourceMethod`
- **示例:** - **示例:**

View File

@ -25,31 +25,24 @@ new Page(options: PageOptions)
### initNode ### initNode
- **参数:** - **参数:**
- `{MComponent | MContainer} config` 节点配置 - `{MNode} config` 节点配置
- `{Node} parent` 父节点 - `{Node} parent` 父节点(可选)
- **返回:** - **返回:**
- `{void}` - `{Node}`
- **详情:** - **详情:**
初始化节点,根据配置创建节点实例并通过 `setNode` 添加到页面: 初始化节点,根据配置创建节点实例并添加到页面。会递归初始化子节点。
- 当节点类型属于 `app.iteratorContainerType` 时,会创建 `IteratorContainer` 并直接返回,**不会**继续递归 `config.items`(迭代容器内的子节点由 `IteratorContainer` 自身在每次迭代时按需初始化)。
- 当属于 `app.pageFragmentContainerType` 且配置了 `pageFragmentId` 时,会在 `app.pageFragments` 中创建对应的页面片段实例。
- 其他类型会创建普通节点后递归初始化 `config.items` 子节点。
- **示例:** - **示例:**
```typescript ```typescript
page.initNode( const node = page.initNode({
{
id: 'button_1', id: 'button_1',
type: 'button', type: 'button',
style: { width: 100 } style: { width: 100 }
}, });
page,
);
``` ```
### getNode ### getNode

View File

@ -12,7 +12,7 @@
- **详情:** - **详情:**
将 CSS 样式字符串转换为对象格式。若入参不是字符串,则原样返回。 将 CSS 样式字符串转换为对象格式。
- **示例:** - **示例:**
@ -47,20 +47,20 @@ console.log(bg); // 'url(https://example.com/image.png)'
## getTransform ## getTransform
- **参数:** - **参数:**
- `{Record<string, string> | string} value` transform 配置(对象或 CSS 字符串) - `{object} value` transform 配置
- `{JsEngine} jsEngine` JS 引擎类型 - `{JsEngine} jsEngine` JS 引擎类型
- **返回:** - **返回:**
- `{string | Record<string, string>[]}` CSS transform 字符串;当 `jsEngine === 'hippy'` 时返回数组格式 - `{string}` CSS transform 字符串
- **详情:** - **详情:**
根据配置生成 CSS transform。当 `jsEngine === 'hippy'` 时,会将 `"rotate(90deg) scale(1.5)"` 这样的字符串解析成 `[{ rotate: '90deg' }, { scale: '1.5' }]` 形式以适配 Hippy其它情况下返回标准 CSS transform 字符串 根据配置生成 CSS transform 字符串,会根据 JS 引擎类型进行适配
## transformStyle ## transformStyle
- **参数:** - **参数:**
- `{Record<string, any> | string} style` 样式对象或 CSS 字符串 - `{object} style` 样式对象
- `{JsEngine} jsEngine` JS 引擎类型 - `{JsEngine} jsEngine` JS 引擎类型
- **返回:** - **返回:**
@ -68,7 +68,7 @@ console.log(bg); // 'url(https://example.com/image.png)'
- **详情:** - **详情:**
转换样式对象,将数值转换为 rem 单位(移动端适配)。`style` 为字符串时,会先用 `style2Obj` 解析为对象再处理。 转换样式对象,将数值转换为 rem 单位(移动端适配)。
- **示例:** - **示例:**

View File

@ -88,35 +88,11 @@ ds.setData('newValue', 'user.name');
ds.setValue('user.age', 25); ds.setValue('user.age', 25);
``` ```
### setFields
- **参数:**
- `{DataSchema[]} fields` 字段配置
- **返回:**
- `{void}`
- **详情:**
设置数据源的字段配置 `fields`。一般在初始化或 schema 更新后调用。
### setMethods
- **参数:**
- `{CodeBlockContent[]} methods` 自定义方法配置
- **返回:**
- `{void}`
- **详情:**
设置数据源的自定义方法配置 `methods`
### onDataChange ### onDataChange
- **参数:** - **参数:**
- `{string} path` 数据路径 - `{string} path` 数据路径
- `{(payload: any) => void} callback` 回调函数 - `{Function} callback` 回调函数
- **返回:** - **返回:**
- `{void}` - `{void}`
@ -125,19 +101,11 @@ ds.setValue('user.age', 25);
监听指定路径的数据变化。 监听指定路径的数据变化。
::: warning callback 入参取决于 `ObservedData` 实现
- `SimpleObservedData`(默认):路径监听触发时,回调收到的是 `{ updateData, path }` 形式的 `ChangeEvent`**不是**纯粹的 newVal。仅在 `options.immediate` 分支会以「当前路径值」回调一次。
- `DeepObservedData`(基于 `deep-state-observer`):回调入参贴近「值」的语义。
如需统一拿到「最新值」,可在回调里用 `ds.getData(path)` 主动读取。
:::
- **示例:** - **示例:**
```typescript ```typescript
ds.onDataChange('user.name', (payload) => { ds.onDataChange('user.name', (newVal) => {
// SimpleObservedData 下 payload 形如 { updateData, path } console.log('用户名变更:', newVal);
console.log('user.name 变更,最新值:', ds.getData('user.name'));
}); });
``` ```
@ -145,7 +113,7 @@ ds.onDataChange('user.name', (payload) => {
- **参数:** - **参数:**
- `{string} path` 数据路径 - `{string} path` 数据路径
- `{(payload: any) => void} callback` 回调函数(与 `onDataChange` 相同的引用) - `{Function} callback` 回调函数
- **返回:** - **返回:**
- `{void}` - `{void}`
@ -185,15 +153,15 @@ ds.onDataChange('user.name', (payload) => {
DataSource 继承自 EventEmitter支持以下事件 DataSource 继承自 EventEmitter支持以下事件
| 事件名 | 说明 | 回调参数 | | 事件名 | 说明 |
|--------|------|----------| |--------|------|
| `change` | 数据变化时触发 | `(changeEvent: ChangeEvent)``ChangeEvent` 形如 `{ updateData, path? }` | | `change` | 数据变化时触发 |
### 示例 ### 示例
```typescript ```typescript
ds.on('change', (changeEvent) => { ds.on('change', () => {
console.log('数据已变化', changeEvent.updateData, changeEvent.path); console.log('数据已变化', ds.data);
}); });
``` ```

View File

@ -91,22 +91,30 @@ DataSourceManager.register('custom', CustomDataSource);
### init ### init
- **参数:** - **参数:**
- `{DataSource} ds` 单个数据源实例(必填) - `{DataSourceSchema[]} ds` 数据源配置数组
- **返回:** - **返回:**
- `{Promise<void>}` - `{Promise<void>}`
- **详情:** - **详情:**
初始化单个数据源。会按 `methods``timing === 'beforeInit'` 的方法依次执行,再调用 `ds.init()`,最后执行 `timing === 'afterInit'` 的方法。当 `ds.isInit``true`,或当前 `app.jsEngine` 命中 `ds.schema.disabledInitInJsEngine` 时直接跳过 初始化数据源,会创建所有配置的数据源实例并初始化
- **示例:** - **示例:**
```typescript ```typescript
const ds = dataSourceManager.get('ds_1'); await dataSourceManager.init([
if (ds) { {
await dataSourceManager.init(ds); id: 'ds_1',
type: 'base',
fields: [{ name: 'count', defaultValue: 0 }]
},
{
id: 'http_1',
type: 'http',
options: { url: '/api/data' }
} }
]);
``` ```
### get ### get
@ -130,14 +138,14 @@ const ds = dataSourceManager.get('ds_1');
### addDataSource ### addDataSource
- **参数:** - **参数:**
- `{DataSourceSchema} config` 数据源配置(可选) - `{DataSourceSchema} config` 数据源配置
- **返回:** - **返回:**
- `{DataSource | undefined}` - `{DataSource}`
- **详情:** - **详情:**
添加新的数据源。当对应类型尚未注册(即 `dataSourceClassMap` 中无该类型)时,会将配置缓存到 `waitInitSchemaList`,并返回 `undefined`,待 `register` 时再补建实例。 添加新的数据源。
- **示例:** - **示例:**
@ -164,15 +172,15 @@ const ds = dataSourceManager.addDataSource({
### setData ### setData
- **参数:** - **参数:**
- `{DataSource} ds` 数据源实例 - `{DataSourceSchema} ds` 数据源配置
- `{ChangeEvent} changeEvent` 变化事件,形如 `{ updateData, path? }` - `{ChangeEvent} changeEvent` 变化事件(可选)
- **返回:** - **返回:**
- `{void}` - `{void}`
- **详情:** - **详情:**
`ds.data` 同步到 `this.data[ds.id]`,并以 `(ds.id, changeEvent)` 触发 `change` 事件 设置数据源数据
### updateSchema ### updateSchema
@ -180,11 +188,11 @@ const ds = dataSourceManager.addDataSource({
- `{DataSourceSchema[]} schemas` 数据源配置数组 - `{DataSourceSchema[]} schemas` 数据源配置数组
- **返回:** - **返回:**
- `{void}` - `{Promise<void>}`
- **详情:** - **详情:**
同步更新数据源 DSL 配置:先按 `id` 移除已有数据源,再以 `cloneDeep` 重新 `addDataSource`,并对新建实例触发 `init`(异步执行,不会被该方法 `await`)。一般在编辑器中修改配置后调用 更新数据源 DSL 配置,会自动处理新增、更新和删除
### compiledNode ### compiledNode
@ -214,11 +222,11 @@ const compiledNode = dataSourceManager.compiledNode({
### compliedConds ### compliedConds
- **参数:** - **参数:**
- `{ { [NODE_CONDS_KEY]?: DisplayCond[]; [NODE_CONDS_RESULT_KEY]?: boolean; [NODE_DISABLE_DATA_SOURCE_KEY]?: boolean } } node` 带条件字段的结构(不要求是完整的 MNode - `{MNode} node` 节点配置
- `{DataSourceManagerData} data` 数据上下文(可选,默认使用 `this.data` - `{object} data` 数据上下文(可选
- **返回:** - **返回:**
- `{boolean}` 节点是否应该显示 - `{boolean}`
- **详情:** - **详情:**
@ -233,9 +241,9 @@ const shouldShow = dataSourceManager.compliedConds(node);
### compliedIteratorItemConds ### compliedIteratorItemConds
- **参数:** - **参数:**
- `{any} itemData` 迭代项数据 - `{object} itemData` 迭代项数据
- `{ { [NODE_CONDS_KEY]?: DisplayCond[] } } node` 带条件字段的结构 - `{MNode} node` 节点配置
- `{string[]} dataSourceField` 迭代数据在数据源中的字段路径,格式如 `['dsId', 'key1', 'key2']`(可选,默认 `[]` - `{string} field` 条件字段名
- **返回:** - **返回:**
- `{boolean}` - `{boolean}`
@ -247,9 +255,9 @@ const shouldShow = dataSourceManager.compliedConds(node);
### compliedIteratorItems ### compliedIteratorItems
- **参数:** - **参数:**
- `{any} itemData` 迭代项数据 - `{object} itemData` 迭代项数据
- `{MNode[]} nodes` 节点配置数组 - `{MNode[]} nodes` 节点配置数组
- `{string[]} dataSourceField` 迭代数据在数据源中的字段路径(可选,默认 `[]` - `{string} field` 字段名
- **返回:** - **返回:**
- `{MNode[]}` - `{MNode[]}`
@ -258,33 +266,19 @@ const shouldShow = dataSourceManager.compliedConds(node);
编译迭代器项的节点配置。 编译迭代器项的节点配置。
### isAllDataSourceRegistered
- **返回:**
- `{boolean}`
- **详情:**
判断 DSL 中声明的所有数据源是否都已注册并实例化(即 `dataSourceMap.size === dsl.dataSources.length`,或 DSL 未声明数据源)。
::: tip `registered-all` 触发时机
`registered-all` 事件**仅**在 `addDataSource` 末尾、`isAllDataSourceRegistered()` 为真时触发。当 `dsl.dataSources` 为空数组时,构造函数不会进入任何一次 `addDataSource` 调用,因此**不会**触发该事件,但仍可能执行 `callDsInit()`
:::
### onDataChange ### onDataChange
- **参数:** - **参数:**
- `{string} id` 数据源 ID - `{string} id` 数据源 ID
- `{string} path` 数据路径 - `{string} path` 数据路径
- `{(payload: any) => void} callback` 回调函数(具体入参取决于 `ObservedData` 实现,详见 [DataSource.onDataChange](./dataSource.md#ondatachange) - `{Function} callback` 回调函数
- `{ { immediate?: boolean } } options` 选项(可选)
- **返回:** - **返回:**
- `{void}` - `{void}`
- **详情:** - **详情:**
监听数据源数据变化。`options.immediate``true` 时,订阅后立即用当前值触发一次回调(具体语义取决于 `ObservedData` 的实现)。 监听数据源数据变化。
- **示例:** - **示例:**
@ -299,7 +293,7 @@ dataSourceManager.onDataChange('ds_1', 'user.name', (newVal) => {
- **参数:** - **参数:**
- `{string} id` 数据源 ID - `{string} id` 数据源 ID
- `{string} path` 数据路径 - `{string} path` 数据路径
- `{(newVal: any) => void} callback` 回调函数 - `{Function} callback` 回调函数
- **返回:** - **返回:**
- `{void}` - `{void}`
@ -323,19 +317,19 @@ DataSourceManager 继承自 EventEmitter支持以下事件
| 事件名 | 说明 | 回调参数 | | 事件名 | 说明 | 回调参数 |
|--------|------|----------| |--------|------|----------|
| `change` | 单个数据源数据变化 | `(dsId: string, changeEvent: ChangeEvent)` | | `change` | 数据源数据变化 | `(dsId, path, newVal)` |
| `init` | 所有数据源初始化完成;现代分支携带 `(data, errors)`,旧 Promise.all 分支为 `(this.data)` | `(data, errors?)` | | `init` | 所有数据源初始化完成 | 无 |
| `registered-all` | 所有数据源注册完成 | 无 | | `registered-all` | 所有数据源注册完成 | 无 |
| `update-data` | `createDataSourceManager` 在数据变化后发出,用于通知节点重新渲染 | `(newNodes: MNode[], sourceId: string, changeEvent: ChangeEvent, pageId: Id)` | | `update-data` | 更新节点数据 | `(node, sourceId)` |
### 事件监听示例 ### 事件监听示例
```typescript ```typescript
dataSourceManager.on('change', (dsId, changeEvent) => { dataSourceManager.on('change', (dsId, path, newVal) => {
console.log(`数据源 ${dsId} 变更:`, changeEvent); console.log(`数据源 ${dsId} 的 ${path} 变更为:`, newVal);
}); });
dataSourceManager.on('init', (data, errors) => { dataSourceManager.on('init', () => {
console.log('所有数据源初始化完成', data, errors); console.log('所有数据源初始化完成');
}); });
``` ```

View File

@ -20,8 +20,8 @@ new HttpDataSource(options: DataSourceOptions<HttpDataSourceSchema>)
| `options` | `HttpOptionsSchema` | HTTP 请求配置 | | `options` | `HttpOptionsSchema` | HTTP 请求配置 |
| `responseOptions` | `{ dataPath?: string }` | 响应数据配置(可选) | | `responseOptions` | `{ dataPath?: string }` | 响应数据配置(可选) |
| `autoFetch` | `boolean` | 是否自动请求(可选) | | `autoFetch` | `boolean` | 是否自动请求(可选) |
| `beforeRequest` | `string \| ((options: HttpOptions, content: { app, dataSource }) => HttpOptions)` | 请求前钩子。**运行时仅会调用函数形式**;字符串形式(代码块 ID不会在 `HttpDataSource.request` 内被解析执行,需要由编辑器在导出 DSL 阶段或上层 `createDataSourceManager` 配置中将其转换为函数后挂到 schema 上 | | `beforeRequest` | `Function \| string` | 请求前钩子(可选) |
| `afterResponse` | `string \| ((response: any, content: { app, dataSource, options }) => any)` | 响应后钩子。**运行时仅会调用函数形式**;字符串形式(代码块 ID的解析逻辑同上 | | `afterResponse` | `Function \| string` | 响应后钩子(可选) |
### HttpOptionsSchema ### HttpOptionsSchema
@ -40,7 +40,7 @@ new HttpDataSource(options: DataSourceOptions<HttpDataSourceSchema>)
| 属性 | 类型 | 说明 | | 属性 | 类型 | 说明 |
|------|------|------| |------|------|------|
| `isLoading` | `boolean` | 是否正在请求 | | `isLoading` | `boolean` | 是否正在请求 |
| `error` | `{ msg?: string, code?: string \| number }` | 错误信息 | | `error` | `{ msg?: string, code?: string }` | 错误信息 |
| `httpOptions` | `HttpOptionsSchema` | 请求配置 | | `httpOptions` | `HttpOptionsSchema` | 请求配置 |
## 实例方法 ## 实例方法
@ -48,10 +48,10 @@ new HttpDataSource(options: DataSourceOptions<HttpDataSourceSchema>)
### request ### request
- **参数:** - **参数:**
- `{Partial<HttpOptions>} options` 请求选项(可选,默认 `{}` - `{HttpOptionsSchema} options` 请求选项(可选
- **返回:** - **返回:**
- `{Promise<void>}` 该方法不会显式返回数据;请求结果会通过 `setData` 写入 `data`,失败时通过 `error` 暴露并触发 `error` 事件。 - `{Promise<any>}` 响应数据
- **详情:** - **详情:**
@ -61,33 +61,30 @@ new HttpDataSource(options: DataSourceOptions<HttpDataSourceSchema>)
```typescript ```typescript
// 使用默认配置请求 // 使用默认配置请求
await httpDs.request(); const data = await httpDs.request();
// 覆盖部分配置 // 覆盖部分配置
await httpDs.request({ const data = await httpDs.request({
params: { page: 1, size: 10 } params: { page: 1, size: 10 }
}); });
// 通过 ds.data 读取结果
console.log(httpDs.data);
``` ```
### get ### get
- **参数:** - **参数:**
- `{Partial<HttpOptions> & { url: string }} options` 请求选项(必须包含 `url` - `{HttpOptionsSchema} options` 请求选项
- **返回:** - **返回:**
- `{Promise<void>}` - `{Promise<any>}` 响应数据
- **详情:** - **详情:**
发起 GET 请求,等价于 `request({ ...options, method: 'GET' })` 发起 GET 请求。
- **示例:** - **示例:**
```typescript ```typescript
await httpDs.get({ const data = await httpDs.get({
url: '/api/users', url: '/api/users',
params: { id: 1 } params: { id: 1 }
}); });
@ -96,40 +93,24 @@ await httpDs.get({
### post ### post
- **参数:** - **参数:**
- `{Partial<HttpOptions> & { url: string }} options` 请求选项(必须包含 `url` - `{HttpOptionsSchema} options` 请求选项
- **返回:** - **返回:**
- `{Promise<void>}` - `{Promise<any>}` 响应数据
- **详情:** - **详情:**
发起 POST 请求,等价于 `request({ ...options, method: 'POST' })` 发起 POST 请求。
- **示例:** - **示例:**
```typescript ```typescript
await httpDs.post({ const data = await httpDs.post({
url: '/api/users', url: '/api/users',
data: { name: 'test' } data: { name: 'test' }
}); });
``` ```
## 事件
继承自 [DataSource](./dataSource.md) 事件,额外包含:
| 事件名 | 说明 | 回调参数 |
|--------|------|----------|
| `error` | 请求过程中捕获到异常时触发 | `(error: Error)` |
### 示例
```typescript
httpDs.on('error', (error) => {
console.error('请求失败:', error);
});
```
## 配置示例 ## 配置示例
### 基础配置 ### 基础配置

View File

@ -11,8 +11,8 @@
| 方法 | 参数 | 返回值 | 说明 | | 方法 | 参数 | 返回值 | 说明 |
|------|------|--------|------| |------|------|--------|------|
| `update` | `(data: any, path?: string)` | `void` | 更新数据 | | `update` | `(data: any, path?: string)` | `void` | 更新数据 |
| `on` | `(path: string, callback: (payload: any) => void, options?: { immediate?: boolean })` | `void` | 监听数据变化`payload` 的形态取决于具体实现:`SimpleObservedData` 路径回调收到 `{ updateData, path }`(仅 `immediate` 分支为「当前值」),`DeepObservedData` 更接近「值」语义 | | `on` | `(path: string, callback: Function, options?: { immediate?: boolean })` | `void` | 监听数据变化 |
| `off` | `(path: string, callback: (payload: any) => void)` | `void` | 取消监听 | | `off` | `(path: string, callback: Function)` | `void` | 取消监听 |
| `getData` | `(path: string)` | `any` | 获取指定路径的数据 | | `getData` | `(path: string)` | `any` | 获取指定路径的数据 |
| `destroy` | `()` | `void` | 销毁 | | `destroy` | `()` | `void` | 销毁 |
@ -27,9 +27,9 @@ import { SimpleObservedData } from '@tmagic/data-source';
const observed = new SimpleObservedData({ name: 'test' }); const observed = new SimpleObservedData({ name: 'test' });
// 监听数据变化SimpleObservedData 路径监听收到的是 { updateData, path } // 监听数据变化
observed.on('name', (payload) => { observed.on('name', (newVal) => {
console.log('name 变更payload:', payload, '当前值:', observed.getData('name')); console.log('name 变更为:', newVal);
}); });
// 更新数据 // 更新数据
@ -129,11 +129,11 @@ class CustomObservedData extends ObservedData {
// 自定义更新逻辑 // 自定义更新逻辑
} }
on(path: string, callback: (payload: any) => void, options?: { immediate?: boolean }): void { on(path: string, callback: Function, options?: { immediate?: boolean }): void {
// 自定义监听逻辑 // 自定义监听逻辑
} }
off(path: string, callback: (payload: any) => void): void { off(path: string, callback: Function): void {
// 自定义取消监听逻辑 // 自定义取消监听逻辑
} }

View File

@ -10,11 +10,11 @@
- `{DataSourceManagerData} initialData` 初始数据(可选) - `{DataSourceManagerData} initialData` 初始数据(可选)
- **返回:** - **返回:**
- `{DataSourceManager | undefined}` 数据源管理器实例;当 `app.dsl?.dataSources` 缺省时返回 `undefined` - `{DataSourceManager}` 数据源管理器实例
- **详情:** - **详情:**
创建数据源管理器的工厂函数,会自动设置数据变化监听并在 `change` 事件中向 `update-data` 转发受影响的节点 创建数据源管理器的工厂函数,会自动设置数据变化监听。
- **示例:** - **示例:**
@ -27,15 +27,15 @@ const dsManager = createDataSourceManager(app, false, initialData);
## compiledCondition ## compiledCondition
- **参数:** - **参数:**
- `{DisplayCondItem[]} conds` 条件项数组(同一组条件 AND 关系) - `{CondItem} cond` 条件项
- `{DataSourceManagerData} data` 数据上下文 - `{object} data` 数据上下文
- **返回:** - **返回:**
- `{boolean}` 条件是否满足 - `{boolean}` 条件是否满足
- **详情:** - **详情:**
编译一组显示条件,按 AND 语义返回是否全部满足 编译单个显示条件
- **示例:** - **示例:**
@ -43,8 +43,8 @@ const dsManager = createDataSourceManager(app, false, initialData);
import { compiledCondition } from '@tmagic/data-source'; import { compiledCondition } from '@tmagic/data-source';
const result = compiledCondition( const result = compiledCondition(
[{ field: ['ds_1', 'user', 'age'], op: '>', value: 18 }], { field: 'user.age', op: '>', value: 18 },
{ ds_1: { user: { age: 20 } } } { user: { age: 20 } }
); );
console.log(result); // true console.log(result); // true
``` ```
@ -52,21 +52,21 @@ console.log(result); // true
## compliedConditions ## compliedConditions
- **参数:** - **参数:**
- `{ { [NODE_CONDS_KEY]?: DisplayCond[] } } node` 带条件字段的结构 - `{MNode} node` 节点配置
- `{DataSourceManagerData} data` 数据上下文 - `{object} data` 数据上下文(可选)
- **返回:** - **返回:**
- `{boolean}` 节点是否应该显示 - `{boolean}` 节点是否应该显示
- **详情:** - **详情:**
编译条件组OR 语义:只要其中一组 `cond` 全部满足即返回 `true` 编译条件组,支持 AND/OR 逻辑
## compiledNodeField ## compiledNodeField
- **参数:** - **参数:**
- `{any} value` 字段值 - `{any} value` 字段值
- `{DataSourceManagerData} data` 数据上下文 - `{object} data` 数据上下文
- **返回:** - **返回:**
- `{any}` 编译后的值 - `{any}` 编译后的值
@ -90,7 +90,7 @@ const compiled = compiledNodeField(
- **参数:** - **参数:**
- `{any} value` 字段值 - `{any} value` 字段值
- `{DataSourceManagerData} data` 数据上下文 - `{object} data` 数据上下文
- **返回:** - **返回:**
- `{any}` 编译后的值 - `{any}` 编译后的值
@ -103,7 +103,7 @@ const compiled = compiledNodeField(
- **参数:** - **参数:**
- `{string} value` 模板字符串 - `{string} value` 模板字符串
- `{DataSourceManagerData} data` 数据上下文 - `{object} data` 数据上下文
- **返回:** - **返回:**
- `{string}` 替换后的字符串 - `{string}` 替换后的字符串
@ -127,13 +127,13 @@ console.log(result); // '用户名张三年龄20'
## createIteratorContentData ## createIteratorContentData
- **参数:** - **参数:**
- `{any} itemData` 迭代项数据 - `{object} itemData` 迭代项数据
- `{string} dsId` 数据源 ID - `{string} dsId` 数据源 ID
- `{string[]} fields` 字段路径,如 `['a', 'b', 'c']` - `{DataSchema[]} fields` 字段配置
- `{DataSourceManagerData} dsData` 数据源数据(可选,默认 `{}` - `{object} dsData` 数据源数据
- **返回:** - **返回:**
- `{DataSourceManagerData}` 迭代器数据上下文 - `{object}` 迭代器数据上下文
- **详情:** - **详情:**
@ -179,21 +179,21 @@ const newDsl = updateNode(
- **参数:** - **参数:**
- `{MApp} dsl` DSL 配置 - `{MApp} dsl` DSL 配置
- `{Record<string, () => Promise<any>>} dataSourceModules` 数据源模块映射 - `{Record<string, () => Promise<any>>} modules` 数据源模块映射
- **返回:** - **返回:**
- `{Promise<Record<string, any>>}` 按需加载到的数据源模块表key 为数据源 `type`value 为模块的 `default` 导出) - `{Promise<void>}`
- **详情:** - **详情:**
按需加载数据源模块。根据 DSL 中实际依赖到的数据源类型动态加载对应模块,并以模块表形式返回 按需加载数据源模块。根据 DSL 中使用的数据源类型动态加载对应模块
- **示例:** - **示例:**
```typescript ```typescript
import { registerDataSourceOnDemand } from '@tmagic/data-source'; import { registerDataSourceOnDemand } from '@tmagic/data-source';
const moduleMap = await registerDataSourceOnDemand(dsl, { await registerDataSourceOnDemand(dsl, {
custom: () => import('./CustomDataSource'), custom: () => import('./CustomDataSource'),
socket: () => import('./SocketDataSource') socket: () => import('./SocketDataSource')
}); });

View File

@ -1,5 +1,5 @@
{ {
"version": "1.7.13", "version": "1.7.10",
"name": "tmagic", "name": "tmagic",
"private": true, "private": true,
"type": "module", "type": "module",
@ -44,8 +44,8 @@
"@commitlint/config-conventional": "^20.0.0", "@commitlint/config-conventional": "^20.0.0",
"@tmagic/eslint-config": "workspace:*", "@tmagic/eslint-config": "workspace:*",
"@types/node": "24.0.10", "@types/node": "24.0.10",
"@vitejs/plugin-vue": "^6.0.6", "@vitejs/plugin-vue": "^6.0.5",
"@vitest/coverage-v8": "^4.1.5", "@vitest/coverage-v8": "^4.1.0",
"@vue/compiler-sfc": "catalog:", "@vue/compiler-sfc": "catalog:",
"c8": "^10.1.3", "c8": "^10.1.3",
"commitizen": "^4.3.1", "commitizen": "^4.3.1",
@ -54,7 +54,7 @@
"cz-conventional-changelog": "^3.3.0", "cz-conventional-changelog": "^3.3.0",
"element-plus": "^2.11.8", "element-plus": "^2.11.8",
"enquirer": "^2.4.1", "enquirer": "^2.4.1",
"eslint": "^10.2.1", "eslint": "^10.0.3",
"execa": "^9.6.0", "execa": "^9.6.0",
"highlight.js": "^11.11.1", "highlight.js": "^11.11.1",
"husky": "^9.1.7", "husky": "^9.1.7",
@ -62,12 +62,12 @@
"lint-staged": "^16.2.7", "lint-staged": "^16.2.7",
"minimist": "^1.2.8", "minimist": "^1.2.8",
"picocolors": "^1.1.1", "picocolors": "^1.1.1",
"prettier": "^3.8.3", "prettier": "^3.8.1",
"recast": "^0.23.11", "recast": "^0.23.11",
"rimraf": "^3.0.2", "rimraf": "^3.0.2",
"rolldown": "^1.0.0-rc.17", "rolldown": "^1.0.0-rc.9",
"rolldown-plugin-dts": "^0.23.2", "rolldown-plugin-dts": "^0.22.5",
"sass-embedded": "^1.99.0", "sass-embedded": "^1.93.3",
"semver": "^7.7.3", "semver": "^7.7.3",
"serialize-javascript": "^7.0.0", "serialize-javascript": "^7.0.0",
"shx": "^0.3.4", "shx": "^0.3.4",
@ -76,7 +76,7 @@
"vitepress": "^1.6.4", "vitepress": "^1.6.4",
"vitest": "^4.1.0", "vitest": "^4.1.0",
"vue": "catalog:", "vue": "catalog:",
"vue-tsc": "^3.2.7" "vue-tsc": "^3.2.6"
}, },
"config": { "config": {
"commitizen": { "commitizen": {

View File

@ -1,5 +1,5 @@
{ {
"version": "1.7.13", "version": "1.7.10",
"name": "@tmagic/cli", "name": "@tmagic/cli",
"main": "lib/index.js", "main": "lib/index.js",
"types": "lib/index.d.ts", "types": "lib/index.d.ts",

View File

@ -1,5 +1,5 @@
{ {
"version": "1.7.13", "version": "1.7.10",
"name": "@tmagic/core", "name": "@tmagic/core",
"type": "module", "type": "module",
"sideEffects": false, "sideEffects": false,

View File

@ -56,22 +56,8 @@ export const fillBackgroundImage = (value: string) => {
return value; return value;
}; };
export const getTransform = (value: Record<string, string> | string, jsEngine: JsEngine) => { export const getTransform = (value: Record<string, string>, jsEngine: JsEngine) => {
const isHippy = jsEngine === 'hippy'; if (!value) return [];
if (!value) return isHippy ? [] : '';
if (typeof value === 'string') {
if (!isHippy) return value;
// Hippy 不支持 css transform 字符串,需要将 "rotate(90deg) scale(1.5)" 解析成 [{ rotate: '90deg' }, { scale: '1.5' }]
const transformArr: Record<string, string>[] = [];
value.replace(/(\w+)\(([^)]+)\)/g, (_, key, val) => {
transformArr.push({ [key]: val.trim() });
return '';
});
return transformArr;
}
const transform = Object.entries(value).map(([transformKey, transformValue]) => { const transform = Object.entries(value).map(([transformKey, transformValue]) => {
if (!transformValue.trim()) return ''; if (!transformValue.trim()) return '';
@ -79,14 +65,14 @@ export const getTransform = (value: Record<string, string> | string, jsEngine: J
transformValue = `${transformValue}deg`; transformValue = `${transformValue}deg`;
} }
return isHippy ? { [transformKey]: transformValue } : `${transformKey}(${transformValue})`; return jsEngine !== 'hippy' ? `${transformKey}(${transformValue})` : { [transformKey]: transformValue };
}); });
if (isHippy) { if (jsEngine === 'hippy') {
return transform; return transform;
} }
const values = transform.join(' '); const values = transform.join(' ');
return values.trim(); return !values.trim() ? 'none' : values;
}; };
/** /**
@ -116,11 +102,8 @@ export const transformStyle = (style: Record<string, any> | string, jsEngine: Js
results.transform = [{ scale: value }]; results.transform = [{ scale: value }];
} else if (key === 'backgroundImage' && !isHippy) { } else if (key === 'backgroundImage' && !isHippy) {
value && (results[key] = fillBackgroundImage(value)); value && (results[key] = fillBackgroundImage(value));
} else if (key === 'transform') { } else if (key === 'transform' && typeof value !== 'string') {
const transform = getTransform(value, jsEngine); results[key] = getTransform(value, jsEngine);
if (transform) {
results[key] = transform;
}
} else if (!whiteList.includes(key) && value && /^[-]?[0-9]*[.]?[0-9]*$/.test(value)) { } else if (!whiteList.includes(key) && value && /^[-]?[0-9]*[.]?[0-9]*$/.test(value)) {
results[key] = isHippy ? value : `${value / 100}rem`; results[key] = isHippy ? value : `${value / 100}rem`;
} else { } else {

View File

@ -1,128 +0,0 @@
/*
* Tencent is pleased to support the open source community by making TMagicEditor available.
*
* Copyright (C) 2025 Tencent. All rights reserved.
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
import { describe, expect, test } from 'vitest';
import Env from '../src/Env';
import FlowState from '../src/FlowState';
import Store from '../src/Store';
describe('Env', () => {
test('空 ua 时所有标识为 false', () => {
const env = new Env('');
expect(env.isIos).toBe(false);
expect(env.isAndroid).toBe(false);
expect(env.isWeb).toBe(false);
});
test('iPhone ua 解析为 isIos / isIphone', () => {
const ua =
'Mozilla/5.0 (iPhone; CPU iPhone OS 16_0 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Mobile/15E148';
const env = new Env(ua);
expect(env.isIphone).toBe(true);
expect(env.isIos).toBe(true);
expect(env.isAndroid).toBe(false);
expect(env.isWeb).toBe(false);
});
test('iPad ua 解析为 isIpad / isIos', () => {
const ua = 'Mozilla/5.0 (iPad; CPU OS 16_0 like Mac OS X)';
const env = new Env(ua);
expect(env.isIpad).toBe(true);
expect(env.isIos).toBe(true);
});
test('Android phone vs Android pad', () => {
const phone = new Env('Mozilla/5.0 (Linux; Android 13; Mobile)');
expect(phone.isAndroid).toBe(true);
expect(phone.isAndroidPad).toBe(false);
const pad = new Env('Mozilla/5.0 (Linux; Android 13; Tablet)');
expect(pad.isAndroid).toBe(true);
expect(pad.isAndroidPad).toBe(true);
});
test('Mac / Windows / Wechat / 企业 QQ', () => {
const mac = new Env('Mozilla/5.0 (Macintosh; Intel Mac OS X)');
expect(mac.isMac).toBe(true);
expect(mac.isWeb).toBe(true);
const win = new Env('Mozilla/5.0 (Windows NT 10.0)');
expect(win.isWin).toBe(true);
const wechat = new Env('Mozilla/5.0 ... MicroMessenger/8.0');
expect(wechat.isWechat).toBe(true);
const qq = new Env('Mozilla/5.0 ... QQ/8.0.0');
expect(qq.isMqq).toBe(true);
const wxwork = new Env('MicroMessenger/8.0 wxwork/4.0');
expect(wxwork.isWechat).toBe(false);
});
test('OpenHarmony 时 isWeb 为 false', () => {
const env = new Env('Mozilla/5.0 OpenHarmony 4.0');
expect(env.isOpenHarmony).toBe(true);
expect(env.isWeb).toBe(false);
});
test('支持自定义扩展属性', () => {
const env = new Env('Mozilla/5.0 (Macintosh; Intel Mac OS X)', { custom: 'value', isWin: true });
expect((env as any).custom).toBe('value');
expect(env.isWin).toBe(true);
});
});
describe('Store', () => {
test('默认 initialData', () => {
const store = new Store();
expect(store.get('foo')).toBeUndefined();
});
test('set / get', () => {
const store = new Store();
store.set('foo', 'bar');
expect(store.get('foo')).toBe('bar');
});
test('使用自定义 initialData', () => {
const store = new Store({ initialData: { a: 1, b: 2 } });
expect(store.get('a')).toBe(1);
expect(store.get('b')).toBe(2);
});
test('set 覆盖 initialData 中的值', () => {
const store = new Store({ initialData: { a: 1 } });
store.set('a', 100);
expect(store.get('a')).toBe(100);
});
});
describe('FlowState', () => {
test('初始 isAbort 为 false', () => {
const fs = new FlowState();
expect(fs.isAbort).toBe(false);
});
test('abort 后 isAbort 为 truereset 后恢复', () => {
const fs = new FlowState();
fs.abort();
expect(fs.isAbort).toBe(true);
fs.reset();
expect(fs.isAbort).toBe(false);
});
});

View File

@ -1,95 +0,0 @@
/*
* Tencent is pleased to support the open source community by making TMagicEditor available.
*
* Copyright (C) 2025 Tencent. All rights reserved.
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
import { describe, expect, test } from 'vitest';
import { type MApp, NodeType } from '@tmagic/schema';
import App from '../src/App';
const createDsl = (): MApp => ({
type: NodeType.ROOT,
id: 'app_1',
items: [
{
type: NodeType.PAGE,
id: 'page_1',
items: [
{ id: 'btn_1', type: 'button' },
{
id: 'container_1',
type: 'container',
items: [{ id: 'text_1', type: 'text' }],
},
],
},
{
type: NodeType.PAGE,
id: 'page_2',
items: [{ id: 'btn_2', type: 'button' }],
},
],
});
describe('Page', () => {
test('初始化时收集页面下所有节点', () => {
const app = new App({ config: createDsl() });
const { page } = app;
expect(page).toBeDefined();
expect(page?.nodes.has('page_1')).toBe(true);
expect(page?.nodes.has('btn_1')).toBe(true);
expect(page?.nodes.has('container_1')).toBe(true);
expect(page?.nodes.has('text_1')).toBe(true);
});
test('getNode 通过 id 直接获取', () => {
const app = new App({ config: createDsl() });
const node = app.page?.getNode('text_1');
expect(node?.data.id).toBe('text_1');
});
test('getNode 不存在的 id 返回 undefined', () => {
const app = new App({ config: createDsl() });
expect(app.page?.getNode('not-exist')).toBeUndefined();
});
test('setNode / deleteNode 工作正常', () => {
const app = new App({ config: createDsl() });
const page = app.page!;
const fakeNode = { destroy() {} } as any;
page.setNode('foo', fakeNode);
expect(page.nodes.has('foo')).toBe(true);
page.deleteNode('foo');
expect(page.nodes.has('foo')).toBe(false);
});
test('destroy 后节点 map 被清空', () => {
const app = new App({ config: createDsl() });
const page = app.page!;
expect(page.nodes.size).toBeGreaterThan(0);
page.destroy();
expect(page.nodes.size).toBe(0);
});
test('切换页面会构建新的 page', () => {
const app = new App({ config: createDsl() });
expect(app.page?.data.id).toBe('page_1');
app.setPage('page_2');
expect(app.page?.data.id).toBe('page_2');
expect(app.page?.nodes.has('btn_2')).toBe(true);
});
});

View File

@ -1,146 +0,0 @@
/*
* Tencent is pleased to support the open source community by making TMagicEditor available.
*
* Copyright (C) 2025 Tencent. All rights reserved.
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
import { describe, expect, test } from 'vitest';
import {
COMMON_EVENT_PREFIX,
COMMON_METHOD_PREFIX,
fillBackgroundImage,
getTransform,
style2Obj,
transformStyle,
} from '../src/utils';
describe('style2Obj', () => {
test('解析 css 字符串到对象,并将 kebab-case 转 camelCase', () => {
const obj = style2Obj('background-color: red; font-size: 14px;');
expect(obj).toEqual({ backgroundColor: 'red', fontSize: '14px' });
});
test('忽略空段', () => {
const obj = style2Obj('color: red;;;font-weight: bold;');
expect(obj).toEqual({ color: 'red', fontWeight: 'bold' });
});
test('支持 value 中包含冒号 (例如 url(http://...))', () => {
const obj = style2Obj('background: url(http://example.com/a.png) no-repeat;');
expect(obj.background).toContain('http://example.com/a.png');
});
test('非字符串原样返回', () => {
const original = { color: 'red' };
expect(style2Obj(original as any)).toBe(original);
});
});
describe('fillBackgroundImage', () => {
test('裸路径会包裹 url()', () => {
expect(fillBackgroundImage('a.png')).toBe('url(a.png)');
});
test('已经是 url() 不重复包裹', () => {
expect(fillBackgroundImage('url(a.png)')).toBe('url(a.png)');
});
test('linear-gradient 不包裹', () => {
expect(fillBackgroundImage('linear-gradient(red, blue)')).toBe('linear-gradient(red, blue)');
});
test('空值原样返回', () => {
expect(fillBackgroundImage('')).toBe('');
});
});
describe('getTransform', () => {
test('browser: 字符串原样返回', () => {
expect(getTransform('rotate(90deg) scale(1.5)', 'browser')).toBe('rotate(90deg) scale(1.5)');
});
test('browser: 对象拼接成字符串', () => {
expect(getTransform({ rotate: '90', scale: '1.5' }, 'browser')).toBe('rotate(90deg) scale(1.5)');
});
test('hippy: 字符串解析成数组', () => {
expect(getTransform('rotate(90deg) scale(1.5)', 'hippy')).toEqual([{ rotate: '90deg' }, { scale: '1.5' }]);
});
test('hippy: 对象转换为数组', () => {
expect(getTransform({ rotate: '90', scale: '1.5' }, 'hippy')).toEqual([{ rotate: '90deg' }, { scale: '1.5' }]);
});
test('值为空: browser 返回空字符串, hippy 返回空数组', () => {
expect(getTransform('', 'browser')).toBe('');
expect(getTransform('', 'hippy')).toEqual([]);
});
test('对象中空值会被过滤掉', () => {
expect(getTransform({ rotate: ' ', scale: '1.5' }, 'browser')).toBe('scale(1.5)');
});
});
describe('transformStyle', () => {
test('空值返回空对象', () => {
expect(transformStyle('', 'browser')).toEqual({});
expect(transformStyle(null as any, 'browser')).toEqual({});
});
test('字符串入参先解析再转换', () => {
const result = transformStyle('width: 100; color: red;', 'browser');
expect(result.width).toBe('1rem');
expect(result.color).toBe('red');
});
test('对象入参,数值转换为 rem', () => {
expect(transformStyle({ width: 100 }, 'browser')).toEqual({ width: '1rem' });
});
test('白名单字段不会被转 rem', () => {
expect(transformStyle({ zIndex: 100, opacity: 0.5, fontWeight: 700 }, 'browser')).toEqual({
zIndex: 100,
opacity: 0.5,
fontWeight: 700,
});
});
test('hippy 模式不转 rem 而是保留原数值', () => {
expect(transformStyle({ width: 100 }, 'hippy')).toEqual({ width: 100 });
});
test('hippy: scale 单独走分支会转化为 transform 数组', () => {
expect(transformStyle({ scale: 1.5 }, 'hippy')).toEqual({ transform: [{ scale: 1.5 }] });
});
test('backgroundImage: browser 下补全 url()', () => {
expect(transformStyle({ backgroundImage: 'a.png' }, 'browser')).toEqual({
backgroundImage: 'url(a.png)',
});
});
test('transform 字段会通过 getTransform 处理', () => {
expect(transformStyle({ transform: { rotate: '90' } }, 'browser')).toEqual({
transform: 'rotate(90deg)',
});
});
});
describe('常量', () => {
test('事件 / 方法前缀', () => {
expect(COMMON_EVENT_PREFIX).toBe('magic:common:events:');
expect(COMMON_METHOD_PREFIX).toBe('magic:common:actions:');
});
});

View File

@ -1,5 +1,5 @@
{ {
"version": "1.7.13", "version": "1.7.10",
"name": "@tmagic/data-source", "name": "@tmagic/data-source",
"type": "module", "type": "module",
"sideEffects": false, "sideEffects": false,

View File

@ -1,5 +1,5 @@
{ {
"version": "1.7.13", "version": "1.7.10",
"name": "@tmagic/dep", "name": "@tmagic/dep",
"type": "module", "type": "module",
"sideEffects": false, "sideEffects": false,

View File

@ -1,5 +1,5 @@
{ {
"version": "1.7.13", "version": "1.7.10",
"name": "@tmagic/design", "name": "@tmagic/design",
"type": "module", "type": "module",
"sideEffects": [ "sideEffects": [

View File

@ -342,7 +342,7 @@ export interface TableColumnOptions<T = any> {
prop?: string; prop?: string;
align?: string; align?: string;
headerAlign?: string; headerAlign?: string;
sortable?: boolean | string; sortable?: boolean;
sortOrders?: Array<'ascending' | 'descending'>; sortOrders?: Array<'ascending' | 'descending'>;
selectable?: (row: T, index: number) => boolean; selectable?: (row: T, index: number) => boolean;
}; };

View File

@ -1,5 +1,5 @@
{ {
"version": "1.7.13", "version": "1.7.10",
"name": "@tmagic/editor", "name": "@tmagic/editor",
"type": "module", "type": "module",
"sideEffects": [ "sideEffects": [

View File

@ -26,7 +26,6 @@
:custom-content-menu="customContentMenu" :custom-content-menu="customContentMenu"
:indent="treeIndent" :indent="treeIndent"
:next-level-indent-increment="treeNextLevelIndentIncrement" :next-level-indent-increment="treeNextLevelIndentIncrement"
:layer-node-is-expandable="layerNodeIsExpandable"
> >
<template #layer-panel-header> <template #layer-panel-header>
<slot name="layer-panel-header"></slot> <slot name="layer-panel-header"></slot>
@ -86,7 +85,6 @@
:stage-content-menu="stageContentMenu" :stage-content-menu="stageContentMenu"
:custom-content-menu="customContentMenu" :custom-content-menu="customContentMenu"
> >
<template #stage-top><slot name="stage-top"></slot></template>
<template #stage><slot name="stage"></slot></template> <template #stage><slot name="stage"></slot></template>
<template #workspace-content><slot name="workspace-content" :editorService="editorService"></slot></template> <template #workspace-content><slot name="workspace-content" :editorService="editorService"></slot></template>
</Workspace> </Workspace>

Some files were not shown because too many files have changed in this diff Show More