mirror of
https://github.com/Tencent/tmagic-editor.git
synced 2025-12-10 09:52:51 +00:00
feat(vue-components): 不再兼容vue2
This commit is contained in:
roymondchen
parent
2a7ab4e916
commit
756612eda5
103
pnpm-lock.yaml
generated
103
pnpm-lock.yaml
generated
@ -965,11 +965,11 @@ importers:
|
||||
runtime/react-runtime-help:
|
||||
dependencies:
|
||||
'@tmagic/core':
|
||||
specifier: '>=1.6.0-beta.0'
|
||||
version: 1.6.1(typescript@5.9.3)
|
||||
specifier: '>=1.7.0'
|
||||
version: 1.7.0(typescript@5.9.3)
|
||||
'@tmagic/stage':
|
||||
specifier: '>=1.6.0-beta.0'
|
||||
version: 1.6.1(@tmagic/core@1.6.1(typescript@5.9.3))(typescript@5.9.3)
|
||||
specifier: '>=1.7.0'
|
||||
version: 1.7.0(@tmagic/core@1.7.0(typescript@5.9.3))(typescript@5.9.3)
|
||||
lodash-es:
|
||||
specifier: ^4.17.21
|
||||
version: 4.17.21
|
||||
@ -1072,23 +1072,17 @@ importers:
|
||||
runtime/vue-runtime-help:
|
||||
dependencies:
|
||||
'@tmagic/core':
|
||||
specifier: '>=1.6.0-beta.0'
|
||||
version: 1.6.1(typescript@5.9.3)
|
||||
specifier: '>=1.7.0'
|
||||
version: 1.7.0(typescript@5.9.3)
|
||||
'@tmagic/stage':
|
||||
specifier: '>=1.6.0-beta.0'
|
||||
version: 1.6.1(@tmagic/core@1.6.1(typescript@5.9.3))(typescript@5.9.3)
|
||||
'@vue/composition-api':
|
||||
specifier: '>=1.7.2'
|
||||
version: 1.7.2(vue@3.5.24(typescript@5.9.3))
|
||||
specifier: '>=1.7.0'
|
||||
version: 1.7.0(@tmagic/core@1.7.0(typescript@5.9.3))(typescript@5.9.3)
|
||||
typescript:
|
||||
specifier: 'catalog:'
|
||||
version: 5.9.3
|
||||
vue:
|
||||
specifier: '>=2.6.0 || >=3.5.0'
|
||||
specifier: '>=3.5.0'
|
||||
version: 3.5.24(typescript@5.9.3)
|
||||
vue-demi:
|
||||
specifier: ^0.14.10
|
||||
version: 0.14.10(@vue/composition-api@1.7.2(vue@3.5.24(typescript@5.9.3)))(vue@3.5.24(typescript@5.9.3))
|
||||
devDependencies:
|
||||
'@vue/test-utils':
|
||||
specifier: ^2.4.6
|
||||
@ -1105,18 +1099,12 @@ importers:
|
||||
'@tmagic/vue-runtime-help':
|
||||
specifier: workspace:^
|
||||
version: link:../../runtime/vue-runtime-help
|
||||
'@vue/composition-api':
|
||||
specifier: '>=1.7.2'
|
||||
version: 1.7.2(vue@3.5.24(typescript@5.9.3))
|
||||
typescript:
|
||||
specifier: 'catalog:'
|
||||
version: 5.9.3
|
||||
vue:
|
||||
specifier: '>=2.6.0 || >=3.5.0'
|
||||
specifier: '>=3.5.0'
|
||||
version: 3.5.24(typescript@5.9.3)
|
||||
vue-demi:
|
||||
specifier: ^0.14.10
|
||||
version: 0.14.10(@vue/composition-api@1.7.2(vue@3.5.24(typescript@5.9.3)))(vue@3.5.24(typescript@5.9.3))
|
||||
|
||||
vue-components/container:
|
||||
dependencies:
|
||||
@ -1129,18 +1117,12 @@ importers:
|
||||
'@tmagic/vue-runtime-help':
|
||||
specifier: workspace:^
|
||||
version: link:../../runtime/vue-runtime-help
|
||||
'@vue/composition-api':
|
||||
specifier: '>=1.7.2'
|
||||
version: 1.7.2(vue@3.5.24(typescript@5.9.3))
|
||||
typescript:
|
||||
specifier: 'catalog:'
|
||||
version: 5.9.3
|
||||
vue:
|
||||
specifier: '>=2.6.0 || >=3.5.0'
|
||||
specifier: '>=3.5.0'
|
||||
version: 3.5.24(typescript@5.9.3)
|
||||
vue-demi:
|
||||
specifier: ^0.14.10
|
||||
version: 0.14.10(@vue/composition-api@1.7.2(vue@3.5.24(typescript@5.9.3)))(vue@3.5.24(typescript@5.9.3))
|
||||
|
||||
vue-components/img:
|
||||
dependencies:
|
||||
@ -1153,18 +1135,12 @@ importers:
|
||||
'@tmagic/vue-runtime-help':
|
||||
specifier: workspace:^
|
||||
version: link:../../runtime/vue-runtime-help
|
||||
'@vue/composition-api':
|
||||
specifier: '>=1.7.2'
|
||||
version: 1.7.2(vue@3.5.24(typescript@5.9.3))
|
||||
typescript:
|
||||
specifier: 'catalog:'
|
||||
version: 5.9.3
|
||||
vue:
|
||||
specifier: '>=2.6.0 || >=3.5.0'
|
||||
specifier: '>=3.5.0'
|
||||
version: 3.5.24(typescript@5.9.3)
|
||||
vue-demi:
|
||||
specifier: ^0.14.10
|
||||
version: 0.14.10(@vue/composition-api@1.7.2(vue@3.5.24(typescript@5.9.3)))(vue@3.5.24(typescript@5.9.3))
|
||||
|
||||
vue-components/iterator-container:
|
||||
dependencies:
|
||||
@ -1177,18 +1153,12 @@ importers:
|
||||
'@tmagic/vue-runtime-help':
|
||||
specifier: workspace:^
|
||||
version: link:../../runtime/vue-runtime-help
|
||||
'@vue/composition-api':
|
||||
specifier: '>=1.7.2'
|
||||
version: 1.7.2(vue@3.5.24(typescript@5.9.3))
|
||||
typescript:
|
||||
specifier: 'catalog:'
|
||||
version: 5.9.3
|
||||
vue:
|
||||
specifier: '>=2.6.0 || >=3.5.0'
|
||||
specifier: '>=3.5.0'
|
||||
version: 3.5.24(typescript@5.9.3)
|
||||
vue-demi:
|
||||
specifier: ^0.14.10
|
||||
version: 0.14.10(@vue/composition-api@1.7.2(vue@3.5.24(typescript@5.9.3)))(vue@3.5.24(typescript@5.9.3))
|
||||
|
||||
vue-components/overlay:
|
||||
dependencies:
|
||||
@ -1204,9 +1174,9 @@ importers:
|
||||
typescript:
|
||||
specifier: 'catalog:'
|
||||
version: 5.9.3
|
||||
vue-demi:
|
||||
specifier: ^0.14.10
|
||||
version: 0.14.10(@vue/composition-api@1.7.2(vue@3.5.24(typescript@5.9.3)))(vue@3.5.24(typescript@5.9.3))
|
||||
vue:
|
||||
specifier: '>=3.5.0'
|
||||
version: 3.5.24(typescript@5.9.3)
|
||||
|
||||
vue-components/page:
|
||||
dependencies:
|
||||
@ -1222,9 +1192,9 @@ importers:
|
||||
typescript:
|
||||
specifier: 'catalog:'
|
||||
version: 5.9.3
|
||||
vue-demi:
|
||||
specifier: ^0.14.10
|
||||
version: 0.14.10(@vue/composition-api@1.7.2(vue@3.5.24(typescript@5.9.3)))(vue@3.5.24(typescript@5.9.3))
|
||||
vue:
|
||||
specifier: '>=3.5.0'
|
||||
version: 3.5.24(typescript@5.9.3)
|
||||
|
||||
vue-components/page-fragment:
|
||||
dependencies:
|
||||
@ -1240,9 +1210,9 @@ importers:
|
||||
typescript:
|
||||
specifier: 'catalog:'
|
||||
version: 5.9.3
|
||||
vue-demi:
|
||||
specifier: ^0.14.10
|
||||
version: 0.14.10(@vue/composition-api@1.7.2(vue@3.5.24(typescript@5.9.3)))(vue@3.5.24(typescript@5.9.3))
|
||||
vue:
|
||||
specifier: '>=3.5.0'
|
||||
version: 3.5.24(typescript@5.9.3)
|
||||
|
||||
vue-components/page-fragment-container:
|
||||
dependencies:
|
||||
@ -1258,9 +1228,9 @@ importers:
|
||||
typescript:
|
||||
specifier: 'catalog:'
|
||||
version: 5.9.3
|
||||
vue-demi:
|
||||
specifier: ^0.14.10
|
||||
version: 0.14.10(@vue/composition-api@1.7.2(vue@3.5.24(typescript@5.9.3)))(vue@3.5.24(typescript@5.9.3))
|
||||
vue:
|
||||
specifier: '>=3.5.0'
|
||||
version: 3.5.24(typescript@5.9.3)
|
||||
|
||||
vue-components/qrcode:
|
||||
dependencies:
|
||||
@ -1273,9 +1243,6 @@ importers:
|
||||
'@tmagic/vue-runtime-help':
|
||||
specifier: workspace:^
|
||||
version: link:../../runtime/vue-runtime-help
|
||||
'@vue/composition-api':
|
||||
specifier: '>=1.7.2'
|
||||
version: 1.7.2(vue@3.5.24(typescript@5.9.3))
|
||||
qrcode:
|
||||
specifier: ^1.5.0
|
||||
version: 1.5.4
|
||||
@ -1283,11 +1250,8 @@ importers:
|
||||
specifier: 'catalog:'
|
||||
version: 5.9.3
|
||||
vue:
|
||||
specifier: '>=2.6.0 || >=3.5.0'
|
||||
specifier: '>=3.5.0'
|
||||
version: 3.5.24(typescript@5.9.3)
|
||||
vue-demi:
|
||||
specifier: ^0.14.10
|
||||
version: 0.14.10(@vue/composition-api@1.7.2(vue@3.5.24(typescript@5.9.3)))(vue@3.5.24(typescript@5.9.3))
|
||||
devDependencies:
|
||||
'@types/qrcode':
|
||||
specifier: ^1.4.2
|
||||
@ -1304,18 +1268,12 @@ importers:
|
||||
'@tmagic/vue-runtime-help':
|
||||
specifier: workspace:^
|
||||
version: link:../../runtime/vue-runtime-help
|
||||
'@vue/composition-api':
|
||||
specifier: '>=1.7.2'
|
||||
version: 1.7.2(vue@3.5.24(typescript@5.9.3))
|
||||
typescript:
|
||||
specifier: 'catalog:'
|
||||
version: 5.9.3
|
||||
vue:
|
||||
specifier: '>=2.6.0 || >=3.5.0'
|
||||
specifier: '>=3.5.0'
|
||||
version: 3.5.24(typescript@5.9.3)
|
||||
vue-demi:
|
||||
specifier: ^0.14.10
|
||||
version: 0.14.10(@vue/composition-api@1.7.2(vue@3.5.24(typescript@5.9.3)))(vue@3.5.24(typescript@5.9.3))
|
||||
|
||||
packages:
|
||||
|
||||
@ -8277,7 +8235,7 @@ snapshots:
|
||||
'@tmagic/core@1.6.1(typescript@5.9.3)':
|
||||
dependencies:
|
||||
'@tmagic/data-source': 1.6.1(@tmagic/core@1.6.1(typescript@5.9.3))(typescript@5.9.3)
|
||||
'@tmagic/dep': 1.6.1(@tmagic/schema@1.6.1(typescript@5.9.3))(@tmagic/utils@1.6.1(@tmagic/schema@1.6.1(typescript@5.9.3))(typescript@5.9.3))(typescript@5.9.3)
|
||||
'@tmagic/dep': 1.6.1(@tmagic/schema@1.6.1(typescript@5.9.3))(@tmagic/utils@1.6.1(@tmagic/schema@1.7.0(typescript@5.9.3))(typescript@5.9.3))(typescript@5.9.3)
|
||||
'@tmagic/schema': 1.6.1(typescript@5.9.3)
|
||||
'@tmagic/utils': 1.6.1(@tmagic/schema@1.6.1(typescript@5.9.3))(typescript@5.9.3)
|
||||
events: 3.3.0
|
||||
@ -8314,10 +8272,10 @@ snapshots:
|
||||
optionalDependencies:
|
||||
typescript: 5.9.3
|
||||
|
||||
'@tmagic/dep@1.6.1(@tmagic/schema@1.6.1(typescript@5.9.3))(@tmagic/utils@1.6.1(@tmagic/schema@1.6.1(typescript@5.9.3))(typescript@5.9.3))(typescript@5.9.3)':
|
||||
'@tmagic/dep@1.6.1(@tmagic/schema@1.6.1(typescript@5.9.3))(@tmagic/utils@1.6.1(@tmagic/schema@1.7.0(typescript@5.9.3))(typescript@5.9.3))(typescript@5.9.3)':
|
||||
dependencies:
|
||||
'@tmagic/schema': 1.6.1(typescript@5.9.3)
|
||||
'@tmagic/utils': 1.6.1(@tmagic/schema@1.6.1(typescript@5.9.3))(typescript@5.9.3)
|
||||
'@tmagic/utils': 1.6.1(@tmagic/schema@1.7.0(typescript@5.9.3))(typescript@5.9.3)
|
||||
optionalDependencies:
|
||||
typescript: 5.9.3
|
||||
|
||||
@ -8918,6 +8876,7 @@ snapshots:
|
||||
'@vue/composition-api@1.7.2(vue@3.5.24(typescript@5.9.3))':
|
||||
dependencies:
|
||||
vue: 3.5.24(typescript@5.9.3)
|
||||
optional: true
|
||||
|
||||
'@vue/devtools-api@6.6.4': {}
|
||||
|
||||
|
||||
@ -55,10 +55,6 @@ export default defineConfig({
|
||||
|
||||
publicDir: 'public',
|
||||
|
||||
optimizeDeps: {
|
||||
exclude: ['vue-demi'],
|
||||
},
|
||||
|
||||
server: {
|
||||
host: '0.0.0.0',
|
||||
port: 8078,
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
{
|
||||
"version": "0.2.0",
|
||||
"version": "1.0.0",
|
||||
"name": "@tmagic/vue-button",
|
||||
"type": "module",
|
||||
"main": "src/index.ts",
|
||||
@ -14,21 +14,15 @@
|
||||
"url": "https://github.com/Tencent/tmagic-editor.git"
|
||||
},
|
||||
"dependencies": {
|
||||
"@tmagic/form-schema": "workspace:^",
|
||||
"vue-demi": "^0.14.10"
|
||||
"@tmagic/form-schema": "workspace:^"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"@tmagic/core": "workspace:^",
|
||||
"@tmagic/vue-runtime-help": "workspace:^",
|
||||
"@vue/composition-api": ">=1.7.2",
|
||||
"typescript": "catalog:",
|
||||
"vue": ">=2.6.0 || >=3.5.0"
|
||||
"vue": ">=3.5.0"
|
||||
},
|
||||
"peerDependenciesMeta": {
|
||||
"@vue/composition-api": {
|
||||
"optional": true
|
||||
},
|
||||
|
||||
"typescript": {
|
||||
"optional": true
|
||||
}
|
||||
|
||||
@ -6,11 +6,9 @@
|
||||
</button>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { defineComponent, type PropType } from 'vue-demi';
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { COMMON_EVENT_PREFIX, type Id, type MComponent } from '@tmagic/core';
|
||||
import { useApp } from '@tmagic/vue-runtime-help';
|
||||
import { type ComponentProps, useApp } from '@tmagic/vue-runtime-help';
|
||||
|
||||
interface ButtonSchema extends Omit<MComponent, 'id'> {
|
||||
id?: Id;
|
||||
@ -18,36 +16,16 @@ interface ButtonSchema extends Omit<MComponent, 'id'> {
|
||||
text: string;
|
||||
}
|
||||
|
||||
export default defineComponent({
|
||||
defineOptions({
|
||||
name: 'tmagic-button',
|
||||
|
||||
props: {
|
||||
config: {
|
||||
type: Object as PropType<ButtonSchema>,
|
||||
required: true,
|
||||
},
|
||||
iteratorIndex: Array as PropType<number[]>,
|
||||
iteratorContainerId: Array as PropType<Id[]>,
|
||||
containerIndex: Number,
|
||||
pageFragmentContainerId: [String, Number] as PropType<Id>,
|
||||
model: {
|
||||
type: Object,
|
||||
default: () => ({}),
|
||||
},
|
||||
},
|
||||
|
||||
setup(props) {
|
||||
const { app, node } = useApp(props);
|
||||
|
||||
const clickHandler = () => {
|
||||
if (app && node) {
|
||||
app.emit(`${COMMON_EVENT_PREFIX}click`, node);
|
||||
}
|
||||
};
|
||||
|
||||
return {
|
||||
clickHandler,
|
||||
};
|
||||
},
|
||||
});
|
||||
|
||||
const props = defineProps<ComponentProps<ButtonSchema>>();
|
||||
|
||||
const { app, node } = useApp(props);
|
||||
const clickHandler = () => {
|
||||
if (app && node) {
|
||||
app.emit(`${COMMON_EVENT_PREFIX}click`, node);
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
{
|
||||
"version": "1.2.1",
|
||||
"version": "2.0.0",
|
||||
"name": "@tmagic/vue-container",
|
||||
"type": "module",
|
||||
"main": "src/index.ts",
|
||||
@ -14,22 +14,17 @@
|
||||
"url": "https://github.com/Tencent/tmagic-editor.git"
|
||||
},
|
||||
"dependencies": {
|
||||
"@tmagic/form-schema": "workspace:^",
|
||||
"vue-demi": "^0.14.10"
|
||||
"@tmagic/form-schema": "workspace:^"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"@tmagic/core": "workspace:^",
|
||||
"@tmagic/vue-runtime-help": "workspace:^",
|
||||
"@vue/composition-api": ">=1.7.2",
|
||||
"typescript": "catalog:",
|
||||
"vue": ">=2.6.0 || >=3.5.0"
|
||||
"vue": ">=3.5.0"
|
||||
},
|
||||
"peerDependenciesMeta": {
|
||||
"typescript": {
|
||||
"optional": true
|
||||
},
|
||||
"@vue/composition-api": {
|
||||
"optional": true
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
import { defineComponent, h, inject, type PropType, provide } from 'vue-demi';
|
||||
import { defineComponent, h, inject, type PropType, provide } from 'vue';
|
||||
|
||||
import type TMagicApp from '@tmagic/core';
|
||||
import { Id, IS_DSL_NODE_KEY, MComponent, NODE_CONDS_RESULT_KEY } from '@tmagic/core';
|
||||
|
||||
@ -14,12 +14,12 @@
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { defineComponent, inject, type PropType } from 'vue-demi';
|
||||
<script lang="ts" setup>
|
||||
import { inject } from 'vue';
|
||||
|
||||
import type TMagicApp from '@tmagic/core';
|
||||
import { COMMON_EVENT_PREFIX, type Id, type MContainer } from '@tmagic/core';
|
||||
import { registerNodeHooks, useNode } from '@tmagic/vue-runtime-help';
|
||||
import { type ComponentProps, registerNodeHooks, useNode } from '@tmagic/vue-runtime-help';
|
||||
|
||||
import ItemComponent from './Component';
|
||||
|
||||
@ -28,46 +28,19 @@ interface ContainerSchema extends Omit<MContainer, 'id'> {
|
||||
type?: 'container';
|
||||
}
|
||||
|
||||
export default defineComponent({
|
||||
defineOptions({
|
||||
name: 'tmagic-container',
|
||||
|
||||
props: {
|
||||
config: {
|
||||
type: Object as PropType<ContainerSchema>,
|
||||
required: true,
|
||||
},
|
||||
iteratorIndex: {
|
||||
type: Array as PropType<number[]>,
|
||||
default: () => [],
|
||||
},
|
||||
iteratorContainerId: {
|
||||
type: Array as PropType<Id[]>,
|
||||
default: () => [],
|
||||
},
|
||||
containerIndex: Number,
|
||||
pageFragmentContainerId: [String, Number] as PropType<Id>,
|
||||
model: {
|
||||
type: Object,
|
||||
default: () => ({}),
|
||||
},
|
||||
},
|
||||
|
||||
components: { ItemComponent },
|
||||
|
||||
setup(props) {
|
||||
const app = inject<TMagicApp>('app');
|
||||
const node = useNode(props, app);
|
||||
registerNodeHooks(node);
|
||||
|
||||
const clickHandler = () => {
|
||||
if (app && node) {
|
||||
app.emit(`${COMMON_EVENT_PREFIX}click`, node);
|
||||
}
|
||||
};
|
||||
|
||||
return {
|
||||
clickHandler,
|
||||
};
|
||||
},
|
||||
});
|
||||
|
||||
const props = defineProps<ComponentProps<ContainerSchema>>();
|
||||
|
||||
const app = inject<TMagicApp>('app');
|
||||
const node = useNode(props, app);
|
||||
registerNodeHooks(node);
|
||||
|
||||
const clickHandler = () => {
|
||||
if (app && node) {
|
||||
app.emit(`${COMMON_EVENT_PREFIX}click`, node);
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
{
|
||||
"version": "0.2.0",
|
||||
"version": "1.0.0",
|
||||
"name": "@tmagic/vue-img",
|
||||
"type": "module",
|
||||
"main": "src/index.ts",
|
||||
@ -14,20 +14,15 @@
|
||||
"url": "https://github.com/Tencent/tmagic-editor.git"
|
||||
},
|
||||
"dependencies": {
|
||||
"@tmagic/form-schema": "workspace:^",
|
||||
"vue-demi": "^0.14.10"
|
||||
"@tmagic/form-schema": "workspace:^"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"@tmagic/core": "workspace:^",
|
||||
"@tmagic/vue-runtime-help": "workspace:^",
|
||||
"@vue/composition-api": ">=1.7.2",
|
||||
"typescript": "catalog:",
|
||||
"vue": ">=2.6.0 || >=3.5.0"
|
||||
"vue": ">=3.5.0"
|
||||
},
|
||||
"peerDependenciesMeta": {
|
||||
"@vue/composition-api": {
|
||||
"optional": true
|
||||
},
|
||||
"typescript": {
|
||||
"optional": true
|
||||
}
|
||||
|
||||
@ -2,11 +2,9 @@
|
||||
<img :src="config.src" @click="clickHandler" />
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { defineComponent, type PropType } from 'vue-demi';
|
||||
|
||||
<script lang="ts" setup>
|
||||
import type { Id, MComponent } from '@tmagic/core';
|
||||
import { registerNodeHooks, useNode } from '@tmagic/vue-runtime-help';
|
||||
import { type ComponentProps, registerNodeHooks, useNode } from '@tmagic/vue-runtime-help';
|
||||
|
||||
interface ImgSchema extends Omit<MComponent, 'id'> {
|
||||
id?: Id;
|
||||
@ -15,35 +13,16 @@ interface ImgSchema extends Omit<MComponent, 'id'> {
|
||||
url?: string;
|
||||
}
|
||||
|
||||
export default defineComponent({
|
||||
defineOptions({
|
||||
name: 'tmagic-img',
|
||||
|
||||
props: {
|
||||
config: {
|
||||
type: Object as PropType<ImgSchema>,
|
||||
required: true,
|
||||
},
|
||||
iteratorIndex: Array as PropType<number[]>,
|
||||
iteratorContainerId: Array as PropType<Id[]>,
|
||||
containerIndex: Number,
|
||||
pageFragmentContainerId: [String, Number] as PropType<Id>,
|
||||
model: {
|
||||
type: Object,
|
||||
default: () => ({}),
|
||||
},
|
||||
},
|
||||
|
||||
setup(props) {
|
||||
const clickHandler = () => {
|
||||
if (props.config.url) window.location.href = props.config.url;
|
||||
};
|
||||
|
||||
const node = useNode(props);
|
||||
registerNodeHooks(node);
|
||||
|
||||
return {
|
||||
clickHandler,
|
||||
};
|
||||
},
|
||||
});
|
||||
|
||||
const props = defineProps<ComponentProps<ImgSchema>>();
|
||||
|
||||
const clickHandler = () => {
|
||||
if (props.config.url) window.location.href = props.config.url;
|
||||
};
|
||||
|
||||
const node = useNode(props);
|
||||
registerNodeHooks(node);
|
||||
</script>
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
{
|
||||
"version": "0.2.1",
|
||||
"version": "1.0.0",
|
||||
"name": "@tmagic/vue-iterator-container",
|
||||
"type": "module",
|
||||
"main": "src/index.ts",
|
||||
@ -14,20 +14,15 @@
|
||||
"url": "https://github.com/Tencent/tmagic-editor.git"
|
||||
},
|
||||
"dependencies": {
|
||||
"@tmagic/form-schema": "workspace:^",
|
||||
"vue-demi": "^0.14.10"
|
||||
"@tmagic/form-schema": "workspace:^"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"@tmagic/core": "workspace:^",
|
||||
"@tmagic/vue-runtime-help": "workspace:^",
|
||||
"@vue/composition-api": ">=1.7.2",
|
||||
"typescript": "catalog:",
|
||||
"vue": ">=2.6.0 || >=3.5.0"
|
||||
"vue": ">=3.5.0"
|
||||
},
|
||||
"peerDependenciesMeta": {
|
||||
"@vue/composition-api": {
|
||||
"optional": true
|
||||
},
|
||||
"typescript": {
|
||||
"optional": true
|
||||
}
|
||||
|
||||
@ -13,8 +13,8 @@
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { computed, defineComponent, type PropType, watch } from 'vue-demi';
|
||||
<script lang="ts" setup>
|
||||
import { computed, watch } from 'vue';
|
||||
|
||||
import {
|
||||
COMMON_EVENT_PREFIX,
|
||||
@ -23,7 +23,7 @@ import {
|
||||
type MIteratorContainer,
|
||||
type MNode,
|
||||
} from '@tmagic/core';
|
||||
import { registerNodeHooks, useApp } from '@tmagic/vue-runtime-help';
|
||||
import { type ComponentProps, registerNodeHooks, useApp } from '@tmagic/vue-runtime-help';
|
||||
|
||||
import IteratorItem from './IteratorItem.vue';
|
||||
|
||||
@ -40,101 +40,79 @@ interface IteratorItemSchema {
|
||||
};
|
||||
}
|
||||
|
||||
export default defineComponent({
|
||||
defineOptions({
|
||||
name: 'tmagic-iterator-container',
|
||||
});
|
||||
|
||||
components: { IteratorItem },
|
||||
const props = defineProps<ComponentProps<IteratorContainerSchema>>();
|
||||
|
||||
props: {
|
||||
config: {
|
||||
type: Object as PropType<IteratorContainerSchema>,
|
||||
required: true,
|
||||
},
|
||||
iteratorIndex: Array as PropType<number[]>,
|
||||
iteratorContainerId: Array as PropType<Id[]>,
|
||||
containerIndex: Number,
|
||||
pageFragmentContainerId: [String, Number] as PropType<Id>,
|
||||
model: {
|
||||
type: Object,
|
||||
default: () => ({}),
|
||||
},
|
||||
},
|
||||
const { app, node } = useApp(props);
|
||||
registerNodeHooks(node);
|
||||
|
||||
setup(props) {
|
||||
const { app, node } = useApp(props);
|
||||
registerNodeHooks(node);
|
||||
const configs = computed<IteratorItemSchema[]>(() => {
|
||||
let { iteratorData = [] } = props.config;
|
||||
const { itemConfig, dsField, items } = props.config;
|
||||
|
||||
const configs = computed<IteratorItemSchema[]>(() => {
|
||||
let { iteratorData = [] } = props.config;
|
||||
const { itemConfig, dsField, items } = props.config;
|
||||
if (!Array.isArray(iteratorData)) {
|
||||
iteratorData = [];
|
||||
}
|
||||
|
||||
if (!Array.isArray(iteratorData)) {
|
||||
iteratorData = [];
|
||||
}
|
||||
if (app?.platform === 'editor' && !iteratorData.length) {
|
||||
iteratorData.push({});
|
||||
}
|
||||
|
||||
if (app?.platform === 'editor' && !iteratorData.length) {
|
||||
iteratorData.push({});
|
||||
}
|
||||
return iteratorData.map((itemData: any) => {
|
||||
const condResult =
|
||||
app?.platform !== 'editor'
|
||||
? (app?.dataSourceManager?.compliedIteratorItemConds(itemData, itemConfig, dsField) ?? true)
|
||||
: true;
|
||||
|
||||
return iteratorData.map((itemData: any) => {
|
||||
const condResult =
|
||||
app?.platform !== 'editor'
|
||||
? (app?.dataSourceManager?.compliedIteratorItemConds(itemData, itemConfig, dsField) ?? true)
|
||||
: true;
|
||||
|
||||
const newItems = app?.dataSourceManager?.compliedIteratorItems(itemData, items, dsField) ?? items;
|
||||
|
||||
return {
|
||||
items: newItems,
|
||||
condResult,
|
||||
style: {
|
||||
position: 'relative',
|
||||
left: 0,
|
||||
top: 0,
|
||||
...itemConfig.style,
|
||||
},
|
||||
};
|
||||
});
|
||||
});
|
||||
|
||||
watch(
|
||||
configs,
|
||||
(configs) => {
|
||||
if (!props.config.id) {
|
||||
return;
|
||||
}
|
||||
|
||||
const iteratorContainerNode = app?.getNode<TMagicIteratorContainer>(props.config.id, {
|
||||
iteratorContainerId: props.iteratorContainerId,
|
||||
iteratorIndex: props.iteratorIndex,
|
||||
pageFragmentContainerId: props.pageFragmentContainerId,
|
||||
});
|
||||
|
||||
if (!iteratorContainerNode) {
|
||||
return;
|
||||
}
|
||||
|
||||
iteratorContainerNode.resetNodes();
|
||||
|
||||
configs.forEach((config, index) => {
|
||||
iteratorContainerNode.setNodes(config.items, index);
|
||||
});
|
||||
},
|
||||
{
|
||||
immediate: true,
|
||||
},
|
||||
);
|
||||
|
||||
const clickHandler = () => {
|
||||
if (app && node) {
|
||||
app.emit(`${COMMON_EVENT_PREFIX}click`, node);
|
||||
}
|
||||
};
|
||||
const newItems = app?.dataSourceManager?.compliedIteratorItems(itemData, items, dsField) ?? items;
|
||||
|
||||
return {
|
||||
configs,
|
||||
clickHandler,
|
||||
items: newItems,
|
||||
condResult,
|
||||
style: {
|
||||
position: 'relative',
|
||||
left: 0,
|
||||
top: 0,
|
||||
...itemConfig.style,
|
||||
},
|
||||
};
|
||||
},
|
||||
});
|
||||
});
|
||||
|
||||
watch(
|
||||
configs,
|
||||
(configs) => {
|
||||
if (!props.config.id) {
|
||||
return;
|
||||
}
|
||||
|
||||
const iteratorContainerNode = app?.getNode<TMagicIteratorContainer>(props.config.id, {
|
||||
iteratorContainerId: props.iteratorContainerId,
|
||||
iteratorIndex: props.iteratorIndex,
|
||||
pageFragmentContainerId: props.pageFragmentContainerId,
|
||||
});
|
||||
|
||||
if (!iteratorContainerNode) {
|
||||
return;
|
||||
}
|
||||
|
||||
iteratorContainerNode.resetNodes();
|
||||
|
||||
configs.forEach((config, index) => {
|
||||
iteratorContainerNode.setNodes(config.items, index);
|
||||
});
|
||||
},
|
||||
{
|
||||
immediate: true,
|
||||
},
|
||||
);
|
||||
|
||||
const clickHandler = () => {
|
||||
if (app && node) {
|
||||
app.emit(`${COMMON_EVENT_PREFIX}click`, node);
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
@ -10,8 +10,8 @@
|
||||
></component>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { defineComponent, inject, type PropType } from 'vue-demi';
|
||||
<script lang="ts" setup>
|
||||
import { inject } from 'vue';
|
||||
|
||||
import type TMagicApp from '@tmagic/core';
|
||||
import { type Id } from '@tmagic/core';
|
||||
@ -19,37 +19,25 @@ import { useComponent, useComponentStatus } from '@tmagic/vue-runtime-help';
|
||||
|
||||
import { IteratorItemSchema } from './type';
|
||||
|
||||
export default defineComponent({
|
||||
interface IteratorItemProps {
|
||||
config: IteratorItemSchema;
|
||||
iteratorIndex?: number[];
|
||||
iteratorContainerId?: Id[];
|
||||
containerIndex?: number;
|
||||
pageFragmentContainerId?: Id;
|
||||
index?: number;
|
||||
model?: Record<string, any>;
|
||||
}
|
||||
|
||||
defineOptions({
|
||||
name: 'tmagic-iterator-container-item',
|
||||
|
||||
props: {
|
||||
config: {
|
||||
type: Object as PropType<IteratorItemSchema>,
|
||||
required: true,
|
||||
},
|
||||
iteratorIndex: Array as PropType<number[]>,
|
||||
iteratorContainerId: Array as PropType<Id[]>,
|
||||
containerIndex: Number,
|
||||
pageFragmentContainerId: [String, Number] as PropType<Id>,
|
||||
index: Number,
|
||||
model: {
|
||||
type: Object,
|
||||
default: () => ({}),
|
||||
},
|
||||
},
|
||||
|
||||
setup(props) {
|
||||
const app = inject<TMagicApp>('app');
|
||||
|
||||
const containerComponent = useComponent({ componentType: 'container', app });
|
||||
|
||||
const { style, className } = useComponentStatus(props);
|
||||
|
||||
return {
|
||||
style,
|
||||
className,
|
||||
containerComponent,
|
||||
};
|
||||
},
|
||||
});
|
||||
|
||||
const props = defineProps<IteratorItemProps>();
|
||||
|
||||
const app = inject<TMagicApp>('app');
|
||||
|
||||
const containerComponent = useComponent({ componentType: 'container', app });
|
||||
|
||||
const { style, className } = useComponentStatus(props);
|
||||
</script>
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
{
|
||||
"version": "0.2.0",
|
||||
"version": "1.0.0",
|
||||
"name": "@tmagic/vue-overlay",
|
||||
"type": "module",
|
||||
"main": "src/index.ts",
|
||||
@ -14,14 +14,13 @@
|
||||
"url": "https://github.com/Tencent/tmagic-editor.git"
|
||||
},
|
||||
"dependencies": {
|
||||
"@tmagic/form-schema": "workspace:^",
|
||||
"vue-demi": "^0.14.10"
|
||||
"@tmagic/form-schema": "workspace:^"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"@tmagic/core": "workspace:^",
|
||||
"@tmagic/vue-runtime-help": "workspace:^",
|
||||
"vue-demi": ">=0.14.7",
|
||||
"typescript": "catalog:"
|
||||
"typescript": "catalog:",
|
||||
"vue": ">=3.5.0"
|
||||
},
|
||||
"peerDependenciesMeta": {
|
||||
"typescript": {
|
||||
|
||||
@ -4,84 +4,72 @@
|
||||
</component>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { defineComponent, inject, onBeforeUnmount, type PropType, ref } from 'vue-demi';
|
||||
<script lang="ts" setup>
|
||||
import { inject, onBeforeUnmount, ref } from 'vue';
|
||||
|
||||
import type TMagicApp from '@tmagic/core';
|
||||
import { type Id, IS_DSL_NODE_KEY, type MContainer, type MNode, type MPage } from '@tmagic/core';
|
||||
import { registerNodeHooks, useComponent, useNode } from '@tmagic/vue-runtime-help';
|
||||
import { type ComponentProps, registerNodeHooks, useComponent, useNode } from '@tmagic/vue-runtime-help';
|
||||
|
||||
interface OverlaySchema extends Omit<MContainer, 'id'> {
|
||||
id?: Id;
|
||||
type?: 'overlay';
|
||||
}
|
||||
|
||||
export default defineComponent({
|
||||
defineOptions({
|
||||
name: 'tmagic-overlay',
|
||||
});
|
||||
|
||||
props: {
|
||||
config: {
|
||||
type: Object as PropType<OverlaySchema>,
|
||||
required: true,
|
||||
},
|
||||
iteratorIndex: Array as PropType<number[]>,
|
||||
iteratorContainerId: Array as PropType<Id[]>,
|
||||
containerIndex: Number,
|
||||
pageFragmentContainerId: [String, Number] as PropType<Id>,
|
||||
model: {
|
||||
type: Object,
|
||||
default: () => ({}),
|
||||
},
|
||||
const props = defineProps<ComponentProps<OverlaySchema>>();
|
||||
|
||||
const visible = ref(false);
|
||||
|
||||
const app = inject<TMagicApp>('app');
|
||||
const containerComponent = useComponent({ componentType: 'container', app });
|
||||
|
||||
const openOverlay = () => {
|
||||
visible.value = true;
|
||||
app?.emit('overlay:open', node);
|
||||
};
|
||||
|
||||
const closeOverlay = () => {
|
||||
visible.value = false;
|
||||
app?.emit('overlay:close', node);
|
||||
};
|
||||
|
||||
const editorSelectHandler = (
|
||||
_info: {
|
||||
node: MNode;
|
||||
page: MPage;
|
||||
parent: MContainer;
|
||||
},
|
||||
path: MNode[],
|
||||
) => {
|
||||
if (path.find((node: MNode) => node.id === props.config.id)) {
|
||||
openOverlay();
|
||||
} else {
|
||||
closeOverlay();
|
||||
}
|
||||
};
|
||||
|
||||
setup(props) {
|
||||
const visible = ref(false);
|
||||
app?.page?.on('editor:select', editorSelectHandler);
|
||||
|
||||
const app = inject<TMagicApp>('app');
|
||||
const containerComponent = useComponent({ componentType: 'container', app });
|
||||
app?.on('page-change', () => {
|
||||
app?.page?.on('editor:select', editorSelectHandler);
|
||||
});
|
||||
|
||||
const openOverlay = () => {
|
||||
visible.value = true;
|
||||
app?.emit('overlay:open', node);
|
||||
};
|
||||
onBeforeUnmount(() => {
|
||||
app?.page?.off('editor:select', editorSelectHandler);
|
||||
});
|
||||
|
||||
const closeOverlay = () => {
|
||||
visible.value = false;
|
||||
app?.emit('overlay:close', node);
|
||||
};
|
||||
const node = useNode(props, app);
|
||||
registerNodeHooks(node, {
|
||||
openOverlay,
|
||||
closeOverlay,
|
||||
});
|
||||
|
||||
const editorSelectHandler = (
|
||||
info: {
|
||||
node: MNode;
|
||||
page: MPage;
|
||||
parent: MContainer;
|
||||
},
|
||||
path: MNode[],
|
||||
) => {
|
||||
if (path.find((node: MNode) => node.id === props.config.id)) {
|
||||
openOverlay();
|
||||
} else {
|
||||
closeOverlay();
|
||||
}
|
||||
};
|
||||
|
||||
app?.page?.on('editor:select', editorSelectHandler);
|
||||
|
||||
onBeforeUnmount(() => {
|
||||
app?.page?.off('editor:select', editorSelectHandler);
|
||||
});
|
||||
|
||||
const node = useNode(props, app);
|
||||
registerNodeHooks(node, {
|
||||
openOverlay,
|
||||
closeOverlay,
|
||||
});
|
||||
|
||||
return {
|
||||
containerComponent,
|
||||
visible,
|
||||
IS_DSL_NODE_KEY,
|
||||
};
|
||||
},
|
||||
defineExpose({
|
||||
openOverlay,
|
||||
closeOverlay,
|
||||
});
|
||||
</script>
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
{
|
||||
"version": "0.2.2",
|
||||
"version": "1.0.0",
|
||||
"name": "@tmagic/vue-page-fragment-container",
|
||||
"type": "module",
|
||||
"main": "src/index.ts",
|
||||
@ -14,13 +14,13 @@
|
||||
"url": "https://github.com/Tencent/tmagic-editor.git"
|
||||
},
|
||||
"dependencies": {
|
||||
"@tmagic/form-schema": "workspace:^",
|
||||
"vue-demi": "^0.14.10"
|
||||
"@tmagic/form-schema": "workspace:^"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"@tmagic/core": "workspace:^",
|
||||
"@tmagic/vue-runtime-help": "workspace:^",
|
||||
"typescript": "catalog:"
|
||||
"typescript": "catalog:",
|
||||
"vue": ">=3.5.0"
|
||||
},
|
||||
"peerDependenciesMeta": {
|
||||
"typescript": {
|
||||
|
||||
@ -11,55 +11,35 @@
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { computed, defineComponent, type PropType, provide } from 'vue-demi';
|
||||
<script lang="ts" setup>
|
||||
import { computed, provide } from 'vue';
|
||||
|
||||
import { type Id, type MComponent, NodeType, PAGE_FRAGMENT_CONTAINER_ID_KEY } from '@tmagic/core';
|
||||
import { registerNodeHooks, useApp, useComponent, useDsl } from '@tmagic/vue-runtime-help';
|
||||
import { type MComponent, NodeType, PAGE_FRAGMENT_CONTAINER_ID_KEY } from '@tmagic/core';
|
||||
import { type ComponentProps, registerNodeHooks, useApp, useComponent, useDsl } from '@tmagic/vue-runtime-help';
|
||||
|
||||
export default defineComponent({
|
||||
defineOptions({
|
||||
name: 'tmagic-page-fragment-container',
|
||||
});
|
||||
|
||||
props: {
|
||||
config: {
|
||||
type: Object as PropType<MComponent>,
|
||||
required: true,
|
||||
},
|
||||
iteratorIndex: Array as PropType<number[]>,
|
||||
iteratorContainerId: Array as PropType<Id[]>,
|
||||
containerIndex: Number,
|
||||
pageFragmentContainerId: [String, Number] as PropType<Id>,
|
||||
model: {
|
||||
type: Object,
|
||||
default: () => ({}),
|
||||
},
|
||||
},
|
||||
const props = defineProps<ComponentProps<MComponent>>();
|
||||
|
||||
setup(props) {
|
||||
provide(PAGE_FRAGMENT_CONTAINER_ID_KEY, props.config.id);
|
||||
provide(PAGE_FRAGMENT_CONTAINER_ID_KEY, props.config.id);
|
||||
|
||||
const { app, node } = useApp(props);
|
||||
registerNodeHooks(node);
|
||||
const { app, node } = useApp(props);
|
||||
registerNodeHooks(node);
|
||||
|
||||
const containerComponent = useComponent({ componentType: 'container', app });
|
||||
const containerComponent = useComponent({ componentType: 'container', app });
|
||||
|
||||
if (!props.config.id) {
|
||||
throw new Error('page-fragment-container must have id');
|
||||
}
|
||||
if (!props.config.id) {
|
||||
throw new Error('page-fragment-container must have id');
|
||||
}
|
||||
|
||||
const { pageConfig: fragment } = useDsl(app, props.config.id);
|
||||
const { pageConfig: fragment } = useDsl(app, props.config.id);
|
||||
|
||||
const containerConfig = computed(() => {
|
||||
if (!fragment.value) return { items: [], id: '', type: NodeType.CONTAINER };
|
||||
const containerConfig = computed(() => {
|
||||
if (!fragment.value) return { items: [], id: '', type: NodeType.CONTAINER };
|
||||
|
||||
return fragment.value;
|
||||
});
|
||||
|
||||
return {
|
||||
containerComponent,
|
||||
containerConfig,
|
||||
};
|
||||
},
|
||||
return fragment.value;
|
||||
});
|
||||
</script>
|
||||
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
{
|
||||
"version": "0.2.0",
|
||||
"version": "1.0.0",
|
||||
"name": "@tmagic/vue-page-fragment",
|
||||
"type": "module",
|
||||
"main": "src/index.ts",
|
||||
@ -14,13 +14,13 @@
|
||||
"url": "https://github.com/Tencent/tmagic-editor.git"
|
||||
},
|
||||
"dependencies": {
|
||||
"@tmagic/form-schema": "workspace:^",
|
||||
"vue-demi": "^0.14.10"
|
||||
"@tmagic/form-schema": "workspace:^"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"@tmagic/core": "workspace:^",
|
||||
"@tmagic/vue-runtime-help": "workspace:^",
|
||||
"typescript": "catalog:"
|
||||
"typescript": "catalog:",
|
||||
"vue": ">=3.5.0"
|
||||
},
|
||||
"peerDependenciesMeta": {
|
||||
"typescript": {
|
||||
|
||||
@ -8,40 +8,29 @@
|
||||
></component>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { defineComponent, inject, type PropType } from 'vue-demi';
|
||||
<script lang="ts" setup>
|
||||
import { inject } from 'vue';
|
||||
|
||||
import type TMagicApp from '@tmagic/core';
|
||||
import { IS_DSL_NODE_KEY, type MPageFragment } from '@tmagic/core';
|
||||
import { registerNodeHooks, useComponent, useComponentStatus, useNode } from '@tmagic/vue-runtime-help';
|
||||
import {
|
||||
type ComponentProps,
|
||||
registerNodeHooks,
|
||||
useComponent,
|
||||
useComponentStatus,
|
||||
useNode,
|
||||
} from '@tmagic/vue-runtime-help';
|
||||
|
||||
export default defineComponent({
|
||||
defineOptions({
|
||||
name: 'tmagic-page-fragment',
|
||||
|
||||
props: {
|
||||
config: {
|
||||
type: Object as PropType<MPageFragment>,
|
||||
required: true,
|
||||
},
|
||||
model: {
|
||||
type: Object,
|
||||
default: () => ({}),
|
||||
},
|
||||
},
|
||||
|
||||
setup(props) {
|
||||
const app = inject<TMagicApp>('app');
|
||||
const node = useNode(props, app);
|
||||
registerNodeHooks(node);
|
||||
|
||||
const containerComponent = useComponent({ componentType: 'container', app });
|
||||
const { style, className } = useComponentStatus(props);
|
||||
return {
|
||||
style,
|
||||
className,
|
||||
containerComponent,
|
||||
IS_DSL_NODE_KEY,
|
||||
};
|
||||
},
|
||||
});
|
||||
|
||||
const props = defineProps<ComponentProps<MPageFragment>>();
|
||||
|
||||
const app = inject<TMagicApp>('app');
|
||||
const node = useNode(props, app);
|
||||
registerNodeHooks(node);
|
||||
|
||||
const containerComponent = useComponent({ componentType: 'container', app });
|
||||
const { style, className } = useComponentStatus(props);
|
||||
</script>
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
{
|
||||
"version": "0.2.1",
|
||||
"version": "1.0.0",
|
||||
"name": "@tmagic/vue-page",
|
||||
"type": "module",
|
||||
"main": "src/index.ts",
|
||||
@ -14,13 +14,13 @@
|
||||
"url": "https://github.com/Tencent/tmagic-editor.git"
|
||||
},
|
||||
"dependencies": {
|
||||
"@tmagic/form-schema": "workspace:^",
|
||||
"vue-demi": "^0.14.10"
|
||||
"@tmagic/form-schema": "workspace:^"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"@tmagic/core": "workspace:^",
|
||||
"@tmagic/vue-runtime-help": "workspace:^",
|
||||
"typescript": "catalog:"
|
||||
"typescript": "catalog:",
|
||||
"vue": ">=3.5.0"
|
||||
},
|
||||
"peerDependenciesMeta": {
|
||||
"typescript": {
|
||||
|
||||
@ -78,6 +78,9 @@ export default defineFormConfig([
|
||||
name: 'css',
|
||||
type: 'vs-code',
|
||||
language: 'css',
|
||||
height: '500px',
|
||||
autosize: {
|
||||
minRows: 3,
|
||||
maxRows: 20,
|
||||
},
|
||||
},
|
||||
]);
|
||||
|
||||
@ -8,8 +8,8 @@
|
||||
></component>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { defineComponent, inject, nextTick, type PropType, watch } from 'vue-demi';
|
||||
<script lang="ts" setup>
|
||||
import { inject, nextTick, watch } from 'vue';
|
||||
|
||||
import type TMagicApp from '@tmagic/core';
|
||||
import { asyncLoadCss, asyncLoadJs, IS_DSL_NODE_KEY, type MPage } from '@tmagic/core';
|
||||
@ -37,64 +37,54 @@ const createJs = (config: MPage) => {
|
||||
}
|
||||
};
|
||||
|
||||
export default defineComponent({
|
||||
defineOptions({
|
||||
name: 'tmagic-page',
|
||||
|
||||
props: {
|
||||
config: {
|
||||
type: Object as PropType<MPage>,
|
||||
required: true,
|
||||
},
|
||||
model: {
|
||||
type: Object,
|
||||
default: () => ({}),
|
||||
},
|
||||
},
|
||||
|
||||
setup(props) {
|
||||
const app = inject<TMagicApp>('app');
|
||||
|
||||
if (app?.jsEngine === 'browser') {
|
||||
createCss(props.config);
|
||||
createJs(props.config);
|
||||
}
|
||||
|
||||
const containerComponent = useComponent({ componentType: 'container', app });
|
||||
|
||||
const { style, className } = useComponentStatus(props);
|
||||
|
||||
const refresh = () => {
|
||||
window.location.reload();
|
||||
};
|
||||
|
||||
watch(
|
||||
() => props.config,
|
||||
async (config, preConfig) => {
|
||||
const node = useNode({ config: { ...config, [IS_DSL_NODE_KEY]: true } }, app);
|
||||
|
||||
if (config.id !== preConfig?.id) {
|
||||
node?.setInstance({ config: props.config, refresh });
|
||||
node?.emit('created');
|
||||
}
|
||||
await nextTick();
|
||||
|
||||
if (config.id !== preConfig?.id) {
|
||||
node?.emit('mounted');
|
||||
const preNode = useNode({ config: { ...preConfig, [IS_DSL_NODE_KEY]: true } }, app);
|
||||
preNode?.emit('destroy');
|
||||
}
|
||||
},
|
||||
{
|
||||
immediate: true,
|
||||
},
|
||||
);
|
||||
|
||||
return {
|
||||
style,
|
||||
className,
|
||||
containerComponent,
|
||||
IS_DSL_NODE_KEY,
|
||||
};
|
||||
},
|
||||
});
|
||||
|
||||
const props = withDefaults(
|
||||
defineProps<{
|
||||
config: MPage;
|
||||
model?: Record<string, any>;
|
||||
}>(),
|
||||
{
|
||||
model: () => ({}),
|
||||
},
|
||||
);
|
||||
|
||||
const app = inject<TMagicApp>('app');
|
||||
|
||||
if (app?.jsEngine === 'browser') {
|
||||
createCss(props.config);
|
||||
createJs(props.config);
|
||||
}
|
||||
|
||||
const containerComponent = useComponent({ componentType: 'container', app });
|
||||
|
||||
const { style, className } = useComponentStatus(props);
|
||||
|
||||
const refresh = () => {
|
||||
window.location.reload();
|
||||
};
|
||||
|
||||
watch(
|
||||
() => props.config,
|
||||
async (config, preConfig) => {
|
||||
const node = useNode({ config: { ...config, [IS_DSL_NODE_KEY]: true } }, app);
|
||||
|
||||
if (config.id !== preConfig?.id) {
|
||||
node?.setInstance({ config: props.config, refresh });
|
||||
node?.emit('created');
|
||||
}
|
||||
await nextTick();
|
||||
|
||||
if (config.id !== preConfig?.id) {
|
||||
node?.emit('mounted');
|
||||
const preNode = useNode({ config: { ...preConfig, [IS_DSL_NODE_KEY]: true } }, app);
|
||||
preNode?.emit('destroy');
|
||||
}
|
||||
},
|
||||
{
|
||||
immediate: true,
|
||||
},
|
||||
);
|
||||
</script>
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
{
|
||||
"version": "0.2.0",
|
||||
"version": "1.0.0",
|
||||
"name": "@tmagic/vue-qrcode",
|
||||
"type": "module",
|
||||
"main": "src/index.ts",
|
||||
@ -15,22 +15,17 @@
|
||||
},
|
||||
"dependencies": {
|
||||
"@tmagic/form-schema": "workspace:^",
|
||||
"qrcode": "^1.5.0",
|
||||
"vue-demi": "^0.14.10"
|
||||
"qrcode": "^1.5.0"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"@tmagic/core": "workspace:^",
|
||||
"@tmagic/vue-runtime-help": "workspace:^",
|
||||
"@vue/composition-api": ">=1.7.2",
|
||||
"typescript": "catalog:",
|
||||
"vue": ">=2.6.0 || >=3.5.0"
|
||||
"vue": ">=3.5.0"
|
||||
},
|
||||
"peerDependenciesMeta": {
|
||||
"typescript": {
|
||||
"optional": true
|
||||
},
|
||||
"@vue/composition-api": {
|
||||
"optional": true
|
||||
}
|
||||
},
|
||||
"devDependencies": {
|
||||
|
||||
@ -2,13 +2,13 @@
|
||||
<img :src="imgUrl" @click="clickHandler" />
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { defineComponent, inject, type PropType, ref, watch } from 'vue-demi';
|
||||
<script lang="ts" setup>
|
||||
import { inject, ref, watch } from 'vue';
|
||||
import QRCode from 'qrcode';
|
||||
|
||||
import type TMagicApp from '@tmagic/core';
|
||||
import { COMMON_EVENT_PREFIX, type Id, type MComponent } from '@tmagic/core';
|
||||
import { registerNodeHooks, useNode } from '@tmagic/vue-runtime-help';
|
||||
import { type ComponentProps, registerNodeHooks, useNode } from '@tmagic/vue-runtime-help';
|
||||
|
||||
interface QrCodeSchema extends Omit<MComponent, 'id'> {
|
||||
id?: Id;
|
||||
@ -16,54 +16,34 @@ interface QrCodeSchema extends Omit<MComponent, 'id'> {
|
||||
url: string;
|
||||
}
|
||||
|
||||
export default defineComponent({
|
||||
defineOptions({
|
||||
name: 'tmagic-qrcode',
|
||||
|
||||
props: {
|
||||
config: {
|
||||
type: Object as PropType<QrCodeSchema>,
|
||||
required: true,
|
||||
},
|
||||
iteratorIndex: Array as PropType<number[]>,
|
||||
iteratorContainerId: Array as PropType<Id[]>,
|
||||
containerIndex: Number,
|
||||
pageFragmentContainerId: [String, Number] as PropType<Id>,
|
||||
model: {
|
||||
type: Object,
|
||||
default: () => ({}),
|
||||
},
|
||||
},
|
||||
|
||||
setup(props) {
|
||||
const imgUrl = ref();
|
||||
|
||||
watch(
|
||||
() => props.config.url,
|
||||
(url = '') => {
|
||||
QRCode.toDataURL(url, (e: any, url: string) => {
|
||||
if (e) console.error(e);
|
||||
imgUrl.value = url;
|
||||
});
|
||||
},
|
||||
{
|
||||
immediate: true,
|
||||
},
|
||||
);
|
||||
|
||||
const app = inject<TMagicApp>('app');
|
||||
const node = useNode(props);
|
||||
registerNodeHooks(node);
|
||||
|
||||
const clickHandler = () => {
|
||||
if (app && node) {
|
||||
app.emit(`${COMMON_EVENT_PREFIX}click`, node);
|
||||
}
|
||||
};
|
||||
|
||||
return {
|
||||
imgUrl,
|
||||
clickHandler,
|
||||
};
|
||||
},
|
||||
});
|
||||
|
||||
const props = defineProps<ComponentProps<QrCodeSchema>>();
|
||||
|
||||
const imgUrl = ref();
|
||||
|
||||
watch(
|
||||
() => props.config.url,
|
||||
(url = '') => {
|
||||
QRCode.toDataURL(url, (e: any, url: string) => {
|
||||
if (e) console.error(e);
|
||||
imgUrl.value = url;
|
||||
});
|
||||
},
|
||||
{
|
||||
immediate: true,
|
||||
},
|
||||
);
|
||||
|
||||
const app = inject<TMagicApp>('app');
|
||||
const node = useNode(props);
|
||||
registerNodeHooks(node);
|
||||
|
||||
const clickHandler = () => {
|
||||
if (app && node) {
|
||||
app.emit(`${COMMON_EVENT_PREFIX}click`, node);
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
{
|
||||
"version": "0.2.1",
|
||||
"version": "1.0.0",
|
||||
"name": "@tmagic/vue-text",
|
||||
"type": "module",
|
||||
"main": "src/index.ts",
|
||||
@ -14,22 +14,17 @@
|
||||
"url": "https://github.com/Tencent/tmagic-editor.git"
|
||||
},
|
||||
"dependencies": {
|
||||
"@tmagic/form-schema": "workspace:^",
|
||||
"vue-demi": "^0.14.10"
|
||||
"@tmagic/form-schema": "workspace:^"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"@tmagic/core": "workspace:^",
|
||||
"@tmagic/vue-runtime-help": "workspace:^",
|
||||
"@vue/composition-api": ">=1.7.2",
|
||||
"typescript": "catalog:",
|
||||
"vue": ">=2.6.0 || >=3.5.0"
|
||||
"vue": ">=3.5.0"
|
||||
},
|
||||
"peerDependenciesMeta": {
|
||||
"typescript": {
|
||||
"optional": true
|
||||
},
|
||||
"@vue/composition-api": {
|
||||
"optional": true
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -2,12 +2,12 @@
|
||||
<p @click="clickHandler" v-html="config.text"></p>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { defineComponent, inject, type PropType } from 'vue-demi';
|
||||
<script lang="ts" setup>
|
||||
import { inject } from 'vue';
|
||||
|
||||
import type TMagicApp from '@tmagic/core';
|
||||
import { COMMON_EVENT_PREFIX, type Id, type MComponent } from '@tmagic/core';
|
||||
import { registerNodeHooks, useNode } from '@tmagic/vue-runtime-help';
|
||||
import { type ComponentProps, registerNodeHooks, useNode } from '@tmagic/vue-runtime-help';
|
||||
|
||||
interface TextSchema extends Omit<MComponent, 'id'> {
|
||||
id?: Id;
|
||||
@ -15,38 +15,19 @@ interface TextSchema extends Omit<MComponent, 'id'> {
|
||||
text: string;
|
||||
}
|
||||
|
||||
export default defineComponent({
|
||||
defineOptions({
|
||||
name: 'tmagic-text',
|
||||
|
||||
props: {
|
||||
config: {
|
||||
type: Object as PropType<TextSchema>,
|
||||
required: true,
|
||||
},
|
||||
iteratorIndex: Array as PropType<number[]>,
|
||||
iteratorContainerId: Array as PropType<Id[]>,
|
||||
containerIndex: Number,
|
||||
pageFragmentContainerId: [String, Number] as PropType<Id>,
|
||||
model: {
|
||||
type: Object,
|
||||
default: () => ({}),
|
||||
},
|
||||
},
|
||||
|
||||
setup(props) {
|
||||
const app = inject<TMagicApp>('app');
|
||||
const node = useNode(props);
|
||||
registerNodeHooks(node);
|
||||
|
||||
const clickHandler = () => {
|
||||
if (app && node) {
|
||||
app.emit(`${COMMON_EVENT_PREFIX}click`, node);
|
||||
}
|
||||
};
|
||||
|
||||
return {
|
||||
clickHandler,
|
||||
};
|
||||
},
|
||||
});
|
||||
|
||||
const props = defineProps<ComponentProps<TextSchema>>();
|
||||
|
||||
const app = inject<TMagicApp>('app');
|
||||
const node = useNode(props);
|
||||
registerNodeHooks(node);
|
||||
|
||||
const clickHandler = () => {
|
||||
if (app && node) {
|
||||
app.emit(`${COMMON_EVENT_PREFIX}click`, node);
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user