@tmagic/editor 1.5.0-beta.9 → 1.5.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/style.css +75 -16
- package/dist/tmagic-editor.js +797 -518
- package/dist/tmagic-editor.umd.cjs +802 -525
- package/package.json +12 -10
- package/src/Editor.vue +6 -1
- package/src/components/CodeBlockEditor.vue +11 -5
- package/src/components/CodeParams.vue +3 -3
- package/src/editorProps.ts +3 -1
- package/src/fields/Code.vue +1 -2
- package/src/fields/CodeSelect.vue +13 -11
- package/src/fields/CodeSelectCol.vue +32 -5
- package/src/fields/CondOpSelect.vue +5 -2
- package/src/fields/DataSourceFields.vue +31 -12
- package/src/fields/DataSourceMethods.vue +72 -14
- package/src/fields/DisplayConds.vue +8 -3
- package/src/fields/EventSelect.vue +28 -11
- package/src/fields/KeyValue.vue +15 -10
- package/src/fields/UISelect.vue +6 -3
- package/src/hooks/index.ts +0 -1
- package/src/hooks/use-code-block-edit.ts +1 -1
- package/src/hooks/use-data-source-edit.ts +3 -2
- package/src/hooks/use-filter.ts +1 -1
- package/src/hooks/use-node-status.ts +2 -2
- package/src/initService.ts +177 -74
- package/src/layouts/Framework.vue +8 -4
- package/src/layouts/PropsPanel.vue +3 -3
- package/src/layouts/page-bar/AddButton.vue +29 -9
- package/src/layouts/page-bar/PageBar.vue +78 -65
- package/src/layouts/page-bar/PageBarScrollContainer.vue +82 -96
- package/src/layouts/page-bar/PageList.vue +5 -3
- package/src/layouts/page-bar/Search.vue +67 -0
- package/src/layouts/sidebar/Sidebar.vue +3 -0
- package/src/layouts/sidebar/code-block/CodeBlockList.vue +6 -1
- package/src/layouts/sidebar/data-source/DataSourceConfigPanel.vue +7 -5
- package/src/layouts/sidebar/data-source/DataSourceList.vue +6 -1
- package/src/layouts/sidebar/layer/use-node-status.ts +2 -3
- package/src/layouts/workspace/Workspace.vue +5 -2
- package/src/layouts/workspace/viewer/Stage.vue +23 -5
- package/src/services/dataSource.ts +12 -5
- package/src/services/dep.ts +61 -13
- package/src/services/editor.ts +46 -51
- package/src/theme/page-bar.scss +38 -16
- package/src/theme/search-input.scss +1 -0
- package/src/type.ts +2 -1
- package/src/utils/data-source/formConfigs/http.ts +2 -0
- package/src/utils/data-source/index.ts +2 -2
- package/src/utils/editor.ts +78 -22
- package/src/utils/idle-task.ts +36 -4
- package/src/utils/props.ts +3 -3
- package/types/index.d.ts +835 -1169
- package/src/hooks/use-data-source-method.ts +0 -100
- package/src/layouts/page-bar/SwitchTypeButton.vue +0 -45
|
@@ -1,100 +0,0 @@
|
|
|
1
|
-
import { nextTick, ref } from 'vue';
|
|
2
|
-
import { cloneDeep } from 'lodash-es';
|
|
3
|
-
|
|
4
|
-
import type { CodeBlockContent, DataSourceSchema } from '@tmagic/core';
|
|
5
|
-
import { tMagicMessage } from '@tmagic/design';
|
|
6
|
-
|
|
7
|
-
import CodeBlockEditor from '@editor/components/CodeBlockEditor.vue';
|
|
8
|
-
import { getEditorConfig } from '@editor/utils/config';
|
|
9
|
-
|
|
10
|
-
export const useDataSourceMethod = () => {
|
|
11
|
-
const codeConfig = ref<CodeBlockContent>();
|
|
12
|
-
const codeBlockEditor = ref<InstanceType<typeof CodeBlockEditor>>();
|
|
13
|
-
|
|
14
|
-
const dataSource = ref<DataSourceSchema>();
|
|
15
|
-
const dataSourceMethod = ref('');
|
|
16
|
-
|
|
17
|
-
return {
|
|
18
|
-
codeConfig,
|
|
19
|
-
codeBlockEditor,
|
|
20
|
-
|
|
21
|
-
createCode: async (model: DataSourceSchema) => {
|
|
22
|
-
codeConfig.value = {
|
|
23
|
-
name: '',
|
|
24
|
-
content: `({ params, dataSource, app }) => {\n // place your code here\n}`,
|
|
25
|
-
params: [],
|
|
26
|
-
};
|
|
27
|
-
|
|
28
|
-
await nextTick();
|
|
29
|
-
|
|
30
|
-
dataSource.value = model;
|
|
31
|
-
dataSourceMethod.value = '';
|
|
32
|
-
|
|
33
|
-
codeBlockEditor.value?.show();
|
|
34
|
-
},
|
|
35
|
-
|
|
36
|
-
editCode: async (model: DataSourceSchema, methodName: string) => {
|
|
37
|
-
const method = model.methods?.find((method) => method.name === methodName);
|
|
38
|
-
|
|
39
|
-
if (!method) {
|
|
40
|
-
tMagicMessage.error('获取数据源方法失败');
|
|
41
|
-
return;
|
|
42
|
-
}
|
|
43
|
-
|
|
44
|
-
let codeContent = method.content || `({ params, dataSource, app }) => {\n // place your code here\n}`;
|
|
45
|
-
|
|
46
|
-
if (typeof codeContent !== 'string') {
|
|
47
|
-
codeContent = codeContent.toString();
|
|
48
|
-
}
|
|
49
|
-
|
|
50
|
-
codeConfig.value = {
|
|
51
|
-
...cloneDeep(method),
|
|
52
|
-
content: codeContent,
|
|
53
|
-
};
|
|
54
|
-
|
|
55
|
-
await nextTick();
|
|
56
|
-
|
|
57
|
-
dataSource.value = model;
|
|
58
|
-
dataSourceMethod.value = methodName;
|
|
59
|
-
|
|
60
|
-
codeBlockEditor.value?.show();
|
|
61
|
-
},
|
|
62
|
-
|
|
63
|
-
deleteCode: async (model: DataSourceSchema, methodName: string) => {
|
|
64
|
-
if (!model.methods) return;
|
|
65
|
-
|
|
66
|
-
const index = model.methods.findIndex((method) => method.name === methodName);
|
|
67
|
-
|
|
68
|
-
if (index === -1) {
|
|
69
|
-
return;
|
|
70
|
-
}
|
|
71
|
-
|
|
72
|
-
model.methods.splice(index, 1);
|
|
73
|
-
},
|
|
74
|
-
|
|
75
|
-
submitCode: (values: CodeBlockContent) => {
|
|
76
|
-
if (!dataSource.value) return;
|
|
77
|
-
|
|
78
|
-
if (!dataSource.value.methods) {
|
|
79
|
-
dataSource.value.methods = [];
|
|
80
|
-
}
|
|
81
|
-
|
|
82
|
-
if (values.content) {
|
|
83
|
-
// 在保存的时候转换代码内容
|
|
84
|
-
const parseDSL = getEditorConfig('parseDSL');
|
|
85
|
-
if (typeof values.content === 'string') {
|
|
86
|
-
values.content = parseDSL<(...args: any[]) => any>(values.content);
|
|
87
|
-
}
|
|
88
|
-
}
|
|
89
|
-
|
|
90
|
-
if (dataSourceMethod.value) {
|
|
91
|
-
const index = dataSource.value.methods.findIndex((method) => method.name === dataSourceMethod.value);
|
|
92
|
-
dataSource.value.methods.splice(index, 1, values);
|
|
93
|
-
} else {
|
|
94
|
-
dataSource.value.methods.push(values);
|
|
95
|
-
}
|
|
96
|
-
|
|
97
|
-
codeBlockEditor.value?.hide();
|
|
98
|
-
},
|
|
99
|
-
};
|
|
100
|
-
};
|
|
@@ -1,45 +0,0 @@
|
|
|
1
|
-
<template>
|
|
2
|
-
<TMagicButton
|
|
3
|
-
v-for="item in data"
|
|
4
|
-
class="m-editor-page-bar-switch-type-button"
|
|
5
|
-
size="small"
|
|
6
|
-
:key="item.type"
|
|
7
|
-
link
|
|
8
|
-
:class="{ active: modelValue === item.type }"
|
|
9
|
-
:type="modelValue === item.type ? 'primary' : ''"
|
|
10
|
-
@click="clickHandler(item.type)"
|
|
11
|
-
>{{ item.text }}</TMagicButton
|
|
12
|
-
>
|
|
13
|
-
</template>
|
|
14
|
-
|
|
15
|
-
<script setup lang="ts">
|
|
16
|
-
import { NodeType } from '@tmagic/core';
|
|
17
|
-
import { TMagicButton } from '@tmagic/design';
|
|
18
|
-
|
|
19
|
-
defineOptions({
|
|
20
|
-
name: 'MEditorPageBarSwitchTypeButton',
|
|
21
|
-
});
|
|
22
|
-
|
|
23
|
-
defineProps<{
|
|
24
|
-
modelValue: NodeType.PAGE | NodeType.PAGE_FRAGMENT;
|
|
25
|
-
}>();
|
|
26
|
-
|
|
27
|
-
const data: { type: NodeType.PAGE | NodeType.PAGE_FRAGMENT; text: string }[] = [
|
|
28
|
-
{
|
|
29
|
-
type: NodeType.PAGE,
|
|
30
|
-
text: '页面',
|
|
31
|
-
},
|
|
32
|
-
{
|
|
33
|
-
type: NodeType.PAGE_FRAGMENT,
|
|
34
|
-
text: '页面片',
|
|
35
|
-
},
|
|
36
|
-
];
|
|
37
|
-
|
|
38
|
-
const emit = defineEmits<{
|
|
39
|
-
'update:modelValue': [value: NodeType.PAGE | NodeType.PAGE_FRAGMENT];
|
|
40
|
-
}>();
|
|
41
|
-
|
|
42
|
-
const clickHandler = (value: NodeType.PAGE | NodeType.PAGE_FRAGMENT) => {
|
|
43
|
-
emit('update:modelValue', value);
|
|
44
|
-
};
|
|
45
|
-
</script>
|