Step.js 6.5 KB

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