@logicflow/react-node-registry 1.2.0-alpha.1 → 1.2.0-alpha.3

package/.turbo/turbo-build.log

@@ -1,16 +1,16 @@
 
-> @logicflow/react-node-registry@1.2.0-alpha.0 prebuild /Users/didi/Desktop/github/LogicFlow/packages/react-node-registry
+> @logicflow/react-node-registry@1.2.0-alpha.2 prebuild /Users/didi/Desktop/github/LogicFlow/packages/react-node-registry
 > rss
 
 > [prebuild] run-s -s clean:build 
 > [clean:build] rimraf dist es lib 
 
-> @logicflow/react-node-registry@1.2.0-alpha.0 build /Users/didi/Desktop/github/LogicFlow/packages/react-node-registry
+> @logicflow/react-node-registry@1.2.0-alpha.2 build /Users/didi/Desktop/github/LogicFlow/packages/react-node-registry
 > rss
 
 > [build] run-p -s build:dev build:umd 
-> [build:umd] pnpm run --if-present build:less && rollup -c ../../rollup.config.js --bundleConfigAsCjs 
 > [build:dev] pnpm run --if-present build:less && run-p -s build:cjs build:esm 
+> [build:umd] pnpm run --if-present build:less && rollup -c ../../rollup.config.js --bundleConfigAsCjs 
 > [build:less] ./scripts/build-less
 > [build:less] ./scripts/build-less
 
@@ -31,4 +31,4 @@
 |                                    |
 +------------------------------------+
 (!) [plugin typescript] @rollup/plugin-typescript: Rollup requires that TypeScript produces ES Modules. Unfortunately your configuration specifies a "module" other than "esnext". Unless you know what you're doing, please change "module" to "esnext" in the target tsconfig.json file or plugin options.
-created dist/index.min.js in 8.4s
+created dist/index.min.js in 6.8s

package/CHANGELOG.md

@@ -1,5 +1,20 @@
 # @logicflow/react-node-registry
 
+## 1.2.0-alpha.3
+
+### Patch Changes
+
+- feat: 整体UI美化,并丰富可配置的UI项
+- Updated dependencies
+  - @logicflow/core@2.2.0-alpha.3
+
+## 1.2.0-alpha.2
+
+### Patch Changes
+
+- Updated dependencies
+  - @logicflow/core@2.2.0-alpha.2
+
 ## 1.2.0-alpha.1
 
 ### Patch Changes

package/dist/index.css

@@ -0,0 +1,122 @@
+.lf-vue-node-container {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  box-sizing: border-box;
+  padding: 6px;
+  color: #474747;
+  border-radius: 12px;
+  box-shadow: 0 0 10px #cad2e15f;
+}
+.lf-vue-node-content-wrap {
+  display: flex;
+  flex: 1 1 auto;
+  justify-content: center;
+}
+.lf-vue-node-title {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  box-sizing: border-box;
+  margin-bottom: 4px;
+  padding: 0 8px;
+  backdrop-filter: saturate(180%) blur(4px);
+}
+.lf-vue-node-title-expanded {
+  margin-bottom: 6px;
+  padding-bottom: 8px;
+  border-bottom: 1px solid #eaeaea;
+}
+@supports not (backdrop-filter: blur(1px)) {
+  .lf-vue-node-title {
+    backdrop-filter: none;
+  }
+}
+.lf-vue-node-title-left {
+  display: flex;
+  gap: 6px;
+  align-items: center;
+  min-width: 0;
+}
+.lf-vue-node-title-icon {
+  display: inline-block;
+  width: 16px;
+  height: 16px;
+  color: #666;
+  font-style: normal;
+  line-height: 16px;
+  text-align: center;
+}
+.lf-vue-node-title-text {
+  overflow: hidden;
+  color: #333;
+  font-weight: 500;
+  font-size: 14px;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+.lf-vue-node-title-actions {
+  display: flex;
+  gap: 6px;
+  align-items: center;
+}
+.lf-vue-node-title-expand,
+.lf-vue-node-title-more {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 20px;
+  height: 20px;
+  padding: 2px;
+  background: transparent;
+  border: none;
+  border-radius: 4px;
+  cursor: pointer;
+  transition: background 0.15s ease;
+  appearance: none;
+}
+.lf-vue-node-title-expand:hover,
+.lf-vue-node-title-more:hover {
+  background: rgba(0, 0, 0, 0.06);
+}
+.lf-vue-node-title-expand-icon {
+  color: #666;
+  font-style: normal;
+  transition: transform 0.3s ease;
+}
+.lf-vue-node-title-more-icon {
+  color: #666;
+  font-style: normal;
+}
+.lf-vue-node-title-tooltip {
+  position: absolute;
+  top: -50px;
+  right: -135px;
+  min-width: 120px;
+  max-width: 240px;
+  padding: 6px 8px;
+  background: #fff;
+  border: 1px solid rgba(0, 0, 0, 0.1);
+  border-radius: 6px;
+  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12);
+  transform: translateY(calc(100% + 4px));
+  transition: opacity 0.15s ease, transform 0.15s ease;
+}
+.lf-vue-node-title-tooltip-list {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+.lf-vue-node-title-tooltip-item {
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  padding: 6px;
+  color: #333;
+  font-size: 12px;
+  border-radius: 4px;
+  cursor: pointer;
+}
+.lf-vue-node-title-tooltip-item:hover {
+  background: rgba(0, 0, 0, 0.05);
+}

package/es/components/Container.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+import { BaseNodeModel, GraphModel } from '@logicflow/core';
+export type ContainerProps = {
+    node: BaseNodeModel;
+    graph: GraphModel;
+    children?: React.ReactNode;
+};
+export declare const Container: React.FC<ContainerProps>;
+export default Container;

package/es/components/Container.js

@@ -0,0 +1,16 @@
+import React from 'react';
+import TitleBar from './TitleBar';
+export var Container = function (_a) {
+    var _b;
+    var node = _a.node, graph = _a.graph, children = _a.children;
+    var props = (node === null || node === void 0 ? void 0 : node.properties) || {};
+    var titleColor = ((_b = props.style) === null || _b === void 0 ? void 0 : _b.titleColor) || '#E5EEFC';
+    var expanded = props._expanded === true;
+    return (React.createElement("div", { className: "lf-vue-node-container", style: {
+            background: "linear-gradient(180deg, ".concat(titleColor, " 0%, #FFFFFF 24px)"),
+        } },
+        props._showTitle && React.createElement(TitleBar, { node: node, graph: graph }),
+        expanded && React.createElement("div", { className: "lf-vue-node-content-wrap" }, children)));
+};
+export default Container;
+//# sourceMappingURL=Container.js.map

package/es/components/Container.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Container.js","sourceRoot":"","sources":["../../src/components/Container.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,OAAO,QAAQ,MAAM,YAAY,CAAA;AAQjC,MAAM,CAAC,IAAM,SAAS,GAA6B,UAAC,EAInD;;QAHC,IAAI,UAAA,EACJ,KAAK,WAAA,EACL,QAAQ,cAAA;IAER,IAAM,KAAK,GAAQ,CAAA,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAE,UAAU,KAAI,EAAE,CAAA;IACzC,IAAM,UAAU,GAAG,CAAA,MAAA,KAAK,CAAC,KAAK,0CAAE,UAAU,KAAI,SAAS,CAAA;IACvD,IAAM,QAAQ,GAAG,KAAK,CAAC,SAAS,KAAK,IAAI,CAAA;IAEzC,OAAO,CACL,6BACE,SAAS,EAAC,uBAAuB,EACjC,KAAK,EAAE;YACL,UAAU,EAAE,kCAA2B,UAAU,uBAAoB;SACtE;QAEA,KAAK,CAAC,UAAU,IAAI,oBAAC,QAAQ,IAAC,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,KAAK,GAAI;QAC1D,QAAQ,IAAI,6BAAK,SAAS,EAAC,0BAA0B,IAAE,QAAQ,CAAO,CACnE,CACP,CAAA;AACH,CAAC,CAAA;AAED,eAAe,SAAS,CAAA"}

package/es/components/TitleBar.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+import { BaseNodeModel, GraphModel } from '@logicflow/core';
+export type TitleBarProps = {
+    node: BaseNodeModel;
+    graph: GraphModel;
+};
+export declare const TitleBar: React.FC<TitleBarProps>;
+export default TitleBar;

package/es/components/TitleBar.js

@@ -0,0 +1,87 @@
+import React, { useEffect, useRef, useState } from 'react';
+import { isNumber } from 'lodash-es';
+export var TitleBar = function (_a) {
+    var node = _a.node, graph = _a.graph;
+    var props = (node === null || node === void 0 ? void 0 : node.properties) || {};
+    var icon = props._icon;
+    var title = props._title || '';
+    var expanded = !!props._expanded;
+    var titleHeight = isNumber(props._titleHeight) ? props._titleHeight : 28;
+    var actProps = props._titleActions || [];
+    var privActs = node.__actions || [];
+    var actions = Array.isArray(privActs) && privActs.length > 0 ? privActs : actProps;
+    var showMoreAction = Array.isArray(actions) && actions.length > 0;
+    var trigger = props.titleTrigger === 'hover' ? 'hover' : 'click';
+    var _b = useState(false), showTooltip = _b[0], setShowTooltip = _b[1];
+    var moreBtnRef = useRef(null);
+    var tooltipRef = useRef(null);
+    var toggleExpand = function () {
+        var _a;
+        var cur = !!((_a = node === null || node === void 0 ? void 0 : node.properties) === null || _a === void 0 ? void 0 : _a._expanded);
+        node === null || node === void 0 ? void 0 : node.setProperty('_expanded', !cur);
+    };
+    var runAction = function (act) {
+        var _a;
+        var fn = (act === null || act === void 0 ? void 0 : act.callback) ||
+            ((_a = (privActs || []).find(function (a) { return (a === null || a === void 0 ? void 0 : a.name) === (act === null || act === void 0 ? void 0 : act.name); })) === null || _a === void 0 ? void 0 : _a.callback);
+        typeof fn === 'function' && fn(node, graph);
+    };
+    useEffect(function () {
+        if (trigger === 'hover') {
+            var mb_1 = moreBtnRef.current;
+            var tt_1 = tooltipRef.current;
+            var onEnter_1 = function () { return setShowTooltip(true); };
+            var onLeave_1 = function () { return setShowTooltip(false); };
+            mb_1 === null || mb_1 === void 0 ? void 0 : mb_1.addEventListener('mouseenter', onEnter_1);
+            mb_1 === null || mb_1 === void 0 ? void 0 : mb_1.addEventListener('mouseleave', onLeave_1);
+            tt_1 === null || tt_1 === void 0 ? void 0 : tt_1.addEventListener('mouseenter', onEnter_1);
+            tt_1 === null || tt_1 === void 0 ? void 0 : tt_1.addEventListener('mouseleave', onLeave_1);
+            return function () {
+                mb_1 === null || mb_1 === void 0 ? void 0 : mb_1.removeEventListener('mouseenter', onEnter_1);
+                mb_1 === null || mb_1 === void 0 ? void 0 : mb_1.removeEventListener('mouseleave', onLeave_1);
+                tt_1 === null || tt_1 === void 0 ? void 0 : tt_1.removeEventListener('mouseenter', onEnter_1);
+                tt_1 === null || tt_1 === void 0 ? void 0 : tt_1.removeEventListener('mouseleave', onLeave_1);
+            };
+        }
+        var onDoc = function (e) {
+            var mb = moreBtnRef.current;
+            var tt = tooltipRef.current;
+            var t = e.target;
+            if (showTooltip && mb && tt && !mb.contains(t) && !tt.contains(t)) {
+                setShowTooltip(false);
+            }
+        };
+        document.addEventListener('click', onDoc);
+        return function () { return document.removeEventListener('click', onDoc); };
+    }, [trigger, showTooltip]);
+    return (React.createElement("div", { className: expanded
+            ? 'lf-vue-node-title lf-vue-node-title-expanded'
+            : 'lf-vue-node-title', style: { height: expanded ? titleHeight : 18 }, title: title },
+        React.createElement("div", { className: "lf-vue-node-title-left" },
+            icon ? React.createElement("i", { className: "lf-vue-node-title-icon" }, icon) : null,
+            React.createElement("span", { className: "lf-vue-node-title-text" }, title)),
+        React.createElement("div", { className: "lf-vue-node-title-actions" },
+            React.createElement("button", { className: "lf-vue-node-title-expand", onClick: function (e) {
+                    e.stopPropagation();
+                    toggleExpand();
+                } },
+                React.createElement("svg", { width: 14, height: 12, viewBox: "0 0 14 12", xmlns: "http://www.w3.org/2000/svg", className: "lf-vue-node-title-expand-icon", style: { transform: expanded ? 'rotate(180deg)' : 'rotate(0deg)' } },
+                    React.createElement("path", { d: "M0.5201124,5.47988755C0.23603013,5.7639699,0.24460429,6.2271326,0.53900635,6.5005059L6.3195491,11.8681526C6.7032304,12.2244282,7.2967696,12.2244282,7.6804514,11.8681526L13.460994,6.5005059C13.755396,6.2271326,13.76397,5.7639699,13.479888,5.47988755C13.211547,5.21154633,12.779465,5.20215771,12.499721,5.45858961L7.3378625,10.1902928C7.1467018,10.3655233,6.8532982,10.3655233,6.6621375,10.1902928L1.5002797,5.45858967C1.2205358,5.20215771,0.78845364,5.21154633,0.5201124,5.47988755Z", fill: "#474747" }),
+                    React.createElement("path", { d: "M0.5201124,0.47988755C0.23603013,0.7639699,0.24460429,1.2271326,0.53900635,1.5005059L6.3195491,6.8681526C6.7032304,7.2244282,7.2967696,7.2244282,7.6804514,6.8681526L13.460994,1.5005059C13.755396,1.2271326,13.76397,0.7639699,13.479888,0.47988755C13.211547,0.21154633,12.779465,0.20215771,12.499721,0.45858961L7.3378625,5.1902928C7.1467018,5.3655233,6.8532982,5.3655233,6.6621375,5.1902928L1.5002797,0.45858967C1.2205358,0.20215771,0.78845364,0.21154633,0.5201124,0.47988755Z", fill: "#9B9B9B" }))),
+            showMoreAction && (React.createElement("button", { ref: moreBtnRef, className: "lf-vue-node-title-more", onClick: function (e) {
+                    e.stopPropagation();
+                    if (trigger === 'click')
+                        setShowTooltip(!showTooltip);
+                } },
+                React.createElement("i", { className: "lf-vue-node-title-more-icon" }, "\u22EF"))),
+            showMoreAction && (React.createElement("div", { ref: tooltipRef, className: "lf-vue-node-title-tooltip", style: {
+                    opacity: showTooltip ? 1 : 0,
+                    pointerEvents: showTooltip ? 'auto' : 'none',
+                } },
+                React.createElement("div", { className: "lf-vue-node-title-tooltip-list" }, actions.map(function (act, idx) { return (React.createElement("div", { key: idx, className: "lf-vue-node-title-tooltip-item", onClick: function (e) {
+                        e.stopPropagation();
+                        runAction(act);
+                    } }, (act === null || act === void 0 ? void 0 : act.name) || '')); })))))));
+};
+export default TitleBar;
+//# sourceMappingURL=TitleBar.js.map

package/es/components/TitleBar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TitleBar.js","sourceRoot":"","sources":["../../src/components/TitleBar.tsx"],"names":[],"mappings":"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"}

package/es/index.css

@@ -0,0 +1,122 @@
+.lf-vue-node-container {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  box-sizing: border-box;
+  padding: 6px;
+  color: #474747;
+  border-radius: 12px;
+  box-shadow: 0 0 10px #cad2e15f;
+}
+.lf-vue-node-content-wrap {
+  display: flex;
+  flex: 1 1 auto;
+  justify-content: center;
+}
+.lf-vue-node-title {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  box-sizing: border-box;
+  margin-bottom: 4px;
+  padding: 0 8px;
+  backdrop-filter: saturate(180%) blur(4px);
+}
+.lf-vue-node-title-expanded {
+  margin-bottom: 6px;
+  padding-bottom: 8px;
+  border-bottom: 1px solid #eaeaea;
+}
+@supports not (backdrop-filter: blur(1px)) {
+  .lf-vue-node-title {
+    backdrop-filter: none;
+  }
+}
+.lf-vue-node-title-left {
+  display: flex;
+  gap: 6px;
+  align-items: center;
+  min-width: 0;
+}
+.lf-vue-node-title-icon {
+  display: inline-block;
+  width: 16px;
+  height: 16px;
+  color: #666;
+  font-style: normal;
+  line-height: 16px;
+  text-align: center;
+}
+.lf-vue-node-title-text {
+  overflow: hidden;
+  color: #333;
+  font-weight: 500;
+  font-size: 14px;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+.lf-vue-node-title-actions {
+  display: flex;
+  gap: 6px;
+  align-items: center;
+}
+.lf-vue-node-title-expand,
+.lf-vue-node-title-more {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 20px;
+  height: 20px;
+  padding: 2px;
+  background: transparent;
+  border: none;
+  border-radius: 4px;
+  cursor: pointer;
+  transition: background 0.15s ease;
+  appearance: none;
+}
+.lf-vue-node-title-expand:hover,
+.lf-vue-node-title-more:hover {
+  background: rgba(0, 0, 0, 0.06);
+}
+.lf-vue-node-title-expand-icon {
+  color: #666;
+  font-style: normal;
+  transition: transform 0.3s ease;
+}
+.lf-vue-node-title-more-icon {
+  color: #666;
+  font-style: normal;
+}
+.lf-vue-node-title-tooltip {
+  position: absolute;
+  top: -50px;
+  right: -135px;
+  min-width: 120px;
+  max-width: 240px;
+  padding: 6px 8px;
+  background: #fff;
+  border: 1px solid rgba(0, 0, 0, 0.1);
+  border-radius: 6px;
+  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12);
+  transform: translateY(calc(100% + 4px));
+  transition: opacity 0.15s ease, transform 0.15s ease;
+}
+.lf-vue-node-title-tooltip-list {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+.lf-vue-node-title-tooltip-item {
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  padding: 6px;
+  color: #333;
+  font-size: 12px;
+  border-radius: 4px;
+  cursor: pointer;
+}
+.lf-vue-node-title-tooltip-item:hover {
+  background: rgba(0, 0, 0, 0.05);
+}

package/es/index.less

@@ -0,0 +1 @@
+@import url('./style/index.less');

package/es/model.d.ts

@@ -1,4 +1,9 @@
-import LogicFlow, { HtmlNodeModel, IHtmlNodeProperties } from '@logicflow/core';
+import LogicFlow, { HtmlNodeModel, IHtmlNodeProperties, BaseNodeModel, GraphModel } from '@logicflow/core';
+import NodeConfig = LogicFlow.NodeConfig;
+export type NodeAction = {
+    name: string;
+    callback?: (node: BaseNodeModel, graph: GraphModel) => void;
+};
 export interface ReactCustomProperties extends IHtmlNodeProperties {
     width?: number;
     height?: number;
@@ -7,10 +12,22 @@ export interface ReactCustomProperties extends IHtmlNodeProperties {
     refY?: number;
     style?: LogicFlow.CommonTheme;
     textStyle?: LogicFlow.TextNodeTheme;
+    _showTitle?: boolean;
+    _title?: string;
+    _icon?: string;
+    _titleHeight?: number;
+    _expanded?: boolean;
 }
 export declare class ReactNodeModel<P extends ReactCustomProperties = ReactCustomProperties> extends HtmlNodeModel<P> {
+    private __baseHeight?;
+    __actions?: {
+        name: string;
+        callback?: (node: BaseNodeModel, graph: GraphModel) => void;
+    }[];
+    constructor(data: NodeConfig<P>, graphModel: GraphModel);
     setAttributes(): void;
     getTextStyle(): LogicFlow.TextNodeTheme;
     getNodeStyle(): LogicFlow.CommonTheme;
+    setNodeActions(actions: NodeAction[]): void;
 }
 export default ReactNodeModel;

package/es/model.js

@@ -24,24 +24,58 @@ var __assign = (this && this.__assign) || function () {
     };
     return __assign.apply(this, arguments);
 };
-import { HtmlNodeModel } from '@logicflow/core';
-import { cloneDeep } from 'lodash-es';
+import { HtmlNodeModel, } from '@logicflow/core';
+import { cloneDeep, isNil, isArray, isEmpty } from 'lodash-es';
 var ReactNodeModel = /** @class */ (function (_super) {
     __extends(ReactNodeModel, _super);
-    function ReactNodeModel() {
-        return _super !== null && _super.apply(this, arguments) || this;
+    function ReactNodeModel(data, graphModel) {
+        var _this = _super.call(this, data, graphModel) || this;
+        var properties = data.properties;
+        if (properties) {
+            var _a = properties._showTitle, _showTitle = _a === void 0 ? false : _a, _b = properties.style, style = _b === void 0 ? {} : _b;
+            if (_showTitle) {
+                _this.minWidth = 160;
+                _this.minHeight = 80;
+                _this.text.editable = false;
+                // 判断当前节点宽高是否小于最小宽高，如果是，强制设置为最小宽高
+                var newWidth = _this.width < _this.minWidth ? _this.minWidth : _this.width;
+                var newHeight = _this.height < _this.minHeight ? _this.minHeight : _this.height;
+                _this.setProperties(__assign(__assign({ _expanded: false }, properties), { style: __assign({ overflow: 'visible' }, cloneDeep(style)), width: newWidth, height: newHeight }));
+                _this.setNodeActions([
+                    {
+                        name: '复制',
+                        callback: function (nodeModel, graphModel) {
+                            graphModel.cloneNode(nodeModel.id);
+                        },
+                    },
+                    {
+                        name: '删除',
+                        callback: function (nodeModel, graphModel) {
+                            graphModel.deleteNode(nodeModel.id);
+                        },
+                    },
+                ]);
+            }
+        }
+        return _this;
     }
     ReactNodeModel.prototype.setAttributes = function () {
-        var _a = this.properties, width = _a.width, height = _a.height, radius = _a.radius;
-        if (width) {
+        var _a = this.properties, width = _a.width, height = _a.height, radius = _a.radius, _showTitle = _a._showTitle, _titleHeight = _a._titleHeight;
+        if (!isNil(width)) {
             this.width = width;
         }
-        if (height) {
+        if (!isNil(height)) {
             this.height = height;
         }
-        if (radius) {
+        if (!isNil(radius)) {
             this.radius = radius;
         }
+        if (this.__baseHeight === undefined) {
+            this.__baseHeight = isNil(height) ? this.height : height;
+        }
+        var extra = _showTitle ? (_titleHeight !== null && _titleHeight !== void 0 ? _titleHeight : 28) : 0;
+        var base = isNil(height) ? this.__baseHeight : height;
+        this.height = base + extra;
     };
     ReactNodeModel.prototype.getTextStyle = function () {
         // const { x, y, width, height } = this
@@ -55,6 +89,10 @@ var ReactNodeModel = /** @class */ (function (_super) {
         var customNodeStyle = this.properties.style;
         return __assign(__assign({}, style), (cloneDeep(customNodeStyle) || {}));
     };
+    ReactNodeModel.prototype.setNodeActions = function (actions) {
+        this.__actions =
+            isArray(actions) && !isEmpty(actions) ? cloneDeep(actions) : [];
+    };
     return ReactNodeModel;
 }(HtmlNodeModel));
 export { ReactNodeModel };

package/es/model.js.map

@@ -1 +1 @@
-{"version":3,"file":"model.js","sourceRoot":"","sources":["../src/model.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,OAAkB,EAAE,aAAa,EAAuB,MAAM,iBAAiB,CAAA;AAC/E,OAAO,EAAE,SAAS,EAAE,MAAM,WAAW,CAAA;AAiBrC;IAEU,kCAAgB;IAF1B;;IA2CA,CAAC;IAxCC,sCAAa,GAAb;QACQ,IAAA,KAA4B,IAAI,CAAC,UAAU,EAAzC,KAAK,WAAA,EAAE,MAAM,YAAA,EAAE,MAAM,YAAoB,CAAA;QACjD,IAAI,KAAK,EAAE,CAAC;YACV,IAAI,CAAC,KAAK,GAAG,KAAK,CAAA;QACpB,CAAC;QACD,IAAI,MAAM,EAAE,CAAC;YACX,IAAI,CAAC,MAAM,GAAG,MAAM,CAAA;QACtB,CAAC;QACD,IAAI,MAAM,EAAE,CAAC;YACX,IAAI,CAAC,MAAM,GAAG,MAAM,CAAA;QACtB,CAAC;IACH,CAAC;IAED,qCAAY,GAAZ;QACE,uCAAuC;QACjC,IAAA,KAAoC,IAAI,CAAC,UAAU,EAAjD,YAAQ,EAAR,IAAI,mBAAG,CAAC,KAAA,EAAE,YAAQ,EAAR,IAAI,mBAAG,CAAC,KAAA,EAAE,SAAS,eAAoB,CAAA;QACzD,IAAM,KAAK,GAAG,gBAAK,CAAC,YAAY,WAAE,CAAA;QAElC,6BAA6B;QAC7B,sCACK,KAAK,GACL,CAAC,SAAS,CAAC,SAAS,CAAC,IAAI,EAAE,CAAC,KAC/B,SAAS,EAAE,yBAAkB,IAAI,cAAI,IAAI,MAAG,IAC7C;IACH,CAAC;IAED,qCAAY,GAAZ;QACE,IAAM,KAAK,GAAG,gBAAK,CAAC,YAAY,WAAE,CAAA;QAEhC,IAAO,eAAe,GAEpB,IAAI,CAAC,UAAU,MAFK,CAEL;QAEnB,6BACK,KAAK,GACL,CAAC,SAAS,CAAC,eAAe,CAAC,IAAI,EAAE,CAAC,EAGtC;IACH,CAAC;IACH,qBAAC;AAAD,CAAC,AA3CD,CAEU,aAAa,GAyCtB;;AAED,eAAe,cAAc,CAAA"}
+{"version":3,"file":"model.js","sourceRoot":"","sources":["../src/model.ts"],"names":[],"mappings":"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"}