xdesign-vue-next
Version:
XDesign Component for vue-next
281 lines (277 loc) • 11.7 kB
JavaScript
/**
* xdesign v1.0.6
* (c) 2023 xdesign
* @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, computed, toRefs, ref, inject, watch, nextTick, onMounted, createVNode, mergeProps } from 'vue';
import merge from 'lodash/merge';
import isUndefined from 'lodash/isUndefined';
import { getCharacterLength, omit } from '../utils/helper.js';
import calcTextareaHeight from './calcTextareaHeight.js';
import { FormItemInjectionKey } from '../form/const.js';
import setStyle from '../_common/js/utils/set-style.js';
import useVModel from '../hooks/useVModel.js';
import { useFormDisabled } from '../form/hooks.js';
import { useTNodeJSX } from '../hooks/tnode.js';
import { usePrefixClass, useCommonClassName } from '../hooks/useConfig.js';
import props from './props.js';
import '@babel/runtime/helpers/objectWithoutProperties';
import 'lodash/camelCase';
import 'lodash/isNull';
import 'lodash/isArray';
import 'lodash/isNumber';
import 'lodash/isString';
import 'lodash/kebabCase';
import 'lodash/isFunction';
import '../utils/render-tnode.js';
import 'lodash/isEmpty';
import 'lodash/isObject';
import '../config-provider/useConfig.js';
import 'lodash/cloneDeep';
import '../config-provider/context.js';
import 'lodash/mergeWith';
import '../_common/js/global-config/default-config.js';
import '../_common/js/global-config/locale/en_US.js';
import '../_chunks/dep-3a1cce9f.js';
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
function getValidAttrs(obj) {
var newObj = {};
Object.keys(obj).forEach(function (key) {
if (!isUndefined(obj[key])) {
newObj[key] = obj[key];
}
});
return newObj;
}
var _Textarea = defineComponent({
name: "XTextarea",
inheritAttrs: false,
props: _objectSpread({}, props),
setup: function setup(props2, _ref) {
var attrs = _ref.attrs,
expose = _ref.expose;
var prefix = usePrefixClass();
var name = usePrefixClass("textarea");
var TEXTAREA_TIPS_CLASS = computed(function () {
return "".concat(name.value, "__tips");
});
var TEXTAREA_LIMIT = computed(function () {
return "".concat(name.value, "__limit");
});
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 disabled = useFormDisabled();
var textareaStyle = ref({});
var refTextareaElem = ref();
var focused = ref(false);
var isComposing = ref(false);
var focus = function focus() {
var _refTextareaElem$valu;
return (_refTextareaElem$valu = refTextareaElem.value) === null || _refTextareaElem$valu === void 0 ? void 0 : _refTextareaElem$valu.focus();
};
var blur = function blur() {
var _refTextareaElem$valu2;
return (_refTextareaElem$valu2 = refTextareaElem.value) === null || _refTextareaElem$valu2 === void 0 ? void 0 : _refTextareaElem$valu2.blur();
};
var adjustTextareaHeight = function adjustTextareaHeight() {
var _refTextareaElem$valu3;
if (props2.autosize === true) {
textareaStyle.value = calcTextareaHeight(refTextareaElem.value);
} else if (props2.autosize && _typeof(props2.autosize) === "object") {
var _props2$autosize = props2.autosize,
minRows = _props2$autosize.minRows,
maxRows = _props2$autosize.maxRows;
textareaStyle.value = calcTextareaHeight(refTextareaElem.value, minRows, maxRows);
} else if (attrs.rows) {
textareaStyle.value = {
height: "auto",
minHeight: "auto"
};
} else if (attrs.style && (_refTextareaElem$valu3 = refTextareaElem.value) !== null && _refTextareaElem$valu3 !== void 0 && (_refTextareaElem$valu3 = _refTextareaElem$valu3.style) !== null && _refTextareaElem$valu3 !== void 0 && _refTextareaElem$valu3.height) {
textareaStyle.value = {
height: refTextareaElem.value.style.height
};
}
};
var setInputValue = function setInputValue() {
var v = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : "";
var textareaElem = refTextareaElem.value;
var sV = String(v);
if (!textareaElem) {
return;
}
if (textareaElem.value !== sV) {
textareaElem.value = sV;
innerValue.value = sV;
}
};
var inputValueChangeHandle = function inputValueChangeHandle(e) {
var target = e.target;
var val = target.value;
if (props2.maxcharacter && props2.maxcharacter >= 0) {
var stringInfo = getCharacterLength(val, props2.maxcharacter);
val = _typeof(stringInfo) === "object" && stringInfo.characters;
}
!isComposing.value && setInnerValue(val, {
e: e
});
nextTick(function () {
return setInputValue(val);
});
adjustTextareaHeight();
};
var handleInput = function handleInput(e) {
inputValueChangeHandle(e);
};
var onCompositionstart = function onCompositionstart() {
isComposing.value = true;
};
var onCompositionend = function onCompositionend(e) {
isComposing.value = false;
inputValueChangeHandle(e);
};
var eventDeal = function eventDeal(name2, e) {
var _props2$_name;
if (disabled.value) return;
var _name = "on".concat(name2[0].toUpperCase()).concat(name2.slice(1));
(_props2$_name = props2[_name]) === null || _props2$_name === void 0 ? void 0 : _props2$_name.call(props2, innerValue.value, {
e: e
});
};
var emitKeyDown = function emitKeyDown(e) {
eventDeal("keydown", e);
};
var emitKeyUp = function emitKeyUp(e) {
eventDeal("keyup", e);
};
var emitKeypress = function emitKeypress(e) {
eventDeal("keypress", e);
};
var emitFocus = function emitFocus(e) {
var _props2$onFocus;
adjustTextareaHeight();
if (disabled.value) return;
focused.value = true;
(_props2$onFocus = props2.onFocus) === null || _props2$onFocus === void 0 ? void 0 : _props2$onFocus.call(props2, innerValue.value, {
e: e
});
};
var formItem = inject(FormItemInjectionKey, void 0);
var emitBlur = function emitBlur(e) {
var _props2$onBlur;
adjustTextareaHeight();
focused.value = false;
(_props2$onBlur = props2.onBlur) === null || _props2$onBlur === void 0 ? void 0 : _props2$onBlur.call(props2, innerValue.value, {
e: e
});
formItem === null || formItem === void 0 ? void 0 : formItem.handleBlur();
};
var textareaClasses = computed(function () {
var _ref2;
return [name.value, (_ref2 = {}, _defineProperty(_ref2, "".concat(prefix.value, "-is-disabled"), disabled.value), _defineProperty(_ref2, "".concat(prefix.value, "-is-readonly"), props2.readonly), _ref2)];
});
var inputAttrs = computed(function () {
return getValidAttrs({
autofocus: props2.autofocus,
disabled: disabled.value,
readonly: props2.readonly,
placeholder: props2.placeholder,
maxlength: props2.maxlength || void 0,
name: props2.name || void 0
});
});
var characterNumber = computed(function () {
var characterInfo = getCharacterLength(String(innerValue.value || ""));
if (_typeof(characterInfo) === "object") {
return characterInfo.length;
}
return characterInfo;
});
watch(function () {
return innerValue.value;
}, function () {
return adjustTextareaHeight();
});
watch(refTextareaElem, function (el) {
if (!el) return;
adjustTextareaHeight();
});
watch(function () {
return props2.autofocus;
}, function (val) {
if (val) {
refTextareaElem.value.focus();
}
});
watch(textareaStyle, function (val) {
var style = attrs.style;
setStyle(refTextareaElem.value, merge(style, val));
});
watch(innerValue, function () {
nextTick(function () {
return adjustTextareaHeight();
});
});
watch(function () {
return props2.autosize;
}, adjustTextareaHeight, {
deep: true
});
expose({
focus: focus,
blur: blur
});
onMounted(function () {
adjustTextareaHeight();
});
var renderTNodeJSX = useTNodeJSX();
return function () {
var _String;
var inputEvents = getValidAttrs({
onFocus: emitFocus,
onBlur: emitBlur,
onKeydown: emitKeyDown,
onKeyup: emitKeyUp,
onKeypress: emitKeypress
});
var _useCommonClassName = useCommonClassName(),
STATUS = _useCommonClassName.STATUS;
var classes = computed(function () {
var _ref3;
return ["".concat(name.value, "__inner"), (_ref3 = {}, _defineProperty(_ref3, "".concat(prefix.value, "-is-").concat(props2.status), props2.status), _defineProperty(_ref3, STATUS.value.disabled, disabled.value), _defineProperty(_ref3, STATUS.value.focused, focused.value), _defineProperty(_ref3, "".concat(prefix.value, "-resize-none"), _typeof(props2.autosize) === "object"), _ref3), "narrow-scrollbar"];
});
var tips = renderTNodeJSX("tips");
var textTips = tips && createVNode("div", {
"class": "".concat(TEXTAREA_TIPS_CLASS.value, " ").concat(name.value, "__tips--").concat(props2.status || "normal")
}, [tips]);
var limitText = props2.maxcharacter && createVNode("span", {
"class": TEXTAREA_LIMIT.value
}, ["".concat(characterNumber.value, "/").concat(props2.maxcharacter)]) || !props2.maxcharacter && props2.maxlength && createVNode("span", {
"class": TEXTAREA_LIMIT.value
}, ["".concat(innerValue.value ? (_String = String(innerValue.value)) === null || _String === void 0 ? void 0 : _String.length : 0, "/").concat(props2.maxlength)]);
return createVNode("div", mergeProps({
"class": textareaClasses.value
}, omit(attrs, ["style"])), [createVNode("textarea", mergeProps({
"onInput": handleInput,
"onCompositionstart": onCompositionstart,
"onCompositionend": onCompositionend,
"ref": refTextareaElem,
"value": innerValue.value,
"class": classes.value
}, inputEvents, inputAttrs.value), null), textTips || limitText ? createVNode("div", {
"class": ["".concat(name.value, "__info_wrapper"), _defineProperty({}, "".concat(name.value, "__info_wrapper_align"), !textTips)]
}, [textTips, limitText]) : null]);
};
}
});
export { _Textarea as default };
//# sourceMappingURL=textarea.js.map