TabsTitle.mjs 2.3 KB

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