ui/src/checkbox/checkbox.js

/**
 * {}
 * @author yutent<yutent.io@gmail.com>
 * @date 2023/03/21 16:14:10
 */

import { nextTick, css, html, Component } from 'wkit'
import '../icon/icon.js'

class Checkbox extends Component {
  static props = {
    value: {
      type: Array,
      default: [],
      observer() {
        this.#updateChildrenStat()
      }
    },
    disabled: false,
    readonly: false
  }

  static styles = css`
    :host {
      display: inline-flex;
      flex-wrap: wrap;
      align-items: center;
    }
  `

  mounted() {
    this.$on('child-change', ev => {
      ev.stopPropagation()
      let idx = this.value.indexOf(ev.value)
      if (idx > -1) {
        this.value.splice(idx, 1)
      } else {
        this.value.push(ev.value)
      }
      this.$emit('input', { data: this.value })
      this.$emit('change', { data: this.value })
    })

    this.#updateChildrenStat(true)
  }

  #updateChildrenStat(checkAll) {
    Array.from(this.children).forEach(it => {
      if (it.tagName === 'WC-CHECKBOX') {
        if (it.root) {
          if (checkAll) {
            it.disabled = this.disabled
            it.readOnly = this.readOnly
          }

          it.checked = this.value.includes(it.value)
        }
      } else {
        it.remove()
      }
    })
  }
}

class CheckboxItem extends Component {
  static props = {
    value: 'str!',
    checked: false,
    disabled: false,
    readonly: false
  }

  static styles = [
    css`
      :host {
        display: inline-flex;
        height: 32px;
        cursor: pointer;

        label {
          display: flex;
          align-items: center;
          padding-right: 16px;
          line-height: 1;
          font-size: 14px;
          white-space: nowrap;
          color: var(--color-dark-1);
          cursor: inherit;
          outline: none;
          -webkit-user-select: none;
          user-select: none;
        }

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

          wc-icon {
            display: block;
            visibility: hidden;
            width: 10px;
            height: 10px;
            transform: scale(0);
            transition: transform 0.15s linear;
          }
        }
        &:host([checked]) .dot wc-icon {
          visibility: visible;
          transform: scale(1);
        }
      }
    `,

    css`
      :host(:focus-within) .dot {
        box-shadow: 0 0 0 2px var(--color-plain-a);
      }
    `,
    // 尺寸
    css`
      :host([size='small']) {
        height: 24px;

        .dot {
          width: 12px;
          height: 12px;
        }
      }
    `,
    // 配色
    css`
      $colors: (
        primary: 'teal',
        info: 'blue',
        success: 'green',
        warning: 'orange',
        danger: 'red'
      );

      @loop $t, $c in $colors {
        :host([type='#{$t}']) {
          label {
            color: var(--color-#{$c}-2);
          }

          .dot {
            border-color: var(--color-#{$c}-2);
          }

          &:host(:focus-within) .dot {
            box-shadow: 0 0 0 2px var(--color-#{$c}-a);
          }
        }
      }
    `,
    // 状态
    css`
      :host([readonly]),
      :host([disabled]) {
        opacity: 0.6;
      }
      :host([disabled]) {
        cursor: not-allowed;
      }
    `
  ]

  #toggleCheck(ev) {
    if (this.disabled || this.readOnly) {
      return
    }

    ev.stopPropagation()

    this.checked = !this.checked
    let data = {
      value: this.value,
      checked: this.checked
    }

    if (this.inGroup) {
      this.parentNode.$emit('child-change', data)
    } else {
      this.$emit('input', data)
      this.$emit('change', data)
    }
  }

  #click(ev) {
    if (ev.type === 'click' || ev.keyCode === 32) {
      this.#toggleCheck(ev)
    }
  }

  mounted() {
    if (this.parentNode?.tagName === 'WC-CHECKBOX-GROUP') {
      this.inGroup = true
    }
  }

  render() {
    return html`<label
      tabindex=${this.disabled || this.readOnly ? 'none' : 0}
      @click=${this.#click}
      @keydown=${this.#click}
    >
      <span class="dot"><wc-icon name="get"></wc-icon></span>
      <slot></slot>
    </label>`
  }
}

Checkbox.reg('checkbox-group')
CheckboxItem.reg('checkbox')