@oiij/naive-ui 0.0.81 → 0.0.82

package/README.md

@@ -1,140 +1,404 @@
-# Naive-UI 🎨
+# @oiij/naive-ui
 
 [![NPM version](https://img.shields.io/npm/v/@oiij/naive-ui)](https://www.npmjs.com/package/@oiij/naive-ui)
 [![MIT-license](https://img.shields.io/npm/l/@oiij/naive-ui)](https://github.com/oiij/use/blob/main/packages/naive-ui/LICENSE)
 
-## 项目简介 📦
+## 简介
 
-Use NaiveUI 是基于 Naive UI 的 Vue 3 组件库封装，提供了一套丰富的 UI 组件和组合式 API，帮助开发者快速构建现代化的 Web 应用。
+Use NaiveUI 是基于 Naive UI 的 Vue 3 组件库扩展，提供了一系列实用的组合式 API 和组件，帮助开发者更高效地构建应用。
 
-## 功能特点 ✨
+## 特点
 
-### 模块化设计 🧩
+### 🔌 组合式 API
 
-- 📁 采用模块化架构，每个组件独立封装
-- 📦 支持按需导入，减小打包体积
-- 🔧 清晰的文件结构，易于维护和扩展
+- 🛠️ 提供菜单生成、数据请求、表单管理等工具
+- 🔄 支持响应式配置
+- 🔗 与 Naive UI 无缝集成
 
-### 类型安全 🔒
+### 🧩 丰富组件
+
+- 📊 增强型数据表格
+- 📝 预设表单、输入框、选择器
+- 🌐 远程请求组件
+- ✨ 过渡动画组件
+
+### 🔒 类型安全
 
 - 📝 完整的 TypeScript 类型定义
 - 💡 提供准确的类型推断和代码提示
-- 🎯 支持 Vue 3 的 Composition API 类型系统
+- ⚡ 支持 Vue 3 的 Composition API 类型系统
 
-### 轻量高效 ⚡
+## 安装
 
-- 🚀 核心代码精简，基于 Naive UI 构建
-- 🏃 优化的性能表现，最小化运行时开销
-- 📦 支持 Tree Shaking，进一步减小打包体积
+```bash
+# 使用 pnpm
+pnpm add @oiij/naive-ui
 
-### 功能丰富 🎨
+# 使用 npm
+npm install @oiij/naive-ui
 
-- 🧩 丰富的 UI 组件和组合式 API
-- 🛠️ 提供开箱即用的解决方案
-- 🔄 与 Vue 3 生态系统无缝集成
+# 使用 yarn
+yarn add @oiij/naive-ui
+```
 
-## 安装 📥
+## 依赖
 
-### 使用 pnpm 🐱
+- `vue`: ^3.0.0
+- `naive-ui`: ^2.0.0
+- `vue-router`: ^4.0.0
+- `@vueuse/core`: ^10.0.0
+- `vue-hooks-plus`: ^2.0.0
 
-```bash
-pnpm add @oiij/naive-ui
+## 组合式 API
+
+### useNaiveMenu
+
+将路由配置转换为 Naive UI 菜单配置。
+
+```vue
+<script setup>
+import { useNaiveMenu } from '@oiij/naive-ui'
+import { routes } from 'vue-router/auto-routes'
+
+const { menuOptions, flattenedMenuOptions } = useNaiveMenu(routes)
+</script>
+
+<template>
+  <n-menu :options="menuOptions" />
+</template>
 ```
 
-### 使用 npm 📦
+### useDataRequest
 
-```bash
-npm install @oiij/naive-ui
+数据请求管理，支持分页。
+
+```vue
+<script setup>
+import { useDataRequest } from '@oiij/naive-ui'
+
+const { loading, list, pagination, run } = useDataRequest(fetchApi, {
+  defaultParams: { page: 1, pageSize: 10 },
+  fields: { page: 'page', pageSize: 'size', list: 'data', count: 'total' }
+})
+</script>
 ```
 
-### 使用 yarn 🧶
+### useLoading
 
-```bash
-yarn add @oiij/naive-ui
+获取全局加载状态。
+
+```vue
+<script setup>
+import { useLoading } from '@oiij/naive-ui'
+
+const loading = useLoading()
+loading?.start()
+loading?.finish()
+</script>
 ```
 
-## 快速开始 🌟
+### useNaiveForm
 
-### 基础使用
+表单管理。
 
 ```vue
 <script setup>
-import type { RouteRecordRaw } from 'vue-router'
-import { useNaiveMenu } from '@oiij/naive-ui'
+import { useNaiveForm } from '@oiij/naive-ui'
+import { ref, useTemplateRef } from 'vue'
+
+const formValue = ref({ name: '', email: '' })
+const { formRef, formProps, validate, resetForm } = useNaiveForm(
+  useTemplateRef('form'),
+  formValue
+)
+</script>
+
+<template>
+  <n-form ref="form" v-bind="formProps">
+    <n-form-item label="姓名" path="name">
+      <n-input v-model:value="formValue.name" />
+    </n-form-item>
+  </n-form>
+</template>
+```
+
+### useNaiveTheme
 
-// 模拟路由配置
-const routes: RouteRecordRaw[] = [
-  {
-    path: '/',
-    name: 'Home',
-    meta: {
-      title: '首页'
-    }
-  },
-  {
-    path: '/about',
-    name: 'About',
-    meta: {
-      title: '关于我们'
-    }
-  }
+主题管理。
+
+```vue
+<script setup>
+import { useNaiveTheme } from '@oiij/naive-ui'
+
+const { theme, darkMode, themeOverrides } = useNaiveTheme()
+</script>
+
+<template>
+  <n-config-provider :theme="theme" :theme-overrides="themeOverrides">
+    <button @click="darkMode = !darkMode">
+      切换主题
+    </button>
+  </n-config-provider>
+</template>
+```
+
+## 组件
+
+### ConfigProviders
+
+全局配置提供者。
+
+```vue
+<template>
+  <ConfigProviders>
+    <router-view />
+  </ConfigProviders>
+</template>
+```
+
+### CopyButton
+
+复制按钮。
+
+```vue
+<template>
+  <CopyButton value="要复制的内容" />
+</template>
+```
+
+### DataTablePlus
+
+增强型数据表格。
+
+```vue
+<script setup>
+import { DataTablePlus } from '@oiij/naive-ui'
+
+const columns = [
+  { title: '姓名', key: 'name' },
+  { title: '年龄', key: 'age' }
 ]
 
-const { menuOptions } = useNaiveMenu(routes)
+async function fetchData(params) {
+  return await api.getUsers(params)
+}
 </script>
 
 <template>
-  <div>
-    <n-menu :options="menuOptions" />
-  </div>
+  <DataTablePlus
+    :api="fetchData"
+    :columns="columns"
+    :search="true"
+    :pagination="true"
+  />
 </template>
 ```
 
-## 功能模块 📋
+### LoadingProvider
+
+加载状态提供者。
+
+```vue
+<script setup>
+import { LoadingProvider, useLoading } from '@oiij/naive-ui'
+
+const loading = useLoading()
+</script>
+
+<template>
+  <LoadingProvider :show="false" />
+</template>
+```
+
+### PresetForm
+
+预设表单。
+
+```vue
+<script setup>
+import { PresetForm } from '@oiij/naive-ui'
+import { ref } from 'vue'
+
+const values = ref({ name: '', age: null })
+const options = [
+  { key: 'name', label: '姓名', type: 'input' },
+  { key: 'age', label: '年龄', type: 'input-number' }
+]
+</script>
+
+<template>
+  <PresetForm v-model:values="values" :options="options" />
+</template>
+```
+
+### PresetInput
+
+预设输入框。
+
+```vue
+<script setup>
+import { PresetInput } from '@oiij/naive-ui'
+import { ref } from 'vue'
+
+const value = ref('')
+const options = { type: 'input', props: { placeholder: '请输入' } }
+</script>
+
+<template>
+  <PresetInput v-model:value="value" :options="options" />
+</template>
+```
+
+### PresetSelect
+
+远程选择器。
+
+```vue
+<script setup>
+import { PresetSelect } from '@oiij/naive-ui'
+import { ref } from 'vue'
+
+const value = ref('')
+</script>
+
+<template>
+  <PresetSelect
+    v-model:value="value"
+    :api="fetchUsers"
+    :option-format="(row) => ({ label: row.name, value: row.id })"
+  />
+</template>
+```
+
+### SearchInput
+
+搜索输入框。
+
+```vue
+<script setup>
+import { SearchInput } from '@oiij/naive-ui'
+import { ref } from 'vue'
+
+const keyword = ref('')
+</script>
+
+<template>
+  <SearchInput v-model:value="keyword" placeholder="搜索" />
+</template>
+```
+
+### ToggleInput
+
+切换输入框。
+
+```vue
+<script setup>
+import { ToggleInput } from '@oiij/naive-ui'
+import { ref } from 'vue'
+
+const value = ref('双击编辑')
+</script>
+
+<template>
+  <ToggleInput v-model:value="value" />
+</template>
+```
+
+### TooltipButton
+
+提示按钮。
+
+```vue
+<template>
+  <TooltipButton value="点击查看详情" :button-props="{ type: 'primary' }">
+    查看
+  </TooltipButton>
+</template>
+```
+
+### Transition
+
+过渡动画。
+
+```vue
+<template>
+  <Transition name="fade">
+    <div v-if="show">
+      内容
+    </div>
+  </Transition>
+</template>
+```
+
+## API
+
+### `useNaiveMenu(routes, options?)`
+
+将路由配置转换为菜单配置。
+
+#### 参数
+
+| 参数      | 类型                                 | 说明         |
+| --------- | ------------------------------------ | ------------ |
+| `routes`  | `MaybeRefOrGetter<RouteRecordRaw[]>` | 路由配置数组 |
+| `options` | `UseNaiveMenuOptions`                | 配置选项     |
+
+#### 返回值
+
+| 属性                   | 类型                        | 说明           |
+| ---------------------- | --------------------------- | -------------- |
+| `menuOptions`          | `ComputedRef<MenuOption[]>` | 菜单配置       |
+| `flattenedMenuOptions` | `ComputedRef<MenuOption[]>` | 扁平化菜单配置 |
+
+### `useDataRequest(api, options?)`
+
+数据请求管理。
+
+#### 参数
 
-### 组合式 API
+| 参数      | 类型                    | 说明     |
+| --------- | ----------------------- | -------- |
+| `api`     | `function`              | 请求函数 |
+| `options` | `UseDataRequestOptions` | 配置选项 |
 
-- **use-naive-menu** 📋: 自动菜单生成
-- **use-data-request** 📡: 数据请求管理
-- **use-loading** ⏳: 加载状态管理
-- **use-naive-form** 📝: 表单管理
-- **use-naive-theme** 🎨: 主题管理
+#### 返回值
 
-### 组件
+| 属性         | 类型               | 说明     |
+| ------------ | ------------------ | -------- |
+| `loading`    | `Ref<boolean>`     | 加载状态 |
+| `data`       | `Ref<D>`           | 响应数据 |
+| `list`       | `ComputedRef<R[]>` | 列表数据 |
+| `pagination` | `Ref<Pagination>`  | 分页信息 |
+| `run`        | `function`         | 执行请求 |
+| `refresh`    | `function`         | 刷新请求 |
 
-- **config-providers** ⚙️: 全局配置
-- **copy-button** 📋: 复制按钮
-- **data-table-plus** 📊: 增强数据表格
-- **loading-provider** ⏳: 加载状态提供者
-- **preset-form** 📝: 预设表单
-- **preset-input** 📱: 预设输入框
-- **preset-picker** 📅: 预设选择器
-- **preset-select** 🔽: 预设选择器
-- **remote-request** 📡: 远程请求组件
-- **search-input** 🔍: 搜索输入框
-- **toggle-input** 🔄: 切换输入框
-- **tooltip-button** 💬: 提示按钮
-- **transition** 🔄: 过渡动画
-- **type-writer** ⌨️: 打字机效果
+### `useNaiveForm(formRef, value?, options?)`
 
-## 在线文档 📚
+表单管理。
 
-[在线文档](https://oiij-use.vercel.app/naive-ui/naive-ui) 📖
+#### 返回值
 
-## 贡献指南 🤝
+| 属性        | 类型                    | 说明       |
+| ----------- | ----------------------- | ---------- |
+| `formRef`   | `Ref<FormInst \| null>` | 表单引用   |
+| `formValue` | `Ref<T>`                | 表单值     |
+| `formProps` | `object`                | 表单 props |
+| `validate`  | `function`              | 验证表单   |
+| `resetForm` | `function`              | 重置表单   |
 
-欢迎贡献代码、报告问题或提出新功能建议！
+### `useNaiveTheme(options?)`
 
-1. Fork 本仓库 🍴
-2. 创建您的特性分支 (`git checkout -b feature/amazing-feature`) 🌿
-3. 提交您的更改 (`git commit -m 'Add some amazing feature'`) 💾
-4. 推送到分支 (`git push origin feature/amazing-feature`) 🚀
-5. 打开一个 Pull Request 📥
+主题管理。
 
-## 许可证 📄
+#### 返回值
 
-本项目采用 MIT 许可证 - 查看 [LICENSE](LICENSE) 文件了解详情 📑
+| 属性             | 类型                          | 说明         |
+| ---------------- | ----------------------------- | ------------ |
+| `theme`          | `ComputedRef<Theme>`          | 当前主题     |
+| `darkMode`       | `Ref<boolean>`                | 暗黑模式状态 |
+| `themeOverrides` | `ComputedRef<ThemeOverrides>` | 主题覆盖     |
+| `setColor`       | `function`                    | 设置颜色     |
 
-## 联系方式 📞
+## 在线文档
 
-- GitHub: [https://github.com/oiij/use](https://github.com/oiij/use) 🌟
+[在线文档](https://oiij-use.vercel.app/naive-ui/naive-ui)

package/dist/components/data-table-plus/DataTablePlus.vue.d.ts

@@ -8,8 +8,8 @@ import { RowKey } from "naive-ui/es/data-table/src/interface";
 //#region src/components/data-table-plus/DataTablePlus.vue.d.ts
 declare const __VLS_export: <P extends DataObject, D extends DataObject, R extends DataObject>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_exposed?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
   props: vue.PublicProps & __VLS_PrettifyLocal<DataTablePlusProps<P, D, R> & {
-    onError?: ((err: Error, params: P[]) => any) | undefined;
     onSuccess?: ((data: D, params: P[]) => any) | undefined;
+    onError?: ((err: Error, params: P[]) => any) | undefined;
     onClickRow?: ((row: R, index: number, event: MouseEvent, currentData: R[]) => any) | undefined;
     onContextMenuRow?: ((row: R, index: number, event: MouseEvent, currentData: R[]) => any) | undefined;
     "onUpdate:checkedRowKeys"?: ((keys: RowKey[], rows: R[], meta: {

package/dist/components/preset-select/PresetSelect.vue.d.ts

@@ -7,14 +7,14 @@ import { SelectInst, SelectOption } from "naive-ui";
 //#region src/components/preset-select/PresetSelect.vue.d.ts
 declare const __VLS_export: <V extends PresetSelectValue, P extends DataObject, D extends DataObject, R extends DataObject>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_exposed?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
   props: vue.PublicProps & __VLS_PrettifyLocal<PresetSelectProps<V, P, D, R> & {
-    onError?: ((err: Error, params: P[]) => any) | undefined;
     onSuccess?: ((data: D, params: P[]) => any) | undefined;
+    onError?: ((err: Error, params: P[]) => any) | undefined;
     "onUpdate:value"?: ((val: V | null, option: SelectOption | SelectOption[] | null, raw: R | R[] | null) => any) | undefined;
-    onSearch?: ((val: string) => any) | undefined;
     onBefore?: ((params: P[]) => any) | undefined;
     "onUpdate:page"?: ((page: number) => any) | undefined;
     "onUpdate:pageSize"?: ((pageSize: number) => any) | undefined;
     onFinally?: ((params: P[], data?: D | undefined, err?: Error | undefined) => any) | undefined;
+    onSearch?: ((val: string) => any) | undefined;
     "onUpdate:show"?: ((show: boolean) => any) | undefined;
   }> & (typeof globalThis extends {
     __VLS_PROPS_FALLBACK: infer P_1;

package/dist/components/remote-request/RemoteRequest.vue.d.ts

@@ -6,8 +6,8 @@ import * as vue from "vue";
 //#region src/components/remote-request/RemoteRequest.vue.d.ts
 declare const __VLS_export: <P extends DataObject, D extends DataObject, R extends DataObject>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_exposed?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
   props: vue.PublicProps & __VLS_PrettifyLocal<RemoteRequestProps<P, D> & {
-    onError?: ((err: Error, params: P[]) => any) | undefined;
     onSuccess?: ((data: D, params: P[]) => any) | undefined;
+    onError?: ((err: Error, params: P[]) => any) | undefined;
     onBefore?: ((params: P[]) => any) | undefined;
     onFinally?: ((params: P[], data?: D | undefined, err?: Error | undefined) => any) | undefined;
   }> & (typeof globalThis extends {

package/dist/composables/use-data-request.d.ts

@@ -59,7 +59,7 @@ declare function useDataRequest<P extends DataObject = DataObject, D extends Dat
   loading: Readonly<vue.Ref<boolean, boolean>>;
   data: Readonly<vue.Ref<D | undefined, D | undefined>>;
   error: Readonly<vue.Ref<Error | undefined, Error | undefined>>;
-  params: Readonly<vue.Ref<P[] | [], P[] | []>>;
+  params: Readonly<vue.Ref<[] | P[], [] | P[]>>;
   list: vue.ComputedRef<R[]>;
   pagination: vue.Ref<{
     page: number;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@oiij/naive-ui",
   "type": "module",
-  "version": "0.0.81",
+  "version": "0.0.82",
   "description": "Some Composable Functions And Components for Vue 3",
   "author": "oiij",
   "license": "MIT",
@@ -46,8 +46,8 @@
     "vue-component-type-helpers": "^3.2.6",
     "vue-hooks-plus": "^2.4.3",
     "vue-router": "^5.0.3",
-    "@oiij/css-render": "0.0.12",
-    "@oiij/use": "0.0.50"
+    "@oiij/css-render": "0.0.13",
+    "@oiij/use": "0.0.51"
   },
   "devDependencies": {
     "@types/prismjs": "^1.26.6",
@@ -61,8 +61,8 @@
     "vue-component-type-helpers": "^3.2.6",
     "vue-hooks-plus": "^2.4.3",
     "vue-router": "^5.0.3",
-    "@oiij/css-render": "0.0.12",
-    "@oiij/use": "0.0.50"
+    "@oiij/css-render": "0.0.13",
+    "@oiij/use": "0.0.51"
   },
   "publishConfig": {
     "access": "public"