tdesign-vue/lib/tabs/tab-nav-item.js

tdesign-vue

/**
 * tdesign v1.14.1
 * (c) 2025 tdesign
 * @license MIT
 */

import _defineProperty from '@babel/runtime/helpers/defineProperty';
import { CloseIcon } from 'tdesign-icons-vue';
import mixins from '../utils/mixins.js';
import { emitEvent } from '../utils/event.js';
import Ripple from '../utils/ripple.js';
import props from './props.js';
import tabPanelProps from './tab-panel-props.js';
import { getClassPrefixMixins, getKeepAnimationMixins, getGlobalIconMixins } from '../config-provider/config-receiver.js';
import 'vue';
import '../utils/helper.js';
import '@babel/runtime/helpers/objectWithoutProperties';
import '@babel/runtime/helpers/slicedToArray';
import 'lodash-es';
import '../_common/js/utils/setStyle.js';
import '../config.js';
import '../config-provider/context.js';
import '../_common/js/global-config/default-config.js';
import '../_common/js/global-config/locale/zh_CN.js';
import '../_chunks/dep-ba613a02.js';
import '@babel/runtime/helpers/typeof';
import '../_chunks/dep-fdb1b253.js';
import 'dayjs';
import '../_common/js/global-config/t.js';

var classPrefixMixins = getClassPrefixMixins("tab-nav__item");
var keepAnimationMixins = getKeepAnimationMixins();
var TTabNavItem = mixins(keepAnimationMixins, classPrefixMixins, getGlobalIconMixins()).extend({
  name: "TTabNavItem",
  directives: {
    ripple: Ripple
  },
  props: {
    index: Number,
    active: {
      type: Boolean
    },
    theme: props.theme,
    size: props.size,
    placement: props.placement,
    label: {
      type: null
    },
    disabled: tabPanelProps.disabled,
    removable: tabPanelProps.removable,
    value: tabPanelProps.value
  },
  computed: {
    navItemClass: function navItemClass() {
      return _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, "".concat(this.classPrefix, "-tabs__nav-item"), true), "".concat(this.classPrefix, "-tabs__nav--card"), this.theme === "card"), "".concat(this.classPrefix, "-is-disabled"), this.disabled), "".concat(this.classPrefix, "-is-active"), this.active), "".concat(this.classPrefix, "-is-left"), this.placement === "left"), "".concat(this.classPrefix, "-is-right"), this.placement === "right"), "".concat(this.classPrefix, "-size-m"), this.size === "medium"), "".concat(this.classPrefix, "-size-l"), this.size === "large");
    }
  },
  methods: {
    removeBtnClick: function removeBtnClick(e) {
      e.stopPropagation();
      emitEvent(this, "remove", {
        e: e,
        value: this.value,
        index: this.index
      });
    },
    onClickNav: function onClickNav(e) {
      if (this.disabled) return;
      e.stopPropagation();
      emitEvent(this, "click", e);
    },
    removeBtn: function removeBtn() {
      var _this = this;
      var h = this.$createElement;
      var _this$useGlobalIcon = this.useGlobalIcon({
          CloseIcon: CloseIcon
        }),
        CloseIcon$1 = _this$useGlobalIcon.CloseIcon;
      return this.removable && !this.disabled ? h("span", {
        "on": {
          "click": function click(e) {
            return _this.removeBtnClick(e);
          }
        },
        "class": "remove-btn"
      }, [h(CloseIcon$1)]) : null;
    },
    renderCardItem: function renderCardItem() {
      var h = this.$createElement;
      return h("div", {
        "class": this.navItemClass,
        "on": {
          "click": this.onClickNav
        },
        "directives": [{
          name: "ripple",
          value: this.keepAnimation.ripple
        }]
      }, [h("span", {
        "class": "".concat(this.classPrefix, "-tabs__nav-item-text-wrapper")
      }, [this.label]), this.removeBtn()]);
    },
    renderNormalItem: function renderNormalItem() {
      var h = this.$createElement;
      return h("div", {
        "class": this.navItemClass,
        "on": {
          "click": this.onClickNav
        }
      }, [h("div", {
        "class": ["".concat(this.classPrefix, "-tabs__nav-item-wrapper"), _defineProperty(_defineProperty({}, "".concat(this.classPrefix, "-is-disabled"), this.disabled), "".concat(this.classPrefix, "-is-active"), this.active)],
        "directives": [{
          name: "ripple",
          value: this.keepAnimation.ripple
        }]
      }, [h("span", {
        "class": "".concat(this.classPrefix, "-tabs__nav-item-text-wrapper")
      }, [this.label])]), this.removeBtn()]);
    }
  },
  render: function render() {
    return this.theme === "card" ? this.renderCardItem() : this.renderNormalItem();
  }
});

export { TTabNavItem as default };
//# sourceMappingURL=tab-nav-item.js.map