@next-core/editor-bricks-helper 0.35.3 → 0.36.1

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/dist/index.esm.js CHANGED
@@ -441,16 +441,16 @@ function getBuilderNode(nodeData, nodeUid, isTemplateInternalNode) {
441
441
  var tempParsedId = void 0;
442
442
  var tempParsedTestId = void 0;
443
443
 
444
- if ((tempParsedId = parsed === null || parsed === void 0 ? void 0 : parsed.id, typeof tempParsedId === "string") && !computationRegExp.test(tempParsedId)) {
444
+ if ((tempParsedTestId = parsed === null || parsed === void 0 ? void 0 : (_parsed$dataset = parsed.dataset) === null || _parsed$dataset === void 0 ? void 0 : _parsed$dataset.testid, typeof tempParsedTestId === "string") && !computationRegExp.test(tempParsedTestId)) {
445
+ parsedTestId = tempParsedTestId;
446
+ } else if ((tempParsedId = parsed === null || parsed === void 0 ? void 0 : parsed.id, typeof tempParsedId === "string") && !computationRegExp.test(tempParsedId)) {
445
447
  parsedId = tempParsedId;
446
448
  matchedSelectors.push("#".concat(parsedId));
447
- } else if ((tempParsedTestId = parsed === null || parsed === void 0 ? void 0 : (_parsed$dataset = parsed.dataset) === null || _parsed$dataset === void 0 ? void 0 : _parsed$dataset.testid, typeof tempParsedTestId === "string") && !computationRegExp.test(tempParsedTestId)) {
448
- parsedTestId = tempParsedTestId;
449
449
  }
450
450
  }
451
451
  }
452
452
 
453
- return Object.fromEntries(Object.entries(nodeData).filter(entry => !nodeIgnoreFields.includes(entry[0])).concat([["alias", nodeData.alias || (isBrickNode(nodeData) ? parsedId || parsedTestId || nodeData.brick.split(".").pop() : undefined)], ["$$uid", nodeUid], ["$$matchedSelectors", matchedSelectors], ["$$isTemplateInternalNode", isTemplateInternalNode], ["$$normalized", normalized]]).concat(parsedFields));
453
+ return Object.fromEntries(Object.entries(nodeData).filter(entry => !nodeIgnoreFields.includes(entry[0])).concat([["alias", nodeData.alias || (isBrickNode(nodeData) ? nodeData.ref || parsedTestId || parsedId || nodeData.brick.split(".").pop() : undefined)], ["$$uid", nodeUid], ["$$matchedSelectors", matchedSelectors], ["$$isTemplateInternalNode", isTemplateInternalNode], ["$$normalized", normalized]]).concat(parsedFields));
454
454
  }
455
455
 
456
456
  function getAppendingNodesAndEdges(nodeData, nodeUid, templateSourceMap) {
@@ -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--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";
2185
- 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"};
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