# ZUI

> Vue 3.5 组件库，基于 shadcn-vue (reka-ui) + Tailwind CSS v4
> 42 组件 + 7 函数式 API · 声明式与命令式双轨制

## 安装

```bash
npm install z_vue3
```

## 快速上手

```ts
// main.ts
import { createApp } from 'vue'
import App from './App.vue'
import 'z_vue3/style.css'
import { toast, dialog } from 'z_vue3'

const app = createApp(App)
app.mount('#app')

// 函数式 API — 零模板污染
toast.success('操作成功')
dialog.confirm({ title: '确认删除？', content: '此操作不可撤销' })
```

```vue
<!-- 声明式组件 -->
<template>
  <ZButton variant="destructive" @click="handleDelete">删除</ZButton>
  <ZTable :dataSource="users" :columns="columns" :pagination="{ pageSize: 20 }" />
  <ZPopConfirm title="确认删除？" @confirm="handleDelete">
    <ZButton variant="ghost">删除</ZButton>
  </ZPopConfirm>
</template>
```

## 组件一览

| 类别 | 组件 |
|------|------|
| **基础** | ZButton, ZIcon, ZTag, ZText, ZDivider, ZSwitch, ZCheckbox, ZSpin, ZEmpty |
| **数据录入** | ZInput, ZSelect, ZRadioGroup, ZRadioGroupButton, ZRange, ZForm, ZDatePicker, ZUpload |
| **数据展示** | ZTable, ZCard, ZList, ZPagination, ZCarousel, ZDateHeatmap |
| **导航** | ZMenu, ZMenuSwitch, ZHoverMenu, ZCascadeMenu, ZBreadcrumb |
| **反馈** | ZTooltip, ZPopover, ZPopConfirm, ZDropdown, ZTabs, ZScroll |
| **交互** | ZMoveDom, ZSetSize, ZTask |
| **布局引擎** | ZTree, ZVirtualList, ZWaterfallFlow, ZRowFlow, ZHorizontalFlow, ZFullImageWall |

## 函数式 API

```ts
import { toast, dialog, drawer, rightMenu, notification, ZPopUtils, zContentMenuUtils } from 'z_vue3'

// Toast
toast.success('操作成功')
toast.error('操作失败')
toast.promise(fetch('/api/save'), { loading: '保存中...', success: '已保存', error: '保存失败' })

// Dialog
const confirmed = await dialog.confirm({ title: '确认删除？', content: '此操作不可撤销' })
dialog.alert({ title: '提示', content: '操作已完成' })

// Drawer
drawer.open({ title: '详情', content: '<p>自定义内容</p>' })

// Notification
notification.show({ title: '更新', description: '新版本 0.2.0 可用', type: 'info' })

// Right-Click Menu
rightMenu.open(event, [
  { name: '复制', callback: () => navigator.clipboard.writeText(text) },
  { name: '删除', callback: handleDelete },
])

// PopConfirm (两种调用方式)
zPopConfirmUtils.pop(event, { title: '确认删除？', onConfirm: handleDelete })
createPopConfirm({ title: '确认删除？', onConfirm: handleDelete }) // 独立弹窗
```

## 技术栈

| 层 | 选型 |
|---|------|
| 框架 | Vue 3.5 + TypeScript 5.6 |
| 构建 | Vite 6 |
| 样式 | Tailwind CSS v4 (oklch) + tw-animate-css |
| 组件基座 | shadcn-vue (reka-ui primitives) |
| 图标 | @lucide/vue |
| Toast | vue-sonner |
| Drawer | vaul-vue |
| 轮播 | embla-carousel-vue |

## 许可证

MIT