feat(all): ✨ 新增工具

packages/vue3/CHANGELOG.md

@@ -0,0 +1,12 @@
+# @r-utils/vue3
+
+## 1.4.0
+
+### Minor Changes
+
+- 添加工具
+
+### Patch Changes
+
+- Updated dependencies
+    - @r-utils/common@1.4.0

packages/vue3/README.md

@@ -0,0 +1,92 @@
+# @r-utils/vue3
+
+仅用于 Vue3 项目的工具包，提供 class 处理、组件事件派发和常用组合式 Hooks。
+
+## 适用范围
+
+- 适用于 Vue3 项目。
+- 适用于需要复用 Vue3 class 处理、列表加载、表单输入值处理等能力的项目。
+
+## 不适用范围
+
+- 不适用于 Vue2 项目。
+- 如果是 uni-app 专用能力，建议优先使用 `@r-utils/uni-app`。
+
+## 安装
+
+```bash
+pnpm add @r-utils/vue3
+```
+
+## 导入方式
+
+### 推荐：根入口导入
+
+大多数场景推荐从根入口导入，路径简单，使用心智负担更低。
+
+```ts
+import {
+  mergeClass,
+  dispatch,
+  useLoadMore,
+  useTimer,
+  useValueOfRule,
+} from "@r-utils/vue3";
+```
+
+### 兼容：子路径导入
+
+如果你希望模块边界更清晰，也可以使用子路径导入。两种方式都支持。
+
+```ts
+import { mergeClass } from "@r-utils/vue3/vue-helper";
+import { useLoadMore } from "@r-utils/vue3/hooks/list";
+import { useTimer, useValueOfRule } from "@r-utils/vue3/hooks/utils";
+```
+
+## 导出模块
+
+| 子路径 | 说明 |
+| --- | --- |
+| `@r-utils/vue3/vue-helper` | Vue class 合并、转换和祖先组件事件派发 |
+| `@r-utils/vue3/hooks/list` | 列表分页加载 Hook |
+| `@r-utils/vue3/hooks/utils` | 常用组合式工具 Hook |
+
+## 使用示例
+
+### 合并 class
+
+```ts
+import { mergeClass } from "@r-utils/vue3";
+
+const cls = mergeClass("btn", ["btn-primary"], { active: true });
+```
+
+### 列表加载
+
+```ts
+import { useLoadMore } from "@r-utils/vue3";
+
+const listState = useLoadMore(async (pageNum, pageSize) => {
+  return {
+    total: 100,
+    list: await fetchList(pageNum, pageSize),
+  };
+});
+
+await listState.loadMore();
+```
+
+### 子路径导入 Hook
+
+```ts
+import { useTimer } from "@r-utils/vue3/hooks/utils";
+
+const timer = useTimer(60);
+timer.start();
+```
+
+## 注意事项
+
+- 推荐优先使用根入口导入；如果需要更精确的模块边界，也可以使用子路径导入。
+- 本包依赖 Vue3，请确保业务项目已安装兼容版本的 `vue`。

packages/vue3/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@r-utils/vue3",
-  "version": "1.3.0",
+  "version": "1.4.0",
   "private": false,
   "description": "Vue3 工具",
   "type": "module",
@@ -8,13 +8,30 @@
   "module": "dist/index.mjs",
   "types": "dist/index.d.ts",
   "sideEffects": false,
+  "files": [
+    "dist"
+  ],
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",
       "import": "./dist/index.mjs",
       "require": "./dist/index.cjs"
     },
-    "./*": "./*"
+    "./hooks/list": {
+      "types": "./dist/hooks/list/index.d.ts",
+      "import": "./dist/hooks/list/index.mjs",
+      "require": "./dist/hooks/list/index.cjs"
+    },
+    "./hooks/utils": {
+      "types": "./dist/hooks/utils/index.d.ts",
+      "import": "./dist/hooks/utils/index.mjs",
+      "require": "./dist/hooks/utils/index.cjs"
+    },
+    "./vue-helper": {
+      "types": "./dist/vue-helper/index.d.ts",
+      "import": "./dist/vue-helper/index.mjs",
+      "require": "./dist/vue-helper/index.cjs"
+    }
   },
   "keywords": [
     "vue3"
@@ -42,8 +59,9 @@
   "scripts": {
     "build": "vite build",
     "watch": "vite build --watch",
+    "typecheck": "tsc -p tsconfig.json --noEmit",
     "lint": "eslint --ext .js,ts --fix src",
-    "release": "standard-version",
+    "format": "prettier --write src",
     "commit": "cz",
     "lint-staged": "lint-staged",
     "test": "vitest run"

packages/vue3/src/hooks/utils/index.ts

@@ -9,7 +9,7 @@ import type { Ref } from "vue";
  */
 export function useTimer(initTime = 0) {
   const time = ref(initTime);
-  const timeInterval = ref();
+  const timeInterval = ref<ReturnType<typeof setInterval>>();
 
   const start = () => {
     timeInterval.value = setInterval(() => {

packages/vue3/src/index.ts

@@ -1 +1,3 @@
-export * from "./vue-helper"
+export * from "./vue-helper";
+export * from "./hooks/list";
+export * from "./hooks/utils";

packages/vue3/src/vue-helper/index.ts

@@ -5,10 +5,10 @@ type CustomClass = string | Array<string> | CustomClassObj;
 type DistCustomClass = Record<string, true>;
 export function createCustomClassObj(customClass: string): DistCustomClass;
 export function createCustomClassObj(
-  customClass: Array<string>
+  customClass: Array<string>,
 ): DistCustomClass;
 export function createCustomClassObj(
-  customClass: string | Array<string>
+  customClass: string | Array<string>,
 ): DistCustomClass {
   let customClassObj = <DistCustomClass>{};
   if (typeof customClass === "string") {
@@ -26,7 +26,7 @@ export function createCustomClassObj(
     }
   } else {
     throw new TypeError(
-      `customClass只能是字符串或数组类型，customClass: ${customClass}`
+      `customClass只能是字符串或数组类型，customClass: ${customClass}`,
     );
   }
 
@@ -57,7 +57,7 @@ export function convertCustomClass(sourceClass: CustomClass): CustomClassObj {
     customClassObj = sourceClass;
   } else {
     throw new TypeError(
-      `sourceClass不是有效的vue class，sourceClass: ${sourceClass}`
+      `sourceClass不是有效的vue class，sourceClass: ${sourceClass}`,
     );
   }
 
@@ -72,7 +72,7 @@ export function convertCustomClass(sourceClass: CustomClass): CustomClassObj {
 export function mergeClass(...customClass: CustomClass[]) {
   return customClass
     .map((cc) => convertCustomClass(cc))
-    .reduce((a, b) => Object.assign(a, b),{});
+    .reduce((a, b) => Object.assign(a, b), {});
 }
 
 /**
@@ -87,7 +87,7 @@ export function dispatch(
   thisArg: ComponentPublicInstance,
   componentName: ComponentPublicInstance,
   eventName: string,
-  params: unknown
+  params: unknown,
 ): void {
   let parent = thisArg.$parent || thisArg.$root;
   if (parent == null) {

packages/vue3/tsconfig.json

@@ -6,6 +6,6 @@
     "baseUrl": "./",
     "paths": {
       "@/*": ["src/*"]
-    },
+    }
   }
 }

packages/vue3/types/qqmap-wx-jssdk.d.ts

@@ -8,6 +8,7 @@
  */
 
 import * as QQMapWX from "@jonny1994/qqmap-wx-jssdk";
+
 export * from "@jonny1994/qqmap-wx-jssdk";
 
 /**

packages/vue3/vite.config.ts

@@ -1,31 +1,41 @@
-import { defineConfig } from 'vite';
-import dts from 'vite-plugin-dts';
-import { resolve } from 'node:path';
-import { fileURLToPath } from 'node:url';
+import { defineConfig } from "vite";
+import dts from "vite-plugin-dts";
+import { resolve } from "node:path";
+import { fileURLToPath } from "node:url";
 
-const __dirname = fileURLToPath(new URL('.', import.meta.url));
+const __dirname = fileURLToPath(new URL(".", import.meta.url));
 
 export default defineConfig({
   build: {
     lib: {
-      entry: resolve(__dirname, 'src/index.ts'),
-      formats: ['es', 'cjs'],
-      fileName: (format) => `index.${format === 'es' ? 'mjs' : 'cjs'}`,
+      entry: {
+        index: resolve(__dirname, "src/index.ts"),
+        "hooks/list/index": resolve(__dirname, "src/hooks/list/index.ts"),
+        "hooks/utils/index": resolve(__dirname, "src/hooks/utils/index.ts"),
+        "vue-helper/index": resolve(__dirname, "src/vue-helper/index.ts"),
+      },
+      formats: ["es", "cjs"],
+      fileName: (format, entryName) =>
+        `${entryName}.${format === "es" ? "mjs" : "cjs"}`,
     },
     rollupOptions: {
-      external: ['vue', 'lodash'],
+      external: ["vue", "lodash"],
+      output: {
+        chunkFileNames: "chunks/[name]-[hash].js",
+        assetFileNames: "assets/[name]-[hash][extname]",
+      },
     },
     sourcemap: true,
   },
   resolve: {
     alias: {
-      '@': resolve(__dirname, 'src'),
+      "@": resolve(__dirname, "src"),
     },
   },
   plugins: [
     dts({
-      include: ['src'],
-      outDir: 'dist',
+      include: ["src"],
+      outDir: "dist",
     }),
   ],
 });