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

package/lib/plugin/Grid.js

@@ -1,5 +1,5 @@
 /**
- * amis-editor v5.2.0-beta.1
+ * amis-editor v5.2.0-beta.2
  * Copyright 2018-2022 @fex
  */
 
@@ -10,671 +10,705 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var tslib = require('tslib');
 var amis = require('amis');
 var React = require('react');
-var AMisCodeEditor = require('amis-editor-core');
+var amisEditorCore = require('amis-editor-core');
+var i18nRuntime = require('i18n-runtime');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
-var GridPlugin = /** @class */ (function (_super) {
-    tslib.__extends(GridPlugin, _super);
-    function GridPlugin() {
-        var _this = _super !== null && _super.apply(this, arguments) || this;
-        // 关联渲染器名字
-        _this.rendererName = 'grid';
-        _this.$schema = '/schemas/GridSchema.json';
-        // 组件名称
-        _this.name = '分栏';
-        _this.isBaseComponent = true;
-        _this.description = '分栏布局';
-        _this.docLink = '/amis/zh-CN/components/grid';
-        _this.tags = ['容器'];
-        _this.icon = 'fa fa-th';
-        /*
-        scaffolds = [
-          {
-            name: '两栏',
-            description: '两栏布局',
-            scaffold: {
-              type: 'grid',
-              columns: [
-                {
-                  body: []
-                },
+var GridPlugin =
+/** @class */
+function (_super) {
+  tslib.__extends(GridPlugin, _super);
+
+  function GridPlugin() {
+    var _this = _super !== null && _super.apply(this, arguments) || this; // 关联渲染器名字
+
+
+    _this.rendererName = 'grid';
+    _this.$schema = '/schemas/GridSchema.json'; // 组件名称
+
+    _this.name = i18nRuntime.i18n("2820712cac089483cf2b4a0c939fc780");
+    _this.isBaseComponent = true;
+    _this.description = i18nRuntime.i18n("9e17d57a0ba39254a75c0265aa3063ca");
+    _this.docLink = '/amis/zh-CN/components/grid';
+    _this.tags = [i18nRuntime.i18n("22c799040acdb2601b437ed5449de076")];
+    _this.icon = 'fa fa-th';
+    _this.pluginIcon = 'grid-plugin';
+    /*
+    scaffolds = [
+      {
+        name: '两栏',
+        description: '两栏布局',
+        scaffold: {
+          type: 'grid',
+          columns: [
+            {
+              body: []
+            },
+            {
+              body: []
+            }
+          ]
+        },
+               previewSchema: {
+          type: 'grid',
+          columns: [
+            {
+              body: [
                 {
-                  body: []
+                  type: 'tpl',
+                  tpl: '栏',
+                  inline: false,
+                  className: 'bg-light wrapper'
                 }
               ]
             },
-      
-            previewSchema: {
-              type: 'grid',
-              columns: [
-                {
-                  body: [
-                    {
-                      type: 'tpl',
-                      tpl: '栏',
-                      inline: false,
-                      className: 'bg-light wrapper'
-                    }
-                  ]
-                },
+            {
+              body: [
                 {
-                  body: [
-                    {
-                      type: 'tpl',
-                      tpl: '栏',
-                      className: 'bg-light wrapper',
-                      inline: false
-                    }
-                  ]
+                  type: 'tpl',
+                  tpl: '栏',
+                  className: 'bg-light wrapper',
+                  inline: false
                 }
               ]
             }
-          },
-      
-          {
-            name: '三栏',
-            description: '三栏布局',
-            scaffold: {
-              type: 'grid',
-              columns: [
-                {
-                  body: []
-                },
-                {
-                  body: []
-                },
+          ]
+        }
+      },
+             {
+        name: '三栏',
+        description: '三栏布局',
+        scaffold: {
+          type: 'grid',
+          columns: [
+            {
+              body: []
+            },
+            {
+              body: []
+            },
+            {
+              body: []
+            }
+          ]
+        },
+               previewSchema: {
+          type: 'grid',
+          columns: [
+            {
+              body: [
                 {
-                  body: []
+                  type: 'tpl',
+                  tpl: '栏',
+                  inline: false,
+                  className: 'bg-light wrapper'
                 }
               ]
             },
-      
-            previewSchema: {
-              type: 'grid',
-              columns: [
-                {
-                  body: [
-                    {
-                      type: 'tpl',
-                      tpl: '栏',
-                      inline: false,
-                      className: 'bg-light wrapper'
-                    }
-                  ]
-                },
-                {
-                  body: [
-                    {
-                      type: 'tpl',
-                      tpl: '栏',
-                      className: 'bg-light wrapper',
-                      inline: false
-                    }
-                  ]
-                },
+            {
+              body: [
                 {
-                  body: [
-                    {
-                      type: 'tpl',
-                      tpl: '栏',
-                      className: 'bg-light wrapper',
-                      inline: false
-                    }
-                  ]
+                  type: 'tpl',
+                  tpl: '栏',
+                  className: 'bg-light wrapper',
+                  inline: false
                 }
               ]
-            }
-          }
-        ];
-        */
-        // 仅保留一个分栏布局
-        _this.scaffold = {
-            type: 'grid',
-            columns: [
-                {
-                    body: []
-                },
-                {
-                    body: []
-                }
-            ]
-        };
-        _this.previewSchema = {
-            type: 'grid',
-            columns: [
-                {
-                    body: [
-                        {
-                            type: 'tpl',
-                            tpl: '栏',
-                            inline: false,
-                            className: 'bg-light wrapper'
-                        }
-                    ]
-                },
-                {
-                    body: [
-                        {
-                            type: 'tpl',
-                            tpl: '栏',
-                            className: 'bg-light wrapper',
-                            inline: false
-                        }
-                    ]
-                }
-            ]
-        };
-        _this.panelTitle = '分栏布局';
-        _this.panelWithOutOthers = false;
-        _this.vRendererConfig = {
-            regions: {
-                body: {
-                    key: 'body',
-                    label: '内容区',
-                    placeholder: '栏',
-                    wrapperResolve: function (dom) { return dom; }
-                }
             },
-            panelTitle: '栏',
-            panelBodyCreator: function (context) {
-                var host = context.node.host;
-                return [
-                    AMisCodeEditor.getSchemaTpl('tabs', [
-                        {
-                            title: '属性',
-                            className: 'p-none',
-                            body: [
-                                AMisCodeEditor.getSchemaTpl('collapseGroup', [
-                                    {
-                                        title: '插入',
-                                        body: [
-                                            {
-                                                type: 'wrapper',
-                                                size: 'none',
-                                                className: 'grid grid-cols-2 gap-4',
-                                                body: [
-                                                    host.isSecondFactor
-                                                        ? null
-                                                        : {
-                                                            children: (React__default["default"].createElement(amis.Button, { size: "sm", onClick: function () {
-                                                                    return _this.insertRowAfter(context.node.host);
-                                                                } },
-                                                                React__default["default"].createElement(AMisCodeEditor.Icon, { className: "icon", icon: "arrow-to-bottom" }),
-                                                                React__default["default"].createElement("span", null, "\u4E0B\u65B9\u63D2\u5165\u65B0\u884C")))
-                                                        },
-                                                    host.isSecondFactor
-                                                        ? null
-                                                        : {
-                                                            children: (React__default["default"].createElement(amis.Button, { size: "sm", onClick: function () {
-                                                                    return _this.insertRowBefore(context.node.host);
-                                                                } },
-                                                                React__default["default"].createElement(AMisCodeEditor.Icon, { className: "icon", icon: "top-arrow-to-top" }),
-                                                                React__default["default"].createElement("span", null, "\u4E0A\u65B9\u63D2\u5165\u65B0\u884C")))
-                                                        },
-                                                    {
-                                                        children: (React__default["default"].createElement(amis.Button, { size: "sm", onClick: function () { return _this.insertColumnBefore(context); } },
-                                                            React__default["default"].createElement(AMisCodeEditor.Icon, { className: "icon", icon: "left-arrow-to-left" }),
-                                                            React__default["default"].createElement("span", null, "\u5DE6\u4FA7\u63D2\u5165\u65B0\u5217")))
-                                                    },
-                                                    {
-                                                        children: (React__default["default"].createElement(amis.Button, { size: "sm", onClick: function () { return _this.insertColumnAfter(context); } },
-                                                            React__default["default"].createElement(AMisCodeEditor.Icon, { className: "icon", icon: "arrow-to-right" }),
-                                                            React__default["default"].createElement("span", null, "\u53F3\u4FA7\u63D2\u5165\u65B0\u5217")))
-                                                    }
-                                                ].filter(function (item) { return item; })
-                                            }
-                                        ]
-                                    },
-                                    {
-                                        title: '宽度',
-                                        body: [
-                                            {
-                                                type: 'button-group-select',
-                                                name: 'md',
-                                                size: 'sm',
-                                                label: false,
-                                                pipeIn: function (value) {
-                                                    return typeof value === 'number' ? 'manual' : value || '';
-                                                },
-                                                pipeOut: function (value) { return (value === 'manual' ? 1 : value); },
-                                                tiled: true,
-                                                options: [
-                                                    {
-                                                        value: '',
-                                                        label: '适配宽度'
-                                                    },
-                                                    {
-                                                        value: 'auto',
-                                                        label: '适配内容'
-                                                    },
-                                                    {
-                                                        value: 'manual',
-                                                        label: '手动'
-                                                    }
-                                                ]
-                                            },
-                                            {
-                                                visibleOn: 'typeof this.md === "number"',
-                                                label: '宽度占比',
-                                                type: 'input-range',
-                                                name: 'md',
-                                                min: 1,
-                                                max: 12,
-                                                step: 1
-                                            }
-                                        ]
-                                    },
-                                    {
-                                        title: '布局',
-                                        body: [
-                                            {
-                                                type: 'button-group-select',
-                                                name: 'valign',
-                                                size: 'sm',
-                                                label: false,
-                                                tiled: true,
-                                                clearable: true,
-                                                options: [
-                                                    {
-                                                        value: 'top',
-                                                        label: '顶部对齐'
-                                                    },
-                                                    {
-                                                        value: 'middle',
-                                                        label: '中间对齐'
-                                                    },
-                                                    {
-                                                        value: 'bottom',
-                                                        label: '底部对齐'
-                                                    },
-                                                    {
-                                                        value: 'between',
-                                                        label: '两端对齐'
-                                                    }
-                                                ]
-                                            }
-                                        ]
-                                    }
-                                ])
-                            ]
-                        },
-                        {
-                            title: '外观',
-                            body: [
-                                _this.panelWithOutOthers
-                                    ? null
-                                    : AMisCodeEditor.getSchemaTpl('className', {
-                                        label: '栏 CSS 类名',
-                                        name: 'columnClassName'
-                                    })
-                            ]
-                        }
-                    ])
-                ];
-            }
-        };
-        _this.vWrapperResolve = function (dom) { return dom; };
-        _this.overrides = {
-            renderColumn: function (node, index, length) {
-                var _a, _b;
-                var dom = this.super(node, index, length);
-                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["default"].createElement(AMisCodeEditor.VRenderer, { key: "".concat(node.$$id, "-").concat(index), type: info.type, plugin: info.plugin, renderer: info.renderer, "$schema": "/schemas/GridColumn.json", hostId: info.id, memberIndex: index, name: "\u7B2C".concat(index + 1, "\u680F"), id: node.$$id, draggable: false, schemaPath: "".concat(info.schemaPath, "/grid/").concat(index), wrapperResolve: plugin.vWrapperResolve, path: "".concat(this.props.$path, "/").concat(index), data: this.props.data, widthMutable: true }, region ? (React__default["default"].createElement(AMisCodeEditor.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)));
+            {
+              body: [
+                {
+                  type: 'tpl',
+                  tpl: '栏',
+                  className: 'bg-light wrapper',
+                  inline: false
                 }
-                return dom;
+              ]
             }
-        };
-        return _this;
-    }
-    GridPlugin.prototype.panelBodyCreator = function (context) {
-        var _this = this;
-        var asSecondFactor = context.secondFactor;
-        return [
-            AMisCodeEditor.getSchemaTpl('tabs', [
-                {
-                    title: '属性',
-                    className: 'p-none',
-                    body: [
-                        AMisCodeEditor.getSchemaTpl('collapseGroup', [
-                            {
-                                title: '插入',
-                                body: [
-                                    asSecondFactor
-                                        ? null
-                                        : {
-                                            type: 'wrapper',
-                                            size: 'none',
-                                            className: 'grid grid-cols-2 gap-4 mb-4',
-                                            body: [
-                                                {
-                                                    children: (React__default["default"].createElement(amis.Button, { size: "sm", onClick: function () {
-                                                            return _this.insertRowAfter(context.node);
-                                                        } },
-                                                        React__default["default"].createElement(AMisCodeEditor.Icon, { className: "icon", icon: "arrow-to-bottom" }),
-                                                        React__default["default"].createElement("span", null, "\u4E0B\u65B9\u63D2\u5165\u65B0\u884C")))
-                                                },
-                                                {
-                                                    children: (React__default["default"].createElement(amis.Button, { size: "sm", onClick: function () {
-                                                            return _this.insertRowBefore(context.node);
-                                                        } },
-                                                        React__default["default"].createElement(AMisCodeEditor.Icon, { className: "icon", icon: "top-arrow-to-top" }),
-                                                        React__default["default"].createElement("span", null, "\u4E0A\u65B9\u63D2\u5165\u65B0\u884C")))
-                                                }
-                                            ]
-                                        }
-                                ].filter(function (item) { return item; })
-                            },
-                            {
-                                title: '布局',
-                                body: [
-                                    {
-                                        label: '列数',
-                                        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(AMisCodeEditor.repeatArray({
-                                                        body: []
-                                                    }, value - origin.length));
-                                                }
-                                            }
-                                            return origin;
-                                        },
-                                        options: AMisCodeEditor.repeatArray(null, 12).map(function (_, index) { return ({
-                                            label: "".concat(index + 1),
-                                            value: index + 1
-                                        }); })
-                                    },
-                                    {
-                                        type: 'button-group-select',
-                                        name: 'gap',
-                                        label: '列间距',
-                                        size: 'sm',
-                                        clearable: true,
-                                        tiled: true,
-                                        options: [
-                                            {
-                                                label: '无',
-                                                value: 'none'
-                                            },
-                                            {
-                                                label: '极小',
-                                                value: 'xs'
-                                            },
-                                            {
-                                                label: '小',
-                                                value: 'sm'
-                                            },
-                                            {
-                                                label: '正常',
-                                                value: 'base'
-                                            },
-                                            {
-                                                label: '中',
-                                                value: 'md'
-                                            },
-                                            {
-                                                label: '大',
-                                                value: 'lg'
-                                            }
-                                        ]
-                                    },
-                                    {
-                                        type: 'button-group-select',
-                                        name: 'align',
-                                        size: 'sm',
-                                        label: '水平对齐',
-                                        tiled: true,
-                                        pipeIn: AMisCodeEditor.defaultValue('left'),
-                                        options: [
-                                            {
-                                                value: 'left',
-                                                label: '左对齐'
-                                            },
-                                            {
-                                                value: 'center',
-                                                label: '中间对齐'
-                                            },
-                                            {
-                                                value: 'right',
-                                                label: '右对齐'
-                                            },
-                                            {
-                                                value: 'between',
-                                                label: '两端对齐'
-                                            }
-                                        ]
-                                    },
-                                    {
-                                        type: 'button-group-select',
-                                        name: 'valign',
-                                        size: 'sm',
-                                        label: '垂直对齐',
-                                        tiled: true,
-                                        pipeIn: AMisCodeEditor.defaultValue('top'),
-                                        options: [
-                                            {
-                                                value: 'top',
-                                                label: '顶部对齐'
-                                            },
-                                            {
-                                                value: 'middle',
-                                                label: '中间对齐'
-                                            },
-                                            {
-                                                value: 'bottom',
-                                                label: '底部对齐'
-                                            },
-                                            {
-                                                value: 'between',
-                                                label: '两端对齐'
-                                            }
-                                        ]
-                                    }
-                                ]
-                            }
-                        ])
-                    ]
-                },
-                this.panelWithOutOthers
-                    ? null
-                    : {
-                        title: '外观',
-                        body: [
-                            AMisCodeEditor.getSchemaTpl('className'),
-                            AMisCodeEditor.getSchemaTpl('subFormItemMode'),
-                            AMisCodeEditor.getSchemaTpl('subFormHorizontalMode'),
-                            AMisCodeEditor.getSchemaTpl('subFormHorizontal')
-                        ]
-                    }
-            ])
-        ];
-    };
-    GridPlugin.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/GridColumn.json');
+          ]
         }
+      }
+    ];
+    */
+    // 仅保留一个分栏布局
+
+    _this.scaffold = {
+      type: 'grid',
+      columns: [{
+        body: []
+      }, {
+        body: []
+      }]
     };
-    GridPlugin.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: '左侧插入一栏',
-                onSelect: function () { return _this.insertColumnBefore(context); }
-            });
-            menus.push({
-                label: '右侧插入一栏',
-                onSelect: function () { return _this.insertColumnAfter(context); }
-            });
-            menus.push('|');
-            menus.push({
-                label: '上方插入一行',
-                onSelect: function () { return _this.insertRowBefore(context.node.host); }
-            });
-            menus.push({
-                label: '下方插入一行',
-                onSelect: function () { return _this.insertRowAfter(context.node.host); }
-            });
-        }
-        else {
-            menus.push('|');
-            menus.push({
-                label: '上方插入一行',
-                onSelect: function () { return _this.insertRowBefore(context.node); }
-            });
-            menus.push({
-                label: '下方插入一行',
-                onSelect: function () { return _this.insertRowAfter(context.node); }
-            });
+    _this.previewSchema = {
+      type: 'grid',
+      columns: [{
+        body: [{
+          type: 'tpl',
+          tpl: i18nRuntime.i18n("e63907bf0db529e84866d1ae737bfc0d"),
+          inline: false,
+          className: 'bg-light wrapper'
+        }]
+      }, {
+        body: [{
+          type: 'tpl',
+          tpl: i18nRuntime.i18n("e63907bf0db529e84866d1ae737bfc0d"),
+          className: 'bg-light wrapper',
+          inline: false
+        }]
+      }]
+    };
+    _this.panelTitle = i18nRuntime.i18n("9e17d57a0ba39254a75c0265aa3063ca");
+    _this.panelWithOutOthers = false;
+    _this.vRendererConfig = {
+      regions: {
+        body: {
+          key: 'body',
+          label: i18nRuntime.i18n("132a78bdf68d6d17bde00aa807bbf032"),
+          placeholder: i18nRuntime.i18n("e63907bf0db529e84866d1ae737bfc0d"),
+          wrapperResolve: function (dom) {
+            return dom;
+          }
         }
+      },
+      panelTitle: i18nRuntime.i18n("e63907bf0db529e84866d1ae737bfc0d"),
+      panelBodyCreator: function (context) {
+        var host = context.node.host;
+        return [amisEditorCore.getSchemaTpl('tabs', [{
+          title: i18nRuntime.i18n("24d67862f87f439db7ca957aecb77cce"),
+          className: 'p-none',
+          body: [amisEditorCore.getSchemaTpl('collapseGroup', [{
+            title: i18nRuntime.i18n("9bdb07e72d3a9a6084201a7398523f5a"),
+            body: [{
+              type: 'wrapper',
+              size: 'none',
+              className: 'grid grid-cols-2 gap-4',
+              body: [host.isSecondFactor ? null : {
+                children: React__default["default"].createElement(amis.Button, {
+                  size: "sm",
+                  onClick: function () {
+                    return _this.insertRowAfter(context.node.host);
+                  }
+                }, React__default["default"].createElement(amisEditorCore.Icon, {
+                  className: "icon",
+                  icon: "arrow-to-bottom"
+                }), React__default["default"].createElement("span", null, "\u4E0B\u65B9\u63D2\u5165\u65B0\u884C"))
+              }, host.isSecondFactor ? null : {
+                children: React__default["default"].createElement(amis.Button, {
+                  size: "sm",
+                  onClick: function () {
+                    return _this.insertRowBefore(context.node.host);
+                  }
+                }, React__default["default"].createElement(amisEditorCore.Icon, {
+                  className: "icon",
+                  icon: "top-arrow-to-top"
+                }), React__default["default"].createElement("span", null, "\u4E0A\u65B9\u63D2\u5165\u65B0\u884C"))
+              }, {
+                children: React__default["default"].createElement(amis.Button, {
+                  size: "sm",
+                  onClick: function () {
+                    return _this.insertColumnBefore(context);
+                  }
+                }, React__default["default"].createElement(amisEditorCore.Icon, {
+                  className: "icon",
+                  icon: "left-arrow-to-left"
+                }), React__default["default"].createElement("span", null, "\u5DE6\u4FA7\u63D2\u5165\u65B0\u5217"))
+              }, {
+                children: React__default["default"].createElement(amis.Button, {
+                  size: "sm",
+                  onClick: function () {
+                    return _this.insertColumnAfter(context);
+                  }
+                }, React__default["default"].createElement(amisEditorCore.Icon, {
+                  className: "icon",
+                  icon: "arrow-to-right"
+                }), React__default["default"].createElement("span", null, "\u53F3\u4FA7\u63D2\u5165\u65B0\u5217"))
+              }].filter(function (item) {
+                return item;
+              })
+            }]
+          }, {
+            title: i18nRuntime.i18n("c28479019e24e0e4745f4948e9e97ee7"),
+            body: [{
+              type: 'button-group-select',
+              name: 'md',
+              size: 'sm',
+              label: false,
+              pipeIn: function (value) {
+                return typeof value === 'number' ? 'manual' : value || '';
+              },
+              pipeOut: function (value) {
+                return value === 'manual' ? 1 : value;
+              },
+              tiled: true,
+              options: [{
+                value: '',
+                label: i18nRuntime.i18n("daa0f354e189c0da577ea25be13f874d")
+              }, {
+                value: 'auto',
+                label: i18nRuntime.i18n("4db804afe5c99f7ca4fe988ada35c77f")
+              }, {
+                value: 'manual',
+                label: i18nRuntime.i18n("2a3e7f5c382c56faf261a87573658325")
+              }]
+            }, {
+              visibleOn: 'typeof this.md === "number"',
+              label: i18nRuntime.i18n("d5d885add2551454955bd70411769c88"),
+              type: 'input-range',
+              name: 'md',
+              min: 1,
+              max: 12,
+              step: 1
+            }]
+          }, {
+            title: i18nRuntime.i18n("5aefca559c5a41d10078e21e6d616825"),
+            body: [{
+              type: 'button-group-select',
+              name: 'valign',
+              size: 'sm',
+              label: false,
+              tiled: true,
+              clearable: true,
+              options: [{
+                value: 'top',
+                label: i18nRuntime.i18n("2a6ad292447e6354ca39ee7f40d2fcc8")
+              }, {
+                value: 'middle',
+                label: i18nRuntime.i18n("1cc9a6949b47913462ff832cb684bdde")
+              }, {
+                value: 'bottom',
+                label: i18nRuntime.i18n("d68c21b6b65e7a2e361762b65b8a5032")
+              }, {
+                value: 'between',
+                label: i18nRuntime.i18n("da1b972efb29f850b50e219ad4d98ba5")
+              }]
+            }]
+          }])]
+        }, {
+          title: i18nRuntime.i18n("afcde2611bdd13c1e65b4fb6a2f13425"),
+          body: [_this.panelWithOutOthers ? null : amisEditorCore.getSchemaTpl('className', {
+            label: i18nRuntime.i18n("19432e481cefd1bf88fc707f20ea62c5"),
+            name: 'columnClassName'
+          })]
+        }])];
+      }
     };
-    GridPlugin.prototype.onWidthChangeStart = function (event) {
+
+    _this.vWrapperResolve = function (dom) {
+      return dom;
+    };
+
+    _this.overrides = {
+      renderColumn: function (node, index, length) {
         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 dom = this.super(node, index, length);
+        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["default"].createElement(amisEditorCore.VRenderer, {
+            key: "".concat(node.$$id, "-").concat(index),
+            type: info.type,
+            plugin: info.plugin,
+            renderer: info.renderer,
+            "$schema": "/schemas/GridColumn.json",
+            hostId: info.id,
+            memberIndex: index,
+            name: "\u7B2C".concat(index + 1, "\u680F"),
+            id: node.$$id,
+            draggable: false,
+            schemaPath: "".concat(info.schemaPath, "/grid/").concat(index),
+            wrapperResolve: plugin.vWrapperResolve,
+            path: "".concat(this.props.$path, "/").concat(index),
+            data: this.props.data,
+            widthMutable: true
+          }, region ? React__default["default"].createElement(amisEditorCore.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);
         }
-        var host = node.host;
-        if (!host || ((_b = host.info) === null || _b === void 0 ? void 0 : _b.plugin) !== this) {
-            return;
+
+        return dom;
+      }
+    };
+    return _this;
+  }
+
+  GridPlugin.prototype.panelBodyCreator = function (context) {
+    var _this = this;
+
+    var asSecondFactor = context.secondFactor;
+    return [amisEditorCore.getSchemaTpl('tabs', [{
+      title: i18nRuntime.i18n("24d67862f87f439db7ca957aecb77cce"),
+      className: 'p-none',
+      body: [amisEditorCore.getSchemaTpl('collapseGroup', [{
+        title: i18nRuntime.i18n("9bdb07e72d3a9a6084201a7398523f5a"),
+        body: [asSecondFactor ? null : {
+          type: 'wrapper',
+          size: 'none',
+          className: 'grid grid-cols-2 gap-4 mb-4',
+          body: [{
+            children: React__default["default"].createElement(amis.Button, {
+              size: "sm",
+              onClick: function () {
+                return _this.insertRowAfter(context.node);
+              }
+            }, React__default["default"].createElement(amisEditorCore.Icon, {
+              className: "icon",
+              icon: "arrow-to-bottom"
+            }), React__default["default"].createElement("span", null, "\u4E0B\u65B9\u63D2\u5165\u65B0\u884C"))
+          }, {
+            children: React__default["default"].createElement(amis.Button, {
+              size: "sm",
+              onClick: function () {
+                return _this.insertRowBefore(context.node);
+              }
+            }, React__default["default"].createElement(amisEditorCore.Icon, {
+              className: "icon",
+              icon: "top-arrow-to-top"
+            }), React__default["default"].createElement("span", null, "\u4E0A\u65B9\u63D2\u5165\u65B0\u884C"))
+          }]
+        }].filter(function (item) {
+          return item;
+        })
+      }, {
+        title: i18nRuntime.i18n("5aefca559c5a41d10078e21e6d616825"),
+        body: [{
+          label: i18nRuntime.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(amisEditorCore.repeatArray({
+                  body: []
+                }, value - origin.length));
+              }
+            }
+
+            return origin;
+          },
+          options: amisEditorCore.repeatArray(null, 12).map(function (_, index) {
+            return {
+              label: "".concat(index + 1),
+              value: index + 1
+            };
+          })
+        }, {
+          type: 'button-group-select',
+          name: 'gap',
+          label: i18nRuntime.i18n("c288b519484207bea1d51884a5e9acaf"),
+          size: 'sm',
+          clearable: true,
+          tiled: true,
+          options: [{
+            label: i18nRuntime.i18n("d81bb206a889656035b929cd8bb1ef10"),
+            value: 'none'
+          }, {
+            label: i18nRuntime.i18n("23ecf42cada8bf2715792d718544d107"),
+            value: 'xs'
+          }, {
+            label: i18nRuntime.i18n("391b8fa9c747a1799353ab856e666ad5"),
+            value: 'sm'
+          }, {
+            label: i18nRuntime.i18n("fd6e80f1e0199d6ecc3ee81ae04aa9ef"),
+            value: 'base'
+          }, {
+            label: i18nRuntime.i18n("aed1dfbc31703955e64806b799b67645"),
+            value: 'md'
+          }, {
+            label: i18nRuntime.i18n("ab18e30c0dc4093ceeda8961fac3d1f4"),
+            value: 'lg'
+          }]
+        }, {
+          type: 'button-group-select',
+          name: 'align',
+          size: 'sm',
+          label: i18nRuntime.i18n("98d695d6a6a48cfb4bc2f6396ee64787"),
+          tiled: true,
+          pipeIn: amisEditorCore.defaultValue('left'),
+          options: [{
+            value: 'left',
+            label: i18nRuntime.i18n("413f48cc71f71083ce532a86e3efdc21")
+          }, {
+            value: 'center',
+            label: i18nRuntime.i18n("1cc9a6949b47913462ff832cb684bdde")
+          }, {
+            value: 'right',
+            label: i18nRuntime.i18n("fd8e9572cc6bf87653c4d8f8b8dd0db9")
+          }, {
+            value: 'between',
+            label: i18nRuntime.i18n("da1b972efb29f850b50e219ad4d98ba5")
+          }]
+        }, {
+          type: 'button-group-select',
+          name: 'valign',
+          size: 'sm',
+          label: i18nRuntime.i18n("11b7fc50778c89572391ec4c6c4b55e1"),
+          tiled: true,
+          pipeIn: amisEditorCore.defaultValue('top'),
+          options: [{
+            value: 'top',
+            label: i18nRuntime.i18n("2a6ad292447e6354ca39ee7f40d2fcc8")
+          }, {
+            value: 'middle',
+            label: i18nRuntime.i18n("1cc9a6949b47913462ff832cb684bdde")
+          }, {
+            value: 'bottom',
+            label: i18nRuntime.i18n("d68c21b6b65e7a2e361762b65b8a5032")
+          }, {
+            value: 'between',
+            label: i18nRuntime.i18n("da1b972efb29f850b50e219ad4d98ba5")
+          }]
+        }]
+      }])]
+    }, this.panelWithOutOthers ? null : {
+      title: i18nRuntime.i18n("afcde2611bdd13c1e65b4fb6a2f13425"),
+      body: [amisEditorCore.getSchemaTpl('className'), amisEditorCore.getSchemaTpl('subFormItemMode'), amisEditorCore.getSchemaTpl('subFormHorizontalMode'), amisEditorCore.getSchemaTpl('subFormHorizontal')]
+    }])];
+  };
+
+  GridPlugin.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/GridColumn.json');
+    }
+  };
+
+  GridPlugin.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: i18nRuntime.i18n("9cc03fc4b3e87e8410e10357a219b44e"),
+        onSelect: function () {
+          return _this.insertColumnBefore(context);
         }
-        var dom = context.dom;
-        var parent = dom.parentElement;
-        if (!parent) {
-            return;
+      });
+      menus.push({
+        label: i18nRuntime.i18n("6b12fc99e2a46aed982d46b93ac191a0"),
+        onSelect: function () {
+          return _this.insertColumnAfter(context);
         }
-        var resizer = context.resizer;
-        var frameRect = parent.getBoundingClientRect();
-        var columns = host.schema.columns;
-        var index = node.index;
-        var finalMd = columns[index].md;
-        var rect = dom.getBoundingClientRect();
-        event.setData({
-            onMove: function (e) {
-                var width = e.pageX - rect.left;
-                var md = (finalMd = Math.max(1, Math.min(12, Math.round((12 * width) / frameRect.width))));
-                columns = columns.concat();
-                columns[index] = tslib.__assign(tslib.__assign({}, columns[index]), { md: md });
-                resizer.setAttribute('data-value', "".concat(md));
-                host.updateState({
-                    columns: columns
-                });
-                requestAnimationFrame(function () {
-                    node.calculateHighlightBox();
-                });
-            },
-            onEnd: function () {
-                host.updateState({}, true);
-                resizer.removeAttribute('data-value');
-                node.updateSchema({
-                    md: finalMd
-                });
-                requestAnimationFrame(function () {
-                    node.calculateHighlightBox();
-                });
-            }
-        });
-    };
-    GridPlugin.prototype.insertRowAfter = function (node) {
-        var _this = this;
-        var _a;
-        if (((_a = node.info) === null || _a === void 0 ? void 0 : _a.plugin) !== this) {
-            return;
+      });
+      menus.push('|');
+      menus.push({
+        label: i18nRuntime.i18n("57ff158884582ed498a87d03aed46146"),
+        onSelect: function () {
+          return _this.insertRowBefore(context.node.host);
         }
-        var store = this.manager.store;
-        var schema = store.schema;
-        var id = node.id;
-        store.traceableSetSchema(AMisCodeEditor.JSONChangeInArray(schema, id, function (arr, node, index) {
-            arr.splice(index + 1, 0, AMisCodeEditor.JSONPipeIn({
-                type: _this.rendererName || 'grid',
-                align: node.align,
-                valign: node.valign,
-                columns: node.columns.map(function (column) { return ({
-                    body: [],
-                    md: column === null || column === void 0 ? void 0 : column.md
-                }); })
-            }));
-        }));
-    };
-    GridPlugin.prototype.insertRowBefore = function (node) {
-        var _this = this;
-        var _a;
-        if (((_a = node.info) === null || _a === void 0 ? void 0 : _a.plugin) !== this) {
-            return;
+      });
+      menus.push({
+        label: i18nRuntime.i18n("bd63eab86ac0e0b35a06d0f24a098096"),
+        onSelect: function () {
+          return _this.insertRowAfter(context.node.host);
         }
-        var store = this.manager.store;
-        var schema = store.schema;
-        var id = node.id;
-        store.traceableSetSchema(AMisCodeEditor.JSONChangeInArray(schema, id, function (arr, node, index) {
-            arr.splice(index, 0, AMisCodeEditor.JSONPipeIn({
-                type: _this.rendererName || 'grid',
-                align: node.align,
-                valign: node.valign,
-                columns: node.columns.map(function (column) { return ({
-                    body: [],
-                    md: column === null || column === void 0 ? void 0 : column.md
-                }); })
-            }));
-        }));
-    };
-    GridPlugin.prototype.insertColumnBefore = function (context) {
-        var _a;
-        var node = context.node;
-        if (((_a = node.info) === null || _a === void 0 ? void 0 : _a.plugin) !== this) {
-            return;
+      });
+    } else {
+      menus.push('|');
+      menus.push({
+        label: i18nRuntime.i18n("57ff158884582ed498a87d03aed46146"),
+        onSelect: function () {
+          return _this.insertRowBefore(context.node);
         }
-        var store = this.manager.store;
-        var id = context.id;
-        var schema = store.schema;
-        store.traceableSetSchema(AMisCodeEditor.JSONChangeInArray(schema, id, function (arr, node, index) {
-            arr.splice(index, 0, AMisCodeEditor.JSONPipeIn({
-                body: []
-            }));
-        }));
-    };
-    GridPlugin.prototype.insertColumnAfter = function (context) {
-        var _a;
-        var node = context.node;
-        if (((_a = node.info) === null || _a === void 0 ? void 0 : _a.plugin) !== this) {
-            return;
+      });
+      menus.push({
+        label: i18nRuntime.i18n("bd63eab86ac0e0b35a06d0f24a098096"),
+        onSelect: function () {
+          return _this.insertRowAfter(context.node);
         }
-        var store = this.manager.store;
-        var schema = store.schema;
-        var id = context.id;
-        store.traceableSetSchema(AMisCodeEditor.JSONChangeInArray(schema, id, function (arr, node, index) {
-            arr.splice(index + 1, 0, AMisCodeEditor.JSONPipeIn({
-                body: []
-            }));
-        }));
-    };
-    return GridPlugin;
-}(AMisCodeEditor.BasePlugin));
-AMisCodeEditor.registerEditorPlugin(GridPlugin);
+      });
+    }
+  };
+
+  GridPlugin.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 finalMd = columns[index].md;
+    var rect = dom.getBoundingClientRect();
+    event.setData({
+      onMove: function (e) {
+        var width = e.pageX - rect.left;
+        var md = finalMd = Math.max(1, Math.min(12, Math.round(12 * width / frameRect.width)));
+        columns = columns.concat();
+        columns[index] = tslib.__assign(tslib.__assign({}, columns[index]), {
+          md: md
+        });
+        resizer.setAttribute('data-value', "".concat(md));
+        host.updateState({
+          columns: columns
+        });
+        requestAnimationFrame(function () {
+          node.calculateHighlightBox();
+        });
+      },
+      onEnd: function () {
+        host.updateState({}, true);
+        resizer.removeAttribute('data-value');
+        node.updateSchema({
+          md: finalMd
+        });
+        requestAnimationFrame(function () {
+          node.calculateHighlightBox();
+        });
+      }
+    });
+  };
+
+  GridPlugin.prototype.insertRowAfter = function (node) {
+    var _this = this;
+
+    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(amisEditorCore.JSONChangeInArray(schema, id, function (arr, node, index) {
+      arr.splice(index + 1, 0, amisEditorCore.JSONPipeIn({
+        type: _this.rendererName || 'grid',
+        align: node.align,
+        valign: node.valign,
+        columns: node.columns.map(function (column) {
+          return {
+            body: [],
+            md: column === null || column === void 0 ? void 0 : column.md
+          };
+        })
+      }));
+    }));
+  };
+
+  GridPlugin.prototype.insertRowBefore = function (node) {
+    var _this = this;
+
+    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(amisEditorCore.JSONChangeInArray(schema, id, function (arr, node, index) {
+      arr.splice(index, 0, amisEditorCore.JSONPipeIn({
+        type: _this.rendererName || 'grid',
+        align: node.align,
+        valign: node.valign,
+        columns: node.columns.map(function (column) {
+          return {
+            body: [],
+            md: column === null || column === void 0 ? void 0 : column.md
+          };
+        })
+      }));
+    }));
+  };
+
+  GridPlugin.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 id = context.id;
+    var schema = store.schema;
+    store.traceableSetSchema(amisEditorCore.JSONChangeInArray(schema, id, function (arr, node, index) {
+      arr.splice(index, 0, amisEditorCore.JSONPipeIn({
+        body: []
+      }));
+    }));
+  };
+
+  GridPlugin.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 store = this.manager.store;
+    var schema = store.schema;
+    var id = context.id;
+    store.traceableSetSchema(amisEditorCore.JSONChangeInArray(schema, id, function (arr, node, index) {
+      arr.splice(index + 1, 0, amisEditorCore.JSONPipeIn({
+        body: []
+      }));
+    }));
+  };
+
+  return GridPlugin;
+}(amisEditorCore.BasePlugin);
+amisEditorCore.registerEditorPlugin(GridPlugin);
 
 exports.GridPlugin = GridPlugin;