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

package/lib/plugin/Carousel.js

@@ -1,5 +1,5 @@
 /**
- * amis-editor v5.2.0-beta.0
+ * amis-editor v5.2.0-beta.2
  * Copyright 2018-2022 @fex
  */
 
@@ -8,351 +8,311 @@
 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 CarouselPlugin = /** @class */ (function (_super) {
-    tslib.__extends(CarouselPlugin, _super);
-    function CarouselPlugin() {
-        var _this = _super !== null && _super.apply(this, arguments) || this;
-        // 关联渲染器名字
-        _this.rendererName = 'carousel';
-        _this.$schema = '/schemas/CarouselSchema.json';
-        // 组件名称
-        _this.name = '轮播图';
-        _this.isBaseComponent = true;
-        _this.description = '用来渲染轮播图，可以配置每一页的内容（不只是图片），可以配置过渡动画。';
-        _this.docLink = '/amis/zh-CN/components/carousel';
-        _this.tags = ['展示'];
-        _this.icon = 'fa fa-images';
-        _this.scaffold = {
-            type: 'carousel',
-            options: [
-                {
-                    image: AMisCodeEditor.mockValue({ type: 'image' })
-                },
-                {
-                    html: '<div style="width: 100%; height: 300px; background: #e3e3e3; text-align: center; line-height: 300px;">carousel data</div>'
-                },
-                {
-                    image: AMisCodeEditor.mockValue({ type: 'image' })
-                }
-            ]
-        };
-        _this.previewSchema = tslib.__assign({}, _this.scaffold);
-        _this.panelTitle = '轮播图';
-        _this.panelBodyCreator = function (context) {
-            var isUnderField = /\/field\/\w+$/.test(context.path);
-            return [
-                AMisCodeEditor.getSchemaTpl('tabs', [
-                    {
-                        title: '常规',
-                        body: [
-                            isUnderField
-                                ? {
-                                    type: 'tpl',
-                                    inline: false,
-                                    className: 'text-info text-sm',
-                                    tpl: '<p>当前为字段内容节点配置，选择上层还有更多的配置。</p>'
-                                }
-                                : null,
-                            {
-                                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
-                                    }
-                                ]
-                            },
-                            {
-                                label: '字段名',
-                                name: 'name',
-                                type: 'input-text',
-                                description: '设置字段名，关联当前数据作用域中的数据。',
-                                visibleOn: 'this.__mode == 1'
-                            },
-                            {
-                                type: 'combo',
-                                name: 'options',
-                                visibleOn: 'this.__mode == 2',
-                                label: '轮播选项内容',
-                                multiple: true,
-                                multiLine: true,
-                                addable: true,
-                                removable: true,
-                                typeSwitchable: false,
-                                conditions: [
-                                    {
-                                        label: '图片',
-                                        test: 'this.type === "image"',
-                                        items: [
-                                            AMisCodeEditor.getSchemaTpl('imageUrl', {
-                                                name: 'content'
-                                            }),
-                                            {
-                                                type: 'input-text',
-                                                label: '图片标题',
-                                                name: 'title',
-                                                visibleOn: 'this.type == "image"'
-                                            },
-                                            AMisCodeEditor.getSchemaTpl('className', {
-                                                label: '图片标题类名',
-                                                name: 'titleClassName',
-                                                visibleOn: 'this.type == "image"'
-                                            }),
-                                            {
-                                                type: 'textarea',
-                                                label: '图片描述',
-                                                name: 'description',
-                                                visibleOn: 'this.type == "image"'
-                                            },
-                                            AMisCodeEditor.getSchemaTpl('className', {
-                                                label: '图片描述类名',
-                                                name: 'descriptionClassName',
-                                                visibleOn: 'this.type == "image"'
-                                            }),
-                                            {
-                                                type: 'input-text',
-                                                label: '打开外部链接',
-                                                name: 'href',
-                                                visibleOn: 'this.type == "image"'
-                                            }
-                                        ],
-                                        scaffold: {
-                                            type: 'input-image',
-                                            image: ''
-                                        }
-                                    },
-                                    {
-                                        label: 'HTML',
-                                        test: 'this.type === "html"',
-                                        items: [
-                                            AMisCodeEditor.getSchemaTpl('richText', {
-                                                label: '内容',
-                                                name: 'content'
-                                            })
-                                        ],
-                                        scaffold: {
-                                            type: 'html',
-                                            content: '<p>html 片段</p>'
-                                        }
-                                    }
-                                ],
-                                pipeIn: function (value) {
-                                    return Array.isArray(value) && value.length
-                                        ? value.map(function (item) {
-                                            return item && item.hasOwnProperty('html')
-                                                ? {
-                                                    type: 'html',
-                                                    content: item.html
-                                                }
-                                                : {
-                                                    type: 'image',
-                                                    content: item.image,
-                                                    title: item.title,
-                                                    titleClassName: item.titleClassName,
-                                                    description: item.description,
-                                                    descriptionClassName: item.descriptionClassName
-                                                };
-                                        })
-                                        : [];
-                                },
-                                pipeOut: function (value, originValue, data) {
-                                    return Array.isArray(value) && value.length
-                                        ? value.map(function (item) {
-                                            return item.type === 'html'
-                                                ? {
-                                                    html: item.content
-                                                }
-                                                : {
-                                                    image: item.content,
-                                                    title: item.title,
-                                                    titleClassName: item.titleClassName,
-                                                    description: item.description,
-                                                    descriptionClassName: item.descriptionClassName
-                                                };
-                                        })
-                                        : [];
-                                }
-                            }
-                        ]
-                    },
-                    {
-                        title: '外观',
-                        body: [
-                            {
-                                name: 'auto',
-                                type: 'switch',
-                                mode: 'inline',
-                                className: 'w-full',
-                                label: '自动轮播',
-                                pipeIn: AMisCodeEditor.defaultValue(true)
-                            },
-                            {
-                                name: 'interval',
-                                type: 'input-range',
-                                label: '动画间隔',
-                                min: 1,
-                                max: 100,
-                                step: 1,
-                                unit: 's',
-                                pipeIn: function (value) { return (value !== null && value !== void 0 ? value : 3000) / 1000; },
-                                pipeOut: function (value, originValue, data) { return value * 1000; }
-                            },
-                            {
-                                name: 'duration',
-                                type: 'input-range',
-                                label: '动画时长',
-                                min: 100,
-                                max: 2000,
-                                step: 10,
-                                pipeIn: AMisCodeEditor.defaultValue(500),
-                                unit: 'ms'
-                            },
-                            {
-                                name: 'animation',
-                                label: '动画效果',
-                                type: 'button-group-select',
-                                mode: 'inline',
-                                className: 'w-full',
-                                size: 'sm',
-                                pipeIn: AMisCodeEditor.defaultValue('fade'),
-                                options: [
-                                    {
-                                        label: 'fade',
-                                        value: 'fade'
-                                    },
-                                    {
-                                        label: 'slide',
-                                        value: 'slide'
-                                    }
-                                ]
-                            },
-                            {
-                                name: 'controlsTheme',
-                                label: '控制按钮主题',
-                                type: 'button-group-select',
-                                size: 'sm',
-                                pipeIn: AMisCodeEditor.defaultValue('light'),
-                                mode: 'inline',
-                                className: 'w-full',
-                                options: [
-                                    {
-                                        label: 'light',
-                                        value: 'light'
-                                    },
-                                    {
-                                        label: 'dark',
-                                        value: 'dark'
-                                    }
-                                ]
-                            },
-                            {
-                                name: 'controls',
-                                label: '控制显示',
-                                type: 'button-group-select',
-                                size: 'sm',
-                                mode: 'inline',
-                                className: 'w-full',
-                                pipeIn: AMisCodeEditor.defaultValue('dots,arrows'),
-                                multiple: true,
-                                options: [
-                                    {
-                                        label: '底部圆点',
-                                        value: 'dots'
-                                    },
-                                    {
-                                        label: '左右箭头',
-                                        value: 'arrows'
-                                    }
-                                ]
-                            },
-                            {
-                                name: 'width',
-                                type: 'input-text',
-                                label: '宽度',
-                                validations: 'isNumeric',
-                                addOn: {
-                                    type: 'button',
-                                    label: 'px'
-                                }
-                            },
-                            {
-                                name: 'height',
-                                type: 'input-text',
-                                label: '高度',
-                                validations: 'isNumeric',
-                                addOn: {
-                                    type: 'button',
-                                    label: 'px'
-                                }
-                            },
-                            AMisCodeEditor.getSchemaTpl('className')
-                        ]
-                    },
-                    {
-                        title: '显隐',
-                        body: [AMisCodeEditor.getSchemaTpl('ref'), AMisCodeEditor.getSchemaTpl('visible')]
-                    }
-                ])
-            ];
-        };
-        return _this;
-    }
-    CarouselPlugin.prototype.filterProps = function (props) {
-        // 编辑的时候别自动轮播，影响编辑
-        props.auto = false;
-        return props;
+var CarouselPlugin =
+/** @class */
+function (_super) {
+  tslib.__extends(CarouselPlugin, _super);
+
+  function CarouselPlugin() {
+    var _this = _super !== null && _super.apply(this, arguments) || this; // 关联渲染器名字
+
+
+    _this.rendererName = 'carousel';
+    _this.$schema = '/schemas/CarouselSchema.json'; // 组件名称
+
+    _this.name = i18nRuntime.i18n("0c0180cb06a322199a67f10d4ec41cd5");
+    _this.isBaseComponent = true;
+    _this.description = i18nRuntime.i18n("1007c97dbf952e032ce13be3cb811f23");
+    _this.docLink = '/amis/zh-CN/components/carousel';
+    _this.tags = [i18nRuntime.i18n("027446c2f9070b0f5b16a18208bf5fc7")];
+    _this.icon = 'fa fa-images';
+    _this.pluginIcon = 'carousel-plugin';
+    _this.scaffold = {
+      type: 'carousel',
+      options: [{
+        image: amisEditorCore.mockValue({
+          type: 'image'
+        })
+      }, {
+        html: '<div style="width: 100%; height: 300px; background: #e3e3e3; text-align: center; line-height: 300px;">carousel data</div>'
+      }, {
+        image: amisEditorCore.mockValue({
+          type: 'image'
+        })
+      }]
     };
-    /**
-     * 补充切换的 toolbar
-     * @param context
-     * @param toolbars
-     */
-    CarouselPlugin.prototype.buildEditorToolbar = function (context, toolbars) {
-        if (context.info.plugin === this &&
-            context.info.renderer.name === 'carousel' &&
-            !context.info.hostId) {
-            var node_1 = context.node;
-            toolbars.push({
-                level: 'secondary',
-                icon: 'fa fa-chevron-left',
-                tooltip: '上个卡片',
-                onClick: function () {
-                    var _a;
-                    var control = node_1.getComponent();
-                    (_a = control === null || control === void 0 ? void 0 : control.prev) === null || _a === void 0 ? void 0 : _a.call(control);
-                }
-            });
-            toolbars.push({
-                level: 'secondary',
-                icon: 'fa fa-chevron-right',
-                tooltip: '下个卡片',
-                onClick: function () {
-                    var _a;
-                    var control = node_1.getComponent();
-                    (_a = control === null || control === void 0 ? void 0 : control.next) === null || _a === void 0 ? void 0 : _a.call(control);
-                }
-            });
-        }
+    _this.previewSchema = tslib.__assign({}, _this.scaffold);
+    _this.panelTitle = i18nRuntime.i18n("0c0180cb06a322199a67f10d4ec41cd5");
+
+    _this.panelBodyCreator = function (context) {
+      var isUnderField = /\/field\/\w+$/.test(context.path);
+      return [amisEditorCore.getSchemaTpl('tabs', [{
+        title: i18nRuntime.i18n("22b777e6fcb613b8ba83ced9594cd07e"),
+        body: [isUnderField ? {
+          type: 'tpl',
+          inline: false,
+          className: 'text-info text-sm',
+          tpl: i18nRuntime.i18n("37b12f2666b9e4e37f33eb5e83533d5e")
+        } : null, {
+          type: 'formula',
+          name: '__mode',
+          autoSet: false,
+          formula: '!this.name && !this.source && Array.isArray(this.options) ? 2 : 1'
+        }, {
+          label: i18nRuntime.i18n("c11322c9cc43ce3c004cf03f5ac0acd0"),
+          name: '__mode',
+          type: 'button-group-select',
+          size: 'xs',
+          mode: 'inline',
+          className: 'w-full',
+          options: [{
+            label: i18nRuntime.i18n("0a2907a421b8f980986117e4f3044f92"),
+            value: 1
+          }, {
+            label: i18nRuntime.i18n("e760ec18028fc075c5705bf184589e70"),
+            value: 2
+          }]
+        }, {
+          label: i18nRuntime.i18n("d314558953b3c76adb7e131aaec8bd86"),
+          name: 'name',
+          type: 'input-text',
+          description: i18nRuntime.i18n("793a763e73f1f742e3a16ddc2ed95ccb"),
+          visibleOn: 'this.__mode == 1'
+        }, {
+          type: 'combo',
+          name: 'options',
+          visibleOn: 'this.__mode == 2',
+          label: i18nRuntime.i18n("b9994cc749b4cfbbac0a9b140addd242"),
+          multiple: true,
+          multiLine: true,
+          addable: true,
+          removable: true,
+          typeSwitchable: false,
+          conditions: [{
+            label: i18nRuntime.i18n("20def7942674282277c3714ed7ea6ce0"),
+            test: 'this.type === "image"',
+            items: [amisEditorCore.getSchemaTpl('imageUrl', {
+              name: 'content'
+            }), {
+              type: 'input-text',
+              label: i18nRuntime.i18n("c6c7456d446d62a906c2809b6ba19ce1"),
+              name: 'title',
+              visibleOn: 'this.type == "image"'
+            }, amisEditorCore.getSchemaTpl('className', {
+              label: i18nRuntime.i18n("ab8a46ccf46acbf82d020d11468291b1"),
+              name: 'titleClassName',
+              visibleOn: 'this.type == "image"'
+            }), {
+              type: 'textarea',
+              label: i18nRuntime.i18n("098c3d959911b48b4d912cb85ccc4942"),
+              name: 'description',
+              visibleOn: 'this.type == "image"'
+            }, amisEditorCore.getSchemaTpl('className', {
+              label: i18nRuntime.i18n("c6fc4066471664a8602c636cfe1cc766"),
+              name: 'descriptionClassName',
+              visibleOn: 'this.type == "image"'
+            }), {
+              type: 'input-text',
+              label: i18nRuntime.i18n("a3f38735bf211edb2066ac4e51b55cb2"),
+              name: 'href',
+              visibleOn: 'this.type == "image"'
+            }],
+            scaffold: {
+              type: 'input-image',
+              image: ''
+            }
+          }, {
+            label: 'HTML',
+            test: 'this.type === "html"',
+            items: [amisEditorCore.getSchemaTpl('richText', {
+              label: i18nRuntime.i18n("2d711b09bd0db0ad240cc83b30dd8014"),
+              name: 'content'
+            })],
+            scaffold: {
+              type: 'html',
+              content: i18nRuntime.i18n("cfb6f6e4c92a61ed0e0717abc8d0eec7")
+            }
+          }],
+          pipeIn: function (value) {
+            return Array.isArray(value) && value.length ? value.map(function (item) {
+              return item && item.hasOwnProperty('html') ? {
+                type: 'html',
+                content: item.html
+              } : {
+                type: 'image',
+                content: item.image,
+                title: item.title,
+                titleClassName: item.titleClassName,
+                description: item.description,
+                descriptionClassName: item.descriptionClassName
+              };
+            }) : [];
+          },
+          pipeOut: function (value, originValue, data) {
+            return Array.isArray(value) && value.length ? value.map(function (item) {
+              return item.type === 'html' ? {
+                html: item.content
+              } : {
+                image: item.content,
+                title: item.title,
+                titleClassName: item.titleClassName,
+                description: item.description,
+                descriptionClassName: item.descriptionClassName
+              };
+            }) : [];
+          }
+        }]
+      }, {
+        title: i18nRuntime.i18n("afcde2611bdd13c1e65b4fb6a2f13425"),
+        body: [{
+          name: 'auto',
+          type: 'switch',
+          mode: 'inline',
+          className: 'w-full',
+          label: i18nRuntime.i18n("97cc997910b99083bd23c6ac39294ff3"),
+          pipeIn: amisEditorCore.defaultValue(true)
+        }, {
+          name: 'interval',
+          type: 'input-range',
+          label: i18nRuntime.i18n("8c2a12c5dee794b8b9608bc1f8087947"),
+          min: 1,
+          max: 100,
+          step: 1,
+          unit: 's',
+          pipeIn: function (value) {
+            return (value !== null && value !== void 0 ? value : 3000) / 1000;
+          },
+          pipeOut: function (value, originValue, data) {
+            return value * 1000;
+          }
+        }, {
+          name: 'duration',
+          type: 'input-range',
+          label: i18nRuntime.i18n("6265104f900789dd51d75b449c3b9f89"),
+          min: 100,
+          max: 2000,
+          step: 10,
+          pipeIn: amisEditorCore.defaultValue(500),
+          unit: 'ms'
+        }, {
+          name: 'animation',
+          label: i18nRuntime.i18n("5bc37c57ee54d407f441b222f02391db"),
+          type: 'button-group-select',
+          mode: 'inline',
+          className: 'w-full',
+          size: 'sm',
+          pipeIn: amisEditorCore.defaultValue('fade'),
+          options: [{
+            label: 'fade',
+            value: 'fade'
+          }, {
+            label: 'slide',
+            value: 'slide'
+          }]
+        }, {
+          name: 'controlsTheme',
+          label: i18nRuntime.i18n("8a0d716ded7baa7ee356ff39c3cf0bec"),
+          type: 'button-group-select',
+          size: 'sm',
+          pipeIn: amisEditorCore.defaultValue('light'),
+          mode: 'inline',
+          className: 'w-full',
+          options: [{
+            label: 'light',
+            value: 'light'
+          }, {
+            label: 'dark',
+            value: 'dark'
+          }]
+        }, {
+          name: 'controls',
+          label: i18nRuntime.i18n("f7471313dce32bc3669d338764a0d036"),
+          type: 'button-group-select',
+          size: 'sm',
+          mode: 'inline',
+          className: 'w-full',
+          pipeIn: amisEditorCore.defaultValue('dots,arrows'),
+          multiple: true,
+          options: [{
+            label: i18nRuntime.i18n("1c0fe943329339003e9e3c1b12a27fe3"),
+            value: 'dots'
+          }, {
+            label: i18nRuntime.i18n("e030190fd1c10b0c967f48e789fa86b1"),
+            value: 'arrows'
+          }]
+        }, {
+          name: 'width',
+          type: 'input-text',
+          label: i18nRuntime.i18n("c28479019e24e0e4745f4948e9e97ee7"),
+          validations: 'isNumeric',
+          addOn: {
+            type: 'button',
+            label: 'px'
+          }
+        }, {
+          name: 'height',
+          type: 'input-text',
+          label: i18nRuntime.i18n("c1df04eec5fa0857bc0df2d68d8e953c"),
+          validations: 'isNumeric',
+          addOn: {
+            type: 'button',
+            label: 'px'
+          }
+        }, amisEditorCore.getSchemaTpl('className')]
+      }, {
+        title: i18nRuntime.i18n("33bf801796fd255b5f6147e33146669b"),
+        body: [amisEditorCore.getSchemaTpl('ref'), amisEditorCore.getSchemaTpl('visible')]
+      }])];
     };
-    return CarouselPlugin;
-}(AMisCodeEditor.BasePlugin));
-AMisCodeEditor.registerEditorPlugin(CarouselPlugin);
+
+    return _this;
+  }
+
+  CarouselPlugin.prototype.filterProps = function (props) {
+    // 编辑的时候别自动轮播，影响编辑
+    props.auto = false;
+    return props;
+  };
+  /**
+   * 补充切换的 toolbar
+   * @param context
+   * @param toolbars
+   */
+
+
+  CarouselPlugin.prototype.buildEditorToolbar = function (context, toolbars) {
+    if (context.info.plugin === this && context.info.renderer.name === 'carousel' && !context.info.hostId) {
+      var node_1 = context.node;
+      toolbars.push({
+        level: 'secondary',
+        icon: 'fa fa-chevron-left',
+        tooltip: i18nRuntime.i18n("ad5a36ee5f4054594c30b6dc481e2d81"),
+        onClick: function () {
+          var _a;
+
+          var control = node_1.getComponent();
+          (_a = control === null || control === void 0 ? void 0 : control.prev) === null || _a === void 0 ? void 0 : _a.call(control);
+        }
+      });
+      toolbars.push({
+        level: 'secondary',
+        icon: 'fa fa-chevron-right',
+        tooltip: i18nRuntime.i18n("49e0f68798e3c69b7990076bd8f1f47f"),
+        onClick: function () {
+          var _a;
+
+          var control = node_1.getComponent();
+          (_a = control === null || control === void 0 ? void 0 : control.next) === null || _a === void 0 ? void 0 : _a.call(control);
+        }
+      });
+    }
+  };
+
+  return CarouselPlugin;
+}(amisEditorCore.BasePlugin);
+amisEditorCore.registerEditorPlugin(CarouselPlugin);
 
 exports.CarouselPlugin = CarouselPlugin;