123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990 |
- import { computed, defineComponent, createVNode as _createVNode } from "vue";
- import { isDef, truthProp, numericProp, createNamespace } from "../utils/index.mjs";
- import { Badge } from "../badge/index.mjs";
- const [name, bem] = createNamespace("tab");
- const TabTitle = defineComponent({
- name,
- props: {
- id: String,
- dot: Boolean,
- type: String,
- color: String,
- title: String,
- badge: numericProp,
- shrink: Boolean,
- isActive: Boolean,
- disabled: Boolean,
- controls: String,
- scrollable: Boolean,
- activeColor: String,
- inactiveColor: String,
- showZeroBadge: truthProp
- },
- setup(props, {
- slots
- }) {
- const style = computed(() => {
- const style2 = {};
- const {
- type,
- color,
- disabled,
- isActive,
- activeColor,
- inactiveColor
- } = props;
- const isCard = type === "card";
- if (color && isCard) {
- style2.borderColor = color;
- if (!disabled) {
- if (isActive) {
- style2.backgroundColor = color;
- } else {
- style2.color = color;
- }
- }
- }
- const titleColor = isActive ? activeColor : inactiveColor;
- if (titleColor) {
- style2.color = titleColor;
- }
- return style2;
- });
- const renderText = () => {
- const Text = _createVNode("span", {
- "class": bem("text", {
- ellipsis: !props.scrollable
- })
- }, [slots.title ? slots.title() : props.title]);
- if (props.dot || isDef(props.badge) && props.badge !== "") {
- return _createVNode(Badge, {
- "dot": props.dot,
- "content": props.badge,
- "showZero": props.showZeroBadge
- }, {
- default: () => [Text]
- });
- }
- return Text;
- };
- return () => _createVNode("div", {
- "id": props.id,
- "role": "tab",
- "class": [bem([props.type, {
- grow: props.scrollable && !props.shrink,
- shrink: props.shrink,
- active: props.isActive,
- disabled: props.disabled
- }])],
- "style": style.value,
- "tabindex": props.disabled ? void 0 : props.isActive ? 0 : -1,
- "aria-selected": props.isActive,
- "aria-disabled": props.disabled || void 0,
- "aria-controls": props.controls,
- "data-allow-mismatch": "attribute"
- }, [renderText()]);
- }
- });
- export {
- TabTitle
- };
|