Step.js 9.7 KB

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