vft 0.0.524 → 0.0.525

package/es/components/multiple-tabs/multiple-tabs.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,211 @@
+import { useNamespace } from "../../hooks/use-namespace/index.js";
+import { addUnit } from "../../utils/helper.js";
+import { generateCssVars } from "../../utils/ns-cover.js";
+import { VftIcon } from "../icon/index.js";
+import { VftTabPane, VftTabs } from "../tabs/index.js";
+import { initAffixTabs, useTabsDrag } from "./use/use-multiple-tabs.js";
+import tab_content_default from "./tab-content.js";
+import { isClient } from "@vueuse/core";
+import { Fragment, computed, createBlock, createElementBlock, createElementVNode, createSlots, createVNode, defineComponent, getCurrentInstance, normalizeClass, normalizeStyle, onMounted, openBlock, ref, renderList, renderSlot, unref, watchEffect, withCtx } from "vue";
+import { useRefs } from "@vft/use";
+import { getRouterKeyPath, listenerRouteChange, useRouterHelper } from "@vft/router";
+import { isTabPinned, useMultipleTabStore, useTabs } from "@vft/store";
+import hotkeys from "hotkeys-js";
+import { onBeforeRouteLeave } from "vue-router";
+var multiple_tabs_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
+	...defineComponent({ name: "vft-multiple-tabs" }),
+	props: {
+		tabsStyle: {
+			type: Object,
+			required: false
+		},
+		contextMenuStyle: {
+			type: Object,
+			required: false
+		},
+		canDrag: {
+			type: Boolean,
+			required: false
+		},
+		showNavRight: {
+			type: Boolean,
+			required: false,
+			default: true
+		},
+		fixTabCount: {
+			type: Number,
+			required: false,
+			default: 0
+		},
+		fixExtraScrollWidth: {
+			type: Number,
+			required: false
+		}
+	},
+	setup(__props) {
+		const ns = useNamespace("multiple-tabs");
+		const _router = getCurrentInstance().appContext.config.globalProperties.$router;
+		const affixList = initAffixTabs(_router);
+		const tabStore = useMultipleTabStore();
+		/** 当前列表中「固定」标签数量（路由 affix + 用户固定），用于左侧固定列宽与右键关闭左侧等逻辑 */
+		const pinnedVisibleCount = computed(() => tabStore.getTabList.filter((t) => !t.meta?.hideTab && isTabPinned(t)).length);
+		/** 与父级传入的 fixTabCount 取较大值，避免用户固定多个标签时左侧列仍按 1 列计算 */
+		const resolvedFixTabCount = computed(() => Math.max(__props.fixTabCount, pinnedVisibleCount.value));
+		const activePathRef = ref(getRouterKeyPath(unref(_router.currentRoute)) || "");
+		const activeIndex = ref(0);
+		const fromRoute = ref();
+		const { go } = useRouterHelper(_router);
+		const getTabsState = computed(() => {
+			return tabStore.getTabList.filter((item) => {
+				return !item.meta?.hideTab;
+			});
+		});
+		watchEffect(() => {
+			if (activePathRef.value) {
+				const _activeIndex = getTabsState.value.findIndex((item) => {
+					return getRouterKeyPath(item) === activePathRef.value;
+				});
+				if (_activeIndex === -1) activeIndex.value = getTabsState.value?.length - 1;
+				else activeIndex.value = _activeIndex;
+				activeIndex.value = activeIndex.value < pinnedVisibleCount.value ? pinnedVisibleCount.value - 1 : activeIndex.value;
+			}
+		});
+		if (isClient) onBeforeRouteLeave(() => {
+			fromRoute.value = unref(_router.currentRoute);
+		});
+		listenerRouteChange(({ route }) => {
+			if (!route || route.meta?.hasTokenToRoot) return;
+			const { meta = {} } = route;
+			const { currentActivePath, hideTab } = meta;
+			const isHide = !hideTab ? null : currentActivePath;
+			const activePath = getRouterKeyPath(route);
+			if (activePath && activePathRef.value !== activePath) activePathRef.value = activePath;
+			if (isHide) {
+				const findParentRoute = _router.getRoutes().find((item) => item.path === currentActivePath);
+				findParentRoute && tabStore.addTab(findParentRoute, unref(fromRoute), activeIndex.value, route);
+			} else if (!hideTab) tabStore.addTab(unref(route), unref(fromRoute), activeIndex.value);
+		});
+		function handleClick(pane) {
+			if (activePathRef.value === pane.paneName) return;
+			const clickTab = getTabsState.value[pane.attrs.index];
+			activePathRef.value = pane.paneName;
+			const hideActiveRoutePath = (clickTab?.meta?.hideActiveRoute)?.fullPath;
+			if (hideActiveRoutePath) go(hideActiveRoutePath);
+			else go(clickTab.fullPath || clickTab.path);
+		}
+		function handleRemove(targetPath) {
+			tabStore.closeTabByKey(targetPath, _router);
+		}
+		const { refs, setRefs } = useRefs();
+		function handleContextMenu(data) {
+			const _index = data.pane.attrs.index;
+			const _event = data.event;
+			refs.value[_index].handleContext(_event);
+		}
+		const _tabsStyle = computed(() => {
+			return {
+				...generateCssVars({
+					padding: "4px 0 0",
+					"border-bottom": "none",
+					"header-height": addUnit(26),
+					"font-size": addUnit(13),
+					"item-padding": `0 ${addUnit(10)}`,
+					"close-icon-left": addUnit(8),
+					"item-distance": "1px",
+					"item-max-width": addUnit(180),
+					"scroll-padding": `0 ${addUnit(20)}`,
+					"header-margin": `0 0 0 ${addUnit(10)}`,
+					"item-border-radius": `${addUnit(5)} ${addUnit(5)} 0 0`,
+					"item-border": "none"
+				}, "tabs"),
+				...__props.tabsStyle
+			};
+		});
+		const { closeCurrent } = useTabs();
+		const _contextMenuStyle = {
+			...generateCssVars({
+				"sub-item-height": addUnit(40),
+				"item-min-width": addUnit(150)
+			}, "menu"),
+			...__props.contextMenuStyle
+		};
+		const handleFullScreen = () => {
+			tabStore.toggleFullScreen(tabStore.getTabList[activeIndex.value], _router);
+		};
+		const tabIsRefreshing = ref(false);
+		let refreshtimer;
+		const handleRefresh = () => {
+			clearInterval(refreshtimer);
+			tabIsRefreshing.value = true;
+			tabStore.refreshPage(0, _router, tabStore.getTabList[activeIndex.value]);
+			refreshtimer = setTimeout(() => {
+				tabIsRefreshing.value = false;
+			}, 500);
+		};
+		onMounted(() => {
+			if (__props.canDrag) useTabsDrag(affixList);
+			hotkeys("command+e, ctrl+e", () => {
+				closeCurrent();
+				return false;
+			});
+		});
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", {
+				class: normalizeClass(unref(ns).b()),
+				style: normalizeStyle(_tabsStyle.value)
+			}, [createVNode(unref(VftTabs), {
+				"show-bar": false,
+				"fix-tab-count": resolvedFixTabCount.value,
+				"fix-extra-scroll-width": __props.fixExtraScrollWidth,
+				modelValue: activePathRef.value,
+				"onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => activePathRef.value = $event),
+				onTabClick: handleClick,
+				onTabRemove: handleRemove,
+				onTabContextMenu: handleContextMenu
+			}, createSlots({
+				default: withCtx(() => [(openBlock(true), createElementBlock(Fragment, null, renderList(getTabsState.value, (item, index) => {
+					return openBlock(), createBlock(unref(VftTabPane), {
+						key: unref(getRouterKeyPath)(item) + index,
+						closable: !unref(isTabPinned)(item),
+						index,
+						name: unref(getRouterKeyPath)(item)
+					}, {
+						label: withCtx(() => [createVNode(tab_content_default, {
+							"context-menu-style": _contextMenuStyle,
+							"affix-num": pinnedVisibleCount.value,
+							ref_for: true,
+							ref: unref(setRefs)(index),
+							"tab-item": item
+						}, null, 8, ["affix-num", "tab-item"])]),
+						_: 2
+					}, 1032, [
+						"closable",
+						"index",
+						"name"
+					]);
+				}), 128))]),
+				_: 2
+			}, [__props.showNavRight ? {
+				name: "navRight",
+				fn: withCtx(() => [renderSlot(_ctx.$slots, "nav-right", {}, () => [createElementVNode("div", { class: normalizeClass(unref(ns).e("nav-right")) }, [createVNode(unref(VftIcon), {
+					rotate: tabIsRefreshing.value,
+					"rotate-speed": 1,
+					onClick: handleRefresh,
+					icon: "icon-refresh-right",
+					pointer: ""
+				}, null, 8, ["rotate"]), createVNode(unref(VftIcon), {
+					onClick: handleFullScreen,
+					icon: unref(tabStore).isFullScreen ? "icon-collapse" : "icon-expand",
+					pointer: ""
+				}, null, 8, ["icon"])], 2)])]),
+				key: "0"
+			} : void 0]), 1032, [
+				"fix-tab-count",
+				"fix-extra-scroll-width",
+				"modelValue"
+			])], 6);
+		};
+	}
+});
+//#endregion
+export { multiple_tabs_vue_vue_type_script_setup_true_lang_default as default };

package/es/components/multiple-tabs/style/css.js

@@ -1,4 +1,4 @@
-import "vft/theme-style/base.css";
+import "../../base/style/css.js";
+import "../../icon/style/css.js";
+import "../../tabs/style/css.js";
 import "vft/theme-style/vft-multiple-tabs.css";
-import "vft/theme-style/vft-tabs.css";
-import "vft/theme-style/vft-icon.css";

package/es/components/multiple-tabs/style/index.js

@@ -1,4 +1,4 @@
-import "vft/theme-style/src/base.scss";
+import "../../base/style/index.js";
+import "../../icon/style/index.js";
+import "../../tabs/style/index.js";
 import "vft/theme-style/src/multiple-tabs.scss";
-import "vft/theme-style/src/tabs.scss";
-import "vft/theme-style/src/icon.scss";

package/es/components/multiple-tabs/tab-content.js

@@ -0,0 +1,5 @@
+import tab_content_vue_vue_type_script_setup_true_lang_default from "./tab-content.vue_vue_type_script_setup_true_lang.js";
+//#region ../../packages/components/multiple-tabs/tab-content.vue
+var tab_content_default = tab_content_vue_vue_type_script_setup_true_lang_default;
+//#endregion
+export { tab_content_default as default };

package/es/components/multiple-tabs/tab-content.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,61 @@
+import { VftIconText } from "../icon-text/index.js";
+import { useContextMenu } from "../context-menu/useContextMenu.js";
+import { useTabDropdown } from "./use/use-tab-dropdown.js";
+import { singleAttrToObj } from "@vft/utils";
+import { computed, createBlock, defineComponent, openBlock, unref, withModifiers } from "vue";
+//#region ../../packages/components/multiple-tabs/tab-content.vue?vue&type=script&setup=true&lang.ts
+var tab_content_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
+	__name: "tab-content",
+	props: {
+		tabItem: {
+			type: null,
+			required: true
+		},
+		affixNum: {
+			type: Number,
+			required: true
+		},
+		contextMenuStyle: {
+			type: Object,
+			required: false
+		},
+		visible: {
+			type: Boolean,
+			required: false
+		}
+	},
+	setup(__props, { expose: __expose }) {
+		const [createContextMenu] = useContextMenu();
+		const getTitle = computed(() => {
+			return __props.tabItem.meta && __props.tabItem.meta.title;
+		});
+		const getIcon = computed(() => {
+			return singleAttrToObj(__props.tabItem.meta?.icon, "icon");
+		});
+		const { getDropMenuList, handleContextMenu } = useTabDropdown(__props.tabItem, __props.affixNum);
+		function handleContext(e) {
+			handleContextMenu(__props.tabItem)(e);
+			createContextMenu({
+				event: e,
+				styles: __props.contextMenuStyle,
+				items: getDropMenuList.value
+			});
+		}
+		__expose({ handleContext });
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(unref(VftIconText), {
+				class: "vft-multiple-tabs__title",
+				title: getTitle.value,
+				icon: getIcon.value,
+				text: getTitle.value || "",
+				onContextmenu: withModifiers(handleContext, ["stop"])
+			}, null, 8, [
+				"title",
+				"icon",
+				"text"
+			]);
+		};
+	}
+});
+//#endregion
+export { tab_content_vue_vue_type_script_setup_true_lang_default as default };

package/es/components/multiple-tabs/types.js

@@ -1 +0,0 @@
-import "../tabs/index.js";

package/es/components/multiple-tabs/use/index.js

@@ -1,7 +1,3 @@
-import { initAffixTabs as a, useTabsDrag as e } from "./use-multiple-tabs.js";
-import { useTabDropdown as s } from "./use-tab-dropdown.js";
-export {
-  a as initAffixTabs,
-  s as useTabDropdown,
-  e as useTabsDrag
-};
+import { initAffixTabs, useTabsDrag } from "./use-multiple-tabs.js";
+import { useTabDropdown } from "./use-tab-dropdown.js";
+export { initAffixTabs, useTabDropdown, useTabsDrag };

package/es/components/multiple-tabs/use/use-multiple-tabs.js

@@ -1,48 +1,61 @@
-import { useMultipleTabStore as c } from "@vft/store";
-import { useSortable as u } from "@vft/use/sortable";
-import { isNullOrUndefined as l, arrSort as b } from "@vft/utils";
-import { ref as m, nextTick as d, toRaw as x } from "vue";
-function g(o) {
-  const n = m([]), f = c();
-  function i(t) {
-    const a = [];
-    return t && t.forEach((s) => {
-      s.meta?.affix && a.push(x(s));
-    }), a;
-  }
-  function r() {
-    const t = i(o.getRoutes());
-    b(t, ["meta", "order"], !1), n.value = t;
-    for (const a of t)
-      f.addTab({
-        meta: a.meta,
-        name: a.name,
-        path: a.path
-      });
-  }
-  let e = !1;
-  return e || (r(), e = !0), n.value.map((t) => t.meta?.title).filter(Boolean);
+import { arrSort, isNullOrUndefined } from "@vft/utils";
+import { nextTick, ref, toRaw } from "vue";
+import { useSortable } from "@vft/use/sortable";
+import { useMultipleTabStore } from "@vft/store";
+//#region ../../packages/components/multiple-tabs/use/use-multiple-tabs.ts
+/**
+* @description 初始化需要固定的 tab 标签
+* @author wfd
+* @date 2022/10/15 19:03
+* @example
+* @returns {string[]}
+*/
+function initAffixTabs(router) {
+	const affixList = ref([]);
+	const tabStore = useMultipleTabStore();
+	function filterAffixTabs(routes) {
+		const tabs = [];
+		routes && routes.forEach((route) => {
+			if (route.meta?.affix) tabs.push(toRaw(route));
+		});
+		return tabs;
+	}
+	function addAffixTabs() {
+		const affixTabs = filterAffixTabs(router.getRoutes());
+		arrSort(affixTabs, ["meta", "order"], false);
+		affixList.value = affixTabs;
+		for (const tab of affixTabs) tabStore.addTab({
+			meta: tab.meta,
+			name: tab.name,
+			path: tab.path
+		});
+	}
+	let isAddAffix = false;
+	if (!isAddAffix) {
+		addAffixTabs();
+		isAddAffix = true;
+	}
+	return affixList.value.map((item) => item.meta?.title).filter(Boolean);
 }
-function h(o) {
-  const n = c();
-  d(() => {
-    const f = document.querySelectorAll(".vft-tabs__nav")?.[0], { initSortable: i } = u(f, {
-      draggable: ".is-closable",
-      // forceFallback: true,
-      // fallbackClass: 'sortable-fallback',
-      filter: (r) => {
-        const e = r?.target?.innerText;
-        return e ? o.includes(e) : !1;
-      },
-      onEnd: (r) => {
-        const { oldIndex: e, newIndex: t } = r;
-        l(e) || l(t) || e === t || n.sortTabs(e, t);
-      }
-    });
-    i();
-  });
+function useTabsDrag(affixTextList) {
+	const tabStore = useMultipleTabStore();
+	nextTick(() => {
+		const el = document.querySelectorAll(".vft-tabs__nav")?.[0];
+		const { initSortable } = useSortable(el, {
+			draggable: ".is-closable",
+			filter: (e) => {
+				const text = (e?.target)?.innerText;
+				if (!text) return false;
+				return affixTextList.includes(text);
+			},
+			onEnd: (evt) => {
+				const { oldIndex, newIndex } = evt;
+				if (isNullOrUndefined(oldIndex) || isNullOrUndefined(newIndex) || oldIndex === newIndex) return;
+				tabStore.sortTabs(oldIndex, newIndex);
+			}
+		});
+		initSortable();
+	});
 }
-export {
-  g as initAffixTabs,
-  h as useTabsDrag
-};
+//#endregion
+export { initAffixTabs, useTabsDrag };

package/es/components/multiple-tabs/use/use-tab-dropdown.js

@@ -1,113 +1,107 @@
-import { getRouterKeyPath as a } from "@vft/router";
-import { useMultipleTabStore as S, useTabs as O, isTabPinned as U } from "@vft/store";
-import "@vft/utils";
-import { reactive as q, computed as y } from "vue";
-import "../../context-menu/context-menu.vue2.js";
-import "../../icon/index.js";
-import "vue-router";
-function F(e, o) {
-  const s = q({
-    current: null,
-    currentIndex: 0
-  }), n = S(), {
-    refreshPage: g,
-    closeAll: u,
-    close: h,
-    closeLeft: p,
-    closeOther: f,
-    closeRight: x,
-    newWinTab: b,
-    fullScreen: T,
-    alonePage: C,
-    pinTab: L,
-    unpinTab: v
-  } = O(), D = y(() => {
-    if (!e)
-      return;
-    const { meta: i } = e, t = s.currentIndex, r = U(e), c = !r, l = !!i?.userPinned, w = t === 0 || t <= o, M = n.getTabList.length <= o || t === n.getTabList.length - 1 && n.getLastDragEndIndex >= 0, R = n.getTabList.length === o || n.getTabList.length === o + 1 && t === o, d = n.getTabList.length === o;
-    return [
-      {
-        iconCfg: { icon: "icon-refresh-right" },
-        text: "刷新",
-        handler: () => g(e)
-      },
-      {
-        iconCfg: { icon: "icon-new-tab" },
-        text: "新页面打开",
-        handler: () => b(e),
-        divider: !0
-      },
-      {
-        iconCfg: { icon: "icon-close-tab" },
-        text: "关闭标签页",
-        disabled: r || d,
-        handler: () => h(e)
-      },
-      {
-        iconCfg: { icon: "icon-arrow-close-left" },
-        text: "关闭左侧标签页",
-        disabled: w,
-        handler: () => p(e)
-      },
-      {
-        iconCfg: { icon: "icon-arrow-close-right" },
-        text: "关闭右侧标签页",
-        disabled: M,
-        divider: !0,
-        handler: () => x(e)
-      },
-      {
-        iconCfg: { icon: "icon-close-box-multiple-outline" },
-        text: "关闭其它标签页",
-        disabled: R,
-        handler: () => f(e)
-      },
-      {
-        iconCfg: { icon: "icon-vector-square-delete" },
-        text: "关闭所有标签页",
-        disabled: d,
-        divider: !0,
-        handler: () => u()
-      },
-      {
-        iconCfg: { icon: "icon-full-screen" },
-        text: "全屏",
-        handler: () => T(e)
-      },
-      {
-        iconCfg: { icon: "icon-separate" },
-        text: "独立页面",
-        handler: () => C(e),
-        divider: c || l
-      },
-      ...c ? [
-        {
-          iconCfg: { icon: "icon-tab-pin" },
-          text: "固定",
-          handler: () => L(e)
-        }
-      ] : l ? [
-        {
-          iconCfg: { icon: "icon-tab-unpin" },
-          text: "取消固定",
-          handler: () => v(e)
-        }
-      ] : []
-    ];
-  });
-  function P(i) {
-    return (t) => {
-      if (!i)
-        return;
-      t?.preventDefault();
-      const r = n.getTabList.findIndex(
-        (c) => a(c) === a(i)
-      );
-      s.current = i, s.currentIndex = r;
-    };
-  }
-  return { getDropMenuList: D, handleContextMenu: P };
+import { computed, reactive } from "vue";
+import { getRouterKeyPath } from "@vft/router";
+import { isTabPinned, useMultipleTabStore, useTabs } from "@vft/store";
+//#region ../../packages/components/multiple-tabs/use/use-tab-dropdown.ts
+function useTabDropdown(tabItem, affixNum) {
+	const state = reactive({
+		current: null,
+		currentIndex: 0
+	});
+	const tabStore = useMultipleTabStore();
+	const { refreshPage, closeAll, close, closeLeft, closeOther, closeRight, newWinTab, fullScreen, alonePage, pinTab, unpinTab } = useTabs();
+	/**
+	* @description 多 tab 菜单列表
+	*/
+	const getDropMenuList = computed(() => {
+		if (!tabItem) return;
+		const { meta } = tabItem;
+		const index = state.currentIndex;
+		const pinned = isTabPinned(tabItem);
+		const canPin = !pinned;
+		const canUnpinUser = !!meta?.userPinned;
+		const closeLeftDisabled = index === 0 || index <= affixNum;
+		const closeRightDisabled = tabStore.getTabList.length <= affixNum || index === tabStore.getTabList.length - 1 && tabStore.getLastDragEndIndex >= 0;
+		const closeOtherDisabled = tabStore.getTabList.length === affixNum || tabStore.getTabList.length === affixNum + 1 && index === affixNum;
+		const disabled = tabStore.getTabList.length === affixNum;
+		return [
+			{
+				iconCfg: { icon: "icon-refresh-right" },
+				text: "刷新",
+				handler: () => refreshPage(tabItem)
+			},
+			{
+				iconCfg: { icon: "icon-new-tab" },
+				text: "新页面打开",
+				handler: () => newWinTab(tabItem),
+				divider: true
+			},
+			{
+				iconCfg: { icon: "icon-close-tab" },
+				text: "关闭标签页",
+				disabled: pinned || disabled,
+				handler: () => close(tabItem)
+			},
+			{
+				iconCfg: { icon: "icon-arrow-close-left" },
+				text: "关闭左侧标签页",
+				disabled: closeLeftDisabled,
+				handler: () => closeLeft(tabItem)
+			},
+			{
+				iconCfg: { icon: "icon-arrow-close-right" },
+				text: "关闭右侧标签页",
+				disabled: closeRightDisabled,
+				divider: true,
+				handler: () => closeRight(tabItem)
+			},
+			{
+				iconCfg: { icon: "icon-close-box-multiple-outline" },
+				text: "关闭其它标签页",
+				disabled: closeOtherDisabled,
+				handler: () => closeOther(tabItem)
+			},
+			{
+				iconCfg: { icon: "icon-vector-square-delete" },
+				text: "关闭所有标签页",
+				disabled,
+				divider: true,
+				handler: () => closeAll()
+			},
+			{
+				iconCfg: { icon: "icon-full-screen" },
+				text: "全屏",
+				handler: () => fullScreen(tabItem)
+			},
+			{
+				iconCfg: { icon: "icon-separate" },
+				text: "独立页面",
+				handler: () => alonePage(tabItem),
+				divider: canPin || canUnpinUser
+			},
+			...canPin ? [{
+				iconCfg: { icon: "icon-tab-pin" },
+				text: "固定",
+				handler: () => pinTab(tabItem)
+			}] : canUnpinUser ? [{
+				iconCfg: { icon: "icon-tab-unpin" },
+				text: "取消固定",
+				handler: () => unpinTab(tabItem)
+			}] : []
+		];
+	});
+	function handleContextMenu(tabItem) {
+		return (e) => {
+			if (!tabItem) return;
+			e?.preventDefault();
+			const index = tabStore.getTabList.findIndex((tab) => getRouterKeyPath(tab) === getRouterKeyPath(tabItem));
+			state.current = tabItem;
+			state.currentIndex = index;
+		};
+	}
+	return {
+		getDropMenuList,
+		handleContextMenu
+	};
 }
-export {
-  F as useTabDropdown
-};
+//#endregion
+export { useTabDropdown };