amis-editor 4.1.0-beta.4 → 5.2.0-beta.1

package/lib/plugin/DropDownButton.js

@@ -0,0 +1,229 @@
+/**
+ * amis-editor v5.2.0-beta.1
+ * 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;
@@ -30,6 +30,6 @@ export declare class EachPlugin extends BasePlugin {
     panelBodyCreator: (context: BaseEventContext) => any[];
     filterProps(props: any): any;
     buildEditorToolbar({ id, info }: BaseEventContext, toolbars: Array<BasicToolbarItem>): void;
-    buildEditorContextMenu({ id, schema, region, info }: ContextMenuEventContext, menus: Array<ContextMenuItem>): void;
+    buildEditorContextMenu({ id, schema, region, info, selections }: ContextMenuEventContext, menus: Array<ContextMenuItem>): void;
     editDetail(id: string): void;
 }

package/lib/plugin/Each.js

@@ -0,0 +1,131 @@
+/**
+ * amis-editor v5.2.0-beta.1
+ * 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;
@@ -7,6 +7,7 @@ export declare class FlexPlugin extends BasePlugin {
     isBaseComponent: boolean;
     icon: string;
     description: string;
+    docLink: string;
     tags: string[];
     scaffold: {
         type: string;

package/lib/plugin/Flex.js

@@ -0,0 +1,203 @@
+/**
+ * amis-editor v5.2.0-beta.1
+ * Copyright 2018-2022 @fex
+ */
+
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var tslib = require('tslib');
+var AMisCodeEditor = require('amis-editor-core');
+
+var FlexPlugin = /** @class */ (function (_super) {
+    tslib.__extends(FlexPlugin, _super);
+    function FlexPlugin() {
+        var _this = _super !== null && _super.apply(this, arguments) || this;
+        // 关联渲染器名字
+        _this.rendererName = 'flex';
+        _this.$schema = '/schemas/FlexSchema.json';
+        _this.disabledRendererPlugin = true;
+        // 组件名称
+        _this.name = 'Flex 布局';
+        _this.isBaseComponent = true;
+        _this.icon = 'fa fa-columns';
+        _this.description = 'flex 布局';
+        _this.docLink = '/amis/zh-CN/components/flex';
+        _this.tags = ['容器'];
+        _this.scaffold = {
+            type: 'flex',
+            items: [
+                {
+                    type: 'wrapper',
+                    body: '第一列'
+                },
+                {
+                    type: 'wrapper',
+                    body: '第二列'
+                },
+                {
+                    type: 'wrapper',
+                    body: '第三列'
+                }
+            ]
+        };
+        _this.previewSchema = tslib.__assign({}, _this.scaffold);
+        _this.panelTitle = 'Flex';
+        _this.panelBody = [
+            AMisCodeEditor.getSchemaTpl('tabs', [
+                {
+                    title: '属性',
+                    className: 'p-none',
+                    body: [
+                        AMisCodeEditor.getSchemaTpl('collapseGroup', [
+                            {
+                                title: '布局',
+                                body: [
+                                    {
+                                        name: 'justify',
+                                        type: 'select',
+                                        value: 'center',
+                                        label: '子节点水平分布方式',
+                                        menuTpl: "<div class='flex justify-between'><span>${label}</span><span class='text-muted text-sm'>${value}</span></div>",
+                                        options: [
+                                            {
+                                                label: '起始端对齐',
+                                                value: 'flex-start'
+                                            },
+                                            {
+                                                label: '居中对齐',
+                                                value: 'center'
+                                            },
+                                            {
+                                                label: '末尾端对齐',
+                                                value: 'flex-end'
+                                            },
+                                            {
+                                                label: '均匀分布（首尾留空）',
+                                                value: 'space-around'
+                                            },
+                                            {
+                                                label: '均匀分布（首尾对齐）',
+                                                value: 'space-between'
+                                            },
+                                            {
+                                                label: '均匀分布（元素等间距）',
+                                                value: 'space-evenly'
+                                            },
+                                            {
+                                                label: '均匀分布（自动拉伸）',
+                                                value: 'stretch'
+                                            }
+                                        ]
+                                    },
+                                    {
+                                        name: 'alignItems',
+                                        type: 'select',
+                                        value: 'center',
+                                        label: '子节点垂直方向位置',
+                                        menuTpl: "<div class='flex justify-between'><span>${label}</span><span class='text-muted text-sm'>${value}</span></div>",
+                                        options: [
+                                            {
+                                                label: '起始端对齐',
+                                                value: 'flex-start'
+                                            },
+                                            {
+                                                label: '居中对齐',
+                                                value: 'center'
+                                            },
+                                            {
+                                                label: '末尾端对齐',
+                                                value: 'flex-end'
+                                            },
+                                            {
+                                                label: '基线对齐',
+                                                value: 'baseline'
+                                            },
+                                            {
+                                                label: '自动拉伸',
+                                                value: 'stretch'
+                                            }
+                                        ]
+                                    },
+                                    {
+                                        name: 'direction',
+                                        type: 'button-group-select',
+                                        size: 'sm',
+                                        label: '布局方向',
+                                        value: 'row',
+                                        mode: 'row',
+                                        options: [
+                                            { label: '水平', value: 'row' },
+                                            { label: '垂直', value: 'column' }
+                                        ]
+                                    }
+                                ]
+                            },
+                            {
+                                title: '子节点管理',
+                                body: [
+                                    {
+                                        name: 'items',
+                                        label: false,
+                                        type: 'combo',
+                                        scaffold: {
+                                            type: 'wrapper',
+                                            body: '子节点内容'
+                                        },
+                                        minLength: 2,
+                                        multiple: true,
+                                        // draggable: true,
+                                        draggableTip: '',
+                                        items: [
+                                            {
+                                                type: 'tpl',
+                                                tpl: '<span class="label label-default">子节点${index | plus}</span>'
+                                            }
+                                        ]
+                                    }
+                                ]
+                            }
+                        ])
+                    ]
+                },
+                {
+                    title: '外观',
+                    className: 'p-none',
+                    body: AMisCodeEditor.getSchemaTpl('collapseGroup', tslib.__spreadArray(tslib.__spreadArray([], AMisCodeEditor.getSchemaTpl('style:common', ['display']), true), [
+                        {
+                            title: 'CSS 类名',
+                            body: [AMisCodeEditor.getSchemaTpl('className', { label: '外层CSS类名' })]
+                        }
+                    ], false))
+                },
+                {
+                    title: '状态',
+                    body: [AMisCodeEditor.getSchemaTpl('visible'), AMisCodeEditor.getSchemaTpl('disabled')]
+                }
+            ])
+        ];
+        _this.regions = [
+            {
+                key: 'items',
+                label: '子节点集合',
+                // 复写渲染器里面的 render 方法
+                renderMethod: 'render',
+                dndMode: 'position-h'
+            }
+        ];
+        return _this;
+    }
+    FlexPlugin.prototype.afterResolveJsonSchema = function (event) {
+        var _a, _b;
+        var context = event.context;
+        var parent = (_a = context.node.parent) === null || _a === void 0 ? void 0 : _a.host;
+        if (((_b = parent === null || parent === void 0 ? void 0 : parent.info) === null || _b === void 0 ? void 0 : _b.plugin) === this) {
+            event.setData('/schemas/FlexColumn.json');
+        }
+    };
+    return FlexPlugin;
+}(AMisCodeEditor.BasePlugin));
+AMisCodeEditor.registerEditorPlugin(FlexPlugin);
+
+exports.FlexPlugin = FlexPlugin;

package/{dist → lib}/plugin/Form/ButtonGroupSelect.d.ts

@@ -1,4 +1,5 @@
-import { BasePlugin } from '../../plugin';
+import { BasePlugin, BaseEventContext } from 'amis-editor-core';
+import { RendererAction, RendererEvent } from 'amis-editor-comp/dist/renderers/event-action';
 export declare class ButtonGroupControlPlugin extends BasePlugin {
     rendererName: string;
     $schema: string;
@@ -17,6 +18,10 @@ export declare class ButtonGroupControlPlugin extends BasePlugin {
         }[];
     };
     previewSchema: any;
+    notRenderFormZone: boolean;
     panelTitle: string;
-    panelBody: any[];
+    events: RendererEvent[];
+    actions: RendererAction[];
+    panelJustify: boolean;
+    panelBodyCreator: (context: BaseEventContext) => any[];
 }