tdesign-vue-next
Version:
TDesign Component for vue-next
313 lines (305 loc) • 11.4 kB
JavaScript
/**
* tdesign v1.11.5
* (c) 2025 tdesign
* @license MIT
*/
'use strict';
Object.defineProperty(exports, '__esModule', { value: true });
var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
var Vue = require('vue');
var form_consts_index = require('../../form/consts/index.js');
var hooks_useVModel = require('../../hooks/useVModel.js');
var hooks_useDisabled = require('../../hooks/useDisabled.js');
var input_hooks_useLengthLimit = require('./useLengthLimit.js');
var hooks_useReadonly = require('../../hooks/useReadonly.js');
require('@babel/runtime/helpers/typeof');
require('../../hooks/useConfig.js');
require('../../config-provider/hooks/useConfig.js');
require('../../_chunks/dep-b4c4a54b.js');
require('../../_chunks/dep-f8ff548f.js');
require('../../_chunks/dep-30fb1b25.js');
require('dayjs');
require('../../_chunks/dep-b6c192db.js');
require('../../_chunks/dep-ba2090c8.js');
require('../../_chunks/dep-b27d3215.js');
require('../../_chunks/dep-ed572eb3.js');
require('../../_chunks/dep-047617bf.js');
require('../../_chunks/dep-bbe343d7.js');
require('../../_chunks/dep-0a510359.js');
require('../../_chunks/dep-50a41d31.js');
require('../../_chunks/dep-be3c3d53.js');
require('../../_chunks/dep-0c2ad01b.js');
require('../../_chunks/dep-5ad8a2ab.js');
require('../../_chunks/dep-8b98fa07.js');
require('../../_chunks/dep-b0b4fff1.js');
require('../../_chunks/dep-7a21da5b.js');
require('../../_chunks/dep-49fa220e.js');
require('../../_chunks/dep-02ebb419.js');
require('../../_chunks/dep-feae46a3.js');
require('../../_chunks/dep-abf21389.js');
require('../../_chunks/dep-7f32423d.js');
require('../../_chunks/dep-7c9e3d93.js');
require('../../_chunks/dep-61a7e281.js');
require('../../_chunks/dep-ecbaedee.js');
require('../../_chunks/dep-9de7d250.js');
require('../../_chunks/dep-6f8a66a3.js');
require('../../_chunks/dep-b8b9c2a3.js');
require('../../hooks/useKeepAnimation.js');
require('@babel/runtime/helpers/defineProperty');
require('../../_chunks/dep-76218bd8.js');
require('../../_chunks/dep-acb090bf.js');
require('../../_chunks/dep-e495f218.js');
require('../../_chunks/dep-bafc1f63.js');
require('../../_chunks/dep-82a90f9f.js');
require('../../_chunks/dep-cef23b69.js');
require('../../_chunks/dep-25acc189.js');
require('@babel/runtime/helpers/toConsumableArray');
require('@babel/runtime/helpers/objectWithoutProperties');
require('../../_chunks/dep-93cf0a54.js');
require('../../_chunks/dep-8afe2bf0.js');
require('../../_chunks/dep-cea0dc9b.js');
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
var _slicedToArray__default = /*#__PURE__*/_interopDefaultLegacy(_slicedToArray);
function getOutputValue(val, type) {
if (type === "number") {
return val || val === 0 ? Number(val) : void 0;
}
return val;
}
function useInput(props, expose) {
var _toRefs = Vue.toRefs(props),
value = _toRefs.value,
modelValue = _toRefs.modelValue;
var inputValue = Vue.ref();
var isComposition = Vue.ref(false);
var compositionValue = Vue.ref();
var clearIconRef = Vue.ref(null);
var innerClickElement = Vue.ref();
var disabled = hooks_useDisabled.useDisabled();
var readonly = hooks_useReadonly.useReadonly();
var _useVModel = hooks_useVModel["default"](value, modelValue, props.defaultValue, props.onChange),
_useVModel2 = _slicedToArray__default["default"](_useVModel, 2),
innerValue = _useVModel2[0],
setInnerValue = _useVModel2[1];
var isHover = Vue.ref(false);
var focused = Vue.ref(false);
var renderType = Vue.ref(props.type);
var inputRef = Vue.ref(null);
var limitParams = Vue.computed(function () {
return {
value: [void 0, null].includes(innerValue.value) ? void 0 : String(innerValue.value),
status: props.status,
maxlength: Number(props.maxlength),
maxcharacter: props.maxcharacter,
allowInputOverMax: props.allowInputOverMax,
onValidate: props.onValidate
};
});
var _useLengthLimit = input_hooks_useLengthLimit.useLengthLimit(limitParams),
limitNumber = _useLengthLimit.limitNumber,
getValueByLimitNumber = _useLengthLimit.getValueByLimitNumber,
tStatus = _useLengthLimit.tStatus;
var showClear = Vue.computed(function () {
return (innerValue.value && !disabled.value && props.clearable && !readonly.value || props.showClearIconOnEmpty) && isHover.value;
});
var focus = function focus() {
var _inputRef$value;
focused.value = true;
(_inputRef$value = inputRef.value) === null || _inputRef$value === void 0 || _inputRef$value.focus();
};
var blur = function blur() {
var _inputRef$value2;
focused.value = false;
(_inputRef$value2 = inputRef.value) === null || _inputRef$value2 === void 0 || _inputRef$value2.blur();
};
var emitFocus = function emitFocus(e) {
var _props$onFocus;
if (isHover.value && focused.value) return;
inputValue.value = innerValue.value;
if (props.disabled) return;
focused.value = true;
(_props$onFocus = props.onFocus) === null || _props$onFocus === void 0 || _props$onFocus.call(props, innerValue.value, {
e: e
});
};
var emitClear = function emitClear(_ref) {
var _props$onClear;
var e = _ref.e;
var val = props.type === "number" ? void 0 : "";
setInnerValue(val, {
e: e,
trigger: "clear"
});
(_props$onClear = props.onClear) === null || _props$onClear === void 0 || _props$onClear.call(props, {
e: e
});
};
var onClearIconMousedown = function onClearIconMousedown(e) {
innerClickElement.value = e.target;
};
var emitPassword = function emitPassword() {
if (disabled.value) return;
var toggleType = renderType.value === "password" ? "text" : "password";
renderType.value = toggleType;
};
var setInputElValue = function setInputElValue() {
var v = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : "";
var inputEl = inputRef.value;
if (!inputEl) return;
var sV = String(v);
if (!inputEl.value) {
return;
}
if (inputEl.value !== sV) {
inputEl.value = sV;
}
};
var inputValueChangeHandle = function inputValueChangeHandle(e) {
var _innerValue$value;
var target = e.target;
var val = target.value;
if (props.type !== "number" && typeof innerValue.value === "string" && val.length > ((_innerValue$value = innerValue.value) === null || _innerValue$value === void 0 ? void 0 : _innerValue$value.length)) {
val = getValueByLimitNumber(val);
}
setInnerValue(getOutputValue(val, props.type), {
e: e,
trigger: "input"
});
Vue.nextTick(function () {
if (props.type === "number" && /\.(\d+)?0$/.test(val)) {
setInputElValue(val);
} else {
setInputElValue(innerValue.value);
}
});
};
var handleInput = function handleInput(e) {
var checkInputType = e.inputType && e.inputType === "insertCompositionText";
var val = e.currentTarget.value;
if (checkInputType || isComposition.value) {
compositionValue.value = val;
return;
}
inputValueChangeHandle(e);
};
var isClearIcon = function isClearIcon() {
var _clearIconRef$value;
var tmp = innerClickElement.value;
if (!tmp || !tmp.tagName || !((_clearIconRef$value = clearIconRef.value) !== null && _clearIconRef$value !== void 0 && _clearIconRef$value.$el) || !["path", "svg"].includes(tmp.tagName)) return false;
while (tmp) {
var _clearIconRef$value2;
if (((_clearIconRef$value2 = clearIconRef.value) === null || _clearIconRef$value2 === void 0 ? void 0 : _clearIconRef$value2.$el) === tmp) {
return true;
}
tmp = tmp.parentNode;
}
return false;
};
var formItem = Vue.inject(form_consts_index.FormItemInjectionKey, void 0);
var formatAndEmitBlur = function formatAndEmitBlur(e) {
if (!isClearIcon()) {
var _props$onBlur;
if (props.format) {
inputValue.value = typeof innerValue.value === "number" || props.type === "number" ? innerValue.value : props.format(innerValue.value);
}
focused.value = false;
(_props$onBlur = props.onBlur) === null || _props$onBlur === void 0 || _props$onBlur.call(props, innerValue.value, {
e: e
});
formItem === null || formItem === void 0 || formItem.handleBlur();
} else {
focus();
}
};
var onHandleCompositionend = function onHandleCompositionend(e) {
var _props$onCompositione;
isComposition.value = false;
compositionValue.value = "";
inputValueChangeHandle(e);
(_props$onCompositione = props.onCompositionend) === null || _props$onCompositione === void 0 || _props$onCompositione.call(props, String(innerValue.value), {
e: e
});
};
var onHandleCompositionstart = function onHandleCompositionstart(e) {
var _props$onCompositions;
isComposition.value = true;
var value2 = e.currentTarget.value;
compositionValue.value = value2;
(_props$onCompositions = props.onCompositionstart) === null || _props$onCompositions === void 0 || _props$onCompositions.call(props, String(innerValue.value), {
e: e
});
};
var onRootClick = function onRootClick(e) {
var _inputRef$value3, _props$onClick;
(_inputRef$value3 = inputRef.value) === null || _inputRef$value3 === void 0 || _inputRef$value3.focus();
(_props$onClick = props.onClick) === null || _props$onClick === void 0 || _props$onClick.call(props, {
e: e
});
};
Vue.watch(function () {
return props.autofocus;
}, function (value2) {
if (value2 === true) {
Vue.nextTick(function () {
var _inputRef$value4;
(_inputRef$value4 = inputRef.value) === null || _inputRef$value4 === void 0 || _inputRef$value4.focus();
});
}
}, {
immediate: true
});
Vue.watch(innerValue, function (val, oldVal) {
var isNumberType = props.type === "number";
if (oldVal === void 0 && props.format && typeof val !== "number" && !isNumberType) {
inputValue.value = props.format(val);
} else {
inputValue.value = val;
}
var newVal = typeof val === "number" ? val : getValueByLimitNumber(val);
if (newVal !== val && !isNumberType) {
setInnerValue(newVal, {
trigger: "initial"
});
}
}, {
immediate: true
});
Vue.watch(function () {
return props.type;
}, function (v) {
renderType.value = v;
}, {
immediate: true
});
expose({
inputRef: inputRef,
focus: focus,
blur: blur
});
return {
isHover: isHover,
focused: focused,
renderType: renderType,
showClear: showClear,
inputRef: inputRef,
clearIconRef: clearIconRef,
inputValue: inputValue,
isComposition: isComposition,
compositionValue: compositionValue,
limitNumber: limitNumber,
tStatus: tStatus,
emitFocus: emitFocus,
formatAndEmitBlur: formatAndEmitBlur,
onHandleCompositionend: onHandleCompositionend,
onHandleCompositionstart: onHandleCompositionstart,
onRootClick: onRootClick,
emitPassword: emitPassword,
handleInput: handleInput,
emitClear: emitClear,
onClearIconMousedown: onClearIconMousedown,
innerValue: innerValue
};
}
exports.getOutputValue = getOutputValue;
exports.useInput = useInput;
//# sourceMappingURL=useInput.js.map