@aplus-frontend/antdv
Version:
Vue basic component library maintained based on ant-design-vue
209 lines • 6.63 kB
JavaScript
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;
};
}
});