element-plus 2.1.7 → 2.1.8

package/es/components/tabs/index.mjs

@@ -2,7 +2,7 @@ import '../../utils/index.mjs';
 import Tabs from './src/tabs.mjs';
 export { tabsEmits, tabsProps } from './src/tabs.mjs';
 import TabPane from './src/tab-pane2.mjs';
-export { tabBar } from './src/tab-bar.mjs';
+export { tabBarProps } from './src/tab-bar.mjs';
 export { tabNavProps } from './src/tab-nav.mjs';
 export { tabPaneProps } from './src/tab-pane.mjs';
 import { withInstall, withNoopInstall } from '../../utils/vue/install.mjs';

package/es/components/tabs/index.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.mjs","sources":["../../../../../packages/components/tabs/index.ts"],"sourcesContent":["import { withInstall, withNoopInstall } from '@element-plus/utils'\nimport Tabs from './src/tabs'\nimport TabPane from './src/tab-pane.vue'\n\nexport const ElTabs = withInstall(Tabs, {\n  TabPane,\n})\nexport default ElTabs\nexport const ElTabPane = withNoopInstall(TabPane)\n\nexport * from './src/tabs'\nexport * from './src/tab-bar'\nexport * from './src/tab-nav'\nexport * from './src/tab-pane'\n"],"names":[],"mappings":";;;;;;;;;AAGY,MAAC,MAAM,GAAG,WAAW,CAAC,IAAI,EAAE;AACxC,EAAE,OAAO;AACT,CAAC,EAAE;AAES,MAAC,SAAS,GAAG,eAAe,CAAC,OAAO;;;;"}
+{"version":3,"file":"index.mjs","sources":["../../../../../packages/components/tabs/index.ts"],"sourcesContent":["import { withInstall, withNoopInstall } from '@element-plus/utils'\nimport Tabs from './src/tabs'\nimport TabPane from './src/tab-pane.vue'\n\nexport const ElTabs = withInstall(Tabs, {\n  TabPane,\n})\nexport const ElTabPane = withNoopInstall(TabPane)\nexport default ElTabs\n\nexport * from './src/tabs'\nexport * from './src/tab-bar'\nexport * from './src/tab-nav'\nexport * from './src/tab-pane'\n"],"names":[],"mappings":";;;;;;;;;AAGY,MAAC,MAAM,GAAG,WAAW,CAAC,IAAI,EAAE;AACxC,EAAE,OAAO;AACT,CAAC,EAAE;AACS,MAAC,SAAS,GAAG,eAAe,CAAC,OAAO;;;;"}

package/es/components/tabs/src/tab-bar.d.ts

@@ -1,5 +1,6 @@
 import type { ExtractPropTypes } from 'vue';
-export declare const tabBar: {
+import type TabBar from './tab-bar.vue';
+export declare const tabBarProps: {
     readonly tabs: import("element-plus/es/utils").BuildPropReturn<import("element-plus/es/utils").PropWrapper<{
         uid: number;
         instance: import("vue").ShallowReactive<import("vue").ComponentInternalInstance>;
@@ -16,4 +17,5 @@ export declare const tabBar: {
         isClosable: boolean;
     }[]>, () => [], unknown, unknown, unknown>;
 };
-export declare type TabBar = ExtractPropTypes<typeof tabBar>;
+export declare type TabBarProps = ExtractPropTypes<typeof tabBarProps>;
+export declare type TabBarInstance = InstanceType<typeof TabBar>;

package/es/components/tabs/src/tab-bar.mjs

@@ -2,12 +2,12 @@ import '../../../utils/index.mjs';
 import { buildProps, definePropType } from '../../../utils/vue/props.mjs';
 import { mutable } from '../../../utils/typescript.mjs';
 
-const tabBar = buildProps({
+const tabBarProps = buildProps({
   tabs: {
     type: definePropType(Array),
     default: () => mutable([])
   }
 });
 
-export { tabBar };
+export { tabBarProps };
 //# sourceMappingURL=tab-bar.mjs.map

package/es/components/tabs/src/tab-bar.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"tab-bar.mjs","sources":["../../../../../../packages/components/tabs/src/tab-bar.ts"],"sourcesContent":["import { buildProps, definePropType, mutable } from '@element-plus/utils'\nimport type { TabsPaneContext } from '@element-plus/tokens'\nimport type { ExtractPropTypes } from 'vue'\n\nexport const tabBar = buildProps({\n  tabs: {\n    type: definePropType<TabsPaneContext[]>(Array),\n    default: () => mutable([] as const),\n  },\n} as const)\n\nexport type TabBar = ExtractPropTypes<typeof tabBar>\n"],"names":[],"mappings":";;;;AACY,MAAC,MAAM,GAAG,UAAU,CAAC;AACjC,EAAE,IAAI,EAAE;AACR,IAAI,IAAI,EAAE,cAAc,CAAC,KAAK,CAAC;AAC/B,IAAI,OAAO,EAAE,MAAM,OAAO,CAAC,EAAE,CAAC;AAC9B,GAAG;AACH,CAAC;;;;"}
+{"version":3,"file":"tab-bar.mjs","sources":["../../../../../../packages/components/tabs/src/tab-bar.ts"],"sourcesContent":["import { buildProps, definePropType, mutable } from '@element-plus/utils'\nimport type { ExtractPropTypes } from 'vue'\nimport type { TabsPaneContext } from '@element-plus/tokens'\nimport type TabBar from './tab-bar.vue'\n\nexport const tabBarProps = buildProps({\n  tabs: {\n    type: definePropType<TabsPaneContext[]>(Array),\n    default: () => mutable([] as const),\n  },\n} as const)\n\nexport type TabBarProps = ExtractPropTypes<typeof tabBarProps>\nexport type TabBarInstance = InstanceType<typeof TabBar>\n"],"names":[],"mappings":";;;;AACY,MAAC,WAAW,GAAG,UAAU,CAAC;AACtC,EAAE,IAAI,EAAE;AACR,IAAI,IAAI,EAAE,cAAc,CAAC,KAAK,CAAC;AAC/B,IAAI,OAAO,EAAE,MAAM,OAAO,CAAC,EAAE,CAAC;AAC9B,GAAG;AACH,CAAC;;;;"}

package/es/components/tabs/src/tab-bar.vue.d.ts

@@ -16,9 +16,45 @@ declare const _default: import("vue").DefineComponent<{
         isClosable: boolean;
     }[]>, () => [], unknown, unknown, unknown>;
 }, {
-    bar$: import("vue").Ref<HTMLDivElement | undefined>;
+    COMPONENT_NAME: string;
+    props: Readonly<import("@vue/shared").LooseRequired<Readonly<import("vue").ExtractPropTypes<{
+        readonly tabs: import("element-plus/es/utils").BuildPropReturn<import("element-plus/es/utils").PropWrapper<{
+            uid: number;
+            instance: import("vue").ShallowReactive<import("vue").ComponentInternalInstance>;
+            props: {
+                readonly disabled: boolean;
+                readonly name: import("element-plus/es/utils").BuildPropType<readonly [StringConstructor, NumberConstructor], unknown, unknown>;
+                readonly label: string;
+                readonly closable: boolean;
+                readonly lazy: boolean;
+            };
+            paneName: string | number | undefined;
+            active: boolean;
+            index: string | undefined;
+            isClosable: boolean;
+        }[]>, () => [], unknown, unknown, unknown>;
+    }>> & {
+        [x: string & `on${string}`]: ((...args: any[]) => any) | ((...args: unknown[]) => any) | undefined;
+    }>>;
+    instance: import("vue").ComponentInternalInstance;
     rootTabs: import("element-plus/es/tokens").TabsRootContext;
-    barStyle: import("vue").Ref<any>;
+    ns: {
+        namespace: import("vue").ComputedRef<string>;
+        b: (blockSuffix?: string) => string;
+        e: (element?: string | undefined) => string;
+        m: (modifier?: string | undefined) => string;
+        be: (blockSuffix?: string | undefined, element?: string | undefined) => string;
+        em: (element?: string | undefined, modifier?: string | undefined) => string;
+        bm: (blockSuffix?: string | undefined, modifier?: string | undefined) => string;
+        bem: (blockSuffix?: string | undefined, element?: string | undefined, modifier?: string | undefined) => string;
+        is: {
+            (name: string, state: boolean | undefined): string;
+            (name: string): string;
+        };
+    };
+    barRef: import("vue").Ref<HTMLDivElement | undefined>;
+    barStyle: import("vue").Ref<CSSProperties | undefined>;
+    getBarStyle: () => CSSProperties;
     update: () => CSSProperties;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
     readonly tabs: import("element-plus/es/utils").BuildPropReturn<import("element-plus/es/utils").PropWrapper<{

package/es/components/tabs/src/tab-bar2.mjs

@@ -1,23 +1,30 @@
-import { defineComponent, getCurrentInstance, inject, ref, watch, nextTick, openBlock, createElementBlock, normalizeClass, normalizeStyle } from 'vue';
-import { capitalize } from '@vue/shared';
+import { defineComponent, getCurrentInstance, inject, ref, watch, nextTick, openBlock, createElementBlock, normalizeClass, unref, normalizeStyle } from 'vue';
 import { useResizeObserver } from '@vueuse/core';
-import '../../../tokens/index.mjs';
 import '../../../utils/index.mjs';
-import { tabBar } from './tab-bar.mjs';
+import '../../../tokens/index.mjs';
+import '../../../hooks/index.mjs';
+import { tabBarProps } from './tab-bar.mjs';
 import _export_sfc from '../../../_virtual/plugin-vue_export-helper.mjs';
 import { tabsRootContextKey } from '../../../tokens/tabs.mjs';
 import { throwError } from '../../../utils/error.mjs';
+import { useNamespace } from '../../../hooks/use-namespace/index.mjs';
+import { capitalize } from '@vue/shared';
 
-const COMPONENT_NAME = "ElTabBar";
-const _sfc_main = defineComponent({
-  name: COMPONENT_NAME,
-  props: tabBar,
-  setup(props) {
+const __default__ = {
+  name: "ElTabBar"
+};
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  ...__default__,
+  props: tabBarProps,
+  setup(__props, { expose }) {
+    const props = __props;
+    const COMPONENT_NAME = "ElTabBar";
     const instance = getCurrentInstance();
     const rootTabs = inject(tabsRootContextKey);
     if (!rootTabs)
-      throwError(COMPONENT_NAME, "must use with ElTabs");
-    const bar$ = ref();
+      throwError(COMPONENT_NAME, "<el-tabs><el-tab-bar /></el-tabs>");
+    const ns = useNamespace("tabs");
+    const barRef = ref();
     const barStyle = ref();
     const getBarStyle = () => {
       let offset = 0;
@@ -54,23 +61,22 @@ const _sfc_main = defineComponent({
       await nextTick();
       update();
     }, { immediate: true });
-    useResizeObserver(bar$, () => update());
-    return {
-      bar$,
-      rootTabs,
-      barStyle,
+    useResizeObserver(barRef, () => update());
+    expose({
+      ref: barRef,
       update
+    });
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", {
+        ref_key: "barRef",
+        ref: barRef,
+        class: normalizeClass([unref(ns).e("active-bar"), unref(ns).is(unref(rootTabs).props.tabPosition)]),
+        style: normalizeStyle(barStyle.value)
+      }, null, 6);
     };
   }
 });
-function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
-  return openBlock(), createElementBlock("div", {
-    ref: "bar$",
-    class: normalizeClass(["el-tabs__active-bar", `is-${_ctx.rootTabs.props.tabPosition}`]),
-    style: normalizeStyle(_ctx.barStyle)
-  }, null, 6);
-}
-var TabBar = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
+var TabBar = /* @__PURE__ */ _export_sfc(_sfc_main, [["__file", "/home/runner/work/element-plus/element-plus/packages/components/tabs/src/tab-bar.vue"]]);
 
 export { TabBar as default };
 //# sourceMappingURL=tab-bar2.mjs.map

package/es/components/tabs/src/tab-bar2.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"tab-bar2.mjs","sources":["../../../../../../packages/components/tabs/src/tab-bar.vue"],"sourcesContent":["<template>\n  <div\n    ref=\"bar$\"\n    :class=\"['el-tabs__active-bar', `is-${rootTabs.props.tabPosition}`]\"\n    :style=\"barStyle\"\n  />\n</template>\n<script lang=\"ts\">\nimport {\n  defineComponent,\n  getCurrentInstance,\n  inject,\n  nextTick,\n  ref,\n  watch,\n} from 'vue'\nimport { capitalize } from '@vue/shared'\nimport { useResizeObserver } from '@vueuse/core'\nimport { tabsRootContextKey } from '@element-plus/tokens'\nimport { throwError } from '@element-plus/utils'\nimport { tabBar } from './tab-bar'\n\nimport type { CSSProperties } from 'vue'\n\nconst COMPONENT_NAME = 'ElTabBar'\nexport default defineComponent({\n  name: COMPONENT_NAME,\n  props: tabBar,\n\n  setup(props) {\n    const instance = getCurrentInstance()!\n    const rootTabs = inject(tabsRootContextKey)\n    if (!rootTabs) throwError(COMPONENT_NAME, 'must use with ElTabs')\n\n    const bar$ = ref<HTMLDivElement>()\n    const barStyle = ref()\n\n    const getBarStyle = (): CSSProperties => {\n      let offset = 0\n      let tabSize = 0\n\n      const sizeName = ['top', 'bottom'].includes(rootTabs.props.tabPosition)\n        ? 'width'\n        : 'height'\n      const sizeDir = sizeName === 'width' ? 'x' : 'y'\n\n      props.tabs.every((tab) => {\n        const $el = instance.parent?.refs?.[\n          `tab-${tab.paneName}`\n        ] as HTMLElement\n        if (!$el) return false\n\n        if (!tab.active) {\n          return true\n        }\n\n        tabSize = $el[`client${capitalize(sizeName)}`]\n        const position = sizeDir === 'x' ? 'left' : 'top'\n        offset =\n          $el.getBoundingClientRect()[position] -\n          ($el.parentElement?.getBoundingClientRect()[position] ?? 0)\n        const tabStyles = window.getComputedStyle($el)\n\n        if (sizeName === 'width') {\n          if (props.tabs.length > 1) {\n            tabSize -=\n              Number.parseFloat(tabStyles.paddingLeft) +\n              Number.parseFloat(tabStyles.paddingRight)\n          }\n          offset += Number.parseFloat(tabStyles.paddingLeft)\n        }\n        return false\n      })\n\n      return {\n        [sizeName]: `${tabSize}px`,\n        transform: `translate${capitalize(sizeDir)}(${offset}px)`,\n      }\n    }\n\n    const update = () => (barStyle.value = getBarStyle())\n\n    watch(\n      () => props.tabs,\n      async () => {\n        await nextTick()\n        update()\n      },\n      { immediate: true }\n    )\n    useResizeObserver(bar$, () => update())\n\n    return {\n      bar$,\n      rootTabs,\n      barStyle,\n      update,\n    }\n  },\n})\n</script>\n"],"names":["_openBlock","_createElementBlock","_normalizeClass","_normalizeStyle"],"mappings":"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"}
+{"version":3,"file":"tab-bar2.mjs","sources":["../../../../../../packages/components/tabs/src/tab-bar.vue"],"sourcesContent":["<template>\n  <div\n    ref=\"barRef\"\n    :class=\"[ns.e('active-bar'), ns.is(rootTabs.props.tabPosition)]\"\n    :style=\"barStyle\"\n  />\n</template>\n<script lang=\"ts\" setup>\nimport { getCurrentInstance, inject, nextTick, ref, watch } from 'vue'\nimport { useResizeObserver } from '@vueuse/core'\nimport { capitalize, throwError } from '@element-plus/utils'\nimport { tabsRootContextKey } from '@element-plus/tokens'\nimport { useNamespace } from '@element-plus/hooks'\nimport { tabBarProps } from './tab-bar'\n\nimport type { CSSProperties } from 'vue'\n\nconst COMPONENT_NAME = 'ElTabBar'\ndefineOptions({\n  name: 'ElTabBar',\n})\nconst props = defineProps(tabBarProps)\n\nconst instance = getCurrentInstance()!\nconst rootTabs = inject(tabsRootContextKey)\nif (!rootTabs) throwError(COMPONENT_NAME, '<el-tabs><el-tab-bar /></el-tabs>')\n\nconst ns = useNamespace('tabs')\n\nconst barRef = ref<HTMLDivElement>()\nconst barStyle = ref<CSSProperties>()\n\nconst getBarStyle = (): CSSProperties => {\n  let offset = 0\n  let tabSize = 0\n\n  const sizeName = ['top', 'bottom'].includes(rootTabs.props.tabPosition)\n    ? 'width'\n    : 'height'\n  const sizeDir = sizeName === 'width' ? 'x' : 'y'\n\n  props.tabs.every((tab) => {\n    const $el = instance.parent?.refs?.[`tab-${tab.paneName}`] as HTMLElement\n    if (!$el) return false\n\n    if (!tab.active) {\n      return true\n    }\n\n    tabSize = $el[`client${capitalize(sizeName)}`]\n    const position = sizeDir === 'x' ? 'left' : 'top'\n    offset =\n      $el.getBoundingClientRect()[position] -\n      ($el.parentElement?.getBoundingClientRect()[position] ?? 0)\n    const tabStyles = window.getComputedStyle($el)\n\n    if (sizeName === 'width') {\n      if (props.tabs.length > 1) {\n        tabSize -=\n          Number.parseFloat(tabStyles.paddingLeft) +\n          Number.parseFloat(tabStyles.paddingRight)\n      }\n      offset += Number.parseFloat(tabStyles.paddingLeft)\n    }\n    return false\n  })\n\n  return {\n    [sizeName]: `${tabSize}px`,\n    transform: `translate${capitalize(sizeDir)}(${offset}px)`,\n  }\n}\n\nconst update = () => (barStyle.value = getBarStyle())\n\nwatch(\n  () => props.tabs,\n  async () => {\n    await nextTick()\n    update()\n  },\n  { immediate: true }\n)\nuseResizeObserver(barRef, () => update())\n\ndefineExpose({\n  /** @description tab root html element */\n  ref: barRef,\n  /** @description method to manually update tab bar style */\n  update,\n})\n</script>\n"],"names":[],"mappings":"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"}

package/es/components/tabs/src/tab-nav.d.ts

@@ -1,9 +1,6 @@
 import type { ExtractPropTypes } from 'vue';
 import type { TabsPaneContext } from 'element-plus/es/tokens';
-export interface Scrollable {
-    next?: boolean;
-    prev?: number;
-}
+import type { TabPanelName } from './tabs';
 export declare const tabNavProps: {
     readonly panes: import("element-plus/es/utils").BuildPropReturn<import("element-plus/es/utils").PropWrapper<{
         uid: number;
@@ -22,13 +19,13 @@ export declare const tabNavProps: {
     }[]>, () => [], unknown, unknown, unknown>;
     readonly currentName: import("element-plus/es/utils").BuildPropReturn<readonly [StringConstructor, NumberConstructor], "", unknown, unknown, unknown>;
     readonly editable: BooleanConstructor;
-    readonly onTabClick: import("element-plus/es/utils").BuildPropReturn<import("element-plus/es/utils").PropWrapper<(tab: TabsPaneContext, tabName: string | number, ev: Event) => void>, () => void, unknown, unknown, unknown>;
+    readonly onTabClick: import("element-plus/es/utils").BuildPropReturn<import("element-plus/es/utils").PropWrapper<(tab: TabsPaneContext, tabName: TabPanelName, ev: Event) => void>, () => void, unknown, unknown, unknown>;
     readonly onTabRemove: import("element-plus/es/utils").BuildPropReturn<import("element-plus/es/utils").PropWrapper<(tab: TabsPaneContext, ev: Event) => void>, () => void, unknown, unknown, unknown>;
     readonly type: import("element-plus/es/utils").BuildPropReturn<StringConstructor, "", unknown, "" | "card" | "border-card", unknown>;
     readonly stretch: BooleanConstructor;
 };
 export declare type TabNavProps = ExtractPropTypes<typeof tabNavProps>;
-declare const _default: import("vue").DefineComponent<{
+declare const TabNav: import("vue").DefineComponent<{
     readonly panes: import("element-plus/es/utils").BuildPropReturn<import("element-plus/es/utils").PropWrapper<{
         uid: number;
         instance: import("vue").ShallowReactive<import("vue").ComponentInternalInstance>;
@@ -46,41 +43,11 @@ declare const _default: import("vue").DefineComponent<{
     }[]>, () => [], unknown, unknown, unknown>;
     readonly currentName: import("element-plus/es/utils").BuildPropReturn<readonly [StringConstructor, NumberConstructor], "", unknown, unknown, unknown>;
     readonly editable: BooleanConstructor;
-    readonly onTabClick: import("element-plus/es/utils").BuildPropReturn<import("element-plus/es/utils").PropWrapper<(tab: {
-        uid: number;
-        instance: import("vue").ShallowReactive<import("vue").ComponentInternalInstance>;
-        props: {
-            readonly disabled: boolean;
-            readonly name: import("element-plus/es/utils").BuildPropType<readonly [StringConstructor, NumberConstructor], unknown, unknown>;
-            readonly label: string;
-            readonly closable: boolean;
-            readonly lazy: boolean;
-        };
-        paneName: string | number | undefined;
-        active: boolean;
-        index: string | undefined;
-        isClosable: boolean;
-    }, tabName: string | number, ev: Event) => void>, () => void, unknown, unknown, unknown>;
-    readonly onTabRemove: import("element-plus/es/utils").BuildPropReturn<import("element-plus/es/utils").PropWrapper<(tab: {
-        uid: number;
-        instance: import("vue").ShallowReactive<import("vue").ComponentInternalInstance>;
-        props: {
-            readonly disabled: boolean;
-            readonly name: import("element-plus/es/utils").BuildPropType<readonly [StringConstructor, NumberConstructor], unknown, unknown>;
-            readonly label: string;
-            readonly closable: boolean;
-            readonly lazy: boolean;
-        };
-        paneName: string | number | undefined;
-        active: boolean;
-        index: string | undefined;
-        isClosable: boolean;
-    }, ev: Event) => void>, () => void, unknown, unknown, unknown>;
+    readonly onTabClick: import("element-plus/es/utils").BuildPropReturn<import("element-plus/es/utils").PropWrapper<(tab: TabsPaneContext, tabName: TabPanelName, ev: Event) => void>, () => void, unknown, unknown, unknown>;
+    readonly onTabRemove: import("element-plus/es/utils").BuildPropReturn<import("element-plus/es/utils").PropWrapper<(tab: TabsPaneContext, ev: Event) => void>, () => void, unknown, unknown, unknown>;
     readonly type: import("element-plus/es/utils").BuildPropReturn<StringConstructor, "", unknown, "" | "card" | "border-card", unknown>;
     readonly stretch: BooleanConstructor;
-}, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
-    [key: string]: any;
-}>, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<ExtractPropTypes<{
+}, () => JSX.Element, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<ExtractPropTypes<{
     readonly panes: import("element-plus/es/utils").BuildPropReturn<import("element-plus/es/utils").PropWrapper<{
         uid: number;
         instance: import("vue").ShallowReactive<import("vue").ComponentInternalInstance>;
@@ -98,36 +65,8 @@ declare const _default: import("vue").DefineComponent<{
     }[]>, () => [], unknown, unknown, unknown>;
     readonly currentName: import("element-plus/es/utils").BuildPropReturn<readonly [StringConstructor, NumberConstructor], "", unknown, unknown, unknown>;
     readonly editable: BooleanConstructor;
-    readonly onTabClick: import("element-plus/es/utils").BuildPropReturn<import("element-plus/es/utils").PropWrapper<(tab: {
-        uid: number;
-        instance: import("vue").ShallowReactive<import("vue").ComponentInternalInstance>;
-        props: {
-            readonly disabled: boolean;
-            readonly name: import("element-plus/es/utils").BuildPropType<readonly [StringConstructor, NumberConstructor], unknown, unknown>;
-            readonly label: string;
-            readonly closable: boolean;
-            readonly lazy: boolean;
-        };
-        paneName: string | number | undefined;
-        active: boolean;
-        index: string | undefined;
-        isClosable: boolean;
-    }, tabName: string | number, ev: Event) => void>, () => void, unknown, unknown, unknown>;
-    readonly onTabRemove: import("element-plus/es/utils").BuildPropReturn<import("element-plus/es/utils").PropWrapper<(tab: {
-        uid: number;
-        instance: import("vue").ShallowReactive<import("vue").ComponentInternalInstance>;
-        props: {
-            readonly disabled: boolean;
-            readonly name: import("element-plus/es/utils").BuildPropType<readonly [StringConstructor, NumberConstructor], unknown, unknown>;
-            readonly label: string;
-            readonly closable: boolean;
-            readonly lazy: boolean;
-        };
-        paneName: string | number | undefined;
-        active: boolean;
-        index: string | undefined;
-        isClosable: boolean;
-    }, ev: Event) => void>, () => void, unknown, unknown, unknown>;
+    readonly onTabClick: import("element-plus/es/utils").BuildPropReturn<import("element-plus/es/utils").PropWrapper<(tab: TabsPaneContext, tabName: TabPanelName, ev: Event) => void>, () => void, unknown, unknown, unknown>;
+    readonly onTabRemove: import("element-plus/es/utils").BuildPropReturn<import("element-plus/es/utils").PropWrapper<(tab: TabsPaneContext, ev: Event) => void>, () => void, unknown, unknown, unknown>;
     readonly type: import("element-plus/es/utils").BuildPropReturn<StringConstructor, "", unknown, "" | "card" | "border-card", unknown>;
     readonly stretch: BooleanConstructor;
 }>>, {
@@ -150,35 +89,8 @@ declare const _default: import("vue").DefineComponent<{
         isClosable: boolean;
     }[];
     currentName: import("element-plus/es/utils").BuildPropType<readonly [StringConstructor, NumberConstructor], unknown, unknown>;
-    onTabClick: (tab: {
-        uid: number;
-        instance: import("vue").ShallowReactive<import("vue").ComponentInternalInstance>;
-        props: {
-            readonly disabled: boolean;
-            readonly name: import("element-plus/es/utils").BuildPropType<readonly [StringConstructor, NumberConstructor], unknown, unknown>;
-            readonly label: string;
-            readonly closable: boolean;
-            readonly lazy: boolean;
-        };
-        paneName: string | number | undefined;
-        active: boolean;
-        index: string | undefined;
-        isClosable: boolean;
-    }, tabName: string | number, ev: Event) => void;
-    onTabRemove: (tab: {
-        uid: number;
-        instance: import("vue").ShallowReactive<import("vue").ComponentInternalInstance>;
-        props: {
-            readonly disabled: boolean;
-            readonly name: import("element-plus/es/utils").BuildPropType<readonly [StringConstructor, NumberConstructor], unknown, unknown>;
-            readonly label: string;
-            readonly closable: boolean;
-            readonly lazy: boolean;
-        };
-        paneName: string | number | undefined;
-        active: boolean;
-        index: string | undefined;
-        isClosable: boolean;
-    }, ev: Event) => void;
+    onTabClick: (tab: TabsPaneContext, tabName: TabPanelName, ev: Event) => void;
+    onTabRemove: (tab: TabsPaneContext, ev: Event) => void;
 }>;
-export default _default;
+export declare type TabNavInstance = InstanceType<typeof TabNav>;
+export default TabNav;

package/es/components/tabs/src/tab-nav.mjs

@@ -1,4 +1,4 @@
-import { defineComponent, inject, ref, computed, watch, onMounted, onUpdated, h } from 'vue';
+import { defineComponent, inject, ref, computed, watch, onMounted, onUpdated, createVNode } from 'vue';
 import { NOOP, capitalize } from '@vue/shared';
 import { useDocumentVisibility, useWindowFocus, useResizeObserver } from '@vueuse/core';
 import '../../../utils/index.mjs';
@@ -6,11 +6,13 @@ import '../../../constants/index.mjs';
 import { ElIcon } from '../../icon/index.mjs';
 import { ArrowLeft, ArrowRight, Close } from '@element-plus/icons-vue';
 import '../../../tokens/index.mjs';
+import '../../../hooks/index.mjs';
 import TabBar from './tab-bar2.mjs';
 import { buildProps, definePropType } from '../../../utils/vue/props.mjs';
 import { mutable } from '../../../utils/typescript.mjs';
 import { tabsRootContextKey } from '../../../tokens/tabs.mjs';
 import { throwError } from '../../../utils/error.mjs';
+import { useNamespace } from '../../../hooks/use-namespace/index.mjs';
 import { EVENT_CODE } from '../../../constants/aria.mjs';
 
 const tabNavProps = buildProps({
@@ -39,22 +41,25 @@ const tabNavProps = buildProps({
   stretch: Boolean
 });
 const COMPONENT_NAME = "ElTabNav";
-var TabNav = defineComponent({
+const TabNav = defineComponent({
   name: COMPONENT_NAME,
   props: tabNavProps,
-  setup(props, { expose }) {
-    const visibility = useDocumentVisibility();
-    const focused = useWindowFocus();
+  setup(props, {
+    expose
+  }) {
     const rootTabs = inject(tabsRootContextKey);
     if (!rootTabs)
-      throwError(COMPONENT_NAME, `ElTabNav must be nested inside ElTabs`);
+      throwError(COMPONENT_NAME, `<el-tabs><tab-nav /></el-tabs>`);
+    const ns = useNamespace("tabs");
+    const visibility = useDocumentVisibility();
+    const focused = useWindowFocus();
+    const navScroll$ = ref();
+    const nav$ = ref();
+    const el$ = ref();
     const scrollable = ref(false);
     const navOffset = ref(0);
     const isFocus = ref(false);
     const focusable = ref(true);
-    const navScroll$ = ref();
-    const nav$ = ref();
-    const el$ = ref();
     const sizeName = computed(() => ["top", "bottom"].includes(rootTabs.props.tabPosition) ? "width" : "height");
     const navStyle = computed(() => {
       const dir = sizeName.value === "width" ? "X" : "Y";
@@ -138,7 +143,12 @@ var TabNav = defineComponent({
     };
     const changeTab = (e) => {
       const code = e.code;
-      const { up, down, left, right } = EVENT_CODE;
+      const {
+        up,
+        down,
+        left,
+        right
+      } = EVENT_CODE;
       if (![up, down, left, right].includes(code))
         return;
       const tabList = Array.from(e.currentTarget.querySelectorAll("[role=tab]"));
@@ -188,93 +198,67 @@ var TabNav = defineComponent({
       removeFocus
     });
     return () => {
-      const scrollBtn = scrollable.value ? [
-        h("span", {
-          class: [
-            "el-tabs__nav-prev",
-            scrollable.value.prev ? "" : "is-disabled"
-          ],
-          onClick: scrollPrev
-        }, [h(ElIcon, {}, { default: () => h(ArrowLeft) })]),
-        h("span", {
-          class: [
-            "el-tabs__nav-next",
-            scrollable.value.next ? "" : "is-disabled"
-          ],
-          onClick: scrollNext
-        }, [h(ElIcon, {}, { default: () => h(ArrowRight) })])
-      ] : null;
+      const scrollBtn = scrollable.value ? [createVNode("span", {
+        "class": [ns.e("nav-prev"), ns.is("disabled", !scrollable.value.prev)],
+        "onClick": scrollPrev
+      }, [createVNode(ElIcon, null, {
+        default: () => [createVNode(ArrowLeft, null, null)]
+      })]), createVNode("span", {
+        "class": [ns.e("nav-next"), ns.is("disabled", !scrollable.value.next)],
+        "onClick": scrollNext
+      }, [createVNode(ElIcon, null, {
+        default: () => [createVNode(ArrowRight, null, null)]
+      })])] : null;
       const tabs = props.panes.map((pane, index) => {
         var _a, _b;
         const tabName = pane.props.name || pane.index || `${index}`;
         const closable = pane.isClosable || props.editable;
         pane.index = `${index}`;
-        const btnClose = closable ? h(ElIcon, {
-          class: "is-icon-close",
-          onClick: (ev) => props.onTabRemove(pane, ev)
-        }, { default: () => h(Close) }) : null;
+        const btnClose = closable ? createVNode(ElIcon, {
+          "class": "is-icon-close",
+          "onClick": (ev) => props.onTabRemove(pane, ev)
+        }, {
+          default: () => [createVNode(Close, null, null)]
+        }) : null;
         const tabLabelContent = ((_b = (_a = pane.instance.slots).label) == null ? void 0 : _b.call(_a)) || pane.props.label;
         const tabindex = pane.active ? 0 : -1;
-        return h("div", {
-          class: {
-            "el-tabs__item": true,
-            [`is-${rootTabs.props.tabPosition}`]: true,
-            "is-active": pane.active,
-            "is-disabled": pane.props.disabled,
-            "is-closable": closable,
-            "is-focus": isFocus
-          },
-          id: `tab-${tabName}`,
-          key: `tab-${tabName}`,
+        return createVNode("div", {
+          "ref": `tab-${tabName}`,
+          "class": [ns.e("item"), ns.is(rootTabs.props.tabPosition), ns.is("active", pane.active), ns.is("disabled", pane.props.disabled), ns.is("closable", closable), ns.is("focus", isFocus.value)],
+          "id": `tab-${tabName}`,
+          "key": `tab-${tabName}`,
           "aria-controls": `pane-${tabName}`,
-          role: "tab",
+          "role": "tab",
           "aria-selected": pane.active,
-          ref: `tab-${tabName}`,
-          tabindex,
-          onFocus: () => setFocus(),
-          onBlur: () => removeFocus(),
-          onClick: (ev) => {
+          "tabindex": tabindex,
+          "onFocus": () => setFocus(),
+          "onBlur": () => removeFocus(),
+          "onClick": (ev) => {
             removeFocus();
             props.onTabClick(pane, tabName, ev);
           },
-          onKeydown: (ev) => {
+          "onKeydown": (ev) => {
             if (closable && (ev.code === EVENT_CODE.delete || ev.code === EVENT_CODE.backspace)) {
               props.onTabRemove(pane, ev);
             }
           }
-        }, [tabLabelContent, btnClose]);
+        }, [...[tabLabelContent, btnClose]]);
       });
-      return h("div", {
-        ref: el$,
-        class: [
-          "el-tabs__nav-wrap",
-          scrollable.value ? "is-scrollable" : "",
-          `is-${rootTabs.props.tabPosition}`
-        ]
-      }, [
-        scrollBtn,
-        h("div", {
-          class: "el-tabs__nav-scroll",
-          ref: navScroll$
-        }, [
-          h("div", {
-            class: [
-              "el-tabs__nav",
-              `is-${rootTabs.props.tabPosition}`,
-              props.stretch && ["top", "bottom"].includes(rootTabs.props.tabPosition) ? "is-stretch" : ""
-            ],
-            ref: nav$,
-            style: navStyle.value,
-            role: "tablist",
-            onKeydown: changeTab
-          }, [
-            !props.type ? h(TabBar, {
-              tabs: [...props.panes]
-            }) : null,
-            tabs
-          ])
-        ])
-      ]);
+      return createVNode("div", {
+        "ref": el$,
+        "class": [ns.e("nav-wrap"), ns.is("scrollable", !!scrollable.value), ns.is(rootTabs.props.tabPosition)]
+      }, [scrollBtn, createVNode("div", {
+        "class": ns.e("nav-scroll"),
+        "ref": navScroll$
+      }, [createVNode("div", {
+        "class": [ns.e("nav"), ns.is(rootTabs.props.tabPosition), ns.is("stretch", props.stretch && ["top", "bottom"].includes(rootTabs.props.tabPosition))],
+        "ref": nav$,
+        "style": navStyle.value,
+        "role": "tablist",
+        "onKeydown": changeTab
+      }, [...[!props.type ? createVNode(TabBar, {
+        "tabs": [...props.panes]
+      }, null) : null, tabs]])])]);
     };
   }
 });