amis-editor 6.2.2 → 6.4.0

package/esm/plugin/ColumnToggler.js

@@ -1,6 +1,6 @@
 /**
- * amis-editor v6.2.2
- * build time: 2024-03-01
+ * amis-editor v6.4.0
+ * build time: 2024-05-06
  * Copyright 2018-2024 @fex
  */
 
@@ -159,4 +159,4 @@ var ColumnToggler = /** @class */function (_super) {
 registerEditorPlugin(ColumnToggler);
 
 export { ColumnToggler };
-window.amisEditorVersionInfo={version:'6.2.2',buildTime:'2024-03-01'};
+window.amisEditorVersionInfo={version:'6.4.0',buildTime:'2024-05-06'};

package/esm/plugin/Container.d.ts

@@ -1,4 +1,4 @@
-import { LayoutBasePlugin, RegionConfig, RendererPluginEvent } from 'amis-editor-core';
+import { ActiveEventContext, LayoutBasePlugin, RegionConfig, PluginEvent, ResizeMoveEventContext, RendererPluginEvent } from 'amis-editor-core';
 export declare class ContainerPlugin extends LayoutBasePlugin {
     static id: string;
     static scene: string[];
@@ -18,6 +18,10 @@ export declare class ContainerPlugin extends LayoutBasePlugin {
         style: {
             position: string;
             display: string;
+            inset: string;
+            flexWrap: string;
+            flexDirection: string;
+            alignItems: string;
         };
         size: string;
         wrapperBody: boolean;
@@ -28,6 +32,10 @@ export declare class ContainerPlugin extends LayoutBasePlugin {
         style: {
             position: string;
             display: string;
+            inset: string;
+            flexWrap: string;
+            flexDirection: string;
+            alignItems: string;
         };
         size: string;
         wrapperBody: boolean;
@@ -36,5 +44,10 @@ export declare class ContainerPlugin extends LayoutBasePlugin {
     panelTitle: string;
     panelJustify: boolean;
     events: RendererPluginEvent[];
+    onActive(event: PluginEvent<ActiveEventContext>): void;
+    onWidthChangeStart(event: PluginEvent<ResizeMoveEventContext, {
+        onMove(e: MouseEvent): void;
+        onEnd(e: MouseEvent): void;
+    }>): void;
     panelBodyCreator: (context: BaseEventContext) => any;
 }

package/esm/plugin/Container.js

@@ -1,12 +1,15 @@
 /**
- * amis-editor v6.2.2
- * build time: 2024-03-01
+ * amis-editor v6.4.0
+ * build time: 2024-05-06
  * Copyright 2018-2024 @fex
  */
 
 import { __extends, __assign, __spreadArray, __read } from 'tslib';
-import { getSchemaTpl, defaultValue, LayoutBasePlugin, registerEditorPlugin } from 'amis-editor-core';
+import React__default from 'react';
+import { Button } from 'amis';
+import { getSchemaTpl, Icon, LayoutBasePlugin, registerEditorPlugin } from 'amis-editor-core';
 import '../renderer/event-control/index.js';
+import { defaultFlexColumnSchema } from './Layout/FlexPluginBase.js';
 import { i18n } from 'i18n-runtime';
 import { getEventControlConfig } from '../renderer/event-control/helper.js';
 
@@ -30,8 +33,12 @@ var ContainerPlugin = /** @class */function (_super) {
       type: 'container',
       body: [],
       style: {
-        position: 'static',
-        display: 'block'
+        position: 'relative',
+        display: 'flex',
+        inset: 'auto',
+        flexWrap: 'nowrap',
+        flexDirection: 'column',
+        alignItems: 'flex-start'
       },
       size: 'none',
       wrapperBody: false
@@ -102,14 +109,31 @@ var ContainerPlugin = /** @class */function (_super) {
         }
       }]
     }];
+    // onHeightChangeStart(
+    //   event: PluginEvent<
+    //     ResizeMoveEventContext,
+    //     {
+    //       onMove(e: MouseEvent): void;
+    //       onEnd(e: MouseEvent): void;
+    //     }
+    //   >
+    // ) {
+    //   // console.log('on height change start');
+    //   // return this.onSizeChangeStart(event, 'vertical');
+    // }
     _this.panelBodyCreator = function (context) {
-      var _a, _b;
+      var _a, _b, _c, _d;
       var curRendererSchema = context === null || context === void 0 ? void 0 : context.schema;
       (curRendererSchema === null || curRendererSchema === void 0 ? void 0 : curRendererSchema.direction) === 'row' || (curRendererSchema === null || curRendererSchema === void 0 ? void 0 : curRendererSchema.direction) === 'row-reverse';
       // const isFlexContainer = this.manager?.isFlexContainer(context?.id);
       var isFreeContainer = (curRendererSchema === null || curRendererSchema === void 0 ? void 0 : curRendererSchema.isFreeContainer) || false;
       var isFlexItem = (_a = _this.manager) === null || _a === void 0 ? void 0 : _a.isFlexItem(context === null || context === void 0 ? void 0 : context.id);
       var isFlexColumnItem = (_b = _this.manager) === null || _b === void 0 ? void 0 : _b.isFlexColumnItem(context === null || context === void 0 ? void 0 : context.id);
+      var node = context.node;
+      var parent = (_c = node.parent) === null || _c === void 0 ? void 0 : _c.schema;
+      var draggableContainer = _this.manager.draggableContainer(context === null || context === void 0 ? void 0 : context.id);
+      var canAppendSiblings = parent && isFlexItem && !draggableContainer && ((_d = _this.manager) === null || _d === void 0 ? void 0 : _d.canAppendSiblings());
+      var newItemSchema = isFlexColumnItem ? defaultFlexColumnSchema('', false) : defaultFlexColumnSchema();
       var displayTpl = [getSchemaTpl('layout:display'), getSchemaTpl('layout:flex-setting', {
         visibleOn: 'data.style && (data.style.display === "flex" || data.style.display === "inline-flex")',
         direction: curRendererSchema.direction,
@@ -120,31 +144,83 @@ var ContainerPlugin = /** @class */function (_super) {
       })];
       return getSchemaTpl('tabs', [{
         title: i18n("24d67862f87f439db7ca957aecb77cce"),
-        body: getSchemaTpl('collapseGroup', [{
+        body: getSchemaTpl('collapseGroup', [
+        // {
+        //   title: '基本',
+        //   body: [
+        //     {
+        //       name: 'wrapperComponent',
+        //       label: '容器标签',
+        //       type: 'select',
+        //       searchable: true,
+        //       options: [
+        //         'div',
+        //         'p',
+        //         'h1',
+        //         'h2',
+        //         'h3',
+        //         'h4',
+        //         'h5',
+        //         'h6',
+        //         'article',
+        //         'aside',
+        //         'code',
+        //         'footer',
+        //         'header',
+        //         'section'
+        //       ],
+        //       pipeIn: defaultValue('div'),
+        //       validations: {
+        //         isAlphanumeric: true,
+        //         matchRegexp: '/^(?!.*script).*$/' // 禁用一下script标签
+        //       },
+        //       validationErrors: {
+        //         isAlpha: 'HTML标签不合法，请重新输入',
+        //         matchRegexp: 'HTML标签不合法，请重新输入'
+        //       },
+        //       validateOnChange: false
+        //     },
+        //     getSchemaTpl('layout:padding')
+        //   ]
+        // },
+        {
           title: i18n("4092ed98e9035652d4c9ca9441701ed7"),
-          body: [{
-            name: 'wrapperComponent',
-            label: i18n("a823cfa70cfa46c788e1eedae043f6e5"),
-            type: 'select',
-            searchable: true,
-            options: ['div', 'p', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'article', 'aside', 'code', 'footer', 'header', 'section'],
-            pipeIn: defaultValue('div'),
-            validations: {
-              isAlphanumeric: true,
-              matchRegexp: '/^(?!.*script).*$/' // 禁用一下script标签
-            },
-            validationErrors: {
-              isAlpha: i18n("f7d64e5e79994c3c8853f2608d7b2d25"),
-              matchRegexp: i18n("f7d64e5e79994c3c8853f2608d7b2d25")
-            },
-            validateOnChange: false
-          }, getSchemaTpl('layout:padding')]
-        }, {
-          title: i18n("5aefca559c5a41d10078e21e6d616825"),
-          body: __spreadArray(__spreadArray(__spreadArray([getSchemaTpl('layout:position', {
-            visibleOn: '!data.stickyStatus'
-          }), getSchemaTpl('layout:originPosition'), getSchemaTpl('layout:inset', {
-            mode: 'vertical'
+          body: __spreadArray(__spreadArray(__spreadArray([canAppendSiblings && {
+            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.manager.appendSiblingSchema(newItemSchema, true, true);
+                }
+              }, React__default.createElement(Icon, {
+                className: "icon",
+                icon: isFlexColumnItem ? 'top-arrow-to-top' : 'left-arrow-to-left'
+              }), React__default.createElement("span", null, isFlexColumnItem ? i18n("14c495b1248756310c75396cd41f4fe9") : i18n("39a2cb79c6d9762783e20522ea86dcff"), "\u63D2\u5165\u4E00", isFlexColumnItem ? '行' : i18n("cb2f68c9c24e85d21e6b090b6e5657d8")))
+            }, {
+              children: React__default.createElement(Button, {
+                size: "sm",
+                onClick: function () {
+                  return _this.manager.appendSiblingSchema(newItemSchema, false, true);
+                }
+              }, React__default.createElement(Icon, {
+                className: "icon",
+                icon: isFlexColumnItem ? 'arrow-to-bottom' : 'arrow-to-right'
+              }), React__default.createElement("span", null, isFlexColumnItem ? i18n("e33ac3a4c1a95a02a18f1555038804da") : i18n("de2a774bf98944b8f0ec8755d5f59d64"), "\u63D2\u5165\u4E00", isFlexColumnItem ? '行' : i18n("cb2f68c9c24e85d21e6b090b6e5657d8")))
+            }]
+          }, getSchemaTpl('theme:paddingAndMargin', {
+            name: 'themeCss.baseControlClassName.padding-and-margin:default'
+          }), getSchemaTpl('theme:border', {
+            name: "themeCss.baseControlClassName.border:default"
+          }), getSchemaTpl('theme:colorPicker', {
+            name: 'themeCss.baseControlClassName.background:default',
+            label: i18n("8e1b944f4389bdaab6f11d5bc83190c8"),
+            needCustom: true,
+            needGradient: true,
+            needImage: true,
+            labelMode: 'input'
           })], __read(!isFreeContainer ? displayTpl : []), false), __read(isFlexItem ? [getSchemaTpl('layout:flex', {
             isFlexColumnItem: isFlexColumnItem,
             label: isFlexColumnItem ? i18n("f02f876ee64cc016d97fa4dc498d4857") : i18n("a170a375b264f7fe0c02a7ca8c268784"),
@@ -175,7 +251,10 @@ var ContainerPlugin = /** @class */function (_super) {
           }), getSchemaTpl('layout:isFixedWidth', {
             visibleOn: "".concat(!isFlexItem || isFlexColumnItem),
             onChange: function (value) {
-              context === null || context === void 0 ? void 0 : context.node.setWidthMutable(value);
+              var _a, _b;
+              if (!isFlexItem || ((_b = (_a = context.node.parent) === null || _a === void 0 ? void 0 : _a.children) === null || _b === void 0 ? void 0 : _b.length) > 1) {
+                context === null || context === void 0 ? void 0 : context.node.setWidthMutable(value);
+              }
             }
           }), getSchemaTpl('layout:width', {
             visibleOn: "".concat(!isFlexItem || isFlexColumnItem)
@@ -189,10 +268,17 @@ var ContainerPlugin = /** @class */function (_super) {
             name: 'style.textAlign',
             label: i18n("a3221d2d224767df4afa7a8653ded8fe"),
             visibleOn: 'data.style && data.style.display !== "flex" && data.style.display !== "inline-flex"'
-          }) : null, getSchemaTpl('layout:z-index'), getSchemaTpl('layout:sticky', {
+          }) : null, getSchemaTpl('layout:z-index')], false)
+        }, getSchemaTpl('status'), {
+          title: i18n("dfac151de712ab0b3618072c8a7f0a0f"),
+          body: [getSchemaTpl('layout:position', {
+            visibleOn: '!data.stickyStatus'
+          }), getSchemaTpl('layout:originPosition'), getSchemaTpl('layout:inset', {
+            mode: 'vertical'
+          }), getSchemaTpl('layout:sticky', {
             visibleOn: 'data.style && (data.style.position !== "fixed" && data.style.position !== "absolute")'
-          }), getSchemaTpl('layout:stickyPosition')], false)
-        }, getSchemaTpl('status')])
+          }), getSchemaTpl('layout:stickyPosition')]
+        }])
       }, {
         title: i18n("afcde2611bdd13c1e65b4fb6a2f13425"),
         className: 'p-none',
@@ -209,6 +295,126 @@ var ContainerPlugin = /** @class */function (_super) {
     };
     return _this;
   }
+  ContainerPlugin.prototype.onActive = function (event) {
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j;
+    var context = event.context;
+    if (((_a = context.info) === null || _a === void 0 ? void 0 : _a.plugin) !== this || !context.node) {
+      return;
+    }
+    var node = context.node;
+    var isFlexItem = (_b = this.manager) === null || _b === void 0 ? void 0 : _b.isFlexItem(node.id);
+    if (isFlexItem) {
+      var isColumnFlex = this.manager.isFlexColumnItem(node.id);
+      context === null || context === void 0 ? void 0 : context.node.setHeightMutable(((_c = node === null || node === void 0 ? void 0 : node.schema) === null || _c === void 0 ? void 0 : _c.isFixedHeight) && !isColumnFlex);
+      context === null || context === void 0 ? void 0 : context.node.setWidthMutable(!isColumnFlex && ((_e = (_d = context.node.parent) === null || _d === void 0 ? void 0 : _d.children) === null || _e === void 0 ? void 0 : _e.length) > 1 || ((_g = (_f = node.schema) === null || _f === void 0 ? void 0 : _f.style) === null || _g === void 0 ? void 0 : _g.flex) === '0 0 150px');
+    } else {
+      context === null || context === void 0 ? void 0 : context.node.setHeightMutable((_h = node.schema) === null || _h === void 0 ? void 0 : _h.isFixedHeight);
+      context === null || context === void 0 ? void 0 : context.node.setWidthMutable((_j = node.schema) === null || _j === void 0 ? void 0 : _j.isFixedWidth);
+    }
+  };
+  ContainerPlugin.prototype.onWidthChangeStart = function (event) {
+    var _a, _b, _c, _d, _e;
+    var context = event.context;
+    var node = context.node;
+    var host = node.host;
+    var dom = context.dom;
+    var parent = dom.parentElement;
+    if (!parent) {
+      return;
+    }
+    var resizer = context.resizer;
+    var frameRect = parent.getBoundingClientRect();
+    var rect = dom.getBoundingClientRect();
+    var isFlexItem = (_a = this.manager) === null || _a === void 0 ? void 0 : _a.isFlexItem(node.id);
+    var isColumnFlex = (_b = this.manager) === null || _b === void 0 ? void 0 : _b.isFlexColumnItem(node.id);
+    var schema = node.schema;
+    var index = node.index;
+    var isFlexSize = ((_c = schema.style) === null || _c === void 0 ? void 0 : _c.flex) === '1 1 auto' && (((_d = schema.style) === null || _d === void 0 ? void 0 : _d.position) === 'static' || ((_e = schema.style) === null || _e === void 0 ? void 0 : _e.position) === 'relative');
+    var flexGrow = 1;
+    var width = 0;
+    event.setData({
+      onMove: function (e) {
+        var _a;
+        var children = parent.children;
+        width = e.pageX - rect.left;
+        flexGrow = Math.max(1, Math.min(12, Math.round(12 * width / frameRect.width)));
+        resizer.setAttribute('data-value', isFlexSize ? "".concat(flexGrow) : width + 'px');
+        if (isFlexSize) {
+          // 需重新计算flex下各子组件占比，按照12等分计算
+          for (var i = 0; i < children.length; i++) {
+            if (i !== index) {
+              var width_1 = children[i].clientWidth;
+              if (width_1 > 0) {
+                var grow = Math.max(1, Math.min(12, Math.round(12 * width_1 / frameRect.width)));
+                (_a = host.children[i]) === null || _a === void 0 ? void 0 : _a.updateState({
+                  style: __assign(__assign({}, host.children[i].schema.style), {
+                    flexGrow: grow
+                  })
+                });
+              }
+            } else {
+              node.updateState({
+                style: __assign(__assign({}, node.schema.style), {
+                  flexGrow: +flexGrow
+                })
+              });
+            }
+          }
+        } else {
+          if (isFlexItem && !isColumnFlex) {
+            node.updateState({
+              style: __assign(__assign({}, node.schema.style), {
+                flex: '0 0 150px',
+                flexBasis: "".concat(width, "px")
+              })
+            });
+          } else {
+            node.updateState({
+              style: __assign(__assign({}, node.schema.style), {
+                width: "".concat(width, "px")
+              })
+            });
+          }
+        }
+        requestAnimationFrame(function () {
+          node.calculateHighlightBox();
+        });
+      },
+      onEnd: function () {
+        resizer.removeAttribute('data-value');
+        if (isFlexSize) {
+          host === null || host === void 0 ? void 0 : host.children.forEach(function (item) {
+            var _a, _b;
+            item.updateSchema({
+              style: __assign(__assign({}, node.schema.style), {
+                flexGrow: (_b = (_a = item.state.style) === null || _a === void 0 ? void 0 : _a.flexGrow) !== null && _b !== void 0 ? _b : 1
+              })
+            });
+            item.updateState({}, true);
+          });
+        } else {
+          if (isFlexItem && !isColumnFlex) {
+            node.updateSchema({
+              style: __assign(__assign({}, node.schema.style), {
+                flex: "0 0 150px",
+                flexBasis: "".concat(width, "px")
+              })
+            });
+          } else {
+            node.updateSchema({
+              style: __assign(__assign({}, node.schema.style), {
+                width: "".concat(width, "px")
+              })
+            });
+          }
+          node.updateState({}, true);
+        }
+        requestAnimationFrame(function () {
+          node.calculateHighlightBox();
+        });
+      }
+    });
+  };
   ContainerPlugin.id = 'ContainerPlugin';
   ContainerPlugin.scene = ['layout'];
   return ContainerPlugin;
@@ -216,4 +422,4 @@ var ContainerPlugin = /** @class */function (_super) {
 registerEditorPlugin(ContainerPlugin);
 
 export { ContainerPlugin };
-window.amisEditorVersionInfo={version:'6.2.2',buildTime:'2024-03-01'};
+window.amisEditorVersionInfo={version:'6.4.0',buildTime:'2024-05-06'};

package/esm/plugin/Custom.js

@@ -1,6 +1,6 @@
 /**
- * amis-editor v6.2.2
- * build time: 2024-03-01
+ * amis-editor v6.4.0
+ * build time: 2024-05-06
  * Copyright 2018-2024 @fex
  */
 
@@ -96,4 +96,4 @@ var CustomPlugin = /** @class */function (_super) {
 registerEditorPlugin(CustomPlugin);
 
 export { CustomPlugin };
-window.amisEditorVersionInfo={version:'6.2.2',buildTime:'2024-03-01'};
+window.amisEditorVersionInfo={version:'6.4.0',buildTime:'2024-05-06'};

package/esm/plugin/CustomRegion.js

@@ -1,6 +1,6 @@
 /**
- * amis-editor v6.2.2
- * build time: 2024-03-01
+ * amis-editor v6.4.0
+ * build time: 2024-05-06
  * Copyright 2018-2024 @fex
  */
 
@@ -130,4 +130,4 @@ var CustomPlugin = /** @class */function (_super) {
 registerEditorPlugin(CustomPlugin);
 
 export { CustomPlugin };
-window.amisEditorVersionInfo={version:'6.2.2',buildTime:'2024-03-01'};
+window.amisEditorVersionInfo={version:'6.4.0',buildTime:'2024-05-06'};

package/esm/plugin/Date.js

@@ -1,6 +1,6 @@
 /**
- * amis-editor v6.2.2
- * build time: 2024-03-01
+ * amis-editor v6.4.0
+ * build time: 2024-05-06
  * Copyright 2018-2024 @fex
  */
 
@@ -93,4 +93,4 @@ var DatePlugin = /** @class */function (_super) {
 registerEditorPlugin(DatePlugin);
 
 export { DatePlugin };
-window.amisEditorVersionInfo={version:'6.2.2',buildTime:'2024-03-01'};
+window.amisEditorVersionInfo={version:'6.4.0',buildTime:'2024-05-06'};

package/esm/plugin/Datetime.js

@@ -1,6 +1,6 @@
 /**
- * amis-editor v6.2.2
- * build time: 2024-03-01
+ * amis-editor v6.4.0
+ * build time: 2024-05-06
  * Copyright 2018-2024 @fex
  */
 
@@ -143,4 +143,4 @@ var DatetimePlugin = /** @class */function (_super) {
 registerEditorPlugin(DatetimePlugin);
 
 export { DatetimePlugin };
-window.amisEditorVersionInfo={version:'6.2.2',buildTime:'2024-03-01'};
+window.amisEditorVersionInfo={version:'6.4.0',buildTime:'2024-05-06'};

package/esm/plugin/Dialog.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import { BasePlugin, RegionConfig, EditorNodeType } from 'amis-editor-core';
+import { BasePlugin, RegionConfig, EditorNodeType, BuildPanelEventContext, BasicPanelItem, PluginEvent, ChangeEventContext } from 'amis-editor-core';
 import type { RendererConfig, Schema } from 'amis-core';
 import { ModalProps } from 'amis-ui/src/components/Modal';
 interface InlineModalProps extends ModalProps {
@@ -47,17 +47,14 @@ export declare class DialogPlugin extends BasePlugin {
     panelTitle: string;
     panelJustify: boolean;
     panelBodyCreator: (context: BaseEventContext) => any;
+    afterUpdate(event: PluginEvent<ChangeEventContext>): void;
     buildSubRenderers(): void;
-    buildDataSchemas(node: EditorNodeType, region?: EditorNodeType, trigger?: EditorNodeType): Promise<{
-        $id: string;
-        type: string;
-        title: any;
-        properties: any;
-    }>;
+    buildDataSchemas(node: EditorNodeType, region?: EditorNodeType, trigger?: EditorNodeType): Promise<any>;
     /**
      * 为了让 dialog 的按钮可以点击编辑
      */
     patchSchema(schema: Schema, info: RendererConfig, props?: any): any;
+    buildEditorPanel(context: BuildPanelEventContext, panels: Array<BasicPanelItem>): void;
 }
 export declare class InlineModal extends React.Component<InlineModalProps, any> {
     componentDidMount(): void;