@tmagic/editor 1.2.0-beta.9 → 1.2.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 +59 -35
- package/dist/{tmagic-editor.mjs → tmagic-editor.js} +1473 -1154
- package/dist/tmagic-editor.js.map +1 -0
- package/dist/{tmagic-editor.umd.js → tmagic-editor.umd.cjs} +1483 -1159
- package/dist/tmagic-editor.umd.cjs.map +1 -0
- package/package.json +16 -14
- package/src/Editor.vue +66 -40
- package/src/components/CodeDraftEditor.vue +145 -0
- package/src/components/ContentMenu.vue +1 -1
- package/src/components/FunctionEditor.vue +145 -0
- package/src/components/Icon.vue +1 -1
- package/src/{layouts → components}/Layout.vue +54 -15
- package/src/components/ScrollBar.vue +1 -1
- package/src/components/ScrollViewer.vue +10 -1
- package/src/components/ToolButton.vue +1 -1
- package/src/fields/Code.vue +1 -1
- package/src/fields/CodeLink.vue +1 -1
- package/src/fields/CodeSelect.vue +89 -102
- package/src/fields/UISelect.vue +1 -1
- package/src/index.ts +1 -0
- package/src/layouts/AddPageBox.vue +1 -1
- package/src/layouts/CodeEditor.vue +2 -3
- package/src/layouts/Framework.vue +2 -2
- package/src/layouts/NavMenu.vue +2 -2
- package/src/layouts/PropsPanel.vue +13 -6
- package/src/layouts/Resizer.vue +1 -1
- package/src/layouts/sidebar/ComponentListPanel.vue +1 -1
- package/src/layouts/sidebar/LayerMenu.vue +9 -7
- package/src/layouts/sidebar/LayerPanel.vue +127 -174
- package/src/layouts/sidebar/Sidebar.vue +110 -26
- package/src/layouts/sidebar/code-block/CodeBlockEditor.vue +27 -83
- package/src/layouts/sidebar/code-block/CodeBlockList.vue +90 -122
- package/src/layouts/workspace/Breadcrumb.vue +1 -1
- package/src/layouts/workspace/PageBar.vue +1 -1
- package/src/layouts/workspace/PageBarScrollContainer.vue +1 -1
- package/src/layouts/workspace/Stage.vue +26 -9
- package/src/layouts/workspace/ViewerMenu.vue +11 -9
- package/src/layouts/workspace/Workspace.vue +7 -3
- package/src/services/BaseService.ts +10 -1
- package/src/services/codeBlock.ts +124 -125
- package/src/services/componentList.ts +6 -1
- package/src/services/editor.ts +54 -18
- package/src/services/events.ts +6 -1
- package/src/services/history.ts +7 -16
- package/src/services/props.ts +7 -2
- package/src/services/storage.ts +1 -0
- package/src/services/ui.ts +12 -0
- package/src/theme/code-block.scss +43 -24
- package/src/theme/component-list-panel.scss +8 -5
- package/src/type.ts +77 -50
- package/src/utils/editor.ts +9 -1
- package/src/utils/index.ts +1 -0
- package/src/utils/props.ts +2 -2
- package/src/utils/scroll-viewer.ts +18 -2
- package/src/utils/stage.ts +4 -3
- package/types/Editor.vue.d.ts +47 -27
- package/types/components/CodeDraftEditor.vue.d.ts +56 -0
- package/types/components/ContentMenu.vue.d.ts +11 -87
- package/types/components/FunctionEditor.vue.d.ts +43 -0
- package/types/components/Icon.vue.d.ts +4 -50
- package/types/{layouts → components}/Layout.vue.d.ts +12 -1
- package/types/components/ScrollBar.vue.d.ts +7 -65
- package/types/components/ScrollViewer.vue.d.ts +45 -1
- package/types/components/ToolButton.vue.d.ts +12 -78
- package/types/fields/Code.vue.d.ts +11 -77
- package/types/fields/CodeLink.vue.d.ts +12 -82
- package/types/fields/CodeSelect.vue.d.ts +13 -77
- package/types/fields/UISelect.vue.d.ts +7 -65
- package/types/index.d.ts +1 -0
- package/types/layouts/AddPageBox.vue.d.ts +1 -43
- package/types/layouts/CodeEditor.vue.d.ts +22 -130
- package/types/layouts/NavMenu.vue.d.ts +9 -69
- package/types/layouts/sidebar/LayerMenu.vue.d.ts +16 -48
- package/types/layouts/sidebar/LayerPanel.vue.d.ts +24 -7
- package/types/layouts/sidebar/Sidebar.vue.d.ts +10 -5
- package/types/layouts/sidebar/code-block/CodeBlockEditor.vue.d.ts +1 -1
- package/types/layouts/sidebar/code-block/CodeBlockList.vue.d.ts +6 -5
- package/types/layouts/workspace/Breadcrumb.vue.d.ts +1 -43
- package/types/layouts/workspace/Stage.vue.d.ts +15 -43
- package/types/layouts/workspace/ViewerMenu.vue.d.ts +11 -66
- package/types/layouts/workspace/Workspace.vue.d.ts +23 -5
- package/types/services/BaseService.d.ts +2 -1
- package/types/services/codeBlock.d.ts +57 -36
- package/types/services/componentList.d.ts +1 -0
- package/types/services/editor.d.ts +5 -6
- package/types/services/events.d.ts +1 -0
- package/types/services/history.d.ts +5 -15
- package/types/services/props.d.ts +3 -2
- package/types/services/ui.d.ts +2 -1
- package/types/type.d.ts +65 -48
- package/types/utils/editor.d.ts +1 -0
- package/types/utils/index.d.ts +1 -0
- package/types/utils/props.d.ts +1 -1
- package/types/utils/scroll-viewer.d.ts +5 -0
- package/dist/tmagic-editor.mjs.map +0 -1
- package/dist/tmagic-editor.umd.js.map +0 -1
- package/src/layouts/sidebar/TabPane.vue +0 -118
- package/types/layouts/sidebar/TabPane.vue.d.ts +0 -82
|
@@ -1,118 +0,0 @@
|
|
|
1
|
-
<template>
|
|
2
|
-
<TMagicTabPane v-if="config" :name="config.text">
|
|
3
|
-
<template #label>
|
|
4
|
-
<div :key="config.text">
|
|
5
|
-
<m-icon v-if="config.icon" :icon="config.icon"></m-icon>
|
|
6
|
-
<div v-if="config.text" class="magic-editor-tab-panel-title">{{ config.text }}</div>
|
|
7
|
-
</div>
|
|
8
|
-
</template>
|
|
9
|
-
|
|
10
|
-
<component :is="config.component" v-bind="config.props || {}" v-on="config?.listeners || {}">
|
|
11
|
-
<template #component-list-panel-header v-if="data === 'component-list' || config.slots?.componentListPanelHeader">
|
|
12
|
-
<slot v-if="data === 'component-list'" name="component-list-panel-header"></slot>
|
|
13
|
-
<component v-else-if="config.slots?.componentListPanelHeader" :is="config.slots.componentListPanelHeader" />
|
|
14
|
-
</template>
|
|
15
|
-
|
|
16
|
-
<template
|
|
17
|
-
#component-list-item="{ component }"
|
|
18
|
-
v-if="data === 'component-list' || config.slots?.componentListItem"
|
|
19
|
-
>
|
|
20
|
-
<slot v-if="data === 'component-list'" name="component-list-item" :component="component"></slot>
|
|
21
|
-
<component
|
|
22
|
-
v-else-if="config.slots?.componentListItem"
|
|
23
|
-
:is="config.slots.componentListItem"
|
|
24
|
-
:component="component"
|
|
25
|
-
/>
|
|
26
|
-
</template>
|
|
27
|
-
|
|
28
|
-
<template #layer-panel-header v-if="data === 'layer' || config.slots?.layerPanelHeader">
|
|
29
|
-
<slot v-if="data === 'layer'" name="layer-panel-header"></slot>
|
|
30
|
-
<component v-else-if="config.slots?.layerPanelHeader" :is="config.slots.layerPanelHeader" />
|
|
31
|
-
</template>
|
|
32
|
-
|
|
33
|
-
<template #code-block-panel-header v-if="data === 'code-block' || config.slots?.codeBlockPanelHeader">
|
|
34
|
-
<slot v-if="data === 'code-block'" name="code-block-panel-header"></slot>
|
|
35
|
-
<component v-else-if="config.slots?.codeBlockPanelHeader" :is="config.slots.codeBlockPanelHeader" />
|
|
36
|
-
</template>
|
|
37
|
-
|
|
38
|
-
<template #code-block-panel-tool="{ id, data }" v-if="data === 'code-block' || config.slots?.codeBlockPanelTool">
|
|
39
|
-
<slot v-if="data === 'code-block'" name="code-block-panel-tool" :id="id" :data="data"></slot>
|
|
40
|
-
<component v-else-if="config.slots?.codeBlockPanelTool" :is="config.slots.codeBlockPanelTool" />
|
|
41
|
-
</template>
|
|
42
|
-
|
|
43
|
-
<template
|
|
44
|
-
#code-block-edit-panel-header="{ id }"
|
|
45
|
-
v-if="data === 'code-block' || config.slots?.codeBlockEditPanelHeader"
|
|
46
|
-
>
|
|
47
|
-
<slot v-if="data === 'code-block'" name="code-block-edit-panel-header" :id="id"></slot>
|
|
48
|
-
<component v-else-if="config.slots?.codeBlockEditPanelHeader" :is="config.slots.codeBlockEditPanelHeader" />
|
|
49
|
-
</template>
|
|
50
|
-
|
|
51
|
-
<template
|
|
52
|
-
#layer-node-content="{ data: nodeData, node }"
|
|
53
|
-
v-if="data === 'layer' || config.slots?.layerNodeContent"
|
|
54
|
-
>
|
|
55
|
-
<slot v-if="data === 'layer'" name="layer-node-content" :data="nodeData" :node="node"></slot>
|
|
56
|
-
<component
|
|
57
|
-
v-else-if="config.slots?.layerNodeContent"
|
|
58
|
-
:is="config.slots.layerNodeContent"
|
|
59
|
-
:data="nodeData"
|
|
60
|
-
:node="node"
|
|
61
|
-
/>
|
|
62
|
-
</template>
|
|
63
|
-
</component>
|
|
64
|
-
</TMagicTabPane>
|
|
65
|
-
</template>
|
|
66
|
-
|
|
67
|
-
<script lang="ts" setup>
|
|
68
|
-
import { computed } from 'vue';
|
|
69
|
-
import { Coin, EditPen, Files } from '@element-plus/icons-vue';
|
|
70
|
-
|
|
71
|
-
import { TMagicTabPane } from '@tmagic/design';
|
|
72
|
-
|
|
73
|
-
import MIcon from '../../components/Icon.vue';
|
|
74
|
-
import { SideComponent, SideItem } from '../../type';
|
|
75
|
-
|
|
76
|
-
import CodeBlockList from './code-block/CodeBlockList.vue';
|
|
77
|
-
import ComponentListPanel from './ComponentListPanel.vue';
|
|
78
|
-
import LayerPanel from './LayerPanel.vue';
|
|
79
|
-
|
|
80
|
-
const props = defineProps<{
|
|
81
|
-
data?: SideItem;
|
|
82
|
-
}>();
|
|
83
|
-
|
|
84
|
-
const config = computed<SideComponent | undefined>(() => {
|
|
85
|
-
if (typeof props.data !== 'string') {
|
|
86
|
-
return props.data;
|
|
87
|
-
}
|
|
88
|
-
|
|
89
|
-
switch (props.data) {
|
|
90
|
-
case 'component-list':
|
|
91
|
-
return {
|
|
92
|
-
type: 'component',
|
|
93
|
-
icon: Coin,
|
|
94
|
-
text: '组件',
|
|
95
|
-
component: ComponentListPanel,
|
|
96
|
-
slots: {},
|
|
97
|
-
};
|
|
98
|
-
case 'layer':
|
|
99
|
-
return {
|
|
100
|
-
type: 'component',
|
|
101
|
-
icon: Files,
|
|
102
|
-
text: '已选组件',
|
|
103
|
-
component: LayerPanel,
|
|
104
|
-
slots: {},
|
|
105
|
-
};
|
|
106
|
-
case 'code-block':
|
|
107
|
-
return {
|
|
108
|
-
type: 'component',
|
|
109
|
-
icon: EditPen,
|
|
110
|
-
text: '代码编辑',
|
|
111
|
-
component: CodeBlockList,
|
|
112
|
-
slots: {},
|
|
113
|
-
};
|
|
114
|
-
default:
|
|
115
|
-
return undefined;
|
|
116
|
-
}
|
|
117
|
-
});
|
|
118
|
-
</script>
|
|
@@ -1,82 +0,0 @@
|
|
|
1
|
-
import { SideItem } from '../../type';
|
|
2
|
-
declare const _default: {
|
|
3
|
-
new (...args: any[]): {
|
|
4
|
-
$: import("vue").ComponentInternalInstance;
|
|
5
|
-
$data: {};
|
|
6
|
-
$props: Partial<{}> & Omit<Readonly<import("vue").ExtractPropTypes<__VLS_TypePropsToRuntimeProps<{
|
|
7
|
-
data?: SideItem | undefined;
|
|
8
|
-
}>>> & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, never>;
|
|
9
|
-
$attrs: {
|
|
10
|
-
[x: string]: unknown;
|
|
11
|
-
};
|
|
12
|
-
$refs: {
|
|
13
|
-
[x: string]: unknown;
|
|
14
|
-
};
|
|
15
|
-
$slots: Readonly<{
|
|
16
|
-
[name: string]: import("vue").Slot | undefined;
|
|
17
|
-
}>;
|
|
18
|
-
$root: import("vue").ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, import("vue").ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}>> | null;
|
|
19
|
-
$parent: import("vue").ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, import("vue").ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}>> | null;
|
|
20
|
-
$emit: (event: string, ...args: any[]) => void;
|
|
21
|
-
$el: any;
|
|
22
|
-
$options: import("vue").ComponentOptionsBase<Readonly<import("vue").ExtractPropTypes<__VLS_TypePropsToRuntimeProps<{
|
|
23
|
-
data?: SideItem | undefined;
|
|
24
|
-
}>>>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, {}> & {
|
|
25
|
-
beforeCreate?: ((() => void) | (() => void)[]) | undefined;
|
|
26
|
-
created?: ((() => void) | (() => void)[]) | undefined;
|
|
27
|
-
beforeMount?: ((() => void) | (() => void)[]) | undefined;
|
|
28
|
-
mounted?: ((() => void) | (() => void)[]) | undefined;
|
|
29
|
-
beforeUpdate?: ((() => void) | (() => void)[]) | undefined;
|
|
30
|
-
updated?: ((() => void) | (() => void)[]) | undefined;
|
|
31
|
-
activated?: ((() => void) | (() => void)[]) | undefined;
|
|
32
|
-
deactivated?: ((() => void) | (() => void)[]) | undefined;
|
|
33
|
-
beforeDestroy?: ((() => void) | (() => void)[]) | undefined;
|
|
34
|
-
beforeUnmount?: ((() => void) | (() => void)[]) | undefined;
|
|
35
|
-
destroyed?: ((() => void) | (() => void)[]) | undefined;
|
|
36
|
-
unmounted?: ((() => void) | (() => void)[]) | undefined;
|
|
37
|
-
renderTracked?: (((e: import("vue").DebuggerEvent) => void) | ((e: import("vue").DebuggerEvent) => void)[]) | undefined;
|
|
38
|
-
renderTriggered?: (((e: import("vue").DebuggerEvent) => void) | ((e: import("vue").DebuggerEvent) => void)[]) | undefined;
|
|
39
|
-
errorCaptured?: (((err: unknown, instance: import("vue").ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, import("vue").ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}>> | null, info: string) => boolean | void) | ((err: unknown, instance: import("vue").ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, import("vue").ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}>> | null, info: string) => boolean | void)[]) | undefined;
|
|
40
|
-
};
|
|
41
|
-
$forceUpdate: () => void;
|
|
42
|
-
$nextTick: typeof import("vue").nextTick;
|
|
43
|
-
$watch(source: string | Function, cb: Function, options?: import("vue").WatchOptions<boolean> | undefined): import("vue").WatchStopHandle;
|
|
44
|
-
} & Readonly<import("vue").ExtractPropTypes<__VLS_TypePropsToRuntimeProps<{
|
|
45
|
-
data?: SideItem | undefined;
|
|
46
|
-
}>>> & import("vue").ShallowUnwrapRef<{}> & {} & import("vue").ComponentCustomProperties;
|
|
47
|
-
__isFragment?: undefined;
|
|
48
|
-
__isTeleport?: undefined;
|
|
49
|
-
__isSuspense?: undefined;
|
|
50
|
-
} & import("vue").ComponentOptionsBase<Readonly<import("vue").ExtractPropTypes<__VLS_TypePropsToRuntimeProps<{
|
|
51
|
-
data?: SideItem | undefined;
|
|
52
|
-
}>>>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, {}> & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps & (new () => {
|
|
53
|
-
$slots: {
|
|
54
|
-
'component-list-panel-header': (_: {}) => any;
|
|
55
|
-
'component-list-item': (_: {
|
|
56
|
-
component: any;
|
|
57
|
-
}) => any;
|
|
58
|
-
'layer-panel-header': (_: {}) => any;
|
|
59
|
-
'code-block-panel-header': (_: {}) => any;
|
|
60
|
-
'code-block-panel-tool': (_: {
|
|
61
|
-
id: any;
|
|
62
|
-
data: any;
|
|
63
|
-
}) => any;
|
|
64
|
-
'code-block-edit-panel-header': (_: {
|
|
65
|
-
id: any;
|
|
66
|
-
}) => any;
|
|
67
|
-
'layer-node-content': (_: {
|
|
68
|
-
data: any;
|
|
69
|
-
node: any;
|
|
70
|
-
}) => any;
|
|
71
|
-
};
|
|
72
|
-
});
|
|
73
|
-
export default _default;
|
|
74
|
-
declare type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
|
|
75
|
-
declare type __VLS_TypePropsToRuntimeProps<T> = {
|
|
76
|
-
[K in keyof T]-?: {} extends Pick<T, K> ? {
|
|
77
|
-
type: import('vue').PropType<__VLS_NonUndefinedable<T[K]>>;
|
|
78
|
-
} : {
|
|
79
|
-
type: import('vue').PropType<T[K]>;
|
|
80
|
-
required: true;
|
|
81
|
-
};
|
|
82
|
-
};
|