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

package/lib/plugin/Form/Picker.js

@@ -0,0 +1,169 @@
+/**
+ * amis-editor v5.2.0-beta.1
+ * Copyright 2018-2022 @fex
+ */
+
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var tslib = require('tslib');
+var React = require('react');
+var amis = require('amis');
+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 PickerControlPlugin = /** @class */ (function (_super) {
+    tslib.__extends(PickerControlPlugin, _super);
+    function PickerControlPlugin() {
+        var _this = _super !== null && _super.apply(this, arguments) || this;
+        // 关联渲染器名字
+        _this.rendererName = 'picker';
+        _this.$schema = '/schemas/PickerControlSchema.json';
+        // 组件名称
+        _this.name = '列表选取';
+        _this.isBaseComponent = true;
+        _this.icon = 'fa fa-window-restore';
+        _this.description = "\u901A\u8FC7<code>pickerSchema</code>\u914D\u7F6E\u53EF\u4F9B\u9009\u53D6\u7684\u6570\u636E\u6E90\u8FDB\u884C\u9009\u62E9\u9700\u8981\u7684\u6570\u636E\uFF0C\u652F\u6301\u591A\u9009";
+        _this.docLink = '/amis/zh-CN/components/form/picker';
+        _this.tags = ['表单项'];
+        _this.scaffold = {
+            type: 'picker',
+            label: '列表选取',
+            name: 'picker',
+            options: [
+                {
+                    label: '选项A',
+                    value: 'A'
+                },
+                {
+                    label: '选项B',
+                    value: 'B'
+                }
+            ]
+        };
+        _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('switch', {
+                    name: 'embed',
+                    label: '开启内嵌模式'
+                }),
+                AMisCodeEditor.getSchemaTpl('switchDefaultValue'),
+                {
+                    type: 'input-text',
+                    name: 'value',
+                    label: '默认值',
+                    visibleOn: 'typeof this.value !== "undefined"'
+                },
+                AMisCodeEditor.getSchemaTpl('fieldSet', {
+                    title: '选项',
+                    body: [
+                        AMisCodeEditor.getSchemaTpl('options'),
+                        AMisCodeEditor.getSchemaTpl('api', {
+                            name: 'source',
+                            label: '获取选项接口'
+                        }),
+                        {
+                            children: (React__default["default"].createElement(amis.Button, { size: "sm", level: "danger", className: "m-b", onClick: _this.editDetail.bind(_this, context.id), block: true }, "\u914D\u7F6E\u9009\u6846\u8BE6\u60C5"))
+                        },
+                        {
+                            label: 'labelTpl',
+                            type: 'textarea',
+                            name: 'labelTpl',
+                            labelRemark: '已选定数据的展示样式',
+                            description: '支持使用 <code>\\${xxx}</code> 来获取变量，或者用 lodash.template 语法来写模板逻辑。<a target="_blank" href="/amis/zh-CN/docs/concepts/template">详情</a>'
+                        },
+                        {
+                            type: 'button-group-select',
+                            name: 'modalMode',
+                            label: '选框类型',
+                            value: 'dialog',
+                            size: 'xs',
+                            options: [
+                                {
+                                    label: '弹框',
+                                    value: 'dialog'
+                                },
+                                {
+                                    label: '抽出式弹框',
+                                    value: 'drawer'
+                                }
+                            ]
+                        },
+                        AMisCodeEditor.getSchemaTpl('multiple'),
+                        AMisCodeEditor.getSchemaTpl('joinValues'),
+                        AMisCodeEditor.getSchemaTpl('delimiter'),
+                        AMisCodeEditor.getSchemaTpl('extractValue'),
+                        AMisCodeEditor.getSchemaTpl('autoFill')
+                    ]
+                })
+            ];
+        };
+        return _this;
+    }
+    PickerControlPlugin.prototype.buildEditorToolbar = function (_a, toolbars) {
+        var id = _a.id, info = _a.info;
+        if (info.renderer.name === this.rendererName) {
+            toolbars.push({
+                icon: 'fa fa-expand',
+                order: 100,
+                tooltip: '配置选框详情',
+                onClick: this.editDetail.bind(this, id)
+            });
+        }
+    };
+    PickerControlPlugin.prototype.buildEditorContextMenu = function (_a, menus) {
+        var id = _a.id; _a.schema; _a.region; var info = _a.info;
+        if (info.renderer.name === this.rendererName) {
+            menus.push('|', {
+                label: '配置选框详情',
+                onSelect: this.editDetail.bind(this, id)
+            });
+        }
+    };
+    PickerControlPlugin.prototype.editDetail = function (id) {
+        var manager = this.manager;
+        var store = manager.store;
+        var node = store.getNodeById(id);
+        var value = store.getValueOf(id);
+        if (!node || !value) {
+            return;
+        }
+        var component = node.getComponent();
+        var schema = tslib.__assign(tslib.__assign({ type: 'crud', mode: 'list' }, (value.pickerSchema || {
+            listItem: {
+                title: '${label}'
+            }
+        })), { api: value.source, pickerMode: true, multiple: value.multiple });
+        this.manager.openSubEditor({
+            title: '配置选框详情',
+            value: schema,
+            data: { options: component.props.options },
+            onChange: function (newValue) {
+                newValue = tslib.__assign(tslib.__assign({}, value), { pickerSchema: tslib.__assign({}, newValue), source: newValue.api });
+                delete newValue.pickerSchema.api;
+                delete newValue.pickerSchema.type;
+                delete newValue.pickerSchema.pickerMode;
+                delete newValue.pickerSchema.multiple;
+                manager.panelChangeValue(newValue, AMisCodeEditor.diff(value, newValue));
+            }
+        });
+    };
+    return PickerControlPlugin;
+}(AMisCodeEditor.BasePlugin));
+AMisCodeEditor.registerEditorPlugin(PickerControlPlugin);
+
+exports.PickerControlPlugin = PickerControlPlugin;

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

package/lib/plugin/Form/Radios.js

@@ -0,0 +1,189 @@
+/**
+ * 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 validator = require('../../validator.js');
+var util = require('../../util.js');
+
+var RadiosControlPlugin = /** @class */ (function (_super) {
+    tslib.__extends(RadiosControlPlugin, _super);
+    function RadiosControlPlugin() {
+        var _this = _super !== null && _super.apply(this, arguments) || this;
+        // 关联渲染器名字
+        _this.rendererName = 'radios';
+        _this.$schema = '/schemas/RadiosControlSchema.json';
+        _this.order = -460;
+        // 组件名称
+        _this.name = '单选框';
+        _this.isBaseComponent = true;
+        _this.icon = 'fa fa-dot-circle-o';
+        _this.description = "\u901A\u8FC7<code>options</code>\u914D\u7F6E\u9009\u9879\uFF0C\u53EF\u901A\u8FC7<code>source</code>\u62C9\u53D6\u9009\u9879";
+        _this.docLink = '/amis/zh-CN/components/form/radios';
+        _this.tags = ['表单项'];
+        _this.scaffold = {
+            type: 'radios',
+            label: '单选框',
+            name: 'radios',
+            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.panelJustify = true;
+        _this.panelBodyCreator = function (context) {
+            return AMisCodeEditor.getSchemaTpl('tabs', [
+                {
+                    title: '属性',
+                    body: AMisCodeEditor.getSchemaTpl('collapseGroup', [
+                        {
+                            title: '基本',
+                            body: [
+                                AMisCodeEditor.getSchemaTpl('formItemName', {
+                                    required: true
+                                }),
+                                AMisCodeEditor.getSchemaTpl('label'),
+                                AMisCodeEditor.getSchemaTpl('valueFormula', {
+                                    rendererSchema: context === null || context === void 0 ? void 0 : context.schema,
+                                    useSelectMode: true,
+                                    visibleOn: 'this.options && this.options.length > 0 && this.selectFirst !== true'
+                                }),
+                                // getSchemaTpl('autoFill')
+                                AMisCodeEditor.getSchemaTpl('labelRemark'),
+                                AMisCodeEditor.getSchemaTpl('remark')
+                            ]
+                        },
+                        {
+                            title: '选项',
+                            body: [
+                                AMisCodeEditor.getSchemaTpl('optionControlV2'),
+                                AMisCodeEditor.getSchemaTpl('switch', {
+                                    label: '默认选择第一个',
+                                    name: 'selectFirst',
+                                    horizontal: { justify: true, left: 5 },
+                                    visibleOn: '!this.options'
+                                })
+                            ]
+                        },
+                        AMisCodeEditor.getSchemaTpl('status', { isFormItem: true }),
+                        AMisCodeEditor.getSchemaTpl('validation', {
+                            tag: validator.ValidatorTag.All
+                        })
+                    ])
+                },
+                {
+                    title: '外观',
+                    body: [
+                        AMisCodeEditor.getSchemaTpl('collapseGroup', [
+                            AMisCodeEditor.getSchemaTpl('style:formItem', {
+                                renderer: context.info.renderer,
+                                schema: [
+                                    AMisCodeEditor.getSchemaTpl('switch', {
+                                        label: '一行选项显示',
+                                        name: 'inline',
+                                        hiddenOn: 'data.mode === "inline"',
+                                        pipeIn: AMisCodeEditor.defaultValue(true)
+                                    }),
+                                    {
+                                        label: '每行选项个数',
+                                        name: 'columnsCount',
+                                        hiddenOn: 'data.mode === "inline" || data.inline !== false',
+                                        type: 'input-range',
+                                        min: 1,
+                                        max: 6,
+                                        pipeIn: AMisCodeEditor.defaultValue(1)
+                                    }
+                                ]
+                            }),
+                            AMisCodeEditor.getSchemaTpl('style:classNames', {
+                                schema: [
+                                    AMisCodeEditor.getSchemaTpl('className', {
+                                        label: '单个选项',
+                                        name: 'itemClassName'
+                                    })
+                                ]
+                            })
+                        ])
+                    ]
+                },
+                {
+                    title: '事件',
+                    className: 'p-none',
+                    body: [
+                        AMisCodeEditor.getSchemaTpl('eventControl', tslib.__assign({ name: 'onEvent' }, util.getEventControlConfig(_this.manager, context)))
+                    ]
+                }
+            ]);
+        };
+        return _this;
+    }
+    return RadiosControlPlugin;
+}(AMisCodeEditor.BasePlugin));
+AMisCodeEditor.registerEditorPlugin(RadiosControlPlugin);
+
+exports.RadiosControlPlugin = RadiosControlPlugin;

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