@logicflow/react-node-registry 1.2.0-alpha.2 → 1.2.0-alpha.4

package/lib/components/TitleBar.js

@@ -0,0 +1,114 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TitleBar = void 0;
+var react_1 = __importStar(require("react"));
+var lodash_es_1 = require("lodash-es");
+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 = (0, lodash_es_1.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 = (0, react_1.useState)(false), showTooltip = _b[0], setShowTooltip = _b[1];
+    var moreBtnRef = (0, react_1.useRef)(null);
+    var tooltipRef = (0, react_1.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);
+    };
+    (0, react_1.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_1.default.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_1.default.createElement("div", { className: "lf-vue-node-title-left" },
+            icon ? react_1.default.createElement("i", { className: "lf-vue-node-title-icon" }, icon) : null,
+            react_1.default.createElement("span", { className: "lf-vue-node-title-text" }, title)),
+        react_1.default.createElement("div", { className: "lf-vue-node-title-actions" },
+            react_1.default.createElement("button", { className: "lf-vue-node-title-expand", onClick: function (e) {
+                    e.stopPropagation();
+                    toggleExpand();
+                } },
+                react_1.default.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_1.default.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_1.default.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_1.default.createElement("button", { ref: moreBtnRef, className: "lf-vue-node-title-more", onClick: function (e) {
+                    e.stopPropagation();
+                    if (trigger === 'click')
+                        setShowTooltip(!showTooltip);
+                } },
+                react_1.default.createElement("i", { className: "lf-vue-node-title-more-icon" }, "\u22EF"))),
+            showMoreAction && (react_1.default.createElement("div", { ref: tooltipRef, className: "lf-vue-node-title-tooltip", style: {
+                    opacity: showTooltip ? 1 : 0,
+                    pointerEvents: showTooltip ? 'auto' : 'none',
+                } },
+                react_1.default.createElement("div", { className: "lf-vue-node-title-tooltip-list" }, actions.map(function (act, idx) { return (react_1.default.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) || '')); })))))));
+};
+exports.TitleBar = TitleBar;
+exports.default = exports.TitleBar;
+//# sourceMappingURL=TitleBar.js.map

package/lib/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/lib/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/lib/index.less

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

package/lib/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/lib/model.js

@@ -31,20 +31,54 @@ var core_1 = require("@logicflow/core");
 var lodash_es_1 = require("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' }, (0, lodash_es_1.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 (!(0, lodash_es_1.isNil)(width)) {
             this.width = width;
         }
-        if (height) {
+        if (!(0, lodash_es_1.isNil)(height)) {
             this.height = height;
         }
-        if (radius) {
+        if (!(0, lodash_es_1.isNil)(radius)) {
             this.radius = radius;
         }
+        if (this.__baseHeight === undefined) {
+            this.__baseHeight = (0, lodash_es_1.isNil)(height) ? this.height : height;
+        }
+        var extra = _showTitle ? (_titleHeight !== null && _titleHeight !== void 0 ? _titleHeight : 28) : 0;
+        var base = (0, lodash_es_1.isNil)(height) ? this.__baseHeight : height;
+        this.height = base + extra;
     };
     ReactNodeModel.prototype.getTextStyle = function () {
         // const { x, y, width, height } = this
@@ -58,6 +92,10 @@ var ReactNodeModel = /** @class */ (function (_super) {
         var customNodeStyle = this.properties.style;
         return __assign(__assign({}, style), ((0, lodash_es_1.cloneDeep)(customNodeStyle) || {}));
     };
+    ReactNodeModel.prototype.setNodeActions = function (actions) {
+        this.__actions =
+            (0, lodash_es_1.isArray)(actions) && !(0, lodash_es_1.isEmpty)(actions) ? (0, lodash_es_1.cloneDeep)(actions) : [];
+    };
     return ReactNodeModel;
 }(core_1.HtmlNodeModel));
 exports.ReactNodeModel = ReactNodeModel;

package/lib/model.js.map

@@ -1 +1 @@
-{"version":3,"file":"model.js","sourceRoot":"","sources":["../src/model.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,wCAA+E;AAC/E,uCAAqC;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,IAAA,qBAAS,EAAC,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,IAAA,qBAAS,EAAC,eAAe,CAAC,IAAI,EAAE,CAAC,EAGtC;IACH,CAAC;IACH,qBAAC;AAAD,CAAC,AA3CD,CAEU,oBAAa,GAyCtB;AA3CY,wCAAc;AA6C3B,kBAAe,cAAc,CAAA"}
+{"version":3,"file":"model.js","sourceRoot":"","sources":["../src/model.ts"],"names":[],"mappings":"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"}

package/lib/style/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/lib/style/index.less

@@ -0,0 +1,140 @@
+.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);
+
+  &-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: rgb(0 0 0 / 6%);
+}
+
+.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 rgb(0 0 0 / 10%);
+  border-radius: 6px;
+  box-shadow: 0 6px 20px rgb(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: rgb(0 0 0 / 5%);
+}

package/lib/style/raw.d.ts

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

package/lib/style/raw.js

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

package/lib/style/raw.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"raw.js","sourceRoot":"","sources":["../../src/style/raw.ts"],"names":[],"mappings":";AAAA,oBAAoB;;;AAEpB;;GAEG;AAEU,QAAA,OAAO,GAAG,unFA0HtB,CAAA"}