修复switch组件;完成radio组件

src/form/button.wc

@@ -10,6 +10,7 @@
   overflow: hidden;
   display: inline-block;
   user-select: none;
+  -moz-user-select: none;
   color: nth($cd, 2);
   cursor: pointer;
 
@@ -306,7 +307,7 @@ export default class Button {
     this._handleClick = ev => {
       if (this.props.loading || this.props.disabled) {
         // 阻止事件冒泡, 避免用户自己绑定click事件不受这2个值的限制
-        ev.cancelBubble = true
+        ev.stopPropagation()
         return
       }
       this.dispatchEvent(new CustomEvent('active'))

src/form/index.js

@@ -9,59 +9,6 @@ import 'css/form.scss'
 const log = console.log
 
 Anot.ui.form = '0.1.0'
-// 按钮
-Anot.component('button', {
-  __init__(props, state, next) {
-    state.text = this.text()
-    state.style = { 'border-radius': props.radius }
-    this.classList.add('do-fn-noselect')
-    this.classList.add('do-button')
-    this.classList.add(props.color || 'grey')
-    this.setAttribute(':click', 'onClick')
-    this.setAttribute(':class', '{disabled: disabled}')
-    this.setAttribute(':css', 'style')
-
-    if (props.size) {
-      this.classList.add(props.size)
-    }
-    if (props.hasOwnProperty('disabled')) {
-      state.disabled = true
-    }
-    delete props.disabled
-    delete props.color
-    delete props.size
-
-    next()
-  },
-  render(slots) {
-    let icon = ''
-    if (this.props.icon) {
-      icon = `<i class="do-button__icon do-icon-${this.props.icon}"></i>`
-    }
-    return `${icon}<span class="do-button__text" :text="text"></span>`
-  },
-  state: {
-    text: '',
-    disabled: false,
-    style: {}
-  },
-  props: {
-    click: Anot.PropsTypes.isFunction()
-  },
-  skip: ['style'],
-
-  watch: {},
-  methods: {
-    onClick() {
-      if (this.disabled) {
-        return
-      }
-      if (typeof this.props.click === 'function') {
-        this.props.click(this.props.prop)
-      }
-    }
-  }
-})
 
 // 单选按钮
 Anot.component('radio', {
@@ -122,48 +69,6 @@ Anot.component('radio', {
   }
 })
 
-// 开关
-Anot.component('switch', {
-  __init__(props, state, next) {
-    if (props.hasOwnProperty('disabled')) {
-      state.disabled = true
-    }
-    if (props.hasOwnProperty('checked')) {
-      if (state.value === null) {
-        state.value = true
-      }
-    }
-    state.value = !!state.value
-
-    this.classList.add('do-switch')
-    this.classList.add('do-fn-noselect')
-    this.classList.add(props.color || 'grey')
-    this.setAttribute(':class', '{disabled: disabled, checked: value}')
-    this.setAttribute(':click', 'onClick')
-
-    delete props.disabled
-    delete props.color
-    next()
-  },
-  render() {
-    return `
-      <span class="do-switch__label"><i class="do-switch__dot"></i></span>
-    `
-  },
-  state: {
-    value: null,
-    disabled: false
-  },
-  methods: {
-    onClick() {
-      if (this.disabled) {
-        return
-      }
-      this.value = !this.value
-    }
-  }
-})
-
 // 多选
 Anot.component('checkbox', {
   __init__(props, state, next) {
@@ -239,81 +144,4 @@ Anot.component('checkbox', {
   }
 })
 
-// 文本输入框
-Anot.component('input', {
-  __init__(props, state, next) {
-    if (props.hasOwnProperty('disabled')) {
-      state.disabled = true
-    }
-    if (props.iconR) {
-      state.pos = 'right'
-      props.icon = props.iconR
-      delete props.iconR
-    }
-    this.classList.add('do-input')
-    this.classList.add('do-fn-noselect')
-    this.classList.add(props.color || 'grey')
-    if (props.icon) {
-      this.classList.add('icon-' + state.pos)
-    }
-    this.setAttribute(':class', '{disabled: disabled, active: active}')
-    this.setAttribute(':css', '{width: props.width}')
-
-    delete props.disabled
-    delete props.color
-    next()
-  },
-  render() {
-    let { icon, placeholder } = this.props
-    let holder = `
-      <span 
-        class="do-input__holder"
-        :class="{visible: !value || active}"
-        :text="props.placeholder"></span>`
-    let input = `
-      <input 
-        class="do-input__input"
-        :attr="{disabled: disabled, type: props.type }"
-        :duplex="value" 
-        :keyup="onKeyup"
-        :blur="onBlur"
-        :focus="onFocus" />`
-    let ico = icon ? `<i class="do-input__icon do-icon-${icon}"></i>` : ''
-
-    return holder + input + ico
-  },
-  state: {
-    pos: 'left', // icon position
-    value: '',
-    disabled: false,
-    active: false
-  },
-  skip: ['pos'],
-  props: {
-    type: 'text',
-    width: 180,
-    placeholder: '',
-    default: '',
-    submit: Anot.PropsTypes.isFunction() // on key `ENTER`
-  },
-  methods: {
-    onFocus() {
-      this.active = true
-    },
-    onBlur() {
-      this.active = false
-    },
-    onKeyup(ev) {
-      if (this.disabled) {
-        return
-      }
-      if (ev.keyCode === 13) {
-        if (typeof this.props.submit === 'function') {
-          this.props.submit()
-        }
-      }
-    }
-  }
-})
-
 export default Anot

src/form/input.wc

@@ -387,7 +387,7 @@ export default class Input {
     // 回车事件
     this._handleSubmit = ev => {
       if (this.disabled || this.readonly) {
-        ev.cancelBubble = true
+        ev.stopPropagation()
         return
       }
       // up: 38, down: 40

src/form/radio.wc

@@ -0,0 +1,234 @@
+<template>
+  <label>
+    <span class="dot"></span>
+    <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);
+
+    &.checked .dot::after {
+      display: block;
+      width: 12px;
+      height: 12px;
+      border-radius: 50%;
+      background: nth($cgr, 1);
+      content: '';
+    }
+  }
+
+  .dot {
+    width: 18px;
+    height: 18px;
+    padding: 2px;
+    margin-right: 3px;
+    border: 1px solid nth($cgr, 1);
+    border-radius: 50%;
+    background: #fff;
+  }
+}
+
+:host([disabled]) {
+  cursor: not-allowed;
+  opacity: 0.6;
+}
+
+:host([size='large']) {
+  label {
+    width: 58px;
+    height: 32px;
+  }
+  .dot {
+    width: 26px;
+    height: 26px;
+  }
+}
+:host([size='medium']) {
+  label {
+    width: 50px;
+    height: 28px;
+  }
+  .dot {
+    width: 22px;
+    height: 22px;
+  }
+}
+:host([size='mini']) {
+  label {
+    width: 22px;
+    height: 14px;
+    padding: 2px;
+  }
+  .dot {
+    width: 10px;
+    height: 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>
+export default class Radio {
+  props = {
+    label: '',
+    checked: false,
+    disabled: false
+  }
+  constructor() {
+    /* render */
+
+    this.__SWITCH__ = this.root.lastElementChild
+  }
+
+  get value() {
+    return this.props.label
+  }
+
+  set value(val) {
+    this.checked = this.props.label === val
+  }
+
+  get checked() {
+    return this.props.checked
+  }
+
+  set checked(val) {
+    this.props.checked = !!val
+    this.__SWITCH__.classList.toggle('checked', this.props.checked)
+  }
+
+  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 = true
+          this.dispatchEvent(new CustomEvent('input'))
+        }
+      },
+      false
+    )
+  }
+
+  watch(name, old, val) {
+    if (old === val) {
+      return
+    }
+    switch (name) {
+      case 'label':
+        this.props.label = val
+        break
+
+      case 'checked':
+      case 'disabled':
+        if (val === '') {
+          this[name] = true
+        }
+        break
+    }
+  }
+}
+</script>

src/form/switch.wc

@@ -109,8 +109,12 @@ export default class Switch {
     this.__SWITCH__ = this.root.lastElementChild
   }
 
-  get type() {
+  get value() {
-    return 'radio'
+    return this.props.checked
+  }
+
+  set value(val) {
+    this.checked = val
   }
 
   get checked() {
@@ -142,12 +146,15 @@ export default class Switch {
   }
 
   mounted() {
-    this.__SWITCH__.addEventListener(
+    this.addEventListener(
       'click',
       ev => {
-        ev.preventDefault()
+        if (this.disabled) {
+          return
+        }
         if (!this.disabled) {
           this.checked = !this.checked
+          this.dispatchEvent(new CustomEvent('input'))
         }
       },
       false
@@ -160,12 +167,9 @@ export default class Switch {
     }
     switch (name) {
       case 'checked':
-        this.checked = !!val
-        break
-
       case 'disabled':
         if (val === '') {
-          this.disabled = true
+          this[name] = true
         }
         break
     }