amis-editor 4.2.0-beta.0 → 5.2.0-beta.0

package/lib/plugin/Collapse.js

@@ -0,0 +1,138 @@
+/**
+ * amis-editor v5.2.0-beta.0
+ * Copyright 2018-2022 @fex
+ */
+
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var tslib = require('tslib');
+var AMisCodeEditor = require('amis-editor-core');
+var BaseControl = require('../component/BaseControl.js');
+
+var CollapsePlugin = /** @class */ (function (_super) {
+    tslib.__extends(CollapsePlugin, _super);
+    function CollapsePlugin() {
+        var _this = _super !== null && _super.apply(this, arguments) || this;
+        // 关联渲染器名字
+        _this.rendererName = 'collapse';
+        _this.$schema = '/schemas/CollapseSchema.json';
+        // 组件名称
+        _this.name = '折叠器';
+        _this.isBaseComponent = true;
+        _this.description = '折叠器，可以将内容区展开或隐藏，保持页面的整洁';
+        _this.docLink = '/amis/zh-CN/components/collapse';
+        _this.tags = ['展示'];
+        _this.icon = 'fa fa-window-minimize';
+        _this.scaffold = {
+            type: 'collapse',
+            header: '标题',
+            body: [
+                {
+                    type: 'tpl',
+                    tpl: '内容',
+                    inline: false
+                }
+            ]
+        };
+        _this.previewSchema = tslib.__assign({}, _this.scaffold);
+        _this.panelTitle = '折叠器';
+        _this.panelJustify = true;
+        _this.panelBodyCreator = function (context) {
+            var _a, _b;
+            return AMisCodeEditor.getSchemaTpl('tabs', [
+                {
+                    title: '属性',
+                    body: AMisCodeEditor.getSchemaTpl('collapseGroup', [
+                        {
+                            title: '基本',
+                            body: [
+                                {
+                                    name: 'header',
+                                    label: '标题',
+                                    type: 'input-text',
+                                    pipeIn: AMisCodeEditor.defaultValue(((_a = context === null || context === void 0 ? void 0 : context.schema) === null || _a === void 0 ? void 0 : _a.title) || ((_b = context === null || context === void 0 ? void 0 : context.schema) === null || _b === void 0 ? void 0 : _b.header) || ''),
+                                    onChange: function (value, oldValue, model, form) {
+                                        // 转换一下旧版本的title字段
+                                        form.setValueByName('header', value);
+                                        form.setValueByName('title', undefined);
+                                    }
+                                },
+                                {
+                                    name: 'collapseHeader',
+                                    label: BaseControl.tipedLabel('展开标题', '折叠器处于展开状态时的标题'),
+                                    type: 'input-text'
+                                },
+                                {
+                                    name: 'headerPosition',
+                                    label: '标题位置',
+                                    type: 'button-group-select',
+                                    size: 'sm',
+                                    pipeIn: AMisCodeEditor.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: AMisCodeEditor.defaultValue(true)
+                                },
+                                AMisCodeEditor.getSchemaTpl('switch', {
+                                    name: 'collapsable',
+                                    label: '可折叠',
+                                    pipeIn: AMisCodeEditor.defaultValue(true)
+                                })
+                            ]
+                        },
+                        AMisCodeEditor.getSchemaTpl('status', {
+                            disabled: true
+                        })
+                    ])
+                },
+                {
+                    title: '外观',
+                    body: AMisCodeEditor.getSchemaTpl('collapseGroup', [
+                        AMisCodeEditor.getSchemaTpl('style:classNames', {
+                            isFormItem: false,
+                            schema: [
+                                AMisCodeEditor.getSchemaTpl('className', {
+                                    name: 'headingClassName',
+                                    label: '标题类名'
+                                }),
+                                AMisCodeEditor.getSchemaTpl('className', {
+                                    name: 'bodyClassName',
+                                    label: '内容类名'
+                                })
+                            ]
+                        })
+                    ])
+                }
+            ]);
+        };
+        _this.regions = [
+            {
+                key: 'body',
+                label: '内容区'
+            }
+        ];
+        return _this;
+    }
+    return CollapsePlugin;
+}(AMisCodeEditor.BasePlugin));
+AMisCodeEditor.registerEditorPlugin(CollapsePlugin);
+
+exports.CollapsePlugin = CollapsePlugin;

package/{dist → lib}/plugin/CollapseGroup.d.ts

@@ -1,4 +1,4 @@
-import { BasePlugin, RegionConfig, BaseEventContext } from '../plugin';
+import { BasePlugin, RegionConfig, BaseEventContext } from 'amis-editor-core';
 export declare class CollapseGroupPlugin extends BasePlugin {
     rendererName: string;
     $schema: string;
@@ -10,21 +10,42 @@ export declare class CollapseGroupPlugin extends BasePlugin {
     scaffold: {
         type: string;
         activeKey: string[];
-        body: {
+        body: ({
             type: string;
             key: string;
+            active: boolean;
             header: string;
             body: {
                 type: string;
                 tpl: string;
                 inline: boolean;
             }[];
-        }[];
+        } | {
+            type: string;
+            key: string;
+            header: string;
+            body: {
+                type: string;
+                tpl: string;
+                inline: boolean;
+            }[];
+            active?: undefined;
+        })[];
     };
     previewSchema: {
         type: string;
         activeKey: string[];
-        body: {
+        body: ({
+            type: string;
+            key: string;
+            active: boolean;
+            header: string;
+            body: {
+                type: string;
+                tpl: string;
+                inline: boolean;
+            }[];
+        } | {
             type: string;
             key: string;
             header: string;
@@ -33,9 +54,12 @@ export declare class CollapseGroupPlugin extends BasePlugin {
                 tpl: string;
                 inline: boolean;
             }[];
-        }[];
+            active?: undefined;
+        })[];
     };
+    activeKeyData: any;
     panelTitle: string;
+    panelJustify: boolean;
     panelBodyCreator: (context: BaseEventContext) => any[];
     regions: Array<RegionConfig>;
 }

package/lib/plugin/CollapseGroup.js

@@ -0,0 +1,237 @@
+/**
+ * amis-editor v5.2.0-beta.0
+ * Copyright 2018-2022 @fex
+ */
+
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var tslib = require('tslib');
+var AMisCodeEditor = require('amis-editor-core');
+var BaseControl = require('../component/BaseControl.js');
+
+var CollapseGroupPlugin = /** @class */ (function (_super) {
+    tslib.__extends(CollapseGroupPlugin, _super);
+    function CollapseGroupPlugin() {
+        var _this = _super !== null && _super.apply(this, arguments) || this;
+        // 关联渲染器名字
+        _this.rendererName = 'collapse-group';
+        _this.$schema = '/schemas/CollapseGroupSchema.json';
+        // 组件名称
+        _this.name = '折叠面板';
+        _this.isBaseComponent = true;
+        _this.description = '折叠面板，当信息量较大且分类较多时，可使用折叠面板进行分类收纳。';
+        _this.tags = ['展示', '容器'];
+        _this.icon = 'fa fa-align-justify';
+        _this.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
+                        }
+                    ]
+                }
+            ]
+        };
+        _this.previewSchema = tslib.__assign({}, _this.scaffold);
+        _this.activeKeyData = [];
+        _this.panelTitle = '折叠面板';
+        _this.panelJustify = true;
+        _this.panelBodyCreator = function (context) {
+            return [
+                AMisCodeEditor.getSchemaTpl('tabs', [
+                    {
+                        title: '属性',
+                        body: AMisCodeEditor.getSchemaTpl('collapseGroup', [
+                            {
+                                title: '基本',
+                                body: [
+                                    {
+                                        name: 'expandIconPosition',
+                                        label: '图标位置',
+                                        type: 'button-group-select',
+                                        pipeIn: AMisCodeEditor.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: function (value) { return value === null || value === void 0 ? void 0 : value.icon; },
+                                                    pipeOut: function (value) { return ({
+                                                        type: 'icon',
+                                                        vendor: '',
+                                                        icon: value
+                                                    }); }
+                                                }
+                                            ]
+                                        },
+                                        pipeIn: function (value) {
+                                            if (typeof value === 'string' && value.length) {
+                                                return {
+                                                    character: value
+                                                };
+                                            }
+                                            return undefined;
+                                        },
+                                        pipeOut: function (value) {
+                                            if (!AMisCodeEditor.isObject(value)) {
+                                                return undefined;
+                                            }
+                                            return typeof value.character === 'string'
+                                                ? value.character
+                                                : undefined;
+                                        }
+                                    },
+                                    {
+                                        name: 'accordion',
+                                        label: BaseControl.tipedLabel('手风琴模式', '手风琴模式，只允许单个面板展开'),
+                                        mode: 'row',
+                                        inputClassName: 'inline-flex justify-between flex-row-reverse',
+                                        type: 'switch',
+                                        pipeIn: AMisCodeEditor.defaultValue(false)
+                                    },
+                                    AMisCodeEditor.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: BaseControl.tipedLabel([
+                                                    {
+                                                        name: 'active',
+                                                        type: 'checkbox'
+                                                    }
+                                                ], '默认展开此面板')
+                                            },
+                                            {
+                                                name: 'header',
+                                                placeholder: '标题',
+                                                type: 'input-text'
+                                            }
+                                        ],
+                                        onChange: function (value, oldValue, model, form) {
+                                            var activeKey = value.reduce(function (arr, item) {
+                                                item.active === true && arr.push(item.key);
+                                                return arr;
+                                            }, []);
+                                            form.setValues({
+                                                activeKey: activeKey
+                                            });
+                                        },
+                                        pipeOut: function (value, oldValue, data) {
+                                            var keys = value.map(function (item) { return item.key; });
+                                            var findMinCanUsedKey = function (keys, max) {
+                                                for (var i = 1; i <= max; i++) {
+                                                    if (!keys.includes(String(i))) {
+                                                        return String(i);
+                                                    }
+                                                }
+                                            };
+                                            value.forEach(function (item) {
+                                                if (!item.key) {
+                                                    var key = findMinCanUsedKey(keys, value.length);
+                                                    item.key = key;
+                                                    item.header = "\u6807\u9898".concat(key);
+                                                }
+                                            });
+                                            return value;
+                                        },
+                                        scaffold: {
+                                            type: 'collapse',
+                                            header: '标题',
+                                            body: [
+                                                {
+                                                    type: 'tpl',
+                                                    tpl: '内容',
+                                                    inline: false
+                                                }
+                                            ],
+                                            key: ''
+                                        }
+                                    })
+                                ]
+                            }
+                        ])
+                    },
+                    {
+                        title: '外观',
+                        body: AMisCodeEditor.getSchemaTpl('collapseGroup', [
+                            AMisCodeEditor.getSchemaTpl('style:classNames', {
+                                isFormItem: false
+                            })
+                        ])
+                    }
+                ])
+            ];
+        };
+        _this.regions = [
+            {
+                key: 'body',
+                label: '内容区',
+                renderMethod: 'render',
+                insertPosition: 'inner'
+            }
+        ];
+        return _this;
+    }
+    return CollapseGroupPlugin;
+}(AMisCodeEditor.BasePlugin));
+AMisCodeEditor.registerEditorPlugin(CollapseGroupPlugin);
+
+exports.CollapseGroupPlugin = CollapseGroupPlugin;

package/{dist → lib}/plugin/Container.d.ts

@@ -1,4 +1,4 @@
-import { BaseEventContext, BasePlugin, RegionConfig } from '../plugin';
+import { BaseEventContext, BasePlugin, RegionConfig } from 'amis-editor-core';
 export declare class ContainerPlugin extends BasePlugin {
     rendererName: string;
     $schema: string;
@@ -17,5 +17,6 @@ export declare class ContainerPlugin extends BasePlugin {
     };
     regions: Array<RegionConfig>;
     panelTitle: string;
-    panelBodyCreator: (context: BaseEventContext) => any[];
+    panelJustify: boolean;
+    panelBodyCreator: (context: BaseEventContext) => any;
 }

package/lib/plugin/Container.js

@@ -0,0 +1,100 @@
+/**
+ * amis-editor v5.2.0-beta.0
+ * Copyright 2018-2022 @fex
+ */
+
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var tslib = require('tslib');
+var AMisCodeEditor = require('amis-editor-core');
+
+var ContainerPlugin = /** @class */ (function (_super) {
+    tslib.__extends(ContainerPlugin, _super);
+    function ContainerPlugin() {
+        var _this = _super !== null && _super.apply(this, arguments) || this;
+        // 关联渲染器名字
+        _this.rendererName = 'container';
+        _this.$schema = '/schemas/ContainerSchema.json';
+        // 组件名称
+        _this.name = '容器';
+        _this.isBaseComponent = true;
+        _this.description = '一个简单的容器，可以将多个渲染器放置在一起。';
+        _this.tags = ['容器'];
+        _this.icon = 'fa fa-square-o';
+        _this.scaffold = {
+            type: 'container',
+            body: '内容'
+        };
+        _this.previewSchema = tslib.__assign({}, _this.scaffold);
+        _this.regions = [
+            {
+                key: 'body',
+                label: '内容区'
+            }
+        ];
+        _this.panelTitle = '容器';
+        _this.panelJustify = true;
+        _this.panelBodyCreator = function (context) {
+            return AMisCodeEditor.getSchemaTpl('tabs', [
+                {
+                    title: '属性',
+                    body: AMisCodeEditor.getSchemaTpl('collapseGroup', [
+                        {
+                            title: '常用',
+                            body: [
+                                {
+                                    name: 'wrapperComponent',
+                                    label: '容器标签',
+                                    type: 'input-text',
+                                    options: [
+                                        'article',
+                                        'aside',
+                                        'code',
+                                        'div',
+                                        'footer',
+                                        'header',
+                                        'p',
+                                        'section'
+                                    ],
+                                    pipeIn: AMisCodeEditor.defaultValue('div'),
+                                    validations: {
+                                        isAlphanumeric: true,
+                                        matchRegexp: '/^(?!.*script).*$/' // 禁用一下script标签
+                                    },
+                                    validationErrors: {
+                                        isAlpha: 'HTML标签不合法，请重新输入',
+                                        matchRegexp: 'HTML标签不合法，请重新输入'
+                                    },
+                                    validateOnChange: false
+                                }
+                            ]
+                        }
+                    ])
+                },
+                {
+                    title: '外观',
+                    className: 'p-none',
+                    body: AMisCodeEditor.getSchemaTpl('collapseGroup', tslib.__spreadArray(tslib.__spreadArray([], AMisCodeEditor.getSchemaTpl('style:common'), true), [
+                        {
+                            title: 'CSS 类名',
+                            body: [
+                                AMisCodeEditor.getSchemaTpl('className', { label: '外层CSS类名' }),
+                                AMisCodeEditor.getSchemaTpl('className', {
+                                    name: 'bodyClassName',
+                                    label: '内容区CSS类名'
+                                })
+                            ]
+                        }
+                    ], false))
+                }
+            ]);
+        };
+        return _this;
+    }
+    return ContainerPlugin;
+}(AMisCodeEditor.BasePlugin));
+AMisCodeEditor.registerEditorPlugin(ContainerPlugin);
+
+exports.ContainerPlugin = ContainerPlugin;

package/{dist → lib}/plugin/Custom.d.ts

@@ -1,7 +1,7 @@
 /**
  * @file 自定义代码
  */
-import { BasePlugin, BasicSubRenderInfo, RendererEventContext, SubRendererInfo } from '../plugin';
+import { BasePlugin, BasicSubRenderInfo, RendererEventContext, SubRendererInfo } from 'amis-editor-core';
 export declare class CustomPlugin extends BasePlugin {
     rendererName: string;
     $schema: string;

package/lib/plugin/Custom.js

@@ -0,0 +1,109 @@
+/**
+ * amis-editor v5.2.0-beta.0
+ * Copyright 2018-2022 @fex
+ */
+
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var tslib = require('tslib');
+var AMisCodeEditor = require('amis-editor-core');
+
+/**
+ * @file 自定义代码
+ */
+var CustomPlugin = /** @class */ (function (_super) {
+    tslib.__extends(CustomPlugin, _super);
+    function CustomPlugin() {
+        var _this = _super !== null && _super.apply(this, arguments) || this;
+        // 关联渲染器名字
+        _this.rendererName = 'custom';
+        _this.$schema = '/schemas/CustomSchema.json';
+        // 组件名称
+        _this.name = '自定义代码';
+        _this.isBaseComponent = true;
+        _this.description = '通过内嵌代码来实现功能';
+        _this.tags = ['功能'];
+        _this.icon = 'fa fa-gears';
+        _this.docLink = '/amis/zh-CN/components/custom';
+        _this.scaffold = {
+            type: 'custom',
+            html: '<div><h2>hello, world!</h2></div>',
+            onMount: "\n      const button = document.createElement('button');\n      button.innerText = '\u70B9\u51FB\u4FEE\u6539\u59D3\u540D';\n      button.onclick = event => {\n        event.preventDefault();\n      };\n      dom.appendChild(button);"
+        };
+        _this.previewSchema = tslib.__assign({}, _this.scaffold);
+        _this.panelTitle = '自定义代码';
+        _this.panelBody = [
+            AMisCodeEditor.getSchemaTpl('fieldSet', {
+                title: 'HTML 内容',
+                body: [
+                    {
+                        label: 'HTML 内容',
+                        name: 'html',
+                        type: 'editor',
+                        allowFullscreen: true
+                    }
+                ]
+            }),
+            AMisCodeEditor.getSchemaTpl('fieldSet', {
+                title: 'onMount',
+                body: [
+                    {
+                        name: 'onMount',
+                        type: 'editor',
+                        allowFullscreen: true,
+                        size: 'xxl',
+                        label: 'onMount 代码',
+                        options: {
+                            lineNumbers: 'off',
+                            glyphMargin: false,
+                            lineDecorationsWidth: 0,
+                            lineNumbersMinChars: 0
+                        }
+                    }
+                ]
+            }),
+            AMisCodeEditor.getSchemaTpl('fieldSet', {
+                title: 'onUpdate',
+                body: [
+                    {
+                        name: 'onUpdate',
+                        type: 'editor',
+                        allowFullscreen: true,
+                        size: 'xxl',
+                        label: 'onUpdate 代码'
+                    }
+                ]
+            }),
+            AMisCodeEditor.getSchemaTpl('fieldSet', {
+                title: 'onUnmount',
+                body: [
+                    {
+                        name: 'onUnmount',
+                        type: 'editor',
+                        allowFullscreen: true,
+                        size: 'xxl',
+                        label: 'onUnmount 代码'
+                    }
+                ]
+            })
+        ];
+        return _this;
+    }
+    CustomPlugin.prototype.buildSubRenderers = function (context, renderers) {
+        var info = _super.prototype.buildSubRenderers.apply(this, arguments);
+        // 只有 form 下才调 onChange
+        // if (
+        //   context.info.renderer.name === 'form' ||
+        //   context.node.childRegions.some(i => i.region === 'body')
+        // ) {
+        info.scaffold.onMount = "\n        const button = document.createElement('button');\n        button.innerText = '\u70B9\u51FB\u4FEE\u6539\u59D3\u540Dddd';\n        button.onclick = event => {\n          onChange('new name');\n          event.preventDefault();\n        };\n        dom.appendChild(button);";
+        // }
+        return info;
+    };
+    return CustomPlugin;
+}(AMisCodeEditor.BasePlugin));
+AMisCodeEditor.registerEditorPlugin(CustomPlugin);
+
+exports.CustomPlugin = CustomPlugin;