From 62214ca68e005e8dd91aada778846803d65fe95e Mon Sep 17 00:00:00 2001
From: 07akioni <07akioni2@gmail.com>
Date: Thu, 25 Jul 2019 15:18:42 +0800
Subject: [PATCH] fix(nimbus-service-layout): items is not reactive

---
 demo/components/datePickerDemo/index.vue      |   5 +-
 demo/components/datePickerDemo/range.demo.vue |  42 ++
 demo/components/nimbusServiceLayoutDemo.vue   |  85 +--
 packages/common/DatePicker/src/main.vue       |  91 +++-
 packages/common/DatePicker/src/panel/date.vue |   1 +
 .../common/DatePicker/src/panel/datetime.vue  |   1 +
 .../DatePicker/src/panel/datetimerange.vue    | 492 ++++++++++++++++++
 packages/mixins/placeable.js                  |   4 +-
 packages/nimbus/ServiceLayout/src/main.vue    |   6 +
 packages/utils/dom/calcPlacementTransform.js  |  12 +-
 styles/DatePicker.scss                        | 109 ++--
 styles/theme/default.scss                     |   2 +-
 12 files changed, 719 insertions(+), 131 deletions(-)
 create mode 100644 demo/components/datePickerDemo/range.demo.vue

diff --git a/demo/components/datePickerDemo/index.vue b/demo/components/datePickerDemo/index.vue
index 1cd7a2347..d0b0d0fe9 100644
--- a/demo/components/datePickerDemo/index.vue
+++ b/demo/components/datePickerDemo/index.vue
@@ -11,6 +11,7 @@
     <div class="n-doc-body">
       <basic-usage />
       <disabled />
+      <range />
     </div>
   </div>
 </template>
@@ -18,11 +19,13 @@
 <script>
 import basicUsage from './basicUsage.demo.vue'
 import disabled from './disabled.demo.vue'
+import range from './range.demo'
 
 export default {
   components: {
     basicUsage,
-    disabled
+    disabled,
+    range
   },
   data () {
     return {
diff --git a/demo/components/datePickerDemo/range.demo.vue b/demo/components/datePickerDemo/range.demo.vue
new file mode 100644
index 000000000..4827c3423
--- /dev/null
+++ b/demo/components/datePickerDemo/range.demo.vue
@@ -0,0 +1,42 @@
+<template>
+  <div class="n-doc-section">
+    <div class="n-doc-section__header">
+      Range
+    </div>
+    <div
+      class="n-doc-section__view"
+      style="flex-wrap: nowrap;"
+    >
+      <!--EXAMPLE_START-->
+      <n-date-picker
+        v-model="ts1"
+        type="datetimerange"
+        style="margin-right: 12px;"
+      />
+    </div>
+    <pre class="n-doc-section__inspect">datetimerange v-model: {{ JSON.stringify(ts1) }}</pre>
+    <n-doc-source-block>
+      <!--SOURCE-->
+    </n-doc-source-block>
+  </div>
+</template>
+
+<script>
+/*
+ * padding
+ * padding
+ * padding
+ * padding
+ * padding
+ */
+export default {
+  data () {
+    return {
+      ts1: null,
+      ts2: [0, 0]
+    }
+  },
+  methods: {
+  }
+}
+</script>
diff --git a/demo/components/nimbusServiceLayoutDemo.vue b/demo/components/nimbusServiceLayoutDemo.vue
index 07fd0fa69..c1112a29c 100644
--- a/demo/components/nimbusServiceLayoutDemo.vue
+++ b/demo/components/nimbusServiceLayoutDemo.vue
@@ -17,41 +17,7 @@
           <n-nimbus-service-layout
             icon="md-musical-notes"
             name="Oasis"
-            :items="[
-              {
-                name: 'Definitely Maybe',
-                path: '/n-nimbus-service-layout?param=666'
-              },
-              {
-                name: `Morning Glory`,
-                childItems: [
-                  {
-                    name: 'Hello',
-                    path: '/n-nimbus-service-layout?param=777'
-                  },
-                  {
-                    name: 'Roll with It',
-                    path: '/n-nimbus-service-layout?param=888'
-                  },
-                  {
-                    name: 'Wonderwall',
-                    path: '/n-nimbus-service-layout?param=999'
-                  },
-                  {
-                    name: `Don't Look Back in Anger`,
-                    path: '/n-nimbus-service-layout?param=000'
-                  },
-                  {
-                    name: 'Some Might Say',
-                    path: '/n-nimbus-service-layout?param=111'
-                  }
-                ]
-              },
-              {
-                name: 'Be Here Now',
-                path: '/n-nimbus-service-layout?param=222'
-              }
-            ]"
+            :items="items"
           >
             Take me to the place where you go<br>
             Where nobody knows if it's night or day<br>
@@ -60,6 +26,11 @@
             Who'll throw it all away
           </n-nimbus-service-layout>
         </div>
+        <div class="n-doc-section__inspect">
+          <button @click="handleClick">
+            change items
+          </button>
+        </div>
         <div class="n-doc-section__source">
           <textarea><n-nimbus-service-layout
   icon="md-musical-notes"
@@ -118,10 +89,52 @@ export default {
   mixins: [docCodeEditorMixin],
   data () {
     return {
-      currentField: 'Hello'
+      items: [
+        {
+          name: 'Definitely Maybe',
+          path: '/n-nimbus-service-layout?param=666'
+        },
+        {
+          name: `Morning Glory`,
+          childItems: [
+            {
+              name: 'Hello',
+              path: '/n-nimbus-service-layout?param=777'
+            },
+            {
+              name: 'Roll with It',
+              path: '/n-nimbus-service-layout?param=888'
+            },
+            {
+              name: 'Wonderwall',
+              path: '/n-nimbus-service-layout?param=999'
+            },
+            {
+              name: `Don't Look Back in Anger`,
+              path: '/n-nimbus-service-layout?param=000'
+            },
+            {
+              name: 'Some Might Say',
+              path: '/n-nimbus-service-layout?param=111'
+            }
+          ]
+        },
+        {
+          name: 'Be Here Now',
+          path: '/n-nimbus-service-layout?param=222'
+        }
+      ]
     }
   },
   methods: {
+    handleClick () {
+      this.items = [
+        {
+          name: 'Definitely Maybe',
+          path: '/n-nimbus-service-layout?param=666'
+        }
+      ]
+    }
   }
 }
 </script>
diff --git a/packages/common/DatePicker/src/main.vue b/packages/common/DatePicker/src/main.vue
index 693d1e220..1dc4d4e67 100644
--- a/packages/common/DatePicker/src/main.vue
+++ b/packages/common/DatePicker/src/main.vue
@@ -4,24 +4,50 @@
     class="n-date-picker"
     :class="{
       [`n-date-picker--${size}-size`]: true,
-      'n-date-picker--disabled': disabled
+      'n-date-picker--disabled': disabled,
+      'n-date-picker--range': isRange
     }"
   >
-    <input
-      v-model="displayDateTimeString"
-      class="n-date-picker__input"
-      :placeholder="placeholder"
-      :readonly="disabled ? 'disabled' : false"
-      @click="handleActivatorClick"
-      @blur="handleDateTimeInputBlur"
-      @input="handleDateTimeInputInput"
+    <div
+      v-if="isRange"
+      class="n-date-picker__editor"
     >
-    <div class="n-date-picker__icon">
-      <n-icon
-        size="20"
-        type="ios-calendar"
-      />
+      <input
+        v-model="displayDateTimeString"
+        class="n-date-picker__input"
+        :placeholder="placeholder"
+        :readonly="disabled ? 'disabled' : false"
+        @click="handleActivatorClick"
+        @focus="handleFocus"
+        @blur="handleDateTimeInputBlur"
+        @input="handleDateTimeInputInput"
+      >
     </div>
+    <div
+      v-else
+      class="n-date-picker__editor"
+      :class="{
+        'n-date-picker__editor--focus': isFocus
+      }"
+    >
+      <input
+        v-model="displayDateTimeString"
+        class="n-date-picker__input"
+        :placeholder="placeholder"
+        :readonly="disabled ? 'disabled' : false"
+        @click="handleActivatorClick"
+        @focus="handleFocus"
+        @blur="handleDateTimeInputBlur"
+        @input="handleDateTimeInputInput"
+      >
+      <div class="n-date-picker__icon">
+        <n-icon
+          size="20"
+          type="ios-calendar"
+        />
+      </div>
+    </div>
+
     <div
       ref="contentWrapper"
       class="n-content-wrapper"
@@ -41,6 +67,13 @@
           @input="handlePanelInput"
           @close="closeCalendar"
         />
+        <datetimerange-panel
+          v-if="type === 'datetimerange'"
+          :value="value"
+          :active="active"
+          @input="handlePanelInput"
+          @close="closeCalendar"
+        />
       </div>
     </div>
   </div>
@@ -52,6 +85,7 @@ import NIcon from '../../Icon'
 import detachable from '../../../mixins/detachable'
 import placeable from '../../../mixins/placeable'
 import DatetimePanel from './panel/datetime'
+import DatetimerangePanel from './panel/datetimerange'
 import DatePanel from './panel/date'
 import clickoutside from '../../../directives/clickoutside'
 
@@ -78,7 +112,8 @@ export default {
   components: {
     NIcon,
     DatetimePanel,
-    DatePanel
+    DatePanel,
+    DatetimerangePanel
   },
   mixins: [
     detachable,
@@ -106,12 +141,14 @@ export default {
      * type can be 'date', 'datetime'
      */
     type: {
-      type: String,
+      validator (type) {
+        return ['date', 'datetime', 'daterange', 'datetimerange'].includes(type)
+      },
       default: 'date'
     },
-    debug: {
-      type: Boolean,
-      default: false
+    placeholder: {
+      type: String,
+      default: null
     }
   },
   data () {
@@ -124,12 +161,20 @@ export default {
       active: false,
       calendar: [],
       rightCalendar: [],
+      isFocus: false,
       ...TIME_CONST
     }
   },
   computed: {
-    placeholder () {
-      return PLACEHOLDER[this.type]
+    isRange () {
+      return ['daterange', 'datetimerange'].includes(this.type)
+    },
+    computedPlaceholder () {
+      if (this.placeholder === null) {
+        return PLACEHOLDER[this.type]
+      } else {
+        return this.placeholder
+      }
     },
     format () {
       return DATE_FORMAT[this.type]
@@ -206,6 +251,7 @@ export default {
       } else {
         this.refreshSelectedDateTimeString()
       }
+      this.isFocus = false
     },
     handleActivatorClick (e) {
       if (this.active) {
@@ -237,6 +283,9 @@ export default {
       if (newSelectedDateTime.isValid()) {
         this.$emit('input', newSelectedDateTime.valueOf())
       }
+    },
+    handleFocus () {
+      this.isFocus = true
     }
   }
 }
diff --git a/packages/common/DatePicker/src/panel/date.vue b/packages/common/DatePicker/src/panel/date.vue
index 31dd11f4f..f45ded899 100644
--- a/packages/common/DatePicker/src/panel/date.vue
+++ b/packages/common/DatePicker/src/panel/date.vue
@@ -201,6 +201,7 @@ export default {
   created () {
     if (this.valueAsMoment !== null) {
       this.displayDateString = this.valueAsMoment.format(DATE_FORMAT)
+      this.calendarDateTime = this.valueAsMoment
     } else {
       this.displayDateString = ''
     }
diff --git a/packages/common/DatePicker/src/panel/datetime.vue b/packages/common/DatePicker/src/panel/datetime.vue
index 9f403c27d..f2cbea5dd 100644
--- a/packages/common/DatePicker/src/panel/datetime.vue
+++ b/packages/common/DatePicker/src/panel/datetime.vue
@@ -222,6 +222,7 @@ export default {
   created () {
     if (this.valueAsMoment !== null) {
       this.displayDateString = this.valueAsMoment.format(DATE_FORMAT)
+      this.calendarDateTime = this.valueAsMoment
     } else {
       this.displayDateString = ''
     }
diff --git a/packages/common/DatePicker/src/panel/datetimerange.vue b/packages/common/DatePicker/src/panel/datetimerange.vue
index e69de29bb..2249272b1 100644
--- a/packages/common/DatePicker/src/panel/datetimerange.vue
+++ b/packages/common/DatePicker/src/panel/datetimerange.vue
@@ -0,0 +1,492 @@
+<template>
+  <transition name="n-date-picker-calendar--transition">
+    <div
+      v-if="active"
+      v-clickoutside.lazy="handleClickOutside"
+      class="n-date-picker-calendar n-date-picker-calendar--datetimerange"
+    >
+      <div class="n-date-picker-calendar__range-wrapper">
+        <div
+          class="n-date-picker-calendar__date-time-input-wrapper"
+        >
+          <n-input
+            v-model="displayDateString"
+            class="n-date-picker-calendar__date-input"
+            placeholder="Select date"
+            @blur="handleDateInputBlur"
+            @input="handleDateInput"
+          />
+          <n-time-picker
+            class="n-date-picker-calendar__time-input"
+            :value="value"
+            stop-selector-bubble
+            @input="handleStartTimePickerInput"
+          />
+        </div>
+        <div class="n-date-picker-calendar__month-modifier">
+          <div
+            class="n-date-picker-calendar__fast-prev"
+            @click="startCalendarPrevYear"
+          >
+            <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="startCalendarPrevMonth"
+          >
+            <n-icon
+              type="ios-arrow-back"
+              size="14"
+            />
+          </div>
+          <div class="n-date-picker-calendar__month-year">
+            {{ startCalendarDateTime.format('MMMM') }} {{ startCalendarDateTime.year() }}
+          </div>
+          <div
+            class="n-date-picker-calendar__next"
+            @click="startCalendarNextMonth"
+          >
+            <n-icon
+              type="ios-arrow-forward"
+              size="14"
+            />
+          </div>
+          <div
+            class="n-date-picker-calendar__fast-next"
+            @click="startCalendarNextYear"
+          >
+            <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(startCalendarDateTime, valueAsMoment, currentDateTime)"
+            :key="`${dateItem.timestamp}${dateItem.isDateOfDisplayMonth}`"
+            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="handleConfirmClick"
+          >
+            Confirm
+          </n-button>
+        </div>
+      </div>
+      <div class="n-date-picker-calendar__range-wrapper">
+        <div
+          class="n-date-picker-calendar__date-time-input-wrapper"
+        >
+          <n-input
+            v-model="displayDateString"
+            class="n-date-picker-calendar__date-input"
+            placeholder="Select date"
+            @blur="handleDateInputBlur"
+            @input="handleDateInput"
+          />
+          <n-time-picker
+            class="n-date-picker-calendar__time-input"
+            :value="value"
+            stop-selector-bubble
+            @input="handleStartTimePickerInput"
+          />
+        </div>
+        <div class="n-date-picker-calendar__month-modifier">
+          <div
+            class="n-date-picker-calendar__fast-prev"
+            @click="endCalendarPrevYear"
+          >
+            <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="endCalendarPrevMonth"
+          >
+            <n-icon
+              type="ios-arrow-back"
+              size="14"
+            />
+          </div>
+          <div class="n-date-picker-calendar__month-year">
+            {{ endCalendarDateTime.format('MMMM') }} {{ endCalendarDateTime.year() }}
+          </div>
+          <div
+            class="n-date-picker-calendar__next"
+            @click="endCalendarNextMonth"
+          >
+            <n-icon
+              type="ios-arrow-forward"
+              size="14"
+            />
+          </div>
+          <div
+            class="n-date-picker-calendar__fast-next"
+            @click="endCalendarNextYear"
+          >
+            <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(endCalendarDateTime, valueAsMoment, currentDateTime)"
+            :key="`${dateItem.timestamp}${dateItem.isDateOfDisplayMonth}`"
+            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="handleConfirmClick"
+          >
+            Confirm
+          </n-button>
+        </div>
+      </div>
+    </div>
+  </transition>
+</template>
+
+<script>
+import moment from 'moment'
+import { dateArray, setDate } from '../utils'
+import NIcon from '../../../Icon'
+import clickoutside from '../../../../directives/clickoutside'
+
+import NButton from '../../../Button'
+import NTimePicker from '../../../TimePicker'
+import NInput from '../../../Input'
+
+const DATETIME_FORMAT = 'YYYY-MM-DD HH:mm:ss'
+const DATE_FORMAT = 'YYYY-MM-DD'
+const DATE_VALIDATE_FORMAT = ['YYYY-MM-DD', 'YYYY-MM-D', 'YYYY-M-D', 'YYYY-M-DD']
+
+const PLACEHOLDER = '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 {
+  components: {
+    NButton,
+    NIcon,
+    NTimePicker,
+    NInput
+  },
+  directives: {
+    clickoutside
+  },
+  props: {
+    active: {
+      type: Boolean,
+      default: true
+    },
+    value: {
+      type: Array,
+      required: false,
+      default: null
+    },
+    debug: {
+      type: Boolean,
+      default: false
+    },
+    placeholder: {
+      type: String,
+      default: PLACEHOLDER
+    },
+    format: {
+      type: String,
+      default: DATETIME_FORMAT
+    }
+  },
+  data () {
+    return {
+      displayDateString: '',
+      startCalendarDateTime: moment(),
+      endCalendarDateTime: moment().add(1, 'month'),
+      currentDateTime: moment(),
+      calendar: [],
+      ...TIME_CONST
+    }
+  },
+  computed: {
+    computedHour () {
+      if (this.valueAsMoment) return this.valueAsMoment.format('HH')
+      else return null
+    },
+    computedMinute () {
+      if (this.valueAsMoment) return this.valueAsMoment.format('mm')
+      else return null
+    },
+    computedSecond () {
+      if (this.valueAsMoment) return this.valueAsMoment.format('ss')
+      else return null
+    },
+    /**
+     * If value is valid return null.
+     * If value is not valid, return moment(value)
+     */
+    valueAsMoment () {
+      if (this.value === null || this.value === undefined) return null
+      const newSelectedDateTime = moment(this.value)
+      if (newSelectedDateTime.isValid()) {
+        return newSelectedDateTime
+      } else {
+        return null
+      }
+    }
+  },
+  watch: {
+    valueAsMoment (newValue) {
+      if (newValue !== null) {
+        this.displayDateString = newValue.format(DATE_FORMAT)
+      } else {
+        this.displayDateString = ''
+      }
+    }
+  },
+  created () {
+    if (this.valueAsMoment !== null) {
+      this.displayDateString = this.valueAsMoment.format(DATE_FORMAT)
+    } else {
+      this.displayDateString = ''
+    }
+  },
+  methods: {
+    dateArray,
+    handleClickOutside () {
+      this.closeCalendar()
+    },
+    setValue (newSelectedDateTime) {
+      if (newSelectedDateTime === null || newSelectedDateTime === undefined) {
+        this.$emit('input', null)
+      } else if (newSelectedDateTime.isValid()) {
+        const adjustedDateTime = this.adjustValue(newSelectedDateTime)
+        if (this.valueAsMoment === null || adjustedDateTime.valueOf() !== this.valueAsMoment.valueOf()) {
+          this.refreshDisplayDateString(adjustedDateTime)
+          this.$emit('input', adjustedDateTime.valueOf())
+        }
+      }
+    },
+    adjustValue (datetime) {
+      return moment(datetime).startOf('second')
+    },
+    handleDateInput (value) {
+      const date = moment(value, DATE_FORMAT, true)
+      if (date.isValid()) {
+        if (!this.valueAsMoment) {
+          const newValue = moment()
+          newValue.year(date.year())
+          newValue.month(date.month())
+          newValue.date(date.date())
+          this.$emit('input', this.adjustValue(newValue).valueOf())
+        } else {
+          const newValue = this.valueAsMoment
+          newValue.year(date.year())
+          newValue.month(date.month())
+          newValue.date(date.date())
+          this.$emit('input', this.adjustValue(newValue).valueOf())
+        }
+      } else {
+        // do nothing
+      }
+    },
+    handleDateInputBlur () {
+      const date = moment(this.displayDateString, DATE_VALIDATE_FORMAT, true)
+      if (date.isValid()) {
+        if (!this.valueAsMoment) {
+          const newValue = moment()
+          newValue.year(date.year())
+          newValue.month(date.month())
+          newValue.date(date.date())
+          this.$emit('input', this.adjustValue(newValue).valueOf())
+        } else {
+          const newValue = this.valueAsMoment
+          newValue.year(date.year())
+          newValue.month(date.month())
+          newValue.date(date.date())
+          this.$emit('input', this.adjustValue(newValue).valueOf())
+        }
+      } else {
+        this.refreshDisplayDateString()
+      }
+    },
+    clearSelectedDateTime () {
+      this.$emit('input', null)
+      this.displayDateString = ''
+    },
+    setSelectedDateTimeToNow () {
+      this.$emit('input', this.adjustValue(moment()).valueOf())
+      this.startCalendarDateTime = moment()
+    },
+    handleDateClick (dateItem) {
+      let newSelectedDateTime = moment()
+      if (this.valueAsMoment !== null) {
+        newSelectedDateTime = moment(this.valueAsMoment)
+      }
+      newSelectedDateTime = setDate(newSelectedDateTime, dateItem)
+      this.$emit('input', this.adjustValue(newSelectedDateTime).valueOf())
+    },
+    /**
+     * If not selected, display nothing,
+     * else update datetime related string
+     */
+    refreshDisplayDateString (time) {
+      if (this.valueAsMoment === null) {
+        this.displayDateString = ''
+        return
+      }
+      if (time === undefined) {
+        time = this.valueAsMoment
+      }
+      this.displayDateString = time.format(DATE_FORMAT)
+    },
+    handleConfirmClick () {
+      this.$emit('confirm')
+      this.closeCalendar()
+    },
+    closeCalendar () {
+      if (this.active) {
+        this.$emit('close')
+      }
+    },
+    adjustCalendarTimes (byStartCalendarTime) {
+      const startTime = this.startCalendarDateTime.startOf('month').valueOf()
+      const endTime = this.endCalendarDateTime.startOf('month').valueOf()
+      if (startTime >= endTime) {
+        if (byStartCalendarTime) {
+          this.endCalendarDateTime = moment(startTime).add(1, 'month')
+        } else {
+          this.startCalendarDateTime = moment(endTime).subtract(1, 'month')
+        }
+      }
+    },
+    startCalendarNextYear () {
+      this.startCalendarDateTime = moment(this.startCalendarDateTime).add(1, 'year')
+      this.adjustCalendarTimes(true)
+    },
+    startCalendarPrevYear () {
+      this.startCalendarDateTime = moment(this.startCalendarDateTime).subtract(1, 'year')
+      this.adjustCalendarTimes(true)
+    },
+    startCalendarNextMonth () {
+      this.startCalendarDateTime = moment(this.startCalendarDateTime).add(1, 'month')
+      this.adjustCalendarTimes(true)
+    },
+    startCalendarPrevMonth () {
+      this.startCalendarDateTime = moment(this.startCalendarDateTime).subtract(1, 'month')
+      this.adjustCalendarTimes(true)
+    },
+    endCalendarNextYear () {
+      this.endCalendarDateTime = moment(this.endCalendarDateTime).add(1, 'year')
+      this.adjustCalendarTimes(false)
+    },
+    endCalendarPrevYear () {
+      this.endCalendarDateTime = moment(this.endCalendarDateTime).subtract(1, 'year')
+      this.adjustCalendarTimes(false)
+    },
+    endCalendarNextMonth () {
+      this.endCalendarDateTime = moment(this.endCalendarDateTime).add(1, 'month')
+      this.adjustCalendarTimes(false)
+    },
+    endCalendarPrevMonth () {
+      this.endCalendarDateTime = moment(this.endCalendarDateTime).subtract(1, 'month')
+      this.adjustCalendarTimes(false)
+    },
+    handleStartTimePickerInput (value) {
+      // this.$emit('input', value)
+    },
+    handleEndTimePickerInput (value) {
+      // this.$emit('input', value)
+    }
+  }
+}
+</script>
diff --git a/packages/mixins/placeable.js b/packages/mixins/placeable.js
index 533c3ceab..8627d8c91 100644
--- a/packages/mixins/placeable.js
+++ b/packages/mixins/placeable.js
@@ -78,7 +78,9 @@ export default {
       // console.log(contentBoundingClientRect)
       // debugger
       // console.log('scroll', activatorBoundingClientRect, contentBoundingClientRect)
-      this.$refs.content.style = 'position: absolute;' + calcPlacementTransfrom(this.placement, activatorBoundingClientRect, contentBoundingClientRect)
+      const [placementTransform, suggsetedTransformOrigin] = calcPlacementTransfrom(this.placement, activatorBoundingClientRect, contentBoundingClientRect)
+      this.$refs.content.style = 'position: absolute;' + placementTransform + `transform-origin: ${suggsetedTransformOrigin};`
+      this.$refs.content.setAttribute('n-suggested-transform-origin', suggsetedTransformOrigin)
       if (this.widthMode === 'activator' && this.$refs.contentInner) {
         this.$refs.contentInner.style.minWidth = activatorBoundingClientRect.width + 'px'
       }
diff --git a/packages/nimbus/ServiceLayout/src/main.vue b/packages/nimbus/ServiceLayout/src/main.vue
index d21c407e8..6f6a27231 100644
--- a/packages/nimbus/ServiceLayout/src/main.vue
+++ b/packages/nimbus/ServiceLayout/src/main.vue
@@ -119,6 +119,12 @@ export default {
   watch: {
     $route (to, from) {
       this.syncActiveItemWithPath(to.path)
+    },
+    items (newItems) {
+      this.itemsWithCollapseStatus = newItems.map(item => ({
+        ...item,
+        isCollapsed: false
+      }))
     }
   },
   mounted () {
diff --git a/packages/utils/dom/calcPlacementTransform.js b/packages/utils/dom/calcPlacementTransform.js
index b9f278b7f..c57927d05 100644
--- a/packages/utils/dom/calcPlacementTransform.js
+++ b/packages/utils/dom/calcPlacementTransform.js
@@ -1,5 +1,6 @@
 export default function calcPlacementTransform (placement, activatorRect, popoverRect) {
   let contentLeft, contentTop
+  let suggesetedTransfromOrigin = 'none'
   if (placement === 'top-start') {
     contentTop = activatorRect.top - popoverRect.height
     contentLeft = activatorRect.left
@@ -28,7 +29,14 @@ export default function calcPlacementTransform (placement, activatorRect, popove
     contentTop = activatorRect.top + activatorRect.height - popoverRect.height
     contentLeft = activatorRect.left + activatorRect.width
   } else if (placement === 'bottom-start') {
-    contentTop = activatorRect.top + activatorRect.height
+    const toWindowBottom = window.innerHeight - activatorRect.bottom
+    if (popoverRect.height > toWindowBottom) {
+      contentTop = activatorRect.top - popoverRect.height
+      suggesetedTransfromOrigin = 'bottom left'
+    } else {
+      contentTop = activatorRect.top + activatorRect.height
+      suggesetedTransfromOrigin = 'top left'
+    }
     contentLeft = activatorRect.left
   } else if (placement === 'bottom-end') {
     contentTop = activatorRect.top + activatorRect.height
@@ -43,5 +51,5 @@ export default function calcPlacementTransform (placement, activatorRect, popove
    * However, I found that the dom delay is very serious.
    * So I decide to use left and top for now.
    */
-  return `left: ${contentLeft}px; top: ${contentTop}px;`
+  return [`left: ${contentLeft}px; top: ${contentTop}px;`, suggesetedTransfromOrigin]
 }
diff --git a/styles/DatePicker.scss b/styles/DatePicker.scss
index 04e7ad320..8d550e9c6 100644
--- a/styles/DatePicker.scss
+++ b/styles/DatePicker.scss
@@ -11,25 +11,24 @@
     .n-date-picker__icon {
       color: rgba(255, 255, 255, .2);
     }
-    .n-date-picker__input {
+    .n-date-picker__editor {
       cursor: not-allowed;
       background-color: rgba(255, 255, 255, .08);
-      color: rgba(255, 255, 255, .2);
-      &:focus:hover {
-        box-shadow: none;
+      .n-date-picker__input {
+        cursor: not-allowed;
+        color: rgba(255, 255, 255, .2);
+        &::placeholder {
+          color: rgba(255, 255, 255, .2);
+        }
       }
       &:hover {
         box-shadow: none;
       }
-      &:focus {
-        box-shadow: none;
-        background-color: rgba(255, 255, 255, .08);
-      }
-      &::placeholder {
-        color: rgba(255, 255, 255, .2);
-      }
     }
   }
+  &.n-date-picker--range {
+    width: 382px;
+  }
   .n-date-picker__icon {
     position: absolute;
     right: 13px;
@@ -37,9 +36,9 @@
     transform: translateY(-50%);
     color: rgba(221, 238, 247, 0.3);
     height: 20px;
+    transition: color .3s $default-cubic-bezier;
   }
-  .n-date-picker__input, .n-date-picker-calendar__date-input {
-    -webkit-appearance: none;
+  .n-date-picker__editor {
     box-sizing: border-box;
     border: none;
     border-radius: $input-border-radius;
@@ -54,19 +53,30 @@
     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;
+    .n-date-picker__input {
+      width: 100%;
+      -webkit-appearance: none;
+      outline: none;
+      background: none;
+      color: #fff;
+      border: none;
+      padding: 0;
+      transition: color .3s $default-cubic-bezier;
+      &::placeholder {
+        transition: color .3s $default-cubic-bezier;
+        color: $input-placeholder-color;
+        opacity: 1;
+      }
     }
-    &:hover {
-      box-shadow: inset 0 0 0px 1px $main-color;
-    }
-    &:focus {
+    &.n-date-picker__editor--focus {
+      &:hover {
+        box-shadow: inset 0 0 0px 1px $main-color, 0px 0px 10px 1px #366555;
+      }
       box-shadow: inset 0 0 0px 1px $main-color;
       background-color: $focus-input-background-color;
     }
-    &::placeholder {
-      color: $input-placeholder-color;
-      opacity: 1;
+    &:hover {
+      box-shadow: inset 0 0 0px 1px $main-color;
     }
   }
   &.n-date-picker--small-size {
@@ -95,11 +105,19 @@
 @include b(date-picker-calendar) {
   @include fade-in-transition(date-picker-calendar);
   margin-top: 4px;
+  margin-bottom: 4px;
   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--datetimerange {
+    width: 702px;
+    display: flex;
+  }
+  .n-date-picker-calendar__range-wrapper {
+    width: 351px;
+  }
   .n-date-picker-calendar__date-time-input-wrapper {
     padding: 14px 24px;
     border-bottom: 1px solid rgba(255, 255, 255, .07);
@@ -213,51 +231,4 @@
       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/theme/default.scss b/styles/theme/default.scss
index 71277d4f1..ee8ca70e7 100644
--- a/styles/theme/default.scss
+++ b/styles/theme/default.scss
@@ -184,7 +184,7 @@ $default-font-family: 'Lato';
   }
 }
 
-@mixin fade-in-transition($block, $origin: left top) {
+@mixin fade-in-transition($block, $origin: inherit) {
   &.#{$namespace}-#{$block}--transition-enter-active,
   &.#{$namespace}-#{$block}--transition-leave-active {
     transform: scale(1);