feat(popconfirm): add Popconfirm component (#356)

packages/element-plus/index.ts

@@ -40,6 +40,7 @@ import ElCalendar from '@element-plus/calendar'
 import ElInfiniteScroll from '@element-plus/infinite-scroll'
 import ElMessage from '@element-plus/message'
 import ElDrawer from '@element-plus/drawer'
+import ElPopconfirm from '@element-plus/popconfirm'
 import ElForm from '@element-plus/form'
 import ElUpload from '@element-plus/upload'
 import ElTree from '@element-plus/tree'
@@ -90,6 +91,7 @@ export {
   ElInfiniteScroll,
   ElMessage,
   ElDrawer,
+  ElPopconfirm,
   ElForm,
   ElUpload,
   ElTree,
@@ -142,6 +144,7 @@ const install = (app: App): void => {
   ElInfiniteScroll(app)
   ElMessage(app)
   ElDrawer(app)
+  ElPopconfirm(app)
   ElForm(app)
   ElUpload(app)
   ElTree(app)

packages/element-plus/package.json

@@ -40,6 +40,7 @@
     "@element-plus/collapse": "^0.0.0",
     "@element-plus/time-picker": "^0.0.0",
     "@element-plus/tabs": "^0.0.0",
+    "@element-plus/popconfirm": "^0.0.0",
     "@element-plus/form": "^0.0.0",
     "@element-plus/tree": "^0.0.0",
     "@element-plus/select": "^0.0.0",

packages/popconfirm/__test__/popconfirm.spec.ts

@@ -0,0 +1,26 @@
+import { h } from 'vue'
+import { mount } from '@vue/test-utils'
+import ElPopconfirm from '../src/index.vue'
+const selector = '.el-popper'
+const _mount = (props: any = {}) => mount(ElPopconfirm, {
+  props,
+  slots: {
+    reference: () => h('div', {
+      class: 'reference',
+    }),
+  },
+})
+
+describe('Popconfirm.vue', () => {
+
+  test('render test', async () => {
+    const wrapper = _mount()
+    const trigger = wrapper.find('.reference')
+
+    expect(document.querySelector(selector).getAttribute('style')).toContain('display: none')
+
+    await trigger.trigger('click')
+
+    expect(document.querySelector(selector).getAttribute('style')).not.toContain('display: none')
+  })
+})

packages/popconfirm/doc/basic.vue

@@ -0,0 +1,39 @@
+<template>
+  <el-popconfirm
+    confirm-button-text="OK"
+    cancel-button-text="NO"
+    icon="el-icon-info"
+    icon-color="red"
+    title="Are you sure to delete this?？"
+    confirm-button-type="success"
+    cancel-button-type="info"
+    @confirm="onConfirm"
+    @cancel="onCancel"
+  >
+    <template #reference>
+      <el-button>delete</el-button>
+    </template>
+  </el-popconfirm>
+</template>
+
+<script>
+export default {
+  name: 'Basic',
+  setup(){
+    const onConfirm = () => {
+      console.log('Confirm button clicked')
+    }
+    const onCancel = () => {
+      console.log('Cancel button clicked')
+    }
+    return {
+      onConfirm,
+      onCancel,
+    }
+  },
+}
+</script>
+
+<style scoped>
+
+</style>

packages/popconfirm/doc/index.stories.ts

@@ -0,0 +1,6 @@
+export default {
+  title: 'Popconfirm',
+}
+
+export { default as BasicUsage } from './basic.vue'
+

packages/popconfirm/index.ts

@@ -0,0 +1,5 @@
+import { App } from 'vue'
+import Popconfirm from './src/index.vue'
+export default (app: App): void => {
+  app.component(Popconfirm.name, Popconfirm)
+}

packages/popconfirm/package.json

@@ -0,0 +1,12 @@
+{
+  "name": "@element-plus/popconfirm",
+  "version": "0.0.0",
+  "main": "dist/index.js",
+  "license": "MIT",
+  "peerDependencies": {
+    "vue": "^3.0.0-rc.1"
+  },
+  "devDependencies": {
+    "@vue/test-utils": "^2.0.0-beta.3"
+  }
+}

packages/popconfirm/src/index.vue

@@ -0,0 +1,102 @@
+<template>
+  <el-popper
+    v-model:visible="visible"
+    :trigger="['click']"
+    effect="light"
+    pure
+  >
+    <div class="el-popconfirm">
+      <p class="el-popconfirm__main">
+        <i
+          v-if="!hideIcon"
+          :class="icon"
+          class="el-popconfirm__icon"
+          :style="{color: iconColor}"
+        ></i>
+        {{ title }}
+      </p>
+      <div class="el-popconfirm__action">
+        <el-button
+          size="mini"
+          :type="cancelButtonType"
+          @click="cancel"
+        >
+          {{ cancelButtonText }}
+        </el-button>
+        <el-button
+          size="mini"
+          :type="confirmButtonType"
+          @click="confirm"
+        >
+          {{ confirmButtonText }}
+        </el-button>
+      </div>
+    </div>
+    <template #trigger>
+      <slot name="reference"></slot>
+    </template>
+  </el-popper>
+</template>
+
+<script lang="ts">
+import { Popper as ElPopper } from '@element-plus/popper'
+import { defineComponent,ref } from 'vue'
+import { t } from '../../locale'
+export default defineComponent({
+  name: 'ElPopconfirm',
+  components: {
+    ElPopper,
+  },
+  props: {
+    title: {
+      type: String,
+    },
+    confirmButtonText: {
+      type: String,
+      default: t('el.popconfirm.confirmButtonText'),
+    },
+    cancelButtonText: {
+      type: String,
+      default: t('el.popconfirm.cancelButtonText'),
+    },
+    confirmButtonType: {
+      type: String,
+      default: 'primary',
+    },
+    cancelButtonType: {
+      type: String,
+      default: 'text',
+    },
+    icon: {
+      type: String,
+      default: 'el-icon-question',
+    },
+    iconColor: {
+      type: String,
+      default: '#f90',
+    },
+    hideIcon: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  emits:['confirm','cancel'],
+  setup(props,{ emit }){
+    const visible = ref(false)
+    const confirm = () => {
+      visible.value = false
+      emit('confirm')
+    }
+    const cancel = () => {
+      visible.value = false
+      emit('cancel')
+    }
+
+    return {
+      visible,
+      confirm,
+      cancel,
+    }
+  },
+})
+</script>

website/docs/en-US/popconfirm.md

@@ -12,8 +12,10 @@ Popconfirm is similar to Popover. So for some duplicated attributes, please refe
 <el-popconfirm
   title="Are you sure to delete this?"
 >
-  <el-button slot="reference">Delete</el-button>
+<template #reference>
-</el-popconfirm>
+  <el-button>Delete</el-button>
+  </template>
+  </el-popconfirm>
 </template>
 ````
 :::
@@ -30,7 +32,9 @@ You can customise Popconfirm like:
   iconColor="red"
   title="Are you sure to delete this?"
 >
-  <el-button slot="reference">Delete</el-button>
+<template #reference>
+  <el-button>Delete</el-button>
+  </template>
 </el-popconfirm>
 </template>
 ```
@@ -56,5 +60,5 @@ You can customise Popconfirm like:
 ### Events
 | Event Name | Description | Parameters |
 |---------|--------|---------|
-| onConfirm | triggers when click confirm button | — |
+| confirm | triggers when click confirm button | — |
-| onCancel | triggers when click cancel button | — |
+| cancel | triggers when click cancel button | — |

website/docs/es/popconfirm.md

@@ -12,7 +12,9 @@ Popconfirm is similar to Popover. So for some duplicated attributes, please refe
 <el-popconfirm
   title="Are you sure to delete this?"
 >
-  <el-button slot="reference">Delete</el-button>
+<template #reference>
+  <el-button>Delete</el-button>
+  </template>
 </el-popconfirm>
 </template>
 ````
@@ -30,7 +32,9 @@ You can customise Popconfirm like:
   iconColor="red"
   title="Are you sure to delete this?"
 >
-  <el-button slot="reference">Delete</el-button>
+<template #reference>
+  <el-button>Delete</el-button>
+  </template>
 </el-popconfirm>
 </template>
 ```
@@ -56,5 +60,5 @@ You can customise Popconfirm like:
 ### Events
 | Event Name | Description | Parameters |
 |---------|--------|---------|
-| onConfirm | triggers when click confirm button | — |
+| confirm | triggers when click confirm button | — |
-| onCancel | triggers when click cancel button | — |
+| cancel | triggers when click cancel button | — |

website/docs/fr-FR/popconfirm.md

@@ -12,7 +12,9 @@ Popconfirm is similar to Popover. So for some duplicated attributes, please refe
 <el-popconfirm
   title="Are you sure to delete this?"
 >
-  <el-button slot="reference">Delete</el-button>
+<template #reference>
+  <el-button>Delete</el-button>
+  </template>
 </el-popconfirm>
 </template>
 ````
@@ -30,7 +32,9 @@ You can customise Popconfirm like:
   iconColor="red"
   title="Are you sure to delete this?"
 >
-  <el-button slot="reference">Delete</el-button>
+<template #reference>
+  <el-button>Delete</el-button>
+  </template>
 </el-popconfirm>
 </template>
 ```
@@ -56,5 +60,5 @@ You can customise Popconfirm like:
 ### Events
 | Event Name | Description | Parameters |
 |---------|--------|---------|
-| onConfirm | triggers when click confirm button | — |
+| confirm | triggers when click confirm button | — |
-| onCancel | triggers when click cancel button | — |
+| cancel | triggers when click cancel button | — |

website/docs/zh-CN/popconfirm.md

@@ -11,7 +11,9 @@ Popconfirm 的属性与 Popover 很类似，因此对于重复属性，请参考
 <el-popconfirm
   title="这是一段内容确定删除吗？"
 >
-  <el-button slot="reference">删除</el-button>
+<template #reference>
+  <el-button>删除</el-button>
+  </template>
 </el-popconfirm>
 </template>
 ````
@@ -30,7 +32,9 @@ Popconfirm 的属性与 Popover 很类似，因此对于重复属性，请参考
   iconColor="red"
   title="这是一段内容确定删除吗？"
 >
-  <el-button slot="reference">删除</el-button>
+<template #reference>
+  <el-button>删除</el-button>
+  </template>
 </el-popconfirm>
 </template>
 ```
@@ -56,5 +60,5 @@ Popconfirm 的属性与 Popover 很类似，因此对于重复属性，请参考
 ### Events
 | 事件名称 | 说明 | 回调参数 |
 |---------|--------|---------|
-| onConfirm | 点击确认按钮时触发 | — |
+| confirm | 点击确认按钮时触发 | — |
-| onCancel | 点击取消按钮时触发 | — |
+| cancel | 点击取消按钮时触发 | — |