tdesign-mobile-vue
Version:
tdesign-mobile-vue
339 lines (331 loc) • 14 kB
JavaScript
/**
* tdesign v1.12.1
* (c) 2025 TDesign Group
* @license MIT
*/
;
Object.defineProperty(exports, '__esModule', { value: true });
var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
var _defineProperty = require('@babel/runtime/helpers/defineProperty');
var Vue = require('vue');
var tdesignIconsVueNext = require('tdesign-icons-vue-next');
var config = require('../config.js');
var input_props = require('./props.js');
var form_const = require('../form/const.js');
var form_hooks = require('../form/hooks.js');
var hooks_useVModel = require('../hooks/useVModel.js');
var hooks_useClass = require('../hooks/useClass.js');
var hooks_tnode = require('../hooks/tnode.js');
var hooks_useLengthLimit = require('../hooks/useLengthLimit.js');
var shared_component = require('../shared/component.js');
var isFunction = require('../_chunks/dep-4850f616.js');
require('../_chunks/dep-95fefaab.js');
require('../_chunks/dep-1cdfb723.js');
require('@babel/runtime/helpers/typeof');
require('../_chunks/dep-744e59d5.js');
require('../_chunks/dep-8ebf5a71.js');
require('../_chunks/dep-2120a32b.js');
require('../_chunks/dep-1043f470.js');
require('../_chunks/dep-76d7e9c9.js');
require('../_chunks/dep-8983459f.js');
require('../_chunks/dep-dd180808.js');
require('../_chunks/dep-f487f3c9.js');
require('../_chunks/dep-0d34d1e2.js');
require('../_common/js/global-config/mobile/default-config.js');
require('../_common/js/global-config/mobile/locale/zh_CN.js');
require('../_chunks/dep-c7f7a976.js');
require('../_chunks/dep-bce5891c.js');
require('dayjs');
require('../_chunks/dep-71eea379.js');
require('../_chunks/dep-cb665fd6.js');
require('../_chunks/dep-5b9d3f6f.js');
require('../_chunks/dep-1df72545.js');
require('../_chunks/dep-6c43868d.js');
require('../_chunks/dep-eaef83bf.js');
require('../_chunks/dep-100be120.js');
require('../_chunks/dep-232d243a.js');
require('../_chunks/dep-ea7a6cdf.js');
require('../_chunks/dep-0d61faba.js');
require('../_chunks/dep-49426c60.js');
require('../_chunks/dep-d70ba5d5.js');
require('../_chunks/dep-f5df0fcf.js');
require('../_chunks/dep-c0b5e4e7.js');
require('../_chunks/dep-bac64a37.js');
require('../_chunks/dep-8e526cea.js');
require('../_chunks/dep-9c611a30.js');
require('../_chunks/dep-a618140f.js');
require('../_chunks/dep-ea4c3db5.js');
require('../hooks/render-tnode.js');
require('../_chunks/dep-e7771cff.js');
require('../_chunks/dep-92a74cf1.js');
require('../_chunks/dep-8436c713.js');
require('../_common/js/utils/general.js');
require('../_common/js/log/log.js');
require('../_common/js/utils/helper.js');
require('@babel/runtime/helpers/toConsumableArray');
require('@babel/runtime/helpers/objectWithoutProperties');
require('../_chunks/dep-8bcf9268.js');
require('../_chunks/dep-7a85cc29.js');
require('../_chunks/dep-a5172f92.js');
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
var _slicedToArray__default = /*#__PURE__*/_interopDefaultLegacy(_slicedToArray);
var _defineProperty__default = /*#__PURE__*/_interopDefaultLegacy(_defineProperty);
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty__default["default"](e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
var prefix = config["default"].prefix;
var _Input = Vue.defineComponent({
name: "".concat(prefix, "-input"),
props: _objectSpread(_objectSpread({}, input_props["default"]), {}, {
labelAlign: {
type: String,
default: "top"
},
pattern: {
type: String
},
inputmode: {
type: String,
validator: function validator(val) {
if (!val) return true;
return ["search", "text", "none", "url", "tel", "email", "numeric", "decimal"].includes(val);
}
}
}),
setup: function setup(props, context) {
var renderTNodeJSX = hooks_tnode.useTNodeJSX();
var inputClass = hooks_useClass.usePrefixClass("input");
var isDisabled = form_hooks.useFormDisabled();
var inputRef = Vue.ref();
var _toRefs = Vue.toRefs(props),
value = _toRefs.value,
modelValue = _toRefs.modelValue;
var _useVModel = hooks_useVModel["default"](value, modelValue, props.defaultValue, props.onChange),
_useVModel2 = _slicedToArray__default["default"](_useVModel, 2),
innerValue = _useVModel2[0],
setInnerValue = _useVModel2[1];
var status = props.status || "default";
var renderType = Vue.ref(props.type);
var focused = Vue.ref(false);
var formItem = Vue.inject(form_const.FormItemInjectionKey, void 0);
var inputClasses = Vue.computed(function () {
return ["".concat(inputClass.value, "__control"), _defineProperty__default["default"](_defineProperty__default["default"](_defineProperty__default["default"](_defineProperty__default["default"]({}, "".concat(inputClass.value, "--").concat(props.align), props.align !== "left"), "".concat(inputClass.value, "--").concat(status), status), "".concat(inputClass.value, "__control--disabled"), isDisabled.value), "".concat(inputClass.value, "--password"), renderType.value === "password")];
});
var rootClasses = Vue.computed(function () {
return [inputClass.value, _defineProperty__default["default"](_defineProperty__default["default"](_defineProperty__default["default"]({}, "".concat(inputClass.value, "--layout-").concat(props.layout), props.layout), "".concat(inputClass.value, "--center"), props.labelAlign === "center"), "".concat(inputClass.value, "--border"), !props.borderless)];
});
var showClear = Vue.computed(function () {
if (isDisabled.value || props.readonly === true) return false;
if (props.clearable && innerValue.value && String(innerValue.value).length > 0) {
return props.clearTrigger === "always" || props.clearTrigger === "focus" && focused.value;
}
return false;
});
var limitParams = Vue.computed(function () {
return {
value: [void 0, null].includes(innerValue.value) ? void 0 : String(innerValue.value),
maxlength: Number(props.maxlength),
maxcharacter: props.maxcharacter,
allowInputOverMax: props.allowInputOverMax,
status: props.status,
onValidate: props.onValidate
};
});
var _useLengthLimit = hooks_useLengthLimit["default"](limitParams),
getValueByLimitNumber = _useLengthLimit.getValueByLimitNumber;
var setInputValue = function setInputValue() {
var v = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : "";
var input = inputRef.value;
var sV = String(v);
if (!input) {
return;
}
if (input.value !== sV) {
input.value = sV;
}
};
var handleInput = function handleInput(e) {
if (e instanceof InputEvent) {
var checkInputType = e.inputType && e.inputType === "insertCompositionText";
if (e.isComposing || checkInputType) return;
}
inputValueChangeHandle(e);
};
var inputValueChangeHandle = function inputValueChangeHandle(e) {
var value2 = e.target.value;
setInnerValue(getValueByLimitNumber(value2));
Vue.nextTick(function () {
return setInputValue(innerValue.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();
};
shared_component.extendAPI({
focus: focus,
blur: blur
});
var handleClear = function handleClear(e) {
var _props$onClear;
e.preventDefault();
var val = props.type === "number" ? void 0 : "";
setInnerValue(val);
focus();
(_props$onClear = props.onClear) === null || _props$onClear === void 0 || _props$onClear.call(props, {
e: e
});
};
var handleFocus = function handleFocus(e) {
var _props$onFocus;
focused.value = true;
(_props$onFocus = props.onFocus) === null || _props$onFocus === void 0 || _props$onFocus.call(props, innerValue.value, {
e: e
});
};
var handleBlur = function handleBlur(e) {
var _props$onBlur2;
focused.value = false;
if (isFunction.isFunction(props.format)) {
setInnerValue(props.format(innerValue.value));
Vue.nextTick(function () {
var _props$onBlur;
setInputValue(innerValue.value);
(_props$onBlur = props.onBlur) === null || _props$onBlur === void 0 || _props$onBlur.call(props, innerValue.value, {
e: e
});
formItem === null || formItem === void 0 || formItem.handleBlur();
});
return;
}
(_props$onBlur2 = props.onBlur) === null || _props$onBlur2 === void 0 || _props$onBlur2.call(props, innerValue.value, {
e: e
});
formItem === null || formItem === void 0 || formItem.handleBlur();
};
var handleCompositionend = function handleCompositionend(e) {
inputValueChangeHandle(e);
};
var handlePwdIconClick = function handlePwdIconClick() {
if (isDisabled.value) return;
renderType.value = renderType.value === "password" ? "text" : "password";
};
Vue.watch(function () {
return props.autofocus;
}, function (v) {
if (v === true) {
Vue.nextTick(function () {
focus();
});
}
}, {
immediate: true
});
Vue.watch(function () {
return props.type;
}, function (v) {
renderType.value = v;
}, {
immediate: true
});
return function () {
var renderPrefix = function renderPrefix() {
var prefixIcon = renderTNodeJSX("prefixIcon");
var label = renderTNodeJSX("label");
return Vue.createVNode("div", {
"class": "".concat(inputClass.value, "__wrap--prefix")
}, [prefixIcon && Vue.createVNode("div", {
"class": "".concat(inputClass.value, "__icon--prefix")
}, [prefixIcon]), Vue.createVNode("div", {
"class": "".concat(inputClass.value, "__label")
}, [label])]);
};
var renderClearable = function renderClearable() {
if (showClear.value) {
return Vue.createVNode("div", {
"class": "".concat(inputClass.value, "__wrap--clearable-icon"),
"onTouchend": handleClear
}, [Vue.createVNode(tdesignIconsVueNext.CloseCircleFilledIcon, null, null)]);
}
return null;
};
var renderSuffix = function renderSuffix() {
var suffix = renderTNodeJSX("suffix");
if (!suffix) {
return null;
}
return Vue.createVNode("div", {
"class": "".concat(inputClass.value, "__wrap--suffix")
}, [suffix]);
};
var renderSuffixIcon = function renderSuffixIcon() {
var suffixIcon = renderTNodeJSX("suffixIcon");
if (props.type === "password") {
if (renderType.value === "password") {
suffixIcon = Vue.createVNode(tdesignIconsVueNext.BrowseOffIcon, {
"onClick": handlePwdIconClick
}, null);
} else if (renderType.value === "text") {
suffixIcon = Vue.createVNode(tdesignIconsVueNext.BrowseIcon, {
"onClick": handlePwdIconClick
}, null);
}
}
if (!suffixIcon) {
return null;
}
return Vue.createVNode("div", {
"class": "".concat(inputClass.value, "__wrap--suffix-icon")
}, [suffixIcon]);
};
var renderExtra = function renderExtra() {
return renderTNodeJSX("extra");
};
var renderTips = function renderTips() {
var tips = renderTNodeJSX("tips");
if (!tips) {
return null;
}
return Vue.createVNode("div", {
"class": "".concat(inputClass.value, "__tips ").concat(inputClass.value, "--").concat(props.align)
}, [tips]);
};
var inputAttrs = {
ref: inputRef,
class: inputClasses.value,
value: innerValue.value,
name: props.name,
type: renderType.value,
disabled: isDisabled.value,
autocomplete: props.autocomplete ? "On" : "Off",
placeholder: props.placeholder,
readonly: props.readonly,
pattern: props.pattern,
inputmode: props.inputmode,
spellcheck: props.spellCheck,
enterkeyhint: props.enterkeyhint,
style: {
"--td-input-cursor-color": props.cursorColor
},
onFocus: handleFocus,
onBlur: handleBlur,
onInput: handleInput,
onCompositionend: handleCompositionend
};
return Vue.createVNode("div", {
"class": rootClasses.value
}, [renderPrefix(), Vue.createVNode("div", {
"class": "".concat(inputClass.value, "__wrap")
}, [Vue.createVNode("div", {
"class": "".concat(inputClass.value, "__content ").concat(inputClass.value, "--").concat(status || "default")
}, [Vue.createVNode("input", inputAttrs, null), renderClearable(), renderSuffix(), renderSuffixIcon()]), renderTips()]), renderExtra()]);
};
}
});
exports["default"] = _Input;
//# sourceMappingURL=input.js.map