@next-core/editor-bricks-helper 0.35.2 → 0.36.0

package/CHANGELOG.md

@@ -3,6 +3,35 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [0.36.0](https://github.com/easyops-cn/next-core/compare/@next-core/editor-bricks-helper@0.35.4...@next-core/editor-bricks-helper@0.36.0) (2022-03-08)
+
+
+### Features
+
+* support dropZone add Empty ClassName ([5fbdd83](https://github.com/easyops-cn/next-core/commit/5fbdd83792d4ba54ece99953afcd6713c497dbb1))
+* update dropZone add emptyClassName ([f539585](https://github.com/easyops-cn/next-core/commit/f539585b936abf3de416d2d47867a4f7603e77c9))
+* update dropZone style ([53e2015](https://github.com/easyops-cn/next-core/commit/53e2015384c6f698218714b9267ef9430ad92ddd))
+
+
+
+
+
+## [0.35.4](https://github.com/easyops-cn/next-core/compare/@next-core/editor-bricks-helper@0.35.3...@next-core/editor-bricks-helper@0.35.4) (2022-03-07)
+
+**Note:** Version bump only for package @next-core/editor-bricks-helper
+
+
+
+
+
+## [0.35.3](https://github.com/easyops-cn/next-core/compare/@next-core/editor-bricks-helper@0.35.2...@next-core/editor-bricks-helper@0.35.3) (2022-03-07)
+
+**Note:** Version bump only for package @next-core/editor-bricks-helper
+
+
+
+
+
 ## [0.35.2](https://github.com/easyops-cn/next-core/compare/@next-core/editor-bricks-helper@0.35.1...@next-core/editor-bricks-helper@0.35.2) (2022-03-04)
 
 **Note:** Version bump only for package @next-core/editor-bricks-helper

package/dist/index.bundle.js

@@ -1656,7 +1656,7 @@
       ref: node.$$isTemplateInternalNode ? undefined : dragRef,
       draggable: !node.$$isTemplateInternalNode,
       className: classNames({
-        [styles$2.baseView]: node.brick === "basic-bricks.micro-view" || node.brick === "basic-bricks.micro-app" || node.brick === "basic-bricks.easy-view"
+        [styles$2.baseView]: node.brick === "basic-bricks.micro-view" || node.brick === "basic-bricks.micro-app" || node.brick === "basic-bricks.easy-view" || node.brick === "frame-bricks.side-bar"
       })
     }, /*#__PURE__*/React__default["default"].createElement(brickKit.BrickAsComponent, {
       useBrick: brickConf
@@ -2183,8 +2183,8 @@
     }, [rootChildNodes]);
   }
 
-  var css_248z$1 = ".DropZone--dropZone--sngiml {\n  position: relative;\n  min-height: calc(var(--editor-brick-base-height) + 2px);\n  border-radius: var(--editor-brick-border-radius);\n\n  --drop-zone-padding: 20px;\n}\n\n.DropZone--isSlot--sngiml {\n  border: 1px dashed transparent;\n}\n\n.DropZone--isSlot--sngiml.DropZone--dropping--sngiml {\n  background: var(--editor-brick-slot-bg);\n  border-color: var(--editor-brick-slot-stroke-color);\n}\n\n.DropZone--showOutlineIfEmpty--sngiml:not(.DropZone--dropping--sngiml) {\n  background: var(--editor-brick-skeleton-bg-light);\n}\n\n.DropZone--isRoot--sngiml > .DropZone--dropZoneBody--sngiml {\n  padding: calc(var(--drop-zone-padding) + 7px) var(--drop-zone-padding)\n    var(--drop-zone-padding);\n}\n\n.DropZone--isRoot--sngiml.DropZone--active--sngiml,\n.DropZone--isRoot--sngiml.DropZone--dropping--sngiml {\n  box-shadow: 0 0 0 1px var(--editor-brick-stroke-color-active);\n}\n\n.DropZone--isPortalCanvas--sngiml,\n.DropZone--isRoot--sngiml:not(.DropZone--isPortalCanvas--sngiml) > .DropZone--dropZoneBody--sngiml {\n  height: calc(\n    100vh - 148px - var(--editor-brick-toolbar-height) - var(--page-card-gap)\n  );\n  overflow-y: auto;\n}\n\n.DropZone--fullscreen--sngiml.DropZone--isPortalCanvas--sngiml,\n.DropZone--fullscreen--sngiml:not(.DropZone--isPortalCanvas--sngiml) > .DropZone--dropZoneBody--sngiml {\n  height: calc(\n    100vh - var(--editor-brick-overlay-padding) * 2 - var(--page-card-gap) * 2 -\n      var(--editor-brick-toolbar-height)\n  );\n}\n\n.DropZone--hasTabs--sngiml.DropZone--isPortalCanvas--sngiml,\n.DropZone--hasTabs--sngiml.DropZone--isRoot--sngiml:not(.DropZone--isPortalCanvas--sngiml) > .DropZone--dropZoneBody--sngiml {\n  height: calc(\n    100vh - 158px - var(--editor-brick-toolbar-height) - var(--page-card-gap)\n  );\n  overflow-y: auto;\n}\n\n.DropZone--hasTabs--sngiml.DropZone--fullscreen--sngiml.DropZone--isPortalCanvas--sngiml,\n.DropZone--hasTabs--sngiml.DropZone--fullscreen--sngiml:not(.DropZone--isPortalCanvas--sngiml) > .DropZone--dropZoneBody--sngiml {\n  height: calc(\n    100vh - var(--editor-brick-overlay-padding) * 2 - var(--page-card-gap) * 2 -\n      10px - var(--editor-brick-toolbar-height)\n  );\n}\n\n.DropZone--slotContentLayoutBlock--sngiml > .DropZone--dropZoneBody--sngiml {\n  display: grid;\n  grid-gap: var(--editor-brick-gap);\n  grid-template-columns: repeat(\n    auto-fill,\n    minmax(var(--editor-brick-inline-width), 1fr)\n  );\n}\n\n.DropZone--slotContentLayoutInline--sngiml > .DropZone--dropZoneBody--sngiml {\n  display: flex;\n  flex-wrap: wrap;\n  margin: 0 calc(var(--editor-brick-gap-half) * -1);\n}\n\n.DropZone--slotContentLayoutGrid--sngiml > .DropZone--dropZoneBody--sngiml {\n  display: grid;\n  grid-gap: var(--editor-brick-gap);\n  grid-template-columns: repeat(\n    auto-fill,\n    minmax(var(--editor-brick-grid-width), 1fr)\n  );\n}\n\n.DropZone--mode-dialog--sngiml > .DropZone--dropZoneBody--sngiml {\n  margin: 0 auto;\n  max-width: calc(600px + var(--drop-zone-padding) * 2);\n}\n\n.DropZone--mode-dialog--sngiml.DropZone--mode-large--sngiml > .DropZone--dropZoneBody--sngiml {\n  max-width: calc(800px + var(--drop-zone-padding) * 2);\n}\n\n.DropZone--mode-dialog--sngiml.DropZone--mode-small--sngiml > .DropZone--dropZoneBody--sngiml {\n  max-width: calc(400px + var(--drop-zone-padding) * 2);\n}\n\n.DropZone--mode-drawer--sngiml > .DropZone--dropZoneBody--sngiml {\n  margin: 0 auto;\n  max-width: calc(900px + var(--drop-zone-padding) * 2);\n}\n\n.DropZone--mode-drawer--sngiml.DropZone--mode-large--sngiml > .DropZone--dropZoneBody--sngiml {\n  max-width: calc(1200px + var(--drop-zone-padding) * 2);\n}\n\n.DropZone--mode-drawer--sngiml.DropZone--mode-small--sngiml > .DropZone--dropZoneBody--sngiml {\n  max-width: calc(600px + var(--drop-zone-padding) * 2);\n}\n\n.DropZone--dropCursor--sngiml {\n  position: absolute;\n  background: #bb79bb;\n  display: none;\n  pointer-events: none;\n}\n\n.DropZone--dropping--sngiml > .DropZone--dropCursor--sngiml {\n  display: block;\n}\n\n.DropZone--dropCursorHorizontal--sngiml {\n  height: 2px;\n  left: 10px;\n  right: 10px;\n  margin-top: -1px;\n}\n\n.DropZone--dropCursorVertical--sngiml {\n  width: 2px;\n  margin-left: -1px;\n}\n\n.DropZone--dropCursor--sngiml::before,\n.DropZone--dropCursor--sngiml::after {\n  position: absolute;\n  content: \"\";\n  background: #bb79bb;\n}\n\n.DropZone--dropCursorHorizontal--sngiml::before,\n.DropZone--dropCursorHorizontal--sngiml::after {\n  top: -4px;\n  height: 10px;\n  width: 2px;\n}\n\n.DropZone--dropCursorHorizontal--sngiml::before {\n  left: 0;\n}\n\n.DropZone--dropCursorHorizontal--sngiml::after {\n  right: 0;\n}\n\n.DropZone--dropCursorVertical--sngiml::before,\n.DropZone--dropCursorVertical--sngiml::after {\n  left: -4px;\n  width: 10px;\n  height: 2px;\n}\n\n.DropZone--dropCursorVertical--sngiml::before {\n  top: 0;\n}\n\n.DropZone--dropCursorVertical--sngiml::after {\n  bottom: 0;\n}\n";
-  var styles$1 = {"dropZone":"DropZone--dropZone--sngiml","isSlot":"DropZone--isSlot--sngiml","dropping":"DropZone--dropping--sngiml","showOutlineIfEmpty":"DropZone--showOutlineIfEmpty--sngiml","isRoot":"DropZone--isRoot--sngiml","dropZoneBody":"DropZone--dropZoneBody--sngiml","active":"DropZone--active--sngiml","isPortalCanvas":"DropZone--isPortalCanvas--sngiml","fullscreen":"DropZone--fullscreen--sngiml","hasTabs":"DropZone--hasTabs--sngiml","slotContentLayoutBlock":"DropZone--slotContentLayoutBlock--sngiml","slotContentLayoutInline":"DropZone--slotContentLayoutInline--sngiml","slotContentLayoutGrid":"DropZone--slotContentLayoutGrid--sngiml","mode-dialog":"DropZone--mode-dialog--sngiml","mode-large":"DropZone--mode-large--sngiml","mode-small":"DropZone--mode-small--sngiml","mode-drawer":"DropZone--mode-drawer--sngiml","dropCursor":"DropZone--dropCursor--sngiml","dropCursorHorizontal":"DropZone--dropCursorHorizontal--sngiml","dropCursorVertical":"DropZone--dropCursorVertical--sngiml"};
+  var css_248z$1 = ".DropZone--dropZone--189f8p9 {\n  position: relative;\n  min-height: calc(var(--editor-brick-base-height) + 2px);\n  border-radius: var(--editor-brick-border-radius);\n\n  --drop-zone-padding: 20px;\n}\n\n.DropZone--isSlot--189f8p9 {\n  border: 1px dashed transparent;\n}\n\n.DropZone--isSlot--189f8p9.DropZone--dropping--189f8p9 {\n  background: var(--editor-brick-slot-bg);\n  border-color: var(--editor-brick-slot-stroke-color);\n}\n\n.DropZone--showOutlineIfEmpty--189f8p9:not(.DropZone--dropping--189f8p9) {\n  background: var(--editor-brick-skeleton-bg-light);\n}\n\n.DropZone--isRoot--189f8p9 > .DropZone--dropZoneBody--189f8p9 {\n  padding: calc(var(--drop-zone-padding) + 7px) var(--drop-zone-padding)\n    var(--drop-zone-padding);\n}\n\n.DropZone--isRoot--189f8p9.DropZone--active--189f8p9,\n.DropZone--isRoot--189f8p9.DropZone--dropping--189f8p9 {\n  box-shadow: 0 0 0 1px var(--editor-brick-stroke-color-active);\n}\n\n.DropZone--isPortalCanvas--189f8p9,\n.DropZone--isRoot--189f8p9:not(.DropZone--isPortalCanvas--189f8p9) > .DropZone--dropZoneBody--189f8p9 {\n  height: calc(\n    100vh - 148px - var(--editor-brick-toolbar-height) - var(--page-card-gap)\n  );\n  overflow-y: auto;\n}\n\n.DropZone--fullscreen--189f8p9.DropZone--isPortalCanvas--189f8p9,\n.DropZone--fullscreen--189f8p9:not(.DropZone--isPortalCanvas--189f8p9) > .DropZone--dropZoneBody--189f8p9 {\n  height: calc(\n    100vh - var(--editor-brick-overlay-padding) * 2 - var(--page-card-gap) * 2 -\n      var(--editor-brick-toolbar-height)\n  );\n}\n\n.DropZone--hasTabs--189f8p9.DropZone--isPortalCanvas--189f8p9,\n.DropZone--hasTabs--189f8p9.DropZone--isRoot--189f8p9:not(.DropZone--isPortalCanvas--189f8p9) > .DropZone--dropZoneBody--189f8p9 {\n  height: calc(\n    100vh - 158px - var(--editor-brick-toolbar-height) - var(--page-card-gap)\n  );\n  overflow-y: auto;\n}\n\n.DropZone--hasTabs--189f8p9.DropZone--fullscreen--189f8p9.DropZone--isPortalCanvas--189f8p9,\n.DropZone--hasTabs--189f8p9.DropZone--fullscreen--189f8p9:not(.DropZone--isPortalCanvas--189f8p9) > .DropZone--dropZoneBody--189f8p9 {\n  height: calc(\n    100vh - var(--editor-brick-overlay-padding) * 2 - var(--page-card-gap) * 2 -\n      10px - var(--editor-brick-toolbar-height)\n  );\n}\n\n.DropZone--slotContentLayoutBlock--189f8p9 > .DropZone--dropZoneBody--189f8p9 {\n  display: grid;\n  grid-gap: var(--editor-brick-gap);\n  grid-template-columns: repeat(\n    auto-fill,\n    minmax(var(--editor-brick-inline-width), 1fr)\n  );\n}\n\n.DropZone--slotContentLayoutInline--189f8p9 > .DropZone--dropZoneBody--189f8p9 {\n  display: flex;\n  flex-wrap: wrap;\n  margin: 0 calc(var(--editor-brick-gap-half) * -1);\n}\n\n.DropZone--slotContentLayoutGrid--189f8p9 > .DropZone--dropZoneBody--189f8p9 {\n  display: grid;\n  grid-gap: var(--editor-brick-gap);\n  grid-template-columns: repeat(\n    auto-fill,\n    minmax(var(--editor-brick-grid-width), 1fr)\n  );\n  height: 100%;\n}\n\n.DropZone--mode-dialog--189f8p9 > .DropZone--dropZoneBody--189f8p9 {\n  margin: 0 auto;\n  max-width: calc(600px + var(--drop-zone-padding) * 2);\n}\n\n.DropZone--mode-dialog--189f8p9.DropZone--mode-large--189f8p9 > .DropZone--dropZoneBody--189f8p9 {\n  max-width: calc(800px + var(--drop-zone-padding) * 2);\n}\n\n.DropZone--mode-dialog--189f8p9.DropZone--mode-small--189f8p9 > .DropZone--dropZoneBody--189f8p9 {\n  max-width: calc(400px + var(--drop-zone-padding) * 2);\n}\n\n.DropZone--mode-drawer--189f8p9 > .DropZone--dropZoneBody--189f8p9 {\n  margin: 0 auto;\n  max-width: calc(900px + var(--drop-zone-padding) * 2);\n}\n\n.DropZone--mode-drawer--189f8p9.DropZone--mode-large--189f8p9 > .DropZone--dropZoneBody--189f8p9 {\n  max-width: calc(1200px + var(--drop-zone-padding) * 2);\n}\n\n.DropZone--mode-drawer--189f8p9.DropZone--mode-small--189f8p9 > .DropZone--dropZoneBody--189f8p9 {\n  max-width: calc(600px + var(--drop-zone-padding) * 2);\n}\n\n.DropZone--dropCursor--189f8p9 {\n  position: absolute;\n  background: #bb79bb;\n  display: none;\n  pointer-events: none;\n}\n\n.DropZone--dropping--189f8p9 > .DropZone--dropCursor--189f8p9 {\n  display: block;\n}\n\n.DropZone--dropCursorHorizontal--189f8p9 {\n  height: 2px;\n  left: 10px;\n  right: 10px;\n  margin-top: -1px;\n}\n\n.DropZone--dropCursorVertical--189f8p9 {\n  width: 2px;\n  margin-left: -1px;\n}\n\n.DropZone--dropCursor--189f8p9::before,\n.DropZone--dropCursor--189f8p9::after {\n  position: absolute;\n  content: \"\";\n  background: #bb79bb;\n}\n\n.DropZone--dropCursorHorizontal--189f8p9::before,\n.DropZone--dropCursorHorizontal--189f8p9::after {\n  top: -4px;\n  height: 10px;\n  width: 2px;\n}\n\n.DropZone--dropCursorHorizontal--189f8p9::before {\n  left: 0;\n}\n\n.DropZone--dropCursorHorizontal--189f8p9::after {\n  right: 0;\n}\n\n.DropZone--dropCursorVertical--189f8p9::before,\n.DropZone--dropCursorVertical--189f8p9::after {\n  left: -4px;\n  width: 10px;\n  height: 2px;\n}\n\n.DropZone--dropCursorVertical--189f8p9::before {\n  top: 0;\n}\n\n.DropZone--dropCursorVertical--189f8p9::after {\n  bottom: 0;\n}\n";
+  var styles$1 = {"dropZone":"DropZone--dropZone--189f8p9","isSlot":"DropZone--isSlot--189f8p9","dropping":"DropZone--dropping--189f8p9","showOutlineIfEmpty":"DropZone--showOutlineIfEmpty--189f8p9","isRoot":"DropZone--isRoot--189f8p9","dropZoneBody":"DropZone--dropZoneBody--189f8p9","active":"DropZone--active--189f8p9","isPortalCanvas":"DropZone--isPortalCanvas--189f8p9","fullscreen":"DropZone--fullscreen--189f8p9","hasTabs":"DropZone--hasTabs--189f8p9","slotContentLayoutBlock":"DropZone--slotContentLayoutBlock--189f8p9","slotContentLayoutInline":"DropZone--slotContentLayoutInline--189f8p9","slotContentLayoutGrid":"DropZone--slotContentLayoutGrid--189f8p9","mode-dialog":"DropZone--mode-dialog--189f8p9","mode-large":"DropZone--mode-large--189f8p9","mode-small":"DropZone--mode-small--189f8p9","mode-drawer":"DropZone--mode-drawer--189f8p9","dropCursor":"DropZone--dropCursor--189f8p9","dropCursorHorizontal":"DropZone--dropCursorHorizontal--189f8p9","dropCursorVertical":"DropZone--dropCursorVertical--189f8p9"};
   styleInject(css_248z$1);
 
   var _excluded = ["type"];
@@ -2203,7 +2203,8 @@
       dropZoneBodyStyle,
       slotContentLayout,
       showOutlineIfEmpty,
-      hiddenWrapper = true
+      hiddenWrapper = true,
+      emptyClassName
     } = _ref;
     var dropZoneBody = React__default["default"].useRef();
     var [dropPositionCursor, setDropPositionCursor] = React__default["default"].useState(null);
@@ -2363,7 +2364,8 @@
       onContextMenu: isRoot ? handleContextMenu : null
     }, /*#__PURE__*/React__default["default"].createElement("div", {
       ref: dropZoneBody,
-      className: styles$1.dropZoneBody,
+      className: classNames(styles$1.dropZoneBody, selfChildNodesInCurrentCanvas.length === 0 && emptyClassName),
+      "data-slot-id": mountPoint,
       style: dropZoneBodyStyle
     }, selfChildNodesInCurrentCanvas.map(child => /*#__PURE__*/React__default["default"].createElement(EditorBrickAsComponent, {
       key: child.$$uid,
@@ -2394,7 +2396,8 @@
       dropZoneStyle,
       dropZoneBodyStyle,
       slotContentLayout,
-      showOutlineIfEmpty
+      showOutlineIfEmpty,
+      emptyClassName
     } = _ref;
     var node = useBuilderNode({
       nodeUid
@@ -2421,7 +2424,8 @@
       dropZoneStyle: dropZoneStyle,
       dropZoneBodyStyle: dropZoneBodyStyle,
       slotContentLayout: slotContentLayout,
-      showOutlineIfEmpty: showOutlineIfEmpty
+      showOutlineIfEmpty: showOutlineIfEmpty,
+      emptyClassName: emptyClassName
     }));
   }