From e3fd2190fd241d4e0edbfc0e4ab323f26eda6544 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=AE=87=E5=A4=A9?= <yutent@doui.cc>
Date: Mon, 19 Aug 2019 14:15:18 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BC=98=E5=8C=96=E7=BB=84=E4=BB=B6=E5=A4=96?=
 =?UTF-8?q?=E7=82=B9=E5=87=BB=E4=BA=8B=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/form/input.wc  | 15 ++++++---------
 src/form/select.wc | 24 ++++++++++++++----------
 src/picker/date.wc | 10 ++++------
 src/utils.js       | 14 ++++++++++++++
 4 files changed, 38 insertions(+), 25 deletions(-)

diff --git a/src/form/input.wc b/src/form/input.wc
index bc4ea2b..77a9d69 100644
--- a/src/form/input.wc
+++ b/src/form/input.wc
@@ -45,6 +45,7 @@ li {
   textarea {
     flex: 1;
     min-width: 0;
+    width: 0;
     height: 100%;
     padding: 0 5px;
     border: 0;
@@ -61,8 +62,7 @@ li {
     }
   }
   textarea {
-    width: 100%;
-    padding: 5px;
+    padding: 5px 8px;
     resize: none;
   }
   .prepend,
@@ -107,7 +107,7 @@ li {
   padding: 8px 0;
   border-radius: 4px;
   background: #fff;
-  box-shadow: 0 0 3px rgba(0, 0, 0, 0.2);
+  box-shadow: 0 0 5px rgba(0, 0, 0, 0.25);
 
   .list {
     width: 100%;
@@ -221,7 +221,7 @@ li {
 <script>
 import '../scroll/index'
 import '../icon/index'
-import { nextTick, ebind, bind, unbind } from '../utils'
+import { ebind, bind, unbind, clickOutside } from '../utils'
 
 const IS_FIREFOX = !!window.sidebar
 const TYPES = ['text', 'textarea', 'password']
@@ -458,9 +458,7 @@ export default class Input {
         }
       })
 
-      this._bubbleFn = ebind(this, 'click')
-
-      this._inactiveFn = bind(document, 'click', ev => {
+      this._inactiveFn = clickOutside(this, ev => {
         this.__LIST__.classList.remove('show')
       })
 
@@ -478,8 +476,7 @@ export default class Input {
     unbind(this.__INPUT__, 'wheel', this._handleWheel)
     unbind(this.__INPUT__, 'keydown', this._handleSubmit)
     unbind(this.__INPUT__, 'input', this._handleChange)
-    unbind(this, 'click', this._bubbleFn)
-    unbind(document, 'click', this._inactiveFn)
+    unbind(document, 'mousedown', this._inactiveFn)
     unbind(this.__LIST__, 'click', this._handleSelect)
   }
 
diff --git a/src/form/select.wc b/src/form/select.wc
index 1bb0924..07ab2e5 100644
--- a/src/form/select.wc
+++ b/src/form/select.wc
@@ -39,6 +39,7 @@
     flex: 1;
     width: 0;
     min-width: 64px;
+    width: 0;
     height: 100%;
     padding: 0 5px;
     border: 0;
@@ -99,7 +100,7 @@
   padding: 8px 0;
   border-radius: 4px;
   background: #fff;
-  box-shadow: 0 0 3px rgba(0, 0, 0, 0.2);
+  box-shadow: 0 0 5px rgba(0, 0, 0, 0.25);
   cursor: default;
 
   .list {
@@ -209,8 +210,8 @@
     height: 24px;
     font-size: 12px;
   }
-  .icon {
-    --size: 16px;
+  .arrow {
+    --size: 12px;
   }
   .prepend,
   .append {
@@ -222,7 +223,7 @@
 <script>
 import '../scroll/index'
 import '../icon/index'
-import { nextTick, ebind, bind, unbind } from '../utils'
+import { ebind, bind, unbind, clickOutside } from '../utils'
 
 function parseOptions(arr, props) {
   let html = ''
@@ -407,9 +408,14 @@ export default class Select {
 
     function initPos() {
       var { x, y, width } = this.getBoundingClientRect()
+      var size = this.getAttribute('size')
       this.props.active = true
-      this.__OPTG__.style.cssText = `left:${x}px;top:${y +
-        50}px;width:${width}px;`
+      if (size && size === 'mini') {
+        y += 32
+      } else {
+        y += 50
+      }
+      this.__OPTG__.style.cssText = `left:${x}px;top:${y}px;width:${width}px;`
     }
 
     /* ---------------------------------------------------- */
@@ -454,8 +460,7 @@ export default class Select {
       }
     })
 
-    this._bubbleFn = ebind(this, 'click')
-    this._inactiveFn = bind(document, 'click', ev => {
+    this._inactiveFn = clickOutside(this, ev => {
       this.__OPTG__.classList.toggle('show', false)
       this.props.active = false
     })
@@ -497,8 +502,7 @@ export default class Select {
   unmount() {
     unbind(this.__INPUT__, 'keydown', this._handleKeydown)
     unbind(this.__INPUT__, 'click', this._activeFn)
-    unbind(this, 'click', this._bubbleFn)
-    unbind(document, 'click', this._inactiveFn)
+    unbind(document, 'mousedown', this._inactiveFn)
     unbind(this.__OPTG__, 'click', this._handleSelect)
   }
 }
diff --git a/src/picker/date.wc b/src/picker/date.wc
index 256ec15..b0b8b35 100644
--- a/src/picker/date.wc
+++ b/src/picker/date.wc
@@ -99,7 +99,7 @@
   font-size: 12px;
   text-align: center;
   background: #fff;
-  box-shadow: 0 0 3px rgba(0, 0, 0, 0.2);
+  box-shadow: 0 0 5px rgba(0, 0, 0, 0.25);
 
   &::after {
     position: absolute;
@@ -225,7 +225,7 @@
 
 <script>
 import '../icon/index'
-import { nextTick, each, ebind, bind, unbind } from '../utils'
+import { nextTick, each, ebind, bind, unbind, clickOutside } from '../utils'
 
 const today = new Date()
 
@@ -505,8 +505,7 @@ export default class DatePicker {
       this.__CALENDAR__.classList.toggle('show')
     })
 
-    this._bubbleFn = ebind(this, 'click')
-    this._inactiveFn = bind(document, 'click', ev => {
+    this._inactiveFn = clickOutside(this, ev => {
       this.__CALENDAR__.classList.toggle('show', false)
       this.props.active = false
     })
@@ -583,8 +582,7 @@ export default class DatePicker {
 
   unmount() {
     unbind(this.__INPUT__, 'click', this._activeFn)
-    unbind(this, 'click', this._bubbleFn)
-    unbind(document, 'click', this._inactiveFn)
+    unbind(document, 'mousedown', this._inactiveFn)
     unbind(this.__CTRL__, 'click', this._ctrlFn)
     unbind(this.__DAYS__, 'click', this._pickFn)
   }
diff --git a/src/utils.js b/src/utils.js
index 315f747..fafd1a6 100644
--- a/src/utils.js
+++ b/src/utils.js
@@ -85,3 +85,17 @@ export const unbind = function(dom, type, fn = noop, phase = false) {
     dom.removeEventListener(t, fn, phase)
   })
 }
+
+// 指定节点外点击(最高不能超过body层)
+export const clickOutside = function(dom, fn = noop) {
+  return bind(document, 'mousedown', ev => {
+    if (ev) {
+      var target = ev.target
+
+      if (dom === target || dom.contains(target)) {
+        return
+      }
+      fn(ev)
+    }
+  })
+}