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

package/lib/plugin/IFrame.js

@@ -0,0 +1,94 @@
+/**
+ * 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 IFramePlugin = /** @class */ (function (_super) {
+    tslib.__extends(IFramePlugin, _super);
+    function IFramePlugin() {
+        var _this = _super !== null && _super.apply(this, arguments) || this;
+        // 关联渲染器名字
+        _this.rendererName = 'iframe';
+        _this.$schema = '/schemas/IFrameSchema.json';
+        // 组件名称
+        _this.name = 'iFrame';
+        _this.isBaseComponent = true;
+        _this.description = '可以用来嵌入现有页面。';
+        _this.tags = ['容器'];
+        _this.icon = 'fa fa-window-maximize';
+        _this.scaffold = {
+            type: 'iframe',
+            src: '//www.baidu.com'
+        };
+        _this.previewSchema = {
+            type: 'tpl',
+            tpl: 'iFrame'
+        };
+        _this.panelTitle = 'iFrame';
+        _this.panelJustify = true;
+        _this.panelBodyCreator = function (context) {
+            return AMisCodeEditor.getSchemaTpl('tabs', [
+                {
+                    title: '属性',
+                    body: AMisCodeEditor.getSchemaTpl('collapseGroup', [
+                        {
+                            title: '基本',
+                            body: [
+                                {
+                                    name: 'src',
+                                    label: '页面地址',
+                                    type: 'input-text'
+                                }
+                            ]
+                        },
+                        AMisCodeEditor.getSchemaTpl('status')
+                    ])
+                },
+                {
+                    title: '外观',
+                    body: [
+                        AMisCodeEditor.getSchemaTpl('collapseGroup', tslib.__spreadArray([
+                            {
+                                title: '基本',
+                                body: [
+                                    {
+                                        name: 'width',
+                                        label: BaseControl.tipedLabel('宽度', '默认宽度为父容器宽度，值单位默认为 px，也支持百分比等单位 ，如：100%'),
+                                        type: 'input-text',
+                                        pipeIn: AMisCodeEditor.defaultValue('100%'),
+                                        pipeOut: AMisCodeEditor.valuePipeOut
+                                    },
+                                    {
+                                        name: 'height',
+                                        label: BaseControl.tipedLabel('高度', '默认高度为父容器高度，值单位默认为 px，也支持百分比等单位 ，如：100%'),
+                                        type: 'input-text',
+                                        pipeOut: AMisCodeEditor.valuePipeOut
+                                    }
+                                ]
+                            },
+                            AMisCodeEditor.getSchemaTpl('style:classNames', {
+                                isFormItem: false
+                            })
+                        ], AMisCodeEditor.getSchemaTpl('style:common', [], 'border'), true))
+                    ]
+                }
+            ]);
+        };
+        return _this;
+    }
+    IFramePlugin.prototype.renderRenderer = function (props) {
+        return this.renderPlaceholder("IFrame \u9875\u9762\uFF08".concat(props.src, "\uFF09"));
+    };
+    return IFramePlugin;
+}(AMisCodeEditor.BasePlugin));
+AMisCodeEditor.registerEditorPlugin(IFramePlugin);
+
+exports.IFramePlugin = IFramePlugin;

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

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

package/lib/plugin/Image.js

@@ -0,0 +1,264 @@
+/**
+ * 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 ImagePlugin = /** @class */ (function (_super) {
+    tslib.__extends(ImagePlugin, _super);
+    function ImagePlugin() {
+        var _this = _super !== null && _super.apply(this, arguments) || this;
+        // 关联渲染器名字
+        _this.rendererName = 'image';
+        _this.$schema = '/schemas/ImageSchema.json';
+        // 组件名称
+        _this.name = '图片展示';
+        _this.isBaseComponent = true;
+        _this.description = '可以用来展示一张图片，支持静态设置图片地址，也可以配置 <code>name</code> 与变量关联。';
+        _this.tags = ['展示'];
+        _this.icon = 'fa fa-photo';
+        _this.scaffold = {
+            type: 'image'
+        };
+        _this.previewSchema = tslib.__assign(tslib.__assign({}, _this.scaffold), { thumbMode: 'cover', value: AMisCodeEditor.mockValue({ type: 'image' }) });
+        _this.panelTitle = '图片';
+        _this.panelBodyCreator = function (context) {
+            var isUnderField = /\/field\/\w+$/.test(context.path);
+            return [
+                AMisCodeEditor.getSchemaTpl('tabs', [
+                    {
+                        title: '常规',
+                        body: [
+                            {
+                                name: 'imageMode',
+                                label: '展示模式',
+                                type: 'select',
+                                pipeIn: AMisCodeEditor.defaultValue('thumb'),
+                                options: [
+                                    {
+                                        label: '缩率图',
+                                        value: 'thumb'
+                                    },
+                                    {
+                                        label: '原图',
+                                        value: 'original'
+                                    }
+                                ]
+                            },
+                            {
+                                name: 'title',
+                                type: 'input-text',
+                                label: '图片标题'
+                            },
+                            {
+                                name: 'imageCaption',
+                                type: 'input-text',
+                                label: '图片描述'
+                            },
+                            {
+                                name: 'width',
+                                label: '宽度',
+                                type: 'input-number'
+                            },
+                            {
+                                name: 'height',
+                                label: '高度',
+                                type: 'input-number'
+                            },
+                            isUnderField
+                                ? null
+                                : AMisCodeEditor.getSchemaTpl('imageUrl', {
+                                    name: 'src',
+                                    type: 'input-text',
+                                    label: '缩略图地址',
+                                    description: '如果已绑定字段名，可以不用设置，支持用变量。'
+                                }),
+                            {
+                                type: 'input-text',
+                                label: '打开外部链接',
+                                name: 'href'
+                            },
+                            AMisCodeEditor.getSchemaTpl('imageUrl', {
+                                name: 'defaultImage',
+                                label: '无数据时显示的图片'
+                            })
+                        ]
+                    },
+                    {
+                        title: '外观',
+                        body: [
+                            AMisCodeEditor.getSchemaTpl('switch', {
+                                name: 'enlargeAble',
+                                label: '开启图片放大功能'
+                            }),
+                            AMisCodeEditor.getSchemaTpl('imageUrl', {
+                                name: 'originalSrc',
+                                visibleOn: 'this.enlargeAble',
+                                label: '原图地址',
+                                description: '如果不配置将默认使用缩略图地址。'
+                            }),
+                            AMisCodeEditor.getSchemaTpl('switch', {
+                                name: 'showDimensions',
+                                label: '是否显示图片尺寸'
+                            }),
+                            {
+                                name: 'thumbMode',
+                                type: 'button-group-select',
+                                label: '缩略图展示模式',
+                                size: 'sm',
+                                pipeIn: AMisCodeEditor.defaultValue('contain'),
+                                options: [
+                                    {
+                                        label: '宽度占满',
+                                        value: 'w-full'
+                                    },
+                                    {
+                                        label: '高度占满',
+                                        value: 'h-full'
+                                    },
+                                    {
+                                        label: '包含',
+                                        value: 'contain'
+                                    },
+                                    {
+                                        label: '铺满',
+                                        value: 'cover'
+                                    }
+                                ]
+                            },
+                            {
+                                name: 'thumbRatio',
+                                type: 'button-group-select',
+                                label: '缩略图比率',
+                                size: 'sm',
+                                pipeIn: AMisCodeEditor.defaultValue('1:1'),
+                                options: [
+                                    {
+                                        label: '1:1',
+                                        value: '1:1'
+                                    },
+                                    {
+                                        label: '4:3',
+                                        value: '4:3'
+                                    },
+                                    {
+                                        label: '16:9',
+                                        value: '16:9'
+                                    }
+                                ]
+                            },
+                            AMisCodeEditor.getSchemaTpl('className', {
+                                autoComplete: false
+                            }),
+                            AMisCodeEditor.getSchemaTpl('className', {
+                                name: 'imageClassName',
+                                label: '图片 CSS 类名'
+                            }),
+                            AMisCodeEditor.getSchemaTpl('className', {
+                                name: 'thumbClassName',
+                                label: '缩略图 CSS 类名'
+                            })
+                        ]
+                    },
+                    {
+                        title: '显隐',
+                        body: [
+                            // getSchemaTpl('ref'),
+                            AMisCodeEditor.getSchemaTpl('visible')
+                        ]
+                    }
+                ])
+            ];
+        };
+        return _this;
+    }
+    ImagePlugin.prototype.onActive = function (event) {
+        var _a;
+        var context = event.context;
+        if (((_a = context.info) === null || _a === void 0 ? void 0 : _a.plugin) !== this || !context.node) {
+            return;
+        }
+        var node = context.node;
+        node.setHeightMutable(true);
+        node.setWidthMutable(true);
+    };
+    ImagePlugin.prototype.onWidthChangeStart = function (event) {
+        return this.onSizeChangeStart(event, 'horizontal');
+    };
+    ImagePlugin.prototype.onHeightChangeStart = function (event) {
+        return this.onSizeChangeStart(event, 'vertical');
+    };
+    ImagePlugin.prototype.onSizeChangeStart = function (event, direction) {
+        var _a;
+        if (direction === void 0) { direction = 'both'; }
+        var context = event.context;
+        var node = context.node;
+        if (((_a = node.info) === null || _a === void 0 ? void 0 : _a.plugin) !== this) {
+            return;
+        }
+        var resizer = context.resizer;
+        var dom = context.dom;
+        var frameRect = dom.parentElement.getBoundingClientRect();
+        var rect = dom.getBoundingClientRect();
+        var startX = context.nativeEvent.pageX;
+        var startY = context.nativeEvent.pageY;
+        event.setData({
+            onMove: function (e) {
+                var dy = e.pageY - startY;
+                var dx = e.pageX - startX;
+                var height = Math.max(50, rect.height + dy);
+                var width = Math.max(100, Math.min(rect.width + dx, frameRect.width));
+                var state = {
+                    width: width,
+                    height: height
+                };
+                if (direction === 'both') {
+                    resizer.setAttribute('data-value', "".concat(width, "px x ").concat(height, "px"));
+                }
+                else if (direction === 'vertical') {
+                    resizer.setAttribute('data-value', "".concat(height, "px"));
+                    delete state.width;
+                }
+                else {
+                    resizer.setAttribute('data-value', "".concat(width, "px"));
+                    delete state.height;
+                }
+                node.updateState(state);
+                requestAnimationFrame(function () {
+                    node.calculateHighlightBox();
+                });
+            },
+            onEnd: function (e) {
+                var dy = e.pageY - startY;
+                var dx = e.pageX - startX;
+                var height = Math.max(50, rect.height + dy);
+                var width = Math.max(100, Math.min(rect.width + dx, frameRect.width));
+                var state = {
+                    width: width,
+                    height: height
+                };
+                if (direction === 'vertical') {
+                    delete state.width;
+                }
+                else if (direction === 'horizontal') {
+                    delete state.height;
+                }
+                resizer.removeAttribute('data-value');
+                node.updateSchema(state);
+                requestAnimationFrame(function () {
+                    node.calculateHighlightBox();
+                });
+            }
+        });
+    };
+    return ImagePlugin;
+}(AMisCodeEditor.BasePlugin));
+AMisCodeEditor.registerEditorPlugin(ImagePlugin);
+
+exports.ImagePlugin = ImagePlugin;

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

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

package/lib/plugin/Images.js

@@ -0,0 +1,214 @@
+/**
+ * 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 ImagesPlugin = /** @class */ (function (_super) {
+    tslib.__extends(ImagesPlugin, _super);
+    function ImagesPlugin() {
+        var _this = _super !== null && _super.apply(this, arguments) || this;
+        // 关联渲染器名字
+        _this.rendererName = 'images';
+        _this.$schema = '/schemas/ImagesSchema.json';
+        // 组件名称
+        _this.name = '图片集';
+        _this.isBaseComponent = true;
+        _this.description = '展示多张图片';
+        _this.tags = ['展示'];
+        _this.icon = 'fa fa-clone';
+        _this.scaffold = {
+            type: 'images'
+        };
+        _this.previewSchema = tslib.__assign(tslib.__assign({}, _this.scaffold), { listClassName: 'nowrap', thumbMode: 'cover', value: [
+                {
+                    title: '图片1',
+                    image: AMisCodeEditor.mockValue({ type: 'image' }),
+                    src: AMisCodeEditor.mockValue({ type: 'image' })
+                },
+                {
+                    title: '图片2',
+                    image: AMisCodeEditor.mockValue({ type: 'image' }),
+                    src: AMisCodeEditor.mockValue({ type: 'image' })
+                }
+            ] });
+        _this.panelTitle = '图片集';
+        _this.panelBodyCreator = function (context) {
+            var isUnderField = /\/field\/\w+$/.test(context.path);
+            return [
+                AMisCodeEditor.getSchemaTpl('tabs', [
+                    {
+                        title: '常规',
+                        body: (isUnderField
+                            ? []
+                            : [
+                                {
+                                    type: 'formula',
+                                    name: '__mode',
+                                    autoSet: false,
+                                    formula: '!this.name && !this.source && Array.isArray(this.options) ? 2 : 1'
+                                },
+                                {
+                                    label: '数据源',
+                                    name: '__mode',
+                                    type: 'button-group-select',
+                                    size: 'xs',
+                                    mode: 'inline',
+                                    className: 'w-full',
+                                    options: [
+                                        {
+                                            label: '关联字段',
+                                            value: 1
+                                        },
+                                        {
+                                            label: '静态设置',
+                                            value: 2
+                                        }
+                                    ],
+                                    onChange: function (value, oldValue, model, form) {
+                                        if (value !== oldValue && value == 1) {
+                                            form.deleteValueByName('options');
+                                        }
+                                    }
+                                },
+                                {
+                                    name: 'source',
+                                    type: 'input-text',
+                                    label: '关联数据',
+                                    description: '比如：\\${listVar}，用来关联作用域中的已有数据。',
+                                    visibleOn: 'this.__mode == 1'
+                                },
+                                {
+                                    type: 'combo',
+                                    name: 'options',
+                                    visibleOn: 'this.__mode == 2',
+                                    minLength: 1,
+                                    label: '图片集数据',
+                                    multiple: true,
+                                    multiLine: true,
+                                    addable: true,
+                                    removable: true,
+                                    items: [
+                                        AMisCodeEditor.getSchemaTpl('imageUrl', {
+                                            name: 'image',
+                                            label: '缩略图'
+                                        }),
+                                        AMisCodeEditor.getSchemaTpl('imageUrl', {
+                                            name: 'src',
+                                            label: '原图'
+                                        }),
+                                        {
+                                            type: 'input-text',
+                                            label: '图片标题',
+                                            name: 'title'
+                                        },
+                                        {
+                                            type: 'textarea',
+                                            label: '图片描述',
+                                            name: 'caption'
+                                        }
+                                    ]
+                                }
+                            ]).concat([
+                            AMisCodeEditor.getSchemaTpl('imageUrl', {
+                                name: 'defaultImage',
+                                label: '无数据时显示的图片'
+                            })
+                        ])
+                    },
+                    {
+                        title: '外观',
+                        body: [
+                            AMisCodeEditor.getSchemaTpl('switch', {
+                                name: 'enlargeAble',
+                                label: '开启图片放大功能'
+                            }),
+                            {
+                                name: 'originalSrc',
+                                visibleOn: 'this.enlargeAble',
+                                type: 'input-text',
+                                label: '原图地址',
+                                description: '如果不配置将默认使用缩略图地址。'
+                            },
+                            AMisCodeEditor.getSchemaTpl('switch', {
+                                name: 'showDimensions',
+                                label: '是否显示图片尺寸'
+                            }),
+                            {
+                                name: 'thumbMode',
+                                type: 'button-group-select',
+                                label: '缩略图展示模式',
+                                size: 'sm',
+                                pipeIn: AMisCodeEditor.defaultValue('contain'),
+                                options: [
+                                    {
+                                        label: '宽度占满',
+                                        value: 'w-full'
+                                    },
+                                    {
+                                        label: '高度占满',
+                                        value: 'h-full'
+                                    },
+                                    {
+                                        label: '包含',
+                                        value: 'contain'
+                                    },
+                                    {
+                                        label: '铺满',
+                                        value: 'cover'
+                                    }
+                                ]
+                            },
+                            {
+                                name: 'thumbRatio',
+                                type: 'button-group-select',
+                                label: '缩略图比率',
+                                size: 'sm',
+                                pipeIn: AMisCodeEditor.defaultValue('1:1'),
+                                options: [
+                                    {
+                                        label: '1:1',
+                                        value: '1:1'
+                                    },
+                                    {
+                                        label: '4:3',
+                                        value: '4:3'
+                                    },
+                                    {
+                                        label: '16:9',
+                                        value: '16:9'
+                                    }
+                                ]
+                            },
+                            AMisCodeEditor.getSchemaTpl('className', {
+                                autoComplete: false
+                            }),
+                            AMisCodeEditor.getSchemaTpl('className', {
+                                name: 'listClassName',
+                                label: '图片列表 CSS 类名'
+                            })
+                        ]
+                    },
+                    {
+                        title: '显隐',
+                        body: [
+                            // getSchemaTpl('ref'),
+                            AMisCodeEditor.getSchemaTpl('visible')
+                        ]
+                    }
+                ])
+            ];
+        };
+        return _this;
+    }
+    return ImagesPlugin;
+}(AMisCodeEditor.BasePlugin));
+AMisCodeEditor.registerEditorPlugin(ImagesPlugin);
+
+exports.ImagesPlugin = ImagesPlugin;

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

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

package/lib/plugin/Json.js

@@ -0,0 +1,82 @@
+/**
+ * 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 flatten = require('lodash/flatten');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var flatten__default = /*#__PURE__*/_interopDefaultLegacy(flatten);
+
+var JsonPlugin = /** @class */ (function (_super) {
+    tslib.__extends(JsonPlugin, _super);
+    function JsonPlugin() {
+        var _this = _super !== null && _super.apply(this, arguments) || this;
+        // 关联渲染器名字
+        _this.rendererName = 'json';
+        _this.$schema = '/schemas/JsonSchema.json';
+        // 组件名称
+        _this.name = 'JSON展示';
+        _this.isBaseComponent = true;
+        _this.description = '用来展示 JSON 数据。';
+        _this.docLink = '/amis/zh-CN/components/json';
+        _this.tags = ['展示'];
+        _this.icon = 'fa fa-code';
+        _this.scaffold = {
+            type: 'json'
+        };
+        _this.previewSchema = tslib.__assign(tslib.__assign({}, _this.scaffold), { name: 'json', value: {
+                a: 1,
+                b: {
+                    c: 2
+                }
+            } });
+        _this.panelTitle = 'JSON';
+        _this.panelBodyCreator = function (context) {
+            var isUnderField = /\/field\/\w+$/.test(context.path);
+            return [
+                AMisCodeEditor.getSchemaTpl('tabs', [
+                    {
+                        title: '常规',
+                        body: flatten__default["default"]([
+                            isUnderField
+                                ? {
+                                    type: 'tpl',
+                                    inline: false,
+                                    className: 'text-info text-sm',
+                                    tpl: '<p>当前为字段内容节点配置，选择上层还有更多的配置。</p>'
+                                }
+                                : null,
+                            {
+                                name: 'levelExpand',
+                                type: 'input-number',
+                                label: '默认展开级别',
+                                pipeIn: AMisCodeEditor.defaultValue(1)
+                            }
+                        ])
+                    },
+                    {
+                        title: '外观',
+                        body: flatten__default["default"]([AMisCodeEditor.getSchemaTpl('className')])
+                    },
+                    {
+                        title: '显隐',
+                        body: flatten__default["default"]([AMisCodeEditor.getSchemaTpl('ref'), AMisCodeEditor.getSchemaTpl('visible')])
+                    }
+                ])
+            ];
+        };
+        return _this;
+    }
+    return JsonPlugin;
+}(AMisCodeEditor.BasePlugin));
+AMisCodeEditor.registerEditorPlugin(JsonPlugin);
+
+exports.JsonPlugin = JsonPlugin;