stype: update steps ts type

feat-css-var
tangjinzhou 2022-03-06 21:42:12 +08:00
parent 524135ce56
commit 2e3dcab8c1
7 changed files with 55 additions and 23 deletions

View File

@ -1,43 +1,47 @@
import type { App, ExtractPropTypes } from 'vue';
import type { App, ExtractPropTypes, PropType } from 'vue';
import { computed, defineComponent } from 'vue';
import CloseOutlined from '@ant-design/icons-vue/CloseOutlined';
import CheckOutlined from '@ant-design/icons-vue/CheckOutlined';
import PropTypes, { withUndefined } from '../_util/vue-types';
import PropTypes from '../_util/vue-types';
import initDefaultProps from '../_util/props-util/initDefaultProps';
import VcSteps, { Step as VcStep } from '../vc-steps';
import { tuple } from '../_util/type';
import useConfigInject from '../_util/hooks/useConfigInject';
import useBreakpoint from '../_util/hooks/useBreakpoint';
import classNames from '../_util/classNames';
import Progress from '../progress';
import omit from '../_util/omit';
import { VcStepProps } from '../vc-steps/Step';
import type { ProgressDotRender } from '../vc-steps/Steps';
import type { MouseEventHandler } from '../_util/EventInterface';
export const stepsProps = () => ({
prefixCls: PropTypes.string,
iconPrefix: PropTypes.string,
current: PropTypes.number,
initial: PropTypes.number,
percent: PropTypes.number,
responsive: PropTypes.looseBool,
labelPlacement: PropTypes.oneOf(tuple('horizontal', 'vertical')).def('horizontal'),
status: PropTypes.oneOf(tuple('wait', 'process', 'finish', 'error')),
size: PropTypes.oneOf(tuple('default', 'small')),
direction: PropTypes.oneOf(tuple('horizontal', 'vertical')),
progressDot: withUndefined(PropTypes.oneOfType([PropTypes.looseBool, PropTypes.func])),
type: PropTypes.oneOf(tuple('default', 'navigation')),
onChange: PropTypes.func,
'onUpdate:current': PropTypes.func,
prefixCls: String,
iconPrefix: String,
current: Number,
initial: Number,
percent: Number,
responsive: { type: Boolean, default: undefined },
labelPlacement: String as PropType<'horizontal' | 'vertical'>,
status: String as PropType<'wait' | 'process' | 'finish' | 'error'>,
size: String as PropType<'default' | 'small'>,
direction: String as PropType<'horizontal' | 'vertical'>,
progressDot: {
type: [Boolean, Function] as PropType<boolean | ProgressDotRender>,
default: undefined as boolean | ProgressDotRender,
},
type: String as PropType<'default' | 'navigation'>,
onChange: Function as PropType<(current: number) => void>,
'onUpdate:current': Function as PropType<(current: number) => void>,
});
export const stepProps = () => ({
description: PropTypes.any,
icon: PropTypes.any,
status: PropTypes.oneOf(tuple('wait', 'process', 'finish', 'error')),
disabled: PropTypes.looseBool,
status: String as PropType<'wait' | 'process' | 'finish' | 'error'>,
disabled: { type: Boolean, default: undefined },
title: PropTypes.any,
subTitle: PropTypes.any,
onClick: PropTypes.func,
onClick: Function as PropType<MouseEventHandler>,
});
export type StepsProps = Partial<ExtractPropTypes<ReturnType<typeof stepsProps>>>;
@ -50,6 +54,7 @@ const Steps = defineComponent({
props: initDefaultProps(stepsProps(), {
current: 0,
responsive: true,
labelPlacement: 'horizontal',
}),
slots: ['progressDot'],
emits: ['update:current', 'change'],

View File

@ -74,6 +74,7 @@
line-height: 1;
}
}
&-tail {
position: absolute;
top: 12px;
@ -91,6 +92,7 @@
content: '';
}
}
&-title {
position: relative;
display: inline-block;
@ -110,6 +112,7 @@
content: '';
}
}
&-subtitle {
display: inline;
margin-left: 8px;
@ -117,18 +120,21 @@
font-weight: normal;
font-size: @font-size-base;
}
&-description {
color: @text-color-secondary;
font-size: @font-size-base;
}
.step-item-status(wait);
.step-item-status(process);
&-process > &-container > &-icon {
background: @process-icon-color;
.@{steps-prefix-cls}-icon {
color: @process-icon-text-color;
}
}
&-process > &-container > &-title {
font-weight: 500;
}
@ -197,9 +203,11 @@
&:last-child .@{steps-prefix-cls}-item-title {
padding-right: 0;
}
&-tail {
display: none;
}
&-description {
max-width: @steps-description-max-width;
white-space: normal;
@ -224,6 +232,7 @@
}
&-@{status} > &-container > &-content > &-title {
color: @@title-color;
&::after {
background-color: @@tail-color;
}

View File

@ -1,27 +1,33 @@
.@{steps-prefix-cls}-label-vertical {
.@{steps-prefix-cls}-item {
overflow: visible;
&-tail {
margin-left: 58px;
padding: 3.5px 24px;
}
&-content {
display: block;
width: ((@steps-icon-size / 2) + 42px) * 2;
margin-top: 8px;
text-align: center;
}
&-icon {
display: inline-block;
margin-left: 42px;
}
&-title {
padding-right: 0;
padding-left: 0;
&::after {
display: none;
}
}
&-subtitle {
display: block;
margin-bottom: 4px;

View File

@ -41,6 +41,7 @@
&:not(.@{steps-prefix-cls}-item-active) {
.@{steps-prefix-cls}-item-container[role='button'] {
cursor: pointer;
&:hover {
opacity: 0.85;
}
@ -49,6 +50,7 @@
&:last-child {
flex: 1;
&::after {
display: none;
}
@ -93,6 +95,7 @@
.@{steps-prefix-cls}-navigation.@{steps-prefix-cls}-vertical {
> .@{steps-prefix-cls}-item {
margin-right: 0 !important;
&::before {
display: none;
}
@ -104,6 +107,7 @@
width: 3px;
height: calc(100% - 24px);
}
&::after {
position: relative;
top: -2px;

View File

@ -4,6 +4,7 @@
&-title {
line-height: @line-height-base;
}
&-tail {
top: @steps-dot-top;
width: 100%;
@ -19,6 +20,7 @@
&:first-child .@{steps-prefix-cls}-icon-dot {
left: 2px;
}
&-icon {
width: @steps-dot-size;
height: @steps-dot-size;
@ -35,6 +37,7 @@
height: 100%;
border-radius: 100px;
transition: all 0.3s;
/* expand hover area */
&::after {
position: absolute;
@ -47,6 +50,7 @@
}
}
}
&-content {
width: @steps-description-max-width;
}
@ -68,13 +72,13 @@
.@{steps-prefix-cls}-vertical.@{steps-prefix-cls}-dot {
.@{steps-prefix-cls}-item-icon {
margin-top: 8px;
margin-top: 13px;
margin-left: 0;
background: none;
}
// https://github.com/ant-design/ant-design/issues/18354
.@{steps-prefix-cls}-item > .@{steps-prefix-cls}-item-container > .@{steps-prefix-cls}-item-tail {
top: 2px;
top: 6.5px;
left: -9px;
margin: 0;
padding: 22px 0 4px;
@ -89,6 +93,7 @@
.@{steps-prefix-cls}-item-container
.@{steps-prefix-cls}-item-icon
.@{steps-prefix-cls}-icon-dot {
left: -2px;
top: -1px;
left: -1px;
}
}

View File

@ -193,6 +193,7 @@
left: auto;
}
}
&-icon {
.@{steps-prefix-cls}-rtl& {
margin-right: 67px;
@ -203,6 +204,7 @@
.@{steps-prefix-cls}-rtl& {
float: right;
}
/* expand hover area */
&::after {
.@{steps-prefix-cls}-rtl& {

View File

@ -20,6 +20,7 @@
padding-right: 12px;
font-size: @font-size-base;
line-height: @steps-small-icon-size;
&::after {
top: (@steps-small-icon-size / 2);
}