@tongfun/ui (Kunpeng UI)

An enterprise-class Vue 3 component library designed for the Tongfun ERP and Kunpeng platform applications.

✨ Features

• 80+ High-Quality Components: Comprehensive set of components out of the box.
• Vue 3 & TypeScript: Built with the Composition API and fully typed.
• Tailwind CSS 4: Utilizes Tailwind for tokens, base, and utility styles, ensuring highly customizable designs.
• Theming: Native support for light, dark, and system theme modes.
• i18n: Built-in internationalization support (zh-CN and en-US).
• Low-Code Friendly: Includes Schema and Page Renderer exports for low-code rendering engines.

📦 Install

pnpm add @tongfun/ui

Peer Dependencies

Your application should have Vue and Vue I18n installed:

pnpm add vue vue-i18n

🚀 Quick Start

1. Import Styles

Import the compiled stylesheet once in your application entry (e.g., main.ts):

import "@tongfun/ui/styles.css";

2. Plugin Installation

Use the plugin to register components globally and configure the locale/theme:

import { createApp } from "vue";
import App from "./App.vue";
import KunpengUI from "@tongfun/ui";
import "@tongfun/ui/styles.css";

const app = createApp(App);

app.use(KunpengUI, {
  locale: "zh-CN",
  theme: {
    mode: "light",
    theme: "kunpeng-blue", // kunpeng-blue | emerald | amber
  },
});

app.mount("#app");

3. Usage (Named Imports)

You can also import components individually:

import { KpButton, KpInput, KpTable } from "@tongfun/ui";

🎨 Theming System

The UI library manages themes by injecting state into the document.documentElement:

• class="dark" is added when dark mode is active.
• data-kp-theme="..." is added for the active brand theme.

🧩 Available Components

Accordion, Alert, AlertDialog, AspectRatio, Avatar, Badge, BasicData, Breadcrumb, Button, ButtonGroup, Calendar, Card, Checkbox, Collapsible, Combobox, Command, ConfigProvider, ContextMenu, DatePicker, DateRangePicker, DateTimePicker, DateTimeRangePicker, DecimalField, DescriptionList, Dialog, Drawer, DropdownMenu, Empty, Field, Form, FormItem, FormRenderer, Grid, HoverCard, ImagePreview, Input, InputGroup, InputOtp, IntegerField, Item, Kbd, Label, Layout, Loading, Menubar, Message, MonthPicker, NavigationMenu, Notification, NumberField, PageContainer, PageRenderer, Pagination, Popover, Progress, RadioGroup, Resizable, Result, ScrollArea, Section, Select, Separator, Sheet, Skeleton, Slider, Space, Spinner, Steps, Switch, Table, Tabs, Textarea, TimePicker, TimeRangePicker, Toast, Toggle, ToggleGroup, Tooltip, Upload, WeekPicker, YearPicker.

🛠️ Component Directory Convention

For contributors, each component must adhere to the following structure:

• Component.vue: The main Vue template and logic.
• index.ts: Component export.
• props.ts: TypeScript interfaces and prop definitions.
• variants.ts: Style variants (often using cva or similar utilities).

When adding or changing component props, also update src/agent-schema/components.ts. The final AgentComponentSchema.props must match the component props.ts interface, including enum metadata for low-code editors. Run pnpm --filter @tongfun/ui check:agent-schema before submitting changes.

👨‍💻 Development

Inside the ui workspace:

pnpm typecheck   # Type checking
pnpm build       # Build library
pnpm dev         # Watch mode