@tmagic/editor 1.3.0-alpha.8 → 1.3.0-beta.0

package/src/utils/props.ts

@@ -16,7 +16,300 @@
  * limitations under the License.
  */
 
-import { FormConfig, FormState } from '@tmagic/form';
+import type { FormConfig, FormState, TabPaneConfig } from '@tmagic/form';
+
+import dataSourceService from '@editor/services/dataSource';
+
+const arrayOptions = [
+  { text: '包含', value: 'include' },
+  { text: '不包含', value: 'not_include' },
+];
+
+const eqOptions = [
+  { text: '等于', value: '=' },
+  { text: '不等于', value: '!=' },
+];
+
+const numberOptions = [
+  { text: '大于', value: '>' },
+  { text: '大于等于', value: '>=' },
+  { text: '小于', value: '<' },
+  { text: '小于等于', value: '<=' },
+  { text: '在范围内', value: 'between' },
+  { text: '不在范围内', value: 'not_between' },
+];
+
+export const styleTabConfig: TabPaneConfig = {
+  title: '样式',
+  labelWidth: '80px',
+  items: [
+    {
+      name: 'style',
+      items: [
+        {
+          type: 'fieldset',
+          legend: '位置',
+          items: [
+            {
+              name: 'position',
+              type: 'checkbox',
+              activeValue: 'fixed',
+              inactiveValue: 'absolute',
+              defaultValue: 'absolute',
+              text: '固定定位',
+            },
+            {
+              name: 'left',
+              text: 'left',
+            },
+            {
+              name: 'top',
+              text: 'top',
+              disabled: (vm: FormState, { model }: any) =>
+                model.position === 'fixed' && model._magic_position === 'fixedBottom',
+            },
+            {
+              name: 'right',
+              text: 'right',
+            },
+            {
+              name: 'bottom',
+              text: 'bottom',
+              disabled: (vm: FormState, { model }: any) =>
+                model.position === 'fixed' && model._magic_position === 'fixedTop',
+            },
+          ],
+        },
+        {
+          type: 'fieldset',
+          legend: '盒子',
+          items: [
+            {
+              name: 'width',
+              text: '宽度',
+            },
+            {
+              name: 'height',
+              text: '高度',
+            },
+          ],
+        },
+        {
+          type: 'fieldset',
+          legend: '边框',
+          items: [
+            {
+              name: 'borderWidth',
+              text: '宽度',
+              defaultValue: '0',
+            },
+            {
+              name: 'borderColor',
+              text: '颜色',
+              type: 'colorPicker',
+            },
+            {
+              name: 'borderStyle',
+              text: '样式',
+              type: 'select',
+              defaultValue: 'none',
+              options: [
+                { text: 'none', value: 'none' },
+                { text: 'hidden', value: 'hidden' },
+                { text: 'dotted', value: 'dotted' },
+                { text: 'dashed', value: 'dashed' },
+                { text: 'solid', value: 'solid' },
+                { text: 'double', value: 'double' },
+                { text: 'groove', value: 'groove' },
+                { text: 'ridge', value: 'ridge' },
+                { text: 'inset', value: 'inset' },
+                { text: 'outset', value: 'outset' },
+              ],
+            },
+          ],
+        },
+        {
+          type: 'fieldset',
+          legend: '背景',
+          items: [
+            {
+              name: 'backgroundImage',
+              text: '背景图',
+            },
+            {
+              name: 'backgroundColor',
+              text: '背景颜色',
+              type: 'colorPicker',
+            },
+            {
+              name: 'backgroundRepeat',
+              text: '背景图重复',
+              type: 'select',
+              defaultValue: 'no-repeat',
+              options: [
+                { text: 'repeat', value: 'repeat' },
+                { text: 'repeat-x', value: 'repeat-x' },
+                { text: 'repeat-y', value: 'repeat-y' },
+                { text: 'no-repeat', value: 'no-repeat' },
+                { text: 'inherit', value: 'inherit' },
+              ],
+            },
+            {
+              name: 'backgroundSize',
+              text: '背景图大小',
+              defaultValue: '100% 100%',
+            },
+          ],
+        },
+        {
+          type: 'fieldset',
+          legend: '字体',
+          items: [
+            {
+              name: 'color',
+              text: '颜色',
+              type: 'colorPicker',
+            },
+            {
+              name: 'fontSize',
+              text: '大小',
+            },
+            {
+              name: 'fontWeight',
+              text: '粗细',
+            },
+          ],
+        },
+        {
+          type: 'fieldset',
+          legend: '变形',
+          name: 'transform',
+          items: [
+            {
+              name: 'rotate',
+              text: '旋转角度',
+            },
+            {
+              name: 'scale',
+              text: '缩放',
+            },
+          ],
+        },
+      ],
+    },
+  ],
+};
+
+export const eventTabConfig: TabPaneConfig = {
+  title: '事件',
+  items: [
+    {
+      name: 'events',
+      type: 'event-select',
+    },
+  ],
+};
+
+export const advancedTabConfig: TabPaneConfig = {
+  title: '高级',
+  lazy: true,
+  items: [
+    {
+      name: 'created',
+      text: 'created',
+      labelWidth: '100px',
+      type: 'code-select',
+    },
+    {
+      name: 'mounted',
+      text: 'mounted',
+      labelWidth: '100px',
+      type: 'code-select',
+    },
+  ],
+};
+
+export const displayTabConfig: TabPaneConfig = {
+  title: '显示条件',
+  display: (vm: FormState, { model }: any) => model.type !== 'page',
+  items: [
+    {
+      type: 'groupList',
+      name: 'displayConds',
+      items: [
+        {
+          type: 'table',
+          name: 'cond',
+          items: [
+            {
+              type: 'data-source-field-select',
+              name: 'field',
+              label: '字段',
+            },
+            {
+              type: 'select',
+              options: (mForm: FormState | undefined, { model }: any) => {
+                const [id, field] = model.field;
+
+                const ds = dataSourceService.getDataSourceById(id);
+
+                const type = ds?.fields.find((f) => f.name === field)?.type;
+
+                if (type === 'array') {
+                  return arrayOptions;
+                }
+
+                if (type === 'boolean') {
+                  return [
+                    { text: '是', value: 'is' },
+                    { text: '不是', value: 'not' },
+                  ];
+                }
+
+                if (type === 'number') {
+                  return [...eqOptions, ...numberOptions];
+                }
+
+                if (type === 'string') {
+                  return [...arrayOptions, ...eqOptions];
+                }
+
+                return [...arrayOptions, ...eqOptions, ...numberOptions];
+              },
+              label: '条件',
+              name: 'op',
+            },
+            {
+              label: '值',
+              items: [
+                {
+                  name: 'value',
+                  display: (vm: FormState, { model }: any) =>
+                    !['between', 'not_between', 'is', 'not'].includes(model.op),
+                },
+                {
+                  name: 'value',
+                  type: 'select',
+                  options: [
+                    { text: 'true', value: true },
+                    { text: 'false', value: false },
+                  ],
+                  display: (vm: FormState, { model }: any) => ['is', 'not'].includes(model.op),
+                },
+                {
+                  name: 'range',
+                  type: 'number-range',
+                  display: (vm: FormState, { model }: any) =>
+                    ['between', 'not_between'].includes(model.op) && !['is', 'not'].includes(model.op),
+                },
+              ],
+            },
+          ],
+        },
+      ],
+    },
+  ],
+};
 
 /**
  * 统一为组件属性表单加上事件、高级、样式配置
@@ -50,194 +343,10 @@ export const fillConfig = (config: FormConfig = []) => [
           ...config,
         ],
       },
-      {
-        title: '样式',
-        labelWidth: '80px',
-        items: [
-          {
-            name: 'style',
-            items: [
-              {
-                type: 'fieldset',
-                legend: '位置',
-                items: [
-                  {
-                    name: 'position',
-                    type: 'checkbox',
-                    activeValue: 'fixed',
-                    inactiveValue: 'absolute',
-                    defaultValue: 'absolute',
-                    text: '固定定位',
-                  },
-                  {
-                    name: 'left',
-                    text: 'left',
-                  },
-                  {
-                    name: 'top',
-                    text: 'top',
-                    disabled: (vm: FormState, { model }: any) =>
-                      model.position === 'fixed' && model._magic_position === 'fixedBottom',
-                  },
-                  {
-                    name: 'right',
-                    text: 'right',
-                  },
-                  {
-                    name: 'bottom',
-                    text: 'bottom',
-                    disabled: (vm: FormState, { model }: any) =>
-                      model.position === 'fixed' && model._magic_position === 'fixedTop',
-                  },
-                ],
-              },
-              {
-                type: 'fieldset',
-                legend: '盒子',
-                items: [
-                  {
-                    name: 'width',
-                    text: '宽度',
-                  },
-                  {
-                    name: 'height',
-                    text: '高度',
-                  },
-                ],
-              },
-              {
-                type: 'fieldset',
-                legend: '边框',
-                items: [
-                  {
-                    name: 'borderWidth',
-                    text: '宽度',
-                    defaultValue: '0',
-                  },
-                  {
-                    name: 'borderColor',
-                    text: '颜色',
-                    type: 'colorPicker',
-                  },
-                  {
-                    name: 'borderStyle',
-                    text: '样式',
-                    type: 'select',
-                    defaultValue: 'none',
-                    options: [
-                      { text: 'none', value: 'none' },
-                      { text: 'hidden', value: 'hidden' },
-                      { text: 'dotted', value: 'dotted' },
-                      { text: 'dashed', value: 'dashed' },
-                      { text: 'solid', value: 'solid' },
-                      { text: 'double', value: 'double' },
-                      { text: 'groove', value: 'groove' },
-                      { text: 'ridge', value: 'ridge' },
-                      { text: 'inset', value: 'inset' },
-                      { text: 'outset', value: 'outset' },
-                    ],
-                  },
-                ],
-              },
-              {
-                type: 'fieldset',
-                legend: '背景',
-                items: [
-                  {
-                    name: 'backgroundImage',
-                    text: '背景图',
-                  },
-                  {
-                    name: 'backgroundColor',
-                    text: '背景颜色',
-                    type: 'colorPicker',
-                  },
-                  {
-                    name: 'backgroundRepeat',
-                    text: '背景图重复',
-                    type: 'select',
-                    defaultValue: 'no-repeat',
-                    options: [
-                      { text: 'repeat', value: 'repeat' },
-                      { text: 'repeat-x', value: 'repeat-x' },
-                      { text: 'repeat-y', value: 'repeat-y' },
-                      { text: 'no-repeat', value: 'no-repeat' },
-                      { text: 'inherit', value: 'inherit' },
-                    ],
-                  },
-                  {
-                    name: 'backgroundSize',
-                    text: '背景图大小',
-                    defaultValue: '100% 100%',
-                  },
-                ],
-              },
-              {
-                type: 'fieldset',
-                legend: '字体',
-                items: [
-                  {
-                    name: 'color',
-                    text: '颜色',
-                    type: 'colorPicker',
-                  },
-                  {
-                    name: 'fontSize',
-                    text: '大小',
-                  },
-                  {
-                    name: 'fontWeight',
-                    text: '粗细',
-                  },
-                ],
-              },
-              {
-                type: 'fieldset',
-                legend: '变形',
-                name: 'transform',
-                items: [
-                  {
-                    name: 'rotate',
-                    text: '旋转角度',
-                  },
-                  {
-                    name: 'scale',
-                    text: '缩放',
-                  },
-                ],
-              },
-            ],
-          },
-        ],
-      },
-      {
-        title: '事件',
-        items: [
-          {
-            name: 'events',
-            type: 'event-select',
-            labelWidth: 0,
-          },
-        ],
-      },
-      {
-        title: '高级',
-        lazy: true,
-        items: [
-          {
-            name: 'created',
-            text: 'created',
-            labelWidth: '100px',
-            type: 'code-select',
-          },
-          {
-            name: 'mounted',
-            text: 'mounted',
-            labelWidth: '100px',
-            type: 'code-select',
-          },
-        ],
-      },
+      { ...styleTabConfig },
+      { ...eventTabConfig },
+      { ...advancedTabConfig },
+      { ...displayTabConfig },
     ],
   },
 ];

package/src/utils/undo-redo.ts

@@ -23,7 +23,7 @@ export class UndoRedo<T = any> {
   private listCursor: number;
   private listMaxSize: number;
 
-  constructor(listMaxSize = 200) {
+  constructor(listMaxSize = 20) {
     const minListMaxSize = 2;
     this.elementList = [];
     this.listCursor = 0;

package/types/Editor.vue.d.ts

@@ -9,6 +9,10 @@ declare const _default: import("vue").DefineComponent<{
         type: import("vue").PropType<import("./type").ComponentGroup[]>;
         default: () => never[];
     };
+    datasourceList: {
+        type: import("vue").PropType<import("./type").DatasourceTypeOption[]>;
+        default: () => never[];
+    };
     sidebar: {
         type: import("vue").PropType<import("./type").SideBarData>;
     };
@@ -37,7 +41,7 @@ declare const _default: import("vue").DefineComponent<{
         default: () => {};
     };
     propsValues: {
-        type: import("vue").PropType<Record<string, import("@tmagic/schema").MNode>>;
+        type: import("vue").PropType<Record<string, Partial<import("@tmagic/schema").MNode>>>;
         default: () => {};
     };
     eventMethodList: {
@@ -47,7 +51,11 @@ declare const _default: import("vue").DefineComponent<{
         }>>;
         default: () => {};
     };
-    dataScourceConfigs: {
+    datasourceValues: {
+        type: import("vue").PropType<Record<string, Partial<import("@tmagic/schema").DataSourceSchema>>>;
+        default: () => {};
+    };
+    datasourceConfigs: {
         type: import("vue").PropType<Record<string, import("@tmagic/form").FormConfig>>;
         default: () => {};
     };
@@ -90,6 +98,9 @@ declare const _default: import("vue").DefineComponent<{
     disabledDragStart: {
         type: BooleanConstructor;
     };
+    extendFormState: {
+        type: import("vue").PropType<(state: import("@tmagic/form").FormState) => Record<string, any> | Promise<Record<string, any>>>;
+    };
 }, Services, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("update:modelValue" | "props-panel-mounted")[], "update:modelValue" | "props-panel-mounted", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
     modelValue: {
         type: import("vue").PropType<import("@tmagic/schema").MApp>;
@@ -100,6 +111,10 @@ declare const _default: import("vue").DefineComponent<{
         type: import("vue").PropType<import("./type").ComponentGroup[]>;
         default: () => never[];
     };
+    datasourceList: {
+        type: import("vue").PropType<import("./type").DatasourceTypeOption[]>;
+        default: () => never[];
+    };
     sidebar: {
         type: import("vue").PropType<import("./type").SideBarData>;
     };
@@ -128,7 +143,7 @@ declare const _default: import("vue").DefineComponent<{
         default: () => {};
     };
     propsValues: {
-        type: import("vue").PropType<Record<string, import("@tmagic/schema").MNode>>;
+        type: import("vue").PropType<Record<string, Partial<import("@tmagic/schema").MNode>>>;
         default: () => {};
     };
     eventMethodList: {
@@ -138,7 +153,11 @@ declare const _default: import("vue").DefineComponent<{
         }>>;
         default: () => {};
     };
-    dataScourceConfigs: {
+    datasourceValues: {
+        type: import("vue").PropType<Record<string, Partial<import("@tmagic/schema").DataSourceSchema>>>;
+        default: () => {};
+    };
+    datasourceConfigs: {
         type: import("vue").PropType<Record<string, import("@tmagic/form").FormConfig>>;
         default: () => {};
     };
@@ -181,6 +200,9 @@ declare const _default: import("vue").DefineComponent<{
     disabledDragStart: {
         type: BooleanConstructor;
     };
+    extendFormState: {
+        type: import("vue").PropType<(state: import("@tmagic/form").FormState) => Record<string, any> | Promise<Record<string, any>>>;
+    };
 }>> & {
     "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
     "onProps-panel-mounted"?: ((...args: any[]) => any) | undefined;
@@ -192,13 +214,15 @@ declare const _default: import("vue").DefineComponent<{
     layerContentMenu: (import("./type").MenuButton | import("./type").MenuComponent)[];
     stageContentMenu: (import("./type").MenuButton | import("./type").MenuComponent)[];
     componentGroupList: import("./type").ComponentGroup[];
+    datasourceList: import("./type").DatasourceTypeOption[];
     propsConfigs: Record<string, import("@tmagic/form").FormConfig>;
-    propsValues: Record<string, import("@tmagic/schema").MNode>;
+    propsValues: Record<string, Partial<import("@tmagic/schema").MNode>>;
     eventMethodList: Record<string, {
         events: import("@tmagic/core").EventOption[];
         methods: import("@tmagic/core").EventOption[];
     }>;
-    dataScourceConfigs: Record<string, import("@tmagic/form").FormConfig>;
+    datasourceValues: Record<string, Partial<import("@tmagic/schema").DataSourceSchema>>;
+    datasourceConfigs: Record<string, import("@tmagic/form").FormConfig>;
     canSelect: (el: HTMLElement) => boolean | Promise<boolean>;
     isContainer: (el: HTMLElement) => boolean | Promise<boolean>;
     containerHighlightClassName: string;

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

@@ -0,0 +1,23 @@
+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;
+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/components/CodeParams.vue.d.ts

@@ -0,0 +1,26 @@
+import type { CodeParamStatement } from '../type';
+declare const _default: import("vue").DefineComponent<__VLS_TypePropsToRuntimeProps<{
+    model: any;
+    size?: "default" | "small" | "large" | undefined;
+    disabled?: boolean | undefined;
+    name: string;
+    paramsConfig: CodeParamStatement[];
+}>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "change"[], "change", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<__VLS_TypePropsToRuntimeProps<{
+    model: any;
+    size?: "default" | "small" | "large" | undefined;
+    disabled?: boolean | undefined;
+    name: string;
+    paramsConfig: CodeParamStatement[];
+}>>> & {
+    onChange?: ((...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/components/ContentMenu.vue.d.ts

@@ -10,15 +10,15 @@ declare const _default: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_T
     hide: () => void;
     show: (e: MouseEvent) => void;
     contains: (el: HTMLElement) => any;
-}, 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;