@vue-spark/app-helpers 0.1.0-beta.1 → 0.1.0

package/README.md

@@ -10,7 +10,7 @@ npm i @vue-spark/app-helpers
 
 ## 使用方式
 
-请参考 [./src](./src) 目录下的各工具的**README.md**文件。
+请参考 [src](./src) 目录下的各工具的 **README.md** 文件。
 
 ## License
 

package/dist/permission/index.js

@@ -1,5 +1,5 @@
 import { ensureArray } from "../utils-BwZlLmaw.js";
-import { defineComponent, inject, shallowRef, triggerRef } from "vue";
+import { defineComponent, effectScope, inject, shallowRef, triggerRef } from "vue";
 
 //#region src/permission/injection.ts
 const permissionKey = Symbol("permission key");
@@ -60,7 +60,8 @@ const PERMISSION_CODE_ALL = "*";
 * @param options permission options
 */
 function createPermission(options = {}) {
-	const codeSet = shallowRef(new Set(ensureArray(options.initialCodes ?? [])));
+	const scope = effectScope(true);
+	const codeSet = scope.run(() => shallowRef(new Set(ensureArray(options.initialCodes ?? []))));
 	const permission = {
 		get codes() {
 			return [...codeSet.value];
@@ -83,7 +84,10 @@ function createPermission(options = {}) {
 		install(app) {
 			app.config.globalProperties.$permission = permission;
 			app.provide(permissionKey, permission);
-			app.onUnmount(() => permission.clear());
+			app.onUnmount(() => {
+				permission.clear();
+				scope.stop();
+			});
 		}
 	};
 	return permission;

package/dist/tabs/index.d.ts

@@ -1,3 +1,5 @@
+import { EffectScope } from "vue";
+
 //#region src/tabs/index.d.ts
 type TabType = string;
 type TabsSideType = 'left' | 'right';
@@ -38,6 +40,11 @@ interface TabsHelper<TabData extends {}> {
    * 配置项
    */
   options: TabsHelperOptions<TabData>;
+  /**
+   * 响应式副作用域，创建响应式变量或监听响应式数据时应在 `scope.run()` 中执行，
+   * 在合适时需要调用 `scope.stop()` 释放响应式副作用
+   */
+  scope: EffectScope;
   /**
    * 当前激活的标签
    */
@@ -54,6 +61,10 @@ interface TabsHelper<TabData extends {}> {
    * @param tabData 标签数据
    */
   setTabData: (tab: TabType, tabData: TabData) => void;
+  /**
+   * 获取标签数量
+   */
+  getTabsCount: () => number;
   /**
    * 获取所有标签和标签数据
    */
@@ -75,7 +86,7 @@ interface TabsHelper<TabData extends {}> {
    */
   getSideTabs: (tab: TabType, side: TabsSideType) => [tab: TabType, tabData: TabData][];
   /**
-   * 添加标签和标签数据，遇到重复的标签仅更新标签数据
+   * 添加标签和标签数据，遇到重复的标签将会跳过，否则会在添加后更新激活标签
    * @param tab 标签
    * @param tabData 标签数据
    */

package/dist/tabs/index.js

@@ -1,5 +1,5 @@
 import { assign, isArray } from "../utils-BwZlLmaw.js";
-import { shallowRef, triggerRef } from "vue";
+import { effectScope, shallowRef, triggerRef } from "vue";
 
 //#region src/tabs/index.ts
 const defaultOptions = {
@@ -8,8 +8,9 @@ const defaultOptions = {
 };
 function createTabsHelper(userOptions = {}) {
 	const options = assign({}, defaultOptions, userOptions);
-	const activeTab = shallowRef();
-	const tabMap = shallowRef(new Map());
+	const scope = effectScope(true);
+	const activeTab = scope.run(() => shallowRef());
+	const tabMap = scope.run(() => shallowRef(new Map()));
 	const getRealTab = (targetTab) => {
 		return isArray(targetTab) ? targetTab[0] : targetTab;
 	};
@@ -35,6 +36,7 @@ function createTabsHelper(userOptions = {}) {
 	};
 	const helper = {
 		options,
+		scope,
 		get activeTab() {
 			return activeTab.value;
 		},
@@ -47,9 +49,15 @@ function createTabsHelper(userOptions = {}) {
 		setTabData(targetTab, tabData) {
 			helper.hasTab(targetTab) && setTab(targetTab, tabData);
 		},
+		getTabsCount() {
+			return tabMap.value.size;
+		},
 		getTabs() {
 			return [...tabMap.value];
 		},
+		setTabs(tabs) {
+			tabMap.value = new Map(tabs);
+		},
 		indexOf(targetTab) {
 			return [...tabMap.value.keys()].indexOf(targetTab);
 		},
@@ -58,12 +66,11 @@ function createTabsHelper(userOptions = {}) {
 			const index = helper.indexOf(targetTab);
 			return side === "left" ? tabs.slice(0, index) : tabs.slice(index + 1);
 		},
-		setTabs(tabs) {
-			tabMap.value = new Map(tabs);
-		},
 		addTab(targetTab, tabData) {
-			setTab(targetTab, tabData);
-			setActiveTab(targetTab);
+			if (!helper.hasTab(targetTab)) {
+				setTab(targetTab, tabData);
+				setActiveTab(targetTab);
+			}
 		},
 		hasTab(targetTab) {
 			return tabMap.value.has(targetTab);

package/package.json

@@ -1,7 +1,8 @@
 {
   "name": "@vue-spark/app-helpers",
   "type": "module",
-  "version": "0.1.0-beta.1",
+  "version": "0.1.0",
+  "packageManager": "pnpm@10.11.0",
   "description": "Lightweight Helpers for Vue 3 Application Development.",
   "author": "leihaohao <https://github.com/l246804>",
   "license": "MIT",
@@ -22,8 +23,8 @@
     "tabs"
   ],
   "exports": {
-    "./package.json": "./package.json",
-    "./*": "./dist/*/index.js"
+    "./*": "./dist/*/index.js",
+    "./package.json": "./package.json"
   },
   "files": [
     "dist"
@@ -32,6 +33,17 @@
     "access": "public",
     "registry": "https://registry.npmjs.org"
   },
+  "scripts": {
+    "dev": "tsdown --watch",
+    "build": "tsdown",
+    "test": "vitest",
+    "typecheck": "tsc --noEmit",
+    "format": "prettier . --write --cache --cache-location ./node_modules/.cache/.prettier-cache",
+    "lint": "eslint . --cache --cache-location ./node_modules/.cache/.eslint-cache",
+    "lint:fix": "pnpm run lint --fix",
+    "release": "bumpp && pnpm publish",
+    "prepublishOnly": "pnpm run build"
+  },
   "peerDependencies": {
     "vue": "^3.5.0",
     "vue-router": "^4.5.0"
@@ -43,6 +55,7 @@
   },
   "devDependencies": {
     "@antfu/eslint-config": "^4.14.1",
+    "@sxzz/prettier-config": "^2.2.3",
     "@tsconfig/node22": "^22.0.2",
     "@types/node": "^22.15.17",
     "@vue/tsconfig": "^0.7.0",
@@ -62,15 +75,5 @@
   },
   "simple-git-hooks": {
     "pre-commit": "npx lint-staged"
-  },
-  "scripts": {
-    "dev": "tsdown --watch",
-    "build": "tsdown",
-    "test": "vitest",
-    "typecheck": "tsc --noEmit",
-    "format": "prettier . --write --cache --cache-location ./node_modules/.cache/.prettier-cache",
-    "lint": "eslint . --cache --cache-location ./node_modules/.cache/.eslint-cache",
-    "lint:fix": "pnpm run lint --fix",
-    "release": "bumpp && pnpm publish"
   }
-}
+}