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

package/esm/plugin/HBox.d.ts

@@ -0,0 +1,46 @@
+import { BaseEventContext, BasePlugin, ContextMenuEventContext, ContextMenuItem, PluginEvent, RendererJSONSchemaResolveEventContext, VRendererConfig, ResizeMoveEventContext } from 'amis-editor-core';
+import { EditorNodeType } from 'amis-editor-core';
+import { Schema } from 'amis/lib/types';
+export declare class HBoxPlugin extends BasePlugin {
+    rendererName: string;
+    $schema: string;
+    disabledRendererPlugin: boolean;
+    name: string;
+    isBaseComponent: boolean;
+    icon: string;
+    description: string;
+    docLink: string;
+    tags: string[];
+    scaffold: {
+        type: string;
+        gap: string;
+        columns: {
+            body: never[];
+        }[];
+    };
+    previewSchema: {
+        type: string;
+        columns: {
+            type: string;
+            tpl: string;
+            columnClassName: string;
+        }[];
+    };
+    panelTitle: string;
+    panelBodyCreator: (context: BaseEventContext) => any[];
+    vRendererConfig: VRendererConfig;
+    vWrapperResolve: (dom: HTMLElement) => HTMLElement;
+    overrides: {
+        renderColumn: (this: any, node: Schema, index: number) => any;
+    };
+    afterResolveJsonSchema(event: PluginEvent<RendererJSONSchemaResolveEventContext>): void;
+    buildEditorContextMenu(context: ContextMenuEventContext, menus: Array<ContextMenuItem>): void;
+    onWidthChangeStart(event: PluginEvent<ResizeMoveEventContext, {
+        onMove(e: MouseEvent): void;
+        onEnd(e: MouseEvent): void;
+    }>): void;
+    insertRowAfter(node: EditorNodeType): void;
+    insertRowBefore(node: EditorNodeType): void;
+    insertColumnBefore(context: BaseEventContext): void;
+    insertColumnAfter(context: BaseEventContext): void;
+}

package/esm/plugin/HBox.js

@@ -0,0 +1,633 @@
+/**
+ * amis-editor v5.2.0-beta.2
+ * Copyright 2018-2022 @fex
+ */
+
+import { __extends, __assign } from 'tslib';
+import { Button } from 'amis';
+import React__default from 'react';
+import { getSchemaTpl, Icon, repeatArray, defaultValue, VRenderer, RegionWrapper, JSONChangeInArray, JSONPipeIn, BasePlugin, registerEditorPlugin } from 'amis-editor-core';
+import { i18n } from 'i18n-runtime';
+
+var HBoxPlugin =
+/** @class */
+function (_super) {
+  __extends(HBoxPlugin, _super);
+
+  function HBoxPlugin() {
+    var _this = _super !== null && _super.apply(this, arguments) || this; // 关联渲染器名字
+
+
+    _this.rendererName = 'hbox';
+    _this.$schema = '/schemas/HBoxSchema.json';
+    _this.disabledRendererPlugin = true; // 组件面板不显示
+    // 组件名称
+
+    _this.name = 'HBox';
+    _this.isBaseComponent = true;
+    _this.icon = 'fa fa-columns';
+    _this.description = i18n("69a519f6b7fd6d0bebba72e7572ea1d6");
+    _this.docLink = '/amis/zh-CN/components/hbox';
+    _this.tags = [i18n("22c799040acdb2601b437ed5449de076")];
+    _this.scaffold = {
+      type: 'hbox',
+      gap: 'base',
+      columns: [{
+        body: []
+      }, {
+        body: []
+      }]
+    };
+    _this.previewSchema = {
+      type: 'hbox',
+      columns: [{
+        type: 'tpl',
+        tpl: i18n("f9c91bffab8b1202cf32ab508879e805"),
+        columnClassName: 'bg-primary w-xs'
+      }, {
+        type: 'tpl',
+        tpl: i18n("8c187c1862900db487c8d47e19490fac"),
+        columnClassName: 'bg-success'
+      }]
+    };
+    _this.panelTitle = 'HBox';
+
+    _this.panelBodyCreator = function (context) {
+      return [getSchemaTpl('tabs', [{
+        title: i18n("22b777e6fcb613b8ba83ced9594cd07e"),
+        body: [getSchemaTpl('fieldSet', {
+          title: i18n("9bdb07e72d3a9a6084201a7398523f5a"),
+          collapsable: false,
+          body: [{
+            type: 'wrapper',
+            size: 'none',
+            className: 'grid grid-cols-2 gap-4 mb-4',
+            body: [{
+              children: React__default.createElement(Button, {
+                size: "sm",
+                onClick: function () {
+                  return _this.insertRowAfter(context.node);
+                }
+              }, React__default.createElement(Icon, {
+                className: "icon",
+                icon: "arrow-to-bottom"
+              }), React__default.createElement("span", null, "\u4E0B\u65B9\u63D2\u5165\u65B0\u884C"))
+            }, {
+              children: React__default.createElement(Button, {
+                size: "sm",
+                onClick: function () {
+                  return _this.insertRowBefore(context.node);
+                }
+              }, React__default.createElement(Icon, {
+                className: "icon",
+                icon: "top-arrow-to-top"
+              }), React__default.createElement("span", null, "\u4E0A\u65B9\u63D2\u5165\u65B0\u884C"))
+            }]
+          }, {
+            label: i18n("eb22d47f16f92e6f621c2b9d87119303"),
+            name: 'columns',
+            type: 'select',
+            pipeIn: function (value) {
+              return Array.isArray(value) ? value.length : undefined;
+            },
+            pipeOut: function (value, origin) {
+              if (Array.isArray(origin)) {
+                if (origin.length > value) {
+                  origin = origin.concat();
+                  origin.splice(value - 1, origin.length - value);
+                } else {
+                  origin = origin.concat(repeatArray({
+                    body: []
+                  }, value - origin.length));
+                }
+              }
+
+              return origin;
+            },
+            options: repeatArray(null, 12).map(function (_, index) {
+              return {
+                label: "".concat(index + 1),
+                value: index + 1
+              };
+            })
+          }]
+        }), {
+          type: 'list-select',
+          name: 'gap',
+          label: i18n("c288b519484207bea1d51884a5e9acaf"),
+          size: 'sm',
+          clearable: true,
+          tiled: true,
+          options: [{
+            label: i18n("23ecf42cada8bf2715792d718544d107"),
+            value: 'xs'
+          }, {
+            label: i18n("391b8fa9c747a1799353ab856e666ad5"),
+            value: 'sm'
+          }, {
+            label: i18n("fd6e80f1e0199d6ecc3ee81ae04aa9ef"),
+            value: 'base'
+          }, {
+            label: i18n("aed1dfbc31703955e64806b799b67645"),
+            value: 'md'
+          }, {
+            label: i18n("ab18e30c0dc4093ceeda8961fac3d1f4"),
+            value: 'lg'
+          }]
+        }, {
+          name: 'columns',
+          label: i18n("1f9794dd5634220ed0a498c666cf46fe"),
+          type: 'combo',
+          scaffold: {
+            body: []
+          },
+          minLength: 1,
+          multiple: true,
+          // draggable: true,
+          draggableTip: '',
+          items: [{
+            type: 'tpl',
+            tpl: "<span class=\"label label-default\">".concat(i18n("cb2f68c9c24e85d21e6b090b6e5657d8"), "${index | plus}</span>"),
+            columnClassName: 'no-grow v-middle'
+          }, getSchemaTpl('className', {
+            name: 'columnClassName',
+            labelRemark: '',
+            label: ''
+          })]
+        }, getSchemaTpl('fieldSet', {
+          title: i18n("98d695d6a6a48cfb4bc2f6396ee64787"),
+          collapsable: false,
+          body: [{
+            type: 'button-group-select',
+            name: 'align',
+            size: 'sm',
+            label: false,
+            tiled: true,
+            pipeIn: defaultValue('left'),
+            options: [{
+              value: 'left',
+              label: i18n("413f48cc71f71083ce532a86e3efdc21")
+            }, {
+              value: 'center',
+              label: i18n("1cc9a6949b47913462ff832cb684bdde")
+            }, {
+              value: 'right',
+              label: i18n("fd8e9572cc6bf87653c4d8f8b8dd0db9")
+            }, {
+              value: 'between',
+              label: i18n("da1b972efb29f850b50e219ad4d98ba5")
+            }]
+          }]
+        }), getSchemaTpl('fieldSet', {
+          title: i18n("11b7fc50778c89572391ec4c6c4b55e1"),
+          collapsable: false,
+          body: [{
+            type: 'button-group-select',
+            name: 'valign',
+            size: 'sm',
+            label: false,
+            tiled: true,
+            pipeIn: defaultValue('top'),
+            options: [{
+              value: 'top',
+              label: i18n("2a6ad292447e6354ca39ee7f40d2fcc8")
+            }, {
+              value: 'middle',
+              label: i18n("1cc9a6949b47913462ff832cb684bdde")
+            }, {
+              value: 'bottom',
+              label: i18n("d68c21b6b65e7a2e361762b65b8a5032")
+            }, {
+              value: 'between',
+              label: i18n("da1b972efb29f850b50e219ad4d98ba5")
+            }]
+          }]
+        })]
+      }, {
+        title: i18n("afcde2611bdd13c1e65b4fb6a2f13425"),
+        body: [getSchemaTpl('className'), getSchemaTpl('subFormItemMode'), getSchemaTpl('subFormHorizontalMode'), getSchemaTpl('subFormHorizontal')]
+      }, {
+        title: i18n("33bf801796fd255b5f6147e33146669b"),
+        body: [getSchemaTpl('visible')]
+      }])];
+    };
+
+    _this.vRendererConfig = {
+      regions: {
+        body: {
+          key: 'body',
+          label: i18n("132a78bdf68d6d17bde00aa807bbf032"),
+          placeholder: i18n("cb2f68c9c24e85d21e6b090b6e5657d8"),
+          wrapperResolve: function (dom) {
+            return dom;
+          }
+        }
+      },
+      panelTitle: i18n("cb2f68c9c24e85d21e6b090b6e5657d8"),
+      panelBodyCreator: function (context) {
+        return [getSchemaTpl('tabs', [{
+          title: i18n("22b777e6fcb613b8ba83ced9594cd07e"),
+          body: [getSchemaTpl('fieldSet', {
+            title: i18n("9bdb07e72d3a9a6084201a7398523f5a"),
+            collapsable: false,
+            body: [{
+              type: 'wrapper',
+              size: 'none',
+              className: 'grid grid-cols-2 gap-4',
+              body: [{
+                children: React__default.createElement(Button, {
+                  size: "sm",
+                  onClick: function () {
+                    return _this.insertRowAfter(context.node.host);
+                  }
+                }, React__default.createElement(Icon, {
+                  className: "icon",
+                  icon: "arrow-to-bottom"
+                }), React__default.createElement("span", null, "\u4E0B\u65B9\u63D2\u5165\u65B0\u884C"))
+              }, {
+                children: React__default.createElement(Button, {
+                  size: "sm",
+                  onClick: function () {
+                    return _this.insertRowBefore(context.node.host);
+                  }
+                }, React__default.createElement(Icon, {
+                  className: "icon",
+                  icon: "top-arrow-to-top"
+                }), React__default.createElement("span", null, "\u4E0A\u65B9\u63D2\u5165\u65B0\u884C"))
+              }, {
+                children: React__default.createElement(Button, {
+                  size: "sm",
+                  onClick: function () {
+                    return _this.insertColumnBefore(context);
+                  }
+                }, React__default.createElement(Icon, {
+                  className: "icon",
+                  icon: "left-arrow-to-left"
+                }), React__default.createElement("span", null, "\u5DE6\u4FA7\u63D2\u5165\u65B0\u5217"))
+              }, {
+                children: React__default.createElement(Button, {
+                  size: "sm",
+                  onClick: function () {
+                    return _this.insertColumnAfter(context);
+                  }
+                }, React__default.createElement(Icon, {
+                  className: "icon",
+                  icon: "arrow-to-right"
+                }), React__default.createElement("span", null, "\u53F3\u4FA7\u63D2\u5165\u65B0\u5217"))
+              }]
+            }]
+          }), getSchemaTpl('fieldSet', {
+            title: i18n("a170a375b264f7fe0c02a7ca8c268784"),
+            collapsable: false,
+            body: [{
+              type: 'button-group-select',
+              name: 'width',
+              size: 'sm',
+              label: false,
+              pipeIn: function (value) {
+                return value && value !== 'auto' ? 'manual' : value || '';
+              },
+              pipeOut: function (value) {
+                return value === 'manual' ? '20%' : value;
+              },
+              options: [{
+                value: '',
+                label: i18n("daa0f354e189c0da577ea25be13f874d")
+              }, {
+                value: 'auto',
+                label: i18n("4db804afe5c99f7ca4fe988ada35c77f")
+              }, {
+                value: 'manual',
+                label: i18n("2a3e7f5c382c56faf261a87573658325")
+              }],
+              description: "<% if (this.width && this.width !== \"auto\") {%>".concat(i18n("92e2c6523449dfad4350f58908260266"), "<%}%>")
+            }]
+          }), getSchemaTpl('fieldSet', {
+            title: i18n("11b7fc50778c89572391ec4c6c4b55e1"),
+            collapsable: false,
+            body: [{
+              type: 'button-group-select',
+              name: 'valign',
+              size: 'sm',
+              label: false,
+              tiled: true,
+              clearable: true,
+              options: [{
+                value: 'top',
+                label: i18n("2a6ad292447e6354ca39ee7f40d2fcc8")
+              }, {
+                value: 'middle',
+                label: i18n("1cc9a6949b47913462ff832cb684bdde")
+              }, {
+                value: 'bottom',
+                label: i18n("d68c21b6b65e7a2e361762b65b8a5032")
+              }, {
+                value: 'between',
+                label: i18n("da1b972efb29f850b50e219ad4d98ba5")
+              }]
+            }]
+          })]
+        }, {
+          title: i18n("afcde2611bdd13c1e65b4fb6a2f13425"),
+          body: [getSchemaTpl('className', {
+            name: 'columnClassName',
+            label: i18n("129b16a89a82c6d5e03ab075633b3892"),
+            description: i18n("d34cc10492e80595a901a292d0c16bb8")
+          })]
+        }])];
+      }
+    };
+
+    _this.vWrapperResolve = function (dom) {
+      return dom;
+    };
+
+    _this.overrides = {
+      renderColumn: function (node, index) {
+        var _a, _b;
+
+        var dom = this.super(node, index);
+        var info = this.props.$$editor;
+
+        if (info && node.$$id) {
+          var plugin = info.plugin;
+          var region = (_b = (_a = plugin.vRendererConfig) === null || _a === void 0 ? void 0 : _a.regions) === null || _b === void 0 ? void 0 : _b.body;
+
+          if (!region) {
+            return dom;
+          }
+
+          return React__default.createElement(VRenderer, {
+            key: node.$$id,
+            type: info.type,
+            plugin: info.plugin,
+            renderer: info.renderer,
+            "$schema": "" // /schemas/GridColumn.json
+            ,
+            hostId: info.id,
+            memberIndex: index,
+            name: "\u7B2C".concat(index + 1, "\u5217"),
+            id: node.$$id,
+            draggable: false,
+            schemaPath: "".concat(info.schemaPath, "/hbox/").concat(index),
+            wrapperResolve: plugin.vWrapperResolve,
+            path: "".concat(this.props.$path, "/").concat(index),
+            data: this.props.data,
+            widthMutable: true
+          }, region ? React__default.createElement(RegionWrapper, {
+            key: region.key,
+            preferTag: region.preferTag,
+            name: region.key,
+            label: region.label,
+            regionConfig: region,
+            placeholder: region.placeholder,
+            editorStore: plugin.manager.store,
+            manager: plugin.manager,
+            children: dom,
+            wrapperResolve: region.wrapperResolve,
+            rendererName: info.renderer.name
+          }) : dom);
+        }
+
+        return dom;
+      }
+    };
+    return _this;
+  } // buildEditorPanel(context: BaseEventContext, panels: Array<BasicPanelItem>) {
+  //   super.buildEditorPanel(context, panels);
+  //   const parent = context.node.parent?.host as EditorNodeType;
+  //   if (
+  //     parent?.info?.plugin === this &&
+  //     (this.vRendererConfig.panelControls ||
+  //       this.vRendererConfig.panelControlsCreator)
+  //   ) {
+  //     panels.push({
+  //       key: 'grid',
+  //       order: 100,
+  //       icon: this.vRendererConfig.panelIcon || 'fa fa-tablet',
+  //       title: this.vRendererConfig.panelTitle || '格子',
+  //       render: this.manager.makeSchemaFormRender({
+  //         body: this.vRendererConfig.panelControlsCreator
+  //           ? this.vRendererConfig.panelControlsCreator(context)
+  //           : this.vRendererConfig.panelControls!
+  //       })
+  //     });
+  //   }
+  // }
+
+
+  HBoxPlugin.prototype.afterResolveJsonSchema = function (event) {
+    var _a, _b;
+
+    var context = event.context;
+    var parent = (_a = context.node.parent) === null || _a === void 0 ? void 0 : _a.host;
+
+    if (((_b = parent === null || parent === void 0 ? void 0 : parent.info) === null || _b === void 0 ? void 0 : _b.plugin) === this) {
+      event.setData('/schemas/HBoxColumn.json');
+    }
+  };
+
+  HBoxPlugin.prototype.buildEditorContextMenu = function (context, menus) {
+    var _this = this;
+
+    var _a;
+
+    if (context.selections.length || ((_a = context.info) === null || _a === void 0 ? void 0 : _a.plugin) !== this) {
+      return;
+    }
+
+    if (context.node.isVitualRenderer) {
+      menus.push('|');
+      menus.push({
+        label: i18n("4bfd6e7e1ec0fe485aa0e7741d1670db"),
+        onSelect: function () {
+          return _this.insertColumnBefore(context);
+        }
+      });
+      menus.push({
+        label: i18n("9d75cc0b193601391a139285d55a3493"),
+        onSelect: function () {
+          return _this.insertColumnAfter(context);
+        }
+      });
+      menus.push('|');
+      menus.push({
+        label: i18n("57ff158884582ed498a87d03aed46146"),
+        onSelect: function () {
+          return _this.insertRowBefore(context.node.host);
+        }
+      });
+      menus.push({
+        label: i18n("bd63eab86ac0e0b35a06d0f24a098096"),
+        onSelect: function () {
+          return _this.insertRowAfter(context.node.host);
+        }
+      });
+    } else {
+      menus.push('|');
+      menus.push({
+        label: i18n("57ff158884582ed498a87d03aed46146"),
+        onSelect: function () {
+          return _this.insertRowBefore(context.node);
+        }
+      });
+      menus.push({
+        label: i18n("bd63eab86ac0e0b35a06d0f24a098096"),
+        onSelect: function () {
+          return _this.insertRowAfter(context.node);
+        }
+      });
+    }
+  };
+
+  HBoxPlugin.prototype.onWidthChangeStart = function (event) {
+    var _a, _b;
+
+    var context = event.context;
+    var node = context.node;
+
+    if (((_a = node.info) === null || _a === void 0 ? void 0 : _a.plugin) !== this) {
+      return;
+    }
+
+    var host = node.host;
+
+    if (!host || ((_b = host.info) === null || _b === void 0 ? void 0 : _b.plugin) !== this) {
+      return;
+    }
+
+    var dom = context.dom;
+    var parent = dom.parentElement;
+
+    if (!parent) {
+      return;
+    }
+
+    var resizer = context.resizer;
+    var frameRect = parent.getBoundingClientRect();
+    var columns = host.schema.columns;
+    var index = node.index;
+    var finalWidth = columns[index].width;
+    var rect = dom.getBoundingClientRect();
+    event.setData({
+      onMove: function (e) {
+        var width = e.pageX - rect.left;
+        var percent = finalWidth = "".concat(Math.max(1, Math.min(99, Math.round(100 * width / frameRect.width))), "%");
+        columns = columns.concat();
+        columns[index] = __assign(__assign({}, columns[index]), {
+          width: percent
+        });
+        resizer.setAttribute('data-value', percent);
+        host.updateState({
+          columns: columns
+        });
+        requestAnimationFrame(function () {
+          node.calculateHighlightBox();
+        });
+      },
+      onEnd: function () {
+        host.updateState({}, true);
+        resizer.removeAttribute('data-value');
+        node.updateSchema({
+          width: finalWidth
+        });
+        requestAnimationFrame(function () {
+          node.calculateHighlightBox();
+        });
+      }
+    });
+  };
+
+  HBoxPlugin.prototype.insertRowAfter = function (node) {
+    var _a;
+
+    if (((_a = node.info) === null || _a === void 0 ? void 0 : _a.plugin) !== this) {
+      return;
+    }
+
+    var store = this.manager.store;
+    var schema = store.schema;
+    var id = node.id;
+    store.traceableSetSchema(JSONChangeInArray(schema, id, function (arr, node, index) {
+      arr.splice(index + 1, 0, JSONPipeIn({
+        type: 'hbox',
+        align: node.align,
+        valign: node.valign,
+        columns: node.columns.map(function (column) {
+          return {
+            body: [],
+            width: column === null || column === void 0 ? void 0 : column.width
+          };
+        })
+      }));
+    }));
+  };
+
+  HBoxPlugin.prototype.insertRowBefore = function (node) {
+    var _a;
+
+    if (((_a = node.info) === null || _a === void 0 ? void 0 : _a.plugin) !== this) {
+      return;
+    }
+
+    var store = this.manager.store;
+    var id = node.id;
+    var schema = store.schema;
+    store.traceableSetSchema(JSONChangeInArray(schema, id, function (arr, node, index) {
+      arr.splice(index, 0, JSONPipeIn({
+        type: 'hbox',
+        align: node.align,
+        valign: node.valign,
+        columns: node.columns.map(function (column) {
+          return {
+            body: [],
+            width: column === null || column === void 0 ? void 0 : column.width
+          };
+        })
+      }));
+    }));
+  };
+
+  HBoxPlugin.prototype.insertColumnBefore = function (context) {
+    var _a;
+
+    var node = context.node;
+
+    if (((_a = node.info) === null || _a === void 0 ? void 0 : _a.plugin) !== this) {
+      return;
+    }
+
+    var store = this.manager.store;
+    var schema = store.schema;
+    var id = context.id;
+    store.traceableSetSchema(JSONChangeInArray(schema, id, function (arr, node, index) {
+      arr.splice(index, 0, JSONPipeIn({
+        body: []
+      }));
+    }));
+  };
+
+  HBoxPlugin.prototype.insertColumnAfter = function (context) {
+    var _a;
+
+    var node = context.node;
+
+    if (((_a = node.info) === null || _a === void 0 ? void 0 : _a.plugin) !== this) {
+      return;
+    }
+
+    var id = context.id;
+    var store = this.manager.store;
+    var schema = store.schema;
+    store.traceableSetSchema(JSONChangeInArray(schema, id, function (arr, node, index) {
+      arr.splice(index + 1, 0, JSONPipeIn({
+        body: []
+      }));
+    }));
+  };
+
+  return HBoxPlugin;
+}(BasePlugin);
+registerEditorPlugin(HBoxPlugin);
+
+export { HBoxPlugin };

package/esm/plugin/IFrame.d.ts

@@ -0,0 +1,31 @@
+/// <reference types="react" />
+import { BasePlugin, BaseEventContext } from 'amis-editor-core';
+export declare class IFramePlugin extends BasePlugin {
+    rendererName: string;
+    $schema: string;
+    name: string;
+    isBaseComponent: boolean;
+    description: string;
+    tags: string[];
+    icon: string;
+    pluginIcon: string;
+    scaffold: {
+        type: string;
+        src: string;
+    };
+    previewSchema: {
+        type: string;
+        tpl: string;
+    };
+    panelTitle: string;
+    panelJustify: boolean;
+    panelBodyCreator: (context: BaseEventContext) => any;
+    renderRenderer(props: any): import("react").DetailedReactHTMLElement<{
+        key: any;
+        className: string;
+        children: import("react").DetailedReactHTMLElement<{
+            className: string;
+            children: string;
+        }, HTMLElement>;
+    }, HTMLElement>;
+}