tdesign-mobile-vue
Version:
tdesign-mobile-vue
199 lines (195 loc) • 7.66 kB
JavaScript
/**
* 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