amis-editor 4.2.0-beta.3 → 5.1.8

package/src/plugin/Button.tsx

@@ -6,8 +6,15 @@ import {
   PluginInterface,
   RendererInfoResolveEventContext
 } from '../plugin';
-import {getSchemaTpl} from '../component/schemaTpl';
+import {defaultValue, getSchemaTpl} from '../component/schemaTpl';
+import {
+  BUTTON_DEFAULT_ACTION,
+  tipedLabel
+} from '../component/control/BaseControl';
+import {getEventControlConfig} from '../util';
 import {SchemaObject} from 'amis/lib/Schema';
+import {RendererAction, RendererEvent} from '../event-action';
+import {getOldActionSchema} from '../event-action/schema';
 
 export class ButtonPlugin extends BasePlugin {
   // 关联渲染器名字
@@ -25,11 +32,7 @@ export class ButtonPlugin extends BasePlugin {
   scaffold: SchemaObject = {
     type: 'button',
     label: '按钮',
-    actionType: 'dialog',
-    dialog: {
-      title: '系统提示',
-      body: '对你点击了'
-    }
+    ...BUTTON_DEFAULT_ACTION
   };
   previewSchema: any = {
     type: 'button',
@@ -37,204 +40,270 @@ export class ButtonPlugin extends BasePlugin {
   };
 
   panelTitle = '按钮';
+
+  // 事件定义
+  events: RendererEvent[] = [
+    {
+      eventName: 'click',
+      eventLabel: '点击',
+      description: '点击时触发',
+      defaultShow: true
+    },
+    {
+      eventName: 'mouseenter',
+      eventLabel: '鼠标移入',
+      description: '鼠标移入时触发'
+    },
+    {
+      eventName: 'mouseleave',
+      eventLabel: '鼠标移出',
+      description: '鼠标移出时触发'
+    }
+    // {
+    //   eventName: 'doubleClick',
+    //   eventLabel: '双击',
+    //   description: '鼠标双击事件'
+    // }
+  ];
+
+  // 动作定义
+  actions: RendererAction[] = [];
+
+  panelJustify = true;
+
   panelBodyCreator = (context: BaseEventContext) => {
     const isInDialog = /(?:\/|^)dialog\/.+$/.test(context.path);
-    const isInDropdown = /(?:\/|^)dropdown-button\/.+$/.test(context.path);
+    const isInDrawer = /(?:\/|^)drawer\/.+$/.test(context.path);
 
-    return [
-      getSchemaTpl('tabs', [
-        {
-          title: '常规',
-          body: [
-            {
-              label: '名称',
-              type: 'input-text',
-              name: 'label'
-            },
+    // TODO: 旧方法无法判断，context 中没有 dropdown-button 的信息，临时实现
+    // const isInDropdown = /(?:\/|^)dropdown-button\/.+$/.test(context.path);
+    const isInDropdown = /^button-group\/.+$/.test(context.path);
 
-            {
-              label: '类型',
-              type: 'button-group-select',
-              name: 'type',
-              size: 'sm',
-              // mode: 'inline',
-              // className: 'w-full',
-              options: [
-                {
-                  label: '按钮',
-                  value: 'button'
-                },
+    return getSchemaTpl('tabs', [
+      {
+        title: '属性',
+        body: getSchemaTpl('collapseGroup', [
+          {
+            title: '基本',
+            body: [
+              {
+                label: '名称',
+                type: 'input-text',
+                name: 'label'
+              },
 
-                {
-                  label: '提交',
-                  value: 'submit'
-                },
+              {
+                label: '类型',
+                type: 'button-group-select',
+                name: 'type',
+                size: 'sm',
+                options: [
+                  {
+                    label: '按钮',
+                    value: 'button'
+                  },
 
-                {
-                  label: '重置',
-                  value: 'reset'
-                }
-              ]
-            },
+                  {
+                    label: '提交',
+                    value: 'submit'
+                  },
+
+                  {
+                    label: '重置',
+                    value: 'reset'
+                  }
+                ]
+              },
 
-            {
-              type: 'input-text',
-              name: 'tooltip',
-              hidden: isInDropdown,
-              label: '提示文案',
-              description: '鼠标停留时弹出该内容'
-            },
+              getSchemaTpl('switch', {
+                name: 'close',
+                label: '是否关闭',
+                clearValueOnHidden: true,
+                labelRemark: `指定此次操作完后关闭当前 ${
+                  isInDialog ? 'dialog' : 'drawer'
+                }`,
+                hidden: !isInDialog && !isInDrawer,
+                pipeIn: defaultValue(false)
+              }),
 
-            {
-              type: 'button-group-select',
-              name: 'tooltipPlacement',
-              visibleOn: 'data.tooltip || data.disabledTip',
-              label: '提示信息位置',
-              size: 'sm',
-              mode: 'inline',
-              className: 'w-full',
-              value: 'bottom',
-              options: [
-                {
-                  label: '上',
-                  value: 'top'
-                },
-                {
-                  label: '右',
-                  value: 'right'
-                },
-                {
-                  label: '下',
-                  value: 'bottom'
-                },
-                {
-                  label: '左',
-                  value: 'left'
+              {
+                type: 'ae-switch-more',
+                mode: 'normal',
+                formType: 'extend',
+                label: tipedLabel(
+                  '二次确认',
+                  '点击后先询问用户，由手动确认后再执行动作，避免误触。可用<code>\\${xxx}</code>取值。'
+                ),
+                form: {
+                  body: [
+                    {
+                      name: 'confirmText',
+                      type: 'input-text',
+                      label: '确认内容'
+                    }
+                  ]
                 }
-              ]
-            },
+              },
 
-            getSchemaTpl('icon'),
-            {
-              type: 'button-group-select',
-              label: '图标位置',
-              clearable: true,
-              visibleOn: 'this.icon',
-              name: 'iconClassName',
-              size: 'sm',
-              pipeIn: (value: any) =>
-                typeof value === 'string' &&
-                /\bpull\-(left|right)\b/.test(value)
-                  ? RegExp.$1
-                  : '',
-              pipeOut: (value: any, originValue: string) => {
-                return ((originValue as string) || '')
-                  .replace(/\bpull\-(left|right)\b/, '')
-                  .trim() + value
-                  ? `pull-${value}`
-                  : '';
+              {
+                type: 'ae-switch-more',
+                formType: 'extend',
+                mode: 'normal',
+                label: '气泡提示',
+                hidden: isInDropdown,
+                form: {
+                  body: [
+                    {
+                      type: 'input-text',
+                      name: 'tooltip',
+                      label: tipedLabel(
+                        '正常提示',
+                        '正常状态下的提示内容，不填则不弹出提示。可用<code>\\${xxx}</code>取值。'
+                      )
+                    },
+                    {
+                      type: 'input-text',
+                      name: 'disabledTip',
+                      label: tipedLabel(
+                        '禁用提示',
+                        '禁用状态下的提示内容，不填则弹出正常提示。可用<code>\\${xxx}</code>取值。'
+                      ),
+                      clearValueOnHidden: true,
+                      visibleOn: 'data.tooltipTrigger !== "focus"'
+                    },
+                    {
+                      type: 'button-group-select',
+                      name: 'tooltipTrigger',
+                      label: '触发方式',
+                      // visibleOn: 'data.tooltip || data.disabledTip',
+                      size: 'sm',
+                      options: [
+                        {
+                          label: '鼠标悬浮',
+                          value: 'hover'
+                        },
+                        {
+                          label: '聚焦',
+                          value: 'focus'
+                        }
+                      ],
+                      pipeIn: defaultValue('hover')
+                    },
+                    {
+                      type: 'button-group-select',
+                      name: 'tooltipPlacement',
+                      // visibleOn: 'data.tooltip || data.disabledTip',
+                      label: '提示位置',
+                      size: 'sm',
+                      options: [
+                        {
+                          label: '上',
+                          value: 'top'
+                        },
+                        {
+                          label: '右',
+                          value: 'right'
+                        },
+                        {
+                          label: '下',
+                          value: 'bottom'
+                        },
+                        {
+                          label: '左',
+                          value: 'left'
+                        }
+                      ],
+                      pipeIn: defaultValue('bottom')
+                    }
+                  ]
+                }
               },
-              options: [
-                {label: '居左', value: 'left'},
-                {label: '居右', value: 'right'}
-              ]
-            },
 
-            getSchemaTpl('size', {
-              label: '尺寸'
-            }),
-            {
-              label: '样式',
-              type: 'select',
-              name: 'level',
-              hidden: isInDropdown,
-              clearable: false,
-              btnActiveLevel: '',
-              options: [
-                {
-                  label: '默认',
-                  value: 'default',
-                  level: 'default'
-                },
-                {
-                  label: '链接',
-                  value: 'link',
-                  level: 'link'
-                },
-                {
-                  label: '主色',
-                  value: 'primary',
-                  level: 'primary'
-                },
+              getSchemaTpl('icon', {
+                label: '左侧图标'
+              }),
 
-                {
-                  label: '淡色',
-                  value: 'light',
-                  level: 'light'
-                },
-                {
-                  label: '深色',
-                  value: 'dark',
-                  level: 'dark'
-                },
+              getSchemaTpl('icon', {
+                name: 'rightIcon',
+                label: '右侧图标'
+              })
+            ]
+          },
+          getSchemaTpl('status', {
+            disabled: true
+          })
+        ])
+      },
+      {
+        title: '外观',
+        body: getSchemaTpl('collapseGroup', [
+          {
+            title: '基本',
+            body: [
+              getSchemaTpl('buttonLevel', {
+                label: '样式',
+                name: 'level',
+                hidden: isInDropdown
+              }),
 
-                {
-                  label: '提示',
-                  value: 'info',
-                  level: 'info'
-                },
-                {
-                  label: '成功',
-                  value: 'success',
-                  level: 'success'
-                },
-                {
-                  label: '警告',
-                  value: 'warning',
-                  level: 'warning'
-                },
-                {
-                  label: '严重',
-                  value: 'danger',
-                  level: 'danger'
-                }
-              ]
-            },
+              getSchemaTpl('buttonLevel', {
+                label: '高亮样式',
+                name: 'activeLevel',
+                hidden: isInDropdown,
+                visibleOn: 'data.active'
+              }),
 
-            {
-              name: 'block',
-              type: 'switch',
-              label: '块状显示',
-              mode: 'inline'
-            },
+              getSchemaTpl('switch', {
+                name: 'block',
+                label: '块状显示',
+                hidden: isInDropdown
+              }),
 
-            getSchemaTpl('className', {
-              label: '按钮 CSS 类名'
-            }),
-            getSchemaTpl('className', {
-              name: 'iconClassName',
-              label: '图标 CSS 类名',
-              visibleOn: 'this.icon'
-            })
-          ]
-        },
-        {
-          title: '显隐',
-          body: [
-            getSchemaTpl('disabled', [
-              {
-                type: 'input-text',
-                name: 'disabledTip',
-                label: '禁用提示信息',
-                hidden: isInDropdown,
-                description: '按钮被禁用时，鼠标停留弹出该段文字'
-              }
-            ]),
-            getSchemaTpl('visible')
-          ]
-        }
-      ])
-    ];
+              getSchemaTpl('size', {
+                label: '尺寸',
+                hidden: isInDropdown
+              })
+            ]
+          },
+          getSchemaTpl('style:classNames', {
+            isFormItem: false,
+            schema: [
+              getSchemaTpl('className', {
+                name: 'iconClassName',
+                label: '左侧图标',
+                visibleOn: 'this.icon'
+              }),
+              getSchemaTpl('className', {
+                name: 'rightIconClassName',
+                label: '右侧图标',
+                visibleOn: 'this.rightIcon'
+              })
+            ]
+          })
+        ])
+      },
+      {
+        title: '事件',
+        className: 'p-none',
+        body:
+          this.manager?.config.actionOptions?.showOldEntry !== false &&
+          (!!context.schema.actionType ||
+            ['submit', 'reset'].includes(context.schema.type))
+            ? [
+                getSchemaTpl('eventControl', {
+                  name: 'onEvent',
+                  ...getEventControlConfig(this.manager, context)
+                }),
+                getOldActionSchema(this.manager, context)
+              ]
+            : [
+                getSchemaTpl('eventControl', {
+                  name: 'onEvent',
+                  ...getEventControlConfig(this.manager, context)
+                })
+              ]
+      }
+    ]);
   };
 
   /**

package/src/plugin/ButtonGroup.tsx

@@ -1,5 +1,10 @@
 import {registerEditorPlugin} from '../manager';
-import {BasePlugin, RegionConfig} from '../plugin';
+import {BasePlugin, RegionConfig, BaseEventContext} from '../plugin';
+import {getSchemaTpl} from '../component/schemaTpl';
+import {
+  BUTTON_DEFAULT_ACTION,
+  formItemControl
+} from '../component/control/BaseControl';
 
 export class ButtonGroupPlugin extends BasePlugin {
   // 关联渲染器名字
@@ -19,21 +24,13 @@ export class ButtonGroupPlugin extends BasePlugin {
       {
         type: 'button',
         label: '按钮1',
-        actionType: 'dialog',
-        dialog: {
-          title: '系统提示',
-          body: '对你点击了'
-        }
+        ...BUTTON_DEFAULT_ACTION
       },
 
       {
         type: 'button',
         label: '按钮2',
-        actionType: 'dialog',
-        dialog: {
-          title: '系统提示',
-          body: '对你点击了'
-        }
+        ...BUTTON_DEFAULT_ACTION
       }
     ]
   };
@@ -42,34 +39,98 @@ export class ButtonGroupPlugin extends BasePlugin {
   };
 
   panelTitle = '按钮组';
-  panelBody = [
-    {
-      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,
-          className: 'p-t-xs',
-          tpl:
-            '<span class="label label-default"><% if (data.type === "button-group") { %> 按钮组 <% } else { %><%= data.label %><% if (data.icon) { %><i class="<%= data.icon %>"/><% }%><% } %></span>'
+
+  panelJustify = true;
+  panelBodyCreator = (context: BaseEventContext) => {
+    return formItemControl(
+      {
+        common: {
+          replace: true,
+          body: [
+            {
+              type: 'button-group-select',
+              name: 'vertical',
+              label: '布局方向',
+              value: false,
+              options: [
+                {
+                  label: '水平',
+                  value: false
+                },
+                {
+                  label: '垂直',
+                  value: true
+                }
+              ]
+            },
+            {
+              type: 'switch',
+              name: 'tiled',
+              label: '平铺模式',
+              inputClassName: 'is-inline',
+              value: false
+            }
+          ]
+        },
+        option: {
+          title: '按钮管理',
+          replace: true,
+          body: [
+            {
+              name: 'buttons',
+              mode: 'normal',
+              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: '按钮'
+              }
+            }
+          ]
+        },
+        status: {
+          replace: true,
+          body: [getSchemaTpl('hidden')]
+        },
+        style: {
+          replace: true,
+          body: [
+            getSchemaTpl('size'),
+
+            getSchemaTpl('className'),
+
+            getSchemaTpl('className', {
+              label: '按钮 CSS 类名',
+              name: 'btnClassName'
+            })
+          ]
+        },
+        validation: {
+          hidden: true
+        },
+        event: {
+          hidden: true
         }
-      ],
-      addButtonText: '新增按钮',
-      scaffold: {
-        type: 'button',
-        label: '按钮'
-      }
-    }
-  ];
+      },
+      context
+    );
+  };
 
   regions: Array<RegionConfig> = [
     {

package/src/plugin/ButtonToolbar.tsx

@@ -5,33 +5,27 @@ export class ButtonToolbarPlugin extends BasePlugin {
   // 关联渲染器名字
   rendererName = 'button-toolbar';
   $schema = '/schemas/ButtonToolbarSchema.json';
-
   // 组件名称
   name = '按钮工具栏';
   isBaseComponent = true;
   description = '可以用来放置多个按钮或者按钮组，按钮之间会存在一定的间隔';
   tags = ['按钮'];
   icon = 'fa fa-ellipsis-h';
+  /**
+   * 组件选择面板中隐藏，和ButtonGroup合并
+   */
+  disabledRendererPlugin = true;
+
   scaffold = {
     type: 'button-toolbar',
     buttons: [
       {
         type: 'button',
-        label: '按钮1',
-        actionType: 'dialog',
-        dialog: {
-          title: '系统提示',
-          body: '对你点击了'
-        }
+        label: '按钮1'
       },
       {
         type: 'button',
-        label: '按钮2',
-        actionType: 'dialog',
-        dialog: {
-          title: '系统提示',
-          body: '对你点击了'
-        }
+        label: '按钮2'
       }
     ]
   };