add popconfirm

components/_util/props-util.js

@@ -18,5 +18,13 @@ const getOptionProps = (instance) => {
   return filterProps($props, $options.propsData)
 }
 
-export { hasProp, filterProps, getOptionProps }
+const getComponentFromProp = (instance, h, prop) => {
+  const temp = instance[prop]
+  if (temp !== undefined) {
+    return typeof temp === 'function' ? temp(h) : temp
+  }
+  return instance.$slots[prop]
+}
+
+export { hasProp, filterProps, getOptionProps, getComponentFromProp }
 export default hasProp

components/button/button.vue

@@ -2,40 +2,13 @@
 import Icon from '../icon'
 const rxTwoCNChar = /^[\u4e00-\u9fa5]{2}$/
 const isTwoCNChar = rxTwoCNChar.test.bind(rxTwoCNChar)
+import buttonTypes from './buttonTypes'
 export default {
   name: 'Button',
   __ANT_BUTTON: true,
   components: { Icon },
   props: {
-    prefixCls: {
-      default: 'ant-btn',
-      type: String,
-    },
-    type: {
-      validator (value) {
-        return ['primary', 'danger', 'dashed', 'ghost', 'default'].includes(value)
-      },
-    },
-    htmlType: {
-      default: 'button',
-      validator (value) {
-        return ['button', 'submit', 'reset'].includes(value)
-      },
-    },
-    icon: String,
-    shape: {
-      validator (value) {
-        return ['circle', 'circle-outline'].includes(value)
-      },
-    },
-    size: {
-      validator (value) {
-        return ['small', 'large', 'default'].includes(value)
-      },
-    },
-    loading: [Boolean, Object],
-    disabled: Boolean,
-    ghost: Boolean,
+    ...buttonTypes,
   },
   data () {
     return {

components/button/buttonTypes.js

@@ -0,0 +1,12 @@
+import PropTypes from '../_util/vue-types'
+export default {
+  prefixCls: PropTypes.string.def('ant-btn'),
+  type: PropTypes.oneOf(['primary', 'danger', 'dashed', 'ghost', 'default']).def('default'),
+  htmlType: PropTypes.oneOf(['button', 'submit', 'reset']).def('button'),
+  icon: PropTypes.string,
+  shape: PropTypes.oneOf(['circle', 'circle-outline']),
+  size: PropTypes.oneOf(['small', 'large', 'default']).def('default'),
+  loading: PropTypes.oneOfType([PropTypes.bool, PropTypes.object]),
+  disabled: PropTypes.bool,
+  ghost: PropTypes.bool,
+}

components/index.js

@@ -29,3 +29,5 @@ export { default as Tabs } from './tabs'
 export { default as Input } from './input'
 
 export { default as Popover } from './popover'
+
+export { default as Popconfirm } from './popconfirm'

components/popconfirm/demo/basic.vue

@@ -0,0 +1,29 @@
+<template>
+<div>
+<md>
+## 基本
+最简单的用法。
+</md>
+  <Popconfirm title="Are you sure delete this task?" @confirm="confirm" @cancel="cancel" okText="Yes" cancelText="No">
+    <a href="#">Delete</a>
+  </Popconfirm>
+</div>
+</template>
+
+<script>
+import { Popconfirm, Button } from 'antd'
+export default {
+  methods: {
+    confirm (e) {
+      console.log(e)
+    },
+    cancel (e) {
+      console.log(e)
+    },
+  },
+  components: {
+    Popconfirm,
+    AntButton: Button,
+  },
+}
+</script>

components/popconfirm/index.vue

@@ -0,0 +1,118 @@
+<script>
+import omit from 'omit.js'
+import Tooltip from '../tooltip'
+import abstractTooltipProps from '../tooltip/abstractTooltipProps'
+import PropTypes from '../_util/vue-types'
+import { getOptionProps, hasProp, getComponentFromProp } from '../_util/props-util'
+import BaseMixin from '../_util/BaseMixin'
+import buttonTypes from '../button/buttonTypes'
+import Icon from '../icon'
+import Button from '../button'
+
+export default {
+  name: 'popconfirm',
+  props: {
+    ...abstractTooltipProps,
+    prefixCls: PropTypes.string.def('ant-popover'),
+    transitionName: PropTypes.string.def('zoom-big'),
+    content: PropTypes.any,
+    title: PropTypes.any,
+    trigger: abstractTooltipProps.trigger.def('click'),
+    okType: buttonTypes.type.def('primary'),
+    okText: PropTypes.any,
+    cancelText: PropTypes.any,
+  },
+  mixins: [BaseMixin],
+  model: {
+    prop: 'visible',
+    event: 'change',
+  },
+  data () {
+    return {
+      sVisible: this.$props.visible,
+    }
+  },
+  methods: {
+    onConfirm (e) {
+      this.setVisible(false)
+      this.$emit('confirm', e)
+    },
+
+    onCancel (e) {
+      this.setVisible(false)
+      this.$emit('cancel', e)
+    },
+
+    onVisibleChange (sVisible) {
+      this.setVisible(sVisible)
+    },
+
+    setVisible (sVisible) {
+      const props = this.$props
+      if (!hasProp(this, 'visible')) {
+        this.setState({ sVisible })
+      }
+
+      const { onVisibleChange } = props
+      if (onVisibleChange) {
+        onVisibleChange(sVisible)
+      }
+      this.$emit('change', sVisible)
+    },
+    getPopupDomNode () {
+      return this.$refs.tooltip.getPopupDomNode()
+    },
+  },
+  render (h) {
+    const { prefixCls, okType } = this.$props
+    const props = getOptionProps(this)
+    const otherProps = omit(props, [
+      'title',
+      'content',
+      'cancelText',
+      'okText',
+    ])
+    const tooltipProps = {
+      props: {
+        ...otherProps,
+        visible: this.sVisible,
+      },
+      ref: 'tooltip',
+      on: {
+        change: this.onVisibleChange,
+      },
+    }
+    const overlay = (
+      <div>
+        <div class={`${prefixCls}-inner-content`}>
+          <div class={`${prefixCls}-message`}>
+            <Icon type='exclamation-circle' />
+            <div class={`${prefixCls}-message-title`}>
+              {getComponentFromProp(this, h, 'title')}
+            </div>
+          </div>
+          <div class={`${prefixCls}-buttons`}>
+            <Button onClick={this.onCancel} size='small'>
+              {getComponentFromProp(this, h, 'cancelText')}
+            </Button>
+            <Button onClick={this.onConfirm} type={okType} size='small'>
+              {getComponentFromProp(this, h, 'okText')}
+            </Button>
+          </div>
+        </div>
+      </div>
+    )
+    return (
+      <Tooltip
+        {...tooltipProps}
+      >
+        <template slot='title'>
+          {overlay}
+        </template>
+        {this.$slots.default}
+      </Tooltip>
+    )
+  },
+}
+
+</script>

components/popconfirm/index.zh-CN.md

@@ -17,8 +17,8 @@ title: Popconfirm
 
 | 参数 | 说明 | 类型 | 默认值 |
 | --- | --- | --- | --- |
-| cancelText | 取消按钮文字 | string | 取消 |
-| okText | 确认按钮文字 | string | 确定 |
+| cancelText | 取消按钮文字 | string\|function\|slot | 取消 |
+| okText | 确认按钮文字 | string\|function\|slot | 确定 |
 | okType | 确认按钮类型 | string | primary |
 | title | 确认框的描述 | string\|function\|slot | 无 |
 

components/popover/index.vue

@@ -2,7 +2,7 @@
 import Tooltip from '../tooltip'
 import abstractTooltipProps from '../tooltip/abstractTooltipProps'
 import PropTypes from '../_util/vue-types'
-import { getOptionProps } from '../_util/props-util'
+import { getOptionProps, getComponentFromProp } from '../_util/props-util'
 
 export default {
   name: 'popover',
@@ -21,26 +21,10 @@ export default {
     getPopupDomNode () {
       return this.$refs.tooltip.getPopupDomNode()
     },
-    getOverlay (h) {
-      const { title, prefixCls, content, $slots } = this
-      return (
-        <div>
-          {(title || $slots.title) &&
-            <div class={`${prefixCls}-title`}>
-              {typeof title === 'function' ? title(h) : title}
-              {$slots.title}
-            </div>
-          }
-          <div class={`${prefixCls}-inner-content`}>
-            {typeof content === 'function' ? content(h) : content}
-            {$slots.content}
-          </div>
-        </div>
-      )
-    },
   },
 
   render (h) {
+    const { title, prefixCls, content, $slots } = this
     const props = getOptionProps(this)
     delete props.title
     delete props.content
@@ -56,7 +40,16 @@ export default {
         {...tooltipProps}
       >
         <template slot='title'>
-          {this.getOverlay(h)}
+          <div>
+            {(title || $slots.title) &&
+            <div class={`${prefixCls}-title`}>
+              {getComponentFromProp(this, h, 'title')}
+            </div>
+            }
+            <div class={`${prefixCls}-inner-content`}>
+              {getComponentFromProp(this, h, 'content')}
+            </div>
+          </div>
         </template>
         {this.$slots.default}
       </Tooltip>

components/style.js

@@ -12,5 +12,6 @@ import './tabs/style'
 import './input/style'
 import './tooltip/style'
 import './popover/style'
+import './popconfirm/style'
 
 import './menu/style'

contributors.md

@@ -9,7 +9,7 @@ Tabs | done
 Tag | done
 ToolTip | done
 Popconfirm
-Popover
+Popover | done
 Menu
 Carousel
 Mention