mirror of
https://github.com/Tencent/tmagic-editor.git
synced 2025-04-05 19:41:40 +08:00
feat: 统一vue ui组件,将ui中的组件独立成包
This commit is contained in:
roymondchen
roymondchen
parent
5ed534e364
commit
3758cf8e0a
@ -1,51 +0,0 @@
|
|||||||
<template>
|
|
||||||
<component
|
|
||||||
v-if="display"
|
|
||||||
:is="tagName"
|
|
||||||
:id="config.id"
|
|
||||||
:class="`magic-ui-component${config.className ? ` ${config.className}` : ''}`"
|
|
||||||
:style="style"
|
|
||||||
:config="config"
|
|
||||||
></component>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script lang="ts">
|
|
||||||
import { computed, defineComponent, getCurrentInstance, inject, PropType, provide } from 'vue';
|
|
||||||
|
|
||||||
import Core from '@tmagic/core';
|
|
||||||
import { MComponent } from '@tmagic/schema';
|
|
||||||
import { toLine } from '@tmagic/utils';
|
|
||||||
|
|
||||||
export default defineComponent({
|
|
||||||
props: {
|
|
||||||
config: {
|
|
||||||
type: Object as PropType<MComponent>,
|
|
||||||
default: () => ({}),
|
|
||||||
},
|
|
||||||
},
|
|
||||||
|
|
||||||
setup(props) {
|
|
||||||
const vm = getCurrentInstance()?.proxy;
|
|
||||||
const app: Core | undefined = inject('app');
|
|
||||||
|
|
||||||
provide('hoc', vm);
|
|
||||||
|
|
||||||
return {
|
|
||||||
tagName: computed(() => `magic-ui-${toLine(props.config.type)}`),
|
|
||||||
style: computed(() => app?.transformStyle(props.config.style || {})),
|
|
||||||
|
|
||||||
display: computed(() => {
|
|
||||||
if (props.config.visible === false) return false;
|
|
||||||
if (props.config.condResult === false) return false;
|
|
||||||
|
|
||||||
const displayCfg = props.config?.display;
|
|
||||||
|
|
||||||
if (typeof displayCfg === 'function') {
|
|
||||||
return displayCfg(app);
|
|
||||||
}
|
|
||||||
return displayCfg !== false;
|
|
||||||
}),
|
|
||||||
};
|
|
||||||
},
|
|
||||||
});
|
|
||||||
</script>
|
|
||||||
@ -1,64 +0,0 @@
|
|||||||
<template>
|
|
||||||
<button class="magic-ui-button" @click="clickHandler">
|
|
||||||
<slot>
|
|
||||||
<magic-ui-text :config="textConfig"></magic-ui-text>
|
|
||||||
</slot>
|
|
||||||
</button>
|
|
||||||
</template>
|
|
||||||
<script lang="ts">
|
|
||||||
import { computed, defineComponent, getCurrentInstance, PropType, ref } from 'vue';
|
|
||||||
|
|
||||||
import type { MComponent } from '@tmagic/schema';
|
|
||||||
|
|
||||||
import useApp from '../useApp';
|
|
||||||
|
|
||||||
export default defineComponent({
|
|
||||||
props: {
|
|
||||||
config: {
|
|
||||||
type: Object as PropType<MComponent>,
|
|
||||||
default: () => ({}),
|
|
||||||
},
|
|
||||||
|
|
||||||
model: {
|
|
||||||
type: Object,
|
|
||||||
default: () => ({}),
|
|
||||||
},
|
|
||||||
},
|
|
||||||
setup(props) {
|
|
||||||
useApp(props);
|
|
||||||
const vm = getCurrentInstance()?.proxy;
|
|
||||||
const actions = ref<Function[]>([]);
|
|
||||||
const actualActions = computed(() => [
|
|
||||||
typeof props.config.preAction === 'function' ? props.config.preAction : () => true,
|
|
||||||
...actions.value,
|
|
||||||
typeof props.config.postAction === 'function' ? props.config.postAction : () => true,
|
|
||||||
]);
|
|
||||||
function pushAction(action: Function): void {
|
|
||||||
actions.value.push(action);
|
|
||||||
}
|
|
||||||
async function clickHandler(): Promise<void> {
|
|
||||||
for (const fn of actualActions.value) {
|
|
||||||
if (typeof fn === 'function') {
|
|
||||||
const ret = await fn(vm, { model: props.model });
|
|
||||||
if (ret === false) {
|
|
||||||
break;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
const textConfig = computed(() => ({
|
|
||||||
type: 'text',
|
|
||||||
text: props.config?.text || '',
|
|
||||||
disabledText: props.config?.disabledText || '',
|
|
||||||
html: props.config?.html || '',
|
|
||||||
}));
|
|
||||||
|
|
||||||
return {
|
|
||||||
pushAction,
|
|
||||||
clickHandler,
|
|
||||||
textConfig,
|
|
||||||
};
|
|
||||||
},
|
|
||||||
});
|
|
||||||
</script>
|
|
||||||
@ -1,52 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div
|
|
||||||
v-if="display()"
|
|
||||||
:id="config.id"
|
|
||||||
:class="`magic-ui-container magic-layout-${config.layout}${config.className ? ` ${config.className}` : ''}`"
|
|
||||||
:style="style"
|
|
||||||
>
|
|
||||||
<slot></slot>
|
|
||||||
<magic-ui-component v-for="item in config.items" :key="item.id" :config="item"></magic-ui-component>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script lang="ts">
|
|
||||||
import { computed, defineComponent, PropType } from 'vue';
|
|
||||||
|
|
||||||
import type { MContainer } from '@tmagic/schema';
|
|
||||||
|
|
||||||
import Component from '../Component.vue';
|
|
||||||
import useApp from '../useApp';
|
|
||||||
import useCommonMethod from '../useCommonMethod';
|
|
||||||
|
|
||||||
export default defineComponent({
|
|
||||||
components: {
|
|
||||||
'magic-ui-component': Component,
|
|
||||||
},
|
|
||||||
|
|
||||||
props: {
|
|
||||||
config: {
|
|
||||||
type: Object as PropType<MContainer>,
|
|
||||||
default: () => ({}),
|
|
||||||
},
|
|
||||||
},
|
|
||||||
|
|
||||||
setup(props) {
|
|
||||||
const app = useApp(props);
|
|
||||||
|
|
||||||
return {
|
|
||||||
style: computed(() => app?.transformStyle(props.config.style || {})),
|
|
||||||
|
|
||||||
display: () => {
|
|
||||||
const displayCfg = props.config?.display;
|
|
||||||
|
|
||||||
if (typeof displayCfg === 'function') {
|
|
||||||
return displayCfg(app);
|
|
||||||
}
|
|
||||||
return displayCfg !== false;
|
|
||||||
},
|
|
||||||
...useCommonMethod(),
|
|
||||||
};
|
|
||||||
},
|
|
||||||
});
|
|
||||||
</script>
|
|
||||||
@ -1,24 +0,0 @@
|
|||||||
/*
|
|
||||||
* 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 Img from './src/index.vue';
|
|
||||||
|
|
||||||
export { default as config } from './src/formConfig';
|
|
||||||
export { default as value } from './src/initValue';
|
|
||||||
|
|
||||||
export default Img;
|
|
||||||
@ -1,29 +0,0 @@
|
|||||||
/*
|
|
||||||
* 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.
|
|
||||||
*/
|
|
||||||
|
|
||||||
export default [
|
|
||||||
{
|
|
||||||
text: '图片',
|
|
||||||
name: 'src',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
text: '链接',
|
|
||||||
name: 'url',
|
|
||||||
type: 'data-source-input',
|
|
||||||
},
|
|
||||||
];
|
|
||||||
@ -1,30 +0,0 @@
|
|||||||
<template>
|
|
||||||
<img class="magic-ui-img" :src="config.src" @click="clickHandler" />
|
|
||||||
</template>
|
|
||||||
<script lang="ts">
|
|
||||||
import { defineComponent } from 'vue';
|
|
||||||
|
|
||||||
import useApp from '../../useApp';
|
|
||||||
|
|
||||||
export default defineComponent({
|
|
||||||
props: {
|
|
||||||
config: {
|
|
||||||
type: Object,
|
|
||||||
default: () => ({}),
|
|
||||||
},
|
|
||||||
|
|
||||||
model: {
|
|
||||||
type: Object,
|
|
||||||
default: () => ({}),
|
|
||||||
},
|
|
||||||
},
|
|
||||||
setup(props) {
|
|
||||||
useApp(props);
|
|
||||||
return {
|
|
||||||
clickHandler() {
|
|
||||||
if (props.config.url) window.location.href = props.config.url;
|
|
||||||
},
|
|
||||||
};
|
|
||||||
},
|
|
||||||
});
|
|
||||||
</script>
|
|
||||||
@ -1,54 +0,0 @@
|
|||||||
/*
|
|
||||||
* 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 Button from './button';
|
|
||||||
import Container from './container';
|
|
||||||
import Img from './img';
|
|
||||||
import IteratorContainer from './iterator-container';
|
|
||||||
import Overlay from './overlay';
|
|
||||||
import Page from './page';
|
|
||||||
import PageFragment from './page-fragment';
|
|
||||||
import PageFragmentContainer from './page-fragment-container';
|
|
||||||
import QRcode from './qrcode';
|
|
||||||
import Text from './text';
|
|
||||||
|
|
||||||
export { default as TMagicUiButton } from './button';
|
|
||||||
export { default as TMagicUiContainer } from './container';
|
|
||||||
export { default as TMagicUiImg } from './img';
|
|
||||||
export { default as TMagicUiIteratorContainer } from './iterator-container';
|
|
||||||
export { default as TMagicUiPage } from './page';
|
|
||||||
export { default as TMagicUiPageFragment } from './page-fragment';
|
|
||||||
export { default as TMagicUiPageFragmentContainer } from './page-fragment-container';
|
|
||||||
export { default as TMagicUiPageText } from './text';
|
|
||||||
|
|
||||||
export { default as useApp } from './useApp';
|
|
||||||
|
|
||||||
const ui: Record<string, any> = {
|
|
||||||
page: Page,
|
|
||||||
container: Container,
|
|
||||||
button: Button,
|
|
||||||
text: Text,
|
|
||||||
img: Img,
|
|
||||||
qrcode: QRcode,
|
|
||||||
overlay: Overlay,
|
|
||||||
'page-fragment-container': PageFragmentContainer,
|
|
||||||
'page-fragment': PageFragment,
|
|
||||||
'iterator-container': IteratorContainer,
|
|
||||||
};
|
|
||||||
|
|
||||||
export default ui;
|
|
||||||
@ -1,24 +0,0 @@
|
|||||||
/*
|
|
||||||
* 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 IteratorContainer from './src/IteratorContainer.vue';
|
|
||||||
|
|
||||||
export { default as config } from './src/formConfig';
|
|
||||||
export { default as value } from './src/initValue';
|
|
||||||
|
|
||||||
export default IteratorContainer;
|
|
||||||
@ -1,67 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div class="magic-ui-iterator-container" :id="`${config.id || ''}`" :style="style">
|
|
||||||
<Container v-for="(item, index) in configs" :key="index" :config="item"></Container>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script lang="ts" setup>
|
|
||||||
import { computed, inject } from 'vue';
|
|
||||||
|
|
||||||
import Core from '@tmagic/core';
|
|
||||||
import type { MContainer } from '@tmagic/schema';
|
|
||||||
|
|
||||||
import Container from '../../container';
|
|
||||||
import useApp from '../../useApp';
|
|
||||||
|
|
||||||
const props = withDefaults(
|
|
||||||
defineProps<{
|
|
||||||
config: MContainer & {
|
|
||||||
type: 'iterator-container';
|
|
||||||
iteratorData: any[];
|
|
||||||
dsField: string[];
|
|
||||||
itemConfig: {
|
|
||||||
layout: string;
|
|
||||||
style: Record<string, string | number>;
|
|
||||||
};
|
|
||||||
};
|
|
||||||
model?: any;
|
|
||||||
}>(),
|
|
||||||
{
|
|
||||||
model: () => ({}),
|
|
||||||
},
|
|
||||||
);
|
|
||||||
|
|
||||||
const app: Core | undefined = inject('app');
|
|
||||||
|
|
||||||
const style = computed(() => app?.transformStyle(props.config.style || {}));
|
|
||||||
|
|
||||||
const configs = computed(() => {
|
|
||||||
let { iteratorData = [] } = props.config;
|
|
||||||
|
|
||||||
if (!Array.isArray(iteratorData)) {
|
|
||||||
iteratorData = [];
|
|
||||||
}
|
|
||||||
|
|
||||||
if (app?.platform === 'editor' && !iteratorData.length) {
|
|
||||||
iteratorData.push({});
|
|
||||||
}
|
|
||||||
|
|
||||||
return iteratorData.map((itemData) => ({
|
|
||||||
items:
|
|
||||||
app?.dataSourceManager?.compliedIteratorItems(itemData, props.config.items, props.config.dsField) ??
|
|
||||||
props.config.items,
|
|
||||||
id: '',
|
|
||||||
style: {
|
|
||||||
...props.config.itemConfig.style,
|
|
||||||
position: 'relative',
|
|
||||||
left: 0,
|
|
||||||
top: 0,
|
|
||||||
},
|
|
||||||
}));
|
|
||||||
});
|
|
||||||
|
|
||||||
useApp({
|
|
||||||
config: props.config,
|
|
||||||
methods: {},
|
|
||||||
});
|
|
||||||
</script>
|
|
||||||
@ -1,113 +0,0 @@
|
|||||||
/*
|
|
||||||
* 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 { DATA_SOURCE_FIELDS_SELECT_VALUE_PREFIX } from '@tmagic/utils';
|
|
||||||
|
|
||||||
export default [
|
|
||||||
{
|
|
||||||
name: 'iteratorData',
|
|
||||||
text: '数据源数据',
|
|
||||||
value: 'value',
|
|
||||||
dataSourceFieldType: ['array'],
|
|
||||||
checkStrictly: true,
|
|
||||||
type: 'data-source-field-select',
|
|
||||||
onChange: (vm: any, v: string[] = [], { model }: any) => {
|
|
||||||
if (Array.isArray(v) && v.length > 1) {
|
|
||||||
const [dsId, ...keys] = v;
|
|
||||||
model.dsField = [dsId.replace(DATA_SOURCE_FIELDS_SELECT_VALUE_PREFIX, ''), ...keys];
|
|
||||||
} else {
|
|
||||||
model.dsField = [];
|
|
||||||
}
|
|
||||||
},
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: 'dsField',
|
|
||||||
type: 'hidden',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
type: 'panel',
|
|
||||||
title: '子项配置',
|
|
||||||
name: 'itemConfig',
|
|
||||||
items: [
|
|
||||||
{
|
|
||||||
name: 'layout',
|
|
||||||
text: '容器布局',
|
|
||||||
type: 'select',
|
|
||||||
defaultValue: 'absolute',
|
|
||||||
options: [
|
|
||||||
{ value: 'absolute', text: '绝对定位' },
|
|
||||||
{ value: 'relative', text: '流式布局', disabled: true },
|
|
||||||
],
|
|
||||||
},
|
|
||||||
{
|
|
||||||
type: 'fieldset',
|
|
||||||
legend: '样式',
|
|
||||||
name: 'style',
|
|
||||||
items: [
|
|
||||||
{
|
|
||||||
name: 'width',
|
|
||||||
text: '宽度',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: 'height',
|
|
||||||
text: '高度',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
text: 'overflow',
|
|
||||||
name: 'overflow',
|
|
||||||
type: 'select',
|
|
||||||
options: [
|
|
||||||
{ text: 'visible', value: 'visible' },
|
|
||||||
{ text: 'hidden', value: 'hidden' },
|
|
||||||
{ text: 'clip', value: 'clip' },
|
|
||||||
{ text: 'scroll', value: 'scroll' },
|
|
||||||
{ text: 'auto', value: 'auto' },
|
|
||||||
{ text: 'overlay', value: 'overlay' },
|
|
||||||
],
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: 'backgroundImage',
|
|
||||||
text: '背景图',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: 'backgroundColor',
|
|
||||||
text: '背景颜色',
|
|
||||||
type: 'colorPicker',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: 'backgroundRepeat',
|
|
||||||
text: '背景图重复',
|
|
||||||
type: 'select',
|
|
||||||
defaultValue: 'no-repeat',
|
|
||||||
options: [
|
|
||||||
{ text: 'repeat', value: 'repeat' },
|
|
||||||
{ text: 'repeat-x', value: 'repeat-x' },
|
|
||||||
{ text: 'repeat-y', value: 'repeat-y' },
|
|
||||||
{ text: 'no-repeat', value: 'no-repeat' },
|
|
||||||
{ text: 'inherit', value: 'inherit' },
|
|
||||||
],
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: 'backgroundSize',
|
|
||||||
text: '背景图大小',
|
|
||||||
defaultValue: '100% 100%',
|
|
||||||
},
|
|
||||||
],
|
|
||||||
},
|
|
||||||
],
|
|
||||||
},
|
|
||||||
];
|
|
||||||
@ -1,25 +0,0 @@
|
|||||||
/*
|
|
||||||
* 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 Overlay from './src/index.vue';
|
|
||||||
|
|
||||||
export { default as config } from './src/formConfig';
|
|
||||||
export { default as value } from './src/initValue';
|
|
||||||
export { default as event } from './src/event';
|
|
||||||
|
|
||||||
export default Overlay;
|
|
||||||
@ -1,75 +0,0 @@
|
|||||||
<template>
|
|
||||||
<magic-ui-container v-if="visible" class="magic-ui-overlay" :config="{ items: config.items }">
|
|
||||||
<slot></slot>
|
|
||||||
</magic-ui-container>
|
|
||||||
</template>
|
|
||||||
<script lang="ts">
|
|
||||||
import { defineComponent, onBeforeUnmount, ref } from 'vue';
|
|
||||||
|
|
||||||
import Core from '@tmagic/core';
|
|
||||||
import type { MContainer, MNode, MPage } from '@tmagic/schema';
|
|
||||||
|
|
||||||
import useApp from '../../useApp';
|
|
||||||
|
|
||||||
export default defineComponent({
|
|
||||||
props: {
|
|
||||||
config: {
|
|
||||||
type: Object,
|
|
||||||
default: () => ({}),
|
|
||||||
},
|
|
||||||
|
|
||||||
model: {
|
|
||||||
type: Object,
|
|
||||||
default: () => ({}),
|
|
||||||
},
|
|
||||||
},
|
|
||||||
|
|
||||||
setup(props) {
|
|
||||||
const visible = ref(false);
|
|
||||||
const app: Core | undefined = useApp(props);
|
|
||||||
const node = app?.page?.getNode(props.config.id);
|
|
||||||
|
|
||||||
const openOverlay = () => {
|
|
||||||
visible.value = true;
|
|
||||||
if (app) {
|
|
||||||
app.emit('overlay:open', node);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
const closeOverlay = () => {
|
|
||||||
visible.value = false;
|
|
||||||
if (app) {
|
|
||||||
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();
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
app?.page?.on('editor:select', editorSelectHandler);
|
|
||||||
|
|
||||||
onBeforeUnmount(() => {
|
|
||||||
app?.page?.off('editor:select', editorSelectHandler);
|
|
||||||
});
|
|
||||||
|
|
||||||
return {
|
|
||||||
visible,
|
|
||||||
|
|
||||||
openOverlay,
|
|
||||||
closeOverlay,
|
|
||||||
};
|
|
||||||
},
|
|
||||||
});
|
|
||||||
</script>
|
|
||||||
@ -1,24 +0,0 @@
|
|||||||
/*
|
|
||||||
* 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 PageFragmentContainer from './src/PageFragmentContainer.vue';
|
|
||||||
|
|
||||||
export { default as config } from './src/formConfig';
|
|
||||||
export { default as value } from './src/initValue';
|
|
||||||
|
|
||||||
export default PageFragmentContainer;
|
|
||||||
@ -1,24 +0,0 @@
|
|||||||
/*
|
|
||||||
* 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 PageFragment from './src/PageFragment.vue';
|
|
||||||
|
|
||||||
export { default as config } from './src/formConfig';
|
|
||||||
export { default as value } from './src/initValue';
|
|
||||||
|
|
||||||
export default PageFragment;
|
|
||||||
@ -1,42 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div
|
|
||||||
:id="`${config.id || ''}`"
|
|
||||||
:class="`magic-ui-page-fragment magic-ui-container magic-layout-${config.layout}${
|
|
||||||
config.className ? ` ${config.className}` : ''
|
|
||||||
}`"
|
|
||||||
:style="style"
|
|
||||||
>
|
|
||||||
<slot></slot>
|
|
||||||
<magic-ui-component v-for="item in config.items" :key="item.id" :config="item"></magic-ui-component>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script lang="ts">
|
|
||||||
import { computed, defineComponent, PropType } from 'vue';
|
|
||||||
|
|
||||||
import type { MPageFragment } from '@tmagic/schema';
|
|
||||||
|
|
||||||
import MComponent from '../../Component.vue';
|
|
||||||
import useApp from '../../useApp';
|
|
||||||
|
|
||||||
export default defineComponent({
|
|
||||||
components: {
|
|
||||||
'magic-ui-component': MComponent,
|
|
||||||
},
|
|
||||||
|
|
||||||
props: {
|
|
||||||
config: {
|
|
||||||
type: Object as PropType<MPageFragment>,
|
|
||||||
default: () => ({}),
|
|
||||||
},
|
|
||||||
},
|
|
||||||
|
|
||||||
setup(props) {
|
|
||||||
const app = useApp(props);
|
|
||||||
|
|
||||||
return {
|
|
||||||
style: computed(() => app?.transformStyle(props.config.style || {})),
|
|
||||||
};
|
|
||||||
},
|
|
||||||
});
|
|
||||||
</script>
|
|
||||||
@ -1,46 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div
|
|
||||||
:id="config.id"
|
|
||||||
:class="`magic-ui-page magic-ui-container magic-layout-${config.layout}${
|
|
||||||
config.className ? ` ${config.className}` : ''
|
|
||||||
}`"
|
|
||||||
:style="style"
|
|
||||||
>
|
|
||||||
<slot></slot>
|
|
||||||
<magic-ui-component v-for="item in config.items" :key="item.id" :config="item"></magic-ui-component>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script lang="ts">
|
|
||||||
import { computed, defineComponent, PropType } from 'vue';
|
|
||||||
|
|
||||||
import type { MPage } from '@tmagic/schema';
|
|
||||||
|
|
||||||
import Component from '../Component.vue';
|
|
||||||
import useApp from '../useApp';
|
|
||||||
|
|
||||||
export default defineComponent({
|
|
||||||
components: {
|
|
||||||
'magic-ui-component': Component,
|
|
||||||
},
|
|
||||||
|
|
||||||
props: {
|
|
||||||
config: {
|
|
||||||
type: Object as PropType<MPage>,
|
|
||||||
default: () => ({}),
|
|
||||||
},
|
|
||||||
},
|
|
||||||
|
|
||||||
setup(props) {
|
|
||||||
const app = useApp(props);
|
|
||||||
|
|
||||||
return {
|
|
||||||
style: computed(() => app?.transformStyle(props.config.style || {})),
|
|
||||||
|
|
||||||
refresh() {
|
|
||||||
window.location.reload();
|
|
||||||
},
|
|
||||||
};
|
|
||||||
},
|
|
||||||
});
|
|
||||||
</script>
|
|
||||||
@ -1,24 +0,0 @@
|
|||||||
/*
|
|
||||||
* 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 Qrcode from './src/index.vue';
|
|
||||||
|
|
||||||
export { default as config } from './src/formConfig';
|
|
||||||
export { default as value } from './src/initValue';
|
|
||||||
|
|
||||||
export default Qrcode;
|
|
||||||
@ -1,67 +0,0 @@
|
|||||||
<script lang="ts">
|
|
||||||
import { computed, defineComponent, getCurrentInstance, h, inject, PropType } from 'vue';
|
|
||||||
|
|
||||||
import type { MComponent } from '@tmagic/schema';
|
|
||||||
|
|
||||||
import useApp from '../useApp';
|
|
||||||
|
|
||||||
export default defineComponent({
|
|
||||||
props: {
|
|
||||||
config: {
|
|
||||||
type: Object as PropType<MComponent>,
|
|
||||||
default: () => ({}),
|
|
||||||
},
|
|
||||||
|
|
||||||
model: {
|
|
||||||
type: Object,
|
|
||||||
default: () => ({}),
|
|
||||||
},
|
|
||||||
|
|
||||||
vars: {
|
|
||||||
type: Object,
|
|
||||||
default: () => ({}),
|
|
||||||
},
|
|
||||||
},
|
|
||||||
|
|
||||||
setup(props) {
|
|
||||||
useApp(props);
|
|
||||||
const vm = getCurrentInstance()?.proxy;
|
|
||||||
const hoc: any = inject('hoc');
|
|
||||||
const displayText = computed(() => {
|
|
||||||
let text = props.config?.text || '';
|
|
||||||
const { vars } = props;
|
|
||||||
if (hoc?.disabled && props.config?.disabledText) {
|
|
||||||
text = props.config.disabledText;
|
|
||||||
}
|
|
||||||
if (typeof text === 'function') {
|
|
||||||
return text.bind(vm)(vm, { model: props.model });
|
|
||||||
}
|
|
||||||
if (Object.prototype.toString.call(vars) === '[object Object]') {
|
|
||||||
let tmp: string = text;
|
|
||||||
Object.entries(vars).forEach(([key, value]) => {
|
|
||||||
tmp = tmp.replace(new RegExp(`{{${key}}}`, 'g'), value);
|
|
||||||
});
|
|
||||||
return tmp;
|
|
||||||
}
|
|
||||||
return text || '';
|
|
||||||
});
|
|
||||||
|
|
||||||
return {
|
|
||||||
displayText,
|
|
||||||
};
|
|
||||||
},
|
|
||||||
|
|
||||||
render() {
|
|
||||||
const className = this.config?.multiple ? 'magic-ui-text' : 'magic-ui-text magic-ui-text--single-line';
|
|
||||||
if (typeof this.$slots?.default === 'function') {
|
|
||||||
return h('p', { class: className }, [this.$slots?.default?.() || '']);
|
|
||||||
}
|
|
||||||
return h('p', {
|
|
||||||
class: className,
|
|
||||||
domProps: {
|
|
||||||
innerHTML: this.displayText,
|
|
||||||
},
|
|
||||||
});
|
|
||||||
},
|
|
||||||
});
|
|
||||||
</script>
|
|
||||||
@ -1,40 +0,0 @@
|
|||||||
/*
|
|
||||||
* 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 { getCurrentInstance, inject, onBeforeUnmount, onMounted } from 'vue';
|
|
||||||
|
|
||||||
import Core from '@tmagic/core';
|
|
||||||
|
|
||||||
export default (props: any) => {
|
|
||||||
const app: Core | undefined = inject('app');
|
|
||||||
const node = app?.page?.getNode(props.config.id);
|
|
||||||
|
|
||||||
const vm = getCurrentInstance()?.proxy;
|
|
||||||
|
|
||||||
node?.emit('created', vm);
|
|
||||||
|
|
||||||
onMounted(() => {
|
|
||||||
node?.emit('mounted', vm);
|
|
||||||
});
|
|
||||||
|
|
||||||
onBeforeUnmount(() => {
|
|
||||||
node?.emit('destroy', vm);
|
|
||||||
});
|
|
||||||
|
|
||||||
return app;
|
|
||||||
};
|
|
||||||
@ -1,31 +0,0 @@
|
|||||||
/*
|
|
||||||
* 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 { getCurrentInstance } from 'vue';
|
|
||||||
|
|
||||||
export default () => {
|
|
||||||
const vm = getCurrentInstance()?.proxy;
|
|
||||||
return {
|
|
||||||
show: () => {
|
|
||||||
vm.$set(vm.config.style, 'display', 'initial');
|
|
||||||
},
|
|
||||||
hide: () => {
|
|
||||||
vm.$set(vm.config.style, 'display', 'none');
|
|
||||||
},
|
|
||||||
};
|
|
||||||
};
|
|
||||||
@ -12,9 +12,6 @@
|
|||||||
"dist",
|
"dist",
|
||||||
"types"
|
"types"
|
||||||
],
|
],
|
||||||
"scripts": {
|
|
||||||
"build": "node scripts/build.mjs"
|
|
||||||
},
|
|
||||||
"engines": {
|
"engines": {
|
||||||
"node": ">=18"
|
"node": ">=18"
|
||||||
},
|
},
|
||||||
@ -24,14 +21,18 @@
|
|||||||
"url": "https://github.com/Tencent/tmagic-editor.git"
|
"url": "https://github.com/Tencent/tmagic-editor.git"
|
||||||
},
|
},
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"qrcode": "^1.5.0"
|
"@tmagic/vue-button": "workspace:*",
|
||||||
|
"@tmagic/vue-container": "workspace:*",
|
||||||
|
"@tmagic/vue-img": "workspace:*",
|
||||||
|
"@tmagic/vue-iterator-container": "workspace:*",
|
||||||
|
"@tmagic/vue-overlay": "workspace:*",
|
||||||
|
"@tmagic/vue-page": "workspace:*",
|
||||||
|
"@tmagic/vue-page-fragment": "workspace:*",
|
||||||
|
"@tmagic/vue-page-fragment-container": "workspace:*",
|
||||||
|
"@tmagic/vue-qrcode": "workspace:*",
|
||||||
|
"@tmagic/vue-text": "workspace:*"
|
||||||
},
|
},
|
||||||
"peerDependencies": {
|
"peerDependencies": {
|
||||||
"@tmagic/core": "workspace:*",
|
|
||||||
"@tmagic/schema": "workspace:*",
|
|
||||||
"@tmagic/utils": "workspace:*",
|
|
||||||
"@tmagic/vue-runtime-help": "workspace:*",
|
|
||||||
"vue": ">=3.4.27",
|
|
||||||
"typescript": "*"
|
"typescript": "*"
|
||||||
},
|
},
|
||||||
"peerDependenciesMeta": {
|
"peerDependenciesMeta": {
|
||||||
@ -40,8 +41,6 @@
|
|||||||
}
|
}
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"@types/qrcode": "^1.4.2",
|
|
||||||
"@vue/compiler-sfc": "^3.4.27",
|
|
||||||
"rimraf": "^3.0.2",
|
"rimraf": "^3.0.2",
|
||||||
"vite": "^5.3.5"
|
"vite": "^5.3.5"
|
||||||
}
|
}
|
||||||
|
|||||||
@ -1,120 +0,0 @@
|
|||||||
import { build } from 'vite';
|
|
||||||
import vue from '@vitejs/plugin-vue';
|
|
||||||
import path from 'node:path';
|
|
||||||
import { fileURLToPath } from 'node:url';
|
|
||||||
|
|
||||||
import pkg from '../package.json' assert { type: 'json' };
|
|
||||||
|
|
||||||
const __dirname = fileURLToPath(new URL('.', import.meta.url));
|
|
||||||
|
|
||||||
const packages = [
|
|
||||||
'button',
|
|
||||||
'container',
|
|
||||||
'img',
|
|
||||||
'iterator-container',
|
|
||||||
'overlay',
|
|
||||||
'page',
|
|
||||||
'page-fragment',
|
|
||||||
'page-fragment-container',
|
|
||||||
'qrcode',
|
|
||||||
'text',
|
|
||||||
];
|
|
||||||
|
|
||||||
const commonConfig = {
|
|
||||||
optimizeDeps: {
|
|
||||||
esbuildOptions: {
|
|
||||||
define: {
|
|
||||||
global: 'globalThis',
|
|
||||||
},
|
|
||||||
},
|
|
||||||
},
|
|
||||||
|
|
||||||
build: {
|
|
||||||
cssCodeSplit: false,
|
|
||||||
sourcemap: false,
|
|
||||||
minify: false,
|
|
||||||
target: 'esnext',
|
|
||||||
|
|
||||||
rollupOptions: {
|
|
||||||
output: {
|
|
||||||
// 在 UMD 构建模式下为这些外部化的依赖提供一个全局变量
|
|
||||||
globals: {
|
|
||||||
vue: 'Vue',
|
|
||||||
},
|
|
||||||
},
|
|
||||||
},
|
|
||||||
},
|
|
||||||
};
|
|
||||||
|
|
||||||
const main = async () => {
|
|
||||||
await build({
|
|
||||||
...commonConfig,
|
|
||||||
|
|
||||||
root: path.resolve(__dirname, `../`),
|
|
||||||
|
|
||||||
build: {
|
|
||||||
...commonConfig.build,
|
|
||||||
outDir: `./dist`,
|
|
||||||
lib: {
|
|
||||||
entry: './src/index.ts',
|
|
||||||
name: 'ui',
|
|
||||||
fileName: 'index',
|
|
||||||
formats: ['es'],
|
|
||||||
},
|
|
||||||
|
|
||||||
rollupOptions: {
|
|
||||||
...commonConfig.build.rollupOptions,
|
|
||||||
|
|
||||||
// 确保外部化处理那些你不想打包进库的依赖
|
|
||||||
external(id) {
|
|
||||||
return (
|
|
||||||
Object.keys({
|
|
||||||
...(pkg.devDependencies || {}),
|
|
||||||
...(pkg.peerDependencies || {}),
|
|
||||||
}).some((k) => new RegExp(`^${k}`).test(id)) ||
|
|
||||||
`${id}`.startsWith('.') ||
|
|
||||||
(`${id}`.startsWith('/') && !id.endsWith('/index.ts'))
|
|
||||||
);
|
|
||||||
},
|
|
||||||
},
|
|
||||||
},
|
|
||||||
});
|
|
||||||
|
|
||||||
packages.map((packageName) => {
|
|
||||||
const config = {
|
|
||||||
...commonConfig,
|
|
||||||
|
|
||||||
plugins: [vue()],
|
|
||||||
|
|
||||||
root: path.resolve(__dirname, `../src/${packageName}`),
|
|
||||||
|
|
||||||
build: {
|
|
||||||
...commonConfig.build,
|
|
||||||
outDir: `../../dist/${packageName}`,
|
|
||||||
lib: {
|
|
||||||
entry: './index.ts',
|
|
||||||
name: packageName,
|
|
||||||
fileName: 'index',
|
|
||||||
formats: ['es'],
|
|
||||||
},
|
|
||||||
|
|
||||||
rollupOptions: {
|
|
||||||
...commonConfig.build.rollupOptions,
|
|
||||||
|
|
||||||
// 确保外部化处理那些你不想打包进库的依赖
|
|
||||||
external(id) {
|
|
||||||
return (
|
|
||||||
Object.keys({
|
|
||||||
...(pkg.devDependencies || {}),
|
|
||||||
...(pkg.peerDependencies || {}),
|
|
||||||
}).some((k) => new RegExp(`^${k}`).test(id)) || `${id}`.endsWith('./container')
|
|
||||||
);
|
|
||||||
},
|
|
||||||
},
|
|
||||||
},
|
|
||||||
};
|
|
||||||
return build(config);
|
|
||||||
});
|
|
||||||
};
|
|
||||||
|
|
||||||
main();
|
|
||||||
@ -1,24 +0,0 @@
|
|||||||
/*
|
|
||||||
* 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 Button from './src/index.vue';
|
|
||||||
|
|
||||||
export { default as config } from './src/formConfig';
|
|
||||||
export { default as value } from './src/initValue';
|
|
||||||
|
|
||||||
export default Button;
|
|
||||||
@ -1,25 +0,0 @@
|
|||||||
/*
|
|
||||||
* 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.
|
|
||||||
*/
|
|
||||||
|
|
||||||
export default [
|
|
||||||
{
|
|
||||||
text: '文本',
|
|
||||||
name: 'text',
|
|
||||||
type: 'data-source-input',
|
|
||||||
},
|
|
||||||
];
|
|
||||||
@ -1,32 +0,0 @@
|
|||||||
<template>
|
|
||||||
<button class="magic-ui-button">
|
|
||||||
<slot>
|
|
||||||
<p>{{ config?.text || '' }}</p>
|
|
||||||
</slot>
|
|
||||||
</button>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script lang="ts" setup>
|
|
||||||
import type { MComponent } from '@tmagic/schema';
|
|
||||||
import { useApp } from '@tmagic/vue-runtime-help';
|
|
||||||
|
|
||||||
interface ButtonSchema extends MComponent {
|
|
||||||
type: 'button';
|
|
||||||
text: string;
|
|
||||||
}
|
|
||||||
|
|
||||||
const props = withDefaults(
|
|
||||||
defineProps<{
|
|
||||||
config: ButtonSchema;
|
|
||||||
model?: any;
|
|
||||||
}>(),
|
|
||||||
{
|
|
||||||
model: () => ({}),
|
|
||||||
},
|
|
||||||
);
|
|
||||||
|
|
||||||
useApp({
|
|
||||||
config: props.config,
|
|
||||||
methods: {},
|
|
||||||
});
|
|
||||||
</script>
|
|
||||||
@ -1,28 +0,0 @@
|
|||||||
/*
|
|
||||||
* 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.
|
|
||||||
*/
|
|
||||||
|
|
||||||
export default {
|
|
||||||
text: '请输入文本内容',
|
|
||||||
multiple: true,
|
|
||||||
style: {
|
|
||||||
width: '270',
|
|
||||||
height: '37.5',
|
|
||||||
border: 0,
|
|
||||||
backgroundColor: '#fb6f00',
|
|
||||||
},
|
|
||||||
};
|
|
||||||
@ -1,24 +0,0 @@
|
|||||||
/*
|
|
||||||
* 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 Container from './src/Container.vue';
|
|
||||||
|
|
||||||
export { default as config } from './src/formConfig';
|
|
||||||
export { default as value } from './src/initValue';
|
|
||||||
|
|
||||||
export default Container;
|
|
||||||
@ -1,41 +0,0 @@
|
|||||||
/*
|
|
||||||
* 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.
|
|
||||||
*/
|
|
||||||
|
|
||||||
export default [
|
|
||||||
{
|
|
||||||
name: 'layout',
|
|
||||||
text: '容器布局',
|
|
||||||
type: 'select',
|
|
||||||
defaultValue: 'absolute',
|
|
||||||
options: [
|
|
||||||
{ value: 'absolute', text: '绝对定位' },
|
|
||||||
{ value: 'relative', text: '流式布局' },
|
|
||||||
],
|
|
||||||
onChange: (formState: any, v: string, { model }: any) => {
|
|
||||||
if (!model.style) return v;
|
|
||||||
if (v === 'relative') {
|
|
||||||
model.style.height = 'auto';
|
|
||||||
} else {
|
|
||||||
const el = formState.stage?.renderer?.contentWindow.document.getElementById(model.id);
|
|
||||||
if (el) {
|
|
||||||
model.style.height = el.getBoundingClientRect().height;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
},
|
|
||||||
];
|
|
||||||
@ -1,25 +0,0 @@
|
|||||||
/*
|
|
||||||
* 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.
|
|
||||||
*/
|
|
||||||
|
|
||||||
export default {
|
|
||||||
items: [],
|
|
||||||
style: {
|
|
||||||
width: '375',
|
|
||||||
height: '100',
|
|
||||||
},
|
|
||||||
};
|
|
||||||
@ -1,24 +0,0 @@
|
|||||||
/*
|
|
||||||
* 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 Img from './src/index.vue';
|
|
||||||
|
|
||||||
export { default as config } from './src/formConfig';
|
|
||||||
export { default as value } from './src/initValue';
|
|
||||||
|
|
||||||
export default Img;
|
|
||||||
@ -1,33 +0,0 @@
|
|||||||
<template>
|
|
||||||
<img class="magic-ui-img" :src="config.src" @click="clickHandler" />
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script lang="ts" setup>
|
|
||||||
import type { MComponent } from '@tmagic/schema';
|
|
||||||
import { useApp } from '@tmagic/vue-runtime-help';
|
|
||||||
|
|
||||||
interface ImgSchema extends MComponent {
|
|
||||||
type: 'img';
|
|
||||||
src: string;
|
|
||||||
url: string;
|
|
||||||
}
|
|
||||||
|
|
||||||
const props = withDefaults(
|
|
||||||
defineProps<{
|
|
||||||
config: ImgSchema;
|
|
||||||
model?: any;
|
|
||||||
}>(),
|
|
||||||
{
|
|
||||||
model: () => ({}),
|
|
||||||
},
|
|
||||||
);
|
|
||||||
|
|
||||||
const clickHandler = () => {
|
|
||||||
if (props.config.url) window.location.href = props.config.url;
|
|
||||||
};
|
|
||||||
|
|
||||||
useApp({
|
|
||||||
config: props.config,
|
|
||||||
methods: {},
|
|
||||||
});
|
|
||||||
</script>
|
|
||||||
@ -1,28 +0,0 @@
|
|||||||
/*
|
|
||||||
* 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.
|
|
||||||
*/
|
|
||||||
|
|
||||||
export default {
|
|
||||||
src: 'https://puui.qpic.cn/vupload/0/1573555382625_bhp0wud8l6w.png/0',
|
|
||||||
url: '',
|
|
||||||
style: {
|
|
||||||
position: 'absolute',
|
|
||||||
left: '57',
|
|
||||||
width: '176',
|
|
||||||
height: '176',
|
|
||||||
},
|
|
||||||
};
|
|
||||||
@ -16,27 +16,27 @@
|
|||||||
* limitations under the License.
|
* limitations under the License.
|
||||||
*/
|
*/
|
||||||
|
|
||||||
import Button from './button';
|
import Button from '@tmagic/vue-button';
|
||||||
import Container from './container';
|
import Container from '@tmagic/vue-container';
|
||||||
import Img from './img';
|
import Img from '@tmagic/vue-img';
|
||||||
import IteratorContainer from './iterator-container';
|
import IteratorContainer from '@tmagic/vue-iterator-container';
|
||||||
import Overlay from './overlay';
|
import Overlay from '@tmagic/vue-overlay';
|
||||||
import Page from './page';
|
import Page from '@tmagic/vue-page';
|
||||||
import PageFragment from './page-fragment';
|
import PageFragment from '@tmagic/vue-page-fragment';
|
||||||
import PageFragmentContainer from './page-fragment-container';
|
import PageFragmentContainer from '@tmagic/vue-page-fragment-container';
|
||||||
import QRcode from './qrcode';
|
import QRcode from '@tmagic/vue-qrcode';
|
||||||
import Text from './text';
|
import Text from '@tmagic/vue-text';
|
||||||
|
|
||||||
export { default as TMagicUiButton } from './button';
|
export { default as TMagicUiButton } from '@tmagic/vue-button';
|
||||||
export { default as TMagicUiContainer } from './container';
|
export { default as TMagicUiContainer } from '@tmagic/vue-container';
|
||||||
export { default as TMagicUiImg } from './img';
|
export { default as TMagicUiImg } from '@tmagic/vue-img';
|
||||||
export { default as TMagicUiIteratorContainer } from './iterator-container';
|
export { default as TMagicUiIteratorContainer } from '@tmagic/vue-iterator-container';
|
||||||
export { default as TMagicUiOverlay } from './overlay';
|
export { default as TMagicUiOverlay } from '@tmagic/vue-overlay';
|
||||||
export { default as TMagicUiPage } from './page';
|
export { default as TMagicUiPage } from '@tmagic/vue-page';
|
||||||
export { default as TMagicUiPageFragment } from './page-fragment';
|
export { default as TMagicUiPageFragment } from '@tmagic/vue-page-fragment';
|
||||||
export { default as TMagicUiPageFragmentContainer } from './page-fragment-container';
|
export { default as TMagicUiPageFragmentContainer } from '@tmagic/vue-page-fragment-container';
|
||||||
export { default as TMagicUiQRcode } from './qrcode';
|
export { default as TMagicUiQRcode } from '@tmagic/vue-qrcode';
|
||||||
export { default as TMagicUiText } from './text';
|
export { default as TMagicUiText } from '@tmagic/vue-text';
|
||||||
|
|
||||||
const ui: Record<string, any> = {
|
const ui: Record<string, any> = {
|
||||||
page: Page,
|
page: Page,
|
||||||
|
|||||||
@ -1,24 +0,0 @@
|
|||||||
/*
|
|
||||||
* 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 IteratorContainer from './src/IteratorContainer.vue';
|
|
||||||
|
|
||||||
export { default as config } from './src/formConfig';
|
|
||||||
export { default as value } from './src/initValue';
|
|
||||||
|
|
||||||
export default IteratorContainer;
|
|
||||||
@ -1,111 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div
|
|
||||||
class="magic-ui-iterator-container"
|
|
||||||
:data-iterator-index="dataIteratorIndex"
|
|
||||||
:data-iterator-container-id="dataIteratorContainerId"
|
|
||||||
>
|
|
||||||
<Container
|
|
||||||
v-for="(item, index) in configs"
|
|
||||||
:iterator-index="[...(dataIteratorIndex || []), index]"
|
|
||||||
:iterator-container-id="[...(dataIteratorContainerId || []), config.id]"
|
|
||||||
:key="index"
|
|
||||||
:config="item"
|
|
||||||
></Container>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script lang="ts" setup>
|
|
||||||
import { computed, watch } from 'vue';
|
|
||||||
|
|
||||||
import type { IteratorContainer as TMagicIteratorContainer } from '@tmagic/core';
|
|
||||||
import { type Id, type MIteratorContainer, NodeType } from '@tmagic/schema';
|
|
||||||
import { useApp } from '@tmagic/vue-runtime-help';
|
|
||||||
|
|
||||||
import Container from '../../container';
|
|
||||||
|
|
||||||
const props = withDefaults(
|
|
||||||
defineProps<{
|
|
||||||
config: MIteratorContainer;
|
|
||||||
model?: any;
|
|
||||||
dataIteratorIndex?: number[];
|
|
||||||
dataIteratorContainerId?: Id[];
|
|
||||||
}>(),
|
|
||||||
{
|
|
||||||
model: () => ({}),
|
|
||||||
},
|
|
||||||
);
|
|
||||||
|
|
||||||
const { app } = useApp({
|
|
||||||
config: props.config,
|
|
||||||
iteratorContainerId: props.dataIteratorContainerId,
|
|
||||||
iteratorIndex: props.dataIteratorIndex,
|
|
||||||
methods: {},
|
|
||||||
});
|
|
||||||
|
|
||||||
const configs = computed(() => {
|
|
||||||
let { iteratorData = [] } = props.config;
|
|
||||||
const { id, itemConfig, dsField, items } = props.config;
|
|
||||||
|
|
||||||
if (!Array.isArray(iteratorData)) {
|
|
||||||
iteratorData = [];
|
|
||||||
}
|
|
||||||
|
|
||||||
if (app?.platform === 'editor' && !iteratorData.length) {
|
|
||||||
iteratorData.push({});
|
|
||||||
}
|
|
||||||
|
|
||||||
return iteratorData.map((itemData) => {
|
|
||||||
const condResult =
|
|
||||||
app?.platform !== 'editor'
|
|
||||||
? app?.dataSourceManager?.compliedIteratorItemConds(itemData, itemConfig, dsField) ?? true
|
|
||||||
: true;
|
|
||||||
|
|
||||||
const newItems =
|
|
||||||
app?.dataSourceManager?.compliedIteratorItems(
|
|
||||||
id,
|
|
||||||
itemData,
|
|
||||||
items,
|
|
||||||
dsField,
|
|
||||||
props.dataIteratorContainerId,
|
|
||||||
props.dataIteratorIndex,
|
|
||||||
) ?? items;
|
|
||||||
|
|
||||||
return {
|
|
||||||
items: newItems,
|
|
||||||
id: '',
|
|
||||||
type: NodeType.CONTAINER,
|
|
||||||
condResult,
|
|
||||||
style: {
|
|
||||||
...itemConfig.style,
|
|
||||||
position: 'relative',
|
|
||||||
left: 0,
|
|
||||||
top: 0,
|
|
||||||
},
|
|
||||||
};
|
|
||||||
});
|
|
||||||
});
|
|
||||||
|
|
||||||
watch(
|
|
||||||
configs,
|
|
||||||
(configs) => {
|
|
||||||
const iteratorContainerNode = app?.getNode<TMagicIteratorContainer>(
|
|
||||||
props.config.id,
|
|
||||||
props.dataIteratorContainerId,
|
|
||||||
props.dataIteratorIndex,
|
|
||||||
);
|
|
||||||
|
|
||||||
if (!iteratorContainerNode) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
iteratorContainerNode.resetNodes();
|
|
||||||
|
|
||||||
configs.forEach((config, index) => {
|
|
||||||
iteratorContainerNode.setNodes(config.items, index);
|
|
||||||
});
|
|
||||||
},
|
|
||||||
{
|
|
||||||
immediate: true,
|
|
||||||
},
|
|
||||||
);
|
|
||||||
</script>
|
|
||||||
@ -1,31 +0,0 @@
|
|||||||
/*
|
|
||||||
* 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.
|
|
||||||
*/
|
|
||||||
|
|
||||||
export default {
|
|
||||||
style: {
|
|
||||||
width: '375',
|
|
||||||
height: '100',
|
|
||||||
},
|
|
||||||
itemConfig: {
|
|
||||||
style: {
|
|
||||||
width: '100%',
|
|
||||||
height: '100%',
|
|
||||||
},
|
|
||||||
},
|
|
||||||
items: [],
|
|
||||||
};
|
|
||||||
@ -1,25 +0,0 @@
|
|||||||
/*
|
|
||||||
* 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 Overlay from './src/index.vue';
|
|
||||||
|
|
||||||
export { default as config } from './src/formConfig';
|
|
||||||
export { default as value } from './src/initValue';
|
|
||||||
export { default as event } from './src/event';
|
|
||||||
|
|
||||||
export default Overlay;
|
|
||||||
@ -1,22 +0,0 @@
|
|||||||
export default {
|
|
||||||
methods: [
|
|
||||||
{
|
|
||||||
label: '打开蒙层',
|
|
||||||
value: 'openOverlay',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: '关闭蒙层',
|
|
||||||
value: 'closeOverlay',
|
|
||||||
},
|
|
||||||
],
|
|
||||||
events: [
|
|
||||||
{
|
|
||||||
label: '打开蒙层',
|
|
||||||
value: 'overlay:open',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: '关闭蒙层',
|
|
||||||
value: 'overlay:close',
|
|
||||||
},
|
|
||||||
],
|
|
||||||
};
|
|
||||||
@ -1 +0,0 @@
|
|||||||
export default [];
|
|
||||||
@ -1,63 +0,0 @@
|
|||||||
<template>
|
|
||||||
<magic-ui-container v-if="visible" class="magic-ui-overlay" :config="{ items: config.items }">
|
|
||||||
<slot></slot>
|
|
||||||
</magic-ui-container>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script lang="ts" setup>
|
|
||||||
import { onBeforeUnmount, ref } from 'vue';
|
|
||||||
|
|
||||||
import type { MContainer, MNode, MPage } from '@tmagic/schema';
|
|
||||||
import { useApp } from '@tmagic/vue-runtime-help';
|
|
||||||
|
|
||||||
interface OverlaySchema extends MContainer {
|
|
||||||
type: 'overlay';
|
|
||||||
}
|
|
||||||
|
|
||||||
const props = withDefaults(
|
|
||||||
defineProps<{
|
|
||||||
config: OverlaySchema;
|
|
||||||
model?: any;
|
|
||||||
}>(),
|
|
||||||
{
|
|
||||||
model: () => ({}),
|
|
||||||
},
|
|
||||||
);
|
|
||||||
|
|
||||||
const visible = ref(false);
|
|
||||||
|
|
||||||
const { app, node } = useApp({
|
|
||||||
config: props.config,
|
|
||||||
methods: {
|
|
||||||
openOverlay() {
|
|
||||||
visible.value = true;
|
|
||||||
app?.emit('overlay:open', node);
|
|
||||||
},
|
|
||||||
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)) {
|
|
||||||
node?.instance.openOverlay();
|
|
||||||
} else {
|
|
||||||
node?.instance.closeOverlay();
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
app?.page?.on('editor:select', editorSelectHandler);
|
|
||||||
|
|
||||||
onBeforeUnmount(() => {
|
|
||||||
app?.page?.off('editor:select', editorSelectHandler);
|
|
||||||
});
|
|
||||||
</script>
|
|
||||||
@ -1,11 +0,0 @@
|
|||||||
export default {
|
|
||||||
style: {
|
|
||||||
position: 'fixed',
|
|
||||||
width: '100%',
|
|
||||||
height: '100%',
|
|
||||||
top: 0,
|
|
||||||
left: 0,
|
|
||||||
backgroundColor: 'rgba(0, 0, 0, 0.8)',
|
|
||||||
},
|
|
||||||
items: [],
|
|
||||||
};
|
|
||||||
@ -1,24 +0,0 @@
|
|||||||
/*
|
|
||||||
* 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 PageFragmentContainer from './src/PageFragmentContainer.vue';
|
|
||||||
|
|
||||||
export { default as config } from './src/formConfig';
|
|
||||||
export { default as value } from './src/initValue';
|
|
||||||
|
|
||||||
export default PageFragmentContainer;
|
|
||||||
@ -1,67 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div :id="`${config.id || ''}`" class="magic-ui-page-fragment-container">
|
|
||||||
<Container :config="containerConfig" :model="model"></Container>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script lang="ts" setup>
|
|
||||||
import { computed } from 'vue';
|
|
||||||
|
|
||||||
import { type MComponent, type MNode, NodeType } from '@tmagic/schema';
|
|
||||||
import { useApp } from '@tmagic/vue-runtime-help';
|
|
||||||
|
|
||||||
import Container from '../../container';
|
|
||||||
|
|
||||||
const props = withDefaults(
|
|
||||||
defineProps<{
|
|
||||||
config: MComponent;
|
|
||||||
model?: any;
|
|
||||||
}>(),
|
|
||||||
{
|
|
||||||
model: () => ({}),
|
|
||||||
},
|
|
||||||
);
|
|
||||||
|
|
||||||
const { app } = useApp({
|
|
||||||
config: props.config,
|
|
||||||
methods: {},
|
|
||||||
});
|
|
||||||
|
|
||||||
const fragment = computed(() => app?.dsl?.items?.find((page) => page.id === props.config.pageFragmentId));
|
|
||||||
|
|
||||||
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 {
|
|
||||||
id: '',
|
|
||||||
...otherConfig,
|
|
||||||
};
|
|
||||||
});
|
|
||||||
|
|
||||||
if (app?.platform === 'editor') {
|
|
||||||
return {
|
|
||||||
...others,
|
|
||||||
items: itemsWithoutId,
|
|
||||||
id: '',
|
|
||||||
type: NodeType.CONTAINER,
|
|
||||||
};
|
|
||||||
}
|
|
||||||
|
|
||||||
return {
|
|
||||||
...others,
|
|
||||||
items,
|
|
||||||
id: '',
|
|
||||||
type: NodeType.CONTAINER,
|
|
||||||
};
|
|
||||||
});
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style scoped>
|
|
||||||
.in-editor .magic-ui-page-fragment-container {
|
|
||||||
min-width: 100px;
|
|
||||||
min-height: 100px;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
@ -1,25 +0,0 @@
|
|||||||
/*
|
|
||||||
* 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.
|
|
||||||
*/
|
|
||||||
|
|
||||||
export default [
|
|
||||||
{
|
|
||||||
name: 'pageFragmentId',
|
|
||||||
text: '页面片ID',
|
|
||||||
type: 'page-fragment-select',
|
|
||||||
},
|
|
||||||
];
|
|
||||||
@ -1,24 +0,0 @@
|
|||||||
/*
|
|
||||||
* 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.
|
|
||||||
*/
|
|
||||||
|
|
||||||
export default {
|
|
||||||
style: {
|
|
||||||
width: '',
|
|
||||||
height: '',
|
|
||||||
},
|
|
||||||
};
|
|
||||||
@ -1,24 +0,0 @@
|
|||||||
/*
|
|
||||||
* 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 PageFragment from './src/PageFragment.vue';
|
|
||||||
|
|
||||||
export { default as config } from './src/formConfig';
|
|
||||||
export { default as value } from './src/initValue';
|
|
||||||
|
|
||||||
export default PageFragment;
|
|
||||||
@ -1,25 +0,0 @@
|
|||||||
<template>
|
|
||||||
<MContainer class="magic-ui-page-fragment" :config="config"></MContainer>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script lang="ts" setup>
|
|
||||||
import type { MPageFragment } from '@tmagic/schema';
|
|
||||||
import { useApp } from '@tmagic/vue-runtime-help';
|
|
||||||
|
|
||||||
import MContainer from '../../container';
|
|
||||||
|
|
||||||
const props = withDefaults(
|
|
||||||
defineProps<{
|
|
||||||
config: MPageFragment;
|
|
||||||
model?: any;
|
|
||||||
}>(),
|
|
||||||
{
|
|
||||||
model: () => ({}),
|
|
||||||
},
|
|
||||||
);
|
|
||||||
|
|
||||||
useApp({
|
|
||||||
config: props.config,
|
|
||||||
methods: {},
|
|
||||||
});
|
|
||||||
</script>
|
|
||||||
@ -1,50 +0,0 @@
|
|||||||
/*
|
|
||||||
* 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.
|
|
||||||
*/
|
|
||||||
|
|
||||||
export default [
|
|
||||||
{
|
|
||||||
text: '页面片标识',
|
|
||||||
name: 'name',
|
|
||||||
disabled: true,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
text: '页面片标题',
|
|
||||||
name: 'title',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: 'layout',
|
|
||||||
text: '容器布局',
|
|
||||||
type: 'select',
|
|
||||||
defaultValue: 'absolute',
|
|
||||||
options: [
|
|
||||||
{ value: 'absolute', text: '绝对定位' },
|
|
||||||
{ value: 'relative', text: '流式布局' },
|
|
||||||
],
|
|
||||||
onChange: (formState: any, v: string, { model }: any) => {
|
|
||||||
if (!model.style) return v;
|
|
||||||
if (v === 'relative') {
|
|
||||||
model.style.height = 'auto';
|
|
||||||
} else {
|
|
||||||
const el = formState.stage?.renderer?.contentWindow.document.getElementById(model.id);
|
|
||||||
if (el) {
|
|
||||||
model.style.height = el.getBoundingClientRect().height;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
},
|
|
||||||
];
|
|
||||||
@ -1,25 +0,0 @@
|
|||||||
/*
|
|
||||||
* 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.
|
|
||||||
*/
|
|
||||||
|
|
||||||
export default {
|
|
||||||
items: [],
|
|
||||||
style: {
|
|
||||||
width: '375',
|
|
||||||
height: '817',
|
|
||||||
},
|
|
||||||
};
|
|
||||||
@ -1,25 +0,0 @@
|
|||||||
/*
|
|
||||||
* 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 Page from './src/index.vue';
|
|
||||||
|
|
||||||
export { default as config } from './src/formConfig';
|
|
||||||
export { default as value } from './src/initValue';
|
|
||||||
export { default as event } from './src/event';
|
|
||||||
|
|
||||||
export default Page;
|
|
||||||
@ -1,8 +0,0 @@
|
|||||||
export default {
|
|
||||||
methods: [
|
|
||||||
{
|
|
||||||
label: '刷新页面',
|
|
||||||
value: 'refresh',
|
|
||||||
},
|
|
||||||
],
|
|
||||||
};
|
|
||||||
@ -1,52 +0,0 @@
|
|||||||
/*
|
|
||||||
* 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.
|
|
||||||
*/
|
|
||||||
|
|
||||||
export default [
|
|
||||||
{
|
|
||||||
text: '页面标识',
|
|
||||||
name: 'name',
|
|
||||||
disabled: true,
|
|
||||||
extra: '在多页面的情况下用来指定要打开的页面',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
text: '页面标题',
|
|
||||||
name: 'title',
|
|
||||||
type: 'data-source-input',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: 'layout',
|
|
||||||
text: '容器布局',
|
|
||||||
type: 'select',
|
|
||||||
defaultValue: 'absolute',
|
|
||||||
options: [
|
|
||||||
{ value: 'absolute', text: '绝对定位' },
|
|
||||||
{ value: 'relative', text: '流式布局' },
|
|
||||||
],
|
|
||||||
onChange: (formState: any, v: string, { model }: any) => {
|
|
||||||
if (!model.style) return v;
|
|
||||||
if (v === 'relative') {
|
|
||||||
model.style.height = 'auto';
|
|
||||||
} else {
|
|
||||||
const el = formState.stage?.renderer?.contentWindow.document.getElementById(model.id);
|
|
||||||
if (el) {
|
|
||||||
model.style.height = el.getBoundingClientRect().height;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
},
|
|
||||||
];
|
|
||||||
@ -1,29 +0,0 @@
|
|||||||
<template>
|
|
||||||
<MContainer class="magic-ui-page" :config="config"></MContainer>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script lang="ts" setup>
|
|
||||||
import type { MPage } from '@tmagic/schema';
|
|
||||||
import { useApp } from '@tmagic/vue-runtime-help';
|
|
||||||
|
|
||||||
import MContainer from '../../container';
|
|
||||||
|
|
||||||
const props = withDefaults(
|
|
||||||
defineProps<{
|
|
||||||
config: MPage;
|
|
||||||
model?: any;
|
|
||||||
}>(),
|
|
||||||
{
|
|
||||||
model: () => ({}),
|
|
||||||
},
|
|
||||||
);
|
|
||||||
|
|
||||||
const refresh = () => {
|
|
||||||
window.location.reload();
|
|
||||||
};
|
|
||||||
|
|
||||||
useApp({
|
|
||||||
config: props.config,
|
|
||||||
methods: { refresh },
|
|
||||||
});
|
|
||||||
</script>
|
|
||||||
@ -1,25 +0,0 @@
|
|||||||
/*
|
|
||||||
* 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.
|
|
||||||
*/
|
|
||||||
|
|
||||||
export default {
|
|
||||||
items: [],
|
|
||||||
style: {
|
|
||||||
width: '100%',
|
|
||||||
height: '100%',
|
|
||||||
},
|
|
||||||
};
|
|
||||||
@ -1,24 +0,0 @@
|
|||||||
/*
|
|
||||||
* 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 Qrcode from './src/index.vue';
|
|
||||||
|
|
||||||
export { default as config } from './src/formConfig';
|
|
||||||
export { default as value } from './src/initValue';
|
|
||||||
|
|
||||||
export default Qrcode;
|
|
||||||
@ -1,25 +0,0 @@
|
|||||||
/*
|
|
||||||
* 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.
|
|
||||||
*/
|
|
||||||
|
|
||||||
export default [
|
|
||||||
{
|
|
||||||
text: '链接',
|
|
||||||
name: 'url',
|
|
||||||
type: 'data-source-input',
|
|
||||||
},
|
|
||||||
];
|
|
||||||
@ -1,41 +0,0 @@
|
|||||||
<template>
|
|
||||||
<img class="magic-ui-qrcode" :src="imgUrl" />
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script lang="ts" setup>
|
|
||||||
import { ref, watch } from 'vue';
|
|
||||||
import QRCode from 'qrcode';
|
|
||||||
|
|
||||||
import type { MComponent } from '@tmagic/schema';
|
|
||||||
import { useApp } from '@tmagic/vue-runtime-help';
|
|
||||||
|
|
||||||
const props = withDefaults(
|
|
||||||
defineProps<{
|
|
||||||
config: MComponent;
|
|
||||||
model?: any;
|
|
||||||
}>(),
|
|
||||||
{
|
|
||||||
model: () => ({}),
|
|
||||||
},
|
|
||||||
);
|
|
||||||
|
|
||||||
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,
|
|
||||||
},
|
|
||||||
);
|
|
||||||
|
|
||||||
useApp({
|
|
||||||
config: props.config,
|
|
||||||
methods: {},
|
|
||||||
});
|
|
||||||
</script>
|
|
||||||
@ -1,27 +0,0 @@
|
|||||||
/*
|
|
||||||
* 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.
|
|
||||||
*/
|
|
||||||
|
|
||||||
export default {
|
|
||||||
url: 'https://m.film.qq.com',
|
|
||||||
style: {
|
|
||||||
position: 'absolute',
|
|
||||||
left: '57',
|
|
||||||
width: '176',
|
|
||||||
height: '176',
|
|
||||||
},
|
|
||||||
};
|
|
||||||
@ -1,24 +0,0 @@
|
|||||||
/*
|
|
||||||
* 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 Text from './src/index.vue';
|
|
||||||
|
|
||||||
export { default as config } from './src/formConfig';
|
|
||||||
export { default as value } from './src/initValue';
|
|
||||||
|
|
||||||
export default Text;
|
|
||||||
@ -1,30 +0,0 @@
|
|||||||
/*
|
|
||||||
* 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.
|
|
||||||
*/
|
|
||||||
|
|
||||||
export default [
|
|
||||||
{
|
|
||||||
name: 'text',
|
|
||||||
text: '文本',
|
|
||||||
type: 'data-source-input',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: 'multiple',
|
|
||||||
text: '多行文本',
|
|
||||||
type: 'switch',
|
|
||||||
},
|
|
||||||
];
|
|
||||||
@ -1,23 +0,0 @@
|
|||||||
<template>
|
|
||||||
<p>{{ config.text }}</p>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script lang="ts" setup>
|
|
||||||
import type { MComponent } from '@tmagic/schema';
|
|
||||||
import { useApp } from '@tmagic/vue-runtime-help';
|
|
||||||
|
|
||||||
const props = withDefaults(
|
|
||||||
defineProps<{
|
|
||||||
config: MComponent & { type: 'text'; text: string };
|
|
||||||
model?: any;
|
|
||||||
}>(),
|
|
||||||
{
|
|
||||||
model: () => ({}),
|
|
||||||
},
|
|
||||||
);
|
|
||||||
|
|
||||||
useApp({
|
|
||||||
config: props.config,
|
|
||||||
methods: {},
|
|
||||||
});
|
|
||||||
</script>
|
|
||||||
@ -1,27 +0,0 @@
|
|||||||
/*
|
|
||||||
* 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.
|
|
||||||
*/
|
|
||||||
|
|
||||||
export default {
|
|
||||||
type: 'text',
|
|
||||||
text: '请输入文本内容',
|
|
||||||
multiple: true,
|
|
||||||
style: {
|
|
||||||
width: '100',
|
|
||||||
height: 'auto',
|
|
||||||
},
|
|
||||||
};
|
|
||||||
@ -1,45 +0,0 @@
|
|||||||
/*
|
|
||||||
* 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.
|
|
||||||
*/
|
|
||||||
|
|
||||||
/* style */
|
|
||||||
export type PartCSSStyle = {
|
|
||||||
[key in keyof CSSStyleDeclaration]?: string | number;
|
|
||||||
};
|
|
||||||
export type CSSStyleKey = keyof CSSStyleDeclaration;
|
|
||||||
export type CanModifyCSSStyleKey = Exclude<CSSStyleKey, 'length' | 'parentRule'>;
|
|
||||||
export type StyleCfg = ((p1: any, p2: any) => PartCSSStyle) | PartCSSStyle;
|
|
||||||
|
|
||||||
/* event */
|
|
||||||
export interface MEvent {
|
|
||||||
name: string;
|
|
||||||
to: number | string;
|
|
||||||
method: string;
|
|
||||||
}
|
|
||||||
export interface MEventInMap {
|
|
||||||
from: number | string;
|
|
||||||
to: number | string;
|
|
||||||
method: string;
|
|
||||||
}
|
|
||||||
export type MEventMapType = Record<string, MEventInMap[]>;
|
|
||||||
export type MEventQueueMapType = Record<string | number, MEventInMap[]>;
|
|
||||||
export interface MEventBus {
|
|
||||||
$on: (...args: any) => void;
|
|
||||||
$off: (...args: any) => void;
|
|
||||||
$once: (...args: any) => void;
|
|
||||||
$emit: (...args: any) => void;
|
|
||||||
}
|
|
||||||
339
pnpm-lock.yaml
generated
339
pnpm-lock.yaml
generated
@ -635,34 +635,40 @@ importers:
|
|||||||
|
|
||||||
packages/ui:
|
packages/ui:
|
||||||
dependencies:
|
dependencies:
|
||||||
'@tmagic/core':
|
'@tmagic/vue-button':
|
||||||
specifier: workspace:*
|
specifier: workspace:*
|
||||||
version: link:../core
|
version: link:../../vue-components/button
|
||||||
'@tmagic/schema':
|
'@tmagic/vue-container':
|
||||||
specifier: workspace:*
|
specifier: workspace:*
|
||||||
version: link:../schema
|
version: link:../../vue-components/container
|
||||||
'@tmagic/utils':
|
'@tmagic/vue-img':
|
||||||
specifier: workspace:*
|
specifier: workspace:*
|
||||||
version: link:../utils
|
version: link:../../vue-components/img
|
||||||
'@tmagic/vue-runtime-help':
|
'@tmagic/vue-iterator-container':
|
||||||
specifier: workspace:*
|
specifier: workspace:*
|
||||||
version: link:../../runtime/vue-runtime-help
|
version: link:../../vue-components/iterator-container
|
||||||
qrcode:
|
'@tmagic/vue-overlay':
|
||||||
specifier: ^1.5.0
|
specifier: workspace:*
|
||||||
version: 1.5.3
|
version: link:../../vue-components/overlay
|
||||||
|
'@tmagic/vue-page':
|
||||||
|
specifier: workspace:*
|
||||||
|
version: link:../../vue-components/page
|
||||||
|
'@tmagic/vue-page-fragment':
|
||||||
|
specifier: workspace:*
|
||||||
|
version: link:../../vue-components/page-fragment
|
||||||
|
'@tmagic/vue-page-fragment-container':
|
||||||
|
specifier: workspace:*
|
||||||
|
version: link:../../vue-components/page-fragment-container
|
||||||
|
'@tmagic/vue-qrcode':
|
||||||
|
specifier: workspace:*
|
||||||
|
version: link:../../vue-components/qrcode
|
||||||
|
'@tmagic/vue-text':
|
||||||
|
specifier: workspace:*
|
||||||
|
version: link:../../vue-components/text
|
||||||
typescript:
|
typescript:
|
||||||
specifier: '*'
|
specifier: '*'
|
||||||
version: 5.5.4
|
version: 5.5.4
|
||||||
vue:
|
|
||||||
specifier: '>=3.4.27'
|
|
||||||
version: 3.4.35(typescript@5.5.4)
|
|
||||||
devDependencies:
|
devDependencies:
|
||||||
'@types/qrcode':
|
|
||||||
specifier: ^1.4.2
|
|
||||||
version: 1.5.5
|
|
||||||
'@vue/compiler-sfc':
|
|
||||||
specifier: ^3.4.27
|
|
||||||
version: 3.4.35
|
|
||||||
rimraf:
|
rimraf:
|
||||||
specifier: ^3.0.2
|
specifier: ^3.0.2
|
||||||
version: 3.0.2
|
version: 3.0.2
|
||||||
@ -701,31 +707,6 @@ importers:
|
|||||||
specifier: ^18.3.0
|
specifier: ^18.3.0
|
||||||
version: 18.3.0
|
version: 18.3.0
|
||||||
|
|
||||||
packages/ui-vue2:
|
|
||||||
dependencies:
|
|
||||||
'@tmagic/core':
|
|
||||||
specifier: workspace:*
|
|
||||||
version: link:../core
|
|
||||||
'@tmagic/schema':
|
|
||||||
specifier: workspace:*
|
|
||||||
version: link:../schema
|
|
||||||
'@tmagic/utils':
|
|
||||||
specifier: workspace:*
|
|
||||||
version: link:../utils
|
|
||||||
qrcode:
|
|
||||||
specifier: ^1.5.0
|
|
||||||
version: 1.5.3
|
|
||||||
typescript:
|
|
||||||
specifier: '*'
|
|
||||||
version: 5.5.4
|
|
||||||
vue:
|
|
||||||
specifier: '>=2.7.4'
|
|
||||||
version: 3.4.35(typescript@5.5.4)
|
|
||||||
devDependencies:
|
|
||||||
vue-template-compiler:
|
|
||||||
specifier: ^2.7.4
|
|
||||||
version: 2.7.16
|
|
||||||
|
|
||||||
packages/utils:
|
packages/utils:
|
||||||
dependencies:
|
dependencies:
|
||||||
'@tmagic/schema':
|
'@tmagic/schema':
|
||||||
@ -882,8 +863,8 @@ importers:
|
|||||||
version: 5.31.3
|
version: 5.31.3
|
||||||
devDependencies:
|
devDependencies:
|
||||||
'@tmagic/cli':
|
'@tmagic/cli':
|
||||||
specifier: 1.4.6
|
specifier: workspace:*
|
||||||
version: 1.4.6(typescript@5.5.4)
|
version: link:../../packages/cli
|
||||||
'@types/lodash-es':
|
'@types/lodash-es':
|
||||||
specifier: ^4.17.4
|
specifier: ^4.17.4
|
||||||
version: 4.17.12
|
version: 4.17.12
|
||||||
@ -982,7 +963,7 @@ importers:
|
|||||||
specifier: '>=2.0.0 || >=3.0.0'
|
specifier: '>=2.0.0 || >=3.0.0'
|
||||||
version: 3.4.35(typescript@5.5.4)
|
version: 3.4.35(typescript@5.5.4)
|
||||||
vue-demi:
|
vue-demi:
|
||||||
specifier: ^0.14.7
|
specifier: ^0.14.10
|
||||||
version: 0.14.10(@vue/composition-api@1.7.2(vue@3.4.35(typescript@5.5.4)))(vue@3.4.35(typescript@5.5.4))
|
version: 0.14.10(@vue/composition-api@1.7.2(vue@3.4.35(typescript@5.5.4)))(vue@3.4.35(typescript@5.5.4))
|
||||||
devDependencies:
|
devDependencies:
|
||||||
'@types/node':
|
'@types/node':
|
||||||
@ -1026,8 +1007,8 @@ importers:
|
|||||||
version: 2.7.16
|
version: 2.7.16
|
||||||
devDependencies:
|
devDependencies:
|
||||||
'@tmagic/cli':
|
'@tmagic/cli':
|
||||||
specifier: 1.4.6
|
specifier: workspace:*
|
||||||
version: 1.4.6(typescript@5.5.4)
|
version: link:../../packages/cli
|
||||||
'@types/events':
|
'@types/events':
|
||||||
specifier: ^3.0.0
|
specifier: ^3.0.0
|
||||||
version: 3.0.3
|
version: 3.0.3
|
||||||
@ -1084,8 +1065,8 @@ importers:
|
|||||||
version: 3.4.35(typescript@5.5.4)
|
version: 3.4.35(typescript@5.5.4)
|
||||||
devDependencies:
|
devDependencies:
|
||||||
'@tmagic/cli':
|
'@tmagic/cli':
|
||||||
specifier: 1.4.5
|
specifier: workspace:*
|
||||||
version: 1.4.5
|
version: link:../../packages/cli
|
||||||
'@types/node':
|
'@types/node':
|
||||||
specifier: ^18.19.0
|
specifier: ^18.19.0
|
||||||
version: 18.19.42
|
version: 18.19.42
|
||||||
@ -1123,6 +1104,223 @@ importers:
|
|||||||
specifier: ^5.3.5
|
specifier: ^5.3.5
|
||||||
version: 5.3.5(@types/node@18.19.42)(sass@1.77.8)(terser@5.31.3)
|
version: 5.3.5(@types/node@18.19.42)(sass@1.77.8)(terser@5.31.3)
|
||||||
|
|
||||||
|
vue-components/button:
|
||||||
|
dependencies:
|
||||||
|
'@tmagic/schema':
|
||||||
|
specifier: workspace:*
|
||||||
|
version: link:../../packages/schema
|
||||||
|
'@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.4.35(typescript@5.5.4))
|
||||||
|
typescript:
|
||||||
|
specifier: '*'
|
||||||
|
version: 5.5.4
|
||||||
|
vue:
|
||||||
|
specifier: '>=2.0.0 || >=3.0.0'
|
||||||
|
version: 3.4.35(typescript@5.5.4)
|
||||||
|
vue-demi:
|
||||||
|
specifier: ^0.14.10
|
||||||
|
version: 0.14.10(@vue/composition-api@1.7.2(vue@3.4.35(typescript@5.5.4)))(vue@3.4.35(typescript@5.5.4))
|
||||||
|
|
||||||
|
vue-components/container:
|
||||||
|
dependencies:
|
||||||
|
'@tmagic/schema':
|
||||||
|
specifier: workspace:*
|
||||||
|
version: link:../../packages/schema
|
||||||
|
'@tmagic/utils':
|
||||||
|
specifier: workspace:*
|
||||||
|
version: link:../../packages/utils
|
||||||
|
'@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.4.35(typescript@5.5.4))
|
||||||
|
typescript:
|
||||||
|
specifier: '*'
|
||||||
|
version: 5.5.4
|
||||||
|
vue:
|
||||||
|
specifier: '>=2.0.0 || >=3.0.0'
|
||||||
|
version: 3.4.35(typescript@5.5.4)
|
||||||
|
vue-demi:
|
||||||
|
specifier: ^0.14.10
|
||||||
|
version: 0.14.10(@vue/composition-api@1.7.2(vue@3.4.35(typescript@5.5.4)))(vue@3.4.35(typescript@5.5.4))
|
||||||
|
|
||||||
|
vue-components/img:
|
||||||
|
dependencies:
|
||||||
|
'@tmagic/schema':
|
||||||
|
specifier: workspace:*
|
||||||
|
version: link:../../packages/schema
|
||||||
|
'@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.4.35(typescript@5.5.4))
|
||||||
|
typescript:
|
||||||
|
specifier: '*'
|
||||||
|
version: 5.5.4
|
||||||
|
vue:
|
||||||
|
specifier: '>=2.0.0 || >=3.0.0'
|
||||||
|
version: 3.4.35(typescript@5.5.4)
|
||||||
|
vue-demi:
|
||||||
|
specifier: ^0.14.10
|
||||||
|
version: 0.14.10(@vue/composition-api@1.7.2(vue@3.4.35(typescript@5.5.4)))(vue@3.4.35(typescript@5.5.4))
|
||||||
|
|
||||||
|
vue-components/iterator-container:
|
||||||
|
dependencies:
|
||||||
|
'@tmagic/core':
|
||||||
|
specifier: workspace:*
|
||||||
|
version: link:../../packages/core
|
||||||
|
'@tmagic/schema':
|
||||||
|
specifier: workspace:*
|
||||||
|
version: link:../../packages/schema
|
||||||
|
'@tmagic/utils':
|
||||||
|
specifier: workspace:*
|
||||||
|
version: link:../../packages/utils
|
||||||
|
'@tmagic/vue-container':
|
||||||
|
specifier: workspace:*
|
||||||
|
version: link:../container
|
||||||
|
'@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.4.35(typescript@5.5.4))
|
||||||
|
typescript:
|
||||||
|
specifier: '*'
|
||||||
|
version: 5.5.4
|
||||||
|
vue:
|
||||||
|
specifier: '>=2.0.0 || >=3.0.0'
|
||||||
|
version: 3.4.35(typescript@5.5.4)
|
||||||
|
vue-demi:
|
||||||
|
specifier: ^0.14.10
|
||||||
|
version: 0.14.10(@vue/composition-api@1.7.2(vue@3.4.35(typescript@5.5.4)))(vue@3.4.35(typescript@5.5.4))
|
||||||
|
|
||||||
|
vue-components/overlay:
|
||||||
|
dependencies:
|
||||||
|
'@tmagic/schema':
|
||||||
|
specifier: workspace:*
|
||||||
|
version: link:../../packages/schema
|
||||||
|
'@tmagic/vue-container':
|
||||||
|
specifier: workspace:*
|
||||||
|
version: link:../container
|
||||||
|
'@tmagic/vue-runtime-help':
|
||||||
|
specifier: workspace:*
|
||||||
|
version: link:../../runtime/vue-runtime-help
|
||||||
|
typescript:
|
||||||
|
specifier: '*'
|
||||||
|
version: 5.5.4
|
||||||
|
vue-demi:
|
||||||
|
specifier: ^0.14.10
|
||||||
|
version: 0.14.10(@vue/composition-api@1.7.2(vue@3.4.35(typescript@5.5.4)))(vue@3.4.35(typescript@5.5.4))
|
||||||
|
|
||||||
|
vue-components/page:
|
||||||
|
dependencies:
|
||||||
|
'@tmagic/schema':
|
||||||
|
specifier: workspace:*
|
||||||
|
version: link:../../packages/schema
|
||||||
|
'@tmagic/vue-container':
|
||||||
|
specifier: workspace:*
|
||||||
|
version: link:../container
|
||||||
|
'@tmagic/vue-runtime-help':
|
||||||
|
specifier: workspace:*
|
||||||
|
version: link:../../runtime/vue-runtime-help
|
||||||
|
typescript:
|
||||||
|
specifier: '*'
|
||||||
|
version: 5.5.4
|
||||||
|
vue-demi:
|
||||||
|
specifier: ^0.14.10
|
||||||
|
version: 0.14.10(@vue/composition-api@1.7.2(vue@3.4.35(typescript@5.5.4)))(vue@3.4.35(typescript@5.5.4))
|
||||||
|
|
||||||
|
vue-components/page-fragment:
|
||||||
|
dependencies:
|
||||||
|
'@tmagic/schema':
|
||||||
|
specifier: workspace:*
|
||||||
|
version: link:../../packages/schema
|
||||||
|
'@tmagic/vue-container':
|
||||||
|
specifier: workspace:*
|
||||||
|
version: link:../container
|
||||||
|
'@tmagic/vue-runtime-help':
|
||||||
|
specifier: workspace:*
|
||||||
|
version: link:../../runtime/vue-runtime-help
|
||||||
|
typescript:
|
||||||
|
specifier: '*'
|
||||||
|
version: 5.5.4
|
||||||
|
vue-demi:
|
||||||
|
specifier: ^0.14.10
|
||||||
|
version: 0.14.10(@vue/composition-api@1.7.2(vue@3.4.35(typescript@5.5.4)))(vue@3.4.35(typescript@5.5.4))
|
||||||
|
|
||||||
|
vue-components/page-fragment-container:
|
||||||
|
dependencies:
|
||||||
|
'@tmagic/schema':
|
||||||
|
specifier: workspace:*
|
||||||
|
version: link:../../packages/schema
|
||||||
|
'@tmagic/vue-container':
|
||||||
|
specifier: workspace:*
|
||||||
|
version: link:../container
|
||||||
|
'@tmagic/vue-runtime-help':
|
||||||
|
specifier: workspace:*
|
||||||
|
version: link:../../runtime/vue-runtime-help
|
||||||
|
typescript:
|
||||||
|
specifier: '*'
|
||||||
|
version: 5.5.4
|
||||||
|
vue-demi:
|
||||||
|
specifier: ^0.14.10
|
||||||
|
version: 0.14.10(@vue/composition-api@1.7.2(vue@3.4.35(typescript@5.5.4)))(vue@3.4.35(typescript@5.5.4))
|
||||||
|
|
||||||
|
vue-components/qrcode:
|
||||||
|
dependencies:
|
||||||
|
'@tmagic/schema':
|
||||||
|
specifier: workspace:*
|
||||||
|
version: link:../../packages/schema
|
||||||
|
'@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.4.35(typescript@5.5.4))
|
||||||
|
qrcode:
|
||||||
|
specifier: ^1.5.0
|
||||||
|
version: 1.5.3
|
||||||
|
typescript:
|
||||||
|
specifier: '*'
|
||||||
|
version: 5.5.4
|
||||||
|
vue:
|
||||||
|
specifier: '>=2.0.0 || >=3.0.0'
|
||||||
|
version: 3.4.35(typescript@5.5.4)
|
||||||
|
vue-demi:
|
||||||
|
specifier: ^0.14.10
|
||||||
|
version: 0.14.10(@vue/composition-api@1.7.2(vue@3.4.35(typescript@5.5.4)))(vue@3.4.35(typescript@5.5.4))
|
||||||
|
devDependencies:
|
||||||
|
'@types/qrcode':
|
||||||
|
specifier: ^1.4.2
|
||||||
|
version: 1.5.5
|
||||||
|
|
||||||
|
vue-components/text:
|
||||||
|
dependencies:
|
||||||
|
'@tmagic/schema':
|
||||||
|
specifier: workspace:*
|
||||||
|
version: link:../../packages/schema
|
||||||
|
'@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.4.35(typescript@5.5.4))
|
||||||
|
typescript:
|
||||||
|
specifier: '*'
|
||||||
|
version: 5.5.4
|
||||||
|
vue:
|
||||||
|
specifier: '>=2.0.0 || >=3.0.0'
|
||||||
|
version: 3.4.35(typescript@5.5.4)
|
||||||
|
vue-demi:
|
||||||
|
specifier: ^0.14.10
|
||||||
|
version: 0.14.10(@vue/composition-api@1.7.2(vue@3.4.35(typescript@5.5.4)))(vue@3.4.35(typescript@5.5.4))
|
||||||
|
|
||||||
packages:
|
packages:
|
||||||
|
|
||||||
'@algolia/autocomplete-core@1.9.3':
|
'@algolia/autocomplete-core@1.9.3':
|
||||||
@ -2329,21 +2527,6 @@ packages:
|
|||||||
'@sxzz/popperjs-es@2.11.7':
|
'@sxzz/popperjs-es@2.11.7':
|
||||||
resolution: {integrity: sha512-Ccy0NlLkzr0Ex2FKvh2X+OyERHXJ88XJ1MXtsI9y9fGexlaXaVTPzBCRBwIxFkORuOb+uBqeu+RqnpgYTEZRUQ==}
|
resolution: {integrity: sha512-Ccy0NlLkzr0Ex2FKvh2X+OyERHXJ88XJ1MXtsI9y9fGexlaXaVTPzBCRBwIxFkORuOb+uBqeu+RqnpgYTEZRUQ==}
|
||||||
|
|
||||||
'@tmagic/cli@1.4.5':
|
|
||||||
resolution: {integrity: sha512-k+NMTXrQsuP+DZyxghCsh0fBkBVibu2pHquhfR9FW1lb9AkB4fHYwDmoxQo3vgenFXR3CeQQPrdLBX6tTtc9dg==}
|
|
||||||
engines: {node: '>=18'}
|
|
||||||
hasBin: true
|
|
||||||
|
|
||||||
'@tmagic/cli@1.4.6':
|
|
||||||
resolution: {integrity: sha512-TBkaik3GW7TRuOHCgsLMODUuJbb+Q76BnWuUqKu2OE2KFqeAPjPXVA1BYM/59ScilM4JddCv7vdNqYidi4aE0w==}
|
|
||||||
engines: {node: '>=18'}
|
|
||||||
hasBin: true
|
|
||||||
peerDependencies:
|
|
||||||
typescript: '*'
|
|
||||||
peerDependenciesMeta:
|
|
||||||
typescript:
|
|
||||||
optional: true
|
|
||||||
|
|
||||||
'@tmagic/core@1.4.15':
|
'@tmagic/core@1.4.15':
|
||||||
resolution: {integrity: sha512-s9FTvE316yIddsCAgBuPC5w7YEmNQUbW3FeQOUHdgTZiCEns3+gWdtaa+8T9FSHrhnUbLdMQsmKux7DJm8MxuA==}
|
resolution: {integrity: sha512-s9FTvE316yIddsCAgBuPC5w7YEmNQUbW3FeQOUHdgTZiCEns3+gWdtaa+8T9FSHrhnUbLdMQsmKux7DJm8MxuA==}
|
||||||
engines: {node: '>=18'}
|
engines: {node: '>=18'}
|
||||||
@ -7504,28 +7687,6 @@ snapshots:
|
|||||||
|
|
||||||
'@sxzz/popperjs-es@2.11.7': {}
|
'@sxzz/popperjs-es@2.11.7': {}
|
||||||
|
|
||||||
'@tmagic/cli@1.4.5':
|
|
||||||
dependencies:
|
|
||||||
cac: 6.7.14
|
|
||||||
chokidar: 3.6.0
|
|
||||||
esbuild: 0.21.5
|
|
||||||
fs-extra: 11.2.0
|
|
||||||
picocolors: 1.0.1
|
|
||||||
recast: 0.23.9
|
|
||||||
tslib: 2.6.3
|
|
||||||
|
|
||||||
'@tmagic/cli@1.4.6(typescript@5.5.4)':
|
|
||||||
dependencies:
|
|
||||||
cac: 6.7.14
|
|
||||||
chokidar: 3.6.0
|
|
||||||
esbuild: 0.21.5
|
|
||||||
fs-extra: 11.2.0
|
|
||||||
picocolors: 1.0.1
|
|
||||||
recast: 0.23.9
|
|
||||||
tslib: 2.6.3
|
|
||||||
optionalDependencies:
|
|
||||||
typescript: 5.5.4
|
|
||||||
|
|
||||||
'@tmagic/core@1.4.15(@tmagic/data-source@1.4.19(@tmagic/schema@1.4.15(typescript@5.5.4))(@tmagic/utils@1.4.15(@tmagic/schema@1.4.15(typescript@5.5.4))(typescript@5.5.4))(typescript@5.5.4))(@tmagic/schema@1.4.15(typescript@5.5.4))(@tmagic/utils@1.4.15(@tmagic/schema@1.4.15(typescript@5.5.4))(typescript@5.5.4))(typescript@5.5.4)':
|
'@tmagic/core@1.4.15(@tmagic/data-source@1.4.19(@tmagic/schema@1.4.15(typescript@5.5.4))(@tmagic/utils@1.4.15(@tmagic/schema@1.4.15(typescript@5.5.4))(typescript@5.5.4))(typescript@5.5.4))(@tmagic/schema@1.4.15(typescript@5.5.4))(@tmagic/utils@1.4.15(@tmagic/schema@1.4.15(typescript@5.5.4))(typescript@5.5.4))(typescript@5.5.4)':
|
||||||
dependencies:
|
dependencies:
|
||||||
'@tmagic/data-source': 1.4.19(@tmagic/schema@1.4.15(typescript@5.5.4))(@tmagic/utils@1.4.15(@tmagic/schema@1.4.15(typescript@5.5.4))(typescript@5.5.4))(typescript@5.5.4)
|
'@tmagic/data-source': 1.4.19(@tmagic/schema@1.4.15(typescript@5.5.4))(@tmagic/utils@1.4.15(@tmagic/schema@1.4.15(typescript@5.5.4))(typescript@5.5.4))(typescript@5.5.4)
|
||||||
|
|||||||
@ -1,4 +1,5 @@
|
|||||||
packages:
|
packages:
|
||||||
- 'packages/*'
|
- 'packages/*'
|
||||||
- 'playground'
|
- 'playground'
|
||||||
- 'runtime/*'
|
- 'runtime/*'
|
||||||
|
- 'vue-components/*'
|
||||||
@ -32,7 +32,7 @@
|
|||||||
"react-dom": "^18.3.1"
|
"react-dom": "^18.3.1"
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"@tmagic/cli": "1.4.6",
|
"@tmagic/cli": "workspace:*",
|
||||||
"@types/lodash-es": "^4.17.4",
|
"@types/lodash-es": "^4.17.4",
|
||||||
"@types/react": "^18.3.3",
|
"@types/react": "^18.3.3",
|
||||||
"@types/react-dom": "^18.3.0",
|
"@types/react-dom": "^18.3.0",
|
||||||
|
|||||||
@ -29,7 +29,7 @@
|
|||||||
"url": "https://github.com/Tencent/tmagic-editor.git"
|
"url": "https://github.com/Tencent/tmagic-editor.git"
|
||||||
},
|
},
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"vue-demi": "^0.14.7"
|
"vue-demi": "^0.14.10"
|
||||||
},
|
},
|
||||||
"peerDependencies": {
|
"peerDependencies": {
|
||||||
"@tmagic/core": "workspace:*",
|
"@tmagic/core": "workspace:*",
|
||||||
|
|||||||
@ -31,7 +31,7 @@
|
|||||||
"vue": "^2.7.4"
|
"vue": "^2.7.4"
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"@tmagic/cli": "1.4.6",
|
"@tmagic/cli": "workspace:*",
|
||||||
"@types/events": "^3.0.0",
|
"@types/events": "^3.0.0",
|
||||||
"axios": "^0.27.2",
|
"axios": "^0.27.2",
|
||||||
"rollup": "^4.17.2",
|
"rollup": "^4.17.2",
|
||||||
|
|||||||
@ -3,7 +3,7 @@ import path from 'path';
|
|||||||
import { defineConfig } from '@tmagic/cli';
|
import { defineConfig } from '@tmagic/cli';
|
||||||
|
|
||||||
export default defineConfig({
|
export default defineConfig({
|
||||||
packages: [path.join(__dirname, '../../packages/ui-vue2')],
|
packages: [path.join(__dirname, '../../packages/ui')],
|
||||||
componentFileAffix: '.vue',
|
componentFileAffix: '.vue',
|
||||||
dynamicImport: true,
|
dynamicImport: true,
|
||||||
});
|
});
|
||||||
|
|||||||
@ -4,6 +4,7 @@
|
|||||||
"type": "module",
|
"type": "module",
|
||||||
"private": true,
|
"private": true,
|
||||||
"scripts": {
|
"scripts": {
|
||||||
|
"tmagic": "tmagic entry",
|
||||||
"dev": "vite --config dev.vite.config.ts",
|
"dev": "vite --config dev.vite.config.ts",
|
||||||
"build": "npm run build:libs && npm run build:page && npm run build:playground",
|
"build": "npm run build:libs && npm run build:page && npm run build:playground",
|
||||||
"build:page": "vite build --config build.vite.config.ts --mode page",
|
"build:page": "vite build --config build.vite.config.ts --mode page",
|
||||||
@ -29,7 +30,7 @@
|
|||||||
"vue": "^3.4.35"
|
"vue": "^3.4.35"
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"@tmagic/cli": "1.4.5",
|
"@tmagic/cli": "workspace:*",
|
||||||
"@types/node": "^18.19.0",
|
"@types/node": "^18.19.0",
|
||||||
"@vitejs/plugin-legacy": "^5.4.0",
|
"@vitejs/plugin-legacy": "^5.4.0",
|
||||||
"@vitejs/plugin-vue": "^5.1.1",
|
"@vitejs/plugin-vue": "^5.1.1",
|
||||||
|
|||||||
@ -327,6 +327,7 @@ function updatePackage(pkgRoot, version, getNewPackageName, updateDep = false) {
|
|||||||
if (updateDep) {
|
if (updateDep) {
|
||||||
updateDeps(pkg, 'dependencies', version);
|
updateDeps(pkg, 'dependencies', version);
|
||||||
updateDeps(pkg, 'peerDependencies', version);
|
updateDeps(pkg, 'peerDependencies', version);
|
||||||
|
updateDeps(pkg, 'devDependencies', version);
|
||||||
}
|
}
|
||||||
|
|
||||||
fs.writeFileSync(pkgPath, `${JSON.stringify(pkg, null, 2)}\n`);
|
fs.writeFileSync(pkgPath, `${JSON.stringify(pkg, null, 2)}\n`);
|
||||||
|
|||||||
37
vue-components/button/package.json
Normal file
37
vue-components/button/package.json
Normal file
@ -0,0 +1,37 @@
|
|||||||
|
{
|
||||||
|
"version": "0.0.1",
|
||||||
|
"name": "@tmagic/vue-button",
|
||||||
|
"type": "module",
|
||||||
|
"main": "src/index.ts",
|
||||||
|
"files": [
|
||||||
|
"src"
|
||||||
|
],
|
||||||
|
"engines": {
|
||||||
|
"node": ">=18"
|
||||||
|
},
|
||||||
|
"repository": {
|
||||||
|
"type": "git",
|
||||||
|
"url": "https://github.com/Tencent/tmagic-editor.git"
|
||||||
|
},
|
||||||
|
"dependencies": {
|
||||||
|
"vue-demi": "^0.14.10"
|
||||||
|
},
|
||||||
|
"peerDependencies": {
|
||||||
|
"@tmagic/schema": "workspace:*",
|
||||||
|
"@tmagic/vue-runtime-help": "workspace:*",
|
||||||
|
"@vue/composition-api": ">=1.7.2",
|
||||||
|
"typescript": "*",
|
||||||
|
"vue": ">=2.0.0 || >=3.0.0"
|
||||||
|
},
|
||||||
|
"peerDependenciesMeta": {
|
||||||
|
"@vue/composition-api": {
|
||||||
|
"optional": true
|
||||||
|
},
|
||||||
|
"@tmagic/schema": {
|
||||||
|
"optional": true
|
||||||
|
},
|
||||||
|
"typescript": {
|
||||||
|
"optional": true
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
4
vue-components/button/src/event.ts
Normal file
4
vue-components/button/src/event.ts
Normal file
@ -0,0 +1,4 @@
|
|||||||
|
export default {
|
||||||
|
methods: [],
|
||||||
|
events: [],
|
||||||
|
};
|
||||||
@ -16,9 +16,10 @@
|
|||||||
* limitations under the License.
|
* limitations under the License.
|
||||||
*/
|
*/
|
||||||
|
|
||||||
import Button from './Button.vue';
|
import Button from './index.vue';
|
||||||
|
|
||||||
export { default as config } from './formConfig';
|
export { default as config } from './formConfig';
|
||||||
export { default as value } from './initValue';
|
export { default as value } from './initValue';
|
||||||
|
export { default as event } from './event';
|
||||||
|
|
||||||
export default Button;
|
export default Button;
|
||||||
39
vue-components/button/src/index.vue
Normal file
39
vue-components/button/src/index.vue
Normal file
@ -0,0 +1,39 @@
|
|||||||
|
<template>
|
||||||
|
<button class="magic-ui-button">
|
||||||
|
<slot>
|
||||||
|
<p>{{ config?.text || '' }}</p>
|
||||||
|
</slot>
|
||||||
|
</button>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script lang="ts">
|
||||||
|
import { defineComponent, type PropType } from 'vue-demi';
|
||||||
|
|
||||||
|
import type { MComponent } from '@tmagic/schema';
|
||||||
|
import { useApp } from '@tmagic/vue-runtime-help';
|
||||||
|
|
||||||
|
interface ButtonSchema extends MComponent {
|
||||||
|
type: 'button';
|
||||||
|
text: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
export default defineComponent({
|
||||||
|
props: {
|
||||||
|
config: {
|
||||||
|
type: Object as PropType<ButtonSchema>,
|
||||||
|
required: true,
|
||||||
|
},
|
||||||
|
model: {
|
||||||
|
type: Object,
|
||||||
|
default: () => ({}),
|
||||||
|
},
|
||||||
|
},
|
||||||
|
|
||||||
|
setup(props) {
|
||||||
|
useApp({
|
||||||
|
config: props.config,
|
||||||
|
methods: {},
|
||||||
|
});
|
||||||
|
},
|
||||||
|
});
|
||||||
|
</script>
|
||||||
38
vue-components/container/package.json
Normal file
38
vue-components/container/package.json
Normal file
@ -0,0 +1,38 @@
|
|||||||
|
{
|
||||||
|
"version": "0.0.1",
|
||||||
|
"name": "@tmagic/vue-container",
|
||||||
|
"type": "module",
|
||||||
|
"main": "src/index.ts",
|
||||||
|
"files": [
|
||||||
|
"src"
|
||||||
|
],
|
||||||
|
"engines": {
|
||||||
|
"node": ">=18"
|
||||||
|
},
|
||||||
|
"repository": {
|
||||||
|
"type": "git",
|
||||||
|
"url": "https://github.com/Tencent/tmagic-editor.git"
|
||||||
|
},
|
||||||
|
"dependencies": {
|
||||||
|
"vue-demi": "^0.14.10"
|
||||||
|
},
|
||||||
|
"peerDependencies": {
|
||||||
|
"@tmagic/schema": "workspace:*",
|
||||||
|
"@tmagic/utils": "workspace:*",
|
||||||
|
"@tmagic/vue-runtime-help": "workspace:*",
|
||||||
|
"@vue/composition-api": ">=1.7.2",
|
||||||
|
"typescript": "*",
|
||||||
|
"vue": ">=2.0.0 || >=3.0.0"
|
||||||
|
},
|
||||||
|
"peerDependenciesMeta": {
|
||||||
|
"typescript": {
|
||||||
|
"optional": true
|
||||||
|
},
|
||||||
|
"@vue/composition-api": {
|
||||||
|
"optional": true
|
||||||
|
},
|
||||||
|
"@tmagic/schema": {
|
||||||
|
"optional": true
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -26,38 +26,52 @@
|
|||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script lang="ts" setup>
|
<script lang="ts">
|
||||||
import { computed } from 'vue';
|
import { computed, defineComponent, type PropType } from 'vue-demi';
|
||||||
|
|
||||||
import type { Id, MContainer, UiComponentProps } from '@tmagic/schema';
|
import type { Id, MContainer } from '@tmagic/schema';
|
||||||
import { IS_DSL_NODE_KEY, toLine } from '@tmagic/utils';
|
import { IS_DSL_NODE_KEY, toLine } from '@tmagic/utils';
|
||||||
import { useApp } from '@tmagic/vue-runtime-help';
|
import { useApp } from '@tmagic/vue-runtime-help';
|
||||||
|
|
||||||
const props = withDefaults(
|
export default defineComponent({
|
||||||
defineProps<
|
props: {
|
||||||
UiComponentProps<MContainer> & {
|
config: {
|
||||||
iteratorIndex?: number[];
|
type: Object as PropType<MContainer>,
|
||||||
iteratorContainerId?: Id[];
|
required: true,
|
||||||
}
|
},
|
||||||
>(),
|
iteratorIndex: Array as PropType<number[]>,
|
||||||
{
|
iteratorContainerId: Array as PropType<Id[]>,
|
||||||
model: () => ({}),
|
model: {
|
||||||
|
type: Object,
|
||||||
|
default: () => ({}),
|
||||||
|
},
|
||||||
},
|
},
|
||||||
);
|
|
||||||
|
|
||||||
const { display, app } = useApp({
|
setup(props) {
|
||||||
config: props.config,
|
const { display, app } = useApp({
|
||||||
methods: {},
|
config: props.config,
|
||||||
});
|
methods: {},
|
||||||
|
});
|
||||||
|
|
||||||
const className = computed(() => {
|
const className = computed(() => {
|
||||||
const list = ['magic-ui-container'];
|
const list = ['magic-ui-container'];
|
||||||
if (props.config.layout) {
|
if (props.config.layout) {
|
||||||
list.push(`magic-layout-${props.config.layout}`);
|
list.push(`magic-layout-${props.config.layout}`);
|
||||||
}
|
}
|
||||||
if (props.config.className) {
|
if (props.config.className) {
|
||||||
list.push(props.config.className);
|
list.push(props.config.className);
|
||||||
}
|
}
|
||||||
return list.join(' ');
|
return list.join(' ');
|
||||||
|
});
|
||||||
|
|
||||||
|
return {
|
||||||
|
app,
|
||||||
|
className,
|
||||||
|
IS_DSL_NODE_KEY,
|
||||||
|
|
||||||
|
display,
|
||||||
|
toLine,
|
||||||
|
};
|
||||||
|
},
|
||||||
});
|
});
|
||||||
</script>
|
</script>
|
||||||
4
vue-components/container/src/event.ts
Normal file
4
vue-components/container/src/event.ts
Normal file
@ -0,0 +1,4 @@
|
|||||||
|
export default {
|
||||||
|
methods: [],
|
||||||
|
events: [],
|
||||||
|
};
|
||||||
@ -20,5 +20,6 @@ import Container from './Container.vue';
|
|||||||
|
|
||||||
export { default as config } from './formConfig';
|
export { default as config } from './formConfig';
|
||||||
export { default as value } from './initValue';
|
export { default as value } from './initValue';
|
||||||
|
export { default as event } from './event';
|
||||||
|
|
||||||
export default Container;
|
export default Container;
|
||||||
37
vue-components/img/package.json
Normal file
37
vue-components/img/package.json
Normal file
@ -0,0 +1,37 @@
|
|||||||
|
{
|
||||||
|
"version": "0.0.1",
|
||||||
|
"name": "@tmagic/vue-img",
|
||||||
|
"type": "module",
|
||||||
|
"main": "src/index.ts",
|
||||||
|
"files": [
|
||||||
|
"src"
|
||||||
|
],
|
||||||
|
"engines": {
|
||||||
|
"node": ">=18"
|
||||||
|
},
|
||||||
|
"repository": {
|
||||||
|
"type": "git",
|
||||||
|
"url": "https://github.com/Tencent/tmagic-editor.git"
|
||||||
|
},
|
||||||
|
"dependencies": {
|
||||||
|
"vue-demi": "^0.14.10"
|
||||||
|
},
|
||||||
|
"peerDependencies": {
|
||||||
|
"@tmagic/schema": "workspace:*",
|
||||||
|
"@tmagic/vue-runtime-help": "workspace:*",
|
||||||
|
"@vue/composition-api": ">=1.7.2",
|
||||||
|
"typescript": "*",
|
||||||
|
"vue": ">=2.0.0 || >=3.0.0"
|
||||||
|
},
|
||||||
|
"peerDependenciesMeta": {
|
||||||
|
"@vue/composition-api": {
|
||||||
|
"optional": true
|
||||||
|
},
|
||||||
|
"@tmagic/schema": {
|
||||||
|
"optional": true
|
||||||
|
},
|
||||||
|
"typescript": {
|
||||||
|
"optional": true
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
4
vue-components/img/src/event.ts
Normal file
4
vue-components/img/src/event.ts
Normal file
@ -0,0 +1,4 @@
|
|||||||
|
export default {
|
||||||
|
methods: [],
|
||||||
|
events: [],
|
||||||
|
};
|
||||||
25
vue-components/img/src/index.ts
Normal file
25
vue-components/img/src/index.ts
Normal file
@ -0,0 +1,25 @@
|
|||||||
|
/*
|
||||||
|
* 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 Img from './index.vue';
|
||||||
|
|
||||||
|
export { default as config } from './formConfig';
|
||||||
|
export { default as value } from './initValue';
|
||||||
|
export { default as event } from './event';
|
||||||
|
|
||||||
|
export default Img;
|
||||||
44
vue-components/img/src/index.vue
Normal file
44
vue-components/img/src/index.vue
Normal file
@ -0,0 +1,44 @@
|
|||||||
|
<template>
|
||||||
|
<img class="magic-ui-img" :src="config.src" @click="clickHandler" />
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script lang="ts">
|
||||||
|
import { defineComponent, type PropType } from 'vue-demi';
|
||||||
|
|
||||||
|
import type { MComponent } from '@tmagic/schema';
|
||||||
|
import { useApp } from '@tmagic/vue-runtime-help';
|
||||||
|
|
||||||
|
interface ImgSchema extends MComponent {
|
||||||
|
type: 'img';
|
||||||
|
src: string;
|
||||||
|
url: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
export default defineComponent({
|
||||||
|
props: {
|
||||||
|
config: {
|
||||||
|
type: Object as PropType<ImgSchema>,
|
||||||
|
required: true,
|
||||||
|
},
|
||||||
|
model: {
|
||||||
|
type: Object,
|
||||||
|
default: () => ({}),
|
||||||
|
},
|
||||||
|
},
|
||||||
|
|
||||||
|
setup(props) {
|
||||||
|
const clickHandler = () => {
|
||||||
|
if (props.config.url) window.location.href = props.config.url;
|
||||||
|
};
|
||||||
|
|
||||||
|
useApp({
|
||||||
|
config: props.config,
|
||||||
|
methods: {},
|
||||||
|
});
|
||||||
|
|
||||||
|
return {
|
||||||
|
clickHandler,
|
||||||
|
};
|
||||||
|
},
|
||||||
|
});
|
||||||
|
</script>
|
||||||
40
vue-components/iterator-container/package.json
Normal file
40
vue-components/iterator-container/package.json
Normal file
@ -0,0 +1,40 @@
|
|||||||
|
{
|
||||||
|
"version": "0.0.1",
|
||||||
|
"name": "@tmagic/vue-iterator-container",
|
||||||
|
"type": "module",
|
||||||
|
"main": "src/index.ts",
|
||||||
|
"files": [
|
||||||
|
"src"
|
||||||
|
],
|
||||||
|
"engines": {
|
||||||
|
"node": ">=18"
|
||||||
|
},
|
||||||
|
"repository": {
|
||||||
|
"type": "git",
|
||||||
|
"url": "https://github.com/Tencent/tmagic-editor.git"
|
||||||
|
},
|
||||||
|
"dependencies": {
|
||||||
|
"vue-demi": "^0.14.10"
|
||||||
|
},
|
||||||
|
"peerDependencies": {
|
||||||
|
"@tmagic/core": "workspace:*",
|
||||||
|
"@tmagic/schema": "workspace:*",
|
||||||
|
"@tmagic/utils": "workspace:*",
|
||||||
|
"@tmagic/vue-container": "workspace:*",
|
||||||
|
"@tmagic/vue-runtime-help": "workspace:*",
|
||||||
|
"@vue/composition-api": ">=1.7.2",
|
||||||
|
"typescript": "*",
|
||||||
|
"vue": ">=2.0.0 || >=3.0.0"
|
||||||
|
},
|
||||||
|
"peerDependenciesMeta": {
|
||||||
|
"@vue/composition-api": {
|
||||||
|
"optional": true
|
||||||
|
},
|
||||||
|
"@tmagic/schema": {
|
||||||
|
"optional": true
|
||||||
|
},
|
||||||
|
"typescript": {
|
||||||
|
"optional": true
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
123
vue-components/iterator-container/src/IteratorContainer.vue
Normal file
123
vue-components/iterator-container/src/IteratorContainer.vue
Normal file
@ -0,0 +1,123 @@
|
|||||||
|
<template>
|
||||||
|
<div
|
||||||
|
class="magic-ui-iterator-container"
|
||||||
|
:data-iterator-index="dataIteratorIndex"
|
||||||
|
:data-iterator-container-id="dataIteratorContainerId"
|
||||||
|
>
|
||||||
|
<TMagicContainer
|
||||||
|
v-for="(item, index) in configs"
|
||||||
|
:iterator-index="[...(dataIteratorIndex || []), index]"
|
||||||
|
:iterator-container-id="[...(dataIteratorContainerId || []), config.id]"
|
||||||
|
:key="index"
|
||||||
|
:config="item"
|
||||||
|
></TMagicContainer>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script lang="ts">
|
||||||
|
import { computed, defineComponent, type PropType, watch } from 'vue-demi';
|
||||||
|
|
||||||
|
import type { IteratorContainer as TMagicIteratorContainer } from '@tmagic/core';
|
||||||
|
import { type Id, type MIteratorContainer, NodeType } from '@tmagic/schema';
|
||||||
|
import TMagicContainer from '@tmagic/vue-container';
|
||||||
|
import { useApp } from '@tmagic/vue-runtime-help';
|
||||||
|
|
||||||
|
export default defineComponent({
|
||||||
|
components: {
|
||||||
|
TMagicContainer,
|
||||||
|
},
|
||||||
|
|
||||||
|
props: {
|
||||||
|
config: {
|
||||||
|
type: Object as PropType<MIteratorContainer>,
|
||||||
|
required: true,
|
||||||
|
},
|
||||||
|
dataIteratorIndex: Array as PropType<number[]>,
|
||||||
|
dataIteratorContainerId: Array as PropType<Id[]>,
|
||||||
|
model: {
|
||||||
|
type: Object,
|
||||||
|
default: () => ({}),
|
||||||
|
},
|
||||||
|
},
|
||||||
|
|
||||||
|
setup(props) {
|
||||||
|
const { app } = useApp({
|
||||||
|
config: props.config,
|
||||||
|
iteratorContainerId: props.dataIteratorContainerId,
|
||||||
|
iteratorIndex: props.dataIteratorIndex,
|
||||||
|
methods: {},
|
||||||
|
});
|
||||||
|
|
||||||
|
const configs = computed(() => {
|
||||||
|
let { iteratorData = [] } = props.config;
|
||||||
|
const { id, itemConfig, dsField, items } = props.config;
|
||||||
|
|
||||||
|
if (!Array.isArray(iteratorData)) {
|
||||||
|
iteratorData = [];
|
||||||
|
}
|
||||||
|
|
||||||
|
if (app?.platform === 'editor' && !iteratorData.length) {
|
||||||
|
iteratorData.push({});
|
||||||
|
}
|
||||||
|
|
||||||
|
return iteratorData.map((itemData) => {
|
||||||
|
const condResult =
|
||||||
|
app?.platform !== 'editor'
|
||||||
|
? app?.dataSourceManager?.compliedIteratorItemConds(itemData, itemConfig, dsField) ?? true
|
||||||
|
: true;
|
||||||
|
|
||||||
|
const newItems =
|
||||||
|
app?.dataSourceManager?.compliedIteratorItems(
|
||||||
|
id,
|
||||||
|
itemData,
|
||||||
|
items,
|
||||||
|
dsField,
|
||||||
|
props.dataIteratorContainerId,
|
||||||
|
props.dataIteratorIndex,
|
||||||
|
) ?? items;
|
||||||
|
|
||||||
|
return {
|
||||||
|
items: newItems,
|
||||||
|
id: '',
|
||||||
|
type: NodeType.CONTAINER,
|
||||||
|
condResult,
|
||||||
|
style: {
|
||||||
|
...itemConfig.style,
|
||||||
|
position: 'relative',
|
||||||
|
left: 0,
|
||||||
|
top: 0,
|
||||||
|
},
|
||||||
|
};
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
watch(
|
||||||
|
configs,
|
||||||
|
(configs) => {
|
||||||
|
const iteratorContainerNode = app?.getNode<TMagicIteratorContainer>(
|
||||||
|
props.config.id,
|
||||||
|
props.dataIteratorContainerId,
|
||||||
|
props.dataIteratorIndex,
|
||||||
|
);
|
||||||
|
|
||||||
|
if (!iteratorContainerNode) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
iteratorContainerNode.resetNodes();
|
||||||
|
|
||||||
|
configs.forEach((config, index) => {
|
||||||
|
iteratorContainerNode.setNodes(config.items, index);
|
||||||
|
});
|
||||||
|
},
|
||||||
|
{
|
||||||
|
immediate: true,
|
||||||
|
},
|
||||||
|
);
|
||||||
|
|
||||||
|
return {
|
||||||
|
configs,
|
||||||
|
};
|
||||||
|
},
|
||||||
|
});
|
||||||
|
</script>
|
||||||
4
vue-components/iterator-container/src/event.ts
Normal file
4
vue-components/iterator-container/src/event.ts
Normal file
@ -0,0 +1,4 @@
|
|||||||
|
export default {
|
||||||
|
methods: [],
|
||||||
|
events: [],
|
||||||
|
};
|
||||||
25
vue-components/iterator-container/src/index.ts
Normal file
25
vue-components/iterator-container/src/index.ts
Normal file
@ -0,0 +1,25 @@
|
|||||||
|
/*
|
||||||
|
* 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 IteratorContainer from './IteratorContainer.vue';
|
||||||
|
|
||||||
|
export { default as config } from './formConfig';
|
||||||
|
export { default as value } from './initValue';
|
||||||
|
export { default as event } from './event';
|
||||||
|
|
||||||
|
export default IteratorContainer;
|
||||||
@ -1,6 +1,6 @@
|
|||||||
{
|
{
|
||||||
"version": "1.4.19",
|
"version": "0.0.1",
|
||||||
"name": "@tmagic/ui-vue2",
|
"name": "@tmagic/vue-overlay",
|
||||||
"type": "module",
|
"type": "module",
|
||||||
"main": "src/index.ts",
|
"main": "src/index.ts",
|
||||||
"files": [
|
"files": [
|
||||||
@ -14,21 +14,18 @@
|
|||||||
"url": "https://github.com/Tencent/tmagic-editor.git"
|
"url": "https://github.com/Tencent/tmagic-editor.git"
|
||||||
},
|
},
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"qrcode": "^1.5.0"
|
"vue-demi": "^0.14.10"
|
||||||
},
|
},
|
||||||
"peerDependencies": {
|
"peerDependencies": {
|
||||||
"@tmagic/core": "workspace:*",
|
|
||||||
"@tmagic/schema": "workspace:*",
|
"@tmagic/schema": "workspace:*",
|
||||||
"@tmagic/utils": "workspace:*",
|
"@tmagic/vue-container": "workspace:*",
|
||||||
"vue": ">=2.7.4",
|
"@tmagic/vue-runtime-help": "workspace:*",
|
||||||
|
"vue-demi": ">=0.14.7",
|
||||||
"typescript": "*"
|
"typescript": "*"
|
||||||
},
|
},
|
||||||
"peerDependenciesMeta": {
|
"peerDependenciesMeta": {
|
||||||
"typescript": {
|
"typescript": {
|
||||||
"optional": true
|
"optional": true
|
||||||
}
|
}
|
||||||
},
|
|
||||||
"devDependencies": {
|
|
||||||
"vue-template-compiler": "^2.7.4"
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
25
vue-components/overlay/src/index.ts
Normal file
25
vue-components/overlay/src/index.ts
Normal file
@ -0,0 +1,25 @@
|
|||||||
|
/*
|
||||||
|
* 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 Overlay from './index.vue';
|
||||||
|
|
||||||
|
export { default as config } from './formConfig';
|
||||||
|
export { default as value } from './initValue';
|
||||||
|
export { default as event } from './event';
|
||||||
|
|
||||||
|
export default Overlay;
|
||||||
77
vue-components/overlay/src/index.vue
Normal file
77
vue-components/overlay/src/index.vue
Normal file
@ -0,0 +1,77 @@
|
|||||||
|
<template>
|
||||||
|
<TMagicContainer v-if="visible" class="magic-ui-overlay" :config="{ items: config.items }">
|
||||||
|
<slot></slot>
|
||||||
|
</TMagicContainer>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script lang="ts">
|
||||||
|
import { defineComponent, onBeforeUnmount, type PropType, ref } from 'vue-demi';
|
||||||
|
|
||||||
|
import type { MContainer, MNode, MPage } from '@tmagic/schema';
|
||||||
|
import TMagicContainer from '@tmagic/vue-container';
|
||||||
|
import { useApp } from '@tmagic/vue-runtime-help';
|
||||||
|
|
||||||
|
interface OverlaySchema extends MContainer {
|
||||||
|
type: 'overlay';
|
||||||
|
}
|
||||||
|
|
||||||
|
export default defineComponent({
|
||||||
|
components: {
|
||||||
|
TMagicContainer,
|
||||||
|
},
|
||||||
|
|
||||||
|
props: {
|
||||||
|
config: {
|
||||||
|
type: Object as PropType<OverlaySchema>,
|
||||||
|
required: true,
|
||||||
|
},
|
||||||
|
model: {
|
||||||
|
type: Object,
|
||||||
|
default: () => ({}),
|
||||||
|
},
|
||||||
|
},
|
||||||
|
|
||||||
|
setup(props) {
|
||||||
|
const visible = ref(false);
|
||||||
|
|
||||||
|
const { app, node } = useApp({
|
||||||
|
config: props.config,
|
||||||
|
methods: {
|
||||||
|
openOverlay() {
|
||||||
|
visible.value = true;
|
||||||
|
app?.emit('overlay:open', node);
|
||||||
|
},
|
||||||
|
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)) {
|
||||||
|
node?.instance.openOverlay();
|
||||||
|
} else {
|
||||||
|
node?.instance.closeOverlay();
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
app?.page?.on('editor:select', editorSelectHandler);
|
||||||
|
|
||||||
|
onBeforeUnmount(() => {
|
||||||
|
app?.page?.off('editor:select', editorSelectHandler);
|
||||||
|
});
|
||||||
|
|
||||||
|
return {
|
||||||
|
visible,
|
||||||
|
};
|
||||||
|
},
|
||||||
|
});
|
||||||
|
</script>
|
||||||
Some files were not shown because too many files have changed in this diff Show More
Loading…
x
Reference in New Issue
Block a user