mirror of
https://github.com/Tencent/tmagic-editor.git
synced 2025-04-04 06:02:45 +08:00
feat(vue-components,react-components): 增加点击事件，使用组件状态hook
This commit is contained in:
roymondchen
parent
8d0040da53
commit
0736646c63
98
pnpm-lock.yaml
generated
98
pnpm-lock.yaml
generated
@ -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))
|
||||
|
||||
@ -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
|
||||
}
|
||||
|
||||
@ -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<MComponent, 'id'> {
|
||||
id?: Id;
|
||||
@ -35,6 +36,7 @@ interface ButtonProps {
|
||||
containerIndex: number;
|
||||
iteratorIndex?: number[];
|
||||
iteratorContainerId?: Id[];
|
||||
onClick: any;
|
||||
}
|
||||
|
||||
const Page: React.FC<ButtonProps> = ({
|
||||
@ -46,10 +48,16 @@ const Page: React.FC<ButtonProps> = ({
|
||||
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 (
|
||||
<button
|
||||
className={className}
|
||||
@ -58,6 +66,7 @@ const Page: React.FC<ButtonProps> = ({
|
||||
data-tmagic-container-index={containerIndex}
|
||||
data-tmagic-iterator-index={iteratorIndex}
|
||||
data-tmagic-iterator-container-id={iteratorContainerId}
|
||||
onClick={clickHandler}
|
||||
>
|
||||
{config.text || ''}
|
||||
</button>
|
||||
|
||||
@ -1,4 +1,6 @@
|
||||
import { COMMON_EVENT_PREFIX } from '@tmagic/core';
|
||||
|
||||
export default {
|
||||
methods: [],
|
||||
events: [],
|
||||
events: [{ label: '点击', value: `${COMMON_EVENT_PREFIX}click` }],
|
||||
};
|
||||
|
||||
@ -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
|
||||
}
|
||||
|
||||
66
react-components/container/src/Component.tsx
Normal file
66
react-components/container/src/Component.tsx
Normal file
@ -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<MComponent, 'id'>;
|
||||
index: number;
|
||||
iteratorIndex: number[];
|
||||
iteratorContainerId: Id[];
|
||||
}
|
||||
|
||||
const Container: React.FC<ComponentProps> = (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 (
|
||||
<MagicUiComp
|
||||
data-tmagic-id={`${props.config.id || ''}`}
|
||||
data-container-index={props.index}
|
||||
data-tmagic-iterator-index={props.iteratorIndex}
|
||||
data-tmagic-iterator-container-id={props.iteratorContainerId}
|
||||
containerIndex={props.index}
|
||||
iteratorIndex={props.iteratorIndex}
|
||||
iteratorContainerId={props.iteratorContainerId}
|
||||
key={props.config.id ?? props.index}
|
||||
config={{ ...props.config, [IS_DSL_NODE_KEY]: true }}
|
||||
className={className}
|
||||
style={style}
|
||||
></MagicUiComp>
|
||||
);
|
||||
};
|
||||
|
||||
Container.displayName = 'magic-ui-container-item';
|
||||
|
||||
export default Container;
|
||||
@ -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<MContainer, 'id'> {
|
||||
id?: Id;
|
||||
@ -28,71 +30,53 @@ interface ContainerSchema extends Omit<MContainer, 'id'> {
|
||||
}
|
||||
|
||||
interface ContainerProps {
|
||||
id?: Id;
|
||||
config: ContainerSchema;
|
||||
className: string;
|
||||
style: Record<string, any>;
|
||||
id: string;
|
||||
containerIndex: number;
|
||||
iteratorIndex: number[];
|
||||
iteratorContainerId: Id[];
|
||||
}
|
||||
|
||||
const Container: React.FC<ContainerProps> = ({
|
||||
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 (
|
||||
<div
|
||||
data-tmagic-id={`${id || ''}`}
|
||||
data-tmagic-id={`${id || config.id || ''}`}
|
||||
data-container-index={containerIndex}
|
||||
data-tmagic-iterator-index={iteratorIndex}
|
||||
data-tmagic-iterator-container-id={iteratorContainerId}
|
||||
className={classNames.join(' ')}
|
||||
style={config[IS_DSL_NODE_KEY] ? style : app.transformStyle(config.style || {})}
|
||||
className={className}
|
||||
style={style}
|
||||
onClick={clickHandler}
|
||||
>
|
||||
{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 (
|
||||
<MagicUiComp
|
||||
id={`${item.id || ''}`}
|
||||
containerIndex={index}
|
||||
iteratorIndex={iteratorIndex}
|
||||
iteratorContainerId={iteratorContainerId}
|
||||
key={item.id ?? index}
|
||||
config={{ ...item, [IS_DSL_NODE_KEY]: true }}
|
||||
className={itemClassName.join(' ')}
|
||||
style={app.transformStyle(item.style || {})}
|
||||
></MagicUiComp>
|
||||
);
|
||||
})}
|
||||
{config.items?.map((item: MNode, index: number) => (
|
||||
<Component
|
||||
key={item.id ?? index}
|
||||
config={item}
|
||||
index={index}
|
||||
iteratorIndex={iteratorIndex}
|
||||
iteratorContainerId={iteratorContainerId}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
@ -1,4 +1,6 @@
|
||||
import { COMMON_EVENT_PREFIX } from '@tmagic/core';
|
||||
|
||||
export default {
|
||||
methods: [],
|
||||
events: [],
|
||||
events: [{ label: '点击', value: `${COMMON_EVENT_PREFIX}click` }],
|
||||
};
|
||||
|
||||
@ -16,7 +16,7 @@
|
||||
* limitations under the License.
|
||||
*/
|
||||
|
||||
import { getElById } from '@tmagic/utils';
|
||||
import { getElById } from '@tmagic/core';
|
||||
|
||||
export default [
|
||||
{
|
||||
|
||||
@ -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
|
||||
}
|
||||
|
||||
@ -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<MComponent, 'id'> {
|
||||
id?: Id;
|
||||
|
||||
@ -1,4 +1,6 @@
|
||||
import { COMMON_EVENT_PREFIX } from '@tmagic/core';
|
||||
|
||||
export default {
|
||||
methods: [],
|
||||
events: [],
|
||||
events: [{ label: '点击', value: `${COMMON_EVENT_PREFIX}click` }],
|
||||
};
|
||||
|
||||
@ -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
|
||||
}
|
||||
|
||||
@ -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<MIteratorContainer, 'id'> {
|
||||
id?: Id;
|
||||
@ -36,7 +41,7 @@ const IteratorContainer: React.FC<IteratorContainerProps> = ({
|
||||
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<IteratorContainerProps> = ({
|
||||
};
|
||||
});
|
||||
|
||||
const clickHandler = () => {
|
||||
if (node && app) {
|
||||
app.emit(`${COMMON_EVENT_PREFIX}click`, node);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div
|
||||
className={className}
|
||||
@ -89,6 +100,7 @@ const IteratorContainer: React.FC<IteratorContainerProps> = ({
|
||||
data-container-index={containerIndex}
|
||||
data-iterator-index={iteratorIndex}
|
||||
data-iterator-container-id={iteratorContainerId}
|
||||
onClick={clickHandler}
|
||||
>
|
||||
{configs.map((config: any, index: number) => (
|
||||
<MagicUiComp
|
||||
|
||||
@ -1,4 +1,6 @@
|
||||
import { COMMON_EVENT_PREFIX } from '@tmagic/core';
|
||||
|
||||
export default {
|
||||
methods: [],
|
||||
events: [],
|
||||
events: [{ label: '点击', value: `${COMMON_EVENT_PREFIX}click` }],
|
||||
};
|
||||
|
||||
@ -15,8 +15,7 @@
|
||||
* See the License for the specific language governing permissions and
|
||||
* limitations under the License.
|
||||
*/
|
||||
import { NODE_CONDS_KEY } from '@tmagic/schema';
|
||||
import { DATA_SOURCE_FIELDS_SELECT_VALUE_PREFIX } from '@tmagic/utils';
|
||||
import { DATA_SOURCE_FIELDS_SELECT_VALUE_PREFIX, NODE_CONDS_KEY } from '@tmagic/core';
|
||||
|
||||
export default [
|
||||
{
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
{
|
||||
"version": "0.0.2",
|
||||
"version": "0.1.0",
|
||||
"name": "@tmagic/react-overlay",
|
||||
"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
|
||||
}
|
||||
|
||||
@ -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<OverlayProps> = ({
|
||||
|
||||
return (
|
||||
<MagicUiComp
|
||||
id={id}
|
||||
data-tmagic-id={`${id || config.id || ''}`}
|
||||
containerIndex={containerIndex}
|
||||
iteratorIndex={iteratorIndex}
|
||||
iteratorContainerId={iteratorContainerId}
|
||||
config={config}
|
||||
config={{ ...config, [IS_DSL_NODE_KEY]: false }}
|
||||
className={className}
|
||||
style={style}
|
||||
></MagicUiComp>
|
||||
|
||||
@ -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
|
||||
}
|
||||
|
||||
@ -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<PageFragmentContainerProps> = ({
|
||||
|
||||
return (
|
||||
<div
|
||||
data-tmagic-id={`${id || ''}`}
|
||||
data-tmagic-id={`${id || config.id || ''}`}
|
||||
data-container-index={containerIndex}
|
||||
data-tmagic-iterator-index={iteratorIndex}
|
||||
data-tmagic-iterator-container-id={iteratorContainerId}
|
||||
className={classNames.join(' ')}
|
||||
style={style}
|
||||
>
|
||||
<MagicUiContainer config={containerConfig}></MagicUiContainer>
|
||||
<MagicUiContainer config={{ ...containerConfig, [IS_DSL_NODE_KEY]: false }}></MagicUiContainer>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
@ -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
|
||||
}
|
||||
|
||||
@ -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<PageFragmentProps> = ({ config }) => {
|
||||
classNames.push(config.className);
|
||||
}
|
||||
|
||||
return <MagicUiComp config={config} id={config.id} className={classNames.join(' ')}></MagicUiComp>;
|
||||
return (
|
||||
<MagicUiComp
|
||||
config={{ ...config, [IS_DSL_NODE_KEY]: false }}
|
||||
id={config.id}
|
||||
className={classNames.join(' ')}
|
||||
></MagicUiComp>
|
||||
);
|
||||
};
|
||||
|
||||
PageFragment.displayName = 'magic-ui-page-fragment';
|
||||
|
||||
@ -16,7 +16,7 @@
|
||||
* limitations under the License.
|
||||
*/
|
||||
|
||||
import { getElById } from '@tmagic/utils';
|
||||
import { getElById } from '@tmagic/core';
|
||||
|
||||
export default [
|
||||
{
|
||||
|
||||
@ -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
|
||||
}
|
||||
|
||||
@ -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<PageProps> = ({ 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<PageProps> = ({ config }) => {
|
||||
|
||||
const MagicUiComp = app.resolveComponent('container');
|
||||
|
||||
const classNames = ['magic-ui-page'];
|
||||
if (config.className) {
|
||||
classNames.push(config.className);
|
||||
}
|
||||
const { style, className } = useComponentStatus({ config });
|
||||
|
||||
return <MagicUiComp config={config} id={config.id} className={classNames.join(' ')}></MagicUiComp>;
|
||||
return (
|
||||
<MagicUiComp
|
||||
config={{ ...config, [IS_DSL_NODE_KEY]: false }}
|
||||
id={config.id}
|
||||
className={className}
|
||||
style={style}
|
||||
></MagicUiComp>
|
||||
);
|
||||
};
|
||||
|
||||
Page.displayName = 'magic-ui-page';
|
||||
|
||||
@ -16,7 +16,7 @@
|
||||
* limitations under the License.
|
||||
*/
|
||||
|
||||
import { getElById } from '@tmagic/utils';
|
||||
import { getElById } from '@tmagic/core';
|
||||
|
||||
export default [
|
||||
{
|
||||
|
||||
@ -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
|
||||
}
|
||||
|
||||
@ -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<QrCodeProps> = ({
|
||||
iteratorIndex,
|
||||
iteratorContainerId,
|
||||
}) => {
|
||||
const { app } = useApp({ config });
|
||||
const { app, node } = useApp({ config });
|
||||
|
||||
if (!app) return null;
|
||||
|
||||
@ -60,6 +61,12 @@ const QrCode: React.FC<QrCodeProps> = ({
|
||||
});
|
||||
}, [config.url]);
|
||||
|
||||
const clickHandler = () => {
|
||||
if (node && app) {
|
||||
app.emit(`${COMMON_EVENT_PREFIX}click`, node);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<img
|
||||
className={className}
|
||||
@ -69,6 +76,7 @@ const QrCode: React.FC<QrCodeProps> = ({
|
||||
data-tmagic-iterator-index={iteratorIndex}
|
||||
data-tmagic-iterator-container-id={iteratorContainerId}
|
||||
src={imgSrc}
|
||||
onClick={clickHandler}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
@ -1,4 +1,6 @@
|
||||
import { COMMON_EVENT_PREFIX } from '@tmagic/core';
|
||||
|
||||
export default {
|
||||
methods: [],
|
||||
events: [],
|
||||
events: [{ label: '点击', value: `${COMMON_EVENT_PREFIX}click` }],
|
||||
};
|
||||
|
||||
@ -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
|
||||
}
|
||||
|
||||
@ -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<MComponent, 'id'> {
|
||||
id?: Id;
|
||||
@ -46,18 +47,25 @@ const Text: React.FC<TextProps> = ({
|
||||
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 (
|
||||
<p
|
||||
className={className}
|
||||
style={style}
|
||||
data-tmagic-id={id}
|
||||
data-tmagic-id={`${id || config.id || ''}`}
|
||||
data-tmagic-container-index={containerIndex}
|
||||
data-tmagic-iterator-index={iteratorIndex}
|
||||
data-tmagic-iterator-container-id={iteratorContainerId}
|
||||
onClick={clickHandler}
|
||||
>
|
||||
{config.text}
|
||||
</p>
|
||||
|
||||
@ -1,4 +1,6 @@
|
||||
import { COMMON_EVENT_PREFIX } from '@tmagic/core';
|
||||
|
||||
export default {
|
||||
methods: [],
|
||||
events: [],
|
||||
events: [{ label: '点击', value: `${COMMON_EVENT_PREFIX}click` }],
|
||||
};
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
{
|
||||
"version": "0.0.5",
|
||||
"version": "0.1.1",
|
||||
"name": "@tmagic/vue-button",
|
||||
"type": "module",
|
||||
"main": "src/index.ts",
|
||||
|
||||
@ -1,4 +1,6 @@
|
||||
import { COMMON_EVENT_PREFIX } from '@tmagic/core';
|
||||
|
||||
export default {
|
||||
methods: [],
|
||||
events: [],
|
||||
events: [{ label: '点击', value: `${COMMON_EVENT_PREFIX}click` }],
|
||||
};
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<button>
|
||||
<button @click="clickHandler">
|
||||
<slot>
|
||||
{{ config?.text || '' }}
|
||||
</slot>
|
||||
@ -7,10 +7,10 @@
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { defineComponent, type PropType } from 'vue-demi';
|
||||
import { defineComponent, inject, type PropType } from 'vue-demi';
|
||||
|
||||
import type { Id, MComponent } from '@tmagic/core';
|
||||
import { useApp } from '@tmagic/vue-runtime-help';
|
||||
import { COMMON_EVENT_PREFIX, type Id, type MComponent } from '@tmagic/core';
|
||||
import { useApp, useComponentStatus } from '@tmagic/vue-runtime-help';
|
||||
|
||||
interface ButtonSchema extends Omit<MComponent, 'id'> {
|
||||
id?: Id;
|
||||
@ -28,6 +28,7 @@ export default defineComponent({
|
||||
},
|
||||
iteratorIndex: Array as PropType<number[]>,
|
||||
iteratorContainerId: Array as PropType<Id[]>,
|
||||
containerIndex: Number,
|
||||
model: {
|
||||
type: Object,
|
||||
default: () => ({}),
|
||||
@ -35,12 +36,21 @@ export default defineComponent({
|
||||
},
|
||||
|
||||
setup(props) {
|
||||
useApp({
|
||||
config: props.config,
|
||||
methods: {},
|
||||
iteratorContainerId: props.iteratorContainerId,
|
||||
iteratorIndex: props.iteratorIndex,
|
||||
});
|
||||
const { setStatus } = inject<ReturnType<typeof useComponentStatus>>('componentStatusStore')!;
|
||||
|
||||
setStatus('disabled');
|
||||
|
||||
const { app, node } = useApp(props);
|
||||
|
||||
const clickHandler = () => {
|
||||
if (app && node) {
|
||||
app.emit(`${COMMON_EVENT_PREFIX}click`, node);
|
||||
}
|
||||
};
|
||||
|
||||
return {
|
||||
clickHandler,
|
||||
};
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
{
|
||||
"version": "1.0.0",
|
||||
"version": "1.1.0",
|
||||
"name": "@tmagic/vue-container",
|
||||
"type": "module",
|
||||
"main": "src/index.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<MComponent>,
|
||||
type: Object as PropType<Omit<MComponent, 'id'>>,
|
||||
required: true,
|
||||
},
|
||||
index: Number,
|
||||
@ -22,21 +24,55 @@ export default defineComponent({
|
||||
},
|
||||
|
||||
setup(props) {
|
||||
const userRender = inject<UserRenderFunction>('userRender', ({ h, type, props, attrs, style, className }) =>
|
||||
h(type, { ...props, ...attrs, style, class: className }),
|
||||
const userRender = inject<UserRenderFunction>(
|
||||
'userRender',
|
||||
({ h, type, props = {}, attrs = {}, style, className, on, directives = [] }) => {
|
||||
const options: Record<string, any> = {
|
||||
...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<TMagicApp>('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,
|
||||
},
|
||||
});
|
||||
};
|
||||
},
|
||||
});
|
||||
|
||||
@ -1,10 +1,8 @@
|
||||
<template>
|
||||
<div v-if="display(config)" :class="className" :style="style">
|
||||
<div @click="clickHandler">
|
||||
<slot>
|
||||
<template v-for="(item, index) in config.items">
|
||||
<template v-for="(item, index) in config.items" :key="item.id">
|
||||
<ItemComponent
|
||||
v-if="display(item)"
|
||||
:key="item.id"
|
||||
:config="item"
|
||||
:index="index"
|
||||
:iterator-index="iteratorIndex"
|
||||
@ -16,11 +14,11 @@
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { computed, defineComponent, type PropType } from 'vue-demi';
|
||||
import { defineComponent, inject, type PropType } from 'vue-demi';
|
||||
|
||||
import type { Id, MContainer } from '@tmagic/core';
|
||||
import { IS_DSL_NODE_KEY } from '@tmagic/core';
|
||||
import { useApp } from '@tmagic/vue-runtime-help';
|
||||
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 ItemComponent from './Component';
|
||||
|
||||
@ -45,6 +43,7 @@ export default defineComponent({
|
||||
type: Array as PropType<Id[]>,
|
||||
default: () => [],
|
||||
},
|
||||
containerIndex: Number,
|
||||
model: {
|
||||
type: Object,
|
||||
default: () => ({}),
|
||||
@ -54,37 +53,18 @@ export default defineComponent({
|
||||
components: { ItemComponent },
|
||||
|
||||
setup(props) {
|
||||
const { display, app } = useApp({
|
||||
config: props.config,
|
||||
iteratorContainerId: props.iteratorContainerId,
|
||||
iteratorIndex: props.iteratorIndex,
|
||||
methods: {},
|
||||
});
|
||||
const app = inject<TMagicApp>('app');
|
||||
const node = useNode(props, app);
|
||||
registerNodeHooks(node);
|
||||
|
||||
const className = computed(() => {
|
||||
const list = ['magic-ui-container'];
|
||||
if (props.config.layout) {
|
||||
list.push(`magic-layout-${props.config.layout}`);
|
||||
const clickHandler = () => {
|
||||
if (app && node) {
|
||||
app.emit(`${COMMON_EVENT_PREFIX}click`, node);
|
||||
}
|
||||
if (props.config.className) {
|
||||
list.push(props.config.className);
|
||||
}
|
||||
return list.join(' ');
|
||||
});
|
||||
|
||||
const style = computed(() => {
|
||||
if (props.config[IS_DSL_NODE_KEY]) {
|
||||
return {};
|
||||
}
|
||||
return app?.transformStyle(props.config.style || {});
|
||||
});
|
||||
};
|
||||
|
||||
return {
|
||||
app,
|
||||
className,
|
||||
style,
|
||||
|
||||
display,
|
||||
clickHandler,
|
||||
};
|
||||
},
|
||||
});
|
||||
|
||||
@ -1,4 +1,6 @@
|
||||
import { COMMON_EVENT_PREFIX } from '@tmagic/core';
|
||||
|
||||
export default {
|
||||
methods: [],
|
||||
events: [],
|
||||
events: [{ label: '点击', value: `${COMMON_EVENT_PREFIX}click` }],
|
||||
};
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
{
|
||||
"version": "0.0.6",
|
||||
"version": "0.1.0",
|
||||
"name": "@tmagic/vue-img",
|
||||
"type": "module",
|
||||
"main": "src/index.ts",
|
||||
|
||||
@ -6,7 +6,7 @@
|
||||
import { defineComponent, type PropType } from 'vue-demi';
|
||||
|
||||
import type { Id, MComponent } from '@tmagic/core';
|
||||
import { useApp } from '@tmagic/vue-runtime-help';
|
||||
import { registerNodeHooks, useNode } from '@tmagic/vue-runtime-help';
|
||||
|
||||
interface ImgSchema extends Omit<MComponent, 'id'> {
|
||||
id?: Id;
|
||||
@ -25,6 +25,7 @@ export default defineComponent({
|
||||
},
|
||||
iteratorIndex: Array as PropType<number[]>,
|
||||
iteratorContainerId: Array as PropType<Id[]>,
|
||||
containerIndex: Number,
|
||||
model: {
|
||||
type: Object,
|
||||
default: () => ({}),
|
||||
@ -36,12 +37,8 @@ export default defineComponent({
|
||||
if (props.config.url) window.location.href = props.config.url;
|
||||
};
|
||||
|
||||
useApp({
|
||||
config: props.config,
|
||||
iteratorContainerId: props.iteratorContainerId,
|
||||
iteratorIndex: props.iteratorIndex,
|
||||
methods: {},
|
||||
});
|
||||
const node = useNode(props);
|
||||
registerNodeHooks(node);
|
||||
|
||||
return {
|
||||
clickHandler,
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
{
|
||||
"version": "0.0.6",
|
||||
"version": "0.1.0",
|
||||
"name": "@tmagic/vue-iterator-container",
|
||||
"type": "module",
|
||||
"main": "src/index.ts",
|
||||
|
||||
@ -1,21 +1,31 @@
|
||||
<template>
|
||||
<div>
|
||||
<component
|
||||
:is="containerComponent"
|
||||
<div @click="clickHandler">
|
||||
<IteratorItem
|
||||
v-for="(item, index) in configs"
|
||||
:iterator-index="[...(iteratorIndex || []), index]"
|
||||
:iterator-container-id="[...(iteratorContainerId || []), config.id]"
|
||||
:key="index"
|
||||
:config="item"
|
||||
></component>
|
||||
:iterator-index="[...(iteratorIndex || []), index]"
|
||||
:iterator-container-id="
|
||||
config.id ? [...(iteratorContainerId || []), config.id] : [...(iteratorContainerId || [])]
|
||||
"
|
||||
></IteratorItem>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { computed, defineComponent, type PropType, watch } from 'vue-demi';
|
||||
import { computed, defineComponent, inject, type PropType, watch } from 'vue-demi';
|
||||
|
||||
import type { Id, IteratorContainer as TMagicIteratorContainer, MIteratorContainer, MNode } from '@tmagic/core';
|
||||
import { useApp, useComponent } from '@tmagic/vue-runtime-help';
|
||||
import type TMagicApp from '@tmagic/core';
|
||||
import {
|
||||
COMMON_EVENT_PREFIX,
|
||||
type Id,
|
||||
type IteratorContainer as TMagicIteratorContainer,
|
||||
type MIteratorContainer,
|
||||
type MNode,
|
||||
} from '@tmagic/core';
|
||||
import { registerNodeHooks, useNode } from '@tmagic/vue-runtime-help';
|
||||
|
||||
import IteratorItem from './IteratorItem.vue';
|
||||
|
||||
interface IteratorContainerSchema extends Omit<MIteratorContainer, 'id'> {
|
||||
id?: Id;
|
||||
@ -33,6 +43,8 @@ interface IteratorItemSchema {
|
||||
export default defineComponent({
|
||||
name: 'tmagic-iterator-container',
|
||||
|
||||
components: { IteratorItem },
|
||||
|
||||
props: {
|
||||
config: {
|
||||
type: Object as PropType<IteratorContainerSchema>,
|
||||
@ -40,6 +52,7 @@ export default defineComponent({
|
||||
},
|
||||
iteratorIndex: Array as PropType<number[]>,
|
||||
iteratorContainerId: Array as PropType<Id[]>,
|
||||
containerIndex: Number,
|
||||
model: {
|
||||
type: Object,
|
||||
default: () => ({}),
|
||||
@ -47,14 +60,9 @@ export default defineComponent({
|
||||
},
|
||||
|
||||
setup(props) {
|
||||
const { app } = useApp({
|
||||
config: props.config,
|
||||
iteratorContainerId: props.iteratorContainerId,
|
||||
iteratorIndex: props.iteratorIndex,
|
||||
methods: {},
|
||||
});
|
||||
|
||||
const containerComponent = useComponent({ componentType: 'container', app });
|
||||
const app = inject<TMagicApp>('app');
|
||||
const node = useNode(props, app);
|
||||
registerNodeHooks(node);
|
||||
|
||||
const configs = computed<IteratorItemSchema[]>(() => {
|
||||
let { iteratorData = [] } = props.config;
|
||||
@ -117,9 +125,15 @@ export default defineComponent({
|
||||
},
|
||||
);
|
||||
|
||||
const clickHandler = () => {
|
||||
if (app && node) {
|
||||
app.emit(`${COMMON_EVENT_PREFIX}click`, node);
|
||||
}
|
||||
};
|
||||
|
||||
return {
|
||||
configs,
|
||||
containerComponent,
|
||||
clickHandler,
|
||||
};
|
||||
},
|
||||
});
|
||||
|
||||
53
vue-components/iterator-container/src/IteratorItem.vue
Normal file
53
vue-components/iterator-container/src/IteratorItem.vue
Normal file
@ -0,0 +1,53 @@
|
||||
<template>
|
||||
<component
|
||||
:is="containerComponent"
|
||||
:style="style"
|
||||
:class="className"
|
||||
:config="config"
|
||||
:iterator-index="iteratorIndex"
|
||||
:iterator-container-id="iteratorContainerId"
|
||||
></component>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { defineComponent, inject, type PropType } from 'vue-demi';
|
||||
|
||||
import type TMagicApp from '@tmagic/core';
|
||||
import type { Id } from '@tmagic/core';
|
||||
import { useComponent, useComponentStatus } from '@tmagic/vue-runtime-help';
|
||||
|
||||
import { IteratorItemSchema } from './type';
|
||||
|
||||
export default defineComponent({
|
||||
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,
|
||||
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,
|
||||
};
|
||||
},
|
||||
});
|
||||
</script>
|
||||
@ -1,4 +1,6 @@
|
||||
import { COMMON_EVENT_PREFIX } from '@tmagic/core';
|
||||
|
||||
export default {
|
||||
methods: [],
|
||||
events: [],
|
||||
events: [{ label: '点击', value: `${COMMON_EVENT_PREFIX}click` }],
|
||||
};
|
||||
|
||||
9
vue-components/iterator-container/src/type.ts
Normal file
9
vue-components/iterator-container/src/type.ts
Normal file
@ -0,0 +1,9 @@
|
||||
import type { MNode } from '@tmagic/core';
|
||||
|
||||
export interface IteratorItemSchema {
|
||||
items: MNode[];
|
||||
condResult: boolean;
|
||||
style: {
|
||||
[key: string]: any;
|
||||
};
|
||||
}
|
||||
@ -1,5 +1,5 @@
|
||||
{
|
||||
"version": "0.0.3",
|
||||
"version": "0.1.0",
|
||||
"name": "@tmagic/vue-overlay",
|
||||
"type": "module",
|
||||
"main": "src/index.ts",
|
||||
|
||||
@ -1,14 +1,15 @@
|
||||
<template>
|
||||
<component v-if="visible" :is="containerComponent" :config="{ items: config.items }">
|
||||
<component v-if="visible" :is="containerComponent" :config="{ items: config.items, [IS_DSL_NODE_KEY]: false }">
|
||||
<slot></slot>
|
||||
</component>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { defineComponent, onBeforeUnmount, type PropType, ref } from 'vue-demi';
|
||||
import { defineComponent, inject, onBeforeUnmount, type PropType, ref } from 'vue-demi';
|
||||
|
||||
import type { Id, MContainer, MNode, MPage } from '@tmagic/core';
|
||||
import { useApp, useComponent } from '@tmagic/vue-runtime-help';
|
||||
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';
|
||||
|
||||
interface OverlaySchema extends Omit<MContainer, 'id'> {
|
||||
id?: Id;
|
||||
@ -25,6 +26,7 @@ export default defineComponent({
|
||||
},
|
||||
iteratorIndex: Array as PropType<number[]>,
|
||||
iteratorContainerId: Array as PropType<Id[]>,
|
||||
containerIndex: Number,
|
||||
model: {
|
||||
type: Object,
|
||||
default: () => ({}),
|
||||
@ -34,24 +36,19 @@ export default defineComponent({
|
||||
setup(props) {
|
||||
const visible = ref(false);
|
||||
|
||||
const { app, node } = useApp({
|
||||
config: props.config,
|
||||
iteratorContainerId: props.iteratorContainerId,
|
||||
iteratorIndex: props.iteratorIndex,
|
||||
methods: {
|
||||
openOverlay() {
|
||||
visible.value = true;
|
||||
app?.emit('overlay:open', node);
|
||||
},
|
||||
closeOverlay() {
|
||||
visible.value = false;
|
||||
app?.emit('overlay:close', node);
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
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;
|
||||
@ -61,9 +58,9 @@ export default defineComponent({
|
||||
path: MNode[],
|
||||
) => {
|
||||
if (path.find((node: MNode) => node.id === props.config.id)) {
|
||||
node?.instance.openOverlay();
|
||||
openOverlay();
|
||||
} else {
|
||||
node?.instance.closeOverlay();
|
||||
closeOverlay();
|
||||
}
|
||||
};
|
||||
|
||||
@ -73,9 +70,16 @@ export default defineComponent({
|
||||
app?.page?.off('editor:select', editorSelectHandler);
|
||||
});
|
||||
|
||||
const node = useNode(props, app);
|
||||
registerNodeHooks(node, {
|
||||
openOverlay,
|
||||
closeOverlay,
|
||||
});
|
||||
|
||||
return {
|
||||
containerComponent,
|
||||
visible,
|
||||
IS_DSL_NODE_KEY,
|
||||
};
|
||||
},
|
||||
});
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
{
|
||||
"version": "0.0.5",
|
||||
"version": "0.1.0",
|
||||
"name": "@tmagic/vue-page-fragment-container",
|
||||
"type": "module",
|
||||
"main": "src/index.ts",
|
||||
|
||||
@ -11,10 +11,11 @@
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { computed, defineComponent, type PropType } from 'vue-demi';
|
||||
import { computed, defineComponent, inject, type PropType } from 'vue-demi';
|
||||
|
||||
import { type Id, type MComponent, type MNode, NodeType } from '@tmagic/core';
|
||||
import { useApp, useComponent } from '@tmagic/vue-runtime-help';
|
||||
import type TMagicApp from '@tmagic/core';
|
||||
import { cloneDeep, type Id, IS_DSL_NODE_KEY, type MComponent, NodeType, traverseNode } from '@tmagic/core';
|
||||
import { registerNodeHooks, useComponent, useNode } from '@tmagic/vue-runtime-help';
|
||||
|
||||
export default defineComponent({
|
||||
name: 'tmagic-page-fragment-container',
|
||||
@ -26,6 +27,7 @@ export default defineComponent({
|
||||
},
|
||||
iteratorIndex: Array as PropType<number[]>,
|
||||
iteratorContainerId: Array as PropType<Id[]>,
|
||||
containerIndex: Number,
|
||||
model: {
|
||||
type: Object,
|
||||
default: () => ({}),
|
||||
@ -33,12 +35,9 @@ export default defineComponent({
|
||||
},
|
||||
|
||||
setup(props) {
|
||||
const { app } = useApp({
|
||||
config: props.config,
|
||||
methods: {},
|
||||
iteratorContainerId: props.iteratorContainerId,
|
||||
iteratorIndex: props.iteratorIndex,
|
||||
});
|
||||
const app = inject<TMagicApp>('app');
|
||||
const node = useNode(props, app);
|
||||
registerNodeHooks(node);
|
||||
|
||||
const containerComponent = useComponent({ componentType: 'container', app });
|
||||
|
||||
@ -47,25 +46,15 @@ export default defineComponent({
|
||||
const containerConfig = computed(() => {
|
||||
if (!fragment.value) return { items: [], id: '', type: NodeType.CONTAINER };
|
||||
|
||||
const { id, type, items, ...others } = fragment.value;
|
||||
const itemsWithoutId = items.map((item: MNode) => {
|
||||
const { id, ...otherConfig } = item;
|
||||
return {
|
||||
...otherConfig,
|
||||
};
|
||||
});
|
||||
|
||||
if (app?.platform === 'editor') {
|
||||
return {
|
||||
...others,
|
||||
items: itemsWithoutId,
|
||||
};
|
||||
const fragmentConfigWithoutId = cloneDeep(fragment.value);
|
||||
traverseNode(fragmentConfigWithoutId, (node) => {
|
||||
node.id = '';
|
||||
});
|
||||
return { ...fragmentConfigWithoutId, [IS_DSL_NODE_KEY]: false };
|
||||
}
|
||||
|
||||
return {
|
||||
...others,
|
||||
items,
|
||||
};
|
||||
return { ...fragment.value, [IS_DSL_NODE_KEY]: false };
|
||||
});
|
||||
|
||||
return {
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
{
|
||||
"version": "0.0.5",
|
||||
"version": "0.1.0",
|
||||
"name": "@tmagic/vue-page-fragment",
|
||||
"type": "module",
|
||||
"main": "src/index.ts",
|
||||
|
||||
@ -1,18 +1,19 @@
|
||||
<template>
|
||||
<component
|
||||
:is="containerComponent"
|
||||
class="magic-ui-page-fragment"
|
||||
:class="className"
|
||||
:style="style"
|
||||
:data-tmagic-id="config.id"
|
||||
:config="config"
|
||||
:style="app?.transformStyle(config.style || {})"
|
||||
:config="{ ...config, [IS_DSL_NODE_KEY]: false }"
|
||||
></component>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { defineComponent, type PropType } from 'vue-demi';
|
||||
import { defineComponent, inject, type PropType } from 'vue-demi';
|
||||
|
||||
import type { MPageFragment } from '@tmagic/core';
|
||||
import { useApp, useComponent } from '@tmagic/vue-runtime-help';
|
||||
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';
|
||||
|
||||
export default defineComponent({
|
||||
name: 'tmagic-page-fragment',
|
||||
@ -29,16 +30,17 @@ export default defineComponent({
|
||||
},
|
||||
|
||||
setup(props) {
|
||||
const { app } = useApp({
|
||||
config: props.config,
|
||||
methods: {},
|
||||
});
|
||||
const app = inject<TMagicApp>('app');
|
||||
const node = useNode(props, app);
|
||||
registerNodeHooks(node);
|
||||
|
||||
const containerComponent = useComponent({ componentType: 'container', app });
|
||||
|
||||
const { style, className } = useComponentStatus(props);
|
||||
return {
|
||||
app,
|
||||
style,
|
||||
className,
|
||||
containerComponent,
|
||||
IS_DSL_NODE_KEY,
|
||||
};
|
||||
},
|
||||
});
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
{
|
||||
"version": "0.0.7",
|
||||
"version": "0.1.0",
|
||||
"name": "@tmagic/vue-page",
|
||||
"type": "module",
|
||||
"main": "src/index.ts",
|
||||
|
||||
@ -1,12 +1,19 @@
|
||||
<template>
|
||||
<component :is="containerComponent" class="magic-ui-page" :data-tmagic-id="config.id" :config="config"></component>
|
||||
<component
|
||||
:is="containerComponent"
|
||||
:class="className"
|
||||
:style="style"
|
||||
:data-tmagic-id="config.id"
|
||||
:config="{ ...config, [IS_DSL_NODE_KEY]: false }"
|
||||
></component>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { defineComponent, type PropType } from 'vue-demi';
|
||||
import { defineComponent, inject, nextTick, type PropType, watch } from 'vue-demi';
|
||||
|
||||
import { asyncLoadCss, asyncLoadJs, type MPage } from '@tmagic/core';
|
||||
import { useApp, useComponent } from '@tmagic/vue-runtime-help';
|
||||
import type TMagicApp from '@tmagic/core';
|
||||
import { asyncLoadCss, asyncLoadJs, IS_DSL_NODE_KEY, type MPage } from '@tmagic/core';
|
||||
import { useComponent, useComponentStatus, useNode } from '@tmagic/vue-runtime-help';
|
||||
|
||||
const createCss = (config: MPage) => {
|
||||
if (config.cssFile) {
|
||||
@ -45,14 +52,7 @@ export default defineComponent({
|
||||
},
|
||||
|
||||
setup(props) {
|
||||
const refresh = () => {
|
||||
window.location.reload();
|
||||
};
|
||||
|
||||
const { app } = useApp({
|
||||
config: props.config,
|
||||
methods: { refresh },
|
||||
});
|
||||
const app = inject<TMagicApp>('app');
|
||||
|
||||
if (app?.jsEngine === 'browser') {
|
||||
createCss(props.config);
|
||||
@ -61,8 +61,39 @@ export default defineComponent({
|
||||
|
||||
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?.registerMethod({ 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,
|
||||
};
|
||||
},
|
||||
});
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
{
|
||||
"version": "0.0.4",
|
||||
"version": "0.1.0",
|
||||
"name": "@tmagic/vue-qrcode",
|
||||
"type": "module",
|
||||
"main": "src/index.ts",
|
||||
|
||||
@ -1,4 +1,6 @@
|
||||
import { COMMON_EVENT_PREFIX } from '@tmagic/core';
|
||||
|
||||
export default {
|
||||
methods: [],
|
||||
events: [],
|
||||
events: [{ label: '点击', value: `${COMMON_EVENT_PREFIX}click` }],
|
||||
};
|
||||
|
||||
@ -1,13 +1,14 @@
|
||||
<template>
|
||||
<img :src="imgUrl" />
|
||||
<img :src="imgUrl" @click="clickHandler" />
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { defineComponent, type PropType, ref, watch } from 'vue-demi';
|
||||
import { defineComponent, inject, type PropType, ref, watch } from 'vue-demi';
|
||||
import QRCode from 'qrcode';
|
||||
|
||||
import type { Id, MComponent } from '@tmagic/core';
|
||||
import { useApp } from '@tmagic/vue-runtime-help';
|
||||
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';
|
||||
|
||||
interface QrCodeSchema extends Omit<MComponent, 'id'> {
|
||||
id?: Id;
|
||||
@ -25,6 +26,7 @@ export default defineComponent({
|
||||
},
|
||||
iteratorIndex: Array as PropType<number[]>,
|
||||
iteratorContainerId: Array as PropType<Id[]>,
|
||||
containerIndex: Number,
|
||||
model: {
|
||||
type: Object,
|
||||
default: () => ({}),
|
||||
@ -47,15 +49,19 @@ export default defineComponent({
|
||||
},
|
||||
);
|
||||
|
||||
useApp({
|
||||
config: props.config,
|
||||
methods: {},
|
||||
iteratorContainerId: props.iteratorContainerId,
|
||||
iteratorIndex: props.iteratorIndex,
|
||||
});
|
||||
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,
|
||||
};
|
||||
},
|
||||
});
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
{
|
||||
"version": "0.0.4",
|
||||
"version": "0.1.0",
|
||||
"name": "@tmagic/vue-text",
|
||||
"type": "module",
|
||||
"main": "src/index.ts",
|
||||
|
||||
@ -1,4 +1,6 @@
|
||||
import { COMMON_EVENT_PREFIX } from '@tmagic/core';
|
||||
|
||||
export default {
|
||||
methods: [],
|
||||
events: [],
|
||||
events: [{ label: '点击', value: `${COMMON_EVENT_PREFIX}click` }],
|
||||
};
|
||||
|
||||
@ -1,12 +1,15 @@
|
||||
<template>
|
||||
<p>{{ config.text }}</p>
|
||||
<p @click="clickHandler">
|
||||
<slot>{{ config.text }}</slot>
|
||||
</p>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { defineComponent, type PropType } from 'vue-demi';
|
||||
import { defineComponent, inject, type PropType } from 'vue-demi';
|
||||
|
||||
import type { Id, MComponent } from '@tmagic/core';
|
||||
import { useApp } from '@tmagic/vue-runtime-help';
|
||||
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';
|
||||
|
||||
interface TextSchema extends Omit<MComponent, 'id'> {
|
||||
id?: Id;
|
||||
@ -24,6 +27,7 @@ export default defineComponent({
|
||||
},
|
||||
iteratorIndex: Array as PropType<number[]>,
|
||||
iteratorContainerId: Array as PropType<Id[]>,
|
||||
containerIndex: Number,
|
||||
model: {
|
||||
type: Object,
|
||||
default: () => ({}),
|
||||
@ -31,12 +35,19 @@ export default defineComponent({
|
||||
},
|
||||
|
||||
setup(props) {
|
||||
useApp({
|
||||
config: props.config,
|
||||
methods: {},
|
||||
iteratorContainerId: props.iteratorContainerId,
|
||||
iteratorIndex: props.iteratorIndex,
|
||||
});
|
||||
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,
|
||||
};
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user