| 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209 |
- import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
- import { createVNode as _createVNode } from "vue";
- import PropTypes, { withUndefined } from '../_util/vue-types';
- import { defineComponent } from 'vue';
- import classNames from '../_util/classNames';
- import { booleanType, stringType, functionType } from '../_util/type';
- import omit from '../_util/omit';
- function isString(str) {
- return typeof str === 'string';
- }
- function noop() {}
- export const VcStepProps = () => ({
- prefixCls: String,
- itemWidth: String,
- active: {
- type: Boolean,
- default: undefined
- },
- disabled: {
- type: Boolean,
- default: undefined
- },
- status: stringType(),
- iconPrefix: String,
- icon: PropTypes.any,
- adjustMarginRight: String,
- stepNumber: Number,
- stepIndex: Number,
- description: PropTypes.any,
- title: PropTypes.any,
- subTitle: PropTypes.any,
- progressDot: withUndefined(PropTypes.oneOfType([PropTypes.looseBool, PropTypes.func])),
- tailContent: PropTypes.any,
- icons: PropTypes.shape({
- finish: PropTypes.any,
- error: PropTypes.any
- }).loose,
- onClick: functionType(),
- onStepClick: functionType(),
- stepIcon: functionType(),
- itemRender: functionType(),
- __legacy: booleanType()
- });
- export default defineComponent({
- compatConfig: {
- MODE: 3
- },
- name: 'Step',
- inheritAttrs: false,
- props: VcStepProps(),
- setup(props, _ref) {
- let {
- slots,
- emit,
- attrs
- } = _ref;
- const onItemClick = e => {
- emit('click', e);
- emit('stepClick', props.stepIndex);
- };
- // if (props.__legacy !== false) {
- // warning(
- // false,
- // 'Steps',
- // 'Step is deprecated, and not support inline type. Please use `items` directly. ',
- // );
- // }
- const renderIconNode = _ref2 => {
- let {
- icon,
- title,
- description
- } = _ref2;
- const {
- prefixCls,
- stepNumber,
- status,
- iconPrefix,
- icons,
- progressDot = slots.progressDot,
- stepIcon = slots.stepIcon
- } = props;
- let iconNode;
- const iconClassName = classNames(`${prefixCls}-icon`, `${iconPrefix}icon`, {
- [`${iconPrefix}icon-${icon}`]: icon && isString(icon),
- [`${iconPrefix}icon-check`]: !icon && status === 'finish' && (icons && !icons.finish || !icons),
- [`${iconPrefix}icon-cross`]: !icon && status === 'error' && (icons && !icons.error || !icons)
- });
- const iconDot = _createVNode("span", {
- "class": `${prefixCls}-icon-dot`
- }, null);
- // `progressDot` enjoy the highest priority
- if (progressDot) {
- if (typeof progressDot === 'function') {
- iconNode = _createVNode("span", {
- "class": `${prefixCls}-icon`
- }, [progressDot({
- iconDot,
- index: stepNumber - 1,
- status,
- title,
- description,
- prefixCls
- })]);
- } else {
- iconNode = _createVNode("span", {
- "class": `${prefixCls}-icon`
- }, [iconDot]);
- }
- } else if (icon && !isString(icon)) {
- iconNode = _createVNode("span", {
- "class": `${prefixCls}-icon`
- }, [icon]);
- } else if (icons && icons.finish && status === 'finish') {
- iconNode = _createVNode("span", {
- "class": `${prefixCls}-icon`
- }, [icons.finish]);
- } else if (icons && icons.error && status === 'error') {
- iconNode = _createVNode("span", {
- "class": `${prefixCls}-icon`
- }, [icons.error]);
- } else if (icon || status === 'finish' || status === 'error') {
- iconNode = _createVNode("span", {
- "class": iconClassName
- }, null);
- } else {
- iconNode = _createVNode("span", {
- "class": `${prefixCls}-icon`
- }, [stepNumber]);
- }
- if (stepIcon) {
- iconNode = stepIcon({
- index: stepNumber - 1,
- status,
- title,
- description,
- node: iconNode
- });
- }
- return iconNode;
- };
- return () => {
- var _a, _b, _c, _d;
- const {
- prefixCls,
- itemWidth,
- active,
- status = 'wait',
- tailContent,
- adjustMarginRight,
- disabled,
- title = (_a = slots.title) === null || _a === void 0 ? void 0 : _a.call(slots),
- description = (_b = slots.description) === null || _b === void 0 ? void 0 : _b.call(slots),
- subTitle = (_c = slots.subTitle) === null || _c === void 0 ? void 0 : _c.call(slots),
- icon = (_d = slots.icon) === null || _d === void 0 ? void 0 : _d.call(slots),
- onClick,
- onStepClick
- } = props;
- const mergedStatus = status || 'wait';
- const classString = classNames(`${prefixCls}-item`, `${prefixCls}-item-${mergedStatus}`, {
- [`${prefixCls}-item-custom`]: icon,
- [`${prefixCls}-item-active`]: active,
- [`${prefixCls}-item-disabled`]: disabled === true
- });
- const stepItemStyle = {};
- if (itemWidth) {
- stepItemStyle.width = itemWidth;
- }
- if (adjustMarginRight) {
- stepItemStyle.marginRight = adjustMarginRight;
- }
- const accessibilityProps = {
- onClick: onClick || noop
- };
- if (onStepClick && !disabled) {
- accessibilityProps.role = 'button';
- accessibilityProps.tabindex = 0;
- accessibilityProps.onClick = onItemClick;
- }
- const stepNode = _createVNode("div", _objectSpread(_objectSpread({}, omit(attrs, ['__legacy'])), {}, {
- "class": [classString, attrs.class],
- "style": [attrs.style, stepItemStyle]
- }), [_createVNode("div", _objectSpread(_objectSpread({}, accessibilityProps), {}, {
- "class": `${prefixCls}-item-container`
- }), [_createVNode("div", {
- "class": `${prefixCls}-item-tail`
- }, [tailContent]), _createVNode("div", {
- "class": `${prefixCls}-item-icon`
- }, [renderIconNode({
- icon,
- title,
- description
- })]), _createVNode("div", {
- "class": `${prefixCls}-item-content`
- }, [_createVNode("div", {
- "class": `${prefixCls}-item-title`
- }, [title, subTitle && _createVNode("div", {
- "title": typeof subTitle === 'string' ? subTitle : undefined,
- "class": `${prefixCls}-item-subtitle`
- }, [subTitle])]), description && _createVNode("div", {
- "class": `${prefixCls}-item-description`
- }, [description])])])]);
- if (props.itemRender) {
- return props.itemRender(stepNode);
- }
- return stepNode;
- };
- }
- });
|