amis-editor 5.2.0-beta.1 → 5.2.0

package/lib/plugin/Card.js

@@ -1,233 +0,0 @@
-/**
- * amis-editor v5.2.0-beta.1
- * Copyright 2018-2022 @fex
- */
-
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var tslib = require('tslib');
-var amisUi = require('amis-ui');
-var React = require('react');
-var AMisCodeEditor = require('amis-editor-core');
-var flatten = require('lodash/flatten');
-
-function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
-
-var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
-var flatten__default = /*#__PURE__*/_interopDefaultLegacy(flatten);
-
-var CardPlugin = /** @class */ (function (_super) {
-    tslib.__extends(CardPlugin, _super);
-    function CardPlugin() {
-        var _this = _super !== null && _super.apply(this, arguments) || this;
-        // 关联渲染器名字
-        _this.rendererName = 'card';
-        _this.$schema = '/schemas/CardSchema.json';
-        // 组件名称
-        _this.name = '卡片';
-        _this.isBaseComponent = true;
-        _this.description = '展示单个卡片。';
-        _this.docLink = '/amis/zh-CN/components/card';
-        _this.tags = ['展示'];
-        _this.icon = '';
-        _this.scaffold = {
-            type: 'card',
-            header: {
-                title: '标题',
-                subTitle: '副标题'
-            },
-            body: '内容',
-            actions: [
-                {
-                    type: 'button',
-                    label: '按钮',
-                    actionType: 'dialog',
-                    dialog: {
-                        title: '标题',
-                        body: '内容'
-                    }
-                }
-            ]
-        };
-        _this.previewSchema = tslib.__assign({}, _this.scaffold);
-        _this.regions = [
-            {
-                key: 'body',
-                label: '内容区',
-                renderMethod: 'renderBody',
-                preferTag: '展示'
-            },
-            {
-                key: 'actions',
-                label: '按钮组',
-                renderMethod: 'renderActions',
-                wrapperResolve: function (dom) { return dom; },
-                preferTag: '按钮'
-            }
-        ];
-        _this.panelTitle = '卡片';
-        _this.panelBodyCreator = function (context) {
-            return [
-                AMisCodeEditor.getSchemaTpl('tabs', [
-                    {
-                        title: '常规',
-                        body: flatten__default["default"]([
-                            {
-                                children: (React__default["default"].createElement(amisUi.Button, { size: "sm", className: "m-b-sm", level: "info", block: true, onClick: function () {
-                                        // this.manager.showInsertPanel('actions', context.id)
-                                        return _this.manager.showRendererPanel('按钮', '请从左侧组件面板中点击添加按钮元素');
-                                    } }, "\u65B0\u589E\u6309\u94AE"))
-                            },
-                            {
-                                children: (React__default["default"].createElement("div", null,
-                                    React__default["default"].createElement(amisUi.Button, { block: true, level: "primary", size: "sm", onClick: function () {
-                                            // this.manager.showInsertPanel('body', context.id)
-                                            return _this.manager.showRendererPanel('展示', '请从左侧组件面板中点击添加内容元素');
-                                        } }, "\u65B0\u589E\u5185\u5BB9")))
-                            },
-                            {
-                                type: 'divider'
-                            },
-                            {
-                                name: 'header.title',
-                                type: 'input-text',
-                                label: '标题',
-                                description: '支持模板语法如： <code>\\${xxx}</code>'
-                            },
-                            {
-                                name: 'header.subTitle',
-                                type: 'input-text',
-                                label: '副标题',
-                                description: '支持模板语法如： <code>\\${xxx}</code>'
-                            },
-                            {
-                                name: 'header.avatar',
-                                type: 'input-text',
-                                label: '图片地址',
-                                description: '支持模板语法如： <code>\\${xxx}</code>'
-                            },
-                            {
-                                name: 'header.desc',
-                                type: 'textarea',
-                                label: '描述',
-                                description: '支持模板语法如： <code>\\${xxx}</code>'
-                            },
-                            {
-                                name: 'header.highlight',
-                                type: 'input-text',
-                                label: '是否高亮表达式',
-                                description: '如： <code>this.isOwner</code>'
-                            }
-                        ])
-                    },
-                    {
-                        title: '外观',
-                        body: [
-                            {
-                                type: 'input-range',
-                                name: 'actionsCount',
-                                pipeIn: AMisCodeEditor.defaultValue(4),
-                                min: 1,
-                                max: 10,
-                                step: 1,
-                                label: '卡片一行最多能放按钮个数'
-                            },
-                            AMisCodeEditor.getSchemaTpl('className', {
-                                name: 'titleClassName',
-                                label: '标题 CSS 类名'
-                            }),
-                            AMisCodeEditor.getSchemaTpl('className', {
-                                name: 'highlightClassName',
-                                label: '高亮 CSS 类名'
-                            }),
-                            AMisCodeEditor.getSchemaTpl('className', {
-                                name: 'subTitleClassName',
-                                label: '副标题 CSS 类名'
-                            }),
-                            AMisCodeEditor.getSchemaTpl('className', {
-                                name: 'descClassName',
-                                label: '描述 CSS 类名'
-                            }),
-                            AMisCodeEditor.getSchemaTpl('className', {
-                                name: 'avatarClassName',
-                                label: '图片外层 CSS 类名'
-                            }),
-                            AMisCodeEditor.getSchemaTpl('className', {
-                                name: 'imageClassName',
-                                label: '图片 CSS 类名'
-                            }),
-                            AMisCodeEditor.getSchemaTpl('className', {
-                                name: 'bodyClassName',
-                                label: '内容区 CSS 类名'
-                            }),
-                            AMisCodeEditor.getSchemaTpl('className')
-                        ]
-                    },
-                    {
-                        title: '显隐',
-                        body: [AMisCodeEditor.getSchemaTpl('ref'), AMisCodeEditor.getSchemaTpl('visible')]
-                    }
-                ])
-            ];
-        };
-        /*exchangeRenderer(id: string) {
-          this.manager.showReplacePanel(id, '展示');
-        }*/
-        _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/CardBodyField.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;
-    }
-    // 自动插入 label
-    CardPlugin.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 CardPlugin;
-}(AMisCodeEditor.BasePlugin));
-AMisCodeEditor.registerEditorPlugin(CardPlugin);
-
-exports.CardPlugin = CardPlugin;

package/lib/plugin/Cards.js

@@ -1,254 +0,0 @@
-/**
- * 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 CardsPlugin = /** @class */ (function (_super) {
-    tslib.__extends(CardsPlugin, _super);
-    function CardsPlugin() {
-        var _this = _super !== null && _super.apply(this, arguments) || this;
-        // 关联渲染器名字
-        _this.rendererName = 'cards';
-        _this.$schema = '/schemas/CardsSchema.json';
-        // 组件名称
-        _this.name = '卡片列表';
-        _this.isBaseComponent = true;
-        _this.description = '功能类似于表格，但是用一个个小卡片来展示数据。当前组件需要配置数据源，不自带数据拉取，请优先使用 「CRUD」 组件。';
-        _this.docLink = '/amis/zh-CN/components/cards';
-        _this.tags = ['展示'];
-        _this.icon = 'fa fa-window-maximize';
-        _this.scaffold = {
-            type: 'cards',
-            data: {
-                items: [
-                    { a: 1, b: 2 },
-                    { a: 3, b: 4 }
-                ]
-            },
-            columnsCount: 2,
-            card: {
-                type: 'card',
-                className: 'm-b-none',
-                header: {
-                    title: '标题',
-                    subTitle: '副标题'
-                },
-                body: [
-                    {
-                        name: 'a',
-                        label: 'A'
-                    },
-                    {
-                        name: 'b',
-                        label: 'B'
-                    }
-                ],
-                actions: [
-                    {
-                        label: '详情',
-                        type: 'button'
-                    }
-                ]
-            }
-        };
-        _this.previewSchema = tslib.__assign(tslib.__assign({}, _this.scaffold), { className: 'text-left ' });
-        _this.panelTitle = '卡片集';
-        _this.panelBodyCreator = function (context) {
-            var isCRUDBody = context.schema.type === 'crud';
-            return [
-                AMisCodeEditor.getSchemaTpl('tabs', [
-                    {
-                        title: '常规',
-                        body: [
-                            {
-                                children: (React__default["default"].createElement("div", { className: "m-b" },
-                                    React__default["default"].createElement(amis.Button, { level: "success", size: "sm", block: true, onClick: _this.editDetail.bind(_this, context.id) }, "\u914D\u7F6E\u5355\u9879\u4FE1\u606F")))
-                            },
-                            {
-                                type: 'divider'
-                            },
-                            {
-                                name: 'title',
-                                type: 'input-text',
-                                label: '标题'
-                            },
-                            {
-                                name: 'href',
-                                type: 'input-text',
-                                label: '打开外部链接'
-                            },
-                            isCRUDBody
-                                ? null
-                                : {
-                                    name: 'source',
-                                    type: 'input-text',
-                                    label: '数据源',
-                                    pipeIn: AMisCodeEditor.defaultValue('${items}'),
-                                    description: '绑定当前环境变量',
-                                    test: !isCRUDBody
-                                },
-                            {
-                                name: 'placeholder',
-                                value: '暂无数据',
-                                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: 'headerClassName',
-                                label: '头部 CSS 类名'
-                            }),
-                            AMisCodeEditor.getSchemaTpl('className', {
-                                name: 'footerClassName',
-                                label: '底部 CSS 类名'
-                            }),
-                            AMisCodeEditor.getSchemaTpl('className', {
-                                name: 'itemsClassName',
-                                label: '内容 CSS 类名'
-                            }),
-                            AMisCodeEditor.getSchemaTpl('className', {
-                                pipeIn: AMisCodeEditor.defaultValue('Grid-col--sm6 Grid-col--md4 Grid-col--lg3'),
-                                name: 'itemClassName',
-                                label: '卡片 CSS 类名'
-                            }),
-                            {
-                                name: 'columnsCount',
-                                type: 'input-range',
-                                visibleOn: '!this.leftFixed',
-                                min: 0,
-                                max: 12,
-                                step: 1,
-                                label: '每行显示个数',
-                                description: '不设置时，由卡片 CSS 类名决定'
-                            },
-                            AMisCodeEditor.getSchemaTpl('switch', {
-                                name: 'masonryLayout',
-                                label: '启用瀑布流'
-                            })
-                        ]
-                    },
-                    {
-                        title: '显隐',
-                        body: [AMisCodeEditor.getSchemaTpl('ref'), AMisCodeEditor.getSchemaTpl('visible')]
-                    }
-                ])
-            ];
-        };
-        return _this;
-    }
-    CardsPlugin.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({ type: 'card' }, value.card),
-                slot: {
-                    type: 'container',
-                    body: '$$'
-                },
-                typeMutable: false,
-                onChange: function (newValue) {
-                    newValue = tslib.__assign(tslib.__assign({}, value), { card: newValue });
-                    manager.panelChangeValue(newValue, AMisCodeEditor.diff(value, newValue));
-                },
-                data: {
-                    item: 'mocked data',
-                    index: 0
-                }
-            });
-    };
-    CardsPlugin.prototype.buildEditorToolbar = function (_a, toolbars) {
-        var id = _a.id, info = _a.info, schema = _a.schema;
-        if (info.renderer.name === 'cards' ||
-            (info.renderer.name === 'crud' && schema.mode === 'cards')) {
-            toolbars.push({
-                icon: 'fa fa-expand',
-                order: 100,
-                tooltip: '配置成员渲染器',
-                onClick: this.editDetail.bind(this, id)
-            });
-        }
-    };
-    CardsPlugin.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 === 'cards' ||
-            (info.renderer.name === 'crud' && schema.mode === 'cards')) {
-            menus.push('|', {
-                label: '配置成员渲染器',
-                onSelect: this.editDetail.bind(this, id)
-            });
-        }
-    };
-    CardsPlugin.prototype.filterProps = function (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 = {
-                id: 666,
-                title: '假数据',
-                description: '假数据',
-                a: '假数据',
-                b: '假数据'
-            };
-            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 });
-    };
-    CardsPlugin.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 === 'cards') {
-            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 CardsPlugin;
-}(AMisCodeEditor.BasePlugin));
-AMisCodeEditor.registerEditorPlugin(CardsPlugin);
-
-exports.CardsPlugin = CardsPlugin;