Step.js 7.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193
  1. import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
  2. import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
  3. import { createVNode as _createVNode } from "vue";
  4. import PropTypes, { withUndefined } from '../_util/vue-types';
  5. import { defineComponent } from 'vue';
  6. function isString(str) {
  7. return typeof str === 'string';
  8. }
  9. function noop() {}
  10. export var VcStepProps = function VcStepProps() {
  11. return {
  12. prefixCls: String,
  13. wrapperStyle: {
  14. type: Object,
  15. default: undefined
  16. },
  17. itemWidth: String,
  18. active: {
  19. type: Boolean,
  20. default: undefined
  21. },
  22. disabled: {
  23. type: Boolean,
  24. default: undefined
  25. },
  26. status: String,
  27. iconPrefix: String,
  28. icon: PropTypes.any,
  29. adjustMarginRight: String,
  30. stepNumber: Number,
  31. stepIndex: Number,
  32. description: PropTypes.any,
  33. title: PropTypes.any,
  34. subTitle: PropTypes.any,
  35. progressDot: withUndefined(PropTypes.oneOfType([PropTypes.looseBool, PropTypes.func])),
  36. tailContent: PropTypes.any,
  37. icons: PropTypes.shape({
  38. finish: PropTypes.any,
  39. error: PropTypes.any
  40. }).loose,
  41. onClick: Function,
  42. onStepClick: Function,
  43. stepIcon: Function
  44. };
  45. };
  46. export default defineComponent({
  47. compatConfig: {
  48. MODE: 3
  49. },
  50. name: 'Step',
  51. props: VcStepProps(),
  52. slots: ['title', 'subTitle', 'description', 'tailContent', 'stepIcon', 'progressDot'],
  53. emits: ['click', 'stepClick'],
  54. setup: function setup(props, _ref) {
  55. var slots = _ref.slots,
  56. emit = _ref.emit;
  57. var onItemClick = function onItemClick(e) {
  58. emit('click', e);
  59. emit('stepClick', props.stepIndex);
  60. };
  61. var renderIconNode = function renderIconNode(_ref2) {
  62. var _iconClassName;
  63. var icon = _ref2.icon,
  64. title = _ref2.title,
  65. description = _ref2.description;
  66. var prefixCls = props.prefixCls,
  67. stepNumber = props.stepNumber,
  68. status = props.status,
  69. iconPrefix = props.iconPrefix,
  70. icons = props.icons,
  71. _props$progressDot = props.progressDot,
  72. progressDot = _props$progressDot === void 0 ? slots.progressDot : _props$progressDot,
  73. _props$stepIcon = props.stepIcon,
  74. stepIcon = _props$stepIcon === void 0 ? slots.stepIcon : _props$stepIcon;
  75. var iconNode;
  76. var iconClassName = (_iconClassName = {}, _defineProperty(_iconClassName, "".concat(prefixCls, "-icon"), true), _defineProperty(_iconClassName, "".concat(iconPrefix, "icon"), true), _defineProperty(_iconClassName, "".concat(iconPrefix, "icon-").concat(icon), icon && isString(icon)), _defineProperty(_iconClassName, "".concat(iconPrefix, "icon-check"), !icon && status === 'finish' && icons && !icons.finish), _defineProperty(_iconClassName, "".concat(iconPrefix, "icon-close"), !icon && status === 'error' && icons && !icons.error), _iconClassName);
  77. var iconDot = _createVNode("span", {
  78. "class": "".concat(prefixCls, "-icon-dot")
  79. }, null);
  80. // `progressDot` enjoy the highest priority
  81. if (progressDot) {
  82. if (typeof progressDot === 'function') {
  83. iconNode = _createVNode("span", {
  84. "class": "".concat(prefixCls, "-icon")
  85. }, [progressDot({
  86. iconDot: iconDot,
  87. index: stepNumber - 1,
  88. status: status,
  89. title: title,
  90. description: description,
  91. prefixCls: prefixCls
  92. })]);
  93. } else {
  94. iconNode = _createVNode("span", {
  95. "class": "".concat(prefixCls, "-icon")
  96. }, [iconDot]);
  97. }
  98. } else if (icon && !isString(icon)) {
  99. iconNode = _createVNode("span", {
  100. "class": "".concat(prefixCls, "-icon")
  101. }, [icon]);
  102. } else if (icons && icons.finish && status === 'finish') {
  103. iconNode = _createVNode("span", {
  104. "class": "".concat(prefixCls, "-icon")
  105. }, [icons.finish]);
  106. } else if (icons && icons.error && status === 'error') {
  107. iconNode = _createVNode("span", {
  108. "class": "".concat(prefixCls, "-icon")
  109. }, [icons.error]);
  110. } else if (icon || status === 'finish' || status === 'error') {
  111. iconNode = _createVNode("span", {
  112. "class": iconClassName
  113. }, null);
  114. } else {
  115. iconNode = _createVNode("span", {
  116. "class": "".concat(prefixCls, "-icon")
  117. }, [stepNumber]);
  118. }
  119. if (stepIcon) {
  120. iconNode = stepIcon({
  121. index: stepNumber - 1,
  122. status: status,
  123. title: title,
  124. description: description,
  125. node: iconNode
  126. });
  127. }
  128. return iconNode;
  129. };
  130. return function () {
  131. var _slots$title, _slots$description, _slots$subTitle, _slots$icon, _classString;
  132. var prefixCls = props.prefixCls,
  133. itemWidth = props.itemWidth,
  134. active = props.active,
  135. _props$status = props.status,
  136. status = _props$status === void 0 ? 'wait' : _props$status,
  137. tailContent = props.tailContent,
  138. adjustMarginRight = props.adjustMarginRight,
  139. disabled = props.disabled,
  140. _props$title = props.title,
  141. title = _props$title === void 0 ? (_slots$title = slots.title) === null || _slots$title === void 0 ? void 0 : _slots$title.call(slots) : _props$title,
  142. _props$description = props.description,
  143. description = _props$description === void 0 ? (_slots$description = slots.description) === null || _slots$description === void 0 ? void 0 : _slots$description.call(slots) : _props$description,
  144. _props$subTitle = props.subTitle,
  145. subTitle = _props$subTitle === void 0 ? (_slots$subTitle = slots.subTitle) === null || _slots$subTitle === void 0 ? void 0 : _slots$subTitle.call(slots) : _props$subTitle,
  146. _props$icon = props.icon,
  147. icon = _props$icon === void 0 ? (_slots$icon = slots.icon) === null || _slots$icon === void 0 ? void 0 : _slots$icon.call(slots) : _props$icon,
  148. onClick = props.onClick,
  149. onStepClick = props.onStepClick;
  150. var classString = (_classString = {}, _defineProperty(_classString, "".concat(prefixCls, "-item"), true), _defineProperty(_classString, "".concat(prefixCls, "-item-").concat(status), true), _defineProperty(_classString, "".concat(prefixCls, "-item-custom"), icon), _defineProperty(_classString, "".concat(prefixCls, "-item-active"), active), _defineProperty(_classString, "".concat(prefixCls, "-item-disabled"), disabled === true), _classString);
  151. var stepProps = {
  152. class: classString
  153. };
  154. var stepItemStyle = {};
  155. if (itemWidth) {
  156. stepItemStyle.width = itemWidth;
  157. }
  158. if (adjustMarginRight) {
  159. stepItemStyle.marginRight = adjustMarginRight;
  160. }
  161. var accessibilityProps = {
  162. onClick: onClick || noop
  163. };
  164. if (onStepClick && !disabled) {
  165. accessibilityProps.role = 'button';
  166. accessibilityProps.tabindex = 0;
  167. accessibilityProps.onClick = onItemClick;
  168. }
  169. return _createVNode("div", _objectSpread(_objectSpread({}, stepProps), {}, {
  170. "style": stepItemStyle
  171. }), [_createVNode("div", _objectSpread(_objectSpread({}, accessibilityProps), {}, {
  172. "class": "".concat(prefixCls, "-item-container")
  173. }), [_createVNode("div", {
  174. "class": "".concat(prefixCls, "-item-tail")
  175. }, [tailContent]), _createVNode("div", {
  176. "class": "".concat(prefixCls, "-item-icon")
  177. }, [renderIconNode({
  178. icon: icon,
  179. title: title,
  180. description: description
  181. })]), _createVNode("div", {
  182. "class": "".concat(prefixCls, "-item-content")
  183. }, [_createVNode("div", {
  184. "class": "".concat(prefixCls, "-item-title")
  185. }, [title, subTitle && _createVNode("div", {
  186. "title": subTitle,
  187. "class": "".concat(prefixCls, "-item-subtitle")
  188. }, [subTitle])]), description && _createVNode("div", {
  189. "class": "".concat(prefixCls, "-item-description")
  190. }, [description])])])]);
  191. };
  192. }
  193. });