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

package/lib/plugin/Avatar.js

@@ -0,0 +1,305 @@
+/**
+ * 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 DefaultSize = 40;
+var DefaultBorderRadius = 20;
+var widthOrheightPipeIn = function (curValue, rest) { var _a, _b; return curValue ? curValue : (_b = (_a = rest.data) === null || _a === void 0 ? void 0 : _a.size) !== null && _b !== void 0 ? _b : DefaultSize; };
+var AvatarPlugin = /** @class */ (function (_super) {
+    tslib.__extends(AvatarPlugin, _super);
+    function AvatarPlugin() {
+        var _this = _super !== null && _super.apply(this, arguments) || this;
+        // 关联渲染器名字
+        _this.rendererName = 'avatar';
+        _this.$schema = '/schemas/AvatarSchema.json';
+        // 组件名称
+        _this.name = '头像';
+        _this.isBaseComponent = true;
+        _this.icon = 'fa fa-user';
+        _this.description = '用户头像';
+        _this.docLink = '/amis/zh-CN/components/avatar';
+        _this.tags = ['其他'];
+        _this.scaffold = {
+            type: 'avatar',
+            showtype: 'image',
+            icon: '',
+            fit: 'cover',
+            style: {
+                width: DefaultSize,
+                height: DefaultSize,
+                borderRadius: DefaultBorderRadius
+            }
+        };
+        _this.previewSchema = tslib.__assign({}, _this.scaffold);
+        _this.notRenderFormZone = true;
+        _this.panelJustify = true;
+        _this.panelTitle = '头像';
+        _this.panelBodyCreator = function (context) {
+            return AMisCodeEditor.getSchemaTpl('tabs', [
+                {
+                    title: '属性',
+                    body: [
+                        AMisCodeEditor.getSchemaTpl('collapseGroup', [
+                            {
+                                className: 'p-none',
+                                title: '常用',
+                                body: [
+                                    // 如果同时存在 src、text 和 icon，会优先用 src、接着 text、最后 icon
+                                    {
+                                        type: 'button-group-select',
+                                        label: '内容',
+                                        name: 'showtype',
+                                        tiled: true,
+                                        inputClassName: 'items-center',
+                                        options: [
+                                            { label: '图片', value: 'image' },
+                                            { label: '图标', value: 'icon' },
+                                            { label: '文字', value: 'text' }
+                                        ],
+                                        pipeIn: function (value, form) {
+                                            var _a, _b;
+                                            if (value) {
+                                                return value;
+                                            }
+                                            var showType = ((_a = form.data) === null || _a === void 0 ? void 0 : _a.text)
+                                                ? 'text'
+                                                : ((_b = form.data) === null || _b === void 0 ? void 0 : _b.icon)
+                                                    ? 'icon'
+                                                    : 'image';
+                                            // 使用setTimeout跳过react更新检测，推进showtype更新
+                                            setTimeout(function () { return form.setValueByName('showtype', showType); });
+                                            return showType;
+                                        },
+                                        onChange: function (value, origin, item, form) {
+                                            form.setValues({
+                                                src: undefined,
+                                                fit: 'cover',
+                                                text: undefined,
+                                                gap: 4,
+                                                icon: ''
+                                            });
+                                        }
+                                    },
+                                    {
+                                        type: 'container',
+                                        className: 'ae-ExtendMore mb-3',
+                                        body: [
+                                            // 图标
+                                            {
+                                                label: '图标',
+                                                name: 'icon',
+                                                type: 'icon-picker',
+                                                className: 'fix-icon-picker-overflow',
+                                                visibleOn: 'data.showtype === "icon"'
+                                            },
+                                            // 图片
+                                            AMisCodeEditor.getSchemaTpl('valueFormula', {
+                                                rendererSchema: {
+                                                    type: 'input-url'
+                                                },
+                                                name: 'src',
+                                                label: '链接',
+                                                visibleOn: 'data.showtype === "image"'
+                                            }),
+                                            {
+                                                label: BaseControl.tipedLabel('填充方式', '图片大小与控件大小不一致的图片处理方式'),
+                                                name: 'fit',
+                                                type: 'select',
+                                                pipeIn: AMisCodeEditor.defaultValue('cover'),
+                                                options: [
+                                                    {
+                                                        label: '等比例裁剪长边',
+                                                        value: 'cover'
+                                                    },
+                                                    {
+                                                        label: '等比例留空短边',
+                                                        value: 'contain'
+                                                    },
+                                                    {
+                                                        label: '拉伸图片填满',
+                                                        value: 'fill'
+                                                    },
+                                                    {
+                                                        label: '按原尺寸裁剪',
+                                                        value: 'none'
+                                                    }
+                                                ],
+                                                visibleOn: 'data.showtype === "image"'
+                                            },
+                                            // 文字
+                                            {
+                                                label: '文字',
+                                                name: 'text',
+                                                type: 'input-text',
+                                                pipeOut: function (value) {
+                                                    return value === '' ? undefined : value;
+                                                },
+                                                visibleOn: 'data.showtype === "text"'
+                                            },
+                                            {
+                                                type: 'input-group',
+                                                name: 'gap',
+                                                value: 4,
+                                                label: BaseControl.tipedLabel('边框距离', '文字居中，文字过多时保持与边框最小的距离'),
+                                                body: [
+                                                    {
+                                                        type: 'input-number',
+                                                        name: 'gap',
+                                                        min: 0
+                                                    },
+                                                    {
+                                                        type: 'tpl',
+                                                        addOnclassName: 'border-0 bg-none',
+                                                        tpl: 'px'
+                                                    }
+                                                ],
+                                                visibleOn: 'data.showtype === "text"'
+                                            }
+                                        ]
+                                    },
+                                    AMisCodeEditor.getSchemaTpl('badge')
+                                ]
+                            },
+                            AMisCodeEditor.getSchemaTpl('status')
+                        ])
+                    ]
+                },
+                {
+                    title: '外观',
+                    className: 'p-none',
+                    body: AMisCodeEditor.getSchemaTpl('collapseGroup', [
+                        {
+                            title: '基本',
+                            body: [
+                                {
+                                    type: 'input-number',
+                                    label: '长度',
+                                    min: 0,
+                                    name: 'style.width',
+                                    pipeIn: widthOrheightPipeIn
+                                },
+                                {
+                                    type: 'input-number',
+                                    label: '高度',
+                                    min: 1,
+                                    name: 'style.height',
+                                    pipeIn: widthOrheightPipeIn
+                                },
+                                {
+                                    type: 'input-number',
+                                    label: '圆角',
+                                    min: 0,
+                                    name: 'style.borderRadius',
+                                    pipeIn: function (curValue, rest) {
+                                        var _a, _b, _c;
+                                        if (curValue) {
+                                            return curValue;
+                                        }
+                                        // 如果是圆形，说明是旧的，直接设置shape为长方形后，返回50%
+                                        if (((_a = rest.data) === null || _a === void 0 ? void 0 : _a.shape) === 'circle') {
+                                            rest.setValueByName('shape', 'square');
+                                            return +(((_b = rest.data) === null || _b === void 0 ? void 0 : _b.size) || DefaultSize) * 0.5;
+                                        }
+                                        return ((_c = rest.data) === null || _c === void 0 ? void 0 : _c.size) ? 0 : DefaultBorderRadius;
+                                    }
+                                }
+                            ]
+                        },
+                        // 兼容旧的外观面板
+                        {
+                            header: '文字',
+                            key: 'font',
+                            body: [
+                                {
+                                    type: 'style-font',
+                                    label: false,
+                                    name: 'style'
+                                }
+                            ]
+                        },
+                        {
+                            header: '内外边距',
+                            key: 'box-model',
+                            body: [
+                                {
+                                    type: 'style-box-model',
+                                    label: false,
+                                    name: 'style'
+                                }
+                            ]
+                        },
+                        {
+                            header: '边框',
+                            key: 'border',
+                            body: [
+                                {
+                                    type: 'style-border',
+                                    label: false,
+                                    name: 'style',
+                                    disableRadius: true
+                                }
+                            ]
+                        },
+                        {
+                            title: '背景',
+                            body: [
+                                {
+                                    type: 'style-background',
+                                    label: false,
+                                    name: 'style',
+                                    noImage: true
+                                }
+                            ]
+                        },
+                        {
+                            header: '阴影',
+                            key: 'box-shadow',
+                            body: [
+                                {
+                                    type: 'style-box-shadow',
+                                    label: false,
+                                    name: 'style.boxShadow'
+                                }
+                            ]
+                        },
+                        {
+                            header: '其他',
+                            key: 'other',
+                            body: [
+                                {
+                                    label: '透明度',
+                                    name: 'style.opacity',
+                                    min: 0,
+                                    max: 1,
+                                    step: 0.05,
+                                    type: 'input-range',
+                                    pipeIn: AMisCodeEditor.defaultValue(1),
+                                    marks: {
+                                        '0%': '0',
+                                        '50%': '0.5',
+                                        '100%': '1'
+                                    }
+                                }
+                            ]
+                        },
+                        AMisCodeEditor.getSchemaTpl('style:classNames', { isFormItem: false })
+                    ])
+                }
+            ]);
+        };
+        return _this;
+    }
+    return AvatarPlugin;
+}(AMisCodeEditor.BasePlugin));
+AMisCodeEditor.registerEditorPlugin(AvatarPlugin);
+
+exports.AvatarPlugin = AvatarPlugin;

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

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

package/lib/plugin/Breadcrumb.js

@@ -0,0 +1,116 @@
+/**
+ * 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 BreadcrumbPlugin = /** @class */ (function (_super) {
+    tslib.__extends(BreadcrumbPlugin, _super);
+    function BreadcrumbPlugin() {
+        var _this = _super !== null && _super.apply(this, arguments) || this;
+        // 关联渲染器名字
+        _this.rendererName = 'breadcrumb';
+        _this.$schema = '/schemas/BreadcrumbSchema.json';
+        _this.disabledRendererPlugin = true;
+        // 组件名称
+        _this.name = '面包屑';
+        _this.isBaseComponent = true;
+        _this.icon = 'fa fa-list';
+        _this.description = '面包屑导航';
+        _this.docLink = '/amis/zh-CN/components/breadcrumb';
+        _this.tags = ['其他'];
+        _this.scaffold = {
+            type: 'breadcrumb',
+            items: [
+                {
+                    label: '首页',
+                    href: '/',
+                    icon: 'fa fa-home'
+                },
+                {
+                    label: '上级页面'
+                },
+                {
+                    label: '<b>当前页面</b>'
+                }
+            ]
+        };
+        _this.previewSchema = tslib.__assign({}, _this.scaffold);
+        _this.panelTitle = '面包屑';
+        _this.panelBody = [
+            AMisCodeEditor.getSchemaTpl('tabs', [
+                {
+                    title: '常规',
+                    body: [
+                        {
+                            label: '分隔符',
+                            type: 'input-text',
+                            name: 'separator'
+                        },
+                        AMisCodeEditor.getSchemaTpl('api', {
+                            label: '动态数据',
+                            name: 'source'
+                        }),
+                        {
+                            label: '面包屑',
+                            name: 'items',
+                            type: 'combo',
+                            multiple: true,
+                            multiLine: true,
+                            draggable: true,
+                            addButtonText: '新增',
+                            items: [
+                                {
+                                    type: 'input-text',
+                                    placeholder: '文本',
+                                    name: 'label'
+                                },
+                                {
+                                    type: 'input-text',
+                                    name: 'href',
+                                    placeholder: '链接'
+                                },
+                                {
+                                    name: 'icon',
+                                    label: '图标',
+                                    type: 'icon-picker',
+                                    className: 'fix-icon-picker-overflow'
+                                }
+                            ]
+                        }
+                    ]
+                },
+                {
+                    title: '外观',
+                    body: [
+                        AMisCodeEditor.getSchemaTpl('className'),
+                        AMisCodeEditor.getSchemaTpl('className', {
+                            name: 'itemClassName',
+                            label: '面包屑的 CSS 类名'
+                        }),
+                        ,
+                        AMisCodeEditor.getSchemaTpl('className', {
+                            name: 'separatorClassName',
+                            label: '分隔符的 CSS 类名'
+                        })
+                    ]
+                },
+                {
+                    title: '显隐',
+                    body: [AMisCodeEditor.getSchemaTpl('ref'), AMisCodeEditor.getSchemaTpl('visible')]
+                }
+            ])
+        ];
+        return _this;
+    }
+    return BreadcrumbPlugin;
+}(AMisCodeEditor.BasePlugin));
+AMisCodeEditor.registerEditorPlugin(BreadcrumbPlugin);
+
+exports.BreadcrumbPlugin = BreadcrumbPlugin;

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

@@ -1,4 +1,5 @@
-import { BaseEventContext, BasePlugin, BasicRendererInfo, RendererInfoResolveEventContext } from '../plugin';
+import { BaseEventContext, BasePlugin, BasicRendererInfo, RendererInfoResolveEventContext } from 'amis-editor-core';
+import { RendererAction, RendererEvent } from 'amis-editor-comp/dist/renderers/event-action';
 import { SchemaObject } from 'amis/lib/Schema';
 export declare class ButtonPlugin extends BasePlugin {
     rendererName: string;
@@ -12,7 +13,10 @@ export declare class ButtonPlugin extends BasePlugin {
     scaffold: SchemaObject;
     previewSchema: any;
     panelTitle: string;
-    panelBodyCreator: (context: BaseEventContext) => any[];
+    events: RendererEvent[];
+    actions: RendererAction[];
+    panelJustify: boolean;
+    panelBodyCreator: (context: BaseEventContext) => any;
     /**
      * 如果禁用了没办法编辑
      */