element-plus 2.1.7 → 2.1.8

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

@@ -1 +1 @@
-{"version":3,"file":"tab-nav.mjs","sources":["../../../../../../packages/components/tabs/src/tab-nav.ts"],"sourcesContent":["import {\n  computed,\n  defineComponent,\n  h,\n  inject,\n  onMounted,\n  onUpdated,\n  ref,\n  watch,\n} from 'vue'\nimport { NOOP, capitalize } from '@vue/shared'\nimport {\n  useDocumentVisibility,\n  useResizeObserver,\n  useWindowFocus,\n} from '@vueuse/core'\nimport {\n  buildProps,\n  definePropType,\n  mutable,\n  throwError,\n} from '@element-plus/utils'\nimport { EVENT_CODE } from '@element-plus/constants'\nimport { ElIcon } from '@element-plus/components/icon'\nimport { ArrowLeft, ArrowRight, Close } from '@element-plus/icons-vue'\nimport { tabsRootContextKey } from '@element-plus/tokens'\nimport TabBar from './tab-bar.vue'\nimport type { CSSProperties, ExtractPropTypes } from 'vue'\nimport type { TabsPaneContext } from '@element-plus/tokens'\nexport interface Scrollable {\n  next?: boolean\n  prev?: number\n}\n\nexport const tabNavProps = buildProps({\n  panes: {\n    type: definePropType<TabsPaneContext[]>(Array),\n    default: () => mutable([] as const),\n  },\n  currentName: {\n    type: [String, Number],\n    default: '',\n  },\n  editable: Boolean,\n  onTabClick: {\n    type: definePropType<\n      (tab: TabsPaneContext, tabName: string | number, ev: Event) => void\n    >(Function),\n    default: NOOP,\n  },\n  onTabRemove: {\n    type: definePropType<(tab: TabsPaneContext, ev: Event) => void>(Function),\n    default: NOOP,\n  },\n  type: {\n    type: String,\n    values: ['card', 'border-card', ''],\n    default: '',\n  },\n  stretch: Boolean,\n} as const)\n\nexport type TabNavProps = ExtractPropTypes<typeof tabNavProps>\n\nconst COMPONENT_NAME = 'ElTabNav'\nexport default defineComponent({\n  name: COMPONENT_NAME,\n  props: tabNavProps,\n\n  setup(props, { expose }) {\n    const visibility = useDocumentVisibility()\n    const focused = useWindowFocus()\n\n    const rootTabs = inject(tabsRootContextKey)\n    if (!rootTabs)\n      throwError(COMPONENT_NAME, `ElTabNav must be nested inside ElTabs`)\n\n    const scrollable = ref<false | Scrollable>(false)\n    const navOffset = ref(0)\n    const isFocus = ref(false)\n    const focusable = ref(true)\n\n    const navScroll$ = ref<HTMLDivElement>()\n    const nav$ = ref<HTMLDivElement>()\n    const el$ = ref<HTMLDivElement>()\n\n    const sizeName = computed(() =>\n      ['top', 'bottom'].includes(rootTabs.props.tabPosition)\n        ? 'width'\n        : 'height'\n    )\n    const navStyle = computed<CSSProperties>(() => {\n      const dir = sizeName.value === 'width' ? 'X' : 'Y'\n      return {\n        transform: `translate${dir}(-${navOffset.value}px)`,\n      }\n    })\n\n    const scrollPrev = () => {\n      if (!navScroll$.value) return\n\n      const containerSize =\n        navScroll$.value[`offset${capitalize(sizeName.value)}`]\n      const currentOffset = navOffset.value\n\n      if (!currentOffset) return\n\n      const newOffset =\n        currentOffset > containerSize ? currentOffset - containerSize : 0\n\n      navOffset.value = newOffset\n    }\n\n    const scrollNext = () => {\n      if (!navScroll$.value || !nav$.value) return\n\n      const navSize = nav$.value[`offset${capitalize(sizeName.value)}`]\n      const containerSize =\n        navScroll$.value[`offset${capitalize(sizeName.value)}`]\n      const currentOffset = navOffset.value\n\n      if (navSize - currentOffset <= containerSize) return\n\n      const newOffset =\n        navSize - currentOffset > containerSize * 2\n          ? currentOffset + containerSize\n          : navSize - containerSize\n\n      navOffset.value = newOffset\n    }\n\n    const scrollToActiveTab = () => {\n      const nav = nav$.value\n      if (!scrollable.value || !el$.value || !navScroll$.value || !nav) return\n\n      const activeTab = el$.value.querySelector('.is-active')\n      if (!activeTab) return\n\n      const navScroll = navScroll$.value\n      const isHorizontal = ['top', 'bottom'].includes(\n        rootTabs.props.tabPosition\n      )\n      const activeTabBounding = activeTab.getBoundingClientRect()\n      const navScrollBounding = navScroll.getBoundingClientRect()\n      const maxOffset = isHorizontal\n        ? nav.offsetWidth - navScrollBounding.width\n        : nav.offsetHeight - navScrollBounding.height\n      const currentOffset = navOffset.value\n      let newOffset = currentOffset\n\n      if (isHorizontal) {\n        if (activeTabBounding.left < navScrollBounding.left) {\n          newOffset =\n            currentOffset - (navScrollBounding.left - activeTabBounding.left)\n        }\n        if (activeTabBounding.right > navScrollBounding.right) {\n          newOffset =\n            currentOffset + activeTabBounding.right - navScrollBounding.right\n        }\n      } else {\n        if (activeTabBounding.top < navScrollBounding.top) {\n          newOffset =\n            currentOffset - (navScrollBounding.top - activeTabBounding.top)\n        }\n        if (activeTabBounding.bottom > navScrollBounding.bottom) {\n          newOffset =\n            currentOffset +\n            (activeTabBounding.bottom - navScrollBounding.bottom)\n        }\n      }\n      newOffset = Math.max(newOffset, 0)\n      navOffset.value = Math.min(newOffset, maxOffset)\n    }\n\n    const update = () => {\n      if (!nav$.value || !navScroll$.value) return\n\n      const navSize = nav$.value[`offset${capitalize(sizeName.value)}`]\n      const containerSize =\n        navScroll$.value[`offset${capitalize(sizeName.value)}`]\n      const currentOffset = navOffset.value\n\n      if (containerSize < navSize) {\n        const currentOffset = navOffset.value\n        scrollable.value = scrollable.value || {}\n        scrollable.value.prev = currentOffset\n        scrollable.value.next = currentOffset + containerSize < navSize\n        if (navSize - currentOffset < containerSize) {\n          navOffset.value = navSize - containerSize\n        }\n      } else {\n        scrollable.value = false\n        if (currentOffset > 0) {\n          navOffset.value = 0\n        }\n      }\n    }\n\n    const changeTab = (e: KeyboardEvent) => {\n      const code = e.code\n\n      const { up, down, left, right } = EVENT_CODE\n      if (![up, down, left, right].includes(code)) return\n\n      // 左右上下键更换tab\n      const tabList = Array.from(\n        (e.currentTarget as HTMLDivElement).querySelectorAll<HTMLDivElement>(\n          '[role=tab]'\n        )\n      )\n      const currentIndex = tabList.indexOf(e.target as HTMLDivElement)\n\n      let nextIndex: number\n      if (code === left || code === up) {\n        // left\n        if (currentIndex === 0) {\n          // first\n          nextIndex = tabList.length - 1\n        } else {\n          nextIndex = currentIndex - 1\n        }\n      } else {\n        // right\n        if (currentIndex < tabList.length - 1) {\n          // not last\n          nextIndex = currentIndex + 1\n        } else {\n          nextIndex = 0\n        }\n      }\n      tabList[nextIndex].focus() // 改变焦点元素\n      tabList[nextIndex].click() // 选中下一个tab\n      setFocus()\n    }\n\n    const setFocus = () => {\n      if (focusable.value) isFocus.value = true\n    }\n    const removeFocus = () => (isFocus.value = false)\n\n    watch(visibility, (visibility) => {\n      if (visibility === 'hidden') {\n        focusable.value = false\n      } else if (visibility === 'visible') {\n        setTimeout(() => (focusable.value = true), 50)\n      }\n    })\n    watch(focused, (focused) => {\n      if (focused) {\n        setTimeout(() => (focusable.value = true), 50)\n      } else {\n        focusable.value = false\n      }\n    })\n\n    useResizeObserver(el$, update)\n\n    onMounted(() => setTimeout(() => scrollToActiveTab(), 0))\n    onUpdated(() => update())\n\n    expose({\n      scrollToActiveTab,\n      removeFocus,\n    })\n\n    return () => {\n      const scrollBtn = scrollable.value\n        ? [\n            h(\n              'span',\n              {\n                class: [\n                  'el-tabs__nav-prev',\n                  scrollable.value.prev ? '' : 'is-disabled',\n                ],\n                onClick: scrollPrev,\n              },\n              [h(ElIcon, {}, { default: () => h(ArrowLeft) })]\n            ),\n            h(\n              'span',\n              {\n                class: [\n                  'el-tabs__nav-next',\n                  scrollable.value.next ? '' : 'is-disabled',\n                ],\n                onClick: scrollNext,\n              },\n              [h(ElIcon, {}, { default: () => h(ArrowRight) })]\n            ),\n          ]\n        : null\n\n      const tabs = props.panes.map((pane, index) => {\n        const tabName = pane.props.name || pane.index || `${index}`\n        const closable = pane.isClosable || props.editable\n        pane.index = `${index}`\n\n        const btnClose = closable\n          ? h(\n              ElIcon,\n              {\n                class: 'is-icon-close',\n                onClick: (ev: MouseEvent) => props.onTabRemove(pane, ev),\n              },\n              { default: () => h(Close) }\n            )\n          : null\n\n        const tabLabelContent =\n          pane.instance.slots.label?.() || pane.props.label\n        const tabindex = pane.active ? 0 : -1\n\n        return h(\n          'div',\n          {\n            class: {\n              'el-tabs__item': true,\n              [`is-${rootTabs.props.tabPosition}`]: true,\n              'is-active': pane.active,\n              'is-disabled': pane.props.disabled,\n              'is-closable': closable,\n              'is-focus': isFocus,\n            },\n            id: `tab-${tabName}`,\n            key: `tab-${tabName}`,\n            'aria-controls': `pane-${tabName}`,\n            role: 'tab',\n            'aria-selected': pane.active,\n            ref: `tab-${tabName}`,\n            tabindex,\n            onFocus: () => setFocus(),\n            onBlur: () => removeFocus(),\n            onClick: (ev: MouseEvent) => {\n              removeFocus()\n              props.onTabClick(pane, tabName, ev)\n            },\n            onKeydown: (ev: KeyboardEvent) => {\n              if (\n                closable &&\n                (ev.code === EVENT_CODE.delete ||\n                  ev.code === EVENT_CODE.backspace)\n              ) {\n                props.onTabRemove(pane, ev)\n              }\n            },\n          },\n          [tabLabelContent, btnClose]\n        )\n      })\n\n      return h(\n        'div',\n        {\n          ref: el$,\n          class: [\n            'el-tabs__nav-wrap',\n            scrollable.value ? 'is-scrollable' : '',\n            `is-${rootTabs.props.tabPosition}`,\n          ],\n        },\n        [\n          scrollBtn,\n          h(\n            'div',\n            {\n              class: 'el-tabs__nav-scroll',\n              ref: navScroll$,\n            },\n            [\n              h(\n                'div',\n                {\n                  class: [\n                    'el-tabs__nav',\n                    `is-${rootTabs.props.tabPosition}`,\n                    props.stretch &&\n                    ['top', 'bottom'].includes(rootTabs.props.tabPosition)\n                      ? 'is-stretch'\n                      : '',\n                  ],\n                  ref: nav$,\n                  style: navStyle.value,\n                  role: 'tablist',\n                  onKeydown: changeTab,\n                },\n                [\n                  !props.type\n                    ? h(TabBar, {\n                        tabs: [...props.panes],\n                      })\n                    : null,\n                  tabs,\n                ]\n              ),\n            ]\n          ),\n        ]\n      )\n    }\n  },\n})\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"tab-nav.mjs","sources":["../../../../../../packages/components/tabs/src/tab-nav.tsx"],"sourcesContent":["import {\n  computed,\n  defineComponent,\n  inject,\n  onMounted,\n  onUpdated,\n  ref,\n  watch,\n} from 'vue'\nimport { NOOP } from '@vue/shared'\nimport {\n  useDocumentVisibility,\n  useResizeObserver,\n  useWindowFocus,\n} from '@vueuse/core'\nimport {\n  buildProps,\n  capitalize,\n  definePropType,\n  mutable,\n  throwError,\n} from '@element-plus/utils'\nimport { EVENT_CODE } from '@element-plus/constants'\nimport { ElIcon } from '@element-plus/components/icon'\nimport { ArrowLeft, ArrowRight, Close } from '@element-plus/icons-vue'\nimport { tabsRootContextKey } from '@element-plus/tokens'\nimport { useNamespace } from '@element-plus/hooks'\nimport TabBar from './tab-bar.vue'\nimport type { CSSProperties, ExtractPropTypes } from 'vue'\nimport type { TabsPaneContext } from '@element-plus/tokens'\nimport type { TabPanelName } from './tabs'\n\ninterface Scrollable {\n  next?: boolean\n  prev?: number\n}\n\nexport const tabNavProps = buildProps({\n  panes: {\n    type: definePropType<TabsPaneContext[]>(Array),\n    default: () => mutable([] as const),\n  },\n  currentName: {\n    type: [String, Number],\n    default: '',\n  },\n  editable: Boolean,\n  onTabClick: {\n    type: definePropType<\n      (tab: TabsPaneContext, tabName: TabPanelName, ev: Event) => void\n    >(Function),\n    default: NOOP,\n  },\n  onTabRemove: {\n    type: definePropType<(tab: TabsPaneContext, ev: Event) => void>(Function),\n    default: NOOP,\n  },\n  type: {\n    type: String,\n    values: ['card', 'border-card', ''],\n    default: '',\n  },\n  stretch: Boolean,\n} as const)\n\nexport type TabNavProps = ExtractPropTypes<typeof tabNavProps>\n\nconst COMPONENT_NAME = 'ElTabNav'\nconst TabNav = defineComponent({\n  name: COMPONENT_NAME,\n  props: tabNavProps,\n\n  setup(props, { expose }) {\n    const rootTabs = inject(tabsRootContextKey)\n    if (!rootTabs) throwError(COMPONENT_NAME, `<el-tabs><tab-nav /></el-tabs>`)\n\n    const ns = useNamespace('tabs')\n    const visibility = useDocumentVisibility()\n    const focused = useWindowFocus()\n\n    const navScroll$ = ref<HTMLDivElement>()\n    const nav$ = ref<HTMLDivElement>()\n    const el$ = ref<HTMLDivElement>()\n\n    const scrollable = ref<false | Scrollable>(false)\n    const navOffset = ref(0)\n    const isFocus = ref(false)\n    const focusable = ref(true)\n\n    const sizeName = computed(() =>\n      ['top', 'bottom'].includes(rootTabs.props.tabPosition)\n        ? 'width'\n        : 'height'\n    )\n    const navStyle = computed<CSSProperties>(() => {\n      const dir = sizeName.value === 'width' ? 'X' : 'Y'\n      return {\n        transform: `translate${dir}(-${navOffset.value}px)`,\n      }\n    })\n\n    const scrollPrev = () => {\n      if (!navScroll$.value) return\n\n      const containerSize =\n        navScroll$.value[`offset${capitalize(sizeName.value)}`]\n      const currentOffset = navOffset.value\n\n      if (!currentOffset) return\n\n      const newOffset =\n        currentOffset > containerSize ? currentOffset - containerSize : 0\n\n      navOffset.value = newOffset\n    }\n\n    const scrollNext = () => {\n      if (!navScroll$.value || !nav$.value) return\n\n      const navSize = nav$.value[`offset${capitalize(sizeName.value)}`]\n      const containerSize =\n        navScroll$.value[`offset${capitalize(sizeName.value)}`]\n      const currentOffset = navOffset.value\n\n      if (navSize - currentOffset <= containerSize) return\n\n      const newOffset =\n        navSize - currentOffset > containerSize * 2\n          ? currentOffset + containerSize\n          : navSize - containerSize\n\n      navOffset.value = newOffset\n    }\n\n    const scrollToActiveTab = () => {\n      const nav = nav$.value\n      if (!scrollable.value || !el$.value || !navScroll$.value || !nav) return\n\n      const activeTab = el$.value.querySelector('.is-active')\n      if (!activeTab) return\n\n      const navScroll = navScroll$.value\n      const isHorizontal = ['top', 'bottom'].includes(\n        rootTabs.props.tabPosition\n      )\n      const activeTabBounding = activeTab.getBoundingClientRect()\n      const navScrollBounding = navScroll.getBoundingClientRect()\n      const maxOffset = isHorizontal\n        ? nav.offsetWidth - navScrollBounding.width\n        : nav.offsetHeight - navScrollBounding.height\n      const currentOffset = navOffset.value\n      let newOffset = currentOffset\n\n      if (isHorizontal) {\n        if (activeTabBounding.left < navScrollBounding.left) {\n          newOffset =\n            currentOffset - (navScrollBounding.left - activeTabBounding.left)\n        }\n        if (activeTabBounding.right > navScrollBounding.right) {\n          newOffset =\n            currentOffset + activeTabBounding.right - navScrollBounding.right\n        }\n      } else {\n        if (activeTabBounding.top < navScrollBounding.top) {\n          newOffset =\n            currentOffset - (navScrollBounding.top - activeTabBounding.top)\n        }\n        if (activeTabBounding.bottom > navScrollBounding.bottom) {\n          newOffset =\n            currentOffset +\n            (activeTabBounding.bottom - navScrollBounding.bottom)\n        }\n      }\n      newOffset = Math.max(newOffset, 0)\n      navOffset.value = Math.min(newOffset, maxOffset)\n    }\n\n    const update = () => {\n      if (!nav$.value || !navScroll$.value) return\n\n      const navSize = nav$.value[`offset${capitalize(sizeName.value)}`]\n      const containerSize =\n        navScroll$.value[`offset${capitalize(sizeName.value)}`]\n      const currentOffset = navOffset.value\n\n      if (containerSize < navSize) {\n        const currentOffset = navOffset.value\n        scrollable.value = scrollable.value || {}\n        scrollable.value.prev = currentOffset\n        scrollable.value.next = currentOffset + containerSize < navSize\n        if (navSize - currentOffset < containerSize) {\n          navOffset.value = navSize - containerSize\n        }\n      } else {\n        scrollable.value = false\n        if (currentOffset > 0) {\n          navOffset.value = 0\n        }\n      }\n    }\n\n    const changeTab = (e: KeyboardEvent) => {\n      const code = e.code\n\n      const { up, down, left, right } = EVENT_CODE\n      if (![up, down, left, right].includes(code)) return\n\n      // 左右上下键更换tab\n      const tabList = Array.from(\n        (e.currentTarget as HTMLDivElement).querySelectorAll<HTMLDivElement>(\n          '[role=tab]'\n        )\n      )\n      const currentIndex = tabList.indexOf(e.target as HTMLDivElement)\n\n      let nextIndex: number\n      if (code === left || code === up) {\n        // left\n        if (currentIndex === 0) {\n          // first\n          nextIndex = tabList.length - 1\n        } else {\n          nextIndex = currentIndex - 1\n        }\n      } else {\n        // right\n        if (currentIndex < tabList.length - 1) {\n          // not last\n          nextIndex = currentIndex + 1\n        } else {\n          nextIndex = 0\n        }\n      }\n      tabList[nextIndex].focus() // 改变焦点元素\n      tabList[nextIndex].click() // 选中下一个tab\n      setFocus()\n    }\n\n    const setFocus = () => {\n      if (focusable.value) isFocus.value = true\n    }\n    const removeFocus = () => (isFocus.value = false)\n\n    watch(visibility, (visibility) => {\n      if (visibility === 'hidden') {\n        focusable.value = false\n      } else if (visibility === 'visible') {\n        setTimeout(() => (focusable.value = true), 50)\n      }\n    })\n    watch(focused, (focused) => {\n      if (focused) {\n        setTimeout(() => (focusable.value = true), 50)\n      } else {\n        focusable.value = false\n      }\n    })\n\n    useResizeObserver(el$, update)\n\n    onMounted(() => setTimeout(() => scrollToActiveTab(), 0))\n    onUpdated(() => update())\n\n    expose({\n      scrollToActiveTab,\n      removeFocus,\n    })\n\n    return () => {\n      const scrollBtn = scrollable.value\n        ? [\n            <span\n              class={[\n                ns.e('nav-prev'),\n                ns.is('disabled', !scrollable.value.prev),\n              ]}\n              onClick={scrollPrev}\n            >\n              <ElIcon>\n                <ArrowLeft />\n              </ElIcon>\n            </span>,\n            <span\n              class={[\n                ns.e('nav-next'),\n                ns.is('disabled', !scrollable.value.next),\n              ]}\n              onClick={scrollNext}\n            >\n              <ElIcon>\n                <ArrowRight />\n              </ElIcon>\n            </span>,\n          ]\n        : null\n\n      const tabs = props.panes.map((pane, index) => {\n        const tabName = pane.props.name || pane.index || `${index}`\n        const closable: boolean = pane.isClosable || props.editable\n        pane.index = `${index}`\n\n        const btnClose = closable ? (\n          <ElIcon\n            class=\"is-icon-close\"\n            // @ts-expect-error native event\n            onClick={(ev: MouseEvent) => props.onTabRemove(pane, ev)}\n          >\n            <Close />\n          </ElIcon>\n        ) : null\n\n        const tabLabelContent =\n          pane.instance.slots.label?.() || pane.props.label\n        const tabindex = pane.active ? 0 : -1\n\n        return (\n          <div\n            ref={`tab-${tabName}`}\n            class={[\n              ns.e('item'),\n              ns.is(rootTabs.props.tabPosition),\n              ns.is('active', pane.active),\n              ns.is('disabled', pane.props.disabled),\n              ns.is('closable', closable),\n              ns.is('focus', isFocus.value),\n            ]}\n            id={`tab-${tabName}`}\n            key={`tab-${tabName}`}\n            aria-controls={`pane-${tabName}`}\n            role=\"tab\"\n            aria-selected={pane.active}\n            tabindex={tabindex}\n            onFocus={() => setFocus()}\n            onBlur={() => removeFocus()}\n            onClick={(ev: MouseEvent) => {\n              removeFocus()\n              props.onTabClick(pane, tabName, ev)\n            }}\n            onKeydown={(ev: KeyboardEvent) => {\n              if (\n                closable &&\n                (ev.code === EVENT_CODE.delete ||\n                  ev.code === EVENT_CODE.backspace)\n              ) {\n                props.onTabRemove(pane, ev)\n              }\n            }}\n          >\n            {...[tabLabelContent, btnClose]}\n          </div>\n        )\n      })\n\n      return (\n        <div\n          ref={el$}\n          class={[\n            ns.e('nav-wrap'),\n            ns.is('scrollable', !!scrollable.value),\n            ns.is(rootTabs.props.tabPosition),\n          ]}\n        >\n          {scrollBtn}\n          <div class={ns.e('nav-scroll')} ref={navScroll$}>\n            <div\n              class={[\n                ns.e('nav'),\n                ns.is(rootTabs.props.tabPosition),\n                ns.is(\n                  'stretch',\n                  props.stretch &&\n                    ['top', 'bottom'].includes(rootTabs.props.tabPosition)\n                ),\n              ]}\n              ref={nav$}\n              style={navStyle.value}\n              role=\"tablist\"\n              onKeydown={changeTab}\n            >\n              {...[\n                !props.type ? <TabBar tabs={[...props.panes]} /> : null,\n                tabs,\n              ]}\n            </div>\n          </div>\n        </div>\n      )\n    }\n  },\n})\n\nexport type TabNavInstance = InstanceType<typeof TabNav>\nexport default TabNav\n"],"names":["tabNavProps","buildProps","panes","type","definePropType","Array","default","mutable","currentName","String","Number","editable","Boolean","onTabClick","Function","NOOP","onTabRemove","values","stretch","COMPONENT_NAME","TabNav","defineComponent","name","props","setup","expose","ns","useNamespace","visibility","useDocumentVisibility","focused","useWindowFocus","navScroll$","ref","nav$","el$","scrollable","navOffset","isFocus","focusable","sizeName","computed","includes","rootTabs","tabPosition","navStyle","dir","value","transform","scrollPrev","containerSize","capitalize","currentOffset","newOffset","scrollNext","scrollToActiveTab","activeTab","querySelector","navScroll","navScrollBounding","maxOffset","isHorizontal","offsetWidth","activeTabBounding","right","top","bottom","update","navSize","next","changeTab","up","down","left","EVENT_CODE","currentTarget","currentIndex","nextIndex","tabList","focus","click","setFocus","watch","setTimeout","_createVNode","useResizeObserver","onMounted","onUpdated","removeFocus","scrollBtn","map","pane","tabName","closable","btnClose","ev","tabindex","active","tabLabelContent"],"mappings":"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"}

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

@@ -1,4 +1,5 @@
 import type { ExtractPropTypes } from 'vue';
+import type TabPane from './tab-pane.vue';
 export declare const tabPaneProps: {
     readonly label: import("element-plus/es/utils").BuildPropReturn<StringConstructor, "", unknown, unknown, unknown>;
     readonly name: import("element-plus/es/utils").BuildPropReturn<readonly [StringConstructor, NumberConstructor], "", unknown, unknown, unknown>;
@@ -7,3 +8,4 @@ export declare const tabPaneProps: {
     readonly lazy: BooleanConstructor;
 };
 export declare type TabPaneProps = ExtractPropTypes<typeof tabPaneProps>;
+export declare type TabPaneInstance = InstanceType<typeof TabPane>;

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

@@ -1 +1 @@
-{"version":3,"file":"tab-pane.mjs","sources":["../../../../../../packages/components/tabs/src/tab-pane.ts"],"sourcesContent":["import { buildProps } from '@element-plus/utils'\nimport type { ExtractPropTypes } from 'vue'\n\nexport const tabPaneProps = buildProps({\n  label: {\n    type: String,\n    default: '',\n  },\n  name: {\n    type: [String, Number],\n    default: '',\n  },\n  closable: Boolean,\n  disabled: Boolean,\n  lazy: Boolean,\n} as const)\n\nexport type TabPaneProps = ExtractPropTypes<typeof tabPaneProps>\n"],"names":[],"mappings":";;;AACY,MAAC,YAAY,GAAG,UAAU,CAAC;AACvC,EAAE,KAAK,EAAE;AACT,IAAI,IAAI,EAAE,MAAM;AAChB,IAAI,OAAO,EAAE,EAAE;AACf,GAAG;AACH,EAAE,IAAI,EAAE;AACR,IAAI,IAAI,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC;AAC1B,IAAI,OAAO,EAAE,EAAE;AACf,GAAG;AACH,EAAE,QAAQ,EAAE,OAAO;AACnB,EAAE,QAAQ,EAAE,OAAO;AACnB,EAAE,IAAI,EAAE,OAAO;AACf,CAAC;;;;"}
+{"version":3,"file":"tab-pane.mjs","sources":["../../../../../../packages/components/tabs/src/tab-pane.ts"],"sourcesContent":["import { buildProps } from '@element-plus/utils'\nimport type { ExtractPropTypes } from 'vue'\nimport type TabPane from './tab-pane.vue'\n\nexport const tabPaneProps = buildProps({\n  label: {\n    type: String,\n    default: '',\n  },\n  name: {\n    type: [String, Number],\n    default: '',\n  },\n  closable: Boolean,\n  disabled: Boolean,\n  lazy: Boolean,\n} as const)\n\nexport type TabPaneProps = ExtractPropTypes<typeof tabPaneProps>\n\nexport type TabPaneInstance = InstanceType<typeof TabPane>\n"],"names":[],"mappings":";;;AACY,MAAC,YAAY,GAAG,UAAU,CAAC;AACvC,EAAE,KAAK,EAAE;AACT,IAAI,IAAI,EAAE,MAAM;AAChB,IAAI,OAAO,EAAE,EAAE;AACf,GAAG;AACH,EAAE,IAAI,EAAE;AACR,IAAI,IAAI,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC;AAC1B,IAAI,OAAO,EAAE,EAAE;AACf,GAAG;AACH,EAAE,QAAQ,EAAE,OAAO;AACnB,EAAE,QAAQ,EAAE,OAAO;AACnB,EAAE,IAAI,EAAE,OAAO;AACf,CAAC;;;;"}

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

@@ -5,7 +5,36 @@ declare const _default: import("vue").DefineComponent<{
     readonly disabled: BooleanConstructor;
     readonly lazy: BooleanConstructor;
 }, {
+    COMPONENT_NAME: string;
+    props: Readonly<import("@vue/shared").LooseRequired<Readonly<import("vue").ExtractPropTypes<{
+        readonly label: import("element-plus/es/utils").BuildPropReturn<StringConstructor, "", unknown, unknown, unknown>;
+        readonly name: import("element-plus/es/utils").BuildPropReturn<readonly [StringConstructor, NumberConstructor], "", unknown, unknown, unknown>;
+        readonly closable: BooleanConstructor;
+        readonly disabled: BooleanConstructor;
+        readonly lazy: BooleanConstructor;
+    }>> & {
+        [x: string & `on${string}`]: ((...args: any[]) => any) | ((...args: unknown[]) => any) | undefined;
+    }>>;
+    instance: import("vue").ComponentInternalInstance;
+    tabsRoot: import("element-plus/es/tokens").TabsRootContext;
+    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;
+        };
+    };
+    index: import("vue").Ref<string | undefined>;
+    isClosable: import("vue").ComputedRef<boolean>;
     active: Readonly<import("vue").Ref<boolean>>;
+    loaded: import("vue").Ref<boolean>;
     paneName: import("vue").ComputedRef<import("element-plus/es/utils").BuildPropType<readonly [StringConstructor, NumberConstructor], unknown, unknown> | undefined>;
     shouldBeRender: Readonly<import("vue").Ref<boolean>>;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{

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

@@ -1,21 +1,29 @@
-import { defineComponent, getCurrentInstance, inject, ref, computed, watch, reactive, markRaw, withDirectives, openBlock, createElementBlock, renderSlot, vShow, createCommentVNode } from 'vue';
+import { defineComponent, getCurrentInstance, inject, ref, computed, watch, reactive, markRaw, unref, withDirectives, openBlock, createElementBlock, normalizeClass, renderSlot, vShow, createCommentVNode } from 'vue';
 import { eagerComputed } from '@vueuse/core';
 import '../../../tokens/index.mjs';
 import '../../../utils/index.mjs';
+import '../../../hooks/index.mjs';
 import { tabPaneProps } from './tab-pane.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';
 
-const COMPONENT_NAME = "ElTabPane";
-const _sfc_main = defineComponent({
-  name: COMPONENT_NAME,
+const _hoisted_1 = ["id", "aria-hidden", "aria-labelledby"];
+const __default__ = {
+  name: "ElTabPane"
+};
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  ...__default__,
   props: tabPaneProps,
-  setup(props) {
+  setup(__props) {
+    const props = __props;
+    const COMPONENT_NAME = "ElTabPane";
     const instance = getCurrentInstance();
     const tabsRoot = inject(tabsRootContextKey);
     if (!tabsRoot)
-      throwError(COMPONENT_NAME, `must use with ElTabs`);
+      throwError(COMPONENT_NAME, "usage: <el-tabs><el-tab-pane /></el-tabs/>");
+    const ns = useNamespace("tab-pane");
     const index = ref();
     const isClosable = computed(() => props.closable || tabsRoot.props.closable);
     const active = eagerComputed(() => tabsRoot.currentName.value === (props.name || index.value));
@@ -35,29 +43,23 @@ const _sfc_main = defineComponent({
       index,
       isClosable
     }));
-    return {
-      active,
-      paneName,
-      shouldBeRender
+    return (_ctx, _cache) => {
+      return unref(shouldBeRender) ? withDirectives((openBlock(), createElementBlock("div", {
+        key: 0,
+        id: `pane-${unref(paneName)}`,
+        class: normalizeClass(unref(ns).b()),
+        role: "tabpanel",
+        "aria-hidden": !unref(active),
+        "aria-labelledby": `tab-${unref(paneName)}`
+      }, [
+        renderSlot(_ctx.$slots, "default")
+      ], 10, _hoisted_1)), [
+        [vShow, unref(active)]
+      ]) : createCommentVNode("v-if", true);
     };
   }
 });
-const _hoisted_1 = ["id", "aria-hidden", "aria-labelledby"];
-function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
-  return _ctx.shouldBeRender ? withDirectives((openBlock(), createElementBlock("div", {
-    key: 0,
-    id: `pane-${_ctx.paneName}`,
-    class: "el-tab-pane",
-    role: "tabpanel",
-    "aria-hidden": !_ctx.active,
-    "aria-labelledby": `tab-${_ctx.paneName}`
-  }, [
-    renderSlot(_ctx.$slots, "default")
-  ], 8, _hoisted_1)), [
-    [vShow, _ctx.active]
-  ]) : createCommentVNode("v-if", true);
-}
-var TabPane = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
+var TabPane = /* @__PURE__ */ _export_sfc(_sfc_main, [["__file", "/home/runner/work/element-plus/element-plus/packages/components/tabs/src/tab-pane.vue"]]);
 
 export { TabPane as default };
 //# sourceMappingURL=tab-pane2.mjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"tab-pane2.mjs","sources":["../../../../../../packages/components/tabs/src/tab-pane.vue"],"sourcesContent":["<template>\n  <div\n    v-if=\"shouldBeRender\"\n    v-show=\"active\"\n    :id=\"`pane-${paneName}`\"\n    class=\"el-tab-pane\"\n    role=\"tabpanel\"\n    :aria-hidden=\"!active\"\n    :aria-labelledby=\"`tab-${paneName}`\"\n  >\n    <slot />\n  </div>\n</template>\n<script lang=\"ts\">\nimport {\n  computed,\n  defineComponent,\n  getCurrentInstance,\n  inject,\n  markRaw,\n  reactive,\n  ref,\n  watch,\n} from 'vue'\nimport { eagerComputed } from '@vueuse/core'\nimport { tabsRootContextKey } from '@element-plus/tokens'\nimport { throwError } from '@element-plus/utils'\nimport { tabPaneProps } from './tab-pane'\n\nconst COMPONENT_NAME = 'ElTabPane'\n\nexport default defineComponent({\n  name: COMPONENT_NAME,\n  props: tabPaneProps,\n  setup(props) {\n    const instance = getCurrentInstance()!\n    const tabsRoot = inject(tabsRootContextKey)\n    if (!tabsRoot) throwError(COMPONENT_NAME, `must use with ElTabs`)\n\n    const index = ref<string>()\n    const isClosable = computed(() => props.closable || tabsRoot.props.closable)\n    const active = eagerComputed(\n      () => tabsRoot.currentName.value === (props.name || index.value)\n    )\n    const loaded = ref(active.value)\n    const paneName = computed(() => props.name || index.value)\n    const shouldBeRender = eagerComputed(\n      () => !props.lazy || loaded.value || active.value\n    )\n\n    watch(active, (val) => {\n      if (val) loaded.value = true\n    })\n\n    tabsRoot.updatePaneState(\n      reactive({\n        uid: instance.uid,\n        instance: markRaw(instance),\n        props,\n        paneName,\n        active,\n        index,\n        isClosable,\n      })\n    )\n\n    return {\n      active,\n      paneName,\n      shouldBeRender,\n    }\n  },\n})\n</script>\n"],"names":["_withDirectives","_openBlock","_createElementBlock","_renderSlot","_vShow","_createCommentVNode"],"mappings":";;;;;;;;;AA6BA,MAAM,cAAiB,GAAA,WAAA,CAAA;AAEvB,MAAK,YAAa,eAAa,CAAA;AAAA,EAC7B,IAAM,EAAA,cAAA;AAAA,EACN,KAAO,EAAA,YAAA;AAAA,EACP,MAAM,KAAO,EAAA;AACX,IAAA,MAAM,QAAW,GAAA,kBAAA,EAAA,CAAA;AACjB,IAAA,MAAM,WAAW,MAAO,CAAA,kBAAA,CAAA,CAAA;AACxB,IAAA,IAAI,CAAC,QAAA;AAAU,MAAA,UAAA,CAAW,cAAgB,EAAA,CAAA,oBAAA,CAAA,CAAA,CAAA;AAE1C,IAAA,MAAM,KAAQ,GAAA,GAAA,EAAA,CAAA;AACd,IAAA,MAAM,aAAa,QAAS,CAAA,MAAM,KAAM,CAAA,QAAA,IAAY,SAAS,KAAM,CAAA,QAAA,CAAA,CAAA;AACnE,IAAM,MAAA,MAAA,GAAS,cACb,MAAM,QAAA,CAAS,YAAY,KAAW,MAAA,KAAA,CAAM,QAAQ,KAAM,CAAA,KAAA,CAAA,CAAA,CAAA;AAE5D,IAAM,MAAA,MAAA,GAAS,IAAI,MAAO,CAAA,KAAA,CAAA,CAAA;AAC1B,IAAA,MAAM,QAAW,GAAA,QAAA,CAAS,MAAM,KAAA,CAAM,QAAQ,KAAM,CAAA,KAAA,CAAA,CAAA;AACpD,IAAM,MAAA,cAAA,GAAiB,cACrB,MAAM,CAAC,MAAM,IAAQ,IAAA,MAAA,CAAO,SAAS,MAAO,CAAA,KAAA,CAAA,CAAA;AAG9C,IAAM,KAAA,CAAA,MAAA,EAAQ,CAAC,GAAQ,KAAA;AACrB,MAAI,IAAA,GAAA;AAAK,QAAA,MAAA,CAAO,KAAQ,GAAA,IAAA,CAAA;AAAA,KAAA,CAAA,CAAA;AAG1B,IAAA,QAAA,CAAS,gBACP,QAAS,CAAA;AAAA,MACP,KAAK,QAAS,CAAA,GAAA;AAAA,MACd,UAAU,OAAQ,CAAA,QAAA,CAAA;AAAA,MAClB,KAAA;AAAA,MACA,QAAA;AAAA,MACA,MAAA;AAAA,MACA,KAAA;AAAA,MACA,UAAA;AAAA,KAAA,CAAA,CAAA,CAAA;AAIJ,IAAO,OAAA;AAAA,MACL,MAAA;AAAA,MACA,QAAA;AAAA,MACA,cAAA;AAAA,KAAA,CAAA;AAAA,GAAA;AAAA,CAAA,CAAA,CAAA;;;AAnEI,EAAA,OAAA,IAAA,CAAA,cAAA,GAAAA,cAAA,EAAAC,SAAA,EAAA,EADRC,kBAUM,CAAA,KAAA,EAAA;AAAA,IAAA,GAAA,EAAA,CAAA;AAPH,IAAA,EAAA,EAAE,CAAU,KAAA,EAAA,IAAA,CAAA,QAAA,CAAA,CAAA;AAAA,IACb,KAAM,EAAA,aAAA;AAAA,IACN,IAAK,EAAA,UAAA;AAAA,IACJ,eAAW,CAAG,IAAA,CAAA,MAAA;AAAA,IACd,mBAAe,CAAS,IAAA,EAAA,IAAA,CAAA,QAAA,CAAA,CAAA;AAAA,GAAA,EAAA;IAEzBC,UAAQ,CAAA,IAAA,CAAA,MAAA,EAAA,SAAA,CAAA;AAAA,GAAA,EAAA,CAAA,EAAA,UAAA,CAAA,GAAA;AAPA,IAAA,CAAAC,KAAA,EAAA,IAAA,CAAA,MAAA,CAAA;AAAA,GAAA,CAAA,GAAAC,kBAAA,CAAA,MAAA,EAAA,IAAA,CAAA,CAAA;;;;;;"}
+{"version":3,"file":"tab-pane2.mjs","sources":["../../../../../../packages/components/tabs/src/tab-pane.vue"],"sourcesContent":["<template>\n  <div\n    v-if=\"shouldBeRender\"\n    v-show=\"active\"\n    :id=\"`pane-${paneName}`\"\n    :class=\"ns.b()\"\n    role=\"tabpanel\"\n    :aria-hidden=\"!active\"\n    :aria-labelledby=\"`tab-${paneName}`\"\n  >\n    <slot />\n  </div>\n</template>\n<script lang=\"ts\" setup>\nimport {\n  computed,\n  getCurrentInstance,\n  inject,\n  markRaw,\n  reactive,\n  ref,\n  watch,\n} from 'vue'\nimport { eagerComputed } from '@vueuse/core'\nimport { tabsRootContextKey } from '@element-plus/tokens'\nimport { throwError } from '@element-plus/utils'\nimport { useNamespace } from '@element-plus/hooks'\nimport { tabPaneProps } from './tab-pane'\n\nconst COMPONENT_NAME = 'ElTabPane'\ndefineOptions({\n  name: 'ElTabPane',\n})\nconst props = defineProps(tabPaneProps)\n\nconst instance = getCurrentInstance()!\nconst tabsRoot = inject(tabsRootContextKey)\nif (!tabsRoot)\n  throwError(COMPONENT_NAME, 'usage: <el-tabs><el-tab-pane /></el-tabs/>')\n\nconst ns = useNamespace('tab-pane')\n\nconst index = ref<string>()\nconst isClosable = computed(() => props.closable || tabsRoot.props.closable)\nconst active = eagerComputed(\n  () => tabsRoot.currentName.value === (props.name || index.value)\n)\nconst loaded = ref(active.value)\nconst paneName = computed(() => props.name || index.value)\nconst shouldBeRender = eagerComputed(\n  () => !props.lazy || loaded.value || active.value\n)\n\nwatch(active, (val) => {\n  if (val) loaded.value = true\n})\n\ntabsRoot.updatePaneState(\n  reactive({\n    uid: instance.uid,\n    instance: markRaw(instance),\n    props,\n    paneName,\n    active,\n    index,\n    isClosable,\n  })\n)\n</script>\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;AA6BA,IAAA,MAAA,cAAA,GAAA,WAAA,CAAA;AAMA,IAAA,MAAA,WAAA,kBAAA,EAAA,CAAA;AACA,IAAA,MAAA,QAAA,GAAA,OAAA,kBAAA,CAAA,CAAA;AACA,IAAA,IAAA,CAAA,QAAA;AACA,MAAA,UAAA,CAAA,gBAAA,4CAAA,CAAA,CAAA;AAEA,IAAA,MAAA,EAAA,GAAA,aAAA,UAAA,CAAA,CAAA;AAEA,IAAA,MAAA,QAAA,GAAA,EAAA,CAAA;AACA,IAAA,MAAA,aAAA,QAAA,CAAA,MAAA,MAAA,QAAA,IAAA,QAAA,CAAA,MAAA,QAAA,CAAA,CAAA;AACA,IAAA,MAAA,MAAA,GAAA,cACA,MAAA,QAAA,CAAA,YAAA,KAAA,MAAA,KAAA,CAAA,IAAA,IAAA,KAAA,CAAA,KACA,CAAA,CAAA,CAAA;AACA,IAAA,MAAA,MAAA,GAAA,GAAA,CAAA,MAAA,CAAA,KAAA,CAAA,CAAA;AACA,IAAA,MAAA,WAAA,QAAA,CAAA,MAAA,KAAA,CAAA,IAAA,IAAA,MAAA,KAAA,CAAA,CAAA;AACA,IAAA,MAAA,cAAA,GAAA,cACA,MAAA,CAAA,MAAA,IAAA,IAAA,MAAA,CAAA,KAAA,IAAA,MAAA,CAAA,KACA,CAAA,CAAA;AAEA,IAAA,KAAA,CAAA,MAAA,EAAA,CAAA,GAAA,KAAA;AACA,MAAA,IAAA,GAAA;AAAA,QAAA,MAAA,CAAA,KAAA,GAAA,IAAA,CAAA;AAAA,KACA,CAAA,CAAA;AAEA,IAAA,QAAA,CAAA,gBACA,QAAA,CAAA;AAAA,MACA,KAAA,QAAA,CAAA,GAAA;AAAA,MACA,QAAA,EAAA,QAAA,QAAA,CAAA;AAAA,MACA,KAAA;AAAA,MACA,QAAA;AAAA,MACA,MAAA;AAAA,MACA,KAAA;AAAA,MACA,UAAA;AAAA,KACA,CACA,CAAA,CAAA;;;;;;;;;;;;;;;;;;;;;"}

package/es/components/tabs/src/tabs.d.ts

@@ -1,41 +1,44 @@
 import type { TabsPaneContext } from 'element-plus/es/tokens';
-import type { ComponentInternalInstance, ExtractPropTypes, VNode } from 'vue';
+import type { ComponentInternalInstance, ExtractPropTypes } from 'vue';
+import type { Awaitable } from 'element-plus/es/utils';
+export declare type TabPanelName = string | number;
 export declare const tabsProps: {
     readonly type: import("element-plus/es/utils").BuildPropReturn<StringConstructor, "", unknown, "" | "card" | "border-card", unknown>;
-    readonly activeName: import("element-plus/es/utils").BuildPropReturn<StringConstructor, "", unknown, unknown, unknown>;
+    readonly activeName: import("element-plus/es/utils").BuildPropReturn<readonly [StringConstructor, NumberConstructor], "", unknown, unknown, unknown>;
     readonly closable: BooleanConstructor;
     readonly addable: BooleanConstructor;
     readonly modelValue: import("element-plus/es/utils").BuildPropReturn<readonly [StringConstructor, NumberConstructor], "", unknown, unknown, unknown>;
     readonly editable: BooleanConstructor;
     readonly tabPosition: import("element-plus/es/utils").BuildPropReturn<StringConstructor, "top", unknown, "top" | "right" | "bottom" | "left", unknown>;
-    readonly beforeLeave: import("element-plus/es/utils").BuildPropReturn<import("element-plus/es/utils").PropWrapper<(newTabName: string | number, oldTabName: string | number) => void | boolean | Promise<void | boolean>>, () => boolean, unknown, unknown, unknown>;
+    readonly beforeLeave: import("element-plus/es/utils").BuildPropReturn<import("element-plus/es/utils").PropWrapper<(newName: TabPanelName, oldName: TabPanelName) => Awaitable<void | boolean>>, () => boolean, unknown, unknown, unknown>;
     readonly stretch: BooleanConstructor;
 };
 export declare type TabsProps = ExtractPropTypes<typeof tabsProps>;
 export declare const tabsEmits: {
-    "update:modelValue": (tabName: string | number) => boolean;
-    input: (tabName: string | number) => boolean;
+    "update:modelValue": (name: TabPanelName) => boolean;
+    /** @deprecated use `tab-change` instead */
+    input: (name: TabPanelName) => boolean;
     'tab-click': (pane: TabsPaneContext, ev: Event) => boolean;
-    edit: (paneName: string | number | null, action: 'remove' | 'add') => boolean;
-    'tab-remove': (paneName: string | number) => boolean;
+    'tab-change': (name: TabPanelName) => boolean;
+    edit: (paneName: TabPanelName | undefined, action: 'remove' | 'add') => boolean;
+    'tab-remove': (name: TabPanelName) => boolean;
     'tab-add': () => boolean;
 };
 export declare type TabsEmits = typeof tabsEmits;
 declare const _default: import("vue").DefineComponent<{
     readonly type: import("element-plus/es/utils").BuildPropReturn<StringConstructor, "", unknown, "" | "card" | "border-card", unknown>;
-    readonly activeName: import("element-plus/es/utils").BuildPropReturn<StringConstructor, "", unknown, unknown, unknown>;
+    readonly activeName: import("element-plus/es/utils").BuildPropReturn<readonly [StringConstructor, NumberConstructor], "", unknown, unknown, unknown>;
     readonly closable: BooleanConstructor;
     readonly addable: BooleanConstructor;
     readonly modelValue: import("element-plus/es/utils").BuildPropReturn<readonly [StringConstructor, NumberConstructor], "", unknown, unknown, unknown>;
     readonly editable: BooleanConstructor;
     readonly tabPosition: import("element-plus/es/utils").BuildPropReturn<StringConstructor, "top", unknown, "top" | "right" | "bottom" | "left", unknown>;
-    readonly beforeLeave: import("element-plus/es/utils").BuildPropReturn<import("element-plus/es/utils").PropWrapper<(newTabName: string | number, oldTabName: string | number) => boolean | void | Promise<boolean | void>>, () => boolean, unknown, unknown, unknown>;
+    readonly beforeLeave: import("element-plus/es/utils").BuildPropReturn<import("element-plus/es/utils").PropWrapper<(newName: TabPanelName, oldName: TabPanelName) => Awaitable<boolean | void>>, () => boolean, unknown, unknown, unknown>;
     readonly stretch: BooleanConstructor;
-}, () => VNode<import("vue").RendererNode, import("vue").RendererElement, {
-    [key: string]: any;
-}>, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-    "update:modelValue": (tabName: string | number) => boolean;
-    input: (tabName: string | number) => boolean;
+}, () => JSX.Element, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (name: TabPanelName) => boolean;
+    /** @deprecated use `tab-change` instead */
+    input: (name: TabPanelName) => boolean;
     'tab-click': (pane: {
         uid: number;
         instance: import("vue").ShallowReactive<ComponentInternalInstance>;
@@ -51,22 +54,23 @@ declare const _default: import("vue").DefineComponent<{
         index: string | undefined;
         isClosable: boolean;
     }, ev: Event) => boolean;
-    edit: (paneName: string | number | null, action: "remove" | "add") => boolean;
-    'tab-remove': (paneName: string | number) => boolean;
+    'tab-change': (name: TabPanelName) => boolean;
+    edit: (paneName: TabPanelName | undefined, action: "remove" | "add") => boolean;
+    'tab-remove': (name: TabPanelName) => boolean;
     'tab-add': () => boolean;
 }, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<ExtractPropTypes<{
     readonly type: import("element-plus/es/utils").BuildPropReturn<StringConstructor, "", unknown, "" | "card" | "border-card", unknown>;
-    readonly activeName: import("element-plus/es/utils").BuildPropReturn<StringConstructor, "", unknown, unknown, unknown>;
+    readonly activeName: import("element-plus/es/utils").BuildPropReturn<readonly [StringConstructor, NumberConstructor], "", unknown, unknown, unknown>;
     readonly closable: BooleanConstructor;
     readonly addable: BooleanConstructor;
     readonly modelValue: import("element-plus/es/utils").BuildPropReturn<readonly [StringConstructor, NumberConstructor], "", unknown, unknown, unknown>;
     readonly editable: BooleanConstructor;
     readonly tabPosition: import("element-plus/es/utils").BuildPropReturn<StringConstructor, "top", unknown, "top" | "right" | "bottom" | "left", unknown>;
-    readonly beforeLeave: import("element-plus/es/utils").BuildPropReturn<import("element-plus/es/utils").PropWrapper<(newTabName: string | number, oldTabName: string | number) => boolean | void | Promise<boolean | void>>, () => boolean, unknown, unknown, unknown>;
+    readonly beforeLeave: import("element-plus/es/utils").BuildPropReturn<import("element-plus/es/utils").PropWrapper<(newName: TabPanelName, oldName: TabPanelName) => Awaitable<boolean | void>>, () => boolean, unknown, unknown, unknown>;
     readonly stretch: BooleanConstructor;
 }>> & {
-    "onUpdate:modelValue"?: ((tabName: string | number) => any) | undefined;
-    onInput?: ((tabName: string | number) => any) | undefined;
+    "onUpdate:modelValue"?: ((name: TabPanelName) => any) | undefined;
+    onInput?: ((name: TabPanelName) => any) | undefined;
     "onTab-click"?: ((pane: {
         uid: number;
         instance: import("vue").ShallowReactive<ComponentInternalInstance>;
@@ -82,16 +86,17 @@ declare const _default: import("vue").DefineComponent<{
         index: string | undefined;
         isClosable: boolean;
     }, ev: Event) => any) | undefined;
-    onEdit?: ((paneName: string | number | null, action: "remove" | "add") => any) | undefined;
-    "onTab-remove"?: ((paneName: string | number) => any) | undefined;
+    "onTab-change"?: ((name: TabPanelName) => any) | undefined;
+    onEdit?: ((paneName: TabPanelName | undefined, action: "remove" | "add") => any) | undefined;
+    "onTab-remove"?: ((name: TabPanelName) => any) | undefined;
     "onTab-add"?: (() => any) | undefined;
 }, {
     type: import("element-plus/es/utils").BuildPropType<StringConstructor, "" | "card" | "border-card", unknown>;
     modelValue: import("element-plus/es/utils").BuildPropType<readonly [StringConstructor, NumberConstructor], unknown, unknown>;
     closable: boolean;
-    activeName: string;
+    activeName: import("element-plus/es/utils").BuildPropType<readonly [StringConstructor, NumberConstructor], unknown, unknown>;
     tabPosition: import("element-plus/es/utils").BuildPropType<StringConstructor, "top" | "right" | "bottom" | "left", unknown>;
-    beforeLeave: (newTabName: string | number, oldTabName: string | number) => boolean | void | Promise<boolean | void>;
+    beforeLeave: (newName: TabPanelName, oldName: TabPanelName) => Awaitable<boolean | void>;
     addable: boolean;
     editable: boolean;
     stretch: boolean;

package/es/components/tabs/src/tabs.mjs

@@ -1,13 +1,17 @@
-import { Fragment, defineComponent, getCurrentInstance, ref, onUpdated, onMounted, watch, nextTick, provide, h, renderSlot } from 'vue';
-import { isPromise, NOOP } from '@vue/shared';
+import { Fragment, defineComponent, getCurrentInstance, computed, ref, onUpdated, onMounted, watch, nextTick, provide, createVNode, renderSlot } from 'vue';
+import { isString, isFunction, isPromise, NOOP } from '@vue/shared';
 import '../../../utils/index.mjs';
 import '../../../constants/index.mjs';
 import { ElIcon } from '../../icon/index.mjs';
 import { Plus } from '@element-plus/icons-vue';
 import '../../../tokens/index.mjs';
+import '../../../hooks/index.mjs';
 import TabNav from './tab-nav.mjs';
 import { buildProps, definePropType } from '../../../utils/vue/props.mjs';
+import { isNumber } from '@vueuse/core';
 import { UPDATE_MODEL_EVENT, INPUT_EVENT } from '../../../constants/event.mjs';
+import { useDeprecated } from '../../../hooks/use-deprecated/index.mjs';
+import { useNamespace } from '../../../hooks/use-namespace/index.mjs';
 import { tabsRootContextKey } from '../../../tokens/tabs.mjs';
 import { EVENT_CODE } from '../../../constants/aria.mjs';
 
@@ -18,7 +22,7 @@ const tabsProps = buildProps({
     default: ""
   },
   activeName: {
-    type: String,
+    type: [String, Number],
     default: ""
   },
   closable: Boolean,
@@ -39,12 +43,14 @@ const tabsProps = buildProps({
   },
   stretch: Boolean
 });
+const isPanelName = (value) => isString(value) || isNumber(value);
 const tabsEmits = {
-  [UPDATE_MODEL_EVENT]: (tabName) => typeof tabName === "string" || typeof tabName === "number",
-  [INPUT_EVENT]: (tabName) => typeof tabName === "string" || typeof tabName === "number",
+  [UPDATE_MODEL_EVENT]: (name) => isPanelName(name),
+  [INPUT_EVENT]: (name) => isPanelName(name),
   "tab-click": (pane, ev) => ev instanceof Event,
-  edit: (paneName, action) => action === "remove" || action === "add",
-  "tab-remove": (paneName) => typeof paneName === "string" || typeof paneName === "number",
+  "tab-change": (name) => isPanelName(name),
+  edit: (paneName, action) => ["remove", "add"].includes(action),
+  "tab-remove": (name) => isPanelName(name),
   "tab-add": () => true
 };
 const getPaneInstanceFromSlot = (vnode, paneInstanceList = []) => {
@@ -64,8 +70,24 @@ var Tabs = defineComponent({
   name: "ElTabs",
   props: tabsProps,
   emits: tabsEmits,
-  setup(props, { emit, slots, expose }) {
+  setup(props, {
+    emit,
+    slots,
+    expose
+  }) {
     const instance = getCurrentInstance();
+    useDeprecated({
+      scope: "el-tabs",
+      type: "Event",
+      from: "input",
+      replacement: "tab-change",
+      version: "2.5.0",
+      ref: "https://element-plus.org/en-US/component/tabs.html#tabs-events"
+    }, computed(() => {
+      var _a;
+      return isFunction((_a = instance.vnode.props) == null ? void 0 : _a.onInput);
+    }));
+    const ns = useNamespace("tabs");
     const nav$ = ref();
     const panes = ref([]);
     const currentName = ref(props.modelValue || props.activeName || "0");
@@ -73,7 +95,9 @@ var Tabs = defineComponent({
     const updatePaneInstances = (isForceUpdate = false) => {
       if (slots.default) {
         const children = instance.subTree.children;
-        const content = Array.from(children).find(({ props: props2 }) => (props2 == null ? void 0 : props2.class) === "el-tabs__content");
+        const content = Array.from(children).find(({
+          props: props2
+        }) => (props2 == null ? void 0 : props2.class) === ns.e("content"));
         if (!content)
           return;
         const paneInstanceList = getPaneInstanceFromSlot(content).map((paneComponent) => paneStatesMap[paneComponent.uid]);
@@ -89,6 +113,7 @@ var Tabs = defineComponent({
       currentName.value = value;
       emit(INPUT_EVENT, value);
       emit(UPDATE_MODEL_EVENT, value);
+      emit("tab-change", value);
     };
     const setCurrentName = (value) => {
       var _a;
@@ -119,7 +144,7 @@ var Tabs = defineComponent({
       emit("tab-remove", pane.props.name);
     };
     const handleTabAdd = () => {
-      emit("edit", null, "add");
+      emit("edit", void 0, "add");
       emit("tab-add");
     };
     onUpdated(() => updatePaneInstances());
@@ -142,39 +167,40 @@ var Tabs = defineComponent({
       currentName
     });
     return () => {
-      const newButton = props.editable || props.addable ? h("span", {
-        class: "el-tabs__new-tab",
-        tabindex: "0",
-        onClick: handleTabAdd,
-        onKeydown: (ev) => {
+      const newButton = props.editable || props.addable ? createVNode("span", {
+        "class": ns.e("new-tab"),
+        "tabindex": "0",
+        "onClick": handleTabAdd,
+        "onKeydown": (ev) => {
           if (ev.code === EVENT_CODE.enter)
             handleTabAdd();
         }
-      }, [h(ElIcon, { class: "is-icon-plus" }, { default: () => h(Plus) })]) : null;
-      const header = h("div", { class: ["el-tabs__header", `is-${props.tabPosition}`] }, [
-        newButton,
-        h(TabNav, {
-          currentName: currentName.value,
-          editable: props.editable,
-          type: props.type,
-          panes: panes.value,
-          stretch: props.stretch,
-          ref: nav$,
-          onTabClick: handleTabClick,
-          onTabRemove: handleTabRemove
-        })
-      ]);
-      const panels = h("div", { class: "el-tabs__content" }, [
-        renderSlot(slots, "default")
-      ]);
-      return h("div", {
-        class: {
-          "el-tabs": true,
-          "el-tabs--card": props.type === "card",
-          [`el-tabs--${props.tabPosition}`]: true,
-          "el-tabs--border-card": props.type === "border-card"
-        }
-      }, props.tabPosition !== "bottom" ? [header, panels] : [panels, header]);
+      }, [createVNode(ElIcon, {
+        "class": ns.is("icon-plus")
+      }, {
+        default: () => [createVNode(Plus, null, null)]
+      })]) : null;
+      const header = createVNode("div", {
+        "class": [ns.e("header"), ns.is(props.tabPosition)]
+      }, [newButton, createVNode(TabNav, {
+        "ref": nav$,
+        "currentName": currentName.value,
+        "editable": props.editable,
+        "type": props.type,
+        "panes": panes.value,
+        "stretch": props.stretch,
+        "onTabClick": handleTabClick,
+        "onTabRemove": handleTabRemove
+      }, null)]);
+      const panels = createVNode("div", {
+        "class": ns.e("content")
+      }, [renderSlot(slots, "default")]);
+      return createVNode("div", {
+        "class": [ns.b(), ns.m(props.tabPosition), {
+          [ns.m("card")]: props.type === "card",
+          [ns.m("border-card")]: props.type === "border-card"
+        }]
+      }, [...props.tabPosition !== "bottom" ? [header, panels] : [panels, header]]);
     };
   }
 });