element-plus 1.2.0-beta.3 → 1.2.0-beta.4

package/lib/components/tabs/src/tab-bar.vue_vue_type_script_lang.js

@@ -0,0 +1,70 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var vue = require('vue');
+var shared = require('@vue/shared');
+var core = require('@vueuse/core');
+require('../../../tokens/index.js');
+var error = require('../../../utils/error.js');
+var tabBar = require('./tab-bar.js');
+var tabs = require('../../../tokens/tabs.js');
+
+const COMPONENT_NAME = "ElTabBar";
+var script = vue.defineComponent({
+  name: COMPONENT_NAME,
+  props: tabBar.tabBar,
+  setup(props) {
+    const instance = vue.getCurrentInstance();
+    const rootTabs = vue.inject(tabs.tabsRootContextKey);
+    if (!rootTabs)
+      error.throwError(COMPONENT_NAME, "must use with ElTabs");
+    const bar$ = vue.ref();
+    const barStyle = vue.ref();
+    const getBarStyle = () => {
+      let offset = 0;
+      let tabSize = 0;
+      const sizeName = ["top", "bottom"].includes(rootTabs.props.tabPosition) ? "width" : "height";
+      const sizeDir = sizeName === "width" ? "x" : "y";
+      props.tabs.every((tab) => {
+        var _a, _b, _c, _d;
+        const $el = (_b = (_a = instance.parent) == null ? void 0 : _a.refs) == null ? void 0 : _b[`tab-${tab.paneName}`];
+        if (!$el)
+          return false;
+        if (!tab.active) {
+          return true;
+        }
+        tabSize = $el[`client${shared.capitalize(sizeName)}`];
+        const position = sizeDir === "x" ? "left" : "top";
+        offset = $el.getBoundingClientRect()[position] - ((_d = (_c = $el.parentElement) == null ? void 0 : _c.getBoundingClientRect()[position]) != null ? _d : 0);
+        const tabStyles = window.getComputedStyle($el);
+        if (sizeName === "width") {
+          if (props.tabs.length > 1) {
+            tabSize -= parseFloat(tabStyles.paddingLeft) + parseFloat(tabStyles.paddingRight);
+          }
+          offset += parseFloat(tabStyles.paddingLeft);
+        }
+        return false;
+      });
+      return {
+        [sizeName]: `${tabSize}px`,
+        transform: `translate${shared.capitalize(sizeDir)}(${offset}px)`
+      };
+    };
+    const update = () => barStyle.value = getBarStyle();
+    vue.watch(() => props.tabs, async () => {
+      await vue.nextTick();
+      update();
+    }, { immediate: true });
+    core.useResizeObserver(bar$, () => update());
+    return {
+      bar$,
+      rootTabs,
+      barStyle,
+      update
+    };
+  }
+});
+
+exports["default"] = script;
+//# sourceMappingURL=tab-bar.vue_vue_type_script_lang.js.map

package/lib/components/tabs/src/tab-bar.vue_vue_type_script_lang.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tab-bar.vue_vue_type_script_lang.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  ></div>\n</template>\n<script lang=\"ts\">\nimport {\n  defineComponent,\n  inject,\n  getCurrentInstance,\n  watch,\n  nextTick,\n  ref,\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/error'\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              parseFloat(tabStyles.paddingLeft) +\n              parseFloat(tabStyles.paddingRight)\n          }\n          offset += 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","ref","capitalize","nextTick"],"mappings":";;;;;;;;;;;;AAwBA,MAAM,iBAAiB;AACvB,aAAeA,oBAAgB;AAAA,EAC7B,MAAM;AAAA,EACN,OAAOC;AAAA,EAEP,MAAM,OAAO;AACX,UAAM,WAAWC;AACjB,UAAM,WAAWC,WAAOC;AACxB,QAAI,CAAC;AAAU,uBAAW,gBAAgB;AAE1C,UAAM,OAAOC;AACb,UAAM,WAAWA;AAEjB,UAAM,cAAc,MAAqB;AACvC,UAAI,SAAS;AACb,UAAI,UAAU;AAEd,YAAM,WAAW,CAAC,OAAO,UAAU,SAAS,SAAS,MAAM,eACvD,UACA;AACJ,YAAM,UAAU,aAAa,UAAU,MAAM;AAE7C,YAAM,KAAK,MAAM,CAAC,QAAQ;;AACxB,cAAM,MAAM,qBAAS,WAAT,mBAAiB,SAAjB,mBACV,OAAO,IAAI;AAEb,YAAI,CAAC;AAAK,iBAAO;AAEjB,YAAI,CAAC,IAAI,QAAQ;AACf,iBAAO;AAAA;AAGT,kBAAU,IAAI,SAASC,kBAAW;AAClC,cAAM,WAAW,YAAY,MAAM,SAAS;AAC5C,iBACE,IAAI,wBAAwB,6BACvB,kBAAJ,mBAAmB,wBAAwB,cAA3C,YAAwD;AAC3D,cAAM,YAAY,OAAO,iBAAiB;AAE1C,YAAI,aAAa,SAAS;AACxB,cAAI,MAAM,KAAK,SAAS,GAAG;AACzB,uBACE,WAAW,UAAU,eACrB,WAAW,UAAU;AAAA;AAEzB,oBAAU,WAAW,UAAU;AAAA;AAEjC,eAAO;AAAA;AAGT,aAAO;AAAA,SACJ,WAAW,GAAG;AAAA,QACf,WAAW,YAAYA,kBAAW,YAAY;AAAA;AAAA;AAIlD,UAAM,SAAS,MAAO,SAAS,QAAQ;AAEvC,cACE,MAAM,MAAM,MACZ,YAAY;AACV,YAAMC;AACN;AAAA,OAEF,EAAE,WAAW;AAEf,2BAAkB,MAAM,MAAM;AAE9B,WAAO;AAAA,MACL;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA;AAAA;AAAA;;;;"}

package/lib/components/tabs/src/tab-bar.vue_vue_type_template_id_09e034e4_lang.js

@@ -0,0 +1,16 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var vue = require('vue');
+
+function 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);
+}
+
+exports.render = render;
+//# sourceMappingURL=tab-bar.vue_vue_type_template_id_09e034e4_lang.js.map

package/lib/components/tabs/src/tab-bar.vue_vue_type_template_id_09e034e4_lang.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tab-bar.vue_vue_type_template_id_09e034e4_lang.js","sources":["../../../../../../packages/components/tabs/src/tab-bar.vue?vue&type=template&id=09e034e4&lang.js"],"sourcesContent":["<template>\n  <div\n    ref=\"bar$\"\n    :class=\"['el-tabs__active-bar', `is-${rootTabs.props.tabPosition}`]\"\n    :style=\"barStyle\"\n  ></div>\n</template>\n<script lang=\"ts\">\nimport {\n  defineComponent,\n  inject,\n  getCurrentInstance,\n  watch,\n  nextTick,\n  ref,\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/error'\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              parseFloat(tabStyles.paddingLeft) +\n              parseFloat(tabStyles.paddingRight)\n          }\n          offset += 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":["_createElementBlock"],"mappings":";;;;;;;0BACEA;IACE,KAAI;AAAA,IACH,wDAAqC,cAAS,MAAM;AAAA,IACpD,0BAAO;;;;;;"}

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

@@ -0,0 +1,12 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var tabBar_vue_vue_type_script_lang = require('./tab-bar.vue_vue_type_script_lang.js');
+var tabBar_vue_vue_type_template_id_09e034e4_lang = require('./tab-bar.vue_vue_type_template_id_09e034e4_lang.js');
+
+tabBar_vue_vue_type_script_lang["default"].render = tabBar_vue_vue_type_template_id_09e034e4_lang.render;
+tabBar_vue_vue_type_script_lang["default"].__file = "packages/components/tabs/src/tab-bar.vue";
+
+exports["default"] = tabBar_vue_vue_type_script_lang["default"];
+//# sourceMappingURL=tab-bar2.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"tab-bar2.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;"}

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

@@ -0,0 +1,192 @@
+import type { ExtractPropTypes } from 'vue';
+import type { TabsPaneContext } from 'element-plus/es/tokens';
+export interface Scrollable {
+    next?: boolean;
+    prev?: number;
+}
+export declare const tabNavProps: {
+    readonly panes: import("element-plus/es/utils/props").BuildPropReturn<import("element-plus/es/utils/props").PropWrapper<{
+        uid: number;
+        instance: import("vue").ShallowReactive<import("vue").ComponentInternalInstance>;
+        props: {
+            label: string;
+            name: string;
+            closable: boolean;
+            disabled: boolean;
+            lazy: boolean;
+        };
+        paneName: string | undefined;
+        active: boolean;
+        index: string | undefined;
+        isClosable: boolean;
+    }[]>, () => [], unknown, unknown, unknown>;
+    readonly currentName: import("element-plus/es/utils/props").BuildPropReturn<StringConstructor, "", unknown, unknown, unknown>;
+    readonly editable: BooleanConstructor;
+    readonly onTabClick: import("element-plus/es/utils/props").BuildPropReturn<import("element-plus/es/utils/props").PropWrapper<(tab: TabsPaneContext, tabName: string, ev: Event) => void>, () => void, unknown, unknown, unknown>;
+    readonly onTabRemove: import("element-plus/es/utils/props").BuildPropReturn<import("element-plus/es/utils/props").PropWrapper<(tab: TabsPaneContext, ev: Event) => void>, () => void, unknown, unknown, unknown>;
+    readonly type: import("element-plus/es/utils/props").BuildPropReturn<StringConstructor, "", unknown, "" | "card" | "border-card", unknown>;
+    readonly stretch: BooleanConstructor;
+};
+export declare type TabNavProps = ExtractPropTypes<typeof tabNavProps>;
+declare const _default: import("vue").DefineComponent<{
+    readonly panes: import("element-plus/es/utils/props").BuildPropReturn<import("element-plus/es/utils/props").PropWrapper<{
+        uid: number;
+        instance: import("vue").ShallowReactive<import("vue").ComponentInternalInstance>;
+        props: {
+            label: string;
+            name: string;
+            closable: boolean;
+            disabled: boolean;
+            lazy: boolean;
+        };
+        paneName: string | undefined;
+        active: boolean;
+        index: string | undefined;
+        isClosable: boolean;
+    }[]>, () => [], unknown, unknown, unknown>;
+    readonly currentName: import("element-plus/es/utils/props").BuildPropReturn<StringConstructor, "", unknown, unknown, unknown>;
+    readonly editable: BooleanConstructor;
+    readonly onTabClick: import("element-plus/es/utils/props").BuildPropReturn<import("element-plus/es/utils/props").PropWrapper<(tab: {
+        uid: number;
+        instance: import("vue").ShallowReactive<import("vue").ComponentInternalInstance>;
+        props: {
+            label: string;
+            name: string;
+            closable: boolean;
+            disabled: boolean;
+            lazy: boolean;
+        };
+        paneName: string | undefined;
+        active: boolean;
+        index: string | undefined;
+        isClosable: boolean;
+    }, tabName: string, ev: Event) => void>, () => void, unknown, unknown, unknown>;
+    readonly onTabRemove: import("element-plus/es/utils/props").BuildPropReturn<import("element-plus/es/utils/props").PropWrapper<(tab: {
+        uid: number;
+        instance: import("vue").ShallowReactive<import("vue").ComponentInternalInstance>;
+        props: {
+            label: string;
+            name: string;
+            closable: boolean;
+            disabled: boolean;
+            lazy: boolean;
+        };
+        paneName: string | undefined;
+        active: boolean;
+        index: string | undefined;
+        isClosable: boolean;
+    }, ev: Event) => void>, () => void, unknown, unknown, unknown>;
+    readonly type: import("element-plus/es/utils/props").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<{
+    readonly panes?: unknown;
+    readonly currentName?: unknown;
+    readonly editable?: unknown;
+    readonly onTabClick?: unknown;
+    readonly onTabRemove?: unknown;
+    readonly type?: unknown;
+    readonly stretch?: unknown;
+} & {
+    type: import("element-plus/es/utils/props").BuildPropType<StringConstructor, "" | "card" | "border-card", unknown>;
+    editable: boolean;
+    stretch: boolean;
+    panes: {
+        uid: number;
+        instance: import("vue").ShallowReactive<import("vue").ComponentInternalInstance>;
+        props: {
+            label: string;
+            name: string;
+            closable: boolean;
+            disabled: boolean;
+            lazy: boolean;
+        };
+        paneName: string | undefined;
+        active: boolean;
+        index: string | undefined;
+        isClosable: boolean;
+    }[];
+    currentName: string;
+    onTabClick: (tab: {
+        uid: number;
+        instance: import("vue").ShallowReactive<import("vue").ComponentInternalInstance>;
+        props: {
+            label: string;
+            name: string;
+            closable: boolean;
+            disabled: boolean;
+            lazy: boolean;
+        };
+        paneName: string | undefined;
+        active: boolean;
+        index: string | undefined;
+        isClosable: boolean;
+    }, tabName: string, ev: Event) => void;
+    onTabRemove: (tab: {
+        uid: number;
+        instance: import("vue").ShallowReactive<import("vue").ComponentInternalInstance>;
+        props: {
+            label: string;
+            name: string;
+            closable: boolean;
+            disabled: boolean;
+            lazy: boolean;
+        };
+        paneName: string | undefined;
+        active: boolean;
+        index: string | undefined;
+        isClosable: boolean;
+    }, ev: Event) => void;
+} & {}>, {
+    type: import("element-plus/es/utils/props").BuildPropType<StringConstructor, "" | "card" | "border-card", unknown>;
+    editable: boolean;
+    stretch: boolean;
+    panes: {
+        uid: number;
+        instance: import("vue").ShallowReactive<import("vue").ComponentInternalInstance>;
+        props: {
+            label: string;
+            name: string;
+            closable: boolean;
+            disabled: boolean;
+            lazy: boolean;
+        };
+        paneName: string | undefined;
+        active: boolean;
+        index: string | undefined;
+        isClosable: boolean;
+    }[];
+    currentName: string;
+    onTabClick: (tab: {
+        uid: number;
+        instance: import("vue").ShallowReactive<import("vue").ComponentInternalInstance>;
+        props: {
+            label: string;
+            name: string;
+            closable: boolean;
+            disabled: boolean;
+            lazy: boolean;
+        };
+        paneName: string | undefined;
+        active: boolean;
+        index: string | undefined;
+        isClosable: boolean;
+    }, tabName: string, ev: Event) => void;
+    onTabRemove: (tab: {
+        uid: number;
+        instance: import("vue").ShallowReactive<import("vue").ComponentInternalInstance>;
+        props: {
+            label: string;
+            name: string;
+            closable: boolean;
+            disabled: boolean;
+            lazy: boolean;
+        };
+        paneName: string | undefined;
+        active: boolean;
+        index: string | undefined;
+        isClosable: boolean;
+    }, ev: Event) => void;
+}>;
+export default _default;

package/lib/components/tabs/src/tab-nav.js

@@ -2,9 +2,285 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var tabNav_vue_vue_type_script_lang = require('./tab-nav.vue_vue&type=script&lang.js');
+var vue = require('vue');
+var shared = require('@vue/shared');
+var core = require('@vueuse/core');
+var props = require('../../../utils/props.js');
+var aria = require('../../../utils/aria.js');
+var error = require('../../../utils/error.js');
+var index = require('../../icon/index.js');
+var icons = require('@element-plus/icons');
+require('../../../tokens/index.js');
+require('./tab-bar2.js');
+var tabs = require('../../../tokens/tabs.js');
+var tabBar_vue_vue_type_script_lang = require('./tab-bar.vue_vue_type_script_lang.js');
 
-tabNav_vue_vue_type_script_lang["default"].__file = "packages/components/tabs/src/tab-nav.vue";
+const tabNavProps = props.buildProps({
+  panes: {
+    type: props.definePropType(Array),
+    default: () => props.mutable([])
+  },
+  currentName: {
+    type: String,
+    default: ""
+  },
+  editable: Boolean,
+  onTabClick: {
+    type: props.definePropType(Function),
+    default: shared.NOOP
+  },
+  onTabRemove: {
+    type: props.definePropType(Function),
+    default: shared.NOOP
+  },
+  type: {
+    type: String,
+    values: ["card", "border-card", ""],
+    default: ""
+  },
+  stretch: Boolean
+});
+const COMPONENT_NAME = "ElTabNav";
+var TabNav = vue.defineComponent({
+  name: COMPONENT_NAME,
+  props: tabNavProps,
+  setup(props, { expose }) {
+    const visibility = core.useDocumentVisibility();
+    const focused = core.useWindowFocus();
+    const rootTabs = vue.inject(tabs.tabsRootContextKey);
+    if (!rootTabs)
+      error.throwError(COMPONENT_NAME, `ElTabNav must be nested inside ElTabs`);
+    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";
+      return {
+        transform: `translate${dir}(-${navOffset.value}px)`
+      };
+    });
+    const scrollPrev = () => {
+      if (!navScroll$.value)
+        return;
+      const containerSize = navScroll$.value[`offset${shared.capitalize(sizeName.value)}`];
+      const currentOffset = navOffset.value;
+      if (!currentOffset)
+        return;
+      const newOffset = currentOffset > containerSize ? currentOffset - containerSize : 0;
+      navOffset.value = newOffset;
+    };
+    const scrollNext = () => {
+      if (!navScroll$.value || !nav$.value)
+        return;
+      const navSize = nav$.value[`offset${shared.capitalize(sizeName.value)}`];
+      const containerSize = navScroll$.value[`offset${shared.capitalize(sizeName.value)}`];
+      const currentOffset = navOffset.value;
+      if (navSize - currentOffset <= containerSize)
+        return;
+      const newOffset = navSize - currentOffset > containerSize * 2 ? currentOffset + containerSize : navSize - containerSize;
+      navOffset.value = newOffset;
+    };
+    const scrollToActiveTab = () => {
+      const nav = nav$.value;
+      if (!scrollable.value || !el$.value || !navScroll$.value || !nav)
+        return;
+      const activeTab = el$.value.querySelector(".is-active");
+      if (!activeTab)
+        return;
+      const navScroll = navScroll$.value;
+      const isHorizontal = ["top", "bottom"].includes(rootTabs.props.tabPosition);
+      const activeTabBounding = activeTab.getBoundingClientRect();
+      const navScrollBounding = navScroll.getBoundingClientRect();
+      const maxOffset = isHorizontal ? nav.offsetWidth - navScrollBounding.width : nav.offsetHeight - navScrollBounding.height;
+      const currentOffset = navOffset.value;
+      let newOffset = currentOffset;
+      if (isHorizontal) {
+        if (activeTabBounding.left < navScrollBounding.left) {
+          newOffset = currentOffset - (navScrollBounding.left - activeTabBounding.left);
+        }
+        if (activeTabBounding.right > navScrollBounding.right) {
+          newOffset = currentOffset + activeTabBounding.right - navScrollBounding.right;
+        }
+      } else {
+        if (activeTabBounding.top < navScrollBounding.top) {
+          newOffset = currentOffset - (navScrollBounding.top - activeTabBounding.top);
+        }
+        if (activeTabBounding.bottom > navScrollBounding.bottom) {
+          newOffset = currentOffset + (activeTabBounding.bottom - navScrollBounding.bottom);
+        }
+      }
+      newOffset = Math.max(newOffset, 0);
+      navOffset.value = Math.min(newOffset, maxOffset);
+    };
+    const update = () => {
+      if (!nav$.value || !navScroll$.value)
+        return;
+      const navSize = nav$.value[`offset${shared.capitalize(sizeName.value)}`];
+      const containerSize = navScroll$.value[`offset${shared.capitalize(sizeName.value)}`];
+      const currentOffset = navOffset.value;
+      if (containerSize < navSize) {
+        const currentOffset2 = navOffset.value;
+        scrollable.value = scrollable.value || {};
+        scrollable.value.prev = currentOffset2;
+        scrollable.value.next = currentOffset2 + containerSize < navSize;
+        if (navSize - currentOffset2 < containerSize) {
+          navOffset.value = navSize - containerSize;
+        }
+      } else {
+        scrollable.value = false;
+        if (currentOffset > 0) {
+          navOffset.value = 0;
+        }
+      }
+    };
+    const changeTab = (e) => {
+      const code = e.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]"));
+      const currentIndex = tabList.indexOf(e.target);
+      let nextIndex;
+      if (code === left || code === up) {
+        if (currentIndex === 0) {
+          nextIndex = tabList.length - 1;
+        } else {
+          nextIndex = currentIndex - 1;
+        }
+      } else {
+        if (currentIndex < tabList.length - 1) {
+          nextIndex = currentIndex + 1;
+        } else {
+          nextIndex = 0;
+        }
+      }
+      tabList[nextIndex].focus();
+      tabList[nextIndex].click();
+      setFocus();
+    };
+    const setFocus = () => {
+      if (focusable.value)
+        isFocus.value = true;
+    };
+    const removeFocus = () => isFocus.value = false;
+    vue.watch(visibility, (visibility2) => {
+      if (visibility2 === "hidden") {
+        focusable.value = false;
+      } else if (visibility2 === "visible") {
+        setTimeout(() => focusable.value = true, 50);
+      }
+    });
+    vue.watch(focused, (focused2) => {
+      if (focused2) {
+        setTimeout(() => focusable.value = true, 50);
+      } else {
+        focusable.value = false;
+      }
+    });
+    core.useResizeObserver(el$, update);
+    vue.onMounted(() => setTimeout(() => scrollToActiveTab(), 0));
+    vue.onUpdated(() => update());
+    expose({
+      scrollToActiveTab,
+      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(icons.ArrowLeft) })]),
+        vue.h("span", {
+          class: [
+            "el-tabs__nav-next",
+            scrollable.value.next ? "" : "is-disabled"
+          ],
+          onClick: scrollNext
+        }, [vue.h(index.ElIcon, {}, { default: () => vue.h(icons.ArrowRight) })])
+      ] : null;
+      const tabs = props.panes.map((pane, index$1) => {
+        var _a, _b;
+        const tabName = pane.props.name || pane.index || `${index$1}`;
+        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(icons.Close) }) : 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}`,
+          "aria-controls": `pane-${tabName}`,
+          role: "tab",
+          "aria-selected": pane.active,
+          ref: `tab-${tabName}`,
+          tabindex,
+          onFocus: () => setFocus(),
+          onBlur: () => removeFocus(),
+          onClick: (ev) => {
+            removeFocus();
+            props.onTabClick(pane, tabName, ev);
+          },
+          onKeydown: (ev) => {
+            if (closable && (ev.code === aria.EVENT_CODE.delete || ev.code === aria.EVENT_CODE.backspace)) {
+              props.onTabRemove(pane, ev);
+            }
+          }
+        }, [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_vue_vue_type_script_lang["default"], {
+              tabs: [...props.panes]
+            }) : null,
+            tabs
+          ])
+        ])
+      ]);
+    };
+  }
+});
 
-exports["default"] = tabNav_vue_vue_type_script_lang["default"];
+exports["default"] = TabNav;
+exports.tabNavProps = tabNavProps;
 //# sourceMappingURL=tab-nav.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"tab-nav.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;"}
+{"version":3,"file":"tab-nav.js","sources":["../../../../../../packages/components/tabs/src/tab-nav.ts"],"sourcesContent":["import {\n  h,\n  defineComponent,\n  ref,\n  inject,\n  computed,\n  onUpdated,\n  onMounted,\n  watch,\n} from 'vue'\nimport { NOOP, capitalize } from '@vue/shared'\nimport {\n  useResizeObserver,\n  useDocumentVisibility,\n  useWindowFocus,\n} from '@vueuse/core'\nimport { buildProps, definePropType, mutable } from '@element-plus/utils/props'\nimport { EVENT_CODE } from '@element-plus/utils/aria'\nimport { throwError } from '@element-plus/utils/error'\nimport { ElIcon } from '@element-plus/components/icon'\nimport { ArrowLeft, ArrowRight, Close } from '@element-plus/icons'\nimport { tabsRootContextKey } from '@element-plus/tokens'\nimport TabBar from './tab-bar.vue'\nimport type { ExtractPropTypes, CSSProperties } 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,\n    default: '',\n  },\n  editable: Boolean,\n  onTabClick: {\n    type: definePropType<\n      (tab: TabsPaneContext, tabName: string, 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":["buildProps","definePropType","mutable","NOOP","defineComponent","useDocumentVisibility","useWindowFocus","inject","tabsRootContextKey","ref","computed","capitalize","EVENT_CODE","h","ElIcon","ArrowLeft","ArrowRight","index","Close","TabBar"],"mappings":"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"}

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

@@ -0,0 +1,9 @@
+import type { ExtractPropTypes } from 'vue';
+export declare const tabPaneProps: {
+    readonly label: import("element-plus/es/utils/props").BuildPropReturn<StringConstructor, "", unknown, unknown, unknown>;
+    readonly name: import("element-plus/es/utils/props").BuildPropReturn<StringConstructor, "", unknown, unknown, unknown>;
+    readonly closable: BooleanConstructor;
+    readonly disabled: BooleanConstructor;
+    readonly lazy: BooleanConstructor;
+};
+export declare type TabPaneProps = ExtractPropTypes<typeof tabPaneProps>;