From 18119bab27ba909875f1145d0b99fca2ed73408e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=AE=87=E5=A4=A9?= <yutent.io@gmail.com>
Date: Thu, 22 Apr 2021 15:40:56 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BC=98=E5=8C=96=E7=BB=84=E4=BB=B6=E5=B0=BA?=
 =?UTF-8?q?=E5=AF=B8=E8=AE=BE=E7=BD=AE;dropdown=E7=BB=84=E4=BB=B6=E6=94=AF?=
 =?UTF-8?q?=E6=8C=81=E8=AE=BE=E7=BD=AE=E5=B0=BA=E5=AF=B8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/form/button.wc   | 11 ++++-----
 src/form/dropdown.wc | 56 ++++++++++++++++++++++++++++++++++++++++++--
 src/form/option.wc   | 15 +++++++++++-
 src/icon/index.wc    |  2 ++
 4 files changed, 75 insertions(+), 9 deletions(-)

diff --git a/src/form/button.wc b/src/form/button.wc
index 6f5d80c..a27d18e 100644
--- a/src/form/button.wc
+++ b/src/form/button.wc
@@ -9,8 +9,7 @@
 :host {
   overflow: hidden;
   display: inline-flex;
-  min-width: 72px;
-  width: 128px;
+  min-width: 128px;
   height: 36px;
   border-radius: 3px;
   user-select: none;
@@ -51,7 +50,7 @@
 }
 
 :host([size='large']) {
-  width: 212px;
+  min-width: 212px;
   height: 52px;
   font-size: 18px;
 
@@ -73,7 +72,7 @@
   }
 }
 :host([size='medium']) {
-  width: 160px;
+  min-width: 160px;
   height: 44px;
 
   button {
@@ -85,7 +84,7 @@
   width: 44px;
 }
 :host([size='small']) {
-  width: 96px;
+  min-width: 96px;
   height: 32px;
 }
 :host([size='small'][circle]) {
@@ -93,7 +92,7 @@
   width: 32px;
 }
 :host([size='mini']) {
-  width: 72px;
+  min-width: 72px;
   height: 26px;
   font-size: 12px;
 
diff --git a/src/form/dropdown.wc b/src/form/dropdown.wc
index bbd099d..c185c13 100644
--- a/src/form/dropdown.wc
+++ b/src/form/dropdown.wc
@@ -11,8 +11,7 @@
 <style lang="scss" scoped>
 :host {
   display: inline-flex;
-  min-width: 72px;
-  width: 128px;
+  min-width: 128px;
   height: 36px;
   border-radius: 3px;
   user-select: none;
@@ -85,6 +84,44 @@
   }
 }
 
+:host([size='large']) {
+  min-width: 234px;
+  height: 52px;
+  font-size: 18px;
+
+  .options-box {
+    top: 52px;
+  }
+}
+:host([size='medium']) {
+  min-width: 160px;
+  height: 44px;
+  .options-box {
+    top: 44px;
+  }
+}
+:host([size='small']) {
+  min-width: 96px;
+  height: 32px;
+  .options-box {
+    top: 32px;
+  }
+}
+:host([size='mini']) {
+  min-width: 72px;
+  height: 26px;
+  font-size: 12px;
+
+  .preview {
+    wc-icon {
+      --size: 10px;
+    }
+  }
+  .options-box {
+    top: 26px;
+  }
+}
+
 :host(:focus-within) {
   box-shadow: 0 0 0 2px var(--color-plain-a);
 }
@@ -110,6 +147,7 @@ export default class Dropdown {
   props = {
     value: '',
     placeholder: '',
+    size: '',
     disabled: false
   }
 
@@ -214,10 +252,24 @@ export default class Dropdown {
 
   watch() {
     switch (name) {
+      case 'value':
+        if (val !== null) {
+          this.value = val
+        }
+        break
+
       case 'placeholder':
         this.__INPUT__.placeholder = val || ''
         break
 
+      case 'size':
+        if (val) {
+          Array.from(this.children).forEach(it => {
+            it.setAttribute('size', val)
+          })
+        }
+        break
+
       case 'disabled':
         this.disabled = val !== null
         break
diff --git a/src/form/option.wc b/src/form/option.wc
index 08bd8ce..7928741 100644
--- a/src/form/option.wc
+++ b/src/form/option.wc
@@ -7,7 +7,7 @@
   display: flex;
   justify-content: space-between;
   align-items: center;
-  height: 32px;
+  height: 36px;
   transition: background 0.15s linear;
   color: var(--color-dark-1);
   cursor: pointer;
@@ -23,6 +23,19 @@
   }
 }
 
+:host([size='large']) {
+  height: 52px;
+}
+:host([size='medium']) {
+  height: 44px;
+}
+:host([size='small']) {
+  height: 32px;
+}
+:host([size='mini']) {
+  height: 26px;
+}
+
 :host(:hover),
 :host([active]) {
   label {
diff --git a/src/icon/index.wc b/src/icon/index.wc
index 87a42e8..2bd52af 100644
--- a/src/icon/index.wc
+++ b/src/icon/index.wc
@@ -14,6 +14,8 @@
 }
 .icon {
   display: block;
+  width: 100%;
+  height: 100%;
   fill: currentColor;
 
   &.load {