@tmagic/editor 1.3.0-beta.5 → 1.3.0-beta.6

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.3.0-beta.5",
+  "version": "1.3.0-beta.6",
   "name": "@tmagic/editor",
   "type": "module",
   "sideEffects": [
@@ -12,6 +12,7 @@
   "types": "types/index.d.ts",
   "exports": {
     ".": {
+      "types": "./types/index.d.ts",
       "import": "./dist/tmagic-editor.js",
       "require": "./dist/tmagic-editor.umd.cjs"
     },
@@ -46,13 +47,13 @@
   "dependencies": {
     "@babel/core": "^7.18.0",
     "@element-plus/icons-vue": "^2.0.9",
-    "@tmagic/core": "1.3.0-beta.5",
-    "@tmagic/design": "1.3.0-beta.5",
-    "@tmagic/form": "1.3.0-beta.5",
-    "@tmagic/schema": "1.3.0-beta.5",
-    "@tmagic/stage": "1.3.0-beta.5",
-    "@tmagic/table": "1.3.0-beta.5",
-    "@tmagic/utils": "1.3.0-beta.5",
+    "@tmagic/core": "1.3.0-beta.6",
+    "@tmagic/design": "1.3.0-beta.6",
+    "@tmagic/form": "1.3.0-beta.6",
+    "@tmagic/schema": "1.3.0-beta.6",
+    "@tmagic/stage": "1.3.0-beta.6",
+    "@tmagic/table": "1.3.0-beta.6",
+    "@tmagic/utils": "1.3.0-beta.6",
     "buffer": "^6.0.3",
     "color": "^3.1.3",
     "events": "^3.3.0",
@@ -64,8 +65,8 @@
     "vue": "^3.3.4"
   },
   "peerDependencies": {
-    "@tmagic/design": "1.3.0-beta.5",
-    "@tmagic/form": "1.3.0-beta.5",
+    "@tmagic/design": "1.3.0-beta.6",
+    "@tmagic/form": "1.3.0-beta.6",
     "monaco-editor": "^0.41.0",
     "vue": "^3.3.4"
   },

package/src/fields/KeyValue.vue

@@ -91,5 +91,6 @@ const addHandler = () => {
 
 const deleteHandler = (index: number) => {
   records.value.splice(index, 1);
+  emit('change', getValue());
 };
 </script>

package/src/layouts/CodeEditor.vue

@@ -47,6 +47,7 @@ const props = withDefaults(
     parse?: boolean;
   }>(),
   {
+    initValues: '',
     autoSave: true,
     language: 'javascript',
     options: () => ({

package/src/services/dataSource.ts

@@ -7,7 +7,7 @@ import type { DataSourceSchema } from '@tmagic/schema';
 import { guid } from '@tmagic/utils';
 
 import type { DatasourceTypeOption } from '@editor/type';
-import { getFormConfig } from '@editor/utils/data-source';
+import { getFormConfig, getFormValue } from '@editor/utils/data-source';
 
 import BaseService from './BaseService';
 
@@ -50,7 +50,7 @@ class DataSource extends BaseService {
   }
 
   public getFormValue(type = 'base') {
-    return this.get('values')[type];
+    return getFormValue(type, this.get('values')[type]);
   }
 
   public setFormValue(type: string, value: Partial<DataSourceSchema>) {

package/src/utils/data-source/index.ts

@@ -1,4 +1,4 @@
-import { FormConfig } from '@tmagic/form';
+import { FormConfig, FormState } from '@tmagic/form';
 import { DataSchema, DataSourceSchema } from '@tmagic/schema';
 
 import BaseFormConfig from './formConfigs/base';
@@ -8,47 +8,72 @@ const fillConfig = (config: FormConfig): FormConfig => [
   ...BaseFormConfig(),
   ...config,
   {
-    type: 'panel',
-    title: '数据定义',
+    type: 'tab',
     items: [
       {
-        name: 'fields',
-        type: 'data-source-fields',
-        defaultValue: () => [],
+        title: '数据定义',
+        items: [
+          {
+            name: 'fields',
+            type: 'data-source-fields',
+            defaultValue: () => [],
+          },
+        ],
       },
-    ],
-  },
-  {
-    type: 'panel',
-    title: '方法定义',
-    items: [
       {
-        name: 'methods',
-        type: 'data-source-methods',
-        defaultValue: () => [],
+        title: '方法定义',
+        items: [
+          {
+            name: 'methods',
+            type: 'data-source-methods',
+            defaultValue: () => [],
+          },
+        ],
       },
-    ],
-  },
-  {
-    type: 'panel',
-    title: '事件配置',
-    display: false,
-    items: [
       {
-        name: 'events',
-        src: 'datasource',
-        type: 'event-select',
+        title: '事件配置',
+        display: false,
+        items: [
+          {
+            name: 'events',
+            src: 'datasource',
+            type: 'event-select',
+          },
+        ],
       },
-    ],
-  },
-  {
-    type: 'panel',
-    title: 'mock数据',
-    items: [
       {
-        name: 'mocks',
-        type: 'data-source-mocks',
-        defaultValue: () => [],
+        title: 'mock数据',
+        items: [
+          {
+            name: 'mocks',
+            type: 'data-source-mocks',
+            defaultValue: () => [],
+          },
+        ],
+      },
+      {
+        title: '请求参数裁剪',
+        display: (formState: FormState, { model }: any) => model.type === 'http',
+        items: [
+          {
+            name: 'beforeRequest',
+            type: 'vs-code',
+            parse: true,
+            height: '600px',
+          },
+        ],
+      },
+      {
+        title: '响应数据裁剪',
+        display: (formState: FormState, { model }: any) => model.type === 'http',
+        items: [
+          {
+            name: 'afterResponse',
+            type: 'vs-code',
+            parse: true,
+            height: '600px',
+          },
+        ],
       },
     ],
   },
@@ -65,6 +90,64 @@ export const getFormConfig = (type: string, configs: Record<string, FormConfig>)
   }
 };
 
+export const getFormValue = (type: string, values: Partial<DataSourceSchema>): Partial<DataSourceSchema> => {
+  if (type !== 'http') {
+    return values;
+  }
+
+  return {
+    beforeRequest: `(options, context) => {
+  /**
+   * 用户可以直接编写函数，在原始接口调用之前，会运行该函数，将这个函数的返回值作为该数据源接口的入参
+   *
+   * options: HttpOptions
+   *
+   * interface HttpOptions {
+   *  // 请求链接
+   *  url: string;
+   *  // query参数
+   *  params?: Record<string, string>;
+   *  // body数据
+   *  data?: Record<string, any>;
+   *  // 请求头
+   *  headers?: Record<string, string>;
+   *  // 请求方法 GET/POST
+   *  method?: Method;
+   * }
+   *
+   * context：上下文对象
+   *
+   * interface Content {
+   *  app: AppCore;
+   *  dataSource: HttpDataSource;
+   * }
+   *
+   * return: HttpOptions
+   */
+
+  // 此处的返回值会作为这个接口的入参
+  return options;
+}`,
+    afterResponse: `(response, context) => {
+  /**
+   * 用户可以直接编写函数，在原始接口返回之后，会运行该函数，将这个函数的返回值作为该数据源接口的返回
+
+    * context：上下文对象
+    *
+    * interface Content {
+    *  app: AppCore;
+    *  dataSource: HttpDataSource;
+    * }
+    *
+    */
+
+  // 此处的返回值会作为这个接口的返回值
+  return response;
+}`,
+    ...values,
+  };
+};
+
 export const getDisplayField = (dataSources: DataSourceSchema[], key: string) => {
   const displayState: { value: string; type: 'var' | 'text' }[] = [];
 

package/types/layouts/CodeEditor.vue.d.ts

@@ -11,6 +11,7 @@ declare const _default: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_T
     autoSave?: boolean | undefined;
     parse?: boolean | undefined;
 }>, {
+    initValues: string;
     autoSave: boolean;
     language: string;
     options: () => {
@@ -37,6 +38,7 @@ declare const _default: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_T
     autoSave?: boolean | undefined;
     parse?: boolean | undefined;
 }>, {
+    initValues: string;
     autoSave: boolean;
     language: string;
     options: () => {
@@ -50,9 +52,10 @@ declare const _default: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_T
     options: {
         [key: string]: any;
     };
+    parse: boolean;
+    initValues: any;
     language: string;
     autoSave: boolean;
-    parse: boolean;
 }, {}>;
 export default _default;
 type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;

package/types/utils/data-source/index.d.ts

@@ -1,6 +1,7 @@
 import { FormConfig } from '@tmagic/form';
 import { DataSourceSchema } from '@tmagic/schema';
 export declare const getFormConfig: (type: string, configs: Record<string, FormConfig>) => FormConfig;
+export declare const getFormValue: (type: string, values: Partial<DataSourceSchema>) => Partial<DataSourceSchema>;
 export declare const getDisplayField: (dataSources: DataSourceSchema[], key: string) => {
     value: string;
     type: 'var' | 'text';