Popconfirm: Add popconfirm component (#17548)

* init

* init

* init docs

* init docs2

* init type

* update test

* update naming

components.json

@@ -79,5 +79,6 @@
   "page-header": "./packages/page-header/index.js",
   "cascader-panel": "./packages/cascader-panel/index.js",
   "avatar": "./packages/avatar/index.js",
-  "drawer": "./packages/drawer/index.js"
+  "drawer": "./packages/drawer/index.js",
+  "popconfirm": "./packages/popconfirm/index.js"
 }

examples/docs/en-US/popconfirm.md

@@ -0,0 +1,54 @@
+## Popconfirm 
+
+A simple confirmation dialog of an element click action.
+
+### Basic usage
+
+Popconfirm is similar to Popover. So for some duplicated attributes, please refer to the documentation of Popover.
+
+:::demo Only `title` attribute is avaliable in Popconfirm, `content` will be ignored.
+```html
+<template>
+<el-popconfirm
+  title="Are you sure to delete this?"
+>
+  <el-button slot="reference">Delete</el-button>
+</el-popconfirm>
+</template>
+````
+:::
+
+### Customise
+You can customise Popconfirm like:
+:::demo
+```html
+<template>
+<el-popconfirm
+  confirmButtonText='OK'
+  cancelButtonText='No, Thanks'
+  icon="el-icon-info"
+  iconColor="red"
+  title="Are you sure to delete this?"
+>
+  <el-button slot="reference">Delete</el-button>
+</el-popconfirm>
+</template>
+```
+:::
+
+### Attributes
+| Attribute      | Description          | Type      | Accepted Values       | Default  |
+|--------------------|----------------------------------------------------------|-------------------|-------------|--------|
+|  title              | Title | String | — | — |
+|  confirmButtonText              | Confirm button text | String | — | — |
+|  cancelButtonText              | Cancel button text | String | — | — |
+|  confirmButtonType              | Confirm button type | String | — | Primary |
+|  cancelButtonType              | Cancel button type | String | — | Text |
+|  icon              | Icon | String | — | el-icon-question |
+|  iconColor              | Icon color | String | — | #f90 |
+|  hideIcon              | is hide Icon | Boolean | — | false |
+
+### Slot
+| Name | Description |
+|--- | ---|
+| reference | HTML element that triggers Popconfirm |

examples/docs/es/popconfirm.md

@@ -0,0 +1,54 @@
+## Popconfirm 
+
+A simple confirmation dialog of an element click action.
+
+### Basic usage
+
+Popconfirm is similar to Popover. So for some duplicated attributes, please refer to the documentation of Popover.
+
+:::demo Only `title` attribute is avaliable in Popconfirm, `content` will be ignored.
+```html
+<template>
+<el-popconfirm
+  title="Are you sure to delete this?"
+>
+  <el-button slot="reference">Delete</el-button>
+</el-popconfirm>
+</template>
+````
+:::
+
+### Customise
+You can customise Popconfirm like:
+:::demo
+```html
+<template>
+<el-popconfirm
+  confirmButtonText='OK'
+  cancelButtonText='No, Thanks'
+  icon="el-icon-info"
+  iconColor="red"
+  title="Are you sure to delete this?"
+>
+  <el-button slot="reference">Delete</el-button>
+</el-popconfirm>
+</template>
+```
+:::
+
+### Attributes
+| Attribute      | Description          | Type      | Accepted Values       | Default  |
+|--------------------|----------------------------------------------------------|-------------------|-------------|--------|
+|  title              | Title | String | — | — |
+|  confirmButtonText              | Confirm button text | String | — | — |
+|  cancelButtonText              | Cancel button text | String | — | — |
+|  confirmButtonType              | Confirm button type | String | — | Primary |
+|  cancelButtonType              | Cancel button type | String | — | Text |
+|  icon              | Icon | String | — | el-icon-question |
+|  iconColor              | Icon color | String | — | #f90 |
+|  hideIcon              | is hide Icon | Boolean | — | false |
+
+### Slot
+| Name | Description |
+|--- | ---|
+| reference | HTML element that triggers Popconfirm |

examples/docs/fr-FR/popconfirm.md

@@ -0,0 +1,54 @@
+## Popconfirm 
+
+A simple confirmation dialog of an element click action.
+
+### Basic usage
+
+Popconfirm is similar to Popover. So for some duplicated attributes, please refer to the documentation of Popover.
+
+:::demo Only `title` attribute is avaliable in Popconfirm, `content` will be ignored.
+```html
+<template>
+<el-popconfirm
+  title="Are you sure to delete this?"
+>
+  <el-button slot="reference">Delete</el-button>
+</el-popconfirm>
+</template>
+````
+:::
+
+### Customise
+You can customise Popconfirm like:
+:::demo
+```html
+<template>
+<el-popconfirm
+  confirmButtonText='OK'
+  cancelButtonText='No, Thanks'
+  icon="el-icon-info"
+  iconColor="red"
+  title="Are you sure to delete this?"
+>
+  <el-button slot="reference">Delete</el-button>
+</el-popconfirm>
+</template>
+```
+:::
+
+### Attributes
+| Attribute      | Description          | Type      | Accepted Values       | Default  |
+|--------------------|----------------------------------------------------------|-------------------|-------------|--------|
+|  title              | Title | String | — | — |
+|  confirmButtonText              | Confirm button text | String | — | — |
+|  cancelButtonText              | Cancel button text | String | — | — |
+|  confirmButtonType              | Confirm button type | String | — | Primary |
+|  cancelButtonType              | Cancel button type | String | — | Text |
+|  icon              | Icon | String | — | el-icon-question |
+|  iconColor              | Icon color | String | — | #f90 |
+|  hideIcon              | is hide Icon | Boolean | — | false |
+
+### Slot
+| Name | Description |
+|--- | ---|
+| reference | HTML element that triggers Popconfirm |

examples/docs/zh-CN/popconfirm.md

@@ -0,0 +1,54 @@
+## Popconfirm 气泡确认框
+
+点击元素，弹出气泡确认框。
+
+### 基础用法
+
+Popconfirm 的属性与 Popover 很类似，因此对于重复属性，请参考 Popover 的文档，在此文档中不做详尽解释。
+:::demo 在 Popconfirm 中，只有 `title` 属性可用，`content` 属性不会被展示。
+```html
+<template>
+<el-popconfirm
+  title="这是一段内容确定删除吗？"
+>
+  <el-button slot="reference">删除</el-button>
+</el-popconfirm>
+</template>
+````
+:::
+
+### 自定义
+
+可以在 Popconfirm 中自定义内容。
+:::demo
+```html
+<template>
+<el-popconfirm
+  confirmButtonText='好的'
+  cancelButtonText='不用了'
+  icon="el-icon-info"
+  iconColor="red"
+  title="这是一段内容确定删除吗？"
+>
+  <el-button slot="reference">删除</el-button>
+</el-popconfirm>
+</template>
+```
+:::
+
+### Attributes
+| 参数               | 说明                                                     | 类型              | 可选值      | 默认值 |
+|--------------------|----------------------------------------------------------|-------------------|-------------|--------|
+|  title              | 标题 | String | — | — |
+|  confirmButtonText              | 确认按钮文字 | String | — | — |
+|  cancelButtonText              | 取消按钮文字 | String | — | — |
+|  confirmButtonType              | 确认按钮类型 | String | — | Primary |
+|  cancelButtonType              | 取消按钮类型 | String | — | Text |
+|  icon              | Icon | String | — | el-icon-question |
+|  iconColor              | Icon 颜色 | String | — | #f90 |
+|  hideIcon              | 是否隐藏 Icon | Boolean | — | false |
+
+### Slot
+| 参数 | 说明 |
+|--- | ---|
+| reference | 触发 Popconfirm 显示的 HTML 元素 |

examples/nav.config.json

@@ -248,6 +248,10 @@
               "path": "/popover",
               "title": "Popover 弹出框"
             },
+            {
+              "path": "/popconfirm",
+              "title": "Popconfirm 气泡确认框"
+            },
             {
               "path": "/card",
               "title": "Card 卡片"
@@ -538,6 +542,10 @@
               "path": "/popover",
               "title": "Popover"
             },
+            {
+              "path": "/popconfirm",
+              "title": "Popconfirm"
+            },
             {
               "path": "/card",
               "title": "Card"
@@ -832,6 +840,10 @@
               "path": "/popover",
               "title": "Popover"
             },
+            {
+              "path": "/popconfirm",
+              "title": "Popconfirm"
+            },
             {
               "path": "/card",
               "title": "Card"
@@ -1126,6 +1138,10 @@
               "path": "/popover",
               "title": "Popover"
             },
+            {
+              "path": "/popconfirm",
+              "title": "Popconfirm"
+            },
             {
               "path": "/card",
               "title": "Card"

packages/popconfirm/index.js

@@ -0,0 +1,8 @@
+import Popconfirm from './src/main';
+
+/* istanbul ignore next */
+Popconfirm.install = function(Vue) {
+  Vue.component(Popconfirm.name, Popconfirm);
+};
+
+export default Popconfirm;

packages/popconfirm/src/main.vue

@@ -0,0 +1,98 @@
+<template>
+  <el-popover
+    v-bind="$attrs"
+    v-model="visible"
+    trigger="click"
+  >
+  <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>
+  <slot name="reference" slot="reference"></slot>
+</el-popover>
+</template>
+
+<script>
+import ElPopover from 'element-ui/packages/popover';
+import ElButton from 'element-ui/packages/button';
+import {t} from 'element-ui/src/locale';
+
+export default {
+  name: 'ElPopconfirm',
+  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
+    }
+  },
+  components: {
+    ElPopover,
+    ElButton
+  },
+  data() {
+    return {
+      visible: false
+    };
+  },
+  methods: {
+    confirm() {
+      this.visible = false;
+      this.$emit('onConfirm');
+    },
+    cancel() {
+      this.visible = false;
+      this.$emit('onCancel');
+    }
+  }
+};
+</script>

packages/theme-chalk/src/index.scss

@@ -77,3 +77,4 @@
 @import "./cascader-panel.scss";
 @import "./avatar.scss";
 @import "./drawer.scss";
+@import "./popconfirm.scss";

packages/theme-chalk/src/popconfirm.scss

@@ -0,0 +1,16 @@
+@import "mixins/mixins";
+@import "common/var";
+
+@include b(popconfirm) {
+  @include e(main) {
+    display: flex;
+    align-items: center;
+  }
+  @include e(icon) {
+    margin-right: 5px;
+  }
+  @include e(action) {
+    text-align: right; 
+    margin: 0
+  }
+}

src/index.js

@@ -81,6 +81,7 @@ import PageHeader from '../packages/page-header/index.js';
 import CascaderPanel from '../packages/cascader-panel/index.js';
 import Avatar from '../packages/avatar/index.js';
 import Drawer from '../packages/drawer/index.js';
+import Popconfirm from '../packages/popconfirm/index.js';
 import locale from 'element-ui/src/locale';
 import CollapseTransition from 'element-ui/src/transitions/collapse-transition';
 
@@ -161,6 +162,7 @@ const components = [
   CascaderPanel,
   Avatar,
   Drawer,
+  Popconfirm,
   CollapseTransition
 ];
 
@@ -281,5 +283,6 @@ export default {
   PageHeader,
   CascaderPanel,
   Avatar,
-  Drawer
+  Drawer,
+  Popconfirm
 };

src/locale/lang/af-ZA.js

@@ -111,6 +111,10 @@ export default {
     },
     pageHeader: {
       title: 'Back' // to be translated
+    },
+    popconfirm: {
+      confirmButtonText: 'Yes', // to be translated
+      cancelButtonText: 'No' // to be translated
     }
   }
 };

src/locale/lang/ar.js

@@ -110,6 +110,10 @@ export default {
     },
     pageHeader: {
       title: 'عودة'
+    },
+    popconfirm: {
+      confirmButtonText: 'Yes', // to be translated
+      cancelButtonText: 'No' // to be translated
     }
   }
 };

src/locale/lang/bg.js

@@ -111,6 +111,10 @@ export default {
     },
     pageHeader: {
       title: 'Back' // to be translated
+    },
+    popconfirm: {
+      confirmButtonText: 'Yes', // to be translated
+      cancelButtonText: 'No' // to be translated
     }
   }
 };

src/locale/lang/ca.js

@@ -110,6 +110,10 @@ export default {
     },
     pageHeader: {
       title: 'Back' // to be translated
+    },
+    popconfirm: {
+      confirmButtonText: 'Yes', // to be translated
+      cancelButtonText: 'No' // to be translated
     }
   }
 };

src/locale/lang/cs-CZ.js

@@ -113,6 +113,10 @@ export default {
     },
     pageHeader: {
       title: 'Back' // to be translated
+    },
+    popconfirm: {
+      confirmButtonText: 'Yes', // to be translated
+      cancelButtonText: 'No' // to be translated
     }
   }
 };

src/locale/lang/da.js

@@ -110,6 +110,10 @@ export default {
     },
     pageHeader: {
       title: 'Back' // to be translated
+    },
+    popconfirm: {
+      confirmButtonText: 'Yes', // to be translated
+      cancelButtonText: 'No' // to be translated
     }
   }
 };

src/locale/lang/de.js

@@ -112,6 +112,10 @@ export default {
     },
     pageHeader: {
       title: 'Back' // to be translated
+    },
+    popconfirm: {
+      confirmButtonText: 'Yes', // to be translated
+      cancelButtonText: 'No' // to be translated
     }
   }
 };

src/locale/lang/ee.js

@@ -111,6 +111,10 @@ export default {
     },
     pageHeader: {
       title: 'Back' // to be translated
+    },
+    popconfirm: {
+      confirmButtonText: 'Yes', // to be translated
+      cancelButtonText: 'No' // to be translated
     }
   }
 };

src/locale/lang/el.js

@@ -111,6 +111,10 @@ export default {
     },
     pageHeader: {
       title: 'Back' // to be translated
+    },
+    popconfirm: {
+      confirmButtonText: 'Yes', // to be translated
+      cancelButtonText: 'No' // to be translated
     }
   }
 };

src/locale/lang/en.js

@@ -111,6 +111,10 @@ export default {
     },
     pageHeader: {
       title: 'Back' // to be translated
+    },
+    popconfirm: {
+      confirmButtonText: 'Yes',
+      cancelButtonText: 'No'
     }
   }
 };

src/locale/lang/eo.js

@@ -111,6 +111,10 @@ export default {
     },
     pageHeader: {
       title: 'Reen'
+    },
+    popconfirm: {
+      confirmButtonText: 'Yes', // to be translated
+      cancelButtonText: 'No' // to be translated
     }
   }
 };

src/locale/lang/es.js

@@ -110,6 +110,10 @@ export default {
     },
     pageHeader: {
       title: 'Volver'
+    },
+    popconfirm: {
+      confirmButtonText: 'Yes', // to be translated
+      cancelButtonText: 'No' // to be translated
     }
   }
 };

src/locale/lang/eu.js

@@ -111,6 +111,10 @@ export default {
     },
     pageHeader: {
       title: 'Back' // to be translated
+    },
+    popconfirm: {
+      confirmButtonText: 'Yes', // to be translated
+      cancelButtonText: 'No' // to be translated
     }
   }
 };

src/locale/lang/fa.js

@@ -111,6 +111,10 @@ export default {
     },
     pageHeader: {
       title: 'بازگشت'
+    },
+    popconfirm: {
+      confirmButtonText: 'Yes', // to be translated
+      cancelButtonText: 'No' // to be translated
     }
   }
 };

src/locale/lang/fi.js

@@ -111,6 +111,10 @@ export default {
     },
     pageHeader: {
       title: 'Back' // to be translated
+    },
+    popconfirm: {
+      confirmButtonText: 'Yes', // to be translated
+      cancelButtonText: 'No' // to be translated
     }
   }
 };

src/locale/lang/fr.js

@@ -110,6 +110,10 @@ export default {
     },
     pageHeader: {
       title: 'Back' // to be translated
+    },
+    popconfirm: {
+      confirmButtonText: 'Yes', // to be translated
+      cancelButtonText: 'No' // to be translated
     }
   }
 };

src/locale/lang/he.js

@@ -111,6 +111,10 @@ export default {
     },
     pageHeader: {
       title: 'Back' // to be translated
+    },
+    popconfirm: {
+      confirmButtonText: 'Yes', // to be translated
+      cancelButtonText: 'No' // to be translated
     }
   }
 };

src/locale/lang/hr.js

@@ -111,6 +111,10 @@ export default {
     },
     pageHeader: {
       title: 'Back' // to be translated
+    },
+    popconfirm: {
+      confirmButtonText: 'Yes', // to be translated
+      cancelButtonText: 'No' // to be translated
     }
   }
 };

src/locale/lang/hu.js

@@ -110,6 +110,10 @@ export default {
     },
     pageHeader: {
       title: 'Back' // to be translated
+    },
+    popconfirm: {
+      confirmButtonText: 'Yes', // to be translated
+      cancelButtonText: 'No' // to be translated
     }
   }
 };

src/locale/lang/hy-AM.js

@@ -111,6 +111,10 @@ export default {
     },
     pageHeader: {
       title: 'Back' // to be translated
+    },
+    popconfirm: {
+      confirmButtonText: 'Yes', // to be translated
+      cancelButtonText: 'No' // to be translated
     }
   }
 };

src/locale/lang/id.js

@@ -111,6 +111,10 @@ export default {
     },
     pageHeader: {
       title: 'Back' // to be translated
+    },
+    popconfirm: {
+      confirmButtonText: 'Yes', // to be translated
+      cancelButtonText: 'No' // to be translated
     }
   }
 };

src/locale/lang/it.js

@@ -110,6 +110,10 @@ export default {
     },
     pageHeader: {
       title: 'Back' // to be translated
+    },
+    popconfirm: {
+      confirmButtonText: 'Yes', // to be translated
+      cancelButtonText: 'No' // to be translated
     }
   }
 };

src/locale/lang/ja.js

@@ -111,6 +111,10 @@ export default {
     },
     pageHeader: {
       title: 'Back' // to be translated
+    },
+    popconfirm: {
+      confirmButtonText: 'Yes', // to be translated
+      cancelButtonText: 'No' // to be translated
     }
   }
 };

src/locale/lang/kg.js

@@ -111,6 +111,10 @@ export default {
     },
     pageHeader: {
       title: 'Back' // to be translated
+    },
+    popconfirm: {
+      confirmButtonText: 'Yes', // to be translated
+      cancelButtonText: 'No' // to be translated
     }
   }
 };

src/locale/lang/km.js

@@ -111,6 +111,10 @@ export default {
     },
     pageHeader: {
       title: 'Back' // to be translated
+    },
+    popconfirm: {
+      confirmButtonText: 'Yes', // to be translated
+      cancelButtonText: 'No' // to be translated
     }
   }
 };

src/locale/lang/ko.js

@@ -111,6 +111,10 @@ export default {
     },
     pageHeader: {
       title: 'Back' // to be translated
+    },
+    popconfirm: {
+      confirmButtonText: 'Yes', // to be translated
+      cancelButtonText: 'No' // to be translated
     }
   }
 };

src/locale/lang/ku.js

@@ -111,6 +111,10 @@ export default {
     },
     pageHeader: {
       title: 'Back' // to be translated
+    },
+    popconfirm: {
+      confirmButtonText: 'Yes', // to be translated
+      cancelButtonText: 'No' // to be translated
     }
   }
 };

src/locale/lang/kz.js

@@ -111,6 +111,10 @@ export default {
     },
     pageHeader: {
       title: 'Back' // to be translated
+    },
+    popconfirm: {
+      confirmButtonText: 'Yes', // to be translated
+      cancelButtonText: 'No' // to be translated
     }
   }
 };

src/locale/lang/lt.js

@@ -111,6 +111,10 @@ export default {
     },
     pageHeader: {
       title: 'Back' // to be translated
+    },
+    popconfirm: {
+      confirmButtonText: 'Yes', // to be translated
+      cancelButtonText: 'No' // to be translated
     }
   }
 };

src/locale/lang/lv.js

@@ -111,6 +111,10 @@ export default {
     },
     pageHeader: {
       title: 'Back' // to be translated
+    },
+    popconfirm: {
+      confirmButtonText: 'Yes', // to be translated
+      cancelButtonText: 'No' // to be translated
     }
   }
 };

src/locale/lang/mn.js

@@ -111,6 +111,10 @@ export default {
     },
     pageHeader: {
       title: 'Back' // to be translated
+    },
+    popconfirm: {
+      confirmButtonText: 'Yes', // to be translated
+      cancelButtonText: 'No' // to be translated
     }
   }
 };

src/locale/lang/nb-NO.js

@@ -110,6 +110,10 @@ export default {
     },
     pageHeader: {
       title: 'Back' // to be translated
+    },
+    popconfirm: {
+      confirmButtonText: 'Yes', // to be translated
+      cancelButtonText: 'No' // to be translated
     }
   }
 };

src/locale/lang/nl.js

@@ -111,6 +111,10 @@ export default {
     },
     pageHeader: {
       title: 'Back' // to be translated
+    },
+    popconfirm: {
+      confirmButtonText: 'Yes', // to be translated
+      cancelButtonText: 'No' // to be translated
     }
   }
 };

src/locale/lang/pl.js

@@ -111,6 +111,10 @@ export default {
     },
     pageHeader: {
       title: 'Back' // to be translated
+    },
+    popconfirm: {
+      confirmButtonText: 'Yes', // to be translated
+      cancelButtonText: 'No' // to be translated
     }
   }
 };

src/locale/lang/pt-br.js

@@ -111,6 +111,10 @@ export default {
     },
     pageHeader: {
       title: 'Voltar'
+    },
+    popconfirm: {
+      confirmButtonText: 'Yes', // to be translated
+      cancelButtonText: 'No' // to be translated
     }
   }
 };

src/locale/lang/pt.js

@@ -111,6 +111,10 @@ export default {
     },
     pageHeader: {
       title: 'Back' // to be translated
+    },
+    popconfirm: {
+      confirmButtonText: 'Yes', // to be translated
+      cancelButtonText: 'No' // to be translated
     }
   }
 };

src/locale/lang/ro.js

@@ -111,6 +111,10 @@ export default {
     },
     pageHeader: {
       title: 'Back' // to be translated
+    },
+    popconfirm: {
+      confirmButtonText: 'Yes', // to be translated
+      cancelButtonText: 'No' // to be translated
     }
   }
 };

src/locale/lang/ru-RU.js

@@ -111,6 +111,10 @@ export default {
     },
     pageHeader: {
       title: 'Back' // to be translated
+    },
+    popconfirm: {
+      confirmButtonText: 'Yes', // to be translated
+      cancelButtonText: 'No' // to be translated
     }
   }
 };

src/locale/lang/sk.js

@@ -113,6 +113,10 @@ export default {
     },
     pageHeader: {
       title: 'Back' // to be translated
+    },
+    popconfirm: {
+      confirmButtonText: 'Yes', // to be translated
+      cancelButtonText: 'No' // to be translated
     }
   }
 };

src/locale/lang/sl.js

@@ -111,6 +111,10 @@ export default {
     },
     pageHeader: {
       title: 'Back' // to be translated
+    },
+    popconfirm: {
+      confirmButtonText: 'Yes', // to be translated
+      cancelButtonText: 'No' // to be translated
     }
   }
 };

src/locale/lang/sr.js

@@ -111,6 +111,10 @@ export default {
     },
     pageHeader: {
       title: 'Back' // to be translated
+    },
+    popconfirm: {
+      confirmButtonText: 'Yes', // to be translated
+      cancelButtonText: 'No' // to be translated
     }
   }
 };

src/locale/lang/sv-SE.js

@@ -111,6 +111,10 @@ export default {
     },
     pageHeader: {
       title: 'Back' // to be translated
+    },
+    popconfirm: {
+      confirmButtonText: 'Yes', // to be translated
+      cancelButtonText: 'No' // to be translated
     }
   }
 };

src/locale/lang/ta.js

@@ -110,6 +110,10 @@ export default {
     },
     pageHeader: {
       title: 'Back' // to be translated
+    },
+    popconfirm: {
+      confirmButtonText: 'Yes', // to be translated
+      cancelButtonText: 'No' // to be translated
     }
   }
 };

src/locale/lang/th.js

@@ -111,6 +111,10 @@ export default {
     },
     pageHeader: {
       title: 'ย้อนกลับ'
+    },
+    popconfirm: {
+      confirmButtonText: 'Yes', // to be translated
+      cancelButtonText: 'No' // to be translated
     }
   }
 };

src/locale/lang/tk.js

@@ -111,6 +111,10 @@ export default {
     },
     pageHeader: {
       title: 'Back' // to be translated
+    },
+    popconfirm: {
+      confirmButtonText: 'Yes', // to be translated
+      cancelButtonText: 'No' // to be translated
     }
   }
 };

src/locale/lang/tr-TR.js

@@ -111,6 +111,10 @@ export default {
     },
     pageHeader: {
       title: 'Back' // to be translated
+    },
+    popconfirm: {
+      confirmButtonText: 'Yes', // to be translated
+      cancelButtonText: 'No' // to be translated
     }
   }
 };

src/locale/lang/ua.js

@@ -111,6 +111,10 @@ export default {
     },
     pageHeader: {
       title: 'Back' // to be translated
+    },
+    popconfirm: {
+      confirmButtonText: 'Yes', // to be translated
+      cancelButtonText: 'No' // to be translated
     }
   }
 };

src/locale/lang/ug-CN.js

@@ -111,6 +111,10 @@ export default {
     },
     pageHeader: {
       title: 'Back' // to be translated
+    },
+    popconfirm: {
+      confirmButtonText: 'Yes', // to be translated
+      cancelButtonText: 'No' // to be translated
     }
   }
 };

src/locale/lang/uz-UZ.js

@@ -111,6 +111,10 @@ export default {
     },
     pageHeader: {
       title: 'Orqaga'
+    },
+    popconfirm: {
+      confirmButtonText: 'Yes', // to be translated
+      cancelButtonText: 'No' // to be translated
     }
   }
 };

src/locale/lang/vi.js

@@ -111,6 +111,10 @@ export default {
     },
     pageHeader: {
       title: 'Back' // to be translated
+    },
+    popconfirm: {
+      confirmButtonText: 'Yes', // to be translated
+      cancelButtonText: 'No' // to be translated
     }
   }
 };

src/locale/lang/zh-CN.js

@@ -111,6 +111,10 @@ export default {
     },
     pageHeader: {
       title: '返回'
+    },
+    popconfirm: {
+      confirmButtonText: '确定',
+      cancelButtonText: '取消'
     }
   }
 };

src/locale/lang/zh-TW.js

@@ -111,6 +111,10 @@ export default {
     },
     pageHeader: {
       title: '返回'
+    },
+    popconfirm: {
+      confirmButtonText: 'Yes', // to be translated
+      cancelButtonText: 'No' // to be translated
     }
   }
 };

test/unit/specs/popconfirm.spec.js

@@ -0,0 +1,29 @@
+import { createVue, destroyVM } from '../util';
+
+describe('Popconfirm', () => {
+  let vm;
+  afterEach(() => {
+    destroyVM(vm);
+  });
+
+  describe('trigger', () => {
+    const createVM = () => {
+      return createVue(`
+        <div>
+          <el-popconfirm
+            ref="popover"
+            title="content">
+            <button slot="reference">trigger</button>
+          </el-popconfirm>
+        </div>
+      `, true);
+    };
+    it('click', () => {
+      vm = createVM();
+      vm.$el.querySelector('button').click();
+      document.body.click();
+      expect(document.body.querySelector('.el-popconfirm__action').style.display).to.equal('');
+    });
+  });
+
+});

types/element-ui.d.ts

@@ -79,6 +79,7 @@ import { ElInfiniteScroll } from './infinite-scroll'
 import { ElPageHeader } from './page-header'
 import { ElAvatar } from './avatar'
 import { ElDrawer } from './drawer'
+import { ElPopconfirm } from './popconfirm'
 
 export interface InstallationOptions {
   locale: any,
@@ -340,3 +341,6 @@ export class Avatar extends ElAvatar {}
 
 /** Drawer Component */
 export class Drawer extends ElDrawer {}
+
+/** Popconfirm Component */
+export class Popconfirm extends ElPopconfirm {}

types/popconfirm.d.ts

@@ -0,0 +1,29 @@
+import { ElementUIComponent } from './component'
+import { ElPopover } from './popover'
+
+/** Popconfirm Component */
+export declare class ElPopconfirm extends ElPopover {
+  /** Popconfirm title */
+  title: string
+
+  /** Popconfirm ok text */
+  confirmButtonText: string
+  
+  /** Popconfirm cancel text */
+  cancelButtonText: string
+
+  /** Popconfirm ok type */
+  confirmButtonType: string
+
+  /** Popconfirm cancal type */
+  cancelButtonType: string
+
+  /** Popconfirm icon */
+  icon: string
+
+  /** Popconfirm icon color */
+  iconColor: string
+
+  /** Popconfirm hide icon */
+  hideIcon: boolean
+}