@next-core/editor-bricks-helper 0.35.4 → 0.36.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +13 -0
- package/dist/index.bundle.js +11 -7
- package/dist/index.bundle.js.map +1 -1
- package/dist/index.esm.js +11 -7
- package/dist/index.esm.js.map +1 -1
- package/dist/types/DropZone/DropZone.d.ts +2 -1
- package/dist/types/SlotContainer/SlotContainer.d.ts +2 -1
- package/package.json +2 -2
package/dist/index.esm.js
CHANGED
|
@@ -1654,7 +1654,7 @@ function EditorBrickAsComponent(_ref) {
|
|
|
1654
1654
|
ref: node.$$isTemplateInternalNode ? undefined : dragRef,
|
|
1655
1655
|
draggable: !node.$$isTemplateInternalNode,
|
|
1656
1656
|
className: classNames({
|
|
1657
|
-
[styles$2.baseView]: node.brick === "basic-bricks.micro-view" || node.brick === "basic-bricks.micro-app" || node.brick === "basic-bricks.easy-view"
|
|
1657
|
+
[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"
|
|
1658
1658
|
})
|
|
1659
1659
|
}, /*#__PURE__*/React.createElement(BrickAsComponent, {
|
|
1660
1660
|
useBrick: brickConf
|
|
@@ -2181,8 +2181,8 @@ function useCanvasList(rootChildNodes) {
|
|
|
2181
2181
|
}, [rootChildNodes]);
|
|
2182
2182
|
}
|
|
2183
2183
|
|
|
2184
|
-
var css_248z$1 = ".DropZone--dropZone--
|
|
2185
|
-
var styles$1 = {"dropZone":"DropZone--dropZone--
|
|
2184
|
+
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";
|
|
2185
|
+
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"};
|
|
2186
2186
|
styleInject(css_248z$1);
|
|
2187
2187
|
|
|
2188
2188
|
var _excluded = ["type"];
|
|
@@ -2201,7 +2201,8 @@ function DropZone(_ref) {
|
|
|
2201
2201
|
dropZoneBodyStyle,
|
|
2202
2202
|
slotContentLayout,
|
|
2203
2203
|
showOutlineIfEmpty,
|
|
2204
|
-
hiddenWrapper = true
|
|
2204
|
+
hiddenWrapper = true,
|
|
2205
|
+
emptyClassName
|
|
2205
2206
|
} = _ref;
|
|
2206
2207
|
var dropZoneBody = React.useRef();
|
|
2207
2208
|
var [dropPositionCursor, setDropPositionCursor] = React.useState(null);
|
|
@@ -2361,7 +2362,8 @@ function DropZone(_ref) {
|
|
|
2361
2362
|
onContextMenu: isRoot ? handleContextMenu : null
|
|
2362
2363
|
}, /*#__PURE__*/React.createElement("div", {
|
|
2363
2364
|
ref: dropZoneBody,
|
|
2364
|
-
className: styles$1.dropZoneBody,
|
|
2365
|
+
className: classNames(styles$1.dropZoneBody, selfChildNodesInCurrentCanvas.length === 0 && emptyClassName),
|
|
2366
|
+
"data-slot-id": mountPoint,
|
|
2365
2367
|
style: dropZoneBodyStyle
|
|
2366
2368
|
}, selfChildNodesInCurrentCanvas.map(child => /*#__PURE__*/React.createElement(EditorBrickAsComponent, {
|
|
2367
2369
|
key: child.$$uid,
|
|
@@ -2392,7 +2394,8 @@ function SlotContainer(_ref) {
|
|
|
2392
2394
|
dropZoneStyle,
|
|
2393
2395
|
dropZoneBodyStyle,
|
|
2394
2396
|
slotContentLayout,
|
|
2395
|
-
showOutlineIfEmpty
|
|
2397
|
+
showOutlineIfEmpty,
|
|
2398
|
+
emptyClassName
|
|
2396
2399
|
} = _ref;
|
|
2397
2400
|
var node = useBuilderNode({
|
|
2398
2401
|
nodeUid
|
|
@@ -2419,7 +2422,8 @@ function SlotContainer(_ref) {
|
|
|
2419
2422
|
dropZoneStyle: dropZoneStyle,
|
|
2420
2423
|
dropZoneBodyStyle: dropZoneBodyStyle,
|
|
2421
2424
|
slotContentLayout: slotContentLayout,
|
|
2422
|
-
showOutlineIfEmpty: showOutlineIfEmpty
|
|
2425
|
+
showOutlineIfEmpty: showOutlineIfEmpty,
|
|
2426
|
+
emptyClassName: emptyClassName
|
|
2423
2427
|
}));
|
|
2424
2428
|
}
|
|
2425
2429
|
|