123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193 |
- 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])])])]);
- };
- }
- });
|