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

package/lib/plugin/Alert.js

@@ -0,0 +1,113 @@
+/**
+ * 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 AlertPlugin = /** @class */ (function (_super) {
+    tslib.__extends(AlertPlugin, _super);
+    function AlertPlugin() {
+        var _this = _super !== null && _super.apply(this, arguments) || this;
+        // 关联渲染器名字
+        _this.rendererName = 'alert';
+        _this.$schema = '/schemas/AlertSchema.json';
+        // 组件名称
+        _this.name = '提示';
+        _this.isBaseComponent = true;
+        _this.description = '用来做文字特殊提示，分为四类：提示类、成功类、警告类和危险类。可结合 <code>visibleOn</code> 用来做错误信息提示。';
+        _this.docLink = '/amis/zh-CN/components/alert';
+        _this.icon = 'fa fa-exclamation-circle';
+        _this.scaffold = {
+            type: 'alert',
+            body: {
+                type: 'tpl',
+                tpl: '提示内容',
+                inline: false
+            },
+            level: 'info'
+        };
+        _this.previewSchema = tslib.__assign(tslib.__assign({}, _this.scaffold), { className: 'text-left', showCloseButton: true });
+        // 普通容器类渲染器配置
+        _this.regions = [{ key: 'body', label: '内容区', placeholder: '提示内容' }];
+        _this.notRenderFormZone = true;
+        _this.panelTitle = '提示';
+        _this.panelJustify = true;
+        _this.panelBodyCreator = function (context) {
+            return AMisCodeEditor.getSchemaTpl('tabs', [
+                {
+                    title: '属性',
+                    body: AMisCodeEditor.getSchemaTpl('collapseGroup', [
+                        {
+                            title: '基本',
+                            body: [
+                                {
+                                    label: '类型',
+                                    name: 'level',
+                                    type: 'select',
+                                    options: [
+                                        {
+                                            label: '提示',
+                                            value: 'info'
+                                        },
+                                        {
+                                            label: '成功',
+                                            value: 'success'
+                                        },
+                                        {
+                                            label: '警告',
+                                            value: 'warning'
+                                        },
+                                        {
+                                            label: '严重',
+                                            value: 'danger'
+                                        }
+                                    ]
+                                },
+                                AMisCodeEditor.getSchemaTpl('label', {
+                                    name: 'title'
+                                }),
+                                AMisCodeEditor.getSchemaTpl('switch', {
+                                    label: '可关闭',
+                                    name: 'showCloseButton'
+                                }),
+                                {
+                                    type: 'ae-Switch-More',
+                                    mode: 'normal',
+                                    name: 'showIcon',
+                                    label: '图标',
+                                    hiddenOnDefault: !context.schema.icon,
+                                    formType: 'extend',
+                                    form: {
+                                        body: [
+                                            AMisCodeEditor.getSchemaTpl('icon', {
+                                                label: '自定义图标'
+                                            })
+                                        ]
+                                    }
+                                }
+                            ]
+                        },
+                        AMisCodeEditor.getSchemaTpl('status')
+                    ])
+                },
+                {
+                    title: '外观',
+                    body: AMisCodeEditor.getSchemaTpl('collapseGroup', [
+                        AMisCodeEditor.getSchemaTpl('style:classNames', { isFormItem: false })
+                    ])
+                }
+            ]);
+        };
+        return _this;
+    }
+    return AlertPlugin;
+}(AMisCodeEditor.BasePlugin));
+AMisCodeEditor.registerEditorPlugin(AlertPlugin);
+
+exports.AlertPlugin = AlertPlugin;

package/lib/plugin/AnchorNav.d.ts

@@ -0,0 +1,48 @@
+import { BasePlugin, VRendererConfig } from 'amis-editor-core';
+export declare class AnchorNavPlugin extends BasePlugin {
+    rendererName: string;
+    $schema: string;
+    name: string;
+    isBaseComponent: boolean;
+    description: string;
+    docLink: string;
+    tags: string[];
+    icon: string;
+    scaffold: {
+        type: string;
+        links: {
+            title: string;
+            href: string;
+            body: {
+                type: string;
+                tpl: string;
+                inline: boolean;
+            }[];
+        }[];
+    };
+    previewSchema: {
+        type: string;
+        links: {
+            title: string;
+            href: string;
+            body: {
+                type: string;
+                tpl: string;
+                inline: boolean;
+            }[];
+        }[];
+    };
+    panelTitle: string;
+    panelJustify: boolean;
+    panelBody: any[];
+    patchContainers: string[];
+    vRendererConfig: VRendererConfig;
+    wrapperProps: {
+        unmountOnExit: boolean;
+        mountOnEnter: boolean;
+    };
+    sectionWrapperResolve: (dom: HTMLElement) => HTMLElement;
+    overrides: {
+        render(this: any): any;
+    };
+}

package/lib/plugin/AnchorNav.js

@@ -0,0 +1,297 @@
+/**
+ * amis-editor v5.2.0-beta.0
+ * Copyright 2018-2022 @fex
+ */
+
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var tslib = require('tslib');
+var React = require('react');
+var AMisCodeEditor = require('amis-editor-core');
+var findIndex = require('lodash/findIndex');
+var amisUi = require('amis-ui');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+var findIndex__default = /*#__PURE__*/_interopDefaultLegacy(findIndex);
+
+var AnchorNavPlugin = /** @class */ (function (_super) {
+    tslib.__extends(AnchorNavPlugin, _super);
+    function AnchorNavPlugin() {
+        var _this = _super !== null && _super.apply(this, arguments) || this;
+        // 关联渲染器名字
+        _this.rendererName = 'anchor-nav';
+        _this.$schema = '/schemas/AnchorNavSchema.json';
+        // 组件名称
+        _this.name = '锚点导航';
+        _this.isBaseComponent = true;
+        _this.description = '锚点导航，在多行内容展示时，可以将内容用锚点导航分组的形式展示，点击导航菜单可以定位到对应内容区域。';
+        _this.docLink = '/amis/zh-CN/components/anchor-nav';
+        _this.tags = ['容器'];
+        _this.icon = 'fa fa-link';
+        _this.scaffold = {
+            type: 'anchor-nav',
+            links: [
+                {
+                    title: '锚点1',
+                    href: '1',
+                    body: [
+                        {
+                            type: 'tpl',
+                            tpl: '这里是锚点内容1',
+                            inline: false
+                        }
+                    ]
+                },
+                {
+                    title: '锚点2',
+                    href: '2',
+                    body: [
+                        {
+                            type: 'tpl',
+                            tpl: '这里是锚点内容2',
+                            inline: false
+                        }
+                    ]
+                },
+                {
+                    title: '锚点3',
+                    href: '3',
+                    body: [
+                        {
+                            type: 'tpl',
+                            tpl: '这里是锚点内容3',
+                            inline: false
+                        }
+                    ]
+                }
+            ]
+        };
+        _this.previewSchema = tslib.__assign({}, _this.scaffold);
+        _this.panelTitle = '锚点导航';
+        _this.panelJustify = true;
+        _this.panelBody = [
+            AMisCodeEditor.getSchemaTpl('tabs', [
+                {
+                    title: '属性',
+                    body: AMisCodeEditor.getSchemaTpl('collapseGroup', [
+                        {
+                            title: '基本',
+                            body: [
+                                AMisCodeEditor.getSchemaTpl('combo-container', {
+                                    type: 'combo',
+                                    name: 'links',
+                                    label: '锚点设置',
+                                    mode: 'normal',
+                                    multiple: true,
+                                    draggable: true,
+                                    minLength: 1,
+                                    addButtonText: '添加锚点',
+                                    items: [
+                                        {
+                                            type: 'input-text',
+                                            name: 'title',
+                                            required: true,
+                                            placeholder: '请输入锚点标题'
+                                        }
+                                    ],
+                                    scaffold: {
+                                        title: '锚点',
+                                        href: '',
+                                        body: [
+                                            {
+                                                type: 'tpl',
+                                                tpl: '这里是锚点内容',
+                                                inline: false
+                                            }
+                                        ]
+                                    },
+                                    draggableTip: '',
+                                    onChange: function (value, oldValue, model, form) {
+                                        var active = form.data.active;
+                                        var isInclude = value.findIndex(function (link) { return link.href === active; }) > -1;
+                                        form.setValues({
+                                            active: isInclude ? active : value[0].href
+                                        });
+                                    },
+                                    pipeOut: function (value) {
+                                        var hrefs = value.map(function (item) { return item.href; });
+                                        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.href) {
+                                                var key = findMinCanUsedKey(hrefs, value.length);
+                                                item.href = key;
+                                                item.title = "\u951A\u70B9".concat(key);
+                                                item.body[0].tpl = "\u8FD9\u91CC\u662F\u951A\u70B9\u5185\u5BB9".concat(key);
+                                            }
+                                        });
+                                        return value;
+                                    },
+                                    deleteBtn: {
+                                        icon: 'fa fa-trash'
+                                    }
+                                }),
+                                {
+                                    name: 'active',
+                                    type: 'select',
+                                    label: '默认定位区域',
+                                    source: '${links}',
+                                    labelField: 'title',
+                                    valueField: 'href',
+                                    value: '1'
+                                }
+                            ]
+                        }
+                    ])
+                },
+                {
+                    title: '外观',
+                    body: AMisCodeEditor.getSchemaTpl('collapseGroup', [
+                        {
+                            title: '基本',
+                            body: [
+                                {
+                                    type: 'button-group-select',
+                                    name: 'direction',
+                                    label: '导航布局',
+                                    value: 'vertical',
+                                    options: [
+                                        {
+                                            label: '水平',
+                                            value: 'horizontal'
+                                        },
+                                        {
+                                            label: '垂直',
+                                            value: 'vertical'
+                                        }
+                                    ]
+                                }
+                            ]
+                        },
+                        AMisCodeEditor.getSchemaTpl('style:classNames', {
+                            isFormItem: false,
+                            schema: [
+                                AMisCodeEditor.getSchemaTpl('className', {
+                                    name: 'linkClassName',
+                                    label: '导航'
+                                }),
+                                AMisCodeEditor.getSchemaTpl('className', {
+                                    name: 'sectionClassName',
+                                    label: '区域内容'
+                                })
+                            ]
+                        })
+                    ])
+                }
+            ])
+        ];
+        _this.patchContainers = ['anchor-nav.body'];
+        _this.vRendererConfig = {
+            regions: {
+                body: {
+                    key: 'body',
+                    label: '内容区',
+                    renderMethod: 'renderBody',
+                    renderMethodOverride: function (regions, insertRegion) {
+                        return function () {
+                            var args = [];
+                            for (var _i = 0; _i < arguments.length; _i++) {
+                                args[_i] = arguments[_i];
+                            }
+                            var info = this.props.$$editor;
+                            var dom = this.super.apply(this, args);
+                            if (info && !this.props.children) {
+                                return insertRegion(this, dom, regions, info, info.plugin.manager);
+                            }
+                            return dom;
+                        };
+                    }
+                }
+            },
+            panelTitle: '内容区域',
+            panelJustify: true,
+            panelBody: [
+                AMisCodeEditor.getSchemaTpl('tabs', [
+                    {
+                        title: '属性',
+                        body: [
+                            AMisCodeEditor.getSchemaTpl('collapseGroup', [
+                                {
+                                    title: '基本',
+                                    body: [
+                                        {
+                                            name: 'title',
+                                            label: '标题',
+                                            type: 'input-text',
+                                            required: true
+                                        }
+                                    ]
+                                }
+                            ])
+                        ]
+                    },
+                    {
+                        title: '外观',
+                        body: [
+                            AMisCodeEditor.getSchemaTpl('collapseGroup', [
+                                {
+                                    title: 'CSS 类名',
+                                    body: [AMisCodeEditor.getSchemaTpl('className')]
+                                }
+                            ])
+                        ]
+                    }
+                ])
+            ]
+        };
+        _this.wrapperProps = {
+            unmountOnExit: true,
+            mountOnEnter: true
+        };
+        _this.sectionWrapperResolve = function (dom) { return dom.parentElement; };
+        _this.overrides = {
+            render: function () {
+                var _this = this;
+                var dom = this.super();
+                if (!this.renderSection && this.props.$$editor && dom) {
+                    var links_1 = this.props.links;
+                    return AMisCodeEditor.mapReactElement(dom, function (item) {
+                        var _a, _b;
+                        if (item.type === amisUi.AnchorNavSection && item.props.$$id) {
+                            var id_1 = item.props.$$id;
+                            var index = findIndex__default["default"](links_1, function (link) { return link.$$id === id_1; });
+                            var info = _this.props.$$editor;
+                            var plugin = info.plugin;
+                            if (~index) {
+                                var region = (_b = (_a = plugin.vRendererConfig) === null || _a === void 0 ? void 0 : _a.regions) === null || _b === void 0 ? void 0 : _b.body;
+                                if (!region) {
+                                    return item;
+                                }
+                                return React__default["default"].cloneElement(item, {
+                                    children: (React__default["default"].createElement(AMisCodeEditor.VRenderer, { key: id_1, type: info.type, plugin: info.plugin, renderer: info.renderer, "$schema": "/schemas/SectionSchema.json", hostId: info.id, memberIndex: index, name: "".concat(item.props.title || "\u951A\u70B9\u5185\u5BB9".concat(index + 1)), id: id_1, draggable: false, removable: false, wrapperResolve: plugin.sectionWrapperResolve, schemaPath: "".concat(info.schemaPath, "/anchor-nav/").concat(index), path: "".concat(_this.props.$path, "/").concat(index), data: _this.props.data },
+                                        React__default["default"].createElement(AMisCodeEditor.RegionWrapper, { key: region.key, preferTag: region.preferTag, name: region.key, label: region.label, regionConfig: region, placeholder: region.placeholder, editorStore: plugin.manager.store, manager: plugin.manager, children: item.props.children, wrapperResolve: region.wrapperResolve, rendererName: info.renderer.name })))
+                                });
+                            }
+                        }
+                        return item;
+                    });
+                }
+                return dom;
+            }
+        };
+        return _this;
+    }
+    return AnchorNavPlugin;
+}(AMisCodeEditor.BasePlugin));
+AMisCodeEditor.registerEditorPlugin(AnchorNavPlugin);
+
+exports.AnchorNavPlugin = AnchorNavPlugin;

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

@@ -1,4 +1,4 @@
-import { BaseEventContext, BasePlugin } from '../plugin';
+import { BaseEventContext, BasePlugin } from 'amis-editor-core';
 export declare class AudioPlugin extends BasePlugin {
     rendererName: string;
     $schema: string;

package/lib/plugin/Audio.js

@@ -0,0 +1,157 @@
+/**
+ * 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 AudioPlugin = /** @class */ (function (_super) {
+    tslib.__extends(AudioPlugin, _super);
+    function AudioPlugin() {
+        var _this = _super !== null && _super.apply(this, arguments) || this;
+        // 关联渲染器名字
+        _this.rendererName = 'audio';
+        _this.$schema = '/schemas/AudioSchema.json';
+        // 组件名称
+        _this.name = '音频';
+        _this.isBaseComponent = true;
+        _this.description = '音频控件，可以用来播放各种音频文件。';
+        _this.tags = ['功能'];
+        _this.icon = 'fa fa-music';
+        _this.scaffold = {
+            type: 'audio',
+            autoPlay: false,
+            src: ''
+        };
+        _this.previewSchema = tslib.__assign({}, _this.scaffold);
+        _this.panelTitle = '音频';
+        _this.panelBodyCreator = function (context) {
+            var isUnderField = /\/field\/\w+$/.test(context.path);
+            return [
+                AMisCodeEditor.getSchemaTpl('tabs', [
+                    {
+                        title: '常规',
+                        body: [
+                            isUnderField
+                                ? {
+                                    type: 'tpl',
+                                    inline: false,
+                                    className: 'text-info text-sm',
+                                    tpl: '<p>当前为字段内容节点配置，选择上层还有更多的配置。</p>'
+                                }
+                                : null,
+                            {
+                                name: 'src',
+                                type: 'input-text',
+                                label: '音频地址',
+                                description: '支持获取变量如：<code>\\${audioSrc}</code>'
+                            },
+                            {
+                                type: 'select',
+                                name: 'rates',
+                                label: '音频倍速',
+                                description: '加速范围在0.1到16之间',
+                                multiple: true,
+                                pipeIn: function (value) {
+                                    return Array.isArray(value) ? value.join(',') : [];
+                                },
+                                pipeOut: function (value) {
+                                    if (value && value.length) {
+                                        var rates = value.split(',');
+                                        rates = rates
+                                            .filter(function (x) {
+                                            return Number(x) && Number(x) > 0 && Number(x) <= 16;
+                                        })
+                                            .map(function (x) { return Number(Number(x).toFixed(1)); });
+                                        return Array.from(new Set(rates));
+                                    }
+                                    else {
+                                        return [];
+                                    }
+                                },
+                                options: ['0.5', '1', '1.5', '2', '2.5', '3', '3.5', '4']
+                            },
+                            {
+                                name: 'controls',
+                                type: 'select',
+                                label: '内部控件',
+                                multiple: true,
+                                extractValue: true,
+                                joinValues: false,
+                                options: [
+                                    {
+                                        label: '倍速',
+                                        value: 'rates'
+                                    },
+                                    {
+                                        label: '播放',
+                                        value: 'play'
+                                    },
+                                    {
+                                        label: '时间',
+                                        value: 'time'
+                                    },
+                                    {
+                                        label: '进度',
+                                        value: 'process'
+                                    },
+                                    {
+                                        label: '音量',
+                                        value: 'volume'
+                                    }
+                                ],
+                                pipeIn: AMisCodeEditor.defaultValue([
+                                    'rates',
+                                    'play',
+                                    'time',
+                                    'process',
+                                    'volume'
+                                ]),
+                                labelRemark: {
+                                    trigger: 'click',
+                                    className: 'm-l-xs',
+                                    rootClose: true,
+                                    content: '选择倍速后，还需要在常规选择栏中配置倍速',
+                                    placement: 'left'
+                                }
+                            },
+                            AMisCodeEditor.getSchemaTpl('switch', {
+                                name: 'autoPlay',
+                                label: '自动播放'
+                            }),
+                            AMisCodeEditor.getSchemaTpl('switch', {
+                                name: 'loop',
+                                label: '循环播放'
+                            })
+                        ]
+                    },
+                    {
+                        title: '外观',
+                        body: [
+                            AMisCodeEditor.getSchemaTpl('className'),
+                            AMisCodeEditor.getSchemaTpl('switch', {
+                                name: 'inline',
+                                label: '内联模式',
+                                pipeIn: AMisCodeEditor.defaultValue(true)
+                            })
+                        ]
+                    },
+                    {
+                        title: '显隐',
+                        body: [AMisCodeEditor.getSchemaTpl('ref'), AMisCodeEditor.getSchemaTpl('visible')]
+                    }
+                ])
+            ];
+        };
+        return _this;
+    }
+    return AudioPlugin;
+}(AMisCodeEditor.BasePlugin));
+AMisCodeEditor.registerEditorPlugin(AudioPlugin);
+
+exports.AudioPlugin = AudioPlugin;

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

@@ -1,4 +1,4 @@
-import { BasePlugin } from '../plugin';
+import { BaseEventContext, BasePlugin } from 'amis-editor-core';
 export declare class AvatarPlugin extends BasePlugin {
     rendererName: string;
     $schema: string;
@@ -10,9 +10,18 @@ export declare class AvatarPlugin extends BasePlugin {
     tags: string[];
     scaffold: {
         type: string;
+        showtype: string;
         icon: string;
+        fit: string;
+        style: {
+            width: number;
+            height: number;
+            borderRadius: number;
+        };
     };
     previewSchema: any;
+    notRenderFormZone: boolean;
+    panelJustify: boolean;
     panelTitle: string;
-    panelBody: any[];
+    panelBodyCreator: (context: BaseEventContext) => any;
 }