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

package/esm/plugin/IFrame.js

@@ -0,0 +1,81 @@
+/**
+ * amis-editor v5.2.0-beta.2
+ * Copyright 2018-2022 @fex
+ */
+
+import { __extends, __spreadArray } from 'tslib';
+import { getSchemaTpl, tipedLabel, defaultValue, BasePlugin, registerEditorPlugin } from 'amis-editor-core';
+import { i18n } from 'i18n-runtime';
+
+var IFramePlugin =
+/** @class */
+function (_super) {
+  __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 = i18n("713315591970d7c8b49d1c732fe54fde");
+    _this.tags = [i18n("22c799040acdb2601b437ed5449de076")];
+    _this.icon = 'fa fa-window-maximize';
+    _this.pluginIcon = 'iframe-plugin';
+    _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 getSchemaTpl('tabs', [{
+        title: i18n("24d67862f87f439db7ca957aecb77cce"),
+        body: getSchemaTpl('collapseGroup', [{
+          title: i18n("4092ed98e9035652d4c9ca9441701ed7"),
+          body: [{
+            name: 'src',
+            label: i18n("8f1c078c6d42759e6ccb1a9bf35f1629"),
+            type: 'input-text'
+          }]
+        }, getSchemaTpl('status')])
+      }, {
+        title: i18n("afcde2611bdd13c1e65b4fb6a2f13425"),
+        body: [getSchemaTpl('collapseGroup', __spreadArray([{
+          title: i18n("4092ed98e9035652d4c9ca9441701ed7"),
+          body: [getSchemaTpl('style:widthHeight', {
+            widthSchema: {
+              label: tipedLabel(i18n("c28479019e24e0e4745f4948e9e97ee7"), i18n("51ad722113289f70b6d77c78ddf0c64a")),
+              pipeIn: defaultValue('100%')
+            },
+            heightSchema: {
+              label: tipedLabel(i18n("c1df04eec5fa0857bc0df2d68d8e953c"), i18n("c78d9b9ab9db5951eb5526e8a46677d9")),
+              pipeIn: defaultValue('100%')
+            }
+          })]
+        }, getSchemaTpl('style:classNames', {
+          isFormItem: false
+        })], 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;
+}(BasePlugin);
+registerEditorPlugin(IFramePlugin);
+
+export { IFramePlugin };

package/esm/plugin/Image.d.ts

@@ -0,0 +1,34 @@
+import { ActiveEventContext, BaseEventContext, BasePlugin, PluginEvent, ResizeMoveEventContext } from 'amis-editor-core';
+export declare class ImagePlugin extends BasePlugin {
+    rendererName: string;
+    $schema: string;
+    name: string;
+    isBaseComponent: boolean;
+    description: string;
+    tags: string[];
+    icon: string;
+    pluginIcon: string;
+    scaffold: {
+        type: string;
+    };
+    previewSchema: {
+        thumbMode: string;
+        value: string | string[];
+        type: string;
+    };
+    panelTitle: string;
+    panelBodyCreator: (context: BaseEventContext) => any[];
+    onActive(event: PluginEvent<ActiveEventContext>): void;
+    onWidthChangeStart(event: PluginEvent<ResizeMoveEventContext, {
+        onMove(e: MouseEvent): void;
+        onEnd(e: MouseEvent): void;
+    }>): void;
+    onHeightChangeStart(event: PluginEvent<ResizeMoveEventContext, {
+        onMove(e: MouseEvent): void;
+        onEnd(e: MouseEvent): void;
+    }>): void;
+    onSizeChangeStart(event: PluginEvent<ResizeMoveEventContext, {
+        onMove(e: MouseEvent): void;
+        onEnd(e: MouseEvent): void;
+    }>, direction?: 'both' | 'vertical' | 'horizontal'): void;
+}

package/esm/plugin/Image.js

@@ -0,0 +1,248 @@
+/**
+ * amis-editor v5.2.0-beta.2
+ * Copyright 2018-2022 @fex
+ */
+
+import { __extends, __assign } from 'tslib';
+import { mockValue, getSchemaTpl, defaultValue, BasePlugin, registerEditorPlugin } from 'amis-editor-core';
+import { i18n } from 'i18n-runtime';
+
+var ImagePlugin =
+/** @class */
+function (_super) {
+  __extends(ImagePlugin, _super);
+
+  function ImagePlugin() {
+    var _this = _super !== null && _super.apply(this, arguments) || this; // 关联渲染器名字
+
+
+    _this.rendererName = 'image';
+    _this.$schema = '/schemas/ImageSchema.json'; // 组件名称
+
+    _this.name = i18n("67997ccf7ea846c3c2d278b01ed9600b");
+    _this.isBaseComponent = true;
+    _this.description = i18n("6dcf991e992a0b765df0933411fe9bb2");
+    _this.tags = [i18n("027446c2f9070b0f5b16a18208bf5fc7")];
+    _this.icon = 'fa fa-photo';
+    _this.pluginIcon = 'image-plugin';
+    _this.scaffold = {
+      type: 'image'
+    };
+    _this.previewSchema = __assign(__assign({}, _this.scaffold), {
+      thumbMode: 'cover',
+      value: mockValue({
+        type: 'image'
+      })
+    });
+    _this.panelTitle = i18n("20def7942674282277c3714ed7ea6ce0");
+
+    _this.panelBodyCreator = function (context) {
+      var isUnderField = /\/field\/\w+$/.test(context.path);
+      return [getSchemaTpl('tabs', [{
+        title: i18n("22b777e6fcb613b8ba83ced9594cd07e"),
+        body: [{
+          name: 'imageMode',
+          label: i18n("1fdadb49bcabfdc36a4a9e020f597f4d"),
+          type: 'select',
+          pipeIn: defaultValue('thumb'),
+          options: [{
+            label: i18n("e18aa5e376437da71083a29c4cddaf46"),
+            value: 'thumb'
+          }, {
+            label: i18n("fb43d5ffa21f3c4055c29fad350f27e4"),
+            value: 'original'
+          }]
+        }, {
+          name: 'title',
+          type: 'input-text',
+          label: i18n("c6c7456d446d62a906c2809b6ba19ce1")
+        }, {
+          name: 'imageCaption',
+          type: 'input-text',
+          label: i18n("098c3d959911b48b4d912cb85ccc4942")
+        }, {
+          name: 'width',
+          label: i18n("c28479019e24e0e4745f4948e9e97ee7"),
+          type: 'input-number'
+        }, {
+          name: 'height',
+          label: i18n("c1df04eec5fa0857bc0df2d68d8e953c"),
+          type: 'input-number'
+        }, isUnderField ? null : getSchemaTpl('imageUrl', {
+          name: 'src',
+          type: 'input-text',
+          label: i18n("582570bef8c57c5af7658c4a4eea45ff"),
+          description: i18n("1193e1aab7bea094279ae7b4288ba848")
+        }), {
+          type: 'input-text',
+          label: i18n("a3f38735bf211edb2066ac4e51b55cb2"),
+          name: 'href'
+        }, getSchemaTpl('imageUrl', {
+          name: 'defaultImage',
+          label: i18n("f5865bf2d791d293374af4aa76d27c4d")
+        })]
+      }, {
+        title: i18n("afcde2611bdd13c1e65b4fb6a2f13425"),
+        body: [getSchemaTpl('switch', {
+          name: 'enlargeAble',
+          label: i18n("e1110b854bceeed0e887cb951bb3d2f3")
+        }), getSchemaTpl('imageUrl', {
+          name: 'originalSrc',
+          visibleOn: 'this.enlargeAble',
+          label: i18n("7ffade593e390a2a2cc43e6663461b71"),
+          description: i18n("214953c5f7557b1a5f1310c87238ee03")
+        }), getSchemaTpl('switch', {
+          name: 'showDimensions',
+          label: i18n("6d45b56ee94ea873a554ec41b9f2074a")
+        }), {
+          name: 'thumbMode',
+          type: 'button-group-select',
+          label: i18n("00cedb73310cc531a43d23cfa5ba0e5f"),
+          size: 'sm',
+          pipeIn: defaultValue('contain'),
+          options: [{
+            label: i18n("b0267f4aa776e75443b7ef6e8dad257e"),
+            value: 'w-full'
+          }, {
+            label: i18n("c30b1b6f29debb05449aa3cb40268e7e"),
+            value: 'h-full'
+          }, {
+            label: i18n("e13556bb3580ac3746e1f8663eb15896"),
+            value: 'contain'
+          }, {
+            label: i18n("47303119ba97a66d168ff042575b9de4"),
+            value: 'cover'
+          }]
+        }, {
+          name: 'thumbRatio',
+          type: 'button-group-select',
+          label: i18n("319501b9acacdd6f94a9bdd0637a3cd2"),
+          size: 'sm',
+          pipeIn: defaultValue('1:1'),
+          options: [{
+            label: '1:1',
+            value: '1:1'
+          }, {
+            label: '4:3',
+            value: '4:3'
+          }, {
+            label: '16:9',
+            value: '16:9'
+          }]
+        }, getSchemaTpl('className', {
+          autoComplete: false
+        }), getSchemaTpl('className', {
+          name: 'imageClassName',
+          label: i18n("b8e1e46cbdea20de4e5fc130d31b7bcc")
+        }), getSchemaTpl('className', {
+          name: 'thumbClassName',
+          label: i18n("4d080f1e18d86051b8d651c68685f319")
+        })]
+      }, {
+        title: i18n("33bf801796fd255b5f6147e33146669b"),
+        body: [// getSchemaTpl('ref'),
+        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;
+}(BasePlugin);
+registerEditorPlugin(ImagePlugin);
+
+export { ImagePlugin };

package/esm/plugin/Images.d.ts

@@ -0,0 +1,26 @@
+import { BaseEventContext, BasePlugin } from 'amis-editor-core';
+export declare class ImagesPlugin extends BasePlugin {
+    rendererName: string;
+    $schema: string;
+    name: string;
+    isBaseComponent: boolean;
+    description: string;
+    tags: string[];
+    icon: string;
+    pluginIcon: string;
+    scaffold: {
+        type: string;
+    };
+    previewSchema: {
+        listClassName: string;
+        thumbMode: string;
+        value: {
+            title: string;
+            image: string | string[];
+            src: string | string[];
+        }[];
+        type: string;
+    };
+    panelTitle: string;
+    panelBodyCreator: (context: BaseEventContext) => any[];
+}

package/esm/plugin/Images.js

@@ -0,0 +1,186 @@
+/**
+ * amis-editor v5.2.0-beta.2
+ * Copyright 2018-2022 @fex
+ */
+
+import { __extends, __assign } from 'tslib';
+import { mockValue, getSchemaTpl, defaultValue, BasePlugin, registerEditorPlugin } from 'amis-editor-core';
+import { i18n } from 'i18n-runtime';
+
+var ImagesPlugin =
+/** @class */
+function (_super) {
+  __extends(ImagesPlugin, _super);
+
+  function ImagesPlugin() {
+    var _this = _super !== null && _super.apply(this, arguments) || this; // 关联渲染器名字
+
+
+    _this.rendererName = 'images';
+    _this.$schema = '/schemas/ImagesSchema.json'; // 组件名称
+
+    _this.name = i18n("e040fc4bf539dd1cf6ebca6b4bff857a");
+    _this.isBaseComponent = true;
+    _this.description = i18n("93f46deec83b8f9005233a1467498d52");
+    _this.tags = [i18n("027446c2f9070b0f5b16a18208bf5fc7")];
+    _this.icon = 'fa fa-clone';
+    _this.pluginIcon = 'images-plugin';
+    _this.scaffold = {
+      type: 'images'
+    };
+    _this.previewSchema = __assign(__assign({}, _this.scaffold), {
+      listClassName: 'nowrap',
+      thumbMode: 'cover',
+      value: [{
+        title: i18n("2382c315a6ba396be1932dd8dafaff52"),
+        image: mockValue({
+          type: 'image'
+        }),
+        src: mockValue({
+          type: 'image'
+        })
+      }, {
+        title: i18n("ce6e2814f207c9333f10785606c57df3"),
+        image: mockValue({
+          type: 'image'
+        }),
+        src: mockValue({
+          type: 'image'
+        })
+      }]
+    });
+    _this.panelTitle = i18n("e040fc4bf539dd1cf6ebca6b4bff857a");
+
+    _this.panelBodyCreator = function (context) {
+      var isUnderField = /\/field\/\w+$/.test(context.path);
+      return [getSchemaTpl('tabs', [{
+        title: i18n("22b777e6fcb613b8ba83ced9594cd07e"),
+        body: (isUnderField ? [] : [{
+          type: 'formula',
+          name: '__mode',
+          autoSet: false,
+          formula: '!this.name && !this.source && Array.isArray(this.options) ? 2 : 1'
+        }, {
+          label: i18n("c11322c9cc43ce3c004cf03f5ac0acd0"),
+          name: '__mode',
+          type: 'button-group-select',
+          size: 'xs',
+          mode: 'inline',
+          className: 'w-full',
+          options: [{
+            label: i18n("0a2907a421b8f980986117e4f3044f92"),
+            value: 1
+          }, {
+            label: i18n("e760ec18028fc075c5705bf184589e70"),
+            value: 2
+          }],
+          onChange: function (value, oldValue, model, form) {
+            if (value !== oldValue && value == 1) {
+              form.deleteValueByName('options');
+            }
+          }
+        }, {
+          name: 'source',
+          type: 'input-text',
+          label: i18n("45a4922d3f42d0b137c6845c4c77031f"),
+          description: i18n("2d4247be13246794180897b40fcdbcb1"),
+          visibleOn: 'this.__mode == 1'
+        }, {
+          type: 'combo',
+          name: 'options',
+          visibleOn: 'this.__mode == 2',
+          minLength: 1,
+          label: i18n("81a2b634d7ddcffc21b787613673943c"),
+          multiple: true,
+          multiLine: true,
+          addable: true,
+          removable: true,
+          items: [getSchemaTpl('imageUrl', {
+            name: 'image',
+            label: i18n("0f088d8f579c362068d7a3858e207280")
+          }), getSchemaTpl('imageUrl', {
+            name: 'src',
+            label: i18n("fb43d5ffa21f3c4055c29fad350f27e4")
+          }), {
+            type: 'input-text',
+            label: i18n("c6c7456d446d62a906c2809b6ba19ce1"),
+            name: 'title'
+          }, {
+            type: 'textarea',
+            label: i18n("098c3d959911b48b4d912cb85ccc4942"),
+            name: 'caption'
+          }]
+        }]).concat([getSchemaTpl('imageUrl', {
+          name: 'defaultImage',
+          label: i18n("f5865bf2d791d293374af4aa76d27c4d")
+        })])
+      }, {
+        title: i18n("afcde2611bdd13c1e65b4fb6a2f13425"),
+        body: [getSchemaTpl('switch', {
+          name: 'enlargeAble',
+          label: i18n("e1110b854bceeed0e887cb951bb3d2f3")
+        }), {
+          name: 'originalSrc',
+          visibleOn: 'this.enlargeAble',
+          type: 'input-text',
+          label: i18n("7ffade593e390a2a2cc43e6663461b71"),
+          description: i18n("214953c5f7557b1a5f1310c87238ee03")
+        }, getSchemaTpl('switch', {
+          name: 'showDimensions',
+          label: i18n("6d45b56ee94ea873a554ec41b9f2074a")
+        }), {
+          name: 'thumbMode',
+          type: 'button-group-select',
+          label: i18n("00cedb73310cc531a43d23cfa5ba0e5f"),
+          size: 'sm',
+          pipeIn: defaultValue('contain'),
+          options: [{
+            label: i18n("b0267f4aa776e75443b7ef6e8dad257e"),
+            value: 'w-full'
+          }, {
+            label: i18n("c30b1b6f29debb05449aa3cb40268e7e"),
+            value: 'h-full'
+          }, {
+            label: i18n("e13556bb3580ac3746e1f8663eb15896"),
+            value: 'contain'
+          }, {
+            label: i18n("47303119ba97a66d168ff042575b9de4"),
+            value: 'cover'
+          }]
+        }, {
+          name: 'thumbRatio',
+          type: 'button-group-select',
+          label: i18n("319501b9acacdd6f94a9bdd0637a3cd2"),
+          size: 'sm',
+          pipeIn: defaultValue('1:1'),
+          options: [{
+            label: '1:1',
+            value: '1:1'
+          }, {
+            label: '4:3',
+            value: '4:3'
+          }, {
+            label: '16:9',
+            value: '16:9'
+          }]
+        }, getSchemaTpl('className', {
+          autoComplete: false
+        }), getSchemaTpl('className', {
+          name: 'listClassName',
+          label: i18n("ebb2073c604e72ffd9ae1b796665b702")
+        })]
+      }, {
+        title: i18n("33bf801796fd255b5f6147e33146669b"),
+        body: [// getSchemaTpl('ref'),
+        getSchemaTpl('visible')]
+      }])];
+    };
+
+    return _this;
+  }
+
+  return ImagesPlugin;
+}(BasePlugin);
+registerEditorPlugin(ImagesPlugin);
+
+export { ImagesPlugin };

package/esm/plugin/Json.d.ts

@@ -0,0 +1,27 @@
+import { BaseEventContext, BasePlugin } from 'amis-editor-core';
+export declare class JsonPlugin extends BasePlugin {
+    rendererName: string;
+    $schema: string;
+    name: string;
+    isBaseComponent: boolean;
+    description: string;
+    docLink: string;
+    tags: string[];
+    icon: string;
+    pluginIcon: string;
+    scaffold: {
+        type: string;
+    };
+    previewSchema: {
+        name: string;
+        value: {
+            a: number;
+            b: {
+                c: number;
+            };
+        };
+        type: string;
+    };
+    panelTitle: string;
+    panelBodyCreator: (context: BaseEventContext) => any[];
+}

package/esm/plugin/Json.js

@@ -0,0 +1,75 @@
+/**
+ * amis-editor v5.2.0-beta.2
+ * Copyright 2018-2022 @fex
+ */
+
+import { __extends, __assign } from 'tslib';
+import { getSchemaTpl, defaultValue, BasePlugin, registerEditorPlugin } from 'amis-editor-core';
+import flatten from 'lodash/flatten';
+import { i18n } from 'i18n-runtime';
+
+var JsonPlugin =
+/** @class */
+function (_super) {
+  __extends(JsonPlugin, _super);
+
+  function JsonPlugin() {
+    var _this = _super !== null && _super.apply(this, arguments) || this; // 关联渲染器名字
+
+
+    _this.rendererName = 'json';
+    _this.$schema = '/schemas/JsonSchema.json'; // 组件名称
+
+    _this.name = i18n("5acc93183b7fe3816a845aca52baeff2");
+    _this.isBaseComponent = true;
+    _this.description = i18n("5a4b81442789f3b2e7b665bd430eeabf");
+    _this.docLink = '/amis/zh-CN/components/json';
+    _this.tags = [i18n("027446c2f9070b0f5b16a18208bf5fc7")];
+    _this.icon = 'fa fa-code';
+    _this.pluginIcon = 'json-view-plugin';
+    _this.scaffold = {
+      type: 'json'
+    };
+    _this.previewSchema = __assign(__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 [getSchemaTpl('tabs', [{
+        title: i18n("22b777e6fcb613b8ba83ced9594cd07e"),
+        body: flatten([isUnderField ? {
+          type: 'tpl',
+          inline: false,
+          className: 'text-info text-sm',
+          tpl: i18n("37b12f2666b9e4e37f33eb5e83533d5e")
+        } : null, {
+          name: 'levelExpand',
+          type: 'input-number',
+          label: i18n("f891291cbfaec7ba3754520e2a5227d8"),
+          pipeIn: defaultValue(1)
+        }])
+      }, {
+        title: i18n("afcde2611bdd13c1e65b4fb6a2f13425"),
+        body: flatten([getSchemaTpl('className')])
+      }, {
+        title: i18n("33bf801796fd255b5f6147e33146669b"),
+        body: flatten([getSchemaTpl('ref'), getSchemaTpl('visible')])
+      }])];
+    };
+
+    return _this;
+  }
+
+  return JsonPlugin;
+}(BasePlugin);
+registerEditorPlugin(JsonPlugin);
+
+export { JsonPlugin };