amis-editor 4.2.0-beta.2 → 5.1.9

package/src/plugin/Form/NestedSelect.tsx

@@ -1,6 +1,8 @@
+import {RendererAction, RendererEvent} from '../../event-action';
 import {getSchemaTpl} from '../../component/schemaTpl';
 import {registerEditorPlugin} from '../../manager';
-import {BasePlugin} from '../../plugin';
+import {BaseEventContext, BasePlugin} from '../../plugin';
+import {getEventControlConfig} from '../../util';
 
 export class NestedSelectControlPlugin extends BasePlugin {
   // 关联渲染器名字
@@ -95,7 +97,84 @@ export class NestedSelectControlPlugin extends BasePlugin {
       ]
     }
   };
-  panelBody = [
+
+  // 事件定义
+  events: RendererEvent[] = [
+    {
+      eventName: 'change',
+      eventLabel: '值变化',
+      description: '选中值变化时触发',
+      dataSchema: [
+        {
+          type: 'object',
+          properties: {
+            'event.data.value': {
+              type: 'string',
+              title: '选中值'
+            }
+          }
+        }
+      ]
+    },
+    {
+      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: '选中值'
+            }
+          }
+        }
+      ]
+    }
+  ];
+
+  // 动作定义
+  actions: RendererAction[] = [
+    {
+      actionType: 'clear',
+      actionLabel: '清空',
+      description: '清除选中值'
+    },
+    {
+      actionType: 'reset',
+      actionLabel: '重置',
+      description: '将值重置为resetValue，若没有配置resetValue，则清空'
+    },
+    {
+      actionType: 'reload',
+      actionLabel: '重新加载',
+      description: '触发组件数据刷新并重新渲染'
+    },
+    {
+      actionType: 'setValue',
+      actionLabel: '赋值',
+      description: '触发组件数据更新'
+    }
+  ];
+
+  panelBodyCreator = (context: BaseEventContext) =>
     getSchemaTpl('tabs', [
       {
         title: '常规',
@@ -109,14 +188,8 @@ export class NestedSelectControlPlugin extends BasePlugin {
           },
 
           getSchemaTpl('clearable'),
+          getSchemaTpl('searchable'),
 
-          {
-            type: 'switch',
-            name: 'searchable',
-            label: '可否检索',
-            mode: 'inline',
-            className: 'w-full'
-          },
           {
             type: 'input-text',
             name: 'searchPromptText',
@@ -127,27 +200,18 @@ export class NestedSelectControlPlugin extends BasePlugin {
             name: 'noResultsText',
             label: '无结果时的文本'
           },
-          {
-            type: 'switch',
-            name: 'hideNodePathLabel',
-            label: '隐藏选中节点的祖先节点文本信息',
-            mode: 'inline',
-            className: 'w-full'
-          },
-          {
-            type: 'switch',
+          getSchemaTpl('hideNodePathLabel'),
+
+          getSchemaTpl('switch', {
             name: 'enableNodePath',
-            label: '节点路径模式',
-            mode: 'inline',
-            className: 'w-full'
-          },
-          {
-            type: 'switch',
+            label: '节点路径模式'
+          }),
+
+          getSchemaTpl('switch', {
             name: 'onlyChildren',
-            label: '选中父节点时只使用子节点的值',
-            mode: 'inline',
-            className: 'w-full'
-          },
+            label: '选中父节点时只使用子节点的值'
+          }),
+
           {
             type: 'input-text',
             name: 'pathSeparator',
@@ -168,24 +232,18 @@ export class NestedSelectControlPlugin extends BasePlugin {
               }),
               getSchemaTpl('multiple'),
 
-              {
+              getSchemaTpl('switch', {
                 name: 'cascade',
+                label: '不自动选中子节点',
                 visibleOn: 'data.multiple',
-                label: '不自动选中子节点？',
-                description: '选中父级时，孩子节点是否自动选中',
-                type: 'switch',
-                mode: 'inline',
-                className: 'w-full'
-              },
+                description: '选中父级时，孩子节点是否自动选中'
+              }),
 
-              {
+              getSchemaTpl('switch', {
                 name: 'withChildren',
-                visibleOn: 'data.cascade !== true && data.multiple',
                 label: '数值是否携带子节点',
-                type: 'switch',
-                mode: 'inline',
-                className: 'w-full'
-              },
+                visibleOn: 'data.cascade !== true && data.multiple'
+              }),
 
               getSchemaTpl('joinValues'),
               getSchemaTpl('delimiter'),
@@ -203,9 +261,18 @@ export class NestedSelectControlPlugin extends BasePlugin {
             name: 'menuClassName'
           })
         ]
+      },
+      {
+        title: '事件',
+        className: 'p-none',
+        body: [
+          getSchemaTpl('eventControl', {
+            name: 'onEvent',
+            ...getEventControlConfig(this.manager, context)
+          })
+        ]
       }
-    ])
-  ];
+    ]);
 }
 
 registerEditorPlugin(NestedSelectControlPlugin);

package/src/plugin/Form/Picker.tsx

@@ -55,13 +55,10 @@ export class PickerControlPlugin extends BasePlugin {
   panelTitle = '列表选取';
   panelBodyCreator = (context: BaseEventContext) => {
     return [
-      {
-        type: 'switch',
+      getSchemaTpl('switch', {
         name: 'embed',
-        mode: 'inline',
-        className: 'w-full',
         label: '开启内嵌模式'
-      },
+      }),
 
       getSchemaTpl('switchDefaultValue'),
 

package/src/plugin/Form/Radios.tsx

@@ -1,6 +1,10 @@
 import {defaultValue, getSchemaTpl} from '../../component/schemaTpl';
 import {registerEditorPlugin} from '../../manager';
-import {BasePlugin} from '../../plugin';
+import {BasePlugin, BaseEventContext} from '../../plugin';
+
+import {ValidatorTag} from '../../component/validator';
+import {getEventControlConfig} from '../../util';
+import {RendererAction, RendererEvent} from '../../event-action';
 import flatten = require('lodash/flatten');
 
 export class RadiosControlPlugin extends BasePlugin {
@@ -46,74 +50,140 @@ export class RadiosControlPlugin extends BasePlugin {
     ]
   };
 
+  notRenderFormZone = true;
+
   panelTitle = '单选框';
-  panelBody = [
-    getSchemaTpl('tabs', [
+
+  // 事件定义
+  events: RendererEvent[] = [
+    {
+      eventName: 'change',
+      eventLabel: '值变化',
+      description: '选中值变化时触发',
+      dataSchema: [
+        {
+          type: 'object',
+          properties: {
+            'event.data.value': {
+              type: 'string',
+              title: '选中值'
+            }
+          }
+        }
+      ]
+    }
+  ];
+
+  // 动作定义
+  actions: RendererAction[] = [
+    {
+      actionType: 'clear',
+      actionLabel: '清空',
+      description: '清除选中值'
+    },
+    {
+      actionType: 'reset',
+      actionLabel: '重置',
+      description: '将值重置为resetValue，若没有配置resetValue，则清空'
+    },
+    {
+      actionType: 'reload',
+      actionLabel: '重新加载',
+      description: '触发组件数据刷新并重新渲染'
+    },
+    {
+      actionType: 'setValue',
+      actionLabel: '赋值',
+      description: '触发组件数据更新'
+    }
+  ];
+
+  panelJustify = true;
+  panelBodyCreator = (context: BaseEventContext) => {
+    return getSchemaTpl('tabs', [
       {
-        title: '常规',
-        body: [
-          getSchemaTpl('switchDefaultValue'),
+        title: '属性',
+        body: getSchemaTpl('collapseGroup', [
           {
-            type: 'radios',
-            name: 'value',
-            label: '默认值',
-            source: '${options}',
-            visibleOn: 'typeof this.value !== "undefined"',
-            multiple: true
+            title: '基本',
+            body: [
+              getSchemaTpl('formItemName', {
+                required: true
+              }),
+              getSchemaTpl('label'),
+              // getSchemaTpl('autoFill')
+              getSchemaTpl('labelRemark'),
+              getSchemaTpl('remark')
+            ]
           },
           {
-            label: '是否默认选择第一个',
-            name: 'selectFirst',
-            type: 'switch',
-            mode: 'inline',
-            className: 'w-full'
-          },
-          getSchemaTpl('fieldSet', {
             title: '选项',
             body: [
-              getSchemaTpl('options'),
-              getSchemaTpl('source'),
-
-              getSchemaTpl('joinValues', {
-                visibleOn: true
+              getSchemaTpl('optionControl'),
+              getSchemaTpl('switch', {
+                label: '默认选择第一个',
+                name: 'selectFirst',
+                horizontal: {justify: true, left: 5},
+                visibleOn: '!this.options'
               }),
-
-              getSchemaTpl('extractValue'),
-              getSchemaTpl('autoFill')
+              getSchemaTpl('value', {
+                visibleOn: '!this.options && this.selectFirst !== true'
+              })
             ]
+          },
+          getSchemaTpl('status', {isFormItem: true}),
+          getSchemaTpl('validation', {
+            tag: ValidatorTag.All
           })
-        ]
+        ])
       },
       {
         title: '外观',
         body: [
-          {
-            label: '选项在一行显示',
-            name: 'inline',
-            type: 'switch',
-            visibleOn: 'data.mode != "inline"',
-            mode: 'inline',
-            className: 'w-full',
-            pipeIn: defaultValue(true)
-          },
-          {
-            label: '每行显示多少列',
-            name: 'columnsCount',
-            hiddenOn:
-              'typeof data.inline === "undefined" || data.inline === true',
-            type: 'input-range',
-            min: 1,
-            max: 6,
-            pipeIn: defaultValue(1)
-          },
-          getSchemaTpl('className', {
-            label: '单个 Radio 的 CSS 类名',
-            name: 'itemClassName'
+          getSchemaTpl('collapseGroup', [
+            getSchemaTpl('style:formItem', {
+              renderer: context.info.renderer,
+              schema: [
+                getSchemaTpl('switch', {
+                  label: '一行选项显示',
+                  name: 'inline',
+                  hiddenOn: 'data.mode === "inline"',
+                  pipeIn: defaultValue(true)
+                }),
+                {
+                  label: '每行选项个数',
+                  name: 'columnsCount',
+                  hiddenOn: 'data.mode === "inline" || data.inline !== false',
+                  type: 'input-range',
+                  min: 1,
+                  max: 6,
+                  pipeIn: defaultValue(1)
+                }
+              ]
+            }),
+            getSchemaTpl('style:classNames', {
+              schema: [
+                getSchemaTpl('className', {
+                  label: '单个选项',
+                  name: 'itemClassName'
+                })
+              ]
+            })
+          ])
+        ]
+      },
+      {
+        title: '事件',
+        className: 'p-none',
+        body: [
+          getSchemaTpl('eventControl', {
+            name: 'onEvent',
+            ...getEventControlConfig(this.manager, context)
           })
         ]
       }
-    ])
-  ];
+    ]);
+  };
 }
 
 registerEditorPlugin(RadiosControlPlugin);