update DatePicker

update DatePicker

package.json

@@ -1,6 +1,6 @@
 {
   "name": "iview",
-  "version": "0.9.11-rc-3",
+  "version": "0.9.11-rc-4",
   "title": "iView",
   "description": "A high quality  UI components Library with Vue.js",
   "homepage": "http://www.iviewui.com",

src/components/date-picker/base/date-table.vue

@@ -224,6 +224,7 @@
                         this.$emit('on-pick', newDate);
                     }
                 }
+                this.$emit('on-pick-click');
             },
             handleMouseMove (event) {
                 if (!this.rangeState.selecting) return;

src/components/date-picker/base/month-table.vue

@@ -67,6 +67,7 @@
 
                     this.$emit('on-pick', index);
                 }
+                this.$emit('on-pick-click');
             }
         }
     }

src/components/date-picker/base/year-table.vue

@@ -73,6 +73,7 @@
 
                     this.$emit('on-pick', cell.text);
                 }
+                this.$emit('on-pick-click');
             }
         }
     }

src/components/date-picker/panel/date-range.vue

@@ -39,7 +39,8 @@
                     selection-mode="range"
                     :disabled-date="disabledDate"
                     @on-changerange="handleChangeRange"
-                    @on-pick="handleRangePick"></date-table>
+                    @on-pick="handleRangePick"
+                    @on-pick-click="handlePickClick"></date-table>
                 <year-table
                     v-ref:left-year-table
                     v-show="leftCurrentView === 'year'"
@@ -47,7 +48,8 @@
                     :date="leftTableDate"
                     selection-mode="range"
                     :disabled-date="disabledDate"
-                    @on-pick="handleLeftYearPick"></year-table>
+                    @on-pick="handleLeftYearPick"
+                    @on-pick-click="handlePickClick"></year-table>
                 <month-table
                     v-ref:left-month-table
                     v-show="leftCurrentView === 'month'"
@@ -55,7 +57,8 @@
                     :date="leftTableDate"
                     selection-mode="range"
                     :disabled-date="disabledDate"
-                    @on-pick="handleLeftMonthPick"></month-table>
+                    @on-pick="handleLeftMonthPick"
+                    @on-pick-click="handlePickClick"></month-table>
             </div>
             <div :class="[prefixCls + '-content', prefixCls + '-content-right']">
                 <div :class="[datePrefixCls + '-header']" v-show="rightCurrentView !== 'time'">
@@ -89,7 +92,8 @@
                     selection-mode="range"
                     :disabled-date="disabledDate"
                     @on-changerange="handleChangeRange"
-                    @on-pick="handleRangePick"></date-table>
+                    @on-pick="handleRangePick"
+                    @on-pick-click="handlePickClick"></date-table>
                 <year-table
                     v-ref:right-year-table
                     v-show="rightCurrentView === 'year'"
@@ -97,7 +101,8 @@
                     :date="rightTableDate"
                     selection-mode="range"
                     :disabled-date="disabledDate"
-                    @on-pick="handleRightYearPick"></year-table>
+                    @on-pick="handleRightYearPick"
+                    @on-pick-click="handlePickClick"></year-table>
                 <month-table
                     v-ref:right-month-table
                     v-show="rightCurrentView === 'month'"
@@ -105,7 +110,8 @@
                     :date="rightTableDate"
                     selection-mode="range"
                     :disabled-date="disabledDate"
-                    @on-pick="handleRightMonthPick"></month-table>
+                    @on-pick="handleRightMonthPick"
+                    @on-pick-click="handlePickClick"></month-table>
             </div>
             <Confirm
                 v-if="confirm"

src/components/date-picker/panel/date.vue

@@ -39,7 +39,8 @@
                     :value="value"
                     :selection-mode="selectionMode"
                     :disabled-date="disabledDate"
-                    @on-pick="handleDatePick"></date-table>
+                    @on-pick="handleDatePick"
+                    @on-pick-click="handlePickClick"></date-table>
                 <year-table
                     v-ref:year-table
                     v-show="currentView === 'year'"
@@ -47,7 +48,8 @@
                     :date="date"
                     :selection-mode="selectionMode"
                     :disabled-date="disabledDate"
-                    @on-pick="handleYearPick"></year-table>
+                    @on-pick="handleYearPick"
+                    @on-pick-click="handlePickClick"></year-table>
                 <month-table
                     v-ref:month-table
                     v-show="currentView === 'month'"
@@ -55,7 +57,8 @@
                     :date="date"
                     :selection-mode="selectionMode"
                     :disabled-date="disabledDate"
-                    @on-pick="handleMonthPick"></month-table>
+                    @on-pick="handleMonthPick"
+                    @on-pick-click="handlePickClick"></month-table>
             </div>
             <Confirm
                 v-if="confirm"

src/components/date-picker/panel/mixin.js

@@ -19,6 +19,9 @@ export default {
         },
         handlePickSuccess () {
             this.$emit('on-pick-success');
+        },
+        handlePickClick () {
+            this.$emit('on-pick-click');
         }
     }
 }

src/components/date-picker/picker.vue

@@ -181,11 +181,17 @@
                 type: String,
                 default: ''
             },
-            align: {
+//            align: {
+//                validator (value) {
+//                    return oneOf(value, ['left', 'center', 'right']);
+//                },
+//                default: 'left'
+//            },
+            placement: {
                 validator (value) {
-                    return oneOf(value, ['left', 'center', 'right']);
+                    return oneOf(value, ['top', 'top-start', 'top-end', 'bottom', 'bottom-start', 'bottom-end', 'left', 'left-start', 'left-end', 'right', 'right-start', 'right-end']);
                 },
-                default: 'left'
+                default: 'bottom-start'
             },
             options: {
                 type: Object
@@ -197,7 +203,8 @@
                 showClose: false,
                 visible: false,
                 picker: null,
-                internalValue: ''
+                internalValue: '',
+                disableClickOutSide: false    // fixed when click a date,trigger clickoutside to close picker
             }
         },
         computed: {
@@ -207,9 +214,9 @@
             iconType () {
                 return this.showClose ? 'ios-close' : 'ios-calendar-outline';
             },
-            placement () {
+//            placement () {
-                return PLACEMENT_MAP[this.align];
+//                return PLACEMENT_MAP[this.align];
-            },
+//            },
             selectionMode() {
                 if (this.type === 'month') {
                     return 'month';
@@ -251,7 +258,8 @@
         },
         methods: {
             handleClose () {
-                this.visible = false;
+                if (!this.disableClickOutSide) this.visible = false;
+                this.disableClickOutSide = false;
             },
             handleFocus () {
                 if (this.readonly) return;
@@ -361,6 +369,7 @@
 //                        this.emitChange(this.value);
                         this.visible = false;
                     });
+                    this.picker.$on('on-pick-click', () => this.disableClickOutSide = true);
 
                     // todo $on('on-time-range')
                 }

test/routers/date.vue

@@ -1,36 +1,16 @@
 <template>
-    <div style="margin: 50px">
+    <div style="margin: 50px;position: relative">
-        <i-button @click="type = 'year'">year</i-button>
+        <Card>
-        <i-button @click="type = 'month'">month</i-button>
+            <row>
-        <br>
+                <i-col span="12">
-        <row>
+                    <date-picker type="date" placeholder="选择日期" style="width: 200px;"></date-picker>
-            <i-col span="8">
+                </i-col>
-                <!--<i-button @click="setDate">set date</i-button>-->
+                <i-col span="12">
-                <date-picker
+                    <date-picker type="daterange" placeholder="选择日期" style="width: 200px;"></date-picker>
-                        type="month"
+                </i-col>
-                        style="width:200px"
+            </row>
-                        placeholder="请选择日期"
+            fdsfs
-                        :value.sync="value"
+        </Card>
-                        @on-change="change"
-                        :confirm="false"
-                        :options="options"
-                        open
-                        @on-open-change="change2">
-                </date-picker>
-            </i-col>
-            <i-col span="8">
-                <date-picker
-                        type="daterange"
-                        style="width:300px"
-                        placeholder="请选择日期"
-                        :value.sync="value2"
-                        align="right"
-                        :editable="true"
-                        @on-change="change"
-                        :confirm="true"
-                        :options="options2"></date-picker>
-            </i-col>
-        </row>
     </div>
 </template>
 <script>

test/routers/dropdown.vue

@@ -1,28 +1,24 @@
 <template>
-    <Dropdown @on-visible-change="v">
+    <Dropdown trigger="click">
         <a href="javascript:void(0)">
-            下拉菜单
+            北京小吃
             <Icon type="arrow-down-b"></Icon>
         </a>
         <Dropdown-menu slot="list">
             <Dropdown-item>驴打滚</Dropdown-item>
             <Dropdown-item>炸酱面</Dropdown-item>
-            <Dropdown-item disabled>豆汁儿</Dropdown-item>
+            <Dropdown-item>豆汁儿</Dropdown-item>
+            <Dropdown placement="right-start">
+                <Dropdown-item>
+                    北京烤鸭
+                    <Icon type="ios-arrow-right"></Icon>
+                </Dropdown-item>
+                <Dropdown-menu slot="list">
+                    <Dropdown-item>挂炉烤鸭</Dropdown-item>
+                    <Dropdown-item>焖炉烤鸭</Dropdown-item>
+                </Dropdown-menu>
+            </Dropdown>
             <Dropdown-item>冰糖葫芦</Dropdown-item>
-            <Dropdown-item divided>北京烤鸭</Dropdown-item>
-        </Dropdown-menu>
-    </Dropdown>
-    <Dropdown style="margin-left: 20px">
-        <i-button type="primary">
-            下拉菜单
-            <Icon type="arrow-down-b"></Icon>
-        </i-button>
-        <Dropdown-menu slot="list">
-            <Dropdown-item>驴打滚</Dropdown-item>
-            <Dropdown-item>炸酱面</Dropdown-item>
-            <Dropdown-item disabled>豆汁儿</Dropdown-item>
-            <Dropdown-item>冰糖葫芦</Dropdown-item>
-            <Dropdown-item divided>北京烤鸭</Dropdown-item>
         </Dropdown-menu>
     </Dropdown>
 </template>