@relation-graph/vue3 3.0.8 → 3.0.10

package/README-zh.md

@@ -0,0 +1,302 @@
+<img src="https://www.relation-graph.com/github-doc-images/relation-graph-yellow-small.png" width="60" />
+
+# relation-graph
+
+[English ](README.md) | [简体中文](README-zh.md)
+
+- **relation-graph** 是一个关系数据展示组件，支持 React、Vue 2、Vue 3、Svelte 和 WebComponent。它允许用户通过插槽，使用“通用 HTML 元素、Vue 组件、React 组件”等方式对图形元素进行完全自定义，并提供实用的 API 接口，方便开发交互式图形应用。<br />
+- 除了典型的关系数据展示能力之外，relation-graph 还支持作为绘图板使用。你可以在绘图板上放置任意内容，只需给想要连接的元素设置 id，并定义“element lines（元素连线）”。这样就可以轻松构建支持任意连接、缩放、拖拽，以及通过 API 进行动态交互的绘图板。
+
+### 文档与示例
+
+- [https://relation-graph.com](https://relation-graph.com)
+
+上述网站包含文档、在线演示以及面向软件开发者的可视化配置工具。
+
+### 快速开始
+
+```shell script
+# React
+npm install --save @relation-graph/react
+# Vue3
+npm install --save @relation-graph/vue
+# Vue2
+npm install --save @relation-graph/vue2
+# Svelte
+npm install --save @relation-graph/svelte
+# Web Components
+import { ... } from "https://esm.sh/@relation-graph/web-components";
+```
+```typescript
+// React:
+import RelationGraph from '@relation-graph/react'
+// Vue3:
+import RelationGraph from '@relation-graph/vue'
+// Vue2:
+import RelationGraph from '@relation-graph/vue2'
+// Svelte:
+import RelationGraph from '@relation-graph/svelte'
+// Web Components:
+// 使用自定义元素 <relation-graph></relation-graph>;
+```
+<details>
+  <summary>在 react 中使用 <strong>relation-graph</strong></summary>
+#### `index.tsx`
+```typescript jsx
+import { RGProvider } from '@relation-graph/react';
+import React from 'react';
+import MyGraph from "./MyGraph";
+const MyExample: React.FC = () => {
+    return (
+        <RGProvider>
+            <MyGraph />
+        </RGProvider>
+    );
+};
+export default MyExample;
+```
+
+#### `MyGraph.tsx`
+```typescript jsx
+import React, { useEffect } from 'react';
+import {RelationGraph, RGHooks, RGMiniView, RGSlotOnNode, RGNodeShape, RGSlotOnView} from '@relation-graph/react';
+import type {
+    RGLine,
+    RGLink,
+    RGNode,
+    RGNodeSlotProps,
+    RGOptions,
+    RGUserEvent,
+    JsonNode,
+    JsonLine,
+    RGJsonData
+} from '@relation-graph/react';
+import CustomNode from "./CustomNode";
+
+const staticJsonData: RGJsonData = {
+    rootId: '2',
+    nodes: [
+        { id: '2', text: 'Initrode', width: 100, height: 100, data: { myicon: 'delivery_truck' } },
+        { id: '1', text: 'Paper Street Soap Co.', data: { myicon: 'fries' } },
+        { id: '3', text: 'Cyberdyne Systems', data: { myicon: 'football' } },
+        { id: '4', text: 'Tyrell Corporation', data: { myicon: 'desktop' } },
+        { id: '6', text: 'Weyland-Yutani', data: { myicon: 'fries' } },
+        { id: '7', text: 'Hooli', data: { myicon: 'desktop' } },
+        { id: '8', text: 'Vehement Capital', data: { myicon: 'football' } },
+        { id: '9', text: 'Omni Consumer Products', data: { myicon: 'football' } },
+        { id: '71', text: 'Stark Industries', data: { myicon: 'delivery_truck' } },
+        { id: '72', text: 'Buy n Large', data: { myicon: 'fries' } },
+        { id: '73', text: 'Binford Tools', data: { myicon: 'delivery_truck' } },
+        { id: '81', text: 'Initech', data: { myicon: 'fries' } },
+        { id: '82', text: 'Aperture Science', data: { myicon: 'desktop' } },
+        { id: '83', text: 'Prestige Worldwide', data: { myicon: 'delivery_truck' } },
+        { id: '84', text: 'Massive Dynamic', data: { myicon: 'football' } },
+        { id: '85', text: 'Virtucon', data: { myicon: 'delivery_truck' } },
+        { id: '91', text: 'Acme Corp', data: { myicon: 'football' } },
+        { id: '92', text: 'Nakatomi Trading', data: { myicon: 'football' } },
+        { id: '5', text: 'Los Pollos Hermanos', data: { myicon: 'burger' } }
+    ] as JsonNode[],
+    lines: [
+        { from: '7', to: '71', text: 'Invest' },
+        { from: '7', to: '72', text: 'Invest' },
+        { from: '7', to: '73', text: 'Invest' },
+        { from: '8', to: '81', text: 'Invest' },
+        { from: '8', to: '82', text: 'Invest' },
+        { from: '8', to: '83', text: 'Invest' },
+        { from: '8', to: '84', text: 'Invest' },
+        { from: '8', to: '85', text: 'Invest' },
+        { from: '9', to: '91', text: 'Invest' },
+        { from: '9', to: '92', text: 'Invest' },
+        { from: '1', to: '2', text: 'Invest' },
+        { from: '3', to: '1', text: 'Executive' },
+        { from: '4', to: '2', text: 'Executive' },
+        { from: '6', to: '2', text: 'Executive' },
+        { from: '7', to: '2', text: 'Executive' },
+        { from: '8', to: '2', text: 'Executive' },
+        { from: '9', to: '2', text: 'Executive' },
+        { from: '1', to: '5', text: 'Invest' }
+    ] as JsonLine[]
+};
+
+const MyGraph: React.FC = () => {
+    const graphInstance = RGHooks.useGraphInstance();
+
+    const graphOptions: RGOptions = {
+        debug: true,
+        defaultLineShape: RGLineShape.StandardStraight,
+        defaultNodeShape: RGNodeShape.circle,
+        defaultNodeWidth: 60,
+        defaultNodeHeight: 60,
+        defaultLineTextOnPath: true,
+        layout: {
+            layoutName: 'center'
+        },
+        defaultExpandHolderPosition: 'right',
+        reLayoutWhenExpandedOrCollapsed: true
+    };
+
+    const initializeGraph = async () => {
+        await graphInstance.setJsonData(staticJsonData);
+        graphInstance.moveToCenter();
+        graphInstance.zoomToFit();
+    };
+
+    useEffect(() => {
+        initializeGraph();
+    }, []);
+
+    const onNodeClick = (node: RGNode, e: RGUserEvent) => {
+        console.log('onNodeClick:', node.text);
+        return true;
+    };
+
+    const onLineClick = (line: RGLine, link: RGLink, e: RGUserEvent) => {
+        console.log('onLineClick:', line.text, line.from, line.to);
+        return true;
+    };
+
+    return (
+        <div className="my-graph" style={{ height: 'calc(100vh - 0px)' }}>
+            <RelationGraph
+                options={graphOptions}
+                onNodeClick={onNodeClick}
+                onLineClick={onLineClick}
+            >
+                {/* 5. 节点内容插槽 */}
+                <RGSlotOnNode>
+                    {({ node, checked, dragging }: RGNodeSlotProps) => (
+                        <CustomNode node={node} checked={checked} dragging={dragging} />
+                    )}
+                </RGSlotOnNode>
+                <RGSlotOnView>
+                    <RGMiniView />
+                </RGSlotOnView>
+            </RelationGraph>
+        </div>
+    );
+};
+export default MyGraph;
+
+```
+
+#### `CustomNode.tsx`
+```typescript jsx
+import React from 'react';
+import type { RGNodeSlotProps } from '@relation-graph/react';
+import {HelpCircle, Monitor, Sandwich, Trophy, Truck, Utensils} from "lucide-react";
+
+const IconSwitcher = ({ iconName, size = 24, color = 'currentColor' }) => {
+    const props = { size, color };
+    switch (iconName) {
+        case 'desktop':
+            return <Monitor {...props} />;
+        case 'burger':
+            return <Sandwich {...props} />;
+        case 'delivery_truck':
+            return <Truck {...props} />;
+        case 'fries':
+            return <Utensils {...props} />;
+        case 'football':
+            return <Trophy {...props} />;
+        default:
+            return <HelpCircle {...props} />;
+    }
+};
+const CustomNode: React.FC<RGNodeSlotProps> = ({ node }) => {
+    if (node.id === '2') { // 根节点
+        return (
+            // 这里的 `h-full` 和 `w-full` 生效的前提是：节点数据中已设置 `width` 和 `height` 属性，或者全局已配置 `defaultNodeWidth` 和 `defaultNodeHeight`。
+            <div className="my-root z-[555] h-full w-full rounded-full relative text-lg flex place-items-center justify-center overflow-hidden">
+                <div className="py-2 w-full text-center text-white bg-gray-100 bg-opacity-40 border-t border-b border-gray-500">
+                    {node.text}
+                </div>
+            </div>
+        );
+    }
+    return ( // 普通节点
+        // 这里的 `h-full` 和 `w-full` 生效的前提是：节点数据中已设置 `width` 和 `height` 属性，或者全局已配置 `defaultNodeWidth` 和 `defaultNodeHeight`。
+        <div className="h-full w-full rounded-full flex place-items-center justify-center shadow-md">
+            <IconSwitcher iconName={node.data?.myicon} size={30} />
+            <div
+                className="bg-gray-200 text-black px-2 rounded-lg absolute my-node-text"
+                style={{
+                    marginTop: '100%',
+                    transform: 'translateY(15px)'
+                }}
+            >
+                {node.text}
+            </div>
+        </div>
+    );
+};
+export default CustomNode;
+
+```
+
+#### 示例代码效果
+![简单示例效果图](https://www.relation-graph.com/github-doc-images/relation-graph-simple.png)
+</details>
+
+---
+
+
+### 示例项目
+
+
+- 完整的 React 示例项目：
+- https://github.com/seeksdream/relation-graph-vue2-demo
+-
+- 完整的 Vue3 示例项目：
+- https://github.com/seeksdream/relation-graph-react-demo
+
+- 完整的 Vue2 示例项目：
+- https://github.com/seeksdream/relation-graph-vue3-demo
+
+- 完整的 Svelte 示例项目：
+- https://github.com/seeksdream/relation-graph-svelte-demo
+
+- 完整的 Web Components 示例项目：
+- https://github.com/seeksdream/relation-graph-webcomponents-demo
+
+
+### 更多示例
+- [https://relation-graph.com/examples](https://relation-graph.com/examples)
+
+
+
+![relation-graph](https://www.relation-graph.com/github-doc-images/relation-graph-images-m.png)
+
+![center-层级距离设置](https://www.relation-graph.com/demo-images/distance_coefficient.gif)
+![力学布局(force)](https://www.relation-graph.com/demo-images/layout-force.gif)
+![节点展开/收缩的用法](https://www.relation-graph.com/demo-images/adv-expand.gif)
+![节点筛选 & 关系筛选](https://www.relation-graph.com/demo-images/adv-data-filter.gif)
+![节点/连线点击效果2](https://www.relation-graph.com/demo-images/adv-effect2.gif)
+![展开/收缩 时动画效果](https://www.relation-graph.com/demo-images/expand-animation.gif)
+![展开/关闭所有](https://www.relation-graph.com/demo-images/open-all-close-all.gif)
+![布局切换事件](https://www.relation-graph.com/demo-images/before-change-layout.gif)
+
+### 完整示例项目
+
+- 完整 Vue2 示例项目：
+- [https://github.com/seeksdream/relation-graph-vue2-demo(Vite)](https://github.com/seeksdream/relation-graph-vue2-demo)
+- [https://github.com/seeksdream/relation-graph-vue2-demo(Webpack)](https://github.com/seeksdream/relation-graph-webpack)
+
+- 完整 Vue3 示例项目：
+- https://github.com/seeksdream/relation-graph-vue3-demo
+
+- 完整 React 示例项目：
+- https://github.com/seeksdream/relation-graph-react-demo
+
+
+### 更多信息
+
+- [https://relation-graph.com](https://relation-graph.com)
+
+
+### 联系我
+
+- 我的 WhatsApp：
+
+  <img src="https://www.relation-graph.com/github-doc-images/Whatsapp.png" width="200" />
+
+- QQ：3235808353

package/README.md

@@ -0,0 +1,304 @@
+
+
+<img src="https://www.relation-graph.com/github-doc-images/relation-graph-yellow-small.png" width="60" />
+
+# relation-graph
+
+[English ](README.md) | [简体中文](README-zh.md)
+
+- **relation-graph** is a relationship data display component that supports React, Vue 2, Vue 3, Svelte and WebComponent. It enables users to fully customize graphical elements using "common HTML elements, Vue components, React components" through slots, and provides practical API interfaces to facilitate the development of interactive graphical applications."<br />
+-  In addition to the typical relationship data display functionality, the relation-graph also supports being used as a drawing board. You can place any content on the drawing board, simply by setting an id for the elements you want to connect, and defining "element lines." This allows for the easy creation of a drawing board that supports the creation of arbitrary connections, zooming and dragging, and dynamic interactions through the API.
+### Docs & Examples
+
+- [https://relation-graph.com](https://relation-graph.com)
+
+The website above includes documentation, online demos, and a visual configuration tool for software developers.
+
+### Getting Started
+
+```shell script
+# React
+npm install --save @relation-graph/react
+# Vue3
+npm install --save @relation-graph/vue
+# Vue2
+npm install --save @relation-graph/vue2
+# Svelte
+npm install --save @relation-graph/svelte
+# Web Components
+import { ... } from "https://esm.sh/@relation-graph/web-components";
+```
+```typescript
+// React:
+import RelationGraph from '@relation-graph/react'
+// Vue3:
+import RelationGraph from '@relation-graph/vue'
+// Vue2:
+import RelationGraph from '@relation-graph/vue2'
+// Svelte:
+import RelationGraph from '@relation-graph/svelte'
+// Web Components:
+// Use the custom element <relation-graph></relation-graph>;
+```
+<details>
+  <summary>Use <strong>relation-graph</strong> in react</summary>
+#### `index.tsx`
+```typescript jsx
+import { RGProvider } from '@relation-graph/react';
+import React from 'react';
+import MyGraph from "./MyGraph";
+const MyExample: React.FC = () => {
+    return (
+        <RGProvider>
+            <MyGraph />
+        </RGProvider>
+    );
+};
+export default MyExample;
+```
+
+#### `MyGraph.tsx`
+```typescript jsx
+import React, { useEffect } from 'react';
+import {RelationGraph, RGHooks, RGMiniView, RGSlotOnNode, RGNodeShape, RGSlotOnView} from '@relation-graph/react';
+import type {
+    RGLine,
+    RGLink,
+    RGNode,
+    RGNodeSlotProps,
+    RGOptions,
+    RGUserEvent,
+    JsonNode,
+    JsonLine,
+    RGJsonData
+} from '@relation-graph/react';
+import CustomNode from "./CustomNode";
+
+const staticJsonData: RGJsonData = {
+    rootId: '2',
+    nodes: [
+        { id: '2', text: 'Initrode', width: 100, height: 100, data: { myicon: 'delivery_truck' } },
+        { id: '1', text: 'Paper Street Soap Co.', data: { myicon: 'fries' } },
+        { id: '3', text: 'Cyberdyne Systems', data: { myicon: 'football' } },
+        { id: '4', text: 'Tyrell Corporation', data: { myicon: 'desktop' } },
+        { id: '6', text: 'Weyland-Yutani', data: { myicon: 'fries' } },
+        { id: '7', text: 'Hooli', data: { myicon: 'desktop' } },
+        { id: '8', text: 'Vehement Capital', data: { myicon: 'football' } },
+        { id: '9', text: 'Omni Consumer Products', data: { myicon: 'football' } },
+        { id: '71', text: 'Stark Industries', data: { myicon: 'delivery_truck' } },
+        { id: '72', text: 'Buy n Large', data: { myicon: 'fries' } },
+        { id: '73', text: 'Binford Tools', data: { myicon: 'delivery_truck' } },
+        { id: '81', text: 'Initech', data: { myicon: 'fries' } },
+        { id: '82', text: 'Aperture Science', data: { myicon: 'desktop' } },
+        { id: '83', text: 'Prestige Worldwide', data: { myicon: 'delivery_truck' } },
+        { id: '84', text: 'Massive Dynamic', data: { myicon: 'football' } },
+        { id: '85', text: 'Virtucon', data: { myicon: 'delivery_truck' } },
+        { id: '91', text: 'Acme Corp', data: { myicon: 'football' } },
+        { id: '92', text: 'Nakatomi Trading', data: { myicon: 'football' } },
+        { id: '5', text: 'Los Pollos Hermanos', data: { myicon: 'burger' } }
+    ] as JsonNode[],
+    lines: [
+        { from: '7', to: '71', text: 'Invest' },
+        { from: '7', to: '72', text: 'Invest' },
+        { from: '7', to: '73', text: 'Invest' },
+        { from: '8', to: '81', text: 'Invest' },
+        { from: '8', to: '82', text: 'Invest' },
+        { from: '8', to: '83', text: 'Invest' },
+        { from: '8', to: '84', text: 'Invest' },
+        { from: '8', to: '85', text: 'Invest' },
+        { from: '9', to: '91', text: 'Invest' },
+        { from: '9', to: '92', text: 'Invest' },
+        { from: '1', to: '2', text: 'Invest' },
+        { from: '3', to: '1', text: 'Executive' },
+        { from: '4', to: '2', text: 'Executive' },
+        { from: '6', to: '2', text: 'Executive' },
+        { from: '7', to: '2', text: 'Executive' },
+        { from: '8', to: '2', text: 'Executive' },
+        { from: '9', to: '2', text: 'Executive' },
+        { from: '1', to: '5', text: 'Invest' }
+    ] as JsonLine[]
+};
+
+const MyGraph: React.FC = () => {
+    const graphInstance = RGHooks.useGraphInstance();
+
+    const graphOptions: RGOptions = {
+        debug: true,
+        defaultLineShape: RGLineShape.StandardStraight,
+        defaultNodeShape: RGNodeShape.circle,
+        defaultNodeWidth: 60,
+        defaultNodeHeight: 60,
+        defaultLineTextOnPath: true,
+        layout: {
+            layoutName: 'center'
+        },
+        defaultExpandHolderPosition: 'right',
+        reLayoutWhenExpandedOrCollapsed: true
+    };
+
+    const initializeGraph = async () => {
+        await graphInstance.setJsonData(staticJsonData);
+        graphInstance.moveToCenter();
+        graphInstance.zoomToFit();
+    };
+
+    useEffect(() => {
+        initializeGraph();
+    }, []);
+
+    const onNodeClick = (node: RGNode, e: RGUserEvent) => {
+        console.log('onNodeClick:', node.text);
+        return true;
+    };
+
+    const onLineClick = (line: RGLine, link: RGLink, e: RGUserEvent) => {
+        console.log('onLineClick:', line.text, line.from, line.to);
+        return true;
+    };
+
+    return (
+        <div className="my-graph" style={{ height: 'calc(100vh - 0px)' }}>
+            <RelationGraph
+                options={graphOptions}
+                onNodeClick={onNodeClick}
+                onLineClick={onLineClick}
+            >
+                {/* 5. Node content slot */}
+                <RGSlotOnNode>
+                    {({ node, checked, dragging }: RGNodeSlotProps) => (
+                        <CustomNode node={node} checked={checked} dragging={dragging} />
+                    )}
+                </RGSlotOnNode>
+                <RGSlotOnView>
+                    <RGMiniView />
+                </RGSlotOnView>
+            </RelationGraph>
+        </div>
+    );
+};
+export default MyGraph;
+
+```
+
+#### `CustomNode.tsx`
+```typescript jsx
+import React from 'react';
+import type { RGNodeSlotProps } from '@relation-graph/react';
+import {HelpCircle, Monitor, Sandwich, Trophy, Truck, Utensils} from "lucide-react";
+
+const IconSwitcher = ({ iconName, size = 24, color = 'currentColor' }) => {
+    const props = { size, color };
+    switch (iconName) {
+        case 'desktop':
+            return <Monitor {...props} />;
+        case 'burger':
+            return <Sandwich {...props} />;
+        case 'delivery_truck':
+            return <Truck {...props} />;
+        case 'fries':
+            return <Utensils {...props} />;
+        case 'football':
+            return <Trophy {...props} />;
+        default:
+            return <HelpCircle {...props} />;
+    }
+};
+const CustomNode: React.FC<RGNodeSlotProps> = ({ node }) => {
+    if (node.id === '2') { // rootNode
+        return (
+            // Here, `h-full` and `w-full` apply on the premise that `width` and `height` attributes have been set for the node data (or that the global `defaultNodeWidth` and `defaultNodeHeight` have been configured).
+            <div className="my-root z-[555] h-full w-full rounded-full relative text-lg flex place-items-center justify-center overflow-hidden">
+                <div className="py-2 w-full text-center text-white bg-gray-100 bg-opacity-40 border-t border-b border-gray-500">
+                    {node.text}
+                </div>
+            </div>
+        );
+    }
+    return ( // Normal Node
+        // Here, `h-full` and `w-full` apply on the premise that `width` and `height` attributes have been set for the node data (or that the global `defaultNodeWidth` and `defaultNodeHeight` have been configured).
+        <div className="h-full w-full rounded-full flex place-items-center justify-center shadow-md">
+            <IconSwitcher iconName={node.data?.myicon} size={30} />
+            <div
+                className="bg-gray-200 text-black px-2 rounded-lg absolute my-node-text"
+                style={{
+                    marginTop: '100%',
+                    transform: 'translateY(15px)'
+                }}
+            >
+                {node.text}
+            </div>
+        </div>
+    );
+};
+export default CustomNode;
+
+```
+
+#### Sample code effects
+![简单示例效果图](https://www.relation-graph.com/github-doc-images/relation-graph-simple.png)
+</details>
+
+---
+
+
+### Example Projects
+
+
+- The complete React sample project:
+- https://github.com/seeksdream/relation-graph-vue2-demo
+-
+- The complete Vue3 sample project:
+- https://github.com/seeksdream/relation-graph-react-demo
+
+- The complete Vue2 sample project:
+- https://github.com/seeksdream/relation-graph-vue3-demo
+
+- The complete Svelte sample project:
+- https://github.com/seeksdream/relation-graph-svelte-demo
+
+- The complete Web Components sample project:
+- https://github.com/seeksdream/relation-graph-webcomponents-demo
+
+
+### More Examples
+- [https://relation-graph.com/examples](https://relation-graph.com/examples)
+
+
+
+![relation-graph](https://www.relation-graph.com/github-doc-images/relation-graph-images-m.png)
+
+![center-层级距离设置](https://www.relation-graph.com/demo-images/distance_coefficient.gif)
+![力学布局(force)](https://www.relation-graph.com/demo-images/layout-force.gif)
+![节点展开/收缩的用法](https://www.relation-graph.com/demo-images/adv-expand.gif)
+![节点筛选 & 关系筛选](https://www.relation-graph.com/demo-images/adv-data-filter.gif)
+![节点/连线点击效果2](https://www.relation-graph.com/demo-images/adv-effect2.gif)
+![展开/收缩 时动画效果](https://www.relation-graph.com/demo-images/expand-animation.gif)
+![展开/关闭所有](https://www.relation-graph.com/demo-images/open-all-close-all.gif)
+![布局切换事件](https://www.relation-graph.com/demo-images/before-change-layout.gif)
+
+### The complete sample project
+
+- The complete Vue2 sample project：
+- [https://github.com/seeksdream/relation-graph-vue2-demo(Vite)](https://github.com/seeksdream/relation-graph-vue2-demo)
+- [https://github.com/seeksdream/relation-graph-vue2-demo(Webpack)](https://github.com/seeksdream/relation-graph-webpack)
+
+- The complete Vue3 sample project：
+- https://github.com/seeksdream/relation-graph-vue3-demo
+
+- The complete React sample project：
+- https://github.com/seeksdream/relation-graph-react-demo
+
+
+### More info
+
+- [https://relation-graph.com](https://relation-graph.com)
+
+
+### Contact me
+
+- My WhatsApp:
+
+  <img src="https://www.relation-graph.com/github-doc-images/Whatsapp.png" width="200" />
+
+- QQ：3235808353
+

package/package.json

@@ -1,11 +1,22 @@
 {
   "name": "@relation-graph/vue3",
-  "version": "3.0.8",
+  "version": "3.0.10",
   "description": "Vue relationship graph component for visualizing and editing knowledge graphs, org charts, and equity structures. Supports Vue 2 & Vue 3, force-directed layouts, tree layouts, and interactive graph editing.",
-  "main": "./relation-graph.umd.js",
+  "main": "./relation-graph.js",
   "module": "./relation-graph.mjs",
   "unpkg": "./relation-graph.umd.js",
   "types": "./types/packages/platforms/vue3/src/index.d.ts",
+  "style": "./style.css",
+  "exports": {
+    ".": {
+      "types": "./types/packages/platforms/vue3/src/index.d.ts",
+      "node": "./relation-graph.ssr.mjs",
+      "import": "./relation-graph.mjs",
+      "require": "./relation-graph.js",
+      "default": "./relation-graph.mjs"
+    },
+    "./style.css": "./style.css"
+  },
   "author": "WanLian <seeksdream@qq.com>",
   "license": "MIT",
   "private": false,
@@ -37,6 +48,9 @@
   "bugs": {
     "url": "https://github.com/seeksdream/relation-graph/issues"
   },
+  "sideEffects": [
+    "*.css"
+  ],
   "dependencies": {},
   "devDependencies": {
     "@types/node": "*",