From d7bde43d53ec7b6eca27586bb74a587c0e23b933 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=AE=87=E5=A4=A9?= <yutent@doui.cc>
Date: Thu, 25 Jul 2019 21:29:03 +0800
Subject: [PATCH] =?UTF-8?q?=E5=AE=8C=E6=88=90checkbox?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/form/checkbox.wc | 239 +++++++++++++++++++++++++++++++++++++++++++
 src/form/index.js    | 147 --------------------------
 2 files changed, 239 insertions(+), 147 deletions(-)
 delete mode 100644 src/form/index.js

diff --git a/src/form/checkbox.wc b/src/form/checkbox.wc
index e69de29..feab115 100644
--- a/src/form/checkbox.wc
+++ b/src/form/checkbox.wc
@@ -0,0 +1,239 @@
+<template>
+  <label>
+    <wc-icon class="dot" is="checkbox-off"></wc-icon>
+    <slot></slot>
+  </label>
+</template>
+
+<style lang="scss">
+:host {
+  display: inline-block;
+  font-size: 14px;
+
+  label {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    min-width: 32px;
+    height: 32px;
+    padding: 0 5px;
+    user-select: none;
+    -moz-user-select: none;
+    cursor: inherit;
+    color: nth($cgr, 3);
+  }
+
+  .dot {
+    --size: 18px;
+    padding: 2px;
+    margin-right: 3px;
+  }
+}
+
+:host([disabled]) {
+  cursor: not-allowed;
+  opacity: 0.6;
+}
+
+:host([size='large']) {
+  label {
+    width: 58px;
+    height: 32px;
+  }
+  .dot {
+    --size: 26px;
+  }
+}
+:host([size='medium']) {
+  label {
+    width: 50px;
+    height: 28px;
+  }
+  .dot {
+    --size: 22px;
+  }
+}
+:host([size='mini']) {
+  label {
+    width: 22px;
+    height: 14px;
+    padding: 2px;
+  }
+  .dot {
+    --size: 10px;
+  }
+}
+
+:host([color='red']) label.checked {
+  color: nth($cr, 1);
+  .dot {
+    border-color: nth($cr, 1);
+  }
+  .dot::after {
+    background: nth($cr, 1);
+  }
+}
+
+:host([color='blue']) label.checked {
+  color: nth($cb, 1);
+  .dot {
+    border-color: nth($cb, 1);
+  }
+  .dot::after {
+    background: nth($cb, 1);
+  }
+}
+
+:host([color='green']) label.checked {
+  color: nth($cg, 1);
+  .dot {
+    border-color: nth($cg, 1);
+  }
+  .dot::after {
+    background: nth($cg, 1);
+  }
+}
+
+:host([color='teal']) label.checked {
+  color: nth($ct, 1);
+  .dot {
+    border-color: nth($ct, 1);
+  }
+  .dot::after {
+    background: nth($ct, 1);
+  }
+}
+
+:host([color='orange']) label.checked {
+  color: nth($co, 1);
+  .dot {
+    border-color: nth($co, 1);
+  }
+  .dot::after {
+    background: nth($co, 1);
+  }
+}
+
+:host([color='dark']) label.checked {
+  color: nth($cd, 1);
+  .dot {
+    border-color: nth($cd, 1);
+  }
+  .dot::after {
+    background: nth($cd, 1);
+  }
+}
+
+:host([color='purple']) label.checked {
+  color: nth($cpp, 1);
+  .dot {
+    border-color: nth($cpp, 1);
+  }
+  .dot::after {
+    background: nth($cpp, 1);
+  }
+}
+</style>
+
+<script>
+import '../icon/index'
+export default class Checkbox {
+  props = {
+    label: '',
+    color: '',
+    value: [],
+    checked: false,
+    disabled: false
+  }
+  constructor() {
+    /* render */
+
+    this.__SWITCH__ = this.root.lastElementChild
+    this.__ICO__ = this.__SWITCH__.children[0]
+  }
+
+  get value() {
+    return this.props.value
+  }
+
+  set value(val) {
+    this.props.value = val
+    this.checked = this.props.value.includes(this.props.label)
+  }
+
+  get checked() {
+    return this.props.checked
+  }
+
+  set checked(val) {
+    this.props.checked = !!val
+    var { value, checked, label, color } = this.props
+    this.__SWITCH__.classList.toggle('checked', checked)
+    this.__ICO__.setAttribute('is', 'checkbox-' + (checked ? 'on' : 'off'))
+
+    var idx = value.indexOf(label)
+    if (checked) {
+      this.__ICO__.setAttribute('color', color)
+      if (idx < 0) {
+        value.push(label)
+      }
+    } else {
+      this.__ICO__.removeAttribute('color')
+      if (~idx) {
+        value.splice(idx, 1)
+      }
+    }
+  }
+
+  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', '')
+    } else {
+      this.props.disabled = false
+      this.removeAttribute('disabled')
+    }
+  }
+
+  mounted() {
+    this.addEventListener(
+      'click',
+      ev => {
+        if (!this.disabled) {
+          this.checked = !this.checked
+          this.dispatchEvent(new CustomEvent('input'))
+        }
+      },
+      false
+    )
+  }
+
+  watch(name, old, val) {
+    if (old === val) {
+      return
+    }
+    switch (name) {
+      case 'label':
+      case 'color':
+        this.props[name] = val
+        break
+
+      case 'checked':
+      case 'disabled':
+        if (val === '') {
+          this[name] = true
+        }
+        break
+    }
+  }
+}
+</script>
diff --git a/src/form/index.js b/src/form/index.js
deleted file mode 100644
index 19a2e33..0000000
--- a/src/form/index.js
+++ /dev/null
@@ -1,147 +0,0 @@
-/**
- * 各种表单元素组件
- * @authors yutent (yutent@doui.cc)
- * @date    2018-06-12 13:08:41
- * @version $Id$
- */
-
-import 'css/form.scss'
-const log = console.log
-
-Anot.ui.form = '0.1.0'
-
-// 单选按钮
-Anot.component('radio', {
-  __init__(props, state, next) {
-    if (props.hasOwnProperty('disabled')) {
-      state.disabled = true
-    }
-    if (props.hasOwnProperty('checked')) {
-      if (state.value === null) {
-        state.value = props.label
-      }
-    }
-
-    state.text = this.text()
-    state.checked = state.value === props.label
-
-    this.classList.add('do-radio')
-    this.classList.add('do-fn-noselect')
-    this.classList.add(props.color || 'grey')
-    this.setAttribute(':class', '{disabled: disabled, checked: checked}')
-    this.setAttribute(':click', 'onClick')
-
-    delete props.disabled
-    delete props.color
-
-    next()
-  },
-  render() {
-    return `
-      <span class="do-radio__box"></span>
-      <span class="do-radio__text" :text="text"></span>
-    `
-  },
-  state: {
-    value: null,
-    text: '',
-    checked: false,
-    disabled: false
-  },
-  props: {
-    label: ''
-  },
-  watch: {
-    value(val) {
-      this.checked = this.props.label === val
-    }
-  },
-  methods: {
-    onClick() {
-      if (this.disabled) {
-        return
-      }
-      if (!this.checked) {
-        this.checked = true
-        this.value = this.props.label
-      }
-    }
-  }
-})
-
-// 多选
-Anot.component('checkbox', {
-  __init__(props, state, next) {
-    if (!Array.isArray(state.value)) {
-      this.parentNode.removeChild(this)
-      Anot.error('多选框的传入值必须一个数组', TypeError)
-    }
-    if (props.hasOwnProperty('disabled')) {
-      state.disabled = true
-    }
-    if (props.hasOwnProperty('checked')) {
-      Anot.Array.ensure(state.value, props.label)
-    }
-
-    state.text = this.text()
-    state.checked = state.value.indexOf(props.label) > -1
-
-    this.classList.add('do-checkbox')
-    this.classList.add('do-fn-noselect')
-    this.classList.add(props.color || 'grey')
-    this.setAttribute(':class', '{disabled: disabled, checked: checked}')
-    this.setAttribute(':click', 'onClick')
-
-    delete props.disabled
-    delete props.color
-    next()
-  },
-  render() {
-    return `
-      <span class="do-checkbox__box">
-        <i class="do-icon-get" :visible="checked"></i>
-      </span>
-      <span class="do-checkbox__text" :text="text"></span>
-    `
-  },
-  state: {
-    value: [],
-    text: '',
-    checked: false,
-    disabled: false
-  },
-  props: {
-    label: ''
-  },
-  watch: {
-    'value.*'(val, old, k, kk) {
-      this.checked = this.value.indexOf(this.props.label) > -1
-    },
-    'value.length'(val, old, k, kk) {
-      this.checked = this.value.indexOf(this.props.label) > -1
-    },
-    value(val, old, k, kk) {
-      this.checked = this.value.indexOf(this.props.label) > -1
-    }
-  },
-  methods: {
-    onClick() {
-      if (this.disabled) {
-        return
-      }
-      let { label } = this.props
-      let list = this.value.$model
-      for (let i in list) {
-        if (list[i] === label) {
-          this.checked = false
-          this.value.removeAt.call(this.value, i)
-          return
-        }
-      }
-      this.checked = true
-      this.value.push(label)
-    }
-  }
-})
-
-export default Anot