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

package/esm/plugin/CollapseGroup.js

@@ -0,0 +1,214 @@
+/**
+ * amis-editor v5.2.0-beta.2
+ * Copyright 2018-2022 @fex
+ */
+
+import { __extends, __assign } from 'tslib';
+import { getSchemaTpl, defaultValue, isObject, tipedLabel, BasePlugin, registerEditorPlugin } from 'amis-editor-core';
+import { i18n } from 'i18n-runtime';
+
+var CollapseGroupPlugin =
+/** @class */
+function (_super) {
+  __extends(CollapseGroupPlugin, _super);
+
+  function CollapseGroupPlugin() {
+    var _this = _super !== null && _super.apply(this, arguments) || this; // 关联渲染器名字
+
+
+    _this.rendererName = 'collapse-group';
+    _this.$schema = '/schemas/CollapseGroupSchema.json'; // 组件名称
+
+    _this.name = i18n("d09980a88568f75e9267ca7b531c74eb");
+    _this.isBaseComponent = true;
+    _this.description = i18n("0d571a7ab19e098820e8cea4d5a80f7d");
+    _this.tags = [i18n("027446c2f9070b0f5b16a18208bf5fc7"), i18n("22c799040acdb2601b437ed5449de076")];
+    _this.icon = 'fa fa-align-justify';
+    _this.pluginIcon = 'collapse-plugin';
+    _this.scaffold = {
+      type: 'collapse-group',
+      activeKey: ['1'],
+      body: [{
+        type: 'collapse',
+        key: '1',
+        active: true,
+        header: i18n("17dcbf1f144607d4af0bb718e008682f"),
+        body: [{
+          type: 'tpl',
+          tpl: i18n("f7fb20f6cacd5e40c7f5732cb377d0bf"),
+          inline: false
+        }]
+      }, {
+        type: 'collapse',
+        key: '2',
+        header: i18n("72d41bd9eb3882f7da6f55d0ff0a39f6"),
+        body: [{
+          type: 'tpl',
+          tpl: i18n("f7fb20f6cacd5e40c7f5732cb377d0bf"),
+          inline: false
+        }]
+      }]
+    };
+    _this.previewSchema = __assign({}, _this.scaffold);
+    _this.activeKeyData = [];
+    _this.panelTitle = i18n("d09980a88568f75e9267ca7b531c74eb");
+    _this.panelJustify = true;
+
+    _this.panelBodyCreator = function (context) {
+      return [getSchemaTpl('tabs', [{
+        title: i18n("24d67862f87f439db7ca957aecb77cce"),
+        body: getSchemaTpl('collapseGroup', [{
+          title: i18n("4092ed98e9035652d4c9ca9441701ed7"),
+          body: [{
+            name: 'expandIconPosition',
+            label: i18n("0431ee7033364800e261d1e560808231"),
+            type: 'button-group-select',
+            pipeIn: defaultValue('left'),
+            options: [{
+              label: i18n("a7eaff29603a9c40927f726013d2c016"),
+              value: 'left',
+              icon: 'fa fa-align-left'
+            }, {
+              label: i18n("128d58f066a18ddb2ddb701921d5c77c"),
+              value: 'right',
+              icon: 'fa fa-align-right'
+            }]
+          }, {
+            type: 'ae-switch-more',
+            label: i18n("7372dc9f39a173dd0c75a185373245b1"),
+            bulk: true,
+            mode: 'normal',
+            value: false,
+            formType: 'extend',
+            autoFocus: false,
+            form: {
+              body: [{
+                label: i18n("5ef69f62dc668c1a3e68b51c50a2530a"),
+                name: 'expandIcon',
+                type: 'icon-picker',
+                className: 'fix-icon-picker-overflow',
+                pipeIn: function (value) {
+                  return value === null || value === void 0 ? void 0 : value.icon;
+                },
+                pipeOut: function (value) {
+                  return {
+                    type: 'icon',
+                    vendor: '',
+                    icon: value
+                  };
+                }
+              }]
+            },
+            pipeIn: function (value) {
+              if (typeof value === 'string' && value.length) {
+                return {
+                  character: value
+                };
+              }
+
+              return undefined;
+            },
+            pipeOut: function (value) {
+              if (!isObject(value)) {
+                return undefined;
+              }
+
+              return typeof value.character === 'string' ? value.character : undefined;
+            }
+          }, {
+            name: 'accordion',
+            label: tipedLabel(i18n("47b4e22880eb59ce9989b8419222e88a"), i18n("bb3548f0bb97ab11ee92284ecf37ec16")),
+            mode: 'row',
+            inputClassName: 'inline-flex justify-between flex-row-reverse',
+            type: 'switch',
+            pipeIn: defaultValue(false)
+          }, getSchemaTpl('combo-container', {
+            name: 'body',
+            type: 'combo',
+            label: i18n("f24544b06700857ec11b434cb2916692"),
+            mode: 'normal',
+            multiple: true,
+            addable: true,
+            columnClassName: 'w-20',
+            addButtonText: i18n("c5ceab33d3e275262b4992a8cb43317f"),
+            minLength: 1,
+            draggable: true,
+            draggableTip: '',
+            placeholder: i18n("b839e579e920068bd817d34cd7927069"),
+            items: [{
+              type: 'container',
+              columnClassName: 'flex-none',
+              body: tipedLabel([{
+                name: 'active',
+                type: 'checkbox'
+              }], i18n("030a54b0afb54fc7f90e1a0f64eb8205"))
+            }, {
+              name: 'header',
+              placeholder: i18n("32c65d8d7431e76029678ec7bb73a5ab"),
+              type: 'input-text'
+            }],
+            onChange: function (value, oldValue, model, form) {
+              var activeKey = value.reduce(function (arr, item) {
+                item.active === true && arr.push(item.key);
+                return arr;
+              }, []);
+              form.setValues({
+                activeKey: activeKey
+              });
+            },
+            pipeOut: function (value, oldValue, data) {
+              var keys = value.map(function (item) {
+                return item.key;
+              });
+
+              var findMinCanUsedKey = function (keys, max) {
+                for (var i = 1; i <= max; i++) {
+                  if (!keys.includes(String(i))) {
+                    return String(i);
+                  }
+                }
+              };
+
+              value.forEach(function (item) {
+                if (!item.key) {
+                  var key = findMinCanUsedKey(keys, value.length);
+                  item.key = key;
+                  item.header = "\u6807\u9898".concat(key);
+                }
+              });
+              return value;
+            },
+            scaffold: {
+              type: 'collapse',
+              header: i18n("32c65d8d7431e76029678ec7bb73a5ab"),
+              body: [{
+                type: 'tpl',
+                tpl: i18n("2d711b09bd0db0ad240cc83b30dd8014"),
+                inline: false
+              }],
+              key: ''
+            }
+          })]
+        }])
+      }, {
+        title: i18n("afcde2611bdd13c1e65b4fb6a2f13425"),
+        body: getSchemaTpl('collapseGroup', [getSchemaTpl('style:classNames', {
+          isFormItem: false
+        })])
+      }])];
+    };
+
+    _this.regions = [{
+      key: 'body',
+      label: i18n("132a78bdf68d6d17bde00aa807bbf032"),
+      renderMethod: 'render',
+      insertPosition: 'inner'
+    }];
+    return _this;
+  }
+
+  return CollapseGroupPlugin;
+}(BasePlugin);
+registerEditorPlugin(CollapseGroupPlugin);
+
+export { CollapseGroupPlugin };

package/esm/plugin/ColumnToggler.d.ts

@@ -0,0 +1,23 @@
+import { BaseEventContext, BasePlugin, BasicRendererInfo, RendererInfoResolveEventContext } from 'amis-editor-core';
+export declare class ColumnToggler extends BasePlugin {
+    rendererName: string;
+    $schema: string;
+    name: string;
+    isBaseComponent: boolean;
+    disabledRendererPlugin: boolean;
+    description: string;
+    tags: string[];
+    icon: string;
+    panelTitle: string;
+    panelJustify: boolean;
+    panelBodyCreator: (context: BaseEventContext) => any;
+    /**
+     * 如果禁用了没办法编辑
+     */
+    filterProps(props: any): any;
+    /**
+     * 如果配置里面有 rendererName 自动返回渲染器信息。
+     * @param renderer
+     */
+    getRendererInfo({ renderer, schema }: RendererInfoResolveEventContext): BasicRendererInfo | void;
+}

package/esm/plugin/ColumnToggler.js

@@ -0,0 +1,114 @@
+/**
+ * amis-editor v5.2.0-beta.2
+ * Copyright 2018-2022 @fex
+ */
+
+import { __extends } from 'tslib';
+import { getSchemaTpl, BasePlugin, registerEditorPlugin } from 'amis-editor-core';
+import { i18n } from 'i18n-runtime';
+
+var ColumnToggler =
+/** @class */
+function (_super) {
+  __extends(ColumnToggler, _super);
+
+  function ColumnToggler() {
+    var _this = _super !== null && _super.apply(this, arguments) || this; // 关联渲染器名字
+
+
+    _this.rendererName = 'column-toggler';
+    _this.$schema = '/schemas/ColumnToggler.json'; // 组件名称
+
+    _this.name = i18n("2816cea6c4887a53c417831deb5fbe00");
+    _this.isBaseComponent = true;
+    _this.disabledRendererPlugin = true;
+    _this.description = i18n("a955021cdf0249de1f3818f83cf248b7");
+    _this.tags = [i18n("2816cea6c4887a53c417831deb5fbe00")];
+    _this.icon = 'fa fa-square';
+    _this.panelTitle = i18n("2816cea6c4887a53c417831deb5fbe00");
+    _this.panelJustify = true;
+
+    _this.panelBodyCreator = function (context) {
+      return getSchemaTpl('tabs', [{
+        title: i18n("24d67862f87f439db7ca957aecb77cce"),
+        body: getSchemaTpl('collapseGroup', [{
+          title: i18n("4092ed98e9035652d4c9ca9441701ed7"),
+          body: [{
+            label: i18n("24bdc7e8957abfc5d82f4206e92bb518"),
+            type: 'input-text',
+            name: 'label'
+          }, {
+            label: i18n("787366b0d678071a5ed98e55d31eba84"),
+            type: 'input-text',
+            name: 'tooltip'
+          }, getSchemaTpl('switch', {
+            name: 'defaultIsOpened',
+            label: i18n("6a0508144ae12bfa79001693d713c0d6")
+          }), getSchemaTpl('icon', {
+            label: i18n("ae3816c5b00fcff4111842ac19f0a706")
+          })]
+        }])
+      }, {
+        title: i18n("afcde2611bdd13c1e65b4fb6a2f13425"),
+        body: getSchemaTpl('collapseGroup', [{
+          title: i18n("4092ed98e9035652d4c9ca9441701ed7"),
+          body: [getSchemaTpl('size', {
+            label: i18n("fe805d91ae93be775670c61214dd2f28")
+          })]
+        }, {
+          title: i18n("4434b33a8731a73613ba5fa1eb984efb"),
+          body: [getSchemaTpl('className', {
+            name: 'className',
+            label: i18n("fbbbe30d78c335bad27f3dfc5efd2a5d")
+          }), getSchemaTpl('className', {
+            name: 'btnClassName',
+            label: i18n("ac3880323853de9adc4f66bc06d438ff")
+          })]
+        }])
+      }]);
+    };
+
+    return _this;
+  }
+  /**
+   * 如果禁用了没办法编辑
+   */
+
+
+  ColumnToggler.prototype.filterProps = function (props) {
+    props.disabled = false;
+    return props;
+  };
+  /**
+   * 如果配置里面有 rendererName 自动返回渲染器信息。
+   * @param renderer
+   */
+
+
+  ColumnToggler.prototype.getRendererInfo = function (_a) {
+    var renderer = _a.renderer,
+        schema = _a.schema;
+    var plugin = this;
+
+    if (schema.$$id && plugin.name && plugin.rendererName && plugin.rendererName === renderer.name) {
+      // 复制部分信息出去
+      return {
+        name: schema.label ? schema.label : plugin.name,
+        regions: plugin.regions,
+        patchContainers: plugin.patchContainers,
+        // wrapper: plugin.wrapper,
+        vRendererConfig: plugin.vRendererConfig,
+        wrapperProps: plugin.wrapperProps,
+        wrapperResolve: plugin.wrapperResolve,
+        filterProps: plugin.filterProps,
+        $schema: plugin.$schema,
+        renderRenderer: plugin.renderRenderer
+      };
+    }
+  };
+
+  return ColumnToggler;
+}(BasePlugin);
+registerEditorPlugin(ColumnToggler);
+
+export { ColumnToggler };

package/esm/plugin/Container.d.ts

@@ -0,0 +1,30 @@
+import { BaseEventContext, BasePlugin, RegionConfig } from 'amis-editor-core';
+export declare class ContainerPlugin extends BasePlugin {
+    rendererName: string;
+    $schema: string;
+    name: string;
+    isBaseComponent: boolean;
+    description: string;
+    tags: string[];
+    withDataSource: boolean;
+    icon: string;
+    pluginIcon: string;
+    scaffold: {
+        type: string;
+        body: {
+            type: string;
+            tpl: string;
+        }[];
+    };
+    previewSchema: {
+        type: string;
+        body: {
+            type: string;
+            tpl: string;
+        }[];
+    };
+    regions: Array<RegionConfig>;
+    panelTitle: string;
+    panelJustify: boolean;
+    panelBodyCreator: (context: BaseEventContext) => any;
+}

package/esm/plugin/Container.js

@@ -0,0 +1,87 @@
+/**
+ * amis-editor v5.2.0-beta.2
+ * Copyright 2018-2022 @fex
+ */
+
+import { __extends, __assign, __spreadArray } from 'tslib';
+import { getSchemaTpl, defaultValue, BasePlugin, registerEditorPlugin } from 'amis-editor-core';
+import { i18n } from 'i18n-runtime';
+
+var ContainerPlugin =
+/** @class */
+function (_super) {
+  __extends(ContainerPlugin, _super);
+
+  function ContainerPlugin() {
+    var _this = _super !== null && _super.apply(this, arguments) || this; // 关联渲染器名字
+
+
+    _this.rendererName = 'container';
+    _this.$schema = '/schemas/ContainerSchema.json'; // 组件名称
+
+    _this.name = i18n("22c799040acdb2601b437ed5449de076");
+    _this.isBaseComponent = true;
+    _this.description = i18n("ded228f9173b241dd8df2a4811ea0e98");
+    _this.tags = [i18n("22c799040acdb2601b437ed5449de076")];
+    _this.withDataSource = false;
+    _this.icon = 'fa fa-square-o';
+    _this.pluginIcon = 'container-plugin';
+    _this.scaffold = {
+      type: 'container',
+      body: [{
+        type: 'tpl',
+        tpl: i18n("2d711b09bd0db0ad240cc83b30dd8014")
+      }]
+    };
+    _this.previewSchema = __assign({}, _this.scaffold);
+    _this.regions = [{
+      key: 'body',
+      label: i18n("132a78bdf68d6d17bde00aa807bbf032")
+    }];
+    _this.panelTitle = i18n("22c799040acdb2601b437ed5449de076");
+    _this.panelJustify = true;
+
+    _this.panelBodyCreator = function (context) {
+      return getSchemaTpl('tabs', [{
+        title: i18n("24d67862f87f439db7ca957aecb77cce"),
+        body: getSchemaTpl('collapseGroup', [{
+          title: i18n("4092ed98e9035652d4c9ca9441701ed7"),
+          body: [{
+            name: 'wrapperComponent',
+            label: i18n("a823cfa70cfa46c788e1eedae043f6e5"),
+            type: 'input-text',
+            options: ['article', 'aside', 'code', 'div', 'footer', 'header', 'p', 'section'],
+            pipeIn: defaultValue('div'),
+            validations: {
+              isAlphanumeric: true,
+              matchRegexp: '/^(?!.*script).*$/' // 禁用一下script标签
+
+            },
+            validationErrors: {
+              isAlpha: i18n("f7d64e5e79994c3c8853f2608d7b2d25"),
+              matchRegexp: i18n("f7d64e5e79994c3c8853f2608d7b2d25")
+            },
+            validateOnChange: false
+          }]
+        }, getSchemaTpl('status')])
+      }, {
+        title: i18n("afcde2611bdd13c1e65b4fb6a2f13425"),
+        className: 'p-none',
+        body: getSchemaTpl('collapseGroup', __spreadArray(__spreadArray(__spreadArray([], getSchemaTpl('style:common', [], ['layout']), true), [getSchemaTpl('style:classNames', {
+          isFormItem: false,
+          schema: [getSchemaTpl('className', {
+            name: 'bodyClassName',
+            label: i18n("132a78bdf68d6d17bde00aa807bbf032")
+          })]
+        })], false), getSchemaTpl('style:common', ['layout']), true))
+      }]);
+    };
+
+    return _this;
+  }
+
+  return ContainerPlugin;
+}(BasePlugin);
+registerEditorPlugin(ContainerPlugin);
+
+export { ContainerPlugin };

package/esm/plugin/Custom.d.ts

@@ -0,0 +1,28 @@
+/**
+ * @file 自定义代码
+ */
+import { BasePlugin, BasicSubRenderInfo, RendererEventContext, SubRendererInfo } from 'amis-editor-core';
+export declare class CustomPlugin extends BasePlugin {
+    rendererName: string;
+    $schema: string;
+    name: string;
+    isBaseComponent: boolean;
+    description: string;
+    tags: string[];
+    icon: string;
+    pluginIcon: string;
+    docLink: string;
+    scaffold: {
+        type: string;
+        html: string;
+        onMount: string;
+    };
+    previewSchema: {
+        type: string;
+        html: string;
+        onMount: string;
+    };
+    panelTitle: string;
+    panelBody: any[];
+    buildSubRenderers(context: RendererEventContext, renderers: Array<SubRendererInfo>): BasicSubRenderInfo | Array<BasicSubRenderInfo> | void;
+}

package/esm/plugin/Custom.js

@@ -0,0 +1,102 @@
+/**
+ * amis-editor v5.2.0-beta.2
+ * Copyright 2018-2022 @fex
+ */
+
+import { __extends, __assign } from 'tslib';
+import { getSchemaTpl, BasePlugin, registerEditorPlugin } from 'amis-editor-core';
+import { i18n } from 'i18n-runtime';
+
+/**
+ * @file 自定义代码
+ */
+
+var CustomPlugin =
+/** @class */
+function (_super) {
+  __extends(CustomPlugin, _super);
+
+  function CustomPlugin() {
+    var _this = _super !== null && _super.apply(this, arguments) || this; // 关联渲染器名字
+
+
+    _this.rendererName = 'custom';
+    _this.$schema = '/schemas/CustomSchema.json'; // 组件名称
+
+    _this.name = i18n("473d2078518479669823205110842376");
+    _this.isBaseComponent = true;
+    _this.description = i18n("8b9c77fa4e646b9cb270f833252e511b");
+    _this.tags = [i18n("997c7a5d34f6fc628893f509d0df32e0")];
+    _this.icon = 'fa fa-gears';
+    _this.pluginIcon = 'custom-plugin';
+    _this.docLink = '/amis/zh-CN/components/custom';
+    _this.scaffold = {
+      type: 'custom',
+      html: '<div><h2>hello, world!</h2></div>',
+      onMount: "\n      const button = document.createElement('button');\n      button.innerText = '\u70B9\u51FB\u4FEE\u6539\u59D3\u540D';\n      button.onclick = event => {\n        event.preventDefault();\n      };\n      dom.appendChild(button);"
+    };
+    _this.previewSchema = __assign({}, _this.scaffold);
+    _this.panelTitle = i18n("473d2078518479669823205110842376");
+    _this.panelBody = [getSchemaTpl('fieldSet', {
+      title: i18n("0b13dc6251002bf556263fb3e4675b11"),
+      body: [{
+        label: i18n("0b13dc6251002bf556263fb3e4675b11"),
+        name: 'html',
+        type: 'editor',
+        allowFullscreen: true
+      }]
+    }), getSchemaTpl('fieldSet', {
+      title: 'onMount',
+      body: [{
+        name: 'onMount',
+        type: 'editor',
+        allowFullscreen: true,
+        size: 'xxl',
+        label: i18n("d6b917c76b92aa9b92b6bebdcab993f3"),
+        options: {
+          lineNumbers: 'off',
+          glyphMargin: false,
+          lineDecorationsWidth: 0,
+          lineNumbersMinChars: 0
+        }
+      }]
+    }), getSchemaTpl('fieldSet', {
+      title: 'onUpdate',
+      body: [{
+        name: 'onUpdate',
+        type: 'editor',
+        allowFullscreen: true,
+        size: 'xxl',
+        label: i18n("e64739dd24bb0bfcb6f6e1ee2cce5413")
+      }]
+    }), getSchemaTpl('fieldSet', {
+      title: 'onUnmount',
+      body: [{
+        name: 'onUnmount',
+        type: 'editor',
+        allowFullscreen: true,
+        size: 'xxl',
+        label: i18n("0601b7aa5b53cbc3616e24719bcd2aaa")
+      }]
+    })];
+    return _this;
+  }
+
+  CustomPlugin.prototype.buildSubRenderers = function (context, renderers) {
+    var info = _super.prototype.buildSubRenderers.apply(this, arguments); // 只有 form 下才调 onChange
+    // if (
+    //   context.info.renderer.name === 'form' ||
+    //   context.node.childRegions.some(i => i.region === 'body')
+    // ) {
+
+
+    info.scaffold.onMount = "\n        const button = document.createElement('button');\n        button.innerText = '\u70B9\u51FB\u4FEE\u6539\u59D3\u540Dddd';\n        button.onclick = event => {\n          onChange('new name');\n          event.preventDefault();\n        };\n        dom.appendChild(button);"; // }
+
+    return info;
+  };
+
+  return CustomPlugin;
+}(BasePlugin);
+registerEditorPlugin(CustomPlugin);
+
+export { CustomPlugin };

package/esm/plugin/CustomRegion.d.ts

@@ -0,0 +1,40 @@
+/**
+ * @file 自定义代码
+ */
+import { BasePlugin, BasicRendererInfo, RendererInfoResolveEventContext, RegionConfig } from 'amis-editor-core';
+export declare class CustomPlugin extends BasePlugin {
+    rendererName: string;
+    $schema: string;
+    name: string;
+    isBaseComponent: boolean;
+    disabledRendererPlugin: boolean;
+    description: string;
+    docLink: string;
+    tags: string[];
+    icon: string;
+    scaffold: {
+        type: string;
+        html: string;
+        onMount: string;
+        body: {
+            type: string;
+            tpl: string;
+        }[];
+    };
+    previewSchema: {
+        type: string;
+        html: string;
+        onMount: string;
+        body: {
+            type: string;
+            tpl: string;
+        }[];
+    };
+    regions: Array<RegionConfig>;
+    panelTitle: string;
+    panelBody: any[];
+    /**
+     * 备注: 根据当前custom组件的schema中是否有body元素来启动容器模式，用于实现custom组件实现自定义容器类型
+     */
+    getRendererInfo(context: RendererInfoResolveEventContext): BasicRendererInfo | void;
+}