amis-editor 4.2.0-beta.0 → 5.1.8

package/src/plugin/Collapse.tsx

@@ -1,6 +1,7 @@
 import {registerEditorPlugin} from '../manager';
 import {BasePlugin, RegionConfig, BaseEventContext} from '../plugin';
 import {defaultValue, getSchemaTpl} from '../component/schemaTpl';
+import {tipedLabel} from '../component/control/BaseControl';
 
 export class CollapsePlugin extends BasePlugin {
   // 关联渲染器名字
@@ -28,99 +29,98 @@ export class CollapsePlugin extends BasePlugin {
   previewSchema = {
     ...this.scaffold
   };
-
   panelTitle = '折叠器';
+
+  panelJustify = true;
+
   panelBodyCreator = (context: BaseEventContext) => {
     return getSchemaTpl('tabs', [
       {
         title: '属性',
-        body: [
-          {
-            name: 'header',
-            label: '标题',
-            type: 'input-text',
-            pipeIn: defaultValue(
-              context?.schema?.title || context?.schema?.header || ''
-            ),
-            onChange: (value: any, oldValue: any, model: any, form: any) => {
-              // 转换一下旧版本的title字段
-              form.setValueByName('header', value);
-              form.setValueByName('title', undefined);
-            }
-          },
-          {
-            name: 'collapseHeader',
-            label: '展开标题',
-            type: 'input-text',
-            description: '折叠器处于展开状态时的标题'
-          },
+        body: getSchemaTpl('collapseGroup', [
           {
-            name: 'headerPosition',
-            label: '标题展示位置',
-            type: 'button-group-select',
-            size: 'sm',
-            pipeIn: defaultValue('top'),
-            options: [
+            title: '基本',
+            body: [
+              {
+                name: 'header',
+                label: '标题',
+                type: 'input-text',
+                pipeIn: defaultValue(
+                  context?.schema?.title || context?.schema?.header || ''
+                ),
+                onChange: (
+                  value: any,
+                  oldValue: any,
+                  model: any,
+                  form: any
+                ) => {
+                  // 转换一下旧版本的title字段
+                  form.setValueByName('header', value);
+                  form.setValueByName('title', undefined);
+                }
+              },
               {
-                label: '顶部',
-                value: 'top',
-                icon: 'fa fa-arrow-up'
+                name: 'collapseHeader',
+                label: tipedLabel('展开标题', '折叠器处于展开状态时的标题'),
+                type: 'input-text'
               },
               {
-                label: '底部',
-                value: 'bottom',
-                icon: 'fa fa-arrow-down'
-              }
+                name: 'headerPosition',
+                label: '标题位置',
+                type: 'button-group-select',
+                size: 'sm',
+                pipeIn: defaultValue('top'),
+                options: [
+                  {
+                    label: '顶部',
+                    value: 'top',
+                    icon: 'fa fa-arrow-up'
+                  },
+                  {
+                    label: '底部',
+                    value: 'bottom',
+                    icon: 'fa fa-arrow-down'
+                  }
+                ]
+              },
+              {
+                name: 'showArrow',
+                label: '显示图标',
+                mode: 'row',
+                inputClassName: 'inline-flex justify-between flex-row-reverse',
+                type: 'switch',
+                pipeIn: defaultValue(true)
+              },
+
+              getSchemaTpl('switch', {
+                name: 'collapsable',
+                label: '可折叠',
+                pipeIn: defaultValue(true)
+              })
             ]
           },
-          {
-            name: 'key',
-            label: '标识符',
-            type: 'input-text',
-            description: '折叠器key，主要用于设置默认展开状态'
-          },
-          {
-            name: 'showArrow',
-            label: '显示箭头',
-            mode: 'row',
-            inputClassName: 'inline-flex justify-between flex-row-reverse',
-            type: 'switch',
-            pipeIn: defaultValue(true)
-          },
-          {
-            name: 'collapsable',
-            type: 'switch',
-            mode: 'row',
-            inputClassName: 'inline-flex justify-between flex-row-reverse',
-            label: '可折叠',
-            pipeIn: defaultValue(true)
-          },
-          {
-            name: 'collapsed',
-            type: 'switch',
-            mode: 'row',
-            inputClassName: 'inline-flex justify-between flex-row-reverse',
-            label: '默认折叠'
-          }
-        ]
+          getSchemaTpl('status', {
+            disabled: true
+          })
+        ])
       },
       {
         title: '外观',
-        body: [
-          getSchemaTpl('className'),
-          getSchemaTpl('className', {
-            name: 'headingClassName',
-            label: '标题 CSS 类名'
-          }),
-          getSchemaTpl('className', {
-            name: 'bodyClassName',
-            label: '内容 CSS 类名'
+        body: getSchemaTpl('collapseGroup', [
+          getSchemaTpl('style:classNames', {
+            isFormItem: false,
+            schema: [
+              getSchemaTpl('className', {
+                name: 'headingClassName',
+                label: '标题类名'
+              }),
+              getSchemaTpl('className', {
+                name: 'bodyClassName',
+                label: '内容类名'
+              })
+            ]
           })
-        ]
-      },
-      {
-        title: '状态',
-        body: [getSchemaTpl('disabled'), getSchemaTpl('visible')]
+        ])
       }
     ]);
   };

package/src/plugin/CollapseGroup.tsx

@@ -1,13 +1,10 @@
 import {registerEditorPlugin} from '../manager';
-import {
-  BasePlugin,
-  RegionConfig,
-  RendererInfo,
-  BaseEventContext
-} from '../plugin';
+import {BasePlugin, RegionConfig, BaseEventContext} from '../plugin';
 import {defaultValue, getSchemaTpl} from '../component/schemaTpl';
 
 import type {CollapseSchema} from 'amis/lib/renderers/Collapse';
+import {tipedLabel} from '../component/control/BaseControl';
+import {isObject} from '../util';
 
 export class CollapseGroupPlugin extends BasePlugin {
   // 关联渲染器名字
@@ -28,6 +25,7 @@ export class CollapseGroupPlugin extends BasePlugin {
       {
         type: 'collapse',
         key: '1',
+        active: true,
         header: '标题1',
         body: [
           {
@@ -55,100 +53,184 @@ export class CollapseGroupPlugin extends BasePlugin {
     ...this.scaffold
   };
 
+  activeKeyData: any = [];
   panelTitle = '折叠面板';
-  panelBodyCreator = (context: BaseEventContext) => {
-    const collapseChildren: CollapseSchema[] = Array.isArray(
-      context?.schema?.body
-    )
-      ? context?.schema?.body.filter(
-          (item: CollapseSchema) => item.type === 'collapse' && item.key != null
-        )
-      : [];
 
+  panelJustify = true;
+
+  panelBodyCreator = (context: BaseEventContext) => {
     return [
       getSchemaTpl('tabs', [
         {
           title: '属性',
-          body: [
+          body: getSchemaTpl('collapseGroup', [
             {
-              name: 'activeKey',
-              label: '默认展开面板',
-              type: 'input-tag',
-              clearable: true,
-              joinValues: false,
-              extractValue: true,
-              options: collapseChildren.map((item: CollapseSchema) => item.key)
-            },
-            {
-              name: 'expandIconPosition',
-              label: '图标位置',
-              type: 'button-group-select',
-              pipeIn: defaultValue('left'),
-              options: [
+              title: '基本',
+              body: [
                 {
-                  label: '左边',
-                  value: 'left',
-                  icon: 'fa fa-align-left'
+                  name: 'expandIconPosition',
+                  label: '图标位置',
+                  type: 'button-group-select',
+
+                  pipeIn: defaultValue('left'),
+                  options: [
+                    {
+                      label: '左边',
+                      value: 'left',
+                      icon: 'fa fa-align-left'
+                    },
+                    {
+                      label: '右边',
+                      value: 'right',
+                      icon: 'fa fa-align-right'
+                    }
+                  ]
                 },
                 {
-                  label: '右边',
-                  value: 'right',
-                  icon: 'fa fa-align-right'
-                }
-              ]
-            },
-            {
-              name: 'accordion',
-              label: '手风琴模式',
-              mode: 'row',
-              inputClassName: 'inline-flex justify-between flex-row-reverse',
-              type: 'switch',
-              description: '手风琴模式，只允许单个面板展开',
-              pipeIn: defaultValue(false)
-            },
-            {
-              name: 'body',
-              type: 'combo',
-              label: '面板管理',
-              multiple: true,
-              addable: true,
-              addButtonText: '新增折叠器',
-              minLength: 1,
-              draggable: true,
-              draggableTip: '',
-              placeholder: '请添加折叠器',
-              items: [
-                {
-                  name: 'header',
-                  placeholder: '标题',
-                  type: 'input-text'
+                  type: 'ae-switch-more',
+                  label: '自定义图标',
+                  bulk: true,
+                  mode: 'normal',
+                  value: false,
+                  formType: 'extend',
+                  autoFocus: false,
+                  form: {
+                    body: [
+                      {
+                        label: '图标',
+                        name: 'expandIcon',
+                        type: 'icon-picker',
+                        className: 'fix-icon-picker-overflow',
+                        pipeIn: (value: any) => value?.icon,
+                        pipeOut: (value: any) => ({
+                          type: 'icon',
+                          vendor: '',
+                          icon: value
+                        })
+                      }
+                    ]
+                  },
+                  pipeIn: (value: string) => {
+                    if (typeof value === 'string' && value.length) {
+                      return {
+                        character: value
+                      };
+                    }
+                    return undefined;
+                  },
+                  pipeOut: (value: any) => {
+                    if (!isObject(value)) {
+                      return undefined;
+                    }
+                    return typeof value.character === 'string'
+                      ? value.character
+                      : undefined;
+                  }
                 },
                 {
-                  name: 'key',
-                  placeholder: '标识符',
-                  type: 'input-text',
-                  size: 'xs',
-                  unique: true
-                }
-              ],
-              scaffold: {
-                type: 'collapse',
-                header: '标题',
-                body: [
-                  {
-                    type: 'tpl',
-                    tpl: '内容',
-                    inline: false
+                  name: 'accordion',
+                  label: tipedLabel(
+                    '手风琴模式',
+                    '手风琴模式，只允许单个面板展开'
+                  ),
+                  mode: 'row',
+                  inputClassName:
+                    'inline-flex justify-between flex-row-reverse',
+                  type: 'switch',
+                  pipeIn: defaultValue(false)
+                },
+                getSchemaTpl('combo-container', {
+                  name: 'body',
+                  type: 'combo',
+                  label: '面板管理',
+                  mode: 'normal',
+                  multiple: true,
+                  addable: true,
+                  columnClassName: 'w-20',
+                  addButtonText: '新增折叠器',
+                  minLength: 1,
+                  draggable: true,
+                  draggableTip: '',
+                  placeholder: '请添加折叠器',
+                  items: [
+                    {
+                      type: 'container',
+                      columnClassName: 'flex-none',
+                      body: tipedLabel(
+                        [
+                          {
+                            name: 'active',
+                            type: 'checkbox'
+                          }
+                        ],
+                        '默认展开此面板'
+                      )
+                    },
+                    {
+                      name: 'header',
+                      placeholder: '标题',
+                      type: 'input-text'
+                    }
+                  ],
+                  onChange: (
+                    value: Array<any>,
+                    oldValue: Array<any>,
+                    model: any,
+                    form: any
+                  ) => {
+                    const activeKey = value.reduce((arr: any, item: any) => {
+                      item.active === true && arr.push(item.key);
+                      return arr;
+                    }, []);
+                    form.setValues({
+                      activeKey
+                    });
+                  },
+                  pipeOut: (value: any[], oldValue: any, data: any) => {
+                    const keys = value.map(item => item.key);
+                    const findMinCanUsedKey = (
+                      keys: string[],
+                      max: number
+                    ): void | string => {
+                      for (let i = 1; i <= max; i++) {
+                        if (!keys.includes(String(i))) {
+                          return String(i);
+                        }
+                      }
+                    };
+                    value.forEach(item => {
+                      if (!item.key) {
+                        const key = findMinCanUsedKey(keys, value.length);
+                        item.key = key;
+                        item.header = `标题${key}`;
+                      }
+                    });
+                    return value;
+                  },
+                  scaffold: {
+                    type: 'collapse',
+                    header: '标题',
+                    body: [
+                      {
+                        type: 'tpl',
+                        tpl: '内容',
+                        inline: false
+                      }
+                    ],
+                    key: ''
                   }
-                ],
-                key: ''
-              }
+                })
+              ]
             }
-          ]
+          ])
         },
         {
           title: '外观',
-          body: [getSchemaTpl('className')]
+          body: getSchemaTpl('collapseGroup', [
+            getSchemaTpl('style:classNames', {
+              isFormItem: false
+            })
+          ])
         }
       ])
     ];

package/src/plugin/Container.tsx

@@ -1,9 +1,6 @@
 import {registerEditorPlugin} from '../manager';
-import {
-  BaseEventContext,
-  BasePlugin,
-  RegionConfig} from '../plugin';
-import {getSchemaTpl} from '../component/schemaTpl';
+import {BaseEventContext, BasePlugin, RegionConfig} from '../plugin';
+import {defaultValue, getSchemaTpl} from '../component/schemaTpl';
 
 export class ContainerPlugin extends BasePlugin {
   // 关联渲染器名字
@@ -32,8 +29,64 @@ export class ContainerPlugin extends BasePlugin {
   ];
 
   panelTitle = '容器';
+
+  panelJustify = true;
+
   panelBodyCreator = (context: BaseEventContext) => {
-    return [getSchemaTpl('className'), getSchemaTpl('style')];
+    return getSchemaTpl('tabs', [
+      {
+        title: '属性',
+        body: getSchemaTpl('collapseGroup', [
+          {
+            title: '常用',
+            body: [
+              {
+                name: 'wrapperComponent',
+                label: '容器标签',
+                type: 'input-text',
+                options: [
+                  'article',
+                  'aside',
+                  'code',
+                  'div',
+                  'footer',
+                  'header',
+                  'p',
+                  'section'
+                ],
+                pipeIn: defaultValue('div'),
+                validations: {
+                  isAlphanumeric: true,
+                  matchRegexp: '/^(?!.*script).*$/' // 禁用一下script标签
+                },
+                validationErrors: {
+                  isAlpha: 'HTML标签不合法，请重新输入',
+                  matchRegexp: 'HTML标签不合法，请重新输入'
+                },
+                validateOnChange: false
+              }
+            ]
+          }
+        ])
+      },
+      {
+        title: '外观',
+        className: 'p-none',
+        body: getSchemaTpl('collapseGroup', [
+          ...getSchemaTpl('style:common'),
+          {
+            title: 'CSS 类名',
+            body: [
+              getSchemaTpl('className', {label: '外层CSS类名'}),
+              getSchemaTpl('className', {
+                name: 'bodyClassName',
+                label: '内容区CSS类名'
+              })
+            ]
+          }
+        ])
+      }
+    ]);
   };
 }
 

package/src/plugin/Custom.tsx

@@ -2,20 +2,14 @@
  * @file 自定义代码
  */
 
-import React from 'react';
 import {registerEditorPlugin} from '../manager';
 import {
   BasePlugin,
   BasicSubRenderInfo,
-  BaseEventContext,
   RendererEventContext,
-  SubRendererInfo,
-  BasicRendererInfo,
-  RendererInfoResolveEventContext,
-  PluginInterface
+  SubRendererInfo
 } from '../plugin';
-import {defaultValue, getSchemaTpl} from '../component/schemaTpl';
-import {isArray} from 'lodash';
+import {getSchemaTpl} from '../component/schemaTpl';
 
 export class CustomPlugin extends BasePlugin {
   // 关联渲染器名字

package/src/plugin/CustomRegion.tsx

@@ -9,10 +9,10 @@ import {
   BasicRendererInfo,
   RendererInfoResolveEventContext,
   PluginInterface,
-  RegionConfig,
+  RegionConfig
 } from '../plugin';
 import {defaultValue, getSchemaTpl} from '../component/schemaTpl';
-import {isArray} from 'lodash';
+import isArray from 'lodash/isArray';
 
 export class CustomPlugin extends BasePlugin {
   // 关联渲染器名字
@@ -30,7 +30,8 @@ export class CustomPlugin extends BasePlugin {
   icon = 'fa fa-gears';
   scaffold = {
     type: 'custom',
-    html: '<div>\n<h2>hello, world!</h2>\n<div id="customBox">自定义容器区域</div>\n</div>',
+    html:
+      '<div>\n<h2>hello, world!</h2>\n<div id="customBox">自定义容器区域</div>\n</div>',
     onMount: `this.renderChild('body', props.body, document.getElementById('customBox'));`,
     body: [
       {