From 66139664e4b6e07a730663163f9f3d3b59e1e3f7 Mon Sep 17 00:00:00 2001
From: "qingwei.li" <cinwell.li@gmail.com>
Date: Wed, 21 Sep 2016 12:46:53 +0800
Subject: [PATCH] DatePicker: add align attribute

---
 CHANGELOG.md                               |  2 ++
 examples/docs/date-picker.md               |  2 ++
 packages/autocomplete/src/autocomplete.vue |  5 ++---
 packages/date-picker/src/css/picker.css    |  4 ++--
 packages/date-picker/src/picker.vue        | 11 ++++++++++-
 5 files changed, 18 insertions(+), 6 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 928b0d503..9be8723a4 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -12,6 +12,8 @@
 - 修复 TimePicker 图标样式被默认图标样式覆盖
 - 修复 在 mounted 钩子函数中改变 Select 绑定值不生效的问题
 - 修复 在多个依次出现的 Dialog 或 Message Box 全部关闭后页面有几率不可滚动的问题
+- 新增 时间、日期选择器增加 align 属性，可设置对齐方式
+- 新增 TableColumn 的 align 属性
 
 #### 非兼容性更新
 - Select 组件样式的 `display` 属性默认值修改为 `block`
diff --git a/examples/docs/date-picker.md b/examples/docs/date-picker.md
index fb2771c00..cdc954171 100644
--- a/examples/docs/date-picker.md
+++ b/examples/docs/date-picker.md
@@ -205,6 +205,7 @@
     <el-date-picker
       v-model="value7"
       type="daterange"
+      align="right"
       placeholder="选择日期范围"
       :picker-options="pickerOptions2"
       style="width: 220px">
@@ -257,6 +258,7 @@
 | type | 显示类型 | string | year/month/date/datetime/week | date |
 | format | 时间日期格式化 | string | 年 `yyyy`，月 `MM`，日 `dd`，<br>小时 `HH`，分 `mm`，秒 `ss` | yyyy-MM-dd |
 | shortcuts | 快捷选项列表，配置信息<br>查看下表 | object[] | — | — |
+| align | 对齐方式 | left, center, right | left |
 
 ### Shortcuts
 | 参数      | 说明          | 类型      | 可选值                           | 默认值  |
diff --git a/packages/autocomplete/src/autocomplete.vue b/packages/autocomplete/src/autocomplete.vue
index f8a333ef9..f3e64a0f9 100644
--- a/packages/autocomplete/src/autocomplete.vue
+++ b/packages/autocomplete/src/autocomplete.vue
@@ -42,9 +42,7 @@
 </template>
 <script>
   import ElInput from 'packages/input/index.js';
-  import Vue from 'vue';
-  import VueClickoutside from 'main/utils/clickoutside';
-  Vue.use(VueClickoutside);
+  import Clickoutside from 'main/utils/clickoutside';
 
   export default {
     name: 'ElAutocomplete',
@@ -52,6 +50,7 @@
     components: {
       ElInput
     },
+    directives: { Clickoutside },
     props: {
       placeholder: String,
       disabled: Boolean,
diff --git a/packages/date-picker/src/css/picker.css b/packages/date-picker/src/css/picker.css
index 70ec352c3..d8136a916 100644
--- a/packages/date-picker/src/css/picker.css
+++ b/packages/date-picker/src/css/picker.css
@@ -47,8 +47,8 @@
         cursor: pointer;
         position: absolute;
         display: inline-block;
-        width: 20px;
-        right: 0;
+        width: 13px;
+        right: 10px;
         top: 0;
         bottom: 0;
         color: var(--datepicker-trigger-color);
diff --git a/packages/date-picker/src/picker.vue b/packages/date-picker/src/picker.vue
index c12b34010..93eca9292 100644
--- a/packages/date-picker/src/picker.vue
+++ b/packages/date-picker/src/picker.vue
@@ -177,6 +177,11 @@ const TYPE_VALUE_RESOLVER_MAP = {
     }
   }
 };
+const PLACEMENT_MAP = {
+  left: 'bottom-start',
+  center: 'bottom-center',
+  right: 'bottom-end'
+};
 
 export default {
   mixins: [emitter],
@@ -185,6 +190,10 @@ export default {
     format: String,
     readonly: Boolean,
     placeholder: String,
+    align: {
+      type: String,
+      default: 'left'
+    },
     value: {},
     haveTrigger: {},
     pickerOptions: {}
@@ -465,7 +474,7 @@ export default {
 
         this.popper = new Popper(this.$refs.reference, this.picker.$el, {
           gpuAcceleration: false,
-          placement: 'bottom-start',
+          placement: PLACEMENT_MAP[this.align] || PLACEMENT_MAP.left,
           boundariesPadding: 0,
           forceAbsolute: true
         });