From 8f4e8dc1ae5f38cd7da3313bcfb42b3fe3fbaa5d Mon Sep 17 00:00:00 2001 From: Xc <124118265@qq.com> Date: Fri, 7 Apr 2023 14:39:36 +0800 Subject: [PATCH] docs(components): [steps] (#11854) * Update steps docs with new syntax. --- docs/en-US/component/steps.md | 48 ++++++++++++++------------ packages/components/steps/src/item.ts | 12 +++++++ packages/components/steps/src/steps.ts | 21 +++++++++++ 3 files changed, 59 insertions(+), 22 deletions(-) diff --git a/docs/en-US/component/steps.md b/docs/en-US/component/steps.md index 34cc4f77e3..fbce512b8b 100644 --- a/docs/en-US/component/steps.md +++ b/docs/en-US/component/steps.md @@ -77,34 +77,38 @@ steps/simple ::: -## Steps Attributes +## Steps API -| Name | Description | Type | Accepted Values | Default | -| -------------- | ----------------------------------------------------------------------------- | --------------- | ----------------------------------------- | ---------- | -| space | the spacing of each step, will be responsive if omitted. Supports percentage. | number / string | — | — | -| direction | display direction | string | vertical/horizontal | horizontal | -| active | current activation step | number | — | 0 | -| process-status | status of current step | string | wait / process / finish / error / success | process | -| finish-status | status of end step | string | wait / process / finish / error / success | finish | -| align-center | center title and description | boolean | — | false | -| simple | whether to apply simple theme | boolean | - | false | +### Steps Attributes -## Steps Slots +| Name | Description | Type | Default | +| -------------- | ----------------------------------------------------------------------------- | ---------------------------------------------------------------- | ---------- | +| space | the spacing of each step, will be responsive if omitted. Supports percentage. | ^[number] / ^[string] | '' | +| direction | display direction | ^[enum]`'vertical' \| 'horizontal'` | horizontal | +| active | current activation step | ^[number] | 0 | +| process-status | status of current step | ^[enum]`'wait' \| 'process' \| 'finish' \| 'error' \| 'success'` | process | +| finish-status | status of end step | ^[enum]`'wait' \| 'process' \| 'finish' \| 'error' \| 'success'` | finish | +| align-center | center title and description | ^[boolean] | — | +| simple | whether to apply simple theme | ^[boolean] | — | -| Name | Description | Subtags | -| ---- | ------------------------- | ------- | -| - | customize default content | Step | +### Steps Slots -## Step Attributes +| Name | Description | Subtags | +| ------- | ------------------------- | ------- | +| default | customize default content | Step | -| Name | Description | Type | Accepted Values | Default | -| ----------- | ------------------------------------------------------------------------ | --------------------- | ----------------------------------------- | ------- | -| title | step title | string | — | — | -| description | step description | string | — | — | -| icon | step custom icon. Icons can be passed via named slot as well | `string \| Component` | — | — | -| status | current status. It will be automatically set by Steps if not configured. | string | wait / process / finish / error / success | — | +## Step API -## Step Slots +### Step Attributes + +| Name | Description | Type | Default | +| ----------- | ------------------------------------------------------------------------ | ---------------------------------------------------------------------- | ------- | +| title | step title | ^[string] | '' | +| description | step description | ^[string] | '' | +| icon | step custom icon. Icons can be passed via named slot as well | ^[string] / ^[Component] | — | +| status | current status. It will be automatically set by Steps if not configured. | ^[enum]`'' \| 'wait' \| 'process' \| 'finish' \| 'error' \| 'success'` | '' | + +### Step Slots | Name | Description | | ----------- | ---------------- | diff --git a/packages/components/steps/src/item.ts b/packages/components/steps/src/item.ts index 8d78a64f81..deb144f5f2 100644 --- a/packages/components/steps/src/item.ts +++ b/packages/components/steps/src/item.ts @@ -3,17 +3,29 @@ import type Step from './item.vue' import type { ExtractPropTypes } from 'vue' export const stepProps = buildProps({ + /** + * @description step title + */ title: { type: String, default: '', }, + /** + * @description step custom icon. Icons can be passed via named slot as well + */ icon: { type: iconPropType, }, + /** + * @description step description + */ description: { type: String, default: '', }, + /** + * @description current status. It will be automatically set by Steps if not configured. + */ status: { type: String, values: ['', 'wait', 'process', 'finish', 'error', 'success'], diff --git a/packages/components/steps/src/steps.ts b/packages/components/steps/src/steps.ts index 8facf9202c..72c461e029 100644 --- a/packages/components/steps/src/steps.ts +++ b/packages/components/steps/src/steps.ts @@ -4,30 +4,51 @@ import type Steps from './steps.vue' import type { ExtractPropTypes } from 'vue' export const stepsProps = buildProps({ + /** + * @description the spacing of each step, will be responsive if omitted. Supports percentage. + */ space: { type: [Number, String], default: '', }, + /** + * @description current activation step + */ active: { type: Number, default: 0, }, + /** + * @description display direction + */ direction: { type: String, default: 'horizontal', values: ['horizontal', 'vertical'], }, + /** + * @description center title and description + */ alignCenter: { type: Boolean, }, + /** + * @description whether to apply simple theme + */ simple: { type: Boolean, }, + /** + * @description status of end step + */ finishStatus: { type: String, values: ['wait', 'process', 'finish', 'error', 'success'], default: 'finish', }, + /** + * @description status of current step + */ processStatus: { type: String, values: ['wait', 'process', 'finish', 'error', 'success'],