mirror of
https://github.com/Tencent/tmagic-editor.git
synced 2025-12-10 18:02:53 +00:00
Compare commits
11 Commits
9815fb7c51
...
7a0dae9f5a
| Author | SHA1 | Date | |
|---|---|---|---|
|
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)
|
||||
|
||||
|
||||
|
||||
@ -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