amis-editor 5.2.0 → 5.2.1-beta.15

package/src/plugin/Collapse.tsx

@@ -1,136 +0,0 @@
-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 {
-  // 关联渲染器名字
-  rendererName = 'collapse';
-  $schema = '/schemas/CollapseSchema.json';
-
-  // 组件名称
-  name = '折叠器';
-  isBaseComponent = true;
-  description = '折叠器，可以将内容区展开或隐藏，保持页面的整洁';
-  docLink = '/amis/zh-CN/components/collapse';
-  tags = ['展示'];
-  icon = 'fa fa-window-minimize';
-  scaffold = {
-    type: 'collapse',
-    header: '标题',
-    body: [
-      {
-        type: 'tpl',
-        tpl: '内容',
-        inline: false
-      }
-    ]
-  };
-  previewSchema = {
-    ...this.scaffold
-  };
-  panelTitle = '折叠器';
-
-  panelJustify = true;
-
-  panelBodyCreator = (context: BaseEventContext) => {
-    return getSchemaTpl('tabs', [
-      {
-        title: '属性',
-        body: getSchemaTpl('collapseGroup', [
-          {
-            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: tipedLabel('展开标题', '折叠器处于展开状态时的标题'),
-                type: 'input-text'
-              },
-              {
-                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)
-              })
-            ]
-          },
-          getSchemaTpl('status', {
-            disabled: true
-          })
-        ])
-      },
-      {
-        title: '外观',
-        body: getSchemaTpl('collapseGroup', [
-          getSchemaTpl('style:classNames', {
-            isFormItem: false,
-            schema: [
-              getSchemaTpl('className', {
-                name: 'headingClassName',
-                label: '标题类名'
-              }),
-              getSchemaTpl('className', {
-                name: 'bodyClassName',
-                label: '内容类名'
-              })
-            ]
-          })
-        ])
-      }
-    ]);
-  };
-
-  regions: Array<RegionConfig> = [
-    {
-      key: 'body',
-      label: '内容区'
-    }
-  ];
-}
-
-registerEditorPlugin(CollapsePlugin);

package/src/plugin/CollapseGroup.tsx

@@ -1,249 +0,0 @@
-import {registerEditorPlugin} from '../manager';
-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 {
-  // 关联渲染器名字
-  rendererName = 'collapse-group';
-  $schema = '/schemas/CollapseGroupSchema.json';
-
-  // 组件名称
-  name = '折叠面板';
-  isBaseComponent = true;
-  description =
-    '折叠面板，当信息量较大且分类较多时，可使用折叠面板进行分类收纳。';
-  tags = ['展示', '容器'];
-  icon = 'fa fa-align-justify';
-  scaffold = {
-    type: 'collapse-group',
-    activeKey: ['1'],
-    body: [
-      {
-        type: 'collapse',
-        key: '1',
-        active: true,
-        header: '标题1',
-        body: [
-          {
-            type: 'tpl',
-            tpl: '这里是内容1',
-            inline: false
-          }
-        ]
-      },
-      {
-        type: 'collapse',
-        key: '2',
-        header: '标题2',
-        body: [
-          {
-            type: 'tpl',
-            tpl: '这里是内容1',
-            inline: false
-          }
-        ]
-      }
-    ]
-  };
-  previewSchema = {
-    ...this.scaffold
-  };
-
-  activeKeyData: any = [];
-  panelTitle = '折叠面板';
-
-  panelJustify = true;
-
-  panelBodyCreator = (context: BaseEventContext) => {
-    return [
-      getSchemaTpl('tabs', [
-        {
-          title: '属性',
-          body: getSchemaTpl('collapseGroup', [
-            {
-              title: '基本',
-              body: [
-                {
-                  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'
-                    }
-                  ]
-                },
-                {
-                  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: '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: ''
-                  }
-                })
-              ]
-            }
-          ])
-        },
-        {
-          title: '外观',
-          body: getSchemaTpl('collapseGroup', [
-            getSchemaTpl('style:classNames', {
-              isFormItem: false
-            })
-          ])
-        }
-      ])
-    ];
-  };
-
-  regions: Array<RegionConfig> = [
-    {
-      key: 'body',
-      label: '内容区',
-      renderMethod: 'render',
-      insertPosition: 'inner'
-    }
-  ];
-}
-
-registerEditorPlugin(CollapseGroupPlugin);

package/src/plugin/Container.tsx

@@ -1,93 +0,0 @@
-import {registerEditorPlugin} from '../manager';
-import {BaseEventContext, BasePlugin, RegionConfig} from '../plugin';
-import {defaultValue, getSchemaTpl} from '../component/schemaTpl';
-
-export class ContainerPlugin extends BasePlugin {
-  // 关联渲染器名字
-  rendererName = 'container';
-  $schema = '/schemas/ContainerSchema.json';
-
-  // 组件名称
-  name = '容器';
-  isBaseComponent = true;
-  description = '一个简单的容器，可以将多个渲染器放置在一起。';
-  tags = ['容器'];
-  icon = 'fa fa-square-o';
-  scaffold = {
-    type: 'container',
-    body: '内容'
-  };
-  previewSchema = {
-    ...this.scaffold
-  };
-
-  regions: Array<RegionConfig> = [
-    {
-      key: 'body',
-      label: '内容区'
-    }
-  ];
-
-  panelTitle = '容器';
-
-  panelJustify = true;
-
-  panelBodyCreator = (context: BaseEventContext) => {
-    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类名'
-              })
-            ]
-          }
-        ])
-      }
-    ]);
-  };
-}
-
-registerEditorPlugin(ContainerPlugin);

package/src/plugin/Custom.tsx

@@ -1,122 +0,0 @@
-/**
- * @file 自定义代码
- */
-
-import {registerEditorPlugin} from '../manager';
-import {
-  BasePlugin,
-  BasicSubRenderInfo,
-  RendererEventContext,
-  SubRendererInfo
-} from '../plugin';
-import {getSchemaTpl} from '../component/schemaTpl';
-
-export class CustomPlugin extends BasePlugin {
-  // 关联渲染器名字
-  rendererName = 'custom';
-  $schema = '/schemas/CustomSchema.json';
-
-  // 组件名称
-  name = '自定义代码';
-  isBaseComponent = true;
-  description = '通过内嵌代码来实现功能';
-  tags = ['功能'];
-  icon = 'fa fa-gears';
-  docLink = '/amis/zh-CN/components/custom';
-  scaffold = {
-    type: 'custom',
-    html: '<div><h2>hello, world!</h2></div>',
-    onMount: `
-      const button = document.createElement('button');
-      button.innerText = '点击修改姓名';
-      button.onclick = event => {
-        event.preventDefault();
-      };
-      dom.appendChild(button);`
-  };
-  previewSchema = {
-    ...this.scaffold
-  };
-
-  panelTitle = '自定义代码';
-  panelBody = [
-    getSchemaTpl('fieldSet', {
-      title: 'HTML 内容',
-      body: [
-        {
-          label: 'HTML 内容',
-          name: 'html',
-          type: 'editor',
-          allowFullscreen: true
-        }
-      ]
-    }),
-    getSchemaTpl('fieldSet', {
-      title: 'onMount',
-      body: [
-        {
-          name: 'onMount',
-          type: 'editor',
-          allowFullscreen: true,
-          size: 'xxl',
-          label: 'onMount 代码',
-          options: {
-            lineNumbers: 'off',
-            glyphMargin: false,
-            lineDecorationsWidth: 0,
-            lineNumbersMinChars: 0
-          }
-        }
-      ]
-    }),
-    getSchemaTpl('fieldSet', {
-      title: 'onUpdate',
-      body: [
-        {
-          name: 'onUpdate',
-          type: 'editor',
-          allowFullscreen: true,
-          size: 'xxl',
-          label: 'onUpdate 代码'
-        }
-      ]
-    }),
-    getSchemaTpl('fieldSet', {
-      title: 'onUnmount',
-      body: [
-        {
-          name: 'onUnmount',
-          type: 'editor',
-          allowFullscreen: true,
-          size: 'xxl',
-          label: 'onUnmount 代码'
-        }
-      ]
-    })
-  ];
-
-  buildSubRenderers(
-    context: RendererEventContext,
-    renderers: Array<SubRendererInfo>
-  ): BasicSubRenderInfo | Array<BasicSubRenderInfo> | void {
-    const info = super.buildSubRenderers.apply(this, arguments);
-    // 只有 form 下才调 onChange
-    // if (
-    //   context.info.renderer.name === 'form' ||
-    //   context.node.childRegions.some(i => i.region === 'body')
-    // ) {
-    (info as BasicSubRenderInfo).scaffold.onMount = `
-        const button = document.createElement('button');
-        button.innerText = '点击修改姓名ddd';
-        button.onclick = event => {
-          onChange('new name');
-          event.preventDefault();
-        };
-        dom.appendChild(button);`;
-    // }
-
-    return info;
-  }
-}
-
-registerEditorPlugin(CustomPlugin);