@tmagic/editor 1.3.0-alpha.18 → 1.3.0-alpha.19

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.3.0-alpha.18",
+  "version": "1.3.0-alpha.19",
   "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.18",
-    "@tmagic/design": "1.3.0-alpha.18",
-    "@tmagic/form": "1.3.0-alpha.18",
-    "@tmagic/schema": "1.3.0-alpha.18",
-    "@tmagic/stage": "1.3.0-alpha.18",
-    "@tmagic/table": "1.3.0-alpha.18",
-    "@tmagic/utils": "1.3.0-alpha.18",
+    "@tmagic/core": "1.3.0-alpha.19",
+    "@tmagic/design": "1.3.0-alpha.19",
+    "@tmagic/form": "1.3.0-alpha.19",
+    "@tmagic/schema": "1.3.0-alpha.19",
+    "@tmagic/stage": "1.3.0-alpha.19",
+    "@tmagic/table": "1.3.0-alpha.19",
+    "@tmagic/utils": "1.3.0-alpha.19",
     "buffer": "^6.0.3",
     "color": "^3.1.3",
     "events": "^3.3.0",
@@ -64,8 +64,8 @@
     "vue": "^3.3.4"
   },
   "peerDependencies": {
-    "@tmagic/design": "1.3.0-alpha.18",
-    "@tmagic/form": "1.3.0-alpha.18",
+    "@tmagic/design": "1.3.0-alpha.19",
+    "@tmagic/form": "1.3.0-alpha.19",
     "monaco-editor": "^0.41.0",
     "vue": "^3.3.4"
   },

package/src/components/CodeBlockEditor.vue

@@ -1,5 +1,6 @@
 <template>
   <MFormDrawer
+    class="m-editor-code-block-editor"
     ref="fomDrawer"
     label-width="80px"
     :close-on-press-escape="false"
@@ -28,9 +29,10 @@ defineOptions({
   name: 'MEditorCodeBlockEditor',
 });
 
-defineProps<{
+const props = defineProps<{
   content: CodeBlockContent;
   disabled?: boolean;
+  isDataSource?: boolean;
 }>();
 
 const emit = defineEmits<{
@@ -40,7 +42,9 @@ const emit = defineEmits<{
 const services = inject<Services>('services');
 
 const columnWidth = computed(() => services?.uiService.get('columnWidth'));
-const size = computed(() => (columnWidth.value ? columnWidth.value.center + columnWidth.value.right : 600));
+const size = computed(() =>
+  columnWidth.value ? columnWidth.value.center + columnWidth.value.right - (props.isDataSource ? 100 : 0) : 600,
+);
 
 const codeEditorHeight = ref('600px');
 
@@ -80,16 +84,26 @@ const functionConfig = computed(() => [
     name: 'name',
   },
   {
-    text: '注释',
+    text: '描述',
     name: 'desc',
   },
+  {
+    text: '执行时机',
+    name: 'timing',
+    type: 'select',
+    options: [
+      { text: '初始化前', value: 'beforeInit' },
+      { text: '初始化后', value: 'afterInit' },
+    ],
+    display: () => props.isDataSource,
+  },
   {
     type: 'table',
     border: true,
     text: '参数',
     enableFullscreen: false,
+    enableToggleMode: false,
     name: 'params',
-    maxHeight: '300px',
     dropSort: false,
     items: [
       {
@@ -99,7 +113,7 @@ const functionConfig = computed(() => [
       },
       {
         type: 'text',
-        label: '注释',
+        label: '描述',
         name: 'extra',
       },
       services?.codeBlockService.getParamsColConfig() || defaultParamColConfig,
@@ -138,7 +152,7 @@ const fomDrawer = ref<InstanceType<typeof MFormDrawer>>();
 const openHandler = () => {
   setTimeout(() => {
     if (fomDrawer.value) {
-      const height = fomDrawer.value?.bodyHeight - 468;
+      const height = fomDrawer.value?.bodyHeight - 348 - (props.isDataSource ? 50 : 0);
       codeEditorHeight.value = `${height > 100 ? height : 600}px`;
     }
   });

package/src/fields/CodeSelectCol.vue

@@ -43,8 +43,8 @@ import type { Id } from '@tmagic/schema';
 import CodeBlockEditor from '@editor/components/CodeBlockEditor.vue';
 import CodeParams from '@editor/components/CodeParams.vue';
 import Icon from '@editor/components/Icon.vue';
+import { useCodeBlockEdit } from '@editor/hooks/use-code-block-edit';
 import type { CodeParamStatement, CodeSelectColConfig, Services } from '@editor/type';
-import { useCodeBlockEdit } from '@editor/utils/use-code-block-edit';
 
 defineOptions({
   name: 'MEditorCodeSelectCol',

package/src/fields/DataSourceFields.vue

@@ -6,15 +6,16 @@
       <TMagicButton size="small" type="primary" :disabled="disabled" plain @click="newHandler()">添加</TMagicButton>
     </div>
 
-    <MFormDialog
+    <MFormDrawer
       ref="addDialog"
+      label-width="80px"
       :title="filedTitle"
       :config="dataSourceFieldsConfig"
       :values="fieldValues"
       :parentValues="model[name]"
       :disabled="disabled"
       @submit="fieldChange"
-    ></MFormDialog>
+    ></MFormDrawer>
   </div>
 </template>
 
@@ -22,7 +23,7 @@
 import { ref } from 'vue';
 
 import { TMagicButton, tMagicMessageBox } from '@tmagic/design';
-import { FieldProps, FormConfig, FormState, MFormDialog } from '@tmagic/form';
+import { FieldProps, FormConfig, FormState, MFormDrawer } from '@tmagic/form';
 import { MagicTable } from '@tmagic/table';
 
 defineOptions({
@@ -42,7 +43,7 @@ const props = withDefaults(
 
 const emit = defineEmits(['change']);
 
-const addDialog = ref<InstanceType<typeof MFormDialog>>();
+const addDialog = ref<InstanceType<typeof MFormDrawer>>();
 const fieldValues = ref<Record<string, any>>({});
 const filedTitle = ref('');
 
@@ -77,6 +78,10 @@ const fieldColumns = [
     label: '属性描述',
     prop: 'desc',
   },
+  {
+    label: '默认值',
+    prop: 'defaultValue',
+  },
   {
     label: '操作',
     fixed: 'right',
@@ -154,6 +159,7 @@ const dataSourceFieldsConfig: FormConfig = [
   {
     name: 'description',
     text: '描述',
+    type: 'textarea',
   },
   {
     name: 'defaultValue',

package/src/fields/DataSourceMethodSelect.vue

@@ -40,8 +40,8 @@ import type { CodeBlockContent, Id } from '@tmagic/schema';
 import CodeBlockEditor from '@editor/components/CodeBlockEditor.vue';
 import CodeParams from '@editor/components/CodeParams.vue';
 import Icon from '@editor/components/Icon.vue';
+import { useDataSourceMethod } from '@editor/hooks/use-data-source-method';
 import type { CodeParamStatement, DataSourceMethodSelectConfig, Services } from '@editor/type';
-import { useDataSourceMethod } from '@editor/utils/use-data-source-method';
 
 defineOptions({
   name: 'MEditorDataSourceMethodSelect',

package/src/fields/DataSourceMethods.vue

@@ -9,10 +9,11 @@
     </div>
 
     <CodeBlockEditor
-      ref="codeBlockEditor"
       v-if="codeConfig"
+      ref="codeBlockEditor"
       :disabled="disabled"
       :content="codeConfig"
+      :is-data-source="true"
       @submit="submitCodeHandler"
     ></CodeBlockEditor>
   </div>
@@ -25,8 +26,8 @@ import type { CodeBlockContent } from '@tmagic/schema';
 import { MagicTable } from '@tmagic/table';
 
 import CodeBlockEditor from '@editor/components/CodeBlockEditor.vue';
+import { useDataSourceMethod } from '@editor/hooks/use-data-source-method';
 import type { CodeParamStatement } from '@editor/type';
-import { useDataSourceMethod } from '@editor/utils/use-data-source-method';
 
 defineOptions({
   name: 'MEditorDataSourceMethods',
@@ -53,9 +54,13 @@ const methodColumns = [
     prop: 'name',
   },
   {
-    label: '注释',
+    label: '描述',
     prop: 'desc',
   },
+  {
+    label: '执行时机',
+    prop: 'timing',
+  },
   {
     label: '参数',
     prop: 'params',

package/src/hooks/index.ts

@@ -0,0 +1,21 @@
+/*
+ * Tencent is pleased to support the open source community by making TMagicEditor available.
+ *
+ * Copyright (C) 2023 THL A29 Limited, a Tencent company.  All rights reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+export * from './use-code-block-edit';
+export * from './use-data-source-method';
+export * from './use-stage';

package/src/{utils → hooks}/use-data-source-method.ts

@@ -5,8 +5,7 @@ import { tMagicMessage } from '@tmagic/design';
 import type { CodeBlockContent, DataSourceSchema } from '@tmagic/schema';
 
 import CodeBlockEditor from '@editor/components/CodeBlockEditor.vue';
-
-import { getConfig } from './config';
+import { getConfig } from '@editor/utils/config';
 
 export const useDataSourceMethod = () => {
   const codeConfig = ref<CodeBlockContent>();

package/src/{utils/stage.ts → hooks/use-stage.ts}

@@ -6,8 +6,7 @@ import StageCore, { GuidesType, RemoveEventData, SortEventData, UpdateEventData
 import editorService from '@editor/services/editor';
 import uiService from '@editor/services/ui';
 import { H_GUIDE_LINE_STORAGE_KEY, StageOptions, V_GUIDE_LINE_STORAGE_KEY } from '@editor/type';
-
-import { getGuideLineFromCache } from './editor';
+import { getGuideLineFromCache } from '@editor/utils/editor';
 
 const root = computed(() => editorService.get('root'));
 const page = computed(() => editorService.get('page'));

package/src/index.ts

@@ -39,6 +39,7 @@ import './theme/index.scss';
 
 export type { MoveableOptions } from '@tmagic/stage';
 export * from './type';
+export * from './hooks';
 export * from './utils';
 export { default as TMagicEditor } from './Editor.vue';
 export { default as TMagicCodeEditor } from './layouts/CodeEditor.vue';

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

@@ -35,8 +35,8 @@ import type { Id } from '@tmagic/schema';
 
 import CodeBlockEditor from '@editor/components/CodeBlockEditor.vue';
 import SearchInput from '@editor/components/SearchInput.vue';
+import { useCodeBlockEdit } from '@editor/hooks/use-code-block-edit';
 import type { CodeDeleteErrorType, Services } from '@editor/type';
-import { useCodeBlockEdit } from '@editor/utils/use-code-block-edit';
 
 import CodeBlockList from './CodeBlockList.vue';
 

package/src/layouts/workspace/Stage.vue

@@ -36,9 +36,9 @@ import type { MContainer } from '@tmagic/schema';
 import StageCore, { calcValueByFontsize, getOffset, Runtime } from '@tmagic/stage';
 
 import ScrollViewer from '@editor/components/ScrollViewer.vue';
+import { useStage } from '@editor/hooks/use-stage';
 import { Layout, MenuButton, MenuComponent, Services, StageOptions } from '@editor/type';
 import { getConfig } from '@editor/utils/config';
-import { useStage } from '@editor/utils/stage';
 
 import ViewerMenu from './ViewerMenu.vue';
 

package/src/theme/code-block.scss

@@ -24,3 +24,13 @@
     display: none;
   }
 }
+
+.m-editor-code-block-editor {
+  .tmagic-design-table {
+    height: 180px;
+  }
+
+  .el-drawer__body {
+    padding: 10px 20px;
+  }
+}

package/src/utils/index.ts

@@ -20,5 +20,4 @@ export * from './config';
 export * from './props';
 export * from './logger';
 export * from './editor';
-export * from './stage';
 export * from './operator';

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

@@ -2,12 +2,14 @@ import type { CodeBlockContent } from '@tmagic/schema';
 declare const _default: import("vue").DefineComponent<__VLS_TypePropsToRuntimeProps<{
     content: CodeBlockContent;
     disabled?: boolean | undefined;
+    isDataSource?: boolean | undefined;
 }>, {
     show(): void;
     hide(): void;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<__VLS_TypePropsToRuntimeProps<{
     content: CodeBlockContent;
     disabled?: boolean | undefined;
+    isDataSource?: boolean | undefined;
 }>>>, {}, {}>;
 export default _default;
 type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;

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

@@ -1,7 +1,7 @@
 import type { MenuButton, MenuComponent } from '../type';
 declare const _default: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
     data?: MenuButton | MenuComponent | undefined;
-    eventType?: "mousedown" | "click" | "mouseup" | undefined;
+    eventType?: "click" | "mousedown" | "mouseup" | undefined;
 }>, {
     data: () => {
         type: string;
@@ -10,7 +10,7 @@ declare const _default: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_T
     eventType: string;
 }>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
     data?: MenuButton | MenuComponent | undefined;
-    eventType?: "mousedown" | "click" | "mouseup" | undefined;
+    eventType?: "click" | "mousedown" | "mouseup" | undefined;
 }>, {
     data: () => {
         type: string;
@@ -19,7 +19,7 @@ declare const _default: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_T
     eventType: string;
 }>>>, {
     data: MenuButton | MenuComponent;
-    eventType: "mousedown" | "click" | "mouseup";
+    eventType: "click" | "mousedown" | "mouseup";
 }, {}>;
 export default _default;
 type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;

package/types/hooks/index.d.ts

@@ -0,0 +1,3 @@
+export * from './use-code-block-edit';
+export * from './use-data-source-method';
+export * from './use-stage';

package/types/{utils → hooks}/use-code-block-edit.d.ts

@@ -54,6 +54,7 @@ export declare const useCodeBlockEdit: (codeBlockService?: CodeBlockService) =>
             style?: unknown;
             readonly content: CodeBlockContent;
             readonly disabled?: boolean | undefined;
+            readonly isDataSource?: boolean | undefined;
         };
         $attrs: {
             [x: string]: unknown;
@@ -76,6 +77,9 @@ export declare const useCodeBlockEdit: (codeBlockService?: CodeBlockService) =>
             disabled: {
                 type: import("vue").PropType<boolean>;
             };
+            isDataSource: {
+                type: import("vue").PropType<boolean>;
+            };
         }>>, {
             show(): void;
             hide(): void;
@@ -107,6 +111,9 @@ export declare const useCodeBlockEdit: (codeBlockService?: CodeBlockService) =>
         disabled: {
             type: import("vue").PropType<boolean>;
         };
+        isDataSource: {
+            type: import("vue").PropType<boolean>;
+        };
     }>> & import("vue").ShallowUnwrapRef<{
         show(): void;
         hide(): void;

package/types/{utils → hooks}/use-data-source-method.d.ts

@@ -52,6 +52,7 @@ export declare const useDataSourceMethod: () => {
             style?: unknown;
             readonly content: CodeBlockContent;
             readonly disabled?: boolean | undefined;
+            readonly isDataSource?: boolean | undefined;
         };
         $attrs: {
             [x: string]: unknown;
@@ -74,6 +75,9 @@ export declare const useDataSourceMethod: () => {
             disabled: {
                 type: import("vue").PropType<boolean>;
             };
+            isDataSource: {
+                type: import("vue").PropType<boolean>;
+            };
         }>>, {
             show(): void;
             hide(): void;
@@ -105,6 +109,9 @@ export declare const useDataSourceMethod: () => {
         disabled: {
             type: import("vue").PropType<boolean>;
         };
+        isDataSource: {
+            type: import("vue").PropType<boolean>;
+        };
     }>> & import("vue").ShallowUnwrapRef<{
         show(): void;
         hide(): void;

package/types/index.d.ts

@@ -3,6 +3,7 @@ import type { InstallOptions } from './type';
 import './theme/index.scss';
 export type { MoveableOptions } from '@tmagic/stage';
 export * from './type';
+export * from './hooks';
 export * from './utils';
 export { default as TMagicEditor } from './Editor.vue';
 export { default as TMagicCodeEditor } from './layouts/CodeEditor.vue';

package/types/utils/index.d.ts

@@ -2,5 +2,4 @@ export * from './config';
 export * from './props';
 export * from './logger';
 export * from './editor';
-export * from './stage';
 export * from './operator';