docs(components): [breadcrumb] (#10962)

* docs(components): [breadcrumb]

* Update doc file with new syntax.
* Move instances to a dedicated file for readabilities.

* chore: address PR comments

Co-authored-by: JeremyWuuuuu <15975785+JeremyWuuuuu@users.noreply.github.com>

docs/en-US/component/breadcrumb.md

@@ -23,28 +23,32 @@ breadcrumb/icon
 
 :::
 
-## Breadcrumb Attributes
+## Breadcrumb API
 
-| Name           | Description                      | Type                  | Accepted Values | Default |
-| -------------- | -------------------------------- | --------------------- | --------------- | ------- |
-| separator      | separator character              | string                | —               | /       |
-| separator-icon | icon component of icon separator | `string \| Component` | —               | -       |
+### Breadcrumb Attributes
 
-## Breadcrumb Slots
+| Name           | Description                      | Type                     | Default |
+| -------------- | -------------------------------- | ------------------------ | ------- |
+| separator      | separator character              | ^[string]                | /       |
+| separator-icon | icon component of icon separator | ^[string] / ^[Component] | -       |
+
+### Breadcrumb Slots
 
 | Name    | Description               | Subtags         |
-| ---- | ------------------------- | --------------- |
-| -    | customize default content | Breadcrumb Item |
+| ------- | ------------------------- | --------------- |
+| default | customize default content | Breadcrumb Item |
 
-## Breadcrumb Item Attributes
+## BreadcrumbItem API
 
-| Name    | Description                                               | Type          | Accepted Values | Default |
-| ------- | --------------------------------------------------------- | ------------- | --------------- | ------- |
-| to      | target route of the link, same as `to` of `vue-router`    | string/object | —               | —       |
-| replace | if `true`, the navigation will not leave a history record | boolean       | —               | false   |
+### BreadcrumbItem Attributes
 
-## Breadcrumb Item Slots
+| Name    | Description                                               | Type                                    | Default |
+| ------- | --------------------------------------------------------- | --------------------------------------- | ------- |
+| to      | target route of the link, same as `to` of `vue-router`    | ^[string] / ^[object]`RouteLocationRaw` | ''      |
+| replace | if `true`, the navigation will not leave a history record | ^[boolean]                              | false   |
+
+### BreadcrumbItem Slots
 
 | Name    | Description               |
-| ---- | ------------------------- |
-| —    | customize default content |
+| ------- | ------------------------- |
+| default | customize default content |

packages/components/breadcrumb/index.ts

@@ -11,3 +11,7 @@ export default ElBreadcrumb
 
 export * from './src/breadcrumb'
 export * from './src/breadcrumb-item'
+export type {
+  BreadcrumbInstance,
+  BreadcrumbItemInstance,
+} from './src/instances'

packages/components/breadcrumb/src/breadcrumb-item.ts

@@ -1,18 +1,21 @@
 import { buildProps, definePropType } from '@element-plus/utils'
 import type { ExtractPropTypes } from 'vue'
 import type { RouteLocationRaw } from 'vue-router'
-import type BreadcrumbItem from './breadcrumb-item.vue'
 
 export const breadcrumbItemProps = buildProps({
+  /**
+   * @description target route of the link, same as `to` of `vue-router`
+   */
   to: {
     type: definePropType<RouteLocationRaw>([String, Object]),
     default: '',
   },
+  /**
+   * @description if `true`, the navigation will not leave a history record
+   */
   replace: {
     type: Boolean,
     default: false,
   },
 } as const)
 export type BreadcrumbItemProps = ExtractPropTypes<typeof breadcrumbItemProps>
-
-export type BreadcrumbItemInstance = InstanceType<typeof BreadcrumbItem>

packages/components/breadcrumb/src/breadcrumb.ts

@@ -1,15 +1,19 @@
 import { buildProps, iconPropType } from '@element-plus/utils'
 import type { ExtractPropTypes } from 'vue'
-import type Breadcrumb from './breadcrumb.vue'
 
 export const breadcrumbProps = buildProps({
+  /**
+   * @description separator character
+   */
   separator: {
     type: String,
     default: '/',
   },
+  /**
+   * @description icon component of icon separator
+   */
   separatorIcon: {
     type: iconPropType,
   },
 } as const)
 export type BreadcrumbProps = ExtractPropTypes<typeof breadcrumbProps>
-export type BreadcrumbInstance = InstanceType<typeof Breadcrumb>

packages/components/breadcrumb/src/instances.ts

@@ -0,0 +1,5 @@
+import type Breadcrumb from './breadcrumb.vue'
+import type BreadcrumbItem from './breadcrumb-item.vue'
+
+export type BreadcrumbItemInstance = InstanceType<typeof BreadcrumbItem>
+export type BreadcrumbInstance = InstanceType<typeof Breadcrumb>