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

package/lib/plugin/Button.js

@@ -0,0 +1,297 @@
+/**
+ * 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 util = require('../util.js');
+
+var ButtonPlugin = /** @class */ (function (_super) {
+    tslib.__extends(ButtonPlugin, _super);
+    function ButtonPlugin() {
+        var _this = _super !== null && _super.apply(this, arguments) || this;
+        // 关联渲染器名字
+        _this.rendererName = 'button';
+        _this.$schema = '/schemas/ActionSchema.json';
+        // 组件名称
+        _this.name = '按钮';
+        _this.isBaseComponent = true;
+        _this.description = '用来展示一个按钮，你可以配置不同的展示样式，配置不同的点击行为。';
+        _this.docLink = '/amis/zh-CN/components/button';
+        _this.tags = ['按钮'];
+        _this.icon = 'fa fa-square';
+        _this.scaffold = tslib.__assign({ type: 'button', label: '按钮' }, BaseControl.BUTTON_DEFAULT_ACTION);
+        _this.previewSchema = {
+            type: 'button',
+            label: '按钮'
+        };
+        _this.panelTitle = '按钮';
+        // 事件定义
+        _this.events = [
+            {
+                eventName: 'click',
+                eventLabel: '点击',
+                description: '点击时触发',
+                defaultShow: true
+            },
+            {
+                eventName: 'mouseenter',
+                eventLabel: '鼠标移入',
+                description: '鼠标移入时触发'
+            },
+            {
+                eventName: 'mouseleave',
+                eventLabel: '鼠标移出',
+                description: '鼠标移出时触发'
+            }
+            // {
+            //   eventName: 'doubleClick',
+            //   eventLabel: '双击',
+            //   description: '鼠标双击事件'
+            // }
+        ];
+        // 动作定义
+        _this.actions = [];
+        _this.panelJustify = true;
+        _this.panelBodyCreator = function (context) {
+            var isInDialog = /(?:\/|^)dialog\/.+$/.test(context.path);
+            var isInDrawer = /(?:\/|^)drawer\/.+$/.test(context.path);
+            // TODO: 旧方法无法判断，context 中没有 dropdown-button 的信息，临时实现
+            // const isInDropdown = /(?:\/|^)dropdown-button\/.+$/.test(context.path);
+            var isInDropdown = /^button-group\/.+$/.test(context.path);
+            return AMisCodeEditor.getSchemaTpl('tabs', [
+                {
+                    title: '属性',
+                    body: AMisCodeEditor.getSchemaTpl('collapseGroup', [
+                        {
+                            title: '基本',
+                            body: [
+                                {
+                                    label: '名称',
+                                    type: 'input-text',
+                                    name: 'label'
+                                },
+                                {
+                                    label: '类型',
+                                    type: 'button-group-select',
+                                    name: 'type',
+                                    size: 'sm',
+                                    options: [
+                                        {
+                                            label: '按钮',
+                                            value: 'button'
+                                        },
+                                        {
+                                            label: '提交',
+                                            value: 'submit'
+                                        },
+                                        {
+                                            label: '重置',
+                                            value: 'reset'
+                                        }
+                                    ]
+                                },
+                                AMisCodeEditor.getSchemaTpl('switch', {
+                                    name: 'close',
+                                    label: '是否关闭',
+                                    clearValueOnHidden: true,
+                                    labelRemark: "\u6307\u5B9A\u6B64\u6B21\u64CD\u4F5C\u5B8C\u540E\u5173\u95ED\u5F53\u524D ".concat(isInDialog ? 'dialog' : 'drawer'),
+                                    hidden: !isInDialog && !isInDrawer,
+                                    pipeIn: AMisCodeEditor.defaultValue(false)
+                                }),
+                                {
+                                    type: 'ae-switch-more',
+                                    mode: 'normal',
+                                    formType: 'extend',
+                                    label: BaseControl.tipedLabel('二次确认', '点击后先询问用户，由手动确认后再执行动作，避免误触。可用<code>\\${xxx}</code>取值。'),
+                                    form: {
+                                        body: [
+                                            {
+                                                name: 'confirmText',
+                                                type: 'input-text',
+                                                label: '确认内容'
+                                            }
+                                        ]
+                                    }
+                                },
+                                {
+                                    type: 'ae-switch-more',
+                                    formType: 'extend',
+                                    mode: 'normal',
+                                    label: '气泡提示',
+                                    hidden: isInDropdown,
+                                    form: {
+                                        body: [
+                                            {
+                                                type: 'input-text',
+                                                name: 'tooltip',
+                                                label: BaseControl.tipedLabel('正常提示', '正常状态下的提示内容，不填则不弹出提示。可用<code>\\${xxx}</code>取值。')
+                                            },
+                                            {
+                                                type: 'input-text',
+                                                name: 'disabledTip',
+                                                label: BaseControl.tipedLabel('禁用提示', '禁用状态下的提示内容，不填则弹出正常提示。可用<code>\\${xxx}</code>取值。'),
+                                                clearValueOnHidden: true,
+                                                visibleOn: 'data.tooltipTrigger !== "focus"'
+                                            },
+                                            {
+                                                type: 'button-group-select',
+                                                name: 'tooltipTrigger',
+                                                label: '触发方式',
+                                                // visibleOn: 'data.tooltip || data.disabledTip',
+                                                size: 'sm',
+                                                options: [
+                                                    {
+                                                        label: '鼠标悬浮',
+                                                        value: 'hover'
+                                                    },
+                                                    {
+                                                        label: '聚焦',
+                                                        value: 'focus'
+                                                    }
+                                                ],
+                                                pipeIn: AMisCodeEditor.defaultValue('hover')
+                                            },
+                                            {
+                                                type: 'button-group-select',
+                                                name: 'tooltipPlacement',
+                                                // visibleOn: 'data.tooltip || data.disabledTip',
+                                                label: '提示位置',
+                                                size: 'sm',
+                                                options: [
+                                                    {
+                                                        label: '上',
+                                                        value: 'top'
+                                                    },
+                                                    {
+                                                        label: '右',
+                                                        value: 'right'
+                                                    },
+                                                    {
+                                                        label: '下',
+                                                        value: 'bottom'
+                                                    },
+                                                    {
+                                                        label: '左',
+                                                        value: 'left'
+                                                    }
+                                                ],
+                                                pipeIn: AMisCodeEditor.defaultValue('bottom')
+                                            }
+                                        ]
+                                    }
+                                },
+                                AMisCodeEditor.getSchemaTpl('icon', {
+                                    label: '左侧图标'
+                                }),
+                                AMisCodeEditor.getSchemaTpl('icon', {
+                                    name: 'rightIcon',
+                                    label: '右侧图标'
+                                })
+                            ]
+                        },
+                        AMisCodeEditor.getSchemaTpl('status', {
+                            disabled: true
+                        })
+                    ])
+                },
+                {
+                    title: '外观',
+                    body: AMisCodeEditor.getSchemaTpl('collapseGroup', [
+                        {
+                            title: '基本',
+                            body: [
+                                AMisCodeEditor.getSchemaTpl('buttonLevel', {
+                                    label: '样式',
+                                    name: 'level',
+                                    hidden: isInDropdown
+                                }),
+                                AMisCodeEditor.getSchemaTpl('buttonLevel', {
+                                    label: '高亮样式',
+                                    name: 'activeLevel',
+                                    hidden: isInDropdown,
+                                    visibleOn: 'data.active'
+                                }),
+                                AMisCodeEditor.getSchemaTpl('switch', {
+                                    name: 'block',
+                                    label: '块状显示',
+                                    hidden: isInDropdown
+                                }),
+                                AMisCodeEditor.getSchemaTpl('size', {
+                                    label: '尺寸',
+                                    hidden: isInDropdown
+                                })
+                            ]
+                        },
+                        AMisCodeEditor.getSchemaTpl('style:classNames', {
+                            isFormItem: false,
+                            schema: [
+                                AMisCodeEditor.getSchemaTpl('className', {
+                                    name: 'iconClassName',
+                                    label: '左侧图标',
+                                    visibleOn: 'this.icon'
+                                }),
+                                AMisCodeEditor.getSchemaTpl('className', {
+                                    name: 'rightIconClassName',
+                                    label: '右侧图标',
+                                    visibleOn: 'this.rightIcon'
+                                })
+                            ]
+                        })
+                    ])
+                },
+                {
+                    title: '事件',
+                    className: 'p-none',
+                    body: [
+                        AMisCodeEditor.getSchemaTpl('eventControl', tslib.__assign({ name: 'onEvent' }, util.getEventControlConfig(_this.manager, context)))
+                    ]
+                }
+            ]);
+        };
+        return _this;
+    }
+    /**
+     * 如果禁用了没办法编辑
+     */
+    ButtonPlugin.prototype.filterProps = function (props) {
+        props.disabled = false;
+        return props;
+    };
+    /**
+     * 如果配置里面有 rendererName 自动返回渲染器信息。
+     * @param renderer
+     */
+    ButtonPlugin.prototype.getRendererInfo = function (_a) {
+        var renderer = _a.renderer, schema = _a.schema;
+        var plugin = this;
+        if (schema.$$id &&
+            plugin.name &&
+            plugin.rendererName &&
+            plugin.rendererName === renderer.name) {
+            // 复制部分信息出去
+            return {
+                name: schema.label ? schema.label : plugin.name,
+                regions: plugin.regions,
+                patchContainers: plugin.patchContainers,
+                // wrapper: plugin.wrapper,
+                vRendererConfig: plugin.vRendererConfig,
+                wrapperProps: plugin.wrapperProps,
+                wrapperResolve: plugin.wrapperResolve,
+                filterProps: plugin.filterProps,
+                $schema: plugin.$schema,
+                renderRenderer: plugin.renderRenderer
+            };
+        }
+    };
+    return ButtonPlugin;
+}(AMisCodeEditor.BasePlugin));
+AMisCodeEditor.registerEditorPlugin(ButtonPlugin);
+
+exports.ButtonPlugin = ButtonPlugin;

package/lib/plugin/ButtonGroup.d.ts

@@ -0,0 +1,39 @@
+import { BasePlugin, RegionConfig, BaseEventContext } from 'amis-editor-core';
+export declare class ButtonGroupPlugin extends BasePlugin {
+    rendererName: string;
+    $schema: string;
+    name: string;
+    isBaseComponent: boolean;
+    description: string;
+    tags: string[];
+    icon: string;
+    docLink: string;
+    scaffold: {
+        type: string;
+        buttons: {
+            onEvent: {
+                click: {
+                    actions: never[];
+                };
+            };
+            type: string;
+            label: string;
+        }[];
+    };
+    previewSchema: {
+        type: string;
+        buttons: {
+            onEvent: {
+                click: {
+                    actions: never[];
+                };
+            };
+            type: string;
+            label: string;
+        }[];
+    };
+    panelTitle: string;
+    panelJustify: boolean;
+    panelBodyCreator: (context: BaseEventContext) => any;
+    regions: Array<RegionConfig>;
+}

package/lib/plugin/ButtonGroup.js

@@ -0,0 +1,139 @@
+/**
+ * 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 ButtonGroupPlugin = /** @class */ (function (_super) {
+    tslib.__extends(ButtonGroupPlugin, _super);
+    function ButtonGroupPlugin() {
+        var _this = _super !== null && _super.apply(this, arguments) || this;
+        // 关联渲染器名字
+        _this.rendererName = 'button-group';
+        _this.$schema = '/schemas/ButtonGroupSchema.json';
+        // 组件名称
+        _this.name = '按钮组';
+        _this.isBaseComponent = true;
+        _this.description = '用来展示多个按钮，视觉上会作为一个整体呈现。';
+        _this.tags = ['按钮'];
+        _this.icon = 'fa fa-object-group';
+        _this.docLink = '/amis/zh-CN/components/button-group';
+        _this.scaffold = {
+            type: 'button-group',
+            buttons: [
+                tslib.__assign({ type: 'button', label: '按钮1' }, BaseControl.BUTTON_DEFAULT_ACTION),
+                tslib.__assign({ type: 'button', label: '按钮2' }, BaseControl.BUTTON_DEFAULT_ACTION)
+            ]
+        };
+        _this.previewSchema = tslib.__assign({}, _this.scaffold);
+        _this.panelTitle = '按钮组';
+        _this.panelJustify = true;
+        _this.panelBodyCreator = function (context) {
+            return AMisCodeEditor.getSchemaTpl('tabs', [
+                {
+                    title: '属性',
+                    body: AMisCodeEditor.getSchemaTpl('collapseGroup', [
+                        {
+                            title: '基本',
+                            body: [
+                                {
+                                    type: 'button-group-select',
+                                    name: 'vertical',
+                                    label: '布局方向',
+                                    options: [
+                                        {
+                                            label: '水平',
+                                            value: false
+                                        },
+                                        {
+                                            label: '垂直',
+                                            value: true
+                                        }
+                                    ],
+                                    pipeIn: AMisCodeEditor.defaultValue(false)
+                                },
+                                AMisCodeEditor.getSchemaTpl('switch', {
+                                    name: 'tiled',
+                                    label: BaseControl.tipedLabel('平铺模式', '使按钮组宽度占满父容器，各按钮宽度自适应'),
+                                    pipeIn: AMisCodeEditor.defaultValue(false)
+                                }),
+                                AMisCodeEditor.getSchemaTpl('combo-container', [
+                                    {
+                                        type: 'combo',
+                                        label: '按钮管理',
+                                        name: 'buttons',
+                                        mode: 'normal',
+                                        multiple: true,
+                                        addable: true,
+                                        minLength: 1,
+                                        draggable: true,
+                                        editable: false,
+                                        items: [
+                                            {
+                                                type: 'tpl',
+                                                inline: false,
+                                                className: 'p-t-xs',
+                                                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: '按钮'
+                                        }
+                                    }
+                                ])
+                            ]
+                        },
+                        AMisCodeEditor.getSchemaTpl('status')
+                    ])
+                },
+                {
+                    title: '外观',
+                    body: [
+                        AMisCodeEditor.getSchemaTpl('collapseGroup', [
+                            {
+                                title: '基本',
+                                body: [
+                                    AMisCodeEditor.getSchemaTpl('size', {
+                                        label: '尺寸'
+                                    })
+                                ]
+                            },
+                            AMisCodeEditor.getSchemaTpl('style:classNames', {
+                                isFormItem: false,
+                                schema: [
+                                    AMisCodeEditor.getSchemaTpl('className', {
+                                        label: '按钮',
+                                        name: 'btnClassName'
+                                    })
+                                ]
+                            })
+                        ])
+                    ]
+                }
+            ]);
+        };
+        _this.regions = [
+            {
+                key: 'buttons',
+                label: '子按钮',
+                renderMethod: 'render',
+                preferTag: '按钮',
+                insertPosition: 'inner'
+            }
+        ];
+        return _this;
+    }
+    return ButtonGroupPlugin;
+}(AMisCodeEditor.BasePlugin));
+AMisCodeEditor.registerEditorPlugin(ButtonGroupPlugin);
+
+exports.ButtonGroupPlugin = ButtonGroupPlugin;

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

@@ -1,4 +1,4 @@
-import { BasePlugin } from '../plugin';
+import { BasePlugin } from 'amis-editor-core';
 export declare class ButtonToolbarPlugin extends BasePlugin {
     rendererName: string;
     $schema: string;
@@ -7,16 +7,15 @@ export declare class ButtonToolbarPlugin extends BasePlugin {
     description: string;
     tags: string[];
     icon: string;
+    /**
+     * 组件选择面板中隐藏，和ButtonGroup合并
+     */
+    disabledRendererPlugin: boolean;
     scaffold: {
         type: string;
         buttons: {
             type: string;
             label: string;
-            actionType: string;
-            dialog: {
-                title: string;
-                body: string;
-            };
         }[];
     };
     previewSchema: {
@@ -24,11 +23,6 @@ export declare class ButtonToolbarPlugin extends BasePlugin {
         buttons: {
             type: string;
             label: string;
-            actionType: string;
-            dialog: {
-                title: string;
-                body: string;
-            };
         }[];
     };
     panelTitle: string;

package/lib/plugin/ButtonToolbar.js

@@ -0,0 +1,89 @@
+/**
+ * amis-editor v5.2.0-beta.0
+ * Copyright 2018-2022 @fex
+ */
+
+'use strict';
+
+var tslib = require('tslib');
+var AMisCodeEditor = require('amis-editor-core');
+
+/** @class */ ((function (_super) {
+    tslib.__extends(ButtonToolbarPlugin, _super);
+    function ButtonToolbarPlugin() {
+        var _this = _super !== null && _super.apply(this, arguments) || this;
+        // 关联渲染器名字
+        _this.rendererName = 'button-toolbar';
+        _this.$schema = '/schemas/ButtonToolbarSchema.json';
+        // 组件名称
+        _this.name = '按钮工具栏';
+        _this.isBaseComponent = true;
+        _this.description = '可以用来放置多个按钮或者按钮组，按钮之间会存在一定的间隔';
+        _this.tags = ['按钮'];
+        _this.icon = 'fa fa-ellipsis-h';
+        /**
+         * 组件选择面板中隐藏，和ButtonGroup合并
+         */
+        _this.disabledRendererPlugin = true;
+        _this.scaffold = {
+            type: 'button-toolbar',
+            buttons: [
+                {
+                    type: 'button',
+                    label: '按钮1'
+                },
+                {
+                    type: 'button',
+                    label: '按钮2'
+                }
+            ]
+        };
+        _this.previewSchema = tslib.__assign({}, _this.scaffold);
+        _this.panelTitle = '按钮工具栏';
+        _this.panelBody = [
+            AMisCodeEditor.getSchemaTpl('tabs', [
+                {
+                    title: '常规',
+                    body: [
+                        {
+                            name: 'buttons',
+                            type: 'combo',
+                            label: '按钮管理',
+                            multiple: true,
+                            addable: true,
+                            draggable: true,
+                            draggableTip: '可排序、可移除、如要编辑请在预览区选中编辑',
+                            editable: false,
+                            visibleOn: 'this.buttons && this.buttons.length',
+                            items: [
+                                {
+                                    type: 'tpl',
+                                    inline: false,
+                                    className: 'p-t-xs',
+                                    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: '按钮'
+                            }
+                        }
+                    ]
+                },
+                {
+                    title: '外观',
+                    body: [AMisCodeEditor.getSchemaTpl('className')]
+                },
+                {
+                    title: '显隐',
+                    body: [AMisCodeEditor.getSchemaTpl('ref'), AMisCodeEditor.getSchemaTpl('visible')]
+                }
+            ])
+        ];
+        return _this;
+    }
+    return ButtonToolbarPlugin;
+})(AMisCodeEditor.BasePlugin));
+// 和plugin/Form/ButtonToolbar.tsx的重复了
+// registerEditorPlugin(ButtonToolbarPlugin);

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

@@ -1,5 +1,6 @@
 /// <reference types="react" />
-import { BaseEventContext, BasePlugin, BasicRendererInfo, BasicSubRenderInfo, ChangeEventContext, PluginEvent, RendererEventContext, RendererInfoResolveEventContext, ScaffoldForm, SubRendererInfo } from '../plugin';
+import { BaseEventContext, BasePlugin, BasicRendererInfo, BasicSubRenderInfo, ChangeEventContext, PluginEvent, RendererEventContext, RendererInfoResolveEventContext, ScaffoldForm, SubRendererInfo } from 'amis-editor-core';
+import { EditorNodeType } from 'amis-editor-core';
 export declare class CRUDPlugin extends BasePlugin {
     rendererName: string;
     $schema: string;
@@ -122,4 +123,5 @@ export declare class CRUDPlugin extends BasePlugin {
     renderRenderer(props: any): JSX.Element;
     filterProps(props: any): any;
     afterUpdate(event: PluginEvent<ChangeEventContext>): void;
+    buildDataSchemas(node: EditorNodeType, region?: EditorNodeType): Promise<any>;
 }