From 0736646c63067b3b19125b356f462d658673eaa7 Mon Sep 17 00:00:00 2001 From: roymondchen Date: Thu, 6 Mar 2025 20:29:38 +0800 Subject: [PATCH] =?UTF-8?q?feat(vue-components,react-components):=20?= =?UTF-8?q?=E5=A2=9E=E5=8A=A0=E7=82=B9=E5=87=BB=E4=BA=8B=E4=BB=B6=EF=BC=8C?= =?UTF-8?q?=E4=BD=BF=E7=94=A8=E7=BB=84=E4=BB=B6=E7=8A=B6=E6=80=81hook?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- pnpm-lock.yaml | 98 ++++++++----------- react-components/button/package.json | 7 +- react-components/button/src/Button.tsx | 13 ++- react-components/button/src/event.ts | 4 +- react-components/container/package.json | 8 +- react-components/container/src/Component.tsx | 66 +++++++++++++ react-components/container/src/Container.tsx | 68 +++++-------- react-components/container/src/event.ts | 4 +- react-components/container/src/formConfig.ts | 2 +- react-components/img/package.json | 7 +- react-components/img/src/Img.tsx | 2 +- react-components/img/src/event.ts | 4 +- .../iterator-container/package.json | 8 +- .../src/IteratorContainer.tsx | 18 +++- .../iterator-container/src/event.ts | 4 +- .../iterator-container/src/formConfig.ts | 3 +- react-components/overlay/package.json | 7 +- react-components/overlay/src/Overlay.tsx | 6 +- .../page-fragment-container/package.json | 7 +- .../src/PageFragmentContainer.tsx | 6 +- react-components/page-fragment/package.json | 8 +- .../page-fragment/src/PageFragment.tsx | 10 +- .../page-fragment/src/formConfig.ts | 2 +- react-components/page/package.json | 8 +- react-components/page/src/Page.tsx | 21 ++-- react-components/page/src/formConfig.ts | 2 +- react-components/qrcode/package.json | 7 +- react-components/qrcode/src/QrCode.tsx | 10 +- react-components/qrcode/src/event.ts | 4 +- react-components/text/package.json | 7 +- react-components/text/src/Text.tsx | 14 ++- react-components/text/src/event.ts | 4 +- vue-components/button/package.json | 2 +- vue-components/button/src/event.ts | 4 +- vue-components/button/src/index.vue | 30 ++++-- vue-components/container/package.json | 2 +- vue-components/container/src/Component.ts | 65 +++++++++--- vue-components/container/src/Container.vue | 50 +++------- vue-components/container/src/event.ts | 4 +- vue-components/img/package.json | 2 +- vue-components/img/src/index.vue | 11 +-- .../iterator-container/package.json | 2 +- .../src/IteratorContainer.vue | 50 ++++++---- .../iterator-container/src/IteratorItem.vue | 53 ++++++++++ .../iterator-container/src/event.ts | 4 +- vue-components/iterator-container/src/type.ts | 9 ++ vue-components/overlay/package.json | 2 +- vue-components/overlay/src/index.vue | 48 ++++----- .../page-fragment-container/package.json | 2 +- .../src/PageFragmentContainer.vue | 39 +++----- vue-components/page-fragment/package.json | 2 +- .../page-fragment/src/PageFragment.vue | 26 ++--- vue-components/page/package.json | 2 +- vue-components/page/src/index.vue | 55 ++++++++--- vue-components/qrcode/package.json | 2 +- vue-components/qrcode/src/event.ts | 4 +- vue-components/qrcode/src/index.vue | 26 +++-- vue-components/text/package.json | 2 +- vue-components/text/src/event.ts | 4 +- vue-components/text/src/index.vue | 31 ++++-- 60 files changed, 594 insertions(+), 378 deletions(-) create mode 100644 react-components/container/src/Component.tsx create mode 100644 vue-components/iterator-container/src/IteratorItem.vue create mode 100644 vue-components/iterator-container/src/type.ts diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 903bec23..787fb88c 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -635,12 +635,12 @@ importers: react-components/button: dependencies: + '@tmagic/core': + specifier: workspace:^ + version: link:../../packages/core '@tmagic/react-runtime-help': specifier: workspace:^ version: link:../../runtime/react-runtime-help - '@tmagic/schema': - specifier: workspace:^ - version: link:../../packages/schema react: specifier: '>=18.3.1' version: 18.3.1 @@ -660,15 +660,12 @@ importers: react-components/container: dependencies: + '@tmagic/core': + specifier: workspace:^ + version: link:../../packages/core '@tmagic/react-runtime-help': specifier: workspace:^ version: link:../../runtime/react-runtime-help - '@tmagic/schema': - specifier: workspace:^ - version: link:../../packages/schema - '@tmagic/utils': - specifier: workspace:^ - version: link:../../packages/utils react: specifier: '>=18.3.1' version: 18.3.1 @@ -688,12 +685,12 @@ importers: react-components/img: dependencies: + '@tmagic/core': + specifier: workspace:^ + version: link:../../packages/core '@tmagic/react-runtime-help': specifier: workspace:^ version: link:../../runtime/react-runtime-help - '@tmagic/schema': - specifier: workspace:^ - version: link:../../packages/schema react: specifier: '>=18.3.1' version: 18.3.1 @@ -713,15 +710,12 @@ importers: react-components/iterator-container: dependencies: + '@tmagic/core': + specifier: workspace:^ + version: link:../../packages/core '@tmagic/react-runtime-help': specifier: workspace:^ version: link:../../runtime/react-runtime-help - '@tmagic/schema': - specifier: workspace:^ - version: link:../../packages/schema - '@tmagic/utils': - specifier: workspace:^ - version: link:../../packages/utils react: specifier: '>=18.3.1' version: 18.3.1 @@ -741,12 +735,12 @@ importers: react-components/overlay: dependencies: + '@tmagic/core': + specifier: workspace:^ + version: link:../../packages/core '@tmagic/react-runtime-help': specifier: workspace:^ version: link:../../runtime/react-runtime-help - '@tmagic/schema': - specifier: workspace:^ - version: link:../../packages/schema react: specifier: '>=18.3.1' version: 18.3.1 @@ -766,15 +760,12 @@ importers: react-components/page: dependencies: + '@tmagic/core': + specifier: workspace:^ + version: link:../../packages/core '@tmagic/react-runtime-help': specifier: workspace:^ version: link:../../runtime/react-runtime-help - '@tmagic/schema': - specifier: workspace:^ - version: link:../../packages/schema - '@tmagic/utils': - specifier: workspace:^ - version: link:../../packages/utils react: specifier: '>=18.3.1' version: 18.3.1 @@ -794,15 +785,12 @@ importers: react-components/page-fragment: dependencies: + '@tmagic/core': + specifier: workspace:^ + version: link:../../packages/core '@tmagic/react-runtime-help': specifier: workspace:^ version: link:../../runtime/react-runtime-help - '@tmagic/schema': - specifier: workspace:^ - version: link:../../packages/schema - '@tmagic/utils': - specifier: workspace:^ - version: link:../../packages/utils react: specifier: '>=18.3.1' version: 18.3.1 @@ -822,12 +810,12 @@ importers: react-components/page-fragment-container: dependencies: + '@tmagic/core': + specifier: workspace:^ + version: link:../../packages/core '@tmagic/react-runtime-help': specifier: workspace:^ version: link:../../runtime/react-runtime-help - '@tmagic/schema': - specifier: workspace:^ - version: link:../../packages/schema react: specifier: '>=18.3.1' version: 18.3.1 @@ -847,12 +835,12 @@ importers: react-components/qrcode: dependencies: + '@tmagic/core': + specifier: workspace:^ + version: link:../../packages/core '@tmagic/react-runtime-help': specifier: workspace:^ version: link:../../runtime/react-runtime-help - '@tmagic/schema': - specifier: workspace:^ - version: link:../../packages/schema qrcode: specifier: ^1.5.0 version: 1.5.4 @@ -878,12 +866,12 @@ importers: react-components/text: dependencies: + '@tmagic/core': + specifier: workspace:^ + version: link:../../packages/core '@tmagic/react-runtime-help': specifier: workspace:^ version: link:../../runtime/react-runtime-help - '@tmagic/schema': - specifier: workspace:^ - version: link:../../packages/schema react: specifier: '>=18.3.1' version: 18.3.1 @@ -907,8 +895,8 @@ importers: specifier: 1.5.9 version: 1.5.9(typescript@5.7.3) '@tmagic/react-runtime-help': - specifier: 0.0.4 - version: 0.0.4(@tmagic/core@1.5.9(typescript@5.7.3))(@tmagic/stage@1.5.9(@tmagic/core@1.5.9(typescript@5.7.3))(typescript@5.7.3))(lodash-es@4.17.21)(react@18.3.1)(typescript@5.7.3) + specifier: 0.1.0 + version: 0.1.0(@tmagic/core@1.5.9(typescript@5.7.3))(@tmagic/stage@1.5.9(@tmagic/core@1.5.9(typescript@5.7.3))(typescript@5.7.3))(lodash-es@4.17.21)(react@18.3.1)(typescript@5.7.3) '@tmagic/stage': specifier: 1.5.9 version: 1.5.9(@tmagic/core@1.5.9(typescript@5.7.3))(typescript@5.7.3) @@ -1024,8 +1012,8 @@ importers: specifier: 1.5.9 version: 1.5.9(@tmagic/core@1.5.9(typescript@5.7.3))(typescript@5.7.3) '@tmagic/vue-runtime-help': - specifier: ^1.0.0 - version: 1.0.0(@tmagic/core@1.5.9(typescript@5.7.3))(@tmagic/stage@1.5.9(@tmagic/core@1.5.9(typescript@5.7.3))(typescript@5.7.3))(@vue/composition-api@1.7.2(vue@2.7.16))(typescript@5.7.3)(vue@2.7.16) + specifier: ^1.1.0 + version: 1.1.0(@tmagic/core@1.5.9(typescript@5.7.3))(@tmagic/stage@1.5.9(@tmagic/core@1.5.9(typescript@5.7.3))(typescript@5.7.3))(@vue/composition-api@1.7.2(vue@2.7.16))(typescript@5.7.3)(vue@2.7.16) axios: specifier: ^0.25.0 version: 0.25.0 @@ -1073,8 +1061,8 @@ importers: specifier: 1.5.9 version: 1.5.9(@tmagic/core@1.5.9(typescript@5.7.3))(typescript@5.7.3) '@tmagic/vue-runtime-help': - specifier: ^1.0.0 - version: 1.0.0(@tmagic/core@1.5.9(typescript@5.7.3))(@tmagic/stage@1.5.9(@tmagic/core@1.5.9(typescript@5.7.3))(typescript@5.7.3))(@vue/composition-api@1.7.2(vue@3.5.13(typescript@5.7.3)))(typescript@5.7.3)(vue@3.5.13(typescript@5.7.3)) + specifier: ^1.1.0 + version: 1.1.0(@tmagic/core@1.5.9(typescript@5.7.3))(@tmagic/stage@1.5.9(@tmagic/core@1.5.9(typescript@5.7.3))(typescript@5.7.3))(@vue/composition-api@1.7.2(vue@3.5.13(typescript@5.7.3)))(typescript@5.7.3)(vue@3.5.13(typescript@5.7.3)) axios: specifier: ^0.25.0 version: 0.25.0 @@ -2857,8 +2845,8 @@ packages: typescript: optional: true - '@tmagic/react-runtime-help@0.0.4': - resolution: {integrity: sha512-H6WnitSMQUjZ4ArkO/a70l0GIqmTP+n+416PIvbCEVaVb5M8cBk72h3rTvwVp3CGFptLo/OYooyw7hO1ofVmCw==} + '@tmagic/react-runtime-help@0.1.0': + resolution: {integrity: sha512-R9WFs45RkJryLQJvITgJOWaAT5Bp38WOCIlcSsq60m5vy+0iLPF7zJYDhihG2uIdIlEQrbN7KqndxAqkyBi9Gw==} engines: {node: '>=18'} peerDependencies: '@tmagic/core': '>=1.5.0' @@ -2973,8 +2961,8 @@ packages: typescript: optional: true - '@tmagic/vue-runtime-help@1.0.0': - resolution: {integrity: sha512-dRNW56m7t9e+fDHVOgONz8xBI60rgCY+gxekyVP3oBq0JU8Sviuv8KVhM2YiMiTja6C/xTwBENSQLocYLV2UOw==} + '@tmagic/vue-runtime-help@1.1.0': + resolution: {integrity: sha512-iN2gkn5BGSchMYm0ItesgDFi8er4wbKeUdVVGl2G32ebDSpU9jM9iYpav0uxpjTbLqypQTrArtUpj1Uhy/gI3Q==} engines: {node: '>=18'} peerDependencies: '@tmagic/core': '>=1.5.0' @@ -8438,7 +8426,7 @@ snapshots: optionalDependencies: typescript: 5.7.3 - '@tmagic/react-runtime-help@0.0.4(@tmagic/core@1.5.9(typescript@5.7.3))(@tmagic/stage@1.5.9(@tmagic/core@1.5.9(typescript@5.7.3))(typescript@5.7.3))(lodash-es@4.17.21)(react@18.3.1)(typescript@5.7.3)': + '@tmagic/react-runtime-help@0.1.0(@tmagic/core@1.5.9(typescript@5.7.3))(@tmagic/stage@1.5.9(@tmagic/core@1.5.9(typescript@5.7.3))(typescript@5.7.3))(lodash-es@4.17.21)(react@18.3.1)(typescript@5.7.3)': dependencies: lodash-es: 4.17.21 react: 18.3.1 @@ -8561,7 +8549,7 @@ snapshots: optionalDependencies: typescript: 5.7.3 - '@tmagic/vue-runtime-help@1.0.0(@tmagic/core@1.5.9(typescript@5.7.3))(@tmagic/stage@1.5.9(@tmagic/core@1.5.9(typescript@5.7.3))(typescript@5.7.3))(@vue/composition-api@1.7.2(vue@2.7.16))(typescript@5.7.3)(vue@2.7.16)': + '@tmagic/vue-runtime-help@1.1.0(@tmagic/core@1.5.9(typescript@5.7.3))(@tmagic/stage@1.5.9(@tmagic/core@1.5.9(typescript@5.7.3))(typescript@5.7.3))(@vue/composition-api@1.7.2(vue@2.7.16))(typescript@5.7.3)(vue@2.7.16)': dependencies: vue: 2.7.16 vue-demi: 0.14.10(@vue/composition-api@1.7.2(vue@2.7.16))(vue@2.7.16) @@ -8571,7 +8559,7 @@ snapshots: '@vue/composition-api': 1.7.2(vue@2.7.16) typescript: 5.7.3 - '@tmagic/vue-runtime-help@1.0.0(@tmagic/core@1.5.9(typescript@5.7.3))(@tmagic/stage@1.5.9(@tmagic/core@1.5.9(typescript@5.7.3))(typescript@5.7.3))(@vue/composition-api@1.7.2(vue@3.5.13(typescript@5.7.3)))(typescript@5.7.3)(vue@3.5.13(typescript@5.7.3))': + '@tmagic/vue-runtime-help@1.1.0(@tmagic/core@1.5.9(typescript@5.7.3))(@tmagic/stage@1.5.9(@tmagic/core@1.5.9(typescript@5.7.3))(typescript@5.7.3))(@vue/composition-api@1.7.2(vue@3.5.13(typescript@5.7.3)))(typescript@5.7.3)(vue@3.5.13(typescript@5.7.3))': dependencies: vue: 3.5.13(typescript@5.7.3) vue-demi: 0.14.10(@vue/composition-api@1.7.2(vue@3.5.13(typescript@5.7.3)))(vue@3.5.13(typescript@5.7.3)) diff --git a/react-components/button/package.json b/react-components/button/package.json index ca177c89..47798e21 100644 --- a/react-components/button/package.json +++ b/react-components/button/package.json @@ -1,5 +1,5 @@ { - "version": "0.0.2", + "version": "0.1.0", "name": "@tmagic/react-button", "type": "module", "main": "src/index.ts", @@ -14,16 +14,13 @@ "url": "https://github.com/Tencent/tmagic-editor.git" }, "peerDependencies": { - "@tmagic/schema": "workspace:^", + "@tmagic/core": "workspace:^", "@tmagic/react-runtime-help": "workspace:^", "react": ">=18.3.1", "react-dom": ">=18.3.1", "typescript": "*" }, "peerDependenciesMeta": { - "@tmagic/schema": { - "optional": true - }, "typescript": { "optional": true } diff --git a/react-components/button/src/Button.tsx b/react-components/button/src/Button.tsx index e861531e..b5e6baab 100644 --- a/react-components/button/src/Button.tsx +++ b/react-components/button/src/Button.tsx @@ -18,8 +18,9 @@ import React from 'react'; +import type { Id, MComponent } from '@tmagic/core'; +import { COMMON_EVENT_PREFIX } from '@tmagic/core'; import { useApp } from '@tmagic/react-runtime-help'; -import type { Id, MComponent } from '@tmagic/schema'; interface ButtonSchema extends Omit { id?: Id; @@ -35,6 +36,7 @@ interface ButtonProps { containerIndex: number; iteratorIndex?: number[]; iteratorContainerId?: Id[]; + onClick: any; } const Page: React.FC = ({ @@ -46,10 +48,16 @@ const Page: React.FC = ({ iteratorIndex, iteratorContainerId, }) => { - const { app } = useApp({ config, iteratorIndex, iteratorContainerId }); + const { app, node } = useApp({ config, iteratorIndex, iteratorContainerId }); if (!app) return null; + const clickHandler = () => { + if (node && app) { + app.emit(`${COMMON_EVENT_PREFIX}click`, node); + } + }; + return ( diff --git a/react-components/button/src/event.ts b/react-components/button/src/event.ts index cdf87604..51bc8ffb 100644 --- a/react-components/button/src/event.ts +++ b/react-components/button/src/event.ts @@ -1,4 +1,6 @@ +import { COMMON_EVENT_PREFIX } from '@tmagic/core'; + export default { methods: [], - events: [], + events: [{ label: '点击', value: `${COMMON_EVENT_PREFIX}click` }], }; diff --git a/react-components/container/package.json b/react-components/container/package.json index b0297ee3..d4a92df0 100644 --- a/react-components/container/package.json +++ b/react-components/container/package.json @@ -1,5 +1,5 @@ { - "version": "0.0.2", + "version": "0.1.0", "name": "@tmagic/react-container", "type": "module", "main": "src/index.ts", @@ -14,17 +14,13 @@ "url": "https://github.com/Tencent/tmagic-editor.git" }, "peerDependencies": { - "@tmagic/utils": "workspace:^", - "@tmagic/schema": "workspace:^", + "@tmagic/core": "workspace:^", "@tmagic/react-runtime-help": "workspace:^", "react": ">=18.3.1", "react-dom": ">=18.3.1", "typescript": "*" }, "peerDependenciesMeta": { - "@tmagic/schema": { - "optional": true - }, "typescript": { "optional": true } diff --git a/react-components/container/src/Component.tsx b/react-components/container/src/Component.tsx new file mode 100644 index 00000000..4df7111a --- /dev/null +++ b/react-components/container/src/Component.tsx @@ -0,0 +1,66 @@ +/* + * Tencent is pleased to support the open source community by making TMagicEditor available. + * + * Copyright (C) 2023 THL A29 Limited, a Tencent company. All rights reserved. + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +import React, { useContext } from 'react'; + +import type TMagicApp from '@tmagic/core'; +import type { Id, MComponent } from '@tmagic/core'; +import { IS_DSL_NODE_KEY } from '@tmagic/core'; +import { AppContent, useComponentStatus, useNode } from '@tmagic/react-runtime-help'; + +interface ComponentProps { + config: Omit; + index: number; + iteratorIndex: number[]; + iteratorContainerId: Id[]; +} + +const Container: React.FC = (props) => { + const app: TMagicApp | undefined = useContext(AppContent); + + const node = useNode(props); + const MagicUiComp = app?.resolveComponent(props.config.type || 'container'); + + if (!MagicUiComp) return null; + + if (typeof props.config.display === 'function' && props.config.display({ app, node }) === false) { + return null; + } + + const { style, className } = useComponentStatus(props); + + return ( + + ); +}; + +Container.displayName = 'magic-ui-container-item'; + +export default Container; diff --git a/react-components/container/src/Container.tsx b/react-components/container/src/Container.tsx index 507e0073..7dc4b4d3 100644 --- a/react-components/container/src/Container.tsx +++ b/react-components/container/src/Container.tsx @@ -18,9 +18,11 @@ import React from 'react'; +import type { Id, MContainer, MNode } from '@tmagic/core'; +import { COMMON_EVENT_PREFIX } from '@tmagic/core'; import { useApp } from '@tmagic/react-runtime-help'; -import type { Id, MContainer, MNode } from '@tmagic/schema'; -import { IS_DSL_NODE_KEY } from '@tmagic/utils'; + +import Component from './Component'; interface ContainerSchema extends Omit { id?: Id; @@ -28,71 +30,53 @@ interface ContainerSchema extends Omit { } interface ContainerProps { + id?: Id; config: ContainerSchema; className: string; style: Record; - id: string; containerIndex: number; iteratorIndex: number[]; iteratorContainerId: Id[]; } const Container: React.FC = ({ - config, id, - style, + config, className, containerIndex, + style, iteratorIndex, iteratorContainerId, }) => { - const { app, display } = useApp({ config }); + const { app, node } = useApp({ config }); if (!app) return null; - const classNames = config[IS_DSL_NODE_KEY] ? [] : ['magic-ui-container']; - if (config.layout) { - classNames.push(`magic-layout-${config.layout}`); - } - if (className) { - classNames.push(className); - } + const clickHandler = () => { + if (node && app) { + app.emit(`${COMMON_EVENT_PREFIX}click`, node); + } + }; return (
- {config.items?.map((item: MNode, index: number) => { - // eslint-disable-next-line @typescript-eslint/naming-convention - const MagicUiComp = app.resolveComponent(item.type || 'container'); - - if (!MagicUiComp) return null; - - if (!display(item)) return null; - - const itemClassName = [`magic-ui-${item.type}`]; - if (item.className) { - itemClassName.push(item.className); - } - - return ( - - ); - })} + {config.items?.map((item: MNode, index: number) => ( + + ))}
); }; diff --git a/react-components/container/src/event.ts b/react-components/container/src/event.ts index cdf87604..51bc8ffb 100644 --- a/react-components/container/src/event.ts +++ b/react-components/container/src/event.ts @@ -1,4 +1,6 @@ +import { COMMON_EVENT_PREFIX } from '@tmagic/core'; + export default { methods: [], - events: [], + events: [{ label: '点击', value: `${COMMON_EVENT_PREFIX}click` }], }; diff --git a/react-components/container/src/formConfig.ts b/react-components/container/src/formConfig.ts index 6ad088c3..15b707ac 100644 --- a/react-components/container/src/formConfig.ts +++ b/react-components/container/src/formConfig.ts @@ -16,7 +16,7 @@ * limitations under the License. */ -import { getElById } from '@tmagic/utils'; +import { getElById } from '@tmagic/core'; export default [ { diff --git a/react-components/img/package.json b/react-components/img/package.json index 48b65bd6..52578c54 100644 --- a/react-components/img/package.json +++ b/react-components/img/package.json @@ -1,5 +1,5 @@ { - "version": "0.0.3", + "version": "0.1.0", "name": "@tmagic/react-img", "type": "module", "main": "src/index.ts", @@ -14,16 +14,13 @@ "url": "https://github.com/Tencent/tmagic-editor.git" }, "peerDependencies": { - "@tmagic/schema": "workspace:^", + "@tmagic/core": "workspace:^", "@tmagic/react-runtime-help": "workspace:^", "react": ">=18.3.1", "react-dom": ">=18.3.1", "typescript": "*" }, "peerDependenciesMeta": { - "@tmagic/schema": { - "optional": true - }, "typescript": { "optional": true } diff --git a/react-components/img/src/Img.tsx b/react-components/img/src/Img.tsx index 50bce662..538f9f3c 100644 --- a/react-components/img/src/Img.tsx +++ b/react-components/img/src/Img.tsx @@ -18,8 +18,8 @@ import React from 'react'; +import type { Id, MComponent } from '@tmagic/core'; import { useApp } from '@tmagic/react-runtime-help'; -import type { Id, MComponent } from '@tmagic/schema'; interface ImgSchema extends Omit { id?: Id; diff --git a/react-components/img/src/event.ts b/react-components/img/src/event.ts index cdf87604..51bc8ffb 100644 --- a/react-components/img/src/event.ts +++ b/react-components/img/src/event.ts @@ -1,4 +1,6 @@ +import { COMMON_EVENT_PREFIX } from '@tmagic/core'; + export default { methods: [], - events: [], + events: [{ label: '点击', value: `${COMMON_EVENT_PREFIX}click` }], }; diff --git a/react-components/iterator-container/package.json b/react-components/iterator-container/package.json index fa4f0734..537c5238 100644 --- a/react-components/iterator-container/package.json +++ b/react-components/iterator-container/package.json @@ -1,5 +1,5 @@ { - "version": "0.0.2", + "version": "0.1.0", "name": "@tmagic/react-iterator-container", "type": "module", "main": "src/index.ts", @@ -14,17 +14,13 @@ "url": "https://github.com/Tencent/tmagic-editor.git" }, "peerDependencies": { - "@tmagic/utils": "workspace:^", - "@tmagic/schema": "workspace:^", + "@tmagic/core": "workspace:^", "@tmagic/react-runtime-help": "workspace:^", "react": ">=18.3.1", "react-dom": ">=18.3.1", "typescript": "*" }, "peerDependenciesMeta": { - "@tmagic/schema": { - "optional": true - }, "typescript": { "optional": true } diff --git a/react-components/iterator-container/src/IteratorContainer.tsx b/react-components/iterator-container/src/IteratorContainer.tsx index 0686c7f4..9856d7ae 100644 --- a/react-components/iterator-container/src/IteratorContainer.tsx +++ b/react-components/iterator-container/src/IteratorContainer.tsx @@ -1,8 +1,13 @@ import React from 'react'; -import type { IteratorContainer as TMagicIteratorContainer } from '@tmagic/core'; +import { + COMMON_EVENT_PREFIX, + type Id, + type IteratorContainer as TMagicIteratorContainer, + type MIteratorContainer, + type MNode, +} from '@tmagic/core'; import { useApp } from '@tmagic/react-runtime-help'; -import type { Id, MIteratorContainer, MNode } from '@tmagic/schema'; interface IteratorContainerSchema extends Omit { id?: Id; @@ -36,7 +41,7 @@ const IteratorContainer: React.FC = ({ iteratorIndex, iteratorContainerId, }) => { - const { app } = useApp({ config, iteratorIndex, iteratorContainerId }); + const { app, node } = useApp({ config, iteratorIndex, iteratorContainerId }); let { iteratorData = [] } = config; const { itemConfig, dsField, items } = config; @@ -81,6 +86,12 @@ const IteratorContainer: React.FC = ({ }; }); + const clickHandler = () => { + if (node && app) { + app.emit(`${COMMON_EVENT_PREFIX}click`, node); + } + }; + return (
= ({ data-container-index={containerIndex} data-iterator-index={iteratorIndex} data-iterator-container-id={iteratorContainerId} + onClick={clickHandler} > {configs.map((config: any, index: number) => ( =18.3.1", "react-dom": ">=18.3.1", "typescript": "*" }, "peerDependenciesMeta": { - "@tmagic/schema": { - "optional": true - }, "typescript": { "optional": true } diff --git a/react-components/overlay/src/Overlay.tsx b/react-components/overlay/src/Overlay.tsx index b015333a..f1523efb 100644 --- a/react-components/overlay/src/Overlay.tsx +++ b/react-components/overlay/src/Overlay.tsx @@ -18,8 +18,8 @@ import React, { useEffect, useState } from 'react'; +import { type Id, IS_DSL_NODE_KEY, type MComponent, type MContainer, type MNode, type MPage } from '@tmagic/core'; import { useApp } from '@tmagic/react-runtime-help'; -import type { Id, MComponent, MContainer, MNode, MPage } from '@tmagic/schema'; interface OverlayProps { config: MComponent; @@ -93,11 +93,11 @@ const Overlay: React.FC = ({ return ( diff --git a/react-components/page-fragment-container/package.json b/react-components/page-fragment-container/package.json index b5b8b52d..c6372002 100644 --- a/react-components/page-fragment-container/package.json +++ b/react-components/page-fragment-container/package.json @@ -1,5 +1,5 @@ { - "version": "0.0.2", + "version": "0.1.0", "name": "@tmagic/react-page-fragment-container", "type": "module", "main": "src/index.ts", @@ -14,16 +14,13 @@ "url": "https://github.com/Tencent/tmagic-editor.git" }, "peerDependencies": { - "@tmagic/schema": "workspace:^", + "@tmagic/core": "workspace:^", "@tmagic/react-runtime-help": "workspace:^", "react": ">=18.3.1", "react-dom": ">=18.3.1", "typescript": "*" }, "peerDependenciesMeta": { - "@tmagic/schema": { - "optional": true - }, "typescript": { "optional": true } diff --git a/react-components/page-fragment-container/src/PageFragmentContainer.tsx b/react-components/page-fragment-container/src/PageFragmentContainer.tsx index 9bba6f33..abe98315 100644 --- a/react-components/page-fragment-container/src/PageFragmentContainer.tsx +++ b/react-components/page-fragment-container/src/PageFragmentContainer.tsx @@ -1,7 +1,7 @@ import React from 'react'; +import { type Id, IS_DSL_NODE_KEY, type MComponent, type MNode } from '@tmagic/core'; import { useApp } from '@tmagic/react-runtime-help'; -import type { Id, MComponent, MNode } from '@tmagic/schema'; interface PageFragmentContainerProps { config: MComponent; @@ -59,14 +59,14 @@ const PageFragmentContainer: React.FC = ({ return (
- +
); }; diff --git a/react-components/page-fragment/package.json b/react-components/page-fragment/package.json index e3dd2f15..a418c378 100644 --- a/react-components/page-fragment/package.json +++ b/react-components/page-fragment/package.json @@ -1,5 +1,5 @@ { - "version": "0.0.2", + "version": "0.1.0", "name": "@tmagic/react-page-fragment", "type": "module", "main": "src/index.ts", @@ -14,17 +14,13 @@ "url": "https://github.com/Tencent/tmagic-editor.git" }, "peerDependencies": { - "@tmagic/utils": "workspace:^", - "@tmagic/schema": "workspace:^", + "@tmagic/core": "workspace:^", "@tmagic/react-runtime-help": "workspace:^", "react": ">=18.3.1", "react-dom": ">=18.3.1", "typescript": "*" }, "peerDependenciesMeta": { - "@tmagic/schema": { - "optional": true - }, "typescript": { "optional": true } diff --git a/react-components/page-fragment/src/PageFragment.tsx b/react-components/page-fragment/src/PageFragment.tsx index 31a2c66d..a7557236 100644 --- a/react-components/page-fragment/src/PageFragment.tsx +++ b/react-components/page-fragment/src/PageFragment.tsx @@ -1,7 +1,7 @@ import React from 'react'; +import { IS_DSL_NODE_KEY, type MPageFragment } from '@tmagic/core'; import { useApp } from '@tmagic/react-runtime-help'; -import type { MPageFragment } from '@tmagic/schema'; interface PageFragmentProps { config: MPageFragment; @@ -21,7 +21,13 @@ const PageFragment: React.FC = ({ config }) => { classNames.push(config.className); } - return ; + return ( + + ); }; PageFragment.displayName = 'magic-ui-page-fragment'; diff --git a/react-components/page-fragment/src/formConfig.ts b/react-components/page-fragment/src/formConfig.ts index c1412758..8b0c6715 100644 --- a/react-components/page-fragment/src/formConfig.ts +++ b/react-components/page-fragment/src/formConfig.ts @@ -16,7 +16,7 @@ * limitations under the License. */ -import { getElById } from '@tmagic/utils'; +import { getElById } from '@tmagic/core'; export default [ { diff --git a/react-components/page/package.json b/react-components/page/package.json index 9ee34c1c..fff832c8 100644 --- a/react-components/page/package.json +++ b/react-components/page/package.json @@ -1,5 +1,5 @@ { - "version": "0.0.2", + "version": "0.1.0", "name": "@tmagic/react-page", "type": "module", "main": "src/index.ts", @@ -14,17 +14,13 @@ "url": "https://github.com/Tencent/tmagic-editor.git" }, "peerDependencies": { - "@tmagic/utils": "workspace:^", - "@tmagic/schema": "workspace:^", + "@tmagic/core": "workspace:^", "@tmagic/react-runtime-help": "workspace:^", "react": ">=18.3.1", "react-dom": ">=18.3.1", "typescript": "*" }, "peerDependenciesMeta": { - "@tmagic/schema": { - "optional": true - }, "typescript": { "optional": true } diff --git a/react-components/page/src/Page.tsx b/react-components/page/src/Page.tsx index 96436ac1..21ec69b1 100644 --- a/react-components/page/src/Page.tsx +++ b/react-components/page/src/Page.tsx @@ -18,8 +18,9 @@ import React from 'react'; -import { useApp } from '@tmagic/react-runtime-help'; -import type { MPage } from '@tmagic/schema'; +import type { MPage } from '@tmagic/core'; +import { IS_DSL_NODE_KEY } from '@tmagic/core'; +import { useApp, useComponentStatus } from '@tmagic/react-runtime-help'; interface PageProps { config: MPage; @@ -27,7 +28,7 @@ interface PageProps { const Page: React.FC = ({ config }) => { const { app } = useApp({ - config, + config: { ...config, [IS_DSL_NODE_KEY]: true }, methods: { refresh: () => window.location.reload(), }, @@ -37,12 +38,16 @@ const Page: React.FC = ({ config }) => { const MagicUiComp = app.resolveComponent('container'); - const classNames = ['magic-ui-page']; - if (config.className) { - classNames.push(config.className); - } + const { style, className } = useComponentStatus({ config }); - return ; + return ( + + ); }; Page.displayName = 'magic-ui-page'; diff --git a/react-components/page/src/formConfig.ts b/react-components/page/src/formConfig.ts index c80c46cd..cdff7ddc 100644 --- a/react-components/page/src/formConfig.ts +++ b/react-components/page/src/formConfig.ts @@ -16,7 +16,7 @@ * limitations under the License. */ -import { getElById } from '@tmagic/utils'; +import { getElById } from '@tmagic/core'; export default [ { diff --git a/react-components/qrcode/package.json b/react-components/qrcode/package.json index ab4fd520..147444ab 100644 --- a/react-components/qrcode/package.json +++ b/react-components/qrcode/package.json @@ -1,5 +1,5 @@ { - "version": "0.0.2", + "version": "0.1.0", "name": "@tmagic/react-qrcode", "type": "module", "main": "src/index.ts", @@ -17,16 +17,13 @@ "qrcode": "^1.5.0" }, "peerDependencies": { - "@tmagic/schema": "workspace:^", + "@tmagic/core": "workspace:^", "@tmagic/react-runtime-help": "workspace:^", "react": ">=18.3.1", "react-dom": ">=18.3.1", "typescript": "*" }, "peerDependenciesMeta": { - "@tmagic/schema": { - "optional": true - }, "typescript": { "optional": true } diff --git a/react-components/qrcode/src/QrCode.tsx b/react-components/qrcode/src/QrCode.tsx index c28c2a83..8a1e50cf 100644 --- a/react-components/qrcode/src/QrCode.tsx +++ b/react-components/qrcode/src/QrCode.tsx @@ -19,6 +19,7 @@ import React, { useEffect, useState } from 'react'; import QRCode from 'qrcode'; +import { COMMON_EVENT_PREFIX } from '@tmagic/core'; import { useApp } from '@tmagic/react-runtime-help'; import type { Id, MComponent } from '@tmagic/schema'; @@ -47,7 +48,7 @@ const QrCode: React.FC = ({ iteratorIndex, iteratorContainerId, }) => { - const { app } = useApp({ config }); + const { app, node } = useApp({ config }); if (!app) return null; @@ -60,6 +61,12 @@ const QrCode: React.FC = ({ }); }, [config.url]); + const clickHandler = () => { + if (node && app) { + app.emit(`${COMMON_EVENT_PREFIX}click`, node); + } + }; + return ( = ({ data-tmagic-iterator-index={iteratorIndex} data-tmagic-iterator-container-id={iteratorContainerId} src={imgSrc} + onClick={clickHandler} /> ); }; diff --git a/react-components/qrcode/src/event.ts b/react-components/qrcode/src/event.ts index cdf87604..51bc8ffb 100644 --- a/react-components/qrcode/src/event.ts +++ b/react-components/qrcode/src/event.ts @@ -1,4 +1,6 @@ +import { COMMON_EVENT_PREFIX } from '@tmagic/core'; + export default { methods: [], - events: [], + events: [{ label: '点击', value: `${COMMON_EVENT_PREFIX}click` }], }; diff --git a/react-components/text/package.json b/react-components/text/package.json index 2b899abe..283af071 100644 --- a/react-components/text/package.json +++ b/react-components/text/package.json @@ -1,5 +1,5 @@ { - "version": "0.0.2", + "version": "0.1.0", "name": "@tmagic/react-text", "type": "module", "main": "src/index.ts", @@ -14,16 +14,13 @@ "url": "https://github.com/Tencent/tmagic-editor.git" }, "peerDependencies": { - "@tmagic/schema": "workspace:^", + "@tmagic/core": "workspace:^", "@tmagic/react-runtime-help": "workspace:^", "react": ">=18.3.1", "react-dom": ">=18.3.1", "typescript": "*" }, "peerDependenciesMeta": { - "@tmagic/schema": { - "optional": true - }, "typescript": { "optional": true } diff --git a/react-components/text/src/Text.tsx b/react-components/text/src/Text.tsx index 78fbb835..aa5fc047 100644 --- a/react-components/text/src/Text.tsx +++ b/react-components/text/src/Text.tsx @@ -18,8 +18,9 @@ import React from 'react'; +import type { Id, MComponent } from '@tmagic/core'; +import { COMMON_EVENT_PREFIX } from '@tmagic/core'; import { useApp } from '@tmagic/react-runtime-help'; -import type { Id, MComponent } from '@tmagic/schema'; interface TextSchema extends Omit { id?: Id; @@ -46,18 +47,25 @@ const Text: React.FC = ({ iteratorIndex, iteratorContainerId, }) => { - const { app } = useApp({ config, iteratorIndex, iteratorContainerId }); + const { app, node } = useApp({ config, iteratorIndex, iteratorContainerId }); if (!app) return null; + const clickHandler = () => { + if (node && app) { + app.emit(`${COMMON_EVENT_PREFIX}click`, node); + } + }; + return (

{config.text}

diff --git a/react-components/text/src/event.ts b/react-components/text/src/event.ts index cdf87604..51bc8ffb 100644 --- a/react-components/text/src/event.ts +++ b/react-components/text/src/event.ts @@ -1,4 +1,6 @@ +import { COMMON_EVENT_PREFIX } from '@tmagic/core'; + export default { methods: [], - events: [], + events: [{ label: '点击', value: `${COMMON_EVENT_PREFIX}click` }], }; diff --git a/vue-components/button/package.json b/vue-components/button/package.json index 4c2b1255..81d4ba7e 100644 --- a/vue-components/button/package.json +++ b/vue-components/button/package.json @@ -1,5 +1,5 @@ { - "version": "0.0.5", + "version": "0.1.1", "name": "@tmagic/vue-button", "type": "module", "main": "src/index.ts", diff --git a/vue-components/button/src/event.ts b/vue-components/button/src/event.ts index cdf87604..51bc8ffb 100644 --- a/vue-components/button/src/event.ts +++ b/vue-components/button/src/event.ts @@ -1,4 +1,6 @@ +import { COMMON_EVENT_PREFIX } from '@tmagic/core'; + export default { methods: [], - events: [], + events: [{ label: '点击', value: `${COMMON_EVENT_PREFIX}click` }], }; diff --git a/vue-components/button/src/index.vue b/vue-components/button/src/index.vue index dfb1c1d4..d1ccec23 100644 --- a/vue-components/button/src/index.vue +++ b/vue-components/button/src/index.vue @@ -1,5 +1,5 @@ diff --git a/vue-components/container/package.json b/vue-components/container/package.json index d46c93bd..120f81b6 100644 --- a/vue-components/container/package.json +++ b/vue-components/container/package.json @@ -1,5 +1,5 @@ { - "version": "1.0.0", + "version": "1.1.0", "name": "@tmagic/vue-container", "type": "module", "main": "src/index.ts", diff --git a/vue-components/container/src/Component.ts b/vue-components/container/src/Component.ts index c9d110d6..b6388cd6 100644 --- a/vue-components/container/src/Component.ts +++ b/vue-components/container/src/Component.ts @@ -1,13 +1,15 @@ -import { defineComponent, h, inject, type PropType } from 'vue-demi'; +import { defineComponent, h, inject, type PropType, provide, resolveDirective, withDirectives } from 'vue-demi'; import type TMagicApp from '@tmagic/core'; -import { Id, IS_DSL_NODE_KEY, MComponent, toLine } from '@tmagic/core'; -import { useComponent, type UserRenderFunction } from '@tmagic/vue-runtime-help'; +import { Id, IS_DSL_NODE_KEY, MComponent } from '@tmagic/core'; +import { useComponent, useComponentStatus, useNode, type UserRenderFunction } from '@tmagic/vue-runtime-help'; export default defineComponent({ + name: 'tmagic-container-item', + props: { config: { - type: Object as PropType, + type: Object as PropType>, required: true, }, index: Number, @@ -22,21 +24,55 @@ export default defineComponent({ }, setup(props) { - const userRender = inject('userRender', ({ h, type, props, attrs, style, className }) => - h(type, { ...props, ...attrs, style, class: className }), + const userRender = inject( + 'userRender', + ({ h, type, props = {}, attrs = {}, style, className, on, directives = [] }) => { + const options: Record = { + ...props, + ...attrs, + style, + class: className, + }; + if (on) { + for (const [key, handler] of Object.entries(on)) { + options[`on${key[0].toLocaleUpperCase()}${key.substring(1)}`] = handler; + } + } + + if (directives.length) { + return withDirectives( + h(type, options), + directives.map((directive) => [resolveDirective(directive.name), directive.value, directive.modifiers]), + ); + } + + return h(type, options); + }, ); const app = inject('app'); + const node = useNode(props); - return () => - userRender({ + const componentStatusStore = useComponentStatus(props); + + provide('componentStatusStore', componentStatusStore); + + const { style, className } = componentStatusStore; + + return () => { + if (props.config.visible === false) return null; + if (props.config.condResult === false) return null; + + if (typeof props.config.display === 'function' && props.config.display({ app, node }) === false) { + return null; + } + + return userRender({ h, config: props.config, type: useComponent({ componentType: props.config.type, app }), - style: app?.transformStyle(props.config.style || {}), - className: props.config.className - ? `${props.config.className} magic-ui-${toLine(props.config.type)}` - : `magic-ui-${toLine(props.config.type)}`, + style: style.value, + className: className.value, props: { config: { ...props.config, [IS_DSL_NODE_KEY]: true }, containerIndex: props.index, @@ -45,10 +81,11 @@ export default defineComponent({ }, attrs: { 'data-tmagic-id': props.config.id, - 'data-tmagic-iterator-index': props.iteratorIndex, - 'data-tmagic-iterator-container-id': props.iteratorContainerId, + 'data-tmagic-iterator-index': props.iteratorIndex.join(',') || undefined, + 'data-tmagic-iterator-container-id': props.iteratorContainerId.join(',') || undefined, 'data-container-index': props.index, }, }); + }; }, }); diff --git a/vue-components/container/src/Container.vue b/vue-components/container/src/Container.vue index 31397287..ad2561fc 100644 --- a/vue-components/container/src/Container.vue +++ b/vue-components/container/src/Container.vue @@ -1,10 +1,8 @@