Tab.js 4.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142
  1. var __defProp = Object.defineProperty;
  2. var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
  3. var __getOwnPropNames = Object.getOwnPropertyNames;
  4. var __hasOwnProp = Object.prototype.hasOwnProperty;
  5. var __export = (target, all) => {
  6. for (var name2 in all)
  7. __defProp(target, name2, { get: all[name2], enumerable: true });
  8. };
  9. var __copyProps = (to, from, except, desc) => {
  10. if (from && typeof from === "object" || typeof from === "function") {
  11. for (let key of __getOwnPropNames(from))
  12. if (!__hasOwnProp.call(to, key) && key !== except)
  13. __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
  14. }
  15. return to;
  16. };
  17. var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
  18. var stdin_exports = {};
  19. __export(stdin_exports, {
  20. default: () => stdin_default
  21. });
  22. module.exports = __toCommonJS(stdin_exports);
  23. var import_vue = require("vue");
  24. var import_vue2 = require("vue");
  25. var import_utils = require("../utils");
  26. var import_Tabs = require("../tabs/Tabs");
  27. var import_use = require("@vant/use");
  28. var import_use_id = require("../composables/use-id");
  29. var import_use_expose = require("../composables/use-expose");
  30. var import_use_route = require("../composables/use-route");
  31. var import_use_tab_status = require("../composables/use-tab-status");
  32. var import_swipe_item = require("../swipe-item");
  33. const [name, bem] = (0, import_utils.createNamespace)("tab");
  34. const tabProps = (0, import_utils.extend)({}, import_use_route.routeProps, {
  35. dot: Boolean,
  36. name: import_utils.numericProp,
  37. badge: import_utils.numericProp,
  38. title: String,
  39. disabled: Boolean,
  40. titleClass: import_utils.unknownProp,
  41. titleStyle: [String, Object],
  42. showZeroBadge: import_utils.truthProp
  43. });
  44. var stdin_default = (0, import_vue2.defineComponent)({
  45. name,
  46. props: tabProps,
  47. setup(props, {
  48. slots
  49. }) {
  50. const id = (0, import_use_id.useId)();
  51. const inited = (0, import_vue2.ref)(false);
  52. const {
  53. parent,
  54. index
  55. } = (0, import_use.useParent)(import_Tabs.TABS_KEY);
  56. if (!parent) {
  57. if (process.env.NODE_ENV !== "production") {
  58. console.error("[Vant] <Tab> must be a child component of <Tabs>.");
  59. }
  60. return;
  61. }
  62. const getName = () => {
  63. var _a;
  64. return (_a = props.name) != null ? _a : index.value;
  65. };
  66. const init = () => {
  67. inited.value = true;
  68. if (parent.props.lazyRender) {
  69. (0, import_vue2.nextTick)(() => {
  70. parent.onRendered(getName(), props.title);
  71. });
  72. }
  73. };
  74. const active = (0, import_vue2.computed)(() => {
  75. const isActive = getName() === parent.currentName.value;
  76. if (isActive && !inited.value) {
  77. init();
  78. }
  79. return isActive;
  80. });
  81. const hasInactiveClass = (0, import_vue2.ref)(!active.value);
  82. (0, import_vue2.watch)(active, (val) => {
  83. if (val) {
  84. hasInactiveClass.value = false;
  85. } else {
  86. (0, import_use.doubleRaf)(() => {
  87. hasInactiveClass.value = true;
  88. });
  89. }
  90. });
  91. (0, import_vue2.watch)(() => props.title, () => {
  92. parent.setLine();
  93. parent.scrollIntoView();
  94. });
  95. (0, import_vue2.provide)(import_use_tab_status.TAB_STATUS_KEY, active);
  96. return () => {
  97. var _a;
  98. const label = `${parent.id}-${index.value}`;
  99. const {
  100. animated,
  101. swipeable,
  102. scrollspy,
  103. lazyRender
  104. } = parent.props;
  105. if (!slots.default && !animated) {
  106. return;
  107. }
  108. const show = scrollspy || active.value;
  109. if (animated || swipeable) {
  110. return (0, import_vue.createVNode)(import_swipe_item.SwipeItem, {
  111. "id": id,
  112. "role": "tabpanel",
  113. "class": bem("panel-wrapper", {
  114. inactive: hasInactiveClass.value
  115. }),
  116. "tabindex": active.value ? 0 : -1,
  117. "aria-hidden": !active.value,
  118. "aria-labelledby": label
  119. }, {
  120. default: () => {
  121. var _a2;
  122. return [(0, import_vue.createVNode)("div", {
  123. "class": bem("panel")
  124. }, [(_a2 = slots.default) == null ? void 0 : _a2.call(slots)])];
  125. }
  126. });
  127. }
  128. const shouldRender = inited.value || scrollspy || !lazyRender;
  129. const Content = shouldRender ? (_a = slots.default) == null ? void 0 : _a.call(slots) : null;
  130. (0, import_use_expose.useExpose)({
  131. id
  132. });
  133. return (0, import_vue.withDirectives)((0, import_vue.createVNode)("div", {
  134. "id": id,
  135. "role": "tabpanel",
  136. "class": bem("panel"),
  137. "tabindex": show ? 0 : -1,
  138. "aria-labelledby": label
  139. }, [Content]), [[import_vue.vShow, show]]);
  140. };
  141. }
  142. });