wcui/src/form/radio-item.wc

<template>
  <label tabindex="0">
    <span class="dot"></span>
    <slot />
  </label>
</template>

<style lang="scss">
:host {
  display: inline-flex;
  align-items: center;
  line-height: 1;
  font-size: 14px;
  cursor: pointer;

  label {
    display: flex;
    justify-content: center;
    align-items: center;
    min-width: 32px;
    padding-right: 16px;
    line-height: 1;
    -moz-user-select: none;
    user-select: none;
    white-space: nowrap;
    cursor: inherit;
    outline: none;
    color: var(--color-dark-1);

    &.checked .dot::after {
      visibility: visible;
      transform: scale(1);
    }
  }

  .dot {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 16px;
    height: 16px;
    margin-right: 4px;
    border: 1px solid var(--color-dark-1);
    border-radius: 50%;
    background: #fff;
    transition: box-shadow 0.15s linear;

    &::after {
      display: block;
      visibility: hidden;
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background: var(--color-dark-1);
      content: '';
      transform: scale(0);
      transition: transform 0.15s linear;
    }
  }
}

:host(:focus-within) .dot {
  box-shadow: 0 0 0 2px var(--color-plain-a);
}

:host([type='danger']) label {
  color: var(--color-red-1);
  .dot {
    border-color: var(--color-red-1);
  }
  .dot::after {
    background: var(--color-red-1);
  }
}
:host([type='danger']:focus-within) .dot {
  box-shadow: 0 0 0 2px var(--color-red-a);
}

:host([type='success']) label {
  color: var(--color-green-1);
  .dot {
    border-color: var(--color-green-1);
  }
  .dot::after {
    background: var(--color-green-1);
  }
}
:host([type='success']:focus-within) .dot {
  box-shadow: 0 0 0 2px var(--color-green-a);
}

:host([type='primary']) label {
  color: var(--color-teal-1);
  .dot {
    border-color: var(--color-teal-1);
  }
  .dot::after {
    background: var(--color-teal-1);
  }
}
:host([type='primary']:focus-within) .dot {
  box-shadow: 0 0 0 2px var(--color-teal-a);
}

:host([type='warning']) label {
  color: var(--color-orange-1);
  .dot {
    border-color: var(--color-orange-1);
  }
  .dot::after {
    background: var(--color-orange-1);
  }
}
:host([type='warning']:focus-within) .dot {
  box-shadow: 0 0 0 2px var(--color-orange-a);
}

:host([type='info']) label {
  color: var(--color-blue-1);
  .dot {
    border-color: var(--color-blue-1);
  }
  .dot::after {
    background: var(--color-blue-1);
  }
}
:host([type='info']:focus-within) .dot {
  box-shadow: 0 0 0 2px var(--color-blue-a);
}

:host([readonly]) {
  cursor: default;
  opacity: 0.8;
}

:host([disabled]) {
  cursor: not-allowed;
  opacity: 0.6;

  label {
    color: var(--color-grey-2);
    .dot {
      border-color: var(--color-grey-1);
      box-shadow: none;
    }
    .dot::after {
      background: var(--color-grey-1);
    }
  }
}
</style>

<script>
import $ from '../utils'

export default class Radio {
  props = {
    value: '',
    checked: false,
    readonly: false,
    disabled: false
  }
  __init__() {
    /* render */

    this.__SWITCH__ = this.root.lastElementChild
  }

  get value() {
    return this.props.value
  }

  set value(val) {
    this.props.value = val
  }

  get checked() {
    return this.props.checked
  }

  set checked(val) {
    this.props.checked = !!val
    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
  }

  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.__SWITCH__.removeAttribute('tabindex')
    } else {
      this.props.disabled = false
      this.removeAttribute('disabled')
    }
  }

  _toggleCheck() {
    if (this.disabled || this.readOnly || this.checked) {
      return
    }

    this.checked = true

    this.parentNode.dispatchEvent(new CustomEvent('child-picked', { detail: this.value }))
  }

  mounted() {
    if (this.value === this.parentNode.value) {
      this.checked = true
    }

    this._handleClick = $.catch(this, 'click', ev => {
      ev.stopPropagation()
      this._toggleCheck()
    })

    this._handlKeydown = $.bind(this, 'keydown', ev => {
      // 空格交互
      if (ev.keyCode === 32) {
        this._toggleCheck()
      }
    })
  }

  unmounted() {
    $.unbind(this, 'click', this._handleClick)
    $.unbind(this, 'keydown', this._handlKeydown)
  }

  watch() {
    switch (name) {
      case 'value':
        this.value = val
        break

      case 'checked':
      case 'readonly':
      case 'disabled':
        var k = name
        if (k === 'readonly') {
          k = 'readOnly'
        }
        this[k] = val !== null
        break
    }
  }
}
</script>