element-plus 2.1.7 → 2.1.10

package/lib/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/lib/components/tabs/src/tab-bar2.js

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

package/lib/components/tabs/src/tab-bar2.js.map

@@ -1 +1 @@
-{"version":3,"file":"tab-bar2.js","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":["defineComponent","tabBar","getCurrentInstance","inject","tabsRootContextKey","throwError","ref","capitalize","watch","nextTick","useResizeObserver","_openBlock","_createElementBlock","_normalizeClass","_normalizeStyle"],"mappings":"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"}
+{"version":3,"file":"tab-bar2.js","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":["getCurrentInstance","inject","tabsRootContextKey","throwError","useNamespace","ref","capitalize","watch","nextTick","useResizeObserver"],"mappings":"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"}

package/lib/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/lib/components/tabs/src/tab-nav.js

@@ -7,14 +7,16 @@ var shared = require('@vue/shared');
 var core = require('@vueuse/core');
 require('../../../utils/index.js');
 require('../../../constants/index.js');
-var index = require('../../icon/index.js');
+var index$1 = require('../../icon/index.js');
 var iconsVue = require('@element-plus/icons-vue');
 require('../../../tokens/index.js');
+require('../../../hooks/index.js');
 var tabBar = require('./tab-bar2.js');
 var props = require('../../../utils/vue/props.js');
 var typescript = require('../../../utils/typescript.js');
 var tabs = require('../../../tokens/tabs.js');
 var error = require('../../../utils/error.js');
+var index = require('../../../hooks/use-namespace/index.js');
 var aria = require('../../../constants/aria.js');
 
 const tabNavProps = props.buildProps({
@@ -43,22 +45,25 @@ const tabNavProps = props.buildProps({
   stretch: Boolean
 });
 const COMPONENT_NAME = "ElTabNav";
-var TabNav = vue.defineComponent({
+const TabNav = vue.defineComponent({
   name: COMPONENT_NAME,
   props: tabNavProps,
-  setup(props, { expose }) {
-    const visibility = core.useDocumentVisibility();
-    const focused = core.useWindowFocus();
+  setup(props, {
+    expose
+  }) {
     const rootTabs = vue.inject(tabs.tabsRootContextKey);
     if (!rootTabs)
-      error.throwError(COMPONENT_NAME, `ElTabNav must be nested inside ElTabs`);
+      error.throwError(COMPONENT_NAME, `<el-tabs><tab-nav /></el-tabs>`);
+    const ns = index.useNamespace("tabs");
+    const visibility = core.useDocumentVisibility();
+    const focused = core.useWindowFocus();
+    const navScroll$ = vue.ref();
+    const nav$ = vue.ref();
+    const el$ = vue.ref();
     const scrollable = vue.ref(false);
     const navOffset = vue.ref(0);
     const isFocus = vue.ref(false);
     const focusable = vue.ref(true);
-    const navScroll$ = vue.ref();
-    const nav$ = vue.ref();
-    const el$ = vue.ref();
     const sizeName = vue.computed(() => ["top", "bottom"].includes(rootTabs.props.tabPosition) ? "width" : "height");
     const navStyle = vue.computed(() => {
       const dir = sizeName.value === "width" ? "X" : "Y";
@@ -142,7 +147,12 @@ var TabNav = vue.defineComponent({
     };
     const changeTab = (e) => {
       const code = e.code;
-      const { up, down, left, right } = aria.EVENT_CODE;
+      const {
+        up,
+        down,
+        left,
+        right
+      } = aria.EVENT_CODE;
       if (![up, down, left, right].includes(code))
         return;
       const tabList = Array.from(e.currentTarget.querySelectorAll("[role=tab]"));
@@ -192,93 +202,67 @@ var TabNav = vue.defineComponent({
       removeFocus
     });
     return () => {
-      const scrollBtn = scrollable.value ? [
-        vue.h("span", {
-          class: [
-            "el-tabs__nav-prev",
-            scrollable.value.prev ? "" : "is-disabled"
-          ],
-          onClick: scrollPrev
-        }, [vue.h(index.ElIcon, {}, { default: () => vue.h(iconsVue.ArrowLeft) })]),
-        vue.h("span", {
-          class: [
-            "el-tabs__nav-next",
-            scrollable.value.next ? "" : "is-disabled"
-          ],
-          onClick: scrollNext
-        }, [vue.h(index.ElIcon, {}, { default: () => vue.h(iconsVue.ArrowRight) })])
-      ] : null;
-      const tabs = props.panes.map((pane, index$1) => {
+      const scrollBtn = scrollable.value ? [vue.createVNode("span", {
+        "class": [ns.e("nav-prev"), ns.is("disabled", !scrollable.value.prev)],
+        "onClick": scrollPrev
+      }, [vue.createVNode(index$1.ElIcon, null, {
+        default: () => [vue.createVNode(iconsVue.ArrowLeft, null, null)]
+      })]), vue.createVNode("span", {
+        "class": [ns.e("nav-next"), ns.is("disabled", !scrollable.value.next)],
+        "onClick": scrollNext
+      }, [vue.createVNode(index$1.ElIcon, null, {
+        default: () => [vue.createVNode(iconsVue.ArrowRight, null, null)]
+      })])] : null;
+      const tabs = props.panes.map((pane, index) => {
         var _a, _b;
-        const tabName = pane.props.name || pane.index || `${index$1}`;
+        const tabName = pane.props.name || pane.index || `${index}`;
         const closable = pane.isClosable || props.editable;
-        pane.index = `${index$1}`;
-        const btnClose = closable ? vue.h(index.ElIcon, {
-          class: "is-icon-close",
-          onClick: (ev) => props.onTabRemove(pane, ev)
-        }, { default: () => vue.h(iconsVue.Close) }) : null;
+        pane.index = `${index}`;
+        const btnClose = closable ? vue.createVNode(index$1.ElIcon, {
+          "class": "is-icon-close",
+          "onClick": (ev) => props.onTabRemove(pane, ev)
+        }, {
+          default: () => [vue.createVNode(iconsVue.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 vue.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 vue.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 === aria.EVENT_CODE.delete || ev.code === aria.EVENT_CODE.backspace)) {
               props.onTabRemove(pane, ev);
             }
           }
-        }, [tabLabelContent, btnClose]);
+        }, [...[tabLabelContent, btnClose]]);
       });
-      return vue.h("div", {
-        ref: el$,
-        class: [
-          "el-tabs__nav-wrap",
-          scrollable.value ? "is-scrollable" : "",
-          `is-${rootTabs.props.tabPosition}`
-        ]
-      }, [
-        scrollBtn,
-        vue.h("div", {
-          class: "el-tabs__nav-scroll",
-          ref: navScroll$
-        }, [
-          vue.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 ? vue.h(tabBar["default"], {
-              tabs: [...props.panes]
-            }) : null,
-            tabs
-          ])
-        ])
-      ]);
+      return vue.createVNode("div", {
+        "ref": el$,
+        "class": [ns.e("nav-wrap"), ns.is("scrollable", !!scrollable.value), ns.is(rootTabs.props.tabPosition)]
+      }, [scrollBtn, vue.createVNode("div", {
+        "class": ns.e("nav-scroll"),
+        "ref": navScroll$
+      }, [vue.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 ? vue.createVNode(tabBar["default"], {
+        "tabs": [...props.panes]
+      }, null) : null, tabs]])])]);
     };
   }
 });