@vue-spark/app-helpers 0.1.0-beta.2 → 0.2.0

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,6 +1,15 @@
+import { EffectScope } from "vue";
+
 //#region src/tabs/index.d.ts
 type TabType = string;
 type TabsSideType = 'left' | 'right';
+interface TabsHelperRemoveOptions {
+  /**
+   * 当前激活的标签被移除时，是否激活下一个标签
+   * @default true
+   */
+  activeNext?: boolean;
+}
 interface TabsHelperOptions<TabData extends {}> {
   /**
    * 判断标签是否可移除，返回假值时，标签将不可移除
@@ -38,6 +47,11 @@ interface TabsHelper<TabData extends {}> {
    * 配置项
    */
   options: TabsHelperOptions<TabData>;
+  /**
+   * 响应式副作用域，创建响应式变量或监听响应式数据时应在 `scope.run()` 中执行，
+   * 在合适时需要调用 `scope.stop()` 释放响应式副作用
+   */
+  scope: EffectScope;
   /**
    * 当前激活的标签
    */
@@ -54,6 +68,10 @@ interface TabsHelper<TabData extends {}> {
    * @param tabData 标签数据
    */
   setTabData: (tab: TabType, tabData: TabData) => void;
+  /**
+   * 获取标签数量
+   */
+  getTabsCount: () => number;
   /**
    * 获取所有标签和标签数据
    */
@@ -78,8 +96,15 @@ interface TabsHelper<TabData extends {}> {
    * 添加标签和标签数据，遇到重复的标签将会跳过，否则会在添加后更新激活标签
    * @param tab 标签
    * @param tabData 标签数据
+   * @param options 选项
    */
-  addTab: (tab: TabType, tabData: TabData) => void;
+  addTab: (tab: TabType, tabData: TabData, options?: {
+    /**
+     * 是否激活该标签
+     * @default true
+     */
+    active?: boolean;
+  }) => void;
   /**
    * 判断是否存在指定标签
    * @param tab 标签
@@ -108,19 +133,22 @@ interface TabsHelper<TabData extends {}> {
   /**
    * 移除指定标签，若移除的是当前激活标签则移除前会自动激活下一个标签
    * @param tab 指定标签，默认为当前激活的标签
+   * @param options 选项
    */
-  removeTab: (tab?: TabType) => Promise<void>;
+  removeTab: (tab?: TabType, options?: TabsHelperRemoveOptions) => Promise<void>;
   /**
    * 移除除过指定标签的其他可移除的标签，并将指定标签设置为激活标签
    * @param tab 指定标签，默认为当前激活的标签
+   * @param options 选项
    */
-  removeOtherTabs: (tab?: TabType) => Promise<void>;
+  removeOtherTabs: (tab?: TabType, options?: TabsHelperRemoveOptions) => Promise<void>;
   /**
    * 移除指定标签的指定方向侧的所有可移除的标签，若当前激活的标签存在被移除的标签内，则将指定标签设置为激活标签
    * @param tab 指定标签，默认为当前激活的标签
+   * @param options 选项
    */
-  removeSideTabs: (side: TabsSideType, tab?: TabType) => Promise<void>;
+  removeSideTabs: (side: TabsSideType, tab?: TabType, options?: TabsHelperRemoveOptions) => Promise<void>;
 }
 declare function createTabsHelper<TabData extends {}>(userOptions?: TabsHelperOptions<TabData>): TabsHelper<TabData>;
 //#endregion
-export { TabsHelper, TabsHelperOptions, TabsSideType, createTabsHelper };
+export { TabsHelper, TabsHelperOptions, TabsHelperRemoveOptions, TabsSideType, createTabsHelper };

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,13 +66,10 @@ 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) {
+		addTab(targetTab, tabData, { active = true } = {}) {
 			if (!helper.hasTab(targetTab)) {
 				setTab(targetTab, tabData);
-				setActiveTab(targetTab);
+				active && setActiveTab(targetTab);
 			}
 		},
 		hasTab(targetTab) {
@@ -96,28 +101,28 @@ function createTabsHelper(userOptions = {}) {
 			}
 			return valid;
 		},
-		async removeTab(targetTab = helper.activeTab) {
+		async removeTab(targetTab = helper.activeTab, { activeNext = true } = {}) {
 			if (tabMap.value.size <= 1 || !targetTab || !canRemoveTab(targetTab) || !await helper.tryRemoveTabs([targetTab])) return;
 			const tabs = helper.getTabs();
 			const index = helper.indexOf(targetTab);
 			const isActive = targetTab === helper.activeTab;
 			const nextTab = isActive ? tabs[index - 1] || tabs[index + 1] : null;
-			nextTab && setActiveTab(nextTab);
+			nextTab && activeNext && setActiveTab(nextTab);
 			removeTabs([targetTab]);
 		},
-		async removeOtherTabs(targetTab = helper.activeTab) {
+		async removeOtherTabs(targetTab = helper.activeTab, { activeNext = true } = {}) {
 			if (!targetTab) return;
 			const otherTabs = helper.getTabs().filter(([tab]) => tab !== targetTab && canRemoveTab(tab));
 			if (!await helper.tryRemoveTabs(otherTabs)) return;
-			targetTab !== helper.activeTab && setActiveTab(targetTab);
+			activeNext && targetTab !== helper.activeTab && setActiveTab(targetTab);
 			removeTabs(otherTabs);
 		},
-		async removeSideTabs(side, targetTab = helper.activeTab) {
+		async removeSideTabs(side, targetTab = helper.activeTab, { activeNext = true } = {}) {
 			if (!targetTab) return;
 			const sideTabs = helper.getSideTabs(targetTab, side).filter(canRemoveTab);
 			if (!await helper.tryRemoveTabs(sideTabs)) return;
 			const activeInSide = targetTab !== helper.activeTab && sideTabs.some(([tab]) => tab === helper.activeTab);
-			activeInSide && setActiveTab(targetTab);
+			activeInSide && activeNext && setActiveTab(targetTab);
 			removeTabs(sideTabs);
 		}
 	};

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@vue-spark/app-helpers",
   "type": "module",
-  "version": "0.1.0-beta.2",
+  "version": "0.2.0",
   "description": "Lightweight Helpers for Vue 3 Application Development.",
   "author": "leihaohao <https://github.com/l246804>",
   "license": "MIT",
@@ -43,13 +43,14 @@
   },
   "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",
     "bumpp": "^10.1.0",
     "eslint": "^9.26.0",
     "eslint-plugin-format": "^1.0.1",
-    "happy-dom": "^17.4.7",
+    "happy-dom": "^20.0.0",
     "lint-staged": "^16.1.2",
     "prettier": "^3.5.3",
     "simple-git-hooks": "^2.13.0",