choo-taro-ui-vue3/lib/textarea/index.js

Taro UI Rewritten in Vue 3.0

import Taro from '@tarojs/taro';
import { defineComponent, computed, toRefs, resolveComponent, mergeProps, createVNode, toDisplayString, createTextVNode, withCtx, openBlock, createBlock, createCommentVNode } from 'vue';
import { pxTransform } from '../utils';
import { useModelValue } from '../composables';

const AtTextarea = defineComponent({
  name: "AtTextarea",
  emits: [
    "blur",
    "focus",
    "confirm",
    "linechange",
    "update:modelValue"
  ],
  props: {
    modelValue: {
      type: String,
      default: ""
    },
    maxLength: {
      type: [String, Number],
      default: 200
    },
    focus: Boolean,
    fixed: Boolean,
    disabled: Boolean,
    autoFocus: Boolean,
    showConfirmBar: Boolean,
    count: { type: Boolean, default: true },
    textOverflowForbidden: { type: Boolean, default: true },
    placeholder: { type: String, default: "" },
    placeholderClass: { type: String, default: "" },
    placeholderStyle: { type: String, default: "" },
    selectionStart: { type: Number, default: -1 },
    selectionEnd: { type: Number, default: -1 },
    height: { type: [String, Number], default: 100 },
    cursorSpacing: { type: Number, default: 100 }
  },
  setup(props, { emit }) {
    const ENV = Taro.getEnv();
    const isAlipay = ENV === Taro.ENV_TYPE.ALIPAY;
    const inputValue = useModelValue(props, emit);
    const maxlength = computed(() => parseInt(props.maxLength.toString()));
    const actualMaxLength = computed(() => getMaxLength(maxlength.value, Boolean(props.textOverflowForbidden)));
    const textareaStyle = computed(() => props.height ? { height: `${pxTransform(Number(props.height))}` } : {});
    const rootClasses = computed(() => ({
      "at-textarea": true,
      [`at-textarea--${ENV}`]: true,
      "at-textarea--error": maxlength.value < inputValue.value.length
    }));
    const placeholderClasses = computed(() => props.placeholderClass ? `placeholder ${props.placeholderClass}` : "placeholder");
    const showCount = computed(() => isAlipay ? { showCount: props.count } : {});
    function getMaxLength(maxLength, textOverflowForbidden) {
      if (!textOverflowForbidden) {
        return maxLength + 500;
      }
      return maxLength;
    }
    function handleInput(event) {
      inputValue.value = event.detail.value;
    }
    function handleFocus(event) {
      emit("focus", event);
    }
    function handleBlur(event) {
      emit("blur", event);
    }
    function handleConfirm(event) {
      emit("confirm", event);
    }
    function handleLinechange(event) {
      emit("linechange", event);
    }
    return {
      ...toRefs(props),
      isAlipay,
      inputValue,
      showCount,
      maxlength,
      actualMaxLength,
      rootClasses,
      textareaStyle,
      placeholderClasses,
      handleBlur,
      handleInput,
      handleFocus,
      handleConfirm,
      handleLinechange
    };
  }
});

// Binding optimization for webpack code-split
const _resolveComponent = resolveComponent, _mergeProps = mergeProps, _createVNode = createVNode, _toDisplayString = toDisplayString, _createTextVNode = createTextVNode, _withCtx = withCtx, _openBlock = openBlock, _createBlock = createBlock, _createCommentVNode = createCommentVNode;

function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
  const _component_taro_textarea = process.env.TARO_ENV === "h5" ? _resolveComponent("taro-textarea") : "textarea";
  const _component_taro_view = process.env.TARO_ENV === "h5" ? _resolveComponent("taro-view") : "view";

  return (_openBlock(), _createBlock(_component_taro_view, _mergeProps(_ctx.$attrs, { class: _ctx.rootClasses }), {
    default: _withCtx(() => [
      _createVNode(_component_taro_textarea, _mergeProps({ class: "at-textarea__textarea" }, _ctx.showCount, {
        style: _ctx.textareaStyle,
        value: _ctx.inputValue,
        fixed: _ctx.fixed,
        focus: _ctx.focus,
        disabled: _ctx.disabled,
        "auto-focus": _ctx.autoFocus,
        "show-confirm-bar": _ctx.showConfirmBar,
        maxlength: _ctx.actualMaxLength,
        "cursor-spacing": _ctx.cursorSpacing,
        "selection-end": _ctx.selectionEnd,
        "selection-start": _ctx.selectionStart,
        placeholder: _ctx.placeholder,
        "placeholder-style": _ctx.placeholderStyle,
        "placeholder-class": _ctx.placeholderClasses,
        onBlur: _ctx.handleBlur,
        onFocus: _ctx.handleFocus,
        onInput: _ctx.handleInput,
        onConfirm: _ctx.handleConfirm,
        onLinechange: _ctx.handleLinechange
      }), null, 16 /* FULL_PROPS */, ["style", "value", "fixed", "focus", "disabled", "auto-focus", "show-confirm-bar", "maxlength", "cursor-spacing", "selection-end", "selection-start", "placeholder", "placeholder-style", "placeholder-class", "onBlur", "onFocus", "onInput", "onConfirm", "onLinechange"]),
      (_ctx.count && !_ctx.isAlipay)
        ? (_openBlock(), _createBlock(_component_taro_view, {
            key: 0,
            class: "at-textarea__counter"
          }, {
            default: _withCtx(() => [
              _createTextVNode(_toDisplayString(`${_ctx.inputValue.length} / ${_ctx.maxlength}`), 1 /* TEXT */)
            ]),
            _: 1 /* STABLE */
          }))
        : _createCommentVNode("v-if", true)
    ]),
    _: 1 /* STABLE */
  }, 16 /* FULL_PROPS */, ["class"]))
}


AtTextarea.render = _sfc_render;

export default AtTextarea;