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

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.3.0-alpha.2",
+  "version": "1.3.0-alpha.4",
   "name": "@tmagic/editor",
   "type": "module",
   "sideEffects": [
@@ -46,13 +46,13 @@
   "dependencies": {
     "@babel/core": "^7.18.0",
     "@element-plus/icons-vue": "^2.0.9",
-    "@tmagic/core": "1.3.0-alpha.2",
-    "@tmagic/design": "1.3.0-alpha.2",
-    "@tmagic/form": "1.3.0-alpha.2",
-    "@tmagic/schema": "1.3.0-alpha.2",
-    "@tmagic/stage": "1.3.0-alpha.2",
-    "@tmagic/table": "1.3.0-alpha.2",
-    "@tmagic/utils": "1.3.0-alpha.2",
+    "@tmagic/core": "1.3.0-alpha.4",
+    "@tmagic/design": "1.3.0-alpha.4",
+    "@tmagic/form": "1.3.0-alpha.4",
+    "@tmagic/schema": "1.3.0-alpha.4",
+    "@tmagic/stage": "1.3.0-alpha.4",
+    "@tmagic/table": "1.3.0-alpha.4",
+    "@tmagic/utils": "1.3.0-alpha.4",
     "buffer": "^6.0.3",
     "color": "^3.1.3",
     "events": "^3.3.0",
@@ -61,28 +61,27 @@
     "lodash-es": "^4.17.21",
     "monaco-editor": "^0.34.0",
     "serialize-javascript": "^6.0.0",
-    "vue": "^3.2.37"
+    "vue": "^3.3.4"
   },
   "peerDependencies": {
-    "@tmagic/design": "1.3.0-alpha.2",
-    "@tmagic/form": "1.3.0-alpha.2",
+    "@tmagic/design": "1.3.0-alpha.4",
+    "@tmagic/form": "1.3.0-alpha.4",
     "monaco-editor": "^0.34.0",
-    "vue": "^3.2.37"
+    "vue": "^3.3.4"
   },
   "devDependencies": {
     "@types/events": "^3.0.0",
     "@types/lodash-es": "^4.17.4",
     "@types/node": "^15.12.4",
     "@types/serialize-javascript": "^5.0.1",
-    "@vitejs/plugin-vue": "^4.1.0",
-    "@vue/compiler-sfc": "^3.2.37",
-    "@vue/test-utils": "^2.0.0",
+    "@vitejs/plugin-vue": "^4.2.3",
+    "@vue/compiler-sfc": "^3.3.4",
+    "@vue/test-utils": "^2.3.2",
     "rimraf": "^3.0.2",
     "sass": "^1.35.1",
     "tsc-alias": "^1.8.5",
     "typescript": "^5.0.4",
-    "vite": "^4.2.1",
-    "vite-plugin-vue-setup-extend": "^0.4.0",
-    "vue-tsc": "^1.0.11"
+    "vite": "^4.3.8",
+    "vue-tsc": "^1.6.5"
   }
 }

package/src/Editor.vue

@@ -86,7 +86,7 @@ import { initServiceEvents, initServiceState } from './initService';
 import type { Services } from './type';
 
 export default defineComponent({
-  name: 'm-editor',
+  name: 'MEditor',
 
   components: {
     TMagicNavMenu: NavMenu,

package/src/components/CodeDraftEditor.vue

@@ -23,7 +23,7 @@
     </div>
   </div>
 </template>
-<script lang="ts" setup name="MEditorCodeDraftEditor">
+<script lang="ts" setup>
 import { computed, inject, ref, watchEffect } from 'vue';
 import type * as monaco from 'monaco-editor';
 
@@ -34,6 +34,10 @@ import { datetimeFormatter } from '@tmagic/utils';
 import MagicCodeEditor from '@editor/layouts/CodeEditor.vue';
 import type { Services } from '@editor/type';
 
+defineOptions({
+  name: 'MEditorCodeDraftEditor',
+});
+
 const props = withDefaults(
   defineProps<{
     /** 代码id */

package/src/components/ContentMenu.vue

@@ -22,13 +22,17 @@
   </div>
 </template>
 
-<script lang="ts" setup name="MEditorContentMenu">
+<script lang="ts" setup>
 import { nextTick, onMounted, onUnmounted, ref } from 'vue';
 
 import { MenuButton, MenuComponent } from '@editor/type';
 
 import ToolButton from './ToolButton.vue';
 
+defineOptions({
+  name: 'MEditorContentMenu',
+});
+
 const props = withDefaults(
   defineProps<{
     menuData?: (MenuButton | MenuComponent)[];

package/src/components/FunctionEditor.vue

@@ -32,7 +32,7 @@
     ></CodeDraftEditor>
   </TMagicCard>
 </template>
-<script lang="ts" setup name="MEditorFunctionEditor">
+<script lang="ts" setup>
 import { inject, ref, watchEffect } from 'vue';
 import { cloneDeep } from 'lodash-es';
 
@@ -43,6 +43,11 @@ import { CodeParam, Id } from '@tmagic/schema';
 import type { Services } from '@editor/type';
 
 import CodeDraftEditor from './CodeDraftEditor.vue';
+
+defineOptions({
+  name: 'MEditorFunctionEditor',
+});
+
 const defaultParamColConfig: ColumnConfig = {
   type: 'row',
   label: '参数类型',

package/src/components/Icon.vue

@@ -7,12 +7,16 @@
   <TMagicIcon v-else class="magic-editor-icon"><component :is="toRaw(icon)"></component></TMagicIcon>
 </template>
 
-<script lang="ts" setup name="MEditorIcon">
+<script lang="ts" setup>
 import { toRaw } from 'vue';
 import { Edit } from '@element-plus/icons-vue';
 
 import { TMagicIcon } from '@tmagic/design';
 
+defineOptions({
+  name: 'MEditorIcon',
+});
+
 defineProps<{
   icon?: any;
 }>();

package/src/components/Layout.vue

@@ -20,11 +20,15 @@
   </div>
 </template>
 
-<script lang="ts" setup name="MEditorLayout">
+<script lang="ts" setup>
 import { computed, onMounted, onUnmounted, ref } from 'vue';
 
 import Resizer from '@editor/layouts/Resizer.vue';
 
+defineOptions({
+  name: 'MEditorLayout',
+});
+
 const emit = defineEmits(['update:left', 'change', 'update:right']);
 
 const props = withDefaults(

package/src/components/ScrollBar.vue

@@ -4,10 +4,14 @@
   </div>
 </template>
 
-<script lang="ts" setup name="MEditorScrollBar">
+<script lang="ts" setup>
 import { computed, onMounted, onUnmounted, ref } from 'vue';
 import Gesto from 'gesto';
 
+defineOptions({
+  name: 'MEditorScrollBar',
+});
+
 const props = defineProps<{
   size: number;
   scrollSize: number;

package/src/components/ScrollViewer.vue

@@ -22,7 +22,7 @@
   </div>
 </template>
 
-<script lang="ts" setup name="MEditorScrollViewer">
+<script lang="ts" setup>
 import { computed, onMounted, onUnmounted, ref, watch } from 'vue';
 
 import type { ScrollViewerEvent } from '@editor/type';
@@ -30,6 +30,10 @@ import { ScrollViewer } from '@editor/utils/scroll-viewer';
 
 import ScrollBar from './ScrollBar.vue';
 
+defineOptions({
+  name: 'MEditorScrollViewer',
+});
+
 const props = withDefaults(
   defineProps<{
     width?: number;

package/src/components/SearchInput.vue

@@ -19,6 +19,10 @@ import { Search } from '@element-plus/icons-vue';
 
 import { TMagicIcon, TMagicInput } from '@tmagic/design';
 
+defineOptions({
+  name: 'MEditorSearchInput',
+});
+
 const emit = defineEmits(['search']);
 
 const filterText = ref('');

package/src/components/ToolButton.vue

@@ -43,7 +43,7 @@
   </div>
 </template>
 
-<script lang="ts" setup name="MEditorToolButton">
+<script lang="ts" setup>
 import { computed, inject } from 'vue';
 import { ArrowDown } from '@element-plus/icons-vue';
 
@@ -60,6 +60,10 @@ import {
 import MIcon from '../components/Icon.vue';
 import type { MenuButton, MenuComponent, Services } from '../type';
 
+defineOptions({
+  name: 'MEditorToolButton',
+});
+
 const props = withDefaults(
   defineProps<{
     data?: MenuButton | MenuComponent;

package/src/fields/Code.vue

@@ -8,9 +8,13 @@
   ></magic-code-editor>
 </template>
 
-<script lang="ts" setup name="MEditorCode">
+<script lang="ts" setup>
 import { computed } from 'vue';
 
+defineOptions({
+  name: 'MEditorCode',
+});
+
 const emit = defineEmits(['change']);
 
 const props = defineProps<{

package/src/fields/CodeLink.vue

@@ -2,10 +2,14 @@
   <m-fields-link :config="formConfig" :model="modelValue" name="form" @change="changeHandler"></m-fields-link>
 </template>
 
-<script lang="ts" setup name="MEditorCodeLink">
+<script lang="ts" setup>
 import { computed, reactive, watch } from 'vue';
 import serialize from 'serialize-javascript';
 
+defineOptions({
+  name: 'MEditorCodeLink',
+});
+
 const props = defineProps<{
   config: {
     type: 'code-link';

package/src/fields/CodeSelect.vue

@@ -6,13 +6,17 @@
   </div>
 </template>
 
-<script lang="ts" setup name="MEditorCodeSelect">
-import { computed, defineEmits, defineProps, watch } from 'vue';
+<script lang="ts" setup>
+import { computed, watch } from 'vue';
 import { isEmpty } from 'lodash-es';
 
 import { TMagicCard } from '@tmagic/design';
 import { HookType } from '@tmagic/schema';
 
+defineOptions({
+  name: 'MEditorCodeSelect',
+});
+
 const emit = defineEmits(['change']);
 
 const props = withDefaults(
@@ -32,6 +36,8 @@ const codeConfig = computed(() => ({
   type: 'group-list',
   name: 'hookData',
   enableToggleMode: false,
+  expandAll: true,
+  titleKey: 'codeId',
   items: [
     {
       type: 'code-select-col',

package/src/fields/CodeSelectCol.vue

@@ -16,8 +16,8 @@
   </div>
 </template>
 
-<script lang="ts" setup name="MEditorCodeSelectCol">
-import { computed, defineEmits, defineProps, inject, ref, watch } from 'vue';
+<script lang="ts" setup name="">
+import { computed, inject, ref, watch } from 'vue';
 import { Edit, View } from '@element-plus/icons-vue';
 import { isEmpty, map } from 'lodash-es';
 
@@ -27,6 +27,10 @@ import { Id } from '@tmagic/schema';
 import Icon from '@editor/components/Icon.vue';
 import type { CodeParamStatement, Services } from '@editor/type';
 
+defineOptions({
+  name: 'MEditorCodeSelectCol',
+});
+
 const services = inject<Services>('services');
 const mForm = inject<FormState>('mForm');
 const emit = defineEmits(['change']);

package/src/fields/DataSourceFields.vue

@@ -24,6 +24,10 @@ import { TMagicButton, tMagicMessageBox } from '@tmagic/design';
 import { FormConfig, FormState, MFormDialog } from '@tmagic/form';
 import { MagicTable } from '@tmagic/table';
 
+defineOptions({
+  name: 'MEditorDataSourceFields',
+});
+
 const props = withDefaults(
   defineProps<{
     config: {