Step.js 7.9 KB

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