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

package/lib/plugin/Flex.js

@@ -0,0 +1,203 @@
+/**
+ * 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 FlexPlugin = /** @class */ (function (_super) {
+    tslib.__extends(FlexPlugin, _super);
+    function FlexPlugin() {
+        var _this = _super !== null && _super.apply(this, arguments) || this;
+        // 关联渲染器名字
+        _this.rendererName = 'flex';
+        _this.$schema = '/schemas/FlexSchema.json';
+        _this.disabledRendererPlugin = true;
+        // 组件名称
+        _this.name = 'Flex 布局';
+        _this.isBaseComponent = true;
+        _this.icon = 'fa fa-columns';
+        _this.description = 'flex 布局';
+        _this.docLink = '/amis/zh-CN/components/flex';
+        _this.tags = ['容器'];
+        _this.scaffold = {
+            type: 'flex',
+            items: [
+                {
+                    type: 'wrapper',
+                    body: '第一列'
+                },
+                {
+                    type: 'wrapper',
+                    body: '第二列'
+                },
+                {
+                    type: 'wrapper',
+                    body: '第三列'
+                }
+            ]
+        };
+        _this.previewSchema = tslib.__assign({}, _this.scaffold);
+        _this.panelTitle = 'Flex';
+        _this.panelBody = [
+            AMisCodeEditor.getSchemaTpl('tabs', [
+                {
+                    title: '属性',
+                    className: 'p-none',
+                    body: [
+                        AMisCodeEditor.getSchemaTpl('collapseGroup', [
+                            {
+                                title: '布局',
+                                body: [
+                                    {
+                                        name: 'justify',
+                                        type: 'select',
+                                        value: 'center',
+                                        label: '子节点水平分布方式',
+                                        menuTpl: "<div class='flex justify-between'><span>${label}</span><span class='text-muted text-sm'>${value}</span></div>",
+                                        options: [
+                                            {
+                                                label: '起始端对齐',
+                                                value: 'flex-start'
+                                            },
+                                            {
+                                                label: '居中对齐',
+                                                value: 'center'
+                                            },
+                                            {
+                                                label: '末尾端对齐',
+                                                value: 'flex-end'
+                                            },
+                                            {
+                                                label: '均匀分布（首尾留空）',
+                                                value: 'space-around'
+                                            },
+                                            {
+                                                label: '均匀分布（首尾对齐）',
+                                                value: 'space-between'
+                                            },
+                                            {
+                                                label: '均匀分布（元素等间距）',
+                                                value: 'space-evenly'
+                                            },
+                                            {
+                                                label: '均匀分布（自动拉伸）',
+                                                value: 'stretch'
+                                            }
+                                        ]
+                                    },
+                                    {
+                                        name: 'alignItems',
+                                        type: 'select',
+                                        value: 'center',
+                                        label: '子节点垂直方向位置',
+                                        menuTpl: "<div class='flex justify-between'><span>${label}</span><span class='text-muted text-sm'>${value}</span></div>",
+                                        options: [
+                                            {
+                                                label: '起始端对齐',
+                                                value: 'flex-start'
+                                            },
+                                            {
+                                                label: '居中对齐',
+                                                value: 'center'
+                                            },
+                                            {
+                                                label: '末尾端对齐',
+                                                value: 'flex-end'
+                                            },
+                                            {
+                                                label: '基线对齐',
+                                                value: 'baseline'
+                                            },
+                                            {
+                                                label: '自动拉伸',
+                                                value: 'stretch'
+                                            }
+                                        ]
+                                    },
+                                    {
+                                        name: 'direction',
+                                        type: 'button-group-select',
+                                        size: 'sm',
+                                        label: '布局方向',
+                                        value: 'row',
+                                        mode: 'row',
+                                        options: [
+                                            { label: '水平', value: 'row' },
+                                            { label: '垂直', value: 'column' }
+                                        ]
+                                    }
+                                ]
+                            },
+                            {
+                                title: '子节点管理',
+                                body: [
+                                    {
+                                        name: 'items',
+                                        label: false,
+                                        type: 'combo',
+                                        scaffold: {
+                                            type: 'wrapper',
+                                            body: '子节点内容'
+                                        },
+                                        minLength: 2,
+                                        multiple: true,
+                                        // draggable: true,
+                                        draggableTip: '',
+                                        items: [
+                                            {
+                                                type: 'tpl',
+                                                tpl: '<span class="label label-default">子节点${index | plus}</span>'
+                                            }
+                                        ]
+                                    }
+                                ]
+                            }
+                        ])
+                    ]
+                },
+                {
+                    title: '外观',
+                    className: 'p-none',
+                    body: AMisCodeEditor.getSchemaTpl('collapseGroup', tslib.__spreadArray(tslib.__spreadArray([], AMisCodeEditor.getSchemaTpl('style:common', ['display']), true), [
+                        {
+                            title: 'CSS 类名',
+                            body: [AMisCodeEditor.getSchemaTpl('className', { label: '外层CSS类名' })]
+                        }
+                    ], false))
+                },
+                {
+                    title: '状态',
+                    body: [AMisCodeEditor.getSchemaTpl('visible'), AMisCodeEditor.getSchemaTpl('disabled')]
+                }
+            ])
+        ];
+        _this.regions = [
+            {
+                key: 'items',
+                label: '子节点集合',
+                // 复写渲染器里面的 render 方法
+                renderMethod: 'render',
+                dndMode: 'position-h'
+            }
+        ];
+        return _this;
+    }
+    FlexPlugin.prototype.afterResolveJsonSchema = function (event) {
+        var _a, _b;
+        var context = event.context;
+        var parent = (_a = context.node.parent) === null || _a === void 0 ? void 0 : _a.host;
+        if (((_b = parent === null || parent === void 0 ? void 0 : parent.info) === null || _b === void 0 ? void 0 : _b.plugin) === this) {
+            event.setData('/schemas/FlexColumn.json');
+        }
+    };
+    return FlexPlugin;
+}(AMisCodeEditor.BasePlugin));
+AMisCodeEditor.registerEditorPlugin(FlexPlugin);
+
+exports.FlexPlugin = FlexPlugin;

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

package/lib/plugin/Form/ButtonGroupSelect.js

@@ -0,0 +1,161 @@
+/**
+ * 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 BaseControl = require('../../component/BaseControl.js');
+
+var ButtonGroupControlPlugin = /** @class */ (function (_super) {
+    tslib.__extends(ButtonGroupControlPlugin, _super);
+    function ButtonGroupControlPlugin() {
+        var _this = _super !== null && _super.apply(this, arguments) || this;
+        // 关联渲染器名字
+        _this.rendererName = 'button-group-select';
+        _this.$schema = '/schemas/ButtonGroupControlSchema.json';
+        // 组件名称
+        _this.name = '按钮点选';
+        _this.isBaseComponent = true;
+        _this.icon = 'fa fa-object-group';
+        _this.description = '用来展示多个按钮，视觉上会作为一个整体呈现，同时可以作为表单项选项选择器来用。';
+        _this.docLink = '/amis/zh-CN/components/button-group';
+        _this.tags = ['按钮'];
+        _this.scaffold = {
+            type: 'button-group-select',
+            name: 'a',
+            options: [
+                {
+                    label: '选项1',
+                    value: 'a'
+                },
+                {
+                    label: '选项2',
+                    value: 'b'
+                }
+            ]
+        };
+        _this.previewSchema = {
+            type: 'form',
+            wrapWithPanel: false,
+            mode: 'horizontal',
+            body: tslib.__assign(tslib.__assign({}, _this.scaffold), { value: 'a', label: '按钮点选', description: '按钮点选可以当选项用。' })
+        };
+        _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 BaseControl.formItemControl({
+                common: {
+                    replace: true,
+                    body: [
+                        AMisCodeEditor.getSchemaTpl('formItemName', {
+                            required: true
+                        }),
+                        AMisCodeEditor.getSchemaTpl('label'),
+                        // getSchemaTpl('value'),
+                        AMisCodeEditor.getSchemaTpl('valueFormula', {
+                            rendererSchema: context === null || context === void 0 ? void 0 : context.schema,
+                            useSelectMode: true // 改用 Select 设置模式
+                        }),
+                        AMisCodeEditor.getSchemaTpl('clearable'),
+                        AMisCodeEditor.getSchemaTpl('multiple'),
+                        AMisCodeEditor.getSchemaTpl('extractValue')
+                    ]
+                },
+                option: {
+                    title: '按钮管理',
+                    body: [AMisCodeEditor.getSchemaTpl('optionControlV2'), AMisCodeEditor.getSchemaTpl('autoFill')]
+                },
+                style: {
+                    // reverse: true,
+                    body: [
+                        AMisCodeEditor.getSchemaTpl('size'),
+                        AMisCodeEditor.getSchemaTpl('buttonLevel', {
+                            label: '按钮样式',
+                            name: 'btnLevel'
+                        }),
+                        {
+                            type: 'button-group-select',
+                            name: 'vertical',
+                            label: '布局方向',
+                            value: false,
+                            options: [
+                                {
+                                    label: '水平',
+                                    value: false
+                                },
+                                {
+                                    label: '垂直',
+                                    value: true
+                                }
+                            ]
+                        },
+                        {
+                            type: 'switch',
+                            name: 'tiled',
+                            label: '平铺模式',
+                            value: false
+                        },
+                        AMisCodeEditor.getSchemaTpl('buttonLevel', {
+                            label: '按钮选中样式',
+                            name: 'btnActiveLevel'
+                        })
+                    ]
+                },
+                status: {}
+            }, context);
+        };
+        return _this;
+    }
+    return ButtonGroupControlPlugin;
+}(AMisCodeEditor.BasePlugin));
+AMisCodeEditor.registerEditorPlugin(ButtonGroupControlPlugin);
+
+exports.ButtonGroupControlPlugin = ButtonGroupControlPlugin;

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

@@ -1,4 +1,4 @@
-import { BasePlugin, RegionConfig } from '../../plugin';
+import { BasePlugin, RegionConfig, BaseEventContext } from 'amis-editor-core';
 export declare class ButtonToolbarControlPlugin extends BasePlugin {
     rendererName: string;
     $schema: string;
@@ -11,17 +11,18 @@ export declare class ButtonToolbarControlPlugin extends BasePlugin {
     scaffold: {
         type: string;
         buttons: {
+            onEvent: {
+                click: {
+                    actions: never[];
+                };
+            };
             type: string;
             label: string;
-            actionType: string;
-            dialog: {
-                title: string;
-                body: string;
-            };
         }[];
     };
     previewSchema: any;
     regions: Array<RegionConfig>;
+    notRenderFormZone: boolean;
     panelTitle: string;
-    panelBody: any[];
+    panelBodyCreator: (context: BaseEventContext) => any[];
 }

package/lib/plugin/Form/ButtonToolbar.js

@@ -0,0 +1,107 @@
+/**
+ * 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 BaseControl = require('../../component/BaseControl.js');
+
+var ButtonToolbarControlPlugin = /** @class */ (function (_super) {
+    tslib.__extends(ButtonToolbarControlPlugin, _super);
+    function ButtonToolbarControlPlugin() {
+        var _this = _super !== null && _super.apply(this, arguments) || this;
+        // 关联渲染器名字
+        _this.rendererName = 'button-toolbar';
+        _this.$schema = '/schemas/ButtonToolbarControlSchema.json';
+        // 组件名称
+        _this.name = '按钮工具栏';
+        _this.isBaseComponent = true;
+        _this.icon = 'fa fa-ellipsis-h';
+        _this.description = '可以用来放置多个按钮或者按钮组，按钮之间会存在一定的间隔';
+        _this.docLink = '/amis/zh-CN/components/form/button-toolbar';
+        _this.tags = ['表单项', '按钮'];
+        _this.scaffold = {
+            type: 'button-toolbar',
+            buttons: [
+                tslib.__assign({ type: 'button', label: '按钮1' }, BaseControl.BUTTON_DEFAULT_ACTION),
+                tslib.__assign({ type: 'button', label: '按钮2' }, BaseControl.BUTTON_DEFAULT_ACTION)
+            ]
+        };
+        _this.previewSchema = {
+            type: 'form',
+            wrapWithPanel: false,
+            mode: 'horizontal',
+            body: tslib.__assign(tslib.__assign({}, _this.scaffold), { label: '按钮工具栏' })
+        };
+        // 容器配置
+        _this.regions = [
+            {
+                key: 'buttons',
+                label: '按钮集合',
+                preferTag: '按钮',
+                renderMethod: 'renderButtons'
+            }
+        ];
+        _this.notRenderFormZone = true;
+        _this.panelTitle = '工具栏';
+        _this.panelBodyCreator = function (context) {
+            return BaseControl.formItemControl({
+                common: {
+                    replace: true,
+                    body: [
+                        AMisCodeEditor.getSchemaTpl('formItemName', {
+                            required: true
+                        }),
+                        AMisCodeEditor.getSchemaTpl('label'),
+                        AMisCodeEditor.getSchemaTpl('remark'),
+                        AMisCodeEditor.getSchemaTpl('labelRemark'),
+                        AMisCodeEditor.getSchemaTpl('description')
+                    ]
+                },
+                option: {
+                    title: '按钮管理',
+                    replace: true,
+                    body: [
+                        {
+                            name: 'buttons',
+                            type: 'combo',
+                            label: '',
+                            multiple: true,
+                            addable: true,
+                            minLength: 1,
+                            draggable: true,
+                            draggableTip: '',
+                            editable: false,
+                            visibleOn: 'this.buttons && this.buttons.length',
+                            items: [
+                                {
+                                    type: 'tpl',
+                                    inline: false,
+                                    tpl: '<span class="label label-default"><% if (data.type === "button-group") { %> 按钮组 <% } else { %><%= data.label %><% if (data.icon) { %><i class="<%= data.icon %>"/><% }%><% } %></span>'
+                                }
+                            ],
+                            addButtonText: '新增按钮',
+                            scaffold: {
+                                type: 'button',
+                                label: '按钮'
+                            }
+                        }
+                    ]
+                },
+                event: {
+                    hidden: false
+                }
+            }, context);
+        };
+        return _this;
+    }
+    return ButtonToolbarControlPlugin;
+}(AMisCodeEditor.BasePlugin));
+AMisCodeEditor.registerEditorPlugin(ButtonToolbarControlPlugin);
+
+exports.ButtonToolbarControlPlugin = ButtonToolbarControlPlugin;

package/{dist → lib}/plugin/Form/ChainedSelect.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 ChainedSelectControlPlugin extends BasePlugin {
     rendererName: string;
     $schema: string;
@@ -12,8 +13,13 @@ export declare class ChainedSelectControlPlugin extends BasePlugin {
         type: string;
         label: string;
         name: string;
+        joinValues: boolean;
     };
     previewSchema: any;
+    events: RendererEvent[];
+    actions: RendererAction[];
     panelTitle: string;
-    panelBody: any[];
+    notRenderFormZone: boolean;
+    panelJustify: boolean;
+    panelBodyCreator: (context: BaseEventContext) => any;
 }