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

package/LICENSE

@@ -0,0 +1,21 @@
+The MIT License (MIT)
+
+Copyright © 2025 leihaohao
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,17 @@
+# @vue-spark/app-helpers
+
+轻量级 Vue3 应用开发辅助工具包。
+
+## 安装
+
+```bash
+npm i @vue-spark/app-helpers
+```
+
+## 使用方式
+
+请参考 [./src](./src) 目录下的各工具的**README.md**文件。
+
+## License
+
+[MIT](./LICENSE) License © 2025 [leihaohao](https://github.com/l246804)

package/dist/permission/index.d.ts

@@ -0,0 +1,100 @@
+import { AllowedComponentProps, App, ComponentCustomProps, Directive, InjectionKey, ShallowReactive, VNodeProps } from "vue";
+
+//#region src/permission/core.d.ts
+declare const PERMISSION_CODE_ALL = "*";
+type PermissionCodeAll = typeof PERMISSION_CODE_ALL;
+type PermissionCode = PermissionCodeAll | (string & {});
+type PermissionOperator = 'or' | 'and';
+interface Permission {
+  get codes(): ShallowReactive<readonly string[]>;
+  add: (codes: PermissionCode | PermissionCode[]) => void;
+  set: (codes: PermissionCode | PermissionCode[]) => void;
+  clear: () => void;
+  /**
+   * check permission
+   * @param codes permission codes
+   * @param op check permission operator, default is 'or'
+   * @returns whether the user has permission
+   */
+  check: (codes: PermissionCode | PermissionCode[], op?: PermissionOperator) => boolean;
+  install: (app: App) => void;
+}
+interface PermissionOptions {
+  /**
+   * initial permission codes
+   */
+  initialCodes?: PermissionCode | PermissionCode[];
+}
+/**
+ * Create permission instance
+ * @param options permission options
+ */
+declare function createPermission(options?: PermissionOptions): Permission;
+declare module 'vue' {
+  interface ComponentCustomProperties {
+    $permission: Permission;
+  }
+}
+//#endregion
+//#region src/permission/component.d.ts
+interface PermissionGuardProps {
+  codes: PermissionCode | PermissionCode[];
+  /**
+   * check permission operator
+   * @default 'or'
+   */
+  op?: PermissionOperator;
+}
+/**
+ * A component to guard permission
+ * @example
+ * ```html
+ * <script setup lang="ts">
+ * import { usePermission, PermissionGuard } from '@vue-spark/app-helpers/permission'
+ *
+ * const permission = usePermission()
+ * permission.set(['list:add', 'list:edit', 'list:delete'])
+ * </script>
+ *
+ * <template>
+ *   <!-- only show when user has permission -->
+ *   <PermissionGuard :codes="['list:delete']" op="or">
+ *     <button>Delete</button>
+ *   </PermissionGuard>
+ * </template>
+ * ```
+ */
+declare const PermissionGuard: {
+  new (): {
+    $props: AllowedComponentProps & ComponentCustomProps & VNodeProps & PermissionGuardProps;
+  };
+};
+//#endregion
+//#region src/permission/directive.d.ts
+/**
+ * A permission directive
+ * @example
+ * ```html
+ * <script setup lang="ts">
+ * import { vPermission, usePermission } from '@vue-spark/app-helpers/permission'
+ *
+ * const permission = usePermission()
+ * permission.set(['list:add', 'list:edit', 'list:delete'])
+ * </script>
+ *
+ * <template>
+ *   <!-- only show when user has permission -->
+ *   <button v-permission:or="['list:delete']">Delete</button>
+ * </template>
+ * ```
+ */
+declare const vPermission: Directive<Element, PermissionCode | PermissionCode[], string, PermissionOperator>;
+//#endregion
+//#region src/permission/injection.d.ts
+declare const permissionKey: InjectionKey<Permission>;
+/**
+ * Inject permission instance
+ */
+declare function usePermission(): Permission;
+//#endregion
+export { PERMISSION_CODE_ALL, Permission, PermissionCode, PermissionCodeAll, PermissionGuard, PermissionGuardProps, PermissionOperator, PermissionOptions, createPermission, permissionKey, usePermission, vPermission };

package/dist/permission/index.js

@@ -0,0 +1,118 @@
+import { ensureArray } from "../utils-BwZlLmaw.js";
+import { defineComponent, inject, shallowRef, triggerRef } from "vue";
+
+//#region src/permission/injection.ts
+const permissionKey = Symbol("permission key");
+/**
+* Inject permission instance
+*/
+function usePermission() {
+	return inject(permissionKey);
+}
+
+//#endregion
+//#region src/permission/component.ts
+const PermissionGuardImpl = /* @__PURE__ */ defineComponent({
+	name: "PermissionGuard",
+	props: {
+		codes: {
+			type: [String, Array],
+			required: true
+		},
+		op: {
+			type: String,
+			default: "or"
+		}
+	},
+	setup(props, { slots }) {
+		const permission = usePermission();
+		return () => {
+			return slots.default && permission.check(props.codes, props.op) ? slots.default() : null;
+		};
+	}
+});
+/**
+* A component to guard permission
+* @example
+* ```html
+* <script setup lang="ts">
+* import { usePermission, PermissionGuard } from '@vue-spark/app-helpers/permission'
+*
+* const permission = usePermission()
+* permission.set(['list:add', 'list:edit', 'list:delete'])
+* </script>
+*
+* <template>
+*   <!-- only show when user has permission -->
+*   <PermissionGuard :codes="['list:delete']" op="or">
+*     <button>Delete</button>
+*   </PermissionGuard>
+* </template>
+* ```
+*/
+const PermissionGuard = PermissionGuardImpl;
+
+//#endregion
+//#region src/permission/core.ts
+const PERMISSION_CODE_ALL = "*";
+/**
+* Create permission instance
+* @param options permission options
+*/
+function createPermission(options = {}) {
+	const codeSet = shallowRef(new Set(ensureArray(options.initialCodes ?? [])));
+	const permission = {
+		get codes() {
+			return [...codeSet.value];
+		},
+		add(codes) {
+			ensureArray(codes).forEach((code) => codeSet.value.add(code));
+			triggerRef(codeSet);
+		},
+		set(codes) {
+			codeSet.value = new Set(ensureArray(codes));
+		},
+		clear() {
+			codeSet.value = new Set();
+		},
+		check(codes, op = "or") {
+			if (codeSet.value.has(PERMISSION_CODE_ALL)) return true;
+			if (codeSet.value.size === 0) return false;
+			return ensureArray(codes)[op === "and" ? "every" : "some"]((code) => codeSet.value.has(code));
+		},
+		install(app) {
+			app.config.globalProperties.$permission = permission;
+			app.provide(permissionKey, permission);
+			app.onUnmount(() => permission.clear());
+		}
+	};
+	return permission;
+}
+
+//#endregion
+//#region src/permission/directive.ts
+/**
+* A permission directive
+* @example
+* ```html
+* <script setup lang="ts">
+* import { vPermission, usePermission } from '@vue-spark/app-helpers/permission'
+*
+* const permission = usePermission()
+* permission.set(['list:add', 'list:edit', 'list:delete'])
+* </script>
+*
+* <template>
+*   <!-- only show when user has permission -->
+*   <button v-permission:or="['list:delete']">Delete</button>
+* </template>
+* ```
+*/
+const vPermission = { mounted(el, binding) {
+	const { value, arg, instance } = binding;
+	const permission = instance && instance.$permission;
+	if (!permission || !permission.check(value, arg)) el.remove();
+} };
+
+//#endregion
+export { PERMISSION_CODE_ALL, PermissionGuard, createPermission, permissionKey, usePermission, vPermission };

package/dist/sso/index.d.ts

@@ -0,0 +1,103 @@
+//#region src/sso/parseUrl/param.d.ts
+type ParamName = string;
+interface Param {
+  /**
+   * 参数名称
+   */
+  name: ParamName;
+  /**
+   * 该参数是否必填
+   * @default true
+   */
+  required?: boolean;
+}
+type ParamRaw = ParamName | Param;
+declare function normalizeParams(params: ParamRaw[]): Param[];
+//#endregion
+//#region src/sso/parseUrl/paramGroup.d.ts
+type ParamGroupKey = PropertyKey;
+interface ParamGroup {
+  /**
+   * 参数组标识
+   */
+  key: ParamGroupKey;
+  /**
+   * 参数组的参数配置列表
+   */
+  params: Param[];
+}
+type ParamGroupsRaw = Record<ParamGroupKey, ParamRaw[]>;
+declare function normalizeParamGroups(groups: ParamGroupsRaw): ParamGroup[];
+//#endregion
+//#region src/sso/parseUrl/index.d.ts
+interface ParseUrlOptions {
+  /**
+   * 被解析的 URL
+   * @default window.location.href
+   */
+  url?: string | URL;
+  /**
+   * 需要解析的参数组，数组时为默认组
+   * @example
+   * ```ts
+   * // 使用默认分组
+   * ['access_token', 'domain']
+   *
+   * // 自定义分组
+   * {
+   *   success: ['access_token', { name: 'domain', required: false }],
+   *   error: ['error']
+   * }
+   * ```
+   */
+  paramGroups: ParamRaw[] | ParamGroupsRaw;
+}
+interface ParseUrlResult {
+  /**
+   * 验证成功的参数组
+   */
+  group: ParamGroup;
+  /**
+   * 根据参数组提取的数据
+   */
+  data: Record<string, string | null>;
+  /**
+   * 被解析的 URL
+   */
+  rawUrl: string | URL;
+  /**
+   * 清理参数后的 URL
+   */
+  cleanUrl: string;
+}
+/**
+ * 根据参数组解析 URL 并返回结果
+ * @param options 配置项
+ *
+ * @example
+ * ```ts
+ * const parsed = parseUrl({ paramGroups: ['access_token'] })
+ * if (parsed) {
+ *   localStorage.setItem('access_token', parsed.data.access_token)
+ *   history.replaceState(null, '', parsed.cleanUrl)
+ * }
+ * ```
+ */
+declare function parseUrl(options: ParseUrlOptions): ParseUrlResult | null;
+//#endregion
+//#region src/sso/removeUrlSearchParams.d.ts
+/**
+ * 移除 URL 中指定的参数
+ * @param url URL
+ * @param params 需要移除的参数名列表，设为 `true` 表示移除所有参数
+ */
+declare function removeUrlSearchParams(url: string | URL, params: true | string[]): string;
+//#endregion
+//#region src/sso/resolveUrlSearchParams.d.ts
+/**
+ * 根据 URL 获取 {@link URLSearchParams} 实例
+ * @param url URL
+ */
+declare function resolveUrlSearchParams(url: string | URL): URLSearchParams;
+//#endregion
+export { Param, ParamGroup, ParamGroupKey, ParamGroupsRaw, ParamName, ParamRaw, ParseUrlOptions, ParseUrlResult, normalizeParamGroups, normalizeParams, parseUrl, removeUrlSearchParams, resolveUrlSearchParams };

package/dist/sso/index.js

@@ -0,0 +1,89 @@
+import { assign, isArray, isObject } from "../utils-BwZlLmaw.js";
+
+//#region src/sso/resolveUrlSearchParams.ts
+/**
+* 根据 URL 获取 {@link URLSearchParams} 实例
+* @param url URL
+*/
+function resolveUrlSearchParams(url) {
+	const urlString = url.toString();
+	return new URLSearchParams(urlString.includes("?") ? urlString.slice(urlString.lastIndexOf("?")) : "");
+}
+
+//#endregion
+//#region src/sso/removeUrlSearchParams.ts
+/**
+* 移除 URL 中指定的参数
+* @param url URL
+* @param params 需要移除的参数名列表，设为 `true` 表示移除所有参数
+*/
+function removeUrlSearchParams(url, params) {
+	const searchParams = resolveUrlSearchParams(url);
+	url = url.toString();
+	if (url.includes("?")) url = url.slice(0, url.lastIndexOf("?"));
+	if (searchParams.size && isArray(params)) {
+		params.forEach((param) => searchParams.delete(param));
+		if (searchParams.size) url += `?${searchParams}`;
+	}
+	return url;
+}
+
+//#endregion
+//#region src/sso/parseUrl/param.ts
+function normalizeParams(params) {
+	return params.map((p) => assign({ required: true }, !isObject(p) ? { name: p } : p));
+}
+
+//#endregion
+//#region src/sso/parseUrl/paramGroup.ts
+function normalizeParamGroups(groups) {
+	return Reflect.ownKeys(groups).map((key) => ({
+		key,
+		params: normalizeParams(groups[key])
+	}));
+}
+
+//#endregion
+//#region src/sso/parseUrl/index.ts
+const defaultGroupKey = Symbol("default group");
+/**
+* 根据参数组解析 URL 并返回结果
+* @param options 配置项
+*
+* @example
+* ```ts
+* const parsed = parseUrl({ paramGroups: ['access_token'] })
+* if (parsed) {
+*   localStorage.setItem('access_token', parsed.data.access_token)
+*   history.replaceState(null, '', parsed.cleanUrl)
+* }
+* ```
+*/
+function parseUrl(options) {
+	const { url = window.location.href, paramGroups: paramGroupsRaw } = options;
+	const searchParams = resolveUrlSearchParams(url);
+	if (!searchParams.size) return null;
+	const paramGroups = normalizeParamGroups(isArray(paramGroupsRaw) ? { [defaultGroupKey]: paramGroupsRaw } : paramGroupsRaw);
+	for (const group of paramGroups) if (validateGroup(searchParams, group)) return {
+		group,
+		data: pickGroupData(searchParams, group),
+		rawUrl: url,
+		cleanUrl: removeUrlSearchParams(url, group.params.map((p) => p.name))
+	};
+	return null;
+}
+function pickGroupData(searchParams, group) {
+	return group.params.reduce((acc, param) => {
+		acc[param.name] = searchParams.get(param.name);
+		return acc;
+	}, {});
+}
+function validateGroup(searchParams, group) {
+	return group.params.length > 0 && group.params.every((param) => {
+		if (!param.required) return true;
+		return searchParams.has(param.name);
+	});
+}
+
+//#endregion
+export { normalizeParamGroups, normalizeParams, parseUrl, removeUrlSearchParams, resolveUrlSearchParams };

package/dist/tabs/index.d.ts

@@ -0,0 +1,126 @@
+//#region src/tabs/index.d.ts
+type TabType = string;
+type TabsSideType = 'left' | 'right';
+interface TabsHelperOptions<TabData extends {}> {
+  /**
+   * 判断标签是否可移除，返回假值时，标签将不可移除
+   * @example
+   * ```ts
+   * createTabsHelper({
+   *   // 固定标签不可以移除
+   *   isRemovable: ({ tabData }) => !tabData.isFixed
+   * })
+   * ```
+   */
+  isRemovable?: (ctx: {
+    tab: TabType;
+    tabData: TabData;
+  }) => boolean;
+  /**
+   * 移除标签前触发，返回假值时阻止移除，返回 {@link Promise} 时若被 `reject` 也可以阻止移除，
+   * 但是 `resolve` 时仍需返回真值
+   * @example
+   * ```ts
+   * createTabsHelper({
+   *   beforeRemove: ({ tabData }) => {
+   *     return Modal.confirm(`确定要移除标签【${tabData.title}】吗？`).then(() => true)
+   *   }
+   * })
+   * ```
+   */
+  beforeRemove?: (ctx: {
+    tab: TabType;
+    tabData: TabData;
+  }) => boolean | Promise<boolean>;
+}
+interface TabsHelper<TabData extends {}> {
+  /**
+   * 配置项
+   */
+  options: TabsHelperOptions<TabData>;
+  /**
+   * 当前激活的标签
+   */
+  get activeTab(): TabType | undefined;
+  set activeTab(tab: TabType);
+  /**
+   * 获取标签数据
+   * @param tab 标签
+   */
+  getTabData: (tab: TabType) => TabData | undefined;
+  /**
+   * 设置标签数据，若标签不存在则跳过
+   * @param tab 标签
+   * @param tabData 标签数据
+   */
+  setTabData: (tab: TabType, tabData: TabData) => void;
+  /**
+   * 获取所有标签和标签数据
+   */
+  getTabs: () => [tab: TabType, tabData: TabData][];
+  /**
+   * 设置所有标签和标签数据
+   * @param tabs 标签和标签数据
+   */
+  setTabs: (tabs: [tab: TabType, tabData: TabData][]) => void;
+  /**
+   * 获取指定标签的索引
+   * @param tab 指定标签
+   */
+  indexOf: (tab: TabType) => number;
+  /**
+   * 获取指定标签的指定方向侧所有标签和标签数据
+   * @param tab 指定标签
+   * @param side 指定方向侧
+   */
+  getSideTabs: (tab: TabType, side: TabsSideType) => [tab: TabType, tabData: TabData][];
+  /**
+   * 添加标签和标签数据，遇到重复的标签仅更新标签数据
+   * @param tab 标签
+   * @param tabData 标签数据
+   */
+  addTab: (tab: TabType, tabData: TabData) => void;
+  /**
+   * 判断是否存在指定标签
+   * @param tab 标签
+   */
+  hasTab: (tab: TabType) => boolean;
+  /**
+   * 判断指定标签是否可以移除，若列表长度小于等于 `1` 则永久返回 `false`
+   * @param tab 指定标签，默认为当前激活的标签
+   */
+  canRemoveTab: (tab?: TabType) => boolean;
+  /**
+   * 判断除过指定标签的其他标签是否有可移除的标签
+   * @param tab 指定标签，默认为当前激活的标签
+   */
+  canRemoveOtherTabs: (tab?: TabType) => boolean;
+  /**
+   * 判断指定标签的指定方向侧是否有可移除的标签
+   * @param tab 指定标签，默认为当前激活的标签
+   */
+  canRemoveSideTabs: (side: TabsSideType, tab?: TabType) => boolean;
+  /**
+   * 尝试移除指定标签列表，只有返回真值才可以真正移除
+   * @param tabs 标签列表
+   */
+  tryRemoveTabs: (tabs: (TabType | [tab: TabType, tabData: TabData])[]) => Promise<boolean>;
+  /**
+   * 移除指定标签，若移除的是当前激活标签则移除前会自动激活下一个标签
+   * @param tab 指定标签，默认为当前激活的标签
+   */
+  removeTab: (tab?: TabType) => Promise<void>;
+  /**
+   * 移除除过指定标签的其他可移除的标签，并将指定标签设置为激活标签
+   * @param tab 指定标签，默认为当前激活的标签
+   */
+  removeOtherTabs: (tab?: TabType) => Promise<void>;
+  /**
+   * 移除指定标签的指定方向侧的所有可移除的标签，若当前激活的标签存在被移除的标签内，则将指定标签设置为激活标签
+   * @param tab 指定标签，默认为当前激活的标签
+   */
+  removeSideTabs: (side: TabsSideType, tab?: TabType) => Promise<void>;
+}
+declare function createTabsHelper<TabData extends {}>(userOptions?: TabsHelperOptions<TabData>): TabsHelper<TabData>;
+//#endregion
+export { TabsHelper, TabsHelperOptions, TabsSideType, createTabsHelper };

package/dist/tabs/index.js

@@ -0,0 +1,126 @@
+import { assign, isArray } from "../utils-BwZlLmaw.js";
+import { shallowRef, triggerRef } from "vue";
+
+//#region src/tabs/index.ts
+const defaultOptions = {
+	isRemovable: () => true,
+	beforeRemove: () => true
+};
+function createTabsHelper(userOptions = {}) {
+	const options = assign({}, defaultOptions, userOptions);
+	const activeTab = shallowRef();
+	const tabMap = shallowRef(new Map());
+	const getRealTab = (targetTab) => {
+		return isArray(targetTab) ? targetTab[0] : targetTab;
+	};
+	const canRemoveTab = (targetTab) => {
+		if (tabMap.value.size <= 1) return false;
+		targetTab = getRealTab(targetTab);
+		const tabData = tabMap.value.get(targetTab);
+		return !tabData || options.isRemovable({
+			tab: targetTab,
+			tabData
+		});
+	};
+	const setTab = (targetTab, tabData) => {
+		tabMap.value.set(targetTab, assign({}, tabData));
+		triggerRef(tabMap);
+	};
+	const removeTabs = (targetTabs) => {
+		targetTabs.forEach((tab) => tabMap.value.delete(getRealTab(tab)));
+		triggerRef(tabMap);
+	};
+	const setActiveTab = (targetTab) => {
+		activeTab.value = getRealTab(targetTab);
+	};
+	const helper = {
+		options,
+		get activeTab() {
+			return activeTab.value;
+		},
+		set activeTab(targetTab) {
+			setActiveTab(targetTab);
+		},
+		getTabData(targetTab) {
+			return tabMap.value.get(targetTab);
+		},
+		setTabData(targetTab, tabData) {
+			helper.hasTab(targetTab) && setTab(targetTab, tabData);
+		},
+		getTabs() {
+			return [...tabMap.value];
+		},
+		indexOf(targetTab) {
+			return [...tabMap.value.keys()].indexOf(targetTab);
+		},
+		getSideTabs(targetTab, side) {
+			const tabs = helper.getTabs();
+			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);
+		},
+		hasTab(targetTab) {
+			return tabMap.value.has(targetTab);
+		},
+		canRemoveTab(targetTab = helper.activeTab) {
+			return !!targetTab && canRemoveTab(targetTab);
+		},
+		canRemoveOtherTabs(targetTab = helper.activeTab) {
+			return !!targetTab && helper.getTabs().some(([tab]) => tab !== targetTab && canRemoveTab(tab));
+		},
+		canRemoveSideTabs(side, targetTab = helper.activeTab) {
+			return !!targetTab && helper.getSideTabs(targetTab, side).some(canRemoveTab);
+		},
+		async tryRemoveTabs(targetTabs) {
+			let valid = tabMap.value.size > 0 && targetTabs.length > 0;
+			for (const targetTab of targetTabs) {
+				const realTab = getRealTab(targetTab);
+				try {
+					const allowRemove = await options.beforeRemove({
+						tab: realTab,
+						tabData: helper.getTabData(realTab)
+					});
+					valid = valid && !!allowRemove;
+				} catch {
+					valid = false;
+				}
+				if (!valid) break;
+			}
+			return valid;
+		},
+		async removeTab(targetTab = helper.activeTab) {
+			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);
+			removeTabs([targetTab]);
+		},
+		async removeOtherTabs(targetTab = helper.activeTab) {
+			if (!targetTab) return;
+			const otherTabs = helper.getTabs().filter(([tab]) => tab !== targetTab && canRemoveTab(tab));
+			if (!await helper.tryRemoveTabs(otherTabs)) return;
+			targetTab !== helper.activeTab && setActiveTab(targetTab);
+			removeTabs(otherTabs);
+		},
+		async removeSideTabs(side, targetTab = helper.activeTab) {
+			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);
+			removeTabs(sideTabs);
+		}
+	};
+	return helper;
+}
+
+//#endregion
+export { createTabsHelper };

package/dist/utils-BwZlLmaw.js

@@ -0,0 +1,12 @@
+//#region src/utils/index.ts
+const isArray = Array.isArray;
+function ensureArray(val) {
+	return isArray(val) ? val : [val];
+}
+const assign = Object.assign;
+function isObject(val) {
+	return val !== null && typeof val === "object";
+}
+
+//#endregion
+export { assign, ensureArray, isArray, isObject };

package/package.json

@@ -0,0 +1,76 @@
+{
+  "name": "@vue-spark/app-helpers",
+  "type": "module",
+  "version": "0.1.0-beta.1",
+  "description": "Lightweight Helpers for Vue 3 Application Development.",
+  "author": "leihaohao <https://github.com/l246804>",
+  "license": "MIT",
+  "homepage": "https://github.com/vue-spark/app-helpers#readme",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/vue-spark/app-helpers.git"
+  },
+  "bugs": {
+    "url": "https://github.com/vue-spark/app-helpers/issues"
+  },
+  "keywords": [
+    "vue",
+    "app",
+    "helpers",
+    "permission",
+    "sso",
+    "tabs"
+  ],
+  "exports": {
+    "./package.json": "./package.json",
+    "./*": "./dist/*/index.js"
+  },
+  "files": [
+    "dist"
+  ],
+  "publishConfig": {
+    "access": "public",
+    "registry": "https://registry.npmjs.org"
+  },
+  "peerDependencies": {
+    "vue": "^3.5.0",
+    "vue-router": "^4.5.0"
+  },
+  "peerDependenciesMeta": {
+    "vue-router": {
+      "optional": true
+    }
+  },
+  "devDependencies": {
+    "@antfu/eslint-config": "^4.14.1",
+    "@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",
+    "lint-staged": "^16.1.2",
+    "prettier": "^3.5.3",
+    "simple-git-hooks": "^2.13.0",
+    "tsdown": "^0.11.9",
+    "tsx": "^4.19.4",
+    "typescript": "^5.8.3",
+    "vitest": "^3.1.3",
+    "vue": "^3.5.16",
+    "vue-router": "^4.5.1"
+  },
+  "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"
+  }
+}