TabTitle.mjs 2.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990
  1. import { computed, defineComponent, createVNode as _createVNode } from "vue";
  2. import { isDef, truthProp, numericProp, createNamespace } from "../utils/index.mjs";
  3. import { Badge } from "../badge/index.mjs";
  4. const [name, bem] = createNamespace("tab");
  5. const TabTitle = defineComponent({
  6. name,
  7. props: {
  8. id: String,
  9. dot: Boolean,
  10. type: String,
  11. color: String,
  12. title: String,
  13. badge: numericProp,
  14. shrink: Boolean,
  15. isActive: Boolean,
  16. disabled: Boolean,
  17. controls: String,
  18. scrollable: Boolean,
  19. activeColor: String,
  20. inactiveColor: String,
  21. showZeroBadge: truthProp
  22. },
  23. setup(props, {
  24. slots
  25. }) {
  26. const style = computed(() => {
  27. const style2 = {};
  28. const {
  29. type,
  30. color,
  31. disabled,
  32. isActive,
  33. activeColor,
  34. inactiveColor
  35. } = props;
  36. const isCard = type === "card";
  37. if (color && isCard) {
  38. style2.borderColor = color;
  39. if (!disabled) {
  40. if (isActive) {
  41. style2.backgroundColor = color;
  42. } else {
  43. style2.color = color;
  44. }
  45. }
  46. }
  47. const titleColor = isActive ? activeColor : inactiveColor;
  48. if (titleColor) {
  49. style2.color = titleColor;
  50. }
  51. return style2;
  52. });
  53. const renderText = () => {
  54. const Text = _createVNode("span", {
  55. "class": bem("text", {
  56. ellipsis: !props.scrollable
  57. })
  58. }, [slots.title ? slots.title() : props.title]);
  59. if (props.dot || isDef(props.badge) && props.badge !== "") {
  60. return _createVNode(Badge, {
  61. "dot": props.dot,
  62. "content": props.badge,
  63. "showZero": props.showZeroBadge
  64. }, {
  65. default: () => [Text]
  66. });
  67. }
  68. return Text;
  69. };
  70. return () => _createVNode("div", {
  71. "id": props.id,
  72. "role": "tab",
  73. "class": [bem([props.type, {
  74. grow: props.scrollable && !props.shrink,
  75. shrink: props.shrink,
  76. active: props.isActive,
  77. disabled: props.disabled
  78. }])],
  79. "style": style.value,
  80. "tabindex": props.disabled ? void 0 : props.isActive ? 0 : -1,
  81. "aria-selected": props.isActive,
  82. "aria-disabled": props.disabled || void 0,
  83. "aria-controls": props.controls,
  84. "data-allow-mismatch": "attribute"
  85. }, [renderText()]);
  86. }
  87. });
  88. export {
  89. TabTitle
  90. };