add modal confirm

components/_util/props-util.js

@@ -111,9 +111,12 @@ export function getClass (ele) {
   } else if (ele.$vnode && ele.$vnode.data) {
     data = ele.$vnode.data
   }
-  let cls = data.class || data.staticClass || {}
+  const tempCls = data.class || data.staticClass
-  if (typeof cls === 'string') {
+  let cls = {}
-    cls = cls.split(' ').forEach(c => { cls[c.trim()] = true })
+  if (typeof tempCls === 'string') {
+    tempCls.split(' ').forEach(c => { cls[c.trim()] = true })
+  } else {
+    cls = tempCls
   }
   return cls
 }

components/index.js

@@ -72,12 +72,6 @@ import message from './message'
 
 export { default as Spin } from './spin'
 
-const api = {
-  notification,
-  message,
-}
-export { api }
-
 import Select from './select'
 const SelectOption = Select.Option
 const SelectOptGroup = Select.OptGroup
@@ -94,4 +88,23 @@ export { default as Affix } from './affix'
 export { default as Cascader } from './cascader'
 export { default as BackTop } from './back-top'
 export { default as Modal } from './modal'
+import {
+  info,
+  success,
+  error,
+  warning,
+  warn,
+  confirm,
+} from './modal'
 
+const api = {
+  notification,
+  message,
+  modalInfo: info,
+  modalSuccess: success,
+  modalError: error,
+  modalWarning: warning,
+  modalWarn: warn,
+  modalConfirm: confirm,
+}
+export { api }

components/modal/ConfirmDialog.vue

@@ -7,9 +7,9 @@ import { getConfirmLocale } from './locale'
 
 export default {
   functional: true,
-  render () {
+  render (h, context) {
-    const { onCancel, onOk, close, zIndex, afterClose, visible } = this.$props
+    const { data: props } = context
-    const props = this.$props
+    const { onCancel, onOk, close, zIndex, afterClose, visible } = props
     const iconType = props.iconType || 'question-circle'
     const okType = props.okType || 'primary'
     const prefixCls = props.prefixCls || 'ant-confirm'

components/modal/Modal.vue

@@ -7,7 +7,7 @@ import buttonTypes from '../button/buttonTypes'
 const ButtonType = buttonTypes().type
 import LocaleReceiver from '../locale-provider/LocaleReceiver'
 import { getConfirmLocale } from './locale'
-import { initDefaultProps, getComponentFromProp } from '../_util/props-util'
+import { initDefaultProps, getComponentFromProp, getClass, getStyle } from '../_util/props-util'
 
 let mousePosition = null
 let mousePositionEventBinded = false
@@ -125,11 +125,13 @@ export default {
         children={this.renderFooter}
       />
     )
+    const footer = getComponentFromProp(this, 'footer')
+    const title = getComponentFromProp(this, 'title')
     const dialogProps = {
       props: {
         ...this.$props,
-        title: getComponentFromProp(this, 'title'),
+        title,
-        footer: getComponentFromProp(this, 'footer') || defaultFooter,
+        footer: typeof footer === undefined ? defaultFooter : footer,
         visible: visible,
         mousePosition,
       },
@@ -137,6 +139,8 @@ export default {
         ...$listeners,
         close: this.handleCancel,
       },
+      class: getClass(this),
+      style: getStyle(this),
     }
     return (
       <Dialog {...dialogProps}>

components/modal/demo/confirm.md

@@ -0,0 +1,58 @@
+
+<cn>
+#### 确认对话框
+使用 `confirm()` 可以快捷地弹出确认框。
+</cn>
+
+<us>
+#### Confirmation modal dialog
+To use `confirm()` to popup a confirmation modal dialog.
+</us>
+
+```html
+<template>
+  <div>
+    <a-button @click="showConfirm">
+      Confirm
+    </a-button>
+    <a-button @click="showDeleteConfirm" type="dashed">
+      Delete
+    </a-button>
+  </div>
+</template>
+<script>
+export default {
+  methods: {
+    showConfirm() {
+      this.$modalConfirm({
+        title: 'Do you Want to delete these items?',
+        content: 'Some descriptions',
+        onOk() {
+          console.log('OK');
+        },
+        onCancel() {
+          console.log('Cancel');
+        },
+      });
+    },
+
+    showDeleteConfirm() {
+      this.$modalConfirm({
+        title: 'Are you sure delete this task?',
+        content: 'Some descriptions',
+        okText: 'Yes',
+        okType: 'danger',
+        cancelText: 'No',
+        onOk() {
+          console.log('OK');
+        },
+        onCancel() {
+          console.log('Cancel');
+        },
+      });
+    },
+  }
+}
+</script>
+```
+

components/modal/index.js

@@ -1,56 +1,66 @@
 import Modal from './Modal'
-import confirm from './confirm'
+import modalConfirm from './confirm'
 
 // export { ActionButtonProps } from './ActionButton'
 // export { ModalProps, ModalFuncProps } from './Modal'
 
-Modal.info = function (props) {
+const info = function (props) {
   const config = {
     type: 'info',
     iconType: 'info-circle',
     okCancel: false,
     ...props,
   }
-  return confirm(config)
+  return modalConfirm(config)
 }
 
-Modal.success = function (props) {
+const success = function (props) {
   const config = {
     type: 'success',
     iconType: 'check-circle',
     okCancel: false,
     ...props,
   }
-  return confirm(config)
+  return modalConfirm(config)
 }
 
-Modal.error = function (props) {
+const error = function (props) {
   const config = {
     type: 'error',
     iconType: 'cross-circle',
     okCancel: false,
     ...props,
   }
-  return confirm(config)
+  return modalConfirm(config)
 }
 
-Modal.warning = Modal.warn = function (props) {
+const warning = function (props) {
   const config = {
     type: 'warning',
     iconType: 'exclamation-circle',
     okCancel: false,
     ...props,
   }
-  return confirm(config)
+  return modalConfirm(config)
 }
+const warn = warning
 
-Modal.confirm = function (props) {
+const confirm = function (props) {
   const config = {
     type: 'confirm',
     okCancel: true,
     ...props,
   }
-  return confirm(config)
+  return modalConfirm(config)
+}
+
+export {
+  info,
+  success,
+  error,
+  warning,
+  warn,
+  confirm,
 }
 
 export default Modal

components/vc-dialog/Dialog.vue

@@ -11,7 +11,7 @@ let uuid = 0
 let openCount = 0
 
 /* eslint react/no-is-mounted:0 */
-
+function noop () {}
 function getScroll (w, top) {
   let ret = w[`page${top ? 'Y' : 'X'}Offset`]
   const method = `scroll${top ? 'Top' : 'Left'}`
@@ -90,12 +90,12 @@ export default {
 
   watch: {
     visible (val) {
-      this.$nextTick(() => {
-        this.updatedCallback(val)
-      })
       if (val) {
         this.destroyPopup = false
       }
+      this.$nextTick(() => {
+        this.updatedCallback(!val)
+      })
     },
   },
   beforeDestroy () {
@@ -160,7 +160,6 @@ export default {
       }
     },
     onKeydown (e) {
-      console.log('keydown')
       const props = this.$props
       if (props.keyboard && e.keyCode === KeyCode.ESC) {
         this.close(e)
@@ -216,7 +215,7 @@ export default {
         closer = (
           <button
             key='close'
-            onClick={this.close}
+            onClick={this.close || noop}
             aria-label='Close'
             class={`${prefixCls}-close`}
           >
@@ -402,7 +401,7 @@ export default {
           onKeydown={this.onKeydown}
           class={`${prefixCls}-wrap ${wrapClassName || ''}`}
           ref='wrap'
-          onClick={maskClosable ? this.onMaskClick : undefined}
+          onClick={maskClosable ? this.onMaskClick : noop}
           role='dialog'
           aria-labelledby={title ? this.titleId : null}
           style={style}