@oneflowui/ui 0.1.0 → 0.2.1

package/README.en.md

@@ -0,0 +1,215 @@
+# OneFlow UI
+
+[![npm version](https://img.shields.io/npm/v/@oneflowui/ui.svg)](https://www.npmjs.com/package/@oneflowui/ui)
+[![npm downloads](https://img.shields.io/npm/dm/@oneflowui/ui.svg)](https://www.npmjs.com/package/@oneflowui/ui)
+[![license](https://img.shields.io/npm/l/@oneflowui/ui.svg)](https://github.com/qixi54/oneui/blob/main/LICENSE)
+
+A **Vue 3 + TypeScript** component library for building task management and productivity applications. Ships **75+ ready-to-use components** covering views, AI chat, dashboards, editors, and more.
+
+> [中文文档](./README.md)
+
+---
+
+## Components at a Glance
+
+| Category | Components |
+|----------|-----------|
+| **Views** | DataTable, KanbanBoard, GalleryView, GanttTimeline |
+| **AI Chat** | AiMessageList, AiMessageBubble, AiSender, AiThinking, AiStreamingCursor |
+| **Dashboard** | Dashboard, BarChart, PieChart, DoughnutChart, NumberCard |
+| **Editors** | RichTextEditor, CodeBlock, ContentBlock |
+| **Detail** | DetailLayout, PropPanel, CommentItem |
+| **Forms** | FormDesigner, 10 field components |
+| **Layout** | AppLayout, Sidebar, Navbar, SplitPane |
+| **General** | Modal, Dialog, Toast, Tabs, Breadcrumb, MermaidChart, ContextMenu |
+
+---
+
+## Preview
+
+<table>
+  <tr>
+    <td align="center"><b>Kanban Board</b></td>
+    <td align="center"><b>Data Table</b></td>
+  </tr>
+  <tr>
+    <td><img src="screenshots/kanban.png" alt="Kanban" /></td>
+    <td><img src="screenshots/table.png" alt="DataTable" /></td>
+  </tr>
+  <tr>
+    <td align="center"><b>Gantt Timeline</b></td>
+    <td align="center"><b>Dashboard</b></td>
+  </tr>
+  <tr>
+    <td><img src="screenshots/gantt.png" alt="Gantt" /></td>
+    <td><img src="screenshots/dashboard.png" alt="Dashboard" /></td>
+  </tr>
+  <tr>
+    <td align="center"><b>AI Chat</b></td>
+    <td align="center"><b>Detail Layout</b></td>
+  </tr>
+  <tr>
+    <td><img src="screenshots/ai.png" alt="AI Chat" /></td>
+    <td><img src="screenshots/detail.png" alt="Detail" /></td>
+  </tr>
+  <tr>
+    <td align="center"><b>Rich Text Editor</b></td>
+    <td align="center"><b>Mermaid Chart</b></td>
+  </tr>
+  <tr>
+    <td><img src="screenshots/editor.png" alt="Editor" /></td>
+    <td><img src="screenshots/mermaid.png" alt="Mermaid" /></td>
+  </tr>
+</table>
+
+---
+
+## Installation
+
+```bash
+# pnpm (recommended)
+pnpm add @oneflowui/ui
+
+# npm
+npm install @oneflowui/ui
+
+# yarn
+yarn add @oneflowui/ui
+```
+
+Install peer dependencies as needed:
+
+```bash
+pnpm add vue
+pnpm add mermaid   # required only when using MermaidChart
+```
+
+---
+
+## Quick Start
+
+### Register globally
+
+```ts
+import { createApp } from 'vue'
+import App from './App.vue'
+import OneflowUI from '@oneflowui/ui'
+import '@oneflowui/ui/styles'
+
+const app = createApp(App)
+app.use(OneflowUI)
+app.mount('#app')
+```
+
+### Import on demand
+
+```ts
+import { KanbanBoard, DataTable, AiMessageList, MermaidChart } from '@oneflowui/ui'
+import '@oneflowui/ui/styles'
+```
+
+---
+
+## Usage Examples
+
+### KanbanBoard
+
+```vue
+<KanbanBoard
+  :records="records"
+  kanban-field-id="stage"
+  :lane-order="['todo', 'doing', 'done']"
+  :lane-titles="{ todo: 'Todo', doing: 'In Progress', done: 'Done' }"
+/>
+```
+
+### AI Chat Panel
+
+```vue
+<script setup>
+import { AiMessageList, AiSender, useAiChat } from '@oneflowui/ui'
+
+const { messages, isThinking, send } = useAiChat({
+  onRequest: async (content) => {
+    // Connect your AI service here
+  }
+})
+</script>
+
+<template>
+  <AiMessageList :messages="messages" :is-thinking="isThinking" />
+  <AiSender @send="send" />
+</template>
+```
+
+### GanttTimeline
+
+```vue
+<GanttTimeline
+  :items="ganttItems"
+  start-date="2026-01-01"
+  end-date="2026-12-31"
+  @item-click="onItemClick"
+/>
+```
+
+### MermaidChart
+
+```vue
+<MermaidChart :code="`graph TD\n  A --> B\n  B --> C`" />
+```
+
+### DataTable
+
+```vue
+<DataTable
+  :columns="[
+    { key: 'title', label: 'Title', width: 'fill' },
+    { key: 'status', label: 'Status', width: 120 },
+    { key: 'priority', label: 'Priority', width: 100 },
+  ]"
+  :rows="tasks"
+  @row-click="onRowClick"
+/>
+```
+
+### Toast Notifications
+
+```ts
+import { useToast } from '@oneflowui/ui'
+
+const toast = useToast()
+toast.success('Saved successfully')
+toast.error('Operation failed')
+```
+
+---
+
+## Local Development
+
+```bash
+# Clone the repository
+git clone https://github.com/qixi54/oneui.git
+cd oneui
+
+# Install dependencies
+pnpm install
+
+# Start dev server (port 5174)
+pnpm dev
+
+# Type check
+pnpm type-check
+
+# Run tests
+pnpm test
+
+# Build
+pnpm build
+```
+
+---
+
+## License
+
+MIT

package/README.md

@@ -1,77 +1,122 @@
 # OneFlow UI
 
-OneFlow 设计系统组件库，基于 Vue 3 + TypeScript 构建。
+> [English README](./README.en.md)
+
+[![npm version](https://img.shields.io/npm/v/@oneflowui/ui.svg)](https://www.npmjs.com/package/@oneflowui/ui)
+[![npm downloads](https://img.shields.io/npm/dm/@oneflowui/ui.svg)](https://www.npmjs.com/package/@oneflowui/ui)
+[![license](https://img.shields.io/npm/l/@oneflowui/ui.svg)](https://github.com/qixi54/oneui/blob/main/LICENSE)
+
+Vue 3 + TypeScript 任务管理视图组件库，75 个组件开箱即用。
+
+**包含**：Table、Kanban、Gantt 甘特图、Gallery、AI Chat、Dashboard 图表、Rich Text Editor、Form Designer、MermaidChart、Toast 等。
+
+---
+
+## 预览
+
+<table>
+  <tr>
+    <td align="center"><b>Kanban 看板</b></td>
+    <td align="center"><b>DataTable 数据表格</b></td>
+  </tr>
+  <tr>
+    <td><img src="screenshots/kanban.png" alt="Kanban" /></td>
+    <td><img src="screenshots/table.png" alt="DataTable" /></td>
+  </tr>
+  <tr>
+    <td align="center"><b>Gantt 甘特图</b></td>
+    <td align="center"><b>Dashboard 仪表盘</b></td>
+  </tr>
+  <tr>
+    <td><img src="screenshots/gantt.png" alt="Gantt" /></td>
+    <td><img src="screenshots/dashboard.png" alt="Dashboard" /></td>
+  </tr>
+  <tr>
+    <td align="center"><b>AI Chat 对话组件</b></td>
+    <td align="center"><b>DetailLayout 详情页</b></td>
+  </tr>
+  <tr>
+    <td><img src="screenshots/ai.png" alt="AI Chat" /></td>
+    <td><img src="screenshots/detail.png" alt="Detail" /></td>
+  </tr>
+  <tr>
+    <td align="center"><b>RichTextEditor 富文本</b></td>
+    <td align="center"><b>MermaidChart 图表</b></td>
+  </tr>
+  <tr>
+    <td><img src="screenshots/editor.png" alt="Editor" /></td>
+    <td><img src="screenshots/mermaid.png" alt="Mermaid" /></td>
+  </tr>
+</table>
+
+---
 
 ## 安装
 
 ```bash
 # pnpm（推荐）
-pnpm add oneflow-ui
+pnpm add @oneflowui/ui
 
 # npm
-npm install oneflow-ui
+npm install @oneflowui/ui
 
 # yarn
-yarn add oneflow-ui
+yarn add @oneflowui/ui
 ```
 
-## 开发与测试
+安装 peer dependencies（按需）：
 
 ```bash
-# 启动开发环境（固定端口 5174）
-npm run dev
+pnpm add vue
+pnpm add mermaid   # 使用 MermaidChart 时需要
+```
 
-# 类型检查
-npm run type-check
+---
 
-# 集成测试
-npm run test
-```
+## 快速开始
 
-## 全局注册
+### 全局注册
 
 ```ts
 import { createApp } from 'vue'
 import App from './App.vue'
-import OneflowUI from 'oneflow-ui'
-import 'oneflow-ui/styles'
+import OneflowUI from '@oneflowui/ui'
+import '@oneflowui/ui/styles'
 
 const app = createApp(App)
 app.use(OneflowUI)
 app.mount('#app')
 ```
 
-## 按需引入
+### 按需引入
 
 ```ts
-import { DetailLayout, PropPanel, DataTable } from 'oneflow-ui'
-import 'oneflow-ui/styles'
+import { KanbanBoard, DataTable, AiMessageList, MermaidChart } from '@oneflowui/ui'
+import '@oneflowui/ui/styles'
 ```
 
-## 样式引入
+---
 
-```ts
-// 在入口文件引入 CSS 变量和基础样式
-import 'oneflow-ui/styles'
-```
+## 组件一览
+
+| 分类 | 组件 |
+|------|------|
+| **视图** | DataTable, KanbanBoard, GalleryView, GanttTimeline |
+| **AI 对话** | AiMessageList, AiMessageBubble, AiSender, AiThinking, AiStreamingCursor |
+| **仪表盘** | Dashboard, BarChart, PieChart, DoughnutChart, NumberCard |
+| **编辑器** | RichTextEditor, CodeBlock, ContentBlock |
+| **详情** | DetailLayout, PropPanel, CommentItem |
+| **表单** | FormDesigner, 10 种 Field 组件 |
+| **布局** | AppLayout, Sidebar, Navbar, SplitPane |
+| **通用** | Modal, Dialog, Toast, Tabs, Breadcrumb, MermaidChart, ContextMenu |
 
 ---
 
-## 组件示例
+## 使用示例
 
 ### KanbanBoard
 
 ```vue
-<KanbanBoard
-  :columns="[
-    { id: 'todo', title: '待处理', color: '#64748B', tasks: [] },
-    { id: 'in_progress', title: '进行中', color: '#2563EB', tasks: [] },
-  ]"
-  @task-click="onTaskClick"
-  @add-task="onAddTask"
-/>
-
-<!-- 或者使用 DataRecord 配置泳道字段 -->
 <KanbanBoard
   :records="records"
   kanban-field-id="stage"
@@ -80,6 +125,43 @@ import 'oneflow-ui/styles'
 />
 ```
 
+### AI 聊天面板
+
+```vue
+<script setup>
+import { AiMessageList, AiSender } from '@oneflowui/ui'
+import { useAiChat } from '@oneflowui/ui'
+
+const { messages, isThinking, send } = useAiChat({
+  onRequest: async (content) => {
+    // 接入你的 AI 服务
+  }
+})
+</script>
+
+<template>
+  <AiMessageList :messages="messages" :is-thinking="isThinking" />
+  <AiSender @send="send" />
+</template>
+```
+
+### GanttTimeline
+
+```vue
+<GanttTimeline
+  :items="ganttItems"
+  start-date="2026-01-01"
+  end-date="2026-12-31"
+  @item-click="onItemClick"
+/>
+```
+
+### MermaidChart
+
+```vue
+<MermaidChart :code="`graph TD\n  A --> B\n  B --> C`" />
+```
+
 ### DataTable
 
 ```vue
@@ -94,68 +176,43 @@ import 'oneflow-ui/styles'
 />
 ```
 
-### GalleryView
+### Toast 通知
 
-```vue
-<GalleryView
-  :items="galleryItems"
-  @card-click="onCardClick"
-/>
+```ts
+import { useToast } from '@oneflowui/ui'
 
-<!-- 或者使用 DataRecord 配置封面字段 -->
-<GalleryView
-  :records="records"
-  cover-field-id="coverUrl"
-  :card-field-ids="['assignee', 'priority']"
-/>
+const toast = useToast()
+toast.success('保存成功')
+toast.error('操作失败')
 ```
 
-### GanttTimeline
+---
 
-```vue
-<GanttTimeline
-  :items="ganttItems"
-  :start-date="'2026-01-01'"
-  :end-date="'2026-12-31'"
-  @item-click="onItemClick"
-/>
-```
+## 本地开发
 
-### DetailLayout
+```bash
+# 克隆仓库
+git clone https://github.com/qixi54/oneui.git
+cd oneui
 
-```vue
-<DetailLayout
-  :task="currentTask"
-  v-model:description-content="detailDescription"
-  :description-editable="true"
-  :comments="comments"
-  :prop-items="[
-    { key: '状态', value: '进行中' },
-    { key: '优先级', value: 'P1' },
-    { key: '负责人', value: '张三' },
-    { key: '截止日期', value: '2026-06-30' },
-  ]"
-/>
-```
+# 安装依赖
+pnpm install
 
-### CodeBlock
+# 启动开发环境（端口 5174）
+pnpm dev
 
-```vue
-<CodeBlock
-  language="typescript"
-  :code="sourceCode"
-/>
+# 类型检查
+pnpm type-check
+
+# 运行测试
+pnpm test
+
+# 构建
+pnpm build
 ```
 
 ---
 
-## 集成测试覆盖（Task 2.4）
-
-- 三层数据模型：`TableSchema + DataRecord + ViewConfig` 联动可用
-- Table + Detail：表格点击事件与详情渲染链路可用
-- Dashboard 甘特图：空态/有数据态渲染与点击事件可用
+## License
 
-对应测试文件：
-- `src/tests/three-layer-model.integration.spec.ts`
-- `src/tests/table-detail.integration.spec.ts`
-- `src/tests/gantt.integration.spec.ts`
+MIT

package/dist/{FieldCheckbox-B1eVag_x.js → FieldCheckbox-DPylU5RA.js}

@@ -1,5 +1,5 @@
 import { defineComponent as s, computed as f, openBlock as p, createElementBlock as r, withModifiers as d, createElementVNode as m, toDisplayString as _ } from "vue";
-import { _ as u } from "./index-B9LF7Kv4.js";
+import { _ as u } from "./index-CTlM81Ib.js";
 const k = { class: "of-field-checkbox__icon" }, x = /* @__PURE__ */ s({
   __name: "FieldCheckbox",
   props: {

package/dist/{FieldDate-BCitHPQn.js → FieldDate-BWtlvi5Y.js}

@@ -1,5 +1,5 @@
 import { defineComponent as f, ref as u, onMounted as m, nextTick as s, withDirectives as d, openBlock as v, createElementBlock as y, vModelText as _ } from "vue";
-import { _ as k } from "./index-B9LF7Kv4.js";
+import { _ as k } from "./index-CTlM81Ib.js";
 const x = /* @__PURE__ */ f({
   __name: "FieldDate",
   props: {

package/dist/{FieldDatetime-BGeyZJl-.js → FieldDatetime-BXghiCm8.js}

@@ -1,5 +1,5 @@
 import { defineComponent as f, ref as i, onMounted as p, nextTick as s, withDirectives as d, openBlock as v, createElementBlock as y, vModelText as _ } from "vue";
-import { _ as k } from "./index-B9LF7Kv4.js";
+import { _ as k } from "./index-CTlM81Ib.js";
 const x = /* @__PURE__ */ f({
   __name: "FieldDatetime",
   props: {

package/dist/{FieldEmail-Ds8lTvNh.js → FieldEmail-D-hUADX4.js}

@@ -1,5 +1,5 @@
 import { defineComponent as f, ref as a, onMounted as p, nextTick as s, withDirectives as d, openBlock as v, createElementBlock as y, vModelText as _ } from "vue";
-import { _ as k } from "./index-B9LF7Kv4.js";
+import { _ as k } from "./index-CTlM81Ib.js";
 const x = /* @__PURE__ */ f({
   __name: "FieldEmail",
   props: {

package/dist/{FieldMultiSelect-_cY4aZuE.js → FieldMultiSelect-Di0wE1Ns.js}

@@ -1,5 +1,5 @@
 import { defineComponent as $, ref as a, computed as M, onMounted as z, nextTick as F, onBeforeUnmount as O, watch as T, openBlock as l, createElementBlock as i, Fragment as A, renderList as L, normalizeStyle as w, toDisplayString as k, createBlock as I, Teleport as P, withModifiers as m, normalizeClass as U, createElementVNode as p, createCommentVNode as V } from "vue";
-import { _ as K } from "./index-B9LF7Kv4.js";
+import { _ as K } from "./index-CTlM81Ib.js";
 const W = {
   key: 0,
   class: "of-field-multiselect__chips"
@@ -139,7 +139,7 @@ const W = {
       ]))
     ], 544));
   }
-}), Z = /* @__PURE__ */ K(Q, [["__scopeId", "data-v-8e54ce8e"]]);
+}), Z = /* @__PURE__ */ K(Q, [["__scopeId", "data-v-08942f77"]]);
 export {
   Z as default
 };

package/dist/{FieldNumber-DayaF31C.js → FieldNumber-BbcbizO4.js}

@@ -1,5 +1,5 @@
 import { defineComponent as p, ref as m, onMounted as v, nextTick as d, withDirectives as N, openBlock as b, createElementBlock as y, vModelText as k } from "vue";
-import { _ } from "./index-B9LF7Kv4.js";
+import { _ } from "./index-CTlM81Ib.js";
 const x = /* @__PURE__ */ p({
   __name: "FieldNumber",
   props: {

package/dist/{FieldRating-Dw9rvhUe.js → FieldRating-KKEc2khS.js}

@@ -1,5 +1,5 @@
-import { defineComponent as v, ref as _, openBlock as o, createElementBlock as r, withKeys as x, Fragment as g, renderList as b, unref as c, withModifiers as k, normalizeClass as y } from "vue";
-import { _ as C } from "./index-B9LF7Kv4.js";
+import { defineComponent as v, ref as _, openBlock as o, createElementBlock as r, withKeys as x, Fragment as g, renderList as k, unref as c, withModifiers as y, normalizeClass as b } from "vue";
+import { _ as C } from "./index-CTlM81Ib.js";
 const M = ["onMouseenter", "onClick"], $ = /* @__PURE__ */ v({
   __name: "FieldRating",
   props: {
@@ -17,16 +17,16 @@ const M = ["onMouseenter", "onClick"], $ = /* @__PURE__ */ v({
       onKeydown: t[1] || (t[1] = x((e) => a("cancel"), ["escape"])),
       tabindex: "0"
     }, [
-      (o(!0), r(g, null, b(c(d), (e) => (o(), r("span", {
+      (o(!0), r(g, null, k(c(d), (e) => (o(), r("span", {
         key: e,
-        class: y(["of-field-rating__star", { filled: e <= (n.value || c(f)) }]),
+        class: b(["of-field-rating__star", { filled: e <= (n.value || c(f)) }]),
         onMouseenter: (l) => n.value = e,
         onMouseleave: t[0] || (t[0] = (l) => n.value = 0),
-        onClick: k((l) => p(e), ["stop"])
+        onClick: y((l) => p(e), ["stop"])
       }, "★", 42, M))), 128))
     ], 32));
   }
-}), F = /* @__PURE__ */ C($, [["__scopeId", "data-v-80c63bd9"]]);
+}), F = /* @__PURE__ */ C($, [["__scopeId", "data-v-ced77f03"]]);
 export {
   F as default
 };

package/dist/{FieldSelect-DEVkjnNY.js → FieldSelect-D2qtt-0u.js}

@@ -1,5 +1,5 @@
 import { defineComponent as N, ref as f, computed as x, onMounted as R, nextTick as V, onBeforeUnmount as z, watch as A, openBlock as l, createElementBlock as a, normalizeStyle as b, toDisplayString as w, createBlock as I, Teleport as F, createElementVNode as T, withModifiers as C, normalizeClass as L, Fragment as O, renderList as P, createCommentVNode as U } from "vue";
-import { _ as K } from "./index-B9LF7Kv4.js";
+import { _ as K } from "./index-CTlM81Ib.js";
 const W = {
   key: 1,
   class: "of-field-select__display"
@@ -116,7 +116,7 @@ const W = {
       ], 544);
     };
   }
-}), Q = /* @__PURE__ */ K(G, [["__scopeId", "data-v-7a426fe0"]]);
+}), Q = /* @__PURE__ */ K(G, [["__scopeId", "data-v-fc270aec"]]);
 export {
   Q as default
 };

package/dist/{FieldText-LzCqM7jk.js → FieldText-DYbDp4aP.js}

@@ -1,5 +1,5 @@
 import { defineComponent as f, ref as a, onMounted as m, nextTick as s, withDirectives as v, openBlock as d, createElementBlock as x, vModelText as y } from "vue";
-import { _ } from "./index-B9LF7Kv4.js";
+import { _ } from "./index-CTlM81Ib.js";
 const k = /* @__PURE__ */ f({
   __name: "FieldText",
   props: {

package/dist/{FieldUrl-zqYEJCPK.js → FieldUrl-BoOM8A5O.js}

@@ -1,5 +1,5 @@
 import { defineComponent as f, ref as a, onMounted as m, nextTick as s, withDirectives as v, openBlock as d, createElementBlock as y, vModelText as _ } from "vue";
-import { _ as k } from "./index-B9LF7Kv4.js";
+import { _ as k } from "./index-CTlM81Ib.js";
 const x = /* @__PURE__ */ f({
   __name: "FieldUrl",
   props: {

package/dist/components/base/Accordion.vue.d.ts

@@ -0,0 +1,51 @@
+export interface AccordionItem {
+    key: string;
+    title: string;
+    subtitle?: string;
+    disabled?: boolean;
+}
+export interface AccordionProps {
+    items: AccordionItem[];
+    modelValue?: string | string[];
+    multiple?: boolean;
+    lazy?: boolean;
+}
+declare function __VLS_template(): {
+    attrs: Partial<{}>;
+    slots: Readonly<{
+        default?: (props: {
+            item: AccordionItem;
+        }) => unknown;
+        trigger?: (props: {
+            item: AccordionItem;
+            open: boolean;
+        }) => unknown;
+    }> & {
+        default?: (props: {
+            item: AccordionItem;
+        }) => unknown;
+        trigger?: (props: {
+            item: AccordionItem;
+            open: boolean;
+        }) => unknown;
+    };
+    refs: {};
+    rootEl: HTMLDivElement;
+};
+type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
+declare const __VLS_component: import('vue').DefineComponent<AccordionProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    "update:modelValue": (value: string | string[]) => any;
+}, string, import('vue').PublicProps, Readonly<AccordionProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: string | string[]) => any) | undefined;
+}>, {
+    modelValue: string | string[];
+    multiple: boolean;
+    lazy: boolean;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, HTMLDivElement>;
+declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
+export default _default;
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};