refactor(components): refactor result

packages/components/result/__tests__/result.spec.ts

@@ -1,5 +1,5 @@
 import makeMount from '@element-plus/test-utils/make-mount'
-import Result from '../src/index.vue'
+import Result from '../src/result.vue'
 
 const AXIOM = 'Rem is the best girl'
 

packages/components/result/index.ts

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

packages/components/result/src/result.ts

@@ -0,0 +1,40 @@
+import { buildProps } from '@element-plus/utils/props'
+import {
+  WarningFilled,
+  CircleCheckFilled,
+  CircleCloseFilled,
+  InfoFilled,
+} from '@element-plus/icons'
+import type { Indexable } from '@element-plus/utils/types'
+import type { Component, ExtractPropTypes } from 'vue'
+
+export const IconMap: Indexable<string> = {
+  success: 'icon-success',
+  warning: 'icon-warning',
+  error: 'icon-error',
+  info: 'icon-info',
+}
+
+export const IconComponentMap: Indexable<Component> = {
+  [IconMap.success]: CircleCheckFilled,
+  [IconMap.warning]: WarningFilled,
+  [IconMap.error]: CircleCloseFilled,
+  [IconMap.info]: InfoFilled,
+}
+
+export const resultProps = buildProps({
+  title: {
+    type: String,
+    default: '',
+  },
+  subTitle: {
+    type: String,
+    default: '',
+  },
+  icon: {
+    type: String,
+    default: 'info',
+  },
+} as const)
+
+export type ResultProps = ExtractPropTypes<typeof resultProps>

packages/components/result/src/index.vue → packages/components/result/src/result.vue

@@ -26,46 +26,11 @@
 </template>
 <script lang="ts">
 import { computed, defineComponent } from 'vue'
-import {
-  WarningFilled,
-  CircleCheckFilled,
-  CircleCloseFilled,
-  InfoFilled,
-} from '@element-plus/icons'
-
-import type { Component } from 'vue'
-import type { Indexable } from '@element-plus/utils/types'
-
-const IconMap: Indexable<string> = {
-  success: 'icon-success',
-  warning: 'icon-warning',
-  error: 'icon-error',
-  info: 'icon-info',
-}
-
-const IconComponentMap: Indexable<Component> = {
-  [IconMap.success]: CircleCheckFilled,
-  [IconMap.warning]: WarningFilled,
-  [IconMap.error]: CircleCloseFilled,
-  [IconMap.info]: InfoFilled,
-}
+import { resultProps, IconComponentMap, IconMap } from './result'
 
 export default defineComponent({
   name: 'ElResult',
-  props: {
-    title: {
-      type: String,
-      default: '',
-    },
-    subTitle: {
-      type: String,
-      default: '',
-    },
-    icon: {
-      type: String,
-      default: 'info',
-    },
-  },
+  props: resultProps,
   setup(props) {
     const resultIcon = computed(() => {
       const icon = props.icon