refactor(components): refactor alert (#3365)

packages/components/alert/__tests__/alert.spec.ts

@@ -1,5 +1,5 @@
 import { mount } from '@vue/test-utils'
-import Alert from '../src/index.vue'
+import Alert from '../src/alert.vue'
 
 const AXIOM = 'Rem is the best girl'
 

packages/components/alert/index.ts

@@ -1,13 +1,8 @@
-import Alert from './src/index.vue'
+import { withInstall } from '@element-plus/utils/with-install'
 
-import type { App } from 'vue'
-import type { SFCWithInstall } from '@element-plus/utils/types'
+import Alert from './src/alert.vue'
 
-Alert.install = (app: App): void => {
-  app.component(Alert.name, Alert)
-}
+export const ElAlert = withInstall(Alert)
+export default ElAlert
 
-const _Alert = Alert as SFCWithInstall<typeof Alert>
-
-export default _Alert
-export const ElAlert = _Alert
+export * from './src/alert'

packages/components/alert/src/alert.ts

@@ -0,0 +1,48 @@
+import type { ExtractPropTypes } from 'vue'
+import { buildProp, keyOf } from '@element-plus/utils/props'
+
+export type AlertEffect = 'light' | 'dark'
+
+export const ALERT_TYPE_CLASSES_MAP = {
+  success: 'el-icon-success',
+  warning: 'el-icon-warning',
+  error: 'el-icon-error',
+  info: 'el-icon-info',
+} as const
+
+export const alertProps = {
+  title: {
+    type: String,
+    default: '',
+  },
+  description: {
+    type: String,
+    default: '',
+  },
+  type: buildProp({
+    type: String,
+    values: keyOf(ALERT_TYPE_CLASSES_MAP),
+    default: 'info',
+  }),
+  closable: {
+    type: Boolean,
+    default: true,
+  },
+  closeText: {
+    type: String,
+    default: '',
+  },
+  showIcon: Boolean,
+  center: Boolean,
+  effect: buildProp({
+    type: String,
+    values: ['light', 'dark'] as const,
+    default: 'light',
+  }),
+} as const
+export type AlertProps = ExtractPropTypes<typeof alertProps>
+
+export const alertEmits = {
+  close: (evt: MouseEvent) => evt instanceof MouseEvent,
+}
+export type AlertEmits = typeof alertEmits

packages/components/alert/src/alert.vue

@@ -41,68 +41,34 @@
 </template>
 <script lang="ts">
 import { defineComponent, computed, ref } from 'vue'
-
-import type { PropType } from 'vue'
-
-const TYPE_CLASSES_MAP = {
-  success: 'el-icon-success',
-  warning: 'el-icon-warning',
-  error: 'el-icon-error',
-}
+import { alertProps, alertEmits, ALERT_TYPE_CLASSES_MAP } from './alert'
 
 export default defineComponent({
   name: 'ElAlert',
-  props: {
-    title: {
-      type: String,
-      default: '',
-    },
-    description: {
-      type: String,
-      default: '',
-    },
-    type: {
-      type: String as PropType<'success' | 'info' | 'error' | 'warning'>,
-      default: 'info',
-    },
-    closable: {
-      type: Boolean,
-      default: true,
-    },
-    closeText: {
-      type: String,
-      default: '',
-    },
-    showIcon: Boolean,
-    center: Boolean,
-    effect: {
-      type: String,
-      default: 'light',
-      validator: (value: string): boolean =>
-        ['light', 'dark'].indexOf(value) > -1,
-    },
-  },
-  emits: ['close'],
-  setup(props, ctx) {
+
+  props: alertProps,
+  emits: alertEmits,
+
+  setup(props, { emit, slots }) {
     // state
     const visible = ref(true)
 
     // computed
     const typeClass = computed(() => `el-alert--${props.type}`)
     const iconClass = computed(
-      () => TYPE_CLASSES_MAP[props.type] || 'el-icon-info'
+      () => ALERT_TYPE_CLASSES_MAP[props.type] || ALERT_TYPE_CLASSES_MAP['info']
     )
     const isBigIcon = computed(() =>
-      props.description || ctx.slots.default ? 'is-big' : ''
+      props.description || slots.default ? 'is-big' : ''
     )
     const isBoldTitle = computed(() =>
-      props.description || ctx.slots.default ? 'is-bold' : ''
+      props.description || slots.default ? 'is-bold' : ''
     )
 
     // methods
-    const close = (evt) => {
+    const close = (evt: MouseEvent) => {
       visible.value = false
-      ctx.emit('close', evt)
+      emit('close', evt)
     }
 
     return {