UNPKG

tdesign-mobile-vue

Version:
199 lines (195 loc) 7.66 kB
/** * tdesign v1.7.0 * (c) 2024 TDesign Group * @license MIT */ import _typeof from '@babel/runtime/helpers/typeof'; import _slicedToArray from '@babel/runtime/helpers/slicedToArray'; import _defineProperty from '@babel/runtime/helpers/defineProperty'; import { defineComponent, inject, computed, ref, toRefs, onMounted, watch, nextTick, createVNode } from 'vue'; import useLengthLimit from '../hooks/useLengthLimit.js'; import config from '../config.js'; import props from './props.js'; import calcTextareaHeight from '../_common/js/utils/calcTextareaHeight.js'; import { FormItemInjectionKey } from '../form/const.js'; import { useFormDisabled } from '../form/hooks.js'; import { usePrefixClass } from '../hooks/useClass.js'; import { useTNodeJSX } from '../hooks/tnode.js'; import { useVModel } from '../shared/useVModel/index.js'; import 'lodash/isNumber'; import 'lodash/isObject'; import '../_common/js/log/log.js'; import '../_common/js/utils/helper.js'; import '@babel/runtime/helpers/toConsumableArray'; import '@babel/runtime/helpers/objectWithoutProperties'; import 'lodash/isString'; import 'lodash/isNull'; import 'lodash/isUndefined'; import 'lodash/isArray'; import 'lodash/isBoolean'; import '../config-provider/useConfig.js'; import 'lodash/isFunction'; import 'lodash/cloneDeep'; import '../config-provider/context.js'; import 'lodash/mergeWith'; import 'lodash/merge'; import '../_common/js/global-config/mobile/default-config.js'; import '../_common/js/global-config/mobile/locale/zh_CN.js'; import '../_chunks/dep-d5364bc4.js'; import '../_chunks/dep-eb734424.js'; import 'dayjs'; import 'lodash/camelCase'; import 'lodash/kebabCase'; import '../hooks/render-tnode.js'; import 'lodash/isEmpty'; var prefix = config.prefix; var _Textarea = defineComponent({ name: "".concat(prefix, "-textarea"), props: props, setup: function setup(props2, context) { var renderTNodeJSX = useTNodeJSX(); var isDisabled = useFormDisabled(); var formItem = inject(FormItemInjectionKey, void 0); var textareaClass = usePrefixClass("textarea"); var textareaClasses = computed(function () { return ["".concat(textareaClass.value), _defineProperty(_defineProperty({}, "".concat(textareaClass.value, "--layout-").concat(props2.layout), props2.layout), "".concat(textareaClass.value, "--border"), props2.bordered)]; }); var textareaInnerClasses = computed(function () { return ["".concat(textareaClass.value, "__wrapper-inner"), _defineProperty(_defineProperty({}, "".concat(textareaClass.value, "--disabled"), isDisabled.value), "".concat(textareaClass.value, "--readonly"), props2.readonly)]; }); var textareaRef = ref(); var textareaStyle = ref(); var _toRefs = toRefs(props2), value = _toRefs.value, modelValue = _toRefs.modelValue; var _useVModel = useVModel(value, modelValue, props2.defaultValue, props2.onChange), _useVModel2 = _slicedToArray(_useVModel, 2), innerValue = _useVModel2[0], setInnerValue = _useVModel2[1]; var limitParams = computed(function () { return { value: [void 0, null].includes(innerValue.value) ? void 0 : String(innerValue.value), maxlength: Number(props2.maxlength), maxcharacter: props2.maxcharacter, allowInputOverMax: props2.allowInputOverMax }; }); var _useLengthLimit = useLengthLimit(limitParams), limitNumber = _useLengthLimit.limitNumber, getValueByLimitNumber = _useLengthLimit.getValueByLimitNumber; var setInputValue = function setInputValue() { var v = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : ""; var input = textareaRef.value; var sV = String(v); if (!input) { return; } if (input.value !== sV) { input.value = sV; } }; var adjustTextareaHeight = function adjustTextareaHeight() { if (props2.autosize === true) { textareaStyle.value = calcTextareaHeight(textareaRef.value); } else if (props2.autosize === false) { textareaStyle.value = calcTextareaHeight(textareaRef.value, 1, 1); } else if (_typeof(props2.autosize) === "object") { var _props2$autosize = props2.autosize, minRows = _props2$autosize.minRows, maxRows = _props2$autosize.maxRows; textareaStyle.value = calcTextareaHeight(textareaRef.value, minRows, maxRows); } else if (context.attrs.rows) { textareaStyle.value = { height: "auto", minHeight: "auto" }; } }; var handleInput = function handleInput(e) { if (e instanceof InputEvent) { if (e.isComposing || e.inputType === "insertCompositionText") return; } textareaValueChangeHandle(); }; var textareaValueChangeHandle = function textareaValueChangeHandle() { var textarea = textareaRef.value; setInnerValue(getValueByLimitNumber(textarea.value)); nextTick(function () { return setInputValue(innerValue.value); }); adjustTextareaHeight(); }; var handleCompositionend = function handleCompositionend(e) { textareaValueChangeHandle(); }; var handleFocus = function handleFocus(e) { var _props2$onFocus; (_props2$onFocus = props2.onFocus) === null || _props2$onFocus === void 0 || _props2$onFocus.call(props2, innerValue.value, { e: e }); }; var handleBlur = function handleBlur(e) { var _props2$onBlur; formItem === null || formItem === void 0 || formItem.handleBlur(); (_props2$onBlur = props2.onBlur) === null || _props2$onBlur === void 0 || _props2$onBlur.call(props2, innerValue.value, { e: e }); }; onMounted(function () { if (props2.autofocus) { var _textareaRef$value; (_textareaRef$value = textareaRef.value) === null || _textareaRef$value === void 0 || _textareaRef$value.focus(); } textareaValueChangeHandle(); adjustTextareaHeight(); }); watch(innerValue, function () { nextTick(function () { adjustTextareaHeight(); }); }); watch(function () { return props2.autosize; }, function () { adjustTextareaHeight(); }); return function () { var renaderLabel = function renaderLabel() { var label = renderTNodeJSX("label"); return label ? createVNode("div", { "class": "".concat(textareaClass.value, "__label") }, [label]) : null; }; var readerIndicator = function readerIndicator() { var isShowIndicator = props2.indicator && (props2.maxcharacter || props2.maxlength); if (!isShowIndicator) { return null; } return createVNode("div", { "class": "".concat(textareaClass.value, "__indicator") }, [" ", limitNumber.value]); }; var textareaAttrs = { ref: textareaRef, class: textareaInnerClasses.value, style: textareaStyle.value, value: innerValue.value, name: props2.name, disabled: isDisabled.value, placeholder: props2.placeholder, readonly: props2.readonly, onFocus: handleFocus, onBlur: handleBlur, onInput: handleInput, onCompositionend: handleCompositionend }; return createVNode("div", { "class": textareaClasses.value }, [renaderLabel(), createVNode("div", { "class": "".concat(textareaClass.value, "__wrapper") }, [createVNode("textarea", textareaAttrs, null), readerIndicator()])]); }; } }); export { _Textarea as default }; //# sourceMappingURL=textarea.js.map