merge master

components/_util/BaseMixin.js

@@ -16,9 +16,7 @@ export default {
         } else {
           this.$listeners[eventName](...args.slice(1))
         }
-        return true
       }
-      return false
     },
   },
 }

components/_util/props-util.js

@@ -52,7 +52,7 @@ const getOptionProps = (instance) => {
     const res = {}
     for (const [k, v] of Object.entries(props)) {
       if (v.default !== undefined) {
-        res[k] = v
+        res[k] = typeof v.default === 'function' ? v.default() : v.default
       }
     }
     return { ...res, ...propsData }
@@ -179,6 +179,18 @@ const initDefaultProps = (propTypes, defaultProps) => {
   Object.keys(defaultProps).forEach(k => { propTypes[k] = propTypes[k].def(defaultProps[k]) })
   return propTypes
 }
+
+export function mergeProps () {
+  const args = [].slice.call(arguments, 0)
+  const props = {}
+  args.forEach((p, i) => {
+    for (const [k, v] of Object.entries(p)) {
+      props[k] = props[k] || {}
+      Object.assign(props[k], v)
+    }
+  })
+  return props
+}
 export {
   hasProp,
   filterProps,

components/_util/vnode.js

@@ -70,6 +70,7 @@ export function cloneElement (n, nodeProps, deep) {
     domProps = {},
     style: tempStyle = {},
     class: tempCls = {},
+    scopedSlots = {},
   } = nodeProps
 
   if (typeof data.style === 'string') {
@@ -99,6 +100,7 @@ export function cloneElement (n, nodeProps, deep) {
     attrs: { ...data.attrs, ...attrs },
     class: cls,
     domProps: { ...data.domProps, ...domProps },
+    scopedSlots: { ...data.scopedSlots, ...scopedSlots },
   })
 
   if (node.componentOptions) {

components/pagination/index.en-US.md

@@ -1,7 +1,7 @@
 ## API
 
 ```html
-<Pagination @change="onChange" :total="50" />
+<a-pagination @change="onChange" :total="50" />
 ```
 
 | Property | Description | Type | Default |
@@ -11,7 +11,7 @@
 | defaultPageSize | default number of data items per page | number | 10 |
 | hideOnSinglePage | Whether to hide pager on single page | boolean | false |
 | itemRender | to customize item innerHTML | (page, type: 'page' \| 'prev' \| 'next', originalElement) => vNode | - |
-| pageSize | number of data items per page | number | - |
+| pageSize(.sync) | number of data items per page | number | - |
 | pageSizeOptions | specify the sizeChanger options | string\[] | ['10', '20', '30', '40'] |
 | showQuickJumper | determine whether you can jump to pages directly | boolean | false |
 | showSizeChanger | determine whether `pageSize` can be changed | boolean | false |

components/pagination/index.zh-CN.md

@@ -1,7 +1,7 @@
 ## API
 
 ```html
-<Pagination @change="onChange" :total="50" />
+<a-pagination @change="onChange" :total="50" />
 ```
 
 | 参数 | 说明 | 类型 | 默认值 |
@@ -11,7 +11,7 @@
 | defaultPageSize | 默认的每页条数 | number | 10 |
 | hideOnSinglePage | 只有一页时是否隐藏分页器 | boolean | false |
 | itemRender | 用于自定义页码的结构，可用于优化 SEO | (page, type: 'page' \| 'prev' \| 'next', originalElement) => vNode | - |
-| pageSize | 每页条数 | number | - |
+| pageSize(.sync) | 每页条数 | number | - |
 | pageSizeOptions | 指定每页可以显示多少条 | string\[] | ['10', '20', '30', '40'] |
 | showQuickJumper | 是否可以快速跳转至某页 | boolean | false |
 | showSizeChanger | 是否可以改变 pageSize | boolean | false |

components/steps/demo/customized-progress-dot.md

@@ -10,30 +10,19 @@ You can customize the display for Steps with progress dot style.
 
 ```html
 <template>
-  <a-steps :current="1" :progressDot="customDot">
+<div>
+  <a-steps :current="1">
+    <a-popover slot="progressDot" slot-scope="{index, status, prefixCls}">
+      <template slot="content">
+        <span>step {{index}} status: {{status}}</span>
+      </template>
+      <span :class="`${prefixCls}-icon-dot`"></span>
+    </a-popover>
     <a-step title="Finished" description="You can hover on the dot." />
     <a-step title="In Progress" description="You can hover on the dot." />
     <a-step title="Waiting" description="You can hover on the dot." />
     <a-step title="Waiting" description="You can hover on the dot." />
   </a-steps>
+</div>
 </template>
-<script>
-  export default {
-    data() {
-      return {}
-    },
-    methods: {
-      customDot(dot, {index, status}) {
-        return (
-          <a-popover>
-            <template slot="content">
-              <span>step {index} status: {status}</span>
-            </template>
-            {dot}
-          </a-popover>
-        )
-      }
-    },
-  }
-</script>
 ```

components/steps/index.en-US.md

@@ -6,7 +6,7 @@ The whole of the step bar.
 | -------- | ----------- | ---- | ------- |
 | current | to set the current step, counting from 0. You can overwrite this state by using `status` of `Step` | number | 0 |
 | direction | to specify the direction of the step bar, `horizontal` and `vertical` are currently supported | string | `horizontal` |
-| progressDot | Steps with progress dot style, customize the progress dot by setting it to a function | Boolean or (iconDot, {index, status, title, description}) => vNode | false |
+| progressDot | Steps with progress dot style, customize the progress dot by setting a scoped slot | Boolean or slot="progressDot" slot-scope="{index, status, title, description, prefixCls})" | false |
 | size | to specify the size of the step bar, `default` and `small` are currently supported | string | `default` |
 | status | to specify the status of current step, can be set to one of the following values: `wait` `process` `finish` `error` | string | `process` |
 

components/steps/index.vue

@@ -32,6 +32,7 @@ export default {
     const stepsProps = {
       props,
       on: this.$listeners,
+      scopedSlots: this.$scopedSlots,
     }
     return (
       <VcSteps

components/steps/index.zh-CN.md

@@ -7,7 +7,7 @@
 | --- | --- | --- | --- |
 | current | 指定当前步骤，从 0 开始记数。在子 Step 元素中，可以通过 `status` 属性覆盖状态 | number | 0 |
 | direction | 指定步骤条方向。目前支持水平（`horizontal`）和竖直（`vertical`）两种方向 | string | horizontal |
-| progressDot | 点状步骤条，可以设置为一个 function | Boolean or (iconDot, {index, status, title, description}) => vNode | false |
+| progressDot | 点状步骤条，可以设置为一个 作用域插槽 | Boolean or slot="progressDot" slot-scope="{index, status, title, description, prefixCls})" | false |
 | size | 指定大小，目前支持普通（`default`）和迷你（`small`） | string | default |
 | status | 指定当前步骤的状态，可选 `wait` `process` `finish` `error` | string | process |
 

components/tabs/src/Tabs.vue

@@ -1,4 +1,5 @@
 <script>
+// based on rc-tabs 9.2.4
 import Icon from '../../icon'
 import KeyCode from './KeyCode'
 import TabContent from './TabContent'

components/vc-calendar/demo/antd-calendar.vue

@@ -0,0 +1,236 @@
+<script>
+/* eslint react/no-multi-comp:0, no-console:0 */
+
+import '../assets/index.less'
+import PropTypes from '@/components/_util/vue-types'
+import Calendar from '../'
+import DatePicker from '../src/Picker'
+import zhCN from '../src/locale/zh_CN'
+import enUS from '../src/locale/en_US'
+import '../../vc-time-picker/assets/index.less'
+import TimePickerPanel from '../../vc-time-picker/Panel'
+import BaseMixin from '@/components/_util/BaseMixin'
+
+import moment from 'moment'
+import 'moment/locale/zh-cn'
+import 'moment/locale/en-gb'
+
+const format = 'YYYY-MM-DD HH:mm:ss'
+const cn = window.location.search.indexOf('cn') !== -1
+
+const now = moment()
+if (cn) {
+  now.locale('zh-cn').utcOffset(8)
+} else {
+  now.locale('en-gb').utcOffset(0)
+}
+
+function getFormat (time) {
+  return time ? format : 'YYYY-MM-DD'
+}
+
+const defaultCalendarValue = now.clone()
+defaultCalendarValue.add(-1, 'month')
+
+const timePickerElement = (h) => <TimePickerPanel defaultValue={moment('00:00:00', 'HH:mm:ss')} />
+
+function disabledTime (date) {
+  console.log('disabledTime', date)
+  if (date && (date.date() === 15)) {
+    return {
+      disabledHours () {
+        return [3, 4]
+      },
+    }
+  }
+  return {
+    disabledHours () {
+      return [1, 2]
+    },
+  }
+}
+
+function disabledDate (current) {
+  if (!current) {
+    // allow empty select
+    return false
+  }
+  const date = moment()
+  date.hour(0)
+  date.minute(0)
+  date.second(0)
+  return current.valueOf() < date.valueOf() // can not select days before today
+}
+
+const Demo = {
+  props: {
+    defaultValue: PropTypes.object,
+    defaultCalendarValue: PropTypes.object,
+  },
+  mixins: [BaseMixin],
+  data () {
+    return {
+      showTime: true,
+      showDateInput: true,
+      disabled: false,
+      value: this.defaultValue,
+    }
+  },
+  methods: {
+    onChange (value) {
+      console.log('DatePicker change: ', (value && value.format(format)))
+      this.setState({
+        value,
+      })
+    },
+
+    onShowTimeChange (e) {
+      this.setState({
+        showTime: e.target.checked,
+      })
+    },
+
+    onShowDateInputChange  (e) {
+      this.setState({
+        showDateInput: e.target.checked,
+      })
+    },
+
+    toggleDisabled  () {
+      this.setState({
+        disabled: !this.disabled,
+      })
+    },
+  },
+
+  render (h) {
+    const state = this.$data
+    const calendar = (<Calendar
+      locale={cn ? zhCN : enUS}
+      style={{ zIndex: 1000 }}
+      dateInputPlaceholder='please input'
+      formatter={getFormat(state.showTime)}
+      disabledTime={state.showTime ? disabledTime : null}
+      timePicker={state.showTime ? timePickerElement(h) : null}
+      defaultValue={this.defaultCalendarValue}
+      showDateInput={state.showDateInput}
+      disabledDate={disabledDate}
+    />)
+    return (<div style={{ width: '400px', margin: '20px' }}>
+      <div style={{ marginBottom: '10px' }}>
+        <label>
+          <input
+            type='checkbox'
+            checked={state.showTime}
+            onChange={this.onShowTimeChange}
+          />
+          showTime
+        </label>
+        &nbsp;&nbsp;&nbsp;&nbsp;
+        <label>
+          <input
+            type='checkbox'
+            checked={state.showDateInput}
+            onChange={this.onShowDateInputChange}
+          />
+          showDateInput
+        </label>
+        &nbsp;&nbsp;&nbsp;&nbsp;
+        <label>
+          <input
+            checked={state.disabled}
+            onChange={this.toggleDisabled}
+            type='checkbox'
+          />
+          disabled
+        </label>
+      </div>
+      <div style={{
+        boxSizing: 'border-box',
+        position: 'relative',
+        display: 'block',
+        lineHeight: 1.5,
+        marginBottom: '22px',
+      }}
+      >
+        <DatePicker
+          animation='slide-up'
+          disabled={state.disabled}
+          calendar={calendar}
+          value={state.value}
+          onChange={this.onChange}
+          scopedSlots={{
+            default: ({ value }) => {
+              return (
+                <span tabIndex='0'>
+                  <input
+                    placeholder='please select'
+                    style={{ width: '250px' }}
+                    disabled={state.disabled}
+                    readOnly
+                    tabIndex='-1'
+                    class='ant-calendar-picker-input ant-input'
+                    value={value && value.format(getFormat(state.showTime)) || ''}
+                  />
+                </span>
+              )
+            },
+          }}
+        >
+        </DatePicker>
+      </div>
+    </div>)
+  },
+}
+
+function onStandaloneSelect (value) {
+  console.log('onStandaloneSelect')
+  console.log(value && value.format(format))
+}
+
+function onStandaloneChange (value) {
+  console.log('onStandaloneChange')
+  console.log(value && value.format(format))
+}
+
+export default {
+  render (h) {
+    return (
+      <div
+        style={{
+          zIndex: 1000,
+          position: 'relative',
+          width: '900px',
+          margin: '20px auto',
+        }}
+      >
+        <div>
+          <div style={{ margin: '10px' }}>
+            <Calendar
+              showWeekNumber={false}
+              locale={cn ? zhCN : enUS}
+              defaultValue={now}
+              disabledTime={disabledTime}
+              showToday
+              formatter={getFormat(true)}
+              showOk={false}
+              timePicker={timePickerElement(h)}
+              onChange={onStandaloneChange}
+              disabledDate={disabledDate}
+              onSelect={onStandaloneSelect}
+            />
+          </div>
+          <div style={{ float: 'left', width: '300px' }}>
+            <Demo defaultValue={now} />
+          </div>
+          <div style={{ float: 'right', width: '300px' }}>
+            <Demo defaultCalendarValue={defaultCalendarValue} />
+          </div>
+          <div style={{ clear: 'both' }}></div>
+        </div>
+      </div>
+    )
+  },
+}
+
+</script>

components/vc-calendar/demo/antd-month-calendar.vue

@@ -0,0 +1,160 @@
+<script>
+/* eslint react/no-multi-comp:0, no-console:0 */
+import '../assets/index.less'
+import PropTypes from '@/components/_util/vue-types'
+import DatePicker from '../src/Picker'
+import zhCN from '../src/locale/zh_CN'
+import enUS from '../src/locale/en_US'
+import '../../vc-time-picker/assets/index.less'
+import BaseMixin from '@/components/_util/BaseMixin'
+
+import MonthCalendar from '../src/MonthCalendar'
+
+import moment from 'moment'
+import 'moment/locale/zh-cn'
+import 'moment/locale/en-gb'
+
+const format = 'YYYY-MM'
+const cn = window.location.search.indexOf('cn') !== -1
+
+const now = moment()
+if (cn) {
+  now.locale('zh-cn').utcOffset(8)
+} else {
+  now.locale('en-gb').utcOffset(0)
+}
+
+const defaultCalendarValue = now.clone()
+defaultCalendarValue.add(-1, 'month')
+
+const Demo = {
+  mixins: [BaseMixin],
+  props: {
+    defaultValue: PropTypes.object,
+  },
+
+  data () {
+    return {
+      showTime: true,
+      disabled: false,
+      value: this.defaultValue,
+    }
+  },
+  methods: {
+    onChange (value) {
+      console.log(`DatePicker change: ${value && value.format(format)}`)
+      this.setState({
+        value,
+      })
+    },
+
+    onShowTimeChange (e) {
+      this.setState({
+        showTime: e.target.checked,
+      })
+    },
+
+    toggleDisabled () {
+      this.setState({
+        disabled: !this.disabled,
+      })
+    },
+  },
+
+  render () {
+    const state = this.$data
+    const calendar = (<MonthCalendar
+      locale={cn ? zhCN : enUS}
+      style={{ zIndex: 1000 }}
+    />)
+    return (<div style={{ width: '240px', margin: '20px' }}>
+      <div style={{ marginBottom: '10px' }}>
+        &nbsp;&nbsp;&nbsp;&nbsp;
+        <label>
+          <input
+            checked={state.disabled}
+            onChange={this.toggleDisabled}
+            type='checkbox'
+          /> disabled
+        </label>
+      </div>
+      <div style={{
+        boxSizing: 'border-box',
+        position: 'relative',
+        display: 'block',
+        lineHeight: 1.5,
+        marginBottom: '22px',
+      }}
+      >
+        <DatePicker
+          animation='slide-up'
+          disabled={state.disabled}
+          calendar={calendar}
+          value={state.value}
+          onChange={this.onChange}
+          scopedSlots={{
+            default: ({ value }) => {
+              return (
+                <input
+                  style={{ width: '200px' }}
+                  readOnly
+                  disabled={state.disabled}
+                  value={value && value.format(format)}
+                  placeholder='请选择日期'
+                />
+              )
+            },
+          }}
+        >
+        </DatePicker>
+      </div>
+    </div>)
+  },
+}
+
+function onStandaloneSelect (value) {
+  console.log('month-calendar select', (value && value.format(format)))
+}
+
+function onStandaloneChange (value) {
+  console.log('month-calendar change', (value && value.format(format)))
+}
+
+function disabledDate (value) {
+  return value.year() > now.year() ||
+    value.year() === now.year() && value.month() > now.month()
+}
+
+function onMonthCellContentRender (value) {
+  // console.log('month-calendar onMonthCellContentRender', (value && value.format(format)));
+  return `${value.month() + 1}月`
+}
+export default {
+  render () {
+    return (
+      <div
+        style={{
+          zIndex: 1000,
+          position: 'relative',
+          width: '600px',
+          margin: '0 auto',
+        }}
+      >
+        <MonthCalendar
+          locale={cn ? zhCN : enUS}
+          style={{ zIndex: 1000 }}
+          disabledDate={disabledDate}
+          onSelect={onStandaloneSelect}
+          onChange={onStandaloneChange}
+          monthCellContentRender={onMonthCellContentRender}
+          defaultValue={defaultCalendarValue}
+        />
+
+        <div style={{ marginTop: '200px' }}>
+          <Demo defaultValue={now} />
+        </div>
+      </div>
+    )
+  },
+}
+</script>

components/vc-calendar/demo/antd-range-calendar.vue

@@ -0,0 +1,204 @@
+<script>
+/* eslint react/no-multi-comp:0, no-console:0 */
+
+import '../assets/index.less'
+import '@/components/vc-time-picker/assets/index.less'
+import Picker from '../src/Picker'
+import zhCN from '../src/locale/zh_CN'
+import enUS from '../src/locale/en_US'
+import '../../vc-time-picker/assets/index.less'
+import TimePickerPanel from '../../vc-time-picker/Panel'
+import BaseMixin from '@/components/_util/BaseMixin'
+
+import RangeCalendar from '../src/RangeCalendar'
+
+import moment from 'moment'
+import 'moment/locale/zh-cn'
+import 'moment/locale/en-gb'
+
+const cn = window.location.search.indexOf('cn') !== -1
+
+if (cn) {
+  moment.locale('zh-cn')
+} else {
+  moment.locale('en-gb')
+}
+
+const now = moment()
+if (cn) {
+  now.utcOffset(8)
+} else {
+  now.utcOffset(0)
+}
+
+const defaultCalendarValue = now.clone()
+defaultCalendarValue.add(-1, 'month')
+
+const timePickerElement = (h) => <TimePickerPanel defaultValue={[moment('00:00:00', 'HH:mm:ss'), moment('23:59:59', 'HH:mm:ss')]}/>
+
+function newArray (start, end) {
+  const result = []
+  for (let i = start; i < end; i++) {
+    result.push(i)
+  }
+  return result
+}
+
+function disabledDate (current) {
+  const date = moment()
+  date.hour(0)
+  date.minute(0)
+  date.second(0)
+  return current.isBefore(date) // can not select days before today
+}
+
+function disabledTime (time, type) {
+  console.log('disabledTime', time, type)
+  if (type === 'start') {
+    return {
+      disabledHours () {
+        const hours = newArray(0, 60)
+        hours.splice(20, 4)
+        return hours
+      },
+      disabledMinutes (h) {
+        if (h === 20) {
+          return newArray(0, 31)
+        } else if (h === 23) {
+          return newArray(30, 60)
+        }
+        return []
+      },
+      disabledSeconds () {
+        return [55, 56]
+      },
+    }
+  }
+  return {
+    disabledHours () {
+      const hours = newArray(0, 60)
+      hours.splice(2, 6)
+      return hours
+    },
+    disabledMinutes (h) {
+      if (h === 20) {
+        return newArray(0, 31)
+      } else if (h === 23) {
+        return newArray(30, 60)
+      }
+      return []
+    },
+    disabledSeconds () {
+      return [55, 56]
+    },
+  }
+}
+
+const formatStr = 'YYYY-MM-DD HH:mm:ss'
+function format (v) {
+  return v ? v.format(formatStr) : ''
+}
+
+function isValidRange (v) {
+  return v && v[0] && v[1]
+}
+
+function onStandaloneChange (value) {
+  console.log('onChange')
+  console.log(value[0] && format(value[0]), value[1] && format(value[1]))
+}
+
+function onStandaloneSelect (value) {
+  console.log('onSelect')
+  console.log(format(value[0]), format(value[1]))
+}
+
+const Demo = {
+  mixins: [BaseMixin],
+  data () {
+    return {
+      value: [],
+      hoverValue: [],
+    }
+  },
+  methods: {
+    onChange (value) {
+      console.log('onChange', value)
+      this.setState({ value })
+    },
+
+    onHoverChange (hoverValue) {
+      this.setState({ hoverValue })
+    },
+  },
+  render (h) {
+    const state = this.$data
+    const calendar = (
+      <RangeCalendar
+        hoverValue={state.hoverValue}
+        onHoverChange={this.onHoverChange}
+        showWeekNumber={false}
+        dateInputPlaceholder={['start', 'end']}
+        defaultValue={[now, now.clone().add(1, 'months')]}
+        locale={cn ? zhCN : enUS}
+        disabledTime={disabledTime}
+        timePicker={timePickerElement(h)}
+      />
+    )
+    return (
+      <Picker
+        value={state.value}
+        onChange={this.onChange}
+        animation='slide-up'
+        calendar={calendar}
+      >
+        {
+          ({ value }) => {
+            return (<span>
+              <input
+                placeholder='please select'
+                style={{ width: '350px' }}
+                disabled={state.disabled}
+                readOnly
+                className='ant-calendar-picker-input ant-input'
+                value={isValidRange(value) && `${format(value[0])} - ${format(value[1])}` || ''}
+              />
+            </span>)
+          }
+        }
+      </Picker>)
+  },
+}
+
+export default {
+  render (h) {
+    return (
+      <div>
+        <h2>calendar</h2>
+        <div style={{ margin: '10px' }}>
+          <RangeCalendar
+            showToday={false}
+            showWeekNumber
+            dateInputPlaceholder={['start', 'end']}
+            locale={cn ? zhCN : enUS}
+            showOk={false}
+            showClear
+            format={formatStr}
+            onChange={onStandaloneChange}
+            onSelect={onStandaloneSelect}
+            disabledDate={disabledDate}
+            timePicker={timePickerElement(h)}
+            disabledTime={disabledTime}
+          />
+        </div>
+        <br />
+
+        <div style={{ margin: '20px' }}>
+          <Demo />
+        </div>
+      </div>
+    )
+  },
+}
+
+</script>

components/vc-calendar/demo/full-calendar.vue

@@ -0,0 +1,76 @@
+<script>
+/* eslint react/no-multi-comp:0, no-console:0 */
+import '../assets/index.less'
+import zhCN from '../src/locale/zh_CN'
+import enUS from '../src/locale/en_US'
+import '../../vc-time-picker/assets/index.less'
+import BaseMixin from '@/components/_util/BaseMixin'
+
+import FullCalendar from '@/components/vc-calendar/src/FullCalendar'
+
+import '@/components/vc-select/assets/index.less'
+import Select from '@/components/vc-select'
+
+import moment from 'moment'
+import 'moment/locale/zh-cn'
+import 'moment/locale/en-gb'
+
+const format = 'YYYY-MM-DD'
+const cn = window.location.search.indexOf('cn') !== -1
+
+const now = moment()
+if (cn) {
+  now.locale('zh-cn').utcOffset(8)
+} else {
+  now.locale('en-gb').utcOffset(0)
+}
+
+const defaultCalendarValue = now.clone()
+defaultCalendarValue.add(-1, 'month')
+
+function onSelect (value) {
+  console.log('select', value.format(format))
+}
+
+export default {
+  mixins: [BaseMixin],
+  data () {
+    return {
+      type: 'month',
+    }
+  },
+  methods: {
+    onTypeChange (type) {
+      this.setState({
+        type,
+      })
+    },
+  },
+
+  render () {
+    return (
+      <div style={{ zIndex: 1000, position: 'relative' }}>
+        <FullCalendar
+          style={{ margin: '10px' }}
+          Select={Select}
+          fullscreen={false}
+          onSelect={onSelect}
+          defaultValue={now}
+          locale={cn ? zhCN : enUS}
+        />
+        <FullCalendar
+          style={{ margin: '10px' }}
+          Select={Select}
+          fullscreen
+          defaultValue={now}
+          onSelect={onSelect}
+          type={this.type}
+          onTypeChange={this.onTypeChange}
+          locale={cn ? zhCN : enUS}
+        />
+      </div>
+    )
+  },
+}
+
+</script>

components/vc-calendar/src/Calendar.vue

@@ -10,8 +10,8 @@ import CalendarFooter from './calendar/CalendarFooter'
 import CalendarMixin from './mixin/CalendarMixin'
 import CommonMixin from './mixin/CommonMixin'
 import DateInput from './date/DateInput'
+import enUs from './locale/en_US'
 import { getTimeConfig, getTodayTime, syncTime } from './util'
-
 function goStartMonth () {
   const next = this.sValue.clone()
   next.startOf('month')
@@ -48,12 +48,15 @@ function goDay (direction) {
 
 const Calendar = {
   props: {
-    prefixCls: PropTypes.string,
+    locale: PropTypes.object.def(enUs),
+    visible: PropTypes.bool.def(true),
+    prefixCls: PropTypes.string.def('rc-calendar'),
+    // prefixCls: PropTypes.string,
     defaultValue: PropTypes.object,
     value: PropTypes.object,
     selectedValue: PropTypes.object,
     mode: PropTypes.oneOf(['time', 'date', 'month', 'year', 'decade']),
-    locale: PropTypes.object,
+    // locale: PropTypes.object,
     showDateInput: PropTypes.bool.def(true),
     showWeekNumber: PropTypes.bool,
     showToday: PropTypes.bool.def(true),
@@ -68,8 +71,8 @@ const Calendar = {
     // onPanelChange: PropTypes.func,
     disabledDate: PropTypes.func,
     disabledTime: PropTypes.any,
-    renderFooter: PropTypes.func,
+    renderFooter: PropTypes.func.def(() => null),
-    renderSidebar: PropTypes.func,
+    renderSidebar: PropTypes.func.def(() => null),
   },
 
   mixins: [BaseMixin, CommonMixin, CalendarMixin],
@@ -168,7 +171,8 @@ const Calendar = {
     onDateTableSelect (value) {
       const { timePicker, sSelectedValue } = this
       if (!sSelectedValue && timePicker) {
-        const timePickerDefaultValue = timePicker.props.defaultValue
+        const timePickerProps = getOptionProps(timePicker)
+        const timePickerDefaultValue = timePickerProps.defaultValue
         if (timePickerDefaultValue) {
           syncTime(timePickerDefaultValue, value)
         }
@@ -215,6 +219,7 @@ const Calendar = {
     let timePickerEle = null
 
     if (timePicker && showTimePicker) {
+      console.log(timePicker)
       const timePickerOriginProps = getOptionProps(timePicker)
       const timePickerProps = {
         props: {
@@ -234,7 +239,7 @@ const Calendar = {
       if (timePickerOriginProps.defaultValue !== undefined) {
         timePickerProps.props.defaultOpenValue = timePickerOriginProps.defaultValue
       }
-
+      console.log(timePickerProps)
       timePickerEle = cloneElement(timePicker, timePickerProps)
     }
 
@@ -320,4 +325,4 @@ const Calendar = {
 }
 
 export default Calendar
-</script>
+</script>

components/vc-calendar/src/FullCalendar.vue

@@ -7,24 +7,28 @@ import MonthTable from './month/MonthTable'
 import CalendarMixin from './mixin/CalendarMixin'
 import CommonMixin from './mixin/CommonMixin'
 import CalendarHeader from './full-calendar/CalendarHeader'
-
+import enUs from './locale/en_US'
 const FullCalendar = {
   props: {
+    locale: PropTypes.object.def(enUs),
+    visible: PropTypes.bool.def(true),
+    prefixCls: PropTypes.string.def('rc-calendar'),
     defaultType: PropTypes.string.def('date'),
     type: PropTypes.string,
-    prefixCls: PropTypes.string,
+    // locale: PropTypes.object,
-    locale: PropTypes.object,
     // onTypeChange: PropTypes.func,
     fullscreen: PropTypes.bool.def(false),
     monthCellRender: PropTypes.func,
     dateCellRender: PropTypes.func,
     showTypeSwitch: PropTypes.bool.def(true),
-    Select: PropTypes.func.isRequired,
+    Select: PropTypes.object.isRequired,
     headerComponents: PropTypes.array,
     headerComponent: PropTypes.object, // The whole header component
     headerRender: PropTypes.func,
     showHeader: PropTypes.bool.def(true),
     disabledDate: PropTypes.func,
+    renderFooter: PropTypes.func.def(() => null),
+    renderSidebar: PropTypes.func.def(() => null),
   },
   mixins: [BaseMixin, CommonMixin, CalendarMixin],
   data () {
@@ -72,7 +76,7 @@ const FullCalendar = {
       headerRender,
       disabledDate,
     } = props
-    const { sValue: value, sType: type } = this
+    const { sValue: value, sType: type, $listeners } = this
 
     let header = null
     if (showHeader) {
@@ -88,6 +92,7 @@ const FullCalendar = {
             value,
           },
           on: {
+            ...$listeners,
             typeChange: this.setType,
             valueChange: this.setValue,
           },

components/vc-calendar/src/MonthCalendar.vue

@@ -6,11 +6,18 @@ import CalendarHeader from './calendar/CalendarHeader'
 import CalendarFooter from './calendar/CalendarFooter'
 import CalendarMixin from './mixin/CalendarMixin'
 import CommonMixin from './mixin/CommonMixin'
-
+import enUs from './locale/en_US'
 const MonthCalendar = {
   props: {
+    locale: PropTypes.object.def(enUs),
+    visible: PropTypes.bool.def(true),
+    prefixCls: PropTypes.string.def('rc-calendar'),
     monthCellRender: PropTypes.func,
     dateCellRender: PropTypes.func,
+    disabledDate: PropTypes.func,
+    monthCellContentRender: PropTypes.func,
+    renderFooter: PropTypes.func.def(() => null),
+    renderSidebar: PropTypes.func.def(() => null),
   },
   mixins: [BaseMixin, CommonMixin, CalendarMixin],
 
@@ -74,25 +81,26 @@ const MonthCalendar = {
 
   render () {
     const { mode, sValue: value, $props: props } = this
+    const { prefixCls, locale, disabledDate, monthCellRender, monthCellContentRender, renderFooter } = props
     const children = (
-      <div class={`${props.prefixCls}-month-calendar-content`}>
+      <div class={`${prefixCls}-month-calendar-content`}>
-        <div class={`${props.prefixCls}-month-header-wrap`}>
+        <div class={`${prefixCls}-month-header-wrap`}>
           <CalendarHeader
-            prefixCls={props.prefixCls}
+            prefixCls={prefixCls}
             mode={mode}
             value={value}
-            locale={props.locale}
+            locale={locale}
-            disabledMonth={props.disabledDate}
+            disabledMonth={disabledDate}
-            monthCellRender={props.monthCellRender}
+            monthCellRender={monthCellRender}
-            monthCellContentRender={props.monthCellContentRender}
+            monthCellContentRender={monthCellContentRender}
             onMonthSelect={this.onSelect}
             onValueChange={this.setValue}
             onPanelChange={this.handlePanelChange}
           />
         </div>
         <CalendarFooter
-          prefixCls={props.prefixCls}
+          prefixCls={prefixCls}
-          renderFooter={props.renderFooter}
+          renderFooter={renderFooter}
         />
       </div>
     )

components/vc-calendar/src/Picker.vue

@@ -78,7 +78,7 @@ const Picker = {
     onCalendarKeyDown (event) {
       if (event.keyCode === KeyCode.ESC) {
         event.stopPropagation()
-        this.close(this.focus)
+        this.closeCalendar(this.focus)
       }
     },
 
@@ -94,7 +94,7 @@ const Picker = {
         cause.source === 'keyboard' ||
       (!calendarProps.timePicker && cause.source !== 'dateInput') ||
       cause.source === 'todayButton') {
-        this.close(this.focus)
+        this.closeCalendar(this.focus)
       }
       this.__emit('change', value)
     },
@@ -107,11 +107,11 @@ const Picker = {
     },
 
     onCalendarOk () {
-      this.close(this.focus)
+      this.closeCalendar(this.focus)
     },
 
     onCalendarClear () {
-      this.close(this.focus)
+      this.closeCalendar(this.focus)
     },
 
     onVisibleChange (open) {
@@ -153,11 +153,11 @@ const Picker = {
       }
     },
 
-    open (callback) {
+    openCalendar (callback) {
       this.setOpen(true, callback)
     },
 
-    close (callback) {
+    closeCalendar (callback) {
       this.setOpen(false, callback)
     },
 
@@ -183,20 +183,25 @@ const Picker = {
       align, animation,
       disabled,
       dropdownClassName,
-      transitionName, children,
+      transitionName,
     } = props
-    const state = this.$data
+    const { sValue, sOpen } = this
+    const children = this.$scopedSlots.default
+    const childrenState = {
+      value: sValue,
+      open: sOpen,
+    }
     return (<Trigger
       popupAlign={align}
       builtinPlacements={placements}
       popupPlacement={placement}
-      action={(disabled && !state.sOpen) ? [] : ['click']}
+      action={(disabled && !sOpen) ? [] : ['click']}
       destroyPopupOnHide
       getPopupContainer={getCalendarContainer}
       popupStyle={style}
       popupAnimation={animation}
       popupTransitionName={transitionName}
-      popupVisible={state.sOpen}
+      popupVisible={sOpen}
       onPopupVisibleChange={this.onVisibleChange}
       prefixCls={prefixCls}
       popupClassName={dropdownClassName}
@@ -204,7 +209,7 @@ const Picker = {
       <template slot='popup'>
         {this.getCalendarElement()}
       </template>
-      {cloneElement(children(state, props), { on: { keydown: this.onKeyDown }})}
+      {cloneElement(children(childrenState, props), { on: { keydown: this.onKeyDown }})}
     </Trigger>)
   },
 }

components/vc-calendar/src/calendar/CalendarFooter.vue

@@ -2,9 +2,9 @@
 import PropTypes from '@/components/_util/vue-types'
 import BaseMixin from '@/components/_util/BaseMixin'
 import { getOptionProps } from '@/components/_util/props-util'
-import TodayButton from '../calendar/TodayButton'
+import TodayButton from './TodayButton'
-import OkButton from '../calendar/OkButton'
+import OkButton from './OkButton'
-import TimePickerButton from '../calendar/TimePickerButton'
+import TimePickerButton from './TimePickerButton'
 
 const CalendarFooter = {
   mixins: [BaseMixin],
@@ -19,6 +19,11 @@ const CalendarFooter = {
     value: PropTypes.object,
     renderFooter: PropTypes.func,
     defaultValue: PropTypes.object,
+    locale: PropTypes.object,
+    showToday: PropTypes.bool,
+    disabledDate: PropTypes.func,
+    showTimePicker: PropTypes.bool,
+    okDisabled: PropTypes.bool,
   },
   methods: {
     onSelect (value) {
@@ -44,16 +49,16 @@ const CalendarFooter = {
         },
         on: $listeners,
       }
-      let nowEl
+      let nowEl = null
       if (showToday) {
         nowEl = <TodayButton {...btnProps} />
       }
       delete btnProps.props.value
-      let okBtn
+      let okBtn = null
       if (showOk === true || showOk !== false && !!timePicker) {
         okBtn = <OkButton {...btnProps} />
       }
-      let timePickerBtn
+      let timePickerBtn = null
       if (timePicker) {
         timePickerBtn = <TimePickerButton {...btnProps} />
       }
@@ -61,12 +66,12 @@ const CalendarFooter = {
       let footerBtn
       if (nowEl || timePickerBtn || okBtn) {
         footerBtn = (<span class={`${prefixCls}-footer-btn`}>
-          {[nowEl, timePickerBtn, okBtn]}
+          {nowEl}{timePickerBtn}{okBtn}
         </span>)
       }
       const cls = {
         [`${prefixCls}-footer`]: true,
-        [`${prefixCls}-footer-show-ok`]: okBtn,
+        [`${prefixCls}-footer-show-ok`]: !!okBtn,
       }
       footerEl = (
         <div class={cls}>

components/vc-calendar/src/calendar/CalendarHeader.vue

@@ -5,7 +5,7 @@ import { getOptionProps } from '@/components/_util/props-util'
 import MonthPanel from '../month/MonthPanel'
 import YearPanel from '../year/YearPanel'
 import DecadePanel from '../decade/DecadePanel'
-
+function noop () {}
 function goMonth (direction) {
   const next = this.value.clone()
   next.add(direction, 'months')
@@ -34,6 +34,7 @@ const CalendarHeader = {
     enablePrev: PropTypes.any.def(1),
     enableNext: PropTypes.any.def(1),
     disabledMonth: PropTypes.func,
+    mode: PropTypes.any,
   },
   data () {
     this.nextMonth = goMonth.bind(this, 1)
@@ -47,7 +48,9 @@ const CalendarHeader = {
   methods: {
     onMonthSelect (value) {
       this.__emit('panelChange', value, 'date')
-      if (this.__emit('monthSelect', value)) {
+      if (this.$listeners.monthSelect) {
+        this.__emit('monthSelect', value)
+      } else {
         this.__emit('valueChange', value)
       }
     },
@@ -75,7 +78,7 @@ const CalendarHeader = {
       const year = (<a
         class={`${prefixCls}-year-select`}
         role='button'
-        onClick={showTimePicker ? null : () => this.showYearPanel('date')}
+        onClick={showTimePicker ? noop : () => this.showYearPanel('date')}
         title={locale.yearSelect}
       >
         {value.format(locale.yearFormat)}
@@ -83,7 +86,7 @@ const CalendarHeader = {
       const month = (<a
         class={`${prefixCls}-month-select`}
         role='button'
-        onClick={showTimePicker ? null : this.showMonthPanel}
+        onClick={showTimePicker ? noop : this.showMonthPanel}
         title={locale.monthSelect}
       >
         {locale.monthFormat ? value.format(locale.monthFormat) : localeData.monthsShort(value)}

components/vc-calendar/src/calendar/OkButton.vue

@@ -2,21 +2,19 @@
 function noop () {}
 export default {
   functional: true,
-  render: function (createElement, context) {
+  render (createElement, context) {
-    const { data, listeners = {}} = context
+    const { props, listeners = {}} = context
-    const { prefixCls, locale, okDisabled } = data
+    const { prefixCls, locale, okDisabled } = props
     const { ok = noop } = listeners
     let className = `${prefixCls}-ok-btn`
     if (okDisabled) {
       className += ` ${prefixCls}-ok-btn-disabled`
     }
-    return (<a
+    return (
-      class={className}
+      <a class={className} role='button' onClick={okDisabled ? noop : ok}>
-      role='button'
+        {locale.ok}
-      onClick={okDisabled ? noop : ok}
+      </a>
-    >
+    )
-      {locale.ok}
-    </a>)
   },
 
 }

components/vc-calendar/src/calendar/TimePickerButton.vue

@@ -2,11 +2,11 @@
 function noop () {}
 export default {
   functional: true,
-  render: function (createElement, context) {
+  render (h, context) {
-    const { data, listeners = {}} = context
+    const { props, listeners = {}} = context
     const {
       prefixCls, locale, showTimePicker,
-      timePickerDisabled } = data
+      timePickerDisabled } = props
     const { closeTimePicker = noop, openTimePicker = noop } = listeners
     const className = {
       [`${prefixCls}-time-picker-btn`]: true,
@@ -16,13 +16,11 @@ export default {
     if (!timePickerDisabled) {
       onClick = showTimePicker ? closeTimePicker : openTimePicker
     }
-    return (<a
+    return (
-      class={className}
+      <a class={className} role='button' onClick={onClick}>
-      role='button'
+        {showTimePicker ? locale.dateSelect : locale.timeSelect}
-      onClick={onClick}
+      </a>
-    >
+    )
-      {showTimePicker ? locale.dateSelect : locale.timeSelect}
-    </a>)
   },
 
 }

components/vc-calendar/src/calendar/TodayButton.vue

@@ -4,7 +4,7 @@ function noop () {}
 export default {
   functional: true,
   render (createElement, context) {
-    const { data, listeners = {}} = context
+    const { props, listeners = {}} = context
     const {
       prefixCls,
       locale,
@@ -14,7 +14,7 @@ export default {
       disabledDate,
       // onToday,
       text,
-    } = data
+    } = props
     const { today = noop } = listeners
     const localeNow = (!text && timePicker ? locale.now : text) || locale.today
     const disabledToday =

components/vc-calendar/src/date/DateInput.vue

@@ -23,7 +23,7 @@ const DateInput = {
   data () {
     const selectedValue = this.selectedValue
     return {
-      str: selectedValue && selectedValue.format(this.props.format) || '',
+      str: selectedValue && selectedValue.format(this.format) || '',
       invalid: false,
     }
   },
@@ -45,7 +45,6 @@ const DateInput = {
   },
   methods: {
     updateState () {
-      console.log('关注下')
       this.cachedSelectionStart = this.$refs.dateInputInstance.selectionStart
       this.cachedSelectionEnd = this.$refs.dateInputInstance.selectionEnd
       // when popup show, click body will call this, bug!
@@ -131,7 +130,7 @@ const DateInput = {
           value={str}
           disabled={disabled}
           placeholder={placeholder}
-          onChange={this.onInputChange}
+          onInput={this.onInputChange}
         />
       </div>
       {showClear ? <a

components/vc-calendar/src/date/DateTBody.vue

@@ -4,7 +4,7 @@ import { getOptionProps } from '@/components/_util/props-util'
 import cx from 'classnames'
 import DateConstants from './DateConstants'
 import { getTitleString, getTodayTime } from '../util/'
-
+function noop () {}
 function isSameDay (one, two) {
   return one && two && one.isSame(two, 'day')
 }
@@ -35,7 +35,7 @@ const DateTBody = {
     dateRender: PropTypes.func,
     disabledDate: PropTypes.func,
     prefixCls: PropTypes.string,
-    selectedValue: PropTypes.oneOfType([PropTypes.object, PropTypes.arrayOf(PropTypes.object)]),
+    selectedValue: PropTypes.oneOfType([PropTypes.any, PropTypes.arrayOf(PropTypes.any)]),
     value: PropTypes.object,
     hoverValue: PropTypes.any.def([]),
     showWeekNumber: PropTypes.bool,
@@ -48,6 +48,8 @@ const DateTBody = {
       showWeekNumber, dateRender, disabledDate,
       hoverValue,
     } = props
+    const { $listeners = {}} = this
+    const { select = noop, dayHover = noop } = $listeners
     let iIndex
     let jIndex
     let current
@@ -97,7 +99,7 @@ const DateTBody = {
       if (showWeekNumber) {
         weekNumberCell = (
           <td
-            key={dateTable[passed].week()}
+            key={`week-${dateTable[passed].week()}`}
             role='gridcell'
             class={weekNumberCellClass}
           >
@@ -208,9 +210,8 @@ const DateTBody = {
         dateCells.push(
           <td
             key={passed}
-            onClick={disabled ? undefined : props.onSelect.bind(null, current)}
+            onClick={disabled ? noop : select.bind(null, current)}
-            onMouseenter={disabled
+            onMouseenter={disabled ? noop : dayHover.bind(null, current)}
-              ? undefined : props.onDayHover && props.onDayHover.bind(null, current) || undefined}
             role='gridcell'
             title={getTitleString(current)} class={cls}
           >

components/vc-calendar/src/date/DateTHead.vue

@@ -5,7 +5,7 @@ import moment from 'moment'
 export default {
   functional: true,
   render (createElement, context) {
-    const { data: props } = context
+    const { props } = context
     const value = props.value
     const localeData = value.localeData()
     const prefixCls = props.prefixCls
@@ -51,4 +51,4 @@ export default {
     </thead>)
   },
 }
-</script>
+</script>

components/vc-calendar/src/date/DateTable.vue

@@ -5,15 +5,15 @@ import DateTBody from './DateTBody'
 export default {
   functional: true,
   render (createElement, context) {
-    const { data, listeners = {}} = context
+    const { props, listeners = {}} = context
-    const prefixCls = data.prefixCls
+    const prefixCls = props.prefixCls
-    const props = {
+    const bodyProps = {
-      props: data,
+      props,
       on: listeners,
     }
-    return (<table class = {`${prefixCls}-table`} cellSpacing='0' role='grid'>
+    return (<table class={`${prefixCls}-table`} cellSpacing='0' role='grid'>
-      <DateTHead {...props}/>
+      <DateTHead {...bodyProps}/>
-      <DateTBody {...props}/>
+      <DateTBody {...bodyProps}/>
     </table>)
   },
 }

components/vc-calendar/src/decade/DecadePanel.vue

@@ -29,10 +29,9 @@ export default {
     rootPrefixCls: PropTypes.string,
   },
   data () {
-    this.prefixCls = `${this.rootPrefixCls}-decade-panel`
     this.nextCentury = goYear.bind(this, 100)
     this.previousCentury = goYear.bind(this, -100)
-    this.state = {
+    return {
       sValue: this.value || this.defaultValue,
     }
   },
@@ -46,7 +45,7 @@ export default {
     const endYear = startYear + 99
     const decades = []
     let index = 0
-    const prefixCls = this.prefixCls
+    const prefixCls = `${this.rootPrefixCls}-decade-panel`
 
     for (let rowIndex = 0; rowIndex < ROW; rowIndex++) {
       decades[rowIndex] = []
@@ -99,7 +98,7 @@ export default {
     })
 
     return (
-      <div class={this.prefixCls}>
+      <div class={prefixCls}>
         <div class={`${prefixCls}-header`}>
           <a
             class={`${prefixCls}-prev-century-btn`}

components/vc-calendar/src/full-calendar/CalendarHeader.vue

@@ -12,7 +12,7 @@ const CalendarHeader = {
     yearSelectTotal: PropTypes.number.def(20),
     // onValueChange: PropTypes.func,
     // onTypeChange: PropTypes.func,
-    Select: PropTypes.func,
+    Select: PropTypes.object,
     prefixCls: PropTypes.string,
     type: PropTypes.string,
     showTypeSwitch: PropTypes.bool,

components/vc-calendar/src/mixin/CalendarMixin.js

@@ -3,7 +3,7 @@ import BaseMixin from '@/components/_util/BaseMixin'
 import { hasProp } from '@/components/_util/props-util'
 import moment from 'moment'
 import { isAllowedDate, getTodayTime } from '../util/index'
-
+function noop () {}
 function getNow () {
   return moment()
 }
@@ -56,7 +56,7 @@ const CalendarMixin = {
     },
 
     renderRoot (newProps) {
-      const props = this.props
+      const props = this.$props
       const prefixCls = props.prefixCls
 
       const className = {
@@ -71,7 +71,7 @@ const CalendarMixin = {
           ref='rootInstance'
           class={className}
           tabIndex='0'
-          onKeydown={this.onKeyDown}
+          onKeydown={this.onKeyDown || noop}
         >
           {newProps.children}
         </div>

components/vc-calendar/src/mixin/CommonMixin.js

@@ -1,16 +1,4 @@
-import PropTypes from '@/components/_util/vue-types'
-import enUs from '../locale/en_US'
-
 export default {
-  props: {
-    locale: PropTypes.object.def(enUs),
-    visible: PropTypes.bool.def(true),
-    // onSelect: PropTypes.func,
-    prefixCls: PropTypes.string.def('rc-calendat'),
-    // onChange: PropTypes.func,
-    // onOk: PropTypes.func,
-  },
-
   // getDefaultProps () {
   //   return {
   //     locale: enUs,

components/vc-calendar/src/month/MonthPanel.vue

@@ -17,6 +17,12 @@ function noop () {
 const MonthPanel = {
   mixins: [BaseMixin],
   props: {
+    value: PropTypes.any,
+    defaultValue: PropTypes.any,
+    cellRender: PropTypes.any,
+    contentRender: PropTypes.any,
+    locale: PropTypes.any,
+    rootPrefixCls: PropTypes.string,
     // onChange: PropTypes.func,
     disabledDate: PropTypes.func,
     // onSelect: PropTypes.func,

components/vc-calendar/src/month/MonthTable.vue

@@ -22,6 +22,9 @@ const MonthTable = {
     cellRender: PropTypes.func,
     prefixCls: PropTypes.string,
     value: PropTypes.object,
+    locale: PropTypes.any,
+    contentRender: PropTypes.any,
+    disabledDate: PropTypes.func,
   },
   data () {
     return {
@@ -71,14 +74,14 @@ const MonthTable = {
     const today = getTodayTime(value)
     const months = this.months()
     const currentMonth = value.month()
-    const { prefixCls, locale, contentRender, cellRender } = props
+    const { prefixCls, locale, contentRender, cellRender, disabledDate } = props
     const monthsEls = months.map((month, index) => {
       const tds = month.map(monthData => {
         let disabled = false
-        if (props.disabledDate) {
+        if (disabledDate) {
           const testValue = value.clone()
           testValue.month(monthData.value)
-          disabled = props.disabledDate(testValue)
+          disabled = disabledDate(testValue)
         }
         const classNameMap = {
           [`${prefixCls}-cell`]: 1,

components/vc-calendar/src/range-calendar/CalendarPart.vue

@@ -19,6 +19,7 @@ const CalendarPart = {
     locale: PropTypes.any,
     showDateInput: PropTypes.bool,
     showTimePicker: PropTypes.bool,
+    showWeekNumber: PropTypes.bool,
     format: PropTypes.any,
     placeholder: PropTypes.any,
     disabledDate: PropTypes.any,
@@ -62,7 +63,6 @@ const CalendarPart = {
     }
     const index = direction === 'left' ? 0 : 1
     const timePickerProps = getOptionProps(timePicker)
-    console.log('timePickerProps', timePickerProps)
     const timePickerEle = shouldShowTimePicker &&
       cloneElement(timePicker, {
         props: {
@@ -141,4 +141,4 @@ const CalendarPart = {
 }
 
 export default CalendarPart
-</script>
+</script>

components/vc-calendar/src/year/YearPanel.vue

@@ -25,6 +25,7 @@ export default {
     rootPrefixCls: PropTypes.string,
     value: PropTypes.object,
     defaultValue: PropTypes.object,
+    locale: PropTypes.object,
   },
   data () {
     this.nextDecade = goYear.bind(this, 10)
@@ -59,9 +60,8 @@ export default {
   },
 
   render () {
-    const props = this.$props
+    const { sValue: value, locale, $listeners = {}} = this
-    const value = this.sValue
+    const decadePanelShow = $listeners.decadePanelShow || noop
-    const locale = props.locale
     const years = this.years()
     const currentYear = value.year()
     const startYear = parseInt(currentYear / 10, 10) * 10
@@ -103,7 +103,7 @@ export default {
     })
 
     return (
-      <div class={this.prefixCls}>
+      <div class={prefixCls}>
         <div>
           <div class={`${prefixCls}-header`}>
             <a
@@ -115,7 +115,7 @@ export default {
             <a
               class={`${prefixCls}-decade-select`}
               role='button'
-              onClick={props.onDecadePanelShow}
+              onClick={decadePanelShow}
               title={locale.decadeSelect}
             >
               <span class={`${prefixCls}-decade-select-content`}>

components/vc-pagination/Options.vue

@@ -112,7 +112,7 @@ export default {
           <input
             type='text'
             value={this.goInputText}
-            onChange={this.handleChange}
+            onInput={this.handleChange}
             onKeyup={this.go}
           />
           {locale.page}

components/vc-pagination/Pagination.vue

@@ -301,7 +301,7 @@ export default {
               value={this.stateCurrentInputValue}
               onKeydown={this.handleKeyDown}
               onKeyup={this.handleKeyUp}
-              onChange={this.handleKeyUp}
+              onInput={this.handleKeyUp}
               size='3'
             />
             <span class={`${prefixCls}-slash`}>／</span>

components/vc-steps/Step.vue

@@ -28,9 +28,13 @@ export default {
   methods: {
     renderIconNode () {
       const {
-        prefixCls, progressDot, stepNumber, status,
+        prefixCls, stepNumber, status,
         iconPrefix,
       } = getOptionProps(this)
+      let progressDot = this.progressDot
+      if (progressDot === undefined) {
+        progressDot = this.$scopedSlots.progressDot
+      }
       const icon = getComponentFromProp(this, 'icon')
       const title = getComponentFromProp(this, 'title')
       const description = getComponentFromProp(this, 'description')
@@ -48,7 +52,7 @@ export default {
         if (typeof progressDot === 'function') {
           iconNode = (
             <span class={`${prefixCls}-icon`}>
-              {progressDot(iconDot, { index: stepNumber - 1, status, title, description })}
+              {progressDot({ index: stepNumber - 1, status, title, description, prefixCls })}
             </span>
           )
         } else {

components/vc-steps/Steps.vue

@@ -24,7 +24,7 @@ export default {
     progressDot: PropTypes.oneOfType([
       PropTypes.bool,
       PropTypes.func,
-    ]).def(false),
+    ]),
     current: PropTypes.number.def(0),
   },
   data () {
@@ -84,8 +84,12 @@ export default {
   render () {
     const {
       prefixCls, direction,
-      labelPlacement, iconPrefix, status, size, current, progressDot,
+      labelPlacement, iconPrefix, status, size, current, $scopedSlots,
-    } = getOptionProps(this)
+    } = this
+    let progressDot = this.progressDot
+    if (progressDot === undefined) {
+      progressDot = $scopedSlots.progressDot
+    }
     const { lastStepOffsetWidth, flexSupported } = this
     const filteredChildren = filterEmpty(this.$slots.default)
     const lastIndex = filteredChildren.length - 1
@@ -112,10 +116,11 @@ export default {
                 stepNumber: `${index + 1}`,
                 prefixCls,
                 iconPrefix,
-                progressDot,
+                progressDot: this.progressDot,
                 ...childProps,
               },
               on: getEvents(child),
+              scopedSlots: $scopedSlots,
             }
             if (!flexSupported && direction !== 'vertical' && index !== lastIndex) {
               stepProps.props.itemWidth = `${100 / lastIndex}%`

components/vc-time-picker/Panel.vue

@@ -29,6 +29,7 @@ const Panel = {
       },
     },
     value: PropTypes.object,
+    defaultValue: PropTypes.object,
     placeholder: PropTypes.string,
     format: PropTypes.string,
     inputReadOnly: PropTypes.bool.def(false),

components/vc-time-picker/TimePicker.vue

@@ -56,6 +56,7 @@ export default {
     focusOnOpen: PropTypes.bool,
     // onKeyDown: PropTypes.func,
     autoFocus: PropTypes.bool,
+    id: PropTypes.string,
   }, {
     clearText: 'clear',
     prefixCls: 'rc-time-picker',
@@ -63,6 +64,7 @@ export default {
     inputReadOnly: false,
     popupClassName: '',
     align: {},
+    id: '',
     allowEmpty: true,
     showHour: true,
     showMinute: true,
@@ -252,7 +254,7 @@ export default {
 
   render () {
     const {
-      prefixCls, placeholder, placement, align,
+      prefixCls, placeholder, placement, align, id,
       disabled, transitionName, getPopupContainer, name, autoComplete,
       autoFocus, inputReadOnly, sOpen, sValue, onFocus, onBlur,
     } = this
@@ -288,8 +290,8 @@ export default {
             onFocus={onFocus}
             onBlur={onBlur}
             autoFocus={autoFocus}
-            onChange={noop}
             readOnly={!!inputReadOnly}
+            id={id}
           />
           <span class={`${prefixCls}-icon`}/>
         </span>

components/vc-time-picker/index.js

@@ -1 +1,2 @@
+// based on rc-time-picker 3.3.1
 export { default } from './TimePicker'