amis-editor 5.2.0-beta.1 → 5.2.0

package/src/plugin/Flex.tsx

@@ -0,0 +1,209 @@
+/**
+ * @file Flex 布局
+ */
+import {registerEditorPlugin} from '../manager';
+import {
+  BasePlugin,
+  PluginEvent,
+  RegionConfig,
+  RendererJSONSchemaResolveEventContext
+} from '../plugin';
+import {getSchemaTpl} from '../component/schemaTpl';
+import {EditorNodeType} from '../store/node';
+
+export class FlexPlugin extends BasePlugin {
+  // 关联渲染器名字
+  rendererName = 'flex';
+  $schema = '/schemas/FlexSchema.json';
+  disabledRendererPlugin = true;
+
+  // 组件名称
+  name = 'Flex 布局';
+  isBaseComponent = true;
+  icon = 'fa fa-columns';
+  description = 'flex 布局';
+  docLink = '/amis/zh-CN/components/flex';
+  tags = ['容器'];
+  scaffold = {
+    type: 'flex',
+    items: [
+      {
+        type: 'wrapper',
+        body: '第一列'
+      },
+      {
+        type: 'wrapper',
+        body: '第二列'
+      },
+      {
+        type: 'wrapper',
+        body: '第三列'
+      }
+    ]
+  };
+  previewSchema = {
+    ...this.scaffold
+  };
+
+  panelTitle = 'Flex';
+  panelBody = [
+    getSchemaTpl('tabs', [
+      {
+        title: '属性',
+        className: 'p-none',
+        body: [
+          getSchemaTpl('collapseGroup', [
+            {
+              title: '布局',
+              body: [
+                {
+                  name: 'justify',
+                  type: 'select',
+                  value: 'center',
+                  label: '子节点水平分布方式',
+                  menuTpl:
+                    "<div class='flex justify-between'><span>${label}</span><span class='text-muted text-sm'>${value}</span></div>",
+                  options: [
+                    {
+                      label: '起始端对齐',
+                      value: 'flex-start'
+                    },
+                    {
+                      label: '居中对齐',
+                      value: 'center'
+                    },
+                    {
+                      label: '末尾端对齐',
+                      value: 'flex-end'
+                    },
+                    {
+                      label: '均匀分布（首尾留空）',
+                      value: 'space-around'
+                    },
+                    {
+                      label: '均匀分布（首尾对齐）',
+                      value: 'space-between'
+                    },
+                    {
+                      label: '均匀分布（元素等间距）',
+                      value: 'space-evenly'
+                    },
+                    {
+                      label: '均匀分布（自动拉伸）',
+                      value: 'stretch'
+                    }
+                  ]
+                },
+                {
+                  name: 'alignItems',
+                  type: 'select',
+                  value: 'center',
+                  label: '子节点垂直方向位置',
+                  menuTpl:
+                    "<div class='flex justify-between'><span>${label}</span><span class='text-muted text-sm'>${value}</span></div>",
+                  options: [
+                    {
+                      label: '起始端对齐',
+                      value: 'flex-start'
+                    },
+                    {
+                      label: '居中对齐',
+                      value: 'center'
+                    },
+                    {
+                      label: '末尾端对齐',
+                      value: 'flex-end'
+                    },
+                    {
+                      label: '基线对齐',
+                      value: 'baseline'
+                    },
+                    {
+                      label: '自动拉伸',
+                      value: 'stretch'
+                    }
+                  ]
+                },
+                {
+                  name: 'direction',
+                  type: 'button-group-select',
+                  size: 'sm',
+                  label: '布局方向',
+                  value: 'row',
+                  mode: 'row',
+                  options: [
+                    {label: '水平', value: 'row'},
+                    {label: '垂直', value: 'column'}
+                  ]
+                }
+              ]
+            },
+            {
+              title: '子节点管理',
+              body: [
+                {
+                  name: 'items',
+                  label: false,
+                  type: 'combo',
+                  scaffold: {
+                    type: 'wrapper',
+                    body: '子节点内容'
+                  },
+                  minLength: 2,
+                  multiple: true,
+                  // draggable: true,
+                  draggableTip: '',
+                  items: [
+                    {
+                      type: 'tpl',
+                      tpl:
+                        '<span class="label label-default">子节点${index | plus}</span>'
+                    }
+                  ]
+                }
+              ]
+            }
+          ])
+        ]
+      },
+      {
+        title: '外观',
+        className: 'p-none',
+        body: getSchemaTpl('collapseGroup', [
+          ...getSchemaTpl('style:common', ['display']),
+          {
+            title: 'CSS 类名',
+            body: [getSchemaTpl('className', {label: '外层CSS类名'})]
+          }
+        ])
+      },
+      {
+        title: '状态',
+        body: [getSchemaTpl('visible'), getSchemaTpl('disabled')]
+      }
+    ])
+  ];
+
+  regions: Array<RegionConfig> = [
+    {
+      key: 'items',
+      label: '子节点集合',
+      // 复写渲染器里面的 render 方法
+      renderMethod: 'render',
+      dndMode: 'position-h'
+    }
+  ];
+
+  afterResolveJsonSchema(
+    event: PluginEvent<RendererJSONSchemaResolveEventContext>
+  ) {
+    const context = event.context;
+    const parent = context.node.parent?.host as EditorNodeType;
+
+    if (parent?.info?.plugin === this) {
+      event.setData('/schemas/FlexColumn.json');
+    }
+  }
+}
+
+registerEditorPlugin(FlexPlugin);

package/src/plugin/Form/ButtonGroupSelect.tsx

@@ -0,0 +1,163 @@
+import {registerEditorPlugin} from '../../manager';
+import {BasePlugin, BaseEventContext} from '../../plugin';
+
+import {formItemControl} from '../../component/control/BaseControl';
+import {RendererAction, RendererEvent} from '../../event-action';
+import {getSchemaTpl} from '../../component/schemaTpl';
+
+export class ButtonGroupControlPlugin extends BasePlugin {
+  // 关联渲染器名字
+  rendererName = 'button-group-select';
+  $schema = '/schemas/ButtonGroupControlSchema.json';
+
+  // 组件名称
+  name = '按钮点选';
+  isBaseComponent = true;
+  icon = 'fa fa-object-group';
+  description =
+    '用来展示多个按钮，视觉上会作为一个整体呈现，同时可以作为表单项选项选择器来用。';
+  docLink = '/amis/zh-CN/components/button-group';
+  tags = ['按钮'];
+  scaffold = {
+    type: 'button-group-select',
+    name: 'a',
+    options: [
+      {
+        label: '选项1',
+        value: 'a'
+      },
+      {
+        label: '选项2',
+        value: 'b'
+      }
+    ]
+  };
+  previewSchema: any = {
+    type: 'form',
+    wrapWithPanel: false,
+    mode: 'horizontal',
+    body: {
+      ...this.scaffold,
+      value: 'a',
+      label: '按钮点选',
+      description: '按钮点选可以当选项用。'
+    }
+  };
+
+  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) => {
+    return formItemControl(
+      {
+        common: {
+          replace: true,
+          body: [
+            getSchemaTpl('formItemName', {
+              required: true
+            }),
+            getSchemaTpl('label'),
+            getSchemaTpl('value'),
+            getSchemaTpl('multiple'),
+            getSchemaTpl('extractValue')
+          ]
+        },
+        option: {
+          title: '按钮管理',
+          body: [getSchemaTpl('optionControl'), getSchemaTpl('autoFill')]
+        },
+        style: {
+          // reverse: true,
+          body: [
+            getSchemaTpl('size'),
+
+            getSchemaTpl('buttonLevel', {
+              label: '按钮样式',
+              name: 'btnLevel'
+            }),
+
+            {
+              type: 'button-group-select',
+              name: 'vertical',
+              label: '布局方向',
+              value: false,
+              options: [
+                {
+                  label: '水平',
+                  value: false
+                },
+                {
+                  label: '垂直',
+                  value: true
+                }
+              ]
+            },
+
+            {
+              type: 'switch',
+              name: 'tiled',
+              label: '平铺模式',
+              value: false
+            },
+
+            getSchemaTpl('buttonLevel', {
+              label: '按钮选中样式',
+              name: 'btnActiveLevel'
+            })
+          ]
+        },
+        status: {}
+      },
+      context
+    );
+  };
+}
+
+registerEditorPlugin(ButtonGroupControlPlugin);

package/src/plugin/Form/ButtonToolbar.tsx

@@ -0,0 +1,117 @@
+import {registerEditorPlugin} from '../../manager';
+import {BasePlugin, RegionConfig, BaseEventContext} from '../../plugin';
+import {getSchemaTpl} from '../../component/schemaTpl';
+
+import {
+  BUTTON_DEFAULT_ACTION,
+  formItemControl
+} from '../../component/control/BaseControl';
+
+export class ButtonToolbarControlPlugin extends BasePlugin {
+  // 关联渲染器名字
+  rendererName = 'button-toolbar';
+  $schema = '/schemas/ButtonToolbarControlSchema.json';
+
+  // 组件名称
+  name = '按钮工具栏';
+  isBaseComponent = true;
+  icon = 'fa fa-ellipsis-h';
+  description = '可以用来放置多个按钮或者按钮组，按钮之间会存在一定的间隔';
+  docLink = '/amis/zh-CN/components/form/button-toolbar';
+  tags = ['表单项', '按钮'];
+  scaffold = {
+    type: 'button-toolbar',
+    buttons: [
+      {
+        type: 'button',
+        label: '按钮1',
+        ...BUTTON_DEFAULT_ACTION
+      },
+      {
+        type: 'button',
+        label: '按钮2',
+        ...BUTTON_DEFAULT_ACTION
+      }
+    ]
+  };
+  previewSchema: any = {
+    type: 'form',
+    wrapWithPanel: false,
+    mode: 'horizontal',
+    body: {
+      ...this.scaffold,
+      label: '按钮工具栏'
+    }
+  };
+
+  // 容器配置
+  regions: Array<RegionConfig> = [
+    {
+      key: 'buttons',
+      label: '按钮集合',
+      preferTag: '按钮',
+      renderMethod: 'renderButtons'
+    }
+  ];
+
+  notRenderFormZone = true;
+
+  panelTitle = '工具栏';
+
+  panelBodyCreator = (context: BaseEventContext) => {
+    return formItemControl(
+      {
+        common: {
+          replace: true,
+          body: [
+            getSchemaTpl('formItemName', {
+              required: true
+            }),
+            getSchemaTpl('label'),
+            getSchemaTpl('value'),
+            getSchemaTpl('remark'),
+            getSchemaTpl('labelRemark'),
+            getSchemaTpl('description')
+          ]
+        },
+        option: {
+          title: '按钮管理',
+          replace: true,
+          body: [
+            {
+              name: 'buttons',
+              type: 'combo',
+              label: '',
+              multiple: true,
+              addable: true,
+              minLength: 1,
+              draggable: true,
+              draggableTip: '',
+              editable: false,
+              visibleOn: 'this.buttons && this.buttons.length',
+              items: [
+                {
+                  type: 'tpl',
+                  inline: false,
+                  tpl:
+                    '<span class="label label-default"><% if (data.type === "button-group") { %> 按钮组 <% } else { %><%= data.label %><% if (data.icon) { %><i class="<%= data.icon %>"/><% }%><% } %></span>'
+                }
+              ],
+              addButtonText: '新增按钮',
+              scaffold: {
+                type: 'button',
+                label: '按钮'
+              }
+            }
+          ]
+        },
+        event: {
+          hidden: false
+        }
+      },
+      context
+    );
+  };
+}
+
+registerEditorPlugin(ButtonToolbarControlPlugin);

package/src/plugin/Form/ChainedSelect.tsx

@@ -0,0 +1,115 @@
+import {registerEditorPlugin} from '../../manager';
+import {
+  BasePlugin,
+  BasicSubRenderInfo,
+  RendererEventContext,
+  SubRendererInfo
+} from '../../plugin';
+import {getSchemaTpl} from '../../component/schemaTpl';
+import {RendererAction, RendererEvent} from '../../event-action';
+
+export class ChainedSelectControlPlugin extends BasePlugin {
+  // 关联渲染器名字
+  rendererName = 'chained-select';
+  $schema = '/schemas/ChainedSelectControlSchema.json';
+
+  // 组件名称
+  name = '级联下拉框';
+  isBaseComponent = true;
+  icon = 'fa fa-th-list';
+  description =
+    '通过<code>source</code>拉取选项，只要有返回结果，就可以无限级别增加';
+  docLink = '/amis/zh-CN/components/form/chain-select';
+  tags = ['表单项'];
+  scaffold = {
+    type: 'chained-select',
+    label: '级联选择',
+    name: 'chained-select'
+  };
+  previewSchema: any = {
+    type: 'form',
+    className: 'text-left',
+    wrapWithPanel: false,
+    mode: 'horizontal',
+    body: {
+      ...this.scaffold
+    }
+  };
+
+  // 事件定义
+  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: '触发组件数据更新'
+    }
+  ];
+
+  panelTitle = '级联选择';
+  panelBody = [
+    getSchemaTpl('switchDefaultValue'),
+
+    {
+      type: 'input-text',
+      name: 'value',
+      label: '默认值',
+      visibleOn: 'typeof this.value !== "undefined"',
+      description: '请填入选项 Options 中 value 值'
+    },
+
+    getSchemaTpl('api', {
+      name: 'source',
+      label: '获取选项接口',
+      description: `<div>可用变量说明</div><ul>
+                                <li><code>value</code>当前值</li>
+                                <li><code>level</code>拉取级别，从 <code>1</code>开始。</li>
+                                <li><code>parentId</code>上一层选中的 <code>value</code> 值</li>
+                                <li><code>parent</code>上一层选中选项，包含 <code>label</code> 和 <code>value</code> 的值。</li>
+                            </ul>`
+    }),
+    getSchemaTpl('joinValues', {
+      visibleOn: true
+    }),
+    getSchemaTpl('delimiter', {
+      visibleOn: 'data.joinValues'
+    }),
+    getSchemaTpl('extractValue')
+  ];
+}
+
+registerEditorPlugin(ChainedSelectControlPlugin);