index.js 5.0 KB

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