element-ps 1.0.0-alpha.6 → 1.0.1

package/es/packages/components/tabs/src/tab-bar.vue_vue&type=script&lang.mjs

@@ -0,0 +1,66 @@
+import { defineComponent, inject, getCurrentInstance, ref } from 'vue';
+import { capitalize } from '@vue/shared';
+
+var script = defineComponent({
+  name: "PsTabBar",
+  props: {
+    tabs: {
+      type: Array,
+      default: () => []
+    }
+  },
+  setup(props) {
+    const rootTabs = inject("rootTabs");
+    if (!rootTabs) {
+      throw new Error(`PsTabBar must use with PsTabs`);
+    }
+    const instance = getCurrentInstance();
+    const getBarStyle = () => {
+      const style = {};
+      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;
+        const $el = (_a = instance.parent.refs) == null ? void 0 : _a[`tab-${tab.paneName}`];
+        if (!$el) {
+          return false;
+        }
+        if (!tab.active) {
+          return true;
+        } else {
+          tabSize = $el[`client${capitalize(sizeName)}`];
+          const position = sizeDir === "x" ? "left" : "top";
+          offset = $el.getBoundingClientRect()[position] - $el.parentElement.getBoundingClientRect()[position];
+          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;
+        }
+      });
+      const transform = `translate${capitalize(sizeDir)}(${offset}px)`;
+      style[sizeName] = `${tabSize}px`;
+      style.transform = transform;
+      style.msTransform = transform;
+      style.webkitTransform = transform;
+      return style;
+    };
+    const barStyle = ref(getBarStyle());
+    const update = () => {
+      barStyle.value = getBarStyle();
+    };
+    return {
+      rootTabs,
+      barStyle,
+      update
+    };
+  }
+});
+
+export { script as default };
+//# sourceMappingURL=tab-bar.vue_vue&type=script&lang.mjs.map

package/es/packages/components/tabs/src/tab-bar.vue_vue&type=script&lang.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"tab-bar.vue_vue&type=script&lang.mjs","sources":["../../../../../../../packages/components/tabs/src/tab-bar.vue"],"sourcesContent":["<template>\n  <div\n    :class=\"['el-tabs__active-bar', `is-${rootTabs.props.tabPosition}`]\"\n    :style=\"barStyle\"\n  ></div>\n</template>\n<script lang=\"ts\">\nimport { defineComponent, inject, getCurrentInstance, ref } from 'vue'\nimport { capitalize } from '@vue/shared'\nimport type { Pane, RootTabs } from './token'\n\nimport type { CSSProperties, PropType } from 'vue'\n\nexport default defineComponent({\n  name: 'PsTabBar',\n  props: {\n    tabs: {\n      type: Array as PropType<Pane[]>,\n      default: () => [] as Pane[],\n    },\n  },\n  setup(props) {\n    const rootTabs = inject<RootTabs>('rootTabs')\n    if (!rootTabs) {\n      throw new Error(`PsTabBar must use with PsTabs`)\n    }\n    const instance = getCurrentInstance()\n\n    const getBarStyle = () => {\n      const style = {} as CSSProperties\n      let offset = 0\n      let tabSize = 0\n\n      const sizeName = ['top', 'bottom'].includes(rootTabs.props.tabPosition)\n        ? 'width'\n        : 'height'\n      const sizeDir = sizeName === 'width' ? 'x' : 'y'\n\n      props.tabs.every((tab) => {\n        const $el = instance.parent.refs?.[`tab-${tab.paneName}`] as Element\n        if (!$el) {\n          return false\n        }\n        if (!tab.active) {\n          return true\n        } else {\n          tabSize = $el[`client${capitalize(sizeName)}`]\n          const position = sizeDir === 'x' ? 'left' : 'top'\n          offset =\n            $el.getBoundingClientRect()[position] -\n            $el.parentElement.getBoundingClientRect()[position]\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\n      const transform = `translate${capitalize(sizeDir)}(${offset}px)`\n      style[sizeName] = `${tabSize}px`\n      style.transform = transform\n      style.msTransform = transform\n      ;(style as any).webkitTransform = transform\n\n      return style\n    }\n\n    const barStyle = ref(getBarStyle() as CSSProperties)\n\n    const update = () => {\n      barStyle.value = getBarStyle()\n    }\n\n    return {\n      rootTabs,\n      barStyle,\n      update,\n    }\n  },\n})\n</script>\n"],"names":[],"mappings":";;;AAaA,aAAe,gBAAgB;AAAA,EAC7B,MAAM;AAAA,EACN,OAAO;AAAA,IACL,MAAM;AAAA,MACJ,MAAM;AAAA,MACN,SAAS,MAAM;AAAA;AAAA;AAAA,EAGnB,MAAM,OAAO;AACX,UAAM,WAAW,OAAiB;AAClC,QAAI,CAAC,UAAU;AACb,YAAM,IAAI,MAAM;AAAA;AAElB,UAAM,WAAW;AAEjB,UAAM,cAAc,MAAM;AACxB,YAAM,QAAQ;AACd,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,eAAS,OAAO,SAAhB,mBAAuB,OAAO,IAAI;AAC9C,YAAI,CAAC,KAAK;AACR,iBAAO;AAAA;AAET,YAAI,CAAC,IAAI,QAAQ;AACf,iBAAO;AAAA,eACF;AACL,oBAAU,IAAI,SAAS,WAAW;AAClC,gBAAM,WAAW,YAAY,MAAM,SAAS;AAC5C,mBACE,IAAI,wBAAwB,YAC5B,IAAI,cAAc,wBAAwB;AAC5C,gBAAM,YAAY,OAAO,iBAAiB;AAE1C,cAAI,aAAa,SAAS;AACxB,gBAAI,MAAM,KAAK,SAAS,GAAG;AACzB,yBACE,WAAW,UAAU,eACrB,WAAW,UAAU;AAAA;AAEzB,sBAAU,WAAW,UAAU;AAAA;AAEjC,iBAAO;AAAA;AAAA;AAIX,YAAM,YAAY,YAAY,WAAW,YAAY;AACrD,YAAM,YAAY,GAAG;AACrB,YAAM,YAAY;AAClB,YAAM,cAAc;AACnB,MAAC,MAAc,kBAAkB;AAElC,aAAO;AAAA;AAGT,UAAM,WAAW,IAAI;AAErB,UAAM,SAAS,MAAM;AACnB,eAAS,QAAQ;AAAA;AAGnB,WAAO;AAAA,MACL;AAAA,MACA;AAAA,MACA;AAAA;AAAA;AAAA;;;;"}

package/es/packages/components/tabs/src/tab-bar.vue_vue&type=template&id=09e034e4&lang.mjs

@@ -0,0 +1,11 @@
+import { openBlock, createElementBlock, normalizeClass, normalizeStyle } from 'vue';
+
+function render(_ctx, _cache, $props, $setup, $data, $options) {
+  return openBlock(), createElementBlock("div", {
+    class: normalizeClass(["el-tabs__active-bar", `is-${_ctx.rootTabs.props.tabPosition}`]),
+    style: normalizeStyle(_ctx.barStyle)
+  }, null, 6);
+}
+
+export { render };
+//# sourceMappingURL=tab-bar.vue_vue&type=template&id=09e034e4&lang.mjs.map

package/es/packages/components/tabs/src/tab-bar.vue_vue&type=template&id=09e034e4&lang.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"tab-bar.vue_vue&type=template&id=09e034e4&lang.mjs","sources":["../../../../../../../packages/components/tabs/src/tab-bar.vue?vue&type=template&id=09e034e4&lang.js"],"sourcesContent":["<template>\n  <div\n    :class=\"['el-tabs__active-bar', `is-${rootTabs.props.tabPosition}`]\"\n    :style=\"barStyle\"\n  ></div>\n</template>\n<script lang=\"ts\">\nimport { defineComponent, inject, getCurrentInstance, ref } from 'vue'\nimport { capitalize } from '@vue/shared'\nimport type { Pane, RootTabs } from './token'\n\nimport type { CSSProperties, PropType } from 'vue'\n\nexport default defineComponent({\n  name: 'PsTabBar',\n  props: {\n    tabs: {\n      type: Array as PropType<Pane[]>,\n      default: () => [] as Pane[],\n    },\n  },\n  setup(props) {\n    const rootTabs = inject<RootTabs>('rootTabs')\n    if (!rootTabs) {\n      throw new Error(`PsTabBar must use with PsTabs`)\n    }\n    const instance = getCurrentInstance()\n\n    const getBarStyle = () => {\n      const style = {} as CSSProperties\n      let offset = 0\n      let tabSize = 0\n\n      const sizeName = ['top', 'bottom'].includes(rootTabs.props.tabPosition)\n        ? 'width'\n        : 'height'\n      const sizeDir = sizeName === 'width' ? 'x' : 'y'\n\n      props.tabs.every((tab) => {\n        const $el = instance.parent.refs?.[`tab-${tab.paneName}`] as Element\n        if (!$el) {\n          return false\n        }\n        if (!tab.active) {\n          return true\n        } else {\n          tabSize = $el[`client${capitalize(sizeName)}`]\n          const position = sizeDir === 'x' ? 'left' : 'top'\n          offset =\n            $el.getBoundingClientRect()[position] -\n            $el.parentElement.getBoundingClientRect()[position]\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\n      const transform = `translate${capitalize(sizeDir)}(${offset}px)`\n      style[sizeName] = `${tabSize}px`\n      style.transform = transform\n      style.msTransform = transform\n      ;(style as any).webkitTransform = transform\n\n      return style\n    }\n\n    const barStyle = ref(getBarStyle() as CSSProperties)\n\n    const update = () => {\n      barStyle.value = getBarStyle()\n    }\n\n    return {\n      rootTabs,\n      barStyle,\n      update,\n    }\n  },\n})\n</script>\n"],"names":["_createElementBlock"],"mappings":";;;sBACEA;IACG,oDAAqC,cAAS,MAAM;AAAA,IACpD,sBAAO;;;;;;"}

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

@@ -0,0 +1,5 @@
+import script from './tab-nav.vue_vue&type=script&lang.mjs';
+export { default } from './tab-nav.vue_vue&type=script&lang.mjs';
+
+script.__file = "packages/components/tabs/src/tab-nav.vue";
+//# sourceMappingURL=tab-nav.mjs.map

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

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

package/es/packages/components/tabs/src/tab-nav.vue_vue&type=script&lang.mjs

@@ -0,0 +1,257 @@
+import { defineComponent, inject, ref, computed, onUpdated, onMounted, onBeforeUnmount, h } from 'vue';
+import { NOOP, capitalize } from '@vue/shared';
+import { addResizeListener, removeResizeListener } from '../../../utils/resize-event.mjs';
+import { on, off } from '../../../utils/dom.mjs';
+import { throwError } from '../../../utils/error.mjs';
+import { PsIcon } from '../../icon/index.mjs';
+import { ArrowLeft, ArrowRight, Close } from '@element-plus/icons';
+import './tab-bar.mjs';
+import script$1 from './tab-bar.vue_vue&type=script&lang.mjs';
+
+var script = defineComponent({
+  name: "PsTabNav",
+  components: {
+    TabBar: script$1
+  },
+  props: {
+    panes: {
+      type: Array,
+      default: () => []
+    },
+    currentName: {
+      type: String,
+      default: ""
+    },
+    editable: Boolean,
+    onTabClick: {
+      type: Function,
+      default: NOOP
+    },
+    onTabRemove: {
+      type: Function,
+      default: NOOP
+    },
+    type: {
+      type: String,
+      default: ""
+    },
+    stretch: Boolean
+  },
+  setup() {
+    const rootTabs = inject("rootTabs");
+    if (!rootTabs) {
+      throwError("[PsTabNav]", `PsTabNav must be nested inside PsTabs`);
+    }
+    const scrollable = ref(false);
+    const navOffset = ref(0);
+    const isFocus = ref(false);
+    const focusable = ref(true);
+    const navScroll$ = ref(null);
+    const nav$ = ref(null);
+    const el$ = ref(null);
+    const sizeName = computed(() => {
+      return ["top", "bottom"].includes(rootTabs.props.tabPosition) ? "width" : "height";
+    });
+    const navStyle = computed(() => {
+      const dir = sizeName.value === "width" ? "X" : "Y";
+      return {
+        transform: `translate${dir}(-${navOffset.value}px)`
+      };
+    });
+    const scrollToActiveTab = () => {
+      if (!scrollable.value)
+        return;
+      const nav = nav$.value;
+      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)
+        return;
+      const navSize = nav$.value[`offset${capitalize(sizeName.value)}`];
+      const containerSize = navScroll$.value[`offset${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 visibilityChangeHandler = () => {
+      const visibility = document.visibilityState;
+      if (visibility === "hidden") {
+        focusable.value = false;
+      } else if (visibility === "visible") {
+        setTimeout(() => {
+          focusable.value = true;
+        }, 50);
+      }
+    };
+    const windowBlurHandler = () => {
+      focusable.value = false;
+    };
+    const windowFocusHandler = () => {
+      setTimeout(() => {
+        focusable.value = true;
+      }, 50);
+    };
+    onUpdated(() => {
+      update();
+    });
+    onMounted(() => {
+      addResizeListener(el$.value, update);
+      on(document, "visibilitychange", visibilityChangeHandler);
+      on(window, "blur", windowBlurHandler);
+      on(window, "focus", windowFocusHandler);
+      setTimeout(() => {
+        scrollToActiveTab();
+      }, 0);
+    });
+    onBeforeUnmount(() => {
+      if (el$.value) {
+        removeResizeListener(el$.value, update);
+      }
+      off(document, "visibilitychange", visibilityChangeHandler);
+      off(window, "blur", windowBlurHandler);
+      off(window, "focus", windowFocusHandler);
+    });
+    return {
+      rootTabs,
+      scrollable,
+      navOffset,
+      isFocus,
+      focusable,
+      navScroll$,
+      nav$,
+      el$,
+      sizeName,
+      navStyle,
+      scrollToActiveTab,
+      update,
+      visibilityChangeHandler,
+      windowBlurHandler,
+      windowFocusHandler
+    };
+  },
+  render() {
+    const {
+      type,
+      panes,
+      editable,
+      stretch,
+      navStyle,
+      scrollable,
+      rootTabs,
+      isFocus
+    } = this;
+    const scrollBtn = scrollable ? [
+      h("span", {
+        class: [
+          "el-tabs__nav-prev",
+          scrollable.prev ? "" : "is-disabled"
+        ]
+      }, [h(PsIcon, {}, { default: () => h(ArrowLeft) })]),
+      h("span", {
+        class: [
+          "el-tabs__nav-next",
+          scrollable.next ? "" : "is-disabled"
+        ]
+      }, [h(PsIcon, {}, { default: () => h(ArrowRight) })])
+    ] : null;
+    const tabs = panes.map((pane, index) => {
+      var _a, _b;
+      const tabName = pane.props.name || pane.index || `${index}`;
+      const closable = pane.isClosable || editable;
+      pane.index = `${index}`;
+      const btnClose = closable ? h(PsIcon, {
+        class: "is-icon-close"
+      }, { default: () => h(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 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
+      }, [tabLabelContent, btnClose]);
+    });
+    return h("div", {
+      ref: "el$",
+      class: [
+        "el-tabs__nav-wrap",
+        scrollable ? "is-scrollable" : "",
+        `is-${rootTabs.props.tabPosition}`
+      ]
+    }, [
+      scrollBtn,
+      h("div", {
+        class: "el-tabs__nav-scroll",
+        ref: "navScroll$"
+      }, [
+        h("div", {
+          class: [
+            "el-tabs__nav",
+            `is-${rootTabs.props.tabPosition}`,
+            stretch && ["top", "bottom"].includes(rootTabs.props.tabPosition) ? "is-stretch" : ""
+          ],
+          ref: "nav$",
+          style: navStyle,
+          role: "tablist"
+        }, [
+          !type ? h(script$1, {
+            tabs: [...panes]
+          }) : null,
+          tabs
+        ])
+      ])
+    ]);
+  }
+});
+
+export { script as default };
+//# sourceMappingURL=tab-nav.vue_vue&type=script&lang.mjs.map

package/es/packages/components/tabs/src/tab-nav.vue_vue&type=script&lang.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"tab-nav.vue_vue&type=script&lang.mjs","sources":["../../../../../../../packages/components/tabs/src/tab-nav.vue"],"sourcesContent":["<script lang=\"ts\">\nimport {\n  h,\n  defineComponent,\n  ref,\n  inject,\n  computed,\n  onUpdated,\n  onMounted,\n  onBeforeUnmount,\n} from 'vue'\nimport { NOOP, capitalize } from '@vue/shared'\nimport {\n  addResizeListener,\n  removeResizeListener,\n} from '@element-ps/utils/resize-event'\nimport { on, off } from '@element-ps/utils/dom'\nimport { throwError } from '@element-ps/utils/error'\nimport { PsIcon } from '@element-ps/components/icon'\nimport { ArrowLeft, ArrowRight, Close } from '@element-plus/icons'\nimport TabBar from './tab-bar.vue'\nimport type { ResizableElement } from '@element-ps/utils/resize-event'\n\nimport type { PropType } from 'vue'\nimport type { Nullable } from '@element-ps/utils/types'\nimport type { RootTabs, Pane, ITabType } from './token'\n\ntype RefElement = Nullable<HTMLElement>\n\ninterface Scrollable {\n  next?: boolean\n  prev?: number\n}\n\nexport default defineComponent({\n  name: 'PsTabNav',\n  components: {\n    TabBar,\n  },\n  props: {\n    panes: {\n      type: Array as PropType<Pane[]>,\n      default: () => [] as Pane[],\n    },\n    currentName: {\n      type: String,\n      default: '',\n    },\n    editable: Boolean,\n    onTabClick: {\n      type: Function as PropType<\n        (tab: Pane, tabName: string, ev: Event) => void\n      >,\n      default: NOOP,\n    },\n    onTabRemove: {\n      type: Function as PropType<(tab: Pane, ev: Event) => void>,\n      default: NOOP,\n    },\n    type: {\n      type: String as PropType<ITabType>,\n      default: '',\n    },\n    stretch: Boolean,\n  },\n  setup() {\n    const rootTabs = inject<RootTabs>('rootTabs')\n    if (!rootTabs) {\n      throwError('[PsTabNav]', `PsTabNav must be nested inside PsTabs`)\n    }\n\n    const scrollable = ref<boolean | Scrollable>(false)\n    const navOffset = ref(0)\n    const isFocus = ref(false)\n    const focusable = ref(true)\n\n    const navScroll$ = ref<RefElement>(null)\n    const nav$ = ref<RefElement>(null)\n    const el$ = ref<RefElement>(null)\n\n    const sizeName = computed(() => {\n      return ['top', 'bottom'].includes(rootTabs.props.tabPosition)\n        ? 'width'\n        : 'height'\n    })\n    const navStyle = computed(() => {\n      const dir = sizeName.value === 'width' ? 'X' : 'Y'\n      return {\n        transform: `translate${dir}(-${navOffset.value}px)`,\n      }\n    })\n\n    const scrollToActiveTab = () => {\n      if (!scrollable.value) return\n      const nav = nav$.value\n      const activeTab = el$.value.querySelector('.is-active')\n      if (!activeTab) return\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) return\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 || {}) as Scrollable\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 visibilityChangeHandler = () => {\n      const visibility = document.visibilityState\n      if (visibility === 'hidden') {\n        focusable.value = false\n      } else if (visibility === 'visible') {\n        setTimeout(() => {\n          focusable.value = true\n        }, 50)\n      }\n    }\n\n    const windowBlurHandler = () => {\n      focusable.value = false\n    }\n\n    const windowFocusHandler = () => {\n      setTimeout(() => {\n        focusable.value = true\n      }, 50)\n    }\n\n    onUpdated(() => {\n      update()\n    })\n\n    onMounted(() => {\n      addResizeListener(el$.value as ResizableElement, update)\n      on(document, 'visibilitychange', visibilityChangeHandler)\n      on(window, 'blur', windowBlurHandler)\n      on(window, 'focus', windowFocusHandler)\n      setTimeout(() => {\n        scrollToActiveTab()\n      }, 0)\n    })\n\n    onBeforeUnmount(() => {\n      if (el$.value) {\n        removeResizeListener(el$.value as ResizableElement, update)\n      }\n      off(document, 'visibilitychange', visibilityChangeHandler)\n      off(window, 'blur', windowBlurHandler)\n      off(window, 'focus', windowFocusHandler)\n    })\n\n    return {\n      rootTabs,\n\n      scrollable,\n      navOffset,\n      isFocus,\n      focusable,\n\n      navScroll$,\n      nav$,\n      el$,\n\n      sizeName,\n      navStyle,\n\n      scrollToActiveTab,\n      update,\n      visibilityChangeHandler,\n      windowBlurHandler,\n      windowFocusHandler,\n    }\n  },\n  render() {\n    const {\n      type,\n      panes,\n      editable,\n      stretch,\n      navStyle,\n      scrollable,\n      rootTabs,\n      isFocus,\n    } = this\n\n    const scrollBtn = scrollable\n      ? [\n          h(\n            'span',\n            {\n              class: [\n                'el-tabs__nav-prev',\n                scrollable.prev ? '' : 'is-disabled',\n              ],\n            },\n            [h(PsIcon, {}, { default: () => h(ArrowLeft) })]\n          ),\n          h(\n            'span',\n            {\n              class: [\n                'el-tabs__nav-next',\n                scrollable.next ? '' : 'is-disabled',\n              ],\n            },\n            [h(PsIcon, {}, { default: () => h(ArrowRight) })]\n          ),\n        ]\n      : null\n\n    const tabs = panes.map((pane, index) => {\n      const tabName = pane.props.name || pane.index || `${index}`\n      const closable = pane.isClosable || editable\n\n      pane.index = `${index}`\n\n      const btnClose = closable\n        ? h(\n          PsIcon,\n          {\n            class: 'is-icon-close',\n          },\n          { default: () => h(Close) }\n        )\n        : null\n\n      const tabLabelContent = 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        },\n        [tabLabelContent, btnClose]\n      )\n    })\n\n    return h(\n      'div',\n      {\n        ref: 'el$',\n        class: [\n          'el-tabs__nav-wrap',\n          scrollable ? '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                  stretch &&\n                  ['top', 'bottom'].includes(rootTabs.props.tabPosition)\n                    ? 'is-stretch'\n                    : '',\n                ],\n                ref: 'nav$',\n                style: navStyle,\n                role: 'tablist',\n              },\n              [\n                !type\n                  ? h(TabBar, {\n                      tabs: [...panes],\n                    })\n                  : null,\n                tabs,\n              ]\n            ),\n          ]\n        ),\n      ]\n    )\n  },\n})\n</script>\n"],"names":["TabBar"],"mappings":"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"}

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

@@ -0,0 +1,7 @@
+import script from './tab-pane.vue_vue&type=script&lang.mjs';
+export { default } from './tab-pane.vue_vue&type=script&lang.mjs';
+import { render } from './tab-pane.vue_vue&type=template&id=46ec5d32&lang.mjs';
+
+script.render = render;
+script.__file = "packages/components/tabs/src/tab-pane.vue";
+//# sourceMappingURL=tab-pane.mjs.map

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

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

package/es/packages/components/tabs/src/tab-pane.vue_vue&type=script&lang.mjs

@@ -0,0 +1,64 @@
+import { defineComponent, ref, inject, computed, watch, getCurrentInstance } from 'vue';
+
+var script = defineComponent({
+  name: "PsTabPane",
+  props: {
+    label: {
+      type: String,
+      default: ""
+    },
+    name: {
+      type: String,
+      default: ""
+    },
+    closable: Boolean,
+    disabled: Boolean,
+    lazy: Boolean
+  },
+  setup(props) {
+    const index = ref(null);
+    const loaded = ref(false);
+    const rootTabs = inject("rootTabs");
+    const updatePaneState = inject("updatePaneState");
+    if (!rootTabs || !updatePaneState) {
+      throw new Error(`PsTabPane must use with PsTabs`);
+    }
+    const isClosable = computed(() => {
+      return props.closable || rootTabs.props.closable;
+    });
+    const active = computed(() => {
+      return rootTabs.currentName.value === (props.name || index.value);
+    });
+    const paneName = computed(() => {
+      return props.name || index.value;
+    });
+    const shouldBeRender = computed(() => {
+      return !props.lazy || loaded.value || active.value;
+    });
+    watch(active, (val) => {
+      if (val)
+        loaded.value = true;
+    });
+    const instance = getCurrentInstance();
+    updatePaneState({
+      uid: instance.uid,
+      instance,
+      props,
+      paneName,
+      active,
+      index,
+      isClosable
+    });
+    return {
+      index,
+      loaded,
+      isClosable,
+      active,
+      paneName,
+      shouldBeRender
+    };
+  }
+});
+
+export { script as default };
+//# sourceMappingURL=tab-pane.vue_vue&type=script&lang.mjs.map

package/es/packages/components/tabs/src/tab-pane.vue_vue&type=script&lang.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"tab-pane.vue_vue&type=script&lang.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></slot>\n  </div>\n</template>\n<script lang=\"ts\">\nimport {\n  defineComponent,\n  ref,\n  computed,\n  inject,\n  getCurrentInstance,\n  watch,\n} from 'vue'\nimport type { RootTabs, UpdatePaneStateCallback } from './token'\n\nexport default defineComponent({\n  name: 'PsTabPane',\n  props: {\n    label: {\n      type: String,\n      default: '',\n    },\n    name: {\n      type: String,\n      default: '',\n    },\n    closable: Boolean,\n    disabled: Boolean,\n    lazy: Boolean,\n  },\n  setup(props) {\n    const index = ref<string>(null)\n    const loaded = ref(false)\n    const rootTabs = inject<RootTabs>('rootTabs')\n    const updatePaneState = inject<UpdatePaneStateCallback>('updatePaneState')\n\n    if (!rootTabs || !updatePaneState) {\n      throw new Error(`PsTabPane must use with PsTabs`)\n    }\n\n    const isClosable = computed(() => {\n      return props.closable || rootTabs.props.closable\n    })\n\n    const active = computed(() => {\n      return rootTabs.currentName.value === (props.name || index.value)\n    })\n\n    const paneName = computed((): string => {\n      return props.name || index.value\n    })\n\n    const shouldBeRender = computed(() => {\n      return !props.lazy || loaded.value || active.value\n    })\n\n    watch(active, (val) => {\n      if (val) loaded.value = true\n    })\n\n    const instance = getCurrentInstance()\n    updatePaneState({\n      uid: instance.uid,\n      instance,\n      props,\n      paneName,\n      active,\n      index,\n      isClosable,\n    })\n\n    return {\n      index,\n      loaded,\n      isClosable,\n      active,\n      paneName,\n      shouldBeRender,\n    }\n  },\n})\n</script>\n"],"names":[],"mappings":";;AAwBA,aAAe,gBAAgB;AAAA,EAC7B,MAAM;AAAA,EACN,OAAO;AAAA,IACL,OAAO;AAAA,MACL,MAAM;AAAA,MACN,SAAS;AAAA;AAAA,IAEX,MAAM;AAAA,MACJ,MAAM;AAAA,MACN,SAAS;AAAA;AAAA,IAEX,UAAU;AAAA,IACV,UAAU;AAAA,IACV,MAAM;AAAA;AAAA,EAER,MAAM,OAAO;AACX,UAAM,QAAQ,IAAY;AAC1B,UAAM,SAAS,IAAI;AACnB,UAAM,WAAW,OAAiB;AAClC,UAAM,kBAAkB,OAAgC;AAExD,QAAI,CAAC,YAAY,CAAC,iBAAiB;AACjC,YAAM,IAAI,MAAM;AAAA;AAGlB,UAAM,aAAa,SAAS,MAAM;AAChC,aAAO,MAAM,YAAY,SAAS,MAAM;AAAA;AAG1C,UAAM,SAAS,SAAS,MAAM;AAC5B,aAAO,SAAS,YAAY,iBAAiB,QAAQ,MAAM;AAAA;AAG7D,UAAM,WAAW,SAAS,MAAc;AACtC,aAAO,MAAM,QAAQ,MAAM;AAAA;AAG7B,UAAM,iBAAiB,SAAS,MAAM;AACpC,aAAO,CAAC,MAAM,QAAQ,OAAO,SAAS,OAAO;AAAA;AAG/C,UAAM,QAAQ,CAAC,QAAQ;AACrB,UAAI;AAAK,eAAO,QAAQ;AAAA;AAG1B,UAAM,WAAW;AACjB,oBAAgB;AAAA,MACd,KAAK,SAAS;AAAA,MACd;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA;AAGF,WAAO;AAAA,MACL;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA;AAAA;AAAA;;;;"}

package/es/packages/components/tabs/src/tab-pane.vue_vue&type=template&id=46ec5d32&lang.mjs

@@ -0,0 +1,20 @@
+import { withDirectives, openBlock, createElementBlock, renderSlot, vShow, createCommentVNode } from 'vue';
+
+const _hoisted_1 = ["id", "aria-hidden", "aria-labelledby"];
+function 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);
+}
+
+export { render };
+//# sourceMappingURL=tab-pane.vue_vue&type=template&id=46ec5d32&lang.mjs.map

package/es/packages/components/tabs/src/tab-pane.vue_vue&type=template&id=46ec5d32&lang.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"tab-pane.vue_vue&type=template&id=46ec5d32&lang.mjs","sources":["../../../../../../../packages/components/tabs/src/tab-pane.vue?vue&type=template&id=46ec5d32&lang.js"],"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></slot>\n  </div>\n</template>\n<script lang=\"ts\">\nimport {\n  defineComponent,\n  ref,\n  computed,\n  inject,\n  getCurrentInstance,\n  watch,\n} from 'vue'\nimport type { RootTabs, UpdatePaneStateCallback } from './token'\n\nexport default defineComponent({\n  name: 'PsTabPane',\n  props: {\n    label: {\n      type: String,\n      default: '',\n    },\n    name: {\n      type: String,\n      default: '',\n    },\n    closable: Boolean,\n    disabled: Boolean,\n    lazy: Boolean,\n  },\n  setup(props) {\n    const index = ref<string>(null)\n    const loaded = ref(false)\n    const rootTabs = inject<RootTabs>('rootTabs')\n    const updatePaneState = inject<UpdatePaneStateCallback>('updatePaneState')\n\n    if (!rootTabs || !updatePaneState) {\n      throw new Error(`PsTabPane must use with PsTabs`)\n    }\n\n    const isClosable = computed(() => {\n      return props.closable || rootTabs.props.closable\n    })\n\n    const active = computed(() => {\n      return rootTabs.currentName.value === (props.name || index.value)\n    })\n\n    const paneName = computed((): string => {\n      return props.name || index.value\n    })\n\n    const shouldBeRender = computed(() => {\n      return !props.lazy || loaded.value || active.value\n    })\n\n    watch(active, (val) => {\n      if (val) loaded.value = true\n    })\n\n    const instance = getCurrentInstance()\n    updatePaneState({\n      uid: instance.uid,\n      instance,\n      props,\n      paneName,\n      active,\n      index,\n      isClosable,\n    })\n\n    return {\n      index,\n      loaded,\n      isClosable,\n      active,\n      paneName,\n      shouldBeRender,\n    }\n  },\n})\n</script>\n"],"names":["_createElementBlock","_renderSlot"],"mappings":";;;;SAEU,mDADRA;;IAGG,YAAY;IACb,OAAM;AAAA,IACN,MAAK;AAAA,IACJ,gBAAc;IACd,0BAAwB;;IAEzBC;;YAPQ;;;;;;"}

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

@@ -0,0 +1,135 @@
+import { defineComponent, ref, getCurrentInstance, provide, Fragment, onUpdated, onMounted, h } from 'vue';
+import { Plus } from '@element-plus/icons';
+import { PsIcon } from '../../icon/index.mjs';
+import './tab-nav.mjs';
+import script from './tab-nav.vue_vue&type=script&lang.mjs';
+
+var Tabs = defineComponent({
+  name: "PsTabs",
+  components: { TabNav: script },
+  props: {
+    type: {
+      type: String,
+      default: ""
+    },
+    activeName: {
+      type: String,
+      default: ""
+    },
+    closable: Boolean,
+    addable: Boolean,
+    modelValue: {
+      type: String,
+      default: ""
+    },
+    editable: Boolean,
+    tabPosition: {
+      type: String,
+      default: "top"
+    },
+    beforeLeave: {
+      type: Function,
+      default: null
+    },
+    stretch: Boolean
+  },
+  setup(props, ctx) {
+    const nav$ = ref(null);
+    const currentName = ref(props.modelValue || props.activeName || "0");
+    const panes = ref([]);
+    const instance = getCurrentInstance();
+    const paneStatesMap = {};
+    provide("rootTabs", {
+      props,
+      currentName
+    });
+    provide("updatePaneState", (pane) => {
+      paneStatesMap[pane.uid] = pane;
+    });
+    const getPaneInstanceFromSlot = (vnode, paneInstanceList = []) => {
+      Array.from(vnode.children || []).forEach((node) => {
+        let type = node.type;
+        type = type.name || type;
+        if (type === "PsTabPane" && node.component) {
+          paneInstanceList.push(node.component);
+        } else if (type === Fragment || type === "template") {
+          getPaneInstanceFromSlot(node, paneInstanceList);
+        }
+      });
+      return paneInstanceList;
+    };
+    const setPaneInstances = (isForceUpdate = false) => {
+      if (ctx.slots.default) {
+        const children = instance.subTree.children;
+        const content = Array.from(children).find(({ props: props2 }) => {
+          return props2.class === "el-tabs__content";
+        });
+        if (!content)
+          return;
+        const paneInstanceList = getPaneInstanceFromSlot(content).map((paneComponent) => {
+          return paneStatesMap[paneComponent.uid];
+        });
+        const panesChanged = !(paneInstanceList.length === panes.value.length && paneInstanceList.every((pane, index) => pane.uid === panes.value[index].uid));
+        if (isForceUpdate || panesChanged) {
+          panes.value = paneInstanceList;
+        }
+      } else if (panes.value.length !== 0) {
+        panes.value = [];
+      }
+    };
+    onUpdated(() => {
+      setPaneInstances();
+    });
+    onMounted(() => {
+      setPaneInstances();
+    });
+    return {
+      nav$,
+      currentName,
+      panes
+    };
+  },
+  render() {
+    var _a;
+    const {
+      type,
+      currentName,
+      panes,
+      editable,
+      addable,
+      tabPosition,
+      stretch
+    } = this;
+    const newButton = editable || addable ? h("span", {
+      class: "el-tabs__new-tab",
+      tabindex: "0"
+    }, [h(PsIcon, { class: "is-icon-plus" }, { default: () => h(Plus) })]) : null;
+    const header = h("div", {
+      class: ["el-tabs__header", `is-${tabPosition}`]
+    }, [
+      newButton,
+      h(script, {
+        currentName,
+        editable,
+        type,
+        panes,
+        stretch,
+        ref: "nav$"
+      })
+    ]);
+    const panels = h("div", {
+      class: "el-tabs__content"
+    }, (_a = this.$slots) == null ? void 0 : _a.default());
+    return h("div", {
+      class: {
+        "el-tabs": true,
+        "el-tabs--card": type === "card",
+        [`el-tabs--${tabPosition}`]: true,
+        "el-tabs--border-card": type === "border-card"
+      }
+    }, tabPosition !== "bottom" ? [header, panels] : [panels, header]);
+  }
+});
+
+export { Tabs as default };
+//# sourceMappingURL=tabs.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"tabs.mjs","sources":["../../../../../../../packages/components/tabs/src/tabs.ts"],"sourcesContent":["import {\n  defineComponent,\n  Fragment,\n  getCurrentInstance,\n  h,\n  onMounted,\n  onUpdated,\n  provide,\n  ref,\n} from 'vue'\nimport { Plus } from '@element-plus/icons'\nimport PsIcon from '@element-ps/components/icon'\nimport TabNav from './tab-nav.vue'\n\nimport type { Component, ComponentInternalInstance, PropType, VNode } from 'vue'\nimport type {\n  BeforeLeave,\n  IElTabsProps,\n  ITabType,\n  ITabPosition,\n  Pane,\n  RootTabs,\n  UpdatePaneStateCallback,\n} from './token'\n\nexport default defineComponent({\n  name: 'PsTabs',\n  components: { TabNav },\n  props: {\n    type: {\n      type: String as PropType<ITabType>,\n      default: '',\n    },\n    activeName: {\n      type: String,\n      default: '',\n    },\n    closable: Boolean,\n    addable: Boolean,\n    modelValue: {\n      type: String,\n      default: '',\n    },\n    editable: Boolean,\n    tabPosition: {\n      type: String as PropType<ITabPosition>,\n      default: 'top',\n    },\n    beforeLeave: {\n      type: Function as PropType<BeforeLeave>,\n      default: null,\n    },\n    stretch: Boolean,\n  },\n  setup(props: IElTabsProps, ctx) {\n    const nav$ = ref<typeof TabNav>(null)\n    const currentName = ref(props.modelValue || props.activeName || '0')\n    const panes = ref([])\n    const instance = getCurrentInstance()\n    const paneStatesMap = {}\n\n    provide<RootTabs>('rootTabs', {\n      props,\n      currentName,\n    })\n\n    provide<UpdatePaneStateCallback>('updatePaneState', (pane: Pane) => {\n      paneStatesMap[pane.uid] = pane\n    })\n\n    const getPaneInstanceFromSlot = (\n      vnode: VNode,\n      paneInstanceList: ComponentInternalInstance[] = []\n    ) => {\n      Array.from((vnode.children || []) as ArrayLike<VNode>).forEach((node) => {\n        let type = node.type\n        type = (type as Component).name || type\n        if (type === 'PsTabPane' && node.component) {\n          paneInstanceList.push(node.component)\n        } else if (type === Fragment || type === 'template') {\n          getPaneInstanceFromSlot(node, paneInstanceList)\n        }\n      })\n      return paneInstanceList\n    }\n\n    const setPaneInstances = (isForceUpdate = false) => {\n      if (ctx.slots.default) {\n        const children = instance.subTree.children\n\n        const content = Array.from(children as ArrayLike<VNode>).find(\n          ({ props }) => {\n            return props.class === 'el-tabs__content'\n          }\n        )\n\n        if (!content) return\n\n        const paneInstanceList: Pane[] = getPaneInstanceFromSlot(content).map(\n          (paneComponent) => {\n            return paneStatesMap[paneComponent.uid]\n          }\n        )\n        const panesChanged = !(\n          paneInstanceList.length === panes.value.length &&\n          paneInstanceList.every(\n            (pane, index) => pane.uid === panes.value[index].uid\n          )\n        )\n\n        if (isForceUpdate || panesChanged) {\n          panes.value = paneInstanceList\n        }\n      } else if (panes.value.length !== 0) {\n        panes.value = []\n      }\n    }\n\n    onUpdated(() => {\n      setPaneInstances()\n    })\n\n    onMounted(() => {\n      setPaneInstances()\n    })\n\n    return {\n      nav$,\n      currentName,\n      panes,\n    }\n  },\n\n  render() {\n    const {\n      type,\n      currentName,\n      panes,\n      editable,\n      addable,\n      tabPosition,\n      stretch,\n    } = this\n\n    const newButton =\n      editable || addable\n        ? h(\n            'span',\n            {\n              class: 'el-tabs__new-tab',\n              tabindex: '0',\n            },\n          [h(PsIcon, { class: 'is-icon-plus' }, { default: () => h(Plus) })]\n          )\n        : null\n\n    const header = h(\n      'div',\n      {\n        class: ['el-tabs__header', `is-${tabPosition}`],\n      },\n      [\n        newButton,\n        h(TabNav, {\n          currentName,\n          editable,\n          type,\n          panes,\n          stretch,\n          ref: 'nav$',\n        }),\n      ]\n    )\n\n    const panels = h(\n      'div',\n      {\n        class: 'el-tabs__content',\n      },\n      this.$slots?.default()\n    )\n\n    return h(\n      'div',\n      {\n        class: {\n          'el-tabs': true,\n          'el-tabs--card': type === 'card',\n          [`el-tabs--${tabPosition}`]: true,\n          'el-tabs--border-card': type === 'border-card',\n        },\n      },\n      tabPosition !== 'bottom' ? [header, panels] : [panels, header]\n    )\n  },\n})\n"],"names":["TabNav"],"mappings":"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"}