mirror of
https://github.com/Tencent/tmagic-editor.git
synced 2025-12-12 19:52:49 +00:00
Compare commits
12 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
|
f7811fdb24 | ||
|
|
7a0dae9f5a | ||
|
|
304aaac8dc | ||
|
|
0f596b5c42 | ||
|
|
e3db0c93e5 | ||
|
|
3250c53097 | ||
|
|
756612eda5 | ||
|
|
2a7ab4e916 | ||
|
|
d039cee913 | ||
|
|
83664cd440 | ||
|
|
b3ce1a3b93 | ||
|
|
738e8611a4 |
21
CHANGELOG.md
21
CHANGELOG.md
@ -1,3 +1,24 @@
|
||||
## [1.7.2](https://github.com/Tencent/tmagic-editor/compare/v1.7.1...v1.7.2) (2025-12-09)
|
||||
|
||||
|
||||
|
||||
## [1.7.1](https://github.com/Tencent/tmagic-editor/compare/v1.7.0...v1.7.1) (2025-12-09)
|
||||
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
* **core:** getNode 添加stict参数来表示必须知道页面片容器id才会返回页面内的节点 ([83664cd](https://github.com/Tencent/tmagic-editor/commit/83664cd44019c3b5f05d2ad60bbb8fcf751f6b35))
|
||||
* **form:** tabs组件子项配置了name后,配置生成的数据出错 ([b3ce1a3](https://github.com/Tencent/tmagic-editor/commit/b3ce1a3b930e9cbfc74b72bfb7dd9268fe341626))
|
||||
* **tmagic-form:** runtime刷新导致root丢失 ([d039cee](https://github.com/Tencent/tmagic-editor/commit/d039cee9136e7e892161dafe25ff34ee95bce958))
|
||||
|
||||
|
||||
### Features
|
||||
|
||||
* **vue-components:** 不再兼容vue2 ([756612e](https://github.com/Tencent/tmagic-editor/commit/756612eda51fa8079420203eaca585175b039e8b))
|
||||
* **vue-runtime-help:** 去掉vue2的兼容 ([2a7ab4e](https://github.com/Tencent/tmagic-editor/commit/2a7ab4e916444a68c7cc05af4fa57ddd59994393))
|
||||
|
||||
|
||||
|
||||
# [1.7.0](https://github.com/Tencent/tmagic-editor/compare/v1.7.0-beta.5...v1.7.0) (2025-12-04)
|
||||
|
||||
|
||||
|
||||
@ -4,34 +4,101 @@
|
||||
|
||||
- **参数：**
|
||||
|
||||
-
|
||||
- {[ComponentGroup](https://github.com/Tencent/tmagic-editor/blob/5880dfbe15fcead63e9dc7c91900f8c4e7a574d8/packages/editor/src/type.ts#L355)[]} componentGroupList 组件列表配置
|
||||
|
||||
- **返回：**
|
||||
|
||||
- `{Promise<void>}`
|
||||
- `{void}`
|
||||
|
||||
- **详情：**
|
||||
|
||||
设置左侧面板的组件列表配置
|
||||
|
||||
:::tip
|
||||
该方法通常由编辑器内部调用，开发者可以通过 [m-editor 的 componentGroupList prop](./props.md#componentgrouplist) 来配置组件列表
|
||||
:::
|
||||
|
||||
- **示例：**
|
||||
|
||||
```js
|
||||
import { componentListService } from '@tmagic/editor';
|
||||
|
||||
componentListService.setList([
|
||||
{
|
||||
title: '基础组件',
|
||||
items: [
|
||||
{
|
||||
icon: 'text-icon',
|
||||
text: '文本',
|
||||
type: 'text',
|
||||
},
|
||||
{
|
||||
icon: 'button-icon',
|
||||
text: '按钮',
|
||||
type: 'button',
|
||||
},
|
||||
],
|
||||
},
|
||||
]);
|
||||
```
|
||||
|
||||
## getList
|
||||
|
||||
- **参数：**
|
||||
|
||||
-
|
||||
- **参数：** 无
|
||||
|
||||
- **返回：**
|
||||
|
||||
- `{Promise<void>}`
|
||||
- {[ComponentGroup](https://github.com/Tencent/tmagic-editor/blob/5880dfbe15fcead63e9dc7c91900f8c4e7a574d8/packages/editor/src/type.ts#L355)[]} 组件列表配置
|
||||
|
||||
- **详情：**
|
||||
|
||||
获取当前的组件列表配置
|
||||
|
||||
- **示例：**
|
||||
|
||||
```js
|
||||
import { componentListService } from '@tmagic/editor';
|
||||
|
||||
const list = componentListService.getList();
|
||||
console.log(list);
|
||||
```
|
||||
|
||||
## resetState
|
||||
|
||||
- **参数：** 无
|
||||
|
||||
- **返回：**
|
||||
|
||||
- `{void}`
|
||||
|
||||
- **详情：**
|
||||
|
||||
重置组件列表状态，清空所有配置
|
||||
|
||||
- **示例：**
|
||||
|
||||
```js
|
||||
import { componentListService } from '@tmagic/editor';
|
||||
|
||||
componentListService.resetState();
|
||||
```
|
||||
|
||||
## destroy
|
||||
|
||||
- **参数：**
|
||||
|
||||
-
|
||||
- **参数：** 无
|
||||
|
||||
- **返回：**
|
||||
|
||||
- `{Promise<void>}`
|
||||
- `{void}`
|
||||
|
||||
- **详情：**
|
||||
|
||||
销毁 componentListService，清空状态并移除所有事件监听和插件
|
||||
|
||||
- **示例：**
|
||||
|
||||
```js
|
||||
import { componentListService } from '@tmagic/editor';
|
||||
|
||||
componentListService.destroy();
|
||||
```
|
||||
|
||||
@ -2,30 +2,540 @@
|
||||
|
||||
## get
|
||||
|
||||
- **参数：**
|
||||
|
||||
- `{StateKey}` name 状态键名
|
||||
|
||||
- **返回：**
|
||||
|
||||
- `{any}` 对应的状态值
|
||||
|
||||
- **详情：**
|
||||
|
||||
获取数据源服务的内部状态
|
||||
|
||||
可用的状态键：
|
||||
- `datasourceTypeList`: 数据源类型列表
|
||||
- `dataSources`: 当前数据源列表
|
||||
- `editable`: 是否可编辑
|
||||
- `configs`: 数据源表单配置
|
||||
- `values`: 数据源默认值
|
||||
- `events`: 数据源事件列表
|
||||
- `methods`: 数据源方法列表
|
||||
|
||||
- **示例：**
|
||||
|
||||
```js
|
||||
import { dataSourceService } from '@tmagic/editor';
|
||||
|
||||
const dataSources = dataSourceService.get('dataSources');
|
||||
console.log(dataSources);
|
||||
```
|
||||
|
||||
## set
|
||||
|
||||
- **参数：**
|
||||
|
||||
- `{StateKey}` name 状态键名
|
||||
- `{any}` value 状态值
|
||||
|
||||
- **返回：**
|
||||
|
||||
- `{void}`
|
||||
|
||||
- **详情：**
|
||||
|
||||
设置数据源服务的内部状态
|
||||
|
||||
- **示例：**
|
||||
|
||||
```js
|
||||
import { dataSourceService } from '@tmagic/editor';
|
||||
|
||||
dataSourceService.set('editable', false);
|
||||
```
|
||||
|
||||
## getFormConfig
|
||||
|
||||
- **[扩展支持](../../guide/editor-expand#行为扩展)：** 是
|
||||
|
||||
- **参数：**
|
||||
|
||||
- `{string}` type 数据源类型，默认为 'base'
|
||||
|
||||
- **返回：**
|
||||
|
||||
- {[FormConfig](https://github.com/Tencent/tmagic-editor/blob/c143a5f7670ae61d80c1a2cfcc780cfb5259849d/packages/form/src/schema.ts#L706)} 表单配置
|
||||
|
||||
- **详情：**
|
||||
|
||||
获取指定类型数据源的表单配置
|
||||
|
||||
- **示例：**
|
||||
|
||||
```js
|
||||
import { dataSourceService } from '@tmagic/editor';
|
||||
|
||||
const config = dataSourceService.getFormConfig('http');
|
||||
console.log(config);
|
||||
```
|
||||
|
||||
## setFormConfig
|
||||
|
||||
- **[扩展支持](../../guide/editor-expand#行为扩展)：** 是
|
||||
|
||||
- **参数：**
|
||||
|
||||
- `{string}` type 数据源类型
|
||||
- {[FormConfig](https://github.com/Tencent/tmagic-editor/blob/c143a5f7670ae61d80c1a2cfcc780cfb5259849d/packages/form/src/schema.ts#L706)} config 表单配置
|
||||
|
||||
- **返回：**
|
||||
|
||||
- `{void}`
|
||||
|
||||
- **详情：**
|
||||
|
||||
设置指定类型数据源的表单配置
|
||||
|
||||
- **示例：**
|
||||
|
||||
```js
|
||||
import { dataSourceService } from '@tmagic/editor';
|
||||
|
||||
dataSourceService.setFormConfig('http', [
|
||||
{
|
||||
name: 'url',
|
||||
text: '请求地址',
|
||||
type: 'text',
|
||||
},
|
||||
{
|
||||
name: 'method',
|
||||
text: '请求方法',
|
||||
type: 'select',
|
||||
options: [
|
||||
{ text: 'GET', value: 'GET' },
|
||||
{ text: 'POST', value: 'POST' },
|
||||
],
|
||||
},
|
||||
]);
|
||||
```
|
||||
|
||||
## getFormValue
|
||||
|
||||
- **[扩展支持](../../guide/editor-expand#行为扩展)：** 是
|
||||
|
||||
- **参数：**
|
||||
|
||||
- `{string}` type 数据源类型，默认为 'base'
|
||||
|
||||
- **返回：**
|
||||
|
||||
- {Partial<[DataSourceSchema](https://github.com/Tencent/tmagic-editor/blob/5880dfbe15fcead63e9dc7c91900f8c4e7a574d8/packages/schema/src/index.ts#L221)>} 数据源默认值
|
||||
|
||||
- **详情：**
|
||||
|
||||
获取指定类型数据源的默认值
|
||||
|
||||
- **示例：**
|
||||
|
||||
```js
|
||||
import { dataSourceService } from '@tmagic/editor';
|
||||
|
||||
const defaultValue = dataSourceService.getFormValue('http');
|
||||
console.log(defaultValue);
|
||||
```
|
||||
|
||||
## setFormValue
|
||||
|
||||
- **[扩展支持](../../guide/editor-expand#行为扩展)：** 是
|
||||
|
||||
- **参数：**
|
||||
|
||||
- `{string}` type 数据源类型
|
||||
- {Partial<[DataSourceSchema](https://github.com/Tencent/tmagic-editor/blob/5880dfbe15fcead63e9dc7c91900f8c4e7a574d8/packages/schema/src/index.ts#L221)>} value 数据源默认值
|
||||
|
||||
- **返回：**
|
||||
|
||||
- `{void}`
|
||||
|
||||
- **详情：**
|
||||
|
||||
设置指定类型数据源的默认值
|
||||
|
||||
- **示例：**
|
||||
|
||||
```js
|
||||
import { dataSourceService } from '@tmagic/editor';
|
||||
|
||||
dataSourceService.setFormValue('http', {
|
||||
type: 'http',
|
||||
method: 'GET',
|
||||
url: '',
|
||||
});
|
||||
```
|
||||
|
||||
## getFormEvent
|
||||
|
||||
- **[扩展支持](../../guide/editor-expand#行为扩展)：** 是
|
||||
|
||||
- **参数：**
|
||||
|
||||
- `{string}` type 数据源类型，默认为 'base'
|
||||
|
||||
- **返回：**
|
||||
|
||||
- {[EventOption](https://github.com/Tencent/tmagic-editor/blob/239b5d3efeae916a8cf3e3566d88063ecccc0553/packages/core/src/events.ts#L26-L29)[]} 事件列表
|
||||
|
||||
- **详情：**
|
||||
|
||||
获取指定类型数据源的事件列表
|
||||
|
||||
- **示例：**
|
||||
|
||||
```js
|
||||
import { dataSourceService } from '@tmagic/editor';
|
||||
|
||||
const events = dataSourceService.getFormEvent('http');
|
||||
console.log(events);
|
||||
```
|
||||
|
||||
## setFormEvent
|
||||
|
||||
- **[扩展支持](../../guide/editor-expand#行为扩展)：** 是
|
||||
|
||||
- **参数：**
|
||||
|
||||
- `{string}` type 数据源类型
|
||||
- {[EventOption](https://github.com/Tencent/tmagic-editor/blob/239b5d3efeae916a8cf3e3566d88063ecccc0553/packages/core/src/events.ts#L26-L29)[]} value 事件列表
|
||||
|
||||
- **返回：**
|
||||
|
||||
- `{void}`
|
||||
|
||||
- **详情：**
|
||||
|
||||
设置指定类型数据源的事件列表
|
||||
|
||||
- **示例：**
|
||||
|
||||
```js
|
||||
import { dataSourceService } from '@tmagic/editor';
|
||||
|
||||
dataSourceService.setFormEvent('http', [
|
||||
{ label: '请求成功', value: 'success' },
|
||||
{ label: '请求失败', value: 'error' },
|
||||
]);
|
||||
```
|
||||
|
||||
## getFormMethod
|
||||
|
||||
- **[扩展支持](../../guide/editor-expand#行为扩展)：** 是
|
||||
|
||||
- **参数：**
|
||||
|
||||
- `{string}` type 数据源类型，默认为 'base'
|
||||
|
||||
- **返回：**
|
||||
|
||||
- {[EventOption](https://github.com/Tencent/tmagic-editor/blob/239b5d3efeae916a8cf3e3566d88063ecccc0553/packages/core/src/events.ts#L26-L29)[]} 方法列表
|
||||
|
||||
- **详情：**
|
||||
|
||||
获取指定类型数据源的方法列表
|
||||
|
||||
- **示例：**
|
||||
|
||||
```js
|
||||
import { dataSourceService } from '@tmagic/editor';
|
||||
|
||||
const methods = dataSourceService.getFormMethod('http');
|
||||
console.log(methods);
|
||||
```
|
||||
|
||||
## setFormMethod
|
||||
|
||||
- **[扩展支持](../../guide/editor-expand#行为扩展)：** 是
|
||||
|
||||
- **参数：**
|
||||
|
||||
- `{string}` type 数据源类型
|
||||
- {[EventOption](https://github.com/Tencent/tmagic-editor/blob/239b5d3efeae916a8cf3e3566d88063ecccc0553/packages/core/src/events.ts#L26-L29)[]} value 方法列表
|
||||
|
||||
- **返回：**
|
||||
|
||||
- `{void}`
|
||||
|
||||
- **详情：**
|
||||
|
||||
设置指定类型数据源的方法列表
|
||||
|
||||
- **示例：**
|
||||
|
||||
```js
|
||||
import { dataSourceService } from '@tmagic/editor';
|
||||
|
||||
dataSourceService.setFormMethod('http', [
|
||||
{ label: '发起请求', value: 'request' },
|
||||
{ label: '重试', value: 'retry' },
|
||||
]);
|
||||
```
|
||||
|
||||
## add
|
||||
|
||||
- **[扩展支持](../../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)} 添加后的数据源配置
|
||||
|
||||
- **详情：**
|
||||
|
||||
添加一个数据源，如果配置中没有id或id已存在，会自动生成新的id
|
||||
|
||||
- **示例：**
|
||||
|
||||
```js
|
||||
import { dataSourceService } from '@tmagic/editor';
|
||||
|
||||
const newDs = dataSourceService.add({
|
||||
type: 'http',
|
||||
title: '用户信息',
|
||||
url: '/api/user',
|
||||
method: 'GET',
|
||||
});
|
||||
|
||||
console.log(newDs.id); // 自动生成的id
|
||||
```
|
||||
|
||||
## update
|
||||
|
||||
- **[扩展支持](../../guide/editor-expand#行为扩展)：** 是
|
||||
|
||||
- **参数：**
|
||||
|
||||
- {[DataSourceSchema](https://github.com/Tencent/tmagic-editor/blob/5880dfbe15fcead63e9dc7c91900f8c4e7a574d8/packages/schema/src/index.ts#L221)} config 数据源配置
|
||||
- `{Object}` options 可选配置
|
||||
- {[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)} 更新后的数据源配置
|
||||
|
||||
- **详情：**
|
||||
|
||||
更新数据源
|
||||
|
||||
- **示例：**
|
||||
|
||||
```js
|
||||
import { dataSourceService } from '@tmagic/editor';
|
||||
|
||||
const updatedDs = dataSourceService.update({
|
||||
id: 'ds_123',
|
||||
type: 'http',
|
||||
title: '用户详情',
|
||||
url: '/api/user/detail',
|
||||
});
|
||||
|
||||
console.log(updatedDs);
|
||||
```
|
||||
|
||||
## remove
|
||||
|
||||
- **[扩展支持](../../guide/editor-expand#行为扩展)：** 是
|
||||
|
||||
- **参数：**
|
||||
|
||||
- `{string}` id 数据源id
|
||||
|
||||
- **返回：**
|
||||
|
||||
- `{void}`
|
||||
|
||||
- **详情：**
|
||||
|
||||
删除指定id的数据源
|
||||
|
||||
- **示例：**
|
||||
|
||||
```js
|
||||
import { dataSourceService } from '@tmagic/editor';
|
||||
|
||||
dataSourceService.remove('ds_123');
|
||||
```
|
||||
|
||||
## createId
|
||||
|
||||
- **[扩展支持](../../guide/editor-expand#行为扩展)：** 是
|
||||
|
||||
- **参数：** 无
|
||||
|
||||
- **返回：**
|
||||
|
||||
- `{string}` 生成的唯一id
|
||||
|
||||
- **详情：**
|
||||
|
||||
生成一个唯一的数据源id，格式为 `ds_` + guid
|
||||
|
||||
- **示例：**
|
||||
|
||||
```js
|
||||
import { dataSourceService } from '@tmagic/editor';
|
||||
|
||||
const id = dataSourceService.createId();
|
||||
console.log(id); // 'ds_xxx-xxx-xxx'
|
||||
```
|
||||
|
||||
## getDataSourceById
|
||||
|
||||
- **参数：**
|
||||
|
||||
- `{string}` id 数据源id
|
||||
|
||||
- **返回：**
|
||||
|
||||
- {[DataSourceSchema](https://github.com/Tencent/tmagic-editor/blob/5880dfbe15fcead63e9dc7c91900f8c4e7a574d8/packages/schema/src/index.ts#L221) | undefined} 数据源配置
|
||||
|
||||
- **详情：**
|
||||
|
||||
根据id获取数据源配置
|
||||
|
||||
- **示例：**
|
||||
|
||||
```js
|
||||
import { dataSourceService } from '@tmagic/editor';
|
||||
|
||||
const ds = dataSourceService.getDataSourceById('ds_123');
|
||||
console.log(ds);
|
||||
```
|
||||
|
||||
## copyWithRelated
|
||||
|
||||
- **参数：**
|
||||
|
||||
- {[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 可选的收集器配置
|
||||
|
||||
- **返回：**
|
||||
|
||||
- `{void}`
|
||||
|
||||
- **详情：**
|
||||
|
||||
复制组件时会带上组件关联的数据源，将关联的数据源存储到 localStorage
|
||||
|
||||
- **示例：**
|
||||
|
||||
```js
|
||||
import { dataSourceService, editorService } from '@tmagic/editor';
|
||||
|
||||
const node = editorService.get('node');
|
||||
dataSourceService.copyWithRelated(node);
|
||||
```
|
||||
|
||||
## paste
|
||||
|
||||
- **参数：** 无
|
||||
|
||||
- **返回：**
|
||||
|
||||
- `{void}`
|
||||
|
||||
- **详情：**
|
||||
|
||||
粘贴数据源，从 localStorage 中读取复制的数据源并添加到当前页面
|
||||
|
||||
如果数据源id已存在，则不会覆盖
|
||||
|
||||
- **示例：**
|
||||
|
||||
```js
|
||||
import { dataSourceService } from '@tmagic/editor';
|
||||
|
||||
dataSourceService.paste();
|
||||
```
|
||||
|
||||
## resetState
|
||||
|
||||
## destroy
|
||||
- **参数：** 无
|
||||
|
||||
- **返回：**
|
||||
|
||||
- `{void}`
|
||||
|
||||
- **详情：**
|
||||
|
||||
重置数据源服务状态，清空所有数据源
|
||||
|
||||
- **示例：**
|
||||
|
||||
```js
|
||||
import { dataSourceService } from '@tmagic/editor';
|
||||
|
||||
dataSourceService.resetState();
|
||||
```
|
||||
|
||||
## destroy
|
||||
|
||||
- **参数：** 无
|
||||
|
||||
- **返回：**
|
||||
|
||||
- `{void}`
|
||||
|
||||
- **详情：**
|
||||
|
||||
销毁 dataSourceService，移除所有事件监听并重置状态
|
||||
|
||||
- **示例：**
|
||||
|
||||
```js
|
||||
import { dataSourceService } from '@tmagic/editor';
|
||||
|
||||
dataSourceService.destroy();
|
||||
```
|
||||
|
||||
## usePlugin
|
||||
|
||||
- **详情：**
|
||||
|
||||
相对于[use](#use), usePlugin支持更加灵活更加细致的扩展， 上述方法中标记有`扩展支持： 是`的方法都支持使用usePlugin扩展
|
||||
|
||||
每个支持扩展的方法都支持定制before、after两个hook来干预原有方法的行为，before可以用于修改传入参数，after可以用于修改返回的值
|
||||
|
||||
- **示例：**
|
||||
|
||||
```js
|
||||
import { dataSourceService } from '@tmagic/editor';
|
||||
|
||||
dataSourceService.usePlugin({
|
||||
beforeAdd(config) {
|
||||
console.log('添加前:', config);
|
||||
return [config];
|
||||
},
|
||||
|
||||
afterAdd(result, config) {
|
||||
console.log('添加后:', result);
|
||||
return result;
|
||||
},
|
||||
});
|
||||
```
|
||||
|
||||
## removeAllPlugins
|
||||
|
||||
- **详情：**
|
||||
|
||||
删掉当前设置的所有扩展
|
||||
|
||||
- **示例：**
|
||||
|
||||
```js
|
||||
import { dataSourceService } from '@tmagic/editor';
|
||||
|
||||
dataSourceService.removeAllPlugins();
|
||||
```
|
||||
@ -1,97 +1,244 @@
|
||||
# eventService方法
|
||||
# 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 事件方法列表配置
|
||||
|
||||
- **返回：**
|
||||
|
||||
- `{Promise<void>}`
|
||||
- `{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
|
||||
|
||||
- **参数：**
|
||||
|
||||
-
|
||||
- {Record<string, [EventOption](https://github.com/Tencent/tmagic-editor/blob/239b5d3efeae916a8cf3e3566d88063ecccc0553/packages/core/src/events.ts#L26-L29)[]>} events 事件配置对象
|
||||
|
||||
- **返回：**
|
||||
|
||||
- `{Promise<void>}`
|
||||
- `{void}`
|
||||
|
||||
- **详情：**
|
||||
|
||||
批量设置多个组件类型的事件列表
|
||||
|
||||
- **示例：**
|
||||
|
||||
```js
|
||||
import { eventsService } from '@tmagic/editor';
|
||||
|
||||
eventsService.setEvents({
|
||||
page: [
|
||||
{ label: '页面加载', value: 'load' },
|
||||
{ label: '页面显示', value: 'show' },
|
||||
],
|
||||
text: [
|
||||
{ label: '点击', value: 'click' },
|
||||
],
|
||||
});
|
||||
```
|
||||
|
||||
## setEvent
|
||||
|
||||
- **参数：**
|
||||
|
||||
-
|
||||
- `{string}` type 组件类型
|
||||
- {[EventOption](https://github.com/Tencent/tmagic-editor/blob/239b5d3efeae916a8cf3e3566d88063ecccc0553/packages/core/src/events.ts#L26-L29)[]} events 事件列表
|
||||
|
||||
- **返回：**
|
||||
|
||||
- `{Promise<void>}`
|
||||
- `{void}`
|
||||
|
||||
- **详情：**
|
||||
|
||||
设置指定组件类型的事件列表
|
||||
|
||||
- **示例：**
|
||||
|
||||
```js
|
||||
import { eventsService } from '@tmagic/editor';
|
||||
|
||||
eventsService.setEvent('button', [
|
||||
{ label: '点击', value: 'click' },
|
||||
{ label: '长按', value: 'longpress' },
|
||||
]);
|
||||
```
|
||||
|
||||
## getEvent
|
||||
|
||||
- **参数：**
|
||||
|
||||
-
|
||||
- `{string}` type 组件类型
|
||||
|
||||
- **返回：**
|
||||
|
||||
- `{Promise<void>}`
|
||||
- {[EventOption](https://github.com/Tencent/tmagic-editor/blob/239b5d3efeae916a8cf3e3566d88063ecccc0553/packages/core/src/events.ts#L26-L29)[]} 事件列表
|
||||
|
||||
- **详情：**
|
||||
|
||||
获取指定组件类型的事件列表
|
||||
|
||||
- **示例：**
|
||||
|
||||
```js
|
||||
import { eventsService } from '@tmagic/editor';
|
||||
|
||||
const events = eventsService.getEvent('button');
|
||||
console.log(events); // [{ label: '点击', value: 'click' }, ...]
|
||||
```
|
||||
|
||||
## setMethods
|
||||
|
||||
- **参数：**
|
||||
|
||||
-
|
||||
- {Record<string, [EventOption](https://github.com/Tencent/tmagic-editor/blob/239b5d3efeae916a8cf3e3566d88063ecccc0553/packages/core/src/events.ts#L26-L29)[]>} methods 方法配置对象
|
||||
|
||||
- **返回：**
|
||||
|
||||
- `{Promise<void>}`
|
||||
- `{void}`
|
||||
|
||||
- **详情：**
|
||||
|
||||
批量设置多个组件类型的方法列表
|
||||
|
||||
- **示例：**
|
||||
|
||||
```js
|
||||
import { eventsService } from '@tmagic/editor';
|
||||
|
||||
eventsService.setMethods({
|
||||
page: [
|
||||
{ label: '刷新', value: 'refresh' },
|
||||
{ label: '滚动到顶部', value: 'scrollToTop' },
|
||||
],
|
||||
video: [
|
||||
{ label: '播放', value: 'play' },
|
||||
{ label: '暂停', value: 'pause' },
|
||||
],
|
||||
});
|
||||
```
|
||||
|
||||
## setMethod
|
||||
|
||||
- **参数：**
|
||||
|
||||
-
|
||||
- `{string}` type 组件类型
|
||||
- {[EventOption](https://github.com/Tencent/tmagic-editor/blob/239b5d3efeae916a8cf3e3566d88063ecccc0553/packages/core/src/events.ts#L26-L29)[]} methods 方法列表
|
||||
|
||||
- **返回：**
|
||||
|
||||
- `{Promise<void>}`
|
||||
- `{void}`
|
||||
|
||||
- **详情：**
|
||||
|
||||
设置指定组件类型的方法列表
|
||||
|
||||
- **示例：**
|
||||
|
||||
```js
|
||||
import { eventsService } from '@tmagic/editor';
|
||||
|
||||
eventsService.setMethod('video', [
|
||||
{ label: '播放', value: 'play' },
|
||||
{ label: '暂停', value: 'pause' },
|
||||
{ label: '停止', value: 'stop' },
|
||||
]);
|
||||
```
|
||||
|
||||
## getMethod
|
||||
|
||||
- **参数：**
|
||||
|
||||
-
|
||||
- `{string}` type 组件类型
|
||||
|
||||
- **返回：**
|
||||
|
||||
- `{Promise<void>}`
|
||||
- {[EventOption](https://github.com/Tencent/tmagic-editor/blob/239b5d3efeae916a8cf3e3566d88063ecccc0553/packages/core/src/events.ts#L26-L29)[]} 方法列表
|
||||
|
||||
- **详情：**
|
||||
|
||||
获取指定组件类型的方法列表
|
||||
|
||||
- **示例：**
|
||||
|
||||
```js
|
||||
import { eventsService } from '@tmagic/editor';
|
||||
|
||||
const methods = eventsService.getMethod('video');
|
||||
console.log(methods); // [{ label: '播放', value: 'play' }, ...]
|
||||
```
|
||||
|
||||
## resetState
|
||||
|
||||
- **参数：** 无
|
||||
|
||||
- **返回：**
|
||||
|
||||
- `{void}`
|
||||
|
||||
- **详情：**
|
||||
|
||||
重置事件服务状态，清空所有事件和方法配置
|
||||
|
||||
- **示例：**
|
||||
|
||||
```js
|
||||
import { eventsService } from '@tmagic/editor';
|
||||
|
||||
eventsService.resetState();
|
||||
```
|
||||
|
||||
## destroy
|
||||
|
||||
- **参数：**
|
||||
|
||||
-
|
||||
- **参数：** 无
|
||||
|
||||
- **返回：**
|
||||
|
||||
- `{Promise<void>}`
|
||||
- `{void}`
|
||||
|
||||
- **详情：**
|
||||
|
||||
销毁 eventsService，重置状态并移除所有事件监听和插件
|
||||
|
||||
- **示例：**
|
||||
|
||||
```js
|
||||
import { eventsService } from '@tmagic/editor';
|
||||
|
||||
eventsService.destroy();
|
||||
```
|
||||
|
||||
@ -967,83 +967,316 @@ const updateDragEl = (el, target) => {
|
||||
|
||||
- **详情：**
|
||||
|
||||
标尺配置
|
||||
画布标尺和参考线的配置选项
|
||||
|
||||
- **默认值：** `undefined`
|
||||
|
||||
- **类型：** `Partial<GuidesOptions>`
|
||||
|
||||
|
||||
- **示例：**
|
||||
|
||||
```html
|
||||
<template>
|
||||
<m-editor :guides-options="guidesOptions"></m-editor>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
const guidesOptions = {
|
||||
// 标尺刻度单位
|
||||
unit: 1,
|
||||
// 标尺背景色
|
||||
backgroundColor: '#f0f0f0',
|
||||
// 标尺文字颜色
|
||||
textColor: '#333',
|
||||
// 参考线颜色
|
||||
lineColor: '#ff0000',
|
||||
};
|
||||
</script>
|
||||
```
|
||||
|
||||
## disabledPageFragment
|
||||
|
||||
- **详情：**
|
||||
|
||||
禁用页面片
|
||||
禁用页面片功能
|
||||
|
||||
页面片是可以在多个页面中复用的组件集合
|
||||
|
||||
- **默认值：** `false`
|
||||
|
||||
- **类型：** `boolean`
|
||||
|
||||
|
||||
- **示例：**
|
||||
|
||||
```html
|
||||
<template>
|
||||
<m-editor :disabled-page-fragment="true"></m-editor>
|
||||
</template>
|
||||
```
|
||||
|
||||
## disabledStageOverlay
|
||||
|
||||
- **详情：**
|
||||
|
||||
禁用双击在浮层中单独编辑选中组件
|
||||
禁用双击在浮层中单独编辑选中组件的功能
|
||||
|
||||
启用时，双击组件可以在浮层中单独编辑，避免其他组件干扰
|
||||
|
||||
- **默认值：** `false`
|
||||
|
||||
- **类型：** `boolean`
|
||||
|
||||
|
||||
- **示例：**
|
||||
|
||||
```html
|
||||
<template>
|
||||
<m-editor :disabled-stage-overlay="true"></m-editor>
|
||||
</template>
|
||||
```
|
||||
|
||||
## disabledShowSrc
|
||||
|
||||
- **详情：**
|
||||
|
||||
禁用属性配置面板右下角显示源码的按钮
|
||||
禁用属性配置面板右下角"显示源码"的按钮
|
||||
|
||||
该按钮可以查看和编辑组件的 JSON 配置
|
||||
|
||||
- **默认值：** `false`
|
||||
|
||||
- **类型：** `boolean`
|
||||
|
||||
- **示例：**
|
||||
|
||||
```html
|
||||
<template>
|
||||
<m-editor :disabled-show-src="true"></m-editor>
|
||||
</template>
|
||||
```
|
||||
|
||||
## disabledDataSource
|
||||
|
||||
- **详情：**
|
||||
|
||||
禁用数据源
|
||||
禁用数据源功能
|
||||
|
||||
禁用后，左侧面板将不显示数据源选项卡
|
||||
|
||||
- **默认值：** `false`
|
||||
|
||||
- **类型：** `boolean`
|
||||
|
||||
- **示例：**
|
||||
|
||||
```html
|
||||
<template>
|
||||
<m-editor :disabled-data-source="true"></m-editor>
|
||||
</template>
|
||||
```
|
||||
|
||||
## disabledCodeBlock
|
||||
|
||||
- **详情：**
|
||||
|
||||
禁用代码块
|
||||
禁用代码块功能
|
||||
|
||||
禁用后，左侧面板将不显示代码块选项卡
|
||||
|
||||
- **默认值：** `false`
|
||||
|
||||
- **类型：** `boolean`
|
||||
|
||||
- **示例：**
|
||||
|
||||
```html
|
||||
<template>
|
||||
<m-editor :disabled-code-block="true"></m-editor>
|
||||
</template>
|
||||
```
|
||||
|
||||
## treeIndent
|
||||
|
||||
- **详情：**
|
||||
|
||||
已选组件、代码编辑、数据源缩进配置
|
||||
组件树、代码块列表、数据源列表的缩进配置（单位：px）
|
||||
|
||||
- **默认值：** `undefined`
|
||||
|
||||
- **类型：** `number`
|
||||
|
||||
- **示例：**
|
||||
|
||||
```html
|
||||
<template>
|
||||
<m-editor :tree-indent="20"></m-editor>
|
||||
</template>
|
||||
```
|
||||
|
||||
## treeNextLevelIndentIncrement
|
||||
|
||||
- **详情：**
|
||||
|
||||
已选组件、代码编辑、数据源子节点缩进增量配置
|
||||
组件树、代码块列表、数据源列表子节点缩进增量配置（单位：px）
|
||||
|
||||
每一级子节点会在父节点缩进基础上增加该值
|
||||
|
||||
- **默认值：** `undefined`
|
||||
|
||||
- **类型：** `number`
|
||||
|
||||
- **示例：**
|
||||
|
||||
```html
|
||||
<template>
|
||||
<!-- 第一级缩进20px，第二级缩进35px，第三级缩进50px -->
|
||||
<m-editor :tree-indent="20" :tree-next-level-indent-increment="15"></m-editor>
|
||||
</template>
|
||||
```
|
||||
|
||||
## customContentMenu
|
||||
|
||||
- **详情：**
|
||||
|
||||
用于自定义组件树与画布的右键菜单
|
||||
用于自定义组件树与画布的右键菜单
|
||||
|
||||
- **类型：** `function`
|
||||
该函数会在显示右键菜单前被调用，接收默认菜单项作为参数，返回最终显示的菜单项
|
||||
|
||||
- **默认值：** `(menus) => menus`
|
||||
|
||||
- **类型：** `(menus: (MenuButton | MenuComponent)[], data: { node?: MNode; page?: MPage; parent?: MContainer; stage?: StageCore }) => (MenuButton | MenuComponent)[]`
|
||||
|
||||
- **示例：**
|
||||
|
||||
```html
|
||||
<template>
|
||||
<m-editor :custom-content-menu="customContentMenu"></m-editor>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
const customContentMenu = (menus, { node }) => {
|
||||
// 为特定类型的组件添加自定义菜单
|
||||
if (node?.type === 'container') {
|
||||
menus.push({
|
||||
type: 'button',
|
||||
text: '清空容器',
|
||||
handler: () => {
|
||||
// 清空容器的逻辑
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
// 可以过滤掉某些菜单项
|
||||
return menus.filter(menu => menu.text !== '删除');
|
||||
};
|
||||
</script>
|
||||
```
|
||||
|
||||
## extendFormState
|
||||
|
||||
- **详情：**
|
||||
|
||||
扩展表单状态
|
||||
|
||||
用于在属性表单中注入自定义的状态数据，这些数据可以在表单配置的各个字段为函数时的第一个参数中获取
|
||||
|
||||
- **默认值：** `undefined`
|
||||
|
||||
- **类型：** `(state: FormState) => Record<string, any> | Promise<Record<string, any>>`
|
||||
|
||||
- **示例：**
|
||||
|
||||
```html
|
||||
<template>
|
||||
<m-editor :extend-form-state="extendFormState"></m-editor>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
const extendFormState = async (state) => {
|
||||
// 返回自定义的状态数据
|
||||
return {
|
||||
// 可以是同步数据
|
||||
currentUser: {
|
||||
name: 'Admin',
|
||||
role: 'admin',
|
||||
},
|
||||
// 也可以是异步获取的数据
|
||||
projectConfig: await fetchProjectConfig(),
|
||||
};
|
||||
};
|
||||
</script>
|
||||
```
|
||||
|
||||
:::tip
|
||||
扩展的状态可以在表单配置中通过 `state` 访问，例如：
|
||||
|
||||
```js
|
||||
{
|
||||
name: 'title',
|
||||
text: '标题',
|
||||
// 根据扩展的状态动态设置
|
||||
disabled: (state) => state.currentUser.role !== 'admin',
|
||||
}
|
||||
```
|
||||
:::
|
||||
|
||||
## pageBarSortOptions
|
||||
|
||||
- **详情：**
|
||||
|
||||
页面顺序拖拽配置参数
|
||||
页面标签栏的拖拽排序配置参数
|
||||
|
||||
用于配置页面标签的拖拽排序行为
|
||||
|
||||
- **默认值：** `undefined`
|
||||
|
||||
- **类型：** [PageBarSortOptions](https://github.com/Tencent/tmagic-editor/blob/master/packages/editor/src/type.ts)
|
||||
|
||||
- **示例：**
|
||||
|
||||
```html
|
||||
<template>
|
||||
<m-editor :page-bar-sort-options="sortOptions"></m-editor>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
const sortOptions = {
|
||||
// 是否启用拖拽排序
|
||||
animation: 150,
|
||||
// 拖拽手柄的class
|
||||
handle: '.page-bar-item',
|
||||
// 其他 sortablejs 配置
|
||||
};
|
||||
</script>
|
||||
```
|
||||
|
||||
## pageFilterFunction
|
||||
|
||||
- **详情：**
|
||||
|
||||
页面搜索函数
|
||||
页面搜索/过滤函数
|
||||
|
||||
用于自定义页面的搜索逻辑，在页面列表中输入关键词时会调用该函数进行过滤
|
||||
|
||||
- **默认值：** `undefined`
|
||||
|
||||
- **类型：** `(page: MPage | MPageFragment, keyword: string) => boolean`
|
||||
|
||||
- **示例：**
|
||||
|
||||
```html
|
||||
<template>
|
||||
<m-editor :page-filter-function="pageFilterFunction"></m-editor>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
const pageFilterFunction = (page, keyword) => {
|
||||
// 自定义搜索逻辑
|
||||
// 不仅搜索页面名称，还搜索页面的其他属性
|
||||
return (
|
||||
page.name?.includes(keyword) ||
|
||||
page.title?.includes(keyword) ||
|
||||
page.id?.includes(keyword)
|
||||
);
|
||||
};
|
||||
</script>
|
||||
```
|
||||
|
||||
@ -1,29 +1,111 @@
|
||||
# Editor组件 slots
|
||||
|
||||
## header
|
||||
|
||||
- **详情：** 编辑器最顶部区域
|
||||
|
||||
- **默认：** 无
|
||||
|
||||
- **示例：**
|
||||
|
||||
```html
|
||||
<template>
|
||||
<m-editor>
|
||||
<template #header>
|
||||
<div class="custom-header">自定义头部内容</div>
|
||||
</template>
|
||||
</m-editor>
|
||||
</template>
|
||||
```
|
||||
|
||||
## nav
|
||||
|
||||
- **详情：** 编辑器顶部菜单栏
|
||||
|
||||
- **默认：** [NavMenu.vue](https://github.com/Tencent/tmagic-editor/blob/239b5d3efeae916a8cf3e3566d88063ecccc0553/packages/editor/src/layouts/NavMenu.vue)
|
||||
|
||||
- **插槽 Props：**
|
||||
- `editorService`: editorService 实例
|
||||
|
||||
:::warning
|
||||
属性配置[menu](./props.md#menu)由默认组件接收，如设置该slot，[menu](./props.md#menu)配置将失效
|
||||
:::
|
||||
|
||||
- **示例：**
|
||||
|
||||
```html
|
||||
<template>
|
||||
<m-editor>
|
||||
<template #nav="{ editorService }">
|
||||
<div class="custom-nav">
|
||||
<button @click="save">保存</button>
|
||||
</div>
|
||||
</template>
|
||||
</m-editor>
|
||||
</template>
|
||||
```
|
||||
|
||||
## content-before
|
||||
|
||||
- **详情：** 编辑器主要内容区域之前
|
||||
|
||||
- **默认：** 无
|
||||
|
||||
## src-code
|
||||
|
||||
- **详情：** 源码查看区域
|
||||
|
||||
- **默认：** 默认的代码编辑器
|
||||
|
||||
- **插槽 Props：**
|
||||
- `editorService`: editorService 实例
|
||||
|
||||
## sidebar
|
||||
|
||||
- **详情：** 左边栏
|
||||
|
||||
- **默认：** [Sidebar.vue](https://github.com/Tencent/tmagic-editor/blob/239b5d3efeae916a8cf3e3566d88063ecccc0553/packages/editor/src/layouts/sidebar/Sidebar.vue)
|
||||
|
||||
- **插槽 Props：**
|
||||
- `editorService`: editorService 实例
|
||||
|
||||
:::warning
|
||||
属性配置[sidebar](./props.md#sidebar)由默认组件接收，如设置该slot，[sidebar](./props.md#sidebar)配置将失效
|
||||
:::
|
||||
|
||||
- **示例：**
|
||||
|
||||
```html
|
||||
<template>
|
||||
<m-editor>
|
||||
<template #sidebar="{ editorService }">
|
||||
<div class="custom-sidebar">
|
||||
<!-- 自定义侧边栏内容 -->
|
||||
</div>
|
||||
</template>
|
||||
</m-editor>
|
||||
</template>
|
||||
```
|
||||
|
||||
## component-list
|
||||
|
||||
- **详情：** 左边栏中的组件列表
|
||||
|
||||
- **默认：** 默认的组件列表
|
||||
|
||||
- **插槽 Props：**
|
||||
- `componentGroupList`: 组件分组列表
|
||||
|
||||
:::warning
|
||||
如设置了[sidebar](#sidebar)插槽，此插槽将失效
|
||||
:::
|
||||
|
||||
## component-list-panel-header
|
||||
|
||||
- **详情：** 左边栏中的组件列表内上方位置
|
||||
|
||||
- **默认：** 无
|
||||
|
||||
:::warning
|
||||
如设置了[sidebar](#sidebar)插槽，此插槽将失效
|
||||
:::
|
||||
@ -34,24 +116,84 @@
|
||||
|
||||
- **默认：** 图片加文案
|
||||
|
||||
- **插槽 Props：**
|
||||
- `component`: 组件配置对象
|
||||
|
||||
:::warning
|
||||
如设置了[sidebar](#sidebar)插槽，此插槽将失效
|
||||
:::
|
||||
|
||||
- **示例：**
|
||||
|
||||
```html
|
||||
<template>
|
||||
<m-editor>
|
||||
<template #component-list-item="{ component }">
|
||||
<div class="custom-item">
|
||||
<span>{{ component.text }}</span>
|
||||
</div>
|
||||
</template>
|
||||
</m-editor>
|
||||
</template>
|
||||
```
|
||||
|
||||
## layer-panel-header
|
||||
|
||||
- **详情：** 左边栏中的已选组件（组件树）内顶部位置
|
||||
|
||||
- **默认：** 无
|
||||
|
||||
:::warning
|
||||
如设置了[sidebar](#sidebar)插槽，此插槽将失效
|
||||
:::
|
||||
|
||||
## layer-node-content
|
||||
|
||||
- **详情：** 左边栏中的已选组件（组件树）节点
|
||||
- **详情：** 左边栏中的已选组件（组件树）节点完整内容
|
||||
|
||||
- **默认：** 组件名称加id和工具按钮
|
||||
|
||||
- **插槽 Props：**
|
||||
- `data`: 节点数据
|
||||
|
||||
:::warning
|
||||
如设置了[sidebar](#sidebar)插槽，此插槽将失效
|
||||
:::
|
||||
|
||||
## layer-node-label
|
||||
|
||||
- **详情：** 左边栏中的已选组件（组件树）节点标签部分
|
||||
|
||||
- **默认：** 组件名称加id
|
||||
|
||||
- **插槽 Props：**
|
||||
- `data`: 节点数据
|
||||
|
||||
:::warning
|
||||
如设置了[sidebar](#sidebar)插槽，此插槽将失效
|
||||
:::
|
||||
|
||||
- **示例：**
|
||||
|
||||
```html
|
||||
<template>
|
||||
<m-editor>
|
||||
<template #layer-node-label="{ data }">
|
||||
<span>{{ data.type }} - {{ data.name }}</span>
|
||||
</template>
|
||||
</m-editor>
|
||||
</template>
|
||||
```
|
||||
|
||||
## layer-node-tool
|
||||
|
||||
- **详情：** 左边栏中的已选组件（组件树）节点右侧工具区域
|
||||
|
||||
- **默认：** 无
|
||||
|
||||
- **插槽 Props：**
|
||||
- `data`: 节点数据
|
||||
|
||||
:::warning
|
||||
如设置了[sidebar](#sidebar)插槽，此插槽将失效
|
||||
:::
|
||||
@ -60,6 +202,8 @@
|
||||
|
||||
- **详情：** 左边栏中的代码块列表内顶部位置
|
||||
|
||||
- **默认：** 无
|
||||
|
||||
:::warning
|
||||
如设置了[sidebar](#sidebar)插槽，此插槽将失效
|
||||
:::
|
||||
@ -68,13 +212,44 @@
|
||||
|
||||
- **详情：** 左边栏中的代码块列表中代码块右侧位置
|
||||
|
||||
- **默认：** 无
|
||||
|
||||
- **插槽 Props：**
|
||||
- `id`: 代码块id
|
||||
- `data`: 代码块数据
|
||||
|
||||
:::warning
|
||||
如设置了[sidebar](#sidebar)插槽，此插槽将失效
|
||||
:::
|
||||
|
||||
## code-block-edit-panel-header
|
||||
## code-block-panel-search
|
||||
|
||||
- **详情：** 代码块弹窗编辑器中弹窗顶部区域
|
||||
- **详情：** 左边栏中的代码块列表搜索框位置
|
||||
|
||||
- **默认：** 无
|
||||
|
||||
:::warning
|
||||
如设置了[sidebar](#sidebar)插槽，此插槽将失效
|
||||
:::
|
||||
|
||||
## data-source-panel-tool
|
||||
|
||||
- **详情：** 左边栏中的数据源列表中数据源右侧位置
|
||||
|
||||
- **默认：** 无
|
||||
|
||||
- **插槽 Props：**
|
||||
- `data`: 数据源数据
|
||||
|
||||
:::warning
|
||||
如设置了[sidebar](#sidebar)插槽，此插槽将失效
|
||||
:::
|
||||
|
||||
## data-source-panel-search
|
||||
|
||||
- **详情：** 左边栏中的数据源列表搜索框位置
|
||||
|
||||
- **默认：** 无
|
||||
|
||||
:::warning
|
||||
如设置了[sidebar](#sidebar)插槽，此插槽将失效
|
||||
@ -86,6 +261,9 @@
|
||||
|
||||
- **默认：** [Workspace.vue](https://github.com/Tencent/tmagic-editor/blob/239b5d3efeae916a8cf3e3566d88063ecccc0553/packages/editor/src/layouts/workspace/Workspace.vue)
|
||||
|
||||
- **插槽 Props：**
|
||||
- `editorService`: editorService 实例
|
||||
|
||||
## stage
|
||||
|
||||
- **详情：** 画布
|
||||
@ -94,15 +272,63 @@
|
||||
|
||||
## workspace-content
|
||||
|
||||
- **详情：** 编辑器中间区域内
|
||||
- **详情：** 编辑器中间区域内，画布上方位置
|
||||
|
||||
- **默认：** 无
|
||||
|
||||
- **插槽 Props：**
|
||||
- `editorService`: editorService 实例
|
||||
|
||||
## page-bar
|
||||
|
||||
- **详情：** 编辑器中间区域底部页面标签栏
|
||||
|
||||
- **默认：** 默认的页面标签栏
|
||||
|
||||
## page-bar-add-button
|
||||
|
||||
- **详情：** 页面标签栏中的"添加页面"按钮
|
||||
|
||||
- **默认：** 默认的添加按钮
|
||||
|
||||
## page-bar-title
|
||||
|
||||
- **详情：** 编辑器中间区域底部页面标题
|
||||
|
||||
- **默认：** 页面名称
|
||||
|
||||
- **插槽 Props：**
|
||||
- `page`: 页面配置对象
|
||||
|
||||
- **示例：**
|
||||
|
||||
```html
|
||||
<template>
|
||||
<m-editor>
|
||||
<template #page-bar-title="{ page }">
|
||||
<span>{{ page.name }} - {{ page.id }}</span>
|
||||
</template>
|
||||
</m-editor>
|
||||
</template>
|
||||
```
|
||||
|
||||
## page-bar-popover
|
||||
|
||||
- **详情：** 编辑器中间区域底部页面标题悬浮框
|
||||
- **详情：** 编辑器中间区域底部页面标题悬浮框内容
|
||||
|
||||
- **默认：** 页面详细信息
|
||||
|
||||
- **插槽 Props：**
|
||||
- `page`: 页面配置对象
|
||||
|
||||
## page-list-popover
|
||||
|
||||
- **详情：** 页面列表弹出框内容
|
||||
|
||||
- **默认：** 页面列表
|
||||
|
||||
- **插槽 Props：**
|
||||
- `list`: 页面列表
|
||||
|
||||
## props-panel
|
||||
|
||||
@ -114,8 +340,40 @@
|
||||
|
||||
- **详情：** 编辑器右侧属性配置内顶部区域
|
||||
|
||||
- **默认：** 无
|
||||
|
||||
## content-after
|
||||
|
||||
- **详情：** 编辑器主要内容区域之后
|
||||
|
||||
- **默认：** 无
|
||||
|
||||
## footer
|
||||
|
||||
- **详情：** 编辑器底部区域
|
||||
|
||||
- **默认：** 无
|
||||
|
||||
## empty
|
||||
|
||||
- **详情：** 当前没有页面时，编辑器中间区域
|
||||
|
||||
- **默认：** [AddPageBox.vue](https://github.com/Tencent/tmagic-editor/blob/239b5d3efeae916a8cf3e3566d88063ecccc0553/packages/editor/src/layouts/AddPageBox.vue)
|
||||
|
||||
- **插槽 Props：**
|
||||
- `editorService`: editorService 实例
|
||||
|
||||
- **示例：**
|
||||
|
||||
```html
|
||||
<template>
|
||||
<m-editor>
|
||||
<template #empty="{ editorService }">
|
||||
<div class="custom-empty">
|
||||
<p>暂无页面</p>
|
||||
<button @click="createFirstPage">创建第一个页面</button>
|
||||
</div>
|
||||
</template>
|
||||
</m-editor>
|
||||
</template>
|
||||
```
|
||||
|
||||
@ -4,114 +4,250 @@
|
||||
|
||||
- **[扩展支持](../../guide/editor-expand#行为扩展)：** 是
|
||||
|
||||
- **参数：**
|
||||
|
||||
-
|
||||
- **参数：** 无
|
||||
|
||||
- **返回：**
|
||||
|
||||
- `{Promise<void>}`
|
||||
- `{Storage}` Storage 对象
|
||||
|
||||
- **详情：**
|
||||
|
||||
获取数据存储对象，默认返回 localStorage
|
||||
|
||||
可以通过插件机制替换为其他存储对象（如 sessionStorage）
|
||||
|
||||
- **示例：**
|
||||
|
||||
```js
|
||||
import { storageService } from '@tmagic/editor';
|
||||
|
||||
const storage = storageService.getStorage();
|
||||
console.log(storage); // localStorage
|
||||
|
||||
// 通过插件替换为 sessionStorage
|
||||
storageService.usePlugin({
|
||||
afterGetStorage() {
|
||||
return window.sessionStorage;
|
||||
},
|
||||
});
|
||||
```
|
||||
|
||||
## getNamespace
|
||||
|
||||
- **[扩展支持](../../guide/editor-expand#行为扩展)：** 是
|
||||
|
||||
- **参数：**
|
||||
|
||||
-
|
||||
- **参数：** 无
|
||||
|
||||
- **返回：**
|
||||
|
||||
- `{Promise<void>}`
|
||||
- `{string}` 命名空间字符串
|
||||
|
||||
- **详情：**
|
||||
|
||||
获取存储项的命名空间，默认为 'tmagic'
|
||||
|
||||
命名空间用于区分不同应用的存储数据
|
||||
|
||||
- **示例：**
|
||||
|
||||
```js
|
||||
import { storageService } from '@tmagic/editor';
|
||||
|
||||
const namespace = storageService.getNamespace();
|
||||
console.log(namespace); // 'tmagic'
|
||||
```
|
||||
|
||||
## clear
|
||||
|
||||
- **[扩展支持](../../guide/editor-expand#行为扩展)：** 是
|
||||
|
||||
- **参数：**
|
||||
|
||||
-
|
||||
- **参数：** 无
|
||||
|
||||
- **返回：**
|
||||
|
||||
- `{Promise<void>}`
|
||||
- `{void}`
|
||||
|
||||
- **详情：**
|
||||
|
||||
清空当前存储对象中的所有数据
|
||||
|
||||
- **示例：**
|
||||
|
||||
```js
|
||||
import { storageService } from '@tmagic/editor';
|
||||
|
||||
storageService.clear();
|
||||
```
|
||||
|
||||
## getItem
|
||||
|
||||
- **[扩展支持](../../guide/editor-expand#行为扩展)：** 是
|
||||
|
||||
- **参数：**
|
||||
|
||||
-
|
||||
- `{string}` key 存储项的键名
|
||||
- `{Options}` options 可选配置
|
||||
- `namespace?: string` 自定义命名空间
|
||||
- `protocol?: Protocol` 数据协议类型
|
||||
|
||||
- **返回：**
|
||||
|
||||
- `{Promise<void>}`
|
||||
- `{any}` 存储的值，如果不存在返回 null
|
||||
|
||||
- **详情：**
|
||||
|
||||
获取存储项，支持多种数据类型的自动解析
|
||||
|
||||
支持的协议类型：
|
||||
- `Protocol.OBJECT`: JavaScript 对象
|
||||
- `Protocol.JSON`: JSON 格式
|
||||
- `Protocol.NUMBER`: 数字类型
|
||||
- `Protocol.BOOLEAN`: 布尔类型
|
||||
- `Protocol.STRING`: 字符串类型
|
||||
|
||||
- **示例：**
|
||||
|
||||
```js
|
||||
import { storageService } from '@tmagic/editor';
|
||||
|
||||
// 获取字符串
|
||||
const str = storageService.getItem('myKey');
|
||||
|
||||
// 使用自定义命名空间
|
||||
const value = storageService.getItem('key', { namespace: 'custom' });
|
||||
|
||||
// 指定协议类型
|
||||
const num = storageService.getItem('count', { protocol: Protocol.NUMBER });
|
||||
```
|
||||
|
||||
## key
|
||||
|
||||
- **参数：**
|
||||
|
||||
-
|
||||
- `{number}` index 索引位置
|
||||
|
||||
- **返回：**
|
||||
|
||||
- `{Promise<void>}`
|
||||
- `{string | null}` 指定位置的键名，不存在返回 null
|
||||
|
||||
- **详情：**
|
||||
|
||||
获取存储对象中指定索引位置的键名
|
||||
|
||||
- **示例：**
|
||||
|
||||
```js
|
||||
import { storageService } from '@tmagic/editor';
|
||||
|
||||
const firstKey = storageService.key(0);
|
||||
console.log(firstKey);
|
||||
```
|
||||
|
||||
## removeItem
|
||||
|
||||
- **[扩展支持](../../guide/editor-expand#行为扩展)：** 是
|
||||
|
||||
- **参数：**
|
||||
|
||||
-
|
||||
- `{string}` key 存储项的键名
|
||||
- `{Options}` options 可选配置
|
||||
- `namespace?: string` 自定义命名空间
|
||||
|
||||
- **返回：**
|
||||
|
||||
- `{Promise<void>}`
|
||||
- `{void}`
|
||||
|
||||
- **详情：**
|
||||
|
||||
移除指定的存储项
|
||||
|
||||
- **示例：**
|
||||
|
||||
```js
|
||||
import { storageService } from '@tmagic/editor';
|
||||
|
||||
// 移除默认命名空间下的存储项
|
||||
storageService.removeItem('myKey');
|
||||
|
||||
// 移除自定义命名空间下的存储项
|
||||
storageService.removeItem('key', { namespace: 'custom' });
|
||||
```
|
||||
|
||||
## setItem
|
||||
|
||||
- **[扩展支持](../../guide/editor-expand#行为扩展)：** 是
|
||||
|
||||
- **参数：**
|
||||
|
||||
-
|
||||
- `{string}` key 存储项的键名
|
||||
- `{any}` value 要存储的值
|
||||
- `{Options}` options 可选配置
|
||||
- `namespace?: string` 自定义命名空间
|
||||
- `protocol?: Protocol` 数据协议类型
|
||||
|
||||
- **返回：**
|
||||
|
||||
- `{Promise<void>}`
|
||||
- `{void}`
|
||||
|
||||
- **详情：**
|
||||
|
||||
设置存储项，自动序列化复杂数据类型
|
||||
|
||||
- **示例：**
|
||||
|
||||
```js
|
||||
import { storageService, Protocol } from '@tmagic/editor';
|
||||
|
||||
// 存储字符串
|
||||
storageService.setItem('name', 'tmagic');
|
||||
|
||||
// 存储对象
|
||||
storageService.setItem('config', { a: 1, b: 2 }, { protocol: Protocol.OBJECT });
|
||||
|
||||
// 存储数字
|
||||
storageService.setItem('count', 100, { protocol: Protocol.NUMBER });
|
||||
|
||||
// 使用自定义命名空间
|
||||
storageService.setItem('key', 'value', { namespace: 'custom' });
|
||||
```
|
||||
|
||||
## destroy
|
||||
|
||||
- **参数：**
|
||||
|
||||
-
|
||||
- **参数：** 无
|
||||
|
||||
- **返回：**
|
||||
|
||||
- `{Promise<void>}`
|
||||
- `{void}`
|
||||
|
||||
- **详情：**
|
||||
|
||||
销毁 storageService，移除所有事件监听和插件
|
||||
|
||||
- **示例：**
|
||||
|
||||
```js
|
||||
import { storageService } from '@tmagic/editor';
|
||||
|
||||
storageService.destroy();
|
||||
```
|
||||
|
||||
## use
|
||||
|
||||
使用中间件的方式扩展方法，上述方法中标记有`扩展支持： 是`的方法都支持使用use扩展
|
||||
|
||||
- **示例：**
|
||||
|
||||
```js
|
||||
import { storageService } from '@tmagic/editor';
|
||||
|
||||
storageService.use({
|
||||
getItem(key, options, next) {
|
||||
console.log('获取存储项:', key);
|
||||
return next();
|
||||
},
|
||||
});
|
||||
```
|
||||
|
||||
## usePlugin
|
||||
|
||||
- **详情：**
|
||||
@ -120,9 +256,35 @@
|
||||
|
||||
每个支持扩展的方法都支持定制before、after两个hook来干预原有方法的行为，before可以用于修改传入参数，after可以用于修改返回的值
|
||||
|
||||
- **示例：**
|
||||
|
||||
```js
|
||||
import { storageService } from '@tmagic/editor';
|
||||
|
||||
storageService.usePlugin({
|
||||
beforeSetItem(key, value, options) {
|
||||
console.log('设置前:', key, value);
|
||||
return [key, value, options];
|
||||
},
|
||||
|
||||
afterGetItem(result, key, options) {
|
||||
console.log('获取后:', result);
|
||||
return result;
|
||||
},
|
||||
});
|
||||
```
|
||||
|
||||
## removeAllPlugins
|
||||
|
||||
- **详情：**
|
||||
|
||||
删掉当前设置的所有扩展
|
||||
|
||||
- **示例：**
|
||||
|
||||
```js
|
||||
import { storageService } from '@tmagic/editor';
|
||||
|
||||
storageService.removeAllPlugins();
|
||||
```
|
||||
|
||||
|
||||
@ -1,12 +1,89 @@
|
||||
# uiService方法
|
||||
|
||||
## set
|
||||
|
||||
- **参数：**
|
||||
|
||||
- `{keyof UiState}` name 状态键名
|
||||
- `{any}` value 状态值
|
||||
|
||||
- **返回：**
|
||||
|
||||
- `{void}`
|
||||
|
||||
- **详情：**
|
||||
|
||||
设置UI服务的状态
|
||||
|
||||
可用的状态键：
|
||||
- `uiSelectMode`: UI选择模式
|
||||
- `showSrc`: 是否显示源码
|
||||
- `showStylePanel`: 是否显示样式面板
|
||||
- `zoom`: 缩放比例
|
||||
- `stageContainerRect`: 画布容器尺寸
|
||||
- `stageRect`: 画布尺寸
|
||||
- `columnWidth`: 列宽度配置
|
||||
- `showGuides`: 是否显示参考线
|
||||
- `showRule`: 是否显示标尺
|
||||
- `propsPanelSize`: 属性面板尺寸
|
||||
- `showAddPageButton`: 是否显示添加页面按钮
|
||||
- `showPageListButton`: 是否显示页面列表按钮
|
||||
- `hideSlideBar`: 是否隐藏侧边栏
|
||||
- `sideBarItems`: 侧边栏项目
|
||||
- `navMenuRect`: 导航菜单尺寸
|
||||
- `frameworkRect`: 框架尺寸
|
||||
|
||||
- **示例：**
|
||||
|
||||
```js
|
||||
import { uiService } from '@tmagic/editor';
|
||||
|
||||
// 设置缩放比例
|
||||
uiService.set('zoom', 1.5);
|
||||
|
||||
// 设置画布尺寸
|
||||
uiService.set('stageRect', { width: 375, height: 667 });
|
||||
|
||||
// 显示/隐藏参考线
|
||||
uiService.set('showGuides', true);
|
||||
|
||||
// 显示/隐藏标尺
|
||||
uiService.set('showRule', true);
|
||||
```
|
||||
|
||||
## get
|
||||
|
||||
- **参数：**
|
||||
|
||||
- `{keyof UiState}` name 状态键名
|
||||
|
||||
- **返回：**
|
||||
|
||||
- `{any}` 对应的状态值
|
||||
|
||||
- **详情：**
|
||||
|
||||
获取UI服务的状态值
|
||||
|
||||
- **示例：**
|
||||
|
||||
```js
|
||||
import { uiService } from '@tmagic/editor';
|
||||
|
||||
const zoom = uiService.get('zoom');
|
||||
console.log('当前缩放:', zoom);
|
||||
|
||||
const stageRect = uiService.get('stageRect');
|
||||
console.log('画布尺寸:', stageRect);
|
||||
```
|
||||
|
||||
## zoom
|
||||
|
||||
- **[扩展支持](../../guide/editor-expand#行为扩展)：** 是
|
||||
|
||||
- **参数：**
|
||||
|
||||
- `{number}` zoom 缩放倍数
|
||||
- `{number}` zoom 缩放增量（可以为负数）
|
||||
|
||||
- **返回：**
|
||||
|
||||
@ -14,24 +91,111 @@
|
||||
|
||||
- **详情：**
|
||||
|
||||
设置缩放倍数，最小为0.1
|
||||
调整缩放倍数，最小为0.1
|
||||
|
||||
传入的值会被累加到当前缩放倍数上
|
||||
|
||||
- **示例：**
|
||||
|
||||
```js
|
||||
import { uiService } from '@tmagic/editor';
|
||||
|
||||
// 放大0.1倍
|
||||
await uiService.zoom(0.1);
|
||||
|
||||
// 缩小0.1倍
|
||||
await uiService.zoom(-0.1);
|
||||
|
||||
// 当前缩放如果是1.0，执行zoom(0.5)后变为1.5
|
||||
await uiService.zoom(0.5);
|
||||
```
|
||||
|
||||
## calcZoom
|
||||
|
||||
- **[扩展支持](../../guide/editor-expand#行为扩展)：** 是
|
||||
|
||||
- **参数：** 无
|
||||
|
||||
- **返回：**
|
||||
|
||||
- `{Promise<number>}`
|
||||
- `{Promise<number>}` 计算出的缩放倍数
|
||||
|
||||
- **详情：**
|
||||
|
||||
计算出缩放以适应的倍数
|
||||
计算"缩放以适应"的倍数
|
||||
|
||||
根据画布容器的尺寸和画布尺寸自动计算出合适的缩放比例，使画布完全显示在容器内
|
||||
|
||||
- **示例：**
|
||||
|
||||
```js
|
||||
import { uiService } from '@tmagic/editor';
|
||||
|
||||
const fitZoom = await uiService.calcZoom();
|
||||
console.log('适应缩放:', fitZoom);
|
||||
|
||||
// 应用缩放以适应
|
||||
uiService.set('zoom', fitZoom);
|
||||
```
|
||||
|
||||
## resetState
|
||||
|
||||
- **参数：** 无
|
||||
|
||||
- **返回：**
|
||||
|
||||
- `{void}`
|
||||
|
||||
- **详情：**
|
||||
|
||||
重置UI服务状态到初始值
|
||||
|
||||
- **示例：**
|
||||
|
||||
```js
|
||||
import { uiService } from '@tmagic/editor';
|
||||
|
||||
uiService.resetState();
|
||||
```
|
||||
|
||||
## destroy
|
||||
|
||||
- **参数：** 无
|
||||
|
||||
- **返回：**
|
||||
|
||||
- `{void}`
|
||||
|
||||
- **详情：**
|
||||
|
||||
销毁 uiService，重置状态并移除所有事件监听和插件
|
||||
|
||||
- **示例：**
|
||||
|
||||
```js
|
||||
import { uiService } from '@tmagic/editor';
|
||||
|
||||
uiService.destroy();
|
||||
```
|
||||
|
||||
## use
|
||||
|
||||
使用中间件的方式扩展方法，上述方法中标记有`扩展支持： 是`的方法都支持使用use扩展
|
||||
|
||||
- **示例：**
|
||||
|
||||
```js
|
||||
import { uiService } from '@tmagic/editor';
|
||||
|
||||
uiService.use({
|
||||
async zoom(value, next) {
|
||||
console.log('缩放前:', uiService.get('zoom'));
|
||||
await next();
|
||||
console.log('缩放后:', uiService.get('zoom'));
|
||||
},
|
||||
});
|
||||
```
|
||||
|
||||
## usePlugin
|
||||
|
||||
- **详情：**
|
||||
@ -40,9 +204,36 @@
|
||||
|
||||
每个支持扩展的方法都支持定制before、after两个hook来干预原有方法的行为，before可以用于修改传入参数，after可以用于修改返回的值
|
||||
|
||||
- **示例：**
|
||||
|
||||
```js
|
||||
import { uiService } from '@tmagic/editor';
|
||||
|
||||
uiService.usePlugin({
|
||||
beforeZoom(value) {
|
||||
console.log('缩放增量:', value);
|
||||
return [value];
|
||||
},
|
||||
|
||||
afterCalcZoom(result) {
|
||||
console.log('计算的缩放:', result);
|
||||
// 可以修改返回值
|
||||
return result;
|
||||
},
|
||||
});
|
||||
```
|
||||
|
||||
## removeAllPlugins
|
||||
|
||||
- **详情：**
|
||||
|
||||
删掉当前设置的所有扩展
|
||||
|
||||
- **示例：**
|
||||
|
||||
```js
|
||||
import { uiService } from '@tmagic/editor';
|
||||
|
||||
uiService.removeAllPlugins();
|
||||
```
|
||||
|
||||
|
||||
@ -2,14 +2,109 @@
|
||||
|
||||
## sort-change
|
||||
|
||||
- **参数：**
|
||||
- `{ column, prop, order }` - 排序信息对象
|
||||
- `column: Object` - 排序的列配置
|
||||
- `prop: string` - 排序的列属性名
|
||||
- `order: 'ascending' | 'descending' | null` - 排序方式
|
||||
|
||||
- **说明：** 当表格的排序条件发生变化时触发
|
||||
|
||||
- **示例：**
|
||||
```js
|
||||
const handleSortChange = ({ column, prop, order }) => {
|
||||
console.log('排序变化:', prop, order);
|
||||
};
|
||||
```
|
||||
|
||||
## after-action
|
||||
|
||||
- **参数：**
|
||||
- `action: string` - 操作类型
|
||||
- `data: any` - 操作相关数据
|
||||
|
||||
- **说明：** 表格操作完成后触发
|
||||
|
||||
- **示例：**
|
||||
```js
|
||||
const handleAfterAction = (action, data) => {
|
||||
console.log('操作完成:', action, data);
|
||||
};
|
||||
```
|
||||
|
||||
## select
|
||||
|
||||
- **参数：**
|
||||
- `selection: Array<any>` - 当前选中的行数据数组
|
||||
- `row: any` - 刚刚被选中的行数据
|
||||
|
||||
- **说明：** 当用户手动勾选某一行时触发
|
||||
|
||||
- **示例：**
|
||||
```js
|
||||
const handleSelect = (selection, row) => {
|
||||
console.log('选中行:', row);
|
||||
console.log('当前选中:', selection);
|
||||
};
|
||||
```
|
||||
|
||||
## select-all
|
||||
|
||||
- **参数：**
|
||||
- `selection: Array<any>` - 当前选中的行数据数组
|
||||
|
||||
- **说明：** 当用户手动勾选全选 Checkbox 时触发
|
||||
|
||||
- **示例：**
|
||||
```js
|
||||
const handleSelectAll = (selection) => {
|
||||
console.log('全选/取消全选:', selection.length);
|
||||
};
|
||||
```
|
||||
|
||||
## selection-change
|
||||
|
||||
- **参数：**
|
||||
- `selection: Array<any>` - 当前选中的行数据数组
|
||||
|
||||
- **说明：** 当选择项发生变化时触发
|
||||
|
||||
- **示例：**
|
||||
```js
|
||||
const handleSelectionChange = (selection) => {
|
||||
console.log('选中项变化:', selection);
|
||||
};
|
||||
```
|
||||
|
||||
## expand-change
|
||||
|
||||
- **参数：**
|
||||
- `row: any` - 被展开/收起的行数据
|
||||
- `expandedRows: Array<any>` - 当前所有展开的行数据数组
|
||||
|
||||
- **说明：** 当用户展开或收起某一行时触发（用于可展开表格）
|
||||
|
||||
- **示例：**
|
||||
```js
|
||||
const handleExpandChange = (row, expandedRows) => {
|
||||
console.log('展开状态变化:', row);
|
||||
console.log('当前展开行:', expandedRows);
|
||||
};
|
||||
```
|
||||
|
||||
## cell-click
|
||||
|
||||
- **参数：**
|
||||
- `row: any` - 行数据
|
||||
- `column: Object` - 列配置
|
||||
- `cell: HTMLElement` - 单元格 DOM 元素
|
||||
- `event: Event` - 原生事件对象
|
||||
|
||||
- **说明：** 当某个单元格被点击时触发
|
||||
|
||||
- **示例：**
|
||||
```js
|
||||
const handleCellClick = (row, column, cell, event) => {
|
||||
console.log('单元格点击:', row, column.property);
|
||||
};
|
||||
```
|
||||
|
||||
@ -2,6 +2,40 @@
|
||||
|
||||
## toggleRowSelection
|
||||
|
||||
- **参数：**
|
||||
- `row: any` - 要切换选中状态的行数据
|
||||
- `selected?: boolean` - 是否选中，不传则切换当前状态
|
||||
|
||||
- **说明：** 切换某一行的选中状态
|
||||
|
||||
- **示例：**
|
||||
```js
|
||||
tableRef.value.toggleRowSelection(row, true); // 选中
|
||||
tableRef.value.toggleRowSelection(row, false); // 取消选中
|
||||
tableRef.value.toggleRowSelection(row); // 切换状态
|
||||
```
|
||||
|
||||
## toggleRowExpansion
|
||||
|
||||
- **参数：**
|
||||
- `row: any` - 要展开/收起的行数据
|
||||
- `expanded?: boolean` - 是否展开，不传则切换当前状态
|
||||
|
||||
- **说明：** 切换某一行的展开状态（用于可展开表格）
|
||||
|
||||
- **示例：**
|
||||
```js
|
||||
tableRef.value.toggleRowExpansion(row, true); // 展开
|
||||
tableRef.value.toggleRowExpansion(row, false); // 收起
|
||||
```
|
||||
|
||||
## clearSelection
|
||||
|
||||
- **参数：** 无
|
||||
|
||||
- **说明：** 清空所有选中的行
|
||||
|
||||
- **示例：**
|
||||
```js
|
||||
tableRef.value.clearSelection();
|
||||
```
|
||||
|
||||
@ -2,123 +2,122 @@
|
||||
|
||||
## data
|
||||
|
||||
- **详情：**
|
||||
|
||||
- **详情：** 表格数据，数组格式
|
||||
|
||||
- **默认值：** `[]`
|
||||
|
||||
- **默认值：**
|
||||
|
||||
|
||||
|
||||
- **类型：**
|
||||
- **类型：** `Array<any>`
|
||||
|
||||
- **示例：**
|
||||
```js
|
||||
[
|
||||
{ id: 1, name: '张三', age: 20 },
|
||||
{ id: 2, name: '李四', age: 25 }
|
||||
]
|
||||
```
|
||||
|
||||
## columns
|
||||
|
||||
- **详情：**
|
||||
|
||||
- **详情：** 表格列配置
|
||||
|
||||
- **默认值：** `[]`
|
||||
|
||||
- **默认值：**
|
||||
|
||||
|
||||
|
||||
- **类型：**
|
||||
- **类型：** `Array<ColumnConfig>`
|
||||
|
||||
- **示例：**
|
||||
```js
|
||||
[
|
||||
{ prop: 'name', label: '姓名', width: 120 },
|
||||
{ prop: 'age', label: '年龄', width: 80 }
|
||||
]
|
||||
```
|
||||
|
||||
## spanMethod
|
||||
|
||||
- **详情：** 合并行或列的计算方法
|
||||
|
||||
- **默认值：** `undefined`
|
||||
|
||||
- **类型：** `Function`
|
||||
|
||||
- **参数：**
|
||||
- `{ row, column, rowIndex, columnIndex }`
|
||||
|
||||
- **返回值：** `[rowspan, colspan]` 或 `{ rowspan, colspan }`
|
||||
|
||||
- **默认值：**
|
||||
|
||||
|
||||
|
||||
- **类型：**
|
||||
- **示例：**
|
||||
```js
|
||||
({ rowIndex, columnIndex }) => {
|
||||
if (rowIndex % 2 === 0) {
|
||||
if (columnIndex === 0) {
|
||||
return [1, 2];
|
||||
} else if (columnIndex === 1) {
|
||||
return [0, 0];
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
## loading
|
||||
|
||||
- **详情：**
|
||||
|
||||
- **详情：** 是否显示加载状态
|
||||
|
||||
- **默认值：** `false`
|
||||
|
||||
- **默认值：**
|
||||
|
||||
|
||||
|
||||
- **类型：**
|
||||
|
||||
- **类型：** `boolean`
|
||||
|
||||
## showHeader
|
||||
|
||||
- **详情：** 是否显示表头
|
||||
|
||||
- **默认值：** `true`
|
||||
|
||||
- **默认值：**
|
||||
|
||||
|
||||
|
||||
- **类型：**
|
||||
- **类型：** `boolean`
|
||||
|
||||
## bodyHeight
|
||||
|
||||
- **详情：** Table的最大高度。合法的值为数字或者单位为 px 的高度
|
||||
- **详情：** Table 的最大高度。合法的值为数字或者单位为 px 的高度
|
||||
|
||||
- **默认值：**
|
||||
- **默认值：** `undefined`
|
||||
|
||||
- **类型：** `string | number`
|
||||
|
||||
|
||||
- **类型：**
|
||||
- **示例：**
|
||||
```js
|
||||
bodyHeight: 400
|
||||
bodyHeight: '400px'
|
||||
```
|
||||
|
||||
## emptyText
|
||||
|
||||
- **详情：** 空数据时显示的文本内容
|
||||
|
||||
- **默认值：**
|
||||
|
||||
|
||||
|
||||
- **类型：**
|
||||
|
||||
|
||||
- **默认值：** `'暂无数据'`
|
||||
|
||||
- **类型：** `string`
|
||||
|
||||
## defaultExpandAll
|
||||
|
||||
- **详情：** 是否默认展开所有行，当Table包含展开行存在或者为树形表格时有效
|
||||
- **详情：** 是否默认展开所有行，当 Table 包含展开行存在或者为树形表格时有效
|
||||
|
||||
- **默认值：**
|
||||
|
||||
|
||||
- **类型：**
|
||||
|
||||
|
||||
- **默认值：** `false`
|
||||
|
||||
- **类型：** `boolean`
|
||||
|
||||
## rowkeyName
|
||||
|
||||
- **详情：**
|
||||
|
||||
- **详情：** 行数据的 Key，用来优化 Table 的渲染
|
||||
|
||||
- **默认值：** `'id'`
|
||||
|
||||
- **默认值：**
|
||||
|
||||
|
||||
|
||||
- **类型：**
|
||||
- **类型：** `string`
|
||||
|
||||
- **说明：** 在使用 reserve-selection 功能与显示树形数据时，该属性是必填的
|
||||
|
||||
## border
|
||||
|
||||
- **详情：**
|
||||
|
||||
- **详情：** 是否显示边框
|
||||
|
||||
- **默认值：** `false`
|
||||
|
||||
- **默认值：**
|
||||
|
||||
|
||||
|
||||
- **类型：**
|
||||
|
||||
- **类型：** `boolean`
|
||||
|
||||
@ -62,6 +62,59 @@ MenuButton 的[定义](https://github.com/Tencent/tmagic-editor/blob/239b5d3efea
|
||||
|
||||
### 二、左侧菜单栏
|
||||
|
||||
左侧菜单栏主要展示组件列表、组件树、代码块、数据源等内容。可以通过 `m-editor` 组件的 [sidebar](/api/editor/props.html#sidebar) `prop` 来进行配置。
|
||||
|
||||
#### 1. 自定义左侧面板
|
||||
|
||||
可以使用 `sidebar` slot 来完全自定义左侧面板：
|
||||
|
||||
```html
|
||||
<m-editor>
|
||||
<template #sidebar>
|
||||
<your-sidebar></your-sidebar>
|
||||
</template>
|
||||
</m-editor>
|
||||
```
|
||||
|
||||
#### 2. 扩展组件列表
|
||||
|
||||
通过 [componentGroupList](/api/editor/props.html#componentgrouplist) prop 配置组件分组和列表：
|
||||
|
||||
```js
|
||||
const componentGroupList = [
|
||||
{
|
||||
title: '基础组件',
|
||||
items: [
|
||||
{
|
||||
text: '文本',
|
||||
type: 'text',
|
||||
icon: 'text-icon'
|
||||
},
|
||||
{
|
||||
text: '按钮',
|
||||
type: 'button',
|
||||
icon: 'button-icon'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: '业务组件',
|
||||
items: [
|
||||
// 自定义业务组件
|
||||
]
|
||||
}
|
||||
]
|
||||
```
|
||||
|
||||
#### 3. 组件树扩展
|
||||
|
||||
组件树会自动根据页面配置生成，可以通过 `editorService` 监听组件树相关事件：
|
||||
|
||||
```js
|
||||
editorService.on('select', (node) => {
|
||||
console.log('选中组件:', node);
|
||||
});
|
||||
```
|
||||
|
||||
### 三、右侧属性配置栏
|
||||
|
||||
@ -118,6 +171,50 @@ propsService.usePlugin({
|
||||
</m-editor>
|
||||
```
|
||||
|
||||
### 四、中间工作区域
|
||||
|
||||
## 行为扩展
|
||||
|
||||
### 二、服务扩展
|
||||
|
||||
可以通过监听事件和使用插件来扩展 EditorService：
|
||||
|
||||
```js
|
||||
// 监听编辑器事件
|
||||
editorService.on('add', (node) => {
|
||||
console.log('添加组件:', node);
|
||||
});
|
||||
|
||||
// 使用插件扩展
|
||||
editorService.usePlugin({
|
||||
beforeAdd(node) {
|
||||
// 在添加组件前执行
|
||||
return node;
|
||||
},
|
||||
afterAdd(node) {
|
||||
// 在添加组件后执行
|
||||
return node;
|
||||
}
|
||||
});
|
||||
```
|
||||
|
||||
#### 2. PropsService 扩展
|
||||
|
||||
自定义属性配置的处理逻辑：
|
||||
|
||||
```js
|
||||
propsService.usePlugin({
|
||||
// 修改属性配置
|
||||
beforeGetPropsConfig(type) {
|
||||
console.log('获取配置前:', type);
|
||||
},
|
||||
|
||||
afterGetPropsConfig(config, type) {
|
||||
// 添加自定义配置
|
||||
return config;
|
||||
},
|
||||
|
||||
// 自定义配置填充逻辑
|
||||
afterFillConfig(config, type) {
|
||||
return config;
|
||||
}
|
||||
});
|
||||
```
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
{
|
||||
"version": "1.7.0",
|
||||
"version": "1.7.2",
|
||||
"name": "tmagic",
|
||||
"private": true,
|
||||
"type": "module",
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
{
|
||||
"version": "1.7.0",
|
||||
"version": "1.7.2",
|
||||
"name": "@tmagic/cli",
|
||||
"main": "lib/index.js",
|
||||
"types": "lib/index.d.ts",
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
{
|
||||
"version": "1.7.0",
|
||||
"version": "1.7.2",
|
||||
"name": "@tmagic/core",
|
||||
"type": "module",
|
||||
"main": "dist/tmagic-core.umd.cjs",
|
||||
|
||||
@ -279,13 +279,13 @@ export default class EventHelper extends EventEmitter {
|
||||
}
|
||||
|
||||
const toNodes = [];
|
||||
const toNode = this.app.getNode(to);
|
||||
const toNode = this.app.getNode(to, { strict: true });
|
||||
if (toNode) {
|
||||
toNodes.push(toNode);
|
||||
}
|
||||
|
||||
for (const [, page] of this.app.pageFragments) {
|
||||
const node = page.getNode(to);
|
||||
const node = page.getNode(to, { strict: true });
|
||||
if (node) {
|
||||
toNodes.push(node);
|
||||
}
|
||||
|
||||
@ -191,7 +191,7 @@ class Node extends EventEmitter {
|
||||
if (this.app.eventHelper) {
|
||||
for (const eventConfig of this.app.eventHelper.getEventQueue()) {
|
||||
for (const [, page] of this.app.pageFragments) {
|
||||
const node = page.getNode(eventConfig.toId);
|
||||
const node = page.getNode(eventConfig.toId, { strict: true });
|
||||
if (node && node === this) {
|
||||
if (typeof instance[eventConfig.method] === 'function') {
|
||||
await instance[eventConfig.method](eventConfig.fromCpt, ...eventConfig.args);
|
||||
|
||||
@ -84,14 +84,16 @@ class Page extends Node {
|
||||
|
||||
public getNode<T extends TMagicNode = TMagicNode>(
|
||||
id: Id,
|
||||
{ iteratorContainerId, iteratorIndex, pageFragmentContainerId }: GetNodeOptions = {},
|
||||
{ iteratorContainerId, iteratorIndex, pageFragmentContainerId, strict }: GetNodeOptions = {},
|
||||
): T | undefined {
|
||||
if (this.nodes.has(id)) {
|
||||
return this.nodes.get(id) as T;
|
||||
}
|
||||
|
||||
if (pageFragmentContainerId) {
|
||||
return this.app.pageFragments.get(pageFragmentContainerId)?.getNode(id, { iteratorContainerId, iteratorIndex });
|
||||
return this.app.pageFragments
|
||||
.get(pageFragmentContainerId)
|
||||
?.getNode(id, { iteratorContainerId, iteratorIndex, strict: true });
|
||||
}
|
||||
|
||||
if (Array.isArray(iteratorContainerId) && iteratorContainerId.length && Array.isArray(iteratorIndex)) {
|
||||
@ -107,7 +109,7 @@ class Page extends Node {
|
||||
return iteratorContainer?.getNode(id, iteratorIndex[iteratorIndex.length - 1]) as T;
|
||||
}
|
||||
|
||||
if (this.app.pageFragments.size) {
|
||||
if (!strict && this.app.pageFragments.size) {
|
||||
for (const [, pageFragment] of this.app.pageFragments) {
|
||||
if (pageFragment.nodes.has(id)) {
|
||||
return pageFragment.nodes.get(id) as T;
|
||||
|
||||
@ -48,4 +48,6 @@ export interface GetNodeOptions {
|
||||
iteratorContainerId?: Id[];
|
||||
iteratorIndex?: number[];
|
||||
pageFragmentContainerId?: Id;
|
||||
/** 严格模式，如果为true，页面片中的节点必须指定pageFragmentContainerId，为false时，没有pageFragmentContainerId的时候获得第一个页面片容器中的节点 */
|
||||
strict?: boolean;
|
||||
}
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
{
|
||||
"version": "1.7.0",
|
||||
"version": "1.7.2",
|
||||
"name": "@tmagic/data-source",
|
||||
"type": "module",
|
||||
"main": "dist/tmagic-data-source.umd.cjs",
|
||||
|
||||
@ -78,13 +78,13 @@ export const createDataSourceManager = (app: TMagicApp, useMock?: boolean, initi
|
||||
replaceChildNode(newNode, [app.page.data]);
|
||||
}
|
||||
|
||||
app.getNode(node.id)?.setData(newNode);
|
||||
app.getNode(node.id, { strict: true })?.setData(newNode);
|
||||
|
||||
for (const [, pageFragment] of app.pageFragments) {
|
||||
if (pageFragment.data.id === newNode.id) {
|
||||
pageFragment.setData(newNode);
|
||||
} else if (pageFragment.data.id === page.id) {
|
||||
pageFragment.getNode(newNode.id)?.setData(newNode);
|
||||
pageFragment.getNode(newNode.id, { strict: true })?.setData(newNode);
|
||||
if (!pageFragment.instance) {
|
||||
replaceChildNode(newNode, [pageFragment.data]);
|
||||
}
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
{
|
||||
"version": "1.7.0",
|
||||
"version": "1.7.2",
|
||||
"name": "@tmagic/dep",
|
||||
"type": "module",
|
||||
"main": "dist/tmagic-dep.umd.cjs",
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
{
|
||||
"version": "1.7.0",
|
||||
"version": "1.7.2",
|
||||
"name": "@tmagic/design",
|
||||
"type": "module",
|
||||
"sideEffects": [
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
{
|
||||
"version": "1.7.0",
|
||||
"version": "1.7.2",
|
||||
"name": "@tmagic/editor",
|
||||
"type": "module",
|
||||
"sideEffects": [
|
||||
|
||||
@ -40,7 +40,7 @@
|
||||
top: 0;
|
||||
width: 100%;
|
||||
background: #fff;
|
||||
z-index: 2;
|
||||
z-index: 3;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
{
|
||||
"version": "1.7.0",
|
||||
"version": "1.7.2",
|
||||
"name": "@tmagic/element-plus-adapter",
|
||||
"type": "module",
|
||||
"main": "dist/tmagic-element-plus-adapter.umd.cjs",
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
{
|
||||
"version": "1.7.0",
|
||||
"version": "1.7.2",
|
||||
"name": "@tmagic/form-schema",
|
||||
"type": "module",
|
||||
"main": "dist/tmagic-form-schema.umd.cjs",
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
{
|
||||
"version": "1.7.0",
|
||||
"version": "1.7.2",
|
||||
"name": "@tmagic/form",
|
||||
"type": "module",
|
||||
"sideEffects": [
|
||||
|
||||
@ -58,7 +58,13 @@
|
||||
: lastValues
|
||||
"
|
||||
:is-compare="isCompare"
|
||||
:prop="config.dynamic ? `${prop}${prop ? '.' : ''}${String(tabIndex)}` : prop"
|
||||
:prop="
|
||||
config.dynamic
|
||||
? `${prop}${prop ? '.' : ''}${String(tabIndex)}`
|
||||
: tab.name
|
||||
? `${prop}${prop ? '.' : ''}${tab.name}`
|
||||
: prop
|
||||
"
|
||||
:size="size"
|
||||
:label-width="tab.labelWidth || labelWidth"
|
||||
:expand-more="expandMore"
|
||||
@ -88,6 +94,26 @@ type DiffCount = {
|
||||
[tabIndex: number]: number;
|
||||
};
|
||||
|
||||
const props = withDefaults(
|
||||
defineProps<{
|
||||
model: any;
|
||||
lastValues?: any;
|
||||
isCompare?: boolean;
|
||||
config: TabConfig;
|
||||
name: string;
|
||||
size?: string;
|
||||
labelWidth?: string;
|
||||
prop?: string;
|
||||
expandMore?: boolean;
|
||||
disabled?: boolean;
|
||||
}>(),
|
||||
{
|
||||
lastValues: () => ({}),
|
||||
isCompare: false,
|
||||
prop: '',
|
||||
},
|
||||
);
|
||||
|
||||
const tabPaneComponent = getDesignConfig('components')?.tabPane;
|
||||
const tabsComponent = getDesignConfig('components')?.tabs;
|
||||
|
||||
@ -118,25 +144,6 @@ const tabClick = (mForm: FormState | undefined, tab: any, props: any) => {
|
||||
}
|
||||
};
|
||||
|
||||
const props = withDefaults(
|
||||
defineProps<{
|
||||
model: any;
|
||||
lastValues?: any;
|
||||
isCompare?: boolean;
|
||||
config: TabConfig;
|
||||
name: string;
|
||||
size?: string;
|
||||
labelWidth?: string;
|
||||
prop?: string;
|
||||
expandMore?: boolean;
|
||||
disabled?: boolean;
|
||||
}>(),
|
||||
{
|
||||
lastValues: () => ({}),
|
||||
isCompare: false,
|
||||
},
|
||||
);
|
||||
|
||||
const emit = defineEmits<{
|
||||
change: [v: any, eventData?: ContainerChangeEventData];
|
||||
addDiffCount: [];
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
{
|
||||
"version": "1.7.0",
|
||||
"version": "1.7.2",
|
||||
"name": "@tmagic/schema",
|
||||
"type": "module",
|
||||
"main": "dist/tmagic-schema.umd.cjs",
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
{
|
||||
"version": "1.7.0",
|
||||
"version": "1.7.2",
|
||||
"name": "@tmagic/stage",
|
||||
"type": "module",
|
||||
"main": "dist/tmagic-stage.umd.cjs",
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
{
|
||||
"version": "1.7.0",
|
||||
"version": "1.7.2",
|
||||
"name": "@tmagic/table",
|
||||
"type": "module",
|
||||
"sideEffects": [
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
{
|
||||
"version": "1.7.0",
|
||||
"version": "1.7.2",
|
||||
"name": "@tmagic/tdesign-vue-next-adapter",
|
||||
"type": "module",
|
||||
"main": "dist/tmagic-tdesign-vue-next-adapter.umd.cjs",
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
{
|
||||
"version": "1.7.0",
|
||||
"version": "1.7.2",
|
||||
"name": "@tmagic/utils",
|
||||
"type": "module",
|
||||
"main": "dist/tmagic-utils.umd.cjs",
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "tmagic-playground",
|
||||
"version": "1.7.0",
|
||||
"version": "1.7.2",
|
||||
"type": "module",
|
||||
"private": true,
|
||||
"scripts": {
|
||||
@ -12,11 +12,11 @@
|
||||
},
|
||||
"dependencies": {
|
||||
"@element-plus/icons-vue": "^2.3.2",
|
||||
"@tmagic/core": "1.7.0",
|
||||
"@tmagic/design": "1.7.0",
|
||||
"@tmagic/editor": "1.7.0",
|
||||
"@tmagic/element-plus-adapter": "1.7.0",
|
||||
"@tmagic/tdesign-vue-next-adapter": "1.7.0",
|
||||
"@tmagic/core": "1.7.2",
|
||||
"@tmagic/design": "1.7.2",
|
||||
"@tmagic/editor": "1.7.2",
|
||||
"@tmagic/element-plus-adapter": "1.7.2",
|
||||
"@tmagic/tdesign-vue-next-adapter": "1.7.2",
|
||||
"@tmagic/tmagic-form-runtime": "1.1.3",
|
||||
"element-plus": "^2.11.8",
|
||||
"lodash-es": "^4.17.21",
|
||||
|
||||
570
pnpm-lock.yaml
generated
570
pnpm-lock.yaml
generated
File diff suppressed because it is too large
Load Diff
@ -1,5 +1,5 @@
|
||||
{
|
||||
"version": "0.2.1",
|
||||
"version": "0.2.2",
|
||||
"name": "@tmagic/react-runtime-help",
|
||||
"type": "module",
|
||||
"sideEffects": false,
|
||||
@ -31,8 +31,8 @@
|
||||
},
|
||||
"peerDependencies": {
|
||||
"lodash-es": "^4.17.21",
|
||||
"@tmagic/core": ">=1.6.0-beta.0",
|
||||
"@tmagic/stage": ">=1.6.0-beta.0",
|
||||
"@tmagic/core": ">=1.7.0",
|
||||
"@tmagic/stage": ">=1.7.0",
|
||||
"react": ">=18.3.1",
|
||||
"typescript": "catalog:"
|
||||
},
|
||||
|
||||
@ -47,6 +47,7 @@ export const useNode = <T extends TMagicNode = TMagicNode>(
|
||||
iteratorContainerId: props.iteratorContainerId,
|
||||
iteratorIndex: props.iteratorIndex,
|
||||
pageFragmentContainerId: props.pageFragmentContainerId,
|
||||
strict: true,
|
||||
});
|
||||
}
|
||||
return void 0;
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "runtime-react",
|
||||
"version": "1.7.0",
|
||||
"version": "1.7.2",
|
||||
"type": "module",
|
||||
"private": true,
|
||||
"engines": {
|
||||
@ -16,16 +16,16 @@
|
||||
"build:playground": "node scripts/build.mjs --type=playground"
|
||||
},
|
||||
"dependencies": {
|
||||
"@tmagic/core": "1.7.0",
|
||||
"@tmagic/react-runtime-help": "0.2.1",
|
||||
"@tmagic/stage": "1.7.0",
|
||||
"@tmagic/core": "1.7.2",
|
||||
"@tmagic/react-runtime-help": "0.2.2",
|
||||
"@tmagic/stage": "1.7.2",
|
||||
"axios": "^1.13.2",
|
||||
"qrcode": "^1.5.0",
|
||||
"react": "^18.3.1",
|
||||
"react-dom": "^18.3.1"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@tmagic/cli": "1.7.0",
|
||||
"@tmagic/cli": "1.7.2",
|
||||
"@types/fs-extra": "^11.0.4",
|
||||
"@types/react": "^18.3.3",
|
||||
"@types/react-dom": "^18.3.0",
|
||||
|
||||
@ -1,15 +1,15 @@
|
||||
{
|
||||
"version": "1.1.3",
|
||||
"version": "1.1.6",
|
||||
"name": "@tmagic/tmagic-form-runtime",
|
||||
"type": "module",
|
||||
"main": "dist/tmagic-form-runtime.umd.cjs",
|
||||
"module": "dist/tmagic-form-runtime.js",
|
||||
"main": "dist/tmagic-tmagic-form.umd.cjs",
|
||||
"module": "dist/tmagic-tmagic-form.js",
|
||||
"types": "types/index.d.ts",
|
||||
"exports": {
|
||||
".": {
|
||||
"types": "./types/index.d.ts",
|
||||
"import": "./dist/tmagic-form-runtime.js",
|
||||
"require": "./dist/tmagic-form.umd-runtime.cjs"
|
||||
"import": "./dist/tmagic-tmagic-form.js",
|
||||
"require": "./dist/tmagic-tmagic-form.umd.cjs"
|
||||
},
|
||||
"./*": "./*"
|
||||
},
|
||||
@ -26,8 +26,8 @@
|
||||
"url": "https://github.com/Tencent/tmagic-editor.git"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"@tmagic/core": ">=1.5.0",
|
||||
"@tmagic/editor": ">=1.5.0",
|
||||
"@tmagic/core": ">=1.7.0",
|
||||
"@tmagic/editor": ">=1.7.0",
|
||||
"element-plus": ">=2.8.0",
|
||||
"vue": "catalog:",
|
||||
"typescript": "catalog:"
|
||||
|
||||
@ -12,7 +12,7 @@ import { useFormConfig } from './useFormConfig';
|
||||
|
||||
const props = defineProps<AppProps>();
|
||||
|
||||
const { mForm, formConfig, config, values } = useFormConfig(props);
|
||||
const { formConfig, config, values } = useFormConfig(props);
|
||||
|
||||
watch(formConfig, async () => {
|
||||
setTimeout(() => {
|
||||
|
||||
@ -73,8 +73,15 @@ export const useFormConfig = (props: AppProps) => {
|
||||
return nextTick().then(() => getElById()(document, `${id}`) as HTMLElement);
|
||||
},
|
||||
|
||||
add({ config, parentId }: UpdateData) {
|
||||
if (!root.value) throw new Error('error');
|
||||
add({ config, parentId, root: appConfig }: UpdateData) {
|
||||
if (!root.value) {
|
||||
if (appConfig) {
|
||||
root.value = appConfig;
|
||||
resetValues();
|
||||
return;
|
||||
}
|
||||
throw new Error('error');
|
||||
}
|
||||
if (!selectedId.value) throw new Error('error');
|
||||
if (!parentId) throw new Error('error');
|
||||
|
||||
@ -82,7 +89,7 @@ export const useFormConfig = (props: AppProps) => {
|
||||
if (!parent) throw new Error('未找到父节点');
|
||||
|
||||
if (config.type !== 'page') {
|
||||
const parentNode = app?.page?.getNode(parent.id);
|
||||
const parentNode = app?.page?.getNode(parent.id, { strict: true });
|
||||
parentNode && app?.page?.initNode(config, parentNode);
|
||||
}
|
||||
|
||||
@ -97,13 +104,22 @@ export const useFormConfig = (props: AppProps) => {
|
||||
resetValues();
|
||||
},
|
||||
|
||||
update({ config, parentId }: UpdateData) {
|
||||
if (!root.value || !app) throw new Error('error');
|
||||
update({ config, parentId, root: appConfig }: UpdateData) {
|
||||
if (!root.value) {
|
||||
if (appConfig) {
|
||||
root.value = appConfig;
|
||||
resetValues();
|
||||
return;
|
||||
}
|
||||
throw new Error('error');
|
||||
}
|
||||
|
||||
if (!app) throw new Error('error');
|
||||
|
||||
const newNode = app.dataSourceManager?.compiledNode(config) || config;
|
||||
replaceChildNode(reactive(newNode), [root.value], parentId);
|
||||
|
||||
const nodeInstance = app.page?.getNode(config.id);
|
||||
const nodeInstance = app.page?.getNode(config.id, { strict: true });
|
||||
if (nodeInstance) {
|
||||
nodeInstance.setData(config);
|
||||
}
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
{
|
||||
"version": "1.2.3",
|
||||
"version": "2.0.0",
|
||||
"name": "@tmagic/vue-runtime-help",
|
||||
"type": "module",
|
||||
"sideEffects": false,
|
||||
@ -26,20 +26,13 @@
|
||||
"type": "git",
|
||||
"url": "https://github.com/Tencent/tmagic-editor.git"
|
||||
},
|
||||
"dependencies": {
|
||||
"vue-demi": "^0.14.10"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"@tmagic/core": ">=1.6.0-beta.0",
|
||||
"@tmagic/stage": ">=1.6.0-beta.0",
|
||||
"@vue/composition-api": ">=1.7.2",
|
||||
"@tmagic/core": ">=1.7.0",
|
||||
"@tmagic/stage": ">=1.7.0",
|
||||
"typescript": "catalog:",
|
||||
"vue": ">=2.6.0 || >=3.5.0"
|
||||
"vue": ">=3.5.0"
|
||||
},
|
||||
"peerDependenciesMeta": {
|
||||
"@vue/composition-api": {
|
||||
"optional": true
|
||||
},
|
||||
"@tmagic/core": {
|
||||
"optional": true
|
||||
},
|
||||
|
||||
@ -16,7 +16,7 @@
|
||||
* limitations under the License.
|
||||
*/
|
||||
|
||||
import { inject, onBeforeUnmount, onMounted } from 'vue-demi';
|
||||
import { inject, onBeforeUnmount, onMounted } from 'vue';
|
||||
|
||||
import type TMagicApp from '@tmagic/core';
|
||||
import type { Id, MNodeInstance, Node as TMagicNode } from '@tmagic/core';
|
||||
@ -43,6 +43,7 @@ export const useNode = <T extends TMagicNode = TMagicNode>(
|
||||
iteratorContainerId: props.iteratorContainerId,
|
||||
iteratorIndex: props.iteratorIndex,
|
||||
pageFragmentContainerId: props.pageFragmentContainerId,
|
||||
strict: true,
|
||||
});
|
||||
}
|
||||
return void 0;
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
import { computed, inject, onScopeDispose, ref, shallowReactive, watchEffect } from 'vue-demi';
|
||||
import { computed, inject, onScopeDispose, ref, shallowReactive, watchEffect } from 'vue';
|
||||
|
||||
import type TMagicCore from '@tmagic/core';
|
||||
import { type MComponent, type StyleSchema, toLine } from '@tmagic/core';
|
||||
|
||||
@ -16,7 +16,7 @@
|
||||
* limitations under the License.
|
||||
*/
|
||||
|
||||
import { ConcreteComponent, inject } from 'vue-demi';
|
||||
import { ConcreteComponent, inject } from 'vue';
|
||||
|
||||
import type TMagicApp from '@tmagic/core';
|
||||
import { toLine } from '@tmagic/core';
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
import { inject, nextTick, onBeforeUnmount, reactive, ref } from 'vue-demi';
|
||||
import { inject, nextTick, onBeforeUnmount, reactive, ref } from 'vue';
|
||||
|
||||
import type TMagicApp from '@tmagic/core';
|
||||
import type { ChangeEvent, Id, MNode } from '@tmagic/core';
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
import { computed, inject, nextTick, reactive, ref, watch } from 'vue-demi';
|
||||
import { computed, inject, nextTick, reactive, ref, watch } from 'vue';
|
||||
|
||||
import type TMagicApp from '@tmagic/core';
|
||||
import type { Id, MApp, MNode } from '@tmagic/core';
|
||||
@ -74,7 +74,7 @@ export const useEditorDsl = (app = inject<TMagicApp>('app'), win = window) => {
|
||||
if (!parent) throw new Error('未找到父节点');
|
||||
|
||||
if (config.type !== 'page') {
|
||||
const parentNode = app?.page?.getNode(parent.id);
|
||||
const parentNode = app?.page?.getNode(parent.id, { strict: true });
|
||||
parentNode && app?.page?.initNode(config, parentNode);
|
||||
}
|
||||
|
||||
@ -99,7 +99,7 @@ export const useEditorDsl = (app = inject<TMagicApp>('app'), win = window) => {
|
||||
|
||||
replaceChildNode(reactive(newNode), [root.value], parentId);
|
||||
|
||||
const nodeInstance = app.getNode(config.id);
|
||||
const nodeInstance = app.getNode(config.id, { strict: true });
|
||||
if (nodeInstance) {
|
||||
nodeInstance.setData(newNode);
|
||||
}
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
import { h } from 'vue-demi';
|
||||
import { h } from 'vue';
|
||||
|
||||
import type { Id, MComponent, StyleSchema } from '@tmagic/core';
|
||||
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
import { describe, expect, test } from 'vitest';
|
||||
import { defineComponent, isVue3, provide } from 'vue-demi';
|
||||
import { defineComponent, provide } from 'vue';
|
||||
import { mount } from '@vue/test-utils';
|
||||
|
||||
import Core from '@tmagic/core';
|
||||
@ -34,7 +34,7 @@ describe('useComponent', () => {
|
||||
});
|
||||
|
||||
// node_modules中的vue版本不是3.0.0，所以跳过
|
||||
test.runIf(isVue3).skip('auto inject and empty para', () => {
|
||||
test('auto inject and empty para', () => {
|
||||
const child = defineComponent({
|
||||
setup() {
|
||||
const component = useComponent();
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "runtime-vue",
|
||||
"version": "1.7.0",
|
||||
"version": "1.7.2",
|
||||
"type": "module",
|
||||
"private": true,
|
||||
"engines": {
|
||||
@ -16,14 +16,14 @@
|
||||
"build:playground": "node scripts/build.mjs --type=playground"
|
||||
},
|
||||
"dependencies": {
|
||||
"@tmagic/core": "1.7.0",
|
||||
"@tmagic/stage": "1.7.0",
|
||||
"@tmagic/vue-runtime-help": "^1.2.3",
|
||||
"@tmagic/core": "1.7.2",
|
||||
"@tmagic/stage": "1.7.2",
|
||||
"@tmagic/vue-runtime-help": "^2.0.0",
|
||||
"axios": "^1.13.2",
|
||||
"vue": "catalog:"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@tmagic/cli": "1.7.0",
|
||||
"@tmagic/cli": "1.7.2",
|
||||
"@types/fs-extra": "^11.0.4",
|
||||
"@types/node": "^24.0.10",
|
||||
"@vitejs/plugin-legacy": "^7.2.1",
|
||||
|
||||
@ -55,10 +55,6 @@ export default defineConfig({
|
||||
|
||||
publicDir: 'public',
|
||||
|
||||
optimizeDeps: {
|
||||
exclude: ['vue-demi'],
|
||||
},
|
||||
|
||||
server: {
|
||||
host: '0.0.0.0',
|
||||
port: 8078,
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
{
|
||||
"version": "0.2.0",
|
||||
"version": "1.0.0",
|
||||
"name": "@tmagic/vue-button",
|
||||
"type": "module",
|
||||
"main": "src/index.ts",
|
||||
@ -14,21 +14,15 @@
|
||||
"url": "https://github.com/Tencent/tmagic-editor.git"
|
||||
},
|
||||
"dependencies": {
|
||||
"@tmagic/form-schema": "workspace:^",
|
||||
"vue-demi": "^0.14.10"
|
||||
"@tmagic/form-schema": "workspace:^"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"@tmagic/core": "workspace:^",
|
||||
"@tmagic/vue-runtime-help": "workspace:^",
|
||||
"@vue/composition-api": ">=1.7.2",
|
||||
"typescript": "catalog:",
|
||||
"vue": ">=2.6.0 || >=3.5.0"
|
||||
"vue": ">=3.5.0"
|
||||
},
|
||||
"peerDependenciesMeta": {
|
||||
"@vue/composition-api": {
|
||||
"optional": true
|
||||
},
|
||||
|
||||
"typescript": {
|
||||
"optional": true
|
||||
}
|
||||
|
||||
@ -6,11 +6,9 @@
|
||||
</button>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { defineComponent, type PropType } from 'vue-demi';
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { COMMON_EVENT_PREFIX, type Id, type MComponent } from '@tmagic/core';
|
||||
import { useApp } from '@tmagic/vue-runtime-help';
|
||||
import { type ComponentProps, useApp } from '@tmagic/vue-runtime-help';
|
||||
|
||||
interface ButtonSchema extends Omit<MComponent, 'id'> {
|
||||
id?: Id;
|
||||
@ -18,36 +16,16 @@ interface ButtonSchema extends Omit<MComponent, 'id'> {
|
||||
text: string;
|
||||
}
|
||||
|
||||
export default defineComponent({
|
||||
defineOptions({
|
||||
name: 'tmagic-button',
|
||||
|
||||
props: {
|
||||
config: {
|
||||
type: Object as PropType<ButtonSchema>,
|
||||
required: true,
|
||||
},
|
||||
iteratorIndex: Array as PropType<number[]>,
|
||||
iteratorContainerId: Array as PropType<Id[]>,
|
||||
containerIndex: Number,
|
||||
pageFragmentContainerId: [String, Number] as PropType<Id>,
|
||||
model: {
|
||||
type: Object,
|
||||
default: () => ({}),
|
||||
},
|
||||
},
|
||||
|
||||
setup(props) {
|
||||
const { app, node } = useApp(props);
|
||||
|
||||
const clickHandler = () => {
|
||||
if (app && node) {
|
||||
app.emit(`${COMMON_EVENT_PREFIX}click`, node);
|
||||
}
|
||||
};
|
||||
|
||||
return {
|
||||
clickHandler,
|
||||
};
|
||||
},
|
||||
});
|
||||
|
||||
const props = defineProps<ComponentProps<ButtonSchema>>();
|
||||
|
||||
const { app, node } = useApp(props);
|
||||
const clickHandler = () => {
|
||||
if (app && node) {
|
||||
app.emit(`${COMMON_EVENT_PREFIX}click`, node);
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
{
|
||||
"version": "1.2.1",
|
||||
"version": "2.0.0",
|
||||
"name": "@tmagic/vue-container",
|
||||
"type": "module",
|
||||
"main": "src/index.ts",
|
||||
@ -14,22 +14,17 @@
|
||||
"url": "https://github.com/Tencent/tmagic-editor.git"
|
||||
},
|
||||
"dependencies": {
|
||||
"@tmagic/form-schema": "workspace:^",
|
||||
"vue-demi": "^0.14.10"
|
||||
"@tmagic/form-schema": "workspace:^"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"@tmagic/core": "workspace:^",
|
||||
"@tmagic/vue-runtime-help": "workspace:^",
|
||||
"@vue/composition-api": ">=1.7.2",
|
||||
"typescript": "catalog:",
|
||||
"vue": ">=2.6.0 || >=3.5.0"
|
||||
"vue": ">=3.5.0"
|
||||
},
|
||||
"peerDependenciesMeta": {
|
||||
"typescript": {
|
||||
"optional": true
|
||||
},
|
||||
"@vue/composition-api": {
|
||||
"optional": true
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
import { defineComponent, h, inject, type PropType, provide } from 'vue-demi';
|
||||
import { defineComponent, h, inject, type PropType, provide } from 'vue';
|
||||
|
||||
import type TMagicApp from '@tmagic/core';
|
||||
import { Id, IS_DSL_NODE_KEY, MComponent, NODE_CONDS_RESULT_KEY } from '@tmagic/core';
|
||||
|
||||
@ -14,12 +14,12 @@
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { defineComponent, inject, type PropType } from 'vue-demi';
|
||||
<script lang="ts" setup>
|
||||
import { inject } from 'vue';
|
||||
|
||||
import type TMagicApp from '@tmagic/core';
|
||||
import { COMMON_EVENT_PREFIX, type Id, type MContainer } from '@tmagic/core';
|
||||
import { registerNodeHooks, useNode } from '@tmagic/vue-runtime-help';
|
||||
import { type ComponentProps, registerNodeHooks, useNode } from '@tmagic/vue-runtime-help';
|
||||
|
||||
import ItemComponent from './Component';
|
||||
|
||||
@ -28,46 +28,19 @@ interface ContainerSchema extends Omit<MContainer, 'id'> {
|
||||
type?: 'container';
|
||||
}
|
||||
|
||||
export default defineComponent({
|
||||
defineOptions({
|
||||
name: 'tmagic-container',
|
||||
|
||||
props: {
|
||||
config: {
|
||||
type: Object as PropType<ContainerSchema>,
|
||||
required: true,
|
||||
},
|
||||
iteratorIndex: {
|
||||
type: Array as PropType<number[]>,
|
||||
default: () => [],
|
||||
},
|
||||
iteratorContainerId: {
|
||||
type: Array as PropType<Id[]>,
|
||||
default: () => [],
|
||||
},
|
||||
containerIndex: Number,
|
||||
pageFragmentContainerId: [String, Number] as PropType<Id>,
|
||||
model: {
|
||||
type: Object,
|
||||
default: () => ({}),
|
||||
},
|
||||
},
|
||||
|
||||
components: { ItemComponent },
|
||||
|
||||
setup(props) {
|
||||
const app = inject<TMagicApp>('app');
|
||||
const node = useNode(props, app);
|
||||
registerNodeHooks(node);
|
||||
|
||||
const clickHandler = () => {
|
||||
if (app && node) {
|
||||
app.emit(`${COMMON_EVENT_PREFIX}click`, node);
|
||||
}
|
||||
};
|
||||
|
||||
return {
|
||||
clickHandler,
|
||||
};
|
||||
},
|
||||
});
|
||||
|
||||
const props = defineProps<ComponentProps<ContainerSchema>>();
|
||||
|
||||
const app = inject<TMagicApp>('app');
|
||||
const node = useNode(props, app);
|
||||
registerNodeHooks(node);
|
||||
|
||||
const clickHandler = () => {
|
||||
if (app && node) {
|
||||
app.emit(`${COMMON_EVENT_PREFIX}click`, node);
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
{
|
||||
"version": "0.2.0",
|
||||
"version": "1.0.0",
|
||||
"name": "@tmagic/vue-img",
|
||||
"type": "module",
|
||||
"main": "src/index.ts",
|
||||
@ -14,20 +14,15 @@
|
||||
"url": "https://github.com/Tencent/tmagic-editor.git"
|
||||
},
|
||||
"dependencies": {
|
||||
"@tmagic/form-schema": "workspace:^",
|
||||
"vue-demi": "^0.14.10"
|
||||
"@tmagic/form-schema": "workspace:^"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"@tmagic/core": "workspace:^",
|
||||
"@tmagic/vue-runtime-help": "workspace:^",
|
||||
"@vue/composition-api": ">=1.7.2",
|
||||
"typescript": "catalog:",
|
||||
"vue": ">=2.6.0 || >=3.5.0"
|
||||
"vue": ">=3.5.0"
|
||||
},
|
||||
"peerDependenciesMeta": {
|
||||
"@vue/composition-api": {
|
||||
"optional": true
|
||||
},
|
||||
"typescript": {
|
||||
"optional": true
|
||||
}
|
||||
|
||||
@ -2,11 +2,9 @@
|
||||
<img :src="config.src" @click="clickHandler" />
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { defineComponent, type PropType } from 'vue-demi';
|
||||
|
||||
<script lang="ts" setup>
|
||||
import type { Id, MComponent } from '@tmagic/core';
|
||||
import { registerNodeHooks, useNode } from '@tmagic/vue-runtime-help';
|
||||
import { type ComponentProps, registerNodeHooks, useNode } from '@tmagic/vue-runtime-help';
|
||||
|
||||
interface ImgSchema extends Omit<MComponent, 'id'> {
|
||||
id?: Id;
|
||||
@ -15,35 +13,16 @@ interface ImgSchema extends Omit<MComponent, 'id'> {
|
||||
url?: string;
|
||||
}
|
||||
|
||||
export default defineComponent({
|
||||
defineOptions({
|
||||
name: 'tmagic-img',
|
||||
|
||||
props: {
|
||||
config: {
|
||||
type: Object as PropType<ImgSchema>,
|
||||
required: true,
|
||||
},
|
||||
iteratorIndex: Array as PropType<number[]>,
|
||||
iteratorContainerId: Array as PropType<Id[]>,
|
||||
containerIndex: Number,
|
||||
pageFragmentContainerId: [String, Number] as PropType<Id>,
|
||||
model: {
|
||||
type: Object,
|
||||
default: () => ({}),
|
||||
},
|
||||
},
|
||||
|
||||
setup(props) {
|
||||
const clickHandler = () => {
|
||||
if (props.config.url) window.location.href = props.config.url;
|
||||
};
|
||||
|
||||
const node = useNode(props);
|
||||
registerNodeHooks(node);
|
||||
|
||||
return {
|
||||
clickHandler,
|
||||
};
|
||||
},
|
||||
});
|
||||
|
||||
const props = defineProps<ComponentProps<ImgSchema>>();
|
||||
|
||||
const clickHandler = () => {
|
||||
if (props.config.url) window.location.href = props.config.url;
|
||||
};
|
||||
|
||||
const node = useNode(props);
|
||||
registerNodeHooks(node);
|
||||
</script>
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
{
|
||||
"version": "0.2.1",
|
||||
"version": "1.0.0",
|
||||
"name": "@tmagic/vue-iterator-container",
|
||||
"type": "module",
|
||||
"main": "src/index.ts",
|
||||
@ -14,20 +14,15 @@
|
||||
"url": "https://github.com/Tencent/tmagic-editor.git"
|
||||
},
|
||||
"dependencies": {
|
||||
"@tmagic/form-schema": "workspace:^",
|
||||
"vue-demi": "^0.14.10"
|
||||
"@tmagic/form-schema": "workspace:^"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"@tmagic/core": "workspace:^",
|
||||
"@tmagic/vue-runtime-help": "workspace:^",
|
||||
"@vue/composition-api": ">=1.7.2",
|
||||
"typescript": "catalog:",
|
||||
"vue": ">=2.6.0 || >=3.5.0"
|
||||
"vue": ">=3.5.0"
|
||||
},
|
||||
"peerDependenciesMeta": {
|
||||
"@vue/composition-api": {
|
||||
"optional": true
|
||||
},
|
||||
"typescript": {
|
||||
"optional": true
|
||||
}
|
||||
|
||||
@ -13,8 +13,8 @@
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { computed, defineComponent, type PropType, watch } from 'vue-demi';
|
||||
<script lang="ts" setup>
|
||||
import { computed, watch } from 'vue';
|
||||
|
||||
import {
|
||||
COMMON_EVENT_PREFIX,
|
||||
@ -23,7 +23,7 @@ import {
|
||||
type MIteratorContainer,
|
||||
type MNode,
|
||||
} from '@tmagic/core';
|
||||
import { registerNodeHooks, useApp } from '@tmagic/vue-runtime-help';
|
||||
import { type ComponentProps, registerNodeHooks, useApp } from '@tmagic/vue-runtime-help';
|
||||
|
||||
import IteratorItem from './IteratorItem.vue';
|
||||
|
||||
@ -40,101 +40,79 @@ interface IteratorItemSchema {
|
||||
};
|
||||
}
|
||||
|
||||
export default defineComponent({
|
||||
defineOptions({
|
||||
name: 'tmagic-iterator-container',
|
||||
});
|
||||
|
||||
components: { IteratorItem },
|
||||
const props = defineProps<ComponentProps<IteratorContainerSchema>>();
|
||||
|
||||
props: {
|
||||
config: {
|
||||
type: Object as PropType<IteratorContainerSchema>,
|
||||
required: true,
|
||||
},
|
||||
iteratorIndex: Array as PropType<number[]>,
|
||||
iteratorContainerId: Array as PropType<Id[]>,
|
||||
containerIndex: Number,
|
||||
pageFragmentContainerId: [String, Number] as PropType<Id>,
|
||||
model: {
|
||||
type: Object,
|
||||
default: () => ({}),
|
||||
},
|
||||
},
|
||||
const { app, node } = useApp(props);
|
||||
registerNodeHooks(node);
|
||||
|
||||
setup(props) {
|
||||
const { app, node } = useApp(props);
|
||||
registerNodeHooks(node);
|
||||
const configs = computed<IteratorItemSchema[]>(() => {
|
||||
let { iteratorData = [] } = props.config;
|
||||
const { itemConfig, dsField, items } = props.config;
|
||||
|
||||
const configs = computed<IteratorItemSchema[]>(() => {
|
||||
let { iteratorData = [] } = props.config;
|
||||
const { itemConfig, dsField, items } = props.config;
|
||||
if (!Array.isArray(iteratorData)) {
|
||||
iteratorData = [];
|
||||
}
|
||||
|
||||
if (!Array.isArray(iteratorData)) {
|
||||
iteratorData = [];
|
||||
}
|
||||
if (app?.platform === 'editor' && !iteratorData.length) {
|
||||
iteratorData.push({});
|
||||
}
|
||||
|
||||
if (app?.platform === 'editor' && !iteratorData.length) {
|
||||
iteratorData.push({});
|
||||
}
|
||||
return iteratorData.map((itemData: any) => {
|
||||
const condResult =
|
||||
app?.platform !== 'editor'
|
||||
? (app?.dataSourceManager?.compliedIteratorItemConds(itemData, itemConfig, dsField) ?? true)
|
||||
: true;
|
||||
|
||||
return iteratorData.map((itemData: any) => {
|
||||
const condResult =
|
||||
app?.platform !== 'editor'
|
||||
? (app?.dataSourceManager?.compliedIteratorItemConds(itemData, itemConfig, dsField) ?? true)
|
||||
: true;
|
||||
|
||||
const newItems = app?.dataSourceManager?.compliedIteratorItems(itemData, items, dsField) ?? items;
|
||||
|
||||
return {
|
||||
items: newItems,
|
||||
condResult,
|
||||
style: {
|
||||
position: 'relative',
|
||||
left: 0,
|
||||
top: 0,
|
||||
...itemConfig.style,
|
||||
},
|
||||
};
|
||||
});
|
||||
});
|
||||
|
||||
watch(
|
||||
configs,
|
||||
(configs) => {
|
||||
if (!props.config.id) {
|
||||
return;
|
||||
}
|
||||
|
||||
const iteratorContainerNode = app?.getNode<TMagicIteratorContainer>(props.config.id, {
|
||||
iteratorContainerId: props.iteratorContainerId,
|
||||
iteratorIndex: props.iteratorIndex,
|
||||
pageFragmentContainerId: props.pageFragmentContainerId,
|
||||
});
|
||||
|
||||
if (!iteratorContainerNode) {
|
||||
return;
|
||||
}
|
||||
|
||||
iteratorContainerNode.resetNodes();
|
||||
|
||||
configs.forEach((config, index) => {
|
||||
iteratorContainerNode.setNodes(config.items, index);
|
||||
});
|
||||
},
|
||||
{
|
||||
immediate: true,
|
||||
},
|
||||
);
|
||||
|
||||
const clickHandler = () => {
|
||||
if (app && node) {
|
||||
app.emit(`${COMMON_EVENT_PREFIX}click`, node);
|
||||
}
|
||||
};
|
||||
const newItems = app?.dataSourceManager?.compliedIteratorItems(itemData, items, dsField) ?? items;
|
||||
|
||||
return {
|
||||
configs,
|
||||
clickHandler,
|
||||
items: newItems,
|
||||
condResult,
|
||||
style: {
|
||||
position: 'relative',
|
||||
left: 0,
|
||||
top: 0,
|
||||
...itemConfig.style,
|
||||
},
|
||||
};
|
||||
},
|
||||
});
|
||||
});
|
||||
|
||||
watch(
|
||||
configs,
|
||||
(configs) => {
|
||||
if (!props.config.id) {
|
||||
return;
|
||||
}
|
||||
|
||||
const iteratorContainerNode = app?.getNode<TMagicIteratorContainer>(props.config.id, {
|
||||
iteratorContainerId: props.iteratorContainerId,
|
||||
iteratorIndex: props.iteratorIndex,
|
||||
pageFragmentContainerId: props.pageFragmentContainerId,
|
||||
});
|
||||
|
||||
if (!iteratorContainerNode) {
|
||||
return;
|
||||
}
|
||||
|
||||
iteratorContainerNode.resetNodes();
|
||||
|
||||
configs.forEach((config, index) => {
|
||||
iteratorContainerNode.setNodes(config.items, index);
|
||||
});
|
||||
},
|
||||
{
|
||||
immediate: true,
|
||||
},
|
||||
);
|
||||
|
||||
const clickHandler = () => {
|
||||
if (app && node) {
|
||||
app.emit(`${COMMON_EVENT_PREFIX}click`, node);
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
@ -10,8 +10,8 @@
|
||||
></component>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { defineComponent, inject, type PropType } from 'vue-demi';
|
||||
<script lang="ts" setup>
|
||||
import { inject } from 'vue';
|
||||
|
||||
import type TMagicApp from '@tmagic/core';
|
||||
import { type Id } from '@tmagic/core';
|
||||
@ -19,37 +19,25 @@ import { useComponent, useComponentStatus } from '@tmagic/vue-runtime-help';
|
||||
|
||||
import { IteratorItemSchema } from './type';
|
||||
|
||||
export default defineComponent({
|
||||
interface IteratorItemProps {
|
||||
config: IteratorItemSchema;
|
||||
iteratorIndex?: number[];
|
||||
iteratorContainerId?: Id[];
|
||||
containerIndex?: number;
|
||||
pageFragmentContainerId?: Id;
|
||||
index?: number;
|
||||
model?: Record<string, any>;
|
||||
}
|
||||
|
||||
defineOptions({
|
||||
name: 'tmagic-iterator-container-item',
|
||||
|
||||
props: {
|
||||
config: {
|
||||
type: Object as PropType<IteratorItemSchema>,
|
||||
required: true,
|
||||
},
|
||||
iteratorIndex: Array as PropType<number[]>,
|
||||
iteratorContainerId: Array as PropType<Id[]>,
|
||||
containerIndex: Number,
|
||||
pageFragmentContainerId: [String, Number] as PropType<Id>,
|
||||
index: Number,
|
||||
model: {
|
||||
type: Object,
|
||||
default: () => ({}),
|
||||
},
|
||||
},
|
||||
|
||||
setup(props) {
|
||||
const app = inject<TMagicApp>('app');
|
||||
|
||||
const containerComponent = useComponent({ componentType: 'container', app });
|
||||
|
||||
const { style, className } = useComponentStatus(props);
|
||||
|
||||
return {
|
||||
style,
|
||||
className,
|
||||
containerComponent,
|
||||
};
|
||||
},
|
||||
});
|
||||
|
||||
const props = defineProps<IteratorItemProps>();
|
||||
|
||||
const app = inject<TMagicApp>('app');
|
||||
|
||||
const containerComponent = useComponent({ componentType: 'container', app });
|
||||
|
||||
const { style, className } = useComponentStatus(props);
|
||||
</script>
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
{
|
||||
"version": "0.2.0",
|
||||
"version": "1.0.0",
|
||||
"name": "@tmagic/vue-overlay",
|
||||
"type": "module",
|
||||
"main": "src/index.ts",
|
||||
@ -14,14 +14,13 @@
|
||||
"url": "https://github.com/Tencent/tmagic-editor.git"
|
||||
},
|
||||
"dependencies": {
|
||||
"@tmagic/form-schema": "workspace:^",
|
||||
"vue-demi": "^0.14.10"
|
||||
"@tmagic/form-schema": "workspace:^"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"@tmagic/core": "workspace:^",
|
||||
"@tmagic/vue-runtime-help": "workspace:^",
|
||||
"vue-demi": ">=0.14.7",
|
||||
"typescript": "catalog:"
|
||||
"typescript": "catalog:",
|
||||
"vue": ">=3.5.0"
|
||||
},
|
||||
"peerDependenciesMeta": {
|
||||
"typescript": {
|
||||
|
||||
@ -4,84 +4,72 @@
|
||||
</component>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { defineComponent, inject, onBeforeUnmount, type PropType, ref } from 'vue-demi';
|
||||
<script lang="ts" setup>
|
||||
import { inject, onBeforeUnmount, ref } from 'vue';
|
||||
|
||||
import type TMagicApp from '@tmagic/core';
|
||||
import { type Id, IS_DSL_NODE_KEY, type MContainer, type MNode, type MPage } from '@tmagic/core';
|
||||
import { registerNodeHooks, useComponent, useNode } from '@tmagic/vue-runtime-help';
|
||||
import { type ComponentProps, registerNodeHooks, useComponent, useNode } from '@tmagic/vue-runtime-help';
|
||||
|
||||
interface OverlaySchema extends Omit<MContainer, 'id'> {
|
||||
id?: Id;
|
||||
type?: 'overlay';
|
||||
}
|
||||
|
||||
export default defineComponent({
|
||||
defineOptions({
|
||||
name: 'tmagic-overlay',
|
||||
});
|
||||
|
||||
props: {
|
||||
config: {
|
||||
type: Object as PropType<OverlaySchema>,
|
||||
required: true,
|
||||
},
|
||||
iteratorIndex: Array as PropType<number[]>,
|
||||
iteratorContainerId: Array as PropType<Id[]>,
|
||||
containerIndex: Number,
|
||||
pageFragmentContainerId: [String, Number] as PropType<Id>,
|
||||
model: {
|
||||
type: Object,
|
||||
default: () => ({}),
|
||||
},
|
||||
const props = defineProps<ComponentProps<OverlaySchema>>();
|
||||
|
||||
const visible = ref(false);
|
||||
|
||||
const app = inject<TMagicApp>('app');
|
||||
const containerComponent = useComponent({ componentType: 'container', app });
|
||||
|
||||
const openOverlay = () => {
|
||||
visible.value = true;
|
||||
app?.emit('overlay:open', node);
|
||||
};
|
||||
|
||||
const closeOverlay = () => {
|
||||
visible.value = false;
|
||||
app?.emit('overlay:close', node);
|
||||
};
|
||||
|
||||
const editorSelectHandler = (
|
||||
_info: {
|
||||
node: MNode;
|
||||
page: MPage;
|
||||
parent: MContainer;
|
||||
},
|
||||
path: MNode[],
|
||||
) => {
|
||||
if (path.find((node: MNode) => node.id === props.config.id)) {
|
||||
openOverlay();
|
||||
} else {
|
||||
closeOverlay();
|
||||
}
|
||||
};
|
||||
|
||||
setup(props) {
|
||||
const visible = ref(false);
|
||||
app?.page?.on('editor:select', editorSelectHandler);
|
||||
|
||||
const app = inject<TMagicApp>('app');
|
||||
const containerComponent = useComponent({ componentType: 'container', app });
|
||||
app?.on('page-change', () => {
|
||||
app?.page?.on('editor:select', editorSelectHandler);
|
||||
});
|
||||
|
||||
const openOverlay = () => {
|
||||
visible.value = true;
|
||||
app?.emit('overlay:open', node);
|
||||
};
|
||||
onBeforeUnmount(() => {
|
||||
app?.page?.off('editor:select', editorSelectHandler);
|
||||
});
|
||||
|
||||
const closeOverlay = () => {
|
||||
visible.value = false;
|
||||
app?.emit('overlay:close', node);
|
||||
};
|
||||
const node = useNode(props, app);
|
||||
registerNodeHooks(node, {
|
||||
openOverlay,
|
||||
closeOverlay,
|
||||
});
|
||||
|
||||
const editorSelectHandler = (
|
||||
info: {
|
||||
node: MNode;
|
||||
page: MPage;
|
||||
parent: MContainer;
|
||||
},
|
||||
path: MNode[],
|
||||
) => {
|
||||
if (path.find((node: MNode) => node.id === props.config.id)) {
|
||||
openOverlay();
|
||||
} else {
|
||||
closeOverlay();
|
||||
}
|
||||
};
|
||||
|
||||
app?.page?.on('editor:select', editorSelectHandler);
|
||||
|
||||
onBeforeUnmount(() => {
|
||||
app?.page?.off('editor:select', editorSelectHandler);
|
||||
});
|
||||
|
||||
const node = useNode(props, app);
|
||||
registerNodeHooks(node, {
|
||||
openOverlay,
|
||||
closeOverlay,
|
||||
});
|
||||
|
||||
return {
|
||||
containerComponent,
|
||||
visible,
|
||||
IS_DSL_NODE_KEY,
|
||||
};
|
||||
},
|
||||
defineExpose({
|
||||
openOverlay,
|
||||
closeOverlay,
|
||||
});
|
||||
</script>
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
{
|
||||
"version": "0.2.2",
|
||||
"version": "1.0.0",
|
||||
"name": "@tmagic/vue-page-fragment-container",
|
||||
"type": "module",
|
||||
"main": "src/index.ts",
|
||||
@ -14,13 +14,13 @@
|
||||
"url": "https://github.com/Tencent/tmagic-editor.git"
|
||||
},
|
||||
"dependencies": {
|
||||
"@tmagic/form-schema": "workspace:^",
|
||||
"vue-demi": "^0.14.10"
|
||||
"@tmagic/form-schema": "workspace:^"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"@tmagic/core": "workspace:^",
|
||||
"@tmagic/vue-runtime-help": "workspace:^",
|
||||
"typescript": "catalog:"
|
||||
"typescript": "catalog:",
|
||||
"vue": ">=3.5.0"
|
||||
},
|
||||
"peerDependenciesMeta": {
|
||||
"typescript": {
|
||||
|
||||
@ -11,55 +11,35 @@
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { computed, defineComponent, type PropType, provide } from 'vue-demi';
|
||||
<script lang="ts" setup>
|
||||
import { computed, provide } from 'vue';
|
||||
|
||||
import { type Id, type MComponent, NodeType, PAGE_FRAGMENT_CONTAINER_ID_KEY } from '@tmagic/core';
|
||||
import { registerNodeHooks, useApp, useComponent, useDsl } from '@tmagic/vue-runtime-help';
|
||||
import { type MComponent, NodeType, PAGE_FRAGMENT_CONTAINER_ID_KEY } from '@tmagic/core';
|
||||
import { type ComponentProps, registerNodeHooks, useApp, useComponent, useDsl } from '@tmagic/vue-runtime-help';
|
||||
|
||||
export default defineComponent({
|
||||
defineOptions({
|
||||
name: 'tmagic-page-fragment-container',
|
||||
});
|
||||
|
||||
props: {
|
||||
config: {
|
||||
type: Object as PropType<MComponent>,
|
||||
required: true,
|
||||
},
|
||||
iteratorIndex: Array as PropType<number[]>,
|
||||
iteratorContainerId: Array as PropType<Id[]>,
|
||||
containerIndex: Number,
|
||||
pageFragmentContainerId: [String, Number] as PropType<Id>,
|
||||
model: {
|
||||
type: Object,
|
||||
default: () => ({}),
|
||||
},
|
||||
},
|
||||
const props = defineProps<ComponentProps<MComponent>>();
|
||||
|
||||
setup(props) {
|
||||
provide(PAGE_FRAGMENT_CONTAINER_ID_KEY, props.config.id);
|
||||
provide(PAGE_FRAGMENT_CONTAINER_ID_KEY, props.config.id);
|
||||
|
||||
const { app, node } = useApp(props);
|
||||
registerNodeHooks(node);
|
||||
const { app, node } = useApp(props);
|
||||
registerNodeHooks(node);
|
||||
|
||||
const containerComponent = useComponent({ componentType: 'container', app });
|
||||
const containerComponent = useComponent({ componentType: 'container', app });
|
||||
|
||||
if (!props.config.id) {
|
||||
throw new Error('page-fragment-container must have id');
|
||||
}
|
||||
if (!props.config.id) {
|
||||
throw new Error('page-fragment-container must have id');
|
||||
}
|
||||
|
||||
const { pageConfig: fragment } = useDsl(app, props.config.id);
|
||||
const { pageConfig: fragment } = useDsl(app, props.config.id);
|
||||
|
||||
const containerConfig = computed(() => {
|
||||
if (!fragment.value) return { items: [], id: '', type: NodeType.CONTAINER };
|
||||
const containerConfig = computed(() => {
|
||||
if (!fragment.value) return { items: [], id: '', type: NodeType.CONTAINER };
|
||||
|
||||
return fragment.value;
|
||||
});
|
||||
|
||||
return {
|
||||
containerComponent,
|
||||
containerConfig,
|
||||
};
|
||||
},
|
||||
return fragment.value;
|
||||
});
|
||||
</script>
|
||||
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
{
|
||||
"version": "0.2.0",
|
||||
"version": "1.0.0",
|
||||
"name": "@tmagic/vue-page-fragment",
|
||||
"type": "module",
|
||||
"main": "src/index.ts",
|
||||
@ -14,13 +14,13 @@
|
||||
"url": "https://github.com/Tencent/tmagic-editor.git"
|
||||
},
|
||||
"dependencies": {
|
||||
"@tmagic/form-schema": "workspace:^",
|
||||
"vue-demi": "^0.14.10"
|
||||
"@tmagic/form-schema": "workspace:^"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"@tmagic/core": "workspace:^",
|
||||
"@tmagic/vue-runtime-help": "workspace:^",
|
||||
"typescript": "catalog:"
|
||||
"typescript": "catalog:",
|
||||
"vue": ">=3.5.0"
|
||||
},
|
||||
"peerDependenciesMeta": {
|
||||
"typescript": {
|
||||
|
||||
@ -8,40 +8,29 @@
|
||||
></component>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { defineComponent, inject, type PropType } from 'vue-demi';
|
||||
<script lang="ts" setup>
|
||||
import { inject } from 'vue';
|
||||
|
||||
import type TMagicApp from '@tmagic/core';
|
||||
import { IS_DSL_NODE_KEY, type MPageFragment } from '@tmagic/core';
|
||||
import { registerNodeHooks, useComponent, useComponentStatus, useNode } from '@tmagic/vue-runtime-help';
|
||||
import {
|
||||
type ComponentProps,
|
||||
registerNodeHooks,
|
||||
useComponent,
|
||||
useComponentStatus,
|
||||
useNode,
|
||||
} from '@tmagic/vue-runtime-help';
|
||||
|
||||
export default defineComponent({
|
||||
defineOptions({
|
||||
name: 'tmagic-page-fragment',
|
||||
|
||||
props: {
|
||||
config: {
|
||||
type: Object as PropType<MPageFragment>,
|
||||
required: true,
|
||||
},
|
||||
model: {
|
||||
type: Object,
|
||||
default: () => ({}),
|
||||
},
|
||||
},
|
||||
|
||||
setup(props) {
|
||||
const app = inject<TMagicApp>('app');
|
||||
const node = useNode(props, app);
|
||||
registerNodeHooks(node);
|
||||
|
||||
const containerComponent = useComponent({ componentType: 'container', app });
|
||||
const { style, className } = useComponentStatus(props);
|
||||
return {
|
||||
style,
|
||||
className,
|
||||
containerComponent,
|
||||
IS_DSL_NODE_KEY,
|
||||
};
|
||||
},
|
||||
});
|
||||
|
||||
const props = defineProps<ComponentProps<MPageFragment>>();
|
||||
|
||||
const app = inject<TMagicApp>('app');
|
||||
const node = useNode(props, app);
|
||||
registerNodeHooks(node);
|
||||
|
||||
const containerComponent = useComponent({ componentType: 'container', app });
|
||||
const { style, className } = useComponentStatus(props);
|
||||
</script>
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
{
|
||||
"version": "0.2.1",
|
||||
"version": "1.0.0",
|
||||
"name": "@tmagic/vue-page",
|
||||
"type": "module",
|
||||
"main": "src/index.ts",
|
||||
@ -14,13 +14,13 @@
|
||||
"url": "https://github.com/Tencent/tmagic-editor.git"
|
||||
},
|
||||
"dependencies": {
|
||||
"@tmagic/form-schema": "workspace:^",
|
||||
"vue-demi": "^0.14.10"
|
||||
"@tmagic/form-schema": "workspace:^"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"@tmagic/core": "workspace:^",
|
||||
"@tmagic/vue-runtime-help": "workspace:^",
|
||||
"typescript": "catalog:"
|
||||
"typescript": "catalog:",
|
||||
"vue": ">=3.5.0"
|
||||
},
|
||||
"peerDependenciesMeta": {
|
||||
"typescript": {
|
||||
|
||||
@ -78,6 +78,9 @@ export default defineFormConfig([
|
||||
name: 'css',
|
||||
type: 'vs-code',
|
||||
language: 'css',
|
||||
height: '500px',
|
||||
autosize: {
|
||||
minRows: 3,
|
||||
maxRows: 20,
|
||||
},
|
||||
},
|
||||
]);
|
||||
|
||||
@ -8,8 +8,8 @@
|
||||
></component>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { defineComponent, inject, nextTick, type PropType, watch } from 'vue-demi';
|
||||
<script lang="ts" setup>
|
||||
import { inject, nextTick, watch } from 'vue';
|
||||
|
||||
import type TMagicApp from '@tmagic/core';
|
||||
import { asyncLoadCss, asyncLoadJs, IS_DSL_NODE_KEY, type MPage } from '@tmagic/core';
|
||||
@ -37,64 +37,54 @@ const createJs = (config: MPage) => {
|
||||
}
|
||||
};
|
||||
|
||||
export default defineComponent({
|
||||
defineOptions({
|
||||
name: 'tmagic-page',
|
||||
|
||||
props: {
|
||||
config: {
|
||||
type: Object as PropType<MPage>,
|
||||
required: true,
|
||||
},
|
||||
model: {
|
||||
type: Object,
|
||||
default: () => ({}),
|
||||
},
|
||||
},
|
||||
|
||||
setup(props) {
|
||||
const app = inject<TMagicApp>('app');
|
||||
|
||||
if (app?.jsEngine === 'browser') {
|
||||
createCss(props.config);
|
||||
createJs(props.config);
|
||||
}
|
||||
|
||||
const containerComponent = useComponent({ componentType: 'container', app });
|
||||
|
||||
const { style, className } = useComponentStatus(props);
|
||||
|
||||
const refresh = () => {
|
||||
window.location.reload();
|
||||
};
|
||||
|
||||
watch(
|
||||
() => props.config,
|
||||
async (config, preConfig) => {
|
||||
const node = useNode({ config: { ...config, [IS_DSL_NODE_KEY]: true } }, app);
|
||||
|
||||
if (config.id !== preConfig?.id) {
|
||||
node?.setInstance({ config: props.config, refresh });
|
||||
node?.emit('created');
|
||||
}
|
||||
await nextTick();
|
||||
|
||||
if (config.id !== preConfig?.id) {
|
||||
node?.emit('mounted');
|
||||
const preNode = useNode({ config: { ...preConfig, [IS_DSL_NODE_KEY]: true } }, app);
|
||||
preNode?.emit('destroy');
|
||||
}
|
||||
},
|
||||
{
|
||||
immediate: true,
|
||||
},
|
||||
);
|
||||
|
||||
return {
|
||||
style,
|
||||
className,
|
||||
containerComponent,
|
||||
IS_DSL_NODE_KEY,
|
||||
};
|
||||
},
|
||||
});
|
||||
|
||||
const props = withDefaults(
|
||||
defineProps<{
|
||||
config: MPage;
|
||||
model?: Record<string, any>;
|
||||
}>(),
|
||||
{
|
||||
model: () => ({}),
|
||||
},
|
||||
);
|
||||
|
||||
const app = inject<TMagicApp>('app');
|
||||
|
||||
if (app?.jsEngine === 'browser') {
|
||||
createCss(props.config);
|
||||
createJs(props.config);
|
||||
}
|
||||
|
||||
const containerComponent = useComponent({ componentType: 'container', app });
|
||||
|
||||
const { style, className } = useComponentStatus(props);
|
||||
|
||||
const refresh = () => {
|
||||
window.location.reload();
|
||||
};
|
||||
|
||||
watch(
|
||||
() => props.config,
|
||||
async (config, preConfig) => {
|
||||
const node = useNode({ config: { ...config, [IS_DSL_NODE_KEY]: true } }, app);
|
||||
|
||||
if (config.id !== preConfig?.id) {
|
||||
node?.setInstance({ config: props.config, refresh });
|
||||
node?.emit('created');
|
||||
}
|
||||
await nextTick();
|
||||
|
||||
if (config.id !== preConfig?.id) {
|
||||
node?.emit('mounted');
|
||||
const preNode = useNode({ config: { ...preConfig, [IS_DSL_NODE_KEY]: true } }, app);
|
||||
preNode?.emit('destroy');
|
||||
}
|
||||
},
|
||||
{
|
||||
immediate: true,
|
||||
},
|
||||
);
|
||||
</script>
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
{
|
||||
"version": "0.2.0",
|
||||
"version": "1.0.0",
|
||||
"name": "@tmagic/vue-qrcode",
|
||||
"type": "module",
|
||||
"main": "src/index.ts",
|
||||
@ -15,22 +15,17 @@
|
||||
},
|
||||
"dependencies": {
|
||||
"@tmagic/form-schema": "workspace:^",
|
||||
"qrcode": "^1.5.0",
|
||||
"vue-demi": "^0.14.10"
|
||||
"qrcode": "^1.5.0"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"@tmagic/core": "workspace:^",
|
||||
"@tmagic/vue-runtime-help": "workspace:^",
|
||||
"@vue/composition-api": ">=1.7.2",
|
||||
"typescript": "catalog:",
|
||||
"vue": ">=2.6.0 || >=3.5.0"
|
||||
"vue": ">=3.5.0"
|
||||
},
|
||||
"peerDependenciesMeta": {
|
||||
"typescript": {
|
||||
"optional": true
|
||||
},
|
||||
"@vue/composition-api": {
|
||||
"optional": true
|
||||
}
|
||||
},
|
||||
"devDependencies": {
|
||||
|
||||
@ -2,13 +2,13 @@
|
||||
<img :src="imgUrl" @click="clickHandler" />
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { defineComponent, inject, type PropType, ref, watch } from 'vue-demi';
|
||||
<script lang="ts" setup>
|
||||
import { inject, ref, watch } from 'vue';
|
||||
import QRCode from 'qrcode';
|
||||
|
||||
import type TMagicApp from '@tmagic/core';
|
||||
import { COMMON_EVENT_PREFIX, type Id, type MComponent } from '@tmagic/core';
|
||||
import { registerNodeHooks, useNode } from '@tmagic/vue-runtime-help';
|
||||
import { type ComponentProps, registerNodeHooks, useNode } from '@tmagic/vue-runtime-help';
|
||||
|
||||
interface QrCodeSchema extends Omit<MComponent, 'id'> {
|
||||
id?: Id;
|
||||
@ -16,54 +16,34 @@ interface QrCodeSchema extends Omit<MComponent, 'id'> {
|
||||
url: string;
|
||||
}
|
||||
|
||||
export default defineComponent({
|
||||
defineOptions({
|
||||
name: 'tmagic-qrcode',
|
||||
|
||||
props: {
|
||||
config: {
|
||||
type: Object as PropType<QrCodeSchema>,
|
||||
required: true,
|
||||
},
|
||||
iteratorIndex: Array as PropType<number[]>,
|
||||
iteratorContainerId: Array as PropType<Id[]>,
|
||||
containerIndex: Number,
|
||||
pageFragmentContainerId: [String, Number] as PropType<Id>,
|
||||
model: {
|
||||
type: Object,
|
||||
default: () => ({}),
|
||||
},
|
||||
},
|
||||
|
||||
setup(props) {
|
||||
const imgUrl = ref();
|
||||
|
||||
watch(
|
||||
() => props.config.url,
|
||||
(url = '') => {
|
||||
QRCode.toDataURL(url, (e: any, url: string) => {
|
||||
if (e) console.error(e);
|
||||
imgUrl.value = url;
|
||||
});
|
||||
},
|
||||
{
|
||||
immediate: true,
|
||||
},
|
||||
);
|
||||
|
||||
const app = inject<TMagicApp>('app');
|
||||
const node = useNode(props);
|
||||
registerNodeHooks(node);
|
||||
|
||||
const clickHandler = () => {
|
||||
if (app && node) {
|
||||
app.emit(`${COMMON_EVENT_PREFIX}click`, node);
|
||||
}
|
||||
};
|
||||
|
||||
return {
|
||||
imgUrl,
|
||||
clickHandler,
|
||||
};
|
||||
},
|
||||
});
|
||||
|
||||
const props = defineProps<ComponentProps<QrCodeSchema>>();
|
||||
|
||||
const imgUrl = ref();
|
||||
|
||||
watch(
|
||||
() => props.config.url,
|
||||
(url = '') => {
|
||||
QRCode.toDataURL(url, (e: any, url: string) => {
|
||||
if (e) console.error(e);
|
||||
imgUrl.value = url;
|
||||
});
|
||||
},
|
||||
{
|
||||
immediate: true,
|
||||
},
|
||||
);
|
||||
|
||||
const app = inject<TMagicApp>('app');
|
||||
const node = useNode(props);
|
||||
registerNodeHooks(node);
|
||||
|
||||
const clickHandler = () => {
|
||||
if (app && node) {
|
||||
app.emit(`${COMMON_EVENT_PREFIX}click`, node);
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
{
|
||||
"version": "0.2.1",
|
||||
"version": "1.0.0",
|
||||
"name": "@tmagic/vue-text",
|
||||
"type": "module",
|
||||
"main": "src/index.ts",
|
||||
@ -14,22 +14,17 @@
|
||||
"url": "https://github.com/Tencent/tmagic-editor.git"
|
||||
},
|
||||
"dependencies": {
|
||||
"@tmagic/form-schema": "workspace:^",
|
||||
"vue-demi": "^0.14.10"
|
||||
"@tmagic/form-schema": "workspace:^"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"@tmagic/core": "workspace:^",
|
||||
"@tmagic/vue-runtime-help": "workspace:^",
|
||||
"@vue/composition-api": ">=1.7.2",
|
||||
"typescript": "catalog:",
|
||||
"vue": ">=2.6.0 || >=3.5.0"
|
||||
"vue": ">=3.5.0"
|
||||
},
|
||||
"peerDependenciesMeta": {
|
||||
"typescript": {
|
||||
"optional": true
|
||||
},
|
||||
"@vue/composition-api": {
|
||||
"optional": true
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -2,12 +2,12 @@
|
||||
<p @click="clickHandler" v-html="config.text"></p>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { defineComponent, inject, type PropType } from 'vue-demi';
|
||||
<script lang="ts" setup>
|
||||
import { inject } from 'vue';
|
||||
|
||||
import type TMagicApp from '@tmagic/core';
|
||||
import { COMMON_EVENT_PREFIX, type Id, type MComponent } from '@tmagic/core';
|
||||
import { registerNodeHooks, useNode } from '@tmagic/vue-runtime-help';
|
||||
import { type ComponentProps, registerNodeHooks, useNode } from '@tmagic/vue-runtime-help';
|
||||
|
||||
interface TextSchema extends Omit<MComponent, 'id'> {
|
||||
id?: Id;
|
||||
@ -15,38 +15,19 @@ interface TextSchema extends Omit<MComponent, 'id'> {
|
||||
text: string;
|
||||
}
|
||||
|
||||
export default defineComponent({
|
||||
defineOptions({
|
||||
name: 'tmagic-text',
|
||||
|
||||
props: {
|
||||
config: {
|
||||
type: Object as PropType<TextSchema>,
|
||||
required: true,
|
||||
},
|
||||
iteratorIndex: Array as PropType<number[]>,
|
||||
iteratorContainerId: Array as PropType<Id[]>,
|
||||
containerIndex: Number,
|
||||
pageFragmentContainerId: [String, Number] as PropType<Id>,
|
||||
model: {
|
||||
type: Object,
|
||||
default: () => ({}),
|
||||
},
|
||||
},
|
||||
|
||||
setup(props) {
|
||||
const app = inject<TMagicApp>('app');
|
||||
const node = useNode(props);
|
||||
registerNodeHooks(node);
|
||||
|
||||
const clickHandler = () => {
|
||||
if (app && node) {
|
||||
app.emit(`${COMMON_EVENT_PREFIX}click`, node);
|
||||
}
|
||||
};
|
||||
|
||||
return {
|
||||
clickHandler,
|
||||
};
|
||||
},
|
||||
});
|
||||
|
||||
const props = defineProps<ComponentProps<TextSchema>>();
|
||||
|
||||
const app = inject<TMagicApp>('app');
|
||||
const node = useNode(props);
|
||||
registerNodeHooks(node);
|
||||
|
||||
const clickHandler = () => {
|
||||
if (app && node) {
|
||||
app.emit(`${COMMON_EVENT_PREFIX}click`, node);
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user