Tab.js 4.7 KB

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