open-index/open-npm huggingface dataset:
npm package: @huanban/editor-ui
Description: RuleGo 编辑器 UI Kit - 纯 DOM 组件 (零框架依赖)
Author: HuanBan Team
Latest version: 0.5.0

# @huanban/editor-ui

> RuleGo 编辑器 UI Kit — 纯 DOM 组件集 (零框架依赖)

[![npm version](https://img.shields.io/npm/v/@huanban/editor-ui.svg)](https://www.npmjs.com/package/@huanban/editor-ui)
[![license](https://img.shields.io/npm/l/@huanban/editor-ui.svg)](https://github.com/openclaw/rulego-editor/blob/main/LICENSE)

## ✨ 特性

- **零框架依赖** — 纯原生 DOM 操作，可用于任何前端框架
- **组件丰富** — 提供 Sidebar、Toolbar、PropertyPanel、ContextMenu 四大组件
- **自动绑定** — 组件自动连接 EditorCore 实例，响应状态变化
- **样式内聚** — 每个组件自带完整样式，即插即用

## 📦 安装

```bash
npm install @huanban/editor-ui @huanban/editor-core
```

## 🚀 快速开始

```typescript
import { EditorCore } from '@huanban/editor-core'
import { Sidebar, Toolbar, PropertyPanel, ContextMenu } from '@huanban/editor-ui'

const core = new EditorCore({ container: document.getElementById('editor')! })

// 挂载侧边栏 (组件分类拖拽面板)
new Sidebar(document.getElementById('sidebar')!, { core })

// 挂载工具栏 (撤销/重做/保存/缩放)
new Toolbar(document.getElementById('toolbar')!, { core })

// 挂载属性面板 (节点配置编辑)
new PropertyPanel(document.getElementById('panel')!, { core })
```

## 📖 组件说明

| 组件 | 说明 |
|------|------|
| `Sidebar` | 左侧组件分类面板，支持拖拽添加节点 |
| `Toolbar` | 顶部工具栏，内置撤销/重做/保存/缩放/删除 |
| `PropertyPanel` | 右侧属性面板，动态渲染节点配置表单 |
| `ContextMenu` | 右键上下文菜单 |

## 🔗 相关包

- [`@huanban/editor-core`](https://www.npmjs.com/package/@huanban/editor-core) — 核心引擎 (必需)
- [`@huanban/editor-react`](https://www.npmjs.com/package/@huanban/editor-react) — React 适配层
- [`@huanban/editor-vue`](https://www.npmjs.com/package/@huanban/editor-vue) — Vue 3 适配层

## 📄 协议

Apache-2.0
npm package: @huanban/editor-vue
Description: RuleGo 编辑器 Vue 3 适配层 - 提供 Vue 组件和 Composables
Author: HuanBan Team
Latest version: 0.5.0

# @huanban/editor-vue

> RuleGo 编辑器 Vue 3 适配层 — 提供 Vue 组件和 Composables

[![npm version](https://img.shields.io/npm/v/@huanban/editor-vue.svg)](https://www.npmjs.com/package/@huanban/editor-vue)
[![license](https://img.shields.io/npm/l/@huanban/editor-vue.svg)](https://github.com/openclaw/rulego-editor/blob/main/LICENSE)

## ✨ 特性

- **开箱即用** — 提供 `<RuleGoEditor />` 组件，一行代码嵌入编辑器
- **Vue 3 Composables** — `useEditorCore`、`useEditorTheme`、`useEditorI18n`
- **事件监听** — 支持 `@save`、`@node-click`、`@ready` 等 Vue 事件
- **插槽系统** — 通过 `#sidebar`、`#toolbar`、`#panel` 插槽自定义 UI
- **响应式状态** — 所有状态自动转为 Vue `ref`，模板中直接使用
- **TypeScript** — 完整类型定义
- **兼容 Vue 3.2+** — 支持 Composition API

## 📦 安装

```bash
npm install @huanban/editor-vue @huanban/editor-core

# 可选：安装内置 UI 组件
npm install @huanban/editor-ui
```

## 🚀 快速开始

### 方式一：使用 `<RuleGoEditor />` 组件

```vue
<template>
  <RuleGoEditor
    height="600px"
    :data="ruleChainData"
    @save="onSave"
    @node-click="onNodeClick"
  />
</template>

<script setup lang="ts">
import { RuleGoEditor } from '@huanban/editor-vue'

const ruleChainData = ref(null)

const onSave = (data) => console.log('保存:', data)
const onNodeClick = (node) => console.log('点击节点:', node)
</script>
```

### 方式二：使用 `useEditorCore` Composable

```vue
<template>
  <div ref="editorRef" style="height: 100%"></div>
</template>

<script setup lang="ts">
import { useEditorCore } from '@huanban/editor-vue'

const { core, isReady, loadData, save } = useEditorCore()

watch(isReady, (ready) => {
  if (ready) {
    loadData(myRuleChainData)
  }
})
</script>
```

## 📖 API

### `<RuleGoEditor />` Props

| 属性 | 类型 | 说明 |
|------|------|------|
| `data` | `RuleChainData` | 规则链数据 |
| `options` | `EditorOptions` | 编辑器配置选项 |
| `height` | `string` | 编辑器高度 (默认 `100%`) |
| `width` | `string` | 编辑器宽度 (默认 `100%`) |
| `builtinUi` | `boolean` | 是否使用内置 UI (默认 `true`) |

### 事件

| 事件 | 参数 | 说明 |
|------|------|------|
| `@save` | `SaveEventData` | 保存时触发 |
| `@node-click` | `NodeData` | 节点点击时触发 |
| `@ready` | — | 编辑器就绪时触发 |

### 插槽

| 插槽 | 参数 | 说明 |
|------|------|------|
| `#sidebar` | `{ groups, core }` | 自定义侧边栏 |
| `#toolbar` | `{ canUndo, canRedo, core }` | 自定义工具栏 |
| `#panel` | `{ nodeView, nodeModel, core }` | 自定义属性面板 |

### `useEditorCore(options?)` 返回值

| 属性 | 类型 | 说明 |
|------|------|------|
| `core` | `EditorCore` | 编辑器核心实例 |
| `isReady` | `Ref<boolean>` | 编辑器是否就绪 |
| `isDirty` | `Ref<boolean>` | 数据是否已修改 |
| `loadData` | `(data) => void` | 加载规则链数据 |
| `save` | `() => void` | 触发保存 |
| `on` | `(event, handler) => void` | 监听事件 |

## 🔗 相关包

- [`@huanban/editor-core`](https://www.npmjs.com/package/@huanban/editor-core) — 核心引擎 (必需)
- [`@huanban/editor-ui`](https://www.npmjs.com/package/@huanban/editor-ui) — UI 组件集 (可选)
- [`@huanban/editor-react`](https://www.npmjs.com/package/@huanban/editor-react) — React 适配层

## 📄 协议

Apache-2.0
npm package: @huanban/rulego-editor-ui
Description: RuleGo 编辑器 UI Kit - 纯 DOM 组件 (零框架依赖)
Author: HuanBan Team
Latest version: 1.1.0

# @huanban/rulego-editor-ui

> RuleGo 编辑器 UI Kit — 纯 DOM 组件集 (零框架依赖)

[![npm version](https://img.shields.io/npm/v/@huanban/rulego-editor-ui.svg)](https://www.npmjs.com/package/@huanban/rulego-editor-ui)
[![license](https://img.shields.io/npm/l/@huanban/rulego-editor-ui.svg)](https://github.com/openclaw/rulego-editor/blob/main/LICENSE)

## ✨ 特性

- **零框架依赖** — 纯原生 DOM 操作，可用于任何前端框架
- **组件丰富** — 提供 Sidebar、Toolbar、PropertyPanel、ContextMenu 四大组件
- **自动绑定** — 组件自动连接 EditorCore 实例，响应状态变化
- **样式内聚** — 每个组件自带完整样式，即插即用

## 📦 安装

```bash
npm install @huanban/rulego-editor-ui @huanban/rulego-editor-core
```

## 🚀 快速开始

```typescript
import { EditorCore } from '@huanban/rulego-editor-core'
import { Sidebar, Toolbar, PropertyPanel, ContextMenu } from '@huanban/rulego-editor-ui'

const core = new EditorCore({ container: document.getElementById('editor')! })

// 挂载侧边栏 (组件分类拖拽面板)
new Sidebar(document.getElementById('sidebar')!, { core })

// 挂载工具栏 (撤销/重做/保存/缩放)
new Toolbar(document.getElementById('toolbar')!, { core })

// 挂载属性面板 (节点配置编辑)
new PropertyPanel(document.getElementById('panel')!, { core })
```

## 📖 组件说明

| 组件 | 说明 |
|------|------|
| `Sidebar` | 左侧组件分类面板，支持拖拽添加节点 |
| `Toolbar` | 顶部工具栏，内置撤销/重做/保存/缩放/删除 |
| `PropertyPanel` | 右侧属性面板，动态渲染节点配置表单 |
| `ContextMenu` | 右键上下文菜单 |

## 🔗 相关包

- [`@huanban/rulego-editor-core`](https://www.npmjs.com/package/@huanban/rulego-editor-core) — 核心引擎 (必需)
- [`@huanban/rulego-editor-react`](https://www.npmjs.com/package/@huanban/rulego-editor-react) — React 适配层
- [`@huanban/rulego-editor-vue`](https://www.npmjs.com/package/@huanban/rulego-editor-vue) — Vue 3 适配层

## 📄 协议

Apache-2.0
npm package: @huanban/rulego-editor-vue
Description: RuleGo 编辑器 Vue 3 适配层 - 提供 Vue 组件和 Composables
Author: HuanBan Team
Latest version: 1.1.0

# @huanban/rulego-editor-vue

> RuleGo 编辑器 Vue 3 适配层 — 提供 Vue 组件和 Composables

[![npm version](https://img.shields.io/npm/v/@huanban/rulego-editor-vue.svg)](https://www.npmjs.com/package/@huanban/rulego-editor-vue)
[![license](https://img.shields.io/npm/l/@huanban/rulego-editor-vue.svg)](https://github.com/openclaw/rulego-editor/blob/main/LICENSE)

## ✨ 特性

- **开箱即用** — 提供 `<RuleGoEditor />` 组件，一行代码嵌入编辑器
- **Vue 3 Composables** — `useEditorCore`、`useEditorTheme`、`useEditorI18n`
- **事件监听** — 支持 `@save`、`@node-click`、`@ready` 等 Vue 事件
- **插槽系统** — 通过 `#sidebar`、`#toolbar`、`#panel` 插槽自定义 UI
- **响应式状态** — 所有状态自动转为 Vue `ref`，模板中直接使用
- **TypeScript** — 完整类型定义
- **兼容 Vue 3.2+** — 支持 Composition API

## 📦 安装

```bash
npm install @huanban/rulego-editor-vue @huanban/rulego-editor-core

# 可选：安装内置 UI 组件
npm install @huanban/rulego-editor-ui
```

## 🚀 快速开始

### 方式一：使用 `<RuleGoEditor />` 组件

```vue
<template>
  <RuleGoEditor
    height="600px"
    :data="ruleChainData"
    @save="onSave"
    @node-click="onNodeClick"
  />
</template>

<script setup lang="ts">
import { RuleGoEditor } from '@huanban/rulego-editor-vue'

const ruleChainData = ref(null)

const onSave = (data) => console.log('保存:', data)
const onNodeClick = (node) => console.log('点击节点:', node)
</script>
```

### 方式二：使用 `useEditorCore` Composable

```vue
<template>
  <div ref="editorRef" style="height: 100%"></div>
</template>

<script setup lang="ts">
import { useEditorCore } from '@huanban/rulego-editor-vue'

const { core, isReady, loadData, save } = useEditorCore()

watch(isReady, (ready) => {
  if (ready) {
    loadData(myRuleChainData)
  }
})
</script>
```

## 📖 API

### `<RuleGoEditor />` Props

| 属性 | 类型 | 说明 |
|------|------|------|
| `data` | `RuleChainData` | 规则链数据 |
| `options` | `EditorOptions` | 编辑器配置选项 |
| `height` | `string` | 编辑器高度 (默认 `100%`) |
| `width` | `string` | 编辑器宽度 (默认 `100%`) |
| `builtinUi` | `boolean` | 是否使用内置 UI (默认 `true`) |

### 事件

| 事件 | 参数 | 说明 |
|------|------|------|
| `@save` | `SaveEventData` | 保存时触发 |
| `@node-click` | `NodeData` | 节点点击时触发 |
| `@ready` | — | 编辑器就绪时触发 |

### 插槽

| 插槽 | 参数 | 说明 |
|------|------|------|
| `#sidebar` | `{ groups, core }` | 自定义侧边栏 |
| `#toolbar` | `{ canUndo, canRedo, core }` | 自定义工具栏 |
| `#panel` | `{ nodeView, nodeModel, core }` | 自定义属性面板 |

### `useEditorCore(options?)` 返回值

| 属性 | 类型 | 说明 |
|------|------|------|
| `core` | `EditorCore` | 编辑器核心实例 |
| `isReady` | `Ref<boolean>` | 编辑器是否就绪 |
| `isDirty` | `Ref<boolean>` | 数据是否已修改 |
| `loadData` | `(data) => void` | 加载规则链数据 |
| `save` | `() => void` | 触发保存 |
| `on` | `(event, handler) => void` | 监听事件 |

## 🔗 相关包

- [`@huanban/rulego-editor-core`](https://www.npmjs.com/package/@huanban/rulego-editor-core) — 核心引擎 (必需)
- [`@huanban/rulego-editor-ui`](https://www.npmjs.com/package/@huanban/rulego-editor-ui) — UI 组件集 (可选)
- [`@huanban/rulego-editor-react`](https://www.npmjs.com/package/@huanban/rulego-editor-react) — React 适配层

## 📄 协议

Apache-2.0