jky-component-lib 0.0.65 → 0.0.67

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

@@ -0,0 +1,275 @@
+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));
+import { defineComponent, useAttrs, inject, shallowRef, computed, onMounted, provide, openBlock, createBlock, unref, mergeProps, withCtx, renderSlot, createElementBlock, Fragment, renderList, createVNode, normalizeStyle, createCommentVNode, markRaw } from "vue";
+import { ElTabs, ElTabPane } from "element-plus";
+import { onRouteChange } from "./routeListener.js";
+import _sfc_main$1 from "./TabContent.vue.js";
+/* empty css                */
+import { createTabsStore } from "./useTabsStore.js";
+const _sfc_main = /* @__PURE__ */ defineComponent(__spreadProps(__spreadValues({}, {
+  name: "JkyTabs",
+  inheritAttrs: false
+}), {
+  __name: "Tabs",
+  props: {
+    mode: { default: "default" },
+    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: {}
+  },
+  emits: ["tabClick", "tabRemove", "edit", "routeChange", "tabClose", "update:modelValue"],
+  setup(__props, { expose: __expose, emit: __emit }) {
+    const props = __props;
+    const emit = __emit;
+    const attrs = useAttrs();
+    const router = inject("router", null);
+    const store = createTabsStore(props.persist, props.persistKey);
+    const closedTabs = shallowRef(/* @__PURE__ */ new Set());
+    const tabStyleVars = 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 = 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 = computed(() => {
+      const elProps = {};
+      Object.keys(props).forEach((key) => {
+        if (EL_TABS_PROPS.includes(key)) {
+          elProps[key] = props[key];
+        }
+      });
+      return __spreadValues({}, elProps);
+    });
+    function initRouteTabs() {
+      if (!router) {
+        console.warn("JkyTabs: route mode requires router instance. Please provide router via provide/inject.");
+        return;
+      }
+      const routes = router.getRoutes();
+      routes.forEach((route) => {
+        var _a;
+        if ((_a = route.meta) == null ? void 0 : _a.title) {
+          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: route.components ? markRaw(Object.values(route.components)[0]) : void 0,
+              meta: route.meta
+            }
+          };
+          store.addTab(tabItem);
+        }
+      });
+      const currentRoute = router.currentRoute.value;
+      if (currentRoute.name) {
+        store.setActiveTab(currentRoute.name);
+        if (props.cachable) {
+          store.addCache(currentRoute.name);
+        }
+      }
+    }
+    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);
+          }
+        }
+      }
+      emit("tabClick", pane);
+    }
+    function handleCloseTab(tabName) {
+      const name = String(tabName);
+      if (!name)
+        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") {
+      onRouteChange((route) => {
+        if (route.name) {
+          store.setActiveTab(route.name);
+          if (props.cachable) {
+            store.addCache(route.name);
+          }
+        }
+      }, true);
+    }
+    onMounted(() => {
+      if (props.mode === "route") {
+        initRouteTabs();
+      }
+    });
+    __expose({
+      closeTab,
+      closeOthers,
+      closeAll,
+      refreshTab,
+      getCachedTabs,
+      getTabList,
+      getActiveTab
+    });
+    provide("tabsContext", {
+      mode: props.mode,
+      cachable: props.cachable,
+      activeTab: computed(() => store.activeTab),
+      cachedTabs: shallowRef(new Set(store.getCacheTabs())),
+      cachedComponents: shallowRef(/* @__PURE__ */ new Map())
+    });
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(unref(ElTabs), mergeProps({
+        "model-value": unref(store).activeTab
+      }, elTabsProps.value, {
+        class: tabsClass.value,
+        style: tabStyleVars.value,
+        onTabClick: handleTabChange,
+        onTabRemove: handleCloseTab,
+        onEdit: handleCloseTab,
+        onTabAdd: handleAddTab
+      }), {
+        default: withCtx(() => [
+          renderSlot(_ctx.$slots, "default", {}, () => [
+            __props.mode === "route" ? (openBlock(true), createElementBlock(Fragment, { key: 0 }, renderList(unref(store).tabList, (tab) => {
+              return openBlock(), createBlock(unref(ElTabPane), {
+                key: tab.name,
+                name: tab.name,
+                closable: tab.closable
+              }, {
+                label: withCtx(() => [
+                  createVNode(_sfc_main$1, { tab }, null, 8, ["tab"])
+                ]),
+                _: 2
+              }, 1032, ["name", "closable"]);
+            }), 128)) : __props.tabs && __props.tabs.length > 0 ? (openBlock(true), createElementBlock(Fragment, { key: 1 }, renderList(__props.tabs, (tab) => {
+              return openBlock(), createBlock(unref(ElTabPane), {
+                key: tab.name,
+                name: tab.name,
+                closable: tab.closable,
+                style: normalizeStyle({ display: isClosed(tab.name) ? "none" : "" })
+              }, {
+                label: withCtx(() => [
+                  createVNode(_sfc_main$1, { tab }, null, 8, ["tab"])
+                ]),
+                _: 2
+              }, 1032, ["name", "closable", "style"]);
+            }), 128)) : createCommentVNode("", true)
+          ])
+        ]),
+        _: 3
+      }, 16, ["model-value", "class", "style"]);
+    };
+  }
+}));
+export {
+  _sfc_main as default
+};

package/dist/es/tabs/Tabs.vue3.js

@@ -0,0 +1,5 @@
+import _sfc_main from "./Tabs.vue.js";
+/* empty css          */
+export {
+  _sfc_main as default
+};

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

@@ -0,0 +1,9 @@
+import { InstallWithSFC } from '../utils';
+import { default as Tabs } from './Tabs.vue';
+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/es/tabs/index.js

@@ -0,0 +1,8 @@
+import _sfc_main from "./Tabs.vue.js";
+/* empty css          */
+import { installWithSFC } from "../utils/with-install.js";
+const JkyTabs = installWithSFC(_sfc_main);
+export {
+  JkyTabs,
+  JkyTabs as default
+};

package/dist/es/tabs/routeListener.d.ts

@@ -0,0 +1,19 @@
+import { RouteLocationNormalized } from 'vue-router';
+/**
+ * 触发路由变化事件
+ *
+ * @param route - 路由信息
+ */
+export declare function emitRouteChange(route: RouteLocationNormalized): void;
+/**
+ * 监听路由变化
+ *
+ * @param callback - 回调函数
+ * @param immediate - 是否立即执行
+ * @returns 取消监听函数
+ */
+export declare function onRouteChange(callback: (route: RouteLocationNormalized) => void, immediate?: boolean): () => void;
+/**
+ * 清除所有监听
+ */
+export declare function clearRouteListeners(): void;

package/dist/es/tabs/routeListener.js

@@ -0,0 +1,26 @@
+import mitt from "mitt";
+const emitter = mitt();
+let lastRoute = null;
+function emitRouteChange(route) {
+  lastRoute = route;
+  emitter.emit("routeChange", { route });
+}
+function onRouteChange(callback, immediate = true) {
+  emitter.on("routeChange", ({ route }) => {
+    callback(route);
+  });
+  if (immediate && lastRoute) {
+    callback(lastRoute);
+  }
+  return () => {
+    emitter.off("routeChange");
+  };
+}
+function clearRouteListeners() {
+  emitter.all.clear();
+}
+export {
+  clearRouteListeners,
+  emitRouteChange,
+  onRouteChange
+};

package/dist/es/tabs/style.css

@@ -0,0 +1,29 @@
+/* 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);
+}
+}
+.el-tabs__active-bar {
+    background-color: var(--jky-tabs-active-color);
+}
+}
+/* 路由模式下的特殊样式 */
+.jky-tabs--route {
+.el-tabs__item {
+&.is-closable:hover {
+.el-tabs__item__close {
+        opacity: 1;
+}
+}
+}
+}

package/dist/es/tabs/useTabs.d.ts

@@ -0,0 +1,27 @@
+import { ComputedRef } from 'vue';
+import { TabItem, TabsStore } from './types';
+/**
+ * Tabs Hook 返回类型
+ */
+interface UseTabsReturn {
+    activeTab: ComputedRef<string>;
+    tabList: ComputedRef<TabItem[]>;
+    cacheTabs: ComputedRef<string[]>;
+    getCurrentTab: () => TabItem | undefined;
+    addTab: (tab: TabItem) => void;
+    closeTab: (name?: string) => void;
+    closeLeft: (name?: string) => void;
+    closeRight: (name?: string) => void;
+    closeOther: (name?: string) => void;
+    closeAll: () => void;
+    refresh: (name?: string) => void;
+    setTitle: (title: string, name?: string) => void;
+}
+/**
+ * Tabs Hook
+ *
+ * @param store - 可选的 store 实例
+ * @returns Tabs 操作 API
+ */
+export declare function useTabs(store?: TabsStore): UseTabsReturn;
+export {};

package/dist/es/tabs/useTabs.js

@@ -0,0 +1,59 @@
+import { computed } from "vue";
+import { useTabsStore } from "./useTabsStore.js";
+function useTabs(store) {
+  const tabsStore = store || useTabsStore();
+  function getCurrentTab() {
+    return tabsStore.tabList.find(
+      (t) => t.name === tabsStore.activeTab
+    );
+  }
+  function addTab(tab) {
+    tabsStore.addTab(tab);
+  }
+  function closeTab(name) {
+    const tabName = name || tabsStore.activeTab;
+    tabsStore.removeTab(tabName);
+  }
+  function closeLeft(name) {
+    const tabName = name || tabsStore.activeTab;
+    tabsStore.closeLeft(tabName);
+  }
+  function closeRight(name) {
+    const tabName = name || tabsStore.activeTab;
+    tabsStore.closeRight(tabName);
+  }
+  function closeOther(name) {
+    const tabName = name || tabsStore.activeTab;
+    tabsStore.closeOther(tabName);
+  }
+  function closeAll() {
+    tabsStore.closeAll();
+  }
+  function refresh(name) {
+    const tabName = name || tabsStore.activeTab;
+    tabsStore.refresh(tabName);
+  }
+  function setTitle(title, name) {
+    const tabName = name || tabsStore.activeTab;
+    tabsStore.updateTab(tabName, { label: title });
+  }
+  return {
+    // 状态
+    activeTab: computed(() => tabsStore.activeTab),
+    tabList: computed(() => tabsStore.getTabList()),
+    cacheTabs: computed(() => tabsStore.getCacheTabs()),
+    // 方法
+    getCurrentTab,
+    addTab,
+    closeTab,
+    closeLeft,
+    closeRight,
+    closeOther,
+    closeAll,
+    refresh,
+    setTitle
+  };
+}
+export {
+  useTabs
+};

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

@@ -0,0 +1,53 @@
+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;
+};