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

package/lib/plugin/Page.js

@@ -0,0 +1,363 @@
+/**
+ * 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 util = require('../util.js');
+
+var PagePlugin = /** @class */ (function (_super) {
+    tslib.__extends(PagePlugin, _super);
+    function PagePlugin() {
+        var _this = _super !== null && _super.apply(this, arguments) || this;
+        // 关联渲染器名字
+        _this.rendererName = 'page';
+        _this.$schema = '/schemas/PageSchema.json';
+        // 组件名称
+        _this.name = '页面';
+        _this.isBaseComponent = true;
+        // 注释掉是为了不让它在出现在组件列表中，因为只有顶级才会用到这个。
+        // description =
+        //   '页面渲染器，页面的顶级入口。包含多个区域，您可以选择在不同的区域里面放置不同的渲染器。';
+        _this.docLink = '/amis/zh-CN/components/page';
+        _this.tags = '容器';
+        _this.icon = 'fa fa-desktop';
+        _this.scaffold = {
+            type: 'page',
+            body: [
+                {
+                    type: 'tpl',
+                    tpl: '内容'
+                }
+            ]
+        };
+        _this.previewSchema = {
+            type: 'page',
+            className: 'text-left b-a',
+            asideClassName: 'w-xs',
+            title: '标题',
+            subTitle: '副标题',
+            aside: '边栏',
+            body: '内容'
+        };
+        _this.events = [
+            {
+                eventName: 'inited',
+                eventLabel: '初始化完成',
+                description: '远程初始化接口请求成功时触发',
+                dataSchema: [
+                    {
+                        type: 'object',
+                        properties: {
+                            'event.data': {
+                                type: 'object',
+                                title: '远程请求返回的初始化数据'
+                            }
+                        }
+                    }
+                ]
+            },
+            {
+                eventName: 'pullRefresh',
+                eventLabel: '下拉刷新',
+                description: '开启下拉刷新后，下拉释放后触发（仅用于移动端）'
+            }
+        ];
+        // 动作定义
+        _this.actions = [
+            {
+                actionType: 'reload',
+                actionLabel: '重新加载',
+                description: '触发组件数据刷新并重新渲染'
+            },
+            {
+                actionType: 'setValue',
+                actionLabel: '更新数据',
+                description: '触发组件数据更新'
+            }
+        ];
+        // 普通容器类渲染器配置
+        _this.regions = [
+            { key: 'toolbar', label: '工具栏', preferTag: '工具栏内容' },
+            { key: 'aside', label: '边栏', placeholder: '边栏内容' },
+            { key: 'body', label: '内容区', placeholder: '页面内容' }
+        ];
+        _this.wrapper = AMisCodeEditor.ContainerWrapper;
+        _this.panelTitle = '页面';
+        _this.panelBodyCreator = function (context) {
+            return [
+                AMisCodeEditor.getSchemaTpl('tabs', [
+                    {
+                        title: '常规',
+                        body: [
+                            {
+                                type: 'checkboxes',
+                                name: 'regions',
+                                label: '区域展示',
+                                pipeIn: function (value) {
+                                    return Array.isArray(value)
+                                        ? value
+                                        : ['auto', 'body', 'toolbar', 'aside', 'header'];
+                                },
+                                pipeOut: function (value) {
+                                    return Array.isArray(value) && ~value.indexOf('auto')
+                                        ? undefined
+                                        : value.length
+                                            ? value
+                                            : ['auto', 'body', 'toolbar', 'aside', 'header'];
+                                },
+                                joinValues: false,
+                                extractValue: true,
+                                inline: false,
+                                options: [
+                                    {
+                                        label: '自动',
+                                        value: 'auto'
+                                    },
+                                    {
+                                        label: '内容区',
+                                        value: 'body',
+                                        disabledOn: '!Array.isArray(this.regions) || ~this.regions.indexOf("auto")'
+                                    },
+                                    {
+                                        label: '边栏',
+                                        value: 'aside',
+                                        disabledOn: '!Array.isArray(this.regions) ||~this.regions.indexOf("auto")'
+                                    },
+                                    {
+                                        label: '工具栏',
+                                        value: 'toolbar',
+                                        disabledOn: '!Array.isArray(this.regions) ||~this.regions.indexOf("auto")'
+                                    },
+                                    {
+                                        label: '顶部',
+                                        value: 'header',
+                                        disabledOn: '!Array.isArray(this.regions) ||~this.regions.indexOf("auto")'
+                                    }
+                                ]
+                            },
+                            {
+                                label: '标题',
+                                name: 'title',
+                                type: 'input-text'
+                            },
+                            {
+                                label: '副标题',
+                                name: 'subTitle',
+                                type: 'input-text'
+                            },
+                            {
+                                label: '提示',
+                                name: 'remark',
+                                type: 'textarea',
+                                visibleOn: 'this.title',
+                                description: '标题附近会出现一个提示图标，鼠标放上去会提示该内容。'
+                            },
+                            AMisCodeEditor.getSchemaTpl('data')
+                        ]
+                    },
+                    {
+                        title: '接口',
+                        body: [
+                            AMisCodeEditor.getSchemaTpl('api', {
+                                label: '数据初始化接口',
+                                name: 'initApi',
+                                sampleBuilder: function (schema) { return "{\n  \"status\": 0,\n  \"msg\": \"\",\n\n  data: {\n    // \u793A\u4F8B\u6570\u636E\n    \"id\": 1,\n    \"a\": \"sample\"\n  }\n}"; }
+                            }),
+                            AMisCodeEditor.getSchemaTpl('initFetch'),
+                            AMisCodeEditor.getSchemaTpl('switch', {
+                                label: '开启定时刷新',
+                                name: 'interval',
+                                visibleOn: 'data.initApi',
+                                pipeIn: function (value) { return !!value; },
+                                pipeOut: function (value) { return (value ? 3000 : undefined); }
+                            }),
+                            {
+                                name: 'interval',
+                                type: 'input-number',
+                                visibleOn: 'typeof this.interval === "number"',
+                                step: 500
+                            },
+                            AMisCodeEditor.getSchemaTpl('switch', {
+                                name: 'silentPolling',
+                                label: '静默刷新',
+                                visibleOn: '!!data.interval',
+                                description: '设置自动定时刷新时是否显示loading'
+                            }),
+                            {
+                                name: 'stopAutoRefreshWhen',
+                                label: '停止定时刷新检测表达式',
+                                type: 'input-text',
+                                visibleOn: '!!data.interval',
+                                description: '定时刷新一旦设置会一直刷新，除非给出表达式，条件满足后则不刷新了。'
+                            },
+                            {
+                                label: '默认消息提示',
+                                type: 'combo',
+                                name: 'messages',
+                                multiLine: true,
+                                description: '设置 ajax 默认提示信息，当 ajax 没有返回 msg 信息时有用，如果 ajax 返回携带了 msg 值，则还是以 ajax 返回为主',
+                                items: [
+                                    {
+                                        label: '获取成功提示',
+                                        type: 'input-text',
+                                        name: 'fetchSuccess'
+                                    },
+                                    {
+                                        label: '获取失败提示',
+                                        type: 'input-text',
+                                        name: 'fetchFailed'
+                                    },
+                                    {
+                                        label: '保存成功提示',
+                                        type: 'input-text',
+                                        name: 'saveSuccess'
+                                    },
+                                    {
+                                        label: '保存失败提示',
+                                        type: 'input-text',
+                                        name: 'saveFailed'
+                                    }
+                                ]
+                            }
+                        ]
+                    },
+                    {
+                        title: '外观',
+                        className: 'p-none',
+                        body: [
+                            AMisCodeEditor.getSchemaTpl('collapseGroup', tslib.__spreadArray(tslib.__spreadArray([], AMisCodeEditor.getSchemaTpl('style:common'), true), [
+                                AMisCodeEditor.getSchemaTpl('style:className', {
+                                    isFormItem: false,
+                                    schema: [
+                                        AMisCodeEditor.getSchemaTpl('className', {
+                                            name: 'headerClassName',
+                                            label: '头部CSS类名'
+                                        }),
+                                        AMisCodeEditor.getSchemaTpl('className', {
+                                            name: 'bodyClassName',
+                                            label: '内容CSS类名'
+                                        }),
+                                        AMisCodeEditor.getSchemaTpl('className', {
+                                            name: 'asideClassName',
+                                            label: '边栏CSS类名'
+                                        }),
+                                        AMisCodeEditor.getSchemaTpl('className', {
+                                            name: 'toolbarClassName',
+                                            label: '工具栏CSS类名'
+                                        })
+                                    ]
+                                })
+                            ], false))
+                        ]
+                    },
+                    {
+                        title: '事件',
+                        className: 'p-none',
+                        body: [
+                            AMisCodeEditor.getSchemaTpl('eventControl', tslib.__assign({ name: 'onEvent' }, util.getEventControlConfig(_this.manager, context)))
+                        ]
+                    },
+                    {
+                        title: '其他',
+                        body: [
+                            {
+                                type: 'combo',
+                                name: 'pullRefresh',
+                                multiLine: true,
+                                noBorder: true,
+                                items: [
+                                    {
+                                        type: 'switch',
+                                        label: '移动端下拉刷新',
+                                        name: 'disabled',
+                                        mode: 'horizontal',
+                                        horizontal: {
+                                            justify: true,
+                                            left: 8
+                                        },
+                                        inputClassName: 'is-inline ',
+                                        trueValue: false,
+                                        falseValue: true
+                                    },
+                                    {
+                                        name: 'pullingText',
+                                        label: '下拉过程提示文案',
+                                        type: 'input-text',
+                                        visibleOn: '!this.disabled'
+                                    },
+                                    {
+                                        name: 'loosingText',
+                                        label: '释放过程提示文案',
+                                        type: 'input-text',
+                                        visibleOn: '!this.disabled'
+                                    }
+                                ]
+                            }
+                            // {
+                            //   type: 'combo',
+                            //   name: 'definitions',
+                            //   multiple: true,
+                            //   multiLine: true,
+                            //   label: '定义',
+                            //   description: '定义类型，定义完成后可被子节点引用。',
+                            //   pipeIn: (value: any) =>
+                            //     value
+                            //       ? Object.keys(value).map(key => ({
+                            //           key,
+                            //           value: value[key]
+                            //         }))
+                            //       : [],
+                            //   pipeOut: (value: any) =>
+                            //     Array.isArray(value)
+                            //       ? value.reduce(
+                            //           (obj, current) => ({
+                            //             ...obj,
+                            //             [current.key || '']: current.value
+                            //               ? current.value
+                            //               : {type: 'tpl', tpl: '内容'}
+                            //           }),
+                            //           {}
+                            //         )
+                            //       : undefined,
+                            //   items: [
+                            //     {
+                            //       type: 'input-text',
+                            //       name: 'key',
+                            //       label: 'Key',
+                            //       required: true
+                            //     },
+                            //     {
+                            //       children: ({index}: any) => (
+                            //         <Button
+                            //           size="sm"
+                            //           level="danger"
+                            //           // onClick={this.handleEditDefinitionDetail.bind(
+                            //           //   this,
+                            //           //   index
+                            //           // )}
+                            //           block
+                            //         >
+                            //           配置详情
+                            //         </Button>
+                            //       )
+                            //     }
+                            //   ]
+                            // }
+                        ]
+                    }
+                ])
+            ];
+        };
+        return _this;
+    }
+    return PagePlugin;
+}(AMisCodeEditor.BasePlugin));
+AMisCodeEditor.registerEditorPlugin(PagePlugin);
+
+exports.PagePlugin = PagePlugin;

package/lib/plugin/Pagination.d.ts

@@ -0,0 +1,51 @@
+import { BasePlugin, RegionConfig, BaseEventContext } from 'amis-editor-core';
+import { RendererEvent } from 'amis-editor-comp/dist/renderers/event-action';
+export declare class PaginationPlugin extends BasePlugin {
+    rendererName: string;
+    $schema: string;
+    name: string;
+    isBaseComponent: boolean;
+    description: string;
+    tags: string[];
+    icon: string;
+    baseLayoutLIst: {
+        text: string;
+        value: string;
+        checked: boolean;
+    }[];
+    scaffold: {
+        type: string;
+        mode: string;
+        layout: string[];
+        activePage: number;
+        lastPage: number;
+        total: number;
+        hasNext: boolean;
+        disabled: boolean;
+        showPerPage: boolean;
+        perPageAvailable: number[];
+        perPage: number;
+        maxButton: number;
+        showPageInput: boolean;
+    };
+    previewSchema: {
+        type: string;
+        mode: string;
+        layout: string[];
+        activePage: number;
+        lastPage: number;
+        total: number;
+        hasNext: boolean;
+        disabled: boolean;
+        showPerPage: boolean;
+        perPageAvailable: number[];
+        perPage: number;
+        maxButton: number;
+        showPageInput: boolean;
+    };
+    panelTitle: string;
+    events: RendererEvent[];
+    panelJustify: boolean;
+    panelBodyCreator: (context: BaseEventContext) => any;
+    regions: Array<RegionConfig>;
+}

package/lib/plugin/Pagination.js

@@ -0,0 +1,247 @@
+/**
+ * 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 PaginationPlugin = /** @class */ (function (_super) {
+    tslib.__extends(PaginationPlugin, _super);
+    function PaginationPlugin() {
+        var _this = _super !== null && _super.apply(this, arguments) || this;
+        // 关联渲染器名字
+        _this.rendererName = 'pagination';
+        _this.$schema = '/schemas/PaginationSchema.json';
+        // 组件名称
+        _this.name = '分页组件';
+        _this.isBaseComponent = false;
+        _this.description = '分页组件，可以对列表进行分页展示，提高页面性能';
+        _this.tags = ['容器'];
+        _this.icon = 'fa fa-window-minimize';
+        _this.baseLayoutLIst = [
+            { text: '总数', value: 'total', checked: false },
+            { text: '每页条数', value: 'perPage', checked: false },
+            { text: '分页', value: 'pager', checked: true },
+            { text: '跳转', value: 'go', checked: false }
+        ];
+        _this.scaffold = {
+            type: 'pagination',
+            mode: 'normal',
+            layout: ['pager'],
+            activePage: 1,
+            lastPage: 1,
+            total: 1,
+            hasNext: false,
+            disabled: false,
+            showPerPage: false,
+            perPageAvailable: [10, 20, 50, 100],
+            perPage: 10,
+            maxButton: 7,
+            showPageInput: false
+        };
+        _this.previewSchema = tslib.__assign({}, _this.scaffold);
+        _this.panelTitle = '分页器';
+        // 事件定义
+        _this.events = [
+            {
+                eventName: 'pageChange',
+                eventLabel: '分页改变',
+                description: '分页改变'
+            }
+        ];
+        _this.panelJustify = true;
+        _this.panelBodyCreator = function (context) {
+            return AMisCodeEditor.getSchemaTpl('tabs', [
+                {
+                    title: '属性',
+                    body: AMisCodeEditor.getSchemaTpl('collapseGroup', [
+                        {
+                            title: '基本',
+                            body: [
+                                {
+                                    name: 'mode',
+                                    label: '分页类型',
+                                    type: 'button-group-select',
+                                    size: 'sm',
+                                    pipeIn: AMisCodeEditor.defaultValue('normal'),
+                                    options: [
+                                        {
+                                            label: 'normal',
+                                            value: 'normal'
+                                        },
+                                        {
+                                            label: 'simple',
+                                            value: 'simple'
+                                        }
+                                    ]
+                                },
+                                {
+                                    name: 'hasNext',
+                                    label: '是否有下一页',
+                                    mode: 'row',
+                                    inputClassName: 'inline-flex justify-between flex-row-reverse',
+                                    type: 'switch',
+                                    visibleOn: 'data.mode === "simple"'
+                                },
+                                {
+                                    name: 'activePage',
+                                    label: BaseControl.tipedLabel('当前页', '支持使用 \\${xxx} 来获取变量'),
+                                    type: 'input-text'
+                                },
+                                {
+                                    name: 'lastPage',
+                                    label: BaseControl.tipedLabel('最后页码', '支持使用 \\${xxx} 来获取变量'),
+                                    type: 'input-text',
+                                    visibleOn: 'data.mode === "normal"'
+                                },
+                                {
+                                    name: 'total',
+                                    label: BaseControl.tipedLabel('总条数', '支持使用 \\${xxx} 来获取变量'),
+                                    type: 'input-text',
+                                    visibleOn: 'data.mode === "normal"'
+                                },
+                                AMisCodeEditor.getSchemaTpl('combo-container', {
+                                    name: 'layout',
+                                    type: 'combo',
+                                    label: BaseControl.tipedLabel('分页布局', '选中表示渲染该项，可以拖拽排序调整显示的顺序'),
+                                    visibleOn: 'data.mode === "normal"',
+                                    mode: 'normal',
+                                    multiple: true,
+                                    multiLine: false,
+                                    addable: false,
+                                    removable: false,
+                                    draggable: true,
+                                    editable: false,
+                                    minLength: 1,
+                                    tabsStyle: 'inline',
+                                    formClassName: 'ae-pagination-layout-item',
+                                    items: [
+                                        {
+                                            type: 'checkbox',
+                                            name: 'checked',
+                                            className: 'm-t-n-xxs'
+                                        },
+                                        {
+                                            type: 'tpl',
+                                            name: 'text',
+                                            className: 'p-t-xs'
+                                        }
+                                    ],
+                                    pipeIn: function (value) {
+                                        var layoutList = [];
+                                        if (Array.isArray(value)) {
+                                            layoutList = value;
+                                        }
+                                        else if (typeof value === 'string') {
+                                            layoutList = value.split(',');
+                                        }
+                                        var layout = _this.baseLayoutLIst.map(function (v) { return (tslib.__assign(tslib.__assign({}, v), { checked: layoutList.includes(v.value) })); });
+                                        return layout;
+                                    },
+                                    pipeOut: function (value) {
+                                        _this.baseLayoutLIst = tslib.__spreadArray([], value, true);
+                                        return value.filter(function (v) { return v.checked; }).map(function (v) { return v.value; });
+                                    }
+                                }),
+                                {
+                                    name: 'showPerPage',
+                                    label: '显示每页条数',
+                                    mode: 'row',
+                                    inputClassName: 'inline-flex justify-between flex-row-reverse',
+                                    type: 'switch',
+                                    visibleOn: 'data.mode === "normal"'
+                                },
+                                AMisCodeEditor.getSchemaTpl('combo-container', {
+                                    name: 'perPageAvailable',
+                                    type: 'combo',
+                                    label: '每页条数选项',
+                                    visibleOn: 'data.mode === "normal"',
+                                    mode: 'normal',
+                                    multiple: true,
+                                    multiLine: false,
+                                    addable: true,
+                                    removable: true,
+                                    draggable: true,
+                                    editable: true,
+                                    minLength: 1,
+                                    tabsStyle: 'inline',
+                                    addButtonClassName: 'm-b-sm',
+                                    items: [
+                                        {
+                                            type: 'input-number',
+                                            name: 'value',
+                                            min: 1
+                                        }
+                                    ],
+                                    pipeIn: function (value) {
+                                        return value.map(function (v) { return ({ value: v }); });
+                                    },
+                                    pipeOut: function (value) {
+                                        return value.map(function (v) { return v.value; });
+                                    }
+                                }),
+                                {
+                                    name: 'perPage',
+                                    type: 'input-text',
+                                    label: '默认每页条数',
+                                    visibleOn: 'data.mode === "normal"'
+                                },
+                                {
+                                    name: 'maxButton',
+                                    label: '最多按钮数',
+                                    type: 'input-number',
+                                    min: 5,
+                                    max: 20,
+                                    visibleOn: 'data.mode === "normal"'
+                                },
+                                {
+                                    name: 'showPageInput',
+                                    label: '显示页面跳转',
+                                    mode: 'row',
+                                    inputClassName: 'inline-flex justify-between flex-row-reverse',
+                                    type: 'switch',
+                                    visibleOn: 'data.mode === "normal"'
+                                }
+                            ]
+                        },
+                        {
+                            title: '状态',
+                            body: [AMisCodeEditor.getSchemaTpl('disabled')]
+                        }
+                    ])
+                },
+                {
+                    title: '外观',
+                    body: AMisCodeEditor.getSchemaTpl('collapseGroup', [
+                        AMisCodeEditor.getSchemaTpl('style:classNames', { isFormItem: false })
+                    ])
+                },
+                {
+                    title: '事件',
+                    className: 'p-none',
+                    body: [
+                        AMisCodeEditor.getSchemaTpl('eventControl', tslib.__assign({ name: 'onEvent' }, util.getEventControlConfig(_this.manager, context)))
+                    ]
+                }
+            ]);
+        };
+        _this.regions = [
+            {
+                key: 'body',
+                label: '内容区'
+            }
+        ];
+        return _this;
+    }
+    return PaginationPlugin;
+}(AMisCodeEditor.BasePlugin));
+AMisCodeEditor.registerEditorPlugin(PaginationPlugin);
+
+exports.PaginationPlugin = PaginationPlugin;

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

@@ -1,4 +1,4 @@
-import { BasePlugin, BaseEventContext, BasicPanelItem, RegionConfig, BuildPanelEventContext } from '../plugin';
+import { BasePlugin, BaseEventContext, BasicPanelItem, RegionConfig, BuildPanelEventContext } from 'amis-editor-core';
 export declare class PanelPlugin extends BasePlugin {
     rendererName: string;
     $schema: string;