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

package/lib/plugin/Panel.js

@@ -0,0 +1,222 @@
+/**
+ * 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 PanelPlugin = /** @class */ (function (_super) {
+    tslib.__extends(PanelPlugin, _super);
+    function PanelPlugin() {
+        var _this = _super !== null && _super.apply(this, arguments) || this;
+        // 关联渲染器名字
+        _this.rendererName = 'panel';
+        _this.$schema = '/schemas/panelSchema.json';
+        _this.name = '面板';
+        _this.isBaseComponent = true;
+        _this.icon = 'fa fa-window-maximize';
+        _this.description = '展示一个面板，可以配置标题，内容区。';
+        _this.docLink = '/amis/zh-CN/components/panel';
+        _this.tags = '容器';
+        _this.scaffold = {
+            type: 'panel',
+            title: '标题',
+            body: '内容'
+        };
+        _this.previewSchema = {
+            type: 'panel',
+            title: '这是一个面板',
+            body: '这是内容区',
+            className: 'Panel--default text-left m-b-none',
+            actions: [
+                {
+                    label: '按钮1',
+                    type: 'button'
+                },
+                {
+                    label: '按钮2',
+                    type: 'button'
+                }
+            ]
+        };
+        _this.regions = [
+            {
+                key: 'body',
+                label: '内容区',
+                // 复写渲染器里面的 renderBody 方法
+                renderMethod: 'renderBody',
+                // 这个 case 很另类，要自己写。form 里面直接复用了 Panel 来输出内容。
+                // 这种 case 应该跳过包裹 Region
+                // 只有他自己输出时才包裹，form 调用进来是下发了 children 来完成渲染
+                // 自己的话是其他方式。
+                renderMethodOverride: function (regions, insertRegion) {
+                    return function () {
+                        var args = [];
+                        for (var _i = 0; _i < arguments.length; _i++) {
+                            args[_i] = arguments[_i];
+                        }
+                        var info = this.props.$$editor;
+                        var dom = this.super.apply(this, args);
+                        if (info && !this.props.children) {
+                            return insertRegion(this, dom, regions, info, info.plugin.manager);
+                        }
+                        return dom;
+                    };
+                }
+            },
+            {
+                key: 'actions',
+                label: '按钮组',
+                renderMethod: 'renderActions',
+                preferTag: '按钮'
+            }
+        ];
+        _this.panelTitle = '面板';
+        _this.panelBodyCreator = function (context) {
+            var isForm = /(?:^|\/)form$/.test(context.path);
+            return [
+                AMisCodeEditor.getSchemaTpl('tabs', [
+                    {
+                        title: '常规',
+                        body: [
+                            {
+                                label: '标题',
+                                name: 'title',
+                                type: 'input-text'
+                            },
+                            isForm
+                                ? null
+                                : {
+                                    children: (React__default["default"].createElement(amis.Button, { size: "sm", level: "info", className: "m-b", onClick: function () {
+                                            // this.manager.showInsertPanel('body')
+                                            _this.manager.showRendererPanel('');
+                                        }, block: true }, "\u5185\u5BB9\u533A\u65B0\u589E\u5185\u5BB9"))
+                                }
+                        ]
+                    },
+                    {
+                        title: '外观',
+                        body: [
+                            AMisCodeEditor.getSchemaTpl('switch', {
+                                name: 'affixFooter',
+                                label: '固定底部',
+                                value: false
+                            }),
+                            AMisCodeEditor.getSchemaTpl('horizontal', {
+                                visibleOn: '(data.mode || data.$$formMode) == "horizontal" && data.$$mode == "form"'
+                            }),
+                            {
+                                name: isForm ? 'panelClassName' : 'className',
+                                label: '样式',
+                                type: 'button-group-select',
+                                size: 'sm',
+                                pipeIn: function (value) {
+                                    return typeof value === 'string' &&
+                                        /(?:^|\s)(Panel\-\-(\w+))(?:$|\s)/.test(value)
+                                        ? RegExp.$1
+                                        : '';
+                                },
+                                pipeOut: function (value, origin) {
+                                    return origin
+                                        ? "".concat(origin.replace(/(?:^|\s)(Panel\-\-(\w+))(?=($|\s))/g, ''), " ").concat(value)
+                                            .replace(/\s+/g, ' ')
+                                            .trim()
+                                        : value;
+                                },
+                                options: [
+                                    {
+                                        label: '默认',
+                                        value: 'Panel--default'
+                                    },
+                                    {
+                                        label: '主色',
+                                        value: 'Panel--primary'
+                                    },
+                                    {
+                                        label: '提示',
+                                        value: 'Panel--info'
+                                    },
+                                    {
+                                        label: '成功',
+                                        value: 'Panel--success'
+                                    },
+                                    {
+                                        label: '警告',
+                                        value: 'Panel--warning'
+                                    },
+                                    {
+                                        label: '危险',
+                                        value: 'Panel--danger'
+                                    }
+                                ]
+                            },
+                            AMisCodeEditor.getSchemaTpl('className', {
+                                name: isForm ? 'panelClassName' : 'className',
+                                pipeIn: AMisCodeEditor.defaultValue('Panel--default')
+                            }),
+                            AMisCodeEditor.getSchemaTpl('className', {
+                                name: 'headerClassName',
+                                label: '头部区域 CSS 类名'
+                            }),
+                            AMisCodeEditor.getSchemaTpl('className', {
+                                name: 'bodyClassName',
+                                label: '内容区域 CSS 类名'
+                            }),
+                            AMisCodeEditor.getSchemaTpl('className', {
+                                name: 'footerClassName',
+                                label: '底部区域 CSS 类名'
+                            }),
+                            AMisCodeEditor.getSchemaTpl('className', {
+                                name: 'actionsClassName',
+                                label: '按钮外层 CSS 类名'
+                            }),
+                            AMisCodeEditor.getSchemaTpl('subFormItemMode'),
+                            AMisCodeEditor.getSchemaTpl('subFormHorizontalMode'),
+                            AMisCodeEditor.getSchemaTpl('subFormHorizontal')
+                        ]
+                    },
+                    {
+                        title: '显隐',
+                        body: [AMisCodeEditor.getSchemaTpl('ref'), AMisCodeEditor.getSchemaTpl('visible')]
+                    }
+                ])
+            ];
+        };
+        return _this;
+    }
+    PanelPlugin.prototype.buildEditorPanel = function (context, panels) {
+        var plugin = this;
+        var schema = context.schema;
+        if (context.info.renderer.name === 'form' &&
+            schema.wrapWithPanel !== false &&
+            !context.selections.length) {
+            panels.push({
+                key: 'panel',
+                icon: 'fa fa-list-alt',
+                title: this.panelTitle,
+                render: this.manager.makeSchemaFormRender({
+                    body: this.panelBodyCreator(context),
+                    rendererName: plugin.rendererName
+                })
+            });
+        }
+        else {
+            _super.prototype.buildEditorPanel.call(this, context, panels);
+        }
+    };
+    return PanelPlugin;
+}(AMisCodeEditor.BasePlugin));
+AMisCodeEditor.registerEditorPlugin(PanelPlugin);
+
+exports.PanelPlugin = PanelPlugin;

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

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

package/lib/plugin/Plain.js

@@ -0,0 +1,88 @@
+/**
+ * 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 PlainPlugin = /** @class */ (function (_super) {
+    tslib.__extends(PlainPlugin, _super);
+    function PlainPlugin() {
+        var _this = _super !== null && _super.apply(this, arguments) || this;
+        // 关联渲染器名字
+        _this.rendererName = 'plain';
+        _this.$schema = '/schemas/PlainSchema.json';
+        _this.disabledRendererPlugin = true; // 组件面板不显示
+        // 组件名称
+        _this.name = '纯文本';
+        _this.isBaseComponent = true;
+        _this.icon = 'fa fa-file-text-o';
+        _this.description = '用来展示纯文字，html 标签会被转义。';
+        _this.docLink = '/amis/zh-CN/components/plain';
+        _this.tags = ['展示'];
+        _this.previewSchema = {
+            type: 'plain',
+            text: '这是纯文本',
+            className: 'text-center',
+            inline: false
+        };
+        _this.scaffold = {
+            type: 'plain',
+            tpl: '内容',
+            inline: false
+        };
+        _this.panelTitle = '纯文本';
+        _this.panelBodyCreator = function (context) {
+            var isTableCell = context.info.renderer.name === 'table-cell';
+            return AMisCodeEditor.getSchemaTpl('tabs', [
+                {
+                    title: '常规',
+                    body: [
+                        {
+                            label: '内容',
+                            type: 'textarea',
+                            pipeIn: function (value, data) { return value || (data && data.text); },
+                            name: 'tpl',
+                            description: '如果当前字段有值，请不要设置，否则覆盖。支持使用 <code>\\${xxx}</code> 来获取变量，或者用 lodash.template 语法来写模板逻辑。<a target="_blank" href="/amis/zh-CN/docs/concepts/template">详情</a>'
+                        },
+                        {
+                            name: 'placeholder',
+                            label: '占位符',
+                            type: 'input-text',
+                            pipeIn: AMisCodeEditor.defaultValue('-')
+                        }
+                    ]
+                },
+                isTableCell
+                    ? null
+                    : {
+                        title: '外观',
+                        body: [
+                            AMisCodeEditor.getSchemaTpl('switch', {
+                                name: 'inline',
+                                label: '内联模式',
+                                value: true
+                            }),
+                            AMisCodeEditor.getSchemaTpl('className')
+                        ]
+                    },
+                isTableCell
+                    ? null
+                    : {
+                        title: '显隐',
+                        body: [AMisCodeEditor.getSchemaTpl('ref'), AMisCodeEditor.getSchemaTpl('visible')]
+                    }
+            ]);
+        };
+        return _this;
+    }
+    return PlainPlugin;
+}(AMisCodeEditor.BasePlugin));
+AMisCodeEditor.registerEditorPlugin(PlainPlugin);
+
+exports.PlainPlugin = PlainPlugin;

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

@@ -1,20 +1,25 @@
-import { BaseEventContext, BasePlugin } from '../plugin';
+import { BaseEventContext, BasePlugin } from 'amis-editor-core';
 export declare class ProgressPlugin extends BasePlugin {
     rendererName: string;
     $schema: string;
     name: string;
+    searchKeywords: string;
     isBaseComponent: boolean;
     description: string;
+    docLink: string;
     tags: string[];
     icon: string;
     scaffold: {
         type: string;
         value: number;
+        strokeWidth: number;
     };
     previewSchema: {
         type: string;
         value: number;
+        strokeWidth: number;
     };
     panelTitle: string;
-    panelBodyCreator: (context: BaseEventContext) => any[];
+    panelJustify: boolean;
+    panelBodyCreator: (context: BaseEventContext) => any;
 }

package/lib/plugin/Progress.js

@@ -0,0 +1,258 @@
+/**
+ * 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 BaseControl = require('../component/BaseControl.js');
+
+var ProgressPlugin = /** @class */ (function (_super) {
+    tslib.__extends(ProgressPlugin, _super);
+    function ProgressPlugin() {
+        var _this = _super !== null && _super.apply(this, arguments) || this;
+        // 关联渲染器名字
+        _this.rendererName = 'progress';
+        _this.$schema = '/schemas/ProgressSchema.json';
+        // 组件名称
+        _this.name = '进度展示';
+        _this.searchKeywords = '进度条、progress';
+        _this.isBaseComponent = true;
+        _this.description = '用来展示进度。可配置各个进度段用不同的颜色展示。';
+        _this.docLink = '/amis/zh-CN/components/progress';
+        _this.tags = ['展示'];
+        _this.icon = 'fa fa-angle-double-right';
+        _this.scaffold = {
+            type: 'progress',
+            value: 66,
+            strokeWidth: 6
+        };
+        _this.previewSchema = tslib.__assign({}, _this.scaffold);
+        _this.panelTitle = '进度';
+        _this.panelJustify = true;
+        _this.panelBodyCreator = function (context) {
+            var isFormItem = !!(context === null || context === void 0 ? void 0 : context.info.renderer.isFormItem);
+            return AMisCodeEditor.getSchemaTpl('tabs', [
+                {
+                    title: '属性',
+                    body: AMisCodeEditor.getSchemaTpl('collapseGroup', [
+                        {
+                            title: '基本',
+                            body: [
+                                {
+                                    label: '类型',
+                                    name: 'mode',
+                                    type: 'select',
+                                    option: '继承',
+                                    value: 'line',
+                                    tiled: true,
+                                    options: [
+                                        {
+                                            label: '线形',
+                                            value: 'line'
+                                        },
+                                        {
+                                            label: '圆形',
+                                            value: 'circle'
+                                        },
+                                        {
+                                            label: '仪表盘',
+                                            value: 'dashboard'
+                                        }
+                                    ],
+                                    onChange: function (value, oldValue, model, form) {
+                                        if (value === 'circle') {
+                                            form.setValueByName('gapDegree', 0);
+                                            form.setValueByName('gapPosition', '');
+                                        }
+                                        else if (value === 'dashboard') {
+                                            form.setValueByName('gapDegree', 75);
+                                            form.setValueByName('gapPosition', 'bottom');
+                                        }
+                                    }
+                                },
+                                {
+                                    type: 'input-number',
+                                    name: 'value',
+                                    label: '默认值',
+                                    min: 0,
+                                    max: 100
+                                },
+                                AMisCodeEditor.getSchemaTpl('menuTpl', {
+                                    name: 'valueTpl'
+                                }),
+                                AMisCodeEditor.getSchemaTpl('switch', {
+                                    name: 'showLabel',
+                                    label: '进度值',
+                                    pipeIn: AMisCodeEditor.defaultValue(true)
+                                }),
+                                AMisCodeEditor.getSchemaTpl('placeholder', {
+                                    value: '-',
+                                    placeholder: '无数据空位提示',
+                                    label: BaseControl.tipedLabel('占位提示', '数据字段未定义时的值，不包括0')
+                                })
+                            ]
+                        },
+                        AMisCodeEditor.getSchemaTpl('status', { isFormItem: isFormItem })
+                    ])
+                },
+                {
+                    title: '外观',
+                    body: AMisCodeEditor.getSchemaTpl('collapseGroup', [
+                        {
+                            title: '基本',
+                            body: [
+                                {
+                                    type: 'select',
+                                    name: 'progressClassName',
+                                    label: '尺寸',
+                                    value: '',
+                                    options: [
+                                        {
+                                            label: '极小',
+                                            value: 'w-xs'
+                                        },
+                                        {
+                                            label: '小',
+                                            value: 'w-sm'
+                                        },
+                                        {
+                                            label: '中',
+                                            value: 'w-md'
+                                        },
+                                        {
+                                            label: '大',
+                                            value: 'w-lg'
+                                        },
+                                        {
+                                            label: '默认',
+                                            value: ''
+                                        }
+                                    ]
+                                },
+                                {
+                                    type: 'input-number',
+                                    name: 'strokeWidth',
+                                    label: '线条宽度',
+                                    value: 6,
+                                    min: 0,
+                                    max: 100
+                                },
+                                {
+                                    type: 'input-number',
+                                    name: 'gapDegree',
+                                    visibleOn: 'data.mode === "dashboard"',
+                                    label: '缺口角度',
+                                    value: 75,
+                                    min: 0,
+                                    max: 295
+                                },
+                                {
+                                    label: '缺口位置',
+                                    name: 'gapPosition',
+                                    type: 'button-group-select',
+                                    visibleOn: 'data.mode === "dashboard"',
+                                    value: AMisCodeEditor.defaultValue('bottom'),
+                                    tiled: true,
+                                    options: [
+                                        {
+                                            label: '上',
+                                            value: 'top'
+                                        },
+                                        {
+                                            label: '下',
+                                            value: 'bottom'
+                                        },
+                                        {
+                                            label: '左',
+                                            value: 'left'
+                                        },
+                                        {
+                                            label: '右',
+                                            value: 'right'
+                                        }
+                                    ]
+                                },
+                                AMisCodeEditor.getSchemaTpl('switch', {
+                                    name: 'animate',
+                                    label: '显示动画',
+                                    visibleOn: 'data.mode === "line"'
+                                }),
+                                {
+                                    type: 'button-group-select',
+                                    name: 'style',
+                                    label: '样式',
+                                    visibleOn: 'data.mode === "line"',
+                                    options: [
+                                        {
+                                            label: '纯色',
+                                            value: 'purity'
+                                        },
+                                        {
+                                            label: '条纹',
+                                            value: 'stripe'
+                                        }
+                                    ],
+                                    pipeIn: function (value, form) {
+                                        var _a;
+                                        return ((_a = form.data) === null || _a === void 0 ? void 0 : _a.stripe) ? 'stripe' : 'purity';
+                                    },
+                                    onChange: function (value, oldValue, model, form) {
+                                        form.setValueByName('stripe', value === 'stripe');
+                                    }
+                                },
+                                {
+                                    name: 'map',
+                                    type: 'combo',
+                                    mode: 'normal',
+                                    multiple: true,
+                                    label: BaseControl.tipedLabel('颜色', '分配不同的值段，用不同的颜色提示用户'),
+                                    items: [
+                                        {
+                                            type: 'input-number',
+                                            name: 'value',
+                                            placeholder: 'value',
+                                            required: true,
+                                            columnClassName: 'w-xs',
+                                            unique: true,
+                                            min: 0,
+                                            step: 10,
+                                            precision: 0
+                                        },
+                                        {
+                                            placeholder: 'color',
+                                            type: 'input-color',
+                                            name: 'color',
+                                            required: true
+                                        }
+                                    ],
+                                    value: [
+                                        { color: '#dc3545', value: 20 },
+                                        { color: '#fad733', value: 60 },
+                                        { color: '#28a745', value: 100 }
+                                    ],
+                                    pipeIn: function (value) {
+                                        return Array.isArray(value) ? value : [];
+                                    }
+                                }
+                            ]
+                        },
+                        AMisCodeEditor.getSchemaTpl('style:classNames', {
+                            schema: [],
+                            isFormItem: isFormItem
+                        })
+                    ])
+                }
+            ]);
+        };
+        return _this;
+    }
+    return ProgressPlugin;
+}(AMisCodeEditor.BasePlugin));
+AMisCodeEditor.registerEditorPlugin(ProgressPlugin);
+
+exports.ProgressPlugin = ProgressPlugin;

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

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