@tmagic/editor 1.2.14 → 1.3.0-alpha.0

package/src/utils/data-source/formConfigs/base.ts

@@ -0,0 +1,32 @@
+import type { FormConfig } from '@tmagic/form';
+
+export default [
+  {
+    name: 'id',
+    type: 'hidden',
+  },
+  {
+    name: 'type',
+    text: '类型',
+    type: 'select',
+    options: [
+      { text: '基础', value: 'base' },
+      { text: 'HTTP', value: 'http' },
+    ],
+    defaultValue: 'base',
+  },
+  {
+    name: 'title',
+    text: '名称',
+    rules: [
+      {
+        required: true,
+        message: '请输入名称',
+      },
+    ],
+  },
+  {
+    name: 'description',
+    text: '描述',
+  },
+] as FormConfig;

package/src/utils/data-source/formConfigs/http.ts

@@ -0,0 +1,50 @@
+import { FormConfig } from '@tmagic/form';
+
+export default [
+  {
+    name: 'autoFetch',
+    text: '自动请求',
+    type: 'switch',
+    defaultValue: true,
+  },
+  {
+    type: 'fieldset',
+    name: 'options',
+    legend: 'HTTP 配置',
+    items: [
+      {
+        name: 'url',
+        text: 'URL',
+      },
+      {
+        name: 'method',
+        text: 'Method',
+        type: 'select',
+        options: [
+          { text: 'GET', value: 'GET' },
+          { text: 'POST', value: 'POST' },
+          { text: 'PUT', value: 'PUT' },
+          { text: 'DELETE', value: 'DELETE' },
+        ],
+      },
+      {
+        name: 'params',
+        type: 'key-value',
+        defaultValue: {},
+        text: '参数',
+      },
+      {
+        name: 'data',
+        type: 'key-value',
+        defaultValue: {},
+        text: '请求体',
+      },
+      {
+        name: 'headers',
+        type: 'key-value',
+        defaultValue: {},
+        text: '请求头',
+      },
+    ],
+  },
+] as FormConfig;

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

@@ -0,0 +1,31 @@
+import { FormConfig } from '@tmagic/form';
+
+import BaseFormConfig from './formConfigs/base';
+import HttpFormConfig from './formConfigs/http';
+
+const fillConfig = (config: FormConfig): FormConfig => [
+  ...BaseFormConfig,
+  ...config,
+  {
+    type: 'panel',
+    title: '数据定义',
+    items: [
+      {
+        name: 'fields',
+        type: 'data-source-fields',
+        defaultValue: [],
+      },
+    ],
+  },
+];
+
+export const getFormConfig = (type: string, configs: Record<string, FormConfig>): FormConfig => {
+  switch (type) {
+    case 'base':
+      return fillConfig([]);
+    case 'http':
+      return fillConfig(HttpFormConfig);
+    default:
+      return fillConfig(configs[type] || []);
+  }
+};

package/src/utils/dep.ts

@@ -1,6 +1,6 @@
 import { isEmpty } from 'lodash-es';
 
-import { CodeBlockContent, HookType, Id } from '@tmagic/schema';
+import { CodeBlockContent, DataSourceSchema, HookType, Id } from '@tmagic/schema';
 
 import { Target } from '@editor/services/dep';
 import type { HookData } from '@editor/type';
@@ -19,3 +19,11 @@ export const createCodeBlockTarget = (id: Id, codeBlock: CodeBlockContent) =>
       return false;
     },
   });
+
+export const createDataSourceTarget = (id: Id, ds: DataSourceSchema) =>
+  new Target({
+    type: 'data-source',
+    id,
+    name: ds.title || `${id}`,
+    isTarget: (key: string | number, value: any) => typeof value === 'string' && value.includes(`${id}`),
+  });

package/src/utils/props.ts

@@ -182,6 +182,7 @@ export const fillConfig = (config: FormConfig = []) => [
           {
             name: 'events',
             type: 'event-select',
+            labelWidth: 0,
           },
         ],
       },

package/types/Editor.vue.d.ts

@@ -47,6 +47,10 @@ declare const _default: import("vue").DefineComponent<{
         }>>;
         default: () => {};
     };
+    dataScourceConfigs: {
+        type: import("vue").PropType<Record<string, import("@tmagic/form").FormConfig>>;
+        default: () => {};
+    };
     moveableOptions: {
         type: import("vue").PropType<import("@tmagic/stage").MoveableOptions | ((config?: import("@tmagic/stage").CustomizeMoveableOptionsCallbackConfig | undefined) => import("@tmagic/stage").MoveableOptions)>;
     };
@@ -134,6 +138,10 @@ declare const _default: import("vue").DefineComponent<{
         }>>;
         default: () => {};
     };
+    dataScourceConfigs: {
+        type: import("vue").PropType<Record<string, import("@tmagic/form").FormConfig>>;
+        default: () => {};
+    };
     moveableOptions: {
         type: import("vue").PropType<import("@tmagic/stage").MoveableOptions | ((config?: import("@tmagic/stage").CustomizeMoveableOptionsCallbackConfig | undefined) => import("@tmagic/stage").MoveableOptions)>;
     };
@@ -190,6 +198,7 @@ declare const _default: import("vue").DefineComponent<{
         events: import("@tmagic/core").EventOption[];
         methods: import("@tmagic/core").EventOption[];
     }>;
+    dataScourceConfigs: Record<string, import("@tmagic/form").FormConfig>;
     canSelect: (el: HTMLElement) => boolean | Promise<boolean>;
     isContainer: (el: HTMLElement) => boolean | Promise<boolean>;
     containerHighlightClassName: string;

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

@@ -8,15 +8,15 @@ declare const _default: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_T
 }>, {
     hide: () => void;
     show: (e: MouseEvent) => void;
-}, 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<{
+}, 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<{
     menuData?: (MenuButton | MenuComponent)[] | undefined;
     isSubMenu?: boolean | undefined;
 }>, {
     menuData: () => never[];
     isSubMenu: boolean;
 }>>> & {
-    onHide?: ((...args: any[]) => any) | undefined;
     onShow?: ((...args: any[]) => any) | undefined;
+    onHide?: ((...args: any[]) => any) | undefined;
 }, {
     menuData: (MenuButton | MenuComponent)[];
     isSubMenu: boolean;

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

@@ -41,8 +41,8 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
         height: number;
     };
 }>>>, {
-    height: number;
     width: number;
+    height: number;
     zoom: number;
     wrapWidth: number;
     wrapHeight: number;

package/types/editorProps.d.ts

@@ -64,6 +64,10 @@ declare const _default: {
         }>>;
         default: () => {};
     };
+    dataScourceConfigs: {
+        type: PropType<Record<string, FormConfig>>;
+        default: () => {};
+    };
     /** 画布中组件选中框的移动范围 */
     moveableOptions: {
         type: PropType<MoveableOptions | ((config?: CustomizeMoveableOptionsCallbackConfig) => MoveableOptions)>;

package/types/fields/DataSourceFields.vue.d.ts

@@ -0,0 +1,40 @@
+declare const _default: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
+    config: {
+        type: 'data-source-fields';
+    };
+    model: any;
+    prop: string;
+    disabled: boolean;
+    name: string;
+}>, {
+    disabled: boolean;
+}>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "change"[], "change", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
+    config: {
+        type: 'data-source-fields';
+    };
+    model: any;
+    prop: string;
+    disabled: boolean;
+    name: string;
+}>, {
+    disabled: boolean;
+}>>> & {
+    onChange?: ((...args: any[]) => any) | undefined;
+}, {
+    disabled: boolean;
+}>;
+export default _default;
+type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
+type __VLS_TypePropsToRuntimeProps<T> = {
+    [K in keyof T]-?: {} extends Pick<T, K> ? {
+        type: import('vue').PropType<__VLS_NonUndefinedable<T[K]>>;
+    } : {
+        type: import('vue').PropType<T[K]>;
+        required: true;
+    };
+};
+type __VLS_WithDefaults<P, D> = {
+    [K in keyof Pick<P, keyof P>]: K extends keyof D ? P[K] & {
+        default: D[K];
+    } : P[K];
+};

package/types/fields/KeyValue.vue.d.ts

@@ -0,0 +1,50 @@
+declare const _default: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
+    config: {
+        type: 'key-value';
+        name: string;
+        text: string;
+    };
+    model: Record<string, any>;
+    name: string;
+    prop: string;
+    disabled: boolean;
+    lastValues?: Record<string, any> | undefined;
+    size?: "default" | "small" | "large" | undefined;
+}>, {
+    disabled: boolean;
+}>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    change: (value: Record<string, any>) => void;
+}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
+    config: {
+        type: 'key-value';
+        name: string;
+        text: string;
+    };
+    model: Record<string, any>;
+    name: string;
+    prop: string;
+    disabled: boolean;
+    lastValues?: Record<string, any> | undefined;
+    size?: "default" | "small" | "large" | undefined;
+}>, {
+    disabled: boolean;
+}>>> & {
+    onChange?: ((value: Record<string, any>) => any) | undefined;
+}, {
+    disabled: boolean;
+}>;
+export default _default;
+type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
+type __VLS_TypePropsToRuntimeProps<T> = {
+    [K in keyof T]-?: {} extends Pick<T, K> ? {
+        type: import('vue').PropType<__VLS_NonUndefinedable<T[K]>>;
+    } : {
+        type: import('vue').PropType<T[K]>;
+        required: true;
+    };
+};
+type __VLS_WithDefaults<P, D> = {
+    [K in keyof Pick<P, keyof P>]: K extends keyof D ? P[K] & {
+        default: D[K];
+    } : P[K];
+};

package/types/index.d.ts

@@ -18,7 +18,9 @@ export { default as ComponentListPanel } from './layouts/sidebar/ComponentListPa
 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 EventSelect } from './fields/EventSelect.vue';
+export { default as KeyValue } from './fields/KeyValue.vue';
 export { default as CodeBlockList } from './layouts/sidebar/code-block/CodeBlockList.vue';
 export { default as PropsPanel } from './layouts/PropsPanel.vue';
 export { default as ToolButton } from './components/ToolButton.vue';

package/types/initService.d.ts

@@ -5,4 +5,4 @@ export declare type LooseRequired<T> = {
     [P in string & keyof T]: T[P];
 };
 export declare const initServiceState: (props: Readonly<LooseRequired<Readonly<ExtractPropTypes<typeof editorProps>>>>, { editorService, historyService, componentListService, propsService, eventsService, uiService, codeBlockService, }: Services) => void;
-export declare const initServiceEvents: (props: Readonly<LooseRequired<Readonly<ExtractPropTypes<typeof editorProps>>>>, emit: (event: 'props-panel-mounted' | 'update:modelValue', ...args: any[]) => void, { editorService, codeBlockService, depService }: Services) => void;
+export declare const initServiceEvents: (props: Readonly<LooseRequired<Readonly<ExtractPropTypes<typeof editorProps>>>>, emit: (event: 'props-panel-mounted' | 'update:modelValue', ...args: any[]) => void, { editorService, codeBlockService, dataSourceService, depService }: Services) => void;

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

@@ -37,10 +37,10 @@ declare const _default: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_T
     onSave?: ((...args: any[]) => any) | undefined;
     onInitd?: ((...args: any[]) => any) | undefined;
 }, {
-    language: string;
     options: {
         [key: string]: any;
     };
+    language: string;
     autoSave: boolean;
 }>;
 export default _default;

package/types/layouts/sidebar/Sidebar.vue.d.ts

@@ -1,7 +1,7 @@
 import type { MenuButton, MenuComponent } from '../../type';
 import { SideBarData } from '../../type';
 declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
-    data?: SideBarData | undefined;
+    data: SideBarData;
     layerContentMenu: (MenuButton | MenuComponent)[];
 }>, {
     data: () => {
@@ -12,7 +12,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
 }>, {
     activeTabName: import("vue").Ref<string>;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
-    data?: SideBarData | undefined;
+    data: SideBarData;
     layerContentMenu: (MenuButton | MenuComponent)[];
 }>, {
     data: () => {

package/types/layouts/sidebar/data-source/DataSourceConfigPanel.vue.d.ts

@@ -0,0 +1,22 @@
+declare const _default: import("vue").DefineComponent<__VLS_TypePropsToRuntimeProps<{
+    title?: string | undefined;
+    values: any;
+}>, {
+    show(): void;
+    hide: () => void;
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "submit"[], "submit", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<__VLS_TypePropsToRuntimeProps<{
+    title?: string | undefined;
+    values: any;
+}>>> & {
+    onSubmit?: ((...args: any[]) => any) | undefined;
+}, {}>;
+export default _default;
+type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
+type __VLS_TypePropsToRuntimeProps<T> = {
+    [K in keyof T]-?: {} extends Pick<T, K> ? {
+        type: import('vue').PropType<__VLS_NonUndefinedable<T[K]>>;
+    } : {
+        type: import('vue').PropType<T[K]>;
+        required: true;
+    };
+};

package/types/layouts/sidebar/data-source/DataSourceListPanel.vue.d.ts

@@ -0,0 +1,12 @@
+declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, import("vue").EmitsOptions, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{}>>, {}>, {
+    'data-source-panel-tool': (_: {
+        id: any;
+        data: any;
+    }) => any;
+}>;
+export default _default;
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/types/services/dataSource.d.ts

@@ -0,0 +1,25 @@
+import type { FormConfig } from '@tmagic/form';
+import { DataSourceSchema } from '@tmagic/schema';
+import BaseService from './BaseService';
+interface State {
+    dataSources: DataSourceSchema[];
+    configs: Record<string, FormConfig>;
+}
+type StateKey = keyof State;
+declare class DataSource extends BaseService {
+    private state;
+    set<K extends StateKey, T extends State[K]>(name: K, value: T): void;
+    get<K extends StateKey>(name: K): State[K];
+    getFormConfig(type?: string): FormConfig;
+    setFormConfig(type: string, config: FormConfig): void;
+    add(config: DataSourceSchema): void;
+    update(config: DataSourceSchema): void;
+    remove(id: string): void;
+    getDataSourceById(id: string): DataSourceSchema | undefined;
+    resetState(): void;
+    destroy(): void;
+    private createId;
+}
+export type DataSourceService = DataSource;
+declare const _default: DataSource;
+export default _default;

package/types/services/props.d.ts

@@ -10,9 +10,7 @@ declare class Props extends BaseService {
         items: ({
             title: string;
             labelWidth: string;
-            items: (import("@tmagic/form").ChildConfig & {
-                [key: string]: any;
-            })[];
+            items: import("@tmagic/form").ChildConfig[];
             lazy?: undefined;
         } | {
             title: string;
@@ -25,7 +23,11 @@ declare class Props extends BaseService {
                     items: ({
                         name: string;
                         type: string;
-                        activeValue: string;
+                        activeValue: string; /**
+                         * 为指定类型组件设置组件属性表单配置
+                         * @param type 组件类型
+                         * @param config 组件属性表单配置
+                         */
                         inactiveValue: string;
                         defaultValue: string;
                         text: string;
@@ -34,7 +36,11 @@ declare class Props extends BaseService {
                         name: string;
                         text: string;
                         type?: undefined;
-                        activeValue?: undefined;
+                        activeValue?: undefined; /**
+                         * 为指定类型组件设置组件属性表单配置
+                         * @param type 组件类型
+                         * @param config 组件属性表单配置
+                         */
                         inactiveValue?: undefined;
                         defaultValue?: undefined;
                         disabled?: undefined;
@@ -43,7 +49,11 @@ declare class Props extends BaseService {
                         text: string;
                         disabled: (vm: import("@tmagic/form").FormState, { model }: any) => boolean;
                         type?: undefined;
-                        activeValue?: undefined;
+                        activeValue?: undefined; /**
+                         * 为指定类型组件设置组件属性表单配置
+                         * @param type 组件类型
+                         * @param config 组件属性表单配置
+                         */
                         inactiveValue?: undefined;
                         defaultValue?: undefined;
                     })[];
@@ -96,6 +106,7 @@ declare class Props extends BaseService {
             items: {
                 name: string;
                 type: string;
+                labelWidth: number;
             }[];
             labelWidth?: undefined;
             lazy?: undefined;
@@ -162,12 +173,6 @@ declare class Props extends BaseService {
     }>;
     resetState(): void;
     destroy(): void;
-    /**
-     * 生成指定位数的GUID，无【-】格式
-     * @param digit 位数，默认值8
-     * @returns
-     */
-    private guid;
 }
 export type PropsService = Props;
 declare const _default: Props;

package/types/type.d.ts

@@ -5,6 +5,7 @@ import type StageCore from '@tmagic/stage';
 import type { ContainerHighlightType, CustomizeMoveableOptionsCallbackConfig, MoveableOptions, UpdateDragEl } from '@tmagic/stage';
 import type { CodeBlockService } from './services/codeBlock';
 import type { ComponentListService } from './services/componentList';
+import { DataSourceService } from './services/dataSource';
 import type { DepService } from './services/dep';
 import type { EditorService } from './services/editor';
 import type { EventsService } from './services/events';
@@ -28,6 +29,7 @@ export interface Services {
     uiService: UiService;
     codeBlockService: CodeBlockService;
     depService: DepService;
+    dataSourceService: DataSourceService;
 }
 export interface StageOptions {
     runtimeUrl: string;
@@ -203,7 +205,7 @@ export interface SideComponent extends MenuComponent {
  * layer: 已选组件树
  * code-block: 代码块
  */
-export type SideItem = 'component-list' | 'layer' | 'code-block' | SideComponent;
+export type SideItem = 'component-list' | 'layer' | 'code-block' | 'data-source' | SideComponent;
 /** 工具栏 */
 export interface SideBarData {
     /** 容器类型 */

package/types/utils/data-source/formConfigs/base.d.ts

@@ -0,0 +1,3 @@
+import type { FormConfig } from '@tmagic/form';
+declare const _default: FormConfig;
+export default _default;

package/types/utils/data-source/formConfigs/http.d.ts

@@ -0,0 +1,3 @@
+import { FormConfig } from '@tmagic/form';
+declare const _default: FormConfig;
+export default _default;

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

@@ -0,0 +1,2 @@
+import { FormConfig } from '@tmagic/form';
+export declare const getFormConfig: (type: string, configs: Record<string, FormConfig>) => FormConfig;

package/types/utils/dep.d.ts

@@ -1,3 +1,4 @@
-import { CodeBlockContent, Id } from '@tmagic/schema';
+import { CodeBlockContent, DataSourceSchema, Id } from '@tmagic/schema';
 import { Target } from '../services/dep';
 export declare const createCodeBlockTarget: (id: Id, codeBlock: CodeBlockContent) => Target;
+export declare const createDataSourceTarget: (id: Id, ds: DataSourceSchema) => Target;

package/types/utils/props.d.ts

@@ -9,9 +9,7 @@ export declare const fillConfig: (config?: FormConfig) => {
     items: ({
         title: string;
         labelWidth: string;
-        items: (import("@tmagic/form").ChildConfig & {
-            [key: string]: any;
-        })[];
+        items: import("@tmagic/form").ChildConfig[];
         lazy?: undefined;
     } | {
         title: string;
@@ -95,6 +93,7 @@ export declare const fillConfig: (config?: FormConfig) => {
         items: {
             name: string;
             type: string;
+            labelWidth: number;
         }[];
         labelWidth?: undefined;
         lazy?: undefined;