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

package/lib/plugin/Drawer.js

@@ -0,0 +1,240 @@
+/**
+ * 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 util = require('../util.js');
+var Dialog = require('./Dialog.js');
+
+var DrawerPlugin = /** @class */ (function (_super) {
+    tslib.__extends(DrawerPlugin, _super);
+    function DrawerPlugin() {
+        var _this = _super !== null && _super.apply(this, arguments) || this;
+        // 关联渲染器名字
+        _this.rendererName = 'drawer';
+        _this.$schema = '/schemas/DrawerSchema.json';
+        // 组件名称
+        _this.name = '抽屉式弹框';
+        _this.isBaseComponent = true;
+        _this.wrapperProps = {
+            wrapperComponent: Dialog.InlineModal,
+            onClose: AMisCodeEditor.noop,
+            resizable: false,
+            show: true
+        };
+        _this.regions = [
+            {
+                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 && args[1] === 'body') {
+                            return insertRegion(this, dom, regions, info, info.plugin.manager);
+                        }
+                        return dom;
+                    };
+                }
+            },
+            {
+                key: 'actions',
+                label: '按钮组',
+                renderMethod: 'renderFooter',
+                wrapperResolve: function (dom) { return dom; }
+            }
+        ];
+        // 现在没用，后面弹窗优化后有用
+        _this.events = [
+            {
+                eventName: 'confirm',
+                eventLabel: '确认',
+                description: '确认'
+            },
+            {
+                eventName: 'cancel',
+                eventLabel: '取消',
+                description: '取消'
+            }
+        ];
+        _this.actions = [
+            {
+                actionType: 'confirm',
+                actionLabel: '确认',
+                description: '确认操作'
+            },
+            {
+                actionType: 'cancel',
+                actionLabel: '取消',
+                description: '取消操作'
+            },
+            {
+                actionType: 'setValue',
+                actionLabel: '更新数据',
+                description: '触发组件数据更新'
+            }
+        ];
+        _this.panelTitle = '弹框';
+        _this.panelBodyCreator = function (context) {
+            return AMisCodeEditor.getSchemaTpl('tabs', [
+                {
+                    title: '常规',
+                    body: [
+                        {
+                            label: '标题',
+                            type: 'input-text',
+                            name: 'title'
+                        },
+                        // {
+                        //   children: (
+                        //     <Button
+                        //       size="sm"
+                        //       className="m-b-sm"
+                        //       level="info"
+                        //       block
+                        //       onClick={() => this.manager.showInsertPanel('body')}
+                        //     >
+                        //       新增内容
+                        //     </Button>
+                        //   )
+                        // },
+                        {
+                            type: 'divider'
+                        },
+                        {
+                            label: '位置',
+                            type: 'button-group-select',
+                            name: 'position',
+                            value: 'right',
+                            size: 'sm',
+                            mode: 'inline',
+                            className: 'block',
+                            options: [
+                                {
+                                    label: '左',
+                                    value: 'left'
+                                },
+                                {
+                                    label: '上',
+                                    value: 'top'
+                                },
+                                {
+                                    label: '右',
+                                    value: 'right'
+                                },
+                                {
+                                    label: '下',
+                                    value: 'bottom'
+                                }
+                            ],
+                            description: '定义弹框从什么位置呼出'
+                        },
+                        AMisCodeEditor.getSchemaTpl('switch', {
+                            label: '数据映射',
+                            name: 'data',
+                            className: 'm-b-xs',
+                            pipeIn: function (value) { return !!value; },
+                            pipeOut: function (value) { return (value ? { '&': '$$' } : null); }
+                        }),
+                        {
+                            type: 'tpl',
+                            visibleOn: '!this.data',
+                            tpl: '<p class="text-sm text-muted">当没开启数据映射时，弹框中默认会拥有触发打开弹框按钮所在环境的所有数据。</p>'
+                        },
+                        {
+                            type: 'input-kv',
+                            syncDefaultValue: false,
+                            name: 'data',
+                            visibleOn: 'this.data',
+                            descriptionClassName: 'help-block text-xs m-b-none',
+                            description: '<p>当开启数据映射时，弹框中的数据只会包含设置的部分，请绑定数据。如：<code>{"a": "\\${a}", "b": 2}</code></p><p>如果希望在默认的基础上定制，请先添加一个 Key 为 `&` Value 为 `\\$$` 作为第一行。</p><div>当值为 <code>__undefined</code>时，表示删除对应的字段，可以结合<code>{"&": "\\$$"}</code>来达到黑名单效果。</div>'
+                        },
+                        AMisCodeEditor.getSchemaTpl('switch', {
+                            name: 'closeOnOutside',
+                            label: '点击外部关闭弹框'
+                        }),
+                        AMisCodeEditor.getSchemaTpl('switch', {
+                            label: '按 Esc 可关闭',
+                            name: 'closeOnEsc'
+                        })
+                    ]
+                },
+                {
+                    title: '外观',
+                    body: [
+                        {
+                            label: '尺寸',
+                            type: 'button-group-select',
+                            name: 'size',
+                            size: 'sm',
+                            mode: 'inline',
+                            className: 'block',
+                            options: [
+                                {
+                                    label: '超小',
+                                    value: 'xs'
+                                },
+                                {
+                                    label: '小',
+                                    value: 'sm'
+                                },
+                                {
+                                    label: '中',
+                                    value: 'md'
+                                },
+                                {
+                                    label: '大',
+                                    value: 'lg'
+                                },
+                                {
+                                    label: '超大',
+                                    value: 'xl'
+                                }
+                            ]
+                        },
+                        AMisCodeEditor.getSchemaTpl('switch', {
+                            name: 'overlay',
+                            label: '是否显示蒙层',
+                            pipeIn: AMisCodeEditor.defaultValue(true)
+                        }),
+                        AMisCodeEditor.getSchemaTpl('switch', {
+                            name: 'resizable',
+                            label: '可拉拽',
+                            description: '定义弹框是否可拉拽调整大小',
+                            pipeIn: AMisCodeEditor.defaultValue(false)
+                        }),
+                        AMisCodeEditor.getSchemaTpl('className'),
+                        AMisCodeEditor.getSchemaTpl('className', {
+                            label: 'bodyClassName 类名',
+                            name: 'bodyClassName'
+                        })
+                    ]
+                },
+                {
+                    title: '事件',
+                    className: 'p-none',
+                    body: [
+                        AMisCodeEditor.getSchemaTpl('eventControl', tslib.__assign({ name: 'onEvent' }, util.getEventControlConfig(_this.manager, context)))
+                    ]
+                }
+            ]);
+        };
+        return _this;
+    }
+    DrawerPlugin.prototype.buildSubRenderers = function () { };
+    return DrawerPlugin;
+}(AMisCodeEditor.BasePlugin));
+AMisCodeEditor.registerEditorPlugin(DrawerPlugin);
+
+exports.DrawerPlugin = DrawerPlugin;

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

@@ -1,4 +1,4 @@
-import { BaseEventContext, BasePlugin, BasicToolbarItem, ContextMenuEventContext, ContextMenuItem } from '../plugin';
+import { BaseEventContext, BasePlugin, BasicToolbarItem, ContextMenuEventContext, ContextMenuItem } from 'amis-editor-core';
 export declare class DropDownButtonPlugin extends BasePlugin {
     rendererName: string;
     $schema: string;
@@ -12,29 +12,30 @@ export declare class DropDownButtonPlugin extends BasePlugin {
         type: string;
         label: string;
         buttons: {
+            onEvent: {
+                click: {
+                    actions: never[];
+                };
+            };
             type: string;
             label: string;
-            actionType: string;
-            dialog: {
-                title: string;
-                body: string;
-            };
         }[];
     };
     previewSchema: {
         type: string;
         label: string;
         buttons: {
+            onEvent: {
+                click: {
+                    actions: never[];
+                };
+            };
             type: string;
             label: string;
-            actionType: string;
-            dialog: {
-                title: string;
-                body: string;
-            };
         }[];
     };
     panelTitle: string;
+    panelJustify: boolean;
     panelBodyCreator: (context: BaseEventContext) => any;
     buildEditorToolbar({ id, info }: BaseEventContext, toolbars: Array<BasicToolbarItem>): void;
     editDetail(id: string): void;

package/lib/plugin/DropDownButton.js

@@ -0,0 +1,229 @@
+/**
+ * amis-editor v5.2.0-beta.0
+ * Copyright 2018-2022 @fex
+ */
+
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var tslib = require('tslib');
+var amis = require('amis');
+var React = require('react');
+var AMisCodeEditor = require('amis-editor-core');
+var BaseControl = require('../component/BaseControl.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+var DropDownButtonPlugin = /** @class */ (function (_super) {
+    tslib.__extends(DropDownButtonPlugin, _super);
+    function DropDownButtonPlugin() {
+        var _this = _super !== null && _super.apply(this, arguments) || this;
+        // 关联渲染器名字
+        _this.rendererName = 'dropdown-button';
+        _this.$schema = '/schemas/DropdownButtonSchema.json';
+        // 组件名称
+        _this.name = '下拉按钮';
+        _this.isBaseComponent = true;
+        _this.description = '下拉按钮，更多的按钮通过点击后展示开来。';
+        _this.tags = ['按钮'];
+        _this.icon = 'fa fa-chevron-down';
+        _this.docLink = '/amis/zh-CN/components/dropdown-button';
+        _this.scaffold = {
+            type: 'dropdown-button',
+            label: '下拉按钮',
+            buttons: [
+                tslib.__assign({ type: 'button', label: '按钮1' }, BaseControl.BUTTON_DEFAULT_ACTION),
+                tslib.__assign({ type: 'button', label: '按钮2' }, BaseControl.BUTTON_DEFAULT_ACTION)
+            ]
+        };
+        _this.previewSchema = tslib.__assign({}, _this.scaffold);
+        _this.panelTitle = '下拉按钮';
+        _this.panelJustify = true;
+        _this.panelBodyCreator = function (context) {
+            return AMisCodeEditor.getSchemaTpl('tabs', [
+                {
+                    title: '属性',
+                    body: AMisCodeEditor.getSchemaTpl('collapseGroup', [
+                        {
+                            title: '基本',
+                            body: [
+                                {
+                                    children: (React__default["default"].createElement(amis.Button, { level: "info", size: "sm", className: "m-b-sm", block: true, onClick: _this.editDetail.bind(_this, context.id) }, "\u914D\u7F6E\u4E0B\u62C9\u6309\u94AE\u96C6\u5408"))
+                                },
+                                {
+                                    label: '按钮文案',
+                                    type: 'input-text',
+                                    name: 'label'
+                                },
+                                {
+                                    type: 'button-group-select',
+                                    name: 'trigger',
+                                    label: '触发方式',
+                                    size: 'sm',
+                                    options: [
+                                        {
+                                            label: '点击',
+                                            value: 'click'
+                                        },
+                                        {
+                                            label: '鼠标经过',
+                                            value: 'hover'
+                                        }
+                                    ],
+                                    pipeIn: AMisCodeEditor.defaultValue('click')
+                                },
+                                AMisCodeEditor.getSchemaTpl('switch', {
+                                    name: 'closeOnOutside',
+                                    label: '点击外部关闭',
+                                    pipeIn: AMisCodeEditor.defaultValue(true)
+                                }),
+                                AMisCodeEditor.getSchemaTpl('switch', {
+                                    name: 'closeOnClick',
+                                    label: '点击内容关闭'
+                                }),
+                                AMisCodeEditor.getSchemaTpl('switch', {
+                                    label: BaseControl.tipedLabel('默认展开', '选择后下拉菜单会默认展开'),
+                                    name: 'defaultIsOpened'
+                                }),
+                                {
+                                    type: 'button-group-select',
+                                    name: 'align',
+                                    label: '菜单对齐方式',
+                                    size: 'sm',
+                                    options: [
+                                        {
+                                            label: '左对齐',
+                                            value: 'left'
+                                        },
+                                        {
+                                            label: '右对齐',
+                                            value: 'right'
+                                        }
+                                    ],
+                                    pipeIn: AMisCodeEditor.defaultValue('left')
+                                }
+                            ]
+                        },
+                        AMisCodeEditor.getSchemaTpl('status', {
+                            disabled: true
+                        })
+                    ])
+                },
+                {
+                    title: '外观',
+                    body: [
+                        AMisCodeEditor.getSchemaTpl('collapseGroup', [
+                            {
+                                title: '基本',
+                                body: [
+                                    AMisCodeEditor.getSchemaTpl('size', {
+                                        label: '尺寸',
+                                        pipeIn: AMisCodeEditor.defaultValue('md')
+                                    }),
+                                    AMisCodeEditor.getSchemaTpl('switch', {
+                                        name: 'block',
+                                        label: BaseControl.tipedLabel('块状显示', '选择后按钮占满父容器宽度')
+                                    }),
+                                    AMisCodeEditor.getSchemaTpl('buttonLevel', {
+                                        label: '展示样式',
+                                        name: 'level'
+                                    })
+                                ]
+                            },
+                            {
+                                title: '图标',
+                                body: [
+                                    // getSchemaTpl('switch', {
+                                    //   label: '只显示 icon',
+                                    //   name: 'iconOnly'
+                                    // }),
+                                    AMisCodeEditor.getSchemaTpl('switch', {
+                                        label: '隐藏下拉图标',
+                                        name: 'hideCaret'
+                                    }),
+                                    AMisCodeEditor.getSchemaTpl('icon', {
+                                        label: '左侧图标'
+                                    }),
+                                    AMisCodeEditor.getSchemaTpl('icon', {
+                                        name: 'rightIcon',
+                                        label: '右侧图标'
+                                    })
+                                ]
+                            },
+                            AMisCodeEditor.getSchemaTpl('style:classNames', {
+                                isFormItem: false,
+                                schema: [
+                                    AMisCodeEditor.getSchemaTpl('className', {
+                                        name: 'btnClassName',
+                                        label: '按钮'
+                                    }),
+                                    AMisCodeEditor.getSchemaTpl('className', {
+                                        name: 'menuClassName',
+                                        label: '下拉菜单'
+                                    })
+                                ]
+                            })
+                        ])
+                    ]
+                }
+            ]);
+        };
+        return _this;
+    }
+    DropDownButtonPlugin.prototype.buildEditorToolbar = function (_a, toolbars) {
+        var id = _a.id, info = _a.info;
+        if (info.renderer.name === 'dropdown-button') {
+            toolbars.push({
+                icon: 'fa fa-expand',
+                order: 100,
+                tooltip: '配置下拉按钮集合',
+                onClick: this.editDetail.bind(this, id)
+            });
+        }
+    };
+    DropDownButtonPlugin.prototype.editDetail = function (id) {
+        var manager = this.manager;
+        var store = manager.store;
+        var node = store.getNodeById(id);
+        var value = store.getValueOf(id);
+        node &&
+            value &&
+            this.manager.openSubEditor({
+                title: '配置下拉按钮集合',
+                value: value.buttons,
+                slot: {
+                    type: 'button-group',
+                    buttons: '$$',
+                    block: true
+                },
+                onChange: function (newValue) {
+                    newValue = tslib.__assign(tslib.__assign({}, value), { buttons: newValue });
+                    manager.panelChangeValue(newValue, AMisCodeEditor.diff(value, newValue));
+                }
+            });
+    };
+    DropDownButtonPlugin.prototype.buildEditorContextMenu = function (_a, menus) {
+        var id = _a.id; _a.schema; _a.region; var info = _a.info, selections = _a.selections;
+        if (selections.length || (info === null || info === void 0 ? void 0 : info.plugin) !== this) {
+            return;
+        }
+        if (info.renderer.name === 'dropdown-button') {
+            menus.push('|', {
+                label: '配置下拉按钮集合',
+                onSelect: this.editDetail.bind(this, id)
+            });
+        }
+    };
+    DropDownButtonPlugin.prototype.filterProps = function (props) {
+        // trigger 为 hover 会影响编辑体验。
+        props.trigger = 'click';
+        return props;
+    };
+    return DropDownButtonPlugin;
+}(AMisCodeEditor.BasePlugin));
+AMisCodeEditor.registerEditorPlugin(DropDownButtonPlugin);
+
+exports.DropDownButtonPlugin = DropDownButtonPlugin;

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

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

package/lib/plugin/Each.js

@@ -0,0 +1,131 @@
+/**
+ * amis-editor v5.2.0-beta.0
+ * Copyright 2018-2022 @fex
+ */
+
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var tslib = require('tslib');
+var amis = require('amis');
+var React = require('react');
+var AMisCodeEditor = require('amis-editor-core');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+var EachPlugin = /** @class */ (function (_super) {
+    tslib.__extends(EachPlugin, _super);
+    function EachPlugin() {
+        var _this = _super !== null && _super.apply(this, arguments) || this;
+        // 关联渲染器名字
+        _this.rendererName = 'each';
+        _this.$schema = '/schemas/EachSchema.json';
+        // 组件名称
+        _this.name = '循环 Each';
+        _this.isBaseComponent = true;
+        _this.description = '功能渲染器，可以基于现有变量循环输出渲染器。';
+        _this.tags = ['功能'];
+        _this.icon = 'fa fa-repeat';
+        _this.scaffold = {
+            type: 'each',
+            name: 'arr',
+            items: {
+                type: 'tpl',
+                tpl: '<%= data.index + 1 %>. 内容：<%= data.item %>',
+                inline: false
+            }
+        };
+        _this.previewSchema = tslib.__assign(tslib.__assign({}, _this.scaffold), { value: ['a', 'b', 'c'] });
+        _this.panelTitle = '循环';
+        _this.panelBodyCreator = function (context) {
+            return [
+                {
+                    type: 'input-text',
+                    name: 'name',
+                    label: '关联字段',
+                    placeholder: 'varname',
+                    description: '如果所在容器有下发 value 则不需要配置，如果没有请配置变量名，支持多层级如：a.b，表示关联a对象下的b属性。目标变量可以是数组，也可以是对象。'
+                },
+                {
+                    children: (React__default["default"].createElement(amis.Button, { size: "sm", level: "danger", className: "m-b", block: true, onClick: _this.editDetail.bind(_this, context.id) }, "\u914D\u7F6E\u6210\u5458\u6E32\u67D3\u5668"))
+                },
+                {
+                    name: 'placeholder',
+                    type: 'input-text',
+                    label: '占位符',
+                    pipeIn: AMisCodeEditor.defaultValue('暂无内容'),
+                    description: '当没有关联变量，或者目标变量不是数组或者对象时显示此占位信息'
+                },
+                AMisCodeEditor.getSchemaTpl('className')
+            ];
+        };
+        return _this;
+    }
+    EachPlugin.prototype.filterProps = function (props) {
+        props = AMisCodeEditor.JSONPipeOut(props);
+        // 至少显示一个成员，否则啥都不显示。
+        if (!props.value) {
+            props.value = [
+                {
+                    item: 'mocked data'
+                }
+            ];
+        }
+        return props;
+    };
+    EachPlugin.prototype.buildEditorToolbar = function (_a, toolbars) {
+        var id = _a.id, info = _a.info;
+        if (info.renderer.name === 'each') {
+            toolbars.push({
+                icon: 'fa fa-expand',
+                order: 100,
+                tooltip: '配置成员渲染器',
+                onClick: this.editDetail.bind(this, id)
+            });
+        }
+    };
+    EachPlugin.prototype.buildEditorContextMenu = function (_a, menus) {
+        var id = _a.id; _a.schema; _a.region; var info = _a.info, selections = _a.selections;
+        if (selections.length || (info === null || info === void 0 ? void 0 : info.plugin) !== this) {
+            return;
+        }
+        if (info.renderer.name === 'each') {
+            menus.push('|', {
+                label: '配置成员渲染器',
+                onSelect: this.editDetail.bind(this, id)
+            });
+        }
+    };
+    EachPlugin.prototype.editDetail = function (id) {
+        var manager = this.manager;
+        var store = manager.store;
+        var node = store.getNodeById(id);
+        var value = store.getValueOf(id);
+        node &&
+            value &&
+            this.manager.openSubEditor({
+                title: '配置成员渲染器',
+                value: value.items,
+                slot: {
+                    type: 'container',
+                    body: '$$'
+                },
+                typeMutable: true,
+                onChange: function (newValue) {
+                    newValue = tslib.__assign(tslib.__assign({}, value), { items: newValue });
+                    manager.panelChangeValue(newValue, AMisCodeEditor.diff(value, newValue));
+                },
+                data: {
+                    item: 'mocked data',
+                    index: 0
+                }
+            });
+    };
+    return EachPlugin;
+}(AMisCodeEditor.BasePlugin));
+AMisCodeEditor.registerEditorPlugin(EachPlugin);
+
+exports.EachPlugin = EachPlugin;

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

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