refactor(components): refactor popconfirm (#3490)

* refactor(components): refactor popconfirm

* fix(components): fix path

* chore: change name

* fix

packages/components/popconfirm/__test__/popconfirm.spec.ts

@@ -1,6 +1,6 @@
 import { h } from 'vue'
 import { mount } from '@vue/test-utils'
-import ElPopconfirm from '../src/index.vue'
+import ElPopconfirm from '../src/popconfirm.vue'
 
 const selector = '.el-popper'
 const _mount = (props: any = {}) =>

packages/components/popconfirm/index.ts

@@ -1,13 +1,8 @@
-import Popconfirm 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 Popconfirm from './src/popconfirm.vue'
 
-Popconfirm.install = (app: App): void => {
-  app.component(Popconfirm.name, Popconfirm)
-}
+export const ElPopconfirm = withInstall(Popconfirm)
+export default ElPopconfirm
 
-const _Popconfirm = Popconfirm as SFCWithInstall<typeof Popconfirm>
-
-export default _Popconfirm
-export const ElPopconfirm = _Popconfirm
+export * from './src/popconfirm'

packages/components/popconfirm/src/popconfirm.ts

@@ -0,0 +1,42 @@
+import { buttonProps } from '@element-plus/components/button'
+
+import type { ExtractPropTypes } from 'vue'
+
+export const popconfirmProps = {
+  title: {
+    type: String,
+  },
+  confirmButtonText: {
+    type: String,
+  },
+  cancelButtonText: {
+    type: String,
+  },
+  confirmButtonType: {
+    ...buttonProps.type,
+    default: 'primary',
+  },
+  cancelButtonType: {
+    ...buttonProps.type,
+    default: 'text',
+  },
+  icon: {
+    type: String,
+    default: 'el-icon-question',
+  },
+  iconColor: {
+    type: String,
+    default: '#f90',
+  },
+  hideIcon: {
+    type: Boolean,
+    default: false,
+  },
+} as const
+export type PopconfirmProps = ExtractPropTypes<typeof popconfirmProps>
+
+export const popconfirmEmits = {
+  confirm: () => true,
+  cancel: () => true,
+}
+export type PopconfirmEmits = typeof popconfirmEmits

packages/components/popconfirm/src/popconfirm.vue

@@ -19,10 +19,10 @@
       </p>
       <div class="el-popconfirm__action">
         <el-button size="mini" :type="cancelButtonType" @click="cancel">
-          {{ cancelButtonText_ }}
+          {{ _cancelButtonText }}
         </el-button>
         <el-button size="mini" :type="confirmButtonType" @click="confirm">
-          {{ confirmButtonText_ }}
+          {{ _confirmButtonText }}
         </el-button>
       </div>
     </div>
@@ -37,9 +37,7 @@ import { defineComponent, ref, computed } from 'vue'
 import ElButton from '@element-plus/components/button'
 import ElPopper, { Effect } from '@element-plus/components/popper'
 import { useLocaleInject } from '@element-plus/hooks'
-
-import type { PropType } from 'vue'
-import type { ButtonType } from '@element-plus/components/button/src/types'
+import { popconfirmProps, popconfirmEmits } from './popconfirm'
 
 export default defineComponent({
   name: 'ElPopconfirm',
@@ -49,38 +47,9 @@ export default defineComponent({
     ElPopper,
   },
 
-  props: {
-    title: {
-      type: String,
-    },
-    confirmButtonText: {
-      type: String,
-    },
-    cancelButtonText: {
-      type: String,
-    },
-    confirmButtonType: {
-      type: String as PropType<ButtonType>,
-      default: 'primary' as ButtonType,
-    },
-    cancelButtonType: {
-      type: String as PropType<ButtonType>,
-      default: 'text' as ButtonType,
-    },
-    icon: {
-      type: String,
-      default: 'el-icon-question',
-    },
-    iconColor: {
-      type: String,
-      default: '#f90',
-    },
-    hideIcon: {
-      type: Boolean,
-      default: false,
-    },
-  },
-  emits: ['confirm', 'cancel'],
+  props: popconfirmProps,
+  emits: popconfirmEmits,
+
   setup(props, { emit }) {
     const { t } = useLocaleInject()
     const visible = ref(false)
@@ -92,19 +61,21 @@ export default defineComponent({
       visible.value = false
       emit('cancel')
     }
-    const confirmButtonText_ = computed(() => {
-      return props.confirmButtonText || t('el.popconfirm.confirmButtonText')
-    })
-    const cancelButtonText_ = computed(() => {
-      return props.cancelButtonText || t('el.popconfirm.cancelButtonText')
-    })
+    const _confirmButtonText = computed(
+      () => props.confirmButtonText || t('el.popconfirm.confirmButtonText')
+    )
+    const _cancelButtonText = computed(
+      () => props.cancelButtonText || t('el.popconfirm.cancelButtonText')
+    )
+
     return {
       Effect,
       visible,
+      _confirmButtonText,
+      _cancelButtonText,
+
       confirm,
       cancel,
-      confirmButtonText_,
-      cancelButtonText_,
     }
   },
 })