amis-editor 5.2.0-beta.1 → 5.2.0

package/src/plugin/Form/Checkbox.tsx

@@ -0,0 +1,176 @@
+import {
+  defaultValue,
+  setSchemaTpl,
+  getSchemaTpl,
+  valuePipeOut
+} from '../../component/schemaTpl';
+import {registerEditorPlugin} from '../../manager';
+import {
+  BasePlugin,
+  BasicSubRenderInfo,
+  RendererEventContext,
+  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';
+  $schema = '/schemas/CheckboxControlSchema.json';
+
+  // 组件名称
+  name = '勾选框';
+  isBaseComponent = true;
+  icon = 'fa fa-check-square-o';
+  description = '勾选框';
+  docLink = '/amis/zh-CN/components/form/checkbox';
+  tags = ['表单项'];
+  scaffold = {
+    type: 'checkbox',
+    option: '勾选框',
+    name: 'checkbox'
+  };
+  previewSchema: any = {
+    type: 'form',
+    className: 'text-left',
+    wrapWithPanel: false,
+    mode: 'horizontal',
+    body: [
+      {
+        value: true,
+        ...this.scaffold,
+        label: '勾选表单'
+      }
+    ]
+  };
+  notRenderFormZone = true;
+  panelTitle = '勾选框';
+  panelJustify = true;
+  // 事件定义
+  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: '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

@@ -0,0 +1,234 @@
+import {
+  defaultValue,
+  setSchemaTpl,
+  getSchemaTpl,
+  valuePipeOut
+} from '../../component/schemaTpl';
+import {registerEditorPlugin} from '../../manager';
+import {
+  BasePlugin,
+  BasicSubRenderInfo,
+  RendererEventContext,
+  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';
+  $schema = '/schemas/CheckboxesControlSchema.json';
+
+  order = -470;
+
+  // 组件名称
+  name = '复选框';
+  isBaseComponent = true;
+  icon = 'fa fa-check-square';
+  description =
+    '通过<code>options</code>配置多个勾选框，也可以通过<code>source</code>拉取选项';
+  docLink = '/amis/zh-CN/components/form/checkboxes';
+  tags = ['表单项'];
+  scaffold = {
+    type: 'checkboxes',
+    label: '复选框',
+    name: 'checkboxes',
+    multiple: true,
+    options: [
+      {
+        label: '选项A',
+        value: 'A'
+      },
+
+      {
+        label: '选项B',
+        value: 'B'
+      }
+    ]
+  };
+  previewSchema: any = {
+    type: 'form',
+    className: 'text-left',
+    mode: 'horizontal',
+    wrapWithPanel: false,
+    body: [
+      {
+        value: 'A',
+        ...this.scaffold
+      }
+    ]
+  };
+
+  notRenderFormZone = true;
+
+  panelTitle = '复选框';
+
+  // 事件定义
+  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) => {
+    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', {
+                visibleOn: 'data.joinValues === true'
+              }),
+              getSchemaTpl('extractValue'),
+              getSchemaTpl('labelRemark'),
+              getSchemaTpl('remark'),
+              getSchemaTpl('description'),
+            ]
+          },
+          {
+            title: '选项',
+            body: [
+              getSchemaTpl('optionControl', {
+                multiple: true
+              }),
+              getSchemaTpl('value', {
+                visibleOn: '!!this.options'
+              }),
+              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: [
+          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

@@ -0,0 +1,210 @@
+import {availableLanguages} from 'amis/lib/renderers/Form/Editor';
+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';
+  $schema = '/schemas/EditorControlSchema.json';
+
+  // 组件名称
+  name = '代码编辑器';
+  isBaseComponent = true;
+  icon = 'fa fa-code';
+  description = `代码编辑器，采用 monaco-editor 支持：${availableLanguages
+    .slice(0, 10)
+    .join('，')}等等`;
+  docLink = '/amis/zh-CN/components/form/editor';
+  tags = ['表单项'];
+  scaffold = {
+    type: 'editor',
+    label: '代码编辑器',
+    name: 'editor'
+  };
+  previewSchema: any = {
+    type: 'form',
+    className: 'text-left',
+    mode: 'horizontal',
+    wrapWithPanel: false,
+    body: [
+      {
+        ...this.scaffold,
+        value: 'console.log("Hello world.");'
+      }
+    ]
+  };
+
+  events: RendererEvent[] = [
+    {
+      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: '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);