From 0df60c5597f8646c94dd0bba7884202c023c5fac Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=AE=87=E5=A4=A9?= <yutent@doui.cc>
Date: Thu, 5 Sep 2019 20:40:01 +0800
Subject: [PATCH] =?UTF-8?q?=E5=8D=95=E9=80=89=E5=92=8C=E5=A4=8D=E9=80=89?=
 =?UTF-8?q?=E5=A2=9E=E5=8A=A0readonly=E7=8A=B6=E6=80=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/form/checkbox.wc | 49 +++++++++++++++++++++++++++++++++++---------
 src/form/radio.wc    | 27 +++++++++++++++++++++++-
 2 files changed, 65 insertions(+), 11 deletions(-)

diff --git a/src/form/checkbox.wc b/src/form/checkbox.wc
index 03979de..7b5a7b1 100644
--- a/src/form/checkbox.wc
+++ b/src/form/checkbox.wc
@@ -31,6 +31,10 @@
   }
 }
 
+:host([readonly]) {
+  opacity: 0.8;
+}
+
 :host([disabled]) {
   cursor: not-allowed;
   opacity: 0.6;
@@ -136,12 +140,15 @@
 
 <script>
 import '../icon/index'
+import { bind, unbind } from '../utils'
+
 export default class Checkbox {
   props = {
     label: '',
     color: '',
     value: [],
     checked: false,
+    readonly: false,
     disabled: false
   }
   __init__() {
@@ -188,6 +195,25 @@ export default class Checkbox {
     }
   }
 
+  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
   }
@@ -208,16 +234,18 @@ export default class Checkbox {
   }
 
   mounted() {
-    this.addEventListener(
-      'click',
-      ev => {
-        if (!this.disabled) {
-          this.checked = !this.checked
-          this.dispatchEvent(new CustomEvent('input'))
-        }
-      },
-      false
-    )
+    this._handlClick = bind(this, 'click', ev => {
+      ev.preventDefault()
+
+      if (!this.disabled && !this.readonly) {
+        this.checked = !this.checked
+        this.dispatchEvent(new CustomEvent('input'))
+      }
+    })
+  }
+
+  unmount() {
+    unbind(this, 'click', this._handlClick)
   }
 
   watch() {
@@ -228,6 +256,7 @@ export default class Checkbox {
         break
 
       case 'checked':
+      case 'readonly':
       case 'disabled':
         this[name] = true
         break
diff --git a/src/form/radio.wc b/src/form/radio.wc
index dd1836a..79f193d 100644
--- a/src/form/radio.wc
+++ b/src/form/radio.wc
@@ -44,6 +44,10 @@
   }
 }
 
+:host([readonly]) {
+  opacity: 0.8;
+}
+
 :host([disabled]) {
   cursor: not-allowed;
   opacity: 0.6;
@@ -159,6 +163,7 @@ export default class Radio {
   props = {
     label: '',
     checked: false,
+    readonly: false,
     disabled: false
   }
   __init__() {
@@ -184,6 +189,25 @@ export default class Radio {
     this.__SWITCH__.classList.toggle('checked', this.props.checked)
   }
 
+  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
   }
@@ -205,7 +229,7 @@ export default class Radio {
 
   mounted() {
     this._handleClick = bind(this, 'click', ev => {
-      if (!this.disabled && !this.checked) {
+      if (!this.disabled && !this.readonly && !this.checked) {
         this.checked = true
         this.dispatchEvent(new CustomEvent('input'))
       }
@@ -223,6 +247,7 @@ export default class Radio {
         break
 
       case 'checked':
+      case 'readonly':
       case 'disabled':
         this[name] = true
         break