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

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

@@ -1,4 +1,4 @@
-import { BasePlugin } from '../plugin';
+import { BasePlugin } from 'amis-editor-core';
 export declare class LinkPlugin extends BasePlugin {
     rendererName: string;
     $schema: string;
@@ -17,5 +17,6 @@ export declare class LinkPlugin extends BasePlugin {
         value: string;
     };
     panelTitle: string;
+    panelJustify: boolean;
     panelBody: any[];
 }

package/lib/plugin/Link.js

@@ -0,0 +1,120 @@
+/**
+ * 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 LinkPlugin = /** @class */ (function (_super) {
+    tslib.__extends(LinkPlugin, _super);
+    function LinkPlugin() {
+        var _this = _super !== null && _super.apply(this, arguments) || this;
+        // 关联渲染器名字
+        _this.rendererName = 'link';
+        _this.$schema = '/schemas/LinkSchema.json';
+        // 组件名称
+        _this.name = '链接';
+        _this.isBaseComponent = true;
+        _this.description = '用来展示文字链接';
+        _this.tags = ['展示'];
+        _this.icon = 'fa fa-link';
+        _this.scaffold = {
+            type: 'link',
+            value: 'http://www.baidu.com/'
+        };
+        _this.previewSchema = tslib.__assign(tslib.__assign({}, _this.scaffold), { label: _this.name });
+        _this.panelTitle = '链接';
+        _this.panelJustify = true;
+        _this.panelBody = [
+            AMisCodeEditor.getSchemaTpl('tabs', [
+                {
+                    title: '属性',
+                    body: AMisCodeEditor.getSchemaTpl('collapseGroup', [
+                        {
+                            title: '基本',
+                            body: [
+                                {
+                                    name: 'href',
+                                    type: 'input-text',
+                                    label: BaseControl.tipedLabel('目标地址', '支持取变量，如果已绑定字段名，可以不用设置')
+                                },
+                                {
+                                    name: 'body',
+                                    type: 'input-text',
+                                    label: BaseControl.tipedLabel('内容', '不填写时，自动使用目标地址值')
+                                },
+                                AMisCodeEditor.getSchemaTpl('switch', {
+                                    name: 'blank',
+                                    label: '在新窗口打开'
+                                }),
+                                AMisCodeEditor.getSchemaTpl('icon'),
+                                {
+                                    label: '图标位置',
+                                    type: 'button-group-select',
+                                    name: 'position',
+                                    size: 'sm',
+                                    options: [
+                                        {
+                                            label: '左侧',
+                                            value: 'left'
+                                        },
+                                        {
+                                            label: '右侧',
+                                            value: 'right'
+                                        }
+                                    ]
+                                }
+                            ]
+                        },
+                        AMisCodeEditor.getSchemaTpl('status', {
+                            disabled: true
+                        }),
+                        AMisCodeEditor.getSchemaTpl('collapseGroup', [
+                            {
+                                title: '高级设置',
+                                body: [
+                                    {
+                                        name: 'htmlTarget',
+                                        type: 'input-text',
+                                        label: BaseControl.tipedLabel('锚点', 'HTML <a> 元素的target属性，该属性指定在何处显示链接的资源')
+                                    }
+                                ]
+                            }
+                        ])
+                    ])
+                },
+                {
+                    title: '外观',
+                    body: AMisCodeEditor.getSchemaTpl('collapseGroup', [
+                        AMisCodeEditor.getSchemaTpl('style:classNames', {
+                            isFormItem: false,
+                            schema: [
+                                AMisCodeEditor.getSchemaTpl('className', {
+                                    name: 'iconClassName',
+                                    label: '左侧图标',
+                                    visibleOn: 'this.icon'
+                                }),
+                                AMisCodeEditor.getSchemaTpl('className', {
+                                    name: 'rightIconClassName',
+                                    label: '右侧图标',
+                                    visibleOn: 'this.rightIcon'
+                                })
+                            ]
+                        })
+                    ])
+                }
+            ])
+        ];
+        return _this;
+    }
+    return LinkPlugin;
+}(AMisCodeEditor.BasePlugin));
+AMisCodeEditor.registerEditorPlugin(LinkPlugin);
+
+exports.LinkPlugin = LinkPlugin;

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

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

package/lib/plugin/List.js

@@ -0,0 +1,220 @@
+/**
+ * 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 ListPlugin = /** @class */ (function (_super) {
+    tslib.__extends(ListPlugin, _super);
+    function ListPlugin() {
+        var _this = _super !== null && _super.apply(this, arguments) || this;
+        // 关联渲染器名字
+        _this.rendererName = 'list';
+        _this.$schema = '/schemas/ListSchema.json';
+        // 组件名称
+        _this.name = '列表';
+        _this.isBaseComponent = true;
+        _this.description = '展示一个列表，可以自定标题、副标题，内容及按钮组部分。当前组件需要配置数据源，不自带数据拉取，请优先使用 「CRUD」 组件。';
+        _this.docLink = '/amis/zh-CN/components/list';
+        _this.tags = ['展示'];
+        _this.icon = 'fa fa-list';
+        _this.scaffold = {
+            type: 'list',
+            listItem: {
+                body: [
+                    {
+                        type: 'tpl',
+                        tpl: '简单的展示数据：$a $b'
+                    }
+                ],
+                actions: [
+                    {
+                        icon: 'fa fa-eye',
+                        type: 'button'
+                    }
+                ]
+            }
+        };
+        _this.previewSchema = tslib.__assign(tslib.__assign({}, _this.scaffold), { items: [
+                { a: 1, b: 2 },
+                { a: 3, b: 4 },
+                { a: 5, b: 6 }
+            ] });
+        _this.panelTitle = '列表';
+        _this.panelBodyCreator = function (context) {
+            var isCRUDBody = context.schema.type === 'crud';
+            return AMisCodeEditor.getSchemaTpl('tabs', [
+                {
+                    title: '常规',
+                    body: [
+                        {
+                            children: (React__default["default"].createElement(amis.Button, { level: "danger", size: "sm", block: true, onClick: _this.editDetail.bind(_this, context.id) }, "\u914D\u7F6E\u6210\u5458\u8BE6\u60C5"))
+                        },
+                        {
+                            type: 'divider'
+                        },
+                        {
+                            name: 'title',
+                            type: 'input-text',
+                            label: '标题'
+                        },
+                        isCRUDBody
+                            ? null
+                            : {
+                                name: 'source',
+                                type: 'input-text',
+                                label: '数据源',
+                                pipeIn: AMisCodeEditor.defaultValue('${items}'),
+                                description: '绑定当前环境变量'
+                            },
+                        {
+                            name: 'placeholder',
+                            pipeIn: AMisCodeEditor.defaultValue('没有数据'),
+                            type: 'input-text',
+                            label: '无数据提示'
+                        }
+                    ]
+                },
+                {
+                    title: '外观',
+                    body: [
+                        AMisCodeEditor.getSchemaTpl('switch', {
+                            name: 'showHeader',
+                            label: '是否显示头部',
+                            pipeIn: AMisCodeEditor.defaultValue(true)
+                        }),
+                        AMisCodeEditor.getSchemaTpl('switch', {
+                            name: 'showFooter',
+                            label: '是否显示底部',
+                            pipeIn: AMisCodeEditor.defaultValue(true)
+                        }),
+                        AMisCodeEditor.getSchemaTpl('className', {
+                            label: 'CSS 类名'
+                        }),
+                        AMisCodeEditor.getSchemaTpl('className', {
+                            name: 'listClassName',
+                            label: 'List div CSS 类名'
+                        }),
+                        AMisCodeEditor.getSchemaTpl('className', {
+                            name: 'headerClassName',
+                            label: '头部 CSS 类名'
+                        }),
+                        AMisCodeEditor.getSchemaTpl('className', {
+                            name: 'footerClassName',
+                            label: '底部 CSS 类名'
+                        })
+                    ]
+                },
+                {
+                    title: '显隐',
+                    body: [AMisCodeEditor.getSchemaTpl('ref'), AMisCodeEditor.getSchemaTpl('visible')]
+                }
+            ]);
+        };
+        return _this;
+    }
+    ListPlugin.prototype.filterProps = function (props) {
+        if (props.isSlot) {
+            props.value = [props.data];
+            return props;
+        }
+        var data = tslib.__assign(tslib.__assign({}, props.defaultData), props.data);
+        var arr = Array.isArray(props.value)
+            ? props.value
+            : typeof props.source === 'string'
+                ? amis.resolveVariable(props.source, data)
+                : amis.resolveVariable('items', data);
+        if (!Array.isArray(arr) || !arr.length) {
+            var mockedData = this.buildMockData();
+            props.value = AMisCodeEditor.repeatArray(mockedData, 1).map(function (item, index) { return (tslib.__assign(tslib.__assign({}, item), { id: index + 1 })); });
+        }
+        var $schema = props.$schema, rest = tslib.__rest(props, ["$schema"]);
+        return tslib.__assign(tslib.__assign({}, AMisCodeEditor.JSONPipeOut(rest)), { $schema: $schema });
+    };
+    ListPlugin.prototype.buildMockData = function () {
+        return {
+            id: 666,
+            title: '假数据',
+            description: '假数据',
+            a: '假数据',
+            b: '假数据'
+        };
+    };
+    ListPlugin.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: tslib.__assign({}, value.listItem),
+                slot: {
+                    type: 'list',
+                    listItem: '$$'
+                },
+                onChange: function (newValue) {
+                    newValue = tslib.__assign(tslib.__assign({}, value), { listItem: newValue });
+                    manager.panelChangeValue(newValue, AMisCodeEditor.diff(value, newValue));
+                },
+                data: {
+                    // TODO  默认数据不对
+                    items: [this.buildMockData()]
+                }
+            });
+    };
+    ListPlugin.prototype.buildEditorToolbar = function (_a, toolbars) {
+        var id = _a.id, info = _a.info, schema = _a.schema;
+        if (info.renderer.name === 'list' ||
+            (info.renderer.name === 'crud' && schema.mode === 'list')) {
+            toolbars.push({
+                icon: 'fa fa-expand',
+                order: 100,
+                tooltip: '配置成员渲染器',
+                onClick: this.editDetail.bind(this, id)
+            });
+        }
+    };
+    ListPlugin.prototype.buildEditorContextMenu = function (_a, menus) {
+        var id = _a.id, schema = _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 === 'list' ||
+            (info.renderer.name === 'crud' && schema.mode === 'list')) {
+            menus.push('|', {
+                label: '配置成员详情',
+                onSelect: this.editDetail.bind(this, id)
+            });
+        }
+    };
+    // 为了能够自动注入数据。
+    ListPlugin.prototype.getRendererInfo = function (context) {
+        var _a;
+        var plugin = this;
+        var renderer = context.renderer, schema = context.schema;
+        if (!schema.$$id &&
+            ((_a = schema.$$editor) === null || _a === void 0 ? void 0 : _a.renderer.name) === 'crud' &&
+            renderer.name === 'list') {
+            return tslib.__assign(tslib.__assign({}, { id: schema.$$editor.id }), { name: plugin.name, regions: plugin.regions, patchContainers: plugin.patchContainers, vRendererConfig: plugin.vRendererConfig, wrapperProps: plugin.wrapperProps, wrapperResolve: plugin.wrapperResolve, filterProps: plugin.filterProps, $schema: plugin.$schema, renderRenderer: plugin.renderRenderer });
+        }
+        return _super.prototype.getRendererInfo.call(this, context);
+    };
+    return ListPlugin;
+}(AMisCodeEditor.BasePlugin));
+AMisCodeEditor.registerEditorPlugin(ListPlugin);
+
+exports.ListPlugin = ListPlugin;

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

@@ -1,4 +1,4 @@
-import { BasePlugin, BasicRendererInfo, InsertEventContext, PluginEvent, RegionConfig, RendererInfoResolveEventContext, VRendererConfig } from '../plugin';
+import { BasePlugin, BasicRendererInfo, InsertEventContext, PluginEvent, RegionConfig, RendererInfoResolveEventContext, VRendererConfig } from 'amis-editor-core';
 export declare class ListItemPlugin extends BasePlugin {
     rendererName: string;
     isBaseComponent: boolean;

package/lib/plugin/ListItem.js

@@ -0,0 +1,195 @@
+/**
+ * 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');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+var ListItemPlugin = /** @class */ (function (_super) {
+    tslib.__extends(ListItemPlugin, _super);
+    function ListItemPlugin() {
+        var _this = _super !== null && _super.apply(this, arguments) || this;
+        // 关联渲染器名字
+        _this.rendererName = 'list-item';
+        _this.isBaseComponent = true;
+        _this.$schema = '/schemas/ListItemSchema.json';
+        _this.regions = [
+            {
+                key: 'body',
+                label: '内容区',
+                renderMethod: 'renderBody',
+                preferTag: '展示'
+            },
+            {
+                key: 'actions',
+                label: '按钮集合',
+                preferTag: '按钮',
+                renderMethod: 'renderRight',
+                insertPosition: 'inner'
+            }
+        ];
+        _this.panelTitle = '列表项';
+        _this.panelBody = AMisCodeEditor.getSchemaTpl('tabs', [
+            {
+                title: '基本',
+                body: [
+                    // {
+                    //   children: (
+                    //     <Button
+                    //       size="sm"
+                    //       className="m-b-sm"
+                    //       level="info"
+                    //       block
+                    //       onClick={() => {
+                    //         this.pickChild('actions', 'actions', undefined, ['button']);
+                    //       }}
+                    //     >
+                    //       新增按钮
+                    //     </Button>
+                    //   )
+                    // },
+                    // {
+                    //   children: (
+                    //     <div>
+                    //       <Button
+                    //         level="primary"
+                    //         size="sm"
+                    //         block
+                    //         onClick={this.handleAdd}
+                    //       >
+                    //         新增内容
+                    //       </Button>
+                    //     </div>
+                    //   )
+                    // },
+                    // {
+                    //   type: 'divider'
+                    // },
+                    {
+                        name: 'title',
+                        type: 'input-text',
+                        label: '标题',
+                        descrition: '支持模板语法如： ${xxx}'
+                    },
+                    {
+                        name: 'subTitle',
+                        type: 'input-text',
+                        label: '副标题',
+                        descrition: '支持模板语法如： ${xxx}'
+                    },
+                    {
+                        name: 'avatar',
+                        type: 'input-text',
+                        label: '图片地址',
+                        descrition: '支持模板语法如： ${xxx}'
+                    },
+                    {
+                        name: 'desc',
+                        type: 'textarea',
+                        label: '描述',
+                        descrition: '支持模板语法如： ${xxx}'
+                    }
+                ]
+            },
+            {
+                title: '外观',
+                body: [
+                    AMisCodeEditor.getSchemaTpl('className', {
+                        name: 'avatarClassName',
+                        label: '图片 CSS 类名',
+                        pipeIn: AMisCodeEditor.defaultValue('thumb-sm avatar m-r')
+                    }),
+                    AMisCodeEditor.getSchemaTpl('className', {
+                        name: 'titleClassName',
+                        label: '标题 CSS 类名'
+                    })
+                ]
+            }
+        ]);
+        _this.fieldWrapperResolve = function (dom) { return dom; };
+        _this.overrides = {
+            renderFeild: function (region, field, index, props) {
+                var dom = this.super(region, field, index, props);
+                var info = this.props.$$editor;
+                if (!info || !field.$$id) {
+                    return dom;
+                }
+                var plugin = info.plugin;
+                var id = field.$$id;
+                return (React__default["default"].createElement(AMisCodeEditor.VRenderer, { type: info.type, plugin: info.plugin, renderer: info.renderer, multifactor: true, key: id, "$schema": "/schemas/ListBodyField.json", hostId: info.id, memberIndex: index, name: "".concat("\u5B57\u6BB5".concat(index + 1)), id: id, draggable: false, wrapperResolve: plugin.fieldWrapperResolve, schemaPath: "".concat(info.schemaPath, "/body/").concat(index), path: "".concat(this.props.$path, "/").concat(index), data: this.props.data }, dom));
+            }
+        };
+        _this.vRendererConfig = {
+            panelTitle: '字段',
+            panelBodyCreator: function (context) {
+                return [
+                    AMisCodeEditor.getSchemaTpl('label'),
+                    AMisCodeEditor.getSchemaTpl('className', {
+                        name: 'labelClassName',
+                        label: 'Label CSS 类名',
+                        visibleOn: 'this.label'
+                    })
+                    /*{
+                      children: (
+                        <Button
+                          size="sm"
+                          level="info"
+                          className="m-b"
+                          block
+                          onClick={this.exchangeRenderer.bind(this, context.id)}
+                        >
+                          更改渲染器类型
+                        </Button>
+                      )
+                    }*/
+                ];
+            }
+        };
+        return _this;
+    }
+    ListItemPlugin.prototype.getRendererInfo = function (_a) {
+        var renderer = _a.renderer, schema = _a.schema;
+        if (schema.$$id && this.rendererName === renderer.name) {
+            // 复制部分信息出去
+            return {
+                name: this.panelTitle,
+                regions: this.regions,
+                // patchContainers: plugin.patchContainers,
+                // // wrapper: plugin.wrapper,
+                // vRendererConfig: plugin.vRendererConfig,
+                // wrapperProps: plugin.wrapperProps,
+                // wrapperResolve: plugin.wrapperResolve,
+                // filterProps: plugin.filterProps,
+                $schema: this.$schema
+                // renderRenderer: plugin.renderRenderer
+            };
+        }
+    };
+    /*exchangeRenderer(id: string) {
+      this.manager.showReplacePanel(id, '展示');
+    }*/
+    // 自动插入 label
+    ListItemPlugin.prototype.beforeInsert = function (event) {
+        var _a, _b, _c, _d;
+        var context = event.context;
+        if ((context.info.plugin === this ||
+            ((_a = context.node.sameIdChild) === null || _a === void 0 ? void 0 : _a.info.plugin) === this) &&
+            context.region === 'body') {
+            context.data = tslib.__assign(tslib.__assign({}, context.data), { label: (_d = (_b = context.data.label) !== null && _b !== void 0 ? _b : (_c = context.subRenderer) === null || _c === void 0 ? void 0 : _c.name) !== null && _d !== void 0 ? _d : '列名称' });
+        }
+    };
+    return ListItemPlugin;
+}(AMisCodeEditor.BasePlugin));
+AMisCodeEditor.registerEditorPlugin(ListItemPlugin);
+
+exports.ListItemPlugin = ListItemPlugin;

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

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

package/lib/plugin/Log.js

@@ -0,0 +1,62 @@
+/**
+ * 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 LogPlugin = /** @class */ (function (_super) {
+    tslib.__extends(LogPlugin, _super);
+    function LogPlugin() {
+        var _this = _super !== null && _super.apply(this, arguments) || this;
+        // 关联渲染器名字
+        _this.rendererName = 'log';
+        _this.$schema = '/schemas/LogSchema.json';
+        // 组件名称
+        _this.name = '日志';
+        _this.isBaseComponent = true;
+        _this.icon = 'fa fa-file-text-o';
+        _this.description = '用来实时显示日志';
+        _this.docLink = '/amis/zh-CN/components/log';
+        _this.tags = ['展示'];
+        _this.previewSchema = {
+            type: 'log',
+            height: 120
+        };
+        _this.scaffold = {
+            type: 'log'
+        };
+        _this.panelTitle = '日志';
+        _this.panelBodyCreator = function (context) {
+            return AMisCodeEditor.getSchemaTpl('tabs', [
+                {
+                    title: '常规',
+                    body: [
+                        AMisCodeEditor.getSchemaTpl('api', {
+                            label: '日志数据源',
+                            name: 'source'
+                        })
+                    ]
+                },
+                {
+                    title: '外观',
+                    body: [AMisCodeEditor.getSchemaTpl('className')]
+                },
+                {
+                    title: '显隐',
+                    body: [AMisCodeEditor.getSchemaTpl('ref'), AMisCodeEditor.getSchemaTpl('visible')]
+                }
+            ]);
+        };
+        return _this;
+    }
+    return LogPlugin;
+}(AMisCodeEditor.BasePlugin));
+AMisCodeEditor.registerEditorPlugin(LogPlugin);
+
+exports.LogPlugin = LogPlugin;

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

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