amis-editor 5.2.0-beta.1 → 5.2.0-beta.2

package/lib/plugin/Image.js

@@ -1,5 +1,5 @@
 /**
- * amis-editor v5.2.0-beta.1
+ * amis-editor v5.2.0-beta.2
  * Copyright 2018-2022 @fex
  */
 
@@ -8,257 +8,245 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var tslib = require('tslib');
-var AMisCodeEditor = require('amis-editor-core');
+var amisEditorCore = require('amis-editor-core');
+var i18nRuntime = require('i18n-runtime');
 
-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');
+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 = i18nRuntime.i18n("67997ccf7ea846c3c2d278b01ed9600b");
+    _this.isBaseComponent = true;
+    _this.description = i18nRuntime.i18n("6dcf991e992a0b765df0933411fe9bb2");
+    _this.tags = [i18nRuntime.i18n("027446c2f9070b0f5b16a18208bf5fc7")];
+    _this.icon = 'fa fa-photo';
+    _this.pluginIcon = 'image-plugin';
+    _this.scaffold = {
+      type: 'image'
     };
-    ImagePlugin.prototype.onHeightChangeStart = function (event) {
-        return this.onSizeChangeStart(event, 'vertical');
+    _this.previewSchema = tslib.__assign(tslib.__assign({}, _this.scaffold), {
+      thumbMode: 'cover',
+      value: amisEditorCore.mockValue({
+        type: 'image'
+      })
+    });
+    _this.panelTitle = i18nRuntime.i18n("20def7942674282277c3714ed7ea6ce0");
+
+    _this.panelBodyCreator = function (context) {
+      var isUnderField = /\/field\/\w+$/.test(context.path);
+      return [amisEditorCore.getSchemaTpl('tabs', [{
+        title: i18nRuntime.i18n("22b777e6fcb613b8ba83ced9594cd07e"),
+        body: [{
+          name: 'imageMode',
+          label: i18nRuntime.i18n("1fdadb49bcabfdc36a4a9e020f597f4d"),
+          type: 'select',
+          pipeIn: amisEditorCore.defaultValue('thumb'),
+          options: [{
+            label: i18nRuntime.i18n("e18aa5e376437da71083a29c4cddaf46"),
+            value: 'thumb'
+          }, {
+            label: i18nRuntime.i18n("fb43d5ffa21f3c4055c29fad350f27e4"),
+            value: 'original'
+          }]
+        }, {
+          name: 'title',
+          type: 'input-text',
+          label: i18nRuntime.i18n("c6c7456d446d62a906c2809b6ba19ce1")
+        }, {
+          name: 'imageCaption',
+          type: 'input-text',
+          label: i18nRuntime.i18n("098c3d959911b48b4d912cb85ccc4942")
+        }, {
+          name: 'width',
+          label: i18nRuntime.i18n("c28479019e24e0e4745f4948e9e97ee7"),
+          type: 'input-number'
+        }, {
+          name: 'height',
+          label: i18nRuntime.i18n("c1df04eec5fa0857bc0df2d68d8e953c"),
+          type: 'input-number'
+        }, isUnderField ? null : amisEditorCore.getSchemaTpl('imageUrl', {
+          name: 'src',
+          type: 'input-text',
+          label: i18nRuntime.i18n("582570bef8c57c5af7658c4a4eea45ff"),
+          description: i18nRuntime.i18n("1193e1aab7bea094279ae7b4288ba848")
+        }), {
+          type: 'input-text',
+          label: i18nRuntime.i18n("a3f38735bf211edb2066ac4e51b55cb2"),
+          name: 'href'
+        }, amisEditorCore.getSchemaTpl('imageUrl', {
+          name: 'defaultImage',
+          label: i18nRuntime.i18n("f5865bf2d791d293374af4aa76d27c4d")
+        })]
+      }, {
+        title: i18nRuntime.i18n("afcde2611bdd13c1e65b4fb6a2f13425"),
+        body: [amisEditorCore.getSchemaTpl('switch', {
+          name: 'enlargeAble',
+          label: i18nRuntime.i18n("e1110b854bceeed0e887cb951bb3d2f3")
+        }), amisEditorCore.getSchemaTpl('imageUrl', {
+          name: 'originalSrc',
+          visibleOn: 'this.enlargeAble',
+          label: i18nRuntime.i18n("7ffade593e390a2a2cc43e6663461b71"),
+          description: i18nRuntime.i18n("214953c5f7557b1a5f1310c87238ee03")
+        }), amisEditorCore.getSchemaTpl('switch', {
+          name: 'showDimensions',
+          label: i18nRuntime.i18n("6d45b56ee94ea873a554ec41b9f2074a")
+        }), {
+          name: 'thumbMode',
+          type: 'button-group-select',
+          label: i18nRuntime.i18n("00cedb73310cc531a43d23cfa5ba0e5f"),
+          size: 'sm',
+          pipeIn: amisEditorCore.defaultValue('contain'),
+          options: [{
+            label: i18nRuntime.i18n("b0267f4aa776e75443b7ef6e8dad257e"),
+            value: 'w-full'
+          }, {
+            label: i18nRuntime.i18n("c30b1b6f29debb05449aa3cb40268e7e"),
+            value: 'h-full'
+          }, {
+            label: i18nRuntime.i18n("e13556bb3580ac3746e1f8663eb15896"),
+            value: 'contain'
+          }, {
+            label: i18nRuntime.i18n("47303119ba97a66d168ff042575b9de4"),
+            value: 'cover'
+          }]
+        }, {
+          name: 'thumbRatio',
+          type: 'button-group-select',
+          label: i18nRuntime.i18n("319501b9acacdd6f94a9bdd0637a3cd2"),
+          size: 'sm',
+          pipeIn: amisEditorCore.defaultValue('1:1'),
+          options: [{
+            label: '1:1',
+            value: '1:1'
+          }, {
+            label: '4:3',
+            value: '4:3'
+          }, {
+            label: '16:9',
+            value: '16:9'
+          }]
+        }, amisEditorCore.getSchemaTpl('className', {
+          autoComplete: false
+        }), amisEditorCore.getSchemaTpl('className', {
+          name: 'imageClassName',
+          label: i18nRuntime.i18n("b8e1e46cbdea20de4e5fc130d31b7bcc")
+        }), amisEditorCore.getSchemaTpl('className', {
+          name: 'thumbClassName',
+          label: i18nRuntime.i18n("4d080f1e18d86051b8d651c68685f319")
+        })]
+      }, {
+        title: i18nRuntime.i18n("33bf801796fd255b5f6147e33146669b"),
+        body: [// getSchemaTpl('ref'),
+        amisEditorCore.getSchemaTpl('visible')]
+      }])];
     };
-    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;
+
+    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;
         }
-        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();
-                });
-            }
+
+        node.updateState(state);
+        requestAnimationFrame(function () {
+          node.calculateHighlightBox();
         });
-    };
-    return ImagePlugin;
-}(AMisCodeEditor.BasePlugin));
-AMisCodeEditor.registerEditorPlugin(ImagePlugin);
+      },
+      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;
+}(amisEditorCore.BasePlugin);
+amisEditorCore.registerEditorPlugin(ImagePlugin);
 
 exports.ImagePlugin = ImagePlugin;

package/lib/plugin/Images.d.ts

@@ -7,6 +7,7 @@ export declare class ImagesPlugin extends BasePlugin {
     description: string;
     tags: string[];
     icon: string;
+    pluginIcon: string;
     scaffold: {
         type: string;
     };