Step.js 4.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137
  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_Steps = require("../steps/Steps");
  27. var import_use = require("@vant/use");
  28. var import_icon = require("../icon");
  29. const [name, bem] = (0, import_utils.createNamespace)("step");
  30. var stdin_default = (0, import_vue2.defineComponent)({
  31. name,
  32. setup(props, {
  33. slots
  34. }) {
  35. const {
  36. parent,
  37. index
  38. } = (0, import_use.useParent)(import_Steps.STEPS_KEY);
  39. if (!parent) {
  40. if (process.env.NODE_ENV !== "production") {
  41. console.error("[Vant] <Step> must be a child component of <Steps>.");
  42. }
  43. return;
  44. }
  45. const parentProps = parent.props;
  46. const getStatus = () => {
  47. const active = +parentProps.active;
  48. if (index.value < active) {
  49. return "finish";
  50. }
  51. return index.value === active ? "process" : "waiting";
  52. };
  53. const isActive = () => getStatus() === "process";
  54. const lineStyle = (0, import_vue2.computed)(() => ({
  55. background: getStatus() === "finish" ? parentProps.activeColor : parentProps.inactiveColor
  56. }));
  57. const titleStyle = (0, import_vue2.computed)(() => {
  58. if (isActive()) {
  59. return {
  60. color: parentProps.activeColor
  61. };
  62. }
  63. if (getStatus() === "waiting") {
  64. return {
  65. color: parentProps.inactiveColor
  66. };
  67. }
  68. });
  69. const onClickStep = () => parent.onClickStep(index.value);
  70. const renderCircle = () => {
  71. const {
  72. iconPrefix,
  73. finishIcon,
  74. activeIcon,
  75. activeColor,
  76. inactiveIcon
  77. } = parentProps;
  78. if (isActive()) {
  79. if (slots["active-icon"]) {
  80. return slots["active-icon"]();
  81. }
  82. return (0, import_vue.createVNode)(import_icon.Icon, {
  83. "class": bem("icon", "active"),
  84. "name": activeIcon,
  85. "color": activeColor,
  86. "classPrefix": iconPrefix
  87. }, null);
  88. }
  89. if (getStatus() === "finish" && (finishIcon || slots["finish-icon"])) {
  90. if (slots["finish-icon"]) {
  91. return slots["finish-icon"]();
  92. }
  93. return (0, import_vue.createVNode)(import_icon.Icon, {
  94. "class": bem("icon", "finish"),
  95. "name": finishIcon,
  96. "color": activeColor,
  97. "classPrefix": iconPrefix
  98. }, null);
  99. }
  100. if (slots["inactive-icon"]) {
  101. return slots["inactive-icon"]();
  102. }
  103. if (inactiveIcon) {
  104. return (0, import_vue.createVNode)(import_icon.Icon, {
  105. "class": bem("icon"),
  106. "name": inactiveIcon,
  107. "classPrefix": iconPrefix
  108. }, null);
  109. }
  110. return (0, import_vue.createVNode)("i", {
  111. "class": bem("circle"),
  112. "style": lineStyle.value
  113. }, null);
  114. };
  115. return () => {
  116. var _a;
  117. const status = getStatus();
  118. return (0, import_vue.createVNode)("div", {
  119. "class": [import_utils.BORDER, bem([parentProps.direction, {
  120. [status]: status
  121. }])]
  122. }, [(0, import_vue.createVNode)("div", {
  123. "class": bem("title", {
  124. active: isActive()
  125. }),
  126. "style": titleStyle.value,
  127. "onClick": onClickStep
  128. }, [(_a = slots.default) == null ? void 0 : _a.call(slots)]), (0, import_vue.createVNode)("div", {
  129. "class": bem("circle-container"),
  130. "onClick": onClickStep
  131. }, [renderCircle()]), (0, import_vue.createVNode)("div", {
  132. "class": bem("line"),
  133. "style": lineStyle.value
  134. }, null)]);
  135. };
  136. }
  137. });