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

package/lib/plugin/Form/Item.js

@@ -0,0 +1,265 @@
+/**
+ * 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 find = require('lodash/find');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var find__default = /*#__PURE__*/_interopDefaultLegacy(find);
+
+var ItemPlugin = /** @class */ (function (_super) {
+    tslib.__extends(ItemPlugin, _super);
+    function ItemPlugin() {
+        var _this = _super !== null && _super.apply(this, arguments) || this;
+        // panelTitle = '表单项通配';
+        _this.panelTitle = '表单项';
+        _this.order = -990;
+        _this.panelBodyCreator = function (context) {
+            var ignoreName = ~['button', 'submit', 'reset'].indexOf(context.schema.type);
+            var notRequiredName = ~[
+                'button-toobar',
+                'container',
+                'fieldSet',
+                'group',
+                'grid',
+                'hbox',
+                'input-group',
+                'panel',
+                'service',
+                'tabs',
+                'table',
+                'elevator',
+                'static'
+            ].indexOf(context.schema.type);
+            var hasReadOnly = ~[
+                'switch',
+                'wizard',
+                'diff-editor',
+                'editor',
+                'input-rating',
+                'input-text',
+                'textarea'
+            ].indexOf(context.schema.type);
+            /** 不支持配置校验属性的组件 */
+            var ignoreValidator = !!~['input-group'].indexOf(context.schema.type);
+            var autoFillApi = context.schema.autoFillApi;
+            var renderer = context.info.renderer;
+            return [
+                AMisCodeEditor.getSchemaTpl('tabs', [
+                    {
+                        title: '常规',
+                        body: [
+                            ignoreName
+                                ? null
+                                : AMisCodeEditor.getSchemaTpl('formItemName', {
+                                    required: notRequiredName ? false : true
+                                }),
+                            renderer.renderLabel !== false ? AMisCodeEditor.getSchemaTpl('label') : null,
+                            hasReadOnly
+                                ? AMisCodeEditor.getSchemaTpl('switch', {
+                                    name: 'readOnly',
+                                    label: '只读模式'
+                                })
+                                : null,
+                            AMisCodeEditor.getSchemaTpl('switch', {
+                                name: 'disabled',
+                                label: '禁用',
+                                mode: 'inline',
+                                className: 'w-full'
+                            }),
+                            ignoreValidator ? null : AMisCodeEditor.getSchemaTpl('required'),
+                            AMisCodeEditor.getSchemaTpl('description'),
+                            AMisCodeEditor.getSchemaTpl('placeholder'),
+                            AMisCodeEditor.getSchemaTpl('remark'),
+                            renderer.renderLabel !== false ? AMisCodeEditor.getSchemaTpl('labelRemark') : null,
+                            autoFillApi ? AMisCodeEditor.getSchemaTpl('autoFillApi') : null
+                        ]
+                    },
+                    {
+                        title: '外观',
+                        body: [
+                            AMisCodeEditor.getSchemaTpl('formItemMode'),
+                            AMisCodeEditor.getSchemaTpl('horizontalMode'),
+                            AMisCodeEditor.getSchemaTpl('horizontal', {
+                                label: '',
+                                visibleOn: 'data.mode == "horizontal" && data.label !== false && data.horizontal'
+                            }),
+                            renderer.sizeMutable !== false
+                                ? AMisCodeEditor.getSchemaTpl('formItemSize')
+                                : null,
+                            AMisCodeEditor.getSchemaTpl('formItemInline'),
+                            AMisCodeEditor.getSchemaTpl('className'),
+                            AMisCodeEditor.getSchemaTpl('className', {
+                                label: 'Label CSS 类名',
+                                name: 'labelClassName'
+                            }),
+                            AMisCodeEditor.getSchemaTpl('className', {
+                                label: '控件 CSS 类名',
+                                name: 'inputClassName'
+                            }),
+                            AMisCodeEditor.getSchemaTpl('className', {
+                                label: '描述 CSS 类名',
+                                name: 'descriptionClassName',
+                                visibleOn: 'this.description'
+                            })
+                        ]
+                    },
+                    {
+                        title: '显隐',
+                        body: [
+                            // TODO: 有些表单项没有 disabled
+                            AMisCodeEditor.getSchemaTpl('disabled'),
+                            AMisCodeEditor.getSchemaTpl('visible'),
+                            AMisCodeEditor.getSchemaTpl('switch', {
+                                name: 'clearValueOnHidden',
+                                label: '隐藏时删除表单项值',
+                                disabledOn: 'typeof this.visible === "boolean"'
+                            })
+                        ]
+                    },
+                    ignoreValidator
+                        ? null
+                        : {
+                            title: '验证',
+                            body: [
+                                // getSchemaTplByName('ref'),
+                                AMisCodeEditor.getSchemaTpl('validations'),
+                                AMisCodeEditor.getSchemaTpl('validationErrors'),
+                                AMisCodeEditor.getSchemaTpl('validateOnChange'),
+                                AMisCodeEditor.getSchemaTpl('submitOnChange'),
+                                AMisCodeEditor.getSchemaTpl('api', {
+                                    name: 'validateApi',
+                                    label: '校验接口',
+                                    description: '单独校验这个表单项的接口'
+                                })
+                            ]
+                        }
+                ])
+            ];
+        };
+        return _this;
+        // beforeInsert(event: PluginEvent<InsertEventContext>) {
+        //   const context = event.context;
+        //   if (
+        //     context.region === 'controls' &&
+        //     Array.isArray(context.subRenderer?.tags) &&
+        //     !~context.subRenderer!.tags!.indexOf('表单项') &&
+        //     ~context.subRenderer!.tags!.indexOf('展示')
+        //   ) {
+        //     context.data = {
+        //       ...context.data,
+        //       type: `static-${context.data.type}`,
+        //       label: context.data.label || context.subRenderer!.name,
+        //       name: context.data.name || 'var1'
+        //     };
+        //   }
+        // }
+    }
+    ItemPlugin.prototype.buildEditorPanel = function (context, panels) {
+        var renderer = context.info.renderer;
+        if (context.selections.length) {
+            return;
+        }
+        var plugin = context.info.plugin;
+        // 如果是表单项
+        if (!context.info.hostId &&
+            (renderer === null || renderer === void 0 ? void 0 : renderer.isFormItem) &&
+            !(plugin === null || plugin === void 0 ? void 0 : plugin.notRenderFormZone)) {
+            panels.push({
+                key: 'form-item',
+                icon: 'fa fa-desktop',
+                title: this.panelTitle,
+                render: this.manager.makeSchemaFormRender({
+                    body: this.panelBodyCreator(context),
+                    rendererName: plugin.rendererName,
+                    formKey: 'form-item',
+                }),
+                order: -200
+            });
+        }
+    };
+    ItemPlugin.prototype.afterUpdate = function (event) {
+        var _a, _b;
+        var context = event.context;
+        if (/\$/.test(context.info.renderer.name) &&
+            ((_a = context.diff) === null || _a === void 0 ? void 0 : _a.some(function (change) { var _a; return ((_a = change.path) === null || _a === void 0 ? void 0 : _a.join('.')) === 'value'; }))) {
+            var change = find__default["default"](context.diff, function (change) { var _a; return ((_a = change.path) === null || _a === void 0 ? void 0 : _a.join('.')) === 'value'; });
+            var component = (_b = this.manager.store
+                .getNodeById(context.id)) === null || _b === void 0 ? void 0 : _b.getComponent();
+            component === null || component === void 0 ? void 0 : component.props.onChange(change === null || change === void 0 ? void 0 : change.rhs);
+        }
+    };
+    ItemPlugin.prototype.beforeReplace = function (event) {
+        var context = event.context;
+        if (context.info.renderer.isFormItem &&
+            context.data &&
+            context.subRenderer &&
+            !~context.subRenderer.tags.indexOf('表单项') &&
+            ~context.subRenderer.tags.indexOf('展示')) {
+            context.data = tslib.__assign(tslib.__assign({}, context.data), { type: "static-".concat(context.data.type), label: context.data.label || context.schema.label, name: context.data.name || context.schema.name });
+        }
+        // 替换字段的时候保留 name
+        if (context.schema) {
+            context.data.name = context.schema.name || context.data.name;
+        }
+    };
+    ItemPlugin.prototype.buildEditorContextMenu = function (_a, menus) {
+        var _this = this;
+        _a.id; _a.schema; _a.region; var selections = _a.selections;
+        if (!selections.length || selections.length > 3) {
+            // 单选或者超过3个选中态时直接返回
+            return;
+        }
+        var arr = selections.concat();
+        var first = arr.shift();
+        var parent = first.node.parent;
+        // 不在一个父节点，或者当前有非表单项，则直接跳过
+        if (arr.some(function (elem) { var _a; return elem.node.parent !== parent || !((_a = elem.info.renderer) === null || _a === void 0 ? void 0 : _a.isFormItem); })) {
+            // 备注：isFormItem在amis注册渲染器时生成，所有表单类渲染器isFormItem为true
+            return;
+        }
+        menus.unshift({
+            label: '合成一行',
+            icon: 'merge-icon',
+            onSelect: function () {
+                var store = _this.manager.store;
+                var arr = selections.concat();
+                var first = arr.shift();
+                var schema = store.schema;
+                var group = [
+                    tslib.__assign({}, first.schema)
+                ];
+                // 让后面的 JSONPipeIn 去变一个 id
+                // 因为 update 的时候，group 不会变 id
+                // 不能两个 id 一样，这样点选就乱了。
+                delete group[0].$$id;
+                arr.forEach(function (elem) {
+                    group.push(elem.node.schema);
+                    schema = AMisCodeEditor.JSONDelete(schema, elem.id);
+                });
+                var curNewGroup = AMisCodeEditor.JSONPipeIn({
+                    type: 'group',
+                    body: group
+                });
+                schema = AMisCodeEditor.JSONUpdate(schema, first.id, curNewGroup, true);
+                store.traceableSetSchema(schema);
+                setTimeout(function () {
+                    // 合并成一行后自动选中父元素
+                    store.setActiveId(first.id);
+                }, 40);
+            }
+        }, '|');
+    };
+    return ItemPlugin;
+}(AMisCodeEditor.BasePlugin));
+AMisCodeEditor.registerEditorPlugin(ItemPlugin);
+
+exports.ItemPlugin = ItemPlugin;

package/{dist → lib}/plugin/Form/ListSelect.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 ListControlPlugin extends BasePlugin {
     rendererName: string;
     $schema: string;
@@ -19,6 +20,9 @@ export declare class ListControlPlugin extends BasePlugin {
         }[];
     };
     previewSchema: any;
+    notRenderFormZone: boolean;
     panelTitle: string;
-    panelBody: any[];
+    events: RendererEvent[];
+    actions: RendererAction[];
+    panelBodyCreator: (context: BaseEventContext) => any[];
 }

package/lib/plugin/Form/ListSelect.js

@@ -0,0 +1,130 @@
+/**
+ * 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 ListControlPlugin = /** @class */ (function (_super) {
+    tslib.__extends(ListControlPlugin, _super);
+    function ListControlPlugin() {
+        var _this = _super !== null && _super.apply(this, arguments) || this;
+        // 关联渲染器名字
+        _this.rendererName = 'list-select';
+        _this.$schema = '/schemas/ListControlSchema.json';
+        _this.order = -430;
+        // 组件名称
+        _this.name = '列表选择';
+        _this.isBaseComponent = true;
+        _this.icon = 'fa fa-ellipsis-h';
+        _this.description = "\u5355\u9009\u6216\u8005\u591A\u9009\uFF0C\u652F\u6301<code>source</code>\u62C9\u53D6\u9009\u9879\uFF0C\u9009\u9879\u53EF\u914D\u7F6E\u56FE\u7247\uFF0C\u4E5F\u53EF\u4EE5\u81EA\u5B9A\u4E49<code>HTML</code>\u914D\u7F6E";
+        _this.docLink = '/amis/zh-CN/components/form/list-select';
+        _this.tags = ['表单项'];
+        _this.scaffold = {
+            type: 'list-select',
+            label: '列表',
+            name: 'list',
+            options: [
+                {
+                    label: '选项A',
+                    value: 'A'
+                },
+                {
+                    label: '选项B',
+                    value: 'B'
+                }
+            ]
+        };
+        _this.previewSchema = {
+            type: 'form',
+            className: 'text-left',
+            mode: 'horizontal',
+            wrapWithPanel: false,
+            body: [
+                tslib.__assign(tslib.__assign({}, _this.scaffold), { value: 'A' })
+            ]
+        };
+        _this.notRenderFormZone = true;
+        _this.panelTitle = '列表选择';
+        // 事件定义
+        _this.events = [
+            {
+                eventName: 'change',
+                eventLabel: '值变化',
+                description: '选中值变化时触发',
+                dataSchema: [
+                    {
+                        type: 'object',
+                        properties: {
+                            'event.data.value': {
+                                type: 'string',
+                                title: '选中值'
+                            }
+                        }
+                    }
+                ]
+            }
+        ];
+        // 动作定义
+        _this.actions = [
+            {
+                actionType: 'clear',
+                actionLabel: '清空',
+                description: '清除选中值'
+            },
+            {
+                actionType: 'reset',
+                actionLabel: '重置',
+                description: '将值重置为resetValue，若没有配置resetValue，则清空'
+            },
+            {
+                actionType: 'reload',
+                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('multiple'),
+                        AMisCodeEditor.getSchemaTpl('valueFormula', {
+                            rendererSchema: context === null || context === void 0 ? void 0 : context.schema,
+                            useSelectMode: true,
+                            visibleOn: 'this.options && this.options.length > 0'
+                        })
+                    ]
+                },
+                option: {
+                    body: [
+                        AMisCodeEditor.getSchemaTpl('optionControlV2', {
+                            description: '设置选项后，输入时会下拉这些选项供用户参考。'
+                        })
+                    ]
+                },
+                status: {}
+            }, context);
+        };
+        return _this;
+    }
+    return ListControlPlugin;
+}(AMisCodeEditor.BasePlugin));
+AMisCodeEditor.registerEditorPlugin(ListControlPlugin);
+
+exports.ListControlPlugin = ListControlPlugin;

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

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

package/lib/plugin/Form/LocationPicker.js

@@ -0,0 +1,74 @@
+/**
+ * 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 LocationControlPlugin = /** @class */ (function (_super) {
+    tslib.__extends(LocationControlPlugin, _super);
+    function LocationControlPlugin() {
+        var _this = _super !== null && _super.apply(this, arguments) || this;
+        // 关联渲染器名字
+        _this.rendererName = 'location-picker';
+        _this.$schema = '/schemas/LocationControlSchema.json';
+        // 组件名称
+        _this.name = '地理位置选择';
+        _this.isBaseComponent = true;
+        _this.icon = 'fa fa-location-arrow';
+        _this.description = "\u5730\u7406\u4F4D\u7F6E\u9009\u62E9";
+        _this.docLink = '/amis/zh-CN/components/form/location-picker';
+        _this.tags = ['表单项'];
+        _this.scaffold = {
+            type: 'location-picker',
+            name: 'location',
+            label: '位置选择'
+        };
+        _this.previewSchema = {
+            type: 'form',
+            className: 'text-left',
+            mode: 'horizontal',
+            wrapWithPanel: false,
+            body: [
+                tslib.__assign({}, _this.scaffold)
+            ]
+        };
+        _this.panelTitle = '地理位置选择';
+        _this.panelBodyCreator = function (context) {
+            return [
+                AMisCodeEditor.getSchemaTpl('clearable'),
+                {
+                    type: 'input-text',
+                    name: 'ak',
+                    label: '百度地图的 AK',
+                    description: '请从<a href="http://lbsyun.baidu.com/" target="_blank">百度地图开放平台</a>获取'
+                },
+                {
+                    type: 'select',
+                    name: 'coordinatesType',
+                    label: '坐标格式',
+                    value: 'bd09',
+                    options: [
+                        { label: '百度坐标', value: 'bd09' },
+                        { label: '国测局坐标', value: 'gcj02' }
+                    ]
+                }
+                /* 备注: 暂时不开放
+                getSchemaTpl('valueFormula', {
+                  rendererSchema: context?.schema,
+                }),
+                */
+            ];
+        };
+        return _this;
+    }
+    return LocationControlPlugin;
+}(AMisCodeEditor.BasePlugin));
+AMisCodeEditor.registerEditorPlugin(LocationControlPlugin);
+
+exports.LocationControlPlugin = LocationControlPlugin;

package/{dist → lib}/plugin/Form/MatrixCheckboxes.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 MatrixControlPlugin extends BasePlugin {
     rendererName: string;
     $schema: string;
@@ -21,6 +22,10 @@ export declare class MatrixControlPlugin extends BasePlugin {
         }[];
     };
     previewSchema: any;
+    notRenderFormZone: boolean;
     panelTitle: string;
-    panelBody: any[];
+    panelJustify: boolean;
+    events: RendererEvent[];
+    actions: RendererAction[];
+    panelBodyCreator: (context: BaseEventContext) => any;
 }