jky-component-lib 0.0.73 → 0.0.77

package/dist/lib/tabs/Tabs.vue.js

@@ -1,311 +1,132 @@
 "use strict";
-var __defProp = Object.defineProperty;
-var __defProps = Object.defineProperties;
-var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
-var __getOwnPropSymbols = Object.getOwnPropertySymbols;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __propIsEnum = Object.prototype.propertyIsEnumerable;
-var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues = (a, b) => {
-  for (var prop in b || (b = {}))
-    if (__hasOwnProp.call(b, prop))
-      __defNormalProp(a, prop, b[prop]);
-  if (__getOwnPropSymbols)
-    for (var prop of __getOwnPropSymbols(b)) {
-      if (__propIsEnum.call(b, prop))
-        __defNormalProp(a, prop, b[prop]);
-    }
-  return a;
-};
-var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
 Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
 const vue = require("vue");
-const ElementPlus = require("element-plus");
 const vueRouter = require("vue-router");
-const routeListener = require("./routeListener.js");
-const TabContent_vue_vue_type_script_setup_true_lang = require("./TabContent.vue.js");
-;/* empty css                 */
-const useTabsStore = require("./useTabsStore.js");
-const _sfc_main = /* @__PURE__ */ vue.defineComponent(__spreadProps(__spreadValues({}, {
-  name: "JkyTabs",
-  inheritAttrs: false
-}), {
+const ContextMenu_vue_vue_type_script_setup_true_lang = require("./ContextMenu.vue.js");
+;/* empty css                  */
+const _hoisted_1 = { class: "flex items-center jky-tabs-__item-label" };
+const _sfc_main = /* @__PURE__ */ vue.defineComponent({
   __name: "Tabs",
   props: {
-    mode: { default: "default" },
+    mode: { default: "route" },
     cachable: { type: Boolean, default: true },
-    maxCacheSize: { default: 0 },
-    className: {},
-    tabStyle: { default: () => ({}) },
-    tabs: { default: () => [] },
-    persist: { type: Boolean },
-    persistKey: {},
-    type: {},
-    closable: { type: Boolean },
-    addable: { type: Boolean },
-    modelValue: {},
-    defaultValue: {},
-    editable: { type: Boolean },
-    tabPosition: {},
-    beforeLeave: {},
-    stretch: { type: Boolean },
-    tabindex: {}
+    closable: { type: Boolean, default: true },
+    round: { type: Boolean, default: false },
+    contextMenu: { type: Boolean, default: true },
+    store: {}
   },
-  emits: ["tabClick", "tabRemove", "edit", "routeChange", "tabClose", "update:modelValue"],
-  setup(__props, { expose: __expose, emit: __emit }) {
+  setup(__props) {
     const props = __props;
-    const emit = __emit;
-    const attrs = vue.useAttrs();
-    const router = vue.inject(vueRouter.routerKey, null);
-    const store = useTabsStore.createTabsStore(props.persist, props.persistKey);
-    const closedTabs = vue.shallowRef(/* @__PURE__ */ new Set());
-    const tabStyleVars = vue.computed(() => {
-      var _a, _b, _c, _d;
-      const styles = {};
-      if ((_a = props.tabStyle) == null ? void 0 : _a.color)
-        styles["--jky-tabs-color"] = props.tabStyle.color;
-      if ((_b = props.tabStyle) == null ? void 0 : _b.activeColor)
-        styles["--jky-tabs-active-color"] = props.tabStyle.activeColor;
-      if ((_c = props.tabStyle) == null ? void 0 : _c.height)
-        styles["--jky-tabs-height"] = props.tabStyle.height;
-      if ((_d = props.tabStyle) == null ? void 0 : _d.fontSize)
-        styles["--jky-tabs-font-size"] = props.tabStyle.fontSize;
-      return styles;
-    });
-    const tabsClass = vue.computed(() => {
-      return [
-        "jky-tabs",
-        props.mode === "route" && "jky-tabs--route",
-        props.className,
-        attrs.class
-      ].filter(Boolean).join(" ");
-    });
-    const EL_TABS_PROPS = [
-      "type",
-      "closable",
-      "addable",
-      "modelValue",
-      "editable",
-      "tabPosition",
-      "stretch"
-    ];
-    const elTabsProps = vue.computed(() => {
-      const elProps = {};
-      Object.keys(props).forEach((key) => {
-        if (EL_TABS_PROPS.includes(key)) {
-          elProps[key] = props[key];
-        }
+    const router = vueRouter.useRouter();
+    vue.onMounted(() => {
+      props.store.loadFromCache();
+      router.afterEach((to) => {
+        props.store.addTab(to);
       });
-      return __spreadValues({}, elProps);
+      props.store.addTab(router.currentRoute.value);
     });
-    function initRouteTabs() {
-      var _a;
-      if (!router) {
-        console.warn("JkyTabs: route mode requires router instance. Please provide router via provide/inject.");
-        return;
-      }
-      const route = router.currentRoute.value;
-      console.warn("initRouteTabs debug:", {
-        hasRouter: !!router,
-        currentRoute: {
-          name: route.name,
-          path: route.path,
-          meta: route.meta
-        },
-        cachable: props.cachable,
-        cacheTabs: store.cacheTabs
-      });
-      if (route.name) {
-        store.setActiveTab(route.name);
-      }
-      if (props.cachable && store.cacheTabs.length > 0) {
-        const routes = router.getRoutes();
-        const routeMap = new Map(routes.map((route2) => [route2.name, route2]));
-        store.cacheTabs.forEach((cachedName) => {
-          var _a2;
-          const route2 = routeMap.get(cachedName);
-          if ((_a2 = route2 == null ? void 0 : route2.meta) == null ? void 0 : _a2.title) {
-            const tabItem = {
-              name: cachedName,
-              label: route2.meta.title,
-              closable: route2.meta.closable !== false,
-              icon: route2.meta.icon,
-              affix: route2.meta.affix,
-              route: {
-                path: route2.path,
-                name: cachedName,
-                component: route2.components ? vue.markRaw(Object.values(route2.components)[0]) : void 0,
-                meta: route2.meta
-              }
-            };
-            store.addTab(tabItem);
-          }
-        });
-      }
-      if (route.name && ((_a = route.meta) == null ? void 0 : _a.title)) {
-        if (!props.cachable || !store.isCached(route.name)) {
-          const routes = router.getRoutes();
-          const foundRoute = routes.find((r) => r.name === route.name);
-          const tabItem = {
-            name: route.name,
-            label: route.meta.title,
-            closable: route.meta.closable !== false,
-            icon: route.meta.icon,
-            affix: route.meta.affix,
-            route: {
-              path: route.path,
-              name: route.name,
-              component: (foundRoute == null ? void 0 : foundRoute.components) ? vue.markRaw(Object.values(foundRoute.components)[0]) : void 0,
-              meta: route.meta
-            }
-          };
-          store.addTab(tabItem);
-        }
-        if (props.cachable) {
-          store.addCache(route.name);
+    const activeTabPath = vue.computed({
+      get: () => {
+        var _a;
+        return ((_a = props.store) == null ? void 0 : _a.activeTabFullPath) || "";
+      },
+      set: (val) => {
+        if (val && props.store) {
+          props.store.setActiveTab(val);
+          router.push(val);
         }
       }
+    });
+    function handleTabClick(pane) {
+      const fullPath = pane.paneName;
+      if (fullPath && fullPath !== activeTabPath.value) {
+        router.push(fullPath);
+      }
     }
-    function handleTabChange(pane) {
-      var _a;
-      const newTabName = ((_a = pane.props) == null ? void 0 : _a.name) || pane.name;
-      store.setActiveTab(newTabName);
-      emit("update:modelValue", newTabName);
-      if (props.mode === "route" && router) {
-        const tab = store.tabList.find((t) => t.name === newTabName);
-        if (tab == null ? void 0 : tab.route) {
-          router.push(tab.route.path);
-          emit("routeChange", tab.route);
-          if (props.cachable) {
-            store.addCache(newTabName);
-          }
-        }
+    function handleTabChange(fullPath) {
+      if (fullPath && fullPath !== activeTabPath.value) {
+        router.push(fullPath);
       }
-      emit("tabClick", pane);
     }
-    function handleCloseTab(tabName) {
-      const name = String(tabName);
-      if (!name)
+    function handleTabRemove(fullPath) {
+      if (!props.store) {
         return;
-      if (props.mode === "route") {
-        store.removeTab(name);
-      } else {
-        closedTabs.value = /* @__PURE__ */ new Set([...closedTabs.value, name]);
-        if (store.activeTab === name && props.tabs && props.tabs.length > 0) {
-          const currentIndex = props.tabs.findIndex((tab) => tab.name === name);
-          const availableTabs = props.tabs.filter((tab) => !closedTabs.value.has(tab.name));
-          if (availableTabs.length > 0) {
-            const nextTab = availableTabs[currentIndex] || availableTabs[currentIndex - 1];
-            if (nextTab) {
-              store.setActiveTab(nextTab.name);
-              emit("update:modelValue", nextTab.name);
-            }
-          }
-        }
       }
-      emit("tabClose", name);
-      emit("tabRemove", name);
-    }
-    function handleAddTab() {
-      emit("edit", void 0, "add");
-    }
-    function isClosed(name) {
-      return closedTabs.value.has(name);
-    }
-    function closeTab(tabName) {
-      handleCloseTab(tabName);
-    }
-    function closeOthers(tabName) {
-      store.closeOther(tabName);
-    }
-    function closeAll() {
-      store.closeAll();
-    }
-    function refreshTab(tabName) {
-      store.refresh(tabName);
-    }
-    function getCachedTabs() {
-      return store.getCacheTabs();
-    }
-    function getTabList() {
-      return store.getTabList();
-    }
-    function getActiveTab() {
-      return store.activeTab;
-    }
-    if (props.mode === "route") {
-      routeListener.onRouteChange((route) => {
-        if (route.name) {
-          store.setActiveTab(route.name);
-          if (props.cachable) {
-            store.addCache(route.name);
-          }
-        }
-      }, true);
+      const currentActivePath = props.store.activeTabFullPath;
+      const nextActivePath = props.store.closeTab(fullPath, currentActivePath);
+      if (nextActivePath) {
+        router.push(nextActivePath);
+      }
     }
-    vue.onMounted(() => {
-      if (props.mode === "route") {
-        initRouteTabs();
+    function handleContextMenuCommand({ key, tab }) {
+      if (!props.store)
+        return;
+      switch (key) {
+        case "refresh":
+          router.push(tab.fullPath);
+          break;
+        case "closeCurrent":
+          handleTabRemove(tab.fullPath);
+          break;
+        case "closeOthers":
+          props.store.closeOthers(tab.fullPath);
+          router.push(tab.fullPath);
+          break;
       }
-    });
-    __expose({
-      closeTab,
-      closeOthers,
-      closeAll,
-      refreshTab,
-      getCachedTabs,
-      getTabList,
-      getActiveTab
-    });
-    vue.provide("tabsContext", {
-      mode: props.mode,
-      cachable: props.cachable,
-      activeTab: vue.computed(() => store.activeTab),
-      cachedTabs: vue.shallowRef(new Set(store.getCacheTabs())),
-      cachedComponents: vue.shallowRef(/* @__PURE__ */ new Map())
-    });
+    }
     return (_ctx, _cache) => {
-      return vue.openBlock(), vue.createBlock(vue.unref(ElementPlus.ElTabs), vue.mergeProps({
-        "model-value": vue.unref(store).activeTab
-      }, elTabsProps.value, {
-        class: tabsClass.value,
-        style: tabStyleVars.value,
-        onTabClick: handleTabChange,
-        onTabRemove: handleCloseTab,
-        onEdit: handleCloseTab,
-        onTabAdd: handleAddTab
-      }), {
-        default: vue.withCtx(() => [
-          vue.renderSlot(_ctx.$slots, "default", {}, () => [
-            __props.mode === "route" ? (vue.openBlock(true), vue.createElementBlock(vue.Fragment, { key: 0 }, vue.renderList(vue.unref(store).tabList, (tab) => {
-              return vue.openBlock(), vue.createBlock(vue.unref(ElementPlus.ElTabPane), {
-                key: tab.name,
-                name: tab.name,
-                closable: tab.closable
-              }, {
-                label: vue.withCtx(() => [
-                  vue.createVNode(TabContent_vue_vue_type_script_setup_true_lang.default, { tab }, null, 8, ["tab"])
-                ]),
-                _: 2
-              }, 1032, ["name", "closable"]);
-            }), 128)) : __props.tabs && __props.tabs.length > 0 ? (vue.openBlock(true), vue.createElementBlock(vue.Fragment, { key: 1 }, vue.renderList(__props.tabs, (tab) => {
-              return vue.openBlock(), vue.createBlock(vue.unref(ElementPlus.ElTabPane), {
-                key: tab.name,
-                name: tab.name,
-                closable: tab.closable,
-                style: vue.normalizeStyle({ display: isClosed(tab.name) ? "none" : "" })
+      var _a;
+      const _component_el_tab_pane = vue.resolveComponent("el-tab-pane");
+      const _component_el_tabs = vue.resolveComponent("el-tabs");
+      return vue.openBlock(), vue.createBlock(_component_el_tabs, {
+        "model-value": activeTabPath.value,
+        type: "card",
+        closable: __props.closable,
+        class: vue.normalizeClass(["jky-tabs", { "jky-tabs-round": (_a = __props.round) != null ? _a : _ctx.$attrs.round }]),
+        onTabClick: handleTabClick,
+        onTabRemove: handleTabRemove,
+        "onUpdate:modelValue": handleTabChange
+      }, {
+        default: vue.withCtx(() => {
+          var _a2;
+          return [
+            (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList((_a2 = props.store) == null ? void 0 : _a2.tabs, (tab) => {
+              return vue.openBlock(), vue.createBlock(_component_el_tab_pane, {
+                key: tab.fullPath,
+                label: tab.title,
+                name: tab.fullPath,
+                closable: __props.closable && props.store && props.store.tabs.length > 1
               }, {
-                label: vue.withCtx(() => [
-                  vue.createVNode(TabContent_vue_vue_type_script_setup_true_lang.default, { tab }, null, 8, ["tab"])
-                ]),
+                label: vue.withCtx(() => {
+                  var _a3;
+                  return [
+                    vue.createVNode(ContextMenu_vue_vue_type_script_setup_true_lang.default, {
+                      tab,
+                      "is-active": tab.fullPath === activeTabPath.value,
+                      "is-only-tab": ((_a3 = props.store) == null ? void 0 : _a3.tabs.length) === 1,
+                      onCommand: handleContextMenuCommand
+                    }, {
+                      default: vue.withCtx(() => [
+                        vue.createElementVNode("div", _hoisted_1, [
+                          tab.icon ? (vue.openBlock(), vue.createElementBlock("span", {
+                            key: 0,
+                            class: vue.normalizeClass(["mr-1 text-lg", tab.icon])
+                          }, null, 2)) : vue.createCommentVNode("", true),
+                          vue.createElementVNode("span", null, vue.toDisplayString(tab.title), 1)
+                        ])
+                      ]),
+                      _: 2
+                    }, 1032, ["tab", "is-active", "is-only-tab"])
+                  ];
+                }),
                 _: 2
-              }, 1032, ["name", "closable", "style"]);
-            }), 128)) : vue.createCommentVNode("", true)
-          ])
-        ]),
-        _: 3
-      }, 16, ["model-value", "class", "style"]);
+              }, 1032, ["label", "name", "closable"]);
+            }), 128))
+          ];
+        }),
+        _: 1
+      }, 8, ["model-value", "closable", "class"]);
     };
   }
-}));
+});
 exports.default = _sfc_main;

package/dist/lib/tabs/config.d.ts

@@ -0,0 +1,2 @@
+import { TabsConfig } from './types';
+export declare const defaultTabsConfig: TabsConfig;

package/dist/lib/tabs/config.js

@@ -0,0 +1,8 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const defaultTabsConfig = {
+  enableCache: false,
+  storageType: "localStorage",
+  storageKey: "jky-app-tabs"
+};
+exports.defaultTabsConfig = defaultTabsConfig;

package/dist/lib/tabs/createTabsGuard.d.ts

@@ -0,0 +1,5 @@
+import { Router } from 'vue-router';
+import { TabsConfig } from './types';
+export declare function createTabsGuard(router: Router, config?: Partial<TabsConfig>): {
+    syncCurrentRoute: () => void;
+};

package/dist/lib/tabs/createTabsGuard.js

@@ -0,0 +1,18 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const useTabsStore = require("./useTabsStore.js");
+function createTabsGuard(router, config) {
+  const { useTabsStore: useTabsStore$1 } = useTabsStore.createTabsStore(config);
+  const tabsStore = useTabsStore$1();
+  tabsStore.loadFromCache();
+  router.afterEach((to) => {
+    tabsStore.addTab(to);
+  });
+  return {
+    syncCurrentRoute: () => {
+      const currentRoute = router.currentRoute.value;
+      tabsStore.addTab(currentRoute);
+    }
+  };
+}
+exports.createTabsGuard = createTabsGuard;

package/dist/lib/tabs/index.d.ts

@@ -1,9 +1,7 @@
-import { InstallWithSFC } from '../utils';
+import { InstallWithSFC } from '../utils/types';
 import { default as Tabs } from './Tabs.vue';
+export { createTabsGuard } from './createTabsGuard';
+export type { TabItem, TabsConfig, TabsContextMenuEmits, TabsContextMenuItem, TabsContextMenuProps, TabsProps, TabsStoreActions, TabsStoreState, } from './types';
+export { createTabsStore } from './useTabsStore';
 export declare const JkyTabs: InstallWithSFC<typeof Tabs>;
 export default JkyTabs;
-export { clearRouteListeners, emitRouteChange, onRouteChange } from './routeListener';
-export { default as JkyTabContent } from './TabContent.vue';
-export type * from './types';
-export { useTabs } from './useTabs';
-export { createTabsStore, resetTabsStore, useTabsStore } from './useTabsStore';

package/dist/lib/tabs/index.js

@@ -1,8 +1,8 @@
 "use strict";
 Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
+const withInstall = require("../utils/with-install.js");
 const Tabs_vue_vue_type_script_setup_true_lang = require("./Tabs.vue.js");
 ;/* empty css           */
-const withInstall = require("../utils/with-install.js");
 const JkyTabs = withInstall.installWithSFC(Tabs_vue_vue_type_script_setup_true_lang.default);
 exports.JkyTabs = JkyTabs;
 exports.default = JkyTabs;

package/dist/lib/tabs/style.css

@@ -1,29 +1,43 @@
 /* Tabs 组件样式 */
 .jky-tabs {
-  --jky-tabs-color: var(--el-text-color-regular);
-  --jky-tabs-active-color: var(--el-color-primary);
-  --jky-tabs-height: 40px;
-  --jky-tabs-font-size: 14px;
-.el-tabs__item {
-    color: var(--jky-tabs-color);
-    font-size: var(--jky-tabs-font-size);
-    height: var(--jky-tabs-height);
-    line-height: var(--jky-tabs-height);
-&.is-active {
-      color: var(--jky-tabs-active-color);
+  /* Tabs 组件样式定义 */
+.el-tabs__content {
+    display: none;
 }
+.el-tabs__header {
+    margin-bottom: 0;
 }
-.el-tabs__active-bar {
-    background-color: var(--jky-tabs-active-color);
 }
+/* Tabs 圆角样式 */
+.jky-tabs-round {
+  --el-tabs-header-height: 32px;
+  --el-tabs-item-background: white;
+  --el-tabs-active-item-background: var(--el-color-primary);
+.el-tabs__header {
+    --el-border-color-light: transparent;
 }
-/* 路由模式下的特殊样式 */
-.jky-tabs--route {
 .el-tabs__item {
-&.is-closable:hover {
-.el-tabs__item__close {
-        opacity: 1;
+    border-radius: 999px;
+    margin-left: 1rem;
+    background-color: var(--el-tabs-item-background);
+.jky-tabs-__item-label {
+      /* Tabs 项标签样式定义 */
+}
+&.is-active {
+      background-color: var(--el-tabs-active-item-background);
+.jky-tabs-__item-label {
+        color: var(--el-color-white);
+}
+.el-icon {
+        color: var(--el-color-white);
+}
+}
+&.first-child {
+      margin-left: 0;
 }
 }
 }
+/* 右键菜单样式 */
+.jky-tabs-context-menu {
+  display: inline-block;
 }

package/dist/lib/tabs/useTabsStore.d.ts

@@ -1,53 +1,6 @@
-import { TabItem } from './types';
-/**
- * Tabs Store 返回类型
- * 注意：Pinia 会自动解包 Ref，所以这里使用 UnwrapRef
- */
-export interface TabsStoreReturn {
-    tabList: TabItem[];
-    activeTab: string;
-    cacheTabs: string[];
-    closedTabs: string[];
-    addTab: (tab: TabItem) => void;
-    updateTab: (name: string, tab: Partial<TabItem>) => void;
-    removeTab: (name: string) => void;
-    setActiveTab: (name: string) => void;
-    addCache: (name: string) => void;
-    removeCache: (name: string) => void;
-    bulkRemove: (names: string[]) => void;
-    closeLeft: (name: string) => void;
-    closeRight: (name: string) => void;
-    closeOther: (name: string) => void;
-    closeAll: () => void;
-    refresh: (name: string) => void;
-    getTabList: () => TabItem[];
-    getCacheTabs: () => string[];
-    isClosed: (name: string) => boolean;
-    isCached: (name: string) => boolean;
-    reset: () => void;
-}
-/**
- * Tabs Store
- * 使用 Pinia 管理标签页状态和缓存
- *
- * @param persist - 是否启用持久化（默认 false）
- * @param persistKey - 持久化 key（可选，默认 'jky-tabs-state'）
- */
-export declare function createTabsStore(persist?: boolean, persistKey?: string): TabsStoreReturn;
-/**
- * 获取或创建 Tabs Store
- *
- * @param persist - 是否启用持久化（默认 false）
- * @param persistKey - 持久化 key（可选）
- */
-export declare function useTabsStore(persist?: boolean, persistKey?: string): TabsStoreReturn;
-/**
- * 重置 Store
- */
-export declare function resetTabsStore(): void;
-/**
- * 在应用中提供持久化 key
- */
-export declare function provideTabsPersistKey(key: string): {
-    key: string;
+import { Store } from 'pinia';
+import { TabsConfig, TabsStoreActions, TabsStoreState } from './types';
+export declare function createTabsStore(config?: Partial<TabsConfig>): {
+    useTabsStore: () => Store<'tabs', TabsStoreState, object, TabsStoreActions>;
+    config: TabsConfig;
 };