tdesign-vue-next
Version:
TDesign Component for vue-next
112 lines (108 loc) • 4.22 kB
JavaScript
/**
* tdesign v1.13.2
* (c) 2025 tdesign
* @license MIT
*/
import { _ as _defineProperty } from '../_chunks/dep-0bb39574.mjs';
import { defineComponent, ref, computed, createVNode } from 'vue';
import { CloseIcon } from 'tdesign-icons-vue-next';
import props from './props.mjs';
import tabPanelProps from './tab-panel-props.mjs';
import { d as useRipple, u as usePrefixClass, i as useGlobalIcon, c as useCommonClassName } from '../_chunks/dep-9c4aef07.mjs';
import '../_chunks/dep-a81129ec.mjs';
import 'lodash-es';
import '../_chunks/dep-b981148e.mjs';
import '../_chunks/dep-f1895f5a.mjs';
import '../utils/render-tnode.mjs';
import '../config-provider/hooks/useConfig.mjs';
import '../config-provider/utils/context.mjs';
import '../_chunks/dep-466a0666.mjs';
import '../_chunks/dep-24ce1cec.mjs';
import '../_chunks/dep-160caab6.mjs';
import '../_chunks/dep-e497214e.mjs';
import '../_chunks/dep-98cd1e2d.mjs';
import '../_chunks/dep-23a929e8.mjs';
import '../_chunks/dep-48e13ca0.mjs';
import '../_chunks/dep-033df8e6.mjs';
import '../utils/dom.mjs';
import '../_chunks/dep-20550dcc.mjs';
var TTabNavItem = defineComponent({
name: "TTabNavItem",
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,
onClick: Function,
onRemove: Function
},
setup: function setup(props) {
var itemRef = ref();
useRipple(itemRef);
var COMPONENT_NAME = usePrefixClass("tabs__nav-item");
var _useGlobalIcon = useGlobalIcon({
CloseIcon: CloseIcon
}),
CloseIcon$1 = _useGlobalIcon.CloseIcon;
var classPrefix = usePrefixClass();
var _useCommonClassName = useCommonClassName(),
STATUS = _useCommonClassName.STATUS,
SIZE = _useCommonClassName.SIZE;
var removeBtnClick = function removeBtnClick(_ref) {
var e = _ref.e;
if (e) e.stopPropagation();
props.onRemove({
e: e,
value: props.value,
index: props.index
});
};
var onClickNav = function onClickNav(e) {
if (props.disabled) return;
props.onClick(e);
};
var navItemClass = computed(function () {
return _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, COMPONENT_NAME.value, true), "".concat(classPrefix.value, "-tabs__nav--card"), props.theme === "card"), STATUS.value.disabled, props.disabled), STATUS.value.active, props.active), "".concat(classPrefix.value, "-is-left"), props.placement === "left"), "".concat(classPrefix.value, "-is-right"), props.placement === "right"), SIZE.value.medium, props.size === "medium"), SIZE.value.large, props.size === "large");
});
var renderCardItem = function renderCardItem() {
return createVNode("div", {
"class": navItemClass.value,
"onClick": onClickNav,
"ref": itemRef
}, [createVNode("span", {
"class": "".concat(COMPONENT_NAME.value, "-text-wrapper")
}, [props.label]), props.removable && !props.disabled ? createVNode(CloseIcon$1, {
"class": "remove-btn",
"onClick": removeBtnClick
}, null) : null]);
};
var renderNormalItem = function renderNormalItem() {
return createVNode("div", {
"class": navItemClass.value,
"onClick": onClickNav
}, [createVNode("div", {
"class": ["".concat(COMPONENT_NAME.value, "-wrapper"), _defineProperty(_defineProperty({}, STATUS.value.disabled, props.disabled), STATUS.value.active, props.active)],
"ref": itemRef
}, [createVNode("span", {
"class": "".concat(COMPONENT_NAME.value, "-text-wrapper")
}, [props.label])]), props.removable && !props.disabled ? createVNode(CloseIcon$1, {
"class": "remove-btn",
"onClick": removeBtnClick
}, null) : null]);
};
return function () {
return props.theme === "card" ? renderCardItem() : renderNormalItem();
};
}
});
export { TTabNavItem as default };
//# sourceMappingURL=tab-nav-item.mjs.map