jky-component-lib 0.0.65 → 0.0.72

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;
+};

package/dist/es/tabs/useTabsStore.js

@@ -0,0 +1,208 @@
+var __defProp = Object.defineProperty;
+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;
+};
+import { defineStore } from "pinia";
+import { ref, shallowRef, computed, inject } from "vue";
+const PERSIST_KEY_SYMBOL = Symbol("jky-tabs-persist-key");
+const DEFAULT_PERSIST_KEY = "jky-tabs-state";
+function getPersistConfig(persist, persistKey) {
+  const injectedPersistKey = inject(PERSIST_KEY_SYMBOL, void 0);
+  const finalPersistKey = injectedPersistKey || persistKey || DEFAULT_PERSIST_KEY;
+  return {
+    enabled: persist !== void 0 ? persist : false,
+    key: finalPersistKey
+  };
+}
+function loadFromStorage(key) {
+  try {
+    const stored = localStorage.getItem(key);
+    if (stored) {
+      return JSON.parse(stored);
+    }
+  } catch (error) {
+    console.warn("Failed to load tabs from storage:", error);
+  }
+  return null;
+}
+function saveToStorage(key, data) {
+  try {
+    localStorage.setItem(key, JSON.stringify(data));
+  } catch (error) {
+    console.warn("Failed to save tabs to storage:", error);
+  }
+}
+function createTabsStore(persist, persistKey) {
+  const persistConfig = getPersistConfig(persist, persistKey);
+  const initialData = persistConfig.enabled ? loadFromStorage(persistConfig.key) : null;
+  const store = defineStore("jky-tabs", () => {
+    const tabList = ref((initialData == null ? void 0 : initialData.tabList) || []);
+    const activeTab = ref((initialData == null ? void 0 : initialData.activeTab) || "");
+    const cacheTabs = shallowRef((initialData == null ? void 0 : initialData.cacheTabs) || []);
+    const closedTabs = shallowRef((initialData == null ? void 0 : initialData.closedTabs) || []);
+    const cacheSet = computed(() => new Set(cacheTabs.value));
+    const closedSet = computed(() => new Set(closedTabs.value));
+    function persistState() {
+      if (!persistConfig.enabled)
+        return;
+      saveToStorage(persistConfig.key, {
+        tabList: tabList.value,
+        activeTab: activeTab.value,
+        cacheTabs: cacheTabs.value,
+        closedTabs: closedTabs.value
+      });
+    }
+    function addTab(tab) {
+      const index = tabList.value.findIndex((t) => t.name === tab.name);
+      if (index !== -1) {
+        tabList.value[index] = __spreadValues(__spreadValues({}, tabList.value[index]), tab);
+      } else {
+        tabList.value.push(tab);
+      }
+      persistState();
+    }
+    function updateTab(name, tab) {
+      const index = tabList.value.findIndex((t) => t.name === name);
+      if (index !== -1) {
+        tabList.value[index] = __spreadValues(__spreadValues({}, tabList.value[index]), tab);
+        persistState();
+      }
+    }
+    function removeTab(name) {
+      const index = tabList.value.findIndex((t) => t.name === name);
+      if (index !== -1) {
+        tabList.value.splice(index, 1);
+        removeCache(name);
+        if (activeTab.value === name && tabList.value.length > 0) {
+          const nextTab = tabList.value[index] || tabList.value[index - 1];
+          if (nextTab) {
+            activeTab.value = nextTab.name;
+          }
+        }
+        persistState();
+      }
+    }
+    function setActiveTab(name) {
+      activeTab.value = name;
+      persistState();
+    }
+    function addCache(name) {
+      if (!cacheSet.value.has(name)) {
+        cacheTabs.value = [...cacheTabs.value, name];
+        persistState();
+      }
+    }
+    function removeCache(name) {
+      cacheTabs.value = cacheTabs.value.filter((t) => t !== name);
+      persistState();
+    }
+    function bulkRemove(names) {
+      tabList.value = tabList.value.filter((tab) => !names.includes(tab.name));
+      names.forEach((name) => removeCache(name));
+      persistState();
+    }
+    function closeLeft(name) {
+      const index = tabList.value.findIndex((t) => t.name === name);
+      if (index > 0) {
+        const leftTabs = tabList.value.slice(0, index);
+        const removableTabs = leftTabs.filter((tab) => !tab.affix);
+        bulkRemove(removableTabs.map((tab) => tab.name));
+      }
+    }
+    function closeRight(name) {
+      const index = tabList.value.findIndex((t) => t.name === name);
+      if (index >= 0 && index < tabList.value.length - 1) {
+        const rightTabs = tabList.value.slice(index + 1);
+        const removableTabs = rightTabs.filter((tab) => !tab.affix);
+        bulkRemove(removableTabs.map((tab) => tab.name));
+      }
+    }
+    function closeOther(name) {
+      const removableTabs = tabList.value.filter(
+        (tab) => tab.name !== name && !tab.affix
+      );
+      bulkRemove(removableTabs.map((tab) => tab.name));
+    }
+    function closeAll() {
+      const removableTabs = tabList.value.filter((tab) => !tab.affix);
+      bulkRemove(removableTabs.map((tab) => tab.name));
+    }
+    function refresh(name) {
+      removeCache(name);
+      setTimeout(() => {
+        addCache(name);
+      }, 0);
+    }
+    function getTabList() {
+      return [...tabList.value];
+    }
+    function getCacheTabs() {
+      return [...cacheTabs.value];
+    }
+    function isClosed(name) {
+      return closedSet.value.has(name);
+    }
+    function isCached(name) {
+      return cacheSet.value.has(name);
+    }
+    function reset() {
+      tabList.value = [];
+      activeTab.value = "";
+      cacheTabs.value = [];
+      closedTabs.value = [];
+      persistState();
+    }
+    return {
+      tabList,
+      activeTab,
+      cacheTabs,
+      closedTabs,
+      addTab,
+      updateTab,
+      removeTab,
+      setActiveTab,
+      addCache,
+      removeCache,
+      bulkRemove,
+      closeLeft,
+      closeRight,
+      closeOther,
+      closeAll,
+      refresh,
+      getTabList,
+      getCacheTabs,
+      isClosed,
+      isCached,
+      reset
+    };
+  });
+  return store();
+}
+const storeInstances = /* @__PURE__ */ new Map();
+function useTabsStore(persist, persistKey) {
+  const key = persistKey || DEFAULT_PERSIST_KEY;
+  if (!storeInstances.has(key)) {
+    storeInstances.set(key, () => createTabsStore(persist, persistKey));
+  }
+  return storeInstances.get(key)();
+}
+function resetTabsStore() {
+  storeInstances.clear();
+}
+export {
+  createTabsStore,
+  resetTabsStore,
+  useTabsStore
+};

package/dist/lib/components.d.ts

@@ -10,5 +10,6 @@ export * from './page-layout';
 export * from './page-table';
 export * from './rich-editor';
 export * from './say-hello';
+export * from './tabs';
 export declare const components: Plugin[];
 export default components;

package/dist/lib/components.js

@@ -11,6 +11,7 @@ const index$7 = require("./page-layout/index.js");
 const index$8 = require("./page-table/index.js");
 const index$9 = require("./rich-editor/index.js");
 const index$a = require("./say-hello/index.js");
+const index$b = require("./tabs/index.js");
 const components = [
   index$a.JkySayHello,
   index$1.JkyButton,
@@ -22,7 +23,8 @@ const components = [
   index.JkyAddInput,
   index$9.JkyRichEditor,
   index$8.JkyPageTable,
-  index$7.JkyPageLayout
+  index$7.JkyPageLayout,
+  index$b.JkyTabs
 ];
 exports.JkyAddInput = index.JkyAddInput;
 exports.JkyButton = index$1.JkyButton;
@@ -35,4 +37,5 @@ exports.JkyPageLayout = index$7.JkyPageLayout;
 exports.JkyPageTable = index$8.JkyPageTable;
 exports.JkyRichEditor = index$9.JkyRichEditor;
 exports.JkySayHello = index$a.JkySayHello;
+exports.JkyTabs = index$b.JkyTabs;
 exports.components = components;

package/dist/lib/form/Form.vue.d.ts

@@ -88,7 +88,7 @@ declare function getFormInstance(): ({
     validateOnRuleChange: boolean;
 }> & Omit<Readonly<import('element-plus').FormProps> & Readonly<{
     onValidate?: ((prop: import('element-plus').FormItemProp, isValid: boolean, message: string) => any) | undefined;
-}>, "labelPosition" | "requireAsteriskPosition" | "labelWidth" | "labelSuffix" | "showMessage" | "validateOnRuleChange" | "scrollIntoViewOptions" | "validate" | "validateField" | "resetFields" | "clearValidate" | "scrollToField" | "getField" | "fields" | "setInitialValues"> & import('vue').ShallowUnwrapRef<{
+}>, "labelPosition" | "requireAsteriskPosition" | "labelWidth" | "labelSuffix" | "showMessage" | "validateOnRuleChange" | "scrollIntoViewOptions" | "validate" | "validateField" | "resetFields" | "clearValidate" | "scrollToField" | "getField" | "fields" | "setInitialValues"> & {
     validate: (callback?: import('element-plus').FormValidateCallback) => import('element-plus').FormValidationResult;
     validateField: (props?: import('element-plus/es/utils').Arrayable<import('element-plus').FormItemProp>, callback?: import('element-plus').FormValidateCallback) => import('element-plus').FormValidationResult;
     resetFields: (props?: import('element-plus/es/utils').Arrayable<import('element-plus').FormItemProp>) => void;
@@ -97,7 +97,7 @@ declare function getFormInstance(): ({
     getField: (prop: import('element-plus').FormItemProp) => import('element-plus').FormItemContext | undefined;
     fields: import('vue').Reactive<import('element-plus').FormItemContext[]>;
     setInitialValues: (initModel: Record<string, any>) => void;
-}> & {} & import('vue').ComponentCustomProperties & {} & {
+} & {} & import('vue').ComponentCustomProperties & {} & {
     $slots: {
         default?: (props: {}) => any;
     };
@@ -195,7 +195,7 @@ declare const _default: import('vue').DefineComponent<__VLS_PublicProps, {
         validateOnRuleChange: boolean;
     }> & Omit<Readonly<import('element-plus').FormProps> & Readonly<{
         onValidate?: ((prop: import('element-plus').FormItemProp, isValid: boolean, message: string) => any) | undefined;
-    }>, "labelPosition" | "requireAsteriskPosition" | "labelWidth" | "labelSuffix" | "showMessage" | "validateOnRuleChange" | "scrollIntoViewOptions" | "validate" | "validateField" | "resetFields" | "clearValidate" | "scrollToField" | "getField" | "fields" | "setInitialValues"> & import('vue').ShallowUnwrapRef<{
+    }>, "labelPosition" | "requireAsteriskPosition" | "labelWidth" | "labelSuffix" | "showMessage" | "validateOnRuleChange" | "scrollIntoViewOptions" | "validate" | "validateField" | "resetFields" | "clearValidate" | "scrollToField" | "getField" | "fields" | "setInitialValues"> & {
         validate: (callback?: import('element-plus').FormValidateCallback) => import('element-plus').FormValidationResult;
         validateField: (props?: import('element-plus/es/utils').Arrayable<import('element-plus').FormItemProp>, callback?: import('element-plus').FormValidateCallback) => import('element-plus').FormValidationResult;
         resetFields: (props?: import('element-plus/es/utils').Arrayable<import('element-plus').FormItemProp>) => void;
@@ -204,7 +204,7 @@ declare const _default: import('vue').DefineComponent<__VLS_PublicProps, {
         getField: (prop: import('element-plus').FormItemProp) => import('element-plus').FormItemContext | undefined;
         fields: import('vue').Reactive<import('element-plus').FormItemContext[]>;
         setInitialValues: (initModel: Record<string, any>) => void;
-    }> & {} & import('vue').ComponentCustomProperties & {} & {
+    } & {} & import('vue').ComponentCustomProperties & {} & {
         $slots: {
             default?: (props: {}) => any;
         };
@@ -293,7 +293,7 @@ declare const _default: import('vue').DefineComponent<__VLS_PublicProps, {
         validateOnRuleChange: boolean;
     }> & Omit<Readonly<import('element-plus').FormProps> & Readonly<{
         onValidate?: ((prop: import('element-plus').FormItemProp, isValid: boolean, message: string) => any) | undefined;
-    }>, "labelPosition" | "requireAsteriskPosition" | "labelWidth" | "labelSuffix" | "showMessage" | "validateOnRuleChange" | "scrollIntoViewOptions" | "validate" | "validateField" | "resetFields" | "clearValidate" | "scrollToField" | "getField" | "fields" | "setInitialValues"> & import('vue').ShallowUnwrapRef<{
+    }>, "labelPosition" | "requireAsteriskPosition" | "labelWidth" | "labelSuffix" | "showMessage" | "validateOnRuleChange" | "scrollIntoViewOptions" | "validate" | "validateField" | "resetFields" | "clearValidate" | "scrollToField" | "getField" | "fields" | "setInitialValues"> & {
         validate: (callback?: import('element-plus').FormValidateCallback) => import('element-plus').FormValidationResult;
         validateField: (props?: import('element-plus/es/utils').Arrayable<import('element-plus').FormItemProp>, callback?: import('element-plus').FormValidateCallback) => import('element-plus').FormValidationResult;
         resetFields: (props?: import('element-plus/es/utils').Arrayable<import('element-plus').FormItemProp>) => void;
@@ -302,7 +302,7 @@ declare const _default: import('vue').DefineComponent<__VLS_PublicProps, {
         getField: (prop: import('element-plus').FormItemProp) => import('element-plus').FormItemContext | undefined;
         fields: import('vue').Reactive<import('element-plus').FormItemContext[]>;
         setInitialValues: (initModel: Record<string, any>) => void;
-    }> & {} & import('vue').ComponentCustomProperties & {} & {
+    } & {} & import('vue').ComponentCustomProperties & {} & {
         $slots: {
             default?: (props: {}) => any;
         };
@@ -427,7 +427,7 @@ declare const _default: import('vue').DefineComponent<__VLS_PublicProps, {
         validateOnRuleChange: boolean;
     }> & Omit<Readonly<import('element-plus').FormProps> & Readonly<{
         onValidate?: ((prop: import('element-plus').FormItemProp, isValid: boolean, message: string) => any) | undefined;
-    }>, "labelPosition" | "requireAsteriskPosition" | "labelWidth" | "labelSuffix" | "showMessage" | "validateOnRuleChange" | "scrollIntoViewOptions" | "validate" | "validateField" | "resetFields" | "clearValidate" | "scrollToField" | "getField" | "fields" | "setInitialValues"> & import('vue').ShallowUnwrapRef<{
+    }>, "labelPosition" | "requireAsteriskPosition" | "labelWidth" | "labelSuffix" | "showMessage" | "validateOnRuleChange" | "scrollIntoViewOptions" | "validate" | "validateField" | "resetFields" | "clearValidate" | "scrollToField" | "getField" | "fields" | "setInitialValues"> & {
         validate: (callback?: import('element-plus').FormValidateCallback) => import('element-plus').FormValidationResult;
         validateField: (props?: import('element-plus/es/utils').Arrayable<import('element-plus').FormItemProp>, callback?: import('element-plus').FormValidateCallback) => import('element-plus').FormValidationResult;
         resetFields: (props?: import('element-plus/es/utils').Arrayable<import('element-plus').FormItemProp>) => void;
@@ -436,7 +436,7 @@ declare const _default: import('vue').DefineComponent<__VLS_PublicProps, {
         getField: (prop: import('element-plus').FormItemProp) => import('element-plus').FormItemContext | undefined;
         fields: import('vue').Reactive<import('element-plus').FormItemContext[]>;
         setInitialValues: (initModel: Record<string, any>) => void;
-    }> & {} & import('vue').ComponentCustomProperties & {} & {
+    } & {} & import('vue').ComponentCustomProperties & {} & {
         $slots: {
             default?: (props: {}) => any;
         };

package/dist/lib/index.js

@@ -4,6 +4,8 @@ const components = require("./components.js");
 const installer$1 = require("./utils/installer.js");
 ;/* empty css            */
 const resolver = require("./resolver.js");
+const TabContent_vue_vue_type_script_setup_true_lang = require("./tabs/TabContent.vue.js");
+;/* empty css                      */
 const index = require("./add-input/index.js");
 const index$1 = require("./button/index.js");
 const index$2 = require("./button-nav/index.js");
@@ -15,11 +17,16 @@ const index$7 = require("./page-layout/index.js");
 const index$8 = require("./page-table/index.js");
 const index$9 = require("./rich-editor/index.js");
 const index$a = require("./say-hello/index.js");
+const index$b = require("./tabs/index.js");
+const routeListener = require("./tabs/routeListener.js");
+const useTabsStore = require("./tabs/useTabsStore.js");
+const useTabs = require("./tabs/useTabs.js");
 const installer = installer$1.createInstaller(components.components);
 const install = installer.install;
 const version = installer.version;
 exports.components = components.components;
 exports.JkyComponentLibResolver = resolver.JkyComponentLibResolver;
+exports.JkyTabContent = TabContent_vue_vue_type_script_setup_true_lang.default;
 exports.JkyAddInput = index.JkyAddInput;
 exports.JkyButton = index$1.JkyButton;
 exports.JkyButtonNav = index$2.JkyButtonNav;
@@ -31,6 +38,14 @@ exports.JkyPageLayout = index$7.JkyPageLayout;
 exports.JkyPageTable = index$8.JkyPageTable;
 exports.JkyRichEditor = index$9.JkyRichEditor;
 exports.JkySayHello = index$a.JkySayHello;
+exports.JkyTabs = index$b.JkyTabs;
+exports.clearRouteListeners = routeListener.clearRouteListeners;
+exports.emitRouteChange = routeListener.emitRouteChange;
+exports.onRouteChange = routeListener.onRouteChange;
+exports.createTabsStore = useTabsStore.createTabsStore;
+exports.resetTabsStore = useTabsStore.resetTabsStore;
+exports.useTabsStore = useTabsStore.useTabsStore;
+exports.useTabs = useTabs.useTabs;
 exports.default = installer;
 exports.install = install;
 exports.version = version;

package/dist/lib/menu/Menu.vue.d.ts

@@ -1,17 +1,18 @@
-import { MenuItem, MenuProps } from './types';
+import { MenuProps } from './types';
 declare function __VLS_template(): {
     attrs: Partial<{}>;
     slots: {
         default?(_: {}): any;
-        default?(_: {}): any;
     };
     refs: {};
     rootEl: any;
 };
 type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
 declare const __VLS_component: import('vue').DefineComponent<MenuProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<MenuProps> & Readonly<{}>, {
-    aside: boolean;
-    menuData: MenuItem[];
+    levels: number;
+    readonly uniqueOpened: boolean;
+    readonly menuTrigger: import('element-plus/es/utils').EpPropMergeType<StringConstructor, "click" | "hover", unknown>;
+    menuData: import('./types').MenuItem[];
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
 declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
 export default _default;

package/dist/lib/menu/Menu.vue.js

@@ -21,20 +21,29 @@ 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 Aside_vue_vue_type_script_setup_true_lang = require("./Aside.vue.js");
+const MenuItem_vue_vue_type_script_setup_true_lang = require("./MenuItem.vue.js");
+const _hoisted_1 = {
+  key: 1,
+  class: "jky-menu-item__title"
+};
+const _hoisted_2 = {
+  key: 1,
+  class: "jky-menu-item__title"
+};
 const _sfc_main = /* @__PURE__ */ vue.defineComponent(__spreadProps(__spreadValues({}, {
-  name: "JkyMenu"
+  name: "JkyMenu",
+  inheritAttrs: false
 }), {
   __name: "Menu",
   props: {
-    aside: { type: Boolean, default: false },
     menuData: { default: () => [] },
+    levels: { default: 0 },
     mode: {},
     defaultActive: {},
     defaultOpeneds: {},
-    uniqueOpened: { type: Boolean },
+    uniqueOpened: { type: Boolean, default: true },
     router: { type: Boolean },
-    menuTrigger: {},
+    menuTrigger: { default: "click" },
     collapse: { type: Boolean },
     backgroundColor: {},
     textColor: {},
@@ -53,76 +62,60 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent(__spreadProps(__spreadValu
   },
   setup(__props) {
     const props = __props;
-    function renderMenuItem(item) {
-      var _a;
-      return vue.h(
-        ElementPlus.ElMenuItem,
-        {
-          index: item.index || item.id || "",
-          disabled: (_a = item.disabled) != null ? _a : false,
-          route: item.route
-        },
-        {
-          default: () => [
-            item.icon ? vue.h("span", { class: "jky-menu-item__icon" }, [vue.h("span", { class: item.icon })]) : null,
-            item.title ? vue.h("span", { class: "jky-menu-item__title" }, item.title) : null
-          ]
-        }
-      );
-    }
-    function renderSubMenu(item) {
-      var _a;
-      const children = item.children || [];
-      return vue.h(
-        ElementPlus.ElSubMenu,
-        {
-          index: item.index || item.id || "",
-          disabled: (_a = item.disabled) != null ? _a : false,
-          popperOffset: item.popperOffset
-        },
-        {
-          title: () => [
-            item.icon ? vue.h("span", { class: "jky-menu-item__icon" }, [vue.h("span", { class: item.icon })]) : null,
-            item.title ? vue.h("span", { class: "jky-menu-item__title" }, item.title) : null
-          ],
-          default: () => children.map((child) => renderMenuNode(child))
-        }
-      );
-    }
-    function renderMenuNode(item) {
-      if (item.children && item.children.length > 0) {
-        return renderSubMenu(item);
-      }
-      return renderMenuItem(item);
-    }
+    const attrs = vue.useAttrs();
     return (_ctx, _cache) => {
-      return props.aside ? (vue.openBlock(), vue.createBlock(Aside_vue_vue_type_script_setup_true_lang.default, { key: 0 }, {
-        default: vue.withCtx(() => [
-          vue.createVNode(vue.unref(ElementPlus.ElMenu), vue.mergeProps({ class: "jky-menu" }, __spreadValues(__spreadValues({}, props), _ctx.$attrs)), {
-            default: vue.withCtx(() => [
-              props.menuData && props.menuData.length > 0 ? (vue.openBlock(true), vue.createElementBlock(vue.Fragment, { key: 0 }, vue.renderList(props.menuData, (item) => {
-                return vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(renderMenuNode(item)), {
-                  key: item.index || item.id
-                });
-              }), 128)) : vue.renderSlot(_ctx.$slots, "default", { key: 1 })
-            ]),
-            _: 3
-          }, 16)
-        ]),
-        _: 3
-      })) : (vue.openBlock(), vue.createBlock(vue.unref(ElementPlus.ElMenu), vue.mergeProps({
-        key: 1,
-        class: "jky-menu"
-      }, __spreadValues(__spreadValues({}, props), _ctx.$attrs)), {
+      return vue.openBlock(), vue.createBlock(vue.unref(ElementPlus.ElMenu), vue.mergeProps({ class: "jky-menu" }, __spreadValues(__spreadValues({}, vue.unref(attrs)), props)), {
         default: vue.withCtx(() => [
           props.menuData && props.menuData.length > 0 ? (vue.openBlock(true), vue.createElementBlock(vue.Fragment, { key: 0 }, vue.renderList(props.menuData, (item) => {
-            return vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(renderMenuNode(item)), {
-              key: item.index || item.id
-            });
+            var _a, _b;
+            return vue.openBlock(), vue.createElementBlock(vue.Fragment, {
+              key: item.index
+            }, [
+              item.children && item.children.length > 0 ? (vue.openBlock(), vue.createBlock(vue.unref(ElementPlus.ElSubMenu), {
+                key: 0,
+                index: item.index || "",
+                class: vue.normalizeClass(item.customClass),
+                disabled: (_a = item.disabled) != null ? _a : false,
+                "popper-offset": item.popperOffset
+              }, {
+                title: vue.withCtx(() => [
+                  item.icon ? (vue.openBlock(), vue.createElementBlock("span", {
+                    key: 0,
+                    class: vue.normalizeClass([item.icon, "jky-menu-item__icon"])
+                  }, null, 2)) : vue.createCommentVNode("", true),
+                  item.title ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_1, vue.toDisplayString(item.title), 1)) : vue.createCommentVNode("", true)
+                ]),
+                default: vue.withCtx(() => [
+                  (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(item.children, (child) => {
+                    return vue.openBlock(), vue.createBlock(MenuItem_vue_vue_type_script_setup_true_lang.default, {
+                      key: child.index,
+                      item: child,
+                      levels: props.levels > 0 ? props.levels - 1 : 0
+                    }, null, 8, ["item", "levels"]);
+                  }), 128))
+                ]),
+                _: 2
+              }, 1032, ["index", "class", "disabled", "popper-offset"])) : (vue.openBlock(), vue.createBlock(vue.unref(ElementPlus.ElMenuItem), {
+                key: 1,
+                index: item.index || "",
+                class: vue.normalizeClass(item.customClass),
+                disabled: (_b = item.disabled) != null ? _b : false,
+                route: item.route
+              }, {
+                default: vue.withCtx(() => [
+                  item.icon ? (vue.openBlock(), vue.createElementBlock("span", {
+                    key: 0,
+                    class: vue.normalizeClass([item.icon, "jky-menu-item__icon"])
+                  }, null, 2)) : vue.createCommentVNode("", true),
+                  item.title ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_2, vue.toDisplayString(item.title), 1)) : vue.createCommentVNode("", true)
+                ]),
+                _: 2
+              }, 1032, ["index", "class", "disabled", "route"]))
+            ], 64);
           }), 128)) : vue.renderSlot(_ctx.$slots, "default", { key: 1 })
         ]),
         _: 3
-      }, 16));
+      }, 16);
     };
   }
 }));

package/dist/lib/menu/MenuItem.vue.d.ts

@@ -0,0 +1,7 @@
+import { MenuItem as MenuItemType } from './types';
+type __VLS_Props = {
+    item: MenuItemType;
+    levels?: number;
+};
+declare const _default: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+export default _default;