From 5fe87cca8cc829a244e034fed9d481929d43ddc1 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=AE=87=E5=A4=A9?= <yutent.io@gmail.com>
Date: Wed, 8 Jul 2020 19:42:54 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E5=A4=8Dreadonly,=E9=81=B5=E5=BE=AAHT?=
 =?UTF-8?q?ML=E8=A7=84=E8=8C=83?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/form/checkbox.wc |  6 +++---
 src/form/input.wc    |  7 ++++---
 src/form/number.wc   |  8 ++++----
 src/form/radio.wc    |  6 +++---
 src/form/select.wc   | 34 +++++++++++++++++++++++++++++++++-
 5 files changed, 47 insertions(+), 14 deletions(-)

diff --git a/src/form/checkbox.wc b/src/form/checkbox.wc
index 80a7a4e..32e58d2 100644
--- a/src/form/checkbox.wc
+++ b/src/form/checkbox.wc
@@ -198,11 +198,11 @@ export default class Checkbox {
     }
   }
 
-  get readonly() {
+  get readOnly() {
     return this.props.readonly
   }
 
-  set readonly(val) {
+  set readOnly(val) {
     var type = typeof val
 
     if (val === this.props.readonly) {
@@ -240,7 +240,7 @@ export default class Checkbox {
     this._handlClick = $.bind(this, 'click', ev => {
       ev.preventDefault()
 
-      if (!this.disabled && !this.readonly) {
+      if (!this.disabled && !this.readOnly) {
         this.checked = !this.checked
         this.dispatchEvent(new CustomEvent('input'))
       }
diff --git a/src/form/input.wc b/src/form/input.wc
index 5a15384..bd2f91f 100644
--- a/src/form/input.wc
+++ b/src/form/input.wc
@@ -290,16 +290,17 @@ export default class Input {
     this.__LIST__ = this.__OUTER__.children[4]
   }
 
-  get readonly() {
+  get readOnly() {
     return this.props.readonly
   }
 
-  set readonly(val) {
+  set readOnly(val) {
     var type = typeof val
 
     if (val === this.props.readonly) {
       return
     }
+
     if ((type === 'boolean' && val) || type !== 'boolean') {
       this.props.readonly = true
       this.setAttribute('readonly', '')
@@ -417,7 +418,7 @@ export default class Input {
 
     // 键盘事件
     this._handleSubmit = $.catch(this.__INPUT__, 'keydown', ev => {
-      if (this.disabled || this.readonly) {
+      if (this.disabled || this.readOnly) {
         return
       }
       // up: 38, down: 40
diff --git a/src/form/number.wc b/src/form/number.wc
index 744509b..ca9babb 100644
--- a/src/form/number.wc
+++ b/src/form/number.wc
@@ -193,11 +193,11 @@ export default class Number {
     this.__INPUT__ = this.__OUTER__.children[1]
   }
 
-  get readonly() {
+  get readOnly() {
     return this.props.readonly
   }
 
-  set readonly(val) {
+  set readOnly(val) {
     var type = typeof val
 
     if (val === this.props.readonly) {
@@ -284,7 +284,7 @@ export default class Number {
   mounted() {
     // 键盘事件
     this._handleSubmit = $.catch(this.__INPUT__, 'keydown', ev => {
-      if (this.disabled || this.readonly) {
+      if (this.disabled || this.readOnly) {
         return
       }
 
@@ -317,7 +317,7 @@ export default class Number {
     })
 
     this._handleAction = $.bind(this.__OUTER__, 'click', ev => {
-      if (this.disabled || this.readonly) {
+      if (this.disabled || this.readOnly) {
         return
       }
       var target = ev.target
diff --git a/src/form/radio.wc b/src/form/radio.wc
index eddd324..08748ef 100644
--- a/src/form/radio.wc
+++ b/src/form/radio.wc
@@ -191,11 +191,11 @@ export default class Radio {
     this.__SWITCH__.classList.toggle('checked', this.props.checked)
   }
 
-  get readonly() {
+  get readOnly() {
     return this.props.readonly
   }
 
-  set readonly(val) {
+  set readOnly(val) {
     var type = typeof val
 
     if (val === this.props.readonly) {
@@ -231,7 +231,7 @@ export default class Radio {
 
   mounted() {
     this._handleClick = $.bind(this, 'click', ev => {
-      if (!this.disabled && !this.readonly && !this.checked) {
+      if (!this.disabled && !this.readOnly && !this.checked) {
         this.checked = true
         this.dispatchEvent(new CustomEvent('input'))
       }
diff --git a/src/form/select.wc b/src/form/select.wc
index 88a8c66..864fc59 100644
--- a/src/form/select.wc
+++ b/src/form/select.wc
@@ -167,6 +167,10 @@
   cursor: not-allowed;
   opacity: 0.6;
 }
+:host([readonly]) .label {
+  opacity: 0.8;
+}
+
 :host(:focus-within) {
   @include focus1;
 }
@@ -178,6 +182,10 @@
 :host([round]) {
   border-radius: 21px;
 
+  .label input {
+    padding: 0 10px;
+  }
+
   .prepend {
     border-radius: 21px 0 0 21px;
   }
@@ -261,6 +269,7 @@ export default class Select {
     value: '',
     options: '',
     mvidx: null, //下拉列表光标的索引ID
+    readonly: false,
     disabled: false
   }
 
@@ -274,6 +283,25 @@ export default class Select {
     this.__OPTG__ = this.__OUTER__.children[4]
   }
 
+  get readOnly() {
+    return this.props.readonly
+  }
+
+  set readOnly(val) {
+    var type = typeof val
+
+    if (val === this.props.readonly) {
+      return
+    }
+    if ((type === 'boolean' && val) || type !== 'boolean') {
+      this.props.readonly = true
+      this.setAttribute('readonly', '')
+    } else {
+      this.props.readonly = false
+      this.removeAttribute('readonly')
+    }
+  }
+
   get disabled() {
     return this.props.disabled
   }
@@ -424,7 +452,7 @@ export default class Select {
 
     // 键盘事件
     this._handleKeydown = $.catch(this.__INPUT__, 'keydown', ev => {
-      if (this.disabled || this.readonly) {
+      if (this.disabled || this.readOnly) {
         return
       }
       // up: 38, down: 40
@@ -448,6 +476,10 @@ export default class Select {
     this._activeFn = $.bind(this.__INPUT__, 'click', ev => {
       var { options } = this.props
 
+      if (this.disabled || this.readOnly) {
+        return
+      }
+
       initPos.call(this)
       this.__OPTG__.classList.toggle('show')
     })