From 51bc6468e067c32c2fd45bdb4cbab79d28f90e0c Mon Sep 17 00:00:00 2001
From: 07akioni <07akioni2@gmail.com>
Date: Fri, 5 Jul 2019 19:57:05 +0800
Subject: [PATCH 01/11] feat(date-time-picker): an available version.

---
 demo/components/datePickerDemo.vue      |   5 +-
 packages/common/DatePicker/src/main.vue | 401 +++++++++++++++++++-----
 styles/Button.scss                      |  19 ++
 styles/DatePicker.scss                  | 241 ++++++++++++++
 styles/index.scss                       |   1 +
 styles/theme/default.scss               |  17 +
 6 files changed, 607 insertions(+), 77 deletions(-)
 create mode 100644 styles/DatePicker.scss

diff --git a/demo/components/datePickerDemo.vue b/demo/components/datePickerDemo.vue
index 5c7d0001e..a7271302a 100644
--- a/demo/components/datePickerDemo.vue
+++ b/demo/components/datePickerDemo.vue
@@ -14,7 +14,10 @@
           Basic Usage
         </div>
         <div class="n-doc-section__view">
-          <n-date-picker v-model="timestamp" />timestamp: {{ timestamp }}
+          <div style="width: 100%;">
+            timestamp: {{ timestamp }}
+          </div>
+          <n-date-picker v-model="timestamp" />
         </div>
         <div class="n-doc-section__source">
           <textarea>scaffold</textarea>
diff --git a/packages/common/DatePicker/src/main.vue b/packages/common/DatePicker/src/main.vue
index 33c3ff8a5..d5b2c6021 100644
--- a/packages/common/DatePicker/src/main.vue
+++ b/packages/common/DatePicker/src/main.vue
@@ -1,93 +1,231 @@
 <template>
-  <div>
-    DatePicker<br>
+  <div
+    ref="datePicker"
+    class="n-date-picker"
+    :class="{
+      [`n-date-picker--${size}-size`]: true
+    }"
+    @click="handleCalendarClick"
+  >
     <input
       v-model="displayDateTimeString"
-      placeholder="Please select date time"
+      class="n-date-picker__input"
+      placeholder="Select date and time"
+      @click="openCalendar"
+      @focus="openCalendar"
       @blur="handleDateTimeInputBlur"
       @keyup.enter="handleDateTimeInputEnter"
     >
-    <input
-      v-model="displayDateString"
-      placeholder="Please select date"
-    >
-    <input
-      v-model="displayTimeString"
-      placeholder="Please select time"
-    >
-    <button @click="prevYear">
-      prevYear
-    </button>
-    <button @click="prevMonth">
-      prevMonth
-    </button>
-    <button @click="nextMonth">
-      nextMonth
-    </button>
-    <button @click="nextYear">
-      nextYear
-    </button>
-    <button @click="clear">
-      clear
-    </button>
-    <button @click="handleDateInputAndTimeInputConfirmClick">
-      confirm
-    </button>
-    <button @click="setSelectedDateTimeToNow">
-      now
-    </button>
-    <br>
-    <div>year {{ calendarTime.year() }}, month {{ calendarTime.month() + 1 }}</div>
-    <div
-      v-if="true"
-      style="display: flex; width: 280px; flex-wrap: wrap;"
-    >
-      <div class="date n-date-picker-calendar__date--day">
-        Sun
-      </div>
-      <div class="date n-date-picker-calendar__date--day">
-        Mon
-      </div>
-      <div class="date n-date-picker-calendar__date--day">
-        Tue
-      </div>
-      <div class="date n-date-picker-calendar__date--day">
-        Wed
-      </div>
-      <div class="date n-date-picker-calendar__date--day">
-        Thu
-      </div>
-      <div class="date n-date-picker-calendar__date--day">
-        Fri
-      </div>
-      <div class="date n-date-picker-calendar__date--day">
-        Sat
-      </div>
-      <div
-        v-for="dateItem in dateArray(calendarTime, selectedDateTime, currentTime)"
-        :key="dateItem.timestamp"
-        class="date"
-        :class="{
-          'n-date-picker-calendar__date--current': dateItem.isCurrentDate,
-          'n-date-picker-calendar__date--selected': dateItem.isSelectedDate,
-          'n-date-picker-calendar__date--in-display-month': dateItem.isDateOfDisplayMonth
-        }"
-        @click="handleDateClick(dateItem)"
-      >
-        {{ dateItem.date }}
-      </div>
+    <div class="n-date-picker__icon">
+      <n-icon
+        size="20"
+        type="ios-calendar"
+      />
     </div>
+    <transition name="n-date-picker-calendar--transition">
+      <div
+        v-if="showCalendar"
+        class="n-date-picker-calendar"
+      >
+        <div class="n-date-picker-calendar__date-time-input-wrapper">
+          <input
+            v-model="displayDateString"
+            class="n-date-picker-calendar__date-input"
+            placeholder="Select date"
+          >
+          <div
+            ref="timeSelector"
+            class="n-date-picker-calendar__time-input-wrapper"
+          >
+            <input
+              v-model="displayTimeString"
+              class="n-date-picker-calendar__time-input"
+              placeholder="Select time"
+              @click="openTimeSelector"
+              @input="handleTimeInput"
+            >
+            <transition name="n-date-picker-time-selector--transition">
+              <div
+                v-if="showTimeSelector"
+                class="n-date-picker-time-selector"
+              >
+                <div class="n-date-picker-time-selector__selection-wrapper">
+                  <div class="n-date-picker-time-selector__hour">
+                    <div
+                      v-for="hour in hours"
+                      :key="hour"
+                      class="n-date-picker-time-selector__item"
+                      :class="{
+                        'n-date-picker-time-selector__item--active':
+                          hour === computedHour
+                      }"
+                      @click="setHour(hour)"
+                    >
+                      {{ hour }}
+                    </div>
+                  </div>
+                  <div class="n-date-picker-time-selector__minute">
+                    <div
+                      v-for="minute in minutes"
+                      :key="minute"
+                      class="n-date-picker-time-selector__item"
+                      :class="{
+                        'n-date-picker-time-selector__item--active':
+                          minute === computedMinute
+                      }"
+                      @click="setMinute(minute)"
+                    >
+                      {{ minute }}
+                    </div>
+                  </div>
+                  <div class="n-date-picker-time-selector__hour">
+                    <div
+                      v-for="second in seconds"
+                      :key="second"
+                      class="n-date-picker-time-selector__item"
+                      :class="{
+                        'n-date-picker-time-selector__item--active':
+                          second === computedSecond
+                      }"
+                      @click="setSecond(second)"
+                    >
+                      {{ second }}
+                    </div>
+                  </div>
+                </div>
+                <div class="n-date-picker-time-selector__actions">
+                  <n-button
+                    size="tiny"
+                    round
+                    @click="handleTimeCancelClick"
+                  >
+                    Cancel
+                  </n-button>
+                  <n-button
+                    size="tiny"
+                    round
+                    auto-text-color
+                    type="primary"
+                    @click="handleTimeConfirmClick"
+                  >
+                    Confirm
+                  </n-button>
+                </div>
+              </div>
+            </transition>
+          </div>
+        </div>
+        <div class="n-date-picker-calendar__month-modifier">
+          <div
+            class="n-date-picker-calendar__fast-prev"
+            @click="prevYear"
+          >
+            <n-icon
+              type="ios-arrow-back"
+              size="14"
+            />
+            <n-icon
+              type="ios-arrow-back"
+              size="14"
+            />
+          </div>
+          <div
+            class="n-date-picker-calendar__prev"
+            @click="prevMonth"
+          >
+            <n-icon
+              type="ios-arrow-back"
+              size="14"
+            />
+          </div>
+          <div class="n-date-picker-calendar__month-year">
+            {{ calendarTime.startOf('month').format('MMMM') }} {{ calendarTime.year() }}
+          </div>
+          <div
+            class="n-date-picker-calendar__next"
+            @click="nextMonth"
+          >
+            <n-icon
+              type="ios-arrow-forward"
+              size="14"
+            />
+          </div>
+          <div
+            class="n-date-picker-calendar__fast-next"
+            @click="nextYear"
+          >
+            <n-icon
+              type="ios-arrow-forward"
+              size="14"
+            />
+            <n-icon
+              type="ios-arrow-forward"
+              size="14"
+            />
+          </div>
+        </div>
+        <div class="n-date-picker-calendar__weekdays">
+          <div
+            v-for="weekday in weekdays"
+            :key="weekday"
+            class="n-date-picker-calendar__weekday"
+          >
+            {{ weekday }}
+          </div>
+        </div>
+        <div class="n-date-picker-calendar__divider" />
+        <div class="n-date-picker-calendar__dates">
+          <div
+            v-for="dateItem in dateArray(calendarTime, selectedDateTime, currentTime)"
+            :key="dateItem.timestamp"
+            class="n-date-picker-calendar__date"
+            :class="{
+              'n-date-picker-calendar__date--current': dateItem.isCurrentDate,
+              'n-date-picker-calendar__date--selected': dateItem.isSelectedDate,
+              'n-date-picker-calendar__date--in-display-month': dateItem.isDateOfDisplayMonth
+            }"
+            @click="handleDateClick(dateItem)"
+          >
+            {{ dateItem.date }}
+          </div>
+        </div>
+        <div class="n-date-picker-calendar__actions">
+          <n-button
+            size="tiny"
+            round
+            @click="setSelectedDateTimeToNow"
+          >
+            Now
+          </n-button>
+          <n-button
+            size="tiny"
+            round
+            auto-text-color
+            type="primary"
+            @click="handleDateInputAndTimeInputConfirmClick"
+          >
+            Confirm
+          </n-button>
+        </div>
+      </div>
+    </transition>
   </div>
 </template>
 
 <script>
 import moment from 'moment'
 import { dateArray, setDate } from './utils'
+import NIcon from '../../Icon'
+import NButton from '../../Button'
 
 const dateFormat = 'YYYY-MM-DD HH:mm:ss'
 
 export default {
   name: 'NDatePicker',
+  components: {
+    NIcon,
+    NButton
+  },
   model: {
     prop: 'value',
     event: 'change'
@@ -96,6 +234,10 @@ export default {
     value: {
       type: Number,
       required: true
+    },
+    size: {
+      type: String,
+      default: 'default'
     }
   },
   data () {
@@ -106,12 +248,117 @@ export default {
       calendarTime: moment(),
       selectedDateTime: null,
       showCalendar: false,
+      showTimeSelector: false,
       calendar: [],
-      currentTime: moment()
+      currentTime: moment(),
+      weekdays: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
+      hours: ['00', '01', '02', '03', '04', '05', '06', '07', '08', '09', '10', '11', '12', '13', '14', '15', '16', '17', '18', '19', '20', '21', '22', '23'],
+      minutes: ['00', '01', '02', '03', '04', '05', '06', '07', '08', '09', '10', '11', '12', '13', '14', '15', '16', '17', '18', '19', '20', '21', '22', '23', '24', '25', '26', '27', '28', '29', '30', '31', '32', '33', '34', '35', '36', '37', '38', '39', '40', '41', '42', '43', '44', '45', '46', '47', '48', '49', '50', '51', '52', '53', '54', '55', '56', '57', '58', '59'],
+      seconds: ['00', '01', '02', '03', '04', '05', '06', '07', '08', '09', '10', '11', '12', '13', '14', '15', '16', '17', '18', '19', '20', '21', '22', '23', '24', '25', '26', '27', '28', '29', '30', '31', '32', '33', '34', '35', '36', '37', '38', '39', '40', '41', '42', '43', '44', '45', '46', '47', '48', '49', '50', '51', '52', '53', '54', '55', '56', '57', '58', '59']
+    }
+  },
+  computed: {
+    computedHour () {
+      if (this.selectedDateTime) return this.selectedDateTime.format('HH')
+      else return null
+    },
+    computedMinute () {
+      if (this.selectedDateTime) return this.selectedDateTime.format('mm')
+      else return null
+    },
+    computedSecond () {
+      if (this.selectedDateTime) return this.selectedDateTime.format('ss')
+      else return null
+    }
+  },
+  watch: {
+    selectedDateTime (newValue) {
+      this.$emit('change', newValue.valueOf())
     }
   },
   methods: {
     dateArray,
+    justifySelectedDateTimeAfterChangeTimeString () {
+      if (this.selectedDateTime === null) {
+        // case here is impossible for now, because you can't clear time
+      } else {
+        const newDisplayDateTimeString = this.displayDateString + ' ' + this.displayTimeString
+        const newSelectedDateTime = moment(newDisplayDateTimeString, 'YYYY-MM-DD HH:mm:ss', true)
+        if (newSelectedDateTime.isValid()) {
+          this.selectedDateTime = newSelectedDateTime
+        }
+      }
+      this.refreshSelectedDateTime()
+    },
+    handleTimeInput (e) {
+      const newDisplayDateTimeString = this.displayDateString + ' ' + e.target.value
+      const newSelectedDateTime = moment(newDisplayDateTimeString, 'YYYY-MM-DD HH:mm:ss', true)
+      if (newSelectedDateTime.isValid()) {
+        this.selectedDateTime = newSelectedDateTime
+        this.refreshSelectedDateTime()
+      }
+    },
+    handleTimeConfirmClick () {
+      this.justifySelectedDateTimeAfterChangeTimeString()
+      this.closeTimeSelector()
+    },
+    handleTimeCancelClick () {
+      this.closeTimeSelector()
+    },
+    setHour (hour) {
+      try {
+        const timeArray = this.displayTimeString.split(':')
+        timeArray[0] = hour
+        this.displayTimeString = timeArray.join(':')
+      } catch (err) {
+
+      } finally {
+        this.justifySelectedDateTimeAfterChangeTimeString()
+      }
+    },
+    setMinute (minute) {
+      try {
+        const timeArray = this.displayTimeString.split(':')
+        timeArray[1] = minute
+        this.displayTimeString = timeArray.join(':')
+      } catch (err) {
+
+      } finally {
+        this.justifySelectedDateTimeAfterChangeTimeString()
+      }
+    },
+    setSecond (second) {
+      try {
+        const timeArray = this.displayTimeString.split(':')
+        timeArray[2] = second
+        this.displayTimeString = timeArray.join(':')
+      } catch (err) {
+
+      } finally {
+        this.justifySelectedDateTimeAfterChangeTimeString()
+      }
+    },
+    openTimeSelector () {
+      if (this.selectedDateTime === null) {
+        this.selectedDateTime = moment()
+
+        this.refreshSelectedDateTime()
+      }
+      this.showTimeSelector = true
+    },
+    closeTimeSelector () {
+      this.showTimeSelector = false
+    },
+    handleCalendarClick (e) {
+      if (!this.$refs.timeSelector.contains(e.target) && this.$refs.timeSelector !== e.target) {
+        this.closeTimeSelector()
+      }
+    },
+    nativeCloseCalendar (e) {
+      if (e.target.contains(this.$refs.datePicker) && e.target !== this.$refs.datePicker) {
+        this.closeCalendar()
+      }
+    },
     clear () {
       this.selectedDateTime = null
       this.displayDateTimeString = ''
@@ -131,7 +378,7 @@ export default {
         this.selectedDateTime = setDate(this.selectedDateTime, dateItem)
       }
       this.calendarTime = moment(this.selectedDateTime)
-      this.$emit('change', this.selectedDateTime.valueOf())
+
       this.refreshSelectedDateTime()
     },
     refreshSelectedDateTime () {
@@ -149,7 +396,6 @@ export default {
         this.selectedDateTime = newSelectedDateTime
         this.calendarTime = moment(newSelectedDateTime)
         this.refreshSelectedDateTime()
-        this.$emit('change', this.selectedDateTime.valueOf())
       }
     },
     handleDateTimeInputBlur () {
@@ -157,7 +403,6 @@ export default {
       if (newSelectedDateTime.isValid()) {
         this.selectedDateTime = newSelectedDateTime
         this.calendarTime = moment(newSelectedDateTime)
-        this.$emit('change', this.selectedDateTime.valueOf())
       }
       this.refreshSelectedDateTime()
     },
@@ -170,12 +415,16 @@ export default {
         this.selectedDateTime = moment()
       }
       this.refreshSelectedDateTime()
+      this.closeCalendar()
     },
     openCalendar () {
       this.showCalendar = true
+      document.body.addEventListener('click', this.nativeCloseCalendar)
     },
     closeCalendar () {
       this.showCalendar = false
+      this.showTimeSelector = false
+      document.body.removeEventListener('click', this.nativeCloseCalendar)
     },
     toggleCalendar () {
 
diff --git a/styles/Button.scss b/styles/Button.scss
index 9c8265060..39057bd36 100644
--- a/styles/Button.scss
+++ b/styles/Button.scss
@@ -23,6 +23,25 @@
     cursor: not-allowed;
     opacity: .43;
   }
+  &.n-button--tiny-size {
+    font-size: $button-tiny-font-size;
+    height: $tiny-height;
+    padding: 0 14px;
+    &.is-round {
+      border-radius: $tiny-height / 2;
+    }
+    .n-button__content {
+      line-height: $tiny-height;
+    }
+    .n-button__icon {
+      height: 18px;
+      width: 18px;
+      .n-icon {
+        font-size: 18px;
+        display: block;
+      }
+    }
+  }
   &.n-button--small-size {
     font-size: $button-small-font-size;
     height: $small-height;
diff --git a/styles/DatePicker.scss b/styles/DatePicker.scss
new file mode 100644
index 000000000..ed252bfbf
--- /dev/null
+++ b/styles/DatePicker.scss
@@ -0,0 +1,241 @@
+@import './mixins/mixins.scss';
+@import './theme/default.scss';
+
+@include b(date-picker) {
+  position: relative;
+  width: 240px;
+  @include fade-up-transition(date-picker-calendar);
+  @include fade-up-transition(date-picker-time-selector);
+  .n-date-picker__icon {
+    position: absolute;
+    right: 13px;
+    top: 50%;
+    transform: translateY(-50%);
+    color: rgba(221, 238, 247, 0.3);
+    height: 20px;
+  }
+  .n-date-picker__input, .n-date-picker-calendar__date-input, .n-date-picker-calendar__time-input {
+    -webkit-appearance: none;
+    box-sizing: border-box;
+    border: none;
+    border-radius: $input-border-radius;
+    outline: none;
+    color: #fff;
+    font-family: $default-font-family;
+    background-color: $input-background-color;
+    height: 34px;
+    width: 100%;
+    caret-color: $input-caret-color;
+    box-shadow: none;
+    transition: box-shadow .3s $default-cubic-bezier, background-color .3s $default-cubic-bezier;
+    padding: 0 14px;
+    font-size: 14px;
+    &:focus:hover {
+      box-shadow: inset 0 0 0px 1px $main-color, 0px 0px 10px 1px #366555;
+    }
+    &:hover {
+      box-shadow: inset 0 0 0px 1px $main-color;
+    }
+    &:focus {
+      box-shadow: inset 0 0 0px 1px $main-color;
+      background-color: $focus-input-background-color;
+    }
+    &::placeholder {
+      color: $input-placeholder-color;
+      opacity: 1;
+    }
+  }
+  &.n-date-picker--small-size {
+    .n-date-picker__input {
+      height: $small-height;
+      line-height: $small-height;
+      font-size: $small-input-font-size;
+    }
+  }
+  &.n-date-picker--default-size, &.n-date-picker--medium-size {
+    .n-date-picker__input {
+      height: $default-height;
+      line-height: $default-height;
+      font-size: $default-input-font-size;
+    }
+  }
+  &.n-date-picker--large-size {
+    .n-date-picker__input {
+      height: $large-height;
+      line-height: $large-height;
+      font-size: $large-input-font-size;
+    }
+  }
+}
+
+@include b(date-picker-calendar) {
+  z-index: 1;
+  position: absolute;
+  top: calc(100% + 4px);
+  left: 0;
+  width: 351px;
+  background:rgba(75,81,106,1);
+  box-shadow:0px 2px 20px 0px rgba(0,0,0,0.16);
+  border-radius: 6px;
+  color:rgba(233,233,236,1);
+  .n-date-picker-calendar__date-time-input-wrapper {
+    padding: 14px 24px;
+    border-bottom: 1px solid rgba(255, 255, 255, .07);
+    display: flex;
+    justify-content: space-between;
+    .n-date-picker-calendar__time-input-wrapper {
+      position: relative;
+    }
+    .n-date-picker-calendar__date-input, .n-date-picker-calendar__time-input {
+      width: 145px;
+    }
+  }
+  .n-date-picker-calendar__month-modifier {
+    display: flex;
+    height: 41px;
+    align-items: center;
+    padding-left: 24px;
+    padding-right: 24px;
+    .n-date-picker-calendar__prev, .n-date-picker-calendar__next, .n-date-picker-calendar__fast-prev, .n-date-picker-calendar__fast-next {
+      cursor: pointer;
+      display: flex;
+      .n-icon {
+        width: 5px;
+        &::before {
+          width: 5px;
+          color: rgba(255, 255, 255, .3); 
+        }
+      }
+    }
+    .n-date-picker-calendar__fast-prev, .n-date-picker-calendar__next {
+      margin-right: 10px;
+    }
+    .n-date-picker-calendar__month-year {
+      font-size: 14px;
+      font-weight: 700;
+      line-height: 17px;
+      flex-grow: 1;
+      text-align: center;
+    }
+  }
+  .n-date-picker-calendar__weekdays {
+    padding: 8px 24px 14px 24px;
+    display: flex;
+    justify-content: space-between;
+    .n-date-picker-calendar__weekday {
+      line-height: 15px;
+      width: 30px;
+      text-align: center;
+      font-size: 12px;
+    }
+  }
+  .n-date-picker-calendar__dates {
+    padding: 8px 3px 8px 24px;
+    display: flex;
+    justify-content: space-between;
+    flex-wrap: wrap;
+    .n-date-picker-calendar__date {
+      position: relative;
+      width: 24px;
+      height: 24px;
+      line-height: 24px;
+      text-align: center;
+      font-size: 12px;
+      margin-right: 21px;
+      margin-top: 8px;
+      margin-bottom: 8px;
+      border-radius: 3px;
+      cursor: pointer;
+      transition: background-color .2s $default-cubic-bezier, color .2s $default-cubic-bezier;
+      &:not(.n-date-picker-calendar__date--in-display-month) {
+        color: rgba(233, 233, 236, 0.4);
+      }
+      &.n-date-picker-calendar__date--current {
+        color: $main-color;
+        &::after {
+          position: absolute;
+          top: 3px;
+          right: 3px;
+          content: "";
+          height: 4px;
+          width: 4px;
+          border-radius: 2px;
+          background-color: $main-color;
+          transition: background-color .2s $default-cubic-bezier;
+        }
+      }
+      &.n-date-picker-calendar__date--selected {
+        color: rgba(75, 81, 106, 1)!important;
+        background-color: $main-color!important;
+        &::after {
+          background-color: rgba(75, 81, 106, 1);
+        }
+      }
+      &:hover {
+        background-color: rgba(99, 226, 183, 0.2);
+      }
+    }
+    border-bottom: 1px solid rgba(255, 255, 255, .07);
+  }
+  .n-date-picker-calendar__divider {
+    margin: 0 24px;
+    height: 1px;
+    background-color: rgba(255, 255, 255, .07);
+  }
+  .n-date-picker-calendar__actions {
+    height: 47px;
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+    .n-button {
+      margin-bottom: 0;
+    }
+  }
+}
+
+@include b(date-picker-time-selector) {
+  z-index: 1;
+  position: absolute;
+  top: calc(100% + 4px);
+  background-color: rgba(97, 104, 132, 1);
+  box-shadow:0px 2px 20px 0px rgba(0,0,0,0.16);
+  font-size: 12px;
+  border-radius: 6px;
+  width: 180px;
+  .n-date-picker-time-selector__selection-wrapper {
+    height: 244px;
+    border-bottom: 1px solid rgba(255, 255, 255, .07);
+    display: flex;
+  }
+  .n-date-picker-time-selector__hour, .n-date-picker-time-selector__minute, .n-date-picker-time-selector__second {
+    @include scrollbar;
+    width: 60px;
+    height: 244px;
+    flex-direction: column;
+    overflow-y: scroll;
+    .n-date-picker-time-selector__item {
+      cursor: pointer;
+      height: 35px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      transition: background-color .2s $default-cubic-bezier, color .2s $default-cubic-bezier;
+      background: transparent;
+      &:hover {
+        background-color: rgba(99,226,183,0.12);
+      }
+      &.n-date-picker-time-selector__item--active {
+        background-color: rgba(99,226,183,0.12);
+        color: rgba(99, 226, 183, 1);
+      }
+    }
+  }
+  .n-date-picker-time-selector__actions {
+    margin: 10px 15px;
+    display: flex;
+    justify-content: space-between;
+    .n-button {
+      margin: 0;
+    }
+  }
+}
\ No newline at end of file
diff --git a/styles/index.scss b/styles/index.scss
index c45601d88..2c9b1593b 100644
--- a/styles/index.scss
+++ b/styles/index.scss
@@ -18,6 +18,7 @@
 @import "./Notification.scss";
 @import "./Pagination.scss";
 @import './Alert.scss';
+@import './DatePicker.scss';
 
 @import "./NimbusServiceLayout.scss";
 @import "./Popup.scss";
diff --git a/styles/theme/default.scss b/styles/theme/default.scss
index ce3001b56..12da3c0b1 100644
--- a/styles/theme/default.scss
+++ b/styles/theme/default.scss
@@ -1,8 +1,11 @@
+@import './mixins/config.scss';
+
 $body-background-color: #1a2033;
 
 /**
  * genaral
  */
+$tiny-height: 22px;
 $small-height: 28px;
 $default-height: 34px;
 $large-height: 40px;
@@ -33,6 +36,7 @@ $input-icon-color: rgba(255,255,255,0.2);
  */
 $button-margin: 0 12px 8px 0;
 $button-border-radius: 6px;
+$button-tiny-font-size: 12px;
 $button-small-font-size: 14px;
 $button-default-font-size: 16px;
 $button-large-font-size: 16px;
@@ -123,4 +127,17 @@ $default-font-family: 'Lato';
   &::-webkit-scrollbar-thumb:hover {
     background: rgba(255,255,255,0.3);
   }
+}
+
+@mixin fade-up-transition($block) {
+  .#{$namespace}-#{$block}--transition-enter, .#{$namespace}-#{$block}--transition-leave-to {
+    opacity: 0;
+    transform: translateY(4px);
+  }
+  .#{$namespace}-#{$block}--transition-leave-active {
+    transition: opacity .3s $slow-out-cubic-bezier, transform .3s $slow-out-cubic-bezier;
+  }
+  .#{$namespace}-#{$block}--transition-enter-active {
+    transition: opacity .3s $fast-in-cubic-bezier, transform .3s $fast-in-cubic-bezier;
+  }
 }
\ No newline at end of file

From e0da00b631aef5139e0a981d899ecd892969c6c9 Mon Sep 17 00:00:00 2001
From: 07akioni <07akioni2@gmail.com>
Date: Fri, 5 Jul 2019 19:59:19 +0800
Subject: [PATCH 02/11] chore: checkpoint

---
 demo/demo.vue | 2 +-
 think.md      | 4 ++--
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/demo/demo.vue b/demo/demo.vue
index 6593684b0..7d0bd7c47 100644
--- a/demo/demo.vue
+++ b/demo/demo.vue
@@ -2,7 +2,7 @@
   <div class="demo">
     <n-nimbus-service-layout
       icon="md-contacts"
-      name="NAIVE UI (0.1.92)"
+      name="NAIVE UI (0.1.93)"
       :padding-body="false"
       :items="items"
     >
diff --git a/think.md b/think.md
index 3accebc92..60057bafd 100644
--- a/think.md
+++ b/think.md
@@ -3,7 +3,7 @@
 npm run dev
 ```
 @port 8086
-# .Vue 文件内部的样式或者分离样式
-如果一个组件是业务组件，那么在 Vue 文件内部写样式，但是这样会让主题的切换变得困难，因为一些基础变量的来源难以控制。所以还是要把样式抽离出来，这样的话又要给每一个组件增加命名空间...
+
 # git problem...
+我的锅...远程分支没设定好，推得哪个自己都不知道
 # test 时候 vue v-model 产生的效果必须在 $nextTick() 之后才会产生，虽然它声称自己是同步的...
\ No newline at end of file

From 0488204e35072273399fc021c5070fcc93261201 Mon Sep 17 00:00:00 2001
From: haibo tang <haibo.tang@tusimple.ai>
Date: Mon, 8 Jul 2019 13:47:25 +0800
Subject: [PATCH 03/11] fixed the input model event name , from "change" to
 "changes".

---
 .gitignore                         | 3 ++-
 packages/common/Input/src/main.vue | 4 ++--
 2 files changed, 4 insertions(+), 3 deletions(-)

diff --git a/.gitignore b/.gitignore
index 2cd5c3208..e23c7a897 100644
--- a/.gitignore
+++ b/.gitignore
@@ -3,4 +3,5 @@ dist
 docDist
 doc/dist
 test/unit/coverage
-package-lock.json
\ No newline at end of file
+package-lock.json
+*.swp
\ No newline at end of file
diff --git a/packages/common/Input/src/main.vue b/packages/common/Input/src/main.vue
index 5c2b782ae..63ffd3920 100644
--- a/packages/common/Input/src/main.vue
+++ b/packages/common/Input/src/main.vue
@@ -65,7 +65,7 @@ export default {
   },
   model: {
     prop: 'value',
-    event: 'change'
+    event: 'changes'
   },
   props: {
     type: {
@@ -107,7 +107,7 @@ export default {
   },
   methods: {
     handleInput (e) {
-      this.$emit('change', e.target.value)
+      this.$emit('changes', e.target.value)
     },
     handleBlur (e) {
       this.$emit('blur', e)

From d20e70724470da22890762fee7fc158a109f7c74 Mon Sep 17 00:00:00 2001
From: 07akioni <07akioni2@gmail.com>
Date: Mon, 8 Jul 2019 16:15:23 +0800
Subject: [PATCH 04/11] feat(date-picker): v-model and some robustness enhance
 for it.

---
 demo/components/datePickerDemo.vue      |  68 +++++-
 packages/common/DatePicker/src/main.vue | 275 +++++++++++++++---------
 packages/common/DatePicker/src/utils.js |   8 +-
 packages/common/Input/src/main.vue      |   2 +-
 4 files changed, 250 insertions(+), 103 deletions(-)

diff --git a/demo/components/datePickerDemo.vue b/demo/components/datePickerDemo.vue
index a7271302a..b963a74a5 100644
--- a/demo/components/datePickerDemo.vue
+++ b/demo/components/datePickerDemo.vue
@@ -14,13 +14,66 @@
           Basic Usage
         </div>
         <div class="n-doc-section__view">
+          <n-input
+            v-model="dateTimeTimestamp"
+            placeholder="dateTimeTimestamp"
+            type="text"
+          />
           <div style="width: 100%;">
-            timestamp: {{ timestamp }}
+            dateTimeTimestamp: {{ dateTimeTimestamp }}
           </div>
-          <n-date-picker v-model="timestamp" />
+          <n-with-padding :padding-top="12" />
+          <n-input
+            v-model="dateTimestamp"
+            placeholder="dateTimestamp"
+            type="text"
+          />
+          <div style="width: 100%;">
+            dateTimeStamp: {{ dateTimestamp }}
+          </div>
+          <n-with-padding :padding-top="12" />
+          <n-date-picker
+            v-model="dateTimeTimestamp"
+            type="datetime"
+            @change="onDateTimeChange"
+          />
+          <n-with-padding :padding-top="12" />
+          <n-date-picker
+            v-model="dateTimestamp"
+            type="date"
+            @change="onDateChange"
+          />
         </div>
         <div class="n-doc-section__source">
-          <textarea>scaffold</textarea>
+          <textarea><n-date-picker
+  v-model="dateTimeTimestamp"
+  type="datetime"
+  @change="onDateTimeChange"
+/>
+<n-date-picker
+  v-model="dateTimestamp"
+  type="date"
+  @change="onDateChange"
+/>
+<script>
+export default {
+  data () {
+    return {
+      dateTimeTimestamp: 666666666,
+      dateTimestamp: null
+    }
+  },
+  methods: {
+    onDateTimeChange (timestamp, dateTimeString) {
+      this.$NMessage.success(`${timestamp}, ${dateTimeString}`)
+    },
+    onDateChange (timestamp, dateString) {
+      this.$NMessage.success(`${timestamp}, ${dateString}`)
+    }
+  }
+}
+</script>
+          </textarea>
         </div>
       </div>
     </div>
@@ -33,10 +86,17 @@ export default {
   mixins: [docCodeEditorMixin],
   data () {
     return {
-      timestamp: 0
+      dateTimeTimestamp: 666666666,
+      dateTimestamp: null
     }
   },
   methods: {
+    onDateTimeChange (timestamp, dateTimeString) {
+      this.$NMessage.success(`${timestamp}, ${dateTimeString}`)
+    },
+    onDateChange (timestamp, dateString) {
+      this.$NMessage.success(`${timestamp}, ${dateString}`)
+    }
   }
 }
 </script>
diff --git a/packages/common/DatePicker/src/main.vue b/packages/common/DatePicker/src/main.vue
index d5b2c6021..431bbd8c6 100644
--- a/packages/common/DatePicker/src/main.vue
+++ b/packages/common/DatePicker/src/main.vue
@@ -10,7 +10,7 @@
     <input
       v-model="displayDateTimeString"
       class="n-date-picker__input"
-      placeholder="Select date and time"
+      :placeholder="placeholder"
       @click="openCalendar"
       @focus="openCalendar"
       @blur="handleDateTimeInputBlur"
@@ -24,14 +24,19 @@
     </div>
     <transition name="n-date-picker-calendar--transition">
       <div
-        v-if="showCalendar"
+        v-if="showCalendar || debug"
         class="n-date-picker-calendar"
       >
-        <div class="n-date-picker-calendar__date-time-input-wrapper">
+        <div
+          v-if="type==='datetime'"
+          class="n-date-picker-calendar__date-time-input-wrapper"
+        >
           <input
             v-model="displayDateString"
             class="n-date-picker-calendar__date-input"
             placeholder="Select date"
+            @blur="handleDateInputBlur"
+            @input="handleDateInput"
           >
           <div
             ref="timeSelector"
@@ -43,6 +48,7 @@
               placeholder="Select time"
               @click="openTimeSelector"
               @input="handleTimeInput"
+              @blur="handleTimeInputBlur"
             >
             <transition name="n-date-picker-time-selector--transition">
               <div
@@ -115,6 +121,10 @@
             </transition>
           </div>
         </div>
+        <div
+          v-else
+          style="width: 100%; height: 12px;"
+        />
         <div class="n-date-picker-calendar__month-modifier">
           <div
             class="n-date-picker-calendar__fast-prev"
@@ -139,7 +149,7 @@
             />
           </div>
           <div class="n-date-picker-calendar__month-year">
-            {{ calendarTime.startOf('month').format('MMMM') }} {{ calendarTime.year() }}
+            {{ calendarDateTime.format('MMMM') }} {{ calendarDateTime.year() }}
           </div>
           <div
             class="n-date-picker-calendar__next"
@@ -176,7 +186,7 @@
         <div class="n-date-picker-calendar__divider" />
         <div class="n-date-picker-calendar__dates">
           <div
-            v-for="dateItem in dateArray(calendarTime, selectedDateTime, currentTime)"
+            v-for="dateItem in dateArray(calendarDateTime, computedSelectedDateTime, currentDateTime)"
             :key="dateItem.timestamp"
             class="n-date-picker-calendar__date"
             :class="{
@@ -218,7 +228,20 @@ import { dateArray, setDate } from './utils'
 import NIcon from '../../Icon'
 import NButton from '../../Button'
 
-const dateFormat = 'YYYY-MM-DD HH:mm:ss'
+const DATE_FORMAT = {
+  date: 'YYYY-MM-DD',
+  datetime: 'YYYY-MM-DD HH:mm:ss'
+}
+const PLACEHOLDER = {
+  date: 'Select date',
+  datetime: 'Select date and time'
+}
+const TIME_CONST = {
+  weekdays: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
+  hours: ['00', '01', '02', '03', '04', '05', '06', '07', '08', '09', '10', '11', '12', '13', '14', '15', '16', '17', '18', '19', '20', '21', '22', '23'],
+  minutes: ['00', '01', '02', '03', '04', '05', '06', '07', '08', '09', '10', '11', '12', '13', '14', '15', '16', '17', '18', '19', '20', '21', '22', '23', '24', '25', '26', '27', '28', '29', '30', '31', '32', '33', '34', '35', '36', '37', '38', '39', '40', '41', '42', '43', '44', '45', '46', '47', '48', '49', '50', '51', '52', '53', '54', '55', '56', '57', '58', '59'],
+  seconds: ['00', '01', '02', '03', '04', '05', '06', '07', '08', '09', '10', '11', '12', '13', '14', '15', '16', '17', '18', '19', '20', '21', '22', '23', '24', '25', '26', '27', '28', '29', '30', '31', '32', '33', '34', '35', '36', '37', '38', '39', '40', '41', '42', '43', '44', '45', '46', '47', '48', '49', '50', '51', '52', '53', '54', '55', '56', '57', '58', '59']
+}
 
 export default {
   name: 'NDatePicker',
@@ -232,12 +255,24 @@ export default {
   },
   props: {
     value: {
-      type: Number,
-      required: true
+      type: [Number, String],
+      required: false,
+      default: null
     },
     size: {
       type: String,
       default: 'default'
+    },
+    /**
+     * type can be 'date', 'datetime'
+     */
+    type: {
+      type: String,
+      default: 'date'
+    },
+    debug: {
+      type: Boolean,
+      default: false
     }
   },
   data () {
@@ -245,61 +280,116 @@ export default {
       displayDateTimeString: '',
       displayDateString: '',
       displayTimeString: '',
-      calendarTime: moment(),
-      selectedDateTime: null,
+      calendarDateTime: moment(),
+      currentDateTime: moment(),
       showCalendar: false,
       showTimeSelector: false,
       calendar: [],
-      currentTime: moment(),
-      weekdays: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
-      hours: ['00', '01', '02', '03', '04', '05', '06', '07', '08', '09', '10', '11', '12', '13', '14', '15', '16', '17', '18', '19', '20', '21', '22', '23'],
-      minutes: ['00', '01', '02', '03', '04', '05', '06', '07', '08', '09', '10', '11', '12', '13', '14', '15', '16', '17', '18', '19', '20', '21', '22', '23', '24', '25', '26', '27', '28', '29', '30', '31', '32', '33', '34', '35', '36', '37', '38', '39', '40', '41', '42', '43', '44', '45', '46', '47', '48', '49', '50', '51', '52', '53', '54', '55', '56', '57', '58', '59'],
-      seconds: ['00', '01', '02', '03', '04', '05', '06', '07', '08', '09', '10', '11', '12', '13', '14', '15', '16', '17', '18', '19', '20', '21', '22', '23', '24', '25', '26', '27', '28', '29', '30', '31', '32', '33', '34', '35', '36', '37', '38', '39', '40', '41', '42', '43', '44', '45', '46', '47', '48', '49', '50', '51', '52', '53', '54', '55', '56', '57', '58', '59']
+      ...TIME_CONST
     }
   },
   computed: {
+    placeholder () {
+      return PLACEHOLDER[this.type]
+    },
+    format () {
+      return DATE_FORMAT[this.type]
+    },
     computedHour () {
-      if (this.selectedDateTime) return this.selectedDateTime.format('HH')
+      if (this.computedSelectedDateTime) return this.computedSelectedDateTime.format('HH')
       else return null
     },
     computedMinute () {
-      if (this.selectedDateTime) return this.selectedDateTime.format('mm')
+      if (this.computedSelectedDateTime) return this.computedSelectedDateTime.format('mm')
       else return null
     },
     computedSecond () {
-      if (this.selectedDateTime) return this.selectedDateTime.format('ss')
+      if (this.computedSelectedDateTime) return this.computedSelectedDateTime.format('ss')
       else return null
+    },
+    /**
+     * If value is valid return null.
+     * If value is not valid, return moment(value)
+     */
+    computedSelectedDateTime () {
+      if (this.value === null || this.value === undefined) return null
+      const newSelectedDateTime = moment(Number(this.value))
+      if (newSelectedDateTime.isValid()) {
+        return newSelectedDateTime
+      } else {
+        return null
+      }
     }
   },
   watch: {
-    selectedDateTime (newValue) {
-      this.$emit('change', newValue.valueOf())
+    /**
+     * If new value is valid, set calendarTime and refresh display strings.
+     * If new value is invalid, do nothing.
+     */
+    value (newValue) {
+      const newSelectedDateTime = moment(Number(newValue))
+      if (newSelectedDateTime.isValid()) {
+        this.calendarDateTime = moment(newSelectedDateTime)
+        this.refreshSelectedDateTimeString()
+      }
     }
   },
+  created () {
+    this.refreshSelectedDateTimeString()
+  },
   methods: {
     dateArray,
-    justifySelectedDateTimeAfterChangeTimeString () {
-      if (this.selectedDateTime === null) {
-        // case here is impossible for now, because you can't clear time
-      } else {
-        const newDisplayDateTimeString = this.displayDateString + ' ' + this.displayTimeString
-        const newSelectedDateTime = moment(newDisplayDateTimeString, 'YYYY-MM-DD HH:mm:ss', true)
-        if (newSelectedDateTime.isValid()) {
-          this.selectedDateTime = newSelectedDateTime
+    /**
+     * If new datetime is null or undefined, emit null to value.
+     * Else adjust new datetime by props.type and emit it to value.
+     */
+    setValue (newSelectedDateTime) {
+      if (newSelectedDateTime === null || newSelectedDateTime === undefined) {
+        this.$emit('change', null)
+        return
+      }
+      if (newSelectedDateTime.isValid()) {
+        const adjustedDateTime = this.adjustDateTimeAccrodingToType(newSelectedDateTime)
+        if (this.computedSelectedDateTime === null || adjustedDateTime.valueOf() !== this.computedSelectedDateTime.valueOf()) {
+          this.$emit('change', adjustedDateTime.valueOf(), adjustedDateTime.format(this.format))
         }
       }
-      this.refreshSelectedDateTime()
+    },
+    adjustDateTimeAccrodingToType (datetime) {
+      if (this.type === 'datetime') {
+        return moment(datetime).startOf('second')
+      } else {
+        return moment(datetime).startOf('date').hour(0)
+      }
+    },
+    justifySelectedDateTimeAfterChangeTimeString () {
+      if (this.computedSelectedDateTime === null) {
+        // case here is impossible for now, because you can't clear time for now
+      } else {
+        const newDisplayDateTimeString = this.displayDateString + ' ' + this.displayTimeString
+        const newSelectedDateTime = moment(newDisplayDateTimeString, this.format, true)
+        this.setValue(newSelectedDateTime)
+      }
     },
     handleTimeInput (e) {
       const newDisplayDateTimeString = this.displayDateString + ' ' + e.target.value
-      const newSelectedDateTime = moment(newDisplayDateTimeString, 'YYYY-MM-DD HH:mm:ss', true)
-      if (newSelectedDateTime.isValid()) {
-        this.selectedDateTime = newSelectedDateTime
-        this.refreshSelectedDateTime()
-      }
+      const newSelectedDateTime = moment(newDisplayDateTimeString, this.format, true)
+      this.setValue(newSelectedDateTime)
+    },
+    handleDateInput (e) {
+      const newDisplayDateTimeString = e.target.value + ' ' + this.displayTimeString
+      const newSelectedDateTime = moment(newDisplayDateTimeString, this.format, true)
+      this.setValue(newSelectedDateTime)
+    },
+    handleTimeInputBlur () {
+      this.refreshSelectedDateTimeString()
+    },
+    handleDateInputBlur () {
+      this.refreshSelectedDateTimeString()
     },
     handleTimeConfirmClick () {
       this.justifySelectedDateTimeAfterChangeTimeString()
+      this.refreshSelectedDateTimeString()
       this.closeTimeSelector()
     },
     handleTimeCancelClick () {
@@ -339,84 +429,93 @@ export default {
       }
     },
     openTimeSelector () {
-      if (this.selectedDateTime === null) {
-        this.selectedDateTime = moment()
-
-        this.refreshSelectedDateTime()
+      if (this.computedSelectedDateTime === null) {
+        this.setValue(moment())
       }
       this.showTimeSelector = true
     },
     closeTimeSelector () {
       this.showTimeSelector = false
     },
+    /**
+     * To close timeSelector
+     */
     handleCalendarClick (e) {
+      if (!this.$refs.timeSelector) return
       if (!this.$refs.timeSelector.contains(e.target) && this.$refs.timeSelector !== e.target) {
         this.closeTimeSelector()
       }
     },
     nativeCloseCalendar (e) {
-      if (e.target.contains(this.$refs.datePicker) && e.target !== this.$refs.datePicker) {
+      if (!this.$refs.datePicker.contains(e.target)) {
         this.closeCalendar()
       }
     },
-    clear () {
-      this.selectedDateTime = null
+    clearSelectedDateTime () {
+      this.setValue(null)
       this.displayDateTimeString = ''
       this.displayDateString = ''
       this.displayTimeString = ''
     },
     setSelectedDateTimeToNow () {
-      this.selectedDateTime = moment()
-      this.calendarTime = moment()
-      this.refreshSelectedDateTime()
+      this.setValue(moment())
+      this.calendarDateTime = moment()
     },
     handleDateClick (dateItem) {
-      if (!this.selectedDateTime) {
-        this.selectedDateTime = moment()
-        this.selectedDateTime = setDate(this.selectedDateTime, dateItem)
-      } else {
-        this.selectedDateTime = setDate(this.selectedDateTime, dateItem)
+      let newSelectedDateTime = moment()
+      if (this.computedSelectedDateTime !== null) {
+        newSelectedDateTime = moment(this.computedSelectedDateTime)
       }
-      this.calendarTime = moment(this.selectedDateTime)
-
-      this.refreshSelectedDateTime()
+      newSelectedDateTime = setDate(newSelectedDateTime, dateItem)
+      this.setValue(newSelectedDateTime)
     },
-    refreshSelectedDateTime () {
-      if (this.selectedDateTime === null) {
+    /**
+     * If not selected, display nothing,
+     * else update datetime related string
+     */
+    refreshSelectedDateTimeString () {
+      if (this.computedSelectedDateTime === null) {
         this.displayDateTimeString = ''
         return
       }
-      this.displayDateTimeString = this.selectedDateTime.format('YYYY-MM-DD HH:mm:ss')
-      this.displayDateString = this.selectedDateTime.format('YYYY-MM-DD')
-      this.displayTimeString = this.selectedDateTime.format('HH:mm:ss')
+      this.displayDateTimeString = this.computedSelectedDateTime.format(this.format)
+      this.displayDateString = this.computedSelectedDateTime.format('YYYY-MM-DD')
+      this.displayTimeString = this.computedSelectedDateTime.format('HH:mm:ss')
     },
+    /**
+     * If new time is invalid, do nothing.
+     * If valid, update.
+     */
     handleDateTimeInputEnter () {
-      const newSelectedDateTime = moment(this.displayDateTimeString, 'YYYY-MM-DD HH:mm:ss', true)
-      if (newSelectedDateTime.isValid()) {
-        this.selectedDateTime = newSelectedDateTime
-        this.calendarTime = moment(newSelectedDateTime)
-        this.refreshSelectedDateTime()
-      }
+      const newSelectedDateTime = moment(this.displayDateTimeString, this.format, true)
+      this.setValue(newSelectedDateTime)
     },
+    /**
+     * If new SelectedDateTime is valid, update `selectedDateTime` and `calendarTime`
+     * Whatever happened, refresh selectedDateTime
+     */
     handleDateTimeInputBlur () {
-      const newSelectedDateTime = moment(this.displayDateTimeString, dateFormat, true)
-      if (newSelectedDateTime.isValid()) {
-        this.selectedDateTime = newSelectedDateTime
-        this.calendarTime = moment(newSelectedDateTime)
-      }
-      this.refreshSelectedDateTime()
+      const newSelectedDateTime = moment(this.displayDateTimeString, this.format, true)
+      this.setValue(newSelectedDateTime)
+      /**
+       * If newSelectedDateTime is invalid, display string need to be restored
+       */
+      this.refreshSelectedDateTimeString()
     },
     handleDateInputAndTimeInputConfirmClick () {
       const newDisplayDateTimeString = `${this.displayDateString.trim()} ${this.displayTimeString.trim()}`
-      const newSelectedDateTime = moment(newDisplayDateTimeString, dateFormat, true)
-      if (newSelectedDateTime.isValid()) {
-        this.selectedDateTime = newSelectedDateTime
-      } else if (this.selectedDateTime === null) {
-        this.selectedDateTime = moment()
+      const newSelectedDateTime = moment(newDisplayDateTimeString, this.format, true)
+      if (this.computedSelectedDateTime === null) {
+        this.setValue(moment())
+      } else {
+        this.setValue(newSelectedDateTime)
+        this.refreshSelectedDateTimeString()
       }
-      this.refreshSelectedDateTime()
       this.closeCalendar()
     },
+    /**
+     * Calendar view related methods
+     */
     openCalendar () {
       this.showCalendar = true
       document.body.addEventListener('click', this.nativeCloseCalendar)
@@ -430,39 +529,21 @@ export default {
 
     },
     nextYear () {
-      this.calendarTime.add(1, 'year')
+      this.calendarDateTime.add(1, 'year')
       this.$forceUpdate()
     },
     prevYear () {
-      this.calendarTime.subtract(1, 'year')
+      this.calendarDateTime.subtract(1, 'year')
       this.$forceUpdate()
     },
     nextMonth () {
-      this.calendarTime.add(1, 'month')
+      this.calendarDateTime.add(1, 'month')
       this.$forceUpdate()
     },
     prevMonth () {
-      this.calendarTime.subtract(1, 'month')
+      this.calendarDateTime.subtract(1, 'month')
       this.$forceUpdate()
     }
   }
 }
 </script>
-
-<style lang="scss" scoped>
-.date {
-  text-align: center;
-  width: 36px;
-  opacity: .6;
-  &.n-date-picker-calendar__date--current {
-    color: blue;
-  }
-  &.n-date-picker-calendar__date--selected {
-    background-color: red;
-  }
-  cursor: pointer;
-  &.n-date-picker-calendar__date--in-display-month, &.n-date-picker-calendar__date--day {
-    opacity: 1;
-  }
-}
-</style>
diff --git a/packages/common/DatePicker/src/utils.js b/packages/common/DatePicker/src/utils.js
index a94cefc34..de8e261f6 100644
--- a/packages/common/DatePicker/src/utils.js
+++ b/packages/common/DatePicker/src/utils.js
@@ -1,7 +1,13 @@
 import moment from 'moment'
 
+/**
+ * change date of `time` accroding to `dateItem`
+ * keep time of `time`
+ * return a new Moment Object according to time
+ * @param {Moment} time
+ * @param {Object} dateItem
+ */
 function setDate (time, dateItem) {
-  console.log(time, dateItem)
   time.year(dateItem.year)
   time.month(dateItem.month)
   time.date(dateItem.date)
diff --git a/packages/common/Input/src/main.vue b/packages/common/Input/src/main.vue
index 5c2b782ae..a94209fee 100644
--- a/packages/common/Input/src/main.vue
+++ b/packages/common/Input/src/main.vue
@@ -77,7 +77,7 @@ export default {
       default: ''
     },
     value: {
-      type: String,
+      type: [String, Number],
       default: ''
     },
     disabled: {

From 93ee695c08c07d3fe24c3e6a378975fb72666dbb Mon Sep 17 00:00:00 2001
From: 07akioni <07akioni2@gmail.com>
Date: Mon, 8 Jul 2019 16:25:02 +0800
Subject: [PATCH 05/11] chore(input): change v-model eventname back to 'change'

Someone can't reproduce the bug that input shows [Object object]. So I will roll back it.
---
 packages/common/Input/src/main.vue | 4 ++--
 styles/Input.scss                  | 1 -
 2 files changed, 2 insertions(+), 3 deletions(-)

diff --git a/packages/common/Input/src/main.vue b/packages/common/Input/src/main.vue
index 314a75c42..a94209fee 100644
--- a/packages/common/Input/src/main.vue
+++ b/packages/common/Input/src/main.vue
@@ -65,7 +65,7 @@ export default {
   },
   model: {
     prop: 'value',
-    event: 'changes'
+    event: 'change'
   },
   props: {
     type: {
@@ -107,7 +107,7 @@ export default {
   },
   methods: {
     handleInput (e) {
-      this.$emit('changes', e.target.value)
+      this.$emit('change', e.target.value)
     },
     handleBlur (e) {
       this.$emit('blur', e)
diff --git a/styles/Input.scss b/styles/Input.scss
index e85bb6cbb..ce04fbbac 100644
--- a/styles/Input.scss
+++ b/styles/Input.scss
@@ -82,7 +82,6 @@
       padding: 0 14px;
       font-size: $large-input-font-size;
     }
-    
   }
   .n-input__input.n-input__input--round {
     &.n-input__input--small-size {

From 73a77492b6881b65c2cf410b1c26f92f22a49193 Mon Sep 17 00:00:00 2001
From: 07akioni <07akioni2@gmail.com>
Date: Mon, 8 Jul 2019 17:24:49 +0800
Subject: [PATCH 06/11] fix(input): forget to remove :on=$listeners of input,
 this may cause some native event be put into wrong handler

---
 demo/components/inputDemo.vue      | 21 ++++++++++++++++++++
 demo/demo.vue                      |  2 +-
 package.json                       |  2 +-
 packages/common/Input/src/main.vue | 31 ++++++++++++++++++++++++++----
 4 files changed, 50 insertions(+), 6 deletions(-)

diff --git a/demo/components/inputDemo.vue b/demo/components/inputDemo.vue
index 4f188f8f8..2bf6bd06f 100644
--- a/demo/components/inputDemo.vue
+++ b/demo/components/inputDemo.vue
@@ -100,6 +100,7 @@ export default {
             @focus="handleFocus"
             @change="handleChange"
             @keyup="handleKeyUp"
+            @input="handleInput"
           />
           <br>
           value: {{ value }}
@@ -121,6 +122,23 @@ export default {
     return {
       value: null
     }
+  },
+  methods: {
+    handleFocus () {
+      this.$NMessage.success('focus')
+    },
+    handleBlur () {
+      this.$NMessage.success('blur')
+    },
+    handleInput (value) {
+      this.$NMessage.success('input: ' + value)
+    },
+    handleChange (value) {
+      this.$NMessage.success('change: ' + value)
+    },
+    handleKeyUp (e) {
+      this.$NMessage.success('keyup')
+    }
   }
 }
 </script></textarea>
@@ -353,6 +371,9 @@ export default {
     handleBlur () {
       this.$NMessage.success('blur')
     },
+    handleInput (value) {
+      this.$NMessage.success('input: ' + value)
+    },
     handleChange (value) {
       this.$NMessage.success('change: ' + value)
     },
diff --git a/demo/demo.vue b/demo/demo.vue
index 7d0bd7c47..617507cba 100644
--- a/demo/demo.vue
+++ b/demo/demo.vue
@@ -2,7 +2,7 @@
   <div class="demo">
     <n-nimbus-service-layout
       icon="md-contacts"
-      name="NAIVE UI (0.1.93)"
+      name="NAIVE UI (0.1.94)"
       :padding-body="false"
       :items="items"
     >
diff --git a/package.json b/package.json
index ba602c61b..ee3a64ae5 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "naive-ui",
-  "version": "0.1.93",
+  "version": "0.1.94",
   "description": "",
   "main": "index.js",
   "scripts": {
diff --git a/packages/common/Input/src/main.vue b/packages/common/Input/src/main.vue
index a94209fee..2dc2e1c71 100644
--- a/packages/common/Input/src/main.vue
+++ b/packages/common/Input/src/main.vue
@@ -7,6 +7,7 @@
     }"
   >
     <textarea
+      ref="textarea"
       class="n-input__textarea"
       :class="{
         [`n-input__textarea--${size}-size`]: true
@@ -15,11 +16,13 @@
       :placeholder="placeholder"
       :value="value"
       :disabled="disabled === true"
-      v-on="$listeners"
       @blur="handleBlur"
       @focus="handleFocus"
       @input="handleInput"
+      @change="handleChange"
       @keyup="handleKeyUp"
+      @compositionstart="handleCompositionStart"
+      @compositionend="handleCompositionEnd"
     />
   </div>
   <div
@@ -30,6 +33,7 @@
     }"
   >
     <input
+      ref="input"
       :type="type"
       class="n-input__input"
       :class="{
@@ -38,13 +42,15 @@
         [`n-input__input--icon`]: icon
       }"
       :placeholder="placeholder"
-      :value="value"
       :disabled="disabled === true"
       :maxlength="maxlength"
       @blur="handleBlur"
       @focus="handleFocus"
       @input="handleInput"
+      @change="handleChange"
       @keyup="handleKeyUp"
+      @compositionstart="handleCompositionStart"
+      @compositionend="handleCompositionEnd"
     >
     <div
       v-if="icon"
@@ -65,7 +71,7 @@ export default {
   },
   model: {
     prop: 'value',
-    event: 'change'
+    event: 'input'
   },
   props: {
     type: {
@@ -105,9 +111,22 @@ export default {
       default: 'false'
     }
   },
+  data () {
+    return {
+      isComposing: false
+    }
+  },
   methods: {
+    handleCompositionStart () {
+      this.isComposing = true
+    },
+    handleCompositionEnd (event) {
+      this.isComposing = false
+      this.handleInput(event)
+    },
     handleInput (e) {
-      this.$emit('change', e.target.value)
+      if (this.isComposing) return
+      this.$emit('input', e.target.value)
     },
     handleBlur (e) {
       this.$emit('blur', e)
@@ -116,7 +135,11 @@ export default {
       this.$emit('focus', e)
     },
     handleKeyUp (e) {
+      if (this.isComposing) return
       this.$emit('keyup', e)
+    },
+    handleChange (e) {
+      this.$emit('change', e.target.value)
     }
   }
 }

From 52cb9a02298f1b5e30368cab2a6f2ee834427b61 Mon Sep 17 00:00:00 2001
From: 07akioni <07akioni2@gmail.com>
Date: Mon, 8 Jul 2019 18:07:29 +0800
Subject: [PATCH 07/11] fix(input): forget add :value to type=input

---
 demo/demo.vue                      | 2 +-
 package.json                       | 2 +-
 packages/common/Input/src/main.vue | 1 +
 3 files changed, 3 insertions(+), 2 deletions(-)

diff --git a/demo/demo.vue b/demo/demo.vue
index 617507cba..4c9cb8305 100644
--- a/demo/demo.vue
+++ b/demo/demo.vue
@@ -2,7 +2,7 @@
   <div class="demo">
     <n-nimbus-service-layout
       icon="md-contacts"
-      name="NAIVE UI (0.1.94)"
+      name="NAIVE UI (0.1.95)"
       :padding-body="false"
       :items="items"
     >
diff --git a/package.json b/package.json
index ee3a64ae5..728c76c4a 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "naive-ui",
-  "version": "0.1.94",
+  "version": "0.1.95",
   "description": "",
   "main": "index.js",
   "scripts": {
diff --git a/packages/common/Input/src/main.vue b/packages/common/Input/src/main.vue
index 2dc2e1c71..d4ca0f82e 100644
--- a/packages/common/Input/src/main.vue
+++ b/packages/common/Input/src/main.vue
@@ -44,6 +44,7 @@
       :placeholder="placeholder"
       :disabled="disabled === true"
       :maxlength="maxlength"
+      :value="value"
       @blur="handleBlur"
       @focus="handleFocus"
       @input="handleInput"

From b6f879d261915eaa79b4c52572e3b0b5acbc6abb Mon Sep 17 00:00:00 2001
From: 07akioni <07akioni2@gmail.com>
Date: Mon, 8 Jul 2019 18:12:11 +0800
Subject: [PATCH 08/11] fix(date-picker): init calendar date is not set
 correctly when v-model specified

---
 demo/demo.vue                           | 2 +-
 package.json                            | 2 +-
 packages/common/DatePicker/src/main.vue | 3 +++
 3 files changed, 5 insertions(+), 2 deletions(-)

diff --git a/demo/demo.vue b/demo/demo.vue
index 4c9cb8305..609b5d217 100644
--- a/demo/demo.vue
+++ b/demo/demo.vue
@@ -2,7 +2,7 @@
   <div class="demo">
     <n-nimbus-service-layout
       icon="md-contacts"
-      name="NAIVE UI (0.1.95)"
+      name="NAIVE UI (0.1.96)"
       :padding-body="false"
       :items="items"
     >
diff --git a/package.json b/package.json
index 728c76c4a..bf8dc19df 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "naive-ui",
-  "version": "0.1.95",
+  "version": "0.1.96",
   "description": "",
   "main": "index.js",
   "scripts": {
diff --git a/packages/common/DatePicker/src/main.vue b/packages/common/DatePicker/src/main.vue
index 431bbd8c6..f472eb74c 100644
--- a/packages/common/DatePicker/src/main.vue
+++ b/packages/common/DatePicker/src/main.vue
@@ -336,6 +336,9 @@ export default {
   },
   created () {
     this.refreshSelectedDateTimeString()
+    if (this.computedSelectedDateTime !== null && this.computedSelectedDateTime.isValid()) {
+      this.calendarDateTime = moment(this.computedSelectedDateTime)
+    }
   },
   methods: {
     dateArray,

From 33bf3fdaafce8a4f8c427d056e3fdde0c585133a Mon Sep 17 00:00:00 2001
From: "songwanli2025@163.com" <songwanli2025@163.com>
Date: Tue, 9 Jul 2019 13:55:52 +0800
Subject: [PATCH 09/11] add v-model to layout

---
 demo/components/nimbusServiceLayoutDemo.vue |   3 +-
 demo/components/percentCircle.vue           | 165 ++++++++++++++++++++
 package.json                                |   2 +-
 packages/nimbus/ServiceLayout/src/main.vue  |   6 +
 4 files changed, 174 insertions(+), 2 deletions(-)
 create mode 100644 demo/components/percentCircle.vue

diff --git a/demo/components/nimbusServiceLayoutDemo.vue b/demo/components/nimbusServiceLayoutDemo.vue
index 567ee3dfe..6e3d97a68 100644
--- a/demo/components/nimbusServiceLayoutDemo.vue
+++ b/demo/components/nimbusServiceLayoutDemo.vue
@@ -15,6 +15,7 @@
         </div>
         <div class="n-doc-section__view">
           <n-nimbus-service-layout
+            v-model="currentFileld"
             icon="md-musical-notes"
             name="Oasis"
             :items="[
@@ -118,7 +119,7 @@ export default {
   mixins: [docCodeEditorMixin],
   data () {
     return {
-
+      currentFileld: 'Hello'
     }
   },
   methods: {
diff --git a/demo/components/percentCircle.vue b/demo/components/percentCircle.vue
new file mode 100644
index 000000000..5aad7a625
--- /dev/null
+++ b/demo/components/percentCircle.vue
@@ -0,0 +1,165 @@
+<template>
+  <div class="percent-circle">
+    <svg
+      :width="width"
+      :height="height"
+    >
+      <circle
+        :cx="width/2"
+        :cy="width/2"
+        :r="r+percentWidth"
+        fill="#273C4C"
+      />
+      <circle
+        v-if="!usage"
+        :cx="width/2"
+        :cy="width/2"
+        :r="r"
+        fill="#1F263E"
+      />
+      <circle
+        v-if="usage"
+        :cx="width/2"
+        :cy="width/2"
+        :r="r"
+        fill="#29575B"
+      />
+      <circle
+        v-if="usage"
+        :cx="width/2"
+        :cy="width/2"
+        :r="r-percentWidth"
+        fill="#1F263E"
+      />
+      <path
+        :id="id+'request'"
+        fill="none"
+        stroke="#426783"
+      />
+      <path
+        :id="id+'usage'"
+        fill="none"
+        stroke="#51BF9A"
+      />
+      <foreignObject
+        :width="textWidth"
+        :height="textWidth"
+        :x="width/2-textWidth/2"
+        :y="width/2-textWidth/2"
+      >
+        <slot name="text" />
+      </foreignObject>
+    </svg>
+  </div>
+</template>
+<script>
+export default {
+  name: 'PercentCircle',
+  props: {
+    request: {
+      type: Number
+      // default: 0
+    },
+    usage: {
+      type: Number
+      // default: 0
+    },
+    cx: {
+      type: Number,
+      default: 110
+    },
+    cy: {
+      type: Number,
+      default: 110
+    },
+    r: {
+      type: Number,
+      default: 76
+    },
+    percentWidth: {
+      type: Number,
+      default: 22
+    },
+    text: {
+      type: String
+    },
+    id: {
+      type: String
+    }
+    // width: {
+    //   type: Number,
+    //   default: 220
+    // },
+    // height: {
+    //   type: Number,
+    //   default: 220
+    // }
+  },
+  data () {
+    return {
+      width: (this.r + this.percentWidth) * 2,
+      height: (this.r + this.percentWidth) * 2
+    }
+  },
+  computed: {
+    textWidth () {
+      return Math.floor(Math.sqrt((this.r - 22) * 2 * (this.r - 22) * 2 / 2))
+    }
+  },
+  watch: {
+    request () {
+      this.setPercent(this.request, this.usage, this.r, this.percentWidth, this.width, this.height)
+    }
+  },
+  mounted () {
+    this.setPercent(this.request, this.usage, this.r, this.percentWidth, this.width, this.height)
+  },
+  methods: {
+    setPercent (request, usage, r, percentWidth, width, height) {
+      var requestPath = document.getElementById(this.id + 'request')
+      var usagePath = document.getElementById(this.id + 'usage')
+      let cx = width / 2
+      let cy = height / 2
+      var requestr = r + percentWidth / 2
+      var usager = r - percentWidth / 2
+      // 将requestPath平移到我们需要的坐标位置
+      requestPath.setAttribute('transform', 'translate(' + cx + ',' + cy + ')')
+      requestPath.setAttribute('stroke-width', percentWidth + 'px')
+      usagePath.setAttribute('transform', 'translate(' + cx + ',' + cy + ')')
+      usagePath.setAttribute('stroke-width', percentWidth + 'px')
+
+      // 计算当前的进度对应的角度值
+      var requestDegrees = request * 360
+      var usageDegrees = usage * 360
+
+      // 计算当前角度对应的弧度值
+      var requestRad = requestDegrees * (Math.PI / 180)
+      var usageRad = usageDegrees * (Math.PI / 180)
+
+      console.log()
+
+      // 极坐标转换成直角坐标
+      var requestx = (Math.sin(requestRad) * requestr).toFixed(2)
+      var requesty = -(Math.cos(requestRad) * requestr).toFixed(2)
+      var usagex = (Math.sin(usageRad) * usager).toFixed(2)
+      var usagey = -(Math.cos(usageRad) * usager).toFixed(2)
+
+      // 大于180度时候画大角度弧，小于180度的画小角度弧，(deg > 180) ? 1 : 0
+      var requestLenghty = window.Number(requestDegrees > 180)
+      var usageLenghty = window.Number(usageDegrees > 180)
+
+      var requestdescriptions = ['M', 0, -requestr, 'A', requestr, requestr, 0, requestLenghty, 1, requestx, requesty]
+      var usagedescriptions = ['M', 0, -usager, 'A', usager, usager, 0, usageLenghty, 1, usagex, usagey]
+
+      requestPath.setAttribute('d', requestdescriptions.join(' '))
+      usagePath.setAttribute('d', usagedescriptions.join(' '))
+    }
+  }
+}
+</script>
+
+<style scoped>
+.percent-circle {
+  text-align: center;
+}
+</style>
diff --git a/package.json b/package.json
index bf8dc19df..52d68fa44 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "naive-ui",
-  "version": "0.1.96",
+  "version": "0.1.98",
   "description": "",
   "main": "index.js",
   "scripts": {
diff --git a/packages/nimbus/ServiceLayout/src/main.vue b/packages/nimbus/ServiceLayout/src/main.vue
index df1bc6962..03ba2ec6d 100644
--- a/packages/nimbus/ServiceLayout/src/main.vue
+++ b/packages/nimbus/ServiceLayout/src/main.vue
@@ -104,6 +104,10 @@ export default {
     paddingBody: {
       type: Boolean,
       default: true
+    },
+    value: {
+      type: String,
+      default: ''
     }
   },
   data () {
@@ -116,7 +120,9 @@ export default {
       }))
     }
   },
+
   mounted () {
+    this.activeItemName = this.value
     const path = this.$route.path
     for (const item of this.items) {
       if (item.path === path) {

From e2b101504494ce57934609d2312cb47787d3756b Mon Sep 17 00:00:00 2001
From: "songwanli2025@163.com" <songwanli2025@163.com>
Date: Tue, 9 Jul 2019 13:58:53 +0800
Subject: [PATCH 10/11] modify layout demo

---
 demo/components/nimbusServiceLayoutDemo.vue | 1 +
 1 file changed, 1 insertion(+)

diff --git a/demo/components/nimbusServiceLayoutDemo.vue b/demo/components/nimbusServiceLayoutDemo.vue
index 6e3d97a68..84e85ffe4 100644
--- a/demo/components/nimbusServiceLayoutDemo.vue
+++ b/demo/components/nimbusServiceLayoutDemo.vue
@@ -65,6 +65,7 @@
           <textarea><n-nimbus-service-layout
   icon="md-musical-notes"
   name="Oasis"
+  v-model="'Hello'"
   :items="[
     {
       name: 'Definitely Maybe',

From b2f0f567f2399660d4867c2343bfc88c37fc0ae3 Mon Sep 17 00:00:00 2001
From: "songwanli2025@163.com" <songwanli2025@163.com>
Date: Tue, 9 Jul 2019 15:07:21 +0800
Subject: [PATCH 11/11] fix layout v-model can not synchronization update bug

---
 package.json                               |  2 +-
 packages/nimbus/ServiceLayout/src/main.vue | 11 +++++++++--
 2 files changed, 10 insertions(+), 3 deletions(-)

diff --git a/package.json b/package.json
index 52d68fa44..bb18b9c48 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "naive-ui",
-  "version": "0.1.98",
+  "version": "0.1.99",
   "description": "",
   "main": "index.js",
   "scripts": {
diff --git a/packages/nimbus/ServiceLayout/src/main.vue b/packages/nimbus/ServiceLayout/src/main.vue
index 03ba2ec6d..5d75562b7 100644
--- a/packages/nimbus/ServiceLayout/src/main.vue
+++ b/packages/nimbus/ServiceLayout/src/main.vue
@@ -113,26 +113,32 @@ export default {
   data () {
     return {
       isCollapsed: false,
-      activeItemName: 'Service Management',
+      activeItemName: '',
       itemsWithCollapseStatus: this.items.map(item => ({
         ...item,
         isCollapsed: false
       }))
     }
   },
-
+  watch: {
+    value () {
+      this.activeItemName = this.value
+    }
+  },
   mounted () {
     this.activeItemName = this.value
     const path = this.$route.path
     for (const item of this.items) {
       if (item.path === path) {
         this.activeItemName = item.name
+        this.$emit('input', item.name)
         return
       }
       if (item.childItems) {
         for (const childItem of item.childItems) {
           if (childItem.path === path) {
             this.activeItemName = childItem.name
+            this.$emit('input', item.name)
             return
           }
         }
@@ -145,6 +151,7 @@ export default {
     },
     makeActive (item) {
       this.activeItemName = item.name
+      this.$emit('input', item.name)
       if (this.$router) {
         this.$router.push(item.path)
       }