doc(modal)

demo/documentation/components/card/enUS/index.md

@@ -21,7 +21,7 @@ closable
 |bordered|`boolean`|`true`||
 |closable|`boolean`|`false`||
 
-## Event
+## Events
 |Name|Parameters|Description|
 |-|-|-|
 |close|`()`||

demo/documentation/components/modal/enUS/basic.md

@@ -1,4 +1,5 @@
 # Basic
+Basic usage of modal. You can put anything in modal, a card for example.
 ```html
 <n-button
   size="small"
@@ -31,8 +32,7 @@
 export default {
   data () {
     return {
-      isActive: false,
-      inputValue: ''
+      isActive: false
     }
   }
 }

demo/documentation/components/modal/enUS/controlled.md

@@ -0,0 +1,45 @@
+# Controlled
+Modal can be controlled.
+```html
+<n-button
+  size="small"
+  @click="handleClick"
+>
+  Start Me up
+</n-button>
+<n-modal :show="isActive">
+  <n-card
+    style="width: 600px;"
+    title="Modal"
+    :bordered="false"
+    size="huge"
+  >
+    Countdown {{ timeout / 1000 }}s
+  </n-card>
+</n-modal>
+```
+```js
+export default {
+  data () {
+    return {
+      isActive: false,
+      timeout: 6000
+    }
+  },
+  methods: {
+    handleClick () {
+      this.isActive = true
+      this.timeout = 6000
+      let countdown = () => {
+        if (this.timeout <= 0) {
+          this.isActive = false
+        } else {
+          this.timeout -= 1000
+          setTimeout(countdown, 1000)
+        }
+      }
+      countdown()
+    }
+  }
+}
+```

demo/documentation/components/modal/enUS/index.md

@@ -1,8 +1,51 @@
 # Modal
+It just pops and shows you something.
+
+## Demos
 ```demo
 basic
-maskClosable
+controlled
+mask-closable
+preset-card
 preset-confirm
 preset-confirm-slot
-preset-card
-```
+```
+## V-model
+|Prop|Event|
+|-|-|
+|show|hide|
+
+## Props
+### Modal
+|Name|Type|Default|Description|
+|-|-|-|-|
+|show|`boolean`|`false`||
+|mask-closable|`boolean`|`true`||
+|preset|`'card' \| 'confirm'`|`null`||
+
+### Modal with Preset Card
+See [Card props](n-card#Props)
+### Modal with Preset Confirm
+See [Confirm props](n-confirm#Props)
+
+## Slots
+### Modal without Preset
+|Name|Parameters|Description|
+|-|-|-|
+|default|`()`||
+
+### Modal with Preset Card
+See [Card slots](n-card#Slots)
+### Modal with Preset Confirm
+See [Confirm slots](n-confirm#Slots)
+
+## Events
+### Modal
+|Name|Parameters|Description|
+|-|-|-|
+|hide|`()`||
+
+### Modal with Preset Card
+See [Card events](n-card#Events)
+### Modal with Preset Confirm
+See [Confirm events](n-confirm#Events)

demo/documentation/components/modal/enUS/maskClosable.md

@@ -1,4 +1,5 @@
 # Mask Closable
+You can make mask click not to close modal when using v-model on modal.
 ```html
 <n-button
   size="small"
@@ -6,7 +7,8 @@
 >
   Start Me up
 </n-button>
-<n-modal v-model="isActive" 
+<n-modal
+  v-model="isActive" 
   :mask-closable="false"
   preset="confirm" 
   title="Confirm modal"

demo/documentation/components/modal/enUS/presetCard.md

@@ -1,4 +1,5 @@
 # Use Preset Card
+Modal has some presets, which means you can use props & slots of the preset after set it.
 ```html
 <n-button
   size="small"

demo/documentation/components/modal/enUS/presetConfirm.md

@@ -1,4 +1,5 @@
 # Use Preset Confirm
+An example of preset `confirm`.
 ```html
 <n-button
   size="small"
@@ -14,8 +15,8 @@
   positive-text="submit"
   @positive-click="cancelCallback"
   @negative-click="submitCallback"
-  negative-text="cancel">
-</n-modal>
+  negative-text="cancel"
+/>
 ```
 ```js
 export default {

demo/documentation/components/modal/enUS/presetConfirmSlot.md

@@ -1,4 +1,5 @@
 # Use Preset Confirm (Slot)
+Slots are also related to preset.
 ```html
 <n-button
   size="small"

packages/common/Modal/src/Modal.vue

@@ -14,6 +14,10 @@ export default {
     zindexable,
     themeable
   ],
+  model: {
+    prop: 'show',
+    event: 'hide'
+  },
   props: {
     activateEvent: {
       validator (e) {
@@ -21,7 +25,7 @@ export default {
       },
       default: null
     },
-    value: {
+    show: {
       type: Boolean,
       default: false
     },
@@ -31,15 +35,7 @@ export default {
     },
     preset: {
       type: String,
-      default: ''
-    },
-    title: {
-      type: String,
-      default: 'Title'
-    },
-    closable: {
-      type: Boolean,
-      default: true
+      default: null
     },
     /** to make zindexable work */
     detached: {
@@ -55,7 +51,7 @@ export default {
   },
   computed: {
     active () {
-      return this.value
+      return this.show
     }
   },
   watch: {
@@ -72,7 +68,7 @@ export default {
   },
   methods: {
     deactivate () {
-      this.$emit('input', false)
+      this.$emit('hide', false)
     }
   },
   render (h) {
@@ -83,13 +79,13 @@ export default {
           staticClass: 'n-modal-container',
           ref: 'contentContainer',
           class: {
-            'n-modal-container--active': this.value,
+            'n-modal-container--active': this.show,
             [this.namespace]: this.namespace
           }
         },
         [
           h(NModalOverlay, {
-            props: { active: this.value }
+            props: { active: this.show }
           }),
           h(NModalContent,
             {