From 228fee1e16c0de65a6ba5cf15e6a32dcd20e8322 Mon Sep 17 00:00:00 2001
From: "qingwei.li" <cinwell.li@gmail.com>
Date: Tue, 23 Aug 2016 13:29:45 +0800
Subject: [PATCH] Fix DatePicker panel bug & Fix menu router prop

---
 examples/docs/tooltip.md                      | 18 ++++-----
 packages/date-picker/src/css/picker-panel.css |  1 +
 packages/date-picker/src/panel/date-range.vue | 38 ++++++++++++-------
 packages/date-picker/src/panel/time.vue       | 36 ++++++++++--------
 packages/dropdown/src/dropdown.vue            |  1 -
 packages/menu/src/menu.vue                    |  2 +-
 6 files changed, 56 insertions(+), 40 deletions(-)

diff --git a/examples/docs/tooltip.md b/examples/docs/tooltip.md
index a1377d881..3930ae453 100644
--- a/examples/docs/tooltip.md
+++ b/examples/docs/tooltip.md
@@ -21,7 +21,7 @@ Tooltip 组件常用于展示鼠标 hover 时的提示信息，在这里我们
 
 三种箭头方位：`start`, `end`，默认为空
 
-如`top center`即`placement="top"`，`left top`即`placement="left-start"`。
+如`top center`即`placement="top"`，`left top`即`placement="left-end"`。
 
 下面是完整的九个示例，可以通过该示例来理解上面的说明，选择你要的效果：
 
@@ -56,47 +56,47 @@ Tooltip 组件常用于展示鼠标 hover 时的提示信息，在这里我们
 
 <div class="box">
   <div class="top">
-    <el-tooltip class="item" effect="dark" content="Top Left 提示文字" placement="top-start">
+    <el-tooltip class="item" effect="dark" content="Top Left 提示文字" placement="top-end">
       <el-button>上左</el-button>
     </el-tooltip>
     <el-tooltip class="item" effect="dark" content="Top Center 提示文字" placement="top">
       <el-button>上边</el-button>
     </el-tooltip>
-    <el-tooltip class="item" effect="dark" content="Top Right 提示文字" placement="top-end">
+    <el-tooltip class="item" effect="dark" content="Top Right 提示文字" placement="top-start">
       <el-button>上右</el-button>
     </el-tooltip>
   </div>
   <div class="left">
-    <el-tooltip class="item" effect="dark" content="Left Top 提示文字" placement="left-start">
+    <el-tooltip class="item" effect="dark" content="Left Top 提示文字" placement="left-end">
       <el-button>左上</el-button>
     </el-tooltip>
     <el-tooltip class="item" effect="dark" content="Left Center 提示文字" placement="left">
       <el-button>左边</el-button>
     </el-tooltip>
-    <el-tooltip class="item" effect="dark" content="Left Bottom 提示文字" placement="left-end">
+    <el-tooltip class="item" effect="dark" content="Left Bottom 提示文字" placement="left-start">
       <el-button>左下</el-button>
     </el-tooltip>
   </div>
 
   <div class="right">
-    <el-tooltip class="item" effect="dark" content="Right Top 提示文字" placement="right-start">
+    <el-tooltip class="item" effect="dark" content="Right Top 提示文字" placement="right-end">
       <el-button>右上</el-button>
     </el-tooltip>
     <el-tooltip class="item" effect="dark" content="Right Center 提示文字" placement="right">
       <el-button>右边</el-button>
     </el-tooltip>
-    <el-tooltip class="item" effect="dark" content="Right Bottom 提示文字" placement="right-end">
+    <el-tooltip class="item" effect="dark" content="Right Bottom 提示文字" placement="right-start">
       <el-button>右下</el-button>
     </el-tooltip>
   </div>
   <div class="bottom">
-    <el-tooltip class="item" effect="dark" content="Bottom Left 提示文字" placement="bottom-start">
+    <el-tooltip class="item" effect="dark" content="Bottom Left 提示文字" placement="bottom-end">
       <el-button>下左</el-button>
     </el-tooltip>
     <el-tooltip class="item" effect="dark" content="Bottom Center 提示文字" placement="bottom">
       <el-button>下边</el-button>
     </el-tooltip>
-    <el-tooltip class="item" effect="dark" content="Bottom Right 提示文字" placement="bottom-end">
+    <el-tooltip class="item" effect="dark" content="Bottom Right 提示文字" placement="bottom-start">
       <el-button>下右</el-button>
     </el-tooltip>
   </div>
diff --git a/packages/date-picker/src/css/picker-panel.css b/packages/date-picker/src/css/picker-panel.css
index 2af340d2d..545a50793 100644
--- a/packages/date-picker/src/css/picker-panel.css
+++ b/packages/date-picker/src/css/picker-panel.css
@@ -85,6 +85,7 @@
     }
 
     @e link-btn {
+      cursor: pointer;
       color: #55a4ff;
       text-decoration: none;
       padding: 15px;
diff --git a/packages/date-picker/src/panel/date-range.vue b/packages/date-picker/src/panel/date-range.vue
index 5c7c2ade9..a25a4a206 100644
--- a/packages/date-picker/src/panel/date-range.vue
+++ b/packages/date-picker/src/panel/date-range.vue
@@ -20,7 +20,9 @@
                 v-model="leftVisibleDate"
                 @input="handleDateInput($event, 'min')"
                 @change="handleDateChange($event, 'min')"/>
-              <span class="el-date-range-picker__time-picker-wrap">
+              <span
+                class="el-date-range-picker__time-picker-wrap"
+                v-clickoutside="closeLeftTimePicker">
                 <input
                   placeholder="开始时间"
                   class="el-date-range-picker__editor"
@@ -28,10 +30,10 @@
                   @focus="leftTimePickerVisible = true"
                   @change="handleTimeChange($event, 'min')"/>
                 <time-picker
-                  v-ref:lefttimepicker
+                  ref="lefttimepicker"
                   :date="minDate"
                   @pick="handleLeftTimePick"
-                  v-show="leftTimePickerVisible">
+                  :visible="leftTimePickerVisible">
                 </time-picker>
               </span>
             </span>
@@ -44,7 +46,9 @@
                 :readonly="!minDate"
                 @input="handleDateInput($event, 'max')"
                 @change="handleDateChange($event, 'max')" />
-              <span class="el-date-range-picker__time-picker-wrap">
+              <span
+                class="el-date-range-picker__time-picker-wrap"
+                v-clickoutside="closeRightTimePicker">
                 <input
                   placeholder="结束时间"
                   class="el-date-range-picker__editor"
@@ -53,10 +57,10 @@
                   :readonly="!minDate"
                   @change="handleTimeChange($event, 'max')" />
                 <time-picker
-                  v-ref:righttimepicker
+                  ref="righttimepicker"
                   :date="maxDate"
                   @pick="handleRightTimePick"
-                  v-show="rightTimePickerVisible"></time-picker>
+                  :visible="rightTimePickerVisible"></time-picker>
               </span>
             </span>
           </div>
@@ -107,7 +111,6 @@
       </div>
       <div class="el-picker-panel__footer" v-if="showTime">
         <a
-          href="JavaScript:"
           class="el-picker-panel__link-btn"
           @click="changeToToday">{{ $t('datepicker.today') }}</a>
         <button
@@ -237,6 +240,10 @@
       }
     },
 
+    directives: {
+      Clickoutside: require('main/utils/clickoutside').default
+    },
+
     data() {
       return {
         date: new Date(),
@@ -267,11 +274,11 @@
       },
 
       leftTimePickerVisible(val) {
-        if (val) this.$refs.lefttimepicker.ajustScrollTop();
+        if (val) this.$nextTick(() => this.$refs.lefttimepicker.ajustScrollTop());
       },
 
       rightTimePickerVisible(val) {
-        if (val) this.$refs.righttimepicker.ajustScrollTop();
+        if (val) this.$nextTick(() => this.$refs.righttimepicker.ajustScrollTop());
       },
 
       value(newVal) {
@@ -288,6 +295,14 @@
     methods: {
       $t,
 
+      closeLeftTimePicker() {
+        this.leftTimePickerVisible = false;
+      },
+
+      closeRightTimePicker() {
+        this.rightTimePickerVisible = false;
+      },
+
       handleDateInput(event, type) {
         const value = event.target.value;
         const parsedValue = parseDate(value, 'yyyy-MM-dd');
@@ -388,7 +403,6 @@
         this.minDate.setSeconds(value.getSeconds());
 
         this.minDate = new Date(this.minDate);
-        this.leftTimePickerVisible = false;
       },
 
       handleRightTimePick(value) {
@@ -396,8 +410,6 @@
           const now = new Date();
           if (now >= this.minDate) {
             this.maxDate = new Date();
-          } else {
-
           }
         }
 
@@ -408,8 +420,6 @@
 
           this.maxDate = new Date(this.maxDate);
         }
-
-        this.rightTimePickerVisible = false;
       },
 
       prevMonth() {
diff --git a/packages/date-picker/src/panel/time.vue b/packages/date-picker/src/panel/time.vue
index 868b1a039..b9bd37526 100644
--- a/packages/date-picker/src/panel/time.vue
+++ b/packages/date-picker/src/panel/time.vue
@@ -1,7 +1,7 @@
 <template>
   <transition name="md-fade-bottom">
     <div
-      v-show="visible"
+      v-show="currentVisible"
       class="el-time-panel">
       <div class="el-time-panel__content">
         <time-spinner
@@ -40,10 +40,14 @@
         default: new Date()
       },
 
-      visible: false
+      visible: Boolean
     },
 
     watch: {
+      visible(val) {
+        this.currentVisible = val;
+      },
+
       value(newVal) {
         let date;
         if (newVal instanceof Date) {
@@ -70,7 +74,9 @@
         hours: 0,
         minutes: 0,
         seconds: 0,
-        selectableRange: []
+        selectableRange: [],
+        currentDate: this.date,
+        currentVisible: this.visible
       };
     },
 
@@ -87,16 +93,16 @@
 
       handleChange(date) {
         if (date.hours !== undefined) {
-          this.date.setHours(date.hours);
-          this.hours = this.date.getHours();
+          this.currentDate.setHours(date.hours);
+          this.hours = this.currentDate.getHours();
         }
         if (date.minutes !== undefined) {
-          this.date.setMinutes(date.minutes);
-          this.minutes = this.date.getMinutes();
+          this.currentDate.setMinutes(date.minutes);
+          this.minutes = this.currentDate.getMinutes();
         }
         if (date.seconds !== undefined) {
-          this.date.setSeconds(date.seconds);
-          this.seconds = this.date.getSeconds();
+          this.currentDate.setSeconds(date.seconds);
+          this.seconds = this.currentDate.getSeconds();
         }
 
         this.handleConfirm(true);
@@ -107,7 +113,7 @@
       },
 
       handleConfirm(visible = false, first) {
-        const date = new Date(limitRange(this.date, this.selectableRange));
+        const date = new Date(limitRange(this.currentDate, this.selectableRange));
 
         this.$emit('pick', date, visible, first);
       },
@@ -122,12 +128,12 @@
     },
 
     created() {
-      !this.date && Vue.set(this, 'date', new Date());
-      !this.visible && Vue.set(this, 'visible', false);
+      !this.currentDate && Vue.set(this, 'currentDate', new Date());
+      !this.currentVisible && Vue.set(this, 'currentVisible', false);
 
-      this.hours = this.date.getHours();
-      this.minutes = this.date.getMinutes();
-      this.seconds = this.date.getSeconds();
+      this.hours = this.currentDate.getHours();
+      this.minutes = this.currentDate.getMinutes();
+      this.seconds = this.currentDate.getSeconds();
     },
 
     mounted() {
diff --git a/packages/dropdown/src/dropdown.vue b/packages/dropdown/src/dropdown.vue
index 56905cdfa..75b7d428a 100644
--- a/packages/dropdown/src/dropdown.vue
+++ b/packages/dropdown/src/dropdown.vue
@@ -41,7 +41,6 @@
   import ElButton from 'packages/button/index.js';
   import ElButtonGroup from 'packages/button-group/index.js';
   import ElDropdownMenu from './dropdown-menu.vue';
-  import Vue from 'vue';
   import Clickoutside from 'main/utils/clickoutside';
 
   export default {
diff --git a/packages/menu/src/menu.vue b/packages/menu/src/menu.vue
index 02fbaac4d..743996df3 100644
--- a/packages/menu/src/menu.vue
+++ b/packages/menu/src/menu.vue
@@ -67,7 +67,7 @@
         this.$emit('select', key, keyPath);
 
         if (this.router) {
-          this.$route.router.go(key);
+          this.$router.push(key);
         }
       }
     },