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

'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

var _defineProperty = require('@babel/runtime/helpers/defineProperty');
var vue = require('vue');
var debounce = require('lodash/debounce');
var iconsVueNext = require('@ldesign/icons-vue-next');
var isFunction = require('lodash/isFunction');
var _common_js_tabs_base = require('../_common/js/tabs/base.js');
var hooks_useListener = require('../hooks/useListener.js');
var hooks_useConfig = require('../hooks/useConfig.js');
var hooks_useGlobalIcon = require('../hooks/useGlobalIcon.js');
var hooks_useDragSort = require('../hooks/useDragSort.js');
var tabs_props = require('./props.js');
var tabs_tabNavItem = require('./tab-nav-item.js');
var tabs_tabNavBar = require('./tab-nav-bar.js');
require('../config-provider/useConfig.js');
require('lodash/cloneDeep');
require('lodash/isString');
require('../config-provider/context.js');
require('lodash/mergeWith');
require('lodash/merge');
require('lodash/isArray');
require('../_common/js/global-config/default-config.js');
require('../_common/js/global-config/locale/zh_CN.js');
require('@babel/runtime/helpers/typeof');
require('../_chunks/dep-f4db2590.js');
require('dayjs');
require('../hooks/useRipple.js');
require('../utils/set-style.js');
require('../hooks/useKeepAnimation.js');
require('./tab-panel-props.js');
require('@babel/runtime/helpers/slicedToArray');
require('../utils/helper.js');
require('@babel/runtime/helpers/objectWithoutProperties');
require('lodash/camelCase');
require('lodash/isUndefined');
require('lodash/isNull');
require('lodash/isNumber');

function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }

var _defineProperty__default = /*#__PURE__*/_interopDefaultLegacy(_defineProperty);
var debounce__default = /*#__PURE__*/_interopDefaultLegacy(debounce);
var isFunction__default = /*#__PURE__*/_interopDefaultLegacy(isFunction);

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__default["default"](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 = _common_js_tabs_base["default"].calculateCanToLeft,
  calculateCanToRight = _common_js_tabs_base["default"].calculateCanToRight,
  calcScrollLeft = _common_js_tabs_base["default"].calcScrollLeft,
  scrollToLeft = _common_js_tabs_base["default"].scrollToLeft,
  scrollToRight = _common_js_tabs_base["default"].scrollToRight,
  moveActiveTabIntoView = _common_js_tabs_base["default"].moveActiveTabIntoView;
var TTabNav = vue.defineComponent(_objectSpread(_objectSpread({
  name: "TTabNav"
}, {
  resizeObserver: null
}), {}, {
  props: {
    theme: tabs_props["default"].theme,
    panels: {
      type: Array,
      "default": function _default() {
        return [];
      }
    },
    value: tabs_props["default"].value,
    placement: tabs_props["default"].placement,
    size: tabs_props["default"].size,
    disabled: tabs_props["default"].disabled,
    addable: tabs_props["default"].addable,
    onChange: tabs_props["default"].onChange,
    onAdd: tabs_props["default"].onAdd,
    onRemove: tabs_props["default"].onRemove,
    dragSort: tabs_props["default"].dragSort,
    onDragSort: tabs_props["default"].onDragSort
  },
  setup: function setup(props) {
    var COMPONENT_NAME = hooks_useConfig.usePrefixClass("tabs");
    var _useGlobalIcon = hooks_useGlobalIcon.useGlobalIcon({
        ChevronLeftIcon: iconsVueNext.ChevronLeftIcon,
        ChevronRightIcon: iconsVueNext.ChevronRightIcon,
        AddIcon: iconsVueNext.AddIcon
      }),
      ChevronLeftIcon = _useGlobalIcon.ChevronLeftIcon,
      ChevronRightIcon = _useGlobalIcon.ChevronRightIcon,
      AddIcon = _useGlobalIcon.AddIcon;
    var classPrefix = hooks_useConfig.usePrefixClass();
    var _useCommonClassName = hooks_useConfig.useCommonClassName(),
      SIZE = _useCommonClassName.SIZE;
    var scrollLeft = vue.ref(0);
    var canToLeft = vue.ref(false);
    var canToRight = vue.ref(false);
    var navsContainerRef = vue.ref();
    var navsWrapRef = vue.ref();
    var leftOperationsRef = vue.ref();
    var toLeftBtnRef = vue.ref();
    var rightOperationsRef = vue.ref();
    var toRightBtnRef = vue.ref();
    var activeTabRef = vue.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 = vue.computed(function () {
      if (["left", "right"].includes(props.placement.toLowerCase())) return {};
      return {
        transform: "translate3d(".concat(-scrollLeft.value, "px, 0, 0)")
      };
    });
    var navsContainerStyle = vue.computed(function () {
      return props.addable ? {
        "min-height": "48px"
      } : null;
    });
    var iconBaseClass = vue.computed(function () {
      var _ref;
      return _ref = {}, _defineProperty__default["default"](_ref, "".concat(COMPONENT_NAME.value, "__btn"), true), _defineProperty__default["default"](_ref, SIZE.value.medium, props.size === "medium"), _defineProperty__default["default"](_ref, SIZE.value.large, props.size === "large"), _ref;
    });
    var leftIconClass = vue.computed(function () {
      return _objectSpread(_defineProperty__default["default"]({}, "".concat(COMPONENT_NAME.value, "__btn--left"), true), iconBaseClass.value);
    });
    var rightIconClass = vue.computed(function () {
      return _objectSpread(_defineProperty__default["default"]({}, "".concat(COMPONENT_NAME.value, "__btn--right"), true), iconBaseClass.value);
    });
    var addIconClass = vue.computed(function () {
      return _objectSpread(_defineProperty__default["default"]({}, "".concat(COMPONENT_NAME.value, "__add-btn"), true), iconBaseClass.value);
    });
    var navContainerClass = vue.computed(function () {
      var _ref2;
      return _ref2 = {}, _defineProperty__default["default"](_ref2, "".concat(COMPONENT_NAME.value, "__nav-container"), true), _defineProperty__default["default"](_ref2, "".concat(COMPONENT_NAME.value, "__nav--card"), props.theme === "card"), _defineProperty__default["default"](_ref2, "".concat(classPrefix.value, "-is-").concat(props.placement), true), _defineProperty__default["default"](_ref2, "".concat(classPrefix.value, "-is-addable"), props.addable), _ref2;
    });
    var navScrollContainerClass = vue.computed(function () {
      var _ref3;
      return _ref3 = {}, _defineProperty__default["default"](_ref3, "".concat(COMPONENT_NAME.value, "__nav-scroll"), true), _defineProperty__default["default"](_ref3, "".concat(classPrefix.value, "-is-scrollable"), canToLeft.value || canToRight.value), _ref3;
    });
    var navsWrapClass = vue.computed(function () {
      return ["".concat(COMPONENT_NAME.value, "__nav-wrap"), "".concat(classPrefix.value, "-is-smooth"), _defineProperty__default["default"]({}, "".concat(classPrefix.value, "-is-vertical"), props.placement === "left" || props.placement === "right")];
    });
    var totalAdjust = function totalAdjust() {
      adjustArrowDisplay();
      adjustScrollLeft();
    };
    vue.watch([scrollLeft, function () {
      return props.placement;
    }, function () {
      return props.panels;
    }], totalAdjust);
    hooks_useListener.useResize(debounce__default["default"](totalAdjust), navsContainerRef.value);
    vue.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 = hooks_useDragSort["default"](props),
      setNavsWrap = _useDragSort.setNavsWrap;
    vue.onMounted(function () {
      setNavsWrap(navsWrapRef.value);
    });
    var navs = vue.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__default["default"](panel.label)) label = panel.label(vue.h);else label = panel.label || "\u9009\u9879\u5361".concat(index + 1);
        return vue.createVNode(tabs_tabNavItem["default"], {
          "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 [vue.createVNode("div", {
        "ref": leftOperationsRef,
        "class": ["".concat(COMPONENT_NAME.value, "__operations"), "".concat(COMPONENT_NAME.value, "__operations--left")]
      }, [vue.createVNode(vue.Transition, {
        "name": "fade",
        "mode": "out-in",
        "appear": true
      }, {
        "default": function _default() {
          return [canToLeft.value ? vue.createVNode("div", {
            "ref": toLeftBtnRef,
            "class": leftIconClass.value,
            "onClick": function onClick() {
              return handleScroll("left");
            }
          }, [vue.createVNode(ChevronLeftIcon, null, null)]) : null];
        }
      })]), vue.createVNode("div", {
        "ref": rightOperationsRef,
        "class": ["".concat(COMPONENT_NAME.value, "__operations"), "".concat(COMPONENT_NAME.value, "__operations--right")]
      }, [vue.createVNode(vue.Transition, {
        "name": "fade",
        "mode": "out-in",
        "appear": true
      }, {
        "default": function _default() {
          return [canToRight.value ? vue.createVNode("div", {
            "ref": toRightBtnRef,
            "class": rightIconClass.value,
            "onClick": function onClick() {
              return handleScroll("right");
            }
          }, [vue.createVNode(ChevronRightIcon, null, null)]) : null];
        }
      }), props.addable ? vue.createVNode("div", {
        "class": addIconClass.value,
        "onClick": handleAddTab
      }, [vue.createVNode(AddIcon, null, null)]) : null])];
    };
    var renderNavs = function renderNavs() {
      return vue.createVNode("div", {
        "class": navContainerClass.value
      }, [vue.createVNode("div", {
        "class": navScrollContainerClass.value
      }, [vue.createVNode("div", {
        "ref": navsWrapRef,
        "class": navsWrapClass.value,
        "style": wrapTransformStyle.value
      }, [props.theme !== "card" && vue.createVNode(tabs_tabNavBar["default"], {
        "placement": props.placement,
        "value": props.value,
        "navs": navs.value
      }, null), navs.value])])]);
    };
    return function () {
      return vue.createVNode("div", {
        "ref": navsContainerRef,
        "class": ["".concat(COMPONENT_NAME.value, "__nav")],
        "style": navsContainerStyle.value
      }, [renderArrows(), renderNavs()]);
    };
  }
}));

exports["default"] = TTabNav;
//# sourceMappingURL=tab-nav.js.map
