@tmagic/editor 1.3.0-alpha.16 → 1.3.0-alpha.17

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/stage.ts

@@ -1,5 +1,6 @@
 import { computed } from 'vue';
 
+import type { MNode } from '@tmagic/schema';
 import StageCore, { GuidesType, RemoveEventData, SortEventData, UpdateEventData } from '@tmagic/stage';
 
 import editorService from '@editor/services/editor';
@@ -74,11 +75,8 @@ export const useStage = (stageOptions: StageOptions) => {
   });
 
   stage.on('remove', (ev: RemoveEventData) => {
-    editorService.remove(
-      ev.data.map(({ el }) => ({
-        id: el.id,
-      })),
-    );
+    const nodes = ev.data.map(({ el }) => editorService.getNodeById(el.id));
+    editorService.remove(nodes.filter((node) => Boolean(node)) as MNode[]);
   });
 
   stage.on('select-parent', () => {

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

@@ -1,30 +1,15 @@
-declare const _default: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
-    config: {
-        language?: string | undefined;
-        options?: Object | undefined;
-        height?: string | undefined;
-    };
-    model: any;
-    name: string;
-    prop: string;
-    lastValues?: any;
-    disabled?: boolean | undefined;
-    size?: "default" | "small" | "large" | undefined;
-}>, {
+import type { FieldProps } from '@tmagic/form';
+declare const _default: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<FieldProps<{
+    language?: string | undefined;
+    options?: Object | undefined;
+    height?: string | undefined;
+}>>, {
     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: {
-        language?: string | undefined;
-        options?: Object | undefined;
-        height?: string | undefined;
-    };
-    model: any;
-    name: string;
-    prop: string;
-    lastValues?: any;
-    disabled?: boolean | undefined;
-    size?: "default" | "small" | "large" | undefined;
-}>, {
+}>, {}, 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<FieldProps<{
+    language?: string | undefined;
+    options?: Object | undefined;
+    height?: string | undefined;
+}>>, {
     disabled: boolean;
 }>>> & {
     onChange?: ((...args: any[]) => any) | undefined;

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

@@ -1,26 +1,17 @@
-declare const _default: import("vue").DefineComponent<__VLS_TypePropsToRuntimeProps<{
-    config: {
-        type: "code-link";
-        name: string;
-        text?: string | undefined;
-        formTitle?: string | undefined;
-        codeOptions?: Object | undefined;
-    };
-    model: any;
+import type { FieldProps } from '@tmagic/form';
+declare const _default: import("vue").DefineComponent<__VLS_TypePropsToRuntimeProps<FieldProps<{
+    type: "code-link";
     name: string;
-    prop: string;
-}>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "change"[], "change", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<__VLS_TypePropsToRuntimeProps<{
-    config: {
-        type: "code-link";
-        name: string;
-        text?: string | undefined;
-        formTitle?: string | undefined;
-        codeOptions?: Object | undefined;
-    };
-    model: any;
+    text?: string | undefined;
+    formTitle?: string | undefined;
+    codeOptions?: Object | undefined;
+}>>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "change"[], "change", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<__VLS_TypePropsToRuntimeProps<FieldProps<{
+    type: "code-link";
     name: string;
-    prop: string;
-}>>> & {
+    text?: string | undefined;
+    formTitle?: string | undefined;
+    codeOptions?: Object | undefined;
+}>>>> & {
     onChange?: ((...args: any[]) => any) | undefined;
 }, {}, {}>;
 export default _default;

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

@@ -1,20 +1,9 @@
-declare const _default: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
-    config: {
-        className?: string | undefined;
-    };
-    model: any;
-    prop: string;
-    name: string;
-    size: "default" | "small" | "large";
-}>, {}>, {}, 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: {
-        className?: string | undefined;
-    };
-    model: any;
-    prop: string;
-    name: string;
-    size: "default" | "small" | "large";
-}>, {}>>> & {
+import type { FieldProps } from '@tmagic/form';
+declare const _default: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<FieldProps<{
+    className?: string | undefined;
+}>>, {}>, {}, 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<FieldProps<{
+    className?: string | undefined;
+}>>, {}>>> & {
     onChange?: ((...args: any[]) => any) | undefined;
 }, {}, {}>;
 export default _default;

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

@@ -1,23 +1,8 @@
+import { FieldProps } from '@tmagic/form';
 import type { CodeSelectColConfig } from '../type';
-declare const _default: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
-    config: CodeSelectColConfig;
-    model: any;
-    prop: string;
-    name: string;
-    lastValues?: any;
-    disabled?: boolean | undefined;
-    size: "default" | "small" | "large";
-}>, {
+declare const _default: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<FieldProps<CodeSelectColConfig>>, {
     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: CodeSelectColConfig;
-    model: any;
-    prop: string;
-    name: string;
-    lastValues?: any;
-    disabled?: boolean | undefined;
-    size: "default" | "small" | "large";
-}>, {
+}>, {}, 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<FieldProps<CodeSelectColConfig>>, {
     disabled: boolean;
 }>>> & {
     onChange?: ((...args: any[]) => any) | undefined;

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

@@ -0,0 +1,29 @@
+import type { FieldProps } from '@tmagic/form';
+import type { DataSourceFieldSelectConfig } from '../type';
+declare const _default: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<FieldProps<DataSourceFieldSelectConfig>>, {
+    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<FieldProps<DataSourceFieldSelectConfig>>, {
+    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 ? __VLS_Prettify<P[K] & {
+        default: D[K];
+    }> : P[K];
+};
+type __VLS_Prettify<T> = {
+    [K in keyof T]: T[K];
+} & {};