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

package/lib/plugin/Carousel.js

@@ -0,0 +1,358 @@
+/**
+ * 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 CarouselPlugin = /** @class */ (function (_super) {
+    tslib.__extends(CarouselPlugin, _super);
+    function CarouselPlugin() {
+        var _this = _super !== null && _super.apply(this, arguments) || this;
+        // 关联渲染器名字
+        _this.rendererName = 'carousel';
+        _this.$schema = '/schemas/CarouselSchema.json';
+        // 组件名称
+        _this.name = '轮播图';
+        _this.isBaseComponent = true;
+        _this.description = '用来渲染轮播图，可以配置每一页的内容（不只是图片），可以配置过渡动画。';
+        _this.docLink = '/amis/zh-CN/components/carousel';
+        _this.tags = ['展示'];
+        _this.icon = 'fa fa-images';
+        _this.scaffold = {
+            type: 'carousel',
+            options: [
+                {
+                    image: AMisCodeEditor.mockValue({ type: 'image' })
+                },
+                {
+                    html: '<div style="width: 100%; height: 300px; background: #e3e3e3; text-align: center; line-height: 300px;">carousel data</div>'
+                },
+                {
+                    image: AMisCodeEditor.mockValue({ type: 'image' })
+                }
+            ]
+        };
+        _this.previewSchema = tslib.__assign({}, _this.scaffold);
+        _this.panelTitle = '轮播图';
+        _this.panelBodyCreator = function (context) {
+            var isUnderField = /\/field\/\w+$/.test(context.path);
+            return [
+                AMisCodeEditor.getSchemaTpl('tabs', [
+                    {
+                        title: '常规',
+                        body: [
+                            isUnderField
+                                ? {
+                                    type: 'tpl',
+                                    inline: false,
+                                    className: 'text-info text-sm',
+                                    tpl: '<p>当前为字段内容节点配置，选择上层还有更多的配置。</p>'
+                                }
+                                : null,
+                            {
+                                type: 'formula',
+                                name: '__mode',
+                                autoSet: false,
+                                formula: '!this.name && !this.source && Array.isArray(this.options) ? 2 : 1'
+                            },
+                            {
+                                label: '数据源',
+                                name: '__mode',
+                                type: 'button-group-select',
+                                size: 'xs',
+                                mode: 'inline',
+                                className: 'w-full',
+                                options: [
+                                    {
+                                        label: '关联字段',
+                                        value: 1
+                                    },
+                                    {
+                                        label: '静态设置',
+                                        value: 2
+                                    }
+                                ]
+                            },
+                            {
+                                label: '字段名',
+                                name: 'name',
+                                type: 'input-text',
+                                description: '设置字段名，关联当前数据作用域中的数据。',
+                                visibleOn: 'this.__mode == 1'
+                            },
+                            {
+                                type: 'combo',
+                                name: 'options',
+                                visibleOn: 'this.__mode == 2',
+                                label: '轮播选项内容',
+                                multiple: true,
+                                multiLine: true,
+                                addable: true,
+                                removable: true,
+                                typeSwitchable: false,
+                                conditions: [
+                                    {
+                                        label: '图片',
+                                        test: 'this.type === "image"',
+                                        items: [
+                                            AMisCodeEditor.getSchemaTpl('imageUrl', {
+                                                name: 'content'
+                                            }),
+                                            {
+                                                type: 'input-text',
+                                                label: '图片标题',
+                                                name: 'title',
+                                                visibleOn: 'this.type == "image"'
+                                            },
+                                            AMisCodeEditor.getSchemaTpl('className', {
+                                                label: '图片标题类名',
+                                                name: 'titleClassName',
+                                                visibleOn: 'this.type == "image"'
+                                            }),
+                                            {
+                                                type: 'textarea',
+                                                label: '图片描述',
+                                                name: 'description',
+                                                visibleOn: 'this.type == "image"'
+                                            },
+                                            AMisCodeEditor.getSchemaTpl('className', {
+                                                label: '图片描述类名',
+                                                name: 'descriptionClassName',
+                                                visibleOn: 'this.type == "image"'
+                                            }),
+                                            {
+                                                type: 'input-text',
+                                                label: '打开外部链接',
+                                                name: 'href',
+                                                visibleOn: 'this.type == "image"'
+                                            }
+                                        ],
+                                        scaffold: {
+                                            type: 'input-image',
+                                            image: ''
+                                        }
+                                    },
+                                    {
+                                        label: 'HTML',
+                                        test: 'this.type === "html"',
+                                        items: [
+                                            AMisCodeEditor.getSchemaTpl('richText', {
+                                                label: '内容',
+                                                name: 'content'
+                                            })
+                                        ],
+                                        scaffold: {
+                                            type: 'html',
+                                            content: '<p>html 片段</p>'
+                                        }
+                                    }
+                                ],
+                                pipeIn: function (value) {
+                                    return Array.isArray(value) && value.length
+                                        ? value.map(function (item) {
+                                            return item && item.hasOwnProperty('html')
+                                                ? {
+                                                    type: 'html',
+                                                    content: item.html
+                                                }
+                                                : {
+                                                    type: 'image',
+                                                    content: item.image,
+                                                    title: item.title,
+                                                    titleClassName: item.titleClassName,
+                                                    description: item.description,
+                                                    descriptionClassName: item.descriptionClassName
+                                                };
+                                        })
+                                        : [];
+                                },
+                                pipeOut: function (value, originValue, data) {
+                                    return Array.isArray(value) && value.length
+                                        ? value.map(function (item) {
+                                            return item.type === 'html'
+                                                ? {
+                                                    html: item.content
+                                                }
+                                                : {
+                                                    image: item.content,
+                                                    title: item.title,
+                                                    titleClassName: item.titleClassName,
+                                                    description: item.description,
+                                                    descriptionClassName: item.descriptionClassName
+                                                };
+                                        })
+                                        : [];
+                                }
+                            }
+                        ]
+                    },
+                    {
+                        title: '外观',
+                        body: [
+                            {
+                                name: 'auto',
+                                type: 'switch',
+                                mode: 'inline',
+                                className: 'w-full',
+                                label: '自动轮播',
+                                pipeIn: AMisCodeEditor.defaultValue(true)
+                            },
+                            {
+                                name: 'interval',
+                                type: 'input-range',
+                                label: '动画间隔',
+                                min: 1,
+                                max: 100,
+                                step: 1,
+                                unit: 's',
+                                pipeIn: function (value) { return (value !== null && value !== void 0 ? value : 3000) / 1000; },
+                                pipeOut: function (value, originValue, data) { return value * 1000; }
+                            },
+                            {
+                                name: 'duration',
+                                type: 'input-range',
+                                label: '动画时长',
+                                min: 100,
+                                max: 2000,
+                                step: 10,
+                                pipeIn: AMisCodeEditor.defaultValue(500),
+                                unit: 'ms'
+                            },
+                            {
+                                name: 'animation',
+                                label: '动画效果',
+                                type: 'button-group-select',
+                                mode: 'inline',
+                                className: 'w-full',
+                                size: 'sm',
+                                pipeIn: AMisCodeEditor.defaultValue('fade'),
+                                options: [
+                                    {
+                                        label: 'fade',
+                                        value: 'fade'
+                                    },
+                                    {
+                                        label: 'slide',
+                                        value: 'slide'
+                                    }
+                                ]
+                            },
+                            {
+                                name: 'controlsTheme',
+                                label: '控制按钮主题',
+                                type: 'button-group-select',
+                                size: 'sm',
+                                pipeIn: AMisCodeEditor.defaultValue('light'),
+                                mode: 'inline',
+                                className: 'w-full',
+                                options: [
+                                    {
+                                        label: 'light',
+                                        value: 'light'
+                                    },
+                                    {
+                                        label: 'dark',
+                                        value: 'dark'
+                                    }
+                                ]
+                            },
+                            {
+                                name: 'controls',
+                                label: '控制显示',
+                                type: 'button-group-select',
+                                size: 'sm',
+                                mode: 'inline',
+                                className: 'w-full',
+                                pipeIn: AMisCodeEditor.defaultValue('dots,arrows'),
+                                multiple: true,
+                                options: [
+                                    {
+                                        label: '底部圆点',
+                                        value: 'dots'
+                                    },
+                                    {
+                                        label: '左右箭头',
+                                        value: 'arrows'
+                                    }
+                                ]
+                            },
+                            {
+                                name: 'width',
+                                type: 'input-text',
+                                label: '宽度',
+                                validations: 'isNumeric',
+                                addOn: {
+                                    type: 'button',
+                                    label: 'px'
+                                }
+                            },
+                            {
+                                name: 'height',
+                                type: 'input-text',
+                                label: '高度',
+                                validations: 'isNumeric',
+                                addOn: {
+                                    type: 'button',
+                                    label: 'px'
+                                }
+                            },
+                            AMisCodeEditor.getSchemaTpl('className')
+                        ]
+                    },
+                    {
+                        title: '显隐',
+                        body: [AMisCodeEditor.getSchemaTpl('ref'), AMisCodeEditor.getSchemaTpl('visible')]
+                    }
+                ])
+            ];
+        };
+        return _this;
+    }
+    CarouselPlugin.prototype.filterProps = function (props) {
+        // 编辑的时候别自动轮播，影响编辑
+        props.auto = false;
+        return props;
+    };
+    /**
+     * 补充切换的 toolbar
+     * @param context
+     * @param toolbars
+     */
+    CarouselPlugin.prototype.buildEditorToolbar = function (context, toolbars) {
+        if (context.info.plugin === this &&
+            context.info.renderer.name === 'carousel' &&
+            !context.info.hostId) {
+            var node_1 = context.node;
+            toolbars.push({
+                level: 'secondary',
+                icon: 'fa fa-chevron-left',
+                tooltip: '上个卡片',
+                onClick: function () {
+                    var _a;
+                    var control = node_1.getComponent();
+                    (_a = control === null || control === void 0 ? void 0 : control.prev) === null || _a === void 0 ? void 0 : _a.call(control);
+                }
+            });
+            toolbars.push({
+                level: 'secondary',
+                icon: 'fa fa-chevron-right',
+                tooltip: '下个卡片',
+                onClick: function () {
+                    var _a;
+                    var control = node_1.getComponent();
+                    (_a = control === null || control === void 0 ? void 0 : control.next) === null || _a === void 0 ? void 0 : _a.call(control);
+                }
+            });
+        }
+    };
+    return CarouselPlugin;
+}(AMisCodeEditor.BasePlugin));
+AMisCodeEditor.registerEditorPlugin(CarouselPlugin);
+
+exports.CarouselPlugin = CarouselPlugin;

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

@@ -1,4 +1,5 @@
-import { BaseEventContext, BasePlugin } from '../plugin';
+import { BaseEventContext, BasePlugin } from 'amis-editor-core';
+import { RendererAction } from 'amis-editor-comp/dist/renderers/event-action';
 export declare class ChartPlugin extends BasePlugin {
     rendererName: string;
     $schema: string;
@@ -42,6 +43,7 @@ export declare class ChartPlugin extends BasePlugin {
         };
         replaceChartOption: boolean;
     };
+    actions: RendererAction[];
     panelTitle: string;
     panelBodyCreator: (context: BaseEventContext) => any[];
     editDrillDown(id: string): void;

package/lib/plugin/Chart.js

@@ -0,0 +1,192 @@
+/**
+ * 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 AMisCodeEditor__default = /*#__PURE__*/_interopDefaultLegacy(AMisCodeEditor);
+
+var ChartConfigEditor = function (_a) {
+    var value = _a.value, onChange = _a.onChange;
+    return (React__default["default"].createElement("div", { className: "ae-JsonEditor" },
+        React__default["default"].createElement(AMisCodeEditor__default["default"], { value: value, onChange: onChange })));
+};
+var ChartPlugin = /** @class */ (function (_super) {
+    tslib.__extends(ChartPlugin, _super);
+    function ChartPlugin() {
+        var _this = _super !== null && _super.apply(this, arguments) || this;
+        // 关联渲染器名字
+        _this.rendererName = 'chart';
+        _this.$schema = '/schemas/ChartSchema.json';
+        // 组件名称
+        _this.name = '图表';
+        _this.isBaseComponent = true;
+        _this.description = '用来渲染图表，基于 echarts 图表库，理论上 echarts 所有图表类型都支持。';
+        _this.docLink = '/amis/zh-CN/components/chart';
+        _this.tags = ['展示'];
+        _this.icon = 'fa fa-pie-chart';
+        _this.scaffold = {
+            type: 'chart',
+            config: {
+                xAxis: {
+                    type: 'category',
+                    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
+                },
+                yAxis: {
+                    type: 'value'
+                },
+                series: [
+                    {
+                        data: [820, 932, 901, 934, 1290, 1330, 1320],
+                        type: 'line'
+                    }
+                ]
+            },
+            replaceChartOption: true
+        };
+        _this.previewSchema = tslib.__assign({}, _this.scaffold);
+        // 动作定义
+        _this.actions = [
+            {
+                actionType: 'reload',
+                actionLabel: '重新加载',
+                description: '触发组件数据刷新并重新渲染'
+            },
+            {
+                actionType: 'setValue',
+                actionLabel: '更新数据',
+                description: '触发组件数据更新'
+            }
+        ];
+        _this.panelTitle = '图表';
+        _this.panelBodyCreator = function (context) {
+            return [
+                AMisCodeEditor.getSchemaTpl('tabs', [
+                    {
+                        title: '常规',
+                        body: [
+                            AMisCodeEditor.getSchemaTpl('api', {
+                                label: '接口拉取',
+                                description: '接口可以返回配置，或者数据，建议返回数据可映射到 Echarts 配置中'
+                            }),
+                            AMisCodeEditor.getSchemaTpl('switch', {
+                                label: '初始是否拉取',
+                                name: 'initFetch',
+                                visibleOn: 'data.api',
+                                pipeIn: AMisCodeEditor.defaultValue(true)
+                            }),
+                            {
+                                name: 'interval',
+                                label: '定时刷新间隔',
+                                type: 'input-number',
+                                step: 500,
+                                visibleOn: 'data.api',
+                                description: '设置后将自动定时刷新，最小3000, 单位 ms'
+                            },
+                            {
+                                name: 'config',
+                                asFormItem: true,
+                                component: ChartConfigEditor,
+                                // type: 'json-editor',
+                                label: 'Echarts 配置',
+                                description: '支持数据映射，可将接口返回的数据填充进来'
+                                // size: 'lg'
+                                // pipeOut: (value: any) => {
+                                //   try {
+                                //     return value ? JSON.parse(value) : null;
+                                //   } catch (e) {}
+                                //   return null;
+                                // }
+                            },
+                            {
+                                name: 'clickAction',
+                                asFormItem: true,
+                                children: function (_a) {
+                                    var onChange = _a.onChange, value = _a.value;
+                                    return (React__default["default"].createElement("div", { className: "m-b" },
+                                        React__default["default"].createElement(amis.Button, { size: "sm", level: value ? 'danger' : 'info', onClick: _this.editDrillDown.bind(_this, context.id) }, "\u914D\u7F6E DrillDown"),
+                                        value ? (React__default["default"].createElement(amis.Button, { size: "sm", level: "link", className: "m-l", onClick: function () { return onChange(''); } }, "\u5220\u9664 DrillDown")) : null));
+                                }
+                            },
+                            {
+                                name: 'dataFilter',
+                                type: 'js-editor',
+                                allowFullscreen: true,
+                                label: '数据加工',
+                                size: 'lg',
+                                description: "\n              \u5982\u679C\u540E\u7AEF\u6CA1\u6709\u76F4\u63A5\u8FD4\u56DE Echart \u914D\u7F6E\uFF0C\u53EF\u4EE5\u81EA\u5DF1\u5199\u4E00\u6BB5\u51FD\u6570\u6765\u5305\u88C5\u3002\n              <p>\u7B7E\u540D\uFF1A(config, echarts, data) => config</p>\n              <p>\u53C2\u6570\u8BF4\u660E</p>\n              <ul>\n              <li><code>config</code> \u539F\u59CB\u6570\u636E</li>\n              <li><code>echarts</code> echarts \u5BF9\u8C61</li>\n              <li><code>data</code> \u5982\u679C\u914D\u7F6E\u4E86\u6570\u636E\u63A5\u53E3\uFF0C\u63A5\u53E3\u8FD4\u56DE\u7684\u6570\u636E\u901A\u8FC7\u6B64\u53D8\u91CF\u4F20\u5165</li>\n              </ul>\n              <p>\u793A\u4F8B</p>\n              <pre>debugger; // \u53EF\u4EE5\u6D4F\u89C8\u5668\u4E2D\u65AD\u70B9\u8C03\u8BD5\n\n// \u67E5\u770B\u539F\u59CB\u6570\u636E\nconsole.log(config)\n\n// \u8FD4\u56DE\u65B0\u7684\u7ED3\u679C \nreturn {}</pre>\n              "
+                            },
+                            AMisCodeEditor.getSchemaTpl('switch', {
+                                label: 'Chart 配置完全替换',
+                                name: 'replaceChartOption',
+                                labelRemark: {
+                                    trigger: 'click',
+                                    className: 'm-l-xs',
+                                    rootClose: true,
+                                    content: '默认为追加模式，新的配置会跟旧的配置合并，如果勾选将直接完全覆盖。',
+                                    placement: 'left'
+                                }
+                            })
+                        ]
+                    },
+                    {
+                        title: '外观',
+                        body: [AMisCodeEditor.getSchemaTpl('className')]
+                    },
+                    {
+                        title: '显隐',
+                        body: [AMisCodeEditor.getSchemaTpl('visible')]
+                    },
+                    {
+                        title: '其他',
+                        body: [AMisCodeEditor.getSchemaTpl('name')]
+                    }
+                ])
+            ];
+        };
+        return _this;
+    }
+    ChartPlugin.prototype.editDrillDown = function (id) {
+        var manager = this.manager;
+        var store = manager.store;
+        var node = store.getNodeById(id);
+        var value = store.getValueOf(id);
+        var dialog = (value.clickAction && value.clickAction.dialog) || {
+            title: '标题',
+            body: ['<p>内容 <code>${value|json}</code></p>']
+        };
+        node &&
+            value &&
+            this.manager.openSubEditor({
+                title: '配置 DrillDown 详情',
+                value: tslib.__assign({ type: 'container' }, dialog),
+                slot: {
+                    type: 'container',
+                    body: '$$'
+                },
+                typeMutable: false,
+                onChange: function (newValue) {
+                    newValue = tslib.__assign(tslib.__assign({}, value), { clickAction: {
+                            actionType: 'dialog',
+                            dialog: newValue
+                        } });
+                    manager.panelChangeValue(newValue, AMisCodeEditor.diff(value, newValue));
+                }
+            });
+    };
+    return ChartPlugin;
+}(AMisCodeEditor.BasePlugin));
+AMisCodeEditor.registerEditorPlugin(ChartPlugin);
+
+exports.ChartPlugin = ChartPlugin;

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

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

package/lib/plugin/CodeView.js

@@ -0,0 +1,68 @@
+/**
+ * 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 CodeViewPlugin = /** @class */ (function (_super) {
+    tslib.__extends(CodeViewPlugin, _super);
+    function CodeViewPlugin() {
+        var _this = _super !== null && _super.apply(this, arguments) || this;
+        // 关联渲染器名字
+        _this.rendererName = 'code';
+        _this.$schema = '/schemas/CodeSchema.json';
+        // 组件名称
+        _this.name = '代码高亮';
+        _this.isBaseComponent = true;
+        _this.icon = 'fa fa-code';
+        _this.description = '代码高亮';
+        _this.docLink = '/amis/zh-CN/components/code';
+        _this.tags = ['展示'];
+        _this.scaffold = {
+            type: 'code',
+            language: 'html',
+            value: '<div>html</div>'
+        };
+        _this.previewSchema = tslib.__assign({}, _this.scaffold);
+        _this.panelTitle = '代码高亮';
+        _this.panelBody = [
+            AMisCodeEditor.getSchemaTpl('tabs', [
+                {
+                    title: '常规',
+                    body: [
+                        {
+                            type: 'input-text',
+                            label: '名称',
+                            name: 'name'
+                        },
+                        {
+                            type: 'editor',
+                            label: '固定值',
+                            allowFullscreen: true,
+                            name: 'value'
+                        }
+                    ]
+                },
+                {
+                    title: '外观',
+                    body: [AMisCodeEditor.getSchemaTpl('className')]
+                },
+                {
+                    title: '显隐',
+                    body: [AMisCodeEditor.getSchemaTpl('ref'), AMisCodeEditor.getSchemaTpl('visible')]
+                }
+            ])
+        ];
+        return _this;
+    }
+    return CodeViewPlugin;
+}(AMisCodeEditor.BasePlugin));
+AMisCodeEditor.registerEditorPlugin(CodeViewPlugin);
+
+exports.CodeViewPlugin = CodeViewPlugin;

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

@@ -1,4 +1,4 @@
-import { BasePlugin, RegionConfig, BaseEventContext } from '../plugin';
+import { BasePlugin, RegionConfig, BaseEventContext } from 'amis-editor-core';
 export declare class CollapsePlugin extends BasePlugin {
     rendererName: string;
     $schema: string;
@@ -27,6 +27,7 @@ export declare class CollapsePlugin extends BasePlugin {
         }[];
     };
     panelTitle: string;
+    panelJustify: boolean;
     panelBodyCreator: (context: BaseEventContext) => any;
     regions: Array<RegionConfig>;
 }