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

package/lib/plugin/Form/InputTable.js

@@ -0,0 +1,400 @@
+/**
+ * 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 flatten = require('lodash/flatten');
+var AMisCodeEditor = require('amis-editor-core');
+var amisCore = require('amis-core');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var flatten__default = /*#__PURE__*/_interopDefaultLegacy(flatten);
+
+var TableControlPlugin = /** @class */ (function (_super) {
+    tslib.__extends(TableControlPlugin, _super);
+    function TableControlPlugin() {
+        var _this = _super !== null && _super.apply(this, arguments) || this;
+        // 关联渲染器名字
+        _this.rendererName = 'input-table';
+        _this.$schema = '/schemas/TableControlSchema.json';
+        // 组件名称
+        _this.name = '表格编辑框';
+        _this.isBaseComponent = true;
+        _this.icon = 'fa fa-table';
+        _this.description = "\u53EF\u4EE5\u7528\u6765\u5C55\u73B0\u6570\u636E\u7684,\u53EF\u4EE5\u7528\u6765\u5C55\u793A\u6570\u7EC4\u7C7B\u578B\u7684\u6570\u636E\uFF0C\u6BD4\u5982 <code>multiple</code> \u7684\u5B50 <code>form</code>";
+        _this.docLink = '/amis/zh-CN/components/form/input-table';
+        _this.tags = ['表单项'];
+        _this.scaffold = {
+            type: 'input-table',
+            name: 'table',
+            label: '表格表单',
+            columns: [
+                {
+                    label: 'color',
+                    name: 'color',
+                    quickEdit: {
+                        type: 'input-color'
+                    }
+                },
+                {
+                    label: '说明文字',
+                    name: 'name',
+                    quickEdit: {
+                        type: 'input-text',
+                        mode: 'inline'
+                    }
+                }
+            ],
+            strictMode: true
+        };
+        _this.regions = [
+            {
+                key: 'columns',
+                label: '列集合',
+                renderMethod: 'renderTableContent',
+                preferTag: '展示',
+                dndMode: 'position-h'
+            }
+        ];
+        _this.previewSchema = {
+            type: 'form',
+            className: 'text-left',
+            wrapWithPanel: false,
+            mode: 'horizontal',
+            body: tslib.__assign(tslib.__assign({}, _this.scaffold), { value: [{ color: 'green', name: '绿色' }] })
+        };
+        _this.scaffoldForm = {
+            title: '快速构建表格',
+            body: [
+                {
+                    name: 'columns',
+                    type: 'combo',
+                    multiple: true,
+                    label: false,
+                    addButtonText: '新增一列',
+                    draggable: true,
+                    items: [
+                        {
+                            type: 'input-text',
+                            name: 'label',
+                            placeholder: '标题'
+                        },
+                        {
+                            type: 'input-text',
+                            name: 'name',
+                            placeholder: '绑定字段名'
+                        },
+                        {
+                            type: 'select',
+                            name: 'type',
+                            placeholder: '类型',
+                            value: 'text',
+                            options: [
+                                {
+                                    value: 'text',
+                                    label: '纯文本'
+                                },
+                                {
+                                    value: 'tpl',
+                                    label: '模板'
+                                },
+                                {
+                                    value: 'image',
+                                    label: '图片'
+                                },
+                                {
+                                    value: 'date',
+                                    label: '日期'
+                                },
+                                // {
+                                //     value: 'datetime',
+                                //     label: '日期时间'
+                                // },
+                                // {
+                                //     value: 'time',
+                                //     label: '时间'
+                                // },
+                                {
+                                    value: 'progress',
+                                    label: '进度'
+                                },
+                                {
+                                    value: 'status',
+                                    label: '状态'
+                                },
+                                {
+                                    value: 'mapping',
+                                    label: '映射'
+                                },
+                                {
+                                    value: 'operation',
+                                    label: '操作栏'
+                                }
+                            ]
+                        }
+                    ]
+                }
+            ],
+            canRebuild: true
+        };
+        _this.panelTitle = '表格编辑';
+        _this.panelBodyCreator = function (context) {
+            context.schema.type === 'crud';
+            return AMisCodeEditor.getSchemaTpl('tabs', [
+                {
+                    title: '常规',
+                    body: flatten__default["default"]([
+                        // {
+                        //   children: (
+                        //     <div className="m-b">
+                        //       <Button
+                        //         level="success"
+                        //         size="sm"
+                        //         block
+                        //         onClick={() => this.handleEditFormItem()}
+                        //       >
+                        //         配置列信息
+                        //       </Button>
+                        //     </div>
+                        //   )
+                        // },
+                        AMisCodeEditor.getSchemaTpl('formItemName', {
+                            required: true
+                        }),
+                        AMisCodeEditor.getSchemaTpl('label'),
+                        AMisCodeEditor.getSchemaTpl('description'),
+                        AMisCodeEditor.getSchemaTpl('switch', {
+                            label: '是否可新增',
+                            name: 'addable'
+                        }),
+                        {
+                            type: 'input-text',
+                            name: 'addBtnLabel',
+                            label: '增加按钮名称',
+                            visibleOn: 'data.addable',
+                            pipeIn: AMisCodeEditor.defaultValue('')
+                        },
+                        {
+                            name: 'addBtnIcon',
+                            label: '增加按钮图标',
+                            type: 'icon-picker',
+                            className: 'fix-icon-picker-overflow',
+                            visibleOn: 'data.addable'
+                        },
+                        AMisCodeEditor.getSchemaTpl('api', {
+                            name: 'addApi',
+                            label: '新增时提交的 API',
+                            visibleOn: 'data.addable'
+                        }),
+                        AMisCodeEditor.getSchemaTpl('switch', {
+                            label: '是否可删除',
+                            name: 'removable'
+                        }),
+                        {
+                            type: 'input-text',
+                            name: 'deleteBtnLabel',
+                            label: '删除按钮名称',
+                            visibleOn: 'data.removable',
+                            pipeIn: AMisCodeEditor.defaultValue('')
+                        },
+                        {
+                            name: 'deleteBtnIcon',
+                            label: '删除按钮图标',
+                            type: 'icon-picker',
+                            className: 'fix-icon-picker-overflow',
+                            visibleOn: 'data.removable'
+                        },
+                        AMisCodeEditor.getSchemaTpl('api', {
+                            name: 'deleteApi',
+                            label: '删除时提交的 API',
+                            visibleOn: 'data.removable'
+                        }),
+                        AMisCodeEditor.getSchemaTpl('switch', {
+                            label: '是否可编辑',
+                            name: 'editable'
+                        }),
+                        {
+                            type: 'input-text',
+                            name: 'editBtnLabel',
+                            label: '编辑按钮名称',
+                            visibleOn: 'data.editable',
+                            pipeIn: AMisCodeEditor.defaultValue('')
+                        },
+                        {
+                            name: 'editBtnIcon',
+                            label: '编辑按钮图标',
+                            type: 'icon-picker',
+                            className: 'fix-icon-picker-overflow',
+                            visibleOn: 'data.editable'
+                        },
+                        AMisCodeEditor.getSchemaTpl('switch', {
+                            label: '是否可复制',
+                            name: 'copyable'
+                        }),
+                        {
+                            type: 'input-text',
+                            name: 'copyBtnLabel',
+                            label: '复制按钮名称',
+                            visibleOn: 'data.copyable',
+                            pipeIn: AMisCodeEditor.defaultValue('')
+                        },
+                        {
+                            name: 'copyBtnIcon',
+                            label: '复制按钮图标',
+                            type: 'icon-picker',
+                            className: 'fix-icon-picker-overflow',
+                            visibleOn: 'data.copyable'
+                        },
+                        AMisCodeEditor.getSchemaTpl('api', {
+                            name: 'updateApi',
+                            label: '修改时提交的 API',
+                            visibleOn: 'data.editable'
+                        }),
+                        {
+                            type: 'input-text',
+                            name: 'confirmBtnLabel',
+                            label: '确认编辑按钮名称',
+                            visibleOn: 'data.editable',
+                            pipeIn: AMisCodeEditor.defaultValue('')
+                        },
+                        {
+                            name: 'confirmBtnIcon',
+                            label: '确认编辑按钮图标',
+                            type: 'icon-picker',
+                            className: 'fix-icon-picker-overflow',
+                            visibleOn: 'data.editable'
+                        },
+                        {
+                            type: 'input-text',
+                            name: 'cancelBtnLabel',
+                            label: '取消编辑按钮名称',
+                            visibleOn: 'data.editable',
+                            pipeIn: AMisCodeEditor.defaultValue('')
+                        },
+                        {
+                            name: 'cancelBtnIcon',
+                            label: '取消编辑按钮图标',
+                            type: 'icon-picker',
+                            className: 'fix-icon-picker-overflow',
+                            visibleOn: 'data.editable'
+                        },
+                        AMisCodeEditor.getSchemaTpl('switch', {
+                            label: '是否可拖拽排序',
+                            name: 'draggable'
+                        }),
+                        AMisCodeEditor.getSchemaTpl('switch', {
+                            label: '确认模式',
+                            name: 'needConfirm'
+                        }),
+                        AMisCodeEditor.getSchemaTpl('switch', {
+                            label: '严格模式',
+                            name: 'strictMode',
+                            value: true
+                        }),
+                        AMisCodeEditor.getSchemaTpl('switch', {
+                            label: '获取父级数据',
+                            labelRemark: {
+                                trigger: 'click',
+                                className: 'm-l-xs',
+                                rootClose: true,
+                                content: '配置"canAccessSuperData": true 同时配置 "strictMode": false 开启此特性，初始会自动映射父级数据域的同名变量。需要注意的是，这里只会初始会映射，一旦修改过就是当前行数据为主了。也就是说，表单项类型的，只会起到初始值的作用',
+                                placement: 'left'
+                            },
+                            onChange: function (value, oldValue, model, form) {
+                                if (value && !oldValue) {
+                                    form.setValues({ strictMode: false });
+                                }
+                                else {
+                                    form.setValues({ strictMode: true });
+                                }
+                            },
+                            name: 'canAccessSuperData' // 同时需要配置strictMode
+                        })
+                    ])
+                },
+                {
+                    title: '外观',
+                    body: [
+                        AMisCodeEditor.getSchemaTpl('formItemMode'),
+                        AMisCodeEditor.getSchemaTpl('horizontalMode'),
+                        AMisCodeEditor.getSchemaTpl('horizontal', {
+                            label: '',
+                            visibleOn: '(data.$$formMode == "horizontal" || data.mode == "horizontal") && data.label !== false && data.horizontal'
+                        }),
+                        AMisCodeEditor.getSchemaTpl('className'),
+                        AMisCodeEditor.getSchemaTpl('className', {
+                            label: 'Label CSS 类名',
+                            name: 'labelClassName'
+                        }),
+                        AMisCodeEditor.getSchemaTpl('className', {
+                            label: 'Input CSS 类名',
+                            name: 'inputClassName'
+                        }),
+                        AMisCodeEditor.getSchemaTpl('className', {
+                            label: '描述 CSS 类名',
+                            name: 'descriptionClassName',
+                            visibleOn: 'data.description'
+                        })
+                    ]
+                },
+                {
+                    title: '显隐',
+                    body: [AMisCodeEditor.getSchemaTpl('disabled'), AMisCodeEditor.getSchemaTpl('visible')]
+                },
+                {
+                    title: '其他',
+                    body: [
+                        AMisCodeEditor.getSchemaTpl('required'),
+                        AMisCodeEditor.getSchemaTpl('validateOnChange'),
+                        AMisCodeEditor.getSchemaTpl('submitOnChange')
+                    ]
+                }
+            ]);
+        };
+        return _this;
+    }
+    TableControlPlugin.prototype.filterProps = function (props) {
+        var arr = Array.isArray(props.value)
+            ? props.value
+            : typeof props.source === 'string'
+                ? amis.resolveVariable(props.source, props.data)
+                : amis.resolveVariable('items', props.data);
+        if (!Array.isArray(arr) || !arr.length) {
+            var mockedData_1 = {};
+            if (Array.isArray(props.columns)) {
+                props.columns.forEach(function (column) {
+                    if (column.name) {
+                        amisCore.setVariable(mockedData_1, column.name, AMisCodeEditor.mockValue(column));
+                    }
+                });
+            }
+            props.value = AMisCodeEditor.repeatArray(mockedData_1, 1).map(function (item, index) { return (tslib.__assign(tslib.__assign({}, item), { id: index + 1 })); });
+        }
+        else {
+            // 只取10条预览，否则太多卡顿
+            props.value = arr.slice(0, 10);
+        }
+        return props;
+    };
+    // 自动插入 label
+    TableControlPlugin.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 === 'columns') {
+            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 TableControlPlugin;
+}(AMisCodeEditor.BasePlugin));
+AMisCodeEditor.registerEditorPlugin(TableControlPlugin);
+
+exports.TableControlPlugin = TableControlPlugin;

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

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

package/lib/plugin/Form/InputTag.js

@@ -0,0 +1,155 @@
+/**
+ * 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 TagControlPlugin = /** @class */ (function (_super) {
+    tslib.__extends(TagControlPlugin, _super);
+    function TagControlPlugin() {
+        var _this = _super !== null && _super.apply(this, arguments) || this;
+        // 关联渲染器名字
+        _this.rendererName = 'input-tag';
+        _this.$schema = '/schemas/TagControlSchema.json';
+        _this.order = -420;
+        // 组件名称
+        _this.name = '标签';
+        _this.isBaseComponent = true;
+        _this.icon = 'fa fa-tag';
+        _this.description = "\u914D\u7F6E<code>options</code>\u53EF\u4EE5\u5B9E\u73B0\u9009\u62E9\u9009\u9879";
+        _this.docLink = '/amis/zh-CN/components/form/input-tag';
+        _this.tags = ['表单项'];
+        _this.scaffold = {
+            type: 'input-tag',
+            label: '标签',
+            name: 'tag',
+            options: ['红色', '绿色', '蓝色']
+        };
+        _this.previewSchema = {
+            type: 'form',
+            className: 'text-left',
+            mode: 'horizontal',
+            wrapWithPanel: false,
+            body: tslib.__assign(tslib.__assign({}, _this.scaffold), { value: '红色' })
+        };
+        _this.notRenderFormZone = true;
+        _this.panelTitle = '标签';
+        // 事件定义
+        _this.events = [
+            {
+                eventName: 'change',
+                eventLabel: '值变化',
+                description: '选中值变化',
+                dataSchema: [
+                    {
+                        type: 'object',
+                        properties: {
+                            'event.data.value': {
+                                type: 'string',
+                                title: '选中值'
+                            }
+                        }
+                    }
+                ]
+            },
+            {
+                eventName: 'focus',
+                eventLabel: '获取焦点',
+                description: '获取焦点',
+                dataSchema: [
+                    {
+                        type: 'object',
+                        properties: {
+                            'event.data.value': {
+                                type: 'string',
+                                title: '选中值'
+                            }
+                        }
+                    }
+                ]
+            },
+            {
+                eventName: 'blur',
+                eventLabel: '失去焦点',
+                description: '失去焦点',
+                dataSchema: [
+                    {
+                        type: 'object',
+                        properties: {
+                            'event.data.value': {
+                                type: 'string',
+                                title: '选中值'
+                            }
+                        }
+                    }
+                ]
+            }
+        ];
+        // 动作定义
+        _this.actions = [
+            {
+                actionType: 'clear',
+                actionLabel: '清空',
+                description: '清除选中值'
+            },
+            {
+                actionType: 'reset',
+                actionLabel: '重置',
+                description: '重置为默认值'
+            },
+            {
+                actionType: 'setValue',
+                actionLabel: '赋值',
+                description: '触发组件数据更新'
+            }
+        ];
+        _this.panelBodyCreator = function (context) {
+            return BaseControl.formItemControl({
+                common: {
+                    replace: true,
+                    body: [
+                        AMisCodeEditor.getSchemaTpl('formItemName', {
+                            required: true
+                        }),
+                        AMisCodeEditor.getSchemaTpl('label'),
+                        AMisCodeEditor.getSchemaTpl('clearable'),
+                        {
+                            type: 'input-text',
+                            name: 'optionsTip',
+                            label: '选项提示',
+                            value: '最近您使用的标签'
+                        },
+                        AMisCodeEditor.getSchemaTpl('valueFormula', {
+                            rendererSchema: context === null || context === void 0 ? void 0 : context.schema,
+                            mode: 'vertical' // 改成上下展示模式
+                        }),
+                        AMisCodeEditor.getSchemaTpl('joinValues'),
+                        AMisCodeEditor.getSchemaTpl('delimiter'),
+                        AMisCodeEditor.getSchemaTpl('extractValue')
+                    ]
+                },
+                option: {
+                    body: [
+                        AMisCodeEditor.getSchemaTpl('optionControlV2', {
+                            description: '设置选项后，输入时会下拉这些选项供用户参考。'
+                        }),
+                        AMisCodeEditor.getSchemaTpl('autoFill')
+                    ]
+                },
+                status: {}
+            }, context);
+        };
+        return _this;
+    }
+    return TagControlPlugin;
+}(AMisCodeEditor.BasePlugin));
+AMisCodeEditor.registerEditorPlugin(TagControlPlugin);
+
+exports.TagControlPlugin = TagControlPlugin;

package/lib/plugin/Form/InputText.d.ts

@@ -0,0 +1,42 @@
+import { BasePlugin, BaseEventContext } from 'amis-editor-core';
+export declare class TextControlPlugin extends BasePlugin {
+    rendererName: string;
+    $schema: string;
+    order: number;
+    searchKeywords: string;
+    name: string;
+    isBaseComponent: boolean;
+    icon: string;
+    description: string;
+    docLink: string;
+    tags: string[];
+    scaffold: {
+        type: string;
+        label: string;
+        name: string;
+    };
+    previewSchema: any;
+    notRenderFormZone: boolean;
+    panelTitle: string;
+    events: {
+        eventName: string;
+        eventLabel: string;
+        description: string;
+        dataSchema: {
+            type: string;
+            properties: {
+                'event.data.value': {
+                    type: string;
+                    title: string;
+                };
+            };
+        }[];
+    }[];
+    actions: {
+        actionType: string;
+        actionLabel: string;
+        description: string;
+    }[];
+    panelJustify: boolean;
+    panelBodyCreator: (context: BaseEventContext) => any;
+}