index.js 6.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165
  1. "use strict";
  2. var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
  3. Object.defineProperty(exports, "__esModule", {
  4. value: true
  5. });
  6. exports.stepsProps = exports.stepProps = exports.default = exports.Step = void 0;
  7. var _vue = require("vue");
  8. var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
  9. var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
  10. var _CloseOutlined = _interopRequireDefault(require("@ant-design/icons-vue/lib/icons/CloseOutlined"));
  11. var _CheckOutlined = _interopRequireDefault(require("@ant-design/icons-vue/lib/icons/CheckOutlined"));
  12. var _type = require("../_util/type");
  13. var _initDefaultProps = _interopRequireDefault(require("../_util/props-util/initDefaultProps"));
  14. var _vcSteps = _interopRequireWildcard(require("../vc-steps"));
  15. var _useConfigInject = _interopRequireDefault(require("../config-provider/hooks/useConfigInject"));
  16. var _useBreakpoint = _interopRequireDefault(require("../_util/hooks/useBreakpoint"));
  17. var _classNames = _interopRequireDefault(require("../_util/classNames"));
  18. var _progress = _interopRequireDefault(require("../progress"));
  19. var _omit = _interopRequireDefault(require("../_util/omit"));
  20. var _tooltip = _interopRequireDefault(require("../tooltip"));
  21. var _Step = require("../vc-steps/Step");
  22. var _internal = require("../theme/internal");
  23. var _style = _interopRequireDefault(require("./style"));
  24. 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); }
  25. 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; }
  26. // CSSINJS
  27. const stepsProps = () => ({
  28. prefixCls: String,
  29. iconPrefix: String,
  30. current: Number,
  31. initial: Number,
  32. percent: Number,
  33. responsive: (0, _type.booleanType)(),
  34. items: (0, _type.arrayType)(),
  35. labelPlacement: (0, _type.stringType)(),
  36. status: (0, _type.stringType)(),
  37. size: (0, _type.stringType)(),
  38. direction: (0, _type.stringType)(),
  39. progressDot: (0, _type.someType)([Boolean, Function]),
  40. type: (0, _type.stringType)(),
  41. onChange: (0, _type.functionType)(),
  42. 'onUpdate:current': (0, _type.functionType)()
  43. });
  44. exports.stepsProps = stepsProps;
  45. const stepProps = () => ({
  46. description: (0, _type.anyType)(),
  47. icon: (0, _type.anyType)(),
  48. status: (0, _type.stringType)(),
  49. disabled: (0, _type.booleanType)(),
  50. title: (0, _type.anyType)(),
  51. subTitle: (0, _type.anyType)(),
  52. onClick: (0, _type.functionType)()
  53. });
  54. exports.stepProps = stepProps;
  55. const Steps = (0, _vue.defineComponent)({
  56. compatConfig: {
  57. MODE: 3
  58. },
  59. name: 'ASteps',
  60. inheritAttrs: false,
  61. props: (0, _initDefaultProps.default)(stepsProps(), {
  62. current: 0,
  63. responsive: true,
  64. labelPlacement: 'horizontal'
  65. }),
  66. slots: Object,
  67. // emits: ['update:current', 'change'],
  68. setup(props, _ref) {
  69. let {
  70. attrs,
  71. slots,
  72. emit
  73. } = _ref;
  74. const {
  75. prefixCls,
  76. direction: rtlDirection,
  77. configProvider
  78. } = (0, _useConfigInject.default)('steps', props);
  79. // style
  80. const [wrapSSR, hashId] = (0, _style.default)(prefixCls);
  81. const [, token] = (0, _internal.useToken)();
  82. const screens = (0, _useBreakpoint.default)();
  83. const direction = (0, _vue.computed)(() => props.responsive && screens.value.xs ? 'vertical' : props.direction);
  84. const iconPrefix = (0, _vue.computed)(() => configProvider.getPrefixCls('', props.iconPrefix));
  85. const handleChange = current => {
  86. emit('update:current', current);
  87. emit('change', current);
  88. };
  89. const isInline = (0, _vue.computed)(() => props.type === 'inline');
  90. const mergedPercent = (0, _vue.computed)(() => isInline.value ? undefined : props.percent);
  91. const stepIconRender = _ref2 => {
  92. let {
  93. node,
  94. status
  95. } = _ref2;
  96. if (status === 'process' && props.percent !== undefined) {
  97. // currently it's hard-coded, since we can't easily read the actually width of icon
  98. const progressWidth = props.size === 'small' ? token.value.controlHeight : token.value.controlHeightLG;
  99. const iconWithProgress = (0, _vue.createVNode)("div", {
  100. "class": `${prefixCls.value}-progress-icon`
  101. }, [(0, _vue.createVNode)(_progress.default, {
  102. "type": "circle",
  103. "percent": mergedPercent.value,
  104. "size": progressWidth,
  105. "strokeWidth": 4,
  106. "format": () => null
  107. }, null), node]);
  108. return iconWithProgress;
  109. }
  110. return node;
  111. };
  112. const icons = (0, _vue.computed)(() => ({
  113. finish: (0, _vue.createVNode)(_CheckOutlined.default, {
  114. "class": `${prefixCls.value}-finish-icon`
  115. }, null),
  116. error: (0, _vue.createVNode)(_CloseOutlined.default, {
  117. "class": `${prefixCls.value}-error-icon`
  118. }, null)
  119. }));
  120. return () => {
  121. const stepsClassName = (0, _classNames.default)({
  122. [`${prefixCls.value}-rtl`]: rtlDirection.value === 'rtl',
  123. [`${prefixCls.value}-with-progress`]: mergedPercent.value !== undefined
  124. }, attrs.class, hashId.value);
  125. const itemRender = (item, stepItem) => item.description ? (0, _vue.createVNode)(_tooltip.default, {
  126. "title": item.description
  127. }, {
  128. default: () => [stepItem]
  129. }) : stepItem;
  130. return wrapSSR((0, _vue.createVNode)(_vcSteps.default, (0, _objectSpread2.default)((0, _objectSpread2.default)((0, _objectSpread2.default)({
  131. "icons": icons.value
  132. }, attrs), (0, _omit.default)(props, ['percent', 'responsive'])), {}, {
  133. "items": props.items,
  134. "direction": direction.value,
  135. "prefixCls": prefixCls.value,
  136. "iconPrefix": iconPrefix.value,
  137. "class": stepsClassName,
  138. "onChange": handleChange,
  139. "isInline": isInline.value,
  140. "itemRender": isInline.value ? itemRender : undefined
  141. }), (0, _extends2.default)({
  142. stepIcon: stepIconRender
  143. }, slots)));
  144. };
  145. }
  146. });
  147. /* istanbul ignore next */
  148. const Step = exports.Step = (0, _vue.defineComponent)((0, _extends2.default)((0, _extends2.default)({
  149. compatConfig: {
  150. MODE: 3
  151. }
  152. }, _vcSteps.Step), {
  153. name: 'AStep',
  154. props: (0, _Step.VcStepProps)()
  155. }));
  156. var _default = exports.default = (0, _extends2.default)(Steps, {
  157. Step,
  158. install: app => {
  159. app.component(Steps.name, Steps);
  160. app.component(Step.name, Step);
  161. return app;
  162. }
  163. });