/**
 * ldesign v0.3.13
 * (c) 2023 ldesign
 * @license MIT
 */

import { _ as _defineProperty } from '../_chunks/dep-2db7b3ec.mjs';
import { defineComponent, ref, computed, watch, onMounted, h, createVNode, Transition } from 'vue';
import { d as debounce_1 } from '../_chunks/dep-9b6cf76d.mjs';
import { ChevronLeftIcon, ChevronRightIcon, AddIcon } from '@ldesign/icons-vue-next';
import { i as isFunction_1 } from '../_chunks/dep-5717e263.mjs';
import tabBase from '../_common/js/tabs/base.mjs';
import { useResize } from '../hooks/useListener.mjs';
import { usePrefixClass, useCommonClassName } from '../hooks/useConfig.mjs';
import { useGlobalIcon } from '../hooks/useGlobalIcon.mjs';
import useDragSort from '../hooks/useDragSort.mjs';
import props from './props.mjs';
import TTabNavItem from './tab-nav-item.mjs';
import TTabNavBar from './tab-nav-bar.mjs';
import '../_chunks/dep-255303ba.mjs';
import '../_chunks/dep-eba0ea6e.mjs';
import '../_chunks/dep-a8bcacea.mjs';
import '../_chunks/dep-469b4ae0.mjs';
import '../_chunks/dep-f709f709.mjs';
import '../_chunks/dep-2bc37d52.mjs';
import '../_chunks/dep-3da99438.mjs';
import '../config-provider/useConfig.mjs';
import '../_chunks/dep-095107f7.mjs';
import '../_chunks/dep-c989dff3.mjs';
import '../_chunks/dep-9cf86cf1.mjs';
import '../_chunks/dep-bc1d737a.mjs';
import '../_chunks/dep-4d7a675b.mjs';
import '../_chunks/dep-2e7f59b1.mjs';
import '../_chunks/dep-855db8bc.mjs';
import '../_chunks/dep-a87f3e4c.mjs';
import '../_chunks/dep-1e566bb5.mjs';
import '../_chunks/dep-1434aa15.mjs';
import '../_chunks/dep-b57180d0.mjs';
import '../_chunks/dep-c8d7b6b4.mjs';
import '../_chunks/dep-e5eb9f23.mjs';
import '../_chunks/dep-9fe2ef12.mjs';
import '../_chunks/dep-672e7d1a.mjs';
import '../_chunks/dep-42a19209.mjs';
import '../_chunks/dep-9262ee2f.mjs';
import '../_chunks/dep-334a4f6b.mjs';
import '../_chunks/dep-8d3e9aa3.mjs';
import '../_chunks/dep-876fb3ec.mjs';
import '../_chunks/dep-40d69a9c.mjs';
import '../_chunks/dep-dcc83161.mjs';
import '../_chunks/dep-0fc02184.mjs';
import '../_chunks/dep-f1994936.mjs';
import '../_chunks/dep-345e1be3.mjs';
import '../_common/js/global-config/default-config.mjs';
import '../_common/js/global-config/locale/zh_CN.mjs';
import '../_chunks/dep-9888611c.mjs';
import '../_chunks/dep-697a1365.mjs';
import '../config-provider/type.mjs';
import '../hooks/useRipple.mjs';
import '../utils/set-style.mjs';
import '../hooks/useKeepAnimation.mjs';
import './tab-panel-props.mjs';
import '../_chunks/dep-84acf3c2.mjs';
import '../_chunks/dep-b8d7992c.mjs';
import '../utils/helper.mjs';
import '../_chunks/dep-60fae668.mjs';
import '../_chunks/dep-406cd044.mjs';
import '../_chunks/dep-42cc3015.mjs';
import '../_chunks/dep-327559e8.mjs';
import '../_chunks/dep-b2235f26.mjs';
import '../_chunks/dep-8b989474.mjs';
import '../_chunks/dep-1372b2d3.mjs';
import '../_chunks/dep-78847b2e.mjs';
import '../_chunks/dep-ed5ebb35.mjs';
import '../_chunks/dep-3f21269a.mjs';

function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
var calculateCanToLeft = tabBase.calculateCanToLeft,
  calculateCanToRight = tabBase.calculateCanToRight,
  calcScrollLeft = tabBase.calcScrollLeft,
  scrollToLeft = tabBase.scrollToLeft,
  scrollToRight = tabBase.scrollToRight,
  moveActiveTabIntoView = tabBase.moveActiveTabIntoView;
var TTabNav = defineComponent(_objectSpread(_objectSpread({
  name: "TTabNav"
}, {
  resizeObserver: null
}), {}, {
  props: {
    theme: props.theme,
    panels: {
      type: Array,
      "default": function _default() {
        return [];
      }
    },
    value: props.value,
    placement: props.placement,
    size: props.size,
    disabled: props.disabled,
    addable: props.addable,
    onChange: props.onChange,
    onAdd: props.onAdd,
    onRemove: props.onRemove,
    dragSort: props.dragSort,
    onDragSort: props.onDragSort
  },
  setup: function setup(props) {
    var COMPONENT_NAME = usePrefixClass("tabs");
    var _useGlobalIcon = useGlobalIcon({
        ChevronLeftIcon: ChevronLeftIcon,
        ChevronRightIcon: ChevronRightIcon,
        AddIcon: AddIcon
      }),
      ChevronLeftIcon$1 = _useGlobalIcon.ChevronLeftIcon,
      ChevronRightIcon$1 = _useGlobalIcon.ChevronRightIcon,
      AddIcon$1 = _useGlobalIcon.AddIcon;
    var classPrefix = usePrefixClass();
    var _useCommonClassName = useCommonClassName(),
      SIZE = _useCommonClassName.SIZE;
    var scrollLeft = ref(0);
    var canToLeft = ref(false);
    var canToRight = ref(false);
    var navsContainerRef = ref();
    var navsWrapRef = ref();
    var leftOperationsRef = ref();
    var toLeftBtnRef = ref();
    var rightOperationsRef = ref();
    var toRightBtnRef = ref();
    var activeTabRef = ref();
    var getRefs = function getRefs() {
      return {
        navsContainer: navsContainerRef.value,
        navsWrap: navsWrapRef.value,
        leftOperations: leftOperationsRef.value,
        toLeftBtn: toLeftBtnRef.value,
        rightOperations: rightOperationsRef.value,
        toRightBtn: toRightBtnRef.value
      };
    };
    var wrapTransformStyle = computed(function () {
      if (["left", "right"].includes(props.placement.toLowerCase())) return {};
      return {
        transform: "translate3d(".concat(-scrollLeft.value, "px, 0, 0)")
      };
    });
    var navsContainerStyle = computed(function () {
      return props.addable ? {
        "min-height": "48px"
      } : null;
    });
    var iconBaseClass = computed(function () {
      var _ref;
      return _ref = {}, _defineProperty(_ref, "".concat(COMPONENT_NAME.value, "__btn"), true), _defineProperty(_ref, SIZE.value.medium, props.size === "medium"), _defineProperty(_ref, SIZE.value.large, props.size === "large"), _ref;
    });
    var leftIconClass = computed(function () {
      return _objectSpread(_defineProperty({}, "".concat(COMPONENT_NAME.value, "__btn--left"), true), iconBaseClass.value);
    });
    var rightIconClass = computed(function () {
      return _objectSpread(_defineProperty({}, "".concat(COMPONENT_NAME.value, "__btn--right"), true), iconBaseClass.value);
    });
    var addIconClass = computed(function () {
      return _objectSpread(_defineProperty({}, "".concat(COMPONENT_NAME.value, "__add-btn"), true), iconBaseClass.value);
    });
    var navContainerClass = computed(function () {
      var _ref2;
      return _ref2 = {}, _defineProperty(_ref2, "".concat(COMPONENT_NAME.value, "__nav-container"), true), _defineProperty(_ref2, "".concat(COMPONENT_NAME.value, "__nav--card"), props.theme === "card"), _defineProperty(_ref2, "".concat(classPrefix.value, "-is-").concat(props.placement), true), _defineProperty(_ref2, "".concat(classPrefix.value, "-is-addable"), props.addable), _ref2;
    });
    var navScrollContainerClass = computed(function () {
      var _ref3;
      return _ref3 = {}, _defineProperty(_ref3, "".concat(COMPONENT_NAME.value, "__nav-scroll"), true), _defineProperty(_ref3, "".concat(classPrefix.value, "-is-scrollable"), canToLeft.value || canToRight.value), _ref3;
    });
    var navsWrapClass = computed(function () {
      return ["".concat(COMPONENT_NAME.value, "__nav-wrap"), "".concat(classPrefix.value, "-is-smooth"), _defineProperty({}, "".concat(classPrefix.value, "-is-vertical"), props.placement === "left" || props.placement === "right")];
    });
    var totalAdjust = function totalAdjust() {
      adjustArrowDisplay();
      adjustScrollLeft();
    };
    watch([scrollLeft, function () {
      return props.placement;
    }, function () {
      return props.panels;
    }], totalAdjust);
    useResize(debounce_1(totalAdjust), navsContainerRef.value);
    onMounted(totalAdjust);
    var adjustScrollLeft = function adjustScrollLeft() {
      scrollLeft.value = calcScrollLeft(getRefs(), scrollLeft.value);
    };
    var adjustArrowDisplay = function adjustArrowDisplay() {
      canToLeft.value = calculateCanToLeft(getRefs(), scrollLeft.value, props.placement);
      canToRight.value = calculateCanToRight(getRefs(), scrollLeft.value, props.placement);
    };
    var handleScroll = function handleScroll(direction) {
      if (direction === "left") scrollLeft.value = scrollToLeft(getRefs(), scrollLeft.value);else scrollLeft.value = scrollToRight(getRefs(), scrollLeft.value);
    };
    var handleAddTab = function handleAddTab(e) {
      var _props$onAdd;
      (_props$onAdd = props.onAdd) === null || _props$onAdd === void 0 ? void 0 : _props$onAdd.call(props, {
        e: e
      });
    };
    var tabClick = function tabClick(event, nav) {
      var value = nav.value,
        disabled = nav.disabled;
      if (disabled || props.value === value) return false;
      props.onChange(value);
    };
    var removeBtnClick = function removeBtnClick(_ref5) {
      var e = _ref5.e,
        value = _ref5.value,
        index = _ref5.index;
      props.onRemove({
        e: e,
        value: value,
        index: index
      });
    };
    var setActiveTab = function setActiveTab(ref2) {
      if ((ref2 === null || ref2 === void 0 ? void 0 : ref2.value) === props.value && activeTabRef.value !== ref2.$el) {
        activeTabRef.value = ref2.$el;
        scrollLeft.value = moveActiveTabIntoView(_objectSpread({
          activeTab: activeTabRef.value
        }, getRefs()), scrollLeft.value);
      }
    };
    var _useDragSort = useDragSort(props),
      setNavsWrap = _useDragSort.setNavsWrap;
    onMounted(function () {
      setNavsWrap(navsWrapRef.value);
    });
    var navs = computed(function () {
      return props.panels.map(function (panel, index) {
        var _panel$children;
        var label;
        if (panel !== null && panel !== void 0 && (_panel$children = panel.children) !== null && _panel$children !== void 0 && _panel$children.label) label = panel.children.label();else if (isFunction_1(panel.label)) label = panel.label(h);else label = panel.label || "\u9009\u9879\u5361".concat(index + 1);
        return createVNode(TTabNavItem, {
          "ref": setActiveTab,
          "draggable": props.dragSort,
          "key": panel.value,
          "index": index,
          "theme": props.theme,
          "size": props.size,
          "placement": props.placement,
          "label": label,
          "active": panel.value === props.value,
          "disabled": props.disabled || panel.disabled,
          "removable": panel.removable,
          "value": panel.value,
          "onClick": function onClick(e) {
            return tabClick(e, panel);
          },
          "onRemove": removeBtnClick
        }, null);
      });
    });
    var renderArrows = function renderArrows() {
      return [createVNode("div", {
        "ref": leftOperationsRef,
        "class": ["".concat(COMPONENT_NAME.value, "__operations"), "".concat(COMPONENT_NAME.value, "__operations--left")]
      }, [createVNode(Transition, {
        "name": "fade",
        "mode": "out-in",
        "appear": true
      }, {
        "default": function _default() {
          return [canToLeft.value ? createVNode("div", {
            "ref": toLeftBtnRef,
            "class": leftIconClass.value,
            "onClick": function onClick() {
              return handleScroll("left");
            }
          }, [createVNode(ChevronLeftIcon$1, null, null)]) : null];
        }
      })]), createVNode("div", {
        "ref": rightOperationsRef,
        "class": ["".concat(COMPONENT_NAME.value, "__operations"), "".concat(COMPONENT_NAME.value, "__operations--right")]
      }, [createVNode(Transition, {
        "name": "fade",
        "mode": "out-in",
        "appear": true
      }, {
        "default": function _default() {
          return [canToRight.value ? createVNode("div", {
            "ref": toRightBtnRef,
            "class": rightIconClass.value,
            "onClick": function onClick() {
              return handleScroll("right");
            }
          }, [createVNode(ChevronRightIcon$1, null, null)]) : null];
        }
      }), props.addable ? createVNode("div", {
        "class": addIconClass.value,
        "onClick": handleAddTab
      }, [createVNode(AddIcon$1, null, null)]) : null])];
    };
    var renderNavs = function renderNavs() {
      return createVNode("div", {
        "class": navContainerClass.value
      }, [createVNode("div", {
        "class": navScrollContainerClass.value
      }, [createVNode("div", {
        "ref": navsWrapRef,
        "class": navsWrapClass.value,
        "style": wrapTransformStyle.value
      }, [props.theme !== "card" && createVNode(TTabNavBar, {
        "placement": props.placement,
        "value": props.value,
        "navs": navs.value
      }, null), navs.value])])]);
    };
    return function () {
      return createVNode("div", {
        "ref": navsContainerRef,
        "class": ["".concat(COMPONENT_NAME.value, "__nav")],
        "style": navsContainerStyle.value
      }, [renderArrows(), renderNavs()]);
    };
  }
}));

export { TTabNav as default };
//# sourceMappingURL=tab-nav.mjs.map
