merge master

components/checkbox/Checkbox.vue

@@ -27,15 +27,23 @@ export default {
     value: [String, Number, Boolean],
     name: String,
     indeterminate: Boolean,
-    onGroupChange: Function,
   },
   model: {
     prop: 'checked',
   },
+  inject: {
+    context: { default: undefined },
+  },
   data () {
-    const { checked, defaultChecked } = this
+    const { context, checked, defaultChecked, value } = this
+    let stateChecked
+    if (context && context.checkedStatus) {
+      stateChecked = context.checkedStatus.has(value)
+    }
     return {
-      stateChecked: checked === undefined ? defaultChecked : checked,
+      stateChecked: stateChecked === undefined
+        ? checked === undefined ? defaultChecked : checked
+        : stateChecked,
     }
   },
   computed: {
@@ -64,26 +72,27 @@ export default {
     handleChange (event) {
       const targetChecked = event.target.checked
       this.$emit('input', targetChecked)
-      const { name, value, checked } = this
-      if (checked === undefined) {
+      const { name, value, checked, context, stateChecked } = this
+      if ((checked === undefined && !context) || (context && context.value === undefined)) {
         this.stateChecked = targetChecked
       }
       const target = {
         name,
         value,
-        checked: targetChecked,
+        checked: !stateChecked,
       }
-      this.$emit('change', {
-        target,
-        stopPropagation () {
-          event.stopPropagation()
-        },
-        preventDefault () {
-          event.preventDefault()
-        },
-      })
-      if (this.isGroup) {
-        this.onGroupChange({ target })
+      if (this.context) {
+        this.context.handleChange({ target })
+      } else {
+        this.$emit('change', {
+          target,
+          stopPropagation () {
+            event.stopPropagation()
+          },
+          preventDefault () {
+            event.preventDefault()
+          },
+        })
       }
     },
   },
@@ -91,6 +100,9 @@ export default {
     checked (val) {
       this.stateChecked = val
     },
+    'context.checkedStatus': function (checkedStatus) {
+      this.stateChecked = checkedStatus.has(this.value)
+    },
   },
 }
 </script>

components/checkbox/Group.vue

@@ -31,6 +31,11 @@ export default {
   model: {
     prop: 'value',
   },
+  provide () {
+    return {
+      context: this,
+    }
+  },
   data () {
     const { value, defaultValue } = this
     return {
@@ -50,9 +55,6 @@ export default {
       })
     },
   },
-  created () {
-    this.setChildCheckbox(this.$slots.default)
-  },
   methods: {
     handleChange (event) {
       const target = event.target
@@ -73,31 +75,12 @@ export default {
       this.$emit('input', newVal)
       this.$emit('change', newVal)
     },
-    setChildCheckbox (children = []) {
-      const { options, $slots, checkedStatus } = this
-      if (options.length === 0 && $slots.default) {
-        children.forEach(({ componentOptions = {}, children: newChildren }) => {
-          const { Ctor, propsData } = componentOptions
-          if (Ctor && Ctor.options.name === 'Checkbox') {
-            propsData.isGroup = true
-            propsData.onGroupChange = this.handleChange
-            propsData.checked = checkedStatus.has(propsData.value)
-          } else {
-            this.setChildCheckbox(newChildren)
-          }
-        }, this)
-      }
-    },
   },
   mounted () {
   },
-  beforeUpdate () {
-    this.setChildCheckbox(this.$slots.default)
-  },
   watch: {
     value (val) {
       this.stateValue = val
-      this.setChildCheckbox(this.$slots.default)
     },
   },
   components: {

components/checkbox/demo/controller.vue

@@ -1,18 +1,62 @@
 <template>
   <div>
-    <Checkbox @change="onChange">Checkbox</Checkbox>
+    <p :style="{ marginBottom: '20px' }">
+      <Checkbox
+        :checked="checked"
+        :disabled="disabled"
+        @change="onChange"
+      >
+        {{label}}
+      </Checkbox>
+    </p>
+    <p>
+      <AntButton
+        type="primary"
+        size="small"
+        @click="toggleChecked"
+      >
+        {{!checked ? 'Check' : 'Uncheck'}}
+      </AntButton>
+      <AntButton
+        :style="{ marginLeft: '10px' }"
+        type="primary"
+        size="small"
+        @click="toggleDisable"
+      >
+        {{!disabled ? 'Disable' : 'Enable'}}
+      </AntButton>
+    </p>
   </div>
 </template>
 <script>
-import { Checkbox } from 'antd'
+import { Checkbox, Button } from 'antd'
 export default {
+  data () {
+    return {
+      checked: true,
+      disabled: false,
+    }
+  },
+  computed: {
+    label () {
+      const { checked, disabled } = this
+      return `${checked ? 'Checked' : 'Unchecked'}-${disabled ? 'Disabled' : 'Enabled'}`
+    },
+  },
   methods: {
+    toggleChecked () {
+      this.checked = !this.checked
+    },
+    toggleDisable () {
+      this.disabled = !this.disabled
+    },
     onChange (e) {
-      console.log(`checked = ${e.target.checked}`)
+      this.checked = e.target.checked
     },
   },
   components: {
     Checkbox,
+    AntButton: Button,
   },
 }
 </script>

components/checkbox/demo/group.vue

@@ -4,7 +4,7 @@
     <br />
     <CheckboxGroup :options="plainOptions" :defaultValue="['Apple']" @change="onChange" />
     <br />
-    <CheckboxGroup :options="options" :defaultValue="['Pear']" @change="onChange" />
+    <CheckboxGroup :options="options" :value="['Pear']" @change="onChange" />
     <br />
     <CheckboxGroup :options="optionsWithDisabled" disabled :defaultValue="['Apple']" @change="onChange" />
   </div>

components/checkbox/demo/index.vue

@@ -0,0 +1,35 @@
+<template>
+  <div>
+    <h1>Basic</h1>
+    <Basic />
+    <h1>CheckAll</h1>
+    <CheckAll />
+    <h1>Controller</h1>
+    <Controller />
+    <h1>Disabled</h1>
+    <Disabled />
+    <h1>Group</h1>
+    <Group />
+    <h1>Layout</h1>
+    <Layout />
+  </div>
+</template>
+<script>
+import Basic from './basic'
+import CheckAll from './check-all'
+import Controller from './controller'
+import Disabled from './disabled'
+
+import Group from './group'
+import Layout from './layout'
+export default {
+  components: {
+    Basic,
+    CheckAll,
+    Disabled,
+    Controller,
+    Group,
+    Layout,
+  },
+}
+</script>

components/checkbox/demo/layout.vue

@@ -1,18 +1,27 @@
 <template>
-  <div>
-    <Checkbox @change="onChange">Checkbox</Checkbox>
-  </div>
+  <CheckboxGroup @change="onChange">
+    <Row>
+      <Col :span="8"><Checkbox value="A">A</Checkbox></Col>
+      <Col :span="8"><Checkbox value="B">B</Checkbox></Col>
+      <Col :span="8"><Checkbox value="C">C</Checkbox></Col>
+      <Col :span="8"><Checkbox value="D">D</Checkbox></Col>
+      <Col :span="8"><Checkbox value="E">E</Checkbox></Col>
+    </Row>
+  </CheckboxGroup>
 </template>
 <script>
-import { Checkbox } from 'antd'
+import { Checkbox, Row, Col } from 'antd'
 export default {
   methods: {
-    onChange (e) {
-      console.log(`checked = ${e.target.checked}`)
+    onChange (checkedValues) {
+      console.log('checked = ', checkedValues)
     },
   },
   components: {
     Checkbox,
+    Row,
+    Col,
+    CheckboxGroup: Checkbox.Group,
   },
 }
 </script>

components/index.js

@@ -13,3 +13,7 @@ export { default as Rate } from './rate'
 export { default as ToolTip } from './tooltip'
 
 export { default as Pagination } from './pagination'
+
+export { default as Row } from './grid/row'
+
+export { default as Col } from './grid/col'

components/style.js

@@ -2,3 +2,4 @@ import './button/style'
 import './icon/style'
 import './radio/style'
 import './checkbox/style'
+import './grid/style'

components/tooltip/demo/index.vue

@@ -2,19 +2,37 @@
   <div>
     <tool-tip
       placement="top"
-      :title="showText">
-      <h1 @click="boom" style="display: inline-block">This is just a test, put your cursor here</h1>
+      :title="showText"
+      :autoAdjustOverflow="autoAdjustOverflow"
+    >
+      <h1 @click="boom" class="test">撞到边缘翻转位置 & 点击更新</h1>
     </tool-tip>
-    <ant-button>{{showText}}</ant-button>
+    <ant-button @click="reverse" type="primary">{{autoAdjustOverflow ? '启用' : '关闭'}}自动调整中</ant-button>
     <div class="box">
+      <h2>切换arrowPointAtCenter模式</h2>
+      <ant-button @click="change">{{arrowPointAtCenter}}</ant-button>
       <table>
         <tr v-for="(tr, index) in table" :key="index">
           <td v-for="(td, i) in tr" :key="i">
-            <tool-tip v-if="td" :placement="td" :title="td"><AntButton type="primary">{{td}}</AntButton></tool-tip>
+            <tool-tip
+              v-if="td"
+              :placement="td"
+              :title="td"
+              :arrowPointAtCenter="arrowPointAtCenter"
+            >
+              <AntButton type="primary">{{td}}</AntButton>
+            </tool-tip>
           </td>
         </tr>
       </table>
     </div>
+    <div>
+      <p>
+        <tool-tip :arrowPointAtCenter="true" title="Consider using the NamedModulesPlugin for module names." placement="topLeft">
+          <ant-button>arrowPointAtCenter arrowPointAtCenter arrowPointAtCenter</ant-button>
+        </tool-tip>
+      </p>
+    </div>
   </div>
 </template>
 
@@ -33,7 +51,9 @@
           ['left', '', '', '', 'right'],
           ['leftBottom', '', '', '', 'rightBottom'],
           ['', 'bottomLeft', 'bottom', 'bottomRight', ''],
-        ]
+        ],
+        arrowPointAtCenter: false,
+        autoAdjustOverflow: true,
       }
 		},
     methods: {
@@ -43,6 +63,12 @@
         } else {
 		      this.showText += ' '
         }
+      },
+      change() {
+		    this.arrowPointAtCenter = !this.arrowPointAtCenter
+      },
+      reverse() {
+		    this.autoAdjustOverflow = !this.autoAdjustOverflow
       }
     },
     components: {
@@ -52,6 +78,10 @@
 	}
 </script>
 <style scoped lang="less">
+  .test {
+    margin: 20px;
+    display: inline-block;
+  }
   .box {
     margin: 100px;
   }

components/tooltip/tooltip.vue

@@ -34,6 +34,8 @@ export default {
       left: 0,
       top: 0,
       realPlacement: this.placement,
+      t1: null,
+      t2: null,
     }
   },
   computed: {
@@ -72,13 +74,30 @@ export default {
             top: 0,
           }
         },
+        methods: {
+          hideSelf (e) {
+            if (that.t1) {
+              clearTimeout(that.t1)
+              that.t1 = null
+            }
+            if (that.mouseLeaveDelay) {
+              that.t2 = window.setTimeout(() => {
+                if (e.relatedTarget === that.$el) {
+                  return
+                }
+                that.visible = false
+              }, +that.mouseLeaveDelay * 1e3)
+            }
+          },
+        },
         render (h) {
           return (
-            <transition name='zoom-big'>
+            <transition name={that.transitionName}>
               <div
                 v-show={that.visible}
                 class={`ant-tooltip ant-tooltip-placement-${that.realPlacement}`}
                 style={{ left: this.left + 'px', top: this.top + 'px' }}
+                onMouseleave={this.hideSelf}
               >
                 <div class='ant-tooltip-content'>
                   <div class='ant-tooltip-arrow'/>
@@ -127,29 +146,36 @@ export default {
         return old === fn ? old : [old, fn]
       }
     },
-    computeOffset (popup, text, placement) {
+    computeOffset (popup, text, placement, scale) {
       let { width, height, top, left } = text
       //  you cant change the properties of DOMRect
       top += window.scrollY
       left += window.scrollX
+      // FIXME: we can get the numbers from scale, but that's not what we really want
+      const p = { width: popup.width / scale, height: popup.height / scale }
       const ret = { left, top }
 
-      if (/top/.test(placement)) ret.top -= popup.height + 5
-      if (/bottom/.test(placement)) ret.top += height + 5
-      if (/left/.test(placement)) ret.left -= popup.width + 10
-      if (/right/.test(placement)) ret.left += width + 5
+      if (/top/.test(placement)) ret.top -= p.height
+      if (/bottom/.test(placement)) ret.top += height
+      if (/left/.test(placement)) ret.left -= p.width
+      if (/right/.test(placement)) ret.left += width
 
+      // FIXME: magic number 20 & 14 comes from the offset of triangle
       if (/Left/.test(placement)) {
+        if (this.arrowPointAtCenter) ret.left += width / 2 - 20
       } else if (/Right/.test(placement)) {
-        ret.left += (width - popup.width)
+        ret.left += (width - p.width)
+        if (this.arrowPointAtCenter) ret.left -= width / 2 - 20
       } else if (/(top)|(bottom)/.test(placement)) {
-        ret.left += (width - popup.width) / 2
+        ret.left += (width - p.width) / 2
       }
       if (/Top/.test(placement)) {
+        if (this.arrowPointAtCenter) ret.top += height / 2 - 14
       } else if (/Bottom/.test(placement)) {
-        ret.top += (height - popup.height)
+        ret.top += (height - p.height)
+        if (this.arrowPointAtCenter) ret.top -= height / 2 - 14
       } else if (/(left)|(right)/.test(placement)) {
-        ret.top += (height - popup.height) / 2
+        ret.top += (height - p.height) / 2
       }
       return ret
     },
@@ -158,34 +184,62 @@ export default {
         this.visible = true
         this.$nextTick(() => {
           const popup = this.vnode.$el.getBoundingClientRect()
+          const [, scale = 1] = window.getComputedStyle(this.vnode.$el).transform.match(/matrix\((.*?),/) || []
           const content = this.$el.getBoundingClientRect()
-          const place = this.checkPosition(popup, content, this.placement)
+          const place = this.autoAdjustOverflow ? this.checkPosition(popup, content, this.placement, scale) : this.placement
           this.realPlacement = place
-          const { left, top } = this.computeOffset(popup, content, place)
+          const { left, top } = this.computeOffset(popup, content, place, scale)
           this.vnode.left = left
           this.vnode.top = top
         })
         this.onPopupAlign(this.realPlacement, this.$el, this.vnode.$el, { offset: [0, 0] })
       })
     },
-    hideNode () {
+    hideNode (e) {
+      if (!this.vnode) return
+      if (e.relatedTarget === this.vnode.$el) {
+        return
+      }
       this.visible = false
     },
+    checkShow (e) {
+      if (this.t2) {
+        clearTimeout(this.t2)
+        this.t2 = null
+      }
+      if (this.mouseEnterDelay) {
+        this.t1 = window.setTimeout(() => {
+          this.showNode(e)
+        }, +this.mouseEnterDelay * 1e3)
+      }
+    },
+    checkHide (e) {
+      if (this.t1) {
+        clearTimeout(this.t1)
+        this.t1 = null
+      }
+      if (this.mouseLeaveDelay) {
+        this.t2 = window.setTimeout(() => {
+          this.hideNode(e)
+        }, +this.mouseLeaveDelay * 1e3)
+      }
+    },
   },
   render (h) {
     const inner = this.$slots.default[0]
     inner.data = inner.data || {}
     inner.data.on = inner.data.on || {}
-    inner.data.on.mouseenter = this.addEventHandle(inner.data.on.mouseenter, this.showNode)
-    inner.data.on.mouseleave = this.addEventHandle(inner.data.on.mouseleave, this.hideNode)
+    inner.data.on.mouseenter = this.addEventHandle(inner.data.on.mouseenter, this.checkShow)
+    inner.data.on.mouseleave = this.addEventHandle(inner.data.on.mouseleave, this.checkHide)
 
     return this.$slots.default[0]
   },
   updated () {
     if (!this.vnode) return
     const popup = this.vnode.$el.getBoundingClientRect()
+    const [, scale = 1] = window.getComputedStyle(this.vnode.$el).transform.match(/matrix\((.*?),/) || []
     const content = this.$el.getBoundingClientRect()
-    const { left, top } = this.computeOffset(popup, content, this.realPlacement)
+    const { left, top } = this.computeOffset(popup, content, this.realPlacement, scale)
     this.vnode.left = left
     this.vnode.top = top
   },