@tmagic/editor 1.2.0-beta.9 → 1.2.1

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.
Files changed (103) hide show
  1. package/dist/style.css +62 -34
  2. package/dist/{tmagic-editor.mjs → tmagic-editor.js} +1641 -1266
  3. package/dist/tmagic-editor.js.map +1 -0
  4. package/dist/{tmagic-editor.umd.js → tmagic-editor.umd.cjs} +1649 -1270
  5. package/dist/tmagic-editor.umd.cjs.map +1 -0
  6. package/package.json +16 -14
  7. package/src/Editor.vue +66 -40
  8. package/src/components/CodeDraftEditor.vue +137 -0
  9. package/src/components/ContentMenu.vue +1 -1
  10. package/src/components/FunctionEditor.vue +190 -0
  11. package/src/components/Icon.vue +1 -1
  12. package/src/{layouts → components}/Layout.vue +54 -15
  13. package/src/components/ScrollBar.vue +1 -1
  14. package/src/components/ScrollViewer.vue +10 -1
  15. package/src/components/ToolButton.vue +1 -1
  16. package/src/fields/Code.vue +1 -1
  17. package/src/fields/CodeLink.vue +1 -1
  18. package/src/fields/CodeSelect.vue +102 -99
  19. package/src/fields/UISelect.vue +3 -3
  20. package/src/index.ts +2 -1
  21. package/src/layouts/AddPageBox.vue +5 -2
  22. package/src/layouts/CodeEditor.vue +2 -3
  23. package/src/layouts/Framework.vue +12 -10
  24. package/src/layouts/NavMenu.vue +11 -8
  25. package/src/layouts/PropsPanel.vue +12 -9
  26. package/src/layouts/Resizer.vue +1 -1
  27. package/src/layouts/sidebar/ComponentListPanel.vue +2 -3
  28. package/src/layouts/sidebar/LayerMenu.vue +9 -7
  29. package/src/layouts/sidebar/LayerPanel.vue +130 -178
  30. package/src/layouts/sidebar/Sidebar.vue +110 -26
  31. package/src/layouts/sidebar/code-block/CodeBlockEditor.vue +33 -118
  32. package/src/layouts/sidebar/code-block/CodeBlockList.vue +93 -126
  33. package/src/layouts/workspace/Breadcrumb.vue +6 -7
  34. package/src/layouts/workspace/PageBar.vue +3 -3
  35. package/src/layouts/workspace/PageBarScrollContainer.vue +5 -3
  36. package/src/layouts/workspace/Stage.vue +36 -18
  37. package/src/layouts/workspace/ViewerMenu.vue +16 -15
  38. package/src/layouts/workspace/Workspace.vue +9 -6
  39. package/src/services/BaseService.ts +11 -2
  40. package/src/services/codeBlock.ts +136 -146
  41. package/src/services/componentList.ts +7 -2
  42. package/src/services/editor.ts +161 -85
  43. package/src/services/events.ts +7 -2
  44. package/src/services/history.ts +8 -17
  45. package/src/services/props.ts +8 -3
  46. package/src/services/storage.ts +1 -0
  47. package/src/services/ui.ts +20 -10
  48. package/src/theme/code-block.scss +46 -23
  49. package/src/theme/component-list-panel.scss +8 -5
  50. package/src/type.ts +84 -63
  51. package/src/utils/config.ts +1 -1
  52. package/src/utils/editor.ts +17 -3
  53. package/src/utils/index.ts +2 -1
  54. package/src/utils/logger.ts +1 -1
  55. package/src/utils/operator.ts +12 -12
  56. package/src/utils/props.ts +3 -3
  57. package/src/utils/scroll-viewer.ts +18 -2
  58. package/src/utils/stage.ts +10 -9
  59. package/src/utils/undo-redo.ts +1 -1
  60. package/types/Editor.vue.d.ts +48 -28
  61. package/types/components/CodeDraftEditor.vue.d.ts +55 -0
  62. package/types/components/ContentMenu.vue.d.ts +11 -87
  63. package/types/components/FunctionEditor.vue.d.ts +60 -0
  64. package/types/components/Icon.vue.d.ts +4 -50
  65. package/types/{layouts → components}/Layout.vue.d.ts +12 -1
  66. package/types/components/ScrollBar.vue.d.ts +7 -65
  67. package/types/components/ScrollViewer.vue.d.ts +45 -1
  68. package/types/components/ToolButton.vue.d.ts +12 -78
  69. package/types/fields/Code.vue.d.ts +11 -77
  70. package/types/fields/CodeLink.vue.d.ts +12 -82
  71. package/types/fields/CodeSelect.vue.d.ts +13 -77
  72. package/types/fields/UISelect.vue.d.ts +7 -65
  73. package/types/index.d.ts +1 -0
  74. package/types/layouts/AddPageBox.vue.d.ts +1 -43
  75. package/types/layouts/CodeEditor.vue.d.ts +22 -130
  76. package/types/layouts/NavMenu.vue.d.ts +9 -69
  77. package/types/layouts/sidebar/LayerMenu.vue.d.ts +16 -48
  78. package/types/layouts/sidebar/LayerPanel.vue.d.ts +24 -7
  79. package/types/layouts/sidebar/Sidebar.vue.d.ts +10 -5
  80. package/types/layouts/sidebar/code-block/CodeBlockEditor.vue.d.ts +24 -6
  81. package/types/layouts/sidebar/code-block/CodeBlockList.vue.d.ts +11 -5
  82. package/types/layouts/workspace/Breadcrumb.vue.d.ts +1 -43
  83. package/types/layouts/workspace/Stage.vue.d.ts +15 -43
  84. package/types/layouts/workspace/ViewerMenu.vue.d.ts +11 -66
  85. package/types/layouts/workspace/Workspace.vue.d.ts +25 -8
  86. package/types/services/BaseService.d.ts +2 -1
  87. package/types/services/codeBlock.d.ts +56 -47
  88. package/types/services/componentList.d.ts +1 -0
  89. package/types/services/editor.d.ts +10 -11
  90. package/types/services/events.d.ts +1 -0
  91. package/types/services/history.d.ts +5 -15
  92. package/types/services/props.d.ts +3 -2
  93. package/types/services/ui.d.ts +24 -24
  94. package/types/type.d.ts +70 -59
  95. package/types/utils/editor.d.ts +1 -0
  96. package/types/utils/index.d.ts +1 -0
  97. package/types/utils/operator.d.ts +1 -1
  98. package/types/utils/props.d.ts +1 -1
  99. package/types/utils/scroll-viewer.d.ts +5 -0
  100. package/dist/tmagic-editor.mjs.map +0 -1
  101. package/dist/tmagic-editor.umd.js.map +0 -1
  102. package/src/layouts/sidebar/TabPane.vue +0 -118
  103. 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
- };