amis-editor 4.2.0-beta.0 → 5.1.8

package/src/plugin/Form/Combo.tsx

@@ -19,6 +19,7 @@ import React from 'react';
 import {diff, JSONPipeIn} from '../../../src/util';
 import {JSONPipeOut} from '../../util';
 import {mockValue} from '../../mocker';
+import {RendererAction, RendererEvent} from '../../event-action';
 import {setVariable} from 'amis-core';
 
 export class ComboControlPlugin extends BasePlugin {
@@ -75,6 +76,81 @@ export class ComboControlPlugin extends BasePlugin {
     ]
   };
 
+  // 事件定义
+  events: RendererEvent[] = [
+    {
+      eventName: 'add',
+      eventLabel: '添加',
+      description: '添加组合项时触发',
+      dataSchema: [
+        {
+          type: 'object',
+          properties: {
+            'event.data.value': {
+              type: 'object',
+              title: '当前组合项的值'
+            }
+          }
+        }
+      ]
+    },
+    {
+      eventName: 'delete',
+      eventLabel: '删除',
+      description: '删除组合项',
+      dataSchema: [
+        {
+          type: 'object',
+          properties: {
+            'event.data.key': {
+              type: 'string',
+              title: '删除项的索引'
+            },
+            'event.data.value': {
+              type: 'string',
+              title: '现有组合项的值'
+            }
+          }
+        }
+      ]
+    },
+    {
+      eventName: 'tabsChange',
+      eventLabel: '切换tab',
+      description: '当设置 tabsMode 为 true 时，切换选项卡时触发',
+      dataSchema: [
+        {
+          type: 'object',
+          properties: {
+            'event.data.key': {
+              type: 'string',
+              title: '选项卡索引'
+            }
+          }
+        }
+      ]
+    }
+  ];
+
+  // 动作定义
+  actions: RendererAction[] = [
+    {
+      actionType: 'clear',
+      actionLabel: '清空',
+      description: '清除选中值'
+    },
+    {
+      actionType: 'reset',
+      actionLabel: '重置',
+      description: '将值重置为resetValue，若没有配置resetValue，则清空'
+    },
+    {
+      actionType: 'setValue',
+      actionLabel: '赋值',
+      description: '触发组件数据更新'
+    }
+  ];
+
   panelTitle = '组合输入';
   panelBodyCreator = (context: BaseEventContext) => {
     return [
@@ -191,15 +267,12 @@ export class ComboControlPlugin extends BasePlugin {
         }
       },
 
-      {
+      getSchemaTpl('switch', {
         name: 'typeSwitchable',
         visibleOn: 'this.conditions',
         label: '是否可切换类型',
-        type: 'switch',
-        mode: 'inline',
-        className: 'block',
         pipeIn: defaultValue(true)
-      },
+      }),
 
       {
         name: 'items',
@@ -245,41 +318,32 @@ export class ComboControlPlugin extends BasePlugin {
         visibleOn: 'typeof this.value !== "undefined"'
       },
 
-      {
+      getSchemaTpl('switch', {
         label: '多行模式',
         name: 'multiLine',
-        type: 'switch',
-        mode: 'inline',
-        className: 'w-full',
         value: false,
-        option: '即是否要换行'
-      },
+        description: '即是否要换行'
+      }),
 
       getSchemaTpl('multiple'),
       getSchemaTpl('joinValues'),
       getSchemaTpl('delimiter'),
 
-      {
-        type: 'switch',
+      getSchemaTpl('switch', {
         name: 'flat',
-        mode: 'inline',
-        className: 'w-full',
         label: '是否将值打平',
         visibleOn:
           'Array.isArray(data.items) && data.items.length === 1 && data.multiple',
         description:
           '默认数组内的数据结构为对象，如果只有一个表单项，可以配置将值打平，那么数组内放置的就是那个表单项的值'
-      },
+      }),
 
-      {
+      getSchemaTpl('switch', {
         label: '是否可新增',
-        type: 'switch',
         name: 'addable',
-        mode: 'inline',
-        className: 'w-full',
         visibleOn: 'this.multiple',
         pipeIn: defaultValue(true)
-      },
+      }),
 
       {
         type: 'textarea',
@@ -298,15 +362,12 @@ export class ComboControlPlugin extends BasePlugin {
         pipeIn: defaultValue('新增')
       },
 
-      {
+      getSchemaTpl('switch', {
         label: '是否可删除',
-        type: 'switch',
         name: 'removable',
-        mode: 'inline',
-        className: 'w-full',
         visibleOn: 'this.multiple',
         pipeIn: defaultValue(true)
-      },
+      }),
 
       getSchemaTpl('api', {
         name: 'deleteApi',
@@ -322,14 +383,11 @@ export class ComboControlPlugin extends BasePlugin {
         pipeIn: defaultValue('确认要删除')
       },
 
-      {
+      getSchemaTpl('switch', {
         name: 'draggable',
         label: '是否可拖拽排序',
-        type: 'switch',
-        visibleOn: 'this.multiple',
-        mode: 'inline',
-        className: 'w-full'
-      },
+        visibleOn: 'this.multiple'
+      }),
 
       {
         label: '拖拽排序的提示文字',
@@ -339,14 +397,11 @@ export class ComboControlPlugin extends BasePlugin {
         pipeIn: defaultValue('可通过拖动每行中的【交换】按钮进行顺序调整')
       },
 
-      {
+      getSchemaTpl('switch', {
         name: 'noBorder',
         label: '去掉边框',
-        type: 'switch',
-        visibleOn: 'this.multiLine',
-        mode: 'inline',
-        className: 'w-full'
-      },
+        visibleOn: 'this.multiLine'
+      }),
 
       {
         name: 'minLength',
@@ -387,23 +442,17 @@ export class ComboControlPlugin extends BasePlugin {
         ]
       },
 
-      {
+      getSchemaTpl('switch', {
         name: 'canAccessSuperData',
         label: '是否自动填充父级同名变量',
-        type: 'switch',
-        pipeIn: defaultValue(false),
-        mode: 'inline',
-        className: 'w-full'
-      },
+        pipeIn: defaultValue(false)
+      }),
 
-      {
+      getSchemaTpl('switch', {
         name: 'tabsMode',
         label: '采用 Tabs 展示方式',
-        type: 'switch',
-        mode: 'inline',
-        className: 'w-full',
         pipeIn: defaultValue(false)
-      },
+      }),
 
       {
         name: 'tabsStyle',
@@ -437,25 +486,19 @@ export class ComboControlPlugin extends BasePlugin {
         className: 'w-full'
       },
 
-      {
+      getSchemaTpl('switch', {
         name: 'lazyLoad',
         label: '懒加载',
-        type: 'switch',
-        mode: 'inline',
-        className: 'w-full',
         pipeIn: defaultValue(false),
         description: '如果数据比较多，比较卡顿时，可开启此配置项'
-      },
+      }),
 
-      {
+      getSchemaTpl('switch', {
         name: 'strictMode',
         label: '严格模式',
-        type: 'switch',
-        mode: 'inline',
-        className: 'w-full',
         pipeIn: defaultValue(true),
         description: '如果你希望环境变量的值实时透传到 Combo 中，请关闭此选项。'
-      },
+      }),
 
       {
         name: 'syncFields',
@@ -468,17 +511,13 @@ export class ComboControlPlugin extends BasePlugin {
         description:
           '如果 Combo 层级比较深，底层的获取外层的数据可能不同步。但是给 combo 配置这个属性就能同步下来。'
       },
-
-      {
+      getSchemaTpl('switch', {
         name: 'nullable',
         label: '允许为空',
-        type: 'switch',
-        mode: 'inline',
-        className: 'w-full',
         pipeIn: defaultValue(false),
         description:
           '如果子表单项里面配置验证器，且又是单条模式。可以允许用户选择清空（不填）。'
-      },
+      }),
 
       {
         name: 'items',

package/src/plugin/Form/Control.tsx

@@ -2,7 +2,8 @@ import React from 'react';
 import {Button} from 'amis';
 import {getSchemaTpl} from '../../component/schemaTpl';
 import {registerEditorPlugin} from '../../manager';
-import {BasePlugin, RegionConfig} from '../../plugin';
+import {BasePlugin, RegionConfig, BaseEventContext} from '../../plugin';
+import {formItemControl} from '../../component/control/BaseControl';
 
 export class ControlPlugin extends BasePlugin {
   // 关联渲染器名字
@@ -16,6 +17,10 @@ export class ControlPlugin extends BasePlugin {
   description = `表单项容器`;
   docLink = '/amis/zh-CN/components/form/group';
   tags = ['容器'];
+  /**
+   * 组件选择面板中隐藏，和Container合并
+   */
+  disabledRendererPlugin = true;
   scaffold = {
     type: 'control',
     label: '表单项容器',
@@ -43,15 +48,15 @@ export class ControlPlugin extends BasePlugin {
     {
       key: 'body',
       label: '元素集合',
-      preferTag: '展示'
+      preferTag: '表单项'
     }
   ];
 
   panelTitle = '表单项容器';
-  panelBody = [
-    getSchemaTpl('tabs', [
-      {
-        title: '常规',
+  panelBodyCreator = (context: BaseEventContext) => {
+    return formItemControl({
+      common: {
+        replace: true,
         body: [
           {
             children: (
@@ -67,73 +72,14 @@ export class ControlPlugin extends BasePlugin {
               </Button>
             )
           },
-          getSchemaTpl('description'),
-          getSchemaTpl('placeholder'),
+          getSchemaTpl('labelRemark'),
           getSchemaTpl('remark'),
-          getSchemaTpl('labelRemark')
-        ]
-      },
-
-      {
-        title: '外观',
-        body: [
-          getSchemaTpl('formItemMode'),
-          getSchemaTpl('horizontalMode'),
-          getSchemaTpl('horizontal', {
-            label: '',
-            visibleOn:
-              'data.mode == "horizontal" && data.label !== false && data.horizontal'
-          }),
-
-          // renderer.sizeMutable !== false
-          //   ? getSchemaTpl('formItemSize')
-          //   : null,
-          getSchemaTpl('formItemInline'),
-
-          getSchemaTpl('className'),
-          getSchemaTpl('className', {
-            label: 'Label CSS 类名',
-            name: 'labelClassName'
-          }),
-          getSchemaTpl('className', {
-            label: '控件 CSS 类名',
-            name: 'inputClassName'
-          }),
-          getSchemaTpl('className', {
-            label: '描述 CSS 类名',
-            name: 'descriptionClassName',
-            visibleOn: 'this.description'
-          })
-        ]
-      },
-
-      {
-        title: '显隐',
-        body: [
-          // TODO: 有些表单项没有 disabled
-          getSchemaTpl('disabled'),
-          getSchemaTpl('visible'),
-          {
-            type: 'switch',
-            name: 'clearValueOnHidden',
-            label: '隐藏时删除表单项值',
-            mode: 'inline',
-            className: 'w-full'
-          }
-        ]
-      },
-      {
-        title: '验证',
-        body: [
-          // getSchemaTplByName('ref'),
-          getSchemaTpl('validations'),
-          getSchemaTpl('validationErrors'),
-          getSchemaTpl('validateOnChange'),
-          getSchemaTpl('submitOnChange')
+          getSchemaTpl('placeholder'),
+          getSchemaTpl('description')
         ]
       }
-    ])
-  ];
+    });
+  };
 }
 
 registerEditorPlugin(ControlPlugin);

package/src/plugin/Form/DiffEditor.tsx

@@ -2,11 +2,17 @@ import {availableLanguages} from 'amis/lib/renderers/Form/Editor';
 import {
   defaultValue,
   getSchemaTpl,
+  undefinedPipeOut,
   valuePipeOut
 } from '../../component/schemaTpl';
 import {registerEditorPlugin} from '../../manager';
 import {BasePlugin} from '../../plugin';
 
+import type {BaseEventContext} from '../../plugin';
+import {ValidatorTag} from '../../component/validator';
+import {getEventControlConfig} from '../../util';
+import {RendererAction, RendererEvent} from '../../event-action';
+
 export class DiffEditorControlPlugin extends BasePlugin {
   // 关联渲染器名字
   rendererName = 'diff-editor';
@@ -40,72 +46,170 @@ export class DiffEditorControlPlugin extends BasePlugin {
     ]
   };
 
-  panelTitle = 'Diff编辑器';
-  panelBody = [
+  events: RendererEvent[] = [
     {
-      type: 'textarea',
-      name: 'diffValue',
-      label: '左侧值',
-      pipeOut: valuePipeOut,
-      description: '支持使用 <code>\\${xxx}</code> 来获取变量'
+      eventName: 'focus',
+      eventLabel: '获取焦点',
+      description: '右侧输入框获取焦点时触发',
+      dataSchema: [
+        {
+          type: 'object',
+          properties: {
+            'event.data.value': {
+              type: 'string',
+              title: '当前代码'
+            }
+          }
+        }
+      ]
     },
+    {
+      eventName: 'blur',
+      eventLabel: '失去焦点',
+      description: '右侧输入框失去焦点时触发',
+      dataSchema: [
+        {
+          type: 'object',
+          properties: {
+            'event.data.value': {
+              type: 'string',
+              title: '当前代码'
+            }
+          }
+        }
+      ]
+    }
+  ];
 
-    getSchemaTpl('switchDefaultValue', {
-      label: '设置右侧默认值'
-    }),
-
+  actions: RendererAction[] = [
     {
-      type: 'textarea',
-      name: 'value',
-      label: '右侧默认值',
-      pipeOut: valuePipeOut,
-      visibleOn: 'typeof this.value !== "undefined"'
+      actionType: 'clear',
+      actionLabel: '清空',
+      description: '清除选中值'
     },
-
     {
-      label: '语言',
-      name: 'language',
-      type: 'select',
-      value: 'javascript',
-      searchable: true,
-      options: availableLanguages.concat()
+      actionType: 'reset',
+      actionLabel: '重置',
+      description: '将值重置为resetValue，若没有配置resetValue，则清空'
     },
-
     {
-      name: 'size',
-      type: 'button-group-select',
-      size: 'sm',
-      pipeIn: defaultValue(''),
-      className: 'w-full',
-      label: '控件尺寸',
-      options: [
-        {
-          label: '默认',
-          value: ''
-        },
+      actionType: 'focus',
+      actionLabel: '获取焦点',
+      description: '获取焦点，焦点落在右侧编辑面板'
+    },
+    {
+      actionType: 'setValue',
+      actionLabel: '赋值',
+      description: '触发组件数据更新'
+    }
+  ];
 
-        {
-          label: '中',
-          value: 'md'
-        },
+  notRenderFormZone = true;
 
-        {
-          label: '大',
-          value: 'lg'
-        },
+  panelTitle = 'Diff编辑器';
 
-        {
-          label: '加大',
-          value: 'xl'
-        },
+  panelJustify = true;
 
-        {
-          label: '再加大',
-          value: 'xxl'
-        }
-      ]
-    }
-  ];
+  panelBodyCreator = (context: BaseEventContext) => {
+    return getSchemaTpl('tabs', [
+      {
+        title: '属性',
+        body: getSchemaTpl('collapseGroup', [
+          {
+            title: '基本',
+            body: [
+              getSchemaTpl('formItemName', {
+                required: true
+              }),
+              getSchemaTpl('label'),
+              {
+                label: '语言',
+                name: 'language',
+                type: 'select',
+                value: 'javascript',
+                searchable: true,
+                options: availableLanguages.concat()
+              },
+              {
+                type: 'textarea',
+                name: 'diffValue',
+                label: '左侧默认值',
+                pipeOut: valuePipeOut,
+                placeholder: '支持使用 ${xxx} 来获取变量'
+              },
+              {
+                type: 'textarea',
+                name: 'value',
+                label: '右侧默认值',
+                placeholder: '支持使用 ${xxx} 来获取变量'
+              },
+              getSchemaTpl('labelRemark'),
+              getSchemaTpl('remark'),
+              getSchemaTpl('description')
+            ]
+          },
+          getSchemaTpl('status', {isFormItem: true}),
+          getSchemaTpl('validation', {
+            tag: ValidatorTag.All
+          })
+        ])
+      },
+      {
+        title: '外观',
+        body: getSchemaTpl('collapseGroup', [
+          getSchemaTpl('style:formItem', {
+            renderer: context.info.renderer,
+            schema: [
+              {
+                name: 'size',
+                type: 'select',
+                pipeIn: defaultValue(''),
+                pipeOut: undefinedPipeOut,
+                label: '控件尺寸',
+                options: [
+                  {
+                    label: '默认',
+                    value: ''
+                  },
+
+                  {
+                    label: '中',
+                    value: 'md'
+                  },
+
+                  {
+                    label: '大',
+                    value: 'lg'
+                  },
+
+                  {
+                    label: '特大',
+                    value: 'xl'
+                  },
+
+                  {
+                    label: '超大',
+                    value: 'xxl'
+                  }
+                ]
+              }
+            ]
+          }),
+          getSchemaTpl('style:classNames')
+        ])
+      },
+      {
+        title: '事件',
+        className: 'p-none',
+        body: [
+          getSchemaTpl('eventControl', {
+            name: 'onEvent',
+            ...getEventControlConfig(this.manager, context)
+          })
+        ]
+      }
+    ]);
+  };
 }
 
 registerEditorPlugin(DiffEditorControlPlugin);

package/src/plugin/Form/FieldSet.tsx

@@ -66,22 +66,17 @@ export class FieldSetControlPlugin extends BasePlugin {
         // required: true
       },
 
-      {
+      getSchemaTpl('switch', {
         name: 'collapsable',
         label: '是否可折叠',
-        type: 'switch',
-        mode: 'inline',
-        className: 'w-full',
         pipeIn: defaultValue(false)
-      },
-      {
+      }),
+
+      getSchemaTpl('switch', {
         name: 'collapsed',
         label: '默认是否折叠',
-        type: 'switch',
-        mode: 'inline',
-        visibleOn: 'this.collapsable',
-        className: 'w-full'
-      },
+        visibleOn: 'this.collapsable'
+      }),
 
       {
         name: 'className',