@tmagic/editor 1.7.8-beta.1 → 1.7.8-beta.3

package/src/fields/StyleSetter/pro/Layout.vue

@@ -12,8 +12,8 @@
 <script lang="ts" setup>
 import { markRaw } from 'vue';
 
-import type { ContainerChangeEventData, FormState } from '@tmagic/form';
-import { MContainer } from '@tmagic/form';
+import type { ChildConfig, ContainerChangeEventData } from '@tmagic/form';
+import { defineFormItem, MContainer } from '@tmagic/form';
 import type { StyleSchema } from '@tmagic/schema';
 
 import Box from '../components/Box.vue';
@@ -42,7 +42,7 @@ const emit = defineEmits<{
   change: [v: string | StyleSchema, eventData: ContainerChangeEventData];
 }>();
 
-const config = {
+const config = defineFormItem({
   items: [
     {
       name: 'display',
@@ -74,7 +74,7 @@ const config = {
           tooltip: '垂直方向 起点在下沿 column-reverse',
         },
       ],
-      display: (mForm: FormState, { model }: { model: Record<any, any> }) => model.display === 'flex',
+      display: (_mForm, { model }: { model: Record<any, any> }) => model.display === 'flex',
     },
     {
       name: 'justifyContent',
@@ -89,7 +89,7 @@ const config = {
         { value: 'space-between', icon: markRaw(JustifyContentSpaceBetween), tooltip: '两端对齐 space-between' },
         { value: 'space-around', icon: markRaw(JustifyContentSpaceAround), tooltip: '横向平分 space-around' },
       ],
-      display: (mForm: FormState, { model }: { model: Record<any, any> }) => model.display === 'flex',
+      display: (_mForm, { model }: { model: Record<any, any> }) => model.display === 'flex',
     },
     {
       name: 'alignItems',
@@ -104,7 +104,7 @@ const config = {
         { value: 'space-between', icon: markRaw(JustifyContentSpaceBetween), tooltip: '两端对齐 space-between' },
         { value: 'space-around', icon: markRaw(JustifyContentSpaceAround), tooltip: '横向平分 space-around' },
       ],
-      display: (mForm: FormState, { model }: { model: Record<any, any> }) => model.display === 'flex',
+      display: (_mForm, { model }: { model: Record<any, any> }) => model.display === 'flex',
     },
     {
       name: 'flexWrap',
@@ -117,7 +117,7 @@ const config = {
         { value: 'wrap', text: '正换行', tooltip: '第一行在上方 wrap' },
         { value: 'wrap-reverse', text: '逆换行', tooltip: '第一行在下方 wrap-reverse' },
       ],
-      display: (mForm: FormState, { model }: { model: Record<any, any> }) => model.display === 'flex',
+      display: (_mForm, { model }: { model: Record<any, any> }) => model.display === 'flex',
     },
     {
       type: 'row',
@@ -180,7 +180,7 @@ const config = {
       ],
     },
   ],
-};
+}) as ChildConfig;
 
 const change = (value: string | StyleSchema, eventData: ContainerChangeEventData) => {
   emit('change', value, eventData);

package/src/fields/StyleSetter/pro/Position.vue

@@ -3,7 +3,7 @@
 </template>
 
 <script lang="ts" setup>
-import { ContainerChangeEventData, MContainer } from '@tmagic/form';
+import { type ContainerChangeEventData, defineFormItem, type MContainer } from '@tmagic/form';
 import type { StyleSchema } from '@tmagic/schema';
 
 const props = defineProps<{
@@ -24,7 +24,7 @@ const positionText: Record<string, string> = {
   sticky: '粘性定位',
 };
 
-const config = {
+const config = defineFormItem({
   items: [
     {
       name: 'position',
@@ -95,7 +95,7 @@ const config = {
       },
     },
   ],
-};
+});
 
 const change = (value: string | StyleSchema, eventData: ContainerChangeEventData) => {
   emit('change', value, eventData);

package/src/services/props.ts

@@ -102,9 +102,11 @@ class Props extends BaseService {
   }
 
   public async setPropsConfig(type: string, config: FormConfig | PropsFormConfigFunction) {
-    let c = config;
+    let c: FormConfig;
     if (typeof config === 'function') {
       c = config({ editorService });
+    } else {
+      c = config;
     }
 
     this.state.propsConfigMap[toLine(type)] = await this.fillConfig(Array.isArray(c) ? c : [c]);

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

@@ -1,6 +1,6 @@
-import { defineFormConfig } from '@tmagic/form';
+import { defineFormConfig, type FormConfig } from '@tmagic/form';
 
-export default () =>
+export default (): FormConfig =>
   defineFormConfig([
     {
       name: 'id',

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

@@ -1,83 +1,81 @@
-import { DataSchema, DataSourceFieldType, DataSourceSchema } from '@tmagic/core';
-import { CascaderOption, FormConfig, FormState } from '@tmagic/form';
+import type { DataSchema, DataSourceFieldType, DataSourceSchema } from '@tmagic/core';
+import { type CascaderOption, defineFormItem, type FormConfig } from '@tmagic/form';
 import { dataSourceTemplateRegExp, getKeysArray, isNumber } from '@tmagic/utils';
 
 import BaseFormConfig from './formConfigs/base';
 import HttpFormConfig from './formConfigs/http';
 
-const fillConfig = (config: FormConfig): FormConfig => [
-  ...BaseFormConfig(),
-  ...config,
-  {
-    type: 'tab',
-    items: [
-      {
-        title: '数据定义',
-        items: [
-          {
-            name: 'fields',
-            type: 'data-source-fields',
-            defaultValue: () => [],
-          },
-        ],
-      },
-      {
-        title: '方法定义',
-        items: [
-          {
-            name: 'methods',
-            type: 'data-source-methods',
-            defaultValue: () => [],
-          },
-        ],
-      },
-      {
-        title: '事件配置',
-        items: [
-          {
-            name: 'events',
-            src: 'datasource',
-            type: 'event-select',
-          },
-        ],
-      },
-      {
-        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,
-            autosize: { minRows: 10, maxRows: 30 },
-          },
-        ],
-      },
-      {
-        title: '响应数据裁剪',
-        display: (_formState: FormState, { model }: any) => model.type === 'http',
-        items: [
-          {
-            name: 'afterResponse',
-            type: 'vs-code',
-            parse: true,
-            autosize: { minRows: 10, maxRows: 30 },
-          },
-        ],
-      },
-    ],
-  },
-];
+const dataSourceFormConfig = defineFormItem({
+  type: 'tab',
+  items: [
+    {
+      title: '数据定义',
+      items: [
+        {
+          name: 'fields',
+          type: 'data-source-fields',
+          defaultValue: () => [],
+        },
+      ],
+    },
+    {
+      title: '方法定义',
+      items: [
+        {
+          name: 'methods',
+          type: 'data-source-methods',
+          defaultValue: () => [],
+        },
+      ],
+    },
+    {
+      title: '事件配置',
+      items: [
+        {
+          name: 'events',
+          src: 'datasource',
+          type: 'event-select',
+        },
+      ],
+    },
+    {
+      title: 'mock数据',
+      items: [
+        {
+          name: 'mocks',
+          type: 'data-source-mocks',
+          defaultValue: () => [],
+        },
+      ],
+    },
+    {
+      title: '请求参数裁剪',
+      display: (_formState, { model }) => model.type === 'http',
+      items: [
+        {
+          name: 'beforeRequest',
+          type: 'vs-code',
+          parse: true,
+          autosize: { minRows: 10, maxRows: 30 },
+        },
+      ],
+    },
+    {
+      title: '响应数据裁剪',
+      display: (_formStat, { model }) => model.type === 'http',
+      items: [
+        {
+          name: 'afterResponse',
+          type: 'vs-code',
+          parse: true,
+          autosize: { minRows: 10, maxRows: 30 },
+        },
+      ],
+    },
+  ],
+});
+
+const fillConfig = (config: FormConfig): FormConfig => [...BaseFormConfig(), ...config, dataSourceFormConfig];
 
 export const getFormConfig = (type: string, configs: Record<string, FormConfig>): FormConfig => {
   switch (type) {

package/src/utils/props.ts

@@ -24,7 +24,7 @@ import {
   NODE_DISABLE_DATA_SOURCE_KEY,
 } from '@tmagic/core';
 import { tMagicMessage } from '@tmagic/design';
-import type { FormConfig, FormState, TabConfig, TabPaneConfig } from '@tmagic/form';
+import type { ChildConfig, DisplayCondsConfig, FormConfig, TabConfig, TabPaneConfig } from '@tmagic/form';
 
 export const arrayOptions = [
   { text: '包含', value: 'include' },
@@ -107,7 +107,7 @@ export const styleTabConfig: TabPaneConfig = {
             'borderStyle',
             'borderColor',
           ],
-        },
+        } as unknown as ChildConfig,
       ],
     },
   ],
@@ -168,9 +168,9 @@ export const advancedTabConfig: TabPaneConfig = {
   ],
 };
 
-export const displayTabConfig: TabPaneConfig = {
+export const displayTabConfig: TabPaneConfig<DisplayCondsConfig> = {
   title: '显示条件',
-  display: (_state: FormState, { model }: any) => model.type !== 'page',
+  display: (_state, { model }) => model.type !== 'page',
   items: [
     {
       name: NODE_CONDS_RESULT_KEY,
@@ -209,7 +209,7 @@ export const fillConfig = (
   const propsConfig: FormConfig = [];
 
   // 组件类型，必须要有
-  if (!config.find((item) => item.name === 'type')) {
+  if (!config.find((item) => 'name' in item && item.name === 'type')) {
     propsConfig.push({
       text: 'type',
       name: 'type',
@@ -217,7 +217,7 @@ export const fillConfig = (
     });
   }
 
-  if (!config.find((item) => item.name === 'id')) {
+  if (!config.find((item) => 'name' in item && item.name === 'id')) {
     // 组件id，必须要有
     propsConfig.push({
       name: 'id',
@@ -241,14 +241,16 @@ export const fillConfig = (
     });
   }
 
-  if (!config.find((item) => item.name === 'name')) {
+  if (!config.find((item) => 'name' in item && item.name === 'name')) {
     propsConfig.push({
       name: 'name',
       text: '组件名称',
     });
   }
 
-  const noCodeAdvancedTabItems = advancedTabConfig.items.filter((item) => item.type !== 'code-select');
+  const noCodeAdvancedTabItems = advancedTabConfig.items.filter(
+    (item) => 'type' in item && item.type !== 'code-select',
+  );
 
   if (noCodeAdvancedTabItems.length > 0 && disabledCodeBlock) {
     advancedTabConfig.items = noCodeAdvancedTabItems;