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

Taro UI Rewritten in Vue 3.0

import {h, defineComponent, computed, mergeProps} from "vue";
import {Textarea, View} from "@tarojs/components";
import Taro from "@tarojs/taro";
import {pxTransform} from "../utils/common";
import {useModelValue} from "../composables/model";
function getMaxLength(maxLength, textOverflowForbidden) {
  if (!textOverflowForbidden) {
    return maxLength + 500;
  }
  return maxLength;
}
const ENV = Taro.getEnv();
const AtTextarea = defineComponent({
  name: "AtTextarea",
  props: {
    value: {
      type: String,
      default: ""
    },
    maxLength: {
      type: [String, Number],
      default: 200
    },
    placeholder: {type: String, default: ""},
    placeholderClass: {type: String, default: ""},
    placeholderStyle: {type: String, default: ""},
    disabled: {type: Boolean, default: false},
    autoFocus: {type: Boolean, default: false},
    focus: {type: Boolean, default: false},
    showConfirmBar: {type: Boolean, default: false},
    selectionStart: {type: Number, default: -1},
    selectionEnd: {type: Number, default: -1},
    count: {type: Boolean, default: true},
    fixed: {type: Boolean, default: false},
    textOverflowForbidden: {type: Boolean, default: true},
    height: {type: [String, Number], default: 100},
    cursorSpacing: {type: Number, default: 100},
    onChange: Function,
    onFocus: Function,
    onBlur: Function,
    onConfirm: Function,
    onLinechange: Function
  },
  setup(props, {attrs, emit}) {
    const inputValue = useModelValue(props, emit, "value");
    const _maxLength = computed(() => parseInt(props.maxLength.toString()));
    const actualMaxLength = computed(() => getMaxLength(_maxLength.value, 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(() => `placeholder ${props.placeholderClass}`);
    function handleInput(event) {
      var _a;
      if (attrs["onUpdate:value"]) {
        inputValue.value = event.target.value;
      } else {
        (_a = props.onChange) == null ? void 0 : _a.call(props, event.target.value, event);
      }
    }
    function handleFocus(event) {
      var _a;
      (_a = props.onFocus) == null ? void 0 : _a.call(props, event);
    }
    function handleBlur(event) {
      var _a;
      (_a = props.onBlur) == null ? void 0 : _a.call(props, event);
    }
    function handleConfirm(event) {
      var _a;
      (_a = props.onConfirm) == null ? void 0 : _a.call(props, event);
    }
    function handleLinechange(event) {
      var _a;
      (_a = props.onLinechange) == null ? void 0 : _a.call(props, event);
    }
    return () => h(View, mergeProps(attrs, {
      class: rootClasses.value
    }), {
      default: () => [
        h(Textarea, mergeProps(process.env.TARO_ENV === "alipay" ? {showCount: props.count} : {}, {
          class: "at-textarea__textarea",
          style: textareaStyle.value,
          placeholderStyle: props.placeholderStyle,
          placeholderClass: placeholderClasses.value,
          cursorSpacing: props.cursorSpacing,
          value: inputValue.value,
          maxlength: actualMaxLength.value,
          placeholder: props.placeholder,
          disabled: props.disabled,
          autoFocus: props.autoFocus,
          focus: props.focus,
          fixed: props.fixed,
          showConfirmBar: props.showConfirmBar,
          selectionStart: props.selectionStart,
          selectionEnd: props.selectionEnd,
          onInput: handleInput,
          onFocus: handleFocus,
          onBlur: handleBlur,
          onConfirm: handleConfirm,
          onLinechange: handleLinechange
        })),
        props.count && process.env.TARO_ENV !== "alipay" && h(View, {
          class: "at-textarea__counter"
        }, {default: () => `${inputValue.value.length} / ${_maxLength.value}`})
      ]
    });
  }
});
var textarea_default = AtTextarea;
export {
  textarea_default as default
};