ui/src/form/switch.js

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

import { nextTick, css, html, Component } from '@bd/core'

class Switch extends Component {
  static props = {
    value: {
      type: String,
      default: '',
      attribute: false
    },
    disabled: false,
    readonly: false
  }

  static styles = [
    css`
      :host {
        display: inline-flex;
        align-items: center;
        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);
        }

        .dot {
          display: flex;
          justify-content: center;
          align-items: center;
          width: 36px;
          height: 18px;
          padding: 3px;
          margin-right: 5px;
          border-radius: 16px;
          background: var(--color-dark-1);
          transition: box-shadow 0.15s linear;
        }
      }
    `,

    css`
      :host(:focus-within) .dot {
        box-shadow: 0 0 0 2px var(--color-plain-a);
      }
    `,
    // 尺寸
    css`
      @use 'sass:map';
      $sizes: (
        m: (
          w: 72px,
          h: 24px,
          f: 12px
        ),
        l: (
          w: 108px,
          h: 32px,
          f: 14px
        ),
        xl: (
          w: 132px,
          h: 36px,
          f: 14px
        ),
        xxl: (
          w: 160px,
          h: 44px,
          f: 14px
        ),
        xxxl: (
          w: 192px,
          h: 52px,
          f: 16px
        )
      );

      @loop $s, $v in $sizes {
        :host([size='#{$s}']) {
          height: map.get($v, 'h');
          font-size: map.get($v, 'f');

          .dot {
            width: #{map.get($v, 'f') * 2.5};
            height: #{map.get($v, 'f') * 1.25};
          }
        }
      }
    `,
    // 配色
    css`
      $colors: (
        primary: 'teal',
        info: 'blue',
        success: 'green',
        warning: 'orange',
        danger: 'red',
        secondary: 'dark',
        help: 'grey'
      );

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

          .dot {
            background: var(--color-#{$c}-1);
          }

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

  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('change', data)
    }
  }

  handleClick(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 ? 'none' : 0}
      @click=${this.handleClick}
      @keydown=${this.handleClick}
    >
      <span class="dot"></span>
      <slot></slot>
    </label>`
  }
}

Switch.reg('switch')