From f733b06dbf787034bc912d4e917b3218b7d96492 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=AE=87=E5=A4=A9?= <yutent.io@gmail.com>
Date: Tue, 13 Apr 2021 10:55:59 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BC=98=E5=8C=96dropdown?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/form/dropdown.wc | 41 +++++++++++++++++++++++++++++++++++++++--
 1 file changed, 39 insertions(+), 2 deletions(-)

diff --git a/src/form/dropdown.wc b/src/form/dropdown.wc
index 2fd05d9..d0b9fb3 100644
--- a/src/form/dropdown.wc
+++ b/src/form/dropdown.wc
@@ -111,6 +111,17 @@ slot {
 :host(:focus-within) {
   box-shadow: 0 0 0 2px var(--color-plain-a);
 }
+
+/* --- */
+:host([disabled]) {
+  cursor: not-allowed;
+
+  .label {
+    border-color: var(--color-grey-1);
+    background: var(--color-plain-1);
+    opacity: 0.6;
+  }
+}
 </style>
 
 <script>
@@ -120,7 +131,8 @@ import $ from '../utils'
 export default class Dropdown {
   props = {
     value: '',
-    placeholder: ''
+    placeholder: '',
+    disabled: false
   }
 
   state = {
@@ -153,6 +165,27 @@ export default class Dropdown {
     }
   }
 
+  get disabled() {
+    return this.props.disabled
+  }
+
+  set disabled(val) {
+    var type = typeof val
+
+    if (val === this.props.disabled) {
+      return
+    }
+    if ((type === 'boolean' && val) || type !== 'boolean') {
+      this.props.disabled = true
+      this.setAttribute('disabled', '')
+      this.__INPUT__.disabled = true
+    } else {
+      this.props.disabled = false
+      this.removeAttribute('disabled')
+      this.__INPUT__.disabled = false
+    }
+  }
+
   mounted() {
     let opts = this.__SLOT__.assignedNodes()
     this.state.options = []
@@ -173,6 +206,9 @@ export default class Dropdown {
       .join('')
 
     this._activeFn = $.bind(this.__PREVIEW__, 'click', ev => {
+      if (this.disabled) {
+        return
+      }
       this.state.optionShow = !this.state.optionShow
       this.__OPTIONS__.classList.toggle('active', this.state.optionShow)
     })
@@ -212,7 +248,8 @@ export default class Dropdown {
         this.__INPUT__.placeholder = val || ''
         break
 
-      default:
+      case 'disabled':
+        this.disabled = val !== null
         break
     }
   }