wcui/src/form/textarea.wc

<template>
  <div class="label">
    <textarea spellcheck="false"></textarea>
    <div class="input-stat">0/∞</div>
  </div>
</template>

<style lang="scss">
:host {
  display: flex;
  width: 100%;
  height: 80px;
  user-select: none;
  -moz-user-select: none;
  color: var(--color-dark-1);
  border-radius: 3px;
  cursor: text;
  transition: box-shadow 0.15s linear;
}

.label {
  position: relative;
  width: 100%;
  height: 100%;
  font-size: 14px;
  border: 1px solid var(--color-grey-2);
  border-radius: inherit;
  background: var(--bg-color, #fff);
  color: inherit;
  cursor: inherit;

  textarea {
    flex: 1;
    min-width: 36px;
    width: 100%;
    height: 100%;
    padding: 5px 8px;
    border: 0;
    border-radius: inherit;
    color: inherit;
    font: inherit;
    background: none;
    outline: none;
    box-shadow: none;
    cursor: inherit;
    resize: none;

    &::placeholder {
      color: var(--color-grey-1);
    }
  }

  .input-stat {
    display: none;
    position: absolute;
    right: 4px;
    bottom: 2px;
    z-index: 1;
    line-height: 1;
    font-size: 12px;
    color: var(--color-grey-2);
  }
}

:host([show-limit]) {
  .label {
    padding-bottom: 14px;

    .input-stat {
      display: block;
    }
  }
}

/* --- */

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

  .label {
    background: var(--color-plain-1);
    opacity: 0.6;
  }
}

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

/* ----- 类型(颜色) ----- */
:host(:focus-within) {
  box-shadow: 0 0 0 2px var(--color-plain-a);
}
:host([type='primary']:focus-within) {
  box-shadow: 0 0 0 2px var(--color-teal-a);
}
:host([type='info']:focus-within) {
  box-shadow: 0 0 0 2px var(--color-blue-a);
}
:host([type='success']:focus-within) {
  box-shadow: 0 0 0 2px var(--color-green-a);
}
:host([type='danger']:focus-within) {
  box-shadow: 0 0 0 2px var(--color-red-a);
}
:host([type='warning']:focus-within) {
  box-shadow: 0 0 0 2px var(--color-orange-a);
}

:host([type='primary']) .label {
  border-color: var(--color-teal-2);
}
:host([type='info']) .label {
  border-color: var(--color-blue-2);
}
:host([type='success']) .label {
  border-color: var(--color-green-2);
}
:host([type='danger']) .label {
  border-color: var(--color-red-2);
}
:host([type='warning']) .label {
  border-color: var(--color-orange-2);
}

:host([no-border]),
:host(:focus-within[no-border]) {
  box-shadow: none;
  .label {
    border: 0;
  }
}
</style>

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

export default class Textarea {
  props = {
    value: '',
    placeholder: '',
    maxlength: 0,
    minlength: 0,
    autofocus: false,
    readonly: false,
    disabled: false,
    lazy: 0
  }

  __init__() {
    /* render */

    this.__OUTER__ = this.root.children[1]
    this.__INPUT__ = this.__OUTER__.children[0]
    this.__STAT__ = this.__OUTER__.children[1]
  }

  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', '')
      this.__INPUT__.setAttribute('readonly', '')
    } else {
      this.props.readonly = false
      this.removeAttribute('readonly')
      this.__INPUT__.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.__INPUT__.setAttribute('disabled', '')
    } else {
      this.props.disabled = false
      this.removeAttribute('disabled')
      this.__INPUT__.removeAttribute('disabled')
    }
  }

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

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

  mounted() {
    this.stamp = 0

    // 键盘事件
    this._handleSubmit = $.catch(this.__INPUT__, 'keydown', ev => {
      let { minlength, lazy } = this.props
      let val = this.value
      let now = Date.now()

      // 回车触发submit事件
      // 要按Ctrl Or Cmd键, 才会触发
      if (ev.keyCode === 13 && (ev.ctrlKey || ev.metaKey)) {
        //
        if (this.disabled || this.readOnly) {
          return
        }

        // 并发拦截
        if (lazy && now - this.stamp < lazy) {
          return
        }
        if (minlength && minlength > 0) {
          if (val.length < minlength) {
            return
          }
        }

        this.stamp = now
        $.fire(this, 'submit', { value: this.value })
      }
    })

    this._statFn = $.bind(this.__INPUT__, 'input,change', ev => {
      let { maxlength } = this.props
      let len = this.value.length
      maxlength = maxlength || '∞'

      this.__STAT__.textContent = `${len}/${maxlength}`
      $.fire(this, ev.type, { value: this.value })
    })
  }

  unmounted() {
    $.unbind(this.__INPUT__, 'keydown', this._handleSubmit)
    $.unbind(this.__INPUT__, 'input,change', this._statFn)
  }

  watch() {
    switch (name) {
      case 'autofocus':
        this.__INPUT__.setAttribute('autofocus', '')
        // 辣鸡火狐, 要触发一下focus, 才能聚焦
        setTimeout(_ => {
          this.__INPUT__.focus()
        }, 10)

        break

      case 'placeholder':
        this.__INPUT__.setAttribute('placeholder', val)
        break

      case 'value':
        this.value = val || ''
        break

      case 'maxlength':
        {
          let len = this.value.length
          if (val === null) {
            this.__INPUT__.removeAttribute(name)
            this.props.maxlength = 0
            this.__STAT__.textContent = `${len}/∞`
          } else {
            let n = +val
            if (n > 0) {
              this.__INPUT__.setAttribute(name, n)
              this.props.maxlength = n
              this.__STAT__.textContent = `${len}/${n}`
            } else {
              this.removeAttribute(name)
            }
          }
        }
        break

      case 'lazy':
        this.props.lazy = val >> 0
        break

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