vft 0.0.374 → 0.0.375

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

@@ -1,27 +1,28 @@
-import { defineComponent as S, getCurrentInstance as N, ref as p, computed as g, watchEffect as z, unref as n, onMounted as D, createElementBlock as T, openBlock as x, normalizeStyle as H, normalizeClass as K, createVNode as y, withCtx as C, Fragment as W, renderList as $, createBlock as F } from "vue";
-import { VftTabs as U, VftTabPane as j } from "../tabs/index.js";
-import { isClient as q } from "@vueuse/core";
+import { defineComponent, getCurrentInstance, ref, computed, watchEffect, unref, onMounted, createElementBlock, openBlock, normalizeStyle, normalizeClass, createVNode, withCtx, Fragment, renderList, createBlock } from "vue";
+import { VftTabs, VftTabPane } from "../tabs/index.js";
+import { isClient } from "@vueuse/core";
 import "@vft/utils";
 import "../config-provider/hooks/use-global-config.js";
-import { generateCssVars as R } from "../../utils/ns-cover.js";
+import { generateCssVars } from "../../utils/ns-cover.js";
 import "lodash-es";
-import { useNamespace as G } from "../../hooks/use-namespace/index.js";
+import { useNamespace } from "../../hooks/use-namespace/index.js";
 import "../../hooks/use-model-toggle/index.js";
 import "@popperjs/core";
 import "../../hooks/use-z-index/index.js";
-import { useRouterHelper as J, getRouterKeyPath as f, listenerRouteChange as O } from "@vft/router";
-import { useMultipleTabStore as Q, useTabs as X } from "@vft/store";
-import { useRefs as Y } from "@vft/use";
-import Z from "hotkeys-js";
-import { onBeforeRouteLeave as ee } from "vue-router";
-import te from "./tab-content.vue2.js";
-import { initAffixTabs as ae, useTabsDrag as ne } from "./use/use-multiple-tabs.js";
+import { useRouterHelper, getRouterKeyPath, listenerRouteChange } from "@vft/router";
+import { useMultipleTabStore, useTabs } from "@vft/store";
+import { useRefs } from "@vft/use";
+import hotkeys from "hotkeys-js";
+import { onBeforeRouteLeave } from "vue-router";
+import _sfc_main$1 from "./tab-content.vue2.js";
+import { initAffixTabs, useTabsDrag } from "./use/use-multiple-tabs.js";
 import "../context-menu/context-menu.vue2.js";
 import "../icon/index.js";
-const oe = S({
+const __default__ = defineComponent({
   name: "vft-multiple-tabs"
-}), Pe = /* @__PURE__ */ S({
-  ...oe,
+});
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  ...__default__,
   props: {
     tabsStyle: {},
     contextMenuStyle: {},
@@ -29,111 +30,163 @@ const oe = S({
     fixTabCount: {},
     fixExtraScrollWidth: {}
   },
-  setup(m) {
-    const _ = G("multiple-tabs"), r = N().appContext.config.globalProperties.$router, s = ae(r), u = Q(), o = p(""), i = p(0), d = p(), { go: b } = J(r), c = g(() => u.getTabList.filter((e) => !e.meta?.hideTab));
-    z(() => {
-      if (o.value) {
-        const e = c.value.findIndex((a) => f(a) === o.value);
-        e === -1 ? i.value = c.value?.length - 1 : i.value = e, i.value = i.value < s?.length ? s?.length - 1 : i.value;
+  setup(__props) {
+    const ns = useNamespace("multiple-tabs");
+    const instance = getCurrentInstance();
+    const _router = instance.appContext.config.globalProperties.$router;
+    const affixList = initAffixTabs(_router);
+    const tabStore = useMultipleTabStore();
+    const activePathRef = ref("");
+    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 < affixList?.length ? affixList?.length - 1 : activeIndex.value;
       }
-    }), q && ee(() => {
-      d.value = n(r.currentRoute);
-    }), O(({ route: e }) => {
-      if (!e || e.meta?.hasTokenToRoot)
+    });
+    if (isClient) {
+      onBeforeRouteLeave(() => {
+        fromRoute.value = unref(_router.currentRoute);
+      });
+    }
+    listenerRouteChange(({ route }) => {
+      if (!route || route.meta?.hasTokenToRoot) {
         return;
-      const { meta: a = {} } = e, { currentActivePath: t, hideTab: l } = a, I = l ? t : null, h = f(e);
-      if (o.value !== h && (o.value = h), I) {
-        let v = r.getRoutes().find((L) => L.path === t);
-        v && u.addTab(
-          v,
-          n(d),
-          i.value,
-          e
+      }
+      const { meta = {} } = route;
+      const { currentActivePath, hideTab } = meta;
+      const isHide = !hideTab ? null : currentActivePath;
+      const activePath = getRouterKeyPath(route);
+      if (activePathRef.value !== activePath) {
+        activePathRef.value = activePath;
+      }
+      if (isHide) {
+        let findParentRoute = _router.getRoutes().find((item) => item.path === currentActivePath);
+        findParentRoute && tabStore.addTab(
+          findParentRoute,
+          unref(fromRoute),
+          activeIndex.value,
+          route
         );
-      } else
-        u.addTab(n(e), n(d), i.value);
+      } else {
+        tabStore.addTab(unref(route), unref(fromRoute), activeIndex.value);
+      }
     });
-    function P(e) {
-      if (o.value === e.paneName)
+    function handleClick(pane) {
+      if (activePathRef.value === pane.paneName) {
         return;
-      const a = c.value[e.attrs.index];
-      o.value = e.paneName;
-      const t = a?.meta?.hideActiveRoute?.fullPath;
-      b(t || a.fullPath || a.path);
+      }
+      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 k(e) {
-      u.closeTabByKey(e, r);
+    function handleRemove(targetPath) {
+      tabStore.closeTabByKey(targetPath, _router);
     }
-    const { refs: w, setRefs: M } = Y();
-    function V(e) {
-      const a = e.pane.attrs.index, t = e.event;
-      w.value[a].handleContext(t);
+    const { refs, setRefs } = useRefs();
+    function handleContextMenu(data) {
+      const _index = data.pane.attrs.index;
+      const _event = data.event;
+      refs.value[_index].handleContext(_event);
     }
-    const B = g(() => ({ ...R({
-      padding: "4px 0 0",
-      "border-bottom": "none",
-      "header-height": "26px",
-      "font-size": "13px",
-      "item-padding": "0 10px",
-      "close-icon-left": "8px",
-      "item-distance": "1px",
-      "item-max-width": "180px",
-      "scroll-padding": "0 20px",
-      "header-margin": "0 0 0 8px",
-      "item-border-radius": "5px 5px 0 0",
-      "item-border": "none"
-    }, "tabs"), ...m.tabsStyle })), { closeCurrent: A } = X(), E = {
-      ...R(
+    const _tabsStyle = computed(() => {
+      let initTabStyle = {
+        padding: "4px 0 0",
+        "border-bottom": "none",
+        "header-height": "26px",
+        "font-size": "13px",
+        "item-padding": "0 10px",
+        "close-icon-left": "8px",
+        "item-distance": "1px",
+        "item-max-width": "180px",
+        "scroll-padding": "0 20px",
+        "header-margin": "0 0 0 8px",
+        "item-border-radius": "5px 5px 0 0",
+        "item-border": "none"
+      };
+      return { ...generateCssVars(initTabStyle, "tabs"), ...__props.tabsStyle };
+    });
+    const { closeCurrent } = useTabs();
+    const _contextMenuStyle = {
+      ...generateCssVars(
         {
           "sub-item-height": "40px",
           "item-min-width": "150px"
         },
         "menu"
       ),
-      ...m.contextMenuStyle
+      ...__props.contextMenuStyle
     };
-    return D(() => {
-      m.canDrag && ne(s), Z("command+e, ctrl+e", function() {
-        return A(), !1;
+    onMounted(() => {
+      if (__props.canDrag) {
+        useTabsDrag(affixList);
+      }
+      hotkeys("command+e, ctrl+e", function() {
+        closeCurrent();
+        return false;
       });
-    }), (e, a) => (x(), T("div", {
-      class: K(n(_).b()),
-      style: H(B.value)
-    }, [
-      y(n(U), {
-        "show-bar": !1,
-        "fix-tab-count": e.fixTabCount,
-        "fix-extra-scroll-width": e.fixExtraScrollWidth,
-        modelValue: o.value,
-        "onUpdate:modelValue": a[0] || (a[0] = (t) => o.value = t),
-        onTabClick: P,
-        onTabRemove: k,
-        onTabContextMenu: V
-      }, {
-        default: C(() => [
-          (x(!0), T(W, null, $(c.value, (t, l) => (x(), F(n(j), {
-            key: n(f)(t) + l,
-            closable: !t.meta?.affix,
-            index: l,
-            name: n(f)(t)
-          }, {
-            label: C(() => [
-              y(te, {
-                "context-menu-style": E,
-                "affix-num": n(s)?.length,
-                ref_for: !0,
-                ref: n(M)(l),
-                "tab-item": t
-              }, null, 8, ["affix-num", "tab-item"])
-            ]),
-            _: 2
-          }, 1032, ["closable", "index", "name"]))), 128))
-        ]),
-        _: 1
-      }, 8, ["fix-tab-count", "fix-extra-scroll-width", "modelValue"])
-    ], 6));
+    });
+    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": _ctx.fixTabCount,
+          "fix-extra-scroll-width": _ctx.fixExtraScrollWidth,
+          modelValue: activePathRef.value,
+          "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => activePathRef.value = $event),
+          onTabClick: handleClick,
+          onTabRemove: handleRemove,
+          onTabContextMenu: handleContextMenu
+        }, {
+          default: withCtx(() => [
+            (openBlock(true), createElementBlock(Fragment, null, renderList(getTabsState.value, (item, index) => {
+              return openBlock(), createBlock(unref(VftTabPane), {
+                key: unref(getRouterKeyPath)(item) + index,
+                closable: !item.meta?.affix,
+                index,
+                name: unref(getRouterKeyPath)(item)
+              }, {
+                label: withCtx(() => [
+                  createVNode(_sfc_main$1, {
+                    "context-menu-style": _contextMenuStyle,
+                    "affix-num": unref(affixList)?.length,
+                    ref_for: true,
+                    ref: unref(setRefs)(index),
+                    "tab-item": item
+                  }, null, 8, ["affix-num", "tab-item"])
+                ]),
+                _: 2
+              }, 1032, ["closable", "index", "name"]);
+            }), 128))
+          ]),
+          _: 1
+        }, 8, ["fix-tab-count", "fix-extra-scroll-width", "modelValue"])
+      ], 6);
+    };
   }
 });
 export {
-  Pe as default
+  _sfc_main as default
 };

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

@@ -1,4 +1,4 @@
-import f from "./tab-content.vue2.js";
+import _sfc_main from "./tab-content.vue2.js";
 export {
-  f as default
+  _sfc_main as default
 };

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

@@ -1,14 +1,14 @@
-import { defineComponent as l, computed as i, createBlock as f, openBlock as s, unref as x, withModifiers as b } from "vue";
-import { singleAttrToObj as p } from "@vft/utils";
+import { defineComponent, computed, createBlock, openBlock, unref, withModifiers } from "vue";
+import { singleAttrToObj } from "@vft/utils";
 import "../context-menu/context-menu.vue2.js";
 import "../icon/index.js";
-import { useContextMenu as I } from "../context-menu/useContextMenu.js";
-import { VftIconText as d } from "../icon-text/index.js";
+import { useContextMenu } from "../context-menu/useContextMenu.js";
+import { VftIconText } from "../icon-text/index.js";
 import "vue-router";
 import "@vft/store";
 import "@vft/use/sortable";
-import { useTabDropdown as v } from "./use/use-tab-dropdown.js";
-const S = /* @__PURE__ */ l({
+import { useTabDropdown } from "./use/use-tab-dropdown.js";
+const _sfc_main = /* @__PURE__ */ defineComponent({
   __name: "tab-content",
   props: {
     tabItem: {},
@@ -16,29 +16,40 @@ const S = /* @__PURE__ */ l({
     contextMenuStyle: {},
     visible: { type: Boolean }
   },
-  setup(t, { expose: m }) {
-    const [a] = I(), n = i(() => t.tabItem.meta && t.tabItem.meta.title), r = i(() => p(t.tabItem.meta?.icon, "icon")), { getDropMenuList: u, handleContextMenu: c } = v(
-      t.tabItem,
-      t.affixNum
+  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 o(e) {
-      c(t.tabItem)(e), a({
+    function handleContext(e) {
+      handleContextMenu(__props.tabItem)(e);
+      createContextMenu({
         event: e,
-        styles: t.contextMenuStyle,
-        items: u.value
+        styles: __props.contextMenuStyle,
+        items: getDropMenuList.value
       });
     }
-    return m({
-      handleContext: o
-    }), (e, M) => (s(), f(x(d), {
-      class: "vft-multiple-tabs__title",
-      title: n.value,
-      icon: r.value,
-      text: n.value,
-      onContextmenu: b(o, ["stop"])
-    }, null, 8, ["title", "icon", "text"]));
+    __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"]);
+    };
   }
 });
 export {
-  S as default
+  _sfc_main as default
 };

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

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

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

@@ -1,48 +1,63 @@
-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;
+import { useMultipleTabStore } from "@vft/store";
+import { useSortable } from "@vft/use/sortable";
+import { isNullOrUndefined, arrSort } from "@vft/utils";
+import { ref, nextTick, toRaw } from "vue";
+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 r() {
-    const t = i(o.getRoutes());
-    b(t, ["meta", "order"]), n.value = t;
-    for (const a of t)
-      f.addTab({
-        meta: a.meta,
-        name: a.name,
-        path: a.path
+  function addAffixTabs() {
+    const affixTabs = filterAffixTabs(router.getRoutes());
+    arrSort(affixTabs, ["meta", "order"]);
+    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;
   }
-  let e = !1;
-  return e || (r(), e = !0), n.value.map((t) => t.meta?.title).filter(Boolean);
+  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, {
+function useTabsDrag(affixTextList) {
+  const tabStore = useMultipleTabStore();
+  nextTick(() => {
+    const el = document.querySelectorAll(".vft-tabs__nav")?.[0];
+    const { initSortable } = useSortable(el, {
       draggable: ".is-closable",
       // forceFallback: true,
       // fallbackClass: 'sortable-fallback',
-      filter: (r) => {
-        const e = r?.target?.innerText;
-        return e ? o.includes(e) : !1;
+      filter: (e) => {
+        const text = e?.target?.innerText;
+        if (!text) return false;
+        return affixTextList.includes(text);
       },
-      onEnd: (r) => {
-        const { oldIndex: e, newIndex: t } = r;
-        l(e) || l(t) || e === t || n.sortTabs(e, t);
+      onEnd: (evt) => {
+        const { oldIndex, newIndex } = evt;
+        if (isNullOrUndefined(oldIndex) || isNullOrUndefined(newIndex) || oldIndex === newIndex) {
+          return;
+        }
+        tabStore.sortTabs(oldIndex, newIndex);
       }
     });
-    i();
+    initSortable();
   });
 }
 export {
-  g as initAffixTabs,
-  h as useTabsDrag
+  initAffixTabs,
+  useTabsDrag
 };

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

@@ -1,84 +1,96 @@
-import { getRouterKeyPath as d } from "@vft/router";
-import { useMultipleTabStore as C, useTabs as D } from "@vft/store";
+import { getRouterKeyPath } from "@vft/router";
+import { useMultipleTabStore, useTabs } from "@vft/store";
 import "@vft/utils";
-import { reactive as v, computed as w } from "vue";
+import { reactive, computed } from "vue";
 import "../../context-menu/context-menu.vue2.js";
 import "../../icon/index.js";
 import "vue-router";
-function E(e, n) {
-  const i = v({
+function useTabDropdown(tabItem, affixNum) {
+  const state = reactive({
     current: null,
     currentIndex: 0
-  }), t = C(), {
-    refreshPage: a,
-    closeAll: g,
-    close: u,
-    closeLeft: h,
-    closeOther: p,
-    closeRight: b,
-    newWinTab: f
-  } = D(), x = w(() => {
-    if (!e)
+  });
+  const tabStore = useMultipleTabStore();
+  const {
+    refreshPage,
+    closeAll,
+    close,
+    closeLeft,
+    closeOther,
+    closeRight,
+    newWinTab
+  } = useTabs();
+  const getDropMenuList = computed(() => {
+    if (!tabItem) {
       return;
-    const { meta: r } = e, o = i.currentIndex, c = o === 0 || o <= n, s = t.getTabList.length <= n || o === t.getTabList.length - 1 && t.getLastDragEndIndex >= 0, T = t.getTabList.length === n || t.getTabList.length === n + 1 && o === n, l = t.getTabList.length === n;
-    return [
+    }
+    const { meta } = tabItem;
+    const index = state.currentIndex;
+    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;
+    const dropMenuList = [
       {
         iconCfg: { icon: "icon-refresh-right" },
         text: "刷新",
-        handler: () => a(e)
+        handler: () => refreshPage(tabItem)
       },
       {
         iconCfg: { icon: "icon-new-tab" },
         text: "新页面打开",
-        handler: () => f(e),
-        divider: !0
+        handler: () => newWinTab(tabItem),
+        divider: true
       },
       {
         iconCfg: { icon: "icon-close-tab" },
         text: "关闭标签页",
-        disabled: !!r?.affix || l,
-        handler: () => u(e)
+        disabled: !!meta?.affix || disabled,
+        handler: () => close(tabItem)
       },
       {
         iconCfg: { icon: "icon-arrow-close-left" },
         text: "关闭左侧标签页",
-        disabled: c,
-        handler: () => h(e)
+        disabled: closeLeftDisabled,
+        handler: () => closeLeft(tabItem)
       },
       {
         iconCfg: { icon: "icon-arrow-close-right" },
         text: "关闭右侧标签页",
-        disabled: s,
-        divider: !0,
-        handler: () => b(e)
+        disabled: closeRightDisabled,
+        divider: true,
+        handler: () => closeRight(tabItem)
       },
       {
         iconCfg: { icon: "icon-close-box-multiple-outline" },
         text: "关闭其它标签页",
-        disabled: T,
-        handler: () => p(e)
+        disabled: closeOtherDisabled,
+        handler: () => closeOther(tabItem)
       },
       {
         iconCfg: { icon: "icon-vector-square-delete" },
         text: "关闭所有标签页",
-        disabled: l,
-        handler: () => g()
+        disabled,
+        handler: () => closeAll()
       }
     ];
+    return dropMenuList;
   });
-  function L(r) {
-    return (o) => {
-      if (!r)
+  function handleContextMenu(tabItem2) {
+    return (e) => {
+      if (!tabItem2) {
         return;
-      o?.preventDefault();
-      const c = t.getTabList.findIndex(
-        (s) => d(s) === d(r)
+      }
+      e?.preventDefault();
+      const index = tabStore.getTabList.findIndex(
+        (tab) => getRouterKeyPath(tab) === getRouterKeyPath(tabItem2)
       );
-      i.current = r, i.currentIndex = c;
+      state.current = tabItem2;
+      state.currentIndex = index;
     };
   }
-  return { getDropMenuList: x, handleContextMenu: L };
+  return { getDropMenuList, handleContextMenu };
 }
 export {
-  E as useTabDropdown
+  useTabDropdown
 };