@oiij/naive-ui 0.0.80 → 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/_virtual/_/plugin-vue/export-helper.js

@@ -4,6 +4,5 @@ var export_helper_default = (sfc, props) => {
 	for (const [key, val] of props) target[key] = val;
 	return target;
 };
-
 //#endregion
-export { export_helper_default as default };
+export { export_helper_default as default };

package/dist/components/_utils/cssr-bem.js

@@ -1,7 +1,5 @@
 import { useBem } from "@oiij/css-render";
-
 //#region src/components/_utils/cssr-bem.ts
 const { cssr, plugin, namespace } = useBem();
-
 //#endregion
-export { cssr, namespace, plugin };
+export { cssr, namespace, plugin };

package/dist/components/config-providers/ConfigProviders.js

@@ -1,8 +1,7 @@
-import LoadingProvider_default from "../loading-provider/LoadingProvider.js";
+import _sfc_main$1 from "../loading-provider/LoadingProvider.js";
 import { useLoading } from "../../composables/use-loading.js";
 import { createBlock, createCommentVNode, createVNode, defineComponent, guardReactiveProps, normalizeProps, onMounted, openBlock, renderSlot, unref, withCtx } from "vue";
 import { NConfigProvider, NDialogProvider, NGlobalStyle, NLoadingBarProvider, NMessageProvider, NModalProvider, NNotificationProvider, useDialog, useLoadingBar, useMessage, useModal, useNotification } from "naive-ui";
-
 //#region src/components/config-providers/ConfigProviders.vue
 const _sfc_main = /* @__PURE__ */ defineComponent({
 	__name: "ConfigProviders",
@@ -41,7 +40,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
 		return (_ctx, _cache) => {
 			return openBlock(), createBlock(unref(NConfigProvider), normalizeProps(guardReactiveProps(__props.configProviderProps)), {
 				default: withCtx(() => [createVNode(unref(NLoadingBarProvider), normalizeProps(guardReactiveProps(__props.loadingBarProviderProps)), {
-					default: withCtx(() => [createVNode(unref(LoadingProvider_default), normalizeProps(guardReactiveProps(__props.loadingProviderProps)), {
+					default: withCtx(() => [createVNode(unref(_sfc_main$1), normalizeProps(guardReactiveProps(__props.loadingProviderProps)), {
 						default: withCtx(() => [createVNode(unref(NDialogProvider), normalizeProps(guardReactiveProps(__props.dialogProviderProps)), {
 							default: withCtx(() => [createVNode(unref(NModalProvider), normalizeProps(guardReactiveProps(__props.modalProviderProps)), {
 								default: withCtx(() => [createVNode(unref(NNotificationProvider), normalizeProps(guardReactiveProps(__props.notificationProviderProps)), {
@@ -64,7 +63,5 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
 		};
 	}
 });
-var ConfigProviders_default = _sfc_main;
-
 //#endregion
-export { ConfigProviders_default as default };
+export { _sfc_main as default };

package/dist/components/config-providers/ConfigProviders.vue.d.ts

@@ -1,12 +1,12 @@
 import { ConfigProvidersProps } from "./index.js";
-import * as vue28 from "vue";
+import * as vue from "vue";
 
 //#region src/components/config-providers/ConfigProviders.vue.d.ts
 declare var __VLS_44: {};
 type __VLS_Slots = {} & {
   default?: (props: typeof __VLS_44) => any;
 };
-declare const __VLS_base: vue28.DefineComponent<ConfigProvidersProps, {}, {}, {}, {}, vue28.ComponentOptionsMixin, vue28.ComponentOptionsMixin, {}, string, vue28.PublicProps, Readonly<ConfigProvidersProps> & Readonly<{}>, {}, {}, {}, {}, string, vue28.ComponentProvideOptions, false, {}, any>;
+declare const __VLS_base: vue.DefineComponent<ConfigProvidersProps, {}, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.PublicProps, Readonly<ConfigProvidersProps> & Readonly<{}>, {}, {}, {}, {}, string, vue.ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;
 type __VLS_WithSlots<T, S> = T & {

package/dist/components/config-providers/index.d.ts

@@ -1,7 +1,6 @@
 import { ClassStyle } from "../data-table-plus/index.js";
 import { LoadingProviderProps } from "../loading-provider/index.js";
 import { useLoading } from "../../composables/use-loading.js";
-import "../../composables/index.js";
 import { _default } from "./ConfigProviders.vue.js";
 import { ConfigProviderProps, DialogProviderInst, DialogProviderProps, LoadingBarProviderInst, LoadingBarProviderProps, MessageProviderInst, MessageProviderProps, ModalProviderInst, ModalProviderProps, NotificationProviderInst, NotificationProviderProps } from "naive-ui";
 

package/dist/components/copy-button/CopyButton.js

@@ -1,8 +1,7 @@
 import MageCopyFill_default from "../icons/MageCopyFill.js";
-import TooltipButton_default from "../tooltip-button/TooltipButton.js";
+import _sfc_main$1 from "../tooltip-button/TooltipButton.js";
 import { useClipboard } from "@vueuse/core";
 import { createBlock, createVNode, defineComponent, openBlock, renderSlot, unref, watch, withCtx } from "vue";
-
 //#region src/components/copy-button/CopyButton.vue
 const _sfc_main = /* @__PURE__ */ defineComponent({
 	__name: "CopyButton",
@@ -27,7 +26,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
 			copy();
 		}
 		return (_ctx, _cache) => {
-			return openBlock(), createBlock(unref(TooltipButton_default), {
+			return openBlock(), createBlock(unref(_sfc_main$1), {
 				tooltip: unref(copied) ? "复制成功" : "复制",
 				"tooltip-props": __props.tooltipProps,
 				"button-props": {
@@ -47,7 +46,5 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
 		};
 	}
 });
-var CopyButton_default = _sfc_main;
-
 //#endregion
-export { CopyButton_default as default };
+export { _sfc_main as default };

package/dist/components/copy-button/CopyButton.vue.d.ts

@@ -1,16 +1,16 @@
 import { CopyButtonProps } from "./index.js";
-import * as vue46 from "vue";
+import * as vue from "vue";
 
 //#region src/components/copy-button/CopyButton.vue.d.ts
 declare var __VLS_11: {};
 type __VLS_Slots = {} & {
   icon?: (props: typeof __VLS_11) => any;
 };
-declare const __VLS_base: vue46.DefineComponent<CopyButtonProps, {}, {}, {}, {}, vue46.ComponentOptionsMixin, vue46.ComponentOptionsMixin, {} & {
+declare const __VLS_base: vue.DefineComponent<CopyButtonProps, {}, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {} & {
   copied: (v: string | undefined) => any;
-}, string, vue46.PublicProps, Readonly<CopyButtonProps> & Readonly<{
+}, string, vue.PublicProps, Readonly<CopyButtonProps> & Readonly<{
   onCopied?: ((v: string | undefined) => any) | undefined;
-}>, {}, {}, {}, {}, string, vue46.ComponentProvideOptions, false, {}, any>;
+}>, {}, {}, {}, {}, string, vue.ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;
 type __VLS_WithSlots<T, S> = T & {

package/dist/components/data-table-plus/DataTablePlus.js

@@ -1,8 +1,7 @@
 import { useDataRequest } from "../../composables/use-data-request.js";
-import SearchInput_default from "../search-input/SearchInput.js";
+import _sfc_main$1 from "../search-input/SearchInput.js";
 import { computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createVNode, defineComponent, guardReactiveProps, mergeProps, normalizeProps, openBlock, reactive, ref, renderSlot, toDisplayString, toRaw, unref, useTemplateRef, watchEffect, withCtx } from "vue";
 import { NDataTable, NFlex, NPagination } from "naive-ui";
-
 //#region src/components/data-table-plus/DataTablePlus.vue
 const _hoisted_1 = { style: {
 	height: "100%",
@@ -244,7 +243,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
 					renderSlot(_ctx.$slots, "header", normalizeProps(guardReactiveProps(templateBind.value)), () => [createVNode(unref(NFlex), null, {
 						default: withCtx(() => [
 							renderSlot(_ctx.$slots, "title", {}, () => [createElementVNode("div", _hoisted_1, [__props.title ? (openBlock(), createElementBlock("span", _hoisted_2, toDisplayString(__props.title), 1)) : createCommentVNode("v-if", true)])]),
-							__props.search ? (openBlock(), createBlock(unref(SearchInput_default), mergeProps({
+							__props.search ? (openBlock(), createBlock(unref(_sfc_main$1), mergeProps({
 								key: 0,
 								style: {
 									marginLeft: "auto",
@@ -317,7 +316,5 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
 		};
 	}
 });
-var DataTablePlus_default = _sfc_main;
-
 //#endregion
-export { DataTablePlus_default as default };
+export { _sfc_main as default };