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",
|
||||
"types"
|
||||
],
|
||||
"scripts": {
|
||||
"build": "node scripts/build.mjs"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=18"
|
||||
},
|
||||
@ -24,14 +21,18 @@
|
||||
"url": "https://github.com/Tencent/tmagic-editor.git"
|
||||
},
|
||||
"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": {
|
||||
"@tmagic/core": "workspace:*",
|
||||
"@tmagic/schema": "workspace:*",
|
||||
"@tmagic/utils": "workspace:*",
|
||||
"@tmagic/vue-runtime-help": "workspace:*",
|
||||
"vue": ">=3.4.27",
|
||||
"typescript": "*"
|
||||
},
|
||||
"peerDependenciesMeta": {
|
||||
@ -40,8 +41,6 @@
|
||||
}
|
||||
},
|
||||
"devDependencies": {
|
||||
"@types/qrcode": "^1.4.2",
|
||||
"@vue/compiler-sfc": "^3.4.27",
|
||||
"rimraf": "^3.0.2",
|
||||
"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.
|
||||
*/
|
||||
|
||||
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';
|
||||
import Button from '@tmagic/vue-button';
|
||||
import Container from '@tmagic/vue-container';
|
||||
import Img from '@tmagic/vue-img';
|
||||
import IteratorContainer from '@tmagic/vue-iterator-container';
|
||||
import Overlay from '@tmagic/vue-overlay';
|
||||
import Page from '@tmagic/vue-page';
|
||||
import PageFragment from '@tmagic/vue-page-fragment';
|
||||
import PageFragmentContainer from '@tmagic/vue-page-fragment-container';
|
||||
import QRcode from '@tmagic/vue-qrcode';
|
||||
import Text from '@tmagic/vue-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 TMagicUiOverlay } from './overlay';
|
||||
export { default as TMagicUiPage } from './page';
|
||||
export { default as TMagicUiPageFragment } from './page-fragment';
|
||||
export { default as TMagicUiPageFragmentContainer } from './page-fragment-container';
|
||||
export { default as TMagicUiQRcode } from './qrcode';
|
||||
export { default as TMagicUiText } from './text';
|
||||
export { default as TMagicUiButton } from '@tmagic/vue-button';
|
||||
export { default as TMagicUiContainer } from '@tmagic/vue-container';
|
||||
export { default as TMagicUiImg } from '@tmagic/vue-img';
|
||||
export { default as TMagicUiIteratorContainer } from '@tmagic/vue-iterator-container';
|
||||
export { default as TMagicUiOverlay } from '@tmagic/vue-overlay';
|
||||
export { default as TMagicUiPage } from '@tmagic/vue-page';
|
||||
export { default as TMagicUiPageFragment } from '@tmagic/vue-page-fragment';
|
||||
export { default as TMagicUiPageFragmentContainer } from '@tmagic/vue-page-fragment-container';
|
||||
export { default as TMagicUiQRcode } from '@tmagic/vue-qrcode';
|
||||
export { default as TMagicUiText } from '@tmagic/vue-text';
|
||||
|
||||
const ui: Record<string, any> = {
|
||||
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:
|
||||
dependencies:
|
||||
'@tmagic/core':
|
||||
'@tmagic/vue-button':
|
||||
specifier: workspace:*
|
||||
version: link:../core
|
||||
'@tmagic/schema':
|
||||
version: link:../../vue-components/button
|
||||
'@tmagic/vue-container':
|
||||
specifier: workspace:*
|
||||
version: link:../schema
|
||||
'@tmagic/utils':
|
||||
version: link:../../vue-components/container
|
||||
'@tmagic/vue-img':
|
||||
specifier: workspace:*
|
||||
version: link:../utils
|
||||
'@tmagic/vue-runtime-help':
|
||||
version: link:../../vue-components/img
|
||||
'@tmagic/vue-iterator-container':
|
||||
specifier: workspace:*
|
||||
version: link:../../runtime/vue-runtime-help
|
||||
qrcode:
|
||||
specifier: ^1.5.0
|
||||
version: 1.5.3
|
||||
version: link:../../vue-components/iterator-container
|
||||
'@tmagic/vue-overlay':
|
||||
specifier: workspace:*
|
||||
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:
|
||||
specifier: '*'
|
||||
version: 5.5.4
|
||||
vue:
|
||||
specifier: '>=3.4.27'
|
||||
version: 3.4.35(typescript@5.5.4)
|
||||
devDependencies:
|
||||
'@types/qrcode':
|
||||
specifier: ^1.4.2
|
||||
version: 1.5.5
|
||||
'@vue/compiler-sfc':
|
||||
specifier: ^3.4.27
|
||||
version: 3.4.35
|
||||
rimraf:
|
||||
specifier: ^3.0.2
|
||||
version: 3.0.2
|
||||
@ -701,31 +707,6 @@ importers:
|
||||
specifier: ^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:
|
||||
dependencies:
|
||||
'@tmagic/schema':
|
||||
@ -882,8 +863,8 @@ importers:
|
||||
version: 5.31.3
|
||||
devDependencies:
|
||||
'@tmagic/cli':
|
||||
specifier: 1.4.6
|
||||
version: 1.4.6(typescript@5.5.4)
|
||||
specifier: workspace:*
|
||||
version: link:../../packages/cli
|
||||
'@types/lodash-es':
|
||||
specifier: ^4.17.4
|
||||
version: 4.17.12
|
||||
@ -982,7 +963,7 @@ importers:
|
||||
specifier: '>=2.0.0 || >=3.0.0'
|
||||
version: 3.4.35(typescript@5.5.4)
|
||||
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))
|
||||
devDependencies:
|
||||
'@types/node':
|
||||
@ -1026,8 +1007,8 @@ importers:
|
||||
version: 2.7.16
|
||||
devDependencies:
|
||||
'@tmagic/cli':
|
||||
specifier: 1.4.6
|
||||
version: 1.4.6(typescript@5.5.4)
|
||||
specifier: workspace:*
|
||||
version: link:../../packages/cli
|
||||
'@types/events':
|
||||
specifier: ^3.0.0
|
||||
version: 3.0.3
|
||||
@ -1084,8 +1065,8 @@ importers:
|
||||
version: 3.4.35(typescript@5.5.4)
|
||||
devDependencies:
|
||||
'@tmagic/cli':
|
||||
specifier: 1.4.5
|
||||
version: 1.4.5
|
||||
specifier: workspace:*
|
||||
version: link:../../packages/cli
|
||||
'@types/node':
|
||||
specifier: ^18.19.0
|
||||
version: 18.19.42
|
||||
@ -1123,6 +1104,223 @@ importers:
|
||||
specifier: ^5.3.5
|
||||
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:
|
||||
|
||||
'@algolia/autocomplete-core@1.9.3':
|
||||
@ -2329,21 +2527,6 @@ packages:
|
||||
'@sxzz/popperjs-es@2.11.7':
|
||||
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':
|
||||
resolution: {integrity: sha512-s9FTvE316yIddsCAgBuPC5w7YEmNQUbW3FeQOUHdgTZiCEns3+gWdtaa+8T9FSHrhnUbLdMQsmKux7DJm8MxuA==}
|
||||
engines: {node: '>=18'}
|
||||
@ -7504,28 +7687,6 @@ snapshots:
|
||||
|
||||
'@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)':
|
||||
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)
|
||||
|
||||
@ -2,3 +2,4 @@ packages:
|
||||
- 'packages/*'
|
||||
- 'playground'
|
||||
- 'runtime/*'
|
||||
- 'vue-components/*'
|
||||
@ -32,7 +32,7 @@
|
||||
"react-dom": "^18.3.1"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@tmagic/cli": "1.4.6",
|
||||
"@tmagic/cli": "workspace:*",
|
||||
"@types/lodash-es": "^4.17.4",
|
||||
"@types/react": "^18.3.3",
|
||||
"@types/react-dom": "^18.3.0",
|
||||
|
||||
@ -29,7 +29,7 @@
|
||||
"url": "https://github.com/Tencent/tmagic-editor.git"
|
||||
},
|
||||
"dependencies": {
|
||||
"vue-demi": "^0.14.7"
|
||||
"vue-demi": "^0.14.10"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"@tmagic/core": "workspace:*",
|
||||
|
||||
@ -31,7 +31,7 @@
|
||||
"vue": "^2.7.4"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@tmagic/cli": "1.4.6",
|
||||
"@tmagic/cli": "workspace:*",
|
||||
"@types/events": "^3.0.0",
|
||||
"axios": "^0.27.2",
|
||||
"rollup": "^4.17.2",
|
||||
|
||||
@ -3,7 +3,7 @@ import path from 'path';
|
||||
import { defineConfig } from '@tmagic/cli';
|
||||
|
||||
export default defineConfig({
|
||||
packages: [path.join(__dirname, '../../packages/ui-vue2')],
|
||||
packages: [path.join(__dirname, '../../packages/ui')],
|
||||
componentFileAffix: '.vue',
|
||||
dynamicImport: true,
|
||||
});
|
||||
|
||||
@ -4,6 +4,7 @@
|
||||
"type": "module",
|
||||
"private": true,
|
||||
"scripts": {
|
||||
"tmagic": "tmagic entry",
|
||||
"dev": "vite --config dev.vite.config.ts",
|
||||
"build": "npm run build:libs && npm run build:page && npm run build:playground",
|
||||
"build:page": "vite build --config build.vite.config.ts --mode page",
|
||||
@ -29,7 +30,7 @@
|
||||
"vue": "^3.4.35"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@tmagic/cli": "1.4.5",
|
||||
"@tmagic/cli": "workspace:*",
|
||||
"@types/node": "^18.19.0",
|
||||
"@vitejs/plugin-legacy": "^5.4.0",
|
||||
"@vitejs/plugin-vue": "^5.1.1",
|
||||
|
||||
@ -327,6 +327,7 @@ function updatePackage(pkgRoot, version, getNewPackageName, updateDep = false) {
|
||||
if (updateDep) {
|
||||
updateDeps(pkg, 'dependencies', version);
|
||||
updateDeps(pkg, 'peerDependencies', version);
|
||||
updateDeps(pkg, 'devDependencies', version);
|
||||
}
|
||||
|
||||
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.
|
||||
*/
|
||||
|
||||
import Button from './Button.vue';
|
||||
import Button from './index.vue';
|
||||
|
||||
export { default as config } from './formConfig';
|
||||
export { default as value } from './initValue';
|
||||
export { default as event } from './event';
|
||||
|
||||
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,25 +26,28 @@
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { computed } from 'vue';
|
||||
<script lang="ts">
|
||||
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 { useApp } from '@tmagic/vue-runtime-help';
|
||||
|
||||
const props = withDefaults(
|
||||
defineProps<
|
||||
UiComponentProps<MContainer> & {
|
||||
iteratorIndex?: number[];
|
||||
iteratorContainerId?: Id[];
|
||||
}
|
||||
>(),
|
||||
{
|
||||
model: () => ({}),
|
||||
export default defineComponent({
|
||||
props: {
|
||||
config: {
|
||||
type: Object as PropType<MContainer>,
|
||||
required: true,
|
||||
},
|
||||
iteratorIndex: Array as PropType<number[]>,
|
||||
iteratorContainerId: Array as PropType<Id[]>,
|
||||
model: {
|
||||
type: Object,
|
||||
default: () => ({}),
|
||||
},
|
||||
},
|
||||
);
|
||||
|
||||
setup(props) {
|
||||
const { display, app } = useApp({
|
||||
config: props.config,
|
||||
methods: {},
|
||||
@ -60,4 +63,15 @@ const className = computed(() => {
|
||||
}
|
||||
return list.join(' ');
|
||||
});
|
||||
|
||||
return {
|
||||
app,
|
||||
className,
|
||||
IS_DSL_NODE_KEY,
|
||||
|
||||
display,
|
||||
toLine,
|
||||
};
|
||||
},
|
||||
});
|
||||
</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 value } from './initValue';
|
||||
export { default as event } from './event';
|
||||
|
||||
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",
|
||||
"name": "@tmagic/ui-vue2",
|
||||
"version": "0.0.1",
|
||||
"name": "@tmagic/vue-overlay",
|
||||
"type": "module",
|
||||
"main": "src/index.ts",
|
||||
"files": [
|
||||
@ -14,21 +14,18 @@
|
||||
"url": "https://github.com/Tencent/tmagic-editor.git"
|
||||
},
|
||||
"dependencies": {
|
||||
"qrcode": "^1.5.0"
|
||||
"vue-demi": "^0.14.10"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"@tmagic/core": "workspace:*",
|
||||
"@tmagic/schema": "workspace:*",
|
||||
"@tmagic/utils": "workspace:*",
|
||||
"vue": ">=2.7.4",
|
||||
"@tmagic/vue-container": "workspace:*",
|
||||
"@tmagic/vue-runtime-help": "workspace:*",
|
||||
"vue-demi": ">=0.14.7",
|
||||
"typescript": "*"
|
||||
},
|
||||
"peerDependenciesMeta": {
|
||||
"typescript": {
|
||||
"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