ant-design-vue
Version:
An enterprise-class UI design language and Vue-based implementation
193 lines • 8.02 kB
JavaScript
import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
import { createVNode as _createVNode } from "vue";
import PropTypes, { withUndefined } from '../_util/vue-types';
import { defineComponent } from 'vue';
function isString(str) {
return typeof str === 'string';
}
function noop() {}
export var VcStepProps = function VcStepProps() {
return {
prefixCls: String,
wrapperStyle: {
type: Object,
default: undefined
},
itemWidth: String,
active: {
type: Boolean,
default: undefined
},
disabled: {
type: Boolean,
default: undefined
},
status: String,
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: Function,
onStepClick: Function,
stepIcon: Function
};
};
export default defineComponent({
compatConfig: {
MODE: 3
},
name: 'Step',
props: VcStepProps(),
slots: ['title', 'subTitle', 'description', 'tailContent', 'stepIcon', 'progressDot'],
emits: ['click', 'stepClick'],
setup: function setup(props, _ref) {
var slots = _ref.slots,
emit = _ref.emit;
var onItemClick = function onItemClick(e) {
emit('click', e);
emit('stepClick', props.stepIndex);
};
var renderIconNode = function renderIconNode(_ref2) {
var _iconClassName;
var icon = _ref2.icon,
title = _ref2.title,
description = _ref2.description;
var prefixCls = props.prefixCls,
stepNumber = props.stepNumber,
status = props.status,
iconPrefix = props.iconPrefix,
icons = props.icons,
_props$progressDot = props.progressDot,
progressDot = _props$progressDot === void 0 ? slots.progressDot : _props$progressDot,
_props$stepIcon = props.stepIcon,
stepIcon = _props$stepIcon === void 0 ? slots.stepIcon : _props$stepIcon;
var iconNode;
var iconClassName = (_iconClassName = {}, _defineProperty(_iconClassName, "".concat(prefixCls, "-icon"), true), _defineProperty(_iconClassName, "".concat(iconPrefix, "icon"), true), _defineProperty(_iconClassName, "".concat(iconPrefix, "icon-").concat(icon), icon && isString(icon)), _defineProperty(_iconClassName, "".concat(iconPrefix, "icon-check"), !icon && status === 'finish' && icons && !icons.finish), _defineProperty(_iconClassName, "".concat(iconPrefix, "icon-close"), !icon && status === 'error' && icons && !icons.error), _iconClassName);
var iconDot = _createVNode("span", {
"class": "".concat(prefixCls, "-icon-dot")
}, null);
// `progressDot` enjoy the highest priority
if (progressDot) {
if (typeof progressDot === 'function') {
iconNode = _createVNode("span", {
"class": "".concat(prefixCls, "-icon")
}, [progressDot({
iconDot: iconDot,
index: stepNumber - 1,
status: status,
title: title,
description: description,
prefixCls: prefixCls
})]);
} else {
iconNode = _createVNode("span", {
"class": "".concat(prefixCls, "-icon")
}, [iconDot]);
}
} else if (icon && !isString(icon)) {
iconNode = _createVNode("span", {
"class": "".concat(prefixCls, "-icon")
}, [icon]);
} else if (icons && icons.finish && status === 'finish') {
iconNode = _createVNode("span", {
"class": "".concat(prefixCls, "-icon")
}, [icons.finish]);
} else if (icons && icons.error && status === 'error') {
iconNode = _createVNode("span", {
"class": "".concat(prefixCls, "-icon")
}, [icons.error]);
} else if (icon || status === 'finish' || status === 'error') {
iconNode = _createVNode("span", {
"class": iconClassName
}, null);
} else {
iconNode = _createVNode("span", {
"class": "".concat(prefixCls, "-icon")
}, [stepNumber]);
}
if (stepIcon) {
iconNode = stepIcon({
index: stepNumber - 1,
status: status,
title: title,
description: description,
node: iconNode
});
}
return iconNode;
};
return function () {
var _slots$title, _slots$description, _slots$subTitle, _slots$icon, _classString;
var prefixCls = props.prefixCls,
itemWidth = props.itemWidth,
active = props.active,
_props$status = props.status,
status = _props$status === void 0 ? 'wait' : _props$status,
tailContent = props.tailContent,
adjustMarginRight = props.adjustMarginRight,
disabled = props.disabled,
_props$title = props.title,
title = _props$title === void 0 ? (_slots$title = slots.title) === null || _slots$title === void 0 ? void 0 : _slots$title.call(slots) : _props$title,
_props$description = props.description,
description = _props$description === void 0 ? (_slots$description = slots.description) === null || _slots$description === void 0 ? void 0 : _slots$description.call(slots) : _props$description,
_props$subTitle = props.subTitle,
subTitle = _props$subTitle === void 0 ? (_slots$subTitle = slots.subTitle) === null || _slots$subTitle === void 0 ? void 0 : _slots$subTitle.call(slots) : _props$subTitle,
_props$icon = props.icon,
icon = _props$icon === void 0 ? (_slots$icon = slots.icon) === null || _slots$icon === void 0 ? void 0 : _slots$icon.call(slots) : _props$icon,
onClick = props.onClick,
onStepClick = props.onStepClick;
var classString = (_classString = {}, _defineProperty(_classString, "".concat(prefixCls, "-item"), true), _defineProperty(_classString, "".concat(prefixCls, "-item-").concat(status), true), _defineProperty(_classString, "".concat(prefixCls, "-item-custom"), icon), _defineProperty(_classString, "".concat(prefixCls, "-item-active"), active), _defineProperty(_classString, "".concat(prefixCls, "-item-disabled"), disabled === true), _classString);
var stepProps = {
class: classString
};
var stepItemStyle = {};
if (itemWidth) {
stepItemStyle.width = itemWidth;
}
if (adjustMarginRight) {
stepItemStyle.marginRight = adjustMarginRight;
}
var accessibilityProps = {
onClick: onClick || noop
};
if (onStepClick && !disabled) {
accessibilityProps.role = 'button';
accessibilityProps.tabindex = 0;
accessibilityProps.onClick = onItemClick;
}
return _createVNode("div", _objectSpread(_objectSpread({}, stepProps), {}, {
"style": stepItemStyle
}), [_createVNode("div", _objectSpread(_objectSpread({}, accessibilityProps), {}, {
"class": "".concat(prefixCls, "-item-container")
}), [_createVNode("div", {
"class": "".concat(prefixCls, "-item-tail")
}, [tailContent]), _createVNode("div", {
"class": "".concat(prefixCls, "-item-icon")
}, [renderIconNode({
icon: icon,
title: title,
description: description
})]), _createVNode("div", {
"class": "".concat(prefixCls, "-item-content")
}, [_createVNode("div", {
"class": "".concat(prefixCls, "-item-title")
}, [title, subTitle && _createVNode("div", {
"title": subTitle,
"class": "".concat(prefixCls, "-item-subtitle")
}, [subTitle])]), description && _createVNode("div", {
"class": "".concat(prefixCls, "-item-description")
}, [description])])])]);
};
}
});