refactor(components): [alert] add namespace & instance type (#5459)

packages/components/alert/src/alert.ts

@@ -1,8 +1,9 @@
 import { TypeComponentsMap } from '@element-plus/utils/icon'
 import { buildProps, keyOf } from '@element-plus/utils/props'
 import type { ExtractPropTypes } from 'vue'
+import type Alert from './alert.vue'
 
-export type AlertEffect = 'light' | 'dark'
+export const alertEffects = ['light', 'dark'] as const
 
 export const alertProps = buildProps({
   title: {
@@ -30,7 +31,7 @@ export const alertProps = buildProps({
   center: Boolean,
   effect: {
     type: String,
-    values: ['light', 'dark'],
+    values: alertEffects,
     default: 'light',
   },
 } as const)
@@ -40,3 +41,5 @@ export const alertEmits = {
   close: (evt: MouseEvent) => evt instanceof MouseEvent,
 }
 export type AlertEmits = typeof alertEmits
+
+export type AlertInstance = InstanceType<typeof Alert>

packages/components/alert/src/alert.vue

@@ -2,26 +2,23 @@
   <transition name="el-alert-fade">
     <div
       v-show="visible"
-      class="el-alert"
-      :class="[typeClass, center ? 'is-center' : '', 'is-' + effect]"
+      :class="[ns.b(), ns.m(type), center ? 'is-center' : '', `is-${effect}`]"
       role="alert"
     >
       <el-icon
         v-if="showIcon && iconComponent"
-        class="el-alert__icon"
-        :class="isBigIcon"
+        :class="[ns.e('icon'), isBigIcon]"
       >
         <component :is="iconComponent" />
       </el-icon>
-      <div class="el-alert__content">
+      <div :class="ns.e('content')">
         <span
           v-if="title || $slots.title"
-          class="el-alert__title"
-          :class="[isBoldTitle]"
+          :class="[ns.e('title'), isBoldTitle]"
         >
           <slot name="title">{{ title }}</slot>
         </span>
-        <p v-if="$slots.default || description" class="el-alert__description">
+        <p v-if="$slots.default || description" :class="ns.e('description')">
           <slot>
             {{ description }}
           </slot>
@@ -29,12 +26,12 @@
         <template v-if="closable">
           <div
             v-if="closeText"
-            class="el-alert__closebtn is-customed"
+            :class="[ns.e('closebtn'), 'is-customed']"
             @click="close"
           >
             {{ closeText }}
           </div>
-          <el-icon v-else class="el-alert__closebtn" @click="close">
+          <el-icon v-else :class="ns.e('closebtn')" @click="close">
             <close />
           </el-icon>
         </template>
@@ -46,6 +43,7 @@
 import { defineComponent, computed, ref } from 'vue'
 import { ElIcon } from '@element-plus/components/icon'
 import { TypeComponents, TypeComponentsMap } from '@element-plus/utils/icon'
+import { useNamespace } from '@element-plus/hooks'
 import { alertProps, alertEmits } from './alert'
 
 export default defineComponent({
@@ -60,11 +58,12 @@ export default defineComponent({
   emits: alertEmits,
 
   setup(props, { emit, slots }) {
+    const ns = useNamespace('alert')
+
     // state
     const visible = ref(true)
 
     // computed
-    const typeClass = computed(() => `el-alert--${props.type}`)
     const iconComponent = computed(
       () => TypeComponentsMap[props.type] || TypeComponentsMap['info']
     )
@@ -82,8 +81,8 @@ export default defineComponent({
     }
 
     return {
+      ns,
       visible,
-      typeClass,
       iconComponent,
       isBigIcon,
       isBoldTitle,