@tmagic/editor 1.3.0-alpha.2 → 1.3.0-alpha.3

package/src/fields/EventSelect.vue

@@ -33,8 +33,8 @@
   </div>
 </template>
 
-<script lang="ts" setup name="MEditorEventSelect">
-import { computed, defineProps, inject } from 'vue';
+<script lang="ts" setup>
+import { computed, inject } from 'vue';
 import { Delete } from '@element-plus/icons-vue';
 import { has } from 'lodash-es';
 
@@ -44,7 +44,9 @@ import { ActionType } from '@tmagic/schema';
 
 import type { EventSelectConfig, Services } from '@editor/type';
 
-const services = inject<Services>('services');
+defineOptions({
+  name: 'MEditorEventSelect',
+});
 
 const props = defineProps<{
   config: EventSelectConfig;
@@ -53,8 +55,11 @@ const props = defineProps<{
   name: string;
   size: 'small' | 'default' | 'large';
 }>();
+
 const emit = defineEmits(['change']);
 
+const services = inject<Services>('services');
+
 // 事件名称下拉框表单配置
 const eventNameConfig = computed(() => {
   const defaultEventNameConfig = {

package/src/fields/KeyValue.vue

@@ -38,6 +38,10 @@ import { Delete, Plus } from '@element-plus/icons-vue';
 
 import { TMagicButton, TMagicInput } from '@tmagic/design';
 
+defineOptions({
+  name: 'MEditorKeyValue',
+});
+
 const props = withDefaults(
   defineProps<{
     config: {

package/src/fields/UISelect.vue

@@ -12,7 +12,7 @@
   </div>
 </template>
 
-<script lang="ts" setup name="MEditorUISelect">
+<script lang="ts" setup>
 import { computed, inject, ref } from 'vue';
 import { Close, Delete } from '@element-plus/icons-vue';
 
@@ -21,6 +21,10 @@ import { FormState } from '@tmagic/form';
 
 import type { Services } from '@editor/type';
 
+defineOptions({
+  name: 'MEditorUISelect',
+});
+
 const props = defineProps<{
   config: any;
   model: any;

package/src/icons/AppManageIcon.vue

@@ -8,4 +8,8 @@
   </svg>
 </template>
 
-<script lang="ts" setup name="MEditorAppManageIcon"></script>
+<script lang="ts" setup>
+defineOptions({
+  name: 'MEditorAppManageIcon',
+});
+</script>

package/src/icons/CodeIcon.vue

@@ -23,4 +23,8 @@
   </svg>
 </template>
 
-<script lang="ts" setup name="MEditorCodeIcon"></script>
+<script lang="ts" setup>
+defineOptions({
+  name: 'MEditorCodeIcon',
+});
+</script>

package/src/index.ts

@@ -22,6 +22,7 @@ import CodeLink from './fields/CodeLink.vue';
 import CodeSelect from './fields/CodeSelect.vue';
 import CodeSelectCol from './fields/CodeSelectCol.vue';
 import DataSourceFields from './fields/DataSourceFields.vue';
+import DataSourceInput from './fields/DataSourceInput.vue';
 import EventSelect from './fields/EventSelect.vue';
 import KeyValue from './fields/KeyValue.vue';
 import uiSelect from './fields/UISelect.vue';
@@ -51,6 +52,7 @@ export { default as LayerPanel } from './layouts/sidebar/LayerPanel.vue';
 export { default as CodeSelect } from './fields/CodeSelect.vue';
 export { default as CodeSelectCol } from './fields/CodeSelectCol.vue';
 export { default as DataSourceFields } from './fields/DataSourceFields.vue';
+export { default as DataSourceInput } from './fields/DataSourceInput.vue';
 export { default as EventSelect } from './fields/EventSelect.vue';
 export { default as KeyValue } from './fields/KeyValue.vue';
 export { default as CodeBlockList } from './layouts/sidebar/code-block/CodeBlockList.vue';
@@ -81,5 +83,6 @@ export default {
     app.component('m-fields-event-select', EventSelect);
     app.component('m-fields-data-source-fields', DataSourceFields);
     app.component('m-fields-key-value', KeyValue);
+    app.component('m-fields-data-source-input', DataSourceInput);
   },
 };

package/src/layouts/AddPageBox.vue

@@ -11,7 +11,7 @@
   </div>
 </template>
 
-<script lang="ts" setup name="MEditorAddPageBox">
+<script lang="ts" setup>
 import { inject, toRaw } from 'vue';
 import { Plus } from '@element-plus/icons-vue';
 
@@ -21,6 +21,10 @@ import MIcon from '@editor/components/Icon.vue';
 import type { Services } from '@editor/type';
 import { generatePageNameByApp } from '@editor/utils';
 
+defineOptions({
+  name: 'MEditorAddPageBox',
+});
+
 const services = inject<Services>('services');
 
 const clickHandler = () => {

package/src/layouts/CodeEditor.vue

@@ -2,12 +2,16 @@
   <div ref="codeEditor" class="magic-code-editor"></div>
 </template>
 
-<script lang="ts" setup name="MEditorCodeEditor">
+<script lang="ts" setup>
 import { onMounted, onUnmounted, ref, watch } from 'vue';
 import { throttle } from 'lodash-es';
 import * as monaco from 'monaco-editor';
 import serialize from 'serialize-javascript';
 
+defineOptions({
+  name: 'MEditorCodeEditor',
+});
+
 const props = withDefaults(
   defineProps<{
     initValues?: string | Object;

package/src/layouts/Framework.vue

@@ -42,7 +42,7 @@
   </div>
 </template>
 
-<script lang="ts" setup name="MEditorFramework">
+<script lang="ts" setup>
 import { computed, inject, ref, watch } from 'vue';
 
 import { TMagicScrollbar } from '@tmagic/design';
@@ -52,6 +52,10 @@ import type { GetColumnWidth, Services } from '@editor/type';
 
 import AddPageBox from './AddPageBox.vue';
 
+defineOptions({
+  name: 'MEditorFramework',
+});
+
 const DEFAULT_LEFT_COLUMN_WIDTH = 310;
 const DEFAULT_RIGHT_COLUMN_WIDTH = 480;
 

package/src/layouts/NavMenu.vue

@@ -6,7 +6,7 @@
   </div>
 </template>
 
-<script lang="ts" setup name="MEditorNavMenu">
+<script lang="ts" setup>
 import { computed, inject, markRaw } from 'vue';
 import { Back, Delete, FullScreen, Grid, Memo, Right, ScaleToOriginal, ZoomIn, ZoomOut } from '@element-plus/icons-vue';
 
@@ -15,6 +15,10 @@ import { NodeType } from '@tmagic/schema';
 import ToolButton from '@editor/components/ToolButton.vue';
 import { ColumnLayout, MenuBarData, MenuButton, MenuComponent, MenuItem, Services } from '@editor/type';
 
+defineOptions({
+  name: 'MEditorNavMenu',
+});
+
 const props = withDefaults(
   defineProps<{
     data?: MenuBarData;

package/src/layouts/PropsPanel.vue

@@ -13,7 +13,7 @@
   </div>
 </template>
 
-<script lang="ts" setup name="MEditorPropsPanel">
+<script lang="ts" setup>
 import { computed, getCurrentInstance, inject, onMounted, onUnmounted, ref, watchEffect } from 'vue';
 
 import { tMagicMessage } from '@tmagic/design';
@@ -22,6 +22,10 @@ import { MForm } from '@tmagic/form';
 
 import type { Services } from '@editor/type';
 
+defineOptions({
+  name: 'MEditorPropsPanel',
+});
+
 const emit = defineEmits(['mounted']);
 
 const internalInstance = getCurrentInstance();

package/src/layouts/Resizer.vue

@@ -4,10 +4,14 @@
   </span>
 </template>
 
-<script lang="ts" setup name="MEditorResizer">
+<script lang="ts" setup>
 import { onMounted, onUnmounted, ref } from 'vue';
 import Gesto from 'gesto';
 
+defineOptions({
+  name: 'MEditorResizer',
+});
+
 const emit = defineEmits(['change']);
 
 const target = ref<HTMLSpanElement>();

package/src/layouts/sidebar/ComponentListPanel.vue

@@ -31,7 +31,7 @@
   </TMagicScrollbar>
 </template>
 
-<script lang="ts" setup name="MEditorComponentListPanel">
+<script lang="ts" setup>
 import { computed, inject, ref } from 'vue';
 import { Grid } from '@element-plus/icons-vue';
 import serialize from 'serialize-javascript';
@@ -43,6 +43,10 @@ import MIcon from '@editor/components/Icon.vue';
 import SearchInput from '@editor/components/SearchInput.vue';
 import type { ComponentGroup, ComponentItem, Services, StageOptions } from '@editor/type';
 
+defineOptions({
+  name: 'MEditorComponentListPanel',
+});
+
 const searchText = ref('');
 
 const filterTextChangeHandler = (v: string) => {

package/src/layouts/sidebar/LayerMenu.vue

@@ -2,7 +2,7 @@
   <ContentMenu :menu-data="menuData" ref="menu" style="overflow: initial"></ContentMenu>
 </template>
 
-<script lang="ts" setup name="MEditorLayerMenu">
+<script lang="ts" setup>
 import { computed, inject, markRaw, ref } from 'vue';
 import { CopyDocument, Delete, Files, Plus } from '@element-plus/icons-vue';
 
@@ -11,6 +11,10 @@ import { NodeType } from '@tmagic/schema';
 import ContentMenu from '@editor/components/ContentMenu.vue';
 import type { ComponentGroup, MenuButton, MenuComponent, Services } from '@editor/type';
 
+defineOptions({
+  name: 'MEditorLayerMenu',
+});
+
 const props = defineProps<{
   layerContentMenu: (MenuButton | MenuComponent)[];
 }>();

package/src/layouts/sidebar/LayerPanel.vue

@@ -48,7 +48,7 @@
   </TMagicScrollbar>
 </template>
 
-<script lang="ts" setup name="MEditorLayerPanel">
+<script lang="ts" setup>
 import { computed, inject, onMounted, onUnmounted, ref, watch } from 'vue';
 import KeyController from 'keycon';
 import { difference, throttle, union } from 'lodash-es';
@@ -64,6 +64,10 @@ import { Layout } from '@editor/type';
 
 import LayerMenu from './LayerMenu.vue';
 
+defineOptions({
+  name: 'MEditorLayerPanel',
+});
+
 defineProps<{
   layerContentMenu: (MenuButton | MenuComponent)[];
 }>();

package/src/layouts/sidebar/Sidebar.vue

@@ -3,13 +3,13 @@
     v-if="data.type === 'tabs' && data.items.length"
     v-model="activeTabName"
     class="m-editor-sidebar tmagic-design-tabs"
-    v-bind="tabsComponent.props({ type: 'card', tabPosition: 'left' })"
-    :is="tabsComponent.component"
+    v-bind="tabsComponent?.props({ type: 'card', tabPosition: 'left' }) || {}"
+    :is="tabsComponent?.component || 'el-tabs'"
   >
     <component
       v-for="(config, index) in sideBarItems"
-      v-bind="tabPaneComponent.props({ name: config.text })"
-      :is="tabPaneComponent.component"
+      v-bind="tabPaneComponent?.props({ name: config.text, lazy: config.lazy }) || {}"
+      :is="tabPaneComponent?.component || 'el-tab-pane'"
       :key="config.$key || index"
     >
       <template #label>
@@ -83,7 +83,7 @@
   </component>
 </template>
 
-<script lang="ts" setup name="MEditorSidebar">
+<script lang="ts" setup>
 import { computed, ref, watch } from 'vue';
 import { Coin, EditPen, Goods, List } from '@element-plus/icons-vue';
 
@@ -98,6 +98,10 @@ import DataSourceListPanel from './data-source/DataSourceListPanel.vue';
 import ComponentListPanel from './ComponentListPanel.vue';
 import LayerPanel from './LayerPanel.vue';
 
+defineOptions({
+  name: 'MEditorSidebar',
+});
+
 const props = withDefaults(
   defineProps<{
     data: SideBarData;
@@ -108,8 +112,8 @@ const props = withDefaults(
   },
 );
 
-const tabPaneComponent = getConfig('components').tabPane;
-const tabsComponent = getConfig('components').tabs;
+const tabPaneComponent = getConfig('components')?.tabPane;
+const tabsComponent = getConfig('components')?.tabs;
 
 const activeTabName = ref(props.data?.status);
 

package/src/layouts/sidebar/code-block/CodeBlockEditor.vue

@@ -32,7 +32,7 @@
   </TMagicDrawer>
 </template>
 
-<script lang="ts" setup name="MEditorCodeBlockEditor">
+<script lang="ts" setup>
 import { computed, inject, reactive, ref, watchEffect } from 'vue';
 import { cloneDeep, forIn, isEmpty } from 'lodash-es';
 
@@ -45,6 +45,10 @@ import Layout from '@editor/components/Layout.vue';
 import type { ListState, Services } from '@editor/type';
 import { serializeConfig } from '@editor/utils/editor';
 
+defineOptions({
+  name: 'MEditorCodeBlockEditor',
+});
+
 const services = inject<Services>('services');
 const codeOptions = inject('codeOptions', {});
 

package/src/layouts/sidebar/code-block/CodeBlockList.vue

@@ -55,7 +55,7 @@
   </TMagicScrollbar>
 </template>
 
-<script setup lang="ts" name="MEditorCodeBlockList">
+<script setup lang="ts">
 import { computed, inject, ref } from 'vue';
 import { Close, Edit, View } from '@element-plus/icons-vue';
 
@@ -71,6 +71,10 @@ import { CodeDeleteErrorType, CodeDslItem, Services } from '@editor/type';
 
 import CodeBlockEditor from './CodeBlockEditor.vue';
 
+defineOptions({
+  name: 'MEditorCodeBlockList',
+});
+
 const props = defineProps<{
   customError?: (id: Id, errorType: CodeDeleteErrorType) => any;
   paramsColConfig?: ColumnConfig;

package/src/layouts/sidebar/data-source/DataSourceConfigPanel.vue

@@ -27,6 +27,10 @@ import { MForm } from '@tmagic/form';
 
 import type { Services } from '@editor/type';
 
+defineOptions({
+  name: 'MEditorDataSourceConfigPanel',
+});
+
 const props = defineProps<{
   title?: string;
   values: any;

package/src/layouts/sidebar/data-source/DataSourceListPanel.vue

@@ -61,6 +61,10 @@ import type { Services } from '@editor/type';
 
 import DataSourceConfigPanel from './DataSourceConfigPanel.vue';
 
+defineOptions({
+  name: 'MEditorDataSourceListPanel',
+});
+
 const services = inject<Partial<Services>>('services', {});
 const { dataSourceService, depService } = inject<Services>('services') || {};
 

package/src/layouts/workspace/Breadcrumb.vue

@@ -7,7 +7,7 @@
   </div>
 </template>
 
-<script setup lang="ts" name="MEditorBreadcrumb">
+<script setup lang="ts">
 import { computed, inject } from 'vue';
 
 import { TMagicButton } from '@tmagic/design';
@@ -16,6 +16,10 @@ import { getNodePath } from '@tmagic/utils';
 
 import type { Services } from '@editor/type';
 
+defineOptions({
+  name: 'MEditorBreadcrumb',
+});
+
 const services = inject<Services>('services');
 const editorService = services?.editorService;
 

package/src/layouts/workspace/PageBar.vue

@@ -46,7 +46,7 @@
   </PageBarScrollContainer>
 </template>
 
-<script lang="ts" setup name="MEditorPageBar">
+<script lang="ts" setup>
 import { computed, inject } from 'vue';
 import { CaretBottom, Delete, DocumentCopy } from '@element-plus/icons-vue';
 
@@ -58,6 +58,10 @@ import type { Services } from '@editor/type';
 
 import PageBarScrollContainer from './PageBarScrollContainer.vue';
 
+defineOptions({
+  name: 'MEditorPageBar',
+});
+
 const services = inject<Services>('services');
 const editorService = services?.editorService;
 

package/src/layouts/workspace/PageBarScrollContainer.vue

@@ -26,7 +26,7 @@
   </div>
 </template>
 
-<script setup lang="ts" name="MEditorPageBarScrollContainer">
+<script setup lang="ts">
 import { computed, inject, nextTick, onMounted, onUnmounted, ref, toRaw, watch } from 'vue';
 import { ArrowLeftBold, ArrowRightBold, Plus } from '@element-plus/icons-vue';
 
@@ -36,6 +36,10 @@ import Icon from '@editor/components/Icon.vue';
 import type { Services } from '@editor/type';
 import { generatePageNameByApp } from '@editor/utils/editor';
 
+defineOptions({
+  name: 'MEditorPageBarScrollContainer',
+});
+
 const services = inject<Services>('services');
 const editorService = services?.editorService;
 const uiService = services?.uiService;

package/src/layouts/workspace/Stage.vue

@@ -26,7 +26,7 @@
   </ScrollViewer>
 </template>
 
-<script lang="ts" setup name="MEditorStage">
+<script lang="ts" setup>
 import { computed, inject, markRaw, nextTick, onMounted, onUnmounted, ref, toRaw, watch, watchEffect } from 'vue';
 import { cloneDeep } from 'lodash-es';
 
@@ -39,6 +39,10 @@ import { useStage } from '@editor/utils/stage';
 
 import ViewerMenu from './ViewerMenu.vue';
 
+defineOptions({
+  name: 'MEditorStage',
+});
+
 defineProps<{
   stageContentMenu: (MenuButton | MenuComponent)[];
 }>();

package/src/layouts/workspace/ViewerMenu.vue

@@ -2,7 +2,7 @@
   <content-menu :menu-data="menuData" ref="menu"></content-menu>
 </template>
 
-<script lang="ts" setup name="MEditorViewerMenu">
+<script lang="ts" setup>
 import { computed, inject, markRaw, ref, watch } from 'vue';
 import { Bottom, CopyDocument, Delete, DocumentCopy, Top } from '@element-plus/icons-vue';
 
@@ -14,6 +14,10 @@ import storageService from '@editor/services/storage';
 import { LayerOffset, Layout, MenuButton, MenuComponent, Services } from '@editor/type';
 import { COPY_STORAGE_KEY } from '@editor/utils/editor';
 
+defineOptions({
+  name: 'MEditorViewerMenu',
+});
+
 const props = withDefaults(
   defineProps<{ isMultiSelect?: boolean; stageContentMenu: (MenuButton | MenuComponent)[] }>(),
   { isMultiSelect: false },

package/src/layouts/workspace/Workspace.vue

@@ -15,7 +15,7 @@
   </div>
 </template>
 
-<script lang="ts" setup name="MEditorWorkspace">
+<script lang="ts" setup>
 import { computed, inject, onMounted, onUnmounted, ref } from 'vue';
 import KeyController from 'keycon';
 
@@ -27,6 +27,10 @@ import Breadcrumb from './Breadcrumb.vue';
 import PageBar from './PageBar.vue';
 import MagicStage from './Stage.vue';
 
+defineOptions({
+  name: 'MEditorWorkspace',
+});
+
 defineProps<{
   stageContentMenu: (MenuButton | MenuComponent)[];
 }>();

package/types/Editor.vue.d.ts

@@ -205,5 +205,5 @@ declare const _default: import("vue").DefineComponent<{
     containerHighlightDuration: number;
     containerHighlightType: import("@tmagic/stage").ContainerHighlightType;
     disabledDragStart: boolean;
-}>;
+}, {}>;
 export default _default;

package/types/components/CodeDraftEditor.vue.d.ts

@@ -40,7 +40,7 @@ declare const _default: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_T
 }, {
     editable: boolean;
     autoSaveDraft: boolean;
-}>;
+}, {}>;
 export default _default;
 type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
 type __VLS_TypePropsToRuntimeProps<T> = {
@@ -52,7 +52,10 @@ type __VLS_TypePropsToRuntimeProps<T> = {
     };
 };
 type __VLS_WithDefaults<P, D> = {
-    [K in keyof Pick<P, keyof P>]: K extends keyof D ? P[K] & {
+    [K in keyof Pick<P, keyof P>]: K extends keyof D ? __VLS_Prettify<P[K] & {
         default: D[K];
-    } : P[K];
+    }> : P[K];
 };
+type __VLS_Prettify<T> = {
+    [K in keyof T]: T[K];
+} & {};

package/types/components/ContentMenu.vue.d.ts

@@ -8,19 +8,19 @@ declare const _default: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_T
 }>, {
     hide: () => void;
     show: (e: MouseEvent) => void;
-}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("show" | "hide")[], "show" | "hide", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("hide" | "show")[], "hide" | "show", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
     menuData?: (MenuButton | MenuComponent)[] | undefined;
     isSubMenu?: boolean | undefined;
 }>, {
     menuData: () => never[];
     isSubMenu: boolean;
 }>>> & {
-    onShow?: ((...args: any[]) => any) | undefined;
     onHide?: ((...args: any[]) => any) | undefined;
+    onShow?: ((...args: any[]) => any) | undefined;
 }, {
     menuData: (MenuButton | MenuComponent)[];
     isSubMenu: boolean;
-}>;
+}, {}>;
 export default _default;
 type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
 type __VLS_TypePropsToRuntimeProps<T> = {
@@ -32,7 +32,10 @@ type __VLS_TypePropsToRuntimeProps<T> = {
     };
 };
 type __VLS_WithDefaults<P, D> = {
-    [K in keyof Pick<P, keyof P>]: K extends keyof D ? P[K] & {
+    [K in keyof Pick<P, keyof P>]: K extends keyof D ? __VLS_Prettify<P[K] & {
         default: D[K];
-    } : P[K];
+    }> : P[K];
 };
+type __VLS_Prettify<T> = {
+    [K in keyof T]: T[K];
+} & {};