@qsxy/element-plus-react 1.0.0-next.2 → 1.0.0-next.22

package/dist/Tabs/Tabs.js

@@ -1,122 +1,152 @@
-var __create = Object.create;
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __getProtoOf = Object.getPrototypeOf;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __export = (target, all) => {
-  for (var name in all)
-    __defProp(target, name, { get: all[name], enumerable: true });
-};
-var __copyProps = (to, from, except, desc) => {
-  if (from && typeof from === "object" || typeof from === "function") {
-    for (let key of __getOwnPropNames(from))
-      if (!__hasOwnProp.call(to, key) && key !== except)
-        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
-  }
-  return to;
-};
-var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
-  // If the importer is in node compatibility mode or this is not an ESM
-  // file that has been converted to a CommonJS file using a Babel-
-  // compatible transform (i.e. "__esModule" has not been set), then set
-  // "default" to the CommonJS "module.exports" for node compatibility.
-  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
-  mod
-));
-var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12;
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
+function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+import classNames from 'classnames';
+import { addClass, addStyle, hasClass, removeClass } from 'dom-lib';
+import forEach from 'lodash/forEach';
+import omit from 'lodash/omit';
+import React, { Children, forwardRef, useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import Icon from "../Icon/Icon";
+import { isEmpty } from "../Util";
+import { useChildrenInstance, useClassNames, useControlled } from "../hooks";
+import { TabsContext } from "./TabsContext";
+var Tabs = /*#__PURE__*/forwardRef(function (props, ref) {
+  var type = props.type,
+    _props$tabPosition = props.tabPosition,
+    tabPosition = _props$tabPosition === void 0 ? 'top' : _props$tabPosition,
+    stretch = props.stretch,
+    _props$classPrefix = props.classPrefix,
+    classPrefix = _props$classPrefix === void 0 ? 'tabs' : _props$classPrefix,
+    children = props.children,
+    onTabClick = props.onTabClick,
+    onTabChange = props.onTabChange,
+    beforeLeave = props.beforeLeave,
+    center = props.center,
+    editable = props.editable,
+    addable = props.addable,
+    closable = props.closable,
+    onTabRemove = props.onTabRemove;
+  var _useControlled = useControlled(props.activeName, props.defaultActiveName),
+    _useControlled2 = _slicedToArray(_useControlled, 2),
+    activeName = _useControlled2[0],
+    setActiveName = _useControlled2[1];
+  var _useClassNames = useClassNames(classPrefix),
+    b = _useClassNames.b,
+    m = _useClassNames.m,
+    e = _useClassNames.e,
+    is = _useClassNames.is;
 
-// src/Tabs/Tabs.tsx
-var Tabs_exports = {};
-__export(Tabs_exports, {
-  default: () => Tabs_default
-});
-module.exports = __toCommonJS(Tabs_exports);
-var import_classnames = __toESM(require("classnames"));
-var import_dom_lib = require("dom-lib");
-var import_forEach = __toESM(require("lodash/forEach"));
-var import_omit = __toESM(require("lodash/omit"));
-var import_react = __toESM(require("react"));
-var import_Icon = require("../Icon");
-var import_Util = require("../Util");
-var import_hooks = require("../hooks");
-var import_TabsContext = require("./TabsContext");
-var Tabs = (0, import_react.forwardRef)((props, ref) => {
-  const { type, tabPosition = "top", stretch, classPrefix = "tabs", children, onTabClick, beforeLeave, center, editable, addable, closable, onTabRemove } = props;
-  const [activeName, setActiveName] = (0, import_hooks.useControlled)(props.activeName, props.defaultActiveName);
-  const { b, m, e, is } = (0, import_hooks.useClassNames)(classPrefix);
-  const navRef = (0, import_react.useRef)(null);
-  const navScrollRef = (0, import_react.useRef)(null);
-  const elRef = (0, import_react.useRef)(null);
-  const activeBarRef = (0, import_react.useRef)(null);
-  const scrollable = (0, import_react.useRef)(false);
-  const scrollLeftRef = (0, import_react.useRef)(null);
-  const scrollRightRef = (0, import_react.useRef)(null);
-  const [isScroll, setIsScroll] = (0, import_react.useState)(false);
-  const [navOffset, setNavOffset] = (0, import_react.useState)(0);
-  const sizeName = (0, import_react.useMemo)(() => tabPosition && ["top", "bottom"].includes(tabPosition) ? "offsetWidth" : "offsetHeight", [tabPosition]);
-  const navStyle = (0, import_react.useMemo)(() => {
-    const dir = sizeName === "offsetWidth" ? "X" : "Y";
+  /** 标签页标题栏组（内容自撑） */
+  var navRef = useRef(null);
+
+  /** 标签页标题栏容器 */
+  var navScrollRef = useRef(null);
+  var elRef = useRef(null);
+  var activeBarRef = useRef(null);
+
+  /** 是否可滚动 */
+  var scrollable = useRef(false);
+  var scrollLeftRef = useRef(null);
+  var scrollRightRef = useRef(null);
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    isScroll = _useState2[0],
+    setIsScroll = _useState2[1];
+
+  /** 激活标签页偏移位置 */
+  var _useState3 = useState(0),
+    _useState4 = _slicedToArray(_useState3, 2),
+    navOffset = _useState4[0],
+    setNavOffset = _useState4[1];
+  var sizeName = useMemo(function () {
+    return tabPosition && ['top', 'bottom'].includes(tabPosition) ? 'offsetWidth' : 'offsetHeight';
+  }, [tabPosition]);
+
+  /** 标签页标题栏组样式 */
+  var navStyle = useMemo(function () {
+    var dir = sizeName === 'offsetWidth' ? 'X' : 'Y';
     return {
-      transform: `translate${dir}(-${navOffset}px)`
+      transform: "translate".concat(dir, "(-").concat(navOffset, "px)")
     };
   }, [navOffset, sizeName]);
-  const getTabPaneInstance = (0, import_hooks.useChildrenInstance)("TabPane");
-  const navs = (0, import_react.useMemo)(() => {
-    const componentChildren = getTabPaneInstance(children);
-    return componentChildren.map((node, i) => {
+
+  /** 默认样式下，激活标签页下方状态条的样式 */
+  // const [barStyle, setBarStyle] = useState<JSX.CSSProperties>({});
+
+  /** 获取子组件 */
+  var getTabPaneInstance = useChildrenInstance('ElTabPane');
+
+  /** 获取TabPane组件中的配置数据 */
+  var navs = useMemo(function () {
+    var componentChildren = getTabPaneInstance(children);
+    return componentChildren.map(function (node, i) {
       return {
         title: node.props.title,
         name: node.props.name,
         index: i,
-        active: (0, import_Util.isEmpty)(activeName) ? i === 0 : activeName === node.props.name,
+        active: isEmpty(activeName) ? i === 0 : activeName === node.props.name,
         disabled: node.props.disabled,
         closable: node.props.closable === false ? false : node.props.closable || closable || editable,
-        props: (0, import_omit.default)(node.props, "children")
+        props: omit(node.props, 'children')
       };
     });
   }, [getTabPaneInstance, children, activeName, closable, editable]);
-  const scrollPrev = (0, import_react.useCallback)(() => {
+
+  /** 向前滚动 */
+  var scrollPrev = useCallback(function () {
     if (!navScrollRef.current) {
       return;
     }
-    const containerSize = navScrollRef.current[sizeName];
-    const currentOffset = navOffset;
+    var containerSize = navScrollRef.current[sizeName];
+    var currentOffset = navOffset;
     if (!currentOffset) {
       return;
     }
-    const newOffset = currentOffset > containerSize ? currentOffset - containerSize : 0;
+    var newOffset = currentOffset > containerSize ? currentOffset - containerSize : 0;
     setNavOffset(newOffset);
   }, [sizeName, navOffset]);
-  const scrollNext = (0, import_react.useCallback)(() => {
+
+  /** 向后滚动 */
+  var scrollNext = useCallback(function () {
     if (!navScrollRef.current || !navRef.current) {
       return;
     }
-    const navSize = navRef.current[sizeName];
-    const containerSize = navScrollRef.current[sizeName];
-    const currentOffset = navOffset;
+    var navSize = navRef.current[sizeName];
+    var containerSize = navScrollRef.current[sizeName];
+    var currentOffset = navOffset;
     if (navSize - currentOffset <= containerSize) {
       return;
     }
-    const newOffset = navSize - currentOffset > containerSize * 2 ? currentOffset + containerSize : navSize - containerSize;
+    var newOffset = navSize - currentOffset > containerSize * 2 ? currentOffset + containerSize : navSize - containerSize;
     setNavOffset(newOffset);
   }, [sizeName, navOffset]);
-  const scrollToActiveTab = (0, import_react.useCallback)(() => {
-    const nav = navRef.current;
+
+  /** 滚动到激活标签页位置 */
+  var scrollToActiveTab = useCallback(function () {
+    var nav = navRef.current;
     if (!scrollable.current || !elRef.current || !navScrollRef.current || !nav) {
       return;
     }
-    const activeTab = elRef.current.querySelector(".is-active");
+    var activeTab = elRef.current.querySelector('.is-active');
     if (!activeTab) {
       return;
     }
-    const navScroll = navScrollRef.current;
-    const isHorizontal = tabPosition && ["top", "bottom"].includes(tabPosition);
-    const activeTabBounding = activeTab.getBoundingClientRect();
-    const navScrollBounding = navScroll.getBoundingClientRect();
-    const maxOffset = isHorizontal ? nav.offsetWidth - navScrollBounding.width : nav.offsetHeight - navScrollBounding.height;
-    const currentOffset = navOffset;
-    let newOffset = currentOffset;
+    var navScroll = navScrollRef.current;
+    var isHorizontal = tabPosition && ['top', 'bottom'].includes(tabPosition);
+    var activeTabBounding = activeTab.getBoundingClientRect();
+    var navScrollBounding = navScroll.getBoundingClientRect();
+    var maxOffset = isHorizontal ? nav.offsetWidth - navScrollBounding.width : nav.offsetHeight - navScrollBounding.height;
+    var currentOffset = navOffset;
+    var newOffset = currentOffset;
     if (isHorizontal) {
       if (activeTabBounding.left < navScrollBounding.left) {
         newOffset = currentOffset - (navScrollBounding.left - activeTabBounding.left);
@@ -135,24 +165,28 @@ var Tabs = (0, import_react.forwardRef)((props, ref) => {
     newOffset = Math.max(newOffset, 0);
     setNavOffset(Math.min(newOffset, maxOffset));
   }, [tabPosition, scrollable, navOffset]);
-  const update = (0, import_react.useCallback)(() => {
+
+  /**  */
+  var update = useCallback(function () {
     if (!navRef.current || !navScrollRef.current) {
       return;
     }
-    const navSize = navRef.current[sizeName];
-    const containerSize = navScrollRef.current[sizeName];
-    const currentOffset = navOffset;
+    var navSize = navRef.current[sizeName];
+    var containerSize = navScrollRef.current[sizeName];
+    var currentOffset = navOffset;
+
+    // 标签页标题栏容器宽/高度小于标签页标题栏组的宽/高度时，两侧显示`前进`和`后退`按钮
     if (containerSize < navSize) {
-      const _currentOffset = navOffset;
+      var _currentOffset = navOffset;
       scrollable.current = {
         prev: _currentOffset,
         next: _currentOffset + containerSize < navSize
       };
       if (scrollLeftRef.current) {
-        (scrollable.current.prev === 0 ? import_dom_lib.addClass : import_dom_lib.removeClass)(scrollLeftRef.current, is("disabled"));
+        (scrollable.current.prev === 0 ? addClass : removeClass)(scrollLeftRef.current, is('disabled'));
       }
       if (scrollRightRef.current) {
-        (scrollable.current.next ? import_dom_lib.removeClass : import_dom_lib.addClass)(scrollRightRef.current, is("disabled"));
+        (scrollable.current.next ? removeClass : addClass)(scrollRightRef.current, is('disabled'));
       }
       setIsScroll(true);
       if (navSize - _currentOffset < containerSize) {
@@ -166,20 +200,22 @@ var Tabs = (0, import_react.forwardRef)((props, ref) => {
       }
     }
   }, [sizeName, navOffset, is]);
-  const getBarStyle = (0, import_react.useCallback)(() => {
-    var _a;
-    let offset = 0;
-    let tabSize = 0;
-    const sizeDir = sizeName === "offsetWidth" ? "X" : "Y";
-    (0, import_forEach.default)((_a = elRef.current) == null ? void 0 : _a.querySelectorAll(".r-tabs__item"), (el) => {
-      var _a2;
-      if ((0, import_dom_lib.hasClass)(el, "is-active")) {
-        tabSize = el[sizeName === "offsetWidth" ? "clientWidth" : "clientHeight"];
-        const position = sizeDir === "X" ? "left" : "top";
-        offset = el.getBoundingClientRect()[position] - (((_a2 = el.parentElement) == null ? void 0 : _a2.getBoundingClientRect()[position]) ?? 0);
-        const tabStyles = window.getComputedStyle(el);
-        if (sizeName === "offsetWidth") {
-          if (import_react.Children.count(children) > 1) {
+
+  /** 默认样式下，激活标签页下方状态条的位置 */
+  var getBarStyle = useCallback(function () {
+    var _elRef$current;
+    var offset = 0;
+    var tabSize = 0;
+    var sizeDir = sizeName === 'offsetWidth' ? 'X' : 'Y';
+    forEach((_elRef$current = elRef.current) === null || _elRef$current === void 0 ? void 0 : _elRef$current.querySelectorAll('.' + e(_templateObject || (_templateObject = _taggedTemplateLiteral(["item"])))), function (el) {
+      if (hasClass(el, 'is-active')) {
+        var _el$parentElement$get, _el$parentElement;
+        tabSize = el[sizeName === 'offsetWidth' ? 'clientWidth' : 'clientHeight'];
+        var position = sizeDir === 'X' ? 'left' : 'top';
+        offset = el.getBoundingClientRect()[position] - ((_el$parentElement$get = (_el$parentElement = el.parentElement) === null || _el$parentElement === void 0 ? void 0 : _el$parentElement.getBoundingClientRect()[position]) !== null && _el$parentElement$get !== void 0 ? _el$parentElement$get : 0);
+        var tabStyles = window.getComputedStyle(el);
+        if (sizeName === 'offsetWidth') {
+          if (Children.count(children) > 1) {
             tabSize -= parseFloat(tabStyles.paddingLeft) + parseFloat(tabStyles.paddingRight);
           }
           offset += parseFloat(tabStyles.paddingLeft);
@@ -188,89 +224,156 @@ var Tabs = (0, import_react.forwardRef)((props, ref) => {
       }
     });
     if (activeBarRef.current) {
-      (0, import_dom_lib.addStyle)(activeBarRef.current, {
-        [sizeName === "offsetWidth" ? "width" : "height"]: `${tabSize}px`,
-        transform: `translate${sizeDir}(${offset}px)`
-      });
+      addStyle(activeBarRef.current, _defineProperty(_defineProperty({}, sizeName === 'offsetWidth' ? 'width' : 'height', "".concat(tabSize, "px")), "transform", "translate".concat(sizeDir, "(").concat(offset, "px)")));
     }
-  }, [sizeName, children]);
-  const changeCurrentName = (0, import_react.useCallback)(
-    (item) => {
-      setActiveName(item == null ? void 0 : item.name);
-      onTabClick == null ? void 0 : onTabClick({
-        paneName: item == null ? void 0 : item.name,
-        active: item == null ? void 0 : item.active,
-        index: item == null ? void 0 : item.index,
-        isClosable: (item == null ? void 0 : item.closable) ?? false,
-        props: item.props
-      });
-    },
-    [onTabClick, setActiveName]
-  );
-  const handleTabClick = (0, import_react.useCallback)(
-    (item) => {
-      if ((item == null ? void 0 : item.disabled) || (item == null ? void 0 : item.name) === activeName) {
-        return;
-      }
-      const canLeave = beforeLeave == null ? void 0 : beforeLeave(item.name, activeName);
-      if (canLeave instanceof Promise) {
-        canLeave.then(() => {
-          changeCurrentName(item);
-        });
-      } else if (canLeave !== false) {
+    // setBarStyle({
+    //     [sizeName === 'offsetWidth' ? 'width' : 'height']: `${tabSize}px`,
+    //     transform: `translate${sizeDir}(${offset}px)`,
+    // });
+  }, [sizeName, e, children]);
+
+  /** 激活标签页 */
+  var changeCurrentName = useCallback(function (item) {
+    var _item$closable;
+    setActiveName(item === null || item === void 0 ? void 0 : item.name);
+    if (item !== null && item !== void 0 && item.name && activeName !== item.name) {
+      onTabChange === null || onTabChange === void 0 || onTabChange(item.name);
+    }
+    onTabClick === null || onTabClick === void 0 || onTabClick({
+      paneName: item === null || item === void 0 ? void 0 : item.name,
+      active: item === null || item === void 0 ? void 0 : item.active,
+      index: item === null || item === void 0 ? void 0 : item.index,
+      isClosable: (_item$closable = item === null || item === void 0 ? void 0 : item.closable) !== null && _item$closable !== void 0 ? _item$closable : false,
+      props: item.props
+    });
+  }, [activeName, onTabChange, onTabClick, setActiveName]);
+
+  /**
+   * 点击标签页方法
+   * @param item
+   * @returns
+   */
+  var handleTabClick = useCallback(function (item) {
+    if (item !== null && item !== void 0 && item.disabled || (item === null || item === void 0 ? void 0 : item.name) === activeName) {
+      return;
+    }
+    var canLeave = beforeLeave === null || beforeLeave === void 0 ? void 0 : beforeLeave(item.name, activeName);
+    if (canLeave instanceof Promise) {
+      canLeave.then(function () {
         changeCurrentName(item);
-      }
-    },
-    [activeName, beforeLeave, changeCurrentName]
-  );
-  (0, import_react.useEffect)(() => {
+      });
+    } else if (canLeave !== false) {
+      changeCurrentName(item);
+    }
+  }, [activeName, beforeLeave, changeCurrentName]);
+
+  /**
+   * 切换标签页后，滚动到
+   */
+  useEffect(function () {
     update();
-    if ((0, import_Util.isEmpty)(type)) {
+    if (isEmpty(type)) {
       getBarStyle();
     }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [activeName, tabPosition, type, navOffset, navs]);
-  (0, import_react.useEffect)(() => {
-    setTimeout(() => scrollToActiveTab(), 0);
+
+  /**
+   * 切换标签页后，滚动到
+   */
+  useEffect(function () {
+    setTimeout(function () {
+      return scrollToActiveTab();
+    }, 0);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [activeName, tabPosition, type]);
-  (0, import_react.useEffect)(() => {
-    if ((0, import_Util.isEmpty)(activeName) && navs.length > 0) {
+
+  /**
+   * 默认第一个标签页激活
+   */
+  useEffect(function () {
+    if (isEmpty(activeName) && navs.length > 0) {
       setActiveName(navs[0].name);
     }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
-  const header = /* @__PURE__ */ import_react.default.createElement("div", { className: (0, import_classnames.default)(e`header`, is(tabPosition)) }, /* @__PURE__ */ import_react.default.createElement("div", { className: (0, import_classnames.default)(e`nav-wrap`, is(tabPosition, { scrollable: isScroll })), ref: elRef }, isScroll && /* @__PURE__ */ import_react.default.createElement("span", { ref: scrollLeftRef, className: (0, import_classnames.default)(e`nav-prev`, is("disabled")), onClick: scrollPrev }, /* @__PURE__ */ import_react.default.createElement(import_Icon.Icon, { name: "angle-left" })), isScroll && /* @__PURE__ */ import_react.default.createElement("span", { ref: scrollRightRef, className: (0, import_classnames.default)(e`nav-next`), onClick: scrollNext }, /* @__PURE__ */ import_react.default.createElement(import_Icon.Icon, { name: "angle-right" })), /* @__PURE__ */ import_react.default.createElement("div", { className: (0, import_classnames.default)(e`nav-scroll`, is({ center })), style: props.headerStyle, ref: navScrollRef }, /* @__PURE__ */ import_react.default.createElement(
-    "div",
-    {
-      className: (0, import_classnames.default)(e`nav`, is(tabPosition, { stretch: stretch && tabPosition && ["top", "bottom"].includes(tabPosition) })),
-      style: navStyle,
-      ref: navRef
+  var header = /*#__PURE__*/React.createElement("div", {
+    className: classNames(e(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["header"]))), is(tabPosition))
+  }, /*#__PURE__*/React.createElement("div", {
+    className: classNames(e(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["nav-wrap"]))), is(tabPosition, {
+      scrollable: isScroll
+    })),
+    ref: elRef
+  }, isScroll && /*#__PURE__*/React.createElement("span", {
+    ref: scrollLeftRef,
+    className: classNames(e(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["nav-prev"]))), is('disabled')),
+    onClick: scrollPrev
+  }, /*#__PURE__*/React.createElement(Icon, {
+    name: "angle-left"
+  })), isScroll && /*#__PURE__*/React.createElement("span", {
+    ref: scrollRightRef,
+    className: classNames(e(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["nav-next"])))),
+    onClick: scrollNext
+  }, /*#__PURE__*/React.createElement(Icon, {
+    name: "angle-right"
+  })), /*#__PURE__*/React.createElement("div", {
+    className: classNames(e(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["nav-scroll"]))), is({
+      center: center
+    })),
+    style: props.headerStyle,
+    ref: navScrollRef
+  }, /*#__PURE__*/React.createElement("div", {
+    className: classNames(e(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["nav"]))), is(tabPosition, {
+      stretch: stretch && tabPosition && ['top', 'bottom'].includes(tabPosition)
+    })),
+    style: navStyle,
+    ref: navRef
+  }, isEmpty(type) && /*#__PURE__*/React.createElement("div", {
+    ref: activeBarRef,
+    className: classNames(e(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["active-bar"]))), is(tabPosition)) /* style={barStyle} */
+  }), navs.map(function (item) {
+    var active = item.active,
+      disabled = item.disabled;
+    return /*#__PURE__*/React.createElement("div", {
+      key: item.name,
+      className: classNames(e(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["item"]))), is(tabPosition, {
+        active: active,
+        disabled: disabled,
+        closable: item.closable && !disabled
+      })),
+      onClick: function onClick() {
+        return handleTabClick(item);
+      }
+    }, /*#__PURE__*/React.createElement("div", null, item === null || item === void 0 ? void 0 : item.title, item.closable && !item.disabled && /*#__PURE__*/React.createElement(Icon, {
+      name: "close",
+      className: is(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["icon-close"]))),
+      onClick: function onClick(event) {
+        event.stopPropagation();
+        onTabRemove === null || onTabRemove === void 0 || onTabRemove(item.name);
+      }
+    })));
+  }), (addable || editable) && /*#__PURE__*/React.createElement("div", {
+    className: classNames(e(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["item"]))), is(tabPosition)),
+    style: {
+      padding: '0 10px'
     },
-    (0, import_Util.isEmpty)(type) && /* @__PURE__ */ import_react.default.createElement("div", { ref: activeBarRef, className: (0, import_classnames.default)(e`active-bar`, is(tabPosition)) }),
-    navs.map((item) => {
-      const { active, disabled } = item;
-      return /* @__PURE__ */ import_react.default.createElement(
-        "div",
-        {
-          key: item.name,
-          className: (0, import_classnames.default)(e`item`, is(tabPosition, { active, disabled, closable: item.closable && !disabled })),
-          onClick: () => handleTabClick(item)
-        },
-        /* @__PURE__ */ import_react.default.createElement("div", null, item == null ? void 0 : item.title, item.closable && !item.disabled && /* @__PURE__ */ import_react.default.createElement(
-          import_Icon.Icon,
-          {
-            name: "close",
-            className: is`icon-close`,
-            onClick: (event) => {
-              event.stopPropagation();
-              onTabRemove == null ? void 0 : onTabRemove(item.name);
-            }
-          }
-        ))
-      );
-    }),
-    (addable || editable) && /* @__PURE__ */ import_react.default.createElement("div", { className: (0, import_classnames.default)(e`item`, is(tabPosition)), style: { padding: "0 10px" }, onClick: props.onTabAdd }, /* @__PURE__ */ import_react.default.createElement(import_Icon.Icon, { name: "plus" }))
-  ))));
-  const content = /* @__PURE__ */ import_react.default.createElement("div", { className: (0, import_classnames.default)(e`content`), style: props.contentStyle }, props.children);
-  return /* @__PURE__ */ import_react.default.createElement(import_TabsContext.TabsContext.Provider, { value: { activeName } }, /* @__PURE__ */ import_react.default.createElement("div", { className: (0, import_classnames.default)(b(), m(tabPosition), { [m(type)]: type }, props.className), style: props.style, ref }, tabPosition === "bottom" ? content : header, tabPosition === "bottom" ? header : content));
+    onClick: props.onTabAdd
+  }, /*#__PURE__*/React.createElement(Icon, {
+    name: "plus"
+  }))))));
+  var content = /*#__PURE__*/React.createElement("div", {
+    className: classNames(e(_templateObject12 || (_templateObject12 = _taggedTemplateLiteral(["content"])))),
+    style: props.contentStyle
+  }, props.children);
+  return /*#__PURE__*/React.createElement(TabsContext.Provider, {
+    value: {
+      activeName: activeName
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    className: classNames(b(), m(tabPosition), _defineProperty({}, m(type), type), props.className),
+    style: props.style,
+    ref: ref
+  }, tabPosition === 'bottom' ? content : header, tabPosition === 'bottom' ? header : content));
 });
-Tabs.displayName = "Tabs";
-var Tabs_default = Tabs;
+Tabs.displayName = 'ElTabs';
+export default Tabs;

package/dist/Tabs/TabsContext.js

@@ -1,32 +1,4 @@
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __export = (target, all) => {
-  for (var name in all)
-    __defProp(target, name, { get: all[name], enumerable: true });
-};
-var __copyProps = (to, from, except, desc) => {
-  if (from && typeof from === "object" || typeof from === "function") {
-    for (let key of __getOwnPropNames(from))
-      if (!__hasOwnProp.call(to, key) && key !== except)
-        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
-  }
-  return to;
-};
-var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
-
-// src/Tabs/TabsContext.ts
-var TabsContext_exports = {};
-__export(TabsContext_exports, {
-  TabsContext: () => TabsContext
-});
-module.exports = __toCommonJS(TabsContext_exports);
-var import_react = require("react");
-var TabsContext = (0, import_react.createContext)({
-  activeName: ""
-});
-// Annotate the CommonJS export names for ESM import in node:
-0 && (module.exports = {
-  TabsContext
-});
+import { createContext } from 'react';
+export var TabsContext = /*#__PURE__*/createContext({
+  activeName: ''
+});

package/dist/Tabs/index.js

@@ -1,42 +1,2 @@
-var __create = Object.create;
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __getProtoOf = Object.getPrototypeOf;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __export = (target, all) => {
-  for (var name in all)
-    __defProp(target, name, { get: all[name], enumerable: true });
-};
-var __copyProps = (to, from, except, desc) => {
-  if (from && typeof from === "object" || typeof from === "function") {
-    for (let key of __getOwnPropNames(from))
-      if (!__hasOwnProp.call(to, key) && key !== except)
-        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
-  }
-  return to;
-};
-var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
-  // If the importer is in node compatibility mode or this is not an ESM
-  // file that has been converted to a CommonJS file using a Babel-
-  // compatible transform (i.e. "__esModule" has not been set), then set
-  // "default" to the CommonJS "module.exports" for node compatibility.
-  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
-  mod
-));
-var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
-
-// src/Tabs/index.ts
-var Tabs_exports = {};
-__export(Tabs_exports, {
-  TabPane: () => import_TabPane.default,
-  Tabs: () => import_Tabs.default
-});
-module.exports = __toCommonJS(Tabs_exports);
-var import_TabPane = __toESM(require("./TabPane"));
-var import_Tabs = __toESM(require("./Tabs"));
-// Annotate the CommonJS export names for ESM import in node:
-0 && (module.exports = {
-  TabPane,
-  Tabs
-});
+export { default as TabPane } from "./TabPane";
+export { default as Tabs } from "./Tabs";