From 8ccb7df2df0a74a33f808ff1287db79ee50aa7c5 Mon Sep 17 00:00:00 2001
From: Jeremy <15975785+jw-foss@users.noreply.github.com>
Date: Thu, 3 Nov 2022 20:38:41 +0800
Subject: [PATCH] docs(components): [alert] (#10373)

* docs(components): [alert]

* Update alert doc.
* Add comment for alert props.
* Reorganize code.
---
 docs/en-US/component/alert.md             | 26 +++++++++++------------
 packages/components/alert/index.ts        |  1 +
 packages/components/alert/src/alert.ts    | 21 +++++++++++++++---
 packages/components/alert/src/instance.ts |  3 +++
 4 files changed, 35 insertions(+), 16 deletions(-)
 create mode 100644 packages/components/alert/src/instance.ts

diff --git a/docs/en-US/component/alert.md b/docs/en-US/component/alert.md
index afa706d8df..1bb312e0b9 100644
--- a/docs/en-US/component/alert.md
+++ b/docs/en-US/component/alert.md
@@ -79,22 +79,22 @@ alert/icon-description
 
 ### Alert Attributes
 
-| Name          | Description                       | Type                                          | Default   | Required |
-| ------------- | --------------------------------- | --------------------------------------------- | --------- | -------- |
-| `title`       | alert title.                      | `string`                                      | —         | No       |
-| `type`        | alert type.                       | `'success' \| 'warning' \| 'info' \| 'error'` | `'info'`  | No       |
-| `description` | descriptive text.                 | `string`                                      | —         | No       |
-| `closable`    | whether closable or not.          | `boolean`                                     | `true`    | No       |
-| `center`      | whether to center the text.       | `boolean`                                     | `false`   | No       |
-| `close-text`  | customized close button text.     | `string`                                      | —         | No       |
-| `show-icon`   | whether a type icon is displayed. | `boolean`                                     | `false`   | No       |
-| `effect`      | theme style.                      | `'light' \| 'dark'`                           | `'light'` | No       |
+| Name          | Description                              | Type                                                           | Default   | Required |
+| ------------- | ---------------------------------------- | -------------------------------------------------------------- | --------- | -------- |
+| `title`       | alert title.                             | `string`                                                       | —         | No       |
+| `type`        | alert type.                              | <EnumType :values="['success', 'warning', 'info', 'error']" /> | `info`    | No       |
+| `description` | descriptive text.                        | `string`                                                       | —         | No       |
+| `closable`    | whether alert can be dismissed.          | `boolean`                                                      | `true`    | No       |
+| `center`      | whether content is placed in the center. | `boolean`                                                      | `false`   | No       |
+| `close-text`  | customized close button text.            | `string`                                                       | —         | No       |
+| `show-icon`   | whether a type icon is displayed.        | `boolean`                                                      | `false`   | No       |
+| `effect`      | theme style.                             | <EnumType :values="['light', 'dark']" />                       | `'light'` | No       |
 
 ### Alert Events
 
-| Name    | Description                   | Type                        |
-| ------- | ----------------------------- | --------------------------- |
-| `close` | trigger when alert is closed. | `(evt: MouseEvent) => void` |
+| Name    | Description                   | Type                                               |
+| ------- | ----------------------------- | -------------------------------------------------- |
+| `close` | trigger when alert is closed. | <FunctionType :params="[['evt', 'MouseEvent']]" /> |
 
 ### Alert Slots
 
diff --git a/packages/components/alert/index.ts b/packages/components/alert/index.ts
index 5aa4e5e7c7..ccaf6c99e6 100644
--- a/packages/components/alert/index.ts
+++ b/packages/components/alert/index.ts
@@ -6,3 +6,4 @@ export const ElAlert = withInstall(Alert)
 export default ElAlert
 
 export * from './src/alert'
+export type { AlertInstance } from './src/instance'
diff --git a/packages/components/alert/src/alert.ts b/packages/components/alert/src/alert.ts
index 756d4b83c7..4dc40c9f11 100644
--- a/packages/components/alert/src/alert.ts
+++ b/packages/components/alert/src/alert.ts
@@ -1,10 +1,12 @@
 import { TypeComponentsMap, buildProps, keysOf } from '@element-plus/utils'
 import type { ExtractPropTypes } from 'vue'
-import type Alert from './alert.vue'
 
 export const alertEffects = ['light', 'dark'] as const
 
 export const alertProps = buildProps({
+  /**
+   * @description alert title.
+   */
   title: {
     type: String,
     default: '',
@@ -13,20 +15,35 @@ export const alertProps = buildProps({
     type: String,
     default: '',
   },
+  /**
+   * @description alert type.
+   */
   type: {
     type: String,
     values: keysOf(TypeComponentsMap),
     default: 'info',
   },
+  /**
+   * @description whether alert can be dismissed.
+   */
   closable: {
     type: Boolean,
     default: true,
   },
+  /**
+   * @description text for replacing x button
+   */
   closeText: {
     type: String,
     default: '',
   },
+  /**
+   * @description whether show icon
+   */
   showIcon: Boolean,
+  /**
+   * @description should content be placed in center.
+   */
   center: Boolean,
   effect: {
     type: String,
@@ -40,5 +57,3 @@ export const alertEmits = {
   close: (evt: MouseEvent) => evt instanceof MouseEvent,
 }
 export type AlertEmits = typeof alertEmits
-
-export type AlertInstance = InstanceType<typeof Alert>
diff --git a/packages/components/alert/src/instance.ts b/packages/components/alert/src/instance.ts
new file mode 100644
index 0000000000..db574b066d
--- /dev/null
+++ b/packages/components/alert/src/instance.ts
@@ -0,0 +1,3 @@
+import type Alert from './alert.vue'
+
+export type AlertInstance = InstanceType<typeof Alert>