Skip to content

Commit

Permalink
feat(steps): 支持 separator api & 完善反转逻辑 (#868)
Browse files Browse the repository at this point in the history 
* feat(steps): 支持 separator api & 完善反转逻辑

* feat: update common
  • Loading branch information
@honkinglin
honkinglin authored May 13, 2022
1 parent b5d7ce8 commit 0addc7d
Show file tree
Hide file tree
Showing 13 changed files with 200 additions and 183 deletions.
10 changes: 5 additions & 5 deletions examples/steps/steps.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,13 +5,13 @@

名称 | 类型 | 默认值 | 说明 | 必传
-- | -- | -- | -- | --
current | String / Number | undefined | 当前步骤，即整个步骤条进度。默认根据步骤下标判断步骤的完成状态，当前步骤为进行中，当前步骤之前的步骤为已完成，当前步骤之后的步骤为未开始。如果每个步骤没有设置 value，current 值为步骤长度则表示所有步骤已完成。如果每个步骤设置了自定义 value，则 current = 'FINISH' 表示所有状态完成。支持语法糖 `v-model` | N
defaultCurrent | String / Number | undefined | 当前步骤，即整个步骤条进度。默认根据步骤下标判断步骤的完成状态，当前步骤为进行中，当前步骤之前的步骤为已完成，当前步骤之后的步骤为未开始。如果每个步骤没有设置 value，current 值为步骤长度则表示所有步骤已完成。如果每个步骤设置了自定义 value，则 current = 'FINISH' 表示所有状态完成。非受控属性 | N
direction | String | horizontal | 已废弃。步骤条方向，有两种：横向和纵向。可选项：horizontal/vertical | N
current | String / Number | - | 当前步骤，即整个步骤条进度。默认根据步骤下标判断步骤的完成状态，当前步骤为进行中，当前步骤之前的步骤为已完成，当前步骤之后的步骤为未开始。如果每个步骤没有设置 value，current 值为步骤长度则表示所有步骤已完成。如果每个步骤设置了自定义 value，则 current = 'FINISH' 表示所有状态完成。支持语法糖 `v-model` | N
defaultCurrent | String / Number | - | 当前步骤，即整个步骤条进度。默认根据步骤下标判断步骤的完成状态，当前步骤为进行中，当前步骤之前的步骤为已完成，当前步骤之后的步骤为未开始。如果每个步骤没有设置 value，current 值为步骤长度则表示所有步骤已完成。如果每个步骤设置了自定义 value，则 current = 'FINISH' 表示所有状态完成。非受控属性 | N
layout | String | horizontal | 步骤条方向，有两种：横向和纵向。可选项：horizontal/vertical | N
options | Array | - | 步骤条数据列表（作用和 StepItem 效果一样）。TS 类型：`Array<TdStepItemProps>` | N
readonly | Boolean | false | 是否只读 | N
sequence | String | positive | 步骤条顺序，纵向步骤有效（direction = horizontal）。可选项：positive/reverse | N
readonly | Boolean | false | 只读状态 | N
separator | String | line | 步骤条分割符。可选项：line/dashed/arrow | N
sequence | String | positive | 步骤条顺序。可选项：positive/reverse | N
theme | String | default | 步骤条风格。可选项：default/dot | N
onChange | Function | | TS 类型：`(current: string | number, previous: string | number, context?: { e?: MouseEvent }) => void`<br/>当前步骤发生变化时触发 | N

Expand Down
4 changes: 2 additions & 2 deletions examples/steps/usage/index.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
<template>
<base-usage :code="usageCode" :config-list="configList" :panel-list="panelList" @PanelChange="onPanelChange">
<template #steps="{ configProps }">
<t-steps :current="1" v-bind="configProps">
<t-steps :defaultCurrent="1" v-bind="configProps">
<t-step-item title="步骤1" content="提示文字" />
<t-step-item title="步骤2" content="提示文字" />
<t-step-item title="步骤3" content="提示文字" />
Expand All @@ -21,7 +21,7 @@ const panelList = [{ label: 'steps', value: 'steps' }];

const usageCodeMap = {
steps:
'\n <t-steps :current="1" v-bind="configProps">\n <t-step-item title="步骤1" content="提示文字" />\n <t-step-item title="步骤2" content="提示文字" />\n <t-step-item title="步骤3" content="提示文字" />\n </t-steps>\n ',
'\n <t-steps :defaultCurrent="1" v-bind="configProps">\n <t-step-item title="步骤1" content="提示文字" />\n <t-step-item title="步骤2" content="提示文字" />\n <t-step-item title="步骤3" content="提示文字" />\n </t-steps>\n ',
};
const usageCode = ref(`<template>${usageCodeMap[panelList[0].value].trim()}</template>`);

Expand Down
19 changes: 19 additions & 0 deletions examples/steps/usage/props.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,25 @@
"defaultValue": false,
"options": []
},
{
"name": "separator",
"type": "enum",
"defaultValue": "line",
"options": [
{
"label": "line",
"value": "line"
},
{
"label": "dashed",
"value": "dashed"
},
{
"label": "arrow",
"value": "arrow"
}
]
},
{
"name": "sequence",
"type": "enum",
Expand Down
2 changes: 1 addition & 1 deletion script/generate-usage/config.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -132,7 +132,7 @@ module.exports = {
panelStr: `const panelList = [{label: 'steps', value: 'steps'}];`,
render: {
steps: `
<t-steps :current="1" v-bind="configProps">
<t-steps :defaultCurrent="1" v-bind="configProps">
<t-step-item title="步骤1" content="提示文字" />
<t-step-item title="步骤2" content="提示文字" />
<t-step-item title="步骤3" content="提示文字" />
Expand Down
2 changes: 1 addition & 1 deletion src/_common
Submodule _common updated 7 files
+6 −0 docs/web/api/tabs.md
+35 −6 style/mobile/components/slider/_index.less
+4 −3 style/mobile/components/slider/_var.less
+0 −5 style/web/components/steps/_docs.less
+26 −1 style/web/components/steps/_index.less
+195 −48 style/web/components/steps/_mixin.less
+2 −2 style/web/components/steps/_var.less
24 changes: 14 additions & 10 deletions src/steps/props.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,6 @@

/**
* 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC
* updated at 2021-12-25 10:38:48
* */

import { TdStepsProps } from './type';
Expand All @@ -17,32 +16,36 @@ export default {
defaultCurrent: {
type: [String, Number] as PropType<TdStepsProps['defaultCurrent']>,
},
/** 已废弃。步骤条方向，有两种：横向和纵向 */
direction: {
type: String as PropType<TdStepsProps['direction']>,
validator(val: TdStepsProps['direction']): boolean {
return ['horizontal', 'vertical'].includes(val);
},
},
/** 步骤条方向，有两种：横向和纵向 */
layout: {
type: String as PropType<TdStepsProps['layout']>,
default: 'horizontal' as TdStepsProps['layout'],
validator(val: TdStepsProps['layout']): boolean {
if (!val) return true;
return ['horizontal', 'vertical'].includes(val);
},
},
/** 步骤条数据列表（作用和 StepItem 效果一样） */
options: {
type: Array as PropType<TdStepsProps['options']>,
},
/** 是否只读 */
/** 只读状态 */
readonly: Boolean,
/** 步骤条顺序，纵向步骤有效（direction = horizontal） */
/** 步骤条分割符 */
separator: {
type: String as PropType<TdStepsProps['separator']>,
default: 'line' as TdStepsProps['separator'],
validator(val: TdStepsProps['separator']): boolean {
if (!val) return true;
return ['line', 'dashed', 'arrow'].includes(val);
},
},
/** 步骤条顺序 */
sequence: {
type: String as PropType<TdStepsProps['sequence']>,
default: 'positive' as TdStepsProps['sequence'],
validator(val: TdStepsProps['sequence']): boolean {
if (!val) return true;
return ['positive', 'reverse'].includes(val);
},
},
Expand All @@ -51,6 +54,7 @@ export default {
type: String as PropType<TdStepsProps['theme']>,
default: 'default' as TdStepsProps['theme'],
validator(val: TdStepsProps['theme']): boolean {
if (!val) return true;
return ['default', 'dot'].includes(val);
},
},
Expand Down
2 changes: 1 addition & 1 deletion src/steps/step-item-props.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,6 @@

/**
* 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC
* updated at 2021-12-12 16:59:59
* */

import { TdStepItemProps } from '../steps/type';
Expand Down Expand Up @@ -32,6 +31,7 @@ export default {
type: String as PropType<TdStepItemProps['status']>,
default: 'default' as TdStepItemProps['status'],
validator(val: TdStepItemProps['status']): boolean {
if (!val) return true;
return ['default', 'process', 'finish', 'error'].includes(val);
},
},
Expand Down
13 changes: 2 additions & 11 deletions src/steps/step-item.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,7 @@ export default mixins(getConfigReceiverMixins<StepItemType, StepsConfig>('steps'
name: 'TStepItem',
props: {
...props,
index: Number,
},
components: {
CheckIcon,
Expand All @@ -28,11 +29,6 @@ export default mixins(getConfigReceiverMixins<StepItemType, StepsConfig>('steps'
inject: {
steps: { default: undefined },
},
data() {
return {
index: -1,
};
},
computed: {
current(): string | number {
return this.steps && this.steps.current;
Expand All @@ -47,12 +43,6 @@ export default mixins(getConfigReceiverMixins<StepItemType, StepsConfig>('steps'
return this.status !== 'process' && !this.steps?.readonly;
},
},
mounted() {
this.steps.addItem(this);
},
destroyed() {
this.steps.removeItem(this);
},
methods: {
renderIcon() {
let defaultIcon;
Expand All @@ -79,6 +69,7 @@ export default mixins(getConfigReceiverMixins<StepItemType, StepsConfig>('steps'
return renderTNodeJSX(this, 'icon', defaultIcon);
},
onStepClick(e: MouseEvent) {
if (!this.canClick) return;
const val = this.value === undefined ? this.index : this.value;
this.steps.handleChange(val, this.current, e);
},
Expand Down
37 changes: 15 additions & 22 deletions src/steps/steps.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,6 @@ export default mixins(getConfigReceiverMixins('steps')).extend({
props: { ...props },
data() {
return {
stepChildren: [],
indexMap: {},
};
},
Expand All @@ -41,33 +40,31 @@ export default mixins(getConfigReceiverMixins('steps')).extend({
},
computed: {
baseClass(): ClassName {
if (this.direction) {
console.warn('TDesign Steps Warn: `direction` is going to be deprecated. please use `layout` instead. ');
}
const layout = this.layout || this.direction || 'horizontal';
return [
name,
`${name}--${layout}`,
`${name}--${this.layout}`,
`${name}--${this.sequence}`,
`${name}--${this.handleTheme()}-anchor`,
{
[`${name}--${this.sequence}`]: layout === 'vertical',
},
`${name}--${this.separator}-separator`,
];
},
},
render() {
const nodes = this.$scopedSlots?.default && this.$scopedSlots.default(null);
const options = this.getOptions();
const content = options.map((item, index) => {
const stepIndex = this.sequence === 'reverse' ? options.length - index - 1 : index;
const propsData = {
...item,
index: stepIndex,
status: this.handleStatus(item, index),
};

const stepItem = (
<t-step-item
props={{
...item,
index: stepIndex,
status: this.handleStatus(item, index),
}}
key={item.value || index}
Expand All @@ -91,7 +88,7 @@ export default mixins(getConfigReceiverMixins('steps')).extend({
const nodes = this.$scopedSlots?.default && this.$scopedSlots.default(null);
let options: Array<TdStepItemProps>;
if (this.options && this.options.length) {
options = this.options;
options = this.sequence === 'reverse' ? this.options.reverse() : this.options;
} else {
options = this.getOptionListBySlots(nodes);
}
Expand All @@ -101,7 +98,8 @@ export default mixins(getConfigReceiverMixins('steps')).extend({
const arr: Array<TdStepItemProps> = [];
nodes?.forEach((node) => {
const option = node?.componentOptions?.propsData;
option && arr.push(option);
if (!option) return;
this.sequence === 'reverse' ? arr.unshift(option) : arr.push(option);
});
return arr;
},
Expand All @@ -120,29 +118,24 @@ export default mixins(getConfigReceiverMixins('steps')).extend({
if (item.status && item.status !== 'default') return item.status;
if (this.current === 'FINISH') return 'finish';
// value 不存在时，使用 index 进行区分每一个步骤
if (item.value === undefined && index < this.current) return 'finish';
if (item.value === undefined) {
if (this.sequence === 'positive' && index < this.current) return 'finish';
if (this.sequence === 'reverse' && index > this.current) return 'finish';
}
// value 存在，找匹配位置
if (item.value !== undefined) {
const matchIndex = this.indexMap[this.current];
if (matchIndex === undefined) {
console.warn('TDesign Steps Warn: The current `value` is not exist.');
return 'default';
}
if (index < matchIndex) return 'finish';
if (this.sequence === 'positive' && index < matchIndex) return 'finish';
if (this.sequence === 'reverse' && index > matchIndex) return 'finish';
}
const key = item.value === undefined ? index : item.value;
if (key === this.current) return 'process';
return 'default';
},
addItem(item: InstanceType<typeof TStepItem>) {
const index = this.stepChildren.length;
// eslint-disable-next-line
item.index = index;
this.stepChildren.push(item);
},
removeItem(item: InstanceType<typeof TStepItem>) {
this.stepChildren = this.stepChildren.filter((t) => t !== item);
},
handleChange(cur: TdStepsProps['current'], prev: TdStepsProps['current'], e: MouseEvent) {
emitEvent<Parameters<TdStepsProps['onChange']>>(this, 'change', cur, prev, { e });
},
Expand Down
16 changes: 7 additions & 9 deletions src/steps/type.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,6 @@

/**
* 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC
* updated at 2021-12-25 10:38:48
* */

import { TNode } from '../common';
Expand All @@ -16,12 +15,6 @@ export interface TdStepsProps {
* 当前步骤，即整个步骤条进度。默认根据步骤下标判断步骤的完成状态，当前步骤为进行中，当前步骤之前的步骤为已完成，当前步骤之后的步骤为未开始。如果每个步骤没有设置 value，current 值为步骤长度则表示所有步骤已完成。如果每个步骤设置了自定义 value，则 current = 'FINISH' 表示所有状态完成，非受控属性
*/
defaultCurrent?: string | number;
/**
* 步骤条方向，有两种：横向和纵向
* @default horizontal
* @deprecated
*/
direction?: 'horizontal' | 'vertical';
/**
* 步骤条方向，有两种：横向和纵向
* @default horizontal
Expand All @@ -32,12 +25,17 @@ export interface TdStepsProps {
*/
options?: Array<TdStepItemProps>;
/**
* 是否只读
* 只读状态
* @default false
*/
readonly?: boolean;
/**
* 步骤条顺序，纵向步骤有效（direction = horizontal）
* 步骤条分割符
* @default line
*/
separator?: 'line' | 'dashed' | 'arrow';
/**
* 步骤条顺序
* @default positive
*/
sequence?: 'positive' | 'reverse';
Expand Down
Loading

0 comments on commit 0addc7d

Please sign in to comment.