### Initial Project Setup Commands for tdesign-mobile-vue

Source: https://github.com/mpbfx/tdesign-mobile-vue/blob/develop/CONTRIBUTING.md

These commands guide the initial setup of the `tdesign-mobile-vue` project, including submodule initialization, dependency installation, and starting the local development server. Node.js version 18 is recommended for development.

```bash
npm run init
npm i
npm run start
```

--------------------------------

### tdesign-mobile-vue Guide Component API

Source: https://github.com/mpbfx/tdesign-mobile-vue/blob/develop/src/guide/guide.en-US.md

Documents the properties and events available for the `Guide` component in tdesign-mobile-vue, enabling interactive user guidance. Includes details on button configurations, counter display, step management, and event callbacks.

```APIDOC
Guide Component API:

Props:
- backButtonProps: Object (ButtonProps) | default: - | description: Props for the back button.
- counter: Slot / Function (TNode<{ current: number; total: number }>) | default: - | description: Custom content for the step counter. [see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts)
- current: Number | default: - | description: Current step index (v-model and v-model:current supported).
- defaultCurrent: Number | default: - | description: Initial current step index (uncontrolled property).
- finishButtonProps: Object (ButtonProps) | default: - | description: Props for the finish button.
- hideCounter: Boolean | default: false | description: Whether to hide the step counter.
- hideSkip: Boolean | default: false | description: Whether to hide the skip button.
- highlightPadding: Number | default: 8 | description: Padding around the highlighted element.
- mode: String | default: popover | options: popover/dialog | description: Display mode for the guide steps.
- nextButtonProps: Object (ButtonProps) | default: - | description: Props for the next button. [Button API Documents](./button?tab=api). [see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/guide/type.ts)
- showOverlay: Boolean | default: true | description: Whether to show the overlay.
- skipButtonProps: Object (ButtonProps) | default: - | description: Props for the skip button.
- steps: Array (Array<GuideStep>) | default: - | description: Array of guide step configurations.
- zIndex: Number | default: 999999 | description: Z-index of the guide component.
- onBack: Function ((context: { e: MouseEvent, current: number, total: number }) => void) | default: - | description: Callback function triggered when the back button is clicked.
- onChange: Function ((current: number, context?: { e: MouseEvent, total: number }) => void) | default: - | description: Callback function triggered when the current step changes.
- onFinish: Function ((context: { e: MouseEvent, current: number, total: number }) => void) | default: - | description: Callback function triggered when the guide finishes.
- onNextStepClick: Function ((context: { e: MouseEvent, next: number, current: number, total: number }) => void) | default: - | description: Callback function triggered when the next step button is clicked.
- onSkip: Function ((context: { e: MouseEvent, current: number, total: number }) => void) | default: - | description: Callback function triggered when the skip button is clicked.

Events:
- back: (context: { e: MouseEvent, current: number, total: number }) | description: Emitted when the back button is clicked.
- change: (current: number, context?: { e: MouseEvent, total: number }) | description: Emitted when the current step changes.
- finish: (context: { e: MouseEvent, current: number, total: number }) | description: Emitted when the guide finishes.
- next-step-click: (context: { e: MouseEvent, next: number, current: number, total: number }) | description: Emitted when the next step button is clicked.
- skip: (context: { e: MouseEvent, current: number, total: number }) | description: Emitted when the skip button is clicked.
```

--------------------------------

### Install TDesign Mobile Vue via unpkg CDN

Source: https://github.com/mpbfx/tdesign-mobile-vue/blob/develop/site/docs/getting-started.en-US.md

Includes TDesign Mobile Vue directly from the unpkg CDN for quick setup, demonstrating how to link CSS and JavaScript files and initialize the Vue application. Note: This method is not recommended for production due to potential version and CDN stability issues.

```html
<!-- vue 3 -->
<script src="https://unpkg.com/vue@next"></script>
<link rel="stylesheet" href="https://unpkg.com/tdesign-mobile-vue/dist/tdesign.min.css" />
<script src="https://unpkg.com/tdesign-mobile-vue/dist/tdesign.min.js"></script>
...
<script>
  Vue.createApp({}).use(TDesign).mount('#app');
</script>
```

--------------------------------

### tdesign-mobile-vue GuideStep Interface API

Source: https://github.com/mpbfx/tdesign-mobile-vue/blob/develop/src/guide/guide.en-US.md

Defines the structure and properties for individual steps within the `Guide` component. Each `GuideStep` object configures the content, target element, and behavior for a single step in the user guide.

```APIDOC
GuideStep Interface API:

Properties:
- backButtonProps: Object (ButtonProps) | default: - | description: Props for the back button specific to this step.
- body: String / Slot / Function (string | TNode) | default: - | description: Main content of the guide step. [see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts)
- content: Slot / Function (TNode) | default: - | description: Custom content for the guide step. [see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts)
- element: String / Function (AttachNode) | default: - | description: Required. The target element for this guide step. [see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts)
- highlightContent: Slot / Function (TNode) | default: - | description: Custom content for the highlighted area. [see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts)
- highlightPadding: Number | default: - | description: Padding around the highlighted element for this step.
- mode: String | default: - | options: popover/dialog | description: Display mode for this specific step.
- nextButtonProps: Object (ButtonProps) | default: - | description: Props for the next button specific to this step.
- offset: Array (Array<string | number>) | default: - | description: Offset for the popover position (this API is in discussing, do not use it).
- placement: String | default: 'top' | options: 'top'|'left'|'right'|'bottom'|'top-left'|'top-right'|'bottom-left'|'bottom-right'|'left-top'|'left-bottom'|'right-top'|'right-bottom'|'center' | description: Placement of the popover relative to the target element. [see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/guide/type.ts)
- popoverProps: Object (PopoverProps) | default: - | description: Popover component props if `mode = popover`. [Popover API Documents](./popover?tab=api). [see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/guide/type.ts)
- showOverlay: Boolean | default: true | description: Whether to show the overlay for this step.
- skipButtonProps: Object (ButtonProps) | default: - | description: Props for the skip button specific to this step.
- title: String / Slot / Function (string | TNode) | default: - | description: Title of the current step. [see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts)
```

--------------------------------

### TDesign Mobile Vue Guide Configuration

Source: https://github.com/mpbfx/tdesign-mobile-vue/blob/develop/src/config-provider/config-provider.en-US.md

Configuration options for the Guide component, including text labels for navigation actions like back, finish, next, and skip.

```APIDOC
GuideConfig:
  back: String
    description: -
    required: N
  finish: String
    description: -
    required: N
  next: String
    description: -
    required: N
  skip: String
    description: -
    required: N
```

--------------------------------

### TDesign Mobile Vue Guide Component API

Source: https://github.com/mpbfx/tdesign-mobile-vue/blob/develop/src/guide/guide.md

Defines the properties and events for the TDesign Mobile Vue Guide component, used for creating interactive user guides.

```APIDOC
Guide Component API:

Props:
- backButtonProps (Object): Transmits all properties of the 'Back' button. Example: `{ content: '返回', theme: 'default' }`. TS Type: `ButtonProps`. (Optional)
- counter (Slot / Function): Custom rendering for the counter part. TS Type: `TNode<{ current: number; total: number }>`. (Optional)
- current (Number): Current step, representing the progress of the entire guide. -1 hides it. Supports `v-model` or `v-model:current`. (Optional)
- defaultCurrent (Number): Current step, representing the progress of the entire guide. -1 hides it. Uncontrolled property. (Optional)
- finishButtonProps (Object): Transmits all properties of the 'Finish' button. Example: `{ content: '完成', theme: 'primary' }`. TS Type: `ButtonProps`. (Optional)
- hideCounter (Boolean): Default: `false`. Whether to hide the counter. (Optional)
- hideSkip (Boolean): Default: `false`. Whether to hide the skip button. (Optional)
- highlightPadding (Number): Default: `8`. Inner padding of the highlight box. (Optional)
- mode (String): Default: `popover`. Type of the guide box. Options: `popover`, `dialog`. (Optional)
- nextButtonProps (Object): Transmits all properties of the 'Next' button. Example: `{ content: '下一步', theme: 'primary' }`. TS Type: `ButtonProps`. (Optional)
- showOverlay (Boolean): Default: `true`. Whether to show the overlay. (Optional)
- skipButtonProps (Object): Transmits all properties of the 'Skip' button. Example: `{ content: '跳过', theme: 'default' }`. TS Type: `ButtonProps`. (Optional)
- steps (Array): Defines the content for each step, including highlighted nodes, relative positions, and specific text content. TS Type: `Array<GuideStep>`. (Optional)
- zIndex (Number): Default: `999999`. Z-index of the tooltip. (Optional)

Events:
- onBack (Function): Triggered when the back button is clicked. TS Type: `(context: { e: MouseEvent, current: number, total: number }) => void`.
- onChange (Function): Triggered when the current step changes. TS Type: `(current: number, context?: { e: MouseEvent, total: number }) => void`.
- onFinish (Function): Triggered when the finish button is clicked. TS Type: `(context: { e: MouseEvent, current: number, total: number }) => void`.
- onNextStepClick (Function): Triggered when the next step button is clicked. TS Type: `(context: { e: MouseEvent, next: number, current: number, total: number }) => void`.
- onSkip (Function): Triggered when the skip button is clicked. TS Type: `(context: { e: MouseEvent, current: number, total: number }) => void`.
```

--------------------------------

### TDesign Mobile Vue GuideStep Interface API

Source: https://github.com/mpbfx/tdesign-mobile-vue/blob/develop/src/guide/guide.md

Defines the structure for individual steps within the TDesign Mobile Vue Guide component, specifying content, highlighting, and positioning.

```APIDOC
GuideStep Interface API:

Props:
- backButtonProps (Object): Custom content for the back button of the current guide box. TS Type: `ButtonProps`. (Optional)
- body (String / Slot / Function): Content of the current step's tooltip. TS Type: `string | TNode`. (Optional)
- content (Slot / Function): Custom content for the guide pop-up. If present, all other properties except `placement`, `offset`, and `element` are invalid. TS Type: `TNode`. (Optional)
- element (String / Function): Required. The highlighted node. If String, treated as a selector. Example: `'#tdesign'` or `() => document.querySelector('#tdesign')`. TS Type: `AttachNode`. (Required)
- highlightContent (Slot / Function): Custom highlight box (only effective when `mode` is `popover`). TS Type: `TNode`. (Optional)
- highlightPadding (Number): Inner padding of the highlight box. (Optional)
- mode (String): Type of the guide box. Options: `popover`, `dialog`. (Optional)
- nextButtonProps (Object): Custom content for the next button of the current guide box. TS Type: `ButtonProps`. (Optional)
- offset (Array): [Under discussion] Offset relative to placement. Example: `[-10, 20]` or `['10px', '8px']`. TS Type: `Array<string | number>`. (Optional)
- placement (String): Default: `'top'`. Position of the guide box relative to the highlighted element (only effective when `mode` is `popover`). TS Type: `StepPopoverPlacement`. Options: `'top'|'left'|'right'|'bottom'|'top-left'|'top-right'|'bottom-left'|'bottom-right'|'left-top'|'left-bottom'|'right-top'|'right-bottom'|'center'`. (Optional)
- popoverProps (Object): Transmits all properties to the Popover component. Effective when `mode=popover`. TS Type: `PopoverProps`. (Optional)
- showOverlay (Boolean): Default: `true`. Whether to show the overlay. (Optional)
- skipButtonProps (Object): Custom content for the skip button of the current step's guide box. TS Type: `ButtonProps`. (Optional)
- title (String / Slot / Function): Title content of the current step. TS Type: `string | TNode`. (Optional)
```

--------------------------------

### Install TDesign Mobile Vue via npm

Source: https://github.com/mpbfx/tdesign-mobile-vue/blob/develop/site/docs/getting-started.en-US.md

Installs the TDesign Mobile Vue UI component library as a project dependency using the npm package manager.

```bash
npm i tdesign-mobile-vue
```

--------------------------------

### Install TDesign Mobile Vue via npm

Source: https://github.com/mpbfx/tdesign-mobile-vue/blob/develop/README.md

This command installs the TDesign Mobile Vue UI component library into your project using npm, a package manager for JavaScript. It adds the necessary dependencies to your `node_modules` directory, making the components available for use.

```bash
npm i tdesign-mobile-vue
```

--------------------------------

### Install TDesign Icons Vue Next Package

Source: https://github.com/mpbfx/tdesign-mobile-vue/blob/develop/src/icon/icon.en-US.md

Instructions for installing the `tdesign-icons-vue-next` npm package, which provides icons for TDesign Vue projects. This package is separate but can be used directly or via the `t-icon` component in `tdesign-vue-next`.

```bash
npm install tdesign-icons-vue-next
```

--------------------------------

### TDesign Mobile Vue GuideConfig Interface API

Source: https://github.com/mpbfx/tdesign-mobile-vue/blob/develop/src/config-provider/config-provider.md

Defines configuration options for the Guide component, including text customization for navigation buttons like back, finish, next, and skip.

```APIDOC
GuideConfig:
  back: String - 语言配置， “返回” 描述文本
  finish: String - 语言配置， “完成” 描述文本
  next: String - 语言配置， “下一步” 描述文本
  skip: String - 语言配置， “跳过” 描述文本
```

--------------------------------

### Install Plugins for Automatic On-Demand Import

Source: https://github.com/mpbfx/tdesign-mobile-vue/blob/develop/site/docs/getting-started.en-US.md

Installs development dependencies `unplugin-vue-components` and `unplugin-auto-import` required to enable automatic on-demand component importing in Vue projects.

```bash
npm install -D unplugin-vue-components unplugin-auto-import
```

--------------------------------

### tdesign-mobile-vue Project Directory Structure Overview

Source: https://github.com/mpbfx/tdesign-mobile-vue/blob/develop/CONTRIBUTING.md

This outlines the main directories within the `tdesign-mobile-vue` project, including scripts for building, site code, component source code, and test configurations. It provides a quick overview of the project's organization.

```text
├── scripts // 构建代码
├── site // 站点代码
├── src // 组件代码
     └─ componentA
          ├── demos // 组件示例文档
          └─  __test__ // 组件测试用例
└─ test // 测试配置文件
```

--------------------------------

### Initialize and Update tdesign-common Submodule

Source: https://github.com/mpbfx/tdesign-mobile-vue/blob/develop/CONTRIBUTING.md

These Git commands are used to initialize and update the `tdesign-common` submodule, which contains shared UI components and utility functions. It ensures the submodule points to the correct commit and is in a detached HEAD state.

```bash
git submodule init && git submodule update
```

--------------------------------

### Embed Demos in Component Markdown Documentation

Source: https://github.com/mpbfx/tdesign-mobile-vue/blob/develop/CONTRIBUTING.md

This Markdown syntax is used to embed interactive demos within component documentation files. The `{{ base }}` placeholder indicates the demo's location, and an optional description can be provided.

```markdown
{{ base }}
[demo 描述（可不填）]
```

--------------------------------

### TDesign Mobile Vue Steps Component API Reference

Source: https://github.com/mpbfx/tdesign-mobile-vue/blob/develop/src/steps/steps.md

Comprehensive API documentation for the `Steps` component, detailing its configurable properties (props) and emitted events. This component is used to display a series of steps in a process.

```APIDOC
Steps Props:
  current: String / Number
    - Description: Current step, indicating the progress of the entire step bar. By default, the completion status of a step is determined by its index: current step is in progress, preceding steps are completed, and subsequent steps are not started. If no value is set for each step, a current value equal to the number of steps means all steps are completed. If custom values are set for each step, current = 'FINISH' means all statuses are completed. Supports `v-model` or `v-model:current` syntax sugar.
    - Default: -
    - Required: N
  defaultCurrent: String / Number
    - Description: Current step, indicating the progress of the entire step bar. By default, the completion status of a step is determined by its index: current step is in progress, preceding steps are completed, and subsequent steps are not started. If no value is set for each step, a current value equal to the number of steps means all steps are completed. If custom values are set for each step, current = 'FINISH' means all statuses are completed. Uncontrolled property.
    - Default: -
    - Required: N
  currentStatus: String
    - Description: Controls the status of the step pointed to by `current`.
    - Options: default/process/finish/error
    - Default: process
    - Required: N
  layout: String
    - Description: Direction of the step bar: horizontal or vertical.
    - Options: horizontal/vertical
    - Default: horizontal
    - Required: N
  readonly: Boolean
    - Description: Read-only status.
    - Default: undefined
    - Required: N
  sequence: String
    - Description: Order of the step bar.
    - Options: positive/reverse
    - Default: positive
    - Required: N
  theme: String
    - Description: Style of the step bar.
    - Options: default/dot
    - Default: default
    - Required: N
  onChange: Function
    - Description: Triggered when the current step changes.
    - TS Type: `(current: string | number, previous: string | number, context?: { e?: MouseEvent }) => void`
    - Required: N

Steps Events:
  change:
    - Parameters: `(current: string | number, previous: string | number, context?: { e?: MouseEvent })`
    - Description: Triggered when the current step changes.
```

--------------------------------

### Bug Fixes for Dialog Component in tdesign-mobile-vue

Source: https://github.com/mpbfx/tdesign-mobile-vue/blob/develop/changelogs/CHANGELOG-0.x.md

This entry addresses a bug fix for the Dialog component. The issue where examples were invalid has been resolved, ensuring proper demonstration and usage.

```APIDOC
Dialog:
  - Bug Fix: Example invalidation
```

--------------------------------

### Import TDesign Mobile Vue Reset CSS

Source: https://github.com/mpbfx/tdesign-mobile-vue/blob/develop/site/docs/getting-started.en-US.md

This JavaScript snippet demonstrates how to explicitly import the `reset.css` stylesheet from the `tdesign-mobile-vue` distribution. This is necessary for projects that depend on the reset style, as it is no longer automatically included starting from version `0.17.0`.

```javascript
import 'tdesign-mobile-vue/dist/reset.css';
```

--------------------------------

### Get All Icon Names in TDesign Icons Vue Next

Source: https://github.com/mpbfx/tdesign-mobile-vue/blob/develop/src/icon/icon.md

This snippet demonstrates how to programmatically retrieve a list of all available icon names from the 'tdesign-icons-vue-next' package. This is useful for dynamic icon rendering or validation.

```JavaScript
import { manifest } from 'tdesign-icons-vue-next';
```

--------------------------------

### tdesign-mobile-vue StepItem Component API

Source: https://github.com/mpbfx/tdesign-mobile-vue/blob/develop/src/steps/steps.en-US.md

Documents the properties for individual `StepItem` components within a `Steps` component, including content, icon, status, and title configurations.

```APIDOC
StepItem Props:
  content: String / Slot / Function (default: '')
    - Description: Typescript：`string | TNode`.[see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts) (optional)
  icon: Boolean / Slot / Function (default: true)
    - Description: Typescript：`boolean | TNode`.[see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts) (optional)
  status: String (default: default)
    - Description: options: default/process/finish/error。Typescript：`StepStatus` `type StepStatus = 'default' | 'process' | 'finish' | 'error'`.[see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/steps/type.ts) (optional)
  title: String / Slot / Function (default: '')
    - Description: Typescript：`string | TNode`.[see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts) (optional)
  titleRight: String / Slot / Function (default: '')
    - Description: Typescript：`string | TNode`.[see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts) (optional)
```

--------------------------------

### TDesign Mobile Vue FormRule Validation Methods

Source: https://github.com/mpbfx/tdesign-mobile-vue/blob/develop/src/form/form.md

Defines the available validation rules for form fields in TDesign Mobile Vue, including type checks (boolean, date, email, number, url), length constraints (len, min, max), pattern matching, and custom validation functions. Each rule specifies its type, default value, and detailed description with examples and TypeScript definitions.

```APIDOC
FormRule:
  boolean:
    Type: Boolean
    Default: -
    Description: 内置校验方法，校验值类型是否为布尔类型，示例：`{ boolean: true, message: '数据类型必须是布尔类型' }`
  date:
    Type: Boolean / Object
    Default: -
    Description: 内置校验方法，校验值是否为日期格式，[参数文档](https://github.com/validatorjs/validator.js)，示例：`{ date: { delimiters: '-' }, message: '日期分隔线必须是短横线（-）' }`。TS 类型：`boolean | IsDateOptions` `interface IsDateOptions { format: string; strictMode: boolean; delimiters: string[] }`。[详细类型定义](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/form/type.ts)
  email:
    Type: Boolean / Object
    Default: -
    Description: 内置校验方法，校验值是否为邮件格式，[参数文档](https://github.com/validatorjs/validator.js)，示例：`{ email: { ignore_max_length: true }, message: '请输入正确的邮箱地址' }`。TS 类型：`boolean | IsEmailOptions` `import { IsEmailOptions } from 'validator/es/lib/isEmail'`。[详细类型定义](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/form/type.ts)
  enum:
    Type: Array
    Default: -
    Description: 内置校验方法，校验值是否属于枚举值中的值。示例：`{ enum: ['primary', 'info', 'warning'], message: '值只能是 primary/info/warning 中的一种' }`。TS 类型：`Array<string>`
  idcard:
    Type: Boolean
    Default: -
    Description: 内置校验方法，校验值是否为身份证号码，组件校验正则为 `/^(\\d{18,18}|\\d{15,15}|\\d{17,17}x)$/i`，示例：`{ idcard: true, message: '请输入正确的身份证号码' }`
  len:
    Type: Number / Boolean
    Default: -
    Description: 内置校验方法，校验值固定长度，如：len: 10 表示值的字符长度只能等于 10 ，中文表示 2 个字符，英文为 1 个字符。示例：`{ len: 10, message: '内容长度不对' }`。
如果希望字母和中文都是同样的长度，示例：`{ validator: (val) => val.length === 10, message: '内容文本长度只能是 10 个字' }`
  max:
    Type: Number / Boolean
    Default: -
    Description: 内置校验方法，校验值最大长度，如：max: 100 表示值最多不能超过 100 个字符，中文表示 2 个字符，英文为 1 个字符。示例：`{ max: 10, message: '内容超出' }`。
如果希望字母和中文都是同样的长度，示例：`{ validator: (val) => val.length <= 10, message: '内容文本长度不能超过 10 个字' }`
如果数据类型数字（Number），则自动变为数字大小的比对
  message:
    Type: String
    Default: -
    Description: 校验未通过时呈现的错误信息，值为空则不显示
  min:
    Type: Number / Boolean
    Default: -
    Description: 内置校验方法，校验值最小长度，如
```

--------------------------------

### tdesign-mobile-vue Steps Component API

Source: https://github.com/mpbfx/tdesign-mobile-vue/blob/develop/src/steps/steps.en-US.md

Documents the properties and events for the `Steps` component in tdesign-mobile-vue, including configurable attributes like current step, layout, and theme, as well as the change event.

```APIDOC
Steps Props:
  current: String / Number (default: -)
    - Description: `v-model` and `v-model:current` is supported (optional)
  defaultCurrent: String / Number (default: -)
    - Description: uncontrolled property (optional)
  currentStatus: String (default: process)
    - Description: options: default/process/finish/error (optional)
  layout: String (default: horizontal)
    - Description: options: horizontal/vertical (optional)
  readonly: Boolean (default: undefined)
    - Description: (optional)
  sequence: String (default: positive)
    - Description: options: positive/reverse (optional)
  theme: String (default: default)
    - Description: options: default/dot (optional)
  onChange: Function (default: )
    - Description: Typescript：`(current: string | number, previous: string | number, context?: { e?: MouseEvent }) => void` (optional)

Steps Events:
  change:
    - Parameters: `(current: string | number, previous: string | number, context?: { e?: MouseEvent })`
    - Description: -
```

--------------------------------

### Configure Component Routes in tdesign-mobile-vue

Source: https://github.com/mpbfx/tdesign-mobile-vue/blob/develop/CONTRIBUTING.md

This JavaScript snippet demonstrates how component routes are configured within the `tdesign-mobile-vue` project, typically found in `/site/docs.config.js`. Each component, like Button or Icon, is mapped to its corresponding Markdown documentation file.

```js
{
  title: '基础组件',
  type: 'component', // 组件文档
  children: [
    {
      title: 'Button 按钮',
      name: 'button',
      component: () => import(`tdesign-mobile-vue/button/button.md`),
    },
    {
      title: 'Icon 图标',
      name: 'icon',
      component: () => import(`tdesign-mobile-vue/icon/icon.md`),
    },
    ...
  ],
},
```

--------------------------------

### TDesign Mobile Vue StepItem Component API Reference

Source: https://github.com/mpbfx/tdesign-mobile-vue/blob/develop/src/steps/steps.md

Comprehensive API documentation for the `StepItem` component, detailing its configurable properties (props). This component represents an individual step within the `Steps` component.

```APIDOC
StepItem Props:
  content: String / Slot / Function
    - Description: Step description.
    - TS Type: `string | TNode`
    - Default: ''
    - Required: N
  icon: Boolean / Slot / Function
    - Description: Icon. Defaults to built-in icon, can be customized. Setting to `false` hides the icon. Priority is higher than icons defined by `status`.
    - TS Type: `boolean | TNode`
    - Default: true
    - Required: N
  status: String
    - Description: Status of the current step: default (not started), in progress, completed, error.
    - Options: default/process/finish/error
    - TS Type: `StepStatus` `type StepStatus = 'default' | 'process' | 'finish' | 'error'`
    - Default: default
    - Required: N
  title: String / Slot / Function
    - Description: Title.
    - TS Type: `string | TNode`
    - Default: ''
    - Required: N
  titleRight: String / Slot / Function
    - Description: Data on the right side of the title. Only supported when `layout = 'vertical'`.
    - TS Type: `string | TNode`
    - Default: ''
    - Required: N
```

--------------------------------

### Loading Plugin API ($loading)

Source: https://github.com/mpbfx/tdesign-mobile-vue/blob/develop/src/loading/loading.md

Details the `$loading` plugin for programmatic control of the Loading component, including its parameters and the structure of the returned instance for managing the loading state.

```APIDOC
LoadingPlugin:

this.$loading(options: boolean | TdLoadingProps)
  - Description: Programmatic control of the Loading component.
  - Parameters:
    - options: Required. Configuration options for the loading component.
      - Type: boolean | TdLoadingProps
  - Returns: LoadingInstance
    - Interface: { hide: () => void }
```

--------------------------------

### Drawer Component Instance Methods API Reference (TDesign Mobile Vue)

Source: https://github.com/mpbfx/tdesign-mobile-vue/blob/develop/src/drawer/drawer.en-US.md

Describes the methods available on a Drawer component instance, allowing programmatic control over its visibility and lifecycle. These methods can be called to show, hide, destroy, or update the drawer.

```APIDOC
DrawerInstance Methods:

destroy() -> - - -
hide() -> - - -
show() -> - - -
update(props: DrawerOptions) -> - - -
```

--------------------------------

### TDesign Mobile Vue BackTop Component API Reference

Source: https://github.com/mpbfx/tdesign-mobile-vue/blob/develop/src/back-top/back-top.en-US.md

Detailed API reference for the TDesign Mobile Vue BackTop component, including its configurable properties, emitted events, and available CSS variables for styling.

```APIDOC
BackTop Props:

name | type | default | description | required
-- | -- | -- | -- | --
container | Function | - | Typescript：`() => HTMLElement` | N
fixed | Boolean | true | - | N
icon | Boolean / Slot / Function | true | Typescript：`boolean | TNode`.[see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts) | N
target | Function | - | Typescript：`() => HTMLElement` | N
text | String | '' | - | N
theme | String | round | options: round/half-round/round-dark/half-round-dark | N
visibilityHeight | Number | 200 | - | N
onToTop | Function |  | Typescript：`() => void` | N

BackTop Events:

name | params | description
-- | -- | --
to-top | - | -

CSS Variables:

Name | Default Value | Description
-- | -- | --
--td-back-top-half-round-border-radius | @radius-round | -
--td-back-top-round-bg-color | @font-white-1 | -
--td-back-top-round-border-color | @component-border | -
--td-back-top-round-border-color | @gray-color-9 | -
--td-back-top-round-border-radius | @radius-circle | -
--td-back-top-round-color | @font-gray-1 | -
--td-back-top-round-dark-bg-color | @gray-color-14 | -
--td-back-top-round-dark-color | @font-white-1 | -
```

--------------------------------

### Popover Component API Reference

Source: https://github.com/mpbfx/tdesign-mobile-vue/blob/develop/src/popover/popover.en-US.md

Comprehensive API documentation for the Popover component, detailing its configurable properties (props), emitted events, and available CSS variables for styling in tdesign-mobile-vue.

```APIDOC
## API

### Popover Props

name | type | default | description | required
-- | -- | -- | -- | --
closeOnClickOutside | Boolean | true | - | N
content | String / Slot / Function | - | Typescript：`string \| TNode`.[see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts) | N
default | String / Slot / Function | - | Typescript：`string \| TNode`.[see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts) | N
placement | String | top | options: top/left/right/bottom/top-left/top-right/bottom-left/bottom-right/left-top/left-bottom/right-top/right-bottom | N
showArrow | Boolean | true | - | N
theme | String | dark | options: dark/light/brand/success/warning/error | N
triggerElement | String / Slot / Function | - | Typescript：`string \| TNode`.[see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts) | N
visible | Boolean | - | `v-model` and `v-model:visible` is supported | N
onVisibleChange | Function | | Typescript：`(visible: boolean) => void`

### Popover Events

name | params | description
-- | -- | --
visible-change | `(visible: boolean)` | -

### CSS Variables

The component provides the following CSS variables, which can be used to customize styles.
Name | Default Value | Description
-- | -- | --
--td-popover-padding | 12px | -
```

--------------------------------

### TDesign Mobile Vue DrawerInstance Methods

Source: https://github.com/mpbfx/tdesign-mobile-vue/blob/develop/src/drawer/drawer.md

Methods available on a Drawer instance for programmatic control over its lifecycle and visibility, allowing for dynamic manipulation of the drawer after it has been created.

```APIDOC
DrawerInstance:
  destroy():
    Parameters: -
    Returns: -
    Description: Destroys the drawer instance, removing it from the DOM.
  hide():
    Parameters: -
    Returns: -
    Description: Hides the drawer, making it invisible.
  show():
    Parameters: -
    Returns: -
    Description: Shows the drawer, making it visible.
  update(props: DrawerOptions):
    Parameters:
      props: DrawerOptions - The new properties to apply to the drawer.
    Returns: -
    Description: Updates the content and properties of the drawer instance.
```

--------------------------------

### Toast Component Options (ToastOptions)

Source: https://github.com/mpbfx/tdesign-mobile-vue/blob/develop/src/toast/toast.en-US.md

Defines additional options for configuring the `Toast` component, often used when programmatically creating toasts.

```APIDOC
ToastOptions:

- attach: String / Function (default: 'body')
  Description: Specifies the DOM element to which the toast should be attached. Typescript: `AttachNode`. See more TS definition: https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts
  Required: No

- className: String
  Description: Custom CSS class name for the toast.
  Required: No

- style: String / Object
  Description: Custom inline styles for the toast. Typescript: `string | Styles`. See more TS definition: https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts
  Required: No

- ToastProps: extends ToastProps
  Description: Inherits all properties from `ToastProps`.
  Required: No
```

--------------------------------

### BaseTable Component Instance Methods API

Source: https://github.com/mpbfx/tdesign-mobile-vue/blob/develop/src/table/table.en-US.md

Details the methods available on the BaseTable component instance for programmatic control.

```APIDOC
refreshTable(): void
  Description: required
```

--------------------------------

### API Documentation for Overlay Component

Source: https://github.com/mpbfx/tdesign-mobile-vue/blob/develop/changelogs/CHANGELOG-0.x.md

Documents the introduction of the new Overlay component in TDesign Mobile Vue.

```APIDOC
Overlay:
  Description: A new overlay component.
```

--------------------------------

### tdesign-mobile-vue Steps Component CSS Variables

Source: https://github.com/mpbfx/tdesign-mobile-vue/blob/develop/src/steps/steps.en-US.md

Lists the customizable CSS variables available for styling the `Steps` component and its `StepItem` children, allowing for fine-grained control over appearance.

```APIDOC
CSS Variables:
  --td-step-item-circle-font-size: 14px
    - Description: -
  --td-step-item-circle-size: 22px
    - Description: -
  --td-step-item-default-circle-bg: @bg-color-secondarycontainer
    - Description: -
  --td-step-item-default-circle-color: @font-gray-3
    - Description: -
  --td-step-item-default-dot-border-color: @component-border
    - Description: -
  --td-step-item-default-icon-color: @font-gray-3
    - Description: -
  --td-step-item-default-title-color: @font-gray-3
    - Description: -
  --td-step-item-description-color: @font-gray-3
    - Description: -
  --td-step-item-dot-size: 8px
    - Description: -
  --td-step-item-error-circle-bg: @error-color-1
    - Description: -
  --td-step-item-error-circle-color: @error-color
    - Description: -
  --td-step-item-error-dot-border-color: @error-color
    - Description: -
  --td-step-item-error-icon-color: @error-color
    - Description: -
  --td-step-item-error-title-color: @error-color
    - Description: -
  --td-step-item-finish-circle-bg: @brand-color-light
    - Description: -
  --td-step-item-finish-circle-color: @brand-color
    - Description: -
  --td-step-item-finish-dot-border-color: @brand-color
    - Description: -
  --td-step-item-finish-icon-color: @brand-color
    - Description: -
  --td-step-item-finish-line-color: @brand-color
    - Description: -
  --td-step-item-finish-title-color: @font-gray-1
    - Description: -
  --td-step-item-line-color: @component-border
    - Description: -
  --td-step-item-process-circle-bg: @brand-color
    - Description: -
  --td-step-item-process-circle-color: @font-white-1
    - Description: -
  --td-step-item-process-dot-border-color: @brand-color
    - Description: -
  --td-step-item-process-icon-color: @brand-color
    - Description: -
  --td-step-item-process-title-color: @brand-color
    - Description: -
```

--------------------------------

### TreeSelect Component API Reference

Source: https://github.com/mpbfx/tdesign-mobile-vue/blob/develop/src/tree-select/tree-select.en-US.md

Comprehensive API documentation for the TreeSelect component, detailing its configurable properties (props) and emitted events, including their types, defaults, and descriptions.

```APIDOC
TreeSelect Component API

Props:
  - customStyle:
      Type: String
      Default: -
      Description: Custom style for the component.
      Required: No
  - filterable:
      Type: Boolean
      Default: false
      Description: Whether the component is filterable.
      Required: No
  - height:
      Type: String / Number
      Default: 336
      Description: Height of the component.
      Required: No
  - keys:
      Type: Object
      Default: -
      Description: Alias field names in data. Typescript: TreeKeysType. [See more TS definition](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts).
      Required: No
  - multiple:
      Type: Boolean
      Default: false
      Description: Whether multiple selections are allowed.
      Required: No
  - options:
      Type: Array
      Default: []
      Description: Data options for the tree select. Typescript: Array<DataOption>.
      Required: No
  - value:
      Type: String / Number / Array
      Default: -
      Description: Current selected value. Supports v-model and v-model:value. Typescript: TreeSelectValue (type TreeSelectValue = string | number | Array<TreeSelectValue>). [See more TS definition](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/tree-select/type.ts).
      Required: No
  - defaultValue:
      Type: String / Number / Array
      Default: -
      Description: Uncontrolled property for initial value. Typescript: TreeSelectValue (type TreeSelectValue = string | number | Array<TreeSelectValue>). [See more TS definition](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/tree-select/type.ts).
      Required: No
  - onChange:
      Type: Function
      Default: -
      Description: Callback function triggered on value change. Typescript: (value: TreeSelectValue, level: TreeLevel) => void. [See more TS definition](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/tree-select/type.ts). Type TreeLevel = 0 | 1 | 2.
      Required: No

Events:
  - change:
      Parameters: (value: TreeSelectValue, level: TreeLevel)
      Description: Emitted when the selected value changes. [See more TS definition](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/tree-select/type.ts). Type TreeLevel = 0 | 1 | 2.
```