amis-editor 4.2.0-beta.3 → 5.1.8

package/src/plugin/Form/Checkbox.tsx

@@ -1,5 +1,6 @@
 import {
   defaultValue,
+  setSchemaTpl,
   getSchemaTpl,
   valuePipeOut
 } from '../../component/schemaTpl';
@@ -8,9 +9,19 @@ import {
   BasePlugin,
   BasicSubRenderInfo,
   RendererEventContext,
-  SubRendererInfo
+  SubRendererInfo,
+  BaseEventContext
 } from '../../plugin';
+import { ValidatorTag } from '../../component/validator';
+import {tipedLabel} from '../../component/control/BaseControl';
+import { getEventControlConfig } from '../../util';
+import {RendererAction, RendererEvent} from '../../event-action';
 
+setSchemaTpl('option', {
+  name: 'option',
+  type: 'input-text',
+  label: tipedLabel('说明', '选项说明')
+});
 export class CheckboxControlPlugin extends BasePlugin {
   // 关联渲染器名字
   rendererName = 'checkbox';
@@ -41,47 +52,125 @@ export class CheckboxControlPlugin extends BasePlugin {
       }
     ]
   };
-
+  notRenderFormZone = true;
   panelTitle = '勾选框';
-  panelBody = [
+  panelJustify = true;
+  // 事件定义
+  events: RendererEvent[] = [
     {
-      name: 'option',
-      type: 'input-text',
-      label: '选项说明'
-    },
-
-    getSchemaTpl('switchDefaultValue', {
-      name: 'value',
-      pipeOut: (value: any, origin: any, data: any) =>
-        value ? data.trueValue ?? true : undefined
-    }),
+      eventName: 'change',
+      eventLabel: '值变化',
+      description: '选中状态变化时触发',
+      dataSchema: [
+        {
+          type: 'object',
+          properties: {
+            'event.data.value': {
+              type: 'string',
+              title: '选中状态'
+            }
+          }
+        }
+      ]
+    }
+  ];
+      // 动作定义
+  actions: RendererAction[] = [
     {
-      type: 'switch',
-      name: 'value',
-      label: '默认勾选',
-      mode: 'inline',
-      className: 'w-full',
-      visibleOn: 'typeof this.value !== "undefined"',
-      pipeOut: (value: any, origin: any, data: any) =>
-        value ? data.trueValue ?? true : data.falseValue ?? false
+      actionType: 'clear',
+      actionLabel: '清空',
+      description: '清除选中值'
     },
-
     {
-      type: 'input-text',
-      label: '勾选后的值',
-      name: 'trueValue',
-      pipeIn: defaultValue(true),
-      pipeOut: valuePipeOut
+      actionType: 'reset',
+      actionLabel: '重置',
+      description: '将值重置为resetValue，若没有配置resetValue，则清空'
     },
-
     {
-      type: 'input-text',
-      label: '未勾选的值',
-      name: 'falseValue',
-      pipeIn: defaultValue(false),
-      pipeOut: valuePipeOut
+      actionType: 'setValue',
+      actionLabel: '赋值',
+      description: '触发组件数据更新'
     }
   ];
+  panelBodyCreator = (context: BaseEventContext) => {
+    return getSchemaTpl('tabs', [
+      {
+        title: '属性',
+        body: getSchemaTpl('collapseGroup', [
+          {
+            title: '基本',
+            body: [
+              getSchemaTpl('formItemName', {
+                required: true
+              }),
+              getSchemaTpl('label'),
+              getSchemaTpl('option'),
+              getSchemaTpl('switch', {
+                name: 'value',
+                label: '默认勾选',
+                pipeIn: (value: any, data: any) => {
+                  return value === (data?.data?.trueValue ?? true);
+                },
+                pipeOut: (value: any, origin: any, data: any) => {
+                  const {trueValue = true, falseValue = false} = data;
+                  return value ? trueValue : falseValue;
+                }
+              }),
+              {
+                type: 'ae-Switch-More',
+                hiddenOnDefault: false,
+                mode: 'normal',
+                label: '值格式',
+                formType: 'extend',
+                form: {
+                  body: [
+                    {
+                      type: 'input-text',
+                      label: '勾选值',
+                      name: 'trueValue',
+                      pipeIn: defaultValue(true),
+                      pipeOut: valuePipeOut
+                    },
+                    {
+                      type: 'input-text',
+                      label: '未勾选值',
+                      name: 'falseValue',
+                      pipeIn: defaultValue(false),
+                      pipeOut: valuePipeOut
+                    }
+                  ]
+                }
+              },
+              getSchemaTpl('labelRemark'),
+              getSchemaTpl('remark'),
+              getSchemaTpl('description')
+            ]
+          },
+          getSchemaTpl('status', {isFormItem: true}),
+          getSchemaTpl('validation', {tag: ValidatorTag.MultiSelect})
+        ])
+      },
+      {
+        title: '外观',
+        body: [
+          getSchemaTpl('collapseGroup', [
+            getSchemaTpl('style:formItem', {renderer: context.info.renderer}),
+            getSchemaTpl('style:classNames')
+          ])
+        ]
+      },
+      {
+        title: '事件',
+        className: 'p-none',
+        body: [
+          getSchemaTpl('eventControl', {
+            name: 'onEvent',
+            ...getEventControlConfig(this.manager, context)
+          })
+        ]
+      }
+    ]);
+  }
 }
 
 registerEditorPlugin(CheckboxControlPlugin);

package/src/plugin/Form/Checkboxes.tsx

@@ -1,5 +1,6 @@
 import {
   defaultValue,
+  setSchemaTpl,
   getSchemaTpl,
   valuePipeOut
 } from '../../component/schemaTpl';
@@ -8,9 +9,17 @@ import {
   BasePlugin,
   BasicSubRenderInfo,
   RendererEventContext,
-  SubRendererInfo
+  SubRendererInfo,
+  BaseEventContext
 } from '../../plugin';
 
+import {formItemControl} from '../../component/control/BaseControl';
+import { ValidatorTag } from '../../component/validator';
+import {tipedLabel} from '../../component/control/BaseControl';
+
+import { getEventControlConfig } from '../../util';
+import {RendererAction, RendererEvent} from '../../event-action';
+
 export class CheckboxesControlPlugin extends BasePlugin {
   // 关联渲染器名字
   rendererName = 'checkboxes';
@@ -30,6 +39,7 @@ export class CheckboxesControlPlugin extends BasePlugin {
     type: 'checkboxes',
     label: '复选框',
     name: 'checkboxes',
+    multiple: true,
     options: [
       {
         label: '选项A',
@@ -55,113 +65,170 @@ export class CheckboxesControlPlugin extends BasePlugin {
     ]
   };
 
+  notRenderFormZone = true;
+
   panelTitle = '复选框';
-  panelBody = [
-    getSchemaTpl('tabs', [
-      {
-        title: '常规',
-        body: [
-          getSchemaTpl('switchDefaultValue', {
-            visibleOn: '!this.defaultCheckAll'
-          }),
 
-          {
-            type: 'checkboxes',
-            name: 'value',
-            label: '默认值',
-            source: '${options}',
-            visibleOn: 'typeof this.value !== "undefined"',
-            multiple: true
-          },
-          getSchemaTpl('fieldSet', {
-            title: '选项',
-            body: [
-              getSchemaTpl('options'),
-              getSchemaTpl('source'),
-              {
-                name: 'checkAll',
-                label: '是否开启全选功能',
-                type: 'switch',
-                mode: 'inline',
-                className: 'w-full'
-              },
+  // 事件定义
+  events: RendererEvent[] = [
+    {
+      eventName: 'change',
+      eventLabel: '值变化',
+      description: '选中值变化时触发',
+      dataSchema: [
+        {
+          type: 'object',
+          properties: {
+            'event.data.value': {
+              type: 'string',
+              title: '选中值'
+            }
+          }
+        }
+      ]
+    }
+  ];
 
-              {
-                name: 'defaultCheckAll',
-                label: '是否默认全选',
-                type: 'switch',
-                mode: 'inline',
-                className: 'w-full',
-                description: '勾选后，默认值的配置将无效。',
-                onChange: (
-                  value: boolean,
-                  oldValue: boolean,
-                  model: any,
-                  form: any
-                ) => value && form.setValueByName('value', undefined)
-              },
+  // 动作定义
+  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) => {
+    const renderer: any = context.info.renderer;
 
+    return getSchemaTpl('tabs', [
+      {
+        title: '属性',
+        body: getSchemaTpl('collapseGroup', [
+          {
+            title: '基本',
+            body: [
+              getSchemaTpl('formItemName', {
+                required: true
+              }),
+              getSchemaTpl('label'),
+              [
+                getSchemaTpl('switch', {
+                  label: '可全选',
+                  name: 'checkAll',
+                  value: false,
+                  visibleOn: 'data.multiple',
+                  onChange: (value:any, origin:any, item:any, form:any) => {
+                    if (!value) {
+                      // 可全选关闭时，默认全选也需联动关闭
+                      form.setValueByName('defaultCheckAll', false);
+                    }
+                  }
+                }),
+                {
+                  type: 'container',
+                  className: 'ae-ExtendMore mb-2',
+                  visibleOn: 'data.checkAll',
+                  body: [
+                    getSchemaTpl('switch', {
+                      label: '默认全选',
+                      name: 'defaultCheckAll',
+                      value: false
+                    })
+                  ]
+                }
+              ],
               getSchemaTpl('joinValues', {
                 visibleOn: true
               }),
               getSchemaTpl('delimiter', {
-                hiddenOn: 'data.joinValues === false'
+                visibleOn: 'data.joinValues === true'
               }),
               getSchemaTpl('extractValue'),
-              getSchemaTpl('autoFill'),
-
-              getSchemaTpl('creatable'),
-              getSchemaTpl('createBtnLabel'),
-              getSchemaTpl('api', {
-                label: '新增选项接口',
-                name: 'addApi'
+              getSchemaTpl('labelRemark'),
+              getSchemaTpl('remark'),
+              getSchemaTpl('description'),
+            ]
+          },
+          {
+            title: '选项',
+            body: [
+              getSchemaTpl('optionControl', {
+                multiple: true
               }),
-
-              getSchemaTpl('editable'),
-              getSchemaTpl('api', {
-                label: '编辑选项接口',
-                name: 'editApi'
+              getSchemaTpl('value', {
+                visibleOn: '!!this.options'
               }),
-
-              getSchemaTpl('removable'),
-              getSchemaTpl('api', {
-                label: '删除选项接口',
-                name: 'deleteApi'
+              getSchemaTpl('creatable', {
+                formType: 'extend',
+                hiddenOnDefault: true,
+                form: {
+                  body: [
+                    getSchemaTpl('createBtnLabel'),
+                    getSchemaTpl('addApi')
+                  ]
+                }
+              }),
+              getSchemaTpl('editable', {
+                formType: 'extend',
+                hiddenOnDefault: true,
+                form: {
+                  body: [
+                    getSchemaTpl('editApi')
+                  ]
+                }
+              }),
+              getSchemaTpl('removable', {
+                formType: 'extend',
+                hiddenOnDefault: true,
+                form: {
+                  body: [
+                    getSchemaTpl('deleteApi')
+                  ]
+                }
               })
             ]
-          })
-        ]
+          },
+          getSchemaTpl('status', {isFormItem: true}),
+          getSchemaTpl('validation', {tag: ValidatorTag.MultiSelect})
+        ])
       },
       {
         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: '单个 Checkbox 的 CSS 类名',
-            name: 'itemClassName'
+          getSchemaTpl('collapseGroup', [
+            getSchemaTpl('style:formItem', {renderer}),
+            getSchemaTpl('style:classNames')
+          ])
+        ]
+      },
+      {
+        title: '事件',
+        className: 'p-none',
+        body: [
+          getSchemaTpl('eventControl', {
+            name: 'onEvent',
+            ...getEventControlConfig(this.manager, context)
           })
         ]
       }
-    ])
-  ];
+    ]);
+  };
 }
 
 registerEditorPlugin(CheckboxesControlPlugin);

package/src/plugin/Form/CodeEditor.tsx

@@ -1,8 +1,17 @@
 import {availableLanguages} from 'amis/lib/renderers/Form/Editor';
-import {defaultValue} from '../../component/schemaTpl';
+import {
+  defaultValue,
+  getSchemaTpl,
+  undefinedPipeOut
+} 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 CodeEditorControlPlugin extends BasePlugin {
   // 关联渲染器名字
   rendererName = 'editor';
@@ -35,47 +44,167 @@ export class CodeEditorControlPlugin extends BasePlugin {
     ]
   };
 
-  panelTitle = 'Editor';
-  panelBody = [
+  events: RendererEvent[] = [
     {
-      label: '语言',
-      name: 'language',
-      type: 'select',
-      value: 'javascript',
-      searchable: true,
-      options: availableLanguages.concat()
+      eventName: 'focus',
+      eventLabel: '获取焦点',
+      description: '输入框获取焦点时触发',
+      dataSchema: [
+        {
+          type: 'object',
+          properties: {
+            'event.data.value': {
+              type: 'string',
+              title: '当前代码'
+            }
+          }
+        }
+      ]
     },
-
     {
-      name: 'size',
-      type: 'button-group-select',
-      size: 'xs',
-      pipeIn: defaultValue(''),
-      label: '控件大小',
-      options: [
-        {
-          label: '默认',
-          value: ''
-        },
-        {
-          label: '中',
-          value: 'md'
-        },
-        {
-          label: '大',
-          value: 'lg'
-        },
+      eventName: 'blur',
+      eventLabel: '失去焦点',
+      description: '输入框失去焦点时触发',
+      dataSchema: [
         {
-          label: '加大',
-          value: 'xl'
-        },
-        {
-          label: '加加大',
-          value: 'xxl'
+          type: 'object',
+          properties: {
+            'event.data.value': {
+              type: 'string',
+              title: '当前代码'
+            }
+          }
         }
       ]
     }
   ];
+
+  actions: RendererAction[] = [
+    {
+      actionType: 'clear',
+      actionLabel: '清空',
+      description: '清除选中值'
+    },
+    {
+      actionType: 'reset',
+      actionLabel: '重置',
+      description: '将值重置为resetValue，若没有配置resetValue，则清空'
+    },
+    {
+      actionType: 'focus',
+      actionLabel: '获取焦点',
+      description: '输入框获取焦点'
+    },
+    {
+      actionType: 'setValue',
+      actionLabel: '赋值',
+      description: '触发组件数据更新'
+    }
+  ];
+
+  notRenderFormZone = true;
+
+  panelTitle = 'Editor';
+
+  panelJustify = true;
+
+  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: 'value',
+                label: '默认值'
+              },
+              getSchemaTpl('switch', {
+                label: '可全屏',
+                name: 'allowFullscreen',
+                pipeIn: defaultValue(true)
+              }),
+              getSchemaTpl('labelRemark'),
+              getSchemaTpl('remark'),
+              getSchemaTpl('description')
+            ]
+          },
+          getSchemaTpl('status', {isFormItem: true}),
+          getSchemaTpl('validation', {
+            tag: ValidatorTag.Code
+          })
+        ])
+      },
+      {
+        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(CodeEditorControlPlugin);