fix(nimbus-service-layout): items is not reactive

2025-02-17 13:20:52 +08:00 · 2019-07-25 15:18:42 +08:00 · 2019-07-25 15:18:42 +08:00 · 62214ca68e
commit 62214ca68e
parent f49997ef87
12 changed files with 719 additions and 131 deletions
--- 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 {
--- a/demo/components/datePickerDemo/range.demo.vue
+++ 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>
--- 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>
--- 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
    }
  }
 }
--- 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 = ''
    }
--- 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 = ''
    }
--- 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>
--- 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'
      }
--- 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 () {
--- 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]
 }
--- 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;
-    }
-  }
 }
--- 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);